feat(badge,tokens): add non-semantic colors (#2077)

* feat(badge): add notice variant * feat(badge): adding non-semantic color variants * chore(badge): adding non-semantic variants to storybook controls * chore(badge): adding withicon and icononly stories * chore(badge): remove black-text option * chore(badge): remove repetitive medium styles * chore(badge): renaming props to match design spec * fix(badge): fix logic for icon only story * refactor(badge,tokens): add color abstraction for theme switching --------- Co-authored-by: Patrick Fulton <[email protected]>
adobe · Aug 8, 2023 · 1bac588 · 1bac588
1 parent 7621aac
commit 1bac588
Show file tree

Hide file tree

Showing 8 changed files with 205 additions and 116 deletions.
diff --git a/components/badge/index.css b/components/badge/index.css
@@ -18,21 +18,47 @@ governing permissions and limitations under the License.
   --spectrum-badge-line-height: var(--spectrum-line-height-100);
   --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100);
 
+
   /* text and icon color default white for all t-shirt sizes and all themes */
-  --spectrum-badge-label-icon-color-white: var(--spectrum-white);
+  --spectrum-badge-label-icon-color: var(--spectrum-white);
+
+  /* text and icon color is black for these background colors */
+  &--orange, &--yellow, &--chartreuse, &--celery {
+    --spectrum-badge-label-icon-color: var(--spectrum-black);
+  }
 
-  /* text and icon color black for all t-shirt sizes and all themes */
-  --spectrum-badge-label-icon-color-black: var(--spectrum-black);
+  /* dark theme all non-semantic colors are black */
+  &--gray, &--red, &--green, &--seafoam, &--cyan, &--blue, &--indigo, &--purple, &--fuchsia, &--magenta {
+    --spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary);
+  }
 
   /* background color default for all t-shirt sizes and all themes */
   --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
 
-  /* background colors for all t-shirt sizes and all themes */
+  /* semantic background colors for all t-shirt sizes and all themes */
   --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
   --spectrum-badge-background-color-accent: var(--spectrum-accent-background-color-default);
   --spectrum-badge-background-color-informative: var(--spectrum-informative-background-color-default);
   --spectrum-badge-background-color-negative: var(--spectrum-negative-background-color-default);
   --spectrum-badge-background-color-positive: var(--spectrum-positive-background-color-default);
+  --spectrum-badge-background-color-notice: var(--spectrum-notice-background-color-default);
+
+  /* non-semantic background colors */
+  --spectrum-badge-background-color-gray: var(--spectrum-gray-background-color-default);
+  --spectrum-badge-background-color-red: var(--spectrum-red-background-color-default);
+  --spectrum-badge-background-color-orange: var(--spectrum-orange-background-color-default);
+  --spectrum-badge-background-color-yellow: var(--spectrum-yellow-background-color-default);
+  --spectrum-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default);
+  --spectrum-badge-background-color-celery: var(--spectrum-celery-background-color-default);
+  --spectrum-badge-background-color-green: var(--spectrum-green-background-color-default);
+  --spectrum-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default);
+  --spectrum-badge-background-color-cyan: var(--spectrum-cyan-background-color-default);
+  --spectrum-badge-background-color-blue: var(--spectrum-blue-background-color-default);
+  --spectrum-badge-background-color-indigo: var(--spectrum-indigo-background-color-default);
+  --spectrum-badge-background-color-purple: var(--spectrum-purple-background-color-default);
+  --spectrum-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default);
+  --spectrum-badge-background-color-magenta: var(--spectrum-magenta-background-color-default);
+
 
   /*** DEFAULT STYLE fallbacks if no t-shirt size - uses Medium t-shirt styles ***/
   /* badge height - fallback if no t-shirt size */
@@ -74,23 +100,6 @@ governing permissions and limitations under the License.
   --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75);
 }
 
-.spectrum-Badge--sizeM {
-  --spectrum-badge-height: var(--spectrum-component-height-100);
-
-  /* label */
-  --spectrum-badge-font-size: var(--spectrum-font-size-100);
-  --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-100);
-  --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-100);
-  --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-100);
-
-  /* icon */
-  --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100);
-  --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-100);
-  --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100);
-  --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100);
-  --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100);
-}
-
 .spectrum-Badge--sizeL {
   --spectrum-badge-height: var(--spectrum-component-height-100);
 
@@ -153,14 +162,8 @@ governing permissions and limitations under the License.
 
   background: var(--mod-badge-background-color-default,
                   var(--spectrum-badge-background-color-default));
-  color: var(--mod-badge-label-icon-color-white,
-            var(--spectrum-badge-label-icon-color-white));
-
-  /* text and icon black */
-  &--black-text {
-    color: var(--mod-badge-label-icon-color-black,
-              var(--spectrum-badge-label-icon-color-black));
-  }
+  color: var(--mod-badge-label-icon-color,
+            var(--spectrum-badge-label-icon-color));
 
   /* background color variants */
   &--neutral {
@@ -188,6 +191,67 @@ governing permissions and limitations under the License.
                     var(--spectrum-badge-background-color-positive));
   }
 
