Update card pattern to support color themes

canonical · Jun 12, 2024 · 3509ae8 · 3509ae8
1 parent 7125a37
commit 3509ae8
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 11 deletions.
diff --git a/scss/_base_placeholders.scss b/scss/_base_placeholders.scss
@@ -25,6 +25,11 @@
     border: $border;
   }
 
+  %vf-bg-themed {
+    background-color: $colors--theme--background-default;
+    color: $colors--theme--text-default;
+  }
+
   // deprecated -- use the theme colour variables
   %vf-bg--light {
     background-color: $color-light;
@@ -43,7 +48,7 @@
   }
 
   %vf-card {
-    @extend %vf-bg--x-light;
+    @extend %vf-bg-themed;
     @extend %vf-card-padding;
 
     margin-bottom: $spv--x-large;

diff --git a/scss/_patterns_card.scss b/scss/_patterns_card.scss
@@ -12,7 +12,6 @@
   .p-card {
     @extend %vf-card;
     @extend %vf-is-bordered;
-
     padding: calc($spv--large - 1px);
   }
 }
@@ -30,8 +29,8 @@
 
 @mixin vf-p-card-overlay {
   .p-card--overlay {
-    background: transparentize($color-x-light, 0.1);
-    color: $colors--light-theme--text-default;
+    background: $colors--theme--background-alt;
+    color: $colors--theme--text-default;
     margin-bottom: $spv--x-large;
     overflow: auto;
     padding: $spv--large;
@@ -42,8 +41,8 @@
   .p-card--muted {
     @extend %vf-has-box-shadow;
 
-    background-color: $color-light;
-    color: $colors--light-theme--text-default;
+    background-color: $colors--theme--background-default;
+    color: $colors--theme--text-default;
     margin-bottom: $spv--x-large;
     overflow: auto;
     padding: $spv--large;
@@ -61,7 +60,7 @@
   }
 
   .p-card__header {
-    border-bottom: 1px solid $color-mid-light;
+    border-bottom: 1px solid $colors--theme--border-low-contrast;
     padding-bottom: $spv--large;
 
     > .p-link--soft {

diff --git a/scss/_settings_placeholders.scss b/scss/_settings_placeholders.scss
@@ -5,7 +5,7 @@
 $input-border-thickness: 1.5px;
 $bar-thickness: 0.1875rem !default; // 3px at 16px fontsize, expressed in rems so it scales with text if the root font-size changes at a breakpoint
 $border-radius: 0; // deprecated, will be removed in future version of Vanilla
-$border: $input-border-thickness solid $color-mid-light !default;
+$border: $input-border-thickness solid $colors--theme--border-default !default;
 $box-shadow:
   0 1px 1px 0 transparentize($color-x-dark, 0.85),
   0 2px 2px -1px transparentize($color-x-dark, 0.85),

diff --git a/templates/docs/examples/patterns/card/header.html b/templates/docs/examples/patterns/card/header.html
@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="p-card">
-  <img class="p-card__thumbnail" src="https://assets.ubuntu.com/v1/dca2e4c4-raspberry-logo.png" alt="" />
+  <img class="p-card__thumbnail" src="https://assets.ubuntu.com/v1/31bd2627-logo-raspberry-pi.svg" alt="" />
   <hr class="u-sv1">
   <h3>Raspberry Pi2 and Pi3</h3>
   <p class="p-card__content">For fun, for education and for profit, the RPi makes device development personal and entertaining. With support for both the Pi2 and the new Pi3, Ubuntu Core supports the world’s most beloved board.</p>

diff --git a/templates/docs/examples/patterns/card/overlay.html b/templates/docs/examples/patterns/card/overlay.html
@@ -3,9 +3,8 @@
 
 {% block standalone_css %}patterns_card{% endblock %}
 
-{% set is_not_themed = True %}
 {% block content %}
-<section class="p-strip--image is-light" style="background-image:url('https://assets.ubuntu.com/v1/0a98afcd-screenshot_desktop.jpg')">
+<section class="p-strip--image" style="background-image:url('https://assets.ubuntu.com/v1/0a98afcd-screenshot_desktop.jpg')">
   <div class="row">
     <div class="col-6 col-start-large-7">
       <div class="p-card--overlay">