@expressivecss/expressive 0.1.0-alpha.3

package/src/scss/layout/_grid.scss

@@ -0,0 +1,172 @@
+@use "sass:math";
+@use '../foundation/variables' as *;
+
+.container {
+  margin: 0 auto;
+  max-width: 1280px;
+  width: 90%;
+}
+
+@media #{$medium-and-up} {
+  .container {
+    width: 85%;
+  }
+}
+
+@media #{$large-and-up} {
+  .container {
+    width: 70%;
+  }
+}
+
+.section {
+  padding: 1rem 0;
+}
+
+// Mixins to eliminate code repetition
+@mixin reset-offset {
+  margin-left: auto;
+  left: auto;
+  right: auto;
+}
+
+@mixin grid-classes($size, $i, $perc) {
+  &.offset-#{$size}#{$i} {
+    margin-left: $perc;
+  }
+  &.pull-#{$size}#{$i} {
+    right: $perc;
+  }
+  &.push-#{$size}#{$i} {
+    left: $perc;
+  }
+}
+
+body {
+  --gap-size: 1.5rem; // default
+}
+
+.row {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: var(--gap-size);
+
+  //--- S
+  .s1  { grid-column: auto / span 1; }
+  .s2  { grid-column: auto / span 2; }
+  .s3  { grid-column: auto / span 3; }
+  .s4  { grid-column: auto / span 4; }
+  .s5  { grid-column: auto / span 5; }
+  .s6  { grid-column: auto / span 6; }
+  .s7  { grid-column: auto / span 7; }
+  .s8  { grid-column: auto / span 8; }
+  .s9  { grid-column: auto / span 9; }
+  .s10 { grid-column: auto / span 10; }
+  .s11 { grid-column: auto / span 11; }
+  .s12 { grid-column: auto / span 12; }
+
+  .offset-s1 { grid-column-start:  3; }
+  .offset-s2 { grid-column-start:  2; }
+  .offset-s3 { grid-column-start:  4; }
+  .offset-s4 { grid-column-start:  5; }
+  .offset-s5 { grid-column-start:  6; }
+  .offset-s6 { grid-column-start:  7; }
+  .offset-s7 { grid-column-start:  8; }
+  .offset-s8 { grid-column-start:  9; }
+  .offset-s9 { grid-column-start: 10; }
+  .offset-s10 { grid-column-start: 11; }
+  .offset-s11 { grid-column-start: 12; }
+
+  //--- M
+  @media #{$medium-and-up} {
+    .m1  { grid-column: auto / span 1; }
+    .m2  { grid-column: auto / span 2; }
+    .m3  { grid-column: auto / span 3; }
+    .m4  { grid-column: auto / span 4; }
+    .m5  { grid-column: auto / span 5; }
+    .m6  { grid-column: auto / span 6; }
+    .m7  { grid-column: auto / span 7; }
+    .m8  { grid-column: auto / span 8; }
+    .m9  { grid-column: auto / span 9; }
+    .m10 { grid-column: auto / span 10; }
+    .m11 { grid-column: auto / span 11; }
+    .m12 { grid-column: auto / span 12; }
+  
+    .offset-m1 { grid-column-start:  2; }
+    .offset-m2 { grid-column-start:  3; }
+    .offset-m3 { grid-column-start:  4; }
+    .offset-m4 { grid-column-start:  5; }
+    .offset-m5 { grid-column-start:  6; }
+    .offset-m6 { grid-column-start:  7; }
+    .offset-m7 { grid-column-start:  8; }
+    .offset-m8 { grid-column-start:  9; }
+    .offset-m9 { grid-column-start: 10; }
+    .offset-m10 { grid-column-start: 11; }
+    .offset-m11 { grid-column-start: 12; }
+  }
+
+  //--- L
+  @media #{$large-and-up} {
+    .l1  { grid-column: auto / span 1; }
+    .l2  { grid-column: auto / span 2; }
+    .l3  { grid-column: auto / span 3; }
+    .l4  { grid-column: auto / span 4; }
+    .l5  { grid-column: auto / span 5; }
+    .l6  { grid-column: auto / span 6; }
+    .l7  { grid-column: auto / span 7; }
+    .l8  { grid-column: auto / span 8; }
+    .l9  { grid-column: auto / span 9; }
+    .l10 { grid-column: auto / span 10; }
+    .l11 { grid-column: auto / span 11; }
+    .l12 { grid-column: auto / span 12; }
+  
+    .offset-l1  { grid-column-start:  2; }
+    .offset-l2  { grid-column-start:  3; }
+    .offset-l3  { grid-column-start:  4; }
+    .offset-l4  { grid-column-start:  5; }
+    .offset-l5  { grid-column-start:  6; }
+    .offset-l6  { grid-column-start:  7; }
+    .offset-l7  { grid-column-start:  8; }
+    .offset-l8  { grid-column-start:  9; }
+    .offset-l9  { grid-column-start: 10; }
+    .offset-l10 { grid-column-start: 11; }
+    .offset-l11 { grid-column-start: 12; }
+  }
+
+  //--- XL
+  @media #{$extra-large-and-up} {
+    .xl1  { grid-column: auto / span 1; }
+    .xl2  { grid-column: auto / span 2; }
+    .xl3  { grid-column: auto / span 3; }
+    .xl4  { grid-column: auto / span 4; }
+    .xl5  { grid-column: auto / span 5; }
+    .xl6  { grid-column: auto / span 6; }
+    .xl7  { grid-column: auto / span 7; }
+    .xl8  { grid-column: auto / span 8; }
+    .xl9  { grid-column: auto / span 9; }
+    .xl10 { grid-column: auto / span 10; }
+    .xl11 { grid-column: auto / span 11; }
+    .xl12 { grid-column: auto / span 12; }
+  
+    .offset-xl1 { grid-column-start:  2; }
+    .offset-xl2 { grid-column-start:  3; }
+    .offset-xl3 { grid-column-start:  4; }
+    .offset-xl4 { grid-column-start:  5; }
+    .offset-xl5 { grid-column-start:  6; }
+    .offset-xl6 { grid-column-start:  7; }
+    .offset-xl7 { grid-column-start:  8; }
+    .offset-xl8 { grid-column-start:  9; }
+    .offset-xl9 { grid-column-start: 10; }
+    .offset-xl10 { grid-column-start: 11; }
+    .offset-xl11 { grid-column-start: 12; }
+  }
+
+}
+
+//--- Gap
+.g-0 { gap: 0; }
+.g-1 { gap: calc(0.25 * var(--gap-size)); }
+.g-2 { gap: calc(0.5 * var(--gap-size));  }
+.g-3 { gap: calc(1 * var(--gap-size));  }
+.g-4 { gap: calc(1.5 * var(--gap-size)); }
+.g-5 { gap: calc(3 * var(--gap-size)); }

