@dialpad/dialtone-css 8.80.0-next.2 → 8.80.0-next.3

package/lib/dist/js/dialtone_migration_helper/tests/utility-class-to-token-stops.test.mjs

@@ -0,0 +1,170 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import config from '../configs/utility-class-to-token-stops.mjs';
+import { applyConfig } from './helpers.mjs';
+
+const apply = (input) => applyConfig(config, input);
+
+describe('utility-class-to-token-stops config', () => {
+  // ─── Off-scale pixel-indexed sizing classes (DLT-3330) ────────────────
+  //
+  // Old legacy Tier 1 calc-based selectors → new hyphenated px-suffixed selectors.
+  // d-w1 → d-w-1px, d-h2 → d-h-2px, d-hmn8 → d-hmn-8px, etc.
+
+  describe('off-scale sizing — legacy small-value selectors migrate to Npx', () => {
+    const prefixes = ['h', 'w', 'hmn', 'hmx', 'wmn', 'wmx'];
+    const pxValues = [1, 2, 8, 20, 24];
+
+    for (const prefix of prefixes) {
+      for (const px of pxValues) {
+        const from = `d-${prefix}${px}`;
+        const to = `d-${prefix}-${px}px`;
+        it(`${from} → ${to}`, () => {
+          assert.equal(apply(`<div class="${from}" />`), `<div class="${to}" />`);
+        });
+      }
+    }
+  });
+
+  // ─── Existing scale-indexed rewrites unchanged (smoke tests) ──────────
+
+  describe('scale-indexed sizing — unchanged', () => {
+    const cases = [
+      ['d-h16', 'd-h-25'],
+      ['d-w32', 'd-w-50'],
+      ['d-w64', 'd-w-100'],
+      ['d-hmn96', 'd-hmn-150'],
+      ['d-hmx128', 'd-hmx-200'],
+      ['d-w1024', 'd-w-1600'],
+      ['d-wmn16', 'd-wmn-25'],
+    ];
+    for (const [from, to] of cases) {
+      it(`${from} → ${to}`, () => {
+        assert.equal(apply(`<div class="${from}" />`), `<div class="${to}" />`);
+      });
+    }
+  });
+
+  // ─── Regex disambiguation: longer alternatives must win over shorter ones ─
+
+  describe('regex alternation — longest match wins', () => {
+    it('d-w1024 matches 1024, not 1', () => {
+      assert.equal(apply(`<div class="d-w1024" />`), `<div class="d-w-1600" />`);
+    });
+    it('d-w128 matches 128, not 1 or 2', () => {
+      assert.equal(apply(`<div class="d-w128" />`), `<div class="d-w-200" />`);
+    });
+    it('d-w24 matches 24 (off-scale), not 2', () => {
+      assert.equal(apply(`<div class="d-w24" />`), `<div class="d-w-24px" />`);
+    });
+    it('d-h20 matches 20 (off-scale), not 2', () => {
+      assert.equal(apply(`<div class="d-h20" />`), `<div class="d-h-20px" />`);
+    });
+  });
+
+  // ─── Spacing/margin/padding classes still map to spacing stops ────────
+
+  describe('margin / padding / gap — unchanged behavior', () => {
+    const cases = [
+      ['d-m8', 'd-m-100'],     // margin 8px → spacing-100
+      ['d-p8', 'd-p-100'],     // padding 8px → spacing-100
+      ['d-g8', 'd-g-100'],     // gap 8px → spacing-100
+      ['d-mt16', 'd-mt-200'],  // margin-top 16px → spacing-200
+      ['d-pb24', 'd-pb-300'],  // padding-bottom 24px → spacing-300
+    ];
+    for (const [from, to] of cases) {
+      it(`${from} → ${to}`, () => {
+        assert.equal(apply(`<div class="${from}" />`), `<div class="${to}" />`);
+      });
+    }
+  });
+
+  // ─── Multi-class strings ──────────────────────────────────────────────
+
+  describe('multi-class migration', () => {
+    it('migrates each off-scale sizing class in a space-separated list', () => {
+      const input = `<div class="d-w1 d-h2 d-size-25 d-hmn8 d-wmx24" />`;
+      const expected = `<div class="d-w-1px d-h-2px d-size-25 d-hmn-8px d-wmx-24px" />`;
+      assert.equal(apply(input), expected);
+    });
+  });
+
+  // ─── Border-radius migration (DLT-3329) ───────────────────────────────
+
+  describe('border-radius all-corners — legacy pixel-suffix to token stop', () => {
+    const cases = [
+      ['d-bar0', 'd-bar-0'],
+      ['d-bar1', 'd-bar-100'],
+      ['d-bar2', 'd-bar-200'],
+      ['d-bar4', 'd-bar-300'],
+      ['d-bar6', 'd-bar-350'],
+      ['d-bar8', 'd-bar-400'],
+      ['d-bar12', 'd-bar-450'],
+      ['d-bar16', 'd-bar-500'],
+      ['d-bar24', 'd-bar-550'],
+      ['d-bar32', 'd-bar-600'],
+    ];
+    for (const [from, to] of cases) {
+      it(`${from} → ${to}`, () => {
+        assert.equal(apply(`<div class="${from}" />`), `<div class="${to}" />`);
+      });
+    }
+  });
+
+  describe('border-radius side-pair numeric — physical prefix to logical prefix', () => {
+    const cases = [
+      ['d-btr6', 'd-bbsr-350'],     // top    → block-start pair
+      ['d-bbr8', 'd-bber-400'],     // bottom → block-end pair
+      ['d-blr12', 'd-bisr-450'],    // left   → inline-start pair
+      ['d-brr16', 'd-bier-500'],    // right  → inline-end pair
+      ['d-btr24', 'd-bbsr-550'],    // new 550 stop
+      ['d-bbr32', 'd-bber-600'],
+      ['d-blr0', 'd-bisr-0'],
+      ['d-brr1', 'd-bier-100'],
+    ];
+    for (const [from, to] of cases) {
+      it(`${from} → ${to}`, () => {
+        assert.equal(apply(`<div class="${from}" />`), `<div class="${to}" />`);
+      });
+    }
+  });
+
+  describe('border-radius side-pair keyword — pill/circle', () => {
+    const cases = [
+      ['d-btr-pill', 'd-bbsr-pill'],
+      ['d-btr-circle', 'd-bbsr-circle'],
+      ['d-bbr-pill', 'd-bber-pill'],
+      ['d-bbr-circle', 'd-bber-circle'],
+      ['d-blr-pill', 'd-bisr-pill'],
+      ['d-blr-circle', 'd-bisr-circle'],
+      ['d-brr-pill', 'd-bier-pill'],
+      ['d-brr-circle', 'd-bier-circle'],
+    ];
+    for (const [from, to] of cases) {
+      it(`${from} → ${to}`, () => {
+        assert.equal(apply(`<div class="${from}" />`), `<div class="${to}" />`);
+      });
+    }
+  });
+
+  describe('border-radius canonical keyword names — unchanged', () => {
+    const cases = [
+      'd-bar-pill',
+      'd-bar-circle',
+      'd-bar-unset',
+    ];
+    for (const unchanged of cases) {
+      it(`${unchanged} stays as ${unchanged}`, () => {
+        assert.equal(apply(`<div class="${unchanged}" />`), `<div class="${unchanged}" />`);
+      });
+    }
+  });
+
+  describe('border-radius multi-class migration', () => {
+    it('rewrites mixed legacy classes in one string', () => {
+      const input = `<div class="d-bar6 d-btr8 d-blr-pill d-p-200" />`;
+      const expected = `<div class="d-bar-350 d-bbsr-400 d-bisr-pill d-p-200" />`;
+      assert.equal(apply(input), expected);
+    });
+  });
+});

