@abdalla-1/swisco
Version:
Swiscare Components Kit
367 lines (304 loc) • 8.98 kB
text/typescript
const blue = {
/** @deprecated – use blue.100 instead */
'blue.50': '#E6ECFF',
'blue.100': '#E6ECFF',
'blue.200': '#ABC0FF',
'blue.300': '#6F92FF',
'blue.400': '#3A6AFF',
'blue.500': '#1D53FF',
'blue.600': '#0A41EE',
'blue.700': '#002EBF',
'blue.800': '#002086',
'blue.900': '#00155A',
/** @deprecated – use blue.900 instead */
'blue.950': '#00155A',
};
const gray = {
/** @deprecated - use gray.50 instead */
'gray.50': '#F5F4EF',
'gray.100': '#f5f4ef',
'gray.200': '#e6e5e0',
'gray.300': '#d4d3ce',
'gray.400': '#a6a49d',
'gray.500': '#74736e',
'gray.600': '#595751',
'gray.700': '#41403b',
'gray.800': '#2f2f2f',
'gray.900': '#232021',
};
const red = {
/** @deprecated - use red.100 instead */
'red.50': '#FFE5E5',
'red.100': '#FFE5E5',
'red.200': '#FFCECE',
'red.300': '#FF6C6C',
'red.400': '#F43232',
'red.500': '#DE0000',
'red.600': '#C30000',
'red.700': '#840000',
'red.800': '#550000',
'red.900': '#2A0000',
/** @deprecated - use red.900 instead */
'red.950': '#2A0000',
};
const green = {
/** @deprecated - use green.50 instead */
'green.50': '#E5FFED',
'green.100': '#E5FFED',
'green.200': '#B5FFCC',
'green.300': '#83F6A3',
'green.400': '#47EF76',
'green.500': '#1DD751',
'green.600': '#0AB43A',
'green.700': '#008124',
'green.800': '#00601B',
'green.900': '#002F0D',
/** @deprecated - use green.900 instead */
'green.950': '#002F0D',
};
const orange = {
/** @deprecated - use orange.50 instead */
'orange.50': '#FFF5E5',
'orange.100': '#FFF5E5',
'orange.200': '#FFE6BE',
'orange.300': '#FFCD81',
'orange.400': '#FFB039',
'orange.500': '#FF9900',
'orange.600': '#D68100',
'orange.700': '#8C5400',
'orange.800': '#5D3800',
'orange.900': '#352000',
/** @deprecated - use orange.900 instead */
'orange.950': '#352000',
};
const yellow = {
/** @deprecated - use yellow.50 instead */
'yellow.50': '#FFF9E5',
'yellow.100': '#FFF9E5',
'yellow.200': '#FFECAD',
'yellow.300': '#FFE89A',
'yellow.400': '#FFDD6D',
'yellow.500': '#FFD23B',
'yellow.600': '#F6C728',
'yellow.700': '#E6B40F',
'yellow.800': '#9F7A00',
'yellow.900': '#534000',
/** @deprecated - use yellow.900 instead */
'yellow.950': '#534000',
};
const sky = {
'sky.100': '#E5F7FF',
'sky.200': '#CCF0FF',
'sky.300': '#83DAFF',
'sky.400': '#3DC4FF',
'sky.500': '#00B2FF',
'sky.600': '#009EE4',
'sky.700': '#0086C0',
'sky.800': '#005478',
'sky.900': '#00364D',
};
const lime = {
'lime.100': '#EEF5DC',
'lime.200': '#E8FABB',
'lime.300': '#DCFE83',
'lime.400': '#D7FE6E',
'lime.500': '#C3F53C',
'lime.600': '#B1E523',
'lime.700': '#94C60C',
'lime.800': '#567500',
'lime.900': '#3B5100',
};
const purple = {
'purple.100': '#F2E5FF',
'purple.200': '#E7D0FF',
'purple.300': '#D9B4FF',
'purple.400': '#C182FF',
'purple.500': '#B469FF',
'purple.600': '#9842EE',
'purple.700': '#7415D5',
'purple.800': '#5B06B1',
'purple.900': '#420084',
};
const pink = {
'pink.100': '#FFE5EF',
'pink.200': '#FFD2E3',
'pink.300': '#FFB6D2',
'pink.400': '#FF94BD',
'pink.500': '#FF73A9',
'pink.600': '#EC4F8C',
'pink.700': '#D32367',
'pink.800': '#9B1046',
'pink.900': '#6D002A',
};
export const color = {
white: '#FFFFFF',
black: '#000000',
...blue,
...gray,
...green,
...orange,
...red,
...yellow,
...sky,
...lime,
...purple,
...pink,
/** @deprecated */
'interaction.focus.light': '#BAD2F8',
/** @deprecated */
'interaction.focus.dark': '#AFCBF7',
};
export const colors = {
light: {
white: color.white,
black: color.black,
'primary.subtle': color['blue.100'],
'primary.normal': color['blue.500'],
'primary.heavy': color['blue.600'],
'foreground.main': color['gray.900'],
'foreground.secondary': color['gray.700'],
'foreground.tertiary': color['gray.500'],
'background.main': color.white,
'background.secondary': color['gray.100'],
'background.tertiary': color['gray.200'],
/** @deprecated - use border instead */
'divider.subtle': color['gray.100'],
/** @deprecated - use border instead */
'divider.normal': color['gray.200'],
/** @deprecated - use border instead */
'divider.heavy': color['gray.900'],
'border.subtle': color['gray.200'],
'border.normal': color['gray.300'],
'border.heavy': color['gray.900'],
'red.subtle': color['red.100'],
'red.normal': color['red.500'],
'red.heavy': color['red.900'],
'green.subtle': color['green.100'],
'green.normal': color['green.500'],
'green.heavy': color['green.800'],
'orange.subtle': color['orange.100'],
'orange.normal': color['orange.500'],
'orange.heavy': color['orange.800'],
'yellow.subtle': color['yellow.100'],
'yellow.normal': color['yellow.500'],
'yellow.heavy': color['yellow.900'],
'pink.subtle': color['pink.100'],
'pink.normal': color['pink.500'],
'pink.heavy': color['pink.900'],
'lime.subtle': color['lime.100'],
'lime.normal': color['lime.500'],
'lime.heavy': color['lime.900'],
'purple.subtle': color['purple.100'],
'purple.normal': color['purple.500'],
'purple.heavy': color['purple.700'],
'sky.subtle': color['sky.100'],
'sky.normal': color['sky.500'],
'sky.heavy': color['sky.900'],
/** @deprecated */
'interaction.focus': color['interaction.focus.light'],
},
dark: {
white: color.white,
black: color.black,
'primary.subtle': color['blue.900'],
'primary.normal': color['blue.500'],
'primary.heavy': color['blue.600'],
'foreground.main': color.white,
'foreground.secondary': color['gray.300'],
'foreground.tertiary': color['gray.500'],
'background.main': color['gray.900'],
'background.secondary': color['gray.800'],
'background.tertiary': color['gray.700'],
/** @deprecated - use border instead */
'divider.subtle': color['gray.800'],
/** @deprecated - use border instead */
'divider.normal': color['gray.700'],
/** @deprecated - use border instead */
'divider.heavy': color['gray.600'],
'border.subtle': color['gray.800'],
'border.normal': color['gray.700'],
'border.heavy': color['gray.600'],
'red.subtle': color['red.900'],
'red.normal': color['red.500'],
'red.heavy': color['red.600'],
'green.subtle': color['green.900'],
'green.normal': color['green.500'],
'green.heavy': color['green.600'],
'orange.subtle': color['orange.900'],
'orange.normal': color['orange.400'],
'orange.heavy': color['orange.500'],
'yellow.subtle': color['yellow.900'],
'yellow.normal': color['yellow.400'],
'yellow.heavy': color['yellow.500'],
'pink.subtle': color['pink.900'],
'pink.normal': color['pink.500'],
'pink.heavy': color['pink.700'],
'lime.subtle': color['lime.900'],
'lime.normal': color['lime.500'],
'lime.heavy': color['lime.600'],
'purple.subtle': color['purple.900'],
'purple.normal': color['purple.500'],
'purple.heavy': color['purple.600'],
'sky.subtle': color['sky.900'],
'sky.normal': color['sky.500'],
'sky.heavy': color['sky.700'],
/** @deprecated */
'interaction.focus': color['interaction.focus.dark'],
},
};
export const themeColors = {
light: {
// Swisco color tokens.
...colors.light,
// Tamagui tokens
transparent: '#FFFFFF00',
color: color['gray.900'],
background: color.white,
borderColor: color['gray.200'],
backgroundStrong: '#FF0000',
backgroundSoft: '#FF0000',
backgroundHover: color['gray.50'],
backgroundPress: color['gray.100'],
backgroundFocus: color['gray.50'],
backgroundTransparent: '#FFFFFF00',
colorHover: '#FF0000',
colorPress: '#FF0000',
colorFocus: '#FF0000',
colorTranslucent: '#FFFFFF00',
colorMid: '#FF0000',
shadowColor: '#00000020',
shadowColorHover: '#FF0000',
shadowColorPress: '#FF0000',
shadowColorFocus: '#FF0000',
borderColorHover: color['gray.300'],
borderColorPress: '#FF0000',
borderColorFocus: color['blue.100'],
},
dark: {
// Swisco color tokens.
...colors.dark,
// Tamagui tokens
transparent: '#00000000',
color: color.white,
background: color['gray.900'],
borderColor: color['gray.700'],
backgroundStrong: '#FF0000',
backgroundSoft: '#FF0000',
backgroundHover: color['gray.800'],
backgroundPress: color['gray.700'],
backgroundFocus: color['gray.800'],
backgroundTransparent: '#00000000',
colorHover: '#FF0000',
colorPress: '#FF0000',
colorFocus: '#FF0000',
colorTranslucent: '#00000000',
colorMid: '#FF0000',
shadowColor: '#000000',
shadowColorHover: '#FF0000',
shadowColorPress: '#FF0000',
shadowColorFocus: '#FF0000',
borderColorHover: color['gray.600'],
borderColorPress: '#FF0000',
borderColorFocus: color['blue.500'],
},
};