Colors for Bulma.
This commit is contained in:
parent
ecbc5617a3
commit
2555a0ffc9
1 changed files with 71 additions and 0 deletions
71
src/Bulma/Color.purs
Normal file
71
src/Bulma/Color.purs
Normal file
|
@ -0,0 +1,71 @@
|
||||||
|
module Bulma.Color where
|
||||||
|
|
||||||
|
import Prelude (show, class Show, (<<<), (<>), ($), (<))
|
||||||
|
import Halogen.HTML as HH
|
||||||
|
import Data.String (toLower)
|
||||||
|
import Data.Generic.Rep (class Generic)
|
||||||
|
import Data.Show.Generic (genericShow)
|
||||||
|
|
||||||
|
type Inverted = Boolean
|
||||||
|
|
||||||
|
data ColorSubject = Background | Text
|
||||||
|
|
||||||
|
-- | As the documentation says, Bulma provides 7 colors: text primary successful link info warning danger.
|
||||||
|
data PrimaryColor = ColorText | Success | Primary | Link | Info | Warning | Danger
|
||||||
|
|
||||||
|
-- | Both text and background have additional colors: white black dark and light.
|
||||||
|
data TypographyColor = White | Black | Dark | Light | PrimaryColor PrimaryColor
|
||||||
|
|
||||||
|
-- | Bulma provides many shades of color: Light Dark Soft Bold OnScheme and a custom shade which
|
||||||
|
-- | is represented by a number between 5 and 100 (by 5).
|
||||||
|
data Shade = LightShade | DarkShade | BoldShade | SoftShade | Custom Int | OnScheme | NoShade
|
||||||
|
|
||||||
|
-- | Bulma provides many shades of grey, too.
|
||||||
|
data ShadeOfGrey
|
||||||
|
= BlackBis | BlackTer
|
||||||
|
| GreyDarker | GreyDark | Grey | GreyLight | GreyLighter
|
||||||
|
| WhiteTer | WhiteBis
|
||||||
|
|
||||||
|
derive instance genericColorSubject :: Generic ColorSubject _
|
||||||
|
instance showColorSubject :: Show ColorSubject where
|
||||||
|
show = toLower <<< genericShow
|
||||||
|
|
||||||
|
derive instance genericColor :: Generic PrimaryColor _
|
||||||
|
instance showColor :: Show PrimaryColor where
|
||||||
|
show = toLower <<< genericShow
|
||||||
|
|
||||||
|
derive instance genericTypographyColor :: Generic TypographyColor _
|
||||||
|
instance showTypographyColor :: Show TypographyColor where
|
||||||
|
show = case _ of
|
||||||
|
(PrimaryColor color) -> show color
|
||||||
|
color -> (toLower <<< genericShow) color
|
||||||
|
|
||||||
|
derive instance genericShade :: Generic Shade _
|
||||||
|
instance showShade :: Show Shade where
|
||||||
|
show = toLower <<< genericShow
|
||||||
|
|
||||||
|
derive instance genericShadeOfGrey :: Generic ShadeOfGrey _
|
||||||
|
instance showShadeOfGrey :: Show ShadeOfGrey where
|
||||||
|
show = toLower <<< genericShow
|
||||||
|
|
||||||
|
has_grey :: ColorSubject -> ShadeOfGrey -> Inverted -> HH.ClassName
|
||||||
|
has_grey subject shade inverted = HH.ClassName $ "has-" <> show subject <> "-" <> show shade <> inverted_
|
||||||
|
where
|
||||||
|
inverted_ = if inverted then "-inverted" else ""
|
||||||
|
|
||||||
|
has_color :: ColorSubject -> PrimaryColor -> Shade -> Inverted -> HH.ClassName
|
||||||
|
has_color subject color shade inverted = HH.ClassName $ "has-" <> subject_ <> "-" <> color_ <> shade_ <> inverted_
|
||||||
|
where
|
||||||
|
subject_ = show subject
|
||||||
|
color_ = show color
|
||||||
|
shade_ = case shade of
|
||||||
|
NoShade -> ""
|
||||||
|
Custom num -> "-" <> (if num < 10 then "0" <> show num else show num)
|
||||||
|
OnScheme -> "-on-scheme"
|
||||||
|
_ -> "-" <> show shade
|
||||||
|
inverted_ = if inverted then "-inverted" else ""
|
||||||
|
|
||||||
|
has_background_current = HH.ClassName "has-background-current" :: HH.ClassName
|
||||||
|
has_background_inherit = HH.ClassName "has-background-inherit" :: HH.ClassName
|
||||||
|
has_text_current = HH.ClassName "has-text-current" :: HH.ClassName
|
||||||
|
has_text_inherit = HH.ClassName "has-text-inherit" :: HH.ClassName
|
Loading…
Add table
Reference in a new issue