@finqu/cool 1.2.29 → 2.0.2

package/scss/utilities/_text.scss

@@ -1,99 +1,420 @@
-// Text
-// ---------------------------------------------------------------------------------------------------------------
-
-// Align
-.text-left {
-    text-align: left !important;
-}
-
-.text-center {
-    text-align: center !important;
-}
-
-.text-right {
-    text-align: right !important;
-}
-
-.text-justify {
-    text-align: justify !important;
-}
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-
-    @include media-breakpoint-up($breakpoint) {
-
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-        .text#{$infix}-left   {
-            text-align: left !important;
-        }
-
-        .text#{$infix}-right  {
-            text-align: right !important;
-        }
-
-        .text#{$infix}-center {
-            text-align: center !important;
-        }
-
-        .text#{$infix}-justify {
-            text-align: justify !important;
-        }
-    }
-}
-
-// Transform
-.text-lowercase {
-    text-transform: lowercase !important;
-}
-
-.text-uppercase {
-    text-transform: uppercase !important;
-}
-
-.text-capitalize {
-    text-transform: capitalize !important;
-}
-
-.text-transform-none {
-    text-transform: none !important;
-}
-
-// Decoration
-.text-underline {
-    text-decoration: underline !important;
-}
-
-.text-decoration-none {
-    text-decoration: none !important;
-}
-
-// Colors
-// @each $color, $value in $colors {
-//     @include text-emphasis-variant(".text-#{$color}", $value);
-// }
-
-@each $color, $value in $theme-colors {
-    @include text-emphasis-variant(".text-#{$color}", $value);
-}
-
-// Truncate
-.text-truncate {
-    @include text-truncate();
-}
-
-// Misc
-.text-hide {
-    @include text-hide();
-}
-
-.text-nowrap {
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    white-space: nowrap !important;
-}
-
-.text-break {
-    word-break: break-word !important;
-    overflow-wrap: break-word !important;
-}
+@use "../variables" as *;
+@use "sass:map";
+@use "sass:math";
+/* Text Utilities ========================================================================== */
+
+@mixin cool-text {
+    .text-xs {
+        font-size: var(--cool-font-size-xs);
+    }
+
+    .font-size-sm,
+    .text-sm {
+        font-size: var(--cool-font-size-sm);
+    }
+
+    .text-base {
+        font-size: var(--cool-font-size-base);
+    }
+
+    .font-size-lg,
+    .text-lg {
+        font-size: var(--cool-font-size-lg);
+    }
+
+    .text-xl {
+        font-size: 1.25rem;
+    }
+
+    .text-2xl {
+        font-size: 1.5rem;
+    }
+
+    .text-3xl {
+        font-size: 1.875rem;
+    }
+
+    .text-4xl {
+        font-size: 2.25rem;
+    }
+
+    .text-5xl {
+        font-size: 3rem;
+    }
+
+    .text-6xl {
+        font-size: 3.75rem;
+    }
+
+    .text-7xl {
+        font-size: 4.5rem;
+    }
+
+    .text-8xl {
+        font-size: 6rem;
+    }
+
+    .text-9xl {
+        font-size: 8rem;
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            .text#{$infix}-xs {
+                font-size: var(--cool-font-size-xs);
+            }
+
+            .text#{$infix}-sm {
+                font-size: var(--cool-font-size-sm);
+            }
+
+            .text#{$infix}-base {
+                font-size: var(--cool-font-size-base);
+            }
+
+            .text#{$infix}-lg {
+                font-size: var(--cool-font-size-lg);
+            }
+
+            .text#{$infix}-xl {
+                font-size: 1.25rem;
+            }
+
+            .text#{$infix}-2xl {
+                font-size: 1.5rem;
+            }
+
+            .text#{$infix}-3xl {
+                font-size: 1.875rem;
+            }
+
+            .text#{$infix}-4xl {
+                font-size: 2.25rem;
+            }
+
+            .text#{$infix}-5xl {
+                font-size: 3rem;
+            }
+        }
+    }
+
+    .antialiased {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    .subpixel-antialiased {
+        -webkit-font-smoothing: auto;
+        -moz-osx-font-smoothing: auto;
+    }
+
+    .normal-nums {
+        font-variant-numeric: normal;
+    }
+
+    .ordinal {
+        font-variant-numeric: ordinal;
+    }
+
+    .slashed-zero {
+        font-variant-numeric: slashed-zero;
+    }
+
+    .lining-nums {
+        font-variant-numeric: lining-nums;
+    }
+
+    .oldstyle-nums {
+        font-variant-numeric: oldstyle-nums;
+    }
+
+    .proportional-nums {
+        font-variant-numeric: proportional-nums;
+    }
+
+    .tabular-nums {
+        font-variant-numeric: tabular-nums;
+    }
+
+    .diagonal-fractions {
+        font-variant-numeric: diagonal-fractions;
+    }
+
+    .stacked-fractions {
+        font-variant-numeric: stacked-fractions;
+    }
+
+    .font-feature-normal {
+        font-feature-settings: normal;
+    }
+
+    .font-feature-small-caps {
+        font-feature-settings: "smcp";
+    }
+
+    .font-feature-ligatures {
+        font-feature-settings: "liga";
+    }
+
+    .font-feature-no-ligatures {
+        font-feature-settings: "liga" 0;
+    }
+
+    .font-feature-discretionary {
+        font-feature-settings: "dlig";
+    }
+
+    .font-feature-contextual {
+        font-feature-settings: "calt";
+    }
+
+    @supports (font-variation-settings: normal) {
+        .font-weight-variable {
+            font-variation-settings: "wght" var(--cool-font-weight-normal);
+        }
+
+        .font-width-variable {
+            font-variation-settings: "wdth" var(--font-width);
+        }
+
+        .font-slant-variable {
+            font-variation-settings: "slnt" var(--font-slant);
+        }
+    }
+
+    .text-rendering-auto {
+        text-rendering: auto;
+    }
+
+    .text-rendering-speed {
+        text-rendering: optimizeSpeed;
+    }
+
+    .text-rendering-legibility {
+        text-rendering: optimizeLegibility;
+    }
+
+    .text-rendering-precision {
+        text-rendering: geometricPrecision;
+    }
+
+    .font-kerning-normal {
+        font-kerning: normal;
+    }
+
+    .font-kerning-none {
+        font-kerning: none;
+    }
+
+    .font-kerning-auto {
+        font-kerning: auto;
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            .text#{$infix}-left,
+            .text#{$infix}-start {
+                text-align: start !important;
+            }
+
+            .text#{$infix}-right,
+            .text#{$infix}-end {
+                text-align: end !important;
+            }
+
+            .text#{$infix}-center {
+                text-align: center !important;
+            }
+
+            .text#{$infix}-justify {
+                text-align: justify;
+                hyphens: auto;
+            }
+        }
+    }
+
+    .text-lowercase {
+        text-transform: lowercase;
+    }
+
+    .text-uppercase {
+        text-transform: uppercase;
+    }
+
+    .text-capitalize {
+        text-transform: capitalize;
+    }
+
+    .text-transform-none {
+        text-transform: none;
+    }
+
+    .text-underline {
+        text-decoration: underline;
+    }
+
+    .text-line-through {
+        text-decoration: line-through;
+    }
+
+    .text-decoration-none {
+        text-decoration: none;
+    }
+
+    .fw-light,
+    .font-weight-light {
+        font-weight: var(--cool-font-weight-light);
+    }
+
+    .fw-lighter,
+    .font-weight-lighter {
+        font-weight: var(--cool-font-weight-lighter);
+    }
+
+    .fw-normal,
+    .font-weight-normal {
+        font-weight: var(--cool-font-weight-normal);
+    }
+
+    .fw-bold,
+    .font-weight-bold {
+        font-weight: var(--cool-font-weight-bold);
+    }
+
+    .fw-bolder,
+    .font-weight-bolder {
+        font-weight: var(--cool-font-weight-bolder);
+    }
+
+    @each $color, $value in $theme-text-colors {
+        .text-#{$color} {
+            color: var(--cool-theme-text-color-#{$color});
+        }
+    }
+
+    @each $color, $value in $theme-foreground-colors {
+        .text-foreground-#{$color} {
+            color: var(--cool-theme-foreground-color-#{$color});
+        }
+    }
+
+    .text-wrap {
+        white-space: normal;
+    }
+
+    .text-nowrap {
+        white-space: nowrap;
+    }
+
+    .text-break {
+        word-wrap: break-word;
+        word-break: break-word;
+        overflow-wrap: break-word;
+    }
+
+    .text-truncate {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    @for $i from 1 through 5 {
+        .text-truncate-#{$i} {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: $i;
+            line-clamp: $i;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            @supports (display: -webkit-box) and (-webkit-line-clamp: $i) {
+                line-clamp: $i;
+            }
+        }
+    }
+
+    .font-italic {
+        font-style: italic;
+    }
+
+    .font-normal {
+        font-style: normal;
+    }
+
+    .font-monospace,
+    .monospace {
+        font-family: var(--cool-font-family-monospace);
+    }
+
+    .font-sans-serif {
+        font-family: var(--cool-font-family-sans-serif);
+    }
+
+    .letter-spacing-0 {
+        letter-spacing: 0;
+    }
+
+    .letter-spacing-1 {
+        letter-spacing: 0.0625rem;
+    }
+
+    .letter-spacing-2 {
+        letter-spacing: 0.125rem;
+    }
+
+    .letter-spacing-3 {
+        letter-spacing: 0.25rem;
+    }
+
+    .tracking-tighter {
+        letter-spacing: -0.05em;
+    }
+
+    .tracking-tight {
+        letter-spacing: -0.025em;
+    }
+
+    .tracking-normal {
+        letter-spacing: 0;
+    }
+
+    .tracking-wide {
+        letter-spacing: 0.025em;
+    }
+
+    .tracking-wider {
+        letter-spacing: 0.05em;
+    }
+
+    .tracking-widest {
+        letter-spacing: 0.1em;
+    }
+
+    .lh-1 {
+        line-height: 1;
+    }
+
+    .lh-sm {
+        line-height: 1.25;
+    }
+
+    .lh-base {
+        line-height: var(--cool-line-height-base);
+    }
+
+    .lh-lg {
+        line-height: 2;
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-text;
+    }
+} @else {
+    @include cool-text;
+}