@progress/kendo-theme-fluent 5.7.0

package/scss/button/_variables.scss

@@ -0,0 +1,392 @@
+@use "sass:color";
+@use "sass:map";
+@use "../core/" as *;
+@use "../core/color-system" as *;
+
+/// Width of the border around the button.
+/// @group button
+$kendo-button-border-width: map-get( $kendo-spacing, hair ) !default;
+
+/// Horizontal padding of the button.
+/// @group button
+$kendo-button-padding-x-sm: map-get( $kendo-spacing, 5 ) !default;
+$kendo-button-padding-x-md: map-get( $kendo-spacing, 5 ) !default;
+$kendo-button-padding-x-lg: map-get( $kendo-spacing, 5 ) !default;
+
+/// Vertical padding of the button.
+/// @group button
+$kendo-button-padding-y-sm: map-get( $kendo-spacing, 1  ) !default;
+$kendo-button-padding-y-md: map-get( $kendo-spacing, 2 ) - map-get( $kendo-spacing, thin ) !default;
+$kendo-button-padding-y-lg: map-get( $kendo-spacing, 2 ) !default;
+
+/// Font sizes of the button.
+/// @group button
+$kendo-button-font-size-sm: var( --kendo-font-size, inherit ) !default;
+$kendo-button-font-size-md: var(--kendo-font-size, inherit) !default;
+$kendo-button-font-size-lg: var(--kendo-font-size, inherit) !default;
+
+/// Line heights used along with $font-size.
+/// @group button
+$kendo-button-line-height-sm: var( --kendo-line-height, normal ) !default;
+$kendo-button-line-height-md: var( --kendo-line-height, normal ) !default;
+$kendo-button-line-height-lg: var( --kendo-line-height, normal ) !default;
+
+// Font family of the button.
+$kendo-button-font-family: var( --kendo-font-family, inherit ) !default;
+
+// Font weight of the button.
+$kendo-button-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+
+/// Calculated height of the button.
+/// @group button
+$kendo-button-calc-size: calc( ( #{$kendo-button-line-height-md} * 1em ) + ( #{$kendo-button-padding-y-md} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+
+/// Calculated inner height of the button. Without the border width.
+/// @group button
+$kendo-button-inner-calc-size: calc( ( #{$kendo-button-line-height-md} * 1em ) + ( #{$kendo-button-padding-y-md} * 2 ) ) !default;
+
+/// Sizes map for the button.
+/// @group button
+$kendo-button-sizes: (
+    sm: (
+        padding-x: $kendo-button-padding-x-sm,
+        padding-y: $kendo-button-padding-y-sm,
+        font-size: $kendo-button-font-size-sm,
+        line-height: $kendo-button-line-height-sm
+    ),
+    md: (
+        padding-x: $kendo-button-padding-x-md,
+        padding-y: $kendo-button-padding-y-md,
+        font-size: $kendo-button-font-size-md,
+        line-height: $kendo-button-line-height-md
+    ),
+    lg: (
+        padding-x: $kendo-button-padding-x-lg,
+        padding-y: $kendo-button-padding-y-lg,
+        font-size: $kendo-button-font-size-lg,
+        line-height: $kendo-button-line-height-lg
+    )
+) !default;
+
+/// Content spacing of the button.
+/// @group button
+$kendo-button-spacing: map-get( $kendo-spacing, 2 ) !default;
+
+/// Offset of the focused button.
+/// @group button
+$kendo-button-focus-offset: map-get( $kendo-spacing, thin ) !default;
+/// Outline width of the focused button.
+/// @group button
+$kendo-button-focus-outline-width: map-get( $kendo-spacing, hair ) !default;
+/// Outline style of the focused button.
+/// @group button
+$kendo-button-focus-outline-style: solid !default;
+
+/// Offset of the flat focused button.
+/// @group button
+$kendo-button-flat-focus-offset: map-get( $kendo-spacing, hair ) !default;
+/// Outline width of the flat focused button.
+/// @group button
+$kendo-button-flat-focus-outline-width: map-get( $kendo-spacing, thin ) !default;
+
+/// Offset of the link focused button.
+/// @group button
+$kendo-button-link-focus-offset: 0 !default;
+/// Outline width of the flat focused button.
+/// @group button
+$kendo-button-link-focus-outline-width: map-get( $kendo-spacing, hair ) !default;
+
+// Theme variations for the button.
+
+$kendo-button-brand-colors: (
+    primary: primary,
+    error: error,
+    success: success,
+    info: info,
+    secondary: neutral,
+    tertiary: tertiary,
+);
+
+
+// Matrices with theme colors in the order: bg, color, border, outline
+
+// Color matrix for the base button
+$_tc-base-matrix: (
+    solid: (
+        normal: ($white, 160, 110),
+        hover: (20, 190, 110),
+        focus: ($white, 160, 110, 130),
+        focus-hover: (20, 190, 110, 130),
+        active: (30, 190, 110),
+        active-hover: (20, 190, 110),
+        disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
+    ),
+    outline: (
+        normal: (transparent, 160, currentColor),
+        hover: (190, $white, 190),
+        focus: (transparent, 160, currentColor, inherit),
+        focus-hover: (190, $white, 190, inherit),
+        active: (190, $white, 190),
+        active-hover: (20, 190, 110),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), 90)
+    ),
+    link: (
+        normal: (transparent, 160, transparent),
+        hover: (transparent, 190, transparent),
+        focus: (transparent, 160, transparent, 30),
+        focus-hover: (transparent, 190, 30, transparent),
+        active: (transparent, 190, transparent),
+        active-hover: (transparent, 190, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), transparent)
+    ),
+    clear: (
+        normal: (transparent, 160, transparent),
+        hover: (transparent, 190, transparent),
+        focus: (30, 160, transparent, 130),
+        focus-hover: (transparent, 190, transparent, 130),
+        active: (transparent, 190, transparent),
+        active-hover: (transparent, 190, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), transparent)
+    )
+);
+
+// Color matrix for primary, error, success, info, secondary, tertiary buttons
+$_tc-brand-matrix: (
+    solid: (
+        normal: (100, $white, 100),
+        hover: (110, $white, 110),
+        focus: (100, $white, 100, inherit),
+        focus-hover: (110, $white, 110, inherit),
+        active: (120, $white, 120),
+        active-hover: (110, $white, 110),
+        disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
+    ),
+    flat: (
+        normal: (initial, 100, transparent),
+        hover: (10, 110, transparent),
+        focus: (initial, 100, transparent, 30),
+        focus-hover: (10, 110, transparent, 30),
+        active: (20, 110, transparent),
+        active-hover: (10, 110, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), initial)
+    ),
+    outline: (
+        normal: (transparent, 100, currentColor),
+        hover: (100, $white, 100),
+        focus: (transparent, 100, 100, inherit),
+        focus-hover: (100, $white, 100, inherit),
+        active: (100, $white, 100),
+        active-hover: (100, $white, 100),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit ))
+    ),
+    link: (
+        normal: (transparent, 100, transparent),
+        hover: (transparent, 130, transparent),
+        focus: (transparent, 100, transparent, 30),
+        focus-hover: (transparent, 130, transparent, 30),
+        active: (transparent, 140, transparent),
+        active-hover: (transparent, 130, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), transparent)
+    ),
+    clear: (
+        normal: (transparent, 100, transparent),
+        hover: (transparent, 110, transparent),
+        focus: (20, 100, transparent),
+        focus-hover: (transparent, 110, transparent),
+        active: (transparent, 120, transparent),
+        active-hover: (transparent, 110, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), transparent)
+    )
+);
+
+// Color matrix for warning buttons
+$_tc-warning-matrix: (
+    solid: (
+        normal: (100, get-theme-color-var( neutral-160 ), 100),
+        hover: (110, get-theme-color-var( neutral-190 ), 110),
+        focus: (100, get-theme-color-var( neutral-160 ), 100, $white),
+        focus-hover: (110, get-theme-color-var( neutral-190 ), 110, $white),
+        active: (120, get-theme-color-var( neutral-190 ), 120),
+        active-hover: (110, get-theme-color-var( neutral-190 ), 110),
+        disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
+    ),
+    flat: (
+        normal: (initial, 100, transparent),
+        hover: (10, 110, transparent),
+        focus: (initial, 100, transparent, 30),
+        focus-hover: (10, 110, transparent, 30),
+        active: (20, 110, transparent),
+        active-hover: (10, 110, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), initial)
+    ),
+    outline: (
+        normal: (transparent, 100, currentColor),
+        hover: (100, $black, 100),
+        focus: (transparent, 100, 100, inherit),
+        focus-hover: (100, $black, 100, inherit),
+        active: (100, $black, 100),
+        active-hover: (100, $black, 100),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit ))
+    ),
+    link: (
+        normal: (transparent, 100, transparent),
+        hover: (transparent, 130, transparent),
+        focus: (transparent, 100, 30),
+        focus-hover: (transparent, 130, transparent, 30),
+        active: (transparent, 140, transparent),
+        active-hover: (transparent, 130, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), transparent)
+    ),
+    clear: (
+        normal: (transparent, 100, transparent),
+        hover: (transparent, 110, transparent),
+        focus: (20, 100, transparent),
+        focus-hover: (transparent, 110, transparent),
+        active: (transparent, 120, transparent),
+        active-hover: (transparent, 110, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), transparent)
+    )
+);
+
+// Color matrix for dark buttons
+$_tc-dark-matrix: (
+    solid: (
+        normal: (160, $white, 160),
+        hover: (170, $white, 170),
+        focus: (160, $white, 160, $white),
+        focus-hover: (170, $white, 170, $white),
+        active: (180, $white, 180),
+        active-hover: (170, $white, 170),
+        disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
+    ),
+    flat: (
+        normal: (initial, 160, transparent),
+        hover: (10, 170, transparent),
+        focus: (initial, 160, transparent, 30),
+        focus-hover: (10, 170, transparent, 30),
+        active: (20, 170, transparent),
+        active-hover: (10, 170, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), initial)
+    ),
+    outline: (
+        normal: (transparent, 160, currentColor),
+        hover: (160, $white, 160),
+        focus: (transparent, 160, 160, inherit),
+        focus-hover: (160, $white, 160, inherit),
+        active: (160, $white, 160),
+        active-hover: (160, $white, 160),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit ))
+    ),
+    link: (
+        normal: (transparent, 160, transparent),
+        hover: (transparent, 170, transparent),
+        focus: (transparent, 160, 30),
+        focus-hover: (transparent, 170, transparent, 30),
+        active: (transparent, 170, transparent),
+        active-hover: (transparent, 170, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), transparent)
+    ),
+    clear: (
+        normal: (transparent, 160, transparent),
+        hover: (transparent, 170, transparent),
+        focus: (20, 160, transparent),
+        focus-hover: (transparent, 170, transparent),
+        active: (transparent, 170, transparent),
+        active-hover: (transparent, 170, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), transparent)
+    )
+);
+
+// Color matrix for light buttons
+$_tc-light-matrix: (
+    solid: (
+        normal: (50, 160, 50),
+        hover: (60, 190, 60),
+        focus: (50, 160, 50, $white),
+        focus-hover: (60, 190, 60, $white),
+        active: (70, 190, 70),
+        active-hover: (60, 190, 60),
+        disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
+    ),
+    flat: (
+        normal: (initial, 50, transparent),
+        hover: (10, 60, transparent),
+        focus: (initial, 50, transparent, 30),
+        focus-hover: (10, 60, transparent, 30),
+        active: (20, 60, transparent),
+        active-hover: (10, 60, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), initial)
+    ),
+    outline: (
+        normal: (transparent, 50, currentColor),
+        hover: (50, $white, 50),
+        focus: (transparent, 50, 50, inherit),
+        focus-hover: (50, $white, 50, inherit),
+        active: (50, $white, 50),
+        active-hover: (50, $white, 50),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit ))
+    ),
+    link: (
+        normal: (transparent, 50, transparent),
+        hover: (transparent, 60, transparent),
+        focus: (transparent, 50, 30),
+        focus-hover: (transparent, 60, transparent, 30),
+        active: (transparent, 60, transparent),
+        active-hover: (transparent, 60, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), transparent)
+    ),
+    clear: (
+        normal: (transparent, 50, transparent),
+        hover: (transparent, 60, transparent),
+        focus: (20, 50, transparent),
+        focus-hover: (transparent, 60, transparent),
+        active: (transparent, 60, transparent),
+        active-hover: (transparent, 60, transparent),
+        disabled: (initial, var( --kendo-disabled-text, inherit ), transparent)
+    )
+);
+
+/// Theme colors map for the button.
+$kendo-button-theme-colors: ();
+
+// Map for base theme color
+@each $fill-mode, $ui-states in $_tc-base-matrix {
+    $kendo-button-theme-colors: map.deep-merge(
+        $kendo-button-theme-colors,
+        generate-fill-mode-theme-variation( $fill-mode, base, neutral, $ui-states )
+    );
+}
+
+// Map for brand theme colors
+@each $fill-mode, $ui-states in $_tc-brand-matrix {
+    @each $brand-color, $palette in $kendo-button-brand-colors {
+        $kendo-button-theme-colors: map.deep-merge(
+            $kendo-button-theme-colors,
+            generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
+        )
+    }
+}
+
+// Map for warning theme colors
+@each $fill-mode, $ui-states in $_tc-warning-matrix {
+    $kendo-button-theme-colors: map.deep-merge(
+        $kendo-button-theme-colors,
+        generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
+    );
+}
+
+// Map for dark theme colors
+@each $fill-mode, $ui-states in $_tc-dark-matrix {
+    $kendo-button-theme-colors: map.deep-merge(
+        $kendo-button-theme-colors,
+        generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+    );
+}
+
+// Map for light theme colors
+@each $fill-mode, $ui-states in $_tc-light-matrix {
+    $kendo-button-theme-colors: map.deep-merge(
+        $kendo-button-theme-colors,
+        generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+    );
+}

package/scss/button/index.scss

@@ -0,0 +1,25 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "button",
+    dependencies: (
+        "icon"
+    )
+);
+
+
+// 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( "button" ) {
+        @include kendo-button--layout();
+        @include kendo-button--theme();
+    }
+}