@thinking.tools/teff 1.0.0 → 1.0.2

package/css/00-base.css

@@ -0,0 +1,319 @@
+@layer theme, base, components, animations, utilities;
+
+@layer base {
+  *, *::before, *::after {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  * {
+    margin: 0;
+  }
+
+  html {
+    tab-size: 4;
+  }
+
+  /* Top-layer elements don't inherit from body. Set explicitly. */
+  body, dialog, [popover] {
+    font-family: var(--font-sans);
+    font-size: var(--text-regular);
+    line-height: var(--leading-normal);
+    color: var(--foreground);
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  ::selection {
+    background-color: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.2));
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--input) transparent;
+  }
+
+  main {
+    padding-block-start: var(--space-8);
+  }
+
+  /* Unknown-element fallback for pre-2023 browsers (search is a landmark). */
+  search {
+    display: block;
+  }
+
+  img, picture, video, canvas, svg {
+    max-width: 100%;
+  }
+
+  p, h1, h2, h3, h4, h5, h6, li, dt, dd, figcaption, summary, label, td, th {
+    overflow-wrap: break-word;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: var(--font-semibold);
+    line-height: 1.25;
+    letter-spacing: var(--tracking-tight);
+    text-wrap: balance;
+
+    &:first-child {
+      margin-block-start: 0;
+    }
+  }
+
+  h1 {
+    font-size: var(--text-1);
+    margin: var(--space-10) 0 var(--space-6);
+  }
+
+  h2 {
+    font-size: var(--text-2);
+    margin: var(--space-8) 0 var(--space-5);
+  }
+
+  h3 {
+    font-size: var(--text-3);
+    margin: var(--space-6) 0 var(--space-4);
+  }
+
+  h4 {
+    font-size: var(--text-4);
+    margin: var(--space-5) 0 var(--space-3);
+  }
+
+  h5 {
+    font-size: var(--text-5);
+    margin: var(--space-4) 0 var(--space-2);
+  }
+
+  h6 {
+    font-size: var(--text-regular);
+    margin: var(--space-4) 0 var(--space-2);
+  }
+
+  p {
+    margin-block-end: var(--space-4);
+    text-wrap: pretty;
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+
+  a {
+    color: var(--primary);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: color var(--transition-fast);
+
+    &:hover {
+      color: rgb(from var(--primary) r g b / 0.8);
+    }
+  }
+
+  strong, b {
+    font-weight: var(--font-semibold);
+  }
+
+  em, i, dfn {
+    font-style: italic;
+  }
+
+  small {
+    font-size: var(--text-7);
+  }
+
+  kbd {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    padding: calc(var(--space-1) / 2) var(--space-1);
+    background-color: var(--faint);
+    border: 1px solid var(--input);
+    /* Thicker bottom edge reads as keycap depth. */
+    border-bottom-width: 2px;
+    border-radius: var(--radius-small);
+
+    /* Combo wrapper: <kbd><kbd>Cmd</kbd> + <kbd>K</kbd></kbd> */
+    &:has(> kbd) {
+      font-size: 1em;
+      padding: 0;
+      background: none;
+      border: none;
+    }
+  }
+
+  samp, var {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+  }
+
+  abbr[title] {
+    text-decoration: underline dotted;
+    text-underline-offset: 2px;
+    cursor: help;
+  }
+
+  sub, sup {
+    /* Keep super/subscripts from expanding the line box. */
+    font-size: 0.75em;
+    line-height: 0;
+  }
+
+  del {
+    color: var(--danger);
+  }
+
+  ins {
+    color: var(--success);
+    text-decoration-color: rgb(from var(--success) r g b / 0.4);
+  }
+
+  s {
+    color: var(--muted-foreground);
+  }
+
+  u {
+    /* Unarticulated annotation — spec's example is marking misspellings. */
+    text-decoration: underline wavy var(--danger);
+    text-underline-offset: 2px;
+  }
+
+  code {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    padding: calc(var(--space-1) / 2) var(--space-1);
+    background-color: var(--faint);
+    border-radius: var(--radius-small);
+  }
+
+  pre {
+    font-family: var(--font-mono);
+    padding: var(--space-4);
+    background-color: var(--faint);
+    border-radius: var(--radius-medium);
+    overflow-x: auto;
+    margin-block-end: var(--space-4);
+
+    code {
+      padding: 0;
+      background: none;
+      border-radius: 0;
+    }
+  }
+
+  blockquote {
+    border-inline-start: 4px solid var(--border);
+    padding-inline-start: var(--space-4);
+    margin: var(--space-4) 0;
+    color: var(--muted-foreground);
+    font-style: italic;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: var(--space-8) 0;
+  }
+
+  ul, ol {
+    padding-inline-start: var(--space-6);
+    margin-block-end: var(--space-4);
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  li {
+    margin-block-end: var(--space-1);
+  }
+
+  dl {
+    margin-block-end: var(--space-4);
+
+    & dt {
+      font-weight: var(--font-medium);
+
+      &:not(:first-child) {
+        margin-block-start: var(--space-2);
+      }
+    }
+
+    & dd {
+      color: var(--muted-foreground);
+    }
+
+    /* Two-column key–value layout. */
+    &[data-grid] {
+      display: grid;
+      grid-template-columns: fit-content(40%) 1fr;
+      column-gap: var(--space-6);
+      row-gap: var(--space-1);
+
+      & dt {
+        margin-block-start: 0;
+      }
+    }
+  }
+
+  figure:not([data-variant]) {
+    margin-block: var(--space-6);
+
+    & > :is(img, video), & > picture > img {
+      display: block;
+      border-radius: var(--radius-medium);
+      outline: 1px solid light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1));
+      outline-offset: -1px;
+    }
+
+    & > figcaption {
+      margin-block-start: var(--space-2);
+      font-size: var(--text-7);
+      color: var(--muted-foreground);
+    }
+  }
+
+  hgroup {
+    margin-block-end: var(--space-4);
+
+    & > :is(h1, h2, h3, h4, h5, h6) {
+      margin-block-end: var(--space-1);
+    }
+
+    & > p {
+      margin-block-end: 0;
+      color: var(--muted-foreground);
+      text-wrap: balance;
+    }
+  }
+
+  mark {
+    background-color: light-dark(var(--logo-citron), rgb(from var(--logo-citron) r g b / 0.3));
+    color: light-dark(var(--logo-pine), inherit);
+    padding: calc(var(--space-1) / 2) var(--space-1);
+    border-radius: var(--radius-small);
+  }
+
+  [hidden] {
+    display: none;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  :disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

package/css/01-theme.css

@@ -0,0 +1,177 @@
+@layer theme {
+  :root {
+    color-scheme: light dark;
+
+    /* Raw logo palette — the nine stops of the unimo conic gradient. */
+    --logo-plum: #330f1f;
+    --logo-red: #c83228;
+    --logo-orange: #fb8841;
+    --logo-citron: #d3dd92;
+    --logo-green: #59824f;
+    --logo-pine: #002414;
+    --logo-navy: #142847;
+    --logo-blue: #2874d7;
+    --logo-sky: #99c2ff;
+
+    /* Mono core — pure neutral scale, ink primary. Pairs verified WCAG 2.1 AA. */
+    --background: light-dark(#ffffff, #000000);
+    --foreground: light-dark(#0a0a0a, #fafafa);
+    --card: light-dark(#ffffff, #141414);
+    --card-foreground: light-dark(#0a0a0a, #fafafa);
+    --primary: light-dark(#171717, #fafafa);
+    --primary-foreground: light-dark(#fafafa, #171717);
+    --secondary: light-dark(#f5f5f5, #262626);
+    --secondary-foreground: light-dark(#171717, #fafafa);
+    --muted: light-dark(#f5f5f5, #262626);
+    /* Gray text ≥4.5:1 on every light surface incl. --muted #f5f5f5. */
+    --muted-foreground: light-dark(#6f6f6f, #a3a3a3);
+    --faint: light-dark(#fafafa, #0f0f0f);
+    --faint-foreground: light-dark(#707070, #8f8f8f);
+    --accent: light-dark(#f5f5f5, #262626);
+    --danger: light-dark(#c83228, #ff8a76);
+    --danger-foreground: light-dark(#ffffff, #0a0a0a);
+    --success: light-dark(#47804a, #8fd47e);
+    --success-foreground: light-dark(#ffffff, #0a0a0a);
+    --warning: light-dark(#a85000, #ffa14d);
+    --warning-foreground: light-dark(#ffffff, #0a0a0a);
+    --border: light-dark(#e5e5e5, #262626);
+    --input: light-dark(#d4d4d4, #3d3d3d);
+    --ring: light-dark(#737373, #a3a3a3);
+
+    /* Spacing — density-aware; default density is 1 (identical to static values). */
+    --density: 1;
+    --space-1: calc(0.25rem * var(--density));
+    --space-2: calc(0.5rem * var(--density));
+    --space-3: calc(0.75rem * var(--density));
+    --space-4: calc(1rem * var(--density));
+    --space-5: calc(1.25rem * var(--density));
+    --space-6: calc(1.5rem * var(--density));
+    --space-8: calc(2rem * var(--density));
+    --space-10: calc(2.5rem * var(--density));
+    --space-12: calc(3rem * var(--density));
+    --space-14: calc(3.5rem * var(--density));
+    --space-16: calc(4rem * var(--density));
+    --space-18: calc(4.5rem * var(--density));
+
+    /* Fully rounded by default; data-radius presets opt out. */
+    --radius-small: 0.5rem;
+    --radius-medium: 0.75rem;
+    --radius-large: 1.25rem;
+    --radius-full: 9999px;
+    --radius-button: var(--radius-full);
+    --radius-field: var(--radius-full);
+
+    --bar-height: 0.5rem;
+
+    --font-sans: system-ui, sans-serif;
+    --font-mono: ui-monospace, Consolas, monospace;
+
+    --text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
+    --text-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
+    --text-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
+    --text-4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
+    --text-5: 1.125rem;
+    --text-6: 1rem;
+    --text-7: 0.875rem;
+    --text-8: 0.75rem;
+    --text-regular: var(--text-6);
+
+    --leading-normal: 1.5;
+    --tracking-tight: -0.02em;
+
+    --font-normal: 400;
+    --font-medium: 500;
+    --font-semibold: 600;
+    --font-bold: 600;
+
+    /* Layered: hairline ring + lift + ambient. Light uses pure-black alphas;
+       dark collapses the small shadow to a single white ring. */
+    --shadow-ring: 0 0 0 1px light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08));
+    --shadow-small:
+      var(--shadow-ring),
+      0 1px 2px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0)),
+      0 2px 4px light-dark(rgb(0 0 0 / 0.03), rgb(0 0 0 / 0));
+    --shadow-medium:
+      var(--shadow-ring),
+      0 2px 4px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.3)),
+      0 6px 12px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.3));
+    --shadow-large:
+      var(--shadow-ring),
+      0 4px 8px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.4)),
+      0 16px 32px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.5));
+
+    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+
+    --z-dropdown: 50;
+    --z-modal: 200;
+  }
+
+  /* Force color scheme; default follows OS. */
+  [data-theme="light"] {
+    color-scheme: light;
+  }
+  [data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  /* Accent presets — logo-derived primary colour, AA-verified per scheme.
+     Default (no attribute) is mono ink. Mid-tone accents need their own
+     foreground: white in light mode, near-black in dark mode. */
+  [data-accent] {
+    --primary-foreground: light-dark(#ffffff, #0a0a0a);
+  }
+  [data-accent="blue"] {
+    --primary: light-dark(#2068c9, #7ab3ff);
+    --ring: light-dark(#2068c9, #7ab3ff);
+  }
+  [data-accent="teal"] {
+    --primary: light-dark(#0f766e, #5eead4);
+    --ring: light-dark(#0f766e, #5eead4);
+  }
+  [data-accent="green"] {
+    --primary: light-dark(#47804a, #8fd47e);
+    --ring: light-dark(#47804a, #8fd47e);
+  }
+  [data-accent="orange"] {
+    --primary: light-dark(#c2410c, #ffa14d);
+    --ring: light-dark(#c2410c, #ffa14d);
+  }
+  [data-accent="red"] {
+    --primary: light-dark(#c83228, #ff8a76);
+    --ring: light-dark(#c83228, #ff8a76);
+  }
+  [data-accent="wine"] {
+    --primary: light-dark(#a83a68, #f9a8d4);
+    --ring: light-dark(#a83a68, #f9a8d4);
+  }
+  [data-accent="navy"] {
+    --primary: light-dark(#3b5fa7, #99c2ff);
+    --ring: light-dark(#3b5fa7, #99c2ff);
+  }
+
+  /* Radius presets — default is fully rounded; --radius-full stays pill. */
+  [data-radius="soft"] {
+    --radius-small: 0.125rem;
+    --radius-medium: 0.375rem;
+    --radius-large: 0.75rem;
+    --radius-button: var(--radius-medium);
+    --radius-field: var(--radius-medium);
+  }
+  [data-radius="sharp"] {
+    --radius-small: 0;
+    --radius-medium: 0.125rem;
+    --radius-large: 0.25rem;
+    --radius-button: var(--radius-medium);
+    --radius-field: var(--radius-medium);
+  }
+
+  /* Density presets — scale the spacing tokens above. */
+  [data-density="compact"] {
+    --density: 0.85;
+  }
+  [data-density="comfortable"] {
+    --density: 1.18;
+  }
+}

package/css/accordion.css

@@ -0,0 +1,62 @@
+@layer components {
+  details {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-medium);
+    overflow: hidden;
+
+    & + details {
+      margin-top: -1px;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+
+    &:has(+ details) {
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    &[open] summary {
+      border-bottom: 1px solid var(--border);
+    }
+  }
+
+  summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: var(--space-4);
+    font-weight: var(--font-medium);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color var(--transition-fast);
+
+    &:hover {
+      background-color: var(--muted);
+    }
+
+    &::-webkit-details-marker, &::marker {
+      display: none;
+    }
+
+    &::after {
+      content: "";
+      width: 1em;
+      height: 1em;
+      flex-shrink: 0;
+      background-color: currentColor;
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      transition: transform var(--transition-fast);
+    }
+
+    details[open] &::after {
+      transform: rotate(180deg);
+    }
+  }
+
+  details > *:not(summary) {
+    margin: var(--space-4);
+  }
+}

package/css/alert.css

@@ -0,0 +1,53 @@
+@layer components {
+  [role="alert"] {
+    position: relative;
+    display: flex;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-5);
+    background-color: var(--background);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-large);
+    font-size: var(--text-7);
+
+    &[data-variant] {
+      border: none;
+    }
+
+    &[data-variant="error"],
+    &[data-variant="danger"] {
+      color: var(--danger);
+      background-color: light-dark(
+        color-mix(in srgb, var(--danger) 8%, transparent),
+        color-mix(in srgb, var(--danger) 20%, transparent)
+      );
+
+      & a {
+        color: var(--danger);
+      }
+    }
+
+    &[data-variant="success"] {
+      color: var(--success);
+      background-color: light-dark(
+        color-mix(in srgb, var(--success) 8%, transparent),
+        color-mix(in srgb, var(--success) 20%, transparent)
+      );
+
+      & a {
+        color: var(--success);
+      }
+    }
+
+    &[data-variant="warning"] {
+      color: var(--warning);
+      background-color: light-dark(
+        color-mix(in srgb, var(--warning) 8%, transparent),
+        color-mix(in srgb, var(--warning) 20%, transparent)
+      );
+
+      & a {
+        color: var(--warning);
+      }
+    }
+  }
+}

package/css/animations.css

@@ -0,0 +1,111 @@
+@layer animations {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-delay: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
+  /* Pop-in animation for modals/overlays - swings from above */
+  .animate-pop-in {
+    opacity: 1;
+    transform: perspective(1000px) rotateX(0deg) translateZ(0);
+    transition:
+      opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      overlay 150ms cubic-bezier(0.4, 0, 0.2, 1) allow-discrete,
+      display 150ms cubic-bezier(0.4, 0, 0.2, 1) allow-discrete;
+
+    /* Entry - where to animate FROM */
+    @starting-style {
+      opacity: 0;
+      transform: perspective(1000px) rotateX(-15deg) translateZ(-80px);
+    }
+
+    /* Exit - where to animate TO when closing */
+    &[data-state="closing"] {
+      opacity: 0;
+      transform: perspective(1000px) rotateX(-15deg) translateZ(-80px);
+    }
+
+    &[data-state="closing"]::backdrop {
+      opacity: 0;
+    }
+  }
+
+  /* Backdrop animation for dialogs */
+  dialog::backdrop {
+    opacity: 1;
+    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    @starting-style {
+      opacity: 0;
+    }
+  }
+
+  /* Opt-in one-shot enter — compositor-only properties (opacity, translate,
+     filter). data-enter animates the element itself; data-enter="stagger"
+     cascades its children 100ms apart, delay capped past the 8th child. */
+  @keyframes teff-enter {
+    from {
+      opacity: 0;
+      translate: 0 12px;
+      filter: blur(4px);
+    }
+  }
+
+  [data-enter]:not([data-enter="stagger"]) {
+    animation: teff-enter 0.4s var(--ease-out) backwards;
+  }
+
+  [data-enter="stagger"] > * {
+    animation: teff-enter 0.4s var(--ease-out) backwards;
+  }
+
+  [data-enter="stagger"] > :nth-child(2) { animation-delay: 100ms; }
+  [data-enter="stagger"] > :nth-child(3) { animation-delay: 200ms; }
+  [data-enter="stagger"] > :nth-child(4) { animation-delay: 300ms; }
+  [data-enter="stagger"] > :nth-child(5) { animation-delay: 400ms; }
+  [data-enter="stagger"] > :nth-child(6) { animation-delay: 500ms; }
+  [data-enter="stagger"] > :nth-child(7) { animation-delay: 600ms; }
+  [data-enter="stagger"] > :nth-child(n + 8) { animation-delay: 700ms; }
+
+  /* Denied/failed feedback — damped, translate-only. Plays once when
+     data-shake is added; teff.shake(el) re-triggers and cleans up. */
+  @keyframes teff-shake {
+    20% { translate: -6px; }
+    40% { translate: 5px; }
+    60% { translate: -3px; }
+    80% { translate: 2px; }
+  }
+
+  [data-shake] {
+    animation: teff-shake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+  }
+
+  /* Slide-in animation for toasts */
+  .animate-slide-in {
+    opacity: 1;
+    transform: translateX(0);
+    transition:
+      opacity 150ms cubic-bezier(0.16, 1, 0.3, 1),
+      transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
+
+    /* Entry - slide in from right */
+    @starting-style {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+
+    /* Exit - slide out to right */
+    &[data-state="closing"] {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+}