fokus-styles 2.6.2 → 2.7.0

package/packages/fokus-utilities/scss/utilities/_sizing.scss

@@ -0,0 +1,46 @@
+@use "../../../fokus-core/scss/settings" as *;
+@use "../../../fokus-core/scss/tools" as *;
+
+@layer utilities {
+  @if fs-config-list-enabled(sizing, width) {
+    @each $name, $value in $fs-utility-sizes {
+      .fs-u-w-#{$name} { width: $value !important; }
+      .fs-u-h-#{$name} { height: $value !important; }
+      .fs-u-size-#{$name} {
+        width: $value !important;
+        height: $value !important;
+      }
+      .fs-u-min-w-#{$name} { min-width: $value !important; }
+      .fs-u-max-w-#{$name} { max-width: $value !important; }
+      .fs-u-min-h-#{$name} { min-height: $value !important; }
+      .fs-u-max-h-#{$name} { max-height: $value !important; }
+      .fs-u-inline-size-#{$name} { inline-size: $value !important; }
+      .fs-u-block-size-#{$name} { block-size: $value !important; }
+      .fs-u-min-inline-size-#{$name} { min-inline-size: $value !important; }
+      .fs-u-max-inline-size-#{$name} { max-inline-size: $value !important; }
+      .fs-u-min-block-size-#{$name} { min-block-size: $value !important; }
+      .fs-u-max-block-size-#{$name} { max-block-size: $value !important; }
+    }
+
+    @each $breakpoint, $min in $breakpoints {
+      $infix: breakpoint-infix($breakpoint);
+
+      @if $min != 0 {
+        @include media-breakpoint-up($breakpoint) {
+          @each $name, $value in $fs-utility-sizes {
+            .fs-u-w#{$infix}-#{$name} { width: $value !important; }
+            .fs-u-h#{$infix}-#{$name} { height: $value !important; }
+            .fs-u-size#{$infix}-#{$name} {
+              width: $value !important;
+              height: $value !important;
+            }
+            .fs-u-min-w#{$infix}-#{$name} { min-width: $value !important; }
+            .fs-u-max-w#{$infix}-#{$name} { max-width: $value !important; }
+            .fs-u-min-h#{$infix}-#{$name} { min-height: $value !important; }
+            .fs-u-max-h#{$infix}-#{$name} { max-height: $value !important; }
+          }
+        }
+      }
+    }
+  }
+}

package/packages/fokus-utilities/scss/utilities/_spacing.scss

@@ -7,123 +7,50 @@
 
     @include media-breakpoint-up($breakpoint) {
       @each $key, $value in $spacers {
-        .fs-u-m#{$infix}-#{$key} {
-          margin: $value;
-        }
-
-        .fs-u-mt#{$infix}-#{$key} {
-          margin-top: $value;
-        }
-
-        .fs-u-mr#{$infix}-#{$key} {
-          margin-right: $value;
-        }
-
-        .fs-u-mb#{$infix}-#{$key} {
-          margin-bottom: $value;
-        }
-
-        .fs-u-ml#{$infix}-#{$key} {
-          margin-left: $value;
-        }
-
-        .fs-u-mx#{$infix}-#{$key} {
-          margin-right: $value;
-          margin-left: $value;
-        }
-
-        .fs-u-my#{$infix}-#{$key} {
-          margin-top: $value;
-          margin-bottom: $value;
-        }
-
-        .fs-u-p#{$infix}-#{$key} {
-          padding: $value;
-        }
-
-        .fs-u-pt#{$infix}-#{$key} {
-          padding-top: $value;
-        }
-
-        .fs-u-pr#{$infix}-#{$key} {
-          padding-right: $value;
-        }
-
-        .fs-u-pb#{$infix}-#{$key} {
-          padding-bottom: $value;
-        }
-
-        .fs-u-pl#{$infix}-#{$key} {
-          padding-left: $value;
-        }
-
-        .fs-u-px#{$infix}-#{$key} {
-          padding-right: $value;
-          padding-left: $value;
-        }
-
-        .fs-u-py#{$infix}-#{$key} {
-          padding-top: $value;
-          padding-bottom: $value;
-        }
-
-        // Controla o gutter da grid (--fs-gutter-x/-y), consumido por .row/.row > *.
+        .fs-u-m#{$infix}-#{$key} { margin: $value !important; }
+        .fs-u-mt#{$infix}-#{$key} { margin-top: $value !important; }
+        .fs-u-mr#{$infix}-#{$key} { margin-right: $value !important; }
+        .fs-u-mb#{$infix}-#{$key} { margin-bottom: $value !important; }
+        .fs-u-ml#{$infix}-#{$key} { margin-left: $value !important; }
+        .fs-u-mx#{$infix}-#{$key} { margin-inline: $value !important; }
+        .fs-u-my#{$infix}-#{$key} { margin-block: $value !important; }
+        .fs-u-ms#{$infix}-#{$key} { margin-inline-start: $value !important; }
+        .fs-u-me#{$infix}-#{$key} { margin-inline-end: $value !important; }
+        .fs-u-mbs#{$infix}-#{$key} { margin-block-start: $value !important; }
+        .fs-u-mbe#{$infix}-#{$key} { margin-block-end: $value !important; }
+        .fs-u-p#{$infix}-#{$key} { padding: $value !important; }
+        .fs-u-pt#{$infix}-#{$key} { padding-top: $value !important; }
+        .fs-u-pr#{$infix}-#{$key} { padding-right: $value !important; }
+        .fs-u-pb#{$infix}-#{$key} { padding-bottom: $value !important; }
+        .fs-u-pl#{$infix}-#{$key} { padding-left: $value !important; }
+        .fs-u-px#{$infix}-#{$key} { padding-inline: $value !important; }
+        .fs-u-py#{$infix}-#{$key} { padding-block: $value !important; }
+        .fs-u-ps#{$infix}-#{$key} { padding-inline-start: $value !important; }
+        .fs-u-pe#{$infix}-#{$key} { padding-inline-end: $value !important; }
+        .fs-u-pbs#{$infix}-#{$key} { padding-block-start: $value !important; }
+        .fs-u-pbe#{$infix}-#{$key} { padding-block-end: $value !important; }
         .fs-u-g#{$infix}-#{$key} {
           --fs-gutter-x: #{$value};
           --fs-gutter-y: #{$value};
         }
