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-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"node-sass": "^7.0.1",
|
||||
"postcss": "^8.4.14",
|
||||
"postcss-cli": "^9.1.0",
|
||||
"postcss-import": "^14.1.0",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-theme="black">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
import { EditorView } from 'prosemirror-view';
|
||||
import type { EditorState } from 'prosemirror-state';
|
||||
|
||||
import colors from '../shared/styling/colors';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
/** @type string */
|
||||
@ -83,14 +85,19 @@
|
||||
};
|
||||
|
||||
//on:custom={onCustomEvent}
|
||||
|
||||
export let textColor = colors.almostBlack;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class={className}
|
||||
class:ProseMirror={true}
|
||||
class:prose={true}
|
||||
class:prose-sm={true}
|
||||
class:editor_empty={editorIsEmpty}
|
||||
data-placeholder={placeholder}
|
||||
bind:this={editor}
|
||||
style="--textColor: {textColor}"
|
||||
on:focus
|
||||
on:blur
|
||||
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 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>
|
||||
|
||||
<Meta
|
||||
title="Example/Editor"
|
||||
component={RichTextEditor104}
|
||||
component={Editor}
|
||||
argTypes={{
|
||||
label: { control: 'text' },
|
||||
primary: { control: 'boolean' },
|
||||
backgroundColor: { control: 'color' },
|
||||
size: {
|
||||
control: { type: 'select', options: ['xs', 'sm', 'md', 'lg'] }
|
||||
},
|
||||
onClick: { action: 'onClick' }
|
||||
placeholder: { control: 'text' }
|
||||
}}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<RichTextEditor104 {...args} on:click={args.onClick} />
|
||||
<Editor {editorState} {...args} />
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
|
||||
@ -2,29 +2,29 @@ module.exports = {
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
theme: {
|
||||
colors: {
|
||||
'blue': '#1fb6ff',
|
||||
'purple': '#7e5bef',
|
||||
'pink': '#ff49db',
|
||||
'orange': '#ff7849',
|
||||
'green': '#13ce66',
|
||||
'yellow': '#ffc82c',
|
||||
blue: '#1fb6ff',
|
||||
purple: '#7e5bef',
|
||||
pink: '#ff49db',
|
||||
orange: '#ff7849',
|
||||
green: '#13ce66',
|
||||
yellow: '#ffc82c',
|
||||
'gray-dark': '#273444',
|
||||
'gray': '#8492a6',
|
||||
'gray-light': '#d3dce6',
|
||||
gray: '#8492a6',
|
||||
'gray-light': '#d3dce6'
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Graphik', 'sans-serif'],
|
||||
serif: ['Merriweather', 'serif'],
|
||||
serif: ['Merriweather', 'serif']
|
||||
},
|
||||
extend: {
|
||||
spacing: {
|
||||
'8xl': '96rem',
|
||||
'9xl': '128rem',
|
||||
'9xl': '128rem'
|
||||
},
|
||||
borderRadius: {
|
||||
'4xl': '2rem',
|
||||
'4xl': '2rem'
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [require("daisyui")],
|
||||
}
|
||||
plugins: [require('@tailwindcss/typography'), require('daisyui')]
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user