@getdom/studio 0.1.0 → 0.2.0

package/src/tailwind.css

@@ -0,0 +1,351 @@
+@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'] *));
+
+/*
+ * 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;
+	}
+}
+
+@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);
+}
+
+@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;
+	}
+}

package/src/theme.css

@@ -0,0 +1,99 @@
+:root,
+[data-theme="light"] {
+	color-scheme: light;
+	--radius: 0.625rem;
+	--device-frame: oklch(0.205 0 0);
+	--video-canvas: oklch(0.145 0 0);
+	--video-fg: oklch(0.985 0 0);
+	--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);
+	--chart-1: oklch(0.55 0.19 257);
+	--chart-2: oklch(0.58 0.13 175);
+	--chart-3: oklch(0.65 0.16 65);
+	--chart-4: oklch(0.56 0.19 305);
+	--chart-5: oklch(0.6 0.19 20);
+	--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.5 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.194 149.35);
+	--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);
+}
+
+[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);
+	--chart-1: oklch(0.72 0.15 257);
+	--chart-2: oklch(0.75 0.13 175);
+	--chart-3: oklch(0.8 0.15 75);
+	--chart-4: oklch(0.73 0.16 305);
+	--chart-5: oklch(0.74 0.16 20);
+	--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);
+}
+
+* {
+	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;
+}