@swiftwc/ui 0.0.0-dev.5 → 0.0.0-dev.50

package/scss/_vars.scss

@@ -1,46 +1,166 @@
 @use 'functions';
 @use 'sass:math';
 
-$base-layer: base !default;
-$components-layer: components !default;
-$colors-layer: colors !default;
-$ui-layer: actions !default;
-$transitions-layer: transitions !default;
-$final-layer: final !default;
+$base-layer: sw-base !default;
+$components-layer: sw-components !default;
+$list-components-layer: sw-list-components !default;
+$nav-components-layer: sw-nav-components !default;
+$tab-components-layer: sw-tab-components !default;
+$utils-layer: sw-utils !default;
+$colors-layer: sw-colors !default;
+$ui-layer: sw-actions !default;
+$transitions-layer: sw-transitions !default;
+$final-layer: sw-final !default;
 
 $vt-fwd-class-name: fwd !default;
 
-$disclosure-group-contents-height-css-prop: --disclosure-group-contents-height !default;
-$disclosure-group-animation-duration-css-prop: --disclosure-group-animation-duration !default;
-$disclosure-group-animation-close-class: close !default;
-
 $nav-split-view-2col-bp: 43rem !default;
-$nav-split-view-3col-bp: 56rem !default;
+$nav-split-view-3col-bp: 64rem !default;
 
-// $ipad-sheet-view-width: 12rem !default;
-$ipad-sheet-view-width: 37rem !default;
+// $ipad-sheet-view-inline-size: 12rem !default;
+$ipad-sheet-view-inline-size: 37rem !default;
 
 $ipad-sheet-view-aspect-ratio: math.div(4, 3) !default;
 
-$sidebar-transition-duration: 250ms !default;
-
 // $ipad-portrait-bp: 20rem !default;
 $ipad-portrait-bp: 43rem !default;
 
 // $ipad-landscape-bp: 30rem !default;
 $ipad-landscape-bp: 68rem !default;
 
-// computed
+$table-expanded-bp: 31rem !default;
+
+// SECTION: Defaults
+$picker-styles: menu;
+$label-styles: icon-only, title-only, title-and-icon;
+$list-styles: inset, inset-grouped, sidebar;
+$form-styles: inset, inset-grouped, sidebar;
+$table-styles: inset;
+
+$label-fonts: (
+  footnote: (
+    size: 1rem,
+    line: 1rem,
+    weight: 400,
+  ),
+  caption2: (
+    size: 0.75rem,
+    line: calc(1 / 0.75),
+    weight: 400,
+  ),
+  caption: (
+    size: 0.875rem,
+    line: calc(1.25 / 0.875),
+    weight: 400,
+  ),
+  callout: (
+    size: 0.875rem,
+    line: 0.875rem,
+    weight: 400,
+  ),
+  body: (
+    size: 1rem,
+    line: calc(1.5 / 1),
+    weight: 400,
+  ),
+  subheadline: (
+    size: 1.125rem,
+    line: calc(1.75 / 1.125),
+    weight: 400,
+  ),
+  headline: (
+    size: 1.25rem,
+    line: calc(1.75 / 1.25),
+    weight: 500,
+  ),
+  title3: (
+    size: 1.5rem,
+    line: calc(2 / 1.5),
+    weight: 600,
+  ),
+  title2: (
+    size: 1.875rem,
+    line: calc(2.25 / 1.875),
+    weight: 600,
+  ),
+  title: (
+    size: 2.25rem,
+    line: calc(2.5 / 2.25),
+    weight: 600,
+  ),
+  large-title: (
+    size: 3rem,
+    line: 1,
+    weight: 700,
+  ),
+  extra-large-title: (
+    size: 3.75rem,
+    line: 1,
+    weight: 700,
+  ),
+);
+
+// button sizes
+$button-sizes: (
+  mini: (
+    default: (
+      padding: 0.2rem,
+      border-radius: 1rem,
+    ),
+    fine: (
+      padding: 0.2rem,
+      border-radius: 0.4rem,
+    ),
+  ),
+  regular: (
+    default: (
+      padding: 0.6rem,
+      border-radius: 1.2rem,
+    ),
+    fine: (
+      padding: 0.6rem,
+      border-radius: 0.8rem,
+    ),
+  ),
+  small: (
+    default: (
+      padding: 0.4rem,
+      border-radius: 1rem,
+    ),
+    fine: (
+      padding: 0.4rem,
+      border-radius: 0.6rem,
+    ),
+  ),
+  large: (
+    default: (
+      padding: 1.2rem,
+      border-radius: 2.4rem,
+    ),
+    fine: (
+      padding: 1.2rem,
+      border-radius: 1.4rem,
+    ),
+  ),
+);
+
+$disclosure-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-right-bold
+$table-col-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M216.49,168.49a12,12,0,0,1-17,0L128,97,56.49,168.49a12,12,0,0,1-17-17l80-80a12,12,0,0,1,17,0l80,80A12,12,0,0,1,216.49,168.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-up-bold
+// $picker-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E'; // ph-check-bold
+
+$cancel-button-icon: 'x'; // ph-trash
+$close-button-icon: 'x'; // ph-trash
+$confirm-button-icon: 'check'; // ph-trash
+$delete-button-icon: 'trash'; // ph-trash
+
+// SECTION: computed(s)
 
 $ipad-portrait-bp-max: #{functions.subtract-tiny($ipad-portrait-bp)};
 $ipad-portrait-bp-min: $ipad-portrait-bp;
 $ipad-landscape-bp-max: #{functions.subtract-tiny($ipad-landscape-bp)};
 $ipad-landscape-bp-min: $ipad-landscape-bp;
 
