@teseor/css 1.0.0

package/src/05-utilities/text/text.scss

@@ -0,0 +1,246 @@
+// Text utilities
+
+// Uses logical properties for international/RTL support
+@layer utilities {
+  // ==========================================================================
+  // TEXT ALIGNMENT - use start/end for RTL support
+  // ==========================================================================
+  .text-start {
+    text-align: start;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-end {
+    text-align: end;
+  }
+
+  .text-justify {
+    text-align: justify;
+  }
+
+  // ==========================================================================
+  // FONT WEIGHT
+  // ==========================================================================
+  .font-normal {
+    font-weight: var(--ui-weight-normal);
+  }
+
+  .font-medium {
+    font-weight: var(--ui-weight-medium);
+  }
+
+  .font-semibold {
+    font-weight: var(--ui-weight-semibold);
+  }
+
+  .font-bold {
+    font-weight: var(--ui-weight-bold);
+  }
+
+  // ==========================================================================
+  // FONT SIZE - uses modular scale tokens
+  // ==========================================================================
+  .text-xs {
+    font-size: var(--ui-font-size-xs);
+    line-height: var(--ui-leading-xs);
+  }
+
+  .text-sm {
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-leading-sm);
+  }
+
+  .text-md {
+    font-size: var(--ui-font-size-md);
+    line-height: var(--ui-leading-md);
+  }
+
+  .text-lg {
+    font-size: var(--ui-font-size-lg);
+    line-height: var(--ui-leading-lg);
+  }
+
+  .text-xl {
+    font-size: var(--ui-font-size-xl);
+    line-height: var(--ui-leading-xl);
+  }
+
+  .text-2xl {
+    font-size: var(--ui-font-size-2xl);
+    line-height: var(--ui-leading-2xl);
+  }
+
+  .text-3xl {
+    font-size: var(--ui-font-size-3xl);
+    line-height: var(--ui-leading-3xl);
+  }
+
+  .text-4xl {
+    font-size: var(--ui-font-size-4xl);
+    line-height: var(--ui-leading-4xl);
+  }
+
+  // ==========================================================================
+  // SEMANTIC TEXT ROLES
+  // ==========================================================================
+
+  // Lead - Opening paragraph style
+  .text-lead {
+    font-size: var(--ui-lead-size);
+    font-weight: var(--ui-lead-weight);
+    line-height: var(--ui-lead-line-height);
+    letter-spacing: var(--ui-lead-tracking);
+  }
+
+  // Eyebrow - Small caps label above headings
+  .text-eyebrow {
+    font-size: var(--ui-eyebrow-size);
+    font-weight: var(--ui-eyebrow-weight);
+    line-height: var(--ui-eyebrow-line-height);
+    letter-spacing: var(--ui-eyebrow-tracking);
+    text-transform: uppercase;
+  }
+
+  // Caption - Labels, hints, metadata
+  .text-caption {
+    font-size: var(--ui-caption-size);
+    font-weight: var(--ui-caption-weight);
+    line-height: var(--ui-caption-line-height);
+    letter-spacing: var(--ui-caption-tracking);
+  }
+
+  // Body small - Secondary text
+  .text-body-sm {
+    font-size: var(--ui-body-sm-size);
+    font-weight: var(--ui-body-sm-weight);
+    line-height: var(--ui-body-sm-line-height);
+    letter-spacing: var(--ui-body-sm-tracking);
+  }
+
+  // ==========================================================================
+  // FONT FAMILY
+  // ==========================================================================
+  .font-sans {
+    font-family: var(--ui-font-sans);
+  }
+
+  .font-mono {
+    font-family: var(--ui-font-mono);
+  }
+
+  // ==========================================================================
+  // TEXT DECORATION
+  // ==========================================================================
+  .underline {
+    text-decoration: underline;
+  }
+
+  .line-through {
+    text-decoration: line-through;
+  }
+
+  .no-underline {
+    text-decoration: none;
+  }
+
+  // ==========================================================================
+  // TEXT TRANSFORM
+  // ==========================================================================
+  .uppercase {
+    text-transform: uppercase;
+  }
+
+  .lowercase {
+    text-transform: lowercase;
+  }
+
+  .capitalize {
+    text-transform: capitalize;
+  }
+
+  .normal-case {
+    text-transform: none;
+  }
+
+  // ==========================================================================
+  // TEXT COLOR
+  // ==========================================================================
+  .text-primary {
+    color: var(--ui-color-primary);
+  }
+
+  .text-muted {
+    color: var(--ui-color-text-muted);
+  }
+
+  .text-success {
+    color: var(--ui-color-success);
+  }
+
+  .text-warning {
+    color: var(--ui-color-warning);
+  }
+
+  .text-danger {
+    color: var(--ui-color-danger);
+  }
+
+  // ==========================================================================
+  // TEXT WRAPPING
+  // ==========================================================================
+  .truncate {
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .whitespace-normal {
+    white-space: normal;
+  }
+
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+
+  .whitespace-pre {
+    white-space: pre;
+  }
+
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+
+  // ==========================================================================
+  // LINE LENGTH (for readable text)
+  // ==========================================================================
+  .prose {
+    max-inline-size: 65ch;
+  }
+
+  .prose-sm {
+    max-inline-size: 45ch;
+  }
+
+  .prose-lg {
+    max-inline-size: 75ch;
+  }
+
+  // ==========================================================================
+  // LETTER SPACING
+  // ==========================================================================
+  .tracking-display {
+    letter-spacing: var(--ui-tracking-display);
+  }
+
+  .tracking-body {
+    letter-spacing: var(--ui-tracking-body);
+  }
+
+  .tracking-caps {
+    letter-spacing: var(--ui-tracking-caps);
+  }
+}

package/src/05-utilities/view-transition/index.scss

@@ -0,0 +1,198 @@
+// Enable cross-document view transitions for same-origin navigation
+@view-transition {
+  navigation: auto;
+}
+
+@layer utilities {
+  // Animation keyframes
+  @keyframes vt-fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes vt-fade-out {
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes vt-slide-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(1.25rem);
+    }
+  }
+
+  @keyframes vt-slide-out-up {
+    to {
+      opacity: 0;
+      transform: translateY(-1.25rem);
+    }
+  }
+
+  @keyframes vt-slide-in-down {
+    from {
+      opacity: 0;
+      transform: translateY(-1.25rem);
+    }
+  }
+
+  @keyframes vt-slide-out-down {
+    to {
+      opacity: 0;
+      transform: translateY(1.25rem);
+    }
+  }
+
+  @keyframes vt-slide-in-start {
+    from {
+      opacity: 0;
+      transform: translateX(-1.25rem);
+    }
+  }
+
+  @keyframes vt-slide-out-start {
+    to {
+      opacity: 0;
+      transform: translateX(-1.25rem);
+    }
+  }
+
+  @keyframes vt-slide-in-end {
+    from {
+      opacity: 0;
+      transform: translateX(1.25rem);
+    }
+  }
+
+  @keyframes vt-slide-out-end {
+    to {
+      opacity: 0;
+      transform: translateX(1.25rem);
+    }
+  }
+
+  @keyframes vt-scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
+  @keyframes vt-scale-out {
+    to {
+      opacity: 0;
+      transform: scale(1.05);
+    }
+  }
+
+  // Named element utilities
+  .transition-name-sidebar { view-transition-name: sidebar; }
+  .transition-name-main { view-transition-name: main; }
+  .transition-name-header { view-transition-name: header; }
+  .transition-name-hero { view-transition-name: hero; }
+  .transition-name-card { view-transition-name: card; }
+  .transition-name-modal { view-transition-name: modal; }
+
+  // Animation presets
+  .transition-name-slide-up { view-transition-name: slide-up; }
+  .transition-name-slide-down { view-transition-name: slide-down; }
+  .transition-name-slide-start { view-transition-name: slide-start; }
+  .transition-name-slide-end { view-transition-name: slide-end; }
+  .transition-name-scale { view-transition-name: scale; }
+  .transition-name-fade { view-transition-name: fade; }
+
+  // Disable transition for specific element
+  .transition-name-none { view-transition-name: none; }
+
+  // Static elements (no animation, just persist)
+  ::view-transition-old(sidebar),
+  ::view-transition-new(sidebar),
+  ::view-transition-old(header),
+  ::view-transition-new(header) {
+    animation: none;
+  }
+
+  // Default crossfade timing
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation-duration: var(--ui-duration-base);
+    animation-timing-function: var(--ui-ease-default);
+  }
+
+  // Fade animation
+  ::view-transition-old(fade) {
+    animation: vt-fade-out var(--ui-duration-base) var(--ui-ease-out);
+  }
+
+  ::view-transition-new(fade) {
+    animation: vt-fade-in var(--ui-duration-base) var(--ui-ease-out);
+  }
+
+  // Slide up animation
+  ::view-transition-old(slide-up),
+  ::view-transition-old(main) {
+    animation: vt-slide-out-up var(--ui-duration-base) var(--ui-ease-out);
+  }
+
+  ::view-transition-new(slide-up),
+  ::view-transition-new(main) {
+    animation: vt-slide-in-up var(--ui-duration-base) var(--ui-ease-out);
+  }
+
+  // Slide down animation
+  ::view-transition-old(slide-down) {
+    animation: vt-slide-out-down var(--ui-duration-base) var(--ui-ease-out);
+  }
+
+  ::view-transition-new(slide-down) {
+    animation: vt-slide-in-down var(--ui-duration-base) var(--ui-ease-out);
+  }
+
+  // Slide start (left in LTR) animation
+  ::view-transition-old(slide-start) {
+    animation: vt-slide-out-start var(--ui-duration-base) var(--ui-ease-out);
+  }
+
+  ::view-transition-new(slide-start) {
+    animation: vt-slide-in-start var(--ui-duration-base) var(--ui-ease-out);
+  }
+
+  // Slide end (right in LTR) animation
+  ::view-transition-old(slide-end) {
+    animation: vt-slide-out-end var(--ui-duration-base) var(--ui-ease-out);
+  }
+
+  ::view-transition-new(slide-end) {
+    animation: vt-slide-in-end var(--ui-duration-base) var(--ui-ease-out);
+  }
+
+  // Scale animation
+  ::view-transition-old(scale),
+  ::view-transition-old(modal),
+  ::view-transition-old(card) {
+    animation: vt-scale-out var(--ui-duration-base) var(--ui-ease-out);
+  }
+
+  ::view-transition-new(scale),
+  ::view-transition-new(modal),
+  ::view-transition-new(card) {
+    animation: vt-scale-in var(--ui-duration-base) var(--ui-ease-out);
+  }
+
+  // Hero morphs automatically (browser interpolates position/size)
+  ::view-transition-group(hero) {
+    animation-duration: var(--ui-duration-slow);
+    animation-timing-function: var(--ui-ease-in-out);
+  }
+
+  // Accessibility: disable animations for reduced motion
+  @media (prefers-reduced-motion: reduce) {
+    ::view-transition-old(*),
+    ::view-transition-new(*),
+    ::view-transition-group(*) {
+      animation-duration: 0s !important;
+    }
+  }
+}

