configurable card fade surface background

unisonweb · Aug 29, 2023 · 67d5c8f · 67d5c8f
1 parent 0d99038
commit 67d5c8f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/src/UI/Card.elm b/src/UI/Card.elm
@@ -4,9 +4,14 @@ import Html exposing (Html, div, h3, text)
 import Html.Attributes exposing (class)
 
 
+type SurfaceBackgroundColor
+ = SurfaceBackground
+ | SurfaceBackgroundSubdued
+
+
 type CardType
  = Contained
- | ContainedWithFade
+ | ContainedWithFade SurfaceBackgroundColor
  | Uncontained
 
 
@@ -58,7 +63,12 @@ asContained card_ =
 
 asContainedWithFade : Card msg -> Card msg
 asContainedWithFade card_ =
- { card_ | type_ = ContainedWithFade }
+ asContainedWithFade_ SurfaceBackgroundSubdued card_
+
+
+asContainedWithFade_ : SurfaceBackgroundColor -> Card msg -> Card msg
+asContainedWithFade_ surfaceBg card_ =
+ { card_ | type_ = ContainedWithFade surfaceBg }
 
 
 withTitle : String -> Card msg -> Card msg
@@ -113,8 +123,11 @@ view card_ =
  Contained ->
  "contained"
 
- ContainedWithFade ->
- "contained-with-fade"
+ ContainedWithFade SurfaceBackground ->
+ "contained-with-fade contained-with-fade_surface-background"
+
+ ContainedWithFade SurfaceBackgroundSubdued ->
+ "contained-with-fade contained-with-fade_surface-background-subdued"
 
  Uncontained ->
  "uncontained"

diff --git a/src/css/ui/components/card.css b/src/css/ui/components/card.css
@@ -38,9 +38,15 @@
  height: 2rem;
 }
 
-.card.contained-with-fade {
- /* @todo figure out how to configure this... */
+.card.contained-with-fade.contained-with-fade_surface-background {
+ --color-card-on-surface-bg: var(--u-color_background);
+}
+
+.card.contained-with-fade.contained-with-fade_surface-background-subdued {
  --color-card-on-surface-bg: var(--u-color_background_subdued);
+}
+
+.card.contained-with-fade {
  padding: 4rem 0;
  background: linear-gradient(
  var(--color-card-bg),