New text features page (#2152)

.changeset/itchy-ligers-repair.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+New text features page

.github/workflows/bundlewatch.yml

@@ -44,9 +44,6 @@ jobs:
       - name: Install pnpm dependencies
         run: pnpm install --no-frozen-lockfile
 
-      - name: Build
-        run: pnpm run build
-
       - name: Run bundlewatch
         run: pnpm run bundlewatch
         env:

core/package.json

@@ -89,7 +89,7 @@
       },
       {
         "path": "./dist/css/tabler-flags.css",
-        "maxSize": "2 kB"
+        "maxSize": "2.5 kB"
       },
       {
         "path": "./dist/css/tabler-flags.min.css",
@@ -97,7 +97,7 @@
       },
       {
         "path": "./dist/css/tabler-payments.css",
-        "maxSize": "2 kB"
+        "maxSize": "2.2 kB"
       },
       {
         "path": "./dist/css/tabler-payments.min.css",

core/scss/_config.scss

@@ -1,9 +1,9 @@
 @import "bootstrap/scss/functions";
 
+@import "mixins";
 @import "variables";
 @import "variables-dark";
 @import "utilities";
-@import "mixins";
 
 @import "bootstrap-config";
 @import "bootstrap-override";

core/scss/_utilities.scss

@@ -93,4 +93,13 @@ $utilities: (
     responsive: true,
     values: 2 3 4,
   ),
+  "bg-pattern": (
+    property: background,
+    class: bg-pattern,
+    values: (
+      transparent: #{url-svg(
+        '<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,
+    )
+  )
 ) !default;

core/scss/_variables.scss

