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

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

@@ -0,0 +1,441 @@
+/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* CSS Reset - Mojave Theme */
+
+/* ============================================
+    FONTS
+    ============================================ */
+
+
+/* ============================================
+    COLOR SCHEME HELPER
+    ============================================ */
+:root {
+  /* Follows the theme in effect (data-theme or the system), so native scrollbars and pickers match. */
+  color-scheme: var(--sl-color-scheme);
+}
+
+/* ============================================
+    BOX SIZING
+    ============================================ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* ============================================
+    OVERRIDES FOR ALL
+    ============================================ */
+* {
+  margin: 0;
+  padding: 0;
+}
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth; /* Smooth scrolling */
+  }
+
+  a {
+    transition: all 0.2s ease; /* Responsive typography adjustments */
+
+  }
+}
+
+/* ============================================
+    SCROLLBARS
+    ============================================ */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--sl-content-scrollbar-thumb) var(--sl-content-scrollbar-track);
+}
+
+*::-webkit-scrollbar {
+  width: var(--sl-space-2);
+  height: var(--sl-space-2);
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--sl-content-scrollbar-track);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--sl-content-scrollbar-thumb);
+  border-radius: 0.25rem;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--sl-content-scrollbar-thumb-hover);
+}
+
+/* ============================================
+    HTML
+    ============================================ */
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-size: 100%; /* Don't override user's browser font size */
+  -webkit-text-size-adjust: 100%; /* Prevent text size adjustment on orientation change */
+}
+
+/* ============================================
+    BODY
+    ============================================ */
+
+body {
+  /* Layout */
+  min-height: 100vh;
+  background: var(--sl-content-page-background);
+  /*Basic text styling*/
+  font-family: var(--sl-font-family-body);
+  font-size: var(--sl-font-size-md);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: var(--sl-line-height-md);
+  letter-spacing: var(--sl-letter-spacing-normal);
+  color: var(--sl-content-prose-color);
+  /* Improve text rendering for better readability */
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'kern' 1; /* Enable kerning */
+}
+
+/* ============================================
+    TYPOGRAPHY
+    ============================================ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--sl-font-family-display);
+  font-weight: var(--sl-font-weight-semibold);
+  font-size: var(--sl-font-size-md);
+  line-height: var(--sl-line-height-md);
+  letter-spacing: var(--sl-letter-spacing-normal);
+  overflow-wrap: break-word;
+}
+
+/* Paragraphs */
+p {
+  overflow-wrap: break-word;
+  max-inline-size: var(--sl-measure-base);
+  text-wrap: pretty;
+  margin-block-end: var(--sl-space-4);
+}
+
+/* Links */
+a {
+  color: var(--sl-content-link-color);
+  text-decoration: underline;
+  text-decoration-color: var(--sl-content-link-underline-color);
+  text-decoration-thickness: 0.125em;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: var(--sl-content-link-hover-color);
+    text-decoration-color: var(--sl-content-link-underline-hover-color);
+
+  }
+}
+
+/* Small text */
+small {
+  font-size: var(--sl-font-size-sm);
+  line-height: var(--sl-line-height-sm);
+}
+
+/* Emphasis */
+strong,
+b {
+  font-weight: var(--sl-font-weight-bold);
+}
+
+em,
+i {
+  font-style: italic;
+}
+
+/* Mark/Highlight */
+mark {
+  background: var(--sl-content-mark-background);
+  color: inherit;
+  padding: var(--sl-space-0-5) var(--sl-space-1-5);
+  border-radius: var(--sl-radius-sm);
+}
+
+/* Abbreviations */
+abbr[title] {
+  text-decoration: underline dotted;
+  text-decoration-color: var(--sl-color-neutral-500);
+  cursor: help;
+}
+
+/* Subscript and Superscript */
+sub,
+sup {
+  font-size: var(--sl-font-size-xs);
+  line-height: var(--sl-line-height-md);
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  inset-block-start: -var(--sl-space-2);
+}
+
+sub {
+  inset-block-end: -var(--sl-space-1);
+}
+
+/* Lists */
+ul,
+ol {
+  list-style: none;
+  max-inline-size: var(--sl-measure-base);
+  padding-inline-start: var(--sl-space-6);
+  margin-block-end: var(--sl-space-4);
+}
+
+/* Better list semantics */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+li {
+  margin-block-end: var(--sl-space-2);
+}
+
+li::marker {
+  color: var(--sl-content-list-marker-color);
+}
+
+/* Nested lists */
+li > ul,
+li > ol {
+  margin-block-start: var(--sl-space-2);
+  margin-block-end: 0;
+}
+
+/* Blockquotes */
+blockquote {
+  max-inline-size: var(--sl-measure-base);
+  margin-block: var(--sl-space-6);
+  margin-inline-start: 0;
+  padding-inline-start: var(--sl-space-6);
+  border-inline-start: var(--sl-space-1) solid var(--sl-content-blockquote-border);
+  font-size: var(--sl-font-size-xl);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: var(--sl-line-height-md);
+  letter-spacing: var(--sl-letter-spacing-normal);
+  font-style: italic;
+  color: inherit;
+}
+
+blockquote cite {
+  display: block;
+  margin-block-start: var(--sl-space-3);
+  font-size: var(--sl-font-size-sm);
+  font-style: normal;
+  color: var(--sl-content-blockquote-cite);
+}
+
+blockquote cite::before {
+  content: '— ';
+}
+
+/* Code */
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--sl-font-family-mono);
+  font-size: var(--sl-font-size-sm);
+}
+
+code {
+  padding: 0.125em 0.375em;
+  background: var(--sl-content-code-background);
+  border: var(--sl-stroke-thin) solid var(--sl-content-code-border);
+  border-radius: var(--sl-radius-sm);
+  color: var(--sl-content-code-text);
+}
+
+pre {
+  max-inline-size: 100%;
+  padding: var(--sl-space-4);
+  background: var(--sl-content-pre-background);
+  border: var(--sl-stroke-thin) solid var(--sl-content-pre-border);
+  color: var(--sl-content-pre-text);
+  border-radius: var(--sl-space-2);
+  overflow-x: auto;
+  margin-block: var(--sl-space-6);
+}
+
+pre code {
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: inherit;
+}
+
+/* ============================================
+    IMAGES AND MEDIA
+    ============================================ */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* ============================================
+    FORM ELEMENTS
+    ============================================ */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  background: transparent;
+  border: var(--sl-stroke-thin) solid transparent;
+  cursor: pointer;
+
+  /* Improve button accessibility */
+  &:disabled { 
+    cursor: not-allowed;
+  opacity: 0.6;
+  }
+}
+
+/* Remove default appearance for form controls */
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+/* Remove spinner from number inputs */
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+/* Remove default fieldset styles */
+fieldset {
+  border: var(--sl-stroke-thin) solid var(--sl-content-field-border);
+  border-radius: var(--sl-radius-sm);
+}
+
+/* ============================================
+   TABLES
+   ============================================ */
+/* Improve table accessibility */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}
+
+th {
+  text-align: left;
+  font-weight: var(--sl-font-weight-semibold);
+}
+
+/* ============================================
+    OTHER ELEMENTS
+    ============================================ */
+
+/* Remove default legend styles */
+legend {
+  padding: 0;
+}
+
+/* Keyboard input */
+kbd {
+  padding: var(--sl-space-0-5) var(--sl-space-2-5);
+  background: var(--sl-content-kbd-background);
+  color: var(--sl-content-kbd-text);
+  border-radius: var(--sl-radius-sm);
+  font-size: var(--sl-font-size-sm);
+  box-shadow: var(--sl-elevation-xs);
+}
+
+/* Horizontal rule */
+hr {
+  border: none;
+  border-block-start: var(--sl-stroke-thin) solid var(--sl-content-hr-border);
+  margin-block: var(--sl-space-8);
+}
+
+/* Hidden attribute */
+[hidden] {
+  display: none !important;
+}
+
+/* Disabled state */
+[disabled] {
+  cursor: not-allowed;
+}
+
+/* Color When User Selects Text */
+::selection {
+  background: var(--sl-content-selection-background);
+  color: var(--sl-content-selection-text);
+}
+
+::-moz-selection {
+  background: var(--sl-content-selection-background);
+  color: var(--sl-content-selection-text);
+}
+
+/* ============================================
+   PRINT STYLES
+   ============================================ */
+
+@media print {
+  body {
+    font-size: 12pt;
+    line-height: 1.5;
+    color: #000;
+  }
+
+  h1 {
+    font-size: 24pt;
+  }
+
+  h2 {
+    font-size: 20pt;
+  }
+
+  h3 {
+    font-size: 16pt;
+  }
+
+  a {
+    color: #000;
+    text-decoration: underline;
+  }
+
+  a[href^='http']::after {
+    content: ' (' attr(href) ')';
+    font-size: 0.8em;
+  }
+}