package/lib/dist/tokens/tokens-101-dark.css

@@ -69,7 +69,7 @@
   --dt-presence-color-offline: var(--dt-color-black-500);
   --dt-presence-color-busy: var(--dt-color-gold-700);
   --dt-presence-color-unavailable: var(--dt-color-red-700);
-  --dt-presence-color-available: var(--dt-color-green-600);
+  --dt-presence-color-available: var(--dt-color-green-500);
   --dt-icon-size-border-100: var(--dt-size-border-100);
   --dt-icon-size-800: calc(var(--dt-size-base) * 6);
   --dt-icon-size-700: calc(var(--dt-size-base) * 4.75);
@@ -100,12 +100,13 @@
   --dt-badge-color-foreground-ai: var(--dt-color-neutral-white);
   --dt-badge-color-foreground-bulletin-subtle: var(--dt-color-purple-900);
   --dt-badge-color-foreground-bulletin: var(--dt-color-black-50);
+  --dt-badge-color-foreground-success: var(--dt-color-green-1000);
   --dt-badge-color-foreground-default: var(--dt-color-black-1000);
   --dt-badge-color-background-ai: var(--dt-color-gradient-gold-red-magenta-purple);
   --dt-badge-color-background-bulletin-subtle: var(--dt-color-purple-200);
   --dt-badge-color-background-critical: var(--dt-color-red-200);
   --dt-badge-color-background-warning: var(--dt-color-gold-200);
-  --dt-badge-color-background-success: var(--dt-color-green-200);
+  --dt-badge-color-background-positive: var(--dt-color-green-200);
   --dt-badge-color-background-info: var(--dt-color-blue-200);
   --dt-avatar-color-foreground-dark: var(--dt-color-neutral-black); /* Text color for light avatar backgrounds (variants 6-9) */
   --dt-avatar-color-foreground-light: var(--dt-color-neutral-white); /* Text color for dark avatar backgrounds (variants 0-5) */
