@ptsecurity/mosaic 14.7.1 → 15.0.0

package/core/styles/theming/_alerts.scss

@@ -0,0 +1,166 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../typography/typography-utils' as *;
+@use '../tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-alert {
+    display: flex;
+    align-items: baseline;
+
+    vertical-align: top;
+    text-align: left;
+
+    border: var(--mc-alert-size-border-width, map.get($tokens, alert-size-border-width)) solid transparent;
+    border-radius: var(--mc-alert-size-border-radius, map.get($tokens, alert-size-border-radius));
+
+    .mc-link {
+        padding-left: 0;
+    }
+
+    .mc-alert__icon {
+        margin-right: var(--mc-alert-size-icon-margin, map.get($tokens, alert-size-icon-margin));
+    }
+
+    padding: {
+        right: calc(
+            var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)}) -
+            var(--mc-alert-size-border-width, #{map.get($tokens, alert-size-border-width)})
+        );
+        left: calc(
+            var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)}) -
+            var(--mc-alert-size-border-width, #{map.get($tokens, alert-size-border-width)})
+        );
+    };
+
+    &:not(.mc-alert_small) {
+        padding: {
+            top: var(--mc-alert-size-vertical-padding, map.get($tokens, alert-size-vertical-padding));
+            bottom: var(--mc-alert-size-vertical-padding, map.get($tokens, alert-size-vertical-padding));
+        };
+    }
+
+    &.mc-alert_small {
+        padding: {
+            top: var(--mc-alert-size-small-vertical-padding, map.get($tokens, alert-size-small-vertical-padding));
+            bottom: var(--mc-alert-size-small-vertical-padding, map.get($tokens, alert-size-small-vertical-padding));
+        };
+    }
+
+    &.mc-alert_dismissible {
+        padding-right: calc(
+            var(--mc-alert-size-right-padding-dismissible, #{map.get($tokens, alert-size-close-button-width)}) +
+            var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)})
+        );
+    }
+}
+
+.mc-alert_dismissible {
+    position: relative;
+
+    .mc-alert__close {
+        position: absolute;
+
+        z-index: 10;
+        right: 15px;
+
+        border: 1px solid transparent;
+        outline: 0;
+
+        background: transparent;
+
+        padding: 0;
+
+        cursor: pointer;
+        text-align: center;
+
+        height: auto;
+        min-height: auto;
+    }
+
+    &.mc-alert_small {
+        .mc-alert__close {
+            top: 10px;
+        }
+    }
+
+    &:not(.mc-alert_small) {
+        .mc-alert__close {
+            top: 14px;
+        }
+    }
+}
+
+@mixin alert-theme($alert) {
+    background-color: map.get($alert, background);
+    border-color: map.get($alert, border);
+
+    .mc-icon.mc-alert__icon {
+        color: map.get($alert, icon);
+    }
+}
+
+@mixin mc-alert-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $alert: map.get(map.get($theme, components), alert);
+
+    $is-dark: map.get($theme, is-dark);
+
+    .mc-alert__close:focus {
+        outline: none;
+    }
+
+    .mc-alert {
+        color: map.get($foreground, text);
+    }
+
+    .mc-alert_error {
+        @include alert-theme(map.get($alert, error));
+    }
+
+    .mc-alert_warning {
+        @include alert-theme(map.get($alert, warning));
+    }
+
+    .mc-alert_success {
+        @include alert-theme(map.get($alert, success));
+    }
+
+    .mc-alert_info {
+        @include alert-theme(map.get($alert, info));
+    }
+
+    .mc-alert:not(.mc-alert_error):not(.mc-alert_warning):not(.mc-alert_success):not(.mc-alert_info) {
+        @include alert-theme(map.get($alert, default));
+    }
+}
+
+@mixin mc-alert-typography($config) {
+    .mc-alert:not(.mc-alert_small) {
+        @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-default-body));
+
+        header {
+            @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-default-header));
+        }
+    }
+
+    .mc-alert.mc-alert_small {
+        @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-small-body));
+
+        header {
+            @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-small-header));
+        }
+
+        .mc-link__text {
+            @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-small-body));
+        }
+    }
+
+    .mc-icon {
+        letter-spacing: unset;
+    }
+}

