@boostdev/design-system-components 1.0.2 → 1.0.3

package/src/components/interaction/Command/Command.module.css

@@ -18,8 +18,8 @@
   .palette {
     display: flex;
     flex-direction: column;
-    background-color: var(--command_color, var(--bds-bg));
-    color: var(--command_on-color, var(--bds-on-bg));
+    background-color: var(--command_color, var(--bds-color_bg));
+    color: var(--command_on-color, var(--bds-color_on-bg));
     border-radius: var(--bds-border_radius--m);
     box-shadow: var(--command_shadow, var(--bds-shadow_xl));
     overflow: hidden;
@@ -44,7 +44,7 @@
   .searchIcon {
     width: 1.25rem;
     height: 1.25rem;
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     flex-shrink: 0;
   }
 
@@ -54,18 +54,18 @@
     outline: none;
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     background: transparent;
     min-width: 0;
   }
 
   .search::placeholder {
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .escHint {
     font-size: var(--bds-font_size--body--s);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     border-radius: var(--bds-border_radius--xs);
     padding: 0.1em 0.4em;
     flex-shrink: 0;
@@ -94,7 +94,7 @@
     padding: var(--bds-space_xs) var(--bds-space_m);
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--semibold);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
@@ -109,23 +109,23 @@
   }
 
   .itemActive {
-    background-color: var(--bds-bg--subtle);
+    background-color: var(--bds-color_bg--subtle);
   }
 
   .itemLabel {
     flex: 1;
     font-size: var(--bds-font_size--body);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .itemDesc {
     font-size: var(--bds-font_size--body--s);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .shortcut {
     font-size: var(--bds-font_size--body--s);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     border-radius: var(--bds-border_radius--xs);
     padding: 0.1em 0.4em;
 
@@ -139,7 +139,7 @@
   .empty {
     padding: var(--bds-space_l) var(--bds-space_m);
     text-align: center;
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     font-size: var(--bds-font_size--body);
   }
 }

package/src/components/interaction/Dialog/Dialog.module.css

@@ -9,8 +9,8 @@
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--dialog_radius, var(--bdc-outline_radius));
     box-shadow: var(--dialog_shadow, var(--bdc-outline_shadow));
-    background-color: var(--dialog_color ,var(--bds-grey--subtle));
-    color: var(--dialog_on-color, var(--bds-on-grey--subtle));
+    background-color: var(--dialog_color ,var(--bds-color_grey--subtle));
+    color: var(--dialog_on-color, var(--bds-color_on-grey--subtle));
     padding: var(--bds-space_l);
     max-width: 90svw;
     max-height: 90svh;
@@ -39,7 +39,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    background-color: var(--bds-bg);
+    background-color: var(--bds-color_bg);
     color: currentcolor;
     border: var(--dialog_close-border, none);
     --bdc_color: currentcolor;

package/src/components/interaction/Drawer/Drawer.module.css

@@ -25,8 +25,8 @@
     flex-direction: column;
     width: min(28rem, 90vw);
     height: 100%;
-    background-color: var(--drawer_color, var(--bds-bg));
-    color: var(--drawer_on-color, var(--bds-on-bg));
+    background-color: var(--drawer_color, var(--bds-color_bg));
+    color: var(--drawer_on-color, var(--bds-color_on-bg));
     box-shadow: var(--bds-shadow_xl);
     overflow: hidden;
     transition: var(--bds-animation_transition);
@@ -73,7 +73,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .closeButton:hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
     }
   }
 

package/src/components/interaction/DropdownMenu/DropdownMenu.module.css

@@ -17,8 +17,8 @@
     outline: var(--bdc-outline_width) solid var(--bdc_color);
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
-    background-color: var(--dropdown_color, var(--bds-bg));
-    color: var(--dropdown_on-color, var(--bds-on-bg));
+    background-color: var(--dropdown_color, var(--bds-color_bg));
+    color: var(--dropdown_on-color, var(--bds-color_on-bg));
     box-shadow: var(--dropdown_shadow, var(--bds-shadow_m));
     list-style: none;
     margin: 0;
@@ -62,7 +62,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .item:not(:disabled):hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
       color: var(--bds-color_interactive_on-bg);
     }
   }

package/src/components/interaction/Popover/Popover.module.css

