@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

package/src/sass/components/_tabs.scss

@@ -0,0 +1,232 @@
+@use "../abstracts" as *;
+
+// Tabs.
+//
+// Anatomy is the HTML. A <nav class="tabs"> of <a href="#panel"> is the
+// bar. A heading or <span> is the label; a leading <i> is the icon.
+// .active is the selected tab. ul.tabs > li.tab > a stays as an alias.
+// Helpers: .tabs-secondary, .horizontal / .tabs-horizontal, .max /
+// .tabs-fixed-width, .transparent / .tabs-transparent.
+//
+// Tokens follow https://m3.material.io/components/tabs/specs
+//   primary     surface, 48dp (64 with stacked icon), title-small
+//               indicator 3dp primary, 3dp 3dp 0 0
+//   secondary   48dp, icons inline, indicator 2dp
+//   inactive    on-surface-variant; hover/focus on-surface 8%/10%
+//   active      primary; hover/focus primary 8%/10%
+//   icon        24dp
+//   divider     1dp outline-variant
+//   disabled    38%
+
+$_tab: "> :is(a, .tab > a, li.tab > a)";
+
+.tabs {
+  --md-comp-primary-tab-container-color: var(--md-sys-color-surface);
+  --md-comp-primary-tab-container-height: 48px;
+  --md-comp-primary-tab-with-icon-container-height: 64px;
+  --md-comp-primary-tab-active-indicator-color: var(--md-sys-color-primary);
+  --md-comp-primary-tab-active-indicator-height: 3px;
+  --md-comp-primary-tab-active-indicator-shape: 3px 3px 0 0;
+  --md-comp-primary-tab-icon-size: 24px;
+  --md-comp-primary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
+  --md-comp-primary-tab-active-label-text-color: var(--md-sys-color-primary);
+
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  background-color: var(--md-comp-primary-tab-container-color);
+  border-block-end: 1px solid var(--md-sys-color-outline-variant);
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  > :is(.tab, li.tab) {
+    display: flex;
+    flex: 0 0 auto;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  #{$_tab} {
+    box-sizing: border-box;
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    min-height: var(--md-comp-primary-tab-container-height);
+    min-width: 48px;
+    margin: 0;
+    padding: 0 16px;
+    border: none;
+    background: transparent;
+    color: var(--md-comp-primary-tab-label-text-color);
+    text-decoration: none;
+    text-align: center;
+    cursor: pointer;
+    appearance: none;
+    @include typescale("title-small");
+    font-family: $font-stack;
+    transition: color .2s ease, background-color .2s ease;
+
+    > i {
+      flex: 0 0 auto;
+      font-size: var(--md-comp-primary-tab-icon-size);
+      width: var(--md-comp-primary-tab-icon-size);
+      height: var(--md-comp-primary-tab-icon-size);
+      line-height: var(--md-comp-primary-tab-icon-size);
+      color: inherit;
+    }
+
+    &:hover {
+      color: var(--md-sys-color-on-surface);
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+    }
+
+    &:focus-visible,
+    &:focus {
+      color: var(--md-sys-color-on-surface);
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
+      outline: none;
+    }
+
+    &.active {
+      color: var(--md-comp-primary-tab-active-label-text-color);
+      background-color: transparent;
+    }
+
+    &.active:hover {
+      background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+    }
+
+    &.active:focus-visible,
+    &.active:focus {
+      background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+    }
+  }
+
+  // Stacked icon + label is 64dp (primary).
+  &:not(.horizontal, .tabs-horizontal) #{$_tab}:has(> i) {
+    min-height: var(--md-comp-primary-tab-with-icon-container-height);
+    padding-block: 8px;
+  }
+
+  // CSS indicator when the JS sliding bar is not present.
+  &:not(:has(> .indicator)) #{$_tab}.active::after {
+    content: "";
+    position: absolute;
+    inset: auto 0 0 0;
+    height: var(--md-comp-primary-tab-active-indicator-height);
+    background-color: var(--md-comp-primary-tab-active-indicator-color);
+    border-radius: var(--md-comp-primary-tab-active-indicator-shape);
+  }
+
+  > .indicator {
+    position: absolute;
+    bottom: 0;
+    height: var(--md-comp-primary-tab-active-indicator-height);
+    background-color: var(--md-comp-primary-tab-active-indicator-color);
+    border-radius: var(--md-comp-primary-tab-active-indicator-shape);
+    pointer-events: none;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  // Disabled — on the <a> or on the wrapping .tab.
+  #{$_tab}.disabled,
+  #{$_tab}[aria-disabled="true"],
+  > :is(.tab, li.tab).disabled > a {
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+    background-color: transparent;
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+// Secondary — 48dp, icons inline, 2dp indicator.
+// Not .secondary: that name is a color utility.
+.tabs.tabs-secondary {
+  --md-comp-primary-tab-active-indicator-height: 2px;
+  --md-comp-primary-tab-with-icon-container-height: 48px;
+
+  #{$_tab} {
+    flex-direction: row;
+    gap: 8px;
+  }
+}
+
+// Inline icon + label (primary can do this too).
+.tabs.horizontal,
+.tabs.tabs-horizontal {
+  #{$_tab} {
+    flex-direction: row;
+    gap: 8px;
+    min-height: var(--md-comp-primary-tab-container-height);
+    padding-block: 0;
+  }
+}
+
+// Equal-width tabs. Default on compact so a few destinations still fill.
+.tabs.max,
+.tabs.tabs-fixed-width {
+  > :is(a, .tab, li.tab) {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  #{$_tab} {
+    width: 100%;
+  }
+}
+
+@include bp-down("large") {
+  .tabs {
+    > :is(a, .tab, li.tab) {
+      flex: 1 1 0;
+      min-width: 0;
+    }
+
+    #{$_tab} {
+      width: 100%;
+      padding-inline: 12px;
+    }
+  }
+}
+
+// On a colored app bar (header.primary > .tabs).
+.tabs.transparent,
+.tabs.tabs-transparent {
+  --md-comp-primary-tab-container-color: transparent;
+  --md-comp-primary-tab-label-text-color: color-mix(
+    in oklab,
+    var(--md-sys-color-on-primary) 74%,
+    transparent
+  );
+  --md-comp-primary-tab-active-label-text-color: var(--md-sys-color-on-primary);
+  --md-comp-primary-tab-active-indicator-color: var(--md-sys-color-on-primary);
+  border-block-end-color: color-mix(in oklab, var(--md-sys-color-on-primary) 20%, transparent);
+
+  #{$_tab}:hover,
+  #{$_tab}:focus {
+    color: var(--md-sys-color-on-primary);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 8%, transparent);
+  }
+
+  #{$_tab}.active:hover,
+  #{$_tab}.active:focus {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 10%, transparent);
+  }
+}

