@qld-gov-au/qgds-bootstrap5 2.0.5 → 2.0.7

package/src/css/qld-tokens-legacy.scss

@@ -0,0 +1,94 @@
+// Static copy of Masterbrand color tokens V1.0
+// Original generated on Thu, 13 Jun 2024 02:52:12 GMT
+
+$core-default-color-neutral-black: #131212 !default;
+$core-default-color-neutral-darkest: #222020 !default;
+$core-default-color-neutral-darker: #444444 !default;
+$core-default-color-neutral-dark: #78797e !default;
+$core-default-color-neutral-light: #e0e0e0 !default;
+$core-default-color-neutral-lighter: #ebebeb !default;
+$core-default-color-neutral-lightest: #f5f5f5 !default;
+$core-default-color-neutral-white: #ffffff !default;
+$core-default-color-status-caution-default: #ffcc2c !default;
+$core-default-color-status-caution-darker: #b38800 !default;
+$core-default-color-status-caution-lighter: #fff2c9 !default;
+$core-default-color-status-caution-lightest: #fffaea !default;
+$core-default-color-status-info-default: #0085b3 !default;
+$core-default-color-status-info-darker: #006a8f !default;
+$core-default-color-status-info-lighter: #e5eef5 !default;
+$core-default-color-status-info-lightest: #eff4f9 !default;
+$core-default-color-status-error-default: #e22339 !default;
+$core-default-color-status-error-darker: #8a1220 !default;
+$core-default-color-status-error-lighter: #fdf0f0 !default;
+$core-default-color-status-error-lightest: #fff6f6 !default;
+$core-default-color-status-success-default: #339d37 !default;
+$core-default-color-status-success-darker: #0a690d !default;
+$core-default-color-status-success-lighter: #f2faf4 !default;
+$core-default-color-status-success-lightest: #f7fbf8 !default;
+$core-default-color-status-underline-light: #ffffffb8 !default;
+$core-default-color-status-underline-dark: #03213fb8 !default;
+$core-default-color-brand-primary-dark-blue: #05325f !default;
+$core-default-color-brand-primary-sapphire-blue: #09549f !default;
+$core-default-color-brand-primary-light-blue: #0085b3 !default;
+$core-default-color-brand-primary-light-green: #6bbe27 !default;
+$core-default-color-brand-secondary-darkgreen: #008635 !default;
+$core-default-color-brand-secondary-golden-yellow: #ffe500 !default;
+$core-default-color-brand-other-modern-maroon: #a70240 !default;
+$core-default-color-brand-other-gov-maroon: #771e32 !default;
+$core-default-color-code-green: #6bbe27 !default;
+$core-default-color-code-light-blue: #a7e5ff !default;
+$core-default-color-code-violet: #c88df7 !default;
+$core-default-color-code-muted: #c0d7ec !default;
+$core-default-color-contained-layout-background: #09549f !default;
+$core-default-color-contained-layout-background-dark: #09549f !default;
+$color-default-color-light-background-default: #ffffff !default;
+$color-default-color-light-background-default-shade: #f5f5f5 !default;
+$color-default-color-light-background-light: #eff4f9 !default;
+$color-default-color-light-background-light-shade: #e5eef5 !default;
+$color-default-color-light-background-alt: #e8e8e8 !default;
+$color-default-color-light-background-alt-shade: #e0e0e0 !default;
+$color-default-color-light-border-default: #ebebeb !default;
+$color-default-color-light-border-light: #ccddee !default;
+$color-default-color-light-border-alt: #7a7a7a !default;
+$color-default-color-light-action-primary: #09549f !default;
+$color-default-color-light-action-primary-hover: #003e7d !default;
+$color-default-color-light-action-secondary: #008635 !default;
+$color-default-color-light-action-secondary-hover: #005b23 !default;
+$color-default-color-light-link-on-action: #ffffff !default;
+$color-default-color-light-link-default: #09549f !default;
+$color-default-color-light-link-visited: #551a8b !default;
+$color-default-color-light-accent-design-accent: #6bbe27 !default;
+$color-default-color-light-focus-default: #0085b3 !default;
+$color-default-color-light-underline-default: #3f7ab4 !default;
+$color-default-color-light-underline-default-hover: #09549f !default;
+$color-default-color-light-underline-visited: #8b63b0 !default;
+$color-default-color-light-underline-visited-hover: #551a8b !default;
+$color-default-color-light-text-default: #414141 !default;
+$color-default-color-light-text-lighter: #636363 !default;
+$color-default-color-light-text-heading: #04284c !default;
+$color-default-color-light-site-title: #022a50 !default;
+$color-default-color-light-crest-fill: #1d1d1d !default;
+$color-default-color-dark-background-default: #09549f !default;
+$color-default-color-dark-background-default-shade: #04498f !default;
+$color-default-color-dark-background-alt: #05325f !default;
+$color-default-color-dark-background-alt-shade: #052c53 !default;
+$color-default-color-dark-border-default: #1d9ac6 !default;
+$color-default-color-dark-border-alt: #09acfe !default;
+$color-default-color-dark-action-primary: #78ba00 !default;
+$color-default-color-dark-action-primary-hover: #add33f !default;
+$color-default-color-dark-action-secondary: #ffe500 !default;
+$color-default-color-dark-action-secondary-hover: #ffef60 !default;
+$color-default-color-dark-link-default: #ffffff !default;
+$color-default-color-dark-link-visited: #e1bbee !default;
+$color-default-color-dark-link-on-action: #121940 !default;
+$color-default-color-dark-accent-design-accent: #6bbe27 !default;
+$color-default-color-dark-focus-default: #01b0e5 !default;
+$color-default-color-dark-underline-default: #b5cce2 !default;
+$color-default-color-dark-underline-default-hover: #ffffff !default;
+$color-default-color-dark-underline-visited: #e1c2ff !default;
+$color-default-color-dark-underline-visited-hover: #ee11bb !default;
+$color-default-color-dark-text-default: #ffffff !default;
+$color-default-color-dark-text-lighter: #deebf9 !default;
+$color-default-color-dark-text-heading: #ffffff !default;
+$color-default-color-dark-site-title: #ffffff !default;
+$color-default-color-dark-crest-fill: #ffffff !default;

