Add gradient background utilities (#2164)

core/scss/_utilities.scss

@@ -102,5 +102,34 @@ $utilities: (
         '<svg width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="8" height="8" fill="rgba(130, 130, 130, .1)" /><rect x="8" y="8" width="8" height="8" fill="rgba(130, 130, 130, .1)" /></svg>'
       )} repeat center/16px 16px,
     )
-  )
+  ),
+  "bg-gradient": (
+    property: background,
+    class: bg-gradient,
+    values: (
+      null: linear-gradient(var(--#{$prefix}gradient-direction, to right), var(--#{$prefix}gradient-stops, var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-to, transparent))) no-repeat,
+    ),
+  ),
+  "bg-gradient-direction": (
+    property: --#{$prefix}gradient-direction,
+    class: bg-gradient,
+    values: (
+      to-t: to top,
+      to-te: to top right,
+      to-e: to right,
+      to-be: to bottom right,
+      to-b: to bottom,
+      to-bs: to bottom left,
+      to-s: to left,
+      to-ts: to top left,
+    ),
+  ),
+  "table-layout": (
+    property: table-layout,
+    class: table,
+    values: (
+      auto: auto,
+      fixed: fixed,
+    ),
+  ),
 ) !default;

core/scss/utils/_colors.scss

@@ -16,6 +16,19 @@
     --#{$prefix}border-opacity: 1;
     border-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}border-opacity)) !important;
   }