@@ -803,6 +803,9 @@ $popover-bg: var(--#{$prefix}bg-surface) !default;
 $popover-header-bg: transparent !default;
 $popover-border-color: var(--#{$prefix}border-color) !default;
 $popover-body-color: inherit !default;
+$popover-body-padding-x: .5rem !default;
+$popover-body-padding-y: .5rem !default;
+$popover-box-shadow: var(--#{$prefix}box-shadow-lg) !default;
 
 // Footer
 $footer-padding-y: 2rem !default;

core/scss/mixins/_functions.scss

@@ -42,3 +42,34 @@
   @return if($n > 1, nth($breakpoint-names, $n - 1), null);
 }
 
+/**
+ * Converts a given value to a percentage string.
+ *
+ * @param {Number} $value - The value to be converted to a percentage.
+ * @return {String} - The percentage representation of the value.
+ */
+@function to-percentage($value) {
+  @return if(unitless($value), percentage($value), $value);
+}
+
+/**
+ * Generates a transparent version of the given color.
+ *
+ * @param {Color} $color - The base color to be made transparent.
+ * @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
+ * @return {Color} - The resulting color with the specified transparency.
+ */
+@function color-transparent($color, $alpha: 1, $background: transparent) {
+  @if $alpha == 1 {
+    @return $color;
+  } @else {
+    @return color-mix(in srgb, #{$color} #{to-percentage($alpha)}, $background);
+  }
+}
+
+@function url-svg($svg) {
+  $svg: str-replace($svg, '#', '%23');
+  $svg: str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+
+  @return url('data:image/svg+xml;charset=UTF-8,#{$svg}');
+}

core/scss/ui/_type.scss

@@ -72,7 +72,7 @@ b {
 }
 
 blockquote {
-  padding-left: 1rem;
+  padding: 1rem 1rem 1rem;
   border-left: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 
   p {
@@ -89,7 +89,8 @@ blockquote {
   }
 }
 
-ul, ol {
+ul,
+ol {
   padding-left: 1.5rem;
 }
 
@@ -123,6 +124,12 @@ code {
   border-radius: var(--#{$prefix}border-radius);
 }
 
+abbr {
+  text-decoration: underline dotted;
+  cursor: help;
+  text-decoration-skip-ink: none;
+}
+
 kbd,
 .kbd {
   border: $kbd-border;
@@ -145,18 +152,23 @@ img {
   margin-left: 0;
 }
 
-
 /**
 Selection
  */
-::selection {
-  background-color: rgba(var(--#{$prefix}primary-rgb), .16);
+::selection,
+.text-selected {
+  background-color: color-transparent(var(--#{$prefix}primary), .1);
+}
+
+.text-selected {
+  display: inline-block;
 }
 
 /**
 Links
  */
-[class^="link-"], [class*=" link-"] {
+[class^="link-"],
+[class*=" link-"] {
   &.disabled {
     color: $nav-link-disabled-color !important;
     pointer-events: none;
@@ -173,3 +185,68 @@ Subheader
 .subheader {
   @include subheader;
 }
+
+/**
+Mentions
+ */
+.mention {
+  display: inline-block;
+  box-shadow: var(--tblr-box-shadow-border);
+  border-radius: var(--#{$prefix}border-radius-pill);
+  line-height: calc(16em / 12);
+  font-size: calc(12em / 14);
+  color: var(--#{$prefix}body-color);
+  background: var(--#{$prefix}bg-surface-tertiary);
+  padding: calc(2em / 12) calc(8em / 12);
+  font-weight: var(--#{$prefix}font-weight-medium);
+  
+  @at-root a#{&} {
+    cursor: pointer;
+
+    &:hover, 
+    &.hover {
+      background: var(--#{$prefix}bg-surface-secondary);
+      text-decoration: underline;
+    }
+  }
+}
+
+.mention-avatar,
+.mention-app,
+.mention-color {
+  width: calc(14em / 12);
+  height: calc(14em / 12);
+  border-radius: var(--#{$prefix}border-radius-pill);
+  margin: calc(-2em / 12) calc(4em / 12) 0 calc(-4em / 12);
+  display: inline-flex;
+  background: no-repeat center center/cover;
+  box-shadow: var(--#{$prefix}box-shadow-border);
+  vertical-align: middle;
+  text-align: center;
+}
+
+.mention-app {
+  box-shadow: none;
+  background: none;
+  border-radius: 0;
+}
+
+.mention-count {
+  color: var(--#{$prefix}secondary);
+  margin-left: calc(8em / 12);
+}
+
+$text-variants: (
+  incorrect: var(--#{$prefix}red),
+  correct: var(--#{$prefix}green),
+);
+
+@each $variant, $color in $text-variants {
+  .text-#{$variant} {
+    background: color-transparent($color, .04);
+    background: color-transparent($color, 4%);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-decoration-color: $color;
+  }
+}

preview/pages/text-features.html

@@ -0,0 +1,72 @@
+---
+title: Text features
+layout: default
+permalink: text-features.html
+page-header: Text features
+---
+
+<div class="row">
+	<div class="col-7">
+		<div class="card card-lg">
+			<div class="card-body">
+				<div class="markdown">
+					<h3>Text features</h3>
+
+					<p>HTML provides various tags to format text and add meaning. For example, <strong>important words</strong> can be highlighted, and <em>emphasized text</em> can be italicized.</p>
+
+					<p>If you want to visit an interesting website, check out <a href="{{ site.homepage }}" target="_blank">this page</a>.</p>
+
+					<p>The term <abbr data-bs-toggle="tooltip" data-bs-placement="top" title="Hypertext Markup Language">HTML</abbr> is widely used in web development.</p>
+
+					<p>Previously, the instruction said <del>"Do not include images."</del> However, <ins>"You may now add images."</ins></p>
+
+					<blockquote cite="{{ site.homepage }}">"The best way to predict the future is to create it." – Peter Drucker</blockquote>
+
+					<p>Sometimes, <mark>highlighting important text</mark> can improve readability.</p>
+
+					<p>In JavaScript, you can log messages using the following code: <code>console.log('Hello, world!');</code></p>
+
+					<p>To copy text on Windows, use <kbd>Ctrl + C</kbd>. On macOS, use <kbd>Cmd + C</kbd>.</p>
+
+					<p>Water is written chemically as H<sub>2</sub>O, while Einstein’s famous equation is E = mc<sup>2</sup>.</p>
+
+					<p>Many people mistakenly spell <span class="text-incorrect">"recieve"</span> instead of <span class="text-correct">"receive"</span>.</p>
+
+					<p>The correct way to write the date format is <span class="text-correct">"February 12, 2025"</span>, not <span class="text-incorrect">"12th February, 2025"</span> in American English.</p>
+
+					<p>
+						If you need select text, you can use your mouse or keyboard. To select text using your mouse, click and drag the cursor over the text <span class="text-selected">you want to highlight</span>.
+					</p>
+
+					<p><small>Disclaimer: This text is for demonstration purposes only.</small></p>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div class="card card-lg">
+			<div class="card-body">
+				<div class="markdown">
+					{% for i in (1..6) %}
+						<h{{ i }}>Heading {{ i }} by <a class="mention"><span class="mention-avatar" style="background-image: url(/static/avatars/035f.jpg)"></span><span class="visually-hidden">@</span>JohnDoe</a></h{{ i }}>
+					{% endfor %}
+
+					<p>
+						Tabler is a modern UI framework which <span class="text-incorrect" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">provide</span> developers with a lot of <span class="text-incorrect">pre-build</span> components and customizable options. It is
+						<span class="text-incorrect">build</span> on Bootstrap, making it easy to integrate into existing projects. The design is clean, responsive, and accessible, ensuring that <span class="text-incorrect">user</span> can navigate
+						through <span class="text-incorrect">interface</span> easily. Tabler also <span class="text-incorrect">support</span> all modern browsers, but some features may not work properly on Internet Explorer. With
+						<span class="text-incorrect">it's</span> lightweight structure and optimized performance, Tabler helps developers create stunning web applications faster.
+					</p>
+
+					<p>Hey <a class="mention"><span class="mention-avatar" style="background-image: url(/static/avatars/035f.jpg)"></span><span class="visually-hidden">@</span>JohnDoe</a>, have you seen the latest updates on <a class="mention">#WebDevelopment<span class="mention-count">16</span></a>? <a class="mention"><span class="mention-avatar" style="background-image: url(/static/avatars/035f.jpg)"></span><span class="visually-hidden">@</span>JaneSmith</a> just shared an interesting article about <a class="mention"><span class="mention-app" style="background-image: url(/static/brands/messenger.svg)"></span>Messenger</a> and <a class="mention"><span class="mention-app" style="background-image: url(/static/brands/netflix.svg)"></span>Netflix</a>!</p>
+
+					<p>
+						The sky is <span class="mention"><span class="mention-color bg-blue"></span>#066fd1</span>, the grass is <span class="mention"><span class="mention-color bg-green"></span>rgb(47, 179, 68)</span>, fire trucks are often <span class="mention"><span class="mention-color bg-red"></span>red</span>, oranges are <span class="mention"><span class="mention-color bg-orange"></span>hsl(24deg, 94.49%, 49.8%)</span>. Some flowers are <span class="mention"><span class="mention-color bg-purple"></span>hwb(288.35deg, 24.31%, 21.18%)</span>.
+					</p>
+
+					<hr />
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

turbo.json

@@ -24,7 +24,7 @@
     },
     "bundlewatch": {
       "dependsOn": [
-        "^build"
+        "build"
       ]
     }
   }