@celar-ui/svelte 1.8.1 → 2.0.0

package/dist/overlay/MinimalDialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import './styles/dialog.scss';
+	import './styles/dialog.css';
 	import { fade, fly } from 'svelte/transition';
 	import { Dialog as BitDialog, type DialogContentProps } from 'bits-ui';
 	import type { Snippet } from 'svelte';

package/dist/overlay/MinimalDialog.svelte.d.ts

@@ -1,4 +1,4 @@
-import './styles/dialog.scss';
+import './styles/dialog.css';
 import { type DialogContentProps } from 'bits-ui';
 import type { Snippet } from 'svelte';
 export type MinimalDialogProps = DialogContentProps & {

package/dist/overlay/MinimalSurfaceDialog.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import './styles/dialog.scss';
-	import '../containment/styles/surface-container.scss';
-	import './styles/surface-dialog.scss';
+	import './styles/dialog.css';
+	import '../containment/styles/surface-container.css';
+	import './styles/surface-dialog.css';
 
 	import MinimalDialog, { type MinimalDialogProps } from './MinimalDialog.svelte';
 	import type { Snippet } from 'svelte';

package/dist/overlay/MinimalSurfaceDialog.svelte.d.ts

@@ -1,6 +1,6 @@
-import './styles/dialog.scss';
-import '../containment/styles/surface-container.scss';
-import './styles/surface-dialog.scss';
+import './styles/dialog.css';
+import '../containment/styles/surface-container.css';
+import './styles/surface-dialog.css';
 import { type MinimalDialogProps } from './MinimalDialog.svelte';
 import type { Snippet } from 'svelte';
 type MinimalSurfaceDialogProps = MinimalDialogProps & {

package/dist/overlay/Popover.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import './styles/popover.scss';
+	import './styles/popover.css';
 	import { scale } from 'svelte/transition';
 	import { Popover as BitsPopover, type PopoverContentProps } from 'bits-ui';
 

package/dist/overlay/Popover.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import './styles/popover.scss';
+import './styles/popover.css';
 import { type PopoverContentProps } from 'bits-ui';
 type PopoverProps = PopoverContentProps & {
     open?: boolean;

package/dist/overlay/styles/command.css

@@ -0,0 +1,125 @@
+@reference '$style/index.css';
+
+@layer components {
+	[data-command-dialog] {
+		top: 25dvh;
+		left: calc(50lvw - --spacing(4));
+		transform: translate(-50%, 0);
+		max-height: calc(75dvh - --spacing(8));
+
+		[data-command-input] {
+			@apply border-onBackground/20 border border-solid;
+			background-color: var(--color-background);
+			border-radius: var(--radius-lg);
+			padding: --spacing(2);
+			font-size: inherit;
+			font-family: inherit;
+			line-height: 1.5;
+			color: var(--color-onSurface);
+			outline: none;
+			transition: border-color var(--tw-duration, 150ms) ease-in-out;
+			width: 100%;
+			box-sizing: border-box;
+
+			&::placeholder {
+				@apply text-onBackground/70;
+			}
+
+			&:focus {
+				border-color: var(--color-primary);
+			}
+		}
+
+		[data-command-list] {
+			flex: 1;
+			overflow-y: auto;
+			overflow-x: hidden;
+			margin-top: --spacing(4);
+		}
+
+		[data-command-viewport] {
+			display: flex;
+			flex-direction: column;
+			gap: --spacing(1);
+		}
+
+		[data-command-group] {
+			display: flex;
+			flex-direction: column;
+			gap: --spacing(1);
+
+			&:not(:first-child) {
+				margin-top: --spacing(3);
+			}
+		}
+
+		[data-command-group-heading] {
+			font-weight: 600;
+			font-size: 0.8em;
+			color: --alpha(var(--color-onSurface) / 60%);
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+			margin-bottom: --spacing(2);
+		}
+
+		[data-command-group-items] {
+			display: flex;
+			flex-direction: column;
+			gap: --spacing(1);
+		}
+
+		[data-command-item] {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: --spacing(3);
+			padding: --spacing(3);
+			border-radius: var(--radius-lg);
+			cursor: pointer;
+			line-height: 1.5;
+			color: var(--color-onSurface);
+			background-color: transparent;
+			border: none;
+			text-align: left;
+			width: 100%;
+			outline: none;
+			box-sizing: border-box;
+
+			&[data-selected] {
+				background-color: var(--color-primaryContainer);
+				color: var(--color-onPrimaryContainer);
+			}
+
+			&[data-disabled] {
+				opacity: 0.5;
+				cursor: not-allowed;
+
+				&:hover {
+					background-color: transparent;
+				}
+			}
+
+			&:focus-visible {
+				@apply shadow-md;
+				background-color: var(--color-primaryContainer);
+				color: var(--color-onPrimaryContainer);
+			}
+
+			[data-command-item-shortcut] {
+				@apply border-onBackground/20 border border-solid;
+				font-size: 0.9rem;
+				color: var(--color-onSurface);
+				background-color: var(--color-surfaceDim);
+				padding: --spacing(1) --spacing(1.5);
+				border-radius: var(--radius-lg);
+				font-family:
+					ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+			}
+		}
+
+		[data-command-empty] {
+			@apply text-onSurface/50;
+			text-align: center;
+		}
+	}
+}

package/dist/overlay/styles/dialog.css

@@ -0,0 +1,64 @@
+@reference '$style/index.css';
+
+@layer components {
+	[data-celar-dialog-overlay] {
+		@apply bg-onBackground/10 backdrop-blur;
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 100;
+	}
+
+	[data-celar-dialog-content] {
+		box-sizing: border-box shadow-xl;
+		position: fixed;
+		top: calc(50dvh - --spacing(4));
+		left: calc(50lvw - --spacing(4));
+		transform: translate(-50%, -50%);
+		max-width: calc(100% - --spacing(8));
+		max-height: calc(100dvh - --spacing(8));
+		margin: --spacing(4);
+		background-color: var(--color-background);
+		border-radius: var(--radius-2xl);
+		overflow: hidden;
+		z-index: 101;
+
+		&[data-xs='true'] {
+			max-width: min(calc(100% - --spacing(8)), var(--breakpoint-xs));
+		}
+		&[data-sm='true'] {
+			max-width: min(calc(100% - --spacing(8)), var(--breakpoint--sm));
+		}
+		&[data-md='true'] {
+			max-width: min(calc(100% - --spacing(8)), var(--breakpoint--md));
+		}
+		&[data-fluid='true'] {
+			width: 100%;
+		}
+	}
+
+	[data-dialog-header] {
+		height: --spacing(12);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding-left: --spacing(4);
+		padding-right: --spacing(1.5);
+		overflow: hidden;
+	}
+
+	[data-celar-dialog-title] {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	[data-dialog-body] {
+		box-sizing: border-box;
+		max-height: calc(100dvh - --spacing(20));
+		overflow-y: auto;
+		padding: --spacing(4);
+	}
+}

package/dist/overlay/styles/popover.css

@@ -0,0 +1,9 @@
+@reference '$style/index.css';
+
+@layer components {
+	[data-popover-content] {
+		z-index: var(--z-index, 120);
+		max-width: 100vw;
+		margin: --spacing(2) auto;
+	}
+}

package/dist/overlay/styles/surface-dialog.css

@@ -0,0 +1,21 @@
+@reference '$style/index.css';
+
+@layer components {
+	[data-minimal-surface-dialog] {
+		border-radius: var(--radius-4xl);
+
+		[data-dialog-body] {
+			[data-surface-dialog-body] {
+				border-radius: var(--radius-4xl);
+				background-color: var(--color-surfaceContainerLowest);
+				padding: --spacing(4);
+			}
+			[data-surface-dialog-header] {
+				margin-block-end: --spacing(4);
+			}
+			[data-surface-dialog-footer] {
+				margin-block-start: --spacing(4);
+			}
+		}
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@celar-ui/svelte",
-	"version": "1.8.1",
+	"version": "2.0.0",
 	"license": "MIT",
 	"author": {
 		"name": "cuikho210",
@@ -22,7 +22,7 @@
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
 		"npm-publish": "bun run build && export $(grep -v '^#' ../../.env | xargs) && npm publish --access=public",
-		"gen-colors": "bun run ./scripts/gen-colors.ts"
+		"gen-theme": "bun run ./src/bin/gen-theme.ts"
 	},
 	"files": [
 		"dist",
@@ -52,31 +52,33 @@
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.4.1",
-		"@eslint/js": "^9.39.1",
-		"@iconify-json/hugeicons": "^1.2.17",
+		"@eslint/js": "^9.39.4",
+		"@iconify-json/hugeicons": "^1.2.25",
 		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/kit": "^2.48.4",
-		"@sveltejs/package": "^2.5.4",
+		"@sveltejs/kit": "^2.57.1",
+		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^5.1.1",
-		"@types/bun": "^1.3.1",
-		"autoprefixer": "^10.4.21",
-		"bits-ui": "^2.14.2",
-		"csstype": "^3.1.3",
-		"eslint": "^9.39.1",
+		"@tailwindcss/vite": "^4.2.2",
+		"autoprefixer": "^10.4.27",
+		"bits-ui": "^2.17.3",
+		"csstype": "^3.2.3",
+		"eslint": "^9.39.4",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.13.0",
+		"eslint-plugin-svelte": "^3.17.0",
 		"globals": "^16.5.0",
-		"material-dynamic-colors": "^1.1.2",
-		"prettier": "^3.6.2",
-		"prettier-plugin-svelte": "^3.4.0",
-		"publint": "^0.3.15",
-		"sass": "^1.93.3",
-		"svelte": "^5.43.4",
-		"svelte-check": "^4.3.3",
+		"material-dynamic-colors": "^1.1.4",
+		"prettier": "^3.8.2",
+		"prettier-plugin-svelte": "^3.5.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"publint": "^0.3.18",
+		"sass": "^1.99.0",
+		"svelte": "^5.55.3",
+		"svelte-check": "^4.4.6",
+		"tailwindcss": "^4.2.2",
 		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.46.3",
+		"typescript-eslint": "^8.58.1",
 		"unplugin-icons": "^22.5.0",
-		"vite": "^6.4.1"
+		"vite": "^6.4.2"
 	},
 	"keywords": [
 		"svelte"

package/src/styles/index.css

@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+@import './theme.css';
+
+@theme {
+	--breakpoint-xs: 30rem;
+}

package/src/styles/theme.css

@@ -0,0 +1,94 @@
+/* Generated by index.ts */
+/* Source color: #ff907f */
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@theme {
+	--color-primary: #9c4235;
+	--color-onPrimary: #ffffff;
+	--color-primaryContainer: #ffdad4;
+	--color-onPrimaryContainer: #410000;
+	--color-secondary: #775651;
+	--color-onSecondary: #ffffff;
+	--color-secondaryContainer: #ffdad4;
+	--color-onSecondaryContainer: #2c1512;
+	--color-tertiary: #705c2e;
+	--color-onTertiary: #ffffff;
+	--color-tertiaryContainer: #fbdfa6;
+	--color-onTertiaryContainer: #251a00;
+	--color-error: #ba1a1a;
+	--color-onError: #ffffff;
+	--color-errorContainer: #ffdad6;
+	--color-onErrorContainer: #410002;
+	--color-background: #fffbff;
+	--color-onBackground: #201a19;
+	--color-surface: #fff8f6;
+	--color-onSurface: #201a19;
+	--color-surfaceVariant: #f5ddda;
+	--color-onSurfaceVariant: #534341;
+	--color-outline: #857370;
+	--color-outlineVariant: #d8c2be;
+	--color-shadow: #000000;
+	--color-scrim: #000000;
+	--color-inverseSurface: #362f2e;
+	--color-inverseOnSurface: #fbeeec;
+	--color-inversePrimary: #ffb4a8;
+	--color-surfaceDim: #e4d7d5;
+	--color-surfaceBright: #fff8f6;
+	--color-surfaceContainerLowest: #ffffff;
+	--color-surfaceContainerLow: #fef1ee;
+	--color-surfaceContainer: #f8ebe9;
+	--color-surfaceContainerHigh: #f3e5e3;
+	--color-surfaceContainerHighest: #ede0dd;
+	--color-info: #1a3baa;
+	--color-onInfo: #e2ffff;
+	--color-success: #2b5f50;
+	--color-onSuccess: #e8fef5;
+	--color-warning: #8a5a00;
+	--color-onWarning: #fff8ec;
+}
+
+@variant dark {
+	--color-primary: #ffb4a8;
+	--color-onPrimary: #5f150d;
+	--color-primaryContainer: #7d2b21;
+	--color-onPrimaryContainer: #ffdad4;
+	--color-secondary: #e7bdb6;
+	--color-onSecondary: #442925;
+	--color-secondaryContainer: #5d3f3b;
+	--color-onSecondaryContainer: #ffdad4;
+	--color-tertiary: #dec48c;
+	--color-onTertiary: #3e2e04;
+	--color-tertiaryContainer: #564419;
+	--color-onTertiaryContainer: #fbdfa6;
+	--color-error: #ffb4ab;
+	--color-onError: #690005;
+	--color-errorContainer: #93000a;
+	--color-onErrorContainer: #ffb4ab;
+	--color-background: #201a19;
+	--color-onBackground: #ede0dd;
+	--color-surface: #181211;
+	--color-onSurface: #ede0dd;
+	--color-surfaceVariant: #534341;
+	--color-onSurfaceVariant: #d8c2be;
+	--color-outline: #a08c89;
+	--color-outlineVariant: #534341;
+	--color-shadow: #000000;
+	--color-scrim: #000000;
+	--color-inverseSurface: #ede0dd;
+	--color-inverseOnSurface: #362f2e;
+	--color-inversePrimary: #9c4235;
+	--color-surfaceDim: #181211;
+	--color-surfaceBright: #3f3736;
+	--color-surfaceContainerLowest: #120d0c;
+	--color-surfaceContainerLow: #201a19;
+	--color-surfaceContainer: #251e1d;
+	--color-surfaceContainerHigh: #2f2827;
+	--color-surfaceContainerHighest: #3b3332;
+	--color-info: #008eff;
+	--color-onInfo: #101a3b;
+	--color-success: #9bdac7;
+	--color-onSuccess: #184d3a;
+	--color-warning: #bfa060;
+	--color-onWarning: #4a3700;
+}

package/dist/buttons/styles/base_button.scss

@@ -1,30 +0,0 @@
-[data-button-root] {
-	display: inline-block;
-	position: relative;
-	box-sizing: border-box;
-	padding: 0;
-	margin: 0;
-	transition-duration: var(--transition-dur);
-	transition-timing-function: ease-in;
-	cursor: pointer;
-	border: none;
-	width: fit-content;
-	height: fit-content;
-	font-size: inherit;
-	font-family: inherit;
-	user-select: none;
-	text-decoration: none;
-	-webkit-tap-highlight-color: transparent;
-
-	&:not([data-active='true']):disabled,
-	&:not([data-active='true'])[aria-disabled='true'] {
-		opacity: 0.6;
-		filter: grayscale(100%);
-	}
-
-	&:disabled,
-	&[aria-disabled='true'] {
-		cursor: default;
-		pointer-events: none;
-	}
-}

package/dist/buttons/styles/elevated_button.scss

@@ -1,20 +0,0 @@
-[data-button-elevated] {
-	transition-property: box-shadow, opacity, filter, background-color;
-	box-shadow: 0 1px 1px var(--color-shadow--md);
-	background-color: var(--color-primaryContainer);
-	color: var(--color-onPrimaryContainer);
-
-	&:not(:disabled, [data-active='true']):hover {
-		box-shadow: 0 3px 4px var(--color-shadow--strong);
-		filter: brightness(1.05);
-	}
-
-	&:not(:disabled):active {
-		box-shadow: 0 1px 1px var(--color-shadow--strong);
-		filter: brightness(1);
-	}
-
-	&[data-active='true'] {
-		background-color: var(--color-inversePrimary);
-	}
-}

package/dist/buttons/styles/expanded_text_button.scss

@@ -1,20 +0,0 @@
-[data-button-text-expanded] {
-	transition-property: background-color, opacity, filter;
-	background-color: transparent;
-	color: var(--color-onPrimaryContainer);
-	display: block;
-	width: 100%;
-	overflow: hidden;
-
-	&:not(:disabled, [data-active='true']):hover {
-		background-color: var(--color-primaryContainer);
-	}
-
-	&:not(:disabled):active {
-		filter: brightness(0.95);
-	}
-
-	&[data-active='true'] {
-		background-color: var(--color-inversePrimary);
-	}
-}

package/dist/buttons/styles/filled_button.scss

@@ -1,17 +0,0 @@
-[data-button-filled] {
-	transition-property: opacity, filter;
-	background-color: var(--color-primary);
-	color: var(--color-onPrimary);
-
-	&:not(:disabled, [data-active='true']):hover {
-		filter: brightness(1.2);
-	}
-
-	&:not(:disabled):active {
-		filter: brightness(1);
-	}
-
-	&[data-active='true'] {
-		filter: brightness(1.3);
-	}
-}

package/dist/buttons/styles/icon_button.scss

@@ -1,38 +0,0 @@
-[data-button-icon] {
-	flex-grow: 0;
-	flex-shrink: 0;
-	transition-property: background-color, opacity, filter;
-	border-radius: 50%;
-	background-color: transparent;
-	color: var(--color-onPrimaryContainer);
-	padding: var(--gap--half);
-	aspect-ratio: 1/1;
-	line-height: 1;
-
-	.button-spinner {
-		display: flex;
-		position: absolute;
-		top: 0;
-		left: 0;
-		justify-content: center;
-		align-items: center;
-		width: 100%;
-		height: 100%;
-	}
-
-	.button-body {
-		line-height: 0;
-	}
-
-	&:not(:disabled, [data-active='true']):hover {
-		background-color: var(--color-primaryContainer);
-	}
-
-	&:not(:disabled):active {
-		filter: brightness(0.95);
-	}
-
-	&[data-active='true'] {
-		background-color: var(--color-inversePrimary);
-	}
-}

package/dist/buttons/styles/outlined_button.scss

@@ -1,18 +0,0 @@
-[data-button-outlined] {
-	transition-property: background-color, opacity, filter;
-	background-color: transparent;
-	color: var(--color-onPrimaryContainer);
-	border: 1px solid var(--color-border);
-
-	&:not(:disabled, [data-active='true']):hover {
-		background-color: var(--color-primaryContainer);
-	}
-
-	&:not(:disabled):active {
-		filter: brightness(0.95);
-	}
-
-	&[data-active='true'] {
-		background-color: var(--color-inversePrimary);
-	}
-}

package/dist/buttons/styles/text_button.scss

@@ -1,17 +0,0 @@
-[data-button-text] {
-	transition-property: background-color, opacity, filter;
-	background-color: transparent;
-	color: var(--color-onPrimaryContainer);
-
-	&:not(:disabled, [data-active='true']):hover {
-		background-color: var(--color-primaryContainer);
-	}
-
-	&:not(:disabled):active {
-		filter: brightness(0.95);
-	}
-
-	&[data-active='true'] {
-		background-color: var(--color-inversePrimary);
-	}
-}

package/dist/containment/styles/avatar.scss

@@ -1,16 +0,0 @@
-[data-avatar-root] {
-	display: block;
-	position: relative;
-	background-color: var(--color-surfaceContainerHigh);
-	aspect-ratio: 1;
-	width: var(--size);
-	border-radius: 50%;
-	overflow: hidden;
-}
-
-[data-avatar-image],
-[data-avatar-fallback] {
-	object-fit: cover;
-	width: 100%;
-	height: 100%;
-}

package/dist/containment/styles/card.scss

@@ -1,3 +0,0 @@
-[data-card] {
-	box-shadow: 0 var(--gap--xs) var(--gap--sm) var(--color-shadow--soft);
-}

package/dist/containment/styles/container.scss

@@ -1,22 +0,0 @@
-[data-container] {
-	position: relative;
-	margin: 0 auto;
-	padding: var(--gap);
-	box-sizing: border-box;
-
-	&[data-xs='true'] {
-		max-width: var(--break--xs);
-	}
-
-	&[data-sm='true'] {
-		max-width: var(--break--sm);
-	}
-
-	&[data-md='true'] {
-		max-width: var(--break--md);
-	}
-
-	&[data-fluid='true'] {
-		width: 100%;
-	}
-}