Skip to content

Commit 17612af

Browse files
nielslyngsoenielslyngsoe
committed
minor story adjustments
1 parent e65a6ed commit 17612af

File tree

1 file changed

+82
-71
lines changed

1 file changed

+82
-71
lines changed

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

Lines changed: 82 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const propertySizeTemplate = (property: any) => html` <uui-table-row>
8686
</uui-table-row>`;
8787

8888
export const InterfaceColors = () => {
89-
const surface = [
89+
const base = [
9090
'surface',
9191
'background',
9292
'text',
@@ -99,83 +99,94 @@ export const InterfaceColors = () => {
9999
const universal = ['header', 'focus', 'hover'];
100100

101101
return html`
102-
<h2>Interface Colors</h2>
103-
<p>
104-
These are used to overwrite selected interface properties to get a
105-
specific look.
106-
</p>
107-
108-
<h3>Naming convention</h3>
109-
<p>Here's a description and examples of how to use the interface colors.</p>
110-
<h4>Color variants</h4>
111-
<p>Most colors has up to 3 variants.</p>
112-
<ul>
113-
<li>
114-
<b>Contrast</b> - This color will stand out and be readable with the
115-
main color as it's background. Mostly used for text and icons.
116-
</li>
117-
<li>
118-
<b>Standalone</b> - This color will have a higher contrast to the
119-
surface color than it's main variant. Example: if the surface color is
120-
light, the standalone variant will be a darker variant of the main
121-
color. Often used when thin or smaller items has to stand out on the
122-
surface backgrounds. Items such as: text, icons and border.
123-
</li>
124-
<li>
125-
<b>Emphasis</b> - Used when you want to emphasize an element, make it
126-
stand out. Mostly used for hover and focus states.
127-
</li>
128-
</ul>
129-
<h4>Text and interactables</h4>
130-
<ul>
131-
<li>
132-
<b>Text</b> - Used for most text, or icons appearing together with text
133-
</li>
134-
<li>
135-
<b>Interactable</b> - Used when the text or icon is interactable, such
136-
as a link
137-
</li>
138-
</ul>
139-
<h4>States</h4>
140-
<ul>
141-
<li>
142-
<b>Selected</b> - Used to highlight the text or background color of
143-
items that are currently selected.
144-
</li>
145-
<li>
146-
<b>Current</b> - Only used to show navigation. Example: Background or
147-
text color of the current tab or breadcrumb.
148-
</li>
149-
<li><b>Disabled</b> - For elements that are disabled.</li>
150-
</ul>
151-
<h4>Borders and dividers</h4>
152-
<ul>
153-
<li><b>Border</b> - Used when an element needs a border around it</li>
154-
<li>
155-
<b>Divider</b> - For elements that needs to be visually separated.
156-
Example: a list of items
157-
</li>
158-
</ul>
159-
<h4>Misc</h4>
160-
<ul>
161-
<li><b>Surface</b> - The main background color for elements</li>
162-
<li><b>Background</b> - The main background color of the app</li>
163-
<li><b>Header</b> - Background color of the header of the app</li>
164-
<li>
165-
<b>Focus</b> - Color for the focus outline on inputs, buttons, links and
166-
so on
167-
</li>
168-
</ul>
169-
170-
<h3>Surface</h3>
102+
<article style="max-width:580px;">
103+
<div
104+
style="display:block; border-bottom: 1px solid var(--uui-palette-cocoa-black); padding-top: var(--uui-size-layout-5); margin-bottom:var(--uui-size-layout-3); padding-bottom:var(--uui-size-layout-1);">
105+
<h1>Interface Colors</h1>
106+
<p class="uui-lead">
107+
Interface styling should use the following properties to ensure
108+
contrasts and appearance follows the current theme.
109+
</p>
110+
<p>
111+
Here's a description and examples of how to use the interface colors.
112+
</p>
113+
</div>
114+
115+
<h4>Text and interactables</h4>
116+
<ul>
117+
<li>
118+
<b>Text</b> - Used for most text, or icons appearing together with
119+
text
120+
</li>
121+
<li>
122+
<b>Interactable</b> - Used when the text or icon is interactable, such
123+
as a link
124+
</li>
125+
</ul>
126+
127+
<h4>States</h4>
128+
<ul>
129+
<li>
130+
<b>Selected</b> - Used to highlight the text or background color of
131+
items that are currently selected.
132+
</li>
133+
<li>
134+
<b>Current</b> - Only used to show navigation. Example: Background or
135+
text color of the current tab or breadcrumb.
136+
</li>
137+
<li><b>Disabled</b> - For elements that are disabled.</li>
138+
</ul>
139+
140+
<h4>Borders and dividers</h4>
141+
<ul>
142+
<li><b>Border</b> - Used when an element needs a border around it</li>
143+
<li>
144+
<b>Divider</b> - For elements that needs to be visually separated.
145+
Example: a list of items
146+
</li>
147+
</ul>
148+
149+
<h4>Misc</h4>
150+
<ul>
151+
<li><b>Surface</b> - The main background color for elements</li>
152+
<li><b>Background</b> - The main background color of the app</li>
153+
<li><b>Header</b> - Background color of the header of the app</li>
154+
<li>
155+
<b>Focus</b> - Color for the focus outline on inputs, buttons, links
156+
and so on
157+
</li>
158+
</ul>
159+
160+
<h4>Color variants</h4>
161+
<p>Each color can come in additional variants:</p>
162+
<ul>
163+
<li>
164+
<b>Contrast</b> - This color will stand out and be readable with the
165+
main color as it's background. Mostly used for text and icons.
166+
</li>
167+
<li>
168+
<b>Standalone</b> - This color will have a higher contrast to the
169+
surface color than it's main variant. Example: if the surface color is
170+
light, the standalone variant will be a darker variant of the main
171+
color. Often used when thin or smaller items has to stand out on the
172+
surface backgrounds. Items such as: text, icons and border.
173+
</li>
174+
<li>
175+
<b>Emphasis</b> - Used when you want to emphasize an element, make it
176+
stand out. Mostly used for hover and focus states.
177+
</li>
178+
</ul>
179+
</article>
180+
181+
<h3>Base</h3>
171182
<uui-table @click=${copyToClipboard}>
172183
<uui-table-head>
173184
<uui-table-head-cell>Custom property name</uui-table-head-cell>
174185
<uui-table-head-cell>Value</uui-table-head-cell>
175186
<uui-table-head-cell>Example</uui-table-head-cell>
176187
</uui-table-head>
177188
${properties
178-
.filter(property => surface.some(x => property.key.includes(x)))
189+
.filter(property => base.some(x => property.key.includes(x)))
179190
.map(property => propertyColorTemplate(property))}
180191
</uui-table>
181192

0 commit comments

Comments
 (0)