@smwb/ui-styles 2.0.0 → 2.1.0

package/less/components/badge/badge.less

@@ -51,6 +51,14 @@
     background-color: var(--smui-primaryColor);
   }
 
+  &_warning {
+    background-color: var(--smui-warningColor);
+    // The amber fill is too light for the white the other colors use; see
+    // @badgeWarningColor. An app that retunes --smui-warningColor at runtime
+    // retunes this ink to match, through --smui-badgeWarningColor.
+    color: var(--smui-badgeWarningColor, @badgeWarningColor);
+  }
+
   &_no-content {
     padding: 0;
     width: 8px;

package/less/components/tabs/tab/tab.less

@@ -200,9 +200,13 @@
   }
 }
 
-// Compact tabs (Tabs dense): labels as written — no capitals, no letter spacing —
-// and less padding, so more tabs fit in a row.
+// Compact tabs (Tabs dense): a shorter row, labels as written — no capitals, no letter spacing —
+// and less padding, so more tabs fit in a row. The height is a token, not a literal, and min-height
+// alone holds the row: the tab is a flex container and its label sets its own line box, so the plain
+// tab's line-height already fits it. A dense row keeps its scroll buttons, its indicator and a
+// closable tab's controls inside that height.
 .smwb-tabs--dense .smwb-tab {
+  min-height: var(--smui-tabDenseHeight, @tabDenseHeight);
   padding: 0 @tabDensePaddingX;
   font-weight: 500;
   letter-spacing: normal;

package/less/default/globals/default.variables.less

@@ -127,6 +127,10 @@
 @appBarWindowControlsRight: 138px;
 
 @badgePaddingX: 6px; // off-grid
+// The `warning` badge fills with the theme's amber, which is light: white text on
+// it measures 3.1:1, under the 4.5:1 WCAG AA needs at the badge's 12px label, so
+// this one carries dark ink instead of @onWarningColor. 5.5:1 on @warningColor.
+@badgeWarningColor: #1c1b1f;
 
 @buttonGap: @smui-space-sm;
 @buttonPaddingSmall: @smui-space-xs 10px; // 10 off-grid
@@ -256,6 +260,7 @@
 @tabIconPaddingBottom: @smui-space-xs;
 @tabLabelPaddingLeft: @smui-space-sm;
 @tabDensePaddingX: @smui-space-md;
+@tabDenseHeight: 36px; // off-grid; the row height of Tabs dense, the height of the compact onreel strips
 @tabCloseSize: @smui-space-6; // the close button of a closable tab
 @tabControlsGap: @smui-space-xs; // between a tab's close button, its actions and the row's next tab
 @tabsFadeWidth: 2.5rem; // scrollable row: the fading edge beyond which tabs are hidden

package/less/variables.less

@@ -57,6 +57,10 @@
 
   --smui-dividerColor: @dividerColor;
 
+  // Mode-independent (the amber is the same in dark), so light-only, like --smui-control-h-*:
+  // a dark-mixin copy would reset a consumer's :root override in dark mode.
+  --smui-badgeWarningColor: @badgeWarningColor;
+
   --smui-buttonOutlinedHoverBg: @buttonOutlinedHoverBg;
   --smui-buttonOutlinedActiveBg: @buttonOutlinedActiveBg;
   --smui-buttonOutlinedFocusBg: @buttonOutlinedFocusBg;
@@ -88,6 +92,7 @@
 
   --smui-tabIconColor: @tabIconColor;
   --smui-tabColorDefault: @tabColorDefault;
+  --smui-tabDenseHeight: @tabDenseHeight;
 
   --smui-sliderColor: @sliderColor;
   --smui-sliderDisabledColor: @sliderDisabledColor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-styles",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Framework-agnostic LESS design tokens and component styles (smwb-*) shared by the @smwb UI libraries. Prebuilt aggregate CSS lives in @smwb/ui-css.",
   "license": "MIT",
   "sideEffects": [