package/src/css/qld-tokens.scss

@@ -1,95 +1,110 @@
+/* Master brand SASS variables that have changed to align with Brand Book release 2025 */
 
-// Do not edit directly
-// Generated on Thu, 13 Jun 2024 02:52:12 GMT
+/* Dark palettes */
+$color-default-color-dark-accent-design-accent: #84d3ff !default;
+$color-default-color-dark-action-primary-hover: #a6f7ff !default;
+$color-default-color-dark-action-primary: #84d3ff !default;
+$color-default-color-dark-action-secondary-hover: #a6f7ff !default;
+$color-default-color-dark-action-secondary: #84d3ff !default;
+$color-default-color-dark-background-alt-shade: #000764 !default;
+$color-default-color-dark-background-alt: #001d74 !default;
+$color-default-color-dark-background-default-shade: #003e96 !default;
+$color-default-color-dark-background-default: #005eb8 !default;
+$color-default-color-dark-border-alt: #63b1ff !default;
+$color-default-color-dark-border-default: #418fed !default;
+$color-default-color-dark-crest-fill: #ffffff !default;
+$color-default-color-dark-focus-default: #c6ffff !default;
+$color-default-color-dark-link-default: #ffffff !default;
+$color-default-color-dark-link-on-action: #001c37 !default;
+$color-default-color-dark-link-visited: #e1bbee !default;
+$color-default-color-dark-site-title: #ffffff !default;
+$color-default-color-dark-text-default: #ffffff !default;
+$color-default-color-dark-text-heading: #ffffff !default;
+$color-default-color-dark-text-lighter: #deebf9 !default;
+$color-default-color-dark-underline-default-hover: #ffffff !default;
+$color-default-color-dark-underline-default: #b5cce2 !default;
+$color-default-color-dark-underline-visited-hover: #e1bbee !default;
+$color-default-color-dark-underline-visited: #e1c2ff !default;
+
+/* Light palettes */
+$color-default-color-light-accent-design-accent: #84d3ff !default;
+$color-default-color-light-action-primary-hover: #003e96 !default;
+$color-default-color-light-action-primary: #005eb8 !default;
+$color-default-color-light-action-secondary-hover: #004ea7 !default;
+$color-default-color-light-action-secondary: #307edb !default;
+$color-default-color-light-background-alt-shade: #d6dce0 !default;
+$color-default-color-light-background-alt: #e3e7ea !default;
+$color-default-color-light-background-default-shade: #f5f5f5 !default;
+$color-default-color-light-background-default: #ffffff !default;
+$color-default-color-light-background-light-shade: #ceedff !default;
+$color-default-color-light-background-light: #e6f6ff !default;
+$color-default-color-light-border-alt: #848484 !default;
+$color-default-color-light-border-default: #ebebeb !default;
+$color-default-color-light-border-light: #bedfff !default;
+$color-default-color-light-crest-fill: #005eb8 !default;
+$color-default-color-light-focus-default: #002e85 !default;
+$color-default-color-light-link-default: #005eb8 !default;
+$color-default-color-light-link-on-action: #ffffff !default;
+$color-default-color-light-link-visited: #551a8b !default;
+$color-default-color-light-site-title: #005eb8 !default;
+$color-default-color-light-text-default: #353535 !default;
+$color-default-color-light-text-heading: #000053 !default;
+$color-default-color-light-text-lighter: #636363 !default;
+$color-default-color-light-underline-default-hover: #005eb8 !default;
+$color-default-color-light-underline-default: #3f7ab4 !default;
+$color-default-color-light-underline-visited-hover: #551a8b !default;
+$color-default-color-light-underline-visited: #8b63b0 !default;
 
