@navikt/aksel 7.40.0 → 8.0.0

package/README.md

@@ -66,14 +66,16 @@ Removes deprecated props from components.
 
 `npx @navikt/aksel codemod v8-list ...`
 
-Tries to migrate List component moving 'title' and 'description' props to 'Heading' and 'BodyShort'.
+Tries to migrate List component by wrapping it with 'Box' and moving 'title' and 'description' props to 'Heading' and 'BodyShort'.
 
 #### Variants
 
+`npx @navikt/aksel codemod v8-button-variant ...`
 `npx @navikt/aksel codemod v8-tag-variant ...`
 `npx @navikt/aksel codemod v8-toggle-group-variant ...`
 `npx @navikt/aksel codemod v8-accordion-variant ...`
 `npx @navikt/aksel codemod v8-chips-variant ...`
+`npx @navikt/aksel codemod v8-link-variant ...`
 
 Updates variant + data-color props based on current variant prop.
 

package/dist/codemod/codeshift.utils.js

@@ -10,6 +10,7 @@ const GLOB_IGNORE_PATTERNS = [
     "**/lib/**",
     "**/.next/**",
     "**/__snapshots__/**",
+    "**/public/**",
 ];
 exports.GLOB_IGNORE_PATTERNS = GLOB_IGNORE_PATTERNS;
 /**

package/dist/codemod/migrations.js

@@ -138,7 +138,7 @@ exports.migrations = {
             ignoredExtensions: CSS_EXTENSIONS,
         },
         {
-            description: "Tries to migrate List component moving 'title' and 'description' props to 'Heading' and 'BodyShort'.",
+            description: "Tries to migrate List component by wrapping it with 'Box' and moving 'title' and 'description' props to 'Heading' and 'BodyShort'.",
             value: "v8-list",
             path: "v8.0.0/list/list",
             ignoredExtensions: CSS_EXTENSIONS,
@@ -185,6 +185,18 @@ exports.migrations = {
             path: "v8.0.0/chips-variant/chips-variant",
             ignoredExtensions: CSS_EXTENSIONS,
         },
+        {
+            description: "Updates variant + data-color props on Button based on current variant prop.",
+            value: "v8-button-variant",
+            path: "v8.0.0/button-variant/button-variant",
+            ignoredExtensions: CSS_EXTENSIONS,
+        },
+        {
+            description: "Updates variant + data-color props on Link based on current variant prop.",
+            value: "v8-link-variant",
+            path: "v8.0.0/link-variant/link-variant",
+            ignoredExtensions: CSS_EXTENSIONS,
+        },
     ],
 };
 /**

package/dist/codemod/transforms/v8.0.0/box/box.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
-const legacy_tokens_1 = require("../../../../darkside/config/legacy.tokens");
+const legacy_tokens_1 = require("../../../../codemod/v8-tokens/config/legacy.tokens");
 const ast_1 = require("../../../utils/ast");
 const lineterminator_1 = require("../../../utils/lineterminator");
 const box_new_1 = __importDefault(require("../box-new/box-new"));

package/dist/codemod/transforms/v8.0.0/button-variant/button-variant.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrationConfig = void 0;
+exports.default = transformer;
+const move_variant_to_data_color_1 = require("../../../utils/move-variant-to-data-color");
+exports.migrationConfig = {
+    component: "Button",
+    prop: "variant",
+    changes: {
+        "primary-neutral": { replacement: "primary", color: "neutral" },
+        "secondary-neutral": { replacement: "secondary", color: "neutral" },
+        "tertiary-neutral": { replacement: "tertiary", color: "neutral" },
+        danger: { replacement: "primary", color: "danger" },
+    },
+};
+function transformer(file, api) {
+    return (0, move_variant_to_data_color_1.moveVariantToDataColor)(file, api, exports.migrationConfig);
+}

package/dist/codemod/transforms/v8.0.0/link-variant/link-variant.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrationConfig = void 0;
+exports.default = transformer;
+const move_variant_to_data_color_1 = require("../../../utils/move-variant-to-data-color");
+exports.migrationConfig = {
+    component: "Link",
+    prop: "variant",
+    changes: {
+        action: { color: "accent" },
+        neutral: { color: "neutral" },
+        subtle: { color: "neutral" },
+    },
+};
+function transformer(file, api) {
+    return (0, move_variant_to_data_color_1.moveVariantToDataColor)(file, api, exports.migrationConfig);
+}

package/dist/codemod/transforms/v8.0.0/primitives-spacing/spacing.js

@@ -52,6 +52,10 @@ function transformer(file, api) {
                         /* padding="32" */
                         attrValue.value = convertSpacingToSpace(attrValue.value);
                     }
