Add background pattern utilities and patterns demo page (#2615)

.changeset/background-pattern-utilities.md

@@ -0,0 +1,7 @@
+---
+"@tabler/core": minor
+"@tabler/preview": minor
+"@tabler/docs": patch
+---
+
+Added background pattern utilities and documentation, including updated preview demos.

core/package.json

@@ -82,19 +82,19 @@
     "files": [
       {
         "path": "./dist/css/tabler.css",
-        "maxSize": "75 kB"
+        "maxSize": "76 kB"
       },
       {
         "path": "./dist/css/tabler.min.css",
-        "maxSize": "70 kB"
+        "maxSize": "71 kB"
       },
       {
         "path": "./dist/css/tabler.rtl.css",
-        "maxSize": "75 kB"
+        "maxSize": "76 kB"
       },
       {
         "path": "./dist/css/tabler.rtl.min.css",
-        "maxSize": "70 kB"
+        "maxSize": "71 kB"
       },
       {
         "path": "./dist/css/tabler-flags.css",

core/scss/_core.scss

@@ -67,6 +67,7 @@
 @import 'ui/offcanvas';
 @import 'ui/chat';
 @import 'ui/signature';
+@import 'ui/patterns';
 
 @import 'helpers/index';
 

core/scss/ui/_patterns.scss

@@ -0,0 +1,240 @@
+.bg-pattern-diagonal {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-size: .5rem;
+   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   background-image: repeating-linear-gradient(-45deg, var(--#{$prefix}pattern-fill) 0 1px, transparent 0 50%);
+   background-clip: padding-box;
+   background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+.bg-pattern-diagonal-2 {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-size: .5rem;
+   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   background-image: repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 0 1px, transparent 0 50%);
+   background-clip: padding-box;
+   background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+.bg-pattern-dots {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-size: 5px;
+   --#{$prefix}pattern-dot: .5px;
+   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 20%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   background-image: radial-gradient(circle, var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-dot), transparent var(--#{$prefix}pattern-dot)),
+   radial-gradient(circle, var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-dot), transparent var(--#{$prefix}pattern-dot));
+   background-position: 0 0,
+   calc(var(--#{$prefix}pattern-size) / 2) calc(var(--#{$prefix}pattern-size) / 2);
+   background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
+   background-clip: padding-box;
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+.bg-pattern-rectangles {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 3%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   --#{$prefix}pattern-size: .5rem;
+   background-image: repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%, transparent 75%, var(--#{$prefix}pattern-fill) 75%, var(--#{$prefix}pattern-fill)),
+   repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%, transparent 75%, var(--#{$prefix}pattern-fill) 75%, var(--#{$prefix}pattern-fill));
+   background-position: -1px -1px,
+   calc(var(--#{$prefix}pattern-size) - 1px) calc(var(--#{$prefix}pattern-size) - 1px);
+   background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
+   background-clip: padding-box;
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+.bg-pattern-lines {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   --#{$prefix}pattern-size: .5rem;
+   background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
+   background-image: repeating-linear-gradient(0deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
+   background-position: -1px -1px;
+   background-clip: padding-box;
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+.bg-pattern-lines-vertical {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   --#{$prefix}pattern-size: .5rem;
+   background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
+   background-image: repeating-linear-gradient(90deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
+   background-position: -1px -1px;
+   background-clip: padding-box;
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+.bg-pattern-grid {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   --#{$prefix}pattern-size: .5rem;
+   background-image: linear-gradient(to right, var(--#{$prefix}pattern-fill) 1px, transparent 1px),
+   linear-gradient(to bottom, var(--#{$prefix}pattern-fill) 1px, transparent 1px);
+   background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
+   background-position: -1px -1px, -1px -1px;
+   background-clip: padding-box;
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+.bg-pattern-grid-diagonal {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   --#{$prefix}pattern-size: .5rem;
+   background-image: linear-gradient(45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%),
+   linear-gradient(-45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%);
+   background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
+   background-position: center center;
+   background-clip: padding-box;
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+.bg-pattern-blueprint {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-size: .5rem;
+   --#{$prefix}pattern-line: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   background-image: linear-gradient(var(--#{$prefix}pattern-line) 2px, transparent 2px),
+   linear-gradient(90deg, var(--#{$prefix}pattern-line) 2px, transparent 2px),
+   linear-gradient(var(--#{$prefix}pattern-line) 1px, transparent 1px),
+   linear-gradient(90deg, var(--#{$prefix}pattern-line) 1px, transparent 1px);
+   background-size: calc(var(--#{$prefix}pattern-size) * 10) calc(var(--#{$prefix}pattern-size) * 10),
+   calc(var(--#{$prefix}pattern-size) * 10) calc(var(--#{$prefix}pattern-size) * 10),
+   calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2),
+   calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
+   background-position: -3px -3px, -3px -3px, -2px -2px, -2px -2px;
+   background-clip: padding-box;
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+.bg-pattern-cross-dots {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-size: .5rem;
+   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   background-image: radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px),
+   radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px);
+   background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
+   background-position: 0 0,
+   var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
+   background-clip: padding-box;
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+.bg-pattern-circles {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-size: .5rem;
+   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   background-image: radial-gradient(circle at center top, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%),
+   radial-gradient(circle at center bottom, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%),
+   radial-gradient(circle at right center, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%),
+   radial-gradient(circle at left center, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%);
+   background-position: 0 0;
+   background-size: calc(var(--#{$prefix}pattern-size) * 3) calc(var(--#{$prefix}pattern-size) * 3);
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+.bg-pattern-diagonal-stripes {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-size: .5rem;
+   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   background-image: repeating-linear-gradient(45deg,
+      transparent,
+      transparent var(--#{$prefix}pattern-size),
+      var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size),
+      var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
+   background-repeat: no-repeat;
+   background-clip: padding-box;
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+.bg-pattern-diagonal-stripes-2 {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-size: .5rem;
+   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent var(--#{$prefix}pattern-size),
+      var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size),
+      var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
+   background-repeat: no-repeat;
+   background-clip: padding-box;
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+.bg-pattern-zigzag {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-size: .5rem;
+   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   background: linear-gradient(135deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%) calc(-1 * var(--#{$prefix}pattern-size)) 0,
+   linear-gradient(225deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%) calc(-1 * var(--#{$prefix}pattern-size)) 0,
+   linear-gradient(315deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%),
+   linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%);
+   background-size: calc(2 * var(--#{$prefix}pattern-size)) calc(2 * var(--#{$prefix}pattern-size));
+   background-clip: padding-box;
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+.bg-pattern-vertical-stripes {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-size: .5rem;
+   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   background-image: repeating-linear-gradient(90deg,
+      transparent,
+      transparent var(--#{$prefix}pattern-size),
+      var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size),
+      var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
+   background-clip: padding-box;
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+.bg-pattern-horizontal-stripes {
+   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
+   --#{$prefix}pattern-size: .5rem;
+   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
+   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
+   background-image: repeating-linear-gradient(0deg,
+      transparent,
+      transparent var(--#{$prefix}pattern-size),
+      var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size),
+      var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
+   background-position: -1px -1px;
+   background-clip: padding-box;
+   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
+}
+
+// Color variants
+@each $color, $value in $theme-colors {
+   .bg-pattern-#{$color} { 
+      --#{$prefix}pattern-color: #{$value};
+   }
+}
+
+// Sizes
+$sizes: (
+   'sm': .25rem,
+   'md': .5rem,
+   'lg': .75rem,
+   'xl': 1rem,
+);
+
+@each $size, $value in $sizes {
+   .bg-pattern-#{$size} {
+      --#{$prefix}pattern-size: #{$value};
+   }
+}

docs/content/ui/utilities/background-patterns.md

@@ -0,0 +1,159 @@
+---
+title: Background patterns
+summary: Use background pattern utilities to add subtle textures to elements. Combine pattern type, color, and size modifiers for different visual effects.
+description: Add decorative background patterns with utility classes.
+added-in: "1.4.0"
+source-css: "ui/_patterns.scss"
+---
+
+{% assign patterns = "diagonal,diagonal-2,dots,rectangles,lines,lines-vertical,grid,grid-diagonal,blueprint,circles,diagonal-stripes,diagonal-stripes-2,zigzag,vertical-stripes,horizontal-stripes" | split: "," %}
+
+## Overview
+
+Background pattern utilities let you apply decorative, repeatable textures to elements like cards, sections, and placeholders.
+Start with a pattern type class, then optionally combine it with color and size modifiers.
+
+```html
+<div class="bg-pattern-diagonal"></div>
+<div class="bg-pattern-grid bg-pattern-primary"></div>
+<div class="bg-pattern-circles bg-pattern-lg"></div>
+```
+
+## Pattern types
+
+Use one of the available pattern classes to define the shape and direction of the texture:
+
+{% for pattern in patterns %}
+- `.bg-pattern-{{ pattern }}`
+{%- endfor %}
+
+Here are the available pattern types:
+
+{% capture html -%}
+<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 g-3">
+  {% for pattern in patterns %}
+  <div class="col">
+    <div class="bg-pattern-{{ pattern }} rounded mb-2" style="height: 6rem;"></div>
+    <code>.bg-pattern-{{ pattern }}</code>
+  </div>
+  {% endfor %}
+</div>
+{%- endcapture %}
+{% capture code %}
+{% for pattern in patterns -%}
+<div class="bg-pattern-{{ pattern }}"></div>
+{% endfor %}
+{% endcapture %}
+{% include "docs/example.html" html=html code=code bg="surface-primary" %}
+
+## Pattern colors
+
+Combine any pattern with color modifiers using `.bg-pattern-{color}`.
+See the [full list of available colors](/ui/base/colors) for all color names.
+
+{% capture html -%}
+<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
+  {% for color in site.colors %}
+  <div class="col">
+    <div class="bg-pattern-diagonal-stripes-2 bg-pattern-{{ color[0] }} rounded mb-2" style="height: 6rem;"></div>
+    <code>.bg-pattern-{{ color[0] }}</code>
+  </div>
+  {% endfor %}
+</div>
+{%- endcapture %}
+{% capture code %}
+{% for color in site.colors -%}
+<div class="bg-pattern-diagonal-stripes-2 bg-pattern-{{ color[0] }}"></div>
+{% endfor %}
+{% endcapture %}
+{% include "docs/example.html" html=html code=code bg="surface-primary" %}
+
+## Pattern sizes
+
+Use size utilities to control pattern density:
+
+- `.bg-pattern-sm`
+- `.bg-pattern-md`
+- `.bg-pattern-lg`
+
+Look at the following examples to see how the pattern sizes work:
+
+{% capture html -%}
+<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
+  <div class="col">
+    <div class="bg-pattern-circles bg-pattern-sm rounded mb-2" style="height: 6rem;"></div>
+    <code>.bg-pattern-sm</code>
+  </div>
+  <div class="col">
+    <div class="bg-pattern-circles bg-pattern-md rounded mb-2" style="height: 6rem;"></div>
+    <code>.bg-pattern-md</code>
+  </div>
+  <div class="col">
+    <div class="bg-pattern-circles bg-pattern-lg rounded mb-2" style="height: 6rem;"></div>
+    <code>.bg-pattern-lg</code>
+  </div>
+  <div class="col">
+    <div class="bg-pattern-circles bg-pattern-xl rounded mb-2" style="height: 6rem;"></div>
+    <code>.bg-pattern-xl</code>
+  </div>
+</div>
+{%- endcapture %}
+{% capture code %}
+<div class="bg-pattern-circles bg-pattern-sm"></div>
+<div class="bg-pattern-circles bg-pattern-md"></div>
+<div class="bg-pattern-circles bg-pattern-lg"></div>
+<div class="bg-pattern-circles bg-pattern-xl"></div>
+{% endcapture %}
+{% include "docs/example.html" html=html code=code bg="surface-primary" %}
+
+## Examples
+
+Look at the following examples to see how the pattern sizes work
+
+### Card with background pattern
+
+Card with a background pattern in the body can be used to add a decorative touch to the card. This is useful when you want to add a subtle pattern to the card without affecting the readability of the content.
+
+{% capture html -%}
+<div class="card">
+  <div class="card-body">
+    Here is example of a card with a background pattern.
+  </div>
+</div>
+{%- endcapture %}
+{% capture code %}
+<div class="bg-pattern-diagonal">
+  <div class="card">
+    ...
+  </div>
+</div>
+{% endcapture %}
+{% include "docs/example.html" html=html code=code bg="pattern-diagonal" column %}
+
+### Pattern of transparent background
+
+If you want to use a pattern as a background for a transparent element, you can use the `bg-pattern-transparent` class. It can simulate a transparent background.
+
+{% capture html -%}
+{% include "ui/illustration.html" image="boy-with-key.svg" class="d-block mx-auto mw-100" height=200 %}
+{%- endcapture %}
+{% capture code %}
+<div class="bg-pattern-rectangles p-4">
+  <!-- Illustration code here -->
+</div>
+{% endcapture %}
+{% include "docs/example.html" html=html code=code bg="pattern-rectangles" column %}
+
+## Accessibility
+
+Background patterns are decorative and should never reduce content readability:
+
+- Keep sufficient contrast between text and background.
+- Prefer placing patterns on containers around text-heavy content, not directly behind long paragraphs.
+- For callouts and alerts, test color and pattern combinations in both light and dark contexts.
+
+## Best practices
+
+- Start with `.bg-pattern-sm` for dense UIs and increase size only when needed.
+- Avoid stacking multiple decorative backgrounds in the same section.
+- Use strong pattern colors on small surfaces (headers, badges, callouts), and subtler combinations on large sections.

preview/pages/patterns.html

@@ -0,0 +1,58 @@
+---
+layout: default
+title: Patterns
+page-header: Patterns
+page-menu: base.patterns
+permalink: patterns.html
+---
+
+{% assign patterns = "bg-pattern-diagonal,bg-pattern-diagonal-2,bg-pattern-dots,bg-pattern-rectangles,bg-pattern-lines,bg-pattern-lines-vertical,bg-pattern-grid,bg-pattern-grid-diagonal,bg-pattern-blueprint,bg-pattern-circles,bg-pattern-diagonal-stripes,bg-pattern-diagonal-stripes-2,bg-pattern-zigzag,bg-pattern-vertical-stripes,bg-pattern-horizontal-stripes" | split: "," %}
+{% assign pattern-sizes = "sm,md,lg,xl" | split: "," %}
+
+<div class="row row-cards">
+	<div class="col-12">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Pattern types</h3>
+				<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
+					{% for pattern in patterns %}
+					<div class="col">
+						<div class="{{ pattern }} rounded mb-3" style="height: 8rem;"></div>
+						<code>.{{ pattern }}</code>
+					</div>
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-12">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Pattern colors</h3>
+				<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
+					{% for color in site.colors %}
+					<div class="col">
+						<div class="bg-pattern-rectangles bg-pattern-{{ color[0] }} rounded mb-3" style="height: 8rem;"></div>
+						<code>.bg-pattern-{{ color[0] }}</code>
+					</div>
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-12">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Pattern sizes</h3>
+				<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
+					{% for size in pattern-sizes %}
+					<div class="col">
+						<div class="bg-pattern-diagonal bg-pattern-{{ size }} rounded mb-3" style="height: 8rem;"></div>
+						<code>.bg-pattern-{{ size }}</code>
+					</div>
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

shared/data/menu.json

@@ -173,6 +173,11 @@
         "url": "pagination.html",
         "title": "Pagination"
       },
+      "patterns": {
+        "url": "patterns.html",
+        "title": "Patterns",
+        "badge": "New"
+      },
       "placeholder": {
         "url": "placeholder.html",
         "title": "Placeholder"

shared/includes/docs/example.html

@@ -1,6 +1,6 @@
 <!--EXAMPLE-->
 <div
-	class="example fs-base border rounded my-5{% unless include.raw %} d-flex flex-wrap justify-content-center{% endunless %} overflow-{{ include.overflow | default: 'auto' }} position-relative {% if include.bg %}bg-{{ include.bg }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.height %} style="height: {{ include.height }}"{% endif %}{% unless include.bg %} style="background: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\'><rect fill=\'rgba(0, 0, 0, .01)\' x=\'0\' y=\'0\' width=\'10\' height=\'10\' /><rect fill=\'rgba(0, 0, 0, .01)\' x=\'10\' y=\'10\' width=\'10\' height=\'10\' /></svg>')"{% endunless %}}>
+	class="example fs-base border rounded my-5{% unless include.raw %} d-flex flex-wrap justify-content-center{% endunless %} overflow-{{ include.overflow | default: 'auto' }} position-relative {% if include.bg %}bg-{{ include.bg }}{% else %}bg-pattern-rectangles{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.height %} style="height: {{ include.height }}"{% endif %}>
 	{%- unless include.raw -%}<div class="p-6 w-full{% if include.column %} d-flex gap-3 flex-column{% elsif include.centered %} d-flex flex-fill flex-wrap gap-2 justify-content-center{% if include.vertical %} align-items-center flex-column{% else %} justify-content-center{% endif %}{% endif %}" {% if include.column %}style="max-width: 25rem;"{% endif %}>{%- endunless -%}
 		{{ include.html | remove-href }}
 	{%- unless include.raw -%}</div>{%- endunless -%}
@@ -14,7 +14,7 @@
 </a>
 
 ```html
-{{ include.html }}
+{{ include.code | default: include.html }}
 ```
 
 </div>

shared/layouts/docs/default.html

@@ -112,9 +112,19 @@
 					<div class="py-lg-5 ps-lg-5">
 						<div class="py-6 ps-lg-6 p-xxl-6">
 							<div class="prose" data-bs-spy="scroll" data-bs-target="#toc" data-bs-root-margin="50px 0px -0%" data-bs-smooth-scroll="true" tabindex="0">
-								<h1>
+								<div class="d-flex">
-									{{ title }}
+									<h1>
-								</h1>
+										{{ title }}
+									</h1>
+
+									{% if added-in %}
+									{% assign added-in-label = "Added in " | append: added-in %}
+									<div class="ms-auto">
+										{% include "ui/badge.html" color="primary" light=true text=added-in-label %}
+									</div>
+									{% endif %}
+								</div>
+								
 
 								<p class="text-secondary fs-3 lh-3">{{ summary }}</p>