@altinn/altinn-components 0.11.0 → 0.13.0

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

@@ -0,0 +1,364 @@
+{
+  "color": {
+    "company": {
+      "1": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.1}"
+      },
+      "2": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.2}"
+      },
+      "3": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.3}"
+      },
+      "4": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.4}"
+      },
+      "5": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.5}"
+      },
+      "6": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.6}"
+      },
+      "7": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.7}"
+      },
+      "8": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.8}"
+      },
+      "9": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.9}"
+      },
+      "10": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.10}"
+      },
+      "11": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.11}"
+      },
+      "12": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.12}"
+      },
+      "13": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.13}"
+      },
+      "contrast-1": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.contrast-1}"
+      },
+      "contrast-2": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.contrast-2}"
+      }
+    },
+    "person": {
+      "1": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.1}"
+      },
+      "2": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.2}"
+      },
+      "3": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.3}"
+      },
+      "4": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.4}"
+      },
+      "5": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.5}"
+      },
+      "6": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.6}"
+      },
+      "7": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.7}"
+      },
+      "8": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.8}"
+      },
+      "9": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.9}"
+      },
+      "10": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.10}"
+      },
+      "11": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.11}"
+      },
+      "12": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.12}"
+      },
+      "13": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.13}"
+      },
+      "contrast-1": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.contrast-1}"
+      },
+      "contrast-2": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.contrast-2}"
+      }
+    },
+    "neutral": {
+      "1": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.1}"
+      },
+      "2": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.2}"
+      },
+      "3": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.3}"
+      },
+      "4": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.4}"
+      },
+      "5": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.5}"
+      },
+      "6": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.6}"
+      },
+      "7": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.7}"
+      },
+      "8": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.8}"
+      },
+      "9": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.9}"
+      },
+      "10": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.10}"
+      },
+      "11": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.11}"
+      },
+      "12": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.12}"
+      },
+      "13": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.13}"
+      },
+      "contrast-1": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.contrast-1}"
+      },
+      "contrast-2": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.contrast-2}"
+      }
+    },
+    "article": {
+      "1": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.1}"
+      },
+      "2": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.2}"
+      },
+      "3": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.3}"
+      },
+      "4": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.4}"
+      },
+      "5": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.5}"
+      },
+      "6": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.6}"
+      },
+      "7": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.7}"
+      },
+      "8": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.8}"
+      },
+      "9": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.9}"
+      },
+      "10": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.10}"
+      },
+      "11": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.11}"
+      },
+      "12": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.12}"
+      },
+      "13": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.13}"
+      },
+      "contrast-1": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.contrast-1}"
+      },
+      "contrast-2": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.contrast-2}"
+      }
+    },
+    "alert": {
+      "1": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.1}"
+      },
+      "2": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.2}"
+      },
+      "3": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.3}"
+      },
+      "4": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.4}"
+      },
+      "5": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.5}"
+      },
+      "6": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.6}"
+      },
+      "7": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.7}"
+      },
+      "8": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.8}"
+      },
+      "9": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.9}"
+      },
+      "10": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.10}"
+      },
+      "11": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.11}"
+      },
+      "12": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.12}"
+      },
+      "13": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.13}"
+      },
+      "contrast-1": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.contrast-1}"
+      },
+      "contrast-2": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.contrast-2}"
+      }
+    }
+  },
+  "font": {
+    "family": {
+      "$type": "fontFamilies",
+      "$value": "{altinn-ds.main}"
+    }
+  },
+  "font-weight": {
+    "medium": {
+      "$type": "fontWeights",
+      "$value": "{altinn-ds.bold}"
+    },
+    "semibold": {
+      "$type": "fontWeights",
+      "$value": "{altinn-ds.extra-bold}"
+    },
+    "regular": {
+      "$type": "fontWeights",
+      "$value": "{altinn-ds.regular}"
+    }
+  },
+  "border-radius": {
+    "1": {
+      "$type": "borderRadius",
+      "$value": "min( {border-radius.base} , {border-radius.scale} *1)"
+    },
+    "2": {
+      "$type": "borderRadius",
+      "$value": "min( {border-radius.base} , {border-radius.scale} *2)"
+    },
+    "3": {
+      "$type": "borderRadius",
+      "$value": "min( {border-radius.base} , {border-radius.scale} *5)"
+    },
+    "4": {
+      "$type": "borderRadius",
+      "$value": "{border-radius.base}"
+    },
+    "5": {
+      "$type": "borderRadius",
+      "$value": "9999"
+    },
+    "base": {
+      "$type": "borderRadius",
+      "$value": "4"
+    },
+    "scale": {
+      "$type": "borderRadius",
+      "$value": "4"
+    }
+  }
+}

package/dist/tokens/design-tokens-build/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);
+  }
+}

package/dist/tokens/design-tokens-build/altinn-ds/color/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/design-tokens-build/altinn-ds/color/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/design-tokens-build/altinn-ds/color/article.css

@@ -0,0 +1,23 @@
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.color {
+  [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-surface-default: var(--ds-color-article-surface-default);
+    --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-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);
+  }
+}

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

@@ -0,0 +1,25 @@
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.color {
+  :root,
+  [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-surface-default: var(--ds-color-company-surface-default);
+    --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-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);
+  }
+}

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

@@ -0,0 +1,23 @@
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.color {
+  [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-surface-default: var(--ds-color-person-surface-default);
+    --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-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);
+  }
+}