@pathscale/ui 0.0.163 → 0.0.165

package/dist/index.css

@@ -1,54 +1,225 @@
-@import "./styles/base/index.css";
-@import "./styles/compat/daisy-primitives.css";
-@import "./styles/themes/dark.css";
-@import "./styles/themes/light.css";
-@import "./components/sidenav/Sidenav.css";
-@import "./styles/icons/generated-icons.css";
-
-@theme {
-  --color-light: var(--color-zinc-100);
-  --color-dark: var(--color-zinc-900);
-
-  /* Base colors */
-  --color-primary: var(--color-primary);
-  --color-primary-content: var(--color-primary-content);
-  --color-secondary: var(--color-secondary);
-  --color-secondary-content: var(--color-secondary-content);
-  --color-accent: var(--color-accent);
-  --color-accent-content: var(--color-accent-content);
-  --color-neutral: var(--color-neutral);
-  --color-neutral-content: var(--color-neutral-content);
-
-  /* Semantic colors */
-  --color-info: var(--color-info);
-  --color-info-content: var(--color-info-content);
-  --color-success: var(--color-success);
-  --color-success-content: var(--color-success-content);
-  --color-warning: var(--color-warning);
-  --color-warning-content: var(--color-warning-content);
-  --color-error: var(--color-error);
-  --color-error-content: var(--color-error-content);
-
-  /* Base background colors */
-  --color-base-100: var(--color-base-100);
-  --color-base-200: var(--color-base-200);
-  --color-base-300: var(--color-base-300);
-  --color-base-content: var(--color-base-content);
-
-  /* Legacy support */
-  --color-bg-body: var(--color-base-100);
-  --color-bg-primary: var(--color-base-200);
-  --color-bg-secondary: var(--color-base-300);
-  --color-bg-tertiary: var(--color-neutral);
-  --color-bg-accent: var(--color-accent);
-  --color-bg-positive: var(--color-success);
-  --color-bg-destructive: var(--color-error);
-
-  --color-fg-body: var(--color-base-content);
-  --color-fg-primary: var(--color-base-content);
-  --color-fg-secondary: var(--color-neutral-content);
-  --color-fg-tertiary: var(--color-neutral-content);
-  --color-fg-accent: var(--color-accent-content);
-  --color-fg-positive: var(--color-success-content);
-  --color-fg-destructive: var(--color-error-content);
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *, :before, :after, ::backdrop {
+      --tw-font-weight: initial;
+      --tw-leading: initial;
+    }
+  }
 }
