feat: Add a dark theme to the showcase

bloomreach · Nov 20, 2024 · f246e75 · f246e75
1 parent 11decc5
commit f246e75
Show file tree

Hide file tree

Showing 15 changed files with 185 additions and 61 deletions.
diff --git a/src/components/checkbox-group/checkbox-group.properties.scss b/src/components/checkbox-group/checkbox-group.properties.scss
@@ -18,6 +18,24 @@
   initial-value: transparent;
 };
 
+@property --lui-checkbox__border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #bdcee3;
+};
+
+@property --lui-checkbox__color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: inherit;
+};
+
+@property --lui-checkbox__background--hover {
+  syntax: "*";
+  inherits: true;
+  initial-value: #f7f9fc;
+};
+
 @property --lui-checkbox__background--active {
   syntax: "*";
   inherits: true;

diff --git a/src/components/checkbox-group/checkbox-group.scss b/src/components/checkbox-group/checkbox-group.scss
@@ -13,6 +13,7 @@
     gap: 0.5rem;
     font-size: var(--lui-checkbox__font-size);
     cursor: pointer;
+    color: var(--lui-checkbox__color);
   }
 
   .lui-cg-item-checkbox {
@@ -23,7 +24,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid #bdcee3;
+    border: 1px solid var(--lui-checkbox__border-color);
     position: relative;
     cursor: pointer;
     padding: 0;
@@ -35,7 +36,7 @@
   }
 
   .lui-cg-item-checkbox:where(:not([data-state=checked])):hover {
-    background-color: #f7f9fc;
+    background-color: var(--lui-checkbox__background--hover);
   }
 
   .lui-cg-item-checkbox-indicator {

diff --git a/src/components/pagination/pagination.properties.scss b/src/components/pagination/pagination.properties.scss
@@ -1,9 +1,15 @@
 @property --lui-pagination__select-border {
   syntax: '*';
-  inherits: false;
+  inherits: true;
   initial-value: 1px solid #bdcee3;
 }
 
+@property --lui-pagination__select-background {
+  syntax: '*';
+  inherits: true;
+  initial-value: white;
+}
+
 @property --lui-pagination__navigation-gap {
   syntax: "*";
   inherits: true;

diff --git a/src/components/pagination/pagination.scss b/src/components/pagination/pagination.scss
@@ -73,7 +73,7 @@
     min-height: 36px;
     border: var(--lui-pagination__select-border);
     border-radius: var(--lui-pagination__item-border-radius);
-    background: #fff;
+    background: var(--lui-pagination__select-background);
     cursor: pointer;
   }
 

diff --git a/src/components/product-card/product-card.stories.tsx b/src/components/product-card/product-card.stories.tsx
@@ -376,8 +376,8 @@ export const Themes: Story = {
               '--lui-pc__btn-color': 'white',
               '--lui-pc__badge-background': '#CBC6E9',
               '--lui-pc__badge-color': 'rebeccapurple',
-              '--lui-swatch-btn-border-color-hover': '#666',
-              '--lui-swatch-btn-border-color-active': '#999',
+              '--lui-swatch__btn-border-color-hover': '#666',
+              '--lui-swatch__btn-border-color-active': '#999',
           } as CSSProperties}
         >
           <ProductCard.Root {...args}>

diff --git a/src/components/range/range.properties.scss b/src/components/range/range.properties.scss
@@ -66,6 +66,18 @@
   initial-value: #bdcee3;
 };
 
