8d6aa2f · rowtype-yoga/ry-blocks

git.iko.soy/rowtype-yoga/ry-blocks

on main help sign in

Add transparent colours

8d6aa2fMark Eibes4 years ago

.vscode/settings.json+1−1

compare with main

unifiedsplit

@@ -1,6 +1,6 @@

2 "editor.formatOnSave": true,

3− "workbench.colorTheme": "Night Owl Light",

3+ "workbench.colorTheme": "Halcyon",

4 "search.useGlobalIgnoreFiles": true,

5 "files.watcherExclude": {

6 "**/.spago/**": true,

src/Yoga/Block/Atom/Range/View.purs−3

@@ -36,15 +36,12 @@ rawComponent =

36 let disabled = props.disabled ?|| false

37 fallbackValue /\ setFallbackValue ← useState' v

38 let value = props.value ?|| fallbackValue

39− hasFocus /\ setHasFocus ← useState' false

40 pure

39 pure

41 $ div

40 $ div

42 </*

41 </*

43 { className: "ry-range"

42 { className: "ry-range"

44 , css: Style.container <> guard disabled Style.inputDisabled <>?

43 , css: Style.container <> guard disabled Style.inputDisabled <>?

45 props.css

44 props.css

46− , onFocus: handler_ $ setHasFocus true

47− , onBlur: handler_ $ setHasFocus false

48 , style: fold props.style <> css

45 , style: fold props.style <> css

49 { "--val": value - min, "--max": max - min }

46 { "--val": value - min, "--max": max - min }

50 , _data: Object.singleton "testid" "range-testid"

47 , _data: Object.singleton "testid" "range-testid"

src/Yoga/Block/Container/Style.purs+36−30

@@ -3,6 +3,7 @@ module Yoga.Block.Container.Style where

3import Yoga.Prelude.Style

5import Color as Color

6+import Data.String as String

6import Data.Symbol (class IsSymbol, reflectSymbol)

7import Data.Symbol (class IsSymbol, reflectSymbol)

7import Effect.Uncurried (EffectFn2, runEffectFn2)

8import Effect.Uncurried (EffectFn2, runEffectFn2)

8import Foreign.Object (Object)

9import Foreign.Object (Object)

@@ -25,10 +26,10 @@ data DarkOrLightMode

25derive instance eqDarkOrLightMode ∷ Eq DarkOrLightMode

26derive instance eqDarkOrLightMode ∷ Eq DarkOrLightMode

27lightModeStyle ∷ Style

28lightModeStyle ∷ Style

28−lightModeStyle = unsafeCoerce lightModeVariables

29+lightModeStyle = unsafeCoerce (lightModeVariables <> lightModeRGBVariables)

30darkModeStyle ∷ Style

31darkModeStyle ∷ Style

31−darkModeStyle = unsafeCoerce darkModeVariables

32+darkModeStyle = unsafeCoerce (darkModeVariables <> darkModeRGBVariables)

33darkMode ∷ Style

34darkMode ∷ Style

34darkMode = mkGlobal (Just DarkMode)

35darkMode = mkGlobal (Just DarkMode)

@@ -256,7 +257,7 @@ defaultColours =

256 , highlightRotatedBackwards: highlight # rotateHue (-13.0) # darken 0.05

257 , highlightRotatedBackwards: highlight # rotateHue (-13.0) # darken 0.05

257 , highlightRotatedForwards: highlight # rotateHue 3.0 # lighten 0.05 # saturate 0.1

258 , highlightRotatedForwards: highlight # rotateHue 3.0 # lighten 0.05 # saturate 0.1

258 , highlightText

259 , highlightText

259− , highlightTextOnBackground: highlight # darken 0.1 # saturate 0.1

260+ , highlightTextOnBackground: highlight # rotateHue 3.0 # darken 0.15 # desaturate 0.1

260 , inputBackground: lightBg

261 , inputBackground: lightBg

261 , inputBorder: darken 0.07 >>> desaturate 0.2 $ lightBg

262 , inputBorder: darken 0.07 >>> desaturate 0.2 $ lightBg

262 , interfaceBackground

263 , interfaceBackground

@@ -354,62 +355,36 @@ defaultColours =

354 }

355 }

355 where

356 where

356 darkBg = Color.hsl 210.0 0.21 0.02

357 darkBg = Color.hsl 210.0 0.21 0.02

357−

358 -- highlightBase = Color.hsla 275.0 0.82 0.4

359 -- brightPurpleBase = Color.hsla 275.0 0.82 0.4

360 -- highlightMurmurasBase = Color.hsla 220.0 0.60 0.5

361− highlightBase = Color.hsla 244.0 0.9 0.62

361+ highlightBase = Color.hsla 252.0 0.9 0.62

362−

363 highlight = highlightBase 1.0

362 highlight = highlightBase 1.0

364−

365 highlightDarkBase = Color.hsla 240.0 1.00 0.6

363 highlightDarkBase = Color.hsla 240.0 1.00 0.6

366−

367 highlightDark = Color.hsla 240.0 1.00 0.63 1.0

364 highlightDark = Color.hsla 240.0 1.00 0.63 1.0

368−

369 highlightText = highlight # lighten 0.36 # saturate 0.4

365 highlightText = highlight # lighten 0.36 # saturate 0.4

370−

371 interfaceBackground = lightBg

366 interfaceBackground = lightBg

372−

373 interfaceBackgroundDangerous = interfaceBackground

367 interfaceBackgroundDangerous = interfaceBackground

374−

375 interfaceBackgroundDangerousDark = Color.hsl 340.0 0.55 0.30

368 interfaceBackgroundDangerousDark = Color.hsl 340.0 0.55 0.30

376−

377 interfaceBackgroundDark = lighten 0.14 >>> saturate 0.12 $ darkBg

369 interfaceBackgroundDark = lighten 0.14 >>> saturate 0.12 $ darkBg

378−

379 interfaceDangerousText = invalid

370 interfaceDangerousText = invalid

380−

381 interfaceDangerousTextDark = Color.hsl 340.0 1.0 0.90

371 interfaceDangerousTextDark = Color.hsl 340.0 1.0 0.90

382−

383 invalidDark = Color.rgb 230 30 60

372 invalidDark = Color.rgb 230 30 60

384−

385 invalid = Color.rgb 173 0 69

373 invalid = Color.rgb 173 0 69

386−

387 invalidText = Color.white

374 invalidText = Color.white

388−

389 invalidTextDark = successText

375 invalidTextDark = successText

390−

391 -- lightBg = Color.hsl 240.0 0.5 0.982

376 -- lightBg = Color.hsl 240.0 0.5 0.982

392 -- lightBg = Color.hsl 230.0 0.5 0.982

377 -- lightBg = Color.hsl 230.0 0.5 0.982

393 lightBg = Color.hsl 205.0 0.13 0.982

378 lightBg = Color.hsl 205.0 0.13 0.982

394−

395 link = Color.hsl 320.0 1.0 0.33

379 link = Color.hsl 320.0 1.0 0.33

396−

397 linkDark = Color.hsl 265.0 1.0 0.83

380 linkDark = Color.hsl 265.0 1.0 0.83

398−

399 required = Color.rgb 200 50 80

381 required = Color.rgb 200 50 80

400−

401 success = Color.rgb 10 150 25

382 success = Color.rgb 10 150 25

402−

403 successDark = Color.rgb 20 200 60

383 successDark = Color.rgb 20 200 60

404−

405 successText = Color.rgb 250 250 250

384 successText = Color.rgb 250 250 250

406−

407 text = lightBg # darken 0.8

385 text = lightBg # darken 0.8

408−

409 textDark = Color.rgb 204 212 220

386 textDark = Color.rgb 204 212 220

410−

411 boxShadowLight = Color.rgba 0 0 0 0.2

387 boxShadowLight = Color.rgba 0 0 0 0.2

412−

413 boxShadowDark = Color.rgba 0 0 0 0.6

388 boxShadowDark = Color.rgba 0 0 0 0.6

414

389

415type FlatTheme a =

390type FlatTheme a =

@@ -499,6 +474,11 @@ colour =

499 hmap (\x → "var(" <> x <> ")")

474 hmap (\x → "var(" <> x <> ")")

500 $ makeCSSVarLabels defaultColours.light

475 $ makeCSSVarLabels defaultColours.light

501

476

477+colourWithAlpha ∷ FlatTheme (Number -> String)

478+colourWithAlpha =

479+ hmap (\x → \alpha -> "rgba(var(--rgb-" <> String.drop 2 x <> "), " <> show alpha <> ")")

480+ $ makeCSSVarLabels defaultColours.light

481+

502col ∷ FlatTheme StyleProperty

482col ∷ FlatTheme StyleProperty

503col = colour # mapRecord str

483col = colour # mapRecord str

504

484

@@ -537,6 +517,32 @@ darkModeVariables =

537 # Object.foldMap \k v →

517 # Object.foldMap \k v →

538 Object.singleton ("--" <> k) (str (Color.cssStringRGBA v))

518 Object.singleton ("--" <> k) (str (Color.cssStringRGBA v))

539

519

520+lightModeRGBVariables :: Object StyleProperty

521+lightModeRGBVariables =

522+ Object.fromHomogeneous defaultColours.light

523+ # Object.foldMap \k v →

524+ Object.singleton ("--rgb-" <> k) (str (rgb v))

525+ where

526+ rgb theCol = red <> ", " <> green <> ", " <> blue

527+ where

528+ c = toRGBA theCol

529+ red = show c.r

530+ green = show c.g

531+ blue = show c.b

532+

533+darkModeRGBVariables :: Object StyleProperty

534+darkModeRGBVariables =

535+ Object.fromHomogeneous defaultColours.dark

536+ # Object.foldMap \k v →

537+ Object.singleton ("--rgb-" <> k) (str (rgb v))

538+ where

539+ rgb theCol = red <> ", " <> green <> ", " <> blue

540+ where

541+ c = toRGBA theCol

542+ red = show c.r

543+ green = show c.g

544+ blue = show c.b

545+

540variables ∷ Style

546variables ∷ Style

541variables =

547variables =

542 css

548 css

src/Yoga/Block/Quark/Skeleton/Style.pursnew file+39

@@ -0,0 +1,39 @@

1+module Yoga.Block.Quark.Skeleton.Style where

3+import Yoga.Prelude.Style

5+import Fahrtwind (transform)

6+import Yoga.Block.Container.Style (col, colourWithAlpha)

8+skeletonBox ∷ Style

9+skeletonBox = css

10+ { display: inlineBlock

11+ , height: em 1.0

12+ , position: relative

13+ , overflow: hidden

14+ , backgroundColor: str (colourWithAlpha.textPaler4 0.33)

15+ , "&::after": nest

16+ { position: absolute

17+ , top: int 0

18+ , right: int 0

19+ , bottom: int 0

20+ , left: int 0

21+ , transform: str "translateX(-100%)"

22+ , backgroundImage: str

23+ """linear-gradient(

24+ 90deg,

25+ rgba(250,245,255, 0) 0,

26+ rgba(250,245,255, calc(0.1 * var(--light-mode) + 0.03 * var(--dark-mode))) 20%,

27+ rgba(250,245,255, calc(0.2 * var(--light-mode) + 0.07 * var(--dark-mode))) 60%,

28+ rgba(250,245,255, 0)

29+ )

30+ """

31+ , animation: str "shimmer 2s infinite"

32+ , content: str "''"

33+ , animationName:

34+ keyframes

35+ { "100%": transform "translateX(100%)"

36+ }

37+ }

38+

39+ }