@ya-accelerators/nextjs-framework 0.0.0

package/dist/styles/tailwind.config.ts

@@ -0,0 +1,672 @@
+const primitive = {
+  black: {
+    5: 'rgba(0, 0, 0, 0.95)',
+    10: 'rgba(0, 0, 0, 0.90)',
+    20: 'rgba(0, 0, 0, 0.80)',
+    30: 'rgba(0, 0, 0, 0.70)',
+    40: 'rgba(0, 0, 0, 0.60)',
+    50: 'rgba(0, 0, 0, 0.50)',
+    60: 'rgba(0, 0, 0, 0.60)',
+    70: 'rgba(0, 0, 0, 0.70)',
+    80: 'rgba(0, 0, 0, 0.80)',
+    90: 'rgba(0, 0, 0, 0.90)',
+    95: 'rgba(0, 0, 0, 0.95)',
+    98: 'rgba(0, 0, 0, 0.98)',
+    99: 'rgba(0, 0, 0, 0.99)',
+    100: '#000000',
+  },
+  white: {
+    5: 'rgba(255, 255, 255, 0.05)',
+    10: 'rgba(255, 255, 255, 0.1)',
+    20: 'rgba(255, 255, 255, 0.2)',
+    30: 'rgba(255, 255, 255, 0.3)',
+    40: 'rgba(255, 255, 255, 0.4)',
+    50: 'rgba(255, 255, 255, 0.5)',
+    60: 'rgba(255, 255, 255, 0.6)',
+    70: 'rgba(255, 255, 255, 0.7)',
+    80: 'rgba(255, 255, 255, 0.8)',
+    90: 'rgba(255, 255, 255, 0.9)',
+    95: 'rgba(255, 255, 255, 0.95)',
+    98: 'rgba(255, 255, 255, 0.98)',
+    99: 'rgba(255, 255, 255, 0.99)',
+    100: '#FFFFFF',
+  },
+  tealOpacity: {
+    20: 'rgba(72, 160, 129, 0.2)',
+    40: 'rgba(72, 160, 129, 0.4)',
+    60: 'rgba(72, 160, 129, 0.6)',
+    80: 'rgba(72, 160, 129, 0.8)',
+    100: '#48A081',
+  },
+  primary: {
+    0: '#000000',
+    5: '#001414',
+    10: '#002020',
+    15: '#002B2B',
+    20: '#003736',
+    25: '#004343',
+    30: '#00504F',
+    35: '#005C5C',
+    40: '#006A69',
+    50: '#008584',
+    60: '#00A1A0',
+    70: '#1FBEBD',
+    80: '#4DDAD9',
+    90: '#6FF7F5',
+    95: '#AEFFFD',
+    98: '#E3FFFE',
+    99: '#F1FFFF',
+    100: '#FFFFFF',
+  },
+  secondary: {
+    0: '#000000',
+    5: '#001414',
+    10: '#051F1F',
+    15: '#102A29',
+    20: '#1B3534',
+    25: '#27403F',
+    30: '#324B4B',
+    35: '#3E5756',
+    40: '#4A6362',
+    50: '#627C7B',
+    60: '#7B9695',
+    70: '#95B0AF',
+    80: '#B0CCCB',
+    90: '#CCE8E7',
+    95: '#DAF6F5',
+    98: '#E3FFFE',
+    99: '#F1FFFE',
+    100: '#FFFFFF',
+  },
+  tertiary: {
+    0: '#000000',
+    5: '#001126',
+    10: '#031C35',
+    15: '#102740',
+    20: '#1C314B',
+    25: '#273D57',
+    30: '#334863',
+    35: '#3F546F',
+    40: '#4B607C',
+    50: '#637996',
+    60: '#7D92B0',
+    70: '#97ADCC',
+    80: '#B2C8E8',
+    90: '#D2E4FF',
+    95: '#EAF1FF',
+    98: '#F8F9FF',
+    99: '#FDFCFF',
+    100: '#FFFFFF',
+  },
+  neutral: {
+    0: '#000000',
+    5: '#0E1211',
+    10: '#191C1C',
+    15: '#232626',
+    20: '#2D3131',
+    25: '#383C3C',
+    30: '#444747',
+    35: '#4F5353',
+    40: '#5B5F5F',
+    50: '#747877',
+    60: '#8E9191',
+    70: '#A9ACAB',
+    80: '#C4C7C6',
+    90: '#E0E3E2',
+    95: '#EFF1F0',
+    98: '#F7FAF9',
+    99: '#FAFDFC',
+    100: '#FFFFFF',
+  },
+  neutralVariant: {
+    0: '#000000',
+    5: '#091312',
+    10: '#141D1D',
+    15: '#1E2827',
+    20: '#293232',
+    25: '#343D3D',
+    30: '#3F4948',
+    35: '#4A5454',
+    40: '#566060',
+    50: '#6F7978',
+    60: '#889392',
+    70: '#A3ADAC',
+    80: '#BEC9C8',
+    90: '#DAE5E4',
+    95: '#E8F3F2',
+    98: '#F1FBFA',
+    99: '#F4FEFD',
+    100: '#FFFFFF',
+  },
+  red: {
+    0: '#000000',
+    5: '#2D0001',
+    10: '#410002',
+    15: '#540003',
+    20: '#690005',
+    25: '#7E0007',
+    30: '#93000A',
+    35: '#A51114',
+    40: '#B7211E',
+    50: '#DA3C34',
+    60: '#FE554A',
+    70: '#FF897D',
+    80: '#FFB4AB',
+    90: '#FFDAD6',
+    95: '#FFEDEA',
+    98: '#FFF8F7',
+    99: '#FFFBFF',
+    100: '#FFFFFF',
+  },
+  orange: {
+    0: '#000000',
+    5: '#220A00',
+    10: '#321300',
+    15: '#421B00',
+    20: '#522300',
+    25: '#632B00',
+    30: '#753400',
+    35: '#873D00',
+    40: '#994700',
+    50: '#BF5A00',
+    60: '#E76E00',
+    70: '#FF8D3F',
+    80: '#FFB68B',
+    90: '#FFDBC8',
+    95: '#FFEDE5',
+    98: '#FFF8F5',
+    99: '#FFFBFF',
+    100: '#FFFFFF',
+  },
+  amber: {
+    0: '#000000',
+    5: '#1B0E00',
+    10: '#291800',
+    15: '#362100',
+    20: '#452B00',
+    25: '#533500',
+    30: '#624000',
+    35: '#724A00',
+    40: '#825500',
+    50: '#A26C00',
+    60: '#C48300',
+    70: '#E89C00',
+    80: '#FFB94E',
+    90: '#FFDDB2',
+    95: '#FFEEDC',
+    98: '#FFF8F4',
+    99: '#FFFBFF',
+    100: '#FFFFFF',
+  },
+  yellow: {
+    0: '#000000',
+    5: '#161000',
+    10: '#231B00',
+    15: '#2F2500',
+    20: '#3B2F00',
+    25: '#483A00',
+    30: '#554500',
+    35: '#635100',
+    40: '#715C00',
+    50: '#8E7500',
+    60: '#AC8E00',
+    70: '#CBA800',
+    80: '#ECC300',
+    90: '#FFE17A',
+    95: '#FFF0C7',
+    98: '#FFF8EF',
+    99: '#FFFBFF',
+    100: '#FFFFFF',
+  },
+  lime: {
+    0: '#000000',
+    5: '#101200',
+    10: '#1B1D00',
+    15: '#252800',
+    20: '#303300',
+    25: '#3A3F00',
+    30: '#464A00',
+    35: '#515700',
+    40: '#5D6300',
+    50: '#757D00',
+    60: '#8F9800',
+    70: '#A9B316',
+    80: '#C5CF37',
+    90: '#E1EC52',
+    95: '#EFFA5F',
+    98: '#FAFFAE',
+    99: '#FEFFD5',
+    100: '#FFFFFF',
+  },
+  green: {
+    0: '#000000',
+    5: '#021500',
+    10: '#042100',
+    15: '#072D00',
+    20: '#0B3900',
+    25: '#0F4500',
+    30: '#145200',
+    35: '#186000',
+    40: '#1D6F07',
+    50: '#226D07',
+    60: '#3C8724',
+    70: '#56A23C',
+    80: '#70BE54',
+    90: '#8ADA6C',
+    95: '#A5F785',
+    98: '#CCFFB3',
+    99: '#EDFFE0',
+    100: '#F7FFED',
+  },
+  teal: {
+    0: '#000000',
+    5: '#00150D',
+    10: '#002116',
+    15: '#002C1F',
+    20: '#003828',
+    25: '#004432',
+    30: '#00513C',
+    35: '#005E46',
+    40: '#006C50',
+    50: '#2A8668',
+    60: '#48A081',
+    70: '#64BB9A',
+    80: '#80D7B5',
+    90: '#9CF4D0',
+    95: '#BCFFE1',
+    98: '#E7FFF2',
+    99: '#F4FFF7',
+    100: '#FFFFFF',
+  },
+  cyan: {
+    0: '#000000',
+    5: '#001414',
+    10: '#00201F',
+    15: '#002B2A',
+    20: '#003736',
+    25: '#004342',
+    30: '#00504F',
+    35: '#005C5B',
+    40: '#006A68',
+    50: '#008583',
+    60: '#00A19F',
+    70: '#3ABDBA',
+    80: '#5DD9D6',
+    90: '#7DF5F3',
+    95: '#AEFFFC',
+    98: '#E3FFFD',
+    99: '#F1FFFE',
+    100: '#FFFFFF',
+  },
+  blue: {
+    0: '#000000',
+    5: '#001128',
+    10: '#001C3B',
+    15: '#00264D',
+    20: '#003060',
+    25: '#003C73',
+    30: '#004787',
+    35: '#00539B',
+    40: '#005FB1',
+    50: '#0077DC',
+    60: '#2C91FF',
+    70: '#73ADFF',
+    80: '#A6C8FF',
+    90: '#D5E3FF',
+    95: '#EBF1FF',
+    98: '#F9F9FF',
+    99: '#FDFBFF',
+    100: '#FFFFFF',
+  },
+  indigo: {
+    0: '#000000',
+    5: '#000644',
+    10: '#000C60',
+    15: '#00137C',
+    20: '#031B95',
+    25: '#182BA0',
+    30: '#2738AB',
+    35: '#3546B7',
+    40: '#4253C4',
+    50: '#5C6CDE',
+    60: '#7787FB',
+    70: '#99A5FF',
+    80: '#BCC3FF',
+    90: '#DFE0FF',
+    95: '#F0EFFF',
+    98: '#FBF8FF',
+    99: '#FFFBFF',
+    100: '#FFFFFF',
+  },
+  purple: {
+    0: '#000000',
+    5: '#1A003D',
+    10: '#280056',
+    15: '#35006F',
+    20: '#420486',
+    25: '#4E1A91',
+    30: '#5A2A9D',
+    35: '#6637AA',
+    40: '#7345B7',
+    50: '#8C5FD2',
+    60: '#A779EE',
+    70: '#C098FF',
+    80: '#D6BAFF',
+    90: '#ECDCFF',
+    95: '#F8EDFF',
+    98: '#FEF7FF',
+    99: '#FFFBFF',
+    100: '#FFFFFF',
+  },
+  pink: {
+    0: '#000000',
+    5: '#270022',
+    10: '#3A0032',
+    15: '#4B0042',
+    20: '#5E0053',
+    25: '#710064',
+    30: '#801271',
+    35: '#8F227E',
+    40: '#9E318B',
+    50: '#BC4BA6',
+    60: '#DA65C1',
+    70: '#F980DE',
+    80: '#FFACE7',
+    90: '#FFD7F0',
+    95: '#FFECF5',
+    98: '#FFF7F9',
+    99: '#FFFBFF',
+    100: '#FFFFFF',
+  },
+  rose: {
+    0: '#000000',
+    5: '#2B0012',
+    10: '#3E001D',
+    15: '#510028',
+    20: '#650033',
+    25: '#79003E',
+    30: '#8D044A',
+    35: '#9D1856',
+    40: '#AD2762',
+    50: '#CE427B',
+    60: '#EF5C95',
+    70: '#FF84AF',
+    80: '#FFB1C8',
+    90: '#FFD9E2',
+    95: '#FFECF0',
+    98: '#FFF8F8',
+    99: '#FFFBFF',
+    100: '#FFFFFF',
+  },
+} as const
+
+// https://uicolors.app/create
+const primary = {
+  50: '#f0fafb',
+  100: '#d8eff5',
+  200: '#b6e1eb',
+  300: '#83c9dd',
+  400: '#4aa9c6',
+  500: '#2f90b0',
+  600: '#297291',
+  700: '#275e77',
+  800: '#284e62',
+  900: '#254254',
+  950: '#142a38',
+}
+const secondary = {
+  50: '#f6f6f6',
+  100: '#e7e7e7',
+  200: '#d1d1d1',
+  300: '#b0b0b0',
+  400: '#808080',
+  500: '#6d6d6d',
+  600: '#5d5d5d',
+  700: '#4f4f4f',
+  800: '#454545',
+  900: '#3d3d3d',
+  950: '#262626',
+}
+const accent = {
+  50: '#fdffe5',
+  100: '#f8ffc7',
+  200: '#f1ff95',
+  300: '#e8ff5d',
+  400: '#daff26',
+  500: '#c1e600',
+  600: '#99b800',
+  700: '#758c00',
+  800: '#5e7000',
+  900: '#4c5c00',
+  950: '#293300',
+}
+const error = {
+  50: '#fff0f2',
+  100: '#ffdde1',
+  200: '#ffc1c9',
+  300: '#ff97a4',
+  400: '#ff5b6f',
+  500: '#ff2842',
+  600: '#fa0825',
+  700: '#d0021b',
+  800: '#ae061a',
+  900: '#8f0d1d',
+  950: '#4f000a',
+}
+const warning = {
+  50: '#fefce8',
+  100: '#fffbc2',
+  200: '#fff289',
+  300: '#ffe345',
+  400: '#fdd012',
+  500: '#ecb606',
+  600: '#cc8d02',
+  700: '#a36305',
+  800: '#864e0d',
+  900: '#724011',
+  950: '#432105',
+}
+const success = {
+  50: '#ebfef3',
+  100: '#d0fbe1',
+  200: '#a4f6c9',
+  300: '#6aebad',
+  400: '#2fd88c',
+  500: '#0abf74',
+  600: '#00b16b',
+  700: '#007c4e',
+  800: '#03623f',
+  900: '#045036',
+  950: '#012d1f',
+}
+const info = {
+  50: '#f2f7fc',
+  100: '#e2edf7',
+  200: '#cbe0f2',
+  300: '#a8cce8',
+  400: '#7eb1dc',
+  500: '#6095d1',
+  600: '#4c7dc4',
+  700: '#426ab3',
+  800: '#3b5792',
+  900: '#334a75',
+  950: '#232f48',
+}
+
+const config = {
+  theme: {
+    colors: {
+      primitive,
+      primary: {
+        default: {
+          bg: `light-dark(${primary[500]},${primary[500]})`,
+          on: 'light-dark(#FFFFFF,#FFFFFF)',
+        },
+        container: {
+          bg: `light-dark(${primary[300]},${primary[300]})`,
+          on: `light-dark(${primary[500]},${primary[500]})`,
+        },
+      },
+      secondary: {
+        default: {
+          bg: `light-dark(${secondary[500]},${secondary[500]})`,
+          on: `light-dark(${secondary[100]},${secondary[100]})`,
+        },
+        container: {
+          bg: `light-dark(${secondary[300]},${secondary[300]})`,
+          on: `light-dark(${secondary[500]},${secondary[500]})`,
+        },
+      },
+      accent: {
+        default: {
+          bg: `light-dark(${accent[500]},${accent[500]})`,
+          on: `light-dark(${accent[100]},${accent[100]})`,
+        },
+        container: {
+          bg: `light-dark(${accent[300]},${accent[300]})`,
+          on: `light-dark(${accent[500]},${accent[500]})`,
+        },
+      },
+      error: {
+        default: {
+          bg: `light-dark(${error[500]},${error[500]})`,
+          on: 'light-dark(#FFFFFF,#FFFFFF)',
+        },
+        container: {
+          bg: `light-dark(${error[300]},${error[300]})`,
+          on: `light-dark(${error[500]},${error[500]})`,
+        },
+      },
+      warning: {
+        default: {
+          bg: `light-dark(${warning[400]},${warning[400]})`,
+          on: 'light-dark(#FFFFFF,#FFFFFF)',
+        },
+        container: {
+          bg: `light-dark(${warning[200]},${warning[200]})`,
+          on: `light-dark(${warning[500]},${warning[500]})`,
+        },
+      },
+      success: {
+        default: {
+          bg: `light-dark(${success[500]},${success[500]})`,
+          on: 'light-dark(#FFFFFF,#FFFFFF)',
+        },
+        container: {
+          bg: `light-dark(${success[300]},${success[300]})`,
+          on: `light-dark(${success[500]},${success[500]})`,
+        },
+      },
+      info: {
+        default: {
+          bg: `light-dark(${info[500]},${info[500]})`,
+          on: 'light-dark(#FFFFFF,#FFFFFF)',
+        },
+        container: {
+          bg: `light-dark(${info[300]},${info[300]})`,
+          on: `light-dark(${info[500]},${info[500]})`,
+        },
+      },
+      mainText: {
+        default: 'light-dark(#2C2C2C,#D1D1D1)',
+        container: 'light-dark(#2C2C2C,#D1D1D1)',
+      },
+      subText: {
+        default: 'light-dark(#595959,#A1A1A1)',
+        container: 'light-dark(#595959,#A1A1A1)',
+      },
+      disabledText: {
+        default: 'light-dark(#A0A0A0,#6A6A6A)',
+        container: 'light-dark(#A0A0A0,#6A6A6A)',
+      },
+      bg: {
+        default: 'light-dark(#FFFFFF,#000000)',
+        container: 'light-dark(#F8F8F8,#171717)',
+        overlay: '#00000099',
+      },
+      outline: {
+        default: 'light-dark(#EEEEEE,#252525)',
+      },
+    },
+    borderRadius: {
+      small: '4px',
+      medium: '6px',
+      large: '8px',
+    },
+    extend: {
+      zIndex: {
+        popup: '10',
+        overlay: '20',
+      },
+      spacing: {
+        control: {
+          xs: '12px',
+          sm: '16px',
+          md: '20px',
+          base: '24px',
+          lg: '28px',
+          xl: '36px',
+          '2xl': '40px',
+          '3xl': '48px',
+        },
+        'control-padding': {
+          sm: '2px',
+          md: '4px',
+          base: '8px',
+          lg: '12px',
+          xl: '16px',
+          '2xl': '20px',
+          '3xl': '24px',
+        },
+        xs: '4px',
+        sm: '8px',
+        md: '12px',
+        base: '16px',
+        lg: '20px',
+        xl: '24px',
+        '2xl': '28px',
+        '3xl': '32px',
+      },
+      width: {
+        'control-xs': '12px',
+        'control-sm': '16px',
+        'control-md': '20px',
+        'control-base': '24px',
+        'control-lg': '28px',
+        'control-xl': '36px',
+        'control-2xl': '40px',
+        'control-3xl': '48px',
+      },
+      height: {
+        'control-xs': '12px',
+        'control-sm': '16px',
+        'control-md': '20px',
+        'control-base': '24px',
+        'control-lg': '28px',
+        'control-xl': '36px',
+        'control-2xl': '40px',
+        'control-3xl': '48px',
+      },
+      size: {
+        'control-xs': '12px',
+        'control-sm': '16px',
+        'control-md': '20px',
+        'control-base': '24px',
+        'control-lg': '28px',
+        'control-xl': '36px',
+        'control-2xl': '40px',
+        'control-3xl': '48px',
+      },
+    },
+    screens: {
+      sm: '600px',
+      md: '960px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1600px',
+    },
+  },
+  content: ['./**/*.{js,jsx,ts,tsx}'],
+}
+/** @type {import('tailwindcss').Config} */
+export default config