@@ -16,9 +16,9 @@
     outline: var(--bdc-outline_width) solid var(--bdc_color);
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--popover_radius, var(--bdc-outline_radius));
-    background-color: var(--popover_color, var(--bds-bg));
+    background-color: var(--popover_color, var(--bds-color_bg));
     box-shadow: var(--popover_shadow, var(--bds-shadow_m));
-    color: var(--popover_on-color, var(--bds-on-bg));
+    color: var(--popover_on-color, var(--bds-color_on-bg));
     font-size: var(--bds-font_size--body);
   }
 

package/src/components/interaction/Rating/Rating.module.css

@@ -2,7 +2,7 @@
   .rating {
     display: inline-flex;
     gap: var(--bds-space_xxxs);
-    color: var(--bds-bg);
+    color: var(--bds-color_bg);
   }
 
   .star {
@@ -11,6 +11,6 @@
   }
 
   .--filled {
-    color: var(--bds-warning);
+    color: var(--bds-color_warning);
   }
 }

package/src/components/interaction/Toast/Toast.module.css

@@ -11,8 +11,8 @@
 
   .toast {
     padding: var(--bds-space_m) var(--bds-space_l);
-    background-color: var(--toast_color, var(--bds-bg));
-    color: var(--toast_on-color, var(--bds-on-bg));
+    background-color: var(--toast_color, var(--bds-color_bg));
+    color: var(--toast_on-color, var(--bds-color_on-bg));
     border-radius: var(--bds-border_radius--s);
     box-shadow: var(--bds-shadow_s);
     display: flex;
@@ -23,23 +23,23 @@
   }
 
   .toast.--variant_success {
-    --toast_color: var(--bds-success);
-    --toast_on-color: var(--bds-on-success);
+    --toast_color: var(--bds-color_success);
+    --toast_on-color: var(--bds-color_on-success);
   }
 
   .toast.--variant_warning {
-    --toast_color: var(--bds-warning);
-    --toast_on-color: var(--bds-on-warning);
+    --toast_color: var(--bds-color_warning);
+    --toast_on-color: var(--bds-color_on-warning);
   }
 
   .toast.--variant_info {
-    --toast_color: var(--bds-bg--subtle);
-    --toast_on-color: var(--bds-on-bg--subtle);
+    --toast_color: var(--bds-color_bg--subtle);
+    --toast_on-color: var(--bds-color_on-bg--subtle);
   }
 
   .toast.--variant_error {
-    --toast_color: var(--bds-error);
-    --toast_on-color: var(--bds-on-error);
+    --toast_color: var(--bds-color_error);
+    --toast_on-color: var(--bds-color_on-error);
   }
 
   .message {

package/src/components/interaction/form/Checkbox/Checkbox.module.css

@@ -16,7 +16,7 @@
     margin-block-start: 0.25em;
     width: var(--inputSize);
     height: var(--inputSize);
-    color: var(--checkbox_color, var(--bds-on-bg));
+    color: var(--checkbox_color, var(--bds-color_on-bg));
     border: var(--checkbox_border, none);
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--xs);
@@ -26,15 +26,15 @@
     border-radius: var(--checkbox_radius, var(--bdc-outline_radius));
     box-shadow: var(--checkbox_shadow, var(--bdc-outline_shadow));
     appearance: none;
-    background-color: var(--checkbox_color_bg, var(--bds-bg));
+    background-color: var(--checkbox_color_bg, var(--bds-color_bg));
     cursor: pointer;
     position: relative;
     transition: --bdc_color 0.3s ease, background-color 0.3s ease;
   }
 
   .checkbox:checked {
-    background-color: var(--checkbox_color-active, var(--bds-active));
-    --bdc_color: var(--checkbox_color-active, var(--bds-active));
+    background-color: var(--checkbox_color-active, var(--bds-color_green));
+    --bdc_color: var(--checkbox_color-active, var(--bds-color_green));
   }
 
   .checkbox:checked::after {
@@ -44,7 +44,7 @@
     top: 0.2em;
     width: 0.5em;
     height: 1em;
-    border: solid var(--checkbox_color-on-active, var(--bds-on-active));
+    border: solid var(--checkbox_color-on-active, var(--bds-color_on-green));
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
   }

package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css

