@plexui/styles 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,17 @@
+@layer components {.Skeleton {
+  background-color: var(--skeleton-background);
+  border-radius: var(--skeleton-radius);
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+}.Skeleton[data-circle] {
+  border-radius: var(--radius-full);
+}@keyframes skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+}

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

@@ -0,0 +1,199 @@
+@layer components {
+  @media (hover: hover) and (pointer: fine) {
+    .SliderWrap:hover .Reset[data-hide="false"] {
+      cursor: pointer;
+      opacity: 1;
+      transition:
+        visibility 0ms,
+        opacity 250ms ease;
+      visibility: visible;
+    }
+  }.Slider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-bottom: 6px;
+  touch-action: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+  /* Animate thumb position for single-mode programmatic changes */
+  .Slider .Thumb {
+    transition: left var(--slider-duration) var(--cubic-move);
+  }/* =============================================
+   Vertical orientation
+============================================= */.SliderWrap[data-orientation="vertical"] {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  height: var(--slider-vertical-height, 200px);
+}.SliderWrap[data-orientation="vertical"] .SliderLabel {
+  margin-bottom: 8px;
+}.SliderWrap[data-orientation="vertical"] .SliderContainer {
+  height: 100%;
+  width: auto;
+}.SliderWrap[data-orientation="vertical"] .Slider {
+  flex-direction: column;
+  width: auto;
+  height: 100%;
+  padding-bottom: 0;
+  padding-right: 6px;
+}.SliderWrap[data-orientation="vertical"] .Track {
+  width: 4px;
+  height: 100%;
+}.SliderWrap[data-orientation="vertical"] .Range {
+  width: 100%;
+  height: auto;
+}.SliderWrap[data-orientation="vertical"] .Thumb {
+  transition: none;
+}.Track {
+  position: relative;
+  flex-grow: 1;
+  width: 100%;
+  height: 4px;
+  border-radius: var(--radius-2xs);
+  background: var(--slider-track-color);
+}.Range {
+  position: absolute;
+  height: 100%;
+  border-radius: var(--radius-2xs);
+  background: var(--slider-range-color);
+  transition: right var(--slider-duration) var(--cubic-move);
+}.Thumb {
+  position: relative;
+  display: block;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--gray-0);
+  box-shadow: inset 0 0 0 2px var(--slider-range-color);
+  cursor: grab;
+  outline: none;
+}
+
+  .Thumb:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  .Thumb:active {
+    cursor: grabbing;
+  }
+
+  .Thumb:disabled {
+    pointer-events: none;
+  }.SliderLabel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  margin-bottom: 8px;
+  color: var(--color-text);
+  font-size: 14px;
+}.Reset {
+  /* Ensures cursor switches back immediately after clicking reset button. */
+  cursor: default;
+  opacity: 0;
+  transition:
+    visibility 0ms ease 250ms,
+    opacity 250ms ease;
+  visibility: hidden;
+}
+
+  /* Custom overrides outside the design system. Using the data attribute to win the specificity war. */
+  .Reset[data-size="2xs"] {
+    width: 22px;
+    height: 22px;
+  }
+
+    .Reset[data-size="2xs"] svg {
+      width: 14px;
+      height: 14px;
+    }.SliderValue {
+  overflow: hidden;
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 2px;
+  height: 26px;
+  padding: 0 4px;
+  border: 0.5px solid transparent;
+  border-radius: var(--radius-sm);
+  margin-right: -4px;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: transparent;
+  cursor: text;
+  outline: none;
+  text-align: center;
+  transition: border-color 250ms ease;
+}
+
+  @media (min-width: 768px) {
+    .SliderValue {
+    height: 22px;
+    }
+  }
+
+  .SliderWrap:hover .SliderValue:not(:focus-within) {
+    border-color: var(--gray-200);
+  }
+
+  .SliderValue:focus-within {
+    border-color: var(--gray-500);
+  }.ValueInput {
+  height: 100%;
+  padding: 0;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: transparent;
+  color: var(--color-text);
+  font-size: 16px;
+  font-variant-numeric: tabular-nums;
+  outline: none;
+  text-align: left;
+  transition: width 100ms ease;
+}
+
+  @media (min-width: 768px) {
+    .ValueInput {
+    font-size: 13px;
+    }
+  }.ValueUnit {
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}.SliderContainer {
+  position: relative;
+  width: 100%;
+}.MarksContainer {
+  position: relative;
+  width: 100%;
+  margin-top: 4px;
+}.Mark {
+  position: absolute;
+  color: var(--color-text);
+  font-size: 12px;
+  font-weight: normal;
+}.MarkLabel {
+  display: inline-block;
+  overflow-wrap: break-word;
+  text-align: center;
+  word-wrap: break-word;
+}/* =============================================
+   Range display (read-only value for range mode)
+============================================= */.RangeDisplay {
+  color: var(--color-text);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+}

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

