@celar-ui/svelte 0.0.3 → 0.0.5

package/dist/overlay/Dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { fade, fly } from 'svelte/transition';
-	import { Dialog, type DialogRootProps } from 'bits-ui';
+	import { Dialog as BitDialog, type DialogRootProps } from 'bits-ui';
 	import type { Snippet } from 'svelte';
 	import IconButton from '../buttons/IconButton.svelte';
 
@@ -30,33 +30,33 @@
 	let duration = 200;
 </script>
 
-<Dialog.Root {...rest} bind:open>
-	<Dialog.Trigger>
+<BitDialog.Root {...rest} bind:open>
+	<BitDialog.Trigger>
 		{#snippet child({ props })}
 			{@render trigger?.({ props })}
 		{/snippet}
-	</Dialog.Trigger>
-	<Dialog.Portal>
-		<Dialog.Overlay forceMount>
+	</BitDialog.Trigger>
+	<BitDialog.Portal>
+		<BitDialog.Overlay forceMount>
 			{#snippet child({ props, open })}
 				{#if open}
 					<div {...props} transition:fade={{ duration }}></div>
 				{/if}
 			{/snippet}
-		</Dialog.Overlay>
-		<Dialog.Content forceMount data-xs={xs} data-sm={sm} data-md={md} data-fluid={fluid}>
+		</BitDialog.Overlay>
+		<BitDialog.Content forceMount data-xs={xs} data-sm={sm} data-md={md} data-fluid={fluid}>
 			{#snippet child({ props, open })}
 				{#if open}
 					<div {...props} transition:fly={{ duration, y: 50 }}>
 						<div data-dialog-header>
-							<Dialog.Title children={title} />
-							<Dialog.Close>
+							<BitDialog.Title children={title} />
+							<BitDialog.Close>
 								{#snippet child({ props })}
 									<IconButton {...props}>
 										{@render close?.()}
 									</IconButton>
 								{/snippet}
-							</Dialog.Close>
+							</BitDialog.Close>
 						</div>
 
 						<div data-dialog-body>
@@ -65,9 +65,9 @@
 					</div>
 				{/if}
 			{/snippet}
-		</Dialog.Content>
-	</Dialog.Portal>
-</Dialog.Root>
+		</BitDialog.Content>
+	</BitDialog.Portal>
+</BitDialog.Root>
 
 <style>:global([data-dialog-overlay]) {
   position: fixed;

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

@@ -1,4 +1,4 @@
-import { Dialog, type DialogRootProps } from 'bits-ui';
+import { type DialogRootProps } from 'bits-ui';
 import type { Snippet } from 'svelte';
 type DialogProps = DialogRootProps & {
     trigger?: Snippet<[{

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@celar-ui/svelte",
-	"version": "0.0.3",
+	"version": "0.0.5",
 	"license": "MIT",
 	"author": {
 		"name": "cuikho210",
@@ -21,6 +21,7 @@
 	},
 	"files": [
 		"dist",
+		"src/styles",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
@@ -34,7 +35,8 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
-		}
+		},
+		"./styles": "./src/styles/*.scss"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"

package/src/styles/colors.scss

@@ -0,0 +1,45 @@
+@use './utils.scss';
+@use './config.scss';
+
+$colors-theme: (
+	color-primary--text: #570000,
+	color-primary--darker: #962c0f,
+	color-primary--dark: #ff907f,
+	color-primary: #ffc5b3,
+	color-primary--light: #ffe5dc,
+	color-primary--lighter: #fff6f3,
+
+	color-alt--text: #481523,
+	color-alt--darker: #8f1538,
+	color-alt--dark: #c48591,
+	color-alt: #f1afbb,
+	color-alt--light: #ffe3ec,
+	color-alt--lighter: #fff3f7,
+
+	color-text: #000000,
+	color-text-info: #1a3baa,
+	color-text-success: #438d75,
+	color-text-warning: #c18500,
+	color-text-danger: #98000b,
+
+	color-bg: #ffffff,
+	color-bg-info: #faf8ff,
+	color-bg-success: #e8fef5,
+	color-bg-warning: #fff8ec,
+	color-bg-danger: #fff4ef
+) !default;
+
+$colors-misc: (
+	color-shadow--soft: rgba(0, 0, 0, 0.05),
+	color-shadow--md: rgba(0, 0, 0, 0.075),
+	color-shadow: rgba(0, 0, 0, 0.1),
+	color-shadow--strong: rgba(0, 0, 0, 0.16),
+	color-border: rgba(var(--color-text--rgb), 0.07),
+	color-border--strong: rgba(var(--color-text--rgb), 0.1),
+	color-wrapper: rgba(var(--color-text--rgb), 0.024)
+) !default;
+
+:root {
+	@include utils.generate_colors(config.$prefix, $colors-theme);
+	@include utils.add_prefix(config.$prefix, $colors-misc);
+}

package/src/styles/config.scss

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

package/src/styles/misc.scss

@@ -0,0 +1,15 @@
+@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/spacing.scss

@@ -0,0 +1,23 @@
+@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

@@ -0,0 +1,27 @@
+@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};
+	}
+} ;