@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

package/src/sass/abstracts/_breakpoints.scss

@@ -0,0 +1,69 @@
+@use "sass:map";
+@use "sass:list";
+
+// Breakpoints, as media-query range syntax.
+//
+// The old form built a query by interpolating a whole string:
+//
+//   $medium-and-down: "only screen and (max-width : 992.99px)";
+//   @media #{$medium-and-down} { ... }
+//
+// which needed the `.99` because `max-width: 993px` and `min-width: 993px`
+// both match at exactly 993px. Range syntax has an exclusive comparator, so
+// the fractional values are gone and the boundary is stated once:
+//
+//   @include bp-down("large") { ... }   ->  @media (width < 993px)
+//
+// `only screen` went with them: it existed to hide queries from Netscape 4
+// and IE, and `screen` alone excludes print anyway - which these rules never
+// wanted to do, since a hidden element should stay hidden on paper.
+
+$breakpoints: (
+  "small": 601px,   // phone      -> tablet
+  "large": 993px,   // tablet     -> desktop
+  "xlarge": 1201px, // desktop    -> wide desktop
+) !default;
+
+@function breakpoint($name) {
+  @if not map.has-key($breakpoints, $name) {
+    @error "Unknown breakpoint `#{$name}`. Available: #{map.keys($breakpoints)}.";
+  }
+  @return map.get($breakpoints, $name);
+}
+
+// At or above a breakpoint.
+@mixin bp-up($name) {
+  @media (width >= #{breakpoint($name)}) {
+    @content;
+  }
+}
+
+// Strictly below a breakpoint.
+@mixin bp-down($name) {
+  @media (width < #{breakpoint($name)}) {
+    @content;
+  }
+}
+
+// From one breakpoint up to (not including) another.
+@mixin bp-between($from, $to) {
+  @media (#{breakpoint($from)} <= width < #{breakpoint($to)}) {
+    @content;
+  }
+}
+
+// Deprecated: the interpolated-string breakpoints.
+//
+// Kept so a downstream `@media #{$medium-and-up}` keeps compiling - the
+// framework itself no longer uses them. Values are now range syntax, so the
+// queries they produce match the mixins above exactly. Prefer the mixins.
+$small-screen-up: breakpoint("small") !default;
+$medium-screen-up: breakpoint("large") !default;
+$large-screen-up: breakpoint("xlarge") !default;
+
+$medium-and-up: "(width >= #{breakpoint('small')})" !default;
+$large-and-up: "(width >= #{breakpoint('large')})" !default;
+$extra-large-and-up: "(width >= #{breakpoint('xlarge')})" !default;
+$small-and-down: "(width < #{breakpoint('small')})" !default;
+$medium-and-down: "(width < #{breakpoint('large')})" !default;
+$medium-only: "(#{breakpoint('small')} <= width < #{breakpoint('large')})" !default;

package/src/sass/abstracts/_elevation.scss

@@ -0,0 +1,34 @@
+@use "sass:map";
+
+// Elevation shadows.
+//
+// These are a mixin rather than `@extend .z-depth-N` on purpose: `@extend`
+// only resolves if the extending partial loads the module that defines the
+// class, which forced every component to `@use` a CSS-emitting file and let
+// the dependency graph - not expressive.scss - decide the output order.
+// The `.z-depth-N` classes in base/_global.scss are generated from this map,
+// so the class list and the mixin can never drift apart.
+
+$elevations: (
+  "0": none,
+  "1": (0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)),
+  "1-half": (0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2)),
+  "2": (0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3)),
+  "3": (0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2)),
+  "4": (0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2)),
+  "5": (0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2))
+) !default;
+
+@mixin z-depth($level) {
+  $key: "#{$level}";
+  @if not map.has-key($elevations, $key) {
+    @error "Unknown elevation `#{$level}`. Available: #{map.keys($elevations)}.";
+  }
+  $shadow: map.get($elevations, $key);
+  @if $shadow == none {
+    // Level 0 stays !important: it is used to cancel a shadow a component set.
+    box-shadow: none !important;
+  } @else {
+    box-shadow: $shadow;
+  }
+}

package/src/sass/abstracts/_index.scss

@@ -0,0 +1,7 @@
+// Everything a partial needs at compile time, and nothing that emits CSS.
+// Partials load the whole layer with a single line: @use "../abstracts" as *;
+
+@forward "elevation";    // z-depth() mixin
+@forward "breakpoints";  // $breakpoints map + bp-up()/bp-down()/bp-between()
+@forward "variables";    // Sass-time knobs: grid, font sizes, flow text
+@forward "mixins";       // btn-*, focus-visible

package/src/sass/abstracts/_mixins.scss

