feat: add status color tokens

.changeset/rich-bags-deliver.md

@@ -0,0 +1,22 @@
+---
+"@rhds/tokens": minor
+---
+
+Added status tokens
+
+```css
+button {
+  .light &.danger {
+    background: var(--rh-color-danger-on-light);
+  }
+  .light &.success {
+    background: var(--rh-color-success-on-light);
+  }
+  .dark &.danger {
+    background: var(--rh-color-danger-on-dark);
+  }
+  .dark &.success {
+    background: var(--rh-color-success-on-dark);
+  }
+}
+```

docs/assets/tokens.css

@@ -185,7 +185,7 @@ code {
 .token:is(.value, .name) .copy-button {
   background-color: var(--rh-color-surface-lighter);
   overflow-x: hidden;
-  max-width: 350px;
+  max-width: 400px;
   white-space: pre;
   text-overflow: ellipsis;
 }

tokens/color/border.yml

@@ -47,4 +47,71 @@ color:
         $description: Interactive border color (dark theme)
         attributes:
           category: border
-          type: color
+          type: color
+
+    status:
+      danger:
+        on-light:
+          $value: '{color.red-orange.50}'
+          $description: Danger status border color (light theme)
+          attributes:
+            category: border
+            type: color
+        on-dark:
+          $value: '{color.red-orange.40}'
+          $description: Danger status border color (dark theme)
+          attributes:
+            category: border
+            type: color
+      warning:
+        on-light:
+          $value: '{color.orange.50}'
+          $description: Warning status border color (light theme)
+          attributes:
+            category: border
+            type: color
+        on-dark:
+          $value: '{color.orange.40}'
+          $description: Warning status border color (dark theme)
+          attributes:
+            category: border
+            type: color
+      default:
+        on-light:
+          $value: '{color.gray.60}'
+          $description: Default status border color (light theme)
+          attributes:
+            category: border
+            type: color
+        on-dark:
+          $value: '{color.gray.40}'
+          $description: Default status border color (dark theme)
+          attributes:
+            category: border
+            type: color
+      info:
+        on-light:
+          $value: '{color.purple.50}'
+          $description: Info status border color (light theme)
+          attributes:
+            category: border
+            type: color
+        on-dark:
+          $value: '{color.purple.30}'
+          $description: Info status border color (dark theme)
+          attributes:
+            category: border
+            type: color
+      success:
+        on-light:
+          $value: '{color.green.60}'
+          $description: Success status border color (light theme)
+          attributes:
+            category: border
+            type: color
+        on-dark:
+          $value: '{color.green.40}'
+          $description: Success status border color (dark theme)
+          attributes:
+            category: border
+            type: color

tokens/color/crayon/blue.yaml

@@ -2,7 +2,7 @@ color:
   blue:
     $extensions:
       com.redhat.ux:
-        order: 301
+        order: 306
     10:
       $value: '#E0F0FF'
       $description: Alert - Info background

tokens/color/crayon/orange.yml

@@ -2,7 +2,7 @@ color:
   orange:
     $extensions:
       com.redhat.ux:
-        order: 305
+        order: 302
     10:
       $value: '#FFE8CC'
       $description: Label - Filled (Orange) background color

tokens/color/crayon/purple.yaml

@@ -2,7 +2,7 @@ color:
   purple:
     $extensions:
       com.redhat.ux:
-        order: 306
+        order: 307
     10:
       $value: '#ECE6FF'
       $description: Label - Filled (Purple) background color

tokens/color/crayon/red-orange.yaml

@@ -2,7 +2,7 @@ color:
   red-orange:
     $extensions:
       com.redhat.ux:
-        order: 303
+        order: 301
         description: >-
           The red orange color is reserved for danger or error states. Do not use it anywhere else.
 
@@ -15,7 +15,7 @@ color:
     40:
       $value: '#F4784A'
     50:
-      $value: '#F4784A'
+      $value: '#F0561D'
     60:
       $value: '#B1380B'
     70:

tokens/color/crayon/teal.yaml

@@ -4,7 +4,7 @@ color:
   teal:
     $extensions:
       com.redhat.ux:
-        order: 302
+        order: 305
     10:
       $value: '#DAF2F2'
       $description: Alert - Default background

tokens/color/status.yaml

@@ -0,0 +1,45 @@
+color:
+  status:
+    $extensions:
+      com.redhat.ux:
+        order: 500
+
+    danger:
+      on-light:
+        $value: '{color.red-orange.50}'
+        $description: Danger accent color (light theme)
+      on-dark:
+        $value: '{color.red-orange.40}'
+        $description: Danger accent color (dark theme)
+
+    warning:
+      on-light:
+        $value: '{color.orange.50}'
+        $description: Warning accent color (light theme)
+      on-dark:
+        $value: '{color.orange.40}'
+        $description: Warning accent color (dark theme)
+
+    default:
+      on-light:
+        $value: '{color.gray.60}'
+        $description: Default accent color (light theme)
+      on-dark:
+        $value: '{color.gray.40}'
+        $description: Default accent color (dark theme)
+
+    info:
+      on-light:
+        $value: '{color.purple.50}'
+        $description: Info accent color (light theme)
+      on-dark:
+        $value: '{color.purple.30}'
+        $description: Info accent color (dark theme)
+
+    success:
+      on-light:
+        $value: '{color.green.60}'
+        $description: Success accent color (light theme)
+      on-dark:
+        $value: '{color.green.40}'
+        $description: Success accent color (dark theme)

tokens/color/surface.yaml

@@ -25,3 +25,40 @@ color:
     darkest:
       $value: '{color.gray.95}'
       $description: Primary surface (dark theme)
+
+    status:
+      danger:
+        on-light:
+          $value: '{color.red-orange.10}'
+          $description: Danger status surface color (light theme)
+        on-dark:
+          $value: '{color.red-orange.70}'
+          $description: Danger status surface color (dark theme)
+      warning:
+        on-light:
+          $value: '{color.orange.10}'
+          $description: Warning status surface color (light theme)
+        on-dark:
+          $value: '{color.orange.70}'
+          $description: Warning status surface color (dark theme)
+      default:
+        on-light:
+          $value: '{color.gray.10}'
+          $description: Default status surface color (light theme)
+        on-dark:
+          $value: '{color.gray.80}'
+          $description: Default status surface color (dark theme)
+      info:
+        on-light:
+          $value: '{color.purple.10}'
+          $description: Info status surface color (light theme)
+        on-dark:
+          $value: '{color.purple.60}'
+          $description: Info status surface color (dark theme)
+      success:
+        on-light:
+          $value: '{color.green.10}'
+          $description: Success status surface color (light theme)
+        on-dark:
+          $value: '{color.green.70}'
+          $description: Success status surface color (dark theme)