@castlabs/ui 6.0.3 → 7.0.0

package/src/styles/layout/typography.variables.scss

@@ -5,8 +5,20 @@
 
 // This file defines our basic typography rules.
 
-$typography-font-list-sans:
-  'Open Sans',
+// h1 (deco): 100
+// h2 48
+// h3 40
+// h4 32
+// body xl: 32 700
+// body lg: 24 700
+// body md: 20 400/700
+// body sm: 14 400/700
+// button: 18 700
+// navigation: 16 400/700
+
+$typography-sans-font-list:
+  'NonNaturalGroteskInktrap',
+  arial,
   -apple-system,
   blinkmacsystemfont,
   'Segoe UI',
@@ -17,30 +29,30 @@ $typography-font-list-sans:
   'Apple Color Emoji',
   'Segoe UI Emoji',
   'Segoe UI Symbol';
+$typography-sans-line-height: 1.4;
 
-$typography-font-list-monospace:
-  'Noto Sans Mono',
-  /* 'Fira Code',*/ sfmono-regular,
-  menlo,
-  monaco,
-  consolas,
-  'Liberation Mono',
-  'Courier New',
-  monospace;
-
-$typography-line-width: 2px;
-$typography-font-weight-base: 400;
-$typography-font-weight-bold: $typography-font-weight-base + 300;
+$typography-monospace-font-list:
+  'DM Mono', sfmono-regular, menlo, monaco, consolas, 'Liberation Mono', 'Courier New', monospace;
+$typography-monospace-line-height: 1.375;
 
 // --- helpers -----------------------------------------------------------------
 
+@function typography-sans-baselineshift($value, $base) {
+  @return $value;
+}
+
+@function typography-sans-baselineunshift($value, $base) {
+  @return $value;
+}
+
 @mixin typography-font(
-  $font-family: $typography-font-list-sans,
-  $font-weight: $typography-font-weight-base,
+  $font-family: $typography-sans-font-list,
+  $font-weight: 400,
   $font-size: 1em,
   $line-height: 1.5em,
   $letter-spacing: 0,
   $font-stretch: 100%,
+  $word-spacing: 0,
   $force: false
 ) {
   @if $force {
@@ -51,74 +63,45 @@ $typography-font-weight-bold: $typography-font-weight-base + 300;
     font-weight: $font-weight;
     letter-spacing: $letter-spacing;
     line-height: $line-height;
+    word-spacing: $word-spacing;
   } @else {
-    @include set-property-if-not(font-family, $typography-font-list-sans, $font-family);
     @include set-property-if-not(font-size, 1em, $font-size);
     @include set-property-if-not(letter-spacing, 0, $letter-spacing);
     @include set-property-if-not(font-stretch, 100%, $font-stretch);
+    @include set-property-if-not(word-spacing, 0, $word-spacing);
 
+    font-family: $font-family;
     font-weight: $font-weight;
     line-height: $line-height;
   }
 }
 
