@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

package/src/{scss/foundation → sass/base}/_normalize.scss

@@ -1,4 +1,32 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+@use "../abstracts" as *;
+
+/*! Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+// Trimmed to the project's support baseline: the last 5 Chrome and Firefox
+// versions. Every rule normalize carried whose own comment named IE, Edge
+// Legacy or Chrome 57- has been removed, because those corrections are for
+// engines that no longer run this stylesheet. What is left is the set that
+// still corrects live Chrome/Firefox/Safari behaviour.
+//
+// Removed, with normalize's stated reason:
+//   main { display: block }                 - "Render consistently in IE"
+//   a { background-color: transparent }     - "Remove gray background in IE 10"
+//   img { border-style: none }              - "Remove border in IE 10"
+//   abbr[title] { border-bottom: none }     - "Remove bottom border in Chrome 57-"
+//   button, input { overflow: visible }     - "Show the overflow in IE/Edge"
+//   textarea { overflow: auto }             - "Remove scrollbar in IE 10+"
+//   [type=checkbox], [type=radio] { ... }   - "box sizing / padding in IE 10"
+//   details { display: block }              - "Add display in Edge, IE 10+"
+//   template { display: none }              - "Add display in IE 10+"
+//   [hidden] { display: none }              - "Add display in IE 10" (UA stylesheets do this)
+//   ::-moz-focus-inner, :-moz-focusring     - pre-FF-50 focus ring; :focus-visible
+//                                             replaces it, see abstracts/_mixins.scss
+//   legend's display:table/max-width/       - "text wrapping in Edge and IE",
+//     white-space/box-sizing/color            "colour inheritance in IE"
+//
+// Also simplified: `font-family: monospace, monospace` was a workaround for the
+// generic-family font-size quirk, which the adjacent `font-size: 1em` already
+// handles; and abbr's doubled text-decoration dropped its non-dotted fallback.
 
 /* Document
    ========================================================================== */
@@ -24,14 +52,6 @@ body {
   margin: 0;
 }
 
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
-  display: block;
-}
-
 /**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
@@ -46,46 +66,33 @@ h1 {
    ========================================================================== */
 
 /**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
+ * Add the correct box sizing in Firefox. Needed because base/_global.scss sets
+ * `box-sizing: border-box` globally, which would collapse a 0-height `hr`.
  */
 
 hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
+  box-sizing: content-box;
+  height: 0;
 }
 
 /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
+ * Correct the inheritance and scaling of font size in all browsers.
  */
 
 pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
+  font-family: monospace;
+  font-size: 1em;
 }
 
 /* Text-level semantics
    ========================================================================== */
 
 /**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ * Add the correct text decoration in Chrome, Edge, Opera, and Safari.
  */
 
 abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
+  text-decoration: underline dotted;
 }
 
 /**
@@ -98,15 +105,14 @@ strong {
 }
 
 /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
+ * Correct the inheritance and scaling of font size in all browsers.
  */
 
 code,
 kbd,
 samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
+  font-family: monospace;
+  font-size: 1em;
 }
 
 /**
@@ -138,17 +144,6 @@ sup {
   top: -0.5em;
 }
 
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10.
- */
-
-img {
-  border-style: none;
-}
-
 /* Forms
    ========================================================================== */
 
@@ -169,27 +164,17 @@ textarea {
 }
 
 /**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
+ * Remove the inheritance of text transform in Firefox.
  */
 
 button,
-select { /* 1 */
+select {
   text-transform: none;
 }
 
 /**
  * Correct the inability to style clickable types in iOS and Safari.
+ * Kept prefixed: this is a WebKit correction, and Safari is what needs it.
  */
 
 button,
@@ -200,28 +185,14 @@ button,
 }
 
 /**
- * Remove the inner border and padding in Firefox.
+ * Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
  */
 
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
+legend {
   padding: 0;
 }
 
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 /**
  * Correct the padding in Firefox.
  */
@@ -230,22 +201,6 @@ fieldset {
   padding: 0.35em 0.75em 0.625em;
 }
 
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
 /**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
@@ -254,25 +209,6 @@ progress {
   vertical-align: baseline;
 }
 
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
 /**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
@@ -303,9 +239,12 @@ textarea {
 /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
+ *
+ * `::file-selector-button` is the standardised name (Chrome 89+, Firefox 82+);
+ * the `::-webkit-file-upload-button` alias it replaced is gone.
  */
 
