@acorex/styles 21.0.1-next.64 → 21.0.1-next.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "21.0.1-next.64",
+  "version": "21.0.1-next.66",
   "main": "index.css",
   "author": "Ali Safari",
   "license": "ISC",

package/themes/default.css

@@ -165,6 +165,78 @@ html.dark {
   --ax-sys-color-accent-900: 43, 85, 98;
   --ax-sys-color-accent-950: 22, 38, 44;
 
+  --ax-sys-color-accent1-50: 255, 236, 255;
+  --ax-sys-color-accent1-100: 255, 218, 255;
+  --ax-sys-color-accent1-200: 255, 192, 255;
+  --ax-sys-color-accent1-300: 253, 149, 255;
+  --ax-sys-color-accent1-400: 238, 92, 255;
+  --ax-sys-color-accent1-500: 217, 70, 239;
+  --ax-sys-color-accent1-600: 195, 42, 216;
+  --ax-sys-color-accent1-700: 167, 0, 189;
+  --ax-sys-color-accent1-800: 138, 24, 155;
+  --ax-sys-color-accent1-900: 107, 45, 118;
+  --ax-sys-color-accent1-950: 52, 26, 56;
+
+  --ax-sys-color-accent2-50: 255, 240, 226;
+  --ax-sys-color-accent2-100: 255, 228, 207;
+  --ax-sys-color-accent2-200: 255, 209, 179;
+  --ax-sys-color-accent2-300: 255, 178, 132;
+  --ax-sys-color-accent2-400: 255, 134, 54;
+  --ax-sys-color-accent2-500: 249, 115, 22;
+  --ax-sys-color-accent2-600: 223, 91, 0;
+  --ax-sys-color-accent2-700: 187, 68, 0;
+  --ax-sys-color-accent2-800: 151, 58, 18;
+  --ax-sys-color-accent2-900: 115, 57, 37;
+  --ax-sys-color-accent2-950: 52, 26, 19;
+
+  --ax-sys-color-accent3-50: 198, 255, 251;
+  --ax-sys-color-accent3-100: 143, 255, 244;
+  --ax-sys-color-accent3-200: 114, 250, 231;
+  --ax-sys-color-accent3-300: 90, 229, 209;
+  --ax-sys-color-accent3-400: 54, 201, 183;
+  --ax-sys-color-accent3-500: 20, 184, 166;
+  --ax-sys-color-accent3-600: 0, 161, 144;
+  --ax-sys-color-accent3-700: 0, 132, 117;
+  --ax-sys-color-accent3-800: 23, 108, 95;
+  --ax-sys-color-accent3-900: 43, 87, 79;
+  --ax-sys-color-accent3-950: 23, 40, 36;
+
+  --ax-sys-color-accent4-50: 237, 242, 255;
+  --ax-sys-color-accent4-100: 220, 228, 255;
+  --ax-sys-color-accent4-200: 196, 207, 255;
+  --ax-sys-color-accent4-300: 161, 173, 255;
+  --ax-sys-color-accent4-400: 119, 126, 255;
+  --ax-sys-color-accent4-500: 99, 102, 241;
+  --ax-sys-color-accent4-600: 86, 85, 223;
+  --ax-sys-color-accent4-700: 71, 64, 201;
+  --ax-sys-color-accent4-800: 59, 52, 175;
+  --ax-sys-color-accent4-900: 52, 53, 137;
+  --ax-sys-color-accent4-950: 31, 35, 83;
+
+  --ax-sys-color-accent5-50: 255, 235, 248;
+  --ax-sys-color-accent5-100: 255, 219, 237;
+  --ax-sys-color-accent5-200: 255, 194, 222;
+  --ax-sys-color-accent5-300: 255, 152, 200;
+  --ax-sys-color-accent5-400: 255, 94, 172;
+  --ax-sys-color-accent5-500: 236, 72, 153;
+  --ax-sys-color-accent5-600: 213, 48, 134;
+  --ax-sys-color-accent5-700: 185, 0, 111;
+  --ax-sys-color-accent5-800: 156, 23, 92;
+  --ax-sys-color-accent5-900: 119, 43, 77;
+  --ax-sys-color-accent5-950: 59, 26, 39;
+
+  --ax-sys-color-accent6-50: 250, 241, 236;
+  --ax-sys-color-accent6-100: 235, 227, 221;
+  --ax-sys-color-accent6-200: 214, 206, 201;
+  --ax-sys-color-accent6-300: 183, 175, 170;
+  --ax-sys-color-accent6-400: 144, 137, 132;
+  --ax-sys-color-accent6-500: 120, 113, 108;
+  --ax-sys-color-accent6-600: 107, 100, 95;
+  --ax-sys-color-accent6-700: 91, 84, 80;
+  --ax-sys-color-accent6-800: 78, 72, 68;
+  --ax-sys-color-accent6-900: 67, 63, 60;
+  --ax-sys-color-accent6-950: 41, 38, 36;
+
   --ax-sys-color-primary-lightest-surface: 211, 234, 255;
   --ax-sys-color-on-primary-lightest-surface: 29, 48, 64;
   --ax-sys-color-border-primary-lightest-surface: 175, 217, 255;
@@ -333,6 +405,174 @@ html.dark {
   --ax-sys-color-on-accent-darkest-surface: 229, 255, 255;
   --ax-sys-color-border-accent-darkest-surface: 17, 80, 96;
 
+  --ax-sys-color-accent1-lightest-surface: 255, 218, 255;
+  --ax-sys-color-on-accent1-lightest-surface: 62, 34, 63;
+  --ax-sys-color-border-accent1-lightest-surface: 255, 182, 255;
+
+  --ax-sys-color-accent1-lighter-surface: 255, 192, 255;
+  --ax-sys-color-on-accent1-lighter-surface: 72, 19, 74;
+  --ax-sys-color-border-accent1-lighter-surface: 255, 156, 255;
+
+  --ax-sys-color-accent1-light-surface: 253, 149, 255;
+  --ax-sys-color-on-accent1-light-surface: 82, 0, 87;
+  --ax-sys-color-border-accent1-light-surface: 252, 113, 255;
+
+  --ax-sys-color-accent1-surface: 217, 70, 239;
+  --ax-sys-color-on-accent1-surface: 255, 247, 255;
+  --ax-sys-color-border-accent1-surface: 210, 37, 236;
+
+  --ax-sys-color-accent1-dark-surface: 195, 42, 216;
+  --ax-sys-color-on-accent1-dark-surface: 255, 247, 255;
+  --ax-sys-color-border-accent1-dark-surface: 169, 34, 188;
+
+  --ax-sys-color-accent1-darker-surface: 167, 0, 189;
+  --ax-sys-color-on-accent1-darker-surface: 255, 247, 255;
+  --ax-sys-color-border-accent1-darker-surface: 135, 0, 153;
+
+  --ax-sys-color-accent1-darkest-surface: 138, 24, 155;
+  --ax-sys-color-on-accent1-darkest-surface: 255, 247, 255;
+  --ax-sys-color-border-accent1-darkest-surface: 110, 19, 124;
+
+  --ax-sys-color-accent2-lightest-surface: 255, 228, 207;
+  --ax-sys-color-on-accent2-lightest-surface: 61, 41, 24;
+  --ax-sys-color-border-accent2-lightest-surface: 255, 208, 171;
+
+  --ax-sys-color-accent2-lighter-surface: 255, 209, 179;
+  --ax-sys-color-on-accent2-lighter-surface: 70, 35, 8;
+  --ax-sys-color-border-accent2-lighter-surface: 255, 187, 143;
+
+  --ax-sys-color-accent2-light-surface: 255, 178, 132;
+  --ax-sys-color-on-accent2-light-surface: 83, 24, 0;
+  --ax-sys-color-border-accent2-light-surface: 255, 156, 96;
+
+  --ax-sys-color-accent2-surface: 249, 115, 22;
+  --ax-sys-color-on-accent2-surface: 255, 249, 238;
+  --ax-sys-color-border-accent2-surface: 229, 97, 6;
+
+  --ax-sys-color-accent2-dark-surface: 223, 91, 0;
+  --ax-sys-color-on-accent2-dark-surface: 255, 248, 239;
+  --ax-sys-color-border-accent2-dark-surface: 187, 76, 0;
+
+  --ax-sys-color-accent2-darker-surface: 187, 68, 0;
+  --ax-sys-color-on-accent2-darker-surface: 255, 248, 240;
+  --ax-sys-color-border-accent2-darker-surface: 151, 55, 0;
+
+  --ax-sys-color-accent2-darkest-surface: 151, 58, 18;
+  --ax-sys-color-on-accent2-darkest-surface: 255, 248, 241;
+  --ax-sys-color-border-accent2-darkest-surface: 119, 46, 14;
+
+  --ax-sys-color-accent3-lightest-surface: 143, 255, 244;
+  --ax-sys-color-on-accent3-lightest-surface: 0, 57, 52;
+  --ax-sys-color-border-accent3-lightest-surface: 107, 255, 240;
+
+  --ax-sys-color-accent3-lighter-surface: 114, 250, 231;
+  --ax-sys-color-on-accent3-lighter-surface: 0, 57, 49;
+  --ax-sys-color-border-accent3-lighter-surface: 80, 249, 225;
+
+  --ax-sys-color-accent3-light-surface: 90, 229, 209;
+  --ax-sys-color-on-accent3-light-surface: 0, 57, 49;
+  --ax-sys-color-border-accent3-light-surface: 59, 224, 200;
+
+  --ax-sys-color-accent3-surface: 20, 184, 166;
+  --ax-sys-color-on-accent3-surface: 226, 255, 255;
+  --ax-sys-color-border-accent3-surface: 17, 152, 137;
+
+  --ax-sys-color-accent3-dark-surface: 0, 161, 144;
+  --ax-sys-color-on-accent3-dark-surface: 226, 255, 255;
+  --ax-sys-color-border-accent3-dark-surface: 0, 125, 112;
+
+  --ax-sys-color-accent3-darker-surface: 0, 132, 117;
+  --ax-sys-color-on-accent3-darker-surface: 226, 255, 255;
+  --ax-sys-color-border-accent3-darker-surface: 0, 96, 85;
+
+  --ax-sys-color-accent3-darkest-surface: 23, 108, 95;
+  --ax-sys-color-on-accent3-darkest-surface: 227, 255, 254;
+  --ax-sys-color-border-accent3-darkest-surface: 17, 79, 69;
+
+  --ax-sys-color-accent4-lightest-surface: 220, 228, 255;
+  --ax-sys-color-on-accent4-lightest-surface: 39, 45, 65;
+  --ax-sys-color-border-accent4-lightest-surface: 184, 200, 255;
+
+  --ax-sys-color-accent4-lighter-surface: 196, 207, 255;
+  --ax-sys-color-on-accent4-lighter-surface: 36, 42, 79;
+  --ax-sys-color-border-accent4-lighter-surface: 160, 178, 255;
+
+  --ax-sys-color-accent4-light-surface: 161, 173, 255;
+  --ax-sys-color-on-accent4-light-surface: 34, 34, 103;
+  --ax-sys-color-border-accent4-light-surface: 125, 142, 255;
+
+  --ax-sys-color-accent4-surface: 99, 102, 241;
+  --ax-sys-color-on-accent4-surface: 249, 252, 255;
+  --ax-sys-color-border-accent4-surface: 66, 70, 238;
+
+  --ax-sys-color-accent4-dark-surface: 86, 85, 223;
+  --ax-sys-color-on-accent4-dark-surface: 249, 252, 255;
+  --ax-sys-color-border-accent4-dark-surface: 56, 55, 217;
+
+  --ax-sys-color-accent4-darker-surface: 71, 64, 201;
+  --ax-sys-color-on-accent4-darker-surface: 249, 252, 255;
+  --ax-sys-color-border-accent4-darker-surface: 57, 51, 179;
+
+  --ax-sys-color-accent4-darkest-surface: 59, 52, 175;
+  --ax-sys-color-on-accent4-darkest-surface: 249, 252, 255;
+  --ax-sys-color-border-accent4-darkest-surface: 50, 44, 147;
+
+  --ax-sys-color-accent5-lightest-surface: 255, 219, 237;
+  --ax-sys-color-on-accent5-lightest-surface: 63, 36, 50;
+  --ax-sys-color-border-accent5-lightest-surface: 255, 183, 219;
+
+  --ax-sys-color-accent5-lighter-surface: 255, 194, 222;
+  --ax-sys-color-on-accent5-lighter-surface: 73, 27, 51;
+  --ax-sys-color-border-accent5-lighter-surface: 255, 158, 203;
+
+  --ax-sys-color-accent5-light-surface: 255, 152, 200;
+  --ax-sys-color-on-accent5-light-surface: 90, 0, 54;
+  --ax-sys-color-border-accent5-light-surface: 255, 116, 181;
+
+  --ax-sys-color-accent5-surface: 236, 72, 153;
+  --ax-sys-color-on-accent5-surface: 255, 246, 255;
+  --ax-sys-color-border-accent5-surface: 233, 40, 135;
+
+  --ax-sys-color-accent5-dark-surface: 213, 48, 134;
+  --ax-sys-color-on-accent5-dark-surface: 255, 246, 255;
+  --ax-sys-color-border-accent5-dark-surface: 187, 38, 116;
+
+  --ax-sys-color-accent5-darker-surface: 185, 0, 111;
+  --ax-sys-color-on-accent5-darker-surface: 255, 246, 255;
+  --ax-sys-color-border-accent5-darker-surface: 149, 0, 90;
+
+  --ax-sys-color-accent5-darkest-surface: 156, 23, 92;
+  --ax-sys-color-on-accent5-darkest-surface: 255, 246, 254;
+  --ax-sys-color-border-accent5-darkest-surface: 125, 18, 74;
+
+  --ax-sys-color-accent6-lightest-surface: 235, 227, 221;
+  --ax-sys-color-on-accent6-lightest-surface: 50, 44, 40;
+  --ax-sys-color-border-accent6-lightest-surface: 222, 208, 199;
+
+  --ax-sys-color-accent6-lighter-surface: 214, 206, 201;
+  --ax-sys-color-on-accent6-lighter-surface: 51, 44, 41;
+  --ax-sys-color-border-accent6-lighter-surface: 199, 188, 181;
+
+  --ax-sys-color-accent6-light-surface: 183, 175, 170;
+  --ax-sys-color-on-accent6-light-surface: 255, 252, 246;
+  --ax-sys-color-border-accent6-light-surface: 167, 157, 151;
+
+  --ax-sys-color-accent6-surface: 120, 113, 108;
+  --ax-sys-color-on-accent6-surface: 255, 252, 246;
+  --ax-sys-color-border-accent6-surface: 101, 95, 91;
+
+  --ax-sys-color-accent6-dark-surface: 107, 100, 95;
+  --ax-sys-color-on-accent6-dark-surface: 255, 252, 246;
+  --ax-sys-color-border-accent6-dark-surface: 88, 82, 78;
+
+  --ax-sys-color-accent6-darker-surface: 91, 84, 80;
+  --ax-sys-color-on-accent6-darker-surface: 255, 252, 247;
+  --ax-sys-color-border-accent6-darker-surface: 72, 66, 63;
+
+  --ax-sys-color-accent6-darkest-surface: 78, 72, 68;
+  --ax-sys-color-on-accent6-darkest-surface: 255, 252, 247;
+  --ax-sys-color-border-accent6-darkest-surface: 59, 54, 51;
+
   --ax-sys-color-bg-default: var(--ax-sys-color-lightest-surface);
   --ax-sys-color-text-default: var(--ax-sys-color-on-lightest-surface);
   --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);
@@ -454,6 +694,78 @@ html.dark {
   --ax-sys-color-accent-900: 0, 145, 174;
   --ax-sys-color-accent-950: 0, 135, 162;
 
+  --ax-sys-color-accent1-50: 255, 237, 255;
+  --ax-sys-color-accent1-100: 255, 225, 255;
+  --ax-sys-color-accent1-200: 255, 199, 255;
+  --ax-sys-color-accent1-300: 255, 172, 255;
+  --ax-sys-color-accent1-400: 252, 142, 255;
+  --ax-sys-color-accent1-500: 248, 109, 255;
+  --ax-sys-color-accent1-600: 233, 88, 255;
+  --ax-sys-color-accent1-700: 217, 70, 239;
+  --ax-sys-color-accent1-800: 199, 48, 221;
+  --ax-sys-color-accent1-900: 181, 18, 203;
+  --ax-sys-color-accent1-950: 173, 0, 194;
+
+  --ax-sys-color-accent2-50: 255, 242, 228;
+  --ax-sys-color-accent2-100: 255, 232, 214;
+  --ax-sys-color-accent2-200: 255, 213, 186;
+  --ax-sys-color-accent2-300: 255, 194, 157;
+  --ax-sys-color-accent2-400: 255, 173, 125;
+  --ax-sys-color-accent2-500: 255, 151, 89;
+  --ax-sys-color-accent2-600: 255, 129, 45;
+  --ax-sys-color-accent2-700: 249, 115, 22;
+  --ax-sys-color-accent2-800: 228, 96, 0;
+  --ax-sys-color-accent2-900: 208, 77, 0;
+  --ax-sys-color-accent2-950: 195, 71, 0;
+
+  --ax-sys-color-accent3-50: 202, 255, 252;
+  --ax-sys-color-accent3-100: 166, 255, 246;
+  --ax-sys-color-accent3-200: 118, 254, 234;
+  --ax-sys-color-accent3-300: 102, 240, 220;
+  --ax-sys-color-accent3-400: 86, 225, 206;
+  --ax-sys-color-accent3-500: 69, 212, 193;
+  --ax-sys-color-accent3-600: 49, 198, 179;
+  --ax-sys-color-accent3-700: 20, 184, 166;
+  --ax-sys-color-accent3-800: 0, 166, 148;
+  --ax-sys-color-accent3-900: 0, 148, 131;
+  --ax-sys-color-accent3-950: 0, 138, 122;
+
+  --ax-sys-color-accent4-50: 239, 244, 255;
+  --ax-sys-color-accent4-100: 226, 233, 255;
+  --ax-sys-color-accent4-200: 202, 212, 255;
+  --ax-sys-color-accent4-300: 178, 190, 255;
+  --ax-sys-color-accent4-400: 156, 168, 255;
+  --ax-sys-color-accent4-500: 134, 144, 255;
+  --ax-sys-color-accent4-600: 115, 121, 255;
+  --ax-sys-color-accent4-700: 99, 102, 241;
+  --ax-sys-color-accent4-800: 88, 89, 227;
+  --ax-sys-color-accent4-900: 78, 75, 213;
+  --ax-sys-color-accent4-950: 73, 69, 206;
+
+  --ax-sys-color-accent5-50: 255, 237, 248;
+  --ax-sys-color-accent5-100: 255, 225, 241;
+  --ax-sys-color-accent5-200: 255, 200, 226;
+  --ax-sys-color-accent5-300: 255, 174, 211;
+  --ax-sys-color-accent5-400: 255, 146, 197;
+  --ax-sys-color-accent5-500: 255, 113, 183;
+  --ax-sys-color-accent5-600: 254, 89, 168;
+  --ax-sys-color-accent5-700: 236, 72, 153;
+  --ax-sys-color-accent5-800: 218, 53, 138;
+  --ax-sys-color-accent5-900: 200, 30, 122;
+  --ax-sys-color-accent5-950: 190, 14, 115;
+
+  --ax-sys-color-accent6-50: 251, 243, 237;
+  --ax-sys-color-accent6-100: 240, 232, 226;
+  --ax-sys-color-accent6-200: 219, 211, 206;
+  --ax-sys-color-accent6-300: 198, 191, 185;
+  --ax-sys-color-accent6-400: 178, 171, 165;
+  --ax-sys-color-accent6-500: 158, 151, 146;
+  --ax-sys-color-accent6-600: 139, 132, 127;
+  --ax-sys-color-accent6-700: 120, 113, 108;
+  --ax-sys-color-accent6-800: 109, 103, 98;
+  --ax-sys-color-accent6-900: 99, 92, 88;
+  --ax-sys-color-accent6-950: 94, 87, 83;
+
   --ax-sys-color-primary-lightest-surface: 219, 238, 255;
   --ax-sys-color-on-primary-lightest-surface: 9, 23, 35;
   --ax-sys-color-border-primary-lightest-surface: 255, 255, 255;
@@ -621,6 +933,174 @@ html.dark {
   --ax-sys-color-accent-darkest-surface: 0, 163, 193;
   --ax-sys-color-on-accent-darkest-surface: 0, 27, 38;
   --ax-sys-color-border-accent-darkest-surface: 0, 202, 239;
+
+  --ax-sys-color-accent1-lightest-surface: 255, 225, 255;
+  --ax-sys-color-on-accent1-lightest-surface: 33, 13, 34;
+  --ax-sys-color-border-accent1-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-accent1-lighter-surface: 255, 199, 255;
+  --ax-sys-color-on-accent1-lighter-surface: 42, 0, 44;
+  --ax-sys-color-border-accent1-lighter-surface: 255, 245, 255;
+
+  --ax-sys-color-accent1-light-surface: 255, 172, 255;
+  --ax-sys-color-on-accent1-light-surface: 45, 0, 48;
+  --ax-sys-color-border-accent1-light-surface: 255, 218, 255;
+
+  --ax-sys-color-accent1-surface: 248, 109, 255;
+  --ax-sys-color-on-accent1-surface: 45, 0, 49;
+  --ax-sys-color-border-accent1-surface: 250, 155, 255;
+
+  --ax-sys-color-accent1-dark-surface: 233, 88, 255;
+  --ax-sys-color-on-accent1-dark-surface: 44, 0, 52;
+  --ax-sys-color-border-accent1-dark-surface: 239, 134, 255;
+
+  --ax-sys-color-accent1-darker-surface: 217, 70, 239;
+  --ax-sys-color-on-accent1-darker-surface: 44, 0, 52;
+  --ax-sys-color-border-accent1-darker-surface: 226, 112, 243;
+
+  --ax-sys-color-accent1-darkest-surface: 199, 48, 221;
+  --ax-sys-color-on-accent1-darkest-surface: 44, 0, 52;
+  --ax-sys-color-border-accent1-darkest-surface: 210, 87, 227;
+
+  --ax-sys-color-accent2-lightest-surface: 255, 232, 214;
+  --ax-sys-color-on-accent2-lightest-surface: 33, 18, 5;
+  --ax-sys-color-border-accent2-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-accent2-lighter-surface: 255, 213, 186;
+  --ax-sys-color-on-accent2-lighter-surface: 41, 12, 0;
+  --ax-sys-color-border-accent2-lighter-surface: 255, 241, 232;
+
+  --ax-sys-color-accent2-light-surface: 255, 194, 157;
+  --ax-sys-color-on-accent2-light-surface: 46, 7, 0;
+  --ax-sys-color-border-accent2-light-surface: 255, 223, 203;
+
+  --ax-sys-color-accent2-surface: 255, 151, 89;
+  --ax-sys-color-on-accent2-surface: 47, 6, 0;
+  --ax-sys-color-border-accent2-surface: 255, 180, 135;
+
+  --ax-sys-color-accent2-dark-surface: 255, 129, 45;
+  --ax-sys-color-on-accent2-dark-surface: 47, 5, 0;
+  --ax-sys-color-border-accent2-dark-surface: 255, 157, 91;
+
+  --ax-sys-color-accent2-darker-surface: 249, 115, 22;
+  --ax-sys-color-on-accent2-darker-surface: 48, 4, 0;
+  --ax-sys-color-border-accent2-darker-surface: 250, 142, 67;
+
+  --ax-sys-color-accent2-darkest-surface: 228, 96, 0;
+  --ax-sys-color-on-accent2-darkest-surface: 49, 3, 0;
+  --ax-sys-color-border-accent2-darkest-surface: 255, 118, 19;
+
+  --ax-sys-color-accent3-lightest-surface: 166, 255, 246;
+  --ax-sys-color-on-accent3-lightest-surface: 0, 29, 26;
+  --ax-sys-color-border-accent3-lightest-surface: 212, 255, 251;
+
+  --ax-sys-color-accent3-lighter-surface: 118, 254, 234;
+  --ax-sys-color-on-accent3-lighter-surface: 0, 30, 24;
+  --ax-sys-color-border-accent3-lighter-surface: 164, 254, 241;
+
+  --ax-sys-color-accent3-light-surface: 102, 240, 220;
+  --ax-sys-color-on-accent3-light-surface: 0, 30, 24;
+  --ax-sys-color-border-accent3-light-surface: 144, 244, 230;
+
+  --ax-sys-color-accent3-surface: 69, 212, 193;
+  --ax-sys-color-on-accent3-surface: 0, 30, 24;
+  --ax-sys-color-border-accent3-surface: 106, 221, 205;
+
+  --ax-sys-color-accent3-dark-surface: 49, 198, 179;
+  --ax-sys-color-on-accent3-dark-surface: 0, 30, 24;
+  --ax-sys-color-border-accent3-dark-surface: 81, 212, 195;
+
+  --ax-sys-color-accent3-darker-surface: 20, 184, 166;
+  --ax-sys-color-on-accent3-darker-surface: 0, 30, 24;
+  --ax-sys-color-border-accent3-darker-surface: 25, 225, 203;
+
+  --ax-sys-color-accent3-darkest-surface: 0, 166, 148;
+  --ax-sys-color-on-accent3-darkest-surface: 0, 30, 24;
+  --ax-sys-color-border-accent3-darkest-surface: 0, 212, 189;
+
+  --ax-sys-color-accent4-lightest-surface: 226, 233, 255;
+  --ax-sys-color-on-accent4-lightest-surface: 17, 21, 36;
+  --ax-sys-color-border-accent4-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-accent4-lighter-surface: 202, 212, 255;
+  --ax-sys-color-on-accent4-lighter-surface: 15, 18, 49;
+  --ax-sys-color-border-accent4-lighter-surface: 248, 249, 255;
+
+  --ax-sys-color-accent4-light-surface: 178, 190, 255;
+  --ax-sys-color-on-accent4-light-surface: 14, 12, 63;
+  --ax-sys-color-border-accent4-light-surface: 224, 229, 255;
+
+  --ax-sys-color-accent4-surface: 134, 144, 255;
+  --ax-sys-color-on-accent4-surface: 18, 0, 85;
+  --ax-sys-color-border-accent4-surface: 180, 186, 255;
+
+  --ax-sys-color-accent4-dark-surface: 115, 121, 255;
+  --ax-sys-color-on-accent4-dark-surface: 18, 0, 85;
+  --ax-sys-color-border-accent4-dark-surface: 161, 165, 255;
+
+  --ax-sys-color-accent4-darker-surface: 99, 102, 241;
+  --ax-sys-color-on-accent4-darker-surface: 18, 0, 85;
+  --ax-sys-color-border-accent4-darker-surface: 141, 143, 245;
+
+  --ax-sys-color-accent4-darkest-surface: 88, 89, 227;
+  --ax-sys-color-on-accent4-darkest-surface: 18, 0, 86;
+  --ax-sys-color-border-accent4-darkest-surface: 127, 128, 234;
+
+  --ax-sys-color-accent5-lightest-surface: 255, 225, 241;
+  --ax-sys-color-on-accent5-lightest-surface: 34, 14, 26;
+  --ax-sys-color-border-accent5-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-accent5-lighter-surface: 255, 200, 226;
+  --ax-sys-color-on-accent5-lighter-surface: 43, 5, 27;
+  --ax-sys-color-border-accent5-lighter-surface: 255, 246, 250;
+
+  --ax-sys-color-accent5-light-surface: 255, 174, 211;
+  --ax-sys-color-on-accent5-light-surface: 51, 0, 28;
+  --ax-sys-color-border-accent5-light-surface: 255, 220, 236;
+
+  --ax-sys-color-accent5-surface: 255, 113, 183;
+  --ax-sys-color-on-accent5-surface: 52, 0, 27;
+  --ax-sys-color-border-accent5-surface: 255, 159, 206;
+
+  --ax-sys-color-accent5-dark-surface: 254, 89, 168;
+  --ax-sys-color-on-accent5-dark-surface: 52, 0, 25;
+  --ax-sys-color-border-accent5-dark-surface: 254, 135, 192;
+
+  --ax-sys-color-accent5-darker-surface: 236, 72, 153;
+  --ax-sys-color-on-accent5-darker-surface: 52, 0, 25;
+  --ax-sys-color-border-accent5-darker-surface: 240, 114, 176;
+
+  --ax-sys-color-accent5-darkest-surface: 218, 53, 138;
+  --ax-sys-color-on-accent5-darkest-surface: 52, 0, 25;
+  --ax-sys-color-border-accent5-darkest-surface: 225, 92, 160;
+
+  --ax-sys-color-accent6-lightest-surface: 240, 232, 226;
+  --ax-sys-color-on-accent6-lightest-surface: 26, 21, 17;
+  --ax-sys-color-border-accent6-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-accent6-lighter-surface: 219, 211, 206;
+  --ax-sys-color-on-accent6-lighter-surface: 26, 21, 17;
+  --ax-sys-color-border-accent6-lighter-surface: 238, 235, 232;
+
+  --ax-sys-color-accent6-light-surface: 198, 191, 185;
+  --ax-sys-color-on-accent6-light-surface: 26, 21, 17;
+  --ax-sys-color-border-accent6-light-surface: 219, 214, 210;
+
+  --ax-sys-color-accent6-surface: 158, 151, 146;
+  --ax-sys-color-on-accent6-surface: 26, 21, 17;
+  --ax-sys-color-border-accent6-surface: 180, 174, 170;
+
+  --ax-sys-color-accent6-dark-surface: 139, 132, 127;
+  --ax-sys-color-on-accent6-dark-surface: 255, 252, 246;
+  --ax-sys-color-border-accent6-dark-surface: 161, 155, 151;
+
+  --ax-sys-color-accent6-darker-surface: 120, 113, 108;
+  --ax-sys-color-on-accent6-darker-surface: 255, 252, 246;
+  --ax-sys-color-border-accent6-darker-surface: 143, 136, 131;
+
+  --ax-sys-color-accent6-darkest-surface: 109, 103, 98;
+  --ax-sys-color-on-accent6-darkest-surface: 255, 252, 246;
+  --ax-sys-color-border-accent6-darkest-surface: 133, 126, 120;
 }
 
 @theme {
@@ -630,7 +1110,6 @@ html.dark {
   --radius-default: var(--ax-sys-border-radius);
   --breakpoint-3xl: 1920px;
   --breakpoint-4xl: 2560px;
-
   /* Surface Surfaces */
   --color-surface: rgba(var(--ax-sys-color-surface));
   --color-surface-50: rgba(var(--ax-sys-color-surface-50));
@@ -701,6 +1180,7 @@ html.dark {
   --color-primary-darkest: rgba(var(--ax-sys-color-primary-darkest-surface));
   --color-on-primary-darkest: rgba(var(--ax-sys-color-on-primary-darkest-surface));
   --color-border-primary-darkest: rgba(var(--ax-sys-color-border-primary-darkest-surface));
+
   /* Secondary Surfaces */
   --color-secondary: rgba(var(--ax-sys-color-secondary-surface));
   --color-secondary-50: rgba(var(--ax-sys-color-secondary-50));
@@ -736,6 +1216,7 @@ html.dark {
   --color-secondary-darkest: rgba(var(--ax-sys-color-secondary-darkest-surface));
   --color-on-secondary-darkest: rgba(var(--ax-sys-color-on-secondary-darkest-surface));
   --color-border-secondary-darkest: rgba(var(--ax-sys-color-border-secondary-darkest-surface));
+
   /* Success Surfaces */
   --color-success: rgba(var(--ax-sys-color-success-surface));
   --color-success-50: rgba(var(--ax-sys-color-success-50));
@@ -771,6 +1252,7 @@ html.dark {
   --color-success-darkest: rgba(var(--ax-sys-color-success-darkest-surface));
   --color-on-success-darkest: rgba(var(--ax-sys-color-on-success-darkest-surface));
   --color-border-success-darkest: rgba(var(--ax-sys-color-border-success-darkest-surface));
+
   /* Warning Surfaces */
   --color-warning: rgba(var(--ax-sys-color-warning-surface));
   --color-warning-50: rgba(var(--ax-sys-color-warning-50));
@@ -806,6 +1288,7 @@ html.dark {
   --color-warning-darkest: rgba(var(--ax-sys-color-warning-darkest-surface));
   --color-on-warning-darkest: rgba(var(--ax-sys-color-on-warning-darkest-surface));
   --color-border-warning-darkest: rgba(var(--ax-sys-color-border-warning-darkest-surface));
+
   /* Danger Surfaces */
   --color-danger: rgba(var(--ax-sys-color-danger-surface));
   --color-danger-50: rgba(var(--ax-sys-color-danger-50));
@@ -877,6 +1360,222 @@ html.dark {
   --color-accent-darkest: rgba(var(--ax-sys-color-accent-darkest-surface));
   --color-on-accent-darkest: rgba(var(--ax-sys-color-on-accent-darkest-surface));
   --color-border-accent-darkest: rgba(var(--ax-sys-color-border-accent-darkest-surface));
+
+  /* Accent 1 Surfaces */
+  --color-accent1: rgba(var(--ax-sys-color-accent1-surface));
+  --color-accent1-50: rgba(var(--ax-sys-color-accent1-50));
+  --color-accent1-100: rgba(var(--ax-sys-color-accent1-100));
+  --color-accent1-200: rgba(var(--ax-sys-color-accent1-200));
+  --color-accent1-300: rgba(var(--ax-sys-color-accent1-300));
+  --color-accent1-400: rgba(var(--ax-sys-color-accent1-400));
+  --color-accent1-500: rgba(var(--ax-sys-color-accent1-500));
+  --color-accent1-600: rgba(var(--ax-sys-color-accent1-600));
+  --color-accent1-700: rgba(var(--ax-sys-color-accent1-700));
+  --color-accent1-800: rgba(var(--ax-sys-color-accent1-800));
+  --color-accent1-900: rgba(var(--ax-sys-color-accent1-900));
+  --color-accent1-950: rgba(var(--ax-sys-color-accent1-950));
+
+  --color-accent1-lightest: rgba(var(--ax-sys-color-accent1-lightest-surface));
+  --color-on-accent1-lightest: rgba(var(--ax-sys-color-on-accent1-lightest-surface));
+  --color-border-accent1-lightest: rgba(var(--ax-sys-color-border-accent1-lightest-surface));
+  --color-accent1-lighter: rgba(var(--ax-sys-color-accent1-lighter-surface));
+  --color-on-accent1-lighter: rgba(var(--ax-sys-color-on-accent1-lighter-surface));
+  --color-border-accent1-lighter: rgba(var(--ax-sys-color-border-accent1-lighter-surface));
+  --color-accent1-light: rgba(var(--ax-sys-color-accent1-light-surface));
+  --color-on-accent1-light: rgba(var(--ax-sys-color-on-accent1-light-surface));
+  --color-border-accent1-light: rgba(var(--ax-sys-color-border-accent1-light-surface));
+  --color-accent1: rgba(var(--ax-sys-color-accent1-surface));
+  --color-on-accent1: rgba(var(--ax-sys-color-on-accent1-surface));
+  --color-border-accent1: rgba(var(--ax-sys-color-border-accent1-surface));
+  --color-accent1-dark: rgba(var(--ax-sys-color-accent1-dark-surface));
+  --color-on-accent1-dark: rgba(var(--ax-sys-color-on-accent1-dark-surface));
+  --color-border-accent1-dark: rgba(var(--ax-sys-color-border-accent1-dark-surface));
+  --color-accent1-darker: rgba(var(--ax-sys-color-accent1-darker-surface));
+  --color-on-accent1-darker: rgba(var(--ax-sys-color-on-accent1-darker-surface));
+  --color-border-accent1-darker: rgba(var(--ax-sys-color-border-accent1-darker-surface));
+  --color-accent1-darkest: rgba(var(--ax-sys-color-accent1-darkest-surface));
+  --color-on-accent1-darkest: rgba(var(--ax-sys-color-on-accent1-darkest-surface));
+  --color-border-accent1-darkest: rgba(var(--ax-sys-color-border-accent1-darkest-surface));
+
+  /* Accent 2 Surfaces */
+  --color-accent2: rgba(var(--ax-sys-color-accent2-surface));
+  --color-accent2-50: rgba(var(--ax-sys-color-accent2-50));
+  --color-accent2-100: rgba(var(--ax-sys-color-accent2-100));
+  --color-accent2-200: rgba(var(--ax-sys-color-accent2-200));
+  --color-accent2-300: rgba(var(--ax-sys-color-accent2-300));
+  --color-accent2-400: rgba(var(--ax-sys-color-accent2-400));
+  --color-accent2-500: rgba(var(--ax-sys-color-accent2-500));
+  --color-accent2-600: rgba(var(--ax-sys-color-accent2-600));
+  --color-accent2-700: rgba(var(--ax-sys-color-accent2-700));
+  --color-accent2-800: rgba(var(--ax-sys-color-accent2-800));
+  --color-accent2-900: rgba(var(--ax-sys-color-accent2-900));
+  --color-accent2-950: rgba(var(--ax-sys-color-accent2-950));
+
+  --color-accent2-lightest: rgba(var(--ax-sys-color-accent2-lightest-surface));
+  --color-on-accent2-lightest: rgba(var(--ax-sys-color-on-accent2-lightest-surface));
+  --color-border-accent2-lightest: rgba(var(--ax-sys-color-border-accent2-lightest-surface));
+  --color-accent2-lighter: rgba(var(--ax-sys-color-accent2-lighter-surface));
+  --color-on-accent2-lighter: rgba(var(--ax-sys-color-on-accent2-lighter-surface));
+  --color-border-accent2-lighter: rgba(var(--ax-sys-color-border-accent2-lighter-surface));
+  --color-accent2-light: rgba(var(--ax-sys-color-accent2-light-surface));
+  --color-on-accent2-light: rgba(var(--ax-sys-color-on-accent2-light-surface));
+  --color-border-accent2-light: rgba(var(--ax-sys-color-border-accent2-light-surface));
+  --color-accent2: rgba(var(--ax-sys-color-accent2-surface));
+  --color-on-accent2: rgba(var(--ax-sys-color-on-accent2-surface));
+  --color-border-accent2: rgba(var(--ax-sys-color-border-accent2-surface));
+  --color-accent2-dark: rgba(var(--ax-sys-color-accent2-dark-surface));
+  --color-on-accent2-dark: rgba(var(--ax-sys-color-on-accent2-dark-surface));
+  --color-border-accent2-dark: rgba(var(--ax-sys-color-border-accent2-dark-surface));
+  --color-accent2-darker: rgba(var(--ax-sys-color-accent2-darker-surface));
+  --color-on-accent2-darker: rgba(var(--ax-sys-color-on-accent2-darker-surface));
+  --color-border-accent2-darker: rgba(var(--ax-sys-color-border-accent2-darker-surface));
+  --color-accent2-darkest: rgba(var(--ax-sys-color-accent2-darkest-surface));
+  --color-on-accent2-darkest: rgba(var(--ax-sys-color-on-accent2-darkest-surface));
+  --color-border-accent2-darkest: rgba(var(--ax-sys-color-border-accent2-darkest-surface));
+
+  /* Accent 3 Surfaces */
+  --color-accent3: rgba(var(--ax-sys-color-accent3-surface));
+  --color-accent3-50: rgba(var(--ax-sys-color-accent3-50));
+  --color-accent3-100: rgba(var(--ax-sys-color-accent3-100));
+  --color-accent3-200: rgba(var(--ax-sys-color-accent3-200));
+  --color-accent3-300: rgba(var(--ax-sys-color-accent3-300));
+  --color-accent3-400: rgba(var(--ax-sys-color-accent3-400));
+  --color-accent3-500: rgba(var(--ax-sys-color-accent3-500));
+  --color-accent3-600: rgba(var(--ax-sys-color-accent3-600));
+  --color-accent3-700: rgba(var(--ax-sys-color-accent3-700));
+  --color-accent3-800: rgba(var(--ax-sys-color-accent3-800));
+  --color-accent3-900: rgba(var(--ax-sys-color-accent3-900));
+  --color-accent3-950: rgba(var(--ax-sys-color-accent3-950));
+
+  --color-accent3-lightest: rgba(var(--ax-sys-color-accent3-lightest-surface));
+  --color-on-accent3-lightest: rgba(var(--ax-sys-color-on-accent3-lightest-surface));
+  --color-border-accent3-lightest: rgba(var(--ax-sys-color-border-accent3-lightest-surface));
+  --color-accent3-lighter: rgba(var(--ax-sys-color-accent3-lighter-surface));
+  --color-on-accent3-lighter: rgba(var(--ax-sys-color-on-accent3-lighter-surface));
+  --color-border-accent3-lighter: rgba(var(--ax-sys-color-border-accent3-lighter-surface));
+  --color-accent3-light: rgba(var(--ax-sys-color-accent3-light-surface));
+  --color-on-accent3-light: rgba(var(--ax-sys-color-on-accent3-light-surface));
+  --color-border-accent3-light: rgba(var(--ax-sys-color-border-accent3-light-surface));
+  --color-accent3: rgba(var(--ax-sys-color-accent3-surface));
+  --color-on-accent3: rgba(var(--ax-sys-color-on-accent3-surface));
+  --color-border-accent3: rgba(var(--ax-sys-color-border-accent3-surface));
+  --color-accent3-dark: rgba(var(--ax-sys-color-accent3-dark-surface));
+  --color-on-accent3-dark: rgba(var(--ax-sys-color-on-accent3-dark-surface));
+  --color-border-accent3-dark: rgba(var(--ax-sys-color-border-accent3-dark-surface));
+  --color-accent3-darker: rgba(var(--ax-sys-color-accent3-darker-surface));
+  --color-on-accent3-darker: rgba(var(--ax-sys-color-on-accent3-darker-surface));
+  --color-border-accent3-darker: rgba(var(--ax-sys-color-border-accent3-darker-surface));
+  --color-accent3-darkest: rgba(var(--ax-sys-color-accent3-darkest-surface));
+  --color-on-accent3-darkest: rgba(var(--ax-sys-color-on-accent3-darkest-surface));
+  --color-border-accent3-darkest: rgba(var(--ax-sys-color-border-accent3-darkest-surface));
+
+  /* Accent 4 Surfaces */
+  --color-accent4: rgba(var(--ax-sys-color-accent4-surface));
+  --color-accent4-50: rgba(var(--ax-sys-color-accent4-50));
+  --color-accent4-100: rgba(var(--ax-sys-color-accent4-100));
+  --color-accent4-200: rgba(var(--ax-sys-color-accent4-200));
+  --color-accent4-300: rgba(var(--ax-sys-color-accent4-300));
+  --color-accent4-400: rgba(var(--ax-sys-color-accent4-400));
+  --color-accent4-500: rgba(var(--ax-sys-color-accent4-500));
+  --color-accent4-600: rgba(var(--ax-sys-color-accent4-600));
+  --color-accent4-700: rgba(var(--ax-sys-color-accent4-700));
+  --color-accent4-800: rgba(var(--ax-sys-color-accent4-800));
+  --color-accent4-900: rgba(var(--ax-sys-color-accent4-900));
+  --color-accent4-950: rgba(var(--ax-sys-color-accent4-950));
+
+  --color-accent4-lightest: rgba(var(--ax-sys-color-accent4-lightest-surface));
+  --color-on-accent4-lightest: rgba(var(--ax-sys-color-on-accent4-lightest-surface));
+  --color-border-accent4-lightest: rgba(var(--ax-sys-color-border-accent4-lightest-surface));
+  --color-accent4-lighter: rgba(var(--ax-sys-color-accent4-lighter-surface));
+  --color-on-accent4-lighter: rgba(var(--ax-sys-color-on-accent4-lighter-surface));
+  --color-border-accent4-lighter: rgba(var(--ax-sys-color-border-accent4-lighter-surface));
+  --color-accent4-light: rgba(var(--ax-sys-color-accent4-light-surface));
+  --color-on-accent4-light: rgba(var(--ax-sys-color-on-accent4-light-surface));
+  --color-border-accent4-light: rgba(var(--ax-sys-color-border-accent4-light-surface));
+  --color-accent4: rgba(var(--ax-sys-color-accent4-surface));
+  --color-on-accent4: rgba(var(--ax-sys-color-on-accent4-surface));
+  --color-border-accent4: rgba(var(--ax-sys-color-border-accent4-surface));
+  --color-accent4-dark: rgba(var(--ax-sys-color-accent4-dark-surface));
+  --color-on-accent4-dark: rgba(var(--ax-sys-color-on-accent4-dark-surface));
+  --color-border-accent4-dark: rgba(var(--ax-sys-color-border-accent4-dark-surface));
+  --color-accent4-darker: rgba(var(--ax-sys-color-accent4-darker-surface));
+  --color-on-accent4-darker: rgba(var(--ax-sys-color-on-accent4-darker-surface));
+  --color-border-accent4-darker: rgba(var(--ax-sys-color-border-accent4-darker-surface));
+  --color-accent4-darkest: rgba(var(--ax-sys-color-accent4-darkest-surface));
+  --color-on-accent4-darkest: rgba(var(--ax-sys-color-on-accent4-darkest-surface));
+  --color-border-accent4-darkest: rgba(var(--ax-sys-color-border-accent4-darkest-surface));
+
+  /* Accent 5 Surfaces */
+  --color-accent5: rgba(var(--ax-sys-color-accent5-surface));
+  --color-accent5-50: rgba(var(--ax-sys-color-accent5-50));
+  --color-accent5-100: rgba(var(--ax-sys-color-accent5-100));
+  --color-accent5-200: rgba(var(--ax-sys-color-accent5-200));
+  --color-accent5-300: rgba(var(--ax-sys-color-accent5-300));
+  --color-accent5-400: rgba(var(--ax-sys-color-accent5-400));
+  --color-accent5-500: rgba(var(--ax-sys-color-accent5-500));
+  --color-accent5-600: rgba(var(--ax-sys-color-accent5-600));
+  --color-accent5-700: rgba(var(--ax-sys-color-accent5-700));
+  --color-accent5-800: rgba(var(--ax-sys-color-accent5-800));
+  --color-accent5-900: rgba(var(--ax-sys-color-accent5-900));
+  --color-accent5-950: rgba(var(--ax-sys-color-accent5-950));
+
+  --color-accent5-lightest: rgba(var(--ax-sys-color-accent5-lightest-surface));
+  --color-on-accent5-lightest: rgba(var(--ax-sys-color-on-accent5-lightest-surface));
+  --color-border-accent5-lightest: rgba(var(--ax-sys-color-border-accent5-lightest-surface));
+  --color-accent5-lighter: rgba(var(--ax-sys-color-accent5-lighter-surface));
+  --color-on-accent5-lighter: rgba(var(--ax-sys-color-on-accent5-lighter-surface));
+  --color-border-accent5-lighter: rgba(var(--ax-sys-color-border-accent5-lighter-surface));
+  --color-accent5-light: rgba(var(--ax-sys-color-accent5-light-surface));
+  --color-on-accent5-light: rgba(var(--ax-sys-color-on-accent5-light-surface));
+  --color-border-accent5-light: rgba(var(--ax-sys-color-border-accent5-light-surface));
+  --color-accent5: rgba(var(--ax-sys-color-accent5-surface));
+  --color-on-accent5: rgba(var(--ax-sys-color-on-accent5-surface));
+  --color-border-accent5: rgba(var(--ax-sys-color-border-accent5-surface));
+  --color-accent5-dark: rgba(var(--ax-sys-color-accent5-dark-surface));
+  --color-on-accent5-dark: rgba(var(--ax-sys-color-on-accent5-dark-surface));
+  --color-border-accent5-dark: rgba(var(--ax-sys-color-border-accent5-dark-surface));
+  --color-accent5-darker: rgba(var(--ax-sys-color-accent5-darker-surface));
+  --color-on-accent5-darker: rgba(var(--ax-sys-color-on-accent5-darker-surface));
+  --color-border-accent5-darker: rgba(var(--ax-sys-color-border-accent5-darker-surface));
+  --color-accent5-darkest: rgba(var(--ax-sys-color-accent5-darkest-surface));
+  --color-on-accent5-darkest: rgba(var(--ax-sys-color-on-accent5-darkest-surface));
+  --color-border-accent5-darkest: rgba(var(--ax-sys-color-border-accent5-darkest-surface));
+
+  /* Accent 6 Surfaces */
+  --color-accent6: rgba(var(--ax-sys-color-accent6-surface));
+  --color-accent6-50: rgba(var(--ax-sys-color-accent6-50));
+  --color-accent6-100: rgba(var(--ax-sys-color-accent6-100));
+  --color-accent6-200: rgba(var(--ax-sys-color-accent6-200));
+  --color-accent6-300: rgba(var(--ax-sys-color-accent6-300));
+  --color-accent6-400: rgba(var(--ax-sys-color-accent6-400));
+  --color-accent6-500: rgba(var(--ax-sys-color-accent6-500));
+  --color-accent6-600: rgba(var(--ax-sys-color-accent6-600));
+  --color-accent6-700: rgba(var(--ax-sys-color-accent6-700));
+  --color-accent6-800: rgba(var(--ax-sys-color-accent6-800));
+  --color-accent6-900: rgba(var(--ax-sys-color-accent6-900));
+  --color-accent6-950: rgba(var(--ax-sys-color-accent6-950));
+
+  --color-accent6-lightest: rgba(var(--ax-sys-color-accent6-lightest-surface));
+  --color-on-accent6-lightest: rgba(var(--ax-sys-color-on-accent6-lightest-surface));
+  --color-border-accent6-lightest: rgba(var(--ax-sys-color-border-accent6-lightest-surface));
+  --color-accent6-lighter: rgba(var(--ax-sys-color-accent6-lighter-surface));
+  --color-on-accent6-lighter: rgba(var(--ax-sys-color-on-accent6-lighter-surface));
+  --color-border-accent6-lighter: rgba(var(--ax-sys-color-border-accent6-lighter-surface));
+  --color-accent6-light: rgba(var(--ax-sys-color-accent6-light-surface));
+  --color-on-accent6-light: rgba(var(--ax-sys-color-on-accent6-light-surface));
+  --color-border-accent6-light: rgba(var(--ax-sys-color-border-accent6-light-surface));
+  --color-accent6: rgba(var(--ax-sys-color-accent6-surface));
+  --color-on-accent6: rgba(var(--ax-sys-color-on-accent6-surface));
+  --color-border-accent6: rgba(var(--ax-sys-color-border-accent6-surface));
+  --color-accent6-dark: rgba(var(--ax-sys-color-accent6-dark-surface));
+  --color-on-accent6-dark: rgba(var(--ax-sys-color-on-accent6-dark-surface));
+  --color-border-accent6-dark: rgba(var(--ax-sys-color-border-accent6-dark-surface));
+  --color-accent6-darker: rgba(var(--ax-sys-color-accent6-darker-surface));
+  --color-on-accent6-darker: rgba(var(--ax-sys-color-on-accent6-darker-surface));
+  --color-border-accent6-darker: rgba(var(--ax-sys-color-border-accent6-darker-surface));
+  --color-accent6-darkest: rgba(var(--ax-sys-color-accent6-darkest-surface));
+  --color-on-accent6-darkest: rgba(var(--ax-sys-color-on-accent6-darkest-surface));
+  --color-border-accent6-darkest: rgba(var(--ax-sys-color-border-accent6-darkest-surface));
 }
 
 @utility bg-default {
@@ -1397,6 +2096,414 @@ html.dark {
   --ax-comp-border-darkest: var(--color-border-accent-darkest);
 }
 
+/* Accent 1 Surfaces */
+
+@utility accent1-lightest-surface {
+  background-color: var(--color-accent1-lightest);
+  color: var(--color-on-accent1-lightest);
+  border-color: var(--color-border-accent1-lightest);
+}
+
+@utility accent1-lighter-surface {
+  background-color: var(--color-accent1-lighter);
+  color: var(--color-on-accent1-lighter);
+  border-color: var(--color-border-accent1-lighter);
+}
+
+@utility accent1-light-surface {
+  background-color: var(--color-accent1-light);
+  color: var(--color-on-accent1-light);
+  border-color: var(--color-border-accent1-light);
+}
+
+@utility accent1-surface {
+  background-color: var(--color-accent1);
+  color: var(--color-on-accent1);
+  border-color: var(--color-border-accent1);
+}
+
+@utility accent1-dark-surface {
+  background-color: var(--color-accent1-dark);
+  color: var(--color-on-accent1-dark);
+  border-color: var(--color-border-accent1-dark);
+}
+
+@utility accent1-darker-surface {
+  background-color: var(--color-accent1-darker);
+  color: var(--color-on-accent1-darker);
+  border-color: var(--color-border-accent1-darker);
+}
+
+@utility accent1-darkest-surface {
+  background-color: var(--color-accent1-darkest);
+  color: var(--color-on-accent1-darkest);
+  border-color: var(--color-border-accent1-darkest);
+}
+
+@utility ax-accent1 {
+  --ax-comp-bg-lightest: var(--color-accent1-lightest);
+  --ax-comp-text-lightest: var(--color-on-accent1-lightest);
+  --ax-comp-border-lightest: var(--color-border-accent1-lightest);
+  --ax-comp-bg-lighter: var(--color-accent1-lighter);
+  --ax-comp-text-lighter: var(--color-on-accent1-lighter);
+  --ax-comp-border-lighter: var(--color-border-accent1-lighter);
+  --ax-comp-bg-light: var(--color-accent1-light);
+  --ax-comp-text-light: var(--color-on-accent1-light);
+  --ax-comp-border-light: var(--color-border-accent1-light);
+  --ax-comp-bg: var(--color-accent1);
+  --ax-comp-text: var(--color-on-accent1);
+  --ax-comp-border: var(--color-border-accent1);
+  --ax-comp-bg-dark: var(--color-accent1-dark);
+  --ax-comp-text-dark: var(--color-on-accent1-dark);
+  --ax-comp-border-dark: var(--color-border-accent1-dark);
+  --ax-comp-bg-darker: var(--color-accent1-darker);
+  --ax-comp-text-darker: var(--color-on-accent1-darker);
+  --ax-comp-border-darker: var(--color-border-accent1-darker);
+  --ax-comp-bg-darkest: var(--color-accent1-darkest);
+  --ax-comp-text-darkest: var(--color-on-accent1-darkest);
+  --ax-comp-border-darkest: var(--color-border-accent1-darkest);
+}
+
+/* Accent 2 Surfaces */
+
+@utility accent2-lightest-surface {
+  background-color: var(--color-accent2-lightest);
+  color: var(--color-on-accent2-lightest);
+  border-color: var(--color-border-accent2-lightest);
+}
+
+@utility accent2-lighter-surface {
+  background-color: var(--color-accent2-lighter);
+  color: var(--color-on-accent2-lighter);
+  border-color: var(--color-border-accent2-lighter);
+}
+
+@utility accent2-light-surface {
+  background-color: var(--color-accent2-light);
+  color: var(--color-on-accent2-light);
+  border-color: var(--color-border-accent2-light);
+}
+
+@utility accent2-surface {
+  background-color: var(--color-accent2);
+  color: var(--color-on-accent2);
+  border-color: var(--color-border-accent2);
+}
+
+@utility accent2-dark-surface {
+  background-color: var(--color-accent2-dark);
+  color: var(--color-on-accent2-dark);
+  border-color: var(--color-border-accent2-dark);
+}
+
+@utility accent2-darker-surface {
+  background-color: var(--color-accent2-darker);
+  color: var(--color-on-accent2-darker);
+  border-color: var(--color-border-accent2-darker);
+}
+
+@utility accent2-darkest-surface {
+  background-color: var(--color-accent2-darkest);
+  color: var(--color-on-accent2-darkest);
+  border-color: var(--color-border-accent2-darkest);
+}
+
+@utility ax-accent2 {
+  --ax-comp-bg-lightest: var(--color-accent2-lightest);
+  --ax-comp-text-lightest: var(--color-on-accent2-lightest);
+  --ax-comp-border-lightest: var(--color-border-accent2-lightest);
+  --ax-comp-bg-lighter: var(--color-accent2-lighter);
+  --ax-comp-text-lighter: var(--color-on-accent2-lighter);
+  --ax-comp-border-lighter: var(--color-border-accent2-lighter);
+  --ax-comp-bg-light: var(--color-accent2-light);
+  --ax-comp-text-light: var(--color-on-accent2-light);
+  --ax-comp-border-light: var(--color-border-accent2-light);
+  --ax-comp-bg: var(--color-accent2);
+  --ax-comp-text: var(--color-on-accent2);
+  --ax-comp-border: var(--color-border-accent2);
+  --ax-comp-bg-dark: var(--color-accent2-dark);
+  --ax-comp-text-dark: var(--color-on-accent2-dark);
+  --ax-comp-border-dark: var(--color-border-accent2-dark);
+  --ax-comp-bg-darker: var(--color-accent2-darker);
+  --ax-comp-text-darker: var(--color-on-accent2-darker);
+  --ax-comp-border-darker: var(--color-border-accent2-darker);
+  --ax-comp-bg-darkest: var(--color-accent2-darkest);
+  --ax-comp-text-darkest: var(--color-on-accent2-darkest);
+  --ax-comp-border-darkest: var(--color-border-accent2-darkest);
+}
+
+/* Accent 3 Surfaces */
+
+@utility accent3-lightest-surface {
+  background-color: var(--color-accent3-lightest);
+  color: var(--color-on-accent3-lightest);
+  border-color: var(--color-border-accent3-lightest);
+}
+
+@utility accent3-lighter-surface {
+  background-color: var(--color-accent3-lighter);
+  color: var(--color-on-accent3-lighter);
+  border-color: var(--color-border-accent3-lighter);
+}
+
+@utility accent3-light-surface {
+  background-color: var(--color-accent3-light);
+  color: var(--color-on-accent3-light);
+  border-color: var(--color-border-accent3-light);
+}
+
+@utility accent3-surface {
+  background-color: var(--color-accent3);
+  color: var(--color-on-accent3);
+  border-color: var(--color-border-accent3);
+}
+
+@utility accent3-dark-surface {
+  background-color: var(--color-accent3-dark);
+  color: var(--color-on-accent3-dark);
+  border-color: var(--color-border-accent3-dark);
+}
+
+@utility accent3-darker-surface {
+  background-color: var(--color-accent3-darker);
+  color: var(--color-on-accent3-darker);
+  border-color: var(--color-border-accent3-darker);
+}
+
+@utility accent3-darkest-surface {
+  background-color: var(--color-accent3-darkest);
+  color: var(--color-on-accent3-darkest);
+  border-color: var(--color-border-accent3-darkest);
+}
+
+@utility ax-accent3 {
+  --ax-comp-bg-lightest: var(--color-accent3-lightest);
+  --ax-comp-text-lightest: var(--color-on-accent3-lightest);
+  --ax-comp-border-lightest: var(--color-border-accent3-lightest);
+  --ax-comp-bg-lighter: var(--color-accent3-lighter);
+  --ax-comp-text-lighter: var(--color-on-accent3-lighter);
+  --ax-comp-border-lighter: var(--color-border-accent3-lighter);
+  --ax-comp-bg-light: var(--color-accent3-light);
+  --ax-comp-text-light: var(--color-on-accent3-light);
+  --ax-comp-border-light: var(--color-border-accent3-light);
+  --ax-comp-bg: var(--color-accent3);
+  --ax-comp-text: var(--color-on-accent3);
+  --ax-comp-border: var(--color-border-accent3);
+  --ax-comp-bg-dark: var(--color-accent3-dark);
+  --ax-comp-text-dark: var(--color-on-accent3-dark);
+  --ax-comp-border-dark: var(--color-border-accent3-dark);
+  --ax-comp-bg-darker: var(--color-accent3-darker);
+  --ax-comp-text-darker: var(--color-on-accent3-darker);
+  --ax-comp-border-darker: var(--color-border-accent3-darker);
+  --ax-comp-bg-darkest: var(--color-accent3-darkest);
+  --ax-comp-text-darkest: var(--color-on-accent3-darkest);
+  --ax-comp-border-darkest: var(--color-border-accent3-darkest);
+}
+
+/* Accent 4 Surfaces */
+
+@utility accent4-lightest-surface {
+  background-color: var(--color-accent4-lightest);
+  color: var(--color-on-accent4-lightest);
+  border-color: var(--color-border-accent4-lightest);
+}
+
+@utility accent4-lighter-surface {
+  background-color: var(--color-accent4-lighter);
+  color: var(--color-on-accent4-lighter);
+  border-color: var(--color-border-accent4-lighter);
+}
+
+@utility accent4-light-surface {
+  background-color: var(--color-accent4-light);
+  color: var(--color-on-accent4-light);
+  border-color: var(--color-border-accent4-light);
+}
+
+@utility accent4-surface {
+  background-color: var(--color-accent4);
+  color: var(--color-on-accent4);
+  border-color: var(--color-border-accent4);
+}
+
+@utility accent4-dark-surface {
+  background-color: var(--color-accent4-dark);
+  color: var(--color-on-accent4-dark);
+  border-color: var(--color-border-accent4-dark);
+}
+
+@utility accent4-darker-surface {
+  background-color: var(--color-accent4-darker);
+  color: var(--color-on-accent4-darker);
+  border-color: var(--color-border-accent4-darker);
+}
+
+@utility accent4-darkest-surface {
+  background-color: var(--color-accent4-darkest);
+  color: var(--color-on-accent4-darkest);
+  border-color: var(--color-border-accent4-darkest);
+}
+
+@utility ax-accent4 {
+  --ax-comp-bg-lightest: var(--color-accent4-lightest);
+  --ax-comp-text-lightest: var(--color-on-accent4-lightest);
+  --ax-comp-border-lightest: var(--color-border-accent4-lightest);
+  --ax-comp-bg-lighter: var(--color-accent4-lighter);
+  --ax-comp-text-lighter: var(--color-on-accent4-lighter);
+  --ax-comp-border-lighter: var(--color-border-accent4-lighter);
+  --ax-comp-bg-light: var(--color-accent4-light);
+  --ax-comp-text-light: var(--color-on-accent4-light);
+  --ax-comp-border-light: var(--color-border-accent4-light);
+  --ax-comp-bg: var(--color-accent4);
+  --ax-comp-text: var(--color-on-accent4);
+  --ax-comp-border: var(--color-border-accent4);
+  --ax-comp-bg-dark: var(--color-accent4-dark);
+  --ax-comp-text-dark: var(--color-on-accent4-dark);
+  --ax-comp-border-dark: var(--color-border-accent4-dark);
+  --ax-comp-bg-darker: var(--color-accent4-darker);
+  --ax-comp-text-darker: var(--color-on-accent4-darker);
+  --ax-comp-border-darker: var(--color-border-accent4-darker);
+  --ax-comp-bg-darkest: var(--color-accent4-darkest);
+  --ax-comp-text-darkest: var(--color-on-accent4-darkest);
+  --ax-comp-border-darkest: var(--color-border-accent4-darkest);
+}
+
+/* Accent 5 Surfaces */
+
+@utility accent5-lightest-surface {
+  background-color: var(--color-accent5-lightest);
+  color: var(--color-on-accent5-lightest);
+  border-color: var(--color-border-accent5-lightest);
+}
+
+@utility accent5-lighter-surface {
+  background-color: var(--color-accent5-lighter);
+  color: var(--color-on-accent5-lighter);
+  border-color: var(--color-border-accent5-lighter);
+}
+
+@utility accent5-light-surface {
+  background-color: var(--color-accent5-light);
+  color: var(--color-on-accent5-light);
+  border-color: var(--color-border-accent5-light);
+}
+
+@utility accent5-surface {
+  background-color: var(--color-accent5);
+  color: var(--color-on-accent5);
+  border-color: var(--color-border-accent5);
+}
+
+@utility accent5-dark-surface {
+  background-color: var(--color-accent5-dark);
+  color: var(--color-on-accent5-dark);
+  border-color: var(--color-border-accent5-dark);
+}
+
+@utility accent5-darker-surface {
+  background-color: var(--color-accent5-darker);
+  color: var(--color-on-accent5-darker);
+  border-color: var(--color-border-accent5-darker);
+}
+
+@utility accent5-darkest-surface {
+  background-color: var(--color-accent5-darkest);
+  color: var(--color-on-accent5-darkest);
+  border-color: var(--color-border-accent5-darkest);
+}
+
+@utility ax-accent5 {
+  --ax-comp-bg-lightest: var(--color-accent5-lightest);
+  --ax-comp-text-lightest: var(--color-on-accent5-lightest);
+  --ax-comp-border-lightest: var(--color-border-accent5-lightest);
+  --ax-comp-bg-lighter: var(--color-accent5-lighter);
+  --ax-comp-text-lighter: var(--color-on-accent5-lighter);
+  --ax-comp-border-lighter: var(--color-border-accent5-lighter);
+  --ax-comp-bg-light: var(--color-accent5-light);
+  --ax-comp-text-light: var(--color-on-accent5-light);
+  --ax-comp-border-light: var(--color-border-accent5-light);
+  --ax-comp-bg: var(--color-accent5);
+  --ax-comp-text: var(--color-on-accent5);
+  --ax-comp-border: var(--color-border-accent5);
+  --ax-comp-bg-dark: var(--color-accent5-dark);
+  --ax-comp-text-dark: var(--color-on-accent5-dark);
+  --ax-comp-border-dark: var(--color-border-accent5-dark);
+  --ax-comp-bg-darker: var(--color-accent5-darker);
+  --ax-comp-text-darker: var(--color-on-accent5-darker);
+  --ax-comp-border-darker: var(--color-border-accent5-darker);
+  --ax-comp-bg-darkest: var(--color-accent5-darkest);
+  --ax-comp-text-darkest: var(--color-on-accent5-darkest);
+  --ax-comp-border-darkest: var(--color-border-accent5-darkest);
+}
+
+/* Accent 6 Surfaces */
+
+@utility accent6-lightest-surface {
+  background-color: var(--color-accent6-lightest);
+  color: var(--color-on-accent6-lightest);
+  border-color: var(--color-border-accent6-lightest);
+}
+
+@utility accent6-lighter-surface {
+  background-color: var(--color-accent6-lighter);
+  color: var(--color-on-accent6-lighter);
+  border-color: var(--color-border-accent6-lighter);
+}
+
+@utility accent6-light-surface {
+  background-color: var(--color-accent6-light);
+  color: var(--color-on-accent6-light);
+  border-color: var(--color-border-accent6-light);
+}
+
+@utility accent6-surface {
+  background-color: var(--color-accent6);
+  color: var(--color-on-accent6);
+  border-color: var(--color-border-accent6);
+}
+
+@utility accent6-dark-surface {
+  background-color: var(--color-accent6-dark);
+  color: var(--color-on-accent6-dark);
+  border-color: var(--color-border-accent6-dark);
+}
+
+@utility accent6-darker-surface {
+  background-color: var(--color-accent6-darker);
+  color: var(--color-on-accent6-darker);
+  border-color: var(--color-border-accent6-darker);
+}
+
+@utility accent6-darkest-surface {
+  background-color: var(--color-accent6-darkest);
+  color: var(--color-on-accent6-darkest);
+  border-color: var(--color-border-accent6-darkest);
+}
+
+@utility ax-accent6 {
+  --ax-comp-bg-lightest: var(--color-accent6-lightest);
+  --ax-comp-text-lightest: var(--color-on-accent6-lightest);
+  --ax-comp-border-lightest: var(--color-border-accent6-lightest);
+  --ax-comp-bg-lighter: var(--color-accent6-lighter);
+  --ax-comp-text-lighter: var(--color-on-accent6-lighter);
+  --ax-comp-border-lighter: var(--color-border-accent6-lighter);
+  --ax-comp-bg-light: var(--color-accent6-light);
+  --ax-comp-text-light: var(--color-on-accent6-light);
+  --ax-comp-border-light: var(--color-border-accent6-light);
+  --ax-comp-bg: var(--color-accent6);
+  --ax-comp-text: var(--color-on-accent6);
+  --ax-comp-border: var(--color-border-accent6);
+  --ax-comp-bg-dark: var(--color-accent6-dark);
+  --ax-comp-text-dark: var(--color-on-accent6-dark);
+  --ax-comp-border-dark: var(--color-border-accent6-dark);
+  --ax-comp-bg-darker: var(--color-accent6-darker);
+  --ax-comp-text-darker: var(--color-on-accent6-darker);
+  --ax-comp-border-darker: var(--color-border-accent6-darker);
+  --ax-comp-bg-darkest: var(--color-accent6-darkest);
+  --ax-comp-text-darkest: var(--color-on-accent6-darkest);
+  --ax-comp-border-darkest: var(--color-border-accent6-darkest);
+}
+
 @utility max-w-8xl {
   max-width: 90rem;
 }