feat: add status color tokens, fix a duplicated red orange value, cha…

…nge the max width of the copy button to show full token name, and change order of categories on Netlify page
RedHat-UX · Dec 12, 2023 · 3004f0e · 3004f0e
1 parent a5dfee5
commit 3004f0e
Show file tree

Hide file tree

Showing 8 changed files with 188 additions and 7 deletions.
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
@@ -45,6 +45,92 @@ color:
       on-dark:
         $value: '{color.blue.30}'
         $description: Interactive border color (dark theme)
+        attributes:
+          category: border
+          type: color
+
+    danger:
+
+      on-light:
+        $value: '{color.red-orange.50}'
+        $description: 
+        attributes:
+          category: border
+          type: color
+      on-dark:
+        $value: '{color.red-orange.40}'
+        $description: 
+        attributes:
+          category: border
+          type: color
+
+    warning:
+
+      on-light:
+        $value: '{color.orange.50}'
+        $description: 
+        attributes:
+          category: border
+          type: color
+      on-dark:
+        $value: '{color.orange.40}'
+        $description: 
+        attributes:
+          category: border
+          type: color
+
+    caution:
+      on-light:
+        $value: '{color.yellow.60}'
+        $description: 
+        attributes:
+          category: border
+          type: color
+      on-dark:
+        $value: '{color.yellow.30}'
+        $description: 
+        attributes:
+          category: border
+          type: color
+
+    neutral:
+      on-light:
+        $value: '{color.gray.60}'
+        $description: 
+        attributes:
+          category: border
+          type: color
+      on-dark:
+        $value: '{color.gray.40}'
+        $description: 
+        attributes:
+          category: border
+          type: color
+
+    note:
+      on-light:
+        $value: '{color.purple.50}'
+        $description: 
+        attributes:
+          category: border
+          type: color
+      on-dark:
+        $value: '{color.purple.30}'
+        $description: 
+        attributes:
+          category: border
+          type: color
+
+    success:
+      on-light:
+        $value: '{color.green.60}'
+        $description: 
+        attributes:
+          category: border
+          type: color
+      on-dark:
+        $value: '{color.green.40}'
+        $description: 
         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,95 @@
+color:
+  status:
+    $extensions:
+      com.redhat.ux:
+        order: 500
+
+    danger:
+      on-light:
+        $value: '{color.red-orange.50}'
+        $description: 
+      on-dark:
+        $value: '{color.red-orange.40}'
+        $description: 
+      surface:
+        on-light:
+          $value: '{color.red-orange.10}'
+          $description: 
+        on-dark:
+          $value: '{color.red-orange.70}'
+          $description: 
+
+    warning:
+      on-light:
+        $value: '{color.orange.50}'
+        $description: 
+      on-dark:
+        $value: '{color.orange.40}'
+        $description: 
+      surface:
+        on-light:
+          $value: '{color.orange.10}'
+          $description: 
+        on-dark:
+          $value: '{color.orange.70}'
+          $description: 
+
+    caution:
+      on-light:
+        $value: '{color.yellow.60}'
+        $description: 
+      on-dark:
+        $value: '{color.yellow.30}'
+        $description: 
+      surface:
+        on-light:
+          $value: '{color.yellow.10}'
+          $description: 
+        on-dark:
+          $value: '{color.yellow.70}'
+          $description: 
+
+    neutral:
+      on-light:
+        $value: '{color.gray.60}'
+        $description: 
+      on-dark:
+        $value: '{color.gray.40}'
+        $description: 
+      surface:
+        on-light:
+          $value: '{color.gray.10}'
+          $description: 
+        on-dark:
+          $value: '{color.gray.80}'
+          $description: 
+
+    note:
+      on-light:
+        $value: '{color.purple.50}'
+        $description: 
+      on-dark:
+        $value: '{color.purple.30}'
+        $description: 
+      surface:
+        on-light:
+          $value: '{color.purple.10}'
+          $description: 
+        on-dark:
+          $value: '{color.purple.60}'
+          $description: 
+
+    success:
+      on-light:
+        $value: '{color.green.60}'
+        $description: 
+      on-dark:
+        $value: '{color.green.40}'
+        $description: 
+      surface:
+        on-light:
+          $value: '{color.green.10}'
+          $description: 
+        on-dark:
+          $value: '{color.green.70}'
+          $description: