@akad/design-system 0.2.0-beta.9 → 1.0.0-alpha.2

package/scss/core/tokens/shadows.scss

@@ -0,0 +1,15 @@
+// Shadows (structural - compiled for performance)
+// NOTE: Shadows are structural and don't change between themes
+$shadow__color: #616161 !default;
+$shadow__level--1:
+  0 1px 3px 0 rgba($shadow__color, 0.12),
+  0 1px 2px 0 rgba($shadow__color, 0.24) !default;
+$shadow__level--2:
+  0 3px 6px 0 rgba($shadow__color, 0.15),
+  0 2px 4px 0 rgba($shadow__color, 0.12) !default;
+$shadow__level--3:
+  0 10px 20px 0 rgba($shadow__color, 0.3),
+  0 3px 6px 0 rgba($shadow__color, 0.3) !default;
+$shadow__level--4:
+  0 15px 25px 0 rgba($shadow__color, 0.15),
+  0 5px 10px 0 rgba($shadow__color, 0.05) !default;

package/scss/core/tokens/spacings.scss

@@ -0,0 +1,41 @@
+/* ===== Variations Spacing ==== */
+$spacing--quark: 4px !default;
+$spacing--nano: 8px !default;
+$spacing--xxxs: 16px !default;
+$spacing--xxs: 24px !default;
+$spacing--xs: 32px !default;
+$spacing--sm: 40px !default;
+$spacing--md: 48px !default;
+$spacing--lg: 56px !default;
+$spacing--xl: 64px !default;
+$spacing--xxl: 72px !default;
+$spacing--xxxl: 80px !default;
+$spacing: (
+  'quark': $spacing--quark,
+  'nano': $spacing--nano,
+  'xxxs': $spacing--xxxs,
+  'xxs': $spacing--xxs,
+  'xs': $spacing--xs,
+  'sm': $spacing--sm,
+  'md': $spacing--md,
+  'lg': $spacing--lg,
+  'xl': $spacing--xl,
+  'xxl': $spacing--xxl,
+  'xxxl': $spacing--xxxl,
+) !default;
+
+/* ===== Inset Spacing ==== */
+$spacing__inset--quark: 4px !default;
+$spacing__inset--nano: 8px !default;
+$spacing__inset--xs: 16px !default;
+$spacing__inset--sm: 24px !default;
+$spacing__inset--md: 32px !default;
+$spacing__inset--lg: 40px !default;
+$spacing__inset: (
+  'quark': $spacing__inset--quark,
+  'nano': $spacing__inset--nano,
+  'xs': $spacing__inset--xs,
+  'sm': $spacing__inset--sm,
+  'md': $spacing__inset--md,
+  'lg': $spacing__inset--lg,
+) !default;

package/scss/core/tokens/typography.scss

@@ -0,0 +1,20 @@
+// Typography tokens (structural - not theme-specific)
+
+// Font sizes (same for all themes)
+$font__size--xxs: 10px !default;
+$font__size--xs: 12px !default;
+$font__size--sm: 14px !default;
+$font__size--md: 16px !default;
+$font__size--lg: 20px !default;
+$font__size--xl: 24px !default;
+$font__size--xxl: 32px !default;
+$font__size--xxxl: 40px !default;
+$font__size--huge: 56px !default;
+
+// Font weights (same for all themes)
+$font__weight--extralight: 200 !default;
+$font__weight--light: 300 !default;
+$font__weight--regular: 400 !default;
+$font__weight--medium: 500 !default;
+$font__weight--semibold: 600 !default;
+$font__weight--bold: 700 !default;

package/scss/themes/aon/colors.scss

