@plexui/styles 0.0.0-stage → 0.1.1

package/dist/es/components/Toast/Toast.module.css

@@ -0,0 +1,99 @@
+@layer components {/* Overrides sonner's inline `z-index: 999999999` with a tamed, token-friendly
+   value. Consumers can lower it via `--z-toast` if their app pushes something
+   legitimately higher (rare — toasts should sit above modals and headers). */.Toaster:where([data-sonner-toaster]) {
+  z-index: var(--z-toast, 100000) !important;
+}/* Sonner reads --normal-bg / --normal-text / --normal-border / --border-radius
+   from the Toaster element (wired up in Toaster.tsx). The rules below only
+   layer on things sonner's stylesheet doesn't cover on its own. */.Toast {
+  --toast-icon-color: currentColor;
+
+  /* Shrink to fit: short toasts don't pad out empty space, long ones wrap
+     at the Toaster's --width. Sonner positions toasts absolutely, so we set
+     left/right: 0 + auto margins to center without touching its transform. */
+  width: -moz-max-content !important;
+  width: max-content !important;
+  /* On a phone Sonner insets the toaster by its mobile offsets; the toast
+     stays inside them instead of overflowing at the desktop width */
+  max-width: min(
+    var(--width),
+    calc(100vw - var(--mobile-offset-left, 16px) - var(--mobile-offset-right, 16px))
+  ) !important;
+  left: 0 !important;
+  right: 0 !important;
+  margin-inline: auto !important;
+  /* Tight gap between icon and content; action button gets extra breathing
+     room via its own margin-left below. */
+  gap: calc(var(--spacing) * 2) !important;
+  padding: calc(var(--spacing) * 3) !important;
+  font-size: var(--font-text-sm-size);
+  line-height: var(--font-text-sm-line-height);
+  /* Sonner's own stylesheet lives outside any @layer and hardcodes a light
+     drop shadow — we need !important to land our layered token value.
+     Same shadow + hairline combo as Menu / Popover for visual parity. */
+  box-shadow: var(--shadow), var(--shadow-hairline) !important;
+}/* On a phone Sonner makes the toaster as wide as the screen and shifts it by
+   the inset, so part of it is off screen: center the toast in the rest */@media (width <= 600px) {
+  .Toast {
+    right: calc(var(--mobile-offset-left, 16px) + var(--mobile-offset-right, 16px)) !important;
+  }
+
+  .Toaster[dir="rtl"] .Toast {
+    left: calc(var(--mobile-offset-left, 16px) + var(--mobile-offset-right, 16px)) !important;
+    right: 0 !important;
+  }
+}.Title {
+  color: var(--color-text);
+  font-size: var(--font-text-sm-size);
+  line-height: var(--font-text-sm-line-height);
+  /* Sonner pins font-weight: 500; keep that for title-only toasts and only
+     lift to semibold when a description sits alongside (so the title is
+     visually anchored against the secondary text). */
+  font-weight: var(--font-weight-medium);
+  text-wrap: pretty;
+}.Content:has(.Description) .Title {
+  font-weight: var(--font-weight-semibold) !important;
+}.Description {
+  color: var(--color-text-secondary);
+  font-size: var(--font-text-sm-size);
+  line-height: var(--font-text-sm-line-height);
+  text-wrap: pretty;
+}.Content {
+  gap: 0 !important;
+}.Icon {
+  color: var(--toast-icon-color);
+}
+
+  .Icon > svg {
+    width: 20px;
+    height: 20px;
+  }.ActionButton {
+  margin-left: calc(var(--spacing) * 2) !important;
+  background: var(--color-background-primary-solid) !important;
+  color: var(--color-text-primary-solid) !important;
+  font-weight: var(--font-weight-medium);
+}
+
+  .ActionButton:hover {
+    background: var(--color-background-primary-solid-hover) !important;
+  }.CancelButton {
+  color: var(--color-text-secondary) !important;
+  font-weight: var(--font-weight-medium);
+}/* =============================================
+  Centered text variant — shrink-to-fit is already the default
+============================================= */.Compact {
+  justify-content: center;
+}.Compact .Title,
+.Compact .Description {
+  text-align: center;
+}/* =============================================
+  Semantic variants — driven by tokens
+============================================= */.Success {
+  --toast-icon-color: var(--color-text-success-outline);
+}.Error {
+  --toast-icon-color: var(--color-text-danger-outline);
+}.Warning {
+  --toast-icon-color: var(--color-text-warning-outline);
+}.Info {
+  --toast-icon-color: var(--color-text-info-outline);
+}
+}

