@digdir/designsystemet 1.11.1 → 1.12.0

package/dist/src/tokens/create/generators/primitives/typography.js

@@ -0,0 +1,220 @@
+// src/tokens/create/generators/primitives/typography.ts
+var generateTypography = (themeName, { fontFamily }) => ({
+  [themeName]: {
+    "font-family": {
+      $type: "fontFamilies",
+      $value: fontFamily
+    },
+    "font-weight": {
+      medium: {
+        $type: "fontWeights",
+        $value: "Medium"
+      },
+      semibold: {
+        $type: "fontWeights",
+        $value: "Semi bold"
+      },
+      regular: {
+        $type: "fontWeights",
+        $value: "Regular"
+      }
+    }
+  }
+});
+var generateFontSizes = (size) => fontSizes[size];
+var lineHeights = {
+  sm: {
+    $type: "lineHeights",
+    $value: "130%"
+  },
+  md: {
+    $type: "lineHeights",
+    $value: "150%"
+  },
+  lg: {
+    $type: "lineHeights",
+    $value: "170%"
+  }
+};
+var letterSpacings = {
+  "1": {
+    $type: "letterSpacing",
+    $value: "-1%"
+  },
+  "2": {
+    $type: "letterSpacing",
+    $value: "-0.5%"
+  },
+  "3": {
+    $type: "letterSpacing",
+    $value: "-0.25%"
+  },
+  "4": {
+    $type: "letterSpacing",
+    $value: "-0.15%"
+  },
+  "5": {
+    $type: "letterSpacing",
+    $value: "0%"
+  },
+  "6": {
+    $type: "letterSpacing",
+    $value: "0.15%"
+  },
+  "7": {
+    $type: "letterSpacing",
+    $value: "0.25%"
+  },
+  "8": {
+    $type: "letterSpacing",
+    $value: "0.5%"
+  },
+  "9": {
+    $type: "letterSpacing",
+    $value: "1.5%"
+  }
+};
+var fontSizes = {
+  large: {
+    "line-height": lineHeights,
+    "font-size": {
+      "1": {
+        $type: "fontSizes",
+        $value: "13"
+      },
+      "2": {
+        $type: "fontSizes",
+        $value: "16"
+      },
+      "3": {
+        $type: "fontSizes",
+        $value: "18"
+      },
+      "4": {
+        $type: "fontSizes",
+        $value: "21"
+      },
+      "5": {
+        $type: "fontSizes",
+        $value: "24"
+      },
+      "6": {
+        $type: "fontSizes",
+        $value: "30"
+      },
+      "7": {
+        $type: "fontSizes",
+        $value: "36"
+      },
+      "8": {
+        $type: "fontSizes",
+        $value: "48"
+      },
+      "9": {
+        $type: "fontSizes",
+        $value: "60"
+      },
+      "10": {
+        $type: "fontSizes",
+        $value: "72"
+      }
+    },
+    "letter-spacing": letterSpacings
+  },
+  medium: {
+    "line-height": lineHeights,
+    "font-size": {
+      "1": {
+        $type: "fontSizes",
+        $value: "12"
+      },
+      "2": {
+        $type: "fontSizes",
+        $value: "14"
+      },
+      "3": {
+        $type: "fontSizes",
+        $value: "16"
+      },
+      "4": {
+        $type: "fontSizes",
+        $value: "18"
+      },
+      "5": {
+        $type: "fontSizes",
+        $value: "21"
+      },
+      "6": {
+        $type: "fontSizes",
+        $value: "24"
+      },
+      "7": {
+        $type: "fontSizes",
+        $value: "30"
+      },
+      "8": {
+        $type: "fontSizes",
+        $value: "36"
+      },
+      "9": {
+        $type: "fontSizes",
+        $value: "48"
+      },
+      "10": {
+        $type: "fontSizes",
+        $value: "60"
+      }
+    },
+    "letter-spacing": letterSpacings
+  },
+  small: {
+    "line-height": lineHeights,
+    "font-size": {
+      "1": {
+        $type: "fontSizes",
+        $value: "11"
+      },
+      "2": {
+        $type: "fontSizes",
+        $value: "13"
+      },
+      "3": {
+        $type: "fontSizes",
+        $value: "14"
+      },
+      "4": {
+        $type: "fontSizes",
+        $value: "16"
+      },
+      "5": {
+        $type: "fontSizes",
+        $value: "18"
+      },
+      "6": {
+        $type: "fontSizes",
+        $value: "21"
+      },
+      "7": {
+        $type: "fontSizes",
+        $value: "24"
+      },
+      "8": {
+        $type: "fontSizes",
+        $value: "30"
+      },
+      "9": {
+        $type: "fontSizes",
+        $value: "36"
+      },
+      "10": {
+        $type: "fontSizes",
+        $value: "48"
+      }
+    },
+    "letter-spacing": letterSpacings
+  }
+};
+export {
+  generateFontSizes,
+  generateTypography
+};

