Merge pull request #1157 from p3ol/feature/dark-mode

✨ feat: add dark mode

.storybook/main.js

@@ -8,6 +8,7 @@ module.exports = {
   addons: [
     '@storybook/addon-storysource',
     '@storybook/addon-actions/register',
+    'storybook-dark-mode',
   ],
   core: {
     builder: 'webpack5',

.storybook/preview.js

@@ -1 +1,13 @@
+import { themes } from '@storybook/theming';
+
 import './index.sass';
+
+export const parameters = {
+  darkMode: {
+    dark: { ...themes.dark, appBg: '#181818', appContentBg: '#1A1A1A' },
+    darkClass: 'dark',
+    light: { ...themes.light, appBg: '#FEFEFE', appContentBg: '#FEFEFE' },
+    classTarget: 'html',
+    stylePreview: true,
+  },
+};

package.json

@@ -40,6 +40,7 @@
     "@storybook/builder-webpack5": "6.5.16",
     "@storybook/manager-webpack5": "6.5.16",
     "@storybook/react": "6.5.16",
+    "@storybook/theming": "6.5.16",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/react-native": "11.5.2",
@@ -80,6 +81,7 @@
     "rollup-plugin-peer-deps-external": "2.2.4",
     "sass": "1.58.0",
     "sass-loader": "13.2.0",
+    "storybook-dark-mode": "2.0.6",
     "style-loader": "3.3.1",
     "stylus": "0.59.0",
     "stylus-loader": "7.1.0",

packages/theme/lib/Abstract.sass

@@ -8,4 +8,8 @@
   transition: color .2s ease-in-out
 
   &.invalid
-    --text-color: var(--invalid-color)
+    color: var(--invalid-color)
+
+// Dark mode
+.dark .junipero.abstract
+  --text-color: var(--junipero-nevada)

packages/theme/lib/Alert.sass

@@ -18,8 +18,8 @@
     height: 50px
     border-radius: 50%
     background: var(--icon-background-color)
-    color: var(--title-color)
-  
+    color: var(--icons-color)
+
   .content
     flex: 1 1 auto
     margin-top: 4px
@@ -31,15 +31,41 @@
   &.primary
     --icon-background-color: var(--junipero-velvet-disabled)
     --title-color: var(--junipero-velvet)
+    --icons-color: var(--junipero-velvet)
 
   &.success
     --icon-background-color: var(--junipero-lime-disabled)
     --title-color: var(--junipero-lime)
+    --icons-color: var(--junipero-lime)
 
   &.warning
     --icon-background-color: var(--junipero-sunglow-disabled)
     --title-color: var(--junipero-sunglow)
+    --icons-color: var(--junipero-sunglow)
 
   &.danger
     --icon-background-color: var(--junipero-grapefruit-disabled)
     --title-color: var(--junipero-grapefruit)
+    --icons-color: var(--junipero-grapefruit)
+
+// Dark mode
+.dark .junipero.alert
+  --icon-background-color: var(--junipero-dark-velvet-disabled)
+  --icons-color: var(--junipero-seashell)
+  --title-color: var(--junipero-seashell)
+
+  &.primary
+    --icon-background-color: var(--junipero-dark-velvet-foreground)
+    --title-color: var(--junipero-velvet)
+
+  &.success
+    --icon-background-color: var(--junipero-dark-lime-foreground)
+    --title-color: var(--junipero-lime)
+
+  &.warning
+    --icon-background-color: var(--junipero-dark-sunglow-foreground)
+    --title-color: var(--junipero-sunglow)
+
+  &.danger
+    --icon-background-color: var(--junipero-dark-grapefruit-foreground)
+    --title-color: var(--junipero-grapefruit)

packages/theme/lib/Badge.sass

@@ -30,3 +30,20 @@
   &.success
     --background-color: var(--junipero-lime)
     --text-color: var(--junipero-seashell)
+
+// Dark mode
+.dark .junipero.badge
+  --background-color: var(--junipero-dark-velvet-background)
+  --text-color: var(--junipero-seashell)
+
+  &.primary
+    --background-color: var(--junipero-velvet)
+
+  &.danger
+    --background-color: var(--junipero-grapefruit)
+
+  &.warning
+    --background-color: var(--junipero-sunglow)
+
+  &.success
+    --background-color: var(--junipero-lime)

packages/theme/lib/BreadCrumb.sass

@@ -1,21 +1,22 @@
 .junipero.breadcrumb
-  --text-color: var(--junipero-tundora)
   --main-color: var(--junipero-velvet)
-  --secondary-color: var(--junipero-mischka)
+  --separator-color: var(--junipero-mischka)
 
   display: flex
   align-items: center
   gap: 8px
 
+  a.item
+    color: inherit
+
   .item
     display: inline-flex
     gap: 8px
     align-items: center
-    color: var(--text-color)
 
     &::after
       content: '/'
-      color: var(--secondary-color)
+      color: var(--separator-color)
       display: inline
 
     &:last-child
@@ -28,3 +29,7 @@
   a.item
     cursor: pointer
     text-decoration: none
+
+// Dark mode
+.dark .junipero.breadcrumb
+  --separator-color: var(--junipero-nevada)

packages/theme/lib/Button.sass

@@ -51,7 +51,7 @@
     --border-color: var(--junipero-sunglow-hover)
     --hover-color: var(--junipero-sunglow-hover)
     --active-color: var(--junipero-sunglow-active)
-  
+
   &.danger
     --main-color: var(--junipero-grapefruit)
     --text-color: var(--junipero-seashell)
@@ -70,3 +70,41 @@
     .junipero.spinner
       --foreground-color: var(--main-color)
       --background-color: var(--text-color)
+
+// Dark mode
+.dark .junipero.button
+  --main-color: var(--junipero-dark-velvet-background)
+  --hover-color: var(--junipero-dark-velvet-foreground)
+  --active-color: var(--junipero-dark-velvet-disabled)
+  --text-color: var(--junipero-seashell)
+
+  &.subtle
+    --main-color: transparent
+
+  &.primary
+    --main-color: var(--junipero-velvet)
+    --text-color: var(--junipero-seashell)
+    --border-color: var(--junipero-dark-velvet-foreground)
+    --hover-color: var(--junipero-velvet-hover)
+    --active-color: var(--junipero-velvet-active)
+
+  &.warning
+    --main-color: var(--junipero-sunglow)
+    --text-color: var(--junipero-seashell)
+    --border-color: var(--junipero-dark-sunglow-foreground)
+    --hover-color: var(--junipero-sunglow-hover)
+    --active-color: var(--junipero-sunglow-active)
+
+  &.danger
+    --main-color: var(--junipero-grapefruit)
+    --text-color: var(--junipero-seashell)
+    --border-color: var(--junipero-dark-grapefruit-foreground)
+    --hover-color: var(--junipero-grapefruit-hover)
+    --active-color: var(--junipero-grapefruit-active)
+
+  &.success
+    --main-color: var(--junipero-lime)
+    --text-color: var(--junipero-seashell)
+    --border-color: var(--junipero-dark-lime-foreground)
+    --hover-color: var(--junipero-lime-hover)
+    --active-color: var(--junipero-lime-active)

packages/theme/lib/Calendar.sass

@@ -4,8 +4,8 @@
   --text-color: var(--junipero-onyx)
   --inactive-text-color: var(--junipero-mischka)
   --selected-text-color: var(--junipero-seashell)
-  --hover-color: var(--junipero-concrete)
-  --secondary-text-color: var(--junipero-tundora)
+  --hover-color: var(--junipero-velvet-background)
+  --secondary-text-color: var(--junipero-slate)
 
   display: block
   min-width: 250px
@@ -69,3 +69,13 @@
 
     &.active
       background: var(--main-color)
+
+// Dark mode
+.dark .junipero.calendar
+  --main-color: var(--junipero-velvet)
+  --icons-color: var(--junipero-seashell)
+  --text-color: var(--junipero-seashell)
+  --inactive-text-color: var(--junipero-concrete)
+  --selected-text-color: var(--junipero-seashell)
+  --hover-color: var(--junipero-dark-velvet-foreground)
+  --secondary-text-color: var(--junipero-velvet)

packages/theme/lib/Card.sass

@@ -15,3 +15,8 @@
 
     .junipero.list
       width: 100%
+
+// Dark mode
+.dark .junipero.card
+  --background-color: var(--junipero-dark-velvet-background)
+  --shadow-color: transparent

packages/theme/lib/CheckboxField.sass

@@ -58,3 +58,13 @@
   .content
     flex: 1 0 auto
     max-width: 100%
+
+// Dark mode
+.dark .junipero.checkbox-field
+  --icons-color: var(--junipero-seashell)
+  --main-color: var(--junipero-velvet)
+  --border-color: var(--junipero-dark-velvet-foreground)
+  --background-color: var(--junipero-dark-velvet-background)
+  --hover-color: var(--junipero-dark-velvet-disabled)
+  --active-color: var(--junipero-dark-velvet-disabled)
+  --invalid-color: var(--junipero-grapefruit)

packages/theme/lib/CodeField.sass

@@ -2,6 +2,7 @@
   --main-color: var(--junipero-velvet)
   --border-color: var(--junipero-mischka)
   --invalid-color: var(--junipero-grapefruit)
+  --background-color: var(--junipero-seashell)
 
   display: inline-flex
   align-items: stretch
@@ -21,6 +22,7 @@
     box-shadow: 0 0 0 2px var(--border-color)
     transition: box-shadow .2s ease-in-out
     text-align: center
+    background: var(--background-color)
 
     &:focus,
     &:focus-within
@@ -31,3 +33,8 @@
       &:not(:focus),
       &:not(:focus-within)
         --border-color: var(--invalid-color)
+
+// Dark mode
+.dark .junipero.code-field
+  --border-color: var(--junipero-dark-velvet-foreground)
+  --background-color: var(--junipero-onyx)

packages/theme/lib/ColorField.sass

@@ -1,5 +1,7 @@
 .junipero.color-field
   --main-color: var(--junipero-velvet)
+  --pigment-background-color: var(--junipero-mischka)
+  --pigment-border-color: var(--junipero-seashell)
 
   &.moving
     .text-field input
@@ -30,8 +32,8 @@
       width: 12px
       height: 12px
       border-radius: 50%
-      background: var(--junipero-mischka)
-      box-shadow: 0 0 0 2px var(--junipero-seashell), 0 2px 7px 1px rgb(0 0 0 / 15%)
+      background: var(--pigment-background-color)
+      box-shadow: 0 0 0 2px var(--pigment-border-color), 0 2px 7px 1px rgb(0 0 0 / 15%)
       transform: translateY(-50%)
 
 .junipero.color-field .menu-inner,
@@ -111,3 +113,7 @@
           position: relative
           left: -4px
           box-shadow: 0 2px 7px 1px rgb(0 0 0 / 15%)
+
+// Dark mode
+.dark .junipero.color-field
+  --pigment-border-color: var(--junipero-dark-velvet-foreground)

packages/theme/lib/DateField.sass

@@ -6,10 +6,9 @@
   --placeholder-color: var(--junipero-slate)
   --invalid-color: var(--junipero-grapefruit)
   --text-color: var(--junipero-onyx)
-  --inactive-text-color: var(--junipero-mischka)
-  --selected-text-color: var(--junipero-seashell)
-  --hover-color: var(--junipero-concrete)
   --secondary-text-color: var(--junipero-tundora)
+  --time-background-color: var(--junipero-concrete)
+  --time-placeholder-color: var(--junipero-slate)
 
 .junipero.date-field
   display: inline-flex
@@ -93,7 +92,7 @@
     position: relative
 
     .icon
-      --icons-color: var(--placeholder-color)
+      --icons-color: var(--time-placeholder-color)
 
       position: absolute
       top: 50%
@@ -103,13 +102,25 @@
 
     input
       appearance: none
-      background: var(--hover-color)
+      background: var(--time-background-color)
       border: none
       border-radius: 4px
       padding: 5px 10px 5px 40px
       width: 100%
 
       &::placeholder
-        color: var(--placeholder-color)
+        color: var(--time-placeholder-color)
         opacity: 1
         user-select: none
+
+// Dark mode
+.dark
+  .junipero.date-field,
+  .junipero.calendar-menu
+    --main-color: var(--junipero-velvet)
+    --border-color: var(--junipero-dark-velvet-foreground)
+    --icons-color: var(--junipero-dark-velvet-foreground)
+    --placeholder-color: var(--junipero-nevada)
+    --text-color: var(--junipero-seashell)
+    --time-background-color: var(--junipero-dark-velvet-disabled)
+    --time-placeholder-color: var(--junipero-concrete)

packages/theme/lib/Dropdown.sass

@@ -46,3 +46,14 @@
       & > .dropdown-link
         background: var(--item-background)
         color: var(--main-color)
+
+// Dark mode
+.dark
+  .junipero.dropdown .menu-inner,
+  .junipero.dropdown-menu .menu-inner
+    --border-color: var(--junipero-dark-velvet-foreground)
+    --background-color: var(--junipero-dark-velvet-background)
+    --secondary-color: var(--junipero-velvet)
+    --item-background: var(--junipero-dark-velvet-disabled)
+    --main-color: var(--junipero-seashell)
+    --shadow-color: transparent

packages/theme/lib/FieldAddon.sass

@@ -1,5 +1,3 @@
-@use "colors" as colors
-
 .junipero.field-addon
   --main-color: var(--junipero-velvet)
   --background-color: var(--junipero-mischka)
@@ -21,3 +19,9 @@
     background: var(--main-color)
     color: var(--focus-text-color)
     box-shadow: 0 0 0 2px var(--main-color)
+
+// Dark mode
+.dark .junipero.field-addon
+  --background-color: var(--junipero-dark-velvet-foreground)
+  --text-color: var(--junipero-seashell)
+  --focus-text-color: var(--junipero-seashell)

packages/theme/lib/Label.sass

@@ -10,3 +10,6 @@
   &.invalid
     --text-color: var(--invalid-color)
 
+// Dark mode
+.dark .junipero.label
+  --text-color: var(--junipero-nevada)