@nswds/tokens 3.0.1 → 3.1.0

package/dist/css/colors/semantic/rgb.css

@@ -1,78 +1,78 @@
 :root {
-  --success-50: rgb(239, 249, 237);
-  --success-100: rgb(224, 243, 222);
-  --success-150: rgb(210, 236, 207);
-  --success-200: rgb(196, 229, 192);
-  --success-250: rgb(170, 214, 165);
-  --success-300: rgb(143, 199, 138);
-  --success-350: rgb(116, 183, 111);
-  --success-400: rgb(88, 168, 84);
-  --success-450: rgb(73, 161, 70);
-  --success-500: rgb(57, 153, 54);
-  --success-550: rgb(37, 146, 36);
-  --success-600: rgb(0, 138, 7);
-  --success-650: rgb(0, 114, 4);
-  --success-700: rgb(0, 90, 2);
-  --success-750: rgb(0, 68, 1);
-  --success-800: rgb(0, 47, 0);
-  --success-850: rgb(0, 34, 0);
-  --success-900: rgb(0, 22, 0);
-  --success-950: rgb(0, 11, 0);
-  --warning-50: rgb(255, 243, 237);
-  --warning-100: rgb(255, 232, 222);
-  --warning-150: rgb(255, 221, 207);
-  --warning-200: rgb(253, 210, 192);
-  --warning-250: rgb(246, 189, 165);
-  --warning-300: rgb(238, 168, 138);
-  --warning-350: rgb(230, 147, 111);
-  --warning-400: rgb(221, 125, 83);
-  --warning-450: rgb(216, 114, 68);
-  --warning-500: rgb(211, 103, 52);
-  --warning-550: rgb(206, 92, 33);
-  --warning-600: rgb(201, 80, 0);
-  --warning-650: rgb(168, 63, 3);
-  --warning-700: rgb(136, 47, 3);
-  --warning-750: rgb(105, 32, 1);
-  --warning-800: rgb(75, 18, 0);
-  --warning-850: rgb(57, 10, 0);
-  --warning-900: rgb(39, 4, 0);
-  --warning-950: rgb(23, 1, 0);
-  --danger-50: rgb(255, 240, 239);
-  --danger-100: rgb(255, 226, 225);
-  --danger-150: rgb(255, 212, 212);
-  --danger-200: rgb(253, 198, 198);
-  --danger-250: rgb(244, 172, 173);
-  --danger-300: rgb(234, 146, 148);
-  --danger-350: rgb(223, 120, 124);
-  --danger-400: rgb(211, 93, 101);
-  --danger-450: rgb(205, 78, 89);
-  --danger-500: rgb(198, 63, 78);
-  --danger-550: rgb(191, 44, 66);
-  --danger-600: rgb(184, 18, 55);
-  --danger-650: rgb(153, 11, 42);
-  --danger-700: rgb(124, 6, 31);
-  --danger-750: rgb(95, 2, 20);
-  --danger-800: rgb(68, 0, 10);
-  --danger-850: rgb(51, 0, 5);
-  --danger-900: rgb(35, 0, 2);
-  --danger-950: rgb(20, 0, 1);
-  --info-50: rgb(233, 238, 247);
-  --info-100: rgb(212, 221, 235);
-  --info-150: rgb(192, 204, 224);
-  --info-200: rgb(172, 187, 213);
-  --info-250: rgb(150, 169, 204);
-  --info-300: rgb(128, 152, 194);
-  --info-350: rgb(107, 134, 184);
-  --info-400: rgb(87, 117, 174);
-  --info-450: rgb(77, 108, 169);
-  --info-500: rgb(66, 100, 164);
-  --info-550: rgb(56, 91, 158);
-  --info-600: rgb(46, 82, 153);
-  --info-650: rgb(35, 66, 127);
-  --info-700: rgb(25, 51, 102);
-  --info-750: rgb(16, 37, 79);
-  --info-800: rgb(7, 23, 56);
-  --info-850: rgb(4, 15, 42);
-  --info-900: rgb(2, 7, 28);
-  --info-950: rgb(0, 3, 15);
+  --success-50: rgb(239, 249, 237); /** Success state — positive outcomes, confirmations, and completed actions. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --success-100: rgb(224, 243, 222); /** Success state — positive outcomes, confirmations, and completed actions. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --success-150: rgb(210, 236, 207); /** Success state — positive outcomes, confirmations, and completed actions. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --success-200: rgb(196, 229, 192); /** Success state — positive outcomes, confirmations, and completed actions. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --success-250: rgb(170, 214, 165); /** Success state — positive outcomes, confirmations, and completed actions. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --success-300: rgb(143, 199, 138); /** Success state — positive outcomes, confirmations, and completed actions. Step 300: light tints. */
+  --success-350: rgb(116, 183, 111); /** Success state — positive outcomes, confirmations, and completed actions. Step 350: light tints. */
+  --success-400: rgb(88, 168, 84); /** Success state — positive outcomes, confirmations, and completed actions. Step 400: light tints. */
+  --success-450: rgb(73, 161, 70); /** Success state — positive outcomes, confirmations, and completed actions. Step 450: light tints. */
+  --success-500: rgb(57, 153, 54); /** Success state — positive outcomes, confirmations, and completed actions. Step 500: base colour. */
+  --success-550: rgb(37, 146, 36); /** Success state — positive outcomes, confirmations, and completed actions. Step 550: shades for borders and icons. */
+  --success-600: rgb(0, 138, 7); /** Success state — positive outcomes, confirmations, and completed actions. Step 600: shades for borders and icons. */
+  --success-650: rgb(0, 114, 4); /** Success state — positive outcomes, confirmations, and completed actions. Step 650: shades for borders and icons. */
+  --success-700: rgb(0, 90, 2); /** Success state — positive outcomes, confirmations, and completed actions. Step 700: shades for borders and icons. */
+  --success-750: rgb(0, 68, 1); /** Success state — positive outcomes, confirmations, and completed actions. Step 750: darkest shades for text and high emphasis. */
+  --success-800: rgb(0, 47, 0); /** Success state — positive outcomes, confirmations, and completed actions. Step 800: darkest shades for text and high emphasis. */
+  --success-850: rgb(0, 34, 0); /** Success state — positive outcomes, confirmations, and completed actions. Step 850: darkest shades for text and high emphasis. */
+  --success-900: rgb(0, 22, 0); /** Success state — positive outcomes, confirmations, and completed actions. Step 900: darkest shades for text and high emphasis. */
+  --success-950: rgb(0, 11, 0); /** Success state — positive outcomes, confirmations, and completed actions. Step 950: darkest shades for text and high emphasis. */
+  --warning-50: rgb(255, 243, 237); /** Warning state — caution and actions that need attention. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --warning-100: rgb(255, 232, 222); /** Warning state — caution and actions that need attention. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --warning-150: rgb(255, 221, 207); /** Warning state — caution and actions that need attention. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --warning-200: rgb(253, 210, 192); /** Warning state — caution and actions that need attention. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --warning-250: rgb(246, 189, 165); /** Warning state — caution and actions that need attention. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --warning-300: rgb(238, 168, 138); /** Warning state — caution and actions that need attention. Step 300: light tints. */
+  --warning-350: rgb(230, 147, 111); /** Warning state — caution and actions that need attention. Step 350: light tints. */
+  --warning-400: rgb(221, 125, 83); /** Warning state — caution and actions that need attention. Step 400: light tints. */
+  --warning-450: rgb(216, 114, 68); /** Warning state — caution and actions that need attention. Step 450: light tints. */
+  --warning-500: rgb(211, 103, 52); /** Warning state — caution and actions that need attention. Step 500: base colour. */
+  --warning-550: rgb(206, 92, 33); /** Warning state — caution and actions that need attention. Step 550: shades for borders and icons. */
+  --warning-600: rgb(201, 80, 0); /** Warning state — caution and actions that need attention. Step 600: shades for borders and icons. */
+  --warning-650: rgb(168, 63, 3); /** Warning state — caution and actions that need attention. Step 650: shades for borders and icons. */
+  --warning-700: rgb(136, 47, 3); /** Warning state — caution and actions that need attention. Step 700: shades for borders and icons. */
+  --warning-750: rgb(105, 32, 1); /** Warning state — caution and actions that need attention. Step 750: darkest shades for text and high emphasis. */
+  --warning-800: rgb(75, 18, 0); /** Warning state — caution and actions that need attention. Step 800: darkest shades for text and high emphasis. */
+  --warning-850: rgb(57, 10, 0); /** Warning state — caution and actions that need attention. Step 850: darkest shades for text and high emphasis. */
+  --warning-900: rgb(39, 4, 0); /** Warning state — caution and actions that need attention. Step 900: darkest shades for text and high emphasis. */
+  --warning-950: rgb(23, 1, 0); /** Warning state — caution and actions that need attention. Step 950: darkest shades for text and high emphasis. */
+  --danger-50: rgb(255, 240, 239); /** Danger state — errors and destructive or critical actions. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --danger-100: rgb(255, 226, 225); /** Danger state — errors and destructive or critical actions. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --danger-150: rgb(255, 212, 212); /** Danger state — errors and destructive or critical actions. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --danger-200: rgb(253, 198, 198); /** Danger state — errors and destructive or critical actions. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --danger-250: rgb(244, 172, 173); /** Danger state — errors and destructive or critical actions. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --danger-300: rgb(234, 146, 148); /** Danger state — errors and destructive or critical actions. Step 300: light tints. */
+  --danger-350: rgb(223, 120, 124); /** Danger state — errors and destructive or critical actions. Step 350: light tints. */
+  --danger-400: rgb(211, 93, 101); /** Danger state — errors and destructive or critical actions. Step 400: light tints. */
+  --danger-450: rgb(205, 78, 89); /** Danger state — errors and destructive or critical actions. Step 450: light tints. */
+  --danger-500: rgb(198, 63, 78); /** Danger state — errors and destructive or critical actions. Step 500: base colour. */
+  --danger-550: rgb(191, 44, 66); /** Danger state — errors and destructive or critical actions. Step 550: shades for borders and icons. */
+  --danger-600: rgb(184, 18, 55); /** Danger state — errors and destructive or critical actions. Step 600: shades for borders and icons. */
+  --danger-650: rgb(153, 11, 42); /** Danger state — errors and destructive or critical actions. Step 650: shades for borders and icons. */
+  --danger-700: rgb(124, 6, 31); /** Danger state — errors and destructive or critical actions. Step 700: shades for borders and icons. */
+  --danger-750: rgb(95, 2, 20); /** Danger state — errors and destructive or critical actions. Step 750: darkest shades for text and high emphasis. */
+  --danger-800: rgb(68, 0, 10); /** Danger state — errors and destructive or critical actions. Step 800: darkest shades for text and high emphasis. */
+  --danger-850: rgb(51, 0, 5); /** Danger state — errors and destructive or critical actions. Step 850: darkest shades for text and high emphasis. */
+  --danger-900: rgb(35, 0, 2); /** Danger state — errors and destructive or critical actions. Step 900: darkest shades for text and high emphasis. */
+  --danger-950: rgb(20, 0, 1); /** Danger state — errors and destructive or critical actions. Step 950: darkest shades for text and high emphasis. */
+  --info-50: rgb(233, 238, 247); /** Informational state — neutral highlights, tips, and in-progress notices. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --info-100: rgb(212, 221, 235); /** Informational state — neutral highlights, tips, and in-progress notices. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --info-150: rgb(192, 204, 224); /** Informational state — neutral highlights, tips, and in-progress notices. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --info-200: rgb(172, 187, 213); /** Informational state — neutral highlights, tips, and in-progress notices. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --info-250: rgb(150, 169, 204); /** Informational state — neutral highlights, tips, and in-progress notices. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --info-300: rgb(128, 152, 194); /** Informational state — neutral highlights, tips, and in-progress notices. Step 300: light tints. */
+  --info-350: rgb(107, 134, 184); /** Informational state — neutral highlights, tips, and in-progress notices. Step 350: light tints. */
+  --info-400: rgb(87, 117, 174); /** Informational state — neutral highlights, tips, and in-progress notices. Step 400: light tints. */
+  --info-450: rgb(77, 108, 169); /** Informational state — neutral highlights, tips, and in-progress notices. Step 450: light tints. */
+  --info-500: rgb(66, 100, 164); /** Informational state — neutral highlights, tips, and in-progress notices. Step 500: base colour. */
+  --info-550: rgb(56, 91, 158); /** Informational state — neutral highlights, tips, and in-progress notices. Step 550: shades for borders and icons. */
+  --info-600: rgb(46, 82, 153); /** Informational state — neutral highlights, tips, and in-progress notices. Step 600: shades for borders and icons. */
+  --info-650: rgb(35, 66, 127); /** Informational state — neutral highlights, tips, and in-progress notices. Step 650: shades for borders and icons. */
+  --info-700: rgb(25, 51, 102); /** Informational state — neutral highlights, tips, and in-progress notices. Step 700: shades for borders and icons. */
+  --info-750: rgb(16, 37, 79); /** Informational state — neutral highlights, tips, and in-progress notices. Step 750: darkest shades for text and high emphasis. */
+  --info-800: rgb(7, 23, 56); /** Informational state — neutral highlights, tips, and in-progress notices. Step 800: darkest shades for text and high emphasis. */
+  --info-850: rgb(4, 15, 42); /** Informational state — neutral highlights, tips, and in-progress notices. Step 850: darkest shades for text and high emphasis. */
+  --info-900: rgb(2, 7, 28); /** Informational state — neutral highlights, tips, and in-progress notices. Step 900: darkest shades for text and high emphasis. */
+  --info-950: rgb(0, 3, 15); /** Informational state — neutral highlights, tips, and in-progress notices. Step 950: darkest shades for text and high emphasis. */
 }

