@ptsecurity/mosaic 14.7.2 → 15.0.0

package/core/styles/theming/_index.scss

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

package/core/styles/theming/_scrollbars.scss

@@ -0,0 +1,133 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../functions/string' as *;
+@use '../tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-scrollbar {
+    //firefox
+    scrollbar-width: auto;
+
+    // webkit
+    &::-webkit-scrollbar,
+    ::-webkit-scrollbar {
+        width: var(--mc-scrollbar-size-track-width, map.get($tokens, scrollbar-size-track-width));
+    }
+
+    &::-webkit-scrollbar-thumb,
+    ::-webkit-scrollbar-thumb {
+        width: var(--mc-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width));
+        border-width: var(
+            --mc-scrollbar-size-thumb-inset-border-width,
+            map.get($tokens, scrollbar-size-thumb-border-width)
+        );
+        border-radius: var(
+            --mc-scrollbar-size-thumb-inset-border-radius,
+            map.get($tokens, scrollbar-size-thumb-border-radius)
+        );
+    }
+
+    &::-webkit-scrollbar-button,
+    ::-webkit-scrollbar-button {
+        display: none;
+
+        width: var(--mc-scrollbar-size-arrow-icon-width, map.get($tokens, scrollbar-size-arrow-icon-width));
+        height: var(--mc-scrollbar-size-arrow-icon-height, map.get($tokens, scrollbar-size-arrow-icon-height));
+    }
+}
+
+@mixin mc-scrollbar-theme($theme) {
+    $scrollbar: map.get(map.get($theme, components), scrollbar);
+    $thumb: map.get($scrollbar, thumb);
+    $arrow: map.get($scrollbar, arrow);
+
+    .mc-scrollbar {
+        // firefox
+        scrollbar-color: map.get($thumb, normal) map.get($scrollbar, track);
+
+        // webkit
+        &::-webkit-scrollbar,
+        ::-webkit-scrollbar {
+            background-color: map.get($scrollbar, track);
+        }
+
+
+        &::-webkit-scrollbar-corner,
+        ::-webkit-scrollbar-corner {
+            background-color: map.get($scrollbar, corner-background);
+        }
+
+        &::-webkit-scrollbar-thumb,
+        ::-webkit-scrollbar-thumb {
+            background-color: map.get($thumb, normal);
+
+            border-color: map.get($scrollbar, track);
+            border-style: solid;
+
+            &:hover {
+                background-color: map.get($thumb, hover);
+            }
+
+            &:disabled {
+                background-color: map.get($thumb, disabled);
+            }
+
+            &:active {
+                background-color: map.get($thumb, active);
+            }
+        }
+
+        /* stylelint-disable */
+        &::-webkit-scrollbar-button,
+        ::-webkit-scrollbar-button {
+            background-color: map.get($arrow, background);
+            background-size: 10px 10px;
+            background-repeat: no-repeat;
+            background-position: center center;
+
+            &:single-button {
+                &:horizontal:decrement {
+                    @include arrow-image(right, map.get($arrow, normal));
+                }
+
+                &:horizontal:increment {
+                    @include arrow-image(left, map.get($arrow, normal));
+                }
+
+                &:vertical:decrement {
+                    @include arrow-image(up, map.get($arrow, normal));
+                }
+
+                &:vertical:increment {
+                    @include arrow-image(down, map.get($arrow, normal));
+                }
+            }
+
+            // disable double-button
+            &:vertical:start:increment,
+            &:vertical:end:decrement,
+            &:horizontal:end:increment,
+            &:horizontal:end:decrement {
+                display: none;
+            }
+        }
+        /* stylelint-enable */
+    }
+}
+
+@mixin arrow-image($direction, $color) {
+    $color: str-replace('#{$color}', '#', '%23');
+
+    @if $direction == up {
+        background-image: url('data:image/svg+xml;utf8,<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 4L4 0L8 4H0Z" fill="#{$color}"/></svg>');
+    } @else if $direction == left {
+        background-image: url('data:image/svg+xml;utf8,<svg width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.354973 0.111252L3.64503 3.40028C3.84808 3.60327 3.84107 3.91407 3.64503 4.11011L0.354973 7.40017C0.15192 7.60322 0 7.53112 0 7.25478V0.256747C0 -0.0128497 0.158927 -0.0847332 0.354973 0.111252Z" fill="#{$color}"/></svg>');
+    } @else if $direction == down {
+        background-image: url('data:image/svg+xml;utf8,<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L4 4L8 0H0Z" fill="#{$color}"/></svg>');
+    } @else if $direction == right {
+        background-image: url('data:image/svg+xml;utf8,<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.64975 0.111682C3.8458 -0.0845414 4.00472 -0.0128511 4.00472 0.256746V7.25478C4.00472 7.53112 3.8528 7.6034 3.64975 7.4006L0.359696 4.11454C0.163649 3.91873 0.156643 3.60794 0.359696 3.40471L3.64975 0.111682Z" fill="#{$color}"/></svg>');
+    }
+}

