Skip to content

Commit 511c460

Browse files
JesmoDevJesmoDev
committed
doc update
1 parent 89672fe commit 511c460

File tree

2 files changed

+87
-41
lines changed

2 files changed

+87
-41
lines changed

‎packages/uui-css/lib/custom-properties.story.ts

Lines changed: 79 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -85,42 +85,88 @@ const propertySizeTemplate = (property: any) => html` <uui-table-row>
8585
</uui-table-cell>
8686
</uui-table-row>`;
8787

88-
export const InterfaceColors = () => html`
89-
<p>
90-
THe UI Library components use predefined custom properties.If you want your
91-
element to fit into umbraco's backoffice you can use following custom
92-
properties. The fallback values are inserted automatically during build.
93-
</p>
88+
export const InterfaceColors = () => {
89+
const surface = ['surface', 'background', 'text', 'color-border', 'divider'];
90+
const state = ['selected', 'current', 'disabled'];
91+
const color = ['positive', 'warning', 'danger', 'disabled'];
92+
const universal = ['header', 'focus', 'hover'];
9493

95-
<uui-table @click=${copyToClipboard}>
96-
<uui-table-head>
97-
<uui-table-head-cell>Custom property name</uui-table-head-cell>
98-
<uui-table-head-cell>Value</uui-table-head-cell>
99-
<uui-table-head-cell>Example</uui-table-head-cell>
100-
</uui-table-head>
101-
${properties
102-
.filter(property => property.key.includes('color'))
103-
.map(property => propertyColorTemplate(property))}
104-
</uui-table>
105-
`;
94+
return html`
95+
<h2>Interface Colors</h2>
96+
<p>
97+
These are used to overwrite selected interface properties to get a
98+
specific look.
99+
</p>
106100
107-
export const BrandPalette = () => html`<h2>Colors</h2>
108-
<p>
109-
We provide all the Umbraco Identity colors as css custom properties, but we
110-
do not recommend using those directly. All interface should be based on
111-
interface color properties. Here is an overview of colors:
112-
</p>
101+
<h3>Surface</h3>
102+
<uui-table @click=${copyToClipboard}>
103+
<uui-table-head>
104+
<uui-table-head-cell>Custom property name</uui-table-head-cell>
105+
<uui-table-head-cell>Value</uui-table-head-cell>
106+
<uui-table-head-cell>Example</uui-table-head-cell>
107+
</uui-table-head>
108+
${properties
109+
.filter(property => surface.some(x => property.key.includes(x)))
110+
.map(property => propertyColorTemplate(property))}
111+
</uui-table>
113112
114-
<uui-table @click=${copyToClipboard}>
115-
<uui-table-head>
116-
<uui-table-head-cell>Custom property name</uui-table-head-cell>
117-
<uui-table-head-cell>Value</uui-table-head-cell>
118-
<uui-table-head-cell>Example</uui-table-head-cell>
119-
</uui-table-head>
120-
${properties
121-
.filter(property => property.key.includes('palette'))
122-
.map(property => propertyColorTemplate(property))}
123-
</uui-table>`;
113+
<h3>State</h3>
114+
<uui-table @click=${copyToClipboard}>
115+
<uui-table-head>
116+
<uui-table-head-cell>Custom property name</uui-table-head-cell>
117+
<uui-table-head-cell>Value</uui-table-head-cell>
118+
<uui-table-head-cell>Example</uui-table-head-cell>
119+
</uui-table-head>
120+
${properties
121+
.filter(property => state.some(x => property.key.includes(x)))
122+
.map(property => propertyColorTemplate(property))}
123+
</uui-table>
124+
125+
<h3>Color</h3>
126+
<uui-table @click=${copyToClipboard}>
127+
<uui-table-head>
128+
<uui-table-head-cell>Custom property name</uui-table-head-cell>
129+
<uui-table-head-cell>Value</uui-table-head-cell>
130+
<uui-table-head-cell>Example</uui-table-head-cell>
131+
</uui-table-head>
132+
${properties
133+
.filter(property => color.some(x => property.key.includes(x)))
134+
.map(property => propertyColorTemplate(property))}
135+
</uui-table>
136+
137+
<h3>Universal</h3>
138+
<uui-table @click=${copyToClipboard}>
139+
<uui-table-head>
140+
<uui-table-head-cell>Custom property name</uui-table-head-cell>
141+
<uui-table-head-cell>Value</uui-table-head-cell>
142+
<uui-table-head-cell>Example</uui-table-head-cell>
143+
</uui-table-head>
144+
${properties
145+
.filter(property => universal.some(x => property.key.includes(x)))
146+
.map(property => propertyColorTemplate(property))}
147+
</uui-table>
148+
`;
149+
};
150+
151+
export const BrandPalette = () => {
152+
return html`<h2>Colors</h2>
153+
<p>
154+
We provide all the Umbraco Identity colors as css custom properties, but
155+
we do not recommend using those directly. All interface should be based on
156+
interface color properties. Here is an overview of colors:
157+
</p>
158+
159+
<uui-table @click=${copyToClipboard}>
160+
<uui-table-head>
161+
<uui-table-head-cell>Custom property name</uui-table-head-cell>
162+
<uui-table-head-cell>Value</uui-table-head-cell>
163+
<uui-table-head-cell>Example</uui-table-head-cell>
164+
</uui-table-head>
165+
${properties
166+
.filter(property => property.key.includes('palette'))
167+
.map(property => propertyColorTemplate(property))}
168+
</uui-table>`;
169+
};
124170

