@boostdev/design-system-components 1.0.1 → 1.0.3

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

@@ -5,7 +5,7 @@
     --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
     --switch_track-width:  calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
 
-    color: var(--switch_color, var(--bds-on-bg));
+    color: var(--switch_color, var(--bds-color_on-bg));
     display: flex;
     flex-direction: column;
   }
@@ -53,7 +53,7 @@
     width: var(--switch_track-width);
     height: var(--switch_track-height);
     border-radius: 999px;
-    background-color: var(--switch_track-bg, var(--bds-grey--subtle));
+    background-color: var(--switch_track-bg, var(--bds-color_grey--subtle));
     padding-inline: var(--switch_track-pad);
     pointer-events: none;
     outline: var(--bdc-outline_width) solid var(--bdc_color);
@@ -63,7 +63,7 @@
                 background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
                 transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
 
-    --bdc_color: var(--switch_thumb-bg, var(--bds-grey));
+    --bdc_color: var(--switch_thumb-bg, var(--bds-color_grey));
   }
 
   /* Thumb */
@@ -72,7 +72,7 @@
     width: var(--switch_thumb-size);
     height: var(--switch_thumb-size);
     border-radius: 50%;
-    background-color: var(--switch_thumb-bg, var(--bds-grey));
+    background-color: var(--switch_thumb-bg, var(--bds-color_grey));
     box-shadow: var(--bds-shadow_s);
     transition: var(--bds-animation_transition);
     transform: translateX(0);
@@ -80,18 +80,18 @@
 
   /* Error state — declared before checked/focus so higher-specificity states can override */
   .switch.switchError + .track {
-    --bdc_color: var(--bds-error);
+    --bdc_color: var(--bds-color_error);
   }
 
   /* Checked state via CSS sibling combinator */
   .switch:checked + .track {
-    background-color: var(--switch_track-bg--active, var(--bds-active--subtle));
+    background-color: var(--switch_track-bg--active, var(--bds-color_green--subtle));
 
-    --bdc_color: var(--switch_thumb-bg--active, var(--bds-active--strong));
+    --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_green--strong));
   }
 
   .switch:checked + .track .thumb {
-    background-color: var(--switch_thumb-bg--active, var(--bds-active--strong));
+    background-color: var(--switch_thumb-bg--active, var(--bds-color_green--strong));
     transform: translateX(var(--switch_thumb-size));
   }
 

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

@@ -17,8 +17,8 @@
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--textarea_radius, var(--bdc-outline_radius));
     box-shadow: var(--textarea_shadow, var(--bdc-outline_shadow));
-    background-color: var(--textarea_color_bg, var(--bds-bg));
-    color: var(--textarea_color, var(--bds-on-bg));
+    background-color: var(--textarea_color_bg, var(--bds-color_bg));
+    color: var(--textarea_color, var(--bds-color_on-bg));
     resize: vertical;
     min-height: calc(var(--bds-space_m) * 5);
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),

package/src/components/interaction/form/atoms/Label.module.css

@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     font-family: var(--bds-font_family--body);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     cursor: pointer;
   }
 }

package/src/components/interaction/form/atoms/Message.module.css

@@ -6,6 +6,6 @@
   }
 
   .error {
-    color: var(--bds-error);
+    color: var(--bds-color_error_on-bg);
   }
 }

package/src/components/layout/Card/Card.module.css

@@ -1,7 +1,7 @@
 @layer component {
   .card {
-    background-color: var(--card_color, var(--bds-bg));
-    color: var(--card_on-color, var(--bds-on-bg));
+    background-color: var(--card_color, var(--bds-color_bg));
+    color: var(--card_on-color, var(--bds-color_on-bg));
     border-radius: var(--bds-border_radius--m);
     transition: all 0.3s ease;
     position: relative;

package/src/components/layout/IconWrapper/IconWrapper.module.css

@@ -8,9 +8,9 @@
     align-items: center;
     justify-content: center;
     margin: var(--bds-space_l) auto var(--bds-space_m);
-    background: var(--icon-wrapper-color, var(--bds-bg));
-    color: var(--bds-on-icon-wrapper-color, var(--bds-on-bg));
-    fill: var(--bds-on-icon-wrapper-color, var(--bds-on-bg));
+    background: var(--icon-wrapper-color, var(--bds-color_bg));
+    color: var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg));
+    fill: var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg));
     position: relative;
     transition: var(--bds-animation_transition);
   }