package/core/styles/theming/_theming.scss

@@ -0,0 +1,155 @@
+@use 'sass:map';
+@use 'sass:meta';
+
+@use 'components-theming' as *;
+
+@function mc-contrast($palette, $hue) {
+    @return map.get(map.get($palette, contrast), $hue);
+}
+
+@function mc-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': mc-contrast($base-palette, $hue)));
+    }
+
+    @return $result;
+}
+
+@function mc-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 mc-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 mc-core-theme($theme) {
+    .mc-app-background {
+        $background: map.get($theme, background);
+        $foreground: map.get($theme, foreground);
+
+        background-color: mc-color($background, background);
+        color: mc-color($foreground, text);
+    }
+
+    .mc-theme-loaded-marker {
+        display: none;
+    }
+
+    .mc-primary {
+        color: mc-color(map.get($theme, primary));
+    }
+
+    .mc-error {
+        color: mc-color(map.get($theme, error));
+    }
+
+    .mc-warning {
+        color: mc-color(map.get($theme, warning));
+    }
+
+    .mc-success {
+        color: mc-color(map.get($theme, success));
+    }
+
+    .mc-info {
+        color: mc-color(map.get($theme, info));
+    }
+}
+
+@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'),
+    );
+}
+
+@function _theme_background($tokens, $scheme) {
+    @return (
+        background: map.get($tokens, '#{$scheme}-background-background'),
+        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 _theme_palette($tokens, $scheme, $name) {
+    @return mc-palette(
+        map.get($tokens, '#{$scheme}-#{$name}-palette'), map.get($tokens, '#{$scheme}-#{$name}-default')
+    )
+}
+
+@function mc-light-theme($tokens) {
+    $scheme: 'light-color-scheme';
+
+    @return (
+        is-dark: false,
+
+        background: _theme_background($tokens, $scheme),
+        foreground: _theme_foreground($tokens, $scheme),
+
+        primary: _theme_palette($tokens, $scheme, primary),
+        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: mc-components-theme($tokens, $scheme)
+    );
+}
+
+@function mc-dark-theme($tokens) {
+    $scheme: 'dark-color-scheme';
+
+    @return (
+        is-dark: true,
+
+        background: _theme_background($tokens, $scheme),
+        foreground: _theme_foreground($tokens, $scheme),
+
+        primary: _theme_palette($tokens, $scheme, primary),
+        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: mc-components-theme($tokens, $scheme)
+    );
+}

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 mc-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 _mc-get-type-value($config, $level, $name) {
+    @return map.get(map.get($config, $level), $name);
+}
+
+@function mc-font-size($config, $level) {
+    @return _mc-get-type-value($config, $level, font-size);
+}
+
+@function mc-line-height($config, $level) {
+    @return _mc-get-type-value($config, $level, line-height);
+}
+
+@function mc-font-weight($config, $level) {
+    @return _mc-get-type-value($config, $level, font-weight);
+}
+
+@function mc-letter-spacing($config, $level) {
+    @return _mc-get-type-value($config, $level, letter-spacing);
+}
+
+@function mc-text-transform($config, $level) {
+    @return _mc-get-type-value($config, $level, text-transform);
+}
+
+@function mc-font-feature-settings($config, $level) {
+    @return _mc-get-type-value($config, $level, font-feature-settings);
+}
+
+// Gets the font-family from a typography config and removes the quotes around it.
+@function mc-font-family($config, $level: null) {
+    $font-family: map.get($config, font-family);
+
+    @if $level != null {
+        $font-family: _mc-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 mc-typography-level-to-styles($config, $level) {
+    $font-size: mc-font-size($config, $level);
+    $font-weight: mc-font-weight($config, $level);
+    $line-height: mc-line-height($config, $level);
+    $font-family: mc-font-family($config, $level);
+    $text-transform: mc-text-transform($config, $level);
+    $font-feature-settings: mc-font-feature-settings($config, $level);
+
+    font: $font-weight #{$font-size}/#{$line-height} $font-family;
+    letter-spacing: mc-letter-spacing($config, $level);
+    text-transform: mc-text-transform($config, $level);
+    font-feature-settings: mc-font-feature-settings($config, $level);
+}

package/core/styles/typography/_typography.scss

@@ -0,0 +1,180 @@
+@use 'sass:map';
+
+@use 'typography-utils' as *;
+
+
+@function mc-typography-config($tokens) {
+    $font-family: map.get($tokens, font-family-base);
+    $typography: map.get(map.get($tokens, mosaic), 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-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-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)
+    );
+
+    @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));
+}
+
+@function mc-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));
+}
+
+
+@mixin mc-base-typography($config) {
+    .mc-display-1 {
+        @include mc-typography-level-to-styles($config, display-1);
+    }
+
+    .mc-display-2 {
+        @include mc-typography-level-to-styles($config, display-2);
+    }
+
+    .mc-display-3 {
+        @include mc-typography-level-to-styles($config, display-3);
+    }
+
+    .mc-headline {
+        @include mc-typography-level-to-styles($config, headline);
+    }
+
+    .mc-subheading {
+        @include mc-typography-level-to-styles($config, subheading);
+    }
+
+    .mc-title {
+        @include mc-typography-level-to-styles($config, title);
+    }
+
+    .mc-body {
+        @include mc-typography-level-to-styles($config, body);
+    }
+
+    .mc-body_tabular {
+        @include mc-typography-level-to-styles($config, body-tabular);
+    }
+
+    .mc-body_strong {
+        @include mc-typography-level-to-styles($config, body-strong);
+    }
+
+    .mc-body_caps {
+        @include mc-typography-level-to-styles($config, body-caps);
+    }
+
+    .mc-body_mono {
+        @include mc-typography-level-to-styles($config, body-mono);
+    }
+
+    .mc-caption {
+        @include mc-typography-level-to-styles($config, caption);
+    }
+
+    .mc-caption_tabular {
+        @include mc-typography-level-to-styles($config, caption-tabular);
+    }
+
+    .mc-caption_strong {
+        @include mc-typography-level-to-styles($config, caption-strong);
+    }
+
+    .mc-caption_caps {
+        @include mc-typography-level-to-styles($config, caption-caps);
+    }
+
+    .mc-caption_mono {
+        @include mc-typography-level-to-styles($config, caption-mono);
+    }
+
+    .mc-small-text {
+        @include mc-typography-level-to-styles($config, small-text);
+    }
+
+    .mc-extra-small-text {
+        @include mc-typography-level-to-styles($config, extra-small-text);
+    }
+}
+
+@mixin mc-markdown-base-typography($config) {
+    // h1, h2, h3, h4, h5, h6
+    @for $i from 1 through 6 {
+        .md-h#{$i} {
+            @include mc-typography-level-to-styles($config, md-h#{$i});
+        }
+    }
+
+    .md-body {
+        @include mc-typography-level-to-styles($config, md-body);
+    }
+
+    .md-body-mono {
+        @include mc-typography-level-to-styles($config, md-body-mono);
+    }
+
+    .md-caption {
+        @include mc-typography-level-to-styles($config, md-caption);
+    }
+
+    .md-table-cell {
+        @include mc-typography-level-to-styles($config, md-table-cell);
+    }
+
+    .md-table-header {
+        @include mc-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;
+        }
+    }
+}