├── .gitignore ├── .prettierrc.json ├── .vscode └── settings.json ├── README.md ├── package.json ├── public ├── favicon.png ├── index.html └── shiba.jpg ├── rollup.config.js ├── snowpack.config.js ├── snowpack ├── favicon.png ├── index.html └── shiba.jpg ├── src ├── App.svelte ├── BrandTailwind.svg ├── Components │ ├── Accordion │ │ ├── Accordion.svelte │ │ └── AccordionItem.svelte │ ├── Breadcrumb │ │ ├── Breadcrumb.ts │ │ ├── BreadcrumbContainer.svelte │ │ └── BreadcrumbNavigator.svelte │ ├── Button │ │ ├── Button.svelte │ │ ├── IconButton.svelte │ │ └── Models │ │ │ ├── ButtonStyles.ts │ │ │ └── IconStyles.ts │ ├── Card │ │ ├── Card.svelte │ │ ├── CardPartStyles.ts │ │ └── CardStyles.ts │ ├── Checkbox │ │ ├── Checkbox.svelte │ │ └── CheckboxStyles.ts │ ├── Header │ │ ├── Header.svelte │ │ ├── HeaderPartStyle.ts │ │ └── HeaderStyle.ts │ ├── Page │ │ ├── Page.svelte │ │ ├── PageStyle.ts │ │ └── Table.svelte │ ├── RadioButton │ │ └── RadioButton.svelte │ ├── Select │ │ ├── MenuStyles.ts │ │ ├── Select.svelte │ │ ├── SelectOption.svelte │ │ ├── SelectOptionStyle.ts │ │ └── SelectStyle.ts │ ├── Slider │ │ └── Slider.svelte │ ├── Switch.svelte │ ├── Table │ │ ├── TablePartStyles.ts │ │ └── TableStyles.ts │ ├── TextField │ │ ├── TextField.svelte │ │ └── TextFieldStyles.ts │ └── Tooltip │ │ ├── Tooltip.svelte │ │ └── TooltipStyles.ts ├── IStyle.ts ├── Markup.svelte ├── StyleDefinitions │ ├── IPageTheme.ts │ ├── PageThemes │ │ ├── BlankSlateStyles.ts │ │ ├── DefaultStyles.ts │ │ ├── GetHubStyles.ts │ │ └── TwitterishDarkStyles.ts │ └── SveltailStyles.ts ├── StyleScreens │ ├── Button │ │ ├── ButtonMenu.svelte │ │ └── ButtonStyler.svelte │ ├── Card │ │ ├── CardBodyStyler.svelte │ │ ├── CardContainerStyler.svelte │ │ ├── CardFooterStyler.svelte │ │ ├── CardHeaderStyler.svelte │ │ └── CardMenu.svelte │ ├── CheckboxStyler.svelte │ ├── Header │ │ ├── HeaderBrandStyler.svelte │ │ ├── HeaderContainerStyler.svelte │ │ ├── HeaderIconStyler.svelte │ │ ├── HeaderMenu.svelte │ │ └── HeaderMenuStyler.svelte │ ├── Home.svelte │ ├── Page │ │ └── PageStyler.svelte │ ├── Select │ │ ├── SelectButtonStyler.svelte │ │ ├── SelectMenu.svelte │ │ ├── SelectMenuItemStyler.svelte │ │ └── SelectMenuStyler.svelte │ ├── StyleGroup.svelte │ ├── StyleMenuButton.svelte │ ├── Table │ │ ├── TableContainerStyler.svelte │ │ ├── TableHeaderStyler.svelte │ │ ├── TableMenu.svelte │ │ └── TableRowStyler.svelte │ ├── TextFieldStyler.svelte │ └── TooltipStyler.svelte ├── Sveltail.svelte ├── TailwindControls │ ├── Border │ │ ├── BorderRadius │ │ │ ├── BorderRadiusSelect.svelte │ │ │ └── borderRadius.ts │ │ ├── BorderSelect.svelte │ │ ├── BorderStyleSelect.svelte │ │ ├── BorderStyles.ts │ │ └── BorderWidth │ │ │ ├── BorderWidthSelect.svelte │ │ │ └── borderWidth.ts │ ├── Color │ │ ├── ColorMenu.svelte │ │ ├── ColorSelect.svelte │ │ ├── ColorStyle.ts │ │ ├── ColorsSelects.svelte │ │ └── color.ts │ ├── Divider │ │ ├── DividerSelect.svelte │ │ ├── DividerStyleSelect.svelte │ │ ├── DividerStyles.ts │ │ └── DividerWidthSelect.svelte │ ├── Effects │ │ ├── BoxShadowSelect.svelte │ │ ├── EffectsSelect.svelte │ │ ├── EffectsStyle.ts │ │ └── OpacitySelect.svelte │ ├── Font │ │ ├── FontFamilySelect.svelte │ │ ├── FontItalicSelect.svelte │ │ ├── FontSelect.svelte │ │ ├── FontSizeSelect.svelte │ │ ├── FontStyles.ts │ │ ├── FontWeightSelect.svelte │ │ └── font.ts │ ├── Placeholder │ │ ├── PlaceholderSelect.svelte │ │ └── PlaceholderStyles.ts │ ├── Ring │ │ ├── RingOffsetWidthSelect.svelte │ │ ├── RingSelect.svelte │ │ ├── RingStyles.ts │ │ └── RingWidthSelect.svelte │ ├── Sizing │ │ ├── HeightSelect.svelte │ │ ├── MaxHeightSelect.svelte │ │ ├── MaxWidthSelect.svelte │ │ ├── MinHeightSelect.svelte │ │ ├── MinWidthSelect.svelte │ │ ├── SizingSelect.svelte │ │ ├── SizingStyles.ts │ │ └── WidthSelect.svelte │ ├── Spacing │ │ ├── MarginSelect.svelte │ │ ├── PaddingSelect.svelte │ │ ├── SizeSelect.svelte │ │ ├── SpacingSelect.svelte │ │ └── SpacingStyles.ts │ ├── Transform │ │ ├── TransformOriginSelect.svelte │ │ ├── TransformRotateSelect.svelte │ │ ├── TransformScaleNumberSelect.svelte │ │ ├── TransformScaleSelect.svelte │ │ ├── TransformSelect.svelte │ │ ├── TransformSkewNumberSelect.svelte │ │ ├── TransformSkewSelect.svelte │ │ ├── TransformStyles.ts │ │ ├── TransformTranslateNumberSelect.svelte │ │ └── TransformTranslateSelect.svelte │ └── Transition │ │ ├── TransitionDelaySelect.svelte │ │ ├── TransitionDurationSelect.svelte │ │ ├── TransitionPropertySelect.svelte │ │ ├── TransitionSelect.svelte │ │ ├── TransitionStyles.ts │ │ └── TransitionTimingSelect.svelte ├── Variant.ts ├── hmr.js ├── main.ts ├── store.ts └── utils.ts ├── svelte.config.js ├── tailwind.config.js ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | build/ 6 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "[svelte]": { 3 | "editor.defaultFormatter": "svelte.svelte-vscode" 4 | } 5 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SvelTail 2 | 3 | This is a project built using [Svelte](https://svelte.dev), [TailwindCSS](https://tailwindcss.com/), and TypeScript. Its' indended purpose is to give you an area to play with TailwindCSS classes so that you can easily create a unique look for your TailwindCSS website. 4 | 5 | _Note that you will need to have [Node.js](https://nodejs.org) installed._ 6 | 7 | ## Get started 8 | 9 | Install the dependencies... 10 | 11 | ```bash 12 | yarn install 13 | ``` 14 | 15 | ...then start [Snowpack](https://www.snowpack.dev/): 16 | 17 | ```bash 18 | yarn dev 19 | ``` 20 | 21 | Navigate to [localhost:8080](http://localhost:8080). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes. 22 | 23 | By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`. 24 | 25 | If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense. 26 | 27 | ## Building and running in production mode 28 | 29 | To create an optimised version of the app: 30 | 31 | ```bash 32 | yarn build 33 | ``` 34 | 35 | You can run the newly built app with `yarn start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com). 36 | 37 | ## Single-page app mode 38 | 39 | By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere. 40 | 41 | If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for _any_ path. You can make it so by editing the `"start"` command in package.json: 42 | 43 | ```js 44 | "start": "sirv public --single" 45 | ``` 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "build": "rollup -c", 6 | "dev": "snowpack dev", 7 | "start": "snowpack dev", 8 | "validate": "svelte-check" 9 | }, 10 | "devDependencies": { 11 | "@snowpack/plugin-typescript": "^1.1.1", 12 | "@snowpack/plugin-webpack": "^2.2.0", 13 | "@snowpack/plugin-svelte": "^3.4.1", 14 | "@snowpack/plugin-dotenv": "^2.0.5", 15 | "@tsconfig/svelte": "^1.0.10", 16 | "@types/lodash": "^4.14.166", 17 | "@types/snowpack-env": "^2.3.3", 18 | "autoprefixer": "^10.0.4", 19 | "lodash": "^4.17.20", 20 | "postcss": "^8.1.8", 21 | "snowpack": "^2.18.5", 22 | "svelte": "^3.31.0", 23 | "svelte-check": "^1.0.0", 24 | "svelte-preprocess": "^4.6.1", 25 | "tabler-icons-svelte": "^1.4.0", 26 | "tailwindcss": "^2.0.2", 27 | "tailwindcss-filters": "^3.0.0", 28 | "tslib": "^2.0.0", 29 | "typescript": "^4.1.2", 30 | "@rollup/plugin-typescript": "^8.1.0", 31 | "rollup-plugin-css-only": "^3.1.0", 32 | "rollup-plugin-terser": "^7.0.2" 33 | }, 34 | "dependencies": { 35 | "sirv-cli": "^1.0.0" 36 | } 37 | } -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmsunseri/sveltail/5321b80ece862791161d1056c4a192e7c05fbc9e/public/favicon.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sveltail - TailwindCSS Styling Lab 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /public/shiba.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmsunseri/sveltail/5321b80ece862791161d1056c4a192e7c05fbc9e/public/shiba.jpg -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import commonjs from '@rollup/plugin-commonjs'; 3 | import resolve from '@rollup/plugin-node-resolve'; 4 | import { terser } from 'rollup-plugin-terser'; 5 | import sveltePreprocess from 'svelte-preprocess'; 6 | import typescript from '@rollup/plugin-typescript'; 7 | import css from 'rollup-plugin-css-only'; 8 | 9 | export default { 10 | input: 'src/main.ts', 11 | output: { 12 | sourcemap: true, 13 | format: 'iife', 14 | name: 'app', 15 | file: 'public/build/bundle.js', 16 | }, 17 | plugins: [ 18 | svelte({ 19 | preprocess: sveltePreprocess({ 20 | // https://github.com/kaisermann/svelte-preprocess/#user-content-options 21 | sourceMap: false, 22 | postcss: { 23 | plugins: [require('tailwindcss'), require('autoprefixer')], 24 | }, 25 | }), 26 | compilerOptions: { 27 | // enable run-time checks when not in production 28 | dev: false, 29 | }, 30 | }), 31 | // we'll extract any component CSS out into 32 | // a separate file - better for performance 33 | css({ output: 'bundle.css' }), 34 | 35 | // If you have external dependencies installed from 36 | // npm, you'll most likely need these plugins. In 37 | // some cases you'll need additional configuration - 38 | // consult the documentation for details: 39 | // https://github.com/rollup/plugins/tree/master/packages/commonjs 40 | resolve({ 41 | browser: true, 42 | dedupe: ['svelte'], 43 | }), 44 | commonjs(), 45 | typescript({ 46 | sourceMap: false, 47 | inlineSources: false, 48 | include: ['src/**/*.ts', new RegExp('shared\\/(.)+\\/(.+.ts)')], 49 | }), 50 | terser(), 51 | ], 52 | watch: { 53 | clearScreen: false, 54 | }, 55 | }; 56 | -------------------------------------------------------------------------------- /snowpack.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import("snowpack").SnowpackUserConfig } */ 2 | module.exports = { 3 | mount: { 4 | snowpack: { url: '/', static: true }, 5 | src: { url: '/dist' }, 6 | }, 7 | plugins: [ 8 | '@snowpack/plugin-svelte', 9 | '@snowpack/plugin-dotenv', 10 | '@snowpack/plugin-typescript', 11 | ], 12 | install: [ 13 | /* ... */ 14 | ], 15 | installOptions: { 16 | /* ... */ 17 | }, 18 | devOptions: { 19 | /* ... */ 20 | }, 21 | buildOptions: { 22 | /* ... */ 23 | }, 24 | alias: { 25 | /* ... */ 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /snowpack/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmsunseri/sveltail/5321b80ece862791161d1056c4a192e7c05fbc9e/snowpack/favicon.png -------------------------------------------------------------------------------- /snowpack/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sveltail - TailwindCSS Styling Lab 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /snowpack/shiba.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmsunseri/sveltail/5321b80ece862791161d1056c4a192e7c05fbc9e/snowpack/shiba.jpg -------------------------------------------------------------------------------- /src/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 21 | 22 |
23 |
25 |
26 |
27 | 28 | SvelTail 29 | 30 |
31 |
32 | 33 | 34 | 35 |
36 |
37 | 38 | 39 | 40 |
41 | 42 | buy me a coffee button 46 | 47 |
48 |
49 |
50 |
51 |
52 | 53 |
54 |
55 | 56 |
57 |
58 |
59 |
60 |
61 | 62 |
63 |
64 |
65 | -------------------------------------------------------------------------------- /src/BrandTailwind.svg: -------------------------------------------------------------------------------- 1 | 2 | 26 | 28 | 29 | 31 | image/svg+xml 32 | 34 | 35 | 36 | 37 | 38 | 40 | 60 | 63 | 64 | 69 | 76 | 83 | 87 | 88 | -------------------------------------------------------------------------------- /src/Components/Accordion/Accordion.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 |
24 | 25 |
26 | -------------------------------------------------------------------------------- /src/Components/Accordion/AccordionItem.svelte: -------------------------------------------------------------------------------- 1 | 60 | 61 |
62 | 75 | {#if isSelected} 76 |
77 | 78 |
79 | {/if} 80 |
81 | -------------------------------------------------------------------------------- /src/Components/Breadcrumb/Breadcrumb.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponent } from 'svelte'; 2 | 3 | interface IBreadcrumb { 4 | text: string; 5 | component: SvelteComponent; 6 | } 7 | 8 | interface IBreadcrumbEvent { 9 | text: string; 10 | component: SvelteComponent; 11 | breadcrumbs?: IBreadcrumb[]; 12 | props: any; 13 | } 14 | 15 | export type { IBreadcrumb, IBreadcrumbEvent }; 16 | -------------------------------------------------------------------------------- /src/Components/Breadcrumb/BreadcrumbContainer.svelte: -------------------------------------------------------------------------------- 1 | 34 | 35 |
36 | 37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /src/Components/Breadcrumb/BreadcrumbNavigator.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 |
23 | {#each breadcrumbs as crumb, index} 24 | {#if index !== 0} 25 |
29 | 30 |
31 |
crumbClicked(index)}> 36 | {crumb.text} 37 |
38 | {:else} 39 |
crumbClicked(index)}> 42 | {crumb.text} 43 |
44 | {/if} 45 | {/each} 46 |
47 | -------------------------------------------------------------------------------- /src/Components/Button/Button.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 32 | -------------------------------------------------------------------------------- /src/Components/Button/IconButton.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | -------------------------------------------------------------------------------- /src/Components/Button/Models/ButtonStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../../IStyle'; 2 | import type { BorderStyles } from '../../../TailwindControls/Border/BorderStyles'; 3 | import type { ColorStyle } from '../../../TailwindControls/Color/ColorStyle'; 4 | import type { EffectsStyle } from '../../../TailwindControls/Effects/EffectsStyle'; 5 | import { FontStyles } from '../../../TailwindControls/Font/FontStyles'; 6 | import { RingStyles } from '../../../TailwindControls/Ring/RingStyles'; 7 | import { SizingStyles } from '../../../TailwindControls/Sizing/SizingStyles'; 8 | import { SpacingStyles } from '../../../TailwindControls/Spacing/SpacingStyles'; 9 | import type { TransformStyles } from '../../../TailwindControls/Transform/TransformStyles'; 10 | import { TransitionStyles } from '../../../TailwindControls/Transition/TransitionStyles'; 11 | import { getStyles } from '../../../utils'; 12 | import { IconStyles } from './IconStyles'; 13 | 14 | class ButtonStyles implements IStyle { 15 | font: FontStyles; 16 | color?: ColorStyle[]; 17 | icon: IconStyles; 18 | border: BorderStyles[]; 19 | effects: EffectsStyle[]; 20 | spacing: SpacingStyles; 21 | size: SizingStyles; 22 | ring: RingStyles; 23 | transform: TransformStyles[]; 24 | transition: TransitionStyles; 25 | getMarkup = (): string => { 26 | return ``; 31 | }; 32 | 33 | /** 34 | * 35 | */ 36 | constructor(init?: Partial) { 37 | this.font = new FontStyles(); 38 | this.border = []; 39 | this.icon = new IconStyles(); 40 | this.effects = []; 41 | this.spacing = new SpacingStyles(); 42 | this.size = new SizingStyles(); 43 | this.ring = new RingStyles(); 44 | this.transform = []; 45 | this.transition = new TransitionStyles(); 46 | this.color = []; 47 | 48 | Object.assign(this, init); 49 | } 50 | 51 | toStyles = () => 52 | getStyles([ 53 | this.color, 54 | this.font, 55 | this.border, 56 | this.effects, 57 | this.spacing, 58 | this.size, 59 | this.ring, 60 | this.transform, 61 | this.transition, 62 | ]); 63 | } 64 | 65 | export { ButtonStyles }; 66 | -------------------------------------------------------------------------------- /src/Components/Button/Models/IconStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../../IStyle'; 2 | import type { ColorStyle } from '../../../TailwindControls/Color/ColorStyle'; 3 | import { getStyles } from '../../../utils'; 4 | 5 | class IconStyles implements IStyle { 6 | color?: ColorStyle[]; 7 | size?: number; 8 | stroke?: number; 9 | getMarkup = (): string => { 10 | return this.toStyles(); 11 | }; 12 | 13 | constructor(init?: Partial) { 14 | this.color = []; 15 | this.size = 24; 16 | this.stroke = 3; 17 | Object.assign(this, init); 18 | } 19 | 20 | toStyles = () => getStyles([this.color]); 21 | } 22 | 23 | export { IconStyles }; 24 | -------------------------------------------------------------------------------- /src/Components/Card/Card.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | {#if $$slots.header} 9 |
10 | 11 |
12 | {/if} 13 | 14 |
15 | 16 |
17 | 18 | {#if $$slots.footer} 19 |
20 | 21 |
22 | {/if} 23 |
24 | -------------------------------------------------------------------------------- /src/Components/Card/CardPartStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import type { BorderStyles } from '../../TailwindControls/Border/BorderStyles'; 3 | import type { ColorStyle } from '../../TailwindControls/Color/ColorStyle'; 4 | import { FontStyles } from '../../TailwindControls/Font/FontStyles'; 5 | import { SpacingStyles } from '../../TailwindControls/Spacing/SpacingStyles'; 6 | import type { TransformStyles } from '../../TailwindControls/Transform/TransformStyles'; 7 | import { TransitionStyles } from '../../TailwindControls/Transition/TransitionStyles'; 8 | import { getStyles } from '../../utils'; 9 | 10 | class CardPartStyles implements IStyle { 11 | font?: FontStyles; 12 | color?: ColorStyle[]; 13 | border?: BorderStyles[]; 14 | spacing?: SpacingStyles; 15 | transform?: TransformStyles[]; 16 | transition?: TransitionStyles; 17 | getMarkup = (): string => { 18 | return this.toStyles(); 19 | }; 20 | 21 | constructor(init?: Partial) { 22 | this.font = new FontStyles(); 23 | this.border = []; 24 | this.spacing = new SpacingStyles(); 25 | this.color = []; 26 | this.transform = []; 27 | this.transition = new TransitionStyles(); 28 | Object.assign(this, init); 29 | } 30 | 31 | toStyles = () => 32 | getStyles([ 33 | this.color, 34 | this.font, 35 | this.border, 36 | this.spacing, 37 | this.transform, 38 | this.transition, 39 | ]); 40 | } 41 | 42 | export { CardPartStyles }; 43 | -------------------------------------------------------------------------------- /src/Components/Card/CardStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import type { BorderStyles } from '../../TailwindControls/Border/BorderStyles'; 3 | import type { ColorStyle } from '../../TailwindControls/Color/ColorStyle'; 4 | import type { EffectsStyle } from '../../TailwindControls/Effects/EffectsStyle'; 5 | import { SpacingStyles } from '../../TailwindControls/Spacing/SpacingStyles'; 6 | import type { TransformStyles } from '../../TailwindControls/Transform/TransformStyles'; 7 | import { TransitionStyles } from '../../TailwindControls/Transition/TransitionStyles'; 8 | import { getStyles } from '../../utils'; 9 | import { CardPartStyles } from './CardPartStyles'; 10 | 11 | class CardStyles implements IStyle { 12 | color?: ColorStyle[]; 13 | border?: BorderStyles[]; 14 | effects?: EffectsStyle[]; 15 | spacing?: SpacingStyles; 16 | header?: CardPartStyles; 17 | footer?: CardPartStyles; 18 | container?: CardPartStyles; 19 | transform?: TransformStyles[]; 20 | transition?: TransitionStyles; 21 | getMarkup = (): string => { 22 | return `
23 |
24 | Card Header 25 |
26 |
27 | body content 28 |
29 |
30 | Some footer content! 31 |
32 |
`; 33 | }; 34 | 35 | constructor(init?: Partial) { 36 | this.border = []; 37 | this.effects = []; 38 | this.spacing = new SpacingStyles(); 39 | this.header = new CardPartStyles(); 40 | this.footer = new CardPartStyles(); 41 | this.container = new CardPartStyles(); 42 | this.transform = []; 43 | this.color = []; 44 | this.transition = new TransitionStyles(); 45 | Object.assign(this, init); 46 | } 47 | 48 | toStyles = () => 49 | getStyles([ 50 | this.color, 51 | this.border, 52 | this.effects, 53 | this.spacing, 54 | this.transform, 55 | this.transition, 56 | ]); 57 | } 58 | 59 | export { CardStyles }; 60 | -------------------------------------------------------------------------------- /src/Components/Checkbox/Checkbox.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | (checked = !checked)}> 11 | {#if checked}✓{/if} 12 | 13 | -------------------------------------------------------------------------------- /src/Components/Checkbox/CheckboxStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import type { BorderStyles } from '../../TailwindControls/Border/BorderStyles'; 3 | import type { ColorStyle } from '../../TailwindControls/Color/ColorStyle'; 4 | import type { EffectsStyle } from '../../TailwindControls/Effects/EffectsStyle'; 5 | import { FontStyles } from '../../TailwindControls/Font/FontStyles'; 6 | import { SizingStyles } from '../../TailwindControls/Sizing/SizingStyles'; 7 | import { SpacingStyles } from '../../TailwindControls/Spacing/SpacingStyles'; 8 | import type { TransformStyles } from '../../TailwindControls/Transform/TransformStyles'; 9 | import { TransitionStyles } from '../../TailwindControls/Transition/TransitionStyles'; 10 | import { getStyles } from '../../utils'; 11 | 12 | class CheckboxStyles implements IStyle { 13 | color?: ColorStyle[]; 14 | font: FontStyles; 15 | border: BorderStyles[]; 16 | effects: EffectsStyle[]; 17 | spacing: SpacingStyles; 18 | size: SizingStyles; 19 | transform: TransformStyles[]; 20 | transition: TransitionStyles; 21 | getMarkup = (): string => { 22 | return ` 23 | ✓ 24 | `; 25 | }; 26 | 27 | constructor(init?: Partial) { 28 | this.border = []; 29 | this.font = new FontStyles(); 30 | this.effects = []; 31 | this.spacing = new SpacingStyles(); 32 | this.size = new SizingStyles(); 33 | this.transform = []; 34 | this.color = []; 35 | this.transition = new TransitionStyles(); 36 | Object.assign(this, init); 37 | } 38 | 39 | toStyles = () => 40 | getStyles([ 41 | this.color, 42 | this.border, 43 | this.effects, 44 | this.spacing, 45 | this.size, 46 | this.font, 47 | this.transform, 48 | this.transition, 49 | ]); 50 | } 51 | 52 | export { CheckboxStyles }; 53 | -------------------------------------------------------------------------------- /src/Components/Header/Header.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | {#if $$slots.icon} 9 |
10 | 11 |
12 | {/if} 13 | {#if $$slots.brand} 14 |
15 | 16 |
17 | {:else} 18 |
19 | {/if} 20 | {#if $$slots.menu} 21 |
22 | 23 |
24 | {/if} 25 |
26 | -------------------------------------------------------------------------------- /src/Components/Header/HeaderPartStyle.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import type { BorderStyles } from '../../TailwindControls/Border/BorderStyles'; 3 | import type { ColorStyle } from '../../TailwindControls/Color/ColorStyle'; 4 | import type { EffectsStyle } from '../../TailwindControls/Effects/EffectsStyle'; 5 | import { FontStyles } from '../../TailwindControls/Font/FontStyles'; 6 | import { SizingStyles } from '../../TailwindControls/Sizing/SizingStyles'; 7 | import { SpacingStyles } from '../../TailwindControls/Spacing/SpacingStyles'; 8 | import type { TransformStyles } from '../../TailwindControls/Transform/TransformStyles'; 9 | import { TransitionStyles } from '../../TailwindControls/Transition/TransitionStyles'; 10 | import { getStyles } from '../../utils'; 11 | 12 | class HeaderPartStyle implements IStyle { 13 | font: FontStyles; 14 | color?: ColorStyle[]; 15 | size: SizingStyles; 16 | border: BorderStyles[]; 17 | effects: EffectsStyle[]; 18 | spacing: SpacingStyles; 19 | transform: TransformStyles[]; 20 | transition: TransitionStyles; 21 | getMarkup = (): string => { 22 | return this.toStyles(); 23 | }; 24 | 25 | constructor(init?: Partial) { 26 | this.font = new FontStyles(); 27 | this.border = []; 28 | this.size = new SizingStyles(); 29 | this.effects = []; 30 | this.spacing = new SpacingStyles(); 31 | this.transform = []; 32 | this.color = []; 33 | this.transition = new TransitionStyles(); 34 | 35 | Object.assign(this, init); 36 | } 37 | 38 | toStyles = () => 39 | getStyles([ 40 | this.color, 41 | this.font, 42 | this.border, 43 | this.effects, 44 | this.spacing, 45 | this.size, 46 | this.transform, 47 | this.transition, 48 | ]); 49 | } 50 | 51 | export { HeaderPartStyle }; 52 | -------------------------------------------------------------------------------- /src/Components/Header/HeaderStyle.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import type { BorderStyles } from '../../TailwindControls/Border/BorderStyles'; 3 | import type { ColorStyle } from '../../TailwindControls/Color/ColorStyle'; 4 | import type { EffectsStyle } from '../../TailwindControls/Effects/EffectsStyle'; 5 | import { FontStyles } from '../../TailwindControls/Font/FontStyles'; 6 | import { SizingStyles } from '../../TailwindControls/Sizing/SizingStyles'; 7 | import { SpacingStyles } from '../../TailwindControls/Spacing/SpacingStyles'; 8 | import type { TransformStyles } from '../../TailwindControls/Transform/TransformStyles'; 9 | import { TransitionStyles } from '../../TailwindControls/Transition/TransitionStyles'; 10 | import { getStyles } from '../../utils'; 11 | import { IconStyles } from '../Button/Models/IconStyles'; 12 | import { HeaderPartStyle } from './HeaderPartStyle'; 13 | 14 | class HeaderStyle implements IStyle { 15 | font: FontStyles; 16 | color?: ColorStyle[]; 17 | size: SizingStyles; 18 | border: BorderStyles[]; 19 | effects: EffectsStyle[]; 20 | spacing: SpacingStyles; 21 | transform: TransformStyles[]; 22 | transition: TransitionStyles; 23 | icon: IconStyles; 24 | brand: HeaderPartStyle; 25 | menu: HeaderPartStyle; 26 | getMarkup = (): string => { 27 | return `
28 |
29 | 36 |
37 |
App Title
38 |
39 | 40 | Account 41 | 42 |
43 |
`; 44 | }; 45 | 46 | constructor(init?: Partial) { 47 | this.font = new FontStyles(); 48 | this.border = []; 49 | this.size = new SizingStyles(); 50 | this.effects = []; 51 | this.spacing = new SpacingStyles(); 52 | this.transform = []; 53 | this.color = []; 54 | this.transition = new TransitionStyles(); 55 | this.icon = new IconStyles(); 56 | this.brand = new HeaderPartStyle(); 57 | this.menu = new HeaderPartStyle(); 58 | Object.assign(this, init); 59 | } 60 | 61 | toStyles = () => 62 | getStyles([ 63 | this.color, 64 | this.font, 65 | this.border, 66 | this.effects, 67 | this.spacing, 68 | this.size, 69 | this.transform, 70 | this.transition, 71 | ]); 72 | } 73 | 74 | export { HeaderStyle }; 75 | -------------------------------------------------------------------------------- /src/Components/Page/Page.svelte: -------------------------------------------------------------------------------- 1 | 25 | 26 |
27 |
28 |
29 | 32 |
33 |
Pet Finder
34 |
Account
35 |
36 |
37 |
38 |
39 |
40 | 41 | 42 | 45 | 46 | 47 | 58 |
59 | 60 | 68 |
I'm a tooltip!!!
69 | 70 |
71 |
72 |
Found Dogs:
73 | 74 | 75 | 76 | 77 |
78 | 79 |
Dog Profile
80 | 81 |
82 | Doge 83 |
84 |
Name: Doge
85 |
Gender: Female
86 |
DOB: Nov, 2 2005
87 |
88 | Bio: 89 |

90 | An Internet meme that became popular in 2013. The meme typically 91 | consists of a picture of a Shiba Inu dog accompanied by 92 | multicolored text in Comic Sans font in the foreground. 93 |

94 |
95 |
96 |
97 |
98 |
99 | 100 |
101 |
102 | 103 |
104 | 105 | 106 | -------------------------------------------------------------------------------- /src/Components/Page/PageStyle.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import { ColorStyle } from '../../TailwindControls/Color/ColorStyle'; 3 | import { FontStyles } from '../../TailwindControls/Font/FontStyles'; 4 | import { SpacingStyles } from '../../TailwindControls/Spacing/SpacingStyles'; 5 | import { TransitionStyles } from '../../TailwindControls/Transition/TransitionStyles'; 6 | import { getStyles } from '../../utils'; 7 | 8 | class PageStyle implements IStyle { 9 | font: FontStyles; 10 | color?: ColorStyle[]; 11 | spacing: SpacingStyles; 12 | transition: TransitionStyles; 13 | getMarkup = (): string => { 14 | return ` 15 | Your Content 16 | `; 17 | }; 18 | 19 | constructor(init?: Partial) { 20 | this.font = new FontStyles(); 21 | this.spacing = new SpacingStyles(); 22 | this.transition = new TransitionStyles(); 23 | this.color = [new ColorStyle()]; 24 | Object.assign(this, init); 25 | } 26 | toStyles = () => { 27 | return getStyles([this.color, this.font, this.spacing, this.transition]); 28 | }; 29 | } 30 | 31 | export { PageStyle }; 32 | -------------------------------------------------------------------------------- /src/Components/Page/Table.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |
9 |
11 |
Name
12 |
Type
13 |
Breed
14 |
Distance
15 |
16 |
18 | 19 |
Fido
20 |
Dog
21 |
Hound
22 |
10km
23 |
24 |
26 | 27 |
Doge
28 |
Dog
29 |
Shiba Inu
30 |
1km
31 |
32 |
34 | 35 |
Fifi
36 |
Dog
37 |
Poodle
38 |
7km
39 |
40 |
42 | 43 |
Gaston
44 |
Dog
45 |
French Bulldog
46 |
5km
47 |
48 |
50 | 51 |
Floyd
52 |
Dog
53 |
Pug
54 |
3km
55 |
56 |
57 | -------------------------------------------------------------------------------- /src/Components/RadioButton/RadioButton.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
8 | {#each options as option, index} 9 | 13 | 20 | {/each} 21 |
22 | -------------------------------------------------------------------------------- /src/Components/Select/MenuStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import type { BorderStyles } from '../../TailwindControls/Border/BorderStyles'; 3 | import type { ColorStyle } from '../../TailwindControls/Color/ColorStyle'; 4 | import { DividerStyles } from '../../TailwindControls/Divider/DividerStyles'; 5 | import type { EffectsStyle } from '../../TailwindControls/Effects/EffectsStyle'; 6 | import { FontStyles } from '../../TailwindControls/Font/FontStyles'; 7 | import { SizingStyles } from '../../TailwindControls/Sizing/SizingStyles'; 8 | import { SpacingStyles } from '../../TailwindControls/Spacing/SpacingStyles'; 9 | import type { TransformStyles } from '../../TailwindControls/Transform/TransformStyles'; 10 | import { TransitionStyles } from '../../TailwindControls/Transition/TransitionStyles'; 11 | import { getStyles } from '../../utils'; 12 | 13 | class MenuStyles implements IStyle { 14 | font: FontStyles; 15 | color?: ColorStyle[]; 16 | size: SizingStyles; 17 | border: BorderStyles[]; 18 | effects: EffectsStyle[]; 19 | spacing: SpacingStyles; 20 | divider: DividerStyles; 21 | transform: TransformStyles[]; 22 | transition: TransitionStyles; 23 | getMarkup = (): string => { 24 | return this.toStyles(); 25 | }; 26 | 27 | /** 28 | * 29 | */ 30 | constructor(init?: Partial) { 31 | this.font = new FontStyles(); 32 | this.border = []; 33 | this.size = new SizingStyles(); 34 | this.effects = []; 35 | this.spacing = new SpacingStyles(); 36 | this.divider = new DividerStyles(); 37 | this.transform = []; 38 | this.color = []; 39 | this.transition = new TransitionStyles(); 40 | Object.assign(this, init); 41 | } 42 | 43 | toStyles = () => 44 | getStyles([ 45 | this.color, 46 | this.font, 47 | this.border, 48 | this.effects, 49 | this.spacing, 50 | this.size, 51 | this.divider, 52 | this.transform, 53 | this.transition, 54 | ]); 55 | } 56 | 57 | export { MenuStyles }; 58 | -------------------------------------------------------------------------------- /src/Components/Select/Select.svelte: -------------------------------------------------------------------------------- 1 | 30 | 31 | 32 | 50 | {#if isMenuOpen} 51 |
54 | {#if !mustHaveValue} 55 |
56 | 65 |
66 | {/if} 67 | 68 |
69 | {/if} 70 | 71 | -------------------------------------------------------------------------------- /src/Components/Select/SelectOption.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 |
25 | 26 |
27 | -------------------------------------------------------------------------------- /src/Components/Select/SelectOptionStyle.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import type { ColorStyle } from '../../TailwindControls/Color/ColorStyle'; 3 | import { FontStyles } from '../../TailwindControls/Font/FontStyles'; 4 | import { SpacingStyles } from '../../TailwindControls/Spacing/SpacingStyles'; 5 | import type { TransformStyles } from '../../TailwindControls/Transform/TransformStyles'; 6 | import { TransitionStyles } from '../../TailwindControls/Transition/TransitionStyles'; 7 | import { getStyles } from '../../utils'; 8 | 9 | class SelectOptionStyles implements IStyle { 10 | font?: FontStyles; 11 | spacing?: SpacingStyles; 12 | color?: ColorStyle[]; 13 | transform?: TransformStyles[]; 14 | transition?: TransitionStyles; 15 | default: SelectOptionStyles; 16 | name: string; 17 | getMarkup = (): string => { 18 | return this.toStyles(); 19 | }; 20 | 21 | constructor(init?: Partial) { 22 | this.font = new FontStyles(); 23 | this.spacing = new SpacingStyles(); 24 | this.transform = []; 25 | this.color = []; 26 | this.transition = new TransitionStyles(); 27 | Object.assign(this, init); 28 | } 29 | 30 | toStyles = () => 31 | getStyles([ 32 | this.font, 33 | this.spacing, 34 | this.color, 35 | this.transform, 36 | this.transition, 37 | ]); 38 | } 39 | 40 | export { SelectOptionStyles }; 41 | -------------------------------------------------------------------------------- /src/Components/Select/SelectStyle.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import { getStyles } from '../../utils'; 3 | import { ButtonStyles } from '../Button/Models/ButtonStyles'; 4 | import { MenuStyles } from './MenuStyles'; 5 | import { SelectOptionStyles } from './SelectOptionStyle'; 6 | 7 | class SelectStyles implements IStyle { 8 | button?: ButtonStyles; 9 | menu?: MenuStyles; 10 | menuItem?: SelectOptionStyles; 11 | getMarkup = (): string => { 12 | return ` 13 | 21 | 22 |
27 |
Option 1
28 |
Option 2
29 |
Option 3
30 |
31 | `; 32 | }; 33 | 34 | constructor(init?: Partial) { 35 | this.button = new ButtonStyles(); 36 | this.menu = new MenuStyles(); 37 | this.menuItem = new SelectOptionStyles(); 38 | Object.assign(this, init); 39 | } 40 | 41 | toStyles = () => getStyles([this.button, this.menuItem, this.menu]); 42 | } 43 | 44 | export { SelectStyles }; 45 | -------------------------------------------------------------------------------- /src/Components/Slider/Slider.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |
11 |
{label}
12 | 20 |
{`${value}${units}`}
21 |
22 | -------------------------------------------------------------------------------- /src/Components/Switch.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
(checked = !checked)} 7 | class={`w-12 h-6 rounded-full border-dashed border-2 border-gray-300 cursor-pointer flex flex-row items-center ${checked ? 'bg-blue-300 justify-end' : 'bg-gray-200 justify-start'}`}> 8 | 12 |
13 | -------------------------------------------------------------------------------- /src/Components/Table/TablePartStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import type { BorderStyles } from '../../TailwindControls/Border/BorderStyles'; 3 | import type { ColorStyle } from '../../TailwindControls/Color/ColorStyle'; 4 | import { DividerStyles } from '../../TailwindControls/Divider/DividerStyles'; 5 | import type { EffectsStyle } from '../../TailwindControls/Effects/EffectsStyle'; 6 | import { FontStyles } from '../../TailwindControls/Font/FontStyles'; 7 | import { SpacingStyles } from '../../TailwindControls/Spacing/SpacingStyles'; 8 | import type { TransformStyles } from '../../TailwindControls/Transform/TransformStyles'; 9 | import { TransitionStyles } from '../../TailwindControls/Transition/TransitionStyles'; 10 | import { getStyles } from '../../utils'; 11 | 12 | class TablePartStyles implements IStyle { 13 | font: FontStyles; 14 | color?: ColorStyle[]; 15 | border: BorderStyles[]; 16 | effects: EffectsStyle[]; 17 | spacing: SpacingStyles; 18 | divider: DividerStyles; 19 | transform?: TransformStyles[]; 20 | transition?: TransitionStyles; 21 | getMarkup = (): string => { 22 | return this.toStyles(); 23 | }; 24 | 25 | constructor(init?: Partial) { 26 | this.font = new FontStyles(); 27 | this.border = []; 28 | this.effects = []; 29 | this.spacing = new SpacingStyles(); 30 | this.divider = new DividerStyles(); 31 | this.transform = []; 32 | this.color = []; 33 | this.transition = new TransitionStyles(); 34 | Object.assign(this, init); 35 | } 36 | 37 | toStyles = () => 38 | getStyles([ 39 | this.color, 40 | this.font, 41 | this.border, 42 | this.effects, 43 | this.spacing, 44 | this.divider, 45 | this.transform, 46 | this.transition, 47 | ]); 48 | } 49 | 50 | export { TablePartStyles }; 51 | -------------------------------------------------------------------------------- /src/Components/Table/TableStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import type { BorderStyles } from '../../TailwindControls/Border/BorderStyles'; 3 | import type { ColorStyle } from '../../TailwindControls/Color/ColorStyle'; 4 | import { DividerStyles } from '../../TailwindControls/Divider/DividerStyles'; 5 | import type { EffectsStyle } from '../../TailwindControls/Effects/EffectsStyle'; 6 | import { FontStyles } from '../../TailwindControls/Font/FontStyles'; 7 | import { SpacingStyles } from '../../TailwindControls/Spacing/SpacingStyles'; 8 | import type { TransformStyles } from '../../TailwindControls/Transform/TransformStyles'; 9 | import { TransitionStyles } from '../../TailwindControls/Transition/TransitionStyles'; 10 | import { getStyles } from '../../utils'; 11 | import { TablePartStyles } from './TablePartStyles'; 12 | 13 | class TableStyles implements IStyle { 14 | font: FontStyles; 15 | color?: ColorStyle[]; 16 | border: BorderStyles[]; 17 | effects: EffectsStyle[]; 18 | spacing: SpacingStyles; 19 | divider: DividerStyles; 20 | row: TablePartStyles; 21 | header: TablePartStyles; 22 | transform: TransformStyles[]; 23 | transition: TransitionStyles; 24 | 25 | getMarkup = (): string => { 26 | return `
27 |
29 |
Header 1
30 |
Header 2
31 |
32 |
34 |
Value 1
35 |
Value 2
36 |
37 |
`; 38 | }; 39 | 40 | /** 41 | * 42 | */ 43 | constructor(init?: Partial) { 44 | this.font = new FontStyles(); 45 | this.border = []; 46 | this.effects = []; 47 | this.spacing = new SpacingStyles(); 48 | this.divider = new DividerStyles(); 49 | this.row = new TablePartStyles(); 50 | this.header = new TablePartStyles(); 51 | this.transform = []; 52 | this.color = []; 53 | this.transition = new TransitionStyles(); 54 | Object.assign(this, init); 55 | } 56 | 57 | toStyles = () => 58 | getStyles([ 59 | this.color, 60 | this.font, 61 | this.border, 62 | this.effects, 63 | this.spacing, 64 | this.divider, 65 | this.transform, 66 | this.transition, 67 | ]); 68 | } 69 | 70 | export { TableStyles }; 71 | -------------------------------------------------------------------------------- /src/Components/TextField/TextField.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 |
26 | {#if $$slots.icon} 27 |
28 | 29 |
30 | {/if} 31 | 36 | {#if $$slots.trailingIcon} 37 |
38 | 39 |
40 | {/if} 41 |
42 | -------------------------------------------------------------------------------- /src/Components/TextField/TextFieldStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import type { BorderStyles } from '../../TailwindControls/Border/BorderStyles'; 3 | import type { ColorStyle } from '../../TailwindControls/Color/ColorStyle'; 4 | import { FontStyles } from '../../TailwindControls/Font/FontStyles'; 5 | import { PlaceholderStyles } from '../../TailwindControls/Placeholder/PlaceholderStyles'; 6 | import { RingStyles } from '../../TailwindControls/Ring/RingStyles'; 7 | import { SpacingStyles } from '../../TailwindControls/Spacing/SpacingStyles'; 8 | import type { TransformStyles } from '../../TailwindControls/Transform/TransformStyles'; 9 | import { TransitionStyles } from '../../TailwindControls/Transition/TransitionStyles'; 10 | import { getStyles } from '../../utils'; 11 | import { IconStyles } from '../Button/Models/IconStyles'; 12 | import type { EffectsStyle } from '../../TailwindControls/Effects/EffectsStyle'; 13 | 14 | class TextFieldStyles implements IStyle { 15 | font: FontStyles; 16 | color?: ColorStyle[]; 17 | icon: IconStyles; 18 | border: BorderStyles[]; 19 | spacing: SpacingStyles; 20 | effects: EffectsStyle[]; 21 | ring: RingStyles; 22 | transform: TransformStyles[]; 23 | transition: TransitionStyles; 24 | placeholder: PlaceholderStyles; 25 | getMarkup = (): string => { 26 | let container = getStyles([ 27 | this.ring, 28 | this?.color, 29 | this?.border, 30 | this?.font, 31 | this?.spacing, 32 | this.transform, 33 | this.transition, 34 | this.effects, 35 | this.placeholder, 36 | ]); 37 | 38 | return `
39 | 43 |
44 | Some SVG ICON HERE 45 |
46 |
`; 47 | }; 48 | 49 | constructor(init?: Partial) { 50 | this.font = new FontStyles(); 51 | this.border = []; 52 | this.icon = new IconStyles(); 53 | this.spacing = new SpacingStyles(); 54 | this.ring = new RingStyles(); 55 | this.transform = []; 56 | this.color = []; 57 | this.transition = new TransitionStyles(); 58 | this.placeholder = new PlaceholderStyles(); 59 | this.effects = []; 60 | Object.assign(this, init); 61 | } 62 | 63 | toStyles = () => 64 | getStyles([ 65 | this.color, 66 | this.font, 67 | this.border, 68 | this.spacing, 69 | this.ring, 70 | this.transform, 71 | this.transition, 72 | this.placeholder, 73 | this.effects, 74 | ]); 75 | } 76 | 77 | export { TextFieldStyles }; 78 | -------------------------------------------------------------------------------- /src/Components/Tooltip/Tooltip.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 |
22 | 23 | {#if visible} 24 |
25 |
34 | 35 |
36 |
37 | {/if} 38 |
39 | -------------------------------------------------------------------------------- /src/Components/Tooltip/TooltipStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import type { BorderStyles } from '../../TailwindControls/Border/BorderStyles'; 3 | import type { ColorStyle } from '../../TailwindControls/Color/ColorStyle'; 4 | import type { EffectsStyle } from '../../TailwindControls/Effects/EffectsStyle'; 5 | import { FontStyles } from '../../TailwindControls/Font/FontStyles'; 6 | import { SpacingStyles } from '../../TailwindControls/Spacing/SpacingStyles'; 7 | import type { TransformStyles } from '../../TailwindControls/Transform/TransformStyles'; 8 | import { getStyles } from '../../utils'; 9 | 10 | class TooltipStyles implements IStyle { 11 | font: FontStyles; 12 | color?: ColorStyle[]; 13 | border: BorderStyles[]; 14 | effects: EffectsStyle[]; 15 | spacing: SpacingStyles; 16 | transform: TransformStyles[]; 17 | getMarkup = (): string => { 18 | return `
19 |
26 | Tooltip Text 27 |
28 |
`; 29 | }; 30 | 31 | constructor(init?: Partial) { 32 | this.font = new FontStyles(); 33 | this.border = []; 34 | this.effects = []; 35 | this.spacing = new SpacingStyles(); 36 | this.transform = []; 37 | this.color = []; 38 | Object.assign(this, init); 39 | } 40 | 41 | toStyles = () => 42 | getStyles([ 43 | this.color, 44 | this.font, 45 | this.border, 46 | this.effects, 47 | this.spacing, 48 | this.transform, 49 | ]); 50 | } 51 | 52 | export { TooltipStyles }; 53 | -------------------------------------------------------------------------------- /src/IStyle.ts: -------------------------------------------------------------------------------- 1 | interface IStyle { 2 | toStyles: () => string; 3 | getMarkup?: () => string; 4 | } 5 | 6 | export type { IStyle }; 7 | -------------------------------------------------------------------------------- /src/Markup.svelte: -------------------------------------------------------------------------------- 1 | 38 | 39 |
41 |
42 | 47 | {#if copySuccess} 48 |
Copied To Clipboard
49 | {/if} 50 | 51 | 52 |
Copy To Clipboard
53 | 58 | 59 |
60 | 61 | {#if expanded && !!$selectedStyle.getMarkup} 62 |
63 |
64 | 
66 |           {$selectedStyle.getMarkup()}
67 |
68 |
69 | 70 | 74 |
75 | {/if} 76 |
77 | -------------------------------------------------------------------------------- /src/StyleDefinitions/IPageTheme.ts: -------------------------------------------------------------------------------- 1 | import type { ButtonStyles } from '../Components/Button/Models/ButtonStyles'; 2 | import type { CardStyles } from '../Components/Card/CardStyles'; 3 | import type { CheckboxStyles } from '../Components/Checkbox/CheckboxStyles'; 4 | import type { HeaderStyle } from '../Components/Header/HeaderStyle'; 5 | import type { SelectStyles } from '../Components/Select/SelectStyle'; 6 | import type { TableStyles } from '../Components/Table/TableStyles'; 7 | import type { TextFieldStyles } from '../Components/TextField/TextFieldStyles'; 8 | import type { TooltipStyles } from '../Components/Tooltip/TooltipStyles'; 9 | import type { PageStyle } from '../Components/Page/PageStyle'; 10 | import type { IStyle } from '../IStyle'; 11 | 12 | interface IPageTheme { 13 | primaryButton?: ButtonStyles; 14 | secondaryButton?: ButtonStyles; 15 | textField?: TextFieldStyles; 16 | checkbox?: CheckboxStyles; 17 | header?: HeaderStyle; 18 | viewer?: PageStyle; 19 | select?: SelectStyles; 20 | table?: TableStyles; 21 | card?: CardStyles; 22 | tooltip?: TooltipStyles; 23 | selected?: IStyle; 24 | } 25 | 26 | export type { IPageTheme }; 27 | -------------------------------------------------------------------------------- /src/StyleDefinitions/SveltailStyles.ts: -------------------------------------------------------------------------------- 1 | import { ButtonStyles } from '../Components/Button/Models/ButtonStyles'; 2 | import { IconStyles } from '../Components/Button/Models/IconStyles'; 3 | import { MenuStyles } from '../Components/Select/MenuStyles'; 4 | import { SelectOptionStyles } from '../Components/Select/SelectOptionStyle'; 5 | import { SelectStyles } from '../Components/Select/SelectStyle'; 6 | import { TooltipStyles } from '../Components/Tooltip/TooltipStyles'; 7 | import { BorderStyles } from '../TailwindControls/Border/BorderStyles'; 8 | import { ColorStyle } from '../TailwindControls/Color/ColorStyle'; 9 | import { DividerStyles } from '../TailwindControls/Divider/DividerStyles'; 10 | import { EffectsStyle } from '../TailwindControls/Effects/EffectsStyle'; 11 | import { FontStyles } from '../TailwindControls/Font/FontStyles'; 12 | import { SizingStyles } from '../TailwindControls/Sizing/SizingStyles'; 13 | import { SpacingStyles } from '../TailwindControls/Spacing/SpacingStyles'; 14 | import { TransformStyles } from '../TailwindControls/Transform/TransformStyles'; 15 | import { Variant } from '../Variant'; 16 | 17 | const selectStyles: SelectStyles = new SelectStyles({ 18 | button: new ButtonStyles({ 19 | border: [ 20 | new BorderStyles({ 21 | radius: 'rounded', 22 | style: 'border-dashed', 23 | width: 'border-2', 24 | color: [new ColorStyle({ color: 'border-gray-300' })], 25 | }), 26 | ], 27 | spacing: new SpacingStyles({ 28 | padding: [ 29 | { spacing: 'py', size: '1' }, 30 | { spacing: 'px', size: '2' }, 31 | ], 32 | }), 33 | size: new SizingStyles({ 34 | width: 'w-full', 35 | }), 36 | icon: new IconStyles({ 37 | color: [new ColorStyle({ color: 'text-blue-300' })], 38 | }), 39 | }), 40 | menu: new MenuStyles({ 41 | effects: [ 42 | new EffectsStyle({ 43 | boxShadow: 'shadow-md', 44 | }), 45 | ], 46 | size: new SizingStyles({ 47 | maxHeight: 'max-h-80', 48 | }), 49 | divider: new DividerStyles({ 50 | width: 'divide-y-2', 51 | style: 'divide-dashed', 52 | }), 53 | color: [new ColorStyle({ color: 'bg-white' })], 54 | border: [ 55 | new BorderStyles({ 56 | radius: 'rounded-lg', 57 | width: 'border-2', 58 | color: [new ColorStyle({ color: 'border-gray-300' })], 59 | style: 'border-dashed', 60 | }), 61 | ], 62 | spacing: new SpacingStyles({ 63 | margin: [{ size: '1', spacing: 'mt' }], 64 | }), 65 | }), 66 | menuItem: new SelectOptionStyles({ 67 | color: [ 68 | new ColorStyle({ color: 'hover:bg-gray-100', variant: Variant.Hover }), 69 | ], 70 | spacing: new SpacingStyles({ 71 | padding: [{ spacing: 'p', size: '2' }], 72 | }), 73 | }), 74 | }); 75 | 76 | const primaryButton = new ButtonStyles({ 77 | color: [new ColorStyle({ color: 'bg-white' })], 78 | font: new FontStyles({ 79 | weight: 'font-semibold', 80 | }), 81 | border: [ 82 | new BorderStyles({ 83 | style: 'border-dashed focus:outline-none', 84 | width: 'border-2', 85 | color: [new ColorStyle({ color: 'border-gray-200' })], 86 | radius: 'rounded-lg', 87 | }), 88 | ], 89 | icon: new IconStyles({ 90 | color: [new ColorStyle({ color: 'text-blue-300' })], 91 | }), 92 | spacing: new SpacingStyles({ 93 | padding: [ 94 | { spacing: 'px', size: '2' }, 95 | { spacing: 'py', size: '1' }, 96 | ], 97 | margin: [{ spacing: 'm', size: '1' }], 98 | }), 99 | size: new SizingStyles({}), 100 | }); 101 | 102 | const tooltip = new TooltipStyles({ 103 | spacing: new SpacingStyles({ 104 | padding: [{ spacing: 'p', size: '1' }], 105 | margin: [{ spacing: 'm', size: '0.5' }], 106 | }), 107 | color: [ 108 | new ColorStyle({ 109 | color: 'bg-white', 110 | }), 111 | ], 112 | border: [ 113 | new BorderStyles({ 114 | width: 'border', 115 | style: 'border-dashed', 116 | color: [new ColorStyle({ color: 'border-blue-300' })], 117 | radius: 'rounded-lg', 118 | }), 119 | ], 120 | effects: [ 121 | new EffectsStyle({ 122 | boxShadow: 'shadow-md', 123 | opacity: 'opacity-95', 124 | }), 125 | ], 126 | font: new FontStyles({ 127 | size: 'text-xs', 128 | color: [ 129 | new ColorStyle({ 130 | color: 'text-gray-700', 131 | }), 132 | ], 133 | }), 134 | transform: [ 135 | new TransformStyles({ 136 | translate: '-translate-y-full', 137 | }), 138 | ], 139 | }); 140 | 141 | export { selectStyles, primaryButton, tooltip }; 142 | -------------------------------------------------------------------------------- /src/StyleScreens/Button/ButtonMenu.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 |
20 | navigate('Primary', ButtonStyler, true)}> 23 | 24 | 25 | navigate('Secondary', ButtonStyler, false)}> 28 | 29 | 30 |
31 | -------------------------------------------------------------------------------- /src/StyleScreens/Button/ButtonStyler.svelte: -------------------------------------------------------------------------------- 1 | 44 | 45 | 46 | 47 | 48 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
71 | 79 | 87 | 88 |
89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /src/StyleScreens/Card/CardBodyStyler.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/StyleScreens/Card/CardContainerStyler.svelte: -------------------------------------------------------------------------------- 1 | 29 | 30 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /src/StyleScreens/Card/CardFooterStyler.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/StyleScreens/Card/CardHeaderStyler.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/StyleScreens/Card/CardMenu.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 |
25 | navigate('Container', CardContainerStyler)}> 28 | 29 | 30 | navigate('Header', CardHeaderStyler)}> 33 | 34 | 35 | navigate('Body', CardBodyStyler)}> 38 | 39 | 40 | navigate('Footer', CardFooterStyler)}> 43 | 44 | 45 |
46 | -------------------------------------------------------------------------------- /src/StyleScreens/CheckboxStyler.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /src/StyleScreens/Header/HeaderBrandStyler.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/StyleScreens/Header/HeaderContainerStyler.svelte: -------------------------------------------------------------------------------- 1 | 32 | 33 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /src/StyleScreens/Header/HeaderIconStyler.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 23 | 24 | 25 |
26 | 33 | 40 | 41 |
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/StyleScreens/Header/HeaderMenu.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 |
25 | navigate('Container', HeaderContainerStyler)}> 28 | 29 | 30 | navigate('Icon', HeaderIconStyler)}> 33 | 34 | 35 | navigate('Brand', HeaderBrandStyler)}> 38 | 39 | 40 | navigate('Menu', HeaderMenuStyler)}> 43 | 44 | 45 |
46 | -------------------------------------------------------------------------------- /src/StyleScreens/Header/HeaderMenuStyler.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/StyleScreens/Home.svelte: -------------------------------------------------------------------------------- 1 | 34 | 35 |
36 |
37 | 51 | 52 |
reset theme
53 | reset && reset()} 55 | styles={['border-none', 'fill-current', 'text-blue-300', 'focus:outline-none']}> 56 | 57 | 58 | 59 |
60 | navigate('Page', PageStyler)}> 61 | 62 | 63 | navigate('Table', TableMenu)}> 64 | 65 | 66 | navigate('Header', HeaderMenu)}> 69 | 70 | 71 | navigate('Button', ButtonMenu)}> 74 | 75 | 76 | navigate('Text Field', TextFieldStyler)}> 79 | 80 | 81 | navigate('Checkbox', CheckboxStyler)}> 84 | 85 | 86 | navigate('Select', SelectMenu)}> 89 | 90 | 91 | navigate('Card', CardMenu)}> 92 | 93 | 94 | navigate('Tooltip', TooltipStyler)}> 97 | 98 | 99 |
100 | -------------------------------------------------------------------------------- /src/StyleScreens/Page/PageStyler.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /src/StyleScreens/Select/SelectButtonStyler.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | 58 | 65 | 68 |
69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /src/StyleScreens/Select/SelectMenu.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 |
24 | navigate('Button', SelectButtonStyler)}> 27 | 28 | 29 | navigate('Menu', SelectMenuStyler)}> 32 | 33 | 34 | navigate('Menu Item', SelectMenuItemStyler)}> 37 | 38 | 39 |
40 | -------------------------------------------------------------------------------- /src/StyleScreens/Select/SelectMenuItemStyler.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/StyleScreens/Select/SelectMenuStyler.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /src/StyleScreens/StyleGroup.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |
21 |
22 |

