diff --git a/src/lib/Spacing.stories.svelte b/src/lib/Spacing.stories.svelte
new file mode 100644
index 0000000..e9a83fb
--- /dev/null
+++ b/src/lib/Spacing.stories.svelte
@@ -0,0 +1,27 @@
+<script>
+ import {Meta, Story} from '@storybook/addon-svelte-csf';
+</script>
+
+<Meta title="Spacing"/>
+
+<Story name="Spacing">
+ <div class="whitespace-nowrap flex flex-col gap-f12">
+ <div class="w-f4 bg-teal">f4 - 4px</div>
+ <div class="w-f8 bg-teal">f8 - 8px</div>
+ <div class="w-f12 bg-teal">f12 - 12px</div>
+ <div class="w-f16 bg-teal">f16 - 16px</div>
+ <div class="w-f20 bg-teal">f20 - 20px</div>
+ <div class="w-f24 bg-teal">f24 - 24px</div>
+ <div class="w-f32 bg-teal">f32 - 32px</div>
+ <div class="w-f40 bg-teal">f40 - 40px</div>
+ <div class="w-f48 bg-teal">f48 - 48px</div>
+ <div class="w-f64 bg-teal">f64 - 64px</div>
+ <div class="w-f80 bg-teal">f80 - 80px</div>
+ <div class="w-f96 bg-teal">f96 - 96px</div>
+ <div class="w-f128 bg-teal">f128 - 128px</div>
+ <div class="w-f160 bg-teal">f160 - 160px</div>
+ <div class="w-f192 bg-teal">f192 - 192px</div>
+ <div class="w-f224 bg-teal">f224 - 224px</div>
+ <div class="w-f256 bg-teal">f256 - 256px</div>
+ </div>
+</Story>
\ No newline at end of file
diff --git a/src/lib/atoms/Button.stories.svelte b/src/lib/atoms/Button.stories.svelte
index 7c1798a..022ad96 100644
--- a/src/lib/atoms/Button.stories.svelte
+++ b/src/lib/atoms/Button.stories.svelte
@@ -1,40 +1,40 @@
<script>
- import { Meta, Story } from '@storybook/addon-svelte-csf';
+ import {Meta, Story} from '@storybook/addon-svelte-csf';
- import Button from './Button.svelte';
+ import Button from './Button.svelte';
</script>
-<Meta title="Design System/Atoms/Button" component={Button} />
+<Meta title="Design System/Atoms/Button" component={Button}/>
<!-- Primary -->
<Story name="PrimaryButton">
- <div class="flex flex-col gap-2">
- <Button size="xs">P-XS</Button>
- <Button size="sm">Primary SM</Button>
- <Button size="normal">Primary Normal</Button>
- <Button size="md">Primary MD</Button>
- <Button size="lg">Primary LG</Button>
- </div>
+ <div class="flex flex-col gap-f8">
+ <Button size="xs">P-XS</Button>
+ <Button size="sm">Primary SM</Button>
+ <Button size="normal">Primary Normal</Button>
+ <Button size="md">Primary MD</Button>
+ <Button size="lg">Primary LG</Button>
+ </div>
</Story>
<!-- Secondary -->
<Story name="Secondary">
- <div class="flex flex-col gap-2">
- <Button type="secondary" size="xs">S-XS</Button>
- <Button type="secondary" size="sm">Secondary SM</Button>
- <Button type="secondary" size="normal">Secondary Normal</Button>
- <Button type="secondary" size="md">Secondary MD</Button>
- <Button type="secondary" size="lg">Secondary LG</Button>
- </div>
+ <div class="flex flex-col gap-f8">
+ <Button type="secondary" size="xs">S-XS</Button>
+ <Button type="secondary" size="sm">Secondary SM</Button>
+ <Button type="secondary" size="normal">Secondary Normal</Button>
+ <Button type="secondary" size="md">Secondary MD</Button>
+ <Button type="secondary" size="lg">Secondary LG</Button>
+ </div>
</Story>
<!-- Disabled -->
<Story name="Disabled">
- <div class="flex flex-col gap-2">
- <Button size="xs" disabled={true}>P-XS</Button>
- <Button size="sm" disabled={true}>Primary SM</Button>
- <Button size="normal" disabled={true}>Primary Normal</Button>
- <Button size="md" disabled={true}>Primary MD</Button>
- <Button size="lg" disabled={true}>Primary LG</Button>
- </div>
+ <div class="flex flex-col gap-f8">
+ <Button size="xs" disabled={true}>P-XS</Button>
+ <Button size="sm" disabled={true}>Primary SM</Button>
+ <Button size="normal" disabled={true}>Primary Normal</Button>
+ <Button size="md" disabled={true}>Primary MD</Button>
+ <Button size="lg" disabled={true}>Primary LG</Button>
+ </div>
</Story>
diff --git a/src/lib/atoms/Button.svelte b/src/lib/atoms/Button.svelte
index 3b50a2e..6e06054 100644
--- a/src/lib/atoms/Button.svelte
+++ b/src/lib/atoms/Button.svelte
@@ -1,54 +1,55 @@
<script lang="ts">
- import Typography from '../typography/Typography.svelte';
-
- export let onClick = () => {};
-
- /**
- * Specify the kind of button.
- */
- export let type: 'primary' | 'secondary' = 'primary';
-
- /**
- * Specify the size of the component.
- */
- export let size: 'xs' | 'sm' | 'normal' | 'md' | 'lg' = 'normal';
-
- /**
- * Specify if the component is disabled.
- */
- export let disabled: boolean = false;
-
- // Define button type classes
- $: typeClass =
- type === 'primary'
- ? 'bg-secondary border-secondary hover:border-white hover:bg-transparent'
- : 'bg-transparent border-white hover:border-primary hover:text-primary';
-
- // Define disabled classes
- $: disabledClass = disabled ? 'bg-gray3 border-gray3 cursor-default pointer-events-none' : '';
-
- // Define final brn style classes
- $: btnStylesClass = disabled ? disabledClass : typeClass;
-
- // Define button size classes
- $: btnSizeClass =
- {
- xs: 'w-[115px]',
- sm: 'w-[197px]',
- md: 'w-[339px]',
- lg: 'w-[388px]',
- normal: 'w-[263px]',
- }[size] || 'w-[263px]';
+ import Typography from '../typography/Typography.svelte';
+
+ export let onClick = () => {
+ };
+
+ /**
+ * Specify the kind of button.
+ */
+ export let type: 'primary' | 'secondary' = 'primary';
+
+ /**
+ * Specify the size of the component.
+ */
+ export let size: 'xs' | 'sm' | 'normal' | 'md' | 'lg' = 'normal';
+
+ /**
+ * Specify if the component is disabled.
+ */
+ export let disabled: boolean = false;
+
+ // Define button type classes
+ $: typeClass =
+ type === 'primary'
+ ? 'bg-teal border-teal hover:border-white hover:bg-transparent'
+ : 'bg-transparent border-white hover:border-navy hover:text-primary';
+
+ // Define disabled classes
+ $: disabledClass = disabled ? 'bg-gray3 border-gray3 cursor-default pointer-events-none' : '';
+
+ // Define final brn style classes
+ $: btnStylesClass = disabled ? disabledClass : typeClass;
+
+ // Define button size classes
+ $: btnSizeClass =
+ {
+ xs: 'w-[115px]',
+ sm: 'w-[197px]',
+ md: 'w-[339px]',
+ lg: 'w-[388px]',
+ normal: 'w-[263px]',
+ }[size] || 'w-[263px]';
</script>
<button
- {...$$restProps}
- on:click|preventDefault={onClick}
- class={`rounded-full border p-2.5 text-center text-white transition-all
+ {...$$restProps}
+ on:click|preventDefault={onClick}
+ class={`rounded-full border p-f8 text-center text-white transition-all
${btnStylesClass} ${btnSizeClass} ${$$restProps.class ?? ''}`}
- {disabled}
+ {disabled}
>
- <Typography bold={true} class="flex items-center justify-center gap-2">
- <slot />
- </Typography>
+ <Typography bold={true} class="flex items-center justify-center gap-f8">
+ <slot/>
+ </Typography>
</button>
diff --git a/src/lib/colors/ColorPalette.stories.svelte b/src/lib/colors/ColorPalette.stories.svelte
index af68fe5..5283c7f 100644
--- a/src/lib/colors/ColorPalette.stories.svelte
+++ b/src/lib/colors/ColorPalette.stories.svelte
@@ -6,13 +6,13 @@
<Meta title="Colors/ColorPalette" />
<Story name="ColorPalette">
- <div class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
+ <div class="grid grid-cols-1 gap-f16 p-f16 md:grid-cols-2 lg:grid-cols-4">
{#each Object.entries(tailwindColors) as [colorName, color]}
- <div class="p-4">
- <h2 class="mb-2 text-lg font-semibold">{colorName}</h2>
- <div class="mb-1 flex items-center">
- <div class="h-12 w-12" style="background-color: {color};" />
- <span class="ml-2">{color}</span>
+ <div class="p-f16">
+ <h2 class="mb-f8 text-lg font-bold">{colorName}</h2>
+ <div class="mb-f4 flex items-center">
+ <div class="h-f48 w-f48" style="background-color: {color};" />
+ <span class="ml-f8">{color}</span>
</div>
</div>
{/each}
diff --git a/src/lib/shadcnComponents/ui/select/select-content.svelte b/src/lib/shadcnComponents/ui/select/select-content.svelte
index b9bacee..a25d822 100644
--- a/src/lib/shadcnComponents/ui/select/select-content.svelte
+++ b/src/lib/shadcnComponents/ui/select/select-content.svelte
@@ -1,39 +1,39 @@
<script lang="ts">
- import { Select as SelectPrimitive } from 'bits-ui';
- import { scale } from 'svelte/transition';
- import { cn, flyAndScale } from '../../../../utils';
+ import {Select as SelectPrimitive} from 'bits-ui';
+ import {scale} from 'svelte/transition';
+ import {cn, flyAndScale} from '../../../../utils';
- type $$Props = SelectPrimitive.ContentProps;
- type $$Events = SelectPrimitive.ContentEvents;
+ type $$Props = SelectPrimitive.ContentProps;
+ type $$Events = SelectPrimitive.ContentEvents;
- export let sideOffset: $$Props['sideOffset'] = 4;
- export let inTransition: $$Props['inTransition'] = flyAndScale;
- export let inTransitionConfig: $$Props['inTransitionConfig'] = undefined;
- export let outTransition: $$Props['outTransition'] = scale;
- export let outTransitionConfig: $$Props['outTransitionConfig'] = {
- start: 0.95,
- opacity: 0,
- duration: 50,
- };
+ export let sideOffset: $$Props['sideOffset'] = 4;
+ export let inTransition: $$Props['inTransition'] = flyAndScale;
+ export let inTransitionConfig: $$Props['inTransitionConfig'] = undefined;
+ export let outTransition: $$Props['outTransition'] = scale;
+ export let outTransitionConfig: $$Props['outTransitionConfig'] = {
+ start: 0.95,
+ opacity: 0,
+ duration: 50,
+ };
- let className: $$Props['class'] = undefined;
- export { className as class };
+ let className: $$Props['class'] = undefined;
+ export {className as class};
</script>
<SelectPrimitive.Content
- {inTransition}
- {inTransitionConfig}
- {outTransition}
- {outTransitionConfig}
- {sideOffset}
- class={cn(
+ {inTransition}
+ {inTransitionConfig}
+ {outTransition}
+ {outTransitionConfig}
+ {sideOffset}
+ class={cn(
'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white text-black shadow-md outline-none',
className
)}
- {...$$restProps}
- on:keydown
+ {...$$restProps}
+ on:keydown
>
- <div class="w-full p-1">
- <slot />
- </div>
+ <div class="w-full p-f4">
+ <slot/>
+ </div>
</SelectPrimitive.Content>
diff --git a/src/lib/shadcnComponents/ui/select/select-trigger.svelte b/src/lib/shadcnComponents/ui/select/select-trigger.svelte
index 83d89cc..11662d4 100644
--- a/src/lib/shadcnComponents/ui/select/select-trigger.svelte
+++ b/src/lib/shadcnComponents/ui/select/select-trigger.svelte
@@ -4,31 +4,33 @@
import Error from '../../../../icons/Error.svelte';
import { cn } from '../../../../utils';
- export let error: string | undefined;
+ export let error: string | undefined;
- type $$Props = SelectPrimitive.TriggerProps & { error: string | undefined };
- type $$Events = SelectPrimitive.TriggerEvents;
+ type $$Props = SelectPrimitive.TriggerProps & { error: string | undefined };
+ type $$Events = SelectPrimitive.TriggerEvents;
- let className: $$Props['class'] = undefined;
- export { className as class };
+ let className: $$Props['class'] = undefined;
+ export {className as class};
</script>
-<div class="flex items-center gap-3">
+<div class="flex items-center gap-f12">
<SelectPrimitive.Trigger
class={cn(
'border-input bg-background ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground flex h-10 w-full max-w-[388px] items-center justify-between rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
error ? 'border-2 border-error' : 'border border-gray3',
className
)}
- {...$$restProps}
- let:builder
- on:click
- on:keydown
- >
- <slot {builder} />
- <div class="h-4 w-4">
- <Chevron />
- </div>
- </SelectPrimitive.Trigger>
- {#if error}<Error />{/if}
+ {...$$restProps}
+ let:builder
+ on:click
+ on:keydown
+ >
+ <slot {builder}/>
+ <div class="h-4 w-4">
+ <Chevron/>
+ </div>
+ </SelectPrimitive.Trigger>
+ {#if error}
+ <Error/>
+ {/if}
</div>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index bc936df..57c14d0 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -1,49 +1,69 @@
-import { tailwindColors } from './tailwindColors.ts';
+import {tailwindColors} from './tailwindColors.ts';
/** @type {import('tailwindcss').Config} */
export default {
- mode: 'jit',
- content: [
- './src/**/*.svelte',
- './public/index.html',
- './src/**/*.{js,ts,svelte}',
- './src/**/*.stories.@(js|jsx|ts|tsx|svelte)',
- ],
- theme: {
- extend: {
- fontFamily: {
- sans: ['Poppins'],
- },
- colors: tailwindColors,
- fontSize: {
- default: '16px',
- h1: '56px',
- h2: '48px',
- h3: '40px',
- h4: '32px',
- h5: '24px',
- h6: '20px',
- lg: '24px',
- md: '18px',
- normal: '16px',
- sm: '12px',
- xs: '10px',
- },
- lineHeight: {
- default: '22px',
- h1: '61px',
- h2: '52px',
- h3: '44px',
- h4: '35px',
- h5: '26px',
- h6: '22px',
- lg: '30px',
- md: '25px',
- normal: '22px',
- sm: '16px',
- xs: '14px',
- },
+ mode: 'jit',
+ content: [
+ './src/**/*.svelte',
+ './public/index.html',
+ './src/**/*.{js,ts,svelte}',
+ './src/**/*.stories.@(js|jsx|ts|tsx|svelte)',
+ ],
+ theme: {
+ extend: {
+ fontFamily: {
+ sans: ['Poppins'],
+ },
+ colors: tailwindColors,
+ fontSize: {
+ default: '16px',
+ h1: '56px',
+ h2: '48px',
+ h3: '40px',
+ h4: '32px',
+ h5: '24px',
+ h6: '20px',
+ lg: '24px',
+ md: '18px',
+ normal: '16px',
+ sm: '12px',
+ xs: '10px',
+ },
+ lineHeight: {
+ default: '22px',
+ h1: '61px',
+ h2: '52px',
+ h3: '44px',
+ h4: '35px',
+ h5: '26px',
+ h6: '22px',
+ lg: '30px',
+ md: '25px',
+ normal: '22px',
+ sm: '16px',
+ xs: '14px',
+ },
+ spacing: {
+ f4: '4px',
+ f8: '8px',
+ f12: '12px',
+ f16: '16px',
+ f20: '20px',
+ f24: '24px',
+ f32: '32px',
+ f40: '40px',
+ f48: '48px',
+ f64: '64px',
+ f80: '80px',
+ f96: '96px',
+ f128: '128px',
+ f160: '160px',
+ f192: '192px',
+ f224: '224px',
+ f256: '256px',
+ }
+
+ },
},
- },
- plugins: [],
+ plugins: [],
};
diff --git a/tailwindColors.ts b/tailwindColors.ts
index e8e5cf4..ec41865 100644
--- a/tailwindColors.ts
+++ b/tailwindColors.ts
@@ -1,7 +1,7 @@
export const tailwindColors: { [key: string]: string } = {
//Branding Colors
- primary: '#18465E',
- secondary: '#55B1AB',
+ navy: '#18465E',
+ teal: '#55B1AB',
// Neutral Colors
black: '#000000',
gray1: '#4F4F4F',