-$typography-links-underline-offset: px(3);
-
-/// Setup links (anchors). Fancy with color, opacity and colorful underlines!
-///
-/// @example scss
-///   @include a-underlined(#333, rgba(#333, 0.7), 2px, #555, rgba(#555, 0.7));
-///
-/// @param {color} $color [inherit] The text color.
-/// @param {color} $color-hover [$color] The text color when hovering.
-/// @param {length} $underline-height [1px] The height / thickness of the underline.
-/// @param {color} $underline-color [$color] The regular color of the underline.
-/// @param {color} $underline-color-hover [$color] The hover color fo the underline.
-/// @output An `a {}` rules block for fancy links.
-@mixin typography-links(
-  $color: inherit,
-  $color-hover: $color,
-  $underline-height: 1px,
-  $underline-color: $color,
-  $underline-color-hover: $color
-) {
-  $gradient-transparent: linear-gradient(transparent, transparent);
-
-  @include color-focus-outline($color, 1px);
-
-  & {
-    // https://sass-lang.com/d/mixed-decls
-    background-image:
-      $gradient-transparent, $gradient-transparent,
-      linear-gradient(to right, $underline-color, $underline-color);
-    background-position: left bottom $typography-links-underline-offset; // depends on underline
-    background-repeat: no-repeat;
-    background-size: 100% $underline-height;
-    color: $color;
-    display: inline;
-    padding-bottom: $typography-links-underline-offset;
+@mixin typography-link($color: inherit, $color-hover: $color, $underline: 1) {
+  color: $color;
+  display: inline;
+
+  @if $underline <= 0 {
     text-decoration: none;
   }
 
   &:hover {
-    background-image:
-      $gradient-transparent, $gradient-transparent,
-      linear-gradient(to right, $underline-color-hover, $underline-color-hover);
     color: $color-hover;
     cursor: pointer;
-    text-decoration: none;
   }
 }
 
-@mixin typography-links-invisible {
-  @include typography-links(inherit, inherit, 0);
-  @include color-focus-outline($color-text, 1px);
+@mixin typography-link-invisible {
+  @include typography-link(inherit, inherit, 0);
+  @include cl-color-focus-outline($color-text, 1px);
 }
 
 @mixin cl-btn-a($line-height-px) {
   // button styled as regular link
-  @extend %cl-a-default;
+  @extend %cl-a;
 
+  background-position: left bottom 0.25em; // depends on underline
+  background-repeat: no-repeat;
+  background-size: 100% 1px;
   border: 0;
   border-radius: 0;
   cursor: pointer;
@@ -129,50 +112,36 @@ $typography-links-underline-offset: px(3);
   min-width: inherit;
   outline: inherit;
   outline-offset: -2px;
-  padding: 0 0 $typography-links-underline-offset;
+  padding: 0;
   text-align: inherit;
+  text-decoration: underline;
   vertical-align: inherit;
 
-  &:hover {
-    $gradient-transparent: linear-gradient(transparent, transparent);
+  &:focus {
+    color: var(--cl-color-link);
+  }
 
-    background-image:
-      $gradient-transparent, $gradient-transparent,
-      linear-gradient(to right, $color-ci-silver, $color-ci-silver);
-    color: inherit;
+  &:hover {
+    color: var(--cl-color-hover);
     opacity: inherit;
-    text-decoration: inherit;
   }
 }
 
-%cl-a-default {
-  @include typography-links(
-    $color-text,
-    $color-text,
-    2px,
-    rgba($color-ci-silver, 0.35),
-    $color-ci-silver
-  );
-}
-
-%cl-a-primary {
-  @include typography-links($color-text, $color-text, 2px, $color-ci-red, $color-ci-silver);
-}
-
-%cl-a-secondary {
-  @include typography-links($color-text, $color-text, 2px, $color-ci-blue, $color-ci-silver);
+%cl-a {
+  @include typography-link(var(--cl-color-link), $color-ci-red);
+  @include cl-color-focus-outline(var(--cl-color-link), 1px);
 }
 
 %cl-a-text {
-  @include typography-links($color-text, $color-text, 2px, $color-ci-silver, $color-text);
+  @include typography-link(var(--cl-color-text), $color-ci-ash);
 }
 
 %cl-a-transparent {
-  @include typography-links($color-text, $color-text, 2px, transparent, $color-ci-silver);
+  @include typography-link(var(--cl-color-text), $color-ci-ash);
 }
 
 %cl-a-none {
-  @include typography-links($color-text, $color-text, 2px, transparent, transparent);
+  @include typography-link(var(--cl-color-text), $color-ci-ash);
 }
 
 %cl-a-btn {
@@ -183,7 +152,7 @@ $typography-links-underline-offset: px(3);
   border: 0;
   display: inline-block;
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0.025em;
   line-height: 1.5em; // for underline spacing
   margin-top: 0;
@@ -197,170 +166,314 @@ $typography-links-underline-offset: px(3);
   letter-spacing: 0.025em;
 }
 
-%h1 {
-  @include typography-font($typography-font-list-sans, 400, px(38), px(52));
-
-  color: $color-ci-night;
+// body md: 20 400/700
+// body sm: 14 400/700
+
+$typography-responsive-scale: 0.8;
+
+%cl-p-x-large {
+  // body xl: 32 700
+  @include typography-font(
+    $typography-sans-font-list,
+    400,
+    px(32),
+    px(32 * $typography-sans-line-height),
+    0.01em,
+    100,
+    -0.1em
+  );
 
-  @if mixin-exists('media-breakpoint-only') {
-    // we might be used without bootstrap
-    @include media-breakpoint-only(xs) {
-      @include typography-font($typography-font-list-sans, 400, px(26), 1.3em);
-    }
+  b,
+  strong {
+    font-weight: 700;
   }
-}
 
-%h2 {
-  @include typography-font($typography-font-list-sans, 500, px(30), 1.25em);
-
-  color: $color-ci-dusk;
+  .cl-btn-a {
+    @include cl-btn-a(34);
+  }
 
   @if mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
-      @include typography-font($typography-font-list-sans, 400, px(26), 1.3em);
+      @include typography-font(
+        $typography-sans-font-list,
+        400,
+        px(32 * $typography-responsive-scale),
+        px(32 * $typography-responsive-scale * $typography-sans-line-height),
+        0.01em,
+        100,
+        -0.1em
+      );
     }
   }
 }
 
-%h3 {
-  @include typography-font($typography-font-list-sans, 600, px(24), 1.25em);
+%cl-p-large {
+  // body lg: 24 700
+  @include typography-font(
+    $typography-sans-font-list,
+    400,
+    px(24),
+    px(24 * $typography-sans-line-height),
+    0.01em,
+    100,
+    -0.1em
+  );
 
-  color: $color-ci-dusk;
+  b,
+  strong {
+    font-weight: 700;
+  }
+
+  .cl-btn-a {
+    @include cl-btn-a(34);
+  }
 
   @if mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
-      @include typography-font($typography-font-list-sans, 300, px(20), 1.25em);
+      @include typography-font(
+        $typography-sans-font-list,
+        400,
+        px(24 * $typography-responsive-scale),
+        px(24 * $typography-responsive-scale * $typography-sans-line-height),
+        0.01em,
+        100,
+        -0.1em
+      );
     }
   }
 }
 
-%h4 {
-  @include typography-font($typography-font-list-sans, 600, px(22), 1.5em);
+%cl-p-medium {
+  // body md: 20 400/700
+  @include typography-font(
+    $typography-sans-font-list,
+    400,
+    px(20),
+    px(20 * $typography-sans-line-height),
+    0.01em,
+    100,
+    -0.1em
+  );
+
+  b,
+  strong {
+    font-weight: 700;
+  }
 
-  color: $color-ci-dusk;
+  .cl-btn-a {
+    @include cl-btn-a(27);
+  }
 
   @if mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
-      @include typography-font($typography-font-list-sans, 400, px(16), 1.5em);
+      @include typography-font(
+        $typography-sans-font-list,
+        400,
+        px(20 * $typography-responsive-scale),
+        px(20 * $typography-responsive-scale * $typography-sans-line-height),
+        0.01em,
+        100,
+        -0.1em
+      );
     }
   }
 }
 
-%p-large {
-  @include typography-font($typography-font-list-sans, 300, px(24), px(34));
-
-  color: $color-text;
+%cl-p-small {
+  // body sm: 14 400/700
+
+  @include typography-font(
+    $typography-sans-font-list,
+    400,
+    px(14),
+    px(14 * $typography-sans-line-height),
+    0.01em,
+    100,
+    -0.1em
+  );
 
   b,
   strong {
-    font-weight: 500;
+    font-weight: 700;
   }
 
   .cl-btn-a {
-    @include cl-btn-a(34);
+    @include cl-btn-a(21);
   }
 
   @if mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
-      @include typography-font($typography-font-list-sans, 300, px(20), 1.5em);
+      @include typography-font(
+        $typography-sans-font-list,
+        400,
+        px(14 * $typography-responsive-scale),
+        px(14 * $typography-responsive-scale * $typography-sans-line-height),
+        0.01em,
+        100,
+        -0.1em
+      );
     }
   }
 }
 
-%p-medium {
-  @include typography-font($typography-font-list-sans, 400, px(18), 1.5em);
-
-  color: $color-text;
-
-  .cl-btn-a {
-    @include cl-btn-a(27);
-  }
+%cl-h0 {
+  @include typography-font(
+    $typography-sans-font-list,
+    700,
+    px(100),
+    px(100 * $typography-sans-line-height),
+    0.01em,
+    100,
+    -0.1em
+  );
 
   @if mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
-      @include typography-font($typography-font-list-sans, 400, px(16), 1.5em);
+      @include typography-font(
+        $typography-sans-font-list,
+        700,
+        px(100 * $typography-responsive-scale),
+        px(100 * $typography-responsive-scale * $typography-sans-line-height),
+        0.01em,
+        100,
+        -0.1em
+      );
     }
   }
 }
 
-%p-small {
-  @include typography-font($typography-font-list-sans, 400, px(14), 1.5em, 0.02em);
-
-  color: $color-text;
-
-  .cl-btn-a {
-    @include cl-btn-a(21);
-  }
+%cl-h1 {
+  @include typography-font(
+    $typography-sans-font-list,
+    700,
+    px(48),
+    px(48 * 1.1),
+    0.01em,
+    100,
+    -0.1em
+  );
 
   @if mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
-      @include typography-font($typography-font-list-sans, 400, px(12), 1.5em, 0.02em);
+      @include typography-font(
+        $typography-sans-font-list,
+        700,
+        px(48 * $typography-responsive-scale),
+        px(48 * $typography-responsive-scale * 1.1),
+        0.01em,
+        100,
+        -0.1em
+      );
     }
   }
 }
 
