Repository: Orange-OpenSource/Orange-Boosted-Bootstrap
Pull request #2884: chore: update tokens 0.7.0
Author: login: boosted-bot
Created: 2025-03-06T14:53:55Z | Merged: 2025-03-07T08:32:50Z

This PR is generated automatically, it updates the tokens based on Figma Variables.


Diff:
diff --git a/scss/_maps.scss b/scss/_maps.scss
index c8d4eb7f82..b54bfa523c 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -25,6 +25,7 @@ $ouds-border-colors: (
   "brand-primary": var(--#{$prefix}color-border-brand-primary),
   "default": var(--#{$prefix}color-border-default),
   "emphasized": var(--#{$prefix}color-border-emphasized),
+  "muted": var(--#{$prefix}color-border-muted),
   "on-brand-primary": var(--#{$prefix}color-border-on-brand-primary),
   "always-black": var(--#{$prefix}color-always-black),
   "always-white": var(--#{$prefix}color-always-white),
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 0a73606211..95f509ba02 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -9,11 +9,11 @@
 $white:    $ouds-color-functional-white !default; // OUDS mod: instead of `#fff`
 $gray-100: $ouds-color-functional-light-gray-80 !default; // OUDS mod: instead of `#f8f9fa`
 $gray-200: $ouds-color-functional-light-gray-160 !default; // OUDS mod: instead of `#e9ecef`
-$gray-300: $ouds-color-functional-light-gray-560 !default; // OUDS mod: instead of `#dee2e6`
-$gray-400: $ouds-color-functional-light-gray-560 !default; // OUDS mod: instead of `#ced4da`
-$gray-500: $ouds-color-functional-dark-gray-400 !default; // OUDS mod: instead of `#adb5bd`
-$gray-600: $ouds-color-functional-dark-gray-640 !default; // OUDS mod: instead of `#6c757d`
-$gray-700: $ouds-color-functional-dark-gray-720 !default; // OUDS mod: instead of `#495057`
+$gray-300: $ouds-color-functional-light-gray-240 !default; // OUDS mod: instead of `#dee2e6`
+$gray-400: $ouds-color-functional-light-gray-400 !default; // OUDS mod: instead of `#ced4da`
+$gray-500: $ouds-color-functional-light-gray-800 !default; // OUDS mod: instead of `#adb5bd`
+$gray-600: $ouds-color-functional-dark-gray-240 !default; // OUDS mod: instead of `#6c757d`
+$gray-700: $ouds-color-functional-dark-gray-640 !default; // OUDS mod: instead of `#495057`
 $gray-800: $ouds-color-functional-dark-gray-800 !default; // OUDS mod: instead of `#343a40`
 $gray-900: $ouds-color-functional-dark-gray-880 !default; // OUDS mod: instead of `#212529`
 $black:    $ouds-color-functional-black !default; // OUDS mod: instead of `#000`
diff --git a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
index 6742bdb10d..59765fe3f5 100644
--- a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
+++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
@@ -855,6 +855,7 @@ $utilities: ();
           --bs-color-border-emphasized: #000;
           --bs-color-border-focus: #000;
           --bs-color-border-focus-inset: #fff;
+          --bs-color-border-muted: rgba(0, 0, 0, 0.08); // stylelint-disable-line @stylistic/number-leading-zero
           --bs-color-border-on-brand-primary: #000;
           --bs-color-content-brand-primary: #f15e00;
           --bs-color-content-default: #000;
@@ -894,9 +895,17 @@ $utilities: ();
           --bs-color-decorative-brand-primary: #ff7900;
           --bs-color-decorative-brand-secondary: #000;
           --bs-color-decorative-brand-tertiary: #fff;
-          --bs-color-decorative-neutral-default: #555;
-          --bs-color-decorative-neutral-emphasized: #333;
-          --bs-color-decorative-neutral-muted: #eee;
+          --bs-color-decorative-neutral-emphasized-higher: #333;
+          --bs-color-decorative-neutral-emphasized-low: #555;
+          --bs-color-decorative-neutral-emphasized-lower: #5c5c5c;
+          --bs-color-decorative-neutral-emphasized-lowest: #666;
+          --bs-color-decorative-neutral-muted-high: #ccc;
+          --bs-color-decorative-neutral-muted-higher: #999;
+          --bs-color-decorative-neutral-muted-highest: #858585;
+          --bs-color-decorative-neutral-muted-low: #e0e0e0;
+          --bs-color-decorative-neutral-muted-lower: #eee;
+          --bs-color-decorative-neutral-muted-lowest: #f4f4f4;
+          --bs-color-decorative-neutral-muted-medium: #d6d6d6;
           --bs-color-decorative-skin-tint-100: #fbebdf;
           --bs-color-decorative-skin-tint-200: #f4cfb2;
           --bs-color-decorative-skin-tint-300: #e3b591;
@@ -971,6 +980,7 @@ $utilities: ();
           --bs-color-border-emphasized: rgba(255, 255, 255, 0.92); // stylelint-disable-line @stylistic/number-leading-zero
           --bs-color-border-focus: #eee;
           --bs-color-border-focus-inset: #141414;
+          --bs-color-border-muted: rgba(255, 255, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero
           --bs-color-border-on-brand-primary: #000;
           --bs-color-content-brand-primary: #ff7900;
           --bs-color-content-default: #eee;
@@ -1008,11 +1018,19 @@ $utilities: ();
           --bs-color-decorative-accent-5-emphasized: #ff80d4;
           --bs-color-decorative-accent-5-muted: #ffe5f6;
           --bs-color-decorative-brand-primary: #ff7900;
-          --bs-color-decorative-brand-secondary: #eee;
-          --bs-color-decorative-brand-tertiary: #141414;
-          --bs-color-decorative-neutral-default: #bbb;
-          --bs-color-decorative-neutral-emphasized: #eee;
-          --bs-color-decorative-neutral-muted: #272727;
+          --bs-color-decorative-brand-secondary: #000;
+          --bs-color-decorative-brand-tertiary: #fff;
+          --bs-color-decorative-neutral-emphasized-higher: #333;
+          --bs-color-decorative-neutral-emphasized-low: #555;
+          --bs-color-decorative-neutral-emphasized-lower: #5c5c5c;
+          --bs-color-decorative-neutral-emphasized-lowest: #666;
+          --bs-color-decorative-neutral-muted-high: #ccc;
+          --bs-color-decorative-neutral-muted-higher: #999;
+          --bs-color-decorative-neutral-muted-highest: #858585;
+          --bs-color-decorative-neutral-muted-low: #e0e0e0;
+          --bs-color-decorative-neutral-muted-lower: #eee;
+          --bs-color-decorative-neutral-muted-lowest: #f4f4f4;
+          --bs-color-decorative-neutral-muted-medium: #d6d6d6;
           --bs-color-decorative-skin-tint-100: #fbebdf;
           --bs-color-decorative-skin-tint-200: #f4cfb2;
           --bs-color-decorative-skin-tint-300: #e3b591;
@@ -1148,6 +1166,10 @@ $utilities: ();
           border-color: var(--bs-color-border-emphasized) !important;
         }
 
+        .border-muted {
+          border-color: var(--bs-color-border-muted) !important;
+        }
+
         .border-on-brand-primary {
           border-color: var(--bs-color-border-on-brand-primary) !important;
         }
@@ -10772,6 +10794,7 @@ $utilities: ();
           --bs-color-border-emphasized: #000;
           --bs-color-border-focus: #000;
           --bs-color-border-focus-inset: #fff;
+          --bs-color-border-muted: rgba(0, 0, 0, 0.08); // stylelint-disable-line @stylistic/number-leading-zero
           --bs-color-border-on-brand-primary: #000;
           --bs-color-content-brand-primary: #f15e00;
           --bs-color-content-default: #000;
@@ -10811,9 +10834,17 @@ $utilities: ();
           --bs-color-decorative-brand-primary: #ff7900;
           --bs-color-decorative-brand-secondary: #000;
           --bs-color-decorative-brand-tertiary: #fff;
-          --bs-color-decorative-neutral-default: #555;
-          --bs-color-decorative-neutral-emphasized: #333;
-          --bs-color-decorative-neutral-muted: #eee;
+          --bs-color-decorative-neutral-emphasized-higher: #333;
+          --bs-color-decorative-neutral-emphasized-low: #555;
+          --bs-color-decorative-neutral-emphasized-lower: #5c5c5c;
+          --bs-color-decorative-neutral-emphasized-lowest: #666;
+          --bs-color-decorative-neutral-muted-high: #ccc;
+          --bs-color-decorative-neutral-muted-higher: #999;
+          --bs-color-decorative-neutral-muted-highest: #858585;
+          --bs-color-decorative-neutral-muted-low: #e0e0e0;
+          --bs-color-decorative-neutral-muted-lower: #eee;
+          --bs-color-decorative-neutral-muted-lowest: #f4f4f4;
+          --bs-color-decorative-neutral-muted-medium: #d6d6d6;
           --bs-color-decorative-skin-tint-100: #fbebdf;
           --bs-color-decorative-skin-tint-200: #f4cfb2;
           --bs-color-decorative-skin-tint-300: #e3b591;
@@ -10888,6 +10919,7 @@ $utilities: ();
           --bs-color-border-emphasized: rgba(255, 255, 255, 0.92); // stylelint-disable-line @stylistic/number-leading-zero
           --bs-color-border-focus: #eee;
           --bs-color-border-focus-inset: #141414;
+          --bs-color-border-muted: rgba(255, 255, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero
           --bs-color-border-on-brand-primary: #000;
           --bs-color-content-brand-primary: #ff7900;
           --bs-color-content-default: #eee;
@@ -10925,11 +10957,19 @@ $utilities: ();
           --bs-color-decorative-accent-5-emphasized: #ff80d4;
           --bs-color-decorative-accent-5-muted: #ffe5f6;
           --bs-color-decorative-brand-primary: #ff7900;
-          --bs-color-decorative-brand-secondary: #eee;
-          --bs-color-decorative-brand-tertiary: #141414;
-          --bs-color-decorative-neutral-default: #bbb;
-          --bs-color-decorative-neutral-emphasized: #eee;
-          --bs-color-decorative-neutral-muted: #272727;
+          --bs-color-decorative-brand-secondary: #000;
+          --bs-color-decorative-brand-tertiary: #fff;
+          --bs-color-decorative-neutral-emphasized-higher: #333;
+          --bs-color-decorative-neutral-emphasized-low: #555;
+          --bs-color-decorative-neutral-emphasized-lower: #5c5c5c;
+          --bs-color-decorative-neutral-emphasized-lowest: #666;
+          --bs-color-decorative-neutral-muted-high: #ccc;
+          --bs-color-decorative-neutral-muted-higher: #999;
+          --bs-color-decorative-neutral-muted-highest: #858585;
+          --bs-color-decorative-neutral-muted-low: #e0e0e0;
+          --bs-color-decorative-neutral-muted-lower: #eee;
+          --bs-color-decorative-neutral-muted-lowest: #f4f4f4;
+          --bs-color-decorative-neutral-muted-medium: #d6d6d6;
           --bs-color-decorative-skin-tint-100: #fbebdf;
           --bs-color-decorative-skin-tint-200: #f4cfb2;
           --bs-color-decorative-skin-tint-300: #e3b591;
@@ -11197,6 +11237,10 @@ $utilities: ();
           border-color: var(--bs-color-border-emphasized) !important;
         }
 
+        .border-muted {
+          border-color: var(--bs-color-border-muted) !important;
+        }
+
         .border-on-brand-primary {
           border-color: var(--bs-color-border-on-brand-primary) !important;
         }
diff --git a/scss/tokens/_component.scss b/scss/tokens/_component.scss
index 881c5f0425..0b90e6af9a 100644
--- a/scss/tokens/_component.scss
+++ b/scss/tokens/_component.scss
@@ -1,38 +1,38 @@
 // Component application
 // Depends on semantic applications
-// Token version 0.4.1
+// Token version 0.7.0
 
 // Badge
 
 // scss-docs-start ouds-component-badge
-$ouds-badge-notification-min-width-l: $ouds-dimension-300 !default;
-$ouds-badge-notification-min-width-m: $ouds-dimension-200 !default;
-$ouds-badge-notification-min-width-s: $ouds-dimension-150 !default;
-$ouds-badge-size-l: $ouds-dimension-3xs !default;
-$ouds-badge-size-m: $ouds-dimension-5xs !default;
-$ouds-badge-size-s: $ouds-dimension-6xs !default;
-$ouds-badge-size-xs: $ouds-dimension-7xs !default;
+$ouds-badge-border-radius-pill: $ouds-border-radius-pill !default;
+$ouds-badge-size-max-height-extra-small: $ouds-dimension-100 !default;
+$ouds-badge-size-max-height-large: $ouds-dimension-250 !default;
+$ouds-badge-size-max-height-medium: $ouds-dimension-200 !default;
+$ouds-badge-size-max-height-small: $ouds-dimension-150 !default;
+$ouds-badge-size-max-width-extra-small: $ouds-dimension-100 !default;
+$ouds-badge-size-max-width-large-dot: $ouds-dimension-250 !default;
+$ouds-badge-size-max-width-medium-dot: $ouds-dimension-200 !default;
+$ouds-badge-size-max-width-small: $ouds-dimension-150 !default;
+$ouds-badge-size-min-height-extra-small: $ouds-dimension-100 !default;
+$ouds-badge-size-min-height-large: $ouds-dimension-250 !default;
+$ouds-badge-size-min-height-medium: $ouds-dimension-200 !default;
+$ouds-badge-size-min-height-small: $ouds-dimension-150 !default;
+$ouds-badge-size-min-width-extra-small: $ouds-dimension-100 !default;
+$ouds-badge-size-min-width-large: $ouds-dimension-250 !default;
+$ouds-badge-size-min-width-medium: $ouds-dimension-200 !default;
+$ouds-badge-size-min-width-small: $ouds-dimension-150 !default;
+$ouds-badge-space-padding-inline-large: $ouds-space-padding-inline-shorter !default;
+$ouds-badge-space-padding-inline-medium: $ouds-space-padding-inline-shortest !default;
+$ouds-badge-space-row-gap: $ouds-space-row-gap-none !default;
 // scss-docs-end ouds-component-badge
 
 // Breadcrumb
 
 // scss-docs-start ouds-component-breadcrumb
-$ouds-breadcrumb-color-content-enabled: $ouds-color-action-enabled !default;
-$ouds-breadcrumb-color-content-focus: $ouds-color-action-focus !default;
-$ouds-breadcrumb-color-content-hover: $ouds-color-action-hover !default;
-$ouds-breadcrumb-color-content-pressed: $ouds-color-action-pressed !default;
-$ouds-breadcrumb-size-icon-medium: $ouds-size-icon-with-label-large-size-xs !default;
-$ouds-breadcrumb-size-icon-small: $ouds-size-icon-with-label-medium-size-sm !default;
-$ouds-breadcrumb-size-min-height-medium: $ouds-dimension-600 !default;
-$ouds-breadcrumb-size-min-height-small: $ouds-dimension-550 !default;
-$ouds-breadcrumb-size-min-width-medium: $ouds-dimension-600 !default;
-$ouds-breadcrumb-size-min-width-small: $ouds-dimension-550 !default;
-$ouds-breadcrumb-space-column-gap-arrow-medium: $ouds-space-column-gap-shorter !default;
-$ouds-breadcrumb-space-column-gap-arrow-small: $ouds-space-column-gap-shortest !default;
-$ouds-breadcrumb-space-column-gap-levels-medium: $ouds-space-column-gap-short !default;
-$ouds-breadcrumb-space-column-gap-levels-small: $ouds-space-column-gap-shorter !default;
-$ouds-breadcrumb-space-padding-block: $ouds-space-padding-block-medium !default;
-$ouds-breadcrumb-space-padding-inline: $ouds-space-padding-inline-none !default;
+$ouds-breadcrumb-size-arrow: $ouds-size-icon-with-label-medium-size-sm !default;
+$ouds-breadcrumb-space-column-gap-arrow: $ouds-space-column-gap-shortest !default;
+$ouds-breadcrumb-space-column-gap-levels: $ouds-space-column-gap-short !default;
 // scss-docs-end ouds-component-breadcrumb
 
 // Bullet
@@ -170,52 +170,82 @@ $ouds-button-space-padding-inline-icon-start: $ouds-space-padding-inline-taller
 $ouds-button-space-padding-inline-start-icon-end: $ouds-space-padding-inline-spacious !default;
 // scss-docs-end ouds-component-button
 
-// Check
+// Checkbox
 
-// scss-docs-start ouds-component-check
-$ouds-check-radio-size-max-height-assets-container: $ouds-dimension-1200 !default;
-$ouds-check-radio-size-max-height-selector-only: $ouds-dimension-600 !default;
-$ouds-check-radio-size-min-height-selector-only: $ouds-dimension-600 !default;
-$ouds-check-radio-size-min-width-selector-only: $ouds-dimension-600 !default;
-$ouds-check-radio-size-selector: $ouds-size-icon-with-label-large-size-sm !default;
-// scss-docs-end ouds-component-check
+// scss-docs-start ouds-component-checkbox
+$ouds-checkbox-border-radius: $ouds-border-radius-default !default;
+$ouds-checkbox-border-width-selected-focus: $ouds-border-width-medium !default;
+$ouds-checkbox-border-width-selected-hover: $ouds-border-width-medium !default;
+$ouds-checkbox-border-width-selected-pressed: $ouds-border-width-medium !default;
+$ouds-checkbox-border-width-selected: $ouds-border-width-medium !default;
+$ouds-checkbox-border-width-unselected-focus: $ouds-border-width-medium !default;
+$ouds-checkbox-border-width-unselected-hover: $ouds-border-width-medium !default;
+$ouds-checkbox-border-width-unselected-pressed: $ouds-border-width-medium !default;
+$ouds-checkbox-border-width-unselected: $ouds-border-width-thin !default;
+$ouds-checkbox-size-indicator: $ouds-size-icon-with-label-large-size-xs !default;
+$ouds-checkbox-size-max-height: $ouds-dimension-600 !default;
+$ouds-checkbox-size-min-height: $ouds-dimension-600 !default;
+$ouds-checkbox-size-min-width: $ouds-dimension-600 !default;
+// scss-docs-end ouds-component-checkbox
 
 // Chip
 
 // scss-docs-start ouds-component-chip
-$ouds-chip-border-radius: $ouds-border-radius-pill !default;
+$ouds-chip-border-radius-pill: $ouds-border-radius-pill !default;
 $ouds-chip-border-width-default-interaction: $ouds-border-width-medium !default;
 $ouds-chip-border-width-default: $ouds-border-width-default !default;
+$ouds-chip-border-width-selected: $ouds-border-width-medium !default;
 $ouds-chip-color-bg-disabled: $ouds-color-opacity-transparent !default;
 $ouds-chip-color-bg-enabled: $ouds-color-opacity-transparent !default;
 $ouds-chip-color-bg-focus: $ouds-color-opacity-transparent !default;
 $ouds-chip-color-bg-hover: $ouds-color-opacity-transparent !default;
 $ouds-chip-color-bg-pressed: $ouds-color-opacity-transparent !default;
 $ouds-chip-color-border-disabled: $ouds-color-action-disabled !default;
-$ouds-chip-color-border-enabled: $ouds-color-action-enabled !default;
+$ouds-chip-color-border-enabled: $ouds-color-border-default !default;
+$ouds-chip-color-border-focus: $ouds-color-action-focus !default;
 $ouds-chip-color-border-hover: $ouds-color-action-hover !default;
 $ouds-chip-color-border-pressed: $ouds-color-action-pressed !default;
 $ouds-chip-color-border-selected: $ouds-color-action-selected !default;
-$ouds-chip-color-content-disabled: $ouds-color-content-disabled !default;
-$ouds-chip-color-content-enabled: $ouds-color-content-default !default;
-$ouds-chip-color-content-focus: $ouds-color-content-default !default;
-$ouds-chip-color-content-hover: $ouds-color-content-default !default;
-$ouds-chip-color-content-pressed: $ouds-color-content-default !default;
+$ouds-chip-color-content-disabled: $ouds-color-action-disabled !default;
+$ouds-chip-color-content-enabled: $ouds-color-action-enabled !default;
+$ouds-chip-color-content-focus: $ouds-color-action-focus !default;
+$ouds-chip-color-content-hover: $ouds-color-action-hover !default;
+$ouds-chip-color-content-pressed: $ouds-color-action-pressed !default;
 $ouds-chip-size-icon: $ouds-size-icon-with-label-medium-size-sm !default;
+$ouds-chip-size-max-height-2: $ouds-dimension-400 !default;
 $ouds-chip-size-max-height: $ouds-dimension-400 !default;
+$ouds-chip-size-min-height-2: $ouds-dimension-400 !default;
 $ouds-chip-size-min-height: $ouds-dimension-400 !default;
+$ouds-chip-size-min-width: $ouds-dimension-600 !default;
 $ouds-chip-space-column-gap-column-gap: $ouds-space-column-gap-shorter !default;
 $ouds-chip-space-inset-icon-only: $ouds-space-inset-medium !default;
-$ouds-chip-space-padding-block: $ouds-space-padding-block-medium !default;
+$ouds-chip-space-padding-block: $ouds-space-padding-block-shorter !default;
 $ouds-chip-space-padding-inline-icon-end: $ouds-space-padding-inline-medium !default;
 $ouds-chip-space-padding-inline-icon-none: $ouds-space-padding-inline-tall !default;
 $ouds-chip-space-padding-inline-icon-only: $ouds-space-padding-inline-medium !default;
 $ouds-chip-space-padding-inline-icon-start: $ouds-space-padding-inline-medium !default;
 $ouds-chip-space-padding-inline-label-end: $ouds-space-padding-inline-tall !default;
 $ouds-chip-space-padding-inline-label-start: $ouds-space-padding-inline-tall !default;
-$ouds-chip-space-padding-stack-padding-block: $ouds-space-padding-block-shorter !default;
 // scss-docs-end ouds-component-chip
 
+// Control
+
+// scss-docs-start ouds-component-control
+$ouds-control-item-color-bg-focus: $ouds-color-action-support-focus !default;
+$ouds-control-item-color-bg-hover: $ouds-color-action-support-hover !default;
+$ouds-control-item-color-bg-loading: $ouds-color-action-support-loading !default;
+$ouds-control-item-color-bg-pressed: $ouds-color-action-support-pressed !default;
+$ouds-control-item-color-content-loader: $ouds-color-content-default !default;
+$ouds-control-item-size-icon: $ouds-size-icon-with-label-large-size-md !default;
+$ouds-control-item-size-loader: $ouds-size-icon-with-label-large-size-sm !default;
+$ouds-control-item-size-max-height-assets-container: $ouds-dimension-1200 !default;
+$ouds-control-item-size-min-height: $ouds-dimension-650 !default;
+$ouds-control-item-size-min-width: $ouds-dimension-1400 !default;
+$ouds-control-item-space-column-gap: $ouds-space-column-gap-tall !default;
+$ouds-control-item-space-inset: $ouds-space-inset-medium !default;
+$ouds-control-item-space-row-gap: $ouds-space-row-gap-none !default;
+// scss-docs-end ouds-component-control
+
 // Input
 
 // scss-docs-start ouds-component-input
@@ -273,22 +303,23 @@ $ouds-link-space-padding-block: $ouds-space-padding-block-medium !default;
 $ouds-link-space-padding-inline: $ouds-space-padding-inline-none !default;
 // scss-docs-end ouds-component-link
 
-// List
+// Radio
 
-// scss-docs-start ouds-component-list
-$ouds-list-item-color-bg-focus: $ouds-color-action-support-focus !default;
-$ouds-list-item-color-bg-hover: $ouds-color-action-support-hover !default;
-$ouds-list-item-color-bg-loading: $ouds-color-action-support-loading !default;
-$ouds-list-item-color-bg-pressed: $ouds-color-action-support-pressed !default;
-$ouds-list-item-color-content-loader: $ouds-color-content-default !default;
-$ouds-list-item-size-icon: $ouds-size-icon-with-label-large-size-md !default;
-$ouds-list-item-size-loader: $ouds-size-icon-with-label-large-size-sm !default;
-$ouds-list-item-size-min-height: $ouds-dimension-650 !default;
-$ouds-list-item-size-min-width: $ouds-dimension-1400 !default;
-$ouds-list-item-space-column-gap: $ouds-space-column-gap-tall !default;
-$ouds-list-item-space-inset: $ouds-space-inset-medium !default;
-$ouds-list-item-space-row-gap: $ouds-space-row-gap-none !default;
-// scss-docs-end ouds-component-list
+// scss-docs-start ouds-component-radio
+$ouds-radio-button-border-radius: $ouds-border-radius-pill !default;
+$ouds-radio-button-border-width-selected-focus: $ouds-border-width-medium !default;
+$ouds-radio-button-border-width-selected-hover: $ouds-border-width-medium !default;
+$ouds-radio-button-border-width-selected-pressed: $ouds-border-width-medium !default;
+$ouds-radio-button-border-width-selected: $ouds-border-width-medium !default;
+$ouds-radio-button-border-width-unselected-focus: $ouds-border-width-medium !default;
+$ouds-radio-button-border-width-unselected-hover: $ouds-border-width-medium !default;
+$ouds-radio-button-border-width-unselected-pressed: $ouds-border-width-medium !default;
+$ouds-radio-button-border-width-unselected: $ouds-border-width-thin !default;
+$ouds-radio-button-size-indicator: $ouds-size-icon-with-label-large-size-xs !default;
+$ouds-radio-button-size-max-height: $ouds-dimension-600 !default;
+$ouds-radio-button-size-min-height: $ouds-dimension-600 !default;
+$ouds-radio-button-size-min-width: $ouds-dimension-600 !default;
+// scss-docs-end ouds-component-radio
 
 // Skeleton
 
@@ -308,8 +339,8 @@ $ouds-switch-color-track-false: $ouds-color-opacity-black-440 !default;
 $ouds-switch-color-track-true-interaction: $ouds-color-functional-malachite-600 !default;
 $ouds-switch-color-track-true: $ouds-color-functional-malachite-500 !default;
 $ouds-switch-size: $ouds-size-icon-with-label-large-size-sm !default;
-$ouds-switch-space-padding-inline-false: $ouds-space-fixed-shorter !default;
-$ouds-switch-space-padding-inline-true: $ouds-space-fixed-shortest !default;
+$ouds-switch-space-padding-inline-selected: $ouds-space-fixed-shortest !default;
+$ouds-switch-space-padding-inline-unselected: $ouds-space-fixed-shorter !default;
 // scss-docs-end ouds-component-switch
 
 // Tag
diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss
index e6667b3d58..098c19f28e 100644
--- a/scss/tokens/_raw.scss
+++ b/scss/tokens/_raw.scss
@@ -1,6 +1,6 @@
 // Raw primitive values
 // Insertion of brand foundations
-// Token version 0.4.1
+// Token version 0.7.0
 
 // Border
 
@@ -93,8 +93,8 @@ $ouds-color-decorative-sky-900: #06202d !default;
 $ouds-color-functional-black: #000 !default;
 // $ouds-color-functional-dark-gray-80: #7a7a7a !default;
 // $ouds-color-functional-dark-gray-160: #707070 !default;
-// $ouds-color-functional-dark-gray-240: #666 !default;
-// $ouds-color-functional-dark-gray-320: #5c5c5c !default;
+$ouds-color-functional-dark-gray-240: #666 !default;
+$ouds-color-functional-dark-gray-320: #5c5c5c !default;
 $ouds-color-functional-dark-gray-400: #555 !default;
 // $ouds-color-functional-dark-gray-480: #444 !default;
 // $ouds-color-functional-dark-gray-560: #3d3d3d !default;
@@ -114,16 +114,16 @@ $ouds-color-functional-dodger-blue-800: #00598a !default;
 $ouds-color-functional-dodger-blue-900: #003857 !default;
 $ouds-color-functional-light-gray-80: #f4f4f4 !default;
 $ouds-color-functional-light-gray-160: #eee !default;
-// $ouds-color-functional-light-gray-240: #e0e0e0 !default;
-// $ouds-color-functional-light-gray-320: #d6d6d6 !default;
-// $ouds-color-functional-light-gray-400: #ccc !default;
+$ouds-color-functional-light-gray-240: #e0e0e0 !default;
+$ouds-color-functional-light-gray-320: #d6d6d6 !default;
+$ouds-color-functional-light-gray-400: #ccc !default;
 // $ouds-color-functional-light-gray-480: #c2c2c2 !default;
-$ouds-color-functional-light-gray-560: #bbb !default;
+// $ouds-color-functional-light-gray-560: #bbb !default;
 // $ouds-color-functional-light-gray-640: #adadad !default;
 // $ouds-color-functional-light-gray-720: #a3a3a3 !default;
-// $ouds-color-functional-light-gray-800: #999 !default;
+$ouds-color-functional-light-gray-800: #999 !default;
 // $ouds-color-functional-light-gray-880: #8f8f8f !default;
-// $ouds-color-functional-light-gray-960: #858585 !default;
+$ouds-color-functional-light-gray-960: #858585 !default;
 $ouds-color-functional-malachite-100: #edfcf0 !default;
 $ouds-color-functional-malachite-200: #c1f6ca !default;
 $ouds-color-functional-malachite-300: #94f0a4 !default;
diff --git a/scss/tokens/_semantic-colors-custom-props.scss b/scss/tokens/_semantic-colors-custom-props.scss
index 8652d88fa9..2a16435d79 100644
--- a/scss/tokens/_semantic-colors-custom-props.scss
+++ b/scss/tokens/_semantic-colors-custom-props.scss
@@ -1,5 +1,5 @@
 // Semantic custom properties applications
-// Token version 0.4.1
+// Token version 0.7.0
 
 // scss-docs-start ouds-all-semantic-css-color
 // scss-docs-start ouds-semantic-css-color
@@ -36,6 +36,7 @@
   --#{$prefix}color-border-emphasized: #{$ouds-color-border-emphasized-light};
   --#{$prefix}color-border-focus: #{$ouds-color-border-focus-light};
   --#{$prefix}color-border-focus-inset: #{$ouds-color-border-focus-inset-light};
+  --#{$prefix}color-border-muted: #{$ouds-color-border-muted-light};
   --#{$prefix}color-border-on-brand-primary: #{$ouds-color-border-on-brand-primary-light};
   --#{$prefix}color-content-brand-primary: #{$ouds-color-content-brand-primary-light};
   --#{$prefix}color-content-default: #{$ouds-color-content-default-light};
@@ -75,9 +76,17 @@
   --#{$prefix}color-decorative-brand-primary: #{$ouds-color-decorative-brand-primary-light};
   --#{$prefix}color-decorative-brand-secondary: #{$ouds-color-decorative-brand-secondary-light};
   --#{$prefix}color-decorative-brand-tertiary: #{$ouds-color-decorative-brand-tertiary-light};
-  --#{$prefix}color-decorative-neutral-default: #{$ouds-color-decorative-neutral-default-light};
-  --#{$prefix}color-decorative-neutral-emphasized: #{$ouds-color-decorative-neutral-emphasized-light};
-  --#{$prefix}color-decorative-neutral-muted: #{$ouds-color-decorative-neutral-muted-light};
+  --#{$prefix}color-decorative-neutral-emphasized-higher: #{$ouds-color-decorative-neutral-emphasized-higher-light};
+  --#{$prefix}color-decorative-neutral-emphasized-low: #{$ouds-color-decorative-neutral-emphasized-low-light};
+  --#{$prefix}color-decorative-neutral-emphasized-lower: #{$ouds-color-decorative-neutral-emphasized-lower-light};
+  --#{$prefix}color-decorative-neutral-emphasized-lowest: #{$ouds-color-decorative-neutral-emphasized-lowest-light};
+  --#{$prefix}color-decorative-neutral-muted-high: #{$ouds-color-decorative-neutral-muted-high-light};
+  --#{$prefix}color-decorative-neutral-muted-higher: #{$ouds-color-decorative-neutral-muted-higher-light};
+  --#{$prefix}color-decorative-neutral-muted-highest: #{$ouds-color-decorative-neutral-muted-highest-light};
+  --#{$prefix}color-decorative-neutral-muted-low: #{$ouds-color-decorative-neutral-muted-low-light};
+  --#{$prefix}color-decorative-neutral-muted-lower: #{$ouds-color-decorative-neutral-muted-lower-light};
+  --#{$prefix}color-decorative-neutral-muted-lowest: #{$ouds-color-decorative-neutral-muted-lowest-light};
+  --#{$prefix}color-decorative-neutral-muted-medium: #{$ouds-color-decorative-neutral-muted-medium-light};
   --#{$prefix}color-decorative-skin-tint-100: #{$ouds-color-decorative-skin-tint-100-light};
   --#{$prefix}color-decorative-skin-tint-200: #{$ouds-color-decorative-skin-tint-200-light};
   --#{$prefix}color-decorative-skin-tint-300: #{$ouds-color-decorative-skin-tint-300-light};
@@ -151,6 +160,7 @@
   --#{$prefix}color-border-emphasized: #{$ouds-color-border-emphasized-dark};
   --#{$prefix}color-border-focus: #{$ouds-color-border-focus-dark};
   --#{$prefix}color-border-focus-inset: #{$ouds-color-border-focus-inset-dark};
+  --#{$prefix}color-border-muted: #{$ouds-color-border-muted-dark};
   --#{$prefix}color-border-on-brand-primary: #{$ouds-color-border-on-brand-primary-dark};
   --#{$prefix}color-content-brand-primary: #{$ouds-color-content-brand-primary-dark};
   --#{$prefix}color-content-default: #{$ouds-color-content-default-dark};
@@ -190,9 +200,17 @@
   --#{$prefix}color-decorative-brand-primary: #{$ouds-color-decorative-brand-primary-dark};
   --#{$prefix}color-decorative-brand-secondary: #{$ouds-color-decorative-brand-secondary-dark};
   --#{$prefix}color-decorative-brand-tertiary: #{$ouds-color-decorative-brand-tertiary-dark};
-  --#{$prefix}color-decorative-neutral-default: #{$ouds-color-decorative-neutral-default-dark};
-  --#{$prefix}color-decorative-neutral-emphasized: #{$ouds-color-decorative-neutral-emphasized-dark};
-  --#{$prefix}color-decorative-neutral-muted: #{$ouds-color-decorative-neutral-muted-dark};
+  --#{$prefix}color-decorative-neutral-emphasized-higher: #{$ouds-color-decorative-neutral-emphasized-higher-dark};
+  --#{$prefix}color-decorative-neutral-emphasized-low: #{$ouds-color-decorative-neutral-emphasized-low-dark};
+  --#{$prefix}color-decorative-neutral-emphasized-lower: #{$ouds-color-decorative-neutral-emphasized-lower-dark};
+  --#{$prefix}color-decorative-neutral-emphasized-lowest: #{$ouds-color-decorative-neutral-emphasized-lowest-dark};
+  --#{$prefix}color-decorative-neutral-muted-high: #{$ouds-color-decorative-neutral-muted-high-dark};
+  --#{$prefix}color-decorative-neutral-muted-higher: #{$ouds-color-decorative-neutral-muted-higher-dark};
+  --#{$prefix}color-decorative-neutral-muted-highest: #{$ouds-color-decorative-neutral-muted-highest-dark};
+  --#{$prefix}color-decorative-neutral-muted-low: #{$ouds-color-decorative-neutral-muted-low-dark};
+  --#{$prefix}color-decorative-neutral-muted-lower: #{$ouds-color-decorative-neutral-muted-lower-dark};
+  --#{$prefix}color-decorative-neutral-muted-lowest: #{$ouds-color-decorative-neutral-muted-lowest-dark};
+  --#{$prefix}color-decorative-neutral-muted-medium: #{$ouds-color-decorative-neutral-muted-medium-dark};
   --#{$prefix}color-decorative-skin-tint-100: #{$ouds-color-decorative-skin-tint-100-dark};
   --#{$prefix}color-decorative-skin-tint-200: #{$ouds-color-decorative-skin-tint-200-dark};
   --#{$prefix}color-decorative-skin-tint-300: #{$ouds-color-decorative-skin-tint-300-dark};
@@ -265,6 +283,7 @@ $ouds-color-border-default: var(--#{$prefix}color-border-default) !default;
 $ouds-color-border-emphasized: var(--#{$prefix}color-border-emphasized) !default;
 $ouds-color-border-focus: var(--#{$prefix}color-border-focus) !default;
 $ouds-color-border-focus-inset: var(--#{$prefix}color-border-focus-inset) !default;
+$ouds-color-border-muted: var(--#{$prefix}color-border-muted) !default;
 $ouds-color-border-on-brand-primary: var(--#{$prefix}color-border-on-brand-primary) !default;
 $ouds-color-content-brand-primary: var(--#{$prefix}color-content-brand-primary) !default;
 $ouds-color-content-default: var(--#{$prefix}color-content-default) !default;
@@ -304,9 +323,17 @@ $ouds-color-decorative-accent-5-muted: var(--#{$prefix}color-decorative-accent-5
 $ouds-color-decorative-brand-primary: var(--#{$prefix}color-decorative-brand-primary) !default;
 $ouds-color-decorative-brand-secondary: var(--#{$prefix}color-decorative-brand-secondary) !default;
 $ouds-color-decorative-brand-tertiary: var(--#{$prefix}color-decorative-brand-tertiary) !default;
-$ouds-color-decorative-neutral-default: var(--#{$prefix}color-decorative-neutral-default) !default;
-$ouds-color-decorative-neutral-emphasized: var(--#{$prefix}color-decorative-neutral-emphasized) !default;
-$ouds-color-decorative-neutral-muted: var(--#{$prefix}color-decorative-neutral-muted) !default;
+$ouds-color-decorative-neutral-emphasized-higher: var(--#{$prefix}color-decorative-neutral-emphasized-higher) !default;
+$ouds-color-decorative-neutral-emphasized-low: var(--#{$prefix}color-decorative-neutral-emphasized-low) !default;
+$ouds-color-decorative-neutral-emphasized-lower: var(--#{$prefix}color-decorative-neutral-emphasized-lower) !default;
+$ouds-color-decorative-neutral-emphasized-lowest: var(--#{$prefix}color-decorative-neutral-emphasized-lowest) !default;
+$ouds-color-decorative-neutral-muted-high: var(--#{$prefix}color-decorative-neutral-muted-high) !default;
+$ouds-color-decorative-neutral-muted-higher: var(--#{$prefix}color-decorative-neutral-muted-higher) !default;
+$ouds-color-decorative-neutral-muted-highest: var(--#{$prefix}color-decorative-neutral-muted-highest) !default;
+$ouds-color-decorative-neutral-muted-low: var(--#{$prefix}color-decorative-neutral-muted-low) !default;
+$ouds-color-decorative-neutral-muted-lower: var(--#{$prefix}color-decorative-neutral-muted-lower) !default;
+$ouds-color-decorative-neutral-muted-lowest: var(--#{$prefix}color-decorative-neutral-muted-lowest) !default;
+$ouds-color-decorative-neutral-muted-medium: var(--#{$prefix}color-decorative-neutral-muted-medium) !default;
 $ouds-color-decorative-skin-tint-100: var(--#{$prefix}color-decorative-skin-tint-100) !default;
 $ouds-color-decorative-skin-tint-200: var(--#{$prefix}color-decorative-skin-tint-200) !default;
 $ouds-color-decorative-skin-tint-300: var(--#{$prefix}color-decorative-skin-tint-300) !default;
diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss
index 4b6da8b7da..7b4ad768ba 100644
--- a/scss/tokens/_semantic.scss
+++ b/scss/tokens/_semantic.scss
@@ -1,6 +1,6 @@
 // Semantic applications
 // Depends on raw primitive values
-// Token version 0.4.1
+// Token version 0.7.0
 
 // Border
 
@@ -91,6 +91,7 @@ $ouds-color-border-default-light: $ouds-color-opacity-black-200 !default;
 $ouds-color-border-emphasized-light: $ouds-color-functional-black !default;
 $ouds-color-border-focus-light: $ouds-color-functional-black !default;
 $ouds-color-border-focus-inset-light: $ouds-color-functional-white !default;
+$ouds-color-border-muted-light: $ouds-color-opacity-black-80 !default;
 $ouds-color-border-on-brand-primary-light: $ouds-color-functional-black !default;
 $ouds-color-border-on-brand-primary-dark: $ouds-color-functional-black !default;
 $ouds-color-border-brand-primary-dark: $ouds-color-orange-500 !default;
@@ -98,6 +99,7 @@ $ouds-color-border-default-dark: $ouds-color-opacity-white-200 !default;
 $ouds-color-border-emphasized-dark: $ouds-color-opacity-white-920 !default;
 $ouds-color-border-focus-dark: $ouds-color-functional-light-gray-160 !default;
 $ouds-color-border-focus-inset-dark: $ouds-color-functional-dark-gray-880 !default;
+$ouds-color-border-muted-dark: $ouds-color-opacity-white-80 !default;
 $ouds-color-content-brand-primary-light: $ouds-color-orange-550 !default;
 $ouds-color-content-default-light: $ouds-color-functional-black !default;
 $ouds-color-content-disabled-light: $ouds-color-opacity-black-200 !default;
@@ -206,14 +208,30 @@ $ouds-color-decorative-brand-primary-light: $ouds-color-orange-500 !default;
 $ouds-color-decorative-brand-secondary-light: $ouds-color-functional-black !default;
 $ouds-color-decorative-brand-tertiary-light: $ouds-color-functional-white !default;
 $ouds-color-decorative-brand-primary-dark: $ouds-color-orange-500 !default;
-$ouds-color-decorative-brand-secondary-dark: $ouds-color-functional-light-gray-160 !default;
-$ouds-color-decorative-brand-tertiary-dark: $ouds-color-functional-dark-gray-880 !default;
-$ouds-color-decorative-neutral-default-light: $ouds-color-functional-dark-gray-400 !default;
-$ouds-color-decorative-neutral-emphasized-light: $ouds-color-functional-dark-gray-640 !default;
-$ouds-color-decorative-neutral-muted-light: $ouds-color-functional-light-gray-160 !default;
-$ouds-color-decorative-neutral-default-dark: $ouds-color-functional-light-gray-560 !default;
-$ouds-color-decorative-neutral-emphasized-dark: $ouds-color-functional-light-gray-160 !default;
-$ouds-color-decorative-neutral-muted-dark: $ouds-color-functional-dark-gray-720 !default;
+$ouds-color-decorative-brand-secondary-dark: $ouds-color-functional-black !default;
+$ouds-color-decorative-brand-tertiary-dark: $ouds-color-functional-white !default;
+$ouds-color-decorative-neutral-emphasized-higher-light: $ouds-color-functional-dark-gray-640 !default;
+$ouds-color-decorative-neutral-emphasized-low-light: $ouds-color-functional-dark-gray-400 !default;
+$ouds-color-decorative-neutral-emphasized-lower-light: $ouds-color-functional-dark-gray-320 !default;
+$ouds-color-decorative-neutral-emphasized-lowest-light: $ouds-color-functional-dark-gray-240 !default;
+$ouds-color-decorative-neutral-emphasized-higher-dark: $ouds-color-functional-dark-gray-640 !default;
+$ouds-color-decorative-neutral-emphasized-low-dark: $ouds-color-functional-dark-gray-400 !default;
+$ouds-color-decorative-neutral-emphasized-lower-dark: $ouds-color-functional-dark-gray-320 !default;
+$ouds-color-decorative-neutral-emphasized-lowest-dark: $ouds-color-functional-dark-gray-240 !default;
+$ouds-color-decorative-neutral-muted-high-light: $ouds-color-functional-light-gray-400 !default;
+$ouds-color-decorative-neutral-muted-higher-light: $ouds-color-functional-light-gray-800 !default;
+$ouds-color-decorative-neutral-muted-highest-light: $ouds-color-functional-light-gray-960 !default;
+$ouds-color-decorative-neutral-muted-low-light: $ouds-color-functional-light-gray-240 !default;
+$ouds-color-decorative-neutral-muted-lower-light: $ouds-color-functional-light-gray-160 !default;
+$ouds-color-decorative-neutral-muted-lowest-light: $ouds-color-functional-light-gray-80 !default;
+$ouds-color-decorative-neutral-muted-medium-light: $ouds-color-functional-light-gray-320 !default;
+$ouds-color-decorative-neutral-muted-high-dark: $ouds-color-functional-light-gray-400 !default;
+$ouds-color-decorative-neutral-muted-higher-dark: $ouds-color-functional-light-gray-800 !default;
+$ouds-color-decorative-neutral-muted-highest-dark: $ouds-color-functional-light-gray-960 !default;
+$ouds-color-decorative-neutral-muted-low-dark: $ouds-color-functional-light-gray-240 !default;
+$ouds-color-decorative-neutral-muted-lower-dark: $ouds-color-functional-light-gray-160 !default;
+$ouds-color-decorative-neutral-muted-lowest-dark: $ouds-color-functional-light-gray-80 !default;
+$ouds-color-decorative-neutral-muted-medium-dark: $ouds-color-functional-light-gray-320 !default;
 $ouds-color-decorative-skin-tint-100-light: $ouds-color-decorative-deep-peach-100 !default;
 $ouds-color-decorative-skin-tint-200-light: $ouds-color-decorative-deep-peach-200 !default;
 $ouds-color-decorative-skin-tint-300-light: $ouds-color-decorative-deep-peach-300 !default;
diff --git a/site/content/docs/0.2/migration-from-boosted.md b/site/content/docs/0.2/migration-from-boosted.md
index 107989a5fc..7dfc596e3e 100644
--- a/site/content/docs/0.2/migration-from-boosted.md
+++ b/site/content/docs/0.2/migration-from-boosted.md
@@ -713,6 +713,8 @@ You will have to make some extra Javascript to change the styles and update the
       <li><code>$ouds-color-border-focus-inset-dark</code></li>
       <li><code>$ouds-color-border-focus-inset-light</code></li>
       <li><code>$ouds-color-border-focus-light</code></li>
+      <li><code>$ouds-color-border-muted-dark</code></li>
+      <li><code>$ouds-color-border-muted-light</code></li>
       <li><code>$ouds-color-border-on-brand-primary-dark</code></li>
       <li><code>$ouds-color-border-on-brand-primary-light</code></li>
       <li><code>$ouds-color-content-brand-primary-dark</code></li>
@@ -1557,6 +1559,7 @@ You will have to make some extra Javascript to change the styles and update the
       <li><code>$ouds-color-border-emphasized</code></li>
       <li><code>$ouds-color-border-focus</code></li>
       <li><code>$ouds-color-border-focus-inset</code></li>
+      <li><code>$ouds-color-border-muted</code></li>
       <li><code>$ouds-color-border-on-brand-primary</code></li>
       <li><code>$ouds-color-content-brand-primary</code></li>
       <li><code>$ouds-color-content-default</code></li>
@@ -1776,6 +1779,7 @@ You will have to make some extra Javascript to change the styles and update the
       <li><code>--bs-color-border-emphasized</code></li>
       <li><code>--bs-color-border-focus</code></li>
       <li><code>--bs-color-border-focus-inset</code></li>
+      <li><code>--bs-color-border-muted</code></li>
       <li><code>--bs-color-border-on-brand-primary</code></li>
       <li><code>--bs-color-content-brand-primary</code></li>
       <li><code>--bs-color-content-default</code></li>
diff --git a/site/content/docs/0.2/migration.md b/site/content/docs/0.2/migration.md
index a5191fac61..63b57108c0 100644
--- a/site/content/docs/0.2/migration.md
+++ b/site/content/docs/0.2/migration.md
@@ -9,6 +9,38 @@ aliases:
 toc: true
 ---
 
+## v0.3.0
+
+### Utilities
+
+#### Border
+
+- <span class="badge text-bg-status-positive-emphasized">New</span> Border color: `.border-muted`.
+
+### CSS and Sass variables
+
+- <details class="mb-short">
+    <summary><span class="badge text-bg-status-positive-emphasized">New</span> Sass variables:</summary>
+    <ul>
+      <li><code>$ouds-color-border-muted-dark</code></li>
+      <li><code>$ouds-color-border-muted-light</code></li>
+    </ul>
+  </details>
+
+- <details class="mb-short">
+    <summary><span class="badge text-bg-status-positive-emphasized">New</span> Sass variables containing CSS variable with value depending on theme:</summary>
+    <ul>
+      <li><code>$ouds-color-border-muted</code></li>
+    </ul>
+  </details>
+
+- <details class="mb-short">
+    <summary><span class="badge text-bg-status-positive-emphasized">New</span> CSS variables:</summary>
+    <ul>
+      <li><code>--bs-color-border-muted</code></li>
+    </ul>
+  </details>
+
 ## v0.2.0
 
 ### Components
diff --git a/site/content/docs/0.2/utilities/borders.md b/site/content/docs/0.2/utilities/borders.md
index dc9d7d14bd..ab99fa6ede 100644
--- a/site/content/docs/0.2/utilities/borders.md
+++ b/site/content/docs/0.2/utilities/borders.md
@@ -56,6 +56,7 @@ Change the border color using utilities. The color utilities are generated from
 <span class="border border-brand-primary"></span>
 <span class="border border-default"></span>
 <span class="border border-emphasized"></span>
+<span class="border border-muted"></span>
 <div data-bs-theme="light" class="bg-brand-primary d-inline-flex m-shortest p-shorter"><span class="border border-on-brand-primary m-none bg-brand-primary" data-bs-theme="light"></span></div>
 <div data-bs-theme="light" class="bg-always-white d-inline-flex m-shortest p-shorter"><span class="border border-always-black m-none bg-always-white" data-bs-theme="light"></span></div>
 <div data-bs-theme="dark" class="bg-always-black d-inline-flex m-shortest p-shorter"><span class="border border-always-white m-none bg-always-black" data-bs-theme="dark"></span></div>
diff --git a/site/data/grays.yml b/site/data/grays.yml
index 429f364685..4c0d3083bb 100644
--- a/site/data/grays.yml
+++ b/site/data/grays.yml
@@ -3,15 +3,15 @@
 - name: 200
   hex: "#eee"
 - name: 300
-  hex: "#bbb"
+  hex: "#e0e0e0"
 - name: 400
-  hex: "#bbb"
+  hex: "#ccc"
 - name: 500
-  hex: "#555"
+  hex: "#999"
 - name: 600
-  hex: "#333"
+  hex: "#666"
 - name: 700
-  hex: "#272727"
+  hex: "#333"
 - name: 800
   hex: "#1f1f1f"
 - name: 900
diff --git a/site/data/palette.yml b/site/data/palette.yml
index 2a8c044100..53e78e6b0b 100644
--- a/site/data/palette.yml
+++ b/site/data/palette.yml
@@ -91,12 +91,30 @@
       - name: Functional light gray 160
         variable: $ouds-color-functional-light-gray-160
         hex: "#eee"
-      - name: Functional light gray 560
-        variable: $ouds-color-functional-light-gray-560
+      - name: Functional light gray 240
+        variable: $ouds-color-functional-light-gray-240
+        hex: "#e0e0e0"
+      - name: Functional light gray 320
+        variable: $ouds-color-functional-light-gray-320
+        hex: "#d6d6d6"
+      - name: Functional light gray 400
+        variable: $ouds-color-functional-light-gray-400
         hex: "#ccc"
+      - name: Functional light gray 800
+        variable: $ouds-color-functional-light-gray-800
+        hex: "#999"
+      - name: Functional light gray 960
+        variable: $ouds-color-functional-light-gray-960
+        hex: "#858585"
   - subcategory: Dark gray
     name: "dark-gray"
     colors:
+      - name: Functional dark gray 240
+        variable: $ouds-color-functional-dark-gray-240
+        hex: "#666"
+      - name: Functional dark gray 320
+        variable: $ouds-color-functional-dark-gray-320
+        hex: "#5c5c5c"
       - name: Functional dark gray 400
         variable: $ouds-color-functional-dark-gray-400
         hex: "#555"


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: ## PR Overview

This PR updates tokens as part of a chore task by aligning the design tokens with the latest Figma Variables.  
- Added a new migration section (v0.3.0) in the migration documentation.  
- Updated palette and grays configuration with new token values.  
- Modified migration and border utility documentation to reference new border-muted tokens.

### Reviewed Changes

| File | Description |
| ---- | ----------- |
| site/content/docs/0.2/migration.md | Introduces new migration instructions for v0.3.0 with updated token information. |
| site/data/palette.yml | Updates palette tokens with new functional gray values; note potential mixing in dark-gray subcategory. |
| site/data/grays.yml | Adjusts hex color codes for gray token entries. |
| site/content/docs/0.2/migration-from-boosted.md | Adds references to new border-muted tokens in migration steps. |
| site/content/docs/0.2/utilities/borders.md | Demonstrates the new border-muted utility in examples. |

Copilot reviewed 12 out of 12 changed files in this pull request and generated no comments.

<details>
<summary>Comments suppressed due to low confidence (1)</summary>

**site/data/palette.yml:115**
* [nitpick] Within the 'dark-gray' subcategory, the token name 'Functional light gray 320' appears to be inconsistent; please verify if this token should be grouped with the light-gray section or if the name should be updated to reflect its inclusion in the dark-gray group.
```
      - name: Functional light gray 320
```
</details>


state: COMMENTED
author_association: NONE
submitted_at: 2025-03-06T15:45:49Z
user: login: vprothais
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-06T15:49:12Z
user: login: vprothais
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-06T15:49:50Z
user: login: louismaximepiton
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T07:44:48Z
user: login: vprothais
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-07T08:00:44Z
user: login: louismaximepiton
body: Do you think border-subtle should be use muted instead of default tokens ?
Should use border-muted sometimes instead of border-default in the doc ?
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T08:08:21Z
user: login: louismaximepiton
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-07T08:15:11Z

Review comments:
diff_hunk: @@ -91,14 +91,32 @@
       - name: Functional light gray 160
         variable: $ouds-color-functional-light-gray-160
         hex: "#eee"
-      - name: Functional light gray 560
-        variable: $ouds-color-functional-light-gray-560
+      - name: Functional light gray 240
+        variable: $ouds-color-functional-light-gray-240
+        hex: "#e0e0e0"
+      - name: Functional light gray 320
+        variable: $ouds-color-functional-light-gray-320
+        hex: "#d6d6d6"
+      - name: Functional light gray 400
+        variable: $ouds-color-functional-light-gray-400
         hex: "#ccc"
+      - name: Functional light gray 800
+        variable: $ouds-color-functional-light-gray-800
+        hex: "#999"
+      - name: Functional light gray 960
+        variable: $ouds-color-functional-light-gray-960
+        hex: "#858585"
   - subcategory: Dark gray
     name: "dark-gray"
     colors:
-      - name: Functional dark gray 400
-        variable: $ouds-color-functional-dark-gray-400
+      - name: Functional dark gray 240
+        variable: $ouds-color-functional-dark-gray-240
+        hex: "#666"
+      - name: Functional light gray 320
+        variable: $ouds-color-functional-light-gray-320
+        hex: "#5c5c5c"
+      - name: Functional light gray 400
+        variable: $ouds-color-functional-light-gray-400
path: site/data/palette.yml
user: login: vprothais
body: @louismaximepiton , I got these colors from the 0.6.0 tokens branch. But isn't it weird to have Functional light gray here, since we are in the Dark gray category ?
created_at: 2025-03-06T15:48:57Z
author_association: COLLABORATOR
diff_hunk: @@ -91,14 +91,32 @@
       - name: Functional light gray 160
         variable: $ouds-color-functional-light-gray-160
         hex: "#eee"
-      - name: Functional light gray 560
-        variable: $ouds-color-functional-light-gray-560
+      - name: Functional light gray 240
+        variable: $ouds-color-functional-light-gray-240
+        hex: "#e0e0e0"
+      - name: Functional light gray 320
+        variable: $ouds-color-functional-light-gray-320
+        hex: "#d6d6d6"
+      - name: Functional light gray 400
+        variable: $ouds-color-functional-light-gray-400
         hex: "#ccc"
+      - name: Functional light gray 800
+        variable: $ouds-color-functional-light-gray-800
+        hex: "#999"
+      - name: Functional light gray 960
+        variable: $ouds-color-functional-light-gray-960
+        hex: "#858585"
   - subcategory: Dark gray
     name: "dark-gray"
     colors:
-      - name: Functional dark gray 400
-        variable: $ouds-color-functional-dark-gray-400
+      - name: Functional dark gray 240
+        variable: $ouds-color-functional-dark-gray-240
+        hex: "#666"
+      - name: Functional light gray 320
+        variable: $ouds-color-functional-light-gray-320
+        hex: "#5c5c5c"
+      - name: Functional light gray 400
+        variable: $ouds-color-functional-light-gray-400
path: site/data/palette.yml
user: login: vprothais
body: Direct link : https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2872/files#diff-faa6a19755005eb096d03b7a5163d4f69b8dfa1aa565219126464a4762052f76R115
created_at: 2025-03-06T15:49:50Z
author_association: COLLABORATOR
diff_hunk: @@ -91,14 +91,32 @@
       - name: Functional light gray 160
         variable: $ouds-color-functional-light-gray-160
         hex: "#eee"
-      - name: Functional light gray 560
-        variable: $ouds-color-functional-light-gray-560
+      - name: Functional light gray 240
+        variable: $ouds-color-functional-light-gray-240
+        hex: "#e0e0e0"
+      - name: Functional light gray 320
+        variable: $ouds-color-functional-light-gray-320
+        hex: "#d6d6d6"
+      - name: Functional light gray 400
+        variable: $ouds-color-functional-light-gray-400
         hex: "#ccc"
+      - name: Functional light gray 800
+        variable: $ouds-color-functional-light-gray-800
+        hex: "#999"
+      - name: Functional light gray 960
+        variable: $ouds-color-functional-light-gray-960
+        hex: "#858585"
   - subcategory: Dark gray
     name: "dark-gray"
     colors:
-      - name: Functional dark gray 400
-        variable: $ouds-color-functional-dark-gray-400
+      - name: Functional dark gray 240
+        variable: $ouds-color-functional-dark-gray-240
+        hex: "#666"
+      - name: Functional light gray 320
+        variable: $ouds-color-functional-light-gray-320
+        hex: "#5c5c5c"
+      - name: Functional light gray 400
+        variable: $ouds-color-functional-light-gray-400
path: site/data/palette.yml
user: login: louismaximepiton
body: Hmmm most likely, it should be dark everywhere indeed
created_at: 2025-03-07T07:44:48Z
author_association: MEMBER
diff_hunk: @@ -91,14 +91,32 @@
       - name: Functional light gray 160
         variable: $ouds-color-functional-light-gray-160
         hex: "#eee"
-      - name: Functional light gray 560
-        variable: $ouds-color-functional-light-gray-560
+      - name: Functional light gray 240
+        variable: $ouds-color-functional-light-gray-240
+        hex: "#e0e0e0"
+      - name: Functional light gray 320
+        variable: $ouds-color-functional-light-gray-320
+        hex: "#d6d6d6"
+      - name: Functional light gray 400
+        variable: $ouds-color-functional-light-gray-400
         hex: "#ccc"
+      - name: Functional light gray 800
+        variable: $ouds-color-functional-light-gray-800
+        hex: "#999"
+      - name: Functional light gray 960
+        variable: $ouds-color-functional-light-gray-960
+        hex: "#858585"
   - subcategory: Dark gray
     name: "dark-gray"
     colors:
-      - name: Functional dark gray 400
-        variable: $ouds-color-functional-dark-gray-400
+      - name: Functional dark gray 240
+        variable: $ouds-color-functional-dark-gray-240
+        hex: "#666"
+      - name: Functional light gray 320
+        variable: $ouds-color-functional-light-gray-320
+        hex: "#5c5c5c"
+      - name: Functional light gray 400
+        variable: $ouds-color-functional-light-gray-400
path: site/data/palette.yml
user: login: vprothais
body: Ok the value was ok, they were just error in names. Fixed that
created_at: 2025-03-07T08:00:44Z
author_association: COLLABORATOR

PR comments:
user: login: netlify[bot]
created_at: 2025-03-06T14:55:18Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *boosted* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | d359ecd0cac1174748c773d390d734cc0352d86c |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/boosted/deploys/67caad588ef3390008cc071d |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-2884--boosted.netlify.app](https://deploy-preview-2884--boosted.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTI4ODQtLWJvb3N0ZWQubmV0bGlmeS5hcHAifQ.cxl2BCIpW_WWsKwjDqlHcd7u4tjMIfpDOZGUydTJcto)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [boosted Preview](https://deploy-preview-2884--boosted.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/boosted/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: vprothais
created_at: 2025-03-07T08:14:49Z
body: > Do you think border-subtle should be use muted instead of default tokens ? Should use border-muted sometimes instead of border-default in the doc ?

@louismaximepiton , I asked myself the exact same question while updating the migration guide. I'm gonna post a thread about replacement for migration in Team to ask design about our choices. I think I'll ask designer about that also and decided not to change for now. WDYT ?
author_association: COLLABORATOR