├── .yarn
└── versions
│ ├── 1119f53d.yml
│ ├── 12500190.yml
│ ├── 259b2f4f.yml
│ ├── 45ee77ac.yml
│ ├── 750e5212.yml
│ └── a6e56c53.yml
├── themes
├── Brand
│ ├── Altinn.json
│ └── Tilsynet.json
├── $metadata.json
├── Mode
│ └── Compact.json
├── $themes.json
└── Base
│ ├── Brand-default.json
│ ├── Semantic.json
│ ├── Core.json
│ └── Component.json
├── .vscode
├── extensions.json
└── settings.json
├── renovate.json
├── .editorconfig
├── .yarnrc.yml
├── .gitignore
├── package.json
├── scripts
├── create-release.mjs
├── create-release-utils.mjs
└── create-release-utils.test.mjs
├── config.js
├── .github
└── workflows
│ └── release.yaml
├── README.md
├── yarn.lock
└── tokens.json
/.yarn/versions/1119f53d.yml:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.yarn/versions/12500190.yml:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.yarn/versions/259b2f4f.yml:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.yarn/versions/45ee77ac.yml:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.yarn/versions/750e5212.yml:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.yarn/versions/a6e56c53.yml:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/themes/Brand/Altinn.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["DavidAnson.vscode-markdownlint"]
3 | }
4 |
--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json",
3 | "extends": [
4 | "local>Altinn/renovate-config"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | end_of_line = lf
5 | insert_final_newline = true
6 |
7 | [*.{js,json,yml}]
8 | charset = utf-8
9 | indent_style = space
10 | indent_size = 2
11 |
--------------------------------------------------------------------------------
/themes/$metadata.json:
--------------------------------------------------------------------------------
1 | {
2 | "tokenSetOrder": [
3 | "Base/Core",
4 | "Base/Semantic",
5 | "Base/Component",
6 | "Base/Brand-default",
7 | "Mode/Compact",
8 | "Brand/Tilsynet",
9 | "Brand/Altinn"
10 | ]
11 | }
--------------------------------------------------------------------------------
/themes/Mode/Compact.json:
--------------------------------------------------------------------------------
1 | {
2 | "font_size": {
3 | "heading": {
4 | "h1": {
5 | "breakpoint_lg": {
6 | "value": "{font_size.700.breakpoint_lg}",
7 | "type": "fontSizes"
8 | }
9 | }
10 | }
11 | }
12 | }
--------------------------------------------------------------------------------
/.yarnrc.yml:
--------------------------------------------------------------------------------
1 | npmAuthToken: "${NODE_AUTH_TOKEN:-}"
2 |
3 | plugins:
4 | - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
5 | spec: "@yarnpkg/plugin-version"
6 | - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
7 | spec: "@yarnpkg/plugin-interactive-tools"
8 |
9 | yarnPath: .yarn/releases/yarn-3.2.3.cjs
10 |
11 | nodeLinker: node-modules
12 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Built files
2 | /dist/
3 | changes.md
4 |
5 | # Yarn stuff; we're not using PnP/Zero installs
6 | .pnp.*
7 | .yarn/*
8 | !.yarn/patches
9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/sdks
12 | !.yarn/versions
13 |
14 | # Really don't want that
15 | /node_modules/
16 |
17 | # Local env variables should stay local
18 | .env
19 |
20 | # Folder metadata
21 | .DS_Store
22 | Thumbs.db
23 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "workbench.colorCustomizations": {
3 | "sash.hoverBorder": "#34e2d9",
4 | "statusBar.background": "#1cc7be",
5 | "statusBar.foreground": "#15202b",
6 | "statusBarItem.hoverBackground": "#169a93",
7 | "statusBarItem.remoteBackground": "#1cc7be",
8 | "statusBarItem.remoteForeground": "#15202b",
9 | "titleBar.activeBackground": "#1cc7be",
10 | "titleBar.activeForeground": "#15202b",
11 | "titleBar.inactiveBackground": "#1cc7be99",
12 | "titleBar.inactiveForeground": "#15202b99"
13 | },
14 | "peacock.color": "#1cc7be",
15 | "files.exclude": {
16 | ".yarn": true
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@altinn/figma-design-tokens",
3 | "version": "6.0.1",
4 | "packageManager": "yarn@3.2.3",
5 | "devDependencies": {
6 | "change-case": "4.1.2",
7 | "execa": "6.1.0",
8 | "json-diff": "0.9.0",
9 | "rimraf": "3.0.2",
10 | "style-dictionary": "3.7.1",
11 | "token-transformer": "0.0.27"
12 | },
13 | "files": [
14 | "dist"
15 | ],
16 | "main": "dist/tokens.cjs.js",
17 | "module": "dist/tokens.esm.js",
18 | "types": "dist/tokens.d.ts",
19 | "scripts": {
20 | "build": "yarn run clean && yarn run generate-json && yarn run generate-others",
21 | "clean": "rimraf dist",
22 | "test": "node scripts/create-release-utils.test.mjs",
23 | "generate-json": "token-transformer tokens.json dist/tokens.json --expandTypography",
24 | "create-release": "node scripts/create-release.mjs",
25 | "generate-others": "style-dictionary build"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/themes/$themes.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "edeff752fe55f2581f6ceee82c66aac8b8a8622d",
4 | "name": "Felles",
5 | "selectedTokenSets": {
6 | "Base/Core": "source",
7 | "Base/Component": "enabled",
8 | "Base/Semantic": "enabled",
9 | "Base/Brand-default": "enabled"
10 | },
11 | "$figmaStyleReferences": {}
12 | },
13 | {
14 | "id": "3fd3116514764af5cf244506c98e3944ca9f5e93",
15 | "name": "Felles Compact",
16 | "selectedTokenSets": {
17 | "Base/Core": "source",
18 | "Mode/Compact": "enabled",
19 | "Base/Component": "enabled",
20 | "Base/Semantic": "enabled",
21 | "Base/Brand-default": "enabled"
22 | },
23 | "$figmaStyleReferences": {}
24 | },
25 | {
26 | "id": "df8b73b683752ef5f35b3cf293bbe5a0cba9f88d",
27 | "name": "Tilsynet",
28 | "selectedTokenSets": {
29 | "Base/Core": "source",
30 | "Base/Component": "enabled",
31 | "Base/Semantic": "enabled",
32 | "Brand/Tilsynet": "enabled"
33 | },
34 | "$figmaStyleReferences": {}
35 | }
36 | ]
--------------------------------------------------------------------------------
/scripts/create-release.mjs:
--------------------------------------------------------------------------------
1 | import { execa } from "execa";
2 |
3 | import {
4 | readTokenFile,
5 | checkEnv,
6 | getPreviousTag,
7 | getChanges,
8 | printChangesToFile,
9 | createVersionCommit,
10 | } from "./create-release-utils.mjs";
11 |
12 | const start = async () => {
13 | try {
14 | const isRunningGithubAction = checkEnv();
15 |
16 | const prevTag = await getPreviousTag();
17 | const currentTokens = await readTokenFile({ revision: "HEAD" });
18 | const prevTokens = await readTokenFile({ revision: prevTag });
19 |
20 | const { breakingChanges, newChanges, patchChanges } = getChanges({
21 | prevTokens,
22 | currentTokens,
23 | });
24 |
25 | printChangesToFile({ breakingChanges, newChanges, patchChanges });
26 | if (isRunningGithubAction) {
27 | await createVersionCommit({ breakingChanges, newChanges });
28 | await execa("git", ["push", "--follow-tags"]);
29 | } else {
30 | console.log(`This script should only be run from a github action.
31 | No new release has been created, but a preview of the changelog has been printed to changes.md.`);
32 | }
33 | } catch (error) {
34 | console.log(
35 | "Something unexpected happened when trying to create a release"
36 | );
37 | console.log(error);
38 | process.exit(1);
39 | }
40 | };
41 |
42 | start();
43 |
--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
1 | const noCase = require("change-case").noCase;
2 |
3 | module.exports = {
4 | source: ["dist/tokens.json"],
5 | transform: {
6 | /**
7 | * Transforms `level1.level2.another_level` to `level1-level2-another_level`
8 | * This maintains hierarchy distinction (i.e. underscore is not a hierarchy level separator)
9 | */
10 | "name/cti/hierarchical-kebab": {
11 | type: "name",
12 | transformer: (token, options) => {
13 | return noCase([options.prefix].concat(token.path).join("-"), {
14 | delimiter: "-",
15 | stripRegexp: /[^A-Z0-9_]+/gi,
16 | });
17 | },
18 | },
19 | },
20 | platforms: {
21 | js: {
22 | transformGroup: "js",
23 | files: [
24 | {
25 | destination: "dist/tokens.cjs.js",
26 | format: "javascript/module-flat",
27 | },
28 | {
29 | destination: "dist/tokens.esm.js",
30 | format: "javascript/es6",
31 | },
32 | {
33 | destination: "dist/tokens.d.ts",
34 | format: "typescript/es6-declarations",
35 | },
36 | ],
37 | },
38 | css: {
39 | // `transformGroup: "css"` includes the transforms below, except for `name/cti/hierarchical-kebab`
40 | transforms: [
41 | "attribute/cti",
42 | "name/cti/hierarchical-kebab",
43 | "time/seconds",
44 | "content/icon",
45 | "size/rem",
46 | "color/css",
47 | ],
48 | files: [
49 | {
50 | destination: "dist/tokens.css",
51 | format: "css/variables",
52 | },
53 | ],
54 | },
55 | },
56 | };
57 |
--------------------------------------------------------------------------------
/.github/workflows/release.yaml:
--------------------------------------------------------------------------------
1 | name: Release
2 | on:
3 | workflow_dispatch:
4 | inputs:
5 | release_type:
6 | description: "'auto' should be preferred in most cases, see README for details"
7 | required: true
8 | default: auto
9 | type: choice
10 | options:
11 | - auto
12 | - patch
13 | - minor
14 | - major
15 |
16 | jobs:
17 | build_release:
18 | name: Build & release
19 | runs-on: ubuntu-20.04
20 | permissions:
21 | contents: write
22 | packages: write
23 | steps:
24 | - name: Checkout
25 | uses: actions/checkout@v3
26 | with:
27 | fetch-depth: 0 # Need access to history for comparing previous releases
28 | ref: ${{ github.head_ref }}
29 |
30 | - name: Set up Node
31 | uses: actions/setup-node@v3
32 | with:
33 | node-version: "18.x"
34 |
35 | - name: Install dependencies
36 | run: yarn install --immutable
37 |
38 | - name: Build
39 | run: yarn run build
40 |
41 | - name: Test
42 | run: yarn run test
43 |
44 | - name: Create new version
45 | env:
46 | GITHUB_ACTOR: ${{ github.actor }}
47 | RELEASE_TYPE: ${{ github.event.inputs.release_type }}
48 | run: |
49 | yarn run create-release
50 | echo "release_version=`git describe`" >> $GITHUB_ENV
51 |
52 | - name: Publish npm package
53 | run: yarn npm publish --access public
54 | env:
55 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
56 |
57 | - name: Create GitHub release
58 | uses: actions/create-release@v1
59 | env:
60 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
61 | with:
62 | tag_name: ${{ env.release_version }}
63 | release_name: Release ${{ env.release_version }}
64 | draft: false
65 | prerelease: false
66 | body_path: ./changes.md
67 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Altinn Figma Design Tokens
2 |
3 | Design tokens generated from Figma.
4 |
5 | ### Yarn 2+
6 |
7 | Run `yarn add @altinn/figma-design-tokens`
8 |
9 | ### NPM
10 |
11 | Run `npm i @altinn/figma-design-tokens`
12 |
13 | ## Usage
14 |
15 | You can use CSS variables:
16 |
17 | ```js
18 | import "@altinn/figma-design-tokens/dist/tokens.css";
19 | ```
20 |
21 | ```css
22 | div {
23 | padding: var(--space-standard);
24 | }
25 | ```
26 |
27 | Or use the tokens as a module:
28 |
29 | ```jsx
30 | import tokens from "@altinn/figma-design-tokens";
31 |
32 | const Foo = () => Hi
;
33 | ```
34 |
35 | Or as JSON:
36 |
37 | ```jsx
38 | import tokens from "@altinn/figma-design-tokens/dist/tokens.json";
39 |
40 | const Foo = () => (
41 | Hi
42 | );
43 | ```
44 |
45 | (Note that in TypeScript you'll want to set `resolveJsonModule: true` for the above to work.)
46 |
47 | ## Editing tokens
48 |
49 | You should use Figma to edit the tokens. You'll need the [Figma Tokens](https://docs.tokens.studio/) plugin installed in Figma, and configured to sync with this GitHub repo.
50 |
51 | 1. [Install](https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens) the Figma Tokens plugin
52 | 1. Generate a new Personal Access Token (PAT) in [GitHub Developer Settings](https://github.com/settings/tokens) with scope `repo`
53 | 1. Copy the PAT (you can only see it once)
54 | 1. In the Figma Tokens plugin, under `Sync > GitHub`, add new credentials:
55 | - Name: `Altinn Figma Tokens`
56 | - Personal Access Token: _your PAT_
57 | - Repository: `Altinn/figma-design-tokens`
58 | - Default Branch: `main`
59 | - File Path: `tokens.json`
60 |
61 | You can now "pull from GitHub" (button on top right) to fetch the tokens. When done editing tokens, you should "push to GitHub" (second button on top right).
62 |
63 | ## Releasing a new version
64 |
65 | Go to Github Actions, and trigger a new Release. For most cases, `auto` should be the preferred option. This will automatically identify breaking changes, new features, or changed values between previous release and the current release. A changelog with the differences will also be created and added to the release.
66 |
67 | There may be edge cases where you want to force the release to be of a certain type, where you can select one of the other options.
68 |
--------------------------------------------------------------------------------
/themes/Brand/Tilsynet.json:
--------------------------------------------------------------------------------
1 | {
2 | "brand": {
3 | "first": {
4 | "100": {
5 | "value": "#efeffb",
6 | "type": "color"
7 | },
8 | "200": {
9 | "value": "#dedff6",
10 | "type": "color"
11 | },
12 | "300": {
13 | "value": "#bec0ed",
14 | "type": "color"
15 | },
16 | "400": {
17 | "value": "#9da0e4",
18 | "type": "color"
19 | },
20 | "500": {
21 | "value": "#7d81db",
22 | "type": "color"
23 | },
24 | "600": {
25 | "value": "#5c61d2",
26 | "type": "color"
27 | },
28 | "700": {
29 | "value": "#3339c6",
30 | "type": "color"
31 | },
32 | "800": {
33 | "value": "#0008b8",
34 | "type": "color"
35 | }
36 | },
37 | "second": {
38 | "100": {
39 | "value": "#ffeee1",
40 | "type": "color"
41 | },
42 | "200": {
43 | "value": "#ffdcc3",
44 | "type": "color"
45 | },
46 | "300": {
47 | "value": "#fdd4b7",
48 | "type": "color"
49 | },
50 | "400": {
51 | "value": "#ffc296",
52 | "type": "color"
53 | },
54 | "500": {
55 | "value": "#ffb178",
56 | "type": "color"
57 | },
58 | "600": {
59 | "value": "#ffa869",
60 | "type": "color"
61 | },
62 | "700": {
63 | "value": "#e6975f",
64 | "type": "color"
65 | },
66 | "800": {
67 | "value": "#b3764a",
68 | "type": "color"
69 | }
70 | },
71 | "third": {
72 | "100": {
73 | "value": "#eff6f4",
74 | "type": "color"
75 | },
76 | "200": {
77 | "value": "#deece9",
78 | "type": "color"
79 | },
80 | "300": {
81 | "value": "#bedad2",
82 | "type": "color"
83 | },
84 | "400": {
85 | "value": "#9dc7bc",
86 | "type": "color"
87 | },
88 | "500": {
89 | "value": "#7db5a5",
90 | "type": "color"
91 | },
92 | "600": {
93 | "value": "#5ca28f",
94 | "type": "color"
95 | },
96 | "700": {
97 | "value": "#4c907e",
98 | "type": "color"
99 | },
100 | "800": {
101 | "value": "#407d6d",
102 | "type": "color"
103 | }
104 | }
105 | }
106 | }
--------------------------------------------------------------------------------
/themes/Base/Brand-default.json:
--------------------------------------------------------------------------------
1 | {
2 | "brand": {
3 | "first": {
4 | "100": {
5 | "value": "#feefef",
6 | "type": "color",
7 | "description": "AAA 12.8 on grey 800\nAA 6.4 as bkdg for interaction blue"
8 | },
9 | "200": {
10 | "value": "#fddfe0",
11 | "type": "color",
12 | "description": "Light error color\nAAA 11.4 on grey 800\nAA 5.7 as bkdg for interaction blue"
13 | },
14 | "300": {
15 | "value": "#fbbfc1",
16 | "type": "color",
17 | "description": "AAA 9 on grey 800\nAA 4.5 as bkdg for interaction blue"
18 | },
19 | "400": {
20 | "value": "#f89fa1",
21 | "type": "color",
22 | "description": "AAA 7.1 on grey 800\nAA18 3.5 as bkdg for interaction blue"
23 | },
24 | "500": {
25 | "value": "#f67f82",
26 | "type": "color",
27 | "description": "AA 5.6 on grey 800"
28 | },
29 | "600": {
30 | "value": "#f45f63",
31 | "type": "color",
32 | "description": "AA 4.5 on grey 800"
33 | },
34 | "700": {
35 | "value": "#dc5659",
36 | "type": "color",
37 | "description": "AA18 3.7 on grey 800"
38 | },
39 | "800": {
40 | "value": "#c34c4f",
41 | "type": "color",
42 | "description": "AA 4.7 on white"
43 | }
44 | },
45 | "second": {
46 | "100": {
47 | "value": "#fcf7e9",
48 | "type": "color",
49 | "description": "AAA 13.3 on grey 800\nAA 6.7 as bkdg for interaction blue"
50 | },
51 | "200": {
52 | "value": "#faeec2",
53 | "type": "color",
54 | "description": "Light warning color\nAAA 12.3 on grey 800\nAA 1.1 as bkdg for interaction blue"
55 | },
56 | "300": {
57 | "value": "#f5dda6",
58 | "type": "color",
59 | "description": "AAA 10 on grey 800\nAA 5.4 as bkdg for interaction blue"
60 | },
61 | "400": {
62 | "value": "#efcc79",
63 | "type": "color",
64 | "description": "AAA 9.2 on grey 800\nAA 4.6 as bkdg for interaction blue"
65 | },
66 | "500": {
67 | "value": "#eabb4d",
68 | "type": "color",
69 | "description": "AAA 7.9 on grey 800\nAA18 4 as bkdg for interaction blue"
70 | },
71 | "600": {
72 | "value": "#e5aa20",
73 | "type": "color",
74 | "description": "AA 6.8 on grey 800\nAA18 3.4 as bkdg for interaction blue"
75 | },
76 | "700": {
77 | "value": "#ce991d",
78 | "type": "color",
79 | "description": "AA 5.5 on grey 800"
80 | },
81 | "800": {
82 | "value": "#b7881a",
83 | "type": "color",
84 | "description": "AA18 4.4 on grey 800\nAA18 3.2 on white"
85 | }
86 | },
87 | "third": {
88 | "100": {
89 | "value": "#e9f5ff",
90 | "type": "color",
91 | "description": "AAA 12.9 on grey 800\nAA 6.5 as bkdg for interaction blue"
92 | },
93 | "200": {
94 | "value": "#d2eafd",
95 | "type": "color",
96 | "description": "Light information color \nAAA 11.5 on grey 800\nAA 5.8 as bkdg for interaction blue"
97 | },
98 | "300": {
99 | "value": "#a5d6fb",
100 | "type": "color",
101 | "description": "AAA 9.2 on grey 800\nAA 4.6 as bkdg for interaction blue"
102 | },
103 | "400": {
104 | "value": "#78c1f9",
105 | "type": "color",
106 | "description": "AAA 7.3 on grey 800\nAA18 3.7 as bkdg for interaction blue"
107 | },
108 | "500": {
109 | "value": "#4badf7",
110 | "type": "color",
111 | "description": "AA 5.8 on grey 800"
112 | },
113 | "600": {
114 | "value": "#1e98f5",
115 | "type": "color",
116 | "description": "AA 4.6 on grey 800"
117 | },
118 | "700": {
119 | "value": "#1b88dd",
120 | "type": "color",
121 | "description": "AA18 3.8 on grey 800"
122 | },
123 | "800": {
124 | "value": "#156aac",
125 | "type": "color",
126 | "description": "AA 5.6 on white"
127 | }
128 | }
129 | }
130 | }
--------------------------------------------------------------------------------
/scripts/create-release-utils.mjs:
--------------------------------------------------------------------------------
1 | import fs from "node:fs";
2 | import jsonDiff from "json-diff";
3 | import { execa } from "execa";
4 |
5 | const deletedIdentifier = "__deleted";
6 | const addedIdentifier = "__added";
7 | const newValueIdentifier = "__new";
8 | const oldValueIdentifier = "__old";
9 |
10 | export const getValueByPath = (obj, path) =>
11 | path.split(".").reduce((node, i) => node[i], obj);
12 |
13 | export const getChanges = ({ prevTokens, currentTokens }) => {
14 | const diff = jsonDiff.diff(prevTokens, currentTokens, { full: true });
15 |
16 | const breakingChanges = [];
17 | const newChanges = [];
18 | const patchChanges = [];
19 |
20 | const getNewValues = (tokens, initialPath = "") => {
21 | const newValues = [];
22 |
23 | const traverseAndIdentifyNewChanges = (t, pathToKey = "") => {
24 | for (const [key, value] of Object.entries(t)) {
25 | if (typeof value === "object") {
26 | traverseAndIdentifyNewChanges(value, `${pathToKey}${key}.`);
27 | } else {
28 | newValues.push(
29 | `\`${pathToKey}${key}\` has been added with the value: \`${value}\``
30 | );
31 | }
32 | }
33 | };
34 |
35 | traverseAndIdentifyNewChanges(tokens, initialPath);
36 |
37 | return newValues;
38 | };
39 |
40 | const traverseTokensAndIdentifyChanges = (tokens, pathToKey = "") => {
41 | for (const [key, value] of Object.entries(tokens)) {
42 | if (typeof value === "object") {
43 | traverseTokensAndIdentifyChanges(value, `${pathToKey}${key}.`);
44 | }
45 |
46 | if (key.endsWith(newValueIdentifier)) {
47 | const path = pathToKey.substring(0, pathToKey.length - 1); // Remove final period
48 | const oldValue = getValueByPath(diff, path)[oldValueIdentifier];
49 |
50 | patchChanges.push(
51 | `\`${path}\` value has changed from \`${oldValue}\` to \`${value}\``
52 | );
53 | }
54 |
55 | if (key.endsWith(deletedIdentifier)) {
56 | breakingChanges.push(
57 | `\`${pathToKey}${key.replace(
58 | deletedIdentifier,
59 | ""
60 | )}\` has been removed`
61 | );
62 | }
63 |
64 | if (key.endsWith(addedIdentifier)) {
65 | const cleanedKey = key.replace(addedIdentifier, "");
66 |
67 | if (typeof value === "object") {
68 | newChanges.push(...getNewValues(value, `${pathToKey}${cleanedKey}.`));
69 | } else {
70 | newChanges.push(
71 | `\`${pathToKey}${cleanedKey}\` has been added with the value: \`${value}\``
72 | );
73 | }
74 | }
75 | }
76 | };
77 |
78 | if (diff) {
79 | traverseTokensAndIdentifyChanges(diff);
80 | }
81 |
82 | return { breakingChanges, newChanges, patchChanges };
83 | };
84 |
85 | export const printChangesToFile = ({
86 | breakingChanges,
87 | newChanges,
88 | patchChanges,
89 | }) => {
90 | let file;
91 | try {
92 | file = fs.createWriteStream("./changes.md");
93 |
94 | if (
95 | breakingChanges.length === 0 &&
96 | newChanges.length === 0 &&
97 | patchChanges.length === 0
98 | ) {
99 | file.write("_No token changes in this release_");
100 | } else {
101 | if (patchChanges.length > 0) {
102 | file.write("## 🐛 Fixes:\n");
103 | patchChanges.forEach((change) => file.write(`- ${change}\n`));
104 | file.write("\n");
105 | }
106 |
107 | if (newChanges.length > 0) {
108 | file.write("## ✨ New features:\n");
109 | newChanges.forEach((change) => file.write(`- ${change}\n`));
110 | file.write("\n");
111 | }
112 |
113 | if (breakingChanges.length > 0) {
114 | file.write("## 💣 Breaking changes:\n");
115 | breakingChanges.forEach((change) => file.write(`- ${change}\n`));
116 | }
117 | }
118 | } catch (error) {
119 | console.log(error);
120 | process.exit(1);
121 | } finally {
122 | file.end();
123 | }
124 | };
125 |
126 | export const readTokenFile = async ({ revision }) => {
127 | const { stdout } = await execa("git", ["show", `${revision}:tokens.json`]);
128 | return JSON.parse(stdout);
129 | };
130 |
131 | export const getPreviousTag = async () => {
132 | const { stdout } = await execa("git", ["describe", "--tags", "--abbrev=0"]);
133 | return stdout;
134 | };
135 |
136 | export const checkEnv = () => Boolean(process.env.GITHUB_ACTOR);
137 |
138 | export const getNewVersionArg = ({ breakingChanges, newChanges }) => {
139 | const releaseType = process.env.RELEASE_TYPE;
140 | const validReleaseTypes = ["major", "minor", "patch", "auto"];
141 | if (!validReleaseTypes.includes(releaseType)) {
142 | throw new Error(
143 | `Release type should be one of ${validReleaseTypes.join(", ")}`
144 | );
145 | }
146 |
147 | if (releaseType === "auto") {
148 | if (breakingChanges.length > 0) {
149 | return "major";
150 | }
151 | if (newChanges.length > 0) {
152 | return "minor";
153 | }
154 |
155 | return "patch";
156 | }
157 |
158 | return releaseType;
159 | };
160 |
161 | export const createVersionCommit = async ({ breakingChanges, newChanges }) => {
162 | const newVersionArg = getNewVersionArg({ breakingChanges, newChanges });
163 | const author = process.env.GITHUB_ACTOR;
164 | await execa("git", ["config", "user.name", author]);
165 | await execa("git", [
166 | "config",
167 | "user.email",
168 | `${author}@users.noreply.github.com`,
169 | ]);
170 | await execa("npm", ["version", newVersionArg]);
171 | };
172 |
--------------------------------------------------------------------------------
/themes/Base/Semantic.json:
--------------------------------------------------------------------------------
1 | {
2 | "semantic": {
3 | "background": {
4 | "default": {
5 | "value": "#ffffff",
6 | "type": "color"
7 | },
8 | "subtle": {
9 | "value": "#f4f5f6",
10 | "type": "color"
11 | }
12 | },
13 | "surface": {
14 | "neutral": {
15 | "default": {
16 | "value": "#ffffff",
17 | "type": "color"
18 | },
19 | "subtle": {
20 | "value": "#f4f5f6",
21 | "type": "color"
22 | },
23 | "subtle-hover": {
24 | "value": "#e9eaec",
25 | "type": "color"
26 | },
27 | "selected": {
28 | "value": "#e6eff8",
29 | "type": "color"
30 | },
31 | "inverted": {
32 | "value": "#1e2b3c",
33 | "type": "color"
34 | }
35 | },
36 | "action": {
37 | "subtle": {
38 | "value": "#e6eff8",
39 | "type": "color"
40 | },
41 | "default": {
42 | "value": "#0062ba",
43 | "type": "color"
44 | },
45 | "hover": {
46 | "value": "#004e95",
47 | "type": "color"
48 | },
49 | "active": {
50 | "value": "#00315d",
51 | "type": "color",
52 | "description": "Standard farge for handlinger"
53 | }
54 | },
55 | "success": {
56 | "subtle": {
57 | "value": "#d1f4e1",
58 | "type": "color"
59 | },
60 | "subtle-hover": {
61 | "value": "#8be4b5",
62 | "type": "color"
63 | },
64 | "default": {
65 | "value": "#118849",
66 | "type": "color"
67 | },
68 | "hover": {
69 | "value": "#0c6536",
70 | "type": "color"
71 | },
72 | "active": {
73 | "value": "#084826",
74 | "type": "color"
75 | }
76 | },
77 | "warning": {
78 | "subtle": {
79 | "value": "#fffbe6",
80 | "type": "color"
81 | },
82 | "subtle-hover": {
83 | "value": "#fff4b4",
84 | "type": "color"
85 | }
86 | },
87 | "danger": {
88 | "subtle": {
89 | "value": "#f9d5db",
90 | "type": "color"
91 | },
92 | "subtle-hover": {
93 | "value": "#f3abb6",
94 | "type": "color"
95 | },
96 | "default": {
97 | "value": "#e02e49",
98 | "type": "color"
99 | },
100 | "hover": {
101 | "value": "#b3253a",
102 | "type": "color"
103 | },
104 | "active": {
105 | "value": "#861c2c",
106 | "type": "color"
107 | }
108 | },
109 | "info": {
110 | "subtle": {
111 | "value": "#e6eff8",
112 | "type": "color"
113 | },
114 | "hover": {
115 | "value": "#b3d0ea",
116 | "type": "color"
117 | }
118 | }
119 | },
120 | "border": {
121 | "info": {
122 | "default": {
123 | "value": "#004e95",
124 | "type": "color"
125 | }
126 | },
127 | "action": {
128 | "subtle": {
129 | "value": "#e6eff8",
130 | "type": "color"
131 | },
132 | "default": {
133 | "value": "#0062ba",
134 | "type": "color"
135 | },
136 | "hover": {
137 | "value": "#004e95",
138 | "type": "color"
139 | },
140 | "active": {
141 | "value": "#00315d",
142 | "type": "color"
143 | }
144 | },
145 | "neutral": {
146 | "default": {
147 | "value": "#68707c",
148 | "type": "color"
149 | },
150 | "subtle": {
151 | "value": "#d2d5d8",
152 | "type": "color"
153 | },
154 | "strong": {
155 | "value": "#1e2b3c",
156 | "type": "color"
157 | },
158 | "divider": {
159 | "value": "#bcbfc5",
160 | "type": "color"
161 | }
162 | },
163 | "success": {
164 | "default": {
165 | "value": "#0c6536",
166 | "type": "color"
167 | }
168 | },
169 | "warning": {
170 | "default": {
171 | "value": "#cc7005",
172 | "type": "color"
173 | }
174 | },
175 | "danger": {
176 | "default": {
177 | "value": "#b3253a",
178 | "type": "color"
179 | }
180 | },
181 | "tab-focus": {
182 | "default": {
183 | "value": "#98177e",
184 | "type": "color"
185 | }
186 | }
187 | },
188 | "text": {
189 | "success": {
190 | "default": {
191 | "value": "#0c6536",
192 | "type": "color"
193 | },
194 | "on_success": {
195 | "value": "#ffffff",
196 | "type": "color"
197 | }
198 | },
199 | "neutral": {
200 | "default": {
201 | "value": "#1e2b3c",
202 | "type": "color"
203 | },
204 | "subtle": {
205 | "value": "#68707c",
206 | "type": "color"
207 | },
208 | "on_inverted": {
209 | "value": "#ffffff",
210 | "type": "color"
211 | }
212 | },
213 | "action": {
214 | "default": {
215 | "value": "#0062ba",
216 | "type": "color"
217 | },
218 | "on_action": {
219 | "value": "#ffffff",
220 | "type": "color"
221 | }
222 | },
223 | "warning": {
224 | "default": {
225 | "value": "#995404",
226 | "type": "color"
227 | },
228 | "icon_warning": {
229 | "value": "#cc7005",
230 | "type": "color"
231 | },
232 | "on_warning": {
233 | "value": "#663802",
234 | "type": "color"
235 | }
236 | },
237 | "danger": {
238 | "default": {
239 | "value": "#b3253a",
240 | "type": "color"
241 | },
242 | "on_danger": {
243 | "value": "#ffffff",
244 | "type": "color"
245 | }
246 | },
247 | "visited": {
248 | "default": {
249 | "value": "#7a1265",
250 | "type": "color"
251 | }
252 | }
253 | }
254 | }
255 | }
--------------------------------------------------------------------------------
/themes/Base/Core.json:
--------------------------------------------------------------------------------
1 | {
2 | "colors": {
3 | "white": {
4 | "value": "#ffffff",
5 | "type": "color",
6 | "description": "Standard bckd color.\nAAA 13.1 on grey 800\nAAA 7.2 as bkdg for interaction blue"
7 | },
8 | "black": {
9 | "value": "#000000",
10 | "type": "color"
11 | },
12 | "grey": {
13 | "100": {
14 | "value": "#f4f5f6",
15 | "type": "color",
16 | "description": "AAA 13.1 on grey 800\nAA 6.5 as bkdg for interaction blue"
17 | },
18 | "200": {
19 | "value": "#e9eaec",
20 | "type": "color",
21 | "description": "AAA 11.9 on grey 800\nAA 5.9 as bkdg for interaction blue"
22 | },
23 | "300": {
24 | "value": "#d2d5d8",
25 | "type": "color",
26 | "description": "AAA 11.9 on grey 800\nAA 5.9 as bkdg for interaction blue"
27 | },
28 | "400": {
29 | "value": "#bcbfc5",
30 | "type": "color",
31 | "description": "AAA 8.7 on grey 800\nAA18 4.4 as bkdg for interaction blue"
32 | },
33 | "500": {
34 | "value": "#a5aab1",
35 | "type": "color",
36 | "description": "AA 6.1 on grey 800\nAA18 3 as bkdg for interaction blue"
37 | },
38 | "600": {
39 | "value": "#68707c",
40 | "type": "color",
41 | "description": "AA18 3.5 on grey 800\nAA18 4 on white"
42 | },
43 | "700": {
44 | "value": "#4b5563",
45 | "type": "color",
46 | "description": "AAA 7.5 on white"
47 | },
48 | "800": {
49 | "value": "#1e2b3c",
50 | "type": "color",
51 | "description": "Main Text Color\nAAA 14.3 on white"
52 | },
53 | "900": {
54 | "value": "#141e29",
55 | "type": "color",
56 | "description": "AAA 16.8 on white"
57 | }
58 | },
59 | "red": {
60 | "100": {
61 | "value": "#f9d5db",
62 | "type": "color"
63 | },
64 | "200": {
65 | "value": "#f3abb6",
66 | "type": "color"
67 | },
68 | "300": {
69 | "value": "#ec8292",
70 | "type": "color"
71 | },
72 | "400": {
73 | "value": "#e6586d",
74 | "type": "color"
75 | },
76 | "500": {
77 | "value": "#e02e49",
78 | "type": "color"
79 | },
80 | "600": {
81 | "value": "#b3253a",
82 | "type": "color"
83 | },
84 | "700": {
85 | "value": "#861c2c",
86 | "type": "color"
87 | },
88 | "800": {
89 | "value": "#5a121d",
90 | "type": "color"
91 | },
92 | "900": {
93 | "value": "#480e17",
94 | "type": "color"
95 | }
96 | },
97 | "orange": {
98 | "100": {
99 | "value": "#ffe8cd",
100 | "type": "color"
101 | },
102 | "200": {
103 | "value": "#ffd19b",
104 | "type": "color"
105 | },
106 | "300": {
107 | "value": "#ffba6a",
108 | "type": "color"
109 | },
110 | "400": {
111 | "value": "#ffa338",
112 | "type": "color"
113 | },
114 | "500": {
115 | "value": "#ff8c06",
116 | "type": "color"
117 | },
118 | "600": {
119 | "value": "#cc7005",
120 | "type": "color"
121 | },
122 | "700": {
123 | "value": "#995404",
124 | "type": "color"
125 | },
126 | "800": {
127 | "value": "#663802",
128 | "type": "color"
129 | },
130 | "900": {
131 | "value": "#522d02",
132 | "type": "color"
133 | }
134 | },
135 | "yellow": {
136 | "100": {
137 | "value": "#fffbe6",
138 | "type": "color"
139 | },
140 | "200": {
141 | "value": "#fff4b4",
142 | "type": "color"
143 | },
144 | "300": {
145 | "value": "#ffed83",
146 | "type": "color"
147 | },
148 | "400": {
149 | "value": "#ffe551",
150 | "type": "color"
151 | },
152 | "500": {
153 | "value": "#ffda06",
154 | "type": "color"
155 | },
156 | "600": {
157 | "value": "#e6c405",
158 | "type": "color"
159 | },
160 | "700": {
161 | "value": "#ccae05",
162 | "type": "color"
163 | },
164 | "800": {
165 | "value": "#998304",
166 | "type": "color"
167 | },
168 | "900": {
169 | "value": "#665702",
170 | "type": "color"
171 | }
172 | },
173 | "green": {
174 | "100": {
175 | "value": "#e8faf0",
176 | "type": "color"
177 | },
178 | "200": {
179 | "value": "#d1f4e1",
180 | "type": "color"
181 | },
182 | "300": {
183 | "value": "#8be4b5",
184 | "type": "color"
185 | },
186 | "400": {
187 | "value": "#5dd997",
188 | "type": "color"
189 | },
190 | "500": {
191 | "value": "#2ece7a",
192 | "type": "color"
193 | },
194 | "600": {
195 | "value": "#15b560",
196 | "type": "color"
197 | },
198 | "700": {
199 | "value": "#118849",
200 | "type": "color"
201 | },
202 | "800": {
203 | "value": "#0c6536",
204 | "type": "color"
205 | },
206 | "900": {
207 | "value": "#084826",
208 | "type": "color"
209 | }
210 | },
211 | "blue": {
212 | "100": {
213 | "value": "#e6eff8",
214 | "type": "color"
215 | },
216 | "200": {
217 | "value": "#b3d0ea",
218 | "type": "color"
219 | },
220 | "300": {
221 | "value": "#80b1dd",
222 | "type": "color"
223 | },
224 | "400": {
225 | "value": "#66a1d6",
226 | "type": "color"
227 | },
228 | "500": {
229 | "value": "#3381c8",
230 | "type": "color"
231 | },
232 | "600": {
233 | "value": "#1a72c1",
234 | "type": "color"
235 | },
236 | "700": {
237 | "value": "#0062ba",
238 | "type": "color"
239 | },
240 | "800": {
241 | "value": "#004e95",
242 | "type": "color"
243 | },
244 | "900": {
245 | "value": "#00315d",
246 | "type": "color"
247 | }
248 | },
249 | "purple": {
250 | "100": {
251 | "value": "#f5e8f2",
252 | "type": "color"
253 | },
254 | "200": {
255 | "value": "#e0b9d8",
256 | "type": "color"
257 | },
258 | "300": {
259 | "value": "#cc8bbf",
260 | "type": "color"
261 | },
262 | "400": {
263 | "value": "#b75da5",
264 | "type": "color"
265 | },
266 | "500": {
267 | "value": "#a22e8b",
268 | "type": "color"
269 | },
270 | "600": {
271 | "value": "#98177e",
272 | "type": "color"
273 | },
274 | "700": {
275 | "value": "#7a1265",
276 | "type": "color"
277 | },
278 | "800": {
279 | "value": "#5b0e4c",
280 | "type": "color"
281 | },
282 | "900": {
283 | "value": "#490b3d",
284 | "type": "color"
285 | }
286 | }
287 | }
288 | }
--------------------------------------------------------------------------------
/scripts/create-release-utils.test.mjs:
--------------------------------------------------------------------------------
1 | import { it, describe } from "node:test";
2 | import assert from "node:assert/strict";
3 | import {
4 | checkEnv,
5 | getNewVersionArg,
6 | getChanges,
7 | } from "./create-release-utils.mjs";
8 |
9 | describe("checkEnv", () => {
10 | it("should return false env.GITHUB_ACTOR is not set", () => {
11 | const actor = process.env.GITHUB_ACTOR;
12 | delete process.env.GITHUB_ACTOR;
13 | assert.strictEqual(checkEnv(), false);
14 | process.env.GITHUB_ACTOR = actor;
15 | });
16 |
17 | it("should return true when env.GITHUB_ACTOR is set", () => {
18 | const actor = process.env.GITHUB_ACTOR;
19 | process.env.GITHUB_ACTOR = "test";
20 | assert.strictEqual(checkEnv(), true);
21 | process.env.GITHUB_ACTOR = actor;
22 | });
23 | });
24 |
25 | describe("getNewVersionArg", () => {
26 | it("should return major when env.RELEASE_TYPE is auto and there are breaking changes", () => {
27 | const releaseType = process.env.RELEASE_TYPE;
28 | process.env.RELEASE_TYPE = "auto";
29 | assert.strictEqual(
30 | getNewVersionArg({
31 | breakingChanges: ["breaking change"],
32 | newChanges: [],
33 | }),
34 | "major"
35 | );
36 | process.env.RELEASE_TYPE = releaseType;
37 | });
38 |
39 | it("should return major when env.RELEASE_TYPE is auto and there are breaking changes and new features", () => {
40 | const releaseType = process.env.RELEASE_TYPE;
41 | process.env.RELEASE_TYPE = "auto";
42 | assert.strictEqual(
43 | getNewVersionArg({
44 | breakingChanges: ["breaking change"],
45 | newChanges: ["new feature"],
46 | }),
47 | "major"
48 | );
49 | process.env.RELEASE_TYPE = releaseType;
50 | });
51 |
52 | it("should return minor when env.RELEASE_TYPE is auto and there are no breaking changes, only new features", () => {
53 | const releaseType = process.env.RELEASE_TYPE;
54 | process.env.RELEASE_TYPE = "auto";
55 | assert.strictEqual(
56 | getNewVersionArg({ breakingChanges: [], newChanges: ["new feature"] }),
57 | "minor"
58 | );
59 | process.env.RELEASE_TYPE = releaseType;
60 | });
61 |
62 | it("should return patch when env.RELEASE_TYPE is auto and there are no breaking changes and no new features", () => {
63 | const releaseType = process.env.RELEASE_TYPE;
64 | process.env.RELEASE_TYPE = "auto";
65 | assert.strictEqual(
66 | getNewVersionArg({ breakingChanges: [], newChanges: [] }),
67 | "patch"
68 | );
69 | process.env.RELEASE_TYPE = releaseType;
70 | });
71 |
72 | it("should return major when env.RELEASE_TYPE is major even when there are no breaking changes", () => {
73 | const releaseType = process.env.RELEASE_TYPE;
74 | process.env.RELEASE_TYPE = "major";
75 | assert.strictEqual(
76 | getNewVersionArg({ breakingChanges: [], newChanges: [] }),
77 | "major"
78 | );
79 | process.env.RELEASE_TYPE = releaseType;
80 | });
81 |
82 | it("should return minor when env.RELEASE_TYPE is minor even when there are breaking changes", () => {
83 | const releaseType = process.env.RELEASE_TYPE;
84 | process.env.RELEASE_TYPE = "minor";
85 | assert.strictEqual(
86 | getNewVersionArg({
87 | breakingChanges: ["breaking changes"],
88 | newChanges: [],
89 | }),
90 | "minor"
91 | );
92 | process.env.RELEASE_TYPE = releaseType;
93 | });
94 |
95 | it("should return patch when env.RELEASE_TYPE is patch even when there are breaking changes", () => {
96 | const releaseType = process.env.RELEASE_TYPE;
97 | process.env.RELEASE_TYPE = "patch";
98 | assert.strictEqual(
99 | getNewVersionArg({
100 | breakingChanges: ["breaking change"],
101 | newChanges: [],
102 | }),
103 | "patch"
104 | );
105 | process.env.RELEASE_TYPE = releaseType;
106 | });
107 |
108 | it("should return patch when env.RELEASE_TYPE is patch", () => {
109 | const releaseType = process.env.RELEASE_TYPE;
110 | process.env.RELEASE_TYPE = "patch";
111 | assert.strictEqual(
112 | getNewVersionArg({ breakingChanges: [], newChanges: [] }),
113 | "patch"
114 | );
115 | process.env.RELEASE_TYPE = releaseType;
116 | });
117 |
118 | it("should throw when env.RELEASE_TYPE is not a known keyword", () => {
119 | const releaseType = process.env.RELEASE_TYPE;
120 | process.env.RELEASE_TYPE = "banana";
121 | assert.throws(() => {
122 | getNewVersionArg({ breakingChanges: [], newChanges: [] });
123 | }, Error);
124 | process.env.RELEASE_TYPE = releaseType;
125 | });
126 | });
127 |
128 | describe("getChanges", () => {
129 | it("should identify breaking changes when properties have been removed", () => {
130 | const prevTokens = {
131 | foo: {
132 | bar: "baz",
133 | },
134 | fizz: {
135 | buzz: "bazz",
136 | },
137 | altinn: {
138 | component: {
139 | button: {
140 | default: {
141 | value: "red",
142 | type: "color",
143 | },
144 | primary: {
145 | value: "blue",
146 | type: "color",
147 | },
148 | },
149 | },
150 | },
151 | };
152 | const currentTokens = {
153 | foo: {
154 | bar: "baz",
155 | },
156 | altinn: {
157 | component: {
158 | button: {
159 | default: {
160 | value: "red",
161 | type: "color",
162 | },
163 | },
164 | },
165 | },
166 | };
167 | const result = getChanges({ prevTokens, currentTokens });
168 |
169 | const expected = {
170 | breakingChanges: [
171 | "`fizz` has been removed",
172 | "`altinn.component.button.primary` has been removed",
173 | ],
174 | newChanges: [],
175 | patchChanges: [],
176 | };
177 |
178 | assert.deepStrictEqual(result, expected);
179 | });
180 |
181 | it("should identify new features changes when properties have been added", () => {
182 | const prevTokens = {
183 | foo: {
184 | bar: "baz",
185 | },
186 | fizz: {
187 | buzz: "bazz",
188 | },
189 | };
190 | const currentTokens = {
191 | foo: {
192 | bar: "baz",
193 | },
194 | fizz: {
195 | buzz: "bazz",
196 | bar: "baz",
197 | },
198 | fruit: "banana",
199 | altinn: {
200 | component: {
201 | button: {
202 | default: {
203 | value: "red",
204 | type: "color",
205 | },
206 | },
207 | },
208 | },
209 | };
210 | const result = getChanges({ prevTokens, currentTokens });
211 |
212 | const expected = {
213 | breakingChanges: [],
214 | newChanges: [
215 | "`fruit` has been added with the value: `banana`",
216 | "`altinn.component.button.default.value` has been added with the value: `red`",
217 | "`altinn.component.button.default.type` has been added with the value: `color`",
218 | "`fizz.bar` has been added with the value: `baz`",
219 | ],
220 | patchChanges: [],
221 | };
222 |
223 | assert.deepStrictEqual(result, expected);
224 | });
225 |
226 | it("should identify patch changes when property values have been modified", () => {
227 | const prevTokens = {
228 | foo: {
229 | bar: "baz",
230 | },
231 | fizz: {
232 | buzz: "bazz",
233 | },
234 | altinn: {
235 | component: {
236 | button: {
237 | default: {
238 | value: "red",
239 | type: "color",
240 | },
241 | },
242 | },
243 | },
244 | };
245 | const currentTokens = {
246 | foo: {
247 | bar: "baz2",
248 | },
249 | fizz: {
250 | buzz: "bazz2",
251 | },
252 | altinn: {
253 | component: {
254 | button: {
255 | default: {
256 | value: "blue",
257 | type: "color",
258 | },
259 | },
260 | },
261 | },
262 | };
263 | const result = getChanges({ prevTokens, currentTokens });
264 |
265 | const expected = {
266 | breakingChanges: [],
267 | newChanges: [],
268 | patchChanges: [
269 | "`foo.bar` value has changed from `baz` to `baz2`",
270 | "`fizz.buzz` value has changed from `bazz` to `bazz2`",
271 | "`altinn.component.button.default.value` value has changed from `red` to `blue`",
272 | ],
273 | };
274 |
275 | assert.deepStrictEqual(result, expected);
276 | });
277 | });
278 |
--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
1 | # This file is generated by running "yarn install" inside your project.
2 | # Manual changes might be lost - proceed with caution!
3 |
4 | __metadata:
5 | version: 6
6 | cacheKey: 8
7 |
8 | "@altinn/figma-design-tokens@workspace:.":
9 | version: 0.0.0-use.local
10 | resolution: "@altinn/figma-design-tokens@workspace:."
11 | dependencies:
12 | change-case: 4.1.2
13 | execa: 6.1.0
14 | json-diff: 0.9.0
15 | rimraf: 3.0.2
16 | style-dictionary: 3.7.1
17 | token-transformer: 0.0.27
18 | languageName: unknown
19 | linkType: soft
20 |
21 | "ansi-regex@npm:^5.0.1":
22 | version: 5.0.1
23 | resolution: "ansi-regex@npm:5.0.1"
24 | checksum: 2aa4bb54caf2d622f1afdad09441695af2a83aa3fe8b8afa581d205e57ed4261c183c4d3877cee25794443fde5876417d859c108078ab788d6af7e4fe52eb66b
25 | languageName: node
26 | linkType: hard
27 |
28 | "ansi-styles@npm:^4.0.0, ansi-styles@npm:^4.1.0":
29 | version: 4.3.0
30 | resolution: "ansi-styles@npm:4.3.0"
31 | dependencies:
32 | color-convert: ^2.0.1
33 | checksum: 513b44c3b2105dd14cc42a19271e80f386466c4be574bccf60b627432f9198571ebf4ab1e4c3ba17347658f4ee1711c163d574248c0c1cdc2d5917a0ad582ec4
34 | languageName: node
35 | linkType: hard
36 |
37 | "balanced-match@npm:^1.0.0":
38 | version: 1.0.2
39 | resolution: "balanced-match@npm:1.0.2"
40 | checksum: 9706c088a283058a8a99e0bf91b0a2f75497f185980d9ffa8b304de1d9e58ebda7c72c07ebf01dadedaac5b2907b2c6f566f660d62bd336c3468e960403b9d65
41 | languageName: node
42 | linkType: hard
43 |
44 | "brace-expansion@npm:^1.1.7":
45 | version: 1.1.11
46 | resolution: "brace-expansion@npm:1.1.11"
47 | dependencies:
48 | balanced-match: ^1.0.0
49 | concat-map: 0.0.1
50 | checksum: faf34a7bb0c3fcf4b59c7808bc5d2a96a40988addf2e7e09dfbb67a2251800e0d14cd2bfc1aa79174f2f5095c54ff27f46fb1289fe2d77dac755b5eb3434cc07
51 | languageName: node
52 | linkType: hard
53 |
54 | "camel-case@npm:^4.1.2":
55 | version: 4.1.2
56 | resolution: "camel-case@npm:4.1.2"
57 | dependencies:
58 | pascal-case: ^3.1.2
59 | tslib: ^2.0.3
60 | checksum: bcbd25cd253b3cbc69be3f535750137dbf2beb70f093bdc575f73f800acc8443d34fd52ab8f0a2413c34f1e8203139ffc88428d8863e4dfe530cfb257a379ad6
61 | languageName: node
62 | linkType: hard
63 |
64 | "capital-case@npm:^1.0.4":
65 | version: 1.0.4
66 | resolution: "capital-case@npm:1.0.4"
67 | dependencies:
68 | no-case: ^3.0.4
69 | tslib: ^2.0.3
70 | upper-case-first: ^2.0.2
71 | checksum: 41fa8fa87f6d24d0835a2b4a9341a3eaecb64ac29cd7c5391f35d6175a0fa98ab044e7f2602e1ec3afc886231462ed71b5b80c590b8b41af903ec2c15e5c5931
72 | languageName: node
73 | linkType: hard
74 |
75 | "chalk@npm:^4.0.0":
76 | version: 4.1.2
77 | resolution: "chalk@npm:4.1.2"
78 | dependencies:
79 | ansi-styles: ^4.1.0
80 | supports-color: ^7.1.0
81 | checksum: fe75c9d5c76a7a98d45495b91b2172fa3b7a09e0cc9370e5c8feb1c567b85c4288e2b3fded7cfdd7359ac28d6b3844feb8b82b8686842e93d23c827c417e83fc
82 | languageName: node
83 | linkType: hard
84 |
85 | "change-case@npm:4.1.2, change-case@npm:^4.1.2":
86 | version: 4.1.2
87 | resolution: "change-case@npm:4.1.2"
88 | dependencies:
89 | camel-case: ^4.1.2
90 | capital-case: ^1.0.4
91 | constant-case: ^3.0.4
92 | dot-case: ^3.0.4
93 | header-case: ^2.0.4
94 | no-case: ^3.0.4
95 | param-case: ^3.0.4
96 | pascal-case: ^3.1.2
97 | path-case: ^3.0.4
98 | sentence-case: ^3.0.4
99 | snake-case: ^3.0.4
100 | tslib: ^2.0.3
101 | checksum: e4bc4a093a1f7cce8b33896665cf9e456e3bc3cc0def2ad7691b1994cfca99b3188d0a513b16855b01a6bd20692fcde12a7d4d87a5615c4c515bbbf0e651f116
102 | languageName: node
103 | linkType: hard
104 |
105 | "cli-color@npm:^2.0.0":
106 | version: 2.0.3
107 | resolution: "cli-color@npm:2.0.3"
108 | dependencies:
109 | d: ^1.0.1
110 | es5-ext: ^0.10.61
111 | es6-iterator: ^2.0.3
112 | memoizee: ^0.4.15
113 | timers-ext: ^0.1.7
114 | checksum: b1c5f3d0ec29cbe22be7a01d90bd0cfa080ffed6f1c321ea20ae3f10c6041f0e411e28ee2b98025945bee3548931deed1ae849b53c21b523ba74efef855cd73d
115 | languageName: node
116 | linkType: hard
117 |
118 | "cliui@npm:^7.0.2":
119 | version: 7.0.4
120 | resolution: "cliui@npm:7.0.4"
121 | dependencies:
122 | string-width: ^4.2.0
123 | strip-ansi: ^6.0.0
124 | wrap-ansi: ^7.0.0
125 | checksum: ce2e8f578a4813806788ac399b9e866297740eecd4ad1823c27fd344d78b22c5f8597d548adbcc46f0573e43e21e751f39446c5a5e804a12aace402b7a315d7f
126 | languageName: node
127 | linkType: hard
128 |
129 | "color-convert@npm:^2.0.1":
130 | version: 2.0.1
131 | resolution: "color-convert@npm:2.0.1"
132 | dependencies:
133 | color-name: ~1.1.4
134 | checksum: 79e6bdb9fd479a205c71d89574fccfb22bd9053bd98c6c4d870d65c132e5e904e6034978e55b43d69fcaa7433af2016ee203ce76eeba9cfa554b373e7f7db336
135 | languageName: node
136 | linkType: hard
137 |
138 | "color-name@npm:~1.1.4":
139 | version: 1.1.4
140 | resolution: "color-name@npm:1.1.4"
141 | checksum: b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610
142 | languageName: node
143 | linkType: hard
144 |
145 | "commander@npm:^8.3.0":
146 | version: 8.3.0
147 | resolution: "commander@npm:8.3.0"
148 | checksum: 0f82321821fc27b83bd409510bb9deeebcfa799ff0bf5d102128b500b7af22872c0c92cb6a0ebc5a4cf19c6b550fba9cedfa7329d18c6442a625f851377bacf0
149 | languageName: node
150 | linkType: hard
151 |
152 | "concat-map@npm:0.0.1":
153 | version: 0.0.1
154 | resolution: "concat-map@npm:0.0.1"
155 | checksum: 902a9f5d8967a3e2faf138d5cb784b9979bad2e6db5357c5b21c568df4ebe62bcb15108af1b2253744844eb964fc023fbd9afbbbb6ddd0bcc204c6fb5b7bf3af
156 | languageName: node
157 | linkType: hard
158 |
159 | "constant-case@npm:^3.0.4":
160 | version: 3.0.4
161 | resolution: "constant-case@npm:3.0.4"
162 | dependencies:
163 | no-case: ^3.0.4
164 | tslib: ^2.0.3
165 | upper-case: ^2.0.2
166 | checksum: 6c3346d51afc28d9fae922e966c68eb77a19d94858dba230dd92d7b918b37d36db50f0311e9ecf6847e43e934b1c01406a0936973376ab17ec2c471fbcfb2cf3
167 | languageName: node
168 | linkType: hard
169 |
170 | "cross-spawn@npm:^7.0.3":
171 | version: 7.0.3
172 | resolution: "cross-spawn@npm:7.0.3"
173 | dependencies:
174 | path-key: ^3.1.0
175 | shebang-command: ^2.0.0
176 | which: ^2.0.1
177 | checksum: 671cc7c7288c3a8406f3c69a3ae2fc85555c04169e9d611def9a675635472614f1c0ed0ef80955d5b6d4e724f6ced67f0ad1bb006c2ea643488fcfef994d7f52
178 | languageName: node
179 | linkType: hard
180 |
181 | "d@npm:1, d@npm:^1.0.1":
182 | version: 1.0.1
183 | resolution: "d@npm:1.0.1"
184 | dependencies:
185 | es5-ext: ^0.10.50
186 | type: ^1.0.1
187 | checksum: 49ca0639c7b822db670de93d4fbce44b4aa072cd848c76292c9978a8cd0fff1028763020ff4b0f147bd77bfe29b4c7f82e0f71ade76b2a06100543cdfd948d19
188 | languageName: node
189 | linkType: hard
190 |
191 | "difflib@npm:~0.2.1":
192 | version: 0.2.4
193 | resolution: "difflib@npm:0.2.4"
194 | dependencies:
195 | heap: ">= 0.2.0"
196 | checksum: 4f4237b026263ce7471b77d9019b901c2f358a7da89401a80a84a8c3cdc1643a8e70b7495ccbe686cb4d95492eaf5dac119cd9ecbffe5f06bfc175fbe5c20a27
197 | languageName: node
198 | linkType: hard
199 |
200 | "dot-case@npm:^3.0.4":
201 | version: 3.0.4
202 | resolution: "dot-case@npm:3.0.4"
203 | dependencies:
204 | no-case: ^3.0.4
205 | tslib: ^2.0.3
206 | checksum: a65e3519414856df0228b9f645332f974f2bf5433370f544a681122eab59e66038fc3349b4be1cdc47152779dac71a5864f1ccda2f745e767c46e9c6543b1169
207 | languageName: node
208 | linkType: hard
209 |
210 | "dreamopt@npm:~0.8.0":
211 | version: 0.8.0
212 | resolution: "dreamopt@npm:0.8.0"
213 | dependencies:
214 | wordwrap: ">=0.0.2"
215 | checksum: 701134807c4a2cc6d111888e1faa7ea6b5ac73cb2cc0f49d852844f7ade3f8bfd03249845841ff2786ffeb6cff9ba8d8cf39c152c24341fd67ef93a0cf7c9287
216 | languageName: node
217 | linkType: hard
218 |
219 | "emoji-regex@npm:^8.0.0":
220 | version: 8.0.0
221 | resolution: "emoji-regex@npm:8.0.0"
222 | checksum: d4c5c39d5a9868b5fa152f00cada8a936868fd3367f33f71be515ecee4c803132d11b31a6222b2571b1e5f7e13890156a94880345594d0ce7e3c9895f560f192
223 | languageName: node
224 | linkType: hard
225 |
226 | "es5-ext@npm:^0.10.35, es5-ext@npm:^0.10.46, es5-ext@npm:^0.10.50, es5-ext@npm:^0.10.53, es5-ext@npm:^0.10.61, es5-ext@npm:~0.10.14, es5-ext@npm:~0.10.2, es5-ext@npm:~0.10.46":
227 | version: 0.10.62
228 | resolution: "es5-ext@npm:0.10.62"
229 | dependencies:
230 | es6-iterator: ^2.0.3
231 | es6-symbol: ^3.1.3
232 | next-tick: ^1.1.0
233 | checksum: 25f42f6068cfc6e393cf670bc5bba249132c5f5ec2dd0ed6e200e6274aca2fed8e9aec8a31c76031744c78ca283c57f0b41c7e737804c6328c7b8d3fbcba7983
234 | languageName: node
235 | linkType: hard
236 |
237 | "es6-iterator@npm:^2.0.3":
238 | version: 2.0.3
239 | resolution: "es6-iterator@npm:2.0.3"
240 | dependencies:
241 | d: 1
242 | es5-ext: ^0.10.35
243 | es6-symbol: ^3.1.1
244 | checksum: 6e48b1c2d962c21dee604b3d9f0bc3889f11ed5a8b33689155a2065d20e3107e2a69cc63a71bd125aeee3a589182f8bbcb5c8a05b6a8f38fa4205671b6d09697
245 | languageName: node
246 | linkType: hard
247 |
248 | "es6-symbol@npm:^3.1.1, es6-symbol@npm:^3.1.3":
249 | version: 3.1.3
250 | resolution: "es6-symbol@npm:3.1.3"
251 | dependencies:
252 | d: ^1.0.1
253 | ext: ^1.1.2
254 | checksum: cd49722c2a70f011eb02143ef1c8c70658d2660dead6641e160b94619f408b9cf66425515787ffe338affdf0285ad54f4eae30ea5bd510e33f8659ec53bcaa70
255 | languageName: node
256 | linkType: hard
257 |
258 | "es6-weak-map@npm:^2.0.3":
259 | version: 2.0.3
260 | resolution: "es6-weak-map@npm:2.0.3"
261 | dependencies:
262 | d: 1
263 | es5-ext: ^0.10.46
264 | es6-iterator: ^2.0.3
265 | es6-symbol: ^3.1.1
266 | checksum: 19ca15f46d50948ce78c2da5f21fb5b1ef45addd4fe17b5df952ff1f2a3d6ce4781249bc73b90995257264be2a98b2ec749bb2aba0c14b5776a1154178f9c927
267 | languageName: node
268 | linkType: hard
269 |
270 | "escalade@npm:^3.1.1":
271 | version: 3.1.1
272 | resolution: "escalade@npm:3.1.1"
273 | checksum: a3e2a99f07acb74b3ad4989c48ca0c3140f69f923e56d0cba0526240ee470b91010f9d39001f2a4a313841d237ede70a729e92125191ba5d21e74b106800b133
274 | languageName: node
275 | linkType: hard
276 |
277 | "event-emitter@npm:^0.3.5":
278 | version: 0.3.5
279 | resolution: "event-emitter@npm:0.3.5"
280 | dependencies:
281 | d: 1
282 | es5-ext: ~0.10.14
283 | checksum: 27c1399557d9cd7e0aa0b366c37c38a4c17293e3a10258e8b692a847dd5ba9fb90429c3a5a1eeff96f31f6fa03ccbd31d8ad15e00540b22b22f01557be706030
284 | languageName: node
285 | linkType: hard
286 |
287 | "execa@npm:6.1.0":
288 | version: 6.1.0
289 | resolution: "execa@npm:6.1.0"
290 | dependencies:
291 | cross-spawn: ^7.0.3
292 | get-stream: ^6.0.1
293 | human-signals: ^3.0.1
294 | is-stream: ^3.0.0
295 | merge-stream: ^2.0.0
296 | npm-run-path: ^5.1.0
297 | onetime: ^6.0.0
298 | signal-exit: ^3.0.7
299 | strip-final-newline: ^3.0.0
300 | checksum: 1a4af799839134f5c72eb63d525b87304c1114a63aa71676c91d57ccef2e26f2f53e14c11384ab11c4ec479be1efa83d11c8190e00040355c2c5c3364327fa8e
301 | languageName: node
302 | linkType: hard
303 |
304 | "ext@npm:^1.1.2":
305 | version: 1.6.0
306 | resolution: "ext@npm:1.6.0"
307 | dependencies:
308 | type: ^2.5.0
309 | checksum: ca3ef4619e838f441a92238a98b77ac873da2175ace746c64303ffe2c3208e79a3acf3bf7004e40b720f3c2a83bf0143e6dd4a7cdfae6e73f54a3bfc7a14b5c2
310 | languageName: node
311 | linkType: hard
312 |
313 | "fs-extra@npm:^10.0.0":
314 | version: 10.0.1
315 | resolution: "fs-extra@npm:10.0.1"
316 | dependencies:
317 | graceful-fs: ^4.2.0
318 | jsonfile: ^6.0.1
319 | universalify: ^2.0.0
320 | checksum: c1faaa5eb9e1c5c7c7ff09f966e93922ecb068ae1b04801cfc983ef05fcc1f66bfbb8d8d0b745c910014c7a2e7317fb6cf3bfe7390450c1157e3cc1a218f221d
321 | languageName: node
322 | linkType: hard
323 |
324 | "fs.realpath@npm:^1.0.0":
325 | version: 1.0.0
326 | resolution: "fs.realpath@npm:1.0.0"
327 | checksum: 99ddea01a7e75aa276c250a04eedeffe5662bce66c65c07164ad6264f9de18fb21be9433ead460e54cff20e31721c811f4fb5d70591799df5f85dce6d6746fd0
328 | languageName: node
329 | linkType: hard
330 |
331 | "get-caller-file@npm:^2.0.5":
332 | version: 2.0.5
333 | resolution: "get-caller-file@npm:2.0.5"
334 | checksum: b9769a836d2a98c3ee734a88ba712e62703f1df31b94b784762c433c27a386dd6029ff55c2a920c392e33657d80191edbf18c61487e198844844516f843496b9
335 | languageName: node
336 | linkType: hard
337 |
338 | "get-stream@npm:^6.0.1":
339 | version: 6.0.1
340 | resolution: "get-stream@npm:6.0.1"
341 | checksum: e04ecece32c92eebf5b8c940f51468cd53554dcbb0ea725b2748be583c9523d00128137966afce410b9b051eb2ef16d657cd2b120ca8edafcf5a65e81af63cad
342 | languageName: node
343 | linkType: hard
344 |
345 | "glob@npm:^7.1.3, glob@npm:^7.2.0":
346 | version: 7.2.0
347 | resolution: "glob@npm:7.2.0"
348 | dependencies:
349 | fs.realpath: ^1.0.0
350 | inflight: ^1.0.4
351 | inherits: 2
352 | minimatch: ^3.0.4
353 | once: ^1.3.0
354 | path-is-absolute: ^1.0.0
355 | checksum: 78a8ea942331f08ed2e055cb5b9e40fe6f46f579d7fd3d694f3412fe5db23223d29b7fee1575440202e9a7ff9a72ab106a39fee39934c7bedafe5e5f8ae20134
356 | languageName: node
357 | linkType: hard
358 |
359 | "graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0":
360 | version: 4.2.9
361 | resolution: "graceful-fs@npm:4.2.9"
362 | checksum: 68ea4e07ff2c041ada184f9278b830375f8e0b75154e3f080af6b70f66172fabb4108d19b3863a96b53fc068a310b9b6493d86d1291acc5f3861eb4b79d26ad6
363 | languageName: node
364 | linkType: hard
365 |
366 | "has-flag@npm:^4.0.0":
367 | version: 4.0.0
368 | resolution: "has-flag@npm:4.0.0"
369 | checksum: 261a1357037ead75e338156b1f9452c016a37dcd3283a972a30d9e4a87441ba372c8b81f818cd0fbcd9c0354b4ae7e18b9e1afa1971164aef6d18c2b6095a8ad
370 | languageName: node
371 | linkType: hard
372 |
373 | "header-case@npm:^2.0.4":
374 | version: 2.0.4
375 | resolution: "header-case@npm:2.0.4"
376 | dependencies:
377 | capital-case: ^1.0.4
378 | tslib: ^2.0.3
379 | checksum: 571c83eeb25e8130d172218712f807c0b96d62b020981400bccc1503a7cf14b09b8b10498a962d2739eccf231d950e3848ba7d420b58a6acd2f9283439546cd9
380 | languageName: node
381 | linkType: hard
382 |
383 | "heap@npm:>= 0.2.0":
384 | version: 0.2.7
385 | resolution: "heap@npm:0.2.7"
386 | checksum: b0f3963a799e02173f994c452921a777f2b895b710119df999736bfed7477235c2860c423d9aea18a9f3b3d065cb1114d605c208cfcb8d0ac550f97ec5d28cb0
387 | languageName: node
388 | linkType: hard
389 |
390 | "human-signals@npm:^3.0.1":
391 | version: 3.0.1
392 | resolution: "human-signals@npm:3.0.1"
393 | checksum: f252a7769c8094a5c9dc6772816bdb417b188820b04c8b42d0fc468e03a0ba905b1dd07afabe9385cc83504af1ccc2b985cd1e4aeeeb8e0029896c5af2e6f354
394 | languageName: node
395 | linkType: hard
396 |
397 | "inflight@npm:^1.0.4":
398 | version: 1.0.6
399 | resolution: "inflight@npm:1.0.6"
400 | dependencies:
401 | once: ^1.3.0
402 | wrappy: 1
403 | checksum: f4f76aa072ce19fae87ce1ef7d221e709afb59d445e05d47fba710e85470923a75de35bfae47da6de1b18afc3ce83d70facf44cfb0aff89f0a3f45c0a0244dfd
404 | languageName: node
405 | linkType: hard
406 |
407 | "inherits@npm:2":
408 | version: 2.0.4
409 | resolution: "inherits@npm:2.0.4"
410 | checksum: 4a48a733847879d6cf6691860a6b1e3f0f4754176e4d71494c41f3475553768b10f84b5ce1d40fbd0e34e6bfbb864ee35858ad4dd2cf31e02fc4a154b724d7f1
411 | languageName: node
412 | linkType: hard
413 |
414 | "is-fullwidth-code-point@npm:^3.0.0":
415 | version: 3.0.0
416 | resolution: "is-fullwidth-code-point@npm:3.0.0"
417 | checksum: 44a30c29457c7fb8f00297bce733f0a64cd22eca270f83e58c105e0d015e45c019491a4ab2faef91ab51d4738c670daff901c799f6a700e27f7314029e99e348
418 | languageName: node
419 | linkType: hard
420 |
421 | "is-promise@npm:^2.2.2":
422 | version: 2.2.2
423 | resolution: "is-promise@npm:2.2.2"
424 | checksum: 18bf7d1c59953e0ad82a1ed963fb3dc0d135c8f299a14f89a17af312fc918373136e56028e8831700e1933519630cc2fd4179a777030330fde20d34e96f40c78
425 | languageName: node
426 | linkType: hard
427 |
428 | "is-stream@npm:^3.0.0":
429 | version: 3.0.0
430 | resolution: "is-stream@npm:3.0.0"
431 | checksum: 172093fe99119ffd07611ab6d1bcccfe8bc4aa80d864b15f43e63e54b7abc71e779acd69afdb854c4e2a67fdc16ae710e370eda40088d1cfc956a50ed82d8f16
432 | languageName: node
433 | linkType: hard
434 |
435 | "isexe@npm:^2.0.0":
436 | version: 2.0.0
437 | resolution: "isexe@npm:2.0.0"
438 | checksum: 26bf6c5480dda5161c820c5b5c751ae1e766c587b1f951ea3fcfc973bafb7831ae5b54a31a69bd670220e42e99ec154475025a468eae58ea262f813fdc8d1c62
439 | languageName: node
440 | linkType: hard
441 |
442 | "json-diff@npm:0.9.0":
443 | version: 0.9.0
444 | resolution: "json-diff@npm:0.9.0"
445 | dependencies:
446 | cli-color: ^2.0.0
447 | difflib: ~0.2.1
448 | dreamopt: ~0.8.0
449 | bin:
450 | json-diff: bin/json-diff.js
451 | checksum: c553da0e461ad940c50922c6939a8842930bf1a107dcfb4293cd79ab317cd405c0cc9d10013cc9c8bf47cab7dacdc1b72b17734b38ae23822088e980ca7aa0ae
452 | languageName: node
453 | linkType: hard
454 |
455 | "json5@npm:^2.2.0":
456 | version: 2.2.1
457 | resolution: "json5@npm:2.2.1"
458 | bin:
459 | json5: lib/cli.js
460 | checksum: 74b8a23b102a6f2bf2d224797ae553a75488b5adbaee9c9b6e5ab8b510a2fc6e38f876d4c77dea672d4014a44b2399e15f2051ac2b37b87f74c0c7602003543b
461 | languageName: node
462 | linkType: hard
463 |
464 | "jsonc-parser@npm:^3.0.0":
465 | version: 3.0.0
466 | resolution: "jsonc-parser@npm:3.0.0"
467 | checksum: 1df2326f1f9688de30c70ff19c5b2a83ba3b89a1036160da79821d1361090775e9db502dc57a67c11b56e1186fc1ed70b887f25c5febf9a3ec4f91435836c99d
468 | languageName: node
469 | linkType: hard
470 |
471 | "jsonfile@npm:^6.0.1":
472 | version: 6.1.0
473 | resolution: "jsonfile@npm:6.1.0"
474 | dependencies:
475 | graceful-fs: ^4.1.6
476 | universalify: ^2.0.0
477 | dependenciesMeta:
478 | graceful-fs:
479 | optional: true
480 | checksum: 7af3b8e1ac8fe7f1eccc6263c6ca14e1966fcbc74b618d3c78a0a2075579487547b94f72b7a1114e844a1e15bb00d440e5d1720bfc4612d790a6f285d5ea8354
481 | languageName: node
482 | linkType: hard
483 |
484 | "lodash@npm:^4.17.15":
485 | version: 4.17.21
486 | resolution: "lodash@npm:4.17.21"
487 | checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
488 | languageName: node
489 | linkType: hard
490 |
491 | "lower-case@npm:^2.0.2":
492 | version: 2.0.2
493 | resolution: "lower-case@npm:2.0.2"
494 | dependencies:
495 | tslib: ^2.0.3
496 | checksum: 83a0a5f159ad7614bee8bf976b96275f3954335a84fad2696927f609ddae902802c4f3312d86668722e668bef41400254807e1d3a7f2e8c3eede79691aa1f010
497 | languageName: node
498 | linkType: hard
499 |
500 | "lru-queue@npm:^0.1.0":
501 | version: 0.1.0
502 | resolution: "lru-queue@npm:0.1.0"
503 | dependencies:
504 | es5-ext: ~0.10.2
505 | checksum: 7f2c53c5e7f2de20efb6ebb3086b7aea88d6cf9ae91ac5618ece974122960c4e8ed04988e81d92c3e63d60b12c556b14d56ef7a9c5a4627b23859b813e39b1a2
506 | languageName: node
507 | linkType: hard
508 |
509 | "memoizee@npm:^0.4.15":
510 | version: 0.4.15
511 | resolution: "memoizee@npm:0.4.15"
512 | dependencies:
513 | d: ^1.0.1
514 | es5-ext: ^0.10.53
515 | es6-weak-map: ^2.0.3
516 | event-emitter: ^0.3.5
517 | is-promise: ^2.2.2
518 | lru-queue: ^0.1.0
519 | next-tick: ^1.1.0
520 | timers-ext: ^0.1.7
521 | checksum: 4065d94416dbadac56edf5947bf342beca0e9f051f33ad60d7c4baf3f6ca0f3c6fdb770c5caed5a89c0ceaf9121428582f396445d591785281383d60aa883418
522 | languageName: node
523 | linkType: hard
524 |
525 | "merge-stream@npm:^2.0.0":
526 | version: 2.0.0
527 | resolution: "merge-stream@npm:2.0.0"
528 | checksum: 6fa4dcc8d86629705cea944a4b88ef4cb0e07656ebf223fa287443256414283dd25d91c1cd84c77987f2aec5927af1a9db6085757cb43d90eb170ebf4b47f4f4
529 | languageName: node
530 | linkType: hard
531 |
532 | "mimic-fn@npm:^4.0.0":
533 | version: 4.0.0
534 | resolution: "mimic-fn@npm:4.0.0"
535 | checksum: 995dcece15ee29aa16e188de6633d43a3db4611bcf93620e7e62109ec41c79c0f34277165b8ce5e361205049766e371851264c21ac64ca35499acb5421c2ba56
536 | languageName: node
537 | linkType: hard
538 |
539 | "minimatch@npm:^3.0.4":
540 | version: 3.1.2
541 | resolution: "minimatch@npm:3.1.2"
542 | dependencies:
543 | brace-expansion: ^1.1.7
544 | checksum: c154e566406683e7bcb746e000b84d74465b3a832c45d59912b9b55cd50dee66e5c4b1e5566dba26154040e51672f9aa450a9aef0c97cfc7336b78b7afb9540a
545 | languageName: node
546 | linkType: hard
547 |
548 | "next-tick@npm:1, next-tick@npm:^1.1.0":
549 | version: 1.1.0
550 | resolution: "next-tick@npm:1.1.0"
551 | checksum: 83b5cf36027a53ee6d8b7f9c0782f2ba87f4858d977342bfc3c20c21629290a2111f8374d13a81221179603ffc4364f38374b5655d17b6a8f8a8c77bdea4fe8b
552 | languageName: node
553 | linkType: hard
554 |
555 | "no-case@npm:^3.0.4":
556 | version: 3.0.4
557 | resolution: "no-case@npm:3.0.4"
558 | dependencies:
559 | lower-case: ^2.0.2
560 | tslib: ^2.0.3
561 | checksum: 0b2ebc113dfcf737d48dde49cfebf3ad2d82a8c3188e7100c6f375e30eafbef9e9124aadc3becef237b042fd5eb0aad2fd78669c20972d045bbe7fea8ba0be5c
562 | languageName: node
563 | linkType: hard
564 |
565 | "npm-run-path@npm:^5.1.0":
566 | version: 5.1.0
567 | resolution: "npm-run-path@npm:5.1.0"
568 | dependencies:
569 | path-key: ^4.0.0
570 | checksum: dc184eb5ec239d6a2b990b43236845332ef12f4e0beaa9701de724aa797fe40b6bbd0157fb7639d24d3ab13f5d5cf22d223a19c6300846b8126f335f788bee66
571 | languageName: node
572 | linkType: hard
573 |
574 | "once@npm:^1.3.0":
575 | version: 1.4.0
576 | resolution: "once@npm:1.4.0"
577 | dependencies:
578 | wrappy: 1
579 | checksum: cd0a88501333edd640d95f0d2700fbde6bff20b3d4d9bdc521bdd31af0656b5706570d6c6afe532045a20bb8dc0849f8332d6f2a416e0ba6d3d3b98806c7db68
580 | languageName: node
581 | linkType: hard
582 |
583 | "onetime@npm:^6.0.0":
584 | version: 6.0.0
585 | resolution: "onetime@npm:6.0.0"
586 | dependencies:
587 | mimic-fn: ^4.0.0
588 | checksum: 0846ce78e440841335d4e9182ef69d5762e9f38aa7499b19f42ea1c4cd40f0b4446094c455c713f9adac3f4ae86f613bb5e30c99e52652764d06a89f709b3788
589 | languageName: node
590 | linkType: hard
591 |
592 | "param-case@npm:^3.0.4":
593 | version: 3.0.4
594 | resolution: "param-case@npm:3.0.4"
595 | dependencies:
596 | dot-case: ^3.0.4
597 | tslib: ^2.0.3
598 | checksum: b34227fd0f794e078776eb3aa6247442056cb47761e9cd2c4c881c86d84c64205f6a56ef0d70b41ee7d77da02c3f4ed2f88e3896a8fefe08bdfb4deca037c687
599 | languageName: node
600 | linkType: hard
601 |
602 | "pascal-case@npm:^3.1.2":
603 | version: 3.1.2
604 | resolution: "pascal-case@npm:3.1.2"
605 | dependencies:
606 | no-case: ^3.0.4
607 | tslib: ^2.0.3
608 | checksum: ba98bfd595fc91ef3d30f4243b1aee2f6ec41c53b4546bfa3039487c367abaa182471dcfc830a1f9e1a0df00c14a370514fa2b3a1aacc68b15a460c31116873e
609 | languageName: node
610 | linkType: hard
611 |
612 | "path-case@npm:^3.0.4":
613 | version: 3.0.4
614 | resolution: "path-case@npm:3.0.4"
615 | dependencies:
616 | dot-case: ^3.0.4
617 | tslib: ^2.0.3
618 | checksum: 61de0526222629f65038a66f63330dd22d5b54014ded6636283e1d15364da38b3cf29e4433aa3f9d8b0dba407ae2b059c23b0104a34ee789944b1bc1c5c7e06d
619 | languageName: node
620 | linkType: hard
621 |
622 | "path-is-absolute@npm:^1.0.0":
623 | version: 1.0.1
624 | resolution: "path-is-absolute@npm:1.0.1"
625 | checksum: 060840f92cf8effa293bcc1bea81281bd7d363731d214cbe5c227df207c34cd727430f70c6037b5159c8a870b9157cba65e775446b0ab06fd5ecc7e54615a3b8
626 | languageName: node
627 | linkType: hard
628 |
629 | "path-key@npm:^3.1.0":
630 | version: 3.1.1
631 | resolution: "path-key@npm:3.1.1"
632 | checksum: 55cd7a9dd4b343412a8386a743f9c746ef196e57c823d90ca3ab917f90ab9f13dd0ded27252ba49dbdfcab2b091d998bc446f6220cd3cea65db407502a740020
633 | languageName: node
634 | linkType: hard
635 |
636 | "path-key@npm:^4.0.0":
637 | version: 4.0.0
638 | resolution: "path-key@npm:4.0.0"
639 | checksum: 8e6c314ae6d16b83e93032c61020129f6f4484590a777eed709c4a01b50e498822b00f76ceaf94bc64dbd90b327df56ceadce27da3d83393790f1219e07721d7
640 | languageName: node
641 | linkType: hard
642 |
643 | "require-directory@npm:^2.1.1":
644 | version: 2.1.1
645 | resolution: "require-directory@npm:2.1.1"
646 | checksum: fb47e70bf0001fdeabdc0429d431863e9475e7e43ea5f94ad86503d918423c1543361cc5166d713eaa7029dd7a3d34775af04764bebff99ef413111a5af18c80
647 | languageName: node
648 | linkType: hard
649 |
650 | "rimraf@npm:3.0.2":
651 | version: 3.0.2
652 | resolution: "rimraf@npm:3.0.2"
653 | dependencies:
654 | glob: ^7.1.3
655 | bin:
656 | rimraf: bin.js
657 | checksum: 87f4164e396f0171b0a3386cc1877a817f572148ee13a7e113b238e48e8a9f2f31d009a92ec38a591ff1567d9662c6b67fd8818a2dbbaed74bc26a87a2a4a9a0
658 | languageName: node
659 | linkType: hard
660 |
661 | "sentence-case@npm:^3.0.4":
662 | version: 3.0.4
663 | resolution: "sentence-case@npm:3.0.4"
664 | dependencies:
665 | no-case: ^3.0.4
666 | tslib: ^2.0.3
667 | upper-case-first: ^2.0.2
668 | checksum: 3cfe6c0143e649132365695706702d7f729f484fa7b25f43435876efe7af2478243eefb052bacbcce10babf9319fd6b5b6bc59b94c80a1c819bcbb40651465d5
669 | languageName: node
670 | linkType: hard
671 |
672 | "shebang-command@npm:^2.0.0":
673 | version: 2.0.0
674 | resolution: "shebang-command@npm:2.0.0"
675 | dependencies:
676 | shebang-regex: ^3.0.0
677 | checksum: 6b52fe87271c12968f6a054e60f6bde5f0f3d2db483a1e5c3e12d657c488a15474121a1d55cd958f6df026a54374ec38a4a963988c213b7570e1d51575cea7fa
678 | languageName: node
679 | linkType: hard
680 |
681 | "shebang-regex@npm:^3.0.0":
682 | version: 3.0.0
683 | resolution: "shebang-regex@npm:3.0.0"
684 | checksum: 1a2bcae50de99034fcd92ad4212d8e01eedf52c7ec7830eedcf886622804fe36884278f2be8be0ea5fde3fd1c23911643a4e0f726c8685b61871c8908af01222
685 | languageName: node
686 | linkType: hard
687 |
688 | "signal-exit@npm:^3.0.7":
689 | version: 3.0.7
690 | resolution: "signal-exit@npm:3.0.7"
691 | checksum: a2f098f247adc367dffc27845853e9959b9e88b01cb301658cfe4194352d8d2bb32e18467c786a7fe15f1d44b233ea35633d076d5e737870b7139949d1ab6318
692 | languageName: node
693 | linkType: hard
694 |
695 | "snake-case@npm:^3.0.4":
696 | version: 3.0.4
697 | resolution: "snake-case@npm:3.0.4"
698 | dependencies:
699 | dot-case: ^3.0.4
700 | tslib: ^2.0.3
701 | checksum: 0a7a79900bbb36f8aaa922cf111702a3647ac6165736d5dc96d3ef367efc50465cac70c53cd172c382b022dac72ec91710608e5393de71f76d7142e6fd80e8a3
702 | languageName: node
703 | linkType: hard
704 |
705 | "string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3":
706 | version: 4.2.3
707 | resolution: "string-width@npm:4.2.3"
708 | dependencies:
709 | emoji-regex: ^8.0.0
710 | is-fullwidth-code-point: ^3.0.0
711 | strip-ansi: ^6.0.1
712 | checksum: e52c10dc3fbfcd6c3a15f159f54a90024241d0f149cf8aed2982a2d801d2e64df0bf1dc351cf8e95c3319323f9f220c16e740b06faecd53e2462df1d2b5443fb
713 | languageName: node
714 | linkType: hard
715 |
716 | "strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1":
717 | version: 6.0.1
718 | resolution: "strip-ansi@npm:6.0.1"
719 | dependencies:
720 | ansi-regex: ^5.0.1
721 | checksum: f3cd25890aef3ba6e1a74e20896c21a46f482e93df4a06567cebf2b57edabb15133f1f94e57434e0a958d61186087b1008e89c94875d019910a213181a14fc8c
722 | languageName: node
723 | linkType: hard
724 |
725 | "strip-final-newline@npm:^3.0.0":
726 | version: 3.0.0
727 | resolution: "strip-final-newline@npm:3.0.0"
728 | checksum: 23ee263adfa2070cd0f23d1ac14e2ed2f000c9b44229aec9c799f1367ec001478469560abefd00c5c99ee6f0b31c137d53ec6029c53e9f32a93804e18c201050
729 | languageName: node
730 | linkType: hard
731 |
732 | "style-dictionary@npm:3.7.1":
733 | version: 3.7.1
734 | resolution: "style-dictionary@npm:3.7.1"
735 | dependencies:
736 | chalk: ^4.0.0
737 | change-case: ^4.1.2
738 | commander: ^8.3.0
739 | fs-extra: ^10.0.0
740 | glob: ^7.2.0
741 | json5: ^2.2.0
742 | jsonc-parser: ^3.0.0
743 | lodash: ^4.17.15
744 | tinycolor2: ^1.4.1
745 | bin:
746 | style-dictionary: bin/style-dictionary
747 | checksum: f2793b51d4c91625d1ee3385a2438c3fb0723183812c47f0fcea96703fc3a8a433ba4b496a3ab3d793c9827229d74483b4d8916d624d7d9bde5d36e8b18831fe
748 | languageName: node
749 | linkType: hard
750 |
751 | "supports-color@npm:^7.1.0":
752 | version: 7.2.0
753 | resolution: "supports-color@npm:7.2.0"
754 | dependencies:
755 | has-flag: ^4.0.0
756 | checksum: 3dda818de06ebbe5b9653e07842d9479f3555ebc77e9a0280caf5a14fb877ffee9ed57007c3b78f5a6324b8dbeec648d9e97a24e2ed9fdb81ddc69ea07100f4a
757 | languageName: node
758 | linkType: hard
759 |
760 | "timers-ext@npm:^0.1.7":
761 | version: 0.1.7
762 | resolution: "timers-ext@npm:0.1.7"
763 | dependencies:
764 | es5-ext: ~0.10.46
765 | next-tick: 1
766 | checksum: ef3f27a0702a88d885bcbb0317c3e3ecd094ce644da52e7f7d362394a125d9e3578292a8f8966071a980d8abbc3395725333b1856f3ae93835b46589f700d938
767 | languageName: node
768 | linkType: hard
769 |
770 | "tinycolor2@npm:^1.4.1":
771 | version: 1.4.2
772 | resolution: "tinycolor2@npm:1.4.2"
773 | checksum: 57ed262e08815a4ab0ed933edafdbc6555a17081781766149813b44a080ecbe58b3ee281e81c0e75b42e4d41679f138cfa98eabf043f829e0683c04adb12c031
774 | languageName: node
775 | linkType: hard
776 |
777 | "token-transformer@npm:0.0.27":
778 | version: 0.0.27
779 | resolution: "token-transformer@npm:0.0.27"
780 | dependencies:
781 | yargs: ^17.4.1
782 | bin:
783 | token-transformer: index.js
784 | checksum: 8bc157a42faba5ced132520440d91b7966e1ec60919d18a4a03e4064a9bb8727970fbfa51292f71097870f558d8b3780c2aad145df3da83d495ee4fe3e9cb4ae
785 | languageName: node
786 | linkType: hard
787 |
788 | "tslib@npm:^2.0.3":
789 | version: 2.3.1
790 | resolution: "tslib@npm:2.3.1"
791 | checksum: de17a98d4614481f7fcb5cd53ffc1aaf8654313be0291e1bfaee4b4bb31a20494b7d218ff2e15017883e8ea9626599b3b0e0229c18383ba9dce89da2adf15cb9
792 | languageName: node
793 | linkType: hard
794 |
795 | "type@npm:^1.0.1":
796 | version: 1.2.0
797 | resolution: "type@npm:1.2.0"
798 | checksum: dae8c64f82c648b985caf321e9dd6e8b7f4f2e2d4f846fc6fd2c8e9dc7769382d8a52369ddbaccd59aeeceb0df7f52fb339c465be5f2e543e81e810e413451ee
799 | languageName: node
800 | linkType: hard
801 |
802 | "type@npm:^2.5.0":
803 | version: 2.7.2
804 | resolution: "type@npm:2.7.2"
805 | checksum: 0f42379a8adb67fe529add238a3e3d16699d95b42d01adfe7b9a7c5da297f5c1ba93de39265ba30ffeb37dfd0afb3fb66ae09f58d6515da442219c086219f6f4
806 | languageName: node
807 | linkType: hard
808 |
809 | "universalify@npm:^2.0.0":
810 | version: 2.0.0
811 | resolution: "universalify@npm:2.0.0"
812 | checksum: 2406a4edf4a8830aa6813278bab1f953a8e40f2f63a37873ffa9a3bc8f9745d06cc8e88f3572cb899b7e509013f7f6fcc3e37e8a6d914167a5381d8440518c44
813 | languageName: node
814 | linkType: hard
815 |
816 | "upper-case-first@npm:^2.0.2":
817 | version: 2.0.2
818 | resolution: "upper-case-first@npm:2.0.2"
819 | dependencies:
820 | tslib: ^2.0.3
821 | checksum: 4487db4701effe3b54ced4b3e4aa4d9ab06c548f97244d04aafb642eedf96a76d5a03cf5f38f10f415531d5792d1ac6e1b50f2a76984dc6964ad530f12876409
822 | languageName: node
823 | linkType: hard
824 |
825 | "upper-case@npm:^2.0.2":
826 | version: 2.0.2
827 | resolution: "upper-case@npm:2.0.2"
828 | dependencies:
829 | tslib: ^2.0.3
830 | checksum: 508723a2b03ab90cf1d6b7e0397513980fab821cbe79c87341d0e96cedefadf0d85f9d71eac24ab23f526a041d585a575cfca120a9f920e44eb4f8a7cf89121c
831 | languageName: node
832 | linkType: hard
833 |
834 | "which@npm:^2.0.1":
835 | version: 2.0.2
836 | resolution: "which@npm:2.0.2"
837 | dependencies:
838 | isexe: ^2.0.0
839 | bin:
840 | node-which: ./bin/node-which
841 | checksum: 1a5c563d3c1b52d5f893c8b61afe11abc3bab4afac492e8da5bde69d550de701cf9806235f20a47b5c8fa8a1d6a9135841de2596535e998027a54589000e66d1
842 | languageName: node
843 | linkType: hard
844 |
845 | "wordwrap@npm:>=0.0.2":
846 | version: 1.0.0
847 | resolution: "wordwrap@npm:1.0.0"
848 | checksum: 2a44b2788165d0a3de71fd517d4880a8e20ea3a82c080ce46e294f0b68b69a2e49cff5f99c600e275c698a90d12c5ea32aff06c311f0db2eb3f1201f3e7b2a04
849 | languageName: node
850 | linkType: hard
851 |
852 | "wrap-ansi@npm:^7.0.0":
853 | version: 7.0.0
854 | resolution: "wrap-ansi@npm:7.0.0"
855 | dependencies:
856 | ansi-styles: ^4.0.0
857 | string-width: ^4.1.0
858 | strip-ansi: ^6.0.0
859 | checksum: a790b846fd4505de962ba728a21aaeda189b8ee1c7568ca5e817d85930e06ef8d1689d49dbf0e881e8ef84436af3a88bc49115c2e2788d841ff1b8b5b51a608b
860 | languageName: node
861 | linkType: hard
862 |
863 | "wrappy@npm:1":
864 | version: 1.0.2
865 | resolution: "wrappy@npm:1.0.2"
866 | checksum: 159da4805f7e84a3d003d8841557196034155008f817172d4e986bd591f74aa82aa7db55929a54222309e01079a65a92a9e6414da5a6aa4b01ee44a511ac3ee5
867 | languageName: node
868 | linkType: hard
869 |
870 | "y18n@npm:^5.0.5":
871 | version: 5.0.8
872 | resolution: "y18n@npm:5.0.8"
873 | checksum: 54f0fb95621ee60898a38c572c515659e51cc9d9f787fb109cef6fde4befbe1c4602dc999d30110feee37456ad0f1660fa2edcfde6a9a740f86a290999550d30
874 | languageName: node
875 | linkType: hard
876 |
877 | "yargs-parser@npm:^21.0.0":
878 | version: 21.0.1
879 | resolution: "yargs-parser@npm:21.0.1"
880 | checksum: c3ea2ed12cad0377ce3096b3f138df8267edf7b1aa7d710cd502fe16af417bafe4443dd71b28158c22fcd1be5dfd0e86319597e47badf42ff83815485887323a
881 | languageName: node
882 | linkType: hard
883 |
884 | "yargs@npm:^17.4.1":
885 | version: 17.5.1
886 | resolution: "yargs@npm:17.5.1"
887 | dependencies:
888 | cliui: ^7.0.2
889 | escalade: ^3.1.1
890 | get-caller-file: ^2.0.5
891 | require-directory: ^2.1.1
892 | string-width: ^4.2.3
893 | y18n: ^5.0.5
894 | yargs-parser: ^21.0.0
895 | checksum: 00d58a2c052937fa044834313f07910fd0a115dec5ee35919e857eeee3736b21a4eafa8264535800ba8bac312991ce785ecb8a51f4d2cc8c4676d865af1cfbde
896 | languageName: node
897 | linkType: hard
898 |
--------------------------------------------------------------------------------
/themes/Base/Component.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": {
3 | "icon": {
4 | "size": {
5 | "xs": {
6 | "value": "1.5rem",
7 | "type": "sizing"
8 | },
9 | "sm": {
10 | "value": "1.875rem",
11 | "type": "sizing"
12 | },
13 | "md": {
14 | "value": "2.25rem",
15 | "type": "sizing"
16 | },
17 | "lg": {
18 | "value": "3rem",
19 | "type": "sizing"
20 | },
21 | "xl": {
22 | "value": "3.75rem",
23 | "type": "sizing"
24 | }
25 | }
26 | },
27 | "panel": {
28 | "color": {
29 | "background": {
30 | "default": {
31 | "value": "{semantic.surface.info.subtle}",
32 | "type": "color"
33 | },
34 | "success": {
35 | "value": "{semantic.surface.success.subtle}",
36 | "type": "color"
37 | },
38 | "warning": {
39 | "value": "{semantic.surface.warning.subtle}",
40 | "type": "color"
41 | }
42 | },
43 | "arrow": {
44 | "default": {
45 | "value": "{component.panel.color.background.default}",
46 | "type": "color"
47 | },
48 | "success": {
49 | "value": "{component.panel.color.background.success}",
50 | "type": "color"
51 | },
52 | "warning": {
53 | "value": "{component.panel.color.background.warning}",
54 | "type": "color"
55 | }
56 | }
57 | },
58 | "font_size": {
59 | "header": {
60 | "breakpoint_sm": {
61 | "value": "{font_size.heading.h2.breakpoint_sm}",
62 | "type": "fontSizes"
63 | },
64 | "breakpoint_md": {
65 | "value": "{font_size.heading.h2.breakpoint_md}",
66 | "type": "fontSizes"
67 | },
68 | "breakpoint_lg": {
69 | "value": "{font_size.heading.h2.breakpoint_lg}",
70 | "type": "fontSizes"
71 | }
72 | },
73 | "body": {
74 | "breakpoint_sm": {
75 | "value": "{font_size.body.large.breakpoint_sm}",
76 | "type": "fontSizes"
77 | },
78 | "breakpoint_md": {
79 | "value": "{font_size.body.large.breakpoint_md}",
80 | "type": "fontSizes"
81 | }
82 | }
83 | },
84 | "space": {
85 | "padding": {
86 | "x": {
87 | "xs": {
88 | "value": "{space.x2}rem",
89 | "type": "spacing"
90 | },
91 | "md": {
92 | "value": "{space.x8}rem",
93 | "type": "spacing"
94 | }
95 | },
96 | "y": {
97 | "xs": {
98 | "value": "{space.x2}rem",
99 | "type": "spacing"
100 | },
101 | "md": {
102 | "value": "{space.x3}rem",
103 | "type": "spacing"
104 | }
105 | }
106 | },
107 | "gap": {
108 | "xs": {
109 | "value": "{space.base}rem",
110 | "type": "spacing"
111 | },
112 | "md": {
113 | "value": "{space.base}rem",
114 | "type": "spacing"
115 | }
116 | },
117 | "text_group": {
118 | "gap": {
119 | "xs": {
120 | "value": "{space.half}rem",
121 | "type": "spacing"
122 | }
123 | }
124 | },
125 | "arrow_left": {
126 | "md": {
127 | "value": "6.688rem",
128 | "type": "spacing"
129 | },
130 | "xs": {
131 | "value": "4rem",
132 | "type": "spacing"
133 | }
134 | }
135 | },
136 | "size": {
137 | "icon": {
138 | "xs": {
139 | "value": "{component.icon.size.md}",
140 | "type": "sizing"
141 | },
142 | "md": {
143 | "value": "{component.icon.size.xl}",
144 | "type": "sizing"
145 | }
146 | }
147 | },
148 | "typography": {
149 | "default": {
150 | "value": {
151 | "fontFamily": "Altinn-DIN",
152 | "fontWeight": "Regular",
153 | "lineHeight": "1.5",
154 | "fontSize": "1rem",
155 | "letterSpacing": "3%",
156 | "paragraphSpacing": "0",
157 | "textDecoration": "none",
158 | "textCase": "none"
159 | },
160 | "type": "typography"
161 | }
162 | },
163 | "font_weight": {
164 | "heading": {
165 | "value": "bold",
166 | "type": "fontWeights"
167 | }
168 | }
169 | },
170 | "legend": {
171 | "font_weight": {
172 | "default": {
173 | "value": "medium",
174 | "type": "fontWeights"
175 | }
176 | }
177 | },
178 | "label": {
179 | "font_weight": {
180 | "default": {
181 | "value": "medium",
182 | "type": "fontWeights"
183 | }
184 | }
185 | },
186 | "expandable_row": {
187 | "color": {
188 | "border_top": {
189 | "default": {
190 | "value": "{semantic.border.neutral.subtle}",
191 | "type": "color"
192 | }
193 | },
194 | "border_bottom": {
195 | "default": {
196 | "value": "{semantic.border.neutral.subtle}",
197 | "type": "color"
198 | }
199 | }
200 | },
201 | "space": {
202 | "padding": {
203 | "x": {
204 | "xs": {
205 | "value": "{space.base}rem",
206 | "type": "spacing"
207 | },
208 | "md": {
209 | "value": "{space.x2}rem",
210 | "type": "spacing"
211 | }
212 | },
213 | "top": {
214 | "xs": {
215 | "value": "0.25rem",
216 | "type": "spacing"
217 | }
218 | },
219 | "bottom": {
220 | "xs": {
221 | "value": "0.5rem",
222 | "type": "spacing"
223 | }
224 | }
225 | },
226 | "gap": {
227 | "title": {
228 | "xs": {
229 | "value": "{space.base}",
230 | "type": "spacing"
231 | },
232 | "md": {
233 | "value": "{space.x2}rem",
234 | "type": "spacing"
235 | }
236 | }
237 | }
238 | },
239 | "size": {
240 | "icon": {
241 | "xs": {
242 | "value": "{component.icon.size.xs}",
243 | "type": "sizing"
244 | }
245 | }
246 | },
247 | "font_weight": {
248 | "header": {
249 | "value": "medium",
250 | "type": "fontWeights"
251 | }
252 | },
253 | "font_size": {
254 | "header": {
255 | "breakpoint_sm": {
256 | "value": "{font_size.400.breakpoint_sm}",
257 | "type": "fontSizes"
258 | },
259 | "breakpoint_md": {
260 | "value": "{font_size.400.breakpoint_md}",
261 | "type": "fontSizes"
262 | }
263 | }
264 | },
265 | "border_width": {
266 | "default": {
267 | "value": "1px",
268 | "type": "borderWidth"
269 | }
270 | }
271 | },
272 | "checkbox": {
273 | "space": {
274 | "gap": {
275 | "xsmall": {
276 | "value": "0.5rem",
277 | "type": "spacing"
278 | },
279 | "small": {
280 | "value": "{space.base}rem",
281 | "type": "spacing"
282 | }
283 | }
284 | },
285 | "size": {
286 | "width": {
287 | "xsmall": {
288 | "value": "1.125rem",
289 | "type": "sizing"
290 | },
291 | "small": {
292 | "value": "{size.x2}rem",
293 | "type": "sizing"
294 | }
295 | },
296 | "height": {
297 | "xsmall": {
298 | "value": "1.125rem",
299 | "type": "sizing"
300 | },
301 | "small": {
302 | "value": "{size.x2}rem",
303 | "type": "sizing"
304 | }
305 | }
306 | },
307 | "color": {
308 | "border": {
309 | "default": {
310 | "value": "{semantic.border.neutral.strong}",
311 | "type": "color"
312 | },
313 | "hover": {
314 | "value": "{semantic.border.action.default}",
315 | "type": "color"
316 | },
317 | "checked": {
318 | "value": "{semantic.border.action.default}",
319 | "type": "color"
320 | },
321 | "error": {
322 | "value": "{semantic.border.danger.default}",
323 | "type": "color"
324 | }
325 | },
326 | "background": {
327 | "default": {
328 | "value": "{semantic.surface.neutral.default}",
329 | "type": "color"
330 | },
331 | "hover": {
332 | "value": "{semantic.surface.action.subtle}",
333 | "type": "color"
334 | },
335 | "checked": {
336 | "value": "{semantic.surface.action.default}",
337 | "type": "color"
338 | },
339 | "error": {
340 | "value": "{semantic.surface.neutral.default}",
341 | "type": "color"
342 | }
343 | },
344 | "text": {
345 | "default": {
346 | "value": "{semantic.text.neutral.default}",
347 | "type": "color"
348 | },
349 | "hover": {
350 | "value": "{semantic.text.action.default}",
351 | "type": "color"
352 | },
353 | "checked": {
354 | "value": "{semantic.text.neutral.default}",
355 | "type": "color"
356 | },
357 | "error": {
358 | "value": "{semantic.text.neutral.default}",
359 | "type": "color"
360 | }
361 | }
362 | },
363 | "border_width": {
364 | "xsmall": {
365 | "value": "{border_width.standard}",
366 | "type": "borderWidth"
367 | },
368 | "small": {
369 | "value": "{border_width.standard}",
370 | "type": "borderWidth"
371 | }
372 | },
373 | "font_size": {
374 | "xs": {
375 | "value": "{font_size.component-size.xs}",
376 | "type": "fontSizes"
377 | },
378 | "sm": {
379 | "value": "{font_size.component-size.sm}",
380 | "type": "fontSizes"
381 | }
382 | }
383 | },
384 | "fieldset": {
385 | "space": {
386 | "gap": {
387 | "y": {
388 | "xsmall": {
389 | "value": "{space.base}rem",
390 | "type": "spacing"
391 | },
392 | "small": {
393 | "value": "1.125rem",
394 | "type": "spacing"
395 | },
396 | "medium": {
397 | "value": "{space.base}*2rem",
398 | "type": "spacing"
399 | },
400 | "large": {
401 | "value": "{space.base}*2rem",
402 | "type": "spacing"
403 | }
404 | }
405 | }
406 | }
407 | },
408 | "field_description": {
409 | "color": {
410 | "text": {
411 | "default": {
412 | "value": "{semantic.text.neutral.default}",
413 | "type": "color"
414 | }
415 | }
416 | },
417 | "space": {
418 | "top": {
419 | "small": {
420 | "value": "0.5rem",
421 | "type": "spacing"
422 | },
423 | "xsmall": {
424 | "value": "0.375rem",
425 | "type": "spacing"
426 | }
427 | }
428 | }
429 | },
430 | "textarea": {
431 | "border_width": {
432 | "normal": {
433 | "value": "{border_width.standard}",
434 | "type": "borderWidth"
435 | }
436 | },
437 | "color": {
438 | "border": {
439 | "default": {
440 | "value": "{semantic.border.neutral.strong}",
441 | "type": "color"
442 | },
443 | "hover": {
444 | "value": "{semantic.border.action.default}",
445 | "type": "color"
446 | },
447 | "error": {
448 | "value": "{semantic.border.danger.default}",
449 | "type": "color"
450 | }
451 | },
452 | "background": {
453 | "default": {
454 | "value": "{semantic.surface.neutral.default}",
455 | "type": "color"
456 | },
457 | "hover": {
458 | "value": "{semantic.surface.neutral.default}",
459 | "type": "color"
460 | },
461 | "focus": {
462 | "value": "{semantic.surface.neutral.default}",
463 | "type": "color"
464 | }
465 | },
466 | "text": {
467 | "default": {
468 | "value": "{semantic.text.neutral.default}",
469 | "type": "color"
470 | }
471 | }
472 | },
473 | "space": {
474 | "padding": {
475 | "x": {
476 | "value": "{space.base}rem",
477 | "type": "spacing"
478 | },
479 | "y": {
480 | "value": "{space.half}rem",
481 | "type": "spacing"
482 | }
483 | }
484 | },
485 | "size": {
486 | "min_height": {
487 | "xsmall": {
488 | "value": "6.25rem",
489 | "type": "sizing"
490 | },
491 | "small": {
492 | "value": "9.375rem",
493 | "type": "sizing"
494 | },
495 | "medium": {
496 | "value": "12.5rem",
497 | "type": "sizing"
498 | },
499 | "large": {
500 | "value": "18.75rem",
501 | "type": "sizing"
502 | },
503 | "xlarge": {
504 | "value": "25rem",
505 | "type": "sizing"
506 | }
507 | }
508 | },
509 | "font_size": {
510 | "sm": {
511 | "value": "{font_size.component-size.sm}",
512 | "type": "fontSizes"
513 | }
514 | }
515 | },
516 | "checkbox-group": {
517 | "space": {
518 | "gap": {
519 | "x": {
520 | "xsmall": {
521 | "value": "{space.base}*2rem",
522 | "type": "spacing"
523 | },
524 | "small": {
525 | "value": "{space.base}*3rem",
526 | "type": "spacing"
527 | }
528 | },
529 | "y": {
530 | "xsmall": {
531 | "value": "0.563rem",
532 | "type": "spacing"
533 | },
534 | "small": {
535 | "value": "1.125rem",
536 | "type": "spacing"
537 | }
538 | }
539 | }
540 | }
541 | },
542 | "toggle_button": {
543 | "font_size": {
544 | "sm": {
545 | "value": "{font_size.component-size.sm}",
546 | "type": "fontSizes"
547 | }
548 | },
549 | "size": {
550 | "min_width": {
551 | "sm": {
552 | "value": "100%",
553 | "type": "sizing"
554 | },
555 | "md": {
556 | "value": "auto",
557 | "type": "sizing"
558 | }
559 | }
560 | },
561 | "border_width": {
562 | "inactive": {
563 | "value": "2px",
564 | "type": "borderWidth"
565 | }
566 | },
567 | "color": {
568 | "background": {
569 | "active": {
570 | "value": "{semantic.surface.action.default}",
571 | "type": "color"
572 | },
573 | "inactive": {
574 | "value": "{semantic.surface.neutral.default}",
575 | "type": "color"
576 | }
577 | },
578 | "text": {
579 | "active": {
580 | "value": "{semantic.text.action.on_action}",
581 | "type": "color"
582 | },
583 | "inactive": {
584 | "value": "{semantic.text.neutral.default}",
585 | "type": "color"
586 | }
587 | },
588 | "border": {
589 | "inactive": {
590 | "value": "{semantic.border.action.default}",
591 | "type": "color"
592 | }
593 | }
594 | },
595 | "space": {
596 | "padding": {
597 | "x": {
598 | "value": "{space.x2}rem",
599 | "type": "spacing"
600 | },
601 | "top": {
602 | "value": "0.125rem",
603 | "type": "spacing"
604 | },
605 | "bottom": {
606 | "value": "0.25rem",
607 | "type": "spacing"
608 | }
609 | }
610 | }
611 | },
612 | "icon_button": {
613 | "size": {
614 | "large": {
615 | "circle": {
616 | "value": "{size.x3}rem",
617 | "type": "sizing"
618 | },
619 | "icon": {
620 | "value": "1.4rem",
621 | "type": "sizing"
622 | }
623 | },
624 | "medium": {
625 | "circle": {
626 | "value": "{size.x2}rem",
627 | "type": "sizing"
628 | },
629 | "icon": {
630 | "value": "0.875rem",
631 | "type": "sizing"
632 | }
633 | },
634 | "small": {
635 | "circle": {
636 | "value": "1.125rem",
637 | "type": "sizing"
638 | },
639 | "icon": {
640 | "value": "0.688rem",
641 | "type": "sizing"
642 | }
643 | }
644 | },
645 | "border_width": {
646 | "default": {
647 | "value": "1px",
648 | "type": "borderWidth"
649 | }
650 | }
651 | },
652 | "button": {
653 | "filled": {
654 | "primary": {
655 | "color": {
656 | "background": {
657 | "default": {
658 | "value": "{semantic.surface.action.default}",
659 | "type": "color"
660 | },
661 | "hover": {
662 | "value": "{semantic.surface.action.hover}",
663 | "type": "color"
664 | },
665 | "pressed": {
666 | "value": "{semantic.surface.action.active}",
667 | "type": "color"
668 | }
669 | }
670 | }
671 | },
672 | "color": {
673 | "text": {
674 | "all": {
675 | "value": "{semantic.text.action.on_action}",
676 | "type": "color"
677 | }
678 | }
679 | },
680 | "success": {
681 | "color": {
682 | "background": {
683 | "default": {
684 | "value": "{semantic.surface.success.default}",
685 | "type": "color"
686 | },
687 | "hover": {
688 | "value": "{semantic.surface.success.hover}",
689 | "type": "color"
690 | },
691 | "pressed": {
692 | "value": "{semantic.surface.success.active}",
693 | "type": "color"
694 | }
695 | }
696 | }
697 | },
698 | "danger": {
699 | "color": {
700 | "background": {
701 | "default": {
702 | "value": "{semantic.surface.danger.default}",
703 | "type": "color"
704 | },
705 | "hover": {
706 | "value": "{semantic.surface.danger.hover}",
707 | "type": "color"
708 | },
709 | "pressed": {
710 | "value": "{semantic.surface.danger.active}",
711 | "type": "color"
712 | }
713 | }
714 | }
715 | }
716 | },
717 | "space": {
718 | "gap": {
719 | "small": {
720 | "value": "0.5rem",
721 | "type": "spacing"
722 | },
723 | "medium": {
724 | "value": "0.5rem",
725 | "type": "spacing"
726 | },
727 | "large": {
728 | "value": "0.5rem",
729 | "type": "spacing"
730 | }
731 | },
732 | "padding": {
733 | "x": {
734 | "small": {
735 | "value": "1.125rem",
736 | "type": "spacing"
737 | },
738 | "medium": {
739 | "value": "{space.x3}rem",
740 | "type": "spacing"
741 | },
742 | "large": {
743 | "value": "{space.x4}rem",
744 | "type": "spacing"
745 | }
746 | }
747 | }
748 | },
749 | "quiet": {
750 | "space": {
751 | "padding": {
752 | "x": {
753 | "small": {
754 | "value": "0.375rem",
755 | "type": "spacing"
756 | },
757 | "medium": {
758 | "value": "0.563rem",
759 | "type": "spacing"
760 | },
761 | "large": {
762 | "value": "0.563rem",
763 | "type": "spacing"
764 | }
765 | }
766 | }
767 | },
768 | "primary": {
769 | "color": {
770 | "text": {
771 | "default": {
772 | "value": "{semantic.text.action.default}",
773 | "type": "color"
774 | },
775 | "pressed": {
776 | "value": "{colors.white}",
777 | "type": "color"
778 | }
779 | },
780 | "background": {
781 | "hover": {
782 | "value": "{semantic.surface.action.subtle}",
783 | "type": "color"
784 | },
785 | "pressed": {
786 | "value": "{colors.blue.800}",
787 | "type": "color"
788 | }
789 | }
790 | }
791 | }
792 | },
793 | "outline": {
794 | "primary": {
795 | "color": {
796 | "text": {
797 | "default": {
798 | "value": "{semantic.text.action.default}",
799 | "type": "color"
800 | },
801 | "pressed": {
802 | "value": "{colors.white}",
803 | "type": "color"
804 | }
805 | },
806 | "border": {
807 | "default": {
808 | "value": "{semantic.border.action.default}",
809 | "type": "color"
810 | },
811 | "hover": {
812 | "value": "{semantic.border.action.hover}",
813 | "type": "color"
814 | }
815 | },
816 | "background": {
817 | "default": {
818 | "value": "{colors.white}",
819 | "type": "color"
820 | },
821 | "hover": {
822 | "value": "{semantic.surface.action.subtle}",
823 | "type": "color"
824 | },
825 | "pressed": {
826 | "value": "{colors.blue.800}",
827 | "type": "color"
828 | }
829 | }
830 | }
831 | }
832 | },
833 | "border_width": {
834 | "default": {
835 | "value": "1px",
836 | "type": "borderWidth"
837 | }
838 | },
839 | "size": {
840 | "height": {
841 | "small": {
842 | "value": "{size.x3}rem",
843 | "type": "sizing"
844 | },
845 | "medium": {
846 | "value": "{size.x4}rem",
847 | "type": "sizing"
848 | },
849 | "large": {
850 | "value": "{size.x5}rem",
851 | "type": "sizing"
852 | }
853 | },
854 | "icon": {
855 | "small": {
856 | "value": "{size.x2}rem",
857 | "type": "sizing"
858 | },
859 | "medium": {
860 | "value": "1.875rem",
861 | "type": "sizing"
862 | },
863 | "large": {
864 | "value": "2.5rem",
865 | "type": "sizing"
866 | }
867 | }
868 | }
869 | },
870 | "input": {
871 | "color": {
872 | "border": {
873 | "default": {
874 | "value": "{semantic.border.neutral.strong}",
875 | "type": "color"
876 | },
877 | "hover": {
878 | "value": "{semantic.border.action.default}",
879 | "type": "color"
880 | }
881 | },
882 | "background": {
883 | "default": {
884 | "value": "{colors.white}",
885 | "type": "color"
886 | },
887 | "hover": {
888 | "value": "{colors.white}",
889 | "type": "color"
890 | },
891 | "focus": {
892 | "value": "{colors.white}",
893 | "type": "color"
894 | }
895 | }
896 | },
897 | "error": {
898 | "color": {
899 | "border": {
900 | "default": {
901 | "value": "{semantic.border.danger.default}",
902 | "type": "color"
903 | }
904 | }
905 | }
906 | },
907 | "space": {
908 | "padding": {
909 | "x": {
910 | "value": "{space.base}rem",
911 | "type": "spacing"
912 | },
913 | "y": {
914 | "value": "{space.half}rem",
915 | "type": "spacing"
916 | }
917 | }
918 | },
919 | "border_width": {
920 | "default": {
921 | "value": "2px",
922 | "type": "borderWidth"
923 | },
924 | "focus": {
925 | "value": "4px",
926 | "type": "borderWidth"
927 | }
928 | },
929 | "read_only_info": {
930 | "color": {
931 | "border": {
932 | "default": {
933 | "value": "{colors.yellow.200}",
934 | "type": "color"
935 | }
936 | },
937 | "background": {
938 | "default": {
939 | "value": "{colors.yellow.200}",
940 | "type": "color"
941 | }
942 | }
943 | }
944 | },
945 | "read_only_confirm": {
946 | "color": {
947 | "background": {
948 | "default": {
949 | "value": "{colors.green.200}",
950 | "type": "color"
951 | }
952 | },
953 | "border": {
954 | "default": {
955 | "value": "{colors.green.200}",
956 | "type": "color"
957 | }
958 | }
959 | }
960 | },
961 | "size": {
962 | "min_height": {
963 | "default": {
964 | "value": "{size.x3}rem",
965 | "type": "sizing"
966 | }
967 | }
968 | },
969 | "font_size": {
970 | "sm": {
971 | "value": "{font_size.component-size.sm}",
972 | "type": "fontSizes"
973 | },
974 | "md": {
975 | "value": "{font_size.component-size.md}",
976 | "type": "fontSizes"
977 | }
978 | }
979 | },
980 | "error_message": {
981 | "space": {
982 | "padding": {
983 | "top": {
984 | "value": "{space.half}rem",
985 | "type": "spacing"
986 | }
987 | }
988 | },
989 | "color": {
990 | "text": {
991 | "value": "{semantic.text.danger.default}",
992 | "type": "color"
993 | }
994 | },
995 | "font_size": {
996 | "xs": {
997 | "value": "{font_size.component-size.xs}",
998 | "type": "fontSizes"
999 | }
1000 | }
1001 | }
1002 | },
1003 | "border_width": {
1004 | "thin": {
1005 | "value": "1px",
1006 | "type": "borderWidth"
1007 | },
1008 | "standard": {
1009 | "value": "2px",
1010 | "type": "borderWidth"
1011 | }
1012 | },
1013 | "space": {
1014 | "half": {
1015 | "value": "{space.base} / 2",
1016 | "type": "spacing"
1017 | },
1018 | "base": {
1019 | "value": "0.75",
1020 | "type": "spacing"
1021 | },
1022 | "x2": {
1023 | "value": "{space.base} * 2",
1024 | "type": "spacing"
1025 | },
1026 | "x3": {
1027 | "value": "{space.base} * 3",
1028 | "type": "spacing"
1029 | },
1030 | "x4": {
1031 | "value": "{space.base} * 4",
1032 | "type": "spacing"
1033 | },
1034 | "x5": {
1035 | "value": "{space.base} * 5",
1036 | "type": "spacing"
1037 | },
1038 | "x6": {
1039 | "value": "{space.base} * 6",
1040 | "type": "spacing"
1041 | },
1042 | "x7": {
1043 | "value": "{space.base} * 7",
1044 | "type": "spacing"
1045 | },
1046 | "x8": {
1047 | "value": "{space.base} * 8",
1048 | "type": "spacing"
1049 | },
1050 | "x16": {
1051 | "value": "{space.base} * 16",
1052 | "type": "spacing"
1053 | }
1054 | },
1055 | "interactive_components": {
1056 | "border_radius": {
1057 | "normal": {
1058 | "value": "3px",
1059 | "type": "borderRadius"
1060 | }
1061 | },
1062 | "border_width": {
1063 | "normal": {
1064 | "value": "2px",
1065 | "type": "borderWidth"
1066 | }
1067 | }
1068 | },
1069 | "paragraph_space": {
1070 | "default": {
1071 | "value": "{space.x3}rem",
1072 | "type": "paragraphSpacing"
1073 | }
1074 | },
1075 | "font_size": {
1076 | "100": {
1077 | "value": "0.75rem",
1078 | "type": "fontSizes"
1079 | },
1080 | "200": {
1081 | "value": "0.875rem",
1082 | "type": "fontSizes"
1083 | },
1084 | "300": {
1085 | "value": "1rem",
1086 | "type": "fontSizes"
1087 | },
1088 | "400": {
1089 | "breakpoint_sm": {
1090 | "value": "1rem",
1091 | "type": "fontSizes"
1092 | },
1093 | "breakpoint_md": {
1094 | "value": "1.125rem",
1095 | "type": "fontSizes"
1096 | }
1097 | },
1098 | "500": {
1099 | "breakpoint_sm": {
1100 | "value": "1rem",
1101 | "type": "fontSizes"
1102 | },
1103 | "breakpoint_md": {
1104 | "value": "1.125rem",
1105 | "type": "fontSizes"
1106 | },
1107 | "breakpoint_lg": {
1108 | "value": "1.25rem",
1109 | "type": "fontSizes"
1110 | }
1111 | },
1112 | "600": {
1113 | "breakpoint_sm": {
1114 | "value": "1.125rem",
1115 | "type": "fontSizes",
1116 | "description": "18px"
1117 | },
1118 | "breakpoint_md": {
1119 | "value": "1.25rem",
1120 | "type": "fontSizes",
1121 | "description": "20px"
1122 | },
1123 | "breakpoint_lg": {
1124 | "value": "1.5rem",
1125 | "type": "fontSizes",
1126 | "description": "24px"
1127 | }
1128 | },
1129 | "700": {
1130 | "breakpoint_sm": {
1131 | "value": "1.25rem",
1132 | "type": "fontSizes",
1133 | "description": "20px"
1134 | },
1135 | "breakpoint_md": {
1136 | "value": "1.5rem",
1137 | "type": "fontSizes",
1138 | "description": "24px"
1139 | },
1140 | "breakpoint_lg": {
1141 | "value": "1.75rem",
1142 | "type": "fontSizes",
1143 | "description": "28px"
1144 | }
1145 | },
1146 | "800": {
1147 | "breakpoint_sm": {
1148 | "value": "1.5rem",
1149 | "type": "fontSizes",
1150 | "description": "24px"
1151 | },
1152 | "breakpoint_md": {
1153 | "value": "1.75rem",
1154 | "type": "fontSizes",
1155 | "description": "28px"
1156 | },
1157 | "breakpoint_lg": {
1158 | "value": "2.25rem",
1159 | "type": "fontSizes",
1160 | "description": "36px"
1161 | }
1162 | },
1163 | "900": {
1164 | "breakpoint_sm": {
1165 | "value": "1.75rem",
1166 | "type": "fontSizes",
1167 | "description": "28px"
1168 | },
1169 | "breakpoint_md": {
1170 | "value": "2.25rem",
1171 | "type": "fontSizes",
1172 | "description": "36px"
1173 | },
1174 | "breakpoint_lg": {
1175 | "value": "2.75rem",
1176 | "type": "fontSizes",
1177 | "description": "44px"
1178 | }
1179 | },
1180 | "heading": {
1181 | "h1": {
1182 | "breakpoint_sm": {
1183 | "value": "{font_size.900.breakpoint_sm}",
1184 | "type": "fontSizes"
1185 | },
1186 | "breakpoint_md": {
1187 | "value": "{font_size.900.breakpoint_md}",
1188 | "type": "fontSizes"
1189 | },
1190 | "breakpoint_lg": {
1191 | "value": "{font_size.900.breakpoint_lg}",
1192 | "type": "fontSizes"
1193 | }
1194 | },
1195 | "h2": {
1196 | "breakpoint_sm": {
1197 | "value": "{font_size.800.breakpoint_sm}",
1198 | "type": "fontSizes"
1199 | },
1200 | "breakpoint_md": {
1201 | "value": "{font_size.800.breakpoint_md}",
1202 | "type": "fontSizes"
1203 | },
1204 | "breakpoint_lg": {
1205 | "value": "{font_size.800.breakpoint_lg}",
1206 | "type": "fontSizes"
1207 | }
1208 | },
1209 | "h3": {
1210 | "breakpoint_sm": {
1211 | "value": "{font_size.700.breakpoint_sm}",
1212 | "type": "fontSizes"
1213 | },
1214 | "breakpoint_md": {
1215 | "value": "{font_size.700.breakpoint_md}",
1216 | "type": "fontSizes"
1217 | },
1218 | "breakpoint_lg": {
1219 | "value": "{font_size.700.breakpoint_lg}",
1220 | "type": "fontSizes"
1221 | }
1222 | },
1223 | "h4": {
1224 | "breakpoint_sm": {
1225 | "value": "{font_size.600.breakpoint_sm}",
1226 | "type": "fontSizes"
1227 | },
1228 | "breakpoint_md": {
1229 | "value": "{font_size.600.breakpoint_md}",
1230 | "type": "fontSizes"
1231 | },
1232 | "breakpoint_lg": {
1233 | "value": "{font_size.600.breakpoint_lg}",
1234 | "type": "fontSizes"
1235 | }
1236 | },
1237 | "h5": {
1238 | "breakpoint_sm": {
1239 | "value": "{font_size.500.breakpoint_sm}",
1240 | "type": "fontSizes"
1241 | },
1242 | "breakpoint_md": {
1243 | "value": "{font_size.500.breakpoint_md}",
1244 | "type": "fontSizes"
1245 | },
1246 | "breakpoint_lg": {
1247 | "value": "{font_size.500.breakpoint_lg}",
1248 | "type": "fontSizes"
1249 | }
1250 | }
1251 | },
1252 | "component-size": {
1253 | "xs": {
1254 | "value": "{font_size.200}",
1255 | "type": "fontSizes",
1256 | "description": "14px"
1257 | },
1258 | "sm": {
1259 | "value": "{font_size.300}",
1260 | "type": "fontSizes",
1261 | "description": "16px"
1262 | },
1263 | "md": {
1264 | "value": "1.125rem",
1265 | "type": "fontSizes",
1266 | "description": "18px"
1267 | },
1268 | "lg": {
1269 | "value": "1.5rem",
1270 | "type": "fontSizes",
1271 | "description": "24px"
1272 | }
1273 | },
1274 | "body": {
1275 | "medium": {
1276 | "value": "{font_size.300}",
1277 | "type": "fontSizes",
1278 | "description": "Body text should never be smaller than 16px"
1279 | },
1280 | "large": {
1281 | "breakpoint_sm": {
1282 | "value": "{font_size.400.breakpoint_sm}",
1283 | "type": "fontSizes"
1284 | },
1285 | "breakpoint_md": {
1286 | "value": "{font_size.400.breakpoint_md}",
1287 | "type": "fontSizes"
1288 | }
1289 | }
1290 | },
1291 | "label": {
1292 | "small": {
1293 | "breakpoint_sm": {
1294 | "value": "{font_size.400.breakpoint_sm}",
1295 | "type": "fontSizes"
1296 | },
1297 | "breakpoint_md": {
1298 | "value": "{font_size.400.breakpoint_md}",
1299 | "type": "fontSizes"
1300 | }
1301 | }
1302 | },
1303 | "detail": {
1304 | "default": {
1305 | "value": "{font_size.200}",
1306 | "type": "fontSizes"
1307 | }
1308 | },
1309 | "ingress": {
1310 | "small": {
1311 | "breakpoint_sm": {
1312 | "value": "1.125rem",
1313 | "type": "fontSizes",
1314 | "description": "18px (Ingress should never be smaller than 18px, to keep a visual difference from the body text that is 16px.)"
1315 | },
1316 | "breakpoint_md": {
1317 | "value": "1.25rem",
1318 | "type": "fontSizes",
1319 | "description": "20px"
1320 | }
1321 | },
1322 | "medium": {
1323 | "breakpoint_sm": {
1324 | "value": "1.25rem",
1325 | "type": "fontSizes",
1326 | "description": "20px"
1327 | },
1328 | "breakpoint_md": {
1329 | "value": "1.5rem",
1330 | "type": "fontSizes",
1331 | "description": "24px"
1332 | }
1333 | }
1334 | }
1335 | },
1336 | "font_family": {
1337 | "default": {
1338 | "value": "Altinn-DIN",
1339 | "type": "fontFamilies"
1340 | },
1341 | "heading": {
1342 | "value": "{font_family.default}",
1343 | "type": "fontFamilies"
1344 | },
1345 | "ingress": {
1346 | "value": "{font_family.default}",
1347 | "type": "fontFamilies"
1348 | },
1349 | "body": {
1350 | "value": "{font_family.default}",
1351 | "type": "fontFamilies"
1352 | },
1353 | "label": {
1354 | "value": "{font_family.default}",
1355 | "type": "fontFamilies"
1356 | }
1357 | },
1358 | "breakpoints": {
1359 | "xs": {
1360 | "value": "0px",
1361 | "type": "sizing",
1362 | "description": "Specific styling for the smallest mobile sizes and up. Will affect screen sizes with the set size and larger."
1363 | },
1364 | "sm": {
1365 | "value": "540px",
1366 | "type": "sizing",
1367 | "description": "Specific styling for the largest mobile sizes and up. Will affect screen sizes with the set size and larger."
1368 | },
1369 | "md": {
1370 | "value": "768px",
1371 | "type": "sizing",
1372 | "description": "Specific styling for tablet and up. Will affect screen sizes with the set size and larger."
1373 | },
1374 | "lg": {
1375 | "value": "960px",
1376 | "type": "sizing",
1377 | "description": "Specific styling for the largest tablets and up. Will affect screen sizes with the set size and larger.Will affect screen sizes with this size and larger"
1378 | },
1379 | "xl": {
1380 | "value": "1200px",
1381 | "type": "sizing",
1382 | "description": "Specific styling for laptops and up. Will affect screen sizes with the set size and larger."
1383 | },
1384 | "xxl": {
1385 | "value": "1600px",
1386 | "type": "sizing",
1387 | "description": "Specific styling for desktops and up. Will affect screen sizes with the set size and larger."
1388 | }
1389 | },
1390 | "typography": {
1391 | "default": {
1392 | "value": {
1393 | "fontFamily": "Altinn-DIN",
1394 | "fontWeight": "Regular",
1395 | "lineHeight": "1.5",
1396 | "fontSize": "1rem",
1397 | "letterSpacing": "0.3px",
1398 | "paragraphSpacing": "0",
1399 | "textDecoration": "none",
1400 | "textCase": "none"
1401 | },
1402 | "type": "typography"
1403 | }
1404 | },
1405 | "size": {
1406 | "base": {
1407 | "value": "0.75",
1408 | "type": "sizing"
1409 | },
1410 | "x2": {
1411 | "value": "{space.base} * 2",
1412 | "type": "sizing"
1413 | },
1414 | "x3": {
1415 | "value": "{space.base} * 3",
1416 | "type": "sizing"
1417 | },
1418 | "x4": {
1419 | "value": "{space.base} * 4",
1420 | "type": "sizing"
1421 | },
1422 | "x5": {
1423 | "value": "{space.base} * 5",
1424 | "type": "sizing"
1425 | },
1426 | "x6": {
1427 | "value": "{space.base} * 6",
1428 | "type": "sizing"
1429 | },
1430 | "x7": {
1431 | "value": "{space.base} * 7",
1432 | "type": "sizing"
1433 | },
1434 | "x8": {
1435 | "value": "{space.base} * 8",
1436 | "type": "sizing"
1437 | },
1438 | "x10": {
1439 | "value": "{space.base} * 10",
1440 | "type": "sizing"
1441 | },
1442 | "x16": {
1443 | "value": "{space.base} * 16",
1444 | "type": "sizing"
1445 | }
1446 | },
1447 | "opacity": {
1448 | "disabled": {
1449 | "value": "30%",
1450 | "type": "opacity"
1451 | }
1452 | },
1453 | "semantic": {
1454 | "tab_focus": {
1455 | "outline": {
1456 | "offset": {
1457 | "value": "2px",
1458 | "type": "spacing"
1459 | },
1460 | "width": {
1461 | "value": "2px",
1462 | "type": "borderWidth"
1463 | }
1464 | }
1465 | }
1466 | },
1467 | "New Box shadow - lg": {
1468 | "value": {
1469 | "color": "#0000001a",
1470 | "type": "dropShadow",
1471 | "x": "0",
1472 | "y": "4",
1473 | "blur": "4",
1474 | "spread": "0"
1475 | },
1476 | "type": "boxShadow"
1477 | },
1478 | "New Box shadow - md": {
1479 | "value": {
1480 | "color": "#0000000f",
1481 | "type": "dropShadow",
1482 | "x": "0",
1483 | "y": "4",
1484 | "blur": "4",
1485 | "spread": "0"
1486 | },
1487 | "type": "boxShadow"
1488 | },
1489 | "fontFamilies": {
1490 | "inter": {
1491 | "value": "Inter",
1492 | "type": "fontFamilies"
1493 | }
1494 | },
1495 | "lineHeights": {
1496 | "0": {
1497 | "value": "130%",
1498 | "type": "lineHeights"
1499 | },
1500 | "1": {
1501 | "value": "170%",
1502 | "type": "lineHeights"
1503 | },
1504 | "2": {
1505 | "value": "160%",
1506 | "type": "lineHeights"
1507 | },
1508 | "3": {
1509 | "value": "150%",
1510 | "type": "lineHeights"
1511 | },
1512 | "4": {
1513 | "value": "130",
1514 | "type": "lineHeights"
1515 | }
1516 | },
1517 | "fontWeights": {
1518 | "inter-0": {
1519 | "value": "Medium",
1520 | "type": "fontWeights"
1521 | },
1522 | "inter-1": {
1523 | "value": "Regular",
1524 | "type": "fontWeights"
1525 | }
1526 | },
1527 | "fontSize": {
1528 | "0": {
1529 | "value": "14",
1530 | "type": "fontSizes"
1531 | },
1532 | "1": {
1533 | "value": "16",
1534 | "type": "fontSizes"
1535 | },
1536 | "2": {
1537 | "value": "18",
1538 | "type": "fontSizes"
1539 | },
1540 | "3": {
1541 | "value": "20",
1542 | "type": "fontSizes"
1543 | },
1544 | "4": {
1545 | "value": "24",
1546 | "type": "fontSizes"
1547 | },
1548 | "5": {
1549 | "value": "28",
1550 | "type": "fontSizes"
1551 | },
1552 | "6": {
1553 | "value": "36",
1554 | "type": "fontSizes"
1555 | },
1556 | "7": {
1557 | "value": "44",
1558 | "type": "fontSizes"
1559 | }
1560 | },
1561 | "letterSpacing": {
1562 | "0": {
1563 | "value": "0",
1564 | "type": "letterSpacing"
1565 | },
1566 | "1": {
1567 | "value": "0%",
1568 | "type": "letterSpacing"
1569 | }
1570 | },
1571 | "paragraphSpacing": {
1572 | "0": {
1573 | "value": "0",
1574 | "type": "paragraphSpacing"
1575 | }
1576 | },
1577 | "heading": {
1578 | "(900) 44px": {
1579 | "value": {
1580 | "fontFamily": "{fontFamilies.inter}",
1581 | "fontWeight": "{fontWeights.inter-0}",
1582 | "lineHeight": "{lineHeights.0}",
1583 | "fontSize": "{fontSize.7}",
1584 | "letterSpacing": "{letterSpacing.0}",
1585 | "paragraphSpacing": "{paragraphSpacing.0}",
1586 | "paragraphIndent": "{paragraphIndent.0}",
1587 | "textCase": "{textCase.none}",
1588 | "textDecoration": "{textDecoration.none}"
1589 | },
1590 | "type": "typography"
1591 | },
1592 | "(800) 36px": {
1593 | "value": {
1594 | "fontFamily": "{fontFamilies.inter}",
1595 | "fontWeight": "{fontWeights.inter-0}",
1596 | "lineHeight": "{lineHeights.0}",
1597 | "fontSize": "{fontSize.6}",
1598 | "letterSpacing": "{letterSpacing.0}",
1599 | "paragraphSpacing": "{paragraphSpacing.0}",
1600 | "paragraphIndent": "{paragraphIndent.0}",
1601 | "textCase": "{textCase.none}",
1602 | "textDecoration": "{textDecoration.none}"
1603 | },
1604 | "type": "typography"
1605 | },
1606 | "(700) 28px": {
1607 | "value": {
1608 | "fontFamily": "{fontFamilies.inter}",
1609 | "fontWeight": "{fontWeights.inter-0}",
1610 | "lineHeight": "{lineHeights.0}",
1611 | "fontSize": "{fontSize.5}",
1612 | "letterSpacing": "{letterSpacing.0}",
1613 | "paragraphSpacing": "{paragraphSpacing.0}",
1614 | "paragraphIndent": "{paragraphIndent.0}",
1615 | "textCase": "{textCase.none}",
1616 | "textDecoration": "{textDecoration.none}"
1617 | },
1618 | "type": "typography"
1619 | },
1620 | "(600) 24px": {
1621 | "value": {
1622 | "fontFamily": "{fontFamilies.inter}",
1623 | "fontWeight": "{fontWeights.inter-0}",
1624 | "lineHeight": "{lineHeights.0}",
1625 | "fontSize": "{fontSize.4}",
1626 | "letterSpacing": "{letterSpacing.0}",
1627 | "paragraphSpacing": "{paragraphSpacing.0}",
1628 | "paragraphIndent": "{paragraphIndent.0}",
1629 | "textCase": "{textCase.none}",
1630 | "textDecoration": "{textDecoration.none}"
1631 | },
1632 | "type": "typography"
1633 | },
1634 | "(500) 20px": {
1635 | "value": {
1636 | "fontFamily": "{fontFamilies.inter}",
1637 | "fontWeight": "{fontWeights.inter-0}",
1638 | "lineHeight": "{lineHeights.0}",
1639 | "fontSize": "{fontSize.3}",
1640 | "letterSpacing": "{letterSpacing.0}",
1641 | "paragraphSpacing": "{paragraphSpacing.0}",
1642 | "paragraphIndent": "{paragraphIndent.0}",
1643 | "textCase": "{textCase.none}",
1644 | "textDecoration": "{textDecoration.none}"
1645 | },
1646 | "type": "typography"
1647 | }
1648 | },
1649 | "ingress": {
1650 | "(600) 24px": {
1651 | "value": {
1652 | "fontFamily": "{fontFamilies.inter}",
1653 | "fontWeight": "{fontWeights.inter-1}",
1654 | "lineHeight": "{lineHeights.1}",
1655 | "fontSize": "{fontSize.4}",
1656 | "letterSpacing": "{letterSpacing.0}",
1657 | "paragraphSpacing": "{paragraphSpacing.0}",
1658 | "paragraphIndent": "{paragraphIndent.0}",
1659 | "textCase": "{textCase.none}",
1660 | "textDecoration": "{textDecoration.none}"
1661 | },
1662 | "type": "typography"
1663 | },
1664 | "(500) 20px": {
1665 | "value": {
1666 | "fontFamily": "{fontFamilies.inter}",
1667 | "fontWeight": "{fontWeights.inter-1}",
1668 | "lineHeight": "{lineHeights.2}",
1669 | "fontSize": "{fontSize.3}",
1670 | "letterSpacing": "{letterSpacing.0}",
1671 | "paragraphSpacing": "{paragraphSpacing.0}",
1672 | "paragraphIndent": "{paragraphIndent.0}",
1673 | "textCase": "{textCase.none}",
1674 | "textDecoration": "{textDecoration.none}"
1675 | },
1676 | "type": "typography"
1677 | }
1678 | },
1679 | "body": {
1680 | "(400) 18px": {
1681 | "value": {
1682 | "fontFamily": "{fontFamilies.inter}",
1683 | "fontWeight": "{fontWeights.inter-1}",
1684 | "lineHeight": "{lineHeights.3}",
1685 | "fontSize": "{fontSize.2}",
1686 | "letterSpacing": "{letterSpacing.0}",
1687 | "paragraphSpacing": "{paragraphSpacing.0}",
1688 | "paragraphIndent": "{paragraphIndent.0}",
1689 | "textCase": "{textCase.none}",
1690 | "textDecoration": "{textDecoration.none}"
1691 | },
1692 | "type": "typography"
1693 | },
1694 | "(300) 16px": {
1695 | "value": {
1696 | "fontFamily": "{fontFamilies.inter}",
1697 | "fontWeight": "{fontWeights.inter-1}",
1698 | "lineHeight": "{lineHeights.3}",
1699 | "fontSize": "{fontSize.1}",
1700 | "letterSpacing": "{letterSpacing.0}",
1701 | "paragraphSpacing": "{paragraphSpacing.0}",
1702 | "paragraphIndent": "{paragraphIndent.0}",
1703 | "textCase": "{textCase.none}",
1704 | "textDecoration": "{textDecoration.none}"
1705 | },
1706 | "type": "typography"
1707 | }
1708 | },
1709 | "detail": {
1710 | "(200) 14px": {
1711 | "value": {
1712 | "fontFamily": "{fontFamilies.inter}",
1713 | "fontWeight": "{fontWeights.inter-0}",
1714 | "lineHeight": "{lineHeights.0}",
1715 | "fontSize": "{fontSize.0}",
1716 | "letterSpacing": "{letterSpacing.0}",
1717 | "paragraphSpacing": "{paragraphSpacing.0}",
1718 | "paragraphIndent": "{paragraphIndent.0}",
1719 | "textCase": "{textCase.none}",
1720 | "textDecoration": "{textDecoration.none}"
1721 | },
1722 | "type": "typography"
1723 | }
1724 | },
1725 | "label": {
1726 | "(400) 18px": {
1727 | "value": {
1728 | "fontFamily": "{fontFamilies.inter}",
1729 | "fontWeight": "{fontWeights.inter-0}",
1730 | "lineHeight": "{lineHeights.0}",
1731 | "fontSize": "{fontSize.2}",
1732 | "letterSpacing": "{letterSpacing.0}",
1733 | "paragraphSpacing": "{paragraphSpacing.0}",
1734 | "paragraphIndent": "{paragraphIndent.0}",
1735 | "textCase": "{textCase.none}",
1736 | "textDecoration": "{textDecoration.none}"
1737 | },
1738 | "type": "typography"
1739 | },
1740 | "(300) 16px": {
1741 | "value": {
1742 | "fontFamily": "{fontFamilies.inter}",
1743 | "fontWeight": "{fontWeights.inter-0}",
1744 | "lineHeight": "{lineHeights.0}",
1745 | "fontSize": "{fontSize.1}",
1746 | "letterSpacing": "{letterSpacing.0}",
1747 | "paragraphSpacing": "{paragraphSpacing.0}",
1748 | "paragraphIndent": "{paragraphIndent.0}",
1749 | "textCase": "{textCase.none}",
1750 | "textDecoration": "{textDecoration.none}"
1751 | },
1752 | "type": "typography"
1753 | }
1754 | },
1755 | "error_message": {
1756 | "(400) 18px": {
1757 | "value": {
1758 | "fontFamily": "{fontFamilies.inter}",
1759 | "fontWeight": "{fontWeights.inter-1}",
1760 | "lineHeight": "{lineHeights.4}",
1761 | "fontSize": "{fontSize.2}",
1762 | "letterSpacing": "{letterSpacing.1}",
1763 | "paragraphSpacing": "{paragraphSpacing.0}",
1764 | "paragraphIndent": "{paragraphIndent.0}",
1765 | "textCase": "{textCase.none}",
1766 | "textDecoration": "{textDecoration.none}"
1767 | },
1768 | "type": "typography"
1769 | },
1770 | "(300) 16px": {
1771 | "value": {
1772 | "fontFamily": "{fontFamilies.inter}",
1773 | "fontWeight": "{fontWeights.inter-1}",
1774 | "lineHeight": "{lineHeights.4}",
1775 | "fontSize": "{fontSize.1}",
1776 | "letterSpacing": "{letterSpacing.1}",
1777 | "paragraphSpacing": "{paragraphSpacing.0}",
1778 | "paragraphIndent": "{paragraphIndent.0}",
1779 | "textCase": "{textCase.none}",
1780 | "textDecoration": "{textDecoration.none}"
1781 | },
1782 | "type": "typography"
1783 | }
1784 | },
1785 | "textCase": {
1786 | "none": {
1787 | "value": "none",
1788 | "type": "textCase"
1789 | }
1790 | },
1791 | "textDecoration": {
1792 | "none": {
1793 | "value": "none",
1794 | "type": "textDecoration"
1795 | }
1796 | },
1797 | "paragraphIndent": {
1798 | "0": {
1799 | "value": "0px",
1800 | "type": "dimension"
1801 | }
1802 | }
1803 | }
--------------------------------------------------------------------------------
/tokens.json:
--------------------------------------------------------------------------------
1 | {
2 | "Base/Core": {
3 | "colors": {
4 | "white": {
5 | "value": "#ffffff",
6 | "type": "color",
7 | "description": "Standard bckd color.\nAAA 13.1 on grey 800\nAAA 7.2 as bkdg for interaction blue"
8 | },
9 | "black": {
10 | "value": "#000000",
11 | "type": "color"
12 | },
13 | "grey": {
14 | "100": {
15 | "value": "#f4f5f6",
16 | "type": "color",
17 | "description": "AAA 13.1 on grey 800\nAA 6.5 as bkdg for interaction blue"
18 | },
19 | "200": {
20 | "value": "#e9eaec",
21 | "type": "color",
22 | "description": "AAA 11.9 on grey 800\nAA 5.9 as bkdg for interaction blue"
23 | },
24 | "300": {
25 | "value": "#d2d5d8",
26 | "type": "color",
27 | "description": "AAA 11.9 on grey 800\nAA 5.9 as bkdg for interaction blue"
28 | },
29 | "400": {
30 | "value": "#bcbfc5",
31 | "type": "color",
32 | "description": "AAA 8.7 on grey 800\nAA18 4.4 as bkdg for interaction blue"
33 | },
34 | "500": {
35 | "value": "#a5aab1",
36 | "type": "color",
37 | "description": "AA 6.1 on grey 800\nAA18 3 as bkdg for interaction blue"
38 | },
39 | "600": {
40 | "value": "#68707c",
41 | "type": "color",
42 | "description": "AA18 3.5 on grey 800\nAA18 4 on white"
43 | },
44 | "700": {
45 | "value": "#4b5563",
46 | "type": "color",
47 | "description": "AAA 7.5 on white"
48 | },
49 | "800": {
50 | "value": "#1e2b3c",
51 | "type": "color",
52 | "description": "Main Text Color\nAAA 14.3 on white"
53 | },
54 | "900": {
55 | "value": "#141e29",
56 | "type": "color",
57 | "description": "AAA 16.8 on white"
58 | }
59 | },
60 | "red": {
61 | "100": {
62 | "value": "#f9d5db",
63 | "type": "color"
64 | },
65 | "200": {
66 | "value": "#f3abb6",
67 | "type": "color"
68 | },
69 | "300": {
70 | "value": "#ec8292",
71 | "type": "color"
72 | },
73 | "400": {
74 | "value": "#e6586d",
75 | "type": "color"
76 | },
77 | "500": {
78 | "value": "#e02e49",
79 | "type": "color"
80 | },
81 | "600": {
82 | "value": "#b3253a",
83 | "type": "color"
84 | },
85 | "700": {
86 | "value": "#861c2c",
87 | "type": "color"
88 | },
89 | "800": {
90 | "value": "#5a121d",
91 | "type": "color"
92 | },
93 | "900": {
94 | "value": "#480e17",
95 | "type": "color"
96 | }
97 | },
98 | "orange": {
99 | "100": {
100 | "value": "#ffe8cd",
101 | "type": "color"
102 | },
103 | "200": {
104 | "value": "#ffd19b",
105 | "type": "color"
106 | },
107 | "300": {
108 | "value": "#ffba6a",
109 | "type": "color"
110 | },
111 | "400": {
112 | "value": "#ffa338",
113 | "type": "color"
114 | },
115 | "500": {
116 | "value": "#ff8c06",
117 | "type": "color"
118 | },
119 | "600": {
120 | "value": "#cc7005",
121 | "type": "color"
122 | },
123 | "700": {
124 | "value": "#995404",
125 | "type": "color"
126 | },
127 | "800": {
128 | "value": "#663802",
129 | "type": "color"
130 | },
131 | "900": {
132 | "value": "#522d02",
133 | "type": "color"
134 | }
135 | },
136 | "yellow": {
137 | "100": {
138 | "value": "#fffbe6",
139 | "type": "color"
140 | },
141 | "200": {
142 | "value": "#fff4b4",
143 | "type": "color"
144 | },
145 | "300": {
146 | "value": "#ffed83",
147 | "type": "color"
148 | },
149 | "400": {
150 | "value": "#ffe551",
151 | "type": "color"
152 | },
153 | "500": {
154 | "value": "#ffda06",
155 | "type": "color"
156 | },
157 | "600": {
158 | "value": "#e6c405",
159 | "type": "color"
160 | },
161 | "700": {
162 | "value": "#ccae05",
163 | "type": "color"
164 | },
165 | "800": {
166 | "value": "#998304",
167 | "type": "color"
168 | },
169 | "900": {
170 | "value": "#665702",
171 | "type": "color"
172 | }
173 | },
174 | "green": {
175 | "100": {
176 | "value": "#e8faf0",
177 | "type": "color"
178 | },
179 | "200": {
180 | "value": "#d1f4e1",
181 | "type": "color"
182 | },
183 | "300": {
184 | "value": "#8be4b5",
185 | "type": "color"
186 | },
187 | "400": {
188 | "value": "#5dd997",
189 | "type": "color"
190 | },
191 | "500": {
192 | "value": "#2ece7a",
193 | "type": "color"
194 | },
195 | "600": {
196 | "value": "#15b560",
197 | "type": "color"
198 | },
199 | "700": {
200 | "value": "#118849",
201 | "type": "color"
202 | },
203 | "800": {
204 | "value": "#0c6536",
205 | "type": "color"
206 | },
207 | "900": {
208 | "value": "#084826",
209 | "type": "color"
210 | }
211 | },
212 | "blue": {
213 | "100": {
214 | "value": "#e6eff8",
215 | "type": "color"
216 | },
217 | "200": {
218 | "value": "#b3d0ea",
219 | "type": "color"
220 | },
221 | "300": {
222 | "value": "#80b1dd",
223 | "type": "color"
224 | },
225 | "400": {
226 | "value": "#66a1d6",
227 | "type": "color"
228 | },
229 | "500": {
230 | "value": "#3381c8",
231 | "type": "color"
232 | },
233 | "600": {
234 | "value": "#1a72c1",
235 | "type": "color"
236 | },
237 | "700": {
238 | "value": "#0062ba",
239 | "type": "color"
240 | },
241 | "800": {
242 | "value": "#004e95",
243 | "type": "color"
244 | },
245 | "900": {
246 | "value": "#00315d",
247 | "type": "color"
248 | }
249 | },
250 | "purple": {
251 | "100": {
252 | "value": "#f5e8f2",
253 | "type": "color"
254 | },
255 | "200": {
256 | "value": "#e0b9d8",
257 | "type": "color"
258 | },
259 | "300": {
260 | "value": "#cc8bbf",
261 | "type": "color"
262 | },
263 | "400": {
264 | "value": "#b75da5",
265 | "type": "color"
266 | },
267 | "500": {
268 | "value": "#a22e8b",
269 | "type": "color"
270 | },
271 | "600": {
272 | "value": "#98177e",
273 | "type": "color"
274 | },
275 | "700": {
276 | "value": "#7a1265",
277 | "type": "color"
278 | },
279 | "800": {
280 | "value": "#5b0e4c",
281 | "type": "color"
282 | },
283 | "900": {
284 | "value": "#490b3d",
285 | "type": "color"
286 | }
287 | }
288 | }
289 | },
290 | "Base/Semantic": {
291 | "brand": {
292 | "default": {
293 | "first": {
294 | "100": {
295 | "value": "#feefef",
296 | "type": "color",
297 | "description": "AAA 12.8 on grey 800\nAA 6.4 as bkdg for interaction blue"
298 | },
299 | "200": {
300 | "value": "#fddfe0",
301 | "type": "color",
302 | "description": "Light error color\nAAA 11.4 on grey 800\nAA 5.7 as bkdg for interaction blue"
303 | },
304 | "300": {
305 | "value": "#fbbfc1",
306 | "type": "color",
307 | "description": "AAA 9 on grey 800\nAA 4.5 as bkdg for interaction blue"
308 | },
309 | "400": {
310 | "value": "#f89fa1",
311 | "type": "color",
312 | "description": "AAA 7.1 on grey 800\nAA18 3.5 as bkdg for interaction blue"
313 | },
314 | "500": {
315 | "value": "#f67f82",
316 | "type": "color",
317 | "description": "AA 5.6 on grey 800"
318 | },
319 | "600": {
320 | "value": "#f45f63",
321 | "type": "color",
322 | "description": "AA 4.5 on grey 800"
323 | },
324 | "700": {
325 | "value": "#dc5659",
326 | "type": "color",
327 | "description": "AA18 3.7 on grey 800"
328 | },
329 | "800": {
330 | "value": "#c34c4f",
331 | "type": "color",
332 | "description": "AA 4.7 on white"
333 | }
334 | },
335 | "second": {
336 | "100": {
337 | "value": "#fcf7e9",
338 | "type": "color",
339 | "description": "AAA 13.3 on grey 800\nAA 6.7 as bkdg for interaction blue"
340 | },
341 | "200": {
342 | "value": "#faeec2",
343 | "type": "color",
344 | "description": "Light warning color\nAAA 12.3 on grey 800\nAA 1.1 as bkdg for interaction blue"
345 | },
346 | "300": {
347 | "value": "#f5dda6",
348 | "type": "color",
349 | "description": "AAA 10 on grey 800\nAA 5.4 as bkdg for interaction blue"
350 | },
351 | "400": {
352 | "value": "#efcc79",
353 | "type": "color",
354 | "description": "AAA 9.2 on grey 800\nAA 4.6 as bkdg for interaction blue"
355 | },
356 | "500": {
357 | "value": "#eabb4d",
358 | "type": "color",
359 | "description": "AAA 7.9 on grey 800\nAA18 4 as bkdg for interaction blue"
360 | },
361 | "600": {
362 | "value": "#e5aa20",
363 | "type": "color",
364 | "description": "AA 6.8 on grey 800\nAA18 3.4 as bkdg for interaction blue"
365 | },
366 | "700": {
367 | "value": "#ce991d",
368 | "type": "color",
369 | "description": "AA 5.5 on grey 800"
370 | },
371 | "800": {
372 | "value": "#b7881a",
373 | "type": "color",
374 | "description": "AA18 4.4 on grey 800\nAA18 3.2 on white"
375 | }
376 | },
377 | "third": {
378 | "100": {
379 | "value": "#e9f5ff",
380 | "type": "color",
381 | "description": "AAA 12.9 on grey 800\nAA 6.5 as bkdg for interaction blue"
382 | },
383 | "200": {
384 | "value": "#d2eafd",
385 | "type": "color",
386 | "description": "Light information color \nAAA 11.5 on grey 800\nAA 5.8 as bkdg for interaction blue"
387 | },
388 | "300": {
389 | "value": "#a5d6fb",
390 | "type": "color",
391 | "description": "AAA 9.2 on grey 800\nAA 4.6 as bkdg for interaction blue"
392 | },
393 | "400": {
394 | "value": "#78c1f9",
395 | "type": "color",
396 | "description": "AAA 7.3 on grey 800\nAA18 3.7 as bkdg for interaction blue"
397 | },
398 | "500": {
399 | "value": "#4badf7",
400 | "type": "color",
401 | "description": "AA 5.8 on grey 800"
402 | },
403 | "600": {
404 | "value": "#1e98f5",
405 | "type": "color",
406 | "description": "AA 4.6 on grey 800"
407 | },
408 | "700": {
409 | "value": "#1b88dd",
410 | "type": "color",
411 | "description": "AA18 3.8 on grey 800"
412 | },
413 | "800": {
414 | "value": "#156aac",
415 | "type": "color",
416 | "description": "AA 5.6 on white"
417 | }
418 | }
419 | }
420 | },
421 | "semantic": {
422 | "background": {
423 | "default": {
424 | "value": "#ffffff",
425 | "type": "color"
426 | },
427 | "subtle": {
428 | "value": "#f4f5f6",
429 | "type": "color"
430 | }
431 | },
432 | "surface": {
433 | "neutral": {
434 | "default": {
435 | "value": "#ffffff",
436 | "type": "color"
437 | },
438 | "subtle": {
439 | "value": "#f4f5f6",
440 | "type": "color"
441 | },
442 | "subtle-hover": {
443 | "value": "#e9eaec",
444 | "type": "color"
445 | },
446 | "selected": {
447 | "value": "#e6eff8",
448 | "type": "color"
449 | },
450 | "inverted": {
451 | "value": "#1e2b3c",
452 | "type": "color"
453 | }
454 | },
455 | "action": {
456 | "subtle": {
457 | "value": "#e6eff8",
458 | "type": "color"
459 | },
460 | "default": {
461 | "value": "#0062ba",
462 | "type": "color"
463 | },
464 | "hover": {
465 | "value": "#004e95",
466 | "type": "color"
467 | },
468 | "active": {
469 | "value": "#00315d",
470 | "type": "color",
471 | "description": "Standard farge for handlinger"
472 | }
473 | },
474 | "success": {
475 | "subtle": {
476 | "value": "#d1f4e1",
477 | "type": "color"
478 | },
479 | "subtle-hover": {
480 | "value": "#8be4b5",
481 | "type": "color"
482 | },
483 | "default": {
484 | "value": "#118849",
485 | "type": "color"
486 | },
487 | "hover": {
488 | "value": "#0c6536",
489 | "type": "color"
490 | },
491 | "active": {
492 | "value": "#084826",
493 | "type": "color"
494 | }
495 | },
496 | "warning": {
497 | "subtle": {
498 | "value": "#fffbe6",
499 | "type": "color"
500 | },
501 | "subtle-hover": {
502 | "value": "#fff4b4",
503 | "type": "color"
504 | }
505 | },
506 | "danger": {
507 | "subtle": {
508 | "value": "#f9d5db",
509 | "type": "color"
510 | },
511 | "subtle-hover": {
512 | "value": "#f3abb6",
513 | "type": "color"
514 | },
515 | "default": {
516 | "value": "#e02e49",
517 | "type": "color"
518 | },
519 | "hover": {
520 | "value": "#b3253a",
521 | "type": "color"
522 | },
523 | "active": {
524 | "value": "#861c2c",
525 | "type": "color"
526 | }
527 | },
528 | "info": {
529 | "subtle": {
530 | "value": "#e6eff8",
531 | "type": "color"
532 | },
533 | "hover": {
534 | "value": "#b3d0ea",
535 | "type": "color"
536 | }
537 | }
538 | },
539 | "border": {
540 | "info": {
541 | "default": {
542 | "value": "#004e95",
543 | "type": "color"
544 | }
545 | },
546 | "action": {
547 | "subtle": {
548 | "value": "#e6eff8",
549 | "type": "color"
550 | },
551 | "default": {
552 | "value": "#0062ba",
553 | "type": "color"
554 | },
555 | "hover": {
556 | "value": "#004e95",
557 | "type": "color"
558 | },
559 | "active": {
560 | "value": "#00315d",
561 | "type": "color"
562 | }
563 | },
564 | "neutral": {
565 | "default": {
566 | "value": "#68707c",
567 | "type": "color"
568 | },
569 | "subtle": {
570 | "value": "#d2d5d8",
571 | "type": "color"
572 | },
573 | "strong": {
574 | "value": "#1e2b3c",
575 | "type": "color"
576 | },
577 | "divider": {
578 | "value": "#bcbfc5",
579 | "type": "color"
580 | }
581 | },
582 | "success": {
583 | "default": {
584 | "value": "#0c6536",
585 | "type": "color"
586 | }
587 | },
588 | "warning": {
589 | "default": {
590 | "value": "#cc7005",
591 | "type": "color"
592 | }
593 | },
594 | "danger": {
595 | "default": {
596 | "value": "#b3253a",
597 | "type": "color"
598 | }
599 | },
600 | "tab-focus": {
601 | "default": {
602 | "value": "#98177e",
603 | "type": "color"
604 | }
605 | }
606 | },
607 | "text": {
608 | "success": {
609 | "default": {
610 | "value": "#0c6536",
611 | "type": "color"
612 | },
613 | "on_success": {
614 | "value": "#ffffff",
615 | "type": "color"
616 | }
617 | },
618 | "neutral": {
619 | "default": {
620 | "value": "#1e2b3c",
621 | "type": "color"
622 | },
623 | "subtle": {
624 | "value": "#68707c",
625 | "type": "color"
626 | },
627 | "on_inverted": {
628 | "value": "#ffffff",
629 | "type": "color"
630 | }
631 | },
632 | "action": {
633 | "default": {
634 | "value": "#0062ba",
635 | "type": "color"
636 | },
637 | "on_action": {
638 | "value": "#ffffff",
639 | "type": "color"
640 | }
641 | },
642 | "warning": {
643 | "default": {
644 | "value": "#995404",
645 | "type": "color"
646 | },
647 | "icon_warning": {
648 | "value": "#cc7005",
649 | "type": "color"
650 | },
651 | "on_warning": {
652 | "value": "#663802",
653 | "type": "color"
654 | }
655 | },
656 | "danger": {
657 | "default": {
658 | "value": "#b3253a",
659 | "type": "color"
660 | },
661 | "on_danger": {
662 | "value": "#ffffff",
663 | "type": "color"
664 | }
665 | },
666 | "visited": {
667 | "default": {
668 | "value": "#7a1265",
669 | "type": "color"
670 | }
671 | }
672 | }
673 | }
674 | },
675 | "Base/Component": {
676 | "component": {
677 | "icon": {
678 | "size": {
679 | "xs": {
680 | "value": "1.5rem",
681 | "type": "sizing"
682 | },
683 | "sm": {
684 | "value": "1.875rem",
685 | "type": "sizing"
686 | },
687 | "md": {
688 | "value": "2.25rem",
689 | "type": "sizing"
690 | },
691 | "lg": {
692 | "value": "3rem",
693 | "type": "sizing"
694 | },
695 | "xl": {
696 | "value": "3.75rem",
697 | "type": "sizing"
698 | }
699 | }
700 | },
701 | "panel": {
702 | "color": {
703 | "background": {
704 | "default": {
705 | "value": "{semantic.surface.info.subtle}",
706 | "type": "color"
707 | },
708 | "success": {
709 | "value": "{semantic.surface.success.subtle}",
710 | "type": "color"
711 | },
712 | "warning": {
713 | "value": "{semantic.surface.warning.subtle}",
714 | "type": "color"
715 | }
716 | },
717 | "arrow": {
718 | "default": {
719 | "value": "{component.panel.color.background.default}",
720 | "type": "color"
721 | },
722 | "success": {
723 | "value": "{component.panel.color.background.success}",
724 | "type": "color"
725 | },
726 | "warning": {
727 | "value": "{component.panel.color.background.warning}",
728 | "type": "color"
729 | }
730 | }
731 | },
732 | "font_size": {
733 | "header": {
734 | "breakpoint_sm": {
735 | "value": "{font_size.heading.h2.breakpoint_sm}",
736 | "type": "fontSizes"
737 | },
738 | "breakpoint_md": {
739 | "value": "{font_size.heading.h2.breakpoint_md}",
740 | "type": "fontSizes"
741 | },
742 | "breakpoint_lg": {
743 | "value": "{font_size.heading.h2.breakpoint_lg}",
744 | "type": "fontSizes"
745 | }
746 | },
747 | "body": {
748 | "breakpoint_sm": {
749 | "value": "{font_size.body.large.breakpoint_sm}",
750 | "type": "fontSizes"
751 | },
752 | "breakpoint_md": {
753 | "value": "{font_size.body.large.breakpoint_md}",
754 | "type": "fontSizes"
755 | }
756 | }
757 | },
758 | "space": {
759 | "padding": {
760 | "x": {
761 | "xs": {
762 | "value": "{space.x2}rem",
763 | "type": "spacing"
764 | },
765 | "md": {
766 | "value": "{space.x8}rem",
767 | "type": "spacing"
768 | }
769 | },
770 | "y": {
771 | "xs": {
772 | "value": "{space.x2}rem",
773 | "type": "spacing"
774 | },
775 | "md": {
776 | "value": "{space.x3}rem",
777 | "type": "spacing"
778 | }
779 | }
780 | },
781 | "gap": {
782 | "xs": {
783 | "value": "{space.base}rem",
784 | "type": "spacing"
785 | },
786 | "md": {
787 | "value": "{space.base}rem",
788 | "type": "spacing"
789 | }
790 | },
791 | "text_group": {
792 | "gap": {
793 | "xs": {
794 | "value": "{space.half}rem",
795 | "type": "spacing"
796 | }
797 | }
798 | },
799 | "arrow_left": {
800 | "md": {
801 | "value": "6.688rem",
802 | "type": "spacing"
803 | },
804 | "xs": {
805 | "value": "4rem",
806 | "type": "spacing"
807 | }
808 | }
809 | },
810 | "size": {
811 | "icon": {
812 | "xs": {
813 | "value": "{component.icon.size.md}",
814 | "type": "sizing"
815 | },
816 | "md": {
817 | "value": "{component.icon.size.xl}",
818 | "type": "sizing"
819 | }
820 | }
821 | },
822 | "typography": {
823 | "default": {
824 | "value": {
825 | "fontFamily": "Altinn-DIN",
826 | "fontWeight": "Regular",
827 | "lineHeight": "1.5",
828 | "fontSize": "1rem",
829 | "letterSpacing": "3%",
830 | "paragraphSpacing": "0",
831 | "textDecoration": "none",
832 | "textCase": "none"
833 | },
834 | "type": "typography"
835 | }
836 | },
837 | "font_weight": {
838 | "heading": {
839 | "value": "bold",
840 | "type": "fontWeights"
841 | }
842 | }
843 | },
844 | "legend": {
845 | "font_weight": {
846 | "default": {
847 | "value": "medium",
848 | "type": "fontWeights"
849 | }
850 | }
851 | },
852 | "label": {
853 | "font_weight": {
854 | "default": {
855 | "value": "medium",
856 | "type": "fontWeights"
857 | }
858 | }
859 | },
860 | "expandable_row": {
861 | "color": {
862 | "border_top": {
863 | "default": {
864 | "value": "{semantic.border.neutral.subtle}",
865 | "type": "color"
866 | }
867 | },
868 | "border_bottom": {
869 | "default": {
870 | "value": "{semantic.border.neutral.subtle}",
871 | "type": "color"
872 | }
873 | }
874 | },
875 | "space": {
876 | "padding": {
877 | "x": {
878 | "xs": {
879 | "value": "{space.base}rem",
880 | "type": "spacing"
881 | },
882 | "md": {
883 | "value": "{space.x2}rem",
884 | "type": "spacing"
885 | }
886 | },
887 | "top": {
888 | "xs": {
889 | "value": "0.25rem",
890 | "type": "spacing"
891 | }
892 | },
893 | "bottom": {
894 | "xs": {
895 | "value": "0.5rem",
896 | "type": "spacing"
897 | }
898 | }
899 | },
900 | "gap": {
901 | "title": {
902 | "xs": {
903 | "value": "{space.base}",
904 | "type": "spacing"
905 | },
906 | "md": {
907 | "value": "{space.x2}rem",
908 | "type": "spacing"
909 | }
910 | }
911 | }
912 | },
913 | "size": {
914 | "icon": {
915 | "xs": {
916 | "value": "{component.icon.size.xs}",
917 | "type": "sizing"
918 | }
919 | }
920 | },
921 | "font_weight": {
922 | "header": {
923 | "value": "medium",
924 | "type": "fontWeights"
925 | }
926 | },
927 | "font_size": {
928 | "header": {
929 | "breakpoint_sm": {
930 | "value": "{font_size.400.breakpoint_sm}",
931 | "type": "fontSizes"
932 | },
933 | "breakpoint_md": {
934 | "value": "{font_size.400.breakpoint_md}",
935 | "type": "fontSizes"
936 | }
937 | }
938 | },
939 | "border_width": {
940 | "default": {
941 | "value": "1px",
942 | "type": "borderWidth"
943 | }
944 | }
945 | },
946 | "checkbox": {
947 | "space": {
948 | "gap": {
949 | "xsmall": {
950 | "value": "0.5rem",
951 | "type": "spacing"
952 | },
953 | "small": {
954 | "value": "{space.base}rem",
955 | "type": "spacing"
956 | }
957 | }
958 | },
959 | "size": {
960 | "width": {
961 | "xsmall": {
962 | "value": "1.125rem",
963 | "type": "sizing"
964 | },
965 | "small": {
966 | "value": "{size.x2}rem",
967 | "type": "sizing"
968 | }
969 | },
970 | "height": {
971 | "xsmall": {
972 | "value": "1.125rem",
973 | "type": "sizing"
974 | },
975 | "small": {
976 | "value": "{size.x2}rem",
977 | "type": "sizing"
978 | }
979 | }
980 | },
981 | "color": {
982 | "border": {
983 | "default": {
984 | "value": "{semantic.border.neutral.strong}",
985 | "type": "color"
986 | },
987 | "hover": {
988 | "value": "{semantic.border.action.default}",
989 | "type": "color"
990 | },
991 | "checked": {
992 | "value": "{semantic.border.action.default}",
993 | "type": "color"
994 | },
995 | "error": {
996 | "value": "{semantic.border.danger.default}",
997 | "type": "color"
998 | }
999 | },
1000 | "background": {
1001 | "default": {
1002 | "value": "{semantic.surface.neutral.default}",
1003 | "type": "color"
1004 | },
1005 | "hover": {
1006 | "value": "{semantic.surface.action.subtle}",
1007 | "type": "color"
1008 | },
1009 | "checked": {
1010 | "value": "{semantic.surface.action.default}",
1011 | "type": "color"
1012 | },
1013 | "error": {
1014 | "value": "{semantic.surface.neutral.default}",
1015 | "type": "color"
1016 | }
1017 | },
1018 | "text": {
1019 | "default": {
1020 | "value": "{semantic.text.neutral.default}",
1021 | "type": "color"
1022 | },
1023 | "hover": {
1024 | "value": "{semantic.text.action.default}",
1025 | "type": "color"
1026 | },
1027 | "checked": {
1028 | "value": "{semantic.text.neutral.default}",
1029 | "type": "color"
1030 | },
1031 | "error": {
1032 | "value": "{semantic.text.neutral.default}",
1033 | "type": "color"
1034 | }
1035 | }
1036 | },
1037 | "border_width": {
1038 | "xsmall": {
1039 | "value": "{border_width.standard}",
1040 | "type": "borderWidth"
1041 | },
1042 | "small": {
1043 | "value": "{border_width.standard}",
1044 | "type": "borderWidth"
1045 | }
1046 | },
1047 | "font_size": {
1048 | "xs": {
1049 | "value": "{font_size.component-size.xs}",
1050 | "type": "fontSizes"
1051 | },
1052 | "sm": {
1053 | "value": "{font_size.component-size.sm}",
1054 | "type": "fontSizes"
1055 | }
1056 | }
1057 | },
1058 | "fieldset": {
1059 | "space": {
1060 | "gap": {
1061 | "y": {
1062 | "xsmall": {
1063 | "value": "{space.base}rem",
1064 | "type": "spacing"
1065 | },
1066 | "small": {
1067 | "value": "1.125rem",
1068 | "type": "spacing"
1069 | },
1070 | "medium": {
1071 | "value": "{space.base}*2rem",
1072 | "type": "spacing"
1073 | },
1074 | "large": {
1075 | "value": "{space.base}*2rem",
1076 | "type": "spacing"
1077 | }
1078 | }
1079 | }
1080 | }
1081 | },
1082 | "field_description": {
1083 | "color": {
1084 | "text": {
1085 | "default": {
1086 | "value": "{semantic.text.neutral.default}",
1087 | "type": "color"
1088 | }
1089 | }
1090 | },
1091 | "space": {
1092 | "top": {
1093 | "small": {
1094 | "value": "0.5rem",
1095 | "type": "spacing"
1096 | },
1097 | "xsmall": {
1098 | "value": "0.375rem",
1099 | "type": "spacing"
1100 | }
1101 | }
1102 | }
1103 | },
1104 | "textarea": {
1105 | "border_width": {
1106 | "normal": {
1107 | "value": "{border_width.standard}",
1108 | "type": "borderWidth"
1109 | }
1110 | },
1111 | "color": {
1112 | "border": {
1113 | "default": {
1114 | "value": "{semantic.border.neutral.strong}",
1115 | "type": "color"
1116 | },
1117 | "hover": {
1118 | "value": "{semantic.border.action.default}",
1119 | "type": "color"
1120 | },
1121 | "error": {
1122 | "value": "{semantic.border.danger.default}",
1123 | "type": "color"
1124 | }
1125 | },
1126 | "background": {
1127 | "default": {
1128 | "value": "{semantic.surface.neutral.default}",
1129 | "type": "color"
1130 | },
1131 | "hover": {
1132 | "value": "{semantic.surface.neutral.default}",
1133 | "type": "color"
1134 | },
1135 | "focus": {
1136 | "value": "{semantic.surface.neutral.default}",
1137 | "type": "color"
1138 | }
1139 | },
1140 | "text": {
1141 | "default": {
1142 | "value": "{semantic.text.neutral.default}",
1143 | "type": "color"
1144 | }
1145 | }
1146 | },
1147 | "space": {
1148 | "padding": {
1149 | "x": {
1150 | "value": "{space.base}rem",
1151 | "type": "spacing"
1152 | },
1153 | "y": {
1154 | "value": "{space.half}rem",
1155 | "type": "spacing"
1156 | }
1157 | }
1158 | },
1159 | "size": {
1160 | "min_height": {
1161 | "xsmall": {
1162 | "value": "6.25rem",
1163 | "type": "sizing"
1164 | },
1165 | "small": {
1166 | "value": "9.375rem",
1167 | "type": "sizing"
1168 | },
1169 | "medium": {
1170 | "value": "12.5rem",
1171 | "type": "sizing"
1172 | },
1173 | "large": {
1174 | "value": "18.75rem",
1175 | "type": "sizing"
1176 | },
1177 | "xlarge": {
1178 | "value": "25rem",
1179 | "type": "sizing"
1180 | }
1181 | }
1182 | },
1183 | "font_size": {
1184 | "sm": {
1185 | "value": "{font_size.component-size.sm}",
1186 | "type": "fontSizes"
1187 | }
1188 | }
1189 | },
1190 | "checkbox-group": {
1191 | "space": {
1192 | "gap": {
1193 | "x": {
1194 | "xsmall": {
1195 | "value": "{space.base}*2rem",
1196 | "type": "spacing"
1197 | },
1198 | "small": {
1199 | "value": "{space.base}*3rem",
1200 | "type": "spacing"
1201 | }
1202 | },
1203 | "y": {
1204 | "xsmall": {
1205 | "value": "0.563rem",
1206 | "type": "spacing"
1207 | },
1208 | "small": {
1209 | "value": "1.125rem",
1210 | "type": "spacing"
1211 | }
1212 | }
1213 | }
1214 | }
1215 | },
1216 | "toggle_button": {
1217 | "font_size": {
1218 | "sm": {
1219 | "value": "{font_size.component-size.sm}",
1220 | "type": "fontSizes"
1221 | }
1222 | },
1223 | "size": {
1224 | "min_width": {
1225 | "sm": {
1226 | "value": "100%",
1227 | "type": "sizing"
1228 | },
1229 | "md": {
1230 | "value": "auto",
1231 | "type": "sizing"
1232 | }
1233 | }
1234 | },
1235 | "border_width": {
1236 | "inactive": {
1237 | "value": "2px",
1238 | "type": "borderWidth"
1239 | }
1240 | },
1241 | "color": {
1242 | "background": {
1243 | "active": {
1244 | "value": "{semantic.surface.action.default}",
1245 | "type": "color"
1246 | },
1247 | "inactive": {
1248 | "value": "{semantic.surface.neutral.default}",
1249 | "type": "color"
1250 | }
1251 | },
1252 | "text": {
1253 | "active": {
1254 | "value": "{semantic.text.action.on_action}",
1255 | "type": "color"
1256 | },
1257 | "inactive": {
1258 | "value": "{semantic.text.neutral.default}",
1259 | "type": "color"
1260 | }
1261 | },
1262 | "border": {
1263 | "inactive": {
1264 | "value": "{semantic.border.action.default}",
1265 | "type": "color"
1266 | }
1267 | }
1268 | },
1269 | "space": {
1270 | "padding": {
1271 | "x": {
1272 | "value": "{space.x2}rem",
1273 | "type": "spacing"
1274 | },
1275 | "top": {
1276 | "value": "0.125rem",
1277 | "type": "spacing"
1278 | },
1279 | "bottom": {
1280 | "value": "0.25rem",
1281 | "type": "spacing"
1282 | }
1283 | }
1284 | }
1285 | },
1286 | "icon_button": {
1287 | "size": {
1288 | "large": {
1289 | "circle": {
1290 | "value": "{size.x3}rem",
1291 | "type": "sizing"
1292 | },
1293 | "icon": {
1294 | "value": "1.4rem",
1295 | "type": "sizing"
1296 | }
1297 | },
1298 | "medium": {
1299 | "circle": {
1300 | "value": "{size.x2}rem",
1301 | "type": "sizing"
1302 | },
1303 | "icon": {
1304 | "value": "0.875rem",
1305 | "type": "sizing"
1306 | }
1307 | },
1308 | "small": {
1309 | "circle": {
1310 | "value": "1.125rem",
1311 | "type": "sizing"
1312 | },
1313 | "icon": {
1314 | "value": "0.688rem",
1315 | "type": "sizing"
1316 | }
1317 | }
1318 | },
1319 | "border_width": {
1320 | "default": {
1321 | "value": "1px",
1322 | "type": "borderWidth"
1323 | }
1324 | }
1325 | },
1326 | "button": {
1327 | "filled": {
1328 | "primary": {
1329 | "color": {
1330 | "background": {
1331 | "default": {
1332 | "value": "{semantic.surface.action.default}",
1333 | "type": "color"
1334 | },
1335 | "hover": {
1336 | "value": "{semantic.surface.action.hover}",
1337 | "type": "color"
1338 | },
1339 | "pressed": {
1340 | "value": "{semantic.surface.action.active}",
1341 | "type": "color"
1342 | }
1343 | }
1344 | }
1345 | },
1346 | "color": {
1347 | "text": {
1348 | "all": {
1349 | "value": "{semantic.text.action.on_action}",
1350 | "type": "color"
1351 | }
1352 | }
1353 | },
1354 | "success": {
1355 | "color": {
1356 | "background": {
1357 | "default": {
1358 | "value": "{semantic.surface.success.default}",
1359 | "type": "color"
1360 | },
1361 | "hover": {
1362 | "value": "{semantic.surface.success.hover}",
1363 | "type": "color"
1364 | },
1365 | "pressed": {
1366 | "value": "{semantic.surface.success.active}",
1367 | "type": "color"
1368 | }
1369 | }
1370 | }
1371 | },
1372 | "danger": {
1373 | "color": {
1374 | "background": {
1375 | "default": {
1376 | "value": "{semantic.surface.danger.default}",
1377 | "type": "color"
1378 | },
1379 | "hover": {
1380 | "value": "{semantic.surface.danger.hover}",
1381 | "type": "color"
1382 | },
1383 | "pressed": {
1384 | "value": "{semantic.surface.danger.active}",
1385 | "type": "color"
1386 | }
1387 | }
1388 | }
1389 | }
1390 | },
1391 | "space": {
1392 | "gap": {
1393 | "small": {
1394 | "value": "0.5rem",
1395 | "type": "spacing"
1396 | },
1397 | "medium": {
1398 | "value": "0.5rem",
1399 | "type": "spacing"
1400 | },
1401 | "large": {
1402 | "value": "0.5rem",
1403 | "type": "spacing"
1404 | }
1405 | },
1406 | "padding": {
1407 | "x": {
1408 | "small": {
1409 | "value": "1.125rem",
1410 | "type": "spacing"
1411 | },
1412 | "medium": {
1413 | "value": "{space.x3}rem",
1414 | "type": "spacing"
1415 | },
1416 | "large": {
1417 | "value": "{space.x4}rem",
1418 | "type": "spacing"
1419 | }
1420 | }
1421 | }
1422 | },
1423 | "quiet": {
1424 | "space": {
1425 | "padding": {
1426 | "x": {
1427 | "small": {
1428 | "value": "0.375rem",
1429 | "type": "spacing"
1430 | },
1431 | "medium": {
1432 | "value": "0.563rem",
1433 | "type": "spacing"
1434 | },
1435 | "large": {
1436 | "value": "0.563rem",
1437 | "type": "spacing"
1438 | }
1439 | }
1440 | }
1441 | },
1442 | "primary": {
1443 | "color": {
1444 | "text": {
1445 | "default": {
1446 | "value": "{semantic.text.action.default}",
1447 | "type": "color"
1448 | },
1449 | "pressed": {
1450 | "value": "{colors.white}",
1451 | "type": "color"
1452 | }
1453 | },
1454 | "background": {
1455 | "hover": {
1456 | "value": "{semantic.surface.action.subtle}",
1457 | "type": "color"
1458 | },
1459 | "pressed": {
1460 | "value": "{colors.blue.800}",
1461 | "type": "color"
1462 | }
1463 | }
1464 | }
1465 | }
1466 | },
1467 | "outline": {
1468 | "primary": {
1469 | "color": {
1470 | "text": {
1471 | "default": {
1472 | "value": "{semantic.text.action.default}",
1473 | "type": "color"
1474 | },
1475 | "pressed": {
1476 | "value": "{colors.white}",
1477 | "type": "color"
1478 | }
1479 | },
1480 | "border": {
1481 | "default": {
1482 | "value": "{semantic.border.action.default}",
1483 | "type": "color"
1484 | },
1485 | "hover": {
1486 | "value": "{semantic.border.action.hover}",
1487 | "type": "color"
1488 | }
1489 | },
1490 | "background": {
1491 | "default": {
1492 | "value": "{colors.white}",
1493 | "type": "color"
1494 | },
1495 | "hover": {
1496 | "value": "{semantic.surface.action.subtle}",
1497 | "type": "color"
1498 | },
1499 | "pressed": {
1500 | "value": "{colors.blue.800}",
1501 | "type": "color"
1502 | }
1503 | }
1504 | }
1505 | }
1506 | },
1507 | "border_width": {
1508 | "default": {
1509 | "value": "1px",
1510 | "type": "borderWidth"
1511 | }
1512 | },
1513 | "size": {
1514 | "height": {
1515 | "small": {
1516 | "value": "{size.x3}rem",
1517 | "type": "sizing"
1518 | },
1519 | "medium": {
1520 | "value": "{size.x4}rem",
1521 | "type": "sizing"
1522 | },
1523 | "large": {
1524 | "value": "{size.x5}rem",
1525 | "type": "sizing"
1526 | }
1527 | },
1528 | "icon": {
1529 | "small": {
1530 | "value": "{size.x2}rem",
1531 | "type": "sizing"
1532 | },
1533 | "medium": {
1534 | "value": "1.875rem",
1535 | "type": "sizing"
1536 | },
1537 | "large": {
1538 | "value": "2.5rem",
1539 | "type": "sizing"
1540 | }
1541 | }
1542 | }
1543 | },
1544 | "input": {
1545 | "color": {
1546 | "border": {
1547 | "default": {
1548 | "value": "{semantic.border.neutral.strong}",
1549 | "type": "color"
1550 | },
1551 | "hover": {
1552 | "value": "{semantic.border.action.default}",
1553 | "type": "color"
1554 | }
1555 | },
1556 | "background": {
1557 | "default": {
1558 | "value": "{colors.white}",
1559 | "type": "color"
1560 | },
1561 | "hover": {
1562 | "value": "{colors.white}",
1563 | "type": "color"
1564 | },
1565 | "focus": {
1566 | "value": "{colors.white}",
1567 | "type": "color"
1568 | }
1569 | }
1570 | },
1571 | "error": {
1572 | "color": {
1573 | "border": {
1574 | "default": {
1575 | "value": "{semantic.border.danger.default}",
1576 | "type": "color"
1577 | }
1578 | }
1579 | }
1580 | },
1581 | "space": {
1582 | "padding": {
1583 | "x": {
1584 | "value": "{space.base}rem",
1585 | "type": "spacing"
1586 | },
1587 | "y": {
1588 | "value": "{space.half}rem",
1589 | "type": "spacing"
1590 | }
1591 | }
1592 | },
1593 | "border_width": {
1594 | "default": {
1595 | "value": "2px",
1596 | "type": "borderWidth"
1597 | },
1598 | "focus": {
1599 | "value": "4px",
1600 | "type": "borderWidth"
1601 | }
1602 | },
1603 | "read_only_info": {
1604 | "color": {
1605 | "border": {
1606 | "default": {
1607 | "value": "{colors.yellow.200}",
1608 | "type": "color"
1609 | }
1610 | },
1611 | "background": {
1612 | "default": {
1613 | "value": "{colors.yellow.200}",
1614 | "type": "color"
1615 | }
1616 | }
1617 | }
1618 | },
1619 | "read_only_confirm": {
1620 | "color": {
1621 | "background": {
1622 | "default": {
1623 | "value": "{colors.green.200}",
1624 | "type": "color"
1625 | }
1626 | },
1627 | "border": {
1628 | "default": {
1629 | "value": "{colors.green.200}",
1630 | "type": "color"
1631 | }
1632 | }
1633 | }
1634 | },
1635 | "size": {
1636 | "min_height": {
1637 | "default": {
1638 | "value": "{size.x3}rem",
1639 | "type": "sizing"
1640 | }
1641 | }
1642 | },
1643 | "font_size": {
1644 | "sm": {
1645 | "value": "{font_size.component-size.sm}",
1646 | "type": "fontSizes"
1647 | },
1648 | "md": {
1649 | "value": "{font_size.component-size.md}",
1650 | "type": "fontSizes"
1651 | }
1652 | }
1653 | },
1654 | "error_message": {
1655 | "space": {
1656 | "padding": {
1657 | "top": {
1658 | "value": "{space.half}rem",
1659 | "type": "spacing"
1660 | }
1661 | }
1662 | },
1663 | "color": {
1664 | "text": {
1665 | "value": "{semantic.text.danger.default}",
1666 | "type": "color"
1667 | }
1668 | },
1669 | "font_size": {
1670 | "xs": {
1671 | "value": "{font_size.component-size.xs}",
1672 | "type": "fontSizes"
1673 | }
1674 | }
1675 | }
1676 | },
1677 | "border_width": {
1678 | "thin": {
1679 | "value": "1px",
1680 | "type": "borderWidth"
1681 | },
1682 | "standard": {
1683 | "value": "2px",
1684 | "type": "borderWidth"
1685 | }
1686 | },
1687 | "space": {
1688 | "half": {
1689 | "value": "{space.base} / 2",
1690 | "type": "spacing"
1691 | },
1692 | "base": {
1693 | "value": "0.75",
1694 | "type": "spacing"
1695 | },
1696 | "x2": {
1697 | "value": "{space.base} * 2",
1698 | "type": "spacing"
1699 | },
1700 | "x3": {
1701 | "value": "{space.base} * 3",
1702 | "type": "spacing"
1703 | },
1704 | "x4": {
1705 | "value": "{space.base} * 4",
1706 | "type": "spacing"
1707 | },
1708 | "x5": {
1709 | "value": "{space.base} * 5",
1710 | "type": "spacing"
1711 | },
1712 | "x6": {
1713 | "value": "{space.base} * 6",
1714 | "type": "spacing"
1715 | },
1716 | "x7": {
1717 | "value": "{space.base} * 7",
1718 | "type": "spacing"
1719 | },
1720 | "x8": {
1721 | "value": "{space.base} * 8",
1722 | "type": "spacing"
1723 | },
1724 | "x16": {
1725 | "value": "{space.base} * 16",
1726 | "type": "spacing"
1727 | }
1728 | },
1729 | "interactive_components": {
1730 | "border_radius": {
1731 | "normal": {
1732 | "value": "3px",
1733 | "type": "borderRadius"
1734 | }
1735 | },
1736 | "border_width": {
1737 | "normal": {
1738 | "value": "2px",
1739 | "type": "borderWidth"
1740 | }
1741 | }
1742 | },
1743 | "paragraph_space": {
1744 | "default": {
1745 | "value": "{space.x3}rem",
1746 | "type": "paragraphSpacing"
1747 | }
1748 | },
1749 | "font_size": {
1750 | "100": {
1751 | "value": "0.75rem",
1752 | "type": "fontSizes"
1753 | },
1754 | "200": {
1755 | "value": "0.875rem",
1756 | "type": "fontSizes"
1757 | },
1758 | "300": {
1759 | "value": "1rem",
1760 | "type": "fontSizes"
1761 | },
1762 | "400": {
1763 | "breakpoint_sm": {
1764 | "value": "1rem",
1765 | "type": "fontSizes"
1766 | },
1767 | "breakpoint_md": {
1768 | "value": "1.125rem",
1769 | "type": "fontSizes"
1770 | }
1771 | },
1772 | "500": {
1773 | "breakpoint_sm": {
1774 | "value": "1rem",
1775 | "type": "fontSizes"
1776 | },
1777 | "breakpoint_md": {
1778 | "value": "1.125rem",
1779 | "type": "fontSizes"
1780 | },
1781 | "breakpoint_lg": {
1782 | "value": "1.25rem",
1783 | "type": "fontSizes"
1784 | }
1785 | },
1786 | "600": {
1787 | "breakpoint_sm": {
1788 | "value": "1.125rem",
1789 | "type": "fontSizes",
1790 | "description": "18px"
1791 | },
1792 | "breakpoint_md": {
1793 | "value": "1.25rem",
1794 | "type": "fontSizes",
1795 | "description": "20px"
1796 | },
1797 | "breakpoint_lg": {
1798 | "value": "1.5rem",
1799 | "type": "fontSizes",
1800 | "description": "24px"
1801 | }
1802 | },
1803 | "700": {
1804 | "breakpoint_sm": {
1805 | "value": "1.25rem",
1806 | "type": "fontSizes",
1807 | "description": "20px"
1808 | },
1809 | "breakpoint_md": {
1810 | "value": "1.5rem",
1811 | "type": "fontSizes",
1812 | "description": "24px"
1813 | },
1814 | "breakpoint_lg": {
1815 | "value": "1.75rem",
1816 | "type": "fontSizes",
1817 | "description": "28px"
1818 | }
1819 | },
1820 | "800": {
1821 | "breakpoint_sm": {
1822 | "value": "1.5rem",
1823 | "type": "fontSizes",
1824 | "description": "24px"
1825 | },
1826 | "breakpoint_md": {
1827 | "value": "1.75rem",
1828 | "type": "fontSizes",
1829 | "description": "28px"
1830 | },
1831 | "breakpoint_lg": {
1832 | "value": "2.25rem",
1833 | "type": "fontSizes",
1834 | "description": "36px"
1835 | }
1836 | },
1837 | "900": {
1838 | "breakpoint_sm": {
1839 | "value": "1.75rem",
1840 | "type": "fontSizes",
1841 | "description": "28px"
1842 | },
1843 | "breakpoint_md": {
1844 | "value": "2.25rem",
1845 | "type": "fontSizes",
1846 | "description": "36px"
1847 | },
1848 | "breakpoint_lg": {
1849 | "value": "2.75rem",
1850 | "type": "fontSizes",
1851 | "description": "44px"
1852 | }
1853 | },
1854 | "heading": {
1855 | "h1": {
1856 | "breakpoint_sm": {
1857 | "value": "{font_size.900.breakpoint_sm}",
1858 | "type": "fontSizes"
1859 | },
1860 | "breakpoint_md": {
1861 | "value": "{font_size.900.breakpoint_md}",
1862 | "type": "fontSizes"
1863 | },
1864 | "breakpoint_lg": {
1865 | "value": "{font_size.900.breakpoint_lg}",
1866 | "type": "fontSizes"
1867 | }
1868 | },
1869 | "h2": {
1870 | "breakpoint_sm": {
1871 | "value": "{font_size.800.breakpoint_sm}",
1872 | "type": "fontSizes"
1873 | },
1874 | "breakpoint_md": {
1875 | "value": "{font_size.800.breakpoint_md}",
1876 | "type": "fontSizes"
1877 | },
1878 | "breakpoint_lg": {
1879 | "value": "{font_size.800.breakpoint_lg}",
1880 | "type": "fontSizes"
1881 | }
1882 | },
1883 | "h3": {
1884 | "breakpoint_sm": {
1885 | "value": "{font_size.700.breakpoint_sm}",
1886 | "type": "fontSizes"
1887 | },
1888 | "breakpoint_md": {
1889 | "value": "{font_size.700.breakpoint_md}",
1890 | "type": "fontSizes"
1891 | },
1892 | "breakpoint_lg": {
1893 | "value": "{font_size.700.breakpoint_lg}",
1894 | "type": "fontSizes"
1895 | }
1896 | },
1897 | "h4": {
1898 | "breakpoint_sm": {
1899 | "value": "{font_size.600.breakpoint_sm}",
1900 | "type": "fontSizes"
1901 | },
1902 | "breakpoint_md": {
1903 | "value": "{font_size.600.breakpoint_md}",
1904 | "type": "fontSizes"
1905 | },
1906 | "breakpoint_lg": {
1907 | "value": "{font_size.600.breakpoint_lg}",
1908 | "type": "fontSizes"
1909 | }
1910 | },
1911 | "h5": {
1912 | "breakpoint_sm": {
1913 | "value": "{font_size.500.breakpoint_sm}",
1914 | "type": "fontSizes"
1915 | },
1916 | "breakpoint_md": {
1917 | "value": "{font_size.500.breakpoint_md}",
1918 | "type": "fontSizes"
1919 | },
1920 | "breakpoint_lg": {
1921 | "value": "{font_size.500.breakpoint_lg}",
1922 | "type": "fontSizes"
1923 | }
1924 | }
1925 | },
1926 | "component-size": {
1927 | "xs": {
1928 | "value": "{font_size.200}",
1929 | "type": "fontSizes",
1930 | "description": "14px"
1931 | },
1932 | "sm": {
1933 | "value": "{font_size.300}",
1934 | "type": "fontSizes",
1935 | "description": "16px"
1936 | },
1937 | "md": {
1938 | "value": "1.125rem",
1939 | "type": "fontSizes",
1940 | "description": "18px"
1941 | },
1942 | "lg": {
1943 | "value": "1.5rem",
1944 | "type": "fontSizes",
1945 | "description": "24px"
1946 | }
1947 | },
1948 | "body": {
1949 | "medium": {
1950 | "value": "{font_size.300}",
1951 | "type": "fontSizes",
1952 | "description": "Body text should never be smaller than 16px"
1953 | },
1954 | "large": {
1955 | "breakpoint_sm": {
1956 | "value": "{font_size.400.breakpoint_sm}",
1957 | "type": "fontSizes"
1958 | },
1959 | "breakpoint_md": {
1960 | "value": "{font_size.400.breakpoint_md}",
1961 | "type": "fontSizes"
1962 | }
1963 | }
1964 | },
1965 | "label": {
1966 | "small": {
1967 | "breakpoint_sm": {
1968 | "value": "{font_size.400.breakpoint_sm}",
1969 | "type": "fontSizes"
1970 | },
1971 | "breakpoint_md": {
1972 | "value": "{font_size.400.breakpoint_md}",
1973 | "type": "fontSizes"
1974 | }
1975 | }
1976 | },
1977 | "detail": {
1978 | "default": {
1979 | "value": "{font_size.200}",
1980 | "type": "fontSizes"
1981 | }
1982 | },
1983 | "ingress": {
1984 | "small": {
1985 | "breakpoint_sm": {
1986 | "value": "1.125rem",
1987 | "type": "fontSizes",
1988 | "description": "18px (Ingress should never be smaller than 18px, to keep a visual difference from the body text that is 16px.)"
1989 | },
1990 | "breakpoint_md": {
1991 | "value": "1.25rem",
1992 | "type": "fontSizes",
1993 | "description": "20px"
1994 | }
1995 | },
1996 | "medium": {
1997 | "breakpoint_sm": {
1998 | "value": "1.25rem",
1999 | "type": "fontSizes",
2000 | "description": "20px"
2001 | },
2002 | "breakpoint_md": {
2003 | "value": "1.5rem",
2004 | "type": "fontSizes",
2005 | "description": "24px"
2006 | }
2007 | }
2008 | }
2009 | },
2010 | "font_family": {
2011 | "default": {
2012 | "value": "Altinn-DIN",
2013 | "type": "fontFamilies"
2014 | },
2015 | "heading": {
2016 | "value": "{font_family.default}",
2017 | "type": "fontFamilies"
2018 | },
2019 | "ingress": {
2020 | "value": "{font_family.default}",
2021 | "type": "fontFamilies"
2022 | },
2023 | "body": {
2024 | "value": "{font_family.default}",
2025 | "type": "fontFamilies"
2026 | },
2027 | "label": {
2028 | "value": "{font_family.default}",
2029 | "type": "fontFamilies"
2030 | }
2031 | },
2032 | "breakpoints": {
2033 | "xs": {
2034 | "value": "0px",
2035 | "type": "sizing",
2036 | "description": "Specific styling for the smallest mobile sizes and up. Will affect screen sizes with the set size and larger."
2037 | },
2038 | "sm": {
2039 | "value": "540px",
2040 | "type": "sizing",
2041 | "description": "Specific styling for the largest mobile sizes and up. Will affect screen sizes with the set size and larger."
2042 | },
2043 | "md": {
2044 | "value": "768px",
2045 | "type": "sizing",
2046 | "description": "Specific styling for tablet and up. Will affect screen sizes with the set size and larger."
2047 | },
2048 | "lg": {
2049 | "value": "960px",
2050 | "type": "sizing",
2051 | "description": "Specific styling for the largest tablets and up. Will affect screen sizes with the set size and larger.Will affect screen sizes with this size and larger"
2052 | },
2053 | "xl": {
2054 | "value": "1200px",
2055 | "type": "sizing",
2056 | "description": "Specific styling for laptops and up. Will affect screen sizes with the set size and larger."
2057 | },
2058 | "xxl": {
2059 | "value": "1600px",
2060 | "type": "sizing",
2061 | "description": "Specific styling for desktops and up. Will affect screen sizes with the set size and larger."
2062 | }
2063 | },
2064 | "typography": {
2065 | "default": {
2066 | "value": {
2067 | "fontFamily": "Altinn-DIN",
2068 | "fontWeight": "Regular",
2069 | "lineHeight": "1.5",
2070 | "fontSize": "1rem",
2071 | "letterSpacing": "0.3px",
2072 | "paragraphSpacing": "0",
2073 | "textDecoration": "none",
2074 | "textCase": "none"
2075 | },
2076 | "type": "typography"
2077 | }
2078 | },
2079 | "size": {
2080 | "base": {
2081 | "value": "0.75",
2082 | "type": "sizing"
2083 | },
2084 | "x2": {
2085 | "value": "{space.base} * 2",
2086 | "type": "sizing"
2087 | },
2088 | "x3": {
2089 | "value": "{space.base} * 3",
2090 | "type": "sizing"
2091 | },
2092 | "x4": {
2093 | "value": "{space.base} * 4",
2094 | "type": "sizing"
2095 | },
2096 | "x5": {
2097 | "value": "{space.base} * 5",
2098 | "type": "sizing"
2099 | },
2100 | "x6": {
2101 | "value": "{space.base} * 6",
2102 | "type": "sizing"
2103 | },
2104 | "x7": {
2105 | "value": "{space.base} * 7",
2106 | "type": "sizing"
2107 | },
2108 | "x8": {
2109 | "value": "{space.base} * 8",
2110 | "type": "sizing"
2111 | },
2112 | "x10": {
2113 | "value": "{space.base} * 10",
2114 | "type": "sizing"
2115 | },
2116 | "x16": {
2117 | "value": "{space.base} * 16",
2118 | "type": "sizing"
2119 | }
2120 | },
2121 | "opacity": {
2122 | "disabled": {
2123 | "value": "30%",
2124 | "type": "opacity"
2125 | }
2126 | },
2127 | "semantic": {
2128 | "tab_focus": {
2129 | "outline": {
2130 | "offset": {
2131 | "value": "2px",
2132 | "type": "spacing"
2133 | },
2134 | "width": {
2135 | "value": "2px",
2136 | "type": "borderWidth"
2137 | }
2138 | }
2139 | }
2140 | },
2141 | "New Box shadow - lg": {
2142 | "value": {
2143 | "color": "#0000001a",
2144 | "type": "dropShadow",
2145 | "x": "0",
2146 | "y": "4",
2147 | "blur": "4",
2148 | "spread": "0"
2149 | },
2150 | "type": "boxShadow"
2151 | },
2152 | "New Box shadow - md": {
2153 | "value": {
2154 | "color": "#0000000f",
2155 | "type": "dropShadow",
2156 | "x": "0",
2157 | "y": "4",
2158 | "blur": "4",
2159 | "spread": "0"
2160 | },
2161 | "type": "boxShadow"
2162 | },
2163 | "fontFamilies": {
2164 | "inter": {
2165 | "value": "Inter",
2166 | "type": "fontFamilies"
2167 | }
2168 | },
2169 | "lineHeights": {
2170 | "0": {
2171 | "value": "130%",
2172 | "type": "lineHeights"
2173 | },
2174 | "1": {
2175 | "value": "170%",
2176 | "type": "lineHeights"
2177 | },
2178 | "2": {
2179 | "value": "160%",
2180 | "type": "lineHeights"
2181 | },
2182 | "3": {
2183 | "value": "150%",
2184 | "type": "lineHeights"
2185 | },
2186 | "4": {
2187 | "value": "130",
2188 | "type": "lineHeights"
2189 | }
2190 | },
2191 | "fontWeights": {
2192 | "inter-0": {
2193 | "value": "Medium",
2194 | "type": "fontWeights"
2195 | },
2196 | "inter-1": {
2197 | "value": "Regular",
2198 | "type": "fontWeights"
2199 | }
2200 | },
2201 | "fontSize": {
2202 | "0": {
2203 | "value": "14",
2204 | "type": "fontSizes"
2205 | },
2206 | "1": {
2207 | "value": "16",
2208 | "type": "fontSizes"
2209 | },
2210 | "2": {
2211 | "value": "18",
2212 | "type": "fontSizes"
2213 | },
2214 | "3": {
2215 | "value": "20",
2216 | "type": "fontSizes"
2217 | },
2218 | "4": {
2219 | "value": "24",
2220 | "type": "fontSizes"
2221 | },
2222 | "5": {
2223 | "value": "28",
2224 | "type": "fontSizes"
2225 | },
2226 | "6": {
2227 | "value": "36",
2228 | "type": "fontSizes"
2229 | },
2230 | "7": {
2231 | "value": "44",
2232 | "type": "fontSizes"
2233 | }
2234 | },
2235 | "letterSpacing": {
2236 | "0": {
2237 | "value": "0",
2238 | "type": "letterSpacing"
2239 | },
2240 | "1": {
2241 | "value": "0%",
2242 | "type": "letterSpacing"
2243 | }
2244 | },
2245 | "paragraphSpacing": {
2246 | "0": {
2247 | "value": "0",
2248 | "type": "paragraphSpacing"
2249 | }
2250 | },
2251 | "heading": {
2252 | "(900) 44px": {
2253 | "value": {
2254 | "fontFamily": "{fontFamilies.inter}",
2255 | "fontWeight": "{fontWeights.inter-0}",
2256 | "lineHeight": "{lineHeights.0}",
2257 | "fontSize": "{fontSize.7}",
2258 | "letterSpacing": "{letterSpacing.0}",
2259 | "paragraphSpacing": "{paragraphSpacing.0}",
2260 | "paragraphIndent": "{paragraphIndent.0}",
2261 | "textCase": "{textCase.none}",
2262 | "textDecoration": "{textDecoration.none}"
2263 | },
2264 | "type": "typography"
2265 | },
2266 | "(800) 36px": {
2267 | "value": {
2268 | "fontFamily": "{fontFamilies.inter}",
2269 | "fontWeight": "{fontWeights.inter-0}",
2270 | "lineHeight": "{lineHeights.0}",
2271 | "fontSize": "{fontSize.6}",
2272 | "letterSpacing": "{letterSpacing.0}",
2273 | "paragraphSpacing": "{paragraphSpacing.0}",
2274 | "paragraphIndent": "{paragraphIndent.0}",
2275 | "textCase": "{textCase.none}",
2276 | "textDecoration": "{textDecoration.none}"
2277 | },
2278 | "type": "typography"
2279 | },
2280 | "(700) 28px": {
2281 | "value": {
2282 | "fontFamily": "{fontFamilies.inter}",
2283 | "fontWeight": "{fontWeights.inter-0}",
2284 | "lineHeight": "{lineHeights.0}",
2285 | "fontSize": "{fontSize.5}",
2286 | "letterSpacing": "{letterSpacing.0}",
2287 | "paragraphSpacing": "{paragraphSpacing.0}",
2288 | "paragraphIndent": "{paragraphIndent.0}",
2289 | "textCase": "{textCase.none}",
2290 | "textDecoration": "{textDecoration.none}"
2291 | },
2292 | "type": "typography"
2293 | },
2294 | "(600) 24px": {
2295 | "value": {
2296 | "fontFamily": "{fontFamilies.inter}",
2297 | "fontWeight": "{fontWeights.inter-0}",
2298 | "lineHeight": "{lineHeights.0}",
2299 | "fontSize": "{fontSize.4}",
2300 | "letterSpacing": "{letterSpacing.0}",
2301 | "paragraphSpacing": "{paragraphSpacing.0}",
2302 | "paragraphIndent": "{paragraphIndent.0}",
2303 | "textCase": "{textCase.none}",
2304 | "textDecoration": "{textDecoration.none}"
2305 | },
2306 | "type": "typography"
2307 | },
2308 | "(500) 20px": {
2309 | "value": {
2310 | "fontFamily": "{fontFamilies.inter}",
2311 | "fontWeight": "{fontWeights.inter-0}",
2312 | "lineHeight": "{lineHeights.0}",
2313 | "fontSize": "{fontSize.3}",
2314 | "letterSpacing": "{letterSpacing.0}",
2315 | "paragraphSpacing": "{paragraphSpacing.0}",
2316 | "paragraphIndent": "{paragraphIndent.0}",
2317 | "textCase": "{textCase.none}",
2318 | "textDecoration": "{textDecoration.none}"
2319 | },
2320 | "type": "typography"
2321 | }
2322 | },
2323 | "ingress": {
2324 | "(600) 24px": {
2325 | "value": {
2326 | "fontFamily": "{fontFamilies.inter}",
2327 | "fontWeight": "{fontWeights.inter-1}",
2328 | "lineHeight": "{lineHeights.1}",
2329 | "fontSize": "{fontSize.4}",
2330 | "letterSpacing": "{letterSpacing.0}",
2331 | "paragraphSpacing": "{paragraphSpacing.0}",
2332 | "paragraphIndent": "{paragraphIndent.0}",
2333 | "textCase": "{textCase.none}",
2334 | "textDecoration": "{textDecoration.none}"
2335 | },
2336 | "type": "typography"
2337 | },
2338 | "(500) 20px": {
2339 | "value": {
2340 | "fontFamily": "{fontFamilies.inter}",
2341 | "fontWeight": "{fontWeights.inter-1}",
2342 | "lineHeight": "{lineHeights.2}",
2343 | "fontSize": "{fontSize.3}",
2344 | "letterSpacing": "{letterSpacing.0}",
2345 | "paragraphSpacing": "{paragraphSpacing.0}",
2346 | "paragraphIndent": "{paragraphIndent.0}",
2347 | "textCase": "{textCase.none}",
2348 | "textDecoration": "{textDecoration.none}"
2349 | },
2350 | "type": "typography"
2351 | }
2352 | },
2353 | "body": {
2354 | "(400) 18px": {
2355 | "value": {
2356 | "fontFamily": "{fontFamilies.inter}",
2357 | "fontWeight": "{fontWeights.inter-1}",
2358 | "lineHeight": "{lineHeights.3}",
2359 | "fontSize": "{fontSize.2}",
2360 | "letterSpacing": "{letterSpacing.0}",
2361 | "paragraphSpacing": "{paragraphSpacing.0}",
2362 | "paragraphIndent": "{paragraphIndent.0}",
2363 | "textCase": "{textCase.none}",
2364 | "textDecoration": "{textDecoration.none}"
2365 | },
2366 | "type": "typography"
2367 | },
2368 | "(300) 16px": {
2369 | "value": {
2370 | "fontFamily": "{fontFamilies.inter}",
2371 | "fontWeight": "{fontWeights.inter-1}",
2372 | "lineHeight": "{lineHeights.3}",
2373 | "fontSize": "{fontSize.1}",
2374 | "letterSpacing": "{letterSpacing.0}",
2375 | "paragraphSpacing": "{paragraphSpacing.0}",
2376 | "paragraphIndent": "{paragraphIndent.0}",
2377 | "textCase": "{textCase.none}",
2378 | "textDecoration": "{textDecoration.none}"
2379 | },
2380 | "type": "typography"
2381 | }
2382 | },
2383 | "detail": {
2384 | "(200) 14px": {
2385 | "value": {
2386 | "fontFamily": "{fontFamilies.inter}",
2387 | "fontWeight": "{fontWeights.inter-0}",
2388 | "lineHeight": "{lineHeights.0}",
2389 | "fontSize": "{fontSize.0}",
2390 | "letterSpacing": "{letterSpacing.0}",
2391 | "paragraphSpacing": "{paragraphSpacing.0}",
2392 | "paragraphIndent": "{paragraphIndent.0}",
2393 | "textCase": "{textCase.none}",
2394 | "textDecoration": "{textDecoration.none}"
2395 | },
2396 | "type": "typography"
2397 | }
2398 | },
2399 | "label": {
2400 | "(400) 18px": {
2401 | "value": {
2402 | "fontFamily": "{fontFamilies.inter}",
2403 | "fontWeight": "{fontWeights.inter-0}",
2404 | "lineHeight": "{lineHeights.0}",
2405 | "fontSize": "{fontSize.2}",
2406 | "letterSpacing": "{letterSpacing.0}",
2407 | "paragraphSpacing": "{paragraphSpacing.0}",
2408 | "paragraphIndent": "{paragraphIndent.0}",
2409 | "textCase": "{textCase.none}",
2410 | "textDecoration": "{textDecoration.none}"
2411 | },
2412 | "type": "typography"
2413 | },
2414 | "(300) 16px": {
2415 | "value": {
2416 | "fontFamily": "{fontFamilies.inter}",
2417 | "fontWeight": "{fontWeights.inter-0}",
2418 | "lineHeight": "{lineHeights.0}",
2419 | "fontSize": "{fontSize.1}",
2420 | "letterSpacing": "{letterSpacing.0}",
2421 | "paragraphSpacing": "{paragraphSpacing.0}",
2422 | "paragraphIndent": "{paragraphIndent.0}",
2423 | "textCase": "{textCase.none}",
2424 | "textDecoration": "{textDecoration.none}"
2425 | },
2426 | "type": "typography"
2427 | }
2428 | },
2429 | "error_message": {
2430 | "(400) 18px": {
2431 | "value": {
2432 | "fontFamily": "{fontFamilies.inter}",
2433 | "fontWeight": "{fontWeights.inter-1}",
2434 | "lineHeight": "{lineHeights.4}",
2435 | "fontSize": "{fontSize.2}",
2436 | "letterSpacing": "{letterSpacing.1}",
2437 | "paragraphSpacing": "{paragraphSpacing.0}",
2438 | "paragraphIndent": "{paragraphIndent.0}",
2439 | "textCase": "{textCase.none}",
2440 | "textDecoration": "{textDecoration.none}"
2441 | },
2442 | "type": "typography"
2443 | },
2444 | "(300) 16px": {
2445 | "value": {
2446 | "fontFamily": "{fontFamilies.inter}",
2447 | "fontWeight": "{fontWeights.inter-1}",
2448 | "lineHeight": "{lineHeights.4}",
2449 | "fontSize": "{fontSize.1}",
2450 | "letterSpacing": "{letterSpacing.1}",
2451 | "paragraphSpacing": "{paragraphSpacing.0}",
2452 | "paragraphIndent": "{paragraphIndent.0}",
2453 | "textCase": "{textCase.none}",
2454 | "textDecoration": "{textDecoration.none}"
2455 | },
2456 | "type": "typography"
2457 | }
2458 | },
2459 | "textCase": {
2460 | "none": {
2461 | "value": "none",
2462 | "type": "textCase"
2463 | }
2464 | },
2465 | "textDecoration": {
2466 | "none": {
2467 | "value": "none",
2468 | "type": "textDecoration"
2469 | }
2470 | },
2471 | "paragraphIndent": {
2472 | "0": {
2473 | "value": "0px",
2474 | "type": "dimension"
2475 | }
2476 | }
2477 | },
2478 | "Mode/Compact": {
2479 | "font_size": {
2480 | "heading": {
2481 | "h1": {
2482 | "breakpoint_lg": {
2483 | "value": "{font_size.700.breakpoint_lg}",
2484 | "type": "fontSizes"
2485 | }
2486 | }
2487 | }
2488 | }
2489 | },
2490 | "Themes/Tilsynet": {
2491 | "brand": {
2492 | "default": {
2493 | "first": {
2494 | "100": {
2495 | "value": "#efeffb",
2496 | "type": "color"
2497 | },
2498 | "200": {
2499 | "value": "#dedff6",
2500 | "type": "color"
2501 | },
2502 | "300": {
2503 | "value": "#bec0ed",
2504 | "type": "color"
2505 | },
2506 | "400": {
2507 | "value": "#9da0e4",
2508 | "type": "color"
2509 | },
2510 | "500": {
2511 | "value": "#7d81db",
2512 | "type": "color"
2513 | },
2514 | "600": {
2515 | "value": "#5c61d2",
2516 | "type": "color"
2517 | },
2518 | "700": {
2519 | "value": "#3339c6",
2520 | "type": "color"
2521 | },
2522 | "800": {
2523 | "value": "#0008b8",
2524 | "type": "color"
2525 | }
2526 | },
2527 | "second": {
2528 | "100": {
2529 | "value": "#ffeee1",
2530 | "type": "color"
2531 | },
2532 | "200": {
2533 | "value": "#ffdcc3",
2534 | "type": "color"
2535 | },
2536 | "300": {
2537 | "value": "#fdd4b7",
2538 | "type": "color"
2539 | },
2540 | "400": {
2541 | "value": "#ffc296",
2542 | "type": "color"
2543 | },
2544 | "500": {
2545 | "value": "#ffb178",
2546 | "type": "color"
2547 | },
2548 | "600": {
2549 | "value": "#ffa869",
2550 | "type": "color"
2551 | },
2552 | "700": {
2553 | "value": "#e6975f",
2554 | "type": "color"
2555 | },
2556 | "800": {
2557 | "value": "#b3764a",
2558 | "type": "color"
2559 | }
2560 | },
2561 | "third": {
2562 | "100": {
2563 | "value": "#eff6f4",
2564 | "type": "color"
2565 | },
2566 | "200": {
2567 | "value": "#deece9",
2568 | "type": "color"
2569 | },
2570 | "300": {
2571 | "value": "#bedad2",
2572 | "type": "color"
2573 | },
2574 | "400": {
2575 | "value": "#9dc7bc",
2576 | "type": "color"
2577 | },
2578 | "500": {
2579 | "value": "#7db5a5",
2580 | "type": "color"
2581 | },
2582 | "600": {
2583 | "value": "#5ca28f",
2584 | "type": "color"
2585 | },
2586 | "700": {
2587 | "value": "#4c907e",
2588 | "type": "color"
2589 | },
2590 | "800": {
2591 | "value": "#407d6d",
2592 | "type": "color"
2593 | }
2594 | }
2595 | }
2596 | }
2597 | },
2598 | "Themes/Altinn": {},
2599 | "$themes": [
2600 | {
2601 | "id": "edeff752fe55f2581f6ceee82c66aac8b8a8622d",
2602 | "name": "Felles",
2603 | "selectedTokenSets": {
2604 | "Base/Core": "source",
2605 | "Base/Component": "source",
2606 | "Base/Semantic": "source"
2607 | },
2608 | "$figmaStyleReferences": {}
2609 | },
2610 | {
2611 | "id": "3fd3116514764af5cf244506c98e3944ca9f5e93",
2612 | "name": "Felles Compact",
2613 | "selectedTokenSets": {
2614 | "Base/Core": "source",
2615 | "Mode/Compact": "enabled",
2616 | "Base/Component": "source",
2617 | "Base/Semantic": "source"
2618 | },
2619 | "$figmaStyleReferences": {}
2620 | },
2621 | {
2622 | "id": "df8b73b683752ef5f35b3cf293bbe5a0cba9f88d",
2623 | "name": "Altinn",
2624 | "selectedTokenSets": {
2625 | "Base/Core": "source",
2626 | "Themes/Altinn": "enabled",
2627 | "Base/Component": "source",
2628 | "Base/Semantic": "source"
2629 | },
2630 | "$figmaStyleReferences": {}
2631 | }
2632 | ],
2633 | "$metadata": {
2634 | "tokenSetOrder": [
2635 | "Base/Core",
2636 | "Base/Semantic",
2637 | "Base/Component",
2638 | "Mode/Compact",
2639 | "Themes/Tilsynet",
2640 | "Themes/Altinn"
2641 | ]
2642 | }
2643 | }
--------------------------------------------------------------------------------