@koobiq/components 16.0.0-beta.1

package/core/styles/theming/_index.scss

@@ -0,0 +1,2 @@
+@forward 'components-theming';
+@forward 'theming';

package/core/styles/theming/_scrollbars-theme.scss

@@ -0,0 +1,77 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../functions/string' as *;
+
+
+@mixin kbq-scrollbar($tokens) {
+    $border-width: calc(
+        (var(--kbq-scrollbar-size-track-width, map.get($tokens, scrollbar-size-track-width)) -
+        var(--kbq-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width))) / 2
+    );
+
+    //firefox
+    scrollbar-width: auto;
+
+    // webkit
+    &::-webkit-scrollbar,
+    ::-webkit-scrollbar {
+        cursor: default;
+        width: var(--kbq-scrollbar-size-track-width, map.get($tokens, scrollbar-size-track-width));
+    }
+
+    &::-webkit-scrollbar-thumb,
+    ::-webkit-scrollbar-thumb {
+        width: var(--kbq-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width));
+        border-style: solid;
+        border-width: $border-width;
+
+        border-radius: var(
+            --kbq-scrollbar-size-thumb-inset-border-radius,
+            map.get($tokens, scrollbar-size-thumb-border-radius)
+        );
+    }
+
+    &::-webkit-scrollbar-button,
+    ::-webkit-scrollbar-button {
+        display: none;
+    }
+}
+
+
+@mixin kbq-scrollbar-theme($theme) {
+    $scrollbar: map.get(map.get($theme, components), scrollbar);
+
+    .kbq-scrollbar {
+        @include kbq-scrollbar(map.get($theme, tokens));
+
+        // firefox
+        scrollbar-color: map.get($scrollbar, default) transparent;
+
+        // webkit
+        &::-webkit-scrollbar,
+        ::-webkit-scrollbar {
+            background-color: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb,
+        ::-webkit-scrollbar-thumb {
+            border-color: transparent;
+
+            background-clip: content-box;
+            background-color: map.get($scrollbar, default);
+
+            &:hover {
+                background-color: map.get($scrollbar, hover);
+            }
+
+            &:disabled {
+                background-color: map.get($scrollbar, disabled);
+            }
+
+            &:active {
+                background-color: map.get($scrollbar, active);
+            }
+        }
+    }
+}

package/core/styles/theming/_theming.scss

@@ -0,0 +1,144 @@
+@use 'sass:map';
+@use 'sass:meta';
+
+@use 'components-theming' as *;
+
+@function kbq-contrast($palette, $hue) {
+    @return map.get(map.get($palette, contrast), $hue);
+}
+
+@function kbq-palette($base-palette, $default) {
+    $result: map.merge($base-palette, (default: $default));
+
+    // For each hue in the palette, add a "-contrast" color to the map.
+    @each $hue, $color in $base-palette {
+        $result: map.merge($result, ('#{$hue}-contrast': kbq-contrast($base-palette, $hue)));
+    }
+
+    @return $result;
+}
+
+@function kbq-color($palette, $hue: default, $opacity: null) {
+    // If hueKey is a number between zero and one, then it actually contains an
+    // opacity value, so recall this function with the default hue and that given opacity.
+    @if meta.type-of($hue) == number and $hue >= 0 and $hue <= 1 {
+        @return kbq-color($palette, default, $hue);
+    }
+
+    $color: map.get($palette, $hue);
+    $opacity: if($opacity == null, opacity($color), $opacity);
+
+    @return rgba($color, $opacity);
+}
+
+// Mixin that renders all of the core styles that depend on the theme.
+@mixin kbq-core-theme($theme) {
+    .kbq-app-background {
+        $background: map.get($theme, background);
+        $foreground: map.get($theme, foreground);
+
+        background-color: kbq-color($background, background);
+        color: kbq-color($foreground, text);
+    }
+
+    .kbq-theme-loaded-marker {
+        display: none;
+    }
+}
+
+@function _theme_states($tokens, $scheme) {
+    @return (
+        focused-color: map.get($tokens, '#{$scheme}-states-focused-color'),
+        selected-color: map.get($tokens, '#{$scheme}-states-selected-color'),
+        pressed-shadow: map.get($tokens, '#{$scheme}-states-pressed-shadow'),
+        disabled-opacity: map.get($tokens, '#{$scheme}-states-disabled-opacity')
+    );
+}
+
+@function _theme_foreground($tokens, $scheme) {
+    @return (
+        text: map.get($tokens, '#{$scheme}-foreground-text'),
+        text-less-contrast: map.get($tokens, '#{$scheme}-foreground-text-less-contrast'),
+        text-disabled: map.get($tokens, '#{$scheme}-foreground-text-disabled'),
+        text-error: map.get($tokens, '#{$scheme}-foreground-text-error'),
+        text-success: map.get($tokens, '#{$scheme}-foreground-text-success'),
+
+        divider: map.get($tokens, '#{$scheme}-foreground-divider'),
+        border: map.get($tokens, '#{$scheme}-foreground-border'),
+        icon: map.get($tokens, '#{$scheme}-foreground-icon'),
+
+        contrast: map.get($tokens, '#{$scheme}-foreground-contrast'),
+    );
+}
+
+@function _theme_background($tokens, $scheme) {
+    @return (
+        background: map.get($tokens, '#{$scheme}-background-background'),
+        bg: map.get($tokens, '#{$scheme}-background-bg'),
+        background-disabled: map.get($tokens, '#{$scheme}-background-background-disabled'),
+        background-less-contrast: map.get($tokens, '#{$scheme}-background-background-less-contrast'),
+        background-under: map.get($tokens, '#{$scheme}-background-background-under'),
+
+        overlay-hover: map.get($tokens, '#{$scheme}-background-overlay-hover'),
+        overlay-active: map.get($tokens, '#{$scheme}-background-overlay-active'),
+        overlay-disabled: map.get($tokens, '#{$scheme}-background-overlay-disabled')
+    );
+}
+
+@function kbq-palette($base-palette, $default) {
+    @return map.merge($base-palette, (default: $default));
+}
+
+@function _theme_palette($tokens, $scheme, $name) {
+    @return kbq-palette(
+        map.get($tokens, '#{$scheme}-#{$name}-palette'), map.get($tokens, '#{$scheme}-#{$name}-default')
+    )
+}
+
+@function kbq-light-theme($tokens) {
+    $scheme: 'light-color-scheme';
+
+    @return (
+        is-dark: false,
+
+        background: _theme_background($tokens, $scheme),
+        foreground: _theme_foreground($tokens, $scheme),
+
+        theme: _theme_palette($tokens, $scheme, theme),
+        secondary: _theme_palette($tokens, $scheme, secondary),
+        error: _theme_palette($tokens, $scheme, error),
+
+        warning: _theme_palette($tokens, $scheme, warning),
+        success: _theme_palette($tokens, $scheme, success),
+        info: _theme_palette($tokens, $scheme, info),
+
+        states: _theme_states($tokens, $scheme),
+
+        components: kbq-components-theme($tokens, $scheme),
+        tokens: $tokens
+    );
+}
+
+@function kbq-dark-theme($tokens) {
+    $scheme: 'dark-color-scheme';
+
+    @return (
+        is-dark: true,
+
+        background: _theme_background($tokens, $scheme),
+        foreground: _theme_foreground($tokens, $scheme),
+
+        theme: _theme_palette($tokens, $scheme, theme),
+        secondary: _theme_palette($tokens, $scheme, secondary),
+        error: _theme_palette($tokens, $scheme, error),
+
+        warning: _theme_palette($tokens, $scheme, warning),
+        success: _theme_palette($tokens, $scheme, success),
+        info: _theme_palette($tokens, $scheme, info),
+
+        states: _theme_states($tokens, $scheme),
+
+        components: kbq-components-theme($tokens, $scheme),
+        tokens: $tokens
+    );
+}

package/core/styles/theming/prebuilt/light-theme.scss

@@ -0,0 +1,20 @@
+@use 'sass:meta';
+
+// this file used only for generate .css bundle
+@use '../../tokens.kbq.import' as tokens;
+
+$tokens: meta.module-variables(tokens);
+
+@use '../../core';
+@use '../theming';
+@use '../../koobiq-theme' as koobiq-theme;
+
+
+@include core.kbq-core();
+
+// Include all theme styles for the components.
+$theme: theming.kbq-light-theme($tokens);
+@include koobiq-theme.koobiq-theme($theme);
+
+// Include all typography for the components.
+@include koobiq-theme.koobiq-typography($tokens);

package/core/styles/typography/_index.scss

@@ -0,0 +1,2 @@
+@forward 'typography';
+@forward 'typography-utils';

package/core/styles/typography/_typography-utils.scss

@@ -0,0 +1,78 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+
+
+@function kbq-typography-level(
+    $font-size,
+    $line-height: $font-size,
+    $letter-spacing: normal,
+    $font-weight: normal,
+    $font-family: null,
+    $text-transform: null,
+    $font-feature-settings: null
+) {
+    @return (
+        font-size: $font-size,
+        line-height: $line-height,
+        font-weight: $font-weight,
+        font-family: $font-family,
+        letter-spacing: $letter-spacing,
+        text-transform: $text-transform,
+        font-feature-settings: $font-feature-settings
+    );
+}
+
+@function _kbq-get-type-value($config, $level, $name) {
+    @return map.get(map.get($config, $level), $name);
+}
+
+@function kbq-font-size($config, $level) {
+    @return _kbq-get-type-value($config, $level, font-size);
+}
+
+@function kbq-line-height($config, $level) {
+    @return _kbq-get-type-value($config, $level, line-height);
+}
+
+@function kbq-font-weight($config, $level) {
+    @return _kbq-get-type-value($config, $level, font-weight);
+}
+
+@function kbq-letter-spacing($config, $level) {
+    @return _kbq-get-type-value($config, $level, letter-spacing);
+}
+
+@function kbq-text-transform($config, $level) {
+    @return _kbq-get-type-value($config, $level, text-transform);
+}
+
+@function kbq-font-feature-settings($config, $level) {
+    @return _kbq-get-type-value($config, $level, font-feature-settings);
+}
+
+// Gets the font-family from a typography config and removes the quotes around it.
+@function kbq-font-family($config, $level: null) {
+    $font-family: map.get($config, font-family);
+
+    @if $level != null {
+        $font-family: _kbq-get-type-value($config, $level, font-family);
+    }
+
+    // Guard against unquoting non-string values, because it's deprecated.
+    @return if(meta.type-of($font-family) == string, string.unquote($font-family), $font-family);
+}
+
+@mixin kbq-typography-level-to-styles($config, $level) {
+    $font-size: kbq-font-size($config, $level);
+    $font-weight: kbq-font-weight($config, $level);
+    $line-height: kbq-line-height($config, $level);
+    $font-family: kbq-font-family($config, $level);
+    $text-transform: kbq-text-transform($config, $level);
+    $font-feature-settings: kbq-font-feature-settings($config, $level);
+
+    font: $font-weight #{$font-size}/#{$line-height} $font-family;
+    letter-spacing: kbq-letter-spacing($config, $level);
+    text-transform: kbq-text-transform($config, $level);
+    font-feature-settings: kbq-font-feature-settings($config, $level);
+}

package/core/styles/typography/_typography.scss

@@ -0,0 +1,191 @@
+@use 'sass:map';
+
+@use 'typography-utils' as *;
+
+
+@function kbq-typography-config($tokens) {
+    $font-family: map.get($tokens, font-family-base);
+    $typography: map.get(map.get($tokens, koobiq), typography);
+
+    $config: (
+        display-1:              map.get($typography, display-1),
+        display-2:              map.get($typography, display-2),
+        display-3:              map.get($typography, display-3),
+
+        headline:               map.get($typography, headline),
+        subheading:             map.get($typography, subheading),
+        title:                  map.get($typography, title),
+
+        body:                   map.get($typography, body),
+        body-strong:            map.get($typography, body-strong),
+        body-caps:              map.get($typography, body-caps),
+        body-mono:              map.get($typography, body-mono),
+        body-mono-strong:       map.get($typography, body-mono-strong),
+        body-tabular:           map.get($typography, body-tabular),
+
+        caption:                map.get($typography, caption),
+        caption-strong:         map.get($typography, caption-strong),
+        caption-caps:           map.get($typography, caption-caps),
+        caption-mono:           map.get($typography, caption-mono),
+        caption-mono-strong:    map.get($typography, caption-mono-strong),
+        caption-tabular:        map.get($typography, caption-tabular),
+
+        small-text:             map.get($typography, small-text),
+        extra-small-text:       map.get($typography, extra-small-text),
+        extra-small-text-caps:  map.get($typography, extra-small-text-caps),
+        extra-small-text-mono:  map.get($typography, extra-small-text-mono),
+        extra-small-text-strong:  map.get($typography, extra-small-text-strong)
+    );
+
+    @each $key, $level in $config {
+        @if map.get($level, font-family) == null {
+            $new-level: map.merge($level, (font-family: $font-family));
+            $config: map.merge($config, ($key: $new-level));
+        }
+    }
+
+    // Add the base font family to the config.
+    @return map.merge($config, (font-family: $font-family, tokens: $tokens));
+}
+
+@function kbq-markdown-typography-config($tokens) {
+    $font-family: map.get($tokens, font-family-base);
+    $md-typography: map.get(map.get($tokens, md-typography), md-typography);
+
+    $config: (
+        md-h1:              map.get($md-typography, md-h1),
+        md-h2:              map.get($md-typography, md-h2),
+        md-h3:              map.get($md-typography, md-h3),
+        md-h4:              map.get($md-typography, md-h4),
+        md-h5:              map.get($md-typography, md-h5),
+        md-h6:              map.get($md-typography, md-h6),
+
+        md-body:            map.get($md-typography, md-body),
+        md-body-mono:       map.get($md-typography, md-body-mono),
+        md-caption:         map.get($md-typography, md-caption),
+        md-table-cell:      map.get($md-typography, md-table-cell),
+        md-table-header:    map.get($md-typography, md-table-header),
+    );
+
+    @each $key, $level in $config {
+        @if map.get($level, font-family) == null {
+            $new-level: map.merge($level, (font-family: $font-family));
+            $config: map.merge($config, ($key: $new-level));
+        }
+    }
+
+    // Add the base font family to the config.
+    @return map.merge($config, (font-family: $font-family, tokens: $tokens));
+}
+
+
+@mixin kbq-base-typography($config) {
+    .kbq-display-1 {
+        @include kbq-typography-level-to-styles($config, display-1);
+    }
+
+    .kbq-display-2 {
+        @include kbq-typography-level-to-styles($config, display-2);
+    }
+
+    .kbq-display-3 {
+        @include kbq-typography-level-to-styles($config, display-3);
+    }
+
+    .kbq-headline {
+        @include kbq-typography-level-to-styles($config, headline);
+    }
+
+    .kbq-subheading {
+        @include kbq-typography-level-to-styles($config, subheading);
+    }
+
+    .kbq-title {
+        @include kbq-typography-level-to-styles($config, title);
+    }
+
+    .kbq-body {
+        @include kbq-typography-level-to-styles($config, body);
+    }
+
+    .kbq-body_tabular {
+        @include kbq-typography-level-to-styles($config, body-tabular);
+    }
+
+    .kbq-body_strong {
+        @include kbq-typography-level-to-styles($config, body-strong);
+    }
+
+    .kbq-body_caps {
+        @include kbq-typography-level-to-styles($config, body-caps);
+    }
+
+    .kbq-body_mono {
+        @include kbq-typography-level-to-styles($config, body-mono);
+    }
+
+    .kbq-body_mono_strong {
+        @include kbq-typography-level-to-styles($config, body-mono-strong);
+    }
+
+    .kbq-caption {
+        @include kbq-typography-level-to-styles($config, caption);
+    }
+
+    .kbq-caption_tabular {
+        @include kbq-typography-level-to-styles($config, caption-tabular);
+    }
+
+    .kbq-caption_strong {
+        @include kbq-typography-level-to-styles($config, caption-strong);
+    }
+
+    .kbq-caption_caps {
+        @include kbq-typography-level-to-styles($config, caption-caps);
+    }
+
+    .kbq-caption_mono {
+        @include kbq-typography-level-to-styles($config, caption-mono);
+    }
+
+    .kbq-caption_mono_strong {
+        @include kbq-typography-level-to-styles($config, caption-mono-strong);
+    }
+
+    .kbq-small-text {
+        @include kbq-typography-level-to-styles($config, small-text);
+    }
+
+    .kbq-extra-small-text {
+        @include kbq-typography-level-to-styles($config, extra-small-text);
+    }
+}
+
+@mixin kbq-markdown-base-typography($config) {
+    // h1, h2, h3, h4, h5, h6
+    @for $i from 1 through 6 {
+        .md-h#{$i} {
+            @include kbq-typography-level-to-styles($config, md-h#{$i});
+        }
+    }
+
+    .md-body {
+        @include kbq-typography-level-to-styles($config, md-body);
+    }
+
+    .md-body-mono {
+        @include kbq-typography-level-to-styles($config, md-body-mono);
+    }
+
+    .md-caption {
+        @include kbq-typography-level-to-styles($config, md-caption);
+    }
+
+    .md-table-cell {
+        @include kbq-typography-level-to-styles($config, md-table-cell);
+    }
+
+    .md-table-header {
+        @include kbq-typography-level-to-styles($config, md-table-header);
+    }
+}

package/core/styles/visual/_body.scss

@@ -0,0 +1,35 @@
+@use '../../styles/common/size';
+
+
+@mixin body-html() {
+
+    // HTML & Body reset
+    html,
+    body {
+        @include size.square(100%);
+    }
+
+    html {
+        // Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+
+        // Setting @viewport causes scrollbars to overlap content in Edge, so
+        // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
+        -ms-overflow-style: scrollbar;
+
+        -moz-osx-font-smoothing: grayscale;
+
+        // Helps fonts on OSX looks more consistent with other systems
+        // Isn't currently in button styles due to performance concerns
+        -webkit-font-smoothing: antialiased;
+        // Change the default tap highlight to be completely transparent in iOS.
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
+        -webkit-touch-callout: none;
+    }
+
+    body {
+        // remove the margin in all browsers.
+        margin: 0;
+    }
+}

package/core/styles/visual/_index.scss

@@ -0,0 +1,3 @@
+@forward 'body';
+@forward 'layout';
+@forward 'layout-media';

package/core/styles/visual/_layout-media.scss

@@ -0,0 +1,7 @@
+@mixin media-print {
+    @media print {
+        .hide-print:not(.show-print):not(.show) {
+            display: none !important;
+        }
+    }
+}