@ojiepermana/angular-theme 22.0.27

package/styles/css/seasonal/base/theme.css

@@ -0,0 +1,287 @@
+/**
+ * Core theme layers and shared tokens.
+ */
+@layer reset, base, mat-mdc, tokens, components, utilities;
+
+@layer tokens {
+  :root {
+    --radius-base: var(--theme-radius-base, 0.625rem);
+    --radius-none: 0px;
+    --rounded-base: var(--radius-none);
+    --scrollbar-size: 0.5rem;
+    --scrollbar-radius: 9999px;
+    --scrollbar-track: var(--primary) / var(--opacity-10);
+    --scrollbar-thumb: var(--primary);
+    --scrollbar-thumb-hover: var(--primary);
+    --spacing-base: 0.25rem;
+
+    --font-size-base: 1rem;
+    --line-height-base: 1.5;
+
+    --border-width-base: 1px;
+
+    --shadow-base: 0 1px 2px hsl(240 10% 3.9% / 0.08);
+
+    --duration-base: 200ms;
+    --ease-base: cubic-bezier(0.4, 0, 0.2, 1);
+
+    --control-height-base: 2.25rem;
+
+    --container-base: 80rem;
+
+    --z-base: 1;
+
+    --opacity-10: 0.1;
+    --opacity-20: 0.2;
+    --opacity-30: 0.3;
+    --opacity-40: 0.4;
+    --opacity-50: 0.5;
+    --opacity-60: 0.6;
+    --opacity-70: 0.7;
+    --opacity-80: 0.8;
+    --opacity-90: 0.9;
+
+    --radius-xs: calc(var(--radius-base) * 0.4);
+    --radius-sm: calc(var(--radius-base) * 0.6);
+    --radius-md: calc(var(--radius-base) * 0.8);
+    --radius-lg: var(--radius-base);
+    --radius-xl: calc(var(--radius-base) * 1.4);
+    --radius-2xl: calc(var(--radius-base) * 1.8);
+    --radius-3xl: calc(var(--radius-base) * 2.2);
+    --radius-4xl: calc(var(--radius-base) * 2.6);
+    --radius: var(--radius-base);
+
+    --spacing-xs: calc(var(--spacing-base) * 1);
+    --spacing-sm: calc(var(--spacing-base) * 2);
+    --spacing-md: calc(var(--spacing-base) * 4);
+    --spacing-lg: calc(var(--spacing-base) * 6);
+    --spacing-xl: calc(var(--spacing-base) * 8);
+    --spacing-2xl: calc(var(--spacing-base) * 12);
+    --spacing-3xl: calc(var(--spacing-base) * 16);
+    --spacing-4xl: calc(var(--spacing-base) * 24);
+
+    --font-size-xs: calc(var(--font-size-base) * 0.75);
+    --font-size-sm: calc(var(--font-size-base) * 0.875);
+    --font-size-md: var(--font-size-base);
+    --font-size-lg: calc(var(--font-size-base) * 1.125);
+    --font-size-xl: calc(var(--font-size-base) * 1.25);
+    --font-size-2xl: calc(var(--font-size-base) * 1.5);
+    --font-size-3xl: calc(var(--font-size-base) * 1.875);
+    --font-size-4xl: calc(var(--font-size-base) * 2.25);
+
+    --line-height-tight: 1.25;
+    --line-height-snug: 1.375;
+    --line-height-normal: var(--line-height-base);
+    --line-height-relaxed: 1.625;
+    --line-height-loose: 2;
+
+    --border-width-thin: var(--border-width-base);
+    --border-width-medium: calc(var(--border-width-base) * 2);
+    --border-width-thick: calc(var(--border-width-base) * 3);
+
+    /* Concrete values live in the *-base primitives. The --shadow-* aliases are
+     * re-emitted by the Tailwind @theme mapping as var(--theme-shadow-*) in the
+     * later `theme` layer, so pointing either alias back at --shadow-* would
+     * create a var() cycle that invalidates the whole chain. */
+    --shadow-xs-base: 0 1px 1px hsl(240 10% 3.9% / 0.05);
+    --shadow-md-base: 0 4px 6px hsl(240 10% 3.9% / 0.08);
+    --shadow-lg-base: 0 10px 15px hsl(240 10% 3.9% / 0.1);
+    --shadow-xl-base: 0 20px 25px hsl(240 10% 3.9% / 0.12);
+    --shadow-xs: var(--shadow-xs-base);
+    --shadow-sm: var(--shadow-base);
+    --shadow-md: var(--shadow-md-base);
+    --shadow-lg: var(--shadow-lg-base);
+    --shadow-xl: var(--shadow-xl-base);
+
+    --duration-fast: calc(var(--duration-base) * 0.5);
+    --duration-normal: var(--duration-base);
+    --duration-slow: calc(var(--duration-base) * 1.5);
+    --duration-slower: calc(var(--duration-base) * 2);
+
+    --ease-standard: var(--ease-base);
+    --ease-enter: cubic-bezier(0, 0, 0.2, 1);
+    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+
+    --control-height-xs: 1.75rem;
+    --control-height-sm: 2rem;
+    --control-height-md: var(--control-height-base);
+    --control-height-lg: 3rem;
+    --control-height-xl: 3.5rem;
+
+    --container-sm: 40rem;
+    --container-md: 48rem;
+    --container-lg: 64rem;
+    --container-xl: var(--container-base);
+    --container-2xl: 96rem;
+
+    --z-dropdown: calc(var(--z-base) * 100);
+    --z-sticky: calc(var(--z-base) * 200);
+    --z-fixed: calc(var(--z-base) * 300);
+    --z-overlay: calc(var(--z-base) * 400);
+    --z-modal: calc(var(--z-base) * 500);
+    --z-popover: calc(var(--z-base) * 600);
+    --z-tooltip: calc(var(--z-base) * 700);
+    --z-toast: calc(var(--z-base) * 800);
+
+    --timeline-indicator-red: 0 72% 51%;
+    --timeline-indicator-red-foreground: 0 0% 100%;
+    --timeline-indicator-orange: 24 95% 53%;
+    --timeline-indicator-orange-foreground: 0 0% 100%;
+    --timeline-indicator-amber: 38 92% 50%;
+    --timeline-indicator-amber-foreground: 0 0% 100%;
+    --timeline-indicator-yellow: 48 96% 53%;
+    --timeline-indicator-yellow-foreground: 0 0% 10%;
+    --timeline-indicator-lime: 84 81% 44%;
+    --timeline-indicator-lime-foreground: 0 0% 10%;
+    --timeline-indicator-green: 142 71% 45%;
+    --timeline-indicator-green-foreground: 0 0% 100%;
+    --timeline-indicator-emerald: 160 84% 39%;
+    --timeline-indicator-emerald-foreground: 0 0% 100%;
+    --timeline-indicator-teal: 173 80% 40%;
+    --timeline-indicator-teal-foreground: 0 0% 100%;
+    --timeline-indicator-cyan: 191 91% 36%;
+    --timeline-indicator-cyan-foreground: 0 0% 100%;
+    --timeline-indicator-sky: 199 89% 48%;
+    --timeline-indicator-sky-foreground: 0 0% 100%;
+    --timeline-indicator-blue: 221 83% 53%;
+    --timeline-indicator-blue-foreground: 0 0% 100%;
+    --timeline-indicator-indigo: 239 84% 67%;
+    --timeline-indicator-indigo-foreground: 0 0% 100%;
+    --timeline-indicator-violet: 258 90% 66%;
+    --timeline-indicator-violet-foreground: 0 0% 100%;
+    --timeline-indicator-purple: 271 91% 65%;
+    --timeline-indicator-purple-foreground: 0 0% 100%;
+    --timeline-indicator-fuchsia: 292 84% 61%;
+    --timeline-indicator-fuchsia-foreground: 0 0% 100%;
+    --timeline-indicator-pink: 330 81% 60%;
+    --timeline-indicator-pink-foreground: 0 0% 100%;
+    --timeline-indicator-rose: 349 89% 60%;
+    --timeline-indicator-rose-foreground: 0 0% 100%;
+
+    --layout-grid-line: var(--border);
+    --layout-grid-line-opacity: 0.18;
+    --layout-grid-dot-opacity: 0.22;
+
+    --overlay-backdrop: 240 10% 3.9% / 0.5;
+    --overlay-backdrop-strong: 240 10% 3.9% / 0.4;
+
+    --editor-highlight: 48 96% 80%;
+
+    --font-size-2xs: 0.625rem;
+    --line-height-2xs: 1rem;
+    --font-size-2xs-plus: 0.6875rem;
+    --line-height-2xs-plus: 1rem;
+
+    /* Deprecated: use the new primitive token names instead.
+     * Must reference the *-base primitives, never --shadow-* — the Tailwind
+     * @theme mapping re-emits --shadow-*: var(--theme-shadow-*), so an alias
+     * back to --shadow-* forms a var() cycle. */
+    --theme-shadow-xs: var(--shadow-xs-base);
+    --theme-radius-xs: var(--radius-xs);
+    --theme-radius-sm: var(--radius-sm);
+    --theme-radius-md: var(--radius-base);
+    --theme-radius-lg: var(--radius-xl);
+    --border-width: var(--border-width-base);
+    --theme-shadow-sm: var(--shadow-base);
+    --theme-shadow: var(--shadow-base);
+    --theme-shadow-md: var(--shadow-md-base);
+    --theme-shadow-lg: var(--shadow-lg-base);
+    --theme-shadow-xl: var(--shadow-xl-base);
+  }
+
+  :root,
+  [data-mode='light'] {
+    color-scheme: light;
+
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+  }
+
+  [data-mode='dark'] {
+    color-scheme: dark;
+
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+  }
+}
+
+@layer tokens {
+  :root {
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 100%;
+
+    --success: 142 71% 45%;
+    --success-foreground: 0 0% 100%;
+
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 10%;
+
+    --info: 217 91% 60%;
+    --info-foreground: 0 0% 100%;
+
+    --chart-1: var(--theme-chart-1, var(--primary));
+    --chart-2: var(--theme-chart-2, var(--accent-foreground));
+    --chart-3: var(--theme-chart-3, 271 81% 56%);
+    --chart-4: var(--theme-chart-4, 38 92% 50%);
+    --chart-5: var(--theme-chart-5, 355 78% 56%);
+
+    --sidebar: var(--card);
+    --sidebar-background: var(--sidebar);
+    --sidebar-foreground: var(--foreground);
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
+    --sidebar-accent: var(--accent);
+    --sidebar-accent-foreground: var(--accent-foreground);
+    --sidebar-border: var(--border);
+    --sidebar-ring: var(--ring);
+  }
+
+  [data-mode='dark'] {
+    --destructive: 0 62% 45%;
+    --destructive-foreground: 0 0% 95%;
+
+    --success: 142 60% 40%;
+    --success-foreground: 0 0% 95%;
+
+    --warning: 38 80% 45%;
+    --warning-foreground: 0 0% 10%;
+
+    --info: 217 80% 55%;
+    --info-foreground: 0 0% 95%;
+
+    --overlay-backdrop: 0 0% 0% / 0.64;
+    --overlay-backdrop-strong: 0 0% 0% / 0.5;
+
+    --editor-highlight: 48 70% 30%;
+
+    --chart-1: var(--theme-chart-1, var(--primary));
+    --chart-2: var(--theme-chart-2, var(--accent-foreground));
+    --chart-3: var(--theme-chart-3, 271 85% 70%);
+    --chart-4: var(--theme-chart-4, 38 96% 62%);
+    --chart-5: var(--theme-chart-5, 355 82% 68%);
+  }
+}

