@dbcdk/react-components 0.0.183 → 0.0.185

package/dist/components/chip/Chip.module.css

@@ -107,7 +107,9 @@
 /* Status variants */
 
 .neutral {
-  --chip-bg: var(--color-neutral);
+  /* Tinted from the current foreground color instead of a fixed gray, so it
+     stays visible whether it's sitting on a white panel or a muted toolbar. */
+  --chip-bg: color-mix(in srgb, var(--color-fg-default) 12%, transparent);
   --chip-fg: var(--color-fg-default);
   --chip-border: transparent;
   --chip-outlined-border: var(--color-border-subtle);

package/dist/components/tabs/Tabs.module.css

@@ -199,26 +199,26 @@
   overflow: hidden;
 }
 
-.filled .tabList {
+.filled > .tabList {
   border-block-end: 1px solid var(--color-border-subtle);
   background: var(--color-bg-toolbar);
   inline-size: 100%;
 }
 
-.filled .tabButtons {
+.filled > .tabList > .tabButtons {
   display: flex;
 }
 
-.filled .addTabButton {
+.filled > .tabList > .addTabButton {
   border: 1px solid transparent;
   border-block-end: 0;
 }
 
-.filled .addTabButton:hover {
+.filled > .tabList > .addTabButton:hover {
   background: var(--color-bg-toolbar-hover);
 }
 
-.filled .tab {
+.filled > .tabList > .tabButtons > .tab {
   border: 1px solid transparent;
   border-block-end: 0;
   color: var(--color-fg-muted);
@@ -229,14 +229,14 @@
     border-color var(--transition-fast) var(--ease-standard);
 }
 
-.filled .tab:not(.active):hover {
+.filled > .tabList > .tabButtons > .tab:not(.active):hover {
   background: var(--color-bg-toolbar-hover);
   color: var(--color-fg-default);
 }
 
 /* Active tab physically overlaps the tabList separator by 1px so its
    erased bottom border seamlessly merges with the panel below. */
-.filled .tab.active {
+.filled > .tabList > .tabButtons > .tab.active {
   background: var(--color-bg-surface);
   border-color: var(--color-border-subtle);
   border-block-end-color: var(--color-bg-surface);
@@ -247,7 +247,7 @@
   color: var(--color-fg-default);
 }
 
-.filled .tabContent {
+.filled > .tabContent {
   background: var(--color-bg-surface);
   border: 1px solid var(--color-border-subtle);
   border-block-start: none;
@@ -268,22 +268,22 @@
   padding-block-end: var(--spacing-xs);
 }
 
-.outlined .tab {
+.outlined > .tabList > .tabButtons > .tab {
   color: var(--color-fg-muted);
   border-block-end: 2px solid var(--color-border-default);
   transition: color var(--transition-fast) var(--ease-standard);
 }
 
-.outlined .tab:not(.active):hover {
+.outlined > .tabList > .tabButtons > .tab:not(.active):hover {
   color: var(--color-brand);
 }
 
-.outlined .tab.active {
+.outlined > .tabList > .tabButtons > .tab.active {
   color: var(--color-brand);
   border-block-end-color: var(--color-brand);
 }
 
-.outlined .tabContent {
+.outlined > .tabContent {
   background: transparent;
   padding: 0;
 }
@@ -292,19 +292,19 @@
    Panel style modifier
    ========================= */
 
-.panelStyle .tabList {
+.panelStyle > .tabList {
   border: var(--border-width-thin) solid var(--color-border-default);
   border-block-end: 0;
 }
 
 /* When panelStyle is on, tabs look “embedded” (no bottom border indicators) */
-.panelStyle .tab {
+.panelStyle > .tabList > .tabButtons > .tab {
   border-block-end: 0;
 }
 
 /* In filled mode, keep the filled content panel visuals (already handled above).
    In outlined mode with panelStyle, give the content a panel container too. */
-.panelStyle.outlined .tabContent {
+.panelStyle.outlined > .tabContent {
   border: var(--border-width-thin) solid var(--color-border-default);
   background: var(--color-bg-surface);
   padding: var(--spacing-lg);
@@ -327,17 +327,17 @@
     box-shadow: none;
   }
 
-  .filled .tabList {
+  .filled > .tabList {
     inline-size: 100%;
   }
 
-  .filled .tabContent,
-  .panelStyle.outlined .tabContent {
+  .filled > .tabContent,
+  .panelStyle.outlined > .tabContent {
     padding-block: var(--spacing-md);
     padding-inline: var(--spacing-md);
   }
 
-  .panelStyle .tabList {
+  .panelStyle > .tabList {
     border: 0;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.183",
+  "version": "0.0.185",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",