@progress/kendo-theme-meridian 14.0.0-dev.1

package/scss/breadcrumb/_theme.scss

@@ -0,0 +1,15 @@
+@use "@progress/kendo-theme-core/scss/components/breadcrumb/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+
+
+@mixin kendo-breadcrumb--theme() {
+    @include kendo-breadcrumb--theme-base();
+
+    .k-breadcrumb-root-link:focus,
+    .k-breadcrumb-root-link.k-focus,
+    .k-breadcrumb-link:focus,
+    .k-breadcrumb-link.k-focus {
+        @include focus-indicator( $kendo-breadcrumb-link-outline-color, $inset: true, $type: "outline", $outline-offset: $kendo-breadcrumb-link-outline-offset );
+    }
+}

package/scss/breadcrumb/_variables.scss

@@ -0,0 +1,263 @@
+@use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
+
+// Breadcrumb
+
+/// The default size of the Breadcrumb.
+/// @group breadcrumb
+/// @role default
+$kendo-breadcrumb-default-size: "md" !default;
+
+/// The width of the border around the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-border-width: 0px !default;
+
+/// The horizontal margin of the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-margin-x: null !default;
+/// The vertical margin of the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-margin-y: null !default;
+/// The horizontal padding of the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-padding-x: null !default;
+/// The vertical padding of the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-padding-y: null !default;
+
+/// The font family of the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-font-family: var( --kendo-font-family, inherit ) !default;
+
+/// The font size of the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-font-size: var( --kendo-font-size, inherit ) !default;
+/// The font size of the small Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-font-size: var( --kendo-font-size, inherit ) !default;
+/// The font size of the medium Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default;
+/// The font size of the large Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+
+/// The line-height of the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-line-height: var( --kendo-line-height, normal ) !default;
+/// The line-height of the small Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-line-height: var( --kendo-line-height, normal ) !default;
+/// The line-height of the medium Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
+/// The line-height of the height Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+
+/// The base background of the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-bg: transparent !default;
+/// The base text color of the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-text: k-color(on-app-surface) !default;
+/// The base border color of the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-border: transparent !default;
+
+/// The box shadow of the focused Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-focus-shadow: 0 0 2px 1px k-color(border) !default;
+
+/// The horizontal padding of the small Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-link-padding-x: k-spacing(2) !default;
+/// The horizontal padding of the medium Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-md-link-padding-x: k-spacing(2.5) !default;
+/// The horizontal padding of the large Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-link-padding-x: k-spacing(3) !default;
+
+/// The vertical padding of the small Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-link-padding-y: k-spacing(1) !default;
+/// The vertical padding of the medium Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-md-link-padding-y: k-spacing(1.5) !default;
+/// The vertical padding of the large Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-link-padding-y: k-spacing(2) !default;
+
+/// The border-radius of the Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-link-border-radius: k-border-radius(md) !default;
+
+/// The vertical padding of the small Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-icon-link-padding-y: k-spacing(1.5) !default;
+/// The vertical padding of the medium Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-md-icon-link-padding-y: k-spacing(2.5) !default;
+/// The vertical padding of the large Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-icon-link-padding-y: k-spacing(3) !default;
+
+/// The horizontal padding of the small Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
+/// The horizontal padding of the medium Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-y !default;
+/// The horizontal padding of the large Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default;
+
+/// The text color of the Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-link-initial-text: inherit !default;
+/// The spacing of the Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-link-icon-spacing: k-spacing(1.5) !default;
+
+/// The background color of the Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-link-bg: null !default;
+/// The text color of the Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-link-text: k-color( primary-on-surface) !default;
+/// The border color of the Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-link-border: null !default;
+
+/// The background color of the hovered Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-link-hover-bg: transparent !default;
+/// The text color of the hovered Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-link-hover-text: color-mix(in srgb, k-color(primary-on-surface) 80%, k-color(on-app-surface)) !default;
+/// The border color of the hovered Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-link-hover-border: null !default;
+
+/// The background color of the focused Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-link-focus-bg: null !default;
+/// The text color of the focused Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-link-focus-text: k-color(primary) !default;
+/// The border color of the focused Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-link-focus-border: null !default;
+/// The box shadow of the focused Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-link-focus-shadow: null !default;
+/// The outline color of the focused Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-link-outline-color: k-color(subtle) !default;
+/// The outline offset of the focused Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-link-outline-offset: 1px !default;
+
+/// The background color of the Breadcrumb root link.
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-bg: null !default;
+/// The text color of the Breadcrumb root link.
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-text: null !default;
+/// The border color of the Breadcrumb root link.
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-border: null !default;
+
+/// The background color of the hovered Breadcrumb root link.
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-hover-bg: transparent !default;
+/// The text color of the hovered Breadcrumb root link.
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-hover-text: null !default;
+/// The border color of the hovered Breadcrumb root link.
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-hover-border: null !default;
+
+/// The background color of the focused Breadcrumb root link.
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-focus-bg: null !default;
+/// The text color of the focused Breadcrumb root link.
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-focus-text: null !default;
+/// The border color of the focused Breadcrumb root link.
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-focus-border: null !default;
+/// The box shadow of the focused Breadcrumb root link.
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;
+
+/// The background color of the current Breadcrumb root link.
+/// @group breadcrumb
+$kendo-breadcrumb-current-item-bg: null !default;
+/// The text color of the current Breadcrumb root link.
+/// @group breadcrumb
+$kendo-breadcrumb-current-item-text: null !default;
+/// The border color of the current Breadcrumb root link.
+/// @group breadcrumb
+$kendo-breadcrumb-current-item-border: null !default;
+
+@forward "@progress/kendo-theme-core/scss/components/breadcrumb/_variables.scss" with (
+    $kendo-breadcrumb-default-size: $kendo-breadcrumb-default-size,
+    $kendo-breadcrumb-border-width: $kendo-breadcrumb-border-width,
+    $kendo-breadcrumb-margin-x: $kendo-breadcrumb-margin-x,
+    $kendo-breadcrumb-margin-y: $kendo-breadcrumb-margin-y,
+    $kendo-breadcrumb-padding-x: $kendo-breadcrumb-padding-x,
+    $kendo-breadcrumb-padding-y: $kendo-breadcrumb-padding-y,
+    $kendo-breadcrumb-font-family: $kendo-breadcrumb-font-family,
+    $kendo-breadcrumb-font-size: $kendo-breadcrumb-font-size,
+    $kendo-breadcrumb-sm-font-size: $kendo-breadcrumb-sm-font-size,
+    $kendo-breadcrumb-md-font-size: $kendo-breadcrumb-md-font-size,
+    $kendo-breadcrumb-lg-font-size: $kendo-breadcrumb-lg-font-size,
+    $kendo-breadcrumb-line-height: $kendo-breadcrumb-line-height,
+    $kendo-breadcrumb-sm-line-height: $kendo-breadcrumb-sm-line-height,
+    $kendo-breadcrumb-md-line-height: $kendo-breadcrumb-md-line-height,
+    $kendo-breadcrumb-lg-line-height: $kendo-breadcrumb-lg-line-height,
+    $kendo-breadcrumb-bg: $kendo-breadcrumb-bg,
+    $kendo-breadcrumb-text: $kendo-breadcrumb-text,
+    $kendo-breadcrumb-border: $kendo-breadcrumb-border,
+    $kendo-breadcrumb-focus-shadow: $kendo-breadcrumb-focus-shadow,
+    $kendo-breadcrumb-sm-link-padding-x: $kendo-breadcrumb-sm-link-padding-x,
+    $kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-md-link-padding-x,
+    $kendo-breadcrumb-lg-link-padding-x: $kendo-breadcrumb-lg-link-padding-x,
+    $kendo-breadcrumb-sm-link-padding-y: $kendo-breadcrumb-sm-link-padding-y,
+    $kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-md-link-padding-y,
+    $kendo-breadcrumb-lg-link-padding-y: $kendo-breadcrumb-lg-link-padding-y,
+    $kendo-breadcrumb-link-border-radius: $kendo-breadcrumb-link-border-radius,
+    $kendo-breadcrumb-sm-icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,
+    $kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,
+    $kendo-breadcrumb-lg-icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,
+    $kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,
+    $kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,
+    $kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,
+    $kendo-breadcrumb-link-initial-text: $kendo-breadcrumb-link-initial-text,
+    $kendo-breadcrumb-link-icon-spacing: $kendo-breadcrumb-link-icon-spacing,
+    $kendo-breadcrumb-link-bg: $kendo-breadcrumb-link-bg,
+    $kendo-breadcrumb-link-text: $kendo-breadcrumb-link-text,
+    $kendo-breadcrumb-link-border: $kendo-breadcrumb-link-border,
+    $kendo-breadcrumb-link-hover-bg: $kendo-breadcrumb-link-hover-bg,
+    $kendo-breadcrumb-link-hover-text: $kendo-breadcrumb-link-hover-text,
+    $kendo-breadcrumb-link-hover-border: $kendo-breadcrumb-link-hover-border,
+    $kendo-breadcrumb-link-focus-bg: $kendo-breadcrumb-link-focus-bg,
+    $kendo-breadcrumb-link-focus-text: $kendo-breadcrumb-link-focus-text,
+    $kendo-breadcrumb-link-focus-border: $kendo-breadcrumb-link-focus-border,
+    $kendo-breadcrumb-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow,
+    $kendo-breadcrumb-root-link-bg: $kendo-breadcrumb-root-link-bg,
+    $kendo-breadcrumb-root-link-text: $kendo-breadcrumb-root-link-text,
+    $kendo-breadcrumb-root-link-border: $kendo-breadcrumb-root-link-border,
+    $kendo-breadcrumb-root-link-hover-bg: $kendo-breadcrumb-root-link-hover-bg,
+    $kendo-breadcrumb-root-link-hover-text: $kendo-breadcrumb-root-link-hover-text,
+    $kendo-breadcrumb-root-link-hover-border: $kendo-breadcrumb-root-link-hover-border,
+    $kendo-breadcrumb-root-link-focus-bg: $kendo-breadcrumb-root-link-focus-bg,
+    $kendo-breadcrumb-root-link-focus-text: $kendo-breadcrumb-root-link-focus-text,
+    $kendo-breadcrumb-root-link-focus-border: $kendo-breadcrumb-root-link-focus-border,
+    $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-root-link-focus-shadow,
+    $kendo-breadcrumb-current-item-bg: $kendo-breadcrumb-current-item-bg,
+    $kendo-breadcrumb-current-item-text: $kendo-breadcrumb-current-item-text,
+    $kendo-breadcrumb-current-item-border: $kendo-breadcrumb-current-item-border,
+);

