Skip to content

Commit

Permalink
fix(codex): update button classes for type->weight change (#606)
Browse files Browse the repository at this point in the history 
* fix(codex): Update button classes for type->weight change

In Codex v0.7.0, the CSS class used for primary buttons changed from
cdx-button--type-primary to cdx-button--weight-primary, type-normal
changed weight-normal, and type-quiet changed to weight-quiet. Update
codex.styles.less accordingly.

See https://phabricator.wikimedia.org/T312987 for more details.

* fix(codex): keep --type for 1.39 compatibility

---------

Co-authored-by: alistair3149 <alistair3149@users.noreply.github.com>
  • Loading branch information
@catrope @alistair3149
catrope and alistair3149 committed Mar 29, 2023
1 parent 497f2e6 commit 6b8ff22
Showing 1 changed file with 54 additions and 25 deletions.
79 changes: 54 additions & 25 deletions skinStyles/codex/codex.styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,125 +49,154 @@
color: var( --color-base--subtle );
}

.cdx-button--type-primary.cdx-button--action-progressive:enabled {
/*
* T312987
* --type is needed for 1.39 compatibility
*/
.cdx-button--type-primary.cdx-button--action-progressive:enabled,
.cdx-button--weight-primary.cdx-button--action-progressive:enabled {
border-color: var( --color-primary );
background-color: var( --color-primary );
}

.cdx-button--type-primary.cdx-button--action-progressive:enabled:hover {
.cdx-button--type-primary.cdx-button--action-progressive:enabled:hover,
.cdx-button--weight-primary.cdx-button--action-progressive:enabled:hover {
border-color: var( --color-primary--hover );
background-color: var( --color-primary--hover );
}

.cdx-button--type-primary.cdx-button--action-progressive:enabled:active {
.cdx-button--type-primary.cdx-button--action-progressive:enabled:active,
.cdx-button--weight-primary.cdx-button--action-progressive:enabled:active {
border-color: var( --color-primary--active );
background-color: var( --color-primary--active );
}

.cdx-button--type-primary.cdx-button--action-progressive:enabled:focus:not( :active ) {
.cdx-button--type-primary.cdx-button--action-progressive:enabled:focus:not( :active ),
.cdx-button--weight-primary.cdx-button--action-progressive:enabled:focus:not( :active ) {
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
}

.cdx-button--type-primary.cdx-button--action-destructive:enabled {
.cdx-button--type-primary.cdx-button--action-destructive:enabled,
.cdx-button--weight-primary.cdx-button--action-destructive:enabled {
border-color: var( --color-destructive );
background-color: var( --color-destructive );
}

.cdx-button--type-primary.cdx-button--action-destructive:enabled:hover {
.cdx-button--type-primary.cdx-button--action-destructive:enabled:hover,
.cdx-button--weight-primary.cdx-button--action-destructive:enabled:hover {
border-color: var( --color-destructive--hover );
background-color: var( --color-destructive--hover );
}

.cdx-button--type-primary.cdx-button--action-destructive:enabled:active {
.cdx-button--type-primary.cdx-button--action-destructive:enabled:active,
.cdx-button--weight-primary.cdx-button--action-destructive:enabled:active {
border-color: var( --color-destructive--active );
background-color: var( --color-destructive--active );
}

.cdx-button--type-primary.cdx-button--action-destructive:enabled:focus:not( :active ) {
.cdx-button--type-primary.cdx-button--action-destructive:enabled:focus:not( :active ),
.cdx-button--weight-primary.cdx-button--action-destructive:enabled:focus:not( :active ) {
border-color: var( --color-destructive );
box-shadow: inset 0 0 0 1px var( --color-destructive ), inset 0 0 0 2px #fff;
}

.cdx-button--type-normal.cdx-button--action-progressive:enabled {
.cdx-button--type-normal.cdx-button--action-progressive:enabled,
.cdx-button--weight-normal.cdx-button--action-progressive:enabled {
color: var( --color-primary );
}

.cdx-button--type-normal.cdx-button--action-progressive:enabled:hover {
.cdx-button--type-normal.cdx-button--action-progressive:enabled:hover,
.cdx-button--weight-normal.cdx-button--action-progressive:enabled:hover {
border-color: var( --color-primary--hover );
color: var( --color-primary--hover );
}

.cdx-button--type-normal.cdx-button--action-progressive:enabled:active {
.cdx-button--type-normal.cdx-button--action-progressive:enabled:active,
.cdx-button--weight-normal.cdx-button--action-progressive:enabled:active {
border-color: var( --color-primary--active );
background-color: var( --color-surface-2--active ); // Use normal style for now
color: var( --color-primary--active );
}

.cdx-button--type-normal.cdx-button--action-destructive:enabled {
.cdx-button--type-normal.cdx-button--action-destructive:enabled,
.cdx-button--weight-normal.cdx-button--action-destructive:enabled {
color: var( --color-destructive );
}

.cdx-button--type-normal.cdx-button--action-destructive:enabled:hover {
.cdx-button--type-normal.cdx-button--action-destructive:enabled:hover,
.cdx-button--weight-normal.cdx-button--action-destructive:enabled:hover {
border-color: var( --color-destructive--hover );
color: var( --color-destructive--hover );
}

.cdx-button--type-normal.cdx-button--action-destructive:enabled:active {
.cdx-button--type-normal.cdx-button--action-destructive:enabled:active,
.cdx-button--weight-normal.cdx-button--action-destructive:enabled:active {
border-color: var( --color-destructive--active );
background-color: var( --color-surface-2--active ); // Use normal style for now
color: var( --color-destructive--active );
}

.cdx-button--type-normal.cdx-button--action-destructive:enabled:focus:not( :active ) {
.cdx-button--type-normal.cdx-button--action-destructive:enabled:focus:not( :active ),
.cdx-button--weight-normal.cdx-button--action-destructive:enabled:focus:not( :active ) {
border-color: var( --color-destructive );
box-shadow: inset 0 0 0 1px var( --color-destructive );
}

.cdx-button--type-quiet:enabled:hover {
.cdx-button--type-quiet:enabled:hover,
.cdx-button--weight-quiet:enabled:hover {
background-color: var( --background-color-quiet--hover );
}

.cdx-button--type-quiet:enabled:active {
.cdx-button--type-quiet:enabled:active,
.cdx-button--weight-quiet:enabled:active {
border-color: var( --background-color-quiet--active );
background-color: var( --background-color-quiet--active );
color: var( --color-base--subtle );
}

.cdx-button--type-quiet.cdx-button--action-progressive:enabled {
.cdx-button--type-quiet.cdx-button--action-progressive:enabled,
.cdx-button--weight-quiet.cdx-button--action-progressive:enabled {
color: var( --color-primary );
}

.cdx-button--type-quiet.cdx-button--action-progressive:enabled:hover {
.cdx-button--type-quiet.cdx-button--action-progressive:enabled:hover,
.cdx-button--weight-quiet.cdx-button--action-progressive:enabled:hover {
background-color: var( --background-color-primary--hover );
color: var( --color-primary--hover );
}

.cdx-button--type-quiet.cdx-button--action-progressive:enabled:active {
.cdx-button--type-quiet.cdx-button--action-progressive:enabled:active,
.cdx-button--weight-quiet.cdx-button--action-progressive:enabled:active {
border-color: var( --color-primary--active );
background-color: var( --color-primary--active );
}

.cdx-button--type-quiet.cdx-button--action-destructive:enabled {
.cdx-button--type-quiet.cdx-button--action-destructive:enabled,
.cdx-button--weight-quiet.cdx-button--action-destructive:enabled {
color: var( --color-destructive );
}

.cdx-button--type-quiet.cdx-button--action-destructive:enabled:hover {
.cdx-button--type-quiet.cdx-button--action-destructive:enabled:hover,
.cdx-button--weight-quiet.cdx-button--action-destructive:enabled:hover {
background-color: var( --background-color-destructive );
color: var( --color-destructive--hover );
}

.cdx-button--type-quiet.cdx-button--action-destructive:enabled:active {
.cdx-button--type-quiet.cdx-button--action-destructive:enabled:active,
.cdx-button--weight-quiet.cdx-button--action-destructive:enabled:active {
border-color: var( --color-destructive--active );
background-color: var( --color-destructive--active );
}

.cdx-button--type-quiet.cdx-button--action-destructive:enabled:focus:not( :active ) {
.cdx-button--type-quiet.cdx-button--action-destructive:enabled:focus:not( :active ),
.cdx-button--weight-quiet.cdx-button--action-destructive:enabled:focus:not( :active ) {
border-color: var( --color-destructive );
box-shadow: inset 0 0 0 1px var( --color-destructive );
}

.cdx-button--type-quiet:disabled {
.cdx-button--type-quiet:disabled,
.cdx-button--weight-quiet:disabled {
color: var( --color-base--subtle );
}

Expand Down

0 comments on commit 6b8ff22

Please sign in to comment.