@swiftwc/ui 0.0.0-dev.1 → 0.0.0-dev.11

package/scss/transitions/_dialog.scss

@@ -0,0 +1,28 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  [is='sheet-view']:not([open]) {
+    z-index: var(--top-layer-polyfill-z-index);
+  }
+
+  [is='sheet-view'][open] {
+    --sheet-view-translate: translateY(var(--view-transition-dialog-onscreen-y));
+
+    @include mixins.if-ipad-sheet-fits {
+      @include mixins.if-2col-split-view-fits {
+        navigation-split-view & {
+          margin-inline-start: var(--safe-area-inset-left);
+        }
+      }
+    }
+
+    @include mixins.add-dialog-backdrop-transition-frames(var(--view-transition-dialog-onscreen-backdrop-bg));
+
+    @starting-style {
+      & {
+        --sheet-view-translate: translateY(var(--view-transition-dialog-offscreen-y));
+      }
+    }
+  }
+}

package/scss/transitions/_disclosure-group.scss

@@ -0,0 +1,35 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    [is='disclosure-group'] {
+      :where(&)::details-content {
+        transition:
+          block-size var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing),
+          content-visibility var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing);
+        will-change: block-size, content-visibility;
+      }
+
+      // :where(& > summary > [slot='marker']) {
+      :where(& > summary)::after {
+        transition: transform var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing);
+        will-change: transform;
+      }
+
+      @supports not (interpolate-size: allow-keywords) {
+        :where(&) {
+          transition: grid-template-rows var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing);
+          will-change: grid-template-rows;
+        }
+        // :where(&)::details-content {
+        //   transition:
+        //     max-block-size var(#{vars.$disclosure-group-animation-duration-css-prop}) allow-discrete var(--disclosure-group-animation-easing),
+        //     block-size var(#{vars.$disclosure-group-animation-duration-css-prop}) allow-discrete var(--disclosure-group-animation-easing),
+        //     transform var(#{vars.$disclosure-group-animation-duration-css-prop}) allow-discrete var(--disclosure-group-animation-easing);
+        //   will-change: max-block-size, block-size, transform;
+        // }
+      }
+    }
+  }
+}

package/scss/transitions/_fwd.navbar.scss

@@ -0,0 +1,41 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  // principal-stack > tool-bar-item {
+  //   position: absolute;
+  //   transition: transform 2s ease-out;
+  // }
+
+  // ::slotted(tool-bar-item) {
+  //   background-color: red;
+  // }
+
+  // toolbar {
+  //   display: grid;
+  //   grid-auto-flow: column;
+  //   column-gap: 10px;
+  //   grid-column: 1 / -1; // span all columns
+  //   grid-row: 1 / -1; // span all rows
+  // }
+
+  tool-bar-item,
+  tool-bar-item-group {
+    &.fwn {
+      // BUG: Safari doesn't enforce scaling without this here again redundantly!
+      // @include mixins.vt-toolbar-cell-offscreen-keyframe;
+    }
+
+    &.fwnn {
+      @include mixins.vt-toolbar-cell-onscreen-keyframe;
+
+      @starting-style {
+        @include mixins.vt-toolbar-cell-offscreen-keyframe;
+      }
+    }
+
+    &.fwnn.fwn {
+      @include mixins.vt-toolbar-cell-offscreen-keyframe;
+    }
+  }
+}

package/scss/transitions/_fwd.scss

@@ -0,0 +1,24 @@
+@use '../vars';
+
+@layer #{vars.$transitions-layer} {
+  scroll-view {
+    // Make sure old/outgoing elements can NOT be interacted with (new elements are already stacked higher)
+    &.#{vars.$vt-fwd-class-name} {
+      pointer-events: none;
+    }
+
+    &.fwdd {
+      --scroll-view-translate: translateX(var(--view-transition-principal-x));
+
+      --scroll-view-box-shadow: var(--screen-box-shadow);
+
+      @starting-style {
+        --scroll-view-translate: translateX(var(--view-transition-trailing-x));
+      }
+    }
+
+    &.fwdd.#{vars.$vt-fwd-class-name} {
+      --scroll-view-translate: translateX(var(--view-transition-leading-x));
+    }
+  }
+}

