Skip to content

Commit cb98b22

Browse files
missatingsirineJ
missating
and
sirineJ
authored
Deprecated --cui-bg-accent-strong-* and --cui-z-index-toast design tokens (#3715)
* update eslint rule to handle deprecated tokens without replacement * update deprecated tokens in styles * update skills doc * add changeset * fix bugs and cleanup * add style lint to preview packages * fix script * update stylelint with the new fix rule * address lint error on ci file * Update .changeset/cute-fans-admire.md Co-authored-by: sirineJ <112706079+sirineJ@users.noreply.github.com> * Update .changeset/silent-snails-shave.md Co-authored-by: sirineJ <112706079+sirineJ@users.noreply.github.com> * clean up changeset * update changeset --------- Co-authored-by: sirineJ <112706079+sirineJ@users.noreply.github.com>
1 parent c269ce6 commit cb98b22

22 files changed

Lines changed: 227 additions & 77 deletions

File tree

‎.changeset/cute-fans-admire.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@sumup-oss/design-tokens": minor
3+
---
4+
5+
Deprecated the `--cui-bg-accent-strong-*` token family, use the `--cui-bg-strong-*` tokens instead.

‎.changeset/proud-signs-check.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@sumup-oss/design-tokens": minor
3+
---
4+
5+
Deprecated the `--cui-z-index-toast` token, no direct replacement, update z-index based on the context manually.

‎.changeset/twelve-donkeys-sleep.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@sumup-oss/stylelint-plugin-circuit-ui": patch
3+
"@sumup-oss/eslint-plugin-circuit-ui": patch
4+
---
5+
6+
Updated the `no-deprecated-custom-properties` rule to support deprecated tokens that have no direct replacement. The rule now requires an additional message for deprecated tokens with no direct replacement.

‎.github/workflows/cr.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ jobs:
3333
run: npm run build
3434

3535
- name: Publish packages
36-
run: npx pkg-pr-new publish './packages/circuit-ui' './packages/design-tokens' './packages/icons' './packages/eslint-plugin-circuit-ui' --json output.json --comment=off
36+
run: npx pkg-pr-new publish './packages/circuit-ui' './packages/design-tokens' './packages/icons' './packages/eslint-plugin-circuit-ui' './packages/stylelint-plugin-circuit-ui' --json output.json --comment=off
3737

3838
- name: Post or update comment
3939
uses: actions/github-script@v9
@@ -106,4 +106,4 @@ jobs:
106106
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
107107
PR_NUMBER: ${{ github.event.pull_request.number }}
108108
run: |
109-
gh pr edit $PR_NUMBER --remove-label "preview"
109+
gh pr edit "$PR_NUMBER" --remove-label "preview"

‎.storybook/components/Theme.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@ type CustomPropertyValue = string;
3535
type CustomProperty = {
3636
name: CustomPropertyName;
3737
value: CustomPropertyValue;
38-
deprecation?: { replacement: CustomPropertyName };
38+
deprecation?:
39+
| { replacement: CustomPropertyName }
40+
| { additionalInfo: string };
3941
};
4042
type CustomProperties = CustomProperty[];
4143

@@ -101,7 +103,11 @@ function getRows(
101103
{deprecation && (
102104
<Tooltip
103105
type="description"
104-
label={`Use the \`${deprecation.replacement}\` custom property instead.`}
106+
label={
107+
'replacement' in deprecation
108+
? `Use the \`${deprecation.replacement}\` custom property instead.`
109+
: deprecation.additionalInfo
110+
}
105111
component={(props) => (
106112
<Badge
107113
{...props}
@@ -196,7 +202,7 @@ export function BorderRadius({ name }: PreviewProps) {
196202
? 'var(--cui-spacings-mega)'
197203
: 'var(--cui-spacings-tera)',
198204
borderRadius: `var(${name})`,
199-
backgroundColor: 'var(--cui-bg-accent-strong)',
205+
backgroundColor: 'var(--cui-bg-strong)',
200206
}}
201207
/>
202208
);
@@ -285,7 +291,7 @@ export function Spacing({ name }: PreviewProps) {
285291
display: 'inline-block',
286292
width: `var(${name})`,
287293
height: `var(${name})`,
288-
backgroundColor: 'var(--cui-bg-accent-strong)',
294+
backgroundColor: 'var(--cui-bg-strong)',
289295
}}
290296
/>
291297
);
@@ -310,7 +316,7 @@ export function Transition({ name }: PreviewProps) {
310316
display: 'inline-block',
311317
width: 'var(--cui-spacings-tera)',
312318
height: 'var(--cui-spacings-tera)',
313-
backgroundColor: 'var(--cui-bg-accent-strong)',
319+
backgroundColor: 'var(--cui-bg-strong)',
314320
borderRadius: 'var(--cui-border-radius-circle)',
315321
transition: `transform var(${name})`,
316322
transform: `scale(${scale}%)`,

‎packages/circuit-ui/components/Button/base.module.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -189,21 +189,21 @@
189189
/* Variants */
190190
.primary {
191191
color: var(--cui-fg-on-strong);
192-
background-color: var(--cui-bg-accent-strong);
192+
background-color: var(--cui-bg-strong);
193193
border-color: transparent;
194194
}
195195

196196
.primary:hover {
197197
color: var(--cui-fg-on-strong-hovered);
198-
background-color: var(--cui-bg-accent-strong-hovered);
198+
background-color: var(--cui-bg-strong-hovered);
199199
border-color: transparent;
200200
}
201201

202202
.primary:active,
203203
.primary[aria-expanded="true"],
204204
.primary[aria-pressed="true"] {
205205
color: var(--cui-fg-on-strong-pressed);
206-
background-color: var(--cui-bg-accent-strong-pressed);
206+
background-color: var(--cui-bg-strong-pressed);
207207
border-color: transparent;
208208
}
209209

‎packages/circuit-ui/components/Calendar/Calendar.module.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -141,19 +141,19 @@
141141
[aria-pressed="true"].range-end {
142142
font-weight: var(--cui-font-weight-bold);
143143
color: var(--cui-fg-on-strong);
144-
background: var(--cui-bg-accent-strong);
144+
background: var(--cui-bg-strong);
145145
}
146146

147147
.selected:hover,
148148
[aria-pressed="true"].range-start:hover,
149149
[aria-pressed="true"].range-end:hover {
150-
background: var(--cui-bg-accent-strong-hovered);
150+
background: var(--cui-bg-strong-hovered);
151151
}
152152

153153
.selected:active,
154154
.range-start:active,
155155
.range-end:active {
156-
background: var(--cui-bg-accent-strong-pressed);
156+
background: var(--cui-bg-strong-pressed);
157157
}
158158

159159
.range-start::before,
@@ -217,7 +217,7 @@ td:not(:last-of-type) .range-end.last-day::before {
217217
.day[aria-disabled="true"].range-start,
218218
.day[aria-disabled="true"].range-end {
219219
color: var(--cui-fg-on-strong-disabled);
220-
background: var(--cui-bg-accent-strong-disabled);
220+
background: var(--cui-bg-strong-disabled);
221221
}
222222

223223
.day[aria-disabled="true"].range-start::before,

‎packages/circuit-ui/components/Checkbox/CheckboxInput.module.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,15 +81,15 @@
8181

8282
.base:checked + .label::before,
8383
.base:indeterminate + .label::before {
84-
background-color: var(--cui-bg-accent-strong);
84+
background-color: var(--cui-bg-strong);
8585
border-color: var(--cui-border-accent);
8686
}
8787

8888
.base:checked:disabled + .label::before,
8989
.base:checked[disabled] + .label::before,
9090
.base:indeterminate:disabled + .label::before,
9191
.base:indeterminate[disabled] + .label::before {
92-
background-color: var(--cui-bg-accent-strong-disabled);
92+
background-color: var(--cui-bg-strong-disabled);
9393
border-color: var(--cui-border-accent-disabled);
9494
}
9595

@@ -135,6 +135,6 @@
135135

136136
.base:disabled:checked + .label::before,
137137
.base[disabled]:checked + .label::before {
138-
background-color: var(--cui-bg-accent-strong-disabled);
138+
background-color: var(--cui-bg-strong-disabled);
139139
border-color: var(--cui-border-accent-disabled);
140140
}

‎packages/circuit-ui/components/ProgressBar/ProgressBar.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
width: 1px;
2222
height: 100%;
2323
content: "";
24-
background-color: var(--cui-bg-accent-strong);
24+
background-color: var(--cui-bg-strong);
2525
transition: width 0.05s ease-out;
2626
}
2727

‎packages/circuit-ui/components/Tag/Tag.module.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131

3232
.selected .content {
3333
color: var(--cui-fg-on-strong);
34-
background-color: var(--cui-bg-accent-strong);
34+
background-color: var(--cui-bg-strong);
3535
border-color: var(--cui-border-accent);
3636
}
3737

@@ -61,14 +61,14 @@ button.content:active {
6161
.selected a.content:hover,
6262
.selected button.content:hover {
6363
color: var(--cui-fg-on-strong-hovered);
64-
background-color: var(--cui-bg-accent-strong-hovered);
64+
background-color: var(--cui-bg-strong-hovered);
6565
border-color: var(--cui-border-accent-hovered);
6666
}
6767

6868
.selected a.content:active,
6969
.selected button.content:active {
7070
color: var(--cui-fg-on-strong-pressed);
71-
background-color: var(--cui-bg-accent-strong-pressed);
71+
background-color: var(--cui-bg-strong-pressed);
7272
border-color: var(--cui-border-accent-pressed);
7373
}
7474

0 commit comments

Comments
 (0)