@castlabs/ui 4.18.2

package/src/styles/layout/typography.scss

@@ -0,0 +1,321 @@
+////
+/// @group layout
+/// @access public
+////
+
+// This file defines our basic typography rules.
+
+@import '../../fonts/OpenSansVariable/OpenSansVariable';
+@import '../../fonts/FontAwesome5/FontAwesome5';
+@import '../../fonts/NotoSansMono/NotoSansMono';
+@import 'typography.variables';
+
+// --- text --------------------------------------------------------------------
+
+html {
+  font-size: 16px; // root font size
+}
+
+html,
+body {
+  @extend %p-medium;
+
+  color: $color-text;
+  word-wrap: break-word;
+}
+
+.cl-p {
+  overflow-wrap: anywhere;
+}
+
+.cl-p-tiny {
+  @extend %p-tiny;
+
+  font-weight: 700;
+}
+
+.cl-p-small {
+  @extend %p-small;
+}
+
+.cl-p-medium {
+  @extend %p-medium;
+}
+
+.cl-p-large {
+  @extend %p-large;
+
+  + :not(.cl-p-large) {
+    margin-top: $spacing-medium;
+  }
+}
+
+.cl-p-label {
+  @extend %p-label;
+}
+
+.cl-p-form-label {
+  @extend %p-form-label;
+}
+
+.cl-p-nav {
+  @extend %p-nav;
+}
+
+.cl-font-condensed {
+  @extend %cl-font-condensed;
+}
+
+.cl-h1 {
+  @extend %h1;
+
+  @include spacing-before-auto($spacing-large);
+
+  & {
+    overflow-wrap: anywhere;
+  }
+}
+
+.cl-h2 {
+  @extend %h2;
+
+  @include spacing-before-auto($spacing-large);
+
+  & {
+    overflow-wrap: anywhere;
+  }
+}
+
+.cl-h3 {
+  @extend %h3;
+
+  @include spacing-before-auto($spacing-large);
+
+  & {
+    overflow-wrap: anywhere;
+  }
+}
+
+.cl-h4,
+.cl-h5,
+.cl-h6 {
+  @extend %h4;
+
+  margin-top: $spacing-large;
+  overflow-wrap: anywhere;
+}
+
+main {
+  // apply style to typical html elements only in <main>, so it does not interfer with header/footer
+  h1 {
+    @extend %h1;
+
+    @include spacing-before-auto($spacing-small); // h1 is only used in special places
+
+    & {
+      overflow-wrap: anywhere;
+    }
+  }
+
+  h2 {
+    @extend %h2;
+
+    @include spacing-before-auto($spacing-large);
+
+    & {
+      overflow-wrap: anywhere;
+    }
+
+    &:first-child {
+      @include spacing-before-auto($spacing-medium);
+    }
+  }
+
+  h3 {
+    @extend %h3;
+
+    @include spacing-before-auto($spacing-small * 2);
+
+    & {
+      overflow-wrap: anywhere;
+    }
+
+    &:first-child {
+      @include spacing-before-auto($spacing-medium);
+    }
+  }
+
+  h4,
+  h5,
+  h6 {
+    @extend %h4;
+
+    @include spacing-before-auto($spacing-medium);
+
+    & {
+      overflow-wrap: anywhere;
+    }
+  }
+
+  p {
+    overflow-wrap: anywhere;
+  }
+
+  b, // <b> defined just for fallback - don't use!
+  strong {
+    font-weight: 600;
+  }
+
+  small {
+    @extend %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;
+      }
+    }
+  }
+
+  // --- code & monospace --------------------------------------------------------
+
+  pre,
+  kbd,
+  code,
+  samp {
+    @extend %p-pre;
+  }
+
+  code {
+    margin-left: 0.1em;
+    margin-right: 0.1em;
+  }
+
+  pre {
+    background-color: $color-ci-haze;
+    padding: $spacing-tiny;
+
+    code {
+      padding: 0;
+    }
+  }
+
+  kbd {
+    background-color: $color-ci-haze;
+    border: px(1) solid $color-ci-silver;
+    border-radius: px(4);
+    border-width: px(1) px(2) px(2) px(1);
+    color: $color-ci-dim;
+    margin: 0 $spacing-micro;
+    padding: 0 $spacing-micro;
+  }
+
+  // --- block quotes ----------------------------------------------------------
+
+  blockquote {
+    border-left: $bar-ui-width solid $color-ci-smoke;
+    padding-left: calc($spacing-medium - $bar-ui-width);
+
+    &.cl-blockquote-primary {
+      border-left: $bar-ui-width solid $color-primary;
+    }
+
+    &.cl-blockquote-secondary {
+      border-left: $bar-ui-width solid $color-secondary;
+    }
+
+    &.cl-blockquote-light {
+      border-left: $bar-ui-width solid $color-ci-smoke; // same as normal bockquote
+    }
+
+    &.cl-blockquote-dark {
+      border-left: $bar-ui-width solid $color-dark;
+    }
+  }
+
+  // --- lists -------------------------------------------------------------------
+
+  // see Lists.scss
+}
+
+// --- redefine bs utilities we use so we don't need to pull the whole set -----
+
+.cl-text-start,
+.text-start {
+  text-align: left;
+}
+
+.cl-text-center,
+.text-center {
+  text-align: center;
+}
+
+.cl-text-end,
+.text-end {
+  text-align: right;
+}
+
+@each $bp, $px in $grid-breakpoints {
+  .text-#{$bp}-start {
+    @include media-breakpoint-up($bp) {
+      text-align: start;
+    }
+  }
+
+  .text-#{$bp}-center {
+    @include media-breakpoint-up($bp) {
+      text-align: center;
+    }
+  }
+
+  .text-#{$bp}-end {
+    @include media-breakpoint-up($bp) {
+      text-align: end;
+    }
+  }
+
+  .cl-br-#{$bp} {
+    display: none;
+
+    @include media-breakpoint-up($bp) {
+      display: inherit;
+    }
+  }
+}
+
+// --- text select -------------------------------------------------------------
+
+::selection {
+  background: $color-ci-blue;
+  color: $color-ci-white;
+}
+
+// --- text colors -------------------------------------------------------------
+
+.color-ci-blue {
+  color: $color-ci-blue;
+}
+
+.color-ci-red {
+  color: $color-ci-red;
+}

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

