@castlabs/ui 6.0.2 → 7.0.0

package/src/styles/layout/section.scss

@@ -3,7 +3,7 @@
 /// @access public
 ////
 
-// This file defines how we structure pages with <section class="cl-section-regular">s.
+// This file defines how we structure pages with <section class="cl-section">s.
 
 %section-padding {
   padding-left: $spacing-tiny;
@@ -15,74 +15,73 @@
   }
 }
 
-.cl-section-primary,
-.cl-section-secondary,
-.cl-section-dark,
-.cl-section-light,
-.cl-section-regular,
-.cl-section-alternate {
+.cl-section {
   @extend %section-padding;
-}
 
-// two successive sections of the same bg color loose a bit of gap
-.cl-section-regular + .cl-section-regular,
-.cl-section-alternate + .cl-section-alternate,
-.cl-section-dark + .cl-section-dark,
-.cl-section-light + .cl-section-light,
-.cl-section-primary + .cl-section-primary,
-.cl-section-secondary + .cl-section-secondary {
-  @include media-breakpoint-up(sm) {
-    margin-top: $spacing-small * -3;
+  background-color: var(--cl-color-background);
+  color: var(--cl-color-text);
+
+  &:not([class*='cl-color-']) + &:not([class*='cl-color-']),
+  &.cl-color-red + &.cl-color-red,
+  &.cl-color-sky + &.cl-color-sky,
+  &.cl-color-night + &.cl-color-night,
+  &.cl-color-eggshell + &.cl-color-eggshell,
+  &.cl-color-clay + &.cl-color-clay,
+  &.cl-color-ash + &.cl-color-ash,
+  &.cl-color-petrol + &.cl-color-petrol,
+  &.cl-color-berry + &.cl-color-berry {
+    @include media-breakpoint-up(sm) {
+      margin-top: $spacing-small * -3;
+    }
   }
 }
 
-.cl-section-primary,
-.cl-section-secondary,
-.cl-section-dark {
-  color: $color-white-100;
+// .cl-section:not(.cl-color-red):not(.cl-color-sky):not(.cl-color-night):not(.cl-color-eggshell):not(.cl-color-clay):not(.cl-color-ash):not(.cl-color-petrol):not(.cl-color-berry) + .cl-section:not(.cl-color-red):not(.cl-color-sky):not(.cl-color-night):not(.cl-color-eggshell):not(.cl-color-clay):not(.cl-color-ash):not(.cl-color-petrol):not(.cl-color-berry) {
+//    @include media-breakpoint-up(sm) {
+//      margin-top: $spacing-small * -3;
+//    }
+// }
 
-  h1,
-  h2,
-  h3 {
-    color: $color-white-100;
-  }
+// pre-2005 legacy mappings
+.cl-section-regular {
+  @extend %section-padding;
+  @extend %cl-color-night-outline;
 
-  a {
-    @include typography-links(
-      $color-ci-white,
-      rgba($color-white-80a, $color-hover-opacity),
-      2px,
-      $color-ci-white,
-      rgba($color-white-80a, $color-hover-opacity)
-    );
-  }
+  background-color: var(--cl-color-background);
+  color: var(--cl-color-text);
 }
 
 .cl-section-primary {
-  background-color: $color-primary;
+  @extend %section-padding;
+  @extend %cl-color-red;
 
-  @include media-breakpoint-up(sm) {
-    min-height: px(88);
-  }
+  background-color: var(--cl-color-background);
+  color: var(--cl-color-text);
 }
 
 .cl-section-secondary {
-  background-color: $color-secondary;
+  @extend %section-padding;
+  @extend %cl-color-sky;
+
+  background-color: var(--cl-color-background);
+  color: var(--cl-color-text);
 }
 
+.cl-section-night,
 .cl-section-dark {
-  background-color: $color-dark;
+  @extend %section-padding;
+  @extend %cl-color-night;
+
+  background-color: var(--cl-color-background);
+  color: var(--cl-color-text);
 }
 
 .cl-section-light,
 .cl-section-alternate {
-  background-color: $color-ci-haze;
-}
+  @extend %section-padding;
 
-.cl-section-tight {
-  // deprecated
-  padding-bottom: 1rem;
-  padding-top: 0;
+  border-bottom: $brand-line-width solid $color-ci-clay;
+  border-top: $brand-line-width solid $color-ci-clay;
 }
 
 main {

package/src/styles/layout/spacing.scss

@@ -188,14 +188,14 @@ main {
     }
   }
 
+  > *:last-child {
+    margin-right: 0;
+  }
+
   @include media-breakpoint-up(sm) {
     &.cl-spread {
       display: flex;
       justify-content: space-between;
-
-      > *:last-child {
-        margin-right: 0;
-      }
     }
   }
 

package/src/styles/layout/typography.scss

@@ -5,101 +5,112 @@
 
 // This file defines our basic typography rules.
 
-@import '../../fonts/OpenSansVariable/OpenSansVariable';
-@import '../../fonts/FontAwesome5/FontAwesome5';
-@import '../../fonts/NotoSansMono/NotoSansMono';
+// @import '../../fonts/OpenSansVariable/OpenSansVariable';
+// @import '../../fonts/NotoSansMono/NotoSansMono';
+
+@import '../../fonts/DMMono/DMMono';
+@import '../../fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap';
+
 @import 'typography.variables';
 
 // --- text --------------------------------------------------------------------
 
+.cl-font-sans {
+  font-family: $typography-sans-font-list !important;
+}
+
+.cl-font-monospace {
+  font-family: $typography-monospace-font-list !important;
+}
+
 html {
   font-size: 16px; // root font size
 }
 
 html,
 body {
-  @extend %p-medium;
+  @extend %cl-p-medium;
 
-  color: $color-text;
-  word-wrap: break-word;
+  color: var(--cl-color-text);
+  overflow-wrap: break-word;
 }
 
 .cl-p {
   overflow-wrap: anywhere;
 }
 
-.cl-p-tiny {
-  @extend %p-tiny;
-
-  font-weight: 700;
-}
-
 .cl-p-small {
-  @extend %p-small;
+  @extend %cl-p-small;
 }
 
 .cl-p-medium {
-  @extend %p-medium;
+  @extend %cl-p-medium;
 }
 
 .cl-p-large {
-  @extend %p-large;
+  @extend %cl-p-large;
+}
 
-  + :not(.cl-p-large) {
-    margin-top: $spacing-medium;
-  }
+.cl-p-x-large {
+  @extend %cl-p-x-large;
+}
+
+.cl-p-tag {
+  @extend %cl-p-tag;
 }
 
 .cl-p-label {
-  @extend %p-label;
+  @extend %cl-p-label;
 }
 
 .cl-p-form-label {
-  @extend %p-form-label;
+  @extend %cl-p-form-label;
 }
 
 .cl-p-nav {
-  @extend %p-nav;
+  @extend %cl-p-nav;
 }
 
 .cl-font-condensed {
   @extend %cl-font-condensed;
 }
 
+.cl-h0 {
+  @extend %cl-h0;
+
+  @include spacing-before-auto($spacing-large + $spacing-small);
+
+  overflow-wrap: anywhere;
+}
+
 .cl-h1 {
-  @extend %h1;
+  @extend %cl-h1;
 
-  @include spacing-before-auto($spacing-large);
+  @include spacing-before-auto($spacing-large + $spacing-small);
 
-  & {
-    overflow-wrap: anywhere;
-  }
+  overflow-wrap: anywhere;
 }
 
 .cl-h2 {
-  @extend %h2;
+  @extend %cl-h2;
 
-  @include spacing-before-auto($spacing-large);
+  @include spacing-before-auto($spacing-large + $spacing-tiny);
 
-  & {
-    overflow-wrap: anywhere;
-  }
+  overflow-wrap: anywhere;
 }
 
 .cl-h3 {
-  @extend %h3;
+  @extend %cl-h3;
 
   @include spacing-before-auto($spacing-large);
 
-  & {
-    overflow-wrap: anywhere;
-  }
+  overflow-wrap: anywhere;
 }
 
 .cl-h4,
 .cl-h5,
 .cl-h6 {
-  @extend %h4;
+  @extend %cl-h4;
 
   margin-top: $spacing-large;
   overflow-wrap: anywhere;
@@ -108,23 +119,21 @@ body {
 main {
   // apply style to typical html elements only in <main>, so it does not interfer with header/footer
   h1 {
-    @extend %h1;
+    @extend %cl-h1;
 
     @include spacing-before-auto($spacing-small); // h1 is only used in special places
 
-    & {
-      overflow-wrap: anywhere;
-    }
+    color: var(--cl-color-text);
+    overflow-wrap: anywhere;
   }
 
   h2 {
-    @extend %h2;
+    @extend %cl-h2;
 
-    @include spacing-before-auto($spacing-large);
+    @include spacing-before-auto($spacing-large + $spacing-tiny);
 
-    & {
-      overflow-wrap: anywhere;
-    }
+    color: var(--cl-color-text);
+    overflow-wrap: anywhere;
 
     &:first-child {
       @include spacing-before-auto($spacing-medium);
@@ -132,13 +141,12 @@ main {
   }
 
   h3 {
-    @extend %h3;
+    @extend %cl-h3;
 
-    @include spacing-before-auto($spacing-small * 2);
+    @include spacing-before-auto($spacing-large);
 
-    & {
-      overflow-wrap: anywhere;
-    }
+    color: var(--cl-color-text);
+    overflow-wrap: anywhere;
 
     &:first-child {
       @include spacing-before-auto($spacing-medium);
@@ -148,16 +156,16 @@ main {
   h4,
   h5,
   h6 {
-    @extend %h4;
+    @extend %cl-h4;
 
     @include spacing-before-auto($spacing-medium);
 
-    & {
-      overflow-wrap: anywhere;
-    }
+    color: var(--cl-color-text);
+    overflow-wrap: anywhere;
   }
 
   p {
+    color: var(--cl-color-text);
     overflow-wrap: anywhere;
   }
 
@@ -167,34 +175,11 @@ main {
   }
 
   small {
-    @extend %p-small;
+    @extend %cl-p-small;
   }
 
   label {
-    @extend %p-label;
-  }
-
-  // --- ruler -------------------------------------------------------------------
-
-  hr {
-    $typography-hr-spacing: 2rem;
-
-    @include spacing-before-auto($typography-hr-spacing);
-
-    & {
-      border: 0;
-      border-bottom: px(2) solid $color-line;
-      margin-bottom: $typography-hr-spacing;
-      opacity: 1;
-    }
-
-    &.cl-spacing-small {
-      @include spacing-before-auto($spacing-small);
-
-      & {
-        margin-bottom: $spacing-small;
-      }
-    }
+    @extend %cl-p-label;
   }
 
   // --- code & monospace --------------------------------------------------------
@@ -203,7 +188,9 @@ main {
   kbd,
   code,
   samp {
-    @extend %p-pre;
+    @extend %cl-p-pre;
+
+    color: var(--cl-color-text);
   }
 
   code {
@@ -212,7 +199,6 @@ main {
   }
 
   pre {
-    background-color: $color-ci-haze;
     padding: $spacing-tiny;
 
     code {
@@ -221,11 +207,9 @@ main {
   }
 
   kbd {
-    background-color: $color-ci-haze;
-    border: px(1) solid $color-ci-silver;
+    border: px(1) solid $color-ci-night;
     border-radius: px(4);
-    border-width: px(1) px(2) px(2) px(1);
-    color: $color-ci-dim;
+    font-size: 0.8em;
     margin: 0 $spacing-micro;
     padding: 0 $spacing-micro;
   }
@@ -233,29 +217,34 @@ main {
   // --- block quotes ----------------------------------------------------------
 
   blockquote {
-    border-left: $bar-ui-width solid $color-ci-smoke;
+    @include cl-accent;
+
+    border-left: $bar-ui-width solid var(--cl-color-accent);
     padding-left: calc($spacing-medium - $bar-ui-width);
+  }
 
-    &.cl-blockquote-primary {
-      border-left: $bar-ui-width solid $color-primary;
-    }
+  // --- lists -------------------------------------------------------------------
 
-    &.cl-blockquote-secondary {
-      border-left: $bar-ui-width solid $color-secondary;
-    }
+  // see Lists.scss
+}
 
-    &.cl-blockquote-light {
-      border-left: $bar-ui-width solid $color-ci-smoke; // same as normal bockquote
-    }
+// --- ruler -------------------------------------------------------------------
 
-    &.cl-blockquote-dark {
-      border-left: $bar-ui-width solid $color-dark;
-    }
-  }
+hr {
+  $typography-hr-spacing: 2rem;
 
-  // --- lists -------------------------------------------------------------------
+  @include spacing-before-auto($typography-hr-spacing);
 
-  // see Lists.scss
+  border: 0;
+  border-bottom: $brand-line-width solid var(--cl-color-text);
+  margin-bottom: $typography-hr-spacing;
+  opacity: 1;
+
+  &.cl-spacing-small {
+    @include spacing-before-auto($spacing-small);
+
+    margin-bottom: $spacing-small;
+  }
 }
 
 // --- redefine bs utilities we use so we don't need to pull the whole set -----
@@ -291,16 +280,6 @@ main {
 // --- text select -------------------------------------------------------------
 
 ::selection {
-  background: $color-ci-blue;
+  background: $color-ci-night;
   color: $color-ci-white;
 }
-
-// --- text colors -------------------------------------------------------------
-
-.color-ci-blue {
-  color: $color-ci-blue;
-}
-
-.color-ci-red {
-  color: $color-ci-red;
-}