From b47725dcc2f4adff817682e1bc7fe0a831f16855 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Thu, 13 Feb 2025 22:49:42 +0100 Subject: [PATCH] New text features page (#2152) --- .changeset/itchy-ligers-repair.md | 5 ++ .github/workflows/bundlewatch.yml | 3 -- core/package.json | 4 +- core/scss/_config.scss | 2 +- core/scss/_utilities.scss | 9 ++++ core/scss/_variables.scss | 3 ++ core/scss/mixins/_functions.scss | 31 +++++++++++ core/scss/ui/_type.scss | 89 ++++++++++++++++++++++++++++--- preview/pages/text-features.html | 72 +++++++++++++++++++++++++ turbo.json | 2 +- 10 files changed, 207 insertions(+), 13 deletions(-) create mode 100644 .changeset/itchy-ligers-repair.md create mode 100644 preview/pages/text-features.html diff --git a/.changeset/itchy-ligers-repair.md b/.changeset/itchy-ligers-repair.md new file mode 100644 index 000000000..0b9bd6e3d --- /dev/null +++ b/.changeset/itchy-ligers-repair.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": minor +--- + +New text features page diff --git a/.github/workflows/bundlewatch.yml b/.github/workflows/bundlewatch.yml index 60318c9da..0cff6f617 100644 --- a/.github/workflows/bundlewatch.yml +++ b/.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: diff --git a/core/package.json b/core/package.json index fae72e527..7712c1e9c 100644 --- a/core/package.json +++ b/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", diff --git a/core/scss/_config.scss b/core/scss/_config.scss index 48a2ea39f..a457b8c80 100644 --- a/core/scss/_config.scss +++ b/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"; diff --git a/core/scss/_utilities.scss b/core/scss/_utilities.scss index b6219b8a7..eef28aecb 100644 --- a/core/scss/_utilities.scss +++ b/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( + '' + )} repeat center/16px 16px, + ) + ) ) !default; diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 2c5f3f9c2..aeb2ba3eb 100644 --- a/core/scss/_variables.scss +++ b/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; diff --git a/core/scss/mixins/_functions.scss b/core/scss/mixins/_functions.scss index 0fd2ac2ec..7f5fc586f 100644 --- a/core/scss/mixins/_functions.scss +++ b/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, ' +
+
+
+
+

Text features

+ +

HTML provides various tags to format text and add meaning. For example, important words can be highlighted, and emphasized text can be italicized.

+ +

If you want to visit an interesting website, check out this page.

+ +

The term HTML is widely used in web development.

+ +

Previously, the instruction said "Do not include images." However, "You may now add images."

+ +
"The best way to predict the future is to create it." – Peter Drucker
+ +

Sometimes, highlighting important text can improve readability.

+ +

In JavaScript, you can log messages using the following code: console.log('Hello, world!');

+ +

To copy text on Windows, use Ctrl + C. On macOS, use Cmd + C.

+ +

Water is written chemically as H2O, while Einstein’s famous equation is E = mc2.

+ +

Many people mistakenly spell "recieve" instead of "receive".

+ +

The correct way to write the date format is "February 12, 2025", not "12th February, 2025" in American English.

+ +

+ 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 you want to highlight. +

+ +

Disclaimer: This text is for demonstration purposes only.

+
+
+
+
+
+
+
+
+ {% for i in (1..6) %} + Heading {{ i }} by JohnDoe + {% endfor %} + +

+ Tabler is a modern UI framework which provide developers with a lot of pre-build components and customizable options. It is + build on Bootstrap, making it easy to integrate into existing projects. The design is clean, responsive, and accessible, ensuring that user can navigate + through interface easily. Tabler also support all modern browsers, but some features may not work properly on Internet Explorer. With + it's lightweight structure and optimized performance, Tabler helps developers create stunning web applications faster. +

+ +

Hey JohnDoe, have you seen the latest updates on #WebDevelopment16? JaneSmith just shared an interesting article about Messenger and Netflix!

+ +

+ The sky is #066fd1, the grass is rgb(47, 179, 68), fire trucks are often red, oranges are hsl(24deg, 94.49%, 49.8%). Some flowers are hwb(288.35deg, 24.31%, 21.18%). +

+ +
+
+
+
+
+ diff --git a/turbo.json b/turbo.json index 27e874558..c88b7a931 100644 --- a/turbo.json +++ b/turbo.json @@ -24,7 +24,7 @@ }, "bundlewatch": { "dependsOn": [ - "^build" + "build" ] } }