fix: interactive and status tokens

RedHat-UX · Sep 2, 2024 · 0b00552 · 0b00552
1 parent b2ca062
commit 0b00552
Show file tree

Hide file tree

Showing 2 changed files with 277 additions and 62 deletions.
diff --git a/tokens/color/interactive.yaml b/tokens/color/interactive.yaml
@@ -5,66 +5,268 @@ color:
         order: 30
         descriptionFile: interactive.md
 
-    blue:
-      normal:
-        $value:
-          - '{color.interactive.blue.darker}'
-          - '{color.interactive.blue.lightest}'
-        $description: >-
-          Responsive `interactive-blue` (e.g. link) color value.
-          Typically read only - use a themable container e.g. `<rh-surface>`
-          Resolves to `--rh-color-interactive-blue-darker` on a themable container with a light color palette
-          and `--rh-color-interactive-blue-lighest` on a themable container with a dark color palette.
-      emphasized:
-        $value:
-          - '{color.interactive.blue.darkest}'
-          - '{color.interactive.blue.lighter}'
-        $description: >-
-          Responsive `interactive-blue` (e.g. link hover) color value.
-          Typically read only - use a themable container e.g. `<rh-surface>`
-          Resolves to `--rh-color-interactive-blue-darkest` on a themable container with a light color palette
-          and `--rh-color-interactive-blue-lighter` on a themable container with a dark color palette.
-      lightest:
-        $value: '{color.blue.20}'
-        $description: Inline link hover (dark theme)
-      lighter:
-        $value: '{color.blue.30}'
-        $description: Inline link (dark theme)
-      darker:
-        $value: '{color.blue.50}'
-        $description: Inline link (light theme)
-      darkest:
-        $value: '{color.blue.70}'
-        $description: Inline link hover (light theme)
+    primary:
+      default:
+        _:
+          $value:
+            - '{color.interactive.primary.default.on-light}'
+            - '{color.interactive.primary.default.on-dark}'
+          $description: >-
+            Responsive `interactive-primary` (e.g. link) color value.
+            Typically read only - use a themable container e.g. `<rh-surface>`.
+            Resolves to `--rh-color-interactive-primary-default-on-light` on a themable container with a light color palette
+            and `--rh-color-interactive-primary-default-on-dark` on a themable container with a dark color palette.
+        on-light:
+          $value: '{color.blue.50}'
+          $description: Primary interactive - default (Light theme)
+        on-dark:
+          $value: '{color.blue.30}'
+          $description: Primary interactive - default (Dark theme)
+      hover:
+        _:
+          $value:
+            - '{color.interactive.primary.hover.on-light}'
+            - '{color.interactive.primary.hover.on-dark}'
+          $description: >-
+            Responsive `interactive-primary` (e.g. link) color value.
+            Typically read only - use a themable container e.g. `<rh-surface>`.
+            Resolves to `--rh-color-interactive-primary-hover-on-light` on a themable container with a light color palette
+                 and to `--rh-color-interactive-primary-hover-on-dark` on a themable container with a dark color palette.
+        on-light:
+          $value: '{color.blue.70}'
+          $description: Primary interactive - hover (Light theme)
+        on-dark:
+          $value: '{color.blue.20}'
+          $description: Primary interactive - hover (Dark theme)
+      active:
+        _:
+          $value:
+            - '{color.interactive.primary.active.on-light}'
+            - '{color.interactive.primary.active.on-dark}'
+          $description: >-
+            Responsive `interactive-primary` (e.g. link) color value.
+            Typically read only - use a themable container e.g. `<rh-surface>`.
+            Resolves to `--rh-color-interactive-primary-active-on-light` on a themable container with a light color palette
+                 and to `--rh-color-interactive-primary-active-on-dark` on a themable container with a dark color palette.
+        on-light:
+          $value: '{color.blue.70}'
+          $description: Primary interactive - active (Light theme)
+        on-dark:
+          $value: '{color.blue.20}'
+          $description: Primary interactive - active (Dark theme)
+      focus:
+        _:
+          $value:
+            - '{color.interactive.primary.focus.on-light}'
+            - '{color.interactive.primary.focus.on-dark}'
+          $description: >-
+            Responsive `interactive-primary` (e.g. link) color value.
+            Typically read only - use a themable container e.g. `<rh-surface>`.
+            Resolves to `--rh-color-interactive-primary-focus-on-light` on a themable container with a light color palette
+                 and to `--rh-color-interactive-primary-focus-on-dark` on a themable container with a dark color palette.
+        on-light:
+          $value: '{color.blue.70}'
+          $description: Primary interactive - focus (Light theme)
+        on-dark:
+          $value: '{color.blue.20}'
+          $description: Primary interactive - focus (Dark theme)
+
+      visited:
+        default:
+          _:
+            $value:
+              - '{color.interactive.primary.visited.default.on-light}'
+              - '{color.interactive.primary.visited.default.on-dark}'
+            $description: >-
+              Responsive `interactive-primary-visited` (e.g. visited link) color value.
+              Typically read only - use a themable container e.g. `<rh-surface>`.
+              Resolves to `--rh-color-interactive-primary-visited-default-on-light` on a themable container with a light color palette
+              and `--rh-color-interactive-primary-visited-default-on-dark` on a themable container with a dark color palette.
+          on-light:
+            $value: '{color.purple.50}'
+            $description: Primary interactive visited - default (Light theme)
+          on-dark:
+            $value: '{color.purple.30}'
+            $description: Primary interactive visited - default (Dark theme)
+        hover:
+          _:
+            $value:
+              - '{color.interactive.primary.visited.hover.on-light}'
+              - '{color.interactive.primary.visited.hover.on-dark}'
+            $description: >-
+              Responsive `interactive-primary-visited` (e.g. visited link) color value.
+              Typically read only - use a themable container e.g. `<rh-surface>`.
+              Resolves to `--rh-color-interactive-primary-visited-hover-on-light` on a themable container with a light color palette
+                   and to `--rh-color-interactive-primary-visited-hover-on-dark` on a themable container with a dark color palette.
+          on-light:
+            $value: '{color.purple.70}'
+            $description: Primary interactive visited - hover (Light theme)
+          on-dark:
+            $value: '{color.purple.10}'
+            $description: Primary interactive visited - hover (Dark theme)
+        active:
+          _:
+            $value:
+              - '{color.interactive.primary.visited.active.on-light}'
+              - '{color.interactive.primary.visited.active.on-dark}'
+            $description: >-
+              Responsive `interactive-primary-visited` (e.g. visited link) color value.
+              Typically read only - use a themable container e.g. `<rh-surface>`.
+              Resolves to `--rh-color-interactive-primary-visited-active-on-light` on a themable container with a light color palette
+                   and to `--rh-color-interactive-primary-visited-active-on-dark` on a themable container with a dark color palette.
+          on-light:
+            $value: '{color.purple.70}'
+            $description: Primary interactive visited - active (Light theme)
+          on-dark:
+            $value: '{color.purple.10}'
+            $description: Primary interactive visited - active (Dark theme)
+        focus:
+          _:
+            $value:
+              - '{color.interactive.primary.visited.focus.on-light}'
+              - '{color.interactive.primary.visited.focus.on-dark}'
+            $description: >-
+              Responsive `interactive-primary-visited` (e.g. visited link) color value.
+              Typically read only - use a themable container e.g. `<rh-surface>`.
+              Resolves to `--rh-color-interactive-primary-visited-focus-on-light` on a themable container with a light color palette
+                   and to `--rh-color-interactive-primary-visited-focus-on-dark` on a themable container with a dark color palette.
+          on-light:
+            $value: '{color.purple.70}'
+            $description: Primary interactive visited - focus (Light theme)
+          on-dark:
+            $value: '{color.purple.10}'
+            $description: Primary interactive visited - focus (Dark theme)
+
+
+    secondary:
+      default:
+        _:
+          $value:
+            - '{color.interactive.secondary.default.on-light}'
+            - '{color.interactive.secondary.default.on-dark}'
+          $description: >-
+            Responsive `interactive-secondary` (e.g. link) color value.
+            Typically read only - use a themable container e.g. `<rh-surface>`.
+            Resolves to `--rh-color-interactive-secondary-default-on-light` on a themable container with a light color palette
+            and `--rh-color-interactive-secondary-default-on-dark` on a themable container with a dark color palette.
+        on-light:
+          $value: '{color.gray.60}'
+          $description: Secondary interactive - default (Light theme)
+        on-dark:
+          $value: '{color.gray.30}'
+          $description: Secondary interactive - default (Dark theme)
+      hover:
+        _:
+          $value:
+            - '{color.interactive.secondary.hover.on-light}'
+            - '{color.interactive.secondary.hover.on-dark}'
+          $description: >-
+            Responsive `interactive-secondary` (e.g. link) color value.
+            Typically read only - use a themable container e.g. `<rh-surface>`.
+            Resolves to `--rh-color-interactive-secondary-hover-on-light` on a themable container with a light color palette
+                 and to `--rh-color-interactive-secondary-hover-on-dark` on a themable container with a dark color palette.
+        on-light:
+          $value: '{color.gray.60}'
+          $description: Secondary interactive - hover (Light theme)
+        on-dark:
+          $value: '{color.gray.30}'
+          $description: Secondary interactive - hover (Dark theme)
+      active:
+        _:
+          $value:
+            - '{color.interactive.secondary.active.on-light}'
+            - '{color.interactive.secondary.active.on-dark}'
+          $description: >-
+            Responsive `interactive-secondary` (e.g. link) color value.
+            Typically read only - use a themable container e.g. `<rh-surface>`.
+            Resolves to `--rh-color-interactive-secondary-active-on-light` on a themable container with a light color palette
+                 and to `--rh-color-interactive-secondary-active-on-dark` on a themable container with a dark color palette.
+        on-light:
+          $value: '{color.gray.60}'
+          $description: Secondary interactive - active (Light theme)
+        on-dark:
+          $value: '{color.gray.30}'
+          $description: Secondary interactive - active (Dark theme)
+      focus:
+        _:
+          $value:
+            - '{color.interactive.secondary.focus.on-light}'
+            - '{color.interactive.secondary.focus.on-dark}'
+          $description: >-
+            Responsive `interactive-secondary` (e.g. link) color value.
+            Typically read only - use a themable container e.g. `<rh-surface>`.
+            Resolves to `--rh-color-interactive-secondary-focus-on-light` on a themable container with a light color palette
+                 and to `--rh-color-interactive-secondary-focus-on-dark` on a themable container with a dark color palette.
+        on-light:
+          $value: '{color.gray.60}'
+          $description: Secondary interactive - focus (Light theme)
+        on-dark:
+          $value: '{color.gray.30}'
+          $description: Secondary interactive - focus (Dark theme)
+
+      visited:
+        default:
+          _:
+            $value:
+              - '{color.interactive.secondary.visited.default.on-light}'
+              - '{color.interactive.secondary.visited.default.on-dark}'
+            $description: >-
+              Responsive `interactive-secondary-visited` (e.g. visited link) color value.
+              Typically read only - use a themable container e.g. `<rh-surface>`.
+              Resolves to `--rh-color-interactive-secondary-visited-default-on-light` on a themable container with a light color palette
+              and `--rh-color-interactive-secondary-visited-default-on-dark` on a themable container with a dark color palette.
+          on-light:
+            $value: '{color.gray.60}'
+            $description: Secondary interactive visited - default (Light theme)
+          on-dark:
+            $value: '{color.gray.30}'
+            $description: Secondary interactive visited - default (Dark theme)
+        hover:
+          _:
+            $value:
+              - '{color.interactive.secondary.visited.hover.on-light}'
+              - '{color.interactive.secondary.visited.hover.on-dark}'
+            $description: >-
+              Responsive `interactive-secondary-visited` (e.g. visited link) color value.
+              Typically read only - use a themable container e.g. `<rh-surface>`.
+              Resolves to `--rh-color-interactive-secondary-visited-hover-on-light` on a themable container with a light color palette
+                   and to `--rh-color-interactive-secondary-visited-hover-on-dark` on a themable container with a dark color palette.
+          on-light:
+            $value: '{color.gray.60}'
+            $description: Secondary interactive visited - hover (Light theme)
+          on-dark:
+            $value: '{color.gray.30}'
+            $description: Secondary interactive visited - hover (Dark theme)
+        active:
+          _:
+            $value:
+              - '{color.interactive.secondary.visited.active.on-light}'
+              - '{color.interactive.secondary.visited.active.on-dark}'
+            $description: >-
+              Responsive `interactive-secondary-visited` (e.g. visited link) color value.
+              Typically read only - use a themable container e.g. `<rh-surface>`.
+              Resolves to `--rh-color-interactive-secondary-visited-active-on-light` on a themable container with a light color palette
+                   and to `--rh-color-interactive-secondary-visited-active-on-dark` on a themable container with a dark color palette.
+          on-light:
+            $value: '{color.gray.60}'
+            $description: Secondary interactive visited - active (Light theme)
+          on-dark:
+            $value: '{color.gray.30}'
+            $description: Secondary interactive visited - active (Dark theme)
+        focus:
+          _:
+            $value:
+              - '{color.interactive.secondary.visited.focus.on-light}'
+              - '{color.interactive.secondary.visited.focus.on-dark}'
+            $description: >-
+              Responsive `interactive-secondary-visited` (e.g. visited link) color value.
+              Typically read only - use a themable container e.g. `<rh-surface>`.
+              Resolves to `--rh-color-interactive-secondary-visited-focus-on-light` on a themable container with a light color palette
+                   and to `--rh-color-interactive-secondary-visited-focus-on-dark` on a themable container with a dark color palette.
+          on-light:
+            $value: '{color.gray.60}'
+            $description: Secondary interactive visited - focus (Light theme)
+          on-dark:
+            $value: '{color.gray.30}'
+            $description: Secondary interactive visited - focus (Dark theme)
 