+/* V1 brand colors */
+$core-default-color-brand-other-gov-maroon: #771e32 !default;
+$core-default-color-brand-other-modern-maroon: #a70240 !default;
+$core-default-color-brand-primary-dark-blue: #05325f !default;
+$core-default-color-brand-primary-light-blue: #0085b3 !default;
+$core-default-color-brand-primary-light-green: #6bbe27 !default;
+$core-default-color-brand-primary-sapphire-blue: #09549f !default;
+$core-default-color-brand-secondary-darkgreen: #008635 !default;
+$core-default-color-brand-secondary-golden-yellow: #ffe500 !default;
+
+/* Code colors */
+$core-default-color-code-green: #6bbe27 !default;
+$core-default-color-code-light-blue: #a7e5ff !default;
+$core-default-color-code-muted: #c0d7ec !default;
+$core-default-color-code-violet: #c88df7 !default;
+
+/* Neutral colors */
 $core-default-color-neutral-black: #131212 !default;
-$core-default-color-neutral-darkest: #222020 !default;
-$core-default-color-neutral-darker: #444444 !default;
 $core-default-color-neutral-dark: #78797e !default;
+$core-default-color-neutral-darker: #444444 !default;
+$core-default-color-neutral-darkest: #222020 !default;
 $core-default-color-neutral-light: #e0e0e0 !default;
 $core-default-color-neutral-lighter: #ebebeb !default;
 $core-default-color-neutral-lightest: #f5f5f5 !default;
 $core-default-color-neutral-white: #ffffff !default;
+
+/* Status colors */
+$core-default-color-status-caution-darker: #b38800 !default;
 $core-default-color-status-caution-default: #ffcc2c !default;