@@ -0,0 +1,234 @@
+@layer components {.StatCard {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  padding: var(--stat-card-padding);
+  border-radius: var(--stat-card-radius);
+  background: var(--stat-card-background);
+  box-shadow: 0 0 0 1px var(--stat-card-border-color) inset;
+  font-size: var(--stat-card-label-font-size);
+  line-height: var(--font-text-sm-line-height);
+}
+
+  .StatCard:where([data-size="sm"]) {
+    padding: var(--stat-card-sm-padding-block) var(--stat-card-sm-padding-inline);
+  }
+
+    .StatCard:where([data-size="sm"]) .Label {
+      font-size: var(--stat-card-sm-label-font-size);
+      line-height: var(--font-text-xs-line-height);
+    }
+
+    .StatCard:where([data-size="sm"]) .InfoIcon svg {
+      width: var(--stat-card-sm-info-icon-size);
+      height: var(--stat-card-sm-info-icon-size);
+    }
+
+    .StatCard:where([data-size="sm"]) .Value {
+      font-size: var(--stat-card-sm-value-font-size);
+      line-height: var(--font-heading-md-line-height);
+      letter-spacing: var(--font-heading-md-tracking);
+    }
+
+    .StatCard:where([data-size="sm"]) .Trend {
+      font-size: var(--stat-card-sm-trend-font-size);
+      line-height: var(--font-text-xs-line-height);
+    }
+
+    .StatCard:where([data-size="sm"]) .ValueRow {
+      margin-block-start: calc(var(--spacing) * 1.5);
+    }
+
+    .StatCard:where([data-size="sm"]) .Footer {
+      margin-block-start: calc(var(--spacing) * 0.5);
+    }
+
+    .StatCard:where([data-size="sm"]) .Description {
+      font-size: var(--stat-card-sm-description-font-size);
+      line-height: var(--font-text-xs-line-height);
+    }
+
+    .StatCard:where([data-size="sm"]) .TrendLabel {
+      font-size: var(--stat-card-sm-description-font-size);
+      line-height: var(--font-text-xs-line-height);
+    }
+
+    .StatCard:where([data-size="sm"]) .IconWrapper {
+      border-radius: var(--stat-card-sm-icon-wrapper-radius);
+    }
+
+      .StatCard:where([data-size="sm"]) .IconWrapper svg {
+        width: var(--stat-card-sm-icon-size);
+        height: var(--stat-card-sm-icon-size);
+      }
+
+    .StatCard:where([data-size="sm"]) .Body {
+      gap: calc(var(--spacing) * 2.5);
+    }
+
+  .StatCard:where([data-variant="accent"]) {
+    border-inline-start: var(--stat-card-accent-width) solid
+      var(--stat-card-accent-color, var(--color-background-primary-solid));
+  }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="primary"]) {
+      --stat-card-accent-color: var(--color-background-primary-solid);
+    }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="info"]) {
+      --stat-card-accent-color: var(--color-background-info-solid);
+    }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="success"]) {
+      --stat-card-accent-color: var(--color-background-success-solid);
+    }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="warning"]) {
+      --stat-card-accent-color: var(--color-background-warning-solid);
+    }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="danger"]) {
+      --stat-card-accent-color: var(--color-background-danger-solid);
+    }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="secondary"]) {
+      --stat-card-accent-color: var(--color-background-secondary-solid);
+    }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="discovery"]) {
+      --stat-card-accent-color: var(--color-background-discovery-solid);
+    }
+
+    .StatCard:where([data-variant="accent"]):where([data-accent-color="caution"]) {
+      --stat-card-accent-color: var(--color-background-caution-solid);
+    }.Header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--spacing) * 6);
+}.LabelRow {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 1);
+  min-width: 0;
+}.Label {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--stat-card-label-color);
+  font-size: var(--stat-card-label-font-size);
+  line-height: var(--font-text-sm-line-height);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}.InfoIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-text-tertiary);
+  cursor: help;
+}
+
+  .InfoIcon svg {
+    width: var(--stat-card-info-icon-size);
+    height: var(--stat-card-info-icon-size);
+  }.Body {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(var(--spacing) * 3);
+}.Content {
+  flex: 1;
+  min-width: 0;
+}
+
+  .Content .ValueRow {
+    margin-block-start: calc(var(--spacing) * 0.5);
+  }.IconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  align-self: stretch;
+  aspect-ratio: 1;
+  border-radius: var(--stat-card-icon-wrapper-radius);
+  background: var(--stat-card-icon-wrapper-background);
+  color: var(--stat-card-icon-color);
+}
+
+  .IconWrapper svg {
+    width: var(--stat-card-icon-size);
+    height: var(--stat-card-icon-size);
+  }.HeaderEnd {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 2);
+  flex-shrink: 0;
+}.ValueRow {
+  display: flex;
+  align-items: baseline;
+  gap: calc(var(--spacing) * 2);
+  margin-block-start: calc(var(--spacing) * 3);
+}.Value {
+  min-width: 0;
+  color: var(--stat-card-value-color);
+  font-size: var(--stat-card-value-font-size);
+  font-weight: var(--stat-card-value-font-weight);
+  line-height: var(--font-heading-xl-line-height);
+  letter-spacing: var(--font-heading-xl-tracking);
+}.Trend {
+  display: inline-flex;
+  flex-shrink: 0;
+  font-size: var(--stat-card-trend-font-size);
+  font-weight: var(--stat-card-trend-font-weight);
+  line-height: var(--font-text-sm-line-height);
+  white-space: nowrap;
+}.TrendPositive {
+  color: var(--stat-card-trend-positive-color);
+}.TrendNegative {
+  color: var(--stat-card-trend-negative-color);
+}.TrendNeutral {
+  color: var(--stat-card-trend-neutral-color);
+}.Footer {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing) * 0.5);
+  margin-block-start: calc(var(--spacing) * 2);
+}.TrendLabel {
+  color: var(--stat-card-description-color);
+  font-size: var(--stat-card-description-font-size);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--font-text-sm-line-height);
+}.Description {
+  color: var(--stat-card-description-color);
+  font-size: var(--stat-card-description-font-size);
+  line-height: var(--font-text-sm-line-height);
+  text-wrap: pretty;
+}.Progress {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 2);
+  margin-block-start: calc(var(--spacing) * 3);
+}.ProgressTrack {
+  flex: 1;
+  height: var(--stat-card-progress-height);
+  border-radius: var(--stat-card-progress-radius);
+  background: var(--stat-card-progress-background);
+  overflow: hidden;
+}.ProgressBar {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--stat-card-progress-fill);
+}.ProgressLabel {
+  color: var(--stat-card-description-color);
+  font-size: var(--stat-card-description-font-size);
+  line-height: var(--font-text-sm-line-height);
+  white-space: nowrap;
+}.Sparkline {
+  margin-block-start: calc(var(--spacing) * 3);
+  color: var(--color-text-tertiary);
+}
+
+  .Sparkline svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+}

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

