feat(fluent): add badge styles

telerik · Aug 23, 2022 · 6d0a622 · 6d0a622
1 parent 1041140
commit 6d0a622
Show file tree

Hide file tree

Showing 6 changed files with 375 additions and 2 deletions.
diff --git a/packages/fluent/scss/badge/_layout.scss b/packages/fluent/scss/badge/_layout.scss
@@ -0,0 +1,196 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+@use "../core/color-system" as *;
+
+@mixin kendo-badge--layout() {
+
+    .k-badge {
+        padding-inline: var( --INTERNAL--kendo-badge-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-badge-padding-y, 0 );
+        font-size: var( --INTERNAL--kendo-badge-font-size, 1rem );
+        line-height: var( --INTERNAL--kendo-badge-line-height, normal );
+        border-width: var( --kendo-badge-border-width, #{$kendo-badge-border-width} );
+        border-style: solid;
+        border-color: transparent;
+        box-sizing: border-box;
+        color: inherit;
+        background-color: transparent;
+        text-align: center;
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+    .k-badge > * {
+        color: inherit;
+    }
+
+
+    // Links
+    a.k-badge,
+    .k-badge > a {
+        text-decoration: none;
+    }
+    a.k-badge:hover,
+    .k-badge > a:hover {
+        text-decoration: underline;
+    }
+
+
+    // Icon
+    .k-badge-icon {
+        max-width: 1em;
+        max-height: 1em;
+        font-size: inherit;
+    }
+    .k-badge-icon.k-svg-icon svg {
+        fill: currentColor;
+    }
+
+    // Badge sizes
+    @each $size, $size-props in $kendo-badge-sizes {
+        $_padding-x: map-get( $size-props, padding-x );
+        $_padding-y: map-get( $size-props, padding-y );
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
+
+        .k-badge-#{$size} {
+            --INTERNAL--kendo-badge-padding-x: var( --kendo-badge-#{$size}-padding-x, #{$_padding-x} );
+            --INTERNAL--kendo-badge-padding-y: var( --kendo-badge-#{$size}-padding-y, #{$_padding-y} );
+            --INTERNAL--kendo-badge-font-size: var( --kendo-badge-#{$size}-font-size, #{$_font-size} );
+            --INTERNAL--kendo-badge-line-height: var( --kendo-badge-#{$size}-line-height, #{$_line-height} );
+
+            &:empty {
+                --INTERNAL--kendo-badge-padding-x: var( --kendo-badge-#{$size}-padding-x, #{$_padding-x} );
+                --INTERNAL--kendo-badge-padding-y: var( --kendo-badge-#{$size}-padding-x, #{$_padding-x} );
+            }
+        }
+    }
+
+
+    // Badge shapes
+    .k-badge-rounded {
+        &.k-badge-sm { @include border-radius( $kendo-badge-border-radius-sm ); }
+        &.k-badge-md { @include border-radius( $kendo-badge-border-radius-md ); }
+        &.k-badge-lg { @include border-radius( $kendo-badge-border-radius-lg ); }
+    }
+    .k-badge-pill {
+        border-radius: 5rem;
+    }
+    .k-badge-circle {
+        padding: 0 !important; // sass-lint:disable-line no-important
+        border-radius: 100%;
+        width: 22px;
+        height: 22px;
+
+        &.k-badge-sm {
+            width: $kendo-badge-size-sm;
+            height: $kendo-badge-size-sm;
+        }
+        &.k-badge-md {
+            width: $kendo-badge-size;
+            height: $kendo-badge-size;
+        }
+        &.k-badge-lg {
+            width: $kendo-badge-size-lg;
+            height: $kendo-badge-size-lg;
+        }
+    }
+    .k-badge-dot {
+        padding: 0 !important;  // sass-lint:disable-line no-important
+        border-radius: 100%;
+        font-size: 0;
+
+        &.k-badge-sm {
+            width: $kendo-badge-dot-size-sm;
+            height: $kendo-badge-dot-size-sm;
+        }
+        &.k-badge-md {
+            width: $kendo-badge-dot-size;
+            height: $kendo-badge-dot-size;
+        }
+        &.k-badge-lg {
+            width: $kendo-badge-dot-size-lg;
+            height: $kendo-badge-dot-size-lg;
+        }
+    }
+
+    kendo-badge-container {
+        display: inline-block;
+    }
+
+    // Badge position
+    .k-badge-container {
+        position: relative;
+        overflow: visible;
+    }
+    @each $placement, $translate in ("inside": null, "edge": 50, "outside": 100) {
+
+        .k-badge-#{$placement} {
+            position: absolute;
+            z-index: 9999;
+
+            &.k-top-start {
+                @if $translate {
+                    transform: translate( -1% * $translate, -1% * $translate );
+                }
+            }
+            &.k-top-end {
+                @if $translate {
+                    transform: translate( 1% * $translate, -1% * $translate );
+                }
+            }
+            &.k-bottom-start {
+                @if $translate {
+                    transform: translate( -1% * $translate, 1% * $translate );
+                }
+            }
+            &.k-bottom-end {
+                @if $translate {
+                    transform: translate( 1% * $translate, 1% * $translate );
+                }
+            }
+        }
+
+        .k-rtl .k-badge-#{$placement},
+        [dir="rtl"].k-badge-#{$placement},
+        [dir="rtl"] .k-badge-#{$placement} {
+            &.k-top-start {
+                @if $translate {
+                    transform: translate( 1% * $translate, -1% * $translate );
+                }
+            }
+            &.k-top-end {
+                @if $translate {
+                    transform: translate( -1% * $translate, -1% * $translate );
+                }
+            }
+            &.k-bottom-start {
+                @if $translate {
+                    transform: translate( 1% * $translate, 1% * $translate );
+                }
+            }
+            &.k-bottom-end {
+                @if $translate {
+                    transform: translate( -1% * $translate, 1% * $translate );
+                }
+            }
+        }
+    }
+
+
+    // Border cutout
+    .k-badge-border-cutout {
+        box-shadow: 0 0 0 2px $kendo-component-bg;
+    }
+
+}
diff --git a/packages/fluent/scss/badge/_theme.scss b/packages/fluent/scss/badge/_theme.scss
@@ -0,0 +1,40 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+@use "../core/color-system" as *;
+
+@mixin kendo-badge--theme() {
+
+    .k-badge {
+        --INTERNAL--kendo-badge-text: var( --kendo-badge-text, #{$kendo-badge-text} );
+        --INTERNAL--kendo-badge-bg: var( --kendo-badge-bg, #{$kendo-badge-bg} );
+        --INTERNAL--kendo-badge-border: var( --kendo-badge-border, #{$kendo-badge-border} );
+
+        color: var( --INTERNAL--kendo-badge-text, initial );
+        background-color: var( --INTERNAL--kendo-badge-bg, initial );
+        border-color: var( --INTERNAL--kendo-badge-border, initial );
+    }
+
+    // Solid badges
+    @each $theme-color, $color-props in $kendo-theme-colors-contrast {
+        $_text: map-get( $color-props, text );
+        $_bg: map-get( $color-props, bg );
+        $_border: map-get( $color-props, border );
+
+        .k-badge-solid.k-badge-#{$theme-color} {
+            --kendo-badge-text: var( --kendo-badge-#{$theme-color}-text, #{$_text} );
+            --kendo-badge-bg: var( --kendo-badge-#{$theme-color}-bg, #{$_bg} );
+            --kendo-badge-border: var( --kendo-badge-#{$theme-color}-border, #{$_border} );
+        }
+    }
+
+    @each $theme-color, $color-props in $kendo-theme-colors-contrast {
+        $_text: map-get( $color-props, bg );
+        $_bg: $kendo-component-bg;
+        $_border: map-get( $color-props, border );
+
+        .k-badge-outline.k-badge-#{$theme-color} {
+            --kendo-badge-text: var( --kendo-badge-#{$theme-color}-text, #{$_text} );
+            --kendo-badge-border: var( --kendo-badge-#{$theme-color}-border, #{$_border} );
+        }
+    }
+}
diff --git a/packages/fluent/scss/badge/_variables.scss b/packages/fluent/scss/badge/_variables.scss
@@ -0,0 +1,86 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Background color of the badge.
+/// @group badge
+$kendo-badge-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the badge.
+/// @group badge
+$kendo-badge-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the badge.
+/// @group badge
+$kendo-badge-border: var( --kendo-component-border, initial ) !default;
+
+/// Border width of the badge.
+/// @group badge
+$kendo-badge-border-width: map-get( $kendo-spacing, hair ) !default;
+
+/// Horizontal padding of the badge.
+/// @group badge
+$kendo-badge-padding-x-sm: map-get( $kendo-spacing, thin ) !default;
+$kendo-badge-padding-x-md: map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-padding-x-lg: calc( map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) ) !default;
+
+/// Vertical padding of the badge.
+/// @group badge
+$kendo-badge-padding-y-sm: map-get( $kendo-spacing, thin ) !default;
+$kendo-badge-padding-y-md: map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-padding-y-lg: calc( map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) ) !default;
+
+/// Font sizes of the badge.
+/// @group badge
+$kendo-badge-font-size-sm: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-badge-font-size-md: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-badge-font-size-lg: var( --kendo-font-size-xs, inherit ) !default;
+
+/// Border radius of the badge.
+/// @group badge
+$kendo-badge-border-radius-sm: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-badge-border-radius-md: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-badge-border-radius-lg: var( --kendo-border-radius-md, 0 ) !default;
+
+/// Line heights of the badge.
+/// @group badge
+$kendo-badge-line-height-sm: var( --kendo-line-height-xs, normal ) !default;
+$kendo-badge-line-height-md: var( --kendo-line-height-xs, normal ) !default;
+$kendo-badge-line-height-lg: var( --kendo-line-height-xs, normal ) !default;
+
+/// Shapes sizing of the badge.
+/// @group badge
+$kendo-badge-fixed-size: 20px !default;
+$kendo-badge-calc-size: calc( #{$kendo-badge-line-height-md} * 1em + #{$kendo-badge-padding-y-md} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
+$kendo-badge-size: if( $use-calc-badge-size, $kendo-badge-calc-size, $kendo-badge-fixed-size ) !default;
+$kendo-badge-dot-size: 10px !default;
+
+$kendo-badge-fixed-size-sm: 16px !default;
+$kendo-badge-calc-size-sm: calc( #{$kendo-badge-line-height-sm} * 1em + #{$kendo-badge-padding-y-sm} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
+$kendo-badge-size-sm: if( $use-calc-badge-size, $kendo-badge-calc-size-sm, $kendo-badge-fixed-size-sm ) !default;
+$kendo-badge-dot-size-sm: 6px !default;
+
+$kendo-badge-fixed-size-lg: 26px !default;
+$kendo-badge-calc-size-lg: calc( #{$kendo-badge-line-height-lg} * 1em + #{$kendo-badge-padding-y-lg} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
+$kendo-badge-size-lg: if( $use-calc-badge-size, $kendo-badge-calc-size-lg, $kendo-badge-fixed-size-lg ) !default;
+$kendo-badge-dot-size-lg: 12px !default;
+
+/// Sizes map for the badge.
+/// @group badge
+$kendo-badge-sizes: (
+    sm: (
+        padding-x: $kendo-badge-padding-x-sm,
+        padding-y: $kendo-badge-padding-y-sm,
+        font-size: $kendo-badge-font-size-sm,
+        line-height: $kendo-badge-line-height-sm
+    ),
+    md: (
+        padding-x: $kendo-badge-padding-x-md,
+        padding-y: $kendo-badge-padding-y-md,
+        font-size: $kendo-badge-font-size-md,
+        line-height: $kendo-badge-line-height-md
+    ),
+    lg: (
+        padding-x: $kendo-badge-padding-x-lg,
+        padding-y: $kendo-badge-padding-y-lg,
+        font-size: $kendo-badge-font-size-lg,
+        line-height: $kendo-badge-line-height-lg
+    )
+) !default;
diff --git a/packages/fluent/scss/badge/index.scss b/packages/fluent/scss/badge/index.scss
@@ -0,0 +1,23 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "badge",
+    dependencies: ()
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "badge" ) {
+        @include kendo-badge--layout();
+        @include kendo-badge--theme();
+    }
+}
diff --git a/packages/fluent/scss/core/color-system/_theme.scss b/packages/fluent/scss/core/color-system/_theme.scss
@@ -106,6 +106,34 @@ $kendo-theme-colors: (
     }
 };
 
+$kendo-theme-colors-contrast: (
+    primary: (
+        text: $white,
+        bg: get-theme-color-var( primary-130 ),
+        border: get-theme-color-var( primary-130 )
+    ),
+    info: (
+        text: $white,
+        bg: get-theme-color-var( info-190 ),
+        border: get-theme-color-var( info-190 )
+    ),
+    success: (
+        text: $white,
+        bg: get-theme-color-var( success-190 ),
+        border: get-theme-color-var( success-190 )
+    ),
+    warning: (
+        text: get-theme-color-var( neutral-190 ),
+        bg: get-theme-color-var( warning-100 ),
+        border: get-theme-color-var( warning-100 )
+    ),
+    error: (
+        text: $white,
+        bg: get-theme-color-var( error-190 ),
+        border: get-theme-color-var( error-190 )
+    )
+) !default;
+
 :root {
     @include css-vars( $kendo-fluent-palettes );
     @include css-vars( $kendo-theme-colors );