@@ -133,9 +134,9 @@
   --dt-theme-mention-color-foreground: var(--dt-color-black-50);
   --dt-theme-presence-color-background-busy: var(--dt-color-gold-700);
   --dt-theme-presence-color-background-busy-unavailable: var(--dt-color-red-700);
-  --dt-theme-presence-color-background-available: var(--dt-color-green-600);
+  --dt-theme-presence-color-background-available: var(--dt-color-green-500);
   --dt-theme-color-base: var(--dt-color-black-900);
-  --dt-action-color-background-positive-primary-hover: var(--dt-color-green-700);
+  --dt-action-color-background-positive-primary-hover: var(--dt-color-green-500);
   --dt-action-color-background-positive-primary-default: var(--dt-color-green-600);
   --dt-action-color-background-positive-default: var(--dt-color-neutral-transparent);
   --dt-action-color-background-muted-default: var(--dt-color-neutral-transparent);
@@ -437,32 +438,44 @@
   --dt-color-border-ai: var(--dt-color-gradient-gold-red-magenta-purple);
   --dt-color-border-focus: var(--dt-color-blue-500);
   --dt-color-border-brand-strong-inverted: var(--dt-color-purple-200);
+  --dt-color-border-info-strong-inverted: var(--dt-color-blue-200);
   --dt-color-border-warning-strong-inverted: var(--dt-color-gold-300);
   --dt-color-border-success-strong-inverted: var(--dt-color-green-200);
+  --dt-color-border-positive-strong-inverted: var(--dt-color-green-200);
   --dt-color-border-critical-strong-inverted: var(--dt-color-red-300);
-  --dt-color-border-brand-subtle-inverted: var(--dt-color-purple-800);
+  --dt-color-border-brand-subtle-inverted: var(--dt-color-purple-900);
+  --dt-color-border-info-subtle-inverted: var(--dt-color-blue-900);
   --dt-color-border-warning-subtle-inverted: var(--dt-color-gold-800);
-  --dt-color-border-success-subtle-inverted: var(--dt-color-green-800);
+  --dt-color-border-success-subtle-inverted: var(--dt-color-green-600);
+  --dt-color-border-positive-subtle-inverted: var(--dt-color-green-900);
   --dt-color-border-critical-subtle-inverted: var(--dt-color-red-800);
   --dt-color-border-brand-inverted: var(--dt-color-purple-400);
+  --dt-color-border-info-inverted: var(--dt-color-blue-300);
   --dt-color-border-warning-inverted: var(--dt-color-gold-500);
   --dt-color-border-success-inverted: var(--dt-color-green-300);
+  --dt-color-border-positive-inverted: var(--dt-color-green-200);
   --dt-color-border-critical-inverted: var(--dt-color-red-500);
   --dt-color-border-bold-inverted: oklch(0 0 0 / 0.5);
   --dt-color-border-moderate-inverted: oklch(0 0 0 / 0.34);
   --dt-color-border-default-inverted: oklch(0 0 0 / 0.18);
   --dt-color-border-subtle-inverted: oklch(0 0 0 / 0.1);
   --dt-color-border-brand-strong: var(--dt-color-purple-900);
+  --dt-color-border-info-strong: var(--dt-color-blue-900);
   --dt-color-border-warning-strong: var(--dt-color-gold-900);
   --dt-color-border-success-strong: var(--dt-color-green-800);
+  --dt-color-border-positive-strong: var(--dt-color-green-800);
   --dt-color-border-critical-strong: var(--dt-color-red-900);
   --dt-color-border-brand-subtle: var(--dt-color-purple-500);
+  --dt-color-border-info-subtle: var(--dt-color-blue-300);
   --dt-color-border-warning-subtle: var(--dt-color-gold-600);
-  --dt-color-border-success-subtle: var(--dt-color-green-500);
+  --dt-color-border-success-subtle: var(--dt-color-green-300);
+  --dt-color-border-positive-subtle: var(--dt-color-green-300);
   --dt-color-border-critical-subtle: var(--dt-color-red-300);
   --dt-color-border-brand: var(--dt-color-purple-800);
+  --dt-color-border-info: var(--dt-color-blue-800);
   --dt-color-border-warning: var(--dt-color-gold-800);
-  --dt-color-border-success: var(--dt-color-green-600);
+  --dt-color-border-success: var(--dt-color-green-500);
+  --dt-color-border-positive: var(--dt-color-green-700);
   --dt-color-border-critical: var(--dt-color-red-800);
   --dt-color-border-bold: oklch(1 0 0 / 0.5);
   --dt-color-border-moderate: oklch(1 0 0 / 0.36);
