feat: theme tokens

RedHat-UX · Aug 29, 2024 · ee3a56b · ee3a56b
1 parent 03cf444
commit ee3a56b
Show file tree

Hide file tree

Showing 3 changed files with 163 additions and 0 deletions.
diff --git a/.changeset/khaki-sheep-tan.md b/.changeset/khaki-sheep-tan.md
@@ -0,0 +1,34 @@
+---
+"@rhds/tokens": minor
+---
+Added theme tokens for responsive colours. Read these in a themable container
+such as `<rh-card>` to style themable content that responds to the color palette
+
+```html
+<rh-surface color-palette="lighter">
+  <rh-card color-palette="darkest">
+    <p>That way, colours respond to their parents' <code>color-palette</code>
+       Without requiring <a href="#">custom CSS</a></p>
+  </rh-card>
+  <p>Use <a href="#">theme tokens</a> for best results.
+</rh-surface>
+```
+
+```css
+rh-surface {
+  & a {
+    color: var(--rh-color-interactive-blue-normal);
+    &:hover,
+    &:focus-within,
+    &:active { color: var(--rh-color-interactive-blue-emphasized); }
+    &:visited {
+      color: var(--rh-color-interactive-purple-normal);
+      &:hover,
+      &:focus-within,
+      &:active { color: var(--rh-color-interactive-purple-emphasized); }
+    }
+  }
+}
+```
+
+For more information, please see our [theming docs](https://ux.redhat.com/themeing).
diff --git a/docs/index.html b/docs/index.html
@@ -128,6 +128,30 @@ <h2>Overview<a href="#overview">#</a></h2>
       {% category path = 'breakpoint' %}
       {% category path = 'media' %}
 
+      <rh-surface id="theme-link-demo" color-palette="lighter">
+        <rh-card color-palette="darkest">
+          <p>That way, colours respond to their parents' <code>color-palette</code>
+             Without requiring <a href="#">custom CSS</a></p>
+        </rh-card>
+        <p>Use <a href="#">theme tokens</a> for best results.
+      </rh-surface>
+
+      <style>
+      #theme-link-demo {
+        & a {
+          color: var(--rh-color-interactive-blue-normal);
+          &:hover,
+          &:focus-within,
+          &:active { color: var(--rh-color-interactive-blue-emphasized); }
+          &:visited {
+            color: var(--rh-color-interactive-purple-normal);
+            &:hover,
+            &:focus-within,
+            &:active { color: var(--rh-color-interactive-purple-emphasized); }
+          }
+        }
+      }
+      </style>
     </main>
     <rh-global-footer>
       <h3 slot="links-primary" hidden>Red Hat legal and privacy links</h3>

diff --git a/tokens/color/color.yml b/tokens/color/color.yml
@@ -6,3 +6,108 @@ color:
       description: >-
         Color helps create consistent experiences across web properties. Various colors are
         available in two themes, light and dark.
+          --rh-color-accent-base: var(--rh-color-accent-base-on-dark, #92c5f9);
+
+  accent:
+    base:
+      $value: '{color.accent.base.on.light}'
+      $description: |
+        Responsive `accent-base` color value. Typically read only - use a themable container e.g. `<rh-surface>`
+        Resolves to `--rh-color-accent-base-on-light` on a themable container with a light color palette
+        and `--rh-color-accent-base-on-dark` on a themable container with a dark color palette.
+    brand:
+      $value: '{color.accent.brand.on.light}'
+      $description: |
+        Responsive `accent-brand` color value. Typically read only - use a themable container e.g. `<rh-surface>`.
+        Resolves to `--rh-color-accent-brand-on-light` on a themable container with a light color palette
+        and `--rh-color-accent-brand-on-dark` on a themable container with a dark color palette.
+
+  border:
+    interactive:
+      $value: '{color.border.interactive.on.light}'
+      $description: |
+        Responsive `border-interactive` color value. Typically read only - use a themable container e.g. `<rh-surface>`
+        Resolves to `--rh-color-border-interactive-on-light` on a themable container with a light color palette
+        and `--rh-color-border-interactive-on-dark` on a themable container with a dark color palette.
+    strong:
+      $value: '{color.border.strong.on.light}'
+      $description: |
+        Responsive `border-strong` color value. Typically read only - use a themable container e.g. `<rh-surface>`
+        Resolves to `--rh-color-border-strong-on-light` on a themable container with a light color palette
+        and `--rh-color-border-strong-on-dark` on a themable container with a dark color palette.
+    subtle:
+      $value: '{color.border.subtle.on.light}'
+      $description: |
+        Responsive `border-subtle` color value. Typically read only - use a themable container e.g. `<rh-surface>`
+        Resolves to `--rh-color-border-subtle-on-light` on a themable container with a light color palette
+        and `--rh-color-border-subtle-on-dark` on a themable container with a dark color palette.
+
+  brand:
+    red:
+      $value: '{color.brand.red.on.light}'
+      $description: |
+        Responsive `brand-red` color value. Typically read only - use a themable container e.g. `<rh-surface>`
+        Resolves to `--rh-color-brand-red-on-light` on a themable container with a light color palette
+        and `--rh-color-brand-red-on-dark` on a themable container with a dark color palette.
+
+  icon:
+    primary:
+      $value: '{color.icon.primary.on.light}'
+      $description: |
+        Responsive `icon-primary` color value. Typically read only - use a themable container e.g. `<rh-surface>`
+        Resolves to `--rh-color-icon-primary-on-light` on a themable container with a light color palette
+        and `--rh-color-icon-primary-on-dark` on a themable container with a dark color palette.
+    secondary:
+      $value: '{color.icon.secondary.on.light}'
+      $description: |
+        Responsive `icon-secondary` color value. Typically read only - use a themable container e.g. `<rh-surface>`
+        Resolves to `--rh-color-icon-secondary-on-light` on a themable container with a light color palette
+        and `--rh-color-icon-secondary-on-dark` on a themable container with a dark color palette.
+
+  text:
+    primary:
+      $value: '{color.text.primary.on.light}'
+      $description: |
+        Responsive `text-primary` color value. Typically read only - use a themable container e.g. `<rh-surface>`
+        Resolves to `--rh-color-text-primary-on-light` on a themable container with a light color palette
+        and `--rh-color-text-primary-on-dark` on a themable container with a dark color palette.
+    secondary:
+      $value: '{color.text.secondary.on.light}'
+      $description: |
+        Responsive `text-secondary` color value. Typically read only - use a themable container e.g. `<rh-surface>`
+        Resolves to `--rh-color-text-secondary-on-light` on a themable container with a light color palette
+        and `--rh-color-text-secondary-on-dark` on a themable container with a dark color palette.
+
+
+  interactive:
+    blue:
+      normal:
+        $value: '{color.interactive.blue.darker}'
+        $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}'
+        $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.
+
+    purple:
+      normal:
+        $value: '{color.interactive.purple.darker}'
+        $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}'
+        $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.