@@ -0,0 +1,83 @@
+// AON theme colors (red theme)
+
+// primary (AON red)
+$color__primary--darker: #b2100d !default;
+$color__primary--dark: #cc1311 !default;
+$color__primary: #e80300 !default;
+$color__primary--light: #ef312f !default;
+$color__primary--lighter: #fb8c8b !default;
+$color__primary--lightest: #fcb7b7 !default;
+$colors__primary: (
+  'darker': $color__primary--darker,
+  'dark': $color__primary--dark,
+  'default': $color__primary,
+  'light': $color__primary--light,
+  'lighter': $color__primary--lighter,
+  'lightest': $color__primary--lightest,
+) !default;
+
+// secondary (AON dark)
+$color__secondary--darker: #141416 !default;
+$color__secondary--dark: #1d1e26 !default;
+$color__secondary: #262836 !default;
+$color__secondary--light: #333751 !default;
+$color__secondary--lighter: #51577a !default;
+$color__secondary--lightest: #6e75a1 !default;
+$colors__secondary: (
+  'darker': $color__secondary--darker,
+  'dark': $color__secondary--dark,
+  'default': $color__secondary,
+  'light': $color__secondary--light,
+  'lighter': $color__secondary--lighter,
+  'lightest': $color__secondary--lightest,
+) !default;
+
+// success
+$color__success--dark: #007347 !default;
+$color__success: #bde094 !default;
+$color__success--light: #dbedc7 !default;
+$color__success--lighter: #e6eddf !default;
+$colors__success: (
+  'dark': $color__success--dark,
+  'default': $color__success,
+  'light': $color__success--light,
+  'lighter': $color__success--lighter,
+) !default;
+
+// warning
+$color__warning--dark: #ffb81c !default;
+$color__warning: #ffc766 !default;
+$color__warning--light: #feebcb !default;
+$color__warning--lighter: #fef5e5 !default;
+$colors__warning: (
+  'dark': $color__warning--dark,
+  'default': $color__warning,
+  'light': $color__warning--light,
+  'lighter': $color__warning--lighter,
+) !default;
+
+// danger
+$color__danger--dark: #b23b3c !default;
+$color__danger: #fa5254 !default;
+$color__danger--light: #fa898b !default;
+$color__danger--lighter: #fad5d5 !default;
+$colors__danger: (
+  'dark': $color__danger--dark,
+  'default': $color__danger,
+  'light': $color__danger--light,
+  'lighter': $color__danger--lighter,
+) !default;
+
+// info
+$color__info--dark: #4021d9 !default;
+$color__info: #7040ff !default;
+$color__info--light: #d5ccff !default;
+$color__info--lighter: #eae5ff !default;
+$colors__info: (
+  'dark': $color__info--dark,
+  'default': $color__info,
+  'light': $color__info--light,
+  'lighter': $color__info--lighter,
+) !default;
+
+// neutral (inherit from default theme - not redefined in AON)

package/scss/themes/aon/index.scss

@@ -0,0 +1,54 @@
+// AON theme - CSS custom properties
+@import 'colors';
+@import 'typography';
+
+[data-library='aon'] {
+  // ===== PRIMARY COLORS (AON red) =====
+  --color__primary--darker: #{$color__primary--darker};
+  --color__primary--dark: #{$color__primary--dark};
+  --color__primary: #{$color__primary};
+  --color__primary--light: #{$color__primary--light};
+  --color__primary--lighter: #{$color__primary--lighter};
+  --color__primary--lightest: #{$color__primary--lightest};
+
+  // ===== SECONDARY COLORS (AON dark) =====
+  --color__secondary--darker: #{$color__secondary--darker};
+  --color__secondary--dark: #{$color__secondary--dark};
+  --color__secondary: #{$color__secondary};
+  --color__secondary--light: #{$color__secondary--light};
+  --color__secondary--lighter: #{$color__secondary--lighter};
+  --color__secondary--lightest: #{$color__secondary--lightest};
+
+  // ===== SUCCESS COLORS =====
+  --color__success--dark: #{$color__success--dark};
+  --color__success: #{$color__success};
+  --color__success--light: #{$color__success--light};
+  --color__success--lighter: #{$color__success--lighter};
+
+  // ===== WARNING COLORS =====
+  --color__warning--dark: #{$color__warning--dark};
+  --color__warning: #{$color__warning};
+  --color__warning--light: #{$color__warning--light};
+  --color__warning--lighter: #{$color__warning--lighter};
+
+  // ===== DANGER COLORS =====
+  --color__danger--dark: #{$color__danger--dark};
+  --color__danger: #{$color__danger};
+  --color__danger--light: #{$color__danger--light};
+  --color__danger--lighter: #{$color__danger--lighter};
+
+  // ===== INFO COLORS =====
+  --color__info--dark: #{$color__info--dark};
+  --color__info: #{$color__info};
+  --color__info--light: #{$color__info--light};
+  --color__info--lighter: #{$color__info--lighter};
+
+  // ===== TYPOGRAPHY =====
+  --font__family--base: #{$font__family--base};
+  --font__family--highlight: #{$font__family--highlight};
+
+  // Button overrides (AON-specific)
+  .ds-button {
+    --button__border-radius: 999px; // pill (full rounded)
+  }
+}

