Skip to content

Commit 3735cca

Browse files
Amarnath510Amarnath510
authored
feat(styling-hooks): reafactor focus styling hooks (#5351)
1 parent f8e7691 commit 3735cca

File tree

67 files changed

+178
-112
lines changed

Some content is hidden

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

67 files changed

+178
-112
lines changed

‎styling-hooks/shadow.json

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
{
2+
"aliases": {
3+
"PALETTE_NEUTRAL_100": {
4+
"value": "#FFFFFF"
5+
},
6+
"PALETTE_BLUE_40": {
7+
"value": "#0B5CAB"
8+
}
9+
},
10+
"props": {
11+
"shadow-outset-focus-1": {
12+
"originalValue": "0 0 0 2px {!PALETTE_NEUTRAL_100}, 0 0 0 4px {!PALETTE_BLUE_40}",
13+
"syntax": "<length>",
14+
"name": "shadow-outset-focus-1",
15+
"value": "0 0 0 2px {!PALETTE_NEUTRAL_100}, 0 0 0 4px {!PALETTE_BLUE_40}",
16+
"scope": "global",
17+
"cssProperties": [
18+
"box-shadow"
19+
],
20+
"inherits": false,
21+
"type": "raw",
22+
"namespace": "slds",
23+
"category": "shadow",
24+
"comment": "Shadow with double border style outset"
25+
},
26+
"shadow-inset-focus-1": {
27+
"originalValue": "0 0 0 2px {!PALETTE_NEUTRAL_100} inset, 0 0 0 4px {!PALETTE_BLUE_40} inset",
28+
"syntax": "<length>",
29+
"name": "shadow-inset-focus-1",
30+
"value": "0 0 0 2px {!PALETTE_NEUTRAL_100} inset, 0 0 0 4px {!PALETTE_BLUE_40} inset",
31+
"scope": "global",
32+
"cssProperties": [
33+
"box-shadow"
34+
],
35+
"inherits": false,
36+
"type": "raw",
37+
"namespace": "slds",
38+
"category": "shadow",
39+
"comment": "Shadow with double border style inset"
40+
},
41+
"shadow-inset-inverse-focus-1": {
42+
"originalValue": "0 0 0 2px {!PALETTE_BLUE_40} inset, 0 0 0 4px {!PALETTE_NEUTRAL_100} inset",
43+
"syntax": "<length>",
44+
"name": "shadow-inset-inverse-focus-1",
45+
"value": "0 0 0 2px {!PALETTE_BLUE_40} inset, 0 0 0 4px {!PALETTE_NEUTRAL_100} inset",
46+
"scope": "global",
47+
"cssProperties": [
48+
"box-shadow"
49+
],
50+
"inherits": false,
51+
"type": "raw",
52+
"namespace": "slds",
53+
"category": "shadow",
54+
"comment": "Shadow with double border style inset inverse"
55+
},
56+
"shadow-outline-focus-1": {
57+
"originalValue": "0 0 0 2px {!PALETTE_BLUE_40}",
58+
"syntax": "<length>",
59+
"name": "shadow-outline-focus-1",
60+
"value": "0 0 0 2px {!PALETTE_BLUE_40}",
61+
"scope": "global",
62+
"cssProperties": [
63+
"box-shadow"
64+
],
65+
"inherits": false,
66+
"type": "raw",
67+
"namespace": "slds",
68+
"category": "shadow",
69+
"comment": "Shadow around the border"
70+
}
71+
}
72+
}

‎styling-hooks/slds-hooks.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"imports": [
33
"@salesforce-ux/sds-styling-hooks/src/props/colors.json",
44
"@salesforce-ux/sds-styling-hooks/src/props/palettes.json",
5-
"./transparent-colors.json"
5+
"./transparent-colors.json",
6+
"./shadow.json"
67
]
78
}

‎ui/_styling-hooks.scss

-7
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,3 @@
66
// ----------------------------------------------------------------------------
77

