murb_design_system 0.1.0 → 0.2.0

data/vendor/assets/stylesheets/html.scss

@@ -1,4 +1,26 @@
-@import 'variables';
+@import "variables";
+
+:root {
+  --step--2: clamp(0.778rem, 0.596rem + 0.415vw, 0.875rem);
+  --step--1: clamp(0.882rem, 0.675rem + 0.47vw, 0.992rem);
+  --step-0: clamp(1rem, 0.766rem + 0.533vw, 1.125rem);
+  --step-1: clamp(1.134rem, 0.868rem + 0.605vw, 1.275rem);
+  --step-2: clamp(1.285rem, 0.984rem + 0.685vw, 1.446rem);
+  --step-3: clamp(1.457rem, 1.115rem + 0.777vw, 1.639rem);
+  --step-4: clamp(1.651rem, 1.264rem + 0.881vw, 1.858rem);
+  --step-5: clamp(1.872rem, 1.433rem + 0.998vw, 2.106rem);
+  --step-6: clamp(2.122rem, 1.625rem + 1.132vw, 2.387rem);
+
+  --root-step--2: var(--step--2);
+  --root-step--1: var(--step--1);
+  --root-step-0: var(--step-0);
+  --root-step-1: var(--step-1);
+  --root-step-2: var(--step-2);
+  --root-step-3: var(--step-3);
+  --root-step-4: var(--step-4);
+  --root-step-5: var(--step-5);
+  --root-step-6: var(--step-6);
+}
 
 * {
   box-sizing: border-box;
@@ -6,16 +28,61 @@
 
 html {
   font-family: $fontFamily;
-  font-size: 18px;
+  font-size: 16px;
   line-height: $lineHeight;
-  color: $offBlack;
+  color: $textColor;
+  background: $backgroundColor;
+  accent-color: $primaryColor;
+  caret-color: $primaryColor;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color: $nightTextColor;
+    background: $nightBackgroundColor;
+  }
+}
+
+::selection {
+  background: $primaryColor;
+  color: #fff;
 }
 