package/scss/themes/aon/typography.scss

@@ -0,0 +1,7 @@
+// AON theme typography (only font-families - sizes/weights in core)
+@import 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap';
+
+// Font families (theme-specific)
+$font__family--base: 'Inter', sans-serif !default;
+$font__family--highlight: 'Inter', sans-serif !default;

package/scss/themes/bees/colors.scss

@@ -0,0 +1,32 @@
+// Bees Bank theme colors (gradient theme)
+
+// brand gradient
+$brand-gradiant: linear-gradient(
+  46.18deg,
+  #ff0 19.1%,
+  #f9ff07 24.26%,
+  #ecff1c 31.63%,
+  #d5ff3e 40.47%,
+  #b5ff6d 50.78%,
+  #8cffaa 61.84%,
+  #5cfff3 73.62%,
+  #55fffe 75.83%
+) !default;
+
+// primary (Bees gradient)
+$color__primary--darker: #8e9911 !default;
+$color__primary--dark: #ecff1c !default;
+$color__primary: $brand-gradiant !default;
+$color__primary--light: #f0ff49 !default;
+$color__primary--lighter: #f6ff8e !default;
+$color__primary--lightest: #fbffd2 !default;
+$colors__primary: (
+  'darker': $color__primary--darker,
+  'dark': $color__primary--dark,
+  'default': $color__primary,
+  'light': $color__primary--light,
+  'lighter': $color__primary--lighter,
+  'lightest': $color__primary--lightest,
+) !default;
+
+// NOTE: secondary, neutral, success, warning, danger, info inherit from default theme

package/scss/themes/bees/index.scss

@@ -0,0 +1,51 @@
+// Bees Bank theme - CSS custom properties
+@import 'colors';
+@import 'typography';
+
+[data-library='bees'] {
+  // ===== PRIMARY COLORS (Bees gradient) =====
+  --color__primary--darker: #{$color__primary--darker};
+  --color__primary--dark: #{$color__primary--dark};
+  --color__primary: #{$color__primary};
+  --color__primary--light: #{$color__primary--light};
+  --color__primary--lighter: #{$color__primary--lighter};
+  --color__primary--lightest: #{$color__primary--lightest};
+
+  // ===== TYPOGRAPHY (Barlow + Work Sans) =====
+  --font__family--base: #{$font__family--base};
+  --font__family--highlight: #{$font__family--highlight};
+
+  // Button overrides (Bees-specific)
+  .ds-button {
+    // Sass var overrides
+    --button__text-transform: uppercase;
+    --button__letter-spacing: 1px;
+    --button__border-width: 2px;
+
+    // Color overrides (inverted scheme)
+    --button-background-color__primary: var(--color__neutral--100);
+    --button-color__primary: var(--color__neutral--00);
+    --button-color__primary--hover: var(--color__neutral--100);
+    --button-color__primary--active: var(--color__neutral--100);
+    --button-background-color__primary--hover: var(--color__primary);
+    --button-background-color__primary--active: var(--color__primary--dark);
+
+    // Outline inverted
+    --button-color__primary-outline: var(--color__neutral--100);
+    --button-color__primary-outline--active: var(--color__neutral--100);
+    --button-background-color__primary-outline--hover: var(--color__primary);
+    --button-background-color__primary-outline--active: var(
+      --color__primary--light
+    );
+
+    // Text variant (NOT inverted - uses normal colors)
+    --button-color__primary-text: var(--color__primary);
+    --button-color__primary-text--active: var(--color__primary--dark);
+    --button-background-color__primary-text--hover: var(
+      --color__primary--lighter
+    );
+    --button-background-color__primary-text--active: var(
+      --color__primary--light
+    );
+  }
+}

package/scss/themes/bees/typography.scss

@@ -0,0 +1,6 @@
+// Bees Bank theme typography
+@import 'https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';
+
+$font__family--base: 'Work Sans', sans-serif !default;
+$font__family--highlight: 'Barlow', sans-serif !default;

package/scss/themes/bmc/colors.scss