package/scss/bubble/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-bubble--styles() {
+    @include import-once( "bubble" ) {
+        @include core-styles();
+        @include kendo-bubble--layout();
+        @include kendo-bubble--theme();
+    }
+}

package/scss/bubble/_layout.scss

@@ -0,0 +1,11 @@
+@use "@progress/kendo-theme-core/scss/components/bubble/_layout.scss" as *;
+@use "../core/index.scss" as *;
+
+
+@mixin kendo-bubble--layout() {
+    @include kendo-bubble--layout-base();
+
+    .k-bubble {
+        transition: border-color k-transition(rapid), background-color k-transition(rapid), outline k-transition(rapid);
+    }
+}

package/scss/bubble/_theme.scss

@@ -0,0 +1,21 @@
+@use "@progress/kendo-theme-core/scss/components/bubble/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+
+
+@mixin kendo-bubble--theme() {
+    @include kendo-bubble--theme-base();
+
+    .k-bubble {
+        &:focus,
+        &:focus-visible,
+        &.k-focus {
+            @include focus-indicator(
+                $type: "outline",
+                $indicator: $kendo-bubble-focus-outline-color,
+                $outline-width: $kendo-bubble-focus-outline-width,
+                $outline-offset: $kendo-bubble-focus-outline-offset
+            );
+        }
+    }
+}