-$core-default-color-status-caution-darker: #B38800 !default;
 $core-default-color-status-caution-lighter: #fff2c9 !default;
 $core-default-color-status-caution-lightest: #fffaea !default;
-$core-default-color-status-info-default: #0085b3 !default;
-$core-default-color-status-info-darker: #006a8f !default;
-$core-default-color-status-info-lighter: #e5eef5 !default;
-$core-default-color-status-info-lightest: #eff4f9 !default;
-$core-default-color-status-error-default: #e22339 !default;
 $core-default-color-status-error-darker: #8a1220 !default;
+$core-default-color-status-error-default: #e22339 !default;
 $core-default-color-status-error-lighter: #fdf0f0 !default;
 $core-default-color-status-error-lightest: #fff6f6 !default;
-$core-default-color-status-success-default: #339d37 !default;
+$core-default-color-status-info-darker: #006a8f !default;
+$core-default-color-status-info-default: #0085b3 !default;
+$core-default-color-status-info-lighter: #e5eef5 !default;
+$core-default-color-status-info-lightest: #eff4f9 !default;
 $core-default-color-status-success-darker: #0a690d !default;
+$core-default-color-status-success-default: #339d37 !default;
 $core-default-color-status-success-lighter: #f2faf4 !default;
 $core-default-color-status-success-lightest: #f7fbf8 !default;
-$core-default-color-status-underline-light: #ffffffb8 !default;
 $core-default-color-status-underline-dark: #03213fb8 !default;
-$core-default-color-brand-primary-dark-blue: #05325f !default;
-$core-default-color-brand-primary-sapphire-blue: #09549f !default;
-$core-default-color-brand-primary-light-blue: #0085b3 !default;
-$core-default-color-brand-primary-light-green: #6bbe27 !default;
-$core-default-color-brand-secondary-darkgreen: #008635 !default;
-$core-default-color-brand-secondary-golden-yellow: #ffe500 !default;
-$core-default-color-brand-other-modern-maroon: #a70240 !default;
-$core-default-color-brand-other-gov-maroon: #771e32 !default;
-$core-default-color-code-green: #6bbe27 !default;
-$core-default-color-code-light-blue: #a7e5ff !default;
-$core-default-color-code-violet: #c88df7 !default;
-$core-default-color-code-muted: #c0d7ec !default;
-$core-default-color-contained-layout-background: #09549F !default;
-$core-default-color-contained-layout-background-dark: #09549F !default;
-$color-default-color-light-background-default: #ffffff !default;
-$color-default-color-light-background-default-shade: #f5f5f5 !default;
-$color-default-color-light-background-light: #eff4f9 !default;
-$color-default-color-light-background-light-shade: #e5eef5 !default;
-$color-default-color-light-background-alt: #e8e8e8 !default;
-$color-default-color-light-background-alt-shade: #e0e0e0 !default;
-$color-default-color-light-border-default: #ebebeb !default;
-$color-default-color-light-border-light: #ccddee !default;
-$color-default-color-light-border-alt: #7a7a7a !default;
-$color-default-color-light-action-primary: #09549f !default;
-$color-default-color-light-action-primary-hover: #003e7d !default;
-$color-default-color-light-action-secondary: #008635 !default;
-$color-default-color-light-action-secondary-hover: #005b23 !default;
-$color-default-color-light-link-on-action: #ffffff !default;
-$color-default-color-light-link-default: #09549f !default;
-$color-default-color-light-link-visited: #551a8b !default;
-$color-default-color-light-accent-design-accent: #6BBE27 !default;
-$color-default-color-light-focus-default: #0085B3 !default;
-$color-default-color-light-underline-default: #3f7ab4 !default;
-$color-default-color-light-underline-default-hover: #09549F !default;
-$color-default-color-light-underline-visited: #8b63b0 !default;
-$color-default-color-light-underline-visited-hover: #551a8b !default;
-$color-default-color-light-text-default: #414141 !default;
-$color-default-color-light-text-lighter: #636363 !default;
-$color-default-color-light-text-heading: #04284c !default;
-$color-default-color-light-site-title: #022a50 !default;
-$color-default-color-light-crest-fill: #1D1D1D !default;
-$color-default-color-dark-background-default: #09549F !default;
-$color-default-color-dark-background-default-shade: #04498f !default;
-$color-default-color-dark-background-alt: #05325F !default;
-$color-default-color-dark-background-alt-shade: #052c53 !default;
-$color-default-color-dark-border-default: #1d9ac6 !default;
-$color-default-color-dark-border-alt: #09acfe !default;
-$color-default-color-dark-action-primary: #78ba00 !default;
-$color-default-color-dark-action-primary-hover: #add33f !default;
-$color-default-color-dark-action-secondary: #FFE500 !default;
-$color-default-color-dark-action-secondary-hover: #ffef60 !default;
-$color-default-color-dark-link-default: #ffffff !default;
-$color-default-color-dark-link-visited: #e1bbee !default;
-$color-default-color-dark-link-on-action: #121940 !default;
-$color-default-color-dark-accent-design-accent: #6BBE27 !default;
-$color-default-color-dark-focus-default: #01b0e5 !default;
-$color-default-color-dark-underline-default: #b5cce2 !default;
-$color-default-color-dark-underline-default-hover: #ffffff !default;
-$color-default-color-dark-underline-visited: #e1c2ff !default;
-$color-default-color-dark-underline-visited-hover: #EE11BB !default;
-$color-default-color-dark-text-default: #ffffff !default;
-$color-default-color-dark-text-lighter: #deebf9 !default;
-$color-default-color-dark-text-heading: #ffffff !default;
-$color-default-color-dark-site-title: #ffffff !default;
-$color-default-color-dark-crest-fill: #ffffff !default;
+$core-default-color-status-underline-light: #ffffffb8 !default;
+
+/* Other for review */
+$core-default-color-contained-layout-background-dark: #09549f !default;
+$core-default-color-contained-layout-background: #09549f !default;
+$core-default-color-contained-layout-background-dark: #005eb8 !default;
+$core-default-color-contained-layout-background: #005eb8 !default;
+$core-default-color-status-underline-dark: #03213f !default;
+$core-default-color-status-underline-light: #ffffff !default;

