@ojiepermana/angular-theme 22.0.34 → 22.0.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/README.md +38 -19
  2. package/fesm2022/ojiepermana-angular-theme-layout-services.mjs +6 -6
  3. package/fesm2022/ojiepermana-angular-theme-layout-wrapper.mjs +51 -35
  4. package/fesm2022/ojiepermana-angular-theme-layout.mjs +24 -24
  5. package/fesm2022/ojiepermana-angular-theme-page.mjs +24 -24
  6. package/fesm2022/ojiepermana-angular-theme-styles.mjs +359 -56
  7. package/package.json +3 -3
  8. package/styles/README.md +10 -3
  9. package/styles/css/{seasonal/base → base}/tailwind.css +9 -5
  10. package/styles/css/{seasonal/base → base}/theme.css +1 -6
  11. package/styles/css/{seasonal/base → base}/tokens.css +26 -16
  12. package/styles/css/color/amber.css +50 -0
  13. package/styles/css/color/blue.css +50 -0
  14. package/styles/css/color/brand.css +16 -0
  15. package/styles/css/color/cyan.css +50 -0
  16. package/styles/css/color/emerald.css +50 -0
  17. package/styles/css/color/fuchsia.css +50 -0
  18. package/styles/css/color/green.css +50 -0
  19. package/styles/css/color/index.css +19 -0
  20. package/styles/css/color/indigo.css +50 -0
  21. package/styles/css/color/lime.css +50 -0
  22. package/styles/css/color/orange.css +50 -0
  23. package/styles/css/color/pink.css +50 -0
  24. package/styles/css/color/purple.css +50 -0
  25. package/styles/css/color/red.css +50 -0
  26. package/styles/css/color/rose.css +50 -0
  27. package/styles/css/color/sky.css +50 -0
  28. package/styles/css/color/teal.css +50 -0
  29. package/styles/css/color/violet.css +50 -0
  30. package/styles/css/color/yellow.css +50 -0
  31. package/styles/css/index.css +15 -6
  32. package/styles/css/neutral/gray.css +34 -0
  33. package/styles/css/neutral/index.css +11 -0
  34. package/styles/css/neutral/mauve.css +34 -0
  35. package/styles/css/neutral/mist.css +34 -0
  36. package/styles/css/neutral/neutral.css +34 -0
  37. package/styles/css/neutral/olive.css +34 -0
  38. package/styles/css/neutral/slate.css +34 -0
  39. package/styles/css/neutral/stone.css +34 -0
  40. package/styles/css/neutral/taupe.css +34 -0
  41. package/styles/css/neutral/zinc.css +34 -0
  42. package/styles/css/radius/index.css +29 -0
  43. package/styles/css/space/index.css +24 -0
  44. package/types/ojiepermana-angular-theme-layout-wrapper.d.ts +10 -2
  45. package/types/ojiepermana-angular-theme-styles.d.ts +168 -37
  46. package/styles/css/seasonal/ied/package.css +0 -4
  47. package/styles/css/seasonal/ied/theme.css +0 -78
  48. package/styles/css/seasonal/imlek/components.css +0 -87
  49. package/styles/css/seasonal/imlek/package.css +0 -6
  50. package/styles/css/seasonal/imlek/tailwind.css +0 -144
  51. package/styles/css/seasonal/imlek/theme.css +0 -95
  52. package/styles/css/seasonal/imlek/tokens.css +0 -152
  53. package/styles/css/seasonal/index.css +0 -6
  54. package/styles/css/seasonal/natal/package.css +0 -4
  55. package/styles/css/seasonal/natal/theme.css +0 -78
  56. package/styles/css/seasonal/new-year/package.css +0 -4
  57. package/styles/css/seasonal/new-year/theme.css +0 -78
  58. package/styles/css/seasonal/ramadhan/package.css +0 -4
  59. package/styles/css/seasonal/ramadhan/theme.css +0 -78
  60. /package/styles/css/{seasonal/base → base}/components.css +0 -0
  61. /package/styles/css/{seasonal/base → base}/package.css +0 -0
