@aziontech/theme 2.6.0 → 4.1.0

package/src/tokens/semantic/texts.data.js

@@ -16,129 +16,163 @@
  */
 
 import { fontFamily } from '../primitives/typography/font-family.js'
+import { fontSize } from '../primitives/typography/font-size.js'
+import { fontWeight } from '../primitives/typography/font-weight.js'
+import { leading } from '../primitives/typography/leading.js'
 
 export const textsData = {
   'text-big-number-md': {
-    fontSize: { _: '1.25rem', sm: '1.5rem', md: '2.25rem' },
-    lineHeight: '1.20',
+    fontSize: { _: fontSize.xl, sm: fontSize['2xl'], md: fontSize['4xl'] },
+    lineHeight: leading.tight,
+    fontWeight: fontWeight.normal,
     fontFamily: fontFamily.display
   },
   'text-big-number-sm': {
-    fontSize: { _: '1rem', sm: '1.25rem' },
-    lineHeight: '1.20',
+    fontSize: { _: fontSize.base, sm: fontSize.xl },
+    lineHeight: leading.tight,
+    fontWeight: fontWeight.normal,
     fontFamily: fontFamily.display
   },
   'text-big-number-lg': {
-    fontSize: { _: '1.5rem', sm: '2.25rem', md: '3.75rem' },
-    lineHeight: '1.20',
+    fontSize: { _: fontSize['2xl'], sm: fontSize['4xl'], md: fontSize['6xl'] },
+    lineHeight: leading.tight,
+    fontWeight: fontWeight.normal,
     fontFamily: fontFamily.display
   },
   'text-heading-2xl': {
-    fontSize: { _: '1.875rem', sm: '3rem', md: '3.75rem' },
-    lineHeight: '1.1'
+    fontSize: { _: fontSize['3xl'], sm: fontSize['5xl'], md: fontSize['6xl'] },
+    lineHeight: leading.tight,
+    fontWeight: fontWeight.normal
   },
   'text-heading-xl': {
-    fontSize: { _: '1.25rem', sm: '1.875rem', md: '2.25rem' },
-    lineHeight: '1.1'
+    fontSize: { _: fontSize.xl, sm: fontSize['3xl'], md: fontSize['4xl'] },
+    lineHeight: leading.tight,
+    fontWeight: fontWeight.normal
   },
   'text-heading-lg': {
-    fontSize: { _: '1.125rem', md: '1.875rem' },
-    lineHeight: '1.2'
+    fontSize: { _: fontSize.lg, md: fontSize['3xl'] },
+    lineHeight: leading.tight,
+    fontWeight: fontWeight.normal
   },
   'text-heading-md': {
-    fontSize: { _: '1rem', sm: '1.25rem', md: '1.5rem' },
-    lineHeight: '1.3'
+    fontSize: { _: fontSize.base, sm: fontSize.xl, md: fontSize['2xl'] },
+    lineHeight: leading.tight,
+    fontWeight: fontWeight.normal
   },
   'text-heading-sm': {
-    fontSize: { _: '0.875rem', sm: '1rem', md: '1.125rem' },
-    lineHeight: '1.4'
+    fontSize: { _: fontSize.sm, sm: fontSize.base, md: fontSize.lg },
+    lineHeight: leading.snug,
+    fontWeight: fontWeight.normal
   },
   'text-heading-xs': {
-    fontSize: '1rem',
-    lineHeight: '1.4'
+    fontSize: fontSize.base,
+    lineHeight: leading.snug,
+    fontWeight: fontWeight.normal
   },
   'text-heading-xxs': {
-    fontSize: '0.875rem',
-    lineHeight: '1.4'
+    fontSize: fontSize.sm,
+    lineHeight: leading.snug,
+    fontWeight: fontWeight.normal
   },
   'text-label-lg': {
-    fontSize: '1rem',
-    lineHeight: '1.5',
-    fontWeight: '500'
+    fontSize: fontSize.base,
+    lineHeight: leading.normal,
+    fontWeight: fontWeight.medium
   },
   'text-label-md': {
-    fontSize: '0.875rem',
-    lineHeight: '1.5',
-    fontWeight: '500'
+    fontSize: fontSize.sm,
+    lineHeight: leading.normal,
+    fontWeight: fontWeight.medium
   },
   'text-label-sm': {
+    fontSize: fontSize.xs,
+    lineHeight: leading.normal,
+    fontWeight: fontWeight.medium
+  },
+  'text-label-code-sm': {
+    fontFamily: fontFamily.code,
     fontSize: '0.75rem',
-    lineHeight: '1.5',
-    fontWeight: '500'
+    lineHeight: '1',
+    fontWeight: '400',
+    letterSpacing: '0'
+  },
+  'text-label-code-md': {
+    fontFamily: fontFamily.code,
+    fontSize: '0.875rem',
+    lineHeight: '1',
+    fontWeight: '400',
+    letterSpacing: '0'
+  },
+  'text-label-code-lg': {
+    fontFamily: fontFamily.code,
+    fontSize: '1rem',
+    lineHeight: '1',
+    fontWeight: '400',
+    letterSpacing: '0'
   },
   'text-body-lg': {
-    fontSize: { _: '1rem', md: '1.125rem' },
-    lineHeight: '1.5'
+    fontSize: { _: fontSize.base, md: fontSize.lg },
+    lineHeight: leading.normal
   },
   'text-body-md': {
-    fontSize: '1rem',
-    lineHeight: '1.5'
+    fontSize: fontSize.base,
+    lineHeight: leading.normal
   },
   'text-body-sm': {
-    fontSize: '0.875rem',
-    lineHeight: '1.5'
+    fontSize: fontSize.sm,
+    lineHeight: leading.normal
   },
   'text-body-xs': {
-    fontSize: '0.75rem',
-    lineHeight: '1.5'
+    fontSize: fontSize.xs,
+    lineHeight: leading.normal
   },
   'text-tag-sm': {
-    fontSize: '0.6875rem',
-    lineHeight: '1',
-    fontWeight: '600'
+    fontSize: fontSize.xs,
+    lineHeight: leading.tight,
+    fontWeight: fontWeight.semibold
   },
   'text-tag-md': {
-    fontSize: '0.75rem',
-    lineHeight: '1',
-    fontWeight: '600'
+    fontSize: fontSize.xs,
+    lineHeight: leading.tight,
+    fontWeight: fontWeight.semibold
   },
   'text-body-xxs': {
-    fontSize: '0.625rem',
-    lineHeight: '1.5'
+    fontSize: fontSize.xs,
+    lineHeight: leading.normal
   },
   'text-overline-md': {
     fontFamily: fontFamily.display,
-    fontSize: { _: '0.75rem', sm: '0.875rem' },
-    lineHeight: '1.4',
+    fontSize: { _: fontSize.xs, sm: fontSize.sm },
+    lineHeight: leading.snug,
     letterSpacing: '0.08em',
     textTransform: 'uppercase'
   },
   'text-overline-sm': {
     fontFamily: fontFamily.display,
-    fontSize: '0.75rem',
-    lineHeight: '1.4',
+    fontSize: fontSize.xs,
+    lineHeight: leading.snug,
     letterSpacing: '0.08em',
     textTransform: 'uppercase'
   },
   'text-overline-xs': {
     fontFamily: fontFamily.display,
-    fontSize: '0.625rem',
-    lineHeight: '1.4',
+    fontSize: fontSize.xs,
+    lineHeight: leading.snug,
     letterSpacing: '0.08em',
     textTransform: 'uppercase'
   },
   'text-button-lg': {
     fontFamily: fontFamily.sans,
-    fontSize: '0.875rem',
-    fontWeight: '600',
-    lineHeight: '1',
+    fontSize: fontSize.sm,
+    fontWeight: fontWeight.normal,
+    lineHeight: leading.tight,
     letterSpacing: '0'
   },
   'text-button-md': {
     fontFamily: fontFamily.sans,
-    fontSize: '0.75rem',
-    fontWeight: '600',
-    lineHeight: '1',
+    fontSize: fontSize.xs,
+    fontWeight: fontWeight.normal,
+    lineHeight: leading.tight,
     letterSpacing: '0'
   },
   /** Inline `<a>` in body/heading — inherits parent size; not the navigation Link component. */

package/src/tokens/theme/accent.js

@@ -1,18 +1,18 @@
-import { tokenRef } from '../../scripts/refs.js';
+import { tokenRef } from '../../scripts/refs.js'
 
 export const accent = {
   light: {
     accent: tokenRef('brand.accent.accent-600'),
     'accent-mask': tokenRef('primitives.alpha.violet.50'),
     'accent-selected': tokenRef('brand.accent.accent-500'),
-    'accent-contrast': tokenRef('primitives.base.black'),
+    'accent-contrast': tokenRef('primitives.base.black')
   },
   dark: {
     accent: tokenRef('brand.accent.accent-500'),
     'accent-mask': tokenRef('primitives.alpha.violet.100'),
     'accent-selected': tokenRef('brand.accent.accent-500'),
-    'accent-contrast': tokenRef('primitives.base.black'),
-  },
-};
+    'accent-contrast': tokenRef('primitives.base.black')
+  }
+}
 
