@digdir/designsystemet 1.11.1 → 1.12.0

package/dist/src/tokens/create/generators/semantic/style.js

@@ -0,0 +1,384 @@
+// src/tokens/create/generators/semantic/style.ts
+function generateSemanticStyle() {
+  return {
+    typography: {
+      heading: {
+        "2xl": {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.10}",
+            letterSpacing: "{letter-spacing.1}"
+          }
+        },
+        xl: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.9}",
+            letterSpacing: "{letter-spacing.1}"
+          }
+        },
+        lg: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.8}",
+            letterSpacing: "{letter-spacing.2}"
+          }
+        },
+        md: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.7}",
+            letterSpacing: "{letter-spacing.3}"
+          }
+        },
+        sm: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.6}",
+            letterSpacing: "{letter-spacing.5}"
+          }
+        },
+        xs: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.5}",
+            letterSpacing: "{letter-spacing.6}"
+          }
+        },
+        "2xs": {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.4}",
+            letterSpacing: "{letter-spacing.6}"
+          }
+        }
+      },
+      body: {
+        xl: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.md}",
+            fontSize: "{font-size.6}",
+            letterSpacing: "{letter-spacing.8}"
+          }
+        },
+        lg: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.md}",
+            fontSize: "{font-size.5}",
+            letterSpacing: "{letter-spacing.8}"
+          }
+        },
+        md: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.md}",
+            fontSize: "{font-size.4}",
+            letterSpacing: "{letter-spacing.8}"
+          }
+        },
+        sm: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.md}",
+            fontSize: "{font-size.3}",
+            letterSpacing: "{letter-spacing.7}"
+          }
+        },
+        xs: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.md}",
+            fontSize: "{font-size.2}",
+            letterSpacing: "{letter-spacing.6}"
+          }
+        },
+        short: {
+          xl: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.sm}",
+              fontSize: "{font-size.6}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          lg: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.sm}",
+              fontSize: "{font-size.5}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          md: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.sm}",
+              fontSize: "{font-size.4}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          sm: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.sm}",
+              fontSize: "{font-size.3}",
+              letterSpacing: "{letter-spacing.7}"
+            }
+          },
+          xs: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.sm}",
+              fontSize: "{font-size.2}",
+              letterSpacing: "{letter-spacing.6}"
+            }
+          }
+        },
+        long: {
+          xl: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.lg}",
+              fontSize: "{font-size.6}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          lg: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.lg}",
+              fontSize: "{font-size.5}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          md: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.lg}",
+              fontSize: "{font-size.4}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          sm: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.lg}",
+              fontSize: "{font-size.3}",
+              letterSpacing: "{letter-spacing.7}"
+            }
+          },
+          xs: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.lg}",
+              fontSize: "{font-size.2}",
+              letterSpacing: "{letter-spacing.6}"
+            }
+          }
+        }
+      }
+    },
+    opacity: {
+      disabled: {
+        $type: "opacity",
+        $value: "{opacity.30}"
+      }
+    },
+    "border-width": {
+      default: {
+        $type: "borderWidth",
+        $value: "{border-width.1}"
+      },
+      focus: {
+        $type: "borderWidth",
+        $value: "{border-width.3}"
+      }
+    },
+    shadow: {
+      xs: {
+        $type: "boxShadow",
+        $value: "{shadow.100}"
+      },
+      sm: {
+        $type: "boxShadow",
+        $value: "{shadow.200}"
+      },
+      md: {
+        $type: "boxShadow",
+        $value: "{shadow.300}"
+      },
+      lg: {
+        $type: "boxShadow",
+        $value: "{shadow.400}"
+      },
+      xl: {
+        $type: "boxShadow",
+        $value: "{shadow.500}"
+      }
+    },
+    "border-radius": {
+      sm: {
+        $type: "dimension",
+        $value: "{border-radius.1}"
+      },
+      md: {
+        $type: "dimension",
+        $value: "{border-radius.2}"
+      },
+      lg: {
+        $type: "dimension",
+        $value: "{border-radius.3}"
+      },
+      xl: {
+        $type: "dimension",
+        $value: "{border-radius.4}"
+      },
+      default: {
+        $type: "dimension",
+        $value: "{border-radius.5}"
+      },
+      full: {
+        $type: "dimension",
+        $value: "{border-radius.6}"
+      }
+    },
+    size: {
+      "0": {
+        $type: "dimension",
+        $value: "{_size.0}"
+      },
+      "1": {
+        $type: "dimension",
+        $value: "{_size.1}"
+      },
+      "2": {
+        $type: "dimension",
+        $value: "{_size.2}"
+      },
+      "3": {
+        $type: "dimension",
+        $value: "{_size.3}"
+      },
+      "4": {
+        $type: "dimension",
+        $value: "{_size.4}"
+      },
+      "5": {
+        $type: "dimension",
+        $value: "{_size.5}"
+      },
+      "6": {
+        $type: "dimension",
+        $value: "{_size.6}"
+      },
+      "7": {
+        $type: "dimension",
+        $value: "{_size.7}"
+      },
+      "8": {
+        $type: "dimension",
+        $value: "{_size.8}"
+      },
+      "9": {
+        $type: "dimension",
+        $value: "{_size.9}"
+      },
+      "10": {
+        $type: "dimension",
+        $value: "{_size.10}"
+      },
+      "11": {
+        $type: "dimension",
+        $value: "{_size.11}"
+      },
+      "12": {
+        $type: "dimension",
+        $value: "{_size.12}"
+      },
+      "13": {
+        $type: "dimension",
+        $value: "{_size.13}"
+      },
+      "14": {
+        $type: "dimension",
+        $value: "{_size.14}"
+      },
+      "15": {
+        $type: "dimension",
+        $value: "{_size.15}"
+      },
+      "18": {
+        $type: "dimension",
+        $value: "{_size.18}"
+      },
+      "22": {
+        $type: "dimension",
+        $value: "{_size.22}"
+      },
+      "26": {
+        $type: "dimension",
+        $value: "{_size.26}"
+      },
+      "30": {
+        $type: "dimension",
+        $value: "{_size.30}"
+      }
+    }
+  };
+}
+export {
+  generateSemanticStyle
+};

