@sofya-ds/tokens 1.7.0 → 1.8.0

package/dist/index.js

@@ -1,15 +1,93 @@
 // src/index.ts
 var sofyaTextStyleNames = [
+  "display-xl",
+  "display-lg",
+  "heading-xl",
+  "heading-lg",
+  "heading-md",
   "h1",
   "h2",
   "h3",
   "h4",
   "h5",
+  "encounter-title",
+  "title-md",
+  "title-sm",
+  "body-lg",
+  "body-md",
+  "body-sm",
   "body",
+  "label-md",
+  "section-label",
+  "eyebrow-md",
+  "overline-md",
+  "sidebar-title",
+  "sidebar-title-regular",
+  "sidebar-title-strong",
+  "sidebar-label",
+  "sidebar-label-strong",
+  "sidebar-body",
+  "sidebar-tag",
+  "encounter-chip",
+  "encounter-history",
+  "caption",
+  "eyebrow",
   "tiny",
-  "extra-tiny"
+  "extra-tiny",
+  "code-sm"
 ];
-var sofyaSurfaceNames = ["card", "panel", "focus"];
+var sofyaSurfaceNames = [
+  "appBackground",
+  "auth",
+  "card",
+  "dataTable",
+  "dialog",
+  "documentCard",
+  "documentCardSelected",
+  "focus",
+  "mainContent",
+  "panel",
+  "proseDialog",
+  "rightPanel",
+  "sidebar"
+];
+var sofyaSpaceNames = [
+  "0",
+  "0-5",
+  "1",
+  "1-5",
+  "2",
+  "2-5",
+  "3",
+  "4",
+  "5",
+  "6",
+  "8",
+  "10",
+  "12",
+  "16"
+];
+var sofyaGapNames = [
+  "tight",
+  "compact",
+  "default",
+  "comfortable",
+  "section",
+  "page"
+];
+var sofyaRhythmNames = [
+  "labelToControl",
+  "controlToHelp",
+  "titleToDescription",
+  "titleToBody",
+  "fieldset",
+  "fieldsetCompact",
+  "group",
+  "groupCompact",
+  "paragraphFlow",
+  "sectionContent"
+];
+var sofyaMeasureNames = ["reading", "compact", "wide"];
 var sharedTypography = {
   sans: '"Schibsted Grotesk", "Avenir Next", "Segoe UI", sans-serif',
   display: '"Schibsted Grotesk", "Avenir Next", "Segoe UI", sans-serif',
@@ -197,6 +275,41 @@ function createFocusShadow(color) {
 }
 function createTextStyleScale(typography) {
   return {
+    "display-xl": {
+      fontFamily: typography.display,
+      fontSize: "60px",
+      fontWeight: "400",
+      lineHeight: "64px",
+      letterSpacing: "-0.02em"
+    },
+    "display-lg": {
+      fontFamily: typography.display,
+      fontSize: "48px",
+      fontWeight: "400",
+      lineHeight: "52px",
+      letterSpacing: "-0.02em"
+    },
+    "heading-xl": {
+      fontFamily: typography.display,
+      fontSize: "36px",
+      fontWeight: "500",
+      lineHeight: "40px",
+      letterSpacing: "-0.01em"
+    },
+    "heading-lg": {
+      fontFamily: typography.display,
+      fontSize: "30px",
+      fontWeight: "500",
+      lineHeight: "36px",
+      letterSpacing: "-0.01em"
+    },
+    "heading-md": {
+      fontFamily: typography.display,
+      fontSize: "24px",
+      fontWeight: "600",
+      lineHeight: "30px",
+      letterSpacing: "-0.01em"
+    },
     h1: {
       fontFamily: typography.display,
       fontSize: "48px",
@@ -232,6 +345,48 @@ function createTextStyleScale(typography) {
       lineHeight: "23px",
       letterSpacing: "0"
     },
+    "encounter-title": {
+      fontFamily: typography.display,
+      fontSize: "22px",
+      fontWeight: "500",
+      lineHeight: "28px",
+      letterSpacing: "-0.022px"
+    },
+    "title-md": {
+      fontFamily: typography.display,
+      fontSize: "20px",
+      fontWeight: "500",
+      lineHeight: "28px",
+      letterSpacing: "0"
+    },
+    "title-sm": {
+      fontFamily: typography.display,
+      fontSize: "16px",
+      fontWeight: "500",
+      lineHeight: "24px",
+      letterSpacing: "0"
+    },
+    "body-lg": {
+      fontFamily: typography.sans,
+      fontSize: "18px",
+      fontWeight: "400",
+      lineHeight: "28px",
+      letterSpacing: "0"
+    },
+    "body-md": {
+      fontFamily: typography.sans,
+      fontSize: "16px",
+      fontWeight: "400",
+      lineHeight: "24px",
+      letterSpacing: "0"
+    },
+    "body-sm": {
+      fontFamily: typography.sans,
+      fontSize: "14px",
+      fontWeight: "400",
+      lineHeight: "20px",
+      letterSpacing: "0"
+    },
     body: {
       fontFamily: typography.sans,
       fontSize: "16px",
@@ -239,6 +394,111 @@ function createTextStyleScale(typography) {
       lineHeight: "26px",
       letterSpacing: "0"
     },
+    "label-md": {
+      fontFamily: typography.sans,
+      fontSize: "14px",
+      fontWeight: "500",
+      lineHeight: "20px",
+      letterSpacing: "0"
+    },
+    "section-label": {
+      fontFamily: typography.sans,
+      fontSize: "14px",
+      fontWeight: "600",
+      lineHeight: "18px",
+      letterSpacing: "0"
+    },
+    "eyebrow-md": {
+      fontFamily: typography.sans,
+      fontSize: "14px",
+      fontWeight: "500",
+      lineHeight: "20px",
+      letterSpacing: "0.08em"
+    },
+    "overline-md": {
+      fontFamily: typography.sans,
+      fontSize: "14px",
+      fontWeight: "500",
+      lineHeight: "20px",
+      letterSpacing: "0"
+    },
+    "sidebar-title": {
+      fontFamily: typography.sans,
+      fontSize: "14px",
+      fontWeight: "500",
+      lineHeight: "18px",
+      letterSpacing: "0.014px"
+    },
+    "sidebar-title-regular": {
+      fontFamily: typography.sans,
+      fontSize: "14px",
+      fontWeight: "400",
+      lineHeight: "18px",
+      letterSpacing: "0.014px"
+    },
+    "sidebar-title-strong": {
+      fontFamily: typography.sans,
+      fontSize: "14px",
+      fontWeight: "600",
+      lineHeight: "18px",
+      letterSpacing: "0.014px"
+    },
+    "sidebar-label": {
+      fontFamily: typography.sans,
+      fontSize: "12px",
+      fontWeight: "500",
+      lineHeight: "18px",
+      letterSpacing: "0.36px"
+    },
+    "sidebar-label-strong": {
+      fontFamily: typography.sans,
+      fontSize: "12px",
+      fontWeight: "600",
+      lineHeight: "18px",
+      letterSpacing: "0.36px"
+    },
+    "sidebar-body": {
+      fontFamily: typography.sans,
+      fontSize: "12px",
+      fontWeight: "400",
+      lineHeight: "18px",
+      letterSpacing: "0.012px"
+    },
+    "sidebar-tag": {
+      fontFamily: typography.sans,
+      fontSize: "13px",
+      fontWeight: "500",
+      lineHeight: "20px",
+      letterSpacing: "0.013px"
+    },
+    "encounter-chip": {
+      fontFamily: typography.sans,
+      fontSize: "13px",
+      fontWeight: "500",
+      lineHeight: "20px",
+      letterSpacing: "0"
+    },
+    "encounter-history": {
+      fontFamily: typography.sans,
+      fontSize: "12px",
+      fontWeight: "600",
+      lineHeight: "18px",
+      letterSpacing: "0.012px"
+    },
+    caption: {
+      fontFamily: typography.sans,
+      fontSize: "12px",
+      fontWeight: "400",
+      lineHeight: "16px",
+      letterSpacing: "0"
+    },
+    eyebrow: {
+      fontFamily: typography.sans,
+      fontSize: "12px",
+      fontWeight: "600",
+      lineHeight: "16px",
+      letterSpacing: "0.08em"
+    },
     tiny: {
       fontFamily: typography.sans,
       fontSize: "14px",
@@ -252,11 +512,32 @@ function createTextStyleScale(typography) {
       fontWeight: "400",
       lineHeight: "18px",
       letterSpacing: "0.012px"
+    },
+    "code-sm": {
+      fontFamily: typography.mono,
+      fontSize: "13px",
+      fontWeight: "400",
+      lineHeight: "20px",
+      letterSpacing: "0"
     }
   };
 }
 function createSurfaceScale(colors, radii, shadows) {
   return {
+    appBackground: {
+      background: colors.background,
+      borderColor: colors.background,
+      borderWidth: "0",
+      radius: "0",
+      shadow: "none"
+    },
+    auth: {
+      background: colors.background,
+      borderColor: colors.background,
+      borderWidth: "0",
+      radius: radii.xl,
+      shadow: "none"
+    },
     card: {
       background: colors.card,
       borderColor: colors.subtle,
@@ -264,11 +545,32 @@ function createSurfaceScale(colors, radii, shadows) {
       radius: radii.xl,
       shadow: "none"
     },
-    panel: {
+    dataTable: {
       background: colors.card,
       borderColor: colors.subtle,
       borderWidth: "1px",
-      radius: radii.sm,
+      radius: radii.md,
+      shadow: "none"
+    },
+    dialog: {
+      background: colors.card,
+      borderColor: colors.subtle,
+      borderWidth: "1px",
+      radius: radii.xl,
+      shadow: "none"
+    },
+    documentCard: {
+      background: colors.card,
+      borderColor: colors.subtle,
+      borderWidth: "1px",
+      radius: radii.md,
+      shadow: "none"
+    },
+    documentCardSelected: {
+      background: colors.muted,
+      borderColor: colors.subtle,
+      borderWidth: "1px",
+      radius: radii.md,
       shadow: "none"
     },
     focus: {
@@ -277,6 +579,102 @@ function createSurfaceScale(colors, radii, shadows) {
       borderWidth: "1px",
       radius: radii.sm,
       shadow: shadows.focus
+    },
+    mainContent: {
+      background: colors.background,
+      borderColor: colors.background,
+      borderWidth: "0",
+      radius: "0",
+      shadow: "none"
+    },
+    panel: {
+      background: colors.card,
+      borderColor: colors.subtle,
+      borderWidth: "1px",
+      radius: radii.sm,
+      shadow: "none"
+    },
+    proseDialog: {
+      background: colors.card,
+      borderColor: colors.subtle,
+      borderWidth: "1px",
+      radius: radii.xl,
+      shadow: "none"
+    },
+    rightPanel: {
+      background: colors.background,
+      borderColor: colors.subtle,
+      borderWidth: "1px",
+      radius: radii.xl,
+      shadow: "none"
+    },
+    sidebar: {
+      background: colors.background,
+      borderColor: colors.subtle,
+      borderWidth: "0",
+      radius: "0",
+      shadow: "none"
+    }
+  };
+}
+function createSpacingScale() {
+  return {
+    space: {
+      "0": "0rem",
+      "0-5": "0.125rem",
+      "1": "0.25rem",
+      "1-5": "0.375rem",
+      "2": "0.5rem",
+      "2-5": "0.625rem",
+      "3": "0.75rem",
+      "4": "1rem",
+      "5": "1.25rem",
+      "6": "1.5rem",
+      "8": "2rem",
+      "10": "2.5rem",
+      "12": "3rem",
+      "16": "4rem"
+    },
+    gap: {
+      tight: "0.375rem",
+      compact: "0.5rem",
+      default: "0.75rem",
+      comfortable: "1rem",
+      section: "2rem",
+      page: "3rem"
+    },
+    rhythm: {
+      labelToControl: "0.5rem",
+      controlToHelp: "0.5rem",
+      titleToDescription: "0.5rem",
+      titleToBody: "0.5rem",
+      fieldset: "1.5rem",
+      fieldsetCompact: "0.75rem",
+      group: "1.5rem",
+      groupCompact: "1rem",
+      paragraphFlow: "1.5rem",
+      sectionContent: "2rem"
+    },
+    measure: {
+      reading: "65ch",
+      compact: "60ch",
+      wide: "72ch"
+    },
+    control: {
+      xs: "2rem",
+      sm: "2.25rem",
+      md: "2.5rem",
+      lg: "2.75rem"
+    },
+    iconButton: {
+      sm: "2rem",
+      md: "2.5rem",
+      lg: "3rem"
+    },
+    layout: {
+      sidebarWidth: "18.75rem",
+      rightRailWidth: "4.625rem",
+      proseDialogWidth: "53.125rem"
     }
   };
 }
@@ -302,6 +700,38 @@ function mergeSurfaceScale(baseScale, overrides) {
     ])
   );
 }
+function mergeSpacingScale(baseScale, overrides) {
+  return {
+    space: {
+      ...baseScale.space,
+      ...overrides?.space
+    },
+    gap: {
+      ...baseScale.gap,
+      ...overrides?.gap
+    },
+    rhythm: {
+      ...baseScale.rhythm,
+      ...overrides?.rhythm
+    },
+    measure: {
+      ...baseScale.measure,
+      ...overrides?.measure
+    },
+    control: {
+      ...baseScale.control,
+      ...overrides?.control
+    },
+    iconButton: {
+      ...baseScale.iconButton,
+      ...overrides?.iconButton
+    },
+    layout: {
+      ...baseScale.layout,
+      ...overrides?.layout
+    }
+  };
+}
 var sofyaColors = createColorScale(sofyaSemanticColorHex);
 var sofyaRadii = {
   sm: "0.5rem",
@@ -418,7 +848,8 @@ var sofyaTheme = {
   shadows: sofyaShadows,
   typography: sharedTypography,
   textStyles: createTextStyleScale(sharedTypography),
-  surfaces: createSurfaceScale(sofyaColors, sofyaRadii, sofyaShadows)
+  surfaces: createSurfaceScale(sofyaColors, sofyaRadii, sofyaShadows),
+  spacing: createSpacingScale()
 };
 var oceanTheme = {
   name: "ocean",
@@ -427,7 +858,8 @@ var oceanTheme = {
   shadows: oceanShadows,
   typography: sharedTypography,
   textStyles: createTextStyleScale(sharedTypography),
-  surfaces: createSurfaceScale(oceanColors, oceanRadii, oceanShadows)
+  surfaces: createSurfaceScale(oceanColors, oceanRadii, oceanShadows),
+  spacing: createSpacingScale()
 };
 var midnightTheme = {
   name: "midnight",
@@ -436,7 +868,8 @@ var midnightTheme = {
   shadows: midnightShadows,
   typography: sharedTypography,
   textStyles: createTextStyleScale(sharedTypography),
-  surfaces: createSurfaceScale(midnightColors, midnightRadii, midnightShadows)
+  surfaces: createSurfaceScale(midnightColors, midnightRadii, midnightShadows),
+  spacing: createSpacingScale()
 };
 var themePresets = {
   sofya: sofyaTheme,
@@ -460,7 +893,8 @@ function mergeTheme(baseTheme, overrides) {
       shadows: { ...baseTheme.shadows },
       typography: { ...baseTheme.typography },
       textStyles: mergeTextStyleScale(baseTheme.textStyles),
-      surfaces: mergeSurfaceScale(baseTheme.surfaces)
+      surfaces: mergeSurfaceScale(baseTheme.surfaces),
+      spacing: mergeSpacingScale(baseTheme.spacing)
     };
   }
   const colors = {
@@ -488,6 +922,7 @@ function mergeTheme(baseTheme, overrides) {
     createSurfaceScale(colors, radii, shadows),
     overrides.surfaces
   );
+  const spacing = mergeSpacingScale(createSpacingScale(), overrides.spacing);
   return {
     name: overrides.name ?? baseTheme.name,
     colors,
@@ -495,7 +930,8 @@ function mergeTheme(baseTheme, overrides) {
     shadows,
     typography,
     textStyles,
-    surfaces
+    surfaces,
+    spacing
   };
 }
 function resolveTheme(preset = defaultTheme, overrides) {
@@ -513,6 +949,71 @@ function themeDecorativeCssVariables(theme) {
     "--sofya-logo-soft": `hsl(${theme.colors.primary} / 0.45)`
   };
 }
+function toCssTokenName(name) {
+  return name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function textStyleCssVariables(textStyles) {
+  return Object.fromEntries(
+    sofyaTextStyleNames.flatMap((name) => {
+      const cssName = toCssTokenName(name);
+      const style = textStyles[name];
+      return [
+        [`--sofya-text-${cssName}-font-family`, style.fontFamily],
+        [`--sofya-text-${cssName}-font-size`, style.fontSize],
+        [`--sofya-text-${cssName}-font-weight`, style.fontWeight],
+        [`--sofya-text-${cssName}-line-height`, style.lineHeight],
+        [`--sofya-text-${cssName}-letter-spacing`, style.letterSpacing]
+      ];
+    })
+  );
+}
+function surfaceCssVariables(surfaces) {
+  return Object.fromEntries(
+    sofyaSurfaceNames.flatMap((name) => {
+      const cssName = toCssTokenName(name);
+      const surface = surfaces[name];
+      return [
+        [`--sofya-surface-${cssName}-background`, surface.background],
+        [`--sofya-surface-${cssName}-border-color`, surface.borderColor],
+        [`--sofya-surface-${cssName}-border-width`, surface.borderWidth],
+        [`--sofya-surface-${cssName}-radius`, surface.radius],
+        [`--sofya-surface-${cssName}-shadow`, surface.shadow]
+      ];
+    })
+  );
+}
+function spacingCssVariables(spacing) {
+  return {
+    ...Object.fromEntries(
+      sofyaSpaceNames.map((name) => [`--sofya-space-${name}`, spacing.space[name]])
+    ),
+    ...Object.fromEntries(
+      sofyaGapNames.map((name) => [`--sofya-gap-${name}`, spacing.gap[name]])
+    ),
+    ...Object.fromEntries(
+      sofyaRhythmNames.map((name) => [
+        `--sofya-rhythm-${toCssTokenName(name)}`,
+        spacing.rhythm[name]
+      ])
+    ),
+    ...Object.fromEntries(
+      sofyaMeasureNames.map((name) => [
+        `--sofya-measure-${name}`,
+        spacing.measure[name]
+      ])
+    ),
+    "--sofya-control-height-xs": spacing.control.xs,
+    "--sofya-control-height-sm": spacing.control.sm,
+    "--sofya-control-height-md": spacing.control.md,
+    "--sofya-control-height-lg": spacing.control.lg,
+    "--sofya-icon-button-size-sm": spacing.iconButton.sm,
+    "--sofya-icon-button-size-md": spacing.iconButton.md,
+    "--sofya-icon-button-size-lg": spacing.iconButton.lg,
+    "--sofya-layout-sidebar-width": spacing.layout.sidebarWidth,
+    "--sofya-layout-right-rail-width": spacing.layout.rightRailWidth,
+    "--sofya-layout-prose-dialog-width": spacing.layout.proseDialogWidth
+  };
+}
 function themeToCssVariables(theme) {
   const textStyles = Object.fromEntries(
     sofyaTextStyleNames.map((name) => [name, resolveTextStyle(name, theme)])
@@ -564,56 +1065,9 @@ function themeToCssVariables(theme) {
     "--sofya-font-sans": theme.typography.sans,
     "--sofya-font-display": theme.typography.display,
     "--sofya-font-mono": theme.typography.mono,
-    "--sofya-text-h1-font-family": textStyles.h1.fontFamily,
-    "--sofya-text-h1-font-size": textStyles.h1.fontSize,
-    "--sofya-text-h1-font-weight": textStyles.h1.fontWeight,
-    "--sofya-text-h1-line-height": textStyles.h1.lineHeight,
-    "--sofya-text-h1-letter-spacing": textStyles.h1.letterSpacing,
-    "--sofya-text-h2-font-family": textStyles.h2.fontFamily,
-    "--sofya-text-h2-font-size": textStyles.h2.fontSize,
-    "--sofya-text-h2-font-weight": textStyles.h2.fontWeight,
-    "--sofya-text-h2-line-height": textStyles.h2.lineHeight,
-    "--sofya-text-h2-letter-spacing": textStyles.h2.letterSpacing,
-    "--sofya-text-h3-font-family": textStyles.h3.fontFamily,
-    "--sofya-text-h3-font-size": textStyles.h3.fontSize,
-    "--sofya-text-h3-font-weight": textStyles.h3.fontWeight,
-    "--sofya-text-h3-line-height": textStyles.h3.lineHeight,
-    "--sofya-text-h3-letter-spacing": textStyles.h3.letterSpacing,
-    "--sofya-text-h4-font-family": textStyles.h4.fontFamily,
-    "--sofya-text-h4-font-size": textStyles.h4.fontSize,
-    "--sofya-text-h4-font-weight": textStyles.h4.fontWeight,
-    "--sofya-text-h4-line-height": textStyles.h4.lineHeight,
-    "--sofya-text-h4-letter-spacing": textStyles.h4.letterSpacing,
-    "--sofya-text-h5-font-family": textStyles.h5.fontFamily,
-    "--sofya-text-h5-font-size": textStyles.h5.fontSize,
-    "--sofya-text-h5-font-weight": textStyles.h5.fontWeight,
-    "--sofya-text-h5-line-height": textStyles.h5.lineHeight,
-    "--sofya-text-h5-letter-spacing": textStyles.h5.letterSpacing,
-    "--sofya-text-body-font-family": textStyles.body.fontFamily,
-    "--sofya-text-body-font-size": textStyles.body.fontSize,
-    "--sofya-text-body-font-weight": textStyles.body.fontWeight,
-    "--sofya-text-body-line-height": textStyles.body.lineHeight,
-    "--sofya-text-body-letter-spacing": textStyles.body.letterSpacing,
-    "--sofya-text-tiny-font-family": textStyles.tiny.fontFamily,
-    "--sofya-text-tiny-font-size": textStyles.tiny.fontSize,
-    "--sofya-text-tiny-font-weight": textStyles.tiny.fontWeight,
-    "--sofya-text-tiny-line-height": textStyles.tiny.lineHeight,
-    "--sofya-text-tiny-letter-spacing": textStyles.tiny.letterSpacing,
-    "--sofya-surface-card-background": surfaces.card.background,
-    "--sofya-surface-card-border-color": surfaces.card.borderColor,
-    "--sofya-surface-card-border-width": surfaces.card.borderWidth,
-    "--sofya-surface-card-radius": surfaces.card.radius,
-    "--sofya-surface-card-shadow": surfaces.card.shadow,
-    "--sofya-surface-panel-background": surfaces.panel.background,
-    "--sofya-surface-panel-border-color": surfaces.panel.borderColor,
-    "--sofya-surface-panel-border-width": surfaces.panel.borderWidth,
-    "--sofya-surface-panel-radius": surfaces.panel.radius,
-    "--sofya-surface-panel-shadow": surfaces.panel.shadow,
-    "--sofya-surface-focus-background": surfaces.focus.background,
-    "--sofya-surface-focus-border-color": surfaces.focus.borderColor,
-    "--sofya-surface-focus-border-width": surfaces.focus.borderWidth,
-    "--sofya-surface-focus-radius": surfaces.focus.radius,
-    "--sofya-surface-focus-shadow": surfaces.focus.shadow
+    ...textStyleCssVariables(textStyles),
+    ...surfaceCssVariables(surfaces),
+    ...spacingCssVariables(theme.spacing)
   };
 }
 function createWhitelabelTheme(overrides, preset = defaultTheme) {
@@ -631,7 +1085,11 @@ export {
   resolveTheme,
   sofyaBrandPalette,
   sofyaColorPalette,
+  sofyaGapNames,
+  sofyaMeasureNames,
+  sofyaRhythmNames,
   sofyaSemanticColorHex,
+  sofyaSpaceNames,
   sofyaSurfaceNames,
   sofyaTextStyleNames,
   themePresetNames,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofya-ds/tokens",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Official Sofya design tokens, theme presets and semantic color helpers.",
   "type": "module",
   "main": "./dist/index.cjs",