@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.
- package/README.md +38 -19
- package/fesm2022/ojiepermana-angular-theme-layout-services.mjs +6 -6
- package/fesm2022/ojiepermana-angular-theme-layout-wrapper.mjs +51 -35
- package/fesm2022/ojiepermana-angular-theme-layout.mjs +24 -24
- package/fesm2022/ojiepermana-angular-theme-page.mjs +24 -24
- package/fesm2022/ojiepermana-angular-theme-styles.mjs +359 -56
- package/package.json +3 -3
- package/styles/README.md +10 -3
- package/styles/css/{seasonal/base → base}/tailwind.css +9 -5
- package/styles/css/{seasonal/base → base}/theme.css +1 -6
- package/styles/css/{seasonal/base → base}/tokens.css +26 -16
- package/styles/css/color/amber.css +50 -0
- package/styles/css/color/blue.css +50 -0
- package/styles/css/color/brand.css +16 -0
- package/styles/css/color/cyan.css +50 -0
- package/styles/css/color/emerald.css +50 -0
- package/styles/css/color/fuchsia.css +50 -0
- package/styles/css/color/green.css +50 -0
- package/styles/css/color/index.css +19 -0
- package/styles/css/color/indigo.css +50 -0
- package/styles/css/color/lime.css +50 -0
- package/styles/css/color/orange.css +50 -0
- package/styles/css/color/pink.css +50 -0
- package/styles/css/color/purple.css +50 -0
- package/styles/css/color/red.css +50 -0
- package/styles/css/color/rose.css +50 -0
- package/styles/css/color/sky.css +50 -0
- package/styles/css/color/teal.css +50 -0
- package/styles/css/color/violet.css +50 -0
- package/styles/css/color/yellow.css +50 -0
- package/styles/css/index.css +15 -6
- package/styles/css/neutral/gray.css +34 -0
- package/styles/css/neutral/index.css +11 -0
- package/styles/css/neutral/mauve.css +34 -0
- package/styles/css/neutral/mist.css +34 -0
- package/styles/css/neutral/neutral.css +34 -0
- package/styles/css/neutral/olive.css +34 -0
- package/styles/css/neutral/slate.css +34 -0
- package/styles/css/neutral/stone.css +34 -0
- package/styles/css/neutral/taupe.css +34 -0
- package/styles/css/neutral/zinc.css +34 -0
- package/styles/css/radius/index.css +29 -0
- package/styles/css/space/index.css +24 -0
- package/types/ojiepermana-angular-theme-layout-wrapper.d.ts +10 -2
- package/types/ojiepermana-angular-theme-styles.d.ts +168 -37
- package/styles/css/seasonal/ied/package.css +0 -4
- package/styles/css/seasonal/ied/theme.css +0 -78
- package/styles/css/seasonal/imlek/components.css +0 -87
- package/styles/css/seasonal/imlek/package.css +0 -6
- package/styles/css/seasonal/imlek/tailwind.css +0 -144
- package/styles/css/seasonal/imlek/theme.css +0 -95
- package/styles/css/seasonal/imlek/tokens.css +0 -152
- package/styles/css/seasonal/index.css +0 -6
- package/styles/css/seasonal/natal/package.css +0 -4
- package/styles/css/seasonal/natal/theme.css +0 -78
- package/styles/css/seasonal/new-year/package.css +0 -4
- package/styles/css/seasonal/new-year/theme.css +0 -78
- package/styles/css/seasonal/ramadhan/package.css +0 -4
- package/styles/css/seasonal/ramadhan/theme.css +0 -78
- /package/styles/css/{seasonal/base → base}/components.css +0 -0
- /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,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,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,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
|
|
File without changes
|