fokus-styles 2.3.0 → 2.5.0

package/dist/css/helpers.css

@@ -67,6 +67,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);
     --fs-cq-sm: 320px;
     --fs-cq-md: 480px;
     --fs-cq-lg: 640px;
@@ -145,6 +147,14 @@
       --fs-feedback-info-bg: oklch(96.4918490239% 0.0173174767 286.0707018324deg);
     }
   }
+  @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);
+    }
+  }
 }
 @layer tokens {
   :root {
@@ -267,6 +277,18 @@
       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;
+    }
   }
 }
 @layer utilities {
@@ -3710,6 +3732,7 @@
     }
   }
 }
+/* stylelint-disable declaration-block-single-line-max-declarations */
 @layer utilities {
   .fs-u-color-primary {
     color: var(--fs-color-primary, oklch(53.5630074284% 0.2132145174 261.6264320248deg)) !important;
@@ -3951,6 +3974,141 @@
       text-align: start !important;
     }
   }
+  .fs-u-d-block {
+    display: block !important;
+  }
+  .fs-u-d-inline {
+    display: inline !important;
+  }
+  .fs-u-d-inline-block {
+    display: inline-block !important;
+  }
+  .fs-u-d-flex {
+    display: flex !important;
+  }
+  .fs-u-d-grid {
+    display: grid !important;
+  }
+  .fs-u-d-none {
+    display: none !important;
+  }
+  .fs-u-flex-row {
+    flex-direction: row !important;
+  }
+  .fs-u-flex-column {
+    flex-direction: column !important;
+  }
+  .fs-u-flex-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+  .fs-u-flex-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+  .fs-u-flex-wrap {
+    flex-wrap: wrap !important;
+  }
+  .fs-u-flex-nowrap {
+    flex-wrap: nowrap !important;
+  }
+  .fs-u-justify-start {
+    justify-content: flex-start !important;
+  }
+  .fs-u-justify-center {
+    justify-content: center !important;
+  }
+  .fs-u-justify-end {
+    justify-content: flex-end !important;
+  }
+  .fs-u-justify-between {
+    justify-content: space-between !important;
+  }
+  .fs-u-align-start {
+    align-items: flex-start !important;
+  }
+  .fs-u-align-center {
+    align-items: center !important;
+  }
+  .fs-u-align-end {
+    align-items: flex-end !important;
+  }
+  .fs-u-gap-0 {
+    gap: 0 !important;
+  }
+  .fs-u-row-gap-0 {
+    row-gap: 0 !important;
+  }
+  .fs-u-column-gap-0 {
+    column-gap: 0 !important;
+  }
+  .fs-u-gap-1 {
+    gap: 0.25rem !important;
+  }
+  .fs-u-row-gap-1 {
+    row-gap: 0.25rem !important;
+  }
+  .fs-u-column-gap-1 {
+    column-gap: 0.25rem !important;
+  }
+  .fs-u-gap-2 {
+    gap: 0.5rem !important;
+  }
+  .fs-u-row-gap-2 {
+    row-gap: 0.5rem !important;
+  }
+  .fs-u-column-gap-2 {
+    column-gap: 0.5rem !important;
+  }
+  .fs-u-gap-3 {
+    gap: 1rem !important;
+  }
+  .fs-u-row-gap-3 {
+    row-gap: 1rem !important;
+  }
+  .fs-u-column-gap-3 {
+    column-gap: 1rem !important;
+  }
+  .fs-u-gap-4 {
+    gap: 1.5rem !important;
+  }
+  .fs-u-row-gap-4 {
+    row-gap: 1.5rem !important;
+  }
+  .fs-u-column-gap-4 {
+    column-gap: 1.5rem !important;
+  }
+  .fs-u-gap-5 {
+    gap: 3rem !important;
+  }
+  .fs-u-row-gap-5 {
+    row-gap: 3rem !important;
+  }
+  .fs-u-column-gap-5 {
+    column-gap: 3rem !important;
+  }
+  .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-wrap {
+    white-space: normal !important;
+  }
+  .fs-u-text-nowrap {
+    white-space: nowrap !important;
+  }
+  .fs-u-fw-normal {
+    font-weight: 400 !important;
+  }
+  .fs-u-fw-semibold {
+    font-weight: 600 !important;
+  }
+  .fs-u-fw-bold {
+    font-weight: 700 !important;
+  }
 }
 @layer tokens {
   [data-fs-brand=violet] {