package/src/{scss/components/_tap-target.scss → sass/components/_tapTarget.scss}

@@ -1,3 +1,5 @@
+@use "../abstracts" as *;
+
 .tap-target-wrapper {
   width: 800px;
   height: 800px;
@@ -5,30 +7,30 @@
   z-index: 1000;
   visibility: hidden;
   transition: visibility 0s .3s;
+}
 
-  &.open {
-    visibility: visible;
-    transition: visibility 0s;
+.tap-target-wrapper.open {
+  visibility: visible;
+  transition: visibility 0s;
 
-    .tap-target {
-      transform: scale(1);
-      opacity: .95;
-      transition:
-        transform .3s cubic-bezier(.42,0,.58,1),
-        opacity .3s cubic-bezier(.42,0,.58,1);
-    }
+  .tap-target {
+    transform: scale(1);
+    opacity: .95;
+    transition:
+      transform .3s cubic-bezier(.42,0,.58,1),
+      opacity .3s cubic-bezier(.42,0,.58,1);
+  }
 
-    .tap-target-wave::before {
-      transform: scale(1);
-    }
-    .tap-target-wave::after {
-      visibility: visible;
-      animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
-      transition:
-        opacity .3s,
-        transform .3s,
-        visibility 0s 1s;
-    }
+  .tap-target-wave::before {
+    transform: scale(1);
+  }
+  .tap-target-wave::after {
+    visibility: visible;
+    animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
+    transition:
+      opacity .3s,
+      transform .3s,
+      visibility 0s 1s;
   }
 }
 
@@ -94,7 +96,7 @@
   }
 }
 