package/scss/transitions/_glass-button.scss

@@ -0,0 +1,12 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    [is='glass-button'] {
+      :where(&) {
+        transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
+      }
+    }
+  }
+}

package/scss/transitions/_glass-prominent-button.scss

@@ -0,0 +1,12 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    [is='glass-prominent-button'] {
+      :where(&) {
+        transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
+      }
+    }
+  }
+}

package/scss/transitions/_index.scss

@@ -0,0 +1,74 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    // ::view-transition-old(root),
+    // ::view-transition-new(root) {
+    //   animation-duration: 15s;
+    // }
+    // ::view-transition-old(root) {
+    //   animation: 15s ease-out both slide-to-left;
+    // }
+
+    // ::view-transition-new(root) {
+    //   animation: 15s ease-out both slide-from-right;
+    // }
+    scroll-view {
+      &.#{vars.$vt-fwd-class-name},
+      &.fwdd,
+      &.bwd,
+      &.bwdd {
+        transition:
+          transform var(--view-transition-duration) ease-out allow-discrete,
+          padding-inline-start var(--sidebar-transition-duration) ease-out allow-discrete,
+          margin-inline-start var(--sidebar-transition-duration) ease-out allow-discrete;
+
+        will-change: transform, padding-inline-start, margin-inline-start, scroll-position;
+      }
+    }
+
+    tool-bar-item,
+    tool-bar-item-group {
+      &.fwn,
+      &.fwnn,
+      &.bwn,
+      &.bwnn {
+        transition:
+          transform var(--view-transition-duration) ease-out allow-discrete,
+          opacity var(--view-transition-duration) ease-out allow-discrete,
+          filter var(--view-transition-duration) ease-out allow-discrete;
+
+        will-change: transform, opacity, filter;
+      }
+      // > * {
+      // transition: filter var(--view-transition-duration) ease-out allow-discrete;
+      // will-change: filter;
+      // }
+      // }
+    }
+
+    tool-bar-item,
+    tool-bar-item-group {
+      :where(&) {
+        transition:
+          transform var(--touchglass-transition-duration) ease-out allow-discrete,
+          filter var(--touchglass-transition-duration) ease-out allow-discrete;
+
+        will-change: transform, filter;
+      }
+    }
+
+    [is='sheet-view'] {
+      transition:
+        transform var(--view-transition-duration) ease-out allow-discrete,
+        overlay var(--view-transition-duration) ease-out allow-discrete,
+        display var(--view-transition-duration) ease-out allow-discrete;
+      // transition: background-color var(--view-transition-duration) ease-out
+      //   allow-discrete;
+      will-change: transform, overlay, display;
+
+      @include mixins.make-backdrop-transitionable;
+    }
+  }
+}

package/scss/transitions/_menu-view.scss

@@ -0,0 +1,26 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    menu-view {
+      :where(&)::part(menu-summary) {
+        transition:
+          transform var(--touchglass-transition-duration) allow-discrete ease-out,
+          filter var(--touchglass-transition-duration) allow-discrete ease-out;
+        will-change: transform;
+      }
+
+      :where(&)::part(menu-dialog) {
+        // transition:
+        //   block-size var(--menu-animation-duration) allow-discrete ease-out,
+        //   inline-size var(--menu-animation-duration) allow-discrete ease-out,
+        //   display var(--menu-animation-duration) allow-discrete ease-out,
+        //   overlay var(--menu-animation-duration) allow-discrete ease-out,
+        //   transform var(--menu-animation-duration) allow-discrete ease-out;
+        transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
+        // will-change: block-size, inline-size, transform, overlay, display;
+      }
+    }
+  }
+}

package/scss/transitions/_navigation-split-view.scss