package/src/css/qld-variables.scss

@@ -1,14 +1,7 @@
 @use "sass:meta";
 @use "mixins" as m;
 
-// GLOBALLY SCOPED VARIABLES
-// These variables are available to the full project and all components. (This file is included at the top of main.css to ensure this)
-
-// These variables include new $variables for the project, or replace existing out-of-the-box bootstrap variables defined under /node_modules/bootstrap/.../_variables.css,
-
-//QGDS tokens - masterbrand
-@use "./qld-tokens.scss";
-@import "./qld-tokens.scss";
+// GLOBALLY SCOPED VARIABLES defined via qld-tokens.scss sass map, imported at top of main.scss
 
 //QLD Names Colours
 $qld-dark-blue: $core-default-color-brand-primary-dark-blue;
@@ -58,12 +51,20 @@ $qld-light-yellow: $core-default-color-status-caution-lightest;
 $qld-button-dark-blue: $color-default-color-light-action-primary-hover;
 
 //QGOV Brand Mapping - QLD.GOV.AU
-$qld-brand-primary-dark: $qld-dark-blue;
-$qld-brand-primary: $qld-sapphire-blue;
-$qld-brand-primary-light: $qld-light-blue;
-$qld-brand-secondary-dark: $qld-dark-green;
-$qld-brand-secondary: $qld-light-green;
-$qld-brand-accent: $qld-golden-yellow;
+// $qld-brand-primary-dark: $qld-dark-blue;
+// $qld-brand-primary: $qld-sapphire-blue;
+// $qld-brand-primary-light: $qld-light-blue;
+// $qld-brand-secondary-dark: $qld-dark-green;
+// $qld-brand-secondary: $qld-light-green;
+// $qld-brand-accent: $qld-golden-yellow;
+
+// Remapped legacy brand color values to align with correct UI Kit variables
+$qld-brand-primary: $color-default-color-light-action-primary;
+$qld-brand-primary-light: $color-default-color-light-action-primary;
+$qld-brand-primary-dark: $color-default-color-dark-action-primary;
+$qld-brand-secondary: $color-default-color-light-action-secondary;
+$qld-brand-secondary-dark: $color-default-color-dark-action-secondary;
+$qld-brand-accent: $color-default-color-light-accent-design-accent;
 
 // Resolves @qgds-tokens V1 gap between (_variables.scss and _map.scss).
 // Nuetrals were dropped from _variables.scss, but retained in _map.scss.
