@celar-ui/svelte 1.8.2 → 2.0.0

package/dist/overlay/styles/command.scss

@@ -1,121 +0,0 @@
-[data-command-dialog] {
-	top: 25dvh;
-	left: calc(50lvw - var(--gap));
-	transform: translate(-50%, 0);
-	max-height: calc(75dvh - (var(--gap) * 2));
-
-	[data-command-input] {
-		background-color: var(--color-background);
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius--half);
-		padding: var(--gap--half);
-		font-size: inherit;
-		font-family: inherit;
-		line-height: 1.5;
-		color: var(--color-onSurface);
-		outline: none;
-		transition: border-color var(--transition-dur) ease-in-out;
-		width: 100%;
-		box-sizing: border-box;
-
-		&::placeholder {
-			color: rgba(var(--color-onSurface--rgb), 0.6);
-		}
-
-		&:focus {
-			border-color: var(--color-primary);
-		}
-	}
-
-	[data-command-list] {
-		flex: 1;
-		overflow-y: auto;
-		overflow-x: hidden;
-		margin-top: var(--gap);
-	}
-
-	[data-command-viewport] {
-		display: flex;
-		flex-direction: column;
-		gap: var(--gap--xs);
-	}
-
-	[data-command-group] {
-		display: flex;
-		flex-direction: column;
-		gap: var(--gap--xs);
-
-		&:not(:first-child) {
-			margin-top: var(--gap--md);
-		}
-	}
-
-	[data-command-group-heading] {
-		font-weight: 600;
-		font-size: 0.8em;
-		color: rgba(var(--color-onSurface--rgb), 0.6);
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		margin-bottom: var(--gap--half);
-	}
-
-	[data-command-group-items] {
-		display: flex;
-		flex-direction: column;
-		gap: var(--gap--xs);
-	}
-
-	[data-command-item] {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: var(--gap--md);
-		padding: var(--gap--md);
-		border-radius: var(--radius--half);
-		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 {
-			background-color: var(--color-primaryContainer);
-			color: var(--color-onPrimaryContainer);
-			box-shadow: 0 var(--gap--xs) var(--gap--sm) var(--color-shadow--md);
-		}
-
-		[data-command-item-shortcut] {
-			font-size: 0.9rem;
-			color: var(--color-onSurface);
-			background-color: var(--color-surfaceDim);
-			padding: var(--gap--xs) var(--gap--sm);
-			border-radius: var(--radius--half);
-			border: 1px solid var(--color-border--strong);
-			font-family:
-				ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
-		}
-	}
-
-	[data-command-empty] {
-		color: rgba(var(--color-onSurface--rgb), 0.5);
-		text-align: center;
-	}
-}

package/dist/overlay/styles/dialog.scss

