@aziontech/theme 2.0.2 → 2.0.4

package/README.md

@@ -4,7 +4,7 @@ A comprehensive design token system and theming solution for Azion's web applica
 
 ## Features
 
-- **Design Tokens**: Primitives and semantic colors tokens generated from Figma;
+- **Design Tokens**: Primitives and Semantic Colors tokens generated from Figma Variables;
 - **Brand Colors**: Azion's official color palette with primary (orange), accent (violet), and surface colors;
 - **Theme Support**: Built-in light and dark mode theming;
 - **Tailwind Integration**: Plugin and preset for seamless Tailwind CSS integration;

package/dist/v3/globals.css

@@ -1,11 +1,9 @@
 /* generated by build-tokens.mjs — target: v3 — do not edit */
 
-@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  :root, [data-theme=light], .azion.azion-light {
+:root, [data-theme=light], .azion.azion-light {
     /* ── Primitives ── */
     --color-base-white: #FFFFFF;
     --color-base-black: #000000;
@@ -20,16 +18,16 @@
     --color-blue-800: #003066;
     --color-blue-900: #001833;
     --color-blue-950: #000C1A;
-    --color-gray-50: #FCFCFC;
-    --color-gray-100: #F2F2F2;
+    --color-gray-50: #FAFAFA;
+    --color-gray-100: #F5F5F5;
     --color-gray-200: #E5E5E5;
     --color-gray-300: #B2B2B2;
     --color-gray-400: #999999;
     --color-gray-500: #808080;
     --color-gray-600: #666666;
     --color-gray-700: #4D4D4D;
-    --color-gray-800: #333333;
-    --color-gray-900: #1A1A1A;
+    --color-gray-800: #1A1A1A;
+    --color-gray-900: #141414;
     --color-gray-950: #0A0A0A;
     --color-violet-50: #F6F6FF;
     --color-violet-100: #ECECFF;
@@ -40,14 +38,14 @@
     --color-violet-600: #756FE5;
     --color-violet-700: #625BD5;
     --color-violet-800: #524BBB;
-    --color-violet-900: #423F99;
-    --color-violet-950: #0B0A19;
+    --color-violet-900: #1F1E48;
+    --color-violet-950: #100F24;
     --color-orange-50: #FFF5EF;
     --color-orange-100: #FFE7D8;
     --color-orange-200: #FFCFB3;
     --color-orange-300: #FFB180;
     --color-orange-400: #FF8E4D;
-    --color-orange-500: #FE601F;
+    --color-orange-500: #F3652B;
     --color-orange-600: #D94A03;
     --color-orange-700: #B03C02;
     --color-orange-800: #8A2F02;
@@ -96,18 +94,18 @@
     --color-red-700: #B91C1C;
     --color-red-800: #991B1B;
     --color-red-900: #7F1D1D;
-    --color-red-950: #240505;
+    --color-red-950: #430A0A;
     --color-surface-0: #FFFFFF;
     --color-surface-50: #FAFAFA;
     --color-surface-100: #F5F5F5;
     --color-surface-200: #E5E5E5;
-    --color-surface-300: #D4D4D4;
-    --color-surface-400: #A3A3A3;
-    --color-surface-500: #737373;
-    --color-surface-600: #525252;
-    --color-surface-700: #404040;
-    --color-surface-800: #262626;
-    --color-surface-900: #171717;
+    --color-surface-300: #B2B2B2;
+    --color-surface-400: #999999;
+    --color-surface-500: #808080;
+    --color-surface-600: #666666;
+    --color-surface-700: #4D4D4D;
+    --color-surface-800: #1A1A1A;
+    --color-surface-900: #141414;
     --color-surface-950: #0A0A0A;
     --color-alpha-violet-50: #8A84EC0D;
     --color-alpha-violet-100: #8A84EC1A;
@@ -140,7 +138,7 @@
     --color-alpha-white-800: #FFFFFFCC;
     --color-alpha-white-900: #FFFFFFE5;
     --color-alpha-black-50: #00000005;
-    --color-alpha-black-100: #0000000D;
+    --color-alpha-black-100: #00000014;
     --color-alpha-black-200: #00000033;
     --color-alpha-black-300: #0000004D;
     --color-alpha-black-400: #00000066;
@@ -179,16 +177,16 @@
     --color-alpha-yellow-700: #F7BD08B2;
     --color-alpha-yellow-800: #F7BD08CC;
     --color-alpha-yellow-900: #F7BD08E5;
-    --color-alpha-blue-50: #E5F1FF0D;
-    --color-alpha-blue-100: #CCE4FF1A;
-    --color-alpha-blue-200: #99C9FF33;
-    --color-alpha-blue-300: #66ADFF4D;
-    --color-alpha-blue-400: #3392FF66;
+    --color-alpha-blue-50: #0072F50D;
+    --color-alpha-blue-100: #0072F51A;
+    --color-alpha-blue-200: #0072F533;
+    --color-alpha-blue-300: #0072F54D;
+    --color-alpha-blue-400: #0072F566;
     --color-alpha-blue-500: #0072F580;
-    --color-alpha-blue-600: #005FCC99;
-    --color-alpha-blue-700: #004799B2;
-    --color-alpha-blue-800: #003066CC;
-    --color-alpha-blue-900: #001833E5;
+    --color-alpha-blue-600: #0072F599;
+    --color-alpha-blue-700: #0072F5B2;
+    --color-alpha-blue-800: #0072F5CC;
+    --color-alpha-blue-900: #0072F5E5;
     --color-alpha-absolute-black: #000000E5;
     --color-alpha-absolute-white: #FFFFFFE5;
     --color-primary-50: #FFF5EF;
@@ -196,7 +194,7 @@
     --color-primary-200: #FFCFB3;
     --color-primary-300: #FFB180;
     --color-primary-400: #FF8E4D;
-    --color-primary-500: #FE601F;
+    --color-primary-500: #F3652B;
     --color-primary-600: #D94A03;
     --color-primary-700: #B03C02;
     --color-primary-800: #8A2F02;
@@ -211,10 +209,10 @@
     --color-accent-600: #756FE5;
     --color-accent-700: #625BD5;
     --color-accent-800: #524BBB;
-    --color-accent-900: #423F99;
-    --color-accent-950: #0B0A19;
+    --color-accent-900: #1F1E48;
+    --color-accent-950: #100F24;
     --color-absolute-black: #0A0A0A;
-    --color-absolute-white: #FCFCFC;
+    --color-absolute-white: #FAFAFA;
     --breakpoint-sm: 640px;
     --breakpoint-md: 768px;
     --breakpoint-lg: 1024px;
@@ -469,10 +467,13 @@
     /* ── Texts ── */
     --text-big-number-md-font-size: 1.25rem;
     --text-big-number-md-line-height: 1.20;
+    --text-big-number-md-font-family: Proto Mono;
     --text-big-number-sm-font-size: 1rem;
     --text-big-number-sm-line-height: 1.20;
+    --text-big-number-sm-font-family: Proto Mono;
     --text-big-number-lg-font-size: 1.5rem;
     --text-big-number-lg-line-height: 1.20;
+    --text-big-number-lg-font-family: Proto Mono;
     --text-heading-2xl-font-size: 1.875rem;
     --text-heading-2xl-line-height: 1.2;
     --text-heading-xl-font-size: 1.25rem;
@@ -483,6 +484,15 @@
     --text-heading-md-line-height: 1.2;
     --text-heading-sm-font-size: 0.875rem;
     --text-heading-sm-line-height: 1.2;
+    --text-label-lg-font-size: 1rem;
+    --text-label-lg-line-height: 1.5;
+    --text-label-lg-font-weight: 500;
+    --text-label-md-font-size: 0.875rem;
+    --text-label-md-line-height: 1.5;
+    --text-label-md-font-weight: 500;
+    --text-label-sm-font-size: 0.75rem;
+    --text-label-sm-line-height: 1.5;
+    --text-label-sm-font-weight: 500;
     --text-body-lg-font-size: 1rem;
     --text-body-lg-line-height: 1.5;
     --text-body-md-font-size: 1rem;
@@ -491,38 +501,41 @@
     --text-body-sm-line-height: 1.5;
     --text-body-xs-font-size: 0.75rem;
     --text-body-xs-line-height: 1.5;
-    --text-body-xss-font-size: 0.625rem;
-    --text-body-xss-line-height: 1.5;
+    --text-body-xxs-font-size: 0.625rem;
+    --text-body-xxs-line-height: 1.5;
+    --text-overline-md-font-family: Proto Mono;
     --text-overline-md-font-size: 0.75rem;
     --text-overline-md-line-height: 1.4;
     --text-overline-md-letter-spacing: 0.08em;
     --text-overline-md-text-transform: uppercase;
+    --text-overline-sm-font-family: Proto Mono;
     --text-overline-sm-font-size: 0.75rem;
     --text-overline-sm-line-height: 1.4;
     --text-overline-sm-letter-spacing: 0.08em;
     --text-overline-sm-text-transform: uppercase;
+    --text-overline-xs-font-family: Proto Mono;
     --text-overline-xs-font-size: 0.625rem;
     --text-overline-xs-line-height: 1.4;
     --text-overline-xs-letter-spacing: 0.08em;
     --text-overline-xs-text-transform: uppercase;
-    --text-button-lg-font-family: Proto Mono;
+    --text-button-lg-font-family: Sora;
     --text-button-lg-font-size: 0.875rem;
     --text-button-lg-font-weight: 600;
     --text-button-lg-line-height: 1;
     --text-button-lg-letter-spacing: 0;
-    --text-button-md-font-family: Proto Mono;
+    --text-button-md-font-family: Sora;
     --text-button-md-font-size: 0.75rem;
     --text-button-md-font-weight: 600;
     --text-button-md-line-height: 1;
     --text-button-md-letter-spacing: 0;
 
     /* ── Semantic colors ── */
-    --text-default: #1A1A1A;
+    --text-default: #141414;
     --text-muted: #666666;
     --text-link: #005FCC;
     --text-code: #666666;
     --text-link-hover: #004799;
-    --text-primary: #FE601F;
+    --text-primary: #F3652B;
     --text-primary-hover: #D94A03;
     --text-accent: #8A84EC;
     --text-accent-hover: #756FE5;
@@ -544,14 +557,14 @@
     --background-warning: #FCE49C;
     --background-backdrop: primitives.alpha.neutral.25;
     --background-primary-hover: #D94A03;
-    --background-primary: #FE601F;
+    --background-primary: #F3652B;
     --background-primary-mask: primitives.alpha.brand.primary.65;
     --border-default: #F5F5F5;
     --border-strong: #000000;
     --border-warning: #C59707;
     --border-success: #18B452;
     --border-danger: #DC2626;
-    --border-primary: #FE601F;
+    --border-primary: #F3652B;
     --border-accent: #8A84EC;
     --border-warning-hover: #F7BD08;
     --border-success-hover: #26D968;
@@ -559,7 +572,7 @@
     --border-primary-hover: #D94A03;
     --border-accent-hover: #756FE5;
     --border-subtle: #E5E5E5;
-  }
+}
 
   @media (min-width: 640px) {
     :root, [data-theme=light], .azion.azion-light {
@@ -602,71 +615,68 @@
       --spacing-xl: 3rem;
     }
   }