@@ -0,0 +1,23 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    navigation-split-view {
+      @include mixins.if-2col-split-view-fits {
+        &:has(> [is='sidebar-view']) {
+          @include mixins.if-3col-split-view-fits {
+            > [is='sidebar-view'] {
+              :where(&) {
+                // transition:
+                //   filter var(--touchglass-transition-duration) allow-discrete ease-out,
+                //   transform var(--touchglass-transition-duration) allow-discrete ease-out;
+                // will-change: filter, transform;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/scss/transitions/_sidebar-view.scss

@@ -0,0 +1,36 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    [is='sidebar-view'] {
+      // Between 2col and 3col AND preferred-compact-column rule ON, apply transitions
+      @include mixins.if-2col-split-view-fits {
+        :where(navigation-split-view:has(> [is='sidebar-view']) &) {
+          transition:
+            filter var(--touchglass-transition-duration) ease-out allow-discrete,
+            transform var(--touchglass-transition-duration) ease-out allow-discrete;
+          will-change: transform; // BUG: do NOT add filter here, it breaks webkit backdrop-filter
+        }
+
+        @include mixins.ifnot-3col-split-view-fits {
+          :where(navigation-split-view:has(> [is='sidebar-view']):not([column-visibility='double-column'])[preferred-compact-column='content'] &) {
+            transition:
+              filter var(--touchglass-transition-duration) ease-out allow-discrete,
+              transform var(--touchglass-transition-duration) ease-out allow-discrete,
+              margin-inline-start var(--sidebar-transition-duration) ease-out allow-discrete;
+            will-change: transform, margin-inline-start; // BUG: do NOT add filter here, it breaks webkit backdrop-filter
+          }
+        }
+      }
+      // Always
+      :where(tab-view:has(> [is='sidebar-view']) > &) {
+        transition:
+          filter var(--touchglass-transition-duration) ease-out allow-discrete,
+          transform var(--touchglass-transition-duration) ease-out allow-discrete,
+          margin-inline-start var(--sidebar-transition-duration) ease-out allow-discrete;
+        will-change: transform, margin-inline-start; // BUG: do NOT add filter here, it breaks webkit backdrop-filter
+      }
+    }
+  }
+}

package/scss/transitions/_tab-bar.scss

@@ -0,0 +1,19 @@
+@use '../vars';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    [is='tab-bar'] {
+      // :where(&) {
+      //   transition: inset var(--sidebar-transition-duration) ease-out allow-discrete;
+      //   will-change: inset;
+      // }
+
+      > [is='form-view'] {
+        :where(&) {
+          transition: transform var(--sidebar-transition-duration) ease-out allow-discrete;
+          will-change: transform;
+        }
+      }
+    }
+  }
+}

package/scss/utils/_frame.scss

@@ -0,0 +1,84 @@
+@use '../vars';
+@use 'sass:math';
+
+@layer #{vars.$utils-layer} {
+  :where([frame\:width='infinity']) {
+    inline-size: 100%;
+  }
+  :where([frame\:max-width='infinity']) {
+    max-inline-size: 100%;
+  }
+  @for $i from 0 through 100 {
+    :where([frame\:max-width='#{$i}']) {
+      max-inline-size: #{$i}rem;
+    }
+    :where([frame\:max-width='#{$i}cqi']) {
+      max-inline-size: #{$i}cqi;
+    }
+  }
+
+  // :where([frame-width='infinity']) {
+  //   place-items: stretch; //justify-self: stretch;
+  // }
+  // :where([frame-alignment='leading']) {
+  //   align-self: start;
+  // }
+  // :where([frame-alignment='center']) {
+  //   align-self: center;
+  // }
+  // :where([frame-alignment='trailing']) {
+  //   align-self: end;
+  // }
+  // :where([alignment='start']) {
+  //   place-items: start;
+  // }
+  // :where([alignment='fill']) {
+  //   place-items: stretch;
+  // }
+  // :where([content='start']) {
+  //   place-content: start;
+  // }
+  // :where([justify-content='start']) {
+  //   justify-content: start;
+  // }
+  // :where([justify-content='start']) {
+  //   justify-content: start;
+  // }
+  // :where([spacer='top']) {
+  //   margin-top: auto;
+  // }
+  // :where([distribution='start']) {
+  //   place-content: start;
+  // }
+  // :where([distribution='space-between']) {
+  //   place-content: space-between;
+  // }
+  // :where(spacer) {
+  //   margin: auto;
+  // }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :where([slow]) {
+      visibility: visible;
+
+      transition: opacity 250ms ease-out allow-discrete;
+      will-change: opacity;
+    }
+
+    :where([slow='hide']) {
+      opacity: 0;
+
+      @starting-style {
+        opacity: 1;
+      }
+    }
+
+    :where([slow='show']) {
+      opacity: 1;
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+  }
+}

