@altinn/altinn-components 0.12.0 → 0.13.0

package/dist/index.js

@@ -12,10 +12,10 @@ import { BookmarksSection as y } from "./components/Bookmarks/BookmarksSection.j
 import { ButtonBase as S } from "./components/Button/ButtonBase.js";
 import { ButtonLabel as k } from "./components/Button/ButtonLabel.js";
 import { ButtonIcon as h } from "./components/Button/ButtonIcon.js";
-import { Button as C } from "./components/Button/Button.js";
+import { Button as w } from "./components/Button/Button.js";
 import { ComboButton as P } from "./components/Button/ComboButton.js";
 import { IconButton as R } from "./components/Button/IconButton.js";
-import { Byline as O } from "./components/Byline/Byline.js";
+import { Byline as E } from "./components/Byline/Byline.js";
 import { ContextMenu as Q } from "./components/ContextMenu/ContextMenu.js";
 import { Dialog as N } from "./components/Dialog/Dialog.js";
 import { DialogList as q } from "./components/Dialog/DialogList.js";
@@ -38,10 +38,10 @@ import { DialogTransmissions as yo } from "./components/Dialog/DialogTransmissio
 import { DialogTimeline as So } from "./components/Dialog/DialogTimeline.js";
 import { DialogTimelineItem as ko } from "./components/Dialog/DialogTimelineItem.js";
 import { DialogHistory as ho } from "./components/Dialog/DialogHistory.js";
-import { DialogHistoryItem as Co } from "./components/Dialog/DialogHistoryItem.js";
+import { DialogHistoryItem as wo } from "./components/Dialog/DialogHistoryItem.js";
 import { DropdownBase as Po } from "./components/Dropdown/DropdownBase.js";
 import { Backdrop as Ro } from "./components/Dropdown/Backdrop.js";
-import { DrawerBase as Oo } from "./components/Dropdown/DrawerBase.js";
+import { DrawerBase as Eo } from "./components/Dropdown/DrawerBase.js";
 import { DrawerHeader as Qo } from "./components/Dropdown/DrawerHeader.js";
 import { DrawerFooter as No } from "./components/Dropdown/DrawerFooter.js";
 import { DrawerButton as qo } from "./components/Dropdown/DrawerButton.js";
@@ -65,10 +65,10 @@ import { ProgressIcon as yr } from "./components/Icon/ProgressIcon.js";
 import { iconsMap as Sr } from "./components/Icon/iconsMap.js";
 import { LayoutBase as kr } from "./components/Layout/LayoutBase.js";
 import { LayoutBody as hr } from "./components/Layout/LayoutBody.js";
-import { LayoutContent as Cr } from "./components/Layout/LayoutContent.js";
+import { LayoutContent as wr } from "./components/Layout/LayoutContent.js";
 import { LayoutSidebar as Pr } from "./components/Layout/LayoutSidebar.js";
 import { Layout as Rr } from "./components/Layout/Layout.js";
-import { ActionHeader as Or } from "./components/LayoutAction/ActionHeader.js";
+import { ActionHeader as Er } from "./components/LayoutAction/ActionHeader.js";
 import { ActionFooter as Qr } from "./components/LayoutAction/ActionFooter.js";
 import { ActionMenu as Nr } from "./components/LayoutAction/ActionMenu.js";
 import { ListItemBase as qr } from "./components/List/ListItemBase.js";
@@ -91,10 +91,10 @@ import { MenuSearch as Me } from "./components/Menu/MenuSearch.js";
 import { MenuHeader as ye } from "./components/Menu/MenuHeader.js";
 import { MenuItems as Se } from "./components/Menu/MenuItems.js";
 import { MenuBase as ke, MenuList as He, MenuListItem as he } from "./components/Menu/MenuBase.js";
-import { Menu as Ce } from "./components/Menu/Menu.js";
+import { Menu as we } from "./components/Menu/Menu.js";
 import { MetaBase as Pe } from "./components/Meta/MetaBase.js";
 import { MetaList as Re, MetaListItem as Ge } from "./components/Meta/MetaList.js";
