Lerna versionbump [ci skip]

- @navikt/ds-react@0.13.2
 - @navikt/ds-react-internal@0.8.2

.github/workflows/update-tokens.yml

@@ -0,0 +1,41 @@
+name: Update tokens
+
+on:
+  schedule:
+    - cron: 0 0 * * *
+  workflow_dispatch:
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: install
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Update tokens
+        run: yarn update:tokens
+        env:
+          FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: figma-tokens-sync
+          delete-branch: true
+          title: "[FEATURE] Tokens sync Figma"
+          commit-message: "Tokens synket fra figma"
+          committer: GitHub <noreply@github.com>
+          signoff: false

@navikt/core/css/baseline/baseline.css

@@ -22,7 +22,7 @@ html {
 
 body {
   font-family: var(--navds-font-family);
-  line-height: 1.375;
+  line-height: 1.333;
   color: var(--navds-color-text-primary);
   font-size: 1.125rem;
 }

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.10.0",
+  "version": "0.11.4",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.5.3",
+    "@navikt/ds-tokens": "^0.6.3",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {

@navikt/core/icons/template.js

@@ -35,7 +35,8 @@ function defaultTemplate(
   ${imports}
   ${interfaces}
   function ${componentName}(${props}) {
-    const titleId = _titleId ?? (title ? v4() : undefined);
+    const titleId = _titleId ?? (title ?
+      "icon-title-" + v4() : undefined);
     return ${jsx};
   }
   ${exports}`;

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.12.3",
+  "version": "0.13.2",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.6.2",
+    "@navikt/ds-icons": "^0.6.3",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",

@navikt/core/react/src/form/Fieldset/Fieldset.tsx

@@ -103,6 +103,7 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           </Label>
           {!!description && (
             <BodyShort
+              as="div"
               className={cl("navds-fieldset__description", {
                 "sr-only": !!hideLegend,
               })}

@navikt/core/react/src/form/Select.tsx

@@ -67,6 +67,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
       </Label>
       {!!description && (
         <BodyShort
+          as="div"
           className={cl("navds-select__description", {
             "sr-only": hideLabel,
           })}

@navikt/core/react/src/form/TextField.tsx

@@ -66,6 +66,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
 
       {!!description && (
         <BodyShort
+          as="div"
           className={cl("navds-text-field__description", {
             "sr-only": hideLabel,
           })}

@navikt/core/react/src/form/Textarea.tsx

@@ -81,6 +81,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         </Label>
         {!!description && (
           <BodyShort
+            as="div"
             className={cl("navds-textarea__description", {
               "sr-only": hideLabel,
             })}

@navikt/core/react/src/form/checkbox/Checkbox.test.tsx

@@ -29,10 +29,7 @@ test("checkbox group chains onChange calls", () => {
 });
 
 describe("Checkbox handles controlled-state correctly", () => {
-  const CheckboxComponent = ({
-    onChange = () => null,
-    value,
-  }) => (
+  const CheckboxComponent = ({ onChange = () => null, value }) => (
     <CheckboxGroup legend="legend" onChange={onChange} value={value}>
       <Checkbox value={"value1"}>label1</Checkbox>
       <Checkbox value={"value2"}>label2</Checkbox>
@@ -55,7 +52,12 @@ describe("Checkbox handles controlled-state correctly", () => {
   test("onChange called with expected values", () => {
     const onGroupChange = jest.fn();
 
-    render(<CheckboxComponent onChange={onGroupChange} value={["value1", "value2"]} />);
+    render(
+      <CheckboxComponent
+        onChange={onGroupChange}
+        value={["value1", "value2"]}
+      />
+    );
 
     userEvent.click(screen.getByLabelText("label1"));
 

@navikt/core/react/src/form/checkbox/Checkbox.tsx

@@ -72,6 +72,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
       </BodyShort>
       {props.description && (
         <BodyShort
+          as="div"
           size={size}
           id={inputDescriptionId}
           className="navds-checkbox__description"

@navikt/core/react/src/form/checkbox/stories/checkbox.stories.tsx

@@ -21,7 +21,7 @@ export const All = () => {
         description="Exercitation do labore"
       >
         <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange" description="Laborum ad">
+        <Checkbox value="Orange" description={<div>Laborum ad</div>}>
           Orange
         </Checkbox>
         <Checkbox value="Melon">Melon</Checkbox>

@navikt/core/react/src/form/radio/Radio.tsx

@@ -55,6 +55,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
       </BodyShort>
       {props.description && (
         <BodyShort
+          as="div"
           size={size}
           id={inputDescriptionId}
           className="navds-radio__description"

@navikt/core/react/src/form/radio/stories/radio.stories.tsx

@@ -16,9 +16,12 @@ export const All = () => {
         <Radio value="Melon">Melon</Radio>
       </RadioGroup>
       <h2>description</h2>
-      <RadioGroup legend="Mollit eiusmod" description="Exercitation do labore">
+      <RadioGroup
+        legend="Mollit eiusmod"
+        description={<div>Exercitation do labore</div>}
+      >
         <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange" description="Laborum ad">
+        <Radio value="Orange" description={<div>Laborum ad</div>}>
           Orange
         </Radio>
         <Radio value="Melon">Melon</Radio>

@navikt/core/react/src/form/search-field/SearchField.tsx

@@ -94,6 +94,7 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
         </Label>
         {!!description && (
           <BodyShort
+            as="div"
             className={cl("navds-text-field__description", {
               "sr-only": hideLabel,
             })}

@navikt/core/react/src/form/search-field/stories/search-field.stories.tsx

@@ -15,7 +15,7 @@ export const All = () => {
       <h1>SearchField</h1>
       <SearchField
         label="Mollit eiusmod"
-        description="Ea cupidatat eu sunt commodo"
+        description={<div>Ea cupidatat eu sunt commodo</div>}
       >
         <SearchField.Input />
         <SearchField.Button>

@navikt/core/react/src/form/stories/fieldset.stories.tsx

@@ -21,9 +21,13 @@ export const All = () => {
 
       <Fieldset
         legend="Mollit eiusmod"
-        description="Quis reprehenderit esse cillum"
+        description={<div>Quis reprehenderit esse cillum</div>}
       >
-        <TextField label="Textfield label" hideLabel />
+        <TextField
+          label="Textfield label"
+          hideLabel
+          description={<div>Quis reprehenderit esse cillum</div>}
+        />
         <TextField label="Textfield label" hideLabel />
       </Fieldset>
 

@navikt/core/react/src/form/stories/select.stories.tsx

@@ -19,7 +19,7 @@ export const All = () => {
 
       <h2>Description</h2>
 
-      <Select label="Ipsum enim quis culpa" description="Aute enim">
+      <Select label="Ipsum enim quis culpa" description={<div>Aute enim</div>}>
         <option value="">Velg land</option>
         <option value="norge">Norge</option>
         <option value="sverige">Sverige</option>

@navikt/core/react/src/form/stories/text-field.stories.tsx

@@ -15,7 +15,10 @@ export const All = () => {
 
       <h2>Description</h2>
 
-      <TextField label="Laborum excepteur" description="Cillum mollit" />
+      <TextField
+        label="Laborum excepteur"
+        description={<div>Cillum mollit</div>}
+      />
 
       <h2>Passord-type</h2>
       <TextField label="Passord" type="password" />

@navikt/core/react/src/form/stories/textarea.stories.tsx

@@ -23,7 +23,7 @@ export const All = () => {
 
       <Textarea
         label="In anim elit"
-        description="Reprehenderit esse proident"
+        description={<div>Reprehenderit esse proident</div>}
         value={value}
         onChange={handleChange}
       />

@navikt/core/tokens/config.json

@@ -27,7 +27,10 @@
       "files": [
         {
           "destination": "tokens.css",
-          "format": "css/variables"
+          "format": "css/variables",
+          "options": {
+            "outputReferences": true
+          }
         }
       ]
     },
@@ -41,7 +44,7 @@
         },
         {
           "destination": "tokens-cjs.js",
-          "format": "javascript/module"
+          "format": "javascript/module-flat"
         }
       ]
     }

@navikt/core/tokens/figma/colors.ts

@@ -0,0 +1,35 @@
+import { writeFileSync } from "fs";
+import { resolve } from "path";
+import formatToStyleDictionary from "./format-sd";
+import globalColorRefs, { ColorT } from "./global-color-ref";
+import parseName from "./parse-name";
+
+type FigmaColorsT = {
+  [key: string]: string;
+};
+
+const parseColors = async (figmaColors: FigmaColorsT) => {
+  /* Parse name and color into correct format */
+  const colors: ColorT[] = Object.entries(figmaColors)
+    .map(([key, value]) => ({
+      name: parseName(key),
+      color: value,
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .reverse();
+
+  /* Make semantic colors reference global colors */
+  const colorsWithRef = globalColorRefs(colors).reduce(
+    (old, color) => ({ [color.name]: color.color, ...old }),
+    {}
+  );
+
+  const styleDictionaryFormat = formatToStyleDictionary(colorsWithRef, "color");
+
+  writeFileSync(
+    resolve("./src/colors.json"),
+    JSON.stringify(styleDictionaryFormat, null, 2)
+  );
+};
+
+export default parseColors;

@navikt/core/tokens/figma/deepen.ts

@@ -0,0 +1,26 @@
+import unifyNestedLevel from "./unify-nested-level";
+
+const deepen = (obj: { [key: string]: { value: string } }) => {
+  const result = {};
+
+  const workObj = unifyNestedLevel(obj);
+
+  // For each object path (property key) in the object
+  for (const objectPath in workObj) {
+    // Split path into component parts
+    const parts = objectPath.split("-");
+
+    // Create sub-objects along path as needed
+    let target = result;
+    while (parts.length > 1) {
+      const part = parts.shift();
+      target = target[part] = target[part] || {};
+    }
+    // Set value at end of path
+    target[parts[0]] = workObj[objectPath];
+  }
+
+  return result;
+};
+
+export default deepen;

@navikt/core/tokens/figma/fetch.ts

@@ -0,0 +1,46 @@
+import Axios from "axios";
+const { create } = Axios;
+const dotenv = require("dotenv");
+dotenv.config();
+
+const FIGMA_FILE = "m0qpSPpsnNC9DwdmerGqJH";
+
+const FigmaAxion = (token) =>
+  create({
+    headers: {
+      "X-FIGMA-TOKEN": token,
+    },
+  });
+
+export const fetchFile = async () => {
+  const { data } = await FigmaAxion(process.env.FIGMA_TOKEN)
+    .get(`https://api.figma.com/v1/files/${FIGMA_FILE}`)
+    .catch((e) => {
+      throw e;
+    });
+  return data;
+};
+
+export const fetchFileStyles = async () => {
+  const {
+    data: {
+      meta: { styles },
+    },
+  } = await FigmaAxion(process.env.FIGMA_TOKEN)
+    .get(`https://api.figma.com/v1/files/${FIGMA_FILE}/styles`)
+    .catch((e) => {
+      throw e;
+    });
+  return styles;
+};
+
+export const fetchSyncDocument = async () => {
+  const {
+    data: { document },
+  } = await FigmaAxion(process.env.FIGMA_TOKEN)
+    .get(`https://api.figma.com/v1/files/A7fbghTh75Hk65SieEhaKK`)
+    .catch((e) => {
+      throw e;
+    });
+  return document;
+};

@navikt/core/tokens/figma/file-styles.ts

@@ -0,0 +1,77 @@
+import { Node, DOCUMENT } from "figma-api";
+import paintToRgba from "./paint-to-rgba";
+
+interface StyleId {
+  id: string;
+  styleType: "TEXT" | "FILL";
+}
+
+const styleFieldNames = {
+  TEXT: ["text"],
+  FILL: ["fill", "fills", "stroke", "strokes"],
+};
+
+const findNodeWithStyle = (node: Node<any>, styleId: StyleId): Node<any> => {
+  if (
+    node.hasOwnProperty("styles") &&
+    styleFieldNames[styleId.styleType]?.some(
+      (name) => node.styles[name] === styleId.id
+    )
+  ) {
+    return node;
+  } else if (node.children) {
+    for (const child of node.children) {
+      const res = findNodeWithStyle(child, styleId);
+      if (res) {
+        return res;
+      }
+    }
+  }
+};
+
+const findStyleValue = (document: DOCUMENT, styleId: StyleId) => {
+  const node = findNodeWithStyle(document, styleId);
+  if (styleId.id === "5249:11258") {
+  }
+
+  switch (styleId.styleType) {
+    case "FILL":
+      if (node) {
+        if (
+          node.styles.stroke === styleId.id ||
+          node.styles.strokes === styleId.id
+        ) {
+          return paintToRgba(node.strokes[0]);
+        } else {
+          return paintToRgba(node.fills[0]);
+        }
+      } else {
+        return undefined;
+      }
+    case "TEXT":
+      if (node) {
+        return node?.style;
+      } else {
+        return undefined;
+      }
+  }
+};
+
+const styleTypeName = {
+  FILL: "colors",
+  TEXT: "textStyles",
+};
+
+const getFileStyles = (file, fileStyles) =>
+  fileStyles.reduce(
+    (styles, { node_id: id, style_type: styleType, name }) => ({
+      ...styles,
+      [styleTypeName[styleType]]: {
+        ...styles[styleTypeName[styleType]],
+        [name]: findStyleValue(file.document, { id, styleType }),
+      },
+    }),
+    {}
+  );
+
+export default getFileStyles;

@navikt/core/tokens/figma/format-sd.ts

@@ -0,0 +1,35 @@
+import deepen from "./deepen";
+
+const formatToStyleDictionary = (
+  colors: { [key: string]: string },
+  type: "color" | "spacing"
+) => {
+  switch (type) {
+    case "color": {
+      return deepen(
+        Object.entries(colors).reduce(
+          (old, [key, val]) =>
+            val.startsWith("rgba")
+              ? { ...old, [key]: { value: val } }
+              : {
+                  ...old,
+                  [key]: { value: `{${val.replace(/-/g, ".")}.value}` },
+                },
+          {}
+        )
+      );
+    }
+    case "spacing": {
+      return deepen(
+        Object.entries(colors).reduce(
+          (old, [key, val]) => ({ ...old, [key]: { value: val } }),
+          {}
+        )
+      );
+    }
+    default:
+      return {};
+  }
+};
+
+export default formatToStyleDictionary;

@navikt/core/tokens/figma/global-color-ref.ts

@@ -0,0 +1,21 @@
+import Color from "color";
+
+export type ColorT = {
+  name: string;
+  color: string;
+};
+
+const globalColorRefs = (colors: ColorT[]) => {
+  const globalColors = colors.filter((c) => c.name.includes("-global-"));
+
+  return colors.map((c) => {
+    if (c.name.includes("-global-")) return c;
+
+    const globalColor = globalColors.find(
+      (g) => Color(g.color).string() === Color(c.color).string()
+    );
+    return globalColor ? { name: c.name, color: globalColor.name } : c;
+  });
+};
+
+export default globalColorRefs;

@navikt/core/tokens/figma/index.ts

@@ -0,0 +1,28 @@
+import dotenv from "dotenv";
+import parseColors from "./colors";
+import getFileStyles from "./file-styles";
+import { fetchFile, fetchFileStyles, fetchSyncDocument } from "./fetch";
+/* import Spacing from "./spacing"; */
+
+dotenv.config();
+
+const main = async () => {
+  await Promise.all([fetchFile(), fetchFileStyles(), fetchSyncDocument()])
+    .then(([file, styles, document]) => {
+      const parsedStyles = getFileStyles(file, styles);
+      parsedStyles.colors && parseColors(parsedStyles.colors);
+
+      // TODO: Get spacing by crawling like with colors
+      /* Spacing(document); */
+    })
+    .catch((e) => {
+      console.log("Failed fetching styles and file from figma");
+      throw e;
+    });
+};
+
+try {
+  main();
+} catch (e) {
+  console.error(e.message);
+}

@navikt/core/tokens/figma/paint-to-rgba.ts

@@ -0,0 +1,11 @@
+import { Paint } from "figma-api";
+
+const parseColor = ({ color, opacity }: Paint) => {
+  return `rgba(${Math.round(color.r * 255)}, ${Math.round(
+    color.g * 255
+  )}, ${Math.round(color.b * 255)}, ${
+    opacity !== undefined ? Math.round(opacity * 100) / 100 : 1
+  })`;
+};
+
+export default parseColor;

@navikt/core/tokens/figma/parse-name.ts

@@ -0,0 +1,6 @@
+const parseName = (name: string) => {
+  const [scope, ...rest] = name.toLowerCase().split("/");
+  return `navds-${scope}-color-${rest.join("-")}`;
+};
+
+export default parseName;

@navikt/core/tokens/figma/spacing.ts

@@ -0,0 +1,47 @@
+import { CANVAS, DOCUMENT, FRAME, RECTANGLE } from "figma-api";
+import formatToStyleDictionary from "./format-sd";
+import { writeFileSync } from "fs";
+import { resolve } from "path";
+
+const Spacing = (document: DOCUMENT) => {
+  console.log("Updating spacing-tokens");
+
+  const spacingPage = document.children.find(
+    (c) => c.name === "Spacing"
+  ) as CANVAS;
+
+  if (!spacingPage) {
+    throw new Error("Could not find spacing-page in document");
+  }
+
+  const spacingFrame = spacingPage.children.find(
+    (x) => x.name === "spacing"
+  ) as FRAME;
+
+  if (!spacingFrame) {
+    throw new Error("Could not find spacing-frame in document");
+  }
+
+  const spaces = spacingFrame.children
+    .filter((x) => x.type === "RECTANGLE" && x.name.startsWith("spacing-"))
+    .reduce(
+      (old, space) => ({
+        ...old,
+        [`navds-${space.name}`]: `${
+          (space as RECTANGLE).absoluteBoundingBox.width / 16
+        }rem`,
+      }),
+      {}
+    );
+
+  const styleDictionaryFormat = formatToStyleDictionary(spaces, "spacing");
+
+  writeFileSync(
+    resolve("./src/spacing.json"),
+    JSON.stringify(styleDictionaryFormat, null, 2)
+  );
+
+  console.log("Finished updating spacing-tokens\n");
+};
+
+export default Spacing;

@navikt/core/tokens/figma/tests/deepen.test.ts

@@ -0,0 +1,53 @@
+import deepen from "../deepen";
+
+describe("Check deepen parsing of key name", () => {
+  test("Convert spacing", () => {
+    expect(
+      deepen({
+        "navds-spacing-1": { value: "0.25rem" },
+        "navds-spacing-2": { value: "0.50rem" },
+        "navds-spacing-3": { value: "0.75rem" },
+      })
+    ).toEqual({
+      navds: {
+        spacing: {
+          "1": { value: "0.25rem" },
+          "2": { value: "0.50rem" },
+          "3": { value: "0.75rem" },
+        },
+      },
+    });
+  });
+
+  test("Convert colors", () => {
+    expect(
+      deepen({
+        "navds-global-color-red-100": { value: "rbga(0,1,0,0)" },
+        "navds-global-color-green-100": { value: "rbga(0,4,0,0)" },
+        "navds-global-color-green-200": { value: "rbga(0,5,0,0)" },
+        "navds-semantic-color-border": { value: "rbga(0,10,0,0)" },
+        "navds-semantic-color-background": { value: "rbga(0,11,0,0)" },
+      })
+    ).toEqual({
+      navds: {
+        global: {
+          color: {
+            red: {
+              "100": { value: "rbga(0,1,0,0)" },
+            },
+            green: {
+              "100": { value: "rbga(0,4,0,0)" },
+              "200": { value: "rbga(0,5,0,0)" },
+            },
+          },
+        },
+        semantic: {
+          color: {
+            border: { value: "rbga(0,10,0,0)" },
+            background: { value: "rbga(0,11,0,0)" },
+          },
+        },
+      },
+    });
+  });
+});

@navikt/core/tokens/figma/tests/file-styles.json

@@ -0,0 +1,87 @@
+[
+  {
+    "key": "018d5d2a8b92f9da2994e341b2e3b001a8822f3f",
+    "file_key": "0mfgBpI1SEf32yYXo5efgf",
+    "node_id": "1:5",
+    "style_type": "TEXT",
+    "thumbnail_url": "https://s3-alpha-sig.figma.com/checkpoints/vzj/ib4/z0B6PeiKmHxp5c6U/style_thumbnail_4.png?Expires=1636329600&Signature=UHMortZ3iu3smP3gjEZD9GdqIoADlILTQmP0AhrpcxwiN5S6GOBR9IcsWGqF6MvRxgZoqn5OctEM0GAC86QK2ed88j1u~bunEcbjK7-GPOiZJzxZ0~DkFOQpYyBQVqm~vTSXcOaWKHldJlrKXz4fUxeIeklygu~N7d1if5P1id9iikHrMODwiM6SMCjn09nwlXClVYAdzrt-F-o0J9fZ6nu9Vu7eKt-lKvisAQFbit7pqnUtZ9n0IEZLNFRIbWhIN~6hIvwCNhd0lquNFs4RAgWbMEwe7cOdMpzPUM~Vw4z1ChhUYkDrcDjkxuBfIpHyUj2FCQUqHomoCgHNpw97QQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+    "name": "test-text-style",
+    "description": "",
+    "created_at": "2021-10-26T17:18:57.283Z",
+    "updated_at": "2021-10-26T17:18:57.283Z",
+    "user": {
+      "id": "872810555172448100",
+      "handle": "Andreas Nordahl",
+      "img_url": "https://s3-alpha.figma.com/profile/544b7720-21c4-4170-b043-db1d569dfd87"
+    },
+    "sort_position": "!"
+  },
+  {
+    "key": "214a0ef007dee7ac3c1a8a0ec646ff157d730411",
+    "file_key": "0mfgBpI1SEf32yYXo5efgf",
+    "node_id": "1:3",
+    "style_type": "FILL",
+    "thumbnail_url": "https://s3-alpha-sig.figma.com/checkpoints/12q/5sp/wUcwiMEw4aN4noCs/style_thumbnail_3.png?Expires=1636329600&Signature=Z~1e2~wSQh2zWxf4pv1Z-vNsdYJVYa92vfuSwRlyOYlZGbtiSNN7MbyAFIrdcOicw1MJ-D8cJUT-nifAiD3BVQah9l~A3w~qHEhqgkKy5IP7-f34NX-MxnmxSGg4H5bWLvjGj4sa8SaqsWdugyteV0RejV0--qJCpRSoDdG0aMNa8hiehoxtJGSr8wCTCVENRb0fXAlYHtJDSbW9Ddok-LAUBdlXP0gO44MNKCuL~LQ9yz-MntiT5FGgq1bmA3e530l86cRnG9Ravgl~vgozJN7D4eF~msgH7l8T3S7SLXgy7ZpAmZ81eYYl2F2eqxlVHOAQu5s15f1L1kNjHmhfxg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+    "name": "test-color-style",
+    "description": "",
+    "created_at": "2021-10-26T17:18:57.279Z",
+    "updated_at": "2021-10-26T17:18:57.279Z",
+    "user": {
+      "id": "872810555172448100",
+      "handle": "Andreas Nordahl",
+      "img_url": "https://s3-alpha.figma.com/profile/544b7720-21c4-4170-b043-db1d569dfd87"
+    },
+    "sort_position": "\""
+  },
+  {
+    "key": "b5548b234042939980688e7130cccc5e33f717e8",
+    "file_key": "0mfgBpI1SEf32yYXo5efgf",
+    "node_id": "2:6",
+    "style_type": "FILL",
+    "thumbnail_url": "https://s3-alpha-sig.figma.com/checkpoints/kyd/RB9/NkuKodQ2JxOFJAvH/style_thumbnail_2.png?Expires=1636329600&Signature=V1BXHDoHkAIBg-V1KpQzQhFPqO5nSVjJyZY7WOTigBynJ7jlf7QGxzJoefOEUHPKOVgtEs-9qXPABp9REBQ2kWXq21D08313VPkCBFDpXil1FHOW4bS1ogoFw4lZKQppHVNcNWnAxcm9Kt2NyiM1egR-SJX47r9W6v0ydIyvbOtvSds04nugHuEt-L3EC2NPx0TWAFlF-YO3Mqfn8PxikFwuFTQNPlrtiLxs~vcDtdfXiQvhs1McHFC6EhuTho0MJR25RPel1bwzhaOkqKB9IXvccjOx7d-BDcs8jty8cccbNimNO2CPJ5Bf4GuUqF2pDA5QHj9xr98aaVk-yepy8A__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+    "name": "red-see-through",
+    "description": "",
+    "created_at": "2021-10-26T17:18:57.276Z",
+    "updated_at": "2021-10-26T17:18:57.276Z",
+    "user": {
+      "id": "872810555172448100",
+      "handle": "Andreas Nordahl",
+      "img_url": "https://s3-alpha.figma.com/profile/544b7720-21c4-4170-b043-db1d569dfd87"
+    },
+    "sort_position": "#"
+  },
+  {
+    "key": "e2b9eb27b48ecfddb46430c578e26f9c3a4fe164",
+    "file_key": "0mfgBpI1SEf32yYXo5efgf",
+    "node_id": "3:12",
+    "style_type": "FILL",
+    "thumbnail_url": "https://s3-alpha-sig.figma.com/checkpoints/SCW/gWi/dNc5At7iWR4CmFxB/style_thumbnail_1.png?Expires=1636329600&Signature=RqsSEZMyvH-h6~X~xBL2Y4R0gnASnbXBHswjxGdqsx1YhBXkixKBO~--zG4TX-OT5cp4BXigXkHYvpd6AWazBuPdnAoN45MgZwv~qz8pgfRcRzUtJCtxnTzaKUQiLkR1Ln5AISUX7efr9KqVN4aDiagaZUXbVfyA7lnDVNbWPe6WN9f80DaIy5N6C4-lcpJWCWGCuLVkKAvI~ZI0L5qz6zJhpnQ~Rig0jn7gMidAQ92P6RvC4KTJREhCBYxPa4m1zsQg43wE4VGk75t-sWTs2On7j4k7754FRfmv1dHkGWuqk5MRaYaWOm8JzR1T2ln2pJYQzlz5wIhfPBtlMkptKA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+    "name": "stroke-color-style",
+    "description": "",
+    "created_at": "2021-10-26T17:18:57.272Z",
+    "updated_at": "2021-10-26T17:18:57.272Z",
+    "user": {
+      "id": "872810555172448100",
+      "handle": "Andreas Nordahl",
+      "img_url": "https://s3-alpha.figma.com/profile/544b7720-21c4-4170-b043-db1d569dfd87"
+    },
+    "sort_position": "$"
+  },
+  {
+    "key": "13e8bd3685daaeb73693d308b56f35b98e99e643",
+    "file_key": "0mfgBpI1SEf32yYXo5efgf",
+    "node_id": "3:15",
+    "style_type": "FILL",
+    "thumbnail_url": "https://s3-alpha-sig.figma.com/checkpoints/dNp/kEC/VltRP5wczk9nIaJx/style_thumbnail_0.png?Expires=1636329600&Signature=c~j1TRW0Wvxn-ZZkNzk1NJQeymLJ3BJ5qvh~t8Cy8vwYLgxwVz0tz6LomPlwcNmx3xfv6TetosqudMzawSKbd3VBsRfACE84u4TNY7kTBsFkUkeI8JM~00g4LZJC9ESqB4VWIXcK1w0l6tAMdjHtJ8SRER9yF~t7N2sqebq4hOiuwTT1ZcpxpGhnAdRJGJfQt1kxbniryjWQfiadXLEIrHw25pEX0VbFJ2EAn9IL3Jhl2d49TBSE2MEZ5ht-1qU6m9Lnj1Hex3sU-EiS8DhDAeb~twtE7mGiPlXoXRSFUcpkB4EPS5wOa4D4wpq8G85MW3XlpNH08s6N5qG1x66-BQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+    "name": "stroke-color-style-2",
+    "description": "",
+    "created_at": "2021-10-26T17:18:57.267Z",
+    "updated_at": "2021-10-26T17:18:57.267Z",
+    "user": {
+      "id": "872810555172448100",
+      "handle": "Andreas Nordahl",
+      "img_url": "https://s3-alpha.figma.com/profile/544b7720-21c4-4170-b043-db1d569dfd87"
+    },
+    "sort_position": "%"
+  }
+]

@navikt/core/tokens/figma/tests/file-styles.test.ts

@@ -0,0 +1,30 @@
+import file from "./file.json";
+import fileStyles from "./file-styles.json";
+import getFileStyles from "../file-styles";
+
+test("get file styles", () => {
+  expect(getFileStyles(file, fileStyles)).toEqual({
+    colors: {
+      "test-color-style": "rgba(196, 196, 196, 1)",
+      "stroke-color-style": "rgba(84, 138, 83, 1)",
+      "stroke-color-style-2": "rgba(133, 111, 195, 0.69)",
+      "red-see-through": "rgba(219, 16, 16, 0.33)",
+    },
+    textStyles: {
+      "test-text-style": {
+        fontFamily: "Roboto",
+        fontPostScriptName: null,
+        fontWeight: 400,
+        textAutoResize: "WIDTH_AND_HEIGHT",
+        fontSize: 12,
+        textAlignHorizontal: "LEFT",
+        textAlignVertical: "TOP",
+        letterSpacing: 0,
+        lineHeightPx: 20,
+        lineHeightPercent: 142.22222900390625,
+        lineHeightPercentFontSize: 166.6666717529297,
+        lineHeightUnit: "PIXELS",
+      },
+    },
+  });
+});

@navikt/core/tokens/figma/tests/file.json

@@ -0,0 +1,472 @@
+{
+  "document": {
+    "id": "0:0",
+    "name": "Document",
+    "type": "DOCUMENT",
+    "children": [
+      {
+        "id": "0:1",
+        "name": "Page 1",
+        "type": "CANVAS",
+        "children": [
+          {
+            "id": "1:2",
+            "name": "Rectangle 1",
+            "type": "RECTANGLE",
+            "blendMode": "PASS_THROUGH",
+            "absoluteBoundingBox": {
+              "x": -208,
+              "y": -113,
+              "width": 219,
+              "height": 119
+            },
+            "constraints": {
+              "vertical": "TOP",
+              "horizontal": "LEFT"
+            },
+            "fills": [
+              {
+                "blendMode": "NORMAL",
+                "type": "SOLID",
+                "color": {
+                  "r": 0.7686274647712708,
+                  "g": 0.7686274647712708,
+                  "b": 0.7686274647712708,
+                  "a": 1
+                }
+              }
+            ],
+            "strokes": [],
+            "strokeWeight": 1,
+            "strokeAlign": "INSIDE",
+            "styles": {
+              "fills": "1:3"
+            },
+            "effects": []
+          },
+          {
+            "id": "1:4",
+            "name": "A Text",
+            "type": "TEXT",
+            "blendMode": "PASS_THROUGH",
+            "absoluteBoundingBox": {
+              "x": -224,
+              "y": 170,
+              "width": 34,
+              "height": 20
+            },
+            "constraints": {
+              "vertical": "TOP",
+              "horizontal": "LEFT"
+            },
+            "fills": [
+              {
+                "blendMode": "NORMAL",
+                "type": "SOLID",
+                "color": {
+                  "r": 0,
+                  "g": 0,
+                  "b": 0,
+                  "a": 1
+                }
+              }
+            ],
+            "strokes": [],
+            "strokeWeight": 1,
+            "strokeAlign": "OUTSIDE",
+            "effects": [],
+            "characters": "A Text",
+            "style": {
+              "fontFamily": "Roboto",
+              "fontPostScriptName": null,
+              "fontWeight": 400,
+              "textAutoResize": "WIDTH_AND_HEIGHT",
+              "fontSize": 12,
+              "textAlignHorizontal": "LEFT",
+              "textAlignVertical": "TOP",
+              "letterSpacing": 0,
+              "lineHeightPx": 20,
+              "lineHeightPercent": 142.22222900390625,
+              "lineHeightPercentFontSize": 166.6666717529297,
+              "lineHeightUnit": "PIXELS"
+            },
+            "layoutVersion": 3,
+            "characterStyleOverrides": [],
+            "styleOverrideTable": {},
+            "styles": {
+              "text": "1:5"
+            }
+          },
+          {
+            "id": "3:14",
+            "name": "Frame 1",
+            "type": "FRAME",
+            "blendMode": "PASS_THROUGH",
+            "children": [
+              {
+                "id": "3:13",
+                "name": "Rectangle 2",
+                "type": "RECTANGLE",
+                "blendMode": "PASS_THROUGH",
+                "absoluteBoundingBox": {
+                  "x": 58,
+                  "y": 360,
+                  "width": 257,
+                  "height": 166
+                },
+                "constraints": {
+                  "vertical": "TOP",
+                  "horizontal": "LEFT"
+                },
+                "fills": [
+                  {
+                    "blendMode": "NORMAL",
+                    "type": "SOLID",
+                    "color": {
+                      "r": 0.7686274647712708,
+                      "g": 0.7686274647712708,
+                      "b": 0.7686274647712708,
+                      "a": 1
+                    }
+                  }
+                ],
+                "strokes": [
+                  {
+                    "opacity": 0.6899999976158142,
+                    "blendMode": "NORMAL",
+                    "type": "SOLID",
+                    "color": {
+                      "r": 0.5208221077919006,
+                      "g": 0.4344444274902344,
+                      "b": 0.7666666507720947,
+                      "a": 1
+                    }
+                  }
+                ],
+                "strokeWeight": 1,
+                "strokeAlign": "INSIDE",
+                "styles": {
+                  "stroke": "3:15"
+                },
+                "effects": []
+              }
+            ],
+            "absoluteBoundingBox": {
+              "x": -149,
+              "y": 310,
+              "width": 502,
+              "height": 401
+            },
+            "constraints": {
+              "vertical": "TOP",
+              "horizontal": "LEFT"
+            },
+            "clipsContent": true,
+            "background": [
+              {
+                "blendMode": "NORMAL",
+                "type": "SOLID",
+                "color": {
+                  "r": 1,
+                  "g": 1,
+                  "b": 1,
+                  "a": 1
+                }
+              }
+            ],
+            "fills": [
+              {
+                "blendMode": "NORMAL",
+                "type": "SOLID",
+                "color": {
+                  "r": 1,
+                  "g": 1,
+                  "b": 1,
+                  "a": 1
+                }
+              }
+            ],
+            "strokes": [],
+            "strokeWeight": 1,
+            "strokeAlign": "INSIDE",
+            "backgroundColor": {
+              "r": 1,
+              "g": 1,
+              "b": 1,
+              "a": 1
+            },
+            "effects": []
+          }
+        ],
+        "backgroundColor": {
+          "r": 0.8980392217636108,
+          "g": 0.8980392217636108,
+          "b": 0.8980392217636108,
+          "a": 1
+        },
+        "prototypeStartNodeID": null,
+        "flowStartingPoints": [],
+        "prototypeDevice": {
+          "type": "NONE",
+          "rotation": "NONE"
+        }
+      },
+      {
+        "id": "2:7",
+        "name": "Page 2",
+        "type": "CANVAS",
+        "children": [
+          {
+            "id": "2:8",
+            "name": "Frame 1",
+            "type": "FRAME",
+            "blendMode": "PASS_THROUGH",
+            "children": [
+              {
+                "id": "2:9",
+                "name": "Group 1",
+                "type": "GROUP",
+                "blendMode": "PASS_THROUGH",
+                "children": [
+                  {
+                    "id": "2:10",
+                    "name": "Rectangle 2",
+                    "type": "RECTANGLE",
+                    "blendMode": "PASS_THROUGH",
+                    "absoluteBoundingBox": {
+                      "x": -137,
+                      "y": -79,
+                      "width": 219,
+                      "height": 119
+                    },
+                    "constraints": {
+                      "vertical": "TOP",
+                      "horizontal": "LEFT"
+                    },
+                    "fills": [
+                      {
+                        "opacity": 0.33000001311302185,
+                        "blendMode": "NORMAL",
+                        "type": "SOLID",
+                        "color": {
+                          "r": 0.8583333492279053,
+                          "g": 0.060798585414886475,
+                          "b": 0.060798585414886475,
+                          "a": 1
+                        }
+                      }
+                    ],
+                    "strokes": [
+                      {
+                        "blendMode": "NORMAL",
+                        "type": "SOLID",
+                        "color": {
+                          "r": 0.3293333053588867,
+                          "g": 0.5416666865348816,
+                          "b": 0.32499998807907104,
+                          "a": 1
+                        }
+                      }
+                    ],
+                    "strokeWeight": 1,
+                    "strokeAlign": "INSIDE",
+                    "styles": {
+                      "fill": "2:6"
+                    },
+                    "effects": []
+                  },
+                  {
+                    "id": "2:11",
+                    "name": "A Text",
+                    "type": "TEXT",
+                    "blendMode": "PASS_THROUGH",
+                    "absoluteBoundingBox": {
+                      "x": -72,
+                      "y": -26,
+                      "width": 34,
+                      "height": 20
+                    },
+                    "constraints": {
+                      "vertical": "TOP",
+                      "horizontal": "LEFT"
+                    },
+                    "fills": [
+                      {
+                        "blendMode": "NORMAL",
+                        "type": "SOLID",
+                        "color": {
+                          "r": 0,
+                          "g": 0,
+                          "b": 0,
+                          "a": 1
+                        }
+                      }
+                    ],
+                    "strokes": [
+                      {
+                        "blendMode": "NORMAL",
+                        "type": "SOLID",
+                        "color": {
+                          "r": 0.3293333053588867,
+                          "g": 0.5416666865348816,
+                          "b": 0.32499998807907104,
+                          "a": 1
+                        }
+                      }
+                    ],
+                    "strokeWeight": 1,
+                    "strokeAlign": "OUTSIDE",
+                    "styles": {
+                      "strokes": "3:12",
+                      "text": "1:5"
+                    },
+                    "effects": [],
+                    "characters": "A Text",
+                    "style": {
+                      "fontFamily": "Roboto",
+                      "fontPostScriptName": null,
+                      "fontWeight": 400,
+                      "textAutoResize": "WIDTH_AND_HEIGHT",
+                      "fontSize": 12,
+                      "textAlignHorizontal": "LEFT",
+                      "textAlignVertical": "TOP",
+                      "letterSpacing": 0,
+                      "lineHeightPx": 20,
+                      "lineHeightPercent": 142.22222900390625,
+                      "lineHeightPercentFontSize": 166.6666717529297,
+                      "lineHeightUnit": "PIXELS"
+                    },
+                    "layoutVersion": 3,
+                    "characterStyleOverrides": [],
+                    "styleOverrideTable": {}
+                  }
+                ],
+                "absoluteBoundingBox": {
+                  "x": -137,
+                  "y": -79,
+                  "width": 219,
+                  "height": 119
+                },
+                "constraints": {
+                  "vertical": "TOP",
+                  "horizontal": "LEFT"
+                },
+                "clipsContent": false,
+                "background": [],
+                "fills": [],
+                "strokes": [],
+                "strokeWeight": 1,
+                "strokeAlign": "INSIDE",
+                "backgroundColor": {
+                  "r": 0,
+                  "g": 0,
+                  "b": 0,
+                  "a": 0
+                },
+                "effects": []
+              }
+            ],
+            "absoluteBoundingBox": {
+              "x": -228,
+              "y": -170,
+              "width": 455,
+              "height": 338
+            },
+            "constraints": {
+              "vertical": "TOP",
+              "horizontal": "LEFT"
+            },
+            "clipsContent": true,
+            "background": [
+              {
+                "blendMode": "NORMAL",
+                "type": "SOLID",
+                "color": {
+                  "r": 1,
+                  "g": 1,
+                  "b": 1,
+                  "a": 1
+                }
+              }
+            ],
+            "fills": [
+              {
+                "blendMode": "NORMAL",
+                "type": "SOLID",
+                "color": {
+                  "r": 1,
+                  "g": 1,
+                  "b": 1,
+                  "a": 1
+                }
+              }
+            ],
+            "strokes": [],
+            "strokeWeight": 1,
+            "strokeAlign": "INSIDE",
+            "backgroundColor": {
+              "r": 1,
+              "g": 1,
+              "b": 1,
+              "a": 1
+            },
+            "effects": []
+          }
+        ],
+        "backgroundColor": {
+          "r": 0.8980392217636108,
+          "g": 0.8980392217636108,
+          "b": 0.8980392217636108,
+          "a": 1
+        },
+        "prototypeStartNodeID": null,
+        "flowStartingPoints": [],
+        "prototypeDevice": {
+          "type": "NONE",
+          "rotation": "NONE"
+        }
+      }
+    ]
+  },
+  "components": {},
+  "componentSets": {},
+  "schemaVersion": 0,
+  "styles": {
+    "1:3": {
+      "key": "214a0ef007dee7ac3c1a8a0ec646ff157d730411",
+      "name": "test-color-style",
+      "styleType": "FILL",
+      "description": ""
+    },
+    "1:5": {
+      "key": "018d5d2a8b92f9da2994e341b2e3b001a8822f3f",
+      "name": "test-text-style",
+      "styleType": "TEXT",
+      "description": ""
+    },
+    "3:15": {
+      "key": "13e8bd3685daaeb73693d308b56f35b98e99e643",
+      "name": "stroke-color-style-2",
+      "styleType": "FILL",
+      "description": ""
+    },
+    "2:6": {
+      "key": "b5548b234042939980688e7130cccc5e33f717e8",
+      "name": "red-see-through",
+      "styleType": "FILL",
+      "description": ""
+    },
+    "3:12": {
+      "key": "e2b9eb27b48ecfddb46430c578e26f9c3a4fe164",
+      "name": "stroke-color-style",
+      "styleType": "FILL",
+      "description": ""
+    }
+  },
+  "name": "Untitled",
+  "lastModified": "2021-10-25T14:11:38Z",
+  "thumbnailUrl": "https://s3-alpha-sig.figma.com/thumbnails/0mfgBpI1SEf32yYXo5efgf/default?Expires=1636329600&Signature=UTYTy-IQUHP7nzFXJCQoB9ORcA3L0766gsczI2Il~zEcp1XMqZR6AkFCFJA0PSx-nmT3xkkS~wkEbWyK5--ncek6qZsGwA48GPcLf9NH4iViXg7noQFFrEauFYHihs2MJDuRo3YkLo6l5XTbtgJW2lKiP1yqNre91V9IMCyOsW1al-WaBALacZYYO2NOwV76URr8VCeUWhGwfTZcyj6bra40Arx-cw7gv2j3Zuz~c9CiRz42J9gNJpM2Xl2zPp6teEwvNUCMWvoiclcyTPm3g3mSXc5kQeSBTNNTpk46YEQP~XmHUXMu4d~s66d~3xXATV~QrWjAJ7lZQVYz7VBgSA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+  "version": "1235987453",
+  "role": "owner",
+  "editorType": "figma"
+}

@navikt/core/tokens/figma/tests/format-sd.test.ts

@@ -0,0 +1,71 @@
+import formatToStyledDictionary from "../format-sd";
+
+describe("Check conversion to Styled-dictionary format", () => {
+  test("Converting colors", () => {
+    expect(
+      JSON.stringify(
+        formatToStyledDictionary(
+          {
+            "navds-global-color-red-500": "rgba(1,1,1,1)",
+            "navds-global-color-red-400": "rgba(1,2,1,1)",
+            "navds-global-color-red-300": "rgba(1,3,1,1)",
+            "navds-semantic-color-danger": "navds-global-color-red-400",
+            "navds-semantic-color-danger-hover": "navds-global-color-red-300",
+          },
+          "color"
+        )
+      )
+    ).toBe(
+      JSON.stringify({
+        navds: {
+          global: {
+            color: {
+              red: {
+                "500": { value: "rgba(1,1,1,1)" },
+                "400": { value: "rgba(1,2,1,1)" },
+                "300": { value: "rgba(1,3,1,1)" },
+              },
+            },
+          },
+          semantic: {
+            color: {
+              danger: {
+                hover: {
+                  value: "{navds.global.color.red.300.value}",
+                },
+                "@": { value: "{navds.global.color.red.400.value}" },
+              },
+            },
+          },
+        },
+      })
+    );
+  });
+
+  test("Converting spacing", () => {
+    expect(
+      JSON.stringify(
+        formatToStyledDictionary(
+          {
+            "navds-spacing-1": "0.25rem",
+            "navds-spacing-2": "0.5rem",
+            "navds-spacing-3": "0.75rem",
+            "navds-spacing-4": "1rem",
+          },
+          "spacing"
+        )
+      )
+    ).toBe(
+      JSON.stringify({
+        navds: {
+          spacing: {
+            "1": { value: "0.25rem" },
+            "2": { value: "0.5rem" },
+            "3": { value: "0.75rem" },
+            "4": { value: "1rem" },
+          },
+        },
+      })
+    );
+  });
+});

@navikt/core/tokens/figma/tests/global-color-ref.test.ts

@@ -0,0 +1,25 @@
+import globalColorRefs from "../global-color-ref";
+
+test("Global color refs", () => {
+  let colors = [
+    { name: "navds-global-color-red-400", color: "#D05C4A" },
+    { name: "navds-global-color-red-500", color: "#BA3A26" },
+    { name: "navds-semantic-color-error", color: "#D05C4A" },
+    { name: "navds-semantic-color-hover", color: "#BA3A26" },
+    { name: "navds-semantic-color-noref", color: "#AAAAAA" },
+  ];
+
+  let parsedColors = [
+    { name: "navds-global-color-red-400", color: "#D05C4A" },
+    { name: "navds-global-color-red-500", color: "#BA3A26" },
+    { name: "navds-semantic-color-error", color: "navds-global-color-red-400" },
+    { name: "navds-semantic-color-hover", color: "navds-global-color-red-500" },
+    { name: "navds-semantic-color-noref", color: "#AAAAAA" },
+  ];
+
+  const newColors = globalColorRefs(colors);
+
+  expect(JSON.stringify(newColors, null, 2)).toBe(
+    JSON.stringify(parsedColors, null, 2)
+  );
+});

@navikt/core/tokens/figma/tests/paint-to-rgba.test.ts

@@ -0,0 +1,62 @@
+import { PaintType } from "figma-api";
+import paintToRgba from "../paint-to-rgba";
+
+describe("parse-color", () => {
+  test("white", () => {
+    expect(
+      paintToRgba({
+        type: PaintType.SOLID,
+        color: {
+          r: 1,
+          g: 1,
+          b: 1,
+          a: 1,
+        },
+      })
+    ).toBe("rgba(255, 255, 255, 1)");
+  });
+
+  test("gray", () => {
+    expect(
+      paintToRgba({
+        type: PaintType.SOLID,
+        color: {
+          r: 0.9725490212440491,
+          g: 0.9725490212440491,
+          b: 0.9725490212440491,
+          a: 1,
+        },
+      })
+    ).toBe("rgba(248, 248, 248, 1)");
+  });
+
+  test("transparent", () => {
+    expect(
+      paintToRgba({
+        type: PaintType.SOLID,
+        color: {
+          r: 1,
+          g: 1,
+          b: 1,
+          a: 1,
+        },
+        opacity: 0,
+      })
+    ).toBe("rgba(255, 255, 255, 0)");
+  });
+
+  test("partly transparent", () => {
+    expect(
+      paintToRgba({
+        type: PaintType.SOLID,
+        color: {
+          r: 0.5208221077919006,
+          g: 0.4344444274902344,
+          b: 0.7666666507720947,
+          a: 1,
+        },
+        opacity: 0.6899999976158142,
+      })
+    ).toBe("rgba(133, 111, 195, 0.69)");
+  });
+});

@navikt/core/tokens/figma/tests/parse-name.test.ts

@@ -0,0 +1,12 @@
+import parseName from "../parse-name";
+
+test("parse-name", () => {
+  new Map([
+    ["Global/blue-500", "navds-global-color-blue-500"],
+    ["Global/red-100", "navds-global-color-red-100"],
+    [
+      "Semantic/Interaction/primary-hover",
+      "navds-semantic-color-interaction-primary-hover",
+    ],
+  ]).forEach((value, key) => expect(parseName(key)).toBe(value));
+});

@navikt/core/tokens/figma/tests/unify-nested-level.test.ts

@@ -0,0 +1,43 @@
+import unifyNestedLevel from "../unify-nested-level";
+
+describe("Check unifying of nested levels", () => {
+  test("Check color nesting", () => {
+    const obj = {
+      "navds-global-color-green-50": { value: "rbga(0,1,0,0)" },
+      "navds-global-color-green-500": { value: "rbga(0,2,0,0)" },
+      "navds-semantic-color-primary-hover": {
+        value: "rbga(0,3,0,0)",
+      },
+      "navds-semantic-color-primary-hover-subtle": {
+        value: "rbga(0,4,0,0)",
+      },
+      "navds-semantic-color-danger": { value: "rbga(0,5,0,0)" },
+      "navds-semantic-color-danger-hover": {
+        value: "rbga(0,6,0,0)",
+      },
+      "navds-semantic-color-danger-hover-subtle": {
+        value: "rbga(0,7,0,0)",
+      },
+    };
+
+    const newObj = unifyNestedLevel(obj);
+
+    expect(newObj).toEqual({
+      "navds-global-color-green-50": { value: "rbga(0,1,0,0)" },
+      "navds-global-color-green-500": { value: "rbga(0,2,0,0)" },
+      "navds-semantic-color-primary-hover-@": {
+        value: "rbga(0,3,0,0)",
+      },
+      "navds-semantic-color-primary-hover-subtle": {
+        value: "rbga(0,4,0,0)",
+      },
+      "navds-semantic-color-danger-@-@": { value: "rbga(0,5,0,0)" },
+      "navds-semantic-color-danger-hover-@": {
+        value: "rbga(0,6,0,0)",
+      },
+      "navds-semantic-color-danger-hover-subtle": {
+        value: "rbga(0,7,0,0)",
+      },
+    });
+  });
+});

@navikt/core/tokens/figma/unify-nested-level.ts

@@ -0,0 +1,22 @@
+const unifyNestedLevel = (obj: { [key: string]: { value: string } }) => {
+  // deep copy
+  const workObj = JSON.parse(JSON.stringify(obj));
+
+  Object.keys(workObj).forEach((k) => {
+    const deeperKeys = Object.keys(workObj).filter(
+      (k2) => k2.startsWith(`${k}-`) && k2.length > k.length
+    );
+    if (deeperKeys.length > 0) {
+      const neededNestedLevel =
+        Math.max(...deeperKeys.map((k) => k.split("-").length)) -
+        k.split("-").length;
+
+      delete Object.assign(workObj, {
+        [k + "-@".repeat(neededNestedLevel)]: workObj[k],
+      })[k];
+    }
+  });
+  return workObj;
+};
+
+export default unifyNestedLevel;

@navikt/core/tokens/jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  transform: {
+    "^.+\\.ts?$": "ts-jest",
+  },
+};

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "0.5.3",
+  "version": "0.6.3",
   "private": false,
   "description": "Auto-generated design-tokens for NAV design-systems framework",
   "author": "NAV Designsystem team",
@@ -20,7 +20,8 @@
     "build": "node ./build.js",
     "watch": "nodemon --watch src/index.js --exec \"yarn build\"",
     "token": "style-dictionary build",
-    "test": "jest"
+    "test": "jest",
+    "update": "ts-node figma/index.ts dotenv/config"
   },
   "repository": {
     "type": "git",
@@ -28,10 +29,15 @@
     "directory": "@navikt/core/tokens"
   },
   "devDependencies": {
+    "@types/jest": "^27.0.1",
     "color": "^4.0.1",
+    "dotenv": "^10.0.0",
+    "figma-api": "^1.7.0",
     "jest": "^27.2.0",
     "lodash": "^4.17.21",
     "nodemon": "^2.0.12",
-    "style-dictionary": "^3.0.2"
+    "style-dictionary": "^3.0.2",
+    "ts-jest": "^27.0.5",
+    "ts-node": "^10.3.0"
   }
 }

