@nubisco/ui 5.32.0 → 5.32.1

package/src/styles/_theme-api.scss

@@ -54,6 +54,7 @@
 @use 'sass:string';
 @use 'accent' as accent;
 @use 'logic' as logic;
+@use 'logic/ink' as ink;
 @use 'variables/categories' as categories;
 
 /// The tints every palette colour is expanded into, matching the library's own
@@ -177,6 +178,7 @@ $a11y-roles:
   @if $palette != () or map.keys($light) != () or $light != () {
     [data-nb-theme='#{$id}'] {
       @include _palette($palette);
+      @include _ink-reset($light);
       @include _emit($light, $palette);
     }
   }
@@ -187,31 +189,47 @@ $a11y-roles:
    * single-attribute block above, so the dark half wins inside a dark document
    * regardless of the order the stylesheets happen to be concatenated in.
    */
-  @if map.keys($dark) != () or $dark != () {
+  @if map.keys($dark) != () or $dark != () or _has-ink($light) {
     .dark[data-nb-theme='#{$id}'],
     .dark [data-nb-theme='#{$id}'] {
-      @include _ink-reset($dark);
+      @include _ink-reset($dark, $light);
       @include _emit($dark, $palette);
     }
   }
 }
 
-/// The variants whose ink the dark theme lifts toward white.
-$_ink-variants: primary, secondary, success, info, warning, danger;
+/// Whether a token map colours any variant that ink applies to.
+@function _has-ink($tokens) {
+  @each $variant in ink.$variants {
+    @if map.has-key($tokens, $variant) {
+      @return true;
+    }
+  }
+  @return false;
+}
 
-/// Turns the dark ink lift off for every variant a theme gives its own dark
-/// colour.
+/// Turns the ink lift off for every variant a theme gives its own colour.
 ///
-/// The library's dark lift (`--nb-c-<variant>-ink-lift`, see
-/// `logic/_ink.scss`) is sized for the library's own dark colours. A theme that
-/// picks a dark colour has picked it for contrast already (every category accent
-/// clears AA on all four dark layers), and lifting it further would only wash it
-/// out. Emitted before the theme's own keys, so a theme that does want a lift
+/// The library's lifts (`--nb-c-<variant>-ink-lift`, see `logic/_ink.scss`)
+/// are sized for the library's own colours. A theme that picks a colour has
+/// picked it for contrast already (every category accent clears AA on all four
+/// layers of its mode), and moving it further would only wash it out or muddy
+/// it. Emitted before the theme's own keys, so a theme that does want a lift
 /// can still pass `primary-ink-lift` and win.
-@mixin _ink-reset($tokens) {
-  @each $variant in $_ink-variants {
+///
+/// The light scope applies in both modes, so its reset would also reach a dark
+/// document. A variant the theme colours only in light therefore gets the
+/// library's dark lift back in the dark scope: its light colour is what shows
+/// there, and it was not picked for a dark layer.
+///
+/// @param {Map} $tokens - the mode being emitted
+/// @param {Map} $light - the light map, when emitting the dark scope
+@mixin _ink-reset($tokens, $light: ()) {
+  @each $variant in ink.$variants {
     @if map.has-key($tokens, $variant) {
       --nb-c-#{$variant}-ink-lift: 0%;
+    } @else if map.has-key($light, $variant) {
+      --nb-c-#{$variant}-ink-lift: #{map.get(ink.$dark-lifts, $variant) or 0%};
     }
   }
 }

package/src/styles/_theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:color';
 @use 'sass:map';
 @use 'accent';
+@use 'logic/ink';
 @use 'config';
 @use 'variables/layout';
 @use 'variables/colors';
@@ -168,6 +169,13 @@
     --nb-c-secondary-active: var(--nb-c-plain-black-850);
     --nb-c-secondary-active-a11y: var(--nb-c-plain-black-850-a11y);
 
+    // Ink: a semantic colour drawn as text or an outline straight onto a
+    // layer (an outlined button, a drop-zone label) moves away from the
+    // surface, toward black here and toward white in .dark, by a per-variant
+    // lift sized for WCAG AA on every layer. See `logic/_ink.scss`.
+    --nb-c-ink-toward: var(--nb-c-black);
+    @include ink.lifts(ink.$light-lifts);
+
     --nb-c-success: var(--nb-c-emerald-reflection-600);
     --nb-c-success-a11y: var(--nb-c-emerald-reflection-600-a11y);
     --nb-c-success-hover: var(--nb-c-emerald-reflection-700);
@@ -668,12 +676,14 @@
     // fighting the components' scoped-style specificity.
     --nb-shell-panel-header-height: calc(var(--nb-base-unit) * 3.5); // 28px
     --nb-shell-panel-gap: 1px; // hairline separator, not a spacing step
-    --nb-shell-panel-bg: var(--nb-c-surface);
-    --nb-shell-panel-border: 1px solid var(--nb-c-border);
+    // --nb-shell-panel-bg, -border and -header-border are deliberately NOT
+    // declared here. Their defaults read the panel's own layer (`--nb-c-surface`
+    // and `--nb-c-border` on the panel), which only resolves on the panel
+    // element: declared at :root they froze to layer 1 and every NbShellPanel
+    // painted layer 1 wherever it sat. ShellPanel.vue writes the fallbacks.
     // Transparent by default so the header reads as part of the panel; set it
     // when a product wants the header bar tinted against its own content.
     --nb-shell-panel-header-bg: transparent;
-    --nb-shell-panel-header-border: 1px solid var(--nb-c-border);
     // How much of the body a bottom panel claims at its intermediate (`default`)
     // size. A share rather than a length: the point of that size is to show part
     // of the panel and part of the page at once, which has to hold at any window
@@ -912,18 +922,9 @@
         colors.get-color('chicken-comb', 400)
       )};
 