@@ -0,0 +1,81 @@
+// BMC theme colors (yellow/black/gray theme)
+
+// primary (BMC yellow/black/gray)
+$color__primary--darker: #ffb81c !default;
+$color__primary--dark: #000 !default;
+$color__primary: #f5f5f5 !default;
+$color__primary--light: #f3f9ec !default;
+$color__primary--lighter: #fb8c8b !default;
+$color__primary--lightest: #fcb7b7 !default;
+$colors__primary: (
+  'darker': $color__primary--darker,
+  'dark': $color__primary--dark,
+  'default': $color__primary,
+  'light': $color__primary--light,
+  'lighter': $color__primary--lighter,
+  'lightest': $color__primary--lightest,
+) !default;
+
+// secondary (BMC grays)
+$color__secondary--darker: #2e2e33 !default;
+$color__secondary--dark: #757575 !default;
+$color__secondary: #262836 !default;
+$color__secondary--light: #babdb6 !default;
+$color__secondary--lighter: #51577a !default;
+$color__secondary--lightest: #f5f5f5 !default;
+$colors__secondary: (
+  'darker': $color__secondary--darker,
+  'dark': $color__secondary--dark,
+  'default': $color__secondary,
+  'light': $color__secondary--light,
+  'lighter': $color__secondary--lighter,
+  'lightest': $color__secondary--lightest,
+) !default;
+
+// success
+$color__success--dark: #007347 !default;
+$color__success: #bde094 !default;
+$color__success--light: #dbedc7 !default;
+$color__success--lighter: #e6eddf !default;
+$colors__success: (
+  'dark': $color__success--dark,
+  'default': $color__success,
+  'light': $color__success--light,
+  'lighter': $color__success--lighter,
+) !default;
+
+// warning
+$color__warning--dark: #ffb81c !default;
+$color__warning: #ffc766 !default;
+$color__warning--light: #feebcb !default;
+$color__warning--lighter: #fef5e5 !default;
+$colors__warning: (
+  'dark': $color__warning--dark,
+  'default': $color__warning,
+  'light': $color__warning--light,
+  'lighter': $color__warning--lighter,
+) !default;
+
+// danger
+$color__danger--dark: #b23b3c !default;
+$color__danger: #fa5254 !default;
+$color__danger--light: #fa898b !default;
+$color__danger--lighter: #fad5d5 !default;
+$colors__danger: (
+  'dark': $color__danger--dark,
+  'default': $color__danger,
+  'light': $color__danger--light,
+  'lighter': $color__danger--lighter,
+) !default;
+
+// info
+$color__info--dark: #4021d9 !default;
+$color__info: #7040ff !default;
+$color__info--light: #d5ccff !default;
+$color__info--lighter: #eae5ff !default;
+$colors__info: (
+  'dark': $color__info--dark,
+  'default': $color__info,
+  'light': $color__info--light,
+  'lighter': $color__info--lighter,
+) !default;

package/scss/themes/bmc/index.scss

@@ -0,0 +1,54 @@
+// BMC theme - CSS custom properties
+@import 'colors';
+@import 'typography';
+
+[data-library='bmc'] {
+  // ===== PRIMARY COLORS (BMC yellow/black/gray) =====
+  --color__primary--darker: #{$color__primary--darker};
+  --color__primary--dark: #{$color__primary--dark};
+  --color__primary: #{$color__primary};
+  --color__primary--light: #{$color__primary--light};
+  --color__primary--lighter: #{$color__primary--lighter};
+  --color__primary--lightest: #{$color__primary--lightest};
+
+  // ===== SECONDARY COLORS (BMC grays) =====
+  --color__secondary--darker: #{$color__secondary--darker};
+  --color__secondary--dark: #{$color__secondary--dark};
+  --color__secondary: #{$color__secondary};
+  --color__secondary--light: #{$color__secondary--light};
+  --color__secondary--lighter: #{$color__secondary--lighter};
+  --color__secondary--lightest: #{$color__secondary--lightest};
+
+  // ===== SUCCESS COLORS =====
+  --color__success--dark: #{$color__success--dark};
+  --color__success: #{$color__success};
+  --color__success--light: #{$color__success--light};
+  --color__success--lighter: #{$color__success--lighter};
+
+  // ===== WARNING COLORS =====
+  --color__warning--dark: #{$color__warning--dark};
+  --color__warning: #{$color__warning};
+  --color__warning--light: #{$color__warning--light};
+  --color__warning--lighter: #{$color__warning--lighter};
+
+  // ===== DANGER COLORS =====
+  --color__danger--dark: #{$color__danger--dark};
+  --color__danger: #{$color__danger};
+  --color__danger--light: #{$color__danger--light};
+  --color__danger--lighter: #{$color__danger--lighter};
+
+  // ===== INFO COLORS =====
+  --color__info--dark: #{$color__info--dark};
+  --color__info: #{$color__info};
+  --color__info--light: #{$color__info--light};
+  --color__info--lighter: #{$color__info--lighter};
+
+  // ===== TYPOGRAPHY (Roboto Condensed) =====
+  --font__family--base: #{$font__family--base};
+  --font__family--highlight: #{$font__family--highlight};
+
+  // Button overrides (BMC-specific)
+  .ds-button {
+    --button-color__primary: var(--color__primary--dark);
+  }
+}