-    purple:
-      normal:
-        $value:
-          - '{color.interactive.purple.darker}'
-          - '{color.interactive.purple.lightest}'
-        $description: >-
-          Responsive `interactive-purple` (e.g. visited link) color value.
-          Typically read only - use a themable container e.g. `<rh-surface>`
-          Resolves to `--rh-color-interactive-purple-darker` on a themable container with a light color palette
-          and `--rh-color-interactive-purple-lighest` on a themable container with a dark color palette.
-      emphasized:
-        $value:
-          - '{color.interactive.purple.darkest}'
-          - '{color.interactive.purple.lighter}'
-        $description: >-
-          Responsive `interactive-purple` (e.g. visited link hover) color value.
-          Typically read only - use a themable container e.g. `<rh-surface>`
-          Resolves to `--rh-color-interactive-purple-darkest` on a themable container with a light color palette
-          and `--rh-color-interactive-purple-lighter` on a themable container with a dark color palette.
-      lightest:
-        $value: '{color.purple.10}'
-        $description: Inline link visited hover (dark theme)
-      lighter:
-        $value: '{color.purple.30}'
-        $description: Inline link visited (dark theme)
-      darker:
-        $value: '{color.purple.50}'
-        $description: Inline link visited (light theme)
-      darkest:
-        $value: '{color.purple.70}'
-        $description: Inline link visited hover (light theme)
diff --git a/tokens/color/status.yaml b/tokens/color/status.yaml
@@ -5,6 +5,8 @@ color:
         order: 500
 
     danger:
+      $description: >-
+        Represents an action which could have destructive consequences, e.g. deleting a file.
       _:
         $value:
           - '{color.status.danger.on-light}'
@@ -21,6 +23,8 @@ color:
         $description: Danger status color (dark theme)
 
     warning:
+      $description: >-
+        Represents an action or notice which elicits a warning of potential danger
       _:
         $value:
           - '{color.status.warning.on-light}'
@@ -37,6 +41,8 @@ color:
         $description: Warning status color (dark theme)
 
     caution:
+      $description: >-
+        Represents an action or notice which should immediately draw the attention
       _:
         $value:
           - '{color.status.caution.on-light}'
@@ -53,6 +59,9 @@ color:
         $description: Caution status color (dark theme)
 
     neutral:
+      $description: >-
+        Represents an action or notice which has neither positive nor negative connotations,
+        is neither explicitly constructive or explicitly destructive.
       _:
         $value:
           - '{color.status.caution.on-light}'
@@ -69,6 +78,8 @@ color:
         $description: Warning accent color (dark theme)
 
     note:
+      $description: >-
+        Represents an action or notice which is informational, or a tip on how best to complete a task.
       _:
         $value:
           - '{color.status.note.on-light}'
@@ -85,6 +96,8 @@ color:
         $description: Note/tip status color (dark theme)
 
     success:
+      $description: >-
+        Represents a notice of success.
       _:
         $value:
           - '{color.status.success.on-light}'