update monday-ui-style

package.json

@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.3.28",
+  "version": "0.3.29",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {
@@ -47,7 +47,7 @@
     "autosize": "4.0.2",
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",
-    "monday-ui-style": "0.1.6",
+    "monday-ui-style": "0.1.7",
     "prop-types": "^15.7.2",
     "react-inlinesvg": "^2.1.1",
     "react-popper": "^2.2.3",

src/general-stories/colors/ColorItem.scss

@@ -4,7 +4,6 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 0 var(--spacing-small);
   .color-element {
     height: 100%;
   }
@@ -35,16 +34,19 @@
   }
 }
 
-
-
-
 .colors-container {
   max-width: 900px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   flex-direction: column;
 }
+.colors-container-content {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+}
 .themes-icon-container {
   position: sticky;
   top: 0;
@@ -71,7 +73,7 @@
   padding: 0 16px;
 }
 .theme-icon {
-  margin-right: 4px
+  margin-right: 4px;
 }
 
 .all-colors-container {
@@ -89,7 +91,6 @@
     border-bottom: 1px solid var(--ui-border-color);
     margin-bottom: 16px;
     .all-color-element {
-
       width: 100%;
       height: 100%;
     }
@@ -99,5 +100,4 @@
       margin: 8px 0;
     }
   }
-
 }

src/general-stories/colors/colors.stories.js

@@ -205,7 +205,7 @@ export const Colors = () => {
             <Moon className="theme-icon" /> Dark
           </span>
           <span className="theme-container black-app-theme" style={{ width: "175" }}>
-            <Bolt className="theme-icon" /> Dark
+            <Bolt className="theme-icon" /> Dim
           </span>
         </div>
         {colorsMap.map(({ color, description }) => (
@@ -222,17 +222,17 @@ export const Colors = () => {
         gives understanding and indication of orientation and belonging. The board’s main strength is its simple and
         visual appearance. That’s why the status colors should appear on the board and nowhere else in the UI.
       </DescriptionLabel>
-      <div className="colors-container">
+      <div className="colors-container-content">
         <div className="themes-icon-container">
           <div className="theme-name-spacer">Color Keys</div>
-          <span className="theme-container light-app-theme" style={{ width: "175px" }}>
+          <span className="theme-container light-app-theme" style={{ width: "190px" }}>
             <Sun className="theme-icon" /> Light
           </span>
-          <span className="theme-container dark-app-theme" style={{ width: "175px" }}>
+          <span className="theme-container dark-app-theme" style={{ width: "166px" }}>
             <Moon className="theme-icon" /> Dark
           </span>
           <span className="theme-container black-app-theme" style={{ width: "175px" }}>
-            <Bolt className="theme-icon" /> Dark
+            <Bolt className="theme-icon" /> Dim
           </span>
         </div>
       </div>