package/scss/bubble/_variables.scss

@@ -0,0 +1,103 @@
+@use "../core/_index.scss" as *;
+
+
+/// The border radius of the Bubble.
+/// @group bubble
+$kendo-bubble-border-radius: k-border-radius(xxl) !default;
+/// The small border radius of the Bubble.
+/// @group bubble
+$kendo-bubble-border-radius-sm: k-border-radius(sm) !default;
+/// The vertical padding of the Bubble.
+/// @group bubble
+$kendo-bubble-padding-y: k-spacing(3) !default;
+/// The horizontal padding of the Bubble.
+/// @group bubble
+$kendo-bubble-padding-x: k-spacing(3) !default;
+/// The border width of the Bubble.
+/// @group bubble
+$kendo-bubble-border-width: 1px !default;
+/// The border style of the Bubble.
+/// @group bubble
+$kendo-bubble-border-style: solid !default;
+/// The line height of the Bubble.
+/// @group bubble
+$kendo-bubble-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The text color of the Bubble.
+/// @group bubble
+$kendo-bubble-text: k-color(base-on-subtle) !default;
+/// The background color of the Bubble.
+/// @group bubble
+$kendo-bubble-bg: k-color(base) !default;
+/// The border color of the Bubble.
+/// @group bubble
+$kendo-bubble-border: $kendo-bubble-bg !default;
+/// The shadow of the Bubble.
+/// @group bubble
+$kendo-bubble-shadow: none !default;
+
+/// The background color of the hover Bubble.
+/// @group bubble
+$kendo-bubble-hover-bg: k-color(base-hover) !default;
+/// The border color of the active Bubble.
+/// @group bubble
+$kendo-bubble-hover-border: $kendo-bubble-hover-bg !default;
+/// The background color of the active Bubble.
+/// @group bubble
+$kendo-bubble-active-bg: k-color(base-active) !default;
+/// The border color of the active Bubble.
+/// @group bubble
+$kendo-bubble-active-border: $kendo-bubble-active-bg !default;
+/// The background color of the focused Bubble.
+/// @group bubble
+$kendo-bubble-focus-bg: k-color(base) !default;
+/// The border color of the focused Bubble.
+/// @group bubble
+$kendo-bubble-focus-border: $kendo-bubble-focus-bg !default;
+/// The box shadow of the focused Bubble.
+/// @group bubble
+$kendo-bubble-focus-shadow: null !default;
+
+/// The outline color of the focused Bubble.
+/// @group bubble
+$kendo-bubble-focus-outline-color: k-color(subtle) !default;
+/// The outline width of the focused Bubble.
+/// @group bubble
+$kendo-bubble-focus-outline-width: 1px !default;
+/// The outline offset of the focused Bubble.
+/// @group bubble
+$kendo-bubble-focus-outline-offset: 1px !default;
+
+/// The spacing between content and icon in expandable Bubble.
+/// @group bubble
+$kendo-bubble-expandable-spacing: $kendo-bubble-padding-x !default;
+/// The horizontal padding of the expandable Bubble icon.
+/// @group bubble
+$kendo-bubble-expandable-icon-padding-x: k-spacing(2.5) !default;
+/// The vertical padding of the expandable Bubble icon.
+/// @group bubble
+$kendo-bubble-expandable-icon-padding-y: k-spacing(2.5) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/bubble/_variables.scss" with (
+    $kendo-bubble-border-radius: $kendo-bubble-border-radius,
+    $kendo-bubble-border-radius-sm: $kendo-bubble-border-radius-sm,
+    $kendo-bubble-padding-y: $kendo-bubble-padding-y,
+    $kendo-bubble-padding-x: $kendo-bubble-padding-x,
+    $kendo-bubble-border-width: $kendo-bubble-border-width,
+    $kendo-bubble-border-style: $kendo-bubble-border-style,
+    $kendo-bubble-line-height: $kendo-bubble-line-height,
+    $kendo-bubble-text: $kendo-bubble-text,
+    $kendo-bubble-bg: $kendo-bubble-bg,
+    $kendo-bubble-border: $kendo-bubble-border,
+    $kendo-bubble-shadow: $kendo-bubble-shadow,
+    $kendo-bubble-hover-bg: $kendo-bubble-hover-bg,
+    $kendo-bubble-hover-border: $kendo-bubble-hover-border,
+    $kendo-bubble-active-bg: $kendo-bubble-active-bg,
+    $kendo-bubble-active-border: $kendo-bubble-active-border,
+    $kendo-bubble-focus-bg: $kendo-bubble-focus-bg,
+    $kendo-bubble-focus-border: $kendo-bubble-focus-border,
+    $kendo-bubble-focus-shadow: $kendo-bubble-focus-shadow,
+    $kendo-bubble-expandable-spacing: $kendo-bubble-expandable-spacing,
+    $kendo-bubble-expandable-icon-padding-x: $kendo-bubble-expandable-icon-padding-x,
+    $kendo-bubble-expandable-icon-padding-y: $kendo-bubble-expandable-icon-padding-y,
+);

