Skip to content

Commit b9a3e9a

Browse files
nielslyngsoenielslyngsoe
authored
Merge pull request #208 from umbraco/feature/css-variables
2 parents 4322eff + 07b8c96 commit b9a3e9a

File tree

89 files changed

+1717
-1720
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

89 files changed

+1717
-1720
lines changed

‎packages/uui-action-bar/lib/uui-action-bar.story.ts

Lines changed: 61 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,26 @@ import '@umbraco-ui/uui-icon-registry-essential/lib';
66

77
import { html } from 'lit-html';
88

9-
import {
10-
InterfaceLookNames,
11-
InterfaceLookType,
12-
} from '@umbraco-ui/uui-base/lib/types';
13-
149
export default {
1510
id: 'uui-action-bar',
1611
title: 'Buttons/Action Bar',
1712
component: 'uui-action-bar',
1813
args: {
19-
look: '',
14+
look: 'secondary',
15+
color: 'default',
2016
},
2117
argTypes: {
2218
look: {
2319
control: {
2420
type: 'select',
2521
},
26-
options: InterfaceLookNames,
22+
options: ['default', 'primary', 'secondary', 'outline', 'placeholder'],
23+
},
24+
color: {
25+
control: {
26+
type: 'select',
27+
},
28+
options: ['default', 'positive', 'warning', 'danger'],
2729
},
2830
},
2931
};
@@ -34,7 +36,10 @@ export const AAAOverview: Story = props => html`
3436
<uui-icon-registry-essential>
3537
<uui-action-bar
3638
>${buttons.map(
37-
el => html` <uui-button label="${el}" look="${props.look}">
39+
el => html` <uui-button
40+
label="${el}"
41+
look="${props.look}"
42+
color="${props.color}">
3843
<uui-icon name="${el}"></uui-icon>
3944
</uui-button>`
4045
)}
@@ -44,49 +49,71 @@ export const AAAOverview: Story = props => html`
4449

4550
AAAOverview.storyName = 'Overview';
4651

47-
export const Single = () =>
48-
html`
52+
export const Single = () => {
53+
const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
54+
55+
return html`
4956
<uui-icon-registry-essential>
50-
<uui-action-bar>
51-
<uui-button label="Delete" look="outline"
52-
><uui-icon name="delete"></uui-icon
53-
></uui-button>
54-
</uui-action-bar>
57+
${looks.map(
58+
look => html`<div
59+
style="display: grid; grid-template-columns: repeat( auto-fill, 120px ); gap: 16px; margin-bottom: 32px">
60+
<uui-action-bar style="justify-self: left;">
61+
<uui-button label="Delete" .look="${look as any}">
62+
<uui-icon name="delete"></uui-icon>
63+
</uui-button>
64+
</uui-action-bar>
65+
</div> `
66+
)}
5567
</uui-icon-registry-essential>
5668
`;
69+
};
5770

58-
export const Looks = () => html`
59-
<uui-icon-registry-essential>
60-
${InterfaceLookNames.map(
61-
(lookName: InterfaceLookType) =>
62-
html` <div>${lookName}</div>
63-
<uui-action-bar>
64-
${buttons.map(
65-
button => html`<uui-button label="${button}" .look=${lookName}>
66-
<uui-icon name="${button}"></uui-icon>
67-
</uui-button>`
68-
)} </uui-action-bar
69-
><br /><br />`
70-
)}
71-
</uui-icon-registry-essential>
72-
`;
71+
export const LooksAndColors = () => {
72+
const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
73+
const colors = ['default', 'positive', 'warning', 'danger'];
74+
75+
return html`
76+
<uui-icon-registry-essential>
77+
${colors.map(
78+
color =>
79+
html`<div
80+
style="display: grid; grid-template-columns: repeat( auto-fill, 100px ); gap: 16px; margin-bottom: 32px">
81+
${looks.map(
82+
look => html`
83+
<uui-action-bar
84+
>${buttons.map(
85+
el => html` <uui-button
86+
label="${el}"
87+
.look="${look as any}"
88+
.color="${color as any}">
89+
<uui-icon name="${el}"></uui-icon>
90+
</uui-button>`
91+
)}
92+
</uui-action-bar>
93+
`
94+
)}
95+
</div> `
96+
)}
97+
</uui-icon-registry-essential>
98+
`;
99+
};
73100

