@sofya-ds/tokens 1.1.0 → 1.1.1

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 (3) hide show
  1. package/dist/index.cjs +33 -60
  2. package/dist/index.js +33 -60
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -55,42 +55,42 @@ var sharedTypography = {
55
55
  };
56
56
  var sofyaBrandPalette = {
57
57
  neutrals: {
58
- 50: "#F2EFF9",
58
+ 50: "#F8FAFE",
59
59
  100: "#FFFFFF",
60
- 200: "#F6F5F8",
61
- 600: "#CCCCCC",
62
- 700: "#8B8A8C",
63
- 800: "#202021",
64
- 900: "#000000"
60
+ 200: "#E3EAFF",
61
+ 600: "#D9E2FA",
62
+ 700: "#7D87A8",
63
+ 800: "#4B5576",
64
+ 900: "#00022A"
65
65
  },
66
66
  tags: {
67
- navy: "#222B4C",
68
- blue: "#1976D2",
67
+ navy: "#4B5576",
68
+ blue: "#365FD7",
69
69
  violet: "#7B5DC1",
70
70
  magenta: "#B55CAF",
71
- red: "#C83A32",
72
- brick: "#B55C5C",
73
- sand: "#B5905C",
74
- green: "#1CCC6B"
71
+ red: "#D74F36",
72
+ brick: "#EFB9AF",
73
+ sand: "#F4EBE7",
74
+ green: "#36D774"
75
75
  },
76
76
  agent: {
77
- pink: "#FFD7F7",
78
- sky: "#E7F5FB",
79
- lavender: "#F0E8ED",
80
- mint: "#E8F5F0",
81
- green: "#E2F5E5"
77
+ pink: "#F4EBE7",
78
+ sky: "#D9E2FA",
79
+ lavender: "#E3EAFF",
80
+ mint: "#E3F9EE",
81
+ green: "#C5F3DA"
82
82
  },
83
83
  gradients: {
84
84
  brand: {
85
85
  angle: "135deg",
86
- from: "#C075BF",
87
- via: "#8F74CC",
88
- to: "#5B76D9"
86
+ from: "#B55CAF",
87
+ via: "#7B5DC1",
88
+ to: "#365FD7"
89
89
  },
90
90
  ocean: {
91
- angle: "90deg",
92
- from: "#5BADA8",
93
- to: "#396DC9"
91
+ angle: "135deg",
92
+ from: "#35D3C7",
93
+ to: "#365FD7"
94
94
  }
95
95
  }
96
96
  };
