feat(statuslight)!: migrate statuslight to core tokens

components/statuslight/gulpfile.js

@@ -1 +1 @@
-module.exports = require('@spectrum-css/component-builder');
+module.exports = require('@spectrum-css/component-builder-simple');

components/statuslight/index.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2022 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -10,68 +10,148 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import "../vars/css/components/spectrum-statuslight.css";
+.spectrum-StatusLight {
+  /* Static tokens */
+  --spectrum-statuslight-corner-radius: 50%;
+  --spectrum-statuslight-font-weight: 400;
+  --spectrum-statuslight-border-width: var(--spectrum-border-width-100);
+
+  /* Size */
+  --spectrum-statuslight-height: var(--spectrum-component-height-100);
+  --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);
+  --spectrum-statuslight-line-height: var(--spectrum-line-height-100);
+  --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+  --spectrum-statuslight-font-size: var(--spectrum-font-size-100);
+
+  /* Space */
+  --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100);
+  --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium);
+  --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
+  --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100);
+
+  /* Color */
+  --spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default);
+  --spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
+  --spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color);
+  --spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-visual-color);
+  --spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color);
+  --spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color);
+  --spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color);
+  --spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-visual-color);
+  --spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-visual-color);
+  --spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-visual-color);
+  --spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-visual-color);
+  --spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color);
+  --spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color);
+  --spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-visual-color);
+  --spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-visual-color);
+  --spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color);
+  --spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color);
+  --spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-visual-color);
+  --spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color);
+  --spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color);
+  --spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color);
+  --spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color);
+}
 
 .spectrum-StatusLight--sizeS {
-  @remapvars {
-    find: /--spectrum-statuslight(.*)-s-/;
-    filter: color;
-    replace: --spectrum-statuslight$1-;
-  }
+  --spectrum-statuslight-height: var(--spectrum-component-height-75);
+  --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-small);
+
+  --spectrum-statuslight-font-size: var(--spectrum-font-size-75);
+
+  --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75);
+  --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small);
+  --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-75);
+  --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75);
 }
 
 .spectrum-StatusLight--sizeM {
-  @remapvars {
-    find: /--spectrum-statuslight(.*)-m-/;
-    filter: color;
-    replace: --spectrum-statuslight$1-;
-  }
-}
+  --spectrum-statuslight-height: var(--spectrum-component-height-100);
+  --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);
+
+  --spectrum-statuslight-font-size: var(--spectrum-font-size-100);
+
+  --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100);
+  --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium);
+  --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
+  --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100);
+ }
 
 .spectrum-StatusLight--sizeL {
-  @remapvars {
-    find: /--spectrum-statuslight(.*)-l-/;
-    filter: color;
-    replace: --spectrum-statuslight$1-;
-  }
+  --spectrum-statuslight-height: var(--spectrum-component-height-200);
+  --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-large);
+
+  --spectrum-statuslight-font-size: var(--spectrum-font-size-200);
+
+  --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200);
+  --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large);
+  --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-200);
+  --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200);
 }
 
 .spectrum-StatusLight--sizeXL {
-  @remapvars {
-    find: /--spectrum-statuslight(.*)-xl-/;
-    filter: color;
-    replace: --spectrum-statuslight$1-;
+  --spectrum-statuslight-height: var(--spectrum-component-height-300);
+  --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-extra-large);
+
+  --spectrum-statuslight-font-size: var(--spectrum-font-size-300);
+
+  --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300);
+  --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large);
+  --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-300);
+  --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300);
+}
+
+@media (forced-colors: active) {
+  .spectrum-StatusLight {
+    forced-color-adjust: none;
+    --highcontrast-statuslight-content-color-default: CanvasText;
+    --highcontrast-statuslight-subdued-content-color-default: CanvasText;
+    &:before {
+      border: var(--mod-statuslight-border-width, var(--spectrum-statuslight-border-width)) solid ButtonText;
+    }
   }
 }
 
 .spectrum-StatusLight {
-  --spectrum-statuslight-info-dot-resolved-margin-top: calc(var(--spectrum-statuslight-info-dot-margin-top) - var(--spectrum-statuslight-info-text-padding-top));
-
   display: flex;
   flex-direction: row;
   align-items: flex-start;
 
-  min-height: var(--spectrum-statuslight-info-height);
+  min-height: var(--mod-statuslight-height, var(--spectrum-statuslight-height));
 
-  padding-block: var(--spectrum-statuslight-info-text-padding-top) var(--spectrum-statuslight-info-text-padding-bottom);
+  padding-block-start: var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label));
+  padding-block-end: var(--mod-statuslight-spacing-bottom-to-label, var(--spectrum-statuslight-spacing-bottom-to-label));
   padding-inline: 0;
   box-sizing: border-box;
 
