@boostdev/design-system-components 0.1.18 → 1.0.1

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

@@ -3,12 +3,12 @@
     position: relative;
     display: flex;
     align-items: center;
-    gap: var(--space_xs);
+    gap: var(--bds-space_xs);
   }
 
   .track {
     display: flex;
-    gap: var(--space_m);
+    gap: var(--bds-space_m);
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     scrollbar-width: none;
@@ -33,13 +33,18 @@
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;
-    background-color: var(--color_bg);
-    border: 1px solid var(--color_on-bg);
-    color: var(--color_on-bg);
+    background-color: var(--bds-bg);
+    color: var(--bds-on-bg);
+
+    --bdc_color: var(--bds-on-bg);
+
+    border: none;
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
     cursor: pointer;
     flex-shrink: 0;
-    transition: var(--animation_transition);
-    box-shadow: var(--shadow_s);
+    transition: var(--bds-animation_transition);
+    box-shadow: var(--bds-shadow_s);
   }
 
   .navBtn svg {
@@ -48,13 +53,13 @@
   }
 
   .navBtn:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .navBtn:hover {
-      background-color: var(--color_bg--subtle);
+      background-color: var(--bds-bg--subtle);
     }
   }
 

package/src/components/ui/Carousel/Carousel.stories.tsx