-
-        .fs-u-gx#{$infix}-#{$key} {
-          --fs-gutter-x: #{$value};
-        }
-
-        .fs-u-gy#{$infix}-#{$key} {
-          --fs-gutter-y: #{$value};
-        }
-
-        // Gap literal (flex/grid), independente da grid de colunas.
-        .fs-u-gap#{$infix}-#{$key} {
-          gap: $value;
-        }
-
-        .fs-u-gap-x#{$infix}-#{$key} {
-          column-gap: $value;
-        }
-
-        .fs-u-gap-y#{$infix}-#{$key} {
-          row-gap: $value;
-        }
-      }
-
-      .fs-u-m#{$infix}-auto {
-        margin: auto;
-      }
-
-      .fs-u-mt#{$infix}-auto {
-        margin-top: auto;
-      }
-
-      .fs-u-mr#{$infix}-auto {
-        margin-right: auto;
-      }
-
-      .fs-u-mb#{$infix}-auto {
-        margin-bottom: auto;
-      }
-
-      .fs-u-ml#{$infix}-auto {
-        margin-left: auto;
-      }
-
-      .fs-u-mx#{$infix}-auto {
-        margin-right: auto;
-        margin-left: auto;
-      }
-
-      .fs-u-my#{$infix}-auto {
-        margin-top: auto;
-        margin-bottom: auto;
-      }
+        .fs-u-gx#{$infix}-#{$key} { --fs-gutter-x: #{$value}; }
+        .fs-u-gy#{$infix}-#{$key} { --fs-gutter-y: #{$value}; }
+        .fs-u-gap#{$infix}-#{$key} { gap: $value !important; }
+        .fs-u-gap-x#{$infix}-#{$key} { column-gap: $value !important; }
+        .fs-u-gap-y#{$infix}-#{$key} { row-gap: $value !important; }
+        .fs-u-row-gap#{$infix}-#{$key} { row-gap: $value !important; }
+        .fs-u-column-gap#{$infix}-#{$key} { column-gap: $value !important; }
+      }
+
+      .fs-u-m#{$infix}-auto { margin: auto !important; }
+      .fs-u-mt#{$infix}-auto { margin-top: auto !important; }
+      .fs-u-mr#{$infix}-auto { margin-right: auto !important; }
+      .fs-u-mb#{$infix}-auto { margin-bottom: auto !important; }
+      .fs-u-ml#{$infix}-auto { margin-left: auto !important; }
+      .fs-u-mx#{$infix}-auto { margin-inline: auto !important; }
+      .fs-u-my#{$infix}-auto { margin-block: auto !important; }
+      .fs-u-ms#{$infix}-auto { margin-inline-start: auto !important; }
+      .fs-u-me#{$infix}-auto { margin-inline-end: auto !important; }
     }
   }
 }