-    // Ink lift: how far each semantic colour moves toward white when it is
-    // drawn as text or an outline straight onto a dark layer (an outlined
-    // button, a drop-zone label). See `logic/_ink.scss`. Each value is the
-    // smallest whole lift that clears WCAG AA on all four dark layers and on
-    // the 14% pressed wash, plus two points of margin. The light theme
-    // declares none, so ink there is the colour itself.
-    --nb-c-primary-ink-lift: 48%;
-    --nb-c-secondary-ink-lift: 56%;
-    --nb-c-success-ink-lift: 21%;
-    --nb-c-info-ink-lift: 43%;
-    --nb-c-warning-ink-lift: 6%;
-    --nb-c-danger-ink-lift: 46%;
+    // Ink moves toward white on a dark layer. Lifts in `logic/_ink.scss`.
+    --nb-c-ink-toward: var(--nb-c-white);
+    @include ink.lifts(ink.$dark-lifts);
 
     // Component states
     --nb-c-component-inactive: #{colors.get-color('nouveau-gray', 500)};

package/src/styles/grid/_mixins.scss

@@ -4,11 +4,25 @@
 
 @mixin generate-styles($prefix) {
   // grid
+  //
+  // A span is its share of the row minus its share of the gaps, so spans that
+  // add up to the full row fit beside each other with the parent's gap
+  // between them: 8 + 8 is (100% - gap) / 2 each. The parent tells its
+  // children its gap and whether it is laid out as a row (only a row's gap is
+  // horizontal) through two custom properties it sets on them directly, below.
   @each $column in common.$var-columns-top {
     &.#{$prefix}grid-#{$column} {
-      flex-basis: calc((100% * #{$column}) / #{grid.$grid-columns});
-      max-width: calc((100% * #{$column}) / #{grid.$grid-columns});
-      min-width: calc((100% * #{$column}) / #{grid.$grid-columns});
+      $span: calc(
+        (100% * #{$column}) /
+          #{grid.$grid-columns} - var(--nb-grid-parent-gap, 0px) *
+          var(--nb-grid-parent-row, 1) *
+          #{grid.$grid-columns -
+          $column} /
+          #{grid.$grid-columns}
+      );
+      flex-basis: $span;
+      max-width: $span;
+      min-width: $span;
     }
   }
   @each $column in common.$var-columns-bottom {
@@ -22,10 +36,16 @@
     flex-direction: row;
     // width: 100%;
     // overflow-x: hidden;
+    > * {
+      --nb-grid-parent-row: 1;
+    }
   }
   &.#{$prefix}col {
     flex-direction: column;
     // width: 100%;
+    > * {
+      --nb-grid-parent-row: 0;
+    }
   }
 
   // wrap
@@ -112,6 +132,9 @@
   @each $gap in map.keys(grid.$gap-ratios) {
     &.#{$prefix}gap-#{$gap} {
       gap: map.get(grid.$gap-ratios, $gap);
+      > * {
+        --nb-grid-parent-gap: #{map.get(grid.$gap-ratios, $gap)};
+      }
     }
   }
 }

package/src/styles/grid/index.scss

@@ -9,6 +9,11 @@
 @mixin defaults-root-styles {
   box-sizing: border-box;
   display: flex;
+  // A grid without a gap class has no gap for its spans to share, whatever
+  // the grid around it uses. Its gap class, being more specific, sets it.
+  > * {
+    --nb-grid-parent-gap: 0px;
+  }
   &.flex {
     flex: 1;
   }

package/src/styles/logic/_ink.scss

@@ -1,34 +1,73 @@
+@use 'sass:map';
+
 /// A semantic colour drawn as ink: text, an outline or an icon set directly on a
 /// surface, with no fill of its own behind it.
 ///
 /// The semantic colours (`--nb-c-primary`, `--nb-c-secondary`, ...) are picked
 /// first as FILLS, with their `-a11y` foreground on top. Drawn straight onto a
-/// surface they are a different pair, and in the dark theme several of them do
-/// not survive it: the dark secondary is a mid grey chosen to carry white text,
-/// and as the label of an outlined button it measured 1.21:1 to 2.15:1 against
-/// the four dark layers.
+/// surface they are a different pair, and several of them do not survive it.
+/// In dark mode the secondary is a mid grey chosen to carry white text, and as
+/// the label of an outlined button it measured 1.21:1 to 2.15:1 on the dark
+/// layers. In light mode the warning amber measured 1.75:1 to 2.06:1, and the
+/// success green 2.69:1 to 3.16:1.
 ///
-/// So ink lifts the colour toward white by `--nb-c-<variant>-ink-lift`. The
-/// light theme does not declare the lift, so the fallback of 0% returns the
-/// colour unchanged and light mode is pixel-identical. The dark theme declares
-/// one per variant, each the smallest lift that clears WCAG AA (4.5:1) on all
-/// four dark layers and on the 14% wash an outlined button paints when pressed.
-/// `tests/inkContrast.test.ts` measures it.
+/// So ink moves the colour away from the surface: toward
+/// `--nb-c-ink-toward` (black in light mode, white in dark) by
+/// `--nb-c-<variant>-ink-lift`. Each lift is the smallest whole value that
+/// clears WCAG AA (4.5:1) on all four layers of its theme, and on the 8% hover
+/// and 14% pressed washes an outlined button paints under its own label, plus
+/// two points of margin. A variant that already clears it has no lift.
+/// `tests/inkContrast.test.ts` measures every one.
 ///
 /// The mix is resolved on the element that paints, not at `:root`, so a product
 /// that re-points `--nb-c-primary` (on `:root` or on a themed subtree) gets ITS
-/// primary lifted, never the library's. A named theme that sets its own dark
-/// colour for a variant resets that variant's lift to 0%, because it chose that
-/// colour for contrast already (see `theme()` in `_theme-api.scss`).
+/// primary moved, never the library's. A named theme that sets its own colour
+/// for a variant resets that variant's lift to 0% in that mode, because it chose
+/// that colour for contrast already (see `theme()` in `_theme-api.scss`).
 ///
+/// @group @nubisco/colors
+
+/// Light-theme lifts, toward black.
+/// @type Map
+$light-lifts: (
+  success: 34%,
+  info: 14%,
+  warning: 46%,
+  danger: 22%,
+);
+
+/// Dark-theme lifts, toward white.
+/// @type Map
+$dark-lifts: (
+  primary: 48%,
+  secondary: 56%,
+  success: 21%,
+  info: 43%,
+  warning: 6%,
+  danger: 46%,
+);
+
+/// The variants ink applies to.
+$variants: primary, secondary, success, info, warning, danger;
+
+/// Declares one theme's lifts. Variants absent from the map get 0%, written
+/// out, so a theme scope never inherits the other mode's value.
+///
+/// @param {Map} $lifts - `$light-lifts` or `$dark-lifts`
+@mixin lifts($lifts) {
+  @each $variant in $variants {
+    --nb-c-#{$variant}-ink-lift: #{map.get($lifts, $variant) or 0%};
+  }
+}
+
 /// @param {String} $variant - primary, secondary, success, info, warning or danger
 /// @return {String} a `color-mix()` expression
 /// @access public
-/// @group @nubisco/colors
 @function ink($variant) {
   @return color-mix(
     in srgb,
     var(--nb-c-#{$variant}),
-    var(--nb-c-white) var(--nb-c-#{$variant}-ink-lift, 0%)
+    var(--nb-c-ink-toward, var(--nb-c-white))
+      var(--nb-c-#{$variant}-ink-lift, 0%)
   );
 }