feat(packages/sui-studio): add light-dark mode

SUI-Components · Jan 9, 2025 · c584d99 · c584d99
1 parent 2e25ba3
commit c584d99
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 36 deletions.
diff --git a/packages/sui-studio/src/components/icons/index.js b/packages/sui-studio/src/components/icons/index.js
@@ -18,10 +18,10 @@ export const iconCode = (
 )
 
 export const iconMenu = (
-  <svg viewBox="0 0 24 24">
-    <rect x="3" y="6" width="18" height="2" fill="#444444" />
-    <rect x="3" y="11" width="18" height="2" fill="#444444" />
-    <rect x="3" y="16" width="18" height="2" fill="#444444" />
+  <svg viewBox="0 0 24 24" fill="currentColor">
+    <rect x="3" y="6" width="18" height="2" />
+    <rect x="3" y="11" width="18" height="2" />
+    <rect x="3" y="16" width="18" height="2" />
   </svg>
 )
 

diff --git a/packages/sui-studio/src/components/layout/_style.scss b/packages/sui-studio/src/components/layout/_style.scss
@@ -11,7 +11,8 @@
   &-sidebar {
     padding: 16px;
     top: $h-navHeader;
-    background-color: $c-white;
+    background-color: $c-surface;
+    color: $c-on-surface;
     border-right: 1px solid $c-gray-lightest;
     box-sizing: border-box;
     position: fixed;
@@ -25,16 +26,19 @@
     height: calc(100vh - $h-navHeader);
 
     &-searchInput {
-      border: 1px solid $c-gray-light;
+      box-sizing: border-box;
+      background-color: $c-surface;
+      border: 1px solid color-mix(in srgb, $c-on-surface 30%, transparent);
       border-radius: 4px;
-      color: #666;
+      color: color-mix(in srgb, $c-on-surface 30%, transparent);
       font-size: 12px;
       outline: none;
       padding: 8px;
-      width: 100%;
+      width: calc(100% #{-2 * 8px});
       height: $h-search-input;
       &:focus {
-        background-color: $c-white;
+        background-color: $c-surface;
+        color: color-mix(in srgb, $c-on-surface 70%, transparent);
         border: 1px solid $c-primary;
       }
     }
@@ -52,6 +56,7 @@
 
   &-main {
     background-color: $bgc-main;
+    color: $c-on-surface;
     position: relative;
     top: $h-navHeader;
     width: 100%;
@@ -98,7 +103,8 @@
 }
 
 .sui-StudioNavBar-secondary {
-  background: $c-white;
+  background: $c-surface;
+  color: $c-on-surface;
   display: flex;
   flex-direction: row;
   padding: 0;
@@ -139,17 +145,18 @@
   height: $h-navHeader;
   position: fixed;
   top: 0;
-  background: $c-white;
+  background: $c-surface;
+  color: $c-on-surface;
   align-items: center;
-  border-bottom: solid 1px $c-gray-lightest;
+  border-bottom: solid 1px color-mix(in srgb, $c-on-surface 15%, transparent);
   z-index: 40;
   gap: 8px;
   a {
     display: flex;
     align-items: center;
     gap: 8px;
     text-decoration: none;
-    color: #000;
+    color: $c-on-surface;
   }
   h1 {
     font-size: 16px;
@@ -162,6 +169,7 @@
   width: 32px;
   height: 32px;
   background: transparent;
+  color: inherit;
   border: 0;
   padding: 0;
   svg {

diff --git a/packages/sui-studio/src/components/navigation/_style.scss b/packages/sui-studio/src/components/navigation/_style.scss
@@ -27,22 +27,22 @@
     margin: 0;
 
     &Link {
-      border-left: 1px solid #e4e4e4;
-      color: $c-gray-dark;
+      border-left: 1px solid color-mix(in srgb, var(--studio-c-on-surface, #000) 40%, transparent);
+      color: color-mix(in srgb, var(--studio-c-on-surface, #000) 70%, transparent);
       display: block;
       padding: 8px 24px;
       font-size: 14px;
       text-decoration: none;
       transition: all 0.3s ease;
       &:hover {
-        background-color: rgba($c-primary, 0.05);
+        background-color: color-mix(in srgb, $c-primary 5%, transparent);
         border-left-color: $c-primary;
         color: $c-primary;
       }
       &--active {
-        background-color: rgba($c-primary, 0.1);
-        border-left-color: darken($c-primary, 10%);
-        color: darken($c-primary, 10%);
+        background-color: color-mix(in srgb, $c-primary 10%, transparent);
+        border-left-color: color-mix(in srgb, $c-primary, $c-on-surface 10%);
+        color: color-mix(in srgb, $c-primary, $c-on-surface 10%);
         pointer-events: none;
       }
 
@@ -52,9 +52,9 @@
     }
 
     &Title {
-      border-left: 1px solid #e4e4e4;
+      border-left: 1px solid color-mix(in srgb, var(--studio-c-on-surface, #000) 40%, transparent);
       padding-left: 8px;
-      color: $c-black;
+      color: $c-on-surface;
       padding-bottom: 10px;
       padding-top: 20px;
       text-transform: uppercase;

diff --git a/packages/sui-studio/src/components/workbench/_style.scss b/packages/sui-studio/src/components/workbench/_style.scss
@@ -1,7 +1,8 @@
 .sui-StudioWorkbench {
   &-navigation {
-    background: $c-white;
+    background: $c-surface;
+    color: $c-on-surface;
     padding: 0;
-    border-bottom: solid 1px $c-gray-lightest;
+    border-bottom: solid 1px color-mix(in srgb, $c-on-surface 15%, transparent);
   }
 }
diff --git a/packages/sui-studio/src/index.scss b/packages/sui-studio/src/index.scss
@@ -1,5 +1,6 @@
 @import '~normalize.css/normalize.css';
 
+@import './styles/custom-properties';
 @import './styles/settings';
 @import './styles/default';
 @import './styles/components/tabs';

diff --git a/packages/sui-studio/src/styles/_default.scss b/packages/sui-studio/src/styles/_default.scss
@@ -1,4 +1,6 @@
 body {
   font-family: $ff-sans-serif;
   font-size: $fz-body;
+  background-color: $c-surface;
+  color: $c-on-surface;
 }
diff --git a/packages/sui-studio/src/styles/_settings.scss b/packages/sui-studio/src/styles/_settings.scss
@@ -1,10 +1,13 @@
 @use 'sass:math';
 
 // --- Colors --- //
-$c-primary: #09f !default;
-$c-accent: #ff3860 !default;
-$c-white: #ffffff !default;
+$c-primary: var(--studio-c-primitive, #09f) !default;
+$c-accent: var(--studio-c-accent, #ff3860) !default;
+
+$c-surface: var(--studio-c-surface, #fff) !default;
+$c-on-surface: var(--studio-c-on-surface, #000) !default;
 
+$c-white: #ffffff !default;
 $c-black: #000000 !default;
 
 $c-gray: #777777 !default;
@@ -74,7 +77,7 @@ $breakpoints: (
   xl: 1200px
 ) !default;
 
-$bgc-main: $c-white;
+$bgc-main: $c-surface;
 $fgc-navbar: #999;
 $fgc-navbar--active: $c-white;
 

diff --git a/packages/sui-studio/src/styles/components/_tabs.scss b/packages/sui-studio/src/styles/components/_tabs.scss
@@ -12,7 +12,7 @@
   }
 
   &-tab {
-    display: inline-block;
+    display: inline-flex;
     list-style: none;
     margin: 0;
     padding: 0;
@@ -22,18 +22,22 @@
   &-button {
     background: transparent;
     border: 0;
-    border-bottom: 1px solid $c-gray-lightest;
-    color: $c-gray-dark;
+    border-bottom: 1px solid color-mix(in srgb, var(--studio-c-on-surface, #000) 40%, transparent);
+    color: color-mix(in srgb, var(--studio-c-on-surface, #000) 70%, transparent);
     cursor: pointer;
     display: inline-block;
     outline: 0;
 
     &:hover {
+      background-color: color-mix(in srgb, $c-primary 5%, transparent);
       border-bottom-color: $c-primary;
+      color: $c-primary;
     }
 
     &--active {
-      border-bottom-color: darken($c-primary, 10%);
+      border-bottom-color: color-mix(in srgb, $c-primary, $c-on-surface 10%);
+      background-color: rgba($c-primary, 0.1);
+      color: color-mix(in srgb, $c-primary, $c-on-surface 10%);
       pointer-events: none;
     }
 
@@ -45,8 +49,8 @@
   }
 
   &-link {
-    border-bottom: 1px solid $c-gray-light;
-    color: $c-gray-dark;
+    border-bottom: 1px solid color-mix(in srgb, var(--studio-c-on-surface, #000) 40%, transparent);
+    color: color-mix(in srgb, var(--studio-c-on-surface, #000) 70%, transparent);
     cursor: pointer;
     display: inline-block;
     outline: none;
@@ -57,15 +61,15 @@
     white-space: nowrap;
 
     &:hover {
-      background-color: rgba($c-primary, 0.05);
+      background-color: color-mix(in srgb, $c-primary 5%, transparent);
       border-bottom-color: $c-primary;
       color: $c-primary;
     }
 
     &--active {
       background-color: rgba($c-primary, 0.1);
-      border-bottom-color: darken($c-primary, 10%);
-      color: darken($c-primary, 10%);
+      border-bottom-color: color-mix(in srgb, $c-primary, $c-on-surface 10%);
+      color: color-mix(in srgb, $c-primary, $c-on-surface 10%);
       pointer-events: none;
     }
   }

diff --git a/packages/sui-studio/src/styles/custom-properties.scss b/packages/sui-studio/src/styles/custom-properties.scss
@@ -0,0 +1,19 @@
+:root {
+  @media (prefers-color-scheme: light) {
+    --studio-c-surface: #ffffff;
+    --studio-c-on-surface: #000000;
+
+    --studio-c-primary: #005c99;
+
+    --studio-c-accent: #b30024;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    --studio-c-surface: #000;
+    --studio-c-on-surface: #fff;
+
+    --studio-c-primary: #09f;
+
+    --studio-c-accent: #ff5c7c;
+  }
+}