-$ipad-sheet-view-height: math.div(
-  $ipad-sheet-view-width,
-  $ipad-sheet-view-aspect-ratio
-); //4/3
+$ipad-sheet-view-height: math.div($ipad-sheet-view-inline-size, $ipad-sheet-view-aspect-ratio); //4/3
 
 $nav-split-view-2col-bp-max: #{functions.subtract-tiny($nav-split-view-2col-bp)};
 $nav-split-view-2col-bp-min: $nav-split-view-2col-bp;
@@ -49,10 +169,10 @@ $nav-split-view-3col-bp-min: $nav-split-view-3col-bp;
 
 @debug $ipad-portrait-bp-max;
 
-// checks
+// SECTION: checks
 
-@if ($ipad-portrait-bp < $ipad-sheet-view-width) {
-  @warn "$ipad-sheet-view-width should not be larger than $ipad-portrait-bp! Breaks centering";
+@if ($ipad-portrait-bp < $ipad-sheet-view-inline-size) {
+  @warn "$ipad-sheet-view-inline-size should not be larger than $ipad-portrait-bp! Breaks centering";
 }
 
 @if ($nav-split-view-3col-bp < $nav-split-view-2col-bp) {

package/scss/base/_layout.scss

@@ -1,40 +1,64 @@
 @use '../vars';
 @use '../mixins';
+@use '../placeholders';
 
 @layer #{vars.$components-layer} {
   body-view,
   navigation-stack,
   navigation-split-view,
-  dialog[is='full-screen'],
-  dialog[is='sheet-view'] {
-    position: relative;
+  [is='full-screen'],
+  [is='sheet-view'] {
+    :where(&) {
+      position: relative;
 
-    grid-auto-flow: column;
+      grid-auto-flow: column;
 
-    grid-template-columns: minmax(0, 1fr); //repeat(auto-fit, minmax(0, 1fr));
-    grid-template-rows: minmax(0, 1fr);
+      grid-template-columns: minmax(0, 1fr); //repeat(auto-fit, minmax(0, 1fr));
+      grid-template-rows: minmax(0, 1fr);
+    }
 
-    & > *:not([slot]) {
+    :where(& > *:not([slot])) {
       @include mixins.span-all;
     }
   }
 
-  navigation-stack:has(> navigation-stack:not([hidden])),
+  navigation-stack:has(> navigation-stack:not([hidden]),> navigation-split-view:not([hidden])),
   navigation-stack:has(> body-view),
   navigation-split-view:has(> body-view),
   dialog:has(> body-view),
   // body-view:has(> dialog),
   body-view:has(> body-view) {
-    & > scroll-view,
-    [is='sidebar-view'] > scroll-view {
-      transform: translateX(var(--view-transition-leading-x));
+    > scroll-view,
+    > [is='sidebar-view'] > scroll-view {
+      :where(&) {
+        --scroll-view-translate: translateX(var(--view-transition-leading-x));
+      }
+    }
+
+    // & > top-bar > tool-bar-item,
+    // & > bottom-bar > tool-bar-item,
+    // & > top-bar > tool-bar-item-group,
+    // & > bottom-bar > tool-bar-item-group,
+    // & > [is='sidebar-view'] > top-bar > tool-bar-item,
+    // & > [is='sidebar-view'] > bottom-bar > tool-bar-item,
+    // & > [is='sidebar-view'] > top-bar > tool-bar-item-group,
+    // & > [is='sidebar-view'] > bottom-bar > tool-bar-item-group {
+    > tool-bar > tool-bar-item,
+    > tool-bar > tool-bar-item-group,
+    > [is='sidebar-view'] > tool-bar > tool-bar-item,
+    > [is='sidebar-view'] > tool-bar > tool-bar-item-group {
+      :where(&) {
+        @include mixins.vt-toolbar-cell-offscreen-keyframe;
+      }
     }
+  }
 
-    & > navigation-bar > tool-bar-item,
-    & > bottom-bar > tool-bar-item,
-    & > navigation-bar > tool-bar-item-group,
-    & > bottom-bar > tool-bar-item-group {
-      transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
+  :is(navigation-stack, dialog, body-view):has(> body-view > body-view) {
+    > scroll-view,
+    > tool-bar {
+      :where(&) {
+        content-visibility: hidden;
+      }
     }
   }
 }

package/scss/base/_reboot.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../functions';
 
-@layer #{vars.$base-layer}, #{vars.$components-layer}, #{vars.$colors-layer}, #{vars.$ui-layer}, #{vars.$transitions-layer}, #{vars.$final-layer};
+@layer #{vars.$base-layer}, #{vars.$components-layer}, #{vars.$nav-components-layer}, #{vars.$list-components-layer}, #{vars.$tab-components-layer}, #{vars.$utils-layer}, #{vars.$colors-layer}, #{vars.$ui-layer}, #{vars.$transitions-layer}, #{vars.$final-layer};
 
 @layer #{vars.$base-layer} {
   // html,
@@ -11,24 +11,90 @@
 
   :root {
     interpolate-size: allow-keywords;
+
+    touch-action: manipulation; // Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen
   }
 
   *,
   *::before,
-  *::after {
+  *::after,
+  *::part(root) {
     box-sizing: border-box;
   }
 
-  // dialog {
-  //   margin: 0;
-  // }
+  *,
+  *::part(root) {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
 
-  body {
-    background-color: var(--primary-bg);
+  *,
+  *::part(root) {
+    -webkit-touch-callout: none; // disables long-press menu
+  }
+
+  *:not(input, textarea),
+  *::part(root) {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  // FIXME:
+  .ph,
+  .ph::before {
+    display: grid;
+  }
+
+  button,
+  *::part(button),
+  input,
+  *::part(input),
+  optgroup,
+  *::part(optgroup),
+  select,
+  *::part(select),
+  textarea *::part(textarea) {
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    // color: inherit;
+  }
+
+  [role='button'],
+  button,
+  *::part(button) {
+    text-align: unset;
+
+    // appearance: none;
+    // -webkit-appearance: none;
+
+    touch-action: manipulation;
+  }
+
+  [role='button'],
+  summary,
+  button,
+  *::part(button) {
+    cursor: pointer;
+  }
+
+  input,
+  *::part(input) {
+    min-inline-size: 25px; // NOTE: For inputs overflowing-x
   }
 
   body {
     display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: minmax(0px, 1fr);
 
     position: absolute;
     inset: 0;
@@ -36,20 +102,90 @@
     margin: 0;
     padding: 0;
 
+    background-color: var(--canvas); //light-dark(oklch(var(--primary-bg)), var(--primary-bg-dark));
+
+    color: var(--canvastext); //light-dark(var(--primary-label), var(--primary-label-dark));
+
     touch-action: none !important;
   }
 
+  html {
+    transition: font-size 1ms step-start;
+
+    @media (pointer: fine) {
+      font-size: 14px;
+    }
+
+    font-family: var(--host--font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+
+    font-feature-settings: var(--host--font-feature-settings, normal);
+
+    font-variation-settings: var(--host--font-variation-settings, normal);
+
+    :where(&:has(body > v-keyboard[system-font='Inter'])) {
+      --host--font-family: Inter, sans-serif;
+
+      --host--font-feature-settings: 'liga' 1, 'calt' 1;
+
+      @supports (font-variation-settings: normal) {
+        --host--font-family: InterVariable, sans-serif;
+      }
+    }
+  }
+
+  // label {
+  //   // remove this
+  //   display: inline-grid;
+  //   position: relative;
+  //   // min-height: var(--toolbar-cell-min-size);
+  //   // min-width: var(--toolbar-cell-min-size);
+  //   // container-type: inline-size;
+
+  //   grid-template-columns: minmax(0, 1fr);
+  //   grid-template-rows: minmax(0, 1fr);
+
+  //   place-content: center;
+  //   place-items: center;
+  //   // line-height: 1;
+
+  //   > svg {
+  //     display: inline-grid;
+  //     width: 2rem;
+  //     height: 2rem;
+  //   }
+
+  //   > i {
+  //     display: inline-grid;
+  //     font-size: 2rem;
+  //   }
+  // }
+
   $CONFIG: (
     vt-fwd-class-name: vars.$vt-fwd-class-name,
-    disclosure-group-contents-height-css-prop: vars.$disclosure-group-contents-height-css-prop,
-    disclosure-group-animation-duration-css-prop: vars.$disclosure-group-animation-duration-css-prop,
-    disclosure-group-animation-close-class: vars.$disclosure-group-animation-close-class,
+
+    // sidebar-toggle-padding-inline-start-css-prop: vars.$sidebar-toggle-padding-inline-start-css-prop,
+    //
+    // toolbar-leading-stack-part-name: vars.$toolbar-leading-stack-part-name,
+    // toolbar-principal-stack-part-name: vars.$toolbar-principal-stack-part-name,
+    // toolbar-trailing-stack-part-name: vars.$toolbar-trailing-stack-part-name,
+    //
+    // ipad-portrait-bp-max: vars.$ipad-portrait-bp-max,
+    // ipad-portrait-bp-min: vars.$ipad-portrait-bp-min,
+    // ipad-landscape-bp-max: vars.$ipad-landscape-bp-max,
+    // ipad-landscape-bp-min: vars.$ipad-landscape-bp-min,
+    ipad-sheet-view-inline-size: vars.$ipad-sheet-view-inline-size,
+    ipad-sheet-view-height: vars.$ipad-sheet-view-height,
+    //
+    cancel-button-icon: vars.$cancel-button-icon,
+    close-button-icon: vars.$close-button-icon,
+    confirm-button-icon: vars.$confirm-button-icon,
+    delete-button-icon: vars.$delete-button-icon,
   );
 
-@debug functions.map-to-query($CONFIG);
+  @debug functions.map-to-query($CONFIG);
 
-html::before {
-  content: '#{functions.map-to-query($CONFIG)}';
-  display: none;
+  html::before {
+    content: '#{functions.map-to-query($CONFIG)}';
+    display: none;
+  }
 }
-}