package/src/scss/layout/_index.scss

@@ -0,0 +1,3 @@
+@forward 'grid';
+@forward 'footer';
+@forward 'table';

package/src/scss/layout/_table.scss

@@ -0,0 +1,119 @@
+@use '../foundation/variables' as *;
+
+// Tables
+table, th, td {
+  border: none;
+}
+
+table {
+  width: 100%;
+  display: table;
+  border-collapse: collapse;
+  border-spacing: 0;
+
+  &.striped {
+    tr {
+      border-bottom: none;
+    }
+    tbody > tr:nth-child(odd) {
+      background-color: rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  &.highlight > tbody > tr {
+    transition: background-color .25s ease;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  thead {
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  &.centered {
+    thead tr th, tbody tr td {
+      text-align: center;
+    }
+  }
+}
+
+tr {
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+
+td, th {
+  padding: 15px 5px;
+  display: table-cell;
+  text-align: left;
+  vertical-align: middle;
+  border-radius: 0;
+}
+
+// Responsive Table
+@media #{$medium-and-down} {
+
+  table.responsive-table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    display: block;
+    position: relative;
+
+    td:empty:before {
+      content: '\00a0';
+    }
+    th,
+    td {
+      margin: 0;
+      vertical-align: top;
+    }
+    th {
+      text-align: left;
+    }
+    thead {
+      display: block;
+      float: left;
+
+      tr {
+        display: block;
+        padding: 0 10px 0 0;
+
+        th::before {
+          content: "\00a0";
+        }
+      }
+    }
+    tbody {
+      display: block;
+      width: auto;
+      position: relative;
+      overflow-x: auto;
+      white-space: nowrap;
+
+      tr {
+        display: inline-block;
+        vertical-align: top;
+      }
+    }
+    th {
+      display: block;
+      text-align: right;
+    }
+    td {
+      display: block;
+      min-height: 1.25em;
+      text-align: left;
+    }
+    tr {
+      border-bottom: none;
+      padding: 0 10px;
+    }
+    /* sort out borders */
+    thead {
+      border: 0;
+      border-right: 1px solid var(--md-sys-color-outline-variant);
+    }
+  }
+}

package/src/scss/utilities/_a11y.scss

@@ -0,0 +1,77 @@
+// Accessibility Utilities
+
+// Screen reader only — visually hidden but accessible
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// Undo sr-only
+.not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+// Explicit focus ring
+.focus-ring {
+  &:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+}
+
+// Skip to content link
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 16px;
+  z-index: 10000;
+  padding: 8px 16px;
+  background-color: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  border-radius: var(--md-sys-shape-corner-small, 8px);
+  box-shadow: var(--md-sys-elevation-level2, 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15));
+  text-decoration: none;
+  font-weight: 500;
+
+  &:focus {
+    top: 16px;
+  }
+}
+
+// High contrast mode support
+@media (forced-colors: active) {
+  .elevation-1,
+  .elevation-2,
+  .elevation-3,
+  .elevation-4,
+  .elevation-5,
+  .z-depth-1,
+  .z-depth-2,
+  .z-depth-3,
+  .z-depth-4,
+  .z-depth-5 {
+    border: 1px solid CanvasText;
+  }
+}
+
+// Prefer more contrast
+@media (prefers-contrast: more) {
+  :root {
+    --md-sys-color-outline: var(--md-ref-palette-neutral-variant30);
+    --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant50);
+  }
+}

