@sofya-ds/tokens 0.1.0 → 1.1.0

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 +70 -8
  2. package/dist/index.js +70 -8
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -39,7 +39,14 @@ __export(index_exports, {
39
39
  themeToCssVariables: () => themeToCssVariables
40
40
  });
41
41
  module.exports = __toCommonJS(index_exports);
42
- var sofyaTextStyleNames = ["h1", "h2", "h3", "h4", "body", "tiny"];
42
+ var sofyaTextStyleNames = [
43
+ "h1",
44
+ "h2",
45
+ "h3",
46
+ "h4",
47
+ "body",
48
+ "tiny"
49
+ ];
43
50
  var sofyaSurfaceNames = ["card", "panel", "focus"];
44
51
  var sharedTypography = {
45
52
  sans: '"Schibsted Grotesk", "Avenir Next", "Segoe UI", sans-serif',
@@ -124,7 +131,9 @@ function hexToHslChannels(hex) {
124
131
  hue = Math.round((hue * 60 + 360) % 360);
125
132
  const lightness = (max + min) / 2;
126
133
  const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
127
- return `${hue} ${Math.round(saturation * 100)}% ${Math.round(lightness * 100)}%`;
134
+ return `${hue} ${Math.round(saturation * 100)}% ${Math.round(
135
+ lightness * 100
136
+ )}%`;
128
137
  }
129
138
  function gradientToCss(token) {
130
139
  const stops = token.via ? `${token.from} 0%, ${token.via} 50%, ${token.to} 100%` : `${token.from} 0%, ${token.to} 100%`;
@@ -326,10 +335,18 @@ var sofyaRadii = {
326
335
  full: "9999px"
327
336
  };
328
337
  var sofyaShadows = {
329
- sm: `0 10px 30px -18px hsl(${hexToHslChannels(sofyaBrandPalette.tags.violet)} / 0.18)`,
330
- md: `0 18px 56px -26px hsl(${hexToHslChannels(sofyaBrandPalette.tags.violet)} / 0.38)`,
331
- lg: `0 24px 80px -38px hsl(${hexToHslChannels(sofyaBrandPalette.tags.violet)} / 0.3)`,
332
- xl: `0 32px 100px -48px hsl(${hexToHslChannels(sofyaBrandPalette.tags.violet)} / 0.36)`,
338
+ sm: `0 10px 30px -18px hsl(${hexToHslChannels(
339
+ sofyaBrandPalette.tags.violet
340
+ )} / 0.18)`,
341
+ md: `0 18px 56px -26px hsl(${hexToHslChannels(
342
+ sofyaBrandPalette.tags.violet
343
+ )} / 0.38)`,
344
+ lg: `0 24px 80px -38px hsl(${hexToHslChannels(
345
+ sofyaBrandPalette.tags.violet
346
+ )} / 0.3)`,
347
+ xl: `0 32px 100px -48px hsl(${hexToHslChannels(
348
+ sofyaBrandPalette.tags.violet
349
+ )} / 0.36)`,
333
350
  focus: createFocusShadow(sofyaColors.focus)
334
351
  };
335
352
  var oceanColors = {
@@ -487,8 +504,14 @@ function mergeTheme(baseTheme, overrides) {
487
504
  ...baseTheme.typography,
488
505
  ...overrides.typography
489
506
  };
490
- const textStyles = mergeTextStyleScale(createTextStyleScale(typography), overrides.textStyles);
491
- const surfaces = mergeSurfaceScale(createSurfaceScale(colors, radii, shadows), overrides.surfaces);
507
+ const textStyles = mergeTextStyleScale(
508
+ createTextStyleScale(typography),
509
+ overrides.textStyles
510
+ );
511
+ const surfaces = mergeSurfaceScale(
512
+ createSurfaceScale(colors, radii, shadows),
513
+ overrides.surfaces
514
+ );
492
515
  return {
493
516
  name: overrides.name ?? baseTheme.name,
494
517
  colors,
@@ -503,6 +526,44 @@ function resolveTheme(preset = defaultTheme, overrides) {
503
526
  const baseTheme = typeof preset === "string" ? themePresets[preset] : preset;
504
527
  return mergeTheme(baseTheme, overrides);
505
528
  }
529
+ function themeAliasToCssVariables(theme) {
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})`,
559
+ "--sofya-avatar-foreground": `hsl(${theme.colors.mutedForeground})`,
560
+ "--sofya-logo-primary": `hsl(${theme.colors.primary})`,
561
+ "--sofya-logo-accent": `hsl(${theme.colors.accent})`,
562
+ "--sofya-logo-highlight": `hsl(${theme.colors.success})`,
563
+ "--sofya-logo-ink": `hsl(${theme.colors.foreground})`,
564
+ "--sofya-logo-soft": `hsl(${theme.colors.primary} / 0.45)`
565
+ };
566
+ }
506
567
  function themeToCssVariables(theme) {
507
568
  const textStyles = Object.fromEntries(
508
569
  sofyaTextStyleNames.map((name) => [name, resolveTextStyle(name, theme)])
@@ -512,6 +573,7 @@ function themeToCssVariables(theme) {
512
573
  );
513
574
  return {
514
575
  ...brandPaletteToCssVariables(),
576
+ ...themeAliasToCssVariables(theme),
515
577
  "--sofya-background": theme.colors.background,
516
578
  "--sofya-foreground": theme.colors.foreground,
517
579
  "--sofya-card": theme.colors.card,
package/dist/index.js CHANGED
@@ -1,5 +1,12 @@
1
1
  // src/index.ts
2
- var sofyaTextStyleNames = ["h1", "h2", "h3", "h4", "body", "tiny"];
2
+ var sofyaTextStyleNames = [
3
+ "h1",
4
+ "h2",
5
+ "h3",
6
+ "h4",
7
+ "body",
8
+ "tiny"
9
+ ];
3
10
  var sofyaSurfaceNames = ["card", "panel", "focus"];
4
11
  var sharedTypography = {
5
12
  sans: '"Schibsted Grotesk", "Avenir Next", "Segoe UI", sans-serif',
@@ -84,7 +91,9 @@ function hexToHslChannels(hex) {
84
91
  hue = Math.round((hue * 60 + 360) % 360);
85
92
  const lightness = (max + min) / 2;
86
93
  const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
87
- return `${hue} ${Math.round(saturation * 100)}% ${Math.round(lightness * 100)}%`;
94
+ return `${hue} ${Math.round(saturation * 100)}% ${Math.round(
95
+ lightness * 100
96
+ )}%`;
88
97
  }
89
98
  function gradientToCss(token) {
90
99
  const stops = token.via ? `${token.from} 0%, ${token.via} 50%, ${token.to} 100%` : `${token.from} 0%, ${token.to} 100%`;
@@ -286,10 +295,18 @@ var sofyaRadii = {
286
295
  full: "9999px"
287
296
  };
288
297
  var sofyaShadows = {
289
- sm: `0 10px 30px -18px hsl(${hexToHslChannels(sofyaBrandPalette.tags.violet)} / 0.18)`,
290
- md: `0 18px 56px -26px hsl(${hexToHslChannels(sofyaBrandPalette.tags.violet)} / 0.38)`,
291
- lg: `0 24px 80px -38px hsl(${hexToHslChannels(sofyaBrandPalette.tags.violet)} / 0.3)`,
292
- xl: `0 32px 100px -48px hsl(${hexToHslChannels(sofyaBrandPalette.tags.violet)} / 0.36)`,
298
+ sm: `0 10px 30px -18px hsl(${hexToHslChannels(
299
+ sofyaBrandPalette.tags.violet
300
+ )} / 0.18)`,
301
+ md: `0 18px 56px -26px hsl(${hexToHslChannels(
302
+ sofyaBrandPalette.tags.violet
303
+ )} / 0.38)`,
304
+ lg: `0 24px 80px -38px hsl(${hexToHslChannels(
305
+ sofyaBrandPalette.tags.violet
306
+ )} / 0.3)`,
307
+ xl: `0 32px 100px -48px hsl(${hexToHslChannels(
308
+ sofyaBrandPalette.tags.violet
309
+ )} / 0.36)`,
293
310
  focus: createFocusShadow(sofyaColors.focus)
294
311
  };
295
312
  var oceanColors = {
@@ -447,8 +464,14 @@ function mergeTheme(baseTheme, overrides) {
447
464
  ...baseTheme.typography,
448
465
  ...overrides.typography
449
466
  };
450
- const textStyles = mergeTextStyleScale(createTextStyleScale(typography), overrides.textStyles);
451
- const surfaces = mergeSurfaceScale(createSurfaceScale(colors, radii, shadows), overrides.surfaces);
467
+ const textStyles = mergeTextStyleScale(
468
+ createTextStyleScale(typography),
469
+ overrides.textStyles
470
+ );
471
+ const surfaces = mergeSurfaceScale(
472
+ createSurfaceScale(colors, radii, shadows),
473
+ overrides.surfaces
474
+ );
452
475
  return {
453
476
  name: overrides.name ?? baseTheme.name,
454
477
  colors,
@@ -463,6 +486,44 @@ function resolveTheme(preset = defaultTheme, overrides) {
463
486
  const baseTheme = typeof preset === "string" ? themePresets[preset] : preset;
464
487
  return mergeTheme(baseTheme, overrides);
465
488
  }
489
+ function themeAliasToCssVariables(theme) {
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})`,
519
+ "--sofya-avatar-foreground": `hsl(${theme.colors.mutedForeground})`,
520
+ "--sofya-logo-primary": `hsl(${theme.colors.primary})`,
521
+ "--sofya-logo-accent": `hsl(${theme.colors.accent})`,
522
+ "--sofya-logo-highlight": `hsl(${theme.colors.success})`,
523
+ "--sofya-logo-ink": `hsl(${theme.colors.foreground})`,
524
+ "--sofya-logo-soft": `hsl(${theme.colors.primary} / 0.45)`
525
+ };
526
+ }
466
527
  function themeToCssVariables(theme) {
467
528
  const textStyles = Object.fromEntries(
468
529
  sofyaTextStyleNames.map((name) => [name, resolveTextStyle(name, theme)])
@@ -472,6 +533,7 @@ function themeToCssVariables(theme) {
472
533
  );
473
534
  return {
474
535
  ...brandPaletteToCssVariables(),
536
+ ...themeAliasToCssVariables(theme),
475
537
  "--sofya-background": theme.colors.background,
476
538
  "--sofya-foreground": theme.colors.foreground,
477
539
  "--sofya-card": theme.colors.card,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sofya-ds/tokens",
3
- "version": "0.1.0",
3
+ "version": "1.1.0",
4
4
  "description": "Official Sofya design tokens, theme presets and semantic color helpers.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",