@@ -12,13 +12,13 @@
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--medium);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     padding: 0;
     margin-block-end: var(--bds-space_xs);
   }
 
   .required {
-    color: var(--bds-error);
+    color: var(--bds-color_error);
   }
 
   .items {

package/src/components/interaction/form/Combobox/Combobox.module.css

@@ -25,8 +25,8 @@
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--combobox_radius, var(--bdc-outline_radius));
     box-shadow: var(--combobox_shadow, var(--bdc-outline_shadow));
-    background-color: var(--combobox_color_bg, var(--bds-bg));
-    color: var(--combobox_color, var(--bds-on-bg));
+    background-color: var(--combobox_color_bg, var(--bds-color_bg));
+    color: var(--combobox_color, var(--bds-color_on-bg));
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
                 background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
@@ -55,7 +55,7 @@
     display: flex;
     align-items: center;
     pointer-events: none;
-    color: var(--combobox_color, var(--bds-on-bg));
+    color: var(--combobox_color, var(--bds-color_on-bg));
   }
 
   .chevron svg {
@@ -81,8 +81,8 @@
     outline: var(--bdc-outline_width) solid var(--bdc_color);
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--combobox_listbox-radius, var(--bdc-outline_radius));
-    background-color: var(--combobox_color, var(--bds-bg));
-    color: var(--combobox_on-color, var(--bds-on-bg));
+    background-color: var(--combobox_color, var(--bds-color_bg));
+    color: var(--combobox_on-color, var(--bds-color_on-bg));
     box-shadow: var(--combobox_listbox-shadow, var(--bds-shadow_m));
   }
 
@@ -91,14 +91,14 @@
     align-items: center;
     padding: var(--bds-space_xs) var(--bds-space_m);
     font-size: var(--bds-font_size--body);
-    color: var(--combobox_color, var(--bds-on-bg));
+    color: var(--combobox_color, var(--bds-color_on-bg));
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
 
   .option.--highlighted {
-    background-color: var(--bds-bg--subtle);
-    color: var(--bds-interactive);
+    background-color: var(--bds-color_bg--subtle);
+    color: var(--bds-color_interactive);
   }
 
   .option.--selected {

package/src/components/interaction/form/FileInput/FileInput.module.css

@@ -8,7 +8,7 @@
     display: flex;
     align-items: center;
     font-family: var(--bds-font_family--body);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     margin-block-end: var(--bds-space_xs);
   }
 
@@ -21,7 +21,7 @@
     padding: var(--bds-space_l) var(--bds-space_m);
     border: 2px dashed currentcolor;
     border-radius: var(--bds-border_radius--s);
-    color: var(--fileInput_color, var(--bds-on-bg));
+    color: var(--fileInput_color, var(--bds-color_on-bg));
     cursor: pointer;
     text-align: center;
     transition: var(--bds-animation_transition);
@@ -39,7 +39,7 @@
   }
 
   .hasError {
-    border-color: var(--bds-error);
+    border-color: var(--bds-color_error);
   }
 
   .isDisabled {
@@ -55,17 +55,17 @@
 
   .prompt {
     font-size: var(--bds-font_size--body);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .prompt strong {
-    color: var(--bds-interactive);
+    color: var(--bds-color_interactive);
     font-weight: var(--bds-font_weight--semibold);
   }
 
   .acceptHint {
     font-size: var(--bds-font_size--body--s);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .hiddenInput {
@@ -80,8 +80,8 @@
 
   @media (hover: hover) and (pointer: fine) {
     .dropZone:not(.isDisabled):hover {
-      border-color: var(--bds-interactive);
-      background-color: rgb(from var(--bds-interactive) r g b / 4%);
+      border-color: var(--bds-color_interactive);
+      background-color: rgb(from var(--bds-color_interactive) r g b / 4%);
     }
   }
 }

package/src/components/interaction/form/FormInput/FormInput.module.css

@@ -18,8 +18,8 @@
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--input_radius, var(--bdc-outline_radius));
     box-shadow: var(--input_shadow, var(--bdc-outline_shadow));
-    color: var(--input_color, var(--bds-on-bg));
-    background-color: var(--input_color_bg, var(--bds-bg));
+    color: var(--input_color, var(--bds-color_on-bg));
+    background-color: var(--input_color_bg, var(--bds-color_bg));
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
                 background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }

package/src/components/interaction/form/NumberInput/NumberInput.module.css

@@ -37,7 +37,7 @@
     text-align: center;
     padding: var(--bds-space_s);
     background: transparent;
-    color: var(--numberInput_color, var(--bds-on-bg));
+    color: var(--numberInput_color, var(--bds-color_on-bg));
     min-width: 0;
     appearance: textfield;
   }
