Merge pull request #319 from ebs-integrator/use-theme

Added useTheme hook
ebs-integrator · Aug 24, 2021 · 5170735 · 5170735
2 parents 6fb01f2 + 41ea485
commit 5170735
Show file tree

Hide file tree

Showing 35 changed files with 321 additions and 152 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -7,7 +7,7 @@ module.exports = {
     '../src/components/*.stories.mdx',
     '../src/components/**/**/*.stories.@(tsx|mdx)',
   ],
-  addons: ['@storybook/addon-docs', '@storybook/addon-links', '@storybook/addon-controls'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-links', '@storybook/addon-controls', 'storybook-addon-themes'],
   presets: [
     '@storybook/preset-create-react-app',
     {

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -20,4 +20,16 @@ export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   layout: 'centered',
   controls: { expanded: true },
+  themes: {
+    default: 'Blue',
+    list: [
+      { name: 'Blue', class: '', color: '#3bc0f9' },
+      { name: 'Dark', class: 'theme--dark', color: '#222222' },
+      { name: 'Grey', class: 'theme--grey', color: '#888888' },
+      { name: 'Green', class: 'theme--green', color: '#2ac952' },
+      { name: 'Yellow', class: 'theme--yellow', color: '#ffd83d' },
+      { name: 'Red', class: 'theme--red', color: '#ff3a30' },
+      { name: 'Violet', class: 'theme--violet', color: '#9b1dd9' },
+    ],
+  },
 };
diff --git a/package.json b/package.json
@@ -113,6 +113,7 @@
     "rollup-plugin-scss": "^2.6.1",
     "rollup-plugin-typescript2": "^0.17.0",
     "rollup-plugin-url": "^1.4.0",
+    "storybook-addon-themes": "^6.1.0",
     "typescript": "^3.9.7"
   },
   "files": [

diff --git a/src/components/atoms/Avatar/Avatar.scss b/src/components/atoms/Avatar/Avatar.scss
@@ -10,17 +10,17 @@
   }
 
   &--regular {
-    color: $primary-color;
+    color: var(--primary-color);
     background-color: $grey-100;
 
     .ebs-icon {
-      color: $primary-color;
+      color: var(--primary-color);
     }
   }
 
   &--primary {
     color: $white;
-    background-color: $primary-color;
+    background-color: var(--primary-color);
 
     .ebs-icon {
       color: $white;
@@ -100,7 +100,7 @@
     }
 
     &--regular {
-      background-color: $primary-color;
+      background-color: var(--primary-color);
     }
 
     &--inactive {

diff --git a/src/components/atoms/Button/Button.scss b/src/components/atoms/Button/Button.scss
@@ -34,19 +34,19 @@
 
   // button type (Color)
   &--primary {
-    border-color: $primary-color;
-    background-color: $primary-color;
+    border-color: var(--primary-color);
+    background-color: var(--primary-color);
     color: $white;
 
     &:hover {
-      border-color: $primary-600;
-      background-color: $primary-600;
+      border-color: var(--primary-600);
+      background-color: var(--primary-600);
     }
 
     &:active,
     &.active {
-      border-color: $primary-700;
-      background-color: $primary-700;
+      border-color: var(--primary-700);
+      background-color: var(--primary-700);
     }
 
     .ebs-icon {
@@ -68,8 +68,8 @@
     color: $white;
 
     @include hover-state {
-      border-color: $primary-600;
-      background-color: $primary-600;
+      border-color: var(--primary-600);
+      background-color: var(--primary-600);
     }
 
     .ebs-button,
@@ -92,13 +92,13 @@
   }
 
   &--fill {
-    border-color: $primary-100;
-    background-color: $primary-100;
-    color: $primary-color;
+    border-color: var(--primary-100);
+    background-color: var(--primary-100);
+    color: var(--primary-color);
 
     &:hover {
-      border-color: $primary-color;
-      background-color: $primary-color;
+      border-color: var(--primary-color);
+      background-color: var(--primary-color);
       color: $white;
 
       .ebs-button,
@@ -109,8 +109,8 @@
 
     &:active,
     &.active {
-      border-color: $primary-600;
-      background-color: $primary-600;
+      border-color: var(--primary-600);
+      background-color: var(--primary-600);
       color: $white;
 
       .ebs-button,
@@ -120,12 +120,12 @@
     }
 
     .ebs-icon {
-      color: $primary-color;
+      color: var(--primary-color);
     }
   }
 
   &--fill & {
-    color: $primary-color;
+    color: var(--primary-color);
   }
 
   &--ghost.ebs-button__wrapper {
@@ -167,14 +167,14 @@
 
   &--text {
     background-color: transparent;
-    color: $primary-color;
+    color: var(--primary-color);
 
     &:hover {
       background-color: transparent;
 
       .ebs-button,
       .ebs-icon {
-        color: $primary-600;
+        color: var(--primary-600);
       }
     }
 
@@ -184,17 +184,17 @@
 
       .ebs-button,
       .ebs-icon {
-        color: $primary-700;
+        color: var(--primary-700);
       }
     }
 
     .ebs-icon {
-      color: $primary-color;
+      color: var(--primary-color);
     }
   }
 
   &--text & {
-    color: $primary-color;
+    color: var(--primary-color);
   }
 
   &--disabled {

diff --git a/src/components/atoms/Chips/Chips.scss b/src/components/atoms/Chips/Chips.scss
@@ -9,13 +9,13 @@
   transition: all $transition-time;
 
   &--checked {
-    background-color: $primary-000;
-    border-color: $primary-color;
-    color: $primary-color;
+    background-color: var(--primary-000);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
 
     &:hover {
-      background-color: $primary-color;
-      border-color: $primary-color;
+      background-color: var(--primary-color);
+      border-color: var(--primary-color);
       color: $white;
 
       .ebs-icon {
@@ -31,8 +31,8 @@
 
     &:hover {
       background-color: transparent;
-      border-color: $primary-400;
-      color: $primary-400;
+      border-color: var(--primary-400);
+      color: var(--primary-400);
     }
   }
 

diff --git a/src/components/atoms/Input/Input.scss b/src/components/atoms/Input/Input.scss
@@ -15,7 +15,7 @@
 
   &--active,
   &.focus {
-    border-color: $primary-color;
+    border-color: var(--primary-color);
     background-color: $white;
 
     .ebs-input {

diff --git a/src/components/atoms/Label/Label.scss b/src/components/atoms/Label/Label.scss
@@ -84,9 +84,9 @@
   }
 
   &--primary {
-    background-color: $primary-000;
-    color: $primary-color;
-    border-color: $primary-color;
+    background-color: var(--primary-000);
+    color: var(--primary-color);
+    border-color: var(--primary-color);
   }
 
   &--fill {

diff --git a/src/components/atoms/Radio/Radio.scss b/src/components/atoms/Radio/Radio.scss
@@ -82,27 +82,27 @@
     cursor: pointer;
 
     &:hover ~ .ebs-radio {
-      background-color: $primary-100;
+      background-color: var(--primary-100);
 
       &__dot {
-        border-color: $primary-color;
-        background-color: $primary-100;
+        border-color: var(--primary-color);
+        background-color: var(--primary-100);
       }
     }
 
     &:checked:hover ~ .ebs-radio {
-      background-color: $primary-100;
+      background-color: var(--primary-100);
 
       &__dot {
-        border-color: $primary-color;
-        background-color: $primary-color;
-        box-shadow: 0px 0px 0px 3px $primary-100 inset;
+        border-color: var(--primary-color);
+        background-color: var(--primary-color);
+        box-shadow: 0px 0px 0px 3px var(--primary-100 inset);
       }
     }
 
     &:checked ~ .ebs-radio .ebs-radio__dot {
-      border-color: $primary-color;
-      background-color: $primary-color;
+      border-color: var(--primary-color);
+      background-color: var(--primary-color);
       box-shadow: 0px 0px 0px 3px $white inset;
     }
   }

diff --git a/src/components/atoms/Switch/Switch.scss b/src/components/atoms/Switch/Switch.scss
@@ -15,8 +15,8 @@
     }
 
     &:hover .ebs-switch__dot {
-      border-color: $primary-200;
-      box-shadow: 0px 0px 0px 2px $primary-color inset;
+      border-color: var(--primary-200);
+      box-shadow: 0px 0px 0px 2px var(--primary-color inset);
     }
   }
 
@@ -32,29 +32,29 @@
   }
 
   &--checked {
-    background-color: $primary-200;
+    background-color: var(--primary-200);
 
     .ebs-switch__dot {
       transform: translate(16px, -50%);
-      background-color: $primary-400;
-      border-color: $primary-200;
+      background-color: var(--primary-400);
+      border-color: var(--primary-200);
     }
 
     &:hover .ebs-switch__dot {
-      border-color: $primary-300;
-      box-shadow: 0px 0px 0px 2px $primary-color inset;
+      border-color: var(--primary-300);
+      box-shadow: 0px 0px 0px 2px var(--primary-color inset);
     }
   }
 
   &--checked.disabled {
     cursor: not-allowed;
-    background-color: $primary-100;
+    background-color: var(--primary-100);
 
     .ebs-switch__dot,
     .ebs-switch__dot:hover {
-      box-shadow: 0px 0px 0px 2px $primary-400 inset;
-      background-color: $primary-300;
-      border-color: $primary-100;
+      box-shadow: 0px 0px 0px 2px var(--primary-400 inset);
+      background-color: var(--primary-300);
+      border-color: var(--primary-100);
     }
   }
 
@@ -66,7 +66,7 @@
     width: rem(16px);
     height: rem(16px);
     border: 2px solid transparent;
-    box-shadow: 0px 0px 0px 2px $primary-color inset;
+    box-shadow: 0px 0px 0px 2px var(--primary-color inset);
     border-radius: 50%;
     overflow: hidden;
     transition: all $transition-time;

diff --git a/src/components/molecules/Checkbox/Checkbox.scss b/src/components/molecules/Checkbox/Checkbox.scss
@@ -14,8 +14,8 @@
     }
 
     .ebs-checkbox {
-      border-color: $primary-color;
-      background-color: $primary-color;
+      border-color: var(--primary-color);
+      background-color: var(--primary-color);
 
       .ebs-checkbox__check {
         font-size: 0;
@@ -91,8 +91,8 @@
 
   &:checked {
     ~ .ebs-checkbox {
-      border-color: $primary-color;
-      background-color: $primary-color;
+      border-color: var(--primary-color);
+      background-color: var(--primary-color);
     }
 
     ~ .ebs-checkbox .ebs-checkbox__check {
@@ -101,20 +101,20 @@
     }
 
     &:hover ~ .ebs-checkbox {
-      border-color: $primary-color;
-      background-color: $primary-color;
+      border-color: var(--primary-color);
+      background-color: var(--primary-color);
 
       &:before {
-        background-color: $primary-100;
+        background-color: var(--primary-100);
       }
     }
   }
 
   &:hover ~ .ebs-checkbox {
-    border-color: $primary-color;
+    border-color: var(--primary-color);
 
     &:before {
-      background-color: $primary-100;
+      background-color: var(--primary-100);
     }
   }
 }