@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

package/src/scss/utilities/_elevation.scss

@@ -1,63 +0,0 @@
-// 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

@@ -1,50 +0,0 @@
-// 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

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

package/src/scss/utilities/_responsive.scss

@@ -1,62 +0,0 @@
-@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/_typography.scss

@@ -1,115 +0,0 @@
-@use "sass:math";
-@use '../foundation/variables' as *;
-
-// Typescale utility mixin
-@mixin typescale($role) {
-  font-family: var(--md-sys-typescale-#{$role}-font-family-name);
-  font-style: var(--md-sys-typescale-#{$role}-font-family-style);
-  font-weight: var(--md-sys-typescale-#{$role}-font-weight);
-  font-size: var(--md-sys-typescale-#{$role}-font-size);
-  letter-spacing: var(--md-sys-typescale-#{$role}-letter-spacing);
-  line-height: var(--md-sys-typescale-#{$role}-line-height);
-}
-
-// ===== Standard Typescale Classes =====
-
-.display-large { @include typescale(display-large); }
-.display-medium { @include typescale(display-medium); }
-.display-small { @include typescale(display-small); }
-
-.headline-large { @include typescale(headline-large); }
-.headline-medium { @include typescale(headline-medium); }
-.headline-small { @include typescale(headline-small); }
-
-.title-large { @include typescale(title-large); }
-.title-medium { @include typescale(title-medium); }
-.title-small { @include typescale(title-small); }
-
-.body-large { @include typescale(body-large); }
-.body-medium { @include typescale(body-medium); }
-.body-small { @include typescale(body-small); }
-
-.label-large { @include typescale(label-large); }
-.label-medium { @include typescale(label-medium); }
-.label-small { @include typescale(label-small); }
-
-// ===== Emphasized Typescale Classes =====
-
-.emphasized-display-large { @include typescale(emphasized-display-large); }
-.emphasized-display-medium { @include typescale(emphasized-display-medium); }
-.emphasized-display-small { @include typescale(emphasized-display-small); }
-
-.emphasized-headline-large { @include typescale(emphasized-headline-large); }
-.emphasized-headline-medium { @include typescale(emphasized-headline-medium); }
-.emphasized-headline-small { @include typescale(emphasized-headline-small); }
-
-.emphasized-title-large { @include typescale(emphasized-title-large); }
-.emphasized-title-medium { @include typescale(emphasized-title-medium); }
-.emphasized-title-small { @include typescale(emphasized-title-small); }
-
-.emphasized-body-large { @include typescale(emphasized-body-large); }
-.emphasized-body-medium { @include typescale(emphasized-body-medium); }
-.emphasized-body-small { @include typescale(emphasized-body-small); }
-
-.emphasized-label-large { @include typescale(emphasized-label-large); }
-.emphasized-label-medium { @include typescale(emphasized-label-medium); }
-.emphasized-label-small { @include typescale(emphasized-label-small); }
-
-// ===== Base Typography =====
-
-a {
-  text-decoration: none;
-}
-
-html {
-  font-family: var(--md-ref-typeface-plain, $font-stack);
-  font-weight: normal;
-  color: $text-color;
-
-  @media only screen and (min-width: 0) {
-    font-size: 14px;
-  }
-
-  @media only screen and (min-width: $medium-screen-up) {
-    font-size: 14.5px;
-  }
-
-  @media only screen and (min-width: $large-screen-up) {
-    font-size: 15px;
-  }
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 400;
-  line-height: 1.3;
-}
-
-// Map h1-h6 to M3 typescale roles
-h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
-h1 { @include typescale(display-large); margin: 0.7em 0 0.4em 0; }
-h2 { @include typescale(display-medium); margin: 0.7em 0 0.4em 0; }
-h3 { @include typescale(display-small); margin: 0.7em 0 0.4em 0; }
-h4 { @include typescale(headline-large); margin: 0.7em 0 0.4em 0; }
-h5 { @include typescale(headline-medium); margin: 0.7em 0 0.4em 0; }
-h6 { @include typescale(headline-small); margin: 0.7em 0 0.4em 0; }
-
-// Text Styles
-em { font-style: italic; }
-strong { font-weight: 500; }
-small { font-size: 75%; }
-.light { font-weight: 300; }
-.thin { font-weight: 200; }
-
-.flow-text {
-  $i: 0;
-  @while $i <= $intervals {
-    @media only screen and (min-width : (360 + ($i * $interval-size))) {
-      font-size: 1.2rem * (1 + (.02 * $i));
-    }
-    $i: $i + 1;
-  }
-
-  @media only screen and (max-width: 360px) {
-    font-size: 1.2rem;
-  }
-}