@navikt/core/tokens/src/colors.json

@@ -0,0 +1,435 @@
+{
+  "navds": {
+    "global": {
+      "color": {
+        "blue": {
+          "50": {
+            "value": "rgba(230, 240, 255, 1)"
+          },
+          "100": {
+            "value": "rgba(204, 225, 255, 1)"
+          },
+          "200": {
+            "value": "rgba(153, 195, 255, 1)"
+          },
+          "300": {
+            "value": "rgba(102, 165, 244, 1)"
+          },
+          "400": {
+            "value": "rgba(51, 134, 224, 1)"
+          },
+          "500": {
+            "value": "rgba(0, 103, 197, 1)"
+          },
+          "600": {
+            "value": "rgba(0, 86, 180, 1)"
+          },
+          "700": {
+            "value": "rgba(0, 69, 156, 1)"
+          },
+          "800": {
+            "value": "rgba(0, 52, 125, 1)"
+          },
+          "900": {
+            "value": "rgba(0, 34, 82, 1)"
+          }
+        },
+        "deepblue": {
+          "50": {
+            "value": "rgba(230, 241, 248, 1)"
+          },
+          "100": {
+            "value": "rgba(204, 226, 240, 1)"
+          },
+          "200": {
+            "value": "rgba(153, 196, 221, 1)"
+          },
+          "300": {
+            "value": "rgba(102, 163, 196, 1)"
+          },
+          "400": {
+            "value": "rgba(51, 128, 165, 1)"
+          },
+          "500": {
+            "value": "rgba(0, 91, 130, 1)"
+          },
+          "600": {
+            "value": "rgba(0, 80, 119, 1)"
+          },
+          "700": {
+            "value": "rgba(0, 67, 103, 1)"
+          },
+          "800": {
+            "value": "rgba(0, 52, 83, 1)"
+          },
+          "900": {
+            "value": "rgba(0, 36, 58, 1)"
+          }
+        },
+        "gray": {
+          "50": {
+            "value": "rgba(247, 247, 247, 1)"
+          },
+          "100": {
+            "value": "rgba(241, 241, 241, 1)"
+          },
+          "200": {
+            "value": "rgba(201, 201, 201, 1)"
+          },
+          "400": {
+            "value": "rgba(160, 160, 160, 1)"
+          },
+          "600": {
+            "value": "rgba(106, 106, 106, 1)"
+          },
+          "800": {
+            "value": "rgba(79, 79, 79, 1)"
+          },
+          "900": {
+            "value": "rgba(38, 38, 38, 1)"
+          }
+        },
+        "green": {
+          "50": {
+            "value": "rgba(243, 252, 245, 1)"
+          },
+          "100": {
+            "value": "rgba(204, 241, 214, 1)"
+          },
+          "200": {
+            "value": "rgba(153, 222, 173, 1)"
+          },
+          "300": {
+            "value": "rgba(102, 199, 134, 1)"
+          },
+          "400": {
+            "value": "rgba(51, 170, 95, 1)"
+          },
+          "500": {
+            "value": "rgba(6, 137, 58, 1)"
+          },
+          "600": {
+            "value": "rgba(0, 124, 46, 1)"
+          },
+          "700": {
+            "value": "rgba(0, 106, 35, 1)"
+          },
+          "800": {
+            "value": "rgba(0, 85, 25, 1)"
+          },
+          "900": {
+            "value": "rgba(0, 59, 15, 1)"
+          }
+        },
+        "lightblue": {
+          "50": {
+            "value": "rgba(235, 252, 255, 1)"
+          },
+          "100": {
+            "value": "rgba(216, 249, 255, 1)"
+          },
+          "200": {
+            "value": "rgba(181, 241, 255, 1)"
+          },
+          "300": {
+            "value": "rgba(151, 230, 255, 1)"
+          },
+          "400": {
+            "value": "rgba(124, 218, 248, 1)"
+          },
+          "500": {
+            "value": "rgba(102, 203, 236, 1)"
+          },
+          "600": {
+            "value": "rgba(76, 173, 205, 1)"
+          },
+          "700": {
+            "value": "rgba(54, 141, 168, 1)"
+          },
+          "800": {
+            "value": "rgba(35, 107, 125, 1)"
+          },
+          "900": {
+            "value": "rgba(19, 72, 82, 1)"
+          }
+        },
+        "limegreen": {
+          "50": {
+            "value": "rgba(253, 255, 230, 1)"
+          },
+          "100": {
+            "value": "rgba(249, 252, 204, 1)"
+          },
+          "200": {
+            "value": "rgba(236, 243, 153, 1)"
+          },
+          "300": {
+            "value": "rgba(217, 227, 102, 1)"
+          },
+          "400": {
+            "value": "rgba(193, 203, 51, 1)"
+          },
+          "500": {
+            "value": "rgba(162, 173, 0, 1)"
+          },
+          "600": {
+            "value": "rgba(147, 158, 0, 1)"
+          },
+          "700": {
+            "value": "rgba(127, 137, 0, 1)"
+          },
+          "800": {
+            "value": "rgba(102, 110, 0, 1)"
+          },
+          "900": {
+            "value": "rgba(71, 78, 0, 1)"
+          }
+        },
+        "nav": {
+          "red": {
+            "value": "rgba(195, 0, 0, 1)"
+          }
+        },
+        "orange": {
+          "50": {
+            "value": "rgba(255, 249, 240, 1)"
+          },
+          "100": {
+            "value": "rgba(255, 236, 204, 1)"
+          },
+          "200": {
+            "value": "rgba(255, 215, 153, 1)"
+          },
+          "300": {
+            "value": "rgba(255, 193, 102, 1)"
+          },
+          "400": {
+            "value": "rgba(255, 170, 51, 1)"
+          },
+          "500": {
+            "value": "rgba(255, 145, 0, 1)"
+          },
+          "600": {
+            "value": "rgba(212, 123, 0, 1)"
+          },
+          "700": {
+            "value": "rgba(168, 100, 0, 1)"
+          },
+          "800": {
+            "value": "rgba(125, 76, 0, 1)"
+          },
+          "900": {
+            "value": "rgba(82, 51, 0, 1)"
+          }
+        },
+        "purple": {
+          "50": {
+            "value": "rgba(239, 236, 244, 1)"
+          },
+          "100": {
+            "value": "rgba(224, 216, 233, 1)"
+          },
+          "200": {
+            "value": "rgba(192, 178, 210, 1)"
+          },
+          "300": {
+            "value": "rgba(161, 141, 187, 1)"
+          },
+          "400": {
+            "value": "rgba(130, 105, 162, 1)"
+          },
+          "500": {
+            "value": "rgba(99, 70, 137, 1)"
+          },
+          "600": {
+            "value": "rgba(82, 56, 116, 1)"
+          },
+          "700": {
+            "value": "rgba(65, 43, 93, 1)"
+          },
+          "800": {
+            "value": "rgba(48, 31, 70, 1)"
+          },
+          "900": {
+            "value": "rgba(31, 20, 47, 1)"
+          }
+        },
+        "red": {
+          "50": {
+            "value": "rgba(253, 232, 230, 1)"
+          },
+          "100": {
+            "value": "rgba(249, 210, 204, 1)"
+          },
+          "200": {
+            "value": "rgba(239, 168, 157, 1)"
+          },
+          "300": {
+            "value": "rgba(225, 128, 113, 1)"
+          },
+          "400": {
+            "value": "rgba(208, 92, 74, 1)"
+          },
+          "500": {
+            "value": "rgba(186, 58, 38, 1)"
+          },
+          "600": {
+            "value": "rgba(163, 42, 23, 1)"
+          },
+          "700": {
+            "value": "rgba(136, 29, 12, 1)"
+          },
+          "800": {
+            "value": "rgba(106, 18, 4, 1)"
+          },
+          "900": {
+            "value": "rgba(72, 9, 0, 1)"
+          }
+        },
+        "transparent": {
+          "value": "rgba(255, 255, 255, 0)"
+        },
+        "white": {
+          "value": "rgba(255, 255, 255, 1)"
+        }
+      }
+    },
+    "semantic": {
+      "color": {
+        "border": {
+          "default": {
+            "value": "{navds.global.color.gray.600.value}"
+          },
+          "muted": {
+            "value": "{navds.global.color.gray.400.value}"
+          }
+        },
+        "canvas": {
+          "background": {
+            "default": {
+              "value": "{navds.global.color.gray.100.value}"
+            },
+            "inverted": {
+              "value": "{navds.global.color.gray.900.value}"
+            },
+            "light": {
+              "value": "{navds.global.color.white.value}"
+            }
+          }
+        },
+        "component": {
+          "background": {
+            "alternate": {
+              "value": "{navds.global.color.gray.50.value}"
+            },
+            "inverted": {
+              "value": "{navds.global.color.gray.900.value}"
+            },
+            "light": {
+              "value": "{navds.global.color.white.value}"
+            }
+          }
+        },
+        "divider": {
+          "value": "{navds.global.color.gray.200.value}"
+        },
+        "feedback": {
+          "danger": {
+            "background": {
+              "value": "{navds.global.color.red.100.value}"
+            },
+            "border": {
+              "value": "{navds.global.color.red.500.value}"
+            },
+            "icon": {
+              "value": "{navds.global.color.red.500.value}"
+            },
+            "text": {
+              "value": "{navds.global.color.red.500.value}"
+            }
+          },
+          "info": {
+            "background": {
+              "value": "{navds.global.color.lightblue.100.value}"
+            },
+            "border": {
+              "value": "{navds.global.color.lightblue.700.value}"
+            },
+            "icon": {
+              "value": "{navds.global.color.lightblue.700.value}"
+            }
+          },
+          "success": {
+            "background": {
+              "value": "{navds.global.color.green.100.value}"
+            },
+            "border": {
+              "value": "{navds.global.color.green.500.value}"
+            },
+            "icon": {
+              "value": "{navds.global.color.green.600.value}"
+            }
+          },
+          "warning": {
+            "background": {
+              "value": "{navds.global.color.orange.100.value}"
+            },
+            "border": {
+              "value": "{navds.global.color.orange.600.value}"
+            },
+            "icon": {
+              "value": "{navds.global.color.orange.500.value}"
+            }
+          }
+        },
+        "focus": {
+          "value": "{navds.global.color.blue.800.value}",
+          "inverted": {
+            "value": "{navds.global.color.blue.200.value}"
+          }
+        },
+        "interaction": {
+          "danger": {
+            "default": {
+              "value": "{navds.global.color.red.500.value}"
+            },
+            "hover": {
+              "value": "{navds.global.color.red.600.value}"
+            },
+            "selected": {
+              "value": "{navds.global.color.red.700.value}"
+            }
+          },
+          "primary": {
+            "default": {
+              "value": "{navds.global.color.blue.500.value}"
+            },
+            "hover": {
+              "value": "{navds.global.color.blue.600.value}"
+            },
+            "selected": {
+              "value": "{navds.global.color.deepblue.500.value}"
+            }
+          }
+        },
+        "text": {
+          "default": {
+            "value": "{navds.global.color.gray.900.value}"
+          },
+          "inverted": {
+            "value": "{navds.global.color.white.value}"
+          },
+          "link": {
+            "value": "{navds.global.color.blue.500.value}",
+            "visited": {
+              "value": "{navds.global.color.purple.500.value}"
+            }
+          },
+          "muted": {
+            "value": "{navds.global.color.gray.600.value}"
+          }
+        }
+      }
+    }
+  }
+}