88
@import '../design-tokens/dist/slds-hooks.custom-props';
9-
10-
:root {
11-
--_slds-g-shadow-outset-focus: 0 0 0 2px var(--slds-g-color-neutral-base-100, #FFFFFF), 0 0 0 4px var(--slds-g-color-brand-base-40, #0B5CAB);
12-
--_slds-g-shadow-inset-focus: 0 0 0 2px var(--slds-g-color-neutral-base-100) inset, 0 0 0 4px var(--slds-g-color-brand-base-40, #0B5CAB) inset;
13-
--_slds-g-shadow-inset-inverse-focus: 0 0 0 2px var(--slds-g-color-brand-base-40, #0B5CAB) inset, 0 0 0 4px var(--slds-g-color-neutral-base-100, #FFFFFF) inset;
14-
--_slds-g-shadow-outline-focus: 0 0 0 2px var(--slds-g-color-brand-base-40, #0B5CAB);
15-
}

‎ui/components/accordion/base/_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
line-height: var(--slds-c-accordion-heading-line-height, var(--sds-c-accordion-heading-line-height, $line-height-heading));
8080

8181
.slds-button:focus {
82-
box-shadow: inset var(--_slds-g-shadow-outline-focus);
82+
box-shadow: inset var(--slds-g-shadow-outline-focus-1);
8383
}
8484
}
8585

‎ui/components/alert/base/_index.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ $alert-gradient-size-background: 64px 64px;
4545
}
4646

4747
&:focus {
48-
box-shadow: var(--slds-c-alert-shadow, var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus}));
48+
box-shadow: var(--slds-c-alert-shadow, var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus}));
4949
border-width: var(--slds-c-alert-sizing-border, $border-width-thin);
5050
border-style: solid;
5151
border-color: var(--slds-c-alert-color-border, transparent);
@@ -87,7 +87,7 @@ $alert-gradient-size-background: 64px 64px;
8787
}
8888

8989
.slds-button:focus {
90-
box-shadow: var(--_slds-g-shadow-inset-focus);
90+
box-shadow: var(--slds-g-shadow-inset-focus-1);
9191
}
9292
}
9393

‎ui/components/app-launcher/base/_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
}
2828

2929
&:focus {
30-
box-shadow: var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus});
30+
box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
3131
}
3232

3333
/**

‎ui/components/builder-header/base/_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484

8585
&:focus {
8686
text-decoration: underline;
87-
box-shadow: var(--_slds-g-shadow-inset-inverse-focus, #{$shadow-button-focus});
87+
box-shadow: var(--slds-g-shadow-inset-inverse-focus-1, #{$shadow-button-focus});
8888
outline: none;
8989
border-radius: 0;
9090
}

‎ui/components/button-groups/base/_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
box-shadow: inset 1px 0 0 var(--slds-g-color-neutral-base-100, #{$button-icon-color-border-primary});
3939

4040
&:focus {
41-
box-shadow: var(--_slds-g-shadow-outset-focus);
41+
box-shadow: var(--slds-g-shadow-outset-focus-1);
4242
}
4343
}
4444

‎ui/components/button-icons/base/_index.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
}
106106

107107
&:focus {
108-
box-shadow: var(--_slds-g-shadow-outset-focus);
108+
box-shadow: var(--slds-g-shadow-outset-focus-1);
109109
outline: 0;
110110
}
111111
}
@@ -148,7 +148,7 @@
148148
}
149149

150150
&:focus {
151-
box-shadow: var(--_slds-g-shadow-inset-focus, #{$shadow-button-focus});
151+
box-shadow: var(--slds-g-shadow-inset-focus-1, #{$shadow-button-focus});
152152
border-color: transparent;
153153
outline: 0;
154154
}

‎ui/components/button-icons/stateful/_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
}
4747

4848
&:focus {
49-
box-shadow: var(--_slds-g-shadow-outset-focus);
49+
box-shadow: var(--slds-g-shadow-outset-focus-1);
5050
outline: 0;
5151
}
5252

‎ui/components/buttons/base/_index.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
}
5252

5353
&:focus {
54-
box-shadow: var(--slds-c-button-shadow-focus, var(--sds-c-button-shadow-focus, var(--_slds-g-shadow-outline-focus)));
54+
box-shadow: var(--slds-c-button-shadow-focus, var(--sds-c-button-shadow-focus, var(--slds-g-shadow-outline-focus-1)));
5555
outline: 0;
5656
}
5757

@@ -108,7 +108,7 @@ a.slds-button {
108108

109109
&:focus {
110110
/*! @css-var-fallback box-shadow */
111-
--slds-c-button-shadow-focus: var(--sds-c-button-shadow-focus, var(--_slds-g-shadow-outline-focus));
111+
--slds-c-button-shadow-focus: var(--sds-c-button-shadow-focus, var(--slds-g-shadow-outline-focus-1));
112112
}
113113
}
114114