-  font-size: var(--spectrum-statuslight-info-text-size);
-  font-weight: var(--spectrum-statuslight-info-text-font-weight);
-  line-height: var(--spectrum-statuslight-info-text-line-height);
+  font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size));
+  font-weight: var(--mod-statuslight-font-weight, var(--spectrum-statuslight-font-weight));
+
+  line-height: var(--mod-statuslight-line-height, --spectrum-statuslight-line-height);
+
+  color: var(--highcontrast-statuslight-content-color-default, var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default)));
 
+  &:lang(ja),
+  &:lang(zh),
+  &:lang(ko) {
+    line-height: var(--spectrum-statuslight-line-height-cjk, var(--mod-statuslight-line-height, var(--spectrum-statuslight-line-height)));
+  }
+
+  /* Dot */
   &::before {
     content: "";
     flex-grow: 0;
     flex-shrink: 0;
     display: inline-block;
-    inline-size: var(--spectrum-statuslight-info-dot-size);
-    block-size: var(--spectrum-statuslight-info-dot-size);
-    border-radius: var(--spectrum-statuslight-info-dot-border-radius);
+    inline-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
+    block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
+    border-radius: var(--mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius));
 
-    margin-block: var(--spectrum-statuslight-info-dot-resolved-margin-top) var(--spectrum-global-dimension-size-0);
-    margin-inline: var(--spectrum-global-dimension-size-0) var(--spectrum-statuslight-info-text-gap);
+    --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)));
+    margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot);
+    margin-inline-end: var(--mod-statuslight-spacing-dot-to-label, var(--spectrum-statuslight-spacing-dot-to-label));
 
     /* support high contrast/forced-color-adjust mode for dot */
     -ms-high-contrast-adjust: none;
@@ -82,3 +162,91 @@ governing permissions and limitations under the License.
 .spectrum-StatusLight--neutral {
   font-style: italic;
 }
+
+/* Semantic Colors */
+
+.spectrum-StatusLight--neutral {
+  color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default)));
+
+  &::before {
+    background-color: var(--mod-statuslight-semantic-neutral-color, var(--spectrum-statuslight-semantic-neutral-color));
+  }
+}
+
+.spectrum-StatusLight--accent::before {
+  background-color: var(--mod-statuslight-semantic-accent-color, var(--spectrum-statuslight-semantic-accent-color));
+}
+
+.spectrum-StatusLight--info::before {
+  background-color: var(--mod-statuslight-semantic-info-color, var(--spectrum-statuslight-semantic-info-color));
+}
+
+.spectrum-StatusLight--negative::before {
+  background-color: var(--mod-statuslight-semantic-negative-color, var(--spectrum-statuslight-semantic-negative-color));
+}
+
+.spectrum-StatusLight--notice::before {
+  background-color: var(--mod-statuslight-semantic-notice-color, var(--spectrum-statuslight-semantic-notice-color));
+}
+
+.spectrum-StatusLight--positive::before {
+  background-color: var(--mod-statuslight-semantic-positive-color, var(--spectrum-statuslight-semantic-positive-color));
+}
+
+/* Non-Semantic Colors */
+
+.spectrum-StatusLight--gray::before {
+  background-color: var(--mod-statuslight-nonsemantic-gray-color, var(--spectrum-statuslight-nonsemantic-gray-color));
+}
+
+.spectrum-StatusLight--red::before {
+  background-color: var(--mod-statuslight-nonsemantic-red-color, var(--spectrum-statuslight-nonsemantic-red-color));
+}
+
+.spectrum-StatusLight--orange::before {
+  background-color: var(--mod-statuslight-nonsemantic-orange-color, var(--spectrum-statuslight-nonsemantic-orange-color));
+}
+
+.spectrum-StatusLight--yellow::before {
+  background-color: var(--mod-statuslight-nonsemantic-yellow-color, var(--spectrum-statuslight-nonsemantic-yellow-color));
+}
+
+.spectrum-StatusLight--chartreuse::before {
+  background-color: var(--mod-statuslight-nonsemantic-chartreuse-color, var(--spectrum-statuslight-nonsemantic-chartreuse-color));
+}
+
+.spectrum-StatusLight--celery::before {
+  background-color: var(--mod-statuslight-nonsemantic-celery-color, var(--spectrum-statuslight-nonsemantic-celery-color));
+}
+
+.spectrum-StatusLight--green::before {
+  background-color: var(--mod-statuslight-nonsemantic-green-color, var(--spectrum-statuslight-nonsemantic-green-color));
+}
+
+.spectrum-StatusLight--seafoam::before {
+  background-color: var(--mod-statuslight-nonsemantic-seafoam-color, var(--spectrum-statuslight-nonsemantic-seafoam-color));
+}
+
+.spectrum-StatusLight--cyan::before {
+  background-color: var(--mod-statuslight-nonsemantic-cyan-color, var(--spectrum-statuslight-nonsemantic-cyan-color));
+}
+
+.spectrum-StatusLight--blue::before {
+  background-color: var(--mod-statuslight-nonsemantic-blue-color, var(--spectrum-statuslight-nonsemantic-blue-color));
+}
+
+.spectrum-StatusLight--indigo::before {
+  background-color: var(--mod-statuslight-nonsemantic-indigo-color, var(--spectrum-statuslight-nonsemantic-indigo-color));
+}
+
+.spectrum-StatusLight--purple::before {
+  background-color: var(--mod-statuslight-nonsemantic-purple-color, var(--spectrum-statuslight-nonsemantic-purple-color));
+}
+
+.spectrum-StatusLight--fuchsia::before {
+  background-color: var(--mod-statuslight-nonsemantic-fuchsia-color, var(--spectrum-statuslight-nonsemantic-fuchsia-color));
+}
+
+.spectrum-StatusLight--magenta::before {
+  background-color: var(--mod-statuslight-nonsemantic-magenta-color, var(--spectrum-statuslight-nonsemantic-magenta-color));
+}

