@navikt/ds-tokens 7.21.1 → 7.23.0

package/dist/tokens.js

@@ -14,7 +14,8 @@ export const ABreakpointXlDown = "1279px";
 export const ABreakpoint2xl = "1440px";
 export const ABreakpoint2xlDown = "1439px";
 export const ATextWidthMax = "576px";
-export const AFontFamily = "'Source Sans 3', 'Source Sans Pro', Arial, sans-serif";
+export const AFontFamily =
+  "'Source Sans 3', 'Source Sans Pro', Arial, sans-serif";
 export const AFontLineHeightHeading2xlarge = "3.25rem";
 export const AFontLineHeightHeadingXlarge = "2.5rem";
 export const AFontLineHeightHeadingLarge = "2.25rem";
@@ -175,6 +176,11 @@ export const ADataBorder3 = "rgba(199, 115, 0, 1)";
 export const ADataBorder4 = "rgba(54, 141, 168, 1)";
 export const ADataBorder5 = "rgba(42, 167, 88, 1)";
 export const ADataBorder6 = "rgba(130, 105, 162, 1)";
+export const ARadius2 = "2px";
+export const ARadius4 = "4px";
+export const ARadius8 = "8px";
+export const ARadius12 = "12px";
+export const ARadiusFull = "9999px";
 export const ASpace128 = "8rem";
 export const ASpace96 = "6rem";
 export const ASpace80 = "5rem";
@@ -302,11 +308,16 @@ export const APurple800 = "rgba(48, 31, 70, 1)";
 export const APurple900 = "rgba(31, 20, 47, 1)";
 export const AShadowFocus = "0 0 0 3px rgba(0, 52, 125, 1)";
 export const AShadowFocusInverted = "0 0 0 3px rgba(153, 195, 255, 1)";
-export const AShadowXsmall = "0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)";
-export const AShadowSmall = "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)";
-export const AShadowMedium = "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)";
-export const AShadowLarge = "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)";
-export const AShadowXlarge = "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)";
+export const AShadowXsmall =
+  "0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)";
+export const AShadowSmall =
+  "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)";
+export const AShadowMedium =
+  "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)";
+export const AShadowLarge =
+  "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)";
+export const AShadowXlarge =
+  "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)";
 export const ASpacing0 = "0";
 export const ASpacing1 = "0.25rem";
 export const ASpacing2 = "0.5rem";

package/dist/tokens.less

@@ -174,6 +174,11 @@
 @a-data-border-4: rgba(54, 141, 168, 1);
 @a-data-border-5: rgba(42, 167, 88, 1);
 @a-data-border-6: rgba(130, 105, 162, 1);
+@a-radius-2: 2px;
+@a-radius-4: 4px;
+@a-radius-8: 8px;
+@a-radius-12: 12px;
+@a-radius-full: 9999px;
 @a-space-128: 8rem;
 @a-space-96: 6rem;
 @a-space-80: 5rem;

package/dist/tokens.scss

@@ -174,6 +174,11 @@ $a-data-border-3: rgba(199, 115, 0, 1);
 $a-data-border-4: rgba(54, 141, 168, 1);
 $a-data-border-5: rgba(42, 167, 88, 1);
 $a-data-border-6: rgba(130, 105, 162, 1);
+$a-radius-2: 2px;
+$a-radius-4: 4px;
+$a-radius-8: 8px;
+$a-radius-12: 12px;
+$a-radius-full: 9999px;
 $a-space-128: 8rem;
 $a-space-96: 6rem;
 $a-space-80: 5rem;

package/docs.json

@@ -488,7 +488,12 @@
     { "name": "--a-border-radius-medium", "value": "4px" },
     { "name": "--a-border-radius-large", "value": "8px" },
     { "name": "--a-border-radius-xlarge", "value": "12px" },
