Skip to content

Commit 3a49432

Browse files
jawinnjawinn
authored
fix(commons): rename and deprecate mods referencing global tokens (#2423)
Add renamed mods to commons styles, with the old mod as a fallback and a deprecation notice. Some mods, such as --mod-line-height-100, had been misnamed with reference to the global tokens.
1 parent 35ccf25 commit 3a49432

File tree

6 files changed

+31
-14
lines changed

6 files changed

+31
-14
lines changed

‎components/actionbutton/metadata/mods.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,5 +50,8 @@
5050
| `--mod-actionbutton-static-content-color` |
5151
| `--mod-actionbutton-text-to-visual` |
5252
| `--mod-animation-duration-100` |
53+
| `--mod-button-animation-duration` |
54+
| `--mod-button-font-family` |
55+
| `--mod-button-line-height` |
5356
| `--mod-line-height-100` |
5457
| `--mod-sans-font-family-stack` |

‎components/button/metadata/mods.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,12 @@
2424
| `--mod-button-edge-to-text` |
2525
| `--mod-button-edge-to-visual` |
2626
| `--mod-button-edge-to-visual-only` |
27+
| `--mod-button-focus-indicator-gap` |
2728
| `--mod-button-focus-ring-border-radius` |
2829
| `--mod-button-focus-ring-color` |
2930
| `--mod-button-focus-ring-gap` |
3031
| `--mod-button-focus-ring-thickness` |
32+
| `--mod-button-font-family` |
3133
| `--mod-button-font-size` |
3234
| `--mod-button-height` |
3335
| `--mod-button-line-height` |

‎components/closebutton/metadata/mods.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
| Modifiable custom properties |
22
| --------------------------------------------------- |
33
| `--mod-animation-duration-100` |
4+
| `--mod-button-animation-duration` |
5+
| `--mod-button-font-family` |
6+
| `--mod-button-line-height` |
47
| `--mod-closebutton-align-self` |
58
| `--mod-closebutton-animation-duraction` |
69
| `--mod-closebutton-animation-duration` |

‎components/commons/basebutton-coretokens.css‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,19 @@ governing permissions and limitations under the License.
4040
/* Adjacent buttons should be aligned correctly */
4141
vertical-align: top;
4242

43-
transition: background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
44-
border-color var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
45-
color var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
46-
box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
43+
/* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */
44+
transition: background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
45+
border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
46+
color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
47+
box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
4748

4849
text-decoration: none;
49-
font-family: var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack));
5050

51-
line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
51+
/* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */
52+
font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
53+
54+
/* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */
55+
line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
5256

5357
user-select: none;
5458
-webkit-user-select: none;
@@ -92,19 +96,20 @@ governing permissions and limitations under the License.
9296
inset-block-end: 0;
9397
inset-inline-start: 0;
9498
inset-inline-end: 0;
95-
margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1);
96-
transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
97-
margin var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
99+
/* @deprecation --mod-focus-indicator-gap has been renamed and will be removed in a future version. */
100+
margin: calc(var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) * -1);
101+
/* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */
102+
transition: opacity var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
103+
margin var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
98104
}
99105

100106
&:focus-visible {
101107
&::after {
102-
margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2);
108+
margin: calc(var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) * -2);
103109
}
104110
}
105111
}
106112

107-
108113
%spectrum-AnchorButton {
109114
/* Remove appearance for clickable types in iOS and Safari. */
110115
-webkit-appearance: none;
@@ -119,9 +124,6 @@ governing permissions and limitations under the License.
119124
/* Fixes horizontal alignment of text in anchor buttons */
120125
text-align: center;
121126

122-
/* @safari10 Workaround for https://bugs.webkit.org/show_bug.cgi?id=169700 */
123-
/*inline-size: 100%;*/
124-
125127
&:empty {
126128
display: none;
127129
}

‎components/logicbutton/metadata/mods.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
| Modifiable custom properties |
22
| -------------------------------------------------------- |
33
| `--mod-animation-duration-100` |
4+
| `--mod-button-animation-duration` |
5+
| `--mod-button-focus-indicator-gap` |
6+
| `--mod-button-font-family` |
7+
| `--mod-button-line-height` |
48
| `--mod-focus-indicator-gap` |
59
| `--mod-line-height-100` |
610
| `--mod-logic-button-and-background-color` |

‎components/picker/metadata/mods.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
| Modifiable custom properties |
22
| ------------------------------------------------------ |
33
| `--mod-animation-duration-100` |
4+
| `--mod-button-animation-duration` |
5+
| `--mod-button-font-family` |
6+
| `--mod-button-line-height` |
47
| `--mod-line-height-100` |
58
| `--mod-picker-animation-duration` |
69
| `--mod-picker-background-color-active` |

0 commit comments

Comments
 (0)