@box/blueprint-web-assets 4.2.2

package/tokens/tokens.scss

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