@svkit/styles 0.0.2-beta.0

package/src/components/toast.css

@@ -0,0 +1,156 @@
+@layer components {
+	.sv-toast-viewport {
+		@apply fixed z-50 mx-auto flex w-62.5 sm:w-75;
+	}
+
+	.sv-toast-viewport[data-position='bottom-right'] {
+		@apply top-auto right-4 bottom-4 sm:right-8 sm:bottom-8;
+	}
+
+	.sv-toast-root {
+		@apply border-border absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 h-(--height) w-full origin-bottom transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] rounded-lg border bg-clip-padding p-4 shadow-lg select-none [--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s] after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:transform-[translateY(150%)] data-ending-style:opacity-0 data-expanded:h-(--toast-height) data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))] data-limited:opacity-0 data-starting-style:transform-[translateY(150%)] data-ending-style:data-swipe-direction-down:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-swipe-direction-down:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-swipe-direction-left:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-swipe-direction-left:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-swipe-direction-right:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-swipe-direction-right:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-swipe-direction-up:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))];
+	}
+
+	.sv-toast-content {
+		@apply overflow-hidden transition-opacity duration-250 data-behind:pointer-events-none data-behind:opacity-0 data-expanded:pointer-events-auto data-expanded:opacity-100;
+	}
+
+	.sv-toast-title {
+		@apply text-surface-foreground text-[0.975rem] leading-5;
+	}
+
+	.sv-toast-description {
+		@apply text-surface-foreground/85 text-sm leading-5;
+	}
+
+	.sv-toast-icon {
+		@apply relative size-5 rounded-[10px] opacity-0;
+		transform: rotate(45deg);
+		animation: circleAnimation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+		animation-delay: 150ms;
+	}
+
+	.sv-toast-icon[data-type='success'] {
+		@apply bg-success/75;
+	}
+
+	.sv-toast-icon[data-type='error'] {
+		@apply bg-danger/75;
+	}
+
+	.sv-toast-icon[data-type='warning'] {
+		@apply bg-warning/75;
+	}
+
+	.sv-toast-icon[data-type='loading'] {
+		@apply bg-primary/75;
+		animation:
+			circleAnimation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
+			toastLoadingSpin 1.2s linear infinite;
+		animation-delay: 150ms, 450ms;
+	}
+
+	.sv-toast-icon[data-type='message'] {
+		/* @apply bg-primary/75; */
+	}
+
+	.sv-toast-icon[data-type='error']::after,
+	.sv-toast-icon[data-type='error']::before {
+		content: '';
+		animation: firstLineAnimation 0.15s ease-out forwards;
+		animation-delay: 150ms;
+		position: absolute;
+		border-radius: 3px;
+		opacity: 0;
+		background: var(--color-danger-foreground);
+		bottom: 9px;
+		left: 4px;
+		height: 2px;
+		width: 12px;
+	}
+
+	.sv-toast-icon[data-type='error']::after {
+		animation: secondLineAnimation 0.15s ease-out forwards;
+		animation-delay: 180ms;
+		transform: rotate(90deg);
+	}
+
+	.sv-toast-icon[data-type='success']::after {
+		content: '';
+		box-sizing: border-box;
+		animation: checkmarkAnimation 0.2s ease-out forwards;
+		opacity: 0;
+		animation-delay: 200ms;
+		position: absolute;
+		border-right: 2px solid;
+		border-bottom: 2px solid;
+		border-color: var(--color-primary-foreground);
+		bottom: 6px;
+		left: 6px;
+		height: 10px;
+		width: 6px;
+	}
+
+	@keyframes firstLineAnimation {
+		from {
+			transform: scale(0);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	@keyframes secondLineAnimation {
+		from {
+			transform: scale(0) rotate(90deg);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1) rotate(90deg);
+			opacity: 1;
+		}
+	}
+
+	@keyframes checkmarkAnimation {
+		0% {
+			height: 0;
+			width: 0;
+			opacity: 0;
+		}
+		40% {
+			height: 0;
+			width: 6px;
+			opacity: 1;
+		}
+		100% {
+			opacity: 1;
+			height: 10px;
+		}
+	}
+
+	@keyframes toastLoadingSpin {
+		from {
+			transform: rotate(45deg);
+		}
+		to {
+			transform: rotate(405deg);
+		}
+	}
+
+	@keyframes circleAnimation {
+		from {
+			transform: scale(0) rotate(45deg);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1) rotate(45deg);
+			opacity: 1;
+		}
+	}
+
+	.sv-toast-close {
+		@apply text-surface-foreground/50 hover:text-surface-foreground absolute top-2 right-2 flex h-5 w-5 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent;
+	}
+}

package/src/components/toggle-group.css

@@ -0,0 +1,13 @@
+@layer components {
+	.sv-toggle-group {
+		@apply flex w-fit flex-row items-center gap-2;
+	}
+
+	.sv-toggle-group[data-orientation='vertical'] {
+		@apply flex-col items-stretch;
+	}
+
+	.sv-toggle-group-item {
+		@apply shrink-0;
+	}
+}

