fokus-styles 2.6.2 → 2.7.0

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

@@ -0,0 +1,39 @@
+@use "../../../fokus-core/scss/settings" as *;
+
+@layer utilities {
+  @if fs-config-list-enabled(borders, borders) and fs-feature-enabled(rounded, true) {
+    @each $name, $value in $fs-utility-border-widths {
+      .fs-u-border-#{$name} { border-width: $value !important; }
+      .fs-u-border-t-#{$name} { border-block-start-width: $value !important; }
+      .fs-u-border-e-#{$name} { border-inline-end-width: $value !important; }
+      .fs-u-border-b-#{$name} { border-block-end-width: $value !important; }
+      .fs-u-border-s-#{$name} { border-inline-start-width: $value !important; }
+      .fs-u-outline-#{$name} { outline-width: $value !important; }
+    }
+
+    @each $name, $value in $fs-utility-radii {
+      .fs-u-rounded-#{$name} { border-radius: $value !important; }
+      .fs-u-rounded-t-#{$name} {
+        border-start-start-radius: $value !important;
+        border-start-end-radius: $value !important;
+      }
+      .fs-u-rounded-b-#{$name} {
+        border-end-start-radius: $value !important;
+        border-end-end-radius: $value !important;
+      }
+      .fs-u-rounded-s-#{$name} {
+        border-start-start-radius: $value !important;
+        border-end-start-radius: $value !important;
+      }
+      .fs-u-rounded-e-#{$name} {
+        border-start-end-radius: $value !important;
+        border-end-end-radius: $value !important;
+      }
+    }
+
+    @each $style in solid, dashed, dotted, double, none {
+      .fs-u-border-#{$style} { border-style: $style !important; }
+      .fs-u-outline-#{$style} { outline-style: $style !important; }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+@use "../../../fokus-core/scss/settings" as *;
+
+@layer utilities {
+  @if fs-config-list-enabled(colors, color) {
+    @each $name, $value in $theme-colors {
+      .fs-u-color-#{$name} {
+        color: var(--fs-color-#{$name}, #{$value}) !important;
+      }
+
+      .fs-u-bg-#{$name} {
+        background-color: var(--fs-color-#{$name}, #{$value}) !important;
+      }
+
+      .fs-u-bg-#{$name}-subtle {
+        background-color: var(--fs-color-#{$name}-bg-subtle, #{$value}) !important;
+      }
+
+      .fs-u-border-#{$name}-subtle {
+        border-color: var(--fs-color-#{$name}-border-subtle, #{$value}) !important;
+      }
+
+      .fs-u-text-#{$name}-emphasis {
+        color: var(--fs-color-#{$name}-text-emphasis, #{$value}) !important;
+      }
+    }
+  }
+}

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

@@ -1,21 +1,25 @@
-@layer utilities {
-  .fs-u-d-none {
-    display: none;
-  }
-
-  .fs-u-d-block {
-    display: block;
-  }
+@use "../../../fokus-core/scss/settings" as *;
+@use "../../../fokus-core/scss/tools" as *;
 
-  .fs-u-d-inline {
-    display: inline;
-  }
+@layer utilities {
+  $display-values: (
+    none,
+    block,
+    inline,
+    inline-block,
+    flex,
+    grid
+  );
 
-  .fs-u-d-inline-block {
-    display: inline-block;
-  }
+  @each $breakpoint, $min in $breakpoints {
+    $infix: breakpoint-infix($breakpoint);
 
-  .fs-u-d-flex {
-    display: flex;
+    @include media-breakpoint-up($breakpoint) {
+      @each $display in $display-values {
+        .fs-u-d#{$infix}-#{$display} {
+          display: $display !important;
+        }
+      }
+    }
   }
 }

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

@@ -0,0 +1,53 @@
+@use "../../../fokus-core/scss/settings" as *;
+
+@layer utilities {
+  @if fs-config-list-enabled(effects, effects) {
+    @each $name, $value in $theme-colors {
+      .fs-u-border-color-#{$name} { border-color: var(--fs-color-#{$name}, #{$value}) !important; }
+      .fs-u-outline-color-#{$name} { outline-color: var(--fs-color-#{$name}, #{$value}) !important; }
+    }
+
+    @each $value in 0, 25, 50, 75, 100 {
+      .fs-u-opacity-#{$value} { opacity: $value * 0.01 !important; }
+    }
+
+    .fs-u-filter-none { filter: none !important; }
+    .fs-u-backdrop-filter-none { backdrop-filter: none !important; }
+
+    @each $name, $value in (sm: 4px, md: 8px, lg: 16px, xl: 24px) {
+      .fs-u-blur-#{$name} {
+        --fs-u-blur: blur(#{$value});
+
+        filter: var(--fs-u-blur, ) var(--fs-u-brightness, ) var(--fs-u-contrast, ) var(--fs-u-grayscale, ) var(--fs-u-invert, ) var(--fs-u-saturate, ) !important;
+      }
+      .fs-u-backdrop-blur-#{$name} {
+        backdrop-filter: blur(#{$value}) !important;
+      }
+    }
+
+    @each $name, $value in (low: 0.75, normal: 1, high: 1.25) {
+      .fs-u-brightness-#{$name} {
+        --fs-u-brightness: brightness(#{$value});
+
+        filter: var(--fs-u-blur, ) var(--fs-u-brightness, ) var(--fs-u-contrast, ) var(--fs-u-grayscale, ) var(--fs-u-invert, ) var(--fs-u-saturate, ) !important;
+      }
+      .fs-u-contrast-#{$name} {
+        --fs-u-contrast: contrast(#{$value});
+
+        filter: var(--fs-u-blur, ) var(--fs-u-brightness, ) var(--fs-u-contrast, ) var(--fs-u-grayscale, ) var(--fs-u-invert, ) var(--fs-u-saturate, ) !important;
+      }
+    }
+
+    .fs-u-grayscale {
+      --fs-u-grayscale: grayscale(100%);
+
+      filter: var(--fs-u-blur, ) var(--fs-u-brightness, ) var(--fs-u-contrast, ) var(--fs-u-grayscale, ) var(--fs-u-invert, ) var(--fs-u-saturate, ) !important;
+    }
+
+    .fs-u-invert {
+      --fs-u-invert: invert(100%);
+
+      filter: var(--fs-u-blur, ) var(--fs-u-brightness, ) var(--fs-u-contrast, ) var(--fs-u-grayscale, ) var(--fs-u-invert, ) var(--fs-u-saturate, ) !important;
+    }
+  }
+}

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

@@ -2,53 +2,68 @@
 @use "../../../fokus-core/scss/tools" as *;
 
 @layer utilities {
-  @each $breakpoint, $min in $breakpoints {
-    $infix: breakpoint-infix($breakpoint);
+  $directions: (row: row, column: column, row-reverse: row-reverse, column-reverse: column-reverse);
+  $wraps: (wrap: wrap, nowrap: nowrap, wrap-reverse: wrap-reverse);
+  $alignments: (start: flex-start, end: flex-end, center: center, baseline: baseline, stretch: stretch);
+  $justifications: (start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, evenly: space-evenly);
 
-    @include media-breakpoint-up($breakpoint) {
-      .fs-u-align-items#{$infix}-start {
-        align-items: flex-start;
-      }
+  @if fs-config-list-enabled(flex, flex) {
+    @each $breakpoint, $min in $breakpoints {
+      $infix: breakpoint-infix($breakpoint);
 
-      .fs-u-align-items#{$infix}-center {
-        align-items: center;
-      }
+      @include media-breakpoint-up($breakpoint) {
+        @each $name, $value in $directions {
+          .fs-u-flex#{$infix}-#{$name} { flex-direction: $value !important; }
+          .fs-u-flex-direction#{$infix}-#{$name} { flex-direction: $value !important; }
+        }
 
-      .fs-u-align-items#{$infix}-end {
-        align-items: flex-end;
-      }
+        @each $name, $value in $wraps {
+          .fs-u-flex#{$infix}-#{$name} { flex-wrap: $value !important; }
+          .fs-u-flex-wrap#{$infix}-#{$name} { flex-wrap: $value !important; }
+        }
 
-      .fs-u-justify-content#{$infix}-start {
-        justify-content: flex-start;
-      }
+        @each $name, $value in $alignments {
+          .fs-u-align-items#{$infix}-#{$name} { align-items: $value !important; }
+          .fs-u-align-self#{$infix}-#{$name} { align-self: $value !important; }
+          .fs-u-align-content#{$infix}-#{$name} { align-content: $value !important; }
+        }
 
-      .fs-u-justify-content#{$infix}-center {
-        justify-content: center;
-      }
+        @each $name, $value in $justifications {
+          .fs-u-justify-content#{$infix}-#{$name} { justify-content: $value !important; }
+        }
 
-      .fs-u-justify-content#{$infix}-end {
-        justify-content: flex-end;
-      }
+        @each $name, $value in (start: start, end: end, center: center, stretch: stretch) {
+          .fs-u-justify-items#{$infix}-#{$name} { justify-items: $value !important; }
+        }
+        .fs-u-flex#{$infix}-1 { flex: 1 1 0% !important; }
+        .fs-u-flex#{$infix}-auto { flex: 1 1 auto !important; }
+        .fs-u-flex#{$infix}-initial { flex: 0 1 auto !important; }
+        .fs-u-flex#{$infix}-none { flex: none !important; }
+        .fs-u-grow#{$infix}-0 { flex-grow: 0 !important; }
+        .fs-u-grow#{$infix}-1 { flex-grow: 1 !important; }
+        .fs-u-shrink#{$infix}-0 { flex-shrink: 0 !important; }
+        .fs-u-shrink#{$infix}-1 { flex-shrink: 1 !important; }
 
-      .fs-u-justify-content#{$infix}-around {
-        justify-content: space-around;
+        @for $order from 0 through 12 {
+          .fs-u-order#{$infix}-#{$order} { order: $order !important; }
+        }
       }
+    }
 
