@sofya-ds/tokens 1.1.0 → 1.1.2
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/dist/index.cjs +48 -62
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +48 -62
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -44,6 +44,7 @@ var sofyaTextStyleNames = [
|
|
|
44
44
|
"h2",
|
|
45
45
|
"h3",
|
|
46
46
|
"h4",
|
|
47
|
+
"h5",
|
|
47
48
|
"body",
|
|
48
49
|
"tiny"
|
|
49
50
|
];
|
|
@@ -55,42 +56,42 @@ var sharedTypography = {
|
|
|
55
56
|
};
|
|
56
57
|
var sofyaBrandPalette = {
|
|
57
58
|
neutrals: {
|
|
58
|
-
50: "#
|
|
59
|
+
50: "#F8FAFE",
|
|
59
60
|
100: "#FFFFFF",
|
|
60
|
-
200: "#
|
|
61
|
-
600: "#
|
|
62
|
-
700: "#
|
|
63
|
-
800: "#
|
|
64
|
-
900: "#
|
|
61
|
+
200: "#E3EAFF",
|
|
62
|
+
600: "#D9E2FA",
|
|
63
|
+
700: "#7D87A8",
|
|
64
|
+
800: "#4B5576",
|
|
65
|
+
900: "#00022A"
|
|
65
66
|
},
|
|
66
67
|
tags: {
|
|
67
|
-
navy: "#
|
|
68
|
-
blue: "#
|
|
68
|
+
navy: "#4B5576",
|
|
69
|
+
blue: "#365FD7",
|
|
69
70
|
violet: "#7B5DC1",
|
|
70
71
|
magenta: "#B55CAF",
|
|
71
|
-
red: "#
|
|
72
|
-
brick: "#
|
|
73
|
-
sand: "#
|
|
74
|
-
green: "#
|
|
72
|
+
red: "#D74F36",
|
|
73
|
+
brick: "#EFB9AF",
|
|
74
|
+
sand: "#F4EBE7",
|
|
75
|
+
green: "#36D774"
|
|
75
76
|
},
|
|
76
77
|
agent: {
|
|
77
|
-
pink: "#
|
|
78
|
-
sky: "#
|
|
79
|
-
lavender: "#
|
|
80
|
-
mint: "#
|
|
81
|
-
green: "#
|
|
78
|
+
pink: "#F4EBE7",
|
|
79
|
+
sky: "#D9E2FA",
|
|
80
|
+
lavender: "#E3EAFF",
|
|
81
|
+
mint: "#E3F9EE",
|
|
82
|
+
green: "#C5F3DA"
|
|
82
83
|
},
|
|
83
84
|
gradients: {
|
|
84
85
|
brand: {
|
|
85
86
|
angle: "135deg",
|
|
86
|
-
from: "#
|
|
87
|
-
via: "#
|
|
88
|
-
to: "#
|
|
87
|
+
from: "#B55CAF",
|
|
88
|
+
via: "#7B5DC1",
|
|
89
|
+
to: "#365FD7"
|
|
89
90
|
},
|
|
90
91
|
ocean: {
|
|
91
|
-
angle: "
|
|
92
|
-
from: "#
|
|
93
|
-
to: "#
|
|
92
|
+
angle: "135deg",
|
|
93
|
+
from: "#35D3C7",
|
|
94
|
+
to: "#365FD7"
|
|
94
95
|
}
|
|
95
96
|
}
|
|
96
97
|
};
|
|
@@ -175,12 +176,12 @@ var sofyaSemanticColorHex = {
|
|
|
175
176
|
foreground: sofyaBrandPalette.neutrals[800],
|
|
176
177
|
card: sofyaBrandPalette.neutrals[100],
|
|
177
178
|
cardForeground: sofyaBrandPalette.neutrals[800],
|
|
178
|
-
popover: sofyaBrandPalette.neutrals[
|
|
179
|
+
popover: sofyaBrandPalette.neutrals[50],
|
|
179
180
|
popoverForeground: sofyaBrandPalette.neutrals[800],
|
|
180
181
|
primary: sofyaBrandPalette.tags.blue,
|
|
181
182
|
primaryForeground: sofyaBrandPalette.neutrals[100],
|
|
182
|
-
secondary:
|
|
183
|
-
secondaryForeground: sofyaBrandPalette.neutrals[
|
|
183
|
+
secondary: "#6B86D6",
|
|
184
|
+
secondaryForeground: sofyaBrandPalette.neutrals[100],
|
|
184
185
|
muted: sofyaBrandPalette.neutrals[200],
|
|
185
186
|
mutedForeground: sofyaBrandPalette.neutrals[700],
|
|
186
187
|
accent: sofyaBrandPalette.tags.magenta,
|
|
@@ -189,15 +190,15 @@ var sofyaSemanticColorHex = {
|
|
|
189
190
|
destructiveForeground: sofyaBrandPalette.neutrals[100],
|
|
190
191
|
success: sofyaBrandPalette.tags.green,
|
|
191
192
|
successForeground: sofyaBrandPalette.neutrals[900],
|
|
192
|
-
warning: sofyaBrandPalette.tags.
|
|
193
|
-
warningForeground: sofyaBrandPalette.neutrals[
|
|
193
|
+
warning: sofyaBrandPalette.tags.red,
|
|
194
|
+
warningForeground: sofyaBrandPalette.neutrals[100],
|
|
194
195
|
border: sofyaBrandPalette.neutrals[600],
|
|
195
196
|
input: sofyaBrandPalette.neutrals[600],
|
|
196
197
|
ring: sofyaBrandPalette.tags.blue,
|
|
197
198
|
focus: sofyaBrandPalette.tags.blue,
|
|
198
199
|
subtle: sofyaBrandPalette.neutrals[600],
|
|
199
|
-
buttonGradientFrom: sofyaBrandPalette.
|
|
200
|
-
buttonGradientTo: sofyaBrandPalette.
|
|
200
|
+
buttonGradientFrom: sofyaBrandPalette.tags.blue,
|
|
201
|
+
buttonGradientTo: sofyaBrandPalette.tags.magenta
|
|
201
202
|
};
|
|
202
203
|
function createColorScale(hexColors) {
|
|
203
204
|
return {
|
|
@@ -243,20 +244,27 @@ function createTextStyleScale(typography) {
|
|
|
243
244
|
letterSpacing: "0"
|
|
244
245
|
},
|
|
245
246
|
h2: {
|
|
247
|
+
fontFamily: typography.display,
|
|
248
|
+
fontSize: "42px",
|
|
249
|
+
fontWeight: "500",
|
|
250
|
+
lineHeight: "48px",
|
|
251
|
+
letterSpacing: "0"
|
|
252
|
+
},
|
|
253
|
+
h3: {
|
|
246
254
|
fontFamily: typography.display,
|
|
247
255
|
fontSize: "30px",
|
|
248
256
|
fontWeight: "500",
|
|
249
257
|
lineHeight: "1",
|
|
250
258
|
letterSpacing: "0"
|
|
251
259
|
},
|
|
252
|
-
|
|
260
|
+
h4: {
|
|
253
261
|
fontFamily: typography.display,
|
|
254
262
|
fontSize: "24px",
|
|
255
263
|
fontWeight: "600",
|
|
256
264
|
lineHeight: "30px",
|
|
257
265
|
letterSpacing: "0"
|
|
258
266
|
},
|
|
259
|
-
|
|
267
|
+
h5: {
|
|
260
268
|
fontFamily: typography.display,
|
|
261
269
|
fontSize: "16px",
|
|
262
270
|
fontWeight: "500",
|
|
@@ -526,36 +534,9 @@ function resolveTheme(preset = defaultTheme, overrides) {
|
|
|
526
534
|
const baseTheme = typeof preset === "string" ? themePresets[preset] : preset;
|
|
527
535
|
return mergeTheme(baseTheme, overrides);
|
|
528
536
|
}
|
|
529
|
-
function
|
|
537
|
+
function themeDecorativeCssVariables(theme) {
|
|
530
538
|
return {
|
|
531
|
-
"--sofya-
|
|
532
|
-
"--sofya-neutral-100": `hsl(${theme.colors.card})`,
|
|
533
|
-
"--sofya-neutral-200": `hsl(${theme.colors.secondary})`,
|
|
534
|
-
"--sofya-neutral-600": `hsl(${theme.colors.border})`,
|
|
535
|
-
"--sofya-neutral-700": `hsl(${theme.colors.mutedForeground})`,
|
|
536
|
-
"--sofya-neutral-800": `hsl(${theme.colors.foreground})`,
|
|
537
|
-
"--sofya-neutral-900": `hsl(${theme.colors.foreground})`,
|
|
538
|
-
"--sofya-tag-navy": `hsl(${theme.colors.foreground})`,
|
|
539
|
-
"--sofya-tag-blue": `hsl(${theme.colors.primary})`,
|
|
540
|
-
"--sofya-tag-violet": `hsl(${theme.colors.accent})`,
|
|
541
|
-
"--sofya-tag-magenta": `hsl(${theme.colors.accent})`,
|
|
542
|
-
"--sofya-tag-red": `hsl(${theme.colors.destructive})`,
|
|
543
|
-
"--sofya-tag-brick": `hsl(${theme.colors.destructive} / 0.92)`,
|
|
544
|
-
"--sofya-tag-sand": `hsl(${theme.colors.warning})`,
|
|
545
|
-
"--sofya-tag-green": `hsl(${theme.colors.success})`,
|
|
546
|
-
"--sofya-agent-pink": `hsl(${theme.colors.accent} / 0.14)`,
|
|
547
|
-
"--sofya-agent-sky": `hsl(${theme.colors.primary} / 0.12)`,
|
|
548
|
-
"--sofya-agent-lavender": `hsl(${theme.colors.secondary})`,
|
|
549
|
-
"--sofya-agent-mint": `hsl(${theme.colors.success} / 0.12)`,
|
|
550
|
-
"--sofya-agent-green": `hsl(${theme.colors.success} / 0.16)`,
|
|
551
|
-
"--sofya-gradient-brand-from": `hsl(${theme.colors.buttonGradientFrom})`,
|
|
552
|
-
"--sofya-gradient-brand-via": `hsl(${theme.colors.accent})`,
|
|
553
|
-
"--sofya-gradient-brand-to": `hsl(${theme.colors.buttonGradientTo})`,
|
|
554
|
-
"--sofya-gradient-brand": `linear-gradient(135deg, hsl(${theme.colors.buttonGradientFrom}) 0%, hsl(${theme.colors.accent}) 50%, hsl(${theme.colors.buttonGradientTo}) 100%)`,
|
|
555
|
-
"--sofya-gradient-ocean-from": `hsl(${theme.colors.primary})`,
|
|
556
|
-
"--sofya-gradient-ocean-to": `hsl(${theme.colors.accent})`,
|
|
557
|
-
"--sofya-gradient-ocean": `linear-gradient(90deg, hsl(${theme.colors.primary}) 0%, hsl(${theme.colors.accent}) 100%)`,
|
|
558
|
-
"--sofya-avatar-background": `hsl(${theme.colors.secondary})`,
|
|
539
|
+
"--sofya-avatar-background": `hsl(${theme.colors.muted})`,
|
|
559
540
|
"--sofya-avatar-foreground": `hsl(${theme.colors.mutedForeground})`,
|
|
560
541
|
"--sofya-logo-primary": `hsl(${theme.colors.primary})`,
|
|
561
542
|
"--sofya-logo-accent": `hsl(${theme.colors.accent})`,
|
|
@@ -573,7 +554,7 @@ function themeToCssVariables(theme) {
|
|
|
573
554
|
);
|
|
574
555
|
return {
|
|
575
556
|
...brandPaletteToCssVariables(),
|
|
576
|
-
...
|
|
557
|
+
...themeDecorativeCssVariables(theme),
|
|
577
558
|
"--sofya-background": theme.colors.background,
|
|
578
559
|
"--sofya-foreground": theme.colors.foreground,
|
|
579
560
|
"--sofya-card": theme.colors.card,
|
|
@@ -635,6 +616,11 @@ function themeToCssVariables(theme) {
|
|
|
635
616
|
"--sofya-text-h4-font-weight": textStyles.h4.fontWeight,
|
|
636
617
|
"--sofya-text-h4-line-height": textStyles.h4.lineHeight,
|
|
637
618
|
"--sofya-text-h4-letter-spacing": textStyles.h4.letterSpacing,
|
|
619
|
+
"--sofya-text-h5-font-family": textStyles.h5.fontFamily,
|
|
620
|
+
"--sofya-text-h5-font-size": textStyles.h5.fontSize,
|
|
621
|
+
"--sofya-text-h5-font-weight": textStyles.h5.fontWeight,
|
|
622
|
+
"--sofya-text-h5-line-height": textStyles.h5.lineHeight,
|
|
623
|
+
"--sofya-text-h5-letter-spacing": textStyles.h5.letterSpacing,
|
|
638
624
|
"--sofya-text-body-font-family": textStyles.body.fontFamily,
|
|
639
625
|
"--sofya-text-body-font-size": textStyles.body.fontSize,
|
|
640
626
|
"--sofya-text-body-font-weight": textStyles.body.fontWeight,
|
package/dist/index.d.cts
CHANGED
|
@@ -50,7 +50,7 @@ interface SofyaTypographyScale {
|
|
|
50
50
|
display: string;
|
|
51
51
|
mono: string;
|
|
52
52
|
}
|
|
53
|
-
declare const sofyaTextStyleNames: readonly ["h1", "h2", "h3", "h4", "body", "tiny"];
|
|
53
|
+
declare const sofyaTextStyleNames: readonly ["h1", "h2", "h3", "h4", "h5", "body", "tiny"];
|
|
54
54
|
type SofyaTextStyleName = (typeof sofyaTextStyleNames)[number];
|
|
55
55
|
interface SofyaTextStyle {
|
|
56
56
|
fontFamily: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -50,7 +50,7 @@ interface SofyaTypographyScale {
|
|
|
50
50
|
display: string;
|
|
51
51
|
mono: string;
|
|
52
52
|
}
|
|
53
|
-
declare const sofyaTextStyleNames: readonly ["h1", "h2", "h3", "h4", "body", "tiny"];
|
|
53
|
+
declare const sofyaTextStyleNames: readonly ["h1", "h2", "h3", "h4", "h5", "body", "tiny"];
|
|
54
54
|
type SofyaTextStyleName = (typeof sofyaTextStyleNames)[number];
|
|
55
55
|
interface SofyaTextStyle {
|
|
56
56
|
fontFamily: string;
|
package/dist/index.js
CHANGED
|
@@ -4,6 +4,7 @@ var sofyaTextStyleNames = [
|
|
|
4
4
|
"h2",
|
|
5
5
|
"h3",
|
|
6
6
|
"h4",
|
|
7
|
+
"h5",
|
|
7
8
|
"body",
|
|
8
9
|
"tiny"
|
|
9
10
|
];
|
|
@@ -15,42 +16,42 @@ var sharedTypography = {
|
|
|
15
16
|
};
|
|
16
17
|
var sofyaBrandPalette = {
|
|
17
18
|
neutrals: {
|
|
18
|
-
50: "#
|
|
19
|
+
50: "#F8FAFE",
|
|
19
20
|
100: "#FFFFFF",
|
|
20
|
-
200: "#
|
|
21
|
-
600: "#
|
|
22
|
-
700: "#
|
|
23
|
-
800: "#
|
|
24
|
-
900: "#
|
|
21
|
+
200: "#E3EAFF",
|
|
22
|
+
600: "#D9E2FA",
|
|
23
|
+
700: "#7D87A8",
|
|
24
|
+
800: "#4B5576",
|
|
25
|
+
900: "#00022A"
|
|
25
26
|
},
|
|
26
27
|
tags: {
|
|
27
|
-
navy: "#
|
|
28
|
-
blue: "#
|
|
28
|
+
navy: "#4B5576",
|
|
29
|
+
blue: "#365FD7",
|
|
29
30
|
violet: "#7B5DC1",
|
|
30
31
|
magenta: "#B55CAF",
|
|
31
|
-
red: "#
|
|
32
|
-
brick: "#
|
|
33
|
-
sand: "#
|
|
34
|
-
green: "#
|
|
32
|
+
red: "#D74F36",
|
|
33
|
+
brick: "#EFB9AF",
|
|
34
|
+
sand: "#F4EBE7",
|
|
35
|
+
green: "#36D774"
|
|
35
36
|
},
|
|
36
37
|
agent: {
|
|
37
|
-
pink: "#
|
|
38
|
-
sky: "#
|
|
39
|
-
lavender: "#
|
|
40
|
-
mint: "#
|
|
41
|
-
green: "#
|
|
38
|
+
pink: "#F4EBE7",
|
|
39
|
+
sky: "#D9E2FA",
|
|
40
|
+
lavender: "#E3EAFF",
|
|
41
|
+
mint: "#E3F9EE",
|
|
42
|
+
green: "#C5F3DA"
|
|
42
43
|
},
|
|
43
44
|
gradients: {
|
|
44
45
|
brand: {
|
|
45
46
|
angle: "135deg",
|
|
46
|
-
from: "#
|
|
47
|
-
via: "#
|
|
48
|
-
to: "#
|
|
47
|
+
from: "#B55CAF",
|
|
48
|
+
via: "#7B5DC1",
|
|
49
|
+
to: "#365FD7"
|
|
49
50
|
},
|
|
50
51
|
ocean: {
|
|
51
|
-
angle: "
|
|
52
|
-
from: "#
|
|
53
|
-
to: "#
|
|
52
|
+
angle: "135deg",
|
|
53
|
+
from: "#35D3C7",
|
|
54
|
+
to: "#365FD7"
|
|
54
55
|
}
|
|
55
56
|
}
|
|
56
57
|
};
|
|
@@ -135,12 +136,12 @@ var sofyaSemanticColorHex = {
|
|
|
135
136
|
foreground: sofyaBrandPalette.neutrals[800],
|
|
136
137
|
card: sofyaBrandPalette.neutrals[100],
|
|
137
138
|
cardForeground: sofyaBrandPalette.neutrals[800],
|
|
138
|
-
popover: sofyaBrandPalette.neutrals[
|
|
139
|
+
popover: sofyaBrandPalette.neutrals[50],
|
|
139
140
|
popoverForeground: sofyaBrandPalette.neutrals[800],
|
|
140
141
|
primary: sofyaBrandPalette.tags.blue,
|
|
141
142
|
primaryForeground: sofyaBrandPalette.neutrals[100],
|
|
142
|
-
secondary:
|
|
143
|
-
secondaryForeground: sofyaBrandPalette.neutrals[
|
|
143
|
+
secondary: "#6B86D6",
|
|
144
|
+
secondaryForeground: sofyaBrandPalette.neutrals[100],
|
|
144
145
|
muted: sofyaBrandPalette.neutrals[200],
|
|
145
146
|
mutedForeground: sofyaBrandPalette.neutrals[700],
|
|
146
147
|
accent: sofyaBrandPalette.tags.magenta,
|
|
@@ -149,15 +150,15 @@ var sofyaSemanticColorHex = {
|
|
|
149
150
|
destructiveForeground: sofyaBrandPalette.neutrals[100],
|
|
150
151
|
success: sofyaBrandPalette.tags.green,
|
|
151
152
|
successForeground: sofyaBrandPalette.neutrals[900],
|
|
152
|
-
warning: sofyaBrandPalette.tags.
|
|
153
|
-
warningForeground: sofyaBrandPalette.neutrals[
|
|
153
|
+
warning: sofyaBrandPalette.tags.red,
|
|
154
|
+
warningForeground: sofyaBrandPalette.neutrals[100],
|
|
154
155
|
border: sofyaBrandPalette.neutrals[600],
|
|
155
156
|
input: sofyaBrandPalette.neutrals[600],
|
|
156
157
|
ring: sofyaBrandPalette.tags.blue,
|
|
157
158
|
focus: sofyaBrandPalette.tags.blue,
|
|
158
159
|
subtle: sofyaBrandPalette.neutrals[600],
|
|
159
|
-
buttonGradientFrom: sofyaBrandPalette.
|
|
160
|
-
buttonGradientTo: sofyaBrandPalette.
|
|
160
|
+
buttonGradientFrom: sofyaBrandPalette.tags.blue,
|
|
161
|
+
buttonGradientTo: sofyaBrandPalette.tags.magenta
|
|
161
162
|
};
|
|
162
163
|
function createColorScale(hexColors) {
|
|
163
164
|
return {
|
|
@@ -203,20 +204,27 @@ function createTextStyleScale(typography) {
|
|
|
203
204
|
letterSpacing: "0"
|
|
204
205
|
},
|
|
205
206
|
h2: {
|
|
207
|
+
fontFamily: typography.display,
|
|
208
|
+
fontSize: "42px",
|
|
209
|
+
fontWeight: "500",
|
|
210
|
+
lineHeight: "48px",
|
|
211
|
+
letterSpacing: "0"
|
|
212
|
+
},
|
|
213
|
+
h3: {
|
|
206
214
|
fontFamily: typography.display,
|
|
207
215
|
fontSize: "30px",
|
|
208
216
|
fontWeight: "500",
|
|
209
217
|
lineHeight: "1",
|
|
210
218
|
letterSpacing: "0"
|
|
211
219
|
},
|
|
212
|
-
|
|
220
|
+
h4: {
|
|
213
221
|
fontFamily: typography.display,
|
|
214
222
|
fontSize: "24px",
|
|
215
223
|
fontWeight: "600",
|
|
216
224
|
lineHeight: "30px",
|
|
217
225
|
letterSpacing: "0"
|
|
218
226
|
},
|
|
219
|
-
|
|
227
|
+
h5: {
|
|
220
228
|
fontFamily: typography.display,
|
|
221
229
|
fontSize: "16px",
|
|
222
230
|
fontWeight: "500",
|
|
@@ -486,36 +494,9 @@ function resolveTheme(preset = defaultTheme, overrides) {
|
|
|
486
494
|
const baseTheme = typeof preset === "string" ? themePresets[preset] : preset;
|
|
487
495
|
return mergeTheme(baseTheme, overrides);
|
|
488
496
|
}
|
|
489
|
-
function
|
|
497
|
+
function themeDecorativeCssVariables(theme) {
|
|
490
498
|
return {
|
|
491
|
-
"--sofya-
|
|
492
|
-
"--sofya-neutral-100": `hsl(${theme.colors.card})`,
|
|
493
|
-
"--sofya-neutral-200": `hsl(${theme.colors.secondary})`,
|
|
494
|
-
"--sofya-neutral-600": `hsl(${theme.colors.border})`,
|
|
495
|
-
"--sofya-neutral-700": `hsl(${theme.colors.mutedForeground})`,
|
|
496
|
-
"--sofya-neutral-800": `hsl(${theme.colors.foreground})`,
|
|
497
|
-
"--sofya-neutral-900": `hsl(${theme.colors.foreground})`,
|
|
498
|
-
"--sofya-tag-navy": `hsl(${theme.colors.foreground})`,
|
|
499
|
-
"--sofya-tag-blue": `hsl(${theme.colors.primary})`,
|
|
500
|
-
"--sofya-tag-violet": `hsl(${theme.colors.accent})`,
|
|
501
|
-
"--sofya-tag-magenta": `hsl(${theme.colors.accent})`,
|
|
502
|
-
"--sofya-tag-red": `hsl(${theme.colors.destructive})`,
|
|
503
|
-
"--sofya-tag-brick": `hsl(${theme.colors.destructive} / 0.92)`,
|
|
504
|
-
"--sofya-tag-sand": `hsl(${theme.colors.warning})`,
|
|
505
|
-
"--sofya-tag-green": `hsl(${theme.colors.success})`,
|
|
506
|
-
"--sofya-agent-pink": `hsl(${theme.colors.accent} / 0.14)`,
|
|
507
|
-
"--sofya-agent-sky": `hsl(${theme.colors.primary} / 0.12)`,
|
|
508
|
-
"--sofya-agent-lavender": `hsl(${theme.colors.secondary})`,
|
|
509
|
-
"--sofya-agent-mint": `hsl(${theme.colors.success} / 0.12)`,
|
|
510
|
-
"--sofya-agent-green": `hsl(${theme.colors.success} / 0.16)`,
|
|
511
|
-
"--sofya-gradient-brand-from": `hsl(${theme.colors.buttonGradientFrom})`,
|
|
512
|
-
"--sofya-gradient-brand-via": `hsl(${theme.colors.accent})`,
|
|
513
|
-
"--sofya-gradient-brand-to": `hsl(${theme.colors.buttonGradientTo})`,
|
|
514
|
-
"--sofya-gradient-brand": `linear-gradient(135deg, hsl(${theme.colors.buttonGradientFrom}) 0%, hsl(${theme.colors.accent}) 50%, hsl(${theme.colors.buttonGradientTo}) 100%)`,
|
|
515
|
-
"--sofya-gradient-ocean-from": `hsl(${theme.colors.primary})`,
|
|
516
|
-
"--sofya-gradient-ocean-to": `hsl(${theme.colors.accent})`,
|
|
517
|
-
"--sofya-gradient-ocean": `linear-gradient(90deg, hsl(${theme.colors.primary}) 0%, hsl(${theme.colors.accent}) 100%)`,
|
|
518
|
-
"--sofya-avatar-background": `hsl(${theme.colors.secondary})`,
|
|
499
|
+
"--sofya-avatar-background": `hsl(${theme.colors.muted})`,
|
|
519
500
|
"--sofya-avatar-foreground": `hsl(${theme.colors.mutedForeground})`,
|
|
520
501
|
"--sofya-logo-primary": `hsl(${theme.colors.primary})`,
|
|
521
502
|
"--sofya-logo-accent": `hsl(${theme.colors.accent})`,
|
|
@@ -533,7 +514,7 @@ function themeToCssVariables(theme) {
|
|
|
533
514
|
);
|
|
534
515
|
return {
|
|
535
516
|
...brandPaletteToCssVariables(),
|
|
536
|
-
...
|
|
517
|
+
...themeDecorativeCssVariables(theme),
|
|
537
518
|
"--sofya-background": theme.colors.background,
|
|
538
519
|
"--sofya-foreground": theme.colors.foreground,
|
|
539
520
|
"--sofya-card": theme.colors.card,
|
|
@@ -595,6 +576,11 @@ function themeToCssVariables(theme) {
|
|
|
595
576
|
"--sofya-text-h4-font-weight": textStyles.h4.fontWeight,
|
|
596
577
|
"--sofya-text-h4-line-height": textStyles.h4.lineHeight,
|
|
597
578
|
"--sofya-text-h4-letter-spacing": textStyles.h4.letterSpacing,
|
|
579
|
+
"--sofya-text-h5-font-family": textStyles.h5.fontFamily,
|
|
580
|
+
"--sofya-text-h5-font-size": textStyles.h5.fontSize,
|
|
581
|
+
"--sofya-text-h5-font-weight": textStyles.h5.fontWeight,
|
|
582
|
+
"--sofya-text-h5-line-height": textStyles.h5.lineHeight,
|
|
583
|
+
"--sofya-text-h5-letter-spacing": textStyles.h5.letterSpacing,
|
|
598
584
|
"--sofya-text-body-font-family": textStyles.body.fontFamily,
|
|
599
585
|
"--sofya-text-body-font-size": textStyles.body.fontSize,
|
|
600
586
|
"--sofya-text-body-font-weight": textStyles.body.fontWeight,
|