-export default { accent };
+export default { accent }

package/src/tokens/theme/border.js

@@ -1,18 +1,18 @@
-import { tokenRef } from '../../scripts/refs.js';
+import { tokenRef } from '../../scripts/refs.js'
 
 export const border = {
   light: {
     'border-default': tokenRef('primitives.alpha.black.100'),
     'border-muted': tokenRef('primitives.alpha.black.100'),
     'border-strong': tokenRef('primitives.base.black'),
-    'border-selected': tokenRef('brand.primary.primary-500'),
+    'border-selected': tokenRef('brand.primary.primary-500')
   },
   dark: {
     'border-default': tokenRef('primitives.alpha.white.100'),
     'border-muted': tokenRef('primitives.alpha.white.50'),
     'border-strong': tokenRef('primitives.base.white'),
-    'border-selected': tokenRef('brand.primary.primary-500'),
-  },
-};
+    'border-selected': tokenRef('brand.primary.primary-500')
+  }
+}
 
-export default { border };
+export default { border }

package/src/tokens/theme/code-sintax.d.ts

@@ -0,0 +1,53 @@
+export namespace codeSintax {
+    let light: {
+        'code-sintax-identifier': {
+            __ref: any;
+        };
+        'code-sintax-line-number': {
+            __ref: any;
+        };
+        'code-sintax-keyword': {
+            __ref: any;
+        };
+        'code-sintax-punctuation': {
+            __ref: any;
+        };
+        'code-sintax-function': {
+            __ref: any;
+        };
+        'code-sintax-type': {
+            __ref: any;
+        };
+        'code-sintax-string': {
+            __ref: any;
+        };
+    };
+    let dark: {
+        'code-sintax-identifier': {
+            __ref: any;
+        };
+        'code-sintax-line-number': {
+            __ref: any;
+        };
+        'code-sintax-keyword': {
+            __ref: any;
+        };
+        'code-sintax-punctuation': {
+            __ref: any;
+        };
+        'code-sintax-function': {
+            __ref: any;
+        };
+        'code-sintax-type': {
+            __ref: any;
+        };
+        'code-sintax-string': {
+            __ref: any;
+        };
+    };
+}
+declare namespace _default {
+    export { codeSintax };
+}
+export default _default;
+//# sourceMappingURL=code-sintax.d.ts.map

