git.iko.soy/rowtype-yoga/psfp
on d8d1ae7 help sign in
rowtype-yoga/psfp/stories/ThemeStories.purs
99 lines 3.7 kB history raw
1module ThemeStories where
3import Prelude hiding (add)
5import Effect (Effect)
6import React.Basic.DOM (css)
7import React.Basic.DOM as R
8import React.Basic.Hooks (component, element)
9import Storybook.React (Storybook, add, storiesOf)
10import Theme (fromTheme)
11import Theme.Default (darkTheme, lightTheme)
13stories ∷ Effect Storybook
14stories =
15 storiesOf "Theme" do
16 add "The swatches in the themes" mkExample
17 [ { theme: darkTheme, themeName: "Dark theme" }
18 , { theme: lightTheme, themeName: "Light theme" }
19 ]
20 where
21 mkExample = do
22 swatch <- mkSwatch
23 component "ExampleSwatches" \{ theme, themeName } -> React.do
24 let
25 cssTheme = fromTheme theme
27 sw name colour = element swatch { name, colour, fontFamily: cssTheme.textFontFamily }
28 pure
29 $ R.div
30 { style:
31 css
32 { color: cssTheme.textColour
33 , backgroundColor: cssTheme.backgroundColour
34 }
35 , children:
36 [ R.div
37 { style:
38 css
39 { fontSize: "2em"
40 , fontFamily: cssTheme.headingFontFamily
41 , padding: "20px 0 30px 10px"
42 }
43 , children: [ R.text themeName ]
44 }
45 , R.div
46 { style:
47 css
48 { display: "grid"
49 , gridTemplateColumns: "120px 120px 120px 120px 120px 120px"
50 , gridRowGap: "20px"
51 , paddingBottom: "20px"
52 }
53 , children:
54 [ sw "IF Darkest" cssTheme.interfaceColourDarkest
55 , sw "IF Darker" cssTheme.interfaceColourDarker
56 , sw "Interface" cssTheme.interfaceColour
57 , sw "IF Lighter" cssTheme.interfaceColourLighter
58 , sw "IF Lightest" cssTheme.interfaceColourLightest
59 , sw "Highlight" cssTheme.highlightColour
60 , sw "TXT Darkest" cssTheme.textColourDarkest
61 , sw "TXT Darker" cssTheme.textColourDarker
62 , sw "TXT" cssTheme.textColour
63 , sw "TXT Lighter" cssTheme.textColourLighter
64 , sw "TXT Lightest" cssTheme.textColourLightest
65 , sw "HighlightDK" cssTheme.highlightColourDark
66 ]
67 }
68 ]
69 }
71 mkSwatch = do
72 component "Swatch" \{ name, colour, fontFamily } -> React.do
73 pure
74 $ R.div
75 { style: css{ display: "flex", flexDirection: "column", alignItems: "center" }
76 , children:
77 [ R.div
78 { children: [ R.text name ]
79 , style: css{ fontFamily, paddingBottom: "5px" }
80 }
81 , R.div
82 { style:
83 css
84 { background: colour
85 , width: "100px"
86 , height: "100px"
87 , outline: "2px solid black"
88 }
89 }
90 ]
91 }
93loremIpsum ∷ String
94loremIpsum =
95 """PureScript is a strongly-typed, purely-functional programming language that compiles"""
96 <> """ to JavaScript. It can be used to develop web applications, server side apps, and al"""
97 <> """so desktop applications with use of Electron. Its syntax is mostly comparable to tha"""
98 <> """t of Haskell. In addition, it introduces row polymorphism and extensible records.[2]"""
99 <> """ Also, contrary to Haskell, PureScript adheres to a strict evaluation strategy."""