Fixed storybook and added colours for dark mode

trimble-oss · Jan 18, 2024 · a600757 · a600757
1 parent d4ec3fe
commit a600757
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 18 deletions.
diff --git a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
@@ -1,4 +1,4 @@
-@import '../modus-toolbar.vars.scss';
+@import '../modus-toolbar.vars';
 
 div {
   background-color: $modus-toolbar-divider-bg;
@@ -21,6 +21,7 @@ div {
 button {
   align-items: center;
   background-color: $modus-toolbar-bg;
+  border: 0;
   cursor: default;
   display: inline-flex;
   font-family: $primary-font;
@@ -29,7 +30,6 @@ button {
   justify-content: center;
   min-width: $rem-24px;
   padding: 0 $rem-4px 0 $rem-4px;
-  border: 0;
   position: relative;
   user-select: none;
   vertical-align: middle;
@@ -77,12 +77,12 @@ button {
   }
 
   div {
-    position: relative;
-    display: flex;
     align-items: center;
-    justify-content: center;
     background-color: $modus-toolbar-bg;
     border-radius: $rem-2px;
+    display: flex;
+    justify-content: center;
+    position: relative;
 
     &.style-margin {
       height: $rem-24px;

diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
@@ -1,4 +1,4 @@
-@import './modus-toolbar.vars.scss';
+@import './modus-toolbar.vars';
 
 div {
   align-items: center;
@@ -20,15 +20,15 @@ div {
     box-shadow: $box-shadow-lg;
 
     &.layout-horizontal {
-      padding: $rem-4px 0 $rem-4px 0;
       border-left: $rem-4px solid $modus-toolbar-bg;
       border-right: $rem-8px solid $modus-toolbar-bg;
+      padding: $rem-4px 0 $rem-4px 0;
     }
 
     &.layout-vertical {
-      padding: 0 $rem-4px 0 $rem-4px;
-      border-top: $rem-4px solid $modus-toolbar-bg;
       border-bottom: $rem-8px solid $modus-toolbar-bg;
+      border-top: $rem-4px solid $modus-toolbar-bg;
+      padding: 0 $rem-4px 0 $rem-4px;
     }
   }
 

diff --git a/stencil-workspace/src/global/themes.scss b/stencil-workspace/src/global/themes.scss
@@ -771,6 +771,10 @@
   --modus-toolbar-button-hover-bg: var(--modus-gray-0);
   --modus-toolbar-button-active-bg: var(--modus-gray-1);
   --modus-toolbar-divider-bg: var(--modus-gray-0);
+  --modus-toolbar-dark-bg: var(--modus-gray-10);
+  --modus-toolbar-button-dark-hover-bg: var(--modus-gray-4);
+  --modus-toolbar-button-dark-active-bg: var(--modus-gray-6);
+  --modus-toolbar-divider-dark-bg: var(--modus-gray-8);
 }
 
 // Mixins

diff --git a/...ace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx b/...ace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx
@@ -16,7 +16,7 @@ A new TypeScript typing has been provided named Button defined as:
   textButton?: string; // optional.
   disabled?: boolean; // optional.
   active?: boolean; // optional.
-  divader?: boolean; // optional.
+  divider?: boolean; // optional.
 }
 ```
 
@@ -86,15 +86,15 @@ A new TypeScript typing has been provided named Button defined as:
       tooltip: 
       {
         text: 'Add',
-        position: 'bottom',
+        position: 'right',
       },
       iconSrc: 'add', 
     },
     {  
       tooltip: 
       {
         text: 'Edit',
-        position: 'bottom',
+        position: 'right',
       },
       iconSrc: 'edit', 
       disabled: true,
@@ -103,7 +103,7 @@ A new TypeScript typing has been provided named Button defined as:
       tooltip: 
       {
         text: 'Refresh',
-        position: 'bottom',
+        position: 'right',
       },
       iconSrc: 'refresh', 
       active: true, 

diff --git a/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx
@@ -49,7 +49,7 @@ export default {
   },
 };
 
-const Template = ({buttons, layout, toolbarStyle}) => html`<modus-toolbar buttons=${buttons} layout=${layout} toolbarStyle=${toolbarStyle}></modus-toolbar>`;
+const Template = ({buttons, layout, toolbarStyle}) => html`<modus-toolbar .buttons=${buttons} .layout=${layout} .toolbarStyle=${toolbarStyle}></modus-toolbar>`;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -84,23 +84,23 @@ Default.args = {
 };
 
 export const VerticalSplitToolbar = Template.bind({});
-Default.args = {
+VerticalSplitToolbar.args = {
     buttons: [
       { tooltip: {
           text: 'Add',
-          position: 'bottom',
+          position: 'right',
           },
       iconSrc: 'add',
       },
       {  tooltip: {
           text: 'Edit',
-          position: 'bottom',
+          position: 'right',
           },
       iconSrc: 'edit', disabled: true,
       },
       {  tooltip: {
           text: 'Refresh',
-          position: 'bottom',
+          position: 'right',
           },
       iconSrc: 'refresh', active: true,
       }