@altinn/altinn-components 0.24.6 → 0.24.8

package/dist/tokens/design-tokens/themes/altinn-ds.json

@@ -53,13 +53,17 @@
         "$type": "color",
         "$value": "{altinn-ds.company.13}"
       },
-      "contrast-1": {
+      "14": {
         "$type": "color",
-        "$value": "{altinn-ds.company.contrast-1}"
+        "$value": "{altinn-ds.company.14}"
       },
-      "contrast-2": {
+      "15": {
         "$type": "color",
-        "$value": "{altinn-ds.company.contrast-2}"
+        "$value": "{altinn-ds.company.15}"
+      },
+      "16": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.16}"
       }
     },
     "person": {
@@ -115,13 +119,17 @@
         "$type": "color",
         "$value": "{altinn-ds.person.13}"
       },
-      "contrast-1": {
+      "14": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.14}"
+      },
+      "15": {
         "$type": "color",
-        "$value": "{altinn-ds.person.contrast-1}"
+        "$value": "{altinn-ds.person.15}"
       },
-      "contrast-2": {
+      "16": {
         "$type": "color",
-        "$value": "{altinn-ds.person.contrast-2}"
+        "$value": "{altinn-ds.person.16}"
       }
     },
     "neutral": {
@@ -177,13 +185,17 @@
         "$type": "color",
         "$value": "{altinn-ds.neutral.13}"
       },
-      "contrast-1": {
+      "14": {
         "$type": "color",
-        "$value": "{altinn-ds.neutral.contrast-1}"
+        "$value": "{altinn-ds.neutral.14}"
       },
-      "contrast-2": {
+      "15": {
         "$type": "color",
-        "$value": "{altinn-ds.neutral.contrast-2}"
+        "$value": "{altinn-ds.neutral.15}"
+      },
+      "16": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.16}"
       }
     },
     "article": {
@@ -239,13 +251,17 @@
         "$type": "color",
         "$value": "{altinn-ds.article.13}"
       },
-      "contrast-1": {
+      "14": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.14}"
+      },
+      "15": {
         "$type": "color",
-        "$value": "{altinn-ds.article.contrast-1}"
+        "$value": "{altinn-ds.article.15}"
       },
-      "contrast-2": {
+      "16": {
         "$type": "color",
-        "$value": "{altinn-ds.article.contrast-2}"
+        "$value": "{altinn-ds.article.16}"
       }
     },
     "alert": {
@@ -301,63 +317,69 @@
         "$type": "color",
         "$value": "{altinn-ds.alert.13}"
       },
-      "contrast-1": {
+      "14": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.14}"
+      },
+      "15": {
         "$type": "color",
-        "$value": "{altinn-ds.alert.contrast-1}"
+        "$value": "{altinn-ds.alert.15}"
       },
-      "contrast-2": {
+      "16": {
         "$type": "color",
-        "$value": "{altinn-ds.alert.contrast-2}"
+        "$value": "{altinn-ds.alert.16}"
       }
     }
   },