package/src/05-utilities/view-transition/view-transition.api.json

@@ -0,0 +1,21 @@
+{
+  "name": "view-transition",
+  "type": "utility",
+  "description": "CSS View Transitions API utilities for smooth page navigation animations",
+  "utilities": [
+    "transition-name-sidebar",
+    "transition-name-main",
+    "transition-name-header",
+    "transition-name-hero",
+    "transition-name-card",
+    "transition-name-modal",
+    "transition-name-slide-up",
+    "transition-name-slide-down",
+    "transition-name-slide-start",
+    "transition-name-slide-end",
+    "transition-name-scale",
+    "transition-name-fade",
+    "transition-name-none"
+  ],
+  "cssVars": []
+}

package/src/05-utilities/view-transition/view-transition.docs.json

@@ -0,0 +1,63 @@
+{
+  "id": "view-transition-utils",
+  "type": "utility",
+  "title": "View Transition",
+  "description": "CSS View Transitions API utilities for smooth page navigation. Enabled by default; unsupported browsers work normally.",
+  "api": "view-transition.api.json",
+  "sections": [
+    {
+      "title": "Static elements",
+      "description": "Elements that persist without animation. Sidebar and header stay fixed during page transitions.",
+      "examples": [
+        {
+          "code": "<header class=\"ui-transition-name-header\">...</header>\n<nav class=\"ui-transition-name-sidebar\">...</nav>"
+        }
+      ]
+    },
+    {
+      "title": "Slide animations",
+      "description": "Content slides in/out in different directions.",
+      "examples": [
+        {
+          "code": "<main class=\"ui-transition-name-main\">Slides up</main>\n<main class=\"ui-transition-name-slide-up\">Slides up</main>\n<main class=\"ui-transition-name-slide-down\">Slides down</main>\n<main class=\"ui-transition-name-slide-start\">Slides from left</main>\n<main class=\"ui-transition-name-slide-end\">Slides from right</main>"
+        }
+      ]
+    },
+    {
+      "title": "Scale and fade",
+      "description": "Scale effect for modals/cards, fade for subtle transitions.",
+      "examples": [
+        {
+          "code": "<div class=\"ui-transition-name-scale\">Scales in/out</div>\n<div class=\"ui-transition-name-card\">Card scales</div>\n<div class=\"ui-transition-name-modal\">Modal scales</div>\n<div class=\"ui-transition-name-fade\">Fades in/out</div>"
+        }
+      ]
+    },
+    {
+      "title": "Hero morph",
+      "description": "Same element on both pages morphs (position/size interpolates). Use same class on source and target.",
+      "examples": [
+        {
+          "code": "<!-- Page 1: thumbnail -->\n<img class=\"ui-transition-name-hero\" src=\"product.jpg\">\n\n<!-- Page 2: full image -->\n<img class=\"ui-transition-name-hero\" src=\"product.jpg\">"
+        }
+      ]
+    },
+    {
+      "title": "Disable",
+      "description": "Exclude an element from view transitions.",
+      "examples": [
+        {
+          "code": "<div class=\"ui-transition-name-none\">No transition</div>"
+        }
+      ]
+    },
+    {
+      "title": "Preserving scroll position",
+      "description": "View transitions snapshot elements, resetting scroll. Use `pagereveal` event to restore scroll before paint.",
+      "examples": [
+        {
+          "code": "// Save scroll on navigation\nlink.addEventListener('click', () => {\n  sessionStorage.setItem('scroll', sidebar.scrollTop);\n});\n\n// Restore before page reveals\nwindow.addEventListener('pagereveal', () => {\n  const saved = sessionStorage.getItem('scroll');\n  if (saved) sidebar.scrollTop = parseInt(saved, 10);\n});"
+        }
+      ]
+    }
+  ]
+}

