@nswds/tokens 3.0.0 → 3.1.0

package/dist/css/breakpoints/global.css

@@ -0,0 +1,7 @@
+:root {
+  --breakpoint-xs: 480px; /** Extra-small breakpoint — large phones and up. */
+  --breakpoint-sm: 768px; /** Small breakpoint — tablets portrait and up. */
+  --breakpoint-md: 992px; /** Medium breakpoint — tablets landscape / small laptops and up. */
+  --breakpoint-lg: 1200px; /** Large breakpoint — desktops and up. */
+  --breakpoint-xl: 1600px; /** Extra-large breakpoint — wide desktops and up. */
+}

package/dist/css/colors/semantic/hex.css

@@ -1,78 +1,78 @@
 :root {
-  --success-50: #eff9ed;
-  --success-100: #e0f3de;
-  --success-150: #d2eccf;
-  --success-200: #c4e5c0;
-  --success-250: #aad6a5;
-  --success-300: #8fc78a;
-  --success-350: #74b76f;
-  --success-400: #58a854;
-  --success-450: #49a146;
-  --success-500: #399936;
-  --success-550: #259224;
-  --success-600: #008a07;
-  --success-650: #007204;
-  --success-700: #005a02;
-  --success-750: #004401;
-  --success-800: #002f00;
-  --success-850: #002200;
-  --success-900: #001600;
-  --success-950: #000b00;
-  --warning-50: #fff3ed;
-  --warning-100: #ffe8de;
-  --warning-150: #ffddcf;
-  --warning-200: #fdd2c0;
-  --warning-250: #f6bda5;
-  --warning-300: #eea88a;
-  --warning-350: #e6936f;
-  --warning-400: #dd7d53;
-  --warning-450: #d87244;
-  --warning-500: #d36734;
-  --warning-550: #ce5c21;
-  --warning-600: #c95000;
-  --warning-650: #a83f03;
-  --warning-700: #882f03;
-  --warning-750: #692001;
-  --warning-800: #4b1200;
-  --warning-850: #390a00;
-  --warning-900: #270400;
-  --warning-950: #170100;
-  --danger-50: #fff0ef;
-  --danger-100: #ffe2e1;
-  --danger-150: #ffd4d4;
-  --danger-200: #fdc6c6;
-  --danger-250: #f4acad;
-  --danger-300: #ea9294;
-  --danger-350: #df787c;
-  --danger-400: #d35d65;
-  --danger-450: #cd4e59;
-  --danger-500: #c63f4e;
-  --danger-550: #bf2c42;
-  --danger-600: #b81237;
-  --danger-650: #990b2a;
-  --danger-700: #7c061f;
-  --danger-750: #5f0214;
-  --danger-800: #44000a;
-  --danger-850: #330005;
-  --danger-900: #230002;
-  --danger-950: #140001;
-  --info-50: #e9eef7;
-  --info-100: #d4ddeb;
-  --info-150: #c0cce0;
-  --info-200: #acbbd5;
-  --info-250: #96a9cc;
-  --info-300: #8098c2;
-  --info-350: #6b86b8;
-  --info-400: #5775ae;
-  --info-450: #4d6ca9;
-  --info-500: #4264a4;
-  --info-550: #385b9e;
-  --info-600: #2e5299;
-  --info-650: #23427f;
-  --info-700: #193366;
-  --info-750: #10254f;
-  --info-800: #071738;
-  --info-850: #040f2a;
-  --info-900: #02071c;
-  --info-950: #00030f;
+  --success-50: #eff9ed; /** Success state — positive outcomes, confirmations, and completed actions. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --success-100: #e0f3de; /** Success state — positive outcomes, confirmations, and completed actions. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --success-150: #d2eccf; /** Success state — positive outcomes, confirmations, and completed actions. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --success-200: #c4e5c0; /** Success state — positive outcomes, confirmations, and completed actions. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --success-250: #aad6a5; /** Success state — positive outcomes, confirmations, and completed actions. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --success-300: #8fc78a; /** Success state — positive outcomes, confirmations, and completed actions. Step 300: light tints. */
+  --success-350: #74b76f; /** Success state — positive outcomes, confirmations, and completed actions. Step 350: light tints. */
+  --success-400: #58a854; /** Success state — positive outcomes, confirmations, and completed actions. Step 400: light tints. */
+  --success-450: #49a146; /** Success state — positive outcomes, confirmations, and completed actions. Step 450: light tints. */
+  --success-500: #399936; /** Success state — positive outcomes, confirmations, and completed actions. Step 500: base colour. */
+  --success-550: #259224; /** Success state — positive outcomes, confirmations, and completed actions. Step 550: shades for borders and icons. */
+  --success-600: #008a07; /** Success state — positive outcomes, confirmations, and completed actions. Step 600: shades for borders and icons. */
+  --success-650: #007204; /** Success state — positive outcomes, confirmations, and completed actions. Step 650: shades for borders and icons. */
+  --success-700: #005a02; /** Success state — positive outcomes, confirmations, and completed actions. Step 700: shades for borders and icons. */
+  --success-750: #004401; /** Success state — positive outcomes, confirmations, and completed actions. Step 750: darkest shades for text and high emphasis. */
+  --success-800: #002f00; /** Success state — positive outcomes, confirmations, and completed actions. Step 800: darkest shades for text and high emphasis. */
+  --success-850: #002200; /** Success state — positive outcomes, confirmations, and completed actions. Step 850: darkest shades for text and high emphasis. */
+  --success-900: #001600; /** Success state — positive outcomes, confirmations, and completed actions. Step 900: darkest shades for text and high emphasis. */
+  --success-950: #000b00; /** Success state — positive outcomes, confirmations, and completed actions. Step 950: darkest shades for text and high emphasis. */
+  --warning-50: #fff3ed; /** Warning state — caution and actions that need attention. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --warning-100: #ffe8de; /** Warning state — caution and actions that need attention. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --warning-150: #ffddcf; /** Warning state — caution and actions that need attention. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --warning-200: #fdd2c0; /** Warning state — caution and actions that need attention. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --warning-250: #f6bda5; /** Warning state — caution and actions that need attention. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --warning-300: #eea88a; /** Warning state — caution and actions that need attention. Step 300: light tints. */
+  --warning-350: #e6936f; /** Warning state — caution and actions that need attention. Step 350: light tints. */
+  --warning-400: #dd7d53; /** Warning state — caution and actions that need attention. Step 400: light tints. */
+  --warning-450: #d87244; /** Warning state — caution and actions that need attention. Step 450: light tints. */
+  --warning-500: #d36734; /** Warning state — caution and actions that need attention. Step 500: base colour. */
+  --warning-550: #ce5c21; /** Warning state — caution and actions that need attention. Step 550: shades for borders and icons. */
+  --warning-600: #c95000; /** Warning state — caution and actions that need attention. Step 600: shades for borders and icons. */
+  --warning-650: #a83f03; /** Warning state — caution and actions that need attention. Step 650: shades for borders and icons. */
+  --warning-700: #882f03; /** Warning state — caution and actions that need attention. Step 700: shades for borders and icons. */
+  --warning-750: #692001; /** Warning state — caution and actions that need attention. Step 750: darkest shades for text and high emphasis. */
+  --warning-800: #4b1200; /** Warning state — caution and actions that need attention. Step 800: darkest shades for text and high emphasis. */
+  --warning-850: #390a00; /** Warning state — caution and actions that need attention. Step 850: darkest shades for text and high emphasis. */
+  --warning-900: #270400; /** Warning state — caution and actions that need attention. Step 900: darkest shades for text and high emphasis. */
+  --warning-950: #170100; /** Warning state — caution and actions that need attention. Step 950: darkest shades for text and high emphasis. */
+  --danger-50: #fff0ef; /** Danger state — errors and destructive or critical actions. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --danger-100: #ffe2e1; /** Danger state — errors and destructive or critical actions. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --danger-150: #ffd4d4; /** Danger state — errors and destructive or critical actions. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --danger-200: #fdc6c6; /** Danger state — errors and destructive or critical actions. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --danger-250: #f4acad; /** Danger state — errors and destructive or critical actions. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --danger-300: #ea9294; /** Danger state — errors and destructive or critical actions. Step 300: light tints. */
+  --danger-350: #df787c; /** Danger state — errors and destructive or critical actions. Step 350: light tints. */
+  --danger-400: #d35d65; /** Danger state — errors and destructive or critical actions. Step 400: light tints. */
+  --danger-450: #cd4e59; /** Danger state — errors and destructive or critical actions. Step 450: light tints. */
+  --danger-500: #c63f4e; /** Danger state — errors and destructive or critical actions. Step 500: base colour. */
+  --danger-550: #bf2c42; /** Danger state — errors and destructive or critical actions. Step 550: shades for borders and icons. */
+  --danger-600: #b81237; /** Danger state — errors and destructive or critical actions. Step 600: shades for borders and icons. */
+  --danger-650: #990b2a; /** Danger state — errors and destructive or critical actions. Step 650: shades for borders and icons. */
+  --danger-700: #7c061f; /** Danger state — errors and destructive or critical actions. Step 700: shades for borders and icons. */
+  --danger-750: #5f0214; /** Danger state — errors and destructive or critical actions. Step 750: darkest shades for text and high emphasis. */
+  --danger-800: #44000a; /** Danger state — errors and destructive or critical actions. Step 800: darkest shades for text and high emphasis. */
+  --danger-850: #330005; /** Danger state — errors and destructive or critical actions. Step 850: darkest shades for text and high emphasis. */
+  --danger-900: #230002; /** Danger state — errors and destructive or critical actions. Step 900: darkest shades for text and high emphasis. */
+  --danger-950: #140001; /** Danger state — errors and destructive or critical actions. Step 950: darkest shades for text and high emphasis. */
+  --info-50: #e9eef7; /** Informational state — neutral highlights, tips, and in-progress notices. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --info-100: #d4ddeb; /** Informational state — neutral highlights, tips, and in-progress notices. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --info-150: #c0cce0; /** Informational state — neutral highlights, tips, and in-progress notices. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --info-200: #acbbd5; /** Informational state — neutral highlights, tips, and in-progress notices. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --info-250: #96a9cc; /** Informational state — neutral highlights, tips, and in-progress notices. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --info-300: #8098c2; /** Informational state — neutral highlights, tips, and in-progress notices. Step 300: light tints. */
+  --info-350: #6b86b8; /** Informational state — neutral highlights, tips, and in-progress notices. Step 350: light tints. */
+  --info-400: #5775ae; /** Informational state — neutral highlights, tips, and in-progress notices. Step 400: light tints. */
+  --info-450: #4d6ca9; /** Informational state — neutral highlights, tips, and in-progress notices. Step 450: light tints. */
+  --info-500: #4264a4; /** Informational state — neutral highlights, tips, and in-progress notices. Step 500: base colour. */
+  --info-550: #385b9e; /** Informational state — neutral highlights, tips, and in-progress notices. Step 550: shades for borders and icons. */
+  --info-600: #2e5299; /** Informational state — neutral highlights, tips, and in-progress notices. Step 600: shades for borders and icons. */
+  --info-650: #23427f; /** Informational state — neutral highlights, tips, and in-progress notices. Step 650: shades for borders and icons. */
+  --info-700: #193366; /** Informational state — neutral highlights, tips, and in-progress notices. Step 700: shades for borders and icons. */
+  --info-750: #10254f; /** Informational state — neutral highlights, tips, and in-progress notices. Step 750: darkest shades for text and high emphasis. */
+  --info-800: #071738; /** Informational state — neutral highlights, tips, and in-progress notices. Step 800: darkest shades for text and high emphasis. */
+  --info-850: #040f2a; /** Informational state — neutral highlights, tips, and in-progress notices. Step 850: darkest shades for text and high emphasis. */
+  --info-900: #02071c; /** Informational state — neutral highlights, tips, and in-progress notices. Step 900: darkest shades for text and high emphasis. */
+  --info-950: #00030f; /** Informational state — neutral highlights, tips, and in-progress notices. Step 950: darkest shades for text and high emphasis. */
 }

