Skip to content

Commit 61c4421

Browse files
author
Nikos Katsikanis
committed
change outline semantics to not clash with css outline semantics (and esp projects that use tailwind [outline class adds an outline border])
1 parent c440567 commit 61c4421

File tree

5 files changed

+11
-11
lines changed

5 files changed

+11
-11
lines changed

css/button-badge.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ button,
2828
}
2929
}
3030

31-
&.outline {
31+
&.wireframe {
3232
background-color: var(--bg-color);
3333
color: var(--default-text);
3434
border: 1px solid var(--default-text);
@@ -81,7 +81,7 @@ button,
8181
color: var(--default-text);
8282
}
8383

84-
.badge.outline {
84+
.badge.wireframe {
8585
background-color: var(--bg-color);
8686
color: var(--default-text);
8787
border: 1px solid var(--default-text);

css/dark.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
--form-control-bg: #333;
88

99
--bg-color: hsl(var(--base-hue), var(--base-saturation), var(--base-lightness));
10-
--bg-outline-hover: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 10%));
10+
--bg-wireframe-hover: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 10%));
1111
--primary-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 70%));
1212
--primary-hover-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 80%));
1313

examples/vue-project/vanilla_app/css/button-badge.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ button,
2424
}
2525
}
2626

27-
&.outline {
27+
&.wireframe {
2828
background-color: var(--bg-color);
2929
color: var(--default-text);
3030
border: 1px solid var(--default-text);
@@ -50,7 +50,7 @@ button,
5050
color: var(--default-text);
5151
}
5252

53-
.badge.outline {
53+
.badge.wireframe {
5454
background-color: var(--bg-color);
5555
color: var(--default-text);
5656
border: 1px solid var(--default-text);

js/components/nav.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export default (hostComponent) => {
149149
hostComponent.parentElement.insertAdjacentHTML(
150150
'afterbegin',
151151
`
152-
<button class="burger-button squarify outline border-none">
152+
<button class="burger-button squarify wireframe border-none">
153153
<svg class="icon" viewBox="0 0 100 80" width="20" height="20" fill="currentColor">
154154
<rect width="100" height="20"></rect>
155155
<rect y="30" width="100" height="20"></rect>

js/routes/button-badge.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@ export default (hostComponent) => {
4545
<button class="squarify">Squarify</button>
4646
</div>
4747
48-
<p>Outline (hover matches secondary)</p>
48+
<p>wireframe (hover matches secondary)</p>
4949
<div>
50-
<button class="outline">Text</button>
51-
<button class="outline">
50+
<button class="wireframe">Text</button>
51+
<button class="wireframe">
5252
<span class="icon">&#x270F;</span>
5353
<span class="text">Text + Icon</span>
5454
</button>
@@ -74,7 +74,7 @@ export default (hostComponent) => {
7474
<p>Special Cases</p>
7575
7676
<div>
77-
<button class="outline small-button" data-component="copy" data-text-to-copy="[email protected]"
77+
<button class="wireframe small-button" data-component="copy" data-text-to-copy="[email protected]"
7878
data-initial-text="Copy Email" data-success-text="Copied!"></button>
7979
</div>
8080
@@ -84,7 +84,7 @@ export default (hostComponent) => {
8484
Some Text
8585
<span class="badge primary">test</span>
8686
<span class="badge secondary">test</span>
87-
<span class="badge outline">test</span>
87+
<span class="badge wireframe">test</span>
8888
<span class="badge destructive">test</span>
8989
<span class="badge success">test</span>
9090
</div>

0 commit comments

Comments
 (0)