package/src/tokens/theme/code-sintax.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-sintax.d.ts","sourceRoot":"","sources":["code-sintax.js"],"names":[],"mappings":""}

package/src/tokens/theme/code-sintax.js

@@ -0,0 +1,28 @@
+import { tokenRef } from '../../scripts/refs.js'
+
+/**
+ * Syntax-highlighting colors for code editors (Figma: code-sintax).
+ * Dark values match variable set 77:502 in Webkit Figma.
+ */
+export const codeSintax = {
+  light: {
+    'code-sintax-identifier': tokenRef('primitives.gray.900'),
+    'code-sintax-line-number': tokenRef('primitives.gray.500'),
+    'code-sintax-keyword': tokenRef('primitives.blue.600'),
+    'code-sintax-punctuation': tokenRef('primitives.gray.500'),
+    'code-sintax-function': tokenRef('brand.primary.primary-500'),
+    'code-sintax-type': tokenRef('primitives.yellow.700'),
+    'code-sintax-string': tokenRef('primitives.blue.600')
+  },
+  dark: {
+    'code-sintax-identifier': tokenRef('primitives.gray.50'),
+    'code-sintax-line-number': tokenRef('primitives.gray.400'),
+    'code-sintax-keyword': tokenRef('primitives.blue.400'),
+    'code-sintax-punctuation': tokenRef('primitives.gray.400'),
+    'code-sintax-function': tokenRef('brand.primary.primary-500'),
+    'code-sintax-type': tokenRef('primitives.yellow.300'),
+    'code-sintax-string': tokenRef('primitives.blue.400')
+  }
+}
+
+export default { codeSintax }

