@box/blueprint-web-assets 4.52.2 → 4.53.1

package/dist/tokens/tokens-css-vars.scss

@@ -751,4 +751,916 @@
     --notification-default-font-family: var(--font-families-sans);
     --notification-default-font-weight: var(--font-weights-bold);
     --border-divider-border-brand: var(--border-divider-border);
+    /*Auto-updated from tokens/light_mode_value/tokens.css by append-figma-vars-to-css.js
+ */
+    --bp-border-cta-border-outline-disabled: #646464;
+    --bp-border-divider-border-brand: rgba(232, 232, 232, 0.1);
+    --bp-border-00: 0;
+    --bp-border-01: 0.0625rem;
+    --bp-border-02: 0.125rem;
+    --bp-border-03: 0.1875rem;
+    --bp-border-04: 0.25rem;
+    --bp-border-05: 0.3125rem;
+    --bp-border-06: 0.375rem;
+    --bp-border-07: 0.4375rem;
+    --bp-border-08: 0.5rem;
+    --bp-surface-badge-docs-surface: #4083f7;
+    --bp-surface-badge-keynote-surface: #0a84ff;
+    --bp-surface-badge-pages-surface: #ff9500;
+    --bp-surface-badge-pdf-surface: #d0021b;
+    --bp-surface-badge-sheets-surface: #21a464;
+    --bp-surface-badge-video-surface: #009aed;
+    --bp-surface-surface-brand: #0061d5;
+    --bp-surface-surface-brand-busy: #0061d5;
+    --bp-surface-surface-brand-disabled: #0061d5;
+    --bp-surface-surface-brand-hover: #006ae9;
+    --bp-surface-surface-brand-pressed: #004eac;
+    --bp-box-blue-10: #e5effa;
+    --bp-box-blue-20: #ccdff7;
+    --bp-box-blue-30: #b2cff2;
+    --bp-box-blue-40: #99c0ee;
+    --bp-box-blue-50: #7fb0ea;
+    --bp-box-blue-65: #5998e4;
+    --bp-box-blue-80: #3381dd;
+    --bp-box-blue-90: #1a71d9;
+    --bp-box-blue-100: #0061d5;
+    --bp-box-blue-105: #005cca;
+    --bp-box-blue-110: #0057c0;
+    --bp-box-blue-115: #0052b5;
+    --bp-box-blue-120: #004eaa;
+    --bp-box-blue-125: #0049a0;
+    --bp-box-blue-130: #004495;
+    --bp-box-blue-132: #004291;
+    --bp-box-blue-135: #003f8a;
+    --bp-box-blue-140: #003a80;
+    --bp-box-blue-145: #003575;
+    --bp-box-blue-150: #00316b;
+    --bp-box-blue-160: #002755;
+    --bp-box-blue-170: #001d40;
+    --bp-box-blue-180: #00132b;
+    --bp-box-blue-02: #fafcfe;
+    --bp-box-blue-05: #f2f7fd;
+    --bp-dark-blue-10: #e5ebf2;
+    --bp-dark-blue-20: #ccd8e6;
+    --bp-dark-blue-30: #b2c4da;
+    --bp-dark-blue-40: #99b1ce;
+    --bp-dark-blue-50: #7f9dc1;
+    --bp-dark-blue-65: #5980af;
+    --bp-dark-blue-80: #33639d;
+    --bp-dark-blue-90: #1a5090;
+    --bp-dark-blue-100: #003c84;
+    --bp-dark-blue-105: #00397d;
+    --bp-dark-blue-110: #003677;
+    --bp-dark-blue-115: #003370;
+    --bp-dark-blue-120: #00306a;
+    --bp-dark-blue-125: #002d63;
+    --bp-dark-blue-130: #002a5c;
+    --bp-dark-blue-132: #00295a;
+    --bp-dark-blue-135: #002756;
+    --bp-dark-blue-140: #00244f;
+    --bp-dark-blue-145: #002149;
+    --bp-dark-blue-150: #001e42;
+    --bp-dark-blue-160: #001835;
+    --bp-dark-blue-170: #001228;
+    --bp-dark-blue-180: #000c1a;
+    --bp-dark-blue-02: #fafbfd;
+    --bp-dark-blue-05: #f2f5f9;
+    --bp-gray-10: #e8e8e8;
+    --bp-gray-20: #d3d3d3;
+    --bp-gray-30: #bcbcbc;
+    --bp-gray-40: #a7a7a7;
+    --bp-gray-50: #909090;
+    --bp-gray-65: #6f6f6f;
+    --bp-gray-80: #4e4e4e;
+    --bp-gray-90: #383838;
+    --bp-gray-100: #222222;
+    --bp-gray-02: #fbfbfb;
+    --bp-gray-05: #f4f4f4;
+    --bp-gray-black: #000000;
+    --bp-gray-white: #ffffff;
+    --bp-green-light-10: #e9f8f2;
+    --bp-green-light-20: #d4f3e6;
+    --bp-green-light-30: #beedd9;
+    --bp-green-light-40: #a8e7cd;
+    --bp-green-light-50: #92e0c0;
+    --bp-green-light-65: #72d7ad;
+    --bp-green-light-80: #51ce9a;
+    --bp-green-light-90: #3cc88e;
+    --bp-green-light-100: #26c281;
+    --bp-green-light-105: #24b87b;
+    --bp-green-light-110: #22af74;
+    --bp-green-light-115: #20a56e;
+    --bp-green-light-120: #1e9b67;
+    --bp-green-light-125: #1d9161;
+    --bp-green-light-130: #1b885a;
+    --bp-green-light-132: #1a8458;
+    --bp-green-light-135: #197e54;
+    --bp-green-light-140: #17744d;
+    --bp-green-light-145: #156b47;
+    --bp-green-light-150: #136140;
+    --bp-green-light-160: #0f4e34;
+    --bp-green-light-170: #0b3a27;
+    --bp-green-light-180: #08271a;
+    --bp-green-light-02: #fbfefd;
+    --bp-green-light-05: #f4fcf8;
+    --bp-grimace-10: #ece9f8;
+    --bp-grimace-20: #dad4f3;
+    --bp-grimace-30: #c8beed;
+    --bp-grimace-40: #b6a8e7;
+    --bp-grimace-50: #a392e0;
+    --bp-grimace-65: #8872d7;
+    --bp-grimace-80: #6d51ce;
+    --bp-grimace-90: #5a3cc8;
+    --bp-grimace-100: #4826c2;
+    --bp-grimace-105: #4424b8;
+    --bp-grimace-110: #4122af;
+    --bp-grimace-115: #3d20a5;
+    --bp-grimace-120: #3a1e9b;
+    --bp-grimace-125: #361d91;
+    --bp-grimace-130: #321b88;
+    --bp-grimace-132: #311a84;
+    --bp-grimace-135: #2f197e;
+    --bp-grimace-140: #2b1774;
+    --bp-grimace-145: #28156b;
+    --bp-grimace-150: #241361;
+    --bp-grimace-160: #1d0f4e;
+    --bp-grimace-170: #160b3a;
+    --bp-grimace-180: #0e0827;
+    --bp-grimace-02: #fbfbfe;
+    --bp-grimace-05: #f6f4fc;
+    --bp-light-blue-10: #e9f2fe;
+    --bp-light-blue-20: #d3e7fe;
+    --bp-light-blue-30: #bddbfe;
+    --bp-light-blue-40: #a7cffe;
+    --bp-light-blue-50: #91c2fd;
+    --bp-light-blue-65: #71b0fd;
+    --bp-light-blue-80: #509efd;
+    --bp-light-blue-90: #3a92fc;
+    --bp-light-blue-100: #2486fc;
+    --bp-light-blue-105: #227fef;
+    --bp-light-blue-110: #2079e3;
+    --bp-light-blue-115: #1f72d6;
+    --bp-light-blue-120: #1d6bca;
+    --bp-light-blue-125: #1b65bd;
+    --bp-light-blue-130: #195eb0;
+    --bp-light-blue-132: #185bab;
+    --bp-light-blue-135: #1757a4;
+    --bp-light-blue-140: #165097;
+    --bp-light-blue-145: #144a8b;
+    --bp-light-blue-150: #12437e;
+    --bp-light-blue-160: #0e3665;
+    --bp-light-blue-170: #0b284c;
+    --bp-light-blue-180: #071b32;
+    --bp-light-blue-02: #fbfdff;
+    --bp-light-blue-05: #f4f9ff;
+    --bp-orange-10: #fdf2e8;
+    --bp-orange-20: #fce6d1;
+    --bp-orange-30: #fbd9ba;
+    --bp-orange-40: #f9cda3;
+    --bp-orange-50: #f8c08c;
+    --bp-orange-65: #f6ad6a;
+    --bp-orange-80: #f49a48;
+    --bp-orange-90: #f28e31;
+    --bp-orange-100: #f1811a;
+    --bp-orange-105: #e57b19;
+    --bp-orange-110: #d97417;
+    --bp-orange-115: #cd6e16;
+    --bp-orange-120: #c16715;
+    --bp-orange-125: #b56114;
+    --bp-orange-130: #a95a12;
+    --bp-orange-132: #a45812;
+    --bp-orange-135: #9d5411;
+    --bp-orange-140: #914d10;
+    --bp-orange-145: #85470e;
+    --bp-orange-150: #78400d;
+    --bp-orange-160: #60340a;
+    --bp-orange-170: #482708;
+    --bp-orange-180: #301a05;
+    --bp-orange-02: #fffdfb;
+    --bp-orange-05: #fef8f3;
+    --bp-pink-panther-10: #ffe6fb;
+    --bp-pink-panther-20: #ffcdf8;
+    --bp-pink-panther-30: #ffb3f5;
+    --bp-pink-panther-40: #ff9af1;
+    --bp-pink-panther-50: #ff81ed;
+    --bp-pink-panther-65: #fe5be8;
+    --bp-pink-panther-80: #fe49e6;
+    --bp-pink-panther-90: #fe35e3;
+    --bp-pink-panther-100: #fe1ce0;
+    --bp-pink-panther-105: #f103d1;
+    --bp-pink-panther-110: #e503c6;
+    --bp-pink-panther-115: #d803bb;
+    --bp-pink-panther-120: #cb02b0;
+    --bp-pink-panther-125: #be02a5;
+    --bp-pink-panther-130: #b2029a;
+    --bp-pink-panther-132: #ad0296;
+    --bp-pink-panther-135: #a5028f;
+    --bp-pink-panther-140: #980284;
+    --bp-pink-panther-145: #8c0279;
+    --bp-pink-panther-150: #7f026e;
+    --bp-pink-panther-160: #660158;
+    --bp-pink-panther-170: #4c0142;
+    --bp-pink-panther-180: #33012c;
+    --bp-pink-panther-02: #fffafe;
+    --bp-pink-panther-05: #fff2fd;
+    --bp-purple-rain-10: #f5ebfd;
+    --bp-purple-rain-20: #ecd9fb;
+    --bp-purple-rain-30: #e2c5fa;
+    --bp-purple-rain-40: #d9b2f8;
+    --bp-purple-rain-50: #cf9ff6;
+    --bp-purple-rain-65: #c182f3;
+    --bp-purple-rain-80: #b265f1;
+    --bp-purple-rain-90: #a952ef;
+    --bp-purple-rain-100: #9f3fed;
+    --bp-purple-rain-105: #973ce1;
+    --bp-purple-rain-110: #8f39d5;
+    --bp-purple-rain-115: #8736c9;
+    --bp-purple-rain-120: #7f32be;
+    --bp-purple-rain-125: #772fb2;
+    --bp-purple-rain-130: #6f2ca6;
+    --bp-purple-rain-132: #6c2ba1;
+    --bp-purple-rain-135: #67299a;
+    --bp-purple-rain-140: #5f268e;
+    --bp-purple-rain-145: #572382;
+    --bp-purple-rain-150: #4f1f76;
+    --bp-purple-rain-160: #40195f;
+    --bp-purple-rain-170: #301347;
+    --bp-purple-rain-180: #200d2f;
+    --bp-purple-rain-02: #fdfbff;
+    --bp-purple-rain-05: #faf5fe;
+    --bp-watermelon-red-10: #fdebee;
+    --bp-watermelon-red-20: #fbd7dd;
+    --bp-watermelon-red-30: #fac3cd;
+    --bp-watermelon-red-40: #f8afbc;
+    --bp-watermelon-red-50: #f69bab;
+    --bp-watermelon-red-65: #f37d92;
+    --bp-watermelon-red-80: #f15f79;
+    --bp-watermelon-red-90: #ef4b68;
+    --bp-watermelon-red-100: #ed3757;
+    --bp-watermelon-red-105: #e13453;
+    --bp-watermelon-red-110: #d5324e;
+    --bp-watermelon-red-115: #c92f4a;
+    --bp-watermelon-red-120: #be2c46;
+    --bp-watermelon-red-125: #b22941;
+    --bp-watermelon-red-130: #a6273d;
+    --bp-watermelon-red-132: #a1253b;
+    --bp-watermelon-red-135: #9a2439;
+    --bp-watermelon-red-140: #8e2134;
+    --bp-watermelon-red-145: #821e30;
+    --bp-watermelon-red-150: #761b2b;
+    --bp-watermelon-red-160: #5f1623;
+    --bp-watermelon-red-170: #47101a;
+    --bp-watermelon-red-180: #2f0b11;
+    --bp-watermelon-red-02: #fffbfc;
+    --bp-watermelon-red-05: #fef5f6;
+    --bp-yellorange-10: #fef7e8;
+    --bp-yellorange-20: #fdf0d1;
+    --bp-yellorange-30: #fce8bb;
+    --bp-yellorange-40: #fbe1a4;
+    --bp-yellorange-50: #fad98d;
+    --bp-yellorange-65: #f9ce6b;
+    --bp-yellorange-80: #f7c249;
+    --bp-yellorange-90: #f6bb32;
+    --bp-yellorange-100: #f5b31b;
+    --bp-yellorange-105: #e9aa1a;
+    --bp-yellorange-110: #dca118;
+    --bp-yellorange-115: #d09817;
+    --bp-yellorange-120: #c48f16;
+    --bp-yellorange-125: #b88614;
+    --bp-yellorange-130: #ab7d13;
+    --bp-yellorange-132: #a77a12;
+    --bp-yellorange-135: #9f7412;
+    --bp-yellorange-140: #936b10;
+    --bp-yellorange-145: #87620f;
+    --bp-yellorange-150: #7a590d;
+    --bp-yellorange-160: #62480b;
+    --bp-yellorange-170: #493608;
+    --bp-yellorange-180: #312405;
+    --bp-yellorange-02: #fffefb;
+    --bp-yellorange-05: #fefbf3;
+    --bp-yellow-10: #fffbe5;
+    --bp-yellow-20: #fff7cc;
+    --bp-yellow-30: #fff3b2;
+    --bp-yellow-40: #ffef99;
+    --bp-yellow-50: #ffeb7f;
+    --bp-yellow-65: #ffe559;
+    --bp-yellow-80: #ffdf33;
+    --bp-yellow-90: #ffdb1a;
+    --bp-yellow-100: #ffd700;
+    --bp-yellow-105: #f2cc00;
+    --bp-yellow-110: #e6c100;
+    --bp-yellow-115: #d9b700;
+    --bp-yellow-120: #ccac00;
+    --bp-yellow-125: #bfa100;
+    --bp-yellow-130: #b29600;
+    --bp-yellow-132: #ad9200;
+    --bp-yellow-135: #a68c00;
+    --bp-yellow-140: #998100;
+    --bp-yellow-145: #8c7600;
+    --bp-yellow-150: #806b00;
+    --bp-yellow-160: #665600;
+    --bp-yellow-170: #4c4000;
+    --bp-yellow-180: #332b00;
+    --bp-yellow-02: #fffefa;
+    --bp-yellow-05: #fffdf2;
+    --bp-font-letter-spacing-01: 0.01875rem;
+    --bp-font-letter-spacing-02: 0.0375rem;
+    --bp-font-line-height-01: 0.75rem;
+    --bp-font-line-height-02: 0.875rem;
+    --bp-font-line-height-03: 1rem;
+    --bp-font-line-height-04: 1.25rem;
+    --bp-font-line-height-05: 1.5rem;
+    --bp-font-line-height-06: 2rem;
+    --bp-font-line-height-07: 2.75rem;
+    --bp-font-size-01: 0.5625rem;
+    --bp-font-size-02: 0.625rem;
+    --bp-font-size-03: 0.75rem;
+    --bp-font-size-04: 0.875rem;
+    --bp-font-size-05: 0.9375rem;
+    --bp-font-size-06: 1rem;
+    --bp-font-size-07: 1.125rem;
+    --bp-font-size-08: 1.3125rem;
+    --bp-font-size-09: 2.25rem;
+    --bp-font-weight-black: 900;
+    --bp-font-weight-bold: 700;
+    --bp-font-weight-regular: 400;
+    --bp-font-weight-semibold: 600;
+    --bp-font-font-family: Lato;
+    --bp-radius-10: 1.25rem;
+    --bp-radius-11: 1.375rem;
+    --bp-radius-12: 1.5rem;
+    --bp-radius-13: 1.625rem;
+    --bp-radius-14: 1.75rem;
+    --bp-radius-15: 1.875rem;
+    --bp-radius-16: 2rem;
+    --bp-radius-00: 0;
+    --bp-radius-01: 0.125rem;
+    --bp-radius-02: 0.25rem;
+    --bp-radius-03: 0.375rem;
+    --bp-radius-04: 0.5rem;
+    --bp-radius-05: 0.625rem;
+    --bp-radius-06: 0.75rem;
+    --bp-radius-07: 0.875rem;
+    --bp-radius-08: 1rem;
+    --bp-radius-09: 1.125rem;
+    --bp-size-100: 2.5rem;
+    --bp-size-110: 2.75rem;
+    --bp-size-120: 3rem;
+    --bp-size-140: 3.5rem;
+    --bp-size-150: 3.75rem;
+    --bp-size-160: 4rem;
+    --bp-size-170: 4.25rem;
+    --bp-size-180: 4.5rem;
+    --bp-size-190: 4.75rem;
+    --bp-size-200: 5rem;
+    --bp-size-210: 5.25rem;
+    --bp-size-220: 5.5rem;
+    --bp-size-230: 5.75rem;
+    --bp-size-240: 6rem;
+    --bp-size-250: 6.25rem;
+    --bp-size-260: 6.5rem;
+    --bp-size-270: 6.75rem;
+    --bp-size-280: 7rem;
+    --bp-size-290: 7.25rem;
+    --bp-size-300: 7.5rem;
+    --bp-size-000: 0;
+    --bp-size-005: 0.125rem;
+    --bp-size-010: 0.25rem;
+    --bp-size-020: 0.5rem;
+    --bp-size-030: 0.75rem;
+    --bp-size-040: 1rem;
+    --bp-size-050: 1.25rem;
+    --bp-size-060: 1.5rem;
+    --bp-size-070: 1.75rem;
+    --bp-size-080: 2rem;
+    --bp-size-090: 2.25rem;
+    --bp-space-100: 2.5rem;
+    --bp-space-110: 2.75rem;
+    --bp-space-120: 3rem;
+    --bp-space-140: 3.5rem;
+    --bp-space-150: 3.75rem;
+    --bp-space-160: 4rem;
+    --bp-space-180: 4.5rem;
+    --bp-space-200: 5rem;
+    --bp-space-210: 5.25rem;
+    --bp-space-220: 5.5rem;
+    --bp-space-230: 5.75rem;
+    --bp-space-240: 6rem;
+    --bp-space-250: 6.25rem;
+    --bp-space-260: 6.5rem;
+    --bp-space-270: 6.75rem;
+    --bp-space-280: 7rem;
+    --bp-space-290: 7.25rem;
+    --bp-space-300: 7.5rem;
+    --bp-space-000: 0;
+    --bp-space-005: 0.125rem;
+    --bp-space-010: 0.25rem;
+    --bp-space-020: 0.5rem;
+    --bp-space-030: 0.75rem;
+    --bp-space-040: 1rem;
+    --bp-space-050: 1.25rem;
+    --bp-space-060: 1.5rem;
+    --bp-space-070: 1.75rem;
+    --bp-space-080: 2rem;
+    --bp-space-090: 2.25rem;
+    --bp-black-opacity-12: rgba(0, 0, 0, 0.12);
+    --bp-black-opacity-16: rgba(0, 0, 0, 0.16);
+    --bp-black-opacity-20: rgba(0, 0, 0, 0.2);
+    --bp-black-opacity-24: rgba(0, 0, 0, 0.24);
+    --bp-black-opacity-30: rgba(0, 0, 0, 0.3);
+    --bp-black-opacity-50: rgba(0, 0, 0, 0.5);
+    --bp-black-opacity-60: rgba(0, 0, 0, 0.6);
+    --bp-black-opacity-70: rgba(0, 0, 0, 0.7);
+    --bp-black-opacity-80: rgba(0, 0, 0, 0.8);
+    --bp-black-opacity-90: rgba(0, 0, 0, 0.9);
+    --bp-black-opacity-00: rgba(0, 0, 0, 0);
+    --bp-black-opacity-04: rgba(0, 0, 0, 0.04);
+    --bp-black-opacity-08: rgba(0, 0, 0, 0.08);
+    --bp-box-blue-opacity-12: rgba(0, 97, 213, 0.12);
+    --bp-box-blue-opacity-16: rgba(0, 97, 213, 0.16);
+    --bp-box-blue-opacity-20: rgba(0, 97, 213, 0.2);
+    --bp-box-blue-opacity-24: rgba(0, 97, 213, 0.24);
+    --bp-box-blue-opacity-30: rgba(0, 97, 213, 0.3);
+    --bp-box-blue-opacity-50: rgba(0, 97, 213, 0.5);
+    --bp-box-blue-opacity-60: rgba(0, 97, 213, 0.6);
+    --bp-box-blue-opacity-70: rgba(0, 97, 213, 0.7);
+    --bp-box-blue-opacity-80: rgba(0, 97, 213, 0.8);
+    --bp-box-blue-opacity-90: rgba(0, 97, 213, 0.9);
+    --bp-box-blue-opacity-00: rgba(0, 97, 213, 0);
+    --bp-box-blue-opacity-04: rgba(0, 97, 213, 0.04);
+    --bp-box-blue-opacity-08: rgba(0, 97, 213, 0.08);
+    --bp-dark-blue-opacity-12: rgba(0, 60, 132, 0.12);
+    --bp-dark-blue-opacity-16: rgba(0, 60, 132, 0.16);
+    --bp-dark-blue-opacity-20: rgba(0, 60, 132, 0.2);
+    --bp-dark-blue-opacity-24: rgba(0, 60, 132, 0.24);
+    --bp-dark-blue-opacity-30: rgba(0, 60, 132, 0.3);
+    --bp-dark-blue-opacity-50: rgba(0, 60, 132, 0.5);
+    --bp-dark-blue-opacity-60: rgba(0, 60, 132, 0.6);
+    --bp-dark-blue-opacity-70: rgba(0, 60, 132, 0.7);
+    --bp-dark-blue-opacity-80: rgba(0, 60, 132, 0.8);
+    --bp-dark-blue-opacity-90: rgba(0, 60, 132, 0.9);
+    --bp-dark-blue-opacity-00: rgba(0, 60, 132, 0);
+    --bp-dark-blue-opacity-04: rgba(0, 60, 132, 0.04);
+    --bp-dark-blue-opacity-08: rgba(0, 60, 132, 0.08);
+    --bp-green-light-opacity-12: rgba(38, 194, 129, 0.12);
+    --bp-green-light-opacity-16: rgba(38, 194, 129, 0.16);
+    --bp-green-light-opacity-20: rgba(38, 194, 129, 0.2);
+    --bp-green-light-opacity-24: rgba(38, 194, 129, 0.24);
+    --bp-green-light-opacity-30: rgba(38, 194, 129, 0.3);
+    --bp-green-light-opacity-50: rgba(38, 194, 129, 0.5);
+    --bp-green-light-opacity-60: rgba(38, 194, 129, 0.6);
+    --bp-green-light-opacity-70: rgba(38, 194, 129, 0.7);
+    --bp-green-light-opacity-80: rgba(38, 194, 129, 0.8);
+    --bp-green-light-opacity-90: rgba(38, 194, 129, 0.9);
+    --bp-green-light-opacity-00: rgba(38, 194, 129, 0);
+    --bp-green-light-opacity-04: rgba(38, 194, 129, 0.04);
+    --bp-green-light-opacity-08: rgba(38, 194, 129, 0.08);
+    --bp-grimace-opacity-12: rgba(72, 38, 194, 0.12);
+    --bp-grimace-opacity-16: rgba(72, 38, 194, 0.16);
+    --bp-grimace-opacity-20: rgba(72, 38, 194, 0.2);
+    --bp-grimace-opacity-24: rgba(72, 38, 194, 0.24);
+    --bp-grimace-opacity-30: rgba(72, 38, 194, 0.3);
+    --bp-grimace-opacity-50: rgba(72, 38, 194, 0.5);
+    --bp-grimace-opacity-60: rgba(72, 38, 194, 0.6);
+    --bp-grimace-opacity-70: rgba(72, 38, 194, 0.7);
+    --bp-grimace-opacity-80: rgba(72, 38, 194, 0.8);
+    --bp-grimace-opacity-90: rgba(72, 38, 194, 0.9);
+    --bp-grimace-opacity-00: rgba(72, 38, 194, 0);
+    --bp-grimace-opacity-04: rgba(72, 38, 194, 0.04);
+    --bp-grimace-opacity-08: rgba(72, 38, 194, 0.08);
+    --bp-light-blue-opacity-12: rgba(36, 134, 252, 0.12);
+    --bp-light-blue-opacity-16: rgba(36, 134, 252, 0.16);
+    --bp-light-blue-opacity-20: rgba(36, 134, 252, 0.2);
+    --bp-light-blue-opacity-24: rgba(36, 134, 252, 0.24);
+    --bp-light-blue-opacity-30: rgba(36, 134, 252, 0.3);
+    --bp-light-blue-opacity-50: rgba(36, 134, 252, 0.5);
+    --bp-light-blue-opacity-60: rgba(36, 134, 252, 0.6);
+    --bp-light-blue-opacity-70: rgba(36, 134, 252, 0.7);
+    --bp-light-blue-opacity-80: rgba(36, 134, 252, 0.8);
+    --bp-light-blue-opacity-90: rgba(36, 134, 252, 0.9);
+    --bp-light-blue-opacity-00: rgba(36, 134, 252, 0);
+    --bp-light-blue-opacity-04: rgba(36, 134, 252, 0.04);
+    --bp-light-blue-opacity-08: rgba(36, 134, 252, 0.08);
+    --bp-orange-opacity-12: rgba(245, 179, 27, 0.12);
+    --bp-orange-opacity-16: rgba(245, 179, 27, 0.16);
+    --bp-orange-opacity-20: rgba(245, 179, 27, 0.2);
+    --bp-orange-opacity-24: rgba(245, 179, 27, 0.24);
+    --bp-orange-opacity-30: rgba(245, 179, 27, 0.3);
+    --bp-orange-opacity-50: rgba(245, 179, 27, 0.5);
+    --bp-orange-opacity-60: rgba(245, 179, 27, 0.6);
+    --bp-orange-opacity-70: rgba(245, 179, 27, 0.7);
+    --bp-orange-opacity-80: rgba(245, 179, 27, 0.8);
+    --bp-orange-opacity-90: rgba(245, 179, 27, 0.9);
+    --bp-orange-opacity-00: rgba(245, 179, 27, 0);
+    --bp-orange-opacity-04: rgba(245, 179, 27, 0.04);
+    --bp-orange-opacity-08: rgba(245, 179, 27, 0.08);
+    --bp-watermelon-red-opacity-12: rgba(237, 55, 87, 0.12);
+    --bp-watermelon-red-opacity-16: rgba(237, 55, 87, 0.16);
+    --bp-watermelon-red-opacity-20: rgba(237, 55, 87, 0.2);
+    --bp-watermelon-red-opacity-24: rgba(237, 55, 87, 0.24);
+    --bp-watermelon-red-opacity-30: rgba(237, 55, 87, 0.3);
+    --bp-watermelon-red-opacity-50: rgba(237, 55, 87, 0.5);
+    --bp-watermelon-red-opacity-60: rgba(237, 55, 87, 0.6);
+    --bp-watermelon-red-opacity-70: rgba(237, 55, 87, 0.7);
+    --bp-watermelon-red-opacity-80: rgba(237, 55, 87, 0.8);
+    --bp-watermelon-red-opacity-90: rgba(237, 55, 87, 0.9);
+    --bp-watermelon-red-opacity-00: rgba(237, 55, 87, 0);
+    --bp-watermelon-red-opacity-04: rgba(237, 55, 87, 0.04);
+    --bp-watermelon-red-opacity-08: rgba(237, 55, 87, 0.08);
+    --bp-white-opacity-12: rgba(255, 255, 255, 0.12);
+    --bp-white-opacity-16: rgba(255, 255, 255, 0.16);
+    --bp-white-opacity-20: rgba(255, 255, 255, 0.2);
+    --bp-white-opacity-24: rgba(255, 255, 255, 0.24);
+    --bp-white-opacity-30: rgba(255, 255, 255, 0.3);
+    --bp-white-opacity-50: rgba(255, 255, 255, 0.5);
+    --bp-white-opacity-60: rgba(255, 255, 255, 0.6);
+    --bp-white-opacity-70: rgba(255, 255, 255, 0.7);
+    --bp-white-opacity-80: rgba(255, 255, 255, 0.8);
+    --bp-white-opacity-90: rgba(255, 255, 255, 0.9);
+    --bp-white-opacity-00: rgba(255, 255, 255, 0);
+    --bp-white-opacity-04: rgba(255, 255, 255, 0.04);
+    --bp-white-opacity-08: rgba(255, 255, 255, 0.08);
+    --bp-yellorange-opacity-12: rgba(245, 179, 27, 0.12);
+    --bp-yellorange-opacity-16: rgba(245, 179, 27, 0.16);
+    --bp-yellorange-opacity-20: rgba(245, 179, 27, 0.2);
+    --bp-yellorange-opacity-24: rgba(245, 179, 27, 0.24);
+    --bp-yellorange-opacity-30: rgba(245, 179, 27, 0.3);
+    --bp-yellorange-opacity-50: rgba(245, 179, 27, 0.5);
+    --bp-yellorange-opacity-60: rgba(245, 179, 27, 0.6);
+    --bp-yellorange-opacity-70: rgba(245, 179, 27, 0.7);
+    --bp-yellorange-opacity-80: rgba(245, 179, 27, 0.8);
+    --bp-yellorange-opacity-90: rgba(245, 179, 27, 0.9);
+    --bp-yellorange-opacity-00: rgba(245, 179, 27, 0);
+    --bp-yellorange-opacity-04: rgba(245, 179, 27, 0.04);
+    --bp-yellorange-opacity-08: rgba(245, 179, 27, 0.08);
+    --bp-yellow-opacity-12: rgba(255, 215, 0, 0.12);
+    --bp-yellow-opacity-16: rgba(255, 215, 0, 0.16);
+    --bp-yellow-opacity-20: rgba(255, 215, 0, 0.2);
+    --bp-yellow-opacity-24: rgba(255, 215, 0, 0.24);
+    --bp-yellow-opacity-30: rgba(255, 215, 0, 0.3);
+    --bp-yellow-opacity-50: rgba(255, 215, 0, 0.5);
+    --bp-yellow-opacity-60: rgba(255, 215, 0, 0.6);
+    --bp-yellow-opacity-70: rgba(255, 215, 0, 0.7);
+    --bp-yellow-opacity-80: rgba(255, 215, 0, 0.8);
+    --bp-yellow-opacity-90: rgba(255, 215, 0, 0.9);
+    --bp-yellow-opacity-00: rgba(255, 215, 0, 0);
+    --bp-yellow-opacity-04: rgba(255, 215, 0, 0.04);
+    --bp-yellow-opacity-08: rgba(255, 215, 0, 0.08);
+    --bp-screen-height: 900;
+    --bp-screen-width: 1440;
+    --bp-background-background: var(--bp-gray-white);
+    --bp-border-avatar-border-hover: var(--bp-black-opacity-04);
+    --bp-border-avatar-border-pressed: var(--bp-black-opacity-08);
+    --bp-border-badge-border: var(--bp-gray-white);
+    --bp-border-card-border: var(--bp-gray-10);
+    --bp-border-card-border-focus: var(--bp-box-blue-100);
+    --bp-border-card-border-hover: var(--bp-gray-10);
+    --bp-border-card-border-pressed: var(--bp-gray-10);
+    --bp-border-checkbox-border: var(--bp-gray-65);
+    --bp-border-checkbox-border-hover: var(--bp-gray-80);
+    --bp-border-checkbox-border-selected: var(--bp-box-blue-100);
+    --bp-border-checkbox-border-selected-hover: var(--bp-light-blue-110);
+    --bp-border-collapsible-border: var(--bp-gray-20);
+    --bp-border-contentbutton-border-selected: var(--bp-gray-50);
+    --bp-border-cta-border-outline: var(--bp-gray-black);
+    --bp-border-cta-border-outline-hover: var(--bp-gray-black);
+    --bp-border-cta-border-outline-pressed: var(--bp-gray-black);
+    --bp-border-cta-border-secondary: var(--bp-gray-30);
+    --bp-border-cta-border-secondary-disabled: var(--bp-gray-10);
+    --bp-border-cta-border-secondary-hover: var(--bp-gray-30);
+    --bp-border-cta-border-secondary-pressed: var(--bp-gray-30);
+    --bp-border-divider-border: var(--bp-gray-10);
+    --bp-border-dropdown-border: var(--bp-gray-30);
+    --bp-border-dropdown-border-error: var(--bp-watermelon-red-100);
+    --bp-border-dropdown-border-error-focus: var(--bp-watermelon-red-100);
+    --bp-border-dropdown-border-error-hover: var(--bp-watermelon-red-100);
+    --bp-border-dropdown-border-focus: var(--bp-box-blue-100);
+    --bp-border-dropdown-border-hover: var(--bp-gray-65);
+    --bp-border-filterchip-border-multi-on: var(--bp-box-blue-40);
+    --bp-border-filterchip-border-multi-on-hover: var(--bp-box-blue-40);
+    --bp-border-gridthumbnail-border: var(--bp-gray-10);
+    --bp-border-input-border: var(--bp-gray-50);
+    --bp-border-input-border-error: var(--bp-watermelon-red-100);
+    --bp-border-input-border-error-focus: var(--bp-watermelon-red-100);
+    --bp-border-input-border-error-hover: var(--bp-watermelon-red-100);
+    --bp-border-input-border-focus: var(--bp-light-blue-100);
+    --bp-border-input-border-hover: var(--bp-gray-65);
+    --bp-border-inputchip-border-error: var(--bp-watermelon-red-100);
+    --bp-border-item-border-hover: var(--bp-gray-10);
+    --bp-border-item-border-selected: var(--bp-box-blue-100);
+    --bp-border-item-small-border-selected: var(--bp-box-blue-100);
+    --bp-border-message-border-error: var(--bp-watermelon-red-100);
+    --bp-border-message-border-error-secondary: var(--bp-watermelon-red-50);
+    --bp-border-message-border-generic: var(--bp-gray-100);
+    --bp-border-message-border-generic-secondary: var(--bp-gray-50);
+    --bp-border-message-border-info: var(--bp-box-blue-100);
+    --bp-border-message-border-info-secondary: var(--bp-light-blue-50);
+    --bp-border-message-border-success: var(--bp-green-light-100);
+    --bp-border-message-border-success-secondary: var(--bp-green-light-50);
+    --bp-border-message-border-warning: var(--bp-yellorange-100);
+    --bp-border-message-border-warning-secondary: var(--bp-yellorange-50);
+    --bp-border-radio-border: var(--bp-gray-65);
+    --bp-border-radio-border-hover: var(--bp-gray-80);
+    --bp-border-radio-border-selected: var(--bp-box-blue-100);
+    --bp-border-radio-border-selected-hover: var(--bp-light-blue-110);
+    --bp-border-radiotile-border: var(--bp-gray-30);
+    --bp-border-radiotile-border-hover: var(--bp-gray-30);
+    --bp-border-radiotile-border-selected: var(--bp-box-blue-100);
+    --bp-border-search-border: var(--bp-gray-05);
+    --bp-border-search-border-hover: var(--bp-gray-65);
+    --bp-border-search-global-border-hover: var(--bp-gray-10);
+    --bp-border-status-border-hover: var(--bp-black-opacity-04);
+    --bp-border-switch-border: var(--bp-gray-30);
+    --bp-border-switch-border-hover: var(--bp-gray-30);
+    --bp-border-tab-border: var(--bp-gray-10);
+    --bp-border-tab-border-hover: var(--bp-gray-30);
+    --bp-border-tab-border-selected: var(--bp-box-blue-100);
+    --bp-border-tab-border-selected-focus: var(--bp-box-blue-100);
+    --bp-border-tab-border-selected-hover: var(--bp-box-blue-100);
+    --bp-border-toggle-border: var(--bp-gray-30);
+    --bp-border-toggle-border-on: var(--bp-box-blue-40);
+    --bp-border-toggletext-border-off: var(--bp-gray-white);
+    --bp-border-toggletext-border-off-ai: var(--bp-gray-30);
+    --bp-border-toggletext-border-off-hover: var(--bp-gray-05);
+    --bp-border-toggletext-border-off-pressed: var(--bp-gray-10);
+    --bp-border-toggletext-border-on: var(--bp-box-blue-40);
+    --bp-border-toggletext-border-on-hover: var(--bp-box-blue-40);
+    --bp-border-toggletext-border-on-pressed: var(--bp-box-blue-40);
+    --bp-border-tooltip-border-error: var(--bp-watermelon-red-50);
+    --bp-icon-cta-icon: var(--bp-gray-65);
+    --bp-icon-cta-icon-hover: var(--bp-gray-100);
+    --bp-icon-cta-icon-on-color: var(--bp-gray-black);
+    --bp-icon-cta-icon-on-color-hover: var(--bp-gray-black);
+    --bp-icon-cta-icon-on-color-pressed: var(--bp-gray-black);
+    --bp-icon-cta-icon-pressed: var(--bp-gray-100);
+    --bp-icon-cta-icon-utility: var(--bp-gray-80);
+    --bp-icon-cta-icon-utility-hover: var(--bp-gray-black);
+    --bp-icon-cta-icon-utility-pressed: var(--bp-gray-black);
+    --bp-icon-icon-blue: var(--bp-box-blue-100);
+    --bp-icon-icon-destructive-on-light: var(--bp-watermelon-red-110);
+    --bp-icon-icon-error-on-light: var(--bp-watermelon-red-110);
+    --bp-icon-icon-on-dark: var(--bp-gray-white);
+    --bp-icon-icon-on-light: var(--bp-gray-100);
+    --bp-icon-icon-on-light-secondary: var(--bp-gray-65);
+    --bp-icon-icon-on-light-tertiary: var(--bp-gray-50);
+    --bp-icon-icon-required-on-light: var(--bp-watermelon-red-110);
+    --bp-icon-nav-icon-on-dark: var(--bp-gray-white);
+    --bp-icon-nav-icon-on-dark-focus: var(--bp-gray-white);
+    --bp-icon-nav-icon-on-dark-hover: var(--bp-gray-white);
+    --bp-icon-nav-icon-on-dark-selected: var(--bp-gray-white);
+    --bp-icon-nav-icon-on-light: var(--bp-gray-100);
+    --bp-icon-nav-icon-on-light-focus: var(--bp-gray-100);
+    --bp-icon-nav-icon-on-light-hover: var(--bp-gray-100);
+    --bp-icon-nav-icon-on-light-selected: var(--bp-gray-100);
+    --bp-outline-focus-on-dark: var(--bp-gray-white);
+    --bp-outline-focus-on-light: var(--bp-light-blue-100);
+    --bp-overlay-modal-overlay: var(--bp-black-opacity-50);
+    --bp-overlay-sidepanel-overlay: var(--bp-black-opacity-50);
+    --bp-surface-accordion-surface: var(--bp-gray-white);
+    --bp-surface-accordion-surface-hover: var(--bp-gray-05);
+    --bp-surface-badge-admin-surface: var(--bp-dark-blue-100);
+    --bp-surface-badge-annotation-surface: var(--bp-yellorange-100);
+    --bp-surface-badge-boxnote-surface: var(--bp-gray-10);
+    --bp-surface-badge-canvas-surface: var(--bp-orange-100);
+    --bp-surface-badge-coadmin-surface: var(--bp-purple-rain-100);
+    --bp-surface-badge-collection-surface: var(--bp-gray-10);
+    --bp-surface-badge-completed-surface: var(--bp-green-light-100);
+    --bp-surface-badge-error-surface: var(--bp-watermelon-red-110);
+    --bp-surface-badge-external-surface: var(--bp-gray-50);
+    --bp-surface-badge-folderexternal-surface: var(--bp-gray-65);
+    --bp-surface-badge-foldershared-surface: var(--bp-light-blue-100);
+    --bp-surface-badge-image-surface: var(--bp-green-light-100);
+    --bp-surface-badge-mention-surface: var(--bp-light-blue-120);
+    --bp-surface-badge-notification-surface: var(--bp-watermelon-red-110);
+    --bp-surface-badge-offline-surface: var(--bp-green-light-100);
+    --bp-surface-badge-online-surface: var(--bp-green-light-120);
+    --bp-surface-badge-pin-surface: var(--bp-gray-10);
+    --bp-surface-badge-progress-surface: var(--bp-yellorange-100);
+    --bp-surface-badge-rejected-surface: var(--bp-watermelon-red-110);
+    --bp-surface-badge-relay-surface: var(--bp-light-blue-120);
+    --bp-surface-badge-task-surface: var(--bp-light-blue-100);
+    --bp-surface-badge-taskapproval-surface: var(--bp-light-blue-120);
+    --bp-surface-card-surface: var(--bp-gray-white);
+    --bp-surface-card-surface-focus: var(--bp-box-blue-05);
+    --bp-surface-card-surface-hover: var(--bp-gray-white);
+    --bp-surface-card-surface-pressed: var(--bp-gray-02);
+    --bp-surface-checkbox-surface: var(--bp-gray-white);
+    --bp-surface-checkbox-surface-hover: var(--bp-gray-white);
+    --bp-surface-checkbox-surface-selected: var(--bp-box-blue-100);
+    --bp-surface-checkbox-surface-selected-hover: var(--bp-light-blue-110);
+    --bp-surface-chip-button-surface: var(--bp-black-opacity-04);
+    --bp-surface-chip-button-surface-hover: var(--bp-black-opacity-08);
+    --bp-surface-contentbutton-surface-surface-selected: var(--bp-gray-white);
+    --bp-surface-contentswitcher-surface: var(--bp-gray-10);
+    --bp-surface-cta-surface-disabled: var(--bp-box-blue-30);
+    --bp-surface-cta-surface-icon: var(--bp-black-opacity-00);
+    --bp-surface-cta-surface-icon-disabled: var(--bp-black-opacity-00);
+    --bp-surface-cta-surface-icon-hover: var(--bp-black-opacity-04);
+    --bp-surface-cta-surface-icon-pressed: var(--bp-black-opacity-08);
+    --bp-surface-cta-surface-icon-utility: var(--bp-gray-10);
+    --bp-surface-cta-surface-icon-utility-hover: var(--bp-gray-20);
+    --bp-surface-cta-surface-icon-utility-pressed: var(--bp-gray-30);
+    --bp-surface-cta-surface-outline: var(--bp-black-opacity-00);
+    --bp-surface-cta-surface-outline-2: var(--bp-black-opacity-00);
+    --bp-surface-cta-surface-outline-hover: var(--bp-black-opacity-04);
+    --bp-surface-cta-surface-outline-pressed: var(--bp-black-opacity-08);
+    --bp-surface-cta-surface-promo: var(--bp-grimace-110);
+    --bp-surface-cta-surface-promo-focus: var(--bp-grimace-100);
+    --bp-surface-cta-surface-promo-focus-pressed: var(--bp-grimace-120);
+    --bp-surface-cta-surface-promo-hover: var(--bp-grimace-100);
+    --bp-surface-cta-surface-promo-pressed: var(--bp-grimace-120);
+    --bp-surface-cta-surface-secondary: var(--bp-white-opacity-70);
+    --bp-surface-cta-surface-secondary-busy: var(--bp-white-opacity-70);
+    --bp-surface-cta-surface-secondary-disabled: var(--bp-white-opacity-70);
+    --bp-surface-cta-surface-secondary-focus: var(--bp-black-opacity-04);
+    --bp-surface-cta-surface-secondary-focus-pressed: var(--bp-black-opacity-08);
+    --bp-surface-cta-surface-secondary-hover: var(--bp-black-opacity-04);
+    --bp-surface-cta-surface-secondary-pressed: var(--bp-black-opacity-08);
+    --bp-surface-cta-surface-tertiary: var(--bp-gray-white);
+    --bp-surface-cta-surface-tertiary-hover: var(--bp-gray-05);
+    --bp-surface-cta-surface-tertiary-pressed: var(--bp-gray-10);
+    --bp-surface-cta-surface-tertiary-promo: var(--bp-grimace-10);
+    --bp-surface-cta-surface-tertiary-promo-focus: var(--bp-grimace-05);
+    --bp-surface-cta-surface-tertiary-promo-focus-pressed: var(--bp-grimace-20);
+    --bp-surface-cta-surface-tertiary-promo-hover: var(--bp-grimace-05);
+    --bp-surface-cta-surface-tertiary-promo-pressed: var(--bp-grimace-20);
+    --bp-surface-cta-destructive-surface-teratiary-hover: var(--bp-watermelon-red-05);
+    --bp-surface-cta-destructive-surface-teratiary-pressed: var(--bp-watermelon-red-10);
+    --bp-surface-cta-destructive-surface-tertiary: var(--bp-watermelon-red-opacity-00);
+    --bp-surface-day-surface: var(--bp-gray-white);
+    --bp-surface-day-surface-hover: var(--bp-gray-05);
+    --bp-surface-day-surface-selected: var(--bp-box-blue-100);
+    --bp-surface-day-surface-selected-hover: var(--bp-dark-blue-100);
+    --bp-surface-dropdown-primary-surface-hover: var(--bp-gray-05);
+    --bp-surface-dropdown-primary-surface-pressed: var(--bp-gray-10);
+    --bp-surface-dropdown-secondary-surface: var(--bp-gray-white);
+    --bp-surface-dropdown-secondary-surface-hover: var(--bp-gray-05);
+    --bp-surface-dropdown-secondary-surface-pressed: var(--bp-gray-10);
+    --bp-surface-dropdown-surface: var(--bp-gray-white);
+    --bp-surface-dropdown-surface-error: var(--bp-gray-white);
+    --bp-surface-dropdown-surface-error-focus: var(--bp-gray-white);
+    --bp-surface-dropdown-surface-error-hover: var(--bp-gray-white);
+    --bp-surface-dropdown-surface-focus: var(--bp-gray-white);
+    --bp-surface-dropdown-surface-hover: var(--bp-gray-white);
+    --bp-surface-filter-surface: var(--bp-box-blue-100);
+    --bp-surface-filter-surface-focus: var(--bp-box-blue-100);
+    --bp-surface-filter-surface-hover: var(--bp-box-blue-100);
+    --bp-surface-filter-surface-selected: var(--bp-box-blue-100);
+    --bp-surface-filter-surface-selected-focus: var(--bp-box-blue-100);
+    --bp-surface-filterchip-surface-multi: var(--bp-black-opacity-04);
+    --bp-surface-filterchip-surface-multi-hover: var(--bp-black-opacity-08);
+    --bp-surface-filterchip-surface-multi-on: var(--bp-box-blue-10);
+    --bp-surface-filterchip-surface-multi-on-hover: var(--bp-box-blue-20);
+    --bp-surface-filterchip-surface-single: var(--bp-black-opacity-04);
+    --bp-surface-filterchip-surface-single-hover: var(--bp-black-opacity-08);
+    --bp-surface-filterchip-surface-single-on: var(--bp-box-blue-100);
+    --bp-surface-filterchip-surface-single-on-hover: var(--bp-box-blue-100);
+    --bp-surface-ghost-surface: var(--bp-gray-02);
+    --bp-surface-ghost-surface-secondary: var(--bp-gray-05);
+    --bp-surface-illustration-surface-box: var(--bp-box-blue-100);
+    --bp-surface-illustration-surface-box-neutral: var(--bp-box-blue-100);
+    --bp-surface-input-surface: var(--bp-gray-white);
+    --bp-surface-input-surface-error: var(--bp-gray-white);
+    --bp-surface-input-surface-error-focus: var(--bp-gray-white);
+    --bp-surface-input-surface-error-hover: var(--bp-gray-white);
+    --bp-surface-input-surface-focus: var(--bp-gray-white);
+    --bp-surface-input-surface-hover: var(--bp-gray-white);
+    --bp-surface-inputchip-surface: var(--bp-gray-10);
+    --bp-surface-inputchip-surface-error: var(--bp-watermelon-red-10);
+    --bp-surface-inputchip-surface-hover: var(--bp-gray-10);
+    --bp-surface-item-small-surface: var(--bp-gray-white);
+    --bp-surface-item-small-surface-hover: var(--bp-gray-05);
+    --bp-surface-item-small-surface-selected: var(--bp-box-blue-05);
+    --bp-surface-item-surface-hover: var(--bp-gray-white);
+    --bp-surface-item-surface-selected: var(--bp-box-blue-05);
+    --bp-surface-menu-surface: var(--bp-gray-white);
+    --bp-surface-menu-surface-focus: var(--bp-gray-05);
+    --bp-surface-menu-surface-hover: var(--bp-gray-05);
+    --bp-surface-menu-surface-pressed: var(--bp-gray-05);
+    --bp-surface-message-surface-error-secondary: var(--bp-watermelon-red-10);
+    --bp-surface-message-surface-generic: var(--bp-gray-10);
+    --bp-surface-message-surface-generic-secondary: var(--bp-gray-10);
+    --bp-surface-message-surface-info-secondary: var(--bp-light-blue-10);
+    --bp-surface-message-surface-promo-secondary: var(--bp-grimace-10);
+    --bp-surface-message-surface-success-secondary: var(--bp-green-light-10);
+    --bp-surface-message-surface-warning-secondary: var(--bp-yellorange-10);
+    --bp-surface-nav-surface-brand: var(--bp-box-blue-100);
+    --bp-surface-option-grid-surface-hover: var(--bp-black-opacity-04);
+    --bp-surface-option-grid-surface-selected: var(--bp-black-opacity-08);
+    --bp-surface-page-surface: var(--bp-gray-white);
+    --bp-surface-pill-surface: var(--bp-gray-10);
+    --bp-surface-pill-surface-focus: var(--bp-gray-10);
+    --bp-surface-pill-surface-hover: var(--bp-gray-10);
+    --bp-surface-progressbar-surface-brand: var(--bp-box-blue-100);
+    --bp-surface-radio-surface: var(--bp-gray-white);
+    --bp-surface-radio-surface-hover: var(--bp-gray-white);
+    --bp-surface-radio-surface-selected: var(--bp-box-blue-100);
+    --bp-surface-radio-surface-selected-hover: var(--bp-light-blue-110);
+    --bp-surface-radiotile-surface: var(--bp-gray-white);
+    --bp-surface-radiotile-surface-hover: var(--bp-gray-05);
+    --bp-surface-radiotile-surface-selected: var(--bp-box-blue-05);
+    --bp-surface-scrollbar-surface: var(--bp-black-opacity-50);
+    --bp-surface-search-global-surface: var(--bp-gray-05);
+    --bp-surface-search-surface: var(--bp-gray-05);
+    --bp-surface-search-surface-focused: var(--bp-gray-white);
+    --bp-surface-search-surface-hover: var(--bp-gray-02);
+    --bp-surface-sliderthumb-surface: var(--bp-box-blue-100);
+    --bp-surface-sliderthumb-surface-hover: var(--bp-light-blue-100);
+    --bp-surface-slidertrack-surface: var(--bp-gray-65);
+    --bp-surface-status-surface-boxblue: var(--bp-box-blue-100);
+    --bp-surface-status-surface-boxblue-focus: var(--bp-box-blue-100);
+    --bp-surface-status-surface-boxblue-hover: var(--bp-box-blue-100);
+    --bp-surface-status-surface-dark-blue: var(--bp-dark-blue-50);
+    --bp-surface-status-surface-dark-blue-focus: var(--bp-dark-blue-50);
+    --bp-surface-status-surface-dark-blue-hover: var(--bp-dark-blue-50);
+    --bp-surface-status-surface-error: var(--bp-watermelon-red-100);
+    --bp-surface-status-surface-generic: var(--bp-gray-40);
+    --bp-surface-status-surface-gray: var(--bp-gray-10);
+    --bp-surface-status-surface-gray-focus: var(--bp-gray-10);
+    --bp-surface-status-surface-gray-hover: var(--bp-gray-10);
+    --bp-surface-status-surface-green: var(--bp-green-light-50);
+    --bp-surface-status-surface-green-focus: var(--bp-green-light-50);
+    --bp-surface-status-surface-green-hover: var(--bp-green-light-50);
+    --bp-surface-status-surface-inprogress: var(--bp-yellorange-100);
+    --bp-surface-status-surface-light-blue: var(--bp-light-blue-50);
+    --bp-surface-status-surface-light-blue-focus: var(--bp-light-blue-50);
+    --bp-surface-status-surface-light-blue-hover: var(--bp-light-blue-50);
+    --bp-surface-status-surface-orange: var(--bp-orange-50);
+    --bp-surface-status-surface-orange-focus: var(--bp-orange-50);
+    --bp-surface-status-surface-orange-hover: var(--bp-orange-50);
+    --bp-surface-status-surface-pending: var(--bp-gray-40);
+    --bp-surface-status-surface-purple: var(--bp-purple-rain-50);
+    --bp-surface-status-surface-purple-focus: var(--bp-purple-rain-50);
+    --bp-surface-status-surface-purple-hover: var(--bp-purple-rain-50);
+    --bp-surface-status-surface-red: var(--bp-watermelon-red-50);
+    --bp-surface-status-surface-red-focus: var(--bp-watermelon-red-50);
+    --bp-surface-status-surface-red-hover: var(--bp-watermelon-red-50);
+    --bp-surface-status-surface-scheduled: var(--bp-purple-rain-100);
+    --bp-surface-status-surface-success: var(--bp-green-light-100);
+    --bp-surface-status-surface-uploading: var(--bp-box-blue-100);
+    --bp-surface-status-surface-yellow: var(--bp-yellow-50);
+    --bp-surface-status-surface-yellow-focus: var(--bp-yellow-50);
+    --bp-surface-status-surface-yellow-hover: var(--bp-yellow-50);
+    --bp-surface-surface: var(--bp-gray-white);
+    --bp-surface-surface-brand-secondary: var(--bp-box-blue-10);
+    --bp-surface-surface-hover: var(--bp-gray-05);
+    --bp-surface-surface-quaternary: var(--bp-gray-20);
+    --bp-surface-surface-secondary: var(--bp-gray-02);
+    --bp-surface-surface-secondary-focus: var(--bp-gray-02);
+    --bp-surface-surface-secondary-hover: var(--bp-gray-05);
+    --bp-surface-surface-tertiary: var(--bp-gray-10);
+    --bp-surface-switch-surface: var(--bp-gray-white);
+    --bp-surface-switch-surface-hover: var(--bp-gray-white);
+    --bp-surface-switch-surface-off: var(--bp-gray-20);
+    --bp-surface-switch-surface-off-hover: var(--bp-gray-30);
+    --bp-surface-switch-surface-on: var(--bp-box-blue-100);
+    --bp-surface-switch-surface-on-hover: var(--bp-light-blue-110);
+    --bp-surface-tab-surface-hover: var(--bp-gray-05);
+    --bp-surface-tab-surface-pressed: var(--bp-gray-10);
+    --bp-surface-text-highlight-surface: var(--bp-yellow-20);
+    --bp-surface-toggle-surface: var(--bp-gray-white);
+    --bp-surface-toggle-surface-hover: var(--bp-gray-05);
+    --bp-surface-toggle-surface-off-hover: var(--bp-gray-05);
+    --bp-surface-toggle-surface-off-pressed: var(--bp-gray-10);
+    --bp-surface-toggle-surface-on: var(--bp-box-blue-10);
+    --bp-surface-toggle-surface-on-hover: var(--bp-box-blue-20);
+    --bp-surface-toggle-surface-on-pressed: var(--bp-box-blue-30);
+    --bp-surface-toggle-surface-pressed: var(--bp-box-blue-100);
+    --bp-surface-toggle-surface-pressed-hover: var(--bp-box-blue-80);
+    --bp-surface-toggletext-surface-off-ai: var(--bp-gray-white);
+    --bp-surface-toggletext-surface-off-ai-hover: var(--bp-gray-05);
+    --bp-surface-toggletext-surface-off-ai-pressed: var(--bp-gray-10);
+    --bp-surface-toggletext-surface-on: var(--bp-box-blue-10);
+    --bp-surface-toggletext-surface-on-hover: var(--bp-box-blue-20);
+    --bp-surface-toggletext-surface-on-pressed: var(--bp-box-blue-30);
+    --bp-surface-toolbar-surface: var(--bp-gray-100);
+    --bp-surface-tooltip-surface: var(--bp-gray-80);
+    --bp-surface-tooltip-surface-error: var(--bp-watermelon-red-10);
+    --bp-surface-upload-surface-brand-neutral: var(--bp-box-blue-100);
+    --bp-text-cta-link: var(--bp-box-blue-100);
+    --bp-text-cta-link-disabled: var(--bp-box-blue-30);
+    --bp-text-cta-link-hover: var(--bp-light-blue-120);
+    --bp-text-cta-link-pressed: var(--bp-light-blue-100);
+    --bp-text-cta-link-secondary: var(--bp-gray-65);
+    --bp-text-cta-link-secondary-hover: var(--bp-gray-65);
+    --bp-text-cta-link-secondary-pressed: var(--bp-gray-65);
+    --bp-text-cta-promo: var(--bp-grimace-100);
+    --bp-text-nav-text-on-dark: var(--bp-gray-white);
+    --bp-text-nav-text-on-dark-focus: var(--bp-gray-white);
+    --bp-text-nav-text-on-dark-hover: var(--bp-gray-white);
+    --bp-text-nav-text-on-dark-selected: var(--bp-gray-white);
+    --bp-text-nav-text-on-light: var(--bp-gray-white);
+    --bp-text-nav-text-on-light-focus: var(--bp-gray-white);
+    --bp-text-nav-text-on-light-hover: var(--bp-gray-white);
+    --bp-text-nav-text-on-light-selected: var(--bp-gray-white);
+    --bp-text-text-brand-on-color: var(--bp-gray-white);
+    --bp-text-text-destructive-on-light: var(--bp-watermelon-red-110);
+    --bp-text-text-error-on-light: var(--bp-watermelon-red-110);
+    --bp-text-text-on-dark: var(--bp-gray-white);
+    --bp-text-text-on-light: var(--bp-gray-100);
+    --bp-text-text-on-light-disabled: var(--bp-gray-30);
+    --bp-text-text-on-light-secondary: var(--bp-gray-65);
+    --bp-text-text-on-light-secondary-hover: var(--bp-gray-80);
+    --bp-text-text-on-light-tertiary: var(--bp-gray-50);
+    --bp-text-toggletext-text: var(--bp-box-blue-120);
 }