@box/blueprint-web-assets 4.2.2

package/tokens/tokens-css-vars.scss

@@ -0,0 +1,683 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 01 Feb 2024 09:48:36 GMT
+ */
+
+:root {
+    --notification-default-paragraph-indent: 0;
+    --notification-default-paragraph-spacing: 0;
+    --notification-default-text-case: none;
+    --notification-default-text-decoration: none;
+    --notification-default-letter-spacing: 0.01875rem;
+    --notification-default-font-size: 0.5625rem;
+    --notification-default-line-height: 0.75rem;
+    --breakpoint-xlarge: 1024px;
+    --breakpoint-large: 1023px;
+    --breakpoint-medium: 767px;
+    --breakpoint-small: 374px;
+    --animation-easing-ease-base: cubic-bezier(0.16, 1, 0.3, 1);
+    --animation-duration-4: 400ms;
+    --animation-duration-3: 300ms;
+    --animation-duration-2: 200ms;
+    --text-decoration-underline: underline;
+    --font-weights-black: 900;
+    --font-weights-bold: 700;
+    --font-weights-semibold: 600;
+    --font-weights-regular: 400;
+    --font-families-sans: Lato, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue',
+        sans-serif;
+    --border-8: 0.5rem;
+    --border-6: 0.375rem;
+    --border-4: 0.25rem;
+    --white-opacity-30: #ffffff4d;
+    --white-opacity-70: #ffffffb3;
+    --size-20: 5rem;
+    --size-18: 4.5rem;
+    --size-16: 4rem;
+    --size-15: 3.75rem;
+    --size-14: 3.5rem;
+    --size-12: 3rem;
+    --size-11: 2.75rem;
+    --size-10: 2.5rem;
+    --size-9: 2.25rem;
+    --size-8: 2rem;
+    --size-7: 1.75rem;
+    --size-6: 1.5rem;
+    --size-5: 1.25rem;
+    --size-4: 1rem;
+    --size-3: 0.75rem;
+    --size-2: 0.5rem;
+    --size-1: 0.25rem;
+    --size-05: 0.125rem;
+    --black-opacity-00: rgba(0, 0, 0, 0);
+    --black-opacity-04: rgba(0, 0, 0, 0.04);
+    --black-opacity-08: rgba(0, 0, 0, 0.08);
+    --black-opacity-50: rgba(0, 0, 0, 0.5);
+    --black-opacity-60: rgba(0, 0, 0, 0.6);
+    --black-opacity-80: rgba(0, 0, 0, 0.8);
+    --innershadow-1: inset 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.1);
+    --dropshadow-1: 0 0 0.5rem 0 rgba(0, 0, 0, 0.05);
+    --dropshadow-2: 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1);
+    --dropshadow-3-inverse: 0 -0.25rem 0.75rem 0 rgba(0, 0, 0, 0.1);
+    --dropshadow-3: 0 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.1);
+    --space-20: 5rem;
+    --space-18: 4.5rem;
+    --space-16: 4rem;
+    --space-15: 3.75rem;
+    --space-14: 3.5rem;
+    --space-12: 3rem;
+    --space-11: 2.75rem;
+    --space-10: 2.5rem;
+    --space-9: 2.25rem;
+    --space-8: 2rem;
+    --space-7: 1.75rem;
+    --space-6: 1.5rem;
+    --space-5: 1.25rem;
+    --space-4: 1rem;
+    --space-3: 0.75rem;
+    --space-2: 0.5rem;
+    --space-1: 0.25rem;
+    --space-05: 0.125rem;
+    --border-3: 0.1875rem;
+    --border-2: 0.125rem;
+    --border-1: 0.0625rem;
+    --radius-half: 2rem;
+    --radius-8: 1.75rem;
+    --radius-7: 1.5rem;
+    --radius-6: 1.25rem;
+    --radius-5: 1rem;
+    --radius-4: 0.75rem;
+    --radius-3: 0.5rem;
+    --radius-2: 0.375rem;
+    --radius-1: 0.25rem;
+    --radius-05: 0.125rem;
+    --link-default-text-case: none;
+    --link-default-paragraph-indent: 0;
+    --link-default-paragraph-spacing: 0;
+    --link-default-letter-spacing: 0.01875rem;
+    --link-default-font-size: 0.875rem;
+    --link-default-line-height: 1.25rem;
+    --label-default-text-decoration: none;
+    --label-default-text-case: none;
+    --label-default-paragraph-spacing: 0;
+    --label-default-letter-spacing: 0.0375rem;
+    --label-default-font-size: 0.625rem;
+    --label-default-line-height: 1rem;
+    --label-bold-text-decoration: none;
+    --label-bold-text-case: none;
+    --label-bold-paragraph-spacing: 0;
+    --label-bold-letter-spacing: 0.0375rem;
+    --label-bold-font-size: 0.625rem;
+    --label-bold-line-height: 1rem;
+    --caption-default-text-decoration: none;
+    --caption-default-text-case: none;
+    --caption-default-paragraph-spacing: 0;
+    --caption-default-letter-spacing: 0.01875rem;
+    --caption-default-font-size: 0.75rem;
+    --caption-default-line-height: 0.875rem;
+    --caption-bold-text-decoration: none;
+    --caption-bold-text-case: none;
+    --caption-bold-paragraph-spacing: 0;
+    --caption-bold-letter-spacing: 0.01875rem;
+    --caption-bold-font-size: 0.75rem;
+    --caption-bold-line-height: 0.875rem;
+    --body-default-text-decoration: none;
+    --body-default-text-case: none;
+    --body-default-paragraph-spacing: 0;
+    --body-default-letter-spacing: 0.01875rem;
+    --body-default-font-size: 0.875rem;
+    --body-default-line-height: 1.25rem;
+    --body-default-semibold-text-decoration: none;
+    --body-default-semibold-text-case: none;
+    --body-default-semibold-paragraph-spacing: 0;
+    --body-default-semibold-letter-spacing: 0.01875rem;
+    --body-default-semibold-font-size: 0.875rem;
+    --body-default-semibold-line-height: 1.25rem;
+    --body-default-bold-text-decoration: none;
+    --body-default-bold-text-case: none;
+    --body-default-bold-paragraph-spacing: 0;
+    --body-default-bold-letter-spacing: 0.01875rem;
+    --body-default-bold-font-size: 0.875rem;
+    --body-default-bold-line-height: 1.25rem;
+    --body-large-bold-text-decoration: none;
+    --body-large-bold-text-case: none;
+    --body-large-bold-paragraph-spacing: 0;
+    --body-large-bold-letter-spacing: 0.01875rem;
+    --body-large-bold-font-size: 1rem;
+    --body-large-bold-line-height: 1.5rem;
+    --body-large-text-decoration: none;
+    --body-large-text-case: none;
+    --body-large-paragraph-spacing: 0;
+    --body-large-letter-spacing: 0.01875rem;
+    --body-large-font-size: 1rem;
+    --body-large-line-height: 1.5rem;
+    --title-mondo-text-decoration: none;
+    --title-mondo-text-case: none;
+    --title-mondo-paragraph-spacing: 0;
+    --title-mondo-letter-spacing: 0;
+    --title-mondo-font-size: 2.25rem;
+    --title-mondo-line-height: 2.75rem;
+    --title-x-large-text-decoration: none;
+    --title-x-large-text-case: none;
+    --title-x-large-paragraph-spacing: 0;
+    --title-x-large-letter-spacing: 0.01875rem;
+    --title-x-large-font-size: 1.3125rem;
+    --title-x-large-line-height: 2rem;
+    --title-large-text-decoration: none;
+    --title-large-text-case: none;
+    --title-large-paragraph-spacing: 0;
+    --title-large-letter-spacing: 0.01875rem;
+    --title-large-font-size: 1.125rem;
+    --title-large-line-height: 1.5rem;
+    --title-medium-text-decoration: none;
+    --title-medium-text-case: none;
+    --title-medium-paragraph-spacing: 0;
+    --title-medium-letter-spacing: 0.01875rem;
+    --title-medium-font-size: 1rem;
+    --title-medium-line-height: 1.5rem;
+    --title-small-text-decoration: none;
+    --title-small-text-case: none;
+    --title-small-paragraph-spacing: 0;
+    --title-small-letter-spacing: 0.01875rem;
+    --title-small-font-size: 0.9375rem;
+    --title-small-line-height: 1.25rem;
+    --title-subtitle-text-decoration: none;
+    --title-subtitle-text-case: none;
+    --title-subtitle-paragraph-spacing: 0;
+    --title-subtitle-letter-spacing: 0.01875rem;
+    --title-subtitle-font-size: 0.875rem;
+    --title-subtitle-line-height: 1.25rem;
+    --grimace-02: #fbfbfe;
+    --grimace-05: #f6f4fc;
+    --grimace-180: #0e0827;
+    --grimace-170: #160b3a;
+    --grimace-160: #1d0f4e;
+    --grimace-150: #241361;
+    --grimace-120: #3a1e9b;
+    --grimace-110: #4122af;
+    --grimace-100: #4826c2;
+    --grimace-50: #a392e0;
+    --grimace-20: #dad4f3;
+    --grimace-10: #ece9f8;
+    --purple-rain-02: #fdfbff;
+    --purple-rain-05: #faf5fe;
+    --purple-rain-180: #200d2f;
+    --purple-rain-170: #301347;
+    --purple-rain-160: #40195f;
+    --purple-rain-150: #4f1f76;
+    --purple-rain-120: #7f32be;
+    --purple-rain-110: #8f39d5;
+    --purple-rain-100: #9f3fed;
+    --purple-rain-50: #cf9ff6;
+    --purple-rain-20: #ecd9fb;
+    --purple-rain-10: #f5ebfd;
+    --yellow-02: #fffefa;
+    --yellow-05: #fffdf2;
+    --yellow-180: #332b00;
+    --yellow-170: #4c4000;
+    --yellow-160: #665600;
+    --yellow-150: #806b00;
+    --yellow-120: #ccac00;
+    --yellow-110: #e6c100;
+    --yellow-100: #ffd700;
+    --yellow-50: #ffeb7f;
+    --yellow-20: #fff7cc;
+    --yellow-10: #fffbe5;
+    --yellorange-02: #fffefb;
+    --yellorange-05: #fefbf3;
+    --yellorange-180: #312405;
+    --yellorange-170: #493608;
+    --yellorange-160: #62480b;
+    --yellorange-150: #7a590d;
+    --yellorange-120: #c48f16;
+    --yellorange-110: #dca118;
+    --yellorange-100: #f5b31b;
+    --yellorange-50: #fad98d;
+    --yellorange-20: #fdf0d1;
+    --yellorange-10: #fef7e8;
+    --orange-02: #fffdfb;
+    --orange-05: #fef8f3;
+    --orange-180: #301a05;
+    --orange-170: #482708;
+    --orange-160: #60340a;
+    --orange-150: #78400d;
+    --orange-120: #c16715;
+    --orange-110: #d97417;
+    --orange-100: #f1811a;
+    --orange-50: #f8c08c;
+    --orange-20: #fce6d1;
+    --orange-10: #fdf2e8;
+    --watermelon-red-02: #fffbfc;
+    --watermelon-red-05: #fef5f6;
+    --watermelon-red-180: #2f0b11;
+    --watermelon-red-170: #47101a;
+    --watermelon-red-160: #5f1623;
+    --watermelon-red-150: #761b2b;
+    --watermelon-red-120: #be2c46;
+    --watermelon-red-110: #d5324e;
+    --watermelon-red-100: #ed3757;
+    --watermelon-red-50: #f69bab;
+    --watermelon-red-20: #fbd7dd;
+    --watermelon-red-10: #fdebee;
+    --green-light-02: #fbfefd;
+    --green-light-05: #f4fcf8;
+    --green-light-180: #08271a;
+    --green-light-170: #0b3a27;
+    --green-light-160: #0f4e34;
+    --green-light-150: #136140;
+    --green-light-120: #1e9b67;
+    --green-light-110: #22af74;
+    --green-light-100: #26c281;
+    --green-light-50: #92e0c0;
+    --green-light-20: #d4f3e6;
+    --green-light-10: #e9f8f2;
+    --light-blue-02: #fbfdff;
+    --light-blue-05: #f4f9ff;
+    --light-blue-180: #071b32;
+    --light-blue-170: #0b284c;
+    --light-blue-160: #0e3665;
+    --light-blue-150: #12437e;
+    --light-blue-120: #1d6bca;
+    --light-blue-110: #2079e3;
+    --light-blue-100: #2486fc;
+    --light-blue-50: #91c2fd;
+    --light-blue-20: #d3e7fe;
+    --light-blue-10: #e9f2fe;
+    --dark-blue-02: #fafbfd;
+    --dark-blue-05: #f2f5f9;
+    --dark-blue-180: #000c1a;
+    --dark-blue-170: #001228;
+    --dark-blue-160: #001835;
+    --dark-blue-150: #001e42;
+    --dark-blue-120: #00306a;
+    --dark-blue-110: #003677;
+    --dark-blue-100: #003c84;
+    --dark-blue-50: #7f9dc1;
+    --dark-blue-20: #ccd8e6;
+    --dark-blue-10: #e5ebf2;
+    --box-blue-02: #fafcfe;
+    --box-blue-05: #f2f7fd;
+    --box-blue-100: #0061d5;
+    --box-blue-80: #3381dd;
+    --box-blue-50: #7fb0ea;
+    --box-blue-40: #99c0ee;
+    --box-blue-30: #b2cff2;
+    --box-blue-20: #ccdff7;
+    --box-blue-10: #e5effa;
+    --gray-white: #fff;
+    --gray-black: #000;
+    --gray-05: #f4f4f4;
+    --gray-02: #fbfbfb;
+    --gray-100: #222;
+    --gray-90: #383838;
+    --gray-80: #4e4e4e;
+    --gray-65: #6f6f6f;
+    --gray-50: #909090;
+    --gray-40: #a7a7a7;
+    --gray-30: #bcbcbc;
+    --gray-20: #d3d3d3;
+    --gray-10: #e8e8e8;
+    --surface-badge-video-surface: #009aed;
+    --surface-badge-keynote-surface: #0a84ff;
+    --surface-badge-pages-surface: #ff9500;
+    --surface-badge-sheets-surface: #21a464;
+    --surface-badge-docs-surface: #4083f7;
+    --surface-badge-pdf-surface: #d0021b;
+    --surface-surface-brand-disabled: #0061d5;
+    --surface-surface-brand-busy: #0061d5;
+    --surface-surface-brand-pressed: #004eac;
+    --surface-surface-brand-hover: #006ae9;
+    --surface-surface-brand: #0061d5;
+    --notification-default-font-weight: 700;
+    --notification-default-font-family: var(--font-families-sans);
+    --motion-transition-slide-in: var(--animation-duration-4) var(--animation-easing-ease-base);
+    --link-default-text-decoration: var(--text-decoration-underline);
+    --link-default-font-weight: 400;
+    --link-default-font-family: var(--font-families-sans);
+    --label-default-font-weight: 400;
+    --label-default-font-family: var(--font-families-sans);
+    --label-bold-font-weight: 700;
+    --label-bold-font-family: var(--font-families-sans);
+    --caption-default-font-weight: 400;
+    --caption-default-font-family: var(--font-families-sans);
+    --caption-bold-font-weight: 700;
+    --caption-bold-font-family: var(--font-families-sans);
+    --body-default-font-weight: 400;
+    --body-default-font-family: var(--font-families-sans);
+    --body-default-semibold-font-weight: 600;
+    --body-default-semibold-font-family: var(--font-families-sans);
+    --body-default-bold-font-weight: 700;
+    --body-default-bold-font-family: var(--font-families-sans);
+    --body-large-bold-font-weight: 700;
+    --body-large-bold-font-family: var(--font-families-sans);
+    --body-large-font-weight: 400;
+    --body-large-font-family: var(--font-families-sans);
+    --title-mondo-font-weight: 900;
+    --title-mondo-font-family: var(--font-families-sans);
+    --title-x-large-font-weight: 700;
+    --title-x-large-font-family: var(--font-families-sans);
+    --title-large-font-weight: 700;
+    --title-large-font-family: var(--font-families-sans);
+    --title-medium-font-weight: 700;
+    --title-medium-font-family: var(--font-families-sans);
+    --title-small-font-weight: 700;
+    --title-small-font-family: var(--font-families-sans);
+    --title-subtitle-font-weight: 700;
+    --title-subtitle-font-family: var(--font-families-sans);
+    --overlay-modal-overlay: var(--black-opacity-80);
+    --overlay-sidepanel-overlay: var(--black-opacity-50);
+    --text-cta-promo: var(--grimace-100);
+    --text-cta-link-secondary-hover: var(--gray-65);
+    --text-cta-link-secondary-pressed: var(--gray-65);
+    --text-cta-link-secondary: var(--gray-65);
+    --text-text-error-on-light: var(--watermelon-red-110);
+    --text-nav-text-on-light-focus: var(--gray-white);
+    --text-nav-text-on-light-selected: var(--gray-white);
+    --text-nav-text-on-light-hover: var(--gray-white);
+    --text-nav-text-on-light: var(--gray-white);
+    --text-nav-text-on-dark-focus: var(--gray-white);
+    --text-nav-text-on-dark-selected: var(--gray-white);
+    --text-nav-text-on-dark-hover: var(--gray-white);
+    --text-nav-text-on-dark: var(--gray-white);
+    --text-cta-link-pressed: var(--light-blue-100);
+    --text-cta-link-hover: var(--box-blue-100);
+    --text-cta-link: var(--box-blue-100);
+    --text-text-brand-on-color: var(--gray-white);
+    --text-text-on-dark: var(--gray-white);
+    --text-text-on-light-secondary-hover: var(--gray-80);
+    --text-text-on-light-tertiary: var(--gray-50);
+    --text-text-on-light-secondary: var(--gray-65);
+    --text-text-on-light: var(--gray-100);
+    --outline-focus-on-dark: var(--gray-white);
+    --outline-focus-on-light: var(--light-blue-100);
+    --icon-icon-blue: var(--box-blue-100);
+    --icon-cta-icon-on-color-pressed: var(--gray-black);
+    --icon-cta-icon-on-color-hover: var(--gray-black);
+    --icon-cta-icon-on-color: var(--gray-black);
+    --icon-cta-icon-utility-pressed: var(--gray-black);
+    --icon-cta-icon-utility-hover: var(--gray-black);
+    --icon-cta-icon-utility: var(--gray-80);
+    --icon-cta-icon-pressed: var(--gray-100);
+    --icon-cta-icon-hover: var(--gray-100);
+    --icon-cta-icon: var(--gray-65);
+    --icon-nav-icon-on-light-focus: var(--gray-100);
+    --icon-nav-icon-on-light-selected: var(--gray-100);
+    --icon-nav-icon-on-light-hover: var(--gray-100);
+    --icon-nav-icon-on-light: var(--gray-100);
+    --icon-nav-icon-on-dark-focus: var(--gray-white);
+    --icon-nav-icon-on-dark-selected: var(--gray-white);
+    --icon-nav-icon-on-dark-hover: var(--gray-white);
+    --icon-nav-icon-on-dark: var(--gray-white);
+    --icon-icon-error-on-light: var(--watermelon-red-110);
+    --icon-icon-on-dark: var(--gray-white);
+    --icon-icon-on-light-tertiary: var(--gray-50);
+    --icon-icon-on-light-secondary: var(--gray-65);
+    --icon-icon-on-light: var(--gray-100);
+    --border-toggle-border: var(--gray-30);
+    --border-badge-border: var(--gray-white);
+    --border-collapsible-border: var(--gray-20);
+    --border-filterchip-border-multi-on: var(--light-blue-50);
+    --border-gridthumbnail-border: var(--gray-10);
+    --border-search-global-border-hover: var(--gray-10);
+    --border-search-border-hover: var(--gray-65);
+    --border-search-border: var(--gray-05);
+    --border-status-border-hover: var(--black-opacity-04);
+    --border-avatar-border-pressed: var(--black-opacity-08);
+    --border-avatar-border-hover: var(--black-opacity-04);
+    --border-inputchip-border-error: var(--watermelon-red-100);
+    --border-card-border-pressed: var(--gray-10);
+    --border-divider-border: var(--gray-10);
+    --border-checkbox-border-selected-hover: var(--box-blue-100);
+    --border-checkbox-border-selected: var(--box-blue-100);
+    --border-checkbox-border-hover: var(--gray-65);
+    --border-checkbox-border: var(--gray-65);
+    --border-radio-border-hover: var(--gray-65);
+    --border-radio-border-selected-hover: var(--box-blue-100);
+    --border-radio-border-selected: var(--box-blue-100);
+    --border-radio-border: var(--gray-65);
+    --border-switch-border-hover: var(--gray-30);
+    --border-switch-border: var(--gray-30);
+    --border-item-small-border-selected: var(--box-blue-100);
+    --border-item-border-selected: var(--box-blue-100);
+    --border-item-border-hover: var(--gray-10);
+    --border-cta-border-outline-pressed: var(--gray-black);
+    --border-cta-border-outline-hover: var(--gray-black);
+    --border-cta-border-outline: var(--gray-black);
+    --border-tab-border-hover: var(--gray-30);
+    --border-tab-border: var(--gray-10);
+    --border-tab-border-selected-focus: var(--box-blue-100);
+    --border-tab-border-selected-hover: var(--box-blue-100);
+    --border-tab-border-selected: var(--box-blue-100);
+    --border-tooltip-border-error: var(--watermelon-red-50);
+    --border-dropdown-border-error-focus: var(--watermelon-red-100);
+    --border-dropdown-border-error-hover: var(--watermelon-red-100);
+    --border-dropdown-border-error: var(--watermelon-red-100);
+    --border-dropdown-border-focus: var(--box-blue-100);
+    --border-dropdown-border-hover: var(--gray-65);
+    --border-dropdown-border: var(--gray-30);
+    --border-input-border-error-focus: var(--watermelon-red-100);
+    --border-input-border-error-hover: var(--watermelon-red-100);
+    --border-input-border-error: var(--watermelon-red-100);
+    --border-input-border-focus: var(--light-blue-100);
+    --border-input-border-hover: var(--gray-65);
+    --border-input-border: var(--gray-50);
+    --border-message-border-error-secondary: var(--watermelon-red-50);
+    --border-message-border-error: var(--watermelon-red-100);
+    --border-message-border-warning-secondary: var(--yellorange-50);
+    --border-message-border-warning: var(--yellorange-100);
+    --border-message-border-success-secondary: var(--green-light-50);
+    --border-message-border-success: var(--green-light-100);
+    --border-message-border-info-secondary: var(--light-blue-50);
+    --border-message-border-info: var(--box-blue-100);
+    --border-message-border-generic-secondary: var(--gray-50);
+    --border-message-border-generic: var(--gray-100);
+    --border-card-border-focus: var(--box-blue-100);
+    --border-card-border-hover: var(--gray-10);
+    --border-card-border: var(--gray-10);
+    --border-cta-border-secondary-hover: var(--gray-30);
+    --border-cta-border-secondary-pressed: var(--gray-30);
+    --border-cta-border-secondary: var(--gray-30);
+    --surface-cta-surface-promo-focus-pressed: var(--grimace-120);
+    --surface-cta-surface-promo-focus: var(--grimace-100);
+    --surface-cta-surface-promo-pressed: var(--grimace-120);
+    --surface-cta-surface-promo-hover: var(--grimace-100);
+    --surface-cta-surface-promo: var(--grimace-110);
+    --surface-upload-surface-brand-neutral: var(--box-blue-100);
+    --surface-illustration-surface-box: var(--box-blue-100);
+    --surface-illustration-surface-box-neutral: var(--box-blue-100);
+    --surface-progressbar-surface-brand: var(--box-blue-100);
+    --surface-nav-surface-brand: var(--box-blue-100);
+    --surface-text-highlight-surface: var(--yellow-20);
+    --surface-toggle-surface-pressed-hover: var(--box-blue-80);
+    --surface-toggle-surface-pressed: var(--box-blue-100);
+    --surface-toggle-surface-hover: var(--gray-05);
+    --surface-toggle-surface: var(--gray-white);
+    --surface-dropdown-secondary-surface-pressed: var(--gray-10);
+    --surface-dropdown-secondary-surface-hover: var(--gray-05);
+    --surface-dropdown-secondary-surface: var(--gray-white);
+    --surface-dropdown-primary-surface-pressed: var(--gray-10);
+    --surface-dropdown-primary-surface-hover: var(--gray-05);
+    --surface-option-grid-surface-selected: var(--black-opacity-08);
+    --surface-option-grid-surface-hover: var(--black-opacity-04);
+    --surface-page-surface: var(--gray-white);
+    --surface-chip-button-surface-hover: var(--black-opacity-08);
+    --surface-chip-button-surface: var(--black-opacity-04);
+    --surface-badge-notification-surface: var(--watermelon-red-100);
+    --surface-badge-progress-surface: var(--yellorange-100);
+    --surface-badge-offline-surface: var(--green-light-100);
+    --surface-badge-collection-surface: var(--gray-10);
+    --surface-badge-pin-surface: var(--gray-10);
+    --surface-badge-online-surface: var(--green-light-120);
+    --surface-badge-coadmin-surface: var(--purple-rain-100);
+    --surface-badge-admin-surface: var(--dark-blue-100);
+    --surface-badge-external-surface: var(--gray-50);
+    --surface-badge-rejected-surface: var(--watermelon-red-110);
+    --surface-badge-completed-surface: var(--green-light-100);
+    --surface-badge-annotation-surface: var(--yellorange-100);
+    --surface-badge-taskapproval-surface: var(--light-blue-120);
+    --surface-badge-task-surface: var(--light-blue-100);
+    --surface-badge-mention-surface: var(--light-blue-120);
+    --surface-badge-relay-surface: var(--light-blue-120);
+    --surface-badge-foldershared-surface: var(--light-blue-100);
+    --surface-badge-folderexternal-surface: var(--gray-65);
+    --surface-badge-boxnote-surface: var(--gray-10);
+    --surface-badge-canvas-surface: var(--orange-100);
+    --surface-badge-image-surface: var(--green-light-100);
+    --surface-accordion-surface-hover: var(--gray-white);
+    --surface-accordion-surface: var(--gray-white);
+    --surface-tab-surface-pressed: var(--gray-10);
+    --surface-tab-surface-hover: var(--gray-05);
+    --surface-day-surface-selected-hover: var(--dark-blue-100);
+    --surface-day-surface-selected: var(--box-blue-100);
+    --surface-day-surface-hover: var(--gray-05);
+    --surface-day-surface: var(--gray-white);
+    --surface-search-surface-focused: var(--gray-white);
+    --surface-search-surface-hover: var(--gray-02);
+    --surface-search-global-surface: var(--gray-05);
+    --surface-search-surface: var(--gray-05);
+    --surface-scrollbar-surface: var(--black-opacity-50);
+    --surface-sliderthumb-surface-hover: var(--light-blue-100);
+    --surface-sliderthumb-surface: var(--box-blue-100);
+    --surface-slidertrack-surface: var(--gray-65);
+    --surface-filterchip-surface-single-on-hover: var(--box-blue-100);
+    --surface-filterchip-surface-single-on: var(--box-blue-100);
+    --surface-filterchip-surface-single-hover: var(--black-opacity-04);
+    --surface-filterchip-surface-single: var(--black-opacity-04);
+    --surface-filterchip-surface-multi-on-hover: var(--box-blue-10);
+    --surface-filterchip-surface-multi-on: var(--box-blue-10);
+    --surface-filterchip-surface-multi-hover: var(--black-opacity-04);
+    --surface-filterchip-surface-multi: var(--black-opacity-04);
+    --surface-inputchip-surface-error: var(--watermelon-red-10);
+    --surface-inputchip-surface-hover: var(--gray-10);
+    --surface-inputchip-surface: var(--gray-10);
+    --surface-ghost-surface-secondary: var(--gray-05);
+    --surface-ghost-surface: var(--gray-02);
+    --surface-checkbox-surface-selected-hover: var(--box-blue-100);
+    --surface-checkbox-surface-selected: var(--box-blue-100);
+    --surface-checkbox-surface-hover: var(--gray-white);
+    --surface-checkbox-surface: var(--gray-white);
+    --surface-radio-surface-selected-hover: var(--gray-white);
+    --surface-radio-surface-selected: var(--gray-white);
+    --surface-radio-surface-hover: var(--gray-white);
+    --surface-radio-surface: var(--gray-white);
+    --surface-switch-surface-on-hover: var(--box-blue-100);
+    --surface-switch-surface-on: var(--box-blue-100);
+    --surface-switch-surface-off-hover: var(--gray-50);
+    --surface-switch-surface-off: var(--gray-50);
+    --surface-switch-surface-hover: var(--gray-white);
+    --surface-switch-surface: var(--gray-white);
+    --surface-item-small-surface-selected: var(--box-blue-05);
+    --surface-item-small-surface-hover: var(--gray-05);
+    --surface-item-small-surface: var(--gray-white);
+    --surface-item-surface-selected: var(--box-blue-05);
+    --surface-item-surface-hover: var(--gray-white);
+    --surface-status-surface-gray-focus: var(--gray-10);
+    --surface-status-surface-gray-hover: var(--gray-10);
+    --surface-status-surface-gray: var(--gray-10);
+    --surface-status-surface-boxblue-focus: var(--box-blue-100);
+    --surface-status-surface-boxblue-hover: var(--box-blue-100);
+    --surface-status-surface-boxblue: var(--box-blue-100);
+    --surface-status-surface-green-focus: var(--green-light-50);
+    --surface-status-surface-green-hover: var(--green-light-50);
+    --surface-status-surface-green: var(--green-light-50);
+    --surface-status-surface-dark-blue-focus: var(--dark-blue-50);
+    --surface-status-surface-dark-blue-hover: var(--dark-blue-50);
+    --surface-status-surface-dark-blue: var(--dark-blue-50);
+    --surface-status-surface-light-blue-focus: var(--light-blue-50);
+    --surface-status-surface-light-blue-hover: var(--light-blue-50);
+    --surface-status-surface-light-blue: var(--light-blue-50);
+    --surface-status-surface-purple-focus: var(--purple-rain-50);
+    --surface-status-surface-purple-hover: var(--purple-rain-50);
+    --surface-status-surface-purple: var(--purple-rain-50);
+    --surface-status-surface-red-focus: var(--watermelon-red-50);
+    --surface-status-surface-red-hover: var(--watermelon-red-50);
+    --surface-status-surface-red: var(--watermelon-red-50);
+    --surface-status-surface-orange-focus: var(--orange-50);
+    --surface-status-surface-orange-hover: var(--orange-50);
+    --surface-status-surface-orange: var(--orange-50);
+    --surface-status-surface-yellow-focus: var(--yellow-50);
+    --surface-status-surface-yellow-hover: var(--yellow-50);
+    --surface-status-surface-yellow: var(--yellow-50);
+    --surface-cta-surface-tertiary-promo-focus-pressed: var(--grimace-20);
+    --surface-cta-surface-tertiary-promo-focus: var(--grimace-05);
+    --surface-cta-surface-tertiary-promo-pressed: var(--grimace-20);
+    --surface-cta-surface-tertiary-promo-hover: var(--grimace-05);
+    --surface-cta-surface-tertiary-promo: var(--grimace-10);
+    --surface-cta-surface-tertiary-pressed: var(--gray-10);
+    --surface-cta-surface-tertiary-hover: var(--gray-05);
+    --surface-cta-surface-tertiary: var(--gray-white);
+    --surface-cta-surface-icon-utility-pressed: var(--gray-30);
+    --surface-cta-surface-icon-utility-hover: var(--gray-20);
+    --surface-cta-surface-icon-utility: var(--gray-10);
+    --surface-cta-surface-icon-pressed: var(--black-opacity-08);
+    --surface-cta-surface-icon-hover: var(--black-opacity-04);
+    --surface-cta-surface-icon-disabled: var(--black-opacity-00);
+    --surface-cta-surface-icon: var(--black-opacity-00);
+    --surface-cta-surface-outline-pressed: var(--black-opacity-08);
+    --surface-cta-surface-outline-hover: var(--black-opacity-04);
+    --surface-cta-surface-outline: var(--black-opacity-00);
+    --surface-status-surface-inprogress: var(--yellorange-100);
+    --surface-status-surface-uploading: var(--box-blue-100);
+    --surface-status-surface-scheduled: var(--purple-rain-100);
+    --surface-status-surface-pending: var(--gray-40);
+    --surface-status-surface-error: var(--watermelon-red-100);
+    --surface-status-surface-success: var(--green-light-100);
+    --surface-status-surface-generic: var(--gray-40);
+    --surface-filter-surface-selected-focus: var(--box-blue-100);
+    --surface-filter-surface-selected: var(--box-blue-100);
+    --surface-filter-surface-focus: var(--box-blue-100);
+    --surface-filter-surface-hover: var(--box-blue-100);
+    --surface-filter-surface: var(--box-blue-100);
+    --surface-pill-surface-focus: var(--gray-10);
+    --surface-pill-surface-hover: var(--gray-10);
+    --surface-pill-surface: var(--gray-10);
+    --surface-message-surface-promo-secondary: var(--grimace-10);
+    --surface-message-surface-success-secondary: var(--green-light-10);
+    --surface-message-surface-success: var(--green-light-20);
+    --surface-message-surface-info-secondary: var(--light-blue-10);
+    --surface-message-surface-info: var(--light-blue-20);
+    --surface-message-surface-generic-secondary: var(--gray-10);
+    --surface-message-surface-generic: var(--gray-10);
+    --surface-tooltip-surface-error: var(--watermelon-red-10);
+    --surface-tooltip-surface: var(--gray-80);
+    --surface-message-surface-error-secondary: var(--watermelon-red-10);
+    --surface-message-surface-error: var(--watermelon-red-20);
+    --surface-message-surface-warning-secondary: var(--yellorange-10);
+    --surface-message-surface-warning: var(--yellorange-20);
+    --surface-toggle-surface-on-hover: var(--box-blue-80);
+    --surface-toggle-surface-on: var(--box-blue-100);
+    --surface-toggle-surface-off-hover: var(--gray-02);
+    --surface-input-surface-error-focus: var(--gray-white);
+    --surface-input-surface-error-hover: var(--gray-white);
+    --surface-input-surface-error: var(--gray-white);
+    --surface-input-surface-focus: var(--gray-white);
+    --surface-input-surface-hover: var(--gray-white);
+    --surface-input-surface: var(--gray-white);
+    --surface-dropdown-surface-error-focus: var(--gray-white);
+    --surface-dropdown-surface-error-hover: var(--gray-white);
+    --surface-dropdown-surface-error: var(--gray-white);
+    --surface-dropdown-surface-focus: var(--gray-white);
+    --surface-dropdown-surface-hover: var(--gray-white);
+    --surface-dropdown-surface: var(--gray-white);
+    --surface-cta-surface-secondary-focus-pressed: var(--gray-10);
+    --surface-cta-surface-secondary-pressed: var(--gray-10);
+    --surface-cta-surface-secondary-focus: var(--gray-05);
+    --surface-cta-surface-secondary-hover: var(--gray-05);
+    --surface-cta-surface-secondary-disabled: var(--gray-white);
+    --surface-cta-surface-secondary-busy: var(--gray-white);
+    --surface-cta-surface-secondary: var(--gray-white);
+    --surface-surface-brand-secondary: var(--box-blue-10);
+    --surface-menu-surface-focus: var(--gray-05);
+    --surface-menu-surface-hover: var(--gray-05);
+    --surface-menu-surface: var(--gray-white);
+    --surface-card-surface-pressed: var(--gray-02);
+    --surface-card-surface-focus: var(--box-blue-05);
+    --surface-card-surface-hover: var(--gray-white);
+    --surface-card-surface: var(--gray-white);
+    --surface-surface-secondary-focus: var(--gray-02);
+    --surface-surface-secondary-hover: var(--gray-05);
+    --surface-surface-secondary: var(--gray-02);
+    --surface-surface-hover: var(--gray-05);
+    --surface-surface: var(--gray-white);
+    --background-background: var(--gray-white);
+}