@finqu/cool 1.3.0 → 2.0.2

package/scss/utilities/_text.scss

@@ -0,0 +1,420 @@
+@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;
+}

package/scss/utilities/_transform.scss

@@ -0,0 +1,232 @@
+@use "../variables" as *;
+/* Transform ========================================================================== */
+
+@mixin cool-transform {
+    .transform {
+        transform: translateX(var(--cool-translate-x, 0)) translateY(var(--cool-translate-y, 0))
+            rotate(var(--cool-rotate, 0)) scaleX(var(--cool-scale-x, 1)) scaleY(var(--cool-scale-y, 1))
+            skewX(var(--cool-skew-x, 0)) skewY(var(--cool-skew-y, 0));
+    }
+    .transform-none {
+        transform: none;
+    }
+
+    .scale-0 {
+        --cool-scale-x: 0;
+        --cool-scale-y: 0;
+    }
+    .scale-50 {
+        --cool-scale-x: 0.5;
+        --cool-scale-y: 0.5;
+    }
+    .scale-75 {
+        --cool-scale-x: 0.75;
+        --cool-scale-y: 0.75;
+    }
+    .scale-90 {
+        --cool-scale-x: 0.9;
+        --cool-scale-y: 0.9;
+    }
+    .scale-95 {
+        --cool-scale-x: 0.95;
+        --cool-scale-y: 0.95;
+    }
+    .scale-100 {
+        --cool-scale-x: 1;
+        --cool-scale-y: 1;
+    }
+    .scale-105 {
+        --cool-scale-x: 1.05;
+        --cool-scale-y: 1.05;
+    }
+    .scale-110 {
+        --cool-scale-x: 1.1;
+        --cool-scale-y: 1.1;
+    }
+    .scale-125 {
+        --cool-scale-x: 1.25;
+        --cool-scale-y: 1.25;
+    }
+    .scale-150 {
+        --cool-scale-x: 1.5;
+        --cool-scale-y: 1.5;
+    }
+
+    .scale-x-0 {
+        --cool-scale-x: 0;
+    }
+    .scale-x-50 {
+        --cool-scale-x: 0.5;
+    }
+    .scale-x-75 {
+        --cool-scale-x: 0.75;
+    }
+    .scale-x-90 {
+        --cool-scale-x: 0.9;
+    }
+    .scale-x-95 {
+        --cool-scale-x: 0.95;
+    }
+    .scale-x-100 {
+        --cool-scale-x: 1;
+    }
+    .scale-x-105 {
+        --cool-scale-x: 1.05;
+    }
+    .scale-x-110 {
+        --cool-scale-x: 1.1;
+    }
+    .scale-x-125 {
+        --cool-scale-x: 1.25;
+    }
+    .scale-x-150 {
+        --cool-scale-x: 1.5;
+    }
+
+    .scale-y-0 {
+        --cool-scale-y: 0;
+    }
+    .scale-y-50 {
+        --cool-scale-y: 0.5;
+    }
+    .scale-y-75 {
+        --cool-scale-y: 0.75;
+    }
+    .scale-y-90 {
+        --cool-scale-y: 0.9;
+    }
+    .scale-y-95 {
+        --cool-scale-y: 0.95;
+    }
+    .scale-y-100 {
+        --cool-scale-y: 1;
+    }
+    .scale-y-105 {
+        --cool-scale-y: 1.05;
+    }
+    .scale-y-110 {
+        --cool-scale-y: 1.1;
+    }
+    .scale-y-125 {
+        --cool-scale-y: 1.25;
+    }
+    .scale-y-150 {
+        --cool-scale-y: 1.5;
+    }
+
+    .rotate-0 {
+        --cool-rotate: 0deg;
+    }
+    .rotate-45 {
+        --cool-rotate: 45deg;
+    }
+    .rotate-90 {
+        --cool-rotate: 90deg;
+    }
+    .rotate-180 {
+        --cool-rotate: 180deg;
+    }
+    .-rotate-45 {
+        --cool-rotate: -45deg;
+    }
+    .-rotate-90 {
+        --cool-rotate: -90deg;
+    }
+    .-rotate-180 {
+        --cool-rotate: -180deg;
+    }
+
+    @each $name, $size in $spacers {
+        .translate-x-#{$name} {
+            --cool-translate-x: #{$size};
+        }
+        .translate-y-#{$name} {
+            --cool-translate-y: #{$size};
+        }
+        .-translate-x-#{$name} {
+            --cool-translate-x: -#{$size};
+        }
+        .-translate-y-#{$name} {
+            --cool-translate-y: -#{$size};
+        }
+    }
+
+    .translate-x-full {
+        --cool-translate-x: 100%;
+    }
+    .translate-y-full {
+        --cool-translate-y: 100%;
+    }
+    .-translate-x-full {
+        --cool-translate-x: -100%;
+    }
+    .-translate-y-full {
+        --cool-translate-y: -100%;
+    }
+
+    .origin-center {
+        transform-origin: center;
+    }
+    .origin-top {
+        transform-origin: top;
+    }
+    .origin-top-right {
+        transform-origin: top right;
+    }
+    .origin-right {
+        transform-origin: right;
+    }
+    .origin-bottom-right {
+        transform-origin: bottom right;
+    }
+    .origin-bottom {
+        transform-origin: bottom;
+    }
+    .origin-bottom-left {
+        transform-origin: bottom left;
+    }
+    .origin-left {
+        transform-origin: left;
+    }
+    .origin-top-left {
+        transform-origin: top left;
+    }
+
+    .transform-style-flat {
+        transform-style: flat;
+    }
+    .transform-style-3d {
+        transform-style: preserve-3d;
+    }
+
+    .backface-visible {
+        backface-visibility: visible;
+    }
+    .backface-hidden {
+        backface-visibility: hidden;
+    }
+
+    .perspective-none {
+        perspective: none;
+    }
+    .perspective-sm {
+        perspective: 250px;
+    }
+    .perspective-md {
+        perspective: 500px;
+    }
+    .perspective-lg {
+        perspective: 1000px;
+    }
+    .perspective-xl {
+        perspective: 1500px;
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-transform;
+    }
+} @else {
+    @include cool-transform;
+}