package/src/components/layout/SectionHeader/SectionHeader.module.css

@@ -7,13 +7,13 @@
   }
 
   .title {
-    color: var(--sectionHeader-title-color, var(--bds-on-bg));
+    color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
     margin: 0;
     font-family: var(--bds-font_family--body);
   }
 
   .subtitle {
-    color: var(--sectionHeader_subtitle-color, var(--bds-grey--strong));
+    color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
     margin: 0;
     font-family: var(--bds-font_family--body);
     font-weight: var(--bds-font_weight--medium);

package/src/components/ui/Accordion/Accordion.module.css

@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: column;
     border: var(--accordion_border, none);
-    --bdc_color: var(--bds-bg--subtle);
+    --bdc_color: var(--bds-color_bg--subtle);
     --bdc-outline_radius: var(--bds-border_radius--s);
 
     outline: var(--bdc-outline_width) solid var(--bdc_color);
@@ -13,7 +13,7 @@
   }
 
   .item {
-    border-bottom: 1px solid var(--bds-bg--subtle);
+    border-bottom: 1px solid var(--bds-color_bg--subtle);
   }
 
   .item:last-child {
@@ -34,7 +34,7 @@
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     font-weight: var(--bds-font_weight--semibold);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     cursor: pointer;
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
@@ -53,7 +53,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .trigger:not(:disabled):hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
     }
   }
 
@@ -79,7 +79,7 @@
 
   .panelContent {
     padding: 0 var(--bds-space_m) var(--bds-space_m);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
   }

package/src/components/ui/Alert/Alert.module.css

@@ -5,35 +5,35 @@
         gap: var(--bds-space_s);
         padding: var(--bds-space_m);
         border-radius: var(--bds-border_radius--s);
-        border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--bds-blue));
-        background-color: var(--alert_bg, var(--bds-blue--subtle));
-        color: var(--alert_text, var(--bds-on-blue--subtle));
+        border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--bds-color_blue));
+        background-color: var(--alert_bg, var(--bds-color_blue--subtle));
+        color: var(--alert_text, var(--bds-color_on-blue--subtle));
         font-size: var(--bds-font_size--body);
         line-height: var(--bds-font_line-height--body);
     }
 
     .--variant_info {
-        --alert_bg: var(--bds-blue--subtle);
-        --alert_text: var(--bds-on-blue--subtle);
-        --alert_border: var(--bds-blue);
+        --alert_bg: var(--bds-color_blue--subtle);
+        --alert_text: var(--bds-color_on-blue--subtle);
+        --alert_border: var(--bds-color_blue);
     }
 
     .--variant_success {
-        --alert_bg: var(--bds-success--subtle);
-        --alert_text: var(--bds-on-success--subtle);
-        --alert_border: var(--bds-success);
+        --alert_bg: var(--bds-color_success--subtle);
+        --alert_text: var(--bds-color_on-success--subtle);
+        --alert_border: var(--bds-color_success);
     }
 
     .--variant_warning {
-        --alert_bg: var(--bds-orange--subtle);
-        --alert_text: var(--bds-on-orange--subtle);
-        --alert_border: var(--bds-warning);
+        --alert_bg: var(--bds-color_orange--subtle);
+        --alert_text: var(--bds-color_on-orange--subtle);
+        --alert_border: var(--bds-color_warning);
     }
 
     .--variant_error {
-        --alert_bg: rgb(from var(--bds-error) r g b / 12%);
-        --alert_text: var(--bds-on-bg);
-        --alert_border: var(--bds-error);
+        --alert_bg: rgb(from var(--bds-color_error) r g b / 12%);
+        --alert_text: var(--bds-color_on-bg);
+        --alert_border: var(--bds-color_error);
     }
 
     .icon {

package/src/components/ui/Avatar/Avatar.module.css

@@ -11,8 +11,8 @@
   }
 
   .avatar.--fallback {
-    background-color: var(--avatar_bg, var(--bds-blue));
-    color: var(--avatar_text, var(--bds-on-blue));
+    background-color: var(--avatar_bg, var(--bds-color_blue));
+    color: var(--avatar_text, var(--bds-color_on-blue));
     font-weight: var(--bds-font_weight--semibold);
   }
 

package/src/components/ui/Badge/Badge.module.css

@@ -9,32 +9,32 @@
     font-weight: var(--bds-font_weight--semibold);
     line-height: 1;
     white-space: nowrap;
