@nswds/tokens 3.0.1 → 3.2.0

package/dist/js/breakpoints/global.js

@@ -0,0 +1,7 @@
+export const breakpoint = {
+  xs: '480px',
+  sm: '768px',
+  md: '992px',
+  lg: '1200px',
+  xl: '1600px',
+}

package/dist/js/radius/global.js

@@ -0,0 +1,7 @@
+export const radius = {
+  none: '0px',
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+  pill: '9999px',
+}

package/dist/js/space/global.js

@@ -0,0 +1,14 @@
+export const space = {
+  0: '0rem',
+  1: '0.25rem',
+  2: '0.5rem',
+  3: '0.75rem',
+  4: '1rem',
+  5: '1.25rem',
+  6: '1.5rem',
+  8: '2rem',
+  10: '2.5rem',
+  12: '3rem',
+  14: '3.5rem',
+  16: '4rem',
+}

package/dist/js/typography/global.js

@@ -0,0 +1,42 @@
+export const fontFamily = {
+  sans: "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  display:
+    "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  system:
+    "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  mono: "'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
+}
+export const fontSize = {
+  12: '0.75rem',
+  14: '0.875rem',
+  16: '1rem',
+  18: '1.125rem',
+  20: '1.25rem',
+  22: '1.375rem',
+  24: '1.5rem',
+  30: '1.875rem',
+  36: '2.25rem',
+  48: '3rem',
+  56: '3.5rem',
+  64: '4rem',
+}
+export const fontWeight = {
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+}
+export const lineHeight = {
+  none: 1,
+  tight: 1.2,
+  snug: 1.3333333,
+  base: 1.5,
+  relaxed: 1.6,
+  loose: 1.75,
+}
+export const letterSpacing = {
+  tight: '-0.0125em',
+  normal: '0em',
+  wide: '0.025em',
+}

package/dist/json/breakpoints/global.json

@@ -0,0 +1,9 @@
+{
+  "breakpoint": {
+    "breakpoint-xs": "480px",
+    "breakpoint-sm": "768px",
+    "breakpoint-md": "992px",
+    "breakpoint-lg": "1200px",
+    "breakpoint-xl": "1600px"
+  }
+}

package/dist/json/radius/global.json

@@ -0,0 +1,9 @@
+{
+  "radius": {
+    "radius-none": "0px",
+    "radius-sm": "4px",
+    "radius-md": "8px",
+    "radius-lg": "16px",
+    "radius-pill": "9999px"
+  }
+}

package/dist/json/space/global.json

@@ -0,0 +1,16 @@
+{
+  "space": {
+    "space-0": "0rem",
+    "space-1": "0.25rem",
+    "space-2": "0.5rem",
+    "space-3": "0.75rem",
+    "space-4": "1rem",
+    "space-5": "1.25rem",
+    "space-6": "1.5rem",
+    "space-8": "2rem",
+    "space-10": "2.5rem",
+    "space-12": "3rem",
+    "space-14": "3.5rem",
+    "space-16": "4rem"
+  }
+}

package/dist/json/typography/global.json

@@ -0,0 +1,42 @@
+{
+  "font-family": {
+    "font-family-sans": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "font-family-display": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "font-family-system": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "font-family-mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace"
+  },
+  "font-size": {
+    "font-size-12": "0.75rem",
+    "font-size-14": "0.875rem",
+    "font-size-16": "1rem",
+    "font-size-18": "1.125rem",
+    "font-size-20": "1.25rem",
+    "font-size-22": "1.375rem",
+    "font-size-24": "1.5rem",
+    "font-size-30": "1.875rem",
+    "font-size-36": "2.25rem",
+    "font-size-48": "3rem",
+    "font-size-56": "3.5rem",
+    "font-size-64": "4rem"
+  },
+  "font-weight": {
+    "font-weight-light": 300,
+    "font-weight-regular": 400,
+    "font-weight-medium": 500,
+    "font-weight-semibold": 600,
+    "font-weight-bold": 700
+  },
+  "line-height": {
+    "line-height-none": 1,
+    "line-height-tight": 1.2,
+    "line-height-snug": 1.3333333,
+    "line-height-base": 1.5,
+    "line-height-relaxed": 1.6,
+    "line-height-loose": 1.75
+  },
+  "letter-spacing": {
+    "letter-spacing-tight": "-0.0125em",
+    "letter-spacing-normal": "0em",
+    "letter-spacing-wide": "0.025em"
+  }
+}

package/dist/less/breakpoints/global.less

@@ -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/less/colors/semantic/hex.less

@@ -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/less/colors/semantic/hsl.less

@@ -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.