package/core/styles/theming/_badges.scss

@@ -0,0 +1,142 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../typography/typography-utils' as *;
+@use '../tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-badge {
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+
+    text-align: center;
+    white-space: nowrap;
+
+    border-style: solid;
+
+    box-sizing: border-box;
+
+    &.mc-badge_default {
+        height: var(--mc-badge-size-default-height, map.get($tokens, badge-size-default-height));
+        min-width: var(--mc-badge-size-default-min-width, map.get($tokens, badge-size-default-min-width));
+        padding: var(--mc-badge-size-default-padding, map.get($tokens, badge-size-default-padding));
+        border: {
+            width: var(--mc-badge-size-default-border-width, map.get($tokens, badge-size-default-border-width));
+            radius: var(--mc-badge-size-default-border-radius, map.get($tokens, badge-size-default-border-radius));
+        }
+    }
+
+    &.mc-badge_mini {
+        height: var(--mc-badge-size-mini-height, map.get($tokens, badge-size-mini-height));
+        min-width: var(--mc-badge-size-mini-min-width, map.get($tokens, badge-size-mini-min-width));
+        padding: var(--mc-badge-size-mini-padding, map.get($tokens, badge-size-mini-padding));
+        border: {
+            width: var(--mc-badge-size-mini-border-width, map.get($tokens, badge-size-mini-border-width));
+            radius: var(--mc-badge-size-mini-border-radius, map.get($tokens, badge-size-mini-border-radius));
+        }
+
+    }
+}
+
+
+@mixin mc-badge-color($params) {
+    color: map.get($params, color);
+    border-color: map.get($params, border);
+    background: map.get($params, background);
+}
+
+@mixin mc-badge-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $badge: map.get(map.get($theme, components), badge);
+
+    .mc-badge {
+        color: map.get($foreground, text);
+        border-color: map.get($foreground, border);
+    }
+
+    .mc-badge_solid {
+        &.mc-badge_primary {
+            @include mc-badge-color(map.get($badge, primary_solid));
+        }
+
+        &.mc-badge_second {
+            @include mc-badge-color(map.get($badge, second_solid));
+        }
+
+        &.mc-badge_transparent {
+            @include mc-badge-color(map.get($badge, transparent_solid));
+        }
+
+        &.mc-badge_success {
+            @include mc-badge-color(map.get($badge, success_solid));
+        }
+
+        &.mc-badge_info {
+            @include mc-badge-color(map.get($badge, info_solid));
+        }
+
+        &.mc-badge_warning {
+            @include mc-badge-color(map.get($badge, warning_solid));
+        }
+
+        &.mc-badge_error {
+            @include mc-badge-color(map.get($badge, error_solid));
+        }
+
+        &.mc-badge_light {
+            @include mc-badge-color(map.get($badge, light_solid));
+        }
+    }
+
+    .mc-badge_pastel {
+        &.mc-badge_primary {
+            @include mc-badge-color(map.get($badge, primary_pastel));
+        }
+
+        &.mc-badge_success {
+            @include mc-badge-color(map.get($badge, success_pastel));
+        }
+
+        &.mc-badge_info {
+            @include mc-badge-color(map-get($badge, info_pastel));
+        }
+
+        &.mc-badge_warning {
+            @include mc-badge-color(map.get($badge, warning_pastel));
+        }
+
+        &.mc-badge_error {
+            @include mc-badge-color(map.get($badge, error_pastel));
+        }
+    }
+}
+
+@mixin mc-badge-typography($config) {
+    .mc-badge_default {
+        @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-default-default));
+
+        &.mc-badge_caps {
+            @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-default-caps));
+        }
+
+        &.mc-badge_mono {
+            @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-default-mono));
+        }
+    }
+
+    .mc-badge_mini {
+        @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-mini-default));
+
+        &.mc-badge_caps {
+            @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-mini-caps));
+        }
+
+        &.mc-badge_mono {
+            @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-mini-mono));
+        }
+    }
+}