-import { MetaItemBase as Ee } from "./components/Meta/MetaItemBase.js";
+import { MetaItemBase as Oe } from "./components/Meta/MetaItemBase.js";
 import { MetaItemMedia as Ke } from "./components/Meta/MetaItemMedia.js";
 import { MetaItemLabel as je } from "./components/Meta/MetaItemLabel.js";
 import { MetaItem as ze } from "./components/Meta/MetaItem.js";
@@ -103,51 +103,51 @@ import { MetaTimestamp as We } from "./components/Meta/MetaTimestamp.js";
 import { RootProvider as Ye, useRootContext as Ze } from "./components/RootProvider/RootProvider.js";
 import { Searchbar as $e } from "./components/Searchbar/Searchbar.js";
 import { Snackbar as rt } from "./components/Snackbar/Snackbar.js";
-import { SnackbarItem as tt } from "./components/Snackbar/SnackbarItem.js";
-import { Skeleton as pt } from "./components/Skeleton/Skeleton.js";
-import { TimelineBase as ft } from "./components/Timeline/TimelineBase.js";
-import { TimelineSection as it } from "./components/Timeline/TimelineSection.js";
-import { Timeline as st } from "./components/Timeline/Timeline.js";
-import { ToolbarBase as lt } from "./components/Toolbar/ToolbarBase.js";
-import { ToolbarButton as Lt } from "./components/Toolbar/ToolbarButton.js";
-import { Toolbar as It } from "./components/Toolbar/Toolbar.js";
-import { ToolbarSearch as dt } from "./components/Toolbar/ToolbarSearch.js";
-import { ToolbarFilter as Mt } from "./components/Toolbar/ToolbarFilter.js";
-import { ToolbarDaterange as yt } from "./components/Toolbar/ToolbarDaterange.js";
-import { PageBase as St } from "./components/Page/PageBase.js";
-import { PageNav as kt } from "./components/Page/PageNav.js";
-import { PageHeader as ht } from "./components/Page/PageHeader.js";
-import { Article as Ct } from "./components/Page/Article.js";
-import { Section as Pt } from "./components/Page/Section.js";
-import { Flex as Rt } from "./components/Page/Flex.js";
+import { SnackbarColorEnum as tt, SnackbarItem as mt } from "./components/Snackbar/SnackbarItem.js";
+import { Skeleton as xt } from "./components/Skeleton/Skeleton.js";
+import { TimelineBase as at } from "./components/Timeline/TimelineBase.js";
+import { TimelineSection as nt } from "./components/Timeline/TimelineSection.js";
+import { Timeline as ut } from "./components/Timeline/Timeline.js";
+import { ToolbarBase as ct } from "./components/Toolbar/ToolbarBase.js";
+import { ToolbarButton as Bt } from "./components/Toolbar/ToolbarButton.js";
+import { Toolbar as gt } from "./components/Toolbar/Toolbar.js";
+import { ToolbarSearch as Dt } from "./components/Toolbar/ToolbarSearch.js";
+import { ToolbarFilter as bt } from "./components/Toolbar/ToolbarFilter.js";
+import { ToolbarDaterange as At } from "./components/Toolbar/ToolbarDaterange.js";
+import { PageBase as Tt } from "./components/Page/PageBase.js";
+import { PageNav as Ht } from "./components/Page/PageNav.js";
+import { PageHeader as Ct } from "./components/Page/PageHeader.js";
+import { Article as Ft } from "./components/Page/Article.js";
+import { Section as vt } from "./components/Page/Section.js";
+import { Flex as Gt } from "./components/Page/Flex.js";
 import { Grid as Ot } from "./components/Page/Grid.js";