package/dist/es/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,91 @@
+@layer components {.Tooltip {
+  z-index: 50;
+  max-width: 300px;
+  border-radius: var(--radius-md);
+  /* animation-duration: 0.3s; */
+  /* animation-name: scale-in; */
+  /* animation-timing-function: var(--cubic-enter); */
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow), var(--shadow-hairline);
+  font-size: 14px;
+  line-height: 1.45;
+  /* transform-origin: var(--radix-tooltip-content-transform-origin); */
+  /* transition: background-color 0.15s ease; */
+
+  /* &[data-state="closed"] {
+    animation: scale-out 0.2s var(--cubic-exit);
+  } */
+}
+
+  /*
+   * Default cursor is slightly more pleasing than text cursor,
+   * if a tooltip transitions between clickable -> non-clickable (e.g., CopyTooltip)
+   */
+  .Tooltip[data-clickable="false"] {
+    cursor: default;
+  }
+
+  .Tooltip[data-clickable="true"] {
+    cursor: pointer;
+  }
+    @media (hover: hover) and (pointer: fine) {.Tooltip[data-compact="true"][data-clickable="true"]:hover {
+      background: var(--gray-600);
+      color: var(--gray-0);
+}
+}
+
+  .Tooltip[data-gutter-size="sm"] {
+    padding: 8px 12px;
+  }
+
+  .Tooltip[data-gutter-size="md"] {
+    padding: 12px 16px;
+  }
+
+  .Tooltip[data-gutter-size="lg"] {
+    padding: 14px 18px;
+  }
+
+  .Tooltip[data-compact="true"] {
+    padding: 2px 8px;
+    background: var(--gray-700);
+    color: var(--gray-0);
+    font-size: 14px;
+  }@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}@keyframes scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}.TriggerDecorator {
+  display: inline-flex;
+  cursor: pointer;
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+  text-decoration-color: transparent;
+  /* transition: text-decoration 0.2s var(--cubic-exit); */
+}
+
+  .TriggerDecorator:focus {
+    outline: 0;
+  }
+
+  .TriggerDecorator[data-state*="open"] {
+    text-decoration-color: var(--color-text-tertiary);
+    transition-timing-function: var(--cubic-enter);
+  }
+}

package/dist/es/components/Transition/Animate.module.css

@@ -0,0 +1,54 @@
+@layer components {.TransitionItem {
+  will-change: var(--tg-will-change);
+
+  /* Removing natural DOM position allows multiple layers to occupy the same space without stacking */
+
+  /* Interruptions should not experience delay */
+}
+  [data-transition-position="absolute"] .TransitionItem[data-exiting],
+  
+  [data-transition-position="absolute"] .TransitionItem:not([data-exiting]) + .TransitionItem[data-entering] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  .TransitionItem[data-entering] {
+    filter: var(--tg-initial-filter);
+    opacity: var(--tg-initial-opacity);
+    transform: var(--tg-initial-transform);
+  }
+
+  .TransitionItem[data-exiting] {
+    filter: var(--tg-enter-filter);
+    opacity: var(--tg-enter-opacity);
+    transform: var(--tg-enter-transform);
+  }
+
+  .TransitionItem[data-entering-active],
+  .TransitionItem[data-entering][data-interrupted] {
+    filter: var(--tg-enter-filter);
+    opacity: var(--tg-enter-opacity);
+    transform: var(--tg-enter-transform);
+    transition:
+      opacity var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
+      transform var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
+      filter var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay);
+  }
+
+  .TransitionItem[data-exiting-active],
+  .TransitionItem[data-exiting][data-interrupted] {
+    filter: var(--tg-exit-filter, none);
+    opacity: var(--tg-exit-opacity, 0);
+    transform: var(--tg-exit-transform, none);
+    transition:
+      opacity var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
+      transform var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
+      filter var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay);
+  }
+  .TransitionItem[data-entering][data-interrupted],
+  .TransitionItem[data-exiting][data-interrupted] {
+    transition-delay: 0ms;
+  }
+}

