[Darkside] Tailwind CSS config for new tokens (#3251)

* change: Updated actionmenu examples

* change: Removed flipAlignment prop for better alignment

* change: Removed defaultOpen-prop from ActionMenu

* change: Moved rootElement prop to component root

* change: Added support for use inside Modal

* change: Use MenuPortalProps instead of Pick

* feat: Added build for darkside

* feat: Implemented darkside-tokens in tailwind-build

* change: Code cleanup and syntax simplification

* change: Moved color-token extraction to start of file

* memo: Moved comment

@navikt/core/tailwind/.gitignore

@@ -1,3 +1,4 @@
 src/tokens.ts
 tailwind.config.js
+tailwind.darkside.config.js
 !tailwind.config.d.ts

@navikt/core/tailwind/darkside.ts

@@ -0,0 +1,75 @@
+import { writeFileSync } from "fs";
+import { kebabCaseForAlpha } from "@navikt/ds-tokens/config/kebabCase";
+import { breakpointsTokenConfig } from "@navikt/ds-tokens/darkside/tokens/breakpoints";
+import * as TokensBuild from "@navikt/ds-tokens/dist/darkside/tokens";
+
+const transformedTokens = Object.fromEntries(
+  Object.entries(TokensBuild).map(([key, value]) => {
+    return [kebabCaseForAlpha(key), value];
+  }),
+);
+
+const nonColorTokens = [
+  "spacing",
+  "shadow",
+  "font-weight",
+  "font-size",
+  "font-line-height",
+  "font-family",
+  "border-radius",
+  "breakpoint",
+];
+/*
+ * Assumes that all remaining names not in nonColorTokens are colors
+ * TODO: Should probably write some tests on this when tokens are more stable
+ */
+const colorTokensEntries = Object.entries(transformedTokens).filter(([key]) => {
+  return !nonColorTokens.find((prefix) => key.toLowerCase().includes(prefix));
+});
+const colors = Object.fromEntries(colorTokensEntries);
+
+/**
+ * TODO features
+ * - Shadow
+ * TODO deprecations:
+ * - max-width
+ * - z-index
+ */
+const config = {
+  theme: {
+    colors,
+    screens: {
+      sm: breakpointsTokenConfig.breakpoint.sm.value,
+      md: breakpointsTokenConfig.breakpoint.md.value,
+      lg: breakpointsTokenConfig.breakpoint.lg.value,
+      xl: breakpointsTokenConfig.breakpoint.xl.value,
+      "2xl": breakpointsTokenConfig.breakpoint["2xl"].value,
+    },
+    extend: {
+      spacing: extractTokensForCategory("spacing"),
+      fontWeight: extractTokensForCategory("font-weight"),
+      fontSize: extractTokensForCategory("font-size"),
+      lineHeight: extractTokensForCategory("font-line-height"),
+      fontFamily: extractTokensForCategory("font-family"),
+      borderRadius: extractTokensForCategory("border-radius"),
+    },
+  },
+};
+
+const outputString = `module.exports = ${JSON.stringify(config, null, 2)};`;
+
+writeFileSync("tailwind.darkside.config.js", outputString);
+
+/* -------------------------------------------------------------------------- */
+/*                                  Utilities                                 */
+/* -------------------------------------------------------------------------- */
+
+/* Cherry-picks object keys we want */
+function extractTokensForCategory(tokenName: string) {
+  const tokens = Object.entries(transformedTokens)
+    .filter(([key]) => key.startsWith(tokenName))
+    /* We want extract only the value from each token, so we replace the name: "spacing-4" -> "4" */
+    .map(([key, value]) => [key.replace(`${tokenName}-`, ""), value]);
+
+  return Object.fromEntries(tokens);
+}

@navikt/core/tailwind/package.json

@@ -15,7 +15,7 @@
     "tailwind.config.d.ts"
   ],
   "scripts": {
-    "build": "yarn tsx ./src",
+    "build": "tsx ./src && tsx darkside.ts",
     "test": "vitest run",
     "test:watch": "vitest watch"
   },

@navikt/core/tokens/darkside/tokens/breakpoints.ts

@@ -1,18 +1,17 @@
 import { StyleDictionaryTokenConfig } from "../util";
 
-export const breakpointsTokenConfig: StyleDictionaryTokenConfig<"global-breakpoints"> =
-  {
-    breakpoint: {
-      xs: { value: "0", type: "global-breakpoints" },
-      sm: { value: "480px", type: "global-breakpoints" },
-      "sm-down": { value: "479px", type: "global-breakpoints" },
-      md: { value: "768px", type: "global-breakpoints" },
-      "md-down": { value: "767px", type: "global-breakpoints" },
-      lg: { value: "1024px", type: "global-breakpoints" },
-      "lg-down": { value: "1023px", type: "global-breakpoints" },
-      xl: { value: "1280px", type: "global-breakpoints" },
-      "xl-down": { value: "1279px", type: "global-breakpoints" },
-      "2xl": { value: "1440px", type: "global-breakpoints" },
-      "2xl-down": { value: "1439px", type: "global-breakpoints" },
-    },
-  };
+export const breakpointsTokenConfig = {
+  breakpoint: {
+    xs: { value: "0", type: "global-breakpoints" },
+    sm: { value: "480px", type: "global-breakpoints" },
+    "sm-down": { value: "479px", type: "global-breakpoints" },
+    md: { value: "768px", type: "global-breakpoints" },
+    "md-down": { value: "767px", type: "global-breakpoints" },
+    lg: { value: "1024px", type: "global-breakpoints" },
+    "lg-down": { value: "1023px", type: "global-breakpoints" },
+    xl: { value: "1280px", type: "global-breakpoints" },
+    "xl-down": { value: "1279px", type: "global-breakpoints" },
+    "2xl": { value: "1440px", type: "global-breakpoints" },
+    "2xl-down": { value: "1439px", type: "global-breakpoints" },
+  },
+} satisfies StyleDictionaryTokenConfig<"global-breakpoints">;