package/dist/css/colors/semantic/hsl.css

@@ -1,78 +1,78 @@
 :root {
-  --success-50: hsl(110, 50%, 95.294118%);
-  --success-100: hsl(114.285714, 46.666667%, 91.176471%);
-  --success-150: hsl(113.793103, 43.283582%, 86.862745%);
-  --success-200: hsl(113.513514, 41.573034%, 82.54902%);
-  --success-250: hsl(113.877551, 37.40458%, 74.313725%);
-  --success-300: hsl(115.081967, 35.260116%, 66.078431%);
-  --success-350: hsl(115.833333, 33.333333%, 57.647059%);
-  --success-400: hsl(117.142857, 33.333333%, 49.411765%);
-  --success-450: hsl(118.021978, 39.393939%, 45.294118%);
-  --success-500: hsl(118.181818, 47.826087%, 40.588235%);
-  --success-550: hsl(119.454545, 60.43956%, 35.686275%);
-  --success-600: hsl(123.043478, 100%, 27.058824%);
-  --success-650: hsl(122.105263, 100%, 22.352941%);
-  --success-700: hsl(121.333333, 100%, 17.647059%);
-  --success-750: hsl(120.882353, 100%, 13.333333%);
-  --success-800: hsl(120, 100%, 9.215686%);
-  --success-850: hsl(120, 100%, 6.666667%);
-  --success-900: hsl(120, 100%, 4.313725%);
-  --success-950: hsl(120, 100%, 2.156863%);
-  --warning-50: hsl(20, 100%, 96.470588%);
-  --warning-100: hsl(18.181818, 100%, 93.529412%);
-  --warning-150: hsl(17.5, 100%, 90.588235%);
-  --warning-200: hsl(17.704918, 93.846154%, 87.254902%);
-  --warning-250: hsl(17.777778, 81.818182%, 80.588235%);
-  --warning-300: hsl(18, 74.626866%, 73.72549%);
-  --warning-350: hsl(18.151261, 70.414201%, 66.862745%);
-  --warning-400: hsl(18.26087, 66.990291%, 59.607843%);
-  --warning-450: hsl(18.648649, 65.486726%, 55.686275%);
-  --warning-500: hsl(19.245283, 64.37247%, 51.568627%);
-  --warning-550: hsl(20.462428, 72.384937%, 46.862745%);
-  --warning-600: hsl(23.880597, 100%, 39.411765%);
-  --warning-650: hsl(21.818182, 96.491228%, 33.529412%);
-  --warning-700: hsl(19.849624, 95.683453%, 27.254902%);
-  --warning-750: hsl(17.884615, 98.113208%, 20.784314%);
-  --warning-800: hsl(14.4, 100%, 14.705882%);
-  --warning-850: hsl(10.526316, 100%, 11.176471%);
-  --warning-900: hsl(6.153846, 100%, 7.647059%);
-  --warning-950: hsl(2.608696, 100%, 4.509804%);
-  --danger-50: hsl(3.75, 100%, 96.862745%);
-  --danger-100: hsl(2, 100%, 94.117647%);
-  --danger-150: hsl(0, 100%, 91.568627%);
-  --danger-200: hsl(0, 93.220339%, 88.431373%);
-  --danger-250: hsl(359.166667, 76.595745%, 81.568627%);
-  --danger-300: hsl(358.636364, 67.692308%, 74.509804%);
-  --danger-350: hsl(357.669903, 61.676647%, 67.254902%);
-  --danger-400: hsl(355.932203, 57.281553%, 59.607843%);
-  --danger-450: hsl(354.80315, 55.947137%, 55.490196%);
-  --danger-500: hsl(353.333333, 54.216867%, 51.176471%);
-  --danger-550: hsl(351.020408, 62.553191%, 46.078431%);
-  --danger-600: hsl(346.626506, 82.178218%, 39.607843%);
-  --danger-650: hsl(346.901408, 86.585366%, 32.156863%);
-  --danger-700: hsl(347.288136, 90.769231%, 25.490196%);
-  --danger-750: hsl(348.387097, 95.876289%, 19.019608%);
-  --danger-800: hsl(351.176471, 100%, 13.333333%);
-  --danger-850: hsl(354.117647, 100%, 10%);
-  --danger-900: hsl(356.571429, 100%, 6.862745%);
-  --danger-950: hsl(357, 100%, 3.921569%);
-  --info-50: hsl(218.571429, 46.666667%, 94.117647%);
-  --info-100: hsl(216.521739, 36.507937%, 87.647059%);
-  --info-150: hsl(217.5, 34.042553%, 81.568627%);
-  --info-200: hsl(218.04878, 32.8%, 75.490196%);
-  --info-250: hsl(218.888889, 34.615385%, 69.411765%);
-  --info-300: hsl(218.181818, 35.106383%, 63.137255%);
-  --info-350: hsl(218.961039, 35.159817%, 57.058824%);
-  --info-400: hsl(219.310345, 34.939759%, 51.176471%);
-  --info-450: hsl(219.782609, 37.398374%, 48.235294%);
-  --info-500: hsl(219.183673, 42.608696%, 45.098039%);
-  --info-550: hsl(219.411765, 47.663551%, 41.960784%);
-  --info-600: hsl(219.813084, 53.768844%, 39.019608%);
-  --info-650: hsl(219.782609, 56.790123%, 31.764706%);
-  --info-700: hsl(219.74026, 60.629921%, 24.901961%);
-  --info-750: hsl(220, 66.315789%, 18.627451%);
-  --info-800: hsl(220.408163, 77.777778%, 12.352941%);
-  --info-850: hsl(222.631579, 82.608696%, 9.019608%);
-  --info-900: hsl(228.461538, 86.666667%, 5.882353%);
-  --info-950: hsl(228, 100%, 2.941176%);
+  --success-50: hsl(110, 50%, 95.294118%); /** Success state — positive outcomes, confirmations, and completed actions. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --success-100: hsl(114.285714, 46.666667%, 91.176471%); /** Success state — positive outcomes, confirmations, and completed actions. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --success-150: hsl(113.793103, 43.283582%, 86.862745%); /** Success state — positive outcomes, confirmations, and completed actions. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --success-200: hsl(113.513514, 41.573034%, 82.54902%); /** Success state — positive outcomes, confirmations, and completed actions. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --success-250: hsl(113.877551, 37.40458%, 74.313725%); /** Success state — positive outcomes, confirmations, and completed actions. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --success-300: hsl(115.081967, 35.260116%, 66.078431%); /** Success state — positive outcomes, confirmations, and completed actions. Step 300: light tints. */
+  --success-350: hsl(115.833333, 33.333333%, 57.647059%); /** Success state — positive outcomes, confirmations, and completed actions. Step 350: light tints. */
+  --success-400: hsl(117.142857, 33.333333%, 49.411765%); /** Success state — positive outcomes, confirmations, and completed actions. Step 400: light tints. */
+  --success-450: hsl(118.021978, 39.393939%, 45.294118%); /** Success state — positive outcomes, confirmations, and completed actions. Step 450: light tints. */
+  --success-500: hsl(118.181818, 47.826087%, 40.588235%); /** Success state — positive outcomes, confirmations, and completed actions. Step 500: base colour. */
+  --success-550: hsl(119.454545, 60.43956%, 35.686275%); /** Success state — positive outcomes, confirmations, and completed actions. Step 550: shades for borders and icons. */
+  --success-600: hsl(123.043478, 100%, 27.058824%); /** Success state — positive outcomes, confirmations, and completed actions. Step 600: shades for borders and icons. */
+  --success-650: hsl(122.105263, 100%, 22.352941%); /** Success state — positive outcomes, confirmations, and completed actions. Step 650: shades for borders and icons. */
+  --success-700: hsl(121.333333, 100%, 17.647059%); /** Success state — positive outcomes, confirmations, and completed actions. Step 700: shades for borders and icons. */
+  --success-750: hsl(120.882353, 100%, 13.333333%); /** Success state — positive outcomes, confirmations, and completed actions. Step 750: darkest shades for text and high emphasis. */
+  --success-800: hsl(120, 100%, 9.215686%); /** Success state — positive outcomes, confirmations, and completed actions. Step 800: darkest shades for text and high emphasis. */
+  --success-850: hsl(120, 100%, 6.666667%); /** Success state — positive outcomes, confirmations, and completed actions. Step 850: darkest shades for text and high emphasis. */
+  --success-900: hsl(120, 100%, 4.313725%); /** Success state — positive outcomes, confirmations, and completed actions. Step 900: darkest shades for text and high emphasis. */
+  --success-950: hsl(120, 100%, 2.156863%); /** Success state — positive outcomes, confirmations, and completed actions. Step 950: darkest shades for text and high emphasis. */
+  --warning-50: hsl(20, 100%, 96.470588%); /** Warning state — caution and actions that need attention. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --warning-100: hsl(18.181818, 100%, 93.529412%); /** Warning state — caution and actions that need attention. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --warning-150: hsl(17.5, 100%, 90.588235%); /** Warning state — caution and actions that need attention. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --warning-200: hsl(17.704918, 93.846154%, 87.254902%); /** Warning state — caution and actions that need attention. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --warning-250: hsl(17.777778, 81.818182%, 80.588235%); /** Warning state — caution and actions that need attention. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --warning-300: hsl(18, 74.626866%, 73.72549%); /** Warning state — caution and actions that need attention. Step 300: light tints. */
+  --warning-350: hsl(18.151261, 70.414201%, 66.862745%); /** Warning state — caution and actions that need attention. Step 350: light tints. */
+  --warning-400: hsl(18.26087, 66.990291%, 59.607843%); /** Warning state — caution and actions that need attention. Step 400: light tints. */
+  --warning-450: hsl(18.648649, 65.486726%, 55.686275%); /** Warning state — caution and actions that need attention. Step 450: light tints. */
+  --warning-500: hsl(19.245283, 64.37247%, 51.568627%); /** Warning state — caution and actions that need attention. Step 500: base colour. */
+  --warning-550: hsl(20.462428, 72.384937%, 46.862745%); /** Warning state — caution and actions that need attention. Step 550: shades for borders and icons. */
+  --warning-600: hsl(23.880597, 100%, 39.411765%); /** Warning state — caution and actions that need attention. Step 600: shades for borders and icons. */
+  --warning-650: hsl(21.818182, 96.491228%, 33.529412%); /** Warning state — caution and actions that need attention. Step 650: shades for borders and icons. */
+  --warning-700: hsl(19.849624, 95.683453%, 27.254902%); /** Warning state — caution and actions that need attention. Step 700: shades for borders and icons. */
+  --warning-750: hsl(17.884615, 98.113208%, 20.784314%); /** Warning state — caution and actions that need attention. Step 750: darkest shades for text and high emphasis. */
+  --warning-800: hsl(14.4, 100%, 14.705882%); /** Warning state — caution and actions that need attention. Step 800: darkest shades for text and high emphasis. */
+  --warning-850: hsl(10.526316, 100%, 11.176471%); /** Warning state — caution and actions that need attention. Step 850: darkest shades for text and high emphasis. */
+  --warning-900: hsl(6.153846, 100%, 7.647059%); /** Warning state — caution and actions that need attention. Step 900: darkest shades for text and high emphasis. */
+  --warning-950: hsl(2.608696, 100%, 4.509804%); /** Warning state — caution and actions that need attention. Step 950: darkest shades for text and high emphasis. */
+  --danger-50: hsl(3.75, 100%, 96.862745%); /** Danger state — errors and destructive or critical actions. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --danger-100: hsl(2, 100%, 94.117647%); /** Danger state — errors and destructive or critical actions. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --danger-150: hsl(0, 100%, 91.568627%); /** Danger state — errors and destructive or critical actions. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --danger-200: hsl(0, 93.220339%, 88.431373%); /** Danger state — errors and destructive or critical actions. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --danger-250: hsl(359.166667, 76.595745%, 81.568627%); /** Danger state — errors and destructive or critical actions. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --danger-300: hsl(358.636364, 67.692308%, 74.509804%); /** Danger state — errors and destructive or critical actions. Step 300: light tints. */
+  --danger-350: hsl(357.669903, 61.676647%, 67.254902%); /** Danger state — errors and destructive or critical actions. Step 350: light tints. */
+  --danger-400: hsl(355.932203, 57.281553%, 59.607843%); /** Danger state — errors and destructive or critical actions. Step 400: light tints. */
+  --danger-450: hsl(354.80315, 55.947137%, 55.490196%); /** Danger state — errors and destructive or critical actions. Step 450: light tints. */
+  --danger-500: hsl(353.333333, 54.216867%, 51.176471%); /** Danger state — errors and destructive or critical actions. Step 500: base colour. */
+  --danger-550: hsl(351.020408, 62.553191%, 46.078431%); /** Danger state — errors and destructive or critical actions. Step 550: shades for borders and icons. */
+  --danger-600: hsl(346.626506, 82.178218%, 39.607843%); /** Danger state — errors and destructive or critical actions. Step 600: shades for borders and icons. */
+  --danger-650: hsl(346.901408, 86.585366%, 32.156863%); /** Danger state — errors and destructive or critical actions. Step 650: shades for borders and icons. */
+  --danger-700: hsl(347.288136, 90.769231%, 25.490196%); /** Danger state — errors and destructive or critical actions. Step 700: shades for borders and icons. */
+  --danger-750: hsl(348.387097, 95.876289%, 19.019608%); /** Danger state — errors and destructive or critical actions. Step 750: darkest shades for text and high emphasis. */
+  --danger-800: hsl(351.176471, 100%, 13.333333%); /** Danger state — errors and destructive or critical actions. Step 800: darkest shades for text and high emphasis. */
+  --danger-850: hsl(354.117647, 100%, 10%); /** Danger state — errors and destructive or critical actions. Step 850: darkest shades for text and high emphasis. */
+  --danger-900: hsl(356.571429, 100%, 6.862745%); /** Danger state — errors and destructive or critical actions. Step 900: darkest shades for text and high emphasis. */
+  --danger-950: hsl(357, 100%, 3.921569%); /** Danger state — errors and destructive or critical actions. Step 950: darkest shades for text and high emphasis. */
+  --info-50: hsl(218.571429, 46.666667%, 94.117647%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --info-100: hsl(216.521739, 36.507937%, 87.647059%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --info-150: hsl(217.5, 34.042553%, 81.568627%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --info-200: hsl(218.04878, 32.8%, 75.490196%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --info-250: hsl(218.888889, 34.615385%, 69.411765%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --info-300: hsl(218.181818, 35.106383%, 63.137255%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 300: light tints. */
+  --info-350: hsl(218.961039, 35.159817%, 57.058824%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 350: light tints. */
+  --info-400: hsl(219.310345, 34.939759%, 51.176471%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 400: light tints. */
+  --info-450: hsl(219.782609, 37.398374%, 48.235294%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 450: light tints. */
+  --info-500: hsl(219.183673, 42.608696%, 45.098039%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 500: base colour. */
+  --info-550: hsl(219.411765, 47.663551%, 41.960784%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 550: shades for borders and icons. */
+  --info-600: hsl(219.813084, 53.768844%, 39.019608%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 600: shades for borders and icons. */
+  --info-650: hsl(219.782609, 56.790123%, 31.764706%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 650: shades for borders and icons. */
+  --info-700: hsl(219.74026, 60.629921%, 24.901961%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 700: shades for borders and icons. */
+  --info-750: hsl(220, 66.315789%, 18.627451%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 750: darkest shades for text and high emphasis. */
+  --info-800: hsl(220.408163, 77.777778%, 12.352941%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 800: darkest shades for text and high emphasis. */
+  --info-850: hsl(222.631579, 82.608696%, 9.019608%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 850: darkest shades for text and high emphasis. */
+  --info-900: hsl(228.461538, 86.666667%, 5.882353%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 900: darkest shades for text and high emphasis. */
+  --info-950: hsl(228, 100%, 2.941176%); /** Informational state — neutral highlights, tips, and in-progress notices. Step 950: darkest shades for text and high emphasis. */
 }

package/dist/css/colors/semantic/oklch.css

@@ -1,78 +1,78 @@
 :root {
-  --success-50: oklch(0.97135 0.019006 140.501237);
-  --success-100: oklch(0.944414 0.03435 142.617675);
-  --success-150: oklch(0.916251 0.047557 142.315326);
-  --success-200: oklch(0.888142 0.060884 142.11755);
-  --success-250: oklch(0.831935 0.081627 142.168533);
-  --success-300: oklch(0.775209 0.103098 142.532525);
-  --success-350: oklch(0.716492 0.122642 142.635863);
-  --success-400: oklch(0.660489 0.143002 142.833374);
-  --success-450: oklch(0.633907 0.153727 142.929021);
-  --success-500: oklch(0.604784 0.163709 142.769697);
-  --success-550: oklch(0.57829 0.174808 142.795704);
-  --success-600: oklch(0.549041 0.184944 142.800761);
-  --success-650: oklch(0.478504 0.161407 142.758807);
-  --success-700: oklch(0.40526 0.136911 142.712023);
-  --success-750: oklch(0.335094 0.113301 142.686907);
-  --success-800: oklch(0.26443 0.089979 142.495345);
-  --success-850: oklch(0.218312 0.074286 142.495345);
-  --success-900: oklch(0.173455 0.059022 142.495345);
-  --success-950: oklch(0.1296 0.044099 142.495345);
-  --warning-50: oklch(0.971893 0.01526 48.562489);
-  --warning-100: oklch(0.946835 0.028629 45.030952);
-  --warning-150: oklch(0.922108 0.042396 43.676216);
-  --warning-200: oklch(0.895911 0.054446 43.945452);
-  --warning-250: oklch(0.843843 0.073851 43.908489);
-  --warning-300: oklch(0.791422 0.092884 44.093664);
-  --warning-350: oklch(0.739959 0.112378 44.054533);
-  --warning-400: oklch(0.686894 0.13202 43.712861);
-  --warning-450: oklch(0.660361 0.141466 43.83103);
-  --warning-500: oklch(0.634409 0.150779 43.925238);
-  --warning-550: oklch(0.609132 0.159967 44.109192);
-  --warning-600: oklch(0.58333 0.169705 43.997259);
-  --warning-650: oklch(0.507151 0.15026 42.423427);
-  --warning-700: oklch(0.431173 0.130695 40.89405);
-  --warning-750: oklch(0.354963 0.110993 39.686374);
-  --warning-800: oklch(0.278045 0.090492 38.267541);
-  --warning-850: oklch(0.230061 0.077034 36.983064);
-  --warning-900: oklch(0.18011 0.062518 35.437897);
-  --warning-950: oklch(0.132509 0.049077 32.856899);
-  --danger-50: oklch(0.966669 0.016317 22.079707);
-  --danger-100: oklch(0.936228 0.032074 20.106519);
-  --danger-150: oklch(0.90654 0.04838 18.081137);
-  --danger-200: oklch(0.875232 0.062981 18.428147);
-  --danger-250: oklch(0.813013 0.084945 18.165704);
-  --danger-300: oklch(0.75077 0.106785 18.43901);
-  --danger-350: oklch(0.689178 0.12804 18.526045);
-  --danger-400: oklch(0.62753 0.149171 18.309398);
-  --danger-450: oklch(0.596213 0.160938 18.339163);
-  --danger-500: oklch(0.565284 0.170522 18.2478);
-  --danger-550: oklch(0.532839 0.182017 18.232802);
-  --danger-600: oklch(0.501996 0.192725 18.079135);
-  --danger-650: oklch(0.436904 0.169068 18.82836);
-  --danger-700: oklch(0.374388 0.145685 19.336218);
-  --danger-750: oklch(0.30874 0.121759 19.939515);
-  --danger-800: oklch(0.244464 0.098267 20.667881);
-  --danger-850: oklch(0.202838 0.081665 21.65418);
-  --danger-900: oklch(0.161611 0.065248 23.141473);
-  --danger-950: oklch(0.120777 0.048658 22.023968);
-  --info-50: oklch(0.947933 0.013249 262.378766);
-  --info-100: oklch(0.894885 0.02153 259.191552);
-  --info-150: oklch(0.84226 0.030869 260.704222);
-  --info-200: oklch(0.788988 0.040588 261.491472);
-  --info-250: oklch(0.732279 0.055255 262.600626);
-  --info-300: oklch(0.676764 0.068234 261.470834);
-  --info-350: oklch(0.619287 0.082332 262.339289);
-  --info-400: oklch(0.564226 0.095527 262.52779);
-  --info-450: oklch(0.535493 0.102893 262.922919);
-  --info-500: oklch(0.508435 0.109592 262.050185);
-  --info-550: oklch(0.479149 0.115698 262.137071);
-  --info-600: oklch(0.450622 0.123283 262.351496);
-  --info-650: oklch(0.390336 0.109632 262.276763);
-  --info-700: oklch(0.331327 0.095363 262.195822);
-  --info-750: oklch(0.274244 0.081954 262.38017);
-  --info-800: oklch(0.213923 0.06809 262.409405);
-  --info-850: oklch(0.177247 0.057971 262.994032);
-  --info-900: oklch(0.137795 0.047857 264.580497);
-  --info-950: oklch(0.101112 0.036894 257.665016);
+  --success-50: oklch(0.97135 0.019006 140.501237); /** Success state — positive outcomes, confirmations, and completed actions. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --success-100: oklch(0.944414 0.03435 142.617675); /** Success state — positive outcomes, confirmations, and completed actions. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --success-150: oklch(0.916251 0.047557 142.315326); /** Success state — positive outcomes, confirmations, and completed actions. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --success-200: oklch(0.888142 0.060884 142.11755); /** Success state — positive outcomes, confirmations, and completed actions. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --success-250: oklch(0.831935 0.081627 142.168533); /** Success state — positive outcomes, confirmations, and completed actions. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --success-300: oklch(0.775209 0.103098 142.532525); /** Success state — positive outcomes, confirmations, and completed actions. Step 300: light tints. */
+  --success-350: oklch(0.716492 0.122642 142.635863); /** Success state — positive outcomes, confirmations, and completed actions. Step 350: light tints. */
+  --success-400: oklch(0.660489 0.143002 142.833374); /** Success state — positive outcomes, confirmations, and completed actions. Step 400: light tints. */
+  --success-450: oklch(0.633907 0.153727 142.929021); /** Success state — positive outcomes, confirmations, and completed actions. Step 450: light tints. */
+  --success-500: oklch(0.604784 0.163709 142.769697); /** Success state — positive outcomes, confirmations, and completed actions. Step 500: base colour. */
+  --success-550: oklch(0.57829 0.174808 142.795704); /** Success state — positive outcomes, confirmations, and completed actions. Step 550: shades for borders and icons. */
+  --success-600: oklch(0.549041 0.184944 142.800761); /** Success state — positive outcomes, confirmations, and completed actions. Step 600: shades for borders and icons. */
+  --success-650: oklch(0.478504 0.161407 142.758807); /** Success state — positive outcomes, confirmations, and completed actions. Step 650: shades for borders and icons. */
+  --success-700: oklch(0.40526 0.136911 142.712023); /** Success state — positive outcomes, confirmations, and completed actions. Step 700: shades for borders and icons. */
+  --success-750: oklch(0.335094 0.113301 142.686907); /** Success state — positive outcomes, confirmations, and completed actions. Step 750: darkest shades for text and high emphasis. */
+  --success-800: oklch(0.26443 0.089979 142.495345); /** Success state — positive outcomes, confirmations, and completed actions. Step 800: darkest shades for text and high emphasis. */
+  --success-850: oklch(0.218312 0.074286 142.495345); /** Success state — positive outcomes, confirmations, and completed actions. Step 850: darkest shades for text and high emphasis. */
+  --success-900: oklch(0.173455 0.059022 142.495345); /** Success state — positive outcomes, confirmations, and completed actions. Step 900: darkest shades for text and high emphasis. */
+  --success-950: oklch(0.1296 0.044099 142.495345); /** Success state — positive outcomes, confirmations, and completed actions. Step 950: darkest shades for text and high emphasis. */
+  --warning-50: oklch(0.971893 0.01526 48.562489); /** Warning state — caution and actions that need attention. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --warning-100: oklch(0.946835 0.028629 45.030952); /** Warning state — caution and actions that need attention. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --warning-150: oklch(0.922108 0.042396 43.676216); /** Warning state — caution and actions that need attention. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --warning-200: oklch(0.895911 0.054446 43.945452); /** Warning state — caution and actions that need attention. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --warning-250: oklch(0.843843 0.073851 43.908489); /** Warning state — caution and actions that need attention. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --warning-300: oklch(0.791422 0.092884 44.093664); /** Warning state — caution and actions that need attention. Step 300: light tints. */
+  --warning-350: oklch(0.739959 0.112378 44.054533); /** Warning state — caution and actions that need attention. Step 350: light tints. */
+  --warning-400: oklch(0.686894 0.13202 43.712861); /** Warning state — caution and actions that need attention. Step 400: light tints. */
+  --warning-450: oklch(0.660361 0.141466 43.83103); /** Warning state — caution and actions that need attention. Step 450: light tints. */
+  --warning-500: oklch(0.634409 0.150779 43.925238); /** Warning state — caution and actions that need attention. Step 500: base colour. */
+  --warning-550: oklch(0.609132 0.159967 44.109192); /** Warning state — caution and actions that need attention. Step 550: shades for borders and icons. */
+  --warning-600: oklch(0.58333 0.169705 43.997259); /** Warning state — caution and actions that need attention. Step 600: shades for borders and icons. */
+  --warning-650: oklch(0.507151 0.15026 42.423427); /** Warning state — caution and actions that need attention. Step 650: shades for borders and icons. */
+  --warning-700: oklch(0.431173 0.130695 40.89405); /** Warning state — caution and actions that need attention. Step 700: shades for borders and icons. */
+  --warning-750: oklch(0.354963 0.110993 39.686374); /** Warning state — caution and actions that need attention. Step 750: darkest shades for text and high emphasis. */
+  --warning-800: oklch(0.278045 0.090492 38.267541); /** Warning state — caution and actions that need attention. Step 800: darkest shades for text and high emphasis. */
+  --warning-850: oklch(0.230061 0.077034 36.983064); /** Warning state — caution and actions that need attention. Step 850: darkest shades for text and high emphasis. */
+  --warning-900: oklch(0.18011 0.062518 35.437897); /** Warning state — caution and actions that need attention. Step 900: darkest shades for text and high emphasis. */
+  --warning-950: oklch(0.132509 0.049077 32.856899); /** Warning state — caution and actions that need attention. Step 950: darkest shades for text and high emphasis. */
+  --danger-50: oklch(0.966669 0.016317 22.079707); /** Danger state — errors and destructive or critical actions. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --danger-100: oklch(0.936228 0.032074 20.106519); /** Danger state — errors and destructive or critical actions. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --danger-150: oklch(0.90654 0.04838 18.081137); /** Danger state — errors and destructive or critical actions. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --danger-200: oklch(0.875232 0.062981 18.428147); /** Danger state — errors and destructive or critical actions. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --danger-250: oklch(0.813013 0.084945 18.165704); /** Danger state — errors and destructive or critical actions. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --danger-300: oklch(0.75077 0.106785 18.43901); /** Danger state — errors and destructive or critical actions. Step 300: light tints. */
+  --danger-350: oklch(0.689178 0.12804 18.526045); /** Danger state — errors and destructive or critical actions. Step 350: light tints. */
+  --danger-400: oklch(0.62753 0.149171 18.309398); /** Danger state — errors and destructive or critical actions. Step 400: light tints. */
+  --danger-450: oklch(0.596213 0.160938 18.339163); /** Danger state — errors and destructive or critical actions. Step 450: light tints. */
+  --danger-500: oklch(0.565284 0.170522 18.2478); /** Danger state — errors and destructive or critical actions. Step 500: base colour. */
+  --danger-550: oklch(0.532839 0.182017 18.232802); /** Danger state — errors and destructive or critical actions. Step 550: shades for borders and icons. */
+  --danger-600: oklch(0.501996 0.192725 18.079135); /** Danger state — errors and destructive or critical actions. Step 600: shades for borders and icons. */
+  --danger-650: oklch(0.436904 0.169068 18.82836); /** Danger state — errors and destructive or critical actions. Step 650: shades for borders and icons. */
+  --danger-700: oklch(0.374388 0.145685 19.336218); /** Danger state — errors and destructive or critical actions. Step 700: shades for borders and icons. */
+  --danger-750: oklch(0.30874 0.121759 19.939515); /** Danger state — errors and destructive or critical actions. Step 750: darkest shades for text and high emphasis. */
+  --danger-800: oklch(0.244464 0.098267 20.667881); /** Danger state — errors and destructive or critical actions. Step 800: darkest shades for text and high emphasis. */
+  --danger-850: oklch(0.202838 0.081665 21.65418); /** Danger state — errors and destructive or critical actions. Step 850: darkest shades for text and high emphasis. */
+  --danger-900: oklch(0.161611 0.065248 23.141473); /** Danger state — errors and destructive or critical actions. Step 900: darkest shades for text and high emphasis. */
+  --danger-950: oklch(0.120777 0.048658 22.023968); /** Danger state — errors and destructive or critical actions. Step 950: darkest shades for text and high emphasis. */
+  --info-50: oklch(0.947933 0.013249 262.378766); /** Informational state — neutral highlights, tips, and in-progress notices. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --info-100: oklch(0.894885 0.02153 259.191552); /** Informational state — neutral highlights, tips, and in-progress notices. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --info-150: oklch(0.84226 0.030869 260.704222); /** Informational state — neutral highlights, tips, and in-progress notices. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --info-200: oklch(0.788988 0.040588 261.491472); /** Informational state — neutral highlights, tips, and in-progress notices. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --info-250: oklch(0.732279 0.055255 262.600626); /** Informational state — neutral highlights, tips, and in-progress notices. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --info-300: oklch(0.676764 0.068234 261.470834); /** Informational state — neutral highlights, tips, and in-progress notices. Step 300: light tints. */
+  --info-350: oklch(0.619287 0.082332 262.339289); /** Informational state — neutral highlights, tips, and in-progress notices. Step 350: light tints. */
+  --info-400: oklch(0.564226 0.095527 262.52779); /** Informational state — neutral highlights, tips, and in-progress notices. Step 400: light tints. */
+  --info-450: oklch(0.535493 0.102893 262.922919); /** Informational state — neutral highlights, tips, and in-progress notices. Step 450: light tints. */
+  --info-500: oklch(0.508435 0.109592 262.050185); /** Informational state — neutral highlights, tips, and in-progress notices. Step 500: base colour. */
+  --info-550: oklch(0.479149 0.115698 262.137071); /** Informational state — neutral highlights, tips, and in-progress notices. Step 550: shades for borders and icons. */
+  --info-600: oklch(0.450622 0.123283 262.351496); /** Informational state — neutral highlights, tips, and in-progress notices. Step 600: shades for borders and icons. */
+  --info-650: oklch(0.390336 0.109632 262.276763); /** Informational state — neutral highlights, tips, and in-progress notices. Step 650: shades for borders and icons. */
+  --info-700: oklch(0.331327 0.095363 262.195822); /** Informational state — neutral highlights, tips, and in-progress notices. Step 700: shades for borders and icons. */
+  --info-750: oklch(0.274244 0.081954 262.38017); /** Informational state — neutral highlights, tips, and in-progress notices. Step 750: darkest shades for text and high emphasis. */
+  --info-800: oklch(0.213923 0.06809 262.409405); /** Informational state — neutral highlights, tips, and in-progress notices. Step 800: darkest shades for text and high emphasis. */
+  --info-850: oklch(0.177247 0.057971 262.994032); /** Informational state — neutral highlights, tips, and in-progress notices. Step 850: darkest shades for text and high emphasis. */
+  --info-900: oklch(0.137795 0.047857 264.580497); /** Informational state — neutral highlights, tips, and in-progress notices. Step 900: darkest shades for text and high emphasis. */
+  --info-950: oklch(0.101112 0.036894 257.665016); /** Informational state — neutral highlights, tips, and in-progress notices. Step 950: darkest shades for text and high emphasis. */
 }