74-
Looks.parameters = {
101+
LooksAndColors.parameters = {
75102
docs: {
76103
source: {
77104
code: `
78105
<uui-icon-registry-essential>
79106
<uui-action-bar>
80107
81-
<uui-button look="[look]" label="Copy">
108+
<uui-button look="[look]" color="[color]" label="Copy">
82109
<uui-icon name="copy"></uui-icon>
83110
</uui-button>
84111
85-
<uui-button look="[look]" label="Remove">
112+
<uui-button look="[look]" color="[color]" label="Remove">
86113
<uui-icon name="remove"></uui-icon>
87114
</uui-button>
88115
89-
<uui-button look="[look]" label="Delete">
116+
<uui-button look="[look]" color="[color]" label="Delete">
90117
<uui-icon name="delete"></uui-icon>
91118
</uui-button>
92119

‎packages/uui-avatar-group/lib/uui-avatar-group.story.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const AAAOverview: Story = props => html`
1919
]};"
2020
.limit=${props.limit}>
2121
<uui-avatar name="Mads Rasmussen"></uui-avatar>
22-
<uui-avatar name="Niels Lyngsøe"></uui-avatar>
22+
<uui-avatar name="Niels Lyngsø"></uui-avatar>
2323
<uui-avatar name="Jacob Overgaard"></uui-avatar>
2424
<uui-avatar name="Jesper Møller Jensen"></uui-avatar>
2525
</uui-avatar-group>

‎packages/uui-avatar/lib/uui-avatar.element.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ export class UUIAvatarElement extends LitElement {
2626
user-select: none;
2727
/* box-sizing: border-box; */
2828
aspect-ratio: 1;
29-
background-color: var(--uui-color-spanish-pink);
30-
color: var(--uui-color-space-cadet);
29+
background-color: var(--uui-palette-spanish-pink);
30+
color: var(--uui-palette-space-cadet);
3131
}
3232
3333
:host([overflow]) {

‎packages/uui-badge/lib/uui-badge.element.ts

Lines changed: 23 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
2-
import { InterfaceLookType } from '@umbraco-ui/uui-base/lib/types';
32
import { css, html, LitElement } from 'lit';
43
import { property } from 'lit/decorators.js';
54

@@ -32,19 +31,27 @@ export class UUIBadgeElement extends LitElement {
3231
min-height: var(--uui-size-8);
3332
box-sizing: border-box;
3433
35-
border-width: var(--uui-badge-border-width, 1px);
36-
border-style: solid;
37-
border-color: var(
38-
--uui-badge-border-color,
39-
var(--uui-interface-surface)
40-
);
4134
border-radius: var(--uui-size-4);
4235
43-
background-color: var(
44-
--uui-badge-background-color,
45-
var(--uui-interface-surface)
46-
);
47-
color: var(--uui-badge-contrast, var(--uui-interface-contrast));
36+
/** default color: */
37+
background-color: var(--uui-color-default);
38+
color: var(--uui-color-default-contrast);
39+
}
40+
:host([color='secondary']) {
41+
background-color: var(--uui-color-surface-alt);
42+
color: var(--uui-color-default);
43+
}
44+
:host([color='positive']) {
45+
background-color: var(--uui-color-positive);
46+
color: var(--uui-color-positive-contrast);
47+
}
48+
:host([color='warning']) {
49+
background-color: var(--uui-color-warning);
50+
color: var(--uui-color-warning-contrast);
51+
}
52+
:host([color='danger']) {
53+
background-color: var(--uui-color-danger);
54+
color: var(--uui-color-danger-contrast);
4855
}
4956
5057
/** TODO: we didn't want to target elements by name, but what else can we do? */
@@ -84,87 +91,17 @@ export class UUIBadgeElement extends LitElement {
8491
animation: none;
8592
}
8693
}
87-
88-
:host([look='primary']) {
89-
background-color: var(--uui-look-primary-surface);
90-
color: var(--uui-look-primary-contrast);
91-
border-style: var(
92-
--uui-badge-border-style,
93-
var(--uui-look-primary-border-style, solid)
94-
);
95-
border-color: var(--uui-look-primary-border);
96-
}
97-
98-
:host([look='secondary']) {
99-
background-color: var(--uui-look-secondary-surface);
100-
color: var(--uui-look-secondary-contrast);
101-
border-style: var(
102-
--uui-badge-border-style,
103-
var(--uui-look-secondary-border-style, solid)
104-
);
105-
border-color: var(--uui-look-secondary-border);
106-
}
107-
108-
:host([look='outline']) {
109-
background-color: var(--uui-look-outline-surface);
110-
color: var(--uui-look-outline-contrast);
111-
border-style: var(
112-
--uui-badge-border-style,
113-
var(--uui-look-outline-border-style, solid)
114-
);
115-
border-color: var(--uui-look-outline-border);
116-
}
117-
118-
:host([look='placeholder']) {
119-
background-color: var(--uui-look-placeholder-surface);
120-
color: var(--uui-look-placeholder-contrast);
121-
border-style: var(
122-
--uui-badge-border-style,
123-
var(--uui-look-placeholder-border-style, dashed)
124-
);
125-
border-color: var(--uui-look-placeholder-border);
126-
}
127-
128-
:host([look='positive']) {
129-
background-color: var(--uui-look-positive-surface);
130-
color: var(--uui-look-positive-contrast);
131-
border-style: var(
132-
--uui-badge-border-style,
133-
var(--uui-look-positive-border-style, solid)
134-
);
135-
border-color: var(--uui-look-positive-border);
136-
}
137-
138-
:host([look='warning']) {
139-
background-color: var(--uui-look-warning-surface);
140-
color: var(--uui-look-warning-contrast);
141-
border-style: var(
142-
--uui-badge-border-style,
143-
var(--uui-look-warning-border-style, solid)
144-
);
145-
border-color: var(--uui-look-warning-border);
146-
}
147-
148-
:host([look='danger']) {
149-
background-color: var(--uui-look-danger-surface);
150-
color: var(--uui-look-danger-contrast);
151-
border-style: var(
152-
--uui-badge-border-style,
153-
var(--uui-look-danger-border-style, solid)
154-
);
155-
border-color: var(--uui-look-danger-border);
156-
}
15794
`,
15895
];
15996

16097
/**
161-
* Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
162-
* @type {""|"primary"|"secondary"|"outline"|"placeholder"|"positive"|"warning"|"danger"}
98+
* Changes the look of the badge to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" badge.
99+
* @type {"" | "default"|"positive"|"warning"|"danger"}
163100
* @attr
164-
* @default danger
101+
* @default default
165102
*/
166103
@property({ type: String, reflect: true })
167-
look: InterfaceLookType = 'danger';
104+
color = '';
168105

169106
/**
170107
* Bring attention to this badge by applying a bounce animation.

0 commit comments

Comments
 (0)