datocms-react-ui 2.1.4 → 3.0.0-alpha.0

package/src/ContextInspector/styles.module.css

@@ -3,7 +3,7 @@
 }
 
 .panel {
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--color--border);
 }
 
 .panelHandle {
@@ -12,20 +12,20 @@
   box-sizing: border-box;
   width: 100%;
   font-weight: var(--font-weight-bold);
-  background: var(--light-bg-color);
+  background: var(--color--surface-muted);
   border: 0;
   padding: 5px 10px;
   cursor: pointer;
 
   &:hover {
-    background: var(--lighter-bg-color);
+    background: var(--color--surface-hover);
   }
 }
 
 .panelBody {
   padding: 20px;
-  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);
 }
 
 .groupDescription {
@@ -35,12 +35,12 @@
 }
 
 .propertyGroup {
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--color--border);
   border-radius: 5px;
 }
 
 .propertyOrMethod {
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--color--border);
   line-height: 1.2;
 
   p {
@@ -57,7 +57,7 @@
 
   pre {
     padding: 15px;
-    background: var(--light-bg-color);
+    background: var(--color--surface-muted);
     font-size: 0.8em;
     margin: 0;
     max-height: 240px;
@@ -69,7 +69,7 @@
   display: block;
   text-decoration: none;
   font-weight: bold;
-  color: var(--light-body-color);
+  color: var(--color--ink-subtle);
   font-family: var(--monospaced-font-family);
   font-size: 0.9em;
   margin-bottom: 5px;
@@ -81,7 +81,7 @@
 
 .propertyOrMethodExampleActions {
   padding: 15px;
-  background: white;
+  background: var(--color--surface);
   display: flex;
 
   > * {

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

@@ -1 +1 @@
-{"inspector":"_inspector_u6041_1","panel":"_panel_u6041_5","panelHandle":"_panelHandle_u6041_9","panelBody":"_panelBody_u6041_25","groupDescription":"_groupDescription_u6041_31","propertyGroup":"_propertyGroup_u6041_37","propertyOrMethod":"_propertyOrMethod_u6041_42","propertyOrMethodBody":"_propertyOrMethodBody_u6041_51","propertyOrMethodExample":"_propertyOrMethodExample_u6041_55","propertyOrMethodName":"_propertyOrMethodName_u6041_68","propertyOrMethodExampleActions":"_propertyOrMethodExampleActions_u6041_82"}
+{"inspector":"_inspector_4pnoo_1","panel":"_panel_4pnoo_5","panelHandle":"_panelHandle_4pnoo_9","panelBody":"_panelBody_4pnoo_25","groupDescription":"_groupDescription_4pnoo_31","propertyGroup":"_propertyGroup_4pnoo_37","propertyOrMethod":"_propertyOrMethod_4pnoo_42","propertyOrMethodBody":"_propertyOrMethodBody_4pnoo_51","propertyOrMethodExample":"_propertyOrMethodExample_4pnoo_55","propertyOrMethodName":"_propertyOrMethodName_4pnoo_68","propertyOrMethodExampleActions":"_propertyOrMethodExampleActions_4pnoo_82"}

package/src/Dropdown/styles.module.css

@@ -10,35 +10,37 @@
 
 .Dropdown__menu__search {
   padding: 7px;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--color--border);
 }
 
 .Dropdown__menu__search__input {
   display: block;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--color--border);
   appearance: none;
+  background-color: var(--color--surface);
   background-image: none;
   transition: border 0.2s var(--material-ease);
   resize: none;
   font-family: inherit;
+  color: inherit;
   padding: 8px;
   border-radius: 3px;
   font-size: 0.9em;
 
   &::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 3px var(--color--focus--outline);
   }
 }
 
@@ -49,8 +51,8 @@
 
 .Dropdown__menu {
   min-width: 200px;
-  background-color: white;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+  background-color: var(--color--raised--surface);
+  box-shadow: 0 3px 10px var(--color--shadow);
   border-radius: 4px;
   margin-bottom: var(--spacing-xl);
   padding: 1px 0;
@@ -64,8 +66,8 @@
 
 .Dropdown__menu__group__title {
   padding: 5px 15px 3px;
-  color: var(--light-body-color);
-  background-color: var(--light-bg-color);
+  color: var(--color--ink-subtle);
+  background-color: var(--color--surface-muted);
   text-transform: uppercase;
   font-size: var(--font-size-xs);
 }
@@ -77,7 +79,7 @@
 .Dropdown__menu__text {
   text-align: left;
   padding: 4px 15px;
-  color: var(--light-body-color);
+  color: var(--color--ink-subtle);
   position: relative;
   display: block;
   line-height: 1.2;
@@ -86,7 +88,7 @@
 .Dropdown__menu__option {
   text-align: left;
   padding: 4px 15px;
-  color: var(--base-body-color);
+  color: var(--color--ink);
   position: relative;
   text-decoration: none;
   white-space: nowrap;
@@ -95,7 +97,7 @@
 
   &:hover,
   &:focus {
-    background-color: var(--light-bg-color);
+    background-color: var(--color--surface-hover);
   }
 
   & > a {
@@ -106,7 +108,7 @@
 }
 
 .Dropdown__menu__option--is-selected {
-  background-color: var(--light-bg-color);
+  background-color: var(--color--selected--surface);
 }
 
 .Dropdown__menu__option--is-disabled {
@@ -118,19 +120,19 @@
 }
 
 .Dropdown__menu__option--is-dangerous {
-  color: var(--alert-color);
+  color: var(--color--feedback-fail--ink);
 
   svg {
-    fill: var(--alert-color);
+    fill: var(--color--feedback-fail--ink);
   }
 
   &:hover,
   &:focus {
-    background-color: var(--alert-color);
-    color: white;
+    background-color: var(--color--danger--surface);
+    color: var(--color--danger--ink);
 
     svg {
-      fill: white;
+      fill: var(--color--danger--ink);
     }
   }
 }
@@ -161,7 +163,7 @@
     border-radius: 4px;
     height: 8px;
     width: 8px;
-    background-color: var(--alert-color);
+    background-color: var(--color--danger--surface);
   }
 }
 
@@ -186,8 +188,8 @@
     padding-right: 8px;
     display: inline-block;
     vertical-align: middle;
-    color: var(--light-body-color);
-    fill: var(--light-body-color);
+    color: var(--color--ink-subtle);
+    fill: var(--color--ink-subtle);
   }
 }
 
