@castlabs/ui 4.18.2

package/src/fonts/NotoSansMono/NotoSansMono.scss

@@ -0,0 +1,82 @@
+// https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@80..100,100..900
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Noto Sans Mono';
+  font-stretch: 80% 100%;
+  font-style: normal;
+  font-weight: 100 900;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCLwR26eg.woff2')
+    format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Noto Sans Mono';
+  font-stretch: 80% 100%;
+  font-style: normal;
+  font-weight: 100 900;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCCwR26eg.woff2')
+    format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: 'Noto Sans Mono';
+  font-stretch: 80% 100%;
+  font-style: normal;
+  font-weight: 100 900;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCKwR26eg.woff2')
+    format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Noto Sans Mono';
+  font-stretch: 80% 100%;
+  font-style: normal;
+  font-weight: 100 900;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCFwR26eg.woff2')
+    format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Noto Sans Mono';
+  font-stretch: 80% 100%;
+  font-style: normal;
+  font-weight: 100 900;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCJwR26eg.woff2')
+    format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
+    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Noto Sans Mono';
+  font-stretch: 80% 100%;
+  font-style: normal;
+  font-weight: 100 900;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCIwR26eg.woff2')
+    format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Noto Sans Mono';
+  font-stretch: 80% 100%;
+  font-style: normal;
+  font-weight: 100 900;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCGwR0.woff2')
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
+    U+FFFD;
+}

package/src/fonts/OpenSansVariable/OpenSansVariable.scss