@@ -15,7 +15,7 @@ const cardStyle: React.CSSProperties = {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  background: 'var(--color_bg--subtle)',
+  background: 'var(--bds-bg--subtle)',
   borderRadius: '0.5rem',
   fontSize: '1.5rem',
   fontWeight: 600,

package/src/components/ui/Collapsible/Collapsible.mdx

@@ -41,13 +41,13 @@ Use the `name` prop to link multiple Collapsibles so only one can be open at a t
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--collapsible_border-color`</td><td>`var(--color_bg--subtle)`</td><td>Border and separator colour</td></tr>
+<tr><td>`--collapsible_border-color`</td><td>`var(--bds-bg--subtle)`</td><td>Border and separator colour</td></tr>
 <tr><td>`--collapsible_border-width`</td><td>`1px`</td><td>Border and separator width</td></tr>
-<tr><td>`--collapsible_border-radius`</td><td>`var(--border_radius--m)`</td><td>Corner radius</td></tr>
-<tr><td>`--collapsible_bg`</td><td>`var(--color_bg)`</td><td>Summary background</td></tr>
-<tr><td>`--collapsible_bg--hover`</td><td>`var(--color_bg--subtle)`</td><td>Summary background on hover</td></tr>
-<tr><td>`--collapsible_color`</td><td>`var(--color_on-bg)`</td><td>Summary text colour</td></tr>
-<tr><td>`--collapsible_on-color`</td><td>`var(--color_on-bg)`</td><td>Content text colour</td></tr>
+<tr><td>`--collapsible_border-radius`</td><td>`var(--bds-border_radius--m)`</td><td>Corner radius</td></tr>
+<tr><td>`--collapsible_bg`</td><td>`var(--bds-bg)`</td><td>Summary background</td></tr>
+<tr><td>`--collapsible_bg--hover`</td><td>`var(--bds-bg--subtle)`</td><td>Summary background on hover</td></tr>
+<tr><td>`--collapsible_color`</td><td>`var(--bds-on-bg)`</td><td>Summary text colour</td></tr>
+<tr><td>`--collapsible_on-color`</td><td>`var(--bds-on-bg)`</td><td>Content text colour</td></tr>
 </tbody>
 </table>
 

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

@@ -1,7 +1,7 @@
 @layer component {
   .collapsible {
-    border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--color_bg--subtle));
-    border-radius: var(--collapsible_border-radius, var(--border_radius--m));
+    border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-bg--subtle));
+    border-radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
     overflow: hidden;
   }
 
@@ -10,15 +10,15 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--space_m);
-    padding: var(--space_m);
+    gap: var(--bds-space_m);
+    padding: var(--bds-space_m);
     cursor: pointer;
-    font-weight: var(--font_weight--semibold);
-    font-size: var(--font_size--body);
-    color: var(--collapsible_color, var(--color_on-bg));
-    background-color: var(--collapsible_bg, var(--color_bg));
+    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));
     user-select: none;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
 
   /* Remove WebKit disclosure triangle */
@@ -27,19 +27,19 @@
   }
 
   .summary:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: calc(var(--outline_offset) * -1);
+    outline: var(--bds-outline_default);
+    outline-offset: calc(var(--bds-outline_offset) * -1);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .summary:hover {
-      background-color: var(--collapsible_bg--hover, var(--color_bg--subtle));
+      background-color: var(--collapsible_bg--hover, var(--bds-bg--subtle));
     }
   }
 
   /* Separator when open */
   .collapsible[open] > .summary {
-    border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--color_bg--subtle));
+    border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-bg--subtle));
   }
 
   .summaryContent {
@@ -54,7 +54,7 @@
     border-bottom: 2px solid currentcolor;
     transform: rotate(45deg);
     flex-shrink: 0;
-    transition: transform var(--animation_transition-duration) var(--animation_easing);
+    transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   .collapsible[open] > .summary .icon {
@@ -62,10 +62,10 @@
   }
 
   .content {
-    padding: var(--space_m);
-    color: var(--collapsible_on-color, var(--color_on-bg));
-    font-size: var(--font_size--body);
-    line-height: var(--font_line-height--body);
+    padding: var(--bds-space_m);
+    color: var(--collapsible_on-color, var(--bds-on-bg));
+    font-size: var(--bds-font_size--body);
+    line-height: var(--bds-font_line-height--body);
   }
 
   @media (prefers-reduced-motion: reduce) {

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

@@ -2,34 +2,34 @@
   .list {
     display: flex;
     flex-direction: column;
-    gap: var(--space_s);
+    gap: var(--bds-space_s);
     margin: 0;
     padding: 0;
-    font-size: var(--font_size--body);
-    color: var(--color_on-bg);
+    font-size: var(--bds-font_size--body);
+    color: var(--bds-on-bg);
   }
 
   .group {
     display: flex;
     flex-direction: column;
-    gap: var(--space_xxs);
+    gap: var(--bds-space_xxs);
   }
 
   .term {
-    font-weight: var(--font_weight--semibold);
-    color: var(--color_on-bg);
+    font-weight: var(--bds-font_weight--semibold);
+    color: var(--bds-on-bg);
   }
 
   .details {
     margin: 0;
-    color: var(--color_on-bg--muted);
+    color: var(--bds-on-bg);
   }
 
   /* Inline layout */
   .--layout_inline .group {
     display: grid;
     grid-template-columns: minmax(8rem, 1fr) 2fr;
-    gap: var(--space_xs);
+    gap: var(--bds-space_xs);
     align-items: baseline;
   }
 

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

@@ -1,42 +1,42 @@
 @layer component {
   .link {
-    color: var(--link_color, var(--color_interactive));
+    color: var(--link_color, var(--bds-interactive));
     text-decoration: underline;
     text-underline-offset: 0.2em;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
     cursor: pointer;
   }
 
   .link:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
-    border-radius: var(--border_radius--xs);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
+    border-radius: var(--bds-border_radius--xs);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .link:hover {
-      --link_color: var(--link_color-hover, var(--color_blue--strong));
+      --link_color: var(--link_color-hover, var(--bds-blue--strong));
     }
   }
 
   .--variant_default {
-    --link_color:       var(--color_interactive);
-    --link_color-hover: var(--color_blue--strong);
+    --link_color:       var(--bds-interactive);
+    --link_color-hover: var(--bds-blue--strong);
   }
 
   .--variant_subtle {
-    --link_color:       var(--color_on-bg);
-    --link_color-hover: var(--color_interactive);
+    --link_color:       var(--bds-on-bg);
+    --link_color-hover: var(--bds-interactive);
   }
 
   .--variant_standalone {
-    --link_color:       var(--color_interactive);
-    --link_color-hover: var(--color_blue--strong);
+    --link_color:       var(--bds-interactive);
+    --link_color-hover: var(--bds-blue--strong);
 
     display: inline-flex;
     align-items: center;
-    gap: var(--space_xxs);
-    font-weight: var(--font_weight--semibold);
+    gap: var(--bds-space_xxs);
+    font-weight: var(--bds-font_weight--semibold);
     text-decoration: none;
   }
 

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

@@ -8,8 +8,8 @@
   .spinner {
     width: 2.5em;
     height: 2.5em;
-    border: 4px solid var(--color_bg);
-    border-top: 4px solid var(--color_interactive);
+    border: 4px solid var(--bds-bg);
+    border-top: 4px solid var(--bds-interactive);
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
@@ -31,3 +31,9 @@
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation: none;
+  }
+}

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

@@ -2,38 +2,38 @@
   .banner {
     display: flex;
     align-items: center;
-    gap: var(--space_m);
-    padding: var(--space_s) var(--space_m);
-    background-color: var(--banner_bg, var(--color_blue--subtle));
-    color: var(--banner_text, var(--color_on-blue--subtle));
-    border-block-end: 3px solid var(--banner_border, var(--color_blue));
-    font-size: var(--font_size--body);
-    line-height: var(--font_line-height--body);
+    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));
+    font-size: var(--bds-font_size--body);
+    line-height: var(--bds-font_line-height--body);
     width: 100%;
   }
 
   .--variant_info {
-    --banner_bg: var(--color_blue--subtle);
-    --banner_text: var(--color_on-blue--subtle);
-    --banner_border: var(--color_blue);
+    --banner_bg: var(--bds-blue--subtle);
+    --banner_text: var(--bds-on-blue--subtle);
+    --banner_border: var(--bds-blue);
   }
 
   .--variant_success {
-    --banner_bg: var(--color_success--subtle);
-    --banner_text: var(--color_on-success--subtle);
-    --banner_border: var(--color_success);
+    --banner_bg: var(--bds-success--subtle);
+    --banner_text: var(--bds-on-success--subtle);
+    --banner_border: var(--bds-success);
   }
 
   .--variant_warning {
-    --banner_bg: var(--color_orange--subtle);
-    --banner_text: var(--color_on-orange--subtle);
-    --banner_border: var(--color_warning);
+    --banner_bg: var(--bds-orange--subtle);
+    --banner_text: var(--bds-on-orange--subtle);
+    --banner_border: var(--bds-warning);
   }
 
   .--variant_error {
-    --banner_bg: rgb(from var(--color_error) r g b / 12%);
-    --banner_text: var(--color_on-bg);
-    --banner_border: var(--color_error);
+    --banner_bg: rgb(from var(--bds-error) r g b / 12%);
+    --banner_text: var(--bds-on-bg);
+    --banner_border: var(--bds-error);
   }
 
   .content {
@@ -53,8 +53,12 @@
     cursor: pointer;
     color: currentcolor;
     border-radius: 50%;
-    border: 1px solid currentcolor;
-    transition: var(--animation_transition);
+    border: var(--banner_dismiss-border, none);
+    transition: var(--bds-animation_transition);
+    --bdc_color: currentcolor;
+
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
   }
 
   .dismiss svg {
@@ -63,8 +67,8 @@
   }
 
   .dismiss:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 
   @media (hover: hover) and (pointer: fine) {

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

@@ -7,7 +7,7 @@
   .list {
     display: flex;
     align-items: center;
-    gap: var(--space_xxs);
+    gap: var(--bds-space_xxs);
     list-style: none;
     margin: 0;
     padding: 0;
@@ -20,16 +20,21 @@
     justify-content: center;
     min-width: 2.25rem;
     height: 2.25rem;
-    padding-inline: var(--space_xs);
-    border-radius: var(--border_radius--xs);
-    border: 1px solid var(--btn_border, var(--color_bg--subtle));
+    padding-inline: var(--bds-space_xs);
+    border-radius: var(--bds-border_radius--xs);
     background-color: var(--btn_bg, transparent);
-    color: var(--btn_color, var(--color_on-bg));
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
+
+    --bdc_color: var(--btn_border, var(--bds-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));
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
     font-variant-numeric: tabular-nums;
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
 
@@ -39,21 +44,21 @@
   }
 
   .button:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .button:not(:disabled, .--active):hover {
-      --btn_bg:    var(--color_bg--subtle);
-      --btn_color: var(--color_interactive);
+      --btn_bg:    var(--bds-bg--subtle);
+      --btn_color: var(--bds-interactive);
     }
   }
 
   .button.--active {
-    --btn_bg:     var(--color_interactive);
-    --btn_color:  var(--color_on-interactive);
-    --btn_border: var(--color_interactive);
+    --btn_bg:     var(--bds-interactive);
+    --btn_color:  var(--bds-on-interactive);
+    --btn_border: var(--bds-interactive);
   }
 
   .button.--nav svg {
@@ -67,8 +72,8 @@
     justify-content: center;
     min-width: 2.25rem;
     height: 2.25rem;
-    color: var(--color_on-bg--subtle);
-    font-size: var(--font_size--body);
+    color: var(--bds-on-bg--subtle);
+    font-size: var(--bds-font_size--body);
     user-select: none;
   }
 }

package/src/components/ui/Progress/Progress.mdx

@@ -40,7 +40,7 @@ Horizontal progress bar communicating completion towards a goal.
 <tr><th>Variable</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--progress_color-active`</td><td>Filled track colour (defaults to `var(--color_active)`)</td></tr>
+<tr><td>`--progress_color-active`</td><td>Filled track colour (defaults to `var(--bds-active)`)</td></tr>
 <tr><td>`--progress_color-track`</td><td>Empty track colour</td></tr>
 </tbody>
 </table>

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

@@ -2,7 +2,7 @@
   .container {
     display: flex;
     flex-direction: column;
-    gap: var(--space_xxs);
+    gap: var(--bds-space_xxs);
     width: 100%;
   }
 
@@ -10,8 +10,8 @@
     display: flex;
     justify-content: space-between;
     align-items: baseline;
-    font-size: var(--font_size--body--s);
-    color: var(--color_on-bg);
+    font-size: var(--bds-font_size--body--s);
+    color: var(--bds-on-bg);
   }
 
   .value {
@@ -20,21 +20,21 @@
 
   .track {
     width: 100%;
-    height: var(--progress_height, var(--space_xs));
-    background-color: var(--color_bg--subtle);
+    height: var(--progress_height, var(--bds-space_xs));
+    background-color: var(--bds-bg--subtle);
     border-radius: 999px;
     overflow: hidden;
   }
 
-  .track.--size_small  { --progress_height: var(--space_xxs); }
-  .track.--size_medium { --progress_height: var(--space_xs); }
-  .track.--size_large  { --progress_height: var(--space_s); }
+  .track.--size_small  { --progress_height: var(--bds-space_xxs); }
+  .track.--size_medium { --progress_height: var(--bds-space_xs); }
+  .track.--size_large  { --progress_height: var(--bds-space_s); }
 
   .fill {
     height: 100%;
-    background-color: var(--progress_color-active, var(--color_active));
+    background-color: var(--progress_color-active, var(--bds-active));
     border-radius: 999px;
-    transition: width var(--animation_transition-duration) var(--animation_easing);
+    transition: width var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   @media (prefers-reduced-motion: reduce) {

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

@@ -11,26 +11,26 @@
   }
 
   .track {
-    stroke: var(--color_bg--subtle);
+    stroke: var(--bds-bg--subtle);
   }
 
   .fill {
-    stroke: var(--progressCircle_color-active, var(--color_active));
-    transition: stroke-dashoffset var(--animation_transition-duration) var(--animation_easing);
+    stroke: var(--progressCircle_color-active, var(--bds-active));
+    transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   .value {
     position: absolute;
-    font-size: var(--font_size--body--s);
-    font-weight: var(--font_weight--semibold);
+    font-size: var(--bds-font_size--body--s);
+    font-weight: var(--bds-font_weight--semibold);
     font-variant-numeric: tabular-nums;
-    color: var(--color_on-bg);
+    color: var(--bds-on-bg);
     line-height: 1;
   }
 
   .--size_small .value  { font-size: 0.5rem; }
-  .--size_medium .value { font-size: var(--font_size--body--s); }
-  .--size_large .value  { font-size: var(--font_size--body); }
+  .--size_medium .value { font-size: var(--bds-font_size--body--s); }
+  .--size_large .value  { font-size: var(--bds-font_size--body); }
 
   @media (prefers-reduced-motion: reduce) {
     .fill {

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

@@ -1,7 +1,7 @@
 @layer component {
   .separator {
     border: none;
-    background-color: var(--separator_color, var(--color_on-bg));
+    background-color: var(--separator_color, var(--bds-on-bg));
   }
 
   .separator.--horizontal {

package/src/components/ui/Separator/Separator.tsx

@@ -17,5 +17,5 @@ export function Separator({ orientation = 'horizontal', className }: Readonly<Se
     );
   }
 
-  return <hr className={cn(css.separator, css['--horizontal'], className)} />;
+  return <hr aria-orientation="horizontal" className={cn(css.separator, css['--horizontal'], className)} />;
 }

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

@@ -2,14 +2,14 @@
   .skeleton {
     background: linear-gradient(
       90deg,
-      var(--color_grey--subtle) 25%,
-      var(--color_bg) 50%,
-      var(--color_grey--subtle) 75%
+      var(--bds-grey--subtle) 25%,
+      var(--bds-bg) 50%,
+      var(--bds-grey--subtle) 75%
     );
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
-    border-radius: var(--border_radius--xs);
-    min-height: var(--space_m);
+    border-radius: var(--bds-border_radius--xs);
+    min-height: var(--bds-space_m);
   }
 }
 

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

@@ -1,25 +1,30 @@
 @layer component {
   .skipLink {
     position: absolute;
-    inset-block-start: var(--space_s);
-    inset-inline-start: var(--space_s);
+    inset-block-start: var(--bds-space_s);
+    inset-inline-start: var(--bds-space_s);
     z-index: var(--z_overlay);
-    padding: var(--space_xs) var(--space_m);
-    background-color: var(--color_bg);
-    color: var(--color_on-bg);
-    font-size: var(--font_size--body);
-    font-weight: var(--font_weight--semibold);
-    border-radius: var(--border_radius--s);
-    border: 2px solid var(--color_focus);
+    padding: var(--bds-space_xs) var(--bds-space_m);
+    background-color: var(--bds-bg);
+    color: var(--bds-on-bg);
+    font-size: var(--bds-font_size--body);
+    font-weight: var(--bds-font_weight--semibold);
+    border-radius: var(--bds-border_radius--s);
     text-decoration: none;
+
+    --bdc_color: var(--color_focus, var(--bds-interactive));
+
+    border: var(--skip-link_border, none);
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
     transform: translateY(-200%);
-    transition: transform var(--animation_transition-duration) var(--animation_easing);
+    transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   .skipLink:focus-visible {
     transform: translateY(0);
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 
   @media (prefers-reduced-motion: reduce) {