feat: add status color tokens (#124)

* feat: add status color tokens, fix a duplicated red orange value, change the max width of the copy button to show full token name, and change order of categories on Netlify page * feat: add descriptions * docs: add changeset * feat: group surface status colors with other surface tokens * fix: remove space * feat: change neutral status to default and note status to info * feat: remove caution status colors and add -status to border and surface status tokens * feat: update changeset --------- Co-authored-by: Benny Powers <[email protected]>
RedHat-UX · Jan 15, 2024 · b64dd32 · b64dd32
1 parent 9539e1d
commit b64dd32
Show file tree

Hide file tree

Showing 10 changed files with 179 additions and 8 deletions.
diff --git a/.changeset/rich-bags-deliver.md b/.changeset/rich-bags-deliver.md
@@ -0,0 +1,22 @@
+---
+"@rhds/tokens": minor
+---
+
+Added status tokens
+
+```css
+button {
+  .light &.danger {
+    background: var(--rh-color-status-danger-on-light);
+  }
+  .light &.success {
+    background: var(--rh-color-status-success-on-light);
+  }
+  .dark &.danger {
+    background: var(--rh-color-status-danger-on-dark);
+  }
+  .dark &.success {
+    background: var(--rh-color-status-success-on-dark);
+  }
+}
+```
diff --git a/docs/assets/tokens.css b/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;
 }

diff --git a/tokens/color/border.yml b/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
diff --git a/tokens/color/crayon/blue.yaml b/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

diff --git a/tokens/color/crayon/orange.yml b/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

diff --git a/tokens/color/crayon/purple.yaml b/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

diff --git a/tokens/color/crayon/red-orange.yaml b/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:

diff --git a/tokens/color/crayon/teal.yaml b/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

diff --git a/tokens/color/status.yaml b/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)
diff --git a/tokens/color/surface.yaml b/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)