@scattered-light/loomiere-base-ui 0.0.0-stage → 0.1.0

package/dist/styles/reset/accessibility.css

@@ -0,0 +1,65 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
+
+:focus-visible {
+  outline: var(--sl-a11y-focus-outline-width) solid var(--sl-focus-ring);
+  outline-offset: var(--sl-a11y-focus-outline-offset);
+  border-radius: var(--sl-a11y-focus-ring-radius);
+}
+
+a:focus-visible {
+  outline: var(--sl-a11y-focus-outline-width) solid var(--sl-focus-ring);
+  outline-offset: var(--sl-a11y-link-focus-outline-offset);
+  border-radius: var(--sl-a11y-link-focus-ring-radius);
+}
+
+input:invalid,
+textarea:invalid,
+select:invalid {
+  border-color: var(--sl-status-error, #ef4444);
+}
+
+input:invalid:focus,
+textarea:invalid:focus,
+select:invalid:focus {
+  outline-color: var(--sl-status-error, #ef4444);
+}
+
+[required]::after,
+[aria-required='true']::after {
+  content: ' *';
+  color: var(--sl-status-error, #ef4444);
+}
+
+@media (prefers-contrast: more) {
+button,
+  a {
+    text-decoration: underline;
+  }
+}
+
+@media (forced-colors: active) {
+  :focus-visible {
+    outline: 2px solid CanvasText;
+  }
+
+  button,
+  a {
+    border: 1px solid ButtonText;
+  }
+}
+
+@media (pointer: coarse) {
+  button,
+  a,
+  input[type='button'],
+  input[type='submit'],
+  input[type='reset'],
+  input[type='checkbox'],
+  input[type='radio'],
+  select,
+  textarea {
+    min-height: var(--sl-a11y-min-touch-target);
+    min-width: var(--sl-a11y-min-touch-target);
+  }
+}

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

@@ -0,0 +1,110 @@
+/* @scattered-light/loomiere-base-ui 0.1.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 */
+:focus {
+  outline: none;
+}
+
+button:focus,
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.sr-only,
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.sr-only-focusable:focus,
+.visually-hidden-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: inherit;
+  margin: inherit;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+main {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+main:focus {
+  outline: none;
+}
+
+/* Covers every component: transitions and animations finish at once, so
+   component styles don't repeat their own reduced-motion rules. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+[aria-live='polite'],
+[aria-live='assertive'] {
+  position: relative;
+}
+
+:disabled,
+[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+@media print {
+  a[href^='http']::after {
+    content: ' (' attr(href) ')';
+    font-size: 0.8em;
+    font-weight: normal;
+  }
+
+  a[href^='#']::after,
+  a[href^='/']::after {
+    content: '';
+  }
+
+  * {
+    background: white !important;
+    color: black !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    page-break-after: avoid;
+  }
+
+  img {
+    page-break-inside: avoid;
+  }
+}

package/dist/styles/reset/reset.css

@@ -0,0 +1,442 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* CSS Reset - Mojave Theme */
+
+/* ============================================
+    FONTS
+    ============================================ */
+@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');
+
+
+/* ============================================
+    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/package.json

@@ -1,6 +1,52 @@
 {
   "name": "@scattered-light/loomiere-base-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.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": {
+    "type": "git",
+    "url": "git+https://github.com/ScatteredLight/loomiere.git",
+    "directory": "packages/loomiere-base-ui"
+  },
+  "baseUi": {
+    "target": "1.9.0",
+    "$comment": "The @base-ui/react release these styles were written and checked against. npm run check:base-ui compares it with the installed version."
+  },
+  "type": "module",
+  "sideEffects": ["*.css"],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles/index.css",
+    "./styles/*": "./dist/styles/*",
+    "./package.json": "./package.json"
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "npm run check:base-ui && tsup && node build/build-styles.mjs",
+    "check:base-ui": "node build/check-base-ui.mjs",
+    "prepack": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  },
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "peerDependencies": {
+    "@base-ui/react": "^1.9.0",
+    "@material-symbols/font-400": "^0.39.0 || ^0.44.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@scattered-light/loomiere": "0.1.0"
+  }
+}