-    { "name": "--a-border-radius-full", "value": "9999px" }
+    { "name": "--a-border-radius-full", "value": "9999px" },
+    { "name": "--a-radius-2", "value": "2px" },
+    { "name": "--a-radius-4", "value": "4px" },
+    { "name": "--a-radius-8", "value": "8px" },
+    { "name": "--a-radius-12", "value": "12px" },
+    { "name": "--a-radius-full", "value": "9999px" }
   ],
   "shadow": [
     {

package/internal-types.ts

@@ -0,0 +1,88 @@
+import { AkselColorRole, AkselSpaceToken } from "./types";
+
+type GlobalColorScale =
+  | "100"
+  | "200"
+  | "300"
+  | "400"
+  | "500"
+  | "600"
+  | "700"
+  | "800"
+  | "900"
+  | "1000"
+  | "000"
+  | "100A"
+  | "200A"
+  | "300A"
+  | "400A";
+
+type GlobalColorKeys =
+  | `${Extract<AkselColorRole, "neutral">}-${Extract<GlobalColorScale, "000">}`
+  | `${AkselColorRole}-${Exclude<GlobalColorScale, "000">}`;
+
+type ExtractNumber<T> = T extends `space-${infer N extends number}` ? N : never;
+
+const spaceObject: Record<ExtractNumber<AkselSpaceToken>, any> = {
+  "0": "",
+  "1": "",
+  "2": "",
+  "4": "",
+  "6": "",
+  "8": "",
+  "12": "",
+  "16": "",
+  "20": "",
+  "24": "",
+  "28": "",
+  "32": "",
+  "36": "",
+  "40": "",
+  "44": "",
+  "48": "",
+  "56": "",
+  "64": "",
+  "72": "",
+  "80": "",
+  "96": "",
+  "128": "",
+};
+
+const spaceInPixels = Object.keys(spaceObject).map(Number);
+
+/* ------------------------------ Font tokens ------------------------------- */
+type FontFamilyKeys = "family";
+
+type FontSizeKeys =
+  | "size-heading-2xlarge"
+  | "size-heading-xlarge"
+  | "size-heading-large"
+  | "size-heading-medium"
+  | "size-heading-small"
+  | "size-heading-xsmall"
+  | "size-xlarge"
+  | "size-large"
+  | "size-medium"
+  | "size-small";
+
+type FontLineHeightKeys =
+  | "line-height-heading-2xlarge"
+  | "line-height-heading-xlarge"
+  | "line-height-heading-large"
+  | "line-height-heading-medium"
+  | "line-height-heading-small"
+  | "line-height-heading-xsmall"
+  | "line-height-xlarge"
+  | "line-height-large"
+  | "line-height-medium";
+
+export type FontWeightKeys = "weight-bold" | "weight-regular";
+
+export { spaceInPixels };
+export type {
+  GlobalColorScale,
+  GlobalColorKeys,
+  FontFamilyKeys,
+  FontSizeKeys,
+  FontLineHeightKeys,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "7.21.1",
+  "version": "7.23.0",
   "description": "Design-tokens for Nav designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -14,6 +14,7 @@
     "/dist",
     "/src",
     "types.ts",
+    "internal-types.ts",
     "docs.json",
     "token_docs.js",
     "!/dist/darkside",
@@ -35,14 +36,13 @@
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.100.2",
-    "color": "4.2.3",
     "colorjs.io": "^0.5.2",
-    "esbuild": "^0.25.1",
+    "esbuild": "^0.25.5",
     "lightningcss": "^1.29.3",
     "lodash": "^4.17.21",
     "style-dictionary": "^4.1.1",
     "tsx": "^4.19.1",
-    "typescript": "5.5.4",
+    "typescript": "5.8.3",
     "vitest": "^2.1.9"
   },
   "publishConfig": {

package/src/future-border.json

@@ -0,0 +1,11 @@
+{
+  "a": {
+    "radius": {
+      "2": { "value": "2px" },
+      "4": { "value": "4px" },
+      "8": { "value": "8px" },
+      "12": { "value": "12px" },
+      "full": { "value": "9999px" }
+    }
+  }
+}