package/dist/es/components/Transition/AnimateLayout.module.css

@@ -0,0 +1,101 @@
+@layer components {.Layout {
+  position: relative;
+  display: block;
+  flex-shrink: 0;
+  transition-property: height, width;
+
+  /* The container is considered to have three directional states by the latest action: */
+  /* - "in": (default) a new child entered with no other siblings present */
+}
+
+  .Layout[data-clip="true"] {
+    overflow: hidden;
+  }
+  /* - "move": a new child entered while another sibling was present */
+  .Layout[data-direction="in"] {
+    transition-delay: var(--tg-layout-enter-delay);
+    transition-duration: var(--tg-layout-enter-duration);
+    transition-timing-function: var(--tg-layout-enter-timing-function);
+  }
+  /* - "out": a child exited */
+
+  .Layout[data-direction="out"] {
+    transition-delay: var(--tg-layout-exit-delay);
+    transition-duration: var(--tg-layout-exit-duration);
+    transition-timing-function: var(--tg-layout-exit-timing-function);
+  }
+
+  /* "move" defaults to "in" values */
+  .Layout[data-direction="move"] {
+    transition-delay: var(--tg-layout-move-delay);
+    transition-duration: var(--tg-layout-move-duration);
+    transition-timing-function: var(--tg-layout-move-timing-function);
+  }
+
+  /* Interruptions should not experience delays */
+  .Layout[data-interrupted="true"] {
+    transition-delay: 0ms;
+  }.TransitionItem {
+  flex-shrink: 0;
+  will-change: var(--tg-will-change, auto);
+
+  /* Interruptions are allowed to experience delay, as opposed to <Animate> */
+  /* This is because they may involve interplay with a non-clipped container, which then creates */
+  /* unintended visual artifacts if the interruption is not delayed. */
+}
+
+  .TransitionItem[data-entering],
+  .TransitionItem[data-exiting] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+    .Layout[data-dimension="width"] > .TransitionItem[data-entering], .Layout[data-dimension="width"] > .TransitionItem[data-exiting] {
+      width: auto;
+    }
+
+    .Layout[data-item-anchor="end"] > .TransitionItem[data-entering], .Layout[data-item-anchor="end"] > .TransitionItem[data-exiting] {
+      top: initial;
+      bottom: 0;
+    }
+
+    .Layout[data-item-anchor="end"][data-dimension="width"] > .TransitionItem[data-entering], .Layout[data-item-anchor="end"][data-dimension="width"] > .TransitionItem[data-exiting] {
+      right: 0;
+      left: initial;
+    }
+
+  .TransitionItem[data-entering] {
+    filter: var(--tg-initial-filter);
+    opacity: var(--tg-initial-opacity);
+    transform: var(--tg-initial-transform);
+  }
+
+  .TransitionItem[data-exiting] {
+    filter: var(--tg-enter-filter);
+    opacity: var(--tg-enter-opacity);
+    transform: var(--tg-enter-transform);
+  }
+  .TransitionItem[data-entering-active],
+  .TransitionItem[data-entering][data-interrupted] {
+    filter: var(--tg-enter-filter);
+    opacity: var(--tg-enter-opacity);
+    transform: var(--tg-enter-transform);
+    transition:
+      opacity var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
+      transform var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
+      filter var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay);
+  }
+
+  .TransitionItem[data-exiting-active],
+  .TransitionItem[data-exiting][data-interrupted] {
+    filter: var(--tg-exit-filter);
+    opacity: var(--tg-exit-opacity);
+    transform: var(--tg-exit-transform);
+    transition:
+      opacity var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
+      transform var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
+      filter var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay);
+  }
+}