{header}

23 | 24 |
reset section
25 | reset && reset()} 27 | styles={['border-none', 'fill-current', 'text-blue-300', 'focus:outline-none']}> 28 | 29 | 30 | 31 |
32 | 33 |
34 | -------------------------------------------------------------------------------- /src/StyleScreens/StyleMenuButton.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 |
11 | 12 |
13 | {text} 14 | 15 | -------------------------------------------------------------------------------- /src/StyleScreens/Table/TableContainerStyler.svelte: -------------------------------------------------------------------------------- 1 | 33 | 34 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /src/StyleScreens/Table/TableHeaderStyler.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /src/StyleScreens/Table/TableMenu.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 |
24 | navigate('Container', TableContainerStyler)}> 27 | 28 | 29 | navigate('Header', TableHeaderStyler)}> 32 | 33 | 34 | navigate('Row', TableRowStyler)}> 35 | 36 | 37 |
38 | -------------------------------------------------------------------------------- /src/StyleScreens/Table/TableRowStyler.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /src/StyleScreens/TextFieldStyler.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 | 24 | 25 | 26 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 60 | 68 | 69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /src/StyleScreens/TooltipStyler.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/Sveltail.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 28 | 35 | 39 | 40 | -------------------------------------------------------------------------------- /src/TailwindControls/Border/BorderRadius/BorderRadiusSelect.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 23 | -------------------------------------------------------------------------------- /src/TailwindControls/Border/BorderRadius/borderRadius.ts: -------------------------------------------------------------------------------- 1 | export const borderRadiusOptions: string[] = [ 2 | 'rounded-none', 3 | 'rounded-sm', 4 | 'rounded', 5 | 'rounded-md', 6 | 'rounded-lg', 7 | 'rounded-xl', 8 | 'rounded-2xl', 9 | 'rounded-3xl', 10 | 'rounded-full', 11 | 'rounded-t-none', 12 | 'rounded-r-none', 13 | 'rounded-b-none', 14 | 'rounded-l-none', 15 | 'rounded-t-sm', 16 | 'rounded-r-sm', 17 | 'rounded-b-sm', 18 | 'rounded-l-sm', 19 | 'rounded-t', 20 | 'rounded-r', 21 | 'rounded-b', 22 | 'rounded-l', 23 | 'rounded-t-md', 24 | 'rounded-r-md', 25 | 'rounded-b-md', 26 | 'rounded-l-md', 27 | 'rounded-t-lg', 28 | 'rounded-r-lg', 29 | 'rounded-b-lg', 30 | 'rounded-l-lg', 31 | 'rounded-t-xl', 32 | 'rounded-r-xl', 33 | 'rounded-b-xl', 34 | 'rounded-l-xl', 35 | 'rounded-t-2xl', 36 | 'rounded-r-2xl', 37 | 'rounded-b-2xl', 38 | 'rounded-l-2xl', 39 | 'rounded-t-3xl', 40 | 'rounded-r-3xl', 41 | 'rounded-b-3xl', 42 | 'rounded-l-3xl', 43 | 'rounded-t-full', 44 | 'rounded-r-full', 45 | 'rounded-b-full', 46 | 'rounded-l-full', 47 | 'rounded-tl-none', 48 | 'rounded-tr-none', 49 | 'rounded-br-none', 50 | 'rounded-bl-none', 51 | 'rounded-tl-sm', 52 | 'rounded-tr-sm', 53 | 'rounded-br-sm', 54 | 'rounded-bl-sm', 55 | 'rounded-tl', 56 | 'rounded-tr', 57 | 'rounded-br', 58 | 'rounded-bl', 59 | 'rounded-tl-md', 60 | 'rounded-tr-md', 61 | 'rounded-br-md', 62 | 'rounded-bl-md', 63 | 'rounded-tl-lg', 64 | 'rounded-tr-lg', 65 | 'rounded-br-lg', 66 | 'rounded-bl-lg', 67 | 'rounded-tl-xl', 68 | 'rounded-tr-xl', 69 | 'rounded-br-xl', 70 | 'rounded-bl-xl', 71 | 'rounded-tl-2xl', 72 | 'rounded-tr-2xl', 73 | 'rounded-br-2xl', 74 | 'rounded-bl-2xl', 75 | 'rounded-tl-3xl', 76 | 'rounded-tr-3xl', 77 | 'rounded-br-3xl', 78 | 'rounded-bl-3xl', 79 | 'rounded-tl-full', 80 | 'rounded-tr-full', 81 | 'rounded-br-full', 82 | 'rounded-bl-full', 83 | ]; 84 | -------------------------------------------------------------------------------- /src/TailwindControls/Border/BorderSelect.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 |
24 | {#each value as border, index} 25 |
26 | 27 | 28 |
Delete Border
29 | onDelete(index)} 31 | styles={[ 32 | 'border-none', 33 | 'fill-current', 34 | 'text-blue-300', 35 | 'focus:outline-none', 36 | ]} 37 | > 38 | 39 | 40 | 41 |
42 | 43 | 44 | 45 | 51 | {/each} 52 | 56 |
57 | -------------------------------------------------------------------------------- /src/TailwindControls/Border/BorderStyleSelect.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 28 | -------------------------------------------------------------------------------- /src/TailwindControls/Border/BorderStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import { getStyles } from '../../utils'; 3 | import type { ColorStyle } from '../Color/ColorStyle'; 4 | 5 | class BorderStyles implements IStyle { 6 | color: ColorStyle[]; 7 | style: string; 8 | width: string; 9 | radius: string; 10 | opacity: string; 11 | 12 | /** 13 | * 14 | */ 15 | constructor(init?: Partial) { 16 | this.color = []; 17 | Object.assign(this, init); 18 | } 19 | 20 | toStyles = () => 21 | getStyles([this.color, this.style, this.width, this.radius, this.opacity]); 22 | } 23 | 24 | export { BorderStyles }; 25 | -------------------------------------------------------------------------------- /src/TailwindControls/Border/BorderWidth/BorderWidthSelect.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | -------------------------------------------------------------------------------- /src/TailwindControls/Border/BorderWidth/borderWidth.ts: -------------------------------------------------------------------------------- 1 | export const borderWidthOptions: string[] = [ 2 | 'border-0', 3 | 'border-2', 4 | 'border-4', 5 | 'border-8', 6 | 'border', 7 | 'border-t-0', 8 | 'border-r-0', 9 | 'border-b-0', 10 | 'border-l-0', 11 | 'border-t-2', 12 | 'border-r-2', 13 | 'border-b-2', 14 | 'border-l-2', 15 | 'border-t-4', 16 | 'border-r-4', 17 | 'border-b-4', 18 | 'border-l-4', 19 | 'border-t-8', 20 | 'border-r-8', 21 | 'border-b-8', 22 | 'border-l-8', 23 | 'border-t', 24 | 'border-r', 25 | 'border-b', 26 | 'border-l', 27 | ]; 28 | -------------------------------------------------------------------------------- /src/TailwindControls/Color/ColorMenu.svelte: -------------------------------------------------------------------------------- 1 | 27 | 28 |
29 |
30 | {#each colors as color} 31 | {#if color !== 'white' && color !== 'black'} 32 |
33 | {#each numbers as number} 34 |
45 | {/if} 46 | {/each} 47 |
48 |
49 |
56 | 60 |
61 |
68 | 72 |
73 |
80 | 86 |
87 |
94 | 100 |
101 |
102 |
103 | -------------------------------------------------------------------------------- /src/TailwindControls/Color/ColorSelect.svelte: -------------------------------------------------------------------------------- 1 | 62 | 63 |
64 |
65 | {#if !blockGradient} 66 |
67 | Gradient: 68 | 69 |
70 | {/if} 71 |
72 | 73 |
Delete Color
74 | 83 | 84 | 85 | 86 |
87 |
88 | {#if !blockOpacity} 89 | 93 | {/if} 94 | {#if radioOptions.length} 95 |
96 | Variant: 97 | 98 |
99 | {/if} 100 | {#if value.isGradient} 101 | Direction: 102 | 120 | From: 121 | 122 |
123 | 124 | Via ? 125 |
126 | {#if isVia} 127 | 128 | {/if} 129 | To: 130 | 131 | {:else} 132 | 133 | {/if} 134 | {#if !blockFilters} 135 |
136 | Filters: 137 | 138 |
139 | 140 | 149 | {/if} 150 |
151 | -------------------------------------------------------------------------------- /src/TailwindControls/Color/ColorStyle.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import { getStyles } from '../../utils'; 3 | import type { Variant } from '../../Variant'; 4 | 5 | class ColorStyle implements IStyle { 6 | color?: string; 7 | from?: string; 8 | to?: string; 9 | via?: string; 10 | direction?: string; 11 | isGradient?: boolean; 12 | variant?: Variant; 13 | opacity?: string; 14 | filter?: string; 15 | backdropBlur?: string; 16 | // isHover?: boolean; 17 | getMarkup = (): string => { 18 | return this.toStyles(); 19 | }; 20 | 21 | constructor(init?: Partial) { 22 | Object.assign(this, init); 23 | } 24 | 25 | toStyles = () => { 26 | if (!this.isGradient) { 27 | return getStyles([ 28 | this.color, 29 | this.opacity, 30 | this.filter, 31 | this.backdropBlur, 32 | ]); 33 | } else { 34 | return getStyles([ 35 | this.direction, 36 | this.from, 37 | this.to, 38 | this.via, 39 | this.opacity, 40 | this.filter, 41 | this.backdropBlur, 42 | ]); 43 | } 44 | }; 45 | } 46 | 47 | export { ColorStyle }; 48 | -------------------------------------------------------------------------------- /src/TailwindControls/Color/ColorsSelects.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |
21 | {#each value as color, index} 22 | remove(index)} 30 | /> 31 | {/each} 32 | {#if (variants.length > 1 && value.length !== variants.length) || value.length === 0} 33 |
34 | 40 |
41 | {/if} 42 |
43 | -------------------------------------------------------------------------------- /src/TailwindControls/Color/color.ts: -------------------------------------------------------------------------------- 1 | export type Color = 2 | | 'white' 3 | | 'black' 4 | | 'gray' 5 | | 'red' 6 | | 'yellow' 7 | | 'green' 8 | | 'blue' 9 | | 'indigo' 10 | | 'purple' 11 | | 'pink'; 12 | export type ColorNumber = 13 | | '50' 14 | | '100' 15 | | '200' 16 | | '300' 17 | | '400' 18 | | '500' 19 | | '600' 20 | | '700' 21 | | '800' 22 | | '900'; 23 | 24 | export const colors: Color[] = [ 25 | 'white', 26 | 'black', 27 | 'gray', 28 | 'red', 29 | 'yellow', 30 | 'green', 31 | 'blue', 32 | 'indigo', 33 | 'purple', 34 | 'pink', 35 | ]; 36 | 37 | export const numbers: ColorNumber[] = [ 38 | '50', 39 | '100', 40 | '200', 41 | '300', 42 | '400', 43 | '500', 44 | '600', 45 | '700', 46 | '800', 47 | '900', 48 | ]; 49 | -------------------------------------------------------------------------------- /src/TailwindControls/Divider/DividerSelect.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |
11 | 12 | 13 | 14 |
15 | -------------------------------------------------------------------------------- /src/TailwindControls/Divider/DividerStyleSelect.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 28 | -------------------------------------------------------------------------------- /src/TailwindControls/Divider/DividerStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import { getStyles } from '../../utils'; 3 | import type { ColorStyle } from '../Color/ColorStyle'; 4 | 5 | class DividerStyles implements IStyle { 6 | color: ColorStyle[]; 7 | style: string; 8 | width: string; 9 | 10 | constructor(init?: Partial) { 11 | this.color = []; 12 | Object.assign(this, init); 13 | } 14 | 15 | toStyles = () => getStyles([this.color, this.style, this.width]); 16 | } 17 | 18 | export { DividerStyles }; 19 | -------------------------------------------------------------------------------- /src/TailwindControls/Divider/DividerWidthSelect.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 | 35 | -------------------------------------------------------------------------------- /src/TailwindControls/Effects/BoxShadowSelect.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 33 | -------------------------------------------------------------------------------- /src/TailwindControls/Effects/EffectsSelect.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 |
22 | {#each value as effect, index} 23 |
24 |
25 | 26 | Apply On Hover? 27 |
28 | 29 |
Delete Effects
30 | onDelete(index)} 32 | styles={['border-none', 'fill-current', 'text-blue-300', 'focus:outline-none']}> 33 | 34 | 35 | 36 |
37 | 38 | 39 | 40 | {/each} 41 | {#if value.length !== 2} 42 | 47 | {/if} 48 |
49 | -------------------------------------------------------------------------------- /src/TailwindControls/Effects/EffectsStyle.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | 3 | class EffectsStyle implements IStyle { 4 | boxShadow: string; 5 | opacity: string; 6 | isHover: boolean; 7 | 8 | constructor(init?: Partial) { 9 | Object.assign(this, init); 10 | } 11 | 12 | toStyles = () => 13 | [this.boxShadow, this.opacity] 14 | .filter((x) => !!x) 15 | .map((x) => (this.isHover ? `hover:${x}` : x)) 16 | .join(' ') 17 | .trim(); 18 | } 19 | 20 | export { EffectsStyle }; 21 | -------------------------------------------------------------------------------- /src/TailwindControls/Effects/OpacitySelect.svelte: -------------------------------------------------------------------------------- 1 | 44 | 45 | 54 | -------------------------------------------------------------------------------- /src/TailwindControls/Font/FontFamilySelect.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | -------------------------------------------------------------------------------- /src/TailwindControls/Font/FontItalicSelect.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | -------------------------------------------------------------------------------- /src/TailwindControls/Font/FontSelect.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 24 |
25 | -------------------------------------------------------------------------------- /src/TailwindControls/Font/FontSizeSelect.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | -------------------------------------------------------------------------------- /src/TailwindControls/Font/FontStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import { getStyles } from '../../utils'; 3 | import type { ColorStyle } from '../Color/ColorStyle'; 4 | 5 | class FontStyles implements IStyle { 6 | color?: ColorStyle[]; 7 | weight?: string; 8 | size?: string; 9 | family?: string; 10 | italics?: string; 11 | default: FontStyles; 12 | 13 | constructor(init?: Partial) { 14 | this.color = []; 15 | Object.assign(this, init); 16 | } 17 | 18 | toStyles = () => 19 | getStyles([this.color, this.weight, this.size, this.family, this.italics]); 20 | } 21 | 22 | export { FontStyles }; 23 | -------------------------------------------------------------------------------- /src/TailwindControls/Font/FontWeightSelect.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | -------------------------------------------------------------------------------- /src/TailwindControls/Font/font.ts: -------------------------------------------------------------------------------- 1 | export type FontWeight = 2 | | 'font-bold' 3 | | 'font-semibold' 4 | | 'font-thin' 5 | | 'font-extralight' 6 | | 'font-light' 7 | | 'font-normal' 8 | | 'font-medium' 9 | | 'font-extrabold' 10 | | 'font-black'; 11 | 12 | export type FontSize = 13 | | 'text-xs' 14 | | 'text-sm' 15 | | 'text-base' 16 | | 'text-lg' 17 | | 'text-xl' 18 | | 'text-2xl' 19 | | 'text-3xl' 20 | | 'text-4xl' 21 | | 'text-5xl' 22 | | 'text-6xl' 23 | | 'text-7xl' 24 | | 'text-8xl' 25 | | 'text-9xl'; 26 | 27 | export const fontSizes: FontSize[] = [ 28 | 'text-xs', 29 | 'text-sm', 30 | 'text-base', 31 | 'text-lg', 32 | 'text-xl', 33 | 'text-2xl', 34 | 'text-3xl', 35 | 'text-4xl', 36 | 'text-5xl', 37 | 'text-6xl', 38 | 'text-7xl', 39 | 'text-8xl', 40 | 'text-9xl', 41 | ]; 42 | 43 | export const fontWeights: FontWeight[] = [ 44 | 'font-bold', 45 | 'font-semibold', 46 | 'font-thin', 47 | 'font-extralight', 48 | 'font-light', 49 | 'font-normal', 50 | 'font-medium', 51 | 'font-extrabold', 52 | 'font-black', 53 | ]; 54 | 55 | export const fontFamilies: string[] = ['font-sans', 'font-serif', 'font-mono']; 56 | 57 | export const italics: string[] = ['italic', 'non-italic']; 58 | -------------------------------------------------------------------------------- /src/TailwindControls/Placeholder/PlaceholderSelect.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | 16 |
17 | -------------------------------------------------------------------------------- /src/TailwindControls/Placeholder/PlaceholderStyles.ts: -------------------------------------------------------------------------------- 1 | import type { ColorStyle } from '../Color/ColorStyle'; 2 | import type { IStyle } from '../../IStyle'; 3 | import { getStyles } from '../../utils'; 4 | 5 | class PlaceholderStyles implements IStyle { 6 | color: ColorStyle[]; 7 | opacity: string; 8 | 9 | constructor(init?: Partial) { 10 | this.color = []; 11 | Object.assign(this, init); 12 | } 13 | 14 | toStyles = () => getStyles([this.color, this.opacity]); 15 | } 16 | 17 | export { PlaceholderStyles }; 18 | -------------------------------------------------------------------------------- /src/TailwindControls/Ring/RingOffsetWidthSelect.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 26 | -------------------------------------------------------------------------------- /src/TailwindControls/Ring/RingSelect.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 |
22 |
23 | 24 | Apply On Focus? 25 |
26 | 27 | 34 | 35 | 36 | 44 |
45 | -------------------------------------------------------------------------------- /src/TailwindControls/Ring/RingStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import { getStyles } from '../../utils'; 3 | import type { ColorStyle } from '../Color/ColorStyle'; 4 | import type { Variant } from '../../Variant'; 5 | 6 | class RingStyles implements IStyle { 7 | color?: ColorStyle[]; 8 | width?: string; 9 | offsetWidth?: string; 10 | offsetColor?: ColorStyle[]; 11 | variant?: Variant; 12 | 13 | constructor(init?: Partial) { 14 | this.color = []; 15 | this.offsetColor = []; 16 | Object.assign(this, init); 17 | } 18 | 19 | toStyles = () => 20 | getStyles( 21 | [this.color, this.offsetColor, this.width, this.offsetWidth], 22 | this.variant 23 | ); 24 | } 25 | export { RingStyles }; 26 | -------------------------------------------------------------------------------- /src/TailwindControls/Ring/RingWidthSelect.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 29 | -------------------------------------------------------------------------------- /src/TailwindControls/Sizing/HeightSelect.svelte: -------------------------------------------------------------------------------- 1 | 64 | 65 | 74 | -------------------------------------------------------------------------------- /src/TailwindControls/Sizing/MaxHeightSelect.svelte: -------------------------------------------------------------------------------- 1 | 47 | 48 | 57 | -------------------------------------------------------------------------------- /src/TailwindControls/Sizing/MaxWidthSelect.svelte: -------------------------------------------------------------------------------- 1 | 33 | 34 | 43 | -------------------------------------------------------------------------------- /src/TailwindControls/Sizing/MinHeightSelect.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | -------------------------------------------------------------------------------- /src/TailwindControls/Sizing/MinWidthSelect.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 25 | -------------------------------------------------------------------------------- /src/TailwindControls/Sizing/SizingSelect.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 |
16 | Height: 17 | 18 |
19 |
20 | Width 21 | 22 |
23 |
24 | Min Height 25 | 26 |
27 |
28 | Min Width 29 | 30 |
31 |
32 | Max Height 33 | 34 |
35 |
36 | Max Width 37 | 38 |
39 |
40 | -------------------------------------------------------------------------------- /src/TailwindControls/Sizing/SizingStyles.ts: -------------------------------------------------------------------------------- 1 | import { getStyles } from '../../utils'; 2 | 3 | class SizingStyles { 4 | height?: string; 5 | maxHeight?: string; 6 | minHeight?: string; 7 | width?: string; 8 | maxWidth?: string; 9 | minWidth?: string; 10 | 11 | constructor(init?: Partial) { 12 | Object.assign(this, init); 13 | } 14 | 15 | toStyles = () => 16 | getStyles([ 17 | this.height, 18 | this.maxHeight, 19 | this.maxWidth, 20 | this.width, 21 | this.minHeight, 22 | this.minWidth, 23 | ]); 24 | } 25 | 26 | export { SizingStyles }; 27 | -------------------------------------------------------------------------------- /src/TailwindControls/Sizing/WidthSelect.svelte: -------------------------------------------------------------------------------- 1 | 77 | 78 | 83 | -------------------------------------------------------------------------------- /src/TailwindControls/Spacing/MarginSelect.svelte: -------------------------------------------------------------------------------- 1 | 25 | 26 | 35 | -------------------------------------------------------------------------------- /src/TailwindControls/Spacing/PaddingSelect.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | -------------------------------------------------------------------------------- /src/TailwindControls/Spacing/SizeSelect.svelte: -------------------------------------------------------------------------------- 1 | 47 | 48 | 53 | -------------------------------------------------------------------------------- /src/TailwindControls/Spacing/SpacingSelect.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 |
17 | Margin 18 | {#each value.margin as margin, index} 19 |
20 | 21 | 22 | (value.margin = value.margin.filter((_, i) => i !== index))}> 25 | 26 | 27 |
28 | {/each} 29 |
30 | 38 |
39 | 40 | Padding 41 | {#each value.padding as padding, index} 42 |
43 | 44 | 45 | (value.padding = value.padding.filter((_, i) => i !== index))}> 48 | 49 | 50 |
51 | {/each} 52 |
53 | 62 |
63 |
64 | -------------------------------------------------------------------------------- /src/TailwindControls/Spacing/SpacingStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | 3 | interface ISpacing { 4 | spacing: string; 5 | size: string; 6 | } 7 | 8 | class SpacingStyles implements IStyle { 9 | padding?: ISpacing[] = []; 10 | margin?: ISpacing[] = []; 11 | 12 | constructor(init?: Partial) { 13 | Object.assign(this, init); 14 | } 15 | 16 | toStyles = () => 17 | `${ 18 | this.padding?.map((s: ISpacing) => `${s.spacing}-${s.size}`).join(' ') || 19 | '' 20 | } ${ 21 | this.margin?.map((s: ISpacing) => `${s.spacing}-${s.size}`).join(' ') || 22 | '' 23 | }`.trim(); 24 | } 25 | 26 | export { SpacingStyles }; 27 | -------------------------------------------------------------------------------- /src/TailwindControls/Transform/TransformOriginSelect.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 32 | -------------------------------------------------------------------------------- /src/TailwindControls/Transform/TransformRotateSelect.svelte: -------------------------------------------------------------------------------- 1 | 29 | 30 |
31 | Rotate 32 | 43 | 44 | Reverse? 45 |
46 | -------------------------------------------------------------------------------- /src/TailwindControls/Transform/TransformScaleNumberSelect.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 33 | -------------------------------------------------------------------------------- /src/TailwindControls/Transform/TransformScaleSelect.svelte: -------------------------------------------------------------------------------- 1 | 37 | 38 |
39 | Scale 40 | 51 | 52 |
53 | -------------------------------------------------------------------------------- /src/TailwindControls/Transform/TransformSelect.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 |
26 | {#each value as transform, index} 27 |
28 |
29 | 30 | Apply On Hover? 31 |
32 | 33 |
Delete Transform
34 | onDelete(index)} 36 | styles={['border-none', 'fill-current', 'text-blue-300', 'focus:outline-none']}> 37 | 38 | 39 | 40 |
41 | 42 | 43 | 44 | 45 | 46 | {/each} 47 | {#if value.length !== 2} 48 |
49 | 56 |
57 | {/if} 58 |
59 | -------------------------------------------------------------------------------- /src/TailwindControls/Transform/TransformSkewNumberSelect.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | -------------------------------------------------------------------------------- /src/TailwindControls/Transform/TransformSkewSelect.svelte: -------------------------------------------------------------------------------- 1 | 44 | 45 |
46 | Skew 47 | 58 | 59 | 60 | Reverse? 61 |
62 | -------------------------------------------------------------------------------- /src/TailwindControls/Transform/TransformStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | 3 | class TransformStyles implements IStyle { 4 | origin: string; 5 | scale: string; 6 | rotate: string; 7 | translate: string; 8 | skew: string; 9 | onHover: boolean = false; 10 | 11 | constructor(init?: Partial) { 12 | Object.assign(this, init); 13 | } 14 | 15 | toStyles = () => { 16 | let styles = [ 17 | this.origin, 18 | this.scale, 19 | this.rotate, 20 | this.translate, 21 | this.skew, 22 | ] 23 | .filter((x) => !!x) 24 | .map((x) => (this.onHover ? `hover:${x}` : x)) 25 | .join(' ') 26 | .trim(); 27 | 28 | if (styles) { 29 | return `transform-gpu ${styles}`; 30 | } else { 31 | return styles; 32 | } 33 | }; 34 | } 35 | 36 | export { TransformStyles }; 37 | -------------------------------------------------------------------------------- /src/TailwindControls/Transform/TransformTranslateNumberSelect.svelte: -------------------------------------------------------------------------------- 1 | 52 | 53 | 64 | -------------------------------------------------------------------------------- /src/TailwindControls/Transform/TransformTranslateSelect.svelte: -------------------------------------------------------------------------------- 1 | 44 | 45 |
46 | Translate 47 | 58 | 59 | 60 | Reverse? 61 |
62 | -------------------------------------------------------------------------------- /src/TailwindControls/Transition/TransitionDelaySelect.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 27 | -------------------------------------------------------------------------------- /src/TailwindControls/Transition/TransitionDurationSelect.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 31 | -------------------------------------------------------------------------------- /src/TailwindControls/Transition/TransitionPropertySelect.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 | 30 | -------------------------------------------------------------------------------- /src/TailwindControls/Transition/TransitionSelect.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | 13 | 14 | 15 | 16 |
17 | -------------------------------------------------------------------------------- /src/TailwindControls/Transition/TransitionStyles.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from '../../IStyle'; 2 | import { getStyles } from '../../utils'; 3 | 4 | class TransitionStyles implements IStyle { 5 | transition: string; 6 | duration: string; 7 | timing: string; 8 | delay: string; 9 | 10 | constructor(init?: Partial) { 11 | Object.assign(this, init); 12 | } 13 | 14 | toStyles = () => 15 | getStyles([this.transition, this.duration, this.timing, this.delay]); 16 | } 17 | 18 | export { TransitionStyles }; 19 | -------------------------------------------------------------------------------- /src/TailwindControls/Transition/TransitionTimingSelect.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 27 | -------------------------------------------------------------------------------- /src/Variant.ts: -------------------------------------------------------------------------------- 1 | export enum Variant { 2 | Hover = 'hover:', 3 | Focus = 'focus:', 4 | None = '', 5 | } 6 | -------------------------------------------------------------------------------- /src/hmr.js: -------------------------------------------------------------------------------- 1 | const hmr = (toBeSet) => { 2 | if (import.meta.hot) { 3 | import.meta.hot.accept(({ module }) => { 4 | toBeSet.set(get(module.themeProviders)); 5 | }); 6 | } 7 | }; 8 | 9 | export { hmr }; 10 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | }); 6 | 7 | export default app; 8 | -------------------------------------------------------------------------------- /src/store.ts: -------------------------------------------------------------------------------- 1 | import { writable, derived, get, Writable, Readable } from 'svelte/store'; 2 | import type { ButtonStyles } from './Components/Button/Models/ButtonStyles'; 3 | import type { CardStyles } from './Components/Card/CardStyles'; 4 | import type { CheckboxStyles } from './Components/Checkbox/CheckboxStyles'; 5 | import type { HeaderStyle } from './Components/Header/HeaderStyle'; 6 | import type { SelectStyles } from './Components/Select/SelectStyle'; 7 | import type { PageStyle } from './Components/Page/PageStyle'; 8 | import type { TableStyles } from './Components/Table/TableStyles'; 9 | import type { TextFieldStyles } from './Components/TextField/TextFieldStyles'; 10 | import { getInstance as getDefaultInstance } from './StyleDefinitions/PageThemes/DefaultStyles'; 11 | import { getInstance as getBlankSlateInstance } from './StyleDefinitions/PageThemes/BlankSlateStyles'; 12 | import { getInstance as getGetHubInstance } from './StyleDefinitions/PageThemes/GetHubStyles'; 13 | import { getInstance as getTweetInstance } from './StyleDefinitions/PageThemes/TwitterishDarkStyles'; 14 | import type { TooltipStyles } from './Components/Tooltip/TooltipStyles'; 15 | import type { IPageTheme } from './StyleDefinitions/IPageTheme'; 16 | import type { IStyle } from './IStyle'; 17 | 18 | export const themeProviders = writable<{ [key: string]: () => IPageTheme }>({ 19 | 'Default Theme': getDefaultInstance, 20 | 'Blank Slate Theme': getBlankSlateInstance, 21 | 'Get Hub Theme': getGetHubInstance, 22 | 'Tweet Dark Theme': getTweetInstance, 23 | }); 24 | 25 | type ThemeInitializer = () => IPageTheme; 26 | 27 | const selectedTheme = writable('Default Theme'); 28 | 29 | const getNewInstance = derived( 30 | [themeProviders, selectedTheme], 31 | ([$providers, $theme]) => $providers[$theme] 32 | ); 33 | 34 | export let reset: VoidFunction; 35 | 36 | const currentInstance = derived, IPageTheme>( 37 | getNewInstance, 38 | ($getNewInstance: ThemeInitializer, set: (theme: IPageTheme) => void) => { 39 | reset = () => { 40 | const instance = $getNewInstance(); 41 | instance.selected = instance.viewer; 42 | set(instance); 43 | }; 44 | reset(); // initialize 45 | } 46 | ); 47 | 48 | const getWritableThemePart = ( 49 | currentTheme: Readable, 50 | getThemePart: (theme: IPageTheme) => T 51 | ): Writable => 52 | writable(getThemePart({}), (set: (x: T) => void) => 53 | currentTheme.subscribe((theme: IPageTheme) => set(getThemePart(theme))) 54 | ); 55 | 56 | const headerStyles = getWritableThemePart( 57 | currentInstance, 58 | ($theme: IPageTheme) => $theme.header 59 | ); 60 | const primaryButtonStyles = getWritableThemePart( 61 | currentInstance, 62 | ($theme) => $theme.primaryButton 63 | ); 64 | const secondaryButtonStyles = getWritableThemePart( 65 | currentInstance, 66 | ($theme) => $theme.secondaryButton 67 | ); 68 | const selectStyles = getWritableThemePart( 69 | currentInstance, 70 | ($theme) => $theme.select 71 | ); 72 | const pageStyles = getWritableThemePart( 73 | currentInstance, 74 | ($theme) => $theme.viewer 75 | ); 76 | const textFieldStyles = getWritableThemePart( 77 | currentInstance, 78 | ($theme) => $theme.textField 79 | ); 80 | const checkboxStyles = getWritableThemePart( 81 | currentInstance, 82 | ($theme) => $theme.checkbox 83 | ); 84 | const tableStyles = getWritableThemePart( 85 | currentInstance, 86 | ($theme) => $theme.table 87 | ); 88 | const cardStyles = getWritableThemePart( 89 | currentInstance, 90 | ($theme) => $theme.card 91 | ); 92 | const tooltipStyles = getWritableThemePart( 93 | currentInstance, 94 | ($theme) => $theme.tooltip 95 | ); 96 | 97 | const selectedStyle = getWritableThemePart( 98 | currentInstance, 99 | ($theme) => $theme.selected 100 | ); 101 | 102 | // HMR handler 103 | // 104 | // NOTE this assumes that the only way this module can be impacted by a HMR 105 | // update is if the theme providers change 106 | // 107 | // NOTE 2 AFAIK, last time I checked, Snowpack HMR doesn't support changing 108 | // (adding, renaming...) the named exports of a module, so most update to the 109 | // current module will probably need a full reload anyway 110 | // 111 | 112 | // @ts-ignore 113 | if (import.meta.hot) { 114 | // @ts-ignore 115 | import.meta.hot.accept(({ module }) => { 116 | themeProviders.set(get(module.themeProviders)); 117 | }); 118 | } 119 | 120 | export { 121 | headerStyles, 122 | primaryButtonStyles, 123 | secondaryButtonStyles, 124 | selectStyles, 125 | pageStyles, 126 | textFieldStyles, 127 | checkboxStyles, 128 | tableStyles, 129 | cardStyles, 130 | selectedTheme, 131 | tooltipStyles, 132 | getNewInstance, 133 | selectedStyle, 134 | }; 135 | -------------------------------------------------------------------------------- /src/utils.ts: -------------------------------------------------------------------------------- 1 | import type { IStyle } from './IStyle'; 2 | import type { Variant } from './Variant'; 3 | 4 | const getStyles = ( 5 | styles: (IStyle | IStyle[] | string | undefined)[], 6 | variant?: Variant 7 | ): string => { 8 | return styles 9 | .filter((x: IStyle | IStyle[] | undefined) => !!x) 10 | .map((x: IStyle | IStyle[] | string) => { 11 | if (!!(x as IStyle).toStyles) { 12 | return (x as IStyle).toStyles(); 13 | } else if (Array.isArray(x)) { 14 | return getStyles(x); 15 | } else { 16 | if (variant) { 17 | return `${variant}${x}`; 18 | } else { 19 | return x; 20 | } 21 | } 22 | }) 23 | .join(' ') 24 | .trim(); 25 | }; 26 | 27 | export { getStyles }; 28 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | const sveltePreprocess = require('svelte-preprocess'); 2 | 3 | module.exports = { 4 | preprocess: sveltePreprocess({ 5 | defaults: { 6 | script: 'typescript', 7 | }, 8 | postcss: { 9 | plugins: [require('tailwindcss'), require('autoprefixer')], 10 | }, 11 | }), 12 | }; 13 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('tailwindcss-filters')], 3 | theme: { 4 | filter: { 5 | // defaults to {} 6 | none: 'none', 7 | grayscale: 'grayscale(1)', 8 | invert: 'invert(1)', 9 | sepia: 'sepia(1)', 10 | }, 11 | backdropFilter: { 12 | // defaults to {} 13 | none: 'none', 14 | 'blur-0': 'none', 15 | 'blur-1': 'blur(1px)', 16 | 'blur-2': 'blur(2px)', 17 | 'blur-3': 'blur(3px)', 18 | 'blur-4': 'blur(4px)', 19 | 'blur-5': 'blur(5px)', 20 | 'blur-6': 'blur(6px)', 21 | 'blur-7': 'blur(7px)', 22 | 'blur-8': 'blur(8px)', 23 | 'blur-9': 'blur(9px)', 24 | 'blur-10': 'blur(10px)', 25 | 'blur-11': 'blur(11px)', 26 | 'blur-12': 'blur(12px)', 27 | 'blur-13': 'blur(13px)', 28 | 'blur-14': 'blur(14px)', 29 | 'blur-15': 'blur(15px)', 30 | 'blur-16': 'blur(16px)', 31 | 'blur-17': 'blur(17px)', 32 | 'blur-18': 'blur(18px)', 33 | 'blur-19': 'blur(19px)', 34 | 'blur-20': 'blur(20px)', 35 | blur: 'blur(20px)', 36 | }, 37 | }, 38 | variants: { 39 | filter: ['responsive', 'hover', 'active'], // defaults to ['responsive'] 40 | backdropFilter: ['responsive', 'hover', 'active'], 41 | extend: { 42 | backgroundColor: ['checked'], 43 | }, 44 | }, 45 | purge: { 46 | content: [ 47 | './src/**/*.svelte', 48 | // may also want to include base index.html 49 | ], 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | 4 | "include": ["src/**/*", "snowpack.config.js"], 5 | "exclude": ["node_modules/*", "__sapper__/*", "public/*"], 6 | } --------------------------------------------------------------------------------