Skip to content

Commit 7be4eff

Browse files
didoodidoo
authored
Merge pull request #2322 from hashicorp/showcase-rename-doc-color-variables
Showcase - Rename `--doc-color` variables to `—shw-color`
2 parents e084182 + 3e5efbb commit 7be4eff

File tree

5 files changed

+36
-36
lines changed

5 files changed

+36
-36
lines changed

‎showcase/app/styles/_globals.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ body {
1717
min-height: 100vh;
1818
margin: 0;
1919
padding: 0;
20-
background: var(--doc-color-white);
20+
background: var(--shw-color-white);
2121
}
2222

2323
.shw-page-header {
@@ -29,7 +29,7 @@ body {
2929
width: 100%;
3030
height: 68px;
3131
padding: 0 24px;
32-
color: var(--doc-color-black);
32+
color: var(--shw-color-black);
3333
border-bottom: 1px solid #eaeaea;
3434
}
3535

@@ -98,7 +98,7 @@ body {
9898
align-items: center;
9999
width: fit-content;
100100
padding: 0.5rem 1rem;
101-
color: var(--doc-color-black);
101+
color: var(--shw-color-black);
102102
font-size: 0.9rem;
103103
border: 2px solid transparent;
104104
border-radius: 5px;
@@ -147,12 +147,12 @@ body {
147147
padding-left: 5px;
148148

149149
&::marker {
150-
color: var(--doc-color-gray-300);
150+
color: var(--shw-color-gray-300);
151151
}
152152

153153
a {
154154
padding: 4px 6px;
155-
color: var(--doc-color-black);
155+
color: var(--shw-color-black);
156156
border-radius: 4px;
157157

158158
&:hover {

‎showcase/app/styles/_tokens.scss

+26-26
Original file line numberDiff line numberDiff line change
@@ -7,32 +7,32 @@
77

88
:root {
99
// COLORS
10-
--doc-color-white: #fff;
11-
--doc-color-gray-600: #f2f2f3;
12-
--doc-color-gray-500: #dbdbdc;
13-
--doc-color-gray-400: #bfbfc0;
14-
--doc-color-gray-300: #727374;
15-
--doc-color-gray-200: #343536;
16-
--doc-color-gray-100: #1d1e1f;
17-
--doc-color-black: #000;
18-
--doc-color-link-on-black: #4294ff;
19-
--doc-color-link-on-white: #2264d6;
20-
--doc-color-feedback-information-100: #0d44cc;
21-
--doc-color-feedback-information-200: #1563ff;
22-
--doc-color-feedback-information-300: #d0e0ff;
23-
--doc-color-feedback-information-400: #eff5ff;
24-
--doc-color-feedback-success-100: #007854;
25-
--doc-color-feedback-success-200: #00bc7f;
26-
--doc-color-feedback-success-300: #c1f1e0;
27-
--doc-color-feedback-success-400: #ebfdf7;
28-
--doc-color-feedback-warning-100: #975b06;
29-
--doc-color-feedback-warning-200: #eaaa32;
30-
--doc-color-feedback-warning-300: #f9eacd;
31-
--doc-color-feedback-warning-400: #fcf6ea;
32-
--doc-color-feedback-critical-100: #ba2226;
33-
--doc-color-feedback-critical-200: #f25054;
34-
--doc-color-feedback-critical-300: #ffd4d6;
35-
--doc-color-feedback-critical-400: #fcf0f2;
10+
--shw-color-white: #fff;
11+
--shw-color-gray-600: #f2f2f3;
12+
--shw-color-gray-500: #dbdbdc;
13+
--shw-color-gray-400: #bfbfc0;
14+
--shw-color-gray-300: #727374;
15+
--shw-color-gray-200: #343536;
16+
--shw-color-gray-100: #1d1e1f;
17+
--shw-color-black: #000;
18+
--shw-color-link-on-black: #4294ff;
19+
--shw-color-link-on-white: #2264d6;
20+
--shw-color-feedback-information-100: #0d44cc;
21+
--shw-color-feedback-information-200: #1563ff;
22+
--shw-color-feedback-information-300: #d0e0ff;
23+
--shw-color-feedback-information-400: #eff5ff;
24+
--shw-color-feedback-success-100: #007854;
25+
--shw-color-feedback-success-200: #00bc7f;
26+
--shw-color-feedback-success-300: #c1f1e0;
27+
--shw-color-feedback-success-400: #ebfdf7;
28+
--shw-color-feedback-warning-100: #975b06;
29+
--shw-color-feedback-warning-200: #eaaa32;
30+
--shw-color-feedback-warning-300: #f9eacd;
31+
--shw-color-feedback-warning-400: #fcf6ea;
32+
--shw-color-feedback-critical-100: #ba2226;
33+
--shw-color-feedback-critical-200: #f25054;
34+
--shw-color-feedback-critical-300: #ffd4d6;
35+
--shw-color-feedback-critical-400: #fcf0f2;
3636
// "FLEX/GRID" COMPONENTS
3737
--shw-layout-gap-base: 1rem;
3838
}

‎showcase/app/styles/_typography.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ $show-font-family-mono: ui-monospace, menlo, consolas, monospace;
165165
padding: 0.15em 0.25em;
166166
font-weight: normal;
167167
font-size: 0.95em;
168-
background-color: var(--doc-color-gray-600);
168+
background-color: var(--shw-color-gray-600);
169169
border-radius: 0.33em;
170170
}
171171
}

‎showcase/app/styles/showcase-components/frame.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,14 @@ $shw-frame-navigation-bar-height: 48px;
3636
.shw-frame__open-link {
3737
width: 16px;
3838
height: 16px;
39-
color: var(--doc-color-gray-300);
39+
color: var(--shw-color-gray-300);
4040

4141
&:hover {
42-
color: var(--doc-color-gray-200);
42+
color: var(--shw-color-gray-200);
4343
}
4444

4545
&:active {
46-
color: var(--doc-color-gray-100);
46+
color: var(--shw-color-gray-100);
4747
}
4848
}
4949

‎showcase/tests/integration/components/hds/flight-icon/index-test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ module('Integration | Component | flight-icon', function (hooks) {
6969
});
7070
test('the color property should accept :root variable values', async function (assert) {
7171
await render(
72-
hbs`<FlightIcon @name="alert-circle" @color="var(--doc-color-feedback-critical-100)" />`
72+
hbs`<FlightIcon @name="alert-circle" @color="var(--shw-color-feedback-critical-100)" />`
7373
);
7474
assert.dom(`svg.flight-icon`).hasStyle({
7575
fill: 'rgb(186, 34, 38)',

0 commit comments

Comments
 (0)