@@ -346,7 +346,7 @@ a.slds-button--inverse:focus {
346346
}
347347

348348
&:focus {
349-
box-shadow: var(--_slds-g-shadow-inset-focus, #{$shadow-button-focus});
349+
box-shadow: var(--slds-g-shadow-inset-focus-1, #{$shadow-button-focus});
350350
}
351351

352352
&:active {
@@ -571,7 +571,7 @@ a.slds-button--inverse:focus {
571571
.slds-button_destructive,
572572
.slds-button--destructive {
573573
&:focus {
574-
box-shadow: var(--_slds-g-shadow-outset-focus);
574+
box-shadow: var(--slds-g-shadow-outset-focus-1);
575575
outline: 0;
576576
}
577577
}

‎ui/components/buttons/dual-stateful/_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
}
100100

101101
&:focus {
102-
box-shadow: var(--_slds-g-shadow-outset-focus);
102+
box-shadow: var(--slds-g-shadow-outset-focus-1);
103103
outline: 0;
104104
}
105105

‎ui/components/carousel/base/_index.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
}
6464

6565
&:focus {
66-
box-shadow: var(--_slds-g-shadow-outset-focus);
66+
box-shadow: var(--slds-g-shadow-outset-focus-1);
6767
}
6868
}
6969

@@ -161,7 +161,7 @@
161161
}
162162

163163
&:focus {
164-
box-shadow: var(--_slds-g-shadow-outset-focus);
164+
box-shadow: var(--slds-g-shadow-outset-focus-1);
165165
border-radius: $border-radius-circle;
166166
}
167167
}
@@ -178,7 +178,7 @@
178178
margin-left: $spacing-xx-small;
179179

180180
.slds-button:focus {
181-
box-shadow: var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus});
181+
box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
182182
outline: 0;
183183
}
184184
}

‎ui/components/chat/base/_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@
212212
}
213213

214214
&:focus-within {
215-
box-shadow: var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus});
215+
box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
216216
}
217217
}
218218

‎ui/components/checkbox-button-group/base/_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@
123123
&:focus ~ .slds-checkbox--faux,
124124
&:focus + .slds-checkbox_button__label,
125125
&:focus + .slds-checkbox--button__label {
126-
box-shadow: var(--_slds-g-shadow-inset-focus, #{$shadow-button-focus});
126+
box-shadow: var(--slds-g-shadow-inset-focus-1, #{$shadow-button-focus});
127127
z-index: $z-index-default; // Raises box shadow above adjacent buttons
128128
}
129129

‎ui/components/checkbox-button/base/_deprecate.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
~ .slds-checkbox--faux,
9797
+ .slds-checkbox_faux,
9898
+ .slds-checkbox--faux {
99-
box-shadow: var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus});
99+
box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
100100
border: none;
101101
}
102102
}

‎ui/components/checkbox-button/base/_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,5 @@
6565
* @modifier
6666
*/
6767
.slds-checkbox-button_is-focused {
68-
box-shadow: var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus});
68+
box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
6969
}

‎ui/components/checkbox-toggle/base/_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@
116116

117117
// @todo consider shared hooks for inputs
118118
/*! @css-var-fallback box-shadow */
119-
--slds-c-checkbox-toggle-shadow: var(--sds-c-checkbox-toggle-shadow-focus, var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus}));
119+
--slds-c-checkbox-toggle-shadow: var(--sds-c-checkbox-toggle-shadow-focus, var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus}));
120120
}
121121
}
122122

‎ui/components/checkbox/base/_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@
112112
--slds-c-checkbox-color-border: var(--slds-c-checkbox-color-border-focus, var(--sds-c-checkbox-color-border-focus));
113113