@@ -0,0 +1,363 @@
+////
+/// @group layout
+/// @access public
+////
+
+// This file defines our basic typography rules.
+
+$typography-font-list-sans:
+  'Open Sans',
+  -apple-system,
+  blinkmacsystemfont,
+  'Segoe UI',
+  roboto,
+  'Helvetica Neue',
+  arial,
+  sans-serif,
+  'Apple Color Emoji',
+  'Segoe UI Emoji',
+  'Segoe UI Symbol';
+
+$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;
+
+// --- helpers -----------------------------------------------------------------
+
+@mixin typography-font(
+  $font-family: $typography-font-list-sans,
+  $font-weight: $typography-font-weight-base,
+  $font-size: 1em,
+  $line-height: 1.5em,
+  $letter-spacing: 0,
+  $font-stretch: 100%,
+  $force: false
+) {
+  @if $force {
+    @include set-property-if-not(font-stretch, 100%, $font-stretch);
+
+    font-family: $font-family;
+    font-size: $font-size;
+    font-weight: $font-weight;
+    letter-spacing: $letter-spacing;
+    line-height: $line-height;
+  } @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);
+
+    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;
+    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 cl-btn-a($line-height-px) {
+  // button styled as regular link
+  @extend %cl-a-default;
+
+  border: 0;
+  border-radius: 0;
+  cursor: pointer;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: 1.375; // compenate for different browser height
+  margin: 0;
+  min-width: inherit;
+  outline: inherit;
+  outline-offset: -2px;
+  padding: 0 0 $typography-links-underline-offset;
+  text-align: inherit;
+  vertical-align: inherit;
+
+  &:hover {
+    $gradient-transparent: linear-gradient(transparent, transparent);
+
+    background-image: $gradient-transparent, $gradient-transparent,
+      linear-gradient(to right, $color-ci-silver, $color-ci-silver);
+    color: inherit;
+    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-text {
+  @include typography-links($color-text, $color-text, 2px, $color-ci-silver, $color-text);
+}
+
+%cl-a-transparent {
+  @include typography-links($color-text, $color-text, 2px, transparent, $color-ci-silver);
+}
+
+%cl-a-none {
+  @include typography-links($color-text, $color-text, 2px, transparent, transparent);
+}
+
+%cl-a-btn {
+  // a link that is more an embedded button
+  @extend %cl-a-text;
+
+  background-color: transparent;
+  border: 0;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.025em;
+  line-height: 1.5em; // for underline spacing
+  margin-top: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+}
+
+%cl-font-condensed {
+  font-stretch: 80%;
+  letter-spacing: 0.025em;
+}
+
+%h1 {
+  @include typography-font($typography-font-list-sans, 400, px(38), px(52));
+
+  color: $color-ci-night;
+
+  @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);
+    }
+  }
+}
+
+%h2 {
+  @include typography-font($typography-font-list-sans, 500, px(30), 1.25em);
+
+  color: $color-ci-dusk;
+
+  @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);
+    }
+  }
+}
+
+%h3 {
+  @include typography-font($typography-font-list-sans, 600, px(24), 1.25em);
+
+  color: $color-ci-dusk;
+
+  @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);
+    }
+  }
+}
+
+%h4 {
+  @include typography-font($typography-font-list-sans, 600, px(22), 1.5em);
+
+  color: $color-ci-dusk;
+
+  @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);
+    }
+  }
+}
+
+%p-large {
+  @include typography-font($typography-font-list-sans, 300, px(24), px(34));
+
+  color: $color-text;
+
+  b,
+  strong {
+    font-weight: 500;
+  }
+
+  .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.5em);
+    }
+  }
+}
+
+%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);
+  }
+
+  @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);
+    }
+  }
+}
+
+%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);
+  }
+
+  @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);
+    }
+  }
+}
+
+%p-tiny {
+  @include typography-font($typography-font-list-sans, 700, px(10), 1.2em, 0.1em);
+
+  color: $color-text;
+  text-transform: uppercase;
+
+  @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);
+    }
+  }
+}
+
+%p-micro {
+  @include typography-font($typography-font-list-sans, 600, px(8), 1.2em, 0.1em);
+
+  color: $color-text;
+  font-weight: 600;
+}
+
+%p-nav {
+  // for nav entries, button labels etc.
+  @include typography-font($typography-font-list-sans, 600, px(16), 1em, 0.03125em);
+
+  color: $color-text;
+  font-weight: 600;
+}
+
+%p-pre {
+  @include typography-font($typography-font-list-monospace, 400, px(16), 1.5em, 0.025em, 80%);
+
+  background-color: transparent;
+  color: $color-ci-dim;
+  font-stretch: 80%;
+  font-variant-ligatures: none;
+
+  @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%);
+    }
+  }
+}
+
+%p-label {
+  @extend %p-tiny;
+
+  color: $color-ci-blue;
+}
+
+%p-form-label {
+  @extend %p-medium;
+
+  color: $color-ci-dim;
+  font-weight: 600;
+  letter-spacing: normal;
+  text-transform: none;
+}