murb_design_system 0.1.0 → 0.2.0

data/vendor/assets/stylesheets/article.scss

@@ -0,0 +1,115 @@
+@import 'variables';
+
+article:has(h1), article.promo {
+  --step--2: clamp(.606rem, .464rem + .606vw, .908rem);
+  --step--1: clamp(.778rem, .596rem + .778vw, 1.167rem);
+  --step-0: clamp(1rem, .766rem + 1vw, 1.5rem);
+  --step-1: clamp(1.285rem, .984rem + 1.285vw, 1.928rem);
+  --step-2: clamp(1.651rem, 1.264rem + 1.651vw, 2.477rem);
+  --step-3: clamp(2.122rem, 1.625rem + 2.122vw, 3.183rem);
+  --step-4: clamp(2.727rem, 2.088rem + 2.727vw, 4.09rem);
+  --step-5: clamp(3.504rem, 2.682rem + 3.504vw, 5.255rem);
+  --step-6: clamp(4.502rem, 3.447rem + 4.502vw, 6.753rem);
+
+  --article-step--2: var(--step--2);
+  --article-step--1: var(--step--1);
+  --article-step-0: var(--step-0);
+  --article-step-1: var(--step-1);
+  --article-step-2: var(--step-2);
+  --article-step-3: var(--step-3);
+  --article-step-4: var(--step-4);
+  --article-step-5: var(--step-5);
+  --article-step-6: var(--step-6);
+
+  h1,h2,h3,h4,h5,h6 {
+    font-weight: normal;
+    line-height: 1.3333;
+    margin: 0 0 0.3333em;
+  }
+  h1 {
+    font-size: var(--step-5);
+    text-align: left;
+
+    small {
+      display: inline-block;
+      font-size: var(--step-3);
+    }
+  }
+
+  h2 {
+    font-size: var(--step-3);
+    small {
+        display: inline-block;
+        font-size: var(--step-2);
+      }
+  }
+
+  h3 {
+    font-size: var(--step-2);
+    small {
+        display: inline-block;
+        font-size: var(--step-1);
+      }
+  }
+
+  h4 {
+    font-size: var(--step-1);
+      font-style: normal;
+  }
+
+  h5 {
+    font-size: var(--step-0);
+  }
+
+  h6 {
+    font-size: var(--step-0);
+    font-style: oblique;
+  }
+
+  p {
+    font-weight: 200;
+    letter-spacing: 0.02em;
+    line-height: 1.666;
+    margin-bottom: 1.666rem;
+  }
+
+  *:not(h1, h2, h3, h4) {
+    font-size: var(--step-0);
+    font-weight: 300;
+  }
+
+  figcaption {
+    font-size: var(--step--1);
+  }
+
+  strong, b {
+    font-weight: 500;
+  }
+
+  code {
+    font-size: var(--step--1);
+  }
+
+  aside {
+    --step--1: var(--article-step--2);
+    --step-0: var(--article-step--1);
+    --step-1: var(--article-step-0);
+    --step-2: var(--article-step-1);
+    --step-3: var(--article-step-2);
+    --step-4: var(--article-step-3);
+    --step-5: var(--article-step-4);
+    --step-6: var(--article-step-5);
+
+    padding: 0;
+    opacity: 0.6666;
+    line-height: calc(1.666 * var(--article-step-0));
+
+    ul {
+      margin-top: 0
+    }
+  p, li {
+    font-weight: 200;
+    letter-spacing: 0.02em;
+    line-height: calc(1.666 * var(--article-step-0));  }
+  }
+}

data/vendor/assets/stylesheets/buttons.scss

@@ -1,57 +1,86 @@
-@import 'variables';
+@import "variables";
 