-  "font": {
-    "family": {
-      "$type": "fontFamilies",
-      "$value": "{altinn-ds.main}"
-    }
+  "font-family": {
+    "$type": "fontFamilies",
+    "$value": "{altinn-ds.font-family}"
   },
   "font-weight": {
     "medium": {
       "$type": "fontWeights",
-      "$value": "{altinn-ds.bold}"
+      "$value": "{altinn-ds.font-weight.medium}"
     },
     "semibold": {
       "$type": "fontWeights",
-      "$value": "{altinn-ds.extra-bold}"
+      "$value": "{altinn-ds.font-weight.semibold}"
     },
     "regular": {
       "$type": "fontWeights",
-      "$value": "{altinn-ds.regular}"
+      "$value": "{altinn-ds.font-weight.regular}"
     }
   },
   "border-radius": {
     "1": {
-      "$type": "borderRadius",
-      "$value": "min( {border-radius.base} , {border-radius.scale} *1)"
+      "$type": "dimension",
+      "$value": "min({border-radius.base}*0.5,{border-radius.scale})"
     },
     "2": {
-      "$type": "borderRadius",
-      "$value": "min( {border-radius.base} , {border-radius.scale} *2)"
+      "$type": "dimension",
+      "$value": "min({border-radius.base},{border-radius.scale}*2)"
     },
     "3": {
-      "$type": "borderRadius",
-      "$value": "min( {border-radius.base} , {border-radius.scale} *5)"
+      "$type": "dimension",
+      "$value": "min({border-radius.base}*2,{border-radius.scale}*5)"
     },
     "4": {
-      "$type": "borderRadius",
-      "$value": "{border-radius.base}"
+      "$type": "dimension",
+      "$value": "min({border-radius.base}*3,{border-radius.scale}*7)"
     },
     "5": {
-      "$type": "borderRadius",
+      "$type": "dimension",
+      "$value": "{border-radius.base}"
+    },
+    "6": {
+      "$type": "dimension",
       "$value": "9999"
     },
     "base": {
-      "$type": "borderRadius",
+      "$type": "dimension",
       "$value": "4"
     },
     "scale": {
-      "$type": "borderRadius",
+      "$type": "dimension",
       "$value": "4"
     }
   }

package/dist/tokens/design-tokens-build/altinn-ds/color/alert.css

@@ -3,21 +3,23 @@
  */
 
 @layer ds.theme.color {
-  [data-color="alert"] {
+  [data-color="alert"],
+  [data-color-scheme][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-background-tinted: var(--ds-color-alert-background-tinted);
     --ds-color-surface-default: var(--ds-color-alert-surface-default);
+    --ds-color-surface-tinted: var(--ds-color-alert-surface-tinted);
     --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-text-subtle: var(--ds-color-alert-text-subtle);
+    --ds-color-text-default: var(--ds-color-alert-text-default);
     --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);
+    --ds-color-base-contrast-subtle: var(--ds-color-alert-base-contrast-subtle);
+    --ds-color-base-contrast-default: var(--ds-color-alert-base-contrast-default);
   }
 }

package/dist/tokens/design-tokens-build/altinn-ds/color/article.css

@@ -3,21 +3,23 @@
  */
 
 @layer ds.theme.color {
-  [data-color="article"] {
+  [data-color="article"],
+  [data-color-scheme][data-color="article"] {
     --ds-color-background-default: var(--ds-color-article-background-default);
-    --ds-color-background-subtle: var(--ds-color-article-background-subtle);
+    --ds-color-background-tinted: var(--ds-color-article-background-tinted);
     --ds-color-surface-default: var(--ds-color-article-surface-default);
+    --ds-color-surface-tinted: var(--ds-color-article-surface-tinted);
     --ds-color-surface-hover: var(--ds-color-article-surface-hover);
     --ds-color-surface-active: var(--ds-color-article-surface-active);
     --ds-color-border-subtle: var(--ds-color-article-border-subtle);
     --ds-color-border-default: var(--ds-color-article-border-default);
     --ds-color-border-strong: var(--ds-color-article-border-strong);
+    --ds-color-text-subtle: var(--ds-color-article-text-subtle);
+    --ds-color-text-default: var(--ds-color-article-text-default);
     --ds-color-base-default: var(--ds-color-article-base-default);
     --ds-color-base-hover: var(--ds-color-article-base-hover);
     --ds-color-base-active: var(--ds-color-article-base-active);
-    --ds-color-text-subtle: var(--ds-color-article-text-subtle);
-    --ds-color-text-default: var(--ds-color-article-text-default);
-    --ds-color-contrast-default: var(--ds-color-article-contrast-default);
-    --ds-color-contrast-subtle: var(--ds-color-article-contrast-subtle);
+    --ds-color-base-contrast-subtle: var(--ds-color-article-base-contrast-subtle);
+    --ds-color-base-contrast-default: var(--ds-color-article-base-contrast-default);
   }
 }

package/dist/tokens/design-tokens-build/altinn-ds/color/company.css

@@ -7,19 +7,20 @@
   [data-color-scheme],
   [data-color="company"] {
     --ds-color-background-default: var(--ds-color-company-background-default);
-    --ds-color-background-subtle: var(--ds-color-company-background-subtle);
+    --ds-color-background-tinted: var(--ds-color-company-background-tinted);
     --ds-color-surface-default: var(--ds-color-company-surface-default);
+    --ds-color-surface-tinted: var(--ds-color-company-surface-tinted);
     --ds-color-surface-hover: var(--ds-color-company-surface-hover);
     --ds-color-surface-active: var(--ds-color-company-surface-active);
     --ds-color-border-subtle: var(--ds-color-company-border-subtle);
     --ds-color-border-default: var(--ds-color-company-border-default);
     --ds-color-border-strong: var(--ds-color-company-border-strong);
+    --ds-color-text-subtle: var(--ds-color-company-text-subtle);
+    --ds-color-text-default: var(--ds-color-company-text-default);
     --ds-color-base-default: var(--ds-color-company-base-default);
     --ds-color-base-hover: var(--ds-color-company-base-hover);
     --ds-color-base-active: var(--ds-color-company-base-active);
-    --ds-color-text-subtle: var(--ds-color-company-text-subtle);
-    --ds-color-text-default: var(--ds-color-company-text-default);
-    --ds-color-contrast-default: var(--ds-color-company-contrast-default);
-    --ds-color-contrast-subtle: var(--ds-color-company-contrast-subtle);
+    --ds-color-base-contrast-subtle: var(--ds-color-company-base-contrast-subtle);
+    --ds-color-base-contrast-default: var(--ds-color-company-base-contrast-default);
   }
 }

package/dist/tokens/design-tokens-build/altinn-ds/color/danger.css

@@ -0,0 +1,25 @@
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.color {
+  [data-color="danger"],
+  [data-color-scheme][data-color="danger"] {
+    --ds-color-background-default: var(--ds-color-danger-background-default);
+    --ds-color-background-tinted: var(--ds-color-danger-background-tinted);
+    --ds-color-surface-default: var(--ds-color-danger-surface-default);
+    --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted);
+    --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-text-subtle: var(--ds-color-danger-text-subtle);
+    --ds-color-text-default: var(--ds-color-danger-text-default);
+    --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-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle);
+    --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default);
+  }
+}

