@plexui/styles 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present Plex UI
+
+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/README.md

@@ -1,3 +1,29 @@
-# Temporary Holding Version
+# @plexui/styles
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The framework-agnostic CSS layer of [Plex UI](https://plexui.com): design tokens, globals and the CSS module of every component. `@plexui/ui` (React) and `@plexui/vue` render their components with these same files, so both frameworks share one styling contract.
+
+React apps get this package through `@plexui/ui` and keep importing `@plexui/ui/css`. Install it directly when you use Plex UI from another framework.
+
+```bash
+npm install @plexui/styles tailwindcss
+```
+
+```css
+@import "tailwindcss";
+@import "@plexui/styles/css";
+```
+
+## Exports
+
+| Path | Contents |
+| --- | --- |
+| `@plexui/styles/css` | Tokens, resets and globals in one stylesheet |
+| `@plexui/styles/styles/<file>.css` | Individual token tiers, for example `variables-semantic.css` |
+| `@plexui/styles/components/<Dir>/<File>.module.css` | Component CSS modules (class names are scoped by your bundler) |
+| `@plexui/styles/vite` | Vite plugin that pins the cascade-layer order |
+| `@plexui/styles/types` | Shared prop types: `ControlSize`, `SemanticColors`, `Variants`, ... |
+| `@plexui/styles/postcss` | The PostCSS pipeline used to build this package (install its plugins yourself) |
+
+## License
+
+MIT

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

@@ -0,0 +1,89 @@
+@layer components {.Root {
+  width: 100%;
+}.Item {
+  border-bottom: var(--accordion-item-divider-width) solid
+    var(--accordion-item-divider-color);
+}
+
+  .Item:last-child {
+    border-bottom: 0;
+  }
+
+  .Item[data-disabled] {
+    opacity: var(--accordion-item-disabled-opacity);
+  }.Header {
+  display: flex;
+  margin: 0;
+}.Trigger {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--accordion-trigger-gap);
+  width: 100%;
+  padding: var(--accordion-trigger-padding-block) 0;
+  border: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--accordion-trigger-font-size);
+  font-weight: var(--accordion-trigger-font-weight);
+  line-height: var(--accordion-trigger-line-height);
+  text-align: left;
+  color: var(--accordion-trigger-color);
+  cursor: pointer;
+  outline: none;
+  transition: color var(--accordion-transition-duration)
+    var(--accordion-transition-ease);
+}
+
+  .Trigger:focus-visible {
+    border-radius: var(--accordion-trigger-focus-radius);
+    outline: 2px solid var(--accordion-trigger-focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  .Trigger:disabled,
+  .Trigger[data-disabled] {
+    cursor: not-allowed;
+  }.Chevron {
+  flex-shrink: 0;
+  width: var(--accordion-icon-size);
+  height: var(--accordion-icon-size);
+  color: var(--accordion-icon-color);
+  transition: transform var(--accordion-transition-duration)
+    var(--accordion-transition-ease);
+}.Trigger[data-state="open"] .Chevron {
+  transform: rotate(180deg);
+}.Content {
+  overflow: hidden;
+  font-size: var(--accordion-content-font-size);
+  line-height: var(--accordion-content-line-height);
+  color: var(--accordion-content-color);
+}
+
+  .Content[data-state="open"] {
+    animation: accordion-down var(--accordion-transition-duration)
+      var(--accordion-transition-ease);
+  }
+
+  .Content[data-state="closed"] {
+    animation: accordion-up var(--accordion-transition-duration)
+      var(--accordion-transition-ease);
+  }.ContentInner {
+  padding-bottom: var(--accordion-content-padding-bottom);
+}@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+}

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

@@ -0,0 +1,210 @@
+@layer components {.Alert {
+  display: flex;
+  /* The indicator sits on the first line of the message (see .Indicator) */
+  align-items: baseline;
+  gap: var(--alert-gap);
+  width: 100%;
+  padding: var(--alert-gutter);
+  border-radius: var(--alert-border-radius);
+  font-size: var(--alert-font-size);
+  line-height: var(--alert-line-height);
+}
+
+  .Alert:where([data-actions-placement="bottom"]) {
+    align-items: flex-start;
+  }
+
+  /* Banner: a full-width strip, square, with lines above and below only */
+  .Alert[data-banner] {
+    border-radius: 0;
+  }
+
+  .Alert[data-banner]:is([data-variant="soft"], [data-variant="outline"]) {
+    box-shadow:
+      0 1px 0 0 var(--alert-border-color) inset,
+      0 -1px 0 0 var(--alert-border-color) inset;
+  }
+
+  /* =============================================
+    Variants
+  ============================================= */
+  .Alert[data-variant="soft"] {
+    background-color: var(--alert-background-color);
+    box-shadow: 0 0 0 1px var(--alert-border-color) inset;
+    color: var(--alert-text-color);
+  }
+
+    .Alert[data-variant="soft"]:where([data-color="primary"]) {
+      --alert-background-color: var(--color-background-primary-surface);
+      --alert-border-color: var(--color-border-primary-surface);
+      --alert-text-color: var(--color-text);
+    }
+
+    .Alert[data-variant="soft"]:where([data-color="success"]) {
+      --alert-background-color: var(--color-background-success-surface);
+      --alert-border-color: var(--color-border-success-surface);
+      --alert-text-color: var(--color-text-success-surface);
+    }
+
+    .Alert[data-variant="soft"]:where([data-color="warning"]) {
+      --alert-background-color: var(--color-background-warning-surface);
+      --alert-border-color: var(--color-border-warning-surface);
+      --alert-text-color: var(--color-text-warning-surface);
+    }
+
+    .Alert[data-variant="soft"]:where([data-color="caution"]) {
+      --alert-background-color: var(--color-background-caution-surface);
+      --alert-border-color: var(--color-border-caution-surface);
+      --alert-text-color: var(--color-text-caution-surface);
+    }
+
+    .Alert[data-variant="soft"]:where([data-color="danger"]) {
+      --alert-background-color: var(--color-background-danger-surface);
+      --alert-border-color: var(--color-border-danger-surface);
+      --alert-text-color: var(--color-text-danger-surface);
+    }
+
+    .Alert[data-variant="soft"]:where([data-color="info"]) {
+      --alert-background-color: var(--color-background-info-surface);
+      --alert-border-color: var(--color-border-info-surface);
+      --alert-text-color: var(--color-text-info-surface);
+    }
+
+    .Alert[data-variant="soft"]:where([data-color="discovery"]) {
+      --alert-background-color: var(--color-background-discovery-surface);
+      --alert-border-color: var(--color-border-discovery-surface);
+      --alert-text-color: var(--color-text-discovery-surface);
+    }
+
+  .Alert[data-variant="solid"] {
+    background-color: var(--alert-background-color);
+    color: var(--alert-text-color);
+  }
+
+    .Alert[data-variant="solid"]:where([data-color="primary"]) {
+      --alert-background-color: var(--color-background-primary-solid);
+      --alert-text-color: var(--color-text-primary-solid);
+    }
+
+    .Alert[data-variant="solid"]:where([data-color="success"]) {
+      --alert-background-color: var(--color-background-success-solid);
+      --alert-text-color: var(--color-text-success-solid);
+    }
+
+    .Alert[data-variant="solid"]:where([data-color="warning"]) {
+      --alert-background-color: var(--color-background-warning-solid);
+      --alert-text-color: var(--color-text-warning-solid);
+    }
+
+    .Alert[data-variant="solid"]:where([data-color="caution"]) {
+      --alert-background-color: var(--color-background-caution-solid);
+      --alert-text-color: var(--color-text-caution-solid);
+    }
+
+    .Alert[data-variant="solid"]:where([data-color="danger"]) {
+      --alert-background-color: var(--color-background-danger-solid);
+      --alert-text-color: var(--color-text-danger-solid);
+    }
+
+    .Alert[data-variant="solid"]:where([data-color="info"]) {
+      --alert-background-color: var(--color-background-info-solid);
+      --alert-text-color: var(--color-text-info-solid);
+    }
+
+    .Alert[data-variant="solid"]:where([data-color="discovery"]) {
+      --alert-background-color: var(--color-background-discovery-solid);
+      --alert-text-color: var(--color-text-discovery-solid);
+    }
+
+  .Alert[data-variant="outline"] {
+    box-shadow: 0 0 0 1px var(--alert-border-color) inset;
+    color: var(--alert-text-color);
+  }
+
+    .Alert[data-variant="outline"]:where([data-color="primary"]) {
+      --alert-border-color: var(--color-border);
+      --alert-text-color: var(--color-text);
+    }
+
+    .Alert[data-variant="outline"]:where([data-color="success"]) {
+      --alert-border-color: var(--color-border-success-outline);
+      --alert-text-color: var(--color-text-success-outline);
+    }
+
+    .Alert[data-variant="outline"]:where([data-color="warning"]) {
+      --alert-border-color: var(--color-border-warning-outline);
+      --alert-text-color: var(--color-text-warning-outline);
+    }
+
+    .Alert[data-variant="outline"]:where([data-color="caution"]) {
+      --alert-border-color: var(--color-border-caution-outline);
+      --alert-text-color: var(--color-text-caution-outline);
+    }
+
+    .Alert[data-variant="outline"]:where([data-color="danger"]) {
+      --alert-border-color: var(--color-border-danger-outline);
+      --alert-text-color: var(--color-text-danger-outline);
+    }
+
+    .Alert[data-variant="outline"]:where([data-color="info"]) {
+      --alert-border-color: var(--color-border-info-outline);
+      --alert-text-color: var(--color-text-info-outline);
+    }
+
+    .Alert[data-variant="outline"]:where([data-color="discovery"]) {
+      --alert-border-color: var(--color-border-discovery-outline);
+      --alert-text-color: var(--color-text-discovery-outline);
+    }.Content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  min-width: 0;
+}
+
+  :where(.Alert[data-actions-placement="bottom"]) .Content {
+    display: block;
+  }/* A line box of the message's height with the icon centered in it. The
+   empty text gives it the message's baseline, so it lines up with the first
+   line of the title, also when the message is centered next to taller actions. */.Indicator {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+  .Indicator::before {
+    content: "\200b";
+  }
+
+  .Indicator svg {
+    width: var(--alert-indicator-size, 20px);
+    height: var(--alert-indicator-size, 20px);
+  }.Message {
+  flex: 1;
+  min-width: 0;
+}.Title {
+  font-weight: var(--alert-title-font-weight);
+  text-wrap: pretty;
+}
+
+  /* Slight spacing when paired with a description */
+  .Title ~ .Description {
+    margin-top: 2px;
+  }.Description {
+  opacity: 1;
+  text-wrap: pretty;
+}.Actions {
+  display: flex;
+  gap: calc(var(--spacing) * 2);
+}
+
+  :where(.Alert[data-actions-placement="end"]) .Actions {
+    align-self: center;
+    /* Additional padding between right side or actions */
+    margin-left: var(--alert-gutter);
+  }
+
+  :where(.Alert[data-actions-placement="bottom"]) .Actions {
+    margin-top: var(--alert-gutter);
+  }
+}

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

@@ -0,0 +1,168 @@
+@layer components {.Avatar {
+  position: relative;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  border-radius: var(--avatar-radius);
+  transition: background-color 0.3s var(--cubic-enter);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+  /* Interactive */
+  .Avatar[type="button"] {
+    cursor: pointer;
+  }
+
+    .Avatar[type="button"]:focus-visible {
+      outline: 2px solid var(--avatar-ring-color);
+      outline-offset: 2px;
+    }
+
+  .Avatar[data-variant="soft"] {
+    background-color: var(--avatar-background-color);
+    color: var(--avatar-text-color);
+  }
+
+    .Avatar[data-variant="soft"]:where([data-color="primary"]) {
+      --avatar-background-color: var(--color-background-primary-soft);
+      --avatar-text-color: var(--color-text-primary-soft);
+      --avatar-ring-color: var(--color-ring-primary-soft);
+    }
+
+    .Avatar[data-variant="soft"]:where([data-color="secondary"]) {
+      --avatar-background-color: var(--color-background-secondary-soft);
+      --avatar-text-color: var(--color-text-secondary-soft);
+      --avatar-ring-color: var(--color-ring-secondary-soft);
+    }
+
+    .Avatar[data-variant="soft"]:where([data-color="discovery"]) {
+      --avatar-background-color: var(--color-background-discovery-soft);
+      --avatar-text-color: var(--color-text-discovery-soft);
+      --avatar-ring-color: var(--color-ring-discovery-soft);
+    }
+
+    .Avatar[data-variant="soft"]:where([data-color="info"]) {
+      --avatar-background-color: var(--color-background-info-soft);
+      --avatar-text-color: var(--color-text-info-soft);
+      --avatar-ring-color: var(--color-ring-info-soft);
+    }
+
+    .Avatar[data-variant="soft"]:where([data-color="success"]) {
+      --avatar-background-color: var(--color-background-success-soft);
+      --avatar-text-color: var(--color-text-success-soft);
+      --avatar-ring-color: var(--color-ring-success-soft);
+    }
+
+    .Avatar[data-variant="soft"]:where([data-color="danger"]) {
+      --avatar-background-color: var(--color-background-danger-soft);
+      --avatar-text-color: var(--color-text-danger-soft);
+      --avatar-ring-color: var(--color-ring-danger-soft);
+    }
+
+  .Avatar[data-variant="solid"] {
+    background-color: var(--avatar-background-color);
+    color: var(--avatar-text-color);
+  }
+
+    .Avatar[data-variant="solid"]:where([data-color="primary"]) {
+      --avatar-background-color: var(--color-background-primary-solid);
+      --avatar-text-color: var(--color-text-primary-solid);
+      --avatar-ring-color: var(--color-ring-primary-solid);
+    }
+
+    .Avatar[data-variant="solid"]:where([data-color="secondary"]) {
+      --avatar-background-color: var(--color-background-secondary-solid);
+      --avatar-text-color: var(--color-text-secondary-solid);
+      --avatar-ring-color: var(--color-ring-secondary-solid);
+    }
+
+    .Avatar[data-variant="solid"]:where([data-color="discovery"]) {
+      --avatar-background-color: var(--color-background-discovery-solid);
+      --avatar-text-color: var(--color-text-discovery-solid);
+      --avatar-ring-color: var(--color-ring-discovery-solid);
+    }
+
+    .Avatar[data-variant="solid"]:where([data-color="info"]) {
+      --avatar-background-color: var(--color-background-info-solid);
+      --avatar-text-color: var(--color-text-info-solid);
+      --avatar-ring-color: var(--color-ring-info-solid);
+    }
+
+    .Avatar[data-variant="solid"]:where([data-color="success"]) {
+      --avatar-background-color: var(--color-background-success-solid);
+      --avatar-text-color: var(--color-text-success-solid);
+      --avatar-ring-color: var(--color-ring-success-solid);
+    }
+
+    .Avatar[data-variant="solid"]:where([data-color="danger"]) {
+      --avatar-background-color: var(--color-background-danger-solid);
+      --avatar-text-color: var(--color-text-danger-solid);
+      --avatar-ring-color: var(--color-ring-danger-solid);
+    }/*
+ * Images with low contrast backgrounds should have clear edges,
+ * but this border should not impact the size of the image, or
+ * create fringed edges on various background colors. Using a transparency
+ * on top of the image ensures crisp edges while also solving the issue of low contrast backgrounds.
+ */.AvatarImageContainer {
+  border-radius: inherit;
+}
+
+  .AvatarImageContainer::after {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border: 1px solid var(--avatar-image-border-color);
+    border-radius: inherit;
+    content: "";
+    pointer-events: none;
+  }.AvatarImage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  -o-object-fit: cover;
+     object-fit: cover;
+  opacity: 0;
+  /* Prevent awkward dragging of the image */
+  pointer-events: none;
+  transition: 0.15s ease;
+}
+
+  .AvatarImage[data-loaded] {
+    opacity: 1;
+  }.AvatarInitial {
+  font-size: calc(var(--avatar-size) * var(--avatar-font-size-scaling));
+  font-weight: var(--font-weight-semibold);
+}.AvatarOverflowCount {
+  font-size: calc(var(--avatar-size) * var(--avatar-overflow-font-size-scaling-three));
+  font-weight: var(--font-weight-semibold);
+}
+
+  .AvatarOverflowCount[data-letter-count="2"] {
+    font-size: calc(var(--avatar-size) * var(--avatar-overflow-font-size-scaling-two));
+  }
+
+  .AvatarOverflowCount[data-letter-count="1"] {
+    font-size: calc(var(--avatar-size) * var(--avatar-overflow-font-size-scaling-one));
+  }/*
+ * The "+" sits very low in the baseline - this lifts it up 1px per 24px of size
+ */.AvatarOverflowCountSymbol {
+  position: relative;
+  top: calc(-1 * var(--avatar-size) / 24);
+  margin-left: -1px;
+}.AvatarIcon {
+  display: block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-size: calc(var(--avatar-size) * 0.7);
+}
+}

package/dist/es/components/Avatar/AvatarGroup.module.css

@@ -0,0 +1,26 @@
+@layer components {.Group {
+  display: flex;
+}
+
+  .Group > * ~ * {
+    box-shadow: 0 0 0 var(--avatar-group-cutout-width) var(--avatar-group-cutout-color);
+
+    /*
+     * Mask approach avoids the need to apply a specific color, however:
+     * -radial masks currently have very harsh anti-aliasing
+     * - sizing must be set statically, and cannot use % sizing. You trade one imperative value for another.
+     * mask-image: radial-gradient(circle 22px at -15px, transparent 99%, #fff 100%);
+     */
+  }
+
+  .Group[data-stack="start"] {
+    flex-direction: row-reverse;
+  }
+
+    .Group[data-stack="start"] > * ~ * {
+      margin-inline-end: var(--avatar-group-spacing);
+    }
+    .Group[data-stack="end"] > * ~ * {
+      margin-inline-start: var(--avatar-group-spacing);
+    }
+}