Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: Make active Tab look less like a primary Button #1773

Merged
merged 6 commits into from
Dec 11, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Remove tokens that just set initial values
They would be useful for communities that reuse our components and need background and border colours, but we should first consider whether we want to adopt this approach.
VincentSmedinga committed Dec 4, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 4ff5a735e70dd476ff3e4ab15e817311247ff9ed
5 changes: 0 additions & 5 deletions packages/css/src/components/tabs/tabs.scss
Original file line number Diff line number Diff line change
@@ -20,8 +20,6 @@
}

.ams-tabs__list {
background-color: var(--ams-tabs-list-background-color);
border-block-end: var(--ams-tabs-list-border-block-end);
box-shadow: var(--ams-tabs-list-box-shadow);
display: flex;
overflow-x: auto;
@@ -41,7 +39,6 @@
@include reset-button;

&:disabled {
background-color: var(--ams-tabs-button-disabled-background-color);
color: var(--ams-tabs-button-disabled-color);
cursor: var(--ams-tabs-button-disabled-cursor);

@@ -51,13 +48,11 @@
}

&:hover:not([aria-selected="true"], [disabled]) {
background-color: var(--ams-tabs-button-hover-background-color);
box-shadow: var(--ams-tabs-button-hover-box-shadow);
color: var(--ams-tabs-button-hover-color);
}

&[aria-selected="true"] {
background-color: var(--ams-tabs-button-selected-background-color);
box-shadow: var(--ams-tabs-button-selected-box-shadow);
color: var(--ams-tabs-button-selected-color);
font-weight: var(--ams-tabs-button-selected-font-weight);
alimpens marked this conversation as resolved.
Show resolved Hide resolved
5 changes: 0 additions & 5 deletions proprietary/tokens/src/components/ams/tabs.tokens.json
Original file line number Diff line number Diff line change
@@ -3,8 +3,6 @@
"tabs": {
"gap": { "value": "{ams.space.md}" },
"list": {
"background-color": { "value": "initial" },
"border-block-end": { "value": "initial" },
"box-shadow": { "value": "inset 0 calc({ams.border.width.md} * -1) {ams.brand.color.neutral.20}" }
},
"button": {
@@ -19,17 +17,14 @@
"padding-inline": { "value": "{ams.space.md}" },
"hover": {
"color": { "value": "{ams.brand.color.blue.80}" },
"background-color": { "value": "initial" },
"box-shadow": { "value": "inset 0 calc({ams.border.width.md} * -1) {ams.brand.color.blue.80}" }
},
"selected": {
"background-color": { "value": "initial" },
"box-shadow": { "value": "inset 0 calc({ams.border.width.xl} * -1) {ams.brand.color.blue.60}" },
"color": { "value": "{ams.brand.color.blue.60}" },
"font-weight": { "value": "{ams.text.font-weight.bold}" }
},
"disabled": {
"background-color": { "value": "initial" },
"color": { "value": "{ams.brand.color.neutral.60}" },
"cursor": { "value": "{ams.action.disabled.cursor}" }
}