fokus-styles 2.3.0 → 2.4.0

package/docs/reference/size-baseline.json

@@ -1,30 +1,30 @@
 {
-  "measuredAt": "2026-09-07T22:40:15.289Z",
+  "measuredAt": "2026-09-07T22:48:41.361Z",
   "unit": "bytes",
   "files": {
     "css/layout.min.css": {
-      "bytes": 28539,
-      "gzipBytes": 5951
+      "bytes": 28993,
+      "gzipBytes": 6049
     },
     "css/forms.min.css": {
-      "bytes": 33746,
-      "gzipBytes": 6986
+      "bytes": 34200,
+      "gzipBytes": 7084
     },
     "css/components.min.css": {
-      "bytes": 92904,
-      "gzipBytes": 16191
+      "bytes": 93358,
+      "gzipBytes": 16287
     },
     "css/helpers.min.css": {
-      "bytes": 61032,
-      "gzipBytes": 10609
+      "bytes": 61486,
+      "gzipBytes": 10713
     },
     "css/fonts.min.css": {
       "bytes": 1505,
       "gzipBytes": 409
     },
     "css/fokus.min.css": {
-      "bytes": 164376,
-      "gzipBytes": 25875
+      "bytes": 164830,
+      "gzipBytes": 25978
     },
     "js/fokus.min.js": {
       "bytes": 107627,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fokus-styles",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Fokus Styles is a complete CSS framework with components, utilities, vanilla JavaScript, icons, React wrappers, and a CLI.",
   "keywords": [
     "css",
@@ -52,6 +52,7 @@
     "./components": "./dist/css/fokus-components.css",
     "./utilities": "./dist/css/fokus-utilities.css",
     "./themes": "./dist/css/fokus-dark.css",
+    "./rtl.css": "./dist/css/fokus-rtl.css",
     "./config": "./packages/fokus-core/scss/settings/_config.scss",
     "./js/theme": {
       "types": "./packages/fokus-js/js/theme.d.ts",

package/packages/fokus-core/scss/base/_accessibility.scss

@@ -10,6 +10,20 @@
       outline: 2px solid CanvasText;
       outline-offset: 2px;
     }
+
+    button,
+    [role="button"],
+    input,
+    select,
+    textarea,
+    .fs-btn {
+      border-color: ButtonText;
+      forced-color-adjust: auto;
+    }
+
+    .fs-u-focus-ring:focus-visible {
+      outline: 3px solid Highlight;
+    }
   }
 }
 

package/packages/fokus-core/scss/tokens/_root.scss

@@ -75,6 +75,8 @@
     --fs-component-overlay-backdrop: rgb(0 0 0 / 55%);
     --fs-component-panel-radius: var(--fs-radius-md);
     --fs-component-panel-shadow: var(--fs-shadow-lg);
+    --fs-contrast-border-width: var(--fs-border-width);
+    --fs-contrast-focus-width: var(--fs-focus-width);
 
     // Referência dos limiares usados pelos utilitários `@container` (ver
     // `packages/fokus-utilities/scss/utilities/_container-queries.scss`).
@@ -128,4 +130,13 @@
       }
     }
   }
+
+  @media (prefers-contrast: more) {
+    :root {
+      --fs-contrast-border-width: 2px;
+      --fs-contrast-focus-width: 3px;
+      --fs-focus-width: var(--fs-contrast-focus-width);
+      --fs-border-width: var(--fs-contrast-border-width);
+    }
+  }
 }

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;
+}