From 060d270ccddb8d3f31282a054015db1995478c58 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Sun, 24 Mar 2024 17:13:40 +0100 Subject: [PATCH 1/9] Add token for background color of tabs list --- packages/css/src/components/tabs/tabs.scss | 1 + proprietary/tokens/src/components/ams/tabs.tokens.json | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss index 9d3aa76fa9..0fc632485d 100644 --- a/packages/css/src/components/tabs/tabs.scss +++ b/packages/css/src/components/tabs/tabs.scss @@ -6,6 +6,7 @@ @import "../../common/breakpoint"; .ams-tabs__list { + background-color: var(--ams-tabs-list-background-color); border-bottom: var(--ams-tabs-list-border-bottom); display: flex; overflow-x: auto; diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json index 9a7ff5b17d..b69e48c1cc 100644 --- a/proprietary/tokens/src/components/ams/tabs.tokens.json +++ b/proprietary/tokens/src/components/ams/tabs.tokens.json @@ -2,6 +2,7 @@ "ams": { "tabs": { "list": { + "background-color": { "value": "{ams.color.primary-white}" }, "border-bottom": { "value": ".125rem solid {ams.color.primary-blue}" } }, "button": { From 6c63e52c7e9f6d1b9a12cc42045f208b6b03e27e Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Sun, 24 Mar 2024 17:14:24 +0100 Subject: [PATCH 2/9] Make inactive tabs button background explicitly white This is more intentful and may be easier to animate. --- proprietary/tokens/src/components/ams/tabs.tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json index b69e48c1cc..a21c7cc62c 100644 --- a/proprietary/tokens/src/components/ams/tabs.tokens.json +++ b/proprietary/tokens/src/components/ams/tabs.tokens.json @@ -6,7 +6,7 @@ "border-bottom": { "value": ".125rem solid {ams.color.primary-blue}" } }, "button": { - "background-color": { "value": "transparent" }, + "background-color": { "value": "{ams.color.primary-white}" }, "border": { "value": "none" }, "color": { "value": "{ams.color.primary-blue}" }, "cursor": { "value": "{ams.action.activate.cursor}" }, From c3658f4b749b702d307fe0f8072a11d5d5252f47 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Mon, 25 Mar 2024 10:42:27 +0100 Subject: [PATCH 3/9] Explicitly reset background and border for Tabs Button --- packages/css/src/components/tabs/tabs.scss | 5 +++++ proprietary/tokens/src/components/ams/tabs.tokens.json | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss index 0fc632485d..8a0c818aa8 100644 --- a/packages/css/src/components/tabs/tabs.scss +++ b/packages/css/src/components/tabs/tabs.scss @@ -5,6 +5,11 @@ @import "../../common/breakpoint"; +@mixin reset-button { + background-color: transparent; + border: none; +} + .ams-tabs__list { background-color: var(--ams-tabs-list-background-color); border-bottom: var(--ams-tabs-list-border-bottom); diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json index a21c7cc62c..af9e302d78 100644 --- a/proprietary/tokens/src/components/ams/tabs.tokens.json +++ b/proprietary/tokens/src/components/ams/tabs.tokens.json @@ -7,7 +7,7 @@ }, "button": { "background-color": { "value": "{ams.color.primary-white}" }, - "border": { "value": "none" }, + "border": { "value": "" }, "color": { "value": "{ams.color.primary-blue}" }, "cursor": { "value": "{ams.action.activate.cursor}" }, "font-family": { "value": "{ams.text.font-family}" }, From 3cab8ef5ee540d6730ea4c7ac0f5e6ca31660bf5 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Mon, 25 Mar 2024 10:48:49 +0100 Subject: [PATCH 4/9] Actually use the new mixin --- packages/css/src/components/tabs/tabs.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss index 8a0c818aa8..f2336a79a6 100644 --- a/packages/css/src/components/tabs/tabs.scss +++ b/packages/css/src/components/tabs/tabs.scss @@ -30,6 +30,8 @@ padding-block: var(--ams-tabs-button-padding-block); padding-inline: var(--ams-tabs-button-padding-inline); + @include reset-button; + &:disabled { color: var(--ams-tabs-button-disabled-color); cursor: var(--ams-tab-button-disabled-cursor); From 442f642189019344bec1d6d86cdb7e4d27108a6b Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Mon, 25 Mar 2024 11:12:21 +0100 Subject: [PATCH 5/9] Revert explicit button background colour --- proprietary/tokens/src/components/ams/tabs.tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json index af9e302d78..af5b7377cc 100644 --- a/proprietary/tokens/src/components/ams/tabs.tokens.json +++ b/proprietary/tokens/src/components/ams/tabs.tokens.json @@ -6,7 +6,7 @@ "border-bottom": { "value": ".125rem solid {ams.color.primary-blue}" } }, "button": { - "background-color": { "value": "{ams.color.primary-white}" }, + "background-color": { "value": "transparent" }, "border": { "value": "" }, "color": { "value": "{ams.color.primary-blue}" }, "cursor": { "value": "{ams.action.activate.cursor}" }, From abfa8d6f955a1cbd4c5e2dcaf239f2a7bf25e01f Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Thu, 28 Mar 2024 11:01:40 +0100 Subject: [PATCH 6/9] Update proprietary/tokens/src/components/ams/tabs.tokens.json Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- proprietary/tokens/src/components/ams/tabs.tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json index af5b7377cc..c01bc7188b 100644 --- a/proprietary/tokens/src/components/ams/tabs.tokens.json +++ b/proprietary/tokens/src/components/ams/tabs.tokens.json @@ -7,7 +7,7 @@ }, "button": { "background-color": { "value": "transparent" }, - "border": { "value": "" }, + "border": { "value": "0" }, "color": { "value": "{ams.color.primary-blue}" }, "cursor": { "value": "{ams.action.activate.cursor}" }, "font-family": { "value": "{ams.text.font-family}" }, From abcf4cf791a719865374ec34a7c9688275ac8c4a Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 29 Mar 2024 11:15:32 +0100 Subject: [PATCH 7/9] Update packages/css/src/components/tabs/tabs.scss Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- packages/css/src/components/tabs/tabs.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss index f2336a79a6..52f22f1e70 100644 --- a/packages/css/src/components/tabs/tabs.scss +++ b/packages/css/src/components/tabs/tabs.scss @@ -7,7 +7,7 @@ @mixin reset-button { background-color: transparent; - border: none; + border: 0; } .ams-tabs__list { From b792780a1c05935f3c6d4eda6ad35d46b867e0ea Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 29 Mar 2024 11:48:05 +0100 Subject: [PATCH 8/9] Remove styles and tokens for properties that are only reset --- packages/css/src/components/tabs/tabs.scss | 2 -- proprietary/tokens/src/components/ams/tabs.tokens.json | 2 -- 2 files changed, 4 deletions(-) diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss index 52f22f1e70..8fa763dd76 100644 --- a/packages/css/src/components/tabs/tabs.scss +++ b/packages/css/src/components/tabs/tabs.scss @@ -18,8 +18,6 @@ } .ams-tabs__button { - background-color: var(--ams-tabs-button-background-color); - border: var(--ams-tabs-button-border); color: var(--ams-tabs-button-color); cursor: var(--ams-tabs-button-cursor); font-family: var(--ams-tabs-button-font-family); diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json index ae92bb2b9c..5babee0b4d 100644 --- a/proprietary/tokens/src/components/ams/tabs.tokens.json +++ b/proprietary/tokens/src/components/ams/tabs.tokens.json @@ -6,8 +6,6 @@ "border-bottom": { "value": "{ams.border.width.md} solid {ams.color.primary-blue}" } }, "button": { - "background-color": { "value": "transparent" }, - "border": { "value": "0" }, "color": { "value": "{ams.color.primary-blue}" }, "cursor": { "value": "{ams.action.activate.cursor}" }, "font-family": { "value": "{ams.text.font-family}" }, From 8d5ad8715995a808d8cf48b5f00eda4f29a72d15 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 29 Mar 2024 11:48:13 +0100 Subject: [PATCH 9/9] Sort font tokens --- proprietary/tokens/src/components/ams/skip-link.tokens.json | 2 +- proprietary/tokens/src/components/ams/table.tokens.json | 2 +- proprietary/tokens/src/components/ams/tabs.tokens.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/proprietary/tokens/src/components/ams/skip-link.tokens.json b/proprietary/tokens/src/components/ams/skip-link.tokens.json index a52aa3fc90..d33b8276ff 100644 --- a/proprietary/tokens/src/components/ams/skip-link.tokens.json +++ b/proprietary/tokens/src/components/ams/skip-link.tokens.json @@ -4,8 +4,8 @@ "background-color": { "value": "{ams.color.primary-blue}" }, "color": { "value": "{ams.color.primary-white}" }, "font-family": { "value": "{ams.text.font-family}" }, - "font-weight": { "value": "{ams.text.font-weight.normal}" }, "font-size": { "value": "{ams.text.level.6.font-size}" }, + "font-weight": { "value": "{ams.text.font-weight.normal}" }, "line-height": { "value": "{ams.text.level.6.line-height}" }, "outline-offset": { "value": "{ams.focus.outline-offset}" }, "padding-block": { "value": "{ams.space.inside.xs}" }, diff --git a/proprietary/tokens/src/components/ams/table.tokens.json b/proprietary/tokens/src/components/ams/table.tokens.json index 21457161a5..fede742d34 100644 --- a/proprietary/tokens/src/components/ams/table.tokens.json +++ b/proprietary/tokens/src/components/ams/table.tokens.json @@ -3,8 +3,8 @@ "table": { "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, - "font-weight": { "value": "{ams.text.font-weight.normal}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, + "font-weight": { "value": "{ams.text.font-weight.normal}" }, "line-height": { "value": "{ams.text.level.5.line-height}" }, "caption": { "font-weight": { "value": "{ams.text.font-weight.bold}" } diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json index 5babee0b4d..403e9630ae 100644 --- a/proprietary/tokens/src/components/ams/tabs.tokens.json +++ b/proprietary/tokens/src/components/ams/tabs.tokens.json @@ -9,8 +9,8 @@ "color": { "value": "{ams.color.primary-blue}" }, "cursor": { "value": "{ams.action.activate.cursor}" }, "font-family": { "value": "{ams.text.font-family}" }, - "font-weight": { "value": "{ams.text.font-weight.normal}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, + "font-weight": { "value": "{ams.text.font-weight.normal}" }, "line-height": { "value": "{ams.text.level.5.line-height}" }, "outline-offset": { "value": "-0.25rem" }, "padding-block": { "value": ".5rem" },