package/src/scss/utilities/_colors.scss

@@ -0,0 +1,74 @@
+.primary { background-color: var(--md-sys-color-primary); }
+.primary-text { color: var(--md-sys-color-primary); }
+.on-primary { background-color: var(--md-sys-color-on-primary); }
+.on-primary-text { color: var(--md-sys-color-on-primary); }
+.primary-container { background-color: var(--md-sys-color-primary-container); }
+.primary-container-text { color: var(--md-sys-color-primary-container); }
+.on-primary-container { background-color: var(--md-sys-color-on-primary-container); }
+.on-primary-container-text { color: var(--md-sys-color-on-primary-container); }
+
+.secondary { background-color: var(--md-sys-color-secondary); }
+.secondary-text { color: var(--md-sys-color-secondary); }
+.on-secondary { background-color: var(--md-sys-color-on-secondary); }
+.on-secondary-text { color: var(--md-sys-color-on-secondary); }
+.secondary-container { background-color: var(--md-sys-color-secondary-container); }
+.secondary-container-text { color: var(--md-sys-color-secondary-container); }
+.on-secondary-container { background-color: var(--md-sys-color-on-secondary-container); }
+.on-secondary-container-text { color: var(--md-sys-color-on-secondary-container); }
+
+.tertiary { background-color: var(--md-sys-color-tertiary); }
+.tertiary-text { color: var(--md-sys-color-tertiary); }
+.on-tertiary { background-color: var(--md-sys-color-on-tertiary); }
+.on-tertiary-text { color: var(--md-sys-color-on-tertiary); }
+.tertiary-container { background-color: var(--md-sys-color-tertiary-container); }
+.tertiary-container-text { color: var(--md-sys-color-tertiary-container); }
+.on-tertiary-container { background-color: var(--md-sys-color-on-tertiary-container); }
+.on-tertiary-container-text { color: var(--md-sys-color-on-tertiary-container); }
+
+.error { background-color: var(--md-sys-color-error); }
+.error-text { color: var(--md-sys-color-error); }
+.on-error { background-color: var(--md-sys-color-on-error); }
+.on-error-text { color: var(--md-sys-color-on-error); }
+.error-container { background-color: var(--md-sys-color-error-container); }
+.error-container-text { color: var(--md-sys-color-error-container); }
+.on-error-container { background-color: var(--md-sys-color-on-error-container); }
+.on-error-container-text { color: var(--md-sys-color-on-error-container); }
+
+.background { background-color: var(--md-sys-color-background); }
+.background-text { color: var(--md-sys-color-background); }
+.on-background { background-color: var(--md-sys-color-on-background); }
+.on-background-text { color: var(--md-sys-color-on-background); }
+
+.surface { background-color: var(--md-sys-color-surface); }
+.surface-text { color: var(--md-sys-color-surface); }
+.on-surface { background-color: var(--md-sys-color-on-surface); }
+.on-surface-text { color: var(--md-sys-color-on-surface); }
+
+.surface-variant { background-color: var(--md-sys-color-surface-variant); }
+.surface-variant-text { color: var(--md-sys-color-surface-variant); }
+.on-surface-variant { background-color: var(--md-sys-color-on-surface-variant); }
+.on-surface-variant-text { color: var(--md-sys-color-on-surface-variant); }
+
+.outline { background-color: var(--md-sys-color-outline); }
+.outline-text { color: var(--md-sys-color-outline); }
+
+.inverse-on-surface { background-color: var(--md-sys-color-inverse-on-surface); }
+.inverse-on-surface-text { color: var(--md-sys-color-inverse-on-surface); }
+
+.inverse-surface { background-color: var(--md-sys-color-inverse-surface); }
+.inverse-surface-text { color: var(--md-sys-color-inverse-surface); }
+
+.inverse-primary { background-color: var(--md-sys-color-inverse-primary); }
+.inverse-primary-text { color: var(--md-sys-color-inverse-primary); }
+
+.shadow { background-color: var(--md-sys-color-shadow); }
+.shadow-text { color: var(--md-sys-color-shadow); }
+
+.surface-tint { background-color: var(--md-sys-color-surface-tint); }
+.surface-tint-text { color: var(--md-sys-color-surface-tint); }
+
+.outline-variant { background-color: var(--md-sys-color-outline-variant); }
+.outline-variant-text { color: var(--md-sys-color-outline-variant); }
+
+.scrim { background-color: var(--md-sys-color-scrim); }
+.scrim-text { color: var(--md-sys-color-scrim); }

package/src/scss/utilities/_elevation.scss

@@ -0,0 +1,63 @@
+// M3 Elevation System
+// Combines shadow elevation with tonal surface tint.
+
+// M3 Elevation classes (new canonical names)
+.elevation-0 {
+  box-shadow: var(--md-sys-elevation-level0, none);
+}
+
+.elevation-1 {
+  box-shadow: var(--md-sys-elevation-level1, 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15));
+}
+
+.elevation-2 {
+  box-shadow: var(--md-sys-elevation-level2, 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15));
+}
+
+.elevation-3 {
+  box-shadow: var(--md-sys-elevation-level3, 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15));
+}
+
+.elevation-4 {
+  box-shadow: var(--md-sys-elevation-level4, 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15));
+}
+
+.elevation-5 {
+  box-shadow: var(--md-sys-elevation-level5, 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15));
+}
+
+// Deprecated aliases — will be removed in next major version
+.z-depth-0 {
+  box-shadow: none !important;
+}
+
+.z-depth-1 {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+}
+
+.z-depth-1-half {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+}
+
+.z-depth-2 {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+}
+
+.z-depth-3 {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+}
+
+.z-depth-4 {
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
+}
+
+.z-depth-5 {
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
+}
+
+.hoverable {
+  transition: box-shadow var(--md-sys-motion-duration-medium1, 250ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  &:hover {
+    box-shadow: var(--md-sys-elevation-level3, 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15));
+  }
+}

package/src/scss/utilities/_helpers.scss

@@ -0,0 +1,50 @@
+// Positioning
+.valign-wrapper { display: flex; align-items: center; }
+
+.clearfix { clear: both; }
+
+// Dividers
+.divider {
+  height: 1px;
+  overflow: hidden;
+  background-color: var(--md-sys-color-outline-variant);
+}
+
+// Pushpin
+.pin-top, .pin-bottom {
+  position: relative;
+}
+
+.pinned {
+  position: fixed !important;
+}
+
+/*******************
+  Utility Classes
+*******************/
+
+.hide { display: none !important; }
+
+// Text Align
+.left-align { text-align: left; }
+.right-align { text-align: right }
+.center, .center-align { text-align: center; }
+
+// TODO: Remove this
+.left { float: left !important; }
+.right { float: right !important; }
+
+// No Text Select
+.no-select { user-select: none; }
+.circle { border-radius: 50%; }
+.center-block { display: block; margin-left: auto; margin-right: auto; }
+.truncate { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.no-padding { padding: 0 !important; }
+
+// Docked display
+.display-docked {
+  position: absolute;
+  opacity: 0;
+  z-index: 9999;
+  visibility: hidden;
+}

package/src/scss/utilities/_index.scss

@@ -0,0 +1,7 @@
+@forward 'colors';
+@forward 'typography';
+@forward 'elevation';
+@forward 'spacing';
+@forward 'responsive';
+@forward 'helpers';
+@forward 'a11y';

package/src/scss/utilities/_responsive.scss

@@ -0,0 +1,62 @@
+@use '../foundation/variables' as *;
+
+/*********************
+  Media Query Classes
+**********************/
+.hide-on-small-only, .hide-on-small-and-down {
+  @media #{$small-and-down} { display: none !important; }
+}
+
+.hide-on-med-and-down {
+  @media #{$medium-and-down} { display: none !important; }
+}
+
+.hide-on-med-and-up {
+  @media #{$medium-and-up} { display: none !important; }
+}
+
+.hide-on-med-only {
+  @media only screen and (min-width: $small-screen-up) and (max-width: $medium-screen) {
+    display: none !important;
+  }
+}
+
+.hide-on-large-only {
+  @media #{$large-and-up} { display: none !important; }
+}
+
+.hide-on-extra-large-only {
+  @media #{$extra-large-and-up} { display: none !important; }
+}
+
+.show-on-extra-large {
+  @media #{$extra-large-and-up} { display: block !important; }
+}
+
+.show-on-large {
+  @media #{$large-and-up} { display: block !important; }
+}
+
+.show-on-medium {
+  @media only screen and (min-width: $small-screen-up) and (max-width: $medium-screen) {
+    display: block !important;
+  }
+}
+
+.show-on-small {
+  @media #{$small-and-down} { display: block !important; }
+}
+
+.show-on-medium-and-up {
+  @media #{$medium-and-up} { display: block !important; }
+}
+
+.show-on-medium-and-down {
+  @media #{$medium-and-down} { display: block !important; }
+}
+
+
+// Center text on mobile
+.center-on-small-only {
+  @media #{$small-and-down} { text-align: center; }
+}

package/src/scss/utilities/_spacing.scss

@@ -0,0 +1,38 @@
+/**************************
+  Utility Spacing Classes
+**************************/
+
+$spacing-shortcuts: ("margin": "m", "padding": "p") !default;
+$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
+$spacing-horizontal: "x" !default;
+$spacing-vertical: "y" !default;
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default;
+
+@each $property, $shortcut in $spacing-shortcuts{
+  @each $name, $value in $spacing-values{
+    // All direction spacing
+    .#{$shortcut}-#{$name}{
+      #{$property}: $value !important;
+    }
+    // (t, b, r, l) spacing
+    @each $direction, $suffix in $spacing-directions{
+      .#{$shortcut}#{$suffix}-#{$name}{
+        #{$property}-#{$direction}: $value !important
+      }
+    }
+    // x spacing
+    @if $spacing-horizontal != null{
+       .#{$shortcut}#{$spacing-horizontal}-#{$name}{
+         #{$property}-left: $value !important;
+         #{$property}-right: $value !important;
+       }
+    }
+    // y spacing
+    @if $spacing-vertical != null{
+      .#{$shortcut}#{$spacing-vertical}-#{$name}{
+        #{$property}-top: $value !important;
+        #{$property}-bottom: $value !important;
+      }
+    }
+  }
+}