package/packages/fokus-utilities/scss/utilities/_states.scss

@@ -1,15 +1,31 @@
 @layer utilities {
-  .fs-u-focus-ring:focus-visible {
-    outline: var(--fs-focus-width) solid var(--fs-focus-color);
-    outline-offset: var(--fs-focus-offset);
-    box-shadow: 0 0 0 var(--fs-focus-ring-size) var(--fs-focus-ring-color);
-  }
+  @if fs-config-list-enabled(states, states) {
+    .fs-u-focus-ring:focus-visible {
+      outline: var(--fs-focus-width) solid var(--fs-focus-color);
+      outline-offset: var(--fs-focus-offset);
+      box-shadow: 0 0 0 var(--fs-focus-ring-size) var(--fs-focus-ring-color);
+    }
+
+    .fs-u-disabled,
+    .fs-u-disabled[aria-disabled="true"] {
+      cursor: not-allowed;
+      opacity: var(--fs-disabled-opacity);
+      pointer-events: none;
+    }
+
+    @media (prefers-contrast: more) {
+      .fs-u-focus-ring:focus-visible {
+        outline-width: max(3px, var(--fs-focus-width));
+      }
+    }
 
-  .fs-u-disabled,
-  .fs-u-disabled[aria-disabled="true"] {
-    cursor: not-allowed;
-    opacity: var(--fs-disabled-opacity);
-    pointer-events: none;
+    @media (forced-colors: active) {
+      .fs-u-focus-ring:focus-visible {
+        outline: 3px solid Highlight;
+        outline-offset: 2px;
+        box-shadow: none;
+      }
+    }
   }
 
   @media print {

package/packages/fokus-utilities/scss/utilities/_transforms.scss

@@ -0,0 +1,67 @@
+@use "sass:string";
+@use "../../../fokus-core/scss/settings" as *;
+
+@layer utilities {
+  @if fs-config-list-enabled(effects, transform) {
+    @each $name, $value in (none: none, center: center, top: top, top-right: top right, right: right, bottom-right: bottom right, bottom: bottom, bottom-left: bottom left, left: left, top-left: top left) {
+      .fs-u-origin-#{$name} { transform-origin: $value !important; }
+    }
+    
+    @each $name, $value in (0: 0deg, 45: 45deg, 90: 90deg, 180: 180deg, -45: -45deg, -90: -90deg) {
+      .fs-u-rotate-#{$name} {
+        --fs-u-rotate: #{$value};
+
+        transform: translate(var(--fs-u-translate-x, 0), var(--fs-u-translate-y, 0)) rotate(var(--fs-u-rotate, 0deg)) scale(var(--fs-u-scale-x, 1), var(--fs-u-scale-y, 1)) skew(var(--fs-u-skew-x, 0deg), var(--fs-u-skew-y, 0deg)) !important;
+      }
+    }
+    
+    @each $name, $value in (0: 0, 50: 0.5, 75: 0.75, 90: 0.9, 95: 0.95, 100: 1, 105: 1.05, 110: 1.1, 125: 1.25, 150: 1.5) {
+      .fs-u-scale-#{$name} {
+        --fs-u-scale-x: #{$value};
+        --fs-u-scale-y: #{$value};
+
+        transform: translate(var(--fs-u-translate-x, 0), var(--fs-u-translate-y, 0)) rotate(var(--fs-u-rotate, 0deg)) scale(var(--fs-u-scale-x, 1), var(--fs-u-scale-y, 1)) skew(var(--fs-u-skew-x, 0deg), var(--fs-u-skew-y, 0deg)) !important;
+      }
+    }
+    .fs-u-transform-none { transform: none !important; }
+
+    .fs-u-translate-none {
+      --fs-u-translate-x: 0;
+      --fs-u-translate-y: 0;
+
+      transform: translate(0, 0) rotate(var(--fs-u-rotate, 0deg)) scale(var(--fs-u-scale-x, 1), var(--fs-u-scale-y, 1)) !important;
+    }
+
+    .fs-u-translate-x-full {
+      --fs-u-translate-x: 100%;
+
+      transform: translate(var(--fs-u-translate-x), var(--fs-u-translate-y, 0)) rotate(var(--fs-u-rotate, 0deg)) scale(var(--fs-u-scale-x, 1), var(--fs-u-scale-y, 1)) !important;
+    }
+
+    .fs-u-translate-x-half {
+      --fs-u-translate-x: 50%;
+
+      transform: translate(var(--fs-u-translate-x), var(--fs-u-translate-y, 0)) rotate(var(--fs-u-rotate, 0deg)) scale(var(--fs-u-scale-x, 1), var(--fs-u-scale-y, 1)) !important;
+    }
+
+    .fs-u-translate-y-full {
+      --fs-u-translate-y: 100%;
+
+      transform: translate(var(--fs-u-translate-x, 0), var(--fs-u-translate-y)) rotate(var(--fs-u-rotate, 0deg)) scale(var(--fs-u-scale-x, 1), var(--fs-u-scale-y, 1)) !important;
+    }
+
+    .fs-u-translate-y-half {
+      --fs-u-translate-y: 50%;
+
+      transform: translate(var(--fs-u-translate-x, 0), var(--fs-u-translate-y)) rotate(var(--fs-u-rotate, 0deg)) scale(var(--fs-u-scale-x, 1), var(--fs-u-scale-y, 1)) !important;
+    }
+
+    @each $axis, $value in (x-3: 3deg, x-6: 6deg, y-3: 3deg, y-6: 6deg) {
+      .fs-u-skew-#{$axis} {
+        --fs-u-skew-#{string.slice($axis, 1, 1)}: #{$value};
+
+        transform: translate(var(--fs-u-translate-x, 0), var(--fs-u-translate-y, 0)) rotate(var(--fs-u-rotate, 0deg)) scale(var(--fs-u-scale-x, 1), var(--fs-u-scale-y, 1)) skew(var(--fs-u-skew-x, 0deg), var(--fs-u-skew-y, 0deg)) !important;
+      }
+    }
+  }
+}

