From df19449ff771c7d1ec45040f831afbd0bb7b7953 Mon Sep 17 00:00:00 2001 From: wangdicoder Date: Sun, 26 Apr 2026 20:36:18 +1000 Subject: [PATCH] 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) --- .changeset/token-axis-naming-convention.md | 22 ++ .../react/src/auto-complete/style/index.scss | 4 +- packages/react/src/calendar/style/index.scss | 44 +-- packages/react/src/carousel/style/index.scss | 6 +- packages/react/src/cascader/style/index.scss | 4 +- packages/react/src/collapse/style/index.scss | 28 +- .../react/src/color-picker/style/index.scss | 2 +- .../react/src/date-picker/style/index.scss | 36 +- .../react/src/descriptions/style/index.scss | 14 +- packages/react/src/dropdown/style/index.scss | 2 +- .../react/src/input-number/style/index.scss | 2 +- packages/react/src/menu/style/_item.scss | 2 +- .../react/src/menu/style/_mode-popup.scss | 4 +- packages/react/src/menu/style/_tokens.scss | 6 +- .../react/src/native-select/style/index.scss | 4 +- .../react/src/pagination/style/index.scss | 6 +- .../react/src/quick-actions/style/index.scss | 4 +- packages/react/src/select/style/index.scss | 10 +- packages/react/src/slider/style/index.scss | 6 +- packages/react/src/style/_constants.scss | 18 +- packages/react/src/switch/style/index.scss | 2 +- packages/react/src/table/style/index.scss | 6 +- packages/react/src/tabs/style/index.scss | 14 +- .../react/src/time-picker/style/index.scss | 2 +- packages/react/src/transfer/style/index.scss | 2 +- packages/react/src/tree/style/index.scss | 4 +- packages/react/src/upload/style/index.scss | 4 +- packages/tokens/REGISTRY_SPEC.md | 4 + .../tokens/runtime/compile-brand-theme.cjs | 156 ++++----- .../tokens/runtime/compile-brand-theme.mjs | 156 ++++----- packages/tokens/scripts/build-runtime.js | 71 ++++ packages/tokens/source/components/anchor.json | 2 +- .../source/components/auto-complete.json | 4 +- packages/tokens/source/components/button.json | 322 +++++++++--------- .../tokens/source/components/calendar.json | 32 +- .../tokens/source/components/carousel.json | 10 +- .../tokens/source/components/cascader.json | 16 +- .../tokens/source/components/collapse.json | 14 +- .../source/components/color-picker.json | 6 +- .../tokens/source/components/date-picker.json | 26 +- .../source/components/descriptions.json | 12 +- .../tokens/source/components/dropdown.json | 2 +- packages/tokens/source/components/form.json | 2 +- .../source/components/input-number.json | 4 +- packages/tokens/source/components/input.json | 18 +- packages/tokens/source/components/list.json | 2 +- packages/tokens/source/components/menu.json | 42 +-- .../source/components/native-select.json | 18 +- .../source/components/notification.json | 2 +- .../tokens/source/components/pagination.json | 8 +- packages/tokens/source/components/picker.json | 12 +- .../source/components/quick-actions.json | 6 +- .../tokens/source/components/segmented.json | 20 +- packages/tokens/source/components/select.json | 14 +- packages/tokens/source/components/slider.json | 8 +- packages/tokens/source/components/split.json | 6 +- packages/tokens/source/components/switch.json | 2 +- packages/tokens/source/components/table.json | 6 +- packages/tokens/source/components/tabs.json | 20 +- packages/tokens/source/components/tag.json | 2 +- .../tokens/source/components/time-picker.json | 10 +- packages/tokens/source/components/tour.json | 2 +- .../tokens/source/components/transfer.json | 2 +- packages/tokens/source/components/tree.json | 2 +- packages/tokens/source/components/upload.json | 6 +- .../runtime/compile-brand-theme.source.js | 156 ++++----- packages/tokens/source/themes/dark.json | 90 ++--- 67 files changed, 824 insertions(+), 727 deletions(-) create mode 100644 .changeset/token-axis-naming-convention.md diff --git a/.changeset/token-axis-naming-convention.md b/.changeset/token-axis-naming-convention.md new file mode 100644 index 000000000..8ba9e9d8e --- /dev/null +++ b/.changeset/token-axis-naming-convention.md @@ -0,0 +1,22 @@ +--- +"@tiny-design/tokens": major +"@tiny-design/react": major +--- + +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. + +**Breaking changes** + +- 330 component token keys renamed in `@tiny-design/tokens`. Examples: + - `button.font-size-sm` → `button.font-size.sm` + - `button.solid.primary.bg-hover` → `button.solid.primary.bg.hover` + - `pagination.disabled-bg` → `pagination.bg.disabled` + - `auto-complete.option-active-bg` → `auto-complete.option.bg.active` + - `descriptions.lg-padding-hr` → `descriptions.padding-hr.lg` + - `date-picker.cell-selected-hover-bg` → `date-picker.cell.bg.selected-hover` +- 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. +- `tokens.components` keys in custom theme JSON documents must be migrated to the new names. + +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. + +The token build now enforces this naming rule and fails on regressions. See `packages/tokens/REGISTRY_SPEC.md` for the full convention. diff --git a/packages/react/src/auto-complete/style/index.scss b/packages/react/src/auto-complete/style/index.scss index 006146084..d958477e7 100644 --- a/packages/react/src/auto-complete/style/index.scss +++ b/packages/react/src/auto-complete/style/index.scss @@ -47,11 +47,11 @@ transition: background-color 0.2s; &_active { - background-color: var(--ty-auto-complete-option-active-bg); + background-color: var(--ty-auto-complete-option-bg-active); } &_disabled { cursor: not-allowed; - opacity: var(--ty-auto-complete-option-disabled-opacity); + opacity: var(--ty-auto-complete-option-opacity-disabled); } } diff --git a/packages/react/src/calendar/style/index.scss b/packages/react/src/calendar/style/index.scss index 05abe2d74..9194619f4 100644 --- a/packages/react/src/calendar/style/index.scss +++ b/packages/react/src/calendar/style/index.scss @@ -48,7 +48,7 @@ &:hover:not(&_disabled) { color: var(--ty-calendar-header-action-color-hover); - background: var(--ty-calendar-header-action-hover-bg); + background: var(--ty-calendar-header-action-bg-hover); } &:focus-visible { @@ -92,7 +92,7 @@ &:hover { color: var(--ty-calendar-header-label-color-hover); - background: var(--ty-calendar-header-label-hover-bg); + background: var(--ty-calendar-header-label-bg-hover); } &:focus-visible { @@ -152,17 +152,17 @@ color: var(--ty-calendar-cell-color-muted); .#{$prefix}-calendar__cell-inner { - background: var(--ty-calendar-cell-disabled-bg); + background: var(--ty-calendar-cell-bg-disabled); } } &:not(&_disabled):hover .#{$prefix}-calendar__cell-inner { - background: var(--ty-calendar-cell-hover-bg); + background: var(--ty-calendar-cell-bg-hover); } &_selected:not(&_disabled):hover .#{$prefix}-calendar__cell-inner { - background: var(--ty-calendar-cell-selected-bg); + background: var(--ty-calendar-cell-bg-selected); } &_in-view:not(&_disabled) { @@ -183,8 +183,8 @@ } &_selected .#{$prefix}-calendar__cell-inner { - background: var(--ty-calendar-cell-selected-bg); - color: var(--ty-calendar-cell-selected-color); + background: var(--ty-calendar-cell-bg-selected); + color: var(--ty-calendar-cell-color-selected); border-radius: var(--ty-calendar-radius); } @@ -204,8 +204,8 @@ } &_range-start .#{$prefix}-calendar__cell-inner { - background: var(--ty-calendar-cell-selected-bg); - color: var(--ty-calendar-cell-selected-color); + background: var(--ty-calendar-cell-bg-selected); + color: var(--ty-calendar-cell-color-selected); border-radius: var(--ty-calendar-radius); } @@ -215,8 +215,8 @@ } &_range-end .#{$prefix}-calendar__cell-inner { - background: var(--ty-calendar-cell-selected-bg); - color: var(--ty-calendar-cell-selected-color); + background: var(--ty-calendar-cell-bg-selected); + color: var(--ty-calendar-cell-color-selected); border-radius: var(--ty-calendar-radius); } @@ -228,7 +228,7 @@ &_focused .#{$prefix}-calendar__cell-inner, &:focus-visible .#{$prefix}-calendar__cell-inner { - outline: 2px solid var(--ty-calendar-cell-focus-outline); + outline: 2px solid var(--ty-calendar-cell-outline-focus); outline-offset: 1px; } } @@ -295,15 +295,15 @@ transition: all 0.2s; &:hover { - background: var(--ty-calendar-panel-item-hover-bg); + background: var(--ty-calendar-panel-item-bg-hover); } &_selected { - background: var(--ty-calendar-panel-item-selected-bg); - color: var(--ty-calendar-panel-item-selected-color); + background: var(--ty-calendar-panel-item-bg-selected); + color: var(--ty-calendar-panel-item-color-selected); &:hover { - background: var(--ty-calendar-panel-item-selected-hover-bg); + background: var(--ty-calendar-panel-item-bg-selected-hover); } } } @@ -338,15 +338,15 @@ font-size: var(--ty-calendar-decade-font-size); &:hover { - background: var(--ty-calendar-panel-item-hover-bg); + background: var(--ty-calendar-panel-item-bg-hover); } &_selected { - background: var(--ty-calendar-panel-item-selected-bg); - color: var(--ty-calendar-panel-item-selected-color); + background: var(--ty-calendar-panel-item-bg-selected); + color: var(--ty-calendar-panel-item-color-selected); &:hover { - background: var(--ty-calendar-panel-item-selected-hover-bg); + background: var(--ty-calendar-panel-item-bg-selected-hover); } } @@ -386,11 +386,11 @@ &:hover { color: var(--ty-calendar-today-color-hover); - background: var(--ty-calendar-today-hover-bg); + background: var(--ty-calendar-today-bg-hover); } &:active { - background: var(--ty-calendar-today-active-bg); + background: var(--ty-calendar-today-bg-active); } &:focus-visible { diff --git a/packages/react/src/carousel/style/index.scss b/packages/react/src/carousel/style/index.scss index 0d3a4ef82..e9073d89d 100755 --- a/packages/react/src/carousel/style/index.scss +++ b/packages/react/src/carousel/style/index.scss @@ -66,7 +66,7 @@ $carousel-prefix: #{$prefix}-carousel; outline: none; &:hover { - background: var(--ty-carousel-arrow-hover-bg); + background: var(--ty-carousel-arrow-bg-hover); } &_prev { @@ -136,12 +136,12 @@ $carousel-prefix: #{$prefix}-carousel; } &:hover { - background: var(--ty-carousel-dot-hover-bg); + background: var(--ty-carousel-dot-bg-hover); } &_active { width: var(--ty-carousel-dot-width-active); - background: var(--ty-carousel-dot-active-bg); + background: var(--ty-carousel-dot-bg-active); } } diff --git a/packages/react/src/cascader/style/index.scss b/packages/react/src/cascader/style/index.scss index 2de773b25..6096e6a56 100644 --- a/packages/react/src/cascader/style/index.scss +++ b/packages/react/src/cascader/style/index.scss @@ -155,12 +155,12 @@ &_active { color: var(--ty-cascader-option-color-active); font-weight: var(--ty-cascader-option-font-weight-active); - background: var(--ty-cascader-selected-bg); + background: var(--ty-cascader-bg-selected); } &_disabled { cursor: not-allowed; - opacity: var(--ty-cascader-menu-item-disabled-opacity); + opacity: var(--ty-cascader-menu-item-opacity-disabled); } } diff --git a/packages/react/src/collapse/style/index.scss b/packages/react/src/collapse/style/index.scss index 973c60200..4e83361b8 100644 --- a/packages/react/src/collapse/style/index.scss +++ b/packages/react/src/collapse/style/index.scss @@ -6,22 +6,22 @@ --ty-collapse-borderless-divider-color: var(--ty-color-border-secondary); --ty-collapse-radius: var(--ty-border-radius); --ty-collapse-header-bg: transparent; - --ty-collapse-header-hover-bg: var(--ty-color-fill); - --ty-collapse-header-active-bg: var(--ty-color-fill); - --ty-collapse-header-disabled-bg: transparent; + --ty-collapse-header-bg-hover: var(--ty-color-fill); + --ty-collapse-header-bg-active: var(--ty-color-fill); + --ty-collapse-header-bg-disabled: transparent; --ty-collapse-header-color: var(--ty-color-text); - --ty-collapse-header-disabled-color: var(--ty-color-text-quaternary); + --ty-collapse-header-color-disabled: var(--ty-color-text-quaternary); --ty-collapse-header-min-height: 44px; --ty-collapse-header-padding-inline: 16px; --ty-collapse-header-padding-block: 14px; --ty-collapse-header-gap: 12px; --ty-collapse-icon-color: currentcolor; - --ty-collapse-icon-active-color: currentcolor; - --ty-collapse-icon-disabled-color: var(--ty-color-text-quaternary); + --ty-collapse-icon-color-active: currentcolor; + --ty-collapse-icon-color-disabled: var(--ty-color-text-quaternary); --ty-collapse-icon-slot-size: 20px; --ty-collapse-icon-size: 10px; --ty-collapse-extra-color: var(--ty-color-text-secondary); - --ty-collapse-extra-disabled-color: var(--ty-color-text-quaternary); + --ty-collapse-extra-color-disabled: var(--ty-color-text-quaternary); --ty-collapse-extra-gap: 8px; --ty-collapse-extra-font-size: 12px; --ty-collapse-body-bg: var(--ty-color-bg-container); @@ -54,20 +54,20 @@ &_disabled { .#{$prefix}-collapse-item__header { cursor: not-allowed; - background: var(--ty-collapse-header-disabled-bg); + background: var(--ty-collapse-header-bg-disabled); &:hover { - background: var(--ty-collapse-header-disabled-bg); + background: var(--ty-collapse-header-bg-disabled); } } .#{$prefix}-collapse-item__label { - color: var(--ty-collapse-header-disabled-color); + color: var(--ty-collapse-header-color-disabled); } .#{$prefix}-collapse-item__arrow, .#{$prefix}-collapse-item__extra { - color: var(--ty-collapse-icon-disabled-color); + color: var(--ty-collapse-icon-color-disabled); } } @@ -84,12 +84,12 @@ color var(--ty-collapse-motion-duration) var(--ty-collapse-motion-easing); &:hover { - background: var(--ty-collapse-header-hover-bg); + background: var(--ty-collapse-header-bg-hover); } } &_active > .#{$prefix}-collapse-item__header { - background: var(--ty-collapse-header-active-bg); + background: var(--ty-collapse-header-bg-active); } &__toggle { @@ -156,7 +156,7 @@ transition: transform var(--ty-collapse-motion-duration) var(--ty-collapse-motion-easing); &_active { - color: var(--ty-collapse-icon-active-color); + color: var(--ty-collapse-icon-color-active); transform: rotate(0deg); } } diff --git a/packages/react/src/color-picker/style/index.scss b/packages/react/src/color-picker/style/index.scss index 1da184716..ca870e66d 100644 --- a/packages/react/src/color-picker/style/index.scss +++ b/packages/react/src/color-picker/style/index.scss @@ -190,7 +190,7 @@ transition: transform var(--ty-color-picker-preset-transition-duration); &:hover { - transform: scale(var(--ty-color-picker-preset-hover-scale)); + transform: scale(var(--ty-color-picker-preset-scale-hover)); } } } diff --git a/packages/react/src/date-picker/style/index.scss b/packages/react/src/date-picker/style/index.scss index b62fbd1c5..129b146b2 100755 --- a/packages/react/src/date-picker/style/index.scss +++ b/packages/react/src/date-picker/style/index.scss @@ -165,7 +165,7 @@ $dp: #{$prefix}-date-picker; &:hover { color: var(--ty-date-picker-header-button-color-hover); - background: var(--ty-date-picker-header-action-hover-bg); + background: var(--ty-date-picker-header-action-bg-hover); } &:focus-visible { @@ -203,7 +203,7 @@ $dp: #{$prefix}-date-picker; &:hover { color: var(--ty-date-picker-header-button-color-hover); - background: var(--ty-date-picker-header-action-hover-bg); + background: var(--ty-date-picker-header-action-bg-hover); } &:focus-visible { @@ -258,7 +258,7 @@ $dp: #{$prefix}-date-picker; } &__cell:hover &__cell-inner { - background: var(--ty-picker-cell-hover-bg); + background: var(--ty-picker-cell-bg-hover); } &__cell_today &__cell-inner { @@ -267,13 +267,13 @@ $dp: #{$prefix}-date-picker; } &__cell_selected &__cell-inner { - background: var(--ty-date-picker-cell-selected-bg); - color: var(--ty-date-picker-cell-selected-color); + background: var(--ty-date-picker-cell-bg-selected); + color: var(--ty-date-picker-cell-color-selected); font-weight: 500; } &__cell_selected:hover &__cell-inner { - background: var(--ty-date-picker-cell-selected-hover-bg); + background: var(--ty-date-picker-cell-bg-selected-hover); } &__cell_in-range, @@ -288,8 +288,8 @@ $dp: #{$prefix}-date-picker; &__cell_range-start &__cell-inner, &__cell_range-end &__cell-inner { - background: var(--ty-date-picker-cell-selected-bg); - color: var(--ty-date-picker-cell-selected-color); + background: var(--ty-date-picker-cell-bg-selected); + color: var(--ty-date-picker-cell-color-selected); font-weight: 500; } @@ -303,17 +303,17 @@ $dp: #{$prefix}-date-picker; &__cell_range-end.#{$dp}__cell_in-preview-range &__cell-inner, &__cell_range-start.#{$dp}__cell_in-range &__cell-inner, &__cell_range-end.#{$dp}__cell_in-range &__cell-inner { - background: var(--ty-date-picker-cell-selected-bg); - color: var(--ty-date-picker-cell-selected-color); + background: var(--ty-date-picker-cell-bg-selected); + color: var(--ty-date-picker-cell-color-selected); } &__cell_disabled &__cell-inner { color: var(--ty-date-picker-cell-color-muted); - background: var(--ty-date-picker-cell-disabled-bg); + background: var(--ty-date-picker-cell-bg-disabled); } &__cell_disabled:hover &__cell-inner { - background: var(--ty-date-picker-cell-disabled-bg); + background: var(--ty-date-picker-cell-bg-disabled); } &__cell_dim &__cell-inner { @@ -350,7 +350,7 @@ $dp: #{$prefix}-date-picker; &__month-cell:hover &__month-cell-inner, &__year-cell:hover &__year-cell-inner { - background: var(--ty-date-picker-panel-item-hover-bg); + background: var(--ty-date-picker-panel-item-bg-hover); } &__month-cell.#{$dp}__cell_dim &__month-cell-inner, @@ -368,14 +368,14 @@ $dp: #{$prefix}-date-picker; &__month-cell.#{$dp}__cell_selected &__month-cell-inner, &__year-cell.#{$dp}__cell_selected &__year-cell-inner { - background: var(--ty-date-picker-panel-item-selected-bg); - color: var(--ty-date-picker-panel-item-selected-color); + background: var(--ty-date-picker-panel-item-bg-selected); + color: var(--ty-date-picker-panel-item-color-selected); font-weight: 600; } &__month-cell.#{$dp}__cell_selected:hover &__month-cell-inner, &__year-cell.#{$dp}__cell_selected:hover &__year-cell-inner { - background: var(--ty-date-picker-panel-item-selected-hover-bg); + background: var(--ty-date-picker-panel-item-bg-selected-hover); } &__month-cell.#{$dp}__cell_selected.#{$dp}__cell_today &__month-cell-inner, @@ -413,11 +413,11 @@ $dp: #{$prefix}-date-picker; &:hover { color: var(--ty-date-picker-today-color-hover); - background: var(--ty-date-picker-today-hover-bg); + background: var(--ty-date-picker-today-bg-hover); } &:active { - background: var(--ty-date-picker-today-active-bg); + background: var(--ty-date-picker-today-bg-active); } &:focus-visible { diff --git a/packages/react/src/descriptions/style/index.scss b/packages/react/src/descriptions/style/index.scss index af4e94c50..f7d9e3fbe 100644 --- a/packages/react/src/descriptions/style/index.scss +++ b/packages/react/src/descriptions/style/index.scss @@ -141,7 +141,7 @@ } .#{$prefix}-descriptions__cell { - padding: var(--ty-descriptions-md-padding-vt) var(--ty-descriptions-md-padding-hr); + padding: var(--ty-descriptions-padding-vt-md) var(--ty-descriptions-padding-hr-md); border-right: 1px solid var(--ty-descriptions-border); } @@ -189,36 +189,36 @@ .#{$prefix}-descriptions__list-item { gap: 8px 12px; - padding-bottom: var(--ty-descriptions-sm-padding-vt); + padding-bottom: var(--ty-descriptions-padding-vt-sm); } &.#{$prefix}-descriptions_bordered.#{$prefix}-descriptions_table { .#{$prefix}-descriptions__cell { - padding: var(--ty-descriptions-sm-padding-vt) var(--ty-descriptions-sm-padding-hr); + padding: var(--ty-descriptions-padding-vt-sm) var(--ty-descriptions-padding-hr-sm); } } } &_md { .#{$prefix}-descriptions__list-item { - padding-bottom: var(--ty-descriptions-md-padding-vt); + padding-bottom: var(--ty-descriptions-padding-vt-md); } &.#{$prefix}-descriptions_bordered.#{$prefix}-descriptions_table { .#{$prefix}-descriptions__cell { - padding: var(--ty-descriptions-md-padding-vt) var(--ty-descriptions-md-padding-hr); + padding: var(--ty-descriptions-padding-vt-md) var(--ty-descriptions-padding-hr-md); } } } &_lg { .#{$prefix}-descriptions__list-item { - padding-bottom: var(--ty-descriptions-lg-padding-vt); + padding-bottom: var(--ty-descriptions-padding-vt-lg); } &.#{$prefix}-descriptions_bordered.#{$prefix}-descriptions_table { .#{$prefix}-descriptions__cell { - padding: var(--ty-descriptions-lg-padding-vt) var(--ty-descriptions-lg-padding-hr); + padding: var(--ty-descriptions-padding-vt-lg) var(--ty-descriptions-padding-hr-lg); } } } diff --git a/packages/react/src/dropdown/style/index.scss b/packages/react/src/dropdown/style/index.scss index bd2890313..317eedce7 100644 --- a/packages/react/src/dropdown/style/index.scss +++ b/packages/react/src/dropdown/style/index.scss @@ -8,7 +8,7 @@ --_menu-overlay-item-color: var(--ty-dropdown-item-color); --_menu-item-text-hover: var(--ty-dropdown-item-color); --_menu-item-text-open: var(--ty-dropdown-item-color); - --_menu-overlay-item-hover-bg: var(--ty-dropdown-item-hover-bg); + --_menu-overlay-item-hover-bg: var(--ty-dropdown-item-bg-hover); --_menu-popup-item-padding: var(--ty-dropdown-item-padding); padding: var(--ty-dropdown-menu-padding); diff --git a/packages/react/src/input-number/style/index.scss b/packages/react/src/input-number/style/index.scss index 7fda8f44b..d194e0807 100755 --- a/packages/react/src/input-number/style/index.scss +++ b/packages/react/src/input-number/style/index.scss @@ -67,7 +67,7 @@ } &:active { - background-color: var(--ty-input-number-control-active-bg); + background-color: var(--ty-input-number-control-bg-active); } } diff --git a/packages/react/src/menu/style/_item.scss b/packages/react/src/menu/style/_item.scss index 50332ac4f..71ca739c7 100644 --- a/packages/react/src/menu/style/_item.scss +++ b/packages/react/src/menu/style/_item.scss @@ -55,7 +55,7 @@ &_disabled { color: var(--_menu-text-color-disabled) !important; - opacity: var(--ty-menu-disabled-opacity, 0.55); + opacity: var(--ty-menu-opacity-disabled, 0.55); cursor: not-allowed; } diff --git a/packages/react/src/menu/style/_mode-popup.scss b/packages/react/src/menu/style/_mode-popup.scss index 3a95e0c85..4d42e4b93 100644 --- a/packages/react/src/menu/style/_mode-popup.scss +++ b/packages/react/src/menu/style/_mode-popup.scss @@ -136,7 +136,7 @@ --_menu-popup-item-padding: var(--ty-menu-popup-item-padding, 8px 15px); --_menu-overlay-item-color: var(--ty-menu-overlay-item-color, var(--ty-popup-color-light, var(--ty-color-text))); --ty-menu-overlay-item-selected-color: var(--ty-menu-color-selected, var(--ty-color-primary)); - --_menu-overlay-item-hover-bg: var(--ty-menu-overlay-item-hover-bg, var(--ty-color-bg-spotlight)); + --_menu-overlay-item-hover-bg: var(--ty-menu-overlay-item-bg-hover, var(--ty-color-bg-spotlight)); --_menu-group-title-padding: var(--ty-menu-group-title-padding, 8px 10px); --_menu-popup-shadow: var(--ty-menu-popup-shadow, var(--ty-shadow-popup)); --_menu-popup-border: var(--ty-menu-popup-border, transparent); @@ -153,7 +153,7 @@ --ty-menu-dark-color-selected, var(--ty-color-primary-hover, var(--ty-color-primary)) ); - --_menu-overlay-item-hover-bg: var(--ty-menu-dark-overlay-item-hover-bg, var(--ty-color-bg-spotlight)); + --_menu-overlay-item-hover-bg: var(--ty-menu-dark-overlay-item-bg-hover, var(--ty-color-bg-spotlight)); --_menu-overlay-group-title-color: var(--ty-menu-dark-group-title-color, var(--_menu-group-title-color)); background: var(--_menu-popup-bg); diff --git a/packages/react/src/menu/style/_tokens.scss b/packages/react/src/menu/style/_tokens.scss index f95250797..f91349ce7 100644 --- a/packages/react/src/menu/style/_tokens.scss +++ b/packages/react/src/menu/style/_tokens.scss @@ -38,7 +38,7 @@ --_menu-popup-item-gap: var(--ty-menu-popup-item-gap, 0); --_menu-popup-group-item-indent: var(--ty-menu-popup-group-item-indent, 30px); --_menu-overlay-item-color: var(--ty-menu-overlay-item-color, var(--ty-color-text)); - --_menu-overlay-item-hover-bg: var(--ty-menu-overlay-item-hover-bg, var(--ty-color-bg-spotlight)); + --_menu-overlay-item-hover-bg: var(--ty-menu-overlay-item-bg-hover, var(--ty-color-bg-spotlight)); --_menu-overlay-group-title-color: var(--ty-menu-overlay-group-title-color, var(--_menu-group-title-color)); --_menu-item-text: var(--ty-menu-color, var(--ty-color-text-secondary)); --_menu-item-bg: transparent; @@ -84,7 +84,7 @@ --_menu-popup-bg: var(--ty-menu-light-popup-bg, var(--ty-menu-popup-bg, #fff)); --_menu-popup-border: var(--ty-menu-light-popup-border, var(--ty-menu-popup-border, transparent)); --_menu-overlay-item-color: var(--ty-menu-light-overlay-item-color, var(--ty-menu-light-color, var(--ty-color-text))); - --_menu-overlay-item-hover-bg: var(--ty-menu-light-overlay-item-hover-bg, var(--ty-color-bg-spotlight)); + --_menu-overlay-item-hover-bg: var(--ty-menu-light-overlay-item-bg-hover, var(--ty-color-bg-spotlight)); } &_dark { @@ -103,7 +103,7 @@ --_menu-item-border-hover: var(--ty-menu-dark-item-border-hover, color-mix(in srgb, var(--ty-color-primary) 28%, transparent)); --_menu-item-border-selected: var(--ty-menu-dark-item-border-selected, color-mix(in srgb, var(--ty-color-primary) 56%, transparent)); --_menu-overlay-item-color: var(--ty-menu-dark-overlay-item-color, rgba(255 255 255 / 85%)); - --_menu-overlay-item-hover-bg: var(--ty-menu-dark-overlay-item-hover-bg, rgba(255 255 255 / 8%)); + --_menu-overlay-item-hover-bg: var(--ty-menu-dark-overlay-item-bg-hover, rgba(255 255 255 / 8%)); --_menu-overlay-group-title-color: var(--ty-menu-dark-group-title-color, rgba(255 255 255 / 45%)); } diff --git a/packages/react/src/native-select/style/index.scss b/packages/react/src/native-select/style/index.scss index 32ed40c17..d34e43b5d 100755 --- a/packages/react/src/native-select/style/index.scss +++ b/packages/react/src/native-select/style/index.scss @@ -35,9 +35,9 @@ $select-arrow: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcm &_disabled { background-image: url($select-arrow); background-size: 0.52em auto, 100%; - background-color: var(--ty-native-select-disabled-bg); + background-color: var(--ty-native-select-bg-disabled); opacity: var(--ty-native-select-opacity-disabled); - color: var(--ty-native-select-disabled-color); + color: var(--ty-native-select-color-disabled); cursor: not-allowed; resize: none; diff --git a/packages/react/src/pagination/style/index.scss b/packages/react/src/pagination/style/index.scss index e9e6578a1..2d8850ce0 100644 --- a/packages/react/src/pagination/style/index.scss +++ b/packages/react/src/pagination/style/index.scss @@ -22,9 +22,9 @@ &_disabled { .#{$prefix}-pagination__item_active { - background: var(--ty-pagination-disabled-active-bg, #dbdbdb) !important; + background: var(--ty-pagination-bg-disabled-active, #dbdbdb) !important; border-color: transparent !important; - color: var(--ty-pagination-disabled-active-color, #fff) !important; + color: var(--ty-pagination-color-disabled-active, #fff) !important; } } @@ -98,7 +98,7 @@ &_disabled { color: var(--ty-pagination-disabled-color-md, var(--ty-color-text-tertiary)); - background: var(--ty-pagination-disabled-bg, var(--ty-color-fill-secondary)); + background: var(--ty-pagination-bg-disabled, var(--ty-color-fill-secondary)); border-color: var(--ty-pagination-item-border-md, var(--ty-color-border)); &:hover { diff --git a/packages/react/src/quick-actions/style/index.scss b/packages/react/src/quick-actions/style/index.scss index 0bb0518e9..a4bb04760 100644 --- a/packages/react/src/quick-actions/style/index.scss +++ b/packages/react/src/quick-actions/style/index.scss @@ -49,7 +49,7 @@ } &_disabled { - opacity: var(--ty-quick-actions-disabled-opacity); + opacity: var(--ty-quick-actions-opacity-disabled); cursor: not-allowed; transform: none; } @@ -218,7 +218,7 @@ } &_disabled { - opacity: var(--ty-quick-actions-disabled-opacity); + opacity: var(--ty-quick-actions-opacity-disabled); cursor: not-allowed; transform: none; } diff --git a/packages/react/src/select/style/index.scss b/packages/react/src/select/style/index.scss index 797556247..6956f4d26 100644 --- a/packages/react/src/select/style/index.scss +++ b/packages/react/src/select/style/index.scss @@ -258,19 +258,19 @@ } &_active { - background-color: var(--ty-select-option-active-bg, var(--ty-color-fill-secondary)); + background-color: var(--ty-select-option-bg-active, var(--ty-color-fill-secondary)); } &_selected { - background-color: var(--ty-select-option-selected-bg, var(--ty-color-primary-bg)); + background-color: var(--ty-select-option-bg-selected, var(--ty-color-primary-bg)); font-weight: var(--ty-select-selected-font-weight, $select-selected-font-weight); } &_disabled { cursor: not-allowed; - background-color: var(--ty-select-option-disabled-bg, var(--ty-color-bg-container)); - color: var(--ty-select-option-disabled-color, var(--ty-color-text-quaternary)); - opacity: var(--ty-select-option-disabled-opacity); + background-color: var(--ty-select-option-bg-disabled, var(--ty-color-bg-container)); + color: var(--ty-select-option-color-disabled, var(--ty-color-text-quaternary)); + opacity: var(--ty-select-option-opacity-disabled); } } diff --git a/packages/react/src/slider/style/index.scss b/packages/react/src/slider/style/index.scss index 96d03d3e8..9613aa326 100644 --- a/packages/react/src/slider/style/index.scss +++ b/packages/react/src/slider/style/index.scss @@ -138,7 +138,7 @@ user-select: none; &_active { - color: var(--ty-slider-mark-active-color); + color: var(--ty-slider-mark-color-active); } } @@ -147,11 +147,11 @@ .#{$prefix}-slider { &__track { - background-color: var(--ty-slider-disabled-color); + background-color: var(--ty-slider-color-disabled); } &__thumb { - border-color: var(--ty-slider-disabled-color); + border-color: var(--ty-slider-color-disabled); transform: scale(1); } diff --git a/packages/react/src/style/_constants.scss b/packages/react/src/style/_constants.scss index 0ee2e7ffd..800529b1f 100644 --- a/packages/react/src/style/_constants.scss +++ b/packages/react/src/style/_constants.scss @@ -25,12 +25,12 @@ $card-body-padding: var(--ty-card-body-padding) !default; $card-footer-padding: var(--ty-card-footer-padding) !default; // Description -$description-sm-padding-vt: var(--ty-descriptions-sm-padding-vt) !default; -$description-md-padding-vt: var(--ty-descriptions-md-padding-vt) !default; -$description-lg-padding-vt: var(--ty-descriptions-lg-padding-vt) !default; -$description-sm-padding-hr: var(--ty-descriptions-sm-padding-hr) !default; -$description-md-padding-hr: var(--ty-descriptions-md-padding-hr) !default; -$description-lg-padding-hr: var(--ty-descriptions-lg-padding-hr) !default; +$description-sm-padding-vt: var(--ty-descriptions-padding-vt-sm) !default; +$description-md-padding-vt: var(--ty-descriptions-padding-vt-md) !default; +$description-lg-padding-vt: var(--ty-descriptions-padding-vt-lg) !default; +$description-sm-padding-hr: var(--ty-descriptions-padding-hr-sm) !default; +$description-md-padding-hr: var(--ty-descriptions-padding-hr-md) !default; +$description-lg-padding-hr: var(--ty-descriptions-padding-hr-lg) !default; // Input $input-sm-padding: var(--ty-input-padding-inline-sm, var(--ty-control-padding-inline-sm)) !default; @@ -41,9 +41,9 @@ $input-lg-padding: var(--ty-input-padding-inline-lg, var(--ty-control-padding-in $menu-item-padding-vertical: var(--ty-menu-item-padding-vertical, var(--ty-menu-item-padding-block)) !default; // Native Select -$native-select-sm-padding: var(--ty-native-select-sm-padding) !default; -$native-select-md-padding: var(--ty-native-select-md-padding) !default; -$native-select-lg-padding: var(--ty-native-select-lg-padding) !default; +$native-select-sm-padding: var(--ty-native-select-padding-sm) !default; +$native-select-md-padding: var(--ty-native-select-padding-md) !default; +$native-select-lg-padding: var(--ty-native-select-padding-lg) !default; // Notification $notification-width: var(--ty-notification-width) !default; diff --git a/packages/react/src/switch/style/index.scss b/packages/react/src/switch/style/index.scss index 323e0e044..7359d5f93 100644 --- a/packages/react/src/switch/style/index.scss +++ b/packages/react/src/switch/style/index.scss @@ -67,7 +67,7 @@ &_disabled { cursor: not-allowed; - opacity: var(--ty-switch-disabled-opacity, 0.4); + opacity: var(--ty-switch-opacity-disabled, 0.4); } &_loading { diff --git a/packages/react/src/table/style/index.scss b/packages/react/src/table/style/index.scss index 879b99ac6..a0416a9c7 100644 --- a/packages/react/src/table/style/index.scss +++ b/packages/react/src/table/style/index.scss @@ -84,7 +84,7 @@ user-select: none; &:hover { - background: var(--ty-table-cell-sortable-hover-bg, var(--ty-table-row-hover-bg)); + background: var(--ty-table-cell-sortable-bg-hover, var(--ty-table-row-bg-hover)); } } @@ -109,11 +109,11 @@ transition: background 0.2s; &:hover { - background: var(--ty-table-row-hover-bg); + background: var(--ty-table-row-bg-hover); } &_selected { - background: var(--ty-table-row-selected-bg); + background: var(--ty-table-row-bg-selected); } } diff --git a/packages/react/src/tabs/style/index.scss b/packages/react/src/tabs/style/index.scss index b89ec5a19..de1e56a10 100644 --- a/packages/react/src/tabs/style/index.scss +++ b/packages/react/src/tabs/style/index.scss @@ -48,20 +48,20 @@ $tab-prefix: #{$prefix}-tabs; transition: color 0.3s; &:hover { - color: var(--ty-tabs-tab-hover-color, var(--ty-color-primary-text-hover)); + color: var(--ty-tabs-tab-color-hover, var(--ty-color-primary-text-hover)); } &_active { - color: var(--ty-tabs-tab-active-color, var(--ty-color-primary)); - font-weight: var(--ty-tabs-tab-active-font-weight, 500); + color: var(--ty-tabs-tab-color-active, var(--ty-color-primary)); + font-weight: var(--ty-tabs-tab-font-weight-active, 500); } &_disabled { - color: var(--ty-tabs-tab-disabled-color, var(--ty-color-text-quaternary)); + color: var(--ty-tabs-tab-color-disabled, var(--ty-color-text-quaternary)); cursor: not-allowed; &:hover { - color: var(--ty-tabs-tab-disabled-color, var(--ty-color-text-quaternary)); + color: var(--ty-tabs-tab-color-disabled, var(--ty-color-text-quaternary)); } } @@ -213,8 +213,8 @@ $tab-prefix: #{$prefix}-tabs; } &_active { - background: var(--ty-tabs-card-active-bg, var(--ty-color-bg-container)); - border-bottom-color: var(--ty-tabs-card-active-bg, var(--ty-color-bg-container)); + background: var(--ty-tabs-card-bg-active, var(--ty-color-bg-container)); + border-bottom-color: var(--ty-tabs-card-bg-active, var(--ty-color-bg-container)); } } diff --git a/packages/react/src/time-picker/style/index.scss b/packages/react/src/time-picker/style/index.scss index 031c48318..f0afe3e8a 100755 --- a/packages/react/src/time-picker/style/index.scss +++ b/packages/react/src/time-picker/style/index.scss @@ -192,7 +192,7 @@ $tp: #{$prefix}-time-picker; user-select: none; &:hover { - background: var(--ty-picker-cell-hover-bg); + background: var(--ty-picker-cell-bg-hover); } &_selected { diff --git a/packages/react/src/transfer/style/index.scss b/packages/react/src/transfer/style/index.scss index ecc934656..55145f8a2 100644 --- a/packages/react/src/transfer/style/index.scss +++ b/packages/react/src/transfer/style/index.scss @@ -78,7 +78,7 @@ transition: background-color 250ms; &:not(.#{$prefix}-checkbox_disabled):hover{ - background-color: var(--ty-transfer-item-hover-bg); + background-color: var(--ty-transfer-item-bg-hover); } } diff --git a/packages/react/src/tree/style/index.scss b/packages/react/src/tree/style/index.scss index 6d0074714..6c9ce0516 100644 --- a/packages/react/src/tree/style/index.scss +++ b/packages/react/src/tree/style/index.scss @@ -46,7 +46,7 @@ transition: background-color 250ms; &:hover { - background-color: var(--ty-tree-hover-bg); + background-color: var(--ty-tree-bg-hover); } } @@ -59,7 +59,7 @@ display: flex; &:hover { - background-color: var(--ty-tree-hover-bg); + background-color: var(--ty-tree-bg-hover); } } } diff --git a/packages/react/src/upload/style/index.scss b/packages/react/src/upload/style/index.scss index d7aa69a71..6d6ee8f99 100644 --- a/packages/react/src/upload/style/index.scss +++ b/packages/react/src/upload/style/index.scss @@ -25,7 +25,7 @@ transition: background-color var(--ty-upload-transition-duration, 300ms); &:hover { - background-color: var(--ty-upload-list-item-hover-bg, var(--ty-color-fill-secondary)); + background-color: var(--ty-upload-list-item-bg-hover, var(--ty-color-fill-secondary)); .#{$prefix}-upload { &__upload-list-item-status { @@ -99,7 +99,7 @@ &:hover:not(&_disabled), &_dragover { - background-color: var(--ty-upload-dragger-hover-bg, #efefef); + background-color: var(--ty-upload-dragger-bg-hover, #efefef); border-color: var(--ty-upload-dragger-border-hover, var(--ty-color-primary)); } diff --git a/packages/tokens/REGISTRY_SPEC.md b/packages/tokens/REGISTRY_SPEC.md index 26675a6e5..142be2873 100644 --- a/packages/tokens/REGISTRY_SPEC.md +++ b/packages/tokens/REGISTRY_SPEC.md @@ -90,6 +90,10 @@ The build step should generate: - `cssVar` must always use kebab-case. - `component` names must use full nouns such as `button`, `input`, `card`. - New entries must use the primary v2 names directly. Short prefixes like `btn`, `picker`, or `kbd` are not allowed. +- **Variant axes are dot-separated segments, not dash-joined leaves.** Sizes (`sm`, `md`, `lg`, `xs`, `xl`) and interaction states (`hover`, `active`, `focus`, `disabled`, `checked`, `selected`) must appear as their own trailing segment after a dot. Compound CSS property names (`font-size`, `padding-inline`, `line-height`) keep their internal dashes. + - Correct: `button.font-size.sm`, `button.solid.primary.bg.hover`, `checkbox.bg.checked` + - Incorrect: `button.font-size-sm`, `button.solid.primary.bg-hover`, `checkbox.bg-checked` + - The build fails on component tokens whose key ends with a dash-joined axis suffix. ## Fallback Rules diff --git a/packages/tokens/runtime/compile-brand-theme.cjs b/packages/tokens/runtime/compile-brand-theme.cjs index fc608eb6e..a9b4d3b28 100644 --- a/packages/tokens/runtime/compile-brand-theme.cjs +++ b/packages/tokens/runtime/compile-brand-theme.cjs @@ -255,45 +255,45 @@ function compileBrandTheme(seed, options) { }, components: { 'button.solid.primary.bg': fields.primary, - 'button.solid.primary.bg-hover': primaryHover, - 'button.solid.primary.bg-active': primaryActive, + 'button.solid.primary.bg.hover': primaryHover, + 'button.solid.primary.bg.active': primaryActive, 'button.solid.primary.border': fields.primary, - 'button.solid.primary.border-hover': primaryHover, - 'button.solid.primary.border-active': primaryActive, + 'button.solid.primary.border.hover': primaryHover, + 'button.solid.primary.border.active': primaryActive, 'button.solid.primary.text': fields.primaryForeground, - 'button.solid.primary.text-hover': fields.primaryForeground, - 'button.solid.primary.text-active': fields.primaryForeground, + 'button.solid.primary.text.hover': fields.primaryForeground, + 'button.solid.primary.text.active': fields.primaryForeground, 'button.solid.default.bg': fields.muted, - 'button.solid.default.bg-hover': defaultHover, - 'button.solid.default.bg-active': defaultActive, + 'button.solid.default.bg.hover': defaultHover, + 'button.solid.default.bg.active': defaultActive, 'button.solid.default.border': fields.border, - 'button.solid.default.border-hover': defaultBorderHover, - 'button.solid.default.border-active': defaultBorderActive, + 'button.solid.default.border.hover': defaultBorderHover, + 'button.solid.default.border.active': defaultBorderActive, 'button.solid.default.text': fields.baseForeground, - 'button.solid.default.text-hover': fields.baseForeground, - 'button.solid.default.text-active': fields.baseForeground, + 'button.solid.default.text.hover': fields.baseForeground, + 'button.solid.default.text.active': fields.baseForeground, 'button.outline.default.bg': fields.base, - 'button.outline.default.bg-hover': defaultHover, - 'button.outline.default.bg-active': defaultActive, + 'button.outline.default.bg.hover': defaultHover, + 'button.outline.default.bg.active': defaultActive, 'button.outline.default.border': fields.border, - 'button.outline.default.border-hover': defaultBorderHover, - 'button.outline.default.border-active': defaultBorderActive, + 'button.outline.default.border.hover': defaultBorderHover, + 'button.outline.default.border.active': defaultBorderActive, 'button.outline.default.text': fields.baseForeground, - 'button.outline.default.text-hover': fields.baseForeground, - 'button.outline.default.text-active': fields.baseForeground, + 'button.outline.default.text.hover': fields.baseForeground, + 'button.outline.default.text.active': fields.baseForeground, 'button.solid.default.shadow': fields.shadowControl, - 'button.solid.default.shadow-hover': fields.shadowControl, - 'button.solid.default.shadow-active': fields.shadowControl, + 'button.solid.default.shadow.hover': fields.shadowControl, + 'button.solid.default.shadow.active': fields.shadowControl, 'button.outline.default.shadow': fields.shadowControl, - 'button.outline.default.shadow-hover': fields.shadowControl, - 'button.outline.default.shadow-active': fields.shadowControl, + 'button.outline.default.shadow.hover': fields.shadowControl, + 'button.outline.default.shadow.active': fields.shadowControl, 'button.radius': fields.buttonRadius, 'button.height.sm': fields.buttonHeightSm, 'button.height.md': fields.buttonHeightMd, 'button.height.lg': fields.buttonHeightLg, - 'button.padding-inline-sm': fields.buttonPaddingSm, - 'button.padding-inline-md': fields.buttonPaddingMd, - 'button.padding-inline-lg': fields.buttonPaddingLg, + 'button.padding-inline.sm': fields.buttonPaddingSm, + 'button.padding-inline.md': fields.buttonPaddingMd, + 'button.padding-inline.lg': fields.buttonPaddingLg, 'card.bg': fields.card, 'card.bg.filled': fields.secondary, 'card.border': fields.border, @@ -314,9 +314,9 @@ function compileBrandTheme(seed, options) { 'input.height.sm': fields.fieldHeightSm, 'input.height.md': fields.fieldHeightMd, 'input.height.lg': fields.fieldHeightLg, - 'input.padding-inline-sm': fields.fieldPaddingSm, - 'input.padding-inline-md': fields.fieldPaddingMd, - 'input.padding-inline-lg': fields.fieldPaddingLg, + 'input.padding-inline.sm': fields.fieldPaddingSm, + 'input.padding-inline.md': fields.fieldPaddingMd, + 'input.padding-inline.lg': fields.fieldPaddingLg, 'select.bg': fields.base, 'select.color': fields.baseForeground, 'select.border': fields.input, @@ -332,14 +332,14 @@ function compileBrandTheme(seed, options) { 'select.padding-inline-start.md': fields.fieldPaddingMd, 'select.padding-inline-start.lg': fields.fieldPaddingLg, 'select.dropdown-bg': fields.popover, - 'select.option.active-bg': fields.muted, - 'select.option.selected-bg': fields.accent, + 'select.option.bg.active': fields.muted, + 'select.option.bg.selected': fields.accent, 'table.radius': fields.radius, 'picker.input-bg': fields.base, 'picker.input-border': fields.input, - 'picker.input-border-hover': fields.ring, - 'picker.input-border-focus': fields.ring, - 'picker.input-shadow-focus': controlFocusShadow, + 'picker.input-border.hover': fields.ring, + 'picker.input-border.focus': fields.ring, + 'picker.input-shadow.focus': controlFocusShadow, 'picker.input-color': fields.baseForeground, 'picker.input-color-placeholder': fields.mutedForeground, 'picker.input-color-muted': fields.mutedForeground, @@ -351,84 +351,84 @@ function compileBrandTheme(seed, options) { 'picker.dropdown-radius': fields.cardRadius, 'date-picker.header-border': fields.border, 'date-picker.header-button-color': fields.mutedForeground, - 'date-picker.header-button-color-hover': fields.primary, - 'date-picker.header-action-hover-bg': fields.muted, + 'date-picker.header-button-color.hover': fields.primary, + 'date-picker.header-action.bg.hover': fields.muted, 'date-picker.header-action-focus-ring': fields.ring, 'date-picker.today-color': fields.primary, - 'date-picker.today-color-hover': fields.primary, - 'date-picker.today-hover-bg': fields.accent, - 'date-picker.today-active-bg': fields.muted, + 'date-picker.today-color.hover': fields.primary, + 'date-picker.today.bg.hover': fields.accent, + 'date-picker.today.bg.active': fields.muted, 'date-picker.today-focus-ring': fields.ring, - 'picker.cell-hover-bg': fields.muted, - 'date-picker.cell-selected-bg': fields.primary, - 'date-picker.cell-selected-color': fields.primaryForeground, - 'date-picker.cell-selected-hover-bg': fields.primary, + 'picker.cell.bg.hover': fields.muted, + 'date-picker.cell.bg.selected': fields.primary, + 'date-picker.cell.color.selected': fields.primaryForeground, + 'date-picker.cell.bg.selected-hover': fields.primary, 'date-picker.cell-today-border': fields.primary, 'date-picker.cell-radius': fields.inputRadius, - 'date-picker.panel-item-hover-bg': fields.muted, + 'date-picker.panel-item.bg.hover': fields.muted, 'date-picker.panel-item-current-color': fields.primary, 'date-picker.panel-item-current-border': fields.primary, - 'date-picker.panel-item-selected-bg': fields.accent, - 'date-picker.panel-item-selected-color': fields.primary, - 'date-picker.panel-item-selected-hover-bg': fields.muted, + 'date-picker.panel-item.bg.selected': fields.accent, + 'date-picker.panel-item.color.selected': fields.primary, + 'date-picker.panel-item.bg.selected-hover': fields.muted, 'date-picker.range-bg': fields.accent, 'time-picker.column-border': fields.border, - 'time-picker.cell-bg-selected': fields.primary, - 'time-picker.cell-bg-selected-hover': fields.primary, + 'time-picker.cell-bg.selected': fields.primary, + 'time-picker.cell-bg.selected-hover': fields.primary, 'time-picker.ok-button-bg': fields.primary, - 'time-picker.ok-button-bg-hover': fields.primary, + 'time-picker.ok-button-bg.hover': fields.primary, 'time-picker.ok-button-color': fields.primaryForeground, 'time-picker.ok-button-radius': fields.buttonRadius, 'calendar.bg': fields.card, 'calendar.border': fields.border, 'calendar.radius': fields.cardRadius, - 'calendar.cell-hover-bg': fields.muted, + 'calendar.cell.bg.hover': fields.muted, 'calendar.header-action-color': fields.mutedForeground, - 'calendar.header-action-color-hover': fields.primary, - 'calendar.header-action-hover-bg': fields.muted, + 'calendar.header-action-color.hover': fields.primary, + 'calendar.header-action.bg.hover': fields.muted, 'calendar.header-action-focus-ring': fields.ring, 'calendar.header-label-color': fields.cardForeground, - 'calendar.header-label-color-hover': fields.primary, - 'calendar.header-label-hover-bg': fields.muted, + 'calendar.header-label-color.hover': fields.primary, + 'calendar.header-label.bg.hover': fields.muted, 'calendar.header-label-focus-ring': fields.ring, 'calendar.cell-header-color': fields.mutedForeground, 'calendar.week-number-color': fields.mutedForeground, 'calendar.cell-color': fields.cardForeground, 'calendar.cell-color-muted': fields.mutedForeground, - 'calendar.cell-disabled-bg': fields.muted, + 'calendar.cell.bg.disabled': fields.muted, 'calendar.cell-today-border': fields.primary, - 'calendar.cell-selected-bg': fields.primary, - 'calendar.cell-selected-color': fields.primaryForeground, + 'calendar.cell.bg.selected': fields.primary, + 'calendar.cell.color.selected': fields.primaryForeground, 'calendar.range-bg': fields.accent, - 'calendar.cell-focus-outline': fields.shadowFocus, + 'calendar.cell.outline.focus': fields.shadowFocus, 'calendar.cell-dot-color': fields.primary, 'calendar.panel-item-radius': fields.inputRadius, - 'calendar.panel-item-hover-bg': fields.muted, - 'calendar.panel-item-selected-color': fields.primaryForeground, - 'calendar.panel-item-selected-bg': fields.primary, - 'calendar.panel-item-selected-hover-bg': fields.primary, + 'calendar.panel-item.bg.hover': fields.muted, + 'calendar.panel-item.color.selected': fields.primaryForeground, + 'calendar.panel-item.bg.selected': fields.primary, + 'calendar.panel-item.bg.selected-hover': fields.primary, 'calendar.today-color': fields.primary, - 'calendar.today-color-hover': fields.primary, - 'calendar.today-hover-bg': fields.accent, - 'calendar.today-active-bg': fields.muted, + 'calendar.today-color.hover': fields.primary, + 'calendar.today.bg.hover': fields.accent, + 'calendar.today.bg.active': fields.muted, 'calendar.today-focus-ring': fields.ring, 'cascader.height.sm': fields.fieldHeightSm, 'cascader.height.md': fields.fieldHeightMd, 'cascader.height.lg': fields.fieldHeightLg, 'cascader.bg': fields.base, 'cascader.border': fields.input, - 'cascader.border-hover': fields.ring, - 'cascader.border-focus': fields.ring, - 'cascader.shadow-focus': controlFocusShadow, + 'cascader.border.hover': fields.ring, + 'cascader.border.focus': fields.ring, + 'cascader.shadow.focus': controlFocusShadow, 'cascader.radius': fields.inputRadius, 'cascader.padding.sm': `0 calc(${fields.fieldPaddingSm} + 20px) 0 ${fields.fieldPaddingSm}`, 'cascader.padding.md': `0 calc(${fields.fieldPaddingMd} + 20px) 0 ${fields.fieldPaddingMd}`, 'cascader.padding.lg': `0 calc(${fields.fieldPaddingLg} + 20px) 0 ${fields.fieldPaddingLg}`, 'native-select.bg': fields.base, 'native-select.border': fields.input, - 'native-select.border-hover': fields.ring, - 'native-select.border-focus': fields.ring, - 'native-select.shadow-focus': controlFocusShadow, + 'native-select.border.hover': fields.ring, + 'native-select.border.focus': fields.ring, + 'native-select.shadow.focus': controlFocusShadow, 'native-select.radius': fields.inputRadius, 'checkbox.bg': fields.base, 'checkbox.border': fields.input, @@ -451,11 +451,11 @@ function compileBrandTheme(seed, options) { 'input-number.height.md': fields.fieldHeightMd, 'input-number.height.lg': fields.fieldHeightLg, 'segmented.bg': fields.muted, - 'segmented.item-bg-hover': fields.secondary, - 'segmented.item-bg-selected': fields.card, + 'segmented.item-bg.hover': fields.secondary, + 'segmented.item-bg.selected': fields.card, 'segmented.item-color': fields.mutedForeground, - 'segmented.item-color-selected': fields.baseForeground, - 'segmented.item-shadow-focus': fields.shadowFocus, + 'segmented.item-color.selected': fields.baseForeground, + 'segmented.item-shadow.focus': fields.shadowFocus, 'segmented.radius': fields.radius, 'tag.bg': fields.secondary, 'tag.color': fields.secondaryForeground, @@ -478,9 +478,9 @@ function compileBrandTheme(seed, options) { 'table.color': fields.baseForeground, 'table.border': fields.border, 'table.header-bg': fields.secondary, - 'table.row-hover-bg': fields.muted, - 'table.cell-sortable-hover-bg': fields.muted, - 'table.row-selected-bg': toRgba(fields.primary, mode === 'dark' ? 0.22 : 0.08), + 'table.row.bg.hover': fields.muted, + 'table.cell-sortable.bg.hover': fields.muted, + 'table.row.bg.selected': toRgba(fields.primary, mode === 'dark' ? 0.22 : 0.08), 'table.sorter-icon-color': fields.mutedForeground, 'table.sorter-icon-color.active': fields.primary, 'table.empty-color': fields.mutedForeground, diff --git a/packages/tokens/runtime/compile-brand-theme.mjs b/packages/tokens/runtime/compile-brand-theme.mjs index b4d426f80..6b9f045ce 100644 --- a/packages/tokens/runtime/compile-brand-theme.mjs +++ b/packages/tokens/runtime/compile-brand-theme.mjs @@ -253,45 +253,45 @@ function compileBrandTheme(seed, options) { }, components: { 'button.solid.primary.bg': fields.primary, - 'button.solid.primary.bg-hover': primaryHover, - 'button.solid.primary.bg-active': primaryActive, + 'button.solid.primary.bg.hover': primaryHover, + 'button.solid.primary.bg.active': primaryActive, 'button.solid.primary.border': fields.primary, - 'button.solid.primary.border-hover': primaryHover, - 'button.solid.primary.border-active': primaryActive, + 'button.solid.primary.border.hover': primaryHover, + 'button.solid.primary.border.active': primaryActive, 'button.solid.primary.text': fields.primaryForeground, - 'button.solid.primary.text-hover': fields.primaryForeground, - 'button.solid.primary.text-active': fields.primaryForeground, + 'button.solid.primary.text.hover': fields.primaryForeground, + 'button.solid.primary.text.active': fields.primaryForeground, 'button.solid.default.bg': fields.muted, - 'button.solid.default.bg-hover': defaultHover, - 'button.solid.default.bg-active': defaultActive, + 'button.solid.default.bg.hover': defaultHover, + 'button.solid.default.bg.active': defaultActive, 'button.solid.default.border': fields.border, - 'button.solid.default.border-hover': defaultBorderHover, - 'button.solid.default.border-active': defaultBorderActive, + 'button.solid.default.border.hover': defaultBorderHover, + 'button.solid.default.border.active': defaultBorderActive, 'button.solid.default.text': fields.baseForeground, - 'button.solid.default.text-hover': fields.baseForeground, - 'button.solid.default.text-active': fields.baseForeground, + 'button.solid.default.text.hover': fields.baseForeground, + 'button.solid.default.text.active': fields.baseForeground, 'button.outline.default.bg': fields.base, - 'button.outline.default.bg-hover': defaultHover, - 'button.outline.default.bg-active': defaultActive, + 'button.outline.default.bg.hover': defaultHover, + 'button.outline.default.bg.active': defaultActive, 'button.outline.default.border': fields.border, - 'button.outline.default.border-hover': defaultBorderHover, - 'button.outline.default.border-active': defaultBorderActive, + 'button.outline.default.border.hover': defaultBorderHover, + 'button.outline.default.border.active': defaultBorderActive, 'button.outline.default.text': fields.baseForeground, - 'button.outline.default.text-hover': fields.baseForeground, - 'button.outline.default.text-active': fields.baseForeground, + 'button.outline.default.text.hover': fields.baseForeground, + 'button.outline.default.text.active': fields.baseForeground, 'button.solid.default.shadow': fields.shadowControl, - 'button.solid.default.shadow-hover': fields.shadowControl, - 'button.solid.default.shadow-active': fields.shadowControl, + 'button.solid.default.shadow.hover': fields.shadowControl, + 'button.solid.default.shadow.active': fields.shadowControl, 'button.outline.default.shadow': fields.shadowControl, - 'button.outline.default.shadow-hover': fields.shadowControl, - 'button.outline.default.shadow-active': fields.shadowControl, + 'button.outline.default.shadow.hover': fields.shadowControl, + 'button.outline.default.shadow.active': fields.shadowControl, 'button.radius': fields.buttonRadius, 'button.height.sm': fields.buttonHeightSm, 'button.height.md': fields.buttonHeightMd, 'button.height.lg': fields.buttonHeightLg, - 'button.padding-inline-sm': fields.buttonPaddingSm, - 'button.padding-inline-md': fields.buttonPaddingMd, - 'button.padding-inline-lg': fields.buttonPaddingLg, + 'button.padding-inline.sm': fields.buttonPaddingSm, + 'button.padding-inline.md': fields.buttonPaddingMd, + 'button.padding-inline.lg': fields.buttonPaddingLg, 'card.bg': fields.card, 'card.bg.filled': fields.secondary, 'card.border': fields.border, @@ -312,9 +312,9 @@ function compileBrandTheme(seed, options) { 'input.height.sm': fields.fieldHeightSm, 'input.height.md': fields.fieldHeightMd, 'input.height.lg': fields.fieldHeightLg, - 'input.padding-inline-sm': fields.fieldPaddingSm, - 'input.padding-inline-md': fields.fieldPaddingMd, - 'input.padding-inline-lg': fields.fieldPaddingLg, + 'input.padding-inline.sm': fields.fieldPaddingSm, + 'input.padding-inline.md': fields.fieldPaddingMd, + 'input.padding-inline.lg': fields.fieldPaddingLg, 'select.bg': fields.base, 'select.color': fields.baseForeground, 'select.border': fields.input, @@ -330,14 +330,14 @@ function compileBrandTheme(seed, options) { 'select.padding-inline-start.md': fields.fieldPaddingMd, 'select.padding-inline-start.lg': fields.fieldPaddingLg, 'select.dropdown-bg': fields.popover, - 'select.option.active-bg': fields.muted, - 'select.option.selected-bg': fields.accent, + 'select.option.bg.active': fields.muted, + 'select.option.bg.selected': fields.accent, 'table.radius': fields.radius, 'picker.input-bg': fields.base, 'picker.input-border': fields.input, - 'picker.input-border-hover': fields.ring, - 'picker.input-border-focus': fields.ring, - 'picker.input-shadow-focus': controlFocusShadow, + 'picker.input-border.hover': fields.ring, + 'picker.input-border.focus': fields.ring, + 'picker.input-shadow.focus': controlFocusShadow, 'picker.input-color': fields.baseForeground, 'picker.input-color-placeholder': fields.mutedForeground, 'picker.input-color-muted': fields.mutedForeground, @@ -349,84 +349,84 @@ function compileBrandTheme(seed, options) { 'picker.dropdown-radius': fields.cardRadius, 'date-picker.header-border': fields.border, 'date-picker.header-button-color': fields.mutedForeground, - 'date-picker.header-button-color-hover': fields.primary, - 'date-picker.header-action-hover-bg': fields.muted, + 'date-picker.header-button-color.hover': fields.primary, + 'date-picker.header-action.bg.hover': fields.muted, 'date-picker.header-action-focus-ring': fields.ring, 'date-picker.today-color': fields.primary, - 'date-picker.today-color-hover': fields.primary, - 'date-picker.today-hover-bg': fields.accent, - 'date-picker.today-active-bg': fields.muted, + 'date-picker.today-color.hover': fields.primary, + 'date-picker.today.bg.hover': fields.accent, + 'date-picker.today.bg.active': fields.muted, 'date-picker.today-focus-ring': fields.ring, - 'picker.cell-hover-bg': fields.muted, - 'date-picker.cell-selected-bg': fields.primary, - 'date-picker.cell-selected-color': fields.primaryForeground, - 'date-picker.cell-selected-hover-bg': fields.primary, + 'picker.cell.bg.hover': fields.muted, + 'date-picker.cell.bg.selected': fields.primary, + 'date-picker.cell.color.selected': fields.primaryForeground, + 'date-picker.cell.bg.selected-hover': fields.primary, 'date-picker.cell-today-border': fields.primary, 'date-picker.cell-radius': fields.inputRadius, - 'date-picker.panel-item-hover-bg': fields.muted, + 'date-picker.panel-item.bg.hover': fields.muted, 'date-picker.panel-item-current-color': fields.primary, 'date-picker.panel-item-current-border': fields.primary, - 'date-picker.panel-item-selected-bg': fields.accent, - 'date-picker.panel-item-selected-color': fields.primary, - 'date-picker.panel-item-selected-hover-bg': fields.muted, + 'date-picker.panel-item.bg.selected': fields.accent, + 'date-picker.panel-item.color.selected': fields.primary, + 'date-picker.panel-item.bg.selected-hover': fields.muted, 'date-picker.range-bg': fields.accent, 'time-picker.column-border': fields.border, - 'time-picker.cell-bg-selected': fields.primary, - 'time-picker.cell-bg-selected-hover': fields.primary, + 'time-picker.cell-bg.selected': fields.primary, + 'time-picker.cell-bg.selected-hover': fields.primary, 'time-picker.ok-button-bg': fields.primary, - 'time-picker.ok-button-bg-hover': fields.primary, + 'time-picker.ok-button-bg.hover': fields.primary, 'time-picker.ok-button-color': fields.primaryForeground, 'time-picker.ok-button-radius': fields.buttonRadius, 'calendar.bg': fields.card, 'calendar.border': fields.border, 'calendar.radius': fields.cardRadius, - 'calendar.cell-hover-bg': fields.muted, + 'calendar.cell.bg.hover': fields.muted, 'calendar.header-action-color': fields.mutedForeground, - 'calendar.header-action-color-hover': fields.primary, - 'calendar.header-action-hover-bg': fields.muted, + 'calendar.header-action-color.hover': fields.primary, + 'calendar.header-action.bg.hover': fields.muted, 'calendar.header-action-focus-ring': fields.ring, 'calendar.header-label-color': fields.cardForeground, - 'calendar.header-label-color-hover': fields.primary, - 'calendar.header-label-hover-bg': fields.muted, + 'calendar.header-label-color.hover': fields.primary, + 'calendar.header-label.bg.hover': fields.muted, 'calendar.header-label-focus-ring': fields.ring, 'calendar.cell-header-color': fields.mutedForeground, 'calendar.week-number-color': fields.mutedForeground, 'calendar.cell-color': fields.cardForeground, 'calendar.cell-color-muted': fields.mutedForeground, - 'calendar.cell-disabled-bg': fields.muted, + 'calendar.cell.bg.disabled': fields.muted, 'calendar.cell-today-border': fields.primary, - 'calendar.cell-selected-bg': fields.primary, - 'calendar.cell-selected-color': fields.primaryForeground, + 'calendar.cell.bg.selected': fields.primary, + 'calendar.cell.color.selected': fields.primaryForeground, 'calendar.range-bg': fields.accent, - 'calendar.cell-focus-outline': fields.shadowFocus, + 'calendar.cell.outline.focus': fields.shadowFocus, 'calendar.cell-dot-color': fields.primary, 'calendar.panel-item-radius': fields.inputRadius, - 'calendar.panel-item-hover-bg': fields.muted, - 'calendar.panel-item-selected-color': fields.primaryForeground, - 'calendar.panel-item-selected-bg': fields.primary, - 'calendar.panel-item-selected-hover-bg': fields.primary, + 'calendar.panel-item.bg.hover': fields.muted, + 'calendar.panel-item.color.selected': fields.primaryForeground, + 'calendar.panel-item.bg.selected': fields.primary, + 'calendar.panel-item.bg.selected-hover': fields.primary, 'calendar.today-color': fields.primary, - 'calendar.today-color-hover': fields.primary, - 'calendar.today-hover-bg': fields.accent, - 'calendar.today-active-bg': fields.muted, + 'calendar.today-color.hover': fields.primary, + 'calendar.today.bg.hover': fields.accent, + 'calendar.today.bg.active': fields.muted, 'calendar.today-focus-ring': fields.ring, 'cascader.height.sm': fields.fieldHeightSm, 'cascader.height.md': fields.fieldHeightMd, 'cascader.height.lg': fields.fieldHeightLg, 'cascader.bg': fields.base, 'cascader.border': fields.input, - 'cascader.border-hover': fields.ring, - 'cascader.border-focus': fields.ring, - 'cascader.shadow-focus': controlFocusShadow, + 'cascader.border.hover': fields.ring, + 'cascader.border.focus': fields.ring, + 'cascader.shadow.focus': controlFocusShadow, 'cascader.radius': fields.inputRadius, 'cascader.padding.sm': `0 calc(${fields.fieldPaddingSm} + 20px) 0 ${fields.fieldPaddingSm}`, 'cascader.padding.md': `0 calc(${fields.fieldPaddingMd} + 20px) 0 ${fields.fieldPaddingMd}`, 'cascader.padding.lg': `0 calc(${fields.fieldPaddingLg} + 20px) 0 ${fields.fieldPaddingLg}`, 'native-select.bg': fields.base, 'native-select.border': fields.input, - 'native-select.border-hover': fields.ring, - 'native-select.border-focus': fields.ring, - 'native-select.shadow-focus': controlFocusShadow, + 'native-select.border.hover': fields.ring, + 'native-select.border.focus': fields.ring, + 'native-select.shadow.focus': controlFocusShadow, 'native-select.radius': fields.inputRadius, 'checkbox.bg': fields.base, 'checkbox.border': fields.input, @@ -449,11 +449,11 @@ function compileBrandTheme(seed, options) { 'input-number.height.md': fields.fieldHeightMd, 'input-number.height.lg': fields.fieldHeightLg, 'segmented.bg': fields.muted, - 'segmented.item-bg-hover': fields.secondary, - 'segmented.item-bg-selected': fields.card, + 'segmented.item-bg.hover': fields.secondary, + 'segmented.item-bg.selected': fields.card, 'segmented.item-color': fields.mutedForeground, - 'segmented.item-color-selected': fields.baseForeground, - 'segmented.item-shadow-focus': fields.shadowFocus, + 'segmented.item-color.selected': fields.baseForeground, + 'segmented.item-shadow.focus': fields.shadowFocus, 'segmented.radius': fields.radius, 'tag.bg': fields.secondary, 'tag.color': fields.secondaryForeground, @@ -476,9 +476,9 @@ function compileBrandTheme(seed, options) { 'table.color': fields.baseForeground, 'table.border': fields.border, 'table.header-bg': fields.secondary, - 'table.row-hover-bg': fields.muted, - 'table.cell-sortable-hover-bg': fields.muted, - 'table.row-selected-bg': toRgba(fields.primary, mode === 'dark' ? 0.22 : 0.08), + 'table.row.bg.hover': fields.muted, + 'table.cell-sortable.bg.hover': fields.muted, + 'table.row.bg.selected': toRgba(fields.primary, mode === 'dark' ? 0.22 : 0.08), 'table.sorter-icon-color': fields.mutedForeground, 'table.sorter-icon-color.active': fields.primary, 'table.empty-color': fields.mutedForeground, diff --git a/packages/tokens/scripts/build-runtime.js b/packages/tokens/scripts/build-runtime.js index cd4c3dd14..6f38a8c27 100644 --- a/packages/tokens/scripts/build-runtime.js +++ b/packages/tokens/scripts/build-runtime.js @@ -40,6 +40,70 @@ const TOKEN_TYPE_VALUES = new Set([ ]); const TOKEN_STATUS_VALUES = new Set(['active', 'deprecated', 'internal']); const CSS_VAR_PATTERN = /^--ty-[a-z0-9]+(?:-[a-z0-9]+)*$/; +const SIZE_AXIS_VALUES = new Set(['sm', 'md', 'lg', 'xs', 'xl']); +const STATE_AXIS_VALUES = new Set(['hover', 'active', 'focus', 'disabled', 'checked', 'selected']); +const ALLOWED_LEAF_COMPOUNDS = ['focus-ring']; + +function tokenizeLeaf(leaf) { + const raw = leaf.split('-'); + const out = []; + let i = 0; + while (i < raw.length) { + let matched = false; + for (const compound of ALLOWED_LEAF_COMPOUNDS) { + const cParts = compound.split('-'); + if (cParts.every((part, k) => raw[i + k] === part)) { + out.push(compound); + i += cParts.length; + matched = true; + break; + } + } + if (!matched) { + out.push(raw[i]); + i += 1; + } + } + return out; +} + +function axisKindOfPart(part) { + if (STATE_AXIS_VALUES.has(part)) return 'state'; + if (SIZE_AXIS_VALUES.has(part)) return 'size'; + return null; +} + +function findLeafAxisViolation(key) { + const lastDot = key.lastIndexOf('.'); + const leaf = lastDot === -1 ? key : key.slice(lastDot + 1); + + const parts = tokenizeLeaf(leaf); + if (parts.length === 1) return null; + + if (parts.every((part) => axisKindOfPart(part))) return null; + + for (let i = 0; i < parts.length; i += 1) { + const kind = axisKindOfPart(parts[i]); + if (!kind) continue; + + const prev = i > 0 ? parts[i - 1] : null; + const next = i + 1 < parts.length ? parts[i + 1] : null; + const prevKind = prev ? axisKindOfPart(prev) : null; + const nextKind = next ? axisKindOfPart(next) : null; + + if (prev === null) { + return { reason: `${kind} axis "${parts[i]}" leads the leaf; properties must precede axes` }; + } + if (next !== null && !nextKind) { + return { reason: `${kind} axis "${parts[i]}" appears mid-leaf before non-axis segment "${next}"` }; + } + if (!prevKind) { + return { reason: `${kind} axis "${parts[i]}" must be a dot-separated segment, not glued by dash to "${prev}"` }; + } + } + + return null; +} const CONSUMER_FILE_EXTENSIONS = new Set(['.css', '.scss', '.ts', '.tsx']); const GENERATED_RUNTIME_HEADER = '// Generated by scripts/build-runtime.js from source/runtime/compile-brand-theme.source.js.\n' + @@ -330,6 +394,13 @@ function validateTokens(tokens, themeSchemaConfig) { errors.push(`${location} does not match the theme token key pattern.`); } + if (token.category === 'component') { + const violation = findLeafAxisViolation(token.key); + if (violation) { + errors.push(`${location} ${violation.reason}.`); + } + } + if (!('description' in token) || typeof token.description !== 'string' || token.description.trim() === '') { errors.push(`${location} must include a non-empty description.`); } diff --git a/packages/tokens/source/components/anchor.json b/packages/tokens/source/components/anchor.json index dc6c05e91..65b2c9c42 100644 --- a/packages/tokens/source/components/anchor.json +++ b/packages/tokens/source/components/anchor.json @@ -23,7 +23,7 @@ "description": "Anchor link text color.", "fallback": "--ty-color-text-secondary" }, - "anchor.link-color-active": { + "anchor.link-color.active": { "$value": "{color-primary}", "$type": "color", "description": "Anchor active link text color.", diff --git a/packages/tokens/source/components/auto-complete.json b/packages/tokens/source/components/auto-complete.json index 394a18677..4144d8d94 100644 --- a/packages/tokens/source/components/auto-complete.json +++ b/packages/tokens/source/components/auto-complete.json @@ -76,13 +76,13 @@ "description": "AutoComplete option text color.", "fallback": "--ty-color-text" }, - "auto-complete.option-active-bg": { + "auto-complete.option.bg.active": { "$value": "{color-fill-secondary}", "$type": "color", "description": "AutoComplete active option background color.", "fallback": "--ty-color-fill-secondary" }, - "auto-complete.option-disabled-opacity": { + "auto-complete.option.opacity.disabled": { "$value": "0.5", "$type": "number", "description": "AutoComplete disabled option opacity." diff --git a/packages/tokens/source/components/button.json b/packages/tokens/source/components/button.json index 58412ab26..5900439a1 100644 --- a/packages/tokens/source/components/button.json +++ b/packages/tokens/source/components/button.json @@ -50,13 +50,13 @@ "description": "solid default button shadow.", "fallback": "--ty-shadow-control" }, - "button.solid.default.shadow-hover": { + "button.solid.default.shadow.hover": { "$value": "{shadow-control}", "$type": "shadow", "description": "solid default button hover shadow.", "fallback": "--ty-shadow-control" }, - "button.solid.default.shadow-active": { + "button.solid.default.shadow.active": { "$value": "{shadow-control}", "$type": "shadow", "description": "solid default button active shadow.", @@ -68,31 +68,31 @@ "description": "outline default button shadow.", "fallback": "--ty-shadow-control" }, - "button.outline.default.shadow-hover": { + "button.outline.default.shadow.hover": { "$value": "{shadow-control}", "$type": "shadow", "description": "outline default button hover shadow.", "fallback": "--ty-shadow-control" }, - "button.outline.default.shadow-active": { + "button.outline.default.shadow.active": { "$value": "{shadow-control}", "$type": "shadow", "description": "outline default button active shadow.", "fallback": "--ty-shadow-control" }, - "button.font-size-sm": { + "button.font-size.sm": { "$value": "{control.font-size.sm}", "$type": "dimension", "description": "Small button font size.", "fallback": "--ty-font-size-sm" }, - "button.font-size-md": { + "button.font-size.md": { "$value": "{control.font-size.md}", "$type": "dimension", "description": "Medium button font size.", "fallback": "--ty-font-size-base" }, - "button.font-size-lg": { + "button.font-size.lg": { "$value": "{control.font-size.lg}", "$type": "dimension", "description": "Large button font size.", @@ -116,47 +116,47 @@ "description": "Large button height.", "fallback": "--ty-height-lg" }, - "button.padding-inline-sm": { + "button.padding-inline.sm": { "$value": "{control.padding-inline.sm}", "$type": "dimension", "description": "Small button inline padding." }, - "button.padding-inline-md": { + "button.padding-inline.md": { "$value": "15px", "$type": "dimension", "description": "Medium button inline padding." }, - "button.padding-inline-lg": { + "button.padding-inline.lg": { "$value": "20px", "$type": "dimension", "description": "Large button inline padding." }, - "button.gap-sm": { + "button.gap.sm": { "$value": "{control.gap.sm}", "$type": "dimension", "description": "Small button content gap." }, - "button.gap-md": { + "button.gap.md": { "$value": "{control.gap.md}", "$type": "dimension", "description": "Medium button content gap." }, - "button.gap-lg": { + "button.gap.lg": { "$value": "{control.gap.lg}", "$type": "dimension", "description": "Large button content gap." }, - "button.icon-size-sm": { + "button.icon-size.sm": { "$value": "14px", "$type": "dimension", "description": "Small button icon size." }, - "button.icon-size-md": { + "button.icon-size.md": { "$value": "16px", "$type": "dimension", "description": "Medium button icon size." }, - "button.icon-size-lg": { + "button.icon-size.lg": { "$value": "18px", "$type": "dimension", "description": "Large button icon size." @@ -179,7 +179,7 @@ "description": "Disabled button border color.", "fallback": "--ty-color-border" }, - "button.text-link-disabled": { + "button.text-link.disabled": { "$value": "{color-text-quaternary}", "$type": "color", "description": "Disabled link button text color.", @@ -200,32 +200,32 @@ "$type": "color", "description": "solid default button border color." }, - "button.solid.default.text-hover": { + "button.solid.default.text.hover": { "$value": "{color-primary}", "$type": "color", "description": "solid default button hover text color." }, - "button.solid.default.bg-hover": { + "button.solid.default.bg.hover": { "$value": "{color-bg-container}", "$type": "color", "description": "solid default button hover background color." }, - "button.solid.default.border-hover": { + "button.solid.default.border.hover": { "$value": "{color-primary}", "$type": "color", "description": "solid default button hover border color." }, - "button.solid.default.text-active": { + "button.solid.default.text.active": { "$value": "{color-primary}", "$type": "color", "description": "solid default button active text color." }, - "button.solid.default.bg-active": { + "button.solid.default.bg.active": { "$value": "{color-fill}", "$type": "color", "description": "solid default button active background color." }, - "button.solid.default.border-active": { + "button.solid.default.border.active": { "$value": "{color-primary}", "$type": "color", "description": "solid default button active border color." @@ -245,32 +245,32 @@ "$type": "color", "description": "outline default button border color." }, - "button.outline.default.text-hover": { + "button.outline.default.text.hover": { "$value": "{color-text}", "$type": "color", "description": "outline default button hover text color." }, - "button.outline.default.bg-hover": { + "button.outline.default.bg.hover": { "$value": "{color-fill}", "$type": "color", "description": "outline default button hover background color." }, - "button.outline.default.border-hover": { + "button.outline.default.border.hover": { "$value": "{color-border}", "$type": "color", "description": "outline default button hover border color." }, - "button.outline.default.text-active": { + "button.outline.default.text.active": { "$value": "{color-text}", "$type": "color", "description": "outline default button active text color." }, - "button.outline.default.bg-active": { + "button.outline.default.bg.active": { "$value": "{color-fill-secondary}", "$type": "color", "description": "outline default button active background color." }, - "button.outline.default.border-active": { + "button.outline.default.border.active": { "$value": "{color-border-secondary}", "$type": "color", "description": "outline default button active border color." @@ -290,32 +290,32 @@ "$type": "color", "description": "ghost default button border color." }, - "button.ghost.default.text-hover": { + "button.ghost.default.text.hover": { "$value": "{color-text}", "$type": "color", "description": "ghost default button hover text color." }, - "button.ghost.default.bg-hover": { + "button.ghost.default.bg.hover": { "$value": "{color-fill}", "$type": "color", "description": "ghost default button hover background color." }, - "button.ghost.default.border-hover": { + "button.ghost.default.border.hover": { "$value": "transparent", "$type": "color", "description": "ghost default button hover border color." }, - "button.ghost.default.text-active": { + "button.ghost.default.text.active": { "$value": "{color-text}", "$type": "color", "description": "ghost default button active text color." }, - "button.ghost.default.bg-active": { + "button.ghost.default.bg.active": { "$value": "{color-fill-secondary}", "$type": "color", "description": "ghost default button active background color." }, - "button.ghost.default.border-active": { + "button.ghost.default.border.active": { "$value": "transparent", "$type": "color", "description": "ghost default button active border color." @@ -335,32 +335,32 @@ "$type": "color", "description": "link default button border color." }, - "button.link.default.text-hover": { + "button.link.default.text.hover": { "$value": "{color-text}", "$type": "color", "description": "link default button hover text color." }, - "button.link.default.bg-hover": { + "button.link.default.bg.hover": { "$value": "transparent", "$type": "color", "description": "link default button hover background color." }, - "button.link.default.border-hover": { + "button.link.default.border.hover": { "$value": "transparent", "$type": "color", "description": "link default button hover border color." }, - "button.link.default.text-active": { + "button.link.default.text.active": { "$value": "{color-text}", "$type": "color", "description": "link default button active text color." }, - "button.link.default.bg-active": { + "button.link.default.bg.active": { "$value": "transparent", "$type": "color", "description": "link default button active background color." }, - "button.link.default.border-active": { + "button.link.default.border.active": { "$value": "transparent", "$type": "color", "description": "link default button active border color." @@ -380,32 +380,32 @@ "$type": "color", "description": "solid primary button border color." }, - "button.solid.primary.text-hover": { + "button.solid.primary.text.hover": { "$value": "#fff", "$type": "color", "description": "solid primary button hover text color." }, - "button.solid.primary.bg-hover": { + "button.solid.primary.bg.hover": { "$value": "{color-primary-hover}", "$type": "color", "description": "solid primary button hover background color." }, - "button.solid.primary.border-hover": { + "button.solid.primary.border.hover": { "$value": "{color-primary-hover}", "$type": "color", "description": "solid primary button hover border color." }, - "button.solid.primary.text-active": { + "button.solid.primary.text.active": { "$value": "#fff", "$type": "color", "description": "solid primary button active text color." }, - "button.solid.primary.bg-active": { + "button.solid.primary.bg.active": { "$value": "{color-primary-active}", "$type": "color", "description": "solid primary button active background color." }, - "button.solid.primary.border-active": { + "button.solid.primary.border.active": { "$value": "{color-primary-active}", "$type": "color", "description": "solid primary button active border color." @@ -425,32 +425,32 @@ "$type": "color", "description": "outline primary button border color." }, - "button.outline.primary.text-hover": { + "button.outline.primary.text.hover": { "$value": "{color-primary}", "$type": "color", "description": "outline primary button hover text color." }, - "button.outline.primary.bg-hover": { + "button.outline.primary.bg.hover": { "$value": "{color-primary-bg}", "$type": "color", "description": "outline primary button hover background color." }, - "button.outline.primary.border-hover": { + "button.outline.primary.border.hover": { "$value": "{color-primary-hover}", "$type": "color", "description": "outline primary button hover border color." }, - "button.outline.primary.text-active": { + "button.outline.primary.text.active": { "$value": "{color-primary}", "$type": "color", "description": "outline primary button active text color." }, - "button.outline.primary.bg-active": { + "button.outline.primary.bg.active": { "$value": "{color-primary-bg-hover}", "$type": "color", "description": "outline primary button active background color." }, - "button.outline.primary.border-active": { + "button.outline.primary.border.active": { "$value": "{color-primary-active}", "$type": "color", "description": "outline primary button active border color." @@ -470,32 +470,32 @@ "$type": "color", "description": "ghost primary button border color." }, - "button.ghost.primary.text-hover": { + "button.ghost.primary.text.hover": { "$value": "{color-primary}", "$type": "color", "description": "ghost primary button hover text color." }, - "button.ghost.primary.bg-hover": { + "button.ghost.primary.bg.hover": { "$value": "{color-primary-bg}", "$type": "color", "description": "ghost primary button hover background color." }, - "button.ghost.primary.border-hover": { + "button.ghost.primary.border.hover": { "$value": "transparent", "$type": "color", "description": "ghost primary button hover border color." }, - "button.ghost.primary.text-active": { + "button.ghost.primary.text.active": { "$value": "{color-primary}", "$type": "color", "description": "ghost primary button active text color." }, - "button.ghost.primary.bg-active": { + "button.ghost.primary.bg.active": { "$value": "{color-primary-bg-hover}", "$type": "color", "description": "ghost primary button active background color." }, - "button.ghost.primary.border-active": { + "button.ghost.primary.border.active": { "$value": "transparent", "$type": "color", "description": "ghost primary button active border color." @@ -515,32 +515,32 @@ "$type": "color", "description": "link primary button border color." }, - "button.link.primary.text-hover": { + "button.link.primary.text.hover": { "$value": "{color-primary}", "$type": "color", "description": "link primary button hover text color." }, - "button.link.primary.bg-hover": { + "button.link.primary.bg.hover": { "$value": "transparent", "$type": "color", "description": "link primary button hover background color." }, - "button.link.primary.border-hover": { + "button.link.primary.border.hover": { "$value": "transparent", "$type": "color", "description": "link primary button hover border color." }, - "button.link.primary.text-active": { + "button.link.primary.text.active": { "$value": "{color-primary}", "$type": "color", "description": "link primary button active text color." }, - "button.link.primary.bg-active": { + "button.link.primary.bg.active": { "$value": "transparent", "$type": "color", "description": "link primary button active background color." }, - "button.link.primary.border-active": { + "button.link.primary.border.active": { "$value": "transparent", "$type": "color", "description": "link primary button active border color." @@ -560,32 +560,32 @@ "$type": "color", "description": "solid info button border color." }, - "button.solid.info.text-hover": { + "button.solid.info.text.hover": { "$value": "#fff", "$type": "color", "description": "solid info button hover text color." }, - "button.solid.info.bg-hover": { + "button.solid.info.bg.hover": { "$value": "{color-info-hover}", "$type": "color", "description": "solid info button hover background color." }, - "button.solid.info.border-hover": { + "button.solid.info.border.hover": { "$value": "{color-info-hover}", "$type": "color", "description": "solid info button hover border color." }, - "button.solid.info.text-active": { + "button.solid.info.text.active": { "$value": "#fff", "$type": "color", "description": "solid info button active text color." }, - "button.solid.info.bg-active": { + "button.solid.info.bg.active": { "$value": "{color-info-active}", "$type": "color", "description": "solid info button active background color." }, - "button.solid.info.border-active": { + "button.solid.info.border.active": { "$value": "{color-info-active}", "$type": "color", "description": "solid info button active border color." @@ -605,32 +605,32 @@ "$type": "color", "description": "outline info button border color." }, - "button.outline.info.text-hover": { + "button.outline.info.text.hover": { "$value": "{color-info}", "$type": "color", "description": "outline info button hover text color." }, - "button.outline.info.bg-hover": { + "button.outline.info.bg.hover": { "$value": "rgba(64, 169, 255, 0.12)", "$type": "color", "description": "outline info button hover background color." }, - "button.outline.info.border-hover": { + "button.outline.info.border.hover": { "$value": "{color-info-hover}", "$type": "color", "description": "outline info button hover border color." }, - "button.outline.info.text-active": { + "button.outline.info.text.active": { "$value": "{color-info}", "$type": "color", "description": "outline info button active text color." }, - "button.outline.info.bg-active": { + "button.outline.info.bg.active": { "$value": "rgba(64, 169, 255, 0.18)", "$type": "color", "description": "outline info button active background color." }, - "button.outline.info.border-active": { + "button.outline.info.border.active": { "$value": "{color-info-active}", "$type": "color", "description": "outline info button active border color." @@ -650,32 +650,32 @@ "$type": "color", "description": "ghost info button border color." }, - "button.ghost.info.text-hover": { + "button.ghost.info.text.hover": { "$value": "{color-info}", "$type": "color", "description": "ghost info button hover text color." }, - "button.ghost.info.bg-hover": { + "button.ghost.info.bg.hover": { "$value": "rgba(64, 169, 255, 0.12)", "$type": "color", "description": "ghost info button hover background color." }, - "button.ghost.info.border-hover": { + "button.ghost.info.border.hover": { "$value": "transparent", "$type": "color", "description": "ghost info button hover border color." }, - "button.ghost.info.text-active": { + "button.ghost.info.text.active": { "$value": "{color-info}", "$type": "color", "description": "ghost info button active text color." }, - "button.ghost.info.bg-active": { + "button.ghost.info.bg.active": { "$value": "rgba(64, 169, 255, 0.18)", "$type": "color", "description": "ghost info button active background color." }, - "button.ghost.info.border-active": { + "button.ghost.info.border.active": { "$value": "transparent", "$type": "color", "description": "ghost info button active border color." @@ -695,32 +695,32 @@ "$type": "color", "description": "link info button border color." }, - "button.link.info.text-hover": { + "button.link.info.text.hover": { "$value": "{color-info}", "$type": "color", "description": "link info button hover text color." }, - "button.link.info.bg-hover": { + "button.link.info.bg.hover": { "$value": "transparent", "$type": "color", "description": "link info button hover background color." }, - "button.link.info.border-hover": { + "button.link.info.border.hover": { "$value": "transparent", "$type": "color", "description": "link info button hover border color." }, - "button.link.info.text-active": { + "button.link.info.text.active": { "$value": "{color-info}", "$type": "color", "description": "link info button active text color." }, - "button.link.info.bg-active": { + "button.link.info.bg.active": { "$value": "transparent", "$type": "color", "description": "link info button active background color." }, - "button.link.info.border-active": { + "button.link.info.border.active": { "$value": "transparent", "$type": "color", "description": "link info button active border color." @@ -740,32 +740,32 @@ "$type": "color", "description": "solid success button border color." }, - "button.solid.success.text-hover": { + "button.solid.success.text.hover": { "$value": "#fff", "$type": "color", "description": "solid success button hover text color." }, - "button.solid.success.bg-hover": { + "button.solid.success.bg.hover": { "$value": "{color-success-hover}", "$type": "color", "description": "solid success button hover background color." }, - "button.solid.success.border-hover": { + "button.solid.success.border.hover": { "$value": "{color-success-hover}", "$type": "color", "description": "solid success button hover border color." }, - "button.solid.success.text-active": { + "button.solid.success.text.active": { "$value": "#fff", "$type": "color", "description": "solid success button active text color." }, - "button.solid.success.bg-active": { + "button.solid.success.bg.active": { "$value": "{color-success-active}", "$type": "color", "description": "solid success button active background color." }, - "button.solid.success.border-active": { + "button.solid.success.border.active": { "$value": "{color-success-active}", "$type": "color", "description": "solid success button active border color." @@ -785,32 +785,32 @@ "$type": "color", "description": "outline success button border color." }, - "button.outline.success.text-hover": { + "button.outline.success.text.hover": { "$value": "{color-success}", "$type": "color", "description": "outline success button hover text color." }, - "button.outline.success.bg-hover": { + "button.outline.success.bg.hover": { "$value": "rgba(82, 196, 26, 0.12)", "$type": "color", "description": "outline success button hover background color." }, - "button.outline.success.border-hover": { + "button.outline.success.border.hover": { "$value": "{color-success-hover}", "$type": "color", "description": "outline success button hover border color." }, - "button.outline.success.text-active": { + "button.outline.success.text.active": { "$value": "{color-success}", "$type": "color", "description": "outline success button active text color." }, - "button.outline.success.bg-active": { + "button.outline.success.bg.active": { "$value": "rgba(82, 196, 26, 0.18)", "$type": "color", "description": "outline success button active background color." }, - "button.outline.success.border-active": { + "button.outline.success.border.active": { "$value": "{color-success-active}", "$type": "color", "description": "outline success button active border color." @@ -830,32 +830,32 @@ "$type": "color", "description": "ghost success button border color." }, - "button.ghost.success.text-hover": { + "button.ghost.success.text.hover": { "$value": "{color-success}", "$type": "color", "description": "ghost success button hover text color." }, - "button.ghost.success.bg-hover": { + "button.ghost.success.bg.hover": { "$value": "rgba(82, 196, 26, 0.12)", "$type": "color", "description": "ghost success button hover background color." }, - "button.ghost.success.border-hover": { + "button.ghost.success.border.hover": { "$value": "transparent", "$type": "color", "description": "ghost success button hover border color." }, - "button.ghost.success.text-active": { + "button.ghost.success.text.active": { "$value": "{color-success}", "$type": "color", "description": "ghost success button active text color." }, - "button.ghost.success.bg-active": { + "button.ghost.success.bg.active": { "$value": "rgba(82, 196, 26, 0.18)", "$type": "color", "description": "ghost success button active background color." }, - "button.ghost.success.border-active": { + "button.ghost.success.border.active": { "$value": "transparent", "$type": "color", "description": "ghost success button active border color." @@ -875,32 +875,32 @@ "$type": "color", "description": "link success button border color." }, - "button.link.success.text-hover": { + "button.link.success.text.hover": { "$value": "{color-success}", "$type": "color", "description": "link success button hover text color." }, - "button.link.success.bg-hover": { + "button.link.success.bg.hover": { "$value": "transparent", "$type": "color", "description": "link success button hover background color." }, - "button.link.success.border-hover": { + "button.link.success.border.hover": { "$value": "transparent", "$type": "color", "description": "link success button hover border color." }, - "button.link.success.text-active": { + "button.link.success.text.active": { "$value": "{color-success}", "$type": "color", "description": "link success button active text color." }, - "button.link.success.bg-active": { + "button.link.success.bg.active": { "$value": "transparent", "$type": "color", "description": "link success button active background color." }, - "button.link.success.border-active": { + "button.link.success.border.active": { "$value": "transparent", "$type": "color", "description": "link success button active border color." @@ -920,32 +920,32 @@ "$type": "color", "description": "solid warning button border color." }, - "button.solid.warning.text-hover": { + "button.solid.warning.text.hover": { "$value": "#fff", "$type": "color", "description": "solid warning button hover text color." }, - "button.solid.warning.bg-hover": { + "button.solid.warning.bg.hover": { "$value": "{color-warning-hover}", "$type": "color", "description": "solid warning button hover background color." }, - "button.solid.warning.border-hover": { + "button.solid.warning.border.hover": { "$value": "{color-warning-hover}", "$type": "color", "description": "solid warning button hover border color." }, - "button.solid.warning.text-active": { + "button.solid.warning.text.active": { "$value": "#fff", "$type": "color", "description": "solid warning button active text color." }, - "button.solid.warning.bg-active": { + "button.solid.warning.bg.active": { "$value": "{color-warning-active}", "$type": "color", "description": "solid warning button active background color." }, - "button.solid.warning.border-active": { + "button.solid.warning.border.active": { "$value": "{color-warning-active}", "$type": "color", "description": "solid warning button active border color." @@ -965,32 +965,32 @@ "$type": "color", "description": "outline warning button border color." }, - "button.outline.warning.text-hover": { + "button.outline.warning.text.hover": { "$value": "{color-warning}", "$type": "color", "description": "outline warning button hover text color." }, - "button.outline.warning.bg-hover": { + "button.outline.warning.bg.hover": { "$value": "rgba(250, 173, 20, 0.12)", "$type": "color", "description": "outline warning button hover background color." }, - "button.outline.warning.border-hover": { + "button.outline.warning.border.hover": { "$value": "{color-warning-hover}", "$type": "color", "description": "outline warning button hover border color." }, - "button.outline.warning.text-active": { + "button.outline.warning.text.active": { "$value": "{color-warning}", "$type": "color", "description": "outline warning button active text color." }, - "button.outline.warning.bg-active": { + "button.outline.warning.bg.active": { "$value": "rgba(250, 173, 20, 0.18)", "$type": "color", "description": "outline warning button active background color." }, - "button.outline.warning.border-active": { + "button.outline.warning.border.active": { "$value": "{color-warning-active}", "$type": "color", "description": "outline warning button active border color." @@ -1010,32 +1010,32 @@ "$type": "color", "description": "ghost warning button border color." }, - "button.ghost.warning.text-hover": { + "button.ghost.warning.text.hover": { "$value": "{color-warning}", "$type": "color", "description": "ghost warning button hover text color." }, - "button.ghost.warning.bg-hover": { + "button.ghost.warning.bg.hover": { "$value": "rgba(250, 173, 20, 0.12)", "$type": "color", "description": "ghost warning button hover background color." }, - "button.ghost.warning.border-hover": { + "button.ghost.warning.border.hover": { "$value": "transparent", "$type": "color", "description": "ghost warning button hover border color." }, - "button.ghost.warning.text-active": { + "button.ghost.warning.text.active": { "$value": "{color-warning}", "$type": "color", "description": "ghost warning button active text color." }, - "button.ghost.warning.bg-active": { + "button.ghost.warning.bg.active": { "$value": "rgba(250, 173, 20, 0.18)", "$type": "color", "description": "ghost warning button active background color." }, - "button.ghost.warning.border-active": { + "button.ghost.warning.border.active": { "$value": "transparent", "$type": "color", "description": "ghost warning button active border color." @@ -1055,32 +1055,32 @@ "$type": "color", "description": "link warning button border color." }, - "button.link.warning.text-hover": { + "button.link.warning.text.hover": { "$value": "{color-warning}", "$type": "color", "description": "link warning button hover text color." }, - "button.link.warning.bg-hover": { + "button.link.warning.bg.hover": { "$value": "transparent", "$type": "color", "description": "link warning button hover background color." }, - "button.link.warning.border-hover": { + "button.link.warning.border.hover": { "$value": "transparent", "$type": "color", "description": "link warning button hover border color." }, - "button.link.warning.text-active": { + "button.link.warning.text.active": { "$value": "{color-warning}", "$type": "color", "description": "link warning button active text color." }, - "button.link.warning.bg-active": { + "button.link.warning.bg.active": { "$value": "transparent", "$type": "color", "description": "link warning button active background color." }, - "button.link.warning.border-active": { + "button.link.warning.border.active": { "$value": "transparent", "$type": "color", "description": "link warning button active border color." @@ -1100,32 +1100,32 @@ "$type": "color", "description": "solid danger button border color." }, - "button.solid.danger.text-hover": { + "button.solid.danger.text.hover": { "$value": "#fff", "$type": "color", "description": "solid danger button hover text color." }, - "button.solid.danger.bg-hover": { + "button.solid.danger.bg.hover": { "$value": "{color-danger-hover}", "$type": "color", "description": "solid danger button hover background color." }, - "button.solid.danger.border-hover": { + "button.solid.danger.border.hover": { "$value": "{color-danger-hover}", "$type": "color", "description": "solid danger button hover border color." }, - "button.solid.danger.text-active": { + "button.solid.danger.text.active": { "$value": "#fff", "$type": "color", "description": "solid danger button active text color." }, - "button.solid.danger.bg-active": { + "button.solid.danger.bg.active": { "$value": "{color-danger-active}", "$type": "color", "description": "solid danger button active background color." }, - "button.solid.danger.border-active": { + "button.solid.danger.border.active": { "$value": "{color-danger-active}", "$type": "color", "description": "solid danger button active border color." @@ -1145,32 +1145,32 @@ "$type": "color", "description": "outline danger button border color." }, - "button.outline.danger.text-hover": { + "button.outline.danger.text.hover": { "$value": "{color-danger}", "$type": "color", "description": "outline danger button hover text color." }, - "button.outline.danger.bg-hover": { + "button.outline.danger.bg.hover": { "$value": "rgba(255, 77, 79, 0.12)", "$type": "color", "description": "outline danger button hover background color." }, - "button.outline.danger.border-hover": { + "button.outline.danger.border.hover": { "$value": "{color-danger-hover}", "$type": "color", "description": "outline danger button hover border color." }, - "button.outline.danger.text-active": { + "button.outline.danger.text.active": { "$value": "{color-danger}", "$type": "color", "description": "outline danger button active text color." }, - "button.outline.danger.bg-active": { + "button.outline.danger.bg.active": { "$value": "rgba(255, 77, 79, 0.18)", "$type": "color", "description": "outline danger button active background color." }, - "button.outline.danger.border-active": { + "button.outline.danger.border.active": { "$value": "{color-danger-active}", "$type": "color", "description": "outline danger button active border color." @@ -1190,32 +1190,32 @@ "$type": "color", "description": "ghost danger button border color." }, - "button.ghost.danger.text-hover": { + "button.ghost.danger.text.hover": { "$value": "{color-danger}", "$type": "color", "description": "ghost danger button hover text color." }, - "button.ghost.danger.bg-hover": { + "button.ghost.danger.bg.hover": { "$value": "rgba(255, 77, 79, 0.12)", "$type": "color", "description": "ghost danger button hover background color." }, - "button.ghost.danger.border-hover": { + "button.ghost.danger.border.hover": { "$value": "transparent", "$type": "color", "description": "ghost danger button hover border color." }, - "button.ghost.danger.text-active": { + "button.ghost.danger.text.active": { "$value": "{color-danger}", "$type": "color", "description": "ghost danger button active text color." }, - "button.ghost.danger.bg-active": { + "button.ghost.danger.bg.active": { "$value": "rgba(255, 77, 79, 0.18)", "$type": "color", "description": "ghost danger button active background color." }, - "button.ghost.danger.border-active": { + "button.ghost.danger.border.active": { "$value": "transparent", "$type": "color", "description": "ghost danger button active border color." @@ -1235,32 +1235,32 @@ "$type": "color", "description": "link danger button border color." }, - "button.link.danger.text-hover": { + "button.link.danger.text.hover": { "$value": "{color-danger}", "$type": "color", "description": "link danger button hover text color." }, - "button.link.danger.bg-hover": { + "button.link.danger.bg.hover": { "$value": "transparent", "$type": "color", "description": "link danger button hover background color." }, - "button.link.danger.border-hover": { + "button.link.danger.border.hover": { "$value": "transparent", "$type": "color", "description": "link danger button hover border color." }, - "button.link.danger.text-active": { + "button.link.danger.text.active": { "$value": "{color-danger}", "$type": "color", "description": "link danger button active text color." }, - "button.link.danger.bg-active": { + "button.link.danger.bg.active": { "$value": "transparent", "$type": "color", "description": "link danger button active background color." }, - "button.link.danger.border-active": { + "button.link.danger.border.active": { "$value": "transparent", "$type": "color", "description": "link danger button active border color." diff --git a/packages/tokens/source/components/calendar.json b/packages/tokens/source/components/calendar.json index 4ea4e620d..c0d0363e3 100644 --- a/packages/tokens/source/components/calendar.json +++ b/packages/tokens/source/components/calendar.json @@ -16,7 +16,7 @@ "description": "Calendar panel border radius.", "fallback": "--ty-border-radius" }, - "calendar.cell-hover-bg": { + "calendar.cell.bg.hover": { "$value": "#f6f9fc", "$type": "color", "description": "Calendar cell hover background color." @@ -47,13 +47,13 @@ "description": "Calendar header action color.", "fallback": "--ty-color-text-tertiary" }, - "calendar.header-action-color-hover": { + "calendar.header-action-color.hover": { "$value": "{color-primary}", "$type": "color", "description": "Calendar header action hover color.", "fallback": "--ty-color-primary" }, - "calendar.header-action-hover-bg": { + "calendar.header-action.bg.hover": { "$value": "{color-fill-secondary}", "$type": "color", "description": "Calendar header action hover background color.", @@ -101,13 +101,13 @@ "description": "Calendar header label color.", "fallback": "--ty-color-text" }, - "calendar.header-label-color-hover": { + "calendar.header-label-color.hover": { "$value": "{color-primary}", "$type": "color", "description": "Calendar header label hover color.", "fallback": "--ty-color-primary" }, - "calendar.header-label-hover-bg": { + "calendar.header-label.bg.hover": { "$value": "{color-fill-secondary}", "$type": "color", "description": "Calendar header label hover background color.", @@ -174,7 +174,7 @@ "description": "Calendar out-of-view and disabled cell text color.", "fallback": "--ty-color-text-quaternary" }, - "calendar.cell-disabled-bg": { + "calendar.cell.bg.disabled": { "$value": "{color-bg-disabled}", "$type": "color", "description": "Calendar disabled cell inner background color.", @@ -186,13 +186,13 @@ "description": "Calendar today cell border color.", "fallback": "--ty-color-primary" }, - "calendar.cell-selected-bg": { + "calendar.cell.bg.selected": { "$value": "{color-primary}", "$type": "color", "description": "Calendar selected cell background color.", "fallback": "--ty-color-primary" }, - "calendar.cell-selected-color": { + "calendar.cell.color.selected": { "$value": "#fff", "$type": "color", "description": "Calendar selected cell text color." @@ -203,7 +203,7 @@ "description": "Calendar range background color.", "fallback": "--ty-color-primary-bg" }, - "calendar.cell-focus-outline": { + "calendar.cell.outline.focus": { "$value": "{color-primary}", "$type": "color", "description": "Calendar focused cell outline color.", @@ -292,24 +292,24 @@ "description": "Calendar month and decade panel item radius.", "fallback": "--ty-border-radius" }, - "calendar.panel-item-hover-bg": { + "calendar.panel-item.bg.hover": { "$value": "{color-fill-secondary}", "$type": "color", "description": "Calendar month and decade panel item hover background color.", "fallback": "--ty-color-fill-secondary" }, - "calendar.panel-item-selected-color": { + "calendar.panel-item.color.selected": { "$value": "#fff", "$type": "color", "description": "Calendar selected month and decade panel item text color." }, - "calendar.panel-item-selected-bg": { + "calendar.panel-item.bg.selected": { "$value": "{color-primary}", "$type": "color", "description": "Calendar selected month and decade panel item background color.", "fallback": "--ty-color-primary" }, - "calendar.panel-item-selected-hover-bg": { + "calendar.panel-item.bg.selected-hover": { "$value": "{color-primary-hover}", "$type": "color", "description": "Calendar selected month and decade panel item hover background color.", @@ -348,7 +348,7 @@ "description": "Calendar today action color.", "fallback": "--ty-color-primary" }, - "calendar.today-color-hover": { + "calendar.today-color.hover": { "$value": "{color-primary-hover}", "$type": "color", "description": "Calendar today action hover color.", @@ -359,13 +359,13 @@ "$type": "dimension", "description": "Calendar today action font size." }, - "calendar.today-hover-bg": { + "calendar.today.bg.hover": { "$value": "{color-primary-bg}", "$type": "color", "description": "Calendar today action hover background color.", "fallback": "--ty-color-primary-bg" }, - "calendar.today-active-bg": { + "calendar.today.bg.active": { "$value": "{color-primary-bg-hover}", "$type": "color", "description": "Calendar today action active background color.", diff --git a/packages/tokens/source/components/carousel.json b/packages/tokens/source/components/carousel.json index 59a875b28..3c9631fbd 100644 --- a/packages/tokens/source/components/carousel.json +++ b/packages/tokens/source/components/carousel.json @@ -4,7 +4,7 @@ "$type": "color", "description": "Carousel arrow background color." }, - "carousel.arrow-hover-bg": { + "carousel.arrow.bg.hover": { "$value": "rgba(0, 0, 0, 0.45)", "$type": "color", "description": "Carousel arrow hover background color." @@ -24,7 +24,7 @@ "$type": "dimension", "description": "Carousel arrow and dots inset offset." }, - "carousel.dot-active-bg": { + "carousel.dot.bg.active": { "$value": "#fff", "$type": "color", "description": "Carousel dot active bg." @@ -34,7 +34,7 @@ "$type": "color", "description": "Carousel dot bg." }, - "carousel.dot-hover-bg": { + "carousel.dot.bg.hover": { "$value": "rgba(255, 255, 255, 0.6)", "$type": "color", "description": "Carousel dot hover background color." @@ -59,12 +59,12 @@ "$type": "dimension", "description": "Carousel dot radius." }, - "carousel.dot-width-active": { + "carousel.dot-width.active": { "$value": "24px", "$type": "dimension", "description": "Carousel active horizontal dot width." }, - "carousel.dot-height-active": { + "carousel.dot-height.active": { "$value": "24px", "$type": "dimension", "description": "Carousel active vertical dot height." diff --git a/packages/tokens/source/components/cascader.json b/packages/tokens/source/components/cascader.json index f76b69560..699d45c8d 100644 --- a/packages/tokens/source/components/cascader.json +++ b/packages/tokens/source/components/cascader.json @@ -22,19 +22,19 @@ "description": "Cascader selector radius.", "fallback": "--ty-border-radius" }, - "cascader.border-hover": { + "cascader.border.hover": { "$value": "{color-primary}", "$type": "color", "description": "Cascader selector hover border color.", "fallback": "--ty-color-primary" }, - "cascader.border-focus": { + "cascader.border.focus": { "$value": "{color-primary}", "$type": "color", "description": "Cascader selector focus border color.", "fallback": "--ty-color-primary" }, - "cascader.shadow-focus": { + "cascader.shadow.focus": { "$value": "{shadow-focus}", "$type": "shadow", "description": "Cascader selector focus shadow.", @@ -114,7 +114,7 @@ "description": "Cascader clear icon color.", "fallback": "--ty-color-text-tertiary" }, - "cascader.clear-color-hover": { + "cascader.clear-color.hover": { "$value": "{color-text-secondary}", "$type": "color", "description": "Cascader clear icon hover color.", @@ -195,18 +195,18 @@ "$type": "string", "description": "Cascader menu item padding." }, - "cascader.menu-item-disabled-opacity": { + "cascader.menu-item.opacity.disabled": { "$value": "0.5", "$type": "number", "description": "Cascader disabled menu item opacity." }, - "cascader.option-color-active": { + "cascader.option-color.active": { "$value": "{color-primary}", "$type": "color", "description": "Cascader active option text color.", "fallback": "--ty-color-primary" }, - "cascader.option-font-weight-active": { + "cascader.option-font-weight.active": { "$value": "500", "$type": "font-weight", "description": "Cascader active option font weight." @@ -227,7 +227,7 @@ "$type": "dimension", "description": "Cascader submenu arrow font size." }, - "cascader.selected-bg": { + "cascader.bg.selected": { "$value": "rgba(110, 65, 191, 0.06)", "$type": "color", "description": "Cascader active option background color." diff --git a/packages/tokens/source/components/collapse.json b/packages/tokens/source/components/collapse.json index c65f6d0b0..13ea6a3a0 100644 --- a/packages/tokens/source/components/collapse.json +++ b/packages/tokens/source/components/collapse.json @@ -28,19 +28,19 @@ "$type": "color", "description": "Default collapse header background." }, - "collapse.header-hover-bg": { + "collapse.header.bg.hover": { "$value": "{color-fill}", "$type": "color", "description": "Hover background for collapse headers.", "fallback": "--ty-color-fill" }, - "collapse.header-active-bg": { + "collapse.header.bg.active": { "$value": "{color-fill}", "$type": "color", "description": "Background for expanded collapse headers.", "fallback": "--ty-color-fill" }, - "collapse.header-disabled-bg": { + "collapse.header.bg.disabled": { "$value": "transparent", "$type": "color", "description": "Background for disabled collapse headers." @@ -51,7 +51,7 @@ "description": "Collapse header text color.", "fallback": "--ty-color-text" }, - "collapse.header-disabled-color": { + "collapse.header.color.disabled": { "$value": "{color-text-quaternary}", "$type": "color", "description": "Text color for disabled collapse headers.", @@ -83,13 +83,13 @@ "description": "Default collapse icon color.", "fallback": "--ty-collapse-header-color" }, - "collapse.icon-active-color": { + "collapse.icon.color.active": { "$value": "{collapse.header-color}", "$type": "color", "description": "Expanded collapse icon color.", "fallback": "--ty-collapse-header-color" }, - "collapse.icon-disabled-color": { + "collapse.icon.color.disabled": { "$value": "{color-text-quaternary}", "$type": "color", "description": "Disabled collapse icon color.", @@ -111,7 +111,7 @@ "description": "Collapse extra content color.", "fallback": "--ty-color-text-secondary" }, - "collapse.extra-disabled-color": { + "collapse.extra.color.disabled": { "$value": "{color-text-quaternary}", "$type": "color", "description": "Collapse extra content color for disabled panels.", diff --git a/packages/tokens/source/components/color-picker.json b/packages/tokens/source/components/color-picker.json index 66df3d24e..d7481bf50 100644 --- a/packages/tokens/source/components/color-picker.json +++ b/packages/tokens/source/components/color-picker.json @@ -159,7 +159,7 @@ "description": "Color picker format button text color.", "fallback": "--ty-color-text" }, - "color-picker.button-border-hover": { + "color-picker.button-border.hover": { "$value": "{color-primary}", "$type": "color", "description": "Color picker format button hover border color.", @@ -187,7 +187,7 @@ "description": "Color picker hex input font family.", "fallback": "--ty-font-family-monospace" }, - "color-picker.input-border-focus": { + "color-picker.input-border.focus": { "$value": "{color-primary}", "$type": "color", "description": "Color picker hex input focus border color.", @@ -213,7 +213,7 @@ "$type": "dimension", "description": "Color picker preset size." }, - "color-picker.preset-hover-scale": { + "color-picker.preset.scale.hover": { "$value": "1.2", "$type": "number", "description": "Color picker preset hover scale." diff --git a/packages/tokens/source/components/date-picker.json b/packages/tokens/source/components/date-picker.json index 8902ccf98..579a73017 100644 --- a/packages/tokens/source/components/date-picker.json +++ b/packages/tokens/source/components/date-picker.json @@ -41,13 +41,13 @@ "description": "Date picker header button color.", "fallback": "--ty-color-text-tertiary" }, - "date-picker.header-button-color-hover": { + "date-picker.header-button-color.hover": { "$value": "{color-primary}", "$type": "color", "description": "Date picker header button hover color.", "fallback": "--ty-color-primary" }, - "date-picker.header-action-hover-bg": { + "date-picker.header-action.bg.hover": { "$value": "{color-fill-secondary}", "$type": "color", "description": "Date picker header action hover background color.", @@ -106,7 +106,7 @@ "description": "Date picker muted cell text color.", "fallback": "--ty-color-text-quaternary" }, - "date-picker.cell-disabled-bg": { + "date-picker.cell.bg.disabled": { "$value": "{color-fill-secondary}", "$type": "color", "description": "Date picker cell disabled background color.", @@ -137,7 +137,7 @@ "$type": "dimension", "description": "Date picker month and year panel item radius." }, - "date-picker.panel-item-hover-bg": { + "date-picker.panel-item.bg.hover": { "$value": "{color-fill-secondary}", "$type": "color", "description": "Date picker month and year panel item hover background color.", @@ -155,19 +155,19 @@ "description": "Date picker current month/year panel item border color.", "fallback": "--ty-color-primary" }, - "date-picker.panel-item-selected-bg": { + "date-picker.panel-item.bg.selected": { "$value": "{color-primary-bg-hover}", "$type": "color", "description": "Date picker month and year panel item selected background color.", "fallback": "--ty-color-primary-bg-hover" }, - "date-picker.panel-item-selected-color": { + "date-picker.panel-item.color.selected": { "$value": "{color-primary}", "$type": "color", "description": "Date picker month and year panel item selected text color.", "fallback": "--ty-color-primary" }, - "date-picker.panel-item-selected-hover-bg": { + "date-picker.panel-item.bg.selected-hover": { "$value": "{color-primary-bg}", "$type": "color", "description": "Date picker month and year panel item selected hover background color.", @@ -179,18 +179,18 @@ "description": "Date picker today cell border color.", "fallback": "--ty-color-primary" }, - "date-picker.cell-selected-bg": { + "date-picker.cell.bg.selected": { "$value": "{color-primary}", "$type": "color", "description": "Date picker selected cell background color.", "fallback": "--ty-color-primary" }, - "date-picker.cell-selected-color": { + "date-picker.cell.color.selected": { "$value": "#fff", "$type": "color", "description": "Date picker selected cell text color." }, - "date-picker.cell-selected-hover-bg": { + "date-picker.cell.bg.selected-hover": { "$value": "{color-primary-active}", "$type": "color", "description": "Date picker selected cell hover background color.", @@ -218,19 +218,19 @@ "description": "Date picker today action color.", "fallback": "--ty-color-primary" }, - "date-picker.today-color-hover": { + "date-picker.today-color.hover": { "$value": "{color-primary-hover}", "$type": "color", "description": "Date picker today action hover color.", "fallback": "--ty-color-primary-hover" }, - "date-picker.today-hover-bg": { + "date-picker.today.bg.hover": { "$value": "{color-primary-bg}", "$type": "color", "description": "Date picker today action hover background color.", "fallback": "--ty-color-primary-bg" }, - "date-picker.today-active-bg": { + "date-picker.today.bg.active": { "$value": "{color-primary-bg-hover}", "$type": "color", "description": "Date picker today action active background color.", diff --git a/packages/tokens/source/components/descriptions.json b/packages/tokens/source/components/descriptions.json index d8f886492..1bf030772 100644 --- a/packages/tokens/source/components/descriptions.json +++ b/packages/tokens/source/components/descriptions.json @@ -83,34 +83,34 @@ "description": "Descriptions bordered container radius.", "fallback": "--ty-border-radius" }, - "descriptions.lg-padding-hr": { + "descriptions.padding-hr.lg": { "$value": "{height-sm}", "$type": "dimension", "description": "Descriptions lg padding hr.", "fallback": "--ty-height-sm" }, - "descriptions.lg-padding-vt": { + "descriptions.padding-vt.lg": { "$value": "16px", "$type": "dimension", "description": "Descriptions lg padding vt." }, - "descriptions.md-padding-hr": { + "descriptions.padding-hr.md": { "$value": "{height-sm}", "$type": "dimension", "description": "Descriptions md padding hr.", "fallback": "--ty-height-sm" }, - "descriptions.md-padding-vt": { + "descriptions.padding-vt.md": { "$value": "12px", "$type": "dimension", "description": "Descriptions md padding vt." }, - "descriptions.sm-padding-hr": { + "descriptions.padding-hr.sm": { "$value": "16px", "$type": "dimension", "description": "Descriptions sm padding hr." }, - "descriptions.sm-padding-vt": { + "descriptions.padding-vt.sm": { "$value": "8px", "$type": "dimension", "description": "Descriptions sm padding vt." diff --git a/packages/tokens/source/components/dropdown.json b/packages/tokens/source/components/dropdown.json index 4f67e856c..0a465d7d7 100644 --- a/packages/tokens/source/components/dropdown.json +++ b/packages/tokens/source/components/dropdown.json @@ -15,7 +15,7 @@ "description": "Dropdown menu item text color.", "fallback": "--ty-color-text" }, - "dropdown.item-hover-bg": { + "dropdown.item.bg.hover": { "$value": "{color-bg-spotlight}", "$type": "color", "description": "Dropdown menu item hover background color.", diff --git a/packages/tokens/source/components/form.json b/packages/tokens/source/components/form.json index 2bc071c29..01d88d432 100644 --- a/packages/tokens/source/components/form.json +++ b/packages/tokens/source/components/form.json @@ -4,7 +4,7 @@ "$type": "color", "description": "Form error color." }, - "form.error-hover": { + "form.error.hover": { "$value": "#ff7875", "$type": "color", "description": "Form error hover." diff --git a/packages/tokens/source/components/input-number.json b/packages/tokens/source/components/input-number.json index 2dd1322a3..6db8dddfe 100644 --- a/packages/tokens/source/components/input-number.json +++ b/packages/tokens/source/components/input-number.json @@ -1,5 +1,5 @@ { - "input-number.control-active-bg": { + "input-number.control.bg.active": { "$value": "#f4f4f4", "$type": "color", "description": "Input Number control active bg." @@ -15,7 +15,7 @@ "$type": "color", "description": "Input Number icon color." }, - "input-number.icon-color-hover": { + "input-number.icon-color.hover": { "$value": "{color-primary}", "$type": "color", "description": "Input Number icon hover color.", diff --git a/packages/tokens/source/components/input.json b/packages/tokens/source/components/input.json index 946394b47..0b51c0d3e 100644 --- a/packages/tokens/source/components/input.json +++ b/packages/tokens/source/components/input.json @@ -86,19 +86,19 @@ "description": "Clear button icon color.", "fallback": "--ty-color-text-quaternary" }, - "input.font-size-sm": { + "input.font-size.sm": { "$value": "{control.font-size.sm}", "$type": "dimension", "description": "Small input font size.", "fallback": "--ty-font-size-sm" }, - "input.font-size-md": { + "input.font-size.md": { "$value": "{control.font-size.md}", "$type": "dimension", "description": "Medium input font size.", "fallback": "--ty-font-size-base" }, - "input.font-size-lg": { + "input.font-size.lg": { "$value": "{control.font-size.lg}", "$type": "dimension", "description": "Large input font size.", @@ -122,17 +122,17 @@ "description": "Large input height.", "fallback": "--ty-height-lg" }, - "input.padding-inline-sm": { + "input.padding-inline.sm": { "$value": "{control.padding-inline.sm}", "$type": "dimension", "description": "Small input inline padding." }, - "input.padding-inline-md": { + "input.padding-inline.md": { "$value": "{control.padding-inline.md}", "$type": "dimension", "description": "Medium input inline padding." }, - "input.padding-inline-lg": { + "input.padding-inline.lg": { "$value": "{control.padding-inline.lg}", "$type": "dimension", "description": "Large input inline padding." @@ -142,17 +142,17 @@ "$type": "dimension", "description": "Additional spacing reserved around input affixes." }, - "input.clear-size-sm": { + "input.clear-size.sm": { "$value": "14px", "$type": "dimension", "description": "Small clear button square size." }, - "input.clear-size-md": { + "input.clear-size.md": { "$value": "16px", "$type": "dimension", "description": "Medium clear button square size." }, - "input.clear-size-lg": { + "input.clear-size.lg": { "$value": "18px", "$type": "dimension", "description": "Large clear button square size." diff --git a/packages/tokens/source/components/list.json b/packages/tokens/source/components/list.json index 00ad85040..82beb6043 100644 --- a/packages/tokens/source/components/list.json +++ b/packages/tokens/source/components/list.json @@ -74,7 +74,7 @@ "description": "List action color.", "fallback": "--ty-color-text-secondary" }, - "list.action-color-hover": { + "list.action-color.hover": { "$value": "{color-primary}", "$type": "color", "description": "List action hover color.", diff --git a/packages/tokens/source/components/menu.json b/packages/tokens/source/components/menu.json index cc7e4a8d4..fec2d060a 100644 --- a/packages/tokens/source/components/menu.json +++ b/packages/tokens/source/components/menu.json @@ -14,18 +14,18 @@ "$type": "color", "description": "Menu dark color." }, - "menu.dark-color-hover": { + "menu.dark-color.hover": { "$value": "rgba(255, 255, 255, 0.85)", "$type": "color", "description": "Menu dark hover color." }, - "menu.dark-color-selected": { + "menu.dark-color.selected": { "$value": "{color-primary-hover}", "$type": "color", "description": "Menu dark selected color.", "fallback": "--ty-color-primary-hover" }, - "menu.dark-color-disabled": { + "menu.dark-color.disabled": { "$value": "rgba(255, 255, 255, 0.25)", "$type": "color", "description": "Menu dark disabled color." @@ -133,27 +133,27 @@ "description": "Menu indicator color.", "fallback": "--ty-color-primary" }, - "menu.item-bg-hover": { + "menu.item-bg.hover": { "$value": "color-mix(in srgb, var(--ty-color-primary) 6%, transparent)", "$type": "color", "description": "Menu item hover background." }, - "menu.item-bg-active": { + "menu.item-bg.active": { "$value": "color-mix(in srgb, var(--ty-color-primary) 10%, transparent)", "$type": "color", "description": "Menu item active background." }, - "menu.item-bg-selected": { + "menu.item-bg.selected": { "$value": "color-mix(in srgb, var(--ty-color-primary) 8%, transparent)", "$type": "color", "description": "Menu item selected background." }, - "menu.item-border-hover": { + "menu.item-border.hover": { "$value": "color-mix(in srgb, var(--ty-color-primary) 20%, transparent)", "$type": "color", "description": "Menu item hover border." }, - "menu.item-border-selected": { + "menu.item-border.selected": { "$value": "color-mix(in srgb, var(--ty-color-primary) 48%, transparent)", "$type": "color", "description": "Menu item selected border." @@ -184,7 +184,7 @@ "description": "Popup submenu item text color.", "fallback": "--ty-color-text" }, - "menu.overlay-item-hover-bg": { + "menu.overlay-item.bg.hover": { "$value": "{color-bg-spotlight}", "$type": "color", "description": "Popup submenu item hover background color.", @@ -195,7 +195,7 @@ "$type": "color", "description": "Popup submenu item text color in dark menu." }, - "menu.dark-overlay-item-hover-bg": { + "menu.dark-overlay-item.bg.hover": { "$value": "#2a2a2a", "$type": "color", "description": "Popup submenu item hover background color in dark menu." @@ -245,47 +245,47 @@ "$type": "dimension", "description": "Popup submenu item gap." }, - "menu.item-height-sm": { + "menu.item-height.sm": { "$value": "32px", "$type": "dimension", "description": "Small menu item height." }, - "menu.item-height-md": { + "menu.item-height.md": { "$value": "40px", "$type": "dimension", "description": "Medium menu item height." }, - "menu.item-height-lg": { + "menu.item-height.lg": { "$value": "48px", "$type": "dimension", "description": "Large menu item height." }, - "menu.item-padding-inline-sm": { + "menu.item-padding-inline.sm": { "$value": "10px", "$type": "dimension", "description": "Small menu item horizontal padding." }, - "menu.item-padding-inline-md": { + "menu.item-padding-inline.md": { "$value": "12px", "$type": "dimension", "description": "Medium menu item horizontal padding." }, - "menu.item-padding-inline-lg": { + "menu.item-padding-inline.lg": { "$value": "14px", "$type": "dimension", "description": "Large menu item horizontal padding." }, - "menu.item-gap-sm": { + "menu.item-gap.sm": { "$value": "8px", "$type": "dimension", "description": "Small menu item gap." }, - "menu.item-gap-md": { + "menu.item-gap.md": { "$value": "10px", "$type": "dimension", "description": "Medium menu item gap." }, - "menu.item-gap-lg": { + "menu.item-gap.lg": { "$value": "12px", "$type": "dimension", "description": "Large menu item gap." @@ -300,7 +300,7 @@ "$type": "dimension", "description": "Comfortable menu item vertical padding." }, - "menu.disabled-opacity": { + "menu.opacity.disabled": { "$value": "0.55", "$type": "number", "description": "Menu disabled item opacity." @@ -335,7 +335,7 @@ "$type": "color", "description": "Popup submenu item text color in light menu." }, - "menu.light-overlay-item-hover-bg": { + "menu.light-overlay-item.bg.hover": { "$value": "#f5f5ff", "$type": "color", "description": "Popup submenu item hover background color in light menu." diff --git a/packages/tokens/source/components/native-select.json b/packages/tokens/source/components/native-select.json index 566128885..642b49fdc 100644 --- a/packages/tokens/source/components/native-select.json +++ b/packages/tokens/source/components/native-select.json @@ -23,50 +23,50 @@ "description": "Native Select radius.", "fallback": "--ty-border-radius" }, - "native-select.border-hover": { + "native-select.border.hover": { "$value": "{color-primary}", "$type": "color", "description": "Native Select hover border color.", "fallback": "--ty-color-primary" }, - "native-select.border-focus": { + "native-select.border.focus": { "$value": "{color-primary}", "$type": "color", "description": "Native Select focus border color.", "fallback": "--ty-color-primary" }, - "native-select.shadow-focus": { + "native-select.shadow.focus": { "$value": "{shadow-focus}", "$type": "shadow", "description": "Native Select focus shadow.", "fallback": "--ty-shadow-focus" }, - "native-select.disabled-bg": { + "native-select.bg.disabled": { "$value": "#ddd", "$type": "color", "description": "Native Select disabled bg." }, - "native-select.disabled-color": { + "native-select.color.disabled": { "$value": "#a5a5a5", "$type": "color", "description": "Native Select disabled color." }, - "native-select.opacity-disabled": { + "native-select.opacity.disabled": { "$value": "0.75", "$type": "number", "description": "Native Select disabled opacity." }, - "native-select.lg-padding": { + "native-select.padding.lg": { "$value": "9px 25px 9px 7px", "$type": "string", "description": "Native Select lg padding." }, - "native-select.md-padding": { + "native-select.padding.md": { "$value": "6px 25px 6px 7px", "$type": "string", "description": "Native Select md padding." }, - "native-select.sm-padding": { + "native-select.padding.sm": { "$value": "3px 25px 3px 7px", "$type": "string", "description": "Native Select sm padding." diff --git a/packages/tokens/source/components/notification.json b/packages/tokens/source/components/notification.json index 17426df63..b60cb4283 100644 --- a/packages/tokens/source/components/notification.json +++ b/packages/tokens/source/components/notification.json @@ -21,7 +21,7 @@ "$type": "color", "description": "Notification close button color." }, - "notification.close-hover": { + "notification.close.hover": { "$value": "rgba(0, 0, 0, 0.7)", "$type": "color", "description": "Notification close button hover color." diff --git a/packages/tokens/source/components/pagination.json b/packages/tokens/source/components/pagination.json index c7d45340e..ed8654839 100644 --- a/packages/tokens/source/components/pagination.json +++ b/packages/tokens/source/components/pagination.json @@ -32,7 +32,7 @@ "description": "Pagination ellipsis color.", "fallback": "--ty-color-text-quaternary" }, - "pagination.item-color.ellipsis-hover": { + "pagination.item-color.ellipsis.hover": { "$value": "{color-primary}", "$type": "color", "description": "Pagination ellipsis hover color.", @@ -98,17 +98,17 @@ "description": "Small pagination item hover text color.", "fallback": "--ty-color-primary" }, - "pagination.disabled-active-bg": { + "pagination.bg.disabled-active": { "$value": "#dbdbdb", "$type": "color", "description": "Disabled active pagination item background color." }, - "pagination.disabled-active-color": { + "pagination.color.disabled-active": { "$value": "#fff", "$type": "color", "description": "Disabled active pagination item text color." }, - "pagination.disabled-bg": { + "pagination.bg.disabled": { "$value": "{color-fill-secondary}", "$type": "color", "description": "Disabled pagination item background color.", diff --git a/packages/tokens/source/components/picker.json b/packages/tokens/source/components/picker.json index 69a037a41..4f1bb0498 100644 --- a/packages/tokens/source/components/picker.json +++ b/packages/tokens/source/components/picker.json @@ -31,25 +31,25 @@ "$type": "dimension", "description": "Picker input radius." }, - "picker.input-border-hover": { + "picker.input-border.hover": { "$value": "{color-primary}", "$type": "color", "description": "Picker input hover border color.", "fallback": "--ty-color-primary" }, - "picker.input-border-focus": { + "picker.input-border.focus": { "$value": "{color-primary}", "$type": "color", "description": "Picker input focus border color.", "fallback": "--ty-color-primary" }, - "picker.input-shadow-focus": { + "picker.input-shadow.focus": { "$value": "{shadow-focus}", "$type": "shadow", "description": "Picker input focus shadow.", "fallback": "--ty-shadow-focus" }, - "picker.input-bg-disabled": { + "picker.input-bg.disabled": { "$value": "{color-bg-disabled}", "$type": "color", "description": "Picker disabled input background color.", @@ -89,7 +89,7 @@ "description": "Picker suffix color.", "fallback": "--ty-color-text-quaternary" }, - "picker.cell-hover-bg": { + "picker.cell.bg.hover": { "$value": "{color-fill-secondary}", "$type": "color", "description": "Picker cell hover bg.", @@ -107,7 +107,7 @@ "description": "Picker clear icon color.", "fallback": "--ty-color-text-quaternary" }, - "picker.clear-color-hover": { + "picker.clear-color.hover": { "$value": "{color-text-tertiary}", "$type": "color", "description": "Picker clear icon hover color.", diff --git a/packages/tokens/source/components/quick-actions.json b/packages/tokens/source/components/quick-actions.json index f458b5b11..ae18b7df2 100644 --- a/packages/tokens/source/components/quick-actions.json +++ b/packages/tokens/source/components/quick-actions.json @@ -25,7 +25,7 @@ "$type": "dimension", "description": "Speed Dial action wrapper gap." }, - "quick-actions.action-bg-hover": { + "quick-actions.action-bg.hover": { "$value": "#f6f9fc", "$type": "color", "description": "Speed Dial action bg hover." @@ -41,7 +41,7 @@ "description": "Speed Dial bg.", "fallback": "--ty-chart-1" }, - "quick-actions.bg-hover": { + "quick-actions.bg.hover": { "$value": "{color-primary-active}", "$type": "color", "description": "Speed Dial bg hover.", @@ -62,7 +62,7 @@ "$type": "dimension", "description": "Speed Dial action button icon font size." }, - "quick-actions.disabled-opacity": { + "quick-actions.opacity.disabled": { "$value": "0.5", "$type": "number", "description": "Speed Dial disabled opacity." diff --git a/packages/tokens/source/components/segmented.json b/packages/tokens/source/components/segmented.json index 898543dd7..58419d7d3 100644 --- a/packages/tokens/source/components/segmented.json +++ b/packages/tokens/source/components/segmented.json @@ -31,58 +31,58 @@ "description": "Segmented item color.", "fallback": "--ty-color-text-secondary" }, - "segmented.item-bg-hover": { + "segmented.item-bg.hover": { "$value": "{color-fill}", "$type": "color", "description": "Segmented hover item background.", "fallback": "--ty-color-fill" }, - "segmented.item-color-hover": { + "segmented.item-color.hover": { "$value": "{color-text}", "$type": "color", "description": "Segmented hover item color.", "fallback": "--ty-color-text" }, - "segmented.item-bg-selected": { + "segmented.item-bg.selected": { "$value": "{color-bg-container}", "$type": "color", "description": "Segmented selected item background.", "fallback": "--ty-color-bg-container" }, - "segmented.item-color-selected": { + "segmented.item-color.selected": { "$value": "{color-text}", "$type": "color", "description": "Segmented selected item color.", "fallback": "--ty-color-text" }, - "segmented.item-shadow-selected": { + "segmented.item-shadow.selected": { "$value": "0 1px 2px 0 rgb(0 0 0 / 6%), 0 1px 3px 0 rgb(0 0 0 / 10%)", "$type": "shadow", "description": "Segmented selected item shadow." }, - "segmented.item-shadow-focus": { + "segmented.item-shadow.focus": { "$value": "{shadow-focus}", "$type": "shadow", "description": "Segmented focus item shadow.", "fallback": "--ty-shadow-focus" }, - "segmented.item-font-weight-selected": { + "segmented.item-font-weight.selected": { "$value": "500", "$type": "font-weight", "description": "Segmented selected item font weight." }, - "segmented.item-color-disabled": { + "segmented.item-color.disabled": { "$value": "{color-text-quaternary}", "$type": "color", "description": "Segmented disabled item color.", "fallback": "--ty-color-text-quaternary" }, - "segmented.item-bg-disabled": { + "segmented.item-bg.disabled": { "$value": "transparent", "$type": "color", "description": "Segmented disabled item background." }, - "segmented.item-opacity-disabled": { + "segmented.item-opacity.disabled": { "$value": "0.5", "$type": "number", "description": "Segmented disabled item opacity." diff --git a/packages/tokens/source/components/select.json b/packages/tokens/source/components/select.json index e675bc9c0..a2075b5f1 100644 --- a/packages/tokens/source/components/select.json +++ b/packages/tokens/source/components/select.json @@ -92,7 +92,7 @@ "description": "Select clear button icon color.", "fallback": "--ty-color-text-quaternary" }, - "select.clear-color-hover": { + "select.clear-color.hover": { "$value": "{color-text-tertiary}", "$type": "color", "description": "Select clear button icon hover color.", @@ -234,7 +234,7 @@ "description": "Multiple select tag close icon color.", "fallback": "--ty-color-text-quaternary" }, - "select.tag-close-color-hover": { + "select.tag-close-color.hover": { "$value": "{color-text}", "$type": "color", "description": "Multiple select tag close icon hover color.", @@ -305,31 +305,31 @@ "$type": "dimension", "description": "Gap between select option content and check icon." }, - "select.option.active-bg": { + "select.option.bg.active": { "$value": "{color-fill-secondary}", "$type": "color", "description": "Select option hover and active background color.", "fallback": "--ty-color-fill-secondary" }, - "select.option.selected-bg": { + "select.option.bg.selected": { "$value": "{color-primary-bg}", "$type": "color", "description": "Select option selected background color.", "fallback": "--ty-color-primary-bg" }, - "select.option.disabled-bg": { + "select.option.bg.disabled": { "$value": "{color-bg-container}", "$type": "color", "description": "Select option disabled background color.", "fallback": "--ty-color-bg-container" }, - "select.option.disabled-color": { + "select.option.color.disabled": { "$value": "{color-text-quaternary}", "$type": "color", "description": "Select option disabled text color.", "fallback": "--ty-color-text-quaternary" }, - "select.option.disabled-opacity": { + "select.option.opacity.disabled": { "$value": "0.5", "$type": "number", "description": "Select option disabled opacity." diff --git a/packages/tokens/source/components/slider.json b/packages/tokens/source/components/slider.json index 14ccf5fa5..5b3c28714 100644 --- a/packages/tokens/source/components/slider.json +++ b/packages/tokens/source/components/slider.json @@ -1,5 +1,5 @@ { - "slider.dot-active-border": { + "slider.dot.border.active": { "$value": "#9570d4", "$type": "color", "description": "Slider dot active border." @@ -15,7 +15,7 @@ "$type": "color", "description": "Slider dot border." }, - "slider.mark-active-color": { + "slider.mark.color.active": { "$value": "rgba(0, 0, 0, 0.7)", "$type": "color", "description": "Slider mark active color." @@ -31,7 +31,7 @@ "description": "Slider primary accent color.", "fallback": "--ty-color-primary" }, - "slider.disabled-color": { + "slider.color.disabled": { "$value": "{color-text-quaternary}", "$type": "color", "description": "Slider disabled color.", @@ -77,7 +77,7 @@ "$type": "dimension", "description": "Slider dot size." }, - "slider.thumb-scale-hover": { + "slider.thumb-scale.hover": { "$value": "1.2", "$type": "number", "description": "Slider thumb hover scale." diff --git a/packages/tokens/source/components/split.json b/packages/tokens/source/components/split.json index a6ca2663c..c73799579 100644 --- a/packages/tokens/source/components/split.json +++ b/packages/tokens/source/components/split.json @@ -4,7 +4,7 @@ "$type": "color", "description": "Split bar handle background." }, - "split.bar-bg-active": { + "split.bar-bg.active": { "$value": "#ffffff", "$type": "color", "description": "Split bar handle background when active." @@ -14,7 +14,7 @@ "$type": "color", "description": "Split bar handle border." }, - "split.bar-border-active": { + "split.bar-border.active": { "$value": "#c8cdd3", "$type": "color", "description": "Split bar handle border when active." @@ -24,7 +24,7 @@ "$type": "color", "description": "Split bar track and grip color." }, - "split.bar-line-active": { + "split.bar-line.active": { "$value": "#aeb6bf", "$type": "color", "description": "Split bar track and grip color when active." diff --git a/packages/tokens/source/components/switch.json b/packages/tokens/source/components/switch.json index 8946bfc54..5848db770 100644 --- a/packages/tokens/source/components/switch.json +++ b/packages/tokens/source/components/switch.json @@ -138,7 +138,7 @@ "$type": "duration", "description": "Switch transition duration." }, - "switch.disabled-opacity": { + "switch.opacity.disabled": { "$value": "0.4", "$type": "number", "description": "Disabled switch opacity." diff --git a/packages/tokens/source/components/table.json b/packages/tokens/source/components/table.json index e7d4b7e68..5df797c20 100644 --- a/packages/tokens/source/components/table.json +++ b/packages/tokens/source/components/table.json @@ -58,17 +58,17 @@ "$type": "font-weight", "description": "Table header font weight." }, - "table.row-hover-bg": { + "table.row.bg.hover": { "$value": "#f6f9fc", "$type": "color", "description": "Table row hover background color." }, - "table.cell-sortable-hover-bg": { + "table.cell-sortable.bg.hover": { "$value": "#f6f9fc", "$type": "color", "description": "Sortable table cell hover background color." }, - "table.row-selected-bg": { + "table.row.bg.selected": { "$value": "rgba(110, 65, 191, 0.06)", "$type": "color", "description": "Selected table row background color." diff --git a/packages/tokens/source/components/tabs.json b/packages/tokens/source/components/tabs.json index a4147fe5d..86846336d 100644 --- a/packages/tokens/source/components/tabs.json +++ b/packages/tokens/source/components/tabs.json @@ -48,24 +48,24 @@ "description": "Inactive tab text color.", "fallback": "--ty-color-text" }, - "tabs.tab-hover-color": { + "tabs.tab.color.hover": { "$value": "{color-primary-text-hover}", "$type": "color", "description": "Tab hover text color.", "fallback": "--ty-color-primary-text-hover" }, - "tabs.tab-active-color": { + "tabs.tab.color.active": { "$value": "{color-primary}", "$type": "color", "description": "Active tab text color.", "fallback": "--ty-color-primary" }, - "tabs.tab-active-font-weight": { + "tabs.tab.font-weight.active": { "$value": "500", "$type": "font-weight", "description": "Active tab font weight." }, - "tabs.tab-disabled-color": { + "tabs.tab.color.disabled": { "$value": "{color-text-quaternary}", "$type": "color", "description": "Disabled tab text color.", @@ -92,7 +92,7 @@ "description": "Editable tab close icon color.", "fallback": "--ty-color-text-tertiary" }, - "tabs.remove-color-hover": { + "tabs.remove-color.hover": { "$value": "{color-text}", "$type": "color", "description": "Editable tab close icon hover color.", @@ -125,13 +125,13 @@ "description": "Scrollable tabs nav button color.", "fallback": "--ty-color-text-tertiary" }, - "tabs.nav-button-color-hover": { + "tabs.nav-button-color.hover": { "$value": "{color-text}", "$type": "color", "description": "Scrollable tabs nav button hover color.", "fallback": "--ty-color-text" }, - "tabs.nav-button-color-disabled": { + "tabs.nav-button-color.disabled": { "$value": "{color-text-quaternary}", "$type": "color", "description": "Scrollable tabs nav button disabled color.", @@ -169,13 +169,13 @@ "description": "Editable tabs add button color.", "fallback": "--ty-color-text-tertiary" }, - "tabs.add-color-hover": { + "tabs.add-color.hover": { "$value": "{color-primary}", "$type": "color", "description": "Editable tabs add button hover color.", "fallback": "--ty-color-primary" }, - "tabs.add-border-color-hover": { + "tabs.add-border-color.hover": { "$value": "{color-primary}", "$type": "color", "description": "Editable tabs add button hover border color.", @@ -227,7 +227,7 @@ "description": "Card tabs background color.", "fallback": "--ty-color-fill" }, - "tabs.card-active-bg": { + "tabs.card.bg.active": { "$value": "{color-bg-container}", "$type": "color", "description": "Active card tabs background color.", diff --git a/packages/tokens/source/components/tag.json b/packages/tokens/source/components/tag.json index c759f34f0..7aaa98ed3 100644 --- a/packages/tokens/source/components/tag.json +++ b/packages/tokens/source/components/tag.json @@ -54,7 +54,7 @@ "$type": "dimension", "description": "Gap between tag content and close button." }, - "tag.close-opacity-hover": { + "tag.close-opacity.hover": { "$value": "0.8", "$type": "number", "description": "Tag close button hover opacity." diff --git a/packages/tokens/source/components/time-picker.json b/packages/tokens/source/components/time-picker.json index 4b5eaa016..9a79fefe9 100644 --- a/packages/tokens/source/components/time-picker.json +++ b/packages/tokens/source/components/time-picker.json @@ -56,19 +56,19 @@ "$type": "dimension", "description": "Time picker cell line height." }, - "time-picker.cell-bg-selected": { + "time-picker.cell-bg.selected": { "$value": "{color-primary-bg}", "$type": "color", "description": "Time picker selected cell background color.", "fallback": "--ty-color-primary-bg" }, - "time-picker.cell-bg-selected-hover": { + "time-picker.cell-bg.selected-hover": { "$value": "{color-primary-bg-hover}", "$type": "color", "description": "Time picker selected cell hover background color.", "fallback": "--ty-color-primary-bg-hover" }, - "time-picker.cell-font-weight-selected": { + "time-picker.cell-font-weight.selected": { "$value": "500", "$type": "font-weight", "description": "Time picker selected cell font weight." @@ -95,7 +95,7 @@ "description": "Time picker now action color.", "fallback": "--ty-color-primary" }, - "time-picker.now-color-hover": { + "time-picker.now-color.hover": { "$value": "{color-primary-hover}", "$type": "color", "description": "Time picker now action hover color.", @@ -127,7 +127,7 @@ "description": "Time picker ok button background color.", "fallback": "--ty-color-primary" }, - "time-picker.ok-button-bg-hover": { + "time-picker.ok-button-bg.hover": { "$value": "{color-primary-hover}", "$type": "color", "description": "Time picker ok button hover background color.", diff --git a/packages/tokens/source/components/tour.json b/packages/tokens/source/components/tour.json index bfa9b88a4..308d3576d 100644 --- a/packages/tokens/source/components/tour.json +++ b/packages/tokens/source/components/tour.json @@ -98,7 +98,7 @@ "$type": "color", "description": "Primary tour close button hover color." }, - "tour.close-bg-hover": { + "tour.close-bg.hover": { "$value": "{color-fill-secondary}", "$type": "color", "description": "Default tour close button hover background color.", diff --git a/packages/tokens/source/components/transfer.json b/packages/tokens/source/components/transfer.json index 317911b92..294f6a9e6 100644 --- a/packages/tokens/source/components/transfer.json +++ b/packages/tokens/source/components/transfer.json @@ -66,7 +66,7 @@ "description": "Transfer header bg.", "fallback": "--ty-color-bg-container" }, - "transfer.item-hover-bg": { + "transfer.item.bg.hover": { "$value": "{color-fill-secondary}", "$type": "color", "description": "Transfer item hover bg.", diff --git a/packages/tokens/source/components/tree.json b/packages/tokens/source/components/tree.json index 3b6d98c66..035a573d2 100644 --- a/packages/tokens/source/components/tree.json +++ b/packages/tokens/source/components/tree.json @@ -4,7 +4,7 @@ "$type": "color", "description": "Tree arrow color." }, - "tree.hover-bg": { + "tree.bg.hover": { "$value": "{color-fill-secondary}", "$type": "color", "description": "Tree hover background color.", diff --git a/packages/tokens/source/components/upload.json b/packages/tokens/source/components/upload.json index b0d5d0213..fb182971e 100644 --- a/packages/tokens/source/components/upload.json +++ b/packages/tokens/source/components/upload.json @@ -16,7 +16,7 @@ "$type": "dimension", "description": "Upload list item margin top." }, - "upload.list-item-hover-bg": { + "upload.list-item.bg.hover": { "$value": "{color-fill-secondary}", "$type": "color", "description": "Upload list item hover background color.", @@ -75,13 +75,13 @@ "description": "Upload dragger border color.", "fallback": "--ty-color-border" }, - "upload.dragger-border-hover": { + "upload.dragger-border.hover": { "$value": "{color-primary}", "$type": "color", "description": "Upload dragger hover border color.", "fallback": "--ty-color-primary" }, - "upload.dragger-hover-bg": { + "upload.dragger.bg.hover": { "$value": "#efefef", "$type": "color", "description": "Upload dragger hover background color." diff --git a/packages/tokens/source/runtime/compile-brand-theme.source.js b/packages/tokens/source/runtime/compile-brand-theme.source.js index c08599597..2f4d17c85 100644 --- a/packages/tokens/source/runtime/compile-brand-theme.source.js +++ b/packages/tokens/source/runtime/compile-brand-theme.source.js @@ -250,45 +250,45 @@ function compileBrandTheme(seed, options) { }, components: { 'button.solid.primary.bg': fields.primary, - 'button.solid.primary.bg-hover': primaryHover, - 'button.solid.primary.bg-active': primaryActive, + 'button.solid.primary.bg.hover': primaryHover, + 'button.solid.primary.bg.active': primaryActive, 'button.solid.primary.border': fields.primary, - 'button.solid.primary.border-hover': primaryHover, - 'button.solid.primary.border-active': primaryActive, + 'button.solid.primary.border.hover': primaryHover, + 'button.solid.primary.border.active': primaryActive, 'button.solid.primary.text': fields.primaryForeground, - 'button.solid.primary.text-hover': fields.primaryForeground, - 'button.solid.primary.text-active': fields.primaryForeground, + 'button.solid.primary.text.hover': fields.primaryForeground, + 'button.solid.primary.text.active': fields.primaryForeground, 'button.solid.default.bg': fields.muted, - 'button.solid.default.bg-hover': defaultHover, - 'button.solid.default.bg-active': defaultActive, + 'button.solid.default.bg.hover': defaultHover, + 'button.solid.default.bg.active': defaultActive, 'button.solid.default.border': fields.border, - 'button.solid.default.border-hover': defaultBorderHover, - 'button.solid.default.border-active': defaultBorderActive, + 'button.solid.default.border.hover': defaultBorderHover, + 'button.solid.default.border.active': defaultBorderActive, 'button.solid.default.text': fields.baseForeground, - 'button.solid.default.text-hover': fields.baseForeground, - 'button.solid.default.text-active': fields.baseForeground, + 'button.solid.default.text.hover': fields.baseForeground, + 'button.solid.default.text.active': fields.baseForeground, 'button.outline.default.bg': fields.base, - 'button.outline.default.bg-hover': defaultHover, - 'button.outline.default.bg-active': defaultActive, + 'button.outline.default.bg.hover': defaultHover, + 'button.outline.default.bg.active': defaultActive, 'button.outline.default.border': fields.border, - 'button.outline.default.border-hover': defaultBorderHover, - 'button.outline.default.border-active': defaultBorderActive, + 'button.outline.default.border.hover': defaultBorderHover, + 'button.outline.default.border.active': defaultBorderActive, 'button.outline.default.text': fields.baseForeground, - 'button.outline.default.text-hover': fields.baseForeground, - 'button.outline.default.text-active': fields.baseForeground, + 'button.outline.default.text.hover': fields.baseForeground, + 'button.outline.default.text.active': fields.baseForeground, 'button.solid.default.shadow': fields.shadowControl, - 'button.solid.default.shadow-hover': fields.shadowControl, - 'button.solid.default.shadow-active': fields.shadowControl, + 'button.solid.default.shadow.hover': fields.shadowControl, + 'button.solid.default.shadow.active': fields.shadowControl, 'button.outline.default.shadow': fields.shadowControl, - 'button.outline.default.shadow-hover': fields.shadowControl, - 'button.outline.default.shadow-active': fields.shadowControl, + 'button.outline.default.shadow.hover': fields.shadowControl, + 'button.outline.default.shadow.active': fields.shadowControl, 'button.radius': fields.buttonRadius, 'button.height.sm': fields.buttonHeightSm, 'button.height.md': fields.buttonHeightMd, 'button.height.lg': fields.buttonHeightLg, - 'button.padding-inline-sm': fields.buttonPaddingSm, - 'button.padding-inline-md': fields.buttonPaddingMd, - 'button.padding-inline-lg': fields.buttonPaddingLg, + 'button.padding-inline.sm': fields.buttonPaddingSm, + 'button.padding-inline.md': fields.buttonPaddingMd, + 'button.padding-inline.lg': fields.buttonPaddingLg, 'card.bg': fields.card, 'card.bg.filled': fields.secondary, 'card.border': fields.border, @@ -309,9 +309,9 @@ function compileBrandTheme(seed, options) { 'input.height.sm': fields.fieldHeightSm, 'input.height.md': fields.fieldHeightMd, 'input.height.lg': fields.fieldHeightLg, - 'input.padding-inline-sm': fields.fieldPaddingSm, - 'input.padding-inline-md': fields.fieldPaddingMd, - 'input.padding-inline-lg': fields.fieldPaddingLg, + 'input.padding-inline.sm': fields.fieldPaddingSm, + 'input.padding-inline.md': fields.fieldPaddingMd, + 'input.padding-inline.lg': fields.fieldPaddingLg, 'select.bg': fields.base, 'select.color': fields.baseForeground, 'select.border': fields.input, @@ -327,14 +327,14 @@ function compileBrandTheme(seed, options) { 'select.padding-inline-start.md': fields.fieldPaddingMd, 'select.padding-inline-start.lg': fields.fieldPaddingLg, 'select.dropdown-bg': fields.popover, - 'select.option.active-bg': fields.muted, - 'select.option.selected-bg': fields.accent, + 'select.option.bg.active': fields.muted, + 'select.option.bg.selected': fields.accent, 'table.radius': fields.radius, 'picker.input-bg': fields.base, 'picker.input-border': fields.input, - 'picker.input-border-hover': fields.ring, - 'picker.input-border-focus': fields.ring, - 'picker.input-shadow-focus': controlFocusShadow, + 'picker.input-border.hover': fields.ring, + 'picker.input-border.focus': fields.ring, + 'picker.input-shadow.focus': controlFocusShadow, 'picker.input-color': fields.baseForeground, 'picker.input-color-placeholder': fields.mutedForeground, 'picker.input-color-muted': fields.mutedForeground, @@ -346,84 +346,84 @@ function compileBrandTheme(seed, options) { 'picker.dropdown-radius': fields.cardRadius, 'date-picker.header-border': fields.border, 'date-picker.header-button-color': fields.mutedForeground, - 'date-picker.header-button-color-hover': fields.primary, - 'date-picker.header-action-hover-bg': fields.muted, + 'date-picker.header-button-color.hover': fields.primary, + 'date-picker.header-action.bg.hover': fields.muted, 'date-picker.header-action-focus-ring': fields.ring, 'date-picker.today-color': fields.primary, - 'date-picker.today-color-hover': fields.primary, - 'date-picker.today-hover-bg': fields.accent, - 'date-picker.today-active-bg': fields.muted, + 'date-picker.today-color.hover': fields.primary, + 'date-picker.today.bg.hover': fields.accent, + 'date-picker.today.bg.active': fields.muted, 'date-picker.today-focus-ring': fields.ring, - 'picker.cell-hover-bg': fields.muted, - 'date-picker.cell-selected-bg': fields.primary, - 'date-picker.cell-selected-color': fields.primaryForeground, - 'date-picker.cell-selected-hover-bg': fields.primary, + 'picker.cell.bg.hover': fields.muted, + 'date-picker.cell.bg.selected': fields.primary, + 'date-picker.cell.color.selected': fields.primaryForeground, + 'date-picker.cell.bg.selected-hover': fields.primary, 'date-picker.cell-today-border': fields.primary, 'date-picker.cell-radius': fields.inputRadius, - 'date-picker.panel-item-hover-bg': fields.muted, + 'date-picker.panel-item.bg.hover': fields.muted, 'date-picker.panel-item-current-color': fields.primary, 'date-picker.panel-item-current-border': fields.primary, - 'date-picker.panel-item-selected-bg': fields.accent, - 'date-picker.panel-item-selected-color': fields.primary, - 'date-picker.panel-item-selected-hover-bg': fields.muted, + 'date-picker.panel-item.bg.selected': fields.accent, + 'date-picker.panel-item.color.selected': fields.primary, + 'date-picker.panel-item.bg.selected-hover': fields.muted, 'date-picker.range-bg': fields.accent, 'time-picker.column-border': fields.border, - 'time-picker.cell-bg-selected': fields.primary, - 'time-picker.cell-bg-selected-hover': fields.primary, + 'time-picker.cell-bg.selected': fields.primary, + 'time-picker.cell-bg.selected-hover': fields.primary, 'time-picker.ok-button-bg': fields.primary, - 'time-picker.ok-button-bg-hover': fields.primary, + 'time-picker.ok-button-bg.hover': fields.primary, 'time-picker.ok-button-color': fields.primaryForeground, 'time-picker.ok-button-radius': fields.buttonRadius, 'calendar.bg': fields.card, 'calendar.border': fields.border, 'calendar.radius': fields.cardRadius, - 'calendar.cell-hover-bg': fields.muted, + 'calendar.cell.bg.hover': fields.muted, 'calendar.header-action-color': fields.mutedForeground, - 'calendar.header-action-color-hover': fields.primary, - 'calendar.header-action-hover-bg': fields.muted, + 'calendar.header-action-color.hover': fields.primary, + 'calendar.header-action.bg.hover': fields.muted, 'calendar.header-action-focus-ring': fields.ring, 'calendar.header-label-color': fields.cardForeground, - 'calendar.header-label-color-hover': fields.primary, - 'calendar.header-label-hover-bg': fields.muted, + 'calendar.header-label-color.hover': fields.primary, + 'calendar.header-label.bg.hover': fields.muted, 'calendar.header-label-focus-ring': fields.ring, 'calendar.cell-header-color': fields.mutedForeground, 'calendar.week-number-color': fields.mutedForeground, 'calendar.cell-color': fields.cardForeground, 'calendar.cell-color-muted': fields.mutedForeground, - 'calendar.cell-disabled-bg': fields.muted, + 'calendar.cell.bg.disabled': fields.muted, 'calendar.cell-today-border': fields.primary, - 'calendar.cell-selected-bg': fields.primary, - 'calendar.cell-selected-color': fields.primaryForeground, + 'calendar.cell.bg.selected': fields.primary, + 'calendar.cell.color.selected': fields.primaryForeground, 'calendar.range-bg': fields.accent, - 'calendar.cell-focus-outline': fields.shadowFocus, + 'calendar.cell.outline.focus': fields.shadowFocus, 'calendar.cell-dot-color': fields.primary, 'calendar.panel-item-radius': fields.inputRadius, - 'calendar.panel-item-hover-bg': fields.muted, - 'calendar.panel-item-selected-color': fields.primaryForeground, - 'calendar.panel-item-selected-bg': fields.primary, - 'calendar.panel-item-selected-hover-bg': fields.primary, + 'calendar.panel-item.bg.hover': fields.muted, + 'calendar.panel-item.color.selected': fields.primaryForeground, + 'calendar.panel-item.bg.selected': fields.primary, + 'calendar.panel-item.bg.selected-hover': fields.primary, 'calendar.today-color': fields.primary, - 'calendar.today-color-hover': fields.primary, - 'calendar.today-hover-bg': fields.accent, - 'calendar.today-active-bg': fields.muted, + 'calendar.today-color.hover': fields.primary, + 'calendar.today.bg.hover': fields.accent, + 'calendar.today.bg.active': fields.muted, 'calendar.today-focus-ring': fields.ring, 'cascader.height.sm': fields.fieldHeightSm, 'cascader.height.md': fields.fieldHeightMd, 'cascader.height.lg': fields.fieldHeightLg, 'cascader.bg': fields.base, 'cascader.border': fields.input, - 'cascader.border-hover': fields.ring, - 'cascader.border-focus': fields.ring, - 'cascader.shadow-focus': controlFocusShadow, + 'cascader.border.hover': fields.ring, + 'cascader.border.focus': fields.ring, + 'cascader.shadow.focus': controlFocusShadow, 'cascader.radius': fields.inputRadius, 'cascader.padding.sm': `0 calc(${fields.fieldPaddingSm} + 20px) 0 ${fields.fieldPaddingSm}`, 'cascader.padding.md': `0 calc(${fields.fieldPaddingMd} + 20px) 0 ${fields.fieldPaddingMd}`, 'cascader.padding.lg': `0 calc(${fields.fieldPaddingLg} + 20px) 0 ${fields.fieldPaddingLg}`, 'native-select.bg': fields.base, 'native-select.border': fields.input, - 'native-select.border-hover': fields.ring, - 'native-select.border-focus': fields.ring, - 'native-select.shadow-focus': controlFocusShadow, + 'native-select.border.hover': fields.ring, + 'native-select.border.focus': fields.ring, + 'native-select.shadow.focus': controlFocusShadow, 'native-select.radius': fields.inputRadius, 'checkbox.bg': fields.base, 'checkbox.border': fields.input, @@ -446,11 +446,11 @@ function compileBrandTheme(seed, options) { 'input-number.height.md': fields.fieldHeightMd, 'input-number.height.lg': fields.fieldHeightLg, 'segmented.bg': fields.muted, - 'segmented.item-bg-hover': fields.secondary, - 'segmented.item-bg-selected': fields.card, + 'segmented.item-bg.hover': fields.secondary, + 'segmented.item-bg.selected': fields.card, 'segmented.item-color': fields.mutedForeground, - 'segmented.item-color-selected': fields.baseForeground, - 'segmented.item-shadow-focus': fields.shadowFocus, + 'segmented.item-color.selected': fields.baseForeground, + 'segmented.item-shadow.focus': fields.shadowFocus, 'segmented.radius': fields.radius, 'tag.bg': fields.secondary, 'tag.color': fields.secondaryForeground, @@ -473,9 +473,9 @@ function compileBrandTheme(seed, options) { 'table.color': fields.baseForeground, 'table.border': fields.border, 'table.header-bg': fields.secondary, - 'table.row-hover-bg': fields.muted, - 'table.cell-sortable-hover-bg': fields.muted, - 'table.row-selected-bg': toRgba(fields.primary, mode === 'dark' ? 0.22 : 0.08), + 'table.row.bg.hover': fields.muted, + 'table.cell-sortable.bg.hover': fields.muted, + 'table.row.bg.selected': toRgba(fields.primary, mode === 'dark' ? 0.22 : 0.08), 'table.sorter-icon-color': fields.mutedForeground, 'table.sorter-icon-color.active': fields.primary, 'table.empty-color': fields.mutedForeground, diff --git a/packages/tokens/source/themes/dark.json b/packages/tokens/source/themes/dark.json index 059a013d3..c1c1484f3 100644 --- a/packages/tokens/source/themes/dark.json +++ b/packages/tokens/source/themes/dark.json @@ -86,17 +86,17 @@ "badge.shadow": "0 0 0 1.5px #1f1f1f", "calendar.bg": "#1f1f1f", "calendar.border": "#363636", - "calendar.cell-hover-bg": "#2a2a2a", - "calendar.header-action-hover-bg": "#2a2a2a", - "calendar.header-label-hover-bg": "#2a2a2a", - "calendar.panel-item-hover-bg": "#2a2a2a", + "calendar.cell.bg.hover": "#2a2a2a", + "calendar.header-action.bg.hover": "#2a2a2a", + "calendar.header-label.bg.hover": "#2a2a2a", + "calendar.panel-item.bg.hover": "#2a2a2a", "carousel.arrow-bg": "rgba(255, 255, 255, 0.15)", - "carousel.arrow-hover-bg": "rgba(255, 255, 255, 0.25)", + "carousel.arrow.bg.hover": "rgba(255, 255, 255, 0.25)", "cascader.bg": "#1f1f1f", "cascader.border": "#424242", "cascader.dropdown-bg": "#1f1f1f", "cascader.hover": "#2a2a2a", - "cascader.selected-bg": "rgba(144, 101, 208, 0.1)", + "cascader.bg.selected": "rgba(144, 101, 208, 0.1)", "checkbox.bg": "#1f1f1f", "checkbox.border": "#424242", "checkbox.bg.disabled": "#2a2a2a", @@ -104,12 +104,12 @@ "collapse.border-color": "#424242", "collapse.borderless-divider-color": "#363636", "collapse.body-bg": "#1f1f1f", - "collapse.header-hover-bg": "#303030", - "collapse.header-active-bg": "#303030", - "collapse.header-disabled-color": "rgba(255, 255, 255, 0.35)", - "collapse.icon-disabled-color": "rgba(255, 255, 255, 0.35)", + "collapse.header.bg.hover": "#303030", + "collapse.header.bg.active": "#303030", + "collapse.header.color.disabled": "rgba(255, 255, 255, 0.35)", + "collapse.icon.color.disabled": "rgba(255, 255, 255, 0.35)", "collapse.extra-color": "rgba(255, 255, 255, 0.65)", - "collapse.extra-disabled-color": "rgba(255, 255, 255, 0.35)", + "collapse.extra.color.disabled": "rgba(255, 255, 255, 0.35)", "descriptions.border": "#363636", "descriptions.label-bg": "#262626", "divider.color": "#363636", @@ -118,10 +118,10 @@ "drawer.border": "#363636", "empty.desc-color": "rgba(255, 255, 255, 0.35)", "form.error-color": "#e84749", - "form.error-hover": "#d32029", + "form.error.hover": "#d32029", "form.notice-bg": "#2b2111", "form.notice-color": "rgba(255, 255, 255, 0.65)", - "input-number.control-active-bg": "#2a2a2a", + "input-number.control.bg.active": "#2a2a2a", "input-number.control-border": "#424242", "input-number.icon-color": "#666", "keyboard.bg": "#2a2a2a", @@ -141,30 +141,30 @@ "menu.popup-bg": "#1f1f1f", "menu.popup-border": "#303030", "menu.popup-shadow": "0 16px 40px rgba(0, 0, 0, 0.28)", - "menu.item-bg-hover": "color-mix(in srgb, var(--ty-color-primary) 10%, transparent)", - "menu.item-bg-active": "color-mix(in srgb, var(--ty-color-primary) 14%, transparent)", - "menu.item-bg-selected": "color-mix(in srgb, var(--ty-color-primary) 14%, transparent)", - "menu.item-border-hover": "color-mix(in srgb, var(--ty-color-primary) 28%, transparent)", - "menu.item-border-selected": "color-mix(in srgb, var(--ty-color-primary) 56%, transparent)", + "menu.item-bg.hover": "color-mix(in srgb, var(--ty-color-primary) 10%, transparent)", + "menu.item-bg.active": "color-mix(in srgb, var(--ty-color-primary) 14%, transparent)", + "menu.item-bg.selected": "color-mix(in srgb, var(--ty-color-primary) 14%, transparent)", + "menu.item-border.hover": "color-mix(in srgb, var(--ty-color-primary) 28%, transparent)", + "menu.item-border.selected": "color-mix(in srgb, var(--ty-color-primary) 56%, transparent)", "message.bg": "#1f1f1f", "modal.bg": "#1f1f1f", "modal.footer-border": "#363636", "modal.header-bg": "#1f1f1f", "modal.header-border": "#363636", "native-select.bg": "#1f1f1f", - "native-select.disabled-bg": "#2a2a2a", - "native-select.disabled-color": "rgba(255, 255, 255, 0.25)", + "native-select.bg.disabled": "#2a2a2a", + "native-select.color.disabled": "rgba(255, 255, 255, 0.25)", "notification.bg": "#1f1f1f", "notification.close-color": "rgba(255, 255, 255, 0.2)", - "notification.close-hover": "rgba(255, 255, 255, 0.7)", + "notification.close.hover": "rgba(255, 255, 255, 0.7)", "pagination.item-bg": "#1f1f1f", - "pagination.disabled-active-bg": "#424242", - "pagination.disabled-bg": "#2a2a2a", + "pagination.bg.disabled-active": "#424242", + "pagination.bg.disabled": "#2a2a2a", "pagination.disabled-color.md": "#525252", "pagination.disabled-color.sm": "#525252", - "date-picker.cell-disabled-bg": "#2a2a2a", - "picker.cell-hover-bg": "#2a2a2a", - "date-picker.cell-selected-hover-bg": "#7a50bf", + "date-picker.cell.bg.disabled": "#2a2a2a", + "picker.cell.bg.hover": "#2a2a2a", + "date-picker.cell.bg.selected-hover": "#7a50bf", "picker.clear-bg": "#1f1f1f", "picker.dropdown-bg": "#1f1f1f", "picker.input-bg": "#1f1f1f", @@ -180,35 +180,35 @@ "radio.dot-bg.disabled": "rgba(255, 255, 255, 0.2)", "result.content-bg": "#262626", "segmented.bg": "#2a2a2a", - "segmented.item-bg-hover": "#303030", - "segmented.item-bg-selected": "#1f1f1f", + "segmented.item-bg.hover": "#303030", + "segmented.item-bg.selected": "#1f1f1f", "select.dropdown-bg": "#1f1f1f", - "select.option.active-bg": "#2a2a2a", - "select.option.disabled-bg": "#1f1f1f", - "select.option.selected-bg": "#1a1325", + "select.option.bg.active": "#2a2a2a", + "select.option.bg.disabled": "#1f1f1f", + "select.option.bg.selected": "#1a1325", "skeleton.bg": "#303030", "skeleton.shimmer": "linear-gradient(to right, #303030 25%, #3a3a3a 37%, #303030 63%)", - "slider.dot-active-border": "#9065d0", + "slider.dot.border.active": "#9065d0", "slider.dot-bg": "#1f1f1f", "slider.dot-border": "#424242", - "slider.mark-active-color": "rgba(255, 255, 255, 0.7)", + "slider.mark.color.active": "rgba(255, 255, 255, 0.7)", "slider.mark-color": "rgba(255, 255, 255, 0.4)", "slider.rail-bg": "#363636", "slider.thumb-bg": "#1f1f1f", "slider.thumb-border": "#9065d0", "quick-actions.action-bg": "#1f1f1f", - "quick-actions.action-bg-hover": "#2a2a2a", + "quick-actions.action-bg.hover": "#2a2a2a", "quick-actions.action-color": "rgba(255, 255, 255, 0.85)", "quick-actions.bg": "#9065d0", - "quick-actions.bg-hover": "#7a50bf", + "quick-actions.bg.hover": "#7a50bf", "quick-actions.tooltip-bg": "#363636", "quick-actions.tooltip-color": "rgba(255, 255, 255, 0.85)", "split.bar-bg": "#242424", - "split.bar-bg-active": "#2a2a2a", + "split.bar-bg.active": "#2a2a2a", "split.bar-border": "#3a3a3a", - "split.bar-border-active": "#474747", + "split.bar-border.active": "#474747", "split.bar-line": "#484848", - "split.bar-line-active": "#666666", + "split.bar-line.active": "#666666", "steps.icon-bg": "#1f1f1f", "steps.tail-color": "#424242", "switch.bg": "rgba(255, 255, 255, 0.25)", @@ -217,10 +217,10 @@ "switch.thumb-shadow": "0 1px 3px 1px rgba(0, 0, 0, 0.4)", "table.border": "#363636", "table.header-bg": "#262626", - "table.row-hover-bg": "#2a2a2a", - "table.row-selected-bg": "rgba(144, 101, 208, 0.1)", + "table.row.bg.hover": "#2a2a2a", + "table.row.bg.selected": "rgba(144, 101, 208, 0.1)", "tabs.border": "#303030", - "tabs.card-active-bg": "#1f1f1f", + "tabs.card.bg.active": "#1f1f1f", "tabs.card-bg": "#262626", "tag.bg": "#262626", "tag.blue-bg": "#111d2c", @@ -266,9 +266,9 @@ "transfer.footer-bg": "#1f1f1f", "transfer.footer-border": "#303030", "transfer.header-bg": "#1f1f1f", - "transfer.item-hover-bg": "#2a2a2a", + "transfer.item.bg.hover": "#2a2a2a", "tree.arrow-color": "#666", - "tree.hover-bg": "#2a2a2a", + "tree.bg.hover": "#2a2a2a", "typography.body-color": "rgba(255, 255, 255, 0.65)", "typography.code-bg": "rgba(255, 255, 255, 0.06)", "typography.code-border": "rgba(255, 255, 255, 0.06)", @@ -276,8 +276,8 @@ "typography.mark-bg": "#594214", "upload.dragger-bg": "#262626", "upload.dragger-border": "#424242", - "upload.dragger-hover-bg": "#303030", - "upload.list-item-hover-bg": "#2a2a2a" + "upload.dragger.bg.hover": "#303030", + "upload.list-item.bg.hover": "#2a2a2a" } } }