package/styles/css/neutral/taupe.css ADDED
@@ -0,0 +1,34 @@
1
+ /**
2
+ * Neutral theme: taupe. Generated by scripts/gen-theme-colors.mjs — do not edit.
3
+ */
4
+ @layer tokens {
5
+ html[theme-neutral='taupe'][data-mode='light'] {
6
+ --background: 28 6% 98%;
7
+ --foreground: 28 10% 12%;
8
+ --surface: 28 10% 96%;
9
+ --surface-foreground: 28 10% 12%;
10
+ --card: 0 0% 100%;
11
+ --card-foreground: 28 10% 12%;
12
+ --popover: 0 0% 100%;
13
+ --popover-foreground: 28 10% 12%;
14
+ --muted: 28 10% 95%;
15
+ --muted-foreground: 28 10% 42%;
16
+ --border: 28 10% 88%;
17
+ --input: 28 10% 88%;
18
+ }
19
+
20
+ html[theme-neutral='taupe'][data-mode='dark'] {
21
+ --background: 28 10% 7%;
22
+ --foreground: 28 5% 96%;
23
+ --surface: 28 10% 11%;
24
+ --surface-foreground: 28 5% 96%;
25
+ --card: 28 10% 8%;
26
+ --card-foreground: 28 5% 96%;
27
+ --popover: 28 10% 8%;
28
+ --popover-foreground: 28 5% 96%;
29
+ --muted: 28 10% 15%;
30
+ --muted-foreground: 28 7% 64%;
31
+ --border: 28 10% 17%;
32
+ --input: 28 10% 17%;
33
+ }
34
+ }
package/styles/css/neutral/zinc.css ADDED
@@ -0,0 +1,34 @@
1
+ /**
2
+ * Neutral theme: zinc. Generated by scripts/gen-theme-colors.mjs — do not edit.
3
+ */
4
+ @layer tokens {
5
+ html[theme-neutral='zinc'][data-mode='light'] {
6
+ --background: 240 3% 98%;
7
+ --foreground: 240 5% 12%;
8
+ --surface: 240 5% 96%;
9
+ --surface-foreground: 240 5% 12%;
10
+ --card: 0 0% 100%;
11
+ --card-foreground: 240 5% 12%;
12
+ --popover: 0 0% 100%;
13
+ --popover-foreground: 240 5% 12%;
14
+ --muted: 240 5% 95%;
15
+ --muted-foreground: 240 5% 42%;
16
+ --border: 240 5% 88%;
17
+ --input: 240 5% 88%;
18
+ }
19
+
20
+ html[theme-neutral='zinc'][data-mode='dark'] {
21
+ --background: 240 5% 7%;
22
+ --foreground: 240 3% 96%;
23
+ --surface: 240 5% 11%;
24
+ --surface-foreground: 240 3% 96%;
25
+ --card: 240 5% 8%;
26
+ --card-foreground: 240 3% 96%;
27
+ --popover: 240 5% 8%;
28
+ --popover-foreground: 240 3% 96%;
29
+ --muted: 240 5% 15%;
30
+ --muted-foreground: 240 4% 64%;
31
+ --border: 240 5% 17%;
32
+ --input: 240 5% 17%;
33
+ }
34
+ }
package/styles/css/radius/index.css ADDED
@@ -0,0 +1,29 @@
1
+ /*
2
+ * Corner radius axis (theme-radius). Each preset sets the single --radius-base
3
+ * knob; the whole --radius-* scale + every rounded-* utility follows via the
4
+ * calc() chain (base/tailwind.css @theme inline). Runtime-switched by
5
+ * ThemeRadiusService via <html theme-radius>. 'md' = the 0.625rem default.
6
+ *
7
+ * Wrapped in @layer tokens to match base/tokens.css and the color/neutral
8
+ * presets; html[theme-radius='x'] (0,1,1) beats the :root default (0,1,0).
9
+ */
10
+ @layer tokens {
11
+ html[theme-radius='none'] {
12
+ --radius-base: 0px;
13
+ }
14
+ html[theme-radius='sm'] {
15
+ --radius-base: 0.375rem;
16
+ }
17
+ html[theme-radius='md'] {
18
+ --radius-base: 0.625rem;
19
+ }
20
+ html[theme-radius='lg'] {
21
+ --radius-base: 0.875rem;
22
+ }
23
+ html[theme-radius='xl'] {
24
+ --radius-base: 1.25rem;
25
+ }
26
+ html[theme-radius='full'] {
27
+ --radius-base: 9999px;
28
+ }
29
+ }
package/styles/css/space/index.css ADDED
@@ -0,0 +1,24 @@
1
+ /*
2
+ * Spacing density axis (theme-space). Each preset sets the single --spacing-base
3
+ * knob; Tailwind derives --spacing from it (base/tailwind.css @theme inline), so
4
+ * every padding, margin, gap, width and height utility (and the --spacing-N
5
+ * scale) rescales at runtime. Switched by ThemeSpaceService via <html theme-space>.
6
+ * normal = the 0.25rem default (the Tailwind unit), so it is a no-op baseline.
7
+ *
8
+ * Wrapped in @layer tokens to match the radius/color/neutral presets;
9
+ * html[theme-space='x'] (0,1,1) beats the :root default (0,1,0).
10
+ */
11
+ @layer tokens {
12
+ html[theme-space='compact'] {
13
+ --spacing-base: 0.2rem;
14
+ }
15
+ html[theme-space='normal'] {
16
+ --spacing-base: 0.25rem;
17
+ }
18
+ html[theme-space='relaxed'] {
19
+ --spacing-base: 0.28rem;
20
+ }
21
+ html[theme-space='spacious'] {
22
+ --spacing-base: 0.32rem;
23
+ }
24
+ }
package/types/ojiepermana-angular-theme-layout-wrapper.d.ts CHANGED
@@ -69,8 +69,12 @@ declare class LayoutUser {
69
69
  declare class LayoutNavSidebar {
70
70
  readonly brand: _angular_core.InputSignal<BrandIdentity>;
71
71
  readonly user: _angular_core.InputSignal<UserIdentity>;
72
+ /** Appearance dari shell (`[appearance]`); menentukan ketebalan border kanan pemisah konten. */
73
+ readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
74
+ /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` 1.5px, `flat` 1px. */
75
+ protected readonly shellClass: _angular_core.Signal<"border-r-[1.5px] border-border" | "border-r border-border">;
72
76
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavSidebar, never>;
73
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavSidebar, "LayoutNavSidebar", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
77
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavSidebar, "LayoutNavSidebar", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
74
78
  }
75
79
 
76
80
  /**
@@ -80,8 +84,12 @@ declare class LayoutNavSidebar {
80
84
  declare class LayoutNavDockbar {
81
85
  readonly brand: _angular_core.InputSignal<BrandIdentity>;
82
86
  readonly user: _angular_core.InputSignal<UserIdentity>;
87
+ /** Appearance dari shell (`[appearance]`); menentukan ketebalan border kanan pemisah konten. */
88
+ readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
89
+ /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` 1.5px, `flat` 1px. */
90
+ protected readonly shellClass: _angular_core.Signal<"border-r-[1.5px] border-border" | "border-r border-border">;
83
91
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavDockbar, never>;
84
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavDockbar, "LayoutNavDockbar", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
92
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavDockbar, "LayoutNavDockbar", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
85
93
  }
86
94
 
87
95
  /**
package/types/ojiepermana-angular-theme-styles.d.ts CHANGED
@@ -1,21 +1,59 @@
1
- import * as _angular_core from '@angular/core';
1
+ import * as i0 from '@angular/core';
2
2
  import { InjectionToken, EnvironmentProviders } from '@angular/core';
3
3
 
4
4
  declare const THEME_MODES: readonly ["light", "dark", "system"];
5
5
  declare const RESOLVED_THEME_MODES: readonly ["light", "dark"];
6
- declare const THEME_SEASONS: readonly ["base", "imlek", "ramadhan", "ied", "natal", "new-year"];
6
+ /**
7
+ * FluxUI-style accent palettes (axis `theme-color`). `base` = core theme (no
8
+ * override); `brand` = the consumer's `--brand` color. Others re-tint the full
9
+ * palette. Order mirrors the FluxUI accent picker (base…rose) + `brand`.
10
+ */
11
+ declare const THEME_COLORS: readonly ["base", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose", "brand"];
12
+ /**
13
+ * Neutral (gray) families (axis `theme-neutral`). `base` = core theme neutrals.
14
+ * Overrides only the gray family, composing with any accent.
15
+ */
16
+ declare const THEME_NEUTRALS: readonly ["base", "slate", "gray", "zinc", "neutral", "stone", "mauve", "olive", "mist", "taupe"];
17
+ /**
18
+ * Corner radius presets (axis `theme-radius`). Each drives the single
19
+ * `--radius-base` knob; the whole `--radius-*` scale + `rounded-*` utilities
20
+ * follow. `md` = the 0.625rem default; `full` is the pill extreme.
21
+ */
22
+ declare const THEME_RADII: readonly ["none", "sm", "md", "lg", "xl", "full"];
23
+ /**
24
+ * Spacing density presets (axis `theme-space`). Each drives the single
25
+ * `--spacing-base` knob; every `p-*`/`m-*`/`gap-*`/`w-*`/`h-*` utility follows.
26
+ * `normal` = the 0.25rem default (no-op baseline).
27
+ */
28
+ declare const THEME_SPACES: readonly ["compact", "normal", "relaxed", "spacious"];
7
29
  type ThemeMode = (typeof THEME_MODES)[number];
8
30
  type ResolvedThemeMode = (typeof RESOLVED_THEME_MODES)[number];
9
- type ThemeSeason = (typeof THEME_SEASONS)[number];
31
+ type ThemeColor = (typeof THEME_COLORS)[number];
32
+ type ThemeNeutral = (typeof THEME_NEUTRALS)[number];
33
+ type ThemeRadius = (typeof THEME_RADII)[number];
34
+ type ThemeSpace = (typeof THEME_SPACES)[number];
10
35
  declare const DEFAULT_THEME_MODE: ThemeMode;
11
- declare const DEFAULT_THEME_SEASON: ThemeSeason;
36
+ declare const DEFAULT_THEME_COLOR: ThemeColor;
37
+ declare const DEFAULT_THEME_NEUTRAL: ThemeNeutral;
38
+ declare const DEFAULT_THEME_RADIUS: ThemeRadius;
39
+ declare const DEFAULT_THEME_SPACE: ThemeSpace;
12
40
  declare const THEME_MODE_STORAGE_KEY = "theme-mode";
13
- declare const THEME_SEASON_STORAGE_KEY = "theme-season";
41
+ declare const THEME_COLOR_STORAGE_KEY = "theme-color";
42
+ declare const THEME_NEUTRAL_STORAGE_KEY = "theme-neutral";
43
+ declare const THEME_BRAND_STORAGE_KEY = "theme-brand";
44
+ declare const THEME_RADIUS_STORAGE_KEY = "theme-radius";
45
+ declare const THEME_SPACE_STORAGE_KEY = "theme-space";
14
46
  declare function isThemeMode(value: string | null | undefined): value is ThemeMode;
15
47
  declare function isResolvedThemeMode(value: string | null | undefined): value is ResolvedThemeMode;
16
- declare function isThemeSeason(value: string | null | undefined): value is ThemeSeason;
48
+ declare function isThemeColor(value: string | null | undefined): value is ThemeColor;
49
+ declare function isThemeNeutral(value: string | null | undefined): value is ThemeNeutral;
50
+ declare function isThemeRadius(value: string | null | undefined): value is ThemeRadius;
51
+ declare function isThemeSpace(value: string | null | undefined): value is ThemeSpace;
17
52
  declare function normalizeThemeMode(value: string | null | undefined): ThemeMode;
18
- declare function normalizeThemeSeason(value: string | null | undefined): ThemeSeason;
53
+ declare function normalizeThemeColor(value: string | null | undefined): ThemeColor;
54
+ declare function normalizeThemeNeutral(value: string | null | undefined): ThemeNeutral;
55
+ declare function normalizeThemeRadius(value: string | null | undefined): ThemeRadius;
56
+ declare function normalizeThemeSpace(value: string | null | undefined): ThemeSpace;
19
57
 
20
58
  interface ThemeIconOptions {
21
59
  /**
@@ -28,19 +66,30 @@ interface ThemeIconOptions {
28
66
  */
29
67
  readonly materialSymbols?: boolean;
30
68
  }
69
+ /** Consumer brand color. HSL triplets `H S% L%` consumed by `hsl(var(--brand))`. */
70
+ interface ThemeBrandOptions {
71
+ /** Brand color, e.g. `'221 83% 53%'`. */
72
+ readonly color: string;
73
+ /** Foreground on solid brand fills. Defaults to white. */
74
+ readonly foreground?: string;
75
+ }
31
76
  interface ThemeOptions {
32
77
  readonly mode?: ThemeMode;
33
- readonly season?: ThemeSeason;
34
- readonly icons?: ThemeIconOptions;
78
+ /** Initial accent palette (`theme-color`). Persisted choice wins over this. */
79
+ readonly color?: ThemeColor;
80
+ /** Initial neutral family (`theme-neutral`). Persisted choice wins over this. */
81
+ readonly neutral?: ThemeNeutral;
82
+ /** Initial corner radius preset (`theme-radius`). Persisted choice wins over this. */
83
+ readonly radius?: ThemeRadius;
84
+ /** Initial spacing density preset (`theme-space`). Persisted choice wins over this. */
85
+ readonly space?: ThemeSpace;
35
86
  /**
36
- * Resolves the stylesheet URL for a non-base season so it can be loaded
37
- * lazily at runtime instead of bundling every season's CSS up front.
38
- * Return `null` to skip loading for that season. When omitted, no runtime
39
- * loading happens — the app is expected to bundle season CSS itself.
40
- *
41
- * Contoh: `(season) => '/themes/seasonal/' + season + '/package.css'`
87
+ * Consumer brand color → `--brand` / `bg-brand`, and the `brand` accent preset.
88
+ * Pass an HSL triplet string, or `{ color, foreground }`. Persisted/runtime
89
+ * changes (ThemeBrandService.setBrand) win over this default.
42
90
  */
43
- readonly seasonalCssUrl?: (season: ThemeSeason) => string | null;
91
+ readonly brand?: string | ThemeBrandOptions;
92
+ readonly icons?: ThemeIconOptions;
44
93
  }
45
94
  declare const THEME_OPTIONS: InjectionToken<Readonly<ThemeOptions>>;
46
95
 
@@ -50,9 +99,9 @@ declare class ThemeModeService {
50
99
  private readonly options;
51
100
  private readonly modeState;
52
101
  private readonly systemPrefersDark;
53
- readonly mode: _angular_core.Signal<"light" | "dark" | "system">;
54
- readonly resolvedMode: _angular_core.Signal<"light" | "dark">;
55
- readonly isDark: _angular_core.Signal<boolean>;
102
+ readonly mode: i0.Signal<"light" | "dark" | "system">;
103
+ readonly resolvedMode: i0.Signal<"light" | "dark">;
104
+ readonly isDark: i0.Signal<boolean>;
56
105
  constructor();
57
106
  setMode(mode: ThemeMode): void;
58
107
  toggle(): void;
@@ -65,33 +114,115 @@ declare class ThemeModeService {
65
114
  private storage;
66
115
  private readStorage;
67
116
  private writeStorage;
68
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeModeService, never>;
69
- static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeModeService>;
117
+ static ɵfac: i0.ɵɵFactoryDeclaration<ThemeModeService, never>;
118
+ static ɵprov: i0.ɵɵInjectableDeclaration<ThemeModeService>;
70
119
  }
71
120
 
72
121
  declare function provideUiTheme(options?: ThemeOptions): EnvironmentProviders;
73
122
 
74
- declare class ThemeSeasonService {
123
+ /**
124
+ * Drives the two FluxUI-style color axes:
125
+ * - accent → `<html theme-color>` (full tinted palette per color)
126
+ * - neutral → `<html theme-neutral>` (gray family only)
127
+ *
128
+ * Both persist to localStorage and seed from `provideUiTheme({ color, neutral })`
129
+ * (a persisted choice wins over the configured default). `base` on either axis
130
+ * means "no override" — the core base theme applies.
131
+ */
132
+ declare class ThemeColorService {
75
133
  private readonly documentRef;
76
134
  private readonly options;
77
- private readonly seasonState;
78
- readonly season: _angular_core.Signal<"base" | "imlek" | "ramadhan" | "ied" | "natal" | "new-year">;
135
+ private readonly colorState;
136
+ private readonly neutralState;
137
+ readonly color: i0.Signal<"base" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "brand">;
138
+ readonly neutral: i0.Signal<"base" | "slate" | "gray" | "zinc" | "neutral" | "stone" | "mauve" | "olive" | "mist" | "taupe">;
79
139
  constructor();
80
- setSeason(season: ThemeSeason): void;
140
+ setColor(color: ThemeColor): void;
141
+ setNeutral(neutral: ThemeNeutral): void;
81
142
  private ensureDefaults;
82
- private persistSeason;
83
- private applySeasonAttribute;
84
- /**
85
- * Lazily loads the active season's stylesheet via `<link>` when the app
86
- * configured `seasonalCssUrl`, so only base CSS ships in the main bundle.
87
- */
88
- private ensureSeasonStylesheet;
143
+ private applyAttribute;
89
144
  private storage;
90
145
  private readStorage;
91
- private writeStorage;
92
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeSeasonService, never>;
93
- static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeSeasonService>;
146
+ private persist;
147
+ static ɵfac: i0.ɵɵFactoryDeclaration<ThemeColorService, never>;
148
+ static ɵprov: i0.ɵɵInjectableDeclaration<ThemeColorService>;
149
+ }
150
+
151
+ /** Resolved brand color. Both fields are HSL triplets `H S% L%`. */
152
+ interface ThemeBrand {
153
+ readonly color: string;
154
+ readonly foreground: string;
155
+ }
156
+ /**
157
+ * Consumer-configurable brand color. Writes `--brand` / `--brand-foreground` as
158
+ * inline custom properties on `<html>` so `bg-brand` / `text-brand-foreground`
159
+ * and the `theme-color='brand'` accent preset resolve to it.
160
+ *
161
+ * Default comes from `provideUiTheme({ brand })`; `setBrand()` overrides at
162
+ * runtime and persists. When unset, `--brand` falls back to `var(--primary)`.
163
+ */
164
+ declare class ThemeBrandService {
165
+ private readonly documentRef;
166
+ private readonly options;
167
+ private readonly brandState;
168
+ readonly brand: i0.Signal<ThemeBrand | null>;
169
+ constructor();
170
+ /** Set the brand color. `color`/`foreground` are HSL triplets (e.g. `'221 83% 53%'`). */
171
+ setBrand(color: string, foreground?: string): void;
172
+ /** Clear the consumer brand → `--brand` falls back to `var(--primary)`. */
173
+ clearBrand(): void;
174
+ private ensureDefaults;
175
+ private normalizeOption;
176
+ private applyBrand;
177
+ private storage;
178
+ private readStoredBrand;
179
+ private persist;
180
+ static ɵfac: i0.ɵɵFactoryDeclaration<ThemeBrandService, never>;
181
+ static ɵprov: i0.ɵɵInjectableDeclaration<ThemeBrandService>;
182
+ }
183
+
184
+ /**
185
+ * Corner radius axis. Writes `<html theme-radius>`; each preset CSS sets the
186
+ * single `--radius-base` knob so the whole `--radius-*` scale + `rounded-*`
187
+ * utilities rescale. Persists to localStorage and seeds from
188
+ * `provideUiTheme({ radius })` (a persisted choice wins over the default).
189
+ */
190
+ declare class ThemeRadiusService {
191
+ private readonly documentRef;
192
+ private readonly options;
193
+ private readonly radiusState;
194
+ readonly radius: i0.Signal<"none" | "sm" | "md" | "lg" | "xl" | "full">;
195
+ constructor();
196
+ setRadius(radius: ThemeRadius): void;
197
+ private ensureDefaults;
198
+ private storage;
199
+ private readStorage;
200
+ private persist;
201
+ static ɵfac: i0.ɵɵFactoryDeclaration<ThemeRadiusService, never>;
202
+ static ɵprov: i0.ɵɵInjectableDeclaration<ThemeRadiusService>;
203
+ }
204
+
205
+ /**
206
+ * Spacing density axis. Writes `<html theme-space>`; each preset CSS sets the
207
+ * single `--spacing-base` knob, which Tailwind's `--spacing` derives from, so
208
+ * every `p-*`/`m-*`/`gap-*`/`w-*`/`h-*` utility rescales. Persists to
209
+ * localStorage and seeds from `provideUiTheme({ space })` (a persisted choice
210
+ * wins over the default).
211
+ */
212
+ declare class ThemeSpaceService {
213
+ private readonly documentRef;
214
+ private readonly options;
215
+ private readonly spaceState;
216
+ readonly space: i0.Signal<"compact" | "normal" | "relaxed" | "spacious">;
217
+ constructor();
218
+ setSpace(space: ThemeSpace): void;
219
+ private ensureDefaults;
220
+ private storage;
221
+ private readStorage;
222
+ private persist;
223
+ static ɵfac: i0.ɵɵFactoryDeclaration<ThemeSpaceService, never>;
224
+ static ɵprov: i0.ɵɵInjectableDeclaration<ThemeSpaceService>;
94
225
  }
95
226
 
96
- export { DEFAULT_THEME_MODE, DEFAULT_THEME_SEASON, RESOLVED_THEME_MODES, THEME_MODES, THEME_MODE_STORAGE_KEY, THEME_OPTIONS, THEME_SEASONS, THEME_SEASON_STORAGE_KEY, ThemeModeService, ThemeSeasonService, isResolvedThemeMode, isThemeMode, isThemeSeason, normalizeThemeMode, normalizeThemeSeason, provideUiTheme };
97
- export type { ResolvedThemeMode, ThemeIconOptions, ThemeMode, ThemeOptions, ThemeSeason };
227
+ export { DEFAULT_THEME_COLOR, DEFAULT_THEME_MODE, DEFAULT_THEME_NEUTRAL, DEFAULT_THEME_RADIUS, DEFAULT_THEME_SPACE, RESOLVED_THEME_MODES, THEME_BRAND_STORAGE_KEY, THEME_COLORS, THEME_COLOR_STORAGE_KEY, THEME_MODES, THEME_MODE_STORAGE_KEY, THEME_NEUTRALS, THEME_NEUTRAL_STORAGE_KEY, THEME_OPTIONS, THEME_RADII, THEME_RADIUS_STORAGE_KEY, THEME_SPACES, THEME_SPACE_STORAGE_KEY, ThemeBrandService, ThemeColorService, ThemeModeService, ThemeRadiusService, ThemeSpaceService, isResolvedThemeMode, isThemeColor, isThemeMode, isThemeNeutral, isThemeRadius, isThemeSpace, normalizeThemeColor, normalizeThemeMode, normalizeThemeNeutral, normalizeThemeRadius, normalizeThemeSpace, provideUiTheme };
228
+ export type { ResolvedThemeMode, ThemeBrand, ThemeBrandOptions, ThemeColor, ThemeIconOptions, ThemeMode, ThemeNeutral, ThemeOptions, ThemeRadius, ThemeSpace };
package/styles/css/seasonal/ied/package.css DELETED
@@ -1,4 +0,0 @@
1
- /**
2
- * Seasonal overrides for the Ied theme.
3
- */
4
- @import './theme.css';
package/styles/css/seasonal/ied/theme.css DELETED
@@ -1,78 +0,0 @@
1
- /**
2
- * Token overrides for the Ied season.
3
- */
4
- @layer tokens {
5
- html[theme-season='ied'][data-mode='light'] {
6
- color-scheme: light;
7
-
8
- --highlight: 188 84% 38%;
9
-
10
- --background: 186 38% 98%;
11
- --surface: 45 78% 96%;
12
- --surface-foreground: 188 46% 16%;
13
- --foreground: 188 46% 16%;
14
-
15
- --card: 0 0% 100%;
16
- --card-foreground: 188 46% 16%;
17
-
18
- --popover: 0 0% 100%;
19
- --popover-foreground: 188 46% 16%;
20
-
21
- --muted: 186 22% 94%;
22
- --muted-foreground: 188 16% 34%;
23
-
24
- --border: 186 20% 85%;
25
- --input: 186 20% 85%;
26
-
27
- --primary: 188 84% 38%;
28
- --primary-foreground: 0 0% 100%;
29
- --accent: 45 92% 94%;
30
- --accent-foreground: 188 52% 22%;
31
- --secondary: 184 24% 93%;
32
- --secondary-foreground: 188 48% 24%;
33
- --ring: 45 88% 54%;
34
-
35
- --chart-1: 188 84% 38%;
36
- --chart-2: 45 88% 54%;
37
- --chart-3: 149 48% 40%;
38
- --chart-4: 223 74% 58%;
39
- --chart-5: 25 92% 60%;
40
- }
41
-
42
- html[theme-season='ied'][data-mode='dark'] {
43
- color-scheme: dark;
44
-
45
- --highlight: 45 92% 68%;
46
-
47
- --background: 189 34% 11%;
48
- --surface: 189 24% 16%;
49
- --surface-foreground: 46 72% 95%;
50
- --foreground: 46 72% 95%;
51
-
52
- --card: 189 24% 14%;
53
- --card-foreground: 46 72% 95%;
54
-
55
- --popover: 189 24% 14%;
56
- --popover-foreground: 46 72% 95%;
57
-
58
- --muted: 189 18% 19%;
59
- --muted-foreground: 46 18% 78%;
60
-
61
- --border: 189 16% 25%;
62
- --input: 189 16% 25%;
63
-
64
- --primary: 45 92% 68%;
65
- --primary-foreground: 189 46% 16%;
66
- --accent: 188 24% 21%;
67
- --accent-foreground: 46 82% 90%;
68
- --secondary: 189 18% 19%;
69
- --secondary-foreground: 46 62% 88%;
70
- --ring: 45 92% 68%;
71
-
72
- --chart-1: 45 92% 68%;
73
- --chart-2: 188 76% 58%;
74
- --chart-3: 149 54% 54%;
75
- --chart-4: 223 82% 70%;
76
- --chart-5: 24 96% 68%;
77
- }
78
- }
package/styles/css/seasonal/imlek/components.css DELETED
@@ -1,87 +0,0 @@
1
- /**
2
- * Global component-facing styles that should react to the active theme.
3
- */
4
- @layer base {
5
- html[theme-season='imlek'] * {
6
- border-color: hsl(var(--border));
7
- outline-color: hsl(var(--ring) / var(--opacity-50));
8
- }
9
-
10
- html[theme-season='imlek'],
11
- html[theme-season='imlek'] body {
12
- min-height: 100%;
13
- }
14
-
15
- html[theme-season='imlek'] {
16
- background: hsl(var(--background));
17
- }
18
-
19
- html[theme-season='imlek'] body {
20
- background: hsl(var(--background));
21
- color: hsl(var(--foreground));
22
- font-family: var(--font-sans);
23
- font-size: var(--text-base);
24
- line-height: var(--text-base--line-height);
25
- letter-spacing: var(--letter-spacing);
26
- transition:
27
- background-color var(--duration-normal) var(--ease-standard),
28
- color var(--duration-normal) var(--ease-standard),
29
- border-color var(--duration-normal) var(--ease-standard),
30
- box-shadow var(--duration-normal) var(--ease-standard),
31
- outline-color var(--duration-normal) var(--ease-standard);
32
- }
33
-
34
- html[theme-season='imlek'] button,
35
- html[theme-season='imlek'] input,
36
- html[theme-season='imlek'] select,
37
- html[theme-season='imlek'] textarea {
38
- font: inherit;
39
- }
40
-
41
- html[theme-season='imlek'] ::selection {
42
- background: hsl(var(--primary) / var(--opacity-24));
43
- color: hsl(var(--foreground));
44
- }
45
- }
46
-
47
- @layer components {
48
- html[theme-season='imlek'] .nav-text {
49
- font-family: var(--nav-font-family, var(--font-sans));
50
- font-size: var(--nav-text-size, var(--text-base));
51
- line-height: var(--nav-text-line-height, var(--text-base--line-height));
52
- }
53
-
54
- html[theme-season='imlek'] .nav-hover-surface {
55
- @apply relative isolate hover:text-accent-foreground;
56
- }
57
-
58
- html[theme-season='imlek'] .nav-hover-surface::before {
59
- content: '';
60
- border-radius: inherit;
61
- @apply pointer-events-none absolute inset-y-0 left-2 right-2 z-0 bg-transparent transition-colors;
62
- }
63
-
64
- html[theme-season='imlek'] .nav-hover-surface:hover::before {
65
- @apply bg-accent;
66
- }
67
-
68
- html[theme-season='imlek'] .nav-hover-surface > * {
69
- @apply relative z-10;
70
- }
71
-
72
- html[theme-season='imlek'] .nav-heading {
73
- font-family: var(--nav-heading-font-family, var(--nav-font-family, var(--font-sans)));
74
- font-size: var(--nav-heading-size, var(--text-sm));
75
- line-height: var(--nav-heading-line-height, var(--text-sm--line-height));
76
- font-weight: var(--nav-heading-weight, 600);
77
- letter-spacing: var(--nav-heading-letter-spacing, 0.12em);
78
- text-transform: uppercase;
79
- }
80
-
81
- html[theme-season='imlek'] .nav-badge {
82
- font-family: var(--nav-badge-font-family, var(--nav-font-family, var(--font-sans)));
83
- font-size: var(--nav-badge-size, var(--text-sm));
84
- line-height: var(--nav-badge-line-height, var(--text-sm--line-height));
85
- font-weight: var(--nav-badge-weight, 500);
86
- }
87
- }
package/styles/css/seasonal/imlek/package.css DELETED
@@ -1,6 +0,0 @@
1
- /**
2
- * Internal grouped Imlek theme stylesheet.
3
- */
4
- @import './theme.css';
5
- @import './tokens.css';
6
- @import './components.css';