Colours

src/Yoga/Block/Atom/Button/Story.purs

@@ -9,6 +9,7 @@ import React.Basic.Emotion as E
 import React.Basic.Events (handler_)
 import Yoga.Block.Atom.Button.View as Button
 import Yoga.Block.Container.Style as Styles
+import Yoga ((</), (/>))
 
 default ∷
   { decorators ∷ Array (Effect JSX -> JSX)
@@ -32,6 +33,6 @@ button = do
         [ R.div_
             [ R.h1_ [ R.text "Button Examples" ]
             , R.h2_ [ R.text "Generic Button" ]
-            , element Button.component { value: "A Generic Button", onClick: handler_ mempty }
+            , Button.component </ { onClick: handler_ mempty } /> [ R.text "Click" ]
             ]
         ]

src/Yoga/Block/Atom/Button/Style.purs

@@ -1,11 +1,47 @@
 module Yoga.Block.Atom.Button.Style where
 
 import Yoga.Prelude.Style
+import Data.Interpolate (i)
+import Yoga.Block.Container.Style (colour)
 
-type Props f r
-  = ( css ∷ f Style
-    | r
-    )
+type Props f r =
+  ( css ∷ f Style
+  | r
+  )
 
-button :: Style
-button = css {}
+button ∷ Style
+button =
+  css
+    { background:
+      str
+        $ i "linear-gradient(180deg,"
+            colour.highlightLighter
+            ","
+            colour.highlightDarker
+            "), linear-gradient(225deg,"
+            colour.highlightRotatedBackwards
+            ","
+            colour.highlightRotatedForwards
+            ")"
+    , color: str colour.highlightText
+    , fontSize: var "--s0"
+    , fontFamily: var "--mainFont"
+    , fontWeight: str "550"
+    , padding: str "var(--s-1) var(--s0)"
+    , borderRadius: var "--s0"
+    , border: str $ "var(--s-5) solid " <> colour.interfaceBackgroundShadow
+    , borderWidth: _0
+    , """&[data-button-shape="pill"]""":
+      nest
+        { borderRadius: var "--s1"
+        , padding: str "var(--s-1) var(--s1)"
+        }
+    , """&[data-button-shape="square"]""":
+      nest
+        { borderRadius: _0
+        , padding: str "var(--s-1) var(--s1)"
+        }
+    , """&[data-button-type="primary"]""":
+      nest
+        {}
+    }

src/Yoga/Block/Atom/Button/View.purs

@@ -7,18 +7,18 @@ import Yoga.Block.Atom.Button.Style as Style
 import Yoga.Block.Atom.Button.Types (ButtonType)
 import Yoga.Block.Internal (ButtonProps, emotionButton)
 
-type PropsF f
-  = ( buttonType ∷ f ButtonType
-    | Style.Props f ButtonProps
-    )
+type PropsF f =
+  ( buttonType ∷ f ButtonType
+  | Style.Props f ButtonProps
+  )
 
-type Props
-  = PropsF Id
+type Props =
+  PropsF Id
 
-type PropsOptional
-  = PropsF OptionalProp
+type PropsOptional =
+  PropsF OptionalProp
 
-key :: forall t1. SProxy t1
+key ∷ ∀ t1. SProxy t1
 key = SProxy
 
 component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p }
@@ -32,7 +32,7 @@ rawComponent =
         $ emotionButton propsRef
             ( props
                 # RB.build
-                    ( RB.delete (key :: _ "css") >>> RB.delete (key :: _ "buttonType")
+                    ( RB.delete (key ∷ _ "css") >>> RB.delete (key ∷ _ "buttonType")
                     )
             )
             { className: "ry-button"

src/Yoga/Block/Atom/Popover/Story.purs

@@ -60,237 +60,246 @@ popover = do
             ]
         ]
   where
