Skip to content

Commit df19449

Browse files
wangdicoderclaude
wangdicoder
and
claude
committed
feat(tokens)!: standardize component token axis naming
Rename 330 component token keys so size and state axes are trailing dot-separated segments with property-before-state ordering, matching the convention used by Atlassian, Polaris, Carbon, and Spectrum. 82 public CSS variables are renamed as a result. Adds a build-time validator that rejects dash-joined or mid-leaf axis segments, and documents the rule in REGISTRY_SPEC.md. BREAKING CHANGE: public --ty-* CSS variable names and token registry keys for component tokens have been renamed. Themes and stylesheets overriding component tokens must be updated. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 760188a commit df19449

67 files changed

Lines changed: 824 additions & 727 deletions

Some content is hidden

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

‎.changeset/token-axis-naming-convention.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
"@tiny-design/tokens": major
3+
"@tiny-design/react": major
4+
---
5+
6+
Standardize component token naming so variant axes (sizes `sm/md/lg/xs/xl`, states `hover/active/focus/disabled/checked/selected`) are always trailing dot-separated segments, with the property preceding the state.
7+
8+
**Breaking changes**
9+
10+
- 330 component token keys renamed in `@tiny-design/tokens`. Examples:
11+
- `button.font-size-sm` → `button.font-size.sm`
12+
- `button.solid.primary.bg-hover` → `button.solid.primary.bg.hover`
13+
- `pagination.disabled-bg` → `pagination.bg.disabled`
14+
- `auto-complete.option-active-bg` → `auto-complete.option.bg.active`
15+
- `descriptions.lg-padding-hr` → `descriptions.padding-hr.lg`
16+
- `date-picker.cell-selected-hover-bg` → `date-picker.cell.bg.selected-hover`
17+
- 82 public CSS variables renamed accordingly (e.g. `--ty-calendar-cell-selected-bg` → `--ty-calendar-cell-bg-selected`). Apps overriding these vars in stylesheets or theme documents must update to the new names.
18+
- `tokens.components` keys in custom theme JSON documents must be migrated to the new names.
19+
20+
Compound states (`selected-hover`, `disabled-active`) remain dash-joined inside their trailing axis segment, matching the convention used by Polaris and Atlassian. The `focus-ring` token name is preserved as a domain compound.
21+
22+
The token build now enforces this naming rule and fails on regressions. See `packages/tokens/REGISTRY_SPEC.md` for the full convention.

‎packages/react/src/auto-complete/style/index.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,11 @@
4747
transition: background-color 0.2s;
4848

4949
&_active {
50-
background-color: var(--ty-auto-complete-option-active-bg);
50+
background-color: var(--ty-auto-complete-option-bg-active);
5151
}
5252

5353
&_disabled {
5454
cursor: not-allowed;
55-
opacity: var(--ty-auto-complete-option-disabled-opacity);
55+
opacity: var(--ty-auto-complete-option-opacity-disabled);
5656
}
5757
}

‎packages/react/src/calendar/style/index.scss‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848

4949
&:hover:not(&_disabled) {
5050
color: var(--ty-calendar-header-action-color-hover);
51-
background: var(--ty-calendar-header-action-hover-bg);
51+
background: var(--ty-calendar-header-action-bg-hover);
5252
}
5353

5454
&:focus-visible {
@@ -92,7 +92,7 @@
9292

9393
&:hover {
9494
color: var(--ty-calendar-header-label-color-hover);
95-
background: var(--ty-calendar-header-label-hover-bg);
95+
background: var(--ty-calendar-header-label-bg-hover);
9696
}
9797

9898
&:focus-visible {
@@ -152,17 +152,17 @@
152152
color: var(--ty-calendar-cell-color-muted);
153153

154154
.#{$prefix}-calendar__cell-inner {
155-
background: var(--ty-calendar-cell-disabled-bg);
155+
background: var(--ty-calendar-cell-bg-disabled);
156156
}
157157

158158
}
159159

160160
&:not(&_disabled):hover .#{$prefix}-calendar__cell-inner {
161-
background: var(--ty-calendar-cell-hover-bg);
161+
background: var(--ty-calendar-cell-bg-hover);
162162
}
163163

164164
&_selected:not(&_disabled):hover .#{$prefix}-calendar__cell-inner {
165-
background: var(--ty-calendar-cell-selected-bg);
165+
background: var(--ty-calendar-cell-bg-selected);
166166
}
167167

168168
&_in-view:not(&_disabled) {
@@ -183,8 +183,8 @@
183183
}
184184