@@ -472,12 +485,14 @@
   --dt-color-surface-backdrop: oklch(0 0 0 / 0.65); /* Background color for a modal-like backdrop. */
   --dt-color-surface-brand-subtle-opaque-inverted: oklch(0.98 0.01 301 / 0.66); /* Info surface as opaque background color. */
   --dt-color-surface-info-subtle-opaque-inverted: oklch(0.98 0.01 248 / 0.66); /* Info surface as opaque background color. */
-  --dt-color-surface-success-subtle-opaque-inverted: oklch(0.98 0.01 141 / 0.66); /* Success subtle surface as opaque background color. */
+  --dt-color-surface-success-subtle-opaque-inverted: oklch(0.99 0.01 124 / 0.66); /* Success subtle surface as opaque background color. */
+  --dt-color-surface-positive-subtle-opaque-inverted: oklch(0.99 0.01 124 / 0.66); /* Positive subtle surface as opaque background color. */
   --dt-color-surface-warning-subtle-opaque-inverted: oklch(0.98 0.03 95.9 / 0.3); /* Warning subtle surface as opaque background color */
   --dt-color-surface-critical-subtle-opaque-inverted: oklch(0.93 0.03 15.2 / 0.8);
   --dt-color-surface-brand-opaque-inverted: oklch(0.93 0.03 302 / 0.8); /* Info surface as opaque background color. */
   --dt-color-surface-info-opaque-inverted: oklch(0.96 0.01 248 / 0.6); /* Info surface as opaque background color. */
-  --dt-color-surface-success-opaque-inverted: oklch(0.92 0.09 126 / 0.3); /* Success surface as opaque background color. */
+  --dt-color-surface-success-opaque-inverted: oklch(0.95 0.07 128 / 0.3); /* Success surface as opaque background color. */
+  --dt-color-surface-positive-opaque-inverted: oklch(0.95 0.07 128 / 0.3); /* Positive surface as opaque background color. */
   --dt-color-surface-warning-opaque-inverted: oklch(0.93 0.1 93.2 / 0.5);
   --dt-color-surface-critical-opaque-inverted: oklch(0.82 0.07 24.1 / 0.5);
   --dt-color-surface-contrast-opaque-inverted: oklch(0 0 0 / 0.97); /* Contrast surface as opaque background color. */
@@ -487,17 +502,19 @@
   --dt-color-surface-secondary-opaque-inverted: oklch(0 0 0 / 0.04);
   --dt-color-surface-brand-strong-inverted: var(--dt-color-purple-400);
   --dt-color-surface-info-strong-inverted: var(--dt-color-blue-300);
-  --dt-color-surface-success-strong-inverted: var(--dt-color-green-300); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
+  --dt-color-surface-positive-strong-inverted: var(--dt-color-green-950); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
   --dt-color-surface-warning-strong-inverted: var(--dt-color-gold-700);
   --dt-color-surface-critical-strong-inverted: var(--dt-color-red-500);
   --dt-color-surface-brand-subtle-inverted: var(--dt-color-purple-1000); /* A softer version of the default informational surface. */
   --dt-color-surface-info-subtle-inverted: var(--dt-color-blue-1000); /* A softer version of the default informational surface. */
   --dt-color-surface-success-subtle-inverted: var(--dt-color-green-1000); /* A softer version of the default success surface. */
+  --dt-color-surface-positive-subtle-inverted: var(--dt-color-green-1000); /* A softer version of the default positive surface. */
   --dt-color-surface-warning-subtle-inverted: var(--dt-color-gold-1000); /* A softer version of the default warning surface. */
   --dt-color-surface-critical-subtle-inverted: var(--dt-color-red-1000); /* A softer version of the Critical surface. */
   --dt-color-surface-brand-inverted: var(--dt-color-purple-950); /* Background surface color containing messaging or elements communicated as generally informational. */
   --dt-color-surface-info-inverted: var(--dt-color-blue-950); /* Background surface color containing messaging or elements communicated as generally informational. */
-  --dt-color-surface-success-inverted: var(--dt-color-green-950); /* Background surface color containing messaging or elements expressing a positive or successful state. */
+  --dt-color-surface-success-inverted: var(--dt-color-green-900); /* Background surface color containing messaging or elements expressing a positive or successful state. */
+  --dt-color-surface-positive-inverted: var(--dt-color-green-900); /* Background surface color containing messaging or elements expressing a positive or successful state. */
   --dt-color-surface-warning-inverted: var(--dt-color-gold-950); /* Background surface color highlighting messaging or elements that may require user's attention. */
   --dt-color-surface-critical-inverted: var(--dt-color-red-950); /* Background surface color containing error, danger, or otherwise critical messaging or elements. */
   --dt-color-surface-contrast-inverted: var(--dt-color-black-100); /* An inverted surface for lightened content and elements, most likely paired with inverted foreground colors. */
