fokus-styles 2.0.0 → 2.4.0

package/dist/css/helpers.css

@@ -47,12 +47,28 @@
     --fs-control-padding-x-lg: 16px;
     --fs-focus-width: 2px;
     --fs-focus-offset: 2px;
+    --fs-focus-color: var(--fs-color-primary);
+    --fs-focus-ring-size: 3px;
+    --fs-focus-ring-color: color-mix(in srgb, var(--fs-focus-color) 22%, transparent);
     --fs-focus-ring-alpha: 22%;
     --fs-transition-fast: 150ms;
     --fs-transition-normal: 220ms;
+    --fs-motion-duration-fast: var(--fs-transition-fast);
+    --fs-motion-duration-normal: var(--fs-transition-normal);
+    --fs-motion-ease-standard: var(--fs-ease-standard);
     --fs-ease-standard: cubic-bezier(0.2, 0, 0, 1);
     --fs-border-width: 1px;
     --fs-disabled-opacity: 0.5;
+    --fs-safe-area-top: env(safe-area-inset-top, 0px);
+    --fs-safe-area-right: env(safe-area-inset-right, 0px);
+    --fs-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+    --fs-safe-area-left: env(safe-area-inset-left, 0px);
+    --fs-component-control-height: var(--fs-control-height);
+    --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;
@@ -131,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 {
@@ -242,6 +266,59 @@
     }
   }
 }