185185
&_selected .#{$prefix}-calendar__cell-inner {
186-
background: var(--ty-calendar-cell-selected-bg);
187-
color: var(--ty-calendar-cell-selected-color);
186+
background: var(--ty-calendar-cell-bg-selected);
187+
color: var(--ty-calendar-cell-color-selected);
188188
border-radius: var(--ty-calendar-radius);
189189
}
190190

@@ -204,8 +204,8 @@
204204
}
205205

206206
&_range-start .#{$prefix}-calendar__cell-inner {
207-
background: var(--ty-calendar-cell-selected-bg);
208-
color: var(--ty-calendar-cell-selected-color);
207+
background: var(--ty-calendar-cell-bg-selected);
208+
color: var(--ty-calendar-cell-color-selected);
209209
border-radius: var(--ty-calendar-radius);
210210
}
211211

@@ -215,8 +215,8 @@
215215
}
216216

217217
&_range-end .#{$prefix}-calendar__cell-inner {
218-
background: var(--ty-calendar-cell-selected-bg);
219-
color: var(--ty-calendar-cell-selected-color);
218+
background: var(--ty-calendar-cell-bg-selected);
219+
color: var(--ty-calendar-cell-color-selected);
220220
border-radius: var(--ty-calendar-radius);
221221
}
222222

@@ -228,7 +228,7 @@
228228

229229
&_focused .#{$prefix}-calendar__cell-inner,
230230
&:focus-visible .#{$prefix}-calendar__cell-inner {
231-
outline: 2px solid var(--ty-calendar-cell-focus-outline);
231+
outline: 2px solid var(--ty-calendar-cell-outline-focus);
232232
outline-offset: 1px;
233233
}
234234
}
@@ -295,15 +295,15 @@
295295
transition: all 0.2s;
296296

297297
&:hover {
298-
background: var(--ty-calendar-panel-item-hover-bg);
298+
background: var(--ty-calendar-panel-item-bg-hover);
299299
}
300300

301301
&_selected {
302-
background: var(--ty-calendar-panel-item-selected-bg);
303-
color: var(--ty-calendar-panel-item-selected-color);
302+
background: var(--ty-calendar-panel-item-bg-selected);
303+
color: var(--ty-calendar-panel-item-color-selected);
304304

305305
&:hover {
306-
background: var(--ty-calendar-panel-item-selected-hover-bg);
306+
background: var(--ty-calendar-panel-item-bg-selected-hover);
307307
}
308308
}
309309
}
@@ -338,15 +338,15 @@
338338
font-size: var(--ty-calendar-decade-font-size);
339339

340340
&:hover {
341-
background: var(--ty-calendar-panel-item-hover-bg);
341+
background: var(--ty-calendar-panel-item-bg-hover);
342342
}
343343

344344
&_selected {
345-
background: var(--ty-calendar-panel-item-selected-bg);
346-
color: var(--ty-calendar-panel-item-selected-color);
345+
background: var(--ty-calendar-panel-item-bg-selected);
346+
color: var(--ty-calendar-panel-item-color-selected);
347347

348348
&:hover {
349-
background: var(--ty-calendar-panel-item-selected-hover-bg);
349+
background: var(--ty-calendar-panel-item-bg-selected-hover);
350350
}
351351
}
352352

@@ -386,11 +386,11 @@
386386

387387
&:hover {
388388
color: var(--ty-calendar-today-color-hover);
389-
background: var(--ty-calendar-today-hover-bg);
389+
background: var(--ty-calendar-today-bg-hover);
390390
}
391391

392392
&:active {
393-
background: var(--ty-calendar-today-active-bg);
393+
background: var(--ty-calendar-today-bg-active);
394394
}
395395

396396
&:focus-visible {

‎packages/react/src/carousel/style/index.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ $carousel-prefix: #{$prefix}-carousel;
6666
outline: none;
6767

6868
&:hover {
69-
background: var(--ty-carousel-arrow-hover-bg);
69+
background: var(--ty-carousel-arrow-bg-hover);
7070
}
7171

7272
&_prev {
@@ -136,12 +136,12 @@ $carousel-prefix: #{$prefix}-carousel;
136136
}
137137

138138
&:hover {
139-
background: var(--ty-carousel-dot-hover-bg);
139+
background: var(--ty-carousel-dot-bg-hover);
140140
}
141141

142142
&_active {
143143
width: var(--ty-carousel-dot-width-active);
144-
background: var(--ty-carousel-dot-active-bg);
144+
background: var(--ty-carousel-dot-bg-active);
145145
}
146146
}
147147

‎packages/react/src/cascader/style/index.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,12 +155,12 @@
155155
&_active {
156156
color: var(--ty-cascader-option-color-active);
157157
font-weight: var(--ty-cascader-option-font-weight-active);
158-
background: var(--ty-cascader-selected-bg);
158+
background: var(--ty-cascader-bg-selected);
159159
}
160160

