@navikt/ds-tokens 7.12.2 → 7.13.0

package/dist/darkside/tokens-cjs.js

@@ -140,46 +140,46 @@ module.exports = {
   "TextNeutral": "var(--ax-text-neutral)",
   "TextNeutralSubtle": "var(--ax-text-neutral-subtle)",
   "TextNeutralIcon": "var(--ax-text-neutral-icon)",
+  "TextNeutralContrast": "var(--ax-text-neutral-contrast)",
   "TextAccent": "var(--ax-text-accent)",
   "TextAccentSubtle": "var(--ax-text-accent-subtle)",
   "TextAccentIcon": "var(--ax-text-accent-icon)",
+  "TextAccentContrast": "var(--ax-text-accent-contrast)",
   "TextSuccess": "var(--ax-text-success)",
   "TextSuccessSubtle": "var(--ax-text-success-subtle)",
   "TextSuccessIcon": "var(--ax-text-success-icon)",
+  "TextSuccessContrast": "var(--ax-text-success-contrast)",
   "TextWarning": "var(--ax-text-warning)",
   "TextWarningSubtle": "var(--ax-text-warning-subtle)",
   "TextWarningIcon": "var(--ax-text-warning-icon)",
+  "TextWarningContrast": "var(--ax-text-warning-contrast)",
   "TextDanger": "var(--ax-text-danger)",
   "TextDangerSubtle": "var(--ax-text-danger-subtle)",
   "TextDangerIcon": "var(--ax-text-danger-icon)",
+  "TextDangerContrast": "var(--ax-text-danger-contrast)",
   "TextInfo": "var(--ax-text-info)",
   "TextInfoSubtle": "var(--ax-text-info-subtle)",
   "TextInfoIcon": "var(--ax-text-info-icon)",
+  "TextInfoContrast": "var(--ax-text-info-contrast)",
   "TextBrandMagenta": "var(--ax-text-brand-magenta)",
   "TextBrandMagentaSubtle": "var(--ax-text-brand-magenta-subtle)",
   "TextBrandMagentaIcon": "var(--ax-text-brand-magenta-icon)",
+  "TextBrandMagentaContrast": "var(--ax-text-brand-magenta-contrast)",
   "TextBrandBeige": "var(--ax-text-brand-beige)",
   "TextBrandBeigeSubtle": "var(--ax-text-brand-beige-subtle)",
   "TextBrandBeigeIcon": "var(--ax-text-brand-beige-icon)",
+  "TextBrandBeigeContrast": "var(--ax-text-brand-beige-contrast)",
   "TextBrandBlue": "var(--ax-text-brand-blue)",
   "TextBrandBlueSubtle": "var(--ax-text-brand-blue-subtle)",
   "TextBrandBlueIcon": "var(--ax-text-brand-blue-icon)",
+  "TextBrandBlueContrast": "var(--ax-text-brand-blue-contrast)",
   "TextMetaPurple": "var(--ax-text-meta-purple)",
   "TextMetaPurpleSubtle": "var(--ax-text-meta-purple-subtle)",
   "TextMetaPurpleIcon": "var(--ax-text-meta-purple-icon)",
+  "TextMetaPurpleContrast": "var(--ax-text-meta-purple-contrast)",
   "TextMetaLime": "var(--ax-text-meta-lime)",
   "TextMetaLimeSubtle": "var(--ax-text-meta-lime-subtle)",
   "TextMetaLimeIcon": "var(--ax-text-meta-lime-icon)",
-  "TextNeutralContrast": "var(--ax-text-neutral-contrast)",
-  "TextAccentContrast": "var(--ax-text-accent-contrast)",
-  "TextDangerContrast": "var(--ax-text-danger-contrast)",
-  "TextInfoContrast": "var(--ax-text-info-contrast)",
-  "TextSuccessContrast": "var(--ax-text-success-contrast)",
-  "TextWarningContrast": "var(--ax-text-warning-contrast)",
-  "TextBrandMagentaContrast": "var(--ax-text-brand-magenta-contrast)",
-  "TextBrandBeigeContrast": "var(--ax-text-brand-beige-contrast)",
-  "TextBrandBlueContrast": "var(--ax-text-brand-blue-contrast)",
-  "TextMetaPurpleContrast": "var(--ax-text-meta-purple-contrast)",
   "TextMetaLimeContrast": "var(--ax-text-meta-lime-contrast)",
   "TextLogo": "var(--ax-text-logo)",
   "BorderNeutral": "var(--ax-border-neutral)",

package/dist/darkside/tokens.css

@@ -1,4 +1,4 @@
-:root, :host, .light, .light-theme {
+:root, :host, .light {
   --ax-meta-lime-400A: #d0dc00;
   --ax-meta-lime-300A: #cadf0094;
   --ax-meta-lime-200A: #c4df0056;
@@ -154,227 +154,9 @@
   --ax-neutral-300: #e1e3e7;
   --ax-neutral-200: #ecedef;
   --ax-neutral-100: #f5f6f7;
-  --ax-text-logo: #c30000;
-  --ax-bg-overlay: #0214317d;
-  --ax-bg-input: #ffffffd9;
-  --ax-bg-default: #fff;
-  --ax-opacity-disabled: .3;
-  --ax-shadow-dialog: 0px 4px 6px 0px #00000026, 0px 1px 3px -1px #00000026, 0px 1px 1px 0px #0000000f;
-  --ax-border-focus: var(--ax-neutral-1000);
-  --ax-border-meta-lime-strong: var(--ax-meta-lime-700);
-  --ax-border-meta-lime-subtleA: var(--ax-meta-lime-400A);
-  --ax-border-meta-lime-subtle: var(--ax-meta-lime-400);
-  --ax-border-meta-lime: var(--ax-meta-lime-600);
-  --ax-border-meta-purple-strong: var(--ax-meta-purple-700);
-  --ax-border-meta-purple-subtleA: var(--ax-meta-purple-400A);
-  --ax-border-meta-purple-subtle: var(--ax-meta-purple-400);
-  --ax-border-meta-purple: var(--ax-meta-purple-600);
-  --ax-border-brand-blue-strong: var(--ax-brand-blue-700);
-  --ax-border-brand-blue-subtleA: var(--ax-brand-blue-400A);
-  --ax-border-brand-blue-subtle: var(--ax-brand-blue-400);
-  --ax-border-brand-blue: var(--ax-brand-blue-600);
-  --ax-border-brand-beige-strong: var(--ax-brand-beige-700);
-  --ax-border-brand-beige-subtleA: var(--ax-brand-beige-400A);
-  --ax-border-brand-beige-subtle: var(--ax-brand-beige-400);
-  --ax-border-brand-beige: var(--ax-brand-beige-600);
-  --ax-border-brand-magenta-strong: var(--ax-brand-magenta-700);
-  --ax-border-brand-magenta-subtleA: var(--ax-brand-magenta-400A);
-  --ax-border-brand-magenta-subtle: var(--ax-brand-magenta-400);
-  --ax-border-brand-magenta: var(--ax-brand-magenta-600);
-  --ax-border-info-strong: var(--ax-info-700);
-  --ax-border-info-subtleA: var(--ax-info-400A);
-  --ax-border-info-subtle: var(--ax-info-400);
-  --ax-border-info: var(--ax-info-600);
-  --ax-border-danger-strong: var(--ax-danger-700);
-  --ax-border-danger-subtleA: var(--ax-danger-400A);
-  --ax-border-danger-subtle: var(--ax-danger-400);
-  --ax-border-danger: var(--ax-danger-600);
-  --ax-border-warning-strong: var(--ax-warning-700);
-  --ax-border-warning-subtleA: var(--ax-warning-400A);
-  --ax-border-warning-subtle: var(--ax-warning-400);
-  --ax-border-warning: var(--ax-warning-600);
-  --ax-border-success-strong: var(--ax-success-700);
-  --ax-border-success-subtleA: var(--ax-success-400A);
-  --ax-border-success-subtle: var(--ax-success-400);
-  --ax-border-success: var(--ax-success-600);
-  --ax-border-accent-strong: var(--ax-accent-700);
-  --ax-border-accent-subtleA: var(--ax-accent-400A);
-  --ax-border-accent-subtle: var(--ax-accent-400);
-  --ax-border-accent: var(--ax-accent-600);
-  --ax-border-neutral-strong: var(--ax-neutral-700);
-  --ax-border-neutral-subtleA: var(--ax-neutral-400A);
-  --ax-border-neutral-subtle: var(--ax-neutral-400);
-  --ax-border-neutral: var(--ax-neutral-600);
-  --ax-text-meta-lime-contrast: var(--ax-neutral-000);
-  --ax-text-meta-purple-contrast: var(--ax-neutral-000);
-  --ax-text-brand-blue-contrast: var(--ax-neutral-000);
-  --ax-text-brand-beige-contrast: var(--ax-neutral-000);
-  --ax-text-brand-magenta-contrast: var(--ax-neutral-000);
-  --ax-text-warning-contrast: var(--ax-neutral-000);
-  --ax-text-success-contrast: var(--ax-neutral-000);
-  --ax-text-info-contrast: var(--ax-neutral-000);
-  --ax-text-danger-contrast: var(--ax-neutral-000);
-  --ax-text-accent-contrast: var(--ax-neutral-000);
-  --ax-text-neutral-contrast: var(--ax-neutral-000);
-  --ax-text-meta-lime-icon: var(--ax-meta-lime-600);
-  --ax-text-meta-lime-subtle: var(--ax-meta-lime-800);
-  --ax-text-meta-lime: var(--ax-meta-lime-1000);
-  --ax-text-meta-purple-icon: var(--ax-meta-purple-600);
-  --ax-text-meta-purple-subtle: var(--ax-meta-purple-800);
-  --ax-text-meta-purple: var(--ax-meta-purple-1000);
-  --ax-text-brand-blue-icon: var(--ax-brand-blue-600);
-  --ax-text-brand-blue-subtle: var(--ax-brand-blue-800);
-  --ax-text-brand-blue: var(--ax-brand-blue-1000);
-  --ax-text-brand-beige-icon: var(--ax-brand-beige-600);
-  --ax-text-brand-beige-subtle: var(--ax-brand-beige-800);
-  --ax-text-brand-beige: var(--ax-brand-beige-1000);
-  --ax-text-brand-magenta-icon: var(--ax-brand-magenta-600);
-  --ax-text-brand-magenta-subtle: var(--ax-brand-magenta-800);
-  --ax-text-brand-magenta: var(--ax-brand-magenta-1000);
-  --ax-text-info-icon: var(--ax-info-600);
-  --ax-text-info-subtle: var(--ax-info-800);
-  --ax-text-info: var(--ax-info-1000);
-  --ax-text-danger-icon: var(--ax-danger-600);
-  --ax-text-danger-subtle: var(--ax-danger-800);
-  --ax-text-danger: var(--ax-danger-1000);
-  --ax-text-warning-icon: var(--ax-warning-600);
-  --ax-text-warning-subtle: var(--ax-warning-800);
-  --ax-text-warning: var(--ax-warning-1000);
-  --ax-text-success-icon: var(--ax-success-600);
-  --ax-text-success-subtle: var(--ax-success-800);
-  --ax-text-success: var(--ax-success-1000);
-  --ax-text-accent-icon: var(--ax-accent-600);
-  --ax-text-accent-subtle: var(--ax-accent-800);
-  --ax-text-accent: var(--ax-accent-1000);
-  --ax-text-neutral-icon: var(--ax-neutral-600);
-  --ax-text-neutral-subtle: var(--ax-neutral-900);
-  --ax-text-neutral: var(--ax-neutral-1000);
-  --ax-bg-sunken: var(--ax-neutral-200);
-  --ax-bg-raised: var(--ax-neutral-000);
-  --ax-bg-meta-lime-strong-pressed: var(--ax-meta-lime-800);
-  --ax-bg-meta-lime-strong-hover: var(--ax-meta-lime-700);
-  --ax-bg-meta-lime-strong: var(--ax-meta-lime-600);
-  --ax-bg-meta-lime-moderate-pressedA: var(--ax-meta-lime-400A);
-  --ax-bg-meta-lime-moderate-pressed: var(--ax-meta-lime-400);
-  --ax-bg-meta-lime-moderate-hoverA: var(--ax-meta-lime-300A);
-  --ax-bg-meta-lime-moderate-hover: var(--ax-meta-lime-300);
-  --ax-bg-meta-lime-moderateA: var(--ax-meta-lime-200A);
-  --ax-bg-meta-lime-moderate: var(--ax-meta-lime-200);
-  --ax-bg-meta-lime-softA: var(--ax-meta-lime-100A);
-  --ax-bg-meta-lime-soft: var(--ax-meta-lime-100);
-  --ax-bg-meta-purple-strong-pressed: var(--ax-meta-purple-800);
-  --ax-bg-meta-purple-strong-hover: var(--ax-meta-purple-700);
-  --ax-bg-meta-purple-strong: var(--ax-meta-purple-600);
-  --ax-bg-meta-purple-moderate-pressedA: var(--ax-meta-purple-400A);
-  --ax-bg-meta-purple-moderate-pressed: var(--ax-meta-purple-400);
-  --ax-bg-meta-purple-moderate-hoverA: var(--ax-meta-purple-300A);
-  --ax-bg-meta-purple-moderate-hover: var(--ax-meta-purple-300);
-  --ax-bg-meta-purple-moderateA: var(--ax-meta-purple-200A);
-  --ax-bg-meta-purple-moderate: var(--ax-meta-purple-200);
-  --ax-bg-meta-purple-softA: var(--ax-meta-purple-100A);
-  --ax-bg-meta-purple-soft: var(--ax-meta-purple-100);
-  --ax-bg-brand-blue-strong-pressed: var(--ax-brand-blue-800);
-  --ax-bg-brand-blue-strong-hover: var(--ax-brand-blue-700);
-  --ax-bg-brand-blue-strong: var(--ax-brand-blue-600);
-  --ax-bg-brand-blue-moderate-pressedA: var(--ax-brand-blue-400A);
-  --ax-bg-brand-blue-moderate-pressed: var(--ax-brand-blue-400);
-  --ax-bg-brand-blue-moderate-hoverA: var(--ax-brand-blue-300A);
-  --ax-bg-brand-blue-moderate-hover: var(--ax-brand-blue-300);
-  --ax-bg-brand-blue-moderateA: var(--ax-brand-blue-200A);
-  --ax-bg-brand-blue-moderate: var(--ax-brand-blue-200);
-  --ax-bg-brand-blue-softA: var(--ax-brand-blue-100A);
-  --ax-bg-brand-blue-soft: var(--ax-brand-blue-100);
-  --ax-bg-brand-beige-strong-pressed: var(--ax-brand-beige-800);
-  --ax-bg-brand-beige-strong-hover: var(--ax-brand-beige-700);
-  --ax-bg-brand-beige-strong: var(--ax-brand-beige-600);
-  --ax-bg-brand-beige-moderate-pressedA: var(--ax-brand-beige-400A);
-  --ax-bg-brand-beige-moderate-pressed: var(--ax-brand-beige-400);
-  --ax-bg-brand-beige-moderate-hoverA: var(--ax-brand-beige-300A);
-  --ax-bg-brand-beige-moderate-hover: var(--ax-brand-beige-300);
-  --ax-bg-brand-beige-moderateA: var(--ax-brand-beige-200A);
-  --ax-bg-brand-beige-moderate: var(--ax-brand-beige-200);
-  --ax-bg-brand-beige-softA: var(--ax-brand-beige-100A);
-  --ax-bg-brand-beige-soft: var(--ax-brand-beige-100);
-  --ax-bg-brand-magenta-strong-pressed: var(--ax-brand-magenta-800);
-  --ax-bg-brand-magenta-strong-hover: var(--ax-brand-magenta-700);
-  --ax-bg-brand-magenta-strong: var(--ax-brand-magenta-600);
-  --ax-bg-brand-magenta-moderate-pressedA: var(--ax-brand-magenta-400A);
-  --ax-bg-brand-magenta-moderate-pressed: var(--ax-brand-magenta-400);
-  --ax-bg-brand-magenta-moderate-hoverA: var(--ax-brand-magenta-300A);
-  --ax-bg-brand-magenta-moderate-hover: var(--ax-brand-magenta-300);
-  --ax-bg-brand-magenta-moderateA: var(--ax-brand-magenta-200A);
-  --ax-bg-brand-magenta-moderate: var(--ax-brand-magenta-200);
-  --ax-bg-brand-magenta-softA: var(--ax-brand-magenta-100A);
-  --ax-bg-brand-magenta-soft: var(--ax-brand-magenta-100);
-  --ax-bg-info-strong-pressed: var(--ax-info-800);
-  --ax-bg-info-strong-hover: var(--ax-info-700);
-  --ax-bg-info-strong: var(--ax-info-600);
-  --ax-bg-info-moderate-pressedA: var(--ax-info-400A);
-  --ax-bg-info-moderate-pressed: var(--ax-info-400);
-  --ax-bg-info-moderate-hoverA: var(--ax-info-300A);
-  --ax-bg-info-moderate-hover: var(--ax-info-300);
-  --ax-bg-info-moderateA: var(--ax-info-200A);
-  --ax-bg-info-moderate: var(--ax-info-200);
-  --ax-bg-info-softA: var(--ax-info-100A);
-  --ax-bg-info-soft: var(--ax-info-100);
-  --ax-bg-danger-strong-pressed: var(--ax-danger-800);
-  --ax-bg-danger-strong-hover: var(--ax-danger-700);
-  --ax-bg-danger-strong: var(--ax-danger-600);
-  --ax-bg-danger-moderate-pressedA: var(--ax-danger-400A);
-  --ax-bg-danger-moderate-pressed: var(--ax-danger-400);
-  --ax-bg-danger-moderate-hoverA: var(--ax-danger-300A);
-  --ax-bg-danger-moderate-hover: var(--ax-danger-300);
-  --ax-bg-danger-moderateA: var(--ax-danger-200A);
-  --ax-bg-danger-moderate: var(--ax-danger-200);
-  --ax-bg-danger-softA: var(--ax-danger-100A);
-  --ax-bg-danger-soft: var(--ax-danger-100);
-  --ax-bg-warning-strong-pressed: var(--ax-warning-800);
-  --ax-bg-warning-strong-hover: var(--ax-warning-700);
-  --ax-bg-warning-strong: var(--ax-warning-600);
-  --ax-bg-warning-moderate-pressedA: var(--ax-warning-400A);
-  --ax-bg-warning-moderate-pressed: var(--ax-warning-400);
-  --ax-bg-warning-moderate-hoverA: var(--ax-warning-300A);
-  --ax-bg-warning-moderate-hover: var(--ax-warning-300);
-  --ax-bg-warning-moderateA: var(--ax-warning-200A);
-  --ax-bg-warning-moderate: var(--ax-warning-200);
-  --ax-bg-warning-softA: var(--ax-warning-100A);
-  --ax-bg-warning-soft: var(--ax-warning-100);
-  --ax-bg-success-strong-pressed: var(--ax-success-800);
-  --ax-bg-success-strong-hover: var(--ax-success-700);
-  --ax-bg-success-strong: var(--ax-success-600);
-  --ax-bg-success-moderate-pressedA: var(--ax-success-400A);
-  --ax-bg-success-moderate-pressed: var(--ax-success-400);
-  --ax-bg-success-moderate-hoverA: var(--ax-success-300A);
-  --ax-bg-success-moderate-hover: var(--ax-success-300);
-  --ax-bg-success-moderateA: var(--ax-success-200A);
-  --ax-bg-success-moderate: var(--ax-success-200);
-  --ax-bg-success-softA: var(--ax-success-100A);
-  --ax-bg-success-soft: var(--ax-success-100);
-  --ax-bg-accent-strong-pressed: var(--ax-accent-800);
-  --ax-bg-accent-strong-hover: var(--ax-accent-700);
-  --ax-bg-accent-strong: var(--ax-accent-600);
-  --ax-bg-accent-moderate-pressedA: var(--ax-accent-400A);
-  --ax-bg-accent-moderate-pressed: var(--ax-accent-400);
-  --ax-bg-accent-moderate-hoverA: var(--ax-accent-300A);
-  --ax-bg-accent-moderate-hover: var(--ax-accent-300);
-  --ax-bg-accent-moderateA: var(--ax-accent-200A);
-  --ax-bg-accent-moderate: var(--ax-accent-200);
-  --ax-bg-accent-softA: var(--ax-accent-100A);
-  --ax-bg-accent-soft: var(--ax-accent-100);
-  --ax-bg-neutral-strong-pressed: var(--ax-neutral-900);
-  --ax-bg-neutral-strong-hover: var(--ax-neutral-800);
-  --ax-bg-neutral-strong: var(--ax-neutral-700);
-  --ax-bg-neutral-moderate-pressedA: var(--ax-neutral-400A);
-  --ax-bg-neutral-moderate-pressed: var(--ax-neutral-400);
-  --ax-bg-neutral-moderate-hoverA: var(--ax-neutral-300A);
-  --ax-bg-neutral-moderate-hover: var(--ax-neutral-300);
-  --ax-bg-neutral-moderateA: var(--ax-neutral-200A);
-  --ax-bg-neutral-moderate: var(--ax-neutral-200);
-  --ax-bg-neutral-softA: var(--ax-neutral-100A);
-  --ax-bg-neutral-soft: var(--ax-neutral-100);
 }
 
-.dark, .dark-theme {
+.dark {
   --ax-meta-lime-400A: #fbf50029;
   --ax-meta-lime-300A: #fce9001d;
   --ax-meta-lime-200A: #f6cf0016;
@@ -530,6 +312,21 @@
   --ax-neutral-300: #242b37;
   --ax-neutral-200: #1c232f;
   --ax-neutral-100: #161d28;
+}
+
+:root, :host, .light {
+  --ax-bg-overlay: #0214317d;
+  --ax-bg-input: #ffffffd9;
+  --ax-bg-default: #fff;
+  --ax-text-logo: #c30000;
+  --ax-opacity-disabled: .3;
+  --ax-shadow-dialog: 0px 4px 6px 0px #00000026, 0px 1px 3px -1px #00000026, 0px 1px 1px 0px #0000000f;
+  --ax-border-focus: var(--ax-neutral-1000);
+  --ax-bg-sunken: var(--ax-neutral-200);
+  --ax-bg-raised: var(--ax-neutral-000);
+}
+
+.dark, .dark-theme {
   --ax-bg-overlay: #0214317d;
   --ax-bg-sunken: #07090d;
   --ax-bg-input: #07090d80;
@@ -537,6 +334,11 @@
   --ax-opacity-disabled: .4;
   --ax-shadow-dialog: 0px 0px 1px 0px #07090d00, 0px 2px 5px 0px #07090d59, 0px 5px 12px 0px #07090d80;
   --ax-border-focus: var(--ax-neutral-1000);
+  --ax-bg-raised: var(--ax-neutral-100);
+  --ax-text-logo: var(--ax-neutral-1000);
+}
+
+:root, :host, .light, .dark {
   --ax-border-meta-lime-strong: var(--ax-meta-lime-700);
   --ax-border-meta-lime-subtleA: var(--ax-meta-lime-400A);
   --ax-border-meta-lime-subtle: var(--ax-meta-lime-400);
@@ -581,52 +383,50 @@
   --ax-border-neutral-subtleA: var(--ax-neutral-400A);
   --ax-border-neutral-subtle: var(--ax-neutral-400);
   --ax-border-neutral: var(--ax-neutral-600);
-  --ax-text-logo: var(--ax-neutral-1000);
   --ax-text-meta-lime-contrast: var(--ax-neutral-000);
-  --ax-text-meta-purple-contrast: var(--ax-neutral-000);
-  --ax-text-brand-blue-contrast: var(--ax-neutral-000);
-  --ax-text-brand-beige-contrast: var(--ax-neutral-000);
-  --ax-text-brand-magenta-contrast: var(--ax-neutral-000);
-  --ax-text-warning-contrast: var(--ax-neutral-000);
-  --ax-text-success-contrast: var(--ax-neutral-000);
-  --ax-text-info-contrast: var(--ax-neutral-000);
-  --ax-text-danger-contrast: var(--ax-neutral-000);
-  --ax-text-accent-contrast: var(--ax-neutral-000);
-  --ax-text-neutral-contrast: var(--ax-neutral-000);
   --ax-text-meta-lime-icon: var(--ax-meta-lime-600);
   --ax-text-meta-lime-subtle: var(--ax-meta-lime-800);
   --ax-text-meta-lime: var(--ax-meta-lime-1000);
+  --ax-text-meta-purple-contrast: var(--ax-neutral-000);
   --ax-text-meta-purple-icon: var(--ax-meta-purple-600);
   --ax-text-meta-purple-subtle: var(--ax-meta-purple-800);
   --ax-text-meta-purple: var(--ax-meta-purple-1000);
+  --ax-text-brand-blue-contrast: var(--ax-neutral-000);
   --ax-text-brand-blue-icon: var(--ax-brand-blue-600);
   --ax-text-brand-blue-subtle: var(--ax-brand-blue-800);
   --ax-text-brand-blue: var(--ax-brand-blue-1000);
+  --ax-text-brand-beige-contrast: var(--ax-neutral-000);
   --ax-text-brand-beige-icon: var(--ax-brand-beige-600);
   --ax-text-brand-beige-subtle: var(--ax-brand-beige-800);
   --ax-text-brand-beige: var(--ax-brand-beige-1000);
+  --ax-text-brand-magenta-contrast: var(--ax-neutral-000);
   --ax-text-brand-magenta-icon: var(--ax-brand-magenta-600);
   --ax-text-brand-magenta-subtle: var(--ax-brand-magenta-800);
   --ax-text-brand-magenta: var(--ax-brand-magenta-1000);
+  --ax-text-info-contrast: var(--ax-neutral-000);
   --ax-text-info-icon: var(--ax-info-600);
   --ax-text-info-subtle: var(--ax-info-800);
   --ax-text-info: var(--ax-info-1000);
+  --ax-text-danger-contrast: var(--ax-neutral-000);
   --ax-text-danger-icon: var(--ax-danger-600);
   --ax-text-danger-subtle: var(--ax-danger-800);
   --ax-text-danger: var(--ax-danger-1000);
+  --ax-text-warning-contrast: var(--ax-neutral-000);
   --ax-text-warning-icon: var(--ax-warning-600);
   --ax-text-warning-subtle: var(--ax-warning-800);
   --ax-text-warning: var(--ax-warning-1000);
+  --ax-text-success-contrast: var(--ax-neutral-000);
   --ax-text-success-icon: var(--ax-success-600);
   --ax-text-success-subtle: var(--ax-success-800);
   --ax-text-success: var(--ax-success-1000);
+  --ax-text-accent-contrast: var(--ax-neutral-000);
   --ax-text-accent-icon: var(--ax-accent-600);
   --ax-text-accent-subtle: var(--ax-accent-800);
   --ax-text-accent: var(--ax-accent-1000);
+  --ax-text-neutral-contrast: var(--ax-neutral-000);
   --ax-text-neutral-icon: var(--ax-neutral-600);
   --ax-text-neutral-subtle: var(--ax-neutral-900);
   --ax-text-neutral: var(--ax-neutral-1000);
-  --ax-bg-raised: var(--ax-neutral-100);
   --ax-bg-meta-lime-strong-pressed: var(--ax-meta-lime-800);
   --ax-bg-meta-lime-strong-hover: var(--ax-meta-lime-700);
   --ax-bg-meta-lime-strong: var(--ax-meta-lime-600);
@@ -751,7 +551,7 @@
 }
 
 :root, :host {
-  --ax-version: "7.12.2";
+  --ax-version: "7.13.0";
   --ax-font-weight-regular: 400;
   --ax-font-weight-bold: 600;
   --ax-font-size-small: .875rem;
@@ -813,3 +613,245 @@
   --ax-space-1: .0625rem;
   --ax-space-0: 0rem;
 }
+
+[data-color-role="neutral"] {
+  --ax-border-strong: var(--ax-border-neutral-strong);
+  --ax-border-subtleA: var(--ax-border-neutral-subtleA);
+  --ax-border-subtle: var(--ax-border-neutral-subtle);
+  --ax-border-default: var(--ax-border-neutral);
+  --ax-text-contrast: var(--ax-text-neutral-contrast);
+  --ax-text-icon: var(--ax-text-neutral-icon);
+  --ax-text-subtle: var(--ax-text-neutral-subtle);
+  --ax-text-default: var(--ax-text-neutral);
+  --ax-bg-strong-pressed: var(--ax-bg-neutral-strong-pressed);
+  --ax-bg-strong-hover: var(--ax-bg-neutral-strong-hover);
+  --ax-bg-strong: var(--ax-bg-neutral-strong);
+  --ax-bg-moderate-pressedA: var(--ax-bg-neutral-moderate-pressedA);
+  --ax-bg-moderate-pressed: var(--ax-bg-neutral-moderate-pressed);
+  --ax-bg-moderate-hoverA: var(--ax-bg-neutral-moderate-hoverA);
+  --ax-bg-moderate-hover: var(--ax-bg-neutral-moderate-hover);
+  --ax-bg-moderateA: var(--ax-bg-neutral-moderateA);
+  --ax-bg-moderate: var(--ax-bg-neutral-moderate);
+  --ax-bg-softA: var(--ax-bg-neutral-softA);
+  --ax-bg-soft: var(--ax-bg-neutral-soft);
+}
+
+[data-color-role="accent"] {
+  --ax-border-strong: var(--ax-border-accent-strong);
+  --ax-border-subtleA: var(--ax-border-accent-subtleA);
+  --ax-border-subtle: var(--ax-border-accent-subtle);
+  --ax-border-default: var(--ax-border-accent);
+  --ax-text-contrast: var(--ax-text-accent-contrast);
+  --ax-text-icon: var(--ax-text-accent-icon);
+  --ax-text-subtle: var(--ax-text-accent-subtle);
+  --ax-text-default: var(--ax-text-accent);
+  --ax-bg-strong-pressed: var(--ax-bg-accent-strong-pressed);
+  --ax-bg-strong-hover: var(--ax-bg-accent-strong-hover);
+  --ax-bg-strong: var(--ax-bg-accent-strong);
+  --ax-bg-moderate-pressedA: var(--ax-bg-accent-moderate-pressedA);
+  --ax-bg-moderate-pressed: var(--ax-bg-accent-moderate-pressed);
+  --ax-bg-moderate-hoverA: var(--ax-bg-accent-moderate-hoverA);
+  --ax-bg-moderate-hover: var(--ax-bg-accent-moderate-hover);
+  --ax-bg-moderateA: var(--ax-bg-accent-moderateA);
+  --ax-bg-moderate: var(--ax-bg-accent-moderate);
+  --ax-bg-softA: var(--ax-bg-accent-softA);
+  --ax-bg-soft: var(--ax-bg-accent-soft);
+}
+
+[data-color-role="success"] {
+  --ax-border-strong: var(--ax-border-success-strong);
+  --ax-border-subtleA: var(--ax-border-success-subtleA);
+  --ax-border-subtle: var(--ax-border-success-subtle);
+  --ax-border-default: var(--ax-border-success);
+  --ax-text-contrast: var(--ax-text-success-contrast);
+  --ax-text-icon: var(--ax-text-success-icon);
+  --ax-text-subtle: var(--ax-text-success-subtle);
+  --ax-text-default: var(--ax-text-success);
+  --ax-bg-strong-pressed: var(--ax-bg-success-strong-pressed);
+  --ax-bg-strong-hover: var(--ax-bg-success-strong-hover);
+  --ax-bg-strong: var(--ax-bg-success-strong);
+  --ax-bg-moderate-pressedA: var(--ax-bg-success-moderate-pressedA);
+  --ax-bg-moderate-pressed: var(--ax-bg-success-moderate-pressed);
+  --ax-bg-moderate-hoverA: var(--ax-bg-success-moderate-hoverA);
+  --ax-bg-moderate-hover: var(--ax-bg-success-moderate-hover);
+  --ax-bg-moderateA: var(--ax-bg-success-moderateA);
+  --ax-bg-moderate: var(--ax-bg-success-moderate);
+  --ax-bg-softA: var(--ax-bg-success-softA);
+  --ax-bg-soft: var(--ax-bg-success-soft);
+}
+
+[data-color-role="warning"] {
+  --ax-border-strong: var(--ax-border-warning-strong);
+  --ax-border-subtleA: var(--ax-border-warning-subtleA);
+  --ax-border-subtle: var(--ax-border-warning-subtle);
+  --ax-border-default: var(--ax-border-warning);
+  --ax-text-contrast: var(--ax-text-warning-contrast);
+  --ax-text-icon: var(--ax-text-warning-icon);
+  --ax-text-subtle: var(--ax-text-warning-subtle);
+  --ax-text-default: var(--ax-text-warning);
+  --ax-bg-strong-pressed: var(--ax-bg-warning-strong-pressed);
+  --ax-bg-strong-hover: var(--ax-bg-warning-strong-hover);
+  --ax-bg-strong: var(--ax-bg-warning-strong);
+  --ax-bg-moderate-pressedA: var(--ax-bg-warning-moderate-pressedA);
+  --ax-bg-moderate-pressed: var(--ax-bg-warning-moderate-pressed);
+  --ax-bg-moderate-hoverA: var(--ax-bg-warning-moderate-hoverA);
+  --ax-bg-moderate-hover: var(--ax-bg-warning-moderate-hover);
+  --ax-bg-moderateA: var(--ax-bg-warning-moderateA);
+  --ax-bg-moderate: var(--ax-bg-warning-moderate);
+  --ax-bg-softA: var(--ax-bg-warning-softA);
+  --ax-bg-soft: var(--ax-bg-warning-soft);
+}
+
+[data-color-role="danger"] {
+  --ax-border-strong: var(--ax-border-danger-strong);
+  --ax-border-subtleA: var(--ax-border-danger-subtleA);
+  --ax-border-subtle: var(--ax-border-danger-subtle);
+  --ax-border-default: var(--ax-border-danger);
+  --ax-text-contrast: var(--ax-text-danger-contrast);
+  --ax-text-icon: var(--ax-text-danger-icon);
+  --ax-text-subtle: var(--ax-text-danger-subtle);
+  --ax-text-default: var(--ax-text-danger);
+  --ax-bg-strong-pressed: var(--ax-bg-danger-strong-pressed);
+  --ax-bg-strong-hover: var(--ax-bg-danger-strong-hover);
+  --ax-bg-strong: var(--ax-bg-danger-strong);
+  --ax-bg-moderate-pressedA: var(--ax-bg-danger-moderate-pressedA);
+  --ax-bg-moderate-pressed: var(--ax-bg-danger-moderate-pressed);
+  --ax-bg-moderate-hoverA: var(--ax-bg-danger-moderate-hoverA);
+  --ax-bg-moderate-hover: var(--ax-bg-danger-moderate-hover);
+  --ax-bg-moderateA: var(--ax-bg-danger-moderateA);
+  --ax-bg-moderate: var(--ax-bg-danger-moderate);
+  --ax-bg-softA: var(--ax-bg-danger-softA);
+  --ax-bg-soft: var(--ax-bg-danger-soft);
+}
+
+[data-color-role="info"] {
+  --ax-border-strong: var(--ax-border-info-strong);
+  --ax-border-subtleA: var(--ax-border-info-subtleA);
+  --ax-border-subtle: var(--ax-border-info-subtle);
+  --ax-border-default: var(--ax-border-info);
+  --ax-text-contrast: var(--ax-text-info-contrast);
+  --ax-text-icon: var(--ax-text-info-icon);
+  --ax-text-subtle: var(--ax-text-info-subtle);
+  --ax-text-default: var(--ax-text-info);
+  --ax-bg-strong-pressed: var(--ax-bg-info-strong-pressed);
+  --ax-bg-strong-hover: var(--ax-bg-info-strong-hover);
+  --ax-bg-strong: var(--ax-bg-info-strong);
+  --ax-bg-moderate-pressedA: var(--ax-bg-info-moderate-pressedA);
+  --ax-bg-moderate-pressed: var(--ax-bg-info-moderate-pressed);
+  --ax-bg-moderate-hoverA: var(--ax-bg-info-moderate-hoverA);
+  --ax-bg-moderate-hover: var(--ax-bg-info-moderate-hover);
+  --ax-bg-moderateA: var(--ax-bg-info-moderateA);
+  --ax-bg-moderate: var(--ax-bg-info-moderate);
+  --ax-bg-softA: var(--ax-bg-info-softA);
+  --ax-bg-soft: var(--ax-bg-info-soft);
+}
+
+[data-color-role="brand-magenta"] {
+  --ax-border-strong: var(--ax-border-brand-magenta-strong);
+  --ax-border-subtleA: var(--ax-border-brand-magenta-subtleA);
+  --ax-border-subtle: var(--ax-border-brand-magenta-subtle);
+  --ax-border-default: var(--ax-border-brand-magenta);
+  --ax-text-contrast: var(--ax-text-brand-magenta-contrast);
+  --ax-text-icon: var(--ax-text-brand-magenta-icon);
+  --ax-text-subtle: var(--ax-text-brand-magenta-subtle);
+  --ax-text-default: var(--ax-text-brand-magenta);
+  --ax-bg-strong-pressed: var(--ax-bg-brand-magenta-strong-pressed);
+  --ax-bg-strong-hover: var(--ax-bg-brand-magenta-strong-hover);
+  --ax-bg-strong: var(--ax-bg-brand-magenta-strong);
+  --ax-bg-moderate-pressedA: var(--ax-bg-brand-magenta-moderate-pressedA);
+  --ax-bg-moderate-pressed: var(--ax-bg-brand-magenta-moderate-pressed);
+  --ax-bg-moderate-hoverA: var(--ax-bg-brand-magenta-moderate-hoverA);
+  --ax-bg-moderate-hover: var(--ax-bg-brand-magenta-moderate-hover);
+  --ax-bg-moderateA: var(--ax-bg-brand-magenta-moderateA);
+  --ax-bg-moderate: var(--ax-bg-brand-magenta-moderate);
+  --ax-bg-softA: var(--ax-bg-brand-magenta-softA);
+  --ax-bg-soft: var(--ax-bg-brand-magenta-soft);
+}
+
+[data-color-role="brand-beige"] {
+  --ax-border-strong: var(--ax-border-brand-beige-strong);
+  --ax-border-subtleA: var(--ax-border-brand-beige-subtleA);
+  --ax-border-subtle: var(--ax-border-brand-beige-subtle);
+  --ax-border-default: var(--ax-border-brand-beige);
+  --ax-text-contrast: var(--ax-text-brand-beige-contrast);
+  --ax-text-icon: var(--ax-text-brand-beige-icon);
+  --ax-text-subtle: var(--ax-text-brand-beige-subtle);
+  --ax-text-default: var(--ax-text-brand-beige);
+  --ax-bg-strong-pressed: var(--ax-bg-brand-beige-strong-pressed);
+  --ax-bg-strong-hover: var(--ax-bg-brand-beige-strong-hover);
+  --ax-bg-strong: var(--ax-bg-brand-beige-strong);
+  --ax-bg-moderate-pressedA: var(--ax-bg-brand-beige-moderate-pressedA);
+  --ax-bg-moderate-pressed: var(--ax-bg-brand-beige-moderate-pressed);
+  --ax-bg-moderate-hoverA: var(--ax-bg-brand-beige-moderate-hoverA);
+  --ax-bg-moderate-hover: var(--ax-bg-brand-beige-moderate-hover);
+  --ax-bg-moderateA: var(--ax-bg-brand-beige-moderateA);
+  --ax-bg-moderate: var(--ax-bg-brand-beige-moderate);
+  --ax-bg-softA: var(--ax-bg-brand-beige-softA);
+  --ax-bg-soft: var(--ax-bg-brand-beige-soft);
+}
+
+[data-color-role="brand-blue"] {
+  --ax-border-strong: var(--ax-border-brand-blue-strong);
+  --ax-border-subtleA: var(--ax-border-brand-blue-subtleA);
+  --ax-border-subtle: var(--ax-border-brand-blue-subtle);
+  --ax-border-default: var(--ax-border-brand-blue);
+  --ax-text-contrast: var(--ax-text-brand-blue-contrast);
+  --ax-text-icon: var(--ax-text-brand-blue-icon);
+  --ax-text-subtle: var(--ax-text-brand-blue-subtle);
+  --ax-text-default: var(--ax-text-brand-blue);
+  --ax-bg-strong-pressed: var(--ax-bg-brand-blue-strong-pressed);
+  --ax-bg-strong-hover: var(--ax-bg-brand-blue-strong-hover);
+  --ax-bg-strong: var(--ax-bg-brand-blue-strong);
+  --ax-bg-moderate-pressedA: var(--ax-bg-brand-blue-moderate-pressedA);
+  --ax-bg-moderate-pressed: var(--ax-bg-brand-blue-moderate-pressed);
+  --ax-bg-moderate-hoverA: var(--ax-bg-brand-blue-moderate-hoverA);
+  --ax-bg-moderate-hover: var(--ax-bg-brand-blue-moderate-hover);
+  --ax-bg-moderateA: var(--ax-bg-brand-blue-moderateA);
+  --ax-bg-moderate: var(--ax-bg-brand-blue-moderate);
+  --ax-bg-softA: var(--ax-bg-brand-blue-softA);
+  --ax-bg-soft: var(--ax-bg-brand-blue-soft);
+}
+
+[data-color-role="meta-purple"] {
+  --ax-border-strong: var(--ax-border-meta-purple-strong);
+  --ax-border-subtleA: var(--ax-border-meta-purple-subtleA);
+  --ax-border-subtle: var(--ax-border-meta-purple-subtle);
+  --ax-border-default: var(--ax-border-meta-purple);
+  --ax-text-contrast: var(--ax-text-meta-purple-contrast);
+  --ax-text-icon: var(--ax-text-meta-purple-icon);
+  --ax-text-subtle: var(--ax-text-meta-purple-subtle);
+  --ax-text-default: var(--ax-text-meta-purple);
+  --ax-bg-strong-pressed: var(--ax-bg-meta-purple-strong-pressed);
+  --ax-bg-strong-hover: var(--ax-bg-meta-purple-strong-hover);
+  --ax-bg-strong: var(--ax-bg-meta-purple-strong);
+  --ax-bg-moderate-pressedA: var(--ax-bg-meta-purple-moderate-pressedA);
+  --ax-bg-moderate-pressed: var(--ax-bg-meta-purple-moderate-pressed);
+  --ax-bg-moderate-hoverA: var(--ax-bg-meta-purple-moderate-hoverA);
+  --ax-bg-moderate-hover: var(--ax-bg-meta-purple-moderate-hover);
+  --ax-bg-moderateA: var(--ax-bg-meta-purple-moderateA);
+  --ax-bg-moderate: var(--ax-bg-meta-purple-moderate);
+  --ax-bg-softA: var(--ax-bg-meta-purple-softA);
+  --ax-bg-soft: var(--ax-bg-meta-purple-soft);
+}
+
+[data-color-role="meta-lime"] {
+  --ax-border-strong: var(--ax-border-meta-lime-strong);
+  --ax-border-subtleA: var(--ax-border-meta-lime-subtleA);
+  --ax-border-subtle: var(--ax-border-meta-lime-subtle);
+  --ax-border-default: var(--ax-border-meta-lime);
+  --ax-text-contrast: var(--ax-text-meta-lime-contrast);
+  --ax-text-icon: var(--ax-text-meta-lime-icon);
+  --ax-text-subtle: var(--ax-text-meta-lime-subtle);
+  --ax-text-default: var(--ax-text-meta-lime);
+  --ax-bg-strong-pressed: var(--ax-bg-meta-lime-strong-pressed);
+  --ax-bg-strong-hover: var(--ax-bg-meta-lime-strong-hover);
+  --ax-bg-strong: var(--ax-bg-meta-lime-strong);
+  --ax-bg-moderate-pressedA: var(--ax-bg-meta-lime-moderate-pressedA);
+  --ax-bg-moderate-pressed: var(--ax-bg-meta-lime-moderate-pressed);
+  --ax-bg-moderate-hoverA: var(--ax-bg-meta-lime-moderate-hoverA);
+  --ax-bg-moderate-hover: var(--ax-bg-meta-lime-moderate-hover);
+  --ax-bg-moderateA: var(--ax-bg-meta-lime-moderateA);
+  --ax-bg-moderate: var(--ax-bg-meta-lime-moderate);
+  --ax-bg-softA: var(--ax-bg-meta-lime-softA);
+  --ax-bg-soft: var(--ax-bg-meta-lime-soft);
+}