feat: Add card gradients page and gradient card components (#2554)

core/scss/_props.scss

@@ -32,6 +32,7 @@
 
   /** Theme colors */
   @each $name, $color in map.merge($theme-colors, $social-colors) {
+    @debug contrast-ratio($color, white), $name, $min-contrast-ratio;
     --#{$prefix}#{$name}: #{$color};
     --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
     --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};

core/scss/_variables.scss

@@ -106,7 +106,7 @@ $colors: (
   'gray-dark': $gray-800,
 ) !default;
 
-$min-contrast-ratio: 4.5 !default;
+$min-contrast-ratio: 2 !default;
 $color-contrast-dark: $black !default;
 $color-contrast-light: $white !default;
 
@@ -444,7 +444,7 @@ $headings-font-style: null !default;
 $headings-line-height: 1.2 !default;
 $headings-font-weight: var(--#{$prefix}font-weight-semibold) !default;
 $headings-margin-bottom: var(--#{$prefix}spacer) !default;
-$headings-color: inherit !default;
+$headings-color: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white)) !default;
 
 $font-weights: (
   'light': $font-weight-light,
@@ -556,7 +556,6 @@ $zindex-levels: (
   3: 3,
 ) !default;
 
-$min-contrast-ratio: 1.5 !default;
 $text-secondary-opacity: 0.7 !default;
 $text-secondary-light-opacity: 0.4 !default;
 $text-secondary-dark-opacity: 0.8 !default;

core/scss/ui/_buttons.scss

@@ -207,6 +207,10 @@
   @include elements-list;
 }
 
+.btn-list-center {
+  justify-content: center;
+}
+
 //
 // Button floating
 //

core/scss/ui/_cards.scss

@@ -1,3 +1,21 @@
+@use 'sass:map';
+
+@property --tblr-card-gradient-direction {
+  syntax: '<angle>';
+  inherits: true;
+  initial-value: 180deg;
+}
+
+@keyframes gradient-animation {
+  0% {
+    --#{$prefix}card-gradient-direction: 180deg;
+  }
+
+  100% {
+    --#{$prefix}card-gradient-direction: 540deg;
+  }
+}
+
 .card {
   @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);
 
@@ -22,6 +40,7 @@
 
 // Card borderless
 .card-borderless {
+
   &,
   .card-header,
   .card-footer {
@@ -122,7 +141,7 @@
     background: $active-bg;
   }
 
-  & + & {
+  &+& {
     border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
@@ -137,8 +156,8 @@ Stacked card
   &:after {
     position: absolute;
     top: calc(-1 * var(--#{$prefix}card-stacked-offset));
-  inset-inline-end: var(--#{$prefix}card-stacked-offset);
-  inset-inline-start: var(--#{$prefix}card-stacked-offset);
+    inset-inline-end: var(--#{$prefix}card-stacked-offset);
+    inset-inline-start: var(--#{$prefix}card-stacked-offset);
     height: var(--#{$prefix}card-stacked-offset);
     content: '';
     background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
@@ -155,9 +174,9 @@ Stacked card
   &:before {
     position: absolute;
     top: 0;
-  inset-inline-end: 0;
+    inset-inline-end: 0;
     bottom: 0;
-  inset-inline-start: 0;
+    inset-inline-start: 0;
     content: '';
     background: rgba($dark, 0.48);
   }
@@ -287,7 +306,7 @@ Stacked card
   margin: 0 0 1rem;
   font-size: $h3-font-size;
   font-weight: var(--#{$prefix}font-weight-medium);
-  color: $headings-color;
+  color: var(--#{$prefix}heading-color);
   line-height: 1.5rem;
 
   @at-root a#{&}:hover {
@@ -321,17 +340,17 @@ Stacked card
     margin-bottom: 0;
   }
 
-  .card-sm > & {
+  .card-sm>& {
     padding: 1rem;
   }
 
-  .card-md > & {
+  .card-md>& {
     @include media-breakpoint-up(md) {
       padding: 2.5rem;
     }
   }
 
-  .card-lg > & {
+  .card-lg>& {
     @include media-breakpoint-up(md) {
       padding: 2rem;
     }
@@ -345,7 +364,7 @@ Stacked card
     padding: 0;
   }
 
-  & + & {
+  &+& {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
@@ -408,6 +427,7 @@ Card table
   margin-bottom: 0 !important;
 
   tr {
+
     td,
     th {
       &:first-child {
@@ -436,11 +456,11 @@ Card table
   tfoot {
     &:last-child {
       tr:last-child {
-        > *:last-child {
+        >*:last-child {
           border-end-end-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
         }
 
-        > *:first-child {
+        >*:first-child {
           border-end-start-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
         }
       }
@@ -476,7 +496,7 @@ Card table
     }
   }
 
-  .card-body + & {
+  .card-body+& {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
   }
 }
@@ -521,7 +541,7 @@ Card avatar
 Card list group
  */
 .card-list-group {
-  .card-body + & {
+  .card-body+& {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 
@@ -580,7 +600,7 @@ Card list group
         }
       }
 
-      + .nav-item {
+      +.nav-item {
         margin-inline-start: calc(-1 * #{$card-border-width});
       }
     }
@@ -620,7 +640,7 @@ Card list group
     border-end-start-radius: 0;
   }
 
-  .nav-tabs + .tab-content .card {
+  .nav-tabs+.tab-content .card {
     border-end-start-radius: var(--#{$prefix}card-border-radius);
     border-start-start-radius: 0;
   }
@@ -633,3 +653,83 @@ Card note
   --#{$prefix}card-bg: #fff7dd;
   --#{$prefix}card-border-color: #fff1c9;
 }
+
+
+/**
+Card gradient
+*/
+.card-gradient {
+  --#{$prefix}card-gradient-direction: 180deg;
+  --#{$prefix}card-gradient-opacity: 86%;
+  --#{$prefix}card-gradient: var(--tblr-primary), var(--tblr-primary);
+
+  background: radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box,
+  linear-gradient(var(--#{$prefix}card-gradient-direction), color-mix(in srgb, var(--#{$prefix}card-bg) var(--#{$prefix}card-gradient-opacity), transparent) 0%, var(--#{$prefix}card-bg) 40%) border-box,
+  linear-gradient(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) border-box;
+
+}
+
+@each $name, $color in map.merge($colors, $theme-colors) {
+  .card-gradient-#{$name} {
+    --#{$prefix}card-gradient: var(--tblr-#{$name}), var(--tblr-#{$name});
+  }
+}
+
+.card-gradient-rainbow {
+  --#{$prefix}card-gradient: #78C5D6,
+    #459BA8,
+    #79C267,
+    #C5D647,
+    #F5D63D,
+    #F08B33,
+    #E868A2,
+    #BE61A5;
+}
+
+.card-gradient-sun {
+  --#{$prefix}card-gradient: #fd1d1d, #fcb045;
+}
+
+.card-gradient-snow {
+  --#{$prefix}card-gradient: #333, #e9ecef;
+}
+
+.card-gradient-ocean {
+  --#{$prefix}card-gradient: #1CB5E0, #000851;
+}
+
+.card-gradient-mellow {
+  --#{$prefix}card-gradient: #f8ff00, #3ad59f;
+}
+
+.card-gradient-disco {
+  --#{$prefix}card-gradient: #FC466B, #3F5EFB;
+}
+
+.card-gradient-psychedelic {
+  --#{$prefix}card-gradient: #fcc5e4, #fda34b, #ff7882, #c8699e, #7046aa, #0c1db8, #020f75;
+}
+
+.card-gradient-love {
+  --#{$prefix}card-gradient: #f235e6, #bc0707;
+}
+
+.card-gradient-gold {
+  --#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #FFD700;
+}
+
+.card-gradient-animated {
+  animation: gradient-animation 15s linear infinite;
+}
+
+.card-gradient-bottom {
+  --#{$prefix}card-gradient-direction: 0deg;
+}
+
+.card-gradient-end {
+  --#{$prefix}card-gradient-direction: 270deg;
+}
+
+.card-gradient-start {
+  --#{$prefix}card-gradient-direction: 90deg;
+}

core/scss/ui/_payments.scss

@@ -9,7 +9,7 @@
   vertical-align: bottom;
   font-style: normal;
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
+  border-radius: var(--#{config.$prefix}border-radius);
 }
 
 @each $payment in config.$payment-providers {

core/scss/ui/_tables.scss

@@ -1,4 +1,6 @@
 .table {
+  font: inherit;
+
   thead {
     th {
       background: $table-th-bg;