feat(card): lighter and darker palettes (#1327)

* chore: stylelint config * feat(lib): context-picker allow attr * feat(lib): reflect color-palette on demo * fix(card): lighter/darker color-palettes * fix(card): adjust whitespace to suit designs * docs(card): custom header context demo
RedHat-UX · Nov 16, 2023 · 6e8fad6 · 6e8fad6
1 parent 369d5b7
commit 6e8fad6
Show file tree

Hide file tree

Showing 43 changed files with 604 additions and 340 deletions.
diff --git a/.changeset/card-whitespace.md b/.changeset/card-whitespace.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-card>`: adjust whitespace of card parts to suit design
diff --git a/.stylelintrc.yml b/.stylelintrc.yml
@@ -1,4 +1,7 @@
-extends: stylelint-config-standard
+extends:
+  - stylelint-config-standard
+  - stylelint-stylistic/config
+
 ignoreFiles:
   - node_modules/**/*
 
@@ -16,18 +19,6 @@ rules:
     - ignoreShorthands:
         - /grid/
 
-  # TODO: migrate the following paragraph to stylelint-stylistic
-  # see https://github.com/elirasza/stylelint-stylistic/tree/main/lib/rules/indentation
-  string-quotes: double
-  selector-combinator-space-after: always
-  selector-combinator-space-before: always
-  indentation:
-   - 2
-   - indentInsideParens: 'once-at-root-twice-in-block'
-  max-line-length:
-    - 100
-    - ignorePattern: /--rh-font-family-/
-
   number-max-precision: 6
   no-descending-specificity:
     - true
@@ -49,18 +40,31 @@ rules:
     - ignorePseudoElements:
       - /part(.*)/
 
+  stylistic/string-quotes: double
+  stylistic/selector-combinator-space-after: always
+  stylistic/selector-combinator-space-before: always
+  stylistic/indentation:
+   - 2
+   - indentInsideParens: 'once-at-root-twice-in-block'
+  stylistic/max-line-length:
+    - 100
+    - ignorePattern: /--rh-font-family-/
+
   rhds/token-values: true
 
+  media-feature-range-notation: prefix
+
 plugins:
   - ./node_modules/@rhds/tokens/plugins/stylelint.cjs
+  - stylelint-stylistic
 
 overrides:
   - files:
       - docs/**/*.scss
     defaultSeverity: warning
     extends: stylelint-config-standard-scss
     rules:
-      max-line-length:
+      stylistic/max-line-length:
         - 120
         - ignorePattern: /--rh-font-family-/
 
diff --git a/elements/rh-accordion/rh-accordion-header.css b/elements/rh-accordion/rh-accordion-header.css
@@ -115,4 +115,4 @@ span {
 .toggle:after {
   inset-block: 0;
   inset-inline-start: 0;
-}
+}
diff --git a/elements/rh-accordion/rh-accordion-panel.css b/elements/rh-accordion/rh-accordion-panel.css
@@ -60,15 +60,20 @@
   border-inline-end:
     1px
     solid
-    var(--_panel-border-inline-end-color,
-      var(--rh-color-border-subtle-on-light, #c7c7c7));
+    var(
+        --_panel-border-inline-end-color,
+        var(--rh-color-border-subtle-on-light, #c7c7c7)
+      );
   background-color: var(--_background-color);
 }
 
 .content[expanded],
 :host([expanded]) .content {
-  --_panel-body--before-background-color: var(--_panel-content-body-accent-color,
-    var(--rh-color-accent-base-on-light, #0066cc));
+  --_panel-body--before-background-color:
+    var(
+        --_panel-content-body-accent-color,
+        var(--rh-color-accent-base-on-light, #0066cc)
+      );
 }
 
 .body:after {

diff --git a/elements/rh-alert/rh-alert.css b/elements/rh-alert/rh-alert.css
@@ -41,7 +41,7 @@
 }
 
 :host([toast]),
-:host([variant="toast"]){
+:host([variant="toast"]) {
   --_background-color: var(--rh-color-surface-lightest, #ffffff);
 
   max-width: 550px;

diff --git a/elements/rh-audio-player/rh-audio-player-lightdom.css b/elements/rh-audio-player/rh-audio-player-lightdom.css
@@ -49,16 +49,20 @@ rh-audio-player[color-palette="dark"] {
 
 rh-audio-player[color-palette="dark"] > * {
   background-color:
-    var(--rh-audio-player-background-color,
-      var(--rh-color-surface-darkest, #151515));
+    var(
+        --rh-audio-player-background-color,
+        var(--rh-color-surface-darkest, #151515)
+      );
 }
 
 rh-audio-player-about,
 rh-audio-player-subscribe,
 rh-transcript {
   background-color:
-    var(--rh-audio-player-background-color,
-      var(--rh-color-surface-lightest, #ffffff));
+    var(
+        --rh-audio-player-background-color,
+        var(--rh-color-surface-lightest, #ffffff)
+      );
 }
 
 rh-audio-player > [slot="series"] {
@@ -82,4 +86,3 @@ rh-audio-player [slot="heading"] {
 rh-audio-player [slot="heading"] {
   font-size: var(--rh-font-size-body-text-md, 1rem);
 }
-
diff --git a/elements/rh-audio-player/rh-audio-player-range-styles.css b/elements/rh-audio-player/rh-audio-player-range-styles.css
@@ -1,26 +1,27 @@
-/*
-Adapted from:
-
-Copyright (c) 2023 by S. Shahriar (https://codepen.io/ShadowShahriar/pen/zYPPYrQ)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of 
-this software and associated documentation files (the "Software"), to deal in the 
-Software without restriction, including without limitation the rights to use, 
-copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the 
-Software, and to permit persons to whom the Software is furnished to do so, 
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all 
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 
-DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 
-ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS 
-IN THE SOFTWARE.
-*/
+/**
+ * @license Adapted from:
+ *
+ * Copyright (c) 2023 by S. Shahriar (https://codepen.io/ShadowShahriar/pen/zYPPYrQ)
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in the
+ * Software without restriction, including without limitation the rights to use,
+ * copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the
+ * Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+ * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ * ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
 input[type="range"] {
   display: inline-flex;
   align-items: center;
@@ -45,7 +46,6 @@ input[type="range"] {
   --_outline: var(--rh-border-width-md, 2px) solid var(--_interactive-color);
   --_thumb-color: var(--rh-audio-player-range-thumb-color, var(--_accent-color));
   --_progress-color: var(--rh-audio-player-range-progress-color, var(--_accent-color));
-
 }
 
 input[type="range"][hidden] {
@@ -95,13 +95,15 @@ input[type="range"]::-webkit-slider-thumb {
   box-shadow: var(--box-fill);
   border-radius: var(--_thumb-width, var(--_thumb-height));
 
-  /* stylelint-disable-next-line max-line-length */
   --_clip-top: calc((var(--_thumb-height) - var(--_track-height)) * 0.5 - 0.5px);
   --_clip-bottom: calc(var(--_thumb-height) - var(--_clip-top));
   --_clip-further: calc(100% + 1px);
-
-  /* stylelint-disable-next-line max-line-length */
-  --box-fill: calc(-100vmax - var(--_thumb-width, var(--_thumb-height))) 0 0 100vmax var(--_box-fill-color, currentcolor);
+  --box-fill:
+    calc(-100vmax - var(--_thumb-width, var(--_thumb-height)))
+    0
+    0
+    100vmax
+    var(--_box-fill-color, currentcolor);
 
   clip-path:
     polygon(
@@ -122,8 +124,11 @@ input[type="range"]:disabled::-webkit-slider-thumb {
 
 input[type="range"]::-webkit-slider-runnable-track {
   border-radius: 3px;
-  /* stylelint-disable-next-line max-line-length */
-  background: linear-gradient(var(--_track-fill-color) 0 0) scroll no-repeat center / 100% calc(var(--_track-height) + 1px);
+  background:
+    linear-gradient(var(--_track-fill-color) 0 0)
+    scroll
+    no-repeat
+    center / 100% calc(var(--_track-height) + 1px);
 }
 
 input[type="range"],
@@ -164,4 +169,4 @@ input[type="range"]::-moz-range-progress {
 
 input[type="range"]:disabled::-moz-range-thumb {
   cursor: not-allowed;
-}
+}
diff --git a/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.css b/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.css
@@ -20,14 +20,18 @@
   overflow-y: visible;
 
   --_fade-color:
-    var(--rh-audio-player-scrolling-text-overflow-background-color,
-      var(--rh-color-surface-lightest, #ffffff));
+    var(
+        --rh-audio-player-scrolling-text-overflow-background-color,
+        var(--rh-color-surface-lightest, #ffffff)
+      );
 }
 
 #outer.dark {
   --_fade-color:
-    var(--rh-audio-player-scrolling-text-overflow-background-color,
-      var(--rh-color-surface-darkest, #151515));
+    var(
+        --rh-audio-player-scrolling-text-overflow-background-color,
+        var(--rh-color-surface-darkest, #151515)
+      );
 }
 
 #outer.rtl {