-.button, button, input[type="button"], input[type="submit"] {
+.button,
+button,
+input[type="button"],
+input[type="submit"] {
   border: 0;
   background: $selectableColor;
-  color: $white;
+  color: $selectableColorContrast;
   text-decoration: none;
   line-height: 2.5;
   padding: 0 0.5em;
   display: inline-block;
-  transition: background 0.2s;
-  font-size: 1rem;
+  font-size: 1em;
   margin: 0;
   font-family: $fontFamily;
-  &:hover, &:focus {
-    color: $white;
+
+  &:hover,
+  &:focus {
+    color: $selectableColorContrast;
     background: $selectableColorHover;
-  };
+    transform: $elementScaleUp;
+  }
   &.primary {
+    color: $primaryColorContrast;
     background: $primaryColor;
-    &:hover, &:focus {
-      color: $white;
+
+    &:hover,
+    &:focus {
+      color: $primaryColorContrast;
       background: $primaryHoverColor;
-    };
+    }
   }
+
   &.secondary {
-    background: $lightGrey;
-    color: $offBlack;
-    &:hover, &:focus {
-      color: $offBlack;
-      background: $grey;
-    };
+    background: $secondaryColor;
+    color: $secondaryColorContrast;
+
+    &:hover,
+    &:focus {
+      color: $secondaryColorContrast;
+      background: $secondaryHoverColor;
+    }
   }
-  &.warn {
-    background: $red;
-    color: $white;
-    &:hover, &:focus {
-      color: $white;
-      background: darken($red, 10);
-    };
+
+  &.warn,
+  &.alert {
+    background: $alertColor;
+    color: $alertColorContrast;
+    // to support .button.alert we need to override .alert styling
+    padding: 0 0.5em;
+    margin: 0;
+
+    &:hover,
+    &:focus {
+      color: $alertColorContrast;
+      background: darken($alertColor, 10);
+    }
   }
+
   &.small {
     font-size: 0.825rem;
+    line-height: 1;
+    padding: 0.3em;
+  }
+}
+
+small {
+  &.button,
+  button,
+  input[type="button"],
+  input[type="submit"] {
+    line-height: 1;
+    padding: 0.3em;
   }
 }
 
-//input[type=submit] {
-//  background: $;
-//  color: #fff;
-//  border: 0 none;
-//  font-size: 1em;
-//  padding: 0.5em;
-//  font-family: $fontFamily;
-//  &:hover {
-//    background: $selectableColorHover;
-//  };
-//}
+aside {
+  .button,
+  button,
+  input[type="button"],
+  input[type="submit"] {
+    width: 100%;
+    margin-bottom: 0.5em;
+  }
+}

data/vendor/assets/stylesheets/cards.scss

@@ -4,12 +4,11 @@ ul.cards, ol.cards {
   list-style: none;
   margin: 0;
   padding: 0;
-
 }
 
 
 .card {
-  border: $lighterGrey 1px solid;
+  border: $borderColor 1px solid;
   display: flex;
   flex-direction: column;
   align-content: baseline;
@@ -20,8 +19,8 @@ ul.cards, ol.cards {
   .text {
     display: flex;
     flex-direction: column;
-      max-width: 60ch;
-      order: 1;
+    max-width: 60ch;
+    order: 1;
   }
 
   .img {
@@ -44,19 +43,16 @@ ul.cards, ol.cards {
   + .card {
       margin-top: 1.5rem;
   }
-
 }
 
 
 @supports (display: grid) {
-    ul.cards {
+    ol.cards, ul.cards {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
         grid-gap: 1.5rem;
     }
 
-
-
     .card + .card {
         margin-top: 0;
     }

data/vendor/assets/stylesheets/devise.scss

@@ -1,3 +1,4 @@
+/* Devise specific */
 .actions {
   margin: 1em 0;
 }

data/vendor/assets/stylesheets/forms.scss

@@ -1,46 +1,114 @@
-@import 'variables';
+@import "variables";
 
-input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=number], textarea, select {
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="date"],
+input[type="number"],
+textarea,
+select {
   font-size: 1em;
   width: 100%;
   font-family: $fontFamily;
   padding: 0 0.5em;
   line-height: 2;
-  margin-bottom: 0.5em;
+  border: 1px solid $inputBorderColor;
+  line-height: inherit;
+  margin-top: -2px;
+
+  &[disabled] {
+    color: $textColor;
+    background: $disabledColor;
+    border-color: $disabledColor;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+input + label,
+input + input {
+  margin-top: 0.5em;
+}
+
+label {
+  display: block;
+}
+
+label + label {
+  margin-top: 1em;
 }
-input[type=file] {
+
+input[type="file"] {
   width: 100%;
 }
 
+input[type="radio"],
+input[type="checkbox"] {
+  height: 1.25em;
+  width: 1.75em;
+  display: inline-block;
+}
+
+input[type="radio"] + label[for],
+input[type="checkbox"] + label[for] {
+  display: inline-block;
+}
+
+label + p {
+  margin-top: $margin;
+}
+
+input[aria-invalid],
+select[aria-invalid],
+textarea[aria-invalid] {
+  border: $red solid 3px;
+}
+
 select {
   padding: 0.2em 0.5em;
 }
 
+form label input {
+  margin-bottom: 0;
+}
 
 form .field > label:first-child {
   width: 100%;
   display: inline-block;
 }
 
+form > *:first-child {
+  margin-top: 0;
+}
+
 textarea {
   line-height: $lineHeight;
   min-height: 6em;
+
+  &.large {
+    min-height: 22em;
+  }
 }
 
 fieldset {
   margin-bottom: 1em;
   margin-top: 1em;
-  border: 1px solid $lightGrey;
+  border: 1px solid $borderColor;
   border-radius: $borderRadius;
-//  background: $lighterGrey;
+  padding: $padding;
 }
 
 .button_to {
   display: inline-block;
 }
+
 .form-actions {
   margin-top: 1em;
 }
+
 .form__fields--compact {
   display: flex;
   flex-direction: row;
@@ -50,18 +118,13 @@ fieldset {
 
 .form__fields--compact > * {
   flex-grow: 5;
-  flex-spacing: 1em;
 }
 
 .field--small {
   flex-grow: 1;
 }
 
-.small.button {
-  line-height: 1;
-  padding: 0.3em ;
-}
-.warn.button input[type=checkbox] {
+.warn.button input[type="checkbox"] {
   display: none;
 }
 
@@ -70,8 +133,23 @@ fieldset.destroyed {
 }
 
 form .hint {
+  margin-top: -0.3em;
+  display: block;
+  font-size: var(--step-0);
+}
+
+form span.error,
+form div.error {
   font-size: 0.875em;
-  color: $grey;
-  margin-top: -0.5em;
+  color: $red;
+  // margin-top: -0.3em;
   display: block;
-}
+  margin-bottom: 1em;
+}
+
+@media (prefers-color-scheme: dark) {
+  form span.error,
+  form div.error {
+    color: $lighterRed;
+  }
+}

data/vendor/assets/stylesheets/grid.scss

@@ -0,0 +1,78 @@
+@import "variables";
+
+$grid-template-columns: repeat(10, 1fr);
+
+@media (min-width: 40em) {
+  .grid {
+    header {
+      display: grid;
+      grid-template-columns: $grid-template-columns;
+      grid-template-rows: auto;
+      grid-template-areas: "spacer spacer title title title title title title title title";
+
+      h1 {
+        grid-area: title;
+      }
+    }
+
+    > div,
+    > section {
+      display: grid;
+      grid-template-columns: $grid-template-columns;
+      grid-template-areas: "subtitle subtitle main main main main main main aside aside";
+
+      .subtitle,
+      h2 {
+        grid-area: subtitle;
+      }
+
+      > div:not(.grid--full-width),
+      > section:not(.grid--full-width) {
+        grid-area: main;
+      }
+
+      aside {
+        grid-area: aside;
+      }
+    }
+  }
+}
+
+// make sure that two grids are separated
+.grid + .grid {
+  margin-top: 1em;
+}
+
+.grid--full-width {
+  grid-area: none;
+  grid-column-start: subtitle-start;
+  grid-column-end: aside-end;
+  grid-row-start: unset;
+  grid-row-end: unset;
+
+  &.callout,
+  &.alert,
+  &.notice,
+  &.expand {
+    // padding: 0;
+    margin: 0;
+    max-width: unset;
+    width: calc(100% + (3 * var(--root-step-0)) - 1px);
+    margin-left: calc(-1.5 * var(--root-step-0));
+    padding: calc(1.5 * var(--root-step-0));
+    margin-top: 1em;
+    margin-bottom: 1em;
+    box-shadow: $boxShadow;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .grid--full-width {
+    &.callout,
+    &.alert,
+    &.notice,
+    &.expand {
+      box-shadow: $nightBoxShadow;
+    }
+  }
+}