+  &--notice {
+    background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice));
+  }
+
+  /* non-semantic colors */
+  &--gray {
+    background: var(--mod-badge-background-color-gray, var(--spectrum-badge-background-color-gray));
+  }
+
+  &--red {
+    background: var(--mod-badge-background-color-red, var(--spectrum-badge-background-color-red));
+  }
+
+  &--orange {
+    background: var(--mod-badge-background-color-orange, var(--spectrum-badge-background-color-orange));
+  }
+
+  &--yellow {
+    background: var(--mod-badge-background-color-yellow, var(--spectrum-badge-background-color-yellow));
+  }
+
+  &--chartreuse {
+    background: var(--mod-badge-background-color-chartreuse, var(--spectrum-badge-background-color-chartreuse));
+  }
+
+  &--celery {
+    background: var(--mod-badge-background-color-celery, var(--spectrum-badge-background-color-celery));
+  }
+
+  &--green {
+    background: var(--mod-badge-background-color-green, var(--spectrum-badge-background-color-green));
+  }
+
+  &--seafoam {
+    background: var(--mod-badge-background-color-seafoam, var(--spectrum-badge-background-color-seafoam));
+  }
+
+  &--cyan {
+    background: var(--mod-badge-background-color-cyan, var(--spectrum-badge-background-color-cyan));
+  }
+
+  &--blue {
+    background: var(--mod-badge-background-color-blue, var(--spectrum-badge-background-color-blue));
+  }
+
+  &--indigo {
+    background: var(--mod-badge-background-color-indigo, var(--spectrum-badge-background-color-indigo));
+  }
+
+  &--purple {
+    background: var(--mod-badge-background-color-purple, var(--spectrum-badge-background-color-purple));
+  }
+
+  &--fuchsia {
+    background: var(--mod-badge-background-color-fuchsia, var(--spectrum-badge-background-color-fuchsia));
+  }
+
+  &--magenta {
+    background: var(--mod-badge-background-color-magenta, var(--spectrum-badge-background-color-magenta));
+  }
+
   /* fixed position variants with border radius 0 on the fixed edge of the component */
   &--fixed-inline-start {
     border-start-start-radius: 0;
@@ -226,14 +290,8 @@ governing permissions and limitations under the License.
   padding-block-end: var(--mod-badge-label-spacing-vertical-bottom,
                       var(--spectrum-badge-label-spacing-vertical-bottom));
 
-  color: var(--mod-badge-label-icon-color-white,
-                      var(--spectrum-badge-label-icon-color-white));
-
-  /* black text and icon variant */
-  .spectrum-Badge--black-text & {
-    color: var(--mod-badge-label-icon-color-black,
-                      var(--spectrum-badge-label-icon-color-black));
-  }
+  color: var(--mod-badge-label-icon-color,
+                      var(--spectrum-badge-label-icon-color));
 
   /* cjk language support */
   &:lang(ja),
@@ -270,8 +328,8 @@ governing permissions and limitations under the License.
   padding-block-end: var(--mod-badge-icon-spacing-vertical-top,
                       var(--spectrum-badge-icon-spacing-vertical-top));
 
-  color: var(--mod-badge-label-icon-color-white,
-                      var(--spectrum-badge-label-icon-color-white));
+  color: var(--mod-badge-label-icon-color,
+                      var(--spectrum-badge-label-icon-color));
 
   &--no-label {
     /* icon without label has identical padding left and right */
@@ -280,10 +338,4 @@ governing permissions and limitations under the License.
     padding-inline-end: var(--mod-badge-icon-only-spacing-horizontal,
                       var(--spectrum-badge-icon-only-spacing-horizontal));
   }
-
-  /* black text and icon variant */
-  .spectrum-Badge--black-text & {
-    color: var(--mod-badge-label-icon-color-black,
-                      var(--spectrum-badge-label-icon-color-black));
-  }
 }
diff --git a/components/badge/metadata/badge.yml b/components/badge/metadata/badge.yml
@@ -15,11 +15,6 @@ sections:
       - Label and icon elements must be nested inside a parent container of class `.spectrum-Badge` in order to achieve the correct layout and wrapping behavior.
       - Layout of Badge is applied with a display of inline-flex, allowing badge to display as inline while the child elements for the label and icon utilize flexbox for layout.
 
-      ### Badge now includes white text/icon color and black text/icon color
-      - The color is applied to the parent container so that the icon and text child elements will inherit a unified color.
-      - White text/icon color is the default and requires no additional class.
-      - Black text/icon color is applied to the parent container with modifier class `.spectrum-Badge--black-text`
-
       ### Badge now includes fixed positioning
       - This document represents the border radius style which applies to each position.
       - border radius is 0 along the fixed edge of the component.