package/styles/css/seasonal/base/tokens.css

@@ -0,0 +1,152 @@
+/**
+ * Default theme color, style, and layout tokens.
+ */
+@layer tokens {
+  :root {
+    --highlight: 0 0% 64%;
+    --highlight-border-alpha: 0.7;
+    --highlight-background-alpha: 0.7;
+
+    --background: 210 38% 98%;
+    --surface: 0 0% 89.8%;
+    --surface-foreground: 211 56% 12%;
+    --foreground: 211 56% 12%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 211 56% 12%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 211 56% 12%;
+
+    --muted: 211 34% 94%;
+    --muted-foreground: 211 24% 38%;
+
+    --border: 211 28% 82%;
+    --input: 211 28% 82%;
+
+    --primary: 211 95% 29%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 211 95% 96%;
+    --accent-foreground: 211 95% 22%;
+    --secondary: 211 24% 95%;
+    --secondary-foreground: 211 75% 24%;
+    --ring: 211 95% 29%;
+
+    --radius-base: 0.625rem;
+    --radius: var(--radius-base);
+
+    /* Deprecated: use the --radius-* tokens directly. */
+    --theme-radius-base: var(--radius-base);
+    --theme-radius-xs: var(--radius-xs);
+    --theme-radius-sm: var(--radius-sm);
+    --theme-radius-md: var(--radius-base);
+    --theme-radius-lg: var(--radius-base);
+
+    --border-width-base: 1px;
+    --border-width: var(--border-width-base);
+
+    /* Concrete values live in the *-base primitives; --shadow-* and
+     * --theme-shadow-* are aliases. Never alias --theme-shadow-* back to
+     * --shadow-* — the Tailwind @theme mapping re-emits
+     * --shadow-*: var(--theme-shadow-*) in the later `theme` layer, which
+     * turns that into a var() cycle and invalidates both tokens. */
+    --shadow-base: 0 1px 0 0 hsl(211 95% 12% / 0.08);
+    --shadow-md-base: 0 8px 18px -14px hsl(211 95% 12% / 0.24);
+    --shadow-lg-base: 0 18px 36px -28px hsl(211 95% 12% / 0.34);
+    --shadow-xl-base: 0 24px 48px -36px hsl(211 95% 12% / 0.4);
+    --shadow-sm: var(--shadow-base);
+    --shadow-md: var(--shadow-md-base);
+    --shadow-lg: var(--shadow-lg-base);
+    --shadow-xl: var(--shadow-xl-base);
+
+    --theme-shadow-sm: var(--shadow-base);
+    --theme-shadow: 0 2px 4px -2px hsl(211 95% 12% / 0.14);
+    --theme-shadow-md: var(--shadow-md-base);
+    --theme-shadow-lg: var(--shadow-lg-base);
+    --theme-shadow-xl: var(--shadow-xl-base);
+    --shadow: var(--theme-shadow);
+
+    --theme-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+    --font-sans: var(--theme-font-sans);
+    --font-mono: var(--theme-font-mono);
+    --font-weight-bold: 600;
+    --theme-text-scale: 1;
+    --font-size-base: 1rem;
+    --line-height-base: 1.5;
+    --control-height-base: 2.25rem;
+    --nav-font-family: var(--font-sans);
+    --nav-text-size: calc(var(--text-base) - 0.125rem);
+    --nav-text-line-height: var(--text-base--line-height);
+    --nav-heading-font-family: var(--font-sans);
+    --nav-heading-size: var(--text-sm);
+    --nav-heading-line-height: var(--text-sm--line-height);
+    --nav-heading-weight: 600;
+    --nav-heading-letter-spacing: 0.12em;
+    --nav-badge-font-family: var(--font-sans);
+    --nav-badge-size: var(--text-sm);
+    --nav-badge-line-height: var(--text-sm--line-height);
+    --nav-badge-weight: 500;
+    --letter-spacing: 0;
+    --spacing-base: 0.25rem;
+    --space-unit: var(--spacing-base);
+    --layout-topbar-height: 3.25rem;
+
+    --layout-shell-padding: clamp(1rem, 2vw, 2rem);
+    --layout-frame-radius: var(--radius-lg);
+    --layout-frame-shadow: var(--shadow-sm);
+    --layout-sidebar-width: 17.5rem;
+    --container-base: 80rem;
+    --layout-main-max-width: var(--container-base);
+    --layout-vertical-shell-max-width: calc(var(--layout-sidebar-width) + var(--layout-main-max-width));
+    --layout-empty-max-width: 24rem;
+    --layout-empty-padding: clamp(1.5rem, 4vw, 3rem);
+    --layout-topbar-inline: 0.875rem;
+    --layout-logo-mark-size: 2rem;
+  }
+
+  :root[data-mode='dark'] {
+    --highlight: 0 0% 64%;
+    --highlight-border-alpha: 0.45;
+    --highlight-background-alpha: 0.55;
+
+    --background: 211 38% 9%;
+    --surface: 211 22% 18%;
+    --surface-foreground: 210 40% 96%;
+    --foreground: 210 40% 96%;
+
+    --card: 211 34% 11%;
+    --card-foreground: 210 40% 96%;
+
+    --popover: 211 34% 11%;
+    --popover-foreground: 210 40% 96%;
+
+    --muted: 211 22% 18%;
+    --muted-foreground: 211 18% 70%;
+
+    --border: 211 24% 24%;
+    --input: 211 24% 24%;
+
+    --accent: 211 58% 18%;
+    --accent-foreground: 211 90% 84%;
+    --secondary: 211 24% 18%;
+    --secondary-foreground: 211 82% 84%;
+
+    --shadow-base: 0 1px 0 0 hsl(210 40% 96% / 0.08);
+    --shadow-sm: var(--shadow-base);
+    --theme-shadow-sm: var(--shadow-base);
+
+    --layout-frame-shadow: 0 0 0 1px hsl(var(--border));
+  }
+}
+
+@layer utilities {
+  .border-highlight {
+    border-color: hsl(var(--highlight, var(--border)) / var(--highlight-border-alpha, 0.7));
+  }
+
+  .bg-highlight {
+    background-color: hsl(var(--highlight, var(--border)) / var(--highlight-background-alpha, 0.7));
+  }
+}

