Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 40e199f

Browse files
superojlasuperojla
authored
Theming for BUIE (#716)
* Theming for BUIE * Correct lint issues * Lint errors * Apply review comments * Apply changes after review * formatting correction * add codepen * correct typo * Apply review changes * linter issues * further feedback * restored a needed word
1 parent 6980521 commit 40e199f

File tree

4 files changed

+141
-20
lines changed

4 files changed

+141
-20
lines changed

‎.spelling

+4-1
Original file line numberDiff line numberDiff line change
@@ -335,4 +335,7 @@ GPT-4o-2024-05-13
335335
text-embedding-ada-002
336336
params
337337
GPT-4o-mini
338-
unpublish
338+
unpublish
339+
checkboxes
340+
strikethrough
341+
theming

‎content/guides/embed/ui-elements/access.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
rank: 11
2+
rank: 12
33
related_endpoints: []
44
related_guides:
55
- embed/ui-elements

‎content/guides/embed/ui-elements/installation.md

+18-18
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ yarn add box-ui-elements
3939
This should result in updated version in the `package.json` file:
4040

4141
```json
42-
"box-ui-elements": "^21.0.0"
42+
"box-ui-elements": "^23.0.0"
4343
```
4444

4545
No additional changes related to Box UI elements are required in your code.
@@ -76,23 +76,23 @@ All the UI elements are also available directly from the Box CDN.
7676

7777
| Element | Version | File |
7878
| ---------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
79-
| [Content Explorer](g://embed/ui-elements/explorer) | `21.0.0` | CSS [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/explorer.css`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/explorer.css) |
80-
| | | JS with React [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/explorer.js`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/explorer.js) |
81-
| | | JS without React [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/explorer.no.react.js`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/explorer.no.react.js) |
82-
| [Content Open With](g://embed/ui-elements/open-with) | `21.0.0` | CSS [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/openwith.css`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/openwith.css) |
83-
| | | JS with React [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/openwith.js`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/openwith.js) |
84-
| | | JS without React [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/openwith.no.react.js`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/openwith.no.react.js) |
85-
| [Content Picker](g://embed/ui-elements/picker) | `21.0.0` | CSS [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/picker.css`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/picker.css) |
86-
| | | JS with React [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/picker.js`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/picker.js) |
87-
| | | JS without React [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/picker.no.react.js`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/picker.no.react.js) |
88-
| [Content Sidebar](g://embed/ui-elements/sidebar) | `21.0.0` | CSS [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/sidebar.css`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/sidebar.css) |
89-
| | | JS with React [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/sidebar.js`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/sidebar.js) |
90-
| | | JS without React [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/sidebar.no.react.js`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/sidebar.no.react.js) |
91-
| [Content Uploader](g://embed/ui-elements/uploader) | `21.0.0` | CSS [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/uploader.css`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/uploader.css) |
92-
| | | JS with React [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/uploader.js`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/uploader.js) |
93-
| | | JS without React [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/uploader.no.react.js`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/uploader.no.react.js) |
94-
| [Content Preview UI Element](https://github.com/box/box-content-preview) | `21.0.0` | CSS [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/preview.css`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/preview.css) |
95-
| | `21.0.0` | JS [`https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/preview.js`](https://cdn01.boxcdn.net/platform/elements/21.0.0/en-US/preview.js) |
79+
| [Content Explorer](g://embed/ui-elements/explorer) | `23.0.0` | CSS [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/explorer.css`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/explorer.css) |
80+
| | | JS with React [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/explorer.js`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/explorer.js) |
81+
| | | JS without React [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/explorer.no.react.js`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/explorer.no.react.js) |
82+
| [Content Open With](g://embed/ui-elements/open-with) | `23.0.0` | CSS [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/openwith.css`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/openwith.css) |
83+
| | | JS with React [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/openwith.js`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/openwith.js) |
84+
| | | JS without React [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/openwith.no.react.js`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/openwith.no.react.js) |
85+
| [Content Picker](g://embed/ui-elements/picker) | `23.0.0` | CSS [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/picker.css`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/picker.css) |
86+
| | | JS with React [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/picker.js`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/picker.js) |
87+
| | | JS without React [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/picker.no.react.js`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/picker.no.react.js) |
88+
| [Content Sidebar](g://embed/ui-elements/sidebar) | `23.0.0` | CSS [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/sidebar.css`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/sidebar.css) |
89+
| | | JS with React [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/sidebar.js`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/sidebar.js) |
90+
| | | JS without React [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/sidebar.no.react.js`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/sidebar.no.react.js) |
91+
| [Content Uploader](g://embed/ui-elements/uploader) | `23.0.0` | CSS [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/uploader.css`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/uploader.css) |
92+
| | | JS with React [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/uploader.js`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/uploader.js) |
93+
| | | JS without React [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/uploader.no.react.js`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/uploader.no.react.js) |
94+
| [Content Preview UI Element](https://github.com/box/box-content-preview) | `23.0.0` | CSS [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/preview.css`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/preview.css) |
95+
| | `23.0.0` | JS [`https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/preview.js`](https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/preview.js) |
9696
| [Content Preview SDK](g://embed/ui-elements/preview) | `2.106.0` | CSS [`https://cdn01.boxcdn.net/platform/preview/2.106.0/en-US/preview.css`](https://cdn01.boxcdn.net/platform/preview/2.106.0/en-US/preview.css) |
9797
| | | JS [`https://cdn01.boxcdn.net/platform/preview/2.106.0/en-US/preview.js`](https://cdn01.boxcdn.net/platform/preview/2.106.0/en-US/preview.js) |
9898

‎content/guides/embed/ui-elements/theming-styling.md

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
---
2+
rank: 11
3+
related_endpoints: []
4+
related_guides:
5+
- embed/ui-elements
6+
- embed/ui-elements/explorer
7+
- embed/ui-elements/uploader
8+
required_guides:
9+
- embed/ui-elements/installation
10+
related_resources: []
11+
---
12+
<!--alex ignore -->
13+
# Theming & styling for Box UI Elements
14+
15+
With theming & styling for Box UI Elements you can customize the look of the
16+
embedded Box component to your enterprise's requirements.
17+
18+
<!--alex ignore -->
19+
<Message type='notice'>As of now, theming & styling is available for Content
20+
Explorer and Content Uploader.
21+
</Message>
22+
<!--alex enable -->
23+
24+
## How to start
25+
26+
Add the selected Box component to your application. The default Box theme is applied.
27+
28+
## Customization
29+
30+
Box uses design tokens for the customization purposes.
31+
32+
<Message type='notice'>
33+
Design tokens are named entities that store specific visual attributes, such
34+
as colors, spacing, typography, scale, and many more.
35+
They are used instead of hard-coded values to simplify sharing design
36+
properties across platforms, tools, and components.
37+
</Message>
38+
39+
You can change the following elements in your embedded Box component.
40+
<!--alex ignore -->
41+
42+
### Colors
43+
44+
Customize:
45+
46+
<!--alex ignore -->
47+
* global color palette - select the primary, secondary, and access colors
48+
* state colors - select color for states such as hover, focus, active, disabled
49+
* component-specific colors - for example, you can select different colors for your buttons depending on their type
50+
<!--alex enable -->
51+
* gradients - choose and adjust a gradient as your background or other components
52+
* opacity - adjust the opacity of the overlay effects for Box Modals and side panels
53+
54+
### Typography
55+
56+
Customize:
57+
58+
* text decoration - underline, strikethrough, letter spacing
59+
* line heights and paragraph spacing
60+
61+
### Border, radius
62+
63+
Choose:
64+
65+
<!--alex ignore -->
66+
* border styling - width, styles, and colors
67+
* border radius
68+
<!--alex enable -->
69+
70+
### Spacing
71+
72+
Choose:
73+
74+
* global spacing
75+
* component-specific spacing
76+
* component-specific alignment and distribution, for example justify-content
77+
78+
### Shadows and elevation
79+
80+
Define:
81+
82+
* shadow presets
83+
* custom shadows
84+
85+
### Interactive states
86+
87+
Customize:
88+
<!--alex ignore -->
89+
* hover, active, focus, disabled, and error states - visual effect such as changed background color
90+
* transitions and animations
91+
<!--alex enable -->
92+
93+
### Component-level overrides
94+
95+
<!--alex ignore -->
96+
Customize text inputs, drop-downs, and checkboxes with individual color
97+
<!--alex enable -->
98+
99+
### Miscellaneous
100+
101+
Style:
102+
103+
* help text and labels
104+
* tool tips
105+
106+
## Demo
107+
108+
<iframe height="560"
109+
scrolling="no"
110+
title="Box theming branding"
111+
src="https://codepen.io/box-platform/embed/KwKbrPw?default-tab=html%2Cresult" frameborder="no"
112+
allowtransparency="true"
113+
allowfullscreen="true"
114+
style="width: 100%;"
115+
></iframe>
116+
117+
[explorer]: g://embed/ui-elements/explorer
118+
[uploader]: g://embed/ui-elements/uploader

0 commit comments

Comments
 (0)