@thinking.tools/teff 1.0.0 → 1.0.1

package/css/avatar.css

@@ -0,0 +1,61 @@
+@layer components {
+    figure[data-variant="avatar"]:not([role="group"]) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--sz, 2.5rem);
+        height: var(--sz, 2.5rem);
+        color: var(--primary);
+        background-color: var(--muted);
+        border-radius: var(--radius-full);
+        font-weight: var(--font-medium);
+        overflow: hidden;
+        box-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1));
+
+        & > img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        &.small {
+            --sz: 2rem;
+        }
+        &.large {
+            --sz: 3.25rem;
+        }
+    }
+
+    figure[data-variant="avatar"][role="group"] {
+        display: inline-flex;
+        align-items: center;
+        margin: 0;
+
+        & figure[data-variant="avatar"] {
+            isolation: isolate;
+            margin-inline-end: calc(var(--space-5) * -1);
+            border: 2px solid var(--background);
+
+            &:last-child {
+                margin-inline-end: 0;
+            }
+        }
+
+        &.small {
+            --sz: 2rem;
+
+            & figure[data-variant="avatar"] {
+                margin-inline-end: calc(var(--space-4) * -0.8);
+                border-width: 1px;
+            }
+        }
+
+        &.large {
+            --sz: 3.25rem;
+
+            & figure[data-variant="avatar"] {
+                margin-inline-end: calc(var(--space-6) * -1);
+            }
+        }
+    }
+}

package/css/badge.css

@@ -0,0 +1,49 @@
+@layer components {
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: calc(var(--space-1) / 2) var(--space-3);
+    font-size: var(--text-8);
+    font-weight: var(--font-medium);
+    line-height: var(--leading-normal);
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-radius: var(--radius-full);
+
+    &.outline {
+      background-color: transparent;
+      color: var(--foreground);
+      box-shadow: inset 0 0 0 1px var(--input);
+    }
+
+    &[data-variant="secondary"] {
+      background-color: var(--secondary);
+      color: var(--secondary-foreground);
+    }
+
+    &[data-variant="success"] {
+      color: var(--success);
+      background-color: light-dark(
+        color-mix(in srgb, var(--success) 10%, transparent),
+        color-mix(in srgb, var(--success) 30%, transparent)
+      );
+    }
+
+    &[data-variant="warning"] {
+      color: var(--warning);
+      background-color: light-dark(
+        color-mix(in srgb, var(--warning) 10%, transparent),
+        color-mix(in srgb, var(--warning) 30%, transparent)
+      );
+    }
+
+    &[data-variant="danger"] {
+      color: var(--danger);
+      background-color: light-dark(
+        color-mix(in srgb, var(--danger) 10%, transparent),
+        color-mix(in srgb, var(--danger) 30%, transparent)
+      );
+    }
+  }
+}

package/css/button.css