+@property --lui-range__input-background {
+  syntax: "*";
+  inherits: true;
+  initial-value: transparent;
+};
+
+@property --lui-range__input-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: inherit;
+};
+
 @property --lui-range__btn-background {
   syntax: "*";
   inherits: true;

diff --git a/src/components/range/range.scss b/src/components/range/range.scss
@@ -54,6 +54,8 @@
     border: 1px solid var(--lui-range__input-border-color);
     border-radius: var(--lui-range__border-radius);
     width: 100%;
+    background: var(--lui-range__input-background);
+    color: var(--lui-range__input-color);
   }
 
   .lui-range-input-separator {

diff --git a/src/components/swatch-bar/__snapshots__/swatch-bar.spec.tsx.snap b/src/components/swatch-bar/__snapshots__/swatch-bar.spec.tsx.snap
@@ -26,7 +26,7 @@ exports[`SwatchBar > should render successfully 1`] = `
       data-state="off"
       disabled=""
       role="radio"
-      style="--lui-swatch-btn-border-color--active: crimson;"
+      style="--lui-swatch__btn--active-border-color: crimson;"
       tabindex="-1"
       type="button"
     >
@@ -43,7 +43,7 @@ exports[`SwatchBar > should render successfully 1`] = `
       data-radix-collection-item=""
       data-state="off"
       role="radio"
-      style="--lui-swatch-btn-border-color--active: rebeccapurple;"
+      style="--lui-swatch__btn--active-border-color: rebeccapurple;"
       tabindex="-1"
       type="button"
     >
@@ -60,7 +60,7 @@ exports[`SwatchBar > should render successfully 1`] = `
       data-radix-collection-item=""
       data-state="off"
       role="radio"
-      style="--lui-swatch-btn-border-color--active: gold;"
+      style="--lui-swatch__btn--active-border-color: gold;"
       tabindex="-1"
       type="button"
     >

diff --git a/src/components/swatch-bar/components/swatch-color.tsx b/src/components/swatch-bar/components/swatch-color.tsx
@@ -20,7 +20,7 @@ export const SwatchColor = forwardRef((
         {...rest}
         value={value}
         className={cn('lui-swatch-item lui-swatch-item--color', className)}
-        style={{'--lui-swatch-btn-border-color--active': color} as CSSProperties}
+        style={{'--lui-swatch__btn--active-border-color': color} as CSSProperties}
         ref={forwardedRef}
       >
         <div className="lui-swatch-color" style={{backgroundColor: color}}></div>

diff --git a/src/components/swatch-bar/swatch-bar.properties.scss b/src/components/swatch-bar/swatch-bar.properties.scss
@@ -1,42 +1,60 @@
 @import url("../theme/theme.properties.scss");
 
-@property --lui-swatch-btn-bg-color {
-  syntax: "<color>";
+@property --lui-swatch__btn-background {
+  syntax: "*";
   inherits: true;
   initial-value: transparent;
 };
 
-@property --lui-swatch-btn-border-color {
+@property --lui-swatch__btn-border-color {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 };
 
-@property --lui-swatch-btn-border-color--hover {
+@property --lui-swatch__btn--text-border-color {
   syntax: "<color>";
   inherits: true;
-  initial-value: #8d9db9;
+  initial-value: #ccc;
 };
 
-@property --lui-swatch-btn--text-bg-color--hover {
+@property --lui-swatch__btn--text-color {
   syntax: "<color>";
   inherits: true;
-  initial-value: #e1e8f5;
+  initial-value: black;
 };
 
-@property --lui-swatch-btn--text-bg-color--active {
+@property --lui-swatch__btn-border-color--hover {
   syntax: "<color>";
   inherits: true;
+  initial-value: #8d9db9;
+};
+
+@property --lui-swatch__btn--text--hover-background {
+  syntax: "*";
+  inherits: true;
   initial-value: #e1e8f5;
 };
 
-@property --lui-swatch-btn-border-color--active {
+@property --lui-swatch__btn--text--active-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: white;
+};
+
+@property --lui-swatch__btn--text--active-bg-color {
+  syntax: "*";
+  inherits: true;
+  initial-value: #3e63dd;
+};
+
+@property --lui-swatch__btn--active-border-color {
   syntax: "<color>";
   inherits: true;
-  initial-value: #002840;
+  initial-value: white;
 };
 
-@property --lui-swatch-btn-padding {
+@property --lui-swatch__btn-padding {
   syntax: "*";
   inherits: true;
   initial-value: 0.2rem;

diff --git a/src/components/swatch-bar/swatch-bar.scss b/src/components/swatch-bar/swatch-bar.scss
@@ -24,9 +24,9 @@
   }
 
   .lui-swatch-item {
-    background: var(--lui-swatch-btn-bg-color);
-    border: 1px solid var(--lui-swatch-btn-border-color);
-    padding: var(--lui-swatch-btn-padding);
+    background: var(--lui-swatch__btn-background);
+    border: 1px solid var(--lui-swatch__btn-border-color);
+    padding: var(--lui-swatch__btn-padding);
     border-radius: 3px;
     cursor: pointer;
   }
@@ -36,22 +36,23 @@
   }
 
   .lui-swatch-item--image {
-    --lui-swatch-btn-padding: 0;
+    --lui-swatch__btn-padding: 0;
     margin: 0;
     line-height: 0;
   }
 
   .lui-swatch-item--text {
-    --lui-swatch-btn-border-color: #ccc;
-    --lui-swatch-btn-padding: 0.2rem 0.4rem;
+    --lui-swatch__btn-border-color: var(--lui-swatch__btn--text-border-color);
+    --lui-swatch__btn-padding: 0.2rem 0.4rem;
+    color: var(--lui-swatch__btn--text-color);
   }
 
   .lui-swatch-item[data-state="off"]:hover:not(:disabled), .lui-swatch-item[data-state="off"]:focus:not(:disabled) {
-    --lui-swatch-btn-border-color: var(--lui-swatch-btn-border-color--hover);
+    --lui-swatch__btn-border-color: var(--lui-swatch__btn-border-color--hover);
   }
 
   .lui-swatch-item--text[data-state="off"]:hover:not(:disabled) {
-    --lui-swatch-btn-bg-color: var(--lui-swatch-btn--text-bg-color--hover);
+    --lui-swatch__btn-background: var(--lui-swatch__btn--text--hover-background);
   }
 
   .lui-swatch-item:disabled {
@@ -62,23 +63,23 @@
 
   .lui-swatch-item:disabled:before {
     position: absolute;
-    top: var(--lui-swatch-btn-padding);
-    left: var(--lui-swatch-btn-padding);
-    right: var(--lui-swatch-btn-padding);
-    bottom: var(--lui-swatch-btn-padding);
+    top: var(--lui-swatch__btn-padding);
+    left: var(--lui-swatch__btn-padding);
+    right: var(--lui-swatch__btn-padding);
+    bottom: var(--lui-swatch__btn-padding);
     display: block;
     background-image: url('./disabled.svg');
     content: "";
     opacity: 0.5;
   }
 
   .lui-swatch-item[data-state="on"] {
-    --lui-swatch-btn-border-color: var(--lui-swatch-btn-border-color--active);
+    --lui-swatch__btn-border-color: var(--lui-swatch__btn--active-border-color);
   }
 
   .lui-swatch-item--text[data-state="on"] {
-    color: var(--lui-swatch-btn-border-color--active);
-    --lui-swatch-btn-bg-color: var(--lui-swatch-btn--text-bg-color--hover);
+    color: var(--lui-swatch__btn--text--active-color);
+    --lui-swatch__btn-background: var(--lui-swatch__btn--text--active-bg-color);
   }
 
   .lui-swatch-item--image img {

diff --git a/src/components/tag/tag.types.ts b/src/components/tag/tag.types.ts
@@ -1,6 +1,6 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, HTMLAttributes } from 'react';
 
-export interface TagProps extends PropsWithChildren {
+export interface TagProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {
   /**
    * Custom class name for the container of the component.
    */

diff --git a/src/components/theme/theme.properties.scss b/src/components/theme/theme.properties.scss
@@ -27,3 +27,9 @@
   inherits: true;
   initial-value: #5e739c;
 }
+
+@property --lui-base__link-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #002840;
+}
diff --git a/src/components/theme/theme.scss b/src/components/theme/theme.scss
@@ -11,4 +11,14 @@
     *,:after,:before {
         box-sizing: var(--lui-base__box-sizing);
     }
+
+    .lui-link {
+      text-decoration: none;
+      color: var(--lui-base__link-color);
+      border-bottom: 1px dashed var(--lui-base__link-color);
+
+      &:hover {
+        border-bottom-style: solid;
+      }
+    }
 }