@plexui/styles 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,309 @@
+@layer components {/* InputGroup: an input or textarea joined with addons (icons, text, buttons,
+   menus) inside one control frame. The frame, sizes and states follow Input;
+   addons sit inline (start / end) or as a header / footer row
+   (block-start / block-end). */.InputGroup {
+  --input-group-gutter-x: var(--input-group-gutter);
+  /* Inline addon buttons leave spacing(1) = 4px above and below, like Input.AdornmentButton */
+  --input-group-button-size: calc(var(--input-group-size) - calc(var(--spacing) * 2));
+  --input-group-line-height: 20px;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  border-radius: var(--input-group-radius);
+  color: var(--input-text-color);
+  cursor: text;
+  /* NOTE: Whenever this is not 16px on mobile, zooming occurs. */
+  font-size: var(--input-group-font-size);
+  font-weight: var(--font-weight-normal);
+  line-height: 1;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: color, box-shadow, background-color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  /* =============================================
+    Outline variant
+  ============================================= */
+  .InputGroup:where([data-variant="outline"]) {
+    box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
+  }
+
+    .InputGroup:where([data-variant="outline"]):not([data-disabled]) {
+
+      /* Also while focused: the focus rule above is more specific than [data-invalid] */
+    }
+      @media (hover: hover) and (pointer: fine) {.InputGroup:where([data-variant="outline"]):not([data-disabled]):hover {
+        box-shadow: 0 0 0 1px var(--input-outline-border-color-hover) inset;
+}
+}
+
+      .InputGroup:where([data-variant="outline"]):not([data-disabled]):has([data-slot="input-group-control"]:focus) {
+        box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
+      }
+      .InputGroup:where([data-variant="outline"]):not([data-disabled])[data-invalid],
+      .InputGroup:where([data-variant="outline"]):not([data-disabled])[data-invalid]:has([data-slot="input-group-control"]:focus) {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+
+  /* =============================================
+    Soft variant
+  ============================================= */
+  .InputGroup:where([data-variant="soft"]) {
+    background-color: var(--input-soft-background-color);
+  }
+      .InputGroup:where([data-variant="soft"]):not([data-disabled]):has([data-slot="input-group-control"]:focus) {
+        box-shadow: 0 0 0 1px var(--input-soft-border-color-focus) inset;
+      }
+
+      .InputGroup:where([data-variant="soft"]):not([data-disabled])[data-invalid],
+      .InputGroup:where([data-variant="soft"]):not([data-disabled])[data-invalid]:has([data-slot="input-group-control"]:focus) {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+    .InputGroup[data-invalid] ::-moz-selection {
+      background-color: var(--red-a50);
+    }
+    .InputGroup[data-invalid] ::selection {
+      background-color: var(--red-a50);
+    }
+
+  /* =============================================
+    Sizes (same scale as Input)
+  ============================================= */
+  .InputGroup:where([data-size="3xs"]) {
+    --input-group-size: var(--control-size-3xs);
+    --input-group-font-size: var(--control-font-size-sm);
+    --input-group-radius: var(--control-radius-sm);
+    --input-group-gutter: var(--control-gutter-2xs);
+    --input-group-gap: var(--input-gap-xs);
+    --input-group-icon-size: var(--control-icon-size-xs);
+  }
+
+  .InputGroup:where([data-size="2xs"]) {
+    --input-group-size: var(--control-size-2xs);
+    --input-group-font-size: var(--control-font-size-sm);
+    --input-group-radius: var(--control-radius-sm);
+    --input-group-gutter: var(--control-gutter-xs);
+    --input-group-gap: var(--input-gap-xs);
+    --input-group-icon-size: var(--control-icon-size-sm);
+  }
+
+  .InputGroup:where([data-size="xs"]) {
+    --input-group-size: var(--control-size-xs);
+    --input-group-font-size: var(--control-font-size-md);
+    --input-group-radius: var(--control-radius-sm);
+    --input-group-gutter: var(--control-gutter-xs);
+    --input-group-gap: var(--input-gap-sm);
+    --input-group-icon-size: var(--control-icon-size-sm);
+  }
+
+  .InputGroup:where([data-size="sm"]) {
+    --input-group-size: var(--control-size-sm);
+    --input-group-font-size: var(--control-font-size-md);
+    --input-group-radius: var(--control-radius-sm);
+    --input-group-gutter: var(--control-gutter-sm);
+    --input-group-gap: var(--input-gap-md);
+    --input-group-icon-size: var(--control-icon-size-md);
+  }
+
+  .InputGroup:where([data-size="md"]) {
+    --input-group-size: var(--control-size-md);
+    --input-group-font-size: var(--control-font-size-md);
+    --input-group-radius: var(--control-radius-md);
+    --input-group-gutter: var(--control-gutter-md);
+    --input-group-gap: var(--input-gap-md);
+    --input-group-icon-size: var(--control-icon-size-md);
+  }
+
+  .InputGroup:where([data-size="lg"]) {
+    --input-group-size: var(--control-size-lg);
+    --input-group-font-size: var(--control-font-size-md);
+    --input-group-radius: var(--control-radius-lg);
+    --input-group-gutter: var(--control-gutter-md);
+    --input-group-gap: var(--input-gap-md);
+    --input-group-icon-size: var(--control-icon-size-md);
+  }
+
+  .InputGroup:where([data-size="xl"]) {
+    --input-group-size: var(--control-size-xl);
+    --input-group-font-size: var(--control-font-size-lg);
+    --input-group-radius: var(--control-radius-xl);
+    --input-group-gutter: var(--control-gutter-lg);
+    --input-group-gap: var(--input-gap-lg);
+    --input-group-icon-size: var(--control-icon-size-md);
+  }
+
+  .InputGroup:where([data-size="2xl"]) {
+    --input-group-size: var(--control-size-2xl);
+    --input-group-font-size: var(--control-font-size-lg);
+    --input-group-radius: var(--control-radius-xl);
+    --input-group-gutter: var(--control-gutter-lg);
+    --input-group-gap: var(--input-gap-lg);
+    --input-group-icon-size: var(--control-icon-size-lg);
+  }
+
+  .InputGroup:where([data-size="3xl"]) {
+    --input-group-size: var(--control-size-3xl);
+    --input-group-font-size: var(--control-font-size-lg);
+    --input-group-radius: var(--control-radius-xl);
+    --input-group-gutter: var(--control-gutter-xl);
+    --input-group-gap: var(--input-gap-lg);
+    --input-group-icon-size: var(--control-icon-size-lg);
+  }
+
+  /* =============================================
+    Pill
+  ============================================= */
+  .InputGroup:where([data-pill]) {
+    --input-group-radius: var(--radius-full);
+    --input-group-gutter-x: calc(var(--input-group-gutter) * var(--control-gutter-pill-scaling));
+  }
+
+  /* =============================================
+    Disabled
+    ---------------------------------------------
+    Fade the control and the addon content; buttons fade on their own
+    through their disabled state.
+  ============================================= */
+  .InputGroup[data-disabled] {
+    cursor: not-allowed;
+  }
+
+    .InputGroup[data-disabled] > .Control,
+    .InputGroup[data-disabled] > .Addon > :not(.Button) {
+      opacity: 0.5;
+    }
+
+  /* =============================================
+    Block addons stack the group into a column
+  ============================================= */
+  .InputGroup:has(> .Addon[data-align="block-start"], > .Addon[data-align="block-end"]) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  /* The gap between an inline addon and the control replaces the control's gutter */
+  .InputGroup:has(> .Addon[data-align="inline-start"]) > .Control {
+    padding-inline-start: var(--input-group-gap);
+  }
+
+  .InputGroup:has(> .Addon[data-align="inline-end"]) > .Control {
+    padding-inline-end: var(--input-group-gap);
+  }.Control {
+  display: block;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  height: var(--input-group-size);
+  padding: 0 var(--input-group-gutter-x);
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+  .Control:focus {
+    outline: 0;
+  }
+
+  .Control:disabled {
+    cursor: not-allowed;
+  }
+
+  .Control::-moz-placeholder {
+    color: var(--input-placeholder-text-color);
+  }
+
+  .Control::placeholder {
+    color: var(--input-placeholder-text-color);
+  }
+
+  /* Hide up/down arrows */
+  .Control[type="number"] {
+    /* Firefox */
+    -webkit-appearance: textfield;
+       -moz-appearance: textfield;
+            appearance: textfield;
+
+    /* Chrome, Safari, Edge, Opera */
+  }
+    .Control[type="number"]::-webkit-outer-spin-button,
+    .Control[type="number"]::-webkit-inner-spin-button {
+      margin: 0;
+      -webkit-appearance: none;
+              appearance: none;
+    }/* Textarea: rows of --input-group-line-height, centered in the control height like Textarea */textarea.Control {
+  height: auto;
+  padding-block: calc((var(--input-group-size) - var(--input-group-line-height)) / 2);
+  line-height: var(--input-group-line-height);
+  resize: none;
+}.Addon {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  gap: var(--input-group-gap);
+  color: var(--input-placeholder-text-color);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+  .Addon > svg {
+    flex-shrink: 0;
+    width: var(--input-group-icon-size);
+    height: var(--input-group-icon-size);
+  }
+
+  .Addon[data-align="inline-start"] {
+    order: -1;
+    padding-inline-start: var(--input-group-gutter-x);
+  }
+
+  .Addon[data-align="inline-end"] {
+    order: 1;
+    padding-inline-end: var(--input-group-gutter-x);
+  }
+
+  .Addon[data-align="block-start"] {
+    order: -1;
+    padding: var(--input-group-gap) var(--input-group-gutter-x) 0;
+  }
+
+  .Addon[data-align="block-end"] {
+    order: 1;
+    padding: 0 var(--input-group-gutter-x) var(--input-group-gap);
+  }
+
+  /* Inline buttons fit the control height and sit spacing(1) = 4px from the edge */
+  .Addon[data-align^="inline"] > .Button {
+    --button-size: var(--input-group-button-size);
+  }
+
+  .Addon[data-align="inline-start"] > .Button:first-child {
+    margin-inline-start: calc(calc(var(--spacing) * 1) - var(--input-group-gutter-x));
+  }
+
+  .Addon[data-align="inline-end"] > .Button:last-child {
+    margin-inline-end: calc(calc(var(--spacing) * 1) - var(--input-group-gutter-x));
+  }/* InputGroup.Button: a Plex Button sized from the group (see .Addon) */.Button {
+  flex-shrink: 0;
+}.Text {
+  display: flex;
+  align-items: center;
+  gap: var(--input-group-gap);
+  white-space: nowrap;
+}
+
+  .Text > svg {
+    flex-shrink: 0;
+    width: var(--input-group-icon-size);
+    height: var(--input-group-icon-size);
+  }
+}

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

@@ -0,0 +1,47 @@
+@layer components {/* A key or a shortcut, such as ⌘K. The fill and the border mix the text color,
+   so a Kbd reads on any surface: page text, a dark tooltip, a menu item. */.Kbd {
+  --kbd-height: 1.25rem;
+  --kbd-font-size: var(--font-text-xs-size);
+  --kbd-padding-inline: calc(var(--spacing) * 1);
+
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--kbd-height);
+  height: var(--kbd-height);
+  padding-inline: var(--kbd-padding-inline);
+  border-radius: var(--kbd-radius, var(--radius-xs));
+  background: var(--kbd-background, color-mix(in oklab, currentColor 10%, transparent));
+  box-shadow: 0 0 0 1px var(--kbd-border-color, transparent) inset;
+  color: var(--kbd-color, inherit);
+  font-family: inherit;
+  font-size: var(--kbd-font-size);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+  .Kbd[data-size="xs"] {
+    --kbd-height: 1rem;
+    --kbd-font-size: 0.6875rem;
+    --kbd-padding-inline: calc(var(--spacing) * 0.75);
+  }
+
+  .Kbd[data-size="md"] {
+    --kbd-height: 1.5rem;
+    --kbd-font-size: var(--font-text-sm-size);
+    --kbd-padding-inline: calc(var(--spacing) * 1.5);
+  }
+
+  .Kbd[data-variant="outline"] {
+    --kbd-background: transparent;
+    --kbd-border-color: color-mix(in oklab, currentColor 24%, transparent);
+  }/* Keys pressed together, such as ⌘ and K */.Group {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 0.5);
+}
+}

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

@@ -0,0 +1,16 @@
+@layer components {.Label {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 0.5);
+  color: var(--label-color);
+  font-size: var(--label-font-size);
+  font-weight: var(--label-font-weight);
+  line-height: var(--label-line-height);
+  cursor: default;
+}
+
+  .Label:where([data-disabled]) {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,233 @@
+@layer components {.MarkdownContent {
+  overflow-wrap: anywhere;
+}
+  /* IMPORTANT: These cannot be removed without changing SmoothMarkdown   */
+  .MarkdownContent *:first-child {
+    margin-top: 0;
+  }
+  /* ******************************************************************** */
+
+  .MarkdownContent *:last-child {
+    margin-bottom: 0;
+  }
+
+  /* Headers */
+  .MarkdownContent h1 {
+    margin-bottom: 0.5rem;
+    font-size: 1.75em;
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: -0.04rem;
+    line-height: 1.222;
+  }
+  /* ******************************************************************** */
+
+  .MarkdownContent h2 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-size: 1.5em;
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.222;
+  }
+
+  /* Avoid margin collapse on all children, for more predictable spacing. */
+
+  .MarkdownContent h3 {
+    margin-top: 1.125rem;
+    margin-bottom: 0.625rem;
+    font-size: 1.25em;
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.3;
+  }
+
+  .MarkdownContent h4 {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    font-size: 1em;
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.5;
+  }
+
+  .MarkdownContent h5 {
+    font-size: 1em;
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.5;
+  }
+
+  .MarkdownContent h6 {
+    font-size: 1em;
+    line-height: 1.5;
+  }
+
+  /* Lists */
+  .MarkdownContent ul,
+  .MarkdownContent ol {
+    margin: 0.5em 0 1em;
+  }
+
+    .MarkdownContent ul > li > :first-child, .MarkdownContent ol > li > :first-child {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .MarkdownContent ul > li ul,
+    .MarkdownContent ul > li ol,
+    .MarkdownContent ol > li ul,
+    .MarkdownContent ol > li ol {
+      margin-top: 0.25em !important;
+    }
+
+  .MarkdownContent ul {
+    padding-left: 1.625em;
+    list-style-type: disc;
+  }
+
+    .MarkdownContent ul > li {
+      padding-left: 0.375em;
+      margin: 0.5em 0;
+    }
+
+      .MarkdownContent ul > li::marker {
+        color: var(--color-text-secondary);
+        font-size: 1em;
+        font-weight: var(--font-weight-medium);
+      }
+
+  .MarkdownContent ol {
+    padding-left: 1.625em;
+    list-style-type: decimal;
+  }
+
+    .MarkdownContent ol > li {
+      padding-left: 0.375em;
+      margin: 0.5em 0;
+    }
+
+      .MarkdownContent ol > li::marker {
+        color: var(--color-text-secondary);
+        font-size: 1em;
+        font-weight: var(--font-weight-medium);
+      }
+
+  .MarkdownContent li {
+    min-height: 1.5em;
+    margin: 0.5em 0;
+  }
+
+  /* Text */
+  .MarkdownContent p {
+    margin: 1em 0;
+  }
+
+  /* Emphasis */
+  .MarkdownContent strong {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .MarkdownContent em {
+    font-style: italic;
+  }
+
+  /* Quotes */
+  .MarkdownContent blockquote {
+    position: relative;
+    padding-top: 0.25em;
+    padding-bottom: 0.25rem;
+    padding-left: calc(var(--spacing) * 6);
+    color: var(--tw-prose-quotes);
+    font-weight: var(--font-weight-normal);
+    quotes: "\201C" "\201D" "\2018" "\2019";
+  }
+
+    .MarkdownContent blockquote::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      width: 0.25rem;
+      border-radius: var(--radius-2xs);
+      content: "";
+    }
+
+    .MarkdownContent blockquote::before, :where([data-theme="light"]) .MarkdownContent blockquote::before {
+background: var(--alpha-15);
+}
+
+    :where([data-theme="dark"]) .MarkdownContent blockquote::before {
+background: var(--alpha-20);
+}
+
+    .MarkdownContent blockquote p {
+      margin: 0.5em 0 0;
+    }
+
+      .MarkdownContent blockquote p:first-child {
+        margin-top: 0;
+      }
+
+  /* Dividers */
+  .MarkdownContent hr {
+    border-color: var(--alpha-10);
+    border-top-width: 1px;
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  /* Tables */
+  .MarkdownContent table {
+    width: 100%;
+    border: 0;
+    margin-top: 2em;
+    margin-bottom: 2em;
+    border-collapse: separate;
+    font-size: 0.875em;
+    line-height: 1.7142857;
+    table-layout: auto;
+  }
+
+  .MarkdownContent th {
+    border: 0;
+    border-bottom: 1px solid var(--color-border-strong);
+    line-height: var(--font-text-sm-line-height);
+    padding-block: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 2);
+    text-align: start;
+  }
+
+    .MarkdownContent th:first-child {
+      padding-inline-start: 0;
+    }
+
+    .MarkdownContent th:last-child {
+      padding-inline-end: 0;
+    }
+
+  .MarkdownContent td {
+    border: 0;
+    border-bottom: 1px solid var(--color-border);
+    padding-block: calc(var(--spacing) * 2.5);
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+    .MarkdownContent td:first-child {
+      padding-inline-start: 0;
+    }
+
+    .MarkdownContent td:last-child {
+      padding-inline-end: 0;
+    }
+    .MarkdownContent tbody tr:last-child td {
+      border-bottom: 0;
+    }.InlineCode {
+  padding: 1px 0.3rem;
+  border-radius: 0.25rem;
+  box-shadow: inset 0 0 0 1px var(--alpha-08);
+  color: inherit;
+  font-size: 0.875em;
+  font-weight: 500;
+}.InlineCode, :where([data-theme="light"]) .InlineCode {
+background-color: var(--alpha-04);
+}:where([data-theme="dark"]) .InlineCode {
+background-color: var(--alpha-10);
+}
+}