package/dist/es/components/Transition/AnimateLayoutGroup.module.css

@@ -0,0 +1,88 @@
+@layer components {.LayoutItem {
+  position: relative;
+  flex-shrink: 0;
+
+  /* Enter & Exit staging occurs in JS */
+}
+
+  .LayoutItem[data-entering-active],
+  .LayoutItem[data-entering][data-interrupted] {
+    transition:
+      height var(--tg-layout-enter-duration) var(--tg-layout-enter-timing-function)
+        var(--tg-layout-enter-delay),
+      width var(--tg-layout-enter-duration) var(--tg-layout-enter-timing-function)
+        var(--tg-layout-enter-delay);
+  }
+
+  .LayoutItem[data-exiting-active],
+  .LayoutItem[data-exiting][data-interrupted] {
+    transition:
+      height var(--tg-layout-exit-duration) var(--tg-layout-exit-timing-function)
+        var(--tg-layout-exit-delay),
+      width var(--tg-layout-exit-duration) var(--tg-layout-exit-timing-function)
+        var(--tg-layout-exit-delay);
+  }.TransitionItem {
+  display: block;
+  will-change: var(--tg-will-change);
+
+  /* Interruptions are allowed to experience delay, as opposed to <Animate> */
+  /* This is because they may involve interplay with a non-clipped container, which then creates */
+  /* unintended visual artifacts if the interruption is not delayed. */
+}
+
+  .LayoutItem[data-entering] > .TransitionItem {
+    filter: var(--tg-initial-filter);
+    opacity: var(--tg-initial-opacity);
+    transform: var(--tg-initial-transform);
+  }
+
+  .LayoutItem[data-exiting] > .TransitionItem {
+    filter: var(--tg-enter-filter);
+    opacity: var(--tg-enter-opacity);
+    transform: var(--tg-enter-transform);
+  }
+
+  /* Width cannot be measured like height can in some scenarios */
+  .LayoutItem[data-entering] > .TransitionItem[data-dimension="width"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  /* itemAnchor="end": the item pins to the end side while its wrapper resizes */
+  .LayoutItem:is([data-entering], [data-exiting]) > .TransitionItem[data-item-anchor="end"] {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  .LayoutItem:is([data-entering], [data-exiting]) > .TransitionItem[data-item-anchor="end"][data-dimension="width"] {
+    top: 0;
+    right: 0;
+    bottom: auto;
+    left: auto;
+    width: auto;
+  }
+  .LayoutItem[data-entering-active] > .TransitionItem,
+  .LayoutItem[data-entering][data-interrupted] > .TransitionItem {
+    filter: var(--tg-enter-filter);
+    opacity: var(--tg-enter-opacity);
+    transform: var(--tg-enter-transform);
+    transition:
+      opacity var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
+      transform var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
+      filter var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay);
+  }
+
+  .LayoutItem[data-exiting-active] > .TransitionItem,
+  .LayoutItem[data-exiting][data-interrupted] > .TransitionItem {
+    filter: var(--tg-exit-filter);
+    opacity: var(--tg-exit-opacity, 0);
+    transform: var(--tg-exit-transform);
+    transition:
+      opacity var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
+      transform var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
+      filter var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay);
+  }
+}

package/dist/es/components/Transition/TransitionGroup.module.css

@@ -0,0 +1,4 @@
+@layer components {.TransitionGroupChild {
+  display: block;
+}
+}

package/dist/es/styles/base.css

