fokus-styles 2.0.0 → 2.4.0

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

@@ -0,0 +1,48 @@
+@use "sass:map";
+@use "../../fokus-core/scss/settings" as *;
+@use "../../fokus-core/scss/tools" as tools;
+
+// Utility API do Fokus Styles: os mapas são públicos e podem ser estendidos
+// antes do @use do entry-point pelo consumidor.
+$fs-utility-colors: $theme-colors !default;
+$fs-utility-spacers: $spacers !default;
+$fs-utility-sizes: (25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto) !default;
+
+@layer utilities {
+  @if fs-config-list-enabled(colors, color) {
+    @each $name, $value in $fs-utility-colors {
+      .fs-u-color-#{$name} { color: var(--fs-color-#{$name}, #{$value}) !important; }
+      .fs-u-bg-#{$name} { background-color: var(--fs-color-#{$name}, #{$value}) !important; }
+    }
+  }
+
+  @if fs-config-list-enabled(spacing, margin) and fs-config-list-enabled(spacing, padding) {
+    @each $name, $value in $fs-utility-spacers {
+      .fs-u-m-#{$name} { margin: $value !important; }
+      .fs-u-mx-#{$name} { margin-inline: $value !important; }
+      .fs-u-my-#{$name} { margin-block: $value !important; }
+      .fs-u-p-#{$name} { padding: $value !important; }
+      .fs-u-px-#{$name} { padding-inline: $value !important; }
+      .fs-u-py-#{$name} { padding-block: $value !important; }
+    }
+  }
+
+  @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; }
+    }
+  }
+
+  @if fs-config-get(responsive, true) {
+    @each $breakpoint, $min in $breakpoints {
+      @if $min != 0 {
+        @media (min-width: $min) {
+          .fs-u-d-#{$breakpoint}-flex { display: flex !important; }
+          .fs-u-d-#{$breakpoint}-none { display: none !important; }
+          .fs-u-text-#{$breakpoint}-start { text-align: start !important; }
+        }
+      }
+    }
+  }
+}

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

@@ -8,3 +8,5 @@
 @use "spacing";
 @use "typography";
 @use "visibility";
+@use "states";
+@use "api";

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

@@ -0,0 +1,19 @@
+@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);
+  }
+
+  .fs-u-disabled,
+  .fs-u-disabled[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: var(--fs-disabled-opacity);
+    pointer-events: none;
+  }
+
+  @media print {
+    .fs-u-print-hidden { display: none !important; }
+    .fs-u-print-visible { display: block !important; }
+  }
+}

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

@@ -6,4 +6,28 @@
   .fs-u-invisible {
     visibility: hidden;
   }
+
+  .fs-u-visually-hidden,
+  .fs-u-visually-hidden-focusable {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip-path: inset(50%) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+
+  .fs-u-visually-hidden-focusable:focus,
+  .fs-u-visually-hidden-focusable:focus-within {
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+    margin: 0 !important;
+    overflow: visible !important;
+    clip-path: none !important;
+    white-space: normal !important;
+  }
 }

package/scss/entries/core-entry.scss

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

package/scss/entries/dark-entry.scss

@@ -0,0 +1,3 @@
+@charset "UTF-8";
+@use "../../packages/fokus-core/scss/tokens";
+@use "../../packages/fokus-core/scss/themes/dark";

package/scss/entries/rtl-entry.scss

@@ -0,0 +1,11 @@
+@charset "UTF-8";
+@use "../../packages/fokus-core/scss/tokens";
+@use "../../packages/fokus-core/scss/base";
+@use "../../packages/fokus-core/scss/layout";
+@use "../../packages/fokus-components/scss/components";
+@use "../../packages/fokus-utilities/scss/utilities";
+
+[dir="rtl"] {
+  direction: rtl;
+  text-align: start;
+}