From 7c14454969f5bb0a07793536571644e7657ced67 Mon Sep 17 00:00:00 2001 From: "V. Claire Olmstead" <43625033+claireolmstead@users.noreply.github.com> Date: Thu, 17 Oct 2024 18:16:04 -0700 Subject: [PATCH] spacing story (#26) Co-authored-by: Claire Olmstead --- src/lib/Spacing.stories.svelte | 27 +++++ src/lib/atoms/Button.stories.svelte | 48 ++++---- src/lib/atoms/Button.svelte | 95 +++++++-------- src/lib/colors/ColorPalette.stories.svelte | 12 +- .../ui/select/select-content.svelte | 54 ++++----- .../ui/select/select-trigger.svelte | 36 +++--- tailwind.config.mjs | 108 +++++++++++------- tailwindColors.ts | 4 +- 8 files changed, 217 insertions(+), 167 deletions(-) create mode 100644 src/lib/Spacing.stories.svelte 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 @@ + + + + + +
+
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
+
+ \ 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 @@ - + -
- - - - - -
+
+ + + + + +
-
- - - - - -
+
+ + + + + +
-
- - - - - -
+
+ + + + + +
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 @@ 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 @@ -
+
{#each Object.entries(tailwindColors) as [colorName, color]} -
-

{colorName}

-
-
- {color} +
+

{colorName}

+
+
+ {color}
{/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 @@ -
- -
+
+ +
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}; -
+
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 - > - -
- -
- - {#if error}{/if} + {...$$restProps} + let:builder + on:click + on:keydown + > + +
+ +
+ + {#if error} + + {/if}
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',