package/scss/themes/bmc/typography.scss

@@ -0,0 +1,5 @@
+// BMC theme typography
+@import 'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap';
+
+$font__family--base: 'Roboto Condensed', sans-serif !default;
+$font__family--highlight: 'Roboto Condensed', sans-serif !default;

package/scss/themes/default/colors.scss

@@ -0,0 +1,109 @@
+// Default theme color definitions (from default/tokens/global/colors.scss)
+
+// primary
+$color__primary--darker: #720028 !default;
+$color__primary--dark: #b2003f !default;
+$color__primary: #e3175e !default;
+$color__primary--light: #faaec9 !default;
+$color__primary--lighter: #ffd9e6 !default;
+$color__primary--lightest: #ffebf1 !default;
+$colors__primary: (
+  'darker': $color__primary--darker,
+  'dark': $color__primary--dark,
+  'default': $color__primary,
+  'light': $color__primary--light,
+  'lighter': $color__primary--lighter,
+  'lightest': $color__primary--lightest,
+) !default;
+
+// secondary
+$color__secondary--darker: #001d40 !default;
+$color__secondary--dark: #062854 !default;
+$color__secondary: #1c4173 !default;
+$color__secondary--light: #7c97b8 !default;
+$color__secondary--lighter: #dee7f1 !default;
+$color__secondary--lightest: #ebf1f7 !default;
+$colors__secondary: (
+  'darker': $color__secondary--darker,
+  'dark': $color__secondary--dark,
+  'default': $color__secondary,
+  'light': $color__secondary--light,
+  'lighter': $color__secondary--lighter,
+  'lightest': $color__secondary--lightest,
+) !default;
+
+// neutral
+$color__neutral--00: #fff !default;
+$color__neutral--05: #fafafa !default;
+$color__neutral--10: #f5f5f5 !default;
+$color__neutral--20: #eee !default;
+$color__neutral--30: #e0e0e0 !default;
+$color__neutral--40: #bdbdbd !default;
+$color__neutral--50: #9e9e9e !default;
+$color__neutral--60: #757575 !default;
+$color__neutral--70: #616161 !default;
+$color__neutral--80: #424242 !default;
+$color__neutral--90: #212121 !default;
+$color__neutral--100: #1f1b1c !default;
+$colors__neutral: (
+  '00': $color__neutral--00,
+  '05': $color__neutral--05,
+  '10': $color__neutral--10,
+  '20': $color__neutral--20,
+  '30': $color__neutral--30,
+  '40': $color__neutral--40,
+  '50': $color__neutral--50,
+  '60': $color__neutral--60,
+  '70': $color__neutral--70,
+  '80': $color__neutral--80,
+  '90': $color__neutral--90,
+  '100': $color__neutral--100,
+) !default;
+
+// success
+$color__success--dark: #319c00 !default;
+$color__success: #70c24a !default;
+$color__success--light: #a9e88b !default;
+$color__success--lighter: #e5ffd9 !default;
+$colors__success: (
+  'dark': $color__success--dark,
+  'default': $color__success,
+  'light': $color__success--light,
+  'lighter': $color__success--lighter,
+) !default;
+
+// warning
+$color__warning--dark: #c78800 !default;
+$color__warning: #e6a100 !default;
+$color__warning--light: #ffda91 !default;
+$color__warning--lighter: #fff3da !default;
+$colors__warning: (
+  'dark': $color__warning--dark,
+  'default': $color__warning,
+  'light': $color__warning--light,
+  'lighter': $color__warning--lighter,
+) !default;
+
+// danger
+$color__danger--dark: #a00505 !default;
+$color__danger: #e01b1b !default;
+$color__danger--light: #ff7171 !default;
+$color__danger--lighter: #ffc0c0 !default;
+$colors__danger: (
+  'dark': $color__danger--dark,
+  'default': $color__danger,
+  'light': $color__danger--light,
+  'lighter': $color__danger--lighter,
+) !default;
+
+// info
+$color__info--dark: #039 !default;
+$color__info: #04c !default;
+$color__info--light: #1a66ff !default;
+$color__info--lighter: #e6eeff !default;
+$colors__info: (
+  'dark': $color__info--dark,
+  'default': $color__info,
+  'light': $color__info--light,
+  'lighter': $color__info--lighter,
+) !default;