-import { Breadcrumbs as Qt } from "./components/Page/Breadcrumbs.js";
-import { BreadcrumbsLink as Nt } from "./components/Page/BreadcrumbsLink.js";
-import { TransmissionItem as qt } from "./components/Transmission/TransmissionItem.js";
-import { TransmissionList as Jt } from "./components/Transmission/TransmissionList.js";
-import { Typography as Vt } from "./components/Typography/Typography.js";
-import { Heading as Xt } from "./components/Typography/Heading.js";
-import { ResourceList as Zt } from "./components/ResourceList/ResourceList.js";
-import { ResourceListItem as $t } from "./components/ResourceList/ResourceListItem.js";
-import { AccessAreaListItem as rm } from "./components/AccessAreaList/AccessAreaListItem.js";
-import { AccessPackageListItem as tm } from "./components/AccessPackageList/AccessPackageListItem.js";
-import { AccessPackageList as pm } from "./components/AccessPackageList/AccessPackageList.js";
-import { FieldBase as fm } from "./components/TextField/FieldBase.js";
-import { InputBase as im } from "./components/TextField/InputBase.js";
-import { TextField as sm } from "./components/TextField/TextField.js";
-import { useClickOutside as lm } from "./hooks/useClickOutside.js";
-import { useEscapeKey as Lm } from "./hooks/useEscapeKey.js";
-import { useMenu as Im } from "./hooks/useMenu.js";
+import { Breadcrumbs as Kt } from "./components/Page/Breadcrumbs.js";
+import { BreadcrumbsLink as jt } from "./components/Page/BreadcrumbsLink.js";
+import { TransmissionItem as zt } from "./components/Transmission/TransmissionItem.js";
+import { TransmissionList as Ut } from "./components/Transmission/TransmissionList.js";
+import { Typography as Wt } from "./components/Typography/Typography.js";
+import { Heading as Yt } from "./components/Typography/Heading.js";
+import { ResourceList as _t } from "./components/ResourceList/ResourceList.js";
+import { ResourceListItem as om } from "./components/ResourceList/ResourceListItem.js";
+import { AccessAreaListItem as em } from "./components/AccessAreaList/AccessAreaListItem.js";
+import { AccessPackageListItem as mm } from "./components/AccessPackageList/AccessPackageListItem.js";
+import { AccessPackageList as xm } from "./components/AccessPackageList/AccessPackageList.js";
+import { FieldBase as am } from "./components/TextField/FieldBase.js";
+import { InputBase as nm } from "./components/TextField/InputBase.js";
+import { TextField as um } from "./components/TextField/TextField.js";
+import { useClickOutside as cm } from "./hooks/useClickOutside.js";
+import { useEscapeKey as Bm } from "./hooks/useEscapeKey.js";
+import { useMenu as gm } from "./hooks/useMenu.js";
 export {
-  rm as AccessAreaListItem,
-  pm as AccessPackageList,
-  tm as AccessPackageListItem,
+  em as AccessAreaListItem,
+  xm as AccessPackageList,
+  mm as AccessPackageListItem,
   rr as AccountButton,
   Zo as AccountMenu,
   Qr as ActionFooter,
-  Or as ActionHeader,
+  Er as ActionHeader,
   Nr as ActionMenu,
-  Ct as Article,
+  Ft as Article,
   e as AttachmentLink,
   m as AttachmentList,
   x as Autocomplete,
@@ -159,13 +159,13 @@ export {
   B as Badge,
   g as BookmarksListItem,
   y as BookmarksSection,
-  Qt as Breadcrumbs,
-  Nt as BreadcrumbsLink,
-  C as Button,
+  Kt as Breadcrumbs,
+  jt as BreadcrumbsLink,
+  w as Button,
   S as ButtonBase,
   h as ButtonIcon,
   k as ButtonLabel,
-  O as Byline,
+  E as Byline,
   dr as CheckboxIcon,
   P as ComboButton,
   Q as ContextMenu,
@@ -177,7 +177,7 @@ export {
   to as DialogContent,
   co as DialogHeading,
   ho as DialogHistory,
-  Co as DialogHistoryItem,
+  wo as DialogHistoryItem,
   go as DialogLabel,
   q as DialogList,
   J as DialogListGroup,
@@ -192,15 +192,15 @@ export {
   ko as DialogTimelineItem,
   Bo as DialogTouchedBy,
   yo as DialogTransmissions,
-  Oo as DrawerBase,
+  Eo as DrawerBase,
   Jo as DrawerBody,
   qo as DrawerButton,
   No as DrawerFooter,
   Qo as DrawerHeader,
   Vo as DrawerOrDropdown,
   Po as DropdownBase,
-  fm as FieldBase,
-  Rt as Flex,
+  am as FieldBase,
+  Gt as Flex,
   Xo as Footer,
   $o as GlobalMenu,
   Ot as Grid,
@@ -208,14 +208,14 @@ export {
   ir as HeaderBase,
   lr as HeaderButton,
   sr as HeaderLogo,
-  Xt as Heading,
+  Yt as Heading,
   Lr as Icon,
   R as IconButton,
-  im as InputBase,
+  nm as InputBase,
   Rr as Layout,
   kr as LayoutBase,
   hr as LayoutBody,
-  Cr as LayoutContent,
+  wr as LayoutContent,
   Pr as LayoutSidebar,
   fe as List,
   pe as ListBase,
@@ -228,7 +228,7 @@ export {
   Zr as ListItemMedia,
   re as ListItemSelect,
   pr as LogoutButton,
-  Ce as Menu,
+  we as Menu,
   ke as MenuBase,
   ye as MenuHeader,
   Ie as MenuInputField,
@@ -243,46 +243,47 @@ export {
   Me as MenuSearch,
   Pe as MetaBase,
   ze as MetaItem,
-  Ee as MetaItemBase,
+  Oe as MetaItemBase,
   je as MetaItemLabel,
   Ke as MetaItemMedia,
   Re as MetaList,
   Ge as MetaListItem,
   Ue as MetaProgress,
   We as MetaTimestamp,
-  St as PageBase,
-  ht as PageHeader,
-  kt as PageNav,
+  Tt as PageBase,
+  Ct as PageHeader,
+  Ht as PageNav,
   yr as ProgressIcon,
   D as QueryItem,
   M as QueryLabel,
   Mr as RadioIcon,
-  Zt as ResourceList,
-  $t as ResourceListItem,
+  _t as ResourceList,
+  om as ResourceListItem,
   Ye as RootProvider,
   n as ScopeListItem,
   $e as Searchbar,
-  Pt as Section,
-  pt as Skeleton,
+  vt as Section,
+  xt as Skeleton,
   rt as Snackbar,
-  tt as SnackbarItem,
+  tt as SnackbarColorEnum,
+  mt as SnackbarItem,
   Ir as SvgIcon,
-  sm as TextField,
-  st as Timeline,
-  ft as TimelineBase,
-  it as TimelineSection,
-  It as Toolbar,
-  lt as ToolbarBase,
-  Lt as ToolbarButton,
-  yt as ToolbarDaterange,
-  Mt as ToolbarFilter,
-  dt as ToolbarSearch,
-  qt as TransmissionItem,
-  Jt as TransmissionList,
-  Vt as Typography,
+  um as TextField,
+  ut as Timeline,
+  at as TimelineBase,
+  nt as TimelineSection,
+  gt as Toolbar,
+  ct as ToolbarBase,
+  Bt as ToolbarButton,
+  At as ToolbarDaterange,
+  bt as ToolbarFilter,
+  Dt as ToolbarSearch,
+  zt as TransmissionItem,
+  Ut as TransmissionList,
+  Wt as Typography,
   Sr as iconsMap,
-  lm as useClickOutside,
-  Lm as useEscapeKey,
-  Im as useMenu,
+  cm as useClickOutside,
+  Bm as useEscapeKey,
+  gm as useMenu,
   Ze as useRootContext
 };

package/dist/tokens/$metadata.json

@@ -0,0 +1,20 @@
+{
+  "tokenSetOrder": [
+    "primitives/globals",
+    "primitives/size/default",
+    "primitives/modes/typography/primary/altinn-ds",
+    "primitives/modes/typography/secondary/altinn-ds",
+    "primitives/modes/color-scheme/light/global",
+    "primitives/modes/color-scheme/light/altinn-ds",
+    "primitives/modes/color-scheme/dark/global",
+    "primitives/modes/color-scheme/dark/altinn-ds",
+    "themes/altinn-ds",
+    "semantic/color",
+    "semantic/modes/main-color/company",
+    "semantic/modes/main-color/person",
+    "semantic/modes/support-color/article",
+    "semantic/modes/support-color/alert",
+    "semantic/style",
+    "Figma/components"
+  ]
+}

package/dist/tokens/$themes.json

@@ -0,0 +1,105 @@
+[
+  {
+    "id": "8b2c8cc86611a34b135cb22948666779361fd729",
+    "name": "Default",
+    "$figmaCollectionId": "VariableCollectionId:36248:20757",
+    "selectedTokenSets": {
+      "primitives/size/default": "enabled"
+    },
+    "group": "Size"
+  },
+  {
+    "id": "84671d12e4ebd199b6140019399a20c77f467c06",
+    "$figmaCollectionId": "VariableCollectionId:36329:62335",
+    "$figmaModeId": "36329:4",
+    "name": "altinn-ds",
+    "selectedTokenSets": {
+      "themes/altinn-ds": "enabled"
+    },
+    "group": "Theme"
+  },
+  {
+    "id": "368d753fcac4455f289500eaa42e70dc0a03522f",
+    "$figmaCollectionId": "VariableCollectionId:36248:20769",
+    "$figmaModeId": "36248:2",
+    "name": "Primary",
+    "selectedTokenSets": {
+      "primitives/modes/typography/primary/altinn-ds": "enabled"
+    },
+    "group": "Typography"
+  },
+  {
+    "id": "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
+    "$figmaCollectionId": "VariableCollectionId:36248:20769",
+    "$figmaModeId": "36248:3",
+    "name": "Secondary",
+    "selectedTokenSets": {
+      "primitives/modes/typography/secondary/altinn-ds": "enabled"
+    },
+    "group": "Typography"
+  },
+  {
+    "name": "Light",
+    "selectedTokenSets": {
+      "primitives/modes/color-scheme/light/global": "enabled",
+      "primitives/modes/color-scheme/light/altinn-ds": "enabled"
+    },
+    "id": "0daa3ca0b427b9349da7e7dc00101b5668972926",
+    "$figmaCollectionId": "VariableCollectionId:34811:5472",
+    "$figmaModeId": "34811:0",
+    "group": "Color scheme"
+  },
+  {
+    "name": "Dark",
+    "selectedTokenSets": {
+      "primitives/modes/color-scheme/dark/global": "enabled",
+      "primitives/modes/color-scheme/dark/altinn-ds": "enabled"
+    },
+    "id": "9ebd8aed52afbffc17e2666e8b4653a53498b257",
+    "$figmaCollectionId": "VariableCollectionId:34811:5472",
+    "$figmaModeId": "34811:1",
+    "group": "Color scheme"
+  },
+  {
+    "id": "541629445ef90ad5363f9e88f52a1ccb617e6f84",
+    "name": "Semantic",
+    "selectedTokenSets": {
+      "semantic/style": "enabled",
+      "semantic/color": "enabled",
+      "primitives/globals": "source"
+    },
+    "group": "Semantic"
+  },
+  {
+    "id": "0691139d34161c26ef170102f77a7362cf9948bf",
+    "name": "company",
+    "selectedTokenSets": {
+      "semantic/modes/main-color/company": "enabled"
+    },
+    "group": "Main color"
+  },
+  {
+    "id": "448ce8eb5c8ffd6b5a6f3d2ef3589cb91176126f",
+    "name": "person",
+    "selectedTokenSets": {
+      "semantic/modes/main-color/person": "enabled"
+    },
+    "group": "Main color"
+  },
+  {
+    "id": "1f3309412540524275b9fe98a04f7113ebeb933a",
+    "name": "article",
+    "selectedTokenSets": {
+      "semantic/modes/support-color/article": "enabled"
+    },
+    "group": "Support color"
+  },
+  {
+    "id": "fa75602e0475bf86dff9856bc0e841c0d08b4a15",
+    "name": "alert",
+    "selectedTokenSets": {
+      "semantic/modes/support-color/alert": "enabled"
+    },
+    "group": "Support color"
+  }
+]

package/dist/tokens/Figma/components.json

@@ -0,0 +1,22 @@
+{
+  "switch": {
+    "circle": {
+      "small": {
+        "$type": "sizing",
+        "$value": "{sizing.5} - {switch.border}"
+      },
+      "medium": {
+        "$type": "sizing",
+        "$value": "{sizing.6} - {switch.border}"
+      },
+      "large": {
+        "$type": "sizing",
+        "$value": "{sizing.7} - {switch.border}"
+      }
+    },
+    "border": {
+      "$type": "sizing",
+      "$value": "4"
+    }
+  }
+}

package/dist/tokens/README.md

@@ -0,0 +1,13 @@
+## Config
+
+https://next.theme.designsystemet.no/themebuilder?appearance=light&name=altinn-ds&main=company%3A%23111d46+person%3A%23084826&neutral=%231e2b3c&support=article%3A%230062ba+alert%3A%23e0304b&border-radius=4
+
+npx @digdir/designsystemet@next tokens create \
+   --main-colors "company:#111d46" "person:#084826"  \
+   --neutral-color "#1e2b3c" \
+   --support-colors "article:#0062ba" "alert:#e02e49"  \
+   --theme "altinn-ds"
+
+## Build colors
+
+npx @digdir/designsystemet@next tokens build

package/dist/tokens/accent.css

@@ -0,0 +1,23 @@
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.color {
+  :root {
+    --ds-color-accent-background-default: var(--ds-color-company-background-default);
+    --ds-color-accent-background-subtle: var(--ds-color-company-background-subtle);
+    --ds-color-accent-surface-default: var(--ds-color-company-surface-default);
+    --ds-color-accent-surface-hover: var(--ds-color-company-surface-hover);
+    --ds-color-accent-surface-active: var(--ds-color-company-surface-active);
+    --ds-color-accent-border-subtle: var(--ds-color-company-border-subtle);
+    --ds-color-accent-border-default: var(--ds-color-company-border-default);
+    --ds-color-accent-border-strong: var(--ds-color-company-border-strong);
+    --ds-color-accent-base-default: var(--ds-color-company-base-default);
+    --ds-color-accent-base-hover: var(--ds-color-company-base-hover);
+    --ds-color-accent-base-active: var(--ds-color-company-base-active);
+    --ds-color-accent-text-subtle: var(--ds-color-company-text-subtle);
+    --ds-color-accent-text-default: var(--ds-color-company-text-default);
+    --ds-color-accent-contrast-default: var(--ds-color-company-contrast-default);
+    --ds-color-accent-contrast-subtle: var(--ds-color-company-contrast-subtle);
+  }
+}

package/dist/tokens/alert.css

@@ -0,0 +1,23 @@
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.color {
+  [data-color="alert"] {
+    --ds-color-background-default: var(--ds-color-alert-background-default);
+    --ds-color-background-subtle: var(--ds-color-alert-background-subtle);
+    --ds-color-surface-default: var(--ds-color-alert-surface-default);
+    --ds-color-surface-hover: var(--ds-color-alert-surface-hover);
+    --ds-color-surface-active: var(--ds-color-alert-surface-active);
+    --ds-color-border-subtle: var(--ds-color-alert-border-subtle);
+    --ds-color-border-default: var(--ds-color-alert-border-default);
+    --ds-color-border-strong: var(--ds-color-alert-border-strong);
+    --ds-color-base-default: var(--ds-color-alert-base-default);
+    --ds-color-base-hover: var(--ds-color-alert-base-hover);
+    --ds-color-base-active: var(--ds-color-alert-base-active);
+    --ds-color-text-subtle: var(--ds-color-alert-text-subtle);
+    --ds-color-text-default: var(--ds-color-alert-text-default);
+    --ds-color-contrast-default: var(--ds-color-alert-contrast-default);
+    --ds-color-contrast-subtle: var(--ds-color-alert-contrast-subtle);
+  }
+}

package/dist/tokens/alert.json

@@ -0,0 +1,66 @@
+{
+  "color": {
+    "support": {
+      "background-default": {
+        "$type": "color",
+        "$value": "{color.alert.background-default}"
+      },
+      "background-subtle": {
+        "$type": "color",
+        "$value": "{color.alert.background-subtle}"
+      },
+      "surface-default": {
+        "$type": "color",
+        "$value": "{color.alert.surface-default}"
+      },
+      "surface-hover": {
+        "$type": "color",
+        "$value": "{color.alert.surface-hover}"
+      },
+      "surface-active": {
+        "$type": "color",
+        "$value": "{color.alert.surface-active}"
+      },
+      "border-subtle": {
+        "$type": "color",
+        "$value": "{color.alert.border-subtle}"
+      },
+      "border-default": {
+        "$type": "color",
+        "$value": "{color.alert.border-default}"
+      },
+      "border-strong": {
+        "$type": "color",
+        "$value": "{color.alert.border-strong}"
+      },
+      "base-default": {
+        "$type": "color",
+        "$value": "{color.alert.base-default}"
+      },
+      "base-hover": {
+        "$type": "color",
+        "$value": "{color.alert.base-hover}"
+      },
+      "base-active": {
+        "$type": "color",
+        "$value": "{color.alert.base-active}"
+      },
+      "text-subtle": {
+        "$type": "color",
+        "$value": "{color.alert.text-subtle}"
+      },
+      "text-default": {
+        "$type": "color",
+        "$value": "{color.alert.text-default}"
+      },
+      "contrast-default": {
+        "$type": "color",
+        "$value": "{color.alert.contrast-default}"
+      },
+      "contrast-subtle": {
+        "$type": "color",
+        "$value": "{color.alert.contrast-subtle}"
+      }
+    }
+  }
+}

package/dist/tokens/altinn-ds/builtin-colors.css

@@ -0,0 +1,87 @@
+@layer ds.theme.color {
+  [data-color="neutral"] {
+    --ds-color-background-default: var(--ds-color-neutral-background-default);
+    --ds-color-background-subtle: var(--ds-color-neutral-background-subtle);
+    --ds-color-surface-default: var(--ds-color-neutral-surface-default);
+    --ds-color-surface-hover: var(--ds-color-neutral-surface-hover);
+    --ds-color-surface-active: var(--ds-color-neutral-surface-active);
+    --ds-color-border-subtle: var(--ds-color-neutral-border-subtle);
+    --ds-color-border-default: var(--ds-color-neutral-border-default);
+    --ds-color-border-strong: var(--ds-color-neutral-border-strong);
+    --ds-color-base-default: var(--ds-color-neutral-base-default);
+    --ds-color-base-hover: var(--ds-color-neutral-base-hover);
+    --ds-color-base-active: var(--ds-color-neutral-base-active);
+    --ds-color-text-subtle: var(--ds-color-neutral-text-subtle);
+    --ds-color-text-default: var(--ds-color-neutral-text-default);
+    --ds-color-contrast-default: var(--ds-color-neutral-contrast-default);
+    --ds-color-contrast-subtle: var(--ds-color-neutral-contrast-subtle);
+  }
+  [data-color="success"] {
+    --ds-color-background-default: var(--ds-color-success-background-default);
+    --ds-color-background-subtle: var(--ds-color-success-background-subtle);
+    --ds-color-surface-default: var(--ds-color-success-surface-default);
+    --ds-color-surface-hover: var(--ds-color-success-surface-hover);
+    --ds-color-surface-active: var(--ds-color-success-surface-active);
+    --ds-color-border-subtle: var(--ds-color-success-border-subtle);
+    --ds-color-border-default: var(--ds-color-success-border-default);
+    --ds-color-border-strong: var(--ds-color-success-border-strong);
+    --ds-color-base-default: var(--ds-color-success-base-default);
+    --ds-color-base-hover: var(--ds-color-success-base-hover);
+    --ds-color-base-active: var(--ds-color-success-base-active);
+    --ds-color-text-subtle: var(--ds-color-success-text-subtle);
+    --ds-color-text-default: var(--ds-color-success-text-default);
+    --ds-color-contrast-default: var(--ds-color-success-contrast-default);
+    --ds-color-contrast-subtle: var(--ds-color-success-contrast-subtle);
+  }
+  [data-color="warning"] {
+    --ds-color-background-default: var(--ds-color-warning-background-default);
+    --ds-color-background-subtle: var(--ds-color-warning-background-subtle);
+    --ds-color-surface-default: var(--ds-color-warning-surface-default);
+    --ds-color-surface-hover: var(--ds-color-warning-surface-hover);
+    --ds-color-surface-active: var(--ds-color-warning-surface-active);
+    --ds-color-border-subtle: var(--ds-color-warning-border-subtle);
+    --ds-color-border-default: var(--ds-color-warning-border-default);
+    --ds-color-border-strong: var(--ds-color-warning-border-strong);
+    --ds-color-base-default: var(--ds-color-warning-base-default);
+    --ds-color-base-hover: var(--ds-color-warning-base-hover);
+    --ds-color-base-active: var(--ds-color-warning-base-active);
+    --ds-color-text-subtle: var(--ds-color-warning-text-subtle);
+    --ds-color-text-default: var(--ds-color-warning-text-default);
+    --ds-color-contrast-default: var(--ds-color-warning-contrast-default);
+    --ds-color-contrast-subtle: var(--ds-color-warning-contrast-subtle);
+  }
+  [data-color="danger"] {
+    --ds-color-background-default: var(--ds-color-danger-background-default);
+    --ds-color-background-subtle: var(--ds-color-danger-background-subtle);
+    --ds-color-surface-default: var(--ds-color-danger-surface-default);
+    --ds-color-surface-hover: var(--ds-color-danger-surface-hover);
+    --ds-color-surface-active: var(--ds-color-danger-surface-active);
+    --ds-color-border-subtle: var(--ds-color-danger-border-subtle);
+    --ds-color-border-default: var(--ds-color-danger-border-default);
+    --ds-color-border-strong: var(--ds-color-danger-border-strong);
+    --ds-color-base-default: var(--ds-color-danger-base-default);
+    --ds-color-base-hover: var(--ds-color-danger-base-hover);
+    --ds-color-base-active: var(--ds-color-danger-base-active);
+    --ds-color-text-subtle: var(--ds-color-danger-text-subtle);
+    --ds-color-text-default: var(--ds-color-danger-text-default);
+    --ds-color-contrast-default: var(--ds-color-danger-contrast-default);
+    --ds-color-contrast-subtle: var(--ds-color-danger-contrast-subtle);
+  }
+  [data-color="info"] {
+    --ds-color-background-default: var(--ds-color-info-background-default);
+    --ds-color-background-subtle: var(--ds-color-info-background-subtle);
+    --ds-color-surface-default: var(--ds-color-info-surface-default);
+    --ds-color-surface-hover: var(--ds-color-info-surface-hover);
+    --ds-color-surface-active: var(--ds-color-info-surface-active);
+    --ds-color-border-subtle: var(--ds-color-info-border-subtle);
+    --ds-color-border-default: var(--ds-color-info-border-default);
+    --ds-color-border-strong: var(--ds-color-info-border-strong);
+    --ds-color-base-default: var(--ds-color-info-base-default);
+    --ds-color-base-hover: var(--ds-color-info-base-hover);
+    --ds-color-base-active: var(--ds-color-info-base-active);
+    --ds-color-text-subtle: var(--ds-color-info-text-subtle);
+    --ds-color-text-default: var(--ds-color-info-text-default);
+    --ds-color-contrast-default: var(--ds-color-info-contrast-default);
+    --ds-color-contrast-subtle: var(--ds-color-info-contrast-subtle);
+  }
+}