-}
 
-@layer base {
-  [data-theme=dark], .dark, .azion.azion-dark {
-    /* ── Semantic colors (dark) ── */
-    --text-default: #FCFCFC;
-    --text-muted: #999999;
-    --text-link: #3392FF;
-    --text-code: #999999;
-    --text-link-hover: #66ADFF;
-    --text-primary: #FE601F;
-    --text-primary-hover: #FF8E4D;
-    --text-accent: #8A84EC;
-    --text-accent-hover: #9F9AF1;
-    --text-danger-hover: #EF4444;
-    --text-warning-hover: #F7BD08;
-    --text-success-hover: #26D968;
-    --text-success: #52E086;
-    --text-danger: #F87171;
-    --text-warning: #F8CA3A;
-    --background-surface-raised: #262626;
-    --background-surface-overlay: #404040;
-    --background-surface: #171717;
-    --background-canvas: #0A0A0A;
-    --background-danger-hover: #DC2626;
-    --background-warning-hover: #C59707;
-    --background-success-hover: #18B452;
-    --background-success: #12542B;
-    --background-danger: #991B1B;
-    --background-warning: #634B03;
-    --background-backdrop: primitives.alpha.neutral.25;
-    --background-primary-hover: #FF8E4D;
-    --background-primary: #FE601F;
-    --background-primary-mask: primitives.alpha.brand.primary.65;
-    --border-default: #262626;
-    --border-strong: #FFFFFF;
-    --border-warning: #F8CA3A;
-    --border-success: #52E086;
-    --border-danger: #F87171;
-    --border-primary: #FE601F;
-    --border-accent: #8A84EC;
-    --border-warning-hover: #F7BD08;
-    --border-success-hover: #26D968;
-    --border-danger-hover: #EF4444;
-    --border-primary-hover: #FF8E4D;
-    --border-accent-hover: #9F9AF1;
-    --border-subtle: #404040;
-  }
+[data-theme=dark], .dark, .azion.azion-dark {
+  /* ── Semantic colors (dark) ── */
+  --text-default: #FAFAFA;
+  --text-muted: #999999;
+  --text-link: #3392FF;
+  --text-code: #999999;
+  --text-link-hover: #66ADFF;
+  --text-primary: #F3652B;
+  --text-primary-hover: #FF8E4D;
+  --text-accent: #8A84EC;
+  --text-accent-hover: #9F9AF1;
+  --text-danger-hover: #EF4444;
+  --text-warning-hover: #F7BD08;
+  --text-success-hover: #26D968;
+  --text-success: #52E086;
+  --text-danger: #F87171;
+  --text-warning: #F8CA3A;
+  --background-surface-raised: #1A1A1A;
+  --background-surface-overlay: #4D4D4D;
+  --background-surface: #141414;
+  --background-canvas: #0A0A0A;
+  --background-danger-hover: #DC2626;
+  --background-warning-hover: #C59707;
+  --background-success-hover: #18B452;
+  --background-success: #12542B;
+  --background-danger: #991B1B;
+  --background-warning: #634B03;
+  --background-backdrop: primitives.alpha.neutral.25;
+  --background-primary-hover: #FF8E4D;
+  --background-primary: #F3652B;
+  --background-primary-mask: primitives.alpha.brand.primary.65;
+  --border-default: #1A1A1A;
+  --border-strong: #FFFFFF;
+  --border-warning: #F8CA3A;
+  --border-success: #52E086;
+  --border-danger: #F87171;
+  --border-primary: #F3652B;
+  --border-accent: #8A84EC;
+  --border-warning-hover: #F7BD08;
+  --border-success-hover: #26D968;
+  --border-danger-hover: #EF4444;
+  --border-primary-hover: #FF8E4D;
+  --border-accent-hover: #9F9AF1;
+  --border-subtle: #4D4D4D;
 }
 
 /* ── Theme semantics (primary, secondary, surfaces, feedback, …) ── */
 :root, [data-theme=light], .azion.azion-light {
   --surface-0: #FFFFFF;
-  --surface-50: #FCFCFC;
-  --surface-100: #F2F2F2;
+  --surface-50: #FAFAFA;
+  --surface-100: #F5F5F5;
   --surface-200: #E5E5E5;
   --surface-300: #B2B2B2;
   --surface-400: #999999;
   --surface-500: #808080;
   --surface-600: #666666;
   --surface-700: #4D4D4D;
-  --surface-800: #333333;
-  --surface-900: #1A1A1A;
+  --surface-800: #1A1A1A;
+  --surface-900: #141414;
   --surface-950: #0A0A0A;
-  --primary: #FE601F;
+  --primary: #F3652B;
   --primary-mask: #FE601F1A;
   --primary-selected: #FE601F1A;
   --primary-contrast: #000000;
@@ -678,24 +688,25 @@
   --accent-mask: #8A84EC0D;
   --accent-selected: #8A84EC;
   --accent-contrast: #000000;
-  --bg-canvas: #FFFFFF;
+  --bg-canvas: #FAFAFA;
   --bg-surface: #FFFFFF;
   --bg-surface-raised: #FFFFFF;
   --bg-mask: #00000005;
-  --bg-surface-overlay: #FCFCFC;
-  --bg-hover: #0000000D;
+  --bg-surface-overlay: #FAFAFA;
+  --bg-hover: #00000014;
   --bg-active: #00000005;
-  --bg-backdrop: #000000B2;
+  --bg-backdrop: #000000CC;
   --bg-selected: #E5E5E5;
-  --bg-contrast: #1A1A1A;
-  --bg-disabled: #999999;
-  --border-default: #E5E5E5;
-  --border-muted: #F2F2F2;
+  --bg-contrast: #141414;
+  --bg-disabled: #E5E5E5;
+  --border-default: #00000033;
+  --border-muted: #00000014;
   --border-strong: #000000;
-  --border-selected: #FE601F;
-  --text-default: #1A1A1A;
+  --border-selected: #F3652B;
+  --text-default: #141414;
   --text-muted: #666666;
-  --text-disabled: #666666;
+  --text-disabled: #999999;
+  --text-link: #005FCC;
   --ring-color: #0A0A0A;
   --success: #F0FDF4;
   --success-border: #22C55E99;
@@ -706,25 +717,25 @@
   --danger: #FFE5E5;
   --danger-border: #EF444499;
   --danger-contrast: #DC2626;
-  --info: #F6F6FF;
-  --info-border: #8A84EC99;
-  --info-contrast: #8A84EC;
+  --info: #CCE4FF;
+  --info-border: #99C9FF;
+  --info-contrast: #0072F5;
 }
 
 [data-theme=dark], .dark, .azion.azion-dark {
   --surface-0: #FFFFFF;
-  --surface-50: #FCFCFC;
-  --surface-100: #F2F2F2;
+  --surface-50: #FAFAFA;
+  --surface-100: #F5F5F5;
   --surface-200: #E5E5E5;
   --surface-300: #B2B2B2;
   --surface-400: #999999;
   --surface-500: #808080;
   --surface-600: #666666;
   --surface-700: #4D4D4D;
-  --surface-800: #333333;
-  --surface-900: #1A1A1A;
+  --surface-800: #1A1A1A;
+  --surface-900: #141414;
   --surface-950: #0A0A0A;
-  --primary: #FE601F;
+  --primary: #F3652B;
   --primary-mask: #FE601F1A;
   --primary-selected: #FE601F1A;
   --primary-contrast: #FFFFFF;
@@ -737,23 +748,24 @@
   --accent-selected: #8A84EC;
   --accent-contrast: #000000;
   --bg-canvas: #0A0A0A;
-  --bg-surface: #1A1A1A;
-  --bg-surface-raised: #333333;
+  --bg-surface: #0A0A0A;
+  --bg-surface-raised: #141414;
   --bg-mask: #FFFFFF0D;
   --bg-surface-overlay: #4D4D4D;
-  --bg-hover: #FFFFFF1A;
-  --bg-active: #FFFFFF0D;
-  --bg-backdrop: #000000B2;
-  --bg-selected: #0A0A0A;
-  --bg-contrast: #FCFCFC;
-  --bg-disabled: #808080;
-  --border-default: #333333;
-  --border-muted: #4D4D4D;
+  --bg-hover: #00000033;
+  --bg-active: #00000014;
+  --bg-backdrop: #000000CC;
+  --bg-selected: #1A1A1A;
+  --bg-contrast: #FAFAFA;
+  --bg-disabled: #1A1A1A;
+  --border-default: #FFFFFF1A;
+  --border-muted: #FFFFFF0D;
   --border-strong: #FFFFFF;
-  --border-selected: #FE601F;
-  --text-default: #FCFCFC;
+  --border-selected: #F3652B;
+  --text-default: #FAFAFA;
   --text-muted: #999999;
-  --text-disabled: #666666;
+  --text-disabled: #4D4D4D;
+  --text-link: #3392FF;
   --ring-color: #FFFFFF;
   --success: #03170B;
   --success-border: #22C55E66;
@@ -761,12 +773,12 @@
   --warning: #191301;
   --warning-border: #F7BD084D;
   --warning-contrast: #FAD76B;
-  --danger: #240505;
+  --danger: #430A0A;
   --danger-border: #EF444480;
   --danger-contrast: #F87171;
-  --info: #0B0A19;
-  --info-border: #8A84EC66;
-  --info-contrast: #8A84EC;
+  --info: #001833;
+  --info-border: #0072F580;
+  --info-contrast: #66ADFF;
 }
 
 @layer components {
@@ -792,22 +804,25 @@
   .p-spacing-xxs { padding: var(--spacing-xxs); }
 
   /* ── Texts ── */
-  .text-big-number-md { font-size: var(--text-big-number-md-font-size); line-height: var(--text-big-number-md-line-height); }
-  .text-big-number-sm { font-size: var(--text-big-number-sm-font-size); line-height: var(--text-big-number-sm-line-height); }
-  .text-big-number-lg { font-size: var(--text-big-number-lg-font-size); line-height: var(--text-big-number-lg-line-height); }
+  .text-big-number-md { font-size: var(--text-big-number-md-font-size); line-height: var(--text-big-number-md-line-height); font-family: var(--text-big-number-md-font-family); }
+  .text-big-number-sm { font-size: var(--text-big-number-sm-font-size); line-height: var(--text-big-number-sm-line-height); font-family: var(--text-big-number-sm-font-family); }
+  .text-big-number-lg { font-size: var(--text-big-number-lg-font-size); line-height: var(--text-big-number-lg-line-height); font-family: var(--text-big-number-lg-font-family); }
   .text-heading-2xl { font-size: var(--text-heading-2xl-font-size); line-height: var(--text-heading-2xl-line-height); }
   .text-heading-xl { font-size: var(--text-heading-xl-font-size); line-height: var(--text-heading-xl-line-height); }
   .text-heading-lg { font-size: var(--text-heading-lg-font-size); line-height: var(--text-heading-lg-line-height); }
   .text-heading-md { font-size: var(--text-heading-md-font-size); line-height: var(--text-heading-md-line-height); }
   .text-heading-sm { font-size: var(--text-heading-sm-font-size); line-height: var(--text-heading-sm-line-height); }
+  .text-label-lg { font-size: var(--text-label-lg-font-size); line-height: var(--text-label-lg-line-height); font-weight: var(--text-label-lg-font-weight); }
+  .text-label-md { font-size: var(--text-label-md-font-size); line-height: var(--text-label-md-line-height); font-weight: var(--text-label-md-font-weight); }
+  .text-label-sm { font-size: var(--text-label-sm-font-size); line-height: var(--text-label-sm-line-height); font-weight: var(--text-label-sm-font-weight); }
   .text-body-lg { font-size: var(--text-body-lg-font-size); line-height: var(--text-body-lg-line-height); }
   .text-body-md { font-size: var(--text-body-md-font-size); line-height: var(--text-body-md-line-height); }
   .text-body-sm { font-size: var(--text-body-sm-font-size); line-height: var(--text-body-sm-line-height); }
   .text-body-xs { font-size: var(--text-body-xs-font-size); line-height: var(--text-body-xs-line-height); }
-  .text-body-xss { font-size: var(--text-body-xss-font-size); line-height: var(--text-body-xss-line-height); }
-  .text-overline-md { font-size: var(--text-overline-md-font-size); line-height: var(--text-overline-md-line-height); letter-spacing: var(--text-overline-md-letter-spacing); text-transform: var(--text-overline-md-text-transform); }
-  .text-overline-sm { font-size: var(--text-overline-sm-font-size); line-height: var(--text-overline-sm-line-height); letter-spacing: var(--text-overline-sm-letter-spacing); text-transform: var(--text-overline-sm-text-transform); }
-  .text-overline-xs { font-size: var(--text-overline-xs-font-size); line-height: var(--text-overline-xs-line-height); letter-spacing: var(--text-overline-xs-letter-spacing); text-transform: var(--text-overline-xs-text-transform); }
+  .text-body-xxs { font-size: var(--text-body-xxs-font-size); line-height: var(--text-body-xxs-line-height); }
+  .text-overline-md { font-family: var(--text-overline-md-font-family); font-size: var(--text-overline-md-font-size); line-height: var(--text-overline-md-line-height); letter-spacing: var(--text-overline-md-letter-spacing); text-transform: var(--text-overline-md-text-transform); }
+  .text-overline-sm { font-family: var(--text-overline-sm-font-family); font-size: var(--text-overline-sm-font-size); line-height: var(--text-overline-sm-line-height); letter-spacing: var(--text-overline-sm-letter-spacing); text-transform: var(--text-overline-sm-text-transform); }
+  .text-overline-xs { font-family: var(--text-overline-xs-font-family); font-size: var(--text-overline-xs-font-size); line-height: var(--text-overline-xs-line-height); letter-spacing: var(--text-overline-xs-letter-spacing); text-transform: var(--text-overline-xs-text-transform); }
   .text-button-lg { font-family: var(--text-button-lg-font-family); font-size: var(--text-button-lg-font-size); font-weight: var(--text-button-lg-font-weight); line-height: var(--text-button-lg-line-height); letter-spacing: var(--text-button-lg-letter-spacing); }
   .text-button-md { font-family: var(--text-button-md-font-family); font-size: var(--text-button-md-font-size); font-weight: var(--text-button-md-font-weight); line-height: var(--text-button-md-line-height); letter-spacing: var(--text-button-md-letter-spacing); }
 }