@@ -175,12 +175,12 @@ var sofyaSemanticColorHex = {
175
175
  foreground: sofyaBrandPalette.neutrals[800],
176
176
  card: sofyaBrandPalette.neutrals[100],
177
177
  cardForeground: sofyaBrandPalette.neutrals[800],
178
- popover: sofyaBrandPalette.neutrals[100],
178
+ popover: sofyaBrandPalette.neutrals[50],
179
179
  popoverForeground: sofyaBrandPalette.neutrals[800],
180
180
  primary: sofyaBrandPalette.tags.blue,
181
181
  primaryForeground: sofyaBrandPalette.neutrals[100],
182
- secondary: sofyaBrandPalette.neutrals[200],
183
- secondaryForeground: sofyaBrandPalette.neutrals[800],
182
+ secondary: "#6B86D6",
183
+ secondaryForeground: sofyaBrandPalette.neutrals[100],
184
184
  muted: sofyaBrandPalette.neutrals[200],
185
185
  mutedForeground: sofyaBrandPalette.neutrals[700],
186
186
  accent: sofyaBrandPalette.tags.magenta,
@@ -189,15 +189,15 @@ var sofyaSemanticColorHex = {
189
189
  destructiveForeground: sofyaBrandPalette.neutrals[100],
190
190
  success: sofyaBrandPalette.tags.green,
191
191
  successForeground: sofyaBrandPalette.neutrals[900],
192
- warning: sofyaBrandPalette.tags.sand,
193
- warningForeground: sofyaBrandPalette.neutrals[900],
192
+ warning: sofyaBrandPalette.tags.red,
193
+ warningForeground: sofyaBrandPalette.neutrals[100],
194
194
  border: sofyaBrandPalette.neutrals[600],
195
195
  input: sofyaBrandPalette.neutrals[600],
196
196
  ring: sofyaBrandPalette.tags.blue,
197
197
  focus: sofyaBrandPalette.tags.blue,
198
198
  subtle: sofyaBrandPalette.neutrals[600],
199
- buttonGradientFrom: sofyaBrandPalette.gradients.brand.from,
200
- buttonGradientTo: sofyaBrandPalette.gradients.brand.to
199
+ buttonGradientFrom: sofyaBrandPalette.tags.blue,
200
+ buttonGradientTo: sofyaBrandPalette.tags.magenta
201
201
  };
202
202
  function createColorScale(hexColors) {
203
203
  return {
@@ -526,36 +526,9 @@ function resolveTheme(preset = defaultTheme, overrides) {
526
526
  const baseTheme = typeof preset === "string" ? themePresets[preset] : preset;
527
527
  return mergeTheme(baseTheme, overrides);
528
528
  }
529
- function themeAliasToCssVariables(theme) {
529
+ function themeDecorativeCssVariables(theme) {
530
530
  return {
531
- "--sofya-neutral-50": `hsl(${theme.colors.background})`,
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})`,
531
+ "--sofya-avatar-background": `hsl(${theme.colors.muted})`,
559
532
  "--sofya-avatar-foreground": `hsl(${theme.colors.mutedForeground})`,
560
533
  "--sofya-logo-primary": `hsl(${theme.colors.primary})`,
561
534
  "--sofya-logo-accent": `hsl(${theme.colors.accent})`,
@@ -573,7 +546,7 @@ function themeToCssVariables(theme) {
573
546
  );
574
547
  return {
575
548
  ...brandPaletteToCssVariables(),
576
- ...themeAliasToCssVariables(theme),
549
+ ...themeDecorativeCssVariables(theme),
577
550
  "--sofya-background": theme.colors.background,
578
551
  "--sofya-foreground": theme.colors.foreground,
579
552
  "--sofya-card": theme.colors.card,
package/dist/index.js CHANGED
@@ -15,42 +15,42 @@ var sharedTypography = {
15
15
  };
16
16
  var sofyaBrandPalette = {
17
17
  neutrals: {
18
- 50: "#F2EFF9",
18
+ 50: "#F8FAFE",
19
19
  100: "#FFFFFF",
20
- 200: "#F6F5F8",
21
- 600: "#CCCCCC",
22
- 700: "#8B8A8C",
23
- 800: "#202021",
24
- 900: "#000000"
20
+ 200: "#E3EAFF",
21
+ 600: "#D9E2FA",
22
+ 700: "#7D87A8",
23
+ 800: "#4B5576",
24
+ 900: "#00022A"
25
25
  },
26
26
  tags: {
27
- navy: "#222B4C",
28
- blue: "#1976D2",
27
+ navy: "#4B5576",
28
+ blue: "#365FD7",
29
29
  violet: "#7B5DC1",
30
30
  magenta: "#B55CAF",
31
- red: "#C83A32",
32
- brick: "#B55C5C",
33
- sand: "#B5905C",
34
- green: "#1CCC6B"
31
+ red: "#D74F36",
32
+ brick: "#EFB9AF",
33
+ sand: "#F4EBE7",
34
+ green: "#36D774"
35
35
  },
36
36
  agent: {
37
- pink: "#FFD7F7",
38
- sky: "#E7F5FB",
39
- lavender: "#F0E8ED",
40
- mint: "#E8F5F0",
41
- green: "#E2F5E5"
37
+ pink: "#F4EBE7",
38
+ sky: "#D9E2FA",
39
+ lavender: "#E3EAFF",
40
+ mint: "#E3F9EE",
41
+ green: "#C5F3DA"
42
42
  },
43
43
  gradients: {
44
44
  brand: {
45
45
  angle: "135deg",
46
- from: "#C075BF",
47
- via: "#8F74CC",
48
- to: "#5B76D9"
46
+ from: "#B55CAF",
47
+ via: "#7B5DC1",
48
+ to: "#365FD7"
49
49
  },
50
50
  ocean: {
51
- angle: "90deg",
52
- from: "#5BADA8",
53
- to: "#396DC9"
51
+ angle: "135deg",
52
+ from: "#35D3C7",
53
+ to: "#365FD7"
54
54
  }
55
55
  }
56
56
  };
@@ -135,12 +135,12 @@ var sofyaSemanticColorHex = {
135
135
  foreground: sofyaBrandPalette.neutrals[800],
136
136
  card: sofyaBrandPalette.neutrals[100],
137
137
  cardForeground: sofyaBrandPalette.neutrals[800],
138
- popover: sofyaBrandPalette.neutrals[100],
138
+ popover: sofyaBrandPalette.neutrals[50],
139
139
  popoverForeground: sofyaBrandPalette.neutrals[800],
140
140
  primary: sofyaBrandPalette.tags.blue,
141
141
  primaryForeground: sofyaBrandPalette.neutrals[100],
142
- secondary: sofyaBrandPalette.neutrals[200],
143
- secondaryForeground: sofyaBrandPalette.neutrals[800],
142
+ secondary: "#6B86D6",
143
+ secondaryForeground: sofyaBrandPalette.neutrals[100],
144
144
  muted: sofyaBrandPalette.neutrals[200],
145
145
  mutedForeground: sofyaBrandPalette.neutrals[700],
146
146
  accent: sofyaBrandPalette.tags.magenta,
@@ -149,15 +149,15 @@ var sofyaSemanticColorHex = {
149
149
  destructiveForeground: sofyaBrandPalette.neutrals[100],
150
150
  success: sofyaBrandPalette.tags.green,
151
151
  successForeground: sofyaBrandPalette.neutrals[900],
152
- warning: sofyaBrandPalette.tags.sand,
153
- warningForeground: sofyaBrandPalette.neutrals[900],
152
+ warning: sofyaBrandPalette.tags.red,
153
+ warningForeground: sofyaBrandPalette.neutrals[100],
154
154
  border: sofyaBrandPalette.neutrals[600],
155
155
  input: sofyaBrandPalette.neutrals[600],
156
156
  ring: sofyaBrandPalette.tags.blue,
157
157
  focus: sofyaBrandPalette.tags.blue,
158
158
  subtle: sofyaBrandPalette.neutrals[600],
159
- buttonGradientFrom: sofyaBrandPalette.gradients.brand.from,
160
- buttonGradientTo: sofyaBrandPalette.gradients.brand.to
159
+ buttonGradientFrom: sofyaBrandPalette.tags.blue,
160
+ buttonGradientTo: sofyaBrandPalette.tags.magenta
161
161
  };
162
162
  function createColorScale(hexColors) {
163
163
  return {
@@ -486,36 +486,9 @@ function resolveTheme(preset = defaultTheme, overrides) {
486
486
  const baseTheme = typeof preset === "string" ? themePresets[preset] : preset;
487
487
  return mergeTheme(baseTheme, overrides);
488
488
  }
489
- function themeAliasToCssVariables(theme) {
489
+ function themeDecorativeCssVariables(theme) {
490
490
  return {
491
- "--sofya-neutral-50": `hsl(${theme.colors.background})`,
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})`,
491
+ "--sofya-avatar-background": `hsl(${theme.colors.muted})`,
519
492
  "--sofya-avatar-foreground": `hsl(${theme.colors.mutedForeground})`,
520
493
  "--sofya-logo-primary": `hsl(${theme.colors.primary})`,
521
494
  "--sofya-logo-accent": `hsl(${theme.colors.accent})`,
@@ -533,7 +506,7 @@ function themeToCssVariables(theme) {
533
506
  );
534
507
  return {
535
508
  ...brandPaletteToCssVariables(),
536
- ...themeAliasToCssVariables(theme),
509
+ ...themeDecorativeCssVariables(theme),
537
510
  "--sofya-background": theme.colors.background,
538
511
  "--sofya-foreground": theme.colors.foreground,
539
512
  "--sofya-card": theme.colors.card,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sofya-ds/tokens",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "description": "Official Sofya design tokens, theme presets and semantic color helpers.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",