feat: add highcontrast and modifier tokens

adobe · Aug 9, 2022 · 50ed022 · 50ed022
1 parent 9e0fee9
commit 50ed022
Show file tree

Hide file tree

Showing 10 changed files with 15,021 additions and 37 deletions.
diff --git a/.log/ti-56041.log b/.log/ti-56041.log
diff --git a/.log/ti-6570.log b/.log/ti-6570.log
diff --git a/.log/ti-74156.log b/.log/ti-74156.log
diff --git a/.log/ti-77281.log b/.log/ti-77281.log
diff --git a/.log/ti-89742.log b/.log/ti-89742.log
diff --git a/.log/ti-91643.log b/.log/ti-91643.log
diff --git a/.log/ti-9196.log b/.log/ti-9196.log
diff --git a/.log/tsserver.log b/.log/tsserver.log
diff --git a/.stylelintrc.yml b/.stylelintrc.yml
@@ -0,0 +1,21 @@
+extends: stylelint-config-standard
+plugins:
+  - stylelint-scss
+rules:
+  max-line-length:
+    - 90
+    - ignore:
+        - comments
+  max-nesting-depth:
+    - 3
+    - ignore:
+        - blockless-at-rules
+        - pseudo-classes
+  # selector-nested-pattern: "^&:(?:hover|focus)$"
+  selector-class-pattern: null
+  custom-property-empty-line-before: null
+  comment-empty-line-before: null
+  declaration-empty-line-before: null
+  rule-empty-line-before: null
+  declaration-colon-space-after: null
+  # declaration-colon-newline-after: null
diff --git a/components/statuslight/index.css b/components/statuslight/index.css
@@ -14,6 +14,7 @@ governing permissions and limitations under the License.
   /* 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);
@@ -30,8 +31,8 @@ governing permissions and limitations under the License.
   --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100);
 
   /* Color */
-  --spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
   --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-gray-color: var(--spectrum-gray-500);
   --spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-color-800);
   --spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-color-800);
@@ -105,10 +106,10 @@ governing permissions and limitations under the License.
 @media (forced-colors: active) {
   .spectrum-StatusLight {
     forced-color-adjust: none;
-    /* --spectrum-statuslight-m-info-text-color: CanvasText; */
-    /* --spectrum-statuslight-m-neutral-text-color: CanvasText; */
+    --highcontrast-statuslight-content-color-default: CanvasText;
+    --highcontrast-statuslight-subdued-content-color-default: CanvasText;
     &:before {
-      border: 1px solid ButtonText;
+      border: var(--mod-statuslight-border-width, var(--spectrum-statuslight-border-width)) solid ButtonText;
     }
   }
 }
@@ -118,19 +119,19 @@ governing permissions and limitations under the License.
   flex-direction: row;
   align-items: flex-start;
 
-  min-height: var(--spectrum-statuslight-height);
+  min-height: var(--mod-statuslight-height, var(--spectrum-statuslight-height));
 
-  padding-block-start: var(--spectrum-statuslight-spacing-top-to-label);
-  padding-block-end: var(--spectrum-statuslight-spacing-bottom-to-label);
+  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-font-size);
-  font-weight: var(--spectrum-statuslight-font-weight);
+  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(--spectrum-statuslight-line-height);
+  line-height: var(--mod-statuslight-line-height, --spectrum-statuslight-line-height);
 
-  color: var(--spectrum-statuslight-content-color-default);
+  color: var(--highcontrast-statuslight-content-color-default, var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default)));
 
   &:lang(ja),
   &:lang(zh),
@@ -144,12 +145,13 @@ governing permissions and limitations under the License.
     flex-grow: 0;
     flex-shrink: 0;
     display: inline-block;