package/scss/utils/_index.scss

@@ -0,0 +1,68 @@
+@use '../vars';
+
+@layer #{vars.$utils-layer} {
+  :where([background-style='grouped']) {
+    --background: var(--groupedBackground);
+    --secondaryBackground: var(--secondaryGroupedBackground);
+    --tertiaryBackground: var(--tertiaryGroupedBackground);
+
+    --face: var(--background);
+    // --face2: var(--secondaryBackground);
+    // --face3: var(--tertiaryBackground);
+  }
+
+  :where([foreground='secondary']) {
+    color: var(--secondary);
+  }
+
+  :where([foreground='blue']) {
+    color: var(--blue);
+  }
+
+  :where([foreground='blue.secondary']) {
+    color: var(--blue2);
+  }
+
+  [tint='gray'] {
+    :where(&) {
+      --accentColor: var(--gray);
+      --accentColor2: var(--gray2);
+      --accentColor3: var(--gray3);
+      --accentColor4: var(--gray4);
+      --accentColor5: var(--gray5);
+    }
+
+    :where(&[is='bordered-button']) {
+      // --accentEmphasis: light-dark(color-mix(in oklch, var(--gray) 50%, var(--black)), color-mix(in oklch, var(--gray) 50%, var(--white)));
+      --accentSubtle: var(--gray4);
+    }
+  }
+
+  [tint='blue'] {
+    :where(&) {
+      --accentColor: var(--blue);
+      --accentColor2: var(--blue2);
+      --accentColor3: var(--blue3);
+      --accentColor4: var(--blue4);
+      --accentColor5: var(--blue5);
+    }
+
+    :where(&[is='bordered-button']) {
+      --accentSubtle: var(--blue4);
+    }
+  }
+
+  [tint='red'] {
+    :where(&) {
+      --accentColor: var(--red);
+      --accentColor2: var(--red2);
+      --accentColor3: var(--red3);
+      --accentColor4: var(--red4);
+      --accentColor5: var(--red5);
+    }
+
+    :where(&[is='bordered-button']) {
+      --accentSubtle: var(--red4);
+    }
+  }
+}

package/scss/utils/_scroll-view.scss

@@ -0,0 +1,14 @@
+@use '../vars';
+@use 'sass:math';
+@use 'sass:string';
+
+@layer #{vars.$utils-layer} {
+  scroll-view {
+    @supports (x: #{string.unquote('attr(x type(*))')}) {
+      // :where(&[background='infinity']) {
+      // :where(&) {
+      //   --face: attr(background type(<color>), inherit);
+      // }
+    }
+  }
+}

package/scss/utils/_spacing.scss

@@ -0,0 +1,25 @@
+@use '../vars';
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
+
+@layer #{vars.$utils-layer} {
+  // general utils
+  @for $i from 0 through 50 {
+    :where([padding-horizontal='#{$i}']) {
+      padding-inline: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+
+    :where([padding-vertical='#{$i}']) {
+      padding-block: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+
+    :where([margin-horizontal='#{$i}']) {
+      margin-inline: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+
+    :where([margin-vertical='#{$i}']) {
+      margin-block: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+  }
+}