@plexui/styles 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,320 @@
+@layer components {.Container {
+  position: relative;
+  overflow: hidden;
+
+  /* The height is the sum of all rows plus spacing, which is N+1 to account for the top spacing for the first row */
+
+  /* prettier-ignore */
+  min-height: calc(
+        (var(--min-rows) * var(--tag-input-height)) + ((var(--min-rows) + 1) * var(--tag-input-tag-spacing))
+    );
+  padding: var(--tag-input-tag-spacing);
+  border-radius: var(--tag-input-radius, var(--radius-md));
+  box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
+  color: var(--input-text-color);
+  cursor: text;
+  outline: 0;
+  transition: box-shadow 0.15s ease;
+
+  /* =============================================
+    Sizes
+    -----------------------------------------------
+    Each size sets the inner input height + the
+    container padding/gap (`--tag-input-tag-spacing`).
+    The sum `(rows × tag-input-height) + ((rows + 1) × tag-input-tag-spacing)`
+    equals the matching Input size when rows=1, so a
+    TagInput[size=md] sits flush next to an Input[size=md]
+    in a horizontal layout.
+
+    Sizes also re-tune the chip itself via
+    `--tag-input-tag-{height,gutter,font-size}` so the
+    inner pills stay proportional to the container.
+    ============================================= */
+}
+
+  .Container[data-disabled] {
+    pointer-events: none;
+  }
+    @media (hover: hover) and (pointer: fine) {.Container:not([data-disabled]):hover, :where([data-theme="light"]) .Container:not([data-disabled]):hover {
+box-shadow: 0 0 0 1px var(--gray-300) inset;
+}:where([data-theme="dark"]) .Container:not([data-disabled]):hover {
+box-shadow: 0 0 0 1px var(--gray-500) inset;
+}
+}
+
+    .Container:not([data-disabled])[data-focused] {
+      box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
+    }
+
+  .Container[data-empty] {
+    padding: var(--tag-input-tag-spacing) 12px;
+  }
+
+  /* =============================================
+    Pill — fully-rounded for the single-row state.
+    ----------------------------------------------
+    The radius is locked to half of a single-row
+    container height (= half of `--control-size-*`).
+    With `radius-full` the container would stay an
+    ellipse when the chip list wraps to a second/third
+    row, which looks bad. Computing it from the
+    single-row height keeps the corners visually pill
+    on row 1 and stays sane on multi-row.
+    ============================================= */
+  .Container[data-pill] {
+    border-radius: calc(
+      (var(--tag-input-height) + 2 * var(--tag-input-tag-spacing)) / 2
+    );
+  }
+
+    .Container[data-pill][data-empty] {
+      padding: var(--tag-input-tag-spacing) 16px;
+    }
+
+  /* 20 + 4 + 4 = 28 */
+  .Container:where([data-size="sm"]) {
+    --tag-input-font-size: var(--control-font-size-md);
+    --tag-input-height: 20px;
+    --tag-input-tag-spacing: 4px;
+    --tag-input-tag-gutter: var(--control-gutter-2xs);
+    --tag-input-radius: var(--control-radius-sm);
+  }
+
+  /* 20 + 6 + 6 = 32 */
+  .Container:where([data-size="md"]) {
+    --tag-input-font-size: var(--control-font-size-md);
+    --tag-input-height: 20px;
+    --tag-input-tag-spacing: 6px;
+    --tag-input-radius: var(--control-radius-md);
+  }
+
+  /* 24 + 6 + 6 = 36 */
+  .Container:where([data-size="lg"]) {
+    --tag-input-font-size: var(--control-font-size-md);
+    --tag-input-height: 24px;
+    --tag-input-tag-spacing: 6px;
+    --tag-input-radius: var(--control-radius-lg);
+  }
+
+  /* 24 + 8 + 8 = 40 */
+  .Container:where([data-size="xl"]) {
+    /* SelectControl xl uses control-font-size-md (not -lg), so the chip + input
+       text inside TagInput xl matches Select xl. */
+    --tag-input-font-size: var(--control-font-size-md);
+    --tag-input-height: 24px;
+    --tag-input-tag-spacing: 8px;
+    --tag-input-radius: var(--control-radius-xl);
+  }
+
+  /* 28 + 8 + 8 = 44 */
+  .Container:where([data-size="2xl"]) {
+    --tag-input-font-size: var(--control-font-size-lg);
+    --tag-input-height: 28px;
+    --tag-input-tag-spacing: 8px;
+    --tag-input-radius: var(--control-radius-xl);
+  }
+
+  /* 32 + 8 + 8 = 48 */
+  .Container:where([data-size="3xl"]) {
+    --tag-input-font-size: var(--control-font-size-lg);
+    --tag-input-height: 32px;
+    --tag-input-tag-spacing: 8px;
+    --tag-input-radius: var(--control-radius-xl);
+  }.TagInput {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--tag-input-tag-spacing);
+}.Tag {
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 1);
+  /* Match the inner input height so a chip-filled container is exactly
+     the same height as an empty one (= matching Input[size] of the same size).
+     Override per-size via `--tag-input-tag-height` if a non-square chip is needed. */
+  height: var(--tag-input-tag-height, var(--tag-input-height));
+  /* Right padding equals the chip's vertical padding so the close button
+     sits with equal whitespace on top, bottom, and right. */
+  padding: 0 calc((var(--tag-input-tag-height, var(--tag-input-height)) - var(--control-icon-size-sm)) / 2) 0
+    var(--tag-input-tag-gutter, var(--control-gutter-xs));
+  /* Concentric with the container: chip radius = container radius − inner padding.
+     Falls through every size automatically because both vars are set per-size. */
+  border-radius: var(--tag-input-tag-radius, calc(var(--tag-input-radius) - var(--tag-input-tag-spacing)));
+  /* Match SelectControl text-size for the same `size` (md/lg=14, xl/2xl/3xl=16);
+     `--tag-input-font-size` is set per-size to the same token Select uses. */
+}
+
+  .Container[data-pill] .Tag {
+    /* Chip height is fixed (single row) so half of it gives a true pill,
+       same idea as the container's pill rule above. */
+    border-radius: calc(var(--tag-input-tag-height, var(--tag-input-height)) / 2);
+  }
+
+  .Tag {
+  background-color: var(--color-background-secondary-soft-alpha);
+  color: var(--color-text-secondary-soft);
+  font-size: var(--tag-input-tag-font-size, var(--tag-input-font-size));
+  font-weight: var(--button-font-weight);
+  cursor: pointer;
+  white-space: nowrap;
+  outline: none;
+  transition: background-color 0.15s ease;
+}
+
+  @media (hover: hover) and (pointer: fine) {.Tag:hover {
+    background-color: var(--color-background-secondary-soft-alpha-hover);
+}
+}
+
+  .Tag:focus {
+    background-color: var(--color-background-secondary-soft-alpha-hover);
+  }
+
+  .Tag:active {
+    background-color: var(--color-background-secondary-soft-alpha-active);
+  }
+
+  .Container[data-disabled] .Tag {
+    color: var(--color-text-tertiary);
+  }
+
+  .Tag[data-invalid] {
+    background-color: var(--color-background-danger-soft-alpha);
+    color: var(--color-text-danger-soft);
+  }
+
+    @media (hover: hover) and (pointer: fine) {.Tag[data-invalid]:hover {
+      background-color: var(--color-background-danger-soft-alpha-hover);
+}
+}
+
+    .Tag[data-invalid]:focus {
+      background-color: var(--color-background-danger-soft-alpha-hover);
+    }
+
+    .Tag[data-invalid]:active {
+      background-color: var(--color-background-danger-soft-alpha-active);
+    }
+
+  .Tag[data-duplicate] {
+    animation: shake 0.5s ease;
+  }
+
+  .Tag svg {
+    font-size: var(--control-icon-size-sm);
+  }.TagRemove {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  opacity: 0.5;
+  transition: opacity 0.15s ease;
+}
+
+  @media (hover: hover) and (pointer: fine) {.TagRemove:hover {
+    opacity: 1;
+}
+}.TagValue {
+  white-space: nowrap;
+}.InputContainer {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  max-width: 100%;
+}.InputWrapper {
+  overflow: hidden;
+  width: 100%;
+}.InputMeasure {
+  position: absolute;
+  font-size: var(--tag-input-font-size);
+  visibility: hidden;
+  white-space: nowrap;
+}.Input {
+  display: block;
+  min-width: 20px;
+  height: var(--tag-input-height);
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+  color: var(--color-text);
+  font-size: var(--tag-input-font-size);
+  line-height: 1.4;
+  white-space: nowrap;
+
+  /* Prevent auto-fill coloring */
+}
+
+  .Input:focus {
+    outline: 0;
+  }
+
+  .Input::-moz-placeholder {
+    color: var(--color-text-tertiary);
+  }
+
+  .Input::placeholder {
+    color: var(--color-text-tertiary);
+  }
+
+  .Input:disabled {
+    color: var(--color-text-tertiary);
+  }
+  .Input:-webkit-autofill, .Input:-webkit-autofill:focus, .Input:-webkit-autofill:hover {
+    /*
+     * Prevent all color changes by delaying their effect for a very long time
+     * We cannot beat the specificity of user-agent stylesheet declarations, so we must delay them.
+     */
+    color: var(--color-text) !important;
+    -webkit-text-fill-color: var(--color-text) !important;
+    -webkit-transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+    transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+}
+  .Input:-webkit-autofill-and-obscured, .Input:-webkit-autofill-strong-password, .Input:-webkit-autofill-strong-password-viewable {
+    /*
+     * Prevent all color changes by delaying their effect for a very long time
+     * We cannot beat the specificity of user-agent stylesheet declarations, so we must delay them.
+     */
+    color: var(--color-text) !important;
+    -webkit-text-fill-color: var(--color-text) !important;
+    -webkit-transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+    transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+}.Limit {
+  width: 100%;
+  margin-top: 2px;
+  color: var(--color-text);
+  font-size: var(--font-text-xs-size);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+
+  20%,
+  60% {
+    transform: translateX(-5px);
+  }
+
+  40%,
+  80% {
+    transform: translateX(5px);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+}

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

@@ -0,0 +1,50 @@
+@layer components {.TextLink {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--link-gap);
+  /* Used to round the focus ring */
+  border-radius: var(--link-radius);
+  color: currentcolor;
+  cursor: pointer;
+  font-weight: var(--link-font-weight);
+  overflow-wrap: anywhere;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: opacity, color, box-shadow, text-decoration-color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  @media (hover: hover) and (pointer: fine) {.TextLink:hover {
+    color: color-mix(in oklab, currentcolor 80%, transparent);
+}
+
+    /* stylelint-disable-next-line */
+    :global(.text-secondary) .TextLink:hover {
+      color: var(--color-text);
+    }
+
+    /* stylelint-disable-next-line */
+    :global(.text-tertiary) .TextLink:hover {
+      color: var(--color-text-secondary);
+    }
+}
+
+  .TextLink:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 1px;
+  }
+
+  .TextLink[data-underline] {
+    text-decoration: underline;
+    text-decoration-color: color-mix(in oklab, currentcolor 70%, transparent);
+    text-underline-offset: var(--link-underline-decoration-offset);
+  }
+
+  .TextLink[data-primary] {
+    color: var(--link-primary-text-color);
+  }
+
+    @media (hover: hover) and (pointer: fine) {.TextLink[data-primary]:hover {
+      color: var(--link-primary-text-color-hover);
+}
+}
+}

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

