@sabrenski/spire-ui-vue 0.1.1 → 0.2.1

package/dist/theme/semantic.css

@@ -0,0 +1,399 @@
+@theme {
+    --color-canvas: var(--color-neutral-100);
+    --color-surface: var(--color-neutral-50);
+    --color-surface-hover: var(--color-neutral-100);
+    --color-subtle: var(--color-neutral-200);
+    --color-muted: var(--color-neutral-300);
+    --color-elevated: white;
+    --color-overlay: oklch(0% 0 0 / 50%);
+    --color-popover: white;
+    --color-inset: var(--color-neutral-200);
+
+    --color-foreground: var(--color-neutral-900);
+    --color-foreground-muted: var(--color-neutral-600);
+    --color-foreground-subtle: var(--color-neutral-500);
+    --color-foreground-disabled: var(--color-neutral-400);
+    --color-foreground-inverse: white;
+    --color-on-emphasis: white;
+
+    --color-border: var(--color-neutral-200);
+    --color-border-hover: var(--color-neutral-300);
+    --color-border-muted: var(--color-neutral-100);
+    --color-border-emphasis: var(--color-neutral-400);
+
+    --color-primary: var(--color-primary-600);
+    --color-primary-hover: var(--color-primary-700);
+    --color-primary-active: var(--color-primary-800);
+    --color-primary-subtle: var(--color-primary-100);
+    --color-primary-subtle-hover: var(--color-primary-200);
+    --color-primary-outline: var(--color-primary-200);
+    --color-primary-outline-hover: var(--color-primary-300);
+    --color-primary-foreground: var(--color-primary-600);
+    --color-primary-ring: var(--color-primary-400);
+
+    --color-secondary: var(--color-neutral-100);
+    --color-secondary-hover: var(--color-neutral-200);
+    --color-secondary-active: var(--color-neutral-300);
+    --color-secondary-subtle: var(--color-neutral-100);
+    --color-secondary-foreground: var(--color-neutral-700);
+
+    --color-success: var(--color-success-600);
+    --color-success-hover: var(--color-success-700);
+    --color-success-active: var(--color-success-800);
+    --color-success-subtle: var(--color-success-100);
+    --color-success-subtle-hover: var(--color-success-200);
+    --color-success-foreground: var(--color-success-600);
+    --color-success-ring: var(--color-success-400);
+
+    --color-danger: var(--color-danger-600);
+    --color-danger-hover: var(--color-danger-700);
+    --color-danger-active: var(--color-danger-800);
+    --color-danger-subtle: var(--color-danger-100);
+    --color-danger-subtle-hover: var(--color-danger-200);
+    --color-danger-foreground: var(--color-danger-600);
+    --color-danger-ring: var(--color-danger-400);
+
+    --color-warning: var(--color-warning-500);
+    --color-warning-hover: var(--color-warning-600);
+    --color-warning-active: var(--color-warning-700);
+    --color-warning-subtle: var(--color-warning-100);
+    --color-warning-subtle-hover: var(--color-warning-200);
+    --color-warning-foreground: var(--color-warning-600);
+    --color-warning-ring: var(--color-warning-400);
+
+    --color-info: var(--color-primary-600);
+    --color-info-hover: var(--color-primary-700);
+    --color-info-active: var(--color-primary-800);
+    --color-info-subtle: var(--color-primary-100);
+    --color-info-subtle-hover: var(--color-primary-200);
+    --color-info-foreground: var(--color-primary-600);
+    --color-info-ring: var(--color-primary-400);
+
+    --color-chart-1: oklch(55% 0.2 250);
+    --color-chart-2: oklch(60% 0.2 150);
+    --color-chart-3: oklch(65% 0.2 45);
+    --color-chart-4: oklch(55% 0.2 320);
+    --color-chart-5: oklch(60% 0.18 80);
+    --color-chart-6: oklch(55% 0.22 15);
+    --color-chart-7: oklch(58% 0.15 200);
+    --color-chart-8: oklch(55% 0.18 290);
+
+    --color-ghost: transparent;
+    --color-ghost-hover: var(--color-neutral-100);
+    --color-ghost-active: var(--color-neutral-200);
+
+    --color-contrast: var(--color-neutral-800);
+    --color-contrast-hover: var(--color-neutral-900);
+    --color-contrast-active: var(--color-neutral-950);
+    --color-contrast-foreground: white;
+
+    --color-outline: transparent;
+    --color-outline-hover: var(--color-neutral-50);
+    --color-outline-active: var(--color-neutral-100);
+
+    --color-ring: var(--color-primary-400);
+    --color-ring-offset: white;
+
+    --color-input: white;
+    --color-input-disabled: var(--color-neutral-100);
+    --color-input-border: var(--color-neutral-300);
+    --color-input-border-hover: var(--color-neutral-400);
+    --color-input-border-focus: var(--color-primary-500);
+    --color-input-border-invalid: var(--color-danger-500);
+    --color-input-placeholder: var(--color-neutral-400);
+
+    --size-control-xs: 1.5rem;
+    --size-control-sm: 2rem;
+    --size-control-md: 2.5rem;
+    --size-control-lg: 3rem;
+    --size-control-xl: 3.5rem;
+
+    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+    --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
+
+    --animate-fade-in: fade-in 0.2s var(--ease-smooth);
+    --animate-fade-out: fade-out 0.2s var(--ease-smooth);
+    --animate-scale-in: scale-in 0.2s var(--ease-spring);
+    --animate-scale-out: scale-out 0.15s var(--ease-smooth);
+    --animate-slide-up: slide-up 0.3s var(--ease-smooth);
+    --animate-slide-down: slide-down 0.3s var(--ease-smooth);
+    --animate-pulse-soft: pulse-soft 2s var(--ease-smooth) infinite;
+
+    --animate-toast-slide-in-right: toast-slide-in-right 0.3s var(--ease-spring);
+    --animate-toast-slide-in-left: toast-slide-in-left 0.3s var(--ease-spring);
+    --animate-toast-slide-in-top: toast-slide-in-top 0.3s var(--ease-spring);
+    --animate-toast-slide-in-bottom: toast-slide-in-bottom 0.3s var(--ease-spring);
+    --animate-toast-slide-out-right: toast-slide-out-right 0.2s var(--ease-smooth);
+    --animate-toast-slide-out-left: toast-slide-out-left 0.2s var(--ease-smooth);
+    --animate-toast-slide-out-top: toast-slide-out-top 0.2s var(--ease-smooth);
+    --animate-toast-slide-out-bottom: toast-slide-out-bottom 0.2s var(--ease-smooth);
+}
+
+@keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+@keyframes fade-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+@keyframes scale-in {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+}
+@keyframes scale-out {
+    from { opacity: 1; transform: scale(1); }
+    to { opacity: 0; transform: scale(0.95); }
+}
+@keyframes slide-up {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+@keyframes slide-down {
+    from { opacity: 0; transform: translateY(-8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+@keyframes pulse-soft {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}
+
+@keyframes toast-slide-in-right {
+    from { opacity: 0; transform: translateX(100%); }
+    to { opacity: 1; transform: translateX(0); }
+}
+@keyframes toast-slide-in-left {
+    from { opacity: 0; transform: translateX(-100%); }
+    to { opacity: 1; transform: translateX(0); }
+}
+@keyframes toast-slide-in-top {
+    from { opacity: 0; transform: translateY(-100%); }
+    to { opacity: 1; transform: translateY(0); }
+}
+@keyframes toast-slide-in-bottom {
+    from { opacity: 0; transform: translateY(100%); }
+    to { opacity: 1; transform: translateY(0); }
+}
+@keyframes toast-slide-out-right {
+    from { opacity: 1; transform: translateX(0); }
+    to { opacity: 0; transform: translateX(100%); }
+}
+@keyframes toast-slide-out-left {
+    from { opacity: 1; transform: translateX(0); }
+    to { opacity: 0; transform: translateX(-100%); }
+}
+@keyframes toast-slide-out-top {
+    from { opacity: 1; transform: translateY(0); }
+    to { opacity: 0; transform: translateY(-100%); }
+}
+@keyframes toast-slide-out-bottom {
+    from { opacity: 1; transform: translateY(0); }
+    to { opacity: 0; transform: translateY(100%); }
+}
+
+.dark {
+    --color-canvas: var(--color-neutral-950);
+    --color-surface: var(--color-neutral-900);
+    --color-surface-hover: var(--color-neutral-800);
+    --color-subtle: var(--color-neutral-800);
+    --color-muted: var(--color-neutral-700);
+    --color-elevated: var(--color-neutral-800);
+    --color-overlay: var(--color-neutral-900);
+    --color-popover: var(--color-neutral-900);
+    --color-inset: var(--color-neutral-950);
+
+    --color-foreground: var(--color-neutral-50);
+    --color-foreground-muted: var(--color-neutral-400);
+    --color-foreground-subtle: var(--color-neutral-500);
+    --color-foreground-disabled: var(--color-neutral-600);
+    --color-foreground-inverse: var(--color-neutral-950);
+
+    --color-border: var(--color-neutral-700);
+    --color-border-hover: var(--color-neutral-600);
+    --color-border-muted: var(--color-neutral-800);
+    --color-border-emphasis: var(--color-neutral-500);
+
+    --color-primary: var(--color-primary-500);
+    --color-primary-hover: var(--color-primary-400);
+    --color-primary-active: var(--color-primary-300);
+    --color-primary-subtle: var(--color-primary-900);
+    --color-primary-subtle-hover: var(--color-primary-800);
+    --color-primary-outline: var(--color-primary-800);
+    --color-primary-outline-hover: var(--color-primary-700);
+    --color-primary-foreground: var(--color-primary-400);
+    --color-primary-ring: var(--color-primary-500);
+
+    --color-secondary: var(--color-neutral-800);
+    --color-secondary-hover: var(--color-neutral-700);
+    --color-secondary-active: var(--color-neutral-600);
+    --color-secondary-subtle: var(--color-neutral-800);
+    --color-secondary-foreground: var(--color-neutral-300);
+
+    --color-success: var(--color-success-500);
+    --color-success-hover: var(--color-success-400);
+    --color-success-active: var(--color-success-300);
+    --color-success-subtle: var(--color-success-900);
+    --color-success-subtle-hover: var(--color-success-800);
+    --color-success-foreground: var(--color-success-400);
+    --color-success-ring: var(--color-success-500);
+
+    --color-danger: var(--color-danger-500);
+    --color-danger-hover: var(--color-danger-400);
+    --color-danger-active: var(--color-danger-300);
+    --color-danger-subtle: var(--color-danger-900);
+    --color-danger-subtle-hover: var(--color-danger-800);
+    --color-danger-foreground: var(--color-danger-400);
+    --color-danger-ring: var(--color-danger-500);
+
+    --color-warning: var(--color-warning-500);
+    --color-warning-hover: var(--color-warning-400);
+    --color-warning-active: var(--color-warning-300);
+    --color-warning-subtle: var(--color-warning-900);
+    --color-warning-subtle-hover: var(--color-warning-800);
+    --color-warning-foreground: var(--color-warning-400);
+    --color-warning-ring: var(--color-warning-500);
+
+    --color-info: var(--color-primary-500);
+    --color-info-hover: var(--color-primary-400);
+    --color-info-active: var(--color-primary-300);
+    --color-info-subtle: var(--color-primary-900);
+    --color-info-subtle-hover: var(--color-primary-800);
+    --color-info-foreground: var(--color-primary-400);
+    --color-info-ring: var(--color-primary-500);
+
+    --color-chart-1: oklch(65% 0.18 250);
+    --color-chart-2: oklch(70% 0.18 150);
+    --color-chart-3: oklch(72% 0.18 45);
+    --color-chart-4: oklch(65% 0.18 320);
+    --color-chart-5: oklch(70% 0.16 80);
+    --color-chart-6: oklch(65% 0.20 15);
+    --color-chart-7: oklch(68% 0.14 200);
+    --color-chart-8: oklch(65% 0.16 290);
+
+    --color-ghost-hover: var(--color-neutral-700);
+    --color-ghost-active: var(--color-neutral-600);
+
+    --color-contrast: var(--color-neutral-100);
+    --color-contrast-hover: var(--color-neutral-200);
+    --color-contrast-active: var(--color-neutral-300);
+    --color-contrast-foreground: var(--color-neutral-900);
+
+    --color-outline-hover: var(--color-neutral-800);
+    --color-outline-active: var(--color-neutral-700);
+
+    --color-ring: var(--color-primary-500);
+    --color-ring-offset: var(--color-neutral-900);
+
+    --color-input: var(--color-neutral-900);
+    --color-input-disabled: var(--color-neutral-800);
+    --color-input-border: var(--color-neutral-600);
+    --color-input-border-hover: var(--color-neutral-500);
+    --color-input-border-focus: var(--color-primary-400);
+    --color-input-border-invalid: var(--color-danger-400);
+    --color-input-placeholder: var(--color-neutral-500);
+}
+
+.ocean {
+    --color-primary-base: oklch(55% 0.15 195);
+    --color-secondary-base: oklch(55% 0.12 230);
+    --color-success-base: oklch(55% 0.15 170);
+    --color-danger-base: oklch(55% 0.18 15);
+    --color-warning-base: oklch(70% 0.14 85);
+    --color-neutral-base: oklch(50% 0.02 210);
+}
+
+.forest {
+    --color-primary-base: oklch(45% 0.12 145);
+    --color-secondary-base: oklch(50% 0.08 80);
+    --color-success-base: oklch(50% 0.14 145);
+    --color-danger-base: oklch(50% 0.16 25);
+    --color-warning-base: oklch(65% 0.14 70);
+    --color-neutral-base: oklch(45% 0.03 90);
+}
+
+.sunset {
+    --color-primary-base: oklch(60% 0.18 35);
+    --color-secondary-base: oklch(55% 0.15 55);
+    --color-success-base: oklch(55% 0.14 160);
+    --color-danger-base: oklch(55% 0.20 15);
+    --color-warning-base: oklch(70% 0.16 80);
+    --color-neutral-base: oklch(50% 0.03 50);
+}
+
+.rose {
+    --color-primary-base: oklch(60% 0.17 350);
+    --color-secondary-base: oklch(55% 0.14 320);
+    --color-success-base: oklch(55% 0.15 160);
+    --color-danger-base: oklch(55% 0.18 20);
+    --color-warning-base: oklch(68% 0.15 65);
+    --color-neutral-base: oklch(50% 0.02 350);
+}
+
+.midnight {
+    --color-primary-base: oklch(50% 0.16 270);
+    --color-secondary-base: oklch(55% 0.14 290);
+    --color-success-base: oklch(55% 0.15 180);
+    --color-danger-base: oklch(55% 0.18 10);
+    --color-warning-base: oklch(68% 0.14 80);
+    --color-neutral-base: oklch(45% 0.03 270);
+}
+
+@utility h-control-xs {
+    height: var(--size-control-xs);
+}
+@utility h-control-sm {
+    height: var(--size-control-sm);
+}
+@utility h-control-md {
+    height: var(--size-control-md);
+}
+@utility h-control-lg {
+    height: var(--size-control-lg);
+}
+@utility h-control-xl {
+    height: var(--size-control-xl);
+}
+
+@utility size-control-xs {
+    width: var(--size-control-xs);
+    height: var(--size-control-xs);
+}
+@utility size-control-sm {
+    width: var(--size-control-sm);
+    height: var(--size-control-sm);
+}
+@utility size-control-md {
+    width: var(--size-control-md);
+    height: var(--size-control-md);
+}
+@utility size-control-lg {
+    width: var(--size-control-lg);
+    height: var(--size-control-lg);
+}
+@utility size-control-xl {
+    width: var(--size-control-xl);
+    height: var(--size-control-xl);
+}
+
+:root {
+    interpolate-size: allow-keywords;
+}
+
+[data-spire-accordion-item] {
+    overflow: hidden;
+}
+
+[data-spire-accordion-item]::details-content {
+    block-size: 0;
+    transition: block-size 0.3s var(--ease-smooth), content-visibility 0.3s;
+    transition-behavior: allow-discrete;
+}
+
+[data-spire-accordion-item][open]::details-content {
+    block-size: auto;
+}
+
+[data-spire-accordion-item][data-spire-no-animation]::details-content {
+    transition: none;
+}

package/dist/theme.css

@@ -0,0 +1,4 @@
+@import './theme/base.css';
+@import './theme/semantic.css';
+@import './theme/components.css';
+@import './theme/anchor-positioning.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sabrenski/spire-ui-vue",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "A modern, themeable Vue 3 component library with 57+ components, TypeScript support, and Tailwind CSS v4",
   "type": "module",
   "author": "Spire UI Contributors",
@@ -36,7 +36,10 @@
       "import": "./dist/spire-ui.js",
       "require": "./dist/spire-ui.cjs"
     },
-    "./style.css": "./dist/spire-ui.css"
+    "./style.css": "./dist/spire-ui.css",
+    "./theme.css": "./dist/theme.css",
+    "./theme": "./dist/theme.css",
+    "./theme/*": "./dist/theme/*"
   },
   "files": [
     "dist"