@@ -81,8 +82,12 @@ $qld-system-darkest: $core-default-color-neutral-darkest;
 $qld-dark-grey: $core-default-color-neutral-darker;
 $qld-medium-grey: $core-default-color-neutral-dark;
 $qld-alt-grey: $core-default-color-neutral-light;
+
+//Links
 $qld-light-link: $color-default-color-light-link-default;
 $qld-dark-link: $color-default-color-dark-link-default;
+$qld-light-link-on-action: $color-default-color-light-link-on-action;
+$qld-dark-link-on-action: $color-default-color-dark-link-on-action;
 
 //Should be core color rather than second hand reference (no match)
 $qld-soft-grey: $color-default-color-light-border-alt; //todo, replace soft-greys across the system with the below color
@@ -91,7 +96,7 @@ $qld-dark-grey-muted: $color-default-color-light-text-lighter;
 $qld-text-grey: $color-default-color-light-text-default;
 $qld-hint-text-color: $color-default-color-light-text-lighter;
 $qld-hint-text-color-muted: $color-default-color-dark-text-lighter;
-$qld-color-dark-button-hover: $core-default-color-brand-primary-light-green;
+
 $qld-text-headings: $color-default-color-light-text-heading;
 $qld-grey: $core-default-color-neutral-light;
 $qld-light-grey: $core-default-color-neutral-lighter;
@@ -122,19 +127,19 @@ $qld-color-light-background--shade: $color-default-color-light-background-light-
 $qld-color-light-alt-background: $color-default-color-light-background-alt;
 $qld-color-light-alt-background--shade: $color-default-color-light-background-alt-shade;
 
-$qld-color-dark-background: $core-default-color-brand-primary-sapphire-blue;
+$qld-color-dark-background: $color-default-color-dark-background-default;
 $qld-color-dark-background--shade: $color-default-color-dark-background-default-shade;
-$qld-color-dark-alt-background: $core-default-color-brand-primary-dark-blue;
+$qld-color-dark-alt-background: $color-default-color-dark-background-alt;
 $qld-color-dark-alt-background--shade: $color-default-color-dark-background-alt-shade;
 
-$qld-light-action-primary: $qld-sapphire-blue;
+$qld-light-action-primary: $color-default-color-light-action-primary;
 $qld-light-action-primary-hover: $color-default-color-light-action-primary-hover;
 $qld-light-action-secondary: $color-default-color-light-action-secondary;
 $qld-light-action-secondary-hover: $color-default-color-light-action-secondary-hover;
 
 $qld-dark-action-primary: $color-default-color-dark-action-primary;
 $qld-dark-action-primary-hover: $color-default-color-dark-action-primary-hover;
-$qld-dark-action-secondary: $core-default-color-brand-secondary-golden-yellow;
+$qld-dark-action-secondary: $color-default-color-dark-action-secondary;
 $qld-dark-action-secondary-hover: $color-default-color-dark-action-secondary-hover;
 $qld-dark-action-text: $color-default-color-dark-link-on-action;
 