package/dist/src/tokens/create/generators/semantic/color-modes.d.ts

@@ -0,0 +1,8 @@
+import type { Colors, TokenSet } from '../../../types.js';
+type SemanticModes = {
+    'main-color': Record<string, TokenSet>;
+    'support-color': Record<string, TokenSet>;
+};
+export declare const generateColorModes: (colors: Colors, _themeName: string) => SemanticModes;
+export {};
+//# sourceMappingURL=color-modes.d.ts.map

package/dist/src/tokens/create/generators/semantic/color-modes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-modes.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/semantic/color-modes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAS,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEjE,KAAK,aAAa,GAAG;IACnB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,EAAE,YAAY,MAAM,kBA4BpE,CAAC"}

package/dist/src/tokens/create/generators/semantic/color-modes.js

@@ -0,0 +1,61 @@
+// src/colors/types.ts
+import * as R from "ramda";
+var semanticColorMap = {
+  "background-default": 1,
+  "background-tinted": 2,
+  "surface-default": 3,
+  "surface-tinted": 4,
+  "surface-hover": 5,
+  "surface-active": 6,
+  "border-subtle": 7,
+  "border-default": 8,
+  "border-strong": 9,
+  "text-subtle": 10,
+  "text-default": 11,
+  "base-default": 12,
+  "base-hover": 13,
+  "base-active": 14,
+  "base-contrast-subtle": 15,
+  "base-contrast-default": 16
+};
+var semanticColorNames = R.keys(semanticColorMap);
+var semanticColorNumbers = R.values(semanticColorMap);
+
+// src/tokens/create/generators/semantic/color-modes.ts
+var generateColorModes = (colors, _themeName) => {
+  const mainColorNames = Object.keys(colors.main);
+  const supportColorNames = Object.keys(colors.support);
+  const modes = {
+    "main-color": {},
+    "support-color": {}
+  };
+  const categories = [
+    ["main-color", mainColorNames],
+    ["support-color", supportColorNames]
+  ];
+  for (const [colorCategory, colorNames] of categories) {
+    for (const colorName of colorNames) {
+      const category = colorCategory.replace("-color", "");
+      const customColorTokens = {
+        color: {
+          [category]: generateColorScaleTokens(colorName)
+        }
+      };
+      modes[colorCategory][colorName] = customColorTokens;
+    }
+  }
+  return modes;
+};
+var generateColorScaleTokens = (colorName) => {
+  const colorScale = {};
+  for (const colorSemantic of semanticColorNames) {
+    colorScale[colorSemantic] = {
+      $type: "color",
+      $value: `{color.${colorName}.${colorSemantic}}`
+    };
+  }
+  return colorScale;
+};
+export {
+  generateColorModes
+};

package/dist/src/tokens/create/generators/semantic/color.d.ts

@@ -0,0 +1,5 @@
+import type { Colors } from '../../../types.js';
+export declare const generateSemanticColors: (colors: Colors, _themeName: string) => {
+    color: any;
+};
+//# sourceMappingURL=color.d.ts.map

package/dist/src/tokens/create/generators/semantic/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/semantic/color.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAmB,MAAM,mBAAmB,CAAC;AAEjE,eAAO,MAAM,sBAAsB,GAAI,QAAQ,MAAM,EAAE,YAAY,MAAM;;CAiBxE,CAAC"}

