fokus-styles 2.0.0 → 2.4.0

package/dist/css/forms.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 components {
   .fs-form-row {
     display: flex;
@@ -335,6 +412,30 @@
     background-color: var(--fs-color-subtle);
     cursor: default;
   }
+  .fs-floating-label {
+    position: relative;
+  }
+  .fs-floating-label > .fs-form-control {
+    height: 56px;
+    padding-top: 20px;
+  }
+  .fs-floating-label > .fs-form-label {
+    position: absolute;
+    z-index: 1;
+    top: 8px;
+    left: 8px;
+    color: var(--fs-color-muted);
+    font-size: 0.6875rem;
+    pointer-events: none;
+  }
+  .fs-form-control[aria-invalid=true],
+  .fs-was-validated .fs-form-control:invalid {
+    border-color: var(--fs-color-danger);
+  }
+  .fs-form-control[aria-invalid=false],
+  .fs-was-validated .fs-form-control:valid {
+    border-color: var(--fs-color-success);
+  }
   .fs-form-control-sm {
     height: var(--fs-control-height-sm);
     font-size: 0.6875rem;
@@ -1072,7 +1173,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;
@@ -1119,7 +1221,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);
@@ -1163,5 +1266,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=forms.css.map */