+/* stylelint-disable property-no-deprecated, selector-not-notation */
+@layer reset {
+  :focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-focus-color);
+    outline-offset: var(--fs-focus-offset);
+  }
+  @media (forced-colors: active) {
+    :focus-visible {
+      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 {
+  .fs-u-visually-hidden:not(:focus):not(:focus-within),
+  .fs-u-visually-hidden-focusable:not(:focus):not(:focus-within) {
+    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-skip-link {
+    position: fixed;
+    z-index: 1000;
+    inset-block-start: var(--fs-space-2);
+    inset-inline-start: var(--fs-space-2);
+    transform: translateY(-200%);
+    padding: var(--fs-space-2) var(--fs-space-3);
+    color: var(--fs-color-on-primary);
+    background: var(--fs-color-primary);
+    border-radius: var(--fs-radius-sm);
+  }
+  .fs-skip-link:focus {
+    transform: translateY(0);
+  }
+}
 @layer utilities {
   .fs-u-cq {
     container-type: inline-size;
@@ -3611,6 +3688,291 @@
   .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;
+  }
+}
+@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;
+    }
+  }
+}
+@layer utilities {
+  .fs-u-color-primary {
+    color: var(--fs-color-primary, oklch(53.5630074284% 0.2132145174 261.6264320248deg)) !important;
+  }
+  .fs-u-bg-primary {
+    background-color: var(--fs-color-primary, oklch(53.5630074284% 0.2132145174 261.6264320248deg)) !important;
+  }
+  .fs-u-color-secondary {
+    color: var(--fs-color-secondary, oklch(55.4391007662% 0.040717043 257.4166191214deg)) !important;
+  }
+  .fs-u-bg-secondary {
+    background-color: var(--fs-color-secondary, oklch(55.4391007662% 0.040717043 257.4166191214deg)) !important;
+  }
+  .fs-u-color-success {
+    color: var(--fs-color-success, oklch(75.151587899% 0.2146126169 148.125846236deg)) !important;
+  }
+  .fs-u-bg-success {
+    background-color: var(--fs-color-success, oklch(75.151587899% 0.2146126169 148.125846236deg)) !important;
+  }
+  .fs-u-color-warning {
+    color: var(--fs-color-warning, oklch(81.9510815663% 0.1562613975 78.6575213966deg)) !important;
+  }
+  .fs-u-bg-warning {
+    background-color: var(--fs-color-warning, oklch(81.9510815663% 0.1562613975 78.6575213966deg)) !important;
+  }
+  .fs-u-color-danger {
+    color: var(--fs-color-danger, oklch(55.9653139301% 0.1897270855 25.2407937498deg)) !important;
+  }
+  .fs-u-bg-danger {
+    background-color: var(--fs-color-danger, oklch(55.9653139301% 0.1897270855 25.2407937498deg)) !important;
+  }
+  .fs-u-color-info {
+    color: var(--fs-color-info, oklch(53.3359780029% 0.1620131129 280.2231949375deg)) !important;
+  }
+  .fs-u-bg-info {
+    background-color: var(--fs-color-info, oklch(53.3359780029% 0.1620131129 280.2231949375deg)) !important;
+  }
+  .fs-u-m-0 {
+    margin: 0 !important;
+  }
+  .fs-u-mx-0 {
+    margin-inline: 0 !important;
+  }
+  .fs-u-my-0 {
+    margin-block: 0 !important;
+  }
+  .fs-u-p-0 {
+    padding: 0 !important;
+  }
+  .fs-u-px-0 {
+    padding-inline: 0 !important;
+  }
+  .fs-u-py-0 {
+    padding-block: 0 !important;
+  }
+  .fs-u-m-1 {
+    margin: 0.25rem !important;
+  }
+  .fs-u-mx-1 {
+    margin-inline: 0.25rem !important;
+  }
+  .fs-u-my-1 {
+    margin-block: 0.25rem !important;
+  }
+  .fs-u-p-1 {
+    padding: 0.25rem !important;
+  }
+  .fs-u-px-1 {
+    padding-inline: 0.25rem !important;
+  }
+  .fs-u-py-1 {
+    padding-block: 0.25rem !important;
+  }
+  .fs-u-m-2 {
+    margin: 0.5rem !important;
+  }
+  .fs-u-mx-2 {
+    margin-inline: 0.5rem !important;
+  }
+  .fs-u-my-2 {
+    margin-block: 0.5rem !important;
+  }
+  .fs-u-p-2 {
+    padding: 0.5rem !important;
+  }
+  .fs-u-px-2 {
+    padding-inline: 0.5rem !important;
+  }
+  .fs-u-py-2 {
+    padding-block: 0.5rem !important;
+  }
+  .fs-u-m-3 {
+    margin: 1rem !important;
+  }
+  .fs-u-mx-3 {
+    margin-inline: 1rem !important;
+  }
+  .fs-u-my-3 {
+    margin-block: 1rem !important;
+  }
+  .fs-u-p-3 {
+    padding: 1rem !important;
+  }
+  .fs-u-px-3 {
+    padding-inline: 1rem !important;
+  }
+  .fs-u-py-3 {
+    padding-block: 1rem !important;
+  }
+  .fs-u-m-4 {
+    margin: 1.5rem !important;
+  }
+  .fs-u-mx-4 {
+    margin-inline: 1.5rem !important;
+  }
+  .fs-u-my-4 {
+    margin-block: 1.5rem !important;
+  }
+  .fs-u-p-4 {
+    padding: 1.5rem !important;
+  }
+  .fs-u-px-4 {
+    padding-inline: 1.5rem !important;
+  }
+  .fs-u-py-4 {
+    padding-block: 1.5rem !important;
+  }
+  .fs-u-m-5 {
+    margin: 3rem !important;
+  }
+  .fs-u-mx-5 {
+    margin-inline: 3rem !important;
+  }
+  .fs-u-my-5 {
+    margin-block: 3rem !important;
+  }
+  .fs-u-p-5 {
+    padding: 3rem !important;
+  }
+  .fs-u-px-5 {
+    padding-inline: 3rem !important;
+  }
+  .fs-u-py-5 {
+    padding-block: 3rem !important;
+  }
+  .fs-u-w-25 {
+    width: 25% !important;
+  }
+  .fs-u-h-25 {
+    height: 25% !important;
+  }
+  .fs-u-w-50 {
+    width: 50% !important;
+  }
+  .fs-u-h-50 {
+    height: 50% !important;
+  }
+  .fs-u-w-75 {
+    width: 75% !important;
+  }
+  .fs-u-h-75 {
+    height: 75% !important;
+  }
+  .fs-u-w-100 {
+    width: 100% !important;
+  }
+  .fs-u-h-100 {
+    height: 100% !important;
+  }
+  .fs-u-w-auto {
+    width: auto !important;
+  }
+  .fs-u-h-auto {
+    height: auto !important;
+  }
+  @media (min-width: 640px) {
+    .fs-u-d-sm-flex {
+      display: flex !important;
+    }
+    .fs-u-d-sm-none {
+      display: none !important;
+    }
+    .fs-u-text-sm-start {
+      text-align: start !important;
+    }
+  }
+  @media (min-width: 768px) {
+    .fs-u-d-md-flex {
+      display: flex !important;
+    }
+    .fs-u-d-md-none {
+      display: none !important;
+    }
+    .fs-u-text-md-start {
+      text-align: start !important;
+    }
+  }
+  @media (min-width: 1024px) {
+    .fs-u-d-lg-flex {
+      display: flex !important;
+    }
+    .fs-u-d-lg-none {
+      display: none !important;
+    }
+    .fs-u-text-lg-start {
+      text-align: start !important;
+    }
+  }
+  @media (min-width: 1280px) {
+    .fs-u-d-xl-flex {
+      display: flex !important;
+    }
+    .fs-u-d-xl-none {
+      display: none !important;
+    }
+    .fs-u-text-xl-start {
+      text-align: start !important;
+    }
+  }
+  @media (min-width: 1536px) {
+    .fs-u-d-xxl-flex {
+      display: flex !important;
+    }
+    .fs-u-d-xxl-none {
+      display: none !important;
+    }
+    .fs-u-text-xxl-start {
+      text-align: start !important;
+    }
+  }
+  @media (min-width: 1920px) {
+    .fs-u-d-xxxl-flex {
+      display: flex !important;
+    }
+    .fs-u-d-xxxl-none {
+      display: none !important;
+    }
+    .fs-u-text-xxxl-start {
+      text-align: start !important;
+    }
+  }
 }
 @layer tokens {
   [data-fs-brand=violet] {
@@ -3707,7 +4069,8 @@
   }
 }
 @layer tokens {
-  [data-theme=dark] {
+  [data-theme=dark],
+  [data-fs-theme=dark] {
     --fs-color-text: #f1f3f4;
     --fs-color-muted: #bdc1c6;
     --fs-color-border: #3c4043;
@@ -3754,7 +4117,8 @@
     --fs-feedback-info-bg: rgb(35.0058091619, 49.6887857769, 78.5757788254);
   }
   @supports (color: oklch(0% 0 0deg)) {
-    [data-theme=dark] {
+    [data-theme=dark],
+    [data-fs-theme=dark] {
       --fs-color-text: oklch(96.2913383165% 0.002529697 228.7848682695deg);
       --fs-color-muted: oklch(80.9268110646% 0.0083071608 253.8653061211deg);
       --fs-color-border: oklch(36.8827622528% 0.0074489239 240.018838067deg);
@@ -3798,5 +4162,37 @@
       --fs-feedback-info-bg: oklch(31.7574919059% 0.0556228738 263.0598185246deg);
     }
   }
+  @media (prefers-color-scheme: dark) {
+    [data-fs-theme=auto] {
+      --fs-color-text: #f1f3f4;
+      --fs-color-muted: #bdc1c6;
+      --fs-color-border: #3c4043;
+      --fs-color-surface: #202124;
+      --fs-color-subtle: #2b2c2f;
+      --fs-color-bg-surface: var(--fs-color-surface);
+      --fs-color-bg-subtle: var(--fs-color-subtle);
+      --fs-color-surface-raised: var(--fs-color-surface);
+      --fs-color-surface-interactive: var(--fs-color-subtle);
+      --fs-color-text-primary: var(--fs-color-text);
+      --fs-color-text-muted: var(--fs-color-muted);
+      --fs-color-border-default: var(--fs-color-border);
+      --fs-color-focus: var(--fs-color-primary);
+      --fs-tooltip-bg: #f8fafc;
+      --fs-tooltip-text: #1e293b;
+    }
+  }
+  @media (forced-colors: active) {
+    :root,
+    [data-theme=dark],
+    [data-fs-theme=light],
+    [data-fs-theme=dark],
+    [data-fs-theme=auto] {
+      --fs-color-border: CanvasText;
+      --fs-color-text: CanvasText;
+      --fs-color-surface: Canvas;
+      --fs-color-subtle: Canvas;
+      --fs-focus-color: Highlight;
+    }
+  }
 }
 /*# sourceMappingURL=helpers.css.map */