From ec683dfbc4babc1d569e9b0288f660a9214d300b Mon Sep 17 00:00:00 2001 From: Mark Eibes Date: Sat, 26 Dec 2020 11:24:07 +0100 Subject: [PATCH] Colours --- src/Yoga/Block/Atom/Button/Story.purs | 3 +- src/Yoga/Block/Atom/Button/Style.purs | 48 ++- src/Yoga/Block/Atom/Button/View.purs | 20 +- src/Yoga/Block/Atom/Popover/Story.purs | 453 +++++++++++++------------ src/Yoga/Block/Container/Style.purs | 21 +- 5 files changed, 305 insertions(+), 240 deletions(-) diff --git a/src/Yoga/Block/Atom/Button/Story.purs b/src/Yoga/Block/Atom/Button/Story.purs index 0c001f8..a86d03d 100644 --- a/src/Yoga/Block/Atom/Button/Story.purs +++ b/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 [ R.text "Click" ] ] ] diff --git a/src/Yoga/Block/Atom/Button/Style.purs b/src/Yoga/Block/Atom/Button/Style.purs index 6fc8307..9fd3142 100644 --- a/src/Yoga/Block/Atom/Button/Style.purs +++ b/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 + {} + } diff --git a/src/Yoga/Block/Atom/Button/View.purs b/src/Yoga/Block/Atom/Button/View.purs index 05febe4..cbdb7b0 100644 --- a/src/Yoga/Block/Atom/Button/View.purs +++ b/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" diff --git a/src/Yoga/Block/Atom/Popover/Story.purs b/src/Yoga/Block/Atom/Popover/Story.purs index bc3af52..9640dd4 100644 --- a/src/Yoga/Block/Atom/Popover/Story.purs +++ b/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' - { 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' + { 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 + [ 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" + ] diff --git a/src/Yoga/Block/Container/Style.purs b/src/Yoga/Block/Container/Style.purs index d5a8962..1eaada5 100644 --- a/src/Yoga/Block/Container/Style.purs +++ b/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