@aziontech/theme 1.12.0 → 2.0.0

package/src/tokens/index.js

@@ -2,15 +2,7 @@
  * Tokens public exports.
  */
 
-export * from './primitives/colors.js';
-export * from './primitives/brand.js';
-export * from './colors-brand.js';
-export * from './semantic/text.js';
-export * from './semantic/backgrounds.js';
-export * from './semantic/borders.js';
-export * from './build/refs.js';
-export * from './build/resolve.js';
-export * from './build/css-vars.js';
-export * from './build/preset.js';
-export * from './build/tailwind-helper.js';
-export * from './build/tailwind-plugin.js';
+export { createCssVars, cssVarsString, injectCssVars } from '../scripts/css-vars.js';
+export * from './primitives/colors/colors.js';
+export * from './semantic/colors.js';
+export * from './theme.js';

package/src/tokens/primitives/animations/animate.js

@@ -0,0 +1,8 @@
+export const animate = {
+  spin: 'spin 1s linear infinite',
+  ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+  pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+  bounce: 'bounce 1s infinite',
+};
+
+export default { animate };

package/src/tokens/primitives/animations/ease.js

@@ -0,0 +1,7 @@
+export const ease = {
+  in: 'cubic-bezier(0.4, 0, 1, 1)',
+  out: 'cubic-bezier(0, 0, 0.2, 1)',
+  'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+};
+
+export default { ease };

package/src/tokens/primitives/border-widths.js

@@ -0,0 +1,9 @@
+export const borderWidths = {
+  0: '0',
+  1: '0.8px',
+  2: '2px',
+  3: '3px',
+  4: '4px',
+};
+
+export default { borderWidths };

package/src/tokens/primitives/breakpoints.js

@@ -0,0 +1,9 @@
+export const breakpoints = {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1536px',
+};
+
+export default { breakpoints };

package/src/tokens/primitives/colors/alpha.js

@@ -0,0 +1,104 @@
+export const alpha = {
+  violet: {
+    '50': '#8A84EC0D',
+    '100': '#8A84EC1A',
+    '200': '#8A84EC33',
+    '300': '#8A84EC4D',
+    '400': '#8A84EC66',
+    '500': '#8A84EC80',
+    '600': '#8A84EC99',
+    '700': '#8A84ECB2',
+    '800': '#8A84ECCC',
+    '900': '#8A84ECE5',
+  },
+  orange: {
+    '50': '#FE601F0D',
+    '100': '#FE601F1A',
+    '200': '#FE601F33',
+    '300': '#FE601F4D',
+    '400': '#FE601F66',
+    '500': '#FE601F80',
+    '600': '#FE601F99',
+    '700': '#FE601FB2',
+    '800': '#FE601FCC',
+    '900': '#FE601FE5',
+  },
+  white: {
+    '50': '#FFFFFF0D',
+    '100': '#FFFFFF1A',
+    '200': '#FFFFFF33',
+    '300': '#FFFFFF4D',
+    '400': '#FFFFFF66',
+    '500': '#FFFFFF80',
+    '600': '#FFFFFF99',
+    '700': '#FFFFFFB2',
+    '800': '#FFFFFFCC',
+    '900': '#FFFFFFE5',
+  },
+  black: {
+    '50': '#00000005',
+    '100': '#0000000D',
+    '200': '#00000033',
+    '300': '#0000004D',
+    '400': '#00000066',
+    '500': '#00000080',
+    '600': '#00000099',
+    '700': '#000000B2',
+    '800': '#000000CC',
+    '900': '#000000E5',
+  },
+  green: {
+    '50': '#22C55E0D',
+    '100': '#22C55E1A',
+    '200': '#22C55E33',
+    '300': '#22C55E4D',
+    '400': '#22C55E66',
+    '500': '#22C55E80',
+    '600': '#22C55E99',
+    '700': '#22C55EB2',
+    '800': '#22C55ECC',
+    '900': '#22C55EE5',
+  },
+  red: {
+    '50': '#EF44440D',
+    '100': '#EF44441A',
+    '200': '#EF444433',
+    '300': '#EF44444D',
+    '400': '#EF444466',
+    '500': '#EF444480',
+    '600': '#EF444499',
+    '700': '#EF4444B2',
+    '800': '#EF4444CC',
+    '900': '#EF4444E5',
+  },
+  yellow: {
+    '50': '#F7BD080D',
+    '100': '#F7BD081A',
+    '200': '#F7BD0833',
+    '300': '#F7BD084D',
+    '400': '#F7BD0866',
+    '500': '#F7BD0880',
+    '600': '#F7BD0899',
+    '700': '#F7BD08B2',
+    '800': '#F7BD08CC',
+    '900': '#F7BD08E5',
+  },
+  blue: {
+    '50': '#E5F1FF0D',
+    '100': '#CCE4FF1A',
+    '200': '#99C9FF33',
+    '300': '#66ADFF4D',
+    '400': '#3392FF66',
+    '500': '#0072F580',
+    '600': '#005FCC99',
+    '700': '#004799B2',
+    '800': '#003066CC',
+    '900': '#001833E5',
+  },
+  absolute: {
+    black: '#000000E5',
+    white: '#FFFFFFE5',
+  },
+};
+
+export default { alpha };

package/src/tokens/primitives/colors/brand.js

@@ -0,0 +1,40 @@
+export const brand = {
+  primary: {
+    '50': '#FFF5EF',
+    '100': '#FFE7D8',
+    '200': '#FFCFB3',
+    '300': '#FFB180',
+    '400': '#FF8E4D',
+    '500': '#FE601F',
+    '600': '#D94A03',
+    '700': '#B03C02',
+    '800': '#8A2F02',
+    '900': '#692402',
+    '950': '#401602',
+  },
+  accent: {
+    '50': '#F6F6FF',
+    '100': '#ECECFF',
+    '200': '#D9D7FA',
+    '300': '#B5B1F4',
+    '400': '#9F9AF1',
+    '500': '#8A84EC',
+    '600': '#756FE5',
+    '700': '#625BD5',
+    '800': '#524BBB',
+    '900': '#423F99',
+    '950': '#0B0A19',
+  },
+  absolute: {
+    black: '#0A0A0A',
+    white: '#FCFCFC',
+  },
+};
+
+export const brandPrimitives = {
+  primary: brand.primary,
+  accent: brand.accent,
+  absolute: brand.absolute,
+};
+
+export default { brand, brandPrimitives };

package/src/tokens/primitives/colors/colors.js

@@ -0,0 +1,142 @@
+import { alpha } from './alpha.js';
+import { brand, brandPrimitives } from './brand.js';
+
+export { brandPrimitives };
+
+export const primitives = {
+  base: {
+    white: '#FFFFFF',
+    black: '#000000',
+    },
+  blue: {
+    '50': '#E5F1FF',
+    '100': '#CCE4FF',
+    '200': '#99C9FF',
+    '300': '#66ADFF',
+    '400': '#3392FF',
+    '500': '#0072F5',
+    '600': '#005FCC',
+    '700': '#004799',
+    '800': '#003066',
+    '900': '#001833',
+    '950': '#000C1A',
+  },
+  gray: {
+    '50': '#FCFCFC',
+    '100': '#F2F2F2',
+    '200': '#E5E5E5',
+    '300': '#B2B2B2',
+    '400': '#999999',
+    '500': '#808080',
+    '600': '#666666',
+    '700': '#4D4D4D',
+    '800': '#333333',
+    '900': '#1A1A1A',
+    '950': '#0A0A0A',
+    },
+  violet: {
+    '50': '#F6F6FF',
+    '100': '#ECECFF',
+    '200': '#D9D7FA',
+    '300': '#B5B1F4',
+    '400': '#9F9AF1',
+    '500': '#8A84EC',
+    '600': '#756FE5',
+    '700': '#625BD5',
+    '800': '#524BBB',
+    '900': '#423F99',
+    '950': '#0B0A19',
+    },
+  orange: {
+    '50': '#FFF5EF',
+    '100': '#FFE7D8',
+    '200': '#FFCFB3',
+    '300': '#FFB180',
+    '400': '#FF8E4D',
+    '500': '#FE601F',
+    '600': '#D94A03',
+    '700': '#B03C02',
+    '800': '#8A2F02',
+    '900': '#692402',
+    '950': '#401602',
+    },
+  slate: {
+    '50': '#F8F7FC',
+    '100': '#F0EFF8',
+    '200': '#E3E1F0',
+    '300': '#D3D2E6',
+    '400': '#BEBBD6',
+    '500': '#A39FBE',
+    '600': '#8884A4',
+    '700': '#6D698B',
+    '800': '#534F70',
+    '900': '#353040',
+    '950': '#13131A',
+    },
+  yellow: {
+    '50': '#FEF8E6',
+    '100': '#FDF2CE',
+    '200': '#FCE49C',
+    '300': '#FAD76B',
+    '400': '#F8CA3A',
+    '500': '#F7BD08',
+    '600': '#C59707',
+    '700': '#947105',
+    '800': '#634B03',
+    '900': '#312602',
+    '950': '#191301',
+    },
+  green: {
+    '50': '#F0FDF4',
+    '100': '#D0FBDF',
+    '200': '#A4F4C0',
+    '300': '#78EDA2',
+    '400': '#52E086',
+    '500': '#26D968',
+    '600': '#18B452',
+    '700': '#16833F',
+    '800': '#12542B',
+    '900': '#0A2916',
+    '950': '#03170B',
+    },
+
+  red: {
+    '50': '#FFE5E5',
+    '100': '#FFCCCC',
+    '200': '#FECACA',
+    '300': '#FCA5A5',
+    '400': '#F87171',
+    '500': '#EF4444',
+    '600': '#DC2626',
+    '700': '#B91C1C',
+    '800': '#991B1B',
+    '900': '#7F1D1D',
+    '950': '#240505',
+    },
+  brand,
+  surface: {
+    0: '#FFFFFF',
+    50: '#FAFAFA',
+    100: '#F5F5F5',
+    200: '#E5E5E5',
+    300: '#D4D4D4',
+    400: '#A3A3A3',
+    500: '#737373',
+    600: '#525252',
+    700: '#404040',
+    800: '#262626',
+    900: '#171717',
+    950: '#0A0A0A',
+  },
+  alpha,
+};
+
+export const surfacePrimitives = {
+  surface: primitives.surface,
+};
+
+export default {
+  primitives,
+  surfacePrimitives,
+  brandPrimitives,
+};

package/src/tokens/primitives/effects/blur.js

@@ -0,0 +1,11 @@
+export const blur = {
+  xs: '4px',
+  sm: '8px',
+  md: '12px',
+  lg: '16px',
+  xl: '24px',
+  '2xl': '40px',
+  '3xl': '64px',
+};
+
+export default { blur };

package/src/tokens/primitives/effects/drop-shadow.js

@@ -0,0 +1,10 @@
+export const dropShadow = {
+  xs: '0 1px 1px rgb(0 0 0 / 0.05)',
+  sm: '0 1px 2px rgb(0 0 0 / 0.15)',
+  md: '0 3px 3px rgb(0 0 0 / 0.12)',
+  lg: '0 4px 4px rgb(0 0 0 / 0.15)',
+  xl: '0 9px 7px rgb(0 0 0 / 0.1)',
+  '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
+};
+
+export default { dropShadow };

package/src/tokens/primitives/effects/inset-shadow.js

@@ -0,0 +1,7 @@
+export const insetShadow = {
+  '2xs': 'inset 0 1px rgb(0 0 0 / 0.05)',
+  xs: 'inset 0 1px 1px rgb(0 0 0 / 0.05)',
+  sm: 'inset 0 2px 4px rgb(0 0 0 / 0.05)',
+};
+
+export default { insetShadow };

package/src/tokens/primitives/effects/opacity.js

@@ -0,0 +1,8 @@
+export const opacity = {
+  25: '0.25',
+  50: '0.5',
+  75: '0.75',
+  100: '1',
+};
+
+export default { opacity };

package/src/tokens/primitives/effects/perspective.js

@@ -0,0 +1,9 @@
+export const perspective = {
+  dramatic: '100px',
+  near: '300px',
+  normal: '500px',
+  midrange: '800px',
+  distant: '1200px',
+};
+
+export default { perspective };

package/src/tokens/primitives/effects/shadow.js

@@ -0,0 +1,11 @@
+export const shadow = {
+  '2xs': '0 1px rgb(0 0 0 / 0.05)',
+  xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+  sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+};
+
+export default { shadow };

package/src/tokens/primitives/ring-offset.js

@@ -0,0 +1,5 @@
+export const ringOffset = {
+  'ring-offset': '0.5px',
+};
+
+export default { ringOffset };

package/src/tokens/primitives/shape/aspect-video.js

@@ -0,0 +1,3 @@
+export const aspectVideo = '16 / 9';
+
+export default { aspectVideo };

package/src/tokens/primitives/shape/container.js

@@ -0,0 +1,17 @@
+export const container = {
+  '3xs': '256px',
+  '2xs': '288px',
+  xs: '320px',
+  sm: '384px',
+  md: '448px',
+  lg: '512px',
+  xl: '576px',
+  '2xl': '672px',
+  '3xl': '768px',
+  '4xl': '896px',
+  '5xl': '1024px',
+  '6xl': '1152px',
+  '7xl': '1280px',
+};
+
+export default { container };

package/src/tokens/primitives/shape/height.js

@@ -0,0 +1,32 @@
+export const height = {
+  2: '8px',
+  3: '12px',
+  4: '16px',
+  5: '20px',
+  6: '24px',
+  7: '28px',
+  8: '32px',
+  9: '36px',
+  10: '40px',
+  11: '44px',
+  12: '48px',
+  14: '56px',
+  16: '64px',
+  20: '80px',
+  24: '96px',
+  28: '112px',
+  32: '128px',
+  36: '144px',
+  40: '160px',
+  44: '176px',
+  48: '192px',
+  52: '208px',
+  56: '224px',
+  60: '240px',
+  64: '256px',
+  72: '288px',
+  80: '320px',
+  96: '384px',
+};
+
+export default { height };

package/src/tokens/primitives/shape/radius.js

@@ -0,0 +1,13 @@
+export const radius = {
+  none: '0',
+  sm: '2px',
+  DEFAULT: '4px',
+  md: '6px',
+  lg: '8px',
+  xl: '12px',
+  '2xl': '16px',
+  '3xl': '24px',
+  full: '9999px',
+};
+
+export default { radius };

package/src/tokens/primitives/shape/shape.js

@@ -0,0 +1,12 @@
+import { radius } from './radius.js';
+import { borderWidths } from '../border-widths.js';
+
+export const shape = {
+  'shape-flat': radius.none,
+  'shape-card': radius.DEFAULT,
+  'shape-button': radius.DEFAULT,
+  'shape-elements': radius.DEFAULT,
+  'border-width-default': borderWidths[1],
+};
+
+export default { shape };

package/src/tokens/primitives/shape/size.js

@@ -0,0 +1,32 @@
+export const size = {
+  2: '8px',
+  3: '12px',
+  4: '16px',
+  5: '20px',
+  6: '24px',
+  7: '28px',
+  8: '32px',
+  9: '36px',
+  10: '40px',
+  11: '44px',
+  12: '48px',
+  14: '56px',
+  16: '64px',
+  20: '80px',
+  24: '96px',
+  28: '112px',
+  32: '128px',
+  36: '144px',
+  40: '160px',
+  44: '176px',
+  48: '192px',
+  52: '208px',
+  56: '224px',
+  60: '240px',
+  64: '256px',
+  72: '288px',
+  80: '320px',
+  96: '384px',
+};
+
+export default { size };

package/src/tokens/primitives/shape/spacing.js

@@ -0,0 +1,33 @@
+export const spacing = {
+  1: '4px',
+  2: '8px',
+  3: '12px',
+  4: '16px',
+  5: '20px',
+  6: '24px',
+  7: '28px',
+  8: '32px',
+  9: '36px',
+  10: '40px',
+  11: '44px',
+  12: '48px',
+  14: '56px',
+  16: '64px',
+  20: '80px',
+  24: '96px',
+  28: '112px',
+  32: '128px',
+  36: '144px',
+  40: '160px',
+  44: '176px',
+  48: '192px',
+  52: '208px',
+  56: '224px',
+  60: '240px',
+  64: '256px',
+  72: '288px',
+  80: '320px',
+  96: '384px',
+};
+
+export default { spacing };

package/src/tokens/primitives/shape/width.js

@@ -0,0 +1,19 @@
+import { tokenRef } from '../../../scripts/refs.js';
+
+export const width = {
+  '3xs': tokenRef('shape.container.3xs'),
+  '2xs': tokenRef('shape.container.2xs'),
+  xs: tokenRef('shape.container.xs'),
+  sm: tokenRef('shape.container.sm'),
+  md: tokenRef('shape.container.md'),
+  lg: tokenRef('shape.container.lg'),
+  xl: tokenRef('shape.container.xl'),
+  '2xl': tokenRef('shape.container.2xl'),
+  '3xl': tokenRef('shape.container.3xl'),
+  '4xl': tokenRef('shape.container.4xl'),
+  '5xl': tokenRef('shape.container.5xl'),
+  '6xl': tokenRef('shape.container.6xl'),
+  '7xl': tokenRef('shape.container.7xl'),
+};
+
+export default { width };

package/src/tokens/primitives/typography/font-family.js

@@ -0,0 +1,7 @@
+export const fontFamily = {
+  sans: 'Sora',
+  code: 'Roboto Mono',
+  display: 'Proto Mono',
+};
+
+export default { fontFamily };

package/src/tokens/primitives/typography/font-size.js

@@ -0,0 +1,30 @@
+export const fontSize = {
+  xs: '0.75rem',
+  'xs--line-height': 'calc(1 / 0.75)',
+  sm: '0.875rem',
+  'sm--line-height': 'calc(1.25 / 0.875)',
+  base: '1rem',
+  'base--line-height': 'calc(1.5 / 1)',
+  lg: '1.125rem',
+  'lg--line-height': 'calc(1.75 / 1.125)',
+  xl: '1.25rem',
+  'xl--line-height': 'calc(1.75 / 1.25)',
+  '2xl': '1.5rem',
+  '2xl--line-height': 'calc(2 / 1.5)',
+  '3xl': '1.875rem',
+  '3xl--line-height': 'calc(2.25 / 1.875)',
+  '4xl': '2.25rem',
+  '4xl--line-height': 'calc(2.5 / 2.25)',
+  '5xl': '3rem',
+  '5xl--line-height': '1',
+  '6xl': '3.75rem',
+  '6xl--line-height': '1',
+  '7xl': '4.5rem',
+  '7xl--line-height': '1',
+  '8xl': '6rem',
+  '8xl--line-height': '1',
+  '9xl': '8rem',
+  '9xl--line-height': '1',
+};
+
+export default { fontSize };

package/src/tokens/primitives/typography/font-weight.js

@@ -0,0 +1,13 @@
+export const fontWeight = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900,
+};
+
+export default { fontWeight };

package/src/tokens/primitives/typography/leading.js

@@ -0,0 +1,9 @@
+export const leading = {
+  tight: 1.25,
+  snug: 1.375,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose: 2,
+};
+
+export default { leading };

package/src/tokens/primitives/typography/line-height.js

@@ -0,0 +1,13 @@
+export const lineHeight = {
+  none: '0',
+  3: '12px',
+  4: '16px',
+  5: '20px',
+  6: '24px',
+  7: '28px',
+  8: '32px',
+  9: '36px',
+  10: '40px',
+};
+
+export default { lineHeight };