@plexui/styles 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,196 @@
+@layer components {.Badge {
+  --indicator-size: var(--badge-indicator-size);
+
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 1);
+  height: var(--badge-size);
+  padding: 0 var(--badge-gutter);
+  border-radius: var(--badge-radius);
+  font-size: var(--badge-font-size);
+  font-weight: var(--badge-font-weight);
+  letter-spacing: var(--badge-tracking);
+  white-space: nowrap;
+}
+
+  .Badge svg {
+    font-size: var(--badge-icon-font-size);
+  }
+
+    :where(.Badge svg:first-child:not(:only-child)) {
+      margin-left: var(--badge-icon-offset, -1px);
+    }
+
+    :where(.Badge svg:last-child:not(:only-child)) {
+      margin-right: var(--badge-icon-offset, -1px);
+    }
+
+  /* =============================================
+    Variants
+  ============================================= */
+  .Badge[data-variant="soft"] {
+    background-color: var(--badge-background-color);
+    color: var(--badge-text-color);
+  }
+
+    .Badge[data-variant="soft"]:where([data-color="secondary"]) {
+      --badge-background-color: var(--color-background-secondary-soft-alpha);
+      --badge-text-color: var(--color-text-secondary-soft);
+    }
+
+    .Badge[data-variant="soft"]:where([data-color="success"]) {
+      --badge-background-color: var(--color-background-success-soft-alpha);
+      --badge-text-color: var(--color-text-success-soft);
+    }
+
+    .Badge[data-variant="soft"]:where([data-color="warning"]) {
+      --badge-background-color: var(--color-background-warning-soft-alpha);
+      --badge-text-color: var(--color-text-warning-soft);
+    }
+
+    .Badge[data-variant="soft"]:where([data-color="danger"]) {
+      --badge-background-color: var(--color-background-danger-soft-alpha);
+      --badge-text-color: var(--color-text-danger-soft);
+    }
+
+    .Badge[data-variant="soft"]:where([data-color="info"]) {
+      --badge-background-color: var(--color-background-info-soft-alpha);
+      --badge-text-color: var(--color-text-info-soft);
+    }
+
+    .Badge[data-variant="soft"]:where([data-color="discovery"]) {
+      --badge-background-color: var(--color-background-discovery-soft-alpha);
+      --badge-text-color: var(--color-text-discovery-soft);
+    }
+
+    .Badge[data-variant="soft"]:where([data-color="caution"]) {
+      --badge-background-color: var(--color-background-caution-soft-alpha);
+      --badge-text-color: var(--color-text-caution-soft);
+    }
+
+  .Badge[data-variant="solid"] {
+    background-color: var(--badge-background-color);
+    color: var(--badge-text-color);
+  }
+
+    .Badge[data-variant="solid"]:where([data-color="secondary"]) {
+      --badge-background-color: var(--color-background-secondary-solid);
+      --badge-text-color: var(--color-text-secondary-solid);
+    }
+
+    .Badge[data-variant="solid"]:where([data-color="success"]) {
+      --badge-background-color: var(--color-background-success-solid);
+      --badge-text-color: var(--color-text-success-solid);
+    }
+
+    .Badge[data-variant="solid"]:where([data-color="warning"]) {
+      --badge-background-color: var(--color-background-warning-solid);
+      --badge-text-color: var(--color-text-warning-solid);
+    }
+
+    .Badge[data-variant="solid"]:where([data-color="danger"]) {
+      --badge-background-color: var(--color-background-danger-solid);
+      --badge-text-color: var(--color-text-danger-solid);
+    }
+
+    .Badge[data-variant="solid"]:where([data-color="info"]) {
+      --badge-background-color: var(--color-background-info-solid);
+      --badge-text-color: var(--color-text-info-solid);
+    }
+
+    .Badge[data-variant="solid"]:where([data-color="discovery"]) {
+      --badge-background-color: var(--color-background-discovery-solid);
+      --badge-text-color: var(--color-text-discovery-solid);
+    }
+
+    .Badge[data-variant="solid"]:where([data-color="caution"]) {
+      --badge-background-color: var(--color-background-caution-solid);
+      --badge-text-color: var(--color-text-caution-solid);
+    }
+
+  .Badge[data-variant="outline"] {
+    /* Avoids additive `width` compared to other variants */
+    box-shadow: 0 0 0 1px var(--badge-border-color) inset;
+    color: var(--badge-text-color);
+  }
+
+    .Badge[data-variant="outline"]:where([data-color="secondary"]) {
+      --badge-border-color: var(--color-border-secondary-outline);
+      --badge-text-color: var(--color-text-secondary-outline);
+    }
+
+    .Badge[data-variant="outline"]:where([data-color="success"]) {
+      --badge-border-color: var(--color-border-success-outline);
+      --badge-text-color: var(--color-text-success-outline);
+    }
+
+    .Badge[data-variant="outline"]:where([data-color="warning"]) {
+      --badge-border-color: var(--color-border-warning-outline);
+      --badge-text-color: var(--color-text-warning-outline);
+    }
+
+    .Badge[data-variant="outline"]:where([data-color="danger"]) {
+      --badge-border-color: var(--color-border-danger-outline);
+      --badge-text-color: var(--color-text-danger-outline);
+    }
+
+    .Badge[data-variant="outline"]:where([data-color="info"]) {
+      --badge-border-color: var(--color-border-info-outline);
+      --badge-text-color: var(--color-text-info-outline);
+    }
+
+    .Badge[data-variant="outline"]:where([data-color="discovery"]) {
+      --badge-border-color: var(--color-border-discovery-outline);
+      --badge-text-color: var(--color-text-discovery-outline);
+    }
+
+    .Badge[data-variant="outline"]:where([data-color="caution"]) {
+      --badge-border-color: var(--color-border-caution-outline);
+      --badge-text-color: var(--color-text-caution-outline);
+    }
+
+  /* =============================================
+    Sizes
+  ============================================= */
+  .Badge:where([data-size="sm"]) {
+    --badge-size: var(--badge-size-sm);
+    --badge-gutter: var(--badge-gutter-sm);
+    --badge-font-size: var(--badge-font-size-sm);
+    --badge-font-weight: var(--badge-font-weight-sm);
+    --badge-tracking: var(--badge-tracking-sm);
+    --badge-radius: var(--badge-radius-sm);
+    --badge-icon-font-size: var(--badge-icon-font-size-sm);
+    --badge-indicator-size: var(--badge-indicator-size-sm);
+  }
+
+  .Badge:where([data-size="md"]) {
+    --badge-size: var(--badge-size-md);
+    --badge-gutter: var(--badge-gutter-md);
+    --badge-font-size: var(--badge-font-size-md);
+    --badge-font-weight: var(--badge-font-weight-md);
+    --badge-tracking: var(--badge-tracking-md);
+    --badge-radius: var(--badge-radius-md);
+    --badge-icon-font-size: var(--badge-icon-font-size-md);
+    --badge-indicator-size: var(--badge-indicator-size-md);
+  }
+
+  .Badge:where([data-size="lg"]) {
+    --badge-size: var(--badge-size-lg);
+    --badge-gutter: var(--badge-gutter-lg);
+    --badge-font-size: var(--badge-font-size-lg);
+    --badge-font-weight: var(--badge-font-weight-lg);
+    --badge-tracking: var(--badge-tracking-lg);
+    --badge-radius: var(--badge-radius-lg);
+    --badge-icon-font-size: var(--badge-icon-font-size-lg);
+    --badge-indicator-size: var(--badge-indicator-size-lg);
+  }
+
+  /* =============================================
+    Pill
+  ============================================= */
+  .Badge:where([data-pill]) {
+    --badge-radius: var(--radius-full);
+
+    padding: 0 calc(var(--badge-gutter) * var(--control-gutter-pill-scaling));
+  }
+}

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

@@ -0,0 +1,59 @@
+@layer components {/* The trail of pages above a page title: links in the secondary text color,
+   the current page in the text color, separators in the tertiary color.
+   A long trail wraps instead of leaving the screen. */.Breadcrumb {
+  --breadcrumb-font-size: var(--font-text-sm-size);
+  --breadcrumb-line-height: var(--font-text-sm-line-height);
+  --breadcrumb-gap: calc(var(--spacing) * 1);
+
+  font-size: var(--breadcrumb-font-size);
+  line-height: var(--breadcrumb-line-height);
+}
+
+  .Breadcrumb[data-size="sm"] {
+    --breadcrumb-font-size: var(--font-text-xs-size);
+    --breadcrumb-line-height: var(--font-text-xs-line-height);
+    --breadcrumb-gap: calc(var(--spacing) * 0.5);
+  }.List {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--breadcrumb-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}.Item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--breadcrumb-gap);
+  min-width: 0;
+  color: var(--color-text-secondary);
+}.Separator {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-text-tertiary);
+}
+
+  .Separator svg {
+    width: 1em;
+    height: 1em;
+  }
+
+    /* The chevron points along the reading direction */
+    .Separator svg:dir(rtl) {
+      transform: scaleX(-1);
+    }
+
+  .Item:first-child > .Separator {
+    display: none;
+  }.Item > .Link {
+  color: var(--color-text-secondary);
+}
+
+  @media (hover: hover) and (pointer: fine) {.Item > .Link:hover {
+    color: var(--color-text);
+}
+}.Current {
+  color: var(--color-text);
+  overflow-wrap: anywhere;
+}
+}