@alignui/cli 0.0.1-alpha.2 → 0.0.1-alpha.20

package/src/utils/tokens.ts

@@ -1,729 +0,0 @@
-export const rawHexColors = {
-  neutral: {
-    950: '#0e121b',
-    900: '#181b25',
-    800: '#222530',
-    700: '#2b303b',
-    600: '#525866',
-    500: '#717784',
-    400: '#99a0ae',
-    300: '#cacfd8',
-    200: '#e1e4ea',
-    100: '#f2f5f8',
-    50: '#f5f7fa',
-    0: '#ffffff',
-    'alpha-24': '#99a0ae3d',
-    'alpha-16': '#99a0ae29',
-    'alpha-10': '#99a0ae1a',
-  },
-  blue: {
-    950: '#122368',
-    900: '#182f8b',
-    800: '#1f3bad',
-    700: '#2547d0',
-    600: '#3559e9',
-    500: '#335cff',
-    400: '#6895ff',
-    300: '#97baff',
-    200: '#c0d5ff',
-    100: '#d5e2ff',
-    50: '#ebf1ff',
-    'alpha-24': '#476cff3d',
-    'alpha-16': '#476cff29',
-    'alpha-10': '#476cff1a',
-  },
-  orange: {
-    950: '#683412',
-    900: '#8b4618',
-    800: '#ad581f',
-    700: '#d06925',
-    600: '#e97d35',
-    500: '#ff9147',
-    400: '#ffa468',
-    300: '#ffc197',
-    200: '#ffd9c0',
-    100: '#ffe6d5',
-    50: '#fff3eb',
-    'alpha-24': '#ff91473d',
-    'alpha-16': '#ff914729',
-    'alpha-10': '#ff91471a',
-  },
-  red: {
-    950: '#681219',
-    900: '#8b1822',
-    800: '#ad1f2b',
-    700: '#d02533',
-    600: '#e93544',
-    500: '#fb3748',
-    400: '#ff6875',
-    300: '#ff97a0',
-    200: '#ffc0c5',
-    100: '#ffd5d8',
-    50: '#ffebec',
-    'alpha-24': '#fb37483d',
-    'alpha-16': '#fb374829',
-    'alpha-10': '#fb37481a',
-  },
-  green: {
-    950: '#0b4627',
-    900: '#16643b',
-    800: '#1a7544',
-    700: '#178c4e',
-    600: '#1daf61',
-    500: '#1fc16b',
-    400: '#3ee089',
-    300: '#84ebb4',
-    200: '#c2f5da',
-    100: '#d0fbe9',
-    50: '#e0faec',
-    'alpha-24': '#1fc16b3d',
-    'alpha-16': '#1fc16b29',
-    'alpha-10': '#1fc16b1a',
-  },
-  yellow: {
-    950: '#624c18',
-    900: '#86661d',
-    800: '#a78025',
-    700: '#c99a2c',
-    600: '#e6a819',
-    500: '#f6b51e',
-    400: '#ffd268',
-    300: '#ffe097',
-    200: '#ffecc0',
-    100: '#ffefcc',
-    50: '#fff4d6',
-    'alpha-24': '#fbc64b3d',
-    'alpha-16': '#fbc64b29',
-    'alpha-10': '#fbc64b1a',
-  },
-  purple: {
-    950: '#351a75',
-    900: '#3d1d86',
-    800: '#4c25a7',
-    700: '#5b2cc9',
-    600: '#693ee0',
-    500: '#7d52f4',
-    400: '#8c71f6',
-    300: '#a897ff',
-    200: '#cac0ff',
-    100: '#dcd5ff',
-    50: '#efebff',
-    'alpha-24': '#784def3d',
-    'alpha-16': '#784def29',
-    'alpha-10': '#784def1a',
-  },
-  sky: {
-    950: '#124b68',
-    900: '#18658b',
-    800: '#1f7ead',
-    700: '#2597d0',
-    600: '#35ade9',
-    500: '#47c2ff',
-    400: '#68cdff',
-    300: '#97dcff',
-    200: '#c0eaff',
-    100: '#d5f1ff',
-    50: '#ebf8ff',
-    'alpha-24': '#47c2ff3d',
-    'alpha-16': '#47c2ff29',
-    'alpha-10': '#47c2ff1a',
-  },
-  pink: {
-    950: '#68123d',
-    900: '#8b1852',
-    800: '#ad1f66',
-    700: '#d0257a',
-    600: '#e9358f',
-    500: '#fb4ba3',
-    400: '#ff68b3',
-    300: '#ff97cb',
-    200: '#ffc0df',
-    100: '#ffd5ea',
-    50: '#ffebf4',
-    'alpha-24': '#fb4ba33d',
-    'alpha-16': '#fb4ba329',
-    'alpha-10': '#fb4ba31a',
-  },
-  teal: {
-    950: '#0b463e',
-    900: '#16645a',
-    800: '#1a7569',
-    700: '#178c7d',
-    600: '#1daf9c',
-    500: '#22d3bb',
-    400: '#3fdec9',
-    300: '#84ebdd',
-    200: '#c2f5ee',
-    100: '#d0fbf5',
-    50: '#e4fbf8',
-    'alpha-24': '#22d3bb3d',
-    'alpha-16': '#22d3bb29',
-    'alpha-10': '#22d3bb1a',
-  },
-  white: {
-    'alpha-24': '#ffffff3d',
-    'alpha-16': '#ffffff29',
-    'alpha-10': '#ffffff1a',
-  },
-  black: {
-    'alpha-24': '#0000003d',
-    'alpha-16': '#00000029',
-    'alpha-10': '#0000001a',
-  },
-  static: {
-    black: '#000',
-    white: '#fff',
-  },
-};
-
-export const tailwindColorsHex = {
-  neutral: {
-    950: 'var(--neutral-950)',
-    900: 'var(--neutral-900)',
-    800: 'var(--neutral-800)',
-    700: 'var(--neutral-700)',
-    600: 'var(--neutral-600)',
-    500: 'var(--neutral-500)',
-    400: 'var(--neutral-400)',
-    300: 'var(--neutral-300)',
-    200: 'var(--neutral-200)',
-    100: 'var(--neutral-100)',
-    50: 'var(--neutral-50)',
-    0: 'var(--neutral-0)',
-    'alpha-24': 'var(--neutral-alpha-24)',
-    'alpha-16': 'var(--neutral-alpha-16)',
-    'alpha-10': 'var(--neutral-alpha-10)',
-  },
-  blue: {
-    950: 'var(--blue-950)',
-    900: 'var(--blue-900)',
-    800: 'var(--blue-800)',
-    700: 'var(--blue-700)',
-    600: 'var(--blue-600)',
-    500: 'var(--blue-500)',
-    400: 'var(--blue-400)',
-    300: 'var(--blue-300)',
-    200: 'var(--blue-200)',
-    100: 'var(--blue-100)',
-    50: 'var(--blue-50)',
-    'alpha-24': 'var(--blue-alpha-24)',
-    'alpha-16': 'var(--blue-alpha-16)',
-    'alpha-10': 'var(--blue-alpha-10)',
-  },
-  orange: {
-    950: 'var(--orange-950)',
-    900: 'var(--orange-900)',
-    800: 'var(--orange-800)',
-    700: 'var(--orange-700)',
-    600: 'var(--orange-600)',
-    500: 'var(--orange-500)',
-    400: 'var(--orange-400)',
-    300: 'var(--orange-300)',
-    200: 'var(--orange-200)',
-    100: 'var(--orange-100)',
-    50: 'var(--orange-50)',
-    'alpha-24': 'var(--orange-alpha-24)',
-    'alpha-16': 'var(--orange-alpha-16)',
-    'alpha-10': 'var(--orange-alpha-10)',
-  },
-  red: {
-    950: 'var(--red-950)',
-    900: 'var(--red-900)',
-    800: 'var(--red-800)',
-    700: 'var(--red-700)',
-    600: 'var(--red-600)',
-    500: 'var(--red-500)',
-    400: 'var(--red-400)',
-    300: 'var(--red-300)',
-    200: 'var(--red-200)',
-    100: 'var(--red-100)',
-    50: 'var(--red-50)',
-    'alpha-24': 'var(--red-alpha-24)',
-    'alpha-16': 'var(--red-alpha-16)',
-    'alpha-10': 'var(--red-alpha-10)',
-  },
-  green: {
-    950: 'var(--green-950)',
-    900: 'var(--green-900)',
-    800: 'var(--green-800)',
-    700: 'var(--green-700)',
-    600: 'var(--green-600)',
-    500: 'var(--green-500)',
-    400: 'var(--green-400)',
-    300: 'var(--green-300)',
-    200: 'var(--green-200)',
-    100: 'var(--green-100)',
-    50: 'var(--green-50)',
-    'alpha-24': 'var(--green-alpha-24)',
-    'alpha-16': 'var(--green-alpha-16)',
-    'alpha-10': 'var(--green-alpha-10)',
-  },
-  yellow: {
-    950: 'var(--yellow-950)',
-    900: 'var(--yellow-900)',
-    800: 'var(--yellow-800)',
-    700: 'var(--yellow-700)',
-    600: 'var(--yellow-600)',
-    500: 'var(--yellow-500)',
-    400: 'var(--yellow-400)',
-    300: 'var(--yellow-300)',
-    200: 'var(--yellow-200)',
-    100: 'var(--yellow-100)',
-    50: 'var(--yellow-50)',
-    'alpha-24': 'var(--yellow-alpha-24)',
-    'alpha-16': 'var(--yellow-alpha-16)',
-    'alpha-10': 'var(--yellow-alpha-10)',
-  },
-  purple: {
-    950: 'var(--purple-950)',
-    900: 'var(--purple-900)',
-    800: 'var(--purple-800)',
-    700: 'var(--purple-700)',
-    600: 'var(--purple-600)',
-    500: 'var(--purple-500)',
-    400: 'var(--purple-400)',
-    300: 'var(--purple-300)',
-    200: 'var(--purple-200)',
-    100: 'var(--purple-100)',
-    50: 'var(--purple-50)',
-    'alpha-24': 'var(--purple-alpha-24)',
-    'alpha-16': 'var(--purple-alpha-16)',
-    'alpha-10': 'var(--purple-alpha-10)',
-  },
-  sky: {
-    950: 'var(--sky-950)',
-    900: 'var(--sky-900)',
-    800: 'var(--sky-800)',
-    700: 'var(--sky-700)',
-    600: 'var(--sky-600)',
-    500: 'var(--sky-500)',
-    400: 'var(--sky-400)',
-    300: 'var(--sky-300)',
-    200: 'var(--sky-200)',
-    100: 'var(--sky-100)',
-    50: 'var(--sky-50)',
-    'alpha-24': 'var(--sky-alpha-24)',
-    'alpha-16': 'var(--sky-alpha-16)',
-    'alpha-10': 'var(--sky-alpha-10)',
-  },
-  pink: {
-    950: 'var(--pink-950)',
-    900: 'var(--pink-900)',
-    800: 'var(--pink-800)',
-    700: 'var(--pink-700)',
-    600: 'var(--pink-600)',
-    500: 'var(--pink-500)',
-    400: 'var(--pink-400)',
-    300: 'var(--pink-300)',
-    200: 'var(--pink-200)',
-    100: 'var(--pink-100)',
-    50: 'var(--pink-50)',
-    'alpha-24': 'var(--pink-alpha-24)',
-    'alpha-16': 'var(--pink-alpha-16)',
-    'alpha-10': 'var(--pink-alpha-10)',
-  },
-  teal: {
-    950: 'var(--teal-950)',
-    900: 'var(--teal-900)',
-    800: 'var(--teal-800)',
-    700: 'var(--teal-700)',
-    600: 'var(--teal-600)',
-    500: 'var(--teal-500)',
-    400: 'var(--teal-400)',
-    300: 'var(--teal-300)',
-    200: 'var(--teal-200)',
-    100: 'var(--teal-100)',
-    50: 'var(--teal-50)',
-    'alpha-24': 'var(--teal-alpha-24)',
-    'alpha-16': 'var(--teal-alpha-16)',
-    'alpha-10': 'var(--teal-alpha-10)',
-  },
-  white: {
-    DEFAULT: '#fff',
-    'alpha-24': 'var(--white-alpha-24)',
-    'alpha-16': 'var(--white-alpha-16)',
-    'alpha-10': 'var(--white-alpha-10)',
-  },
-  black: {
-    DEFAULT: '#000',
-    'alpha-24': 'var(--black-alpha-24)',
-    'alpha-16': 'var(--black-alpha-16)',
-    'alpha-10': 'var(--black-alpha-10)',
-  },
-  primary: {
-    dark: 'var(--primary-dark)',
-    darker: 'var(--primary-darker)',
-    base: 'var(--primary-base)',
-    'alpha-24': 'var(--primary-alpha-24)',
-    'alpha-16': 'var(--primary-alpha-16)',
-    'alpha-10': 'var(--primary-alpha-10)',
-  },
-  static: {
-    black: 'var(--static-black)',
-    white: 'var(--static-white)',
-  },
-  bg: {
-    'strong-950': 'var(--bg-strong-950)',
-    'surface-800': 'var(--bg-surface-800)',
-    'sub-300': 'var(--bg-sub-300)',
-    'soft-200': 'var(--bg-soft-200)',
-    'weak-50': 'var(--bg-weak-50)',
-    'white-0': 'var(--bg-white-0)',
-  },
-  text: {
-    'strong-950': 'var(--text-strong-950)',
-    'sub-600': 'var(--text-sub-600)',
-    'soft-400': 'var(--text-soft-400)',
-    'disabled-300': 'var(--text-disabled-300)',
-    'white-0': 'var(--text-white-0)',
-  },
-  stroke: {
-    'strong-950': 'var(--stroke-strong-950)',
-    'sub-300': 'var(--stroke-sub-300)',
-    'soft-200': 'var(--stroke-soft-200)',
-    'white-0': 'var(--stroke-white-0)',
-  },
-  faded: {
-    dark: 'var(--faded-dark)',
-    base: 'var(--faded-base)',
-    light: 'var(--faded-light)',
-    lighter: 'var(--faded-lighter)',
-  },
-  information: {
-    dark: 'var(--information-dark)',
-    base: 'var(--information-base)',
-    light: 'var(--information-light)',
-    lighter: 'var(--information-lighter)',
-  },
-  warning: {
-    dark: 'var(--warning-dark)',
-    base: 'var(--warning-base)',
-    light: 'var(--warning-light)',
-    lighter: 'var(--warning-lighter)',
-  },
-  error: {
-    dark: 'var(--error-dark)',
-    base: 'var(--error-base)',
-    light: 'var(--error-light)',
-    lighter: 'var(--error-lighter)',
-  },
-  success: {
-    dark: 'var(--success-dark)',
-    base: 'var(--success-base)',
-    light: 'var(--success-light)',
-    lighter: 'var(--success-lighter)',
-  },
-  away: {
-    dark: 'var(--away-dark)',
-    base: 'var(--away-base)',
-    light: 'var(--away-light)',
-    lighter: 'var(--away-lighter)',
-  },
-  feature: {
-    dark: 'var(--feature-dark)',
-    base: 'var(--feature-base)',
-    light: 'var(--feature-light)',
-    lighter: 'var(--feature-lighter)',
-  },
-  verified: {
-    dark: 'var(--verified-dark)',
-    base: 'var(--verified-base)',
-    light: 'var(--verified-light)',
-    lighter: 'var(--verified-lighter)',
-  },
-  highlighted: {
-    dark: 'var(--highlighted-dark)',
-    base: 'var(--highlighted-base)',
-    light: 'var(--highlighted-light)',
-    lighter: 'var(--highlighted-lighter)',
-  },
-  stable: {
-    dark: 'var(--stable-dark)',
-    base: 'var(--stable-base)',
-    light: 'var(--stable-light)',
-    lighter: 'var(--stable-lighter)',
-  },
-  social: {
-    apple: 'var(--social-apple)',
-    twitter: 'var(--social-twitter)',
-    github: 'var(--social-github)',
-    notion: 'var(--social-notion)',
-    tidal: 'var(--social-tidal)',
-    amazon: 'var(--social-amazon)',
-    zendesk: 'var(--social-zendesk)',
-  },
-  overlay: {
-    DEFAULT: 'var(--overlay)',
-  },
-  transparent: 'transparent',
-  current: 'currentColor',
-};
-
-export const tailwindColorsRgb = Object.fromEntries(
-  Object.entries(tailwindColorsHex).map(([colorName, shades]) => [
-    colorName,
-    Object.fromEntries(
-      Object.entries(shades).map(([shade, channel]) => {
-        return [shade, `rgb(${channel})`];
-      }),
-    ),
-  ]),
-);
-
-export const tailwindColorsHsl = Object.fromEntries(
-  Object.entries(tailwindColorsHex).map(([colorName, shades]) => [
-    colorName,
-    Object.fromEntries(
-      Object.entries(shades).map(([shade, channel]) => {
-        return [shade, `hsl(${channel})`];
-      }),
-    ),
-  ]),
-);
-
-export const borderRadii = {
-  10: '.625rem',
-  20: '1.25rem',
-};
-
-export const texts = {
-  'title-h1': [
-    '3.5rem',
-    {
-      lineHeight: '4rem',
-      letterSpacing: '-0.01em',
-      fontWeight: '500',
-    },
-  ],
-  'title-h2': [
-    '3rem',
-    {
-      lineHeight: '3.5rem',
-      letterSpacing: '-0.01em',
-      fontWeight: '500',
-    },
-  ],
-  'title-h3': [
-    '2.5rem',
-    {
-      lineHeight: '3rem',
-      letterSpacing: '-0.01em',
-      fontWeight: '500',
-    },
-  ],
-  'title-h4': [
-    '2rem',
-    {
-      lineHeight: '2.5rem',
-      letterSpacing: '-0.005em',
-      fontWeight: '500',
-    },
-  ],
-  'title-h5': [
-    '1.5rem',
-    {
-      lineHeight: '2rem',
-      letterSpacing: '0em',
-      fontWeight: '500',
-    },
-  ],
-  'title-h6': [
-    '1.25rem',
-    {
-      lineHeight: '1.75rem',
-      letterSpacing: '0em',
-      fontWeight: '500',
-    },
-  ],
-
-  'label-xl': [
-    '1.5rem',
-    {
-      lineHeight: '2rem',
-      letterSpacing: '-0.015em',
-      fontWeight: '500',
-    },
-  ],
-  'label-lg': [
-    '1.125rem',
-    {
-      lineHeight: '1.5rem',
-      letterSpacing: '-0.015em',
-      fontWeight: '500',
-    },
-  ],
-  'label-md': [
-    '1rem',
-    {
-      lineHeight: '1.5rem',
-      letterSpacing: '-0.011em',
-      fontWeight: '500',
-    },
-  ],
-  'label-sm': [
-    '.875rem',
-    {
-      lineHeight: '1.25rem',
-      letterSpacing: '-0.006em',
-      fontWeight: '500',
-    },
-  ],
-  'label-xs': [
-    '.75rem',
-    {
-      lineHeight: '1rem',
-      letterSpacing: '0em',
-      fontWeight: '500',
-    },
-  ],
-
-  'paragraph-xl': [
-    '1.5rem',
-    {
-      lineHeight: '2rem',
-      letterSpacing: '-0.015em',
-      fontWeight: '400',
-    },
-  ],
-  'paragraph-lg': [
-    '1.125rem',
-    {
-      lineHeight: '1.5rem',
-      letterSpacing: '-0.015em',
-      fontWeight: '400',
-    },
-  ],
-  'paragraph-md': [
-    '1rem',
-    {
-      lineHeight: '1.5rem',
-      letterSpacing: '-0.011em',
-      fontWeight: '400',
-    },
-  ],
-  'paragraph-sm': [
-    '.875rem',
-    {
-      lineHeight: '1.25rem',
-      letterSpacing: '-0.006em',
-      fontWeight: '400',
-    },
-  ],
-  'paragraph-xs': [
-    '.75rem',
-    {
-      lineHeight: '1rem',
-      letterSpacing: '0em',
-      fontWeight: '400',
-    },
-  ],
-
-  'subheading-md': [
-    '1rem',
-    {
-      lineHeight: '1.5rem',
-      letterSpacing: '0.06em',
-      fontWeight: '500',
-    },
-  ],
-  'subheading-sm': [
-    '.875rem',
-    {
-      lineHeight: '1.25rem',
-      letterSpacing: '0.06em',
-      fontWeight: '500',
-    },
-  ],
-  'subheading-xs': [
-    '.75rem',
-    {
-      lineHeight: '1rem',
-      letterSpacing: '0.04em',
-      fontWeight: '500',
-    },
-  ],
-  'subheading-2xs': [
-    '.6875rem',
-    {
-      lineHeight: '.75rem',
-      letterSpacing: '0.02em',
-      fontWeight: '500',
-    },
-  ],
-
-  'doc-label': [
-    '1.125rem',
-    {
-      lineHeight: '2rem',
-      letterSpacing: '-0.015em',
-      fontWeight: '500',
-    },
-  ],
-  'doc-paragraph': [
-    '1.125rem',
-    {
-      lineHeight: '2rem',
-      letterSpacing: '-0.015em',
-      fontWeight: '400',
-    },
-  ],
-};
-
-export const shadows = {
-  // regular
-  'regular-xs': '0 1px 2px 0 hsl(222 33% 6% / 3%)',
-  'regular-md': '0 16px 32px -12px hsl(222 33% 8% / 10%)',
-  'regular-sm': '0 2px 4px hsl(210 4% 11% / 4%)',
-
-  // buttons
-  'button-primary-focus': [
-    `0 0 0 2px hsl(var(--bg-white-0))`,
-    `0 0 0 4px hsl(var(--primary-alpha-10))`,
-  ],
-  'button-important-focus': [
-    `0 0 0 2px hsl(var(--bg-white-0))`,
-    `0 0 0 4px hsl(var(--neutral-alpha-16))`,
-  ],
-  'button-error-focus': [
-    `0 0 0 2px hsl(var(--bg-white-0))`,
-    `0 0 0 4px hsl(var(--red-alpha-10))`,
-  ],
-
-  // fancy buttons
-  'fancy-buttons-neutral': [
-    '0 1px 2px 0 hsl(210 4% 11% / 48%)',
-    '0 0 0 1px hsl(210 5% 15%)',
-  ],
-  'fancy-buttons-primary': [
-    '0 1px 2px 0 hsl(222 33% 8% / 24%)',
-    `0 0 0 1px hsl(var(--primary-base))`,
-  ],
-  'fancy-buttons-error': [
-    '0 1px 2px 0 hsl(222 33% 8% / 24%)',
-    `0 0 0 1px hsl(var(--error-base))`,
-  ],
-  'fancy-buttons-stroke': [
-    '0 1px 3px 0 hsl(222 33% 8% / 12%)',
-    `0 0 0 1px hsl(var(--stroke-soft-200))`,
-  ],
-
-  'toggle-switch': [
-    '0 6px 10px 0 hsl(222 32% 8% / 6%)',
-    '0 2px 4px 0 hsl(222 32% 8% / 3%)',
-  ],
-
-  'switch-thumb': [
-    '0 4px 8px 0 hsl(210 4% 11% / 6%)',
-    '0 2px 4px 0 hsl(222 32% 8% / 8%)',
-  ],
-
-  tooltip: [
-    '0 12px 24px 0 hsl(222 32% 8% / 6%)',
-    '0 1px 2px 0 hsl(222 32% 8% / 3%)',
-  ],
-};
-
-export const animations = {
-  'accordion-down': 'accordion-down 0.2s ease-out',
-  'accordion-up': 'accordion-up 0.2s ease-out',
-};