-%p-tiny {
-  @include typography-font($typography-font-list-sans, 700, px(10), 1.2em, 0.1em);
-
-  color: $color-text;
-  text-transform: uppercase;
+%cl-h2 {
+  @include typography-font(
+    $typography-sans-font-list,
+    700,
+    px(40),
+    px(40 * 1.1),
+    0.01em,
+    100,
+    -0.1em
+  );
 
   @if mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
-      @include typography-font($typography-font-list-sans, 700, px(8), 1.2em, 0.1em);
+      @include typography-font(
+        $typography-sans-font-list,
+        700,
+        px(40 * $typography-responsive-scale),
+        px(40 * $typography-responsive-scale * 1.1),
+        0.01em,
+        100,
+        -0.1em
+      );
     }
   }
 }
 
-%p-micro {
-  @include typography-font($typography-font-list-sans, 600, px(8), 1.2em, 0.1em);
+%cl-h3 {
+  @include typography-font(
+    $typography-sans-font-list,
+    700,
+    px(32),
+    px(32 * 1.1),
+    0.01em,
+    100,
+    -0.1em
+  );
 
-  color: $color-text;
-  font-weight: 600;
+  @if mixin-exists('media-breakpoint-only') {
+    // we might be used without bootstrap
+    @include media-breakpoint-only(xs) {
+      @include typography-font(
+        $typography-sans-font-list,
+        700,
+        px(32 * $typography-responsive-scale),
+        px(32 * $typography-responsive-scale * 1.1),
+        0.01em,
+        100,
+        -0.1em
+      );
+    }
+  }
 }
 
-%p-nav {
-  // for nav entries, button labels etc.
-  @include typography-font($typography-font-list-sans, 600, px(16), 1em, 0.03125em);
+%cl-h4 {
+  @extend %cl-p-medium;
 
-  color: $color-text;
-  font-weight: 600;
+  font-weight: 700;
 }
 
-%p-pre {
-  @include typography-font($typography-font-list-monospace, 400, px(16), 1.5em, 0.025em, 80%);
+%cl-p-nav {
+  // for nav entries, button labels etc.
+  @extend %cl-p-medium;
 
-  background-color: transparent;
-  color: $color-ci-dim;
-  font-stretch: 80%;
-  font-variant-ligatures: none;
+  font-size: px(16);
 
   @if mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
-      @include typography-font($typography-font-list-monospace, 400, px(14), 1.5em, 0.025em, 80%);
+      font-size: px(16 * $typography-responsive-scale);
     }
   }
 }
 
-%p-label {
-  @extend %p-tiny;
+%cl-p-pre {
+  background-color: transparent;
+  font-family: $typography-monospace-font-list;
+  font-variant-ligatures: none;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+  line-height: $typography-monospace-line-height;
+}
+
+%cl-p-tag {
+  @extend %cl-p-label;
 
-  color: $color-ci-blue;
+  font-family: $typography-monospace-font-list;
+  font-size: px(14);
+  font-weight: 500;
+  letter-spacing: 0.025em;
 }
 
-%p-form-label {
-  @extend %p-medium;
+%cl-p-label {
+  @extend %cl-p-small;
+
+  font-weight: 500;
+  letter-spacing: 0.025em;
+}
 
-  color: $color-ci-dim;
-  font-weight: 600;
-  letter-spacing: normal;
-  text-transform: none;
+%cl-p-form-label {
+  // TODO remove
+  @extend %cl-p-label;
 }

package/src/styles/ui.scss

@@ -13,10 +13,13 @@ $castlabs-ui-asset-prefix: '..' !default;
 
 @import 'bootstrap/scss/bootstrap-reboot';
 @import 'bootstrap/scss/helpers/ratio';
-@import 'global';
 @import 'assets/logo';
+@import 'assets/fontawesome';
+@import 'global';
 
+@import 'layout/app';
 @import 'layout/animation';
+@import 'layout/color';
 @import 'layout/grid';
 @import 'layout/helper';
 @import 'layout/section';
@@ -85,10 +88,6 @@ $castlabs-ui-asset-prefix: '..' !default;
 
 // --- globals -----------------------------------------------------------------
 
-.cl-shadow {
-  @include color-shadow-3d;
-}
-
 .cl-hidden {
   visibility: hidden;
 }

package/src/styles/vendors/bootstrap.scss

@@ -14,7 +14,7 @@ $border-radius-lg: $border-radius;
 
 $btn-focus-width: px(2);
 
-$input-btn-focus-color: $color-ci-blue;
+$input-btn-focus-color: $color-ci-sky;
 
 $transition-base: all 0.1s ease-in-out;