feat(action-buttons): add fluent styles

packages/fluent/scss/action-buttons/_layout.scss

@@ -0,0 +1,54 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-action-buttons--layout() {
+    .k-actions {
+        padding-inline: var( --kendo-actions-padding-x, #{$kendo-actions-padding-x} );
+        padding-block: var( --kendo-actions-padding-y, #{$kendo-actions-padding-y} );
+        box-sizing: border-box;
+        border-width: var( --kendo-actions-border-width, #{$kendo-actions-border-width} ) 0 0 0;
+        border-style: solid;
+        border-color: inherit;
+        flex-shrink: 0;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        gap: var( --kendo-actions-button-spacing, #{$kendo-actions-button-spacing} );
+        overflow: hidden;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    // Aliases
+    .k-edit-buttons,
+    .k-action-buttons,
+    .k-columnmenu-actions {
+        @extend .k-actions;
+    }
+
+    // Actions align
+    .k-actions-start {
+        justify-content: flex-start;
+    }
+    .k-actions-center {
+        justify-content: center;
+    }
+    .k-actions-end {
+        justify-content: flex-end;
+    }
+    .k-actions-stretched > * {
+        flex: 1 0 0%;
+    }
+
+    // Actions orientation
+    .k-actions-horizontal {
+        width: 100%;
+        flex-flow: row nowrap;
+    }
+    .k-actions-vertical {
+        flex-flow: column nowrap;
+    }
+}

packages/fluent/scss/action-buttons/_theme.scss

@@ -0,0 +1,14 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-action-buttons--theme() {
+
+    .k-actions {
+        @include fill(
+            var( --kendo-actions-text, #{$kendo-actions-text} ),
+            var( --kendo-actions-bg, #{$kendo-actions-bg} ),
+            var( --kendo-actions-border, #{$kendo-actions-border} )
+        );
+    }
+
+}

packages/fluent/scss/action-buttons/_variables.scss

@@ -0,0 +1,24 @@
+@use "../core" as *;
+
+/// Horizontal padding of the action buttons container.
+/// @group action-buttons
+$kendo-actions-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the action buttons container.
+/// @group action-buttons
+$kendo-actions-padding-y: map-get( $kendo-spacing, 3 ) !default;
+/// Width of the border around the action buttons container.
+/// @group action-buttons
+$kendo-actions-border-width: 0px !default;
+/// The background color of the action buttons container.
+/// @group action-buttons
+$kendo-actions-bg: null !default;
+/// The text color of the action buttons container.
+/// @group action-buttons
+$kendo-actions-text: null !default;
+/// The border color of the action buttons container.
+/// @group action-buttons
+$kendo-actions-border: null !default;
+
+/// Spacing between the action buttons.
+/// @group button
+$kendo-actions-button-spacing: map-get( $kendo-spacing, 2 ) !default;

packages/fluent/scss/action-buttons/index.scss

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

packages/fluent/scss/core/module-system/_components.scss

@@ -62,7 +62,7 @@ $components: (
     "dropzone",
 
     // Command interfaces
-    "actions",
+    "action-buttons",
     "appbar",
     "fab",
     "menu",

packages/fluent/scss/dialog/_layout.scss

@@ -61,7 +61,7 @@
         display: flex;
         flex-flow: row wrap;
         align-items: center;
-        gap: var( --kendo-dialog-button-spacing, #{$kendo-dialog-button-spacing} );
+        gap: var( --kendo-dialog-buttongroup-spacing, #{$kendo-dialog-buttongroup-spacing} );
         overflow: hidden;
     }
 

packages/fluent/scss/dialog/_variables.scss

@@ -23,6 +23,9 @@ $kendo-dialog-buttongroup-padding-y: map-get( $kendo-spacing, 6 ) !default; // $
 /// Width of the top border of the dialog action buttons.
 /// @group dialog
 $kendo-dialog-buttongroup-border-width: 0 !default;
+/// Spacing between the action buttons of the dialog.
+/// @group dialog
+$kendo-dialog-buttongroup-spacing: map-get( $kendo-spacing, 3 ) !default;
 
 /// Spacing between the buttons in the header of the dialog.
 /// @group dialog

packages/fluent/scss/index.scss

@@ -90,7 +90,7 @@
 
 
 // Command interfaces
-// @use "action-buttons";
+@use "action-buttons";
 // @use "appbar";
 // @use "fab";
 // @use "menu";
@@ -254,7 +254,7 @@
 
 
     // Command interfaces
-    // @include action-buttons.styles();
+    @include action-buttons.styles();
     // @include appbar.styles();
     // @include fab.styles();
     // @include menu.styles();

packages/fluent/scss/window/_layout.scss

@@ -140,6 +140,7 @@
         display: flex;
         flex-flow: row wrap;
         align-items: center;
+        gap: var( --kendo-window-buttongroup-spacing, #{$kendo-window-buttongroup-spacing} );
         overflow: hidden;
     }
 

packages/fluent/scss/window/_variables.scss

@@ -67,6 +67,9 @@ $kendo-window-buttongroup-padding-y: map-get( $kendo-spacing, 6 ) !default; // $
 /// Width of the top border of the window action buttons.
 /// @group window
 $kendo-window-buttongroup-border-width: 0 !default;
+/// Spacing between the action buttons of the window.
+/// @group window
+$kendo-window-buttongroup-spacing: map-get( $kendo-spacing, 3 ) !default;
 
 /// Background color of the window.
 /// @group window