package/dist/tokens/design-tokens-build/altinn-ds/color/info.css

@@ -0,0 +1,25 @@
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.color {
+  [data-color="info"],
+  [data-color-scheme][data-color="info"] {
+    --ds-color-background-default: var(--ds-color-info-background-default);
+    --ds-color-background-tinted: var(--ds-color-info-background-tinted);
+    --ds-color-surface-default: var(--ds-color-info-surface-default);
+    --ds-color-surface-tinted: var(--ds-color-info-surface-tinted);
+    --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-text-subtle: var(--ds-color-info-text-subtle);
+    --ds-color-text-default: var(--ds-color-info-text-default);
+    --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-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle);
+    --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default);
+  }
+}

package/dist/tokens/design-tokens-build/altinn-ds/color/neutral.css

@@ -0,0 +1,25 @@
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.color {
+  [data-color="neutral"],
+  [data-color-scheme][data-color="neutral"] {
+    --ds-color-background-default: var(--ds-color-neutral-background-default);
+    --ds-color-background-tinted: var(--ds-color-neutral-background-tinted);
+    --ds-color-surface-default: var(--ds-color-neutral-surface-default);
+    --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted);
+    --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-text-subtle: var(--ds-color-neutral-text-subtle);
+    --ds-color-text-default: var(--ds-color-neutral-text-default);
+    --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-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle);
+    --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default);
+  }
+}

package/dist/tokens/design-tokens-build/altinn-ds/color/person.css

@@ -3,21 +3,23 @@
  */
 
 @layer ds.theme.color {
-  [data-color="person"] {
+  [data-color="person"],
+  [data-color-scheme][data-color="person"] {
     --ds-color-background-default: var(--ds-color-person-background-default);
-    --ds-color-background-subtle: var(--ds-color-person-background-subtle);
+    --ds-color-background-tinted: var(--ds-color-person-background-tinted);
     --ds-color-surface-default: var(--ds-color-person-surface-default);
+    --ds-color-surface-tinted: var(--ds-color-person-surface-tinted);
     --ds-color-surface-hover: var(--ds-color-person-surface-hover);
     --ds-color-surface-active: var(--ds-color-person-surface-active);
     --ds-color-border-subtle: var(--ds-color-person-border-subtle);
     --ds-color-border-default: var(--ds-color-person-border-default);
     --ds-color-border-strong: var(--ds-color-person-border-strong);
+    --ds-color-text-subtle: var(--ds-color-person-text-subtle);
+    --ds-color-text-default: var(--ds-color-person-text-default);
     --ds-color-base-default: var(--ds-color-person-base-default);
     --ds-color-base-hover: var(--ds-color-person-base-hover);
     --ds-color-base-active: var(--ds-color-person-base-active);
-    --ds-color-text-subtle: var(--ds-color-person-text-subtle);
-    --ds-color-text-default: var(--ds-color-person-text-default);
-    --ds-color-contrast-default: var(--ds-color-person-contrast-default);
-    --ds-color-contrast-subtle: var(--ds-color-person-contrast-subtle);
+    --ds-color-base-contrast-subtle: var(--ds-color-person-base-contrast-subtle);
+    --ds-color-base-contrast-default: var(--ds-color-person-base-contrast-default);
   }
 }

package/dist/tokens/design-tokens-build/altinn-ds/color/success.css

@@ -0,0 +1,25 @@
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.color {
+  [data-color="success"],
+  [data-color-scheme][data-color="success"] {
+    --ds-color-background-default: var(--ds-color-success-background-default);
+    --ds-color-background-tinted: var(--ds-color-success-background-tinted);
+    --ds-color-surface-default: var(--ds-color-success-surface-default);
+    --ds-color-surface-tinted: var(--ds-color-success-surface-tinted);
+    --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-text-subtle: var(--ds-color-success-text-subtle);
+    --ds-color-text-default: var(--ds-color-success-text-default);
+    --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-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle);
+    --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default);
+  }
+}

package/dist/tokens/design-tokens-build/altinn-ds/color/warning.css

@@ -0,0 +1,25 @@
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.color {
+  [data-color="warning"],
+  [data-color-scheme][data-color="warning"] {
+    --ds-color-background-default: var(--ds-color-warning-background-default);
+    --ds-color-background-tinted: var(--ds-color-warning-background-tinted);
+    --ds-color-surface-default: var(--ds-color-warning-surface-default);
+    --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted);
+    --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-text-subtle: var(--ds-color-warning-text-subtle);
+    --ds-color-text-default: var(--ds-color-warning-text-default);
+    --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-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle);
+    --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default);
+  }
+}