fokus-styles 2.3.0 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/css/components.css +22 -0
  3. package/dist/css/components.css.map +1 -1
  4. package/dist/css/components.min.css +1 -1
  5. package/dist/css/components.min.css.map +1 -1
  6. package/dist/css/fokus-components.css +22 -0
  7. package/dist/css/fokus-components.css.map +1 -1
  8. package/dist/css/fokus-components.min.css +1 -1
  9. package/dist/css/fokus-components.min.css.map +1 -1
  10. package/dist/css/fokus-core.css +22 -0
  11. package/dist/css/fokus-core.css.map +1 -1
  12. package/dist/css/fokus-core.min.css +1 -1
  13. package/dist/css/fokus-core.min.css.map +1 -1
  14. package/dist/css/fokus-dark.css +10 -0
  15. package/dist/css/fokus-dark.css.map +1 -1
  16. package/dist/css/fokus-dark.min.css +1 -1
  17. package/dist/css/fokus-dark.min.css.map +1 -1
  18. package/dist/css/fokus-rtl.css +8552 -0
  19. package/dist/css/fokus-rtl.css.map +1 -0
  20. package/dist/css/fokus-rtl.min.css +2 -0
  21. package/dist/css/fokus-rtl.min.css.map +1 -0
  22. package/dist/css/fokus-utilities.css +22 -0
  23. package/dist/css/fokus-utilities.css.map +1 -1
  24. package/dist/css/fokus-utilities.min.css +1 -1
  25. package/dist/css/fokus-utilities.min.css.map +1 -1
  26. package/dist/css/fokus.css +22 -0
  27. package/dist/css/fokus.css.map +1 -1
  28. package/dist/css/fokus.min.css +1 -1
  29. package/dist/css/fokus.min.css.map +1 -1
  30. package/dist/css/forms.css +22 -0
  31. package/dist/css/forms.css.map +1 -1
  32. package/dist/css/forms.min.css +1 -1
  33. package/dist/css/forms.min.css.map +1 -1
  34. package/dist/css/helpers.css +22 -0
  35. package/dist/css/helpers.css.map +1 -1
  36. package/dist/css/helpers.min.css +1 -1
  37. package/dist/css/helpers.min.css.map +1 -1
  38. package/dist/css/layout.css +22 -0
  39. package/dist/css/layout.css.map +1 -1
  40. package/dist/css/layout.min.css +1 -1
  41. package/dist/css/layout.min.css.map +1 -1
  42. package/docs/guides/rtl-and-system-preferences.md +28 -0
  43. package/docs/reference/size-baseline.json +11 -11
  44. package/package.json +2 -1
  45. package/packages/fokus-core/scss/base/_accessibility.scss +14 -0
  46. package/packages/fokus-core/scss/tokens/_root.scss +11 -0
  47. package/scss/entries/rtl-entry.scss +11 -0
package/dist/css/fokus-components.css CHANGED
@@ -68,6 +68,8 @@
68
68
  --fs-component-overlay-backdrop: rgb(0 0 0 / 55%);
69
69
  --fs-component-panel-radius: var(--fs-radius-md);
70
70
  --fs-component-panel-shadow: var(--fs-shadow-lg);
71
+ --fs-contrast-border-width: var(--fs-border-width);
72
+ --fs-contrast-focus-width: var(--fs-focus-width);
71
73
  --fs-cq-sm: 320px;
72
74
  --fs-cq-md: 480px;
73
75
  --fs-cq-lg: 640px;
@@ -146,6 +148,14 @@
146
148
  --fs-feedback-info-bg: oklch(96.4918490239% 0.0173174767 286.0707018324deg);
147
149
  }
148
150
  }
151
+ @media (prefers-contrast: more) {
152
+ :root {
153
+ --fs-contrast-border-width: 2px;
154
+ --fs-contrast-focus-width: 3px;
155
+ --fs-focus-width: var(--fs-contrast-focus-width);
156
+ --fs-border-width: var(--fs-contrast-border-width);
157
+ }
158
+ }
149
159
  }
150
160
  @layer tokens {
151
161
  :root {
@@ -268,6 +278,18 @@
268
278
  outline: 2px solid CanvasText;
269
279
  outline-offset: 2px;
270
280
  }
281
+ button,
282
+ [role=button],
283
+ input,
284
+ select,
285
+ textarea,
286
+ .fs-btn {
287
+ border-color: ButtonText;
288
+ forced-color-adjust: auto;
289
+ }
290
+ .fs-u-focus-ring:focus-visible {
291
+ outline: 3px solid Highlight;
292
+ }
271
293
  }
272
294
  }
273
295
  @layer utilities {