-  mkAutosuggest ∷ Effect (ReactComponent {})
-  mkAutosuggest = do
-    motionStack <- Motion.custom Stack.component
-    motionPopover <- Motion.custom Popover.component
-    reactComponent "PopoverExample" \props -> React.do
-      referenceElement /\ setReferenceElement <- React.useState' nullRef
-      text /\ setText <- React.useState' ""
-      visible /\ setVisible <- React.useState' false
-      let
-        matchingAuthors =
-          authors
-            # Array.filter (\a -> String.contains (String.Pattern (String.toLower text)) (String.toLower a))
-      let
-        inputWrapper =
-          R.div'
-            </ { ref: unsafeCoerce (mkEffectFn1 setReferenceElement)
-              }
-        input =
-          Input.component
-            </> { id: "author"
-              , type: HTMLInput.Text
-              , label: nes (SProxy ∷ _ "Author")
-              , placeholder: "e.g. William Shakespeare"
-              , value: text
-              , style: css { width: "280px" }
-              , onChange: handler targetValue $ traverse_ setText
-              , onBlur: handler_ (setVisible false)
-              , onFocus: handler_ (setVisible true)
-              , trailing: R.text "▼"
-              , autoComplete: "off"
-              }
-        pop children =
-          elementKeyed motionPopover
-            $ Motion.motion
-                { initial: Motion.initial $ css { clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" }
-                , exit: Motion.exit $ css { clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" }
-                , animate: Motion.animate $ css { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" }
-                , transition:
-                  Motion.transition
-                    $ { type: "spring"
-                      , stiffness: 200.0
-                      , damping: 20.0
-                      , mass: 0.7
-                      , delay: 0.3
+    mkAutosuggest ∷ Effect (ReactComponent {})
+    mkAutosuggest = do
+      motionStack <- Motion.custom Stack.component
+      motionPopover <- Motion.custom Popover.component
+      reactComponent "PopoverExample" \props -> React.do
+        referenceElement /\ setReferenceElement <- React.useState' nullRef
+        text /\ setText <- React.useState' ""
+        visible /\ setVisible <- React.useState' false
+        let
+          matchingAuthors =
+            authors
+              # Array.filter
+                  ( \a ->
+                      String.contains (String.Pattern (String.toLower text))
+                        (String.toLower a)
+                  )
+        let
+          inputWrapper =
+            R.div'
+              </ { ref: unsafeCoerce (mkEffectFn1 setReferenceElement)
+                }
+          input =
+            Input.component
+              </> { id: "author"
+                , type: HTMLInput.Text
+                , label: nes (SProxy ∷ _ "Author")
+                , placeholder: "e.g. William Shakespeare"
+                , value: text
+                , style: css { width: "280px" }
+                , onChange: handler targetValue $ traverse_ setText
+                , onBlur: handler_ (setVisible false)
+                , onFocus: handler_ (setVisible true)
+                , trailing: R.text "▼"
+                , autoComplete: "off"
+                }
+          pop children =
+            elementKeyed motionPopover
+              $ Motion.motion
+                  { initial:
+                    css { clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" }
+                  , exit:
+                    css { clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" }
+                  , animate:
+                    css
+                      { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
                       }
-                }
-                { placement: Placement Placement.Bottom (Just Placement.Start)
-                , referenceElement
-                , style:
+                  , transition:
+                    Motion.transition
+                      $ { type: "spring"
+                        , stiffness: 200.0
+                        , damping: 20.0
+                        , mass: 0.7
+                        , delay: 0.3
+                        }
+                  }
+                  { placement: Placement Placement.Bottom (Just Placement.Start)
+                  , referenceElement
+                  , style:
+                    css
+                      { boxShadow: "0px 9px 12px rgba(40,40,40,0.5)"
+                      , background: "rgba(50,50,70, 0.7)"
+                      , borderRadius: "9px"
+                      , borderTop: "solid 1px rgba(80,80,100,1.0)"
+                      , overflowY: "scroll"
+                      , maxHeight: "400px"
+                      , width: "300px"
+                      }
+                  , key: "popover"
+                  , children
+                  }
+          box =
+            Box.component
+              </ { style:
                   css
-                    { boxShadow: "0px 9px 12px rgba(40,40,40,0.5)"
-                    , background: "rgba(50,50,70, 0.7)"
-                    , borderRadius: "9px"
-                    , borderTop: "solid 1px rgba(80,80,100,1.0)"
-                    , overflowY: "scroll"
-                    , maxHeight: "400px"
-                    , width: "300px"
-                    }
-                , key: "popover"
-                , children
+                    {}
                 }
-        box =
-          Box.component
-            </ { style:
-                css
+          stack =
+            motionStack
+              </ Motion.motion {}
+                  -- { variants: Motion.variants containerVariants
+                  -- , animate: Motion.animate (if visible then containerVariant.visible else containerVariant.hidden)
+                  -- , layout: Motion.layout true
+                  -- }
                   {}
-              }
-        stack =
-          motionStack
-            </ Motion.motion {}
-                -- { variants: Motion.variants containerVariants
-                -- , animate: Motion.animate (if visible then containerVariant.visible else containerVariant.hidden)
+          entry a =
+            Motion.div
+              </ { key: a
                 -- , layout: Motion.layout true
-                -- }
-                {}
-        entry a =
-          Motion.div
-            </ { key: a
-              -- , layout: Motion.layout true
-              -- , variants: Motion.variants itemVariants
+                -- , variants: Motion.variants itemVariants
+                }
+              /> [ R.text a ]
+        pure
+          $ fragment
+              [ inputWrapper [ input ]
+              , animatePresence
+                  </ {}
+                  /> [ guard visible
+                        $ pop
+                            [ box
+                                [ stack (entry <$> matchingAuthors)
+                                ]
+                            ]
+                    ]
+              ]
+      where
+        itemVariants ∷
+          { hidden ∷ CSS
+          , visible ∷ CSS
+          }
+        itemVariants =
+          { visible:
+            css
+              { left: 0
+              }
+          , hidden:
+            css
+              { left: -20
               }
-            /> [ R.text a ]
-      pure
-        $ fragment
-            [ inputWrapper [ input ]
-            , animatePresence
-                </ {}
-                /> [ guard visible
-                      $ pop
-                          [ box
-                              [ stack (entry <$> matchingAuthors)
-                              ]
-                          ]
-                  ]
-            ]
-    where
-    itemVariants ∷
-      { hidden ∷ CSS
-      , visible ∷ CSS
-      }
-    itemVariants =
-      { visible:
-        css
-          { left: 0
           }
-      , hidden:
-        css
-          { left: -20
-          }
-      }
 
-    containerVariants ∷
-      { hidden ∷ CSS
-      , visible ∷ CSS
-      }
-    containerVariants =
-      { visible:
-        css
-          { transition: { when: "beforeChildren" }
-          , staggerChildren: 0.3
-          , opacity: 1
+        containerVariants ∷
+          { hidden ∷ CSS
+          , visible ∷ CSS
           }
-      , hidden:
-        css
-          { transition: { when: "afterChildren" }
-          , opacity: 0
+        containerVariants =
+          { visible:
+            css
+              { transition: { when: "beforeChildren" }
+              , staggerChildren: 0.3
+              , opacity: 1
+              }
+          , hidden:
+            css
+              { transition: { when: "afterChildren" }
+              , opacity: 0
+              }
           }
-      }
 
-    containerVariant ∷
-      { hidden ∷ Motion.VariantLabel
-      , visible ∷ Motion.VariantLabel
-      }
-    containerVariant = Motion.makeVariantLabels containerVariants
+        containerVariant ∷
+          { hidden ∷ Motion.VariantLabel
+          , visible ∷ Motion.VariantLabel
+          }
+        containerVariant = Motion.makeVariantLabels containerVariants
 
-    authors =
-      [ "William Shakespeare"
-      , "Agatha Christie"
-      , "Barbara Cartland"
-      , "Danielle Steel"
-      , "Harold Robbins"
-      , "Georges Simenon"
-      , "Enid Blyton"
-      , "Sidney Sheldon"
-      , "J. K. Rowling"
-      , "Gilbert Patten"
-      , "Dr. Seuss"
-      , "Eiichiro Oda"
-      , "Leo Tolstoy"
-      , "Corín Tellado"
-      , "Jackie Collins"
-      , "Horatio Alger"
-      , "R. L. Stine"
-      , "Dean Koontz"
-      , "Nora Roberts"
-      , "Alexander Pushkin"
-      , "Stephen King"
-      , "Paulo Coelho"
-      , "Jeffrey Archer"
-      , "Louis L'Amour"
-      , "Jirō Akagawa"
-      , "René Goscinny"
-      , "Erle Stanley Gardner"
-      , "Edgar Wallace"
-      , "Jin Yong"
-      , "Janet Dailey"
-      , "Robert Ludlum"
-      , "Akira Toriyama"
-      , "Osamu Tezuka"
-      , "James Patterson"
-      , "Frédéric Dard"
-      , "Stan and Jan Berenstain"
-      , "Roald Dahl"
-      , "John Grisham"
-      , "Zane Grey"
-      , "Irving Wallace"
-      , "J. R. R. Tolkien"
-      , "Masashi Kishimoto"
-      , "Karl May"
-      , "Carter Brown"
-      , "Mickey Spillane"
-      , "C. S. Lewis"
-      , "Kyotaro Nishimura"
-      , "Mitsuru Adachi"
-      , "Rumiko Takahashi"
-      , "Gosho Aoyama"
-      , "Dan Brown"
-      , "Ann M. Martin"
-      , "Ryōtarō Shiba"
-      , "Arthur Hailey"
-      , "Gérard de Villiers"
-      , "Beatrix Potter"
-      , "Michael Crichton"
-      , "Richard Scarry"
-      , "Clive Cussler"
-      , "Alistair MacLean"
-      , "Ken Follett"
-      , "Astrid Lindgren"
-      , "Debbie Macomber"
-      , "EL James"
-      , "Tite Kubo"
-      , "Eiji Yoshikawa"
-      , "Catherine Cookson"
-      , "Stephenie Meyer"
-      , "Norman Bridwell"
-      , "David Baldacci"
-      , "Nicholas Sparks"
-      , "Hirohiko Araki"
-      , "Evan Hunter"
-      , "Andrew Neiderman"
-      , "Roger Hargreaves"
-      , "Anne Rice"
-      , "Robin Cook"
-      , "Wilbur Smith"
-      , "Erskine Caldwell"
-      , "Judith Krantz"
-      , "Eleanor Hibbert"
-      , "Lewis Carroll"
-      , "Denise Robins"
-      , "Cao Xueqin"
-      , "Ian Fleming"
-      , "Hermann Hesse"
-      , "Rex Stout"
-      , "Anne Golon"
-      , "Frank G. Slaughter"
-      , "Edgar Rice Burroughs"
-      , "John Creasey"
-      , "James A. Michener"
-      , "Yasuo Uchida"
-      , "Seiichi Morimura"
-      , "Mary Higgins Clark"
-      , "Penny Jordan"
-      , "Patricia Cornwell"
-      ]
+        authors =
+          [ "William Shakespeare"
+          , "Agatha Christie"
+          , "Barbara Cartland"
+          , "Danielle Steel"
+          , "Harold Robbins"
+          , "Georges Simenon"
+          , "Enid Blyton"
+          , "Sidney Sheldon"
+          , "J. K. Rowling"
+          , "Gilbert Patten"
+          , "Dr. Seuss"
+          , "Eiichiro Oda"
+          , "Leo Tolstoy"
+          , "Corín Tellado"
+          , "Jackie Collins"
+          , "Horatio Alger"
+          , "R. L. Stine"
+          , "Dean Koontz"
+          , "Nora Roberts"
+          , "Alexander Pushkin"
+          , "Stephen King"
+          , "Paulo Coelho"
+          , "Jeffrey Archer"
+          , "Louis L'Amour"
+          , "Jirō Akagawa"
+          , "René Goscinny"
+          , "Erle Stanley Gardner"
+          , "Edgar Wallace"
+          , "Jin Yong"
+          , "Janet Dailey"
+          , "Robert Ludlum"
+          , "Akira Toriyama"
+          , "Osamu Tezuka"
+          , "James Patterson"
+          , "Frédéric Dard"
+          , "Stan and Jan Berenstain"
+          , "Roald Dahl"
+          , "John Grisham"
+          , "Zane Grey"
+          , "Irving Wallace"
+          , "J. R. R. Tolkien"
+          , "Masashi Kishimoto"
+          , "Karl May"
+          , "Carter Brown"
+          , "Mickey Spillane"
+          , "C. S. Lewis"
+          , "Kyotaro Nishimura"
+          , "Mitsuru Adachi"
+          , "Rumiko Takahashi"
+          , "Gosho Aoyama"
+          , "Dan Brown"
+          , "Ann M. Martin"
+          , "Ryōtarō Shiba"
+          , "Arthur Hailey"
+          , "Gérard de Villiers"
+          , "Beatrix Potter"
+          , "Michael Crichton"
+          , "Richard Scarry"
+          , "Clive Cussler"
+          , "Alistair MacLean"
+          , "Ken Follett"
+          , "Astrid Lindgren"
+          , "Debbie Macomber"
+          , "EL James"
+          , "Tite Kubo"
+          , "Eiji Yoshikawa"
+          , "Catherine Cookson"
+          , "Stephenie Meyer"
+          , "Norman Bridwell"
+          , "David Baldacci"
+          , "Nicholas Sparks"
+          , "Hirohiko Araki"
+          , "Evan Hunter"
+          , "Andrew Neiderman"
+          , "Roger Hargreaves"
+          , "Anne Rice"
+          , "Robin Cook"
+          , "Wilbur Smith"
+          , "Erskine Caldwell"
+          , "Judith Krantz"
+          , "Eleanor Hibbert"
+          , "Lewis Carroll"
+          , "Denise Robins"
+          , "Cao Xueqin"
+          , "Ian Fleming"
+          , "Hermann Hesse"
+          , "Rex Stout"
+          , "Anne Golon"
+          , "Frank G. Slaughter"
+          , "Edgar Rice Burroughs"
+          , "John Creasey"
+          , "James A. Michener"
+          , "Yasuo Uchida"
+          , "Seiichi Morimura"
+          , "Mary Higgins Clark"
+          , "Penny Jordan"
+          , "Patricia Cornwell"
+          ]

src/Yoga/Block/Container/Style.purs

@@ -90,6 +90,7 @@ mkGlobal maybeMode =
     , "::selection":
       nest
         { background: str colour.highlight
+        , colour: str colour.highlightText
         }
     , "*, *:before, *:after":
       nested
@@ -98,6 +99,11 @@ mkGlobal maybeMode =
             }
     }
 
+withAlpha ∷ Number -> Color -> Color
+withAlpha alpha c1 = Color.rgba' r g b alpha
+  where
+    { r, g, b } = Color.toRGBA' c1
+
 defaultColours ∷ Colours
 defaultColours =
   { light:
@@ -132,6 +138,10 @@ defaultColours =
     , inputBackground: lightBg
     , inputBorder: darken 0.1 lightBg
     , highlight
+    , highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlight)
+    , highlightDarker: withAlpha 0.15 (Color.darken 0.5 highlight)
+    , highlightRotatedForwards: highlight # rotateHue 30.0
+    , highlightRotatedBackwards: highlight # rotateHue (-30.0)
     , highlightText
     , text: textLightTheme
     , placeholderText: lighten 0.4 darkBg
@@ -168,13 +178,18 @@ defaultColours =
     , invalid
     , invalidText
     , highlight: highlightDark
+    , highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlightDark)
+    , highlightDarker: withAlpha 0.4 (Color.darken 0.5 highlightDark)
+    , highlightRotatedForwards: highlightDark # rotateHue 30.0
+    , highlightRotatedBackwards: highlightDark # rotateHue (-30.0)
     , highlightText
     , text: lightBg
     , placeholderText: darken 0.4 lightBg
     }
   }
   where
-    highlight = Color.rgb 0x00 0x99 0xFF
+    -- highlight = Color.rgb 0x00 0x99 0xFF
+    highlight = Color.hsl 350.0 0.93 0.67
 
     highlightDark = Color.rgb 0x88 0x33 0xFF
 
@@ -222,6 +237,10 @@ type FlatTheme a =
   , inputBackground ∷ a
   , inputBorder ∷ a
   , highlight ∷ a
+  , highlightRotatedBackwards ∷ a
+  , highlightRotatedForwards ∷ a
+  , highlightDarker ∷ a
+  , highlightLighter ∷ a
   , highlightText ∷ a
   , success ∷ a
   , successText ∷ a