Skip to content

Commit 2124372

Browse files
lindsaym-faclaviska
lindsaym-fa
and
claviska
authored
Remove custom properties that are easily styled with CSS parts (#1080)
* progress, components A – C * left behind tweaks for A – C * all the rest * tweaks * remove 'accent + outlined' appearances and other tweaks * fix overlooked docs + scouts rule * re-add `--checked-icon-color` to radio and checkbox * revert to `--thumb-size` * fix theme overrides --------- Co-authored-by: Cory LaViska <[email protected]>
1 parent 1581b99 commit 2124372

Some content is hidden

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

69 files changed

+714
-715
lines changed

‎packages/webawesome/docs/_includes/visual-tests/appearance.njk

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,6 @@
88
<th><code>.wa-[appearance]</code></th>
99
</thead>
1010
<tbody>
11-
<tr>
12-
<th><code>accent</code> + <code>outlined</code></th>
13-
<td>
14-
<div class="wa-cluster wa-gap-2xs">
15-
<wa-badge variant="brand" appearance="accent outlined">Brand</wa-badge>
16-
<wa-badge variant="neutral" appearance="accent outlined">Neutral</wa-badge>
17-
<wa-badge variant="success" appearance="accent outlined">Success</wa-badge>
18-
<wa-badge variant="warning" appearance="accent outlined">Warning</wa-badge>
19-
<wa-badge variant="danger" appearance="accent outlined">Danger</wa-badge>
20-
</div>
21-
</td>
22-
<td>
23-
<div class="wa-cluster wa-gap-2xs">
24-
<wa-badge variant="brand" class="wa-accent wa-outlined">Brand</wa-badge>
25-
<wa-badge variant="neutral" class="wa-accent wa-outlined">Neutral</wa-badge>
26-
<wa-badge variant="success" class="wa-accent wa-outlined">Success</wa-badge>
27-
<wa-badge variant="warning" class="wa-accent wa-outlined">Warning</wa-badge>
28-
<wa-badge variant="danger" class="wa-accent wa-outlined">Danger</wa-badge>
29-
</div>
30-
</td>
31-
</tr>
3211
<tr>
3312
<th><code>accent</code></th>
3413
<td>

‎packages/webawesome/docs/_includes/visual-tests/native.njk

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,6 @@
1717
<button>Button</button>
1818
</td>
1919
</tr>
20-
<tr>
21-
<th><code>accent</code> + <code>outlined</code></th>
22-
<td>
23-
<div class="wa-cluster wa-gap-2xs">
24-
<wa-button variant="brand" appearance="accent outlined">Brand</wa-button>
25-
<wa-button variant="neutral" appearance="accent outlined">Neutral</wa-button>
26-
<wa-button variant="success" appearance="accent outlined">Success</wa-button>
27-
<wa-button variant="warning" appearance="accent outlined">Warning</wa-button>
28-
<wa-button variant="danger" appearance="accent outlined">Danger</wa-button>
29-
</div>
30-
</td>
31-
<td>
32-
<div class="wa-cluster wa-gap-2xs">
33-
<button class="wa-brand wa-accent wa-outlined">Brand</button>
34-
<button class="wa-neutral wa-accent wa-outlined">Neutral</button>
35-
<button class="wa-success wa-accent wa-outlined">Success</button>
36-
<button class="wa-warning wa-accent wa-outlined">Warning</button>
37-
<button class="wa-danger wa-accent wa-outlined">Danger</button>
38-
</div>
39-
</td>
40-
</tr>
4120
<tr>
4221
<th><code>accent</code></th>
4322
<td>
@@ -465,8 +444,8 @@
465444
</wa-select>
466445
</td>
467446
<td>
468-
<label class="wa-filled">Select (filled)
469-
<select value="1">
447+
<label>Select (filled)
448+
<select class="wa-filled" value="1">
470449
<option value="1">Option</option>
471450
</select>
472451
</label>

‎packages/webawesome/docs/docs/components/badge.md

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,37 +29,32 @@ Use the `appearance` attribute to change the badge's visual appearance.
2929

3030
```html {.example}
3131
<div style="margin-block-end: 1rem;">
32-
<wa-badge appearance="accent outlined" variant="neutral">A+O</wa-badge>
3332
<wa-badge appearance="accent" variant="neutral">Accent</wa-badge>
34-
<wa-badge appearance="filled outlined" variant="neutral">F+O</wa-badge>
33+
<wa-badge appearance="filled outlined" variant="neutral">Filled + Outlined</wa-badge>
3534
<wa-badge appearance="filled" variant="neutral">Filled</wa-badge>
3635
<wa-badge appearance="outlined" variant="neutral">Outlined</wa-badge>
3736
</div>
3837
<div style="margin-block-end: 1rem;">
39-
<wa-badge appearance="accent outlined" variant="brand">A+O</wa-badge>
4038
<wa-badge appearance="accent" variant="brand">Accent</wa-badge>
41-
<wa-badge appearance="filled outlined" variant="brand">F+O</wa-badge>
39+
<wa-badge appearance="filled outlined" variant="brand">Filled + Outlined</wa-badge>
4240
<wa-badge appearance="filled" variant="brand">Filled</wa-badge>
4341
<wa-badge appearance="outlined" variant="brand">Outlined</wa-badge>
4442
</div>
4543
<div style="margin-block-end: 1rem;">
46-
<wa-badge appearance="accent outlined" variant="success">A+O</wa-badge>
4744
<wa-badge appearance="accent" variant="success">Accent</wa-badge>
48-
<wa-badge appearance="filled outlined" variant="success">F+O</wa-badge>
45+
<wa-badge appearance="filled outlined" variant="success">Filled + Outlined</wa-badge>
4946
<wa-badge appearance="filled" variant="success">Filled</wa-badge>
5047
<wa-badge appearance="outlined" variant="success">Outlined</wa-badge>
5148
</div>
5249
<div style="margin-block-end: 1rem;">
53-
<wa-badge appearance="accent outlined" variant="warning">A+O</wa-badge>
5450
<wa-badge appearance="accent" variant="warning">Accent</wa-badge>
55-
<wa-badge appearance="filled outlined" variant="warning">F+O</wa-badge>
51+
<wa-badge appearance="filled outlined" variant="warning">Filled + Outlined</wa-badge>
5652
<wa-badge appearance="filled" variant="warning">Filled</wa-badge>
5753
<wa-badge appearance="outlined" variant="warning">Outlined</wa-badge>
5854
</div>
5955
<div>
60-
<wa-badge appearance="accent outlined" variant="danger">A+O</wa-badge>
6156
<wa-badge appearance="accent" variant="danger">Accent</wa-badge>
62-
<wa-badge appearance="filled outlined" variant="danger">F+O</wa-badge>
57+
<wa-badge appearance="filled outlined" variant="danger">Filled + Outlined</wa-badge>
6358
<wa-badge appearance="filled" variant="danger">Filled</wa-badge>
6459
<wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
6560
</div>

‎packages/webawesome/docs/docs/components/button.md

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -30,43 +30,38 @@ Use the `appearance` attribute to change the button's visual appearance.
3030
```html {.example}
3131
<div class="wa-stack">
3232
<div class="wa-gap-2xs">
33-
<wa-button appearance="accent outlined" variant="neutral">A + O</wa-button>
3433
<wa-button appearance="accent" variant="neutral">Accent</wa-button>
35-
<wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
36-
<wa-button appearance="filled outlined" variant="neutral">F + O</wa-button>
34+
<wa-button appearance="filled outlined" variant="neutral">Filled + Outlined</wa-button>
3735
<wa-button appearance="filled" variant="neutral">Filled</wa-button>
36+
<wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
3837
<wa-button appearance="plain" variant="neutral">Plain</wa-button>
3938
</div>
4039
<div class="wa-gap-2xs">
41-
<wa-button appearance="accent outlined" variant="brand">A + O</wa-button>
4240
<wa-button appearance="accent" variant="brand">Accent</wa-button>
43-
<wa-button appearance="outlined" variant="brand">Outlined</wa-button>
44-
<wa-button appearance="filled outlined" variant="brand">F + O</wa-button>
41+
<wa-button appearance="filled outlined" variant="brand">Filled + Outlined</wa-button>
4542
<wa-button appearance="filled" variant="brand">Filled</wa-button>
43+
<wa-button appearance="outlined" variant="brand">Outlined</wa-button>
4644
<wa-button appearance="plain" variant="brand">Plain</wa-button>
4745
</div>
4846
<div class="wa-gap-2xs">
49-
<wa-button appearance="accent outlined" variant="success">A + O</wa-button>
5047
<wa-button appearance="accent" variant="success">Accent</wa-button>
51-
<wa-button appearance="outlined" variant="success">Outlined</wa-button>
52-
<wa-button appearance="filled outlined" variant="success">F + O</wa-button>
48+
<wa-button appearance="filled outlined" variant="success">Filled + Outlined</wa-button>
5349
<wa-button appearance="filled" variant="success">Filled</wa-button>
50+
<wa-button appearance="outlined" variant="success">Outlined</wa-button>
5451
<wa-button appearance="plain" variant="success">Plain</wa-button>
5552
</div>
5653
<div class="wa-gap-2xs">
57-
<wa-button appearance="accent outlined" variant="warning">A + O</wa-button>
5854
<wa-button appearance="accent" variant="warning">Accent</wa-button>
59-
<wa-button appearance="outlined" variant="warning">Outlined</wa-button>
60-
<wa-button appearance="filled outlined" variant="warning">F + O</wa-button>
55+
<wa-button appearance="filled outlined" variant="warning">Filled + Outlined</wa-button>
6156
<wa-button appearance="filled" variant="warning">Filled</wa-button>
57+
<wa-button appearance="outlined" variant="warning">Outlined</wa-button>
6258
<wa-button appearance="plain" variant="warning">Plain</wa-button>
6359
</div>
6460
<div class="wa-gap-2xs">
65-
<wa-button appearance="accent outlined" variant="danger">A + O</wa-button>
6661
<wa-button appearance="accent" variant="danger">Accent</wa-button>
67-
<wa-button appearance="outlined" variant="danger">Outlined</wa-button>
68-
<wa-button appearance="filled outlined" variant="danger">F + O</wa-button>
62+
<wa-button appearance="filled outlined" variant="danger">Filled + Outlined</wa-button>
6963
<wa-button appearance="filled" variant="danger">Filled</wa-button>
64+
<wa-button appearance="outlined" variant="danger">Outlined</wa-button>
7065
<wa-button appearance="plain" variant="danger">Plain</wa-button>
7166
</div>
7267
</div>
@@ -214,6 +209,7 @@ Use the `disabled` attribute to disable a button.
214209
<wa-button variant="success" disabled>Success</wa-button>
215210
<wa-button variant="neutral" disabled>Neutral</wa-button>
216211
<wa-button variant="warning" disabled>Warning</wa-button>
212+
<wa-button variant="danger" disabled>Danger</wa-button>
217213
```
218214

219215
### Styling Buttons

‎packages/webawesome/docs/docs/components/callout.md

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -63,16 +63,9 @@ Set the `variant` attribute to change the callout's variant.
6363
Use the `appearance` attribute to change the callout's visual appearance (the default is `outlined filled`).
6464

6565
```html {.example}
66-
<wa-callout variant="brand" appearance="outlined accent">
67-
<wa-icon slot="icon" name="check-to-slot"></wa-icon>
68-
This <strong>accent</strong> callout is also <strong>outlined</strong>
69-
</wa-callout>
70-
71-
<br />
72-
7366
<wa-callout variant="brand" appearance="accent">
7467
<wa-icon slot="icon" name="square-check"></wa-icon>
75-
This <strong>accent</strong> callout draws attention without an outline
68+
This <strong>accent</strong> callout draws attention
7669
</wa-callout>
7770

7871
<br />
@@ -113,10 +106,16 @@ Use the `size` attribute to change a callout's size.
113106
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
114107
This is meant to be very emphasized.
115108
</wa-callout>
109+
110+
<br />
111+
116112
<wa-callout size="medium">
117113
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
118114
Normal-sized callout.
119115
</wa-callout>
116+
117+
<br />
118+
120119
<wa-callout size="small">
121120
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
122121
Just a small tip!
@@ -133,7 +132,4 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
133132

134133
### Styling
135134

136-
You can customize the callout's appearance mostly by setting regular CSS properties:
137-
138-
- `background`, `border`, `border-radius`, `color`, `padding`, `margin`, etc. work as expected
139-
- `gap` sets the space between the icon and the content
135+
You can customize the callout's appearance mostly by setting regular CSS properties. `background`, `border`, `border-radius`, `color`, `padding`, `margin`, etc. work as expected.

‎packages/webawesome/docs/docs/components/card.md

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -141,18 +141,16 @@ Use the `appearance` attribute to change the card's visual appearance.
141141
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
142142
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
143143
/>
144-
<div slot="header">Outlined (default)</div>
145-
Card content.
144+
Outlined (default)
146145
</wa-card>
147-
{% for appearance in ['outlined filled', 'outlined accent', 'plain', 'filled', 'accent'] -%}
146+
{% for appearance in ['outlined filled', 'plain', 'filled', 'accent'] -%}
148147
<wa-card appearance="{{ appearance }}">
149148
<img
150149
slot="media"
151150
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
152151
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
153152
/>
154-
<div slot="header">{{ appearance | capitalize }}</div>
155-
Card content.
153+
{{ appearance | capitalize }}
156154
</wa-card>
157155
{%- endfor %}
158156
</div>

‎packages/webawesome/docs/docs/components/color-picker.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,5 +85,5 @@ The color picker can be rendered as disabled.
8585
Add descriptive hint to a color picker with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
8686

8787
```html {.example}
88-
<wa-color-picker label="Select a color" hint="Choose a color with appropate contrast!"></wa-color-picker>
88+
<wa-color-picker label="Select a color" hint="Choose a color with appropriate contrast!"></wa-color-picker>
8989
```

‎packages/webawesome/docs/docs/components/copy-button.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,9 +104,9 @@ You can customize the button to your liking with CSS.
104104
</wa-copy-button>
105105

106106
<style>
107-
.custom-styles {
108-
--success-color: white;
109-
--error-color: white;
107+
.custom-styles,
108+
.custom-styles::part(success-icon),
109+
.custom-styles::part(error-icon) {
110110
color: white;
111111
}
112112

‎packages/webawesome/docs/docs/components/skeleton.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -135,19 +135,19 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
135135
margin-right: 0.5rem;
136136
}
137137
138-
.skeleton-avatars wa-skeleton:nth-child(1) {
139-
--border-radius: 0;
138+
.skeleton-avatars wa-skeleton:nth-child(1)::part(indicator) {
139+
border-radius: 0;
140140
}
141141
142-
.skeleton-avatars wa-skeleton:nth-child(2) {
143-
--border-radius: var(--wa-border-radius-m);
142+
.skeleton-avatars wa-skeleton:nth-child(2)::part(indicator) {
143+
border-radius: var(--wa-border-radius-m);
144144
}
145145
</style>
146146
```
147147

148148
### Custom Shapes
149149

150-
Use the `--border-radius` custom property to make circles, squares, and rectangles. For more complex shapes, you can apply `clip-path` to the `indicator` part. [Try Clippy](https://bennettfeely.com/clippy/) if you need help generating custom shapes.
150+
Set a `border-radius` on the `indicator` part to make circles, squares, and rectangles. For more complex shapes, you can apply `clip-path` to the `indicator` part. [Try Clippy](https://bennettfeely.com/clippy/) if you need help generating custom shapes.
151151

152152
```html {.example}
153153
<div class="skeleton-shapes">
@@ -166,20 +166,20 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
166166
}
167167
168168
.skeleton-shapes .square::part(indicator) {
169-
--border-radius: var(--wa-border-radius-m);
169+
border-radius: var(--wa-border-radius-m);
170170
}
171171
172172
.skeleton-shapes .circle::part(indicator) {
173-
--border-radius: var(--wa-border-radius-circle);
173+
border-radius: var(--wa-border-radius-circle);
174174
}
175175
176176
.skeleton-shapes .triangle::part(indicator) {
177-
--border-radius: 0;
177+
border-radius: 0;
178178
clip-path: polygon(50% 0, 0 100%, 100% 100%);
179179
}
180180
181181
.skeleton-shapes .cross::part(indicator) {
182-
--border-radius: 0;
182+
border-radius: 0;
183183
clip-path: polygon(
184184
20% 0%,
185185
0% 20%,
@@ -197,7 +197,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
197197
}
198198
199199
.skeleton-shapes .comment::part(indicator) {
200-
--border-radius: 0;
200+
border-radius: 0;
201201
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
202202
}
203203

‎packages/webawesome/src/components/avatar/avatar.css

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
:host {
2-
--background-color: var(--wa-color-neutral-fill-normal);
3-
--text-color: var(--wa-color-neutral-on-normal);
42
--size: 3rem;
53

64
display: inline-flex;
@@ -9,14 +7,14 @@
97
position: relative;
108
width: var(--size);
119
height: var(--size);
12-
background-color: var(--background-color);
10+
color: var(--wa-color-neutral-on-normal);
1311
font: inherit;
1412
font-size: calc(var(--size) * 0.4);
15-
color: var(--text-color);
16-
user-select: none;
17-
-webkit-user-select: none;
1813
vertical-align: middle;
14+
background-color: var(--wa-color-neutral-fill-normal);
1915
border-radius: var(--wa-border-radius-circle);
16+
user-select: none;
17+
-webkit-user-select: none;
2018
}
2119

2220
:host([shape='square']) {

0 commit comments

Comments
 (0)