@navikt/ds-tokens 7.10.0 → 7.11.0

package/dist/darkside/root-tokens.css

@@ -3,64 +3,64 @@
  */
 
 :root, :host {
-  --ax-font-weight-regular: 400;
-  --ax-font-weight-bold: 600;
-  --ax-font-size-small: 0.875rem;
-  --ax-font-size-medium: 1rem;
-  --ax-font-size-large: 1.125rem;
-  --ax-font-size-xlarge: 1.25rem;
-  --ax-font-size-heading-xsmall: 1.125rem;
-  --ax-font-size-heading-small: 1.25rem;
-  --ax-font-size-heading-medium: 1.5rem;
-  --ax-font-size-heading-large: 1.75rem;
-  --ax-font-size-heading-xlarge: 2rem;
-  --ax-font-size-heading-2xlarge: 2.5rem;
-  --ax-font-line-height-medium: 1.25rem;
-  --ax-font-line-height-large: 1.5rem;
-  --ax-font-line-height-xlarge: 1.75rem;
-  --ax-font-line-height-heading-xsmall: 1.5rem;
-  --ax-font-line-height-heading-small: 1.75rem;
-  --ax-font-line-height-heading-medium: 2rem;
-  --ax-font-line-height-heading-large: 2.25rem;
-  --ax-font-line-height-heading-xlarge: 2.5rem;
-  --ax-font-line-height-heading-2xlarge: 3.25rem;
-  --ax-font-family: 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
-  --ax-breakpoint-2xl-down: 1439px;
-  --ax-breakpoint-2xl: 1440px;
-  --ax-breakpoint-xl-down: 1279px;
-  --ax-breakpoint-xl: 1280px;
-  --ax-breakpoint-lg-down: 1023px;
-  --ax-breakpoint-lg: 1024px;
-  --ax-breakpoint-md-down: 767px;
-  --ax-breakpoint-md: 768px;
-  --ax-breakpoint-sm-down: 479px;
-  --ax-breakpoint-sm: 480px;
-  --ax-breakpoint-xs: 0;
-  --ax-border-radius-full: 9999px;
-  --ax-border-radius-xlarge: 12px;
-  --ax-border-radius-large: 8px;
-  --ax-border-radius-medium: 4px;
-  --ax-border-radius-small: 2px;
-  --ax-space-128: 8rem;
-  --ax-space-96: 6rem;
-  --ax-space-80: 5rem;
-  --ax-space-72: 4.5rem;
-  --ax-space-64: 4rem;
-  --ax-space-56: 3.5rem;
-  --ax-space-48: 3rem;
-  --ax-space-44: 2.75rem;
-  --ax-space-40: 2.5rem;
-  --ax-space-36: 2.25rem;
-  --ax-space-32: 2rem;
-  --ax-space-28: 1.75rem;
-  --ax-space-24: 1.5rem;
-  --ax-space-20: 1.25rem;
-  --ax-space-16: 1rem;
-  --ax-space-12: 0.75rem;
-  --ax-space-8: 0.5rem;
-  --ax-space-6: 0.375rem;
-  --ax-space-4: 0.25rem;
-  --ax-space-2: 0.125rem;
-  --ax-space-1: 0.0625rem;
   --ax-space-0: 0rem;
+  --ax-space-1: 0.0625rem;
+  --ax-space-2: 0.125rem;
+  --ax-space-4: 0.25rem;
+  --ax-space-6: 0.375rem;
+  --ax-space-8: 0.5rem;
+  --ax-space-12: 0.75rem;
+  --ax-space-16: 1rem;
+  --ax-space-20: 1.25rem;
+  --ax-space-24: 1.5rem;
+  --ax-space-28: 1.75rem;
+  --ax-space-32: 2rem;
+  --ax-space-36: 2.25rem;
+  --ax-space-40: 2.5rem;
+  --ax-space-44: 2.75rem;
+  --ax-space-48: 3rem;
+  --ax-space-56: 3.5rem;
+  --ax-space-64: 4rem;
+  --ax-space-72: 4.5rem;
+  --ax-space-80: 5rem;
+  --ax-space-96: 6rem;
+  --ax-space-128: 8rem;
+  --ax-border-radius-small: 2px;
+  --ax-border-radius-medium: 4px;
+  --ax-border-radius-large: 8px;
+  --ax-border-radius-xlarge: 12px;
+  --ax-border-radius-full: 9999px;
+  --ax-breakpoint-xs: 0;
+  --ax-breakpoint-sm: 480px;
+  --ax-breakpoint-sm-down: 479px;
+  --ax-breakpoint-md: 768px;
+  --ax-breakpoint-md-down: 767px;
+  --ax-breakpoint-lg: 1024px;
+  --ax-breakpoint-lg-down: 1023px;
+  --ax-breakpoint-xl: 1280px;
+  --ax-breakpoint-xl-down: 1279px;
+  --ax-breakpoint-2xl: 1440px;
+  --ax-breakpoint-2xl-down: 1439px;
+  --ax-font-family: 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
+  --ax-font-line-height-heading-2xlarge: 3.25rem;
+  --ax-font-line-height-heading-xlarge: 2.5rem;
+  --ax-font-line-height-heading-large: 2.25rem;
+  --ax-font-line-height-heading-medium: 2rem;
+  --ax-font-line-height-heading-small: 1.75rem;
+  --ax-font-line-height-heading-xsmall: 1.5rem;
+  --ax-font-line-height-xlarge: 1.75rem;
+  --ax-font-line-height-large: 1.5rem;
+  --ax-font-line-height-medium: 1.25rem;
+  --ax-font-size-heading-2xlarge: 2.5rem;
+  --ax-font-size-heading-xlarge: 2rem;
+  --ax-font-size-heading-large: 1.75rem;
+  --ax-font-size-heading-medium: 1.5rem;
+  --ax-font-size-heading-small: 1.25rem;
+  --ax-font-size-heading-xsmall: 1.125rem;
+  --ax-font-size-xlarge: 1.25rem;
+  --ax-font-size-large: 1.125rem;
+  --ax-font-size-medium: 1rem;
+  --ax-font-size-small: 0.875rem;
+  --ax-font-weight-bold: 600;
+  --ax-font-weight-regular: 400;
 }

