datocms-react-ui 2.1.5 → 2.2.0-alpha.2

package/src/SelectInput/index.tsx

@@ -18,15 +18,15 @@ const themeConfig: ThemeConfig = (existing) => ({
   borderRadius: 0,
   colors: {
     ...existing.colors,
-    primary25: 'var(--semi-transparent-accent-color)',
+    primary25: 'var(--color--surface-hover)',
     // disabled
-    neutral10: 'var(--border-color)',
+    neutral10: 'var(--color--border)',
     // normal
-    neutral20: 'var(--border-color)',
+    neutral20: 'var(--color--border)',
     // focused
-    primary: 'var(--accent-color)',
+    primary: 'var(--color--focus--border)',
     // hover
-    neutral30: 'var(--darker-border-color)',
+    neutral30: 'var(--color--border-hover)',
   },
 });
 
@@ -35,7 +35,7 @@ const useStyles = (isDisabled?: boolean, error?: boolean) => {
     return {
       placeholder: (provided) => ({
         ...provided,
-        color: 'var(--placeholder-body-color)',
+        color: 'var(--color--ink-placeholder)',
       }),
       container: (provided) => {
         return {
@@ -55,57 +55,84 @@ const useStyles = (isDisabled?: boolean, error?: boolean) => {
         if (isFocused) {
           return {
             ...result,
-            borderColor: error ? 'var(--alert-color)' : 'var(--accent-color)',
-            backgroundColor: isDisabled ? 'var(--disabled-color)' : 'white',
-            boxShadow: `0 0 0 3px ${
+            borderColor: error
+              ? 'var(--color--danger-soft--border)'
+              : 'var(--color--focus--border)',
+            backgroundColor: isDisabled
+              ? 'var(--color--disabled--surface)'
+              : 'var(--color--surface)',
+            boxShadow: `0 0 0 4px ${
               error
-                ? 'rgba(var(--alert-color-rgb-components), 0.2)'
-                : 'var(--semi-transparent-accent-color)'
+                ? 'var(--color--danger-soft--outline)'
+                : 'var(--color--focus--outline)'
             }`,
             '&:hover': {
-              borderColor: error ? 'var(--alert-color)' : 'var(--accent-color)',
+              borderColor: error
+                ? 'var(--color--danger-soft--border)'
+                : 'var(--color--focus--border)',
             },
           };
         }
 
         return {
           ...result,
-          borderColor: error ? 'var(--alert-color)' : 'var(--border-color)',
-          backgroundColor: isDisabled ? 'var(--disabled-color)' : 'white',
+          borderColor: error
+            ? 'var(--color--danger-soft--border)'
+            : 'var(--color--border)',
+          backgroundColor: isDisabled
+            ? 'var(--color--disabled--surface)'
+            : 'var(--color--surface)',
           '&:hover': {
             borderColor: error
-              ? 'var(--alert-color)'
-              : 'var(--darker-border-color)',
+              ? 'var(--color--danger-soft--border)'
+              : 'var(--color--border-hover)',
           },
         };
       },
       multiValueRemove: (provided) => ({
         ...provided,
         cursor: 'pointer',
+        color: 'var(--color--primary-soft--ink)',
+        ':hover': {
+          backgroundColor: 'var(--color--primary-soft--surface-hover)',
+          color: 'var(--color--primary-soft--ink)',
+        },
       }),
       menu: (provided) => {
         return {
           ...provided,
           zIndex: 1000,
           minWidth: 250,
+          backgroundColor: 'var(--color--surface-raised)',
+          boxShadow: 'var(--shadow--floating)',
         };
       },
-      input: (provided) => {
-        const result = {
-          ...provided,
+      singleValue: (provided) => ({
+        ...provided,
+        color: 'var(--color--ink)',
+      }),
+      input: (provided) => ({
+        ...provided,
+        color: 'var(--color--ink)',
+        boxShadow: 'none',
+        'input:focus': {
           boxShadow: 'none',
-          'input:focus': {
-            boxShadow: 'none',
-          },
-        };
-
-        return result;
-      },
+        },
+      }),
+      option: (provided, { isFocused, isSelected }) => ({
+        ...provided,
+        backgroundColor: isSelected
+          ? 'var(--color--selected--surface)'
+          : isFocused
+            ? 'var(--color--surface-hover)'
+            : undefined,
+        color: 'var(--color--ink)',
+      }),
       multiValue: (provided) => {
         return {
           ...provided,
           zIndex: 100,
-          backgroundColor: 'var(--light-color)',
+          backgroundColor: 'var(--color--primary-soft--surface)',
           userSelect: 'none',
         };
       },
@@ -113,6 +140,7 @@ const useStyles = (isDisabled?: boolean, error?: boolean) => {
         ...provided,
         fontSize: 'inherit',
         padding: 3,
+        color: 'var(--color--primary-soft--ink)',
       }),
     };
   }, [isDisabled, error]);

package/src/SidebarPanel/index.tsx

@@ -1,33 +1,8 @@
 import classNames from 'classnames';
 import React, { type ReactNode, useState } from 'react';
+import { CaretDownIcon, CaretUpIcon } from '../icons';
 import s from './styles.module.css.json';
 
-function ChevronDownIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 448 512"
-      width="1em"
-      height="1em"
-    >
-      <path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" />
-    </svg>
-  );
-}
-
-function ChevronUpIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 448 512"
-      width="1em"
-      height="1em"
-    >
-      <path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" />
-    </svg>
-  );
-}
-
 export type SidebarPanelProps = {
   title?: ReactNode;
   startOpen?: boolean;
@@ -44,7 +19,7 @@ export type SidebarPanelProps = {
  *     <div
  *       style={{
  *         width: '300px',
- *         borderRight: '1px solid var(--border-color)',
+ *         borderRight: '1px solid var(--color--border)',
  *       }}
  *     >
  *       <SidebarPanel title="Default">Content</SidebarPanel>
@@ -61,7 +36,7 @@ export type SidebarPanelProps = {
  *         display: 'flex',
  *         justifyContent: 'center',
  *         alignItems: 'center',
- *         background: 'var(--light-bg-color)',
+ *         background: 'var(--color--surface-muted)',
  *       }}
  *     >
  *       Main content
@@ -92,7 +67,7 @@ export function SidebarPanel({
         >
           <div className={s.SidebarPanel__header__title}>{title}</div>
           <div className={s.SidebarPanel__header__chevron}>
-            {open ? <ChevronDownIcon /> : <ChevronUpIcon />}
+            {open ? <CaretDownIcon /> : <CaretUpIcon />}
           </div>
         </button>
       )}

package/src/SidebarPanel/styles.module.css

@@ -1,13 +1,13 @@
 .SidebarPanel {
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--color--border);
 }
 
 .SidebarPanel__header {
   font-family: inherit;
   cursor: pointer;
   line-height: inherit;
-  background-color: white;
-  color: var(--base-body-color);
+  background-color: var(--color--surface);
+  color: var(--color--ink);
   -webkit-appearance: none;
   -moz-appearance: none;
   font-size: inherit;
@@ -18,13 +18,13 @@
   width: 100%;
   display: flex;
   align-items: center;
-  background-color: var(--light-bg-color);
+  background-color: var(--color--surface-muted);
   user-select: none;
 }
 
 .SidebarPanel__header:hover,
 .SidebarPanel__header:focus {
-  background-color: var(--lighter-bg-color);
+  background-color: var(--color--surface-hover);
 }
 
 .SidebarPanel__header__title {
@@ -41,7 +41,6 @@
 
 .SidebarPanel__content {
   padding: 20px;
-  background-color: white;
 }
 
 .SidebarPanel__content--no-padding {

package/src/SidebarPanel/styles.module.css.json

@@ -1 +1 @@
-{"SidebarPanel":"_SidebarPanel_4uwco_1","SidebarPanel__header":"_SidebarPanel__header_4uwco_5","SidebarPanel__header__title":"_SidebarPanel__header__title_4uwco_30","SidebarPanel__header__chevron":"_SidebarPanel__header__chevron_4uwco_36","SidebarPanel__content":"_SidebarPanel__content_4uwco_42","SidebarPanel__content--no-padding":"_SidebarPanel__content--no-padding_4uwco_47"}
+{"SidebarPanel":"_SidebarPanel_a4c7y_1","SidebarPanel__header":"_SidebarPanel__header_a4c7y_5","SidebarPanel__header__title":"_SidebarPanel__header__title_a4c7y_30","SidebarPanel__header__chevron":"_SidebarPanel__header__chevron_a4c7y_36","SidebarPanel__content":"_SidebarPanel__content_a4c7y_42","SidebarPanel__content--no-padding":"_SidebarPanel__content--no-padding_a4c7y_46"}

package/src/Spinner/styles.module.css

@@ -12,7 +12,7 @@
 
 .Spinner__bar {
   animation: Spinner__spin 1.2s linear infinite;
-  background-color: var(--light-body-color);
+  background-color: var(--color--ink-subtle);
   position: absolute;
   width: 40%;
   height: 14%;

package/src/Spinner/styles.module.css.json

@@ -1 +1 @@
-{"Spinner--inline":"_Spinner--inline_oumod_1","Spinner--centered":"_Spinner--centered_oumod_7","Spinner__bar":"_Spinner__bar_oumod_13","Spinner__spin":"_Spinner__spin_oumod_1"}
+{"Spinner--inline":"_Spinner--inline_1u42l_1","Spinner--centered":"_Spinner--centered_1u42l_7","Spinner__bar":"_Spinner__bar_1u42l_13","Spinner__spin":"_Spinner__spin_1u42l_1"}

package/src/SplitView/SplitViewSash/styles.module.css

@@ -3,7 +3,7 @@
   position: absolute;
   top: 0;
   transition: background-color 0.2s 0.15s;
-  background-color: rgba(var(--light-color-components), 0);
+  background-color: transparent;
   width: 100%;
   z-index: 2;
   display: flex;
@@ -13,7 +13,7 @@
 
 .SplitViewSash:hover,
 .SplitViewSash--dragging {
-  background-color: var(--light-color);
+  background-color: var(--color--primary-soft--surface);
 }
 
 .SplitViewSash:hover:has(.SplitViewSash__content:hover),
@@ -47,14 +47,14 @@
   width: 20px;
   height: 20px;
   border-radius: 6px;
-  border: 1px solid var(--border-color);
-  background: white;
+  border: 1px solid var(--color--border);
+  background: var(--color--surface);
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
-  color: var(--light-body-color);
+  color: var(--color--ink-subtle);
 }
 
 .SplitViewSash__content__button svg {
@@ -63,6 +63,6 @@
 }
 
 .SplitViewSash__content:hover .SplitViewSash__content__button {
-  background: var(--light-bg-color);
-  color: var(--base-body-color);
+  background: var(--color--surface-hover);
+  color: var(--color--ink);
 }

package/src/SplitView/SplitViewSash/styles.module.css.json

@@ -1 +1 @@
-{"SplitViewSash":"_SplitViewSash_tds51_1","SplitViewSash--dragging":"_SplitViewSash--dragging_tds51_15","SplitViewSash__content":"_SplitViewSash__content_tds51_19","SplitViewSash--no-resize":"_SplitViewSash--no-resize_tds51_24","SplitViewSash--vertical":"_SplitViewSash--vertical_tds51_28","SplitViewSash--horizontal":"_SplitViewSash--horizontal_tds51_32","SplitViewSash__content__button":"_SplitViewSash__content__button_tds51_46"}
+{"SplitViewSash":"_SplitViewSash_9ds0h_1","SplitViewSash--dragging":"_SplitViewSash--dragging_9ds0h_15","SplitViewSash__content":"_SplitViewSash__content_9ds0h_19","SplitViewSash--no-resize":"_SplitViewSash--no-resize_9ds0h_24","SplitViewSash--vertical":"_SplitViewSash--vertical_9ds0h_28","SplitViewSash--horizontal":"_SplitViewSash--horizontal_9ds0h_32","SplitViewSash__content__button":"_SplitViewSash__content__button_9ds0h_46"}

package/src/SwitchField/styles.module.css

@@ -16,7 +16,7 @@
   -ms-user-select: text;
   user-select: text;
   margin-bottom: 0;
-  color: var(--base-body-color);
+  color: var(--color--ink);
 }
 
 .switchField__below {

package/src/SwitchField/styles.module.css.json

@@ -1 +1 @@
-{"switchField__flex":"_switchField__flex_16z4j_1","switchField__switchInput":"_switchField__switchInput_16z4j_6","switchField__label":"_switchField__label_16z4j_10","switchField__below":"_switchField__below_16z4j_22"}
+{"switchField__flex":"_switchField__flex_ietsf_1","switchField__switchInput":"_switchField__switchInput_ietsf_6","switchField__label":"_switchField__label_ietsf_10","switchField__below":"_switchField__below_ietsf_22"}

package/src/SwitchInput/styles.module.css

@@ -1,8 +1,9 @@
 .switchInput__inner {
-  color: #fff;
+  color: var(--color--primary--ink);
   font-size: 12px;
   position: absolute;
   left: 24px;
+  transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
 }
 
 .switchInput {
@@ -14,8 +15,8 @@
   line-height: 20px;
   vertical-align: middle;
   border-radius: 20px 20px;
-  border: 1px solid #ccc;
-  background-color: #ccc;
+  border: 1px solid var(--color--border);
+  background-color: var(--color--ink-muted);
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
 
@@ -26,18 +27,20 @@
     left: 2px;
     top: 1px;
     border-radius: 50% 50%;
-    background-color: #ffffff;
+    background-color: var(--color--surface);
     content: ' ';
     cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
+    box-shadow: var(--shadow--raised);
     transform: scale(1);
-    transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+    transition:
+      left 0.3s cubic-bezier(0.35, 0, 0.25, 1),
+      transform 0.3s cubic-bezier(0.35, 0, 0.25, 1);
     animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
     animation-duration: 0.3s;
     animation-name: switchInput__off;
   }
 
-  &:hover,
+  &:hover:after,
   &:focus:after {
     transform: scale(1.1);
     animation-name: switchInput__on;
@@ -45,8 +48,7 @@
 }
 
 .switchInput__checked {
-  border: 1px solid var(--accent-color);
-  background-color: var(--accent-color);
+  background-color: var(--color--primary--surface);
 
   .switchInput__inner {
     left: 6px;
@@ -59,16 +61,16 @@
 
 .switchInput__disabled {
   cursor: no-drop;
-  background: #ccc;
-  border-color: #ccc;
+  background: var(--color--disabled--surface);
+  border-color: var(--color--border);
 
   &:after {
-    background: #9e9e9e;
+    background: var(--color--disabled--ink);
     animation-name: none;
     cursor: no-drop;
   }
 
-  &:hover,
+  &:hover:after,
   &:focus:after {
     transform: scale(1);
     animation-name: none;

package/src/SwitchInput/styles.module.css.json

@@ -1 +1 @@
-{"switchInput__inner":"_switchInput__inner_1knbg_1","switchInput":"_switchInput_1knbg_1","switchInput__off":"_switchInput__off_1knbg_1","switchInput__on":"_switchInput__on_1knbg_1","switchInput__checked":"_switchInput__checked_1knbg_47","switchInput__disabled":"_switchInput__disabled_1knbg_60","none":"_none_1knbg_1"}
+{"switchInput__inner":"_switchInput__inner_11cgl_1","switchInput":"_switchInput_11cgl_1","switchInput__off":"_switchInput__off_11cgl_1","switchInput__on":"_switchInput__on_11cgl_1","switchInput__checked":"_switchInput__checked_11cgl_50","switchInput__disabled":"_switchInput__disabled_11cgl_62","none":"_none_11cgl_1"}

package/src/TextInput/styles.module.css

@@ -3,27 +3,29 @@
   box-sizing: border-box;
   width: 100%;
   padding: 10px;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--color--border);
   appearance: none;
   border-radius: 0;
+  background-color: var(--color--surface);
   background-image: none;
   transition: border 0.2s var(--material-ease);
   font-size: var(--font-size-m);
   resize: none;
   font-family: inherit;
+  color: inherit;
 
   &::placeholder {
-    color: var(--placeholder-body-color);
+    color: var(--color--ink-placeholder);
   }
 
   &:hover {
-    border-color: var(--darker-border-color);
+    border-color: var(--color--border-hover);
   }
 
   &:focus {
     outline: 0;
-    border-color: var(--accent-color);
-    box-shadow: 0 0 0 3px var(--semi-transparent-accent-color);
+    border-color: var(--color--focus--border);
+    box-shadow: 0 0 0 4px var(--color--focus--outline);
   }
 }
 
@@ -33,20 +35,20 @@
 }
 
 .TextInput--disabled {
-  color: var(--light-body-color);
-  border-color: var(--border-color);
-  background: var(--lighter-bg-color);
+  color: var(--color--disabled--ink);
+  border-color: var(--color--border);
+  background: var(--color--disabled--surface);
 }
 
 .TextInput--error {
-  border-color: var(--alert-color);
+  border-color: var(--color--danger-soft--border);
 
   &:hover,
   &:focus {
-    border-color: var(--alert-color);
+    border-color: var(--color--danger-soft--border);
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px rgba(var(--alert-color-rgb-components), 0.2);
+    box-shadow: 0 0 0 4px var(--color--danger-soft--outline);
   }
 }

package/src/TextInput/styles.module.css.json

@@ -1 +1 @@
-{"TextInput":"_TextInput_x2oj2_1","TextInput--monospaced":"_TextInput--monospaced_x2oj2_30","TextInput--disabled":"_TextInput--disabled_x2oj2_35","TextInput--error":"_TextInput--error_x2oj2_41"}
+{"TextInput":"_TextInput_1kqkh_1","TextInput--monospaced":"_TextInput--monospaced_1kqkh_32","TextInput--disabled":"_TextInput--disabled_1kqkh_37","TextInput--error":"_TextInput--error_1kqkh_43"}

package/src/TextareaInput/styles.module.css

@@ -3,27 +3,29 @@
   box-sizing: border-box;
   width: 100%;
   padding: 10px;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--color--border);
   appearance: none;
   border-radius: 0;
+  background-color: var(--color--surface);
   background-image: none;
   transition: border 0.2s var(--material-ease);
   font-size: var(--font-size-m);
   resize: none;
   font-family: inherit;
+  color: inherit;
 
   &::placeholder {
-    color: var(--placeholder-body-color);
+    color: var(--color--ink-placeholder);
   }
 
   &:hover {
-    border-color: var(--darker-border-color);
+    border-color: var(--color--border-hover);
   }
 
   &:focus {
     outline: 0;
-    border-color: var(--accent-color);
-    box-shadow: 0 0 0 3px var(--semi-transparent-accent-color);
+    border-color: var(--color--focus--border);
+    box-shadow: 0 0 0 4px var(--color--focus--outline);
   }
 }
 
@@ -33,20 +35,20 @@
 }
 
 .TextareaInput--disabled {
-  color: var(--light-body-color);
-  border-color: var(--border-color);
-  background: var(--lighter-bg-color);
+  color: var(--color--disabled--ink);
+  border-color: var(--color--border);
+  background: var(--color--disabled--surface);
 }
 
 .TextareaInput--error {
-  border-color: var(--alert-color);
+  border-color: var(--color--danger-soft--border);
 
   &:hover,
   &:focus {
-    border-color: var(--alert-color);
+    border-color: var(--color--danger-soft--border);
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px rgba(var(--alert-color-rgb-components), 0.2);
+    box-shadow: 0 0 0 4px var(--color--danger-soft--outline);
   }
 }

package/src/TextareaInput/styles.module.css.json

@@ -1 +1 @@
-{"TextareaInput":"_TextareaInput_1wnu9_1","TextareaInput--monospaced":"_TextareaInput--monospaced_1wnu9_30","TextareaInput--disabled":"_TextareaInput--disabled_1wnu9_35","TextareaInput--error":"_TextareaInput--error_1wnu9_41"}
+{"TextareaInput":"_TextareaInput_1xr0a_1","TextareaInput--monospaced":"_TextareaInput--monospaced_1xr0a_32","TextareaInput--disabled":"_TextareaInput--disabled_1xr0a_37","TextareaInput--error":"_TextareaInput--error_1xr0a_43"}

package/src/Toolbar/Badge/styles.module.css.json

@@ -0,0 +1,5 @@
+{
+  "Badge": "_Badge_6qzz8_1",
+  "Badge--accent": "_Badge--accent_6qzz8_13",
+  "Badge--enterprise": "_Badge--enterprise_6qzz8_18"
+}

package/src/Toolbar/Button/styles.module.css

@@ -3,7 +3,7 @@
   cursor: pointer;
   line-height: inherit;
   background-color: transparent;
-  color: var(--base-body-color);
+  color: var(--color--ink);
   -webkit-appearance: none;
   -moz-appearance: none;
   box-sizing: border-box;
@@ -14,13 +14,13 @@
   justify-content: center;
   width: 49px;
   min-height: 49px;
-  border-left: 1px solid var(--border-color);
-  border-right: 1px solid var(--border-color);
+  border-left: 1px solid var(--color--border);
+  border-right: 1px solid var(--color--border);
 }
 
 .Button:hover,
 .Button:focus {
-  background-color: var(--light-bg-color);
+  background-color: var(--color--surface-hover);
 }
 
 .Button:first-child {

package/src/Toolbar/Button/styles.module.css.json

@@ -1 +1 @@
-{"Button":"_Button_fy6g6_1"}
+{"Button":"_Button_36kvr_1"}

package/src/Toolbar/DotsDropdown/styles.module.css.json

@@ -0,0 +1,4 @@
+{
+  "DotsDropdown": "_DotsDropdown_1no0l_1",
+  "DotsDropdown--open": "_DotsDropdown--open_1no0l_23"
+}

package/src/Toolbar/GoBack/styles.module.css.json

@@ -0,0 +1 @@
+{ "GoBack": "_GoBack_th663_1" }

package/src/Toolbar/Pagination/styles.module.css.json

@@ -0,0 +1 @@
+{ "Pagination": "_Pagination_13njh_1" }

package/src/Toolbar/PrimaryButton/styles.module.css.json

@@ -0,0 +1,5 @@
+{
+  "PrimaryButton": "_PrimaryButton_1mqcx_1",
+  "PrimaryButton__main": "_PrimaryButton__main_1mqcx_6",
+  "PrimaryButton__caret": "_PrimaryButton__caret_1mqcx_11"
+}

package/src/Toolbar/Space/styles.module.css.json

@@ -0,0 +1 @@
+{ "Space": "_Space_oaqyk_1" }

package/src/Toolbar/Subtitle/styles.module.css.json

@@ -0,0 +1 @@
+{ "Subtitle": "_Subtitle_1pjsy_1" }

package/src/Toolbar/Toolbar/index.tsx

@@ -23,7 +23,7 @@ export type ToolbarProps = {
  *       display: 'flex',
  *       justifyContent: 'center',
  *       alignItems: 'center',
- *       background: 'var(--light-bg-color)',
+ *       background: 'var(--color--surface-muted)',
  *       height: '150px',
  *     }}
  *   >
@@ -54,7 +54,7 @@ export type ToolbarProps = {
  *       display: 'flex',
  *       justifyContent: 'center',
  *       alignItems: 'center',
- *       background: 'var(--light-bg-color)',
+ *       background: 'var(--color--surface-muted)',
  *       height: '150px',
  *     }}
  *   >
@@ -83,7 +83,7 @@ export type ToolbarProps = {
  *       display: 'flex',
  *       justifyContent: 'center',
  *       alignItems: 'center',
- *       background: 'var(--light-bg-color)',
+ *       background: 'var(--color--surface-muted)',
  *       height: '150px',
  *     }}
  *   >

package/src/Toolbar/Toolbar/styles.module.css

@@ -1,7 +1,7 @@
 .Toolbar {
   display: flex;
-  border-bottom: 1px solid var(--border-color);
-  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--color--border);
+  border-top: 1px solid var(--color--border);
   align-items: stretch;
   position: relative;
 }

package/src/Toolbar/Toolbar/styles.module.css.json

@@ -1 +1 @@
-{"Toolbar":"_Toolbar_1cwb8_1"}
+{"Toolbar":"_Toolbar_50246_1"}