-@media only screen and (max-width: 600px) {
+@include bp-down("small") {
   .tap-target, .tap-target-wrapper {
     width: 600px;
     height: 600px;

package/src/{scss/components/_time-picker.scss → sass/components/_timepicker.scss}

@@ -1,4 +1,4 @@
-@use '../foundation/variables' as *;
+@use "../abstracts" as *;
 
 .timepicker-container {
   display: flex;
@@ -25,7 +25,7 @@
   display: flex;
   font-size: 4rem;
   text-align: left;
-  color: var(--font-on-primary-color-medium);
+  color: var(--md-sys-color-on-surface-variant);
   font-weight: 400;
   /*position: relative;*/
   user-select: none;
@@ -97,30 +97,28 @@ input[type=text].timepicker-input-minutes {
   max-width: 3.5rem;
 }
 
-.timepicker-container {
-  .am-btn,
-  .pm-btn {
-    width: 3.6rem;
-    height: 50%;
-    padding-left: calc(var(--btn-padding) / 1.8);
-    padding-right: calc(var(--btn-padding) / 1.8);
-    line-height: 2rem;
-    vertical-align: middle;
-    text-align: center;
-    // background-color: transparent;
-    border: 1px solid var(--md-sys-color-outline);
-  }
+.timepicker-container .am-btn,
+.timepicker-container .pm-btn {
+  width: 3.6rem;
+  height: 50%;
+  padding-left: calc(var(--btn-padding) / 1.8);
+  padding-right: calc(var(--btn-padding) / 1.8);
+  line-height: 2rem;
+  vertical-align: middle;
+  text-align: center;
+  // background-color: transparent;
+  border: 1px solid var(--md-sys-color-outline);
+}
 
-  .am-btn {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
+.timepicker-container .am-btn {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
 
-  .pm-btn {
-    border-top: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
+.timepicker-container .pm-btn {
+  border-top: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 /* Analog Clock Display */
@@ -164,11 +162,11 @@ input[type=text].timepicker-input-minutes {
   position: absolute;
   cursor: pointer;
   font-size: 15px;
+}
 
-  &.active,
-  &:hover {
-    background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
-  }
+.timepicker-tick.active,
+.timepicker-tick:hover {
+  background-color: color-mix(in oklab, var(--md-sys-color-primary) 6%, transparent);
 }
 
 .timepicker-dial {
@@ -201,7 +199,11 @@ input[type=text].timepicker-input-minutes {
   opacity: 0.25;
 }
 
-.timepicker-canvas-bearing,
+.timepicker-canvas-bearing {
+  stroke: none;
+  fill: var(--md-sys-color-primary);
+}
+
 .timepicker-canvas-bg {
   stroke: none;
   fill: var(--md-sys-color-primary);
@@ -216,11 +218,6 @@ input[type=text].timepicker-input-minutes {
   justify-content: space-between;
 }
 
-.timepicker-clear,
-.timepicker-close {
-  padding: 0 20px;
-}
-
 .timepicker-clear {
   color: var(--md-sys-color-error);
 }
@@ -229,8 +226,13 @@ input[type=text].timepicker-input-minutes {
   color: var(--md-sys-color-primary);
 }
 
+.timepicker-clear,
+.timepicker-close {
+  padding: 0 20px;
+}
+
 /* Media Queries */
-@media #{$large-and-up} {
+@include bp-up("large") {
   .timepicker-container {
     width: auto;
     max-width: 620px;
@@ -265,27 +267,25 @@ input[type=text].timepicker-input-minutes {
     max-width: unset;
   }
 
-  .timepicker-container {
-    .am-btn,
-    .pm-btn {
-      flex-grow: 1;
-      /*width: auto;*/
-      padding-left: calc(var(--btn-padding) / .565);
-      padding-right: calc(var(--btn-padding) / .565);
-      border-radius: var(--btn-border-radius);
-      border: 1px solid var(--md-sys-color-outline);
-    }
-
-    .am-btn {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    .pm-btn {
-      border-left: 0;
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-    }
+  .timepicker-container .am-btn,
+  .timepicker-container .pm-btn {
+    flex-grow: 1;
+    /*width: auto;*/
+    padding-left: calc(var(--btn-padding) / .565);
+    padding-right: calc(var(--btn-padding) / .565);
+    border-radius: var(--btn-border-radius);
+    border: 1px solid var(--md-sys-color-outline);
+  }
+
+  .timepicker-container .am-btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .timepicker-container .pm-btn {
+    border-left: 0;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
   }
 
   .timepicker-plate {