@boostdev/design-system-components 1.2.5 → 1.2.6

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

@@ -84,7 +84,7 @@
 
     @media (hover: hover) and (pointer: fine) {
         .dismiss:hover {
-            opacity: 0.7;
+            opacity: var(--alert_dismiss-opacity--hover, 0.7);
         }
     }
 }

package/src/components/ui/Calendar/Calendar.mdx

@@ -38,6 +38,11 @@ Date picker calendar grid. Use standalone or as the popover content inside a dat
 <tr><td>`--calendar_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Container corner radius</td></tr>
 <tr><td>`--calendar_shadow`</td><td>`var(--bds-shadow_s)`</td><td>Container box shadow</td></tr>
 <tr><td>`--calendar_today-border`</td><td>`none`</td><td>Border on today's date cell</td></tr>
+<tr><td>`--calendar_navBtn-bg--hover`</td><td>`var(--bds-color_bg--subtle)`</td><td>Month navigation button background on hover</td></tr>
+<tr><td>`--calendar_day-bg--hover`</td><td>`var(--bds-color_bg--subtle)`</td><td>Day cell background on hover</td></tr>
+<tr><td>`--calendar_today-color`</td><td>`var(--bds-color_interactive)`</td><td>Today's date text colour</td></tr>
+<tr><td>`--calendar_day-bg--selected`</td><td>`var(--bds-color_interactive)`</td><td>Selected day background</td></tr>
+<tr><td>`--calendar_day-color--selected`</td><td>`var(--bds-color_on-interactive)`</td><td>Selected day text colour</td></tr>
 </tbody>
 </table>
 

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

@@ -51,7 +51,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .navBtn:hover {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--calendar_navBtn-bg--hover, var(--bds-color_bg--subtle));
     }
   }
 
@@ -95,22 +95,22 @@
 
   @media (hover: hover) and (pointer: fine) {
     .day:not(.disabled, .selected):hover {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--calendar_day-bg--hover, var(--bds-color_bg--subtle));
     }
   }
 
   .today {
     font-weight: var(--bds-font_weight--semibold);
 
-    --bdc_color: var(--bds-color_interactive);
+    --bdc_color: var(--calendar_today-color, var(--bds-color_interactive));
 
     border: var(--calendar_today-border, none);
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
 
   .selected {
-    background-color: var(--bds-color_interactive);
-    color: var(--bds-color_on-interactive);
+    background-color: var(--calendar_day-bg--selected, var(--bds-color_interactive));
+    color: var(--calendar_day-color--selected, var(--bds-color_on-interactive));
     font-weight: var(--bds-font_weight--semibold);
   }
 

package/src/components/ui/Carousel/Carousel.mdx

@@ -24,6 +24,20 @@ Horizontally scrollable slide container with previous/next navigation.
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--carousel_indicator-radius`</td><td>`var(--bds-border_radius--circle)`</td><td>Navigation button border radius</td></tr>
+<tr><td>`--carousel_navBtn-bg--hover`</td><td>`var(--bds-color_bg--subtle)`</td><td>Navigation button background on hover</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Prev/next buttons have `aria-label="Previous"` / `"Next"`

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

@@ -57,7 +57,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .navBtn:hover {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--carousel_navBtn-bg--hover, var(--bds-color_bg--subtle));
     }
   }
 

package/src/components/ui/NotificationBanner/NotificationBanner.mdx

@@ -39,6 +39,24 @@ Full-width banner for page-level system messages. Sits at the top of the page or
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--banner_bg`</td><td>Per variant</td><td>Banner background colour</td></tr>
+<tr><td>`--banner_text`</td><td>Per variant</td><td>Banner text colour</td></tr>
+<tr><td>`--banner_border`</td><td>Per variant</td><td>Banner bottom border colour</td></tr>
+<tr><td>`--banner_dismiss-radius`</td><td>`var(--bds-border_radius--circle)`</td><td>Dismiss button border radius</td></tr>
+<tr><td>`--banner_dismiss-border`</td><td>`none`</td><td>Dismiss button border</td></tr>
+<tr><td>`--banner_dismiss-opacity--hover`</td><td>`0.7`</td><td>Dismiss button opacity on hover</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Uses `role="alert"` for error/warning variants and `role="status"` for info/success

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

@@ -72,7 +72,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .dismiss:hover {
-      opacity: 0.7;
+      opacity: var(--banner_dismiss-opacity--hover, 0.7);
     }
   }
 }

package/src/components/ui/Pagination/Pagination.mdx

@@ -32,6 +32,27 @@ Navigation control for paged data sets. Renders prev/next buttons plus numbered
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--pagination_radius`</td><td>`var(--bds-border_radius--full)`</td><td>Page button border radius</td></tr>
+<tr><td>`--btn_bg`</td><td>`transparent`</td><td>Default button background</td></tr>
+<tr><td>`--btn_color`</td><td>`var(--bds-color_on-bg)`</td><td>Default button text colour</td></tr>
+<tr><td>`--btn_border`</td><td>`var(--bds-color_bg--subtle)`</td><td>Default button border colour</td></tr>
+<tr><td>`--btn_bg--hover`</td><td>`var(--bds-color_bg--subtle)`</td><td>Button background on hover</td></tr>
+<tr><td>`--btn_color--hover`</td><td>`var(--bds-color_interactive_on-bg)`</td><td>Button text colour on hover</td></tr>
+<tr><td>`--btn_bg--active`</td><td>`var(--bds-color_interactive)`</td><td>Active (current page) button background</td></tr>
+<tr><td>`--btn_color--active`</td><td>`var(--bds-color_on-interactive)`</td><td>Active (current page) button text colour</td></tr>
+<tr><td>`--btn_border--active`</td><td>`var(--bds-color_interactive)`</td><td>Active (current page) button border colour</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Wraps in `<nav aria-label="Pagination">`

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