package/dist/src/tokens/create/generators/{semantic.js → semantic/color.js}

@@ -1,5 +1,5 @@
-// src/tokens/create/generators/semantic.ts
-import * as R2 from "ramda";
+// src/tokens/create/generators/semantic/color.ts
+import * as R3 from "ramda";
 
 // src/colors/colorMetadata.ts
 import * as R from "ramda";
@@ -255,8 +255,45 @@ var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.valu
 var colorNames = Object.keys(colorMetadata);
 var baseColorNames = Object.keys(baseColors);
 
-// src/tokens/template/design-tokens/semantic/color.base.template.json with { type: 'json' }
-var color_base_template_default = {
+// src/colors/types.ts
+import * as R2 from "ramda";
+var semanticColorMap = {
+  "background-default": 1,
+  "background-tinted": 2,
+  "surface-default": 3,
+  "surface-tinted": 4,
+  "surface-hover": 5,
+  "surface-active": 6,
+  "border-subtle": 7,
+  "border-default": 8,
+  "border-strong": 9,
+  "text-subtle": 10,
+  "text-default": 11,
+  "base-default": 12,
+  "base-hover": 13,
+  "base-active": 14,
+  "base-contrast-subtle": 15,
+  "base-contrast-default": 16
+};
+var semanticColorNames = R2.keys(semanticColorMap);
+var semanticColorNumbers = R2.values(semanticColorMap);
+
+// src/tokens/create/generators/semantic/color.ts
+var generateSemanticColors = (colors, _themeName) => {
+  const mainColorNames = Object.keys(colors.main);
+  const supportColorNames = Object.keys(colors.support);
+  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
+  const allColors = [...customColors, ...baseColorNames];
+  const semanticColorTokens = allColors.map((colorName) => [colorName, generateColorScaleTokens(colorName)]);
+  return {
+    ...baseColorTemplate,
+    color: {
+      ...Object.fromEntries(semanticColorTokens),
+      ...baseColorTemplate.color
+    }
+  };
+};
+var baseColorTemplate = {
   color: {
     focus: {
       inner: {
@@ -278,197 +315,16 @@ var color_base_template_default = {
     }
   }
 };
-
-// src/tokens/template/design-tokens/semantic/color.template.json with { type: 'json' }
-var color_template_default = {
-  "background-default": {
-    $type: "color",
-    $value: "{color.<color>.1}"
-  },
-  "background-tinted": {
-    $type: "color",
-    $value: "{color.<color>.2}"
-  },
-  "surface-default": {
-    $type: "color",
-    $value: "{color.<color>.3}"
-  },
-  "surface-tinted": {
-    $type: "color",
-    $value: "{color.<color>.4}"
-  },
-  "surface-hover": {
-    $type: "color",
-    $value: "{color.<color>.5}"
-  },
-  "surface-active": {
-    $type: "color",
-    $value: "{color.<color>.6}"
-  },
-  "border-subtle": {
-    $type: "color",
-    $value: "{color.<color>.7}"
-  },
-  "border-default": {
-    $type: "color",
-    $value: "{color.<color>.8}"
-  },
-  "border-strong": {
-    $type: "color",
-    $value: "{color.<color>.9}"
-  },
-  "text-subtle": {
-    $type: "color",
-    $value: "{color.<color>.10}"
-  },
-  "text-default": {
-    $type: "color",
-    $value: "{color.<color>.11}"
-  },
-  "base-default": {
-    $type: "color",
-    $value: "{color.<color>.12}"
-  },
-  "base-hover": {
-    $type: "color",
-    $value: "{color.<color>.13}"
-  },
-  "base-active": {
-    $type: "color",
-    $value: "{color.<color>.14}"
-  },
-  "base-contrast-subtle": {
-    $type: "color",
-    $value: "{color.<color>.15}"
-  },
-  "base-contrast-default": {
-    $type: "color",
-    $value: "{color.<color>.16}"
+var generateColorScaleTokens = (colorName) => {
+  const colorScale = {};
+  for (const [colorSemantic, colorNumber] of R3.toPairs(semanticColorMap)) {
+    colorScale[colorSemantic] = {
+      $type: "color",
+      $value: `{color.${colorName}.${colorNumber}}`
+    };
   }
-};
-
-// src/tokens/template/design-tokens/semantic/modes/color.template.json with { type: 'json' }
-var color_template_default2 = {
-  "background-default": {
-    $type: "color",
-    $value: "{color.<color>.background-default}"
-  },
-  "background-tinted": {
-    $type: "color",
-    $value: "{color.<color>.background-tinted}"
-  },
-  "surface-default": {
-    $type: "color",
-    $value: "{color.<color>.surface-default}"
-  },
-  "surface-tinted": {
-    $type: "color",
-    $value: "{color.<color>.surface-tinted}"
-  },
-  "surface-hover": {
-    $type: "color",
-    $value: "{color.<color>.surface-hover}"
-  },
-  "surface-active": {
-    $type: "color",
-    $value: "{color.<color>.surface-active}"
-  },
-  "border-subtle": {
-    $type: "color",
-    $value: "{color.<color>.border-subtle}"
-  },
-  "border-default": {
-    $type: "color",
-    $value: "{color.<color>.border-default}"
-  },
-  "border-strong": {
-    $type: "color",
-    $value: "{color.<color>.border-strong}"
-  },
-  "text-subtle": {
-    $type: "color",
-    $value: "{color.<color>.text-subtle}"
-  },
-  "text-default": {
-    $type: "color",
-    $value: "{color.<color>.text-default}"
-  },
-  "base-default": {
-    $type: "color",
-    $value: "{color.<color>.base-default}"
-  },
-  "base-hover": {
-    $type: "color",
-    $value: "{color.<color>.base-hover}"
-  },
-  "base-active": {
-    $type: "color",
-    $value: "{color.<color>.base-active}"
-  },
-  "base-contrast-subtle": {
-    $type: "color",
-    $value: "{color.<color>.base-contrast-subtle}"
-  },
-  "base-contrast-default": {
-    $type: "color",
-    $value: "{color.<color>.base-contrast-default}"
-  }
-};
-
-// src/tokens/create/generators/semantic.ts
-var generateSemantic = (colors, _themeName) => {
-  const mainColorNames = Object.keys(colors.main);
-  const supportColorNames = Object.keys(colors.support);
-  const modes = {
-    "main-color": {},
-    "support-color": {}
-  };
-  const categories = [
-    ["main-color", mainColorNames],
-    ["support-color", supportColorNames]
-  ];
-  for (const [colorCategory, colorNames2] of categories) {
-    for (const colorName of colorNames2) {
-      const category = colorCategory.replace("-color", "");
-      const customColorTokens = {
-        color: {
-          [category]: JSON.parse(
-            JSON.stringify(
-              color_template_default2,
-              (key, value) => {
-                if (key === "$value") {
-                  return value.replace("<color>", colorName);
-                }
-                return value;
-              },
-              2
-            )
-          )
-        }
-      };
-      modes[colorCategory][colorName] = customColorTokens;
-    }
-  }
-  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
-  const allColors = [...customColors, ...baseColorNames];
-  const semanticColorTokens = allColors.map(
-    (colorName) => [
-      colorName,
-      R2.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
-    ]
-  );
-  const color = {
-    ...color_base_template_default,
-    color: {
-      ...Object.fromEntries(semanticColorTokens),
-      ...color_base_template_default.color
-    }
-  };
-  return {
-    modes,
-    color
-  };
+  return colorScale;
 };
 export {
-  generateSemantic
+  generateSemanticColors
 };

package/dist/src/tokens/create/generators/semantic/style.d.ts

@@ -0,0 +1,3 @@
+import type { TokenSet } from '../../../types.js';
+export declare function generateSemanticStyle(): TokenSet;
+//# sourceMappingURL=style.d.ts.map

package/dist/src/tokens/create/generators/semantic/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/semantic/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAS,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEzD,wBAAgB,qBAAqB,IAAI,QAAQ,CA2XhD"}