@@ -508,12 +525,14 @@
   --dt-color-surface-primary-inverted: var(--dt-color-black-1000); /* An inverted surface for lightened content and elements, most likely paired with inverted foreground colors. */
   --dt-color-surface-brand-subtle-opaque: oklch(0.16 0.08 292 / 0.65);
   --dt-color-surface-info-subtle-opaque: oklch(0.14 0.03 244 / 0.7);
-  --dt-color-surface-success-subtle-opaque: oklch(0.17 0.04 167 / 0.6);
+  --dt-color-surface-success-subtle-opaque: oklch(0.22 0.06 130 / 0.6);
+  --dt-color-surface-positive-subtle-opaque: oklch(0.22 0.06 130 / 0.6);
   --dt-color-surface-warning-subtle-opaque: oklch(0.24 0.05 74.2 / 0.7);
   --dt-color-surface-critical-subtle-opaque: oklch(0.17 0.07 16.5 / 0.6);
   --dt-color-surface-brand-opaque: oklch(0.23 0.13 285 / 0.7);
   --dt-color-surface-info-opaque: oklch(0.22 0.05 248 / 0.4);
-  --dt-color-surface-success-opaque: oklch(0.37 0.08 151 / 0.28);
+  --dt-color-surface-success-opaque: oklch(0.44 0.12 133 / 0.28);
+  --dt-color-surface-positive-opaque: oklch(0.44 0.12 133 / 0.28);
   --dt-color-surface-warning-opaque: oklch(0.48 0.1 68.3 / 0.55);
   --dt-color-surface-critical-opaque: oklch(0.4 0.16 11.4 / 0.2);
   --dt-color-surface-contrast-opaque: oklch(1 0 0 / 0.97);
@@ -523,17 +542,20 @@
   --dt-color-surface-secondary-opaque: oklch(0.92 0 0 / 0.03);
   --dt-color-surface-brand-strong: var(--dt-color-purple-800);
   --dt-color-surface-info-strong: var(--dt-color-blue-600);
-  --dt-color-surface-success-strong: var(--dt-color-green-600);
+  --dt-color-surface-success-strong: var(--dt-color-green-500);
+  --dt-color-surface-positive-strong: var(--dt-color-green-500);
   --dt-color-surface-warning-strong: var(--dt-color-gold-700);
   --dt-color-surface-critical-strong: var(--dt-color-red-800);
   --dt-color-surface-brand-subtle: var(--dt-color-purple-50); /* A softer version of the default informational surface. */
   --dt-color-surface-info-subtle: oklch(0.13 0.05 248);
-  --dt-color-surface-success-subtle: oklch(0.12 0.05 156);
+  --dt-color-surface-success-subtle: oklch(0.18 0.1 133);
+  --dt-color-surface-positive-subtle: oklch(0.22 0.12 133);
   --dt-color-surface-warning-subtle: var(--dt-color-gold-100);
   --dt-color-surface-critical-subtle: oklch(0.12 0.09 17.8);
   --dt-color-surface-brand: var(--dt-color-purple-100); /* Background surface color containing messaging or elements communicated as generally informational. */
   --dt-color-surface-info: var(--dt-color-blue-100); /* Background surface color containing messaging or elements communicated as generally informational. */
   --dt-color-surface-success: var(--dt-color-green-100); /* Background surface color containing messaging or elements expressing a positive or successful state. */
+  --dt-color-surface-positive: var(--dt-color-green-100); /* Background surface color containing messaging or elements expressing a positive or successful state. */
   --dt-color-surface-warning: var(--dt-color-gold-200);
   --dt-color-surface-critical: var(--dt-color-red-100); /* Background surface color containing error, danger, or otherwise critical messaging or elements. */
   --dt-color-surface-contrast: var(--dt-color-black-1000);
@@ -549,11 +571,13 @@
   --dt-color-link-warning-hover: var(--dt-color-gold-900);
   --dt-color-link-primary-hover: var(--dt-color-purple-900);
   --dt-color-link-primary: var(--dt-color-purple-800);
+  --dt-color-foreground-info-strong-inverted: var(--dt-color-blue-200); /* Info strong text that sits on high-contrast surfaces or backgrounds. */
+  --dt-color-foreground-info-inverted: var(--dt-color-blue-300); /* Info text that sits on high-contrast surfaces or backgrounds. */
   --dt-color-foreground-warning-inverted: var(--dt-color-gold-300);
-  --dt-color-foreground-success-strong-inverted: var(--dt-color-green-200);
-  --dt-color-foreground-success-inverted: var(--dt-color-green-300);
-  --dt-color-foreground-positive-strong-inverted: var(--dt-color-green-200);
-  --dt-color-foreground-positive-inverted: var(--dt-color-green-300);
+  --dt-color-foreground-success-strong-inverted: var(--dt-color-green-50);
+  --dt-color-foreground-success-inverted: var(--dt-color-green-200);
+  --dt-color-foreground-positive-strong-inverted: var(--dt-color-green-50);
+  --dt-color-foreground-positive-inverted: var(--dt-color-green-200);
   --dt-color-foreground-critical-strong-inverted: var(--dt-color-red-200); /* Critical strong text that sits on high-contrast surfaces or backgrounds */
   --dt-color-foreground-critical-inverted: var(--dt-color-red-500);
   --dt-color-foreground-disabled-inverted: var(--dt-color-black-400); /* Disabled text color that sits on high-contrast surfaces or backgrounds. */
