Tokens
Cakepop includes space and color pallete tokens. They are shown below.
space = {
0: '0px',
px: '1px',
0.5: '0.125rem' /* 2px */,
1: '0.25rem' /* 4px */,
1.5: '0.375rem' /* 6px */,
2: '0.5rem' /* 8px */,
2.5: '0.625rem' /* 10px */,
3: '0.75rem' /* 12px */,
3.5: '0.875rem' /* 14px */,
4: '1rem' /* 16px */,
5: '1.25rem' /* 20px */,
6: '1.5rem' /* 24px */,
7: '1.75rem' /* 28px */,
8: '2rem' /* 32px */,
9: '2.25rem' /* 36px */,
10: '2.5rem' /* 40px */,
11: '2.75rem' /* 44px */,
12: '3rem' /* 48px */,
14: '3.5rem' /* 56px */,
16: '4rem' /* 64px */,
20: '5rem' /* 80px */,
24: '6rem' /* 96px */,
28: '7rem' /* 112px */,
32: '8rem' /* 128px */,
36: '9rem' /* 144px */,
40: '10rem' /* 160px */,
44: '11rem' /* 176px */,
48: '12rem' /* 192px */,
52: '13rem' /* 208px */,
56: '14rem' /* 224px */,
60: '15rem' /* 240px */,
64: '16rem' /* 256px */,
72: '18rem' /* 288px */,
80: '20rem' /* 320px */,
96: '24rem' /* 384px */,
auto: 'auto',
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'11/12': '91.666667%',
full: '100%',
screen: '100v',
min: 'mincontent',
max: 'maxcontent',
fit: 'fitcontent',
};
export const colors = {
blue100: '#D6E4FF',
blue200: '#ADC8FF',
blue300: '#84A9FF',
blue400: '#6690FF',
blue500: '#3366FF',
blue600: '#254EDB',
blue700: '#1939B7',
blue800: '#102693',
blue900: '#091A7A',
green100: '#DCFBD6',
green200: '#B3F8AE',
green300: '#81EA84',
green400: '#5ED56D',
green500: '#30BA4E',
green600: '#239F4A',
green700: '#188545',
green800: '#0F6B3D',
green900: '#095939',
sky100: '#DCEFFE',
sky200: '#BADDFE',
sky300: '#97C8FD',
sky400: '#7CB4FB',
sky500: '#5295F9',
sky600: '#3B73D6',
sky700: '#2955B3',
sky800: '#1A3B90',
sky900: '#0F2877',
red100: '#FFE6D7',
red200: '#FFC7AF',
red300: '#FFA187',
red400: '#FF7D69',
red500: '#FF4238',
red600: '#DB282E',
red700: '#B71C2E',
red800: '#93112C',
red900: '#7A0A2A',
yellow100: '#FFFBDA',
yellow200: '#FFF7B5',
yellow300: '#FFF190',
yellow400: '#FFEC75',
yellow500: '#FFE347',
yellow600: '#DBBF33',
yellow700: '#B79C23',
yellow800: '#937A16',
yellow900: '#7A620D',
orange100: '#FFF6D8',
orange200: '#FFEAB1',
orange300: '#FFDB8A',
orange400: '#FFCC6D',
orange500: '#FFB43D',
orange600: '#DB902C',
orange700: '#B7701E',
orange800: '#935313',
orange900: '#7A3E0B',
purple100: '#FFE6D7',
purple200: '#F0ADFF',
purple300: '#E184FF',
purple400: '#D066FF',
purple500: '#B533FF',
purple600: '#8E25DB',
purple700: '#6A19B7',
purple800: '#4B1093',
purple900: '#35097A',
neutral100: '#f5f5f5',
neutral200: '#e5e5e5',
neutral300: '#d4d4d4',
neutral400: '#a3a3a3',
neutral500: '#737373',
neutral600: '#525252',
neutral700: '#404040',
neutral800: '#262626',
neutral900: '#171717',
};
pallete = {
inherit: 'inherit',
current: 'currentColor',
transparent: 'transparent',
black: '#000',
white: '#fff',
slate50: '#f8fafc',
slate100: '#f1f5f9',
slate200: '#e2e8f0',
slate300: '#cbd5e1',
slate400: '#94a3b8',
slate500: '#64748b',
slate600: '#475569',
slate700: '#334155',
slate800: '#1e293b',
slate900: '#0f172a',
gray50: '#f9fafb',
gray100: '#f3f4f6',
gray200: '#e5e7eb',
gray300: '#d1d5db',
gray400: '#9ca3af',
gray500: '#6b7280',
gray600: '#4b5563',
gray700: '#374151',
gray800: '#1f2937',
gray900: '#111827',
zinc50: '#fafafa',
zinc100: '#f4f4f5',
zinc200: '#e4e4e7',
zinc300: '#d4d4d8',
zinc400: '#a1a1aa',
zinc500: '#71717a',
zinc600: '#52525b',
zinc700: '#3f3f46',
zinc800: '#27272a',
zinc900: '#18181b',
neutral50: '#fafafa',
neutral100: '#f5f5f5',
neutral200: '#e5e5e5',
neutral300: '#d4d4d4',
neutral400: '#a3a3a3',
neutral500: '#737373',
neutral600: '#525252',
neutral700: '#404040',
neutral800: '#262626',
neutral900: '#171717',
stone50: '#fafaf9',
stone100: '#f5f5f4',
stone200: '#e7e5e4',
stone300: '#d6d3d1',
stone400: '#a8a29e',
stone500: '#78716c',
stone600: '#57534e',
stone700: '#44403c',
stone800: '#292524',
stone900: '#1c1917',
red50: '#fef2f2',
red100: '#fee2e2',
red200: '#fecaca',
red300: '#fca5a5',
red400: '#f87171',
red500: '#ef4444',
red600: '#dc2626',
red700: '#b91c1c',
red800: '#991b1b',
red900: '#7f1d1d',
orange50: '#fff7ed',
orange100: '#ffedd5',
orange200: '#fed7aa',
orange300: '#fdba74',
orange400: '#fb923c',
orange500: '#f97316',
orange600: '#ea580c',
orange700: '#c2410c',
orange800: '#9a3412',
orange900: '#7c2d12',
amber50: '#fffbeb',
amber100: '#fef3c7',
amber200: '#fde68a',
amber300: '#fcd34d',
amber400: '#fbbf24',
amber500: '#f59e0b',
amber600: '#d97706',
amber700: '#b45309',
amber800: '#92400e',
amber900: '#78350f',
yellow50: '#fefce8',
yellow100: '#fef9c3',
yellow200: '#fef08a',
yellow300: '#fde047',
yellow400: '#facc15',
yellow500: '#eab308',
yellow600: '#ca8a04',
yellow700: '#a16207',
yellow800: '#854d0e',
yellow900: '#713f12',
lime50: '#f7fee7',
lime100: '#ecfccb',
lime200: '#d9f99d',
lime300: '#bef264',
lime400: '#a3e635',
lime500: '#84cc16',
lime600: '#65a30d',
lime700: '#4d7c0f',
lime800: '#3f6212',
lime900: '#365314',
green50: '#f0fdf4',
green100: '#dcfce7',
green200: '#bbf7d0',
green300: '#86efac',
green400: '#4ade80',
green500: '#22c55e',
green600: '#16a34a',
green700: '#15803d',
green800: '#166534',
green900: '#14532d',
emerald50: '#ecfdf5',
emerald100: '#d1fae5',
emerald200: '#a7f3d0',
emerald300: '#6ee7b7',
emerald400: '#34d399',
emerald500: '#10b981',
emerald600: '#059669',
emerald700: '#047857',
emerald800: '#065f46',
emerald900: '#064e3b',
teal50: '#f0fdfa',
teal100: '#ccfbf1',
teal200: '#99f6e4',
teal300: '#5eead4',
teal400: '#2dd4bf',
teal500: '#14b8a6',
teal600: '#0d9488',
teal700: '#0f766e',
teal800: '#115e59',
teal900: '#134e4a',
cyan50: '#ecfeff',
cyan100: '#cffafe',
cyan200: '#a5f3fc',
cyan300: '#67e8f9',
cyan400: '#22d3ee',
cyan500: '#06b6d4',
cyan600: '#0891b2',
cyan700: '#0e7490',
cyan800: '#155e75',
cyan900: '#164e63',
sky50: '#f0f9ff',
sky100: '#e0f2fe',
sky200: '#bae6fd',
sky300: '#7dd3fc',
sky400: '#38bdf8',
sky500: '#0ea5e9',
sky600: '#0284c7',
sky700: '#0369a1',
sky800: '#075985',
sky900: '#0c4a6e',
blue50: '#eff6ff',
blue100: '#dbeafe',
blue200: '#bfdbfe',
blue300: '#93c5fd',
blue400: '#60a5fa',
blue500: '#3b82f6',
blue600: '#2563eb',
blue700: '#1d4ed8',
blue800: '#1e40af',
blue900: '#1e3a8a',
indigo50: '#eef2ff',
indigo100: '#e0e7ff',
indigo200: '#c7d2fe',
indigo300: '#a5b4fc',
indigo400: '#818cf8',
indigo500: '#6366f1',
indigo600: '#4f46e5',
indigo700: '#4338ca',
indigo800: '#3730a3',
indigo900: '#312e81',
violet50: '#f5f3ff',
violet100: '#ede9fe',
violet200: '#ddd6fe',
violet300: '#c4b5fd',
violet400: '#a78bfa',
violet500: '#8b5cf6',
violet600: '#7c3aed',
violet700: '#6d28d9',
violet800: '#5b21b6',
violet900: '#4c1d95',
purple50: '#faf5ff',
purple100: '#f3e8ff',
purple200: '#e9d5ff',
purple300: '#d8b4fe',
purple400: '#c084fc',
purple500: '#a855f7',
purple600: '#9333ea',
purple700: '#7e22ce',
purple800: '#6b21a8',
purple900: '#581c87',
fuchsia50: '#fdf4ff',
fuchsia100: '#fae8ff',
fuchsia200: '#f5d0fe',
fuchsia300: '#f0abfc',
fuchsia400: '#e879f9',
fuchsia500: '#d946ef',
fuchsia600: '#c026d3',
fuchsia700: '#a21caf',
fuchsia800: '#86198f',
fuchsia900: '#701a75',
pink50: '#fdf2f8',
pink100: '#fce7f3',
pink200: '#fbcfe8',
pink300: '#f9a8d4',
pink400: '#f472b6',
pink500: '#ec4899',
pink600: '#db2777',
pink700: '#be185d',
pink800: '#9d174d',
pink900: '#831843',
rose50: '#fff1f2',
rose100: '#ffe4e6',
rose200: '#fecdd3',
rose300: '#fda4af',
rose400: '#fb7185',
rose500: '#f43f5e',
rose600: '#e11d48',
rose700: '#be123c',
rose800: '#9f1239',
rose900: '#881337',
};Last updated on February 16, 2023