@@ -57,8 +57,8 @@
     align-items: center;
     justify-content: center;
     padding: var(--bds-space_xs);
-    background-color: var(--bds-bg--subtle);
-    color: var(--numberInput_color, var(--bds-on-bg));
+    background-color: var(--bds-color_bg--subtle);
+    color: var(--numberInput_color, var(--bds-color_on-bg));
     cursor: pointer;
     transition: var(--bds-animation_transition);
     flex-shrink: 0;
@@ -76,7 +76,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .stepper:not(:disabled):hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
       opacity: 0.7;
     }
   }

package/src/components/interaction/form/Radio/Radio.module.css

@@ -22,7 +22,7 @@
 
   .description {
     font-size: var(--bds-font_size--body--s);
-    color: var(--radio_description-color, var(--bds-on-bg--subtle));
+    color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
     line-height: var(--bds-font_line-height--body);
   }
 
@@ -31,7 +31,7 @@
     margin-block-start: 0.2em;
     width: var(--inputSize);
     height: var(--inputSize);
-    color: var(--radio_color, var(--bds-on-bg));
+    color: var(--radio_color, var(--bds-color_on-bg));
     border: var(--radio_border, none);
     --bdc_color: currentcolor;
     --bdc-outline_radius: 50%;
@@ -41,15 +41,15 @@
     border-radius: var(--radio_radius, var(--bdc-outline_radius));
     box-shadow: var(--radio_shadow, var(--bdc-outline_shadow));
     appearance: none;
-    background-color: var(--radio_color_bg, var(--bds-bg));
+    background-color: var(--radio_color_bg, var(--bds-color_bg));
     cursor: pointer;
     position: relative;
     transition: --bdc_color 0.2s ease, background-color 0.2s ease;
   }
 
   .radio:checked {
-    background-color: var(--radio_color-active, var(--bds-active));
-    --bdc_color: var(--radio_color-active, var(--bds-active));
+    background-color: var(--radio_color-active, var(--bds-color_green));
+    --bdc_color: var(--radio_color-active, var(--bds-color_green));
   }
 
   .radio:checked::after {
@@ -61,7 +61,7 @@
     width: 0.4em;
     height: 0.4em;
     border-radius: 50%;
-    background-color: var(--radio_color-on-active, var(--bds-on-active));
+    background-color: var(--radio_color-on-active, var(--bds-color_on-green));
   }
 
   .radio:focus {

package/src/components/interaction/form/RadioGroup/RadioGroup.module.css

@@ -12,13 +12,13 @@
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--medium);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     padding: 0;
     margin-block-end: var(--bds-space_xs);
   }
 
   .required {
-    color: var(--bds-error);
+    color: var(--bds-color_error);
   }
 
   .items {

package/src/components/interaction/form/SegmentedControl/SegmentedControl.module.css

@@ -5,7 +5,7 @@
     grid-auto-flow: column;
     grid-auto-columns: 1fr;
     padding: var(--bds-space_xxxs);
-    background-color: var(--control_track-bg, var(--bds-bg--subtle));
+    background-color: var(--control_track-bg, var(--bds-color_bg--subtle));
     border-radius: var(--bds-border_radius--m);
     gap: 0;
   }
@@ -17,7 +17,7 @@
     left: var(--bds-space_xxxs);
     width: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
     border-radius: var(--bds-border_radius--s);
-    background-color: var(--control_thumb-bg, var(--bds-bg));
+    background-color: var(--control_thumb-bg, var(--bds-color_bg));
     box-shadow: var(--bds-shadow_s);
     pointer-events: none;
     transform: translateX(calc(var(--control_selected-index, 0) * 100%));
@@ -54,7 +54,7 @@
     white-space: nowrap;
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
-    color: var(--control_label-color, var(--bds-on-bg--subtle));
+    color: var(--control_label-color, var(--bds-color_on-bg--subtle));
     transition: color var(--bds-animation_transition-duration) var(--bds-animation_easing);
     pointer-events: none;
     user-select: none;
