@scattered-light/loomiere-base-ui 0.2.0 → 0.4.0

package/dist/styles/components/Tabs.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Tabs - Mojave Theme
  *
  * No component tokens. The divider, the selected line and color, hover and the disabled
@@ -31,11 +31,11 @@
 /* Tab: a transparent line under it that turns accent when selected. */
 .TabsTab {
   all: unset;
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -54,11 +54,11 @@
 }
 
 .TabsTab[data-active] {
-  font-family: var(--sl-font-base-selected-font-family);
-  font-size: var(--sl-font-base-selected-font-size);
-  font-weight: var(--sl-font-base-selected-font-weight);
-  line-height: var(--sl-font-base-selected-line-height);
-  letter-spacing: var(--sl-font-base-selected-letter-spacing);
+  font-family: var(--sl-font-selected-base-font-family);
+  font-size: var(--sl-font-selected-base-font-size);
+  font-weight: var(--sl-font-selected-base-font-weight);
+  line-height: var(--sl-font-selected-base-line-height);
+  letter-spacing: var(--sl-font-selected-base-letter-spacing);
   color: var(--sl-disclosure-selected-color);
   border-bottom-color: var(--sl-disclosure-indicator-color);
 }
@@ -85,11 +85,11 @@
 
 /* Panel */
 .TabsPanel {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   padding: var(--sl-space-4);
   color: var(--sl-text-primary);
 }
@@ -101,28 +101,28 @@
 
 /* Sizes: the minimize tier for small tabs, more room for large ones. */
 .TabsRoot[data-size='sm'] .TabsTab {
-  font-family: var(--sl-font-minimize-font-family);
-  font-size: var(--sl-font-minimize-font-size);
-  font-weight: var(--sl-font-minimize-font-weight);
-  line-height: var(--sl-font-minimize-line-height);
-  letter-spacing: var(--sl-font-minimize-letter-spacing);
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
   padding: var(--sl-space-1-5) var(--sl-space-3);
 }
 
 .TabsRoot[data-size='sm'] .TabsTab[data-active] {
-  font-family: var(--sl-font-minimize-selected-font-family);
-  font-size: var(--sl-font-minimize-selected-font-size);
-  font-weight: var(--sl-font-minimize-selected-font-weight);
-  line-height: var(--sl-font-minimize-selected-line-height);
-  letter-spacing: var(--sl-font-minimize-selected-letter-spacing);
+  font-family: var(--sl-font-selected-minimize-font-family);
+  font-size: var(--sl-font-selected-minimize-font-size);
+  font-weight: var(--sl-font-selected-minimize-font-weight);
+  line-height: var(--sl-font-selected-minimize-line-height);
+  letter-spacing: var(--sl-font-selected-minimize-letter-spacing);
 }
 
 .TabsRoot[data-size='sm'] .TabsPanel {
-  font-family: var(--sl-font-minimize-font-family);
-  font-size: var(--sl-font-minimize-font-size);
-  font-weight: var(--sl-font-minimize-font-weight);
-  line-height: var(--sl-font-minimize-line-height);
-  letter-spacing: var(--sl-font-minimize-letter-spacing);
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
   padding: var(--sl-space-3);
 }
 

package/dist/styles/components/Toast.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Toast - Mojave Theme
  *
  * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