package/dist/styles/reset/reset.css

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

package/dist/styles/tailwind.css

@@ -0,0 +1,55 @@
+/* @scattered-light/loomiere-base-ui 0.2.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';
+     @import '<your theme>/exports/tailwind.css';
+     @import '@scattered-light/loomiere-base-ui/tailwind.css';
+   The reset sits in Tailwind's base layer and the components in its components layer, so a
+   utility class on a component (class="Button px-6") wins.
+   Load the fonts before tailwindcss (an @import url() after it is dropped), or with a <link>:
+     @import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@300;400;500;600;700&family=Funnel+Display:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500;600;700&display=swap'); */
+@import '@material-symbols/font-400/outlined.css';
+
+/* Document defaults, in Tailwind's base layer after its preflight. */
+@import './reset/reset-tailwind.css' layer(base);
+@import './reset/reset-accessibility.css' layer(base);
+@import './reset/accessibility.css' layer(base);
+
+/* Component styles */
+@import './components/Accordion.css' layer(components);
+@import './components/AlertDialog.css' layer(components);
+@import './components/Autocomplete.css' layer(components);
+@import './components/Avatar.css' layer(components);
+@import './components/Button.css' layer(components);
+@import './components/Checkbox.css' layer(components);
+@import './components/CheckboxGroup.css' layer(components);
+@import './components/Collapsible.css' layer(components);
+@import './components/Combobox.css' layer(components);
+@import './components/ContextMenu.css' layer(components);
+@import './components/Dialog.css' layer(components);
+@import './components/Drawer.css' layer(components);
+@import './components/Field.css' layer(components);
+@import './components/Fieldset.css' layer(components);
+@import './components/Form.css' layer(components);
+@import './components/Input.css' layer(components);
+@import './components/Menu.css' layer(components);
+@import './components/Menubar.css' layer(components);
+@import './components/Meter.css' layer(components);
+@import './components/NavigationMenu.css' layer(components);
+@import './components/NumberField.css' layer(components);
+@import './components/OTPField.css' layer(components);
+@import './components/Popover.css' layer(components);
+@import './components/PreviewCard.css' layer(components);
+@import './components/Progress.css' layer(components);
+@import './components/Radio.css' layer(components);
+@import './components/ScrollArea.css' layer(components);
+@import './components/Select.css' layer(components);
+@import './components/Separator.css' layer(components);
+@import './components/Slider.css' layer(components);
+@import './components/Switch.css' layer(components);
+@import './components/Tabs.css' layer(components);
+@import './components/Toast.css' layer(components);
+@import './components/Toggle.css' layer(components);
+@import './components/ToggleGroup.css' layer(components);
+@import './components/Toolbar.css' layer(components);
+@import './components/Tooltip.css' layer(components);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere-base-ui",
-  "version": "0.1.1",
+  "version": "0.2.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": {
@@ -24,12 +24,14 @@
       "default": "./dist/index.js"
     },
     "./styles.css": "./dist/styles/index.css",
+    "./tailwind.css": "./dist/styles/tailwind.css",
     "./styles/*": "./dist/styles/*",
+    "./design-system/*": "./dist/design-system/*",
     "./package.json": "./package.json"
   },
   "files": ["dist"],
   "scripts": {
-    "build": "npm run check:base-ui && tsup && node build/build-styles.mjs",
+    "build": "npm run check:base-ui && tsup && node build/build-styles.mjs && node build/build-design-system.mjs",
     "check:base-ui": "node build/check-base-ui.mjs",
     "prepack": "npm run build"
   },
@@ -47,6 +49,6 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@scattered-light/loomiere": "0.1.1"
+    "@scattered-light/loomiere": "0.2.0"
   }
 }