box-ui-elements
Version:
Box UI Elements
625 lines (624 loc) • 24.7 kB
TypeScript
declare const mockTheme: {
tokens: {
Animation: {
'duration-2': string;
'duration-3': string;
'duration-4': string;
};
AnimationEasing: {
'ease-base': string;
};
Background: {
background: string;
};
Body: {
Default: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
DefaultBold: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
DefaultSemibold: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
Large: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
LargeBold: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
};
Border: {
'avatar-border-hover': string;
'avatar-border-pressed': string;
'badge-border': string;
'card-border': string;
'card-border-ai': string;
'card-border-focus': string;
'card-border-hover': string;
'card-border-pressed': string;
'checkbox-border': string;
'checkbox-border-hover': string;
'checkbox-border-selected': string;
'checkbox-border-selected-hover': string;
'collapsible-border': string;
'contentbutton-border-selected': string;
'cta-border-ai': string;
'cta-border-outline': string;
'cta-border-outline-disabled': string;
'cta-border-outline-hover': string;
'cta-border-outline-pressed': string;
'cta-border-secondary': string;
'cta-border-secondary-disabled': string;
'cta-border-secondary-hover': string;
'cta-border-secondary-pressed': string;
'divider-border': string;
'dropdown-border': string;
'dropdown-border-error': string;
'dropdown-border-error-focus': string;
'dropdown-border-error-hover': string;
'dropdown-border-focus': string;
'dropdown-border-hover': string;
'filterchip-border-multi-on': string;
'filterchip-border-multi-on-hover': string;
'gridthumbnail-border': string;
'input-border': string;
'input-border-error': string;
'input-border-error-focus': string;
'input-border-error-hover': string;
'input-border-focus': string;
'input-border-hover': string;
'inputchip-border-error': string;
'item-border-hover': string;
'item-border-selected': string;
'item-small-border-selected': string;
'message-border-error': string;
'message-border-error-secondary': string;
'message-border-generic': string;
'message-border-generic-secondary': string;
'message-border-info': string;
'message-border-info-secondary': string;
'message-border-success': string;
'message-border-success-secondary': string;
'message-border-warning': string;
'message-border-warning-secondary': string;
'radio-border': string;
'radio-border-hover': string;
'radio-border-selected': string;
'radio-border-selected-hover': string;
'radiotile-border': string;
'radiotile-border-hover': string;
'radiotile-border-selected': string;
'search-border': string;
'search-border-hover': string;
'search-global-border-hover': string;
'status-border-hover': string;
'switch-border': string;
'switch-border-hover': string;
'tab-border': string;
'tab-border-hover': string;
'tab-border-selected': string;
'tab-border-selected-focus': string;
'tab-border-selected-hover': string;
'toggle-border': string;
'toggle-border-on': string;
'toggletext-border-off': string;
'toggletext-border-off-ai': string;
'toggletext-border-off-ai-hover': string;
'toggletext-border-off-ai-pressed': string;
'toggletext-border-off-hover': string;
'toggletext-border-off-pressed': string;
'toggletext-border-on': string;
'toggletext-border-on-ai': string;
'toggletext-border-on-ai-hover': string;
'toggletext-border-on-ai-pressed': string;
'toggletext-border-on-hover': string;
'toggletext-border-on-pressed': string;
'tooltip-border-error': string;
};
Breakpoint: {
small: string;
medium: string;
large: string;
xlarge: string;
};
Caption: {
Bold: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
Default: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
};
Icon: {
'cta-icon': string;
'cta-icon-hover': string;
'cta-icon-on-color': string;
'cta-icon-on-color-hover': string;
'cta-icon-on-color-pressed': string;
'cta-icon-pressed': string;
'cta-icon-utility': string;
'cta-icon-utility-hover': string;
'cta-icon-utility-pressed': string;
'icon-blue': string;
'icon-error-on-light': string;
'icon-on-dark': string;
'icon-on-light': string;
'icon-on-light-secondary': string;
'icon-on-light-tertiary': string;
'icon-required-on-light': string;
'nav-icon-on-dark': string;
'nav-icon-on-dark-focus': string;
'nav-icon-on-dark-hover': string;
'nav-icon-on-dark-selected': string;
'nav-icon-on-light': string;
'nav-icon-on-light-focus': string;
'nav-icon-on-light-hover': string;
'nav-icon-on-light-selected': string;
};
Label: {
Bold: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
Default: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
};
Link: {
Default: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-indent': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
};
Motion: {
'transition-slide-in': string;
};
Notification: {
Default: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-indent': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
};
Outline: {
'focus-on-dark': string;
'focus-on-light': string;
};
Overlay: {
'modal-overlay': string;
'sidepanel-overlay': string;
};
Surface: {
'accordion-surface': string;
'accordion-surface-hover': string;
'card-surface': string;
'card-surface-focus': string;
'card-surface-hover': string;
'card-surface-pressed': string;
'checkbox-surface': string;
'checkbox-surface-hover': string;
'checkbox-surface-selected': string;
'checkbox-surface-selected-hover': string;
'chip-button-surface': string;
'chip-button-surface-hover': string;
'contentbutton-surface-surface-selected': string;
'contentswitcher-surface': string;
'cta-surface-disabled': string;
'cta-surface-icon': string;
'cta-surface-icon-disabled': string;
'cta-surface-icon-hover': string;
'cta-surface-icon-pressed': string;
'cta-surface-icon-utility': string;
'cta-surface-icon-utility-hover': string;
'cta-surface-icon-utility-pressed': string;
'cta-surface-outline': string;
'cta-surface-outline-hover': string;
'cta-surface-outline-pressed': string;
'cta-surface-promo': string;
'cta-surface-promo-focus': string;
'cta-surface-promo-focus-pressed': string;
'cta-surface-promo-hover': string;
'cta-surface-promo-pressed': string;
'cta-surface-secondary': string;
'cta-surface-secondary-busy': string;
'cta-surface-secondary-disabled': string;
'cta-surface-secondary-focus': string;
'cta-surface-secondary-focus-pressed': string;
'cta-surface-secondary-hover': string;
'cta-surface-secondary-pressed': string;
'cta-surface-tertiary': string;
'cta-surface-tertiary-hover': string;
'cta-surface-tertiary-pressed': string;
'cta-surface-tertiary-promo': string;
'cta-surface-tertiary-promo-focus': string;
'cta-surface-tertiary-promo-focus-pressed': string;
'cta-surface-tertiary-promo-hover': string;
'cta-surface-tertiary-promo-pressed': string;
'day-surface': string;
'day-surface-hover': string;
'day-surface-selected': string;
'day-surface-selected-hover': string;
'dropdown-primary-surface-hover': string;
'dropdown-primary-surface-pressed': string;
'dropdown-secondary-surface': string;
'dropdown-secondary-surface-hover': string;
'dropdown-secondary-surface-pressed': string;
'dropdown-surface': string;
'dropdown-surface-error': string;
'dropdown-surface-error-focus': string;
'dropdown-surface-error-hover': string;
'dropdown-surface-focus': string;
'dropdown-surface-hover': string;
'filter-surface': string;
'filter-surface-focus': string;
'filter-surface-hover': string;
'filter-surface-selected': string;
'filter-surface-selected-focus': string;
'filterchip-surface-multi': string;
'filterchip-surface-multi-hover': string;
'filterchip-surface-multi-on': string;
'filterchip-surface-multi-on-hover': string;
'filterchip-surface-single': string;
'filterchip-surface-single-hover': string;
'filterchip-surface-single-on': string;
'filterchip-surface-single-on-hover': string;
'ghost-surface': string;
'ghost-surface-secondary': string;
'illustration-surface-box': string;
'illustration-surface-box-neutral': string;
'input-surface': string;
'input-surface-error': string;
'input-surface-error-focus': string;
'input-surface-error-hover': string;
'input-surface-focus': string;
'input-surface-hover': string;
'inputchip-surface': string;
'inputchip-surface-error': string;
'inputchip-surface-hover': string;
'item-small-surface': string;
'item-small-surface-hover': string;
'item-small-surface-selected': string;
'item-surface-hover': string;
'item-surface-selected': string;
'menu-surface': string;
'menu-surface-focus': string;
'menu-surface-hover': string;
'menu-surface-pressed': string;
'message-surface-error': string;
'message-surface-error-secondary': string;
'message-surface-generic': string;
'message-surface-generic-secondary': string;
'message-surface-info': string;
'message-surface-info-secondary': string;
'message-surface-promo-secondary': string;
'message-surface-success': string;
'message-surface-success-secondary': string;
'message-surface-warning': string;
'message-surface-warning-secondary': string;
'nav-surface-brand': string;
'option-grid-surface-hover': string;
'option-grid-surface-selected': string;
'page-surface': string;
'pill-surface': string;
'pill-surface-focus': string;
'pill-surface-hover': string;
'progressbar-surface-brand': string;
'radio-surface': string;
'radio-surface-hover': string;
'radio-surface-selected': string;
'radio-surface-selected-hover': string;
'radiotile-surface': string;
'radiotile-surface-hover': string;
'radiotile-surface-selected': string;
'scrollbar-surface': string;
'search-global-surface': string;
'search-surface': string;
'search-surface-focused': string;
'search-surface-hover': string;
'sliderthumb-surface': string;
'sliderthumb-surface-hover': string;
'slidertrack-surface': string;
'status-surface-boxblue': string;
'status-surface-boxblue-focus': string;
'status-surface-boxblue-hover': string;
'status-surface-dark-blue': string;
'status-surface-dark-blue-focus': string;
'status-surface-dark-blue-hover': string;
'status-surface-error': string;
'status-surface-generic': string;
'status-surface-gray': string;
'status-surface-gray-focus': string;
'status-surface-gray-hover': string;
'status-surface-green': string;
'status-surface-green-focus': string;
'status-surface-green-hover': string;
'status-surface-inprogress': string;
'status-surface-light-blue': string;
'status-surface-light-blue-focus': string;
'status-surface-light-blue-hover': string;
'status-surface-orange': string;
'status-surface-orange-focus': string;
'status-surface-orange-hover': string;
'status-surface-pending': string;
'status-surface-purple': string;
'status-surface-purple-focus': string;
'status-surface-purple-hover': string;
'status-surface-red': string;
'status-surface-red-focus': string;
'status-surface-red-hover': string;
'status-surface-scheduled': string;
'status-surface-success': string;
'status-surface-uploading': string;
'status-surface-yellow': string;
'status-surface-yellow-focus': string;
'status-surface-yellow-hover': string;
surface: string;
'surface-brand': string;
'surface-brand-busy': string;
'surface-brand-disabled': string;
'surface-brand-hover': string;
'surface-brand-pressed': string;
'surface-brand-secondary': string;
'surface-hover': string;
'surface-quaternary': string;
'surface-secondary': string;
'surface-secondary-focus': string;
'surface-secondary-hover': string;
'surface-tertiary': string;
'switch-surface': string;
'switch-surface-hover': string;
'switch-surface-off': string;
'switch-surface-off-hover': string;
'switch-surface-on': string;
'switch-surface-on-hover': string;
'tab-surface-hover': string;
'tab-surface-pressed': string;
'text-highlight-surface': string;
'toggle-surface': string;
'toggle-surface-hover': string;
'toggle-surface-off-hover': string;
'toggle-surface-off-pressed': string;
'toggle-surface-on': string;
'toggle-surface-on-hover': string;
'toggle-surface-on-pressed': string;
'toggle-surface-pressed': string;
'toggle-surface-pressed-hover': string;
'toggletext-surface-off-ai': string;
'toggletext-surface-off-ai-hover': string;
'toggletext-surface-off-ai-pressed': string;
'toggletext-surface-on': string;
'toggletext-surface-on-ai': string;
'toggletext-surface-on-ai-hover': string;
'toggletext-surface-on-ai-pressed': string;
'toggletext-surface-on-hover': string;
'toggletext-surface-on-pressed': string;
'toolbar-surface': string;
'tooltip-surface': string;
'tooltip-surface-error': string;
'upload-surface-brand-neutral': string;
};
Text: {
'cta-link': string;
'cta-link-disabled': string;
'cta-link-hover': string;
'cta-link-pressed': string;
'cta-link-secondary': string;
'cta-link-secondary-hover': string;
'cta-link-secondary-pressed': string;
'cta-promo': string;
'nav-text-on-dark': string;
'nav-text-on-dark-focus': string;
'nav-text-on-dark-hover': string;
'nav-text-on-dark-selected': string;
'nav-text-on-light': string;
'nav-text-on-light-focus': string;
'nav-text-on-light-hover': string;
'nav-text-on-light-selected': string;
'text-brand-on-color': string;
'text-error-on-light': string;
'text-on-dark': string;
'text-on-light': string;
'text-on-light-disabled': string;
'text-on-light-secondary': string;
'text-on-light-secondary-hover': string;
'text-on-light-tertiary': string;
'toggletext-text': string;
};
Title: {
Large: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
Medium: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
Mondo: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
Small: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
Subtitle: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
XLarge: {
'font-family': string;
'font-size': string;
'font-weight': string;
'letter-spacing': string;
'line-height': string;
'paragraph-spacing': string;
'text-case': string;
'text-decoration': string;
};
};
'border-1': string;
'border-2': string;
'border-3': string;
'border-4': string;
'border-6': string;
'border-8': string;
'dropshadow-1': string;
'dropshadow-2': string;
'dropshadow-3': string;
'dropshadow-3-inverse': string;
'innershadow-1': string;
'radius-05': string;
'radius-1': string;
'radius-2': string;
'radius-3': string;
'radius-4': string;
'radius-5': string;
'radius-6': string;
'radius-7': string;
'radius-8': string;
'radius-half': string;
'size-05': string;
'size-1': string;
'size-2': string;
'size-3': string;
'size-4': string;
'size-5': string;
'size-6': string;
'size-7': string;
'size-8': string;
'size-9': string;
'size-10': string;
'size-11': string;
'size-12': string;
'size-14': string;
'size-15': string;
'size-16': string;
'size-18': string;
'size-20': string;
'space-05': string;
'space-1': string;
'space-2': string;
'space-3': string;
'space-4': string;
'space-5': string;
'space-6': string;
'space-7': string;
'space-8': string;
'space-9': string;
'space-10': string;
'space-11': string;
'space-12': string;
'space-14': string;
'space-15': string;
'space-16': string;
'space-18': string;
'space-20': string;
};
};
export default mockTheme;