package/dist/css/colors/themes/masterbrand/hex.css

@@ -1,59 +1,59 @@
 :root {
-  --primary-50: #f0fbff;
-  --primary-100: #e4f6ff;
-  --primary-150: #d7f2fe;
-  --primary-200: #cbedfd;
-  --primary-250: #bceafe;
-  --primary-300: #ade7ff;
-  --primary-350: #9de3ff;
-  --primary-400: #8ce0ff;
-  --primary-450: #5ac9ff;
-  --primary-500: #26aeff;
-  --primary-550: #008fff;
-  --primary-600: #146cfd;
-  --primary-650: #0c5ad4;
-  --primary-700: #0548ad;
-  --primary-750: #023688;
-  --primary-800: #002664;
-  --primary-850: #001a4d;
-  --primary-900: #001037;
-  --primary-950: #000622;
-  --accent-50: #fff8f9;
-  --accent-100: #fff2f4;
-  --accent-150: #ffecef;
-  --accent-200: #ffe6ea;
-  --accent-250: #ffdbe0;
-  --accent-300: #ffcfd6;
-  --accent-350: #ffc4cc;
-  --accent-400: #ffb8c1;
-  --accent-450: #f897a2;
-  --accent-500: #ef7581;
-  --accent-550: #e44f5f;
-  --accent-600: #d7153a;
-  --accent-650: #b90e32;
-  --accent-700: #9b072a;
-  --accent-750: #7e0322;
-  --accent-800: #630019;
-  --accent-850: #4c0010;
-  --accent-900: #360008;
-  --accent-950: #210003;
-  --grey-50: #fafafa;
-  --grey-100: #f5f5f5;
-  --grey-150: #f0f0f0;
-  --grey-200: #ebebeb;
-  --grey-250: #e3e5e6;
-  --grey-300: #dcdfe0;
-  --grey-350: #d4d9db;
-  --grey-400: #cdd3d6;
-  --grey-450: #aab0b4;
-  --grey-500: #888f92;
-  --grey-550: #686f72;
-  --grey-600: #495054;
-  --grey-650: #3f4549;
-  --grey-700: #353b3f;
-  --grey-750: #2b3135;
-  --grey-800: #22272b;
-  --grey-850: #181c1f;
-  --grey-900: #0e1113;
-  --grey-950: #050709;
+  --primary-50: #f0fbff; /** Primary brand colour — primary actions, links, and key accents. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --primary-100: #e4f6ff; /** Primary brand colour — primary actions, links, and key accents. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --primary-150: #d7f2fe; /** Primary brand colour — primary actions, links, and key accents. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --primary-200: #cbedfd; /** Primary brand colour — primary actions, links, and key accents. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --primary-250: #bceafe; /** Primary brand colour — primary actions, links, and key accents. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --primary-300: #ade7ff; /** Primary brand colour — primary actions, links, and key accents. Step 300: light tints. */
+  --primary-350: #9de3ff; /** Primary brand colour — primary actions, links, and key accents. Step 350: light tints. */
+  --primary-400: #8ce0ff; /** Primary brand colour — primary actions, links, and key accents. Step 400: light tints. */
+  --primary-450: #5ac9ff; /** Primary brand colour — primary actions, links, and key accents. Step 450: light tints. */
+  --primary-500: #26aeff; /** Primary brand colour — primary actions, links, and key accents. Step 500: base colour. */
+  --primary-550: #008fff; /** Primary brand colour — primary actions, links, and key accents. Step 550: shades for borders and icons. */
+  --primary-600: #146cfd; /** Primary brand colour — primary actions, links, and key accents. Step 600: shades for borders and icons. */
+  --primary-650: #0c5ad4; /** Primary brand colour — primary actions, links, and key accents. Step 650: shades for borders and icons. */
+  --primary-700: #0548ad; /** Primary brand colour — primary actions, links, and key accents. Step 700: shades for borders and icons. */
+  --primary-750: #023688; /** Primary brand colour — primary actions, links, and key accents. Step 750: darkest shades for text and high emphasis. */
+  --primary-800: #002664; /** Primary brand colour — primary actions, links, and key accents. Step 800: darkest shades for text and high emphasis. */
+  --primary-850: #001a4d; /** Primary brand colour — primary actions, links, and key accents. Step 850: darkest shades for text and high emphasis. */
+  --primary-900: #001037; /** Primary brand colour — primary actions, links, and key accents. Step 900: darkest shades for text and high emphasis. */
+  --primary-950: #000622; /** Primary brand colour — primary actions, links, and key accents. Step 950: darkest shades for text and high emphasis. */
+  --accent-50: #fff8f9; /** Accent colour — secondary emphasis and supporting highlights. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --accent-100: #fff2f4; /** Accent colour — secondary emphasis and supporting highlights. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --accent-150: #ffecef; /** Accent colour — secondary emphasis and supporting highlights. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --accent-200: #ffe6ea; /** Accent colour — secondary emphasis and supporting highlights. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --accent-250: #ffdbe0; /** Accent colour — secondary emphasis and supporting highlights. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --accent-300: #ffcfd6; /** Accent colour — secondary emphasis and supporting highlights. Step 300: light tints. */
+  --accent-350: #ffc4cc; /** Accent colour — secondary emphasis and supporting highlights. Step 350: light tints. */
+  --accent-400: #ffb8c1; /** Accent colour — secondary emphasis and supporting highlights. Step 400: light tints. */
+  --accent-450: #f897a2; /** Accent colour — secondary emphasis and supporting highlights. Step 450: light tints. */
+  --accent-500: #ef7581; /** Accent colour — secondary emphasis and supporting highlights. Step 500: base colour. */
+  --accent-550: #e44f5f; /** Accent colour — secondary emphasis and supporting highlights. Step 550: shades for borders and icons. */
+  --accent-600: #d7153a; /** Accent colour — secondary emphasis and supporting highlights. Step 600: shades for borders and icons. */
+  --accent-650: #b90e32; /** Accent colour — secondary emphasis and supporting highlights. Step 650: shades for borders and icons. */
+  --accent-700: #9b072a; /** Accent colour — secondary emphasis and supporting highlights. Step 700: shades for borders and icons. */
+  --accent-750: #7e0322; /** Accent colour — secondary emphasis and supporting highlights. Step 750: darkest shades for text and high emphasis. */
+  --accent-800: #630019; /** Accent colour — secondary emphasis and supporting highlights. Step 800: darkest shades for text and high emphasis. */
+  --accent-850: #4c0010; /** Accent colour — secondary emphasis and supporting highlights. Step 850: darkest shades for text and high emphasis. */
+  --accent-900: #360008; /** Accent colour — secondary emphasis and supporting highlights. Step 900: darkest shades for text and high emphasis. */
+  --accent-950: #210003; /** Accent colour — secondary emphasis and supporting highlights. Step 950: darkest shades for text and high emphasis. */
+  --grey-50: #fafafa; /** Neutral grey — text, borders, surfaces, and dividers. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --grey-100: #f5f5f5; /** Neutral grey — text, borders, surfaces, and dividers. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --grey-150: #f0f0f0; /** Neutral grey — text, borders, surfaces, and dividers. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --grey-200: #ebebeb; /** Neutral grey — text, borders, surfaces, and dividers. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --grey-250: #e3e5e6; /** Neutral grey — text, borders, surfaces, and dividers. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --grey-300: #dcdfe0; /** Neutral grey — text, borders, surfaces, and dividers. Step 300: light tints. */
+  --grey-350: #d4d9db; /** Neutral grey — text, borders, surfaces, and dividers. Step 350: light tints. */
+  --grey-400: #cdd3d6; /** Neutral grey — text, borders, surfaces, and dividers. Step 400: light tints. */
+  --grey-450: #aab0b4; /** Neutral grey — text, borders, surfaces, and dividers. Step 450: light tints. */
+  --grey-500: #888f92; /** Neutral grey — text, borders, surfaces, and dividers. Step 500: base colour. */
+  --grey-550: #686f72; /** Neutral grey — text, borders, surfaces, and dividers. Step 550: shades for borders and icons. */
+  --grey-600: #495054; /** Neutral grey — text, borders, surfaces, and dividers. Step 600: shades for borders and icons. */
+  --grey-650: #3f4549; /** Neutral grey — text, borders, surfaces, and dividers. Step 650: shades for borders and icons. */
+  --grey-700: #353b3f; /** Neutral grey — text, borders, surfaces, and dividers. Step 700: shades for borders and icons. */
+  --grey-750: #2b3135; /** Neutral grey — text, borders, surfaces, and dividers. Step 750: darkest shades for text and high emphasis. */
+  --grey-800: #22272b; /** Neutral grey — text, borders, surfaces, and dividers. Step 800: darkest shades for text and high emphasis. */
+  --grey-850: #181c1f; /** Neutral grey — text, borders, surfaces, and dividers. Step 850: darkest shades for text and high emphasis. */
+  --grey-900: #0e1113; /** Neutral grey — text, borders, surfaces, and dividers. Step 900: darkest shades for text and high emphasis. */
+  --grey-950: #050709; /** Neutral grey — text, borders, surfaces, and dividers. Step 950: darkest shades for text and high emphasis. */
 }

