fokus-styles 2.0.0 → 2.4.0

package/dist/css/layout.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 layout {
   .fs-cluster {
     display: flex;
@@ -337,6 +414,73 @@
   .fs-col-fluid {
     width: 100%;
   }
+  .fs-row-cols-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .fs-row-cols-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .fs-row-cols-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .fs-row-cols-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .fs-row-cols-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .fs-row-cols-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .fs-row-cols-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .fs-order-0 {
+    order: 0;
+  }
+  .fs-order-1 {
+    order: 1;
+  }
+  .fs-order-2 {
+    order: 2;
+  }
+  .fs-order-3 {
+    order: 3;
+  }
+  .fs-order-4 {
+    order: 4;
+  }
+  .fs-order-5 {
+    order: 5;
+  }
+  .fs-order-6 {
+    order: 6;
+  }
+  .fs-order-7 {
+    order: 7;
+  }
+  .fs-order-8 {
+    order: 8;
+  }
+  .fs-order-9 {
+    order: 9;
+  }
+  .fs-order-10 {
+    order: 10;
+  }
+  .fs-order-11 {
+    order: 11;
+  }
+  .fs-order-12 {
+    order: 12;
+  }
   .fs-col {
     flex: 1 0 0%;
   }
@@ -393,6 +537,73 @@
     width: 100%;
   }
   @media (min-width: 640px) {
+    .fs-row-cols-sm-auto > * {
+      flex: 0 0 auto;
+      width: auto;
+    }
+    .fs-row-cols-sm-1 > * {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+    .fs-row-cols-sm-2 > * {
+      flex: 0 0 auto;
+      width: 50%;
+    }
+    .fs-row-cols-sm-3 > * {
+      flex: 0 0 auto;
+      width: 33.3333333333%;
+    }
+    .fs-row-cols-sm-4 > * {
+      flex: 0 0 auto;
+      width: 25%;
+    }
+    .fs-row-cols-sm-5 > * {
+      flex: 0 0 auto;
+      width: 20%;
+    }
+    .fs-row-cols-sm-6 > * {
+      flex: 0 0 auto;
+      width: 16.6666666667%;
+    }
+    .fs-order-sm-0 {
+      order: 0;
+    }
+    .fs-order-sm-1 {
+      order: 1;
+    }
+    .fs-order-sm-2 {
+      order: 2;
+    }
+    .fs-order-sm-3 {
+      order: 3;
+    }
+    .fs-order-sm-4 {
+      order: 4;
+    }
+    .fs-order-sm-5 {
+      order: 5;
+    }
+    .fs-order-sm-6 {
+      order: 6;
+    }
+    .fs-order-sm-7 {
+      order: 7;
+    }
+    .fs-order-sm-8 {
+      order: 8;
+    }
+    .fs-order-sm-9 {
+      order: 9;
+    }
+    .fs-order-sm-10 {
+      order: 10;
+    }
+    .fs-order-sm-11 {
+      order: 11;
+    }
+    .fs-order-sm-12 {
+      order: 12;
+    }
     .fs-col-sm {
       flex: 1 0 0%;
     }
@@ -450,6 +661,73 @@
     }
   }
   @media (min-width: 768px) {
+    .fs-row-cols-md-auto > * {
+      flex: 0 0 auto;
+      width: auto;
+    }
+    .fs-row-cols-md-1 > * {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+    .fs-row-cols-md-2 > * {
+      flex: 0 0 auto;
+      width: 50%;
+    }
+    .fs-row-cols-md-3 > * {
+      flex: 0 0 auto;
+      width: 33.3333333333%;
+    }
+    .fs-row-cols-md-4 > * {
+      flex: 0 0 auto;
+      width: 25%;
+    }
+    .fs-row-cols-md-5 > * {
+      flex: 0 0 auto;
+      width: 20%;
+    }
+    .fs-row-cols-md-6 > * {
+      flex: 0 0 auto;
+      width: 16.6666666667%;
+    }
+    .fs-order-md-0 {
+      order: 0;
+    }
+    .fs-order-md-1 {
+      order: 1;
+    }
+    .fs-order-md-2 {
+      order: 2;
+    }
+    .fs-order-md-3 {
+      order: 3;
+    }
+    .fs-order-md-4 {
+      order: 4;
+    }
+    .fs-order-md-5 {
+      order: 5;
+    }
+    .fs-order-md-6 {
+      order: 6;
+    }
+    .fs-order-md-7 {
+      order: 7;
+    }
+    .fs-order-md-8 {
+      order: 8;
+    }
+    .fs-order-md-9 {
+      order: 9;
+    }
+    .fs-order-md-10 {
+      order: 10;
+    }
+    .fs-order-md-11 {
+      order: 11;
+    }
+    .fs-order-md-12 {
+      order: 12;
+    }
     .fs-col-md {
       flex: 1 0 0%;
     }
@@ -507,6 +785,73 @@
     }
   }
   @media (min-width: 1024px) {
+    .fs-row-cols-lg-auto > * {
+      flex: 0 0 auto;
+      width: auto;
+    }
+    .fs-row-cols-lg-1 > * {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+    .fs-row-cols-lg-2 > * {
+      flex: 0 0 auto;
+      width: 50%;
+    }
+    .fs-row-cols-lg-3 > * {
+      flex: 0 0 auto;
+      width: 33.3333333333%;
+    }
+    .fs-row-cols-lg-4 > * {
+      flex: 0 0 auto;
+      width: 25%;
+    }
+    .fs-row-cols-lg-5 > * {
+      flex: 0 0 auto;
+      width: 20%;
+    }
+    .fs-row-cols-lg-6 > * {
+      flex: 0 0 auto;
+      width: 16.6666666667%;
+    }
+    .fs-order-lg-0 {
+      order: 0;
+    }
+    .fs-order-lg-1 {
+      order: 1;
+    }
+    .fs-order-lg-2 {
+      order: 2;
+    }
+    .fs-order-lg-3 {
+      order: 3;
+    }
+    .fs-order-lg-4 {
+      order: 4;
+    }
+    .fs-order-lg-5 {
+      order: 5;
+    }
+    .fs-order-lg-6 {
+      order: 6;
+    }
+    .fs-order-lg-7 {
+      order: 7;
+    }
+    .fs-order-lg-8 {
+      order: 8;
+    }
+    .fs-order-lg-9 {
+      order: 9;
+    }
+    .fs-order-lg-10 {
+      order: 10;
+    }
+    .fs-order-lg-11 {
+      order: 11;
+    }
+    .fs-order-lg-12 {
+      order: 12;
+    }
     .fs-col-lg {
       flex: 1 0 0%;
     }
@@ -564,6 +909,73 @@
     }
   }
   @media (min-width: 1280px) {
+    .fs-row-cols-xl-auto > * {
+      flex: 0 0 auto;
+      width: auto;
+    }
+    .fs-row-cols-xl-1 > * {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+    .fs-row-cols-xl-2 > * {
+      flex: 0 0 auto;
+      width: 50%;
+    }
+    .fs-row-cols-xl-3 > * {
+      flex: 0 0 auto;
+      width: 33.3333333333%;
+    }
+    .fs-row-cols-xl-4 > * {
+      flex: 0 0 auto;
+      width: 25%;
+    }
+    .fs-row-cols-xl-5 > * {
+      flex: 0 0 auto;
+      width: 20%;
+    }
+    .fs-row-cols-xl-6 > * {
+      flex: 0 0 auto;
+      width: 16.6666666667%;
+    }
+    .fs-order-xl-0 {
+      order: 0;
+    }
+    .fs-order-xl-1 {
+      order: 1;
+    }
+    .fs-order-xl-2 {
+      order: 2;
+    }
+    .fs-order-xl-3 {
+      order: 3;
+    }
+    .fs-order-xl-4 {
+      order: 4;
+    }
+    .fs-order-xl-5 {
+      order: 5;
+    }
+    .fs-order-xl-6 {
+      order: 6;
+    }
+    .fs-order-xl-7 {
+      order: 7;
+    }
+    .fs-order-xl-8 {
+      order: 8;
+    }
+    .fs-order-xl-9 {
+      order: 9;
+    }
+    .fs-order-xl-10 {
+      order: 10;
+    }
+    .fs-order-xl-11 {
+      order: 11;
+    }
+    .fs-order-xl-12 {
+      order: 12;
+    }
     .fs-col-xl {
       flex: 1 0 0%;
     }
@@ -621,6 +1033,73 @@
     }
   }
   @media (min-width: 1536px) {
+    .fs-row-cols-xxl-auto > * {
+      flex: 0 0 auto;
+      width: auto;
+    }
+    .fs-row-cols-xxl-1 > * {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+    .fs-row-cols-xxl-2 > * {
+      flex: 0 0 auto;
+      width: 50%;
+    }
+    .fs-row-cols-xxl-3 > * {
+      flex: 0 0 auto;
+      width: 33.3333333333%;
+    }
+    .fs-row-cols-xxl-4 > * {
+      flex: 0 0 auto;
+      width: 25%;
+    }
+    .fs-row-cols-xxl-5 > * {
+      flex: 0 0 auto;
+      width: 20%;
+    }
+    .fs-row-cols-xxl-6 > * {
+      flex: 0 0 auto;
+      width: 16.6666666667%;
+    }
+    .fs-order-xxl-0 {
+      order: 0;
+    }
+    .fs-order-xxl-1 {
+      order: 1;
+    }
+    .fs-order-xxl-2 {
+      order: 2;
+    }
+    .fs-order-xxl-3 {
+      order: 3;
+    }
+    .fs-order-xxl-4 {
+      order: 4;
+    }
+    .fs-order-xxl-5 {
+      order: 5;
+    }
+    .fs-order-xxl-6 {
+      order: 6;
+    }
+    .fs-order-xxl-7 {
+      order: 7;
+    }
+    .fs-order-xxl-8 {
+      order: 8;
+    }
+    .fs-order-xxl-9 {
+      order: 9;
+    }
+    .fs-order-xxl-10 {
+      order: 10;
+    }
+    .fs-order-xxl-11 {
+      order: 11;
+    }
+    .fs-order-xxl-12 {
+      order: 12;
+    }
     .fs-col-xxl {
       flex: 1 0 0%;
     }
@@ -678,6 +1157,73 @@
     }
   }
   @media (min-width: 1920px) {
+    .fs-row-cols-xxxl-auto > * {
+      flex: 0 0 auto;
+      width: auto;
+    }
+    .fs-row-cols-xxxl-1 > * {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+    .fs-row-cols-xxxl-2 > * {
+      flex: 0 0 auto;
+      width: 50%;
+    }
+    .fs-row-cols-xxxl-3 > * {
+      flex: 0 0 auto;
+      width: 33.3333333333%;
+    }
+    .fs-row-cols-xxxl-4 > * {
+      flex: 0 0 auto;
+      width: 25%;
+    }
+    .fs-row-cols-xxxl-5 > * {
+      flex: 0 0 auto;
+      width: 20%;
+    }
+    .fs-row-cols-xxxl-6 > * {
+      flex: 0 0 auto;
+      width: 16.6666666667%;
+    }
+    .fs-order-xxxl-0 {
+      order: 0;
+    }
+    .fs-order-xxxl-1 {
+      order: 1;
+    }
+    .fs-order-xxxl-2 {
+      order: 2;
+    }
+    .fs-order-xxxl-3 {
+      order: 3;
+    }
+    .fs-order-xxxl-4 {
+      order: 4;
+    }
+    .fs-order-xxxl-5 {
+      order: 5;
+    }
+    .fs-order-xxxl-6 {
+      order: 6;
+    }
+    .fs-order-xxxl-7 {
+      order: 7;
+    }
+    .fs-order-xxxl-8 {
+      order: 8;
+    }
+    .fs-order-xxxl-9 {
+      order: 9;
+    }
+    .fs-order-xxxl-10 {
+      order: 10;
+    }
+    .fs-order-xxxl-11 {
+      order: 11;
+    }
+    .fs-order-xxxl-12 {
+      order: 12;
+    }
     .fs-col-xxxl {
       flex: 1 0 0%;
     }
@@ -910,7 +1456,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;
@@ -957,7 +1504,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);
@@ -1001,5 +1549,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=layout.css.map */