@alignui/cli 0.0.1-alpha.0

package/src/utils/tokens.ts

@@ -0,0 +1,729 @@
+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',
+};