package/src/components/toggle.css

@@ -0,0 +1,25 @@
+@layer components {
+	.sv-toggle {
+		@apply inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none;
+		@apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
+		@apply hover:text-foreground hover:bg-muted;
+		@apply data-state-on:bg-muted;
+		@apply [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
+	}
+
+	.sv-toggle[data-size='sm'] {
+		@apply h-7 min-w-7 px-2.5 text-xs;
+	}
+
+	.sv-toggle[data-size='md'] {
+		@apply h-8 min-w-8 px-2.5;
+	}
+
+	.sv-toggle[data-size='lg'] {
+		@apply h-9 min-w-9 px-2.5;
+	}
+
+	.sv-toggle[data-variant='outline'] {
+		@apply border-border border bg-transparent;
+	}
+}

package/src/components/tooltip.css

@@ -0,0 +1,90 @@
+@layer components {
+  /* =========================
+     TOOLTIP CONTENT
+  ========================== */
+
+  .sv-tooltip-content {
+    @apply inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs bg-foreground text-background;
+
+    /* Open animations */
+    &[data-state="open"],
+    &[data-state="delayed-open"] {
+      @apply animate-in fade-in-0 zoom-in-95;
+    }
+
+    /* Close animation */
+    &[data-state="closed"] {
+      @apply animate-out fade-out-0 zoom-out-95;
+    }
+
+    /* Slide direction — physical sides */
+    &[data-side="bottom"] {
+      @apply slide-in-from-top-2;
+    }
+    &[data-side="top"] {
+      @apply slide-in-from-bottom-2;
+    }
+    &[data-side="left"] {
+      @apply slide-in-from-right-2;
+    }
+    &[data-side="right"] {
+      @apply slide-in-from-left-2;
+    }
+
+    /* Slide direction — logical sides */
+    &[data-side="inline-start"] {
+      @apply slide-in-from-right-2;
+    }
+    &[data-side="inline-end"] {
+      @apply slide-in-from-left-2;
+    }
+
+    /* kbd slot adjustments */
+    &:has([data-slot="kbd"]) {
+      padding-inline-end: 0.375rem;
+    }
+
+    /* Styles for nested kbd elements */
+    & [data-slot="kbd"] {
+      @apply relative isolate z-50 rounded-sm;
+    }
+  }
+
+  /* =========================
+     TOOLTIP ARROW
+  ========================== */
+
+  .sv-tooltip-arrow {
+    @apply size-2.5 rotate-45 rounded-xs bg-foreground fill-foreground;
+
+    /* Physical side offsets */
+    &[data-side="top"] {
+      translate: 50% calc(-50% + 2px);
+    }
+
+    &[data-side="bottom"] {
+      translate: -50% calc(- ((-50% + 1px)));
+    }
+
+    &[data-side="right"] {
+      translate: calc(50% + 2px) 50%;
+    }
+
+    &[data-side="left"] {
+      translate: 0 calc(- (50% - 3px));
+    }
+
+    /* Logical side offsets */
+    &[data-side="inline-end"] {
+      top: 50% !important;
+      left: -0.25rem;
+      translate: 0 -50%;
+    }
+
+    &[data-side="inline-start"] {
+      top: 50% !important;
+      right: -0.25rem;
+      translate: 0 -50%;
+    }
+  }
+}

package/src/themes/default.css

@@ -0,0 +1,91 @@
+@theme {
+  /* BACKGROUND */
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  /* SURFACE */
+
+  --color-surface: var(--surface);
+  --color-surface-elevated: color-mix(
+    in oklab,
+    var(--surface) 96%,
+    var(--foreground) 5%
+  );
+  --color-surface-foreground: var(--surface-foreground);
+  --color-surface-hover: color-mix(
+    in oklab,
+    var(--surface) 95%,
+    var(--surface-foreground) 5%
+  );
+
+  /* TEXT / UTILITY */
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  /* BORDER */
+
+  --color-border: var(--border);
+  --color-separator: var(--separator);
+
+  --color-ring: var(--ring);
+
+  /* LINK */
+
+  --color-link: var(--link);
+  --color-link-hover: color-mix(
+    in oklab,
+    var(--link) 90%,
+    var(--foreground) 10%
+  );
+
+  /* SEMANTIC COLORS */
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --color-danger: var(--danger);
+  --color-danger-foreground: var(--danger-foreground);
+
+  /* STATE COLORS (VISUAL ONLY, NOT BEHAVIOR) */
+
+  --color-primary-hover: color-mix(
+    in oklab,
+    var(--primary) 96%,
+    var(--primary-foreground) 4%
+  );
+
+  --color-secondary-hover: color-mix(
+    in oklab,
+    var(--secondary) 90%,
+    var(--secondary-foreground) 10%
+  );
+
+  --color-success-hover: color-mix(
+    in oklab,
+    var(--success) 90%,
+    var(--success-foreground) 10%
+  );
+
+  --color-warning-hover: color-mix(
+    in oklab,
+    var(--warning) 90%,
+    var(--warning-foreground) 10%
+  );
+
+  --color-danger-hover: color-mix(
+    in oklab,
+    var(--danger) 90%,
+    var(--danger-foreground) 10%
+  );
+}

package/src/tokens/interactions.css

@@ -0,0 +1,72 @@
+@layer base {
+  :root {
+    /* =========================
+       MOTION TOKENS
+    ========================== */
+
+    --duration-instant: 0ms;
+    --duration-fast: 120ms;
+    --duration-normal: 200ms;
+    --duration-slow: 300ms;
+
+    /* Easing (standardized set) */
+    --ease-linear: linear;
+    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);
+
+    /* =========================
+       PRESS / ACTIVE SYSTEM
+    ========================== */
+
+    /* Physical press feel */
+    --press-offset: 1px;
+
+    /* Optional (future scaling variant) */
+    --press-scale: 0.98;
+
+    /* =========================
+       HOVER SYSTEM
+    ========================== */
+
+    /*
+     * Controls how strong hover effect is
+     * Used with color-mix based hover
+     */
+    --hover-mix-strength: 8%;
+
+    /* =========================
+       STATE TOKENS (GENERIC)
+    ========================== */
+
+    /*
+     * These are fallback tokens.
+     * Components SHOULD override these.
+     */
+
+    --state-bg-hover: color-mix(in oklab, currentColor var(--hover-mix-strength), transparent);
+
+    --state-bg-active: color-mix(in oklab, currentColor var(--hover-mix-strength), transparent);
+
+    /* Ring */
+    --state-ring: var(--focus-ring-color);
+
+    /* =========================
+       TRANSITION PRESETS
+    ========================== */
+
+    /*
+     * Centralized transition definitions
+     * Components can reuse instead of redefining
+     */
+
+    --transition-colors:
+      background-color var(--duration-fast) var(--ease-standard),
+      color var(--duration-fast) var(--ease-standard),
+      border-color var(--duration-fast) var(--ease-standard);
+
+    --transition-transform: transform var(--duration-fast) var(--ease-standard);
+
+    --transition-all: var(--transition-colors), var(--transition-transform);
+  }
+}