@@ -0,0 +1,171 @@
+@use "./elevation" as *;
+@use "./variables" as *;
+
+
+// Common-button geometry. M3 default is 40dp, label-large, 20dp corners
+// (a stadium), 24dp inset, 8dp icon gap. Variants only change color/elevation.
+@mixin btn(
+  $height: var(--md-comp-filled-button-container-height, 40px),
+  $border-radius: var(--md-comp-filled-button-container-shape, 20px),
+  $padding-left: var(--md-comp-filled-button-leading-space, 24px),
+  $padding-right: var(--md-comp-filled-button-trailing-space, 24px),
+  $font-size: var(--md-sys-typescale-label-large-font-size),
+) {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--md-comp-filled-button-icon-label-space, 8px);
+  height: $height;
+  padding-left: $padding-left;
+  padding-right: $padding-right;
+  border: none;
+  border-radius: $border-radius;
+  font-family: var(--md-sys-typescale-label-large-font-family-name);
+  font-size: $font-size;
+  font-weight: var(--md-sys-typescale-label-large-font-weight);
+  line-height: var(--md-sys-typescale-label-large-line-height);
+  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+  user-select: none;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color .2s ease-out, box-shadow .2s ease-out;
+}
+
+// State layers are 8% hover / 10% focus+press of the on-color, mixed in oklab
+// onto the container. Filled and tonal have no elevation.
+
+@mixin btn-filled {
+  color: var(--md-comp-filled-button-label-text-color, var(--md-sys-color-on-primary));
+  background-color: var(--md-comp-filled-button-container-color, var(--md-sys-color-primary));
+
+  &:hover {
+    background-color: color-mix(
+      in oklab,
+      var(--md-sys-color-on-primary) 8%,
+      var(--md-sys-color-primary)
+    );
+  }
+
+  &:active,
+  &:focus {
+    background-color: color-mix(
+      in oklab,
+      var(--md-sys-color-on-primary) 10%,
+      var(--md-sys-color-primary)
+    );
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-tonal {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+
+  &:hover {
+    background-color: color-mix(
+      in oklab,
+      var(--md-sys-color-on-secondary-container) 8%,
+      var(--md-sys-color-secondary-container)
+    );
+  }
+
+  &:active,
+  &:focus {
+    background-color: color-mix(
+      in oklab,
+      var(--md-sys-color-on-secondary-container) 10%,
+      var(--md-sys-color-secondary-container)
+    );
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-elevated {
+  color: var(--md-sys-color-primary);
+  background-color: var(--md-sys-color-surface);
+  @include z-depth("1");
+
+  &:hover {
+    @include z-depth("2");
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface));
+  }
+
+  &:active,
+  &:focus {
+    @include z-depth("1");
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, var(--md-sys-color-surface));
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-outlined {
+  background-color: transparent;
+  color: var(--md-sys-color-primary);
+  border: 1px solid var(--md-sys-color-outline);
+
+  &:hover {
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+  }
+
+  &:active,
+  &:focus {
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-flat {
+  @include z-depth("0");
+  color: var(--md-sys-color-primary);
+  background-color: transparent;
+  border-color: transparent;
+
+  &:hover {
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+  }
+
+  &:active,
+  &:focus {
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-disabled {
+  @include z-depth("0");
+  color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
+  border-color: transparent;
+  pointer-events: none;
+  box-shadow: none;
+  cursor: default;
+}
+
+// Focus with Keyboard
+@mixin focus-visible {
+  &:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+}
+
+// M3 type role. Every property must name a token tokens/_reference.scss
+// actually defines — a missing var() drops the whole declaration.
+@mixin typescale($role) {
+  font-family: var(--md-sys-typescale-#{$role}-font-family-name), #{$font-stack};
+  font-size: var(--md-sys-typescale-#{$role}-font-size);
+  font-weight: var(--md-sys-typescale-#{$role}-font-weight);
+  line-height: var(--md-sys-typescale-#{$role}-line-height);
+  letter-spacing: var(--md-sys-typescale-#{$role}-letter-spacing);
+}
+

package/src/sass/abstracts/_variables.scss

@@ -0,0 +1,57 @@
+// TypeScale
+$md_sys_typescale_body-large_size: 16px;
+
+@use "sass:math";
+
+// Colors
+//
+// The 2014 Material palette ($colors + colorFunc()) is gone. It generated 532
+// utility classes - 18% of the compiled sheet - to express a design opinion
+// this framework does not hold, and the framework itself consumed exactly one
+// value from it: this link color. Everything now comes from --md-sys-color-*.
+$link-color: var(--md-sys-color-primary) !default;
+
+// Floating buttons
+$button-floating-background: var(--md-sys-color-secondary) !default;
+$button-floating-background-hover: var(--md-ref-palette-secondary70) !default;
+$button-floating-background-focus: var(--md-ref-palette-secondary80) !default;
+$button-floating-color: var(--md-sys-color-on-secondary) !default;
+$button-floating-size: 40px !default;
+$button-floating-radius: 16px !default;
+
+// Dropdown
+$dropdown-item-height: 50px !default;
+
+// Media query ranges now live in abstracts/_breakpoints.scss, which states
+// each boundary once and emits range syntax - see the note there about why
+// the 600.99px / 992.99px / 1200.99px values are gone.
+
+// Grid
+$num-cols: 12 !default;
+$gutter-width: 1.5rem !default;
+$element-top-margin: math.div($gutter-width, 3) !default;
+$element-bottom-margin: math.div($gutter-width * 2, 3) !default;
+
+// Typography
+$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
+$text-color: var(--md-sys-color-on-background) !default;
+
+// Base of the html font-size ladder in base/_typography.scss. Flow text is
+// derived from it, so the two cannot drift.
+$root-font-size: 14px !default;
+
+// Legacy rem heading ladder. Headings now consume --md-sys-typescale-*
+// (see base/_typography.scss). Kept so existing Sass overrides still compile.
+$h1-fontsize: 4.2rem !default;
+$h2-fontsize: 3.56rem !default;
+$h3-fontsize: 2.92rem !default;
+$h4-fontsize: 2.28rem !default;
+$h5-fontsize: 1.64rem !default;
+$h6-fontsize: 1.15rem !default;
+
+// Flow text: font-size interpolates between these two across the viewport
+// range below. This used to be a @while loop emitting 21 media queries.
+$flow-text-min: 1.2rem !default;
+$flow-text-max: 1.68rem !default;   // the old loop's ceiling: 1.2rem * (1 + .02 * 20)
+$flow-text-from: 360px !default;
+$flow-text-to: 960px !default;      // the old loop's last step: 360px + 20 * 30px

package/src/{scss/layout/_table.scss → sass/base/_global.scss}

@@ -1,4 +1,65 @@
-@use '../foundation/variables' as *;
+@use "../abstracts" as *;
+
+// Element-level defaults only: box-sizing, links, blockquotes, icons, tables.
+//
+// Helper classes belong in utilities/, and anything that serves a single widget
+// belongs in that widget's partial - nothing here should name a component.
+
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  background-color: var(--md-sys-color-background);
+  color: var(--md-sys-color-on-background);
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: $font-stack;
+}
+
+a {
+  color: $link-color;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
+}
+
+//  Blockquote
+blockquote { margin: 20px 0; padding-left: 1.5rem; border-left: 5px solid var(--md-sys-color-primary); }
+
+// Icon Styles
+i {
+  line-height: inherit;
+  &.left {
+    float: left;
+    margin-left: -8px;
+    // margin-right: 15px;
+  }
+  &.right {
+    float: right;
+    // margin-left: 15px;
+  }
+  &.tiny {
+    font-size: 1rem;
+  }
+  &.small {
+    font-size: 2rem;
+  }
+  &.medium {
+    font-size: 4rem;
+  }
+  &.large {
+    font-size: 6rem;
+  }
+}
 
 // Tables
 table, th, td {
@@ -52,7 +113,7 @@ td, th {
 }
 
 // Responsive Table
-@media #{$medium-and-down} {
+@include bp-down("large") {
 
   table.responsive-table {
     width: 100%;
@@ -117,3 +178,4 @@ td, th {
     }
   }
 }
+

package/src/{scss/layout → sass/base}/_grid.scss

@@ -1,5 +1,5 @@
 @use "sass:math";
-@use '../foundation/variables' as *;
+@use "../abstracts" as *;
 
 .container {
   margin: 0 auto;
@@ -7,13 +7,13 @@
   width: 90%;
 }
 
-@media #{$medium-and-up} {
+@include bp-up("small") {
   .container {
     width: 85%;
   }
 }
 
-@media #{$large-and-up} {
+@include bp-up("large") {
   .container {
     width: 70%;
   }
@@ -78,7 +78,7 @@ body {
   .offset-s11 { grid-column-start: 12; }
 
   //--- M
-  @media #{$medium-and-up} {
+  @include bp-up("small") {
     .m1  { grid-column: auto / span 1; }
     .m2  { grid-column: auto / span 2; }
     .m3  { grid-column: auto / span 3; }
@@ -106,7 +106,7 @@ body {
   }
 
   //--- L
-  @media #{$large-and-up} {
+  @include bp-up("large") {
     .l1  { grid-column: auto / span 1; }
     .l2  { grid-column: auto / span 2; }
     .l3  { grid-column: auto / span 3; }
@@ -134,7 +134,7 @@ body {
   }
 
   //--- XL
-  @media #{$extra-large-and-up} {
+  @include bp-up("xlarge") {
     .xl1  { grid-column: auto / span 1; }
     .xl2  { grid-column: auto / span 2; }
     .xl3  { grid-column: auto / span 3; }

package/src/sass/base/_index.scss

@@ -0,0 +1,6 @@
+// Element-level styling: no component classes live here.
+
+@forward "normalize";
+@forward "global";      // z-depth, spacing helpers, positioning, element defaults
+@forward "typography";
+@forward "grid";        // .container, .row, .s1-.s12