@@ -0,0 +1,102 @@
+/* =============================================
+  Opinionated resets
+============================================= */
+@layer base {
+  html,
+  :host {
+    /* Disallow browsers from synthesizing bold weights when missing */
+    font-synthesis-weight: none;
+  }
+
+  textarea {
+    /* Prevent resizing by default */
+    resize: none;
+  }
+
+  img,
+  svg {
+    flex-grow: 0;
+    /* Prevent flexbox from forcing visual assets to shrink/grow size unintentionally */
+    flex-shrink: 0;
+  }
+
+  input,
+  textarea,
+  select,
+  optgroup {
+    /* Normalize mobile Safari styles */
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    box-shadow: none;
+    /* Prevent Firefox autofill coloring (preview and confirmed modes) */
+    filter: none;
+    /* Normalize default outline offset and width in Safari */
+    outline-offset: 0;
+    outline-width: 2px;
+  }
+
+  /*
+   * Prevent non-standard gestures on interactive Elements, like double-tap to zoom.
+   * Single taps will be dispatched immediately, instead of delayed.
+   */
+  a,
+  button,
+  input,
+  label,
+  select,
+  textarea,
+  :where([aria-role="button"]) {
+    touch-action: manipulation;
+  }
+
+  button {
+    /* Reset default transform */
+    text-transform: none;
+    /* Remove gap below button in certain conditions where inline-block is used */
+    vertical-align: middle;
+  }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    /* Normalize cursor to pointer type */
+    cursor: pointer;
+  }
+
+  pre {
+    /* Avoid overflow by default in preformatted text */
+    white-space: pre-wrap;
+  }
+
+  table {
+    /* Remove gaps between table borders by default */
+    border-spacing: 0;
+  }
+
+  /* Remove default quote elements */
+  blockquote,
+  q {
+    quotes: none;
+  }
+
+  blockquote::before,
+  blockquote::after,
+  q::before,
+  q::after {
+    content: none;
+  }
+}
+
+/* =============================================
+  Directives
+============================================= */
+@custom-variant hover {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      @slot;
+    }
+  }
+}
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+@custom-variant light (&:where([data-theme=light], [data-theme=light] *));

package/dist/es/styles/globals.css

@@ -0,0 +1,50 @@
+/* =============================================
+  Opinionated globals
+============================================= */
+@layer base {
+  html,
+  :host {
+    /* Apply default color */
+    color: var(--color-text);
+    /* Smooth font rendering by default */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    /* Apply default letter-spacing */
+    letter-spacing: var(--tracking-normal);
+    /* Prevent rubber-band / bounce overscroll */
+    overscroll-behavior: none;
+  }
+
+  [data-theme="light"] {
+    color-scheme: light;
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  * {
+    /* Aesthetic scrollbar defaults */
+    scrollbar-color: var(--scrollbar-color) transparent;
+    scrollbar-width: thin;
+  }
+
+  /* All exiting <TransitionGroup> components should be non-interactive */
+  [data-exiting] {
+    pointer-events: none;
+  }
+
+  /* Default placeholder text color */
+  ::-moz-placeholder {
+    color: var(--color-text-tertiary);
+  }
+  ::placeholder {
+    color: var(--color-text-tertiary);
+  }
+
+  /* Use semibold weight as the defacto bold */
+  b,
+  strong {
+    font-weight: var(--font-weight-semibold);
+  }
+}

package/dist/es/styles/index.css

@@ -0,0 +1,22 @@
+/* Tailwind & Reset */
+@import "./base";
+/* Tier 0: radius / font / font-weight tokens, declared in an unlayered
+   :root so semantic and components tiers can reference `var(--radius-*)`,
+   `var(--font-sans)`, `var(--font-weight-*)`. Not `@theme static {…}`,
+   which would reset Tailwind's namespaces with `--radius-*: initial`.
+   Unlayered, they override the same names from Tailwind's theme layer,
+   so the consumer's `rounded-*` and font utilities use the Plex values
+   (see variables-tokens-root.css and /docs/installation). */
+@import "./variables-tokens-root";
+/* Tier 1 tokens: Primitives */
+@import "./variables-primitive";
+/* Tier 2 tokens: Semantic */
+@import "./variables-semantic";
+/* Tier 3 tokens: Components */
+@import "./variables-components";
+/* Tailwind-only variables for utility classes */
+@import "./tailwind-utilities";
+/* Opinionated globals */
+@import "./globals";
+/* Katex bundled global CSS */
+@import "./katex.min.css" layer(base);