package/dist/src/tokens/create/generators/{theme.d.ts → themes/theme.d.ts}

@@ -1,3 +1,3 @@
-import type { Colors, TokenSet } from '../../types.js';
+import type { Colors, TokenSet } from '../../../types.js';
 export declare const generateTheme: (colors: Colors, themeName: string, borderRadius: number) => TokenSet;
 //# sourceMappingURL=theme.d.ts.map

package/dist/src/tokens/create/generators/themes/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/themes/theme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAS,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEjE,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,EAAE,WAAW,MAAM,EAAE,cAAc,MAAM,aAmDpF,CAAC"}

package/dist/src/tokens/create/generators/{theme.js → themes/theme.js}

@@ -1,5 +1,5 @@
-// src/tokens/create/generators/theme.ts
-import * as R2 from "ramda";
+// src/tokens/create/generators/themes/theme.ts
+import * as R3 from "ramda";
 
 // src/colors/colorMetadata.ts
 import * as R from "ramda";
@@ -255,25 +255,95 @@ var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.valu
 var colorNames = Object.keys(colorMetadata);
 var baseColorNames = Object.keys(baseColors);
 
-// src/tokens/template/design-tokens/themes/theme.base.template.json with { type: 'json' }
-var theme_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/themes/theme.ts
+var generateTheme = (colors, themeName, borderRadius) => {
+  const mainColorNames = Object.keys(colors.main);
+  const supportColorNames = Object.keys(colors.support);
+  const customColors = [...mainColorNames, "neutral", ...supportColorNames, ...baseColorNames];
+  const themeColorTokens = Object.fromEntries(
+    customColors.map((colorName) => [colorName, generateColorScaleTokens(colorName, themeName)])
+  );
+  const { color: themeBaseFileColor, ...remainingThemeFile } = generateBase(themeName);
+  const themeFile = {
+    color: {
+      ...themeColorTokens,
+      ...themeBaseFileColor,
+      link: {
+        visited: {
+          $type: "color",
+          $value: `{${themeName}.link.visited}`
+        }
+      },
+      focus: {
+        "inner-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.inner}`
+        },
+        "outer-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.outer}`
+        }
+      }
+    },
+    ...remainingThemeFile
+  };
+  const baseBorderRadius = R3.lensPath(["border-radius", "base", "$value"]);
+  const updatedThemeFile = R3.set(baseBorderRadius, String(borderRadius), themeFile);
+  const token = JSON.parse(
+    JSON.stringify(
+      updatedThemeFile,
+      (key, value) => {
+        if (key === "$value") {
+          return value.replace("<theme>", themeName);
+        }
+        return value;
+      },
+      2
+    )
+  );
+  return token;
+};
+var generateBase = (themeName) => ({
   color: {},
   "font-family": {
     $type: "fontFamilies",
-    $value: "{<theme>.font-family}"
+    $value: `{${themeName}.font-family}`
   },
   "font-weight": {
     medium: {
       $type: "fontWeights",
-      $value: "{<theme>.font-weight.medium}"
+      $value: `{${themeName}.font-weight.medium}`
     },
     semibold: {
       $type: "fontWeights",
-      $value: "{<theme>.font-weight.semibold}"
+      $value: `{${themeName}.font-weight.semibold}`
     },
     regular: {
       $type: "fontWeights",
-      $value: "{<theme>.font-weight.regular}"
+      $value: `{${themeName}.font-weight.regular}`
     }
   },
   "border-radius": {
@@ -310,128 +380,16 @@ var theme_base_template_default = {
       $value: "4"
     }
   }
-};
-
-// src/tokens/template/design-tokens/themes/theme.template.json with { type: 'json' }
-var theme_template_default = {
-  "1": {
-    $type: "color",
-    $value: "{<theme>.<color>.1}"
-  },
-  "2": {
-    $type: "color",
-    $value: "{<theme>.<color>.2}"
-  },
-  "3": {
-    $type: "color",
-    $value: "{<theme>.<color>.3}"
-  },
-  "4": {
-    $type: "color",
-    $value: "{<theme>.<color>.4}"
-  },
-  "5": {
-    $type: "color",
-    $value: "{<theme>.<color>.5}"
-  },
-  "6": {
-    $type: "color",
-    $value: "{<theme>.<color>.6}"
-  },
-  "7": {
-    $type: "color",
-    $value: "{<theme>.<color>.7}"
-  },
-  "8": {
-    $type: "color",
-    $value: "{<theme>.<color>.8}"
-  },
-  "9": {
-    $type: "color",
-    $value: "{<theme>.<color>.9}"
-  },
-  "10": {
-    $type: "color",
-    $value: "{<theme>.<color>.10}"
-  },
-  "11": {
-    $type: "color",
-    $value: "{<theme>.<color>.11}"
-  },
-  "12": {
-    $type: "color",
-    $value: "{<theme>.<color>.12}"
-  },
-  "13": {
-    $type: "color",
-    $value: "{<theme>.<color>.13}"
-  },
-  "14": {
-    $type: "color",
-    $value: "{<theme>.<color>.14}"
-  },
-  "15": {
-    $type: "color",
-    $value: "{<theme>.<color>.15}"
-  },
-  "16": {
-    $type: "color",
-    $value: "{<theme>.<color>.16}"
+});
+var generateColorScaleTokens = (colorName, themeName) => {
+  const colorScale = {};
+  for (const [_, colorNumber] of R3.toPairs(semanticColorMap)) {
+    colorScale[colorNumber] = {
+      $type: "color",
+      $value: `{${themeName}.${colorName}.${colorNumber}}`
+    };
   }
-};
-
-// src/tokens/create/generators/theme.ts
-var generateTheme = (colors, themeName, borderRadius) => {
-  const mainColorNames = Object.keys(colors.main);
-  const supportColorNames = Object.keys(colors.support);
-  const customColors = [...mainColorNames, "neutral", ...supportColorNames, ...baseColorNames];
-  const themeColorTokens = Object.fromEntries(
-    customColors.map(
-      (colorName) => [
-        colorName,
-        R2.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
-      ]
-    )
-  );
-  const { color: themeBaseFileColor, ...remainingThemeFile } = theme_base_template_default;
-  const themeFile = {
-    color: {
-      ...themeColorTokens,
-      ...themeBaseFileColor,
-      link: {
-        visited: {
-          $type: "color",
-          $value: `{${themeName}.link.visited}`
-        }
-      },
-      focus: {
-        "inner-color": {
-          $type: "color",
-          $value: `{${themeName}.focus.inner}`
-        },
-        "outer-color": {
-          $type: "color",
-          $value: `{${themeName}.focus.outer}`
-        }
-      }
-    },
-    ...remainingThemeFile
-  };
-  const baseBorderRadius = R2.lensPath(["border-radius", "base", "$value"]);
-  const updatedThemeFile = R2.set(baseBorderRadius, String(borderRadius), themeFile);
-  const token = JSON.parse(
-    JSON.stringify(
-      updatedThemeFile,
-      (key, value) => {
-        if (key === "$value") {
-          return value.replace("<theme>", themeName);
-        }
-        return value;
-      },
-      2
-    )
-  );
-  return token;
+  return colorScale;
 };
 export {
   generateTheme

package/dist/src/tokens/create/write.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"write.d.ts","sourceRoot":"","sources":["../../../../src/tokens/create/write.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKpD,eAAO,MAAM,SAAS,GAAI,MAAM,OAAO,WAAkC,CAAC;AAE1E,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,wCAAwC;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAU,SAAS,kBAAkB,kBAsD5D,CAAC"}
+{"version":3,"file":"write.d.ts","sourceRoot":"","sources":["../../../../src/tokens/create/write.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAa,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAK/D,eAAO,MAAM,SAAS,GAAI,MAAM,OAAO,WAAkC,CAAC;AAE1E,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,wCAAwC;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAU,SAAS,kBAAkB,kBAuD5D,CAAC"}