161161
&_disabled {
162162
cursor: not-allowed;
163-
opacity: var(--ty-cascader-menu-item-disabled-opacity);
163+
opacity: var(--ty-cascader-menu-item-opacity-disabled);
164164
}
165165
}
166166

‎packages/react/src/collapse/style/index.scss‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,22 @@
66
--ty-collapse-borderless-divider-color: var(--ty-color-border-secondary);
77
--ty-collapse-radius: var(--ty-border-radius);
88
--ty-collapse-header-bg: transparent;
9-
--ty-collapse-header-hover-bg: var(--ty-color-fill);
10-
--ty-collapse-header-active-bg: var(--ty-color-fill);
11-
--ty-collapse-header-disabled-bg: transparent;
9+
--ty-collapse-header-bg-hover: var(--ty-color-fill);
10+
--ty-collapse-header-bg-active: var(--ty-color-fill);
11+
--ty-collapse-header-bg-disabled: transparent;
1212
--ty-collapse-header-color: var(--ty-color-text);
13-
--ty-collapse-header-disabled-color: var(--ty-color-text-quaternary);
13+
--ty-collapse-header-color-disabled: var(--ty-color-text-quaternary);
1414
--ty-collapse-header-min-height: 44px;
1515
--ty-collapse-header-padding-inline: 16px;
1616
--ty-collapse-header-padding-block: 14px;
1717
--ty-collapse-header-gap: 12px;
1818
--ty-collapse-icon-color: currentcolor;
19-
--ty-collapse-icon-active-color: currentcolor;
20-
--ty-collapse-icon-disabled-color: var(--ty-color-text-quaternary);
19+
--ty-collapse-icon-color-active: currentcolor;
20+
--ty-collapse-icon-color-disabled: var(--ty-color-text-quaternary);
2121
--ty-collapse-icon-slot-size: 20px;
2222
--ty-collapse-icon-size: 10px;
2323
--ty-collapse-extra-color: var(--ty-color-text-secondary);
24-
--ty-collapse-extra-disabled-color: var(--ty-color-text-quaternary);
24+
--ty-collapse-extra-color-disabled: var(--ty-color-text-quaternary);
2525
--ty-collapse-extra-gap: 8px;
2626
--ty-collapse-extra-font-size: 12px;
2727
--ty-collapse-body-bg: var(--ty-color-bg-container);
@@ -54,20 +54,20 @@
5454
&_disabled {
5555
.#{$prefix}-collapse-item__header {
5656
cursor: not-allowed;
57-
background: var(--ty-collapse-header-disabled-bg);
57+
background: var(--ty-collapse-header-bg-disabled);
5858

5959
&:hover {
60-
background: var(--ty-collapse-header-disabled-bg);
60+
background: var(--ty-collapse-header-bg-disabled);
6161
}
6262
}
6363

6464
.#{$prefix}-collapse-item__label {
65-
color: var(--ty-collapse-header-disabled-color);
65+
color: var(--ty-collapse-header-color-disabled);
6666
}
6767

6868
.#{$prefix}-collapse-item__arrow,
6969
.#{$prefix}-collapse-item__extra {
70-
color: var(--ty-collapse-icon-disabled-color);
70+
color: var(--ty-collapse-icon-color-disabled);
7171
}
7272
}
7373

@@ -84,12 +84,12 @@
8484
color var(--ty-collapse-motion-duration) var(--ty-collapse-motion-easing);
8585

8686
&:hover {
87-
background: var(--ty-collapse-header-hover-bg);
87+
background: var(--ty-collapse-header-bg-hover);
8888
}
8989
}
9090

9191
&_active > .#{$prefix}-collapse-item__header {
92-
background: var(--ty-collapse-header-active-bg);
92+
background: var(--ty-collapse-header-bg-active);
9393
}
9494

9595
&__toggle {
@@ -156,7 +156,7 @@
156156
transition: transform var(--ty-collapse-motion-duration) var(--ty-collapse-motion-easing);
157157

158158
&_active {
159-
color: var(--ty-collapse-icon-active-color);
159+
color: var(--ty-collapse-icon-color-active);
160160
transform: rotate(0deg);
161161
}
162162
}

‎packages/react/src/color-picker/style/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@
190190
transition: transform var(--ty-color-picker-preset-transition-duration);
191191

192192
&:hover {
193-
transform: scale(var(--ty-color-picker-preset-hover-scale));
193+
transform: scale(var(--ty-color-picker-preset-scale-hover));
194194
}
195195
}
196196
}

0 commit comments

Comments
 (0)