novo-elements 13.1.0 → 13.2.0-next.1

package/styles/content/misc.scss

@@ -58,7 +58,7 @@ tbody tr:nth-child(even) button:hover {
 }
 
 ::-webkit-scrollbar-thumb {
-  border-radius: 6px;
+  border-radius: var(--border-radius-lg, 6px);
   border: 2px solid var(--background-main);
 }
 
@@ -82,7 +82,7 @@ details {
   background-color: var(--background-bright);
   padding: 10px 10px 0;
   margin: 1em 0;
-  border-radius: 6px;
+  border-radius: var(--border-radius-lg, 6px);
   overflow: hidden;
 }
 
@@ -124,7 +124,7 @@ dialog {
   background-color: var(--background-bright);
   color: var(--text-main);
   border: none;
-  border-radius: 6px;
+  border-radius: var(--border-radius-lg, 6px);
   border-color: var(--border);
   padding: 10px 30px;
 }

package/styles/content/range.scss

@@ -5,7 +5,7 @@ $range-slider-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
   height: 9.5px;
   transition: 0.2s;
   background: var(--background-main);
-  border-radius: 3px;
+  border-radius: var(--border-radius-sm, 3px);
 }
 @mixin range-thumb() {
   -webkit-appearance: none;
@@ -76,12 +76,12 @@ input[type="range"]::-ms-track {
 input[type="range"]::-ms-fill-lower {
   background: var(--background-main);
   border: 0.2px solid #010101;
-  border-radius: 3px;
+  border-radius: var(--border-radius-sm, 3px);
   box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
 }
 input[type="range"]::-ms-fill-upper {
   background: var(--background-main);
   border: 0.2px solid #010101;
-  border-radius: 3px;
+  border-radius: var(--border-radius-sm, 3px);
   box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
 }

package/styles/iconography.scss

@@ -21,7 +21,7 @@ i {
       @each $entity, $color in $entity-colors {
         &.#{$entity} {
           color: $white;
-          background: $color;
+          background: getCssVarname($entity);
         }
       }
       @each $key, $color in $analytics-colors {
@@ -31,13 +31,13 @@ i {
         }
       }
       &.large {
-        font-size: 1.2rem;
+        font-size: var(--font-size-sm);
       }
     }
     &[theme="entity"] {
       @each $entity, $color in $entity-colors {
         &.#{$entity} {
-          color: $color;
+          color: getCssVarname($entity);
           background: transparent;
         }
       }

package/styles/themes/bh2026.scss

@@ -0,0 +1,134 @@
+// Maps design tokens onto the semantic CSS-variable contract for novo-elements components.
+@mixin bh2026-variables {
+  // Live color-math direction (light): elevate() brightens, recede() darkens.
+  --bg-fade-multiplier: 1;
+
+  // Typeface — modern uses Inter (classic uses Montserrat). Override BOTH --font-family-base
+  // (html) and --font-family-body (body, used by most content) so all text picks up Inter.
+  --font-family-base: var(--typography-font-family-base, Inter), Helvetica, Arial, sans-serif;
+  --font-family-body: var(--typography-font-family-base, Inter), Helvetica, Arial, sans-serif;
+
+  // bh2026 tokens are authored at a 16px rem base (web standard), unlike bh2022's 10px,
+  // but the conversion to 16px base would be a massive rewrite, so spacing gets corrected here.
+  --spacing-xs:  0.25rem;
+  --spacing-sm:  0.5rem;
+  --spacing-md:  1rem;
+  --spacing-lg:  1.5rem;
+  --spacing-xl:  2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
+
+  // --- Surfaces ---
+  --background-body:   var(--color-gray-white, #ffffff);
+  --background-main:   var(--color-background-default, #f8fafc);
+  --background-bright: var(--color-gray-white, #ffffff);
+  --background-dark:   var(--color-background-subtle-hover, #e2e2e2);
+  --background-muted:  var(--color-background-subtle, #f1f5fc);
+
+  // --- Text / content ---
+  --text-main:      var(--color-content-headline, #282828);
+  --text-secondary: var(--color-content-body, #314158);
+  --text-muted:     var(--color-content-subtle, #8ca1b9);
+  --text-disabled:  var(--color-content-disabled, #707070);
+
+  // --- Borders ---
+  --border:              var(--color-border-default, #f0f5f9);
+  --border-2:            var(--color-border-subtle, #f0f5f9);
+  --border-hard:         var(--color-border-emphasized, #282828);
+  --border-radius-sm:    0.8rem;
+  --border-radius-md:    1.6rem;
+  --border-radius-round: var(--border-radius-sm);
+
+  // --- Interactive ---
+  --links:     var(--color-content-link, #282828);
+  --focus:     var(--color-border-strong, #314158);
+  --selection: var(--color-border-strong, #314158);
+
+  // --- Typography scale (map semantic sizes onto modern composite roles) ---
+  --font-size-caption: var(--typography-meta-default-font-size, 1.4rem);
+  --font-size-label:   var(--typography-label-lg-font-size, 1.4rem);
+  --font-size-text:    var(--typography-body-default-font-size, 1.4rem);
+  --font-size-button:  var(--typography-button-font-size, 1.2rem);
+  --font-size-title:   var(--typography-title-font-size, 2.4rem);
+  --font-size-tab:     var(--typography-tabs-default-font-size, 1.4rem);
+
+  // --- Button ---
+  --button-background:     #e2e2e2;
+  --button-color:          var(--color-content-subtle, #5d7798);
+  --button-focus-ring:     0 0 0 2px #4a89dc;
+  --button-font-weight:    var(--typography-font-weight-400, 400);
+  --button-gap:            var(--spacing-8, 0.8rem);
+  --button-height:         3.5rem;
+  --button-icon-margin:    0;
+  --button-letter-spacing: var(--typography-button-letter-spacing, 0);
+  --button-padding-x:      var(--spacing-16, 1.6rem);
+  --button-padding-y:      var(--spacing-8, 0.8rem);
+  --button-radius:         999px;
+  --button-text-transform: none;
+  --button-text:           var(--color-content-subtle, #5d7798);
+
+  // Button variants
+  --button-primary-background: #1450a0;
+  --button-primary-color:      #ffffff;
+  --button-primary-border:     none;
+  --button-secondary-text:     var(--color-content-subtle, #5d7798);
+  --button-secondary-border:   1px solid var(--color-border-subtle, #8ca1b9);
+
+  // Best guess currently at the refresh accent color
+  --color-positive: #0095da;
+}
+
+:root[data-theme='bh2026'],
+:root.theme-bh2026 {
+  @include bh2026-variables();
+}
+
+// bh2026: primary icon defaults to left. row-reverse moves the default right-side icon
+// visually before the text. Explicit side="left" reverts to row (icon already first in DOM).
+:root[data-theme='bh2026'] [theme="primary"],
+:root.theme-bh2026 [theme="primary"] {
+  flex-direction: row-reverse;
+
+  &[side="left"] {
+    flex-direction: row;
+  }
+}
+
+// Dropdown trigger buttons keep the collapse icon on the right.
+// This override wins over the base rule (0,3,1 > 0,3,0).
+:root[data-theme='bh2026'] novo-dropdown [theme="primary"],
+:root.theme-bh2026 novo-dropdown [theme="primary"] {
+  flex-direction: row;
+}
+
+// bh2026: dialogue does not share pill format on hover
+:root[data-theme='bh2026'] [theme="dialogue"],
+:root.theme-bh2026 [theme="dialogue"] {
+  border-radius: var(--border-radius-sm, 0.8rem);
+}
+
+// bh2026 dark
+:root[data-theme='bh2026'].theme-dark {
+  @include dark-variables();
+
+  // bh2026-specific: flip the live elevate()/recede() color-math direction for dark
+  // (light sets +1 in bh2026-variables). Affects bh2026-migrated components only.
+  --bg-fade-multiplier: -1;
+
+  // bh2026-only component vars aren't part of the shared classic palette — point them at
+  // the shared dark button/border vars so they track bh2022's dark palette too.
+  --button-background: var(--button-background);
+  --button-color:      var(--button-text);
+
+  // bh2026 components color text via the modern `--color-content-*` tokens (charcoal in
+  // light), not the classic `--text-*` vars — so `dark-variables` alone leaves them dark
+  // (e.g. tab labels stay black-on-dark). Remap the content ramp onto the shared dark text
+  // palette so tabs/stepper/field/table/breadcrumbs/data-table all flip to light.
+  --color-content-headline:   var(--text-main);
+  --color-content-body:       var(--text-main);
+  --color-content-default:    var(--text-main);
+  --color-content-link:       var(--text-main);
+  --color-content-link-hover: var(--text-main);
+  --color-content-subtle:     var(--text-muted);
+  --color-content-disabled:   var(--text-disabled);
+}

package/styles/themes/dark.scss

@@ -4,6 +4,11 @@
   --background-bright: #{$color-moonlight}; //#1a242f
   --background-dark: #{$color-onyx}; //e2e2e2
   --background-muted: #{$color-neutral};
+  --theme-background-body: #{$color-midnight}; //#202b38;
+  --theme-background-main: #{$color-darkness}; //#161f27;
+  --theme-background-bright: #{$color-moonlight}; //#1a242f
+  --theme-background-dark: #{$color-onyx}; //e2e2e2
+  --theme-background-muted: #{$color-neutral};
   --selection: #{$color-ocean}; // #1c76c5;
   --text-selection: #{$color-white};
   --text-main: #{$color-light};
@@ -25,7 +30,7 @@
   --highlight: #efdb43;
 }
 
-.theme-dark {
+:root.theme-dark {
   @include dark-variables();
 
   ::-webkit-calendar-picker-indicator {

package/styles/themes/light.scss

@@ -7,13 +7,17 @@
   --background-dark: #{$color-silver}; //e2e2e2
   --background-muted: #{$color-sand}; //f4f4f4
   --text-main: #{$color-charcoal}; //#363636;
+  --text-secondary: #{$font-color-secondary}; //#dbdbdb
   --text-muted: #{$color-neutral}; //#70777f;
   --text-disabled: #{$color-slate}; //#70777f;
   --selection: #{$color-ocean}; //#9e9e9e;
   --text-selection: #{$color-white};
+  --text-bg-contrast: #{$color-white};
   --links: #{$color-ocean};
   --focus: #{$color-ocean};
   --border: #{$color-light}; //#dbdbdb;
+  --border-2: #{$color-off-white}; //#f7f7f7
+  --border-hard: #{$color-dark}; //#3d464d
   --code: #{$color-job};
   --animation-duration: 0.1s;
   --button-background: #{$light};

package/styles/typography.scss

@@ -87,7 +87,7 @@ address {
 
 mark {
   background-color: var(--highlight);
-  border-radius: 2px;
+  border-radius: var(--border-radius-xsm, 2px);
   padding: 0 2px 0 2px;
   color: #000;
 }
@@ -114,8 +114,8 @@ h6.novo-section-header {
   display: flex;
   width: 100%;
   padding: 1rem 0.5rem 1rem 1.5rem;
-  margin-left: -1.5rem;
-  margin-right: -1.5rem;
+  margin-left: calc(-1 * var(--spacing-xl));
+  margin-right: calc(-1 * var(--spacing-xl));
   > i {
     display: flex;
     margin-right: 10px;

package/styles/variables.scss

@@ -68,12 +68,12 @@ $disabled: $color-stone;
 // --------------------------------------------------
 $spacing-rules: (
   "none": $spacing-none,
-  "px": $spacing-px,
-  "xs": $spacing-xs,
-  "sm": $spacing-sm,
-  "md": $spacing-md,
-  "lg": $spacing-lg,
-  "xl": $spacing-xl,
+  "px": var(--spacing-px),
+  "xs": var(--spacing-xs),
+  "sm": var(--spacing-sm),
+  "md": var(--spacing-md),
+  "lg": var(--spacing-lg),
+  "xl": var(--spacing-xl),
 );
 
 // Sizes