package/src/05-utilities/visually-hidden/index.scss

@@ -0,0 +1,38 @@
+// Visually Hidden - accessible hiding utility
+// Hides content visually but keeps it accessible to screen readers
+
+@use '../../00-config/tokens/variables' as t;
+
+@layer utilities {
+  .visually-hidden {
+    position: absolute;
+
+    block-size: calc(#{t.$unit} / 8);
+    inline-size: calc(#{t.$unit} / 8);
+    padding: 0;
+    margin: calc(#{t.$unit} / -8);
+    overflow: hidden;
+
+    white-space: nowrap;
+
+    border: 0;
+    clip: rect(0 0 0 0); // stylelint-disable-line property-no-deprecated
+    clip-path: inset(50%);
+  }
+
+  // Focusable variant - becomes visible on focus
+  .visually-hidden--focusable:focus,
+  .visually-hidden--focusable:active {
+    position: static;
+
+    block-size: auto;
+    inline-size: auto;
+    margin: 0;
+    overflow: visible;
+
+    white-space: normal;
+
+    clip: auto; // stylelint-disable-line property-no-deprecated
+    clip-path: none;
+  }
+}

package/src/05-utilities/visually-hidden/visually-hidden.api.json

@@ -0,0 +1,8 @@
+{
+  "name": "visually-hidden",
+  "element": "span",
+  "modifiers": {
+    "focusable": { "type": "boolean" }
+  },
+  "cssVars": []
+}

package/src/05-utilities/visually-hidden/visually-hidden.docs.json

@@ -0,0 +1,29 @@
+{
+  "id": "visually-hidden",
+  "type": "utility",
+  "title": "Visually Hidden",
+  "description": "Hides content visually while keeping it accessible to screen readers. Use for skip links and accessible labels.",
+  "api": "visually-hidden.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "description": "Content is hidden visually but announced by screen readers",
+      "examples": [
+        {
+          "html": "<button>Submit<span class=\"ui-visually-hidden\"> form to contact support</span></button>",
+          "code": "<button>\n  Submit\n  <span class=\"ui-visually-hidden\"> form to contact support</span>\n</button>"
+        }
+      ]
+    },
+    {
+      "title": "Focusable (Skip Link)",
+      "description": "Becomes visible when focused - useful for skip links",
+      "examples": [
+        {
+          "html": "<a href=\"#main\" class=\"ui-visually-hidden ui-visually-hidden--focusable\" style=\"position: relative;\">Skip to main content</a>",
+          "code": "<a href=\"#main\" class=\"ui-visually-hidden ui-visually-hidden--focusable\">\n  Skip to main content\n</a>"
+        }
+      ]
+    }
+  ]
+}

package/src/99-debug/grid-overlay.scss

@@ -0,0 +1,79 @@
+/* Debug grid overlay - add class="debug-grid" to body or any container */
+.debug-grid,
+.debug-grid-rows,
+.debug-baseline {
+  position: relative;
+}
+
+.debug-grid {
+  --debug-color: hsl(var(--ui-hue-primary) 80% 50% / 0.15);
+}
+
+.debug-grid::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--ui-z-debug);
+
+  block-size: 100%;
+  inline-size: 100%;
+  min-block-size: 100vh;
+
+  background-image: linear-gradient(to right, var(--debug-color) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px);
+  pointer-events: none;
+  background-size: var(--unit) var(--unit);
+  background-position: 0 0;
+}
+
+/* Stronger grid at row intervals (16px) */
+.debug-grid-rows {
+  --debug-color: hsl(var(--ui-hue-primary) 80% 50% / 0.1);
+  --debug-color-strong: hsl(var(--ui-hue-primary) 80% 50% / 0.25);
+}
+
+.debug-grid-rows::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--ui-z-debug);
+
+  block-size: 100%;
+  inline-size: 100%;
+  min-block-size: 100vh;
+
+  background-image: linear-gradient(to right, var(--debug-color) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--debug-color-strong) 1px, transparent 1px);
+  pointer-events: none;
+  background-size: var(--unit) var(--unit), var(--unit) var(--unit), var(--unit) var(--ui-row);
+  background-position: 0 0;
+}
+
+/* Baseline grid only (horizontal lines) */
+.debug-baseline {
+  --debug-color: hsl(var(--ui-hue-danger) 80% 50% / 0.2);
+}
+
+.debug-baseline::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--ui-z-debug);
+
+  block-size: 100%;
+  inline-size: 100%;
+  min-block-size: 100vh;
+
+  background-image: linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px);
+  pointer-events: none;
+  background-size: 100% var(--unit);
+}
+
+/* Element boundaries outline */
+.debug-outline * {
+  outline: 1px solid hsl(0 100% 50% / 0.5);
+}

package/src/99-debug/index.scss

@@ -0,0 +1 @@
+@forward "./grid-overlay";