package/src/tokens/variables.css

@@ -0,0 +1,111 @@
+@layer base {
+  :root {
+    color-scheme: light;
+
+    /* =========================
+       CORE SURFACE & TEXT
+    ========================== */
+
+    --background: oklch(100% 0.00011 271.152);
+    --foreground: var(--color-gray-900);
+
+    --surface: oklch(95.815% 0.00011 271.152);
+    --surface-foreground: oklch(14.479% 0.00002 271.152);
+
+    /* =========================
+       BRAND / SEMANTIC COLORS
+    ========================== */
+
+    --primary: oklch(0.6385 0.1991 34.99);
+    --primary-foreground: var(--color-gray-50);
+
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+
+    --success: oklch(0.5464 0.1442 147.32);
+    --success-foreground: var(--color-gray-900);
+
+    --warning: oklch(0.7238 0.142 71.83);
+    --warning-foreground: var(--color-gray-900);
+
+    --danger: oklch(0.5771 0.2152 27.33);
+    --danger-foreground: var(--color-gray-50);
+
+    /* =========================
+       UI ELEMENT COLORS
+    ========================== */
+
+    --border: oklch(0.9219 0 0);
+    --separator: color-mix(in oklab, var(--border) 70%, transparent);
+
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+
+    --link: var(--primary);
+
+    /* tmp */
+    --ring: oklch(0.708 0 0);
+
+    /* =========================
+       FOCUS SYSTEM
+    ========================== */
+
+    --focus-ring-color: var(--primary);
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+
+    /* =========================
+       RADIUS (BASE SCALE)
+    ========================== */
+
+    --radius: 0.5rem;
+
+    /* =========================
+       BORDER SYSTEM
+    ========================== */
+
+    --border-width: 1px;
+
+    /* =========================
+       INTERACTION BASICS
+    ========================== */
+
+    --cursor-interactive: pointer;
+    --cursor-disabled: not-allowed;
+
+    --disabled-opacity: 0.5;
+  }
+
+  /* =========================
+     DARK MODE
+  ========================== */
+
+  .dark,
+  [data-theme="dark"] {
+    color-scheme: dark;
+
+    /* Surface */
+    --background: oklch(18.22% 0.00002 271.152);
+    --foreground: var(--color-gray-50);
+
+    --surface: oklch(21.342% 0.00002 271.152);
+    --surface-foreground: oklch(78.261% 0.00009 271.152);
+
+    /* Secondary */
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+
+    /* Semantic adjustments */
+    --warning: oklch(0.759 0.1248 75.9);
+    --danger: oklch(0.6368 0.2078 25.33);
+
+    /* UI */
+    --border: oklch(51.028% 0.00006 271.152 / 0.2);
+    --separator: color-mix(in oklab, var(--border) 70%, transparent);
+
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+
+    --ring: oklch(0.556 0 0);
+  }
+}