feat(tokens, css): DLT-3331 rename success tokens and utility classes to positive (#1230)

Author: francisrupert

.claude/rules/css-specificity.md

@@ -12,18 +12,19 @@ Every component selector should aim for a specificity of (0,1,0) — one class.
 ```less
 .d-banner {}           // (0,1,0) — block
 .d-banner__dialog {}   // (0,1,0) — element
-.d-banner--success {}  // (0,1,0) — modifier
+.d-banner--positive {} // (0,1,0) — modifier
 ```
 
 Modifier overrides should use CSS custom properties, not higher specificity:
 
 ```less
 // CORRECT — modifier overrides a variable, same specificity
 .d-banner { --banner-color: var(--dt-color-surface-primary); }
-.d-banner--success { --banner-color: var(--dt-color-surface-success); }
+.d-banner--positive { --banner-color: var(--dt-color-surface-positive); }
 
 // AVOID — parent modifier targets child, inflates to (0,2,0)
-.d-banner--success .d-banner__icon { color: green; }
+.d-banner--positive .d-banner__icon { color: green; }
+.d-banner--warning .d-banner__icon { color: #ffa500; }
 ```
 
 ## Element-Type Descendants: Always Wrap in `:where()`

apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableOffset.vue

@@ -14,7 +14,7 @@
           Fixed Toolbar (48px)
         </dt-text>
       </dt-box>
-      <dt-resizable-panel id="exo-left" initial-size="50p" class="d-bgc-success">
+      <dt-resizable-panel id="exo-left" initial-size="50p" class="d-bgc-positive">
         <dt-box block-size="100p" inline-size="100p" class="d-plc-center">
           <dt-text as="p" align="center" kind="label" size="200" strength="bold" tone="positive" class="d-fco80">
             Left Panel

apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-docs.less

@@ -1067,7 +1067,7 @@ code {
     border-radius: var(--dt-size-radius-400);
 
     &--do {
-      --usage-item-color-border: var(--dt-color-border-success);
+      --usage-item-color-border: var(--dt-color-border-positive);
     }
 
     &--dont {

apps/dialtone-documentation/docs/components/resizable.md

@@ -326,7 +326,7 @@ When a fixed or absolutely positioned element (like a toolbar or header) overlap
     >
       Fixed Toolbar (48px)
     </dt-box>
-    <dt-resizable-panel id="exo-left" initial-size="50p" class="d-bgc-success">
+    <dt-resizable-panel id="exo-left" initial-size="50p" class="d-bgc-positive">
       Left Panel
     </dt-resizable-panel>
     <dt-resizable-handle />

apps/dialtone-documentation/docs/dialtone/whats-new/posts/2026-2-18.md

@@ -219,7 +219,7 @@ The base-to-semantic migration tool auto-replaces only where the mapping is unam
 ```html
 <p class="d-fc-critical">Error message</p>
 <div class="d-bgc-secondary">Card</div>
-<div class="d-bc-success">Success</div>
+<div class="d-bc-positive">Success</div>
 ```
 
 </div>
@@ -337,9 +337,9 @@ The tool leaves unmapped base colors unchanged. Dialtone's ESLint rule (`depreca
 | `gold-50` | `d-bgc-warning-subtle` | `var(--dt-color-surface-warning-subtle)` |
 | `gold-100` | `d-bgc-warning` | `var(--dt-color-surface-warning)` |
 | `gold-400` | `d-bgc-warning-strong` | `var(--dt-color-surface-warning-strong)` |
-| `green-50` | `d-bgc-success-subtle` | `var(--dt-color-surface-success-subtle)` |
-| `green-100` | `d-bgc-success` | `var(--dt-color-surface-success)` |
-| `green-800` | `d-bgc-success-strong` | `var(--dt-color-surface-success-strong)` |
+| `green-50` | `d-bgc-positive-subtle` | `var(--dt-color-surface-positive-subtle)` |
+| `green-100` | `d-bgc-positive` | `var(--dt-color-surface-positive)` |
+| `green-800` | `d-bgc-positive-strong` | `var(--dt-color-surface-positive-strong)` |
 | `blue-50` | `d-bgc-info-subtle` | `var(--dt-color-surface-info-subtle)` |
 | `blue-100` | `d-bgc-info` | `var(--dt-color-surface-info)` |
 | `blue-800` | `d-bgc-info-strong` | `var(--dt-color-surface-info-strong)` |
@@ -354,9 +354,9 @@ The tool leaves unmapped base colors unchanged. Dialtone's ESLint rule (`depreca
 | `red-300` | `d-bc-critical-subtle` | `var(--dt-color-border-critical-subtle)` |
 | `red-600` | `d-bc-critical` | `var(--dt-color-border-critical)` |
 | `red-800` | `d-bc-critical-strong` | `var(--dt-color-border-critical-strong)` |
-| `green-300` | `d-bc-success-subtle` | `var(--dt-color-border-success-subtle)` |
-| `green-700` | `d-bc-success` | `var(--dt-color-border-success)` |
-| `green-900` | `d-bc-success-strong` | `var(--dt-color-border-success-strong)` |
+| `green-300` | `d-bc-positive-subtle` | `var(--dt-color-border-positive-subtle)` |
+| `green-700` | `d-bc-positive` | `var(--dt-color-border-positive)` |
+| `green-900` | `d-bc-positive-strong` | `var(--dt-color-border-positive-strong)` |
 | `gold-300` | `d-bc-warning-subtle` | `var(--dt-color-border-warning-subtle)` |
 | `gold-500` | `d-bc-warning` | `var(--dt-color-border-warning)` |
 | `gold-700` | `d-bc-warning-strong` | `var(--dt-color-border-warning-strong)` |

apps/dialtone-documentation/docs/guides/migration/color-stops/index.md

@@ -216,7 +216,7 @@ The base-to-semantic migration tool auto-replaces only where the mapping is unam
 ```html
 <p class="d-fc-critical">Error message</p>
 <div class="d-bgc-secondary">Card</div>
-<div class="d-bc-success">Success</div>
+<div class="d-bc-positive">Success</div>
 ```
 
 </div>
@@ -334,9 +334,9 @@ The tool leaves unmapped base colors unchanged. Dialtone's ESLint rule (`depreca
 | `gold-50` | `d-bgc-warning-subtle` | `var(--dt-color-surface-warning-subtle)` |
 | `gold-100` | `d-bgc-warning` | `var(--dt-color-surface-warning)` |
 | `gold-400` | `d-bgc-warning-strong` | `var(--dt-color-surface-warning-strong)` |
-| `green-50` | `d-bgc-success-subtle` | `var(--dt-color-surface-success-subtle)` |
-| `green-100` | `d-bgc-success` | `var(--dt-color-surface-success)` |
-| `green-800` | `d-bgc-success-strong` | `var(--dt-color-surface-success-strong)` |
+| `green-50` | `d-bgc-positive-subtle` | `var(--dt-color-surface-positive-subtle)` |
+| `green-100` | `d-bgc-positive` | `var(--dt-color-surface-positive)` |
+| `green-800` | `d-bgc-positive-strong` | `var(--dt-color-surface-positive-strong)` |
 | `blue-50` | `d-bgc-info-subtle` | `var(--dt-color-surface-info-subtle)` |
 | `blue-100` | `d-bgc-info` | `var(--dt-color-surface-info)` |
 | `blue-800` | `d-bgc-info-strong` | `var(--dt-color-surface-info-strong)` |
@@ -351,9 +351,9 @@ The tool leaves unmapped base colors unchanged. Dialtone's ESLint rule (`depreca
 | `red-300` | `d-bc-critical-subtle` | `var(--dt-color-border-critical-subtle)` |
 | `red-600` | `d-bc-critical` | `var(--dt-color-border-critical)` |
 | `red-800` | `d-bc-critical-strong` | `var(--dt-color-border-critical-strong)` |
-| `green-300` | `d-bc-success-subtle` | `var(--dt-color-border-success-subtle)` |
-| `green-700` | `d-bc-success` | `var(--dt-color-border-success)` |
-| `green-900` | `d-bc-success-strong` | `var(--dt-color-border-success-strong)` |
+| `green-300` | `d-bc-positive-subtle` | `var(--dt-color-border-positive-subtle)` |
+| `green-700` | `d-bc-positive` | `var(--dt-color-border-positive)` |
+| `green-900` | `d-bc-positive-strong` | `var(--dt-color-border-positive-strong)` |
 | `gold-300` | `d-bc-warning-subtle` | `var(--dt-color-border-warning-subtle)` |
 | `gold-500` | `d-bc-warning` | `var(--dt-color-border-warning)` |
 | `gold-700` | `d-bc-warning-strong` | `var(--dt-color-border-warning-strong)` |

apps/dialtone-documentation/docs/utilities/borders/color.md

@@ -19,7 +19,7 @@ Use `d-bc-{color}` to set an element's border color.
   <div class="d-p-200 d-ba d-baw2 d-bc-moderate">Moderate</div>
   <div class="d-p-200 d-ba d-baw2 d-bc-bold">Bold</div>
   <div class="d-p-200 d-ba d-baw2 d-bc-critical">Critical</div>
-  <div class="d-p-200 d-ba d-baw2 d-bc-success">Success</div>
+  <div class="d-p-200 d-ba d-baw2 d-bc-positive">Positive</div>
   <div class="d-p-200 d-ba d-baw2 d-bc-warning">Warning</div>
 </dt-stack>
 ```

apps/dialtone-documentation/docs/utilities/index.md

@@ -218,9 +218,9 @@ Apply a [semantic surface color](/utilities/backgrounds/color.md) to convey some
     <dt-icon name="alert-circle" size="200" />
     <dt-text>Info</dt-text>
   </dt-stack>
-  <dt-stack direction="row" gap="100" class="d-bgc-success-strong d-p-100">
+  <dt-stack direction="row" gap="100" class="d-bgc-positive-strong d-p-100">
     <dt-icon name="check-circle" size="200" />
-    <dt-text>Success</dt-text>
+    <dt-text>Positive</dt-text>
   </dt-stack>
 </dt-stack>
 ```
@@ -240,9 +240,9 @@ Use the [DtText](/components/text.html) component for text styling. It provides
     <dt-icon name="alert-circle" size="200" />
     <dt-text kind="label" :size="200">Info</dt-text>
   </dt-stack>
-  <dt-stack direction="row" gap="100" class="d-bgc-success-strong d-p-100">
+  <dt-stack direction="row" gap="100" class="d-bgc-positive-strong d-p-100">
     <dt-icon name="check-circle" size="200" />
-    <dt-text kind="label" :size="200">Success</dt-text>
+    <dt-text kind="label" :size="200">Positive</dt-text>
   </dt-stack>
 </dt-stack>
 ```
@@ -262,9 +262,9 @@ Refine the spacing by adjusting the [Stack](/components/stack.md) `gap` prop and
     <dt-icon name="alert-circle" size="200" />
     <dt-text kind="label" :size="200">Info</dt-text>
   </dt-stack>
-  <dt-stack direction="row" gap="50" class="d-bgc-success-strong d-py-50 d-px-100">
+  <dt-stack direction="row" gap="50" class="d-bgc-positive-strong d-py-50 d-px-100">
     <dt-icon name="check-circle" size="200" />
-    <dt-text kind="label" :size="200">Success</dt-text>
+    <dt-text kind="label" :size="200">Positive</dt-text>
   </dt-stack>
 </dt-stack>
 ```
@@ -284,9 +284,9 @@ Add `d-bar-300` to each item for subtle rounded corners.
     <dt-icon name="alert-circle" size="200" />
     <dt-text kind="label" :size="200">Info</dt-text>
   </dt-stack>
-  <dt-stack direction="row" gap="50" class="d-bar-300 d-bgc-success-strong d-py-50 d-px-100">
+  <dt-stack direction="row" gap="50" class="d-bar-300 d-bgc-positive-strong d-py-50 d-px-100">
     <dt-icon name="check-circle" size="200" />
-    <dt-text kind="label" :size="200">Success</dt-text>
+    <dt-text kind="label" :size="200">Positive</dt-text>
   </dt-stack>
 </dt-stack>
 ```

packages/combinator/src/variants/variants_select_menu.js

@@ -46,7 +46,7 @@ export default {
     },
   },
 
-  'success validation': {
+  'positive validation': {
     props: {
       label: { initialValue: 'Label' },
       options: {
@@ -56,7 +56,7 @@ export default {
           { value: 3, label: 'Option 3' },
         ],
       },
-      messages: { initialValue: [{ message: 'Success validation message', type: 'success' }] },
+      messages: { initialValue: [{ message: 'Positive validation message', type: 'positive' }] },
     },
   },
 

packages/dialtone-css/.github/CONTRIBUTING.md

@@ -30,7 +30,7 @@ Component class names use the [Block Element Modifier (BEM)](http://getbem.com/n
 ```less
 .d-banner {} // Block
 .d-banner__dialog {} // Element
-.d-banner--success {} // Modifier
+.d-banner--positive {} // Modifier
 ```
 
 ### Selector specificity
@@ -52,12 +52,12 @@ When a modifier needs to change a property, prefer overriding a CSS custom prope
   background-color: var(--banner-color-background);
 }
 
-.d-banner--success {
-  --banner-color-background: var(--dt-color-surface-success);
+.d-banner--positive {
+  --banner-color-background: var(--dt-color-surface-positive);
 }
 
 // Avoid — inflates to (0,2,0)
-.d-banner--success .d-banner__icon {
+.d-banner--positive .d-banner__icon {
   color: green;
 }
 ```
@@ -104,7 +104,7 @@ Do **not** wrap the component class itself, BEM modifiers, or state pseudo-class
 |----------|-------------|---------|
 | `.d-banner` | (0,1,0) | Ideal |
 | `.d-banner__dialog` | (0,1,0) | Ideal |
-| `.d-banner--success` | (0,1,0) | Ideal |
+| `.d-banner--positive` | (0,1,0) | Ideal |
 | `.d-table :where(th)` | (0,1,0) | Correct — element wrapped |
 | `.d-table th` | (0,1,1) | Avoid — bare element inflates specificity |
 | `.d-tablist--inverted .d-tab` | (0,2,0) | Acceptable — parent modifier affecting child |