@nswds/tokens 3.0.1 → 3.1.0

package/dist/less/colors/themes/masterbrand/rgb.less

@@ -1,57 +1,57 @@
-@primary-50: rgb(240, 251, 255);
-@primary-100: rgb(228, 246, 255);
-@primary-150: rgb(215, 242, 254);
-@primary-200: rgb(203, 237, 253);
-@primary-250: rgb(188, 234, 254);
-@primary-300: rgb(173, 231, 255);
-@primary-350: rgb(157, 227, 255);
-@primary-400: rgb(140, 224, 255);
-@primary-450: rgb(90, 201, 255);
-@primary-500: rgb(38, 174, 255);
-@primary-550: rgb(0, 143, 255);
-@primary-600: rgb(20, 108, 253);
-@primary-650: rgb(12, 90, 212);
-@primary-700: rgb(5, 72, 173);
-@primary-750: rgb(2, 54, 136);
-@primary-800: rgb(0, 38, 100);
-@primary-850: rgb(0, 26, 77);
-@primary-900: rgb(0, 16, 55);
-@primary-950: rgb(0, 6, 34);
-@accent-50: rgb(255, 248, 249);
-@accent-100: rgb(255, 242, 244);
-@accent-150: rgb(255, 236, 239);
-@accent-200: rgb(255, 230, 234);
-@accent-250: rgb(255, 219, 224);
-@accent-300: rgb(255, 207, 214);
-@accent-350: rgb(255, 196, 204);
-@accent-400: rgb(255, 184, 193);
-@accent-450: rgb(248, 151, 162);
-@accent-500: rgb(239, 117, 129);
-@accent-550: rgb(228, 79, 95);
-@accent-600: rgb(215, 21, 58);
-@accent-650: rgb(185, 14, 50);
-@accent-700: rgb(155, 7, 42);
-@accent-750: rgb(126, 3, 34);
-@accent-800: rgb(99, 0, 25);
-@accent-850: rgb(76, 0, 16);
-@accent-900: rgb(54, 0, 8);
-@accent-950: rgb(33, 0, 3);
-@grey-50: rgb(250, 250, 250);
-@grey-100: rgb(245, 245, 245);
-@grey-150: rgb(240, 240, 240);
-@grey-200: rgb(235, 235, 235);
-@grey-250: rgb(227, 229, 230);
-@grey-300: rgb(220, 223, 224);
-@grey-350: rgb(212, 217, 219);
-@grey-400: rgb(205, 211, 214);
-@grey-450: rgb(170, 176, 180);
-@grey-500: rgb(136, 143, 146);
-@grey-550: rgb(104, 111, 114);
-@grey-600: rgb(73, 80, 84);
-@grey-650: rgb(63, 69, 73);
-@grey-700: rgb(53, 59, 63);
-@grey-750: rgb(43, 49, 53);
-@grey-800: rgb(34, 39, 43);
-@grey-850: rgb(24, 28, 31);
-@grey-900: rgb(14, 17, 19);
-@grey-950: rgb(5, 7, 9);
+@primary-50: rgb(240, 251, 255); // Primary brand colour — primary actions, links, and key accents. Step 50: lightest tints for subtle backgrounds and surfaces.
+@primary-100: rgb(228, 246, 255); // Primary brand colour — primary actions, links, and key accents. Step 100: lightest tints for subtle backgrounds and surfaces.
+@primary-150: rgb(215, 242, 254); // Primary brand colour — primary actions, links, and key accents. Step 150: lightest tints for subtle backgrounds and surfaces.
+@primary-200: rgb(203, 237, 253); // Primary brand colour — primary actions, links, and key accents. Step 200: lightest tints for subtle backgrounds and surfaces.
+@primary-250: rgb(188, 234, 254); // Primary brand colour — primary actions, links, and key accents. Step 250: lightest tints for subtle backgrounds and surfaces.
+@primary-300: rgb(173, 231, 255); // Primary brand colour — primary actions, links, and key accents. Step 300: light tints.
+@primary-350: rgb(157, 227, 255); // Primary brand colour — primary actions, links, and key accents. Step 350: light tints.
+@primary-400: rgb(140, 224, 255); // Primary brand colour — primary actions, links, and key accents. Step 400: light tints.
+@primary-450: rgb(90, 201, 255); // Primary brand colour — primary actions, links, and key accents. Step 450: light tints.
+@primary-500: rgb(38, 174, 255); // Primary brand colour — primary actions, links, and key accents. Step 500: base colour.
+@primary-550: rgb(0, 143, 255); // Primary brand colour — primary actions, links, and key accents. Step 550: shades for borders and icons.
+@primary-600: rgb(20, 108, 253); // Primary brand colour — primary actions, links, and key accents. Step 600: shades for borders and icons.
+@primary-650: rgb(12, 90, 212); // Primary brand colour — primary actions, links, and key accents. Step 650: shades for borders and icons.
+@primary-700: rgb(5, 72, 173); // Primary brand colour — primary actions, links, and key accents. Step 700: shades for borders and icons.
+@primary-750: rgb(2, 54, 136); // Primary brand colour — primary actions, links, and key accents. Step 750: darkest shades for text and high emphasis.
+@primary-800: rgb(0, 38, 100); // Primary brand colour — primary actions, links, and key accents. Step 800: darkest shades for text and high emphasis.
+@primary-850: rgb(0, 26, 77); // Primary brand colour — primary actions, links, and key accents. Step 850: darkest shades for text and high emphasis.
+@primary-900: rgb(0, 16, 55); // Primary brand colour — primary actions, links, and key accents. Step 900: darkest shades for text and high emphasis.
+@primary-950: rgb(0, 6, 34); // Primary brand colour — primary actions, links, and key accents. Step 950: darkest shades for text and high emphasis.
+@accent-50: rgb(255, 248, 249); // Accent colour — secondary emphasis and supporting highlights. Step 50: lightest tints for subtle backgrounds and surfaces.
+@accent-100: rgb(255, 242, 244); // Accent colour — secondary emphasis and supporting highlights. Step 100: lightest tints for subtle backgrounds and surfaces.
+@accent-150: rgb(255, 236, 239); // Accent colour — secondary emphasis and supporting highlights. Step 150: lightest tints for subtle backgrounds and surfaces.
+@accent-200: rgb(255, 230, 234); // Accent colour — secondary emphasis and supporting highlights. Step 200: lightest tints for subtle backgrounds and surfaces.
+@accent-250: rgb(255, 219, 224); // Accent colour — secondary emphasis and supporting highlights. Step 250: lightest tints for subtle backgrounds and surfaces.
+@accent-300: rgb(255, 207, 214); // Accent colour — secondary emphasis and supporting highlights. Step 300: light tints.
+@accent-350: rgb(255, 196, 204); // Accent colour — secondary emphasis and supporting highlights. Step 350: light tints.
+@accent-400: rgb(255, 184, 193); // Accent colour — secondary emphasis and supporting highlights. Step 400: light tints.
+@accent-450: rgb(248, 151, 162); // Accent colour — secondary emphasis and supporting highlights. Step 450: light tints.
+@accent-500: rgb(239, 117, 129); // Accent colour — secondary emphasis and supporting highlights. Step 500: base colour.
+@accent-550: rgb(228, 79, 95); // Accent colour — secondary emphasis and supporting highlights. Step 550: shades for borders and icons.
+@accent-600: rgb(215, 21, 58); // Accent colour — secondary emphasis and supporting highlights. Step 600: shades for borders and icons.
+@accent-650: rgb(185, 14, 50); // Accent colour — secondary emphasis and supporting highlights. Step 650: shades for borders and icons.
+@accent-700: rgb(155, 7, 42); // Accent colour — secondary emphasis and supporting highlights. Step 700: shades for borders and icons.
+@accent-750: rgb(126, 3, 34); // Accent colour — secondary emphasis and supporting highlights. Step 750: darkest shades for text and high emphasis.
+@accent-800: rgb(99, 0, 25); // Accent colour — secondary emphasis and supporting highlights. Step 800: darkest shades for text and high emphasis.
+@accent-850: rgb(76, 0, 16); // Accent colour — secondary emphasis and supporting highlights. Step 850: darkest shades for text and high emphasis.
+@accent-900: rgb(54, 0, 8); // Accent colour — secondary emphasis and supporting highlights. Step 900: darkest shades for text and high emphasis.
+@accent-950: rgb(33, 0, 3); // Accent colour — secondary emphasis and supporting highlights. Step 950: darkest shades for text and high emphasis.
+@grey-50: rgb(250, 250, 250); // Neutral grey — text, borders, surfaces, and dividers. Step 50: lightest tints for subtle backgrounds and surfaces.
+@grey-100: rgb(245, 245, 245); // Neutral grey — text, borders, surfaces, and dividers. Step 100: lightest tints for subtle backgrounds and surfaces.
+@grey-150: rgb(240, 240, 240); // Neutral grey — text, borders, surfaces, and dividers. Step 150: lightest tints for subtle backgrounds and surfaces.
+@grey-200: rgb(235, 235, 235); // Neutral grey — text, borders, surfaces, and dividers. Step 200: lightest tints for subtle backgrounds and surfaces.
+@grey-250: rgb(227, 229, 230); // Neutral grey — text, borders, surfaces, and dividers. Step 250: lightest tints for subtle backgrounds and surfaces.
+@grey-300: rgb(220, 223, 224); // Neutral grey — text, borders, surfaces, and dividers. Step 300: light tints.
+@grey-350: rgb(212, 217, 219); // Neutral grey — text, borders, surfaces, and dividers. Step 350: light tints.
+@grey-400: rgb(205, 211, 214); // Neutral grey — text, borders, surfaces, and dividers. Step 400: light tints.
+@grey-450: rgb(170, 176, 180); // Neutral grey — text, borders, surfaces, and dividers. Step 450: light tints.
+@grey-500: rgb(136, 143, 146); // Neutral grey — text, borders, surfaces, and dividers. Step 500: base colour.
+@grey-550: rgb(104, 111, 114); // Neutral grey — text, borders, surfaces, and dividers. Step 550: shades for borders and icons.
+@grey-600: rgb(73, 80, 84); // Neutral grey — text, borders, surfaces, and dividers. Step 600: shades for borders and icons.
+@grey-650: rgb(63, 69, 73); // Neutral grey — text, borders, surfaces, and dividers. Step 650: shades for borders and icons.
+@grey-700: rgb(53, 59, 63); // Neutral grey — text, borders, surfaces, and dividers. Step 700: shades for borders and icons.
+@grey-750: rgb(43, 49, 53); // Neutral grey — text, borders, surfaces, and dividers. Step 750: darkest shades for text and high emphasis.
+@grey-800: rgb(34, 39, 43); // Neutral grey — text, borders, surfaces, and dividers. Step 800: darkest shades for text and high emphasis.
+@grey-850: rgb(24, 28, 31); // Neutral grey — text, borders, surfaces, and dividers. Step 850: darkest shades for text and high emphasis.
+@grey-900: rgb(14, 17, 19); // Neutral grey — text, borders, surfaces, and dividers. Step 900: darkest shades for text and high emphasis.
+@grey-950: rgb(5, 7, 9); // Neutral grey — text, borders, surfaces, and dividers. Step 950: darkest shades for text and high emphasis.