package/styles/css/seasonal/ied/package.css

@@ -0,0 +1,4 @@
+/**
+ * Seasonal overrides for the Ied theme.
+ */
+@import './theme.css';

package/styles/css/seasonal/ied/theme.css

@@ -0,0 +1,78 @@
+/**
+ * Token overrides for the Ied season.
+ */
+@layer tokens {
+  html[theme-season='ied'][data-mode='light'] {
+    color-scheme: light;
+
+    --highlight: 188 84% 38%;
+
+    --background: 186 38% 98%;
+    --surface: 45 78% 96%;
+    --surface-foreground: 188 46% 16%;
+    --foreground: 188 46% 16%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 188 46% 16%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 188 46% 16%;
+
+    --muted: 186 22% 94%;
+    --muted-foreground: 188 16% 34%;
+
+    --border: 186 20% 85%;
+    --input: 186 20% 85%;
+
+    --primary: 188 84% 38%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 45 92% 94%;
+    --accent-foreground: 188 52% 22%;
+    --secondary: 184 24% 93%;
+    --secondary-foreground: 188 48% 24%;
+    --ring: 45 88% 54%;
+
+    --chart-1: 188 84% 38%;
+    --chart-2: 45 88% 54%;
+    --chart-3: 149 48% 40%;
+    --chart-4: 223 74% 58%;
+    --chart-5: 25 92% 60%;
+  }
+
+  html[theme-season='ied'][data-mode='dark'] {
+    color-scheme: dark;
+
+    --highlight: 45 92% 68%;
+
+    --background: 189 34% 11%;
+    --surface: 189 24% 16%;
+    --surface-foreground: 46 72% 95%;
+    --foreground: 46 72% 95%;
+
+    --card: 189 24% 14%;
+    --card-foreground: 46 72% 95%;
+
+    --popover: 189 24% 14%;
+    --popover-foreground: 46 72% 95%;
+
+    --muted: 189 18% 19%;
+    --muted-foreground: 46 18% 78%;
+
+    --border: 189 16% 25%;
+    --input: 189 16% 25%;
+
+    --primary: 45 92% 68%;
+    --primary-foreground: 189 46% 16%;
+    --accent: 188 24% 21%;
+    --accent-foreground: 46 82% 90%;
+    --secondary: 189 18% 19%;
+    --secondary-foreground: 46 62% 88%;
+    --ring: 45 92% 68%;
+
+    --chart-1: 45 92% 68%;
+    --chart-2: 188 76% 58%;
+    --chart-3: 149 54% 54%;
+    --chart-4: 223 82% 70%;
+    --chart-5: 24 96% 68%;
+  }
+}