@@ -0,0 +1,178 @@
+@layer base {
+  :is(button, [type=submit], [type=reset], [type=button], a.button), ::file-selector-button {
+    /* Hover mixes toward the page background — lightens dark fills in light
+       mode, darkens light fills in dark mode, for ink and accents alike. */
+    --_hov: color-mix(in srgb, var(--primary), var(--background) 16%);
+    --_px: var(--space-5);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    min-height: 2.5rem;
+    max-width: 100%;
+    padding: var(--space-2) var(--_px);
+    font-size: var(--text-7);
+    font-weight: var(--font-medium);
+    line-height: var(--leading-normal);
+    white-space: nowrap;
+    text-decoration: none;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-radius: var(--radius-button);
+    border: 1px solid transparent;
+    box-shadow:
+      var(--shadow-small),
+      inset 0 1px 0 light-dark(rgb(255 255 255 / 0.12), rgb(255 255 255 / 0));
+    transition-property: background-color, border-color, box-shadow, scale;
+    transition-duration: 120ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:not(:disabled) {
+      cursor: pointer;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--_hov);
+    }
+
+    &:active:not(:disabled) {
+      scale: 0.96;
+    }
+
+    /* Icons: size to the type, never squish. */
+    & svg {
+      display: block;
+      width: 1.2em;
+      height: 1.2em;
+      flex-shrink: 0;
+    }
+
+    /* Optical alignment: icon-side padding = text-side − 2px. */
+    &:has(> svg:first-child):not(.icon) {
+      padding-inline-start: calc(var(--_px) - 2px);
+    }
+    &:has(> svg:last-child):not(.icon) {
+      padding-inline-end: calc(var(--_px) - 2px);
+    }
+
+    /* Long labels: <span class="truncate"> inside the button ellipsizes. */
+    & > .truncate {
+      min-width: 0;
+    }
+
+    &[data-variant="secondary"] {
+      --_hov: color-mix(in srgb, var(--secondary), var(--secondary-foreground) 7%);
+      background-color: var(--secondary);
+      color: var(--secondary-foreground);
+      box-shadow: none;
+    }
+
+    &[data-variant="danger"] {
+      --_hov: color-mix(in srgb, var(--danger), var(--background) 16%);
+      background-color: var(--danger);
+      color: var(--danger-foreground);
+    }
+
+    &:is(.outline, .ghost) {
+      --_hov: var(--accent);
+      background-color: transparent;
+      color: var(--foreground);
+      box-shadow: none;
+
+      &[data-variant="danger"] {
+        --_hov: color-mix(in srgb, var(--danger), transparent 90%);
+        color: var(--danger);
+      }
+
+      &[data-variant="secondary"] {
+        --_hov: color-mix(in srgb, var(--secondary), transparent 80%);
+        color: var(--secondary-foreground);
+      }
+    }
+
+    &.outline {
+      border-color: var(--input);
+
+      &[data-variant="danger"] {
+        border-color: var(--danger);
+      }
+
+      &[data-variant="secondary"] {
+        border-color: var(--secondary);
+      }
+    }
+
+    &.ghost {
+      /* Same as .outline but no border. */
+      border-color: transparent;
+    }
+
+    &.small {
+      --_px: var(--space-4);
+      min-height: 2rem;
+      padding-block: var(--space-1);
+      font-size: var(--text-8);
+    }
+
+    &.large {
+      --_px: var(--space-6);
+      min-height: 3rem;
+      padding-block: 0;
+      font-size: var(--text-regular);
+    }
+
+    &.icon {
+      width: 2.5rem;
+      padding: 0;
+
+      &.small {
+        width: 2rem;
+      }
+
+      &.large {
+        width: 3rem;
+      }
+    }
+  }
+
+  ::file-selector-button {
+    background-color: transparent;
+    color: var(--foreground);
+    border: 1px solid var(--input);
+    box-shadow: none;
+  }
+  ::file-selector-button:hover {
+    /* pseudoelement:hover can't be nested and has to be a separate block. */
+    background-color: var(--accent);
+  }
+}
+
+@layer components {
+  menu.buttons {
+    list-style-type: none;
+    padding-inline-start: 0;
+    display: inline-flex;
+
+    /* In menu.buttons, <li> children are expected to have just one child, which is a button/or a.button */
+    & > li {
+      &:first-child > * {
+        border-start-start-radius: var(--radius-button);
+        border-end-start-radius: var(--radius-button);
+      }
+
+      &:last-child > * {
+        border-start-end-radius: var(--radius-button);
+        border-end-end-radius: var(--radius-button);
+      }
+
+      & > * {
+        border-radius: 0;
+      }
+
+      &:not(:last-child) > * {
+        border-inline-end: 1px solid rgb(from var(--secondary-foreground) r g b / 0.15);
+      }
+    }
+  }
+}

package/css/card.css

@@ -0,0 +1,9 @@
+@layer components {
+  .card {
+    background-color: var(--card);
+    color: var(--card-foreground);
+    border-radius: var(--radius-large);
+    box-shadow: var(--shadow-small);
+    padding: var(--space-6);
+  }
+}

package/css/dialog.css