@navikt/core/tokens/src/index.js

@@ -1,4 +1,6 @@
 const Color = require("color");
+const newColors = require("./colors.json");
+const newSpacing = require("./spacing.json");
 
 const baseFontSize = 16;
 
@@ -37,6 +39,8 @@ const gray = (n) => Color(lightgray).mix(Color(darkgray), n).hex();
 
 module.exports = {
   navds: {
+    ...(newSpacing?.navds ?? {}),
+    ...(newColors?.navds ?? {}),
     color: {
       white: { value: white },
       darkgray: { value: darkgray },
@@ -213,15 +217,6 @@ module.exports = {
         offset: { value: "0" },
       },
     },
-    spacing: Array(24)
-      .fill(0)
-      .reduce(
-        (spacing, _, index) => ({
-          ...spacing,
-          [index + 1]: { value: `${(index + 1) / 4}rem` },
-        }),
-        {}
-      ),
     checkmark: {
       image: {
         white: {

@navikt/core/tokens/src/spacing.json

@@ -0,0 +1,60 @@
+{
+  "navds": {
+    "spacing": {
+      "1": {
+        "value": "0.25rem"
+      },
+      "2": {
+        "value": "0.5rem"
+      },
+      "3": {
+        "value": "0.75rem"
+      },
+      "4": {
+        "value": "1rem"
+      },
+      "5": {
+        "value": "1.25rem"
+      },
+      "6": {
+        "value": "1.5rem"
+      },
+      "7": {
+        "value": "1.75rem"
+      },
+      "8": {
+        "value": "2rem"
+      },
+      "9": {
+        "value": "2.25rem"
+      },
+      "10": {
+        "value": "2.5rem"
+      },
+      "11": {
+        "value": "2.75rem"
+      },
+      "12": {
+        "value": "3rem"
+      },
+      "14": {
+        "value": "3.5rem"
+      },
+      "16": {
+        "value": "4rem"
+      },
+      "18": {
+        "value": "4.5rem"
+      },
+      "20": {
+        "value": "5rem"
+      },
+      "24": {
+        "value": "6rem"
+      },
+      "32": {
+        "value": "8rem"
+      }
+    }
+  }
+}

@navikt/core/tokens/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "resolveJsonModule": true
+  }
+}

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.7.4",
+  "version": "0.8.2",
   "private": false,
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",
@@ -33,8 +33,8 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^0.6.2",
-    "@navikt/ds-react": "^0.12.3",
+    "@navikt/ds-icons": "^0.6.3",
+    "@navikt/ds-react": "^0.13.2",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",

README.md

@@ -26,7 +26,7 @@ Repoet inneholder følgende:
 - [Eksempler på forskjellige frontend-oppsett](https://github.com/navikt/nav-frontend-moduler/tree/master/examples) til applikasjoner som skal bruke komponentene
 - [Storybook](https://navikt.github.io/Designsystemet/?path=/story/ds-react-kom-i-gang--page) for v2 komponenter (wip) og eldre komponenter.
 
-## Bidra
+## Bidrag
 
 Gå til [CONTRIBUTING.md](https://github.com/navikt/nav-frontend-moduler/blob/master/CONTRIBUTING.md)
 

package.json

@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "test": "yarn workspace @navikt/ds-react test",
+    "test": "yarn workspace @navikt/ds-react test && yarn workspace @navikt/ds-tokens test",
     "postinstall": "husky install",
     "start": "yarn workspace website start",
     "boot": "yarn clean:lib && yarn build:packages --stream",
@@ -18,6 +18,7 @@
     "chromatic": "STORYBOOK_CHROMATIC=true npx chromatic --project-token x3xqdfgkujg",
     "lerna:watch": "yarn run lerna run watch --stream",
     "update:icons": "yarn workspace @navikt/ds-icons update",
+    "update:tokens": "yarn workspace @navikt/ds-tokens update",
     "lint": "yarn lint:jsts && yarn lint:less && yarn lint:css",
     "lint:jsts": "yarn eslint .",
     "lint:less": "yarn stylelint --syntax less **/*.less",

website/src/components/card/card.less

@@ -1,6 +1,6 @@
 .card {
-  height: 22rem;
   width: 18rem;
+  height: 24rem;
   text-decoration: none;
   color: var(--navds-color-darkgray);
   display: flex;
@@ -25,11 +25,10 @@
 }
 
 .card__grid {
-  column-gap: 1rem;
-  row-gap: 1rem;
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  padding: 0;
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .card__icon {
@@ -63,6 +62,7 @@
   font-size: 1.5rem;
   line-height: 1.75rem;
   font-weight: 600;
+  text-align: center;
 }
 
 .card:hover .card__title,
@@ -73,15 +73,3 @@
 .card__content {
   text-align: center;
 }
-
-@media screen and (max-width: 1350px) {
-  .card__grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media screen and (max-width: 700px) {
-  .card__grid {
-    grid-template-columns: repeat(1, 1fr);
-  }
-}

website/src/components/layout/forside/Forside.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Ingress, Sidetittel } from "nav-frontend-typografi";
 import Card from "../../card/Card";
-import { Star, Facilitet, HandsHeart, Like } from "@navikt/ds-icons";
+import { Star, Facilitet, HandsHeart, Like, Locked } from "@navikt/ds-icons";
 import { NAVLogoDark } from "../../assets/images/svg";
 import "./styles.less";
 /* import Lenke from "nav-frontend-lenker"; */
@@ -61,6 +61,19 @@ const Forside = ({ ...props }) => (
             icon={<Like focusable="false" />}
           />
         </li>
+        <li>
+          <Card
+            content={
+              <>
+                <p>Hvordan vi utvikler sikker software i NAV.</p>
+                <p>(Krever GitHub bruker i navikt org)</p>
+              </>
+            }
+            title="Security Champions Playbook"
+            link="https://improved-train-2f244007.pages.github.io/"
+            icon={<Locked focusable="false" />}
+          />
+        </li>
       </ol>
     </nav>
   </div>

website/src/components/layout/forside/styles.less

@@ -46,6 +46,7 @@
 .card__grid {
   list-style: none;
   margin: 0;
+  padding: 0;
 }
 
 .card__wrapper {