@@ -229,6 +234,8 @@ $project-colors: (
   //Links
   "light-link": $color-default-color-light-link-default,
   "dark-link": $color-default-color-dark-link-default,
+  "light-link-on-action": $color-default-color-light-link-on-action,
+  "dark-link-on-action": $color-default-color-dark-link-on-action,
 
   "link-visited": $qld-link-visited,
   "link-visited-dark": $qld-link-visited-dark,
@@ -280,11 +287,19 @@ $project-colors: (
     $color-default-color-dark-underline-default-hover,
 );
 
+// Generate CSS custom properties for qld-tokens & project colours on :root to prevent utility class generation
+:root {
+  @include m.generate-color-vars($qld-tokens);
+  @include m.generate-color-vars($project-colors);
+}
+
+// These variables replace existing out-of-the-box bootstrap variables defined under /node_modules/bootstrap/.../_variables.css`
+
 $project-base-colors: (
   //Legacy color based variables - to review
-  "primary": $qld-sapphire-blue,
-  "primary-dark": $qld-brand-primary-dark,
-  "secondary": $qld-dark-green,
+  "primary": $color-default-color-light-action-primary,
+  "primary-dark": $color-default-color-dark-action-primary,
+  "secondary": $color-default-color-light-action-secondary,
   "success": $qld-notify-success,
   "info": $qld-notify-information,
   "warning": $qld-notify-alert,
@@ -307,14 +322,6 @@ $project-base-colors: (
   "dark-hover": $qld-dark-hover
 );
 
-$qld-tokens: meta.module-variables("qld-tokens");
-
-// Generate CSS custom properties for qld-tokens & project colours on :root to prevent utility class generation
-:root {
-  @include m.generate-color-vars($qld-tokens);
-  @include m.generate-color-vars($project-colors);
-}
-
 $theme-colors: map-merge($theme-colors, $project-base-colors);
 
 // DO NOT override the variables which is predefined in bootstrap;

package/src/stories/Introduction.mdx

@@ -1,4 +1,4 @@
-import { Meta, Markdown } from "@storybook/blocks";
+import { Meta, Markdown } from "@storybook/addon-docs/blocks";
 
 import Readme from "../../README.md?raw"
 

package/vite.config.js

@@ -17,4 +17,21 @@ export default defineConfig({
       },
     },
   ],
+  //https://github.com/twbs/bootstrap/issues/40962 bootstrap 5.x is not ready for sass 1.80, so silence what we can't change (review 2026)
+  css: {
+    preprocessorOptions: {
+      scss: {
+        silenceDeprecations: [
+          'legacy-js-api',
+          'mixed-decls',
+          'color-functions',
+          'global-builtin',
+          'import',
+        ],
+        indentType: 'space',
+        indentWidth: 2,
+        includePaths: ['./node_modules'],
+      },
+    },
+  },
 });

package/.eslintrc.cjs

@@ -1,52 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: [
-    "eslint:recommended",
-    "plugin:json/recommended",
-    "plugin:storybook/recommended",
-  ],
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [".eslintrc.{js,cjs}"],
-      parserOptions: {
-        sourceType: "script",
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-  },
-  plugins: ["@stylistic/js"],
-  rules: {
-    // "@stylistic/js/indent": ["warn", 2],
-    "one-var": 0,
-    "no-tabs": 0,
-    "no-path-concat": 0,
-    "valid-jsdoc": "warn",
-    "spaced-comment": 0,
-    "space-before-blocks": 0,
-    "space-before-function-paren": 0,
-    "comma-dangle": [1, "always-multiline"],
-    "eol-last": 1,
-    "no-mixed-spaces-and-tabs": 0,
-    "no-multi-spaces": [
-      2,
-      {
-        exceptions: {
-          Property: true,
-          VariableDeclarator: true,
-          ImportDeclaration: true,
-          ObjectExpression: true,
-        },
-      },
-    ],
-    "no-warning-comments": 1,
-  },
-};