package/scss/themes/default/index.scss

@@ -0,0 +1,80 @@
+// Default theme - CSS custom properties
+@import 'colors';
+@import 'typography';
+
+:root {
+  // ===== GLOBAL (Light mode) =====
+  --background__color: var(--color__neutral--00);
+  --background__color--backdrop: var(--color__neutral--10);
+  --background__color--content: var(--background__color);
+  --text__color: var(--color__neutral--80);
+
+  // ===== PRIMARY COLORS =====
+  --color__primary--darker: #{$color__primary--darker};
+  --color__primary--dark: #{$color__primary--dark};
+  --color__primary: #{$color__primary};
+  --color__primary--light: #{$color__primary--light};
+  --color__primary--lighter: #{$color__primary--lighter};
+  --color__primary--lightest: #{$color__primary--lightest};
+
+  // ===== SECONDARY COLORS =====
+  --color__secondary--darker: #{$color__secondary--darker};
+  --color__secondary--dark: #{$color__secondary--dark};
+  --color__secondary: #{$color__secondary};
+  --color__secondary--light: #{$color__secondary--light};
+  --color__secondary--lighter: #{$color__secondary--lighter};
+  --color__secondary--lightest: #{$color__secondary--lightest};
+
+  // ===== NEUTRAL COLORS =====
+  --color__neutral--00: #{$color__neutral--00};
+  --color__neutral--05: #{$color__neutral--05};
+  --color__neutral--10: #{$color__neutral--10};
+  --color__neutral--20: #{$color__neutral--20};
+  --color__neutral--30: #{$color__neutral--30};
+  --color__neutral--40: #{$color__neutral--40};
+  --color__neutral--50: #{$color__neutral--50};
+  --color__neutral--60: #{$color__neutral--60};
+  --color__neutral--70: #{$color__neutral--70};
+  --color__neutral--80: #{$color__neutral--80};
+  --color__neutral--90: #{$color__neutral--90};
+  --color__neutral--100: #{$color__neutral--100};
+
+  // ===== SUCCESS COLORS =====
+  --color__success--dark: #{$color__success--dark};
+  --color__success: #{$color__success};
+  --color__success--light: #{$color__success--light};
+  --color__success--lighter: #{$color__success--lighter};
+
+  // ===== WARNING COLORS =====
+  --color__warning--dark: #{$color__warning--dark};
+  --color__warning: #{$color__warning};
+  --color__warning--light: #{$color__warning--light};
+  --color__warning--lighter: #{$color__warning--lighter};
+
+  // ===== DANGER COLORS =====
+  --color__danger--dark: #{$color__danger--dark};
+  --color__danger: #{$color__danger};
+  --color__danger--light: #{$color__danger--light};
+  --color__danger--lighter: #{$color__danger--lighter};
+
+  // ===== INFO COLORS =====
+  --color__info--dark: #{$color__info--dark};
+  --color__info: #{$color__info};
+  --color__info--light: #{$color__info--light};
+  --color__info--lighter: #{$color__info--lighter};
+
+  // ===== TYPOGRAPHY =====
+  --font__family--base: #{$font__family--base};
+  --font__family--highlight: #{$font__family--highlight};
+}
+
+// ===== DARK MODE (Future Implementation) =====
+[data-theme='dark'] {
+  // ===== GLOBAL =====
+  --background__color: var(--color__neutral--90);
+  --background__color--backdrop: var(--color__neutral--100);
+  --background__color--content: var(--background__color);
+  --text__color: var(--color__neutral--10);
+
+  // NOTE: Component-specific dark mode vars to be added in future (checkbox, input, textarea, accordion, tabs, etc.)
+}

package/scss/themes/default/typography.scss

@@ -0,0 +1,7 @@
+// Default theme typography (only font-families - sizes/weights in core)
+@import 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap';
+
+// Font families (theme-specific)
+$font__family--base: 'Open Sans' !default;
+$font__family--highlight: 'Poppins' !default;