@getdom/studio 0.1.0 → 0.2.0

package/src/style.css

@@ -1,446 +1,3 @@
 @import "tailwindcss";
-@source "./pages/**/*.{vue,js}";
-@source inline("transition duration-1000 ease-in ease-out opacity-0 opacity-100 scale-50 scale-100");
-@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
-
-:root,
-[data-theme="light"] {
-	color-scheme: light;
-	--radius: 0.625rem;
-	--radius-sm: calc(var(--radius) * 0.6);
-	--radius-md: calc(var(--radius) * 0.8);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) * 1.4);
-	--radius-2xl: calc(var(--radius) * 1.8);
-	--radius-3xl: calc(var(--radius) * 2.2);
-	--radius-4xl: calc(var(--radius) * 2.6);
-	--shadow-xs: 0 1px 1px 0 rgb(15 23 42 / 0.04);
-	--shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.06);
-	--shadow-md: 0 3px 8px -2px rgb(15 23 42 / 0.12), 0 1px 2px -1px rgb(15 23 42 / 0.08);
-	--shadow-lg: 0 8px 20px -6px rgb(15 23 42 / 0.16), 0 2px 6px -2px rgb(15 23 42 / 0.08);
-	--shadow-xl: 0 18px 44px -18px rgb(15 23 42 / 0.24), 0 8px 18px -12px rgb(15 23 42 / 0.16);
-	--shadow-2xl: 0 24px 60px -18px rgb(15 23 42 / 0.24), 0 8px 20px -10px rgb(15 23 42 / 0.14);
-	--canvas: #fff;
-	--canvas-fg: oklch(0.145 0 0);
-	--primary: oklch(0.205 0 0);
-	--primary-fg: oklch(0.985 0 0);
-	--secondary: oklch(0.97 0 0);
-	--secondary-fg: oklch(0.205 0 0);
-	--muted: oklch(0.97 0 0);
-	--muted-fg: oklch(0.50 0 0);
-	--accent: oklch(0.97 0 0);
-	--accent-fg: oklch(0.205 0 0);
-	--destructive: oklch(0.577 0.245 27.325);
-	--destructive-fg: oklch(0.985 0 0);
-	--success: oklch(0.57 0.794 149.350);
-	--success-fg: oklch(0.985 0 0);
-	--warning: oklch(0.7 0.2 84);
-	--warning-fg: oklch(0.28 0.07 46);
-	--border: oklch(0.922 0 0);
-	--input: oklch(0.922 0 0);
-	--ring: oklch(0.708 0 0);
-}
-
-/*
- * The month calendar always responds to its own container. Tailwind expands
- * theme(...) while compiling the combined app stylesheet, so consumer @theme
- * overrides remain the single source of truth for its sensible defaults.
- */
-.dom-month-calendar__grid {
-	--dom-month-calendar-day-min-height: 7.5rem;
-	--dom-month-calendar-day-headers-display: none;
-	--dom-month-calendar-row-rail-align: center;
-	--dom-month-calendar-row-rail-direction: row;
-	--dom-month-calendar-row-rail-justify: space-between;
-	--dom-month-calendar-row-rail-min-height: 2.5rem;
-	--dom-month-calendar-week-columns: minmax(0, 1fr);
-}
-
-.dom-month-calendar__continuous-mobile-header {
-	display: flex;
-}
-
-@container (min-width: theme(--breakpoint-lg)) {
-	.dom-month-calendar__continuous-mobile-header {
-		display: none;
-	}
-
-	.dom-month-calendar__grid {
-		--dom-month-calendar-day-min-height: 11rem;
-		--dom-month-calendar-day-headers-display: grid;
-		--dom-month-calendar-row-rail-align: flex-start;
-		--dom-month-calendar-row-rail-direction: column;
-		--dom-month-calendar-row-rail-justify: flex-start;
-		--dom-month-calendar-row-rail-min-height: 11rem;
-		--dom-month-calendar-week-columns: var(--dom-month-calendar-wide-week-columns);
-		--dom-month-calendar-wide-border-left-width: 1px;
-		--dom-month-calendar-wide-border-top-width: 0;
-		--dom-month-calendar-wide-boundary-gradient: linear-gradient(var(--dom-month-calendar-boundary-color), var(--dom-month-calendar-boundary-color));
-		--dom-month-calendar-wide-boundary-left-size: 2px 100%;
-		--dom-month-calendar-wide-boundary-top-size: 100% 2px;
-	}
-}
-
-[data-theme="dark"] {
-	color-scheme: dark;
-	--shadow-xs: 0 1px 1px 0 rgb(0 0 0 / 0.28);
-	--shadow-sm: 0 1px 0 0 rgb(255 255 255 / 0.04) inset, 0 1px 2px 0 rgb(0 0 0 / 0.34);
-	--shadow-md: 0 1px 0 0 rgb(255 255 255 / 0.04) inset, 0 8px 18px -10px rgb(0 0 0 / 0.52), 0 2px 5px -3px rgb(0 0 0 / 0.44);
-	--shadow-lg: 0 1px 0 0 rgb(255 255 255 / 0.05) inset, 0 16px 34px -18px rgb(0 0 0 / 0.58), 0 5px 12px -8px rgb(0 0 0 / 0.5);
-	--shadow-xl: 0 1px 0 0 rgb(255 255 255 / 0.05) inset, 0 24px 52px -24px rgb(0 0 0 / 0.68), 0 10px 22px -14px rgb(0 0 0 / 0.56);
-	--shadow-2xl: 0 1px 0 0 rgb(255 255 255 / 0.06) inset, 0 34px 76px -30px rgb(0 0 0 / 0.72), 0 16px 34px -20px rgb(0 0 0 / 0.58);
-	--canvas: oklch(0.145 0 0);
-	--canvas-fg: oklch(0.985 0 0);
-	--primary: oklch(0.922 0 0);
-	--primary-fg: oklch(0.205 0 0);
-	--secondary: oklch(0.269 0 0);
-	--secondary-fg: oklch(0.985 0 0);
-	--muted: oklch(0.269 0 0);
-	--muted-fg: oklch(0.708 0 0);
-	--accent: oklch(0.269 0 0);
-	--accent-fg: oklch(0.985 0 0);
-	--destructive: oklch(0.704 0.191 22.216);
-	--destructive-fg: oklch(0.985 0 0);
-	--success: oklch(0.696 0.17 162.48);
-	--success-fg: oklch(0.145 0 0);
-	--warning: oklch(0.769 0.188 70.08);
-	--warning-fg: oklch(0.145 0 0);
-	--border: oklch(1 0 0 / 10%);
-	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.556 0 0);
-}
-
-@theme inline {
-	--color-canvas: var(--canvas);
-	--color-canvas-fg: var(--canvas-fg);
-	--color-primary: var(--primary);
-	--color-primary-fg: var(--primary-fg);
-	--color-secondary: var(--secondary);
-	--color-secondary-fg: var(--secondary-fg);
-	--color-muted: var(--muted);
-	--color-muted-fg: var(--muted-fg);
-	--color-accent: var(--accent);
-	--color-accent-fg: var(--accent-fg);
-	--color-destructive: var(--destructive);
-	--color-destructive-fg: var(--destructive-fg);
-	--color-success: var(--success);
-	--color-success-fg: var(--success-fg);
-	--color-warning: var(--warning);
-	--color-warning-fg: var(--warning-fg);
-	--color-border: var(--border);
-	--color-input: var(--input);
-	--color-ring: var(--ring);
-	--radius-sm: calc(var(--radius) * 0.6);
-	--radius-md: calc(var(--radius) * 0.8);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) * 1.4);
-	--radius-2xl: calc(var(--radius) * 1.8);
-	--radius-3xl: calc(var(--radius) * 2.2);
-	--radius-4xl: calc(var(--radius) * 2.6);
-}
-
-* {
-	box-sizing: border-box;
-}
-
-html,
-body,
-#app {
-	min-height: 100%;
-}
-
-body {
-	margin: 0;
-	font-family:
-		"Plus Jakarta Sans Variable",
-		"Plus Jakarta Sans",
-		ui-sans-serif,
-		system-ui,
-		-apple-system,
-		BlinkMacSystemFont,
-		"Segoe UI",
-		sans-serif;
-	background: var(--canvas);
-	color: var(--canvas-fg);
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-}
-
-@layer utilities {
-	.skin-card {
-		background-color: var(--skin-card-bg, var(--canvas));
-		background-image: var(--skin-card-bg-image, none);
-		border-color: var(--skin-card-border, var(--border));
-		border-style: var(--skin-card-border-style, solid);
-		border-width: var(--skin-card-border-width, 1px);
-		box-shadow: var(--skin-card-shadow, var(--shadow-xs));
-		color: var(--skin-card-fg, var(--canvas-fg));
-		backdrop-filter: var(--skin-card-backdrop, none);
-		-webkit-backdrop-filter: var(--skin-card-backdrop, none);
-	}
-
-	.skin-popover {
-		background-color: var(--skin-popover-bg, var(--canvas));
-		background-image: var(--skin-popover-bg-image, none);
-		border-color: var(--skin-popover-border, var(--border));
-		border-style: var(--skin-popover-border-style, solid);
-		border-width: var(--skin-popover-border-width, 1px);
-		box-shadow: var(--skin-popover-shadow, var(--shadow-lg));
-		color: var(--skin-popover-fg, var(--canvas-fg));
-		backdrop-filter: var(--skin-popover-backdrop, none);
-		-webkit-backdrop-filter: var(--skin-popover-backdrop, none);
-	}
-
-	.skin-overlay {
-		background-color: var(--skin-overlay-bg, var(--canvas));
-		background-image: var(--skin-overlay-bg-image, none);
-		border-color: var(--skin-overlay-border, var(--border));
-		border-style: var(--skin-overlay-border-style, solid);
-		border-width: var(--skin-overlay-border-width, 1px);
-		box-shadow: var(--skin-overlay-shadow, var(--shadow-2xl));
-		color: var(--skin-overlay-fg, var(--canvas-fg));
-		backdrop-filter: var(--skin-overlay-backdrop, blur(20px) saturate(1.12));
-		-webkit-backdrop-filter: var(--skin-overlay-backdrop, blur(20px) saturate(1.12));
-	}
-
-	.skin-control {
-		background-color: var(--skin-control-bg, var(--secondary));
-		background-image: var(--skin-control-bg-image, none);
-		border-color: var(--skin-control-border, var(--border));
-		border-style: var(--skin-control-border-style, solid);
-		border-width: var(--skin-control-border-width, 1px);
-		box-shadow: var(--skin-control-shadow, var(--shadow-xs));
-		color: var(--skin-control-fg, var(--secondary-fg));
-		backdrop-filter: var(--skin-control-backdrop, none);
-		-webkit-backdrop-filter: var(--skin-control-backdrop, none);
-	}
-
-	.skin-action {
-		background-color: var(--skin-action-bg, var(--primary));
-		background-image: var(--skin-action-bg-image, linear-gradient(to bottom, color-mix(in oklch, white 10%, transparent), transparent));
-		border-color: var(--skin-action-border, color-mix(in oklch, var(--primary) 80%, var(--border)));
-		border-style: var(--skin-action-border-style, solid);
-		border-width: var(--skin-action-border-width, 1px);
-		box-shadow: var(--skin-action-shadow, var(--shadow-sm));
-		color: var(--skin-action-fg, var(--primary-fg));
-		backdrop-filter: var(--skin-action-backdrop, none);
-		-webkit-backdrop-filter: var(--skin-action-backdrop, none);
-	}
-}
-
-/* DOM Studio custom-elements: hide pre-upgrade light-DOM children so SSR'd
- * dialog / popover content doesn't render in flow before the JS module
- * loads and the shadow DOM takes over. Trigger slots stay visible. */
-dom-dialog:not(:defined) > *:not([slot="trigger"]),
-dom-popover:not(:defined) > *:not([slot="trigger"]) {
-	display: none;
-}
-
-/* Shiki code blocks. Shiki emits dual-theme styles in one render — the inline
- * styles carry the light colours and the dark colours as CSS variables.
- * Override those vars when [data-theme="dark"] is on the root. */
-.dom-shiki {
-	min-width: 0;
-	max-width: 100%;
-	overflow-x: auto;
-}
-.dom-shiki .shiki {
-	box-sizing: border-box;
-	margin: 0;
-	min-width: 0;
-	max-width: 100%;
-	overflow-x: auto;
-	padding: 1rem;
-	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-	font-size: 12.5px;
-	line-height: 1.65;
-}
-.dom-shiki .shiki,
-.dom-shiki .shiki code {
-	background-color: inherit;
-}
-[data-theme="dark"] .dom-shiki .shiki:not([data-theme="light"] *),
-[data-theme="dark"] .dom-shiki .shiki span:not([data-theme="light"] *),
-.dom-code[data-theme="dark"] > .dom-shiki .shiki,
-.dom-code[data-theme="dark"] > .dom-shiki .shiki span {
-	color: var(--shiki-dark) !important;
-	background-color: var(--shiki-dark-bg) !important;
-}
-[data-theme="dark"] .dom-shiki .shiki span:not([data-theme="light"] *),
-.dom-code[data-theme="dark"] > .dom-shiki .shiki span {
-	font-style: var(--shiki-dark-font-style) !important;
-	font-weight: var(--shiki-dark-font-weight) !important;
-	text-decoration: var(--shiki-dark-text-decoration) !important;
-}
-[data-theme="dark"] .dom-code-token:not([data-theme="light"] *) {
-	background-color: var(--shiki-dark-bg) !important;
-	color: var(--shiki-dark) !important;
-	font-style: var(--shiki-dark-font-style) !important;
-	font-weight: var(--shiki-dark-font-weight) !important;
-	text-decoration: var(--shiki-dark-text-decoration) !important;
-}
-
-@layer components {
-	.skin-input {
-		background-color: var(--skin-input-bg, var(--canvas));
-		background-image: var(--skin-input-bg-image, none);
-		border-color: var(--skin-input-border, var(--input));
-		border-style: var(--skin-input-border-style, solid);
-		border-width: var(--skin-input-border-width, 1px);
-		box-shadow: var(--skin-input-shadow, inset 0 1px 2px rgb(15 23 42 / 0.1));
-		color: var(--skin-input-fg, var(--canvas-fg));
-		backdrop-filter: var(--skin-input-backdrop, none);
-		-webkit-backdrop-filter: var(--skin-input-backdrop, none);
-		@apply w-full rounded-lg px-3 py-2 text-sm outline-none transition placeholder:text-muted-fg focus:border-ring focus:ring-2 focus:ring-ring/30 disabled:opacity-50;
-	}
-
-	dom-dropdown[open] > [slot="trigger"].skin-input,
-	dom-dropdown[open] > [data-trigger].skin-input {
-		@apply border-ring ring-2 ring-ring/30;
-	}
-
-	.dom-floating-transition {
-		--dom-floating-enter-x: 0px;
-		--dom-floating-enter-y: -10px;
-		--dom-floating-origin: top center;
-		--dom-floating-scale: 0.975;
-		--dom-floating-enter-opacity-duration: 190ms;
-		--dom-floating-enter-transform-duration: 260ms;
-		--dom-floating-leave-opacity-duration: 190ms;
-		--dom-floating-leave-transform-duration: 260ms;
-		--dom-floating-enter-easing: cubic-bezier(0.16, 1, 0.3, 1);
-		--dom-floating-leave-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
-		--dom-popover-arrow-x: 50%;
-		--dom-popover-arrow-y: auto;
-		opacity: 0;
-		transform: translate3d(var(--dom-floating-enter-x), var(--dom-floating-enter-y), 0) scale(var(--dom-floating-scale));
-		transform-origin: var(--dom-floating-origin);
-		transition:
-			opacity var(--dom-floating-enter-opacity-duration) var(--dom-floating-enter-easing),
-			transform var(--dom-floating-enter-transform-duration) var(--dom-floating-enter-easing);
-		will-change: opacity, transform;
-		animation: none;
-	}
-
-	@keyframes dom-floating-scale-fade-opacity-in {
-		from { opacity: 0; }
-		to { opacity: 1; }
-	}
-
-	@keyframes dom-floating-scale-fade-opacity-out {
-		from { opacity: 1; }
-		to { opacity: 0; }
-	}
-
-	@keyframes dom-floating-scale-fade-transform-in {
-		from { transform: translate3d(var(--dom-floating-enter-x), var(--dom-floating-enter-y), 0) scale(var(--dom-floating-scale)); }
-		to { transform: translate3d(0, 0, 0) scale(1); }
-	}
-
-	@keyframes dom-floating-scale-fade-transform-out {
-		from { transform: translate3d(0, 0, 0) scale(1); }
-		to { transform: translate3d(var(--dom-floating-enter-x), var(--dom-floating-enter-y), 0) scale(var(--dom-floating-scale)); }
-	}
-
-	.dom-floating-transition:popover-open,
-	.dom-floating-transition[data-floating-open="true"] {
-		opacity: 1;
-		transform: translate3d(0, 0, 0) scale(1);
-	}
-
-	.dom-floating-transition[data-entering="from"]:popover-open,
-	.dom-floating-transition[data-entering="from"][data-floating-open="true"],
-	.dom-floating-transition[data-leaving="to"]:popover-open,
-	.dom-floating-transition[data-leaving="to"][data-floating-open="true"] {
-		opacity: 0;
-		transform: translate3d(var(--dom-floating-enter-x), var(--dom-floating-enter-y), 0) scale(var(--dom-floating-scale));
-	}
-
-	.dom-floating-transition[data-entering="to"]:popover-open,
-	.dom-floating-transition[data-entering="to"][data-floating-open="true"],
-	.dom-floating-transition[data-leaving="from"]:popover-open,
-	.dom-floating-transition[data-leaving="from"][data-floating-open="true"] {
-		opacity: 1;
-		transform: translate3d(0, 0, 0) scale(1);
-	}
-
-	.dom-floating-transition[data-floating-effect="scale-fade"][data-entering="to"]:popover-open,
-	.dom-floating-transition[data-floating-effect="scale-fade"][data-entering="to"][data-floating-open="true"] {
-		animation:
-			dom-floating-scale-fade-opacity-in var(--dom-floating-enter-opacity-duration) var(--dom-floating-enter-easing) both,
-			dom-floating-scale-fade-transform-in var(--dom-floating-enter-transform-duration) var(--dom-floating-enter-easing) both;
-	}
-
-	.dom-floating-transition[data-leaving="to"]:popover-open {
-		transition:
-			opacity var(--dom-floating-leave-opacity-duration) linear,
-			transform var(--dom-floating-leave-transform-duration) var(--dom-floating-leave-easing);
-	}
-
-	.dom-floating-transition[data-leaving="to"][data-floating-open="true"] {
-		transition:
-			opacity var(--dom-floating-leave-opacity-duration) linear,
-			transform var(--dom-floating-leave-transform-duration) var(--dom-floating-leave-easing);
-	}
-
-	.dom-floating-transition[data-floating-effect="scale-fade"][data-leaving="to"]:popover-open,
-	.dom-floating-transition[data-floating-effect="scale-fade"][data-leaving="to"][data-floating-open="true"] {
-		transition: none;
-		animation:
-			dom-floating-scale-fade-opacity-out var(--dom-floating-leave-opacity-duration) linear both,
-			dom-floating-scale-fade-transform-out var(--dom-floating-leave-transform-duration) var(--dom-floating-leave-easing) both;
-	}
-
-	@starting-style {
-		.dom-floating-transition:popover-open {
-			opacity: 0;
-			transform: translate3d(var(--dom-floating-enter-x), var(--dom-floating-enter-y), 0) scale(var(--dom-floating-scale));
-		}
-	}
-
-	.dom-floating-transition:not([data-animate-placement]) {
-		transition-property: opacity;
-	}
-
-	.dom-floating-transition[data-side="top"] {
-		--dom-floating-enter-y: 10px;
-		--dom-floating-origin: bottom center;
-	}
-
-	.dom-floating-transition[data-side="bottom"] {
-		--dom-floating-enter-y: -10px;
-		--dom-floating-origin: top center;
-	}
-
-	.dom-floating-transition[data-side="left"] {
-		--dom-floating-enter-x: 10px;
-		--dom-floating-enter-y: 0px;
-		--dom-floating-origin: center right;
-	}
-
-	.dom-floating-transition[data-side="right"] {
-		--dom-floating-enter-x: -10px;
-		--dom-floating-enter-y: 0px;
-		--dom-floating-origin: center left;
-	}
-
-	.dom-floating-transition[data-floating-effect="fade"] {
-		--dom-floating-enter-x: 0px;
-		--dom-floating-enter-y: 0px;
-		--dom-floating-scale: 1;
-		--dom-floating-enter-transform-duration: 0ms;
-		--dom-floating-leave-transform-duration: 0ms;
-	}
-
-	[data-invalid] .skin-input,
-	.skin-input[data-invalid] {
-		@apply border-destructive focus:border-destructive focus:ring-destructive/25;
-	}
-
-	[data-invalid] dom-dropdown[open] > [slot="trigger"].skin-input,
-	[data-invalid] dom-dropdown[open] > [data-trigger].skin-input,
-	dom-dropdown[open] > [slot="trigger"].skin-input[aria-invalid="true"],
-	dom-dropdown[open] > [data-trigger].skin-input[aria-invalid="true"] {
-		@apply border-destructive ring-2 ring-destructive/25;
-	}
-}
+@import "./tailwind.css";
+@import "./theme.css";