package/dist/darkside/static/tokens-cjs.js

@@ -12,6 +12,7 @@ module.exports = {
  */
 "OpacityDisabled": "0.3",
   "BgAccentSoft": "#f1f7ff",
+  "BgAccentSoftA": "#006eff0e",
   "BgAccentHover": "#e4eeff",
   "BgAccentHoverA": "#005fff1b",
   "BgAccentModerate": "#e4eeff",
@@ -24,6 +25,7 @@ module.exports = {
   "BgAccentStrongHover": "#0063c1",
   "BgAccentStrongPressed": "#005bb6",
   "BgSuccessSoft": "#e2fde8",
+  "BgSuccessSoftA": "#00ee351d",
   "BgSuccessHover": "#d5f6db",
   "BgSuccessHoverA": "#00c9252a",
   "BgSuccessModerate": "#d5f6db",
@@ -36,6 +38,7 @@ module.exports = {
   "BgSuccessStrongHover": "#007629",
   "BgSuccessStrongPressed": "#006c1f",
   "BgWarningSoft": "#fff5e4",
+  "BgWarningSoftA": "#ffa1001b",
   "BgWarningHover": "#ffebc7",
   "BgWarningHoverA": "#ffa40038",
   "BgWarningModerate": "#ffebc7",
@@ -48,6 +51,7 @@ module.exports = {
   "BgWarningStrongHover": "#ac4400",
   "BgWarningStrongPressed": "#a03e00",
   "BgDangerSoft": "#fff2f7",
+  "BgDangerSoftA": "#ff00630d",
   "BgDangerHover": "#ffe8f0",
   "BgDangerHoverA": "#ff005917",
   "BgDangerModerate": "#ffe8f0",
@@ -60,6 +64,7 @@ module.exports = {
   "BgDangerStrongHover": "#cb0035",
   "BgDangerStrongPressed": "#bc002a",
   "BgInfoSoft": "#eef6fc",
+  "BgInfoSoftA": "#0078d211",
   "BgInfoHover": "#e3eff7",
   "BgInfoHoverA": "#006eb71c",
   "BgInfoModerate": "#e3eff7",
@@ -72,6 +77,7 @@ module.exports = {
   "BgInfoStrongHover": "#246b91",
   "BgInfoStrongPressed": "#156389",
   "BgBrand1Soft": "#fbf3f6",
+  "BgBrand1SoftA": "#aa00400c",
   "BgBrand1Hover": "#f8eaef",
   "BgBrand1HoverA": "#aa003d15",
   "BgBrand1Moderate": "#f8eaef",
@@ -84,6 +90,7 @@ module.exports = {
   "BgBrand1StrongHover": "#a93d70",
   "BgBrand1StrongPressed": "#a33069",
   "BgBrand2Soft": "#fff4ee",
+  "BgBrand2SoftA": "#ff5a0011",
   "BgBrand2Hover": "#fdebe0",
   "BgBrand2HoverA": "#ef5b001f",
   "BgBrand2Moderate": "#fdebe0",
@@ -96,6 +103,7 @@ module.exports = {
   "BgBrand2StrongHover": "#915541",
   "BgBrand2StrongPressed": "#874e3b",
   "BgBrand3Soft": "#eef6fc",
+  "BgBrand3SoftA": "#0078d211",
   "BgBrand3Hover": "#e3eff7",
   "BgBrand3HoverA": "#006eb71c",
   "BgBrand3Moderate": "#e3eff7",
@@ -108,6 +116,7 @@ module.exports = {
   "BgBrand3StrongHover": "#246b91",
   "BgBrand3StrongPressed": "#156389",
   "BgMeta1Soft": "#f7f5f9",
+  "BgMeta1SoftA": "#3300660a",
   "BgMeta1Hover": "#f0edf4",
   "BgMeta1HoverA": "#2b006412",
   "BgMeta1Moderate": "#f0edf4",
@@ -120,6 +129,7 @@ module.exports = {
   "BgMeta1StrongHover": "#725a91",
   "BgMeta1StrongPressed": "#6a5289",
   "BgMeta2Soft": "#f4f9d1",
+  "BgMeta2SoftA": "#c3de002e",
   "BgMeta2Hover": "#ebf4a9",
   "BgMeta2HoverA": "#c4df0056",
   "BgMeta2Moderate": "#ebf4a9",
@@ -137,6 +147,7 @@ module.exports = {
   "BgSunken": "#ecedef",
   "BgOverlay": "#021431",
   "BgSoft": "#f5f6f7",
+  "BgSoftA": "#001a330a",
   "BgHover": "#ecedef",
   "BgHoverA": "#000e2913",
   "BgModerate": "#ecedef",
@@ -233,7 +244,7 @@ module.exports = {
   "BorderMeta2Subtle": "#d0dc00",
   "BorderMeta2SubtleA": "#d0dc00",
   "BorderMeta2Strong": "#646900",
-  "BorderDefault": "#818997",
+  "BorderDefault": "#6f7785",
   "BorderSubtle": "#cfd3d8",
   "BorderSubtleA": "#00163030",
   "BorderStrong": "#6f7785",

package/dist/darkside/static/tokens.d.ts

@@ -11,6 +11,7 @@ export const ShadowDialog = "0px 0px 1px 0px rgba(7 9 13 / 0.02), 0px 2px 5px 0p
  */
 export const OpacityDisabled = "0.3";
 export const BgAccentSoft = "#f1f7ff";
+export const BgAccentSoftA = "#006eff0e";
 export const BgAccentHover = "#e4eeff";
 export const BgAccentHoverA = "#005fff1b";
 export const BgAccentModerate = "#e4eeff";
@@ -23,6 +24,7 @@ export const BgAccentStrong = "#2277d5";
 export const BgAccentStrongHover = "#0063c1";
 export const BgAccentStrongPressed = "#005bb6";
 export const BgSuccessSoft = "#e2fde8";
+export const BgSuccessSoftA = "#00ee351d";
 export const BgSuccessHover = "#d5f6db";
 export const BgSuccessHoverA = "#00c9252a";
 export const BgSuccessModerate = "#d5f6db";
@@ -35,6 +37,7 @@ export const BgSuccessStrong = "#00893c";
 export const BgSuccessStrongHover = "#007629";
 export const BgSuccessStrongPressed = "#006c1f";
 export const BgWarningSoft = "#fff5e4";
+export const BgWarningSoftA = "#ffa1001b";
 export const BgWarningHover = "#ffebc7";
 export const BgWarningHoverA = "#ffa40038";
 export const BgWarningModerate = "#ffebc7";
@@ -47,6 +50,7 @@ export const BgWarningStrong = "#c95100";
 export const BgWarningStrongHover = "#ac4400";
 export const BgWarningStrongPressed = "#a03e00";
 export const BgDangerSoft = "#fff2f7";
+export const BgDangerSoftA = "#ff00630d";
 export const BgDangerHover = "#ffe8f0";
 export const BgDangerHoverA = "#ff005917";
 export const BgDangerModerate = "#ffe8f0";
@@ -59,6 +63,7 @@ export const BgDangerStrong = "#e22a49";
 export const BgDangerStrongHover = "#cb0035";
 export const BgDangerStrongPressed = "#bc002a";
 export const BgInfoSoft = "#eef6fc";
+export const BgInfoSoftA = "#0078d211";
 export const BgInfoHover = "#e3eff7";
 export const BgInfoHoverA = "#006eb71c";
 export const BgInfoModerate = "#e3eff7";
@@ -71,6 +76,7 @@ export const BgInfoStrong = "#417da0";
 export const BgInfoStrongHover = "#246b91";
 export const BgInfoStrongPressed = "#156389";
 export const BgBrand1Soft = "#fbf3f6";
+export const BgBrand1SoftA = "#aa00400c";
 export const BgBrand1Hover = "#f8eaef";
 export const BgBrand1HoverA = "#aa003d15";
 export const BgBrand1Moderate = "#f8eaef";
@@ -83,6 +89,7 @@ export const BgBrand1Strong = "#b65781";
 export const BgBrand1StrongHover = "#a93d70";
 export const BgBrand1StrongPressed = "#a33069";
 export const BgBrand2Soft = "#fff4ee";
+export const BgBrand2SoftA = "#ff5a0011";
 export const BgBrand2Hover = "#fdebe0";
 export const BgBrand2HoverA = "#ef5b001f";
 export const BgBrand2Moderate = "#fdebe0";
@@ -95,6 +102,7 @@ export const BgBrand2Strong = "#a9654e";
 export const BgBrand2StrongHover = "#915541";
 export const BgBrand2StrongPressed = "#874e3b";
 export const BgBrand3Soft = "#eef6fc";
+export const BgBrand3SoftA = "#0078d211";
 export const BgBrand3Hover = "#e3eff7";
 export const BgBrand3HoverA = "#006eb71c";
 export const BgBrand3Moderate = "#e3eff7";
@@ -107,6 +115,7 @@ export const BgBrand3Strong = "#417da0";
 export const BgBrand3StrongHover = "#246b91";
 export const BgBrand3StrongPressed = "#156389";
 export const BgMeta1Soft = "#f7f5f9";
+export const BgMeta1SoftA = "#3300660a";
 export const BgMeta1Hover = "#f0edf4";
 export const BgMeta1HoverA = "#2b006412";
 export const BgMeta1Moderate = "#f0edf4";
@@ -119,6 +128,7 @@ export const BgMeta1Strong = "#846ca4";
 export const BgMeta1StrongHover = "#725a91";
 export const BgMeta1StrongPressed = "#6a5289";
 export const BgMeta2Soft = "#f4f9d1";
+export const BgMeta2SoftA = "#c3de002e";
 export const BgMeta2Hover = "#ebf4a9";
 export const BgMeta2HoverA = "#c4df0056";
 export const BgMeta2Moderate = "#ebf4a9";
@@ -136,6 +146,7 @@ export const BgRaised = "white";
 export const BgSunken = "#ecedef";
 export const BgOverlay = "#021431";
 export const BgSoft = "#f5f6f7";
+export const BgSoftA = "#001a330a";
 export const BgHover = "#ecedef";
 export const BgHoverA = "#000e2913";
 export const BgModerate = "#ecedef";
@@ -232,7 +243,7 @@ export const BorderMeta2 = "#757c00";
 export const BorderMeta2Subtle = "#d0dc00";
 export const BorderMeta2SubtleA = "#d0dc00";
 export const BorderMeta2Strong = "#646900";
-export const BorderDefault = "#818997";
+export const BorderDefault = "#6f7785";
 export const BorderSubtle = "#cfd3d8";
 export const BorderSubtleA = "#00163030";
 export const BorderStrong = "#6f7785";

package/dist/darkside/static/tokens.js

@@ -11,6 +11,7 @@ export const ShadowDialog = "0px 0px 1px 0px rgba(7 9 13 / 0.02), 0px 2px 5px 0p
  */
 export const OpacityDisabled = "0.3";
 export const BgAccentSoft = "#f1f7ff";
+export const BgAccentSoftA = "#006eff0e";
 export const BgAccentHover = "#e4eeff";
 export const BgAccentHoverA = "#005fff1b";
 export const BgAccentModerate = "#e4eeff";
@@ -23,6 +24,7 @@ export const BgAccentStrong = "#2277d5";
 export const BgAccentStrongHover = "#0063c1";
 export const BgAccentStrongPressed = "#005bb6";
 export const BgSuccessSoft = "#e2fde8";
+export const BgSuccessSoftA = "#00ee351d";
 export const BgSuccessHover = "#d5f6db";
 export const BgSuccessHoverA = "#00c9252a";
 export const BgSuccessModerate = "#d5f6db";
@@ -35,6 +37,7 @@ export const BgSuccessStrong = "#00893c";
 export const BgSuccessStrongHover = "#007629";
 export const BgSuccessStrongPressed = "#006c1f";
 export const BgWarningSoft = "#fff5e4";
+export const BgWarningSoftA = "#ffa1001b";
 export const BgWarningHover = "#ffebc7";
 export const BgWarningHoverA = "#ffa40038";
 export const BgWarningModerate = "#ffebc7";
@@ -47,6 +50,7 @@ export const BgWarningStrong = "#c95100";
 export const BgWarningStrongHover = "#ac4400";
 export const BgWarningStrongPressed = "#a03e00";
 export const BgDangerSoft = "#fff2f7";
+export const BgDangerSoftA = "#ff00630d";
 export const BgDangerHover = "#ffe8f0";
 export const BgDangerHoverA = "#ff005917";
 export const BgDangerModerate = "#ffe8f0";
@@ -59,6 +63,7 @@ export const BgDangerStrong = "#e22a49";
 export const BgDangerStrongHover = "#cb0035";
 export const BgDangerStrongPressed = "#bc002a";
 export const BgInfoSoft = "#eef6fc";
+export const BgInfoSoftA = "#0078d211";
 export const BgInfoHover = "#e3eff7";
 export const BgInfoHoverA = "#006eb71c";
 export const BgInfoModerate = "#e3eff7";
@@ -71,6 +76,7 @@ export const BgInfoStrong = "#417da0";
 export const BgInfoStrongHover = "#246b91";
 export const BgInfoStrongPressed = "#156389";
 export const BgBrand1Soft = "#fbf3f6";
+export const BgBrand1SoftA = "#aa00400c";
 export const BgBrand1Hover = "#f8eaef";
 export const BgBrand1HoverA = "#aa003d15";
 export const BgBrand1Moderate = "#f8eaef";
@@ -83,6 +89,7 @@ export const BgBrand1Strong = "#b65781";
 export const BgBrand1StrongHover = "#a93d70";
 export const BgBrand1StrongPressed = "#a33069";
 export const BgBrand2Soft = "#fff4ee";
+export const BgBrand2SoftA = "#ff5a0011";
 export const BgBrand2Hover = "#fdebe0";
 export const BgBrand2HoverA = "#ef5b001f";
 export const BgBrand2Moderate = "#fdebe0";
@@ -95,6 +102,7 @@ export const BgBrand2Strong = "#a9654e";
 export const BgBrand2StrongHover = "#915541";
 export const BgBrand2StrongPressed = "#874e3b";
 export const BgBrand3Soft = "#eef6fc";
+export const BgBrand3SoftA = "#0078d211";
 export const BgBrand3Hover = "#e3eff7";
 export const BgBrand3HoverA = "#006eb71c";
 export const BgBrand3Moderate = "#e3eff7";
@@ -107,6 +115,7 @@ export const BgBrand3Strong = "#417da0";
 export const BgBrand3StrongHover = "#246b91";
 export const BgBrand3StrongPressed = "#156389";
 export const BgMeta1Soft = "#f7f5f9";
+export const BgMeta1SoftA = "#3300660a";
 export const BgMeta1Hover = "#f0edf4";
 export const BgMeta1HoverA = "#2b006412";
 export const BgMeta1Moderate = "#f0edf4";
@@ -119,6 +128,7 @@ export const BgMeta1Strong = "#846ca4";
 export const BgMeta1StrongHover = "#725a91";
 export const BgMeta1StrongPressed = "#6a5289";
 export const BgMeta2Soft = "#f4f9d1";
+export const BgMeta2SoftA = "#c3de002e";
 export const BgMeta2Hover = "#ebf4a9";
 export const BgMeta2HoverA = "#c4df0056";
 export const BgMeta2Moderate = "#ebf4a9";
@@ -136,6 +146,7 @@ export const BgRaised = "white";
 export const BgSunken = "#ecedef";
 export const BgOverlay = "#021431";
 export const BgSoft = "#f5f6f7";
+export const BgSoftA = "#001a330a";
 export const BgHover = "#ecedef";
 export const BgHoverA = "#000e2913";
 export const BgModerate = "#ecedef";
@@ -232,7 +243,7 @@ export const BorderMeta2 = "#757c00";
 export const BorderMeta2Subtle = "#d0dc00";
 export const BorderMeta2SubtleA = "#d0dc00";
 export const BorderMeta2Strong = "#646900";
-export const BorderDefault = "#818997";
+export const BorderDefault = "#6f7785";
 export const BorderSubtle = "#cfd3d8";
 export const BorderSubtleA = "#00163030";
 export const BorderStrong = "#6f7785";

package/dist/darkside/static/tokens.less

@@ -4,6 +4,7 @@
 @ax-shadow-dialog: 0px 0px 1px 0px rgba(7 9 13 / 0.02), 0px 2px 5px 0px rgba(7 9 13 / 0.10), 0px 5px 12px 0px rgba(7 9 13 / 0.12); // Used for dialog elements like modals and popovers.
 @ax-opacity-disabled: 0.3; // Used for setting opacity on disabled elements.
 @ax-bg-accent-soft: #f1f7ff;
+@ax-bg-accent-soft-a: #006eff0e;
 @ax-bg-accent-hover: #e4eeff;
 @ax-bg-accent-hover-a: #005fff1b;
 @ax-bg-accent-moderate: #e4eeff;
@@ -16,6 +17,7 @@
 @ax-bg-accent-strong-hover: #0063c1;
 @ax-bg-accent-strong-pressed: #005bb6;
 @ax-bg-success-soft: #e2fde8;
+@ax-bg-success-soft-a: #00ee351d;
 @ax-bg-success-hover: #d5f6db;
 @ax-bg-success-hover-a: #00c9252a;
 @ax-bg-success-moderate: #d5f6db;
@@ -28,6 +30,7 @@
 @ax-bg-success-strong-hover: #007629;
 @ax-bg-success-strong-pressed: #006c1f;
 @ax-bg-warning-soft: #fff5e4;
+@ax-bg-warning-soft-a: #ffa1001b;
 @ax-bg-warning-hover: #ffebc7;
 @ax-bg-warning-hover-a: #ffa40038;
 @ax-bg-warning-moderate: #ffebc7;
@@ -40,6 +43,7 @@
 @ax-bg-warning-strong-hover: #ac4400;
 @ax-bg-warning-strong-pressed: #a03e00;
 @ax-bg-danger-soft: #fff2f7;
+@ax-bg-danger-soft-a: #ff00630d;
 @ax-bg-danger-hover: #ffe8f0;
 @ax-bg-danger-hover-a: #ff005917;
 @ax-bg-danger-moderate: #ffe8f0;
@@ -52,6 +56,7 @@
 @ax-bg-danger-strong-hover: #cb0035;
 @ax-bg-danger-strong-pressed: #bc002a;
 @ax-bg-info-soft: #eef6fc;
+@ax-bg-info-soft-a: #0078d211;
 @ax-bg-info-hover: #e3eff7;
 @ax-bg-info-hover-a: #006eb71c;
 @ax-bg-info-moderate: #e3eff7;
@@ -64,6 +69,7 @@
 @ax-bg-info-strong-hover: #246b91;
 @ax-bg-info-strong-pressed: #156389;
 @ax-bg-brand-1-soft: #fbf3f6;
+@ax-bg-brand-1-soft-a: #aa00400c;
 @ax-bg-brand-1-hover: #f8eaef;
 @ax-bg-brand-1-hover-a: #aa003d15;
 @ax-bg-brand-1-moderate: #f8eaef;
@@ -76,6 +82,7 @@
 @ax-bg-brand-1-strong-hover: #a93d70;
 @ax-bg-brand-1-strong-pressed: #a33069;
 @ax-bg-brand-2-soft: #fff4ee;
+@ax-bg-brand-2-soft-a: #ff5a0011;
 @ax-bg-brand-2-hover: #fdebe0;
 @ax-bg-brand-2-hover-a: #ef5b001f;
 @ax-bg-brand-2-moderate: #fdebe0;
@@ -88,6 +95,7 @@
 @ax-bg-brand-2-strong-hover: #915541;
 @ax-bg-brand-2-strong-pressed: #874e3b;
 @ax-bg-brand-3-soft: #eef6fc;
+@ax-bg-brand-3-soft-a: #0078d211;
 @ax-bg-brand-3-hover: #e3eff7;
 @ax-bg-brand-3-hover-a: #006eb71c;
 @ax-bg-brand-3-moderate: #e3eff7;
@@ -100,6 +108,7 @@
 @ax-bg-brand-3-strong-hover: #246b91;
 @ax-bg-brand-3-strong-pressed: #156389;
 @ax-bg-meta-1-soft: #f7f5f9;
+@ax-bg-meta-1-soft-a: #3300660a;
 @ax-bg-meta-1-hover: #f0edf4;
 @ax-bg-meta-1-hover-a: #2b006412;
 @ax-bg-meta-1-moderate: #f0edf4;
@@ -112,6 +121,7 @@
 @ax-bg-meta-1-strong-hover: #725a91;
 @ax-bg-meta-1-strong-pressed: #6a5289;
 @ax-bg-meta-2-soft: #f4f9d1;
+@ax-bg-meta-2-soft-a: #c3de002e;
 @ax-bg-meta-2-hover: #ebf4a9;
 @ax-bg-meta-2-hover-a: #c4df0056;
 @ax-bg-meta-2-moderate: #ebf4a9;
@@ -129,6 +139,7 @@
 @ax-bg-sunken: #ecedef;
 @ax-bg-overlay: #021431;
 @ax-bg-soft: #f5f6f7;
+@ax-bg-soft-a: #001a330a;
 @ax-bg-hover: #ecedef;
 @ax-bg-hover-a: #000e2913;
 @ax-bg-moderate: #ecedef;
@@ -225,7 +236,7 @@
 @ax-border-meta-2-subtle: #d0dc00;
 @ax-border-meta-2-subtle-a: #d0dc00;
 @ax-border-meta-2-strong: #646900;
-@ax-border-default: #818997;
+@ax-border-default: #6f7785;
 @ax-border-subtle: #cfd3d8;
 @ax-border-subtle-a: #00163030;
 @ax-border-strong: #6f7785;

package/dist/darkside/static/tokens.scss

@@ -4,6 +4,7 @@
 $ax-shadow-dialog: 0px 0px 1px 0px rgba(7 9 13 / 0.02), 0px 2px 5px 0px rgba(7 9 13 / 0.10), 0px 5px 12px 0px rgba(7 9 13 / 0.12); // Used for dialog elements like modals and popovers.
 $ax-opacity-disabled: 0.3; // Used for setting opacity on disabled elements.
 $ax-bg-accent-soft: #f1f7ff;
+$ax-bg-accent-soft-a: #006eff0e;
 $ax-bg-accent-hover: #e4eeff;
 $ax-bg-accent-hover-a: #005fff1b;
 $ax-bg-accent-moderate: #e4eeff;
@@ -16,6 +17,7 @@ $ax-bg-accent-strong: #2277d5;
 $ax-bg-accent-strong-hover: #0063c1;
 $ax-bg-accent-strong-pressed: #005bb6;
 $ax-bg-success-soft: #e2fde8;
+$ax-bg-success-soft-a: #00ee351d;
 $ax-bg-success-hover: #d5f6db;
 $ax-bg-success-hover-a: #00c9252a;
 $ax-bg-success-moderate: #d5f6db;
@@ -28,6 +30,7 @@ $ax-bg-success-strong: #00893c;
 $ax-bg-success-strong-hover: #007629;
 $ax-bg-success-strong-pressed: #006c1f;
 $ax-bg-warning-soft: #fff5e4;
+$ax-bg-warning-soft-a: #ffa1001b;
 $ax-bg-warning-hover: #ffebc7;
 $ax-bg-warning-hover-a: #ffa40038;
 $ax-bg-warning-moderate: #ffebc7;
@@ -40,6 +43,7 @@ $ax-bg-warning-strong: #c95100;
 $ax-bg-warning-strong-hover: #ac4400;
 $ax-bg-warning-strong-pressed: #a03e00;
 $ax-bg-danger-soft: #fff2f7;
+$ax-bg-danger-soft-a: #ff00630d;
 $ax-bg-danger-hover: #ffe8f0;
 $ax-bg-danger-hover-a: #ff005917;
 $ax-bg-danger-moderate: #ffe8f0;
@@ -52,6 +56,7 @@ $ax-bg-danger-strong: #e22a49;
 $ax-bg-danger-strong-hover: #cb0035;
 $ax-bg-danger-strong-pressed: #bc002a;
 $ax-bg-info-soft: #eef6fc;
+$ax-bg-info-soft-a: #0078d211;
 $ax-bg-info-hover: #e3eff7;
 $ax-bg-info-hover-a: #006eb71c;
 $ax-bg-info-moderate: #e3eff7;
@@ -64,6 +69,7 @@ $ax-bg-info-strong: #417da0;
 $ax-bg-info-strong-hover: #246b91;
 $ax-bg-info-strong-pressed: #156389;
 $ax-bg-brand-1-soft: #fbf3f6;
+$ax-bg-brand-1-soft-a: #aa00400c;
 $ax-bg-brand-1-hover: #f8eaef;
 $ax-bg-brand-1-hover-a: #aa003d15;
 $ax-bg-brand-1-moderate: #f8eaef;
@@ -76,6 +82,7 @@ $ax-bg-brand-1-strong: #b65781;
 $ax-bg-brand-1-strong-hover: #a93d70;
 $ax-bg-brand-1-strong-pressed: #a33069;
 $ax-bg-brand-2-soft: #fff4ee;
+$ax-bg-brand-2-soft-a: #ff5a0011;
 $ax-bg-brand-2-hover: #fdebe0;
 $ax-bg-brand-2-hover-a: #ef5b001f;
 $ax-bg-brand-2-moderate: #fdebe0;
@@ -88,6 +95,7 @@ $ax-bg-brand-2-strong: #a9654e;
 $ax-bg-brand-2-strong-hover: #915541;
 $ax-bg-brand-2-strong-pressed: #874e3b;
 $ax-bg-brand-3-soft: #eef6fc;
+$ax-bg-brand-3-soft-a: #0078d211;
 $ax-bg-brand-3-hover: #e3eff7;
 $ax-bg-brand-3-hover-a: #006eb71c;
 $ax-bg-brand-3-moderate: #e3eff7;
@@ -100,6 +108,7 @@ $ax-bg-brand-3-strong: #417da0;
 $ax-bg-brand-3-strong-hover: #246b91;
 $ax-bg-brand-3-strong-pressed: #156389;
 $ax-bg-meta-1-soft: #f7f5f9;
+$ax-bg-meta-1-soft-a: #3300660a;
 $ax-bg-meta-1-hover: #f0edf4;
 $ax-bg-meta-1-hover-a: #2b006412;
 $ax-bg-meta-1-moderate: #f0edf4;
@@ -112,6 +121,7 @@ $ax-bg-meta-1-strong: #846ca4;
 $ax-bg-meta-1-strong-hover: #725a91;
 $ax-bg-meta-1-strong-pressed: #6a5289;
 $ax-bg-meta-2-soft: #f4f9d1;
+$ax-bg-meta-2-soft-a: #c3de002e;
 $ax-bg-meta-2-hover: #ebf4a9;
 $ax-bg-meta-2-hover-a: #c4df0056;
 $ax-bg-meta-2-moderate: #ebf4a9;
@@ -129,6 +139,7 @@ $ax-bg-raised: white;
 $ax-bg-sunken: #ecedef;
 $ax-bg-overlay: rgba(2, 20, 49, 0.49);
 $ax-bg-soft: #f5f6f7;
+$ax-bg-soft-a: #001a330a;
 $ax-bg-hover: #ecedef;
 $ax-bg-hover-a: #000e2913;
 $ax-bg-moderate: #ecedef;
@@ -225,7 +236,7 @@ $ax-border-meta-2: #757c00;
 $ax-border-meta-2-subtle: #d0dc00;
 $ax-border-meta-2-subtle-a: #d0dc00;
 $ax-border-meta-2-strong: #646900;
-$ax-border-default: #818997;
+$ax-border-default: #6f7785;
 $ax-border-subtle: #cfd3d8;
 $ax-border-subtle-a: #00163030;
 $ax-border-strong: #6f7785;