@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
@@ -1,144 +0,0 @@
1
- /**
2
- * Tailwind v4 theme mapping for @ojiepermana/angular-theme/styles.
3
- *
4
- * Requires Tailwind CSS ^4.3.0.
5
- *
6
- * Usage (styles.css):
7
- * @import '@ojiepermana/angular-theme/theme.css';
8
- * @import 'tailwindcss';
9
- * @import '@ojiepermana/angular-theme/styles/css/seasonal/imlek/tailwind.css';
10
- *
11
- * Maps the 3-layer HSL CSS variables onto Tailwind v4 design tokens so
12
- * utilities like `bg-primary`, `text-foreground`, `rounded-md`, and
13
- * `shadow-lg` resolve to the active theme automatically.
14
- */
15
- @custom-variant dark (&:where([data-mode='dark'], [data-mode='dark'] *, .dark, .dark *));
16
-
17
- @theme inline {
18
- --color-highlight: hsl(var(--highlight) / 0.7);
19
- --color-border: hsl(var(--border));
20
- --color-input: hsl(var(--input));
21
- --color-ring: hsl(var(--ring));
22
- --color-background: hsl(var(--background));
23
- --color-surface: hsl(var(--surface, var(--muted)));
24
- --color-surface-foreground: hsl(var(--surface-foreground, var(--foreground)));
25
- --color-foreground: hsl(var(--foreground));
26
-
27
- --color-primary: hsl(var(--primary));
28
- --color-primary-foreground: hsl(var(--primary-foreground));
29
-
30
- --color-secondary: hsl(var(--secondary));
31
- --color-secondary-foreground: hsl(var(--secondary-foreground));
32
-
33
- --color-destructive: hsl(var(--destructive));
34
- --color-destructive-foreground: hsl(var(--destructive-foreground));
35
-
36
- --color-success: hsl(var(--success));
37
- --color-success-foreground: hsl(var(--success-foreground));
38
-
39
- --color-warning: hsl(var(--warning));
40
- --color-warning-foreground: hsl(var(--warning-foreground));
41
-
42
- --color-info: hsl(var(--info));
43
- --color-info-foreground: hsl(var(--info-foreground));
44
-
45
- --color-muted: hsl(var(--muted));
46
- --color-muted-foreground: hsl(var(--muted-foreground));
47
-
48
- --color-accent: hsl(var(--accent));
49
- --color-accent-foreground: hsl(var(--accent-foreground));
50
-
51
- --color-popover: hsl(var(--popover));
52
- --color-popover-foreground: hsl(var(--popover-foreground));
53
-
54
- --color-card: hsl(var(--card));
55
- --color-card-foreground: hsl(var(--card-foreground));
56
-
57
- --color-chart-1: hsl(var(--chart-1));
58
- --color-chart-2: hsl(var(--chart-2));
59
- --color-chart-3: hsl(var(--chart-3));
60
- --color-chart-4: hsl(var(--chart-4));
61
- --color-chart-5: hsl(var(--chart-5));
62
-
63
- --color-sidebar: hsl(var(--sidebar));
64
- --color-sidebar-foreground: hsl(var(--sidebar-foreground));
65
- --color-sidebar-primary: hsl(var(--sidebar-primary));
66
- --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
67
- --color-sidebar-accent: hsl(var(--sidebar-accent));
68
- --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
69
- --color-sidebar-border: hsl(var(--sidebar-border));
70
- --color-sidebar-ring: hsl(var(--sidebar-ring));
71
-
72
- --radius: var(--radius-base);
73
- --radius-xs: calc(var(--radius-base) * 0.4);
74
- --radius-sm: calc(var(--radius-base) * 0.6);
75
- --radius-md: calc(var(--radius-base) * 0.8);
76
- --radius-lg: var(--radius-base);
77
- --radius-xl: calc(var(--radius-base) * 1.4);
78
- --radius-2xl: calc(var(--radius-base) * 1.8);
79
- --radius-3xl: calc(var(--radius-base) * 2.2);
80
- --radius-4xl: calc(var(--radius-base) * 2.6);
81
-
82
- --shadow-xs: var(--theme-shadow-xs);
83
- --shadow-sm: var(--theme-shadow-sm);
84
- --shadow: var(--theme-shadow);
85
- --shadow-md: var(--theme-shadow-md);
86
- --shadow-lg: var(--theme-shadow-lg);
87
- --shadow-xl: var(--theme-shadow-xl);
88
-
89
- --text-2xs: var(--font-size-2xs);
90
- --text-2xs--line-height: var(--line-height-2xs);
91
- --text-2xs-plus: var(--font-size-2xs-plus);
92
- --text-2xs-plus--line-height: var(--line-height-2xs-plus);
93
- --text-xs: var(--font-size-xs);
94
- --text-xs--line-height: var(--line-height-tight);
95
- --text-sm: var(--font-size-sm);
96
- --text-sm--line-height: var(--line-height-snug);
97
- --text-base: var(--font-size-md);
98
- --text-base--line-height: var(--line-height-normal);
99
- --text-lg: var(--font-size-lg);
100
- --text-lg--line-height: var(--line-height-normal);
101
- --text-xl: var(--font-size-xl);
102
- --text-xl--line-height: var(--line-height-snug);
103
- --text-2xl: var(--font-size-2xl);
104
- --text-2xl--line-height: var(--line-height-snug);
105
- --text-3xl: var(--font-size-3xl);
106
- --text-3xl--line-height: var(--line-height-tight);
107
- --text-4xl: var(--font-size-4xl);
108
- --text-4xl--line-height: var(--line-height-tight);
109
- --text-5xl: calc(var(--font-size-base) * 3);
110
- --text-5xl--line-height: 1;
111
- --text-6xl: calc(var(--font-size-base) * 3.75);
112
- --text-6xl--line-height: 1;
113
- --text-7xl: calc(var(--font-size-base) * 4.5);
114
- --text-7xl--line-height: 1;
115
- --text-8xl: calc(var(--font-size-base) * 6);
116
- --text-8xl--line-height: 1;
117
- --text-9xl: calc(var(--font-size-base) * 8);
118
- --text-9xl--line-height: 1;
119
-
120
- --leading-tight: var(--line-height-tight);
121
- --leading-snug: var(--line-height-snug);
122
- --leading-normal: var(--line-height-normal);
123
- --leading-relaxed: var(--line-height-relaxed);
124
- --leading-loose: var(--line-height-loose);
125
-
126
- --spacing-control-xs: var(--control-height-xs);
127
- --spacing-control-sm: var(--control-height-sm);
128
- --spacing-control-md: var(--control-height-md);
129
- --spacing-control-lg: var(--control-height-lg);
130
- --spacing-control-xl: var(--control-height-xl);
131
-
132
- --spacing-container-sm: var(--container-sm);
133
- --spacing-container-md: var(--container-md);
134
- --spacing-container-lg: var(--container-lg);
135
- --spacing-container-xl: var(--container-xl);
136
- --spacing-container-2xl: var(--container-2xl);
137
-
138
- --font-sans: var(--theme-font-sans);
139
- --font-mono: var(--theme-font-mono);
140
- }
141
-
142
- @utility rounded-base {
143
- border-radius: var(--rounded-base);
144
- }
@@ -1,95 +0,0 @@
1
- /**
2
- * Core theme layers and shared tokens.
3
- */
4
- @layer reset, base, mat-mdc, tokens, components, utilities;
5
-
6
- @layer tokens {
7
- html[theme-season='imlek'][data-mode='light'] {
8
- color-scheme: light;
9
-
10
- --background: 0 0% 100%;
11
- --foreground: 240 10% 3.9%;
12
-
13
- --card: 0 0% 100%;
14
- --card-foreground: 240 10% 3.9%;
15
-
16
- --popover: 0 0% 100%;
17
- --popover-foreground: 240 10% 3.9%;
18
-
19
- --muted: 240 4.8% 95.9%;
20
- --muted-foreground: 240 3.8% 46.1%;
21
-
22
- --border: 240 5.9% 90%;
23
- --input: 240 5.9% 90%;
24
- }
25
-
26
- html[theme-season='imlek'][data-mode='dark'] {
27
- color-scheme: dark;
28
-
29
- --background: 240 10% 3.9%;
30
- --foreground: 0 0% 98%;
31
-
32
- --card: 240 10% 3.9%;
33
- --card-foreground: 0 0% 98%;
34
-
35
- --popover: 240 10% 3.9%;
36
- --popover-foreground: 0 0% 98%;
37
-
38
- --muted: 240 3.7% 15.9%;
39
- --muted-foreground: 240 5% 64.9%;
40
-
41
- --border: 240 3.7% 15.9%;
42
- --input: 240 3.7% 15.9%;
43
- }
44
- }
45
-
46
- @layer tokens {
47
- html[theme-season='imlek'] {
48
- --destructive: 0 72% 51%;
49
- --destructive-foreground: 0 0% 100%;
50
-
51
- --success: 142 71% 45%;
52
- --success-foreground: 0 0% 100%;
53
-
54
- --warning: 38 92% 50%;
55
- --warning-foreground: 0 0% 10%;
56
-
57
- --info: 217 91% 60%;
58
- --info-foreground: 0 0% 100%;
59
-
60
- --chart-1: var(--theme-chart-1, var(--primary));
61
- --chart-2: var(--theme-chart-2, var(--accent-foreground));
62
- --chart-3: var(--theme-chart-3, 271 81% 56%);
63
- --chart-4: var(--theme-chart-4, 38 92% 50%);
64
- --chart-5: var(--theme-chart-5, 355 78% 56%);
65
-
66
- --sidebar-background: var(--card);
67
- --sidebar-foreground: var(--foreground);
68
- --sidebar-primary: var(--primary);
69
- --sidebar-primary-foreground: var(--primary-foreground);
70
- --sidebar-accent: var(--accent);
71
- --sidebar-accent-foreground: var(--accent-foreground);
72
- --sidebar-border: var(--border);
73
- --sidebar-ring: var(--ring);
74
- }
75
-
76
- html[theme-season='imlek'][data-mode='dark'] {
77
- --destructive: 0 62% 45%;
78
- --destructive-foreground: 0 0% 95%;
79
-
80
- --success: 142 60% 40%;
81
- --success-foreground: 0 0% 95%;
82
-
83
- --warning: 38 80% 45%;
84
- --warning-foreground: 0 0% 10%;
85
-
86
- --info: 217 80% 55%;
87
- --info-foreground: 0 0% 95%;
88
-
89
- --chart-1: var(--theme-chart-1, var(--primary));
90
- --chart-2: var(--theme-chart-2, var(--accent-foreground));
91
- --chart-3: var(--theme-chart-3, 271 85% 70%);
92
- --chart-4: var(--theme-chart-4, 38 96% 62%);
93
- --chart-5: var(--theme-chart-5, 355 82% 68%);
94
- }
95
- }
@@ -1,152 +0,0 @@
1
- /**
2
- * Imlek theme color, style, and layout tokens.
3
- */
4
- @layer tokens {
5
- :root[theme-season='imlek'] {
6
- --highlight: 0 0% 64%;
7
- --highlight-border-alpha: 0.7;
8
- --highlight-background-alpha: 0.7;
9
-
10
- --background: 210 38% 98%;
11
- --surface: 0 0% 89.8%;
12
- --surface-foreground: 211 56% 12%;
13
- --foreground: 211 56% 12%;
14
-
15
- --card: 0 0% 100%;
16
- --card-foreground: 211 56% 12%;
17
-
18
- --popover: 0 0% 100%;
19
- --popover-foreground: 211 56% 12%;
20
-
21
- --muted: 211 34% 94%;
22
- --muted-foreground: 211 24% 38%;
23
-
24
- --border: 211 28% 82%;
25
- --input: 211 28% 82%;
26
-
27
- --primary: 211 95% 29%;
28
- --primary-foreground: 0 0% 100%;
29
- --accent: 211 95% 96%;
30
- --accent-foreground: 211 95% 22%;
31
- --secondary: 211 24% 95%;
32
- --secondary-foreground: 211 75% 24%;
33
- --ring: 211 95% 29%;
34
-
35
- --radius-base: 0.625rem;
36
- --radius: var(--radius-base);
37
-
38
- /* Deprecated: use the --radius-* tokens directly. */
39
- --theme-radius-base: var(--radius-base);
40
- --theme-radius-xs: var(--radius-xs);
41
- --theme-radius-sm: var(--radius-sm);
42
- --theme-radius-md: var(--radius-base);
43
- --theme-radius-lg: var(--radius-base);
44
-
45
- --border-width-base: 1px;
46
- --border-width: var(--border-width-base);
47
-
48
- /* Concrete values live in the *-base primitives; --shadow-* and
49
- * --theme-shadow-* are aliases. Never alias --theme-shadow-* back to
50
- * --shadow-* — the Tailwind @theme mapping re-emits
51
- * --shadow-*: var(--theme-shadow-*) in the later `theme` layer, which
52
- * turns that into a var() cycle and invalidates both tokens. */
53
- --shadow-base: 0 1px 0 0 hsl(211 95% 12% / 0.08);
54
- --shadow-md-base: 0 8px 18px -14px hsl(211 95% 12% / 0.24);
55
- --shadow-lg-base: 0 18px 36px -28px hsl(211 95% 12% / 0.34);
56
- --shadow-xl-base: 0 24px 48px -36px hsl(211 95% 12% / 0.4);
57
- --shadow-sm: var(--shadow-base);
58
- --shadow-md: var(--shadow-md-base);
59
- --shadow-lg: var(--shadow-lg-base);
60
- --shadow-xl: var(--shadow-xl-base);
61
-
62
- --theme-shadow-sm: var(--shadow-base);
63
- --theme-shadow: 0 2px 4px -2px hsl(211 95% 12% / 0.14);
64
- --theme-shadow-md: var(--shadow-md-base);
65
- --theme-shadow-lg: var(--shadow-lg-base);
66
- --theme-shadow-xl: var(--shadow-xl-base);
67
- --shadow: var(--theme-shadow);
68
-
69
- --theme-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
70
- --theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
71
-
72
- --font-sans: var(--theme-font-sans);
73
- --font-mono: var(--theme-font-mono);
74
- --font-weight-bold: 600;
75
- --theme-text-scale: 1;
76
- --font-size-base: 1rem;
77
- --line-height-base: 1.5;
78
- --control-height-base: 2.25rem;
79
- --nav-font-family: var(--font-sans);
80
- --nav-text-size: calc(var(--text-base) - 0.125rem);
81
- --nav-text-line-height: var(--text-base--line-height);
82
- --nav-heading-font-family: var(--font-sans);
83
- --nav-heading-size: var(--text-sm);
84
- --nav-heading-line-height: var(--text-sm--line-height);
85
- --nav-heading-weight: 600;
86
- --nav-heading-letter-spacing: 0.12em;
87
- --nav-badge-font-family: var(--font-sans);
88
- --nav-badge-size: var(--text-sm);
89
- --nav-badge-line-height: var(--text-sm--line-height);
90
- --nav-badge-weight: 500;
91
- --letter-spacing: 0;
92
- --spacing-base: 0.25rem;
93
- --space-unit: var(--spacing-base);
94
- --layout-topbar-height: 3.25rem;
95
-
96
- --layout-shell-padding: clamp(1rem, 2vw, 2rem);
97
- --layout-frame-radius: var(--radius-lg);
98
- --layout-frame-shadow: var(--shadow-sm);
99
- --layout-sidebar-width: 17.5rem;
100
- --container-base: 80rem;
101
- --layout-main-max-width: var(--container-base);
102
- --layout-vertical-shell-max-width: calc(var(--layout-sidebar-width) + var(--layout-main-max-width));
103
- --layout-empty-max-width: 24rem;
104
- --layout-empty-padding: clamp(1.5rem, 4vw, 3rem);
105
- --layout-topbar-inline: 0.875rem;
106
- --layout-logo-mark-size: 2rem;
107
- }
108
-
109
- :root[theme-season='imlek'][data-mode='dark'] {
110
- --highlight: 0 0% 64%;
111
- --highlight-border-alpha: 0.45;
112
- --highlight-background-alpha: 0.55;
113
-
114
- --background: 211 38% 9%;
115
- --surface: 211 22% 18%;
116
- --surface-foreground: 210 40% 96%;
117
- --foreground: 210 40% 96%;
118
-
119
- --card: 211 34% 11%;
120
- --card-foreground: 210 40% 96%;
121
-
122
- --popover: 211 34% 11%;
123
- --popover-foreground: 210 40% 96%;
124
-
125
- --muted: 211 22% 18%;
126
- --muted-foreground: 211 18% 70%;
127
-
128
- --border: 211 24% 24%;
129
- --input: 211 24% 24%;
130
-
131
- --accent: 211 58% 18%;
132
- --accent-foreground: 211 90% 84%;
133
- --secondary: 211 24% 18%;
134
- --secondary-foreground: 211 82% 84%;
135
-
136
- --shadow-base: 0 1px 0 0 hsl(210 40% 96% / 0.08);
137
- --shadow-sm: var(--shadow-base);
138
- --theme-shadow-sm: var(--shadow-base);
139
-
140
- --layout-frame-shadow: 0 0 0 1px hsl(var(--border));
141
- }
142
- }
143
-
144
- @layer utilities {
145
- .border-highlight {
146
- border-color: hsl(var(--highlight, var(--border)) / var(--highlight-border-alpha, 0.7));
147
- }
148
-
149
- .bg-highlight {
150
- background-color: hsl(var(--highlight, var(--border)) / var(--highlight-background-alpha, 0.7));
151
- }
152
- }
@@ -1,6 +0,0 @@
1
- @import './base/package.css';
2
- @import './imlek/package.css';
3
- @import './ramadhan/package.css';
4
- @import './ied/package.css';
5
- @import './natal/package.css';
6
- @import './new-year/package.css';
@@ -1,4 +0,0 @@
1
- /**
2
- * Seasonal overrides for the Natal theme.
3
- */
4
- @import './theme.css';
@@ -1,78 +0,0 @@
1
- /**
2
- * Token overrides for the Natal season.
3
- */
4
- @layer tokens {
5
- html[theme-season='natal'][data-mode='light'] {
6
- color-scheme: light;
7
-
8
- --highlight: 356 68% 46%;
9
-
10
- --background: 142 24% 98%;
11
- --surface: 142 20% 95%;
12
- --surface-foreground: 150 42% 16%;
13
- --foreground: 150 42% 16%;
14
-
15
- --card: 0 0% 100%;
16
- --card-foreground: 150 42% 16%;
17
-
18
- --popover: 0 0% 100%;
19
- --popover-foreground: 150 42% 16%;
20
-
21
- --muted: 145 18% 93%;
22
- --muted-foreground: 150 14% 34%;
23
-
24
- --border: 146 16% 84%;
25
- --input: 146 16% 84%;
26
-
27
- --primary: 356 68% 46%;
28
- --primary-foreground: 0 0% 100%;
29
- --accent: 146 44% 93%;
30
- --accent-foreground: 146 60% 20%;
31
- --secondary: 43 76% 94%;
32
- --secondary-foreground: 24 44% 24%;
33
- --ring: 356 72% 52%;
34
-
35
- --chart-1: 356 68% 46%;
36
- --chart-2: 146 58% 34%;
37
- --chart-3: 43 88% 54%;
38
- --chart-4: 192 64% 46%;
39
- --chart-5: 266 58% 60%;
40
- }
41
-
42
- html[theme-season='natal'][data-mode='dark'] {
43
- color-scheme: dark;
44
-
45
- --highlight: 43 88% 66%;
46
-
47
- --background: 146 22% 10%;
48
- --surface: 146 18% 15%;
49
- --surface-foreground: 0 0% 97%;
50
- --foreground: 0 0% 97%;
51
-
52
- --card: 146 18% 13%;
53
- --card-foreground: 0 0% 97%;
54
-
55
- --popover: 146 18% 13%;
56
- --popover-foreground: 0 0% 97%;
57
-
58
- --muted: 146 14% 18%;
59
- --muted-foreground: 0 0% 78%;
60
-
61
- --border: 146 14% 24%;
62
- --input: 146 14% 24%;
63
-
64
- --primary: 356 78% 62%;
65
- --primary-foreground: 0 0% 100%;
66
- --accent: 146 24% 20%;
67
- --accent-foreground: 146 70% 90%;
68
- --secondary: 43 30% 18%;
69
- --secondary-foreground: 43 72% 88%;
70
- --ring: 43 88% 66%;
71
-
72
- --chart-1: 356 78% 62%;
73
- --chart-2: 146 60% 54%;
74
- --chart-3: 43 88% 66%;
75
- --chart-4: 192 74% 66%;
76
- --chart-5: 266 64% 72%;
77
- }
78
- }
@@ -1,4 +0,0 @@
1
- /**
2
- * Seasonal overrides for the New Year theme.
3
- */
4
- @import './theme.css';
@@ -1,78 +0,0 @@
1
- /**
2
- * Token overrides for the New Year season.
3
- */
4
- @layer tokens {
5
- html[theme-season='new-year'][data-mode='light'] {
6
- color-scheme: light;
7
-
8
- --highlight: 232 58% 32%;
9
-
10
- --background: 228 34% 98%;
11
- --surface: 43 65% 95%;
12
- --surface-foreground: 232 44% 18%;
13
- --foreground: 232 44% 18%;
14
-
15
- --card: 0 0% 100%;
16
- --card-foreground: 232 44% 18%;
17
-
18
- --popover: 0 0% 100%;
19
- --popover-foreground: 232 44% 18%;
20
-
21
- --muted: 228 16% 93%;
22
- --muted-foreground: 232 14% 36%;
23
-
24
- --border: 228 18% 84%;
25
- --input: 228 18% 84%;
26
-
27
- --primary: 232 58% 32%;
28
- --primary-foreground: 0 0% 100%;
29
- --accent: 43 88% 93%;
30
- --accent-foreground: 232 42% 22%;
31
- --secondary: 228 24% 94%;
32
- --secondary-foreground: 232 48% 24%;
33
- --ring: 43 92% 56%;
34
-
35
- --chart-1: 232 58% 32%;
36
- --chart-2: 43 92% 56%;
37
- --chart-3: 203 72% 46%;
38
- --chart-4: 325 72% 56%;
39
- --chart-5: 160 54% 42%;
40
- }
41
-
42
- html[theme-season='new-year'][data-mode='dark'] {
43
- color-scheme: dark;
44
-
45
- --highlight: 43 92% 62%;
46
-
47
- --background: 232 30% 11%;
48
- --surface: 232 24% 16%;
49
- --surface-foreground: 45 52% 95%;
50
- --foreground: 45 52% 95%;
51
-
52
- --card: 232 24% 14%;
53
- --card-foreground: 45 52% 95%;
54
-
55
- --popover: 232 24% 14%;
56
- --popover-foreground: 45 52% 95%;
57
-
58
- --muted: 232 18% 19%;
59
- --muted-foreground: 45 18% 78%;
60
-
61
- --border: 232 16% 25%;
62
- --input: 232 16% 25%;
63
-
64
- --primary: 43 92% 62%;
65
- --primary-foreground: 232 38% 12%;
66
- --accent: 232 24% 22%;
67
- --accent-foreground: 43 82% 88%;
68
- --secondary: 232 18% 19%;
69
- --secondary-foreground: 43 65% 86%;
70
- --ring: 43 92% 62%;
71
-
72
- --chart-1: 43 92% 62%;
73
- --chart-2: 232 66% 64%;
74
- --chart-3: 203 80% 68%;
75
- --chart-4: 325 80% 72%;
76
- --chart-5: 160 60% 58%;
77
- }
78
- }
@@ -1,4 +0,0 @@
1
- /**
2
- * Seasonal overrides for the Ramadhan theme.
3
- */
4
- @import './theme.css';
@@ -1,78 +0,0 @@
1
- /**
2
- * Token overrides for the Ramadhan season.
3
- */
4
- @layer tokens {
5
- html[theme-season='ramadhan'][data-mode='light'] {
6
- color-scheme: light;
7
-
8
- --highlight: 156 72% 32%;
9
-
10
- --background: 150 32% 98%;
11
- --surface: 47 78% 96%;
12
- --surface-foreground: 156 38% 16%;
13
- --foreground: 156 38% 16%;
14
-
15
- --card: 0 0% 100%;
16
- --card-foreground: 156 38% 16%;
17
-
18
- --popover: 0 0% 100%;
19
- --popover-foreground: 156 38% 16%;
20
-
21
- --muted: 150 20% 94%;
22
- --muted-foreground: 156 18% 34%;
23
-
24
- --border: 150 18% 84%;
25
- --input: 150 18% 84%;
26
-
27
- --primary: 156 72% 32%;
28
- --primary-foreground: 0 0% 100%;
29
- --accent: 47 92% 92%;
30
- --accent-foreground: 156 52% 20%;
31
- --secondary: 150 24% 92%;
32
- --secondary-foreground: 156 48% 22%;
33
- --ring: 47 92% 52%;
34
-
35
- --chart-1: 156 72% 32%;
36
- --chart-2: 47 92% 52%;
37
- --chart-3: 190 78% 42%;
38
- --chart-4: 24 95% 58%;
39
- --chart-5: 266 72% 60%;
40
- }
41
-
42
- html[theme-season='ramadhan'][data-mode='dark'] {
43
- color-scheme: dark;
44
-
45
- --highlight: 47 92% 62%;
46
-
47
- --background: 156 30% 10%;
48
- --surface: 156 24% 15%;
49
- --surface-foreground: 48 80% 95%;
50
- --foreground: 48 80% 95%;
51
-
52
- --card: 156 24% 13%;
53
- --card-foreground: 48 80% 95%;
54
-
55
- --popover: 156 24% 13%;
56
- --popover-foreground: 48 80% 95%;
57
-
58
- --muted: 156 16% 18%;
59
- --muted-foreground: 48 22% 76%;
60
-
61
- --border: 156 14% 24%;
62
- --input: 156 14% 24%;
63
-
64
- --primary: 47 92% 62%;
65
- --primary-foreground: 156 46% 14%;
66
- --accent: 156 24% 20%;
67
- --accent-foreground: 48 86% 90%;
68
- --secondary: 156 18% 18%;
69
- --secondary-foreground: 48 70% 90%;
70
- --ring: 47 92% 62%;
71
-
72
- --chart-1: 47 92% 62%;
73
- --chart-2: 156 68% 46%;
74
- --chart-3: 190 84% 62%;
75
- --chart-4: 30 95% 66%;
76
- --chart-5: 266 78% 72%;
77
- }
78
- }
File without changes