package/dist/less/radius/global.less

@@ -0,0 +1,5 @@
+@radius-none: 0px; // Square corners — tables, full-bleed surfaces, and elements flush to container edges.
+@radius-sm: 4px; // Small rounding — inputs, buttons, tags, and compact controls.
+@radius-md: 8px; // Medium rounding — cards, panels, and modals.
+@radius-lg: 16px; // Large rounding — hero surfaces and prominent containers.
+@radius-pill: 9999px; // Fully rounded ends — pills, badges, and circular icon buttons.

package/dist/less/space/global.less

@@ -0,0 +1,12 @@
+@space-0: 0rem; // Spacing step 0 on the 4px grid (0px at the default root font size). Use for padding, margins, and gaps.
+@space-1: 0.25rem; // Spacing step 1 on the 4px grid (4px at the default root font size). Use for padding, margins, and gaps.
+@space-2: 0.5rem; // Spacing step 2 on the 4px grid (8px at the default root font size). Use for padding, margins, and gaps.
+@space-3: 0.75rem; // Spacing step 3 on the 4px grid (12px at the default root font size). Use for padding, margins, and gaps.
+@space-4: 1rem; // Spacing step 4 on the 4px grid (16px at the default root font size). Use for padding, margins, and gaps.
+@space-5: 1.25rem; // Spacing step 5 on the 4px grid (20px at the default root font size). Use for padding, margins, and gaps.
+@space-6: 1.5rem; // Spacing step 6 on the 4px grid (24px at the default root font size). Use for padding, margins, and gaps.
+@space-8: 2rem; // Spacing step 8 on the 4px grid (32px at the default root font size). Use for padding, margins, and gaps.
+@space-10: 2.5rem; // Spacing step 10 on the 4px grid (40px at the default root font size). Use for padding, margins, and gaps.
+@space-12: 3rem; // Spacing step 12 on the 4px grid (48px at the default root font size). Use for padding, margins, and gaps.
+@space-14: 3.5rem; // Spacing step 14 on the 4px grid (56px at the default root font size). Use for padding, margins, and gaps.
+@space-16: 4rem; // Spacing step 16 on the 4px grid (64px at the default root font size). Use for padding, margins, and gaps.

package/dist/scss/breakpoints/global.scss

@@ -0,0 +1,5 @@
+$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/scss/colors/semantic/hex.scss

@@ -1,76 +1,76 @@
-$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/scss/colors/semantic/hsl.scss

@@ -1,76 +1,76 @@
-$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.