package/scss/button/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../badge/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-button--styles() {
+    @include import-once( "button" ) {
+        @include core-styles();
+        @include kendo-badge--styles();
+        @include kendo-icon--styles();
+        @include kendo-button--layout();
+        @include kendo-button--theme();
+    }
+}

package/scss/button/_layout.scss

@@ -0,0 +1,14 @@
+@use "@progress/kendo-theme-core/scss/components/button/_layout.scss" as *;
+@use "../core/z-index/index.scss" as *;
+
+@mixin kendo-button--layout() {
+    @include kendo-button--layout-base();
+
+    // Button group
+    .k-button-group {
+        > .k-button:focus,
+        > .k-button.k-focus {
+            z-index: k-z-index("base", 3);
+        }
+    }
+}

package/scss/button/_theme.scss

@@ -0,0 +1,188 @@
+@use "@progress/kendo-theme-core/scss/components/button/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
+@use "./_variables.scss" as *;
+
+
+@mixin kendo-button--theme() {
+    @include kendo-button--theme-base();
+
+    .k-button {
+
+        #{k-when-default($kendo-button-default-fill-mode, ("solid", "outline"))}
+        &.k-button-solid,
+        &.k-button-outline {
+            #{k-when-default($kendo-button-default-theme-color, "base")}
+            &.k-button-base {
+                &:focus,
+                &.k-focus {
+                    box-shadow: none;
+                    @include focus-indicator(
+                        $indicator: k-color(subtle),
+                        $type: "outline",
+                        $outline-width: $kendo-button-focus-outline-width,
+                        $outline-offset: $kendo-button-focus-outline-offset
+                    );
+                }
+            }
+
+            @each $name in $kendo-button-theme-colors {
+                @if $name != "base" {
+                    #{k-when-default($kendo-button-default-theme-color, $name)}
+                    &.k-button-#{$name} {
+                        &:focus,
+                        &.k-focus {
+                            box-shadow: none;
+                            @include focus-indicator(
+                                $indicator: k-color(#{$name}-on-surface),
+                                $type: "outline",
+                                $outline-width: $kendo-button-focus-outline-width,
+                                $outline-offset: $kendo-button-focus-outline-offset
+                            );
+                        }
+                    }
+                }
+            }
+        }
+
+
+        #{k-when-default($kendo-button-default-fill-mode, "outline")}
+        &.k-button-outline {
+
+            #{k-when-default($kendo-button-default-theme-color, "base")}
+            &.k-button-base {
+                border-color: $kendo-outline-button-border;
+                box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+                // Hover state
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        k-color(base-on-surface),
+                        color-mix(in srgb, k-color(base-hover) 70%, transparent),
+                        $kendo-outline-button-border
+                    );
+                }
+
+                // Active state
+                &:active,
+                &.k-active {
+                    @include fill(
+                        k-color(base-on-surface),
+                        color-mix(in srgb, k-color(base-active) 70%, transparent),
+                        $kendo-outline-button-border
+                    );
+                }
+
+                // Selected state
+                &.k-selected {
+                    @include fill(
+                        k-color(base-on-surface),
+                        color-mix(in srgb, k-color(base-active) 70%, transparent),
+                        $kendo-outline-button-border
+                    );
+                }
+            }
+
+            @each $name in $kendo-button-theme-colors {
+                @if $name != "base" {
+                    #{k-when-default($kendo-button-default-theme-color, $name)}
+                    &.k-button-#{$name} {
+
+                        border-color: k-color(#{$name}-on-surface);
+
+                        // Hover state
+                        &:hover,
+                        &.k-hover {
+                            @include fill(
+                                k-color(#{$name}-on-surface),
+                                color-mix(in srgb, k-color(#{$name}-subtle-hover) 50%, transparent),
+                                k-color(#{$name}-on-surface)
+                            );
+                        }
+
+                        // Active state
+                        &:active,
+                        &.k-active {
+                            @include fill(
+                                k-color(#{$name}-on-surface),
+                                color-mix(in srgb, k-color(#{$name}-subtle-active) 50%, transparent),
+                                k-color(#{$name}-on-surface)
+                            );
+                        }
+
+                        // Selected state
+                        &.k-selected {
+                            @include fill(
+                                k-color(#{$name}-on-surface),
+                                color-mix(in srgb, k-color(#{$name}-subtle-active) 50%, transparent),
+                                k-color(#{$name}-on-surface)
+                            );
+                        }
+                    }
+                }
+            }
+        }
+
+
+        #{k-when-default($kendo-button-default-fill-mode, "flat")}
+        &.k-button-flat {
+
+            // Disable the ::before overlay in favor of actual background-color
+            &::before, &::after {
+                display: none !important; // stylelint-disable-line declaration-no-important
+            }
+
+            #{k-when-default($kendo-button-default-theme-color, "base")}
+            &.k-button-base {
+
+                // Hover state
+                &:hover,
+                &.k-hover {
+                    background-color: color-mix(in srgb, k-color(base-hover) 70%, transparent) !important; // stylelint-disable-line declaration-no-important
+                }
+
+                // Active state
+                &:active,
+                &.k-active {
+                    background-color: color-mix(in srgb, k-color(base-active) 70%, transparent) !important; // stylelint-disable-line declaration-no-important
+                }
+
+                // Selected state
+                &.k-selected {
+                    background-color: color-mix(in srgb, k-color(base-active) 70%, transparent) !important; // stylelint-disable-line declaration-no-important
+                }
+            }
+
+            @each $name in $kendo-button-theme-colors {
+                @if $name != "base" {
+                    #{k-when-default($kendo-button-default-theme-color, $name)}
+                    &.k-button-#{$name} {
+
+                        // Hover state
+                        &:hover,
+                        &.k-hover {
+                            background-color: color-mix(in srgb, k-color(#{$name}-subtle-hover) 70%, transparent) !important; // stylelint-disable-line declaration-no-important
+                        }
+
+                        // Active state
+                        &:active,
+                        &.k-active {
+                            background-color: color-mix(in srgb, k-color(#{$name}-subtle-active) 70%, transparent) !important; // stylelint-disable-line declaration-no-important
+                        }
+
+                        // Selected state
+                        &.k-selected {
+                            background-color: color-mix(in srgb, k-color(#{$name}-subtle-active) 70%, transparent) !important; // stylelint-disable-line declaration-no-important
+                        }
+                    }
+                }
+            }
+        }
+
+        #{k-when-default($kendo-button-default-fill-mode, "link")}
+        &.k-button-link {
+            box-shadow: none;
+        }
+    }
+}