-    inline-size: var(--spectrum-statuslight-dot-size);
-    block-size: var(--spectrum-statuslight-dot-size);
-    border-radius: var(--spectrum-statuslight-corner-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-start: calc(var(--spectrum-statuslight-spacing-top-to-dot) - var(--spectrum-statuslight-spacing-top-to-label));
-    margin-inline-end: var(--spectrum-statuslight-spacing-dot-to-label);
+    --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;
@@ -164,87 +166,87 @@ governing permissions and limitations under the License.
 /* Semantic Colors */
 
 .spectrum-StatusLight--neutral {
-  color: var(--spectrum-statuslight-subdued-content-color-default);
+  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(--spectrum-statuslight-semantic-gray-color);
+    background-color: var(--mod-statuslight-semantic-gray-color, var(--spectrum-statuslight-semantic-gray-color));
   }
 }
 
 .spectrum-StatusLight--accent::before {
-  background-color: var(--spectrum-statuslight-semantic-accent-color);
+  background-color: var(--mod-statuslight-semantic-accent-color, var(--spectrum-statuslight-semantic-accent-color));
 }
 
 .spectrum-StatusLight--info::before {
-  background-color: var(--spectrum-statuslight-semantic-info-color);
+  background-color: var(--mod-statuslight-semantic-info-color, var(--spectrum-statuslight-semantic-info-color));
 }
 
 .spectrum-StatusLight--negative::before {
-  background-color: var(--spectrum-statuslight-semantic-negative-color);
+  background-color: var(--mod-statuslight-semantic-negative-color, var(--spectrum-statuslight-semantic-negative-color));
 }
 
 .spectrum-StatusLight--notice::before {
-  background-color: var(--spectrum-statuslight-semantic-notice-color);
+  background-color: var(--mod-statuslight-semantic-notice-color, var(--spectrum-statuslight-semantic-notice-color));
 }
 
 .spectrum-StatusLight--positive::before {
-  background-color: var(--spectrum-statuslight-semantic-positive-color);
+  background-color: var(--mod-statuslight-semantic-positive-color, var(--spectrum-statuslight-semantic-positive-color));
 }
 
 /* Non-Semantic Colors */
 
 .spectrum-StatusLight--gray::before {
-  background-color: var(--spectrum-statuslight-nonsemantic-gray-color);
+  background-color: var(--mod-statuslight-nonsemantic-gray-color, var(--spectrum-statuslight-nonsemantic-gray-color));
 }
 
 .spectrum-StatusLight--red::before {
-  background-color: var(--spectrum-statuslight-nonsemantic-red-color);
+  background-color: var(--mod-statuslight-nonsemantic-red-color, var(--spectrum-statuslight-nonsemantic-red-color));
 }
 
 .spectrum-StatusLight--orange::before {
-  background-color: var(--spectrum-statuslight-nonsemantic-orange-color);
+  background-color: var(--mod-statuslight-nonsemantic-orange-color, var(--spectrum-statuslight-nonsemantic-orange-color));
 }
 
 .spectrum-StatusLight--yellow::before {
-  background-color: var(--spectrum-statuslight-nonsemantic-yellow-color);
+  background-color: var(--mod-statuslight-nonsemantic-yellow-color, var(--spectrum-statuslight-nonsemantic-yellow-color));
 }
 
 .spectrum-StatusLight--chartreuse::before {
-  background-color: var(--spectrum-statuslight-nonsemantic-chartreuse-color);
+  background-color: var(--mod-statuslight-nonsemantic-chartreuse-color, var(--spectrum-statuslight-nonsemantic-chartreuse-color));
 }
 
 .spectrum-StatusLight--celery::before {
-  background-color: var(--spectrum-statuslight-nonsemantic-celery-color);
+  background-color: var(--mod-statuslight-nonsemantic-celery-color, var(--spectrum-statuslight-nonsemantic-celery-color));
 }
 
 .spectrum-StatusLight--green::before {
-  background-color: var(--spectrum-statuslight-nonsemantic-green-color);
+  background-color: var(--mod-statuslight-nonsemantic-green-color, var(--spectrum-statuslight-nonsemantic-green-color));
 }
 
 .spectrum-StatusLight--seafoam::before {
-  background-color: var(--spectrum-statuslight-nonsemantic-seafoam-color);
+  background-color: var(--mod-statuslight-nonsemantic-seafoam-color, var(--spectrum-statuslight-nonsemantic-seafoam-color));
 }
 
 .spectrum-StatusLight--cyan::before {
-  background-color: var(--spectrum-statuslight-nonsemantic-cyan-color);
+  background-color: var(--mod-statuslight-nonsemantic-cyan-color, var(--spectrum-statuslight-nonsemantic-cyan-color));
 }
 
 .spectrum-StatusLight--blue::before {
-  background-color: var(--spectrum-statuslight-nonsemantic-blue-color);
+  background-color: var(--mod-statuslight-nonsemantic-blue-color, var(--spectrum-statuslight-nonsemantic-blue-color));
 }
 
 .spectrum-StatusLight--indigo::before {
-  background-color: var(--spectrum-statuslight-nonsemantic-indigo-color);
+  background-color: var(--mod-statuslight-nonsemantic-indigo-color, var(--spectrum-statuslight-nonsemantic-indigo-color));
 }
 
 .spectrum-StatusLight--purple::before {
-  background-color: var(--spectrum-statuslight-nonsemantic-purple-color);
+  background-color: var(--mod-statuslight-nonsemantic-purple-color, var(--spectrum-statuslight-nonsemantic-purple-color));
 }
 
 .spectrum-StatusLight--fuchsia::before {
-  background-color: var(--spectrum-statuslight-nonsemantic-fuchsia-color);
+  background-color: var(--mod-statuslight-nonsemantic-fuchsia-color, var(--spectrum-statuslight-nonsemantic-fuchsia-color));
 }
 
 .spectrum-StatusLight--magenta::before {
-  background-color: var(--spectrum-statuslight-nonsemantic-magenta-color);
+  background-color: var(--mod-statuslight-nonsemantic-magenta-color, var(--spectrum-statuslight-nonsemantic-magenta-color));
 }