@@ -562,11 +586,13 @@
   --dt-color-foreground-tertiary-inverted: var(--dt-color-black-400);
   --dt-color-foreground-secondary-inverted: var(--dt-color-black-300);
   --dt-color-foreground-primary-inverted: var(--dt-color-neutral-black);
+  --dt-color-foreground-info-strong: var(--dt-color-blue-800);
+  --dt-color-foreground-info: var(--dt-color-blue-700);
   --dt-color-foreground-warning: var(--dt-color-gold-700);
-  --dt-color-foreground-success-strong: var(--dt-color-green-800);
-  --dt-color-foreground-success: var(--dt-color-green-600);
-  --dt-color-foreground-positive-strong: var(--dt-color-green-800);
-  --dt-color-foreground-positive: var(--dt-color-green-600);
+  --dt-color-foreground-success-strong: var(--dt-color-green-700);
+  --dt-color-foreground-success: var(--dt-color-green-500);
+  --dt-color-foreground-positive-strong: var(--dt-color-green-700);
+  --dt-color-foreground-positive: var(--dt-color-green-500);
   --dt-color-foreground-critical-strong: var(--dt-color-red-900);
   --dt-color-foreground-critical: var(--dt-color-red-800);
   --dt-color-foreground-disabled: var(--dt-color-black-600);
@@ -602,6 +628,7 @@
   --dt-button-font-size-xs: var(--dt-font-size-100); /* Extra small Button text size */
   --dt-badge-color-border-default: var(--dt-color-border-subtle);
   --dt-badge-color-background-bulletin: var(--dt-color-surface-brand-strong);
+  --dt-badge-color-background-success: var(--dt-badge-color-background-positive);
   --dt-badge-color-background-default: var(--dt-color-surface-moderate-opaque);
   --dt-shell-presence-color-offline: var(--dt-presence-color-offline);
   --dt-shell-presence-color-busy: var(--dt-presence-color-busy);
@@ -659,13 +686,13 @@
   --dt-theme-topbar-field-color-foreground: oklch(0.92 0 0 / 0.5);
   --dt-theme-topbar-color-background: var(--dt-color-surface-secondary);
   --dt-theme-topbar-color-foreground: oklch(0.92 0 0 / 0.8);
-  --dt-action-color-border-positive-outlined-default: var(--dt-color-border-success);
+  --dt-action-color-border-positive-outlined-default: var(--dt-color-border-positive);
   --dt-action-color-border-muted-outlined-default: var(--dt-color-border-default);
   --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-default-inverted);
   --dt-action-color-border-critical-outlined-default: var(--dt-color-border-critical);
   --dt-action-color-border-base-outlined-default: var(--dt-color-border-brand);
   --dt-action-color-background-positive-primary-active: var(--dt-action-color-background-positive-primary-default);
-  --dt-action-color-background-positive-hover: var(--dt-color-surface-success-opaque);
+  --dt-action-color-background-positive-hover: var(--dt-color-surface-positive-opaque);
   --dt-action-color-background-disabled-default: var(--dt-color-surface-bold-opaque);
   --dt-action-color-background-muted-active: var(--dt-color-surface-bold-opaque);
   --dt-action-color-background-muted-hover: var(--dt-color-surface-moderate-opaque);
@@ -685,7 +712,7 @@
   --dt-inputs-color-background-disabled: var(--dt-color-surface-moderate-opaque);
   --dt-inputs-color-background-default: var(--dt-color-surface-secondary-opaque);
   --dt-inputs-color-border-warning: var(--dt-color-border-warning);
-  --dt-inputs-color-border-success: var(--dt-color-border-success);
+  --dt-inputs-color-border-positive: var(--dt-color-border-positive);
   --dt-inputs-color-border-critical: var(--dt-color-border-critical);
   --dt-inputs-color-border-focus: var(--dt-color-border-focus);
   --dt-inputs-color-border-hover: var(--dt-color-border-moderate);
@@ -806,31 +833,39 @@
   --dt-color-chart-categorical-28: oklch(0.48 0.17 268);
   --dt-color-chart-categorical-26: oklch(0.57 0.17 382);
   --dt-color-chart-categorical-22: oklch(0.36 0.07 366);
