Layout utilities (#169)

* initial progress

* testing progress

* play with naming, utility classes

* more tweaking and testing

* progress on 12 column grid

* add layout index, start documenting

* documentation progress

* cleanup and doc progress

* more doc progress

* more progress

* final progress hurdle and cleanup

* refining and editing

* remove sandbox

* refactor extra utility classes

* layout index improvements

* change gap modifiers to utility classes

* change align modifiers to utility classes

* move layout examples above fold

* reduce demo markup

* use standard aspect ratio property for wa-frame

* change border-radius modifier to utility class

* rename wa-grid's 'min-inline-size' to 'min-column-size'

* clean up comments

* rename wa-align-* to wa-align-items-*

* break out style utilities from layout

* clean up

src/components/tooltip/tooltip.styles.ts

@@ -8,6 +8,7 @@ export default css`
     --padding: var(--wa-space-2xs) var(--wa-space-xs);
 
     display: inline-block;
+    position: absolute;
 
     /** These styles are added so we dont interfere in the DOM. */
   }

src/themes/applied.css

@@ -48,7 +48,7 @@ body {
 }
 
 /* Content flow */
-address,
+/* address,
 audio,
 blockquote,
 dd,
@@ -69,7 +69,7 @@ table,
 ul,
 video {
   margin: 0 0 var(--wa-space-xl) 0;
-}
+} */
 
 /* Headings & text */
 h1,

src/themes/layout.css

@@ -0,0 +1,132 @@
+:is(
+    [class*='wa-cluster'],
+    [class*='wa-flank'],
+    [class*='wa-frame'],
+    [class*='wa-grid'],
+    [class*='wa-stack'],
+    [class*='wa-split']
+  )
+  > * {
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+/* #region Cluster */
+[class*='wa-cluster'] {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--wa-space-m);
+  justify-content: flex-start;
+}
+/* #endregion */
+
+/* #region Flank */
+[class*='wa-flank'] {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--wa-space-m);
+
+  --content-percentage: initial;
+  --flank-size: initial;
+}
+
+[class*='wa-flank']:not([class*='\:end']) > :first-child,
+[class*='wa-flank'][class*='\:start'] > :first-child {
+  flex-basis: var(--flank-size, auto);
+  flex-grow: 1;
+}
+[class*='wa-flank']:not([class*='\:end']) > :last-child,
+[class*='wa-flank'][class*='\:start'] > :last-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: var(--content-percentage, 50%);
+}
+
+[class*='wa-flank'][class*='\:end'] > :last-child {
+  flex-basis: var(--flank-size, auto);
+  flex-grow: 1;
+}
+[class*='wa-flank'][class*='\:end'] > :first-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: var(--content-percentage, 50%);
+}
+/* #endregion */
+
+/* #region Frame */
+[class*='wa-frame'] {
+  display: flex;
+  align-items: center;
+  aspect-ratio: 1 / 1;
+  justify-content: center;
+  overflow: hidden;
+}
+
+[class*='wa-frame'] > img,
+[class*='wa-frame'] > video {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+[class*='wa-frame'][class*='\:square'] {
+  aspect-ratio: 1 / 1;
+}
+[class*='wa-frame'][class*='\:landscape'] {
+  aspect-ratio: 16 / 9;
+}
+[class*='wa-frame'][class*='\:portrait'] {
+  aspect-ratio: 9 / 16;
+}
+/* #endregion */
+
+/* #region Grid */
+[class*='wa-grid'] {
+  display: grid;
+  gap: var(--wa-space-m);
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 20ch), 100%), 1fr));
+
+  --min-column-size: initial;
+}
+
+.wa-span-grid {
+  grid-column: 1 / -1;
+}
+/* #endregion */
+
+/* #region Split */
+[class*='wa-split'] {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--wa-space-m);
+  justify-content: space-between;
+}
+
+[class*='wa-split'],
+[class*='wa-split'][class*='\:row'] {
+  flex-direction: row;
+  block-size: auto;
+  inline-size: 100%;
+}
+
+[class*='wa-split'][class*='\:column'] {
+  flex-direction: column;
+  block-size: auto;
+  inline-size: auto;
+  align-self: stretch;
+}
+
+/* #endregion */
+
+/* #region Stack */
+[class*='wa-stack'] {
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  gap: var(--wa-space-m);
+  justify-content: flex-start;
+}
+/* #endregion */

src/themes/utilities.css

@@ -0,0 +1,179 @@
+/* #region Align Items */
+.wa-align-items-start {
+  align-items: flex-start;
+}
+.wa-align-items-end {
+  align-items: flex-end;
+}
+.wa-align-items-center {
+  align-items: center;
+}
+.wa-align-items-stretch {
+  align-items: stretch;
+}
+.wa-align-items-baseline {
+  align-items: baseline;
+}
+/* #endregion */
+
+/* #region Border Radius */
+.wa-border-radius-xs {
+  border-radius: var(--wa-border-radius-xs);
+}
+.wa-border-radius-s {
+  border-radius: var(--wa-border-radius-s);
+}
+.wa-border-radius-m {
+  border-radius: var(--wa-border-radius-m);
+}
+.wa-border-radius-l {
+  border-radius: var(--wa-border-radius-l);
+}
+.wa-border-radius-pill {
+  border-radius: var(--wa-border-radius-pill);
+}
+.wa-border-radius-circle {
+  border-radius: var(--wa-border-radius-circle);
+}
+.wa-border-radius-square {
+  border-radius: var(--wa-border-radius-square);
+}
+/* #endregion */
+
+/* #region Gap */
+.wa-gap-0 {
+  gap: 0px;
+}
+.wa-gap-3xs {
+  gap: var(--wa-space-3xs);
+}
+.wa-gap-2xs {
+  gap: var(--wa-space-2xs);
+}
+.wa-gap-xs {
+  gap: var(--wa-space-xs);
+}
+.wa-gap-s {
+  gap: var(--wa-space-s);
+}
+.wa-gap-m {
+  gap: var(--wa-space-m);
+}
+.wa-gap-l {
+  gap: var(--wa-space-l);
+}
+.wa-gap-xl {
+  gap: var(--wa-space-xl);
+}
+.wa-gap-2xl {
+  gap: var(--wa-space-2xl);
+}
+.wa-gap-3xl {
+  gap: var(--wa-space-3xl);
+}
+/* #endregion */
+
+/* #region Text */
+.wa-heading-xs,
+.wa-heading-s,
+.wa-heading-m,
+.wa-heading-l,
+.wa-heading-xl,
+.wa-heading-2xl,
+.wa-heading-3xl {
+  font-family: var(--wa-font-family-heading);
+  font-weight: var(--wa-font-weight-heading);
+  line-height: var(--wa-line-height-condensed);
+  text-wrap: balance;
+}
+
+.wa-heading-xs {
+  font-size: var(--wa-font-size-s);
+}
+
+.wa-heading-s {
+  font-size: var(--wa-font-size-m);
+}
+
+.wa-heading-m {
+  font-size: var(--wa-font-size-l);
+}
+
+.wa-heading-l {
+  font-size: var(--wa-font-size-xl);
+}
+
+.wa-heading-xl {
+  font-size: var(--wa-font-size-2xl);
+}
+
+.wa-heading-2xl {
+  font-size: var(--wa-font-size-3xl);
+}
+
+.wa-heading-3xl {
+  font-size: var(--wa-font-size-4xl);
+}
+
+.wa-body-xs,
+.wa-body-s,
+.wa-body-m,
+.wa-body-l,
+.wa-body-xl {
+  font-family: var(--wa-font-family-body);
+  font-weight: var(--wa-font-weight-body);
+  line-height: var(--wa-line-height-normal);
+}
+
+.wa-body-xs {
+  font-size: var(--wa-font-size-xs);
+}
+
+.wa-body-s {
+  font-size: var(--wa-font-size-s);
+}
+
+.wa-body-m {
+  font-size: var(--wa-font-size-m);
+}
+
+.wa-body-l {
+  font-size: var(--wa-font-size-l);
+}
+
+.wa-body-xl {
+  font-size: var(--wa-font-size-xl);
+}
+
+.wa-caption-xs,
+.wa-caption-s,
+.wa-caption-m,
+.wa-caption-l,
+.wa-caption-xl {
+  color: var(--wa-color-text-quiet);
+  font-family: var(--wa-font-family-body);
+  font-weight: var(--wa-font-weight-body);
+  line-height: var(--wa-line-height-condensed);
+}
+
+.wa-caption-xs {
+  font-size: var(--wa-font-size-2xs);
+}
+
+.wa-caption-s {
+  font-size: var(--wa-font-size-xs);
+}
+
+.wa-caption-m {
+  font-size: var(--wa-font-size-s);
+}
+
+.wa-caption-l {
+  font-size: var(--wa-font-size-m);
+}
+
+.wa-caption-xl {
+  font-size: var(--wa-font-size-l);
+}
+
+/* #endregion */