+
+  .bg-gradient-from-#{"" + $color} {
+    --#{$prefix}gradient-from: var(--#{$prefix}#{$color});
+  }
+
+  .bg-gradient-to-#{"" + $color} {
+    --#{$prefix}gradient-to: var(--#{$prefix}#{$color});
+  }
+
+  .bg-gradient-via-#{"" + $color} {
+    --#{$prefix}gradient-via: var(--#{$prefix}#{$color});
+    --#{$prefix}gradient-stops: var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-via, transparent), var(--#{$prefix}gradient-to, transparent);
+  }
 }
 
 @each $color, $value in $theme-colors {

preview/pages/colors.html

@@ -11,59 +11,196 @@ permalink: colors.html
 {% assign colors = colors | push: color[0] %}
 {% endfor %}
 {% assign colors = colors | push: 'dark' %}
-{% assign colors = colors | push: 'muted' %}
 
-<div class="card">
-	<div class="card-body">
-		<div class="table-responsive">
-			<table class="table text-center">
-				<tr>
-					{% for color in colors %}
-					<td>
-						<div class="avatar bg-{{ color }} text-{{ color }}-fg" data-demo-color>{{ color | slice: 0, 2 }}
+<div class="row row-cards">
+	<div class="col-12">
+		<div class="card">
+			<div class="card-body">
+				<div class="table-responsive">
+					<table class="table text-center">
+						<tr>
+							{% for color in colors %}
+							<td>
+								<div class="avatar bg-{{ color }} text-{{ color }}-fg" data-demo-color>{{ color | slice: 0, 2 }}
+								</div>
+							</td>
+							{% endfor %}
+						</tr>
+						<tr>
+							{% for color in colors %}
+							<td>
+								<div class="avatar bg-{{ color }}-lt" data-demo-color>{{ color | slice: 0, 2 }}</div>
+							</td>
+							{% endfor %}
+						</tr>
+						<tr>
+							{% for color in colors %}
+							<td>
+								<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}
+								</div>
+							</td>
+							{% endfor %}
+						</tr>
+						<tr class="bg-surface-tertiary">
+							{% for color in colors %}
+							<td>
+								<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}
+								</div>
+							</td>
+							{% endfor %}
+						</tr>
+						<tr class="bg-dark text-white">
+							{% for color in colors %}
+							<td>
+								{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
+								<div class="avatar text-{{ c }} bg-transparent" data-demo-color>{{ c | slice: 0, 2 }}</div>
+							</td>
+							{% endfor %}
+						</tr>
+						<tr class="bg-dark text-white">
+							{% for color in colors %}
+							<td>
+								{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
+								<div class="avatar bg-{{ c }}-lt" data-demo-color>{{ c | slice: 0, 2 }}</div>
+								<div class="mt-2" data-demo-color-contrast></div>
+							</td>
+							{% endfor %}
+						</tr>
+					</table>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-12">
+		{% assign colors = colors | push: 'inverted' %}
+		{% assign colors = colors | push: 'white' %}
+		{% assign colors = colors | push: 'transparent' %}
+		<div class="row">
+			<div class="col-6">
+				<div class="card">
+					<div class="card-body">
+						<h3 class="card-title">
+							Gradient
+						</h3>
+						<form action="">
+							<div class="row g-4">
+								<div class="col">
+									<div>
+										<label class="form-label">From</label>
+										<select class="form-select" data-demo-color-select name="color-from">
+											{% for color in colors %}
+											<option value="{{ color }}">{{ color }}</option>
+											{% endfor %}
+										</select>
+									</div>
+									<div class="mt-3">
+										<label class="form-label">To</label>
+										<select class="form-select" data-demo-color-select name="color-to">
+											{% for color in colors %}
+											<option value="{{ color }}" {% if color=='transparent' %} selected{% endif %}>
+												{{ color }}
+											</option>
+											{% endfor %}
+										</select>
+									</div>
+								</div>
+								<div class="col">
+									<div>
+										<label class="form-label">Via</label>
+										<select class="form-select" data-demo-color-select name="color-via">
+											<option></option>
+											{% for color in colors %}
+											<option value="{{ color }}">{{ color }}</option>
+											{% endfor %}
+										</select>
+									</div>
+									<div class="mt-3">
+										<label class="form-label">Direction</label>
+										<select class="form-select" data-demo-color-select name="color-direction">
+											<option value="to-t">to top</option>
+											<option value="to-te">to top right</option>
+											<option value="to-r" selected>to right</option>
+											<option value="to-be">to bottom right</option>
+											<option value="to-b">to bottom</option>
+											<option value="to-bs">to bottom left</option>
+											<option value="to-s">to left</option>
+											<option value="to-ts">to top left</option>
+										</select>
+									</div>
+								</div>
+								<div class="col-12">
+									<div class="border rounded bg-pattern-transparent overflow-hidden">
+										<div id="gradient-preview"
+											class="border rounded bg-gradient bg-gradient-from-primary bg-gradient-to-transparent">
+											<div class=" px-4 py-5"></div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+			<div class="col-6">
+				<div class="card">
+					<div class="card-body">
+						<div class="row">
+							<div class="col">
+								<div class="space-y">
+									{% for color in colors %}
+									<div
+										class="border rounded bg-gradient bg-gradient-from-{{ color }} bg-gradient-to-transparent px-4 py-2">
+									</div>
+									{% endfor %}
+								</div>
+							</div>
+							<div class="col">
+								<div class="space-y">
+									{% for color in colors %}
+									<div
+										class="border rounded bg-gradient bg-gradient-to-{{ color }} bg-gradient-from-transparent px-4 py-2">
+									</div>
+									{% endfor %}
+								</div>
+							</div>
 						</div>
-					</td>
-					{% endfor %}
-				</tr>
-				<tr>
-					{% for color in colors %}
-					<td>
-						<div class="avatar bg-{{ color }}-lt" data-demo-color>{{ color | slice: 0, 2 }}</div>
-					</td>
-					{% endfor %}
-				</tr>
-				<tr>
-					{% for color in colors %}
-					<td>
-						<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}</div>
-					</td>
-					{% endfor %}
-				</tr>
-				<tr class="bg-light">
-					{% for color in colors %}
-					<td>
-						<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}</div>
-					</td>
-					{% endfor %}
-				</tr>
-				<tr class="bg-dark text-white">
-					{% for color in colors %}
-					<td>
-						{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
-						<div class="avatar text-{{ c }} bg-transparent" data-demo-color>{{ c | slice: 0, 2 }}</div>
-					</td>
-					{% endfor %}
-				</tr>
-				<tr class="bg-dark text-white">
-					{% for color in colors %}
-					<td>
-						{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
-						<div class="avatar bg-{{ c }}-lt" data-demo-color>{{ c | slice: 0, 2 }}</div>
-						<div class="mt-2" data-demo-color-contrast></div>
-					</td>
-					{% endfor %}
-				</tr>
-			</table>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
+
+<script>
+	document.addEventListener('DOMContentLoaded', function () {
+		var gradientPreview = document.getElementById('gradient-preview');
+		var colorFrom = document.querySelector('[name="color-from"]');
+		var colorTo = document.querySelector('[name="color-to"]');
+		var colorVia = document.querySelector('[name="color-via"]');
+		var colorDirection = document.querySelector('[name="color-direction"]');
+
+		function updateGradient() {
+			var from = colorFrom.value;
+			var to = colorTo.value;
+			var via = colorVia.value;
+			var direction = colorDirection.value;
+
+			var gradient = 'bg-gradient bg-gradient-from-' + from + ' bg-gradient-to-' + to;
+
+			if (via) {
+				gradient += ' bg-gradient-via-' + via;
+			}
+
+			gradient += ' bg-gradient-' + direction;
+
+			gradientPreview.className = gradient;
+		}
+
+		colorFrom.addEventListener('change', updateGradient);
+		colorTo.addEventListener('change', updateGradient);
+		colorVia.addEventListener('change', updateGradient);
+		colorDirection.addEventListener('change', updateGradient);
+
+		updateGradient();
+	});
+</script>