From ef21f8c74ad33fa2c0872e39a0c73e85f05ba672 Mon Sep 17 00:00:00 2001 From: tedraykov Date: Mon, 28 Nov 2022 02:08:07 +0200 Subject: [PATCH] feat: material ui 3 theme Signed-off-by: tedraykov --- .eslintignore | 13 ++ .gitignore | 5 +- .prettierignore | 13 ++ .prettierrc | 5 +- src/app.html | 4 +- src/components/Navbar.svelte | 2 +- src/components/playground/ApiTable.svelte | 120 ++++++++----- src/components/playground/RenderView.svelte | 2 +- src/docs/playground/button.ts | 25 +-- src/docs/playground/card.ts | 20 +-- src/docs/playground/typography.ts | 44 +++++ src/lib/components/Button.svelte | 37 ++-- src/lib/components/Card.svelte | 4 +- src/lib/components/CardContent.svelte | 2 +- src/lib/components/CardHeader.svelte | 17 ++ src/lib/components/CardTitle.svelte | 4 +- src/lib/components/Chip.svelte | 2 +- src/lib/components/Divider.svelte | 2 +- src/lib/components/Drawer.svelte | 35 ++-- src/lib/components/FilledInput.svelte | 6 +- src/lib/components/List.svelte | 4 +- src/lib/components/ListItem.svelte | 4 +- src/lib/components/OutlinedInput.svelte | 8 +- src/lib/components/TableCell.svelte | 7 +- src/lib/components/TableHeaderCell.svelte | 4 +- src/lib/components/Typography.svelte | 76 ++++++-- src/lib/plugin.cjs | 99 +++++++--- src/lib/styles/createTheme.ts | 61 +++++-- src/lib/types/adornment.ts | 8 +- src/lib/types/button.ts | 20 +-- src/lib/types/card.ts | 34 ++-- src/lib/types/chip.ts | 11 +- src/lib/types/container.ts | 8 +- src/lib/types/divider.ts | 10 +- src/lib/types/drawer.ts | 10 +- src/lib/types/form.ts | 14 +- src/lib/types/index.ts | 37 +++- src/lib/types/input.ts | 20 +-- src/lib/types/list.ts | 10 +- src/lib/types/paper.ts | 10 +- src/lib/types/stack.ts | 11 +- src/lib/types/table.ts | 38 ++-- src/lib/types/tabs.ts | 40 ++--- src/lib/types/typography.ts | 51 +++--- src/lib/utils/deriveTypographyElement.ts | 38 ++-- src/lib/utils/typographyVariant.ts | 62 ++++--- src/routes/+layout.svelte | 24 +-- src/routes/components/button/+page.svelte | 170 +++++++++--------- src/routes/components/card/+page.svelte | 18 +- src/routes/components/chip/+page.svelte | 2 +- src/routes/components/typography/+page.svelte | 62 +++++-- tsconfig.json | 47 ++--- 52 files changed, 805 insertions(+), 575 deletions(-) create mode 100644 .eslintignore create mode 100644 .prettierignore create mode 100644 src/docs/playground/typography.ts diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..3897265 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,13 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example + +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/.gitignore b/.gitignore index d588c93..8f6c617 100644 --- a/.gitignore +++ b/.gitignore @@ -6,4 +6,7 @@ node_modules .env .env.* !.env.example -**/.idea +.vercel +.output +vite.config.js.timestamp-* +vite.config.ts.timestamp-* diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..3897265 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,13 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example + +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/.prettierrc b/.prettierrc index ff2677e..a77fdde 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,5 +2,8 @@ "useTabs": true, "singleQuote": true, "trailingComma": "none", - "printWidth": 100 + "printWidth": 100, + "plugins": ["prettier-plugin-svelte"], + "pluginSearchDirs": ["."], + "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] } diff --git a/src/app.html b/src/app.html index c3aeba5..e8da0ad 100644 --- a/src/app.html +++ b/src/app.html @@ -9,7 +9,7 @@ %sveltekit.head% - +
%sveltekit.body% - +
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte index f6e031c..0b90e5b 100644 --- a/src/components/Navbar.svelte +++ b/src/components/Navbar.svelte @@ -11,7 +11,7 @@ - diff --git a/src/components/playground/ApiTable.svelte b/src/components/playground/ApiTable.svelte index 54d6909..53a521f 100644 --- a/src/components/playground/ApiTable.svelte +++ b/src/components/playground/ApiTable.svelte @@ -42,7 +42,7 @@ if (!info?.getValue()) return ''; const { type, props } = info?.getValue(); const Component = deriveControlComponent(type); - return Component ? renderComponent(Component, props ) : ''; + return Component ? renderComponent(Component, props) : ''; } } ]; @@ -75,49 +75,85 @@ const tableMap = getPropsTableMap(optionsMap); - - - {#each Object.keys(tableMap) as componentName} - {componentName} - {/each} - - - {#each Object.values(tableMap) as table} - - - - {#each get(table).getHeaderGroups() as headerGroup} - - {#each headerGroup.headers as header} - - {#if !header.isPlaceholder} - 1} + + + {#each Object.keys(tableMap) as componentName} + {componentName} + {/each} + + + {#each Object.values(tableMap) as table} + +
+ + {#each get(table).getHeaderGroups() as headerGroup} + + {#each headerGroup.headers as header} + + {#if !header.isPlaceholder} + + {/if} + + {/each} + + {/each} + + + {#each get(table).getRowModel().rows as row} + + {#each row.getVisibleCells() as cell} + + - {/if} - - {/each} - - {/each} - - - {#each get(table).getRowModel().rows as row} - - {#each row.getVisibleCells() as cell} - - - - {/each} - - {/each} - -
- + + {/each} + + {/each} + + + + {/each} + + +{:else} + + + {#each get(tableMap[Object.keys(tableMap)[0]]).getHeaderGroups() as headerGroup} + + {#each headerGroup.headers as header} + + {#if !header.isPlaceholder} + + {/if} + + {/each} + + {/each} + + + {#each get(tableMap[Object.keys(tableMap)[0]]).getRowModel().rows as row} + + {#each row.getVisibleCells() as cell} + + + + {/each} + {/each} - - + +
+{/if} diff --git a/src/components/playground/RenderView.svelte b/src/components/playground/RenderView.svelte index c7cda53..ed46cbd 100644 --- a/src/components/playground/RenderView.svelte +++ b/src/components/playground/RenderView.svelte @@ -8,7 +8,7 @@
+ class={`flex justify-center py-10 bg-neutral-95`}> {#if componentTree?.Component} diff --git a/src/lib/components/CardHeader.svelte b/src/lib/components/CardHeader.svelte index e69de29..73a7c08 100644 --- a/src/lib/components/CardHeader.svelte +++ b/src/lib/components/CardHeader.svelte @@ -0,0 +1,17 @@ + + +
+ +
diff --git a/src/lib/components/CardTitle.svelte b/src/lib/components/CardTitle.svelte index 452fe78..5c50086 100644 --- a/src/lib/components/CardTitle.svelte +++ b/src/lib/components/CardTitle.svelte @@ -14,8 +14,8 @@ diff --git a/src/lib/components/Chip.svelte b/src/lib/components/Chip.svelte index 60840d9..65bbdc3 100644 --- a/src/lib/components/Chip.svelte +++ b/src/lib/components/Chip.svelte @@ -23,7 +23,7 @@ styleOverrides.root, { // Accent - ["bg-accent-200 text-accent-800"]: color === 'accent', + ["bg-primary-200 text-primary-800"]: color === 'accent', // Primary ["bg-primary-200 text-primary-800"]: color === 'primary', // Success diff --git a/src/lib/components/Divider.svelte b/src/lib/components/Divider.svelte index aeedd48..2da7744 100644 --- a/src/lib/components/Divider.svelte +++ b/src/lib/components/Divider.svelte @@ -16,7 +16,7 @@ - + + + @@ -46,5 +55,5 @@ in:fade={{ duration: 200 }} out:fade={{ duration: 200 }} on:click|stopPropagation={handleClose} - class='absolute w-screen h-screen bg-gray-900/20'> + class='absolute w-screen h-screen bg-neutral-10/20'> {/if} diff --git a/src/lib/components/FilledInput.svelte b/src/lib/components/FilledInput.svelte index e8e787b..563a238 100644 --- a/src/lib/components/FilledInput.svelte +++ b/src/lib/components/FilledInput.svelte @@ -14,7 +14,7 @@ :global([slot='startAdornment']) { - @apply pl-4 px-2 h-4 w-auto text-accent-500 pointer-events-auto; + @apply pl-4 px-2 h-4 w-auto text-primary-40 pointer-events-auto; } :global([slot='endAdornment']) { - @apply pl-2 px-4 h-4 w-auto text-accent-500 pointer-events-auto; + @apply pl-2 px-4 h-4 w-auto text-primary-40 pointer-events-auto; } diff --git a/src/lib/components/List.svelte b/src/lib/components/List.svelte index c062884..710bf78 100644 --- a/src/lib/components/List.svelte +++ b/src/lib/components/List.svelte @@ -1,14 +1,14 @@ diff --git a/src/lib/components/OutlinedInput.svelte b/src/lib/components/OutlinedInput.svelte index 7905ba9..92c11b9 100644 --- a/src/lib/components/OutlinedInput.svelte +++ b/src/lib/components/OutlinedInput.svelte @@ -12,13 +12,13 @@ {#if $$slots.startAdornment} @@ -31,9 +31,9 @@ diff --git a/src/lib/components/TableCell.svelte b/src/lib/components/TableCell.svelte index 5dee6b8..243f06b 100644 --- a/src/lib/components/TableCell.svelte +++ b/src/lib/components/TableCell.svelte @@ -1,5 +1,6 @@ diff --git a/src/lib/plugin.cjs b/src/lib/plugin.cjs index 82e9847..764ef96 100644 --- a/src/lib/plugin.cjs +++ b/src/lib/plugin.cjs @@ -1,41 +1,88 @@ const plugin = require('tailwindcss/plugin'); const defaultTheme = require('tailwindcss/defaultTheme'); -module.exports = plugin(function ({ theme }) {}, { +module.exports = plugin(function({ theme }) { +}, { theme: { + fontSize: { + xs: ['0.6875rem', { lineHeight: '1rem' }], + sm: ['0.75rem', { lineHeight: '1rem' }], + base: ['0.875rem', { lineHeight: '1.25rem' }], + lg: ['1rem', { lineHeight: '1.5rem' }], + xl: ['1.375rem', { lineHeight: '1.75rem' }], + '2xl': ['1.5rem', { lineHeight: '2rem' }], + '3xl': ['1.75rem', { lineHeight: '2.25rem' }], + '4xl': ['2rem', { lineHeight: '2.5rem' }], + '5xl': ['2.25rem', { lineHeight: '2.75rem' }], + '6xl': ['2.8125rem', { lineHeight: '3.25rem' }], + '7xl': ['3.5625rem', { lineHeight: '4rem' }] + }, + fontFamily: { + sans: ['Inter', ...defaultTheme.fontFamily.sans] + }, extend: { - fontFamily: { - sans: ['Inter', ...defaultTheme.fontFamily.sans] - }, zIndex: { drawer: '100' }, colors: { + surface: { + DEFAULT: 'hsla(315, 100%, 99%, 1)', + inverse: 'hsla(255, 7%, 11%, 1)', + variant: 'hsla(275, 55%, 96%, 1)', + variantInverse: 'hsla(264, 7%, 29%, 1)' + }, primary: { - 50: '#f0f9ff', - 100: '#e0f2fe', - 200: '#bae6fd', - 300: '#7dd3fc', - 400: '#38bdf8', - 500: '#0ea5e9', - 600: '#0284c7', - 700: '#0369a1', - 800: '#075985', - 900: '#0c4a6e' + DEFAULT: 'hsl(256, 34%, 48%)', + 0: 'hsl(0, 0%, 0%)', + 10: 'hsl(261, 100%, 18%)', + 20: 'hsl(259, 58%, 28%)', + 30: 'hsl(257, 43%, 38%)', + 40: 'hsl(256, 34%, 48%)', + 50: 'hsl(257, 40%, 50%)', + 60: 'hsla(256, 55%, 68%, 1)', + 70: 'hsla(256, 87%, 79%, 1)', + 80: 'hsla(258, 100%, 87%, 1)', + 90: 'hsla(263, 100%, 93%, 1)', + 95: 'hsla(270, 100%, 96%, 1)', + 99: 'hsla(315, 100%, 99%, 1)', + 100: 'hsla(0, 0%, 100%, 1)' + }, + neutral: { + 0: 'hsl(0, 0%, 0%)', + 10: 'hsla(255, 7%, 11%, 1)', + 20: 'hsla(260, 3%, 19%, 1)', + 30: 'hsla(280, 2%, 28%, 1)', + 40: 'hsla(276, 3%, 37%, 1)', + 50: 'hsla(285, 2%, 47%, 1)', + 60: 'hsla(285, 2%, 57%, 1)', + 70: 'hsla(300, 2%, 67%, 1)', + 80: 'hsla(288, 5%, 78%, 1)', + 90: 'hsla(312, 9%, 89%, 1)', + 95: 'hsla(300, 19%, 95%, 1)', + 99: 'hsla(315, 100%, 99%, 1)', + 100: 'hsla(0, 0%, 100%, 1)', + }, + neutralVariant: { + 0: 'hsl(0, 0%, 0%)', + 10: 'hsla(263, 13%, 12%, 1)', + 20: 'hsla(263, 8%, 20%, 1)', + 30: 'hsla(264, 7%, 29%, 1)', + 40: 'hsla(260, 5%, 38%, 1)', + 50: 'hsla(270, 4%, 47%, 1)', + 60: 'hsla(264, 5%, 58%, 1)', + 70: 'hsla(267, 7%, 68%, 1)', + 80: 'hsla(270, 11%, 79%, 1)', + 90: 'hsla(275, 24%, 90%, 1)', + 95: 'hsla(275, 55%, 96%, 1)', + 99: 'hsla(315, 100%, 99%, 1)', + 100: 'hsla(0, 0%, 100%, 1)' }, - accent: { - 50: '#fafafa', - 100: '#f4f4f5', - 200: '#e4e4e7', - 300: '#d4d4d8', - 400: '#a1a1aa', - 500: '#71717a', - 600: '#52525b', - 700: '#3f3f46', - 800: '#27272a', - 900: '#18181b' + outline: { + DEFAULT: 'hsla(270, 4%, 47%, 1)', + variant: 'hsla(270, 11%, 79%, 1)' } } } } -}); +}) +; diff --git a/src/lib/styles/createTheme.ts b/src/lib/styles/createTheme.ts index 0c8b229..9ca5314 100644 --- a/src/lib/styles/createTheme.ts +++ b/src/lib/styles/createTheme.ts @@ -6,8 +6,8 @@ export const defaultTheme: ThemeOptions = { Button: { defaultProps: { element: 'button', - variant: 'contained', - color: 'accent', + variant: 'filled', + color: 'primary', size: 'medium' }, styleOverrides: {} @@ -45,9 +45,9 @@ export const defaultTheme: ThemeOptions = { }, Chip: { defaultProps: { - element: "div", - color: "accent", - size: "medium" + element: 'div', + color: 'primary', + size: 'medium' }, styleOverrides: {} }, @@ -55,7 +55,7 @@ export const defaultTheme: ThemeOptions = { defaultProps: { element: 'div' }, - styleOverrides: {} + styleOverrides: {} }, Divider: { defaultProps: { @@ -68,7 +68,9 @@ export const defaultTheme: ThemeOptions = { defaultProps: { element: 'aside' }, - styleOverrides: {} + styleOverrides: { + root: '' + } }, FilledInput: { defaultProps: { @@ -84,13 +86,13 @@ export const defaultTheme: ThemeOptions = { }, List: { defaultProps: { - element: "ul" + element: 'ul' }, styleOverrides: {} }, ListItem: { defaultProps: { - element: "li" + element: 'li' }, styleOverrides: {} }, @@ -144,40 +146,69 @@ export const defaultTheme: ThemeOptions = { }, Table: { defaultProps: { - element: "table" + element: 'table' }, styleOverrides: {} }, TableCell: { defaultProps: { - element: "td" + element: 'td' }, styleOverrides: {} }, TableBody: { defaultProps: { - element: "tbody" + element: 'tbody' }, styleOverrides: {} }, TableHead: { defaultProps: { - element: "thead" + element: 'thead' }, styleOverrides: {} }, TableRow: { defaultProps: { - element: "tr" + element: 'tr' }, styleOverrides: {} }, TableHeaderCell: { defaultProps: { - element: "th" + element: 'th' }, styleOverrides: {} }, + Typography: { + defaultProps: { + element: 'span', + style: 'body', + size: 'medium' + }, + styleOverrides: { + displaySmall: '', + display: '', + displayMedium: '', + displayLarge: '', + headline: '', + headlineSmall: '', + headlineMedium: '', + headlineLarge: '', + titleSmall: '', + title: '', + titleMedium: '', + titleLarge: '', + label: '', + labelSmall: '', + labelMedium: '', + labelLarge: '', + body: '', + bodySmall: '', + bodyMedium: '', + bodyLarge: '' + } + }, Paper: { defaultProps: { element: 'div', diff --git a/src/lib/types/adornment.ts b/src/lib/types/adornment.ts index 9dbeb45..9c96a51 100644 --- a/src/lib/types/adornment.ts +++ b/src/lib/types/adornment.ts @@ -1,13 +1,11 @@ -import type { ComponentOptions, ElementOptions } from './index'; +import type { ComponentOptions, ElementProps } from './index'; export type InputStartAdornmentOptions = ComponentOptions< - InputStartAdornmentPropsOptions, + InputStartAdornmentProps, InputStartAdornmentStylesOverrideOptions >; -export type InputStartAdornmentPropsOptions = ElementOptions; - -export type InputStartAdornmentProps = ElementOptions; +export type InputStartAdornmentProps = ElementProps; export type InputStartAdornmentStylesOverrideOptions = { root?: string; diff --git a/src/lib/types/button.ts b/src/lib/types/button.ts index f3ede61..382b089 100644 --- a/src/lib/types/button.ts +++ b/src/lib/types/button.ts @@ -1,30 +1,24 @@ -import type { ComponentOptions, Colors, ElementOptions } from './index'; +import type { ComponentOptions, Colors, ElementProps} from './index'; -export type ButtonOptions = ComponentOptions; +export type ButtonOptions = ComponentOptions; -export type ButtonPropsOptions = ElementOptions & { - variant?: 'text' | 'contained' | 'outlined'; - color?: Colors; - size?: 'small' | 'medium' | 'large'; -}; - -export type ButtonProps = ElementOptions & { - variant?: 'text' | 'contained' | 'outlined'; +export type ButtonProps = ElementProps& { + variant?: 'text' | 'filled' | "filledTonal" | 'outlined'; color?: Colors; size?: 'small' | 'medium' | 'large'; }; export type ButtonStylesOverrideOptions = { root?: string; - contained?: string; + filled?: string; outlined?: string; primary?: string; accent?: string; secondary?: string; - primaryContained?: string; + primaryFilled?: string; primaryOutlined?: string; secondaryOutlined?: string; - secondaryContained?: string; + secondaryFilled?: string; accentOutlined?: string; accentContained?: string; small?: string; diff --git a/src/lib/types/card.ts b/src/lib/types/card.ts index 35d6e63..cb6e724 100644 --- a/src/lib/types/card.ts +++ b/src/lib/types/card.ts @@ -1,13 +1,9 @@ -import type { ComponentOptions, ElementOptions } from './index'; +import type { ComponentOptions, ElementProps } from './index'; /* Card */ -export type CardOptions = ComponentOptions; +export type CardOptions = ComponentOptions; -export type CardPropsOptions = ElementOptions & { - outlined?: boolean; -}; - -export type CardProps = ElementOptions & { +export type CardProps = ElementProps & { outlined?: boolean; }; @@ -18,13 +14,11 @@ export type CardStylesOverrideOptions = { /* Card Header */ export type CardHeaderOptions = ComponentOptions< - CardHeaderPropsOptions, + CardHeaderProps, CardHeaderStylesOverrideOptions >; -export type CardHeaderPropsOptions = ElementOptions; - -export type CardHeaderProps = ElementOptions; +export type CardHeaderProps = ElementProps; export type CardHeaderStylesOverrideOptions = { root?: string; @@ -32,24 +26,20 @@ export type CardHeaderStylesOverrideOptions = { /* Card Title */ export type CardTitleOptions = ComponentOptions< - CardTitlePropsOptions, + CardTitleProps, CardTitleStyleOverrideOptions >; -export type CardTitleProps = ElementOptions; - -export type CardTitlePropsOptions = ElementOptions; +export type CardTitleProps = ElementProps; export type CardTitleStyleOverrideOptions = { root?: string; }; /* Card Action */ -export type CardActionOptions = ComponentOptions; - -export type CardActionPropsOptions = ElementOptions; +export type CardActionOptions = ComponentOptions; -export type CardActionProps = ElementOptions; +export type CardActionProps = ElementProps; export type CardActionOverrideOptions = { root?: string; @@ -57,13 +47,11 @@ export type CardActionOverrideOptions = { /* Card Content */ export type CardContentOptions = ComponentOptions< - CardContentPropsOptions, + CardContentProps, CardContentStylesOverrideOptions >; -export type CardContentPropsOptions = ElementOptions; - -export type CardContentProps = ElementOptions; +export type CardContentProps = ElementProps; export type CardContentStylesOverrideOptions = { root?: string; diff --git a/src/lib/types/chip.ts b/src/lib/types/chip.ts index 410cb00..9323541 100644 --- a/src/lib/types/chip.ts +++ b/src/lib/types/chip.ts @@ -1,13 +1,8 @@ -import type { ComponentOptions, Colors, ElementOptions } from './index'; +import type { ComponentOptions, Colors, ElementProps } from './index'; -export type ChipOptions = ComponentOptions; +export type ChipOptions = ComponentOptions; -export type ChipPropsOptions = ElementOptions & { - color?: Colors - size?: "small" | 'medium' -} - -export type ChipProps = ElementOptions & { +export type ChipProps = ElementProps & { color?: Colors size?: "small" | 'medium' } diff --git a/src/lib/types/container.ts b/src/lib/types/container.ts index d1ec544..64d1b33 100644 --- a/src/lib/types/container.ts +++ b/src/lib/types/container.ts @@ -1,10 +1,8 @@ -import type { ComponentOptions, ElementOptions } from './index'; +import type { ComponentOptions, ElementProps } from './index'; -export type ContainerOptions = ComponentOptions; +export type ContainerOptions = ComponentOptions; -export type ContainerPropsOptions = ElementOptions - -export type ContainerProps = ElementOptions +export type ContainerProps = ElementProps export type ContainerStyleOverrideOptions = { root?: string; diff --git a/src/lib/types/divider.ts b/src/lib/types/divider.ts index 9660903..78b7850 100644 --- a/src/lib/types/divider.ts +++ b/src/lib/types/divider.ts @@ -1,12 +1,8 @@ -import type { ComponentOptions, ElementOptions } from './index'; +import type { ComponentOptions, ElementProps } from './index'; -export type DividerOptions = ComponentOptions; +export type DividerOptions = ComponentOptions; -export type DividerPropsOptions = ElementOptions & { - direction: 'vertical' | 'horizontal'; -}; - -export type DividerProps = ElementOptions & { +export type DividerProps = ElementProps & { direction: 'vertical' | 'horizontal'; }; diff --git a/src/lib/types/drawer.ts b/src/lib/types/drawer.ts index db4d8d0..1d38278 100644 --- a/src/lib/types/drawer.ts +++ b/src/lib/types/drawer.ts @@ -1,12 +1,8 @@ -import type { ComponentOptions, ElementOptions } from './index'; +import type { ComponentOptions, ElementProps } from './index'; -export type DrawerOptions = ComponentOptions; +export type DrawerOptions = ComponentOptions; -export type DrawerPropsOptions = ElementOptions & { - variant?: 'permanent' | 'persistent' | 'temporary'; - open?: boolean; -}; -export type DrawerProps = ElementOptions & { +export type DrawerProps = ElementProps & { variant?: 'permanent' | 'persistent' | 'temporary'; open?: boolean; }; diff --git a/src/lib/types/form.ts b/src/lib/types/form.ts index 8d0fc4a..78939ef 100644 --- a/src/lib/types/form.ts +++ b/src/lib/types/form.ts @@ -1,25 +1,21 @@ -import type { ComponentOptions, ElementOptions } from './index'; +import type { ComponentOptions, ElementProps } from './index'; export type FormLabelOptions = ComponentOptions< - FormLabelPropsOptions, + FormLabelProps, FormLabelStylesOverrideOptions >; export type FormControlOptions = ComponentOptions< - FormControlPropsOptions, + FormControlProps, FormControlOverrideOptions >; -export type FormLabelPropsOptions = ElementOptions; - -export type FormLabelProps = ElementOptions; +export type FormLabelProps = ElementProps; export type FormLabelStylesOverrideOptions = { root?: string; }; -export type FormControlPropsOptions = ElementOptions; - -export type FormControlProps = ElementOptions; +export type FormControlProps = ElementProps; export type FormControlOverrideOptions = { root?: string; diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts index a0572a8..3befba5 100644 --- a/src/lib/types/index.ts +++ b/src/lib/types/index.ts @@ -22,6 +22,35 @@ import type { TableRowOptions } from './table'; +export type PaletteColor = { + main: string; + onMain: string; + container: string; + onContainer: string; +} + +export type PaletteColors = { + primary: string; + onPrimary: string; + primaryContainer: string; + onPrimaryContainer: string; + secondary: PaletteColor; + ternary: PaletteColor; + error: PaletteColor; + background: string + onBackground: string + surface: string + onSurface: string + surfaceVariant: string; + onSurfaceVariant: string; + outline: string; + outlineVariant: string; +} + +export type Palette = { + get: (color: keyof PaletteColors, type: "color" | "background") => string +} & PaletteColors; + export type ThemeOptions = { components?: { BaseInput?: BaseInputOptions; @@ -59,17 +88,21 @@ export type ThemeOptions = { }; }; +export type Theme = { + palette: Palette +} & ThemeOptions; + export type ComponentOptions = { defaultProps?: P; styleOverrides?: O; }; -export type ElementOptions = { +export type ElementProps = { element?: SupportedElement; }; export type Elevation = 'none' | 'sm' | 'default' | 'md' | 'lg' | 'xl' | '2xl'; -export type Colors = 'accent' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'inherit'; +export type Colors = 'primary' | 'secondary' | 'ternary' | 'success' | 'warning' | 'error' | 'inherit'; export * from './adornment'; export * from './button'; diff --git a/src/lib/types/input.ts b/src/lib/types/input.ts index a54bbad..84dbe8a 100644 --- a/src/lib/types/input.ts +++ b/src/lib/types/input.ts @@ -1,14 +1,12 @@ -import type { ComponentOptions, ElementOptions } from './index'; +import type { ComponentOptions, ElementProps} from './index'; /* Filled Input */ export type FilledInputOptions = ComponentOptions< - FilledInputPropsOptions, + FilledInputProps, FilledInputStylesOverrideOptions >; -export type FilledInputPropsOptions = ElementOptions; - -export type FilledInputProps = ElementOptions; +export type FilledInputProps = ElementProps; export type FilledInputStylesOverrideOptions = { root?: string; @@ -16,13 +14,11 @@ export type FilledInputStylesOverrideOptions = { /* Outlined Input */ export type OutlinedInputOptions = ComponentOptions< - OutlinedInputPropsOptions, + OutlinedInputProps, OutlinedInputStylesOverrideOptions >; -export type OutlinedInputPropsOptions = ElementOptions; - -export type OutlinedInputProps = ElementOptions; +export type OutlinedInputProps = ElementProps; export type OutlinedInputStylesOverrideOptions = { root?: string; @@ -30,13 +26,11 @@ export type OutlinedInputStylesOverrideOptions = { /* Base Input */ export type BaseInputOptions = ComponentOptions< - BaseInputPropsOptions, + BaseInputProps, BaseInputStylesOverrideOptions >; -export type BaseInputPropsOptions = ElementOptions; - -export type BaseInputProps = ElementOptions; +export type BaseInputProps = ElementProps; export type BaseInputStylesOverrideOptions = { root?: string; diff --git a/src/lib/types/list.ts b/src/lib/types/list.ts index 126d354..f5c07ac 100644 --- a/src/lib/types/list.ts +++ b/src/lib/types/list.ts @@ -1,18 +1,18 @@ -import type { ComponentOptions, ElementOptions } from './index'; +import type { ComponentOptions, ElementProps } from './index'; -export type ListOptions = ComponentOptions; -export type ListPropsOptions = ElementOptions; +export type ListProps = ElementProps; export type ListStylesOverrideOptions = { root?: string; }; -export type ListItemOptions = ComponentOptions -export type ListItemPropsOptions = ElementOptions; +export type ListItemProps = ElementProps; export type ListItemStylesOverrideOptions = { root?: string; diff --git a/src/lib/types/paper.ts b/src/lib/types/paper.ts index 01525fa..7d3dedd 100644 --- a/src/lib/types/paper.ts +++ b/src/lib/types/paper.ts @@ -1,13 +1,9 @@ /* Paper */ -import type { ComponentOptions, ElementOptions, Elevation } from './index'; +import type { ComponentOptions, ElementProps, Elevation } from './index'; -export type PaperOptions = ComponentOptions; +export type PaperOptions = ComponentOptions; -export type PaperPropsOptions = ElementOptions & { - elevation?: Elevation; -}; - -export type PaperProps = ElementOptions & { +export type PaperProps = ElementProps & { elevation?: Elevation; }; diff --git a/src/lib/types/stack.ts b/src/lib/types/stack.ts index af6ec77..6e3b7e4 100644 --- a/src/lib/types/stack.ts +++ b/src/lib/types/stack.ts @@ -1,13 +1,8 @@ -import type { ComponentOptions, ElementOptions } from './index'; +import type { ComponentOptions, ElementProps } from './index'; -export type StackOptions = ComponentOptions; +export type StackOptions = ComponentOptions; -export type StackPropsOptions = ElementOptions & { - direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse'; - gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8; -}; - -export type StackProps = ElementOptions & { +export type StackProps = ElementProps & { direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse'; gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8; }; diff --git a/src/lib/types/table.ts b/src/lib/types/table.ts index da00d0c..27f7d71 100644 --- a/src/lib/types/table.ts +++ b/src/lib/types/table.ts @@ -1,62 +1,50 @@ -import type { ComponentOptions, ElementOptions } from './index'; +import type { ComponentOptions, ElementProps } from './index'; -export type TableOptions = ComponentOptions; +export type TableOptions = ComponentOptions; -export type TablePropsOptions = ElementOptions - -export type TableProps = ElementOptions +export type TableProps = ElementProps export type TableStyleOverrideOptions = { root?: string; }; -export type TableCellOptions = ComponentOptions; - -export type TableCellPropsOptions = ElementOptions +export type TableCellOptions = ComponentOptions; -export type TableCellProps = ElementOptions +export type TableCellProps = ElementProps export type TableCellStyleOverrideOptions = { root?: string; }; -export type TableHeaderCellOptions = ComponentOptions; - -export type TableHeaderCellPropsOptions = ElementOptions +export type TableHeaderCellOptions = ComponentOptions; -export type TableHeaderCellProps = ElementOptions +export type TableHeaderCellProps = ElementProps export type TableHeaderCellStyleOverrideOptions = { root?: string; }; -export type TableRowOptions = ComponentOptions; +export type TableRowOptions = ComponentOptions; -export type TableRowPropsOptions = ElementOptions - -export type TableRowProps = ElementOptions +export type TableRowProps = ElementProps export type TableRowStyleOverrideOptions = { root?: string; }; -export type TableBodyOptions = ComponentOptions; - -export type TableBodyPropsOptions = ElementOptions +export type TableBodyOptions = ComponentOptions; -export type TableBodyProps = ElementOptions +export type TableBodyProps = ElementProps export type TableBodyStyleOverrideOptions = { root?: string; }; -export type TableHeadOption = ComponentOptions; - -export type TableHeadPropsOptions = ElementOptions +export type TableHeadOption = ComponentOptions; -export type TableHeadProps = ElementOptions +export type TableHeadProps = ElementProps export type TableHeadStyleOverrideOptions = { root?: string; diff --git a/src/lib/types/tabs.ts b/src/lib/types/tabs.ts index e8caa0f..49380dd 100644 --- a/src/lib/types/tabs.ts +++ b/src/lib/types/tabs.ts @@ -1,12 +1,12 @@ -import type { ComponentOptions, ElementOptions } from './index'; +import type { ComponentOptions, ElementProps } from './index'; /* Tab Group */ -export type TabGroupOptions = ElementOptions & { - defaultProps?: TabGroupPropsOptions; +export type TabGroupOptions = ElementProps & { + defaultProps?: TabGroupProps; styleOverrides?: any; }; -export type TabGroupProps = ElementOptions & { +export type TabGroupProps = ElementProps & { defaultIndex?: number; /** Whether the orientation of the `TabList` is vertical instead of horizontal */ vertical?: boolean; @@ -18,40 +18,24 @@ export type TabGroupProps = ElementOptions & { manual?: boolean; }; -export type TabGroupPropsOptions = ElementOptions & { - defaultIndex?: number; - vertical?: boolean; - manual?: boolean; -}; - /* Tab List */ -export type TabListOptions = ComponentOptions; - -export type TabListPropsOptions = ElementOptions; +export type TabListOptions = ComponentOptions; -export type TabListProps = ElementOptions; +export type TabListProps = ElementProps; /* Tab */ -export type TabOptions = ComponentOptions; +export type TabOptions = ComponentOptions; -export type TabPropsOptions = ElementOptions & { - disabled?: boolean; -}; - -export type TabProps = ElementOptions & { +export type TabProps = ElementProps & { disabled?: boolean; }; /* Tab Panels */ -export type TabPanelsOptions = ComponentOptions; +export type TabPanelsOptions = ComponentOptions; -export type TabPanelsPropsOptions = ElementOptions; - -export type TabPanelsProps = ElementOptions; +export type TabPanelsProps = ElementProps; /* Tab Panel */ -export type TabPanelOptions = ComponentOptions; - -export type TabPanelPropsOptions = ElementOptions; +export type TabPanelOptions = ComponentOptions; -export type TabPanelProps = ElementOptions; +export type TabPanelProps = ElementProps; diff --git a/src/lib/types/typography.ts b/src/lib/types/typography.ts index 160be64..5808ab1 100644 --- a/src/lib/types/typography.ts +++ b/src/lib/types/typography.ts @@ -1,26 +1,35 @@ -import type { ComponentOptions, ElementOptions } from './index'; +import type { ComponentOptions, ElementProps} from './index'; -export type TypographyOptions = ComponentOptions; +export type TypographyOptions = ComponentOptions; -export type TypographyPropsOptions = ElementOptions & { - element?: TypographyElement; - variant?: TypographyVariant; +export type TypographyProps = ElementProps& { + size?: TypographySize; + style?: TypographyStyle; }; -export type TypographyProps = ElementOptions & { - element?: TypographyElement; - variant?: TypographyVariant; -}; +export type TypographyStyle = "display" | "headline" | "title" | "label" | "body"; +export type TypographySize = "small" | "medium" | "large"; -export type TypographyElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'; -export type TypographyVariant = - | 'h1' - | 'h2' - | 'h3' - | 'h4' - | 'h5' - | 'h6' - | 'subtitle1' - | 'subtitle2' - | 'body1' - | 'body2'; +export type TypographyStylesOverrides = { + root?: string; + display?: string; + headline?: string; + title?: string; + label?: string; + body?: string; + displayLarge?: string; + headlineLarge?: string; + titleLarge?: string; + labelLarge?: string; + bodyLarge?: string; + displayMedium?: string; + headlineMedium?: string; + titleMedium?: string; + labelMedium?: string; + bodyMedium?: string; + displaySmall?: string; + headlineSmall?: string; + titleSmall?: string; + labelSmall?: string; + bodySmall?: string; +}; diff --git a/src/lib/utils/deriveTypographyElement.ts b/src/lib/utils/deriveTypographyElement.ts index b2bf637..a03e351 100644 --- a/src/lib/utils/deriveTypographyElement.ts +++ b/src/lib/utils/deriveTypographyElement.ts @@ -1,31 +1,21 @@ -import type { TypographyElement, TypographyVariant } from '../types'; +import type { TypographyProps } from '../types'; export default function deriveTypographyElement( - element: TypographyElement, - variant: TypographyVariant + element: TypographyProps["element"], + style: TypographyProps["style"] ) { if (!element) { - switch (variant) { - case 'h1': - return 'h1'; - case 'h2': - return 'h2'; - case 'h3': - return 'h3'; - case 'h4': - return 'h4'; - case 'h5': - return 'h5'; - case 'h6': - return 'h6'; - case 'subtitle1': - return 'p'; - case 'subtitle2': - return 'p'; - case 'body1': - return 'p'; - case 'body2': - return 'p'; + switch (style) { + case 'display': + return "h1"; + case 'headline': + return "h2"; + case 'title': + return 'h3' + case 'label': + return "span"; + case 'body': + return "p" default: return 'span'; } diff --git a/src/lib/utils/typographyVariant.ts b/src/lib/utils/typographyVariant.ts index 64d1552..eb07904 100644 --- a/src/lib/utils/typographyVariant.ts +++ b/src/lib/utils/typographyVariant.ts @@ -1,28 +1,38 @@ -export default function typographyVariant(variant: string) { - switch (variant) { - case 'h1': - return 'text-6xl font-bold'; - case 'h2': - return 'text-5xl font-bold'; - case 'h3': - return 'text-4xl font-bold'; - case 'h4': - return 'text-3xl font-bold'; - case 'h5': - return 'text-2xl font-bold'; - case 'h6': - return 'text-xl font-bold'; - case 'subtitle1': - return 'text-lg text-accent-600'; - case 'subtitle2': - return 'text-xs font-bold text-accent-600 uppercase'; - case 'body1': - return 'text-md'; - case 'body2': - return 'text-sm'; - case 'caption': - return 'text-sm text-gray-600'; - default: - return ''; +import type { TypographyProps, TypographyStylesOverrides } from '../types'; +import { twMerge } from 'tailwind-merge'; + +function themeStyles(style: TypographyProps["style"], size: TypographyProps["size"], styleOverrides: TypographyStylesOverrides) { + if (style === "display") { + if (size === "large") return `${styleOverrides.display} text-7xl text-medium ${styleOverrides.displayLarge}` + if (size === "medium") return `${styleOverrides.display} text-6xl text-medium ${styleOverrides.displayMedium}` + if (size === "small") return `${styleOverrides.display} text-5xl text-medium ${styleOverrides.displaySmall}` } + if (style === "headline") { + if (size === "large") return `${styleOverrides.headline} text-4xl text-medium ${styleOverrides.headlineLarge}` + if (size === `medium`) return `${styleOverrides.headline} text-3xl text-medium ${styleOverrides.headlineMedium}` + if (size === `small`) return `${styleOverrides.headline} text-2xl text-medium ${styleOverrides.headlineSmall}` + } + if (style === "title") { + if (size === "large") return `${styleOverrides.title} text-xl ${styleOverrides.titleLarge}` + if (size === "medium") return `${styleOverrides.title} text-lg text-medium ${styleOverrides.titleMedium}` + if (size === "small") return `${styleOverrides.title} text-base text-medium ${styleOverrides.titleSmall}` + } + if (style === "label") { + if (size === "large") return `${styleOverrides.label} text-base text-medium ${styleOverrides.labelLarge}` + if (size === "medium") return `${styleOverrides.label} text-sm text-medium ${styleOverrides.labelMedium}` + if (size === "small") return `${styleOverrides.label} text-xs text-medium ${styleOverrides.labelSmall}` + } + if (style === "body") { + if (size === "large") return `${styleOverrides.body} text-lg ${styleOverrides.bodyLarge}` + if (size === "medium") return `${styleOverrides.body} text-base ${styleOverrides.bodyMedium}` + if (size === "small") return `${styleOverrides.body} text-sm ${styleOverrides.bodySmall}` + } +} +export default function typographyStyle( + style: TypographyProps["style"], + size: TypographyProps["size"], + styleOverrides: TypographyStylesOverrides, + _class?: string +) { + return twMerge(themeStyles(style, size, styleOverrides), _class) } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 788aac6..d360f7f 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,11 +1,9 @@ -
- {#if isMobile} - +
+ - {:else} - + - {/if}
diff --git a/src/routes/components/button/+page.svelte b/src/routes/components/button/+page.svelte index ffb2f8b..e26d884 100644 --- a/src/routes/components/button/+page.svelte +++ b/src/routes/components/button/+page.svelte @@ -1,101 +1,99 @@ - - Buttons - They come in three variants — Contained, Outlined and Text - - - - - - - - - Contained - The contained button comes in three different sizes and three default colors - - - - - Small - - - - - - - - - Medium - - - - - - - - - Large - - - - - - - + + + Buttons + They come in three variants — Contained, Outlined and Text + + + + + + - - - - - Outlined - The outlined button comes in three different sizes and three default colors - - - - - Small - - - - - - + + + Contained + + The filled button comes in three different sizes and three default colors + - - Medium - - - - - - - - - Large - - - - - - + + + Small + + + + + + + + Medium + + + + + + + + Large + + + + + + + + + + + + Outlined + + The outlined button comes in three different sizes and three default colors + + + + Small + + + + + + + + Medium + + + + + + + + Large + + + + + + + + - - - + + + + diff --git a/src/routes/components/card/+page.svelte b/src/routes/components/card/+page.svelte index fe3baca..5ef42b2 100644 --- a/src/routes/components/card/+page.svelte +++ b/src/routes/components/card/+page.svelte @@ -1,6 +1,5 @@ - - Card - + + + + Card + + + + + + + diff --git a/src/routes/components/chip/+page.svelte b/src/routes/components/chip/+page.svelte index a7344ee..3a7d587 100644 --- a/src/routes/components/chip/+page.svelte +++ b/src/routes/components/chip/+page.svelte @@ -10,7 +10,7 @@ - + Small diff --git a/src/routes/components/typography/+page.svelte b/src/routes/components/typography/+page.svelte index cc54e38..05a2591 100644 --- a/src/routes/components/typography/+page.svelte +++ b/src/routes/components/typography/+page.svelte @@ -1,20 +1,50 @@ - - - Heading 1 - Heading 2 - Heading 3 - Heading 4 - Heading 5 - Heading 6 - Subtitle 1 - Subtitle 2 - Body 1 - Body 2 - + + + Typography + + + + + + Typography styles + + + + Display Large + Display Medium + Display Small + + Headline Large + Headline Medium + Headline Small + + Title Large + Title Medium + Title Small + + Label Large + Label Medium + Label Small + + Body Large + Body Medium + Body Small + + + + + + + diff --git a/tsconfig.json b/tsconfig.json index e24476f..eb2ec41 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,22 +1,29 @@ { - "extends": "./.svelte-kit/tsconfig.json", - "compilerOptions": { - "baseUrl": ".", - "paths": { - "$lib": ["./src/lib"], - "$lib/*": ["./src/lib/*"] - }, - "allowJs": true, - "checkJs": true, - "esModuleInterop": true, - "forceConsistentCasingInFileNames": true, - "lib": ["es2020", "DOM"], - "moduleResolution": "node", - "module": "es2020", - "resolveJsonModule": true, - "skipLibCheck": true, - "sourceMap": true, - "strict": true, - "target": "es2020" - } + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "$lib": [ + "src/lib" + ], + "$lib/*": [ + "src/lib/*" + ] + }, + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "lib": [ + "es2020", + "DOM" + ], + "moduleResolution": "node", + "module": "es2020", + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "target": "es2020" + } }