feat(button): DLT-3269 improve disabled styles#1180
feat(button): DLT-3269 improve disabled styles#1180Francis Rupert (francisrupert) wants to merge 1 commit intostagingfrom
Conversation
|
✔️ Deploy previews ready! |
Francis Rupert (francisrupert)
added
the
visual-test-ready
Francis Rupert (francisrupert)
requested review from
Brad Paugh (braddialpad),
Ignacio Ropolo (iropolo) and
Nina Repetto (ninarepetto)
as code owners
Francis Rupert (francisrupert)
added
no-visual-test
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 6c5cf96049
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "Codex (@codex) review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "Codex (@codex) address that feedback".
|
Adding visual tests since I think it probably IS important to visually test this. |
Brad Paugh (braddialpad)
added
visual-test-ready
|
Please add either the |
| border-color: color-mix(in oklch, oklch( from var(--button-color-border) l calc(c - var(--chroma-adjust-border)) h ) var(--opacity-adjust-border), transparent); | ||
| cursor: not-allowed; | ||
| transition: none; | ||
| pointer-events: none; |
There was a problem hiding this comment.
Hmmmm this is a breaking change isn't it? adding pointer-events: none when it wasn't there before.
| // $$ DISABLED STATE | ||
| // ---------------------------------------------------------------------------- |
There was a problem hiding this comment.
guess we can remove this whole comment
| color: color-mix(in oklch, oklch( from var(--button-color-text) l calc(c - var(--chroma-adjust-text)) h ) var(--opacity-adjust-text), transparent); | ||
| background-color: color-mix(in oklch, oklch( from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h ) var(--opacity-adjust-background), transparent); | ||
| border-color: color-mix(in oklch, oklch( from var(--button-color-border) l calc(c - var(--chroma-adjust-border)) h ) var(--opacity-adjust-border), transparent); |
There was a problem hiding this comment.
Browser compatibility concerns with this unfortunately... I'm going to have to check on this before we merge. There was some bug not long ago with users in India still using Windows 7 with Chrome 108 😠.
Worst case I think we can transpile it but we might have to make a product side change.
| All button styles and variations appear the same when disabled. | ||
| Buttons can be disabled using the `disabled` attribute or the Dialtone class, `d-btn--disabled`. Use the attribute when a button should appear disabled and not receive focus; use the class when a button should appear disabled but still receive focus (i.e. a disabled button with a tooltip). | ||
|
|
||
| When using the raw HTML intead of the Vue component , it requires `aria-disabled`, and additional javascript implementation is required to prevent events. |
There was a problem hiding this comment.
minor typo here, "intead" -> "instead"
|
|
||
| <script setup> | ||
| import { ref } from 'vue'; | ||
| const isDisabled = ref(true); |
There was a problem hiding this comment.
nit: put declaration after import.
2 participants
Screen.Recording.2026-04-07.at.12.59.07.PM.mov
🛠️ Type Of Change
📖 Jira Ticket
DLT-3269
📖 Description
Replace flat disabled button styling with context-aware desaturation using
color-mix(in oklch). Disabled buttons now retain a muted version of their variant colors instead of all looking identical.Selectively ported from the
nextbranch visual refresh work — only the disabled styling changes, no token migrations, no new slots, no mixin restructure.What changed
color-mix(in oklch, oklch(from ...) ...)to desaturate variant colors with adjustable chroma and opacity:not([disabled])to:not(:disabled, .d-btn--disabled)across all variantsWhat did NOT change
💡 Context
On
staging, all disabled buttons render identically regardless of variant — a single flat disabled color applied via!important. This makes it harder to identify what action is being disabled. The new approach desaturates each variant's own colors, preserving intent while clearly communicating the disabled state.📝 Checklist
For all PRs:
For all CSS changes:
📷 Screenshots / GIFs