package/src/tokens/theme/feedback/danger.js

@@ -1,16 +1,16 @@
-import { tokenRef } from '../../../scripts/refs.js';
+import { tokenRef } from '../../../scripts/refs.js'
 
 export const danger = {
   light: {
     danger: tokenRef('primitives.red.100'),
     'danger-border': tokenRef('primitives.alpha.red.400'),
-    'danger-contrast': tokenRef('primitives.red.700'),
+    'danger-contrast': tokenRef('primitives.red.700')
   },
   dark: {
     danger: tokenRef('primitives.red.800'),
     'danger-border': tokenRef('primitives.alpha.red.400'),
-    'danger-contrast': tokenRef('primitives.red.300'),
-  },
-};
+    'danger-contrast': tokenRef('primitives.red.300')
+  }
+}
 
-export default { danger };
+export default { danger }

package/src/tokens/theme/feedback/info.js

@@ -1,16 +1,16 @@
-import { tokenRef } from '../../../scripts/refs.js';
+import { tokenRef } from '../../../scripts/refs.js'
 
 export const info = {
   light: {
     info: tokenRef('primitives.blue.100'),
     'info-border': tokenRef('primitives.alpha.violet.400'),
-    'info-contrast': tokenRef('primitives.blue.700'),
+    'info-contrast': tokenRef('primitives.blue.700')
   },
   dark: {
     info: tokenRef('primitives.blue.900'),
     'info-border': tokenRef('primitives.alpha.blue.500'),
-    'info-contrast': tokenRef('primitives.blue.300'),
-  },
-};
+    'info-contrast': tokenRef('primitives.blue.300')
+  }
+}
 
-export default { info };
+export default { info }

package/src/tokens/theme/feedback/success.js

@@ -1,16 +1,16 @@
-import { tokenRef } from '../../../scripts/refs.js';
+import { tokenRef } from '../../../scripts/refs.js'
 
 export const success = {
   light: {
     success: tokenRef('primitives.green.200'),
     'success-border': tokenRef('primitives.alpha.green.400'),
-    'success-contrast': tokenRef('primitives.green.800'),
+    'success-contrast': tokenRef('primitives.green.800')
   },
   dark: {
     success: tokenRef('primitives.green.900'),
     'success-border': tokenRef('primitives.alpha.green.400'),
-    'success-contrast': tokenRef('primitives.green.400'),
-  },
-};
+    'success-contrast': tokenRef('primitives.green.400')
+  }
+}
 
-export default { success };
+export default { success }

package/src/tokens/theme/feedback/warning.js

@@ -1,16 +1,16 @@
-import { tokenRef } from '../../../scripts/refs.js';
+import { tokenRef } from '../../../scripts/refs.js'
 
 export const warning = {
   light: {
     warning: tokenRef('primitives.yellow.200'),
     'warning-border': tokenRef('primitives.alpha.yellow.500'),
-    'warning-contrast': tokenRef('primitives.yellow.800'),
+    'warning-contrast': tokenRef('primitives.yellow.800')
   },
   dark: {
     warning: tokenRef('primitives.yellow.900'),
     'warning-border': tokenRef('primitives.alpha.yellow.500'),
-    'warning-contrast': tokenRef('primitives.yellow.500'),
-  },
-};
+    'warning-contrast': tokenRef('primitives.yellow.500')
+  }
+}
 
-export default { warning };
+export default { warning }

package/src/tokens/theme/primary.js

@@ -1,18 +1,18 @@
-import { tokenRef } from '../../scripts/refs.js';
+import { tokenRef } from '../../scripts/refs.js'
 
 export const primary = {
   light: {
     primary: tokenRef('brand.primary.primary-500'),
     'primary-mask': tokenRef('primitives.alpha.orange.200'),
     'primary-selected': tokenRef('primitives.alpha.orange.200'),
-    'primary-contrast': tokenRef('primitives.base.black'),
+    'primary-contrast': tokenRef('primitives.base.black')
   },
   dark: {
     primary: tokenRef('brand.primary.primary-500'),
     'primary-mask': tokenRef('primitives.alpha.orange.200'),
     'primary-selected': tokenRef('primitives.alpha.orange.200'),
-    'primary-contrast': tokenRef('primitives.base.white'),
-  },
-};
+    'primary-contrast': tokenRef('primitives.base.white')
+  }
+}
 