@@ -164,20 +164,20 @@
    ============================================ */
 
 .Title {
-  font-family: var(--sl-font-maximize-md-font-family);
-  font-size: var(--sl-font-maximize-md-font-size);
-  font-weight: var(--sl-font-maximize-md-font-weight);
-  line-height: var(--sl-font-maximize-md-line-height);
-  letter-spacing: var(--sl-font-maximize-md-letter-spacing);
+  font-family: var(--sl-font-title-base-font-family);
+  font-size: var(--sl-font-title-base-font-size);
+  font-weight: var(--sl-font-title-base-font-weight);
+  line-height: var(--sl-font-title-base-line-height);
+  letter-spacing: var(--sl-font-title-base-letter-spacing);
   margin: 0;
 }
 
 .Description {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   color: var(--notice-text, var(--sl-notice-description-color));
   margin: 0;
   margin-top: var(--sl-notice-text-gap);

package/dist/styles/components/Toggle.css

@@ -1,7 +1,9 @@
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle - Mojave Theme
  * A toggle is a button that stays pressed: the same heights, padding, gap and
- * trigger text style as a button of the same size.
+ * trigger text style as a button of the same size. Pressed, it takes its emphasis level's
+ * pressed look (standard unless data-emphasis on it or its group says otherwise), so the
+ * brand's emphasis ladder decides how loud an "on" toggle is.
  */
 
 /* ============================================
@@ -17,11 +19,11 @@
   gap: var(--sl-gap-control);
   height: var(--sl-control-height-md);
   padding-inline: var(--sl-control-padding-inline);
-  font-family: var(--sl-font-base-trigger-font-family);
-  font-size: var(--sl-font-base-trigger-font-size);
-  font-weight: var(--sl-font-base-trigger-font-weight);
-  line-height: var(--sl-font-base-trigger-line-height);
-  letter-spacing: var(--sl-font-base-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-base-font-family);
+  font-size: var(--sl-font-trigger-base-font-size);
+  font-weight: var(--sl-font-trigger-base-font-weight);
+  line-height: var(--sl-font-trigger-base-line-height);
+  letter-spacing: var(--sl-font-trigger-base-letter-spacing);
   color: var(--sl-text-primary);
   background: var(--sl-surface-base);
   border: var(--sl-stroke-default) solid var(--sl-border-default);
@@ -36,17 +38,17 @@
   border-color: var(--sl-border-strong);
 }
 
+/* An outline or ghost level rests on no fill, so pressed reads from the active fill. */
 .Toggle[data-pressed],
 .Toggle[aria-pressed='true'] {
-  background: var(--sl-interactive-tint-hover);
-  color: var(--sl-interactive-default);
-  border-color: var(--sl-border-accent);
+  background: var(--sl-e-bg-active);
+  color: var(--sl-e-fg);
+  border-color: var(--sl-e-border);
 }
 
 .Toggle[data-pressed]:hover:not([data-disabled]):not(:disabled),
 .Toggle[aria-pressed='true']:hover:not([data-disabled]):not(:disabled) {
-  background: var(--sl-interactive-tint-strong);
-  border-color: var(--sl-interactive-hover);
+  border-color: var(--sl-e-border-hover);
 }
 
 .Toggle:focus-visible {
@@ -69,22 +71,22 @@
   gap: var(--sl-gap-control-sm);
   height: var(--sl-control-height-sm);
   padding-inline: var(--sl-control-padding-inline-sm);
-  font-family: var(--sl-font-condense-trigger-font-family);
-  font-size: var(--sl-font-condense-trigger-font-size);
-  font-weight: var(--sl-font-condense-trigger-font-weight);
-  line-height: var(--sl-font-condense-trigger-line-height);
-  letter-spacing: var(--sl-font-condense-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
   border-radius: var(--sl-radius-item);
 }
 
 .Toggle[data-size='lg'] {
   height: var(--sl-control-height-lg);
   padding-inline: var(--sl-control-padding-inline-lg);
-  font-family: var(--sl-font-magnify-trigger-font-family);
-  font-size: var(--sl-font-magnify-trigger-font-size);
-  font-weight: var(--sl-font-magnify-trigger-font-weight);
-  line-height: var(--sl-font-magnify-trigger-line-height);
-  letter-spacing: var(--sl-font-magnify-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-magnify-font-family);
+  font-size: var(--sl-font-trigger-magnify-font-size);
+  font-weight: var(--sl-font-trigger-magnify-font-weight);
+  line-height: var(--sl-font-trigger-magnify-line-height);
+  letter-spacing: var(--sl-font-trigger-magnify-letter-spacing);
   border-radius: var(--sl-radius-surface);
 }
 

package/dist/styles/components/ToggleGroup.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle Group - Mojave Theme
  *
  * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the

package/dist/styles/components/Toolbar.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Toolbar - Mojave Theme
  *
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
@@ -32,11 +32,11 @@
 
 /* Link: secondary text that darkens on hover. */
 .ToolbarLink {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   display: inline-flex;
   align-items: center;
   padding-inline: var(--sl-control-padding-inline-sm);

package/dist/styles/components/Tooltip.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Tooltip - Mojave Theme
  *
  * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
@@ -15,11 +15,11 @@
 }
 
 .TooltipPopup {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   transform-origin: var(--transform-origin);
   transition:
   opacity var(--sl-popup-animation-duration) var(--sl-popup-animation-easing),

package/dist/styles/index.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
    Loomiere theme. Load the theme first:
      @import '<your theme>/tokens.css';
@@ -44,6 +44,7 @@
 @import './components/Separator.css';
 @import './components/Slider.css';
 @import './components/Switch.css';
+@import './components/Table.css';
 @import './components/Tabs.css';
 @import './components/Toast.css';
 @import './components/Toggle.css';

package/dist/styles/reset/accessibility.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {

package/dist/styles/reset/reset-accessibility.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
 
 /* Remove default focus; keyboard focus styled in accessibility-theme.css */

package/dist/styles/reset/reset-tailwind.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================

package/dist/styles/reset/reset.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================

package/dist/styles/tailwind.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Loomiere for Base UI: component styles for Tailwind CSS v4. Load Tailwind and the theme first:
      @import 'tailwindcss';
      @import '<your theme>/tokens.css';
@@ -47,6 +47,7 @@
 @import './components/Separator.css' layer(components);
 @import './components/Slider.css' layer(components);
 @import './components/Switch.css' layer(components);
+@import './components/Table.css' layer(components);
 @import './components/Tabs.css' layer(components);
 @import './components/Toast.css' layer(components);
 @import './components/Toggle.css' layer(components);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere-base-ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Base UI components styled by any Loomiere theme. Brand-free: every value is a --sl- variable.",
   "keywords": ["base-ui", "react", "components", "design-tokens", "loomiere"],
   "repository": {
@@ -49,6 +49,6 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@scattered-light/loomiere": "0.2.0"
+    "@scattered-light/loomiere": "0.4.0"
   }
 }