package/dist/css/colors/themes/masterbrand/hsl.css

@@ -1,59 +1,59 @@
 :root {
-  --primary-50: hsl(196, 100%, 97.058824%);
-  --primary-100: hsl(200, 100%, 94.705882%);
-  --primary-150: hsl(198.461538, 95.121951%, 91.960784%);
-  --primary-200: hsl(199.2, 92.592593%, 89.411765%);
-  --primary-250: hsl(198.181818, 97.058824%, 86.666667%);
-  --primary-300: hsl(197.560976, 100%, 83.921569%);
-  --primary-350: hsl(197.142857, 100%, 80.784314%);
-  --primary-400: hsl(196.173913, 100%, 77.45098%);
-  --primary-450: hsl(199.636364, 100%, 67.647059%);
-  --primary-500: hsl(202.396313, 100%, 57.45098%);
-  --primary-550: hsl(206.352941, 100%, 50%);
-  --primary-600: hsl(217.339056, 98.312236%, 53.529412%);
-  --primary-650: hsl(216.6, 89.285714%, 43.921569%);
-  --primary-700: hsl(216.071429, 94.382022%, 34.901961%);
-  --primary-750: hsl(216.716418, 97.101449%, 27.058824%);
-  --primary-800: hsl(217.2, 100%, 19.607843%);
-  --primary-850: hsl(219.74026, 100%, 15.098039%);
-  --primary-900: hsl(222.545455, 100%, 10.784314%);
-  --primary-950: hsl(229.411765, 100%, 6.666667%);
-  --accent-50: hsl(351.428571, 100%, 98.627451%);
-  --accent-100: hsl(350.769231, 100%, 97.45098%);
-  --accent-150: hsl(350.526316, 100%, 96.27451%);
-  --accent-200: hsl(350.4, 100%, 95.098039%);
-  --accent-250: hsl(351.666667, 100%, 92.941176%);
-  --accent-300: hsl(351.25, 100%, 90.588235%);
-  --accent-350: hsl(351.864407, 100%, 88.431373%);
-  --accent-400: hsl(352.394366, 100%, 86.078431%);
-  --accent-450: hsl(353.195876, 87.387387%, 78.235294%);
-  --accent-500: hsl(354.098361, 79.220779%, 69.803922%);
-  --accent-550: hsl(353.557047, 73.399015%, 60.196078%);
-  --accent-600: hsl(348.556701, 82.20339%, 46.27451%);
-  --accent-650: hsl(347.368421, 85.929648%, 39.019608%);
-  --accent-700: hsl(345.810811, 91.358025%, 31.764706%);
-  --accent-750: hsl(344.878049, 95.348837%, 25.294118%);
-  --accent-800: hsl(344.848485, 100%, 19.411765%);
-  --accent-850: hsl(347.368421, 100%, 14.901961%);
-  --accent-900: hsl(351.111111, 100%, 10.588235%);
-  --accent-950: hsl(354.545455, 100%, 6.470588%);
-  --grey-50: hsl(0, 0%, 98.039216%);
-  --grey-100: hsl(0, 0%, 96.078431%);
-  --grey-150: hsl(0, 0%, 94.117647%);
-  --grey-200: hsl(0, 0%, 92.156863%);
-  --grey-250: hsl(200, 5.660377%, 89.607843%);
-  --grey-300: hsl(195, 6.060606%, 87.058824%);
-  --grey-350: hsl(197.142857, 8.860759%, 84.509804%);
-  --grey-400: hsl(200, 9.89011%, 82.156863%);
-  --grey-450: hsl(204, 6.25%, 68.627451%);
-  --grey-500: hsl(198, 4.385965%, 55.294118%);
-  --grey-550: hsl(198, 4.587156%, 42.745098%);
-  --grey-600: hsl(201.818182, 7.006369%, 30.784314%);
-  --grey-650: hsl(204, 7.352941%, 26.666667%);
-  --grey-700: hsl(204, 8.62069%, 22.745098%);
-  --grey-750: hsl(204, 10.416667%, 18.823529%);
-  --grey-800: hsl(206.666667, 11.688312%, 15.098039%);
-  --grey-850: hsl(205.714286, 12.727273%, 10.784314%);
-  --grey-900: hsl(204, 15.151515%, 6.470588%);
-  --grey-950: hsl(210, 28.571429%, 2.745098%);
+  --primary-50: hsl(196, 100%, 97.058824%); /** Primary brand colour — primary actions, links, and key accents. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --primary-100: hsl(200, 100%, 94.705882%); /** Primary brand colour — primary actions, links, and key accents. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --primary-150: hsl(198.461538, 95.121951%, 91.960784%); /** Primary brand colour — primary actions, links, and key accents. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --primary-200: hsl(199.2, 92.592593%, 89.411765%); /** Primary brand colour — primary actions, links, and key accents. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --primary-250: hsl(198.181818, 97.058824%, 86.666667%); /** Primary brand colour — primary actions, links, and key accents. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --primary-300: hsl(197.560976, 100%, 83.921569%); /** Primary brand colour — primary actions, links, and key accents. Step 300: light tints. */
+  --primary-350: hsl(197.142857, 100%, 80.784314%); /** Primary brand colour — primary actions, links, and key accents. Step 350: light tints. */
+  --primary-400: hsl(196.173913, 100%, 77.45098%); /** Primary brand colour — primary actions, links, and key accents. Step 400: light tints. */
+  --primary-450: hsl(199.636364, 100%, 67.647059%); /** Primary brand colour — primary actions, links, and key accents. Step 450: light tints. */
+  --primary-500: hsl(202.396313, 100%, 57.45098%); /** Primary brand colour — primary actions, links, and key accents. Step 500: base colour. */
+  --primary-550: hsl(206.352941, 100%, 50%); /** Primary brand colour — primary actions, links, and key accents. Step 550: shades for borders and icons. */
+  --primary-600: hsl(217.339056, 98.312236%, 53.529412%); /** Primary brand colour — primary actions, links, and key accents. Step 600: shades for borders and icons. */
+  --primary-650: hsl(216.6, 89.285714%, 43.921569%); /** Primary brand colour — primary actions, links, and key accents. Step 650: shades for borders and icons. */
+  --primary-700: hsl(216.071429, 94.382022%, 34.901961%); /** Primary brand colour — primary actions, links, and key accents. Step 700: shades for borders and icons. */
+  --primary-750: hsl(216.716418, 97.101449%, 27.058824%); /** Primary brand colour — primary actions, links, and key accents. Step 750: darkest shades for text and high emphasis. */
+  --primary-800: hsl(217.2, 100%, 19.607843%); /** Primary brand colour — primary actions, links, and key accents. Step 800: darkest shades for text and high emphasis. */
+  --primary-850: hsl(219.74026, 100%, 15.098039%); /** Primary brand colour — primary actions, links, and key accents. Step 850: darkest shades for text and high emphasis. */
+  --primary-900: hsl(222.545455, 100%, 10.784314%); /** Primary brand colour — primary actions, links, and key accents. Step 900: darkest shades for text and high emphasis. */
+  --primary-950: hsl(229.411765, 100%, 6.666667%); /** Primary brand colour — primary actions, links, and key accents. Step 950: darkest shades for text and high emphasis. */
+  --accent-50: hsl(351.428571, 100%, 98.627451%); /** Accent colour — secondary emphasis and supporting highlights. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --accent-100: hsl(350.769231, 100%, 97.45098%); /** Accent colour — secondary emphasis and supporting highlights. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --accent-150: hsl(350.526316, 100%, 96.27451%); /** Accent colour — secondary emphasis and supporting highlights. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --accent-200: hsl(350.4, 100%, 95.098039%); /** Accent colour — secondary emphasis and supporting highlights. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --accent-250: hsl(351.666667, 100%, 92.941176%); /** Accent colour — secondary emphasis and supporting highlights. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --accent-300: hsl(351.25, 100%, 90.588235%); /** Accent colour — secondary emphasis and supporting highlights. Step 300: light tints. */
+  --accent-350: hsl(351.864407, 100%, 88.431373%); /** Accent colour — secondary emphasis and supporting highlights. Step 350: light tints. */
+  --accent-400: hsl(352.394366, 100%, 86.078431%); /** Accent colour — secondary emphasis and supporting highlights. Step 400: light tints. */
+  --accent-450: hsl(353.195876, 87.387387%, 78.235294%); /** Accent colour — secondary emphasis and supporting highlights. Step 450: light tints. */
+  --accent-500: hsl(354.098361, 79.220779%, 69.803922%); /** Accent colour — secondary emphasis and supporting highlights. Step 500: base colour. */
+  --accent-550: hsl(353.557047, 73.399015%, 60.196078%); /** Accent colour — secondary emphasis and supporting highlights. Step 550: shades for borders and icons. */
+  --accent-600: hsl(348.556701, 82.20339%, 46.27451%); /** Accent colour — secondary emphasis and supporting highlights. Step 600: shades for borders and icons. */
+  --accent-650: hsl(347.368421, 85.929648%, 39.019608%); /** Accent colour — secondary emphasis and supporting highlights. Step 650: shades for borders and icons. */
+  --accent-700: hsl(345.810811, 91.358025%, 31.764706%); /** Accent colour — secondary emphasis and supporting highlights. Step 700: shades for borders and icons. */
+  --accent-750: hsl(344.878049, 95.348837%, 25.294118%); /** Accent colour — secondary emphasis and supporting highlights. Step 750: darkest shades for text and high emphasis. */
+  --accent-800: hsl(344.848485, 100%, 19.411765%); /** Accent colour — secondary emphasis and supporting highlights. Step 800: darkest shades for text and high emphasis. */
+  --accent-850: hsl(347.368421, 100%, 14.901961%); /** Accent colour — secondary emphasis and supporting highlights. Step 850: darkest shades for text and high emphasis. */
+  --accent-900: hsl(351.111111, 100%, 10.588235%); /** Accent colour — secondary emphasis and supporting highlights. Step 900: darkest shades for text and high emphasis. */
+  --accent-950: hsl(354.545455, 100%, 6.470588%); /** Accent colour — secondary emphasis and supporting highlights. Step 950: darkest shades for text and high emphasis. */
+  --grey-50: hsl(0, 0%, 98.039216%); /** Neutral grey — text, borders, surfaces, and dividers. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --grey-100: hsl(0, 0%, 96.078431%); /** Neutral grey — text, borders, surfaces, and dividers. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --grey-150: hsl(0, 0%, 94.117647%); /** Neutral grey — text, borders, surfaces, and dividers. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --grey-200: hsl(0, 0%, 92.156863%); /** Neutral grey — text, borders, surfaces, and dividers. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --grey-250: hsl(200, 5.660377%, 89.607843%); /** Neutral grey — text, borders, surfaces, and dividers. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --grey-300: hsl(195, 6.060606%, 87.058824%); /** Neutral grey — text, borders, surfaces, and dividers. Step 300: light tints. */
+  --grey-350: hsl(197.142857, 8.860759%, 84.509804%); /** Neutral grey — text, borders, surfaces, and dividers. Step 350: light tints. */
+  --grey-400: hsl(200, 9.89011%, 82.156863%); /** Neutral grey — text, borders, surfaces, and dividers. Step 400: light tints. */
+  --grey-450: hsl(204, 6.25%, 68.627451%); /** Neutral grey — text, borders, surfaces, and dividers. Step 450: light tints. */
+  --grey-500: hsl(198, 4.385965%, 55.294118%); /** Neutral grey — text, borders, surfaces, and dividers. Step 500: base colour. */
+  --grey-550: hsl(198, 4.587156%, 42.745098%); /** Neutral grey — text, borders, surfaces, and dividers. Step 550: shades for borders and icons. */
+  --grey-600: hsl(201.818182, 7.006369%, 30.784314%); /** Neutral grey — text, borders, surfaces, and dividers. Step 600: shades for borders and icons. */
+  --grey-650: hsl(204, 7.352941%, 26.666667%); /** Neutral grey — text, borders, surfaces, and dividers. Step 650: shades for borders and icons. */
+  --grey-700: hsl(204, 8.62069%, 22.745098%); /** Neutral grey — text, borders, surfaces, and dividers. Step 700: shades for borders and icons. */
+  --grey-750: hsl(204, 10.416667%, 18.823529%); /** Neutral grey — text, borders, surfaces, and dividers. Step 750: darkest shades for text and high emphasis. */
+  --grey-800: hsl(206.666667, 11.688312%, 15.098039%); /** Neutral grey — text, borders, surfaces, and dividers. Step 800: darkest shades for text and high emphasis. */
+  --grey-850: hsl(205.714286, 12.727273%, 10.784314%); /** Neutral grey — text, borders, surfaces, and dividers. Step 850: darkest shades for text and high emphasis. */
+  --grey-900: hsl(204, 15.151515%, 6.470588%); /** Neutral grey — text, borders, surfaces, and dividers. Step 900: darkest shades for text and high emphasis. */
+  --grey-950: hsl(210, 28.571429%, 2.745098%); /** Neutral grey — text, borders, surfaces, and dividers. Step 950: darkest shades for text and high emphasis. */
 }

