[BD-46] feat: update design tokens

src/Alert/_variables.scss

@@ -21,4 +21,4 @@ $alert-font-size: var(--pgn-alert-font-size) !default;
 $alert-line-height: var(--pgn-alert-line-height) !default;
 $alert-content-color: var(--pgn-alert-color-content) !default;
 
-$alert-actions-gap:                 map-get($spacers, 3);
+$alert-actions-gap: var(--pgn-alert-actions-gap) !default;

src/Annotation/Annotation.scss

@@ -1,10 +1,10 @@
 @import "variables";
 
 @mixin triangle($triangle-color, $triangle-direction) {
+  content: "";
   height: 0;
   width: 0;
   position: absolute;
-  content: "";
   border: solid transparent;
 
   @if $triangle-direction == top {

src/Annotation/_variables.scss

@@ -6,11 +6,11 @@ $annotation-font-size: var(--pgn-annotation-font-size) !default;
 $annotation-line-height: var(--pgn-annotation-line-height) !default;
 
 $annotation-variants: (
-  "success": ( "background-color": $success, "color": $white ),
-  "warning": ( "background-color": $accent-b, "color": $black ),
-  "error":   ( "background-color": $danger, "color": $white ),
-  "light":   ( "background-color": $white, "color": $primary-500 ),
-  "dark":    ( "background-color": $dark, "color": $white ),
+  "success": ( "background-color": var(--pgn-color-success-base), "color": var(--pgn-color-white) ),
+  "warning": ( "background-color": var(--pgn-color-accent-b), "color": var(--pgn-color-black) ),
+  "error":   ( "background-color": var(--pgn-color-danger-base), "color": var(--pgn-color-white) ),
+  "light":   ( "background-color": var(--pgn-color-white), "color": var(--pgn-color-primary-500) ),
+  "dark":    ( "background-color": var(--pgn-color-dark-base), "color": var(--pgn-color-white) ),
 ) !default;
 
 $annotation-arrow-side-margin: var(--pgn-annotation-arrow-side-margin) !default;

src/Breadcrumb/_variables.scss

@@ -21,7 +21,7 @@ $breadcrumb-inverse-active: var(--pgn-breadcrumb-inverse-active) !default;
 $breadcrumb-inverse-spacer: var(--pgn-breadcrumb-inverse-spacer) !default;
 $breadcrumb-color: var(--pgn-breadcrumb-color-base) !default;
 $breadcrumb-inverse-color: var(--pgn-breadcrumb-inverse-color) !default;
-$breadcrumb-divider:                "/" !default;
+$breadcrumb-divider: "/" !default;
 
 $breadcrumb-border-radius: var(--pgn-breadcrumb-border-radius-base) !default;
 $breadcrumb-focus-border-radius: var(--pgn-breadcrumb-border-radius-focus) !default;

src/Bubble/_variables.scss

@@ -1,8 +1,8 @@
 $bubble-variants: (
-  "success":    ( "background-color": $success, "color": $white ),
-  "warning":    ( "background-color": $warning, "color": $white ),
-  "error":      ( "background-color": $danger, "color": $white ),
-  "primary":    ( "background-color": $primary, "color": $white ),
+  "success":    ( "background-color": var(--pgn-color-success-base), "color": var(--pgn-color-white) ),
+  "warning":    ( "background-color": var(--pgn-color-warning-base), "color": var(--pgn-color-white) ),
+  "error":      ( "background-color": var(--pgn-color-danger-base), "color": var(--pgn-color-white) ),
+  "primary":    ( "background-color": var(--pgn-color-primary-base), "color": var(--pgn-color-white) ),
 ) !default;
 $bubble-expandable-padding-x: var(--pgn-bubble-expandable-padding-x) !default;
 $bubble-expandable-padding-y: var(--pgn-bubble-expandable-padding-y) !default;

src/Button/Button.scss

@@ -1,6 +1,7 @@
 @import "variables";
 @import "button-bootstrap";
 
+// TODO Pending decision on usage with CSS variables.
 @mixin button-variant(
   $btn-variant-bg, $btn-variant-border, $btn-variant-hover-bg: darken($btn-variant-bg, 7.5%),
   $btn-variant-hover-border: darken($btn-variant-border, 10%),
@@ -146,7 +147,7 @@
     box-shadow: none;
 
     $distance: calc($btn-focus-width + $btn-focus-gap);
-    $distance-include-btn-border: calc(#{$distance} + $btn-border-width);
+    $distance-include-btn-border: calc(#{$distance} + #{$btn-border-width});
 
     &::before {
       content: "";

src/Button/_variables.scss

@@ -25,7 +25,7 @@ $btn-disabled-opacity: var(--pgn-btn-disabled-opacity) !default;
 $btn-active-box-shadow: var(--pgn-btn-box-shadow-active) !default;
 
 $btn-tertiary-color: var(--pgn-btn-tertiary-color) !default;
-$btn-tertiary-bg:             transparent !default;
+$btn-tertiary-bg: transparent !default;
 
 $btn-tertiary-hover-bg: var(--pgn-btn-tertiary-bg-hover) !default;
 $btn-tertiary-active-bg: var(--pgn-btn-tertiary-bg-active) !default;

src/Button/button-bootstrap.scss

@@ -53,8 +53,8 @@
 .btn-group-lg > .btn { @extend .btn-lg; }
 
 .dropdown-toggle-split {
-  padding-right: calc(var(--pgn-btn-padding-x) * .75);
-  padding-left: calc(var(--pgn-btn-padding-x) * .75);
+  padding-right: calc($btn-padding-x * .75);
+  padding-left: calc($btn-padding-x * .75);
 
   &::after,
   .dropup &::after,

src/Card/Card.scss

@@ -174,7 +174,7 @@ a .pgn__card {
 
   &.horizontal-stacked {
     flex-direction: column-reverse;
-    padding-top: $card-spacer-x - $card-footer-actions-gap;
+    padding-top: calc(#{$card-spacer-x} - #{$card-footer-actions-gap});
 
     & > * {
       margin-top: $card-footer-actions-gap;

src/Card/_variables.scss

@@ -6,7 +6,7 @@ $card-border-width: var(--pgn-card-border-width) !default;
 $card-border-radius: var(--pgn-card-border-radius-base) !default;
 $card-border-color: var(--pgn-card-border-color-base) !default;
 $card-border-focus-color: var(--pgn-card-border-color-focus) !default;
-$card-inner-border-radius:           subtract($card-border-radius, $card-border-width) !default;
+$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
 $card-cap-bg: var(--pgn-card-cap-bg) !default;
 $card-cap-color: var(--pgn-card-cap-color) !default;
 $card-height: var(--pgn-card-height-base) !default;

src/Carousel/_variables.scss

@@ -1,7 +1,7 @@
 // Carousel
 
 // TODO use css variable
-$carousel-control-color:             #FFFFFF !default;
+$carousel-control-color: #FFFFFF !default;
 $carousel-control-width: var(--pgn-carousel-control-width-base) !default;
 $carousel-control-opacity: var(--pgn-carousel-control-opacity-base) !default;
 $carousel-control-hover-opacity: var(--pgn-carousel-control-opacity-hover) !default;
@@ -18,11 +18,10 @@ $carousel-caption-width: var(--pgn-carousel-caption-width) !default;
 $carousel-caption-color: var(--pgn-carousel-caption-color) !default;
 
 $carousel-control-icon-width: var(--pgn-carousel-control-width-icon) !default;
+$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
+$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
 
-$carousel-control-prev-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
-$carousel-control-next-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
-
-$carousel-transition-duration:       .6s !default;
+$carousel-transition-duration: var(--pgn-carousel-transition-duration) !default;
 
 // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
-$carousel-transition:                transform $carousel-transition-duration ease-in-out !default;
+$carousel-transition: transform $carousel-transition-duration ease-in-out !default;

src/Carousel/carousel-bootstrap.scss

@@ -98,6 +98,7 @@
   left: 0;
 
   @if $enable-gradients {
+    // TODO needs a decision
     background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
   }
 }
@@ -106,6 +107,7 @@
   right: 0;
 
   @if $enable-gradients {
+    // TODO needs a decision
     background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
   }
 }

src/Chip/_variables.scss

@@ -1,19 +1,19 @@
 $chip-padding-x: var(--pgn-chip-padding-x) !default;
 $chip-padding-y: var(--pgn-chip-padding-y) !default;
-$chip-padding-to-icon:              3px !default;
-$chip-icon-padding:                 .25rem !default;
-$chip-margin:                       .125rem !default;
+$chip-padding-to-icon: var(--pgn-chip-padding-icon-to) !default;
+$chip-icon-padding: var(--pgn-chip-padding-icon-base) !default;
+$chip-margin: var(--pgn-chip-margin-base) !default;
 $chip-border-radius: var(--pgn-chip-border-radius-base) !default;
-$chip-disable-opacity:              .3 !default;
-$chip-icon-size:                    1.25rem !default;
+$chip-disable-opacity: var(--pgn-chip-disabled-opacity) !default;
+$chip-icon-size: var(--pgn-chip-icon-size) !default;
 
 $chip-theme-variants: (
   "light": (
-    "background": $light-500,
-    "color": $black,
+    "background": var(--pgn-color-light-500),
+    "color": var(--pgn-color-black),
   ),
   "dark": (
-    "background": $dark-200,
-    "color": $white,
+    "background": var(--pgn-color-dark-200),
+    "color": var(--pgn-color-white),
   )
 ) !default;

src/DataTable/CollapsibleButtonGroup.jsx

@@ -79,15 +79,15 @@ function CollapsibleButtonGroup({
             placement="bottom-end"
             isOpen={isOverflowMenuOpen}
           >
-            <div className="pgn__datatable__overflow-actions-menu">
+            <div className="pgn__data-table__overflow-actions-menu">
               <Stack gap={2}>
                 {dropdownActions.map(cloneAction)}
               </Stack>
             </div>
           </ModalPopup>
         </>
       )}
-      <div className="pgn__datatable__visible-actions">
+      <div className="pgn__data-table__visible-actions">
         {visibleActions.map(cloneAction)}
       </div>
     </div>

src/DataTable/DataTable.scss

@@ -25,7 +25,7 @@
 .pgn__table-actions {
   display: flex;
 
-  .pgn__datatable__visible-actions {
+  .pgn__data-table__visible-actions {
     margin-inline-start: map_get($spacers, 2);
 
     .btn {
@@ -79,7 +79,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba($white, .7);
+    background-color: $data-table-is-loading-bg;
     z-index: 1;
   }
 }
@@ -88,6 +88,7 @@
   display: flex;
   align-items: flex-start;
 
+  // TODO CSS variables cannot be used as media breakpoints
   @media (max-width: $max-width-xl) {
     overflow-x: scroll;
   }
@@ -270,8 +271,8 @@
   z-index: 2;
 }
 
-.pgn__datatable__overflow-actions-menu {
-  background: #FFFFFF;
+.pgn__data-table__overflow-actions-menu {
+  background: $white;
   padding: map_get($spacers, 2);
   box-shadow: $level-1-box-shadow;
   border-radius: 4px;

src/DataTable/_variables.scss

@@ -9,3 +9,4 @@ $data-table-cell-padding: var(--pgn-data-table-padding-cell) !default;
 $data-table-footer-position: var(--pgn-data-table-footer-position) !default;
 $data-table-pagination-dropdown-max-height: var(--pgn-data-table-pagination-dropdown-max-height) !default;
 $data-table-pagination-dropdown-min-width: var(--pgn-data-table-pagination-dropdown-min-width) !default;
+$data-table-is-loading-bg: var(--pgn-data-table-background-is-loading) !default;

src/Dropdown/Dropdown.scss

@@ -38,10 +38,10 @@
 }
 
 .dropdown-toggle::after {
+  content: "";
   border: 0;
   border-style: solid;
   border-width: .15rem .15rem 0 0;
-  content: "";
   height: .45rem;
   margin-inline-start: .5em;
   position: relative;

src/Form/_Form.scss

@@ -114,13 +114,13 @@
   &.pgn__form-control-decorator-leading {
     inset-inline-start: 0;
     padding-inline-start: $input-padding-x;
-    padding-inline-end: calc($input-padding-x / 2);
+    padding-inline-end: calc(#{$input-padding-x} / 2);
   }
 
   &.pgn__form-control-decorator-trailing {
     inset-inline-end: 0;
-    padding-inline-start: calc($input-padding-x / 2);
-    padding-inline-end: calc(#{$input-padding-y-sm} - (2 * $input-border-width));
+    padding-inline-start: calc(#{$input-padding-x} / 2);
+    padding-inline-end: calc(#{$input-padding-y-sm} - calc(2 * #{$input-border-width}));
   }
 
   .pgn__form-control-decorator-group-lg & {
@@ -195,7 +195,7 @@
     // Prevent background-color from being output as "transparent"
     // Firefox doesn't handle the first animation well from transparent to
     // a color. Adding an alpha channel smooths it out.
-    background-color: rgba($input-bg, .01);
+    background-color: $form-control-floating-label-text-bg;
     white-space: nowrap;
     max-width: 75vw;
     display: block;

src/Form/_bootstrap-custom-forms.scss

@@ -86,14 +86,14 @@
 
   // Background-color and (when enabled) gradient
   &::before {
+    content: "";
     position: absolute;
     top: calc((#{$font-size-base} * #{$line-height-base} - #{$custom-control-indicator-size}) * .5);
     left: -($custom-control-gutter + $custom-control-indicator-size);
     display: block;
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
     pointer-events: none;
-    content: "";
     background-color: $custom-control-indicator-bg;
     border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
 
@@ -102,13 +102,13 @@
 
   // Foreground (icon)
   &::after {
+    content: "";
     position: absolute;
     top: calc((#{$font-size-base} * #{$line-height-base} - #{$custom-control-indicator-size}) * .5);
     left: -($custom-control-gutter + $custom-control-indicator-size);
     display: block;
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
-    content: "";
     background: 50% / #{$custom-control-indicator-bg-size} no-repeat;
   }
 }
@@ -195,9 +195,9 @@
 
     &::after {
       // stylelint-disable-next-line max-line-length
-      top: add(calc((#{$font-size-base} * #{$line-height-base} - #{$custom-control-indicator-size}) * .5), calc(#{$custom-control-indicator-border-width} * 2));
+      top: calc(calc((#{$font-size-base} * #{$line-height-base} - #{$custom-control-indicator-size}) * .5) + calc(#{$custom-control-indicator-border-width} * 2));
       // stylelint-disable-next-line max-line-length
-      left: add(calc(-1 * (#{$custom-switch-width} + #{$custom-control-gutter})), calc(#{$custom-control-indicator-border-width} * 2));
+      left: calc(calc(-1 * (#{$custom-switch-width} + #{$custom-control-gutter})) + calc(#{$custom-control-indicator-border-width} * 2));
       width: $custom-switch-indicator-size;
       height: $custom-switch-indicator-size;
       background-color: $custom-control-indicator-border-color;
@@ -378,6 +378,7 @@
   @include box-shadow($custom-file-box-shadow);
 
   &::after {
+    content: "Browse";
     position: absolute;
     top: 0;
     right: 0;
@@ -388,7 +389,6 @@
     padding: $custom-file-padding-y $custom-file-padding-x;
     line-height: $custom-file-line-height;
     color: $custom-file-button-color;
-    content: "Browse";
     border-left: inherit;
 
     @include gradient-bg($custom-file-button-bg);
@@ -404,7 +404,7 @@
 
 .custom-range {
   width: 100%;
-  height: add($custom-range-thumb-height, calc(#{$custom-range-thumb-focus-box-shadow-width} * 2));
+  height: calc($custom-range-thumb-height + calc(#{$custom-range-thumb-focus-box-shadow-width} * 2));
   padding: 0; // Need to reset padding
   background-color: transparent;
   appearance: none;