+                    else if (attrValue.type === "JSXExpressionContainer" &&
+                        attrValue.expression.type === "StringLiteral") {
+                        attrValue.expression.value = convertSpacingToSpace(attrValue.expression.value);
+                    }
                     else if (attrValue.type === "JSXExpressionContainer") {
                         /* padding={{xs: "16", sm: "32"}} */
                         const expression = attrValue.expression;

package/dist/{darkside → codemod/v8-tokens}/config/TokenStatus.js

@@ -107,27 +107,24 @@ class TokenStatus {
     printMigrationHelp() {
         const imports = {
             css: {
-                old: `import "@navikt/ds-tokens";`,
-                new: `import "@navikt/ds-tokens/darkside-css";`,
+                new: `@use "@navikt/ds-tokens/css";`,
+                link: "https://cdn.jsdelivr.net/npm/@navikt/ds-tokens@7/dist/tokens.css",
             },
             scss: {
-                old: `@use '@navikt/ds-tokens/dist/tokens' as *;`,
-                new: `@use "@navikt/ds-tokens/darkside-scss" as *;`,
+                new: `@use "@navikt/ds-tokens/scss" as *;`,
+                link: "https://cdn.jsdelivr.net/npm/@navikt/ds-tokens@7/dist/tokens.scss",
             },
             less: {
-                old: `@import "~@navikt/ds-tokens/dist/tokens.less";`,
-                new: `@import "~@navikt/ds-tokens/darkside-less";`,
+                new: `@import "~@navikt/ds-tokens/less";`,
+                link: "https://cdn.jsdelivr.net/npm/@navikt/ds-tokens@7/dist/tokens.less",
             },
             js: {
-                old: `import { ... } from "@navikt/ds-tokens/dist/tokens";`,
-                new: `import { ... } from "@navikt/ds-tokens/darkside-js";`,
-            },
-            tailwind: {
-                old: `import config from "@navikt/ds-tailwind";`,
-                new: `import config from "@navikt/ds-tailwind/darkside-tw3";`,
+                new: `import { ... } from "@navikt/ds-tokens/js";`,
+                link: "https://cdn.jsdelivr.net/npm/@navikt/ds-tokens@7/dist/tokens.js",
             },
         };
-        for (const key of Object.keys(imports)) {
+        for (const _key of Object.keys(imports)) {
+            const key = _key;
             const data = this.status[key];
             const legacyNeeded = data.legacy.length > 0;
             const foundUse = legacyNeeded || data.updated.length > 0;
@@ -136,22 +133,24 @@ class TokenStatus {
             }
             console.info(chalk_1.default.underline(`\n${key.toUpperCase()} Tokens Migration`));
             const importStrings = imports[key];
-            console.info(`${chalk_1.default.blue("→")} Add new import: ${chalk_1.default.green(importStrings.new)}`);
+            if (key !== "css") {
+                console.info(`${chalk_1.default.blue("→")} Update import: ${chalk_1.default.green(importStrings.new)}`);
+            }
             if (legacyNeeded) {
-                console.info(`${chalk_1.default.yellow("!")} Keep old import until fully migrated: ${chalk_1.default.dim(importStrings.old)}`);
+                console.info(`${chalk_1.default.yellow("!")} Old tokens still needed until migration is finished. Finish migration now, or add old tokens to project manually:\n${chalk_1.default.blueBright(importStrings.link)}`);
             }
         }
         const componentTokens = this.status.component.legacy.length;
         if (componentTokens > 0) {
             console.info(chalk_1.default.underline(`\nCOMPONENT Tokens Migration`));
             console.info(`${chalk_1.default.yellow("!")} Found ${componentTokens} component token definition${componentTokens > 1 ? "s" : ""} that require manual migration.`);
-            console.info(`We no longer support component tokens. Please migrate to the new darkside tokens using theming or other methods.`);
+            console.info(`We no longer support component tokens. Please migrate to the new v8 tokens using theming or other methods.`);
         }
         const deprecatedTokens = this.status.deprecated.legacy.length;
         if (deprecatedTokens > 0) {
             console.info(chalk_1.default.underline(`\nLEGACY TOKEN DEFINITIONS (--a-token:)`));
             console.info(`${chalk_1.default.yellow("!")} Found ${deprecatedTokens} legacy token definition${deprecatedTokens > 1 ? "s" : ""} that require manual migration.`);
-            console.info(`These are custom property definitions using legacy tokens that need to be updated to use new darkside tokens.`);
+            console.info(`These are custom property definitions using legacy tokens that need to be updated to use new v8 tokens.`);
         }
     }
 }

package/dist/{darkside → codemod/v8-tokens}/config/legacy.tokens.js

@@ -158,51 +158,61 @@ const colors = {
         ref: "",
         raw: "rgba(19, 72, 82, 1)",
         replacement: "",
+        comment: "Lightblue is now info and brand-blue color. Consider using those colors.",
     },
     "lightblue-800": {
         ref: "",
         raw: "rgba(35, 107, 125, 1)",
         replacement: "",
+        comment: "Lightblue is now info and brand-blue color. Consider using those colors.",
     },
     "lightblue-700": {
         ref: "",
         raw: "rgba(54, 141, 168, 1)",
         replacement: "",
+        comment: "Lightblue is now info and brand-blue color. Consider using those colors.",
     },
     "lightblue-600": {
         ref: "",
         raw: "rgba(76, 173, 205, 1)",
         replacement: "",
+        comment: "Lightblue is now info and brand-blue color. Consider using those colors.",
     },
     "lightblue-500": {
         ref: "",
         raw: "rgba(102, 203, 236, 1)",
         replacement: "",
+        comment: "Lightblue is now info and brand-blue color. Consider using those colors.",
     },
     "lightblue-400": {
         ref: "",
         raw: "rgba(124, 218, 248, 1)",
         replacement: "",
+        comment: "Lightblue is now info and brand-blue color. Consider using those colors.",
     },
     "lightblue-300": {
         ref: "",
         raw: "rgba(151, 230, 255, 1)",
         replacement: "",
+        comment: "Lightblue is now info and brand-blue color. Consider using those colors.",
     },
     "lightblue-200": {
         ref: "",
         raw: "rgba(181, 241, 255, 1)",
         replacement: "",
+        comment: "Lightblue is now info and brand-blue color. Consider using those colors.",
     },
     "lightblue-100": {
         ref: "",
         raw: "rgba(216, 249, 255, 1)",
         replacement: "",
+        comment: "Lightblue is now info and brand-blue color. Consider using those colors.",
     },
     "lightblue-50": {
         ref: "",
         raw: "rgba(235, 252, 255, 1)",
         replacement: "",
+        comment: "Lightblue is now info and brand-blue color. Consider using those colors.",
     },
     "green-900": {
         ref: "",
@@ -408,31 +418,37 @@ const colors = {
         ref: "",
         raw: "rgba(2, 5, 9, 0.87)",
         replacement: "",
+        comment: "No replacement available. Use neutral-1000 of you don't need opacity.",
     },
     "grayalpha-800": {
         ref: "",
         raw: "rgba(3, 11, 22, 0.75)",
         replacement: "",
+        comment: "No replacement available. Use neutral-900 of you don't need opacity.",
     },
     "grayalpha-700": {
         ref: "",
         raw: "rgba(1, 11, 24, 0.68)",
         replacement: "",
+        comment: "No replacement available. Use neutral-800 of you don't need opacity.",
     },
     "grayalpha-600": {
         ref: "",
         raw: "rgba(2, 15, 34, 0.6)",
         replacement: "",
+        comment: "No replacement available. Use neutral-700 of you don't need opacity.",
     },
     "grayalpha-500": {
         ref: "",
         raw: "rgba(2, 20, 49, 0.49)",
         replacement: "",
+        comment: "No replacement available. Use neutral-600 of you don't need opacity.",
     },
     "grayalpha-400": {
         ref: "",
         raw: "rgba(5, 23, 51, 0.34)",
         replacement: "",
+        comment: "No replacement available. Use neutral-500 of you don't need opacity.",
     },
     "grayalpha-300": {
         ref: "",
@@ -507,92 +523,95 @@ const colors = {
     "data-border-6": {
         ref: "purple-400",
         raw: "rgba(130, 105, 162, 1)",
-        replacement: "",
+        replacement: "border-meta-purple",
     },
     "data-border-5": {
         ref: "green-400",
         raw: "rgba(42, 167, 88, 1)",
-        replacement: "",
+        replacement: "border-success",
     },
     "data-border-4": {
         ref: "lightblue-700",
         raw: "rgba(54, 141, 168, 1)",
         replacement: "",
+        comment: "Lightblue is now info and brand-blue color.",
     },
     "data-border-3": {
         ref: "orange-600",
         raw: "rgba(199, 115, 0, 1)",
-        replacement: "",
+        replacement: "border-warning",
     },
     "data-border-2": {
         ref: "deepblue-500",
         raw: "rgba(0, 91, 130, 1)",
-        replacement: "",
+        replacement: "border-brand-blue",
     },
     "data-border-1": {
         ref: "blue-400",
         raw: "rgba(51, 134, 224, 1)",
-        replacement: "",
+        replacement: "border-accent",
     },
     "data-surface-6-subtle": {
         ref: "purple-200",
         raw: "rgba(192, 178, 210, 1)",
-        replacement: "",
+        replacement: "meta-purple-300",
     },
     "data-surface-6": {
         ref: "purple-400",
         raw: "rgba(130, 105, 162, 1)",
-        replacement: "",
+        replacement: "meta-purple-500",
     },
     "data-surface-5-subtle": {
         ref: "green-200",
         raw: "rgba(153, 222, 173, 1)",
-        replacement: "",
+        replacement: "success-300",
     },
     "data-surface-5": {
         ref: "green-400",
         raw: "rgba(42, 167, 88, 1)",
-        replacement: "",
+        replacement: "success-500",
     },
     "data-surface-4-subtle": {
         ref: "lightblue-500",
         raw: "rgba(102, 203, 236, 1)",
         replacement: "",
+        comment: "Lightblue is now info and brand-blue color.",
     },
     "data-surface-4": {
         ref: "lightblue-700",
         raw: "rgba(54, 141, 168, 1)",
         replacement: "",
+        comment: "Lightblue is now info and brand-blue color.",
     },
     "data-surface-3-subtle": {
         ref: "orange-300",
         raw: "rgba(255, 193, 102, 1)",
-        replacement: "",
+        replacement: "warning-400",
     },
     "data-surface-3": {
         ref: "orange-600",
         raw: "rgba(199, 115, 0, 1)",
-        replacement: "",
+        replacement: "warning-700",
     },
     "data-surface-2-subtle": {
         ref: "deepblue-200",
         raw: "rgba(153, 196, 221, 1)",
-        replacement: "",
+        replacement: "brand-blue-300",
     },
     "data-surface-2": {
         ref: "deepblue-500",
         raw: "rgba(0, 91, 130, 1)",
-        replacement: "",
+        replacement: "brand-blue-600",
     },
     "data-surface-1-subtle": {
         ref: "blue-100",
         raw: "rgba(204, 225, 255, 1)",
-        replacement: "",
+        replacement: "accent-200",
     },
     "data-surface-1": {
         ref: "blue-400",
         raw: "rgba(51, 134, 224, 1)",
-        replacement: "",
+        replacement: "accent-500",
     },
     "text-on-alt-3": {
         ref: "white",
@@ -644,7 +663,6 @@ const colors = {
         raw: "rgba(255, 255, 255, 1)",
         replacement: "text-neutral-contrast",
     },
-    /* TODO */
     "text-action": {
         ref: "blue-500",
         raw: "rgba(0, 103, 197, 1)",
@@ -693,8 +711,8 @@ const colors = {
     "surface-alt-3-strong": {
         ref: "deepblue-800",
         raw: "rgba(0, 52, 83, 1)",
-        comment: "Use 'bg-brand-blue-moderate' in theme 'dark'-mode.",
         replacement: "",
+        comment: "Use 'bg-brand-blue-moderate' in theme 'dark'-mode.",
     },
     "surface-alt-3-moderate": {
         ref: "deepblue-200",
@@ -936,6 +954,7 @@ const colors = {
     "surface-inverted-active": {
         ref: "gray-700",
         raw: "rgba(82, 89, 98, 1)",
+        comment: "Use 'bg-neutral-strong-pressed' for similar color.",
         replacement: "",
     },
     "surface-inverted-hover": {
@@ -1176,10 +1195,12 @@ const colors = {
         ref: "",
         raw: "rgba(255, 255, 255, 1)",
         replacement: "",
+        comment: "Use 'white' CSS color.",
     },
     transparent: {
         ref: "",
         raw: "rgba(255, 255, 255, 0)",
+        comment: "Use 'transparent' CSS color.",
         replacement: "",
     },
 };
@@ -1279,38 +1300,44 @@ const tokensWithoutRegex = Object.assign(Object.assign({}, colorWithTailwindConv
     }, "shadow-xlarge": {
         ref: "",
         raw: "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)",
-        replacement: "",
+        replacement: "shadow-dialog",
         twOld: "shadow-xlarge",
     }, "shadow-large": {
         ref: "",
         raw: "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.12)",
         replacement: "",
         twOld: "shadow-large",
+        comment: "New design-language has removed use of shadows besides on dialog, modal or popup elements where `shadow-dialog` is used.",
     }, "shadow-medium": {
         ref: "",
         raw: "0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.15)",
         replacement: "",
         twOld: "shadow-medium",
+        comment: "New design-language has removed use of shadows besides on dialog, modal or popup elements where `shadow-dialog` is used.",
     }, "shadow-small": {
         ref: "",
         raw: "0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.18)",
         replacement: "",
         twOld: "shadow-small",
+        comment: "New design-language has removed use of shadows besides on dialog, modal or popup elements where `shadow-dialog` is used.",
     }, "shadow-xsmall": {
         ref: "",
         raw: "0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)",
         replacement: "",
         twOld: "shadow-xsmall",
+        comment: "New design-language has removed use of shadows besides on dialog, modal or popup elements where `shadow-dialog` is used.",
     }, "shadow-focus-inverted": {
         ref: "",
         raw: "0 0 0 3px rgba(153, 195, 255, 1)",
         replacement: "",
         twOld: "shadow-focus-inverted",
+        comment: "This is now handled by light/dark theme.",
     }, "shadow-focus": {
         ref: "",
         raw: "0 0 0 3px rgba(0, 52, 125, 1)",
         replacement: "",
         twOld: "shadow-focus",
+        comment: "We now use `outline: 3px solid var(--ax-border-focus)` + `outline-offset: 3px`",
     }, "border-radius-full": {
         ref: "",
         raw: "9999px",
@@ -1365,17 +1392,20 @@ const tokensWithoutRegex = Object.assign(Object.assign({}, colorWithTailwindConv
         ref: "",
         raw: "3000",
         replacement: "",
+        comment: "Use `z-index: 3000` as replacement",
         twOld: "z-tooltip",
         twNew: "z-[3000]",
     }, "z-index-focus": {
         ref: "",
         raw: "10",
+        comment: "Use `z-index: 10` as replacement",
         replacement: "",
         twOld: "z-focus",
         twNew: "z-[10]",
     }, "z-index-popover": {
         ref: "",
         raw: "1000",
+        comment: "Use `z-index: 1000` as replacement",
         replacement: "",
         twOld: "z-popover",
         twNew: "z-[1000]",
@@ -1515,6 +1545,7 @@ const tokensWithoutRegex = Object.assign(Object.assign({}, colorWithTailwindConv
         ref: "",
         raw: "576px",
         replacement: "",
+        comment: "Use `max-width: 576px` as replacement",
         twOld: "max-w-text",
     }, "breakpoint-2xl-down": {
         ref: "",

package/dist/{darkside → codemod/v8-tokens}/config/token-regex.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompositeTwRegex = createCompositeTwRegex;
-exports.createSingleTwRegex = createSingleTwRegex;
 exports.getFrameworkRegexes = getFrameworkRegexes;
 exports.getTokenRegex = getTokenRegex;
-const translate_token_1 = require("../../codemod/utils/translate-token");
+const translate_token_1 = require("../../utils/translate-token");
 const createTwRegexForBreakpoints = (token) => new RegExp(`(?<!:)(?<=\\s|^)${token}:(?=\\w)`, "gm");
 function getFrameworkRegexes({ token, twString, legacy = false, }) {
     const regexes = {
@@ -43,10 +42,7 @@ function getTokenRegex(variable, format) {
     }
 }
 function createCompositeTwRegex(tokens) {
-    return new RegExp(`(?<!:)(\\s|^)?(${tokens.join("|")}|${tokens
+    return new RegExp(`(?<!-)(?<!:)(\\s|^)?(${tokens.join("|")}|${tokens
         .map((t) => `:${t}`)
         .join("|")})(?=\\s|$|[^\\w-])`, "gm");
 }
-function createSingleTwRegex(token) {
-    return new RegExp(`(?<!:)(\\s|^)?(${token})(?=\\s|$|[^\\w-])`, "gm");
-}

package/dist/{darkside/config/darkside.tokens.js → codemod/v8-tokens/config/v8.tokens.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.darksideTokenConfig = void 0;
+exports.v8TokenConfig = void 0;
 const token_regex_1 = require("./token-regex");
 const token_utils_1 = require("./token.utils");
 const colors = [
@@ -384,7 +384,7 @@ const newTokensWithoutRegex = Object.assign(Object.assign({}, colors.reduce((acc
     acc[token] = (0, token_utils_1.generateBgTwTags)(token, true);
     return acc;
 }, {})), { "opacity-disabled": "opacity-ax-disabled", "shadow-dialog": "shadow-ax-dialog", "font-weight-regular": "font-ax-regular", "font-weight-bold": "font-ax-bold", "font-size-small": "text-ax-small", "font-size-medium": "text-ax-medium", "font-size-large": "text-ax-large", "font-size-xlarge": "text-ax-xlarge", "font-size-heading-xsmall": "text-ax-heading-xsmall", "font-size-heading-small": "text-ax-heading-small", "font-size-heading-medium": "text-ax-heading-medium", "font-size-heading-large": "text-ax-heading-large", "font-size-heading-xlarge": "text-ax-heading-xlarge", "font-size-heading-2xlarge": "text-ax-heading-2xlarge", "font-line-height-medium": "leading-ax-medium", "font-line-height-large": "leading-ax-large", "font-line-height-xlarge": "leading-ax-xlarge", "font-line-height-heading-xsmall": "leading-ax-heading-xsmall", "font-line-height-heading-small": "leading-ax-heading-small", "font-line-height-heading-medium": "leading-ax-heading-medium", "font-line-height-heading-large": "leading-ax-heading-large", "font-line-height-heading-xlarge": "leading-ax-heading-xlarge", "font-line-height-heading-2xlarge": "leading-ax-heading-2xlarge", "font-family": "font-font-family", "breakpoint-2xl-down": null, "breakpoint-2xl": "ax-2xl", "breakpoint-xl-down": null, "breakpoint-xl": "ax-xl", "breakpoint-lg-down": null, "breakpoint-lg": "ax-lg", "breakpoint-md-down": null, "breakpoint-md": "ax-md", "breakpoint-sm-down": null, "breakpoint-sm": "ax-sm", "breakpoint-xs": null, "radius-full": (0, token_utils_1.generateRoundedTwTags)("full"), "radius-12": (0, token_utils_1.generateRoundedTwTags)("12"), "radius-8": (0, token_utils_1.generateRoundedTwTags)("8"), "radius-4": (0, token_utils_1.generateRoundedTwTags)("4"), "radius-2": (0, token_utils_1.generateRoundedTwTags)("2"), "space-128": null, "space-96": null, "space-80": null, "space-72": null, "space-64": null, "space-56": null, "space-48": null, "space-44": null, "space-40": null, "space-36": null, "space-32": null, "space-28": null, "space-24": null, "space-20": null, "space-16": null, "space-12": null, "space-8": null, "space-6": null, "space-4": null, "space-2": null, "space-1": null, "space-0": null });
-const darksideTokenConfig = Object.entries(newTokensWithoutRegex).reduce((acc, [name, tw]) => {
+const v8TokenConfig = Object.entries(newTokensWithoutRegex).reduce((acc, [name, tw]) => {
     acc[name] = {
         tw,
         regexes: (0, token_regex_1.getFrameworkRegexes)({
@@ -395,4 +395,4 @@ const darksideTokenConfig = Object.entries(newTokensWithoutRegex).reduce((acc, [
     };
     return acc;
 }, {});
-exports.darksideTokenConfig = darksideTokenConfig;
+exports.v8TokenConfig = v8TokenConfig;

package/dist/{darkside → codemod/v8-tokens}/index.js

@@ -3,12 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.darksideCommand = darksideCommand;
+exports.v8TokensCommand = v8TokensCommand;
 const chalk_1 = __importDefault(require("chalk"));
 const commander_1 = require("commander");
 const run_tooling_js_1 = require("./run-tooling.js");
 const program = new commander_1.Command();
-function darksideCommand() {
+function v8TokensCommand() {
     program.allowExcessArguments();
     program.name(`${chalk_1.default.blueBright(`npx @navikt/aksel v8-tokens`)}`);
     program

package/dist/{darkside → codemod/v8-tokens}/run-tooling.js

@@ -51,17 +51,17 @@ const enquirer_1 = __importDefault(require("enquirer"));
 const fast_glob_1 = __importDefault(require("fast-glob"));
 const jscodeshift = __importStar(require("jscodeshift/src/Runner"));
 const node_path_1 = __importDefault(require("node:path"));
-const codeshift_utils_1 = require("../codemod/codeshift.utils");
-const validation_1 = require("../codemod/validation");
+const codeshift_utils_1 = require("../codeshift.utils");
+const validation_1 = require("../validation");
 const print_remaining_1 = require("./tasks/print-remaining");
 const status_1 = require("./tasks/status");
 // Constants
 const TRANSFORMS = {
-    "css-tokens": "./transforms/darkside-tokens-css",
-    "scss-tokens": "./transforms/darkside-tokens-scss",
-    "less-tokens": "./transforms/darkside-tokens-less",
-    "js-tokens": "./transforms/darkside-tokens-js",
-    "tailwind-tokens": "./transforms/darkside-tokens-tailwind",
+    "css-tokens": "./transforms/v8-tokens-css",
+    "scss-tokens": "./transforms/v8-tokens-scss",
+    "less-tokens": "./transforms/v8-tokens-less",
+    "js-tokens": "./transforms/v8-tokens-js",
+    "tailwind-tokens": "./transforms/v8-tokens-tailwind",
 };
 /**
  * Main entry point for the tooling system

package/dist/{darkside → codemod/v8-tokens}/tasks/status.js

@@ -8,11 +8,12 @@ exports.getCharacterPositionInFile = getCharacterPositionInFile;
 exports.getLineStarts = getLineStarts;
 const cli_progress_1 = __importDefault(require("cli-progress"));
 const node_fs_1 = __importDefault(require("node:fs"));
-const translate_token_1 = require("../../codemod/utils/translate-token");
+const translate_token_1 = require("../../utils/translate-token");
 const TokenStatus_1 = require("../config/TokenStatus");
-const darkside_tokens_1 = require("../config/darkside.tokens");
 const legacy_component_tokens_1 = require("../config/legacy-component.tokens");
 const legacy_tokens_1 = require("../config/legacy.tokens");
+const token_regex_1 = require("../config/token-regex");
+const v8_tokens_1 = require("../config/v8.tokens");
 const StatusStore = new TokenStatus_1.TokenStatus();
 /**
  * Get the status of the tokens in the files
@@ -28,12 +29,13 @@ function getStatus(files, action = "print") {
     }
     StatusStore.initStatus();
     /**
-     * Prepare search terms for legacy and darkside tokens.
+     * Prepare search terms for legacy and v8 tokens.
      * By pre-computing these sets, we save re-calculating them for each file,
      * improving performance when processing large numbers of files.
      */
     const legacySearchTerms = getLegacySearchTerms();
-    const darksideSearchTerms = getDarksideSearchTerms();
+    const v8TokensSearchTerms = getV8TokensSearchTerms();
+    const deprecatedAxSearchTerms = getDeprecatedAxSearchTerms();
     const legacyComponentTokensSet = new Set(legacy_component_tokens_1.legacyComponentTokenList);
     /**
      * Pre-computed regex for legacy component tokens
@@ -152,13 +154,13 @@ function getStatus(files, action = "print") {
                     canAutoMigrate: false,
                     fileName,
                     name: definitionMatch[1],
-                    comment: "Legacy token definition - requires manual migration to new darkside tokens",
+                    comment: "Legacy token definition - requires manual migration to new v8 tokens",
                 });
             }
             definitionMatch = legacyDefinitionRegex.exec(fileSrc);
         }
-        for (const [newTokenName, config] of Object.entries(darkside_tokens_1.darksideTokenConfig)) {
-            const terms = darksideSearchTerms.get(newTokenName);
+        for (const [newTokenName, config] of Object.entries(v8_tokens_1.v8TokenConfig)) {
+            const terms = v8TokensSearchTerms.get(newTokenName);
             /* Optimization: Check if any of the search terms exist in the file words set */
             let found = false;
             if (terms) {
@@ -191,6 +193,43 @@ function getStatus(files, action = "print") {
                 }
             }
         }
+        /**
+         * Detect deprecated --ax-border-radius-* tokens that should be migrated to --ax-radius-*
+         */
+        for (const [deprecatedToken, config] of Object.entries(deprecatedAxTokenConfig)) {
+            const terms = deprecatedAxSearchTerms.get(deprecatedToken);
+            let found = false;
+            if (terms) {
+                for (const term of terms) {
+                    if (fileWords.has(term)) {
+                        found = true;
+                        break;
+                    }
+                }
+            }
+            if (!found) {
+                continue;
+            }
+            for (const [regexKey, regex] of Object.entries(config.regexes)) {
+                if (!regex) {
+                    continue;
+                }
+                let match = regex.exec(fileSrc);
+                while (match) {
+                    const { row, column } = getCharacterPositionInFile(match.index, getLineStartsLazy());
+                    StatusStore.add({
+                        isLegacy: true,
+                        type: regexKey,
+                        columnNumber: column,
+                        lineNumber: row,
+                        canAutoMigrate: true,
+                        fileName,
+                        name: match[0],
+                    });
+                    match = regex.exec(fileSrc);
+                }
+            }
+        }
         if (action === "print") {
             progressBar.update(index + 1, { fileName });
         }
@@ -223,9 +262,9 @@ function getLegacySearchTerms() {
     }
     return legacySearchTerms;
 }
-function getDarksideSearchTerms() {
-    const darksideSearchTerms = new Map();
-    for (const [newTokenName, config] of Object.entries(darkside_tokens_1.darksideTokenConfig)) {
+function getV8TokensSearchTerms() {
+    const v8TokensSearchTerms = new Map();
+    for (const [newTokenName, config] of Object.entries(v8_tokens_1.v8TokenConfig)) {
         const terms = new Set();
         const tokenName = `--ax-${newTokenName}`;
         terms.add(tokenName);
@@ -238,9 +277,69 @@ function getDarksideSearchTerms() {
                 terms.add(t.trim());
             });
         }
-        darksideSearchTerms.set(newTokenName, terms);
+        v8TokensSearchTerms.set(newTokenName, terms);
+    }
+    return v8TokensSearchTerms;
+}
+/**
+ * Configuration for deprecated --ax-* tokens that should be migrated
+ */
+const deprecatedAxTokenConfig = {
+    "border-radius-full": {
+        replacement: "--ax-radius-full",
+        regexes: (0, token_regex_1.getFrameworkRegexes)({
+            legacy: false,
+            token: "--ax-border-radius-full",
+            twString: null,
+        }),
+    },
+    "border-radius-small": {
+        replacement: "--ax-radius-2",
+        regexes: (0, token_regex_1.getFrameworkRegexes)({
+            legacy: false,
+            token: "--ax-border-radius-small",
+            twString: null,
+        }),
+    },
+    "border-radius-medium": {
+        replacement: "--ax-radius-4",
+        regexes: (0, token_regex_1.getFrameworkRegexes)({
+            legacy: false,
+            token: "--ax-border-radius-medium",
+            twString: null,
+        }),
+    },
+    "border-radius-large": {
+        replacement: "--ax-radius-8",
+        regexes: (0, token_regex_1.getFrameworkRegexes)({
+            legacy: false,
+            token: "--ax-border-radius-large",
+            twString: null,
+        }),
+    },
+    "border-radius-xlarge": {
+        replacement: "--ax-radius-12",
+        regexes: (0, token_regex_1.getFrameworkRegexes)({
+            legacy: false,
+            token: "--ax-border-radius-xlarge",
+            twString: null,
+        }),
+    },
+};
+function getDeprecatedAxSearchTerms() {
+    const deprecatedAxSearchTerms = new Map();
+    for (const deprecatedToken of Object.keys(deprecatedAxTokenConfig)) {
+        const terms = new Set();
+        const tokenName = `--ax-${deprecatedToken}`;
+        terms.add(tokenName);
+        terms.add((0, translate_token_1.translateToken)(tokenName, "scss"));
+        terms.add((0, translate_token_1.translateToken)(tokenName, "less"));
+        /* JS tokens use Ax prefix */
+        const jsToken = (0, translate_token_1.translateToken)(tokenName, "js");
+        terms.add(jsToken);
+        deprecatedAxSearchTerms.set(deprecatedToken, terms);
     }
-    return darksideSearchTerms;
+    return deprecatedAxSearchTerms;
 }
 /**
  * Given the content of a file, returns an array of line start positions.

package/dist/{darkside/transforms/darkside-tokens-css.js → codemod/v8-tokens/transforms/v8-tokens-css.js}

@@ -2,6 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
 const legacy_tokens_1 = require("../config/legacy.tokens");
+const axBorderRadiusMap = {
+    "--ax-border-radius-full": "--ax-radius-full",
+    "--ax-border-radius-small": "--ax-radius-2",
+    "--ax-border-radius-medium": "--ax-radius-4",
+    "--ax-border-radius-large": "--ax-radius-8",
+    "--ax-border-radius-xlarge": "--ax-radius-12",
+};
 function transformer(file) {
     let src = file.source;
     /*
@@ -17,5 +24,14 @@ function transformer(file) {
         }
         return match;
     });
+    /*
+      Replace usages: --ax-border-radius-(full|small|medium|large|xlarge) -> --ax-radius-(full|2|4|8|12)
+      Matches "--ax-border-radius-*" with word boundaries.
+      Uses negative lookahead to skip definitions (--ax-border-radius-small:)
+    */
+    src = src.replace(/(?<![\w-])(--ax-border-radius-(?:full|small|medium|large|xlarge))(?![\w-])(?!\s*:)/g, (match, tokenName) => {
+        var _a;
+        return (_a = axBorderRadiusMap[tokenName]) !== null && _a !== void 0 ? _a : match;
+    });
     return src;
 }

package/dist/codemod/v8-tokens/transforms/v8-tokens-js.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+const imports_1 = require("../../utils/imports");
+const lineterminator_1 = require("../../utils/lineterminator");
+const packageImports_1 = __importDefault(require("../../utils/packageImports"));
+const translate_token_1 = require("../../utils/translate-token");
+const legacy_tokens_1 = require("../config/legacy.tokens");
+const axBorderRadiusMap = {
+    AxBorderRadiusFull: "AxRadiusFull",
+    AxBorderRadiusSmall: "AxRadius2",
+    AxBorderRadiusMedium: "AxRadius4",
+    AxBorderRadiusLarge: "AxRadius8",
+    AxBorderRadiusXlarge: "AxRadius12",
+};
+function transformer(file, api) {
+    let src = file.source;
+    const j = api.jscodeshift;
+    let root = j(file.source);
+    const jsImport = root.find(j.ImportDeclaration).filter((x) => {
+        return ["@navikt/ds-tokens/dist/tokens"].includes(x.node.source.value);
+    });
+    if (jsImport.size() > 0) {
+        for (const [oldToken, config] of Object.entries(legacy_tokens_1.legacyTokenConfig)) {
+            const oldCSSVar = `--a-${oldToken}`;
+            const oldJsVar = (0, translate_token_1.translateToken)(oldCSSVar, "js");
+            let foundName = null;
+            (0, imports_1.getImportSpecifier)(j, root, oldJsVar, "@navikt/ds-tokens/dist/tokens").forEach((x) => {
+                foundName = x.node.imported.name;
+            });
+            if (!foundName) {
+                continue;
+            }
+            if (config.replacement.length > 0) {
+                /* We remove the prefix */
+                const jsToken = (0, translate_token_1.translateToken)(`--ax-${config.replacement}`, "js").slice(2);
+                const localName = (0, packageImports_1.default)(j, root, {
+                    fromImport: "@navikt/ds-tokens/dist/tokens",
+                    toImport: "@navikt/ds-tokens/js",
+                    fromName: foundName,
+                    toName: jsToken,
+                    ignoreAlias: true,
+                });
+                let code = root.toSource((0, lineterminator_1.getLineTerminator)(src));
+                const rgx = new RegExp(`(\\s|^)?(${localName})(?=\\s|$|[^\\w-])`, "gm");
+                code = code.replace(rgx, jsToken);
+                src = code;
+                root = j(code);
+            }
+        }
+    }
+    let output = root.toSource((0, lineterminator_1.getLineTerminator)(src));
+    const jsV8TokenImport = root.find(j.ImportDeclaration).filter((x) => {
+        return ["@navikt/ds-tokens/js"].includes(x.node.source.value);
+    });
+    if (jsV8TokenImport.size() > 0) {
+        /*
+        Replace usages: AxBorderRadius(Full|Small|Medium|Large|Xlarge) -> AxRadius(Full|2|4|8|12)
+      */
+        output = output.replace(/(?<!\w)(AxBorderRadius(?:Full|Small|Medium|Large|Xlarge))(?!\w)/g, (match, tokenName) => {
+            var _a;
+            return (_a = axBorderRadiusMap[tokenName]) !== null && _a !== void 0 ? _a : match;
+        });
+    }
+    return output;
+}

package/dist/codemod/v8-tokens/transforms/v8-tokens-less.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+const translate_token_1 = require("../../utils/translate-token");
+const legacy_tokens_1 = require("../config/legacy.tokens");
+const axBorderRadiusMap = {
+    "@ax-border-radius-full": "@ax-radius-full",
+    "@ax-border-radius-small": "@ax-radius-2",
+    "@ax-border-radius-medium": "@ax-radius-4",
+    "@ax-border-radius-large": "@ax-radius-8",
+    "@ax-border-radius-xlarge": "@ax-radius-12",
+};
+function transformer(file) {
+    let src = file.source;
+    for (const config of Object.values(legacy_tokens_1.legacyTokenConfig)) {
+        if (config.replacement.length > 0) {
+            src = src.replace(config.regexes.less, (0, translate_token_1.translateToken)(`--ax-${config.replacement}`, "less"));
+        }
+    }
+    /*
+      Replace usages: @ax-border-radius-(full|small|medium|large|xlarge) -> @ax-radius-(full|2|4|8|12)
+    */
+    src = src.replace(/(?<!\w)(@ax-border-radius-(?:full|small|medium|large|xlarge))(?!\w)/g, (match, tokenName) => {
+        var _a;
+        return (_a = axBorderRadiusMap[tokenName]) !== null && _a !== void 0 ? _a : match;
+    });
+    return src;
+}

package/dist/codemod/v8-tokens/transforms/v8-tokens-scss.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+const translate_token_1 = require("../../utils/translate-token");
+const legacy_tokens_1 = require("../config/legacy.tokens");
+const axBorderRadiusMap = {
+    "$ax-border-radius-full": "$ax-radius-full",
+    "$ax-border-radius-small": "$ax-radius-2",
+    "$ax-border-radius-medium": "$ax-radius-4",
+    "$ax-border-radius-large": "$ax-radius-8",
+    "$ax-border-radius-xlarge": "$ax-radius-12",
+};
+function transformer(file) {
+    let src = file.source;
+    for (const config of Object.values(legacy_tokens_1.legacyTokenConfig)) {
+        if (config.replacement.length > 0) {
+            src = src.replace(config.regexes.scss, (0, translate_token_1.translateToken)(`--ax-${config.replacement}`, "scss"));
+        }
+    }
+    /*
+      Replace usages: $ax-border-radius-(full|small|medium|large|xlarge) -> $ax-radius-(full|2|4|8|12)
+    */
+    src = src.replace(/(?<!\w)(\$ax-border-radius-(?:full|small|medium|large|xlarge))(?!\w)/g, (match, tokenName) => {
+        var _a;
+        return (_a = axBorderRadiusMap[tokenName]) !== null && _a !== void 0 ? _a : match;
+    });
+    return src;
+}

package/dist/index.js

@@ -16,7 +16,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const chalk_1 = __importDefault(require("chalk"));
 const commander_1 = require("commander");
 const index_1 = require("./codemod/index");
-const darkside_1 = require("./darkside");
+const v8_tokens_1 = require("./codemod/v8-tokens");
 const help_1 = require("./help");
 const version_1 = require("./version");
 run();
@@ -36,12 +36,12 @@ function run() {
         }
         if (args[0] === "codemod") {
             if (args.includes("v8-tokens")) {
-                (0, darkside_1.darksideCommand)();
+                (0, v8_tokens_1.v8TokensCommand)();
                 return;
             }
             (0, index_1.codemodCommand)((migration) => {
                 if (migration === "v8-tokens") {
-                    (0, darkside_1.darksideCommand)();
+                    (0, v8_tokens_1.v8TokensCommand)();
                 }
             });
             return;

package/dist/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = "7.40.0";
+exports.VERSION = "8.0.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "7.40.0",
+  "version": "8.0.0",
   "description": "Aksel command line interface. Codemods and other utilities for Aksel users.",
   "author": "Aksel | Nav designsystem team",
   "license": "MIT",
@@ -33,8 +33,8 @@
     "url": "https://github.com/navikt/aksel/issues"
   },
   "dependencies": {
-    "@navikt/ds-css": "^7.40.0",
-    "@navikt/ds-tokens": "^7.40.0",
+    "@navikt/ds-css": "^8.0.0",
+    "@navikt/ds-tokens": "^8.0.0",
     "chalk": "5.6.2",
     "cli-progress": "3.12.0",
     "clipboardy": "5.0.1",

package/dist/darkside/transforms/darkside-tokens-js.js

@@ -1,50 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = transformer;
-const imports_1 = require("../../codemod/utils/imports");
-const lineterminator_1 = require("../../codemod/utils/lineterminator");
-const packageImports_1 = __importDefault(require("../../codemod/utils/packageImports"));
-const translate_token_1 = require("../../codemod/utils/translate-token");
-const legacy_tokens_1 = require("../config/legacy.tokens");
-function transformer(file, api) {
-    let src = file.source;
-    const j = api.jscodeshift;
-    let root = j(file.source);
-    const jsImport = root.find(j.ImportDeclaration).filter((x) => {
-        return ["@navikt/ds-tokens/dist/tokens"].includes(x.node.source.value);
-    });
-    if (jsImport.size() === 0) {
-        return src;
-    }
-    for (const [oldToken, config] of Object.entries(legacy_tokens_1.legacyTokenConfig)) {
-        const oldCSSVar = `--a-${oldToken}`;
-        const oldJsVar = (0, translate_token_1.translateToken)(oldCSSVar, "js");
-        let foundName = null;
-        (0, imports_1.getImportSpecifier)(j, root, oldJsVar, "@navikt/ds-tokens/dist/tokens").forEach((x) => {
-            foundName = x.node.imported.name;
-        });
-        if (!foundName) {
-            continue;
-        }
-        if (config.replacement.length > 0) {
-            /* We remove the prefix */
-            const jsToken = (0, translate_token_1.translateToken)(`--ax-${config.replacement}`, "js").slice(2);
-            const localName = (0, packageImports_1.default)(j, root, {
-                fromImport: "@navikt/ds-tokens/dist/tokens",
-                toImport: "@navikt/ds-tokens/darkside-js",
-                fromName: foundName,
-                toName: jsToken,
-                ignoreAlias: true,
-            });
-            let code = root.toSource((0, lineterminator_1.getLineTerminator)(src));
-            const rgx = new RegExp(`(\\s|^)?(${localName})(?=\\s|$|[^\\w-])`, "gm");
-            code = code.replace(rgx, jsToken);
-            src = code;
-            root = j(code);
-        }
-    }
-    return root.toSource((0, lineterminator_1.getLineTerminator)(src));
-}

package/dist/darkside/transforms/darkside-tokens-less.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = transformer;
-const translate_token_1 = require("../../codemod/utils/translate-token");
-const legacy_tokens_1 = require("../config/legacy.tokens");
-function transformer(file) {
-    let src = file.source;
-    for (const config of Object.values(legacy_tokens_1.legacyTokenConfig)) {
-        if (config.replacement.length > 0) {
-            src = src.replace(config.regexes.less, (0, translate_token_1.translateToken)(`--ax-${config.replacement}`, "less"));
-        }
-    }
-    return src;
-}

package/dist/darkside/transforms/darkside-tokens-scss.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = transformer;
-const translate_token_1 = require("../../codemod/utils/translate-token");
-const legacy_tokens_1 = require("../config/legacy.tokens");
-function transformer(file) {
-    let src = file.source;
-    for (const config of Object.values(legacy_tokens_1.legacyTokenConfig)) {
-        if (config.replacement.length > 0) {
-            src = src.replace(config.regexes.scss, (0, translate_token_1.translateToken)(`--ax-${config.replacement}`, "scss"));
-        }
-    }
-    return src;
-}