package/dist/css/colors/themes/masterbrand/oklch.css

@@ -1,59 +1,59 @@
 :root {
-  --primary-50: oklch(0.981046 0.012805 221.42319);
-  --primary-100: oklch(0.962528 0.022535 229.073806);
-  --primary-150: oklch(0.945178 0.032646 226.304274);
-  --primary-200: oklch(0.926674 0.041663 227.890787);
-  --primary-250: oklch(0.911263 0.054737 226.223779);
-  --primary-300: oklch(0.896395 0.067447 225.364647);
-  --primary-350: oklch(0.87908 0.079726 224.961348);
-  --primary-400: oklch(0.864091 0.092143 223.595164);
-  --primary-450: oklch(0.793049 0.126377 232.671182);
-  --primary-500: oklch(0.719588 0.160232 241.934243);
-  --primary-550: oklch(0.647121 0.194114 252.085254);
-  --primary-600: oklch(0.575113 0.229834 260.756335);
-  --primary-650: oklch(0.504429 0.200565 260.409998);
-  --primary-700: oklch(0.433012 0.172764 260.164397);
-  --primary-750: oklch(0.360675 0.146274 260.290439);
-  --primary-800: oklch(0.289999 0.117296 259.841938);
-  --primary-850: oklch(0.238584 0.100105 260.505764);
-  --primary-900: oklch(0.190403 0.080719 260.682766);
-  --primary-950: oklch(0.138623 0.062732 261.699127);
-  --accent-50: oklch(0.984801 0.007587 7.280361);
-  --accent-100: oklch(0.97188 0.014232 6.700043);
-  --accent-150: oklch(0.959029 0.020979 6.606185);
-  --accent-200: oklch(0.946252 0.027827 6.653086);
-  --accent-250: oklch(0.922815 0.040479 8.438397);
-  --accent-300: oklch(0.897868 0.054828 8.39461);
-  --accent-350: oklch(0.875166 0.068164 9.494436);
-  --accent-400: oklch(0.850883 0.08303 10.570683);
-  --accent-450: oklch(0.779076 0.116944 12.810782);
-  --accent-500: oklch(0.707215 0.150378 15.602977);
-  --accent-550: oklch(0.634722 0.184087 17.935378);
-  --accent-600: oklch(0.561955 0.217505 20.33356);
-  --accent-650: oklch(0.501611 0.19526 19.649998);
-  --accent-700: oklch(0.439441 0.172351 18.724983);
-  --accent-750: oklch(0.377602 0.149006 17.706488);
-  --accent-800: oklch(0.316967 0.126887 17.133117);
-  --accent-850: oklch(0.26401 0.105766 17.967115);
-  --accent-900: oklch(0.210832 0.084535 18.772606);
-  --accent-950: oklch(0.156795 0.062933 19.607624);
-  --grey-50: oklch(0.985104 0 0);
-  --grey-100: oklch(0.970151 0 0);
-  --grey-150: oklch(0.95514 0 0);
-  --grey-200: oklch(0.94007 0 0);
-  --grey-250: oklch(0.920652 0.002558 228.786818);
-  --grey-300: oklch(0.901624 0.003538 219.535738);
-  --grey-350: oklch(0.882025 0.006111 223.464254);
-  --grey-400: oklch(0.863097 0.007776 228.868893);
-  --grey-450: oklch(0.753634 0.008885 236.605307);
-  --grey-500: oklch(0.645222 0.009348 225.150438);
-  --grey-550: oklch(0.536704 0.009767 225.197358);
-  --grey-600: oklch(0.426427 0.011202 232.617199);
-  --grey-650: oklch(0.386365 0.01045 236.835687);
-  --grey-700: oklch(0.348204 0.010712 236.894097);
-  --grey-750: oklch(0.308978 0.011017 236.97265);
-  --grey-800: oklch(0.269413 0.01036 242.083865);
-  --grey-850: oklch(0.223572 0.008405 240.274391);
-  --grey-900: oklch(0.175228 0.006346 236.981786);
-  --grey-950: oklch(0.126543 0.006953 243.792325);
+  --primary-50: oklch(0.981046 0.012805 221.42319); /** Primary brand colour — primary actions, links, and key accents. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --primary-100: oklch(0.962528 0.022535 229.073806); /** Primary brand colour — primary actions, links, and key accents. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --primary-150: oklch(0.945178 0.032646 226.304274); /** Primary brand colour — primary actions, links, and key accents. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --primary-200: oklch(0.926674 0.041663 227.890787); /** Primary brand colour — primary actions, links, and key accents. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --primary-250: oklch(0.911263 0.054737 226.223779); /** Primary brand colour — primary actions, links, and key accents. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --primary-300: oklch(0.896395 0.067447 225.364647); /** Primary brand colour — primary actions, links, and key accents. Step 300: light tints. */
+  --primary-350: oklch(0.87908 0.079726 224.961348); /** Primary brand colour — primary actions, links, and key accents. Step 350: light tints. */
+  --primary-400: oklch(0.864091 0.092143 223.595164); /** Primary brand colour — primary actions, links, and key accents. Step 400: light tints. */
+  --primary-450: oklch(0.793049 0.126377 232.671182); /** Primary brand colour — primary actions, links, and key accents. Step 450: light tints. */
+  --primary-500: oklch(0.719588 0.160232 241.934243); /** Primary brand colour — primary actions, links, and key accents. Step 500: base colour. */
+  --primary-550: oklch(0.647121 0.194114 252.085254); /** Primary brand colour — primary actions, links, and key accents. Step 550: shades for borders and icons. */
+  --primary-600: oklch(0.575113 0.229834 260.756335); /** Primary brand colour — primary actions, links, and key accents. Step 600: shades for borders and icons. */
+  --primary-650: oklch(0.504429 0.200565 260.409998); /** Primary brand colour — primary actions, links, and key accents. Step 650: shades for borders and icons. */
+  --primary-700: oklch(0.433012 0.172764 260.164397); /** Primary brand colour — primary actions, links, and key accents. Step 700: shades for borders and icons. */
+  --primary-750: oklch(0.360675 0.146274 260.290439); /** Primary brand colour — primary actions, links, and key accents. Step 750: darkest shades for text and high emphasis. */
+  --primary-800: oklch(0.289999 0.117296 259.841938); /** Primary brand colour — primary actions, links, and key accents. Step 800: darkest shades for text and high emphasis. */
+  --primary-850: oklch(0.238584 0.100105 260.505764); /** Primary brand colour — primary actions, links, and key accents. Step 850: darkest shades for text and high emphasis. */
+  --primary-900: oklch(0.190403 0.080719 260.682766); /** Primary brand colour — primary actions, links, and key accents. Step 900: darkest shades for text and high emphasis. */
+  --primary-950: oklch(0.138623 0.062732 261.699127); /** Primary brand colour — primary actions, links, and key accents. Step 950: darkest shades for text and high emphasis. */
+  --accent-50: oklch(0.984801 0.007587 7.280361); /** Accent colour — secondary emphasis and supporting highlights. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --accent-100: oklch(0.97188 0.014232 6.700043); /** Accent colour — secondary emphasis and supporting highlights. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --accent-150: oklch(0.959029 0.020979 6.606185); /** Accent colour — secondary emphasis and supporting highlights. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --accent-200: oklch(0.946252 0.027827 6.653086); /** Accent colour — secondary emphasis and supporting highlights. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --accent-250: oklch(0.922815 0.040479 8.438397); /** Accent colour — secondary emphasis and supporting highlights. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --accent-300: oklch(0.897868 0.054828 8.39461); /** Accent colour — secondary emphasis and supporting highlights. Step 300: light tints. */
+  --accent-350: oklch(0.875166 0.068164 9.494436); /** Accent colour — secondary emphasis and supporting highlights. Step 350: light tints. */
+  --accent-400: oklch(0.850883 0.08303 10.570683); /** Accent colour — secondary emphasis and supporting highlights. Step 400: light tints. */
+  --accent-450: oklch(0.779076 0.116944 12.810782); /** Accent colour — secondary emphasis and supporting highlights. Step 450: light tints. */
+  --accent-500: oklch(0.707215 0.150378 15.602977); /** Accent colour — secondary emphasis and supporting highlights. Step 500: base colour. */
+  --accent-550: oklch(0.634722 0.184087 17.935378); /** Accent colour — secondary emphasis and supporting highlights. Step 550: shades for borders and icons. */
+  --accent-600: oklch(0.561955 0.217505 20.33356); /** Accent colour — secondary emphasis and supporting highlights. Step 600: shades for borders and icons. */
+  --accent-650: oklch(0.501611 0.19526 19.649998); /** Accent colour — secondary emphasis and supporting highlights. Step 650: shades for borders and icons. */
+  --accent-700: oklch(0.439441 0.172351 18.724983); /** Accent colour — secondary emphasis and supporting highlights. Step 700: shades for borders and icons. */
+  --accent-750: oklch(0.377602 0.149006 17.706488); /** Accent colour — secondary emphasis and supporting highlights. Step 750: darkest shades for text and high emphasis. */
+  --accent-800: oklch(0.316967 0.126887 17.133117); /** Accent colour — secondary emphasis and supporting highlights. Step 800: darkest shades for text and high emphasis. */
+  --accent-850: oklch(0.26401 0.105766 17.967115); /** Accent colour — secondary emphasis and supporting highlights. Step 850: darkest shades for text and high emphasis. */
+  --accent-900: oklch(0.210832 0.084535 18.772606); /** Accent colour — secondary emphasis and supporting highlights. Step 900: darkest shades for text and high emphasis. */
+  --accent-950: oklch(0.156795 0.062933 19.607624); /** Accent colour — secondary emphasis and supporting highlights. Step 950: darkest shades for text and high emphasis. */
+  --grey-50: oklch(0.985104 0 0); /** Neutral grey — text, borders, surfaces, and dividers. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --grey-100: oklch(0.970151 0 0); /** Neutral grey — text, borders, surfaces, and dividers. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --grey-150: oklch(0.95514 0 0); /** Neutral grey — text, borders, surfaces, and dividers. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --grey-200: oklch(0.94007 0 0); /** Neutral grey — text, borders, surfaces, and dividers. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --grey-250: oklch(0.920652 0.002558 228.786818); /** Neutral grey — text, borders, surfaces, and dividers. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --grey-300: oklch(0.901624 0.003538 219.535738); /** Neutral grey — text, borders, surfaces, and dividers. Step 300: light tints. */
+  --grey-350: oklch(0.882025 0.006111 223.464254); /** Neutral grey — text, borders, surfaces, and dividers. Step 350: light tints. */
+  --grey-400: oklch(0.863097 0.007776 228.868893); /** Neutral grey — text, borders, surfaces, and dividers. Step 400: light tints. */
+  --grey-450: oklch(0.753634 0.008885 236.605307); /** Neutral grey — text, borders, surfaces, and dividers. Step 450: light tints. */
+  --grey-500: oklch(0.645222 0.009348 225.150438); /** Neutral grey — text, borders, surfaces, and dividers. Step 500: base colour. */
+  --grey-550: oklch(0.536704 0.009767 225.197358); /** Neutral grey — text, borders, surfaces, and dividers. Step 550: shades for borders and icons. */
+  --grey-600: oklch(0.426427 0.011202 232.617199); /** Neutral grey — text, borders, surfaces, and dividers. Step 600: shades for borders and icons. */
+  --grey-650: oklch(0.386365 0.01045 236.835687); /** Neutral grey — text, borders, surfaces, and dividers. Step 650: shades for borders and icons. */
+  --grey-700: oklch(0.348204 0.010712 236.894097); /** Neutral grey — text, borders, surfaces, and dividers. Step 700: shades for borders and icons. */
+  --grey-750: oklch(0.308978 0.011017 236.97265); /** Neutral grey — text, borders, surfaces, and dividers. Step 750: darkest shades for text and high emphasis. */
+  --grey-800: oklch(0.269413 0.01036 242.083865); /** Neutral grey — text, borders, surfaces, and dividers. Step 800: darkest shades for text and high emphasis. */
+  --grey-850: oklch(0.223572 0.008405 240.274391); /** Neutral grey — text, borders, surfaces, and dividers. Step 850: darkest shades for text and high emphasis. */
+  --grey-900: oklch(0.175228 0.006346 236.981786); /** Neutral grey — text, borders, surfaces, and dividers. Step 900: darkest shades for text and high emphasis. */
+  --grey-950: oklch(0.126543 0.006953 243.792325); /** Neutral grey — text, borders, surfaces, and dividers. Step 950: darkest shades for text and high emphasis. */
 }