package/packages/fokus-utilities/scss/utilities/_typography.scss

@@ -2,99 +2,77 @@
 @use "../../../fokus-core/scss/tools" as *;
 
 @layer utilities {
-  .fs-u-text-start {
-    text-align: left;
-  }
-
-  .fs-u-text-center {
-    text-align: center;
-  }
-
-  .fs-u-text-end {
-    text-align: right;
-  }
-
-  .fs-u-text-lowercase {
-    text-transform: lowercase;
-  }
-
-  .fs-u-text-uppercase {
-    text-transform: uppercase;
-  }
-
-  .fs-u-text-capitalize {
-    text-transform: capitalize;
-  }
-
-  .fs-u-text-truncate {
-    @include truncate;
-  }
-
-  .fs-u-fw-regular {
-    font-weight: $font-weight-regular;
-  }
-
-  .fs-u-fw-medium {
-    font-weight: $font-weight-medium;
-  }
-
-  .fs-u-fw-semibold {
-    font-weight: $font-weight-semibold;
-  }
-
-  .fs-u-fw-bold {
-    font-weight: $font-weight-bold;
-  }
-
-  .fs-u-fs-xs {
-    font-size: $font-size-xs;
-  }
-
-  .fs-u-fs-sm {
-    font-size: $font-size-sm;
-  }
-
-  .fs-u-fs-md {
-    font-size: $font-size-md;
-  }
-
-  .fs-u-fs-lg {
-    font-size: $font-size-lg;
-  }
-
-  .fs-u-fs-xl {
-    font-size: $font-size-xl;
-  }
-
-  .fs-u-fs-h1 {
-    font-size: $font-size-h1;
-  }
-
-  .fs-u-fs-h2 {
-    font-size: $font-size-h2;
-  }
-
-  .fs-u-fs-h3 {
-    font-size: $font-size-h3;
-  }
-
-  .fs-u-fs-h4 {
-    font-size: $font-size-h4;
-  }
-
-  .fs-u-fs-h5 {
-    font-size: $font-size-h5;
-  }
-
-  .fs-u-fs-h6 {
-    font-size: $font-size-h6;
-  }
-
-  .fs-u-font-sans {
-    font-family: var(--fs-font-sans);
-  }
-
-  .fs-u-font-mono {
-    font-family: var(--fs-font-mono);
+  @if fs-config-list-enabled(typography, typography) {
+    .fs-u-text-start { text-align: start !important; }
+    .fs-u-text-center { text-align: center !important; }
+    .fs-u-text-end { text-align: end !important; }
+    .fs-u-text-justify { text-align: justify !important; }
+    .fs-u-text-lowercase { text-transform: lowercase !important; }
+    .fs-u-text-uppercase { text-transform: uppercase !important; }
+    .fs-u-text-capitalize { text-transform: capitalize !important; }
+    .fs-u-text-normal { font-style: normal !important; }
+    .fs-u-text-italic { font-style: italic !important; }
+    .fs-u-text-wrap { white-space: normal !important; }
+    .fs-u-text-nowrap { white-space: nowrap !important; }
+    .fs-u-text-pre { white-space: pre !important; }
+    .fs-u-text-pre-wrap { white-space: pre-wrap !important; }
+    .fs-u-text-break { overflow-wrap: anywhere !important; }
+    .fs-u-text-break-all { word-break: break-all !important; }
+    .fs-u-text-keep-all { word-break: keep-all !important; }
+    .fs-u-text-balance { text-wrap: balance !important; }
+    .fs-u-text-pretty { text-wrap: pretty !important; }
+
+    .fs-u-text-truncate {
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      white-space: nowrap !important;
+    }
+    .fs-u-text-underline { text-decoration-line: underline !important; }
+    .fs-u-text-no-underline { text-decoration-line: none !important; }
+    .fs-u-underline-dotted { text-decoration-style: dotted !important; }
+    .fs-u-underline-dashed { text-decoration-style: dashed !important; }
+    .fs-u-underline-solid { text-decoration-style: solid !important; }
+    .fs-u-underline-1 { text-decoration-thickness: 1px !important; }
+    .fs-u-underline-2 { text-decoration-thickness: 2px !important; }
+    .fs-u-underline-auto { text-decoration-thickness: auto !important; }
+    .fs-u-align-baseline { vertical-align: baseline !important; }
+    .fs-u-align-middle { vertical-align: middle !important; }
+    .fs-u-align-top { vertical-align: top !important; }
+    .fs-u-align-bottom { vertical-align: bottom !important; }
+    .fs-u-font-sans { font-family: var(--fs-font-sans) !important; }
+    .fs-u-font-mono { font-family: var(--fs-font-mono) !important; }
+
+
+    @each $name, $value in (regular: $font-weight-regular, medium: $font-weight-medium, semibold: $font-weight-semibold, bold: $font-weight-bold) {
+      .fs-u-fw-#{$name} { font-weight: $value !important; }
+    }
+
+    @each $name, $value in (xs: $font-size-xs, sm: $font-size-sm, md: $font-size-md, lg: $font-size-lg, xl: $font-size-xl, h1: $font-size-h1, h2: $font-size-h2, h3: $font-size-h3, h4: $font-size-h4, h5: $font-size-h5, h6: $font-size-h6) {
+      .fs-u-fs-#{$name} { font-size: $value !important; }
+    }
+
+    @each $name, $value in (base: $line-height-base, heading: $line-height-heading, none: 1, tight: 1.25, relaxed: 1.75) {
+      .fs-u-leading-#{$name} { line-height: $value !important; }
+    }
+
+    @each $name, $value in (tighter: -0.05em, tight: -0.025em, normal: 0, wide: 0.025em, wider: 0.05em) {
+      .fs-u-tracking-#{$name} { letter-spacing: $value !important; }
+    }
+
+    @each $breakpoint, $min in $breakpoints {
+      $infix: breakpoint-infix($breakpoint);
+
+      @if $min != 0 {
+        @include media-breakpoint-up($breakpoint) {
+          .fs-u-text#{$infix}-start { text-align: start !important; }
+          .fs-u-text#{$infix}-center { text-align: center !important; }
+          .fs-u-text#{$infix}-end { text-align: end !important; }
+
+          @each $name, $value in (xs: $font-size-xs, sm: $font-size-sm, md: $font-size-md, lg: $font-size-lg, xl: $font-size-xl) {
+            .fs-u-fs#{$infix}-#{$name} { font-size: $value !important; }
+          }
+        }
+      }
+    }
   }
 }

package/scss/entries/helpers-entry.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+@use "../../packages/fokus-core/scss/tokens";
+@use "../../packages/fokus-core/scss/base";
+@use "../../packages/fokus-utilities/scss/utilities/helpers";
+@use "../../packages/fokus-core/scss/themes";

package/scss/entries/rtl-entry.scss

@@ -4,8 +4,11 @@
 @use "../../packages/fokus-core/scss/layout";
 @use "../../packages/fokus-components/scss/components";
 @use "../../packages/fokus-utilities/scss/utilities";
+@use "../../packages/fokus-core/scss/settings" as *;
 
-[dir="rtl"] {
-  direction: rtl;
-  text-align: start;
+@if fs-feature-enabled(rtl, true) {
+  [dir="rtl"] {
+    direction: rtl;
+    text-align: start;
+  }
 }