-  --dt-color-chart-categorical-21: oklch(0.54 0.15 114);
+  --dt-color-chart-categorical-21: oklch(0.55 0.15 112);
   --dt-color-chart-categorical-20: oklch(0.48 0.17 268);
   --dt-color-chart-categorical-19: oklch(0.47 0.13 241);
   --dt-color-chart-categorical-18: oklch(0.44 0.12 81.8);
   --dt-color-chart-categorical-17: oklch(0.57 0.26 334);
-  --dt-color-chart-categorical-16: oklch(0.55 0.14 134);
+  --dt-color-chart-categorical-16: oklch(0.61 0.16 125);
   --dt-color-chart-categorical-15: oklch(0.59 0.16 396);
   --dt-color-chart-categorical-14: oklch(0.5 0.18 274);
-  --dt-color-chart-categorical-13: oklch(0.57 0.21 398);
+  --dt-color-chart-categorical-13: oklch(0.59 0.22 394);
   --dt-color-chart-categorical-12: oklch(0.51 0.22 324);
   --dt-color-surface-primary-opaque-inverted: oklch(1 0 0 / 0.85); /* Secondary surface as opaque background color. */
   --dt-color-surface-primary-opaque: oklch(0.2 0 0 / 0.9);
   --dt-color-link-disabled-inverted: var(--dt-color-foreground-disabled-inverted);
   --dt-color-link-muted-inverted: var(--dt-color-foreground-secondary-inverted);
+  --dt-color-link-info-inverted-hover: var(--dt-color-foreground-info-strong-inverted);
+  --dt-color-link-info-inverted: var(--dt-color-foreground-info-inverted);
   --dt-color-link-warning-inverted: var(--dt-color-foreground-warning-inverted);
   --dt-color-link-success-inverted-hover: var(--dt-color-foreground-positive-strong-inverted);
   --dt-color-link-success-inverted: var(--dt-color-foreground-positive-inverted);
+  --dt-color-link-positive-inverted-hover: var(--dt-color-foreground-positive-strong-inverted);
+  --dt-color-link-positive-inverted: var(--dt-color-foreground-positive-inverted);
   --dt-color-link-critical-inverted-hover: var(--dt-color-foreground-critical-strong-inverted);
   --dt-color-link-critical-inverted: var(--dt-color-foreground-critical-inverted);
   --dt-color-link-disabled: var(--dt-color-foreground-disabled);
   --dt-color-link-muted-hover: var(--dt-color-foreground-primary);
   --dt-color-link-muted: var(--dt-color-foreground-secondary);
+  --dt-color-link-info-hover: var(--dt-color-foreground-info-strong);
+  --dt-color-link-info: var(--dt-color-foreground-info);
   --dt-color-link-warning: var(--dt-color-foreground-warning);
   --dt-color-link-success-hover: var(--dt-color-foreground-positive-strong);
   --dt-color-link-success: var(--dt-color-foreground-positive); /* positive */
+  --dt-color-link-positive-hover: var(--dt-color-foreground-positive-strong);
+  --dt-color-link-positive: var(--dt-color-foreground-positive); /* positive */
   --dt-color-link-critical-hover: var(--dt-color-foreground-critical-strong);
   --dt-color-link-critical: var(--dt-color-foreground-critical);
   --dt-icon-size-border-500: var(--dt-icon-size-border-400);
@@ -844,10 +879,10 @@
   --dt-theme-sidebar-color-background: var(--dt-theme-topbar-color-background);
   --dt-theme-topbar-profile-color-foreground: var(--dt-theme-topbar-color-foreground);
   --dt-theme-topbar-field-color-background-hover: oklch(0.16 0 0);
-  --dt-action-color-background-positive-active: oklch(0.46 0.08 151 / 0.28);
+  --dt-action-color-background-positive-active: oklch(0.55 0.12 133 / 0.28);
   --dt-action-color-background-critical-active: oklch(0.5 0.16 11.4 / 0.2);
-  --dt-action-color-foreground-positive-hover: var(--dt-color-link-success-hover);
-  --dt-action-color-foreground-positive-default: var(--dt-color-link-success);
+  --dt-action-color-foreground-positive-hover: var(--dt-color-link-positive-hover);
+  --dt-action-color-foreground-positive-default: var(--dt-color-link-positive);
   --dt-action-color-foreground-muted-hover: var(--dt-color-link-muted-hover);
   --dt-action-color-foreground-muted-default: var(--dt-color-link-muted);
   --dt-action-color-foreground-inverted-primary-active: var(--dt-action-color-foreground-inverted-primary-hover);
@@ -855,6 +890,7 @@
   --dt-action-color-foreground-critical-hover: var(--dt-color-link-critical-hover);
   --dt-action-color-foreground-critical-default: var(--dt-color-link-critical);
   --dt-action-color-foreground-base-active: var(--dt-action-color-foreground-base-hover);