-    background-color: var(--badge_bg, var(--bds-blue));
-    color: var(--badge_text, var(--bds-on-blue));
+    background-color: var(--badge_bg, var(--bds-color_blue));
+    color: var(--badge_text, var(--bds-color_on-blue));
   }
 
   .--variant_primary {
-    --badge_bg:   var(--bds-interactive);
-    --badge_text: var(--bds-on-interactive);
+    --badge_bg:   var(--bds-color_interactive);
+    --badge_text: var(--bds-color_on-interactive);
   }
 
   .--variant_secondary {
-    --badge_bg:   var(--bds-bg);
-    --badge_text: var(--bds-on-bg);
+    --badge_bg:   var(--bds-color_bg);
+    --badge_text: var(--bds-color_on-bg);
   }
 
   .--variant_success {
-    --badge_bg:   var(--bds-success);
-    --badge_text: var(--bds-on-success);
+    --badge_bg:   var(--bds-color_success);
+    --badge_text: var(--bds-color_on-success);
   }
 
   .--variant_error {
-    --badge_bg:   var(--bds-error);
-    --badge_text: var(--bds-on-error);
+    --badge_bg:   var(--bds-color_error);
+    --badge_text: var(--bds-color_on-error);
   }
 
   .--variant_warning {
-    --badge_bg:   var(--bds-warning);
-    --badge_text: var(--bds-on-warning);
+    --badge_bg:   var(--bds-color_warning);
+    --badge_text: var(--bds-color_on-warning);
   }
 }

package/src/components/ui/Breadcrumb/Breadcrumb.module.css

@@ -20,7 +20,7 @@
   }
 
   .link {
-    color: var(--bds-interactive);
+    color: var(--bds-color_interactive_on-bg);
     text-decoration: none;
     transition: var(--bds-animation_transition);
   }
@@ -39,12 +39,12 @@
   }
 
   .separator {
-    color: var(--bds-on-bg--subtle);
+    color: var(--bds-color_on-bg--subtle);
     user-select: none;
   }
 
   .current {
-    color: var(--bds-on-bg--subtle);
+    color: var(--bds-color_on-bg--subtle);
     font-weight: var(--bds-font_weight--semibold);
   }
 }

package/src/components/ui/Calendar/Calendar.module.css

@@ -3,9 +3,9 @@
     display: inline-flex;
     flex-direction: column;
     gap: var(--bds-space_s);
-    background-color: var(--bds-bg);
+    background-color: var(--bds-color_bg);
     border: var(--calendar_border, none);
-    --bdc_color: var(--bds-bg--subtle);
+    --bdc_color: var(--bds-color_bg--subtle);
     --bdc-outline_radius: var(--bds-border_radius--m);
 
     outline: var(--bdc-outline_width) solid var(--bdc_color);
@@ -25,7 +25,7 @@
   .monthYear {
     font-size: var(--bds-font_size--body);
     font-weight: var(--bds-font_weight--semibold);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .navBtn {
@@ -37,7 +37,7 @@
     height: 2rem;
     border-radius: 50%;
     cursor: pointer;
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     transition: var(--bds-animation_transition);
   }
 
@@ -53,7 +53,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .navBtn:hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
     }
   }
 
@@ -66,7 +66,7 @@
   .weekday {
     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-align: center;
     padding-block-end: var(--bds-space_xs);
   }
@@ -84,7 +84,7 @@
     aspect-ratio: 1;
     border-radius: 50%;
     font-size: var(--bds-font_size--body--s);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     cursor: pointer;
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
@@ -97,14 +97,14 @@
 
   @media (hover: hover) and (pointer: fine) {
     .day:not(.disabled, .selected):hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
     }
   }
 
   .today {
     font-weight: var(--bds-font_weight--semibold);
 
-    --bdc_color: var(--bds-interactive);
+    --bdc_color: var(--bds-color_interactive);
 
     border: var(--calendar_today-border, none);
     outline: var(--bdc-outline_width) solid var(--bdc_color);
@@ -112,8 +112,8 @@
   }
 
   .selected {
-    background-color: var(--bds-interactive);
-    color: var(--bds-on-interactive);
+    background-color: var(--bds-color_interactive);
+    color: var(--bds-color_on-interactive);
     font-weight: var(--bds-font_weight--semibold);
   }
 

package/src/components/ui/Carousel/Carousel.module.css