-::-webkit-file-upload-button {
+::file-selector-button {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
 }
@@ -313,14 +252,6 @@ textarea {
 /* Interactive
    ========================================================================== */
 
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
-  display: block;
-}
-
 /*
  * Add the correct display in all browsers.
  */
@@ -328,22 +259,3 @@ details {
 summary {
   display: list-item;
 }
-
-/* Misc
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
-  display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
-  display: none;
-}

package/src/sass/base/_typography.scss

@@ -0,0 +1,90 @@
+@use "sass:math";
+@use "../abstracts" as *;
+
+// Semantic type. Headings, paragraphs, and small print consume the M3
+// type scale directly so a page does not need .display-large / .body-medium
+// unless it wants a role the element does not imply.
+//
+//   h1 display-small     h2 headline-large    h3 headline-medium
+//   h4 headline-small    h5 title-large       h6 title-medium
+//   p  body-large        small / figcaption   body-small
+//   body                  body-medium (matches the 14px root)
+//
+// Display-large / display-medium stay as utility classes — they are too
+// large for a default <h1>. Component slots (app bar, card, dialog) set
+// their own roles and win on specificity.
+
+html {
+  font-family: $font-stack;
+  font-weight: var(--md-sys-typescale-body-medium-font-weight);
+  color: $text-color;
+  font-size: $root-font-size;
+
+  // Deliberately still a two-step ladder rather than a fluid clamp(): the root
+  // font size is the basis of every rem in the sheet, so making it continuous
+  // would move every computed length at every viewport width.
+  @include bp-up("large") {
+    font-size: 14.5px;
+  }
+
+  @include bp-up("xlarge") {
+    font-size: 15px;
+  }
+}
+
+body {
+  @include typescale("body-medium");
+  font-family: $font-stack;
+}
+
+h1 { @include typescale("display-small"); }
+h2 { @include typescale("headline-large"); }
+h3 { @include typescale("headline-medium"); }
+h4 { @include typescale("headline-small"); }
+h5 { @include typescale("title-large"); }
+h6 { @include typescale("title-medium"); }
+
+h1, h2, h3 {
+  margin: 0 0 0.4em;
+}
+
+h4, h5, h6 {
+  margin: 0 0 0.35em;
+}
+
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+  font-weight: inherit;
+  color: inherit;
+}
+
+p {
+  @include typescale("body-large");
+  font-family: $font-stack;
+  margin: 0 0 1em;
+}
+
+small,
+figcaption {
+  @include typescale("body-small");
+  font-family: $font-stack;
+}
+
+em { font-style: italic; }
+strong, b { font-weight: 500; }
+
+// Flow text: font-size scales with the viewport between two bounds.
+//
+// This was a @while loop emitting 21 media queries, stepping the size every
+// 30px of viewport width from 360px to 960px. clamp() expresses the same line
+// as one declaration - and continuously, so the type no longer jumps.
+//
+// The whole fluid range sits below the "large" breakpoint, so 1rem is
+// $root-font-size throughout it and the conversion below is exact.
+$_flow-min-px: math.div($flow-text-min, 1rem) * $root-font-size;
+$_flow-max-px: math.div($flow-text-max, 1rem) * $root-font-size;
+$_flow-slope: math.div($_flow-max-px - $_flow-min-px, $flow-text-to - $flow-text-from);
+$_flow-intercept: math.div($_flow-min-px - ($_flow-slope * $flow-text-from), $root-font-size) * 1rem;
+
+.flow-text {
+  font-size: clamp(#{$flow-text-min}, #{$_flow-intercept} + #{$_flow-slope * 100}vw, #{$flow-text-max});
+}

package/src/sass/components/_badges.scss

@@ -0,0 +1,77 @@
+@use "../abstracts" as *;
+
+// TODO: Make better structure
+:root {
+  --bagde-height: 22px;
+}
+
+span.badge {
+  min-width: 3rem;
+  padding: 0 6px;
+  margin-left: 14px;
+  text-align: center;
+  font-size: 1rem;
+  line-height: var(--bagde-height);
+  height: var(--bagde-height);
+  color: var(--md-sys-color-on-surface-variant);
+  float: right;
+  box-sizing: border-box;
+
+  &.new {
+    font-weight: 300;
+    font-size: 0.8rem;
+    color:  var(--md-sys-color-on-primary);
+    background-color: var(--md-sys-color-primary);
+    border-radius: 2px;
+  }
+  &.new:after {
+    content: " new";
+  }
+
+  &[data-badge-caption]::after {
+    content: " " attr(data-badge-caption);
+  }
+}
+
+.active span.badge {
+  color: var(--md-sys-color-on-primary);
+}
+
+// Special cases
+
+header:has(> nav) nav a span.badge {
+  display: inline-block;
+  float: none;
+  margin-left: 4px;
+  line-height: var(--bagde-height);
+  height: var(--bagde-height);
+  -webkit-font-smoothing: auto;
+}
+
+// Line height centering
+.collection-item span.badge {
+  margin-top: calc(calc(1.5rem * 0.5) - calc(var(--bagde-height) * 0.5));
+}
+
+.collapsible span.badge {
+  margin-left: auto;
+
+  &.leading {
+    margin-right: 7px;
+    order: -1;
+  }
+}
+
+.collapsible .active span.badge:not(.new) {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.sidenav span.badge {
+  margin-top: calc(calc(var(--sidenav-line-height) * 0.5) - calc(22px * 0.5));
+}
+
+table span.badge {
+  display: inline-block;
+  float: none;
+  margin-left: auto;
+}

package/src/{scss → sass}/components/_breadcrumb.scss

@@ -1,3 +1,5 @@
+@use "../abstracts" as *;
+
 .breadcrumb-wrapper {
   display: flex;
   align-items: center;