@@ -0,0 +1,272 @@
+@layer components {.Container {
+  --textarea-line-height: 20px;
+  --textarea-font-weight: var(--font-weight-normal);
+  --textarea-color: var(--color-text);
+  --textarea-gutter-y: calc(0.5 * calc(var(--textarea-base-height) - var(--textarea-line-height)));
+  --textarea-min-height: calc(
+    (var(--textarea-gutter-y) * 2) + (var(--textarea-line-height) * var(--textarea-min-rows))
+  );
+  --textarea-max-height: calc(
+    (var(--textarea-gutter-y) * 2) + (var(--textarea-line-height) * var(--textarea-max-rows))
+  );
+}
+  /* ============================================ */
+  .Container:where([data-size="3xs"]) {
+    --textarea-base-height: var(--control-size-3xs);
+    --textarea-font-size: var(--control-font-size-sm);
+    --textarea-radius: var(--control-radius-sm);
+    --textarea-gutter-x: var(--control-gutter-xs);
+  }
+  /* Sizes */
+
+  .Container:where([data-size="2xs"]) {
+    --textarea-base-height: var(--control-size-2xs);
+    --textarea-font-size: var(--control-font-size-sm);
+    --textarea-radius: var(--control-radius-sm);
+    --textarea-gutter-x: var(--control-gutter-xs);
+  }
+
+  /* ============================================ */
+
+  .Container:where([data-size="xs"]) {
+    --textarea-base-height: var(--control-size-xs);
+    --textarea-font-size: var(--control-font-size-md);
+    --textarea-radius: var(--control-radius-sm);
+    --textarea-gutter-x: var(--control-gutter-xs);
+  }
+
+  .Container:where([data-size="sm"]) {
+    --textarea-base-height: var(--control-size-sm);
+    --textarea-font-size: var(--control-font-size-md);
+    --textarea-radius: var(--control-radius-sm);
+    --textarea-gutter-x: var(--control-gutter-sm);
+  }
+
+  /* ("md" is applied by default, set above) */
+  .Container:where([data-size="md"]) {
+    --textarea-base-height: var(--control-size-md);
+    --textarea-font-size: var(--control-font-size-md);
+    --textarea-radius: var(--control-radius-md);
+    --textarea-gutter-x: var(--control-gutter-md);
+  }
+
+  .Container:where([data-size="lg"]) {
+    --textarea-base-height: var(--control-size-lg);
+    --textarea-font-size: var(--control-font-size-md);
+    --textarea-radius: var(--control-radius-lg);
+    --textarea-gutter-x: var(--control-gutter-md);
+  }
+
+  .Container:where([data-size="xl"]) {
+    --textarea-base-height: var(--control-size-xl);
+    --textarea-font-size: var(--control-font-size-lg);
+    --textarea-radius: var(--control-radius-xl);
+    --textarea-gutter-x: var(--control-gutter-lg);
+  }
+
+  .Container:where([data-size="2xl"]) {
+    --textarea-base-height: var(--control-size-2xl);
+    --textarea-font-size: var(--control-font-size-lg);
+    --textarea-radius: var(--control-radius-xl);
+    --textarea-gutter-x: var(--control-gutter-xl);
+  }
+
+  .Container:where([data-size="3xl"]) {
+    --textarea-base-height: var(--control-size-3xl);
+    --textarea-font-size: var(--control-font-size-lg);
+    --textarea-radius: var(--control-radius-xl);
+    --textarea-gutter-x: var(--control-gutter-xl);
+  }
+  /* ============================================ */
+  .Container:where([data-gutter-size="2xs"]) {
+    --textarea-gutter-x: var(--control-gutter-2xs);
+  }
+  /* Gutter sizes */
+
+  .Container:where([data-gutter-size="xs"]) {
+    --textarea-gutter-x: var(--control-gutter-xs);
+  }
+
+  /* ============================================ */
+
+  .Container:where([data-gutter-size="sm"]) {
+    --textarea-gutter-x: var(--control-gutter-sm);
+  }
+
+  .Container:where([data-gutter-size="md"]) {
+    --textarea-gutter-x: var(--control-gutter-md);
+  }
+
+  .Container:where([data-gutter-size="lg"]) {
+    --textarea-gutter-x: var(--control-gutter-lg);
+  }
+
+  .Container:where([data-gutter-size="xl"]) {
+    --textarea-gutter-x: var(--control-gutter-xl);
+  }
+
+  .Container {
+
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  width: 100%;
+  border-radius: var(--textarea-radius);
+  color: var(--textarea-color);
+  cursor: text;
+  font-size: var(--textarea-font-size);
+  font-weight: var(--textarea-font-weight);
+  transition-duration: var(--transition-duration-basic);
+  transition-property: color, box-shadow, background-color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  /* =============================================
+    Outline variant
+  ============================================= */
+  .Container:where([data-variant="outline"]) {
+    /* NOTE: Don't add box-model size here, as the <textarea> defines all height sizing */
+    box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
+  }
+      @media (hover: hover) and (pointer: fine) {.Container:where([data-variant="outline"]):not([data-disabled]):hover {
+        box-shadow: 0 0 0 1px var(--input-outline-border-color-hover) inset;
+}
+}
+
+      .Container:where([data-variant="outline"]):not([data-disabled])[data-focused="true"] {
+        box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
+      }
+
+      .Container:where([data-variant="outline"]):not([data-disabled])[data-invalid] {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+
+  /* =============================================
+    Soft variant
+  ============================================= */
+  .Container:where([data-variant="soft"]) {
+    background-color: var(--input-soft-background-color);
+  }
+      .Container:where([data-variant="soft"]):not([data-disabled])[data-focused="true"] {
+        box-shadow: 0 0 0 1px var(--input-soft-border-color-focus) inset;
+      }
+
+      .Container:where([data-variant="soft"]):not([data-disabled])[data-invalid] {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+
+  /* =============================================
+    Invalid
+  ============================================= */
+    .Container[data-invalid] ::-moz-selection {
+      background-color: var(--red-a50);
+    }
+    .Container[data-invalid] ::selection {
+      background-color: var(--red-a50);
+    }
+
+  /* =============================================
+    Disabled
+  ============================================= */
+  .Container[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }.Textarea {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-height: var(--textarea-min-height);
+  max-height: var(--textarea-max-height);
+  padding: var(--textarea-gutter-y) var(--textarea-gutter-x);
+  border: 0;
+  border-radius: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  box-shadow: none;
+  color: inherit;
+  /* Prevent Firefox autofill coloring (preview and confirmed modes) */
+  filter: none;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: var(--textarea-line-height);
+  resize: none;
+}
+
+  .Textarea:focus {
+    outline: 0;
+  }
+
+  .Textarea:disabled {
+    cursor: not-allowed;
+  }
+
+  .Textarea::-moz-placeholder {
+    color: var(--input-placeholder-text-color);
+    /* Normalize placeholder coloring across browsers. Firefox specifically uses `opacity` instead of a different `color`. */
+    opacity: 1;
+  }
+
+  .Textarea::placeholder {
+    color: var(--input-placeholder-text-color);
+    /* Normalize placeholder coloring across browsers. Firefox specifically uses `opacity` instead of a different `color`. */
+    opacity: 1;
+  }
+
+  /* Applying an animation on autofill allows us to listen for the event in JS */
+  .Textarea:-webkit-autofill {
+    animation: native-autofill-in 1ms;
+  }
+
+  /* Prevent auto-fill coloring */
+  .Textarea:-webkit-autofill,
+  .Textarea:-webkit-autofill:focus,
+  .Textarea:-webkit-autofill:hover {
+    color: var(--color-text) !important;
+    -webkit-text-fill-color: var(--color-text) !important;
+    /* Prevent all color changes by delaying their effect for a very long time */
+    /* We cannot beat the specificity of user-agent stylesheet declarations, so we must delay them. */
+    -webkit-transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+    transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+  }
+  /* Identical to block above, but must keep separate for browsers to recognize their own selector */
+  .Textarea:-webkit-autofill-and-obscured,
+  .Textarea:-webkit-autofill-strong-password,
+  .Textarea:-webkit-autofill-strong-password-viewable {
+    color: var(--color-text) !important;
+    -webkit-text-fill-color: var(--color-text) !important;
+    -webkit-transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+    transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+  }
+  /* Prevent strange autofill size adjustments */
+  .Textarea:-webkit-autofill::first-line {
+    font-size: 16px !important;
+    -webkit-transition: font-size 0s 50000s !important;
+    transition: font-size 0s 50000s !important;
+  }
+
+  .Textarea::-webkit-resizer {
+    visibility: hidden;
+  }@keyframes native-autofill-in {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+}