@@ -49,7 +44,70 @@ examples:
         <div class="spectrum-Badge-label">Negative</div>
       </div>
 
-  - id: badge
+      <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--notice">
+        <div class="spectrum-Badge-label">Notice</div>
+      </div>
+
+  - id: badge-non-semantic
+    name: Non-Semantic
+    markup: |
+      <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--gray">
+        <div class="spectrum-Badge-label">Gray</div>
+      </div>
+
+      <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--red">
+        <div class="spectrum-Badge-label">Red</div>
+      </div>
+
+      <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--orange">
+        <div class="spectrum-Badge-label">Orange</div>
+      </div>
+
+      <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--yellow">
+        <div class="spectrum-Badge-label">Yellow</div>
+      </div>
+
+      <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--chartreuse">
+        <div class="spectrum-Badge-label">Chartreuse</div>
+      </div>
+
+      <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--celery">
+        <div class="spectrum-Badge-label">Celery</div>
+      </div>
+
+      <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--green">
+        <div class="spectrum-Badge-label">Green</div>
+      </div>
+
+      <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--seafoam">
+        <div class="spectrum-Badge-label">Seafoam</div>
+      </div>
+
+      <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--cyan">
+        <div class="spectrum-Badge-label">Cyan</div>
+      </div>
+
+      <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--blue">
+        <div class="spectrum-Badge-label">Blue</div>
+      </div>
+
+      <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--indigo">
+        <div class="spectrum-Badge-label">Indigo</div>
+      </div>
+
+      <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--purple">
+        <div class="spectrum-Badge-label">Purple</div>
+      </div>
+
+      <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--fuchsia">
+        <div class="spectrum-Badge-label">Fuchsia</div>
+      </div>
+
+      <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--magenta">
+        <div class="spectrum-Badge-label">Magenta</div>
+      </div>
+
+  - id: badge-sizing
     name: Sizing
     markup: |
       <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Label Only</h4>
@@ -196,32 +254,3 @@ examples:
         </div>
 
       </div>
-
-  - id: badge
-    name: Text and Icon Color
-    markup: |
-      <div class="spectrum-Examples">
-        <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">White (default)</h4>
-
-          <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral">
-            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Badge-icon spectrum-Badge-icon" focusable="false" aria-hidden="true">
-              <use xlink:href="#spectrum-icon-18-Info" />
-            </svg>
-            <div class="spectrum-Badge-label">Label Text</div>
-          </div>
-
-        </div>
-
-        <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Black</h4>
-
-          <div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral spectrum-Badge--black-text">
-            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Badge-icon spectrum-Badge-icon" focusable="false" aria-hidden="true">
-              <use xlink:href="#spectrum-icon-18-Info" />
-            </svg>
-            <div class="spectrum-Badge-label">Label Text</div>
-          </div>
-
-        </div>
-      </div>
diff --git a/components/badge/metadata/mods.md b/components/badge/metadata/mods.md
@@ -1,19 +1,33 @@
 | Modifiable Custom Properties                |
 | ------------------------------------------- |
 | `--mod-badge-background-color-accent`       |
+| `--mod-badge-background-color-blue`         |
+| `--mod-badge-background-color-celery`       |
+| `--mod-badge-background-color-chartreuse`   |
+| `--mod-badge-background-color-cyan`         |
 | `--mod-badge-background-color-default`      |
+| `--mod-badge-background-color-fuchsia`      |
+| `--mod-badge-background-color-gray`         |
+| `--mod-badge-background-color-green`        |
+| `--mod-badge-background-color-indigo`       |
 | `--mod-badge-background-color-informative`  |
+| `--mod-badge-background-color-magenta`      |
 | `--mod-badge-background-color-negative`     |
+| `--mod-badge-background-color-notice`       |
+| `--mod-badge-background-color-orange`       |
 | `--mod-badge-background-color-positive`     |
+| `--mod-badge-background-color-purple`       |
+| `--mod-badge-background-color-red`          |
+| `--mod-badge-background-color-seafoam`      |
+| `--mod-badge-background-color-yellow`       |
 | `--mod-badge-corner-radius`                 |
 | `--mod-badge-font-size`                     |
 | `--mod-badge-height`                        |
 | `--mod-badge-icon-only-spacing-horizontal`  |
 | `--mod-badge-icon-spacing-horizontal`       |
 | `--mod-badge-icon-spacing-vertical-top`     |
 | `--mod-badge-icon-text-spacing`             |
-| `--mod-badge-label-icon-color-black`        |
-| `--mod-badge-label-icon-color-white`        |
+| `--mod-badge-label-icon-color`              |
 | `--mod-badge-label-spacing-horizontal`      |
 | `--mod-badge-label-spacing-vertical-bottom` |
 | `--mod-badge-label-spacing-vertical-top`    |