package/styles/css/seasonal/imlek/components.css

@@ -0,0 +1,87 @@
+/**
+ * Global component-facing styles that should react to the active theme.
+ */
+@layer base {
+  html[theme-season='imlek'] * {
+    border-color: hsl(var(--border));
+    outline-color: hsl(var(--ring) / var(--opacity-50));
+  }
+
+  html[theme-season='imlek'],
+  html[theme-season='imlek'] body {
+    min-height: 100%;
+  }
+
+  html[theme-season='imlek'] {
+    background: hsl(var(--background));
+  }
+
+  html[theme-season='imlek'] body {
+    background: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+    letter-spacing: var(--letter-spacing);
+    transition:
+      background-color var(--duration-normal) var(--ease-standard),
+      color var(--duration-normal) var(--ease-standard),
+      border-color var(--duration-normal) var(--ease-standard),
+      box-shadow var(--duration-normal) var(--ease-standard),
+      outline-color var(--duration-normal) var(--ease-standard);
+  }
+
+  html[theme-season='imlek'] button,
+  html[theme-season='imlek'] input,
+  html[theme-season='imlek'] select,
+  html[theme-season='imlek'] textarea {
+    font: inherit;
+  }
+
+  html[theme-season='imlek'] ::selection {
+    background: hsl(var(--primary) / var(--opacity-24));
+    color: hsl(var(--foreground));
+  }
+}
+
+@layer components {
+  html[theme-season='imlek'] .nav-text {
+    font-family: var(--nav-font-family, var(--font-sans));
+    font-size: var(--nav-text-size, var(--text-base));
+    line-height: var(--nav-text-line-height, var(--text-base--line-height));
+  }
+
+  html[theme-season='imlek'] .nav-hover-surface {
+    @apply relative isolate hover:text-accent-foreground;
+  }
+
+  html[theme-season='imlek'] .nav-hover-surface::before {
+    content: '';
+    border-radius: inherit;
+    @apply pointer-events-none absolute inset-y-0 left-2 right-2 z-0 bg-transparent transition-colors;
+  }
+
+  html[theme-season='imlek'] .nav-hover-surface:hover::before {
+    @apply bg-accent;
+  }
+
+  html[theme-season='imlek'] .nav-hover-surface > * {
+    @apply relative z-10;
+  }
+
+  html[theme-season='imlek'] .nav-heading {
+    font-family: var(--nav-heading-font-family, var(--nav-font-family, var(--font-sans)));
+    font-size: var(--nav-heading-size, var(--text-sm));
+    line-height: var(--nav-heading-line-height, var(--text-sm--line-height));
+    font-weight: var(--nav-heading-weight, 600);
+    letter-spacing: var(--nav-heading-letter-spacing, 0.12em);
+    text-transform: uppercase;
+  }
+
+  html[theme-season='imlek'] .nav-badge {
+    font-family: var(--nav-badge-font-family, var(--nav-font-family, var(--font-sans)));
+    font-size: var(--nav-badge-size, var(--text-sm));
+    line-height: var(--nav-badge-line-height, var(--text-sm--line-height));
+    font-weight: var(--nav-badge-weight, 500);
+  }
+}

package/styles/css/seasonal/imlek/package.css

@@ -0,0 +1,6 @@
+/**
+ * Internal grouped Imlek theme stylesheet.
+ */
+@import './theme.css';
+@import './tokens.css';
+@import './components.css';