@@ -202,7 +204,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;
@@ -213,7 +215,7 @@
   width: auto;
   opacity: 0;
   line-height: 10px;
-  color: var(--light-body-color);
+  color: var(--color--ink-subtle);
   padding: 3px;
   font-size: 13px;
   position: relative;
@@ -234,21 +236,21 @@
   }
 
   svg {
-    fill: var(--light-body-color);
+    fill: var(--color--ink-subtle);
   }
 }
 
 .Dropdown__menu__option__icon--delete {
-  color: var(--alert-color);
+  color: var(--color--feedback-fail--ink);
   svg {
-    fill: var(--alert-color);
+    fill: var(--color--feedback-fail--ink);
   }
 }
 
 .Dropdown__menu__separator {
   margin: 8px 0;
   height: 1px;
-  background-color: var(--border-color);
+  background-color: var(--color--border);
 }
 
 .Dropdown__menu {

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

@@ -1 +1 @@
-{"Dropdown":"_Dropdown_nie0g_1","Dropdown__spacer":"_Dropdown__spacer_nie0g_5","Dropdown__menu__search":"_Dropdown__menu__search_nie0g_11","Dropdown__menu__search__input":"_Dropdown__menu__search__input_nie0g_16","Dropdown__menu-container":"_Dropdown__menu-container_nie0g_45","Dropdown__menu":"_Dropdown__menu_nie0g_11","Dropdown__menu__inner":"_Dropdown__menu__inner_nie0g_61","Dropdown__menu__group__title":"_Dropdown__menu__group__title_nie0g_65","Dropdown__menu__group__content":"_Dropdown__menu__group__content_nie0g_73","Dropdown__menu__text":"_Dropdown__menu__text_nie0g_77","Dropdown__menu__option":"_Dropdown__menu__option_nie0g_86","Dropdown__menu__option--is-selected":"_Dropdown__menu__option--is-selected_nie0g_108","Dropdown__menu__option--is-disabled":"_Dropdown__menu__option--is-disabled_nie0g_112","Dropdown__menu__option__content":"_Dropdown__menu__option__content_nie0g_115","Dropdown__menu__option--is-dangerous":"_Dropdown__menu__option--is-dangerous_nie0g_120","Dropdown__menu__option--is-active":"_Dropdown__menu__option--is-active_nie0g_138","Dropdown__menu__option--is-valid":"_Dropdown__menu__option--is-valid_nie0g_147","Dropdown__menu__option--is-invalid":"_Dropdown__menu__option--is-invalid_nie0g_151","Dropdown__menu__option__icons":"_Dropdown__menu__option__icons_nie0g_194","Dropdown__menu__option__icon":"_Dropdown__menu__option__icon_nie0g_194","Dropdown__menu__option__icon--delete":"_Dropdown__menu__option__icon--delete_nie0g_241","Dropdown__menu__separator":"_Dropdown__menu__separator_nie0g_248"}
+{"Dropdown":"_Dropdown_dz2gh_1","Dropdown__spacer":"_Dropdown__spacer_dz2gh_5","Dropdown__menu__search":"_Dropdown__menu__search_dz2gh_11","Dropdown__menu__search__input":"_Dropdown__menu__search__input_dz2gh_16","Dropdown__menu-container":"_Dropdown__menu-container_dz2gh_47","Dropdown__menu":"_Dropdown__menu_dz2gh_11","Dropdown__menu__inner":"_Dropdown__menu__inner_dz2gh_63","Dropdown__menu__group__title":"_Dropdown__menu__group__title_dz2gh_67","Dropdown__menu__group__content":"_Dropdown__menu__group__content_dz2gh_75","Dropdown__menu__text":"_Dropdown__menu__text_dz2gh_79","Dropdown__menu__option":"_Dropdown__menu__option_dz2gh_88","Dropdown__menu__option--is-selected":"_Dropdown__menu__option--is-selected_dz2gh_110","Dropdown__menu__option--is-disabled":"_Dropdown__menu__option--is-disabled_dz2gh_114","Dropdown__menu__option__content":"_Dropdown__menu__option__content_dz2gh_117","Dropdown__menu__option--is-dangerous":"_Dropdown__menu__option--is-dangerous_dz2gh_122","Dropdown__menu__option--is-active":"_Dropdown__menu__option--is-active_dz2gh_140","Dropdown__menu__option--is-valid":"_Dropdown__menu__option--is-valid_dz2gh_149","Dropdown__menu__option--is-invalid":"_Dropdown__menu__option--is-invalid_dz2gh_153","Dropdown__menu__option__icons":"_Dropdown__menu__option__icons_dz2gh_196","Dropdown__menu__option__icon":"_Dropdown__menu__option__icon_dz2gh_196","Dropdown__menu__option__icon--delete":"_Dropdown__menu__option__icon--delete_dz2gh_243","Dropdown__menu__separator":"_Dropdown__menu__separator_dz2gh_250"}

package/src/FieldError/styles.module.css

@@ -1,5 +1,5 @@
 .fieldError {
-  color: var(--alert-color);
+  color: var(--color--feedback-fail--ink);
   line-height: 1.2;
   font-size: var(--font-size-xs);
   margin-top: var(--spacing-s);

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

@@ -1 +1 @@
-{"fieldError":"_fieldError_qi0xk_1"}
+{"fieldError":"_fieldError_93pv2_1"}

package/src/FieldHint/styles.module.css

@@ -1,5 +1,5 @@
 .fieldHint {
-  color: var(--light-body-color);
+  color: var(--color--ink-subtle);
   line-height: 1.2;
   font-size: var(--font-size-xs);
   margin-top: var(--spacing-s);

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

@@ -1 +1 @@
-{"fieldHint":"_fieldHint_1avon_1"}
+{"fieldHint":"_fieldHint_1q1d1_1"}

package/src/FormLabel/styles.module.css

@@ -1,6 +1,6 @@
 .formLabel {
   display: flex;
-  color: var(--light-body-color);
+  color: var(--color--ink-subtle);
   margin-bottom: var(--spacing-s);
   align-items: center;
 
@@ -12,7 +12,7 @@
 }
 
 .formLabel--error {
-  color: var(--alert-color);
+  color: var(--color--feedback-fail--ink);
 }
 
 .formLabel__label {

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

@@ -1 +1 @@
-{"formLabel":"_formLabel_tcjrv_1","formLabel__code":"_formLabel__code_tcjrv_8","formLabel--error":"_formLabel--error_tcjrv_14","formLabel__label":"_formLabel__label_tcjrv_18","formLabel__required":"_formLabel__required_tcjrv_30"}
+{"formLabel":"_formLabel_1qzmk_1","formLabel__code":"_formLabel__code_1qzmk_8","formLabel--error":"_formLabel--error_1qzmk_14","formLabel__label":"_formLabel__label_1qzmk_18","formLabel__required":"_formLabel__required_1qzmk_30"}

package/src/HotKey/styles.module.css

@@ -17,6 +17,6 @@
 
 .hotKeyKey {
   padding: 5px 8px;
-  background: var(--light-color);
+  background: var(--color--tinted--surface);
   border-radius: 3px;
 }

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

@@ -1 +1 @@
-{"hotKey":"_hotKey_1eko8_1","label":"_label_1eko8_7","keys":"_keys_1eko8_12","hotKeyKey":"_hotKeyKey_1eko8_18"}
+{"hotKey":"_hotKey_hlj7l_1","label":"_label_hlj7l_7","keys":"_keys_hlj7l_12","hotKeyKey":"_hotKeyKey_hlj7l_18"}

package/src/Section/styles.module.css

@@ -9,7 +9,7 @@
   right: -30px;
   bottom: -20px;
   left: -30px;
-  box-shadow: 0 0 0 4px var(--accent-color);
+  box-shadow: 0 0 0 4px var(--color--focus--border);
   border-radius: 4px;
   animation: pageContentSectionHighligh 4s 0.25s ease-in-out forwards;
   pointer-events: none;
@@ -30,7 +30,7 @@
     left: 0;
     right: 0;
     height: 1px;
-    background-color: var(--border-color);
+    background-color: var(--color--border);
     z-index: 1;
   }
 }
@@ -42,7 +42,7 @@
   margin-right: var(--spacing-l);
   padding-left: var(--spacing-m);
   padding-right: var(--spacing-m);
-  background-color: white;
+  background-color: var(--color--surface);
   position: relative;
   z-index: 2;
   display: inline-flex;
@@ -66,7 +66,7 @@
     width: 0;
     border-top: 6px solid transparent;
     border-bottom: 6px solid transparent;
-    border-left: 6px solid var(--base-body-color);
+    border-left: 6px solid var(--color--ink);
     left: 14px;
     top: 50%;
     margin-top: -6px;
@@ -85,14 +85,14 @@
 
 @keyframes pageContentSectionHighligh {
   0% {
-    box-shadow: 0 0 0 4px var(--accent-color),
-      0 0 0 4px rgba(var(--accent-color-rgb-components), 0.7);
+    box-shadow: 0 0 0 4px var(--color--focus--border),
+      0 0 0 4px var(--color--focus--outline);
   }
   15% {
-    box-shadow: 0 0 0 4px var(--accent-color), 0 0 0 80px transparent;
+    box-shadow: 0 0 0 4px var(--color--focus--border), 0 0 0 80px transparent;
   }
   75% {
-    box-shadow: 0 0 0 4px var(--accent-color), 0 0 0 80px transparent;
+    box-shadow: 0 0 0 4px var(--color--focus--border), 0 0 0 80px transparent;
   }
   100% {
     box-shadow: 0 0 0 4px transparent, 0 0 0 80px transparent;

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

@@ -1 +1 @@
-{"Section":"_Section_zh95u_1","Section--highlighted":"_Section--highlighted_zh95u_5","pageContentSectionHighligh":"_pageContentSectionHighligh_zh95u_1","Section__header":"_Section__header_zh95u_19","Section__title":"_Section__title_zh95u_38","Section__title__content":"_Section__title__content_zh95u_52","Section__arrow":"_Section__arrow_zh95u_55","Section__arrow--is-open":"_Section__arrow--is-open_zh95u_82"}
+{"Section":"_Section_17d0k_1","Section--highlighted":"_Section--highlighted_17d0k_5","pageContentSectionHighligh":"_pageContentSectionHighligh_17d0k_1","Section__header":"_Section__header_17d0k_19","Section__title":"_Section__title_17d0k_38","Section__title__content":"_Section__title__content_17d0k_52","Section__arrow":"_Section__arrow_17d0k_55","Section__arrow--is-open":"_Section__arrow--is-open_17d0k_82"}

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,27 +55,37 @@ const useStyles = (isDisabled?: boolean, error?: boolean) => {
         if (isFocused) {
           return {
             ...result,
-            borderColor: error ? 'var(--alert-color)' : 'var(--accent-color)',
-            backgroundColor: isDisabled ? 'var(--disabled-color)' : 'white',
+            borderColor: error
+              ? 'var(--color--feedback-fail--border)'
+              : 'var(--color--focus--border)',
+            backgroundColor: isDisabled
+              ? 'var(--color--disabled--surface)'
+              : 'var(--color--surface)',
             boxShadow: `0 0 0 3px ${
               error
-                ? 'rgba(var(--alert-color-rgb-components), 0.2)'
-                : 'var(--semi-transparent-accent-color)'
+                ? 'var(--color--feedback-fail--outline)'
+                : 'var(--color--focus--outline)'
             }`,
             '&:hover': {
-              borderColor: error ? 'var(--alert-color)' : 'var(--accent-color)',
+              borderColor: error
+                ? 'var(--color--feedback-fail--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--feedback-fail--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--feedback-fail--border)'
+              : 'var(--color--border-hover)',
           },
         };
       },
@@ -88,24 +98,35 @@ const useStyles = (isDisabled?: boolean, error?: boolean) => {
           ...provided,
           zIndex: 1000,
           minWidth: 250,
+          backgroundColor: 'var(--color--raised--surface)',
         };
       },
-      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--tinted--surface)',
           userSelect: 'none',
         };
       },

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,7 @@
 
 .SidebarPanel__content {
   padding: 20px;
-  background-color: white;
+  background-color: var(--color--surface);
 }
 
 .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_q32h5_1","SidebarPanel__header":"_SidebarPanel__header_q32h5_5","SidebarPanel__header__title":"_SidebarPanel__header__title_q32h5_30","SidebarPanel__header__chevron":"_SidebarPanel__header__chevron_q32h5_36","SidebarPanel__content":"_SidebarPanel__content_q32h5_42","SidebarPanel__content--no-padding":"_SidebarPanel__content--no-padding_q32h5_47"}

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"}