@@ -0,0 +1,93 @@
+@layer components {
+  dialog {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-modal);
+    width: min(100% - 2rem, 32rem);
+    max-height: 85vh;
+    max-height: 85dvh;
+    margin: auto;
+    padding: 0;
+    background-color: var(--card);
+    border: none;
+    border-radius: var(--radius-large);
+    box-shadow: var(--shadow-large);
+    overflow: hidden;
+
+    opacity: 0;
+    transform: scale(0.96) translateY(0.5rem);
+    transition:
+      opacity 200ms var(--ease-out),
+      transform 200ms var(--ease-out),
+      overlay 200ms var(--ease-out) allow-discrete,
+      display 200ms var(--ease-out) allow-discrete;
+
+    &:is([open], :popover-open) {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+
+    @starting-style {
+      &:is([open], :popover-open) {
+        opacity: 0;
+        transform: scale(0.96) translateY(0.5rem);
+      }
+    }
+
+    &::backdrop {
+      background-color: rgb(0 0 0 / 0);
+      backdrop-filter: blur(0px);
+      transition:
+        background-color 200ms var(--ease-out),
+        backdrop-filter 200ms var(--ease-out),
+        overlay 200ms var(--ease-out) allow-discrete,
+        display 200ms var(--ease-out) allow-discrete;
+    }
+
+    &:is([open], :popover-open)::backdrop {
+      background-color: rgb(0 0 0 / 0.4);
+      backdrop-filter: blur(4px);
+    }
+
+    @starting-style {
+      &:is([open], :popover-open)::backdrop {
+        background-color: rgb(0 0 0 / 0);
+        backdrop-filter: blur(0px);
+      }
+    }
+
+    & > header,
+    & > form > header {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-1);
+      padding: var(--space-6);
+      padding-block-end: 0;
+
+      & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 {
+        margin-block-end: 0;
+      }
+
+      & > p {
+        font-size: var(--text-7);
+        color: var(--muted-foreground);
+        margin-block-end: 0;
+      }
+    }
+
+    & > p, & > div, & > section,
+    & > form > p, & > form > div, & > form > section {
+      padding: var(--space-6);
+      overflow-y: auto;
+    }
+
+    & > footer,
+    & > form > footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--space-2);
+      padding: var(--space-6);
+      padding-block-start: 0;
+    }
+  }
+}

package/css/dropdown.css

@@ -0,0 +1,72 @@
+@layer components {
+  teff-dropdown {
+    [popover] {
+      position: fixed;
+      margin: 0;
+      /* Concentric: item radius (medium) + padding = container radius (large). */
+      padding: var(--space-2);
+      min-width: 12rem;
+      background-color: var(--card);
+      border: none;
+      border-radius: var(--radius-large);
+      box-shadow: var(--shadow-medium);
+      transform-origin: top;
+      opacity: 0;
+      transform: translateY(-4px) scale(0.97);
+      transition:
+        opacity 150ms var(--ease-out),
+        transform 150ms var(--ease-out),
+        display 150ms allow-discrete,
+        overlay 150ms allow-discrete;
+
+      &:popover-open {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+
+      @starting-style {
+        &:popover-open {
+          opacity: 0;
+          transform: translateY(-4px) scale(0.97);
+        }
+      }
+
+      hr {
+        margin: var(--space-2) calc(var(--space-2) * -1);
+      }
+    }
+
+    [role="menuitem"] {
+      display: flex;
+      align-items: center;
+      justify-content: start;
+      gap: var(--space-2);
+      width: 100%;
+      min-height: 2.25rem;
+      padding: var(--space-2) var(--space-3);
+      font-size: var(--text-7);
+      font-weight: var(--font-normal);
+      text-align: start;
+      color: var(--foreground);
+      background: none;
+      border: none;
+      border-radius: var(--radius-medium);
+      box-shadow: none;
+      cursor: pointer;
+      transition: background-color var(--transition-fast);
+
+      &:hover, &:focus {
+        background-color: var(--accent);
+        outline: none;
+      }
+
+      &[data-variant="danger"] {
+        color: var(--danger);
+
+        &:hover, &:focus {
+          background-color: color-mix(in srgb, var(--danger) 10%, transparent);
+        }
+      }
+    }
+  }
+}