@@ -0,0 +1,183 @@
+// https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,80..100,300..800;1,80..100,300..800
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-stretch: 80% 100%;
+  font-style: italic;
+  font-weight: 300 800;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0Udc1UAw.woff2')
+    format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-stretch: 80% 100%;
+  font-style: italic;
+  font-weight: 300 800;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0ddc1UAw.woff2')
+    format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+// @font-face {
+//   font-family: 'Open Sans';
+//   font-style: italic;
+//   font-weight: 300 800;
+//   font-stretch: 80% 100%;
+//   src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0Vdc1UAw.woff2') format('woff2');
+//   unicode-range: U+1F00-1FFF;
+// }
+
+/* greek */
+@font-face {
+  font-family: 'Open Sans';
+  font-stretch: 80% 100%;
+  font-style: italic;
+  font-weight: 300 800;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0adc1UAw.woff2')
+    format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+/* hebrew */
+@font-face {
+  font-family: 'Open Sans';
+  font-stretch: 80% 100%;
+  font-style: italic;
+  font-weight: 300 800;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0bdc1UAw.woff2')
+    format('woff2');
+  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Open Sans';
+  font-stretch: 80% 100%;
+  font-style: italic;
+  font-weight: 300 800;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0Wdc1UAw.woff2')
+    format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
+    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-stretch: 80% 100%;
+  font-style: italic;
+  font-weight: 300 800;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0Xdc1UAw.woff2')
+    format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-stretch: 80% 100%;
+  font-style: italic;
+  font-weight: 300 800;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0Zdc0.woff2')
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
+    U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-stretch: 80% 100%;
+  font-style: normal;
+  font-weight: 300 800;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFWJ0bbck.woff2')
+    format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-stretch: 80% 100%;
+  font-style: normal;
+  font-weight: 300 800;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFUZ0bbck.woff2')
+    format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+// @font-face {
+//   font-family: 'Open Sans';
+//   font-style: normal;
+//   font-weight: 300 800;
+//   font-stretch: 80% 100%;
+//   src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFWZ0bbck.woff2') format('woff2');
+//   unicode-range: U+1F00-1FFF;
+// }
+
+/* greek */
+@font-face {
+  font-family: 'Open Sans';
+  font-stretch: 80% 100%;
+  font-style: normal;
+  font-weight: 300 800;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFVp0bbck.woff2')
+    format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+/* hebrew */
+@font-face {
+  font-family: 'Open Sans';
+  font-stretch: 80% 100%;
+  font-style: normal;
+  font-weight: 300 800;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFV50bbck.woff2')
+    format('woff2');
+  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Open Sans';
+  font-stretch: 80% 100%;
+  font-style: normal;
+  font-weight: 300 800;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFWp0bbck.woff2')
+    format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
+    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-stretch: 80% 100%;
+  font-style: normal;
+  font-weight: 300 800;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFW50bbck.woff2')
+    format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-stretch: 80% 100%;
+  font-style: normal;
+  font-weight: 300 800;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFVZ0b.woff2')
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
+    U+FFFD;
+}

package/src/styles/_global.scss

@@ -0,0 +1,70 @@
+////
+/// @group global
+/// @access public
+////
+
+// This file defines all global variables and helper functions/mixins. It MUST
+// NOT not output any css, as it will be included by every Vue component.
+
+@use 'sass:math';
+
+// -----------------------------------------------------------------------------
+
+@import 'abstracts/tools';
+@import 'abstracts/color';
+@import 'abstracts/layer';
+@import 'abstracts/spacing';
+@import 'vendors/bootstrap';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import 'layout/typography.variables';
+@import 'layout/grid.variables';
+@import 'components/button.variables';
+@import 'components/form.variables';
+@import '../components/ClList/style.variables';
+@import '../components/table/ClTable/style.variables';
+@import '../components/table/ClTableCel/style.variables';
+@import '../components/ClCard/style.variables';
+@import 'vendors/castlabs';
+
+// --- spacings ----------------------------------------------------------------
+
+%spacing-huge {
+  margin-top: $spacing-huge;
+}
+
+%spacing-large {
+  margin-top: $spacing-large;
+}
+
+%spacing-medium {
+  margin-top: $spacing-medium;
+}
+
+%spacing-small {
+  margin-top: $spacing-small;
+}
+
+%spacing-tiny {
+  margin-top: $spacing-tiny;
+}
+
+%spacing-micro {
+  margin-top: $spacing-micro;
+}
+
+%spacing-none {
+  margin-top: 0;
+}
+
+// --- other -------------------------------------------------------------------
+
+@mixin focus-glow-embed($color) {
+  box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5); // sass-lint:disable-line no-color-literals
+  outline: 0;
+}
+
+@mixin focus-glow($color) {
+  &:focus {
+    @include focus-glow-embed($color);
+  }
+}

package/src/styles/abstracts/color.scss

@@ -0,0 +1,127 @@
+////
+/// @group themes
+/// @access public
+////
+
+// Basic/generic color values.
+
+$color-white-100: rgb(255 255 255 / 100%);
+$color-white-95a: rgb(255 255 255 / 95%);
+$color-white-90a: rgb(255 255 255 / 90%);
+$color-white-85a: rgb(255 255 255 / 85%);
+$color-white-80a: rgb(255 255 255 / 80%);
+$color-white-75a: rgb(255 255 255 / 75%);
+$color-white-70a: rgb(255 255 255 / 70%);
+$color-white-65a: rgb(255 255 255 / 65%);
+$color-white-60a: rgb(255 255 255 / 60%);
+$color-white-55a: rgb(255 255 255 / 55%);
+$color-white-50a: rgb(255 255 255 / 50%);
+$color-white-45a: rgb(255 255 255 / 45%);
+$color-white-40a: rgb(255 255 255 / 40%);
+$color-white-35a: rgb(255 255 255 / 35%);
+$color-white-30a: rgb(255 255 255 / 30%);
+$color-white-25a: rgb(255 255 255 / 25%);
+$color-white-20a: rgb(255 255 255 / 20%);
+$color-white-15a: rgb(255 255 255 / 15%);
+$color-white-10a: rgb(255 255 255 / 10%);
+$color-white-05a: rgb(255 255 255 / 5%);
+
+$color-gray-95: #0d0d0d;
+$color-gray-90: #1a1a1a;
+$color-gray-85: #262626;
+$color-gray-80: #333;
+$color-gray-75: #404040;
+$color-gray-70: #4d4d4d;
+$color-gray-65: #595959;
+$color-gray-60: #666;
+$color-gray-55: #737373;
+$color-gray-50: #808080;
+$color-gray-45: #8c8c8c;
+$color-gray-40: #999;
+$color-gray-35: #a6a6a6;
+$color-gray-30: #b3b3b3;
+$color-gray-25: #c0c0c0;
+$color-gray-20: #ccc;
+$color-gray-15: #d9d9d9;
+$color-gray-10: #e6e6e6;
+$color-gray-05: #f2f2f2;
+
+$color-black-100: rgb(0 0 0 / 100%);
+$color-black-95a: rgb(0 0 0 / 95%);
+$color-black-90a: rgb(0 0 0 / 90%);
+$color-black-85a: rgb(0 0 0 / 85%);
+$color-black-80a: rgb(0 0 0 / 80%);
+$color-black-75a: rgb(0 0 0 / 75%);
+$color-black-70a: rgb(0 0 0 / 70%);
+$color-black-65a: rgb(0 0 0 / 65%);
+$color-black-60a: rgb(0 0 0 / 60%);
+$color-black-55a: rgb(0 0 0 / 55%);
+$color-black-50a: rgb(0 0 0 / 50%);
+$color-black-45a: rgb(0 0 0 / 45%);
+$color-black-40a: rgb(0 0 0 / 40%);
+$color-black-35a: rgb(0 0 0 / 35%);
+$color-black-30a: rgb(0 0 0 / 30%);
+$color-black-25a: rgb(0 0 0 / 25%);
+$color-black-20a: rgb(0 0 0 / 20%);
+$color-black-15a: rgb(0 0 0 / 15%);
+$color-black-10a: rgb(0 0 0 / 10%);
+$color-black-05a: rgb(0 0 0 / 5%);
+
+$color-ci-red: #d2232a;
+$color-ci-blue: #2a80d5; // was #0474dc;
+$color-ci-night: $color-gray-90;
+$color-ci-dusk: $color-gray-75;
+$color-ci-dim: $color-gray-65;
+$color-ci-cloud: #757371;
+$color-ci-silver: #b0b3b6; // ~ $color-gray-30
+$color-ci-smoke: #dad6d6; // ~ $color-gray-15
+$color-ci-haze: #f6f5f5; // ~ $color-gray-05
+$color-ci-white: $color-white-100;
+$color-ci-sand: #fdf5cf;
+
+$color-ci-green: #3fa261; //2a7a5c;  // not used - AA contrast rating
+$color-ci-orange: #e6a707; // fec671; //f18f01;
+$color-ci-magenta: #802392;
+// $color-ci-violet: #805d93; // not used
+// $color-ci-orange: #ffba08; // not used
+// $color-ci-green: #4cb944; // not used
+
+$color-ui-milk: rgb(255 255 255 / 90%);
+
+$color-primary: $color-ci-red;
+$color-secondary: $color-ci-blue;
+$color-dark: $color-ci-cloud;
+
+$color-hover-opacity: 0.75;
+
+$color-positive: $color-ci-dim;
+$color-negative: $color-ci-blue;
+$color-neutral: $color-ci-dim;
+
+$color-attention: $color-ci-blue;
+
+$color-text: $color-ci-dim;
+$color-background: $color-white-100;
+$color-code-background: rgb(16 0 0 / 5%); // transparent to work on different colors
+
+$color-line: $color-ci-smoke;
+$color-line-focus: $color-ci-silver;
+
+$color-shadow: $color-black-20a;
+$color-shadow-3d: 1px 1px 2px $color-black-25a;
+$border-ui-radius: 3px;
+$bar-ui-width: px(4);
+
+@mixin color-shadow-3d {
+  border-radius: $border-ui-radius;
+  box-shadow: $color-shadow-3d;
+  overflow: hidden;
+}
+
+@mixin color-focus-outline($color: $color-text, $offset: -2px) {
+  &:focus {
+    outline: 1px dashed $color;
+    outline-offset: $offset;
+    z-index: 100;
+  }
+}

package/src/styles/abstracts/layer.scss

@@ -0,0 +1,10 @@
+////
+/// @group themes
+/// @access public
+////
+
+// Layering / z-index of app
+
+$layer-z-modal: 2000;
+$layer-z-sidenav: 1000;
+$layer-z-content: 0;

package/src/styles/abstracts/spacing.scss

@@ -0,0 +1,35 @@
+////
+/// @group themes
+/// @access public
+////
+
+// Our global spacing values.
+
+$spacing-none: px(0);
+$spacing-micro: px(4);
+$spacing-tiny: px(8);
+$spacing-small: px(16);
+$spacing-medium: px(24);
+$spacing-large: px(48);
+$spacing-huge: px(64);
+
+$header-nav-height: px(40);
+$header-headline-height: px(80);
+
+@mixin spacing-before-auto($value) {
+  margin-bottom: 0;
+  margin-top: $value;
+
+  &:first-child {
+    margin-top: $value - $spacing-small;
+  }
+}
+
+@mixin spacing-before($margin-top) {
+  // move (default) margin to bottom of element
+  margin-top: $margin-top;
+
+  &:first-child {
+    margin-top: $margin-top;
+  }
+}

package/src/styles/abstracts/tools.scss

@@ -0,0 +1,117 @@
+////
+/// @group abstracts
+/// @access public
+////
+
+@use 'sass:math';
+
+/// Convert a px-length to rems. Will stick with pixels
+/// for small sizes. Based on 16px root font size.
+///
+/// @example scss
+///   px(32)
+///
+/// @param {length} $px Amout to convert without units, e.g. `32`.
+/// @return {length} Corresponding rem value, e.g. `2rem`.
+@function px($px) {
+  @return (math.div(math.round(math.div(1rem, 16) * $px * 16), 16)); // based on 16px = 1rem
+}
+
+/// Set a property only if it is not equal to another value.
+///
+/// Useful to minizize / avoid duplicate responsive rules.
+///
+/// @example scss
+///   set-property-if-not(font-size, $somesize, 2rem)
+///
+/// @param {property} $property Property to (not) set.
+/// @param {value} $old-value Old value to check against.
+/// @param {value} $new-value New value to set.
+/// @output Property clause or nothing.
+@mixin set-property-if-not($property, $old-value, $new-value) {
+  @if $old-value != $new-value {
+    #{$property}: $new-value;
+  }
+}
+
+/// Add a fontawesome icon via codepoint.
+///
+/// @example scss
+///   @include cl-fontawesome('\f2bd');
+///
+/// @param {value} $content UTF8 codepoint.
+/// @output Property clause.
+@mixin cl-fontawesome($codepoint) {
+  content: $codepoint;
+  display: inline-block;
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+  line-height: 1;
+  position: relative;
+  top: 0.1em;
+}
+
+/// Add a fontawesome icon ::after an element.
+///
+/// @example scss
+///   @include cl-fontawesome-after('\f2bd', 0, .5em, .25em);
+///
+/// @param {value} $codepoint UTF8 codepoint.
+/// @param {value} $offset Optional horizontal offset (em). Defaults to 0.
+/// @param {value} $scale Optinal icon scale (font-size) of the icon. Defaults to 1.
+/// @param {value} $top Optional vertical offset (em). Defaults to 0.
+/// @output ::after element.
+@mixin cl-fontawesome-after($codepoint, $offset: 0, $scale: 1em, $top: 0) {
+  $cl-fontawesome-box: 1em;
+
+  margin-right: $cl-fontawesome-box;
+  white-space: nowrap;
+
+  &::after {
+    @include cl-fontawesome($codepoint);
+
+    & {
+      @include set-property-if-not(font-size, 1em, $scale);
+
+      font-weight: 400;
+      left: $offset;
+      opacity: 0.5;
+      position: relative;
+      top: $top;
+      width: 0;
+    }
+  }
+}
+
+/// Add a fontawesome icon ::before an element.
+///
+/// @example scss
+///   @include cl-fontawesome-before('\f2bd', 0, .5em, .25em);
+///
+/// @param {value} $codepoint UTF8 codepoint.
+/// @param {value} $offset Optional horizontal offset (em). Defaults to 0.
+/// @param {value} $scale Optinal icon scale (font-size) of the icon. Defaults to 1.
+/// @param {value} $top Optional vertical offset (em). Defaults to 0.
+/// @output ::before element.
+@mixin cl-fontawesome-before($codepoint, $offset: 0, $scale: 1em, $top: 0) {
+  $cl-fontawesome-box: 1em;
+
+  margin-left: $cl-fontawesome-box;
+  white-space: nowrap;
+
+  &::before {
+    @include cl-fontawesome($codepoint);
+
+    & {
+      @include set-property-if-not(font-size, 1em, $scale);
+
+      font-weight: 400;
+      opacity: 0.5;
+      position: relative;
+      right: $cl-fontawesome-box - $offset;
+      text-align: right;
+      top: $top;
+      width: 0;
+    }
+  }
+}

package/src/styles/assets/logo.scss

@@ -0,0 +1,22 @@
+////
+/// @group global
+/// @access public
+////
+
+// This file contains inline css assets.
+
+.cl-asset-logo {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgNTAiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+IC5zdDB7ZmlsbDojRDIyMzJBO30gLnN0MXtmaWxsOiNGRkZGRkY7fSA8L3N0eWxlPjxyZWN0IGNsYXNzPSJzdDAiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHg9IjUxLjUiIGNsYXNzPSJzdDAiIHdpZHRoPSIxOTguNSIgaGVpZ2h0PSI1MCIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xNSA0Mi4zYzEuNy0yLjQgOS4xLTEyLjkgMTEuNC0xNi44IC0wLjgtMi4zLTYuNS0xNC44LTcuOS0xNy4ybDIuMi0xLjdDMjMuOCAxMC44IDMxIDIxIDM0LjUgMjUuNSAzMiAyOC4xIDIxLjMgMzkuMyAxNi44IDQ0TDE1IDQyLjN6Ii8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTcyLjQgMzkuM2MtMSAwLjctMi45IDEuNi02IDEuNiAtNC4zIDAtOC44LTIuNS04LjgtOCAwLTcuMiA1LjEtMTAuMyA5LjctMTAuMyAxLjggMCAzLjUgMC40IDQuNCAxLjEgMCAwLjgtMC40IDEuOS0xIDIuOGgtMC4yYy0wLjYtMC44LTItMi4xLTQuNC0yLjEgLTIuNyAwLTUgMi4yLTUgNi40IDAgNiAzLjEgOC44IDcuNCA4LjggMS41IDAgMy4xLTAuOSAzLjYtMS4yTDcyLjQgMzkuM3oiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNOTcuNSA0MGMtMC41IDAuMy0xLjMgMC45LTIuOSAwLjkgLTEuOSAwLTIuNi0wLjgtMy0xLjYgLTEuMiAwLjgtMi42IDEuNi01LjYgMS42IC0yLjggMC00LjctMS42LTQuNy0zLjcgMC00LjkgNi41LTYuNCA5LjktNy40VjI5YzAtMi41LTAuNy00LjYtMy41LTQuNiAtMyAwLTQgMi40LTQuNyAzLjhoLTAuM2MtMC40LTAuNS0wLjctMC44LTEtMS41IDEuMS0xLjUgMy41LTQgNy42LTQgNC4zIDAgNS4yIDIuMyA1LjIgNi4xdjUuNGMwIDIuNiAwIDUuNSAyLjEgNS41IDAuNCAwIDAuNS0wLjEgMC43LTAuMkw5Ny41IDQwek05MC44IDMxLjdjLTIuMiAwLTUuOSAwLjktNS45IDQuNSAwIDIuMiAxLjQgMy40IDMuNSAzLjQgMS43IDAgMi42LTEuMiAyLjktMS41di02LjRIOTAuOHoiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTE2LjYgMjguM2MwLTEuNy0xLjItNC40LTMuNy00LjQgLTEuNCAwLTIuNCAxLTIuNCAyLjcgMCA0LjMgOC40IDMuMSA4LjQgOS4xIDAgMy42LTIuOSA1LjMtNi41IDUuMyAtMi41IDAtMy44LTAuNi00LjgtMS4xIC0wLjYtMS43LTAuNy0zLjYtMC43LTUuMWgxYzAuOCAyLjUgMiA0LjkgNS4xIDQuOSAxLjcgMCAyLjctMS41IDIuNy0yLjggMC01LjEtOC40LTMuMy04LjQtOS41IDAtMy4xIDIuOC00LjggNi00LjggMiAwIDMuMiAwLjYgNCAxLjEgMC40IDEuNCAwLjUgMi42IDAuNSA0LjZIMTE2LjZ6Ii8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTEzOS45IDM5LjdjLTAuNSAwLjItMi42IDEuMi00LjUgMS4yIC00LjEgMC00LjItMi4xLTQuMi02LjN2LTkuOWMtMC44IDAtMi0wLjEtMi45LTAuNHYtMC44YzEtMC4xIDIuMS0wLjMgMi45LTAuNHYtMS4xYzEtMS4yIDIuMy0yLjUgMy4zLTMuM0wxMzUgMTljLTAuMSAwLjctMC41IDMuMS0wLjUgNC4yIDEuMSAwLjEgMyAwLjMgNCAwLjR2MC44Yy0xIDAuMy0yLjkgMC4zLTQgMC40djguMmMwIDMgMCA2LjIgMy4yIDYuMiAwLjggMCAxLjUtMC4yIDEuOS0wLjNMMTM5LjkgMzkuN3oiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTQ5LjIgMzkuNGwxLjYtMC4xYzEuNy0wLjIgMS43LTAuNCAxLjctNS44VjE4LjFjMC01LjQgMC01LjYtMS43LTUuOGwtMS42LTAuMXYtMWgxMC43djFsLTEuNiAwLjFjLTEuNyAwLjItMS43IDAuNC0xLjcgNS44djIwLjRjMS42IDAuMyAzLjIgMC41IDQuOCAwLjUgNi41IDAgNy0yLjYgNy44LTYuM2wxLjEgMC4yYy0wLjEgMi44LTAuNyA0LjktMS41IDcuM2gtMTkuN1YzOS40eiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xOTYuNiA0MGMtMC41IDAuMy0xLjMgMC45LTIuOSAwLjkgLTEuOSAwLTIuNi0wLjgtMy0xLjYgLTEuMiAwLjgtMi42IDEuNi01LjUgMS42IC0yLjggMC00LjctMS42LTQuNy0zLjcgMC00LjkgNi41LTYuNCA5LjktNy40VjI5YzAtMi41LTAuNy00LjYtMy41LTQuNiAtMyAwLTQgMi40LTQuNyAzLjhoLTAuM2MtMC40LTAuNS0wLjctMC44LTEtMS41IDEuMS0xLjUgMy41LTQgNy42LTQgNC4zIDAgNS4yIDIuMyA1LjIgNi4xdjUuNGMwIDIuNiAwIDUuNSAyLjEgNS41IDAuNCAwIDAuNS0wLjEgMC43LTAuMkwxOTYuNiA0MHpNMTg5LjkgMzEuN2MtMi4yIDAtNS45IDAuOS01LjkgNC41IDAgMi4yIDEuNCAzLjQgMy41IDMuNCAxLjcgMCAyLjYtMS4yIDIuOS0xLjV2LTYuNEgxODkuOXoiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjEwLjQgMjcuOEwyMTAuNCAyNy44YzEuMy0xLjYgNC01LjIgNy44LTUuMiAxLjkgMCAyLjkgMS40IDIuOSAzLjcgMCA2LjQtMy44IDE0LjctMTEuMyAxNC43IC0yLjQgMC0zLjYtMS4yLTMuNi0zLjQgMC0xLjIgMC4zLTIuOCAwLjYtNC41bDIuOC0xNC43YzAuMS0wLjcgMC4zLTEuNyAwLjMtMiAwLTAuNS0wLjItMC44LTAuNi0wLjggLTAuNSAwLTEuNyAwLjUtMi40IDAuOGwtMC4zLTAuOGMxLTAuNyA0LjItMi4zIDUuNS0yLjMgMC42IDAgMC45IDAuMyAwLjkgMS4xIDAgMC41LTAuMiAxLjUtMC4zIDIuNUwyMTAuNCAyNy44ek0yMTEuNiAzOS40YzQuNiAwIDYuMi04LjQgNi4yLTExLjYgMC0xLjgtMC4yLTMuNC0xLjctMy40IC0yLjkgMC02LjcgNi41LTYuNyAxMS42QzIwOS40IDM3LjkgMjEwIDM5LjQgMjExLjYgMzkuNHoiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjQwLjcgMjguM2MwLTEuNy0xLjItNC40LTMuNy00LjQgLTEuNCAwLTIuNCAxLTIuNCAyLjcgMCA0LjMgOC40IDMuMSA4LjQgOS4xIDAgMy42LTIuOSA1LjMtNi41IDUuMyAtMi41IDAtMy44LTAuNi00LjgtMS4xIC0wLjYtMS43LTAuNy0zLjYtMC43LTUuMWgxYzAuOCAyLjUgMiA0LjkgNS4xIDQuOSAxLjcgMCAyLjctMS41IDIuNy0yLjggMC01LjEtOC40LTMuMy04LjQtOS41IDAtMy4xIDIuOC00LjggNi00LjggMiAwIDMuMiAwLjYgNCAxLjEgMC40IDEuNCAwLjUgMi42IDAuNSA0LjZIMjQwLjd6Ii8+PC9zdmc+');
+  background-size: cover;
+  display: inline-block;
+  height: 1em;
+  width: 5em;
+}
+
+.cl-asset-cookie {
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NyAxMTQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCI+PHN0eWxlPi5zdDB7ZmlsbDojZTU5YjM0fS5zdDJ7ZmlsbDojNmEzMDAwfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTgzLjIgNDYuOWwtOS44LTE4LjVjNS45LTEuMyA5LjYtNS4zIDExLjUtNy4zbDExLjUgNi43Yy0xLjggMi0xMy4yIDE5LjEtMTMuMiAxOS4xek0yNC4xIDExMC41Qy0yNiA5MS4xIDExLjggMTUuMSA0OC42IDBsMTEuNSA2LjctMzYgMTAzLjh6Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTYzLjYgMjYuNmwtMTEtMTAuN2MyLjcgMS42IDYuNCAxLjUgMTAuNC0uN2wxMS41IDYuN2MtNCAyLjEtMTAuOSA0LjctMTAuOSA0Ljd6Ii8+PHBhdGggZD0iTTk2LjQgMjcuOWMzLjEgMjkuMy0xNi45IDY0LjgtNDIuMSA3OS43LTIzLjUgMTMuNi00Mi42IDIuNy00Mi43LTI0LjMuMy0yOS4zIDIxLjMtNjQuNyA0OC41LTc2LjYtMi43IDEwLjggMi43IDIxLjIgMTQuNCAxNS4yLS45IDE2LjQgMTIuOSAxNiAyMS45IDZ6IiBmaWxsPSIjZmZiNDUwIi8+PHBhdGggY2xhc3M9InN0MiIgZD0iTTY4LjcgNzYuM2MtNC41IDEuNy03LjggMTQuMiAwIDEwLjkgNC41LTEuNiA3LjgtMTQuMiAwLTEwLjl6TTQ4LjggNjMuOGMxMi4yLTQtMiAyMC43LTQuNyA4LjIgMC0zIDIuMS02LjcgNC43LTguMnpNNzIuNyA0Mi45YzcuOC0zLjMgNC41IDkuMyAwIDExLTcuOCAzLjMtNC41LTkuMyAwLTExek0zMy44IDg4YzcuOC0zLjMgNC41IDkuMyAwIDEwLjktNy43IDMuNC00LjQtOS4yIDAtMTAuOXpNNTAuOCAyNy44YzcuOC0zLjMgNC41IDkuMyAwIDExLTcuOCAzLjMtNC41LTkuMyAwLTExek0zMCA1NC43YzEyLjItNC0yIDIwLjctNC44IDguMi4xLTMgMi4yLTYuNyA0LjgtOC4yeiIvPjwvc3ZnPgo=');
+  background-size: cover;
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+}

package/src/styles/components/button.variables.scss

@@ -0,0 +1,18 @@
+////
+/// @group layout
+/// @access public
+////
+
+$button-hover-opacity: $color-hover-opacity;
+$button-disabled-opacity: 0.33;
+
+@mixin button-focus-outline($color) {
+  .btn-check:focus + &,
+  &:focus {
+    @include color-focus-outline($color, 1px);
+
+    & {
+      box-shadow: none;
+    }
+  }
+}