125171
export const Sizing = () => html`
126172
<h3>Spacing properties</h3>

‎packages/uui-css/lib/custom-properties/colors.css

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@
55
--uui-color-selected: #2152a3;
66
--uui-color-selected-emphasis: #3265b8;
77
--uui-color-selected-standalone: #184792;
8-
--uui-color-selected-contrast: white;
8+
--uui-color-selected-contrast: #fff;
99

1010
--uui-color-current: #fdd0cc;
1111
--uui-color-current-emphasis: #ffddda;
1212
--uui-color-current-standalone: #e7aea9;
1313
--uui-color-current-contrast: #1b264f;
1414

15+
--uui-color-disabled: #f5f5f5;
16+
--uui-color-disabled-standalone: #dfdfdf;
17+
--uui-color-disabled-contrast: #b3b3b3;
18+
1519
/* ----- UNIVERSAL ----- */
1620
--uui-color-header: #1b264f;
1721

@@ -20,10 +24,6 @@
2024
--uui-color-hover: #f5f5f5;
2125
--uui-color-hover-standalone: #2152a3;
2226

23-
--uui-color-disabled: #f5f5f5;
24-
--uui-color-disabled-standalone: #dfdfdf;
25-
--uui-color-disabled-contrast: #b3b3b3;
26-
2727
/* ----- SURFACE ----- */
2828
--uui-color-surface: #fff;
2929
--uui-color-surface-alt: #eeeeee;
@@ -45,12 +45,12 @@
4545
--uui-color-primary: var(--uui-palette-space-cadet);
4646
--uui-color-primary-emphasis: var(--uui-palette-violet-blue);
4747
--uui-color-primary-standalone: var(--uui-palette-space-cadet-dark);
48-
--uui-color-primary-contrast: white;
48+
--uui-color-primary-contrast: #fff;
4949

5050
--uui-color-warning: #fad634;
5151
--uui-color-warning-emphasis: #ffe366;
5252
--uui-color-warning-standalone: #c5a100;
53-
--uui-color-warning-contrast: black;
53+
--uui-color-warning-contrast: #000;
5454

5555
--uui-color-danger: #d42054;
5656
--uui-color-danger-emphasis: #f74074;
@@ -60,7 +60,7 @@
6060
--uui-color-positive: #2da44e;
6161
--uui-color-positive-emphasis: #3fc264;
6262
--uui-color-positive-standalone: #229442;
63-
--uui-color-positive-contrast: white;
63+
--uui-color-positive-contrast: #fff;
6464
}
6565

6666
:root[data-theme='dark'] {

0 commit comments

Comments
 (0)