-      .fs-u-justify-content#{$infix}-between {
-        justify-content: space-between;
-      }
+    // Aliases curtos são mantidos no breakpoint base para compatibilidade;
+    // as variantes responsivas usam a forma canônica e evitam CSS duplicado.
 
-      .fs-u-align-self#{$infix}-start {
-        align-self: flex-start;
-      }
 
-      .fs-u-align-self#{$infix}-center {
-        align-self: center;
-      }
+    @each $name, $value in $alignments {
+      .fs-u-align-#{$name} { align-items: $value !important; }
+    }
 
-      .fs-u-align-self#{$infix}-end {
-        align-self: flex-end;
-      }
+    @each $name, $value in $justifications {
+      .fs-u-justify-#{$name} { justify-content: $value !important; }
+    }
+
+    @each $name, $value in (start: start, end: end, center: center, stretch: stretch) {
+      .fs-u-justify-items-#{$name} { justify-items: $value !important; }
     }
   }
 }

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

@@ -0,0 +1,21 @@
+@use "sass:map";
+@use "../../../fokus-core/scss/settings" as *;
+@use "api" as api;
+
+// Entrada CSS da API declarativa. Fica separada do módulo de mixins para que
+// consumidores possam importar e estender a API sem emitir CSS acidentalmente.
+@layer utilities {
+  @if fs-feature-enabled(utilities, true) {
+    @each $name, $definition in $fs-utilities {
+      $category: utilities;
+
+      @if map.has-key($definition, category) {
+        $category: map.get($definition, category);
+      }
+
+      @if fs-config-list-enabled($category, $name) {
+        @include api.fs-generate-utility($name, $definition);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+@use "../../../fokus-core/scss/settings" as *;
+@use "../../../fokus-core/scss/tools" as *;
+
+@layer utilities {
+  @if fs-config-list-enabled(grid, grid) {
+    .fs-u-grid { display: grid !important; }
+    .fs-u-inline-grid { display: inline-grid !important; }
+
+    @each $breakpoint, $min in $breakpoints {
+      $infix: breakpoint-infix($breakpoint);
+
+      @include media-breakpoint-up($breakpoint) {
+        @for $count from 1 through 12 {
+          .fs-u-grid-cols#{$infix}-#{$count} { grid-template-columns: repeat($count, minmax(0, 1fr)) !important; }
+          .fs-u-grid-rows#{$infix}-#{$count} { grid-template-rows: repeat($count, minmax(0, 1fr)) !important; }
+          .fs-u-col-span#{$infix}-#{$count} { grid-column: span $count / span $count !important; }
+          .fs-u-row-span#{$infix}-#{$count} { grid-row: span $count / span $count !important; }
+        }
+
+        .fs-u-grid-cols#{$infix}-none { grid-template-columns: none !important; }
+        .fs-u-grid-rows#{$infix}-none { grid-template-rows: none !important; }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+@use "sass:math";
+@use "../../../fokus-core/scss/settings" as *;
+
+@layer utilities {
+  @if fs-feature-enabled(helpers, true) and fs-config-list-enabled(helpers, helpers) {
+    @each $name, $value in (square: 1, video: math.div(16, 9), auto: auto) {
+      .fs-u-aspect-#{$name} { aspect-ratio: $value !important; }
+    }
+
+    @each $name, $value in (center: center, top: top, right: right, bottom: bottom, left: left) {
+      .fs-u-object-#{$name} { object-position: $value !important; }
+    }
+
+    .fs-u-vertical-align-baseline { vertical-align: baseline !important; }
+    .fs-u-vertical-align-middle { vertical-align: middle !important; }
+    .fs-u-vertical-align-top { vertical-align: top !important; }
+    .fs-u-vertical-align-bottom { vertical-align: bottom !important; }
+
+    .fs-u-color-scheme-normal { color-scheme: normal !important; }
+    .fs-u-color-scheme-light { color-scheme: light !important; }
+    .fs-u-color-scheme-dark { color-scheme: dark !important; }
+    .fs-u-color-scheme-only-light { color-scheme: only light !important; }
+    .fs-u-color-scheme-only-dark { color-scheme: only dark !important; }
+
+    .fs-u-safe-area-inline {
+      padding-inline-start: var(--fs-safe-area-left) !important;
+      padding-inline-end: var(--fs-safe-area-right) !important;
+    }
+
+    .fs-u-safe-area-block {
+      padding-block-start: var(--fs-safe-area-top) !important;
+      padding-block-end: var(--fs-safe-area-bottom) !important;
+    }
+  }
+}

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

@@ -1,12 +1,23 @@
 @use "container-queries";
+@use "colors";
+@use "borders";
 @use "display";
+@use "effects";
 @use "flex";
+@use "grid";
+@use "helpers";
+@use "generated";
 @use "icon";
+@use "interactivity";
+@use "layout";
+@use "motion";
 @use "position";
 @use "print";
 @use "shadow";
 @use "spacing";
+@use "sizing";
 @use "typography";
+@use "transforms";
 @use "visibility";
 @use "states";
 @use "api";

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

@@ -0,0 +1,51 @@
+@use "../../../fokus-core/scss/settings" as *;
+
+@layer utilities {
+  @if fs-config-list-enabled(interactivity, interactivity) {
+    @each $value in auto, default, pointer, grab, grabbing, move, text, wait, not-allowed, zoom-in, zoom-out {
+      .fs-u-cursor-#{$value} { cursor: $value !important; }
+    }
+
+    @each $value in auto, none, all {
+      .fs-u-pointer-events-#{$value} { pointer-events: $value !important; }
+    }
+
+    @each $value in auto, none, text, all {
+      .fs-u-select-#{$value} { user-select: $value !important; }
+    }
+
+    @each $value in none, auto, both, horizontal, vertical {
+      .fs-u-resize-#{$value} { resize: $value !important; }
+    }
+
+    .fs-u-appearance-none { appearance: none !important; }
+    .fs-u-appearance-auto { appearance: auto !important; }
+    .fs-u-scroll-auto { scroll-behavior: auto !important; }
+    .fs-u-scroll-smooth { scroll-behavior: smooth !important; }
+    .fs-u-scroll-m-0 { scroll-margin: 0 !important; }
+    .fs-u-scroll-p-0 { scroll-padding: 0 !important; }
+    .fs-u-accent-primary { accent-color: var(--fs-color-primary) !important; }
+    .fs-u-accent-auto { accent-color: auto !important; }
+    .fs-u-caret-primary { caret-color: var(--fs-color-primary) !important; }
+    .fs-u-caret-current { caret-color: currentcolor !important; }
+    .fs-u-content-visible { content-visibility: visible !important; }
+    .fs-u-content-auto { content-visibility: auto !important; }
+    .fs-u-content-hidden { content-visibility: hidden !important; }
+    .fs-u-will-change-auto { will-change: auto !important; }
+    .fs-u-will-change-transform { will-change: transform !important; }
+    .fs-u-will-change-scroll { will-change: scroll-position !important; }
+
+    @each $value in auto, none, pan-x, pan-y, manipulation {
+      .fs-u-touch-#{$value} { touch-action: $value !important; }
+    }
+
+    @each $value in auto, none, mandatory, proximity {
+      .fs-u-snap-x-#{$value} { scroll-snap-type: x $value !important; }
+      .fs-u-snap-y-#{$value} { scroll-snap-type: y $value !important; }
+    }
+
+    .fs-u-snap-start { scroll-snap-align: start !important; }
+    .fs-u-snap-center { scroll-snap-align: center !important; }
+    .fs-u-snap-end { scroll-snap-align: end !important; }
+  }
+}

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

@@ -0,0 +1,61 @@
+@use "../../../fokus-core/scss/settings" as *;
+@use "../../../fokus-core/scss/tools" as *;
+
+@layer utilities {
+  @if fs-config-list-enabled(layout, box-sizing) {
+    .fs-u-box-border { box-sizing: border-box !important; }
+    .fs-u-box-content { box-sizing: content-box !important; }
+  }
+
+  @if fs-config-list-enabled(layout, overflow) {
+    @each $value in auto, hidden, clip, visible, scroll {
+      .fs-u-overflow-#{$value} { overflow: $value !important; }
+      .fs-u-overflow-x-#{$value} { overflow-x: $value !important; }
+      .fs-u-overflow-y-#{$value} { overflow-y: $value !important; }
+    }
+
+    .fs-u-overflow-wrap-normal { overflow-wrap: normal !important; }
+    .fs-u-overflow-wrap-anywhere { overflow-wrap: anywhere !important; }
+    .fs-u-overflow-wrap-break-word { overflow-wrap: break-word !important; }
+    .fs-u-text-ellipsis { text-overflow: ellipsis !important; }
+    .fs-u-text-clip { text-overflow: clip !important; }
+  }
+
+  @if fs-config-list-enabled(layout, overscroll) {
+    @each $value in auto, contain, none {
+      .fs-u-overscroll-#{$value} { overscroll-behavior: $value !important; }
+      .fs-u-overscroll-x-#{$value} { overscroll-behavior-x: $value !important; }
+      .fs-u-overscroll-y-#{$value} { overscroll-behavior-y: $value !important; }
+    }
+  }
+
+  @if fs-config-list-enabled(columns, columns) {
+    @for $count from 1 through 6 {
+      .fs-u-columns-#{$count} { columns: $count !important; }
+    }
+
+    .fs-u-columns-auto { columns: auto !important; }
+    .fs-u-column-fill-auto { column-fill: auto !important; }
+    .fs-u-column-fill-balance { column-fill: balance !important; }
+    .fs-u-column-span-all { column-span: all !important; }
+    .fs-u-column-span-none { column-span: none !important; }
+
+    @each $value in auto, avoid, avoid-page, avoid-column, page, left, right, recto, verso {
+      .fs-u-break-before-#{$value} { break-before: $value !important; }
+      .fs-u-break-after-#{$value} { break-after: $value !important; }
+      .fs-u-break-inside-#{$value} { break-inside: $value !important; }
+    }
+
+    @each $breakpoint, $min in $breakpoints {
+      $infix: breakpoint-infix($breakpoint);
+
+      @if $min != 0 {
+        @include media-breakpoint-up($breakpoint) {
+          @for $count from 1 through 6 {
+            .fs-u-columns#{$infix}-#{$count} { columns: $count !important; }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+@use "../../../fokus-core/scss/settings" as *;
+
+@layer utilities {
+  @if fs-config-list-enabled(motion, motion) {
+    @each $name, $value in $fs-utility-transition-durations {
+      .fs-u-duration-#{$name} { transition-duration: $value !important; }
+    }
+    
+    @each $name, $value in $fs-utility-easings {
+      .fs-u-ease-#{$name} { transition-timing-function: $value !important; }
+    }
+    .fs-u-transition-none { transition-property: none !important; }
+    .fs-u-transition-all { transition-property: all !important; }
+    .fs-u-transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important; }
+    .fs-u-transition-opacity { transition-property: opacity !important; }
+    .fs-u-transition-transform { transition-property: transform !important; }
+    .fs-u-animate-none { animation: none !important; }
+    .fs-u-animate-spin { animation: fs-u-spin 1s linear infinite !important; }
+    .fs-u-animate-pulse { animation: fs-u-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; }
+    .fs-u-animate-bounce { animation: fs-u-bounce 1s infinite !important; }
+    .fs-u-animate-ping { animation: fs-u-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important; }
+
+    @keyframes fs-u-spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    @keyframes fs-u-pulse {
+      50% { opacity: 0.5; }
+    }
+
+    @keyframes fs-u-bounce {
+      0%, 100% {
+        transform: translateY(-25%);
+        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+      }
+
+      50% {
+        transform: none;
+        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      }
+    }
+
+    @keyframes fs-u-ping {
+      75%, 100% {
+        transform: scale(2);
+        opacity: 0;
+      }
+    }
+  }
+}

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

@@ -3,14 +3,14 @@
 // conteúdo normal e do dropdown, abaixo de qualquer overlay modal.
 @layer utilities {
   .fs-u-sticky-top {
-    position: sticky;
-    top: var(--fs-sticky-top, 0);
-    z-index: 1020;
+    position: sticky !important;
+    top: var(--fs-sticky-top, 0) !important;
+    z-index: 1020 !important;
   }
 
   .fs-u-sticky-bottom {
-    position: sticky;
-    bottom: var(--fs-sticky-bottom, 0);
-    z-index: 1020;
+    position: sticky !important;
+    bottom: var(--fs-sticky-bottom, 0) !important;
+    z-index: 1020 !important;
   }
 }

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

@@ -1,27 +1,31 @@
-@layer utilities {
-  @media print {
-    .fs-u-print-hide {
-      display: none !important;
-    }
-  }
+@use "../../../fokus-core/scss/settings" as *;
 
-  @media not print {
-    .fs-u-print-only {
-      display: none !important;
+@if fs-feature-enabled(print, true) {
+  @layer utilities {
+    @media print {
+      .fs-u-print-hide {
+        display: none !important;
+      }
     }
-  }
 
-  @media print {
-    .fs-u-print-block {
-      display: block !important;
+    @media not print {
+      .fs-u-print-only {
+        display: none !important;
+      }
     }
 
-    .fs-u-print-inline {
-      display: inline !important;
-    }
+    @media print {
+      .fs-u-print-block {
+        display: block !important;
+      }
+
+      .fs-u-print-inline {
+        display: inline !important;
+      }
 
-    .fs-u-print-inline-block {
-      display: inline-block !important;
+      .fs-u-print-inline-block {
+        display: inline-block !important;
+      }
     }
   }
 }

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

@@ -1,13 +1,17 @@
+@use "../../../fokus-core/scss/settings" as *;
+
 @layer utilities {
+  @if fs-config-list-enabled(effects, shadow) and fs-feature-enabled(shadows, true) {
   .fs-u-shadow-sm {
-    box-shadow: var(--fs-shadow-sm);
+    box-shadow: var(--fs-shadow-sm) !important;
   }
 
   .fs-u-shadow {
-    box-shadow: var(--fs-shadow-md);
+    box-shadow: var(--fs-shadow-md) !important;
   }
 
   .fs-u-shadow-lg {
-    box-shadow: var(--fs-shadow-lg);
+    box-shadow: var(--fs-shadow-lg) !important;
+  }
   }
 }