@loidolt/theme-styles 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Chris Loidolt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@loidolt/theme-styles",
+  "version": "0.2.0",
+  "description": "Base styles, fonts, accessibility helpers, and utilities for Loidolt applications",
+  "license": "MIT",
+  "type": "module",
+  "style": "./src/index.css",
+  "exports": {
+    ".": "./src/index.css",
+    "./tokens": "./src/tokens.css",
+    "./dark": "./src/dark.css",
+    "./dark-auto": "./src/dark-auto.css",
+    "./base": "./src/base.css",
+    "./accessibility": "./src/accessibility.css",
+    "./utilities": "./src/utilities.css",
+    "./components": "./src/components.css",
+    "./fonts/*": "./src/fonts/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "build": "node -e \"console.log('theme-styles: source CSS is publish-ready')\""
+  },
+  "dependencies": {
+    "@loidolt/theme-tokens": "^0.2.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/loidolt/loidolt-theme.git",
+    "directory": "packages/styles"
+  }
+}

package/src/accessibility.css

@@ -0,0 +1,73 @@
+/* Deep slice: assumes the token custom properties are already loaded.
+   Import '@loidolt/theme-styles/tokens' (or the whole '@loidolt/theme-styles') first. */
+:where(:focus-visible) {
+  outline: 2px solid var(--loidolt-focus-ring);
+  outline-offset: 2px;
+}
+:where(:focus:not(:focus-visible)) {
+  outline: none;
+}
+/*
+ * A scroll container clips an outset ring against its own edge, and children that fill the
+ * container have nowhere to put one. Draw it inside those instead — same 2px indicator,
+ * just on the other side of the border box. Zero specificity, declared after the rule above,
+ * so it overrides by document order without escalating specificity.
+ */
+:where(.ldt-topbar__nav, .ldt-table-wrap, .ldt-sidebar, .ldt-dialog__body) :where(:focus-visible) {
+  outline-offset: -2px;
+}
+
+.ldt-visually-hidden,
+.ldt-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.ldt-skip-link {
+  position: fixed;
+  z-index: var(--loidolt-z-skip-link);
+  top: 0;
+  left: 0;
+  padding: 0.75rem 1rem;
+  color: var(--loidolt-on-accent);
+  background: var(--loidolt-accent);
+  transform: translateY(-110%);
+}
+.ldt-skip-link:focus {
+  transform: translateY(0);
+}
+.ldt-touch-target {
+  min-width: 44px;
+  min-height: 44px;
+}
+
+/*
+ * No `!important` here. Inside a cascade layer it would beat even an app's unlayered
+ * `!important`, since importance reverses layer order — an app could not opt a deliberate
+ * animation back in. This file is imported into `loidolt.a11y`, the last of our layers, so
+ * plain declarations already override every component animation while app CSS still wins.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where(*, *::before, *::after) {
+    scroll-behavior: auto;
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+    transition-duration: 0.01ms;
+  }
+}
+
+@media (forced-colors: active) {
+  :where(button, input, select, textarea, [role='button']) {
+    border: 1px solid ButtonText;
+  }
+  :where(:focus-visible) {
+    outline-color: Highlight;
+  }
+}

package/src/base.css

@@ -0,0 +1,52 @@
+/* Deep slice: assumes the token custom properties are already loaded.
+   Import '@loidolt/theme-styles/tokens' (or the whole '@loidolt/theme-styles') first. */
+:where(*, *::before, *::after) {
+  box-sizing: border-box;
+}
+:where(html) {
+  color-scheme: light;
+  background: var(--loidolt-background);
+  font-family: var(--loidolt-font-display);
+  font-size: 100%;
+  line-height: var(--loidolt-font-line-height-normal);
+}
+:where(body) {
+  min-width: 20rem;
+  min-height: 100dvh;
+  margin: 0;
+  color: var(--loidolt-text);
+  background: var(--loidolt-background);
+  -webkit-font-smoothing: antialiased;
+}
+:where(button, input, select, textarea) {
+  color: inherit;
+  font: inherit;
+}
+:where(button, summary) {
+  cursor: pointer;
+}
+:where(button:disabled, input:disabled, select:disabled, textarea:disabled) {
+  cursor: not-allowed;
+}
+:where(a) {
+  color: var(--loidolt-text-accent);
+  text-underline-offset: 0.18em;
+}
+:where(img, svg, video) {
+  display: block;
+  max-width: 100%;
+}
+:where(h1, h2, h3, h4, p) {
+  margin-block-start: 0;
+}
+:where(h1, h2, h3, h4) {
+  font-weight: 500;
+  line-height: var(--loidolt-font-line-height-tight);
+}
+:where(code, pre, kbd, samp) {
+  font-family: var(--loidolt-font-mono);
+}
+:where(::selection) {
+  color: var(--loidolt-on-accent);
+  background: var(--loidolt-accent);
+}