@@ -1,69 +0,0 @@
-$gap: var(--gap);
-$gap--x2: var(--gap--x2);
-$d-max-w: calc(100% - $gap--x2);
-$d-max-h: calc(100dvh - $gap--x2);
-$header-h: 48px;
-$body-max-h: calc($d-max-h - $header-h);
-
-[data-celar-dialog-overlay] {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	backdrop-filter: blur(var(--blur-length));
-	background-color: rgba(var(--color-onBackground--rgb), 0.1);
-	z-index: 100;
-}
-
-[data-celar-dialog-content] {
-	box-sizing: border-box;
-	position: fixed;
-	top: calc(50dvh - $gap);
-	left: calc(50lvw - $gap);
-	transform: translate(-50%, -50%);
-	max-width: $d-max-w;
-	max-height: $d-max-h;
-	margin: $gap;
-	background-color: var(--color-background);
-	box-shadow: 0 var(--gap--xs) var(--gap--half) var(--color-shadow--md);
-	border-radius: var(--radius);
-	overflow: hidden;
-	z-index: 101;
-
-	&[data-xs='true'] {
-		max-width: min($d-max-w, var(--break--xs));
-	}
-	&[data-sm='true'] {
-		max-width: min($d-max-w, var(--break--sm));
-	}
-	&[data-md='true'] {
-		max-width: min($d-max-w, var(--break--md));
-	}
-	&[data-fluid='true'] {
-		width: 100%;
-	}
-}
-
-[data-dialog-header] {
-	height: $header-h;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding-left: var(--gap);
-	padding-right: var(--gap--sm);
-	overflow: hidden;
-}
-
-[data-celar-dialog-title] {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-[data-dialog-body] {
-	box-sizing: border-box;
-	max-height: $body-max-h;
-	overflow-y: auto;
-	padding: var(--gap);
-}

package/dist/overlay/styles/popover.scss

@@ -1,5 +0,0 @@
-[data-popover-content] {
-	z-index: var(--z-index, 120);
-	max-width: 100vw;
-	margin: var(--gap--half) auto;
-}

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

@@ -1,17 +0,0 @@
-[data-minimal-surface-dialog] {
-	border-radius: var(--gap--x2);
-
-	[data-dialog-body] {
-		[data-surface-dialog-body] {
-			border-radius: var(--gap--x2);
-			background-color: var(--color-surfaceContainerLowest);
-			padding: var(--gap);
-		}
-		[data-surface-dialog-header] {
-			margin-block-end: var(--gap);
-		}
-		[data-surface-dialog-footer] {
-			margin-block-start: var(--gap);
-		}
-	}
-}

package/src/styles/colors.scss

@@ -1,43 +0,0 @@
-@use './utils.scss';
-@use './config.scss';
-@use './scheme.scss';
-
-$ext-colors-light: (
-	color-info: #1a3baa,
-	color-onInfo: #e2ffff,
-	color-success: #2b5f50,
-	color-onSuccess: #e8fef5,
-	color-warning: #8a5a00,
-	color-onWarning: #fff8ec
-) !default;
-
-$ext-colors-dark: (
-	color-info: #008eff,
-	color-onInfo: #101a3b,
-	color-success: #9bdac7,
-	color-onSuccess: #184d3a,
-	color-warning: #bfa060,
-	color-onWarning: #4a3700
-) !default;
-
-$colors-misc: (
-	color-shadow--soft: rgba(var(--#{config.$prefix}color-shadow--rgb), 0.1),
-	color-shadow--md: rgba(var(--#{config.$prefix}color-shadow--rgb), 0.15),
-	color-shadow--strong: rgba(var(--#{config.$prefix}color-shadow--rgb), 0.2),
-	color-border: rgba(var(--#{config.$prefix}color-outline--rgb), 0.5),
-	color-border--strong: rgba(var(--#{config.$prefix}color-outline--rgb), 0.8),
-	color-wrapper: var(--#{config.$prefix}color-outline)
-) !default;
-
-:root {
-	@include utils.generate_colors(config.$prefix, scheme.$scheme-light);
-	@include utils.generate_colors(config.$prefix, $ext-colors-light);
-	@include utils.add_prefix(config.$prefix, $colors-misc);
-	color-scheme: light;
-}
-
-:root[data-theme='dark'] {
-	@include utils.generate_colors(config.$prefix, scheme.$scheme-dark);
-	@include utils.generate_colors(config.$prefix, $ext-colors-dark);
-	color-scheme: dark;
-}

package/src/styles/config.scss

@@ -1 +0,0 @@
-$prefix: '';

package/src/styles/misc.scss

@@ -1,15 +0,0 @@
-@use './utils.scss';
-@use './config.scss';
-
-$misc: (
-	radius: 16px,
-	radius--half: 8px,
-	blur-length--x2: 8px,
-	blur-length: 4px,
-	transition-dur: 150ms,
-	transition-dur--long: 300ms
-) !default;
-
-:root {
-	@include utils.add_prefix(config.$prefix, $misc);
-}

package/src/styles/scheme.scss

@@ -1,80 +0,0 @@
-// Generated by gen-material-theme-scss.ts
-// Source color: #ff907f
-
-$scheme-light: (
-	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
-) !default;
-
-$scheme-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
-) !default;

package/src/styles/spacing.scss

@@ -1,23 +0,0 @@
-@use './utils.scss';
-@use './config.scss';
-
-$spacing: (
-	gap--x3: 3rem,
-	gap--x2: 2rem,
-	gap: 1rem,
-	gap--md: 0.7rem,
-	gap--half: 0.5rem,
-	gap--sm: 0.3rem,
-	gap--xs: 0.1rem
-) !default;
-
-$breaking: (
-	break--xs: 540px,
-	break--sm: 960px,
-	break--md: 1320px
-) !default;
-
-:root {
-	@include utils.add_prefix(config.$prefix, $spacing);
-	@include utils.add_prefix(config.$prefix, $breaking);
-}

package/src/styles/utils.scss

@@ -1,27 +0,0 @@
-@use 'sass:string';
-@use 'sass:color';
-
-@function convertHexToRGB($hex) {
-	@return color.channel($hex, 'red', $space: rgb), color.channel($hex, 'green', $space: rgb),
-		color.channel($hex, 'blue', $space: rgb);
-}
-
-@mixin generate_colors($prefix, $colors) {
-	// Colors, RGB Colors
-	@each $color, $value in $colors {
-		@if string.slice(#{$value}, 1, 1) == '#' {
-			--#{$prefix}#{$color}: #{$value};
-			--#{$prefix}#{$color}--rgb: #{convertHexToRGB($value)};
-		} @else {
-			--#{$prefix}#{$color}: var(--#{$value});
-			--#{$prefix}#{$color}--rgb: var(--#{$value}--rgb);
-		}
-	}
-}
-
-@mixin add_prefix($prefix, $vars) {
-	// Colors, RGB Colors
-	@each $var, $value in $vars {
-		--#{$prefix}#{$var}: #{$value};
-	}
-} ;