@@ -33,10 +33,10 @@
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;
-    background-color: var(--bds-bg);
-    color: var(--bds-on-bg);
+    background-color: var(--bds-color_bg);
+    color: var(--bds-color_on-bg);
 
-    --bdc_color: var(--bds-on-bg);
+    --bdc_color: var(--bds-color_on-bg);
 
     border: none;
     outline: var(--bdc-outline_width) solid var(--bdc_color);
@@ -59,7 +59,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .navBtn:hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
     }
   }
 

package/src/components/ui/Collapsible/Collapsible.module.css

@@ -1,6 +1,6 @@
 @layer component {
   .collapsible {
-    border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-bg--subtle));
+    border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
     border-radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
     overflow: hidden;
   }
@@ -15,8 +15,8 @@
     cursor: pointer;
     font-weight: var(--bds-font_weight--semibold);
     font-size: var(--bds-font_size--body);
-    color: var(--collapsible_color, var(--bds-on-bg));
-    background-color: var(--collapsible_bg, var(--bds-bg));
+    color: var(--collapsible_color, var(--bds-color_on-bg));
+    background-color: var(--collapsible_bg, var(--bds-color_bg));
     user-select: none;
     transition: var(--bds-animation_transition);
   }
@@ -33,13 +33,13 @@
 
   @media (hover: hover) and (pointer: fine) {
     .summary:hover {
-      background-color: var(--collapsible_bg--hover, var(--bds-bg--subtle));
+      background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
     }
   }
 
   /* Separator when open */
   .collapsible[open] > .summary {
-    border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-bg--subtle));
+    border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
   }
 
   .summaryContent {
@@ -63,7 +63,7 @@
 
   .content {
     padding: var(--bds-space_m);
-    color: var(--collapsible_on-color, var(--bds-on-bg));
+    color: var(--collapsible_on-color, var(--bds-color_on-bg));
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
   }

package/src/components/ui/DescriptionList/DescriptionList.module.css

@@ -6,7 +6,7 @@
     margin: 0;
     padding: 0;
     font-size: var(--bds-font_size--body);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .group {
@@ -17,12 +17,12 @@
 
   .term {
     font-weight: var(--bds-font_weight--semibold);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .details {
     margin: 0;
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   /* Inline layout */

package/src/components/ui/Link/Link.module.css

@@ -1,6 +1,6 @@
 @layer component {
   .link {
-    color: var(--link_color, var(--bds-interactive));
+    color: var(--link_color, var(--bds-color_interactive_on-bg));
     text-decoration: underline;
     text-underline-offset: 0.2em;
     transition: var(--bds-animation_transition);
@@ -15,23 +15,23 @@
 
   @media (hover: hover) and (pointer: fine) {
     .link:hover {
-      --link_color: var(--link_color-hover, var(--bds-blue--strong));
+      --link_color: var(--link_color-hover, var(--bds-color_blue--strong));
     }
   }
 
   .--variant_default {
-    --link_color:       var(--bds-interactive);
-    --link_color-hover: var(--bds-blue--strong);
+    --link_color:       var(--bds-color_interactive_on-bg);
+    --link_color-hover: var(--bds-color_blue--strong);
   }
 
   .--variant_subtle {
-    --link_color:       var(--bds-on-bg);
-    --link_color-hover: var(--bds-interactive);
+    --link_color:       var(--bds-color_on-bg);
+    --link_color-hover: var(--bds-color_interactive_on-bg);
   }
 
   .--variant_standalone {
-    --link_color:       var(--bds-interactive);
-    --link_color-hover: var(--bds-blue--strong);
+    --link_color:       var(--bds-color_interactive_on-bg);
+    --link_color-hover: var(--bds-color_blue--strong);
 
     display: inline-flex;
     align-items: center;

package/src/components/ui/Loading/Loading.module.css

@@ -8,8 +8,8 @@
   .spinner {
     width: 2.5em;
     height: 2.5em;
-    border: 4px solid var(--bds-bg);
-    border-top: 4px solid var(--bds-interactive);
+    border: 4px solid var(--bds-color_bg);
+    border-top: 4px solid var(--bds-color_interactive);
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }

package/src/components/ui/NotificationBanner/NotificationBanner.module.css

@@ -4,36 +4,36 @@
     align-items: center;
     gap: var(--bds-space_m);
     padding: var(--bds-space_s) var(--bds-space_m);
-    background-color: var(--banner_bg, var(--bds-blue--subtle));
-    color: var(--banner_text, var(--bds-on-blue--subtle));
-    border-block-end: 3px solid var(--banner_border, var(--bds-blue));
+    background-color: var(--banner_bg, var(--bds-color_blue--subtle));
+    color: var(--banner_text, var(--bds-color_on-blue--subtle));
+    border-block-end: 3px solid var(--banner_border, var(--bds-color_blue));
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
     width: 100%;
   }
 
   .--variant_info {
-    --banner_bg: var(--bds-blue--subtle);
-    --banner_text: var(--bds-on-blue--subtle);
-    --banner_border: var(--bds-blue);
+    --banner_bg: var(--bds-color_blue--subtle);
+    --banner_text: var(--bds-color_on-blue--subtle);
+    --banner_border: var(--bds-color_blue);
   }
 
   .--variant_success {
-    --banner_bg: var(--bds-success--subtle);
-    --banner_text: var(--bds-on-success--subtle);
-    --banner_border: var(--bds-success);
+    --banner_bg: var(--bds-color_success--subtle);
+    --banner_text: var(--bds-color_on-success--subtle);
+    --banner_border: var(--bds-color_success);
   }
 
   .--variant_warning {
-    --banner_bg: var(--bds-orange--subtle);
-    --banner_text: var(--bds-on-orange--subtle);
-    --banner_border: var(--bds-warning);
+    --banner_bg: var(--bds-color_orange--subtle);
+    --banner_text: var(--bds-color_on-orange--subtle);
+    --banner_border: var(--bds-color_warning);
   }
 
   .--variant_error {
-    --banner_bg: rgb(from var(--bds-error) r g b / 12%);
-    --banner_text: var(--bds-on-bg);
-    --banner_border: var(--bds-error);
+    --banner_bg: rgb(from var(--bds-color_error) r g b / 12%);
+    --banner_text: var(--bds-color_on-bg);
+    --banner_border: var(--bds-color_error);
   }
 
   .content {

package/src/components/ui/Pagination/Pagination.module.css

@@ -24,12 +24,12 @@
     border-radius: var(--bds-border_radius--xs);
     background-color: var(--btn_bg, transparent);
 
-    --bdc_color: var(--btn_border, var(--bds-bg--subtle));
+    --bdc_color: var(--btn_border, var(--bds-color_bg--subtle));
 
     border: none;
     outline: var(--bdc-outline_width) solid var(--bdc_color);
     outline-offset: var(--bdc-outline_offset);
-    color: var(--btn_color, var(--bds-on-bg));
+    color: var(--btn_color, var(--bds-color_on-bg));
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     font-variant-numeric: tabular-nums;
@@ -50,15 +50,15 @@
 
   @media (hover: hover) and (pointer: fine) {
     .button:not(:disabled, .--active):hover {
-      --btn_bg:    var(--bds-bg--subtle);
-      --btn_color: var(--bds-interactive);
+      --btn_bg:    var(--bds-color_bg--subtle);
+      --btn_color: var(--bds-color_interactive);
     }
   }
 
   .button.--active {
-    --btn_bg:     var(--bds-interactive);
-    --btn_color:  var(--bds-on-interactive);
-    --btn_border: var(--bds-interactive);
+    --btn_bg:     var(--bds-color_interactive);
+    --btn_color:  var(--bds-color_on-interactive);
+    --btn_border: var(--bds-color_interactive);
   }
 
   .button.--nav svg {
@@ -72,7 +72,7 @@
     justify-content: center;
     min-width: 2.25rem;
     height: 2.25rem;
-    color: var(--bds-on-bg--subtle);
+    color: var(--bds-color_on-bg--subtle);
     font-size: var(--bds-font_size--body);
     user-select: none;
   }

package/src/components/ui/Progress/Progress.module.css

@@ -11,7 +11,7 @@
     justify-content: space-between;
     align-items: baseline;
     font-size: var(--bds-font_size--body--s);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .value {
@@ -21,7 +21,7 @@
   .track {
     width: 100%;
     height: var(--progress_height, var(--bds-space_xs));
-    background-color: var(--bds-bg--subtle);
+    background-color: var(--bds-color_bg--subtle);
     border-radius: 999px;
     overflow: hidden;
   }
@@ -32,7 +32,7 @@
 
   .fill {
     height: 100%;
-    background-color: var(--progress_color-active, var(--bds-active));
+    background-color: var(--progress_color-active, var(--bds-color_green));
     border-radius: 999px;
     transition: width var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }