Skip to content

Commit a6f9eb4

Browse files
nielslyngsoenielslyngsoe
committed
change primary color to default color
1 parent bed73f1 commit a6f9eb4

File tree

23 files changed

+113
-92
lines changed

23 files changed

+113
-92
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ export default {
1111
title: 'Buttons/Action Bar',
1212
component: 'uui-action-bar',
1313
args: {
14-
look: 'default',
15-
color: 'primary',
14+
look: 'secondary',
15+
color: 'default',
1616
},
1717
argTypes: {
1818
look: {
@@ -25,7 +25,7 @@ export default {
2525
control: {
2626
type: 'select',
2727
},
28-
options: ['primary', 'positive', 'warning', 'danger'],
28+
options: ['default', 'positive', 'warning', 'danger'],
2929
},
3030
},
3131
};
@@ -70,7 +70,7 @@ export const Single = () => {
7070

7171
export const LooksAndColors = () => {
7272
const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
73-
const colors = ['primary', 'positive', 'warning', 'danger'];
73+
const colors = ['default', 'positive', 'warning', 'danger'];
7474

7575
return html`
7676
<uui-icon-registry-essential>

‎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-badge/lib/uui-badge.element.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ export class UUIBadgeElement extends LitElement {
3333
3434
border-radius: var(--uui-size-4);
3535
36-
color: var(--uui-color-primary-standalone);
37-
background-color: var(--uui-color-surface-alt);
36+
/** default color: */
37+
background-color: var(--uui-color-default);
38+
color: var(--uui-color-default-contrast);
3839
}
39-
40-
:host([color='primary']) {
41-
background-color: var(--uui-color-primary);
42-
color: var(--uui-color-primary-contrast);
40+
:host([color='secondary']) {
41+
background-color: var(--uui-color-surface-alt);
42+
color: var(--uui-color-default);
4343
}
4444
:host([color='positive']) {
4545
background-color: var(--uui-color-positive);
@@ -96,9 +96,9 @@ export class UUIBadgeElement extends LitElement {
9696

9797
/**
9898
* 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 {"" | "primary"|"positive"|"warning"|"danger"}
99+
* @type {"" | "default"|"positive"|"warning"|"danger"}
100100
* @attr
101-
* @default primary
101+
* @default default
102102
*/
103103
@property({ type: String, reflect: true })
104104
color = '';

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ export default {
88
component: 'uui-badge',
99
id: 'uui-badge',
1010
args: {
11-
color: 'primary',
11+
color: 'default',
1212
slot: '1',
1313
attention: false,
1414
},
1515
argTypes: {
1616
color: {
17-
options: ['primary', 'positive', 'warning', 'danger'],
17+
options: ['default', 'secondary', 'positive', 'warning', 'danger'],
1818
control: { type: 'select' },
1919
},
2020
slot: {
@@ -34,7 +34,7 @@ const Template: Story = props => html` <uui-icon-registry-essential>
3434

3535
export const AAAOverview = Template.bind({});
3636
AAAOverview.args = {
37-
color: 'primary',
37+
color: 'default',
3838
slot: '1',
3939
attention: false,
4040
};
@@ -134,11 +134,12 @@ OnButton.parameters = {
134134
export const Colors: Story = () => html`
135135
<div
136136
style="position:relative; width:80px; height:80px; border: 2px dashed black">
137-
<uui-badge>default/undefined</uui-badge>
137+
<uui-badge>Default</uui-badge>
138138
</div>
139139
<div
140-
style="position:relative; width:80px; height:80px; border: 2px dashed black">
141-
<uui-badge color="primary">primary</uui-badge>
140+
style="position:relative; width:80px; height:80px; border: 2px dashed black; margin-top: 16px">
141+
<uui-badge color="secondary">secondary</uui-badge>
142+
</div>
142143
</div>
143144
<div
144145
style="position:relative; width:80px; height:80px; border: 2px dashed black; margin-top: 16px">

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default {
88
component: 'uui-button-group',
99
id: 'uui-button-group',
1010
args: {
11-
look: 'primary',
11+
look: 'secondary',
1212
color: 'primary',
1313
},
1414
argTypes: {
@@ -22,13 +22,13 @@ export default {
2222
control: {
2323
type: 'select',
2424
},
25-
options: ['primary', 'positive', 'warning', 'danger'],
25+
options: ['default', 'positive', 'warning', 'danger'],
2626
},
2727
},
2828
};
2929

3030
const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
31-
const colors = ['primary', 'positive', 'warning', 'danger'];
31+
const colors = ['default', 'positive', 'warning', 'danger'];
3232

3333
export const AAAOverview: Story = props => html`
3434
<uui-button-group>

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

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export type Look =
2222
| 'secondary'
2323
| 'outline'
2424
| 'placeholder';
25-
export type Color = 'primary' | 'positive' | 'warning' | 'danger';
25+
export type Color = 'default' | 'positive' | 'warning' | 'danger';
2626

2727
/**
2828
* @element uui-button
@@ -160,25 +160,24 @@ export class UUIButtonElement extends FormControlMixin(
160160
}
161161
}
162162
163-
/* edge case for primary color */
164-
165-
:host([color='primary'][look='default']) button,
166-
:host([color='primary'][look='secondary']) button,
167-
:host([color='primary'][look='outline']) button,
168-
:host([color='primary'][look='placeholder']) button {
169-
--uui-button-contrast-hover: var(--uui-color-primary-emphasis);
163+
/* edge case for default color */
164+
:host(:not([color]):not([look='primary'])) button,
165+
:host([color='']:not([look='primary'])) button,
166+
:host([color='default']:not([look='primary'])) button {
167+
--uui-button-contrast-hover: var(--uui-color-default-emphasis);
170168
}
171169
172170
:host([color='warning'][look='outline']) button,
173171
:host([color='warning'][look='placeholder']) button {
174172
--uui-button-contrast-hover: var(--color-standalone);
175173
}
176174
177-
:host([color='primary']) button {
178-
--color: var(--uui-color-primary);
179-
--color-standalone: var(--uui-color-primary-standalone);
180-
--color-emphasis: var(--uui-color-primary-emphasis);
181-
--color-contrast: var(--uui-color-primary-contrast);
175+
/** Button color attribute: */
176+
button {
177+
--color: var(--uui-color-default);
178+
--color-standalone: var(--uui-color-default-standalone);
179+
--color-emphasis: var(--uui-color-default-emphasis);
180+
--color-contrast: var(--uui-color-default-contrast);
182181
}
183182
:host([color='positive']) button {
184183
--color: var(--uui-color-positive);
@@ -207,21 +206,22 @@ export class UUIButtonElement extends FormControlMixin(
207206
cursor: default;
208207
}
209208
209+
/** Button look attribute: */
210210
/* DEFAULT */
211-
:host([look='default']) button {
211+
button {
212212
background-color: var(--uui-button-background-color, transparent);
213213
color: var(--uui-button-contrast, var(--color-standalone));
214214
border-color: var(--uui-button-border-color, transparent);
215215
}
216-
:host([look='default']:not([disabled]):hover) button {
216+
:host(:not([disabled]):hover) button {
217217
background-color: var(
218218
--uui-button-background-color-hover,
219219
var(--uui-color-surface-emphasis)
220220
);
221221
color: var(--uui-button-contrast-hover, var(--color-standalone));
222222
border-color: var(--uui-button-border-color-hover, transparent);
223223
}
224-
:host([look='default'][disabled]) button {
224+
:host([disabled]) button {
225225
background-color: var(
226226
--uui-button-background-color-disabled,
227227
transparent
@@ -370,12 +370,12 @@ export class UUIButtonElement extends FormControlMixin(
370370

371371
/**
372372
* 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.
373-
* @type {"primary" | "positive" | "warning" | "danger"}
373+
* @type {"default" | "positive" | "warning" | "danger"}
374374
* @attr
375-
* @default "primary"
375+
* @default "default"
376376
*/
377377
@property({ reflect: true })
378-
color: Color = 'primary';
378+
color: Color = 'default';
379379

380380
/**
381381
* Makes the left and right padding of the button narrower.

‎packages/uui-button/lib/uui-button.story.ts

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default {
1212

1313
args: {
1414
look: 'default',
15-
color: 'primary',
15+
color: 'default',
1616
type: '',
1717
label: 'Button',
1818
state: '',
@@ -28,7 +28,7 @@ export default {
2828
control: {
2929
type: 'select',
3030
},
31-
options: ['primary', 'positive', 'warning', 'danger'],
31+
options: ['default', 'positive', 'warning', 'danger'],
3232
},
3333
type: {
3434
options: ['', 'submit', 'button', 'reset'],
@@ -74,7 +74,7 @@ const reducer = (prev: string, next: string, i: number) =>
7474
(prev = next ? `${prev}${i === 1 ? ';' : ''} ${next};` : prev);
7575

7676
const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
77-
const colors = ['primary', 'positive', 'warning', 'danger'];
77+
const colors = ['default', 'positive', 'warning', 'danger'];
7878

7979
const Template: Story = props => {
8080
return html`
@@ -128,9 +128,26 @@ export const WithBadge: Story = props => {
128128
color=${props.color}
129129
label=${props.label}
130130
state=${props.state}>
131-
<uui-badge color="danger">!</uui-badge>
131+
<uui-badge color="danger">2</uui-badge>
132132
I have a badge
133133
</uui-button>
134+
135+
<br /><br />
136+
137+
<uui-button
138+
type=${props.type}
139+
style=${cssProps
140+
.map(cssProp => (props[cssProp] ? `${cssProp}: ${props[cssProp]}` : ''))
141+
.reduce(reducer)}
142+
?disabled=${props.disabled}
143+
?compact=${props.compact}
144+
look=${props.look}
145+
color=${props.color}
146+
label=${props.label}
147+
state=${props.state}>
148+
<uui-badge color="danger" attention>!</uui-badge>
149+
My badge requires attention
150+
</uui-button>
134151
`;
135152
};
136153
WithBadge.args = { look: 'primary' };
@@ -244,7 +261,7 @@ export const LooksAndColors: Story = props => html`
244261
`
245262
)}
246263
`;
247-
LooksAndColors.args = { label: 'Button', look: 'default', color: 'primary' };
264+
LooksAndColors.args = { label: 'Button', look: 'default', color: 'default' };
248265
LooksAndColors.parameters = {
249266
docs: {
250267
source: {

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@
4545
--uui-color-divider-emphasis: #bdbdbd;
4646

4747
/* ----- COLORS ----- */
48-
--uui-color-primary: var(--uui-palette-space-cadet);
49-
--uui-color-primary-emphasis: var(--uui-palette-violet-blue);
50-
--uui-color-primary-standalone: var(--uui-palette-space-cadet-dark);
51-
--uui-color-primary-contrast: #fff;
48+
--uui-color-default: var(--uui-palette-space-cadet);
49+
--uui-color-default-emphasis: var(--uui-palette-violet-blue);
50+
--uui-color-default-standalone: var(--uui-palette-space-cadet-dark);
51+
--uui-color-default-contrast: #fff;
5252

5353
--uui-color-warning: var(--uui-palette-sunglow);
5454
--uui-color-warning-emphasis: var(--uui-palette-sunglow-light);
@@ -107,10 +107,10 @@
107107
--uui-color-divider-standalone: #444c56;
108108
--uui-color-divider-emphasis: #4f5864; */
109109
/* ----- COLORS ----- */
110-
/* --uui-color-primary: #2c70d6;
111-
--uui-color-primary-emphasis: #3886fc;
112-
--uui-color-primary-standalone: #88bdff;
113-
--uui-color-primary-contrast: white;
110+
/* --uui-color-default: #2c70d6;
111+
--uui-color-default-emphasis: #3886fc;
112+
--uui-color-default-standalone: #88bdff;
113+
--uui-color-default-contrast: white;
114114
115115
--uui-color-warning: #977b00;
116116
--uui-color-warning-emphasis: #bda22b;

‎packages/uui-file-dropzone/lib/uui-file-dropzone.element.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,18 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
3030
backdrop-filter: blur(2px);
3131
}
3232
#dropzone.hover {
33-
border-color: var(--uui-color-primary);
33+
border-color: var(--uui-color-default);
3434
}
3535
#dropzone.hover::before {
3636
content: '';
3737
position: absolute;
3838
inset: 0;
3939
opacity: 0.2;
40-
border-color: var(--uui-color-primary);
41-
background-color: var(--uui-color-primary);
40+
border-color: var(--uui-color-default);
41+
background-color: var(--uui-color-default);
4242
}
4343
#symbol {
44-
color: var(--uui-color-primary);
44+
color: var(--uui-color-default);
4545
max-width: 100%;
4646
max-height: 100%;
4747
}

‎packages/uui-form-layout-item/lib/uui-form-layout-item.story.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const Example: Story = () => html` <uui-form>
7575
</uui-form-layout-item>
7676
7777
<uui-button type="reset" label="Reset" look="secondary"> Reset </uui-button>
78-
<uui-button type="submit" label="Submit" look="positive">
78+
<uui-button type="submit" label="Submit" look="primary" color="positive">
7979
Submit
8080
</uui-button>
8181
</form>

0 commit comments

Comments
 (0)