Skip to main content
With theming & styling for Box UI Elements you can customize the look of the embedded Box component to your enterprise’s requirements.
As of now, theming & styling is available for Content Explorer and Content Uploader.

​
How to start

Add the selected Box component to your application. The default Box theme is applied.

​
Customization

Box uses design tokens for the customization purposes.
Design tokens are named entities that store specific visual attributes, such as colors, spacing, typography, scale, and many more. They are used instead of hard-coded values to simplify sharing design properties across platforms, tools, and components.
You can change the following elements in your embedded Box component.

​
Colors

Customize:
  • global color palette - select the primary, secondary, and accent colors
  • state colors - select color for states such as hover, focus, active, disabled
  • component-specific colors - for example, you can select different colors for your buttons depending on their type
  • gradients - choose and adjust a gradient as your background or other components
  • opacity - adjust the opacity of the overlay effects for Box Modals and side panels

​
Typography

Customize:
  • text decoration - underline, strikethrough, letter spacing
  • line heights and paragraph spacing

​
Border, radius

Choose:
  • border styling - width, styles, and colors
  • border radius

​
Spacing

Choose:
  • global spacing
  • component-specific spacing
  • component-specific alignment and distribution, for example justify-content

​
Shadows and elevation

Define:
  • shadow presets
  • custom shadows

​
Interactive states

Customize:
  • hover, active, focus, disabled, and error states - visual effect such as changed background color
  • transitions and animations

​
Component-level overrides

Customize text input, drop down, and checkboxes with individual color

​
Icons

Style interactive icons such as buttons or drop downs.
To replace non-interactive icons such as file or folder icons with your custom ones, use inline SVGs in CSS. To change non-interactive icons color, height, and width, use CSS.
See the implemented examples of custom icons in CodePen:

​
Miscellaneous

Style:
  • help text and labels
  • tool tips

​
Demo