generated from laur/svelte-tailwind-storybook
Use the tailwind css typography.
This commit is contained in:
parent
f5685df6a7
commit
77cb482a76
@ -39,6 +39,7 @@
|
|||||||
"eslint": "^8.12.0",
|
"eslint": "^8.12.0",
|
||||||
"eslint-config-prettier": "^8.3.0",
|
"eslint-config-prettier": "^8.3.0",
|
||||||
"eslint-plugin-svelte3": "^4.0.0",
|
"eslint-plugin-svelte3": "^4.0.0",
|
||||||
|
"node-sass": "^7.0.1",
|
||||||
"postcss": "^8.4.14",
|
"postcss": "^8.4.14",
|
||||||
"postcss-cli": "^9.1.0",
|
"postcss-cli": "^9.1.0",
|
||||||
"postcss-import": "^14.1.0",
|
"postcss-import": "^14.1.0",
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en" data-theme="black">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
|
|||||||
@ -3,6 +3,8 @@
|
|||||||
import { EditorView } from 'prosemirror-view';
|
import { EditorView } from 'prosemirror-view';
|
||||||
import type { EditorState } from 'prosemirror-state';
|
import type { EditorState } from 'prosemirror-state';
|
||||||
|
|
||||||
|
import colors from '../shared/styling/colors';
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
/** @type string */
|
/** @type string */
|
||||||
@ -83,14 +85,19 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
//on:custom={onCustomEvent}
|
//on:custom={onCustomEvent}
|
||||||
|
|
||||||
|
export let textColor = colors.almostBlack;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class={className}
|
class={className}
|
||||||
class:ProseMirror={true}
|
class:ProseMirror={true}
|
||||||
|
class:prose={true}
|
||||||
|
class:prose-sm={true}
|
||||||
class:editor_empty={editorIsEmpty}
|
class:editor_empty={editorIsEmpty}
|
||||||
data-placeholder={placeholder}
|
data-placeholder={placeholder}
|
||||||
bind:this={editor}
|
bind:this={editor}
|
||||||
|
style="--textColor: {textColor}"
|
||||||
on:focus
|
on:focus
|
||||||
on:blur
|
on:blur
|
||||||
on:keydown
|
on:keydown
|
||||||
|
|||||||
32
src/lib/shared/styling/colors.ts
Normal file
32
src/lib/shared/styling/colors.ts
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
const colors = {
|
||||||
|
transparent: 'transparent',
|
||||||
|
almostBlack: '#111319',
|
||||||
|
lightBlack: '#2F3336',
|
||||||
|
almostWhite: '#E6E6E6',
|
||||||
|
veryDarkBlue: '#08090C',
|
||||||
|
slate: '#9BA6B2',
|
||||||
|
slateLight: '#DAE1E9',
|
||||||
|
slateDark: '#394351',
|
||||||
|
smoke: '#F4F7FA',
|
||||||
|
smokeLight: '#F9FBFC',
|
||||||
|
smokeDark: '#E8EBED',
|
||||||
|
white: '#FFF',
|
||||||
|
white05: 'rgba(255, 255, 255, 0.05)',
|
||||||
|
white10: 'rgba(255, 255, 255, 0.1)',
|
||||||
|
white50: 'rgba(255, 255, 255, 0.5)',
|
||||||
|
white75: 'rgba(255, 255, 255, 0.75)',
|
||||||
|
black: '#000',
|
||||||
|
black05: 'rgba(0, 0, 0, 0.05)',
|
||||||
|
black10: 'rgba(0, 0, 0, 0.1)',
|
||||||
|
black50: 'rgba(0, 0, 0, 0.50)',
|
||||||
|
primary: '#0366d6',
|
||||||
|
yellow: '#EDBA07',
|
||||||
|
warmGrey: '#EDF2F7',
|
||||||
|
searchHighlight: '#FDEA9B',
|
||||||
|
danger: '#ff476f',
|
||||||
|
warning: '#f08a24',
|
||||||
|
success: '#2f3336',
|
||||||
|
info: '#a0d3e8'
|
||||||
|
};
|
||||||
|
|
||||||
|
export default colors;
|
||||||
8
src/lib/shared/styling/fonts.ts
Normal file
8
src/lib/shared/styling/fonts.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
const fonts = {
|
||||||
|
fontFamily:
|
||||||
|
"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
|
||||||
|
fontFamilyMono: "'SFMono-Regular',Consolas,'Liberation Mono', Menlo, Courier,monospace",
|
||||||
|
fontWeight: 400
|
||||||
|
};
|
||||||
|
|
||||||
|
export default fonts;
|
||||||
@ -1,24 +1,38 @@
|
|||||||
<script>
|
<script lang="ts">
|
||||||
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
||||||
import RichTextEditor104 from '../lib/editor/examples/RichTextEditor104.svelte';
|
import Editor from '../lib/editor/Editor.svelte';
|
||||||
|
|
||||||
|
import { createMarkdownEditor } from '../lib/editor/examples/MarkdownEditor';
|
||||||
|
|
||||||
|
let content = `
|
||||||
|
# H1
|
||||||
|
|
||||||
|
## H2
|
||||||
|
|
||||||
|
## H3
|
||||||
|
|
||||||
|
This is *some* **text**
|
||||||
|
|
||||||
|
* bullet
|
||||||
|
* bullet
|
||||||
|
|
||||||
|
1. one
|
||||||
|
1. two
|
||||||
|
1. three`;
|
||||||
|
|
||||||
|
let editorState = createMarkdownEditor((content = content));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Meta
|
<Meta
|
||||||
title="Example/Editor"
|
title="Example/Editor"
|
||||||
component={RichTextEditor104}
|
component={Editor}
|
||||||
argTypes={{
|
argTypes={{
|
||||||
label: { control: 'text' },
|
placeholder: { control: 'text' }
|
||||||
primary: { control: 'boolean' },
|
|
||||||
backgroundColor: { control: 'color' },
|
|
||||||
size: {
|
|
||||||
control: { type: 'select', options: ['xs', 'sm', 'md', 'lg'] }
|
|
||||||
},
|
|
||||||
onClick: { action: 'onClick' }
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Template let:args>
|
<Template let:args>
|
||||||
<RichTextEditor104 {...args} on:click={args.onClick} />
|
<Editor {editorState} {...args} />
|
||||||
</Template>
|
</Template>
|
||||||
|
|
||||||
<Story
|
<Story
|
||||||
|
|||||||
@ -2,29 +2,29 @@ module.exports = {
|
|||||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||||
theme: {
|
theme: {
|
||||||
colors: {
|
colors: {
|
||||||
'blue': '#1fb6ff',
|
blue: '#1fb6ff',
|
||||||
'purple': '#7e5bef',
|
purple: '#7e5bef',
|
||||||
'pink': '#ff49db',
|
pink: '#ff49db',
|
||||||
'orange': '#ff7849',
|
orange: '#ff7849',
|
||||||
'green': '#13ce66',
|
green: '#13ce66',
|
||||||
'yellow': '#ffc82c',
|
yellow: '#ffc82c',
|
||||||
'gray-dark': '#273444',
|
'gray-dark': '#273444',
|
||||||
'gray': '#8492a6',
|
gray: '#8492a6',
|
||||||
'gray-light': '#d3dce6',
|
'gray-light': '#d3dce6'
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ['Graphik', 'sans-serif'],
|
sans: ['Graphik', 'sans-serif'],
|
||||||
serif: ['Merriweather', 'serif'],
|
serif: ['Merriweather', 'serif']
|
||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
spacing: {
|
spacing: {
|
||||||
'8xl': '96rem',
|
'8xl': '96rem',
|
||||||
'9xl': '128rem',
|
'9xl': '128rem'
|
||||||
},
|
},
|
||||||
borderRadius: {
|
borderRadius: {
|
||||||
'4xl': '2rem',
|
'4xl': '2rem'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
plugins: [require("daisyui")],
|
plugins: [require('@tailwindcss/typography'), require('daisyui')]
|
||||||
}
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user