-h1, h2 {
-//  font-weight: 500;
+*:focus {
+  outline: 2px solid $primaryColor;
 }
 
+body {
+  font-size: var(--step-0);
+}
+
+h1 {
+  font-size: var(--step-5);
+}
 
+h2 {
+  font-size: var(--step-4);
+}
+
+h3 {
+  font-size: var(--step-3);
+}
+
+h4 {
+  font-size: var(--step-2);
+}
+
+h5 {
+  font-size: var(--step-1);
+}
+
+h6 {
+  font-size: inherit;
+}
+
+p {
+  font-size: inherit;
+}
 
 hr {
   border: 0 none;
@@ -25,38 +92,203 @@ hr {
   margin: 0.5em 0;
 }
 
+blockquote {
+  color: $textColor;
+  font-size: var(--step-1);
+  padding: $margin / 2 $margin;
+  background: $backgroundColor;
+  border-radius: $borderRadius;
+}
+blockquote blockquote {
+  color: $textColor;
+  font-size: var(--step-0);
+  background: $mainBackgroundColor;
+}
+
+@media (prefers-color-scheme: dark) {
+  blockquote {
+    color: $nightTextColor;
+    background: $nightBackgroundColor;
+  }
+  blockquote blockquote {
+    color: $nightTextColor;
+    background: $nightMainBackgroundColor;
+  }
+}
+
+section section,
+section:not(section),
+article {
+  break-inside: avoid;
+}
+
+blockquote::before {
+  content: open-quote;
+  position: absolute;
+  margin-left: calc(-1 * var(--step-2));
+  margin-top: calc(-1 * var(--step-2));
+  font-size: var(--step-4);
+  display: block;
+}
+
+blockquote::after {
+  content: close-quote;
+  visibility: hidden;
+  position: absolute;
+}
+
+figure:has(> blockquote) {
+  overflow: auto;
+
+  figcaption {
+    margin-top: 0;
+    float: right;
+    &::before {
+      content: "— ";
+    }
+    font-size: var(--step-0);
+  }
+}
 
 a {
   color: $selectableColor;
+
   &:hover {
     color: $selectableColorHover;
   }
 }
 
-body {
-  background: #eee;
+@media (prefers-color-scheme: dark) {
+  a {
+    color: $nightSelectableColor;
+
+    &:hover {
+      color: $nightSelectableColorHover;
+    }
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  & > a {
+    color: inherit;
+  }
 }
 
 header {
   position: relative;
 }
+
+header *:first-child {
+  margin-top: 0;
+}
+
 main {
-  margin: 1em auto;
+  color: $textColor;
+  margin: $margin auto;
   background: #fefefe;
   max-width: $mainWidth;
-  padding: 1em;
-  border-radius: 1em;
+  padding: $padding;
+  border-radius: $borderRadius;
   box-sizing: content-box;
+  position: relative;
+}
+
+@media (prefers-color-scheme: dark) {
+  main {
+    background: $nightMainBackgroundColor;
+    color: $nightTextColor;
+  }
+}
+
+body > footer {
+  margin: $margin auto;
+  max-width: $mainWidth;
+  padding: $padding;
+  border-radius: $borderRadius;
+  box-sizing: content-box;
+  position: relative;
 }
 
-main > h1:first-child, main > h2:first-child, main > nav + h1, main > nav + h2 {
+main footer {
+  border-top: 1px solid $borderColor;
+  clear: both;
+  display: block;
+  margin: $margin 0 0;
+  padding: $padding 0 0;
+}
+
+main:not(.expand):has(> article:first-child h1),
+main:not(.expand):has(article.promo) {
+  max-width: $mainWidth / 2;
+}
+
+.u-columns main:has(> article:first-child h1) {
+  max-width: inherit;
+}
+
+h1 sub {
+  font-weight: normal;
+}
+
+aside {
+  padding: 1em;
+}
+
+main > h1:first-child,
+main > h2:first-child,
+main > h3:first-child,
+main > nav + h1,
+main > nav + h2,
+main > nav + h3,
+aside > h1:first-child,
+aside > h2:first-child,
+aside > h3:first-child,
+aside > nav + h1,
+aside > nav + h2,
+aside > nav + h3 {
   margin-top: 0;
 }
 
+main > aside,
+main > section > aside {
+  color: $textColor;
+  background: $backgroundColor;
+  border-radius: $borderRadius;
+  -webkit-print-color-adjust: exact !important;
+  print-color-adjust: exact !important;
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+  margin-top: $margin / 2;
+  margin-bottom: $margin;
+}
+
+@media (prefers-color-scheme: dark) {
+  main > aside,
+  main > section > aside {
+    background: $nightBackgroundColor;
+    color: $nightTextColor;
+  }
+}
+
+section:has(section) {
+  border-top: $borderColor 1px solid;
+  margin: $margin 0;
+}
+
 table {
   width: 100%;
   margin-bottom: 1em;
-  th { text-align: left;}
+
+  th {
+    text-align: left;
+  }
 }
 
 img {
@@ -65,8 +297,57 @@ img {
   max-height: 20cm;
 }
 
+figure {
+  margin: $margin 0;
+  img {
+    display: block;
+  }
+
+  &.standout {
+    border: calc(#{$padding} / 4) $white solid;
+    box-shadow: $boxShadow;
+    width: calc(100% + (#{$padding} / 2));
+    margin-left: calc(-#{$padding} / 4);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  figure {
+    &.standout {
+      box-shadow: $nightBoxShadow;
+    }
+  }
+}
+
+caption,
+figcaption {
+  display: block;
+  text-align: center;
+  color: $darkGrey;
+}
+
+@media (prefers-color-scheme: dark) {
+  caption,
+  figcaption {
+    color: $grey;
+  }
+}
+
+p {
+  margin-top: 0;
+}
+
+p:last-child {
+  margin-bottom: 0;
+}
+
+p + p {
+  margin-top: 1em;
+}
+
 address {
   font-style: normal;
+
   p {
     margin: 0;
   }
@@ -74,4 +355,35 @@ address {
 
 dl dt {
   font-weight: bold;
-}
+}
+
+code {
+  background: $darkGrey;
+  color: $offWhite;
+  border-radius: $borderRadius/4;
+  padding: 0 $padding/4;
+}
+
+pre {
+  overflow: scroll;
+}
+
+pre > code {
+  display: block;
+  border-radius: $borderRadius;
+  padding: $padding;
+  overflow: scroll;
+}
+
+// assuming video for now
+iframe {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  height: auto;
+}
+
+* {
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.15s;
+  transition-property: margin, color, transform, box-shadow;
+}

data/vendor/assets/stylesheets/invoice.scss

@@ -1,8 +1,16 @@
+@import "variables";
+
 .preview .invoice {
-  box-shadow: 0 0 1em rgba(0,0,0,0.1);
+  box-shadow: $boxShadow;
   padding: 1.5em;
 }
 
+@media (prefers-color-scheme: dark) {
+  .preview .invoice {
+    box-shadow: $nightBoxShadow;
+  }
+}
+
 .invoice {
   max-width: 21cm;
-}
+}

data/vendor/assets/stylesheets/list-variants.scss

@@ -0,0 +1,83 @@
+@import "variables";
+
+dl {
+  &.no-inset {
+    dd {
+      margin-left: 0;
+    }
+
+    dd + dt {
+      margin-top: 0.5em;
+    }
+  }
+
+  &.inline {
+    dd {
+      display: inline;
+      margin-left: 0;
+    }
+
+    dt {
+      display: inline;
+    }
+
+    dd + dt::before {
+      content: " ";
+      display: block;
+      margin-top: 0.5em;
+    }
+  }
+}
+
+ul.labels {
+  display: block;
+  margin: $margin 0;
+  padding: 0;
+}
+
+ul.labels li,
+.label {
+  list-style: none;
+  display: inline-block;
+  background: $lightGrey;
+  color: $offBlack;
+  border-radius: $borderRadius / 2;
+  padding: 0 $margin / 2;
+
+  -webkit-print-color-adjust: exact !important;
+  print-color-adjust: exact !important;
+
+  &.primary {
+    color: $offBlack;
+    background: $primaryColor;
+  }
+}
+
+ul.labels li {
+  margin: 0;
+}
+
+ul.labels li:has(> a),
+.label:has(> a) {
+  padding: 0;
+
+  &:hover,
+  &:focus {
+    color: $offBlack;
+    background: $grey;
+  }
+
+  a {
+    padding: 0 $margin / 2;
+    color: darkGreen;
+    display: inline-block;
+  }
+}
+
+ul.labels li + li {
+  margin-left: $margin / 2;
+}
+
+.label {
+  margin: 0 $margin / 8;
+}

data/vendor/assets/stylesheets/meta.scss

@@ -0,0 +1,30 @@
+@import "variables";
+
+.meta,
+form .hint,
+form span.error,
+form div.error {
+  --step--1: var(--root-step--2);
+  --step-0: var(--root-step--1);
+  --step-1: var(--root-step-0);
+  --step-2: var(--root-step-1);
+  --step-3: var(--root-step-2);
+  --step-4: var(--root-step-3);
+  --step-5: var(--root-step-4);
+  --step-6: var(--root-step-5);
+
+  padding: 0;
+}
+
+.meta,
+form .hint {
+  opacity: $metaOpacity;
+}
+
+h1,
+h2,
+h3 {
+  &:has(+ .meta) {
+    margin-bottom: 0;
+  }
+}

data/vendor/assets/stylesheets/microformats.scss

@@ -0,0 +1,39 @@
+.h-event {
+
+
+}
+
+.h-event {
+  h2,
+  h3,
+  h4,
+  h5 {
+    margin: 0
+  }
+
+    display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-areas:
+    "title title title org date"
+    "description description description description description";
+
+.dt-range {
+  text-align: right;
+}
+}
+
+h3 {
+  grid-area: title;
+}
+
+.dt-start+.dt-end::before {
+  content: " - "
+}
+
+.p-summary {
+  grid-area: description
+}
+
+p:last-child {
+  margin-bottom: 0
+}

data/vendor/assets/stylesheets/navigation.scss

@@ -1,14 +1,49 @@
-@import 'variables';
+@import "variables";
 
 nav {
-  width: $mainWidth;
+  box-sizing: content-box;
   margin: auto;
+  padding: 0.5em 1em;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  max-width: 100%;
+  max-width: $mainWidth;
+  position: relative;
+
+  &.sticky {
+    top: 0;
+    z-index: 1000;
+    color: $textColor;
+    background: rgba($backgroundColor, 0.85);
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+    position: sticky;
+  }
+}
+
+main > nav {
+  border-radius: $borderRadius/2;
+  color: $textColor;
+  background: $backgroundColor;
+  margin: 1em 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  nav {
+    &.sticky {
+      color: $nightTextColor;
+      background: rgba($nightBackgroundColor, 0.85);
+    }
+  }
+
+  main > nav {
+    background: $nightBackgroundColor;
+    color: $nightTextColor;
+  }
 }
-nav > ul, nav > ul ul {
+
+nav > ul,
+nav > ul ul {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -17,23 +52,56 @@ nav > ul, nav > ul ul {
     display: inline-block;
   }
 
+  a {
+    display: inline-block;
+  }
+
   li + li {
     margin-left: 1em;
   }
+
+  li:has(.button.secondary) + li:has(.button.secondary) {
+    margin-left: 0.25em;
+  }
 }
 
-nav[role="actions"] {
+nav.actions,
+nav[role="actions"], // note, provided as fallback: this is not valid aria
+nav[role="user-actions"] {
   display: block;
   float: right;
   width: fit-content;
+  margin: 0;
+
   ul {
     display: block;
     float: right;
   }
 }
 
+nav a {
+  &:hover,
+  &:focus {
+    transform: $elementScaleUp;
+  }
+}
+
 nav a.active {
-  color: #000;
+  color: $textColor;
   font-weight: bold;
   text-decoration: none;
-}
+}
+
+@media (prefers-color-scheme: dark) {
+  nav a.active {
+    color: $nightTextColor;
+  }
+}
+
+[id]::before {
+  content: "";
+  display: block;
+  height: 2em;
+  margin-top: -2em;
+  visibility: hidden;
+}