@webority/theme 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {
@@ -32,6 +32,6 @@
     "sass": "~1.77.8"
   },
   "scripts": {
-    "build": "sass index.scss dist/webority-theme.css --load-path=node_modules --style=compressed --no-source-map --quiet-deps"
+    "build": "sass index.scss dist/webority-theme.css --load-path=node_modules --style=compressed --no-source-map --quiet-deps && node ../../scripts/sync-rcl-assets.mjs theme"
   }
 }

package/scss/_components.scss

@@ -697,3 +697,45 @@ html.is-scrolling *::-webkit-scrollbar-thumb {
         transition: none;
     }
 }
+
+
+// ---- Theme-flipped typography utilities ------------------------------------
+// Bootstrap builds `.text-body` as `rgba(var(--bs-body-color-rgb), …)` — an RGB
+// TRIPLET baked in at compile time (37, 47, 74). Bridging `--bs-body-color`
+// cannot reach it, so the utility keeps the light-mode colour under
+// [data-theme="dark"]. Redefined against the token, with !important to match
+// Bootstrap's own utility declaration.
+//
+// `.text-body-secondary`, `.text-muted` and `.text-body-emphasis` are NOT
+// redefined: they resolve --bs-secondary-color / --bs-emphasis-color, which the
+// alias layer already bridges, so they flip correctly on their own.
+.text-body {
+    color: var(--color-text) !important;
+}
+
+// Font-family utilities Bootstrap has no equivalent for. Products were declaring
+// these locally, which is how a font choice drifts between surfaces.
+.font-mono {
+    font-family: var(--bs-font-monospace);
+}
+.font-display {
+    font-family: var(--bs-body-font-family);
+    font-weight: 500;
+    letter-spacing: -0.02em;
+}
+
+// A hairline rule that follows the theme. `<hr>` carries Bootstrap's own opacity
+// maths, which does not read as a divider on a dark surface.
+.divider {
+    height: 1px;
+    border: 0;
+    margin: 0;
+    background: var(--color-border);
+}
+.divider-vertical {
+    width: 1px;
+    height: auto;
+    align-self: stretch;
+    border: 0;
+    background: var(--color-border);
+}

package/scss/_variables.scss

@@ -200,3 +200,20 @@ $link-hover-decoration: underline;
 $focus-ring-width:    3px;
 $focus-ring-color:    rgba($primary, 0.30);   // tracks $primary automatically
 $focus-ring-blur:     0;
+
+
+// ---- Table ----------------------------------------------------------
+// Set HERE, not in the component layer, and the reason is specificity.
+// Bootstrap emits `.table > :not(caption) > * > * { padding: … }` at (0,1,1).
+// The base table rules are wrapped in `:where()` — deliberately, so variants like
+// `.table-ledger` (0,1,2) can override them — which makes them (0,0,3). A class
+// beats three type selectors, so a `padding` declared there loses to Bootstrap's
+// and never applies.
+//
+// Overriding the SCSS variable makes Bootstrap's own high-specificity rule emit our
+// value, so the base table is styled without the component layer having to outrank
+// Bootstrap. Variants that set their own padding are unaffected — theirs still wins.
+// (Cell colour and header background take the same approach one level down, through
+// `--bs-table-color` / `--bs-table-bg`; see the base `.table` rules.)
+$table-cell-padding-y:  0.75rem;   // 12px
+$table-cell-padding-x:  0.75rem;   // 12px