Skip to content

Commit fb39fd3

Browse files
aangerhoferaangerhofer
authored
Updated Styling of Switch to Match Visual Design Spec (#2832)
# Pull Request ## 🤨 Rationale The switch didn't look like our figma file. We are going to use it in the AI chat so I wanted to update it. ## 👩‍💻 Implementation Looked at Brandon's styling & made the colors match ## 🧪 Testing Ran a linter. ## ✅ Checklist <!--- Review the list and put an x in the boxes that apply or ~~strike through~~ around items that don't (along with an explanation). --> - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. purely visual changes, no function
1 parent ffbdb0e commit fb39fd3

2 files changed

Lines changed: 148 additions & 39 deletions

File tree

‎change/@ni-nimble-components-6b50078c-4d3b-4502-837b-aa1e4afe4dfb.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "visual design updates for switch control",
4+
"packageName": "@ni/nimble-components",
5+
"email": "alice.darrow@emerson.com",
6+
"dependentChangeType": "patch"
7+
}

‎packages/nimble-components/src/switch/styles.ts‎

Lines changed: 141 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { css } from '@ni/fast-element';
22
import {
33
Black15,
4-
Black7,
4+
Black75,
55
Black91,
6+
DigitalGreenLight,
7+
PowerGreen,
68
White
79
} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
810
import { display } from '../utilities/style/display';
@@ -16,7 +18,6 @@ import {
1618
controlLabelDisabledFontColor,
1719
controlLabelFont,
1820
controlLabelFontColor,
19-
fillHoverColor,
2021
smallDelay
2122
} from '../theme-provider/design-tokens';
2223
import { Theme } from '../theme-provider/types';
@@ -34,7 +35,9 @@ export const styles = css`
3435
flex-direction: column;
3536
cursor: pointer;
3637
--ni-private-switch-height: 24px;
37-
--ni-private-switch-indicator-size: 16px;
38+
--ni-private-switch-indicator-size: 24px;
39+
--ni-private-switch-indicator-inner-size: 18px;
40+
--ni-private-switch-indicator-margin: -2px;
3841
padding-bottom: calc(
3942
${controlHeight} - var(--ni-private-switch-height)
4043
);
@@ -72,20 +75,36 @@ export const styles = css`
7275
display: flex;
7376
height: var(--ni-private-switch-height);
7477
width: calc(var(--ni-private-switch-height) * 2);
75-
background-color: ${fillHoverColor};
78+
background-color: var(--ni-private-switch-background-color);
7679
border-radius: calc(var(--ni-private-switch-height) / 2);
7780
align-items: center;
78-
border: calc(${borderWidth} * 2) solid transparent;
81+
border: calc(${borderWidth}) solid transparent;
7982
}
8083
81-
:host([disabled]) .switch {
82-
background-color: var(--ni-private-switch-background-disabled-color);
84+
:host([aria-checked='true']) .switch {
85+
background-color: var(--ni-private-switch-background-selected-color);
86+
}
87+
88+
:host([aria-checked='true']:hover) .switch {
89+
background-color: var(--ni-private-switch-background-selected-rollover-color);
8390
}
8491
8592
:host(${focusVisible}) .switch {
8693
border-color: ${borderHoverColor};
8794
}
8895
96+
:host(${focusVisible}[aria-checked='true']) .switch {
97+
background-color: var(--ni-private-switch-background-selected-rollover-color);
98+
}
99+
100+
:host([disabled]) .switch {
101+
background-color: var(--ni-private-switch-background-disabled-color);
102+
}
103+
104+
:host([disabled]:hover) .switch {
105+
background-color: var(--ni-private-switch-background-disabled-color);
106+
}
107+
89108
.checked-indicator-spacer {
90109
flex-grow: 0;
91110
transition: flex-grow ${smallDelay} ease-in-out;
@@ -103,51 +122,81 @@ export const styles = css`
103122
width: var(--ni-private-switch-indicator-size);
104123
height: var(--ni-private-switch-indicator-size);
105124
border-radius: calc(var(--ni-private-switch-indicator-size) / 2);
106-
margin: calc(
107-
calc(
108-
var(--ni-private-switch-height) - var(
109-
--ni-private-switch-indicator-size
110-
)
111-
) /
112-
2
113-
);
125+
margin: var(--ni-private-switch-indicator-margin);
114126
border: ${borderWidth} solid
115127
var(--ni-private-switch-indicator-border-color);
116128
}
117129
130+
:host([aria-checked='true']) .checked-indicator {
131+
border-color: var(--ni-private-switch-indicator-border-selected-color);
132+
}
133+
118134
:host(:hover) .checked-indicator {
119135
border: calc(${borderWidth} * 2) solid ${borderHoverColor};
120136
}
121137
138+
:host(${focusVisible}) .checked-indicator {
139+
border: calc(${borderWidth} * 2) solid ${borderHoverColor};
140+
}
141+
122142
:host([disabled]) .checked-indicator {
123-
background-color: var(
124-
--ni-private-switch-indicator-background-disabled-color
125-
);
143+
background-color: transparent;
126144
border: ${borderWidth} solid
127145
var(--ni-private-switch-indicator-border-disabled-color);
128146
}
129147
130-
:host(${focusVisible}) .checked-indicator {
131-
border: ${borderWidth} solid ${borderHoverColor};
148+
:host([disabled]:hover) .checked-indicator {
149+
background-color: transparent;
150+
border: ${borderWidth} solid
151+
var(--ni-private-switch-indicator-border-disabled-color);
132152
}
133153
134-
.checked-indicator-inner {
135-
width: calc(var(--ni-private-switch-indicator-size) / 2);
136-
height: calc(var(--ni-private-switch-indicator-size) / 2);
137-
border-radius: calc(var(--ni-private-switch-indicator-size) / 4);
138-
background-color: var(--ni-private-switch-indicator-border-color);
154+
:host([disabled]${focusVisible}) .checked-indicator {
155+
background-color: transparent;
156+
border: ${borderWidth} solid
157+
var(--ni-private-switch-indicator-border-disabled-color);
158+
}
159+
160+
:host([disabled]:active) .checked-indicator-inner {
161+
background-color: var(
162+
--ni-private-switch-indicator-border-disabled-color
163+
);
139164
opacity: 0;
140-
transition: opacity ${smallDelay} ease-in-out;
141165
}
142166
143-
:host([disabled]) .checked-indicator-inner {
167+
:host([disabled]${focusVisible}) .checked-indicator-inner {
144168
background-color: var(
145169
--ni-private-switch-indicator-border-disabled-color
146170
);
171+
opacity: 0;
172+
}
173+
174+
.checked-indicator-inner {
175+
width: var(--ni-private-switch-indicator-inner-size);
176+
height: var(--ni-private-switch-indicator-inner-size);
177+
border-radius: calc(var(--ni-private-switch-indicator-inner-size) / 2);
178+
opacity: 0;
147179
}
148180
149181
:host([aria-checked='true']) .checked-indicator-inner {
182+
opacity: 0;
183+
}
184+
185+
:host(${focusVisible}) .checked-indicator-inner {
150186
opacity: 1;
187+
background-color: var(--ni-private-switch-indicator-background-color);
188+
border: 1px solid var(--ni-private-switch-indicator-border-selected-color);
189+
}
190+
191+
:host(:active) .checked-indicator-inner {
192+
opacity: 1;
193+
background-color: var(--ni-private-switch-indicator-background-active-color);
194+
}
195+
196+
:host([disabled]) .checked-indicator-inner {
197+
background-color: var(
198+
--ni-private-switch-indicator-border-disabled-color
199+
);
151200
}
152201
153202
slot[name='checked-message']::slotted(*) {
@@ -165,64 +214,117 @@ export const styles = css`
165214
Theme.light,
166215
css`
167216
:host {
217+
--ni-private-switch-background-color: ${hexToRgbaCssColor(Black91, 0.1)};
168218
--ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(
169219
Black91,
170220
0.07
171221
)};
222+
--ni-private-switch-background-selected-color: ${hexToRgbaCssColor(
223+
DigitalGreenLight,
224+
0.6
225+
)};
226+
--ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(
227+
DigitalGreenLight,
228+
0.3
229+
)};
172230
--ni-private-switch-indicator-background-color: ${White};
173231
--ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(
174-
White,
175-
0.1
232+
Black91,
233+
0.15
176234
)};
177-
--ni-private-switch-indicator-border-color: ${Black91};
178-
--ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(
235+
--ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(
236+
DigitalGreenLight,
237+
0.3
238+
)};
239+
240+
--ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(
179241
Black91,
180242
0.3
181243
)};
244+
--ni-private-switch-indicator-border-selected-color: ${DigitalGreenLight};
245+
--ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(
246+
Black91,
247+
0.15
248+
)};
249+
182250
}
183251
`
184252
),
185253
themeBehavior(
186254
Theme.dark,
187255
css`
188256
:host {
257+
--ni-private-switch-background-color: ${hexToRgbaCssColor(Black15, 0.1)};
189258
--ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(
190259
Black15,
191260
0.07
192261
)};
193-
--ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(
194-
Black91,
262+
--ni-private-switch-background-selected-color: ${hexToRgbaCssColor(
263+
PowerGreen,
264+
0.6
265+
)};
266+
--ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(
267+
PowerGreen,
195268
0.3
196269
)};
270+
--ni-private-switch-indicator-background-color: ${Black75};
197271
--ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(
198-
Black91,
272+
Black15,
199273
0.1
200274
)};
201-
--ni-private-switch-indicator-border-color: ${Black7};
202-
--ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(
203-
Black7,
275+
--ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(
276+
PowerGreen,
277+
0.3
278+
)};
279+
--ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(
280+
Black15,
204281
0.3
205282
)};
283+
--ni-private-switch-indicator-border-selected-color: ${PowerGreen};
284+
--ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(
285+
Black15,
286+
0.15
287+
)};
206288
}
207289
`
208290
),
209291
themeBehavior(
210292
Theme.color,
211293
css`
212294
:host {
295+
--ni-private-switch-background-color: ${hexToRgbaCssColor(
296+
White,
297+
0.1
298+
)};
213299
--ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(
214300
White,
215301
0.07
216302
)};
303+
--ni-private-switch-background-selected-color: ${hexToRgbaCssColor(
304+
White,
305+
0.6
306+
)};
307+
--ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(
308+
White,
309+
0.3
310+
)};
217311
--ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(
218312
White,
219-
0.1
313+
0.3
220314
)};
221315
--ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(
222316
White,
223317
0.1
224318
)};
225-
--ni-private-switch-indicator-border-color: ${White};
319+
--ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(
320+
White,
321+
0.3
322+
)};
323+
--ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(
324+
White,
325+
0.3
326+
)};
327+
--ni-private-switch-indicator-border-selected-color: ${White} ;
226328
--ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(
227329
White,
228330
0.3

0 commit comments

Comments
 (0)