+  --dt-inputs-color-border-success: var(--dt-inputs-color-border-positive);
   --dt-typography-button-xl-font-size: var(--dt-button-font-size-xl); /* Text style for extra large button */
   --dt-typography-button-lg-font-size: var(--dt-button-font-size-lg); /* Text style for large button */
   --dt-typography-button-md-font-size: var(--dt-button-font-size-md); /* Text style for medium button */
@@ -928,8 +964,8 @@
   --dt-color-chart-categorical-26-hover: oklch(0.48 0.17 382);
   --dt-color-chart-categorical-22-selected: oklch(0.25 0.07 366);
   --dt-color-chart-categorical-22-hover: oklch(0.31 0.07 366);
-  --dt-color-chart-categorical-21-selected: oklch(0.38 0.15 114);
-  --dt-color-chart-categorical-21-hover: oklch(0.46 0.15 114);
+  --dt-color-chart-categorical-21-selected: oklch(0.39 0.15 112);
+  --dt-color-chart-categorical-21-hover: oklch(0.47 0.15 112);
   --dt-color-chart-categorical-20-selected: oklch(0.34 0.17 268);
   --dt-color-chart-categorical-20-hover: oklch(0.41 0.17 268);
   --dt-color-chart-categorical-19-selected: oklch(0.33 0.13 241);
@@ -938,21 +974,21 @@
   --dt-color-chart-categorical-18-hover: oklch(0.37 0.12 81.8);
   --dt-color-chart-categorical-17-selected: oklch(0.4 0.26 334);
   --dt-color-chart-categorical-17-hover: oklch(0.48 0.26 334);
-  --dt-color-chart-categorical-16-selected: oklch(0.39 0.14 134);
-  --dt-color-chart-categorical-16-hover: oklch(0.47 0.14 134);
+  --dt-color-chart-categorical-16-selected: oklch(0.43 0.16 125);
+  --dt-color-chart-categorical-16-hover: oklch(0.52 0.16 125);
   --dt-color-chart-categorical-15-selected: oklch(0.41 0.16 396);
   --dt-color-chart-categorical-15-hover: oklch(0.5 0.16 396);
   --dt-color-chart-categorical-14-selected: oklch(0.35 0.18 274);
   --dt-color-chart-categorical-14-hover: oklch(0.42 0.18 274);
-  --dt-color-chart-categorical-13-selected: oklch(0.4 0.21 398);
-  --dt-color-chart-categorical-13-hover: oklch(0.48 0.21 398);
+  --dt-color-chart-categorical-13-selected: oklch(0.41 0.22 394);
+  --dt-color-chart-categorical-13-hover: oklch(0.5 0.22 394);
   --dt-color-chart-categorical-12-selected: oklch(0.36 0.22 324);
   --dt-color-chart-categorical-12-hover: oklch(0.43 0.22 324);
   --dt-color-chart-categorical-30: oklch(0.48 0.12 225);
   --dt-color-chart-categorical-29: oklch(0.47 0.14 413);
-  --dt-color-chart-categorical-27: oklch(0.52 0.14 171);
+  --dt-color-chart-categorical-27: oklch(0.56 0.15 164);
   --dt-color-chart-categorical-25: oklch(0.48 0.16 324);
-  --dt-color-chart-categorical-24: oklch(0.59 0.19 46);
+  --dt-color-chart-categorical-24: oklch(0.6 0.19 43.1);
   --dt-color-chart-categorical-23: oklch(0.53 0.2 346);
   --dt-color-link-disabled-inverted-hover: var(--dt-color-link-disabled-inverted);
   --dt-color-link-disabled-hover: var(--dt-color-link-disabled);
@@ -965,12 +1001,12 @@
   --dt-color-chart-categorical-30-hover: oklch(0.41 0.12 225);
   --dt-color-chart-categorical-29-selected: oklch(0.33 0.14 413);
   --dt-color-chart-categorical-29-hover: oklch(0.4 0.14 413);
-  --dt-color-chart-categorical-27-selected: oklch(0.36 0.14 171);
-  --dt-color-chart-categorical-27-hover: oklch(0.44 0.14 171);
+  --dt-color-chart-categorical-27-selected: oklch(0.39 0.15 164);
+  --dt-color-chart-categorical-27-hover: oklch(0.48 0.15 164);
   --dt-color-chart-categorical-25-selected: oklch(0.34 0.16 324);
   --dt-color-chart-categorical-25-hover: oklch(0.41 0.16 324);
-  --dt-color-chart-categorical-24-selected: oklch(0.41 0.19 46);
-  --dt-color-chart-categorical-24-hover: oklch(0.5 0.19 46);
+  --dt-color-chart-categorical-24-selected: oklch(0.42 0.19 43.1);
+  --dt-color-chart-categorical-24-hover: oklch(0.51 0.19 43.1);
   --dt-color-chart-categorical-23-selected: oklch(0.37 0.2 346);
   --dt-color-chart-categorical-23-hover: oklch(0.45 0.2 346);
   --dt-font-size-100-mobile: 1.2rem;