@@ -53,15 +53,15 @@
 
   @media (hover: hover) and (pointer: fine) {
     .button:not(:disabled, .--active):hover {
-      --btn_bg:    var(--bds-color_bg--subtle);
-      --btn_color: var(--bds-color_interactive_on-bg);
+      --btn_bg:    var(--btn_bg--hover, var(--bds-color_bg--subtle));
+      --btn_color: var(--btn_color--hover, var(--bds-color_interactive_on-bg));
     }
   }
 
   .button.--active {
-    --btn_bg:     var(--bds-color_interactive);
-    --btn_color:  var(--bds-color_on-interactive);
-    --btn_border: var(--bds-color_interactive);
+    --btn_bg:     var(--btn_bg--active, var(--bds-color_interactive));
+    --btn_color:  var(--btn_color--active, var(--bds-color_on-interactive));
+    --btn_border: var(--btn_border--active, var(--bds-color_interactive));
   }
 
   .button.--nav svg {

package/src/components/ui/Table/Table.mdx

@@ -40,6 +40,8 @@ Data table with optional sortable columns and caption.
 <tbody>
 <tr><td>`--table_border`</td><td>`none`</td><td>Container border</td></tr>
 <tr><td>`--table_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Container corner radius</td></tr>
+<tr><td>`--table_sortBtn-color--hover`</td><td>`var(--bds-color_on-bg)`</td><td>Sort button text colour on hover</td></tr>
+<tr><td>`--table_row-bg--hover`</td><td>`var(--bds-color_bg--subtle)`</td><td>Table row background on hover</td></tr>
 </tbody>
 </table>
 

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

@@ -65,7 +65,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .sortButton:hover {
-      color: var(--bds-color_on-bg);
+      color: var(--table_sortBtn-color--hover, var(--bds-color_on-bg));
     }
   }
 
@@ -97,7 +97,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .tbody .tr:hover {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--table_row-bg--hover, var(--bds-color_bg--subtle));
     }
   }
 

package/src/components/ui/Tabs/Tabs.mdx

@@ -33,6 +33,23 @@ Organises content into discrete panels accessible via a horizontal tab list.
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--tab_color`</td><td>`var(--bds-color_on-bg)`</td><td>Default tab text colour</td></tr>
+<tr><td>`--tab_border-color`</td><td>`transparent`</td><td>Default tab bottom border colour</td></tr>
+<tr><td>`--tab_color--active`</td><td>`var(--bds-color_interactive_on-bg)`</td><td>Active tab text colour</td></tr>
+<tr><td>`--tab_border-color--active`</td><td>`var(--bds-color_interactive)`</td><td>Active tab bottom border colour</td></tr>
+<tr><td>`--tab_color--hover`</td><td>`var(--bds-color_interactive_on-bg)`</td><td>Tab text colour on hover</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Implements ARIA tabs pattern: `role="tablist"`, `role="tab"`, `role="tabpanel"`

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

@@ -26,8 +26,8 @@
   }
 
   .tab.--active {
-    --tab_color:        var(--bds-color_interactive_on-bg);
-    --tab_border-color: var(--bds-color_interactive);
+    --tab_color:        var(--tab_color--active, var(--bds-color_interactive_on-bg));
+    --tab_border-color: var(--tab_border-color--active, var(--bds-color_interactive));
   }
 
   .tab:disabled {
@@ -43,7 +43,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .tab:not(:disabled, .--active):hover {
-      --tab_color: var(--bds-color_interactive_on-bg);
+      --tab_color: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
     }
   }
 

package/src/css/bdc.css

@@ -68,6 +68,7 @@
     --bdc-outline_width:  1px;
     --bdc-outline_offset: -1px; /* available for consumer use; bdc borders now use inset box-shadow */
     --bdc-outline_radius: var(--bds-border_radius--xs);
+    --bdc-outline_radius--l: 1.5em;
 
     /* Shadow: opt-in; transparent (not 'none') so it's valid in a comma-separated box-shadow list */
     --bdc-outline_shadow: 0 0 0 0 transparent;