@@ -0,0 +1,121 @@
+@layer components {.Container {
+  display: flex;
+  font-size: var(--font-text-sm-size);
+  line-height: var(--font-text-sm-line-height);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+  .Container[data-has-label] {
+    align-items: flex-start;
+  }
+
+  .Container[data-label-position="start"] {
+    flex-direction: row-reverse;
+  }.Track {
+  position: relative;
+  flex-shrink: 0;
+  width: var(--switch-track-width);
+  max-width: var(--switch-track-width);
+  height: var(--switch-track-height);
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--switch-track-color);
+  cursor: pointer;
+  transition: background-color 250ms var(--cubic-move);
+}
+    @media (hover: hover) and (pointer: fine) {.Track:where(:not([data-disabled], [data-state="checked"])):hover {
+      background: var(--switch-track-color-hover);
+}
+}
+
+  [data-has-label] .Track {
+    /*
+     * Vertical alignment adjusting when necessary. Avoid using align-items: center; for long wrapping labels.
+     */
+    top: var(--switch-track-top-offset, 1px);
+  }
+
+  .Track:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  .Track[data-state="checked"] {
+    background: var(--switch-track-color-checked);
+  }
+
+  .Track[data-disabled] {
+    background: var(--switch-track-color-disabled);
+    cursor: not-allowed;
+  }
+
+    .Track[data-disabled][data-state="checked"] {
+      background: var(--switch-track-color-checked-disabled);
+    }.Thumb {
+  position: absolute;
+  top: var(--switch-thumb-offset);
+  left: var(--switch-thumb-offset);
+  display: block;
+  width: var(--switch-thumb-size);
+  height: var(--switch-thumb-size);
+  border-radius: var(--radius-full);
+  background: var(--switch-thumb-color);
+  box-shadow: var(--switch-thumb-shadow);
+  transition: transform 250ms var(--cubic-move);
+}
+
+  [data-state="checked"] .Thumb {
+    transform: translateX(
+      calc(var(--switch-track-width) - var(--switch-thumb-size) - var(--switch-thumb-offset) * 2)
+    );
+  }
+
+  .Thumb[data-disabled] {
+    background: var(--switch-thumb-color-disabled);
+    box-shadow: none;
+  }.LabelGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+  /* Use padding so that the spacing is intrinsic to the group, remaining clickable. */
+  [data-label-position="end"] .LabelGroup {
+    padding-left: var(--switch-label-gap);
+  }
+
+  [data-label-position="start"] .LabelGroup {
+    padding-right: var(--switch-label-gap);
+  }
+
+  [data-disabled] .LabelGroup {
+    cursor: not-allowed;
+  }.Label {
+  font-weight: var(--field-label-font-weight);
+  cursor: pointer;
+}
+
+  /* Use padding so that the spacing is intrinsic to the label, remaining clickable. */
+  [data-label-position="end"] > .Label {
+    padding-left: var(--switch-label-gap);
+  }
+
+  [data-label-position="start"] > .Label {
+    padding-right: var(--switch-label-gap);
+  }
+
+  [data-disabled] .Label {
+    cursor: not-allowed;
+  }.Description {
+  color: var(--color-text-secondary);
+  font-size: var(--font-text-xs-size);
+  line-height: var(--font-text-xs-line-height);
+  cursor: pointer;
+}
+
+  [data-disabled] .Description {
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,56 @@
+@layer components {.TableWrapper {
+  position: relative;
+  width: 100%;
+  overflow: auto;
+}.Table {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  font-size: var(--table-cell-font-size);
+  line-height: var(--table-cell-line-height);
+  color: var(--table-cell-color);
+  text-align: left;
+}.TableHeader {
+  background: var(--table-header-background);
+}
+
+  .TableHeader :where(.TableRow) {
+    border-bottom: 1px solid var(--table-border-color);
+  }.TableHead {
+  height: var(--control-size-md);
+  padding: var(--table-cell-padding);
+  font-weight: var(--table-header-font-weight);
+  color: var(--table-header-color);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+  .TableBody :where(.TableRow) {
+    border-bottom: 1px solid var(--table-border-color);
+    transition: background-color 0.1s ease;
+  }
+
+    .TableBody :where(.TableRow):last-child {
+      border-bottom: none;
+    }
+
+    .TableBody :where(.TableRow):hover {
+      background-color: var(--table-row-hover-background);
+    }.TableRow {}.TableCell {
+  padding: var(--table-cell-padding);
+  vertical-align: middle;
+}.TableFooter {
+  border-top: 1px solid var(--table-border-color);
+  background: var(--table-footer-background);
+  font-weight: var(--table-footer-font-weight);
+}
+
+  .TableFooter :where(.TableRow:last-child) {
+    border-bottom: none;
+  }.TableCaption {
+  padding: var(--table-cell-padding);
+  font-size: var(--table-caption-font-size);
+  color: var(--table-caption-color);
+  caption-side: bottom;
+  text-align: left;
+}
+}