feat!: Allow setting a background colour on Tabs List (#1142)

Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com>
Amsterdam · Mar 29, 2024 · fedb1a1 · fedb1a1
1 parent d91d889
commit fedb1a1
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss
@@ -5,15 +5,19 @@
 
 @import "../../common/breakpoint";
 
+@mixin reset-button {
+  background-color: transparent;
+  border: 0;
+}
+
 .ams-tabs__list {
+  background-color: var(--ams-tabs-list-background-color);
   border-bottom: var(--ams-tabs-list-border-bottom);
   display: flex;
   overflow-x: auto;
 }
 
 .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);
@@ -24,6 +28,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);

diff --git 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
@@ -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
@@ -2,16 +2,15 @@
   "ams": {
     "tabs": {
       "list": {
+        "background-color": { "value": "{ams.color.primary-white}" },
         "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}" },
-        "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" },