-export default { primary };
+export default { primary }

package/src/tokens/theme/ring.js

@@ -1,12 +1,12 @@
-import { tokenRef } from '../../scripts/refs.js';
+import { tokenRef } from '../../scripts/refs.js'
 
 export const ring = {
   light: {
-    'ring-color': tokenRef('theme.surfaces.surface-600'),
+    'ring-color': tokenRef('theme.surfaces.surface-600')
   },
   dark: {
-    'ring-color': tokenRef('theme.surfaces.surface-700'),
-  },
-};
+    'ring-color': tokenRef('theme.surfaces.surface-700')
+  }
+}
 
-export default { ring };
+export default { ring }

package/src/tokens/theme/secondary.js

@@ -1,18 +1,18 @@
-import { tokenRef } from '../../scripts/refs.js';
+import { tokenRef } from '../../scripts/refs.js'
 
 export const secondary = {
   light: {
     secondary: tokenRef('theme.surfaces.surface-950'),
     'secondary-mask': tokenRef('primitives.alpha.black.50'),
     'secondary-selected': tokenRef('theme.surfaces.surface-950'),
-    'secondary-contrast': tokenRef('primitives.base.white'),
+    'secondary-contrast': tokenRef('primitives.base.white')
   },
   dark: {
     secondary: tokenRef('theme.surfaces.surface-0'),
     'secondary-mask': tokenRef('primitives.alpha.white.100'),
     'secondary-selected': tokenRef('theme.surfaces.surface-0'),
-    'secondary-contrast': tokenRef('primitives.base.black'),
-  },
-};
+    'secondary-contrast': tokenRef('primitives.base.black')
+  }
+}
 
-export default { secondary };
+export default { secondary }

package/src/tokens/theme/surfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"surfaces.d.ts","sourceRoot":"","sources":["surfaces.js"],"names":[],"mappings":";;;;;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAaE"}
+{"version":3,"file":"surfaces.d.ts","sourceRoot":"","sources":["surfaces.js"],"names":[],"mappings":";;;;;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAaC"}

package/src/tokens/theme/surfaces.js

@@ -1,4 +1,4 @@
-import { tokenRef } from '../../scripts/refs.js';
+import { tokenRef } from '../../scripts/refs.js'
 
 const shared = {
   'surface-0': tokenRef('primitives.base.white'),
@@ -12,12 +12,12 @@ const shared = {
   'surface-700': tokenRef('primitives.gray.700'),
   'surface-800': tokenRef('primitives.gray.800'),
   'surface-900': tokenRef('primitives.gray.900'),
-  'surface-950': tokenRef('primitives.gray.950'),
-};
+  'surface-950': tokenRef('primitives.gray.950')
+}
 
 export const surfaces = {
   light: shared,
-  dark: shared,
-};
+  dark: shared
+}
 
-export default { surfaces };
+export default { surfaces }

package/src/tokens/theme/text.d.ts

@@ -12,6 +12,9 @@ export namespace text {
         'text-link': {
             __ref: any;
         };
+        'text-link-hover': {
+            __ref: any;
+        };
         'text-contrast': {
             __ref: any;
         };
@@ -29,6 +32,9 @@ export namespace text {
         'text-link': {
             __ref: any;
         };
+        'text-link-hover': {
+            __ref: any;
+        };
         'text-contrast': {
             __ref: any;
         };

package/src/tokens/theme/text.js

@@ -6,6 +6,7 @@ export const text = {
     'text-muted': tokenRef('primitives.gray.600'),
     'text-disabled': tokenRef('primitives.gray.400'),
     'text-link': tokenRef('primitives.blue.600'),
+    'text-link-hover': tokenRef('primitives.blue.700'),
     'text-contrast': tokenRef('primitives.gray.50')
   },
   dark: {
@@ -13,6 +14,7 @@ export const text = {
     'text-muted': tokenRef('primitives.gray.400'),
     'text-disabled': tokenRef('primitives.gray.700'),
     'text-link': tokenRef('primitives.blue.400'),
+    'text-link-hover': tokenRef('primitives.blue.300'),
     'text-contrast': tokenRef('primitives.base.black')
   }
 }