@@ -72,7 +72,7 @@
   }
 
   .item.--active .label {
-    color: var(--control_label-color--active, var(--bds-on-bg));
+    color: var(--control_label-color--active, var(--bds-color_on-bg));
   }
 
   .radio:focus-visible ~ .label {
@@ -83,7 +83,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .item:not(.--active, .--disabled):hover .label {
-      color: var(--control_label-color--hover, var(--bds-on-bg));
+      color: var(--control_label-color--hover, var(--bds-color_on-bg));
     }
   }
 

package/src/components/interaction/form/Select/Select.module.css

@@ -25,8 +25,8 @@
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--select_radius, var(--bdc-outline_radius));
     box-shadow: var(--select_shadow, var(--bdc-outline_shadow));
-    background-color: var(--select_color_bg, var(--bds-bg));
-    color: var(--select_color, var(--bds-on-bg));
+    background-color: var(--select_color_bg, var(--bds-color_bg));
+    color: var(--select_color, var(--bds-color_on-bg));
     cursor: pointer;
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
                 background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
@@ -56,7 +56,7 @@
     display: flex;
     align-items: center;
     pointer-events: none;
-    color: var(--select_color, var(--bds-on-bg));
+    color: var(--select_color, var(--bds-color_on-bg));
   }
 
   .chevron svg {

package/src/components/interaction/form/Slider/Slider.module.css

@@ -14,7 +14,7 @@
   .value {
     font-size: var(--bds-font_size--body--s);
     font-variant-numeric: tabular-nums;
-    color: var(--bds-on-bg--subtle);
+    color: var(--bds-color_on-bg--subtle);
   }
 
   .slider {
@@ -22,17 +22,17 @@
     --slider_track-height: var(--bds-space_xxs);
     --slider_thumb-size:   calc(var(--bds-space_s) * 2);
 
-    color: var(--slider_color, var(--bds-on-bg));
+    color: var(--slider_color, var(--bds-color_on-bg));
     appearance: none;
     width: 100%;
     height: var(--slider_track-height);
     border-radius: 999px;
     background: linear-gradient(
       to right,
-      var(--slider_color-active, var(--bds-active)) 0%,
-      var(--slider_color-active, var(--bds-active)) var(--slider_fill),
-      var(--bds-bg--subtle) var(--slider_fill),
-      var(--bds-bg--subtle) 100%
+      var(--slider_color-active, var(--bds-color_green)) 0%,
+      var(--slider_color-active, var(--bds-color_green)) var(--slider_fill),
+      var(--bds-color_bg--subtle) var(--slider_fill),
+      var(--bds-color_bg--subtle) 100%
     );
     cursor: pointer;
     transition: var(--bds-animation_transition);
@@ -55,7 +55,7 @@
     width: var(--slider_thumb-size);
     height: var(--slider_thumb-size);
     border-radius: 50%;
-    background-color: var(--slider_color-active, var(--bds-active));
+    background-color: var(--slider_color-active, var(--bds-color_green));
     box-shadow: var(--bds-shadow_s);
     transition: var(--bds-animation_transition);
     cursor: pointer;
@@ -67,7 +67,7 @@
     height: var(--slider_thumb-size);
     border: none;
     border-radius: 50%;
-    background-color: var(--slider_color-active, var(--bds-active));
+    background-color: var(--slider_color-active, var(--bds-color_green));
     box-shadow: var(--bds-shadow_s);
     cursor: pointer;
   }
@@ -75,19 +75,19 @@
   .sliderError {
     background: linear-gradient(
       to right,
-      var(--bds-error) 0%,
-      var(--bds-error) var(--slider_fill),
-      var(--bds-bg--subtle) var(--slider_fill),
-      var(--bds-bg--subtle) 100%
+      var(--bds-color_error) 0%,
+      var(--bds-color_error) var(--slider_fill),
+      var(--bds-color_bg--subtle) var(--slider_fill),
+      var(--bds-color_bg--subtle) 100%
     );
   }
 
   .sliderError::-webkit-slider-thumb {
-    background-color: var(--bds-error);
+    background-color: var(--bds-color_error);
   }
 
   .sliderError::-moz-range-thumb {
-    background-color: var(--bds-error);
+    background-color: var(--bds-color_error);
   }
 
   @media (prefers-reduced-motion: reduce) {