114114
/*! @css-var-fallback box-shadow */
115-
--slds-c-checkbox-shadow: var(--slds-c-checkbox-shadow-focus, var(--sds-c-checkbox-shadow-focus, var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus})));
115+
--slds-c-checkbox-shadow: var(--slds-c-checkbox-shadow-focus, var(--sds-c-checkbox-shadow-focus, var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus})));
116116
}
117117

118118
&:checked > .slds-checkbox_faux,

‎ui/components/color-picker/base/_index.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124
&:focus,
125125
&:active {
126126
outline: none;
127-
box-shadow: var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus});
127+
box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
128128
border-radius: $border-radius-small;
129129
}
130130
}
@@ -183,7 +183,7 @@
183183
border-radius: $border-radius-circle;
184184

185185
&:focus {
186-
box-shadow: var(--_slds-g-shadow-outline-focus);
186+
box-shadow: var(--slds-g-shadow-outline-focus-1);
187187
outline: 0;
188188
}
189189
}
@@ -247,7 +247,7 @@
247247

248248
@mixin thumb-styles-focus {
249249
border-color: var(--slds-g-color-brand-base-60, #{$color-border-input-active});
250-
box-shadow: var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus});
250+
box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
251251
}
252252

253253
&::-webkit-slider-thumb {

‎ui/components/combobox/base/_index.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ input[readonly][role="combobox"] {
9999

100100
&:focus,
101101
&.slds-has-focus {
102-
box-shadow: var(--_slds-g-shadow-outline-focus, #{$shadow-button-focus});
102+
box-shadow: var(--slds-g-shadow-outline-focus-1, #{$shadow-button-focus});
103103
}
104104

105105
&[disabled] {
@@ -249,7 +249,7 @@ input[readonly][role="combobox"] {
249249

250250
.slds-listbox__option:focus,
251251
.slds-listbox__option.slds-has-focus {
252-
box-shadow: var(--_slds-g-shadow-inset-focus, #{$shadow-button-focus});
252+
box-shadow: var(--slds-g-shadow-inset-focus-1, #{$shadow-button-focus});
253253
outline: 0;
254254
}
255255

@@ -309,7 +309,7 @@ input[readonly][role="combobox"] {
309309
.slds-listbox--vertical {
310310
.slds-listbox__option.slds-is-selected:focus,
311311
.slds-listbox__option.slds-is-selected.slds-has-focus {
312-
box-shadow: var(--_slds-g-shadow-inset-inverse-focus);
312+
box-shadow: var(--slds-g-shadow-inset-inverse-focus-1);
313313
}
314314
}
315315
}
@@ -463,7 +463,7 @@ input[readonly][role="combobox"] {
463463
*/
464464
&:focus,
465465
&.slds-has-focus {
466-
box-shadow: var(--_slds-g-shadow-outline-focus, #{$shadow-button-focus});
466+
box-shadow: var(--slds-g-shadow-outline-focus-1, #{$shadow-button-focus});
467467
outline: 0;
468468
}
469469
}

‎ui/components/data-tables/base/_index.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
}
6060

6161
&:not(.slds-no-row-hover) tbody tr:focus {
62-
box-shadow: var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus});
62+
box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
6363
}
6464

6565
/**
@@ -154,7 +154,7 @@
154154
th.slds-has-focus,
155155
[role="gridcell"]:focus,
156156
[role="gridcell"].slds-has-focus {
157-
box-shadow: var(--_slds-g-shadow-inset-inverse-focus, #{$shadow-button-focus});
157+
box-shadow: var(--slds-g-shadow-inset-inverse-focus-1, #{$shadow-button-focus});
158158

159159
/**
160160
* Use when cells are in action mode
@@ -170,7 +170,7 @@
170170

171171
th:focus,
172172
th.slds-has-focus {
173-
box-shadow: var(--_slds-g-shadow-inset-inverse-focus, #{$shadow-button-focus});
173+
box-shadow: var(--slds-g-shadow-inset-inverse-focus-1, #{$shadow-button-focus});
174174
}
175175

176176
th:active,
@@ -375,7 +375,7 @@
375375
}
376376

377377
&:focus {
378-
box-shadow: var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus});
378+
box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
379379
}
380380
}
381381

0 commit comments

Comments
 (0)