components/statuslight/metadata/statuslight.yml

@@ -44,19 +44,30 @@ examples:
     name: Colors
     status: Verified
     markup: |
-      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--celery">Celery Status</div>
+      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--gray">Gray Status</div>
+      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--red">Red Status</div>
+      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--orange">Orange Status</div>
       <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--yellow">Yellow Status</div>
-      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--fuchsia">Fuchsia Status</div>
-      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--indigo">Indigo Status</div>
-      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--seafoam">Seafoam Status</div>
       <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--chartreuse">Chartreuse Status</div>
-      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--magenta">Magenta Status</div>
+      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--celery">Celery Status</div>
+      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--green">Green Status</div>
+      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--seafoam">Seafoam Status</div>
+      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--cyan">Cyan Status</div>
+      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--blue">Blue Status</div>
+      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--indigo">Indigo Status</div>
       <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--purple">Purple Status</div>
+      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--fuchsia">Fuchsia Status</div>
+      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--magenta">Magenta Status</div>
   - id: statuslight-neutral
     name: Neutral
     status: Verified
     markup: |
       <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--neutral">Paused</div>
+  - id: statuslight-accent
+    name: Accent
+    status: Verified
+    markup: |
+      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--info">Accent</div>
   - id: statuslight-info
     name: Info
     status: Verified
@@ -77,16 +88,3 @@ examples:
     status: Verified
     markup: |
       <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--negative">Rejected</div>
-  - id: statuslight-disabled
-    name: Disabled
-    status: Verified
-    description: The disabled state of Status Light.
-    markup: |
-      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS is-disabled">Disabled</div>
-  - id: statuslight-active
-    name: Active
-    status: Deprecated
-    details: Use the `info` variant instead
-    description: The active variant of Status Light
-    markup: |
-      <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--active">Active</div>

components/statuslight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectrum-css/statuslight",
-  "version": "4.0.14",
+  "version": "5.0.0-beta.1",
   "description": "The Spectrum CSS statuslight component",
   "license": "Apache-2.0",
   "main": "dist/index-vars.css",
@@ -16,15 +16,15 @@
     "build": "gulp"
   },
   "peerDependencies": {
-    "@spectrum-css/vars": "^8.0.0"
+    "@spectrum-css/tokens": "^3.0.0"
   },
   "devDependencies": {
     "@spectrum-css/component-builder": "^3.2.0",
-    "@spectrum-css/vars": "^8.0.0",
+    "@spectrum-css/tokens": "^3.0.0",
     "gulp": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "homepage": "https://opensource.adobe.com/spectrum-css/"
-}
+}