+
+.badge {
+  justify-content: center;
+  align-items: center;
+  gap: calc(var(--spacing, .25rem) * .5);
+  --tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  min-height: calc(var(--spacing, .25rem) * 7);
+  min-width: calc(var(--spacing, .25rem) * 7);
+  border-radius: var(--radius-3xl, 1.5rem);
+  font-size: var(--text-xs, .75rem);
+  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));
+  --tw-leading: 1.34;
+  --badge-bg: var(--color-default);
+  --badge-fg: var(--color-default-foreground);
+  --badge-border: var(--color-background);
+  background-color: var(--badge-bg);
+  color: var(--badge-fg);
+  border: 1px solid var(--badge-border);
+  flex-shrink: 0;
+  line-height: 1.34;
+  display: inline-flex;
+}
+
+.badge__label {
+  padding-inline: calc(var(--spacing, .25rem) * .5);
+}
+
+.badge-anchor {
+  flex-shrink: 0;
+  display: inline-flex;
+  position: relative;
+}
+
+.badge--lg {
+  min-height: calc(var(--spacing, .25rem) * 8);
+  min-width: calc(var(--spacing, .25rem) * 8);
+  border-radius: var(--radius-2xl, 1rem);
+  font-size: var(--text-sm, .875rem);
+  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));
+  --tw-leading: 1.43;
+  line-height: 1.43;
+}
+
+.badge--sm {
+  min-height: calc(var(--spacing, .25rem) * 4);
+  min-width: calc(var(--spacing, .25rem) * 4);
+  border-radius: var(--radius-xl, .75rem);
+  --tw-leading: 1.34;
+  font-size: 10px;
+  line-height: 1.34;
+}
+
+.badge--accent {
+  --badge-fg: var(--color-accent);
+}
+
+.badge--default {
+  --badge-fg: var(--color-default-foreground);
+}
+
+.badge--success {
+  --badge-fg: var(--color-success);
+}
+
+.badge--warning {
+  --badge-fg: var(--color-warning);
+}
+
+.badge--danger {
+  --badge-fg: var(--color-danger);
+}
+
+.badge--top-right {
+  top: calc(var(--spacing, .25rem) * 0);
+  right: calc(var(--spacing, .25rem) * 0);
+  position: absolute;
+  transform: translate(25%, -25%);
+}
+
+.badge--top-left {
+  top: calc(var(--spacing, .25rem) * 0);
+  left: calc(var(--spacing, .25rem) * 0);
+  position: absolute;
+  transform: translate(-25%, -25%);
+}
+
+.badge--bottom-right {
+  right: calc(var(--spacing, .25rem) * 0);
+  bottom: calc(var(--spacing, .25rem) * 0);
+  position: absolute;
+  transform: translate(25%, 25%);
+}
+
+.badge--bottom-left {
+  bottom: calc(var(--spacing, .25rem) * 0);
+  left: calc(var(--spacing, .25rem) * 0);
+  position: absolute;
+  transform: translate(-25%, 25%);
+}
+
+.badge--primary.badge--accent {
+  --badge-bg: var(--color-accent);
+  --badge-fg: var(--color-accent-foreground);
+}
+
+.badge--primary.badge--default {
+  --badge-bg: var(--color-default);
+  --badge-fg: var(--color-default-foreground);
+}
+
+.badge--primary.badge--success {
+  --badge-bg: var(--color-success);
+  --badge-fg: var(--color-success-foreground);
+}
+
+.badge--primary.badge--warning {
+  --badge-bg: var(--color-warning);
+  --badge-fg: var(--color-warning-foreground);
+}
+
+.badge--primary.badge--danger {
+  --badge-bg: var(--color-danger);
+  --badge-fg: var(--color-danger-foreground);
+}
+
+.badge--soft.badge--accent {
+  --badge-bg: var(--color-accent-soft);
+  --badge-fg: var(--color-accent-soft-foreground);
+}
+
+.badge--soft.badge--default {
+  --badge-bg: var(--color-default);
+  --badge-fg: var(--color-default-foreground);
+}
+
+.badge--soft.badge--success {
+  --badge-bg: var(--color-success-soft);
+  --badge-fg: var(--color-success-soft-foreground);
+}
+
+.badge--soft.badge--warning {
+  --badge-bg: var(--color-warning-soft);
+  --badge-fg: var(--color-warning-soft-foreground);
+}
+
+.badge--soft.badge--danger {
+  --badge-bg: var(--color-danger-soft);
+  --badge-fg: var(--color-danger-soft-foreground);
+}
+
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-leading {
+  syntax: "*";
+  inherits: false
+}
+
+.glow-card {
+  --glow-color-border: oklch(100% 0 0 / .3);
+  --glow-color-bg: oklch(100% 0 0 / .1);
+  border-radius: inherit;
+  position: relative;
+}
+
+.glow-card:before, .glow-card:after {
+  content: "";
+  border-radius: inherit;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .3s;
+  position: absolute;
+  inset: 0;
+}
+
+.glow-card:before {
+  background: radial-gradient(250px circle at var(--mouse-x) var(--mouse-y), var(--glow-color-border), transparent 80%);
+  z-index: 1;
+  -webkit-mask-composite: xor;
+  padding: 1px;
+  inset: -1px;
+  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
+  mask-position: 0 0, 0 0;
+  mask-size: auto, auto;
+  mask-repeat: repeat, repeat;
+  mask-clip: content-box, border-box;
+  mask-origin: content-box, border-box;
+  mask-composite: exclude;
+  mask-mode: match-source, match-source;
+}
+
+.glow-card:after {
+  background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), var(--glow-color-bg), transparent 80%);
+  z-index: 0;
+}
+
+.glow-card:hover:before, .glow-card:hover:after {
+  opacity: 1;
+}
+
+[data-theme="light"] .glow-card:before {
+  --glow-color-border: oklch(30% .15 260 / .4);
+}
+
+[data-theme="light"] .glow-card:after {
+  --glow-color-bg: oklch(30% .15 260 / .15);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .glow-card:before, .glow-card:after {
+    opacity: 0 !important;
+  }
+}
+