diff --git a/packages/bootstrap/docs/customization-pdf-viewer.md b/packages/bootstrap/docs/customization-pdf-viewer.md
index b93727ba636..4ff55d753db 100644
--- a/packages/bootstrap/docs/customization-pdf-viewer.md
+++ b/packages/bootstrap/docs/customization-pdf-viewer.md
@@ -357,6 +357,76 @@ The following table lists the available variables for customization.
Description The text color of the PDFViewer icon.
+ $kendo-pdf-viewer-popup-padding-x
+ String
+ k-spacing(2)var(--kendo-spacing-2, 0.5rem)
+
+ Description The vertical padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-popup-padding-y
+ String
+ $kendo-pdf-viewer-popup-padding-xvar(--kendo-spacing-2, 0.5rem)
+
+ Description The horizontal padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-highlight-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #0d6efd)
+
+ Description The border color of the PDFViewer selected highlight annotation.
+
+ $kendo-pdf-viewer-highlight-annotation-hover-border
+ String
+ if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)var(--kendo-color-primary-hover, #0c64e4)
+
+ Description The background color of the PDFViewer hover highlight annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #0d6efd)
+
+ Description The border color of the PDFViewer selected free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-placeholder-text
+ Color
+ rgba(124, 22, 27, 0.5)rgba(124, 22, 27, 0.5)
+
+ Description The placeholder text color of the PDFViewer free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-text
+ Color
+ rgba(124, 22, 27, 0.7)rgba(124, 22, 27, 0.7)
+
+ Description The text color of the PDFViewer free text annotation.
diff --git a/packages/bootstrap/docs/customization-toolbar.md b/packages/bootstrap/docs/customization-toolbar.md
index 4a58e1d266e..6f87ad4e9b3 100644
--- a/packages/bootstrap/docs/customization-toolbar.md
+++ b/packages/bootstrap/docs/customization-toolbar.md
@@ -247,6 +247,106 @@ The following table lists the available variables for customization.
Description The box shadow of the Toolbar.
+ $kendo-toolbar-outline-text
+ String
+ $kendo-button-textvar(--kendo-color-on-base, #212529)
+
+ Description The text color of the outline Toolbar.
+
+ $kendo-toolbar-outline-border
+ String
+ if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 50%, transparent)
+
+ Description The color of the border around the outline Toolbar.
+
+ $kendo-toolbar-outline-gradient
+ Null
+ nullnull
+
+ Description The gradient of the outline Toolbar.
+
+ $kendo-toolbar-outline-shadow
+ Null
+ nullnull
+
+ Description The box shadow of the outline Toolbar.
+
+ $kendo-toolbar-outline-border-width
+ Number
+ $kendo-toolbar-border-width1px
+
+ Description The width of the border around the outline Toolbar.
+
+ $kendo-toolbar-flat-text
+ Null
+ nullnull
+
+ Description The text color of the flat Toolbar.
+
+ $kendo-toolbar-flat-border
+ String
+ $kendo-toolbar-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
+
+ Description The color of the border around the flat Toolbar.
+
+ $kendo-toolbar-flat-gradient
+ Null
+ nullnull
+
+ Description The gradient of the flat Toolbar.
+
+ $kendo-toolbar-flat-shadow
+ Null
+ nullnull
+
+ Description The box shadow of the flat Toolbar.
+
+ $kendo-toolbar-flat-border-width
+ Number
+ 1px1px
+
+ Description Border width of the flat Toolbar.
$kendo-toolbar-separator-border
String
@@ -277,16 +377,6 @@ The following table lists the available variables for customization.
Description The box shadow of the focused Toolbar item.
-
- $kendo-toolbar-flat-border-width
- Number
- 1px1px
-
- Description Border width of the flat Toolbar.
$kendo-toolbar-sizes
Map
diff --git a/packages/bootstrap/docs/customization.md b/packages/bootstrap/docs/customization.md
index 6e8dc4124ee..23bb185d464 100644
--- a/packages/bootstrap/docs/customization.md
+++ b/packages/bootstrap/docs/customization.md
@@ -16710,6 +16710,76 @@ The following table lists the available variables for customizing the Bootstrap
Description The text color of the PDFViewer icon.
+
+ $kendo-pdf-viewer-popup-padding-x
+ String
+ k-spacing(2)var(--kendo-spacing-2, 0.5rem)
+
+ Description The vertical padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-popup-padding-y
+ String
+ $kendo-pdf-viewer-popup-padding-xvar(--kendo-spacing-2, 0.5rem)
+
+ Description The horizontal padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-highlight-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #0d6efd)
+
+ Description The border color of the PDFViewer selected highlight annotation.
+
+ $kendo-pdf-viewer-highlight-annotation-hover-border
+ String
+ if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)var(--kendo-color-primary-hover, #0c64e4)
+
+ Description The background color of the PDFViewer hover highlight annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #0d6efd)
+
+ Description The border color of the PDFViewer selected free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-placeholder-text
+ Color
+ rgba(124, 22, 27, 0.5)rgba(124, 22, 27, 0.5)
+
+ Description The placeholder text color of the PDFViewer free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-text
+ Color
+ rgba(124, 22, 27, 0.7)rgba(124, 22, 27, 0.7)
+
+ Description The text color of the PDFViewer free text annotation.
@@ -27541,6 +27611,106 @@ The following table lists the available variables for customizing the Bootstrap
Description The box shadow of the Toolbar.
+ $kendo-toolbar-outline-text
+ String
+ $kendo-button-textvar(--kendo-color-on-base, #212529)
+
+ Description The text color of the outline Toolbar.
+
+ $kendo-toolbar-outline-border
+ String
+ if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 50%, transparent)
+
+ Description The color of the border around the outline Toolbar.
+
+ $kendo-toolbar-outline-gradient
+ Null
+ nullnull
+
+ Description The gradient of the outline Toolbar.
+
+ $kendo-toolbar-outline-shadow
+ Null
+ nullnull
+
+ Description The box shadow of the outline Toolbar.
+
+ $kendo-toolbar-outline-border-width
+ Number
+ $kendo-toolbar-border-width1px
+
+ Description The width of the border around the outline Toolbar.
+
+ $kendo-toolbar-flat-text
+ Null
+ nullnull
+
+ Description The text color of the flat Toolbar.
+
+ $kendo-toolbar-flat-border
+ String
+ $kendo-toolbar-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
+
+ Description The color of the border around the flat Toolbar.
+
+ $kendo-toolbar-flat-gradient
+ Null
+ nullnull
+
+ Description The gradient of the flat Toolbar.
+
+ $kendo-toolbar-flat-shadow
+ Null
+ nullnull
+
+ Description The box shadow of the flat Toolbar.
+
+ $kendo-toolbar-flat-border-width
+ Number
+ 1px1px
+
+ Description Border width of the flat Toolbar.
$kendo-toolbar-separator-border
String
@@ -27571,16 +27741,6 @@ The following table lists the available variables for customizing the Bootstrap
Description The box shadow of the focused Toolbar item.
-
- $kendo-toolbar-flat-border-width
- Number
- 1px1px
-
- Description Border width of the flat Toolbar.
$kendo-toolbar-sizes
Map
diff --git a/packages/bootstrap/scss/pdf-viewer/_variables.scss b/packages/bootstrap/scss/pdf-viewer/_variables.scss
index b84b761c205..13f944ace11 100644
--- a/packages/bootstrap/scss/pdf-viewer/_variables.scss
+++ b/packages/bootstrap/scss/pdf-viewer/_variables.scss
@@ -108,3 +108,26 @@ $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
/// The text color of the PDFViewer icon.
/// @group pdf-viewer
$kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;
+
+/// The vertical padding of the PDFViewer popup.
+/// @group pdf-viewer
+$kendo-pdf-viewer-popup-padding-x: k-spacing(2) !default;
+/// The horizontal padding of the PDFViewer popup.
+/// @group pdf-viewer
+$kendo-pdf-viewer-popup-padding-y: $kendo-pdf-viewer-popup-padding-x !default;
+
+/// The border color of the PDFViewer selected highlight annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-highlight-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
+/// The background color of the PDFViewer hover highlight annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-highlight-annotation-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
+/// The border color of the PDFViewer selected free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
+/// The placeholder text color of the PDFViewer free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-placeholder-text: rgba(124, 22, 27, 0.5) !default;
+/// The text color of the PDFViewer free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.7) !default;
diff --git a/packages/bootstrap/scss/toolbar/_variables.scss b/packages/bootstrap/scss/toolbar/_variables.scss
index 62b7fe9630a..7b243d3bef5 100644
--- a/packages/bootstrap/scss/toolbar/_variables.scss
+++ b/packages/bootstrap/scss/toolbar/_variables.scss
@@ -72,6 +72,38 @@ $kendo-toolbar-gradient: null !default;
/// @group toolbar
$kendo-toolbar-shadow: null !default;
+/// The text color of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-text: $kendo-button-text !default;
+/// The color of the border around the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5 )) !default;
+/// The gradient of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-gradient: null !default;
+/// The box shadow of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-shadow: null !default;
+/// The width of the border around the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-border-width: $kendo-toolbar-border-width !default;
+
+/// The text color of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-text: null !default;
+/// The color of the border around the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-border: $kendo-toolbar-border !default;
+/// The gradient of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-gradient: null !default;
+/// The box shadow of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-shadow: null !default;
+/// Border width of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-border-width: 1px !default;
+
/// The color of the separator border of the Toolbar.
/// @group toolbar
$kendo-toolbar-separator-border: inherit !default;
@@ -84,10 +116,6 @@ $kendo-toolbar-input-width: 10em !default;
/// @group toolbar
$kendo-toolbar-item-shadow: 0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) !default;
-/// Border width of the flat Toolbar.
-/// @group toolbar
-$kendo-toolbar-flat-border-width: 1px !default;
-
/// The sizes map for the Toolbar.
/// @group toolbar
$kendo-toolbar-sizes: (
diff --git a/packages/classic/docs/customization-pdf-viewer.md b/packages/classic/docs/customization-pdf-viewer.md
index df0631a2047..f2971ef8a85 100644
--- a/packages/classic/docs/customization-pdf-viewer.md
+++ b/packages/classic/docs/customization-pdf-viewer.md
@@ -357,6 +357,76 @@ The following table lists the available variables for customization.
Description The text color of the PDFViewer icon.
+
+ $kendo-pdf-viewer-popup-padding-x
+ String
+ k-spacing(2)var(--kendo-spacing-2, 0.5rem)
+
+ Description The vertical padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-popup-padding-y
+ String
+ $kendo-pdf-viewer-popup-padding-xvar(--kendo-spacing-2, 0.5rem)
+
+ Description The horizontal padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-highlight-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #f35800)
+
+ Description The border color of the PDFViewer selected highlight annotation.
+
+ $kendo-pdf-viewer-highlight-annotation-hover-border
+ String
+ if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)var(--kendo-color-primary-hover, #e05100)
+
+ Description The background color of the PDFViewer hover highlight annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #f35800)
+
+ Description The border color of the PDFViewer selected free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-placeholder-text
+ Color
+ rgba(124, 22, 27, 0.5)rgba(124, 22, 27, 0.5)
+
+ Description The placeholder text color of the PDFViewer free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-text
+ Color
+ rgba(124, 22, 27, 0.7)rgba(124, 22, 27, 0.7)
+
+ Description The text color of the PDFViewer free text annotation.
diff --git a/packages/classic/docs/customization-toolbar.md b/packages/classic/docs/customization-toolbar.md
index 01821c29b7b..69c1deff2c0 100644
--- a/packages/classic/docs/customization-toolbar.md
+++ b/packages/classic/docs/customization-toolbar.md
@@ -247,6 +247,106 @@ The following table lists the available variables for customization.
Description The box shadow of the Toolbar.
+ $kendo-toolbar-outline-text
+ String
+ $kendo-button-textvar(--kendo-color-on-base, #272727)
+
+ Description The text color of the outline Toolbar.
+
+ $kendo-toolbar-outline-border
+ String
+ if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5))color-mix(in srgb, var(--kendo-color-on-base, #272727) 50%, transparent)
+
+ Description The color of the border around the outline Toolbar.
+
+ $kendo-toolbar-outline-gradient
+ Null
+ nullnull
+
+ Description The gradient of the outline Toolbar.
+
+ $kendo-toolbar-outline-shadow
+ Null
+ nullnull
+
+ Description The box shadow of the outline Toolbar.
+
+ $kendo-toolbar-outline-border-width
+ Number
+ $kendo-toolbar-border-width1px
+
+ Description The width of the border around the outline Toolbar.
+
+ $kendo-toolbar-flat-text
+ Null
+ nullnull
+
+ Description The text color of the flat Toolbar.
+
+ $kendo-toolbar-flat-border
+ String
+ $kendo-toolbar-bordervar(--kendo-color-border, #cacaca)
+
+ Description The color of the border around the flat Toolbar.
+
+ $kendo-toolbar-flat-gradient
+ Null
+ nullnull
+
+ Description The gradient of the flat Toolbar.
+
+ $kendo-toolbar-flat-shadow
+ Null
+ nullnull
+
+ Description The box shadow of the flat Toolbar.
+
+ $kendo-toolbar-flat-border-width
+ Number
+ 1px1px
+
+ Description Border width of the flat Toolbar.
$kendo-toolbar-separator-border
String
@@ -277,16 +377,6 @@ The following table lists the available variables for customization.
Description The box shadow of the focused Toolbar item.
-
- $kendo-toolbar-flat-border-width
- Number
- 1px1px
-
- Description Border width of the flat Toolbar.
$kendo-toolbar-sizes
Map
diff --git a/packages/classic/docs/customization.md b/packages/classic/docs/customization.md
index 8807a9239bb..b28040243e3 100644
--- a/packages/classic/docs/customization.md
+++ b/packages/classic/docs/customization.md
@@ -16871,6 +16871,76 @@ The following table lists the available variables for customizing the Classic th
Description The text color of the PDFViewer icon.
+
+ $kendo-pdf-viewer-popup-padding-x
+ String
+ k-spacing(2)var(--kendo-spacing-2, 0.5rem)
+
+ Description The vertical padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-popup-padding-y
+ String
+ $kendo-pdf-viewer-popup-padding-xvar(--kendo-spacing-2, 0.5rem)
+
+ Description The horizontal padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-highlight-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #f35800)
+
+ Description The border color of the PDFViewer selected highlight annotation.
+
+ $kendo-pdf-viewer-highlight-annotation-hover-border
+ String
+ if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)var(--kendo-color-primary-hover, #e05100)
+
+ Description The background color of the PDFViewer hover highlight annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #f35800)
+
+ Description The border color of the PDFViewer selected free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-placeholder-text
+ Color
+ rgba(124, 22, 27, 0.5)rgba(124, 22, 27, 0.5)
+
+ Description The placeholder text color of the PDFViewer free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-text
+ Color
+ rgba(124, 22, 27, 0.7)rgba(124, 22, 27, 0.7)
+
+ Description The text color of the PDFViewer free text annotation.
@@ -27752,6 +27822,106 @@ The following table lists the available variables for customizing the Classic th
Description The box shadow of the Toolbar.
+ $kendo-toolbar-outline-text
+ String
+ $kendo-button-textvar(--kendo-color-on-base, #272727)
+
+ Description The text color of the outline Toolbar.
+
+ $kendo-toolbar-outline-border
+ String
+ if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5))color-mix(in srgb, var(--kendo-color-on-base, #272727) 50%, transparent)
+
+ Description The color of the border around the outline Toolbar.
+
+ $kendo-toolbar-outline-gradient
+ Null
+ nullnull
+
+ Description The gradient of the outline Toolbar.
+
+ $kendo-toolbar-outline-shadow
+ Null
+ nullnull
+
+ Description The box shadow of the outline Toolbar.
+
+ $kendo-toolbar-outline-border-width
+ Number
+ $kendo-toolbar-border-width1px
+
+ Description The width of the border around the outline Toolbar.
+
+ $kendo-toolbar-flat-text
+ Null
+ nullnull
+
+ Description The text color of the flat Toolbar.
+
+ $kendo-toolbar-flat-border
+ String
+ $kendo-toolbar-bordervar(--kendo-color-border, #cacaca)
+
+ Description The color of the border around the flat Toolbar.
+
+ $kendo-toolbar-flat-gradient
+ Null
+ nullnull
+
+ Description The gradient of the flat Toolbar.
+
+ $kendo-toolbar-flat-shadow
+ Null
+ nullnull
+
+ Description The box shadow of the flat Toolbar.
+
+ $kendo-toolbar-flat-border-width
+ Number
+ 1px1px
+
+ Description Border width of the flat Toolbar.
$kendo-toolbar-separator-border
String
@@ -27782,16 +27952,6 @@ The following table lists the available variables for customizing the Classic th
Description The box shadow of the focused Toolbar item.
-
- $kendo-toolbar-flat-border-width
- Number
- 1px1px
-
- Description Border width of the flat Toolbar.
$kendo-toolbar-sizes
Map
diff --git a/packages/classic/scss/pdf-viewer/_variables.scss b/packages/classic/scss/pdf-viewer/_variables.scss
index 232afce135e..44e5d486088 100644
--- a/packages/classic/scss/pdf-viewer/_variables.scss
+++ b/packages/classic/scss/pdf-viewer/_variables.scss
@@ -108,3 +108,26 @@ $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
/// The text color of the PDFViewer icon.
/// @group pdf-viewer
$kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;
+
+/// The vertical padding of the PDFViewer popup.
+/// @group pdf-viewer
+$kendo-pdf-viewer-popup-padding-x: k-spacing(2) !default;
+/// The horizontal padding of the PDFViewer popup.
+/// @group pdf-viewer
+$kendo-pdf-viewer-popup-padding-y: $kendo-pdf-viewer-popup-padding-x !default;
+
+/// The border color of the PDFViewer selected highlight annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-highlight-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
+/// The background color of the PDFViewer hover highlight annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-highlight-annotation-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
+/// The border color of the PDFViewer selected free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
+/// The placeholder text color of the PDFViewer free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-placeholder-text: rgba(124, 22, 27, 0.5) !default;
+/// The text color of the PDFViewer free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.7) !default;
diff --git a/packages/classic/scss/toolbar/_variables.scss b/packages/classic/scss/toolbar/_variables.scss
index c5085dd2910..601e1e9a6d1 100644
--- a/packages/classic/scss/toolbar/_variables.scss
+++ b/packages/classic/scss/toolbar/_variables.scss
@@ -72,6 +72,38 @@ $kendo-toolbar-gradient: null !default;
/// @group toolbar
$kendo-toolbar-shadow: null !default;
+/// The text color of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-text: $kendo-button-text !default;
+/// The color of the border around the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5)) !default;
+/// The gradient of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-gradient: null !default;
+/// The box shadow of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-shadow: null !default;
+/// The width of the border around the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-border-width: $kendo-toolbar-border-width !default;
+
+/// The text color of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-text: null !default;
+/// The color of the border around the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-border: $kendo-toolbar-border !default;
+/// The gradient of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-gradient: null !default;
+/// The box shadow of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-shadow: null !default;
+/// Border width of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-border-width: 1px !default;
+
/// The color of the separator border of the Toolbar.
/// @group toolbar
$kendo-toolbar-separator-border: inherit !default;
@@ -84,10 +116,6 @@ $kendo-toolbar-input-width: 10em !default;
/// @group toolbar
$kendo-toolbar-item-shadow: $kendo-button-focus-shadow !default;
-/// Border width of the flat Toolbar.
-/// @group toolbar
-$kendo-toolbar-flat-border-width: 1px !default;
-
/// The sizes map for the Toolbar.
/// @group toolbar
$kendo-toolbar-sizes: (
diff --git a/packages/default/docs/customization-pdf-viewer.md b/packages/default/docs/customization-pdf-viewer.md
index eda134aee8f..e6afac309dd 100644
--- a/packages/default/docs/customization-pdf-viewer.md
+++ b/packages/default/docs/customization-pdf-viewer.md
@@ -357,6 +357,86 @@ The following table lists the available variables for customization.
Description The text color of the PDFViewer icon.
+
+ $kendo-pdf-viewer-popup-padding-x
+ String
+ k-spacing(2)var(--kendo-spacing-2, 0.5rem)
+
+ Description The vertical padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-popup-padding-y
+ String
+ $kendo-pdf-viewer-popup-padding-xvar(--kendo-spacing-2, 0.5rem)
+
+ Description The horizontal padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-highlight-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #ff6358)
+
+ Description The border color of the PDFViewer selected highlight annotation.
+
+ $kendo-pdf-viewer-highlight-annotation-hover-border
+ String
+ if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)var(--kendo-color-primary-hover, #ea5a51)
+
+ Description The background color of the PDFViewer hover highlight annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #ff6358)
+
+ Description The border color of the PDFViewer selected free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-placeholder-text
+ Color
+ rgba(124, 22, 27, 0.5)rgba(124, 22, 27, 0.5)
+
+ Description The placeholder text color of the PDFViewer free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-text
+ Color
+ rgba(124, 22, 27, 0.5)rgba(124, 22, 27, 0.5)
+
+ Description The text color of the PDFViewer free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-text
+ Color
+ rgba(124, 22, 27, 0.7)rgba(124, 22, 27, 0.5)
+
+ Description The text color of the PDFViewer free text annotation.
diff --git a/packages/default/docs/customization-toolbar.md b/packages/default/docs/customization-toolbar.md
index 45d8622ab63..6047a75b5b0 100644
--- a/packages/default/docs/customization-toolbar.md
+++ b/packages/default/docs/customization-toolbar.md
@@ -247,6 +247,106 @@ The following table lists the available variables for customization.
Description The box shadow of the Toolbar.
+ $kendo-toolbar-outline-text
+ String
+ $kendo-button-textvar(--kendo-color-on-base, #3d3d3d)
+
+ Description The text color of the outline Toolbar.
+
+ $kendo-toolbar-outline-border
+ String
+ if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5))color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent)
+
+ Description The color of the border around the outline Toolbar.
+
+ $kendo-toolbar-outline-gradient
+ Null
+ nullnull
+
+ Description The gradient of the outline Toolbar.
+
+ $kendo-toolbar-outline-shadow
+ Null
+ nullnull
+
+ Description The box shadow of the outline Toolbar.
+
+ $kendo-toolbar-outline-border-width
+ Number
+ $kendo-toolbar-border-width1px
+
+ Description The width of the border around the outline Toolbar.
+
+ $kendo-toolbar-flat-text
+ Null
+ nullnull
+
+ Description The text color of the flat Toolbar.
+
+ $kendo-toolbar-flat-border
+ String
+ $kendo-toolbar-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
+
+ Description The color of the border around the flat Toolbar.
+
+ $kendo-toolbar-flat-gradient
+ Null
+ nullnull
+
+ Description The gradient of the flat Toolbar.
+
+ $kendo-toolbar-flat-shadow
+ Null
+ nullnull
+
+ Description The box shadow of the flat Toolbar.
+
+ $kendo-toolbar-flat-border-width
+ Number
+ 1px1px
+
+ Description Border width of the flat Toolbar.
$kendo-toolbar-separator-border
String
@@ -277,16 +377,6 @@ The following table lists the available variables for customization.
Description The box shadow of the focused Toolbar item.
-
- $kendo-toolbar-flat-border-width
- Number
- 1px1px
-
- Description Border width of the flat Toolbar.
$kendo-toolbar-sizes
Map
diff --git a/packages/default/docs/customization.md b/packages/default/docs/customization.md
index 9baa4263693..b97a2a24c4b 100644
--- a/packages/default/docs/customization.md
+++ b/packages/default/docs/customization.md
@@ -17100,6 +17100,86 @@ The following table lists the available variables for customizing the Default th
Description The text color of the PDFViewer icon.
+
+ $kendo-pdf-viewer-popup-padding-x
+ String
+ k-spacing(2)var(--kendo-spacing-2, 0.5rem)
+
+ Description The vertical padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-popup-padding-y
+ String
+ $kendo-pdf-viewer-popup-padding-xvar(--kendo-spacing-2, 0.5rem)
+
+ Description The horizontal padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-highlight-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #ff6358)
+
+ Description The border color of the PDFViewer selected highlight annotation.
+
+ $kendo-pdf-viewer-highlight-annotation-hover-border
+ String
+ if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)var(--kendo-color-primary-hover, #ea5a51)
+
+ Description The background color of the PDFViewer hover highlight annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #ff6358)
+
+ Description The border color of the PDFViewer selected free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-placeholder-text
+ Color
+ rgba(124, 22, 27, 0.5)rgba(124, 22, 27, 0.5)
+
+ Description The placeholder text color of the PDFViewer free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-text
+ Color
+ rgba(124, 22, 27, 0.5)rgba(124, 22, 27, 0.5)
+
+ Description The text color of the PDFViewer free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-text
+ Color
+ rgba(124, 22, 27, 0.7)rgba(124, 22, 27, 0.5)
+
+ Description The text color of the PDFViewer free text annotation.
@@ -27951,6 +28031,106 @@ The following table lists the available variables for customizing the Default th
Description The box shadow of the Toolbar.
+ $kendo-toolbar-outline-text
+ String
+ $kendo-button-textvar(--kendo-color-on-base, #3d3d3d)
+
+ Description The text color of the outline Toolbar.
+
+ $kendo-toolbar-outline-border
+ String
+ if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5))color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent)
+
+ Description The color of the border around the outline Toolbar.
+
+ $kendo-toolbar-outline-gradient
+ Null
+ nullnull
+
+ Description The gradient of the outline Toolbar.
+
+ $kendo-toolbar-outline-shadow
+ Null
+ nullnull
+
+ Description The box shadow of the outline Toolbar.
+
+ $kendo-toolbar-outline-border-width
+ Number
+ $kendo-toolbar-border-width1px
+
+ Description The width of the border around the outline Toolbar.
+
+ $kendo-toolbar-flat-text
+ Null
+ nullnull
+
+ Description The text color of the flat Toolbar.
+
+ $kendo-toolbar-flat-border
+ String
+ $kendo-toolbar-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
+
+ Description The color of the border around the flat Toolbar.
+
+ $kendo-toolbar-flat-gradient
+ Null
+ nullnull
+
+ Description The gradient of the flat Toolbar.
+
+ $kendo-toolbar-flat-shadow
+ Null
+ nullnull
+
+ Description The box shadow of the flat Toolbar.
+
+ $kendo-toolbar-flat-border-width
+ Number
+ 1px1px
+
+ Description Border width of the flat Toolbar.
$kendo-toolbar-separator-border
String
@@ -27981,16 +28161,6 @@ The following table lists the available variables for customizing the Default th
Description The box shadow of the focused Toolbar item.
-
- $kendo-toolbar-flat-border-width
- Number
- 1px1px
-
- Description Border width of the flat Toolbar.
$kendo-toolbar-sizes
Map
diff --git a/packages/default/scss/pdf-viewer/_layout.scss b/packages/default/scss/pdf-viewer/_layout.scss
index f3db434fe2a..7dabf6802a8 100644
--- a/packages/default/scss/pdf-viewer/_layout.scss
+++ b/packages/default/scss/pdf-viewer/_layout.scss
@@ -33,44 +33,69 @@
background: none;
overflow: visible;
}
+ }
- // Canvas
- .k-canvas {
- display: flex;
- flex-direction: column;
- flex: 1 1 auto;
- outline: none;
+ // Canvas
+ .k-pdf-viewer-canvas {
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 auto;
+ outline: none;
- &.k-enable-text-select {
- user-select: text;
- cursor: text;
- }
+ &.k-enable-text-select {
+ user-select: text;
+ cursor: text;
+ }
- &.k-enable-panning {
- cursor: grab;
+ &.k-enable-panning {
+ cursor: grab !important; // stylelint-disable-line declaration-no-important
- span::selection {
- background-color: transparent;
- }
+ span::selection {
+ background-color: transparent;
}
}
+ }
-
- // Pages
- .k-pdf-viewer-pages {
- flex: 1 1 auto;
- }
+ // Pages
+ .k-pdf-viewer-pages {
+ flex: 1 1 auto;
.k-page {
position: relative;
margin-block: $kendo-pdf-viewer-page-spacing;
margin-inline: auto;
+ z-index: 1;
+
+ // Canvas
+ .k-canvas-wrapper {
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+
+ canvas {
+ direction: ltr;
+ }
+
+ svg {
+ transform: none;
+ }
+
+ .k-highlight {
+ position: absolute;
+ mix-blend-mode: multiply;
+ fill-opacity: 1;
- canvas {
- direction: ltr;
+ }
+ .k-highlight-outline {
+ position: absolute;
+ fill: none;
+ stroke-width: 2px;
+ stroke-dasharray: 2;
+ }
}
+
.k-text-layer {
position: absolute;
top: 0;
@@ -78,16 +103,131 @@
opacity: .2;
overflow: hidden;
- > span {
+ .k-marked-content > span,
+ > span, br {
position: absolute;
line-height: $kendo-pdf-viewer-selection-line-height;
transform-origin: 0% 0%;
color: transparent;
+ white-space: pre;
+ cursor: text;
+ }
+
+ .k-marked-content {
+ top: 0;
+ height: 0;
+ }
+
+ .k-end-of-content {
+ display: block;
+ position: absolute;
+ inset: 100% 0 0;
+ z-index: 0;
+ cursor: default;
+ user-select: none;
}
.k-search-highlight-mark {
color: transparent;
}
+
+ .k-highlighting {
+ touch-action: none;
+ }
+ }
+
+ .k-annotation-layer {
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform-origin: 0 0;
+ pointer-events: none;
+
+ section {
+ position: absolute;
+ }
+
+ .k-annotation-text-content {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ color: transparent;
+ user-select: none;
+ pointer-events: none;
+ }
+ }
+
+ .k-annotation-editor-layer {
+ background: transparent;
+ position: absolute;
+ inset: 0;
+ transform-origin: 0 0;
+ cursor: auto;
+
+ .k-selected {
+ z-index: 100000 !important; // stylelint-disable-line declaration-no-important
+ }
+
+ .k-highlight-editor {
+ position: absolute;
+ background: transparent;
+ z-index: 1;
+ cursor: auto;
+ max-width: 100%;
+ max-height: 100%;
+ border: none;
+ outline: none;
+ pointer-events: none;
+ transform-origin: 0 0;
+
+ .k-internal {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: auto;
+ }
+ }
+
+ .k-free-text-editor {
+ position: absolute;
+ background: transparent;
+ z-index: 1;
+ transform-origin: 0 0;
+ cursor: text;
+ caret-color: $kendo-pdf-viewer-free-text-annotation-text;
+ max-width: 100%;
+ max-height: 100%;
+ border: solid 2px transparent;
+
+ &.k-selected.k-draggable {
+ cursor: move;;
+ }
+
+ &.k-selected .k-internal {
+ border-radius: 0px;
+ outline: 2px dashed $kendo-pdf-viewer-free-text-annotation-border;
+ }
+
+ .k-internal {
+ background: transparent;
+ border: none;
+ inset: 0;
+ overflow: visible;
+ white-space: nowrap;
+ user-select: none;
+ }
+
+ .k-internal:empty::before {
+ content: attr(default-content);
+ }
+ }
+ }
+
+ .k-annotation-editor-layer-disabled {
+ pointer-events: none;
}
}
@@ -108,7 +248,6 @@
background: none;
}
}
-
}
// Search
@@ -149,6 +288,28 @@
}
}
+ // Annotation Toolbar
+ .k-pdf-viewer-annotation-editor-toolbar > .k-toolbar {
+ width: min-content;
+ border-bottom-width: 0;
+ }
+
+
+ // Annotation Editor
+ .k-pdf-viewer-annotation-editor {
+ padding-block: $kendo-pdf-viewer-popup-padding-y;
+ padding-inline: $kendo-pdf-viewer-popup-padding-x;
+
+ .k-column-menu-group-header {
+ padding-inline: 0;
+ }
+
+ .k-form-field {
+ margin-top: 0;
+ }
+
+ }
+
}
diff --git a/packages/default/scss/pdf-viewer/_theme.scss b/packages/default/scss/pdf-viewer/_theme.scss
index 46bb4d298c9..3208c078a94 100644
--- a/packages/default/scss/pdf-viewer/_theme.scss
+++ b/packages/default/scss/pdf-viewer/_theme.scss
@@ -21,7 +21,7 @@
// Canvas
- .k-canvas {
+ .k-pdf-viewer-canvas {
@include fill(
$kendo-pdf-viewer-canvas-text,
$kendo-pdf-viewer-canvas-bg,
@@ -44,6 +44,16 @@
@include fill( $color: $kendo-pdf-viewer-icon-text );
}
+ .k-canvas-wrapper .k-highlight-outline {
+ &.k-hover,
+ &:hover {
+ stroke: $kendo-pdf-viewer-highlight-annotation-hover-border;
+ }
+
+ &.k-selected {
+ stroke: $kendo-pdf-viewer-highlight-annotation-border;
+ }
+ }
// Search
.k-search-highlight {
@@ -54,6 +64,14 @@
@include fill( $bg: $kendo-pdf-viewer-search-highlight-mark-bg );
}
+ .k-annotation-editor-layer .k-free-text-editor .k-internal {
+ color: $kendo-pdf-viewer-free-text-annotation-text;
+
+ &:empty::before {
+ color: $kendo-pdf-viewer-free-text-annotation-placeholder-text;
+ }
+ }
+
}
.k-pdf-viewer-canvas > .k-search-panel {
diff --git a/packages/default/scss/pdf-viewer/_variables.scss b/packages/default/scss/pdf-viewer/_variables.scss
index 4f06064fe2d..d577dbee998 100644
--- a/packages/default/scss/pdf-viewer/_variables.scss
+++ b/packages/default/scss/pdf-viewer/_variables.scss
@@ -108,3 +108,29 @@ $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
/// The text color of the PDFViewer icon.
/// @group pdf-viewer
$kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;
+
+/// The vertical padding of the PDFViewer popup.
+/// @group pdf-viewer
+$kendo-pdf-viewer-popup-padding-x: k-spacing(2) !default;
+/// The horizontal padding of the PDFViewer popup.
+/// @group pdf-viewer
+$kendo-pdf-viewer-popup-padding-y: $kendo-pdf-viewer-popup-padding-x !default;
+
+/// The border color of the PDFViewer selected highlight annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-highlight-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
+/// The background color of the PDFViewer hover highlight annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-highlight-annotation-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
+/// The border color of the PDFViewer selected free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
+/// The placeholder text color of the PDFViewer free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-placeholder-text: rgba(124, 22, 27, 0.5) !default;
+/// The text color of the PDFViewer free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.5) !default;
+/// The text color of the PDFViewer free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.7) !default;
diff --git a/packages/default/scss/prompt/_layout.scss b/packages/default/scss/prompt/_layout.scss
index 304ea539631..ec6a60a7ff8 100644
--- a/packages/default/scss/prompt/_layout.scss
+++ b/packages/default/scss/prompt/_layout.scss
@@ -6,6 +6,12 @@
flex-direction: column;
position: relative;
overflow: hidden;
+
+ // Toolbar
+ .k-toolbar {
+ border-top-width: 0;
+ border-inline-width: 0;
+ }
}
// Content
diff --git a/packages/default/scss/spreadsheet/_layout.scss b/packages/default/scss/spreadsheet/_layout.scss
index 8d2624cce16..18234cd0bf6 100644
--- a/packages/default/scss/spreadsheet/_layout.scss
+++ b/packages/default/scss/spreadsheet/_layout.scss
@@ -32,7 +32,8 @@
// Toolbar
.k-spreadsheet-toolbar {
- border-width: 0;
+ border-top-width: 0;
+ border-inline-width: 0;
}
// Action bar
diff --git a/packages/default/scss/toolbar/_layout.scss b/packages/default/scss/toolbar/_layout.scss
index ba716c9a9af..873d46e0813 100644
--- a/packages/default/scss/toolbar/_layout.scss
+++ b/packages/default/scss/toolbar/_layout.scss
@@ -101,7 +101,19 @@
text-decoration: none;
outline: 0;
}
+ }
+
+ // Outline Toolbar
+ .k-toolbar-outline {
+ border-width: $kendo-toolbar-outline-border-width;
+ background: none;
+ }
+ // Flat Toolbar
+ .k-toolbar-flat {
+ border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
+ border-inline-color: transparent !important; // stylelint-disable-line declaration-no-important
+ background: none !important; // stylelint-disable-line declaration-no-important
}
@@ -248,16 +260,6 @@
}
}
- // Flat Toolbar
- .k-toolbar.k-toolbar-flat {
- border-width: $kendo-toolbar-flat-border-width 0;
- border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
- border-bottom-color: inherit;
- color: inherit;
- background: none !important; // stylelint-disable-line declaration-no-important
- box-shadow: none;
- }
-
}
diff --git a/packages/default/scss/toolbar/_theme.scss b/packages/default/scss/toolbar/_theme.scss
index d09c38fe8e4..3213b43f5b1 100644
--- a/packages/default/scss/toolbar/_theme.scss
+++ b/packages/default/scss/toolbar/_theme.scss
@@ -2,15 +2,6 @@
// Theme
.k-toolbar {
- @include fill(
- $kendo-toolbar-text,
- $kendo-toolbar-bg,
- $kendo-toolbar-border,
- $kendo-toolbar-gradient
- );
- @include box-shadow( $kendo-toolbar-shadow );
-
-
// Separator
.k-separator,
.k-toolbar-separator {
@@ -30,6 +21,39 @@
}
+ // Solid Toolbar
+ .k-toolbar-solid {
+ @include fill(
+ $kendo-toolbar-text,
+ $kendo-toolbar-bg,
+ $kendo-toolbar-border,
+ $kendo-toolbar-gradient
+ );
+ @include box-shadow( $kendo-toolbar-shadow );
+ }
+
+ // Outline Toolbar
+ .k-toolbar-outline {
+ @include fill(
+ $color: $kendo-toolbar-outline-text,
+ $border: $kendo-toolbar-outline-border
+ );
+ @include box-shadow( $kendo-toolbar-outline-shadow );
+ }
+
+ // Flat Toolbar
+ .k-toolbar-flat {
+ @include fill(
+ $color: $kendo-toolbar-flat-text,
+ $border: $kendo-toolbar-flat-border
+ );
+ @include box-shadow( $kendo-toolbar-flat-shadow );
+
+ > .k-separator {
+ border-inline-color: $kendo-toolbar-flat-border;
+ }
+ }
+
.k-floating-toolbar,
.editorToolbarWindow.k-window-content { // stylelint-disable-line
@include fill(
diff --git a/packages/default/scss/toolbar/_variables.scss b/packages/default/scss/toolbar/_variables.scss
index cf880aa18b4..cc2d381ee3b 100644
--- a/packages/default/scss/toolbar/_variables.scss
+++ b/packages/default/scss/toolbar/_variables.scss
@@ -72,6 +72,38 @@ $kendo-toolbar-gradient: null !default;
/// @group toolbar
$kendo-toolbar-shadow: null !default;
+/// The text color of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-text: $kendo-button-text !default;
+/// The color of the border around the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5)) !default;
+/// The gradient of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-gradient: null !default;
+/// The box shadow of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-shadow: null !default;
+/// The width of the border around the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-border-width: $kendo-toolbar-border-width !default;
+
+/// The text color of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-text: null !default;
+/// The color of the border around the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-border: $kendo-toolbar-border !default;
+/// The gradient of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-gradient: null !default;
+/// The box shadow of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-shadow: null !default;
+/// Border width of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-border-width: 1px !default;
+
/// The color of the separator border of the Toolbar.
/// @group toolbar
$kendo-toolbar-separator-border: inherit !default;
@@ -84,10 +116,6 @@ $kendo-toolbar-input-width: 10em !default;
/// @group toolbar
$kendo-toolbar-item-shadow: $kendo-button-focus-shadow !default;
-/// Border width of the flat Toolbar.
-/// @group toolbar
-$kendo-toolbar-flat-border-width: 1px !default;
-
/// The sizes map for the Toolbar.
/// @group toolbar
$kendo-toolbar-sizes: (
diff --git a/packages/fluent/docs/customization-pdf-viewer.md b/packages/fluent/docs/customization-pdf-viewer.md
index 81b066cfd78..573fd1351d3 100644
--- a/packages/fluent/docs/customization-pdf-viewer.md
+++ b/packages/fluent/docs/customization-pdf-viewer.md
@@ -327,6 +327,76 @@ The following table lists the available variables for customization.
Description The text color of the PDFViewer icon.
+
+ $kendo-pdf-viewer-popup-padding-x
+ String
+ k-spacing(2)var(--kendo-spacing-2, 0.5rem)
+
+ Description The vertical padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-popup-padding-y
+ String
+ $kendo-pdf-viewer-popup-padding-xvar(--kendo-spacing-2, 0.5rem)
+
+ Description The horizontal padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-highlight-annotation-border
+ String
+ if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
+
+ Description The border color of the PDFViewer selected highlight annotation.
+
+ $kendo-pdf-viewer-highlight-annotation-hover-border
+ String
+ if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))var(--kendo-color-primary-hover, #106ebe)
+
+ Description The background color of the PDFViewer hover highlight annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-border
+ String
+ if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
+
+ Description The border color of the PDFViewer selected free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-placeholder-text
+ Color
+ rgba(124, 22, 27, 0.5)rgba(124, 22, 27, 0.5)
+
+ Description The placeholder text color of the PDFViewer free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-text
+ Color
+ rgba(124, 22, 27, 0.7)rgba(124, 22, 27, 0.7)
+
+ Description The text color of the PDFViewer free text annotation.
diff --git a/packages/fluent/docs/customization-toolbar.md b/packages/fluent/docs/customization-toolbar.md
index 45f95e43e6b..193947fe57d 100644
--- a/packages/fluent/docs/customization-toolbar.md
+++ b/packages/fluent/docs/customization-toolbar.md
@@ -187,11 +187,71 @@ The following table lists the available variables for customization.
Description The color of the border around the Toolbar.
+ $kendo-toolbar-outline-text
+ Null
+ nullnull
+
+ Description The text color of the outline Toolbar.
+
+ $kendo-toolbar-outline-border
+ String
+ k-color(border)var(--kendo-color-border, #8a8886)
+
+ Description The color of the border around the outline Toolbar.
+
+ $kendo-toolbar-outline-border-width
+ Number
+ $kendo-toolbar-border-width1px
+
+ Description The width of the border around the outline Toolbar.
+
+ $kendo-toolbar-flat-text
+ Null
+ nullnull
+
+ Description The text color of the flat Toolbar.
+
+ $kendo-toolbar-flat-border
+ String
+ $kendo-toolbar-bordervar(--kendo-component-border, initial)
+
+ Description The color of the border around the flat Toolbar.
+
+ $kendo-toolbar-flat-border-width
+ Number
+ 1px1px
+
+ Description Border width of the flat Toolbar.
$kendo-toolbar-separator-border
String
- if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)inheritinherit
Description The color of the separator border of the Toolbar.
Description The border color of the focused Toolbar item.
-
- $kendo-toolbar-flat-border-width
- Number
- 1px1px
-
- Description Border width of the flat Toolbar.
$kendo-toolbar-sizes
Map
diff --git a/packages/fluent/docs/customization.md b/packages/fluent/docs/customization.md
index 8a2e3a9a9f4..7f1483ec193 100644
--- a/packages/fluent/docs/customization.md
+++ b/packages/fluent/docs/customization.md
@@ -21426,6 +21426,76 @@ The following table lists the available variables for customizing the Fluent the
Description The text color of the PDFViewer icon.
+
+ $kendo-pdf-viewer-popup-padding-x
+ String
+ k-spacing(2)var(--kendo-spacing-2, 0.5rem)
+
+ Description The vertical padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-popup-padding-y
+ String
+ $kendo-pdf-viewer-popup-padding-xvar(--kendo-spacing-2, 0.5rem)
+
+ Description The horizontal padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-highlight-annotation-border
+ String
+ if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
+
+ Description The border color of the PDFViewer selected highlight annotation.
+
+ $kendo-pdf-viewer-highlight-annotation-hover-border
+ String
+ if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))var(--kendo-color-primary-hover, #106ebe)
+
+ Description The background color of the PDFViewer hover highlight annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-border
+ String
+ if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
+
+ Description The border color of the PDFViewer selected free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-placeholder-text
+ Color
+ rgba(124, 22, 27, 0.5)rgba(124, 22, 27, 0.5)
+
+ Description The placeholder text color of the PDFViewer free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-text
+ Color
+ rgba(124, 22, 27, 0.7)rgba(124, 22, 27, 0.7)
+
+ Description The text color of the PDFViewer free text annotation.
@@ -32382,11 +32452,71 @@ The following table lists the available variables for customizing the Fluent the
Description The color of the border around the Toolbar.
+ $kendo-toolbar-outline-text
+ Null
+ nullnull
+
+ Description The text color of the outline Toolbar.
+
+ $kendo-toolbar-outline-border
+ String
+ k-color(border)var(--kendo-color-border, #8a8886)
+
+ Description The color of the border around the outline Toolbar.
+
+ $kendo-toolbar-outline-border-width
+ Number
+ $kendo-toolbar-border-width1px
+
+ Description The width of the border around the outline Toolbar.
+
+ $kendo-toolbar-flat-text
+ Null
+ nullnull
+
+ Description The text color of the flat Toolbar.
+
+ $kendo-toolbar-flat-border
+ String
+ $kendo-toolbar-bordervar(--kendo-component-border, initial)
+
+ Description The color of the border around the flat Toolbar.
+
+ $kendo-toolbar-flat-border-width
+ Number
+ 1px1px
+
+ Description Border width of the flat Toolbar.
$kendo-toolbar-separator-border
String
- if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)inheritinherit
Description The color of the separator border of the Toolbar.
Description The border color of the focused Toolbar item.
-
- $kendo-toolbar-flat-border-width
- Number
- 1px1px
-
- Description Border width of the flat Toolbar.
$kendo-toolbar-sizes
Map
diff --git a/packages/fluent/scss/grid/_theme.scss b/packages/fluent/scss/grid/_theme.scss
index 763babf862e..7e212c9a393 100644
--- a/packages/fluent/scss/grid/_theme.scss
+++ b/packages/fluent/scss/grid/_theme.scss
@@ -441,14 +441,6 @@
}
}
- .k-column-menu-group-header-text {
- @include fill(
- var( --kendo-grid-column-menu-group-header-text, #{$kendo-grid-column-menu-group-header-text} ),
- var( --kendo-grid-column-menu-group-header-bg, #{$kendo-grid-column-menu-group-header-bg} ),
- var( --kendo-grid-column-menu-group-header-border, #{$kendo-grid-column-menu-group-header-border} )
- );
- }
-
.k-check-all-wrap {
@include fill( $border: $kendo-popup-border );
}
@@ -465,6 +457,13 @@
background-color: var( --kendo-grid-column-menu-tabbed-bg, #{$kendo-grid-column-menu-tabbed-bg} );
}
+ .k-column-menu-group-header-text {
+ @include fill(
+ var( --kendo-grid-column-menu-group-header-text, #{$kendo-grid-column-menu-group-header-text} ),
+ var( --kendo-grid-column-menu-group-header-bg, #{$kendo-grid-column-menu-group-header-bg} ),
+ var( --kendo-grid-column-menu-group-header-border, #{$kendo-grid-column-menu-group-header-border} )
+ );
+ }
.k-grid-norecords-template {
background-color: $kendo-grid-bg;
diff --git a/packages/fluent/scss/pdf-viewer/_layout.scss b/packages/fluent/scss/pdf-viewer/_layout.scss
index c8c22f3c2fe..214f0ea699b 100644
--- a/packages/fluent/scss/pdf-viewer/_layout.scss
+++ b/packages/fluent/scss/pdf-viewer/_layout.scss
@@ -49,7 +49,8 @@
}
&.k-enable-panning {
- cursor: grab;
+ cursor: grab !important; // stylelint-disable-line declaration-no-important
+
span::selection {
background-color: transparent;
@@ -66,9 +67,34 @@
position: relative;
margin-block: var( --kendo-pdf-viewer-page-spacing, #{$kendo-pdf-viewer-page-spacing} );
margin-inline: auto;
+ z-index: 1;
+
+ // Canvas
+ .k-canvas-wrapper {
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+
+ canvas {
+ direction: ltr;
+ }
+
+ svg {
+ transform: none;
+ }
- canvas {
- direction: ltr;
+ .k-highlight {
+ position: absolute;
+ mix-blend-mode: multiply;
+ fill-opacity: 1;
+
+ }
+ .k-highlight-outline {
+ position: absolute;
+ fill: none;
+ stroke-width: 2px;
+ stroke-dasharray: 2;
+ }
}
.k-text-layer {
@@ -78,16 +104,131 @@
opacity: .2;
overflow: hidden;
- > span {
+ .k-marked-content > span,
+ > span, br {
position: absolute;
line-height: var( --kendo-pdf-viewer-selection-line-height, #{$kendo-pdf-viewer-selection-line-height} );
transform-origin: 0% 0%;
color: transparent;
+ white-space: pre;
+ cursor: text;
+ }
+
+ .k-marked-content {
+ top: 0;
+ height: 0;
+ }
+
+ .k-end-of-content {
+ display: block;
+ position: absolute;
+ inset: 100% 0 0;
+ z-index: 0;
+ cursor: default;
+ user-select: none;
}
.k-search-highlight-mark {
color: transparent;
}
+
+ .k-highlighting {
+ touch-action: none;
+ }
+ }
+
+ .k-annotation-layer {
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform-origin: 0 0;
+ pointer-events: none;
+
+ section {
+ position: absolute;
+ }
+
+ .k-annotation-text-content {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ color: transparent;
+ user-select: none;
+ pointer-events: none;
+ }
+ }
+
+ .k-annotation-editor-layer {
+ background: transparent;
+ position: absolute;
+ inset: 0;
+ transform-origin: 0 0;
+ cursor: auto;
+
+ .k-selected {
+ z-index: 100000 !important; // stylelint-disable-line declaration-no-important
+ }
+
+ .k-highlight-editor {
+ position: absolute;
+ background: transparent;
+ z-index: 1;
+ cursor: auto;
+ max-width: 100%;
+ max-height: 100%;
+ border: none;
+ outline: none;
+ pointer-events: none;
+ transform-origin: 0 0;
+
+ .k-internal {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: auto;
+ }
+ }
+
+ .k-free-text-editor {
+ position: absolute;
+ background: transparent;
+ z-index: 1;
+ transform-origin: 0 0;
+ cursor: text;
+ caret-color: var( --kendo-pdf-viewer-free-text-annotation-text, #{$kendo-pdf-viewer-free-text-annotation-text} );
+ max-width: 100%;
+ max-height: 100%;
+ border: solid 2px transparent;
+
+ &.k-selected.k-draggable {
+ cursor: move;;
+ }
+
+ &.k-selected .k-internal {
+ border-radius: 0px;
+ outline: 2px dashed var( --kendo-pdf-viewer-free-text-annotation-border, #{$kendo-pdf-viewer-free-text-annotation-border} );
+ }
+
+ .k-internal {
+ background: transparent;
+ border: none;
+ inset: 0;
+ overflow: visible;
+ white-space: nowrap;
+ user-select: none;
+ }
+
+ .k-internal:empty::before {
+ content: attr(default-content);
+ }
+ }
+ }
+
+ .k-annotation-editor-layer-disabled {
+ pointer-events: none;
}
}
@@ -149,4 +290,24 @@
}
}
+ // Annotation Toolbar
+ .k-pdf-viewer-annotation-editor-toolbar > .k-toolbar {
+ width: min-content;
+ border-bottom-width: 0;
+ }
+
+
+ // Annotation Editor
+ .k-pdf-viewer-annotation-editor {
+ padding-block: var(--kendo-pdf-viewer-popup-padding-y, #{$kendo-pdf-viewer-popup-padding-y} );
+ padding-inline: var(--kendo-pdf-viewer-popup-padding-x, #{$kendo-pdf-viewer-popup-padding-x} );
+
+ .k-column-menu-group-header {
+ padding-inline: 0;
+ }
+
+ .k-form-field {
+ margin-top: 0;
+ }
+ }
}
diff --git a/packages/fluent/scss/pdf-viewer/_theme.scss b/packages/fluent/scss/pdf-viewer/_theme.scss
index 8045277f7c9..b7cbc968937 100644
--- a/packages/fluent/scss/pdf-viewer/_theme.scss
+++ b/packages/fluent/scss/pdf-viewer/_theme.scss
@@ -12,7 +12,7 @@
// Canvas
- .k-canvas {
+ .k-pdf-viewer-canvas {
@include fill(
var( --kendo-pdf-viewer-canvas-text, #{$kendo-pdf-viewer-canvas-text} ),
var( --kendo-pdf-viewer-canvas-bg, #{$kendo-pdf-viewer-canvas-bg} ),
@@ -39,6 +39,16 @@
);
}
+ .k-canvas-wrapper .k-highlight-outline {
+ &.k-hover,
+ &:hover {
+ stroke: var( --kendo-pdf-viewer-highlight-annotation-hover-border, #{$kendo-pdf-viewer-highlight-annotation-hover-border} );
+ }
+
+ &.k-selected {
+ stroke: var( --kendo-pdf-viewer-highlight-annotation-border, #{$kendo-pdf-viewer-highlight-annotation-border} );
+ }
+ }
// Search
.k-search-highlight {
@@ -52,7 +62,13 @@
$bg: var( --kendo-pdf-viewer-search-highlight-mark-bg, #{$kendo-pdf-viewer-search-highlight-mark-bg} )
);
}
+ .k-annotation-editor-layer .k-free-text-editor .k-internal {
+ color: var( --kendo-pdf-viewer-free-text-annotation-text, #{$kendo-pdf-viewer-free-text-annotation-text} );
+ &:empty::before {
+ color: var( --kendo-pdf-viewer-free-text-annotation-placeholder-text, #{$kendo-pdf-viewer-free-text-annotation-placeholder-text} );
+ }
+ }
}
.k-pdf-viewer-canvas > .k-search-panel {
diff --git a/packages/fluent/scss/pdf-viewer/_variables.scss b/packages/fluent/scss/pdf-viewer/_variables.scss
index ca00db13f25..cbbf4ac072b 100644
--- a/packages/fluent/scss/pdf-viewer/_variables.scss
+++ b/packages/fluent/scss/pdf-viewer/_variables.scss
@@ -99,3 +99,26 @@ $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
/// The text color of the PDFViewer icon.
/// @group pdf-viewer
$kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;
+
+/// The vertical padding of the PDFViewer popup.
+/// @group pdf-viewer
+$kendo-pdf-viewer-popup-padding-x: k-spacing(2) !default;
+/// The horizontal padding of the PDFViewer popup.
+/// @group pdf-viewer
+$kendo-pdf-viewer-popup-padding-y: $kendo-pdf-viewer-popup-padding-x !default;
+
+/// The border color of the PDFViewer selected highlight annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-highlight-annotation-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+/// The background color of the PDFViewer hover highlight annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-highlight-annotation-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+/// The border color of the PDFViewer selected free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+/// The placeholder text color of the PDFViewer free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-placeholder-text: rgba(124, 22, 27, 0.5) !default;
+/// The text color of the PDFViewer free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.7) !default;
diff --git a/packages/fluent/scss/prompt/_layout.scss b/packages/fluent/scss/prompt/_layout.scss
index cc4df1b7605..b1f41f5ff56 100644
--- a/packages/fluent/scss/prompt/_layout.scss
+++ b/packages/fluent/scss/prompt/_layout.scss
@@ -9,6 +9,12 @@
flex-direction: column;
position: relative;
overflow: hidden;
+
+ // Toolbar
+ .k-toolbar {
+ border-top-width: 0;
+ border-inline-width: 0;
+ }
}
// Content
diff --git a/packages/fluent/scss/spreadsheet/_layout.scss b/packages/fluent/scss/spreadsheet/_layout.scss
index c2ac86a8fa7..b6dade6d8f7 100644
--- a/packages/fluent/scss/spreadsheet/_layout.scss
+++ b/packages/fluent/scss/spreadsheet/_layout.scss
@@ -54,10 +54,10 @@
// Toolbar
.k-spreadsheet-toolbar {
- border-width: 0;
+ border-top-width: 0;
+ border-inline-width: 0;
}
-
// Action bar
.k-spreadsheet-action-bar {
border-width: 0 0 var( --kendo-spreadsheet-action-bar-border-width, #{$kendo-spreadsheet-action-bar-border-width} );
diff --git a/packages/fluent/scss/toolbar/_layout.scss b/packages/fluent/scss/toolbar/_layout.scss
index 603749cd57c..454f4dbc087 100644
--- a/packages/fluent/scss/toolbar/_layout.scss
+++ b/packages/fluent/scss/toolbar/_layout.scss
@@ -87,7 +87,19 @@
outline-width: var( --kendo-toolbar-item-focus-outline-width, #{$kendo-toolbar-item-focus-outline-width} );
outline-style: var( --kendo-toolbar-item-focus-outline-style, #{$kendo-toolbar-item-focus-outline-style} );
}
+ }
+
+ // Outline Toolbar
+ .k-toolbar-outline {
+ border-width: var( --kendo-toolbar-outline-border-width, #{$kendo-toolbar-outline-border-width} );
+ background: none;
+ }
+ // Flat Toolbar
+ .k-toolbar-flat {
+ border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
+ border-inline-color: transparent !important; // stylelint-disable-line declaration-no-important
+ background: none !important; // stylelint-disable-line declaration-no-important
}
// Toolbar group
@@ -223,14 +235,4 @@
}
}
- // Flat Toolbar
- .k-toolbar.k-toolbar-flat {
- border-width: $kendo-toolbar-flat-border-width 0;
- border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
- border-bottom-color: inherit;
- color: inherit;
- background: none !important; // stylelint-disable-line declaration-no-important
- box-shadow: none;
- }
-
}
diff --git a/packages/fluent/scss/toolbar/_theme.scss b/packages/fluent/scss/toolbar/_theme.scss
index 66dac554f79..6abea8e2d58 100644
--- a/packages/fluent/scss/toolbar/_theme.scss
+++ b/packages/fluent/scss/toolbar/_theme.scss
@@ -1,13 +1,10 @@
+@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;
@mixin kendo-toolbar--theme() {
// Theme
.k-toolbar {
- color: var( --kendo-toolbar-text, #{$kendo-toolbar-text} );
- background-color: var( --kendo-toolbar-bg, #{$kendo-toolbar-bg} );
- border-color: var( --kendo-toolbar-border, #{$kendo-toolbar-border} );
-
// Separator
.k-separator,
.k-toolbar-separator {
@@ -22,6 +19,35 @@
}
+ // Solid Toolbar
+ .k-toolbar-solid {
+ @include fill (
+ var( --kendo-toolbar-text, #{$kendo-toolbar-text} ),
+ var( --kendo-toolbar-bg, #{$kendo-toolbar-bg} ),
+ var( --kendo-toolbar-border, #{$kendo-toolbar-border} )
+ );
+ }
+
+ // Outline Toolbar
+ .k-toolbar-outline {
+ @include fill (
+ $color: var( --kendo-toolbar-outline-text, #{$kendo-toolbar-outline-text} ),
+ $border: var( --kendo-toolbar-outline-border, #{$kendo-toolbar-outline-border} )
+ );
+ }
+
+ // Flat Toolbar
+ .k-toolbar-flat {
+ @include fill (
+ $color: var( --kendo-toolbar-flat-text, #{$kendo-toolbar-flat-text} ),
+ $border: var( --kendo-toolbar-flat-border, #{$kendo-toolbar-flat-border} )
+ );
+
+ > .k-separator {
+ border-inline-color: var( --kendo-toolbar-flat-border, #{$kendo-toolbar-flat-border} );
+ }
+ }
+
// stylelint-disable selector-class-pattern
.k-floating-toolbar,
.editorToolbarWindow.k-window-content {
diff --git a/packages/fluent/scss/toolbar/_variables.scss b/packages/fluent/scss/toolbar/_variables.scss
index 5f5664ebdd9..cd06820603c 100644
--- a/packages/fluent/scss/toolbar/_variables.scss
+++ b/packages/fluent/scss/toolbar/_variables.scss
@@ -55,9 +55,29 @@ $kendo-toolbar-text: var( --kendo-component-text, inherit ) !default;
/// @group toolbar
$kendo-toolbar-border: var( --kendo-component-border, initial ) !default;
+/// The text color of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-text: null !default;
+/// The color of the border around the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-border: k-color(border) !default;
+/// The width of the border around the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-border-width: $kendo-toolbar-border-width !default;
+
+/// The text color of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-text: null !default;
+/// The color of the border around the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-border: $kendo-toolbar-border !default;
+/// Border width of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-border-width: 1px !default;
+
/// The color of the separator border of the Toolbar.
/// @group toolbar
-$kendo-toolbar-separator-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-toolbar-separator-border: inherit !default;
/// The width of the input in the Toolbar.
/// @group toolbar
@@ -73,10 +93,6 @@ $kendo-toolbar-item-focus-outline-style: solid !default;
/// @group toolbar
$kendo-toolbar-item-focus-outline-color: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
-/// Border width of the flat Toolbar.
-/// @group toolbar
-$kendo-toolbar-flat-border-width: 1px !default;
-
/// The sizes map for the Toolbar.
/// @group toolbar
$kendo-toolbar-sizes: (
diff --git a/packages/html/src/coloreditor/color-editor.spec.tsx b/packages/html/src/coloreditor/color-editor.spec.tsx
index b367ff547df..605c57374d0 100644
--- a/packages/html/src/coloreditor/color-editor.spec.tsx
+++ b/packages/html/src/coloreditor/color-editor.spec.tsx
@@ -23,13 +23,15 @@ export type KendoColorEditorProps = {
dir?: 'ltr' | 'rtl';
group?: boolean;
palette?: Array | any;
+ actionButtons?: boolean;
};
export type KendoColorEditorState = { [K in (typeof states)[number]]?: boolean };
const defaultOptions = {
view: 'gradient',
- palette: PALETTEPRESETS.office
+ palette: PALETTEPRESETS.office,
+ actionButtons: true,
} as const;
export const ColorEditor = (
@@ -46,6 +48,7 @@ export const ColorEditor = (
focusView,
dir,
group,
+ actionButtons = defaultOptions.actionButtons,
} = props;
return (
@@ -76,10 +79,10 @@ export const ColorEditor = (
{ view === 'gradient' ? }
-
+ {actionButtons &&
Cancel
Apply
-
+ }
);
};
diff --git a/packages/html/src/grid/tests/grid-angular.tsx b/packages/html/src/grid/tests/grid-angular.tsx
index b6817648f89..ee0c83b1af9 100644
--- a/packages/html/src/grid/tests/grid-angular.tsx
+++ b/packages/html/src/grid/tests/grid-angular.tsx
@@ -155,7 +155,7 @@ export default () =>(
Angular -- standalone column chooser
+
);
};
diff --git a/packages/html/src/pdf-viewer/pdf-viewer.spec.tsx b/packages/html/src/pdf-viewer/pdf-viewer.spec.tsx
index 8ea8ef32647..8c37faca0c6 100644
--- a/packages/html/src/pdf-viewer/pdf-viewer.spec.tsx
+++ b/packages/html/src/pdf-viewer/pdf-viewer.spec.tsx
@@ -1,10 +1,10 @@
-import { ButtonGroup, Combobox } from '..';
+import { ButtonGroup, Combobox, MenuButton } from '..';
import { Button } from '../button';
import { DropzoneNormal } from '../dropzone';
import { classNames, stateClassNames, States, } from '../misc';
import { Pager } from '../pager';
import { Textbox } from '../textbox';
-import { Toolbar } from '../toolbar';
+import { Toolbar, ToolbarSeparator } from '../toolbar';
import { UploadNormal } from '../upload';
export const PDFVIEWER_CLASSNAME = `k-pdf-viewer`;
@@ -17,6 +17,8 @@ const options = {};
export type KendoPDFViewerProps = {
toolbar?: React.JSX.Element;
+ annotations?: boolean;
+ annotationsToolbar?: React.JSX.Element;
showSearchPanel?: boolean;
blank?: boolean;
};
@@ -24,30 +26,62 @@ export type KendoPDFViewerProps = {
export type KendoPDFViewerState = { [K in (typeof states)[number]]?: boolean };
const defaultToolbar =
-
-
-
-
-
-
+
+
+
+
+
+
+;
+
+const defaultAnnotationsToolbar =
+
+ {/* Toggleable button group */}
+
+
+
;
const defaultOptions = {
toolbar: defaultToolbar,
showSearchPanel: false,
blank: false,
+ annotations: false,
+ annotationsToolbar: defaultAnnotationsToolbar,
};
export const PDFViewer = (
@@ -58,6 +92,8 @@ export const PDFViewer = (
toolbar = defaultOptions.toolbar,
showSearchPanel = defaultOptions.showSearchPanel,
blank = defaultOptions.blank,
+ annotations,
+ annotationsToolbar = defaultOptions.annotationsToolbar,
...other
} = props;
@@ -71,22 +107,23 @@ export const PDFViewer = (
)}
>
{toolbar}
+ {annotations && annotationsToolbar}
{showSearchPanel &&
-
+
0 of 0
-
}
diff --git a/packages/html/src/pdf-viewer/templates/pdf-viewer-blank.tsx b/packages/html/src/pdf-viewer/templates/pdf-viewer-blank.tsx
index ed00e924cab..dc1688caa60 100644
--- a/packages/html/src/pdf-viewer/templates/pdf-viewer-blank.tsx
+++ b/packages/html/src/pdf-viewer/templates/pdf-viewer-blank.tsx
@@ -1,27 +1,29 @@
import { PDFViewer } from "..";
-import { ButtonGroup, Combobox, Pager, Toolbar } from "../..";
+import { ButtonGroup, Combobox, MenuButton, Pager, Toolbar, ToolbarSeparator } from "../..";
import { Button } from "../../button";
export const PDFViewerBlank = (props) => (
-
+
-
-
-
}
{...props}
diff --git a/packages/html/src/pdf-viewer/templates/pdf-viewer-with-annotations.tsx b/packages/html/src/pdf-viewer/templates/pdf-viewer-with-annotations.tsx
new file mode 100644
index 00000000000..b4f535ea14e
--- /dev/null
+++ b/packages/html/src/pdf-viewer/templates/pdf-viewer-with-annotations.tsx
@@ -0,0 +1,37 @@
+import { PDFViewer, PDFViewerPage } from "..";
+import { Button, ButtonGroup, Combobox, MenuButton, Pager, Toolbar, ToolbarSeparator } from "../..";
+
+export const PDFViewerWithAnnotations = (props) => (
+
+
+
+
+
+
+
PDF Viewer Full Featured Annotations Toolbar
+
+
+
PDF Viewer v1 Annotations Toolbar
+
+
+
+
+
+
+
+ } />
+
+
+
PDF Viewer Delete Highlight Annotation Dialog
+
PDF Viewer Delete Underline Annotation Dialog
+
+
+
+ Delete
+ Cancel
+
+ }>
+ Are you sure you want to delete the highlight annotation?
+
+
+
+
+ Delete
+ Cancel
+
+ }>
+ Are you sure you want to delete the underline annotation?
+
+
+
+
PDF Viewer Delete Strikethrough Annotation Dialog
+
+
+
+
+ Delete
+ Cancel
+
+ }>
+ Are you sure you want to delete the strikethrough annotation?
+
+
+
+
PDF Viewer Free Text Annotation
+
+
+
+
+
+ Test content for highlight annotation
+
+
+
+
+
+
+ Currently writing text
+
+
+
+
+
+ Selected Custom text (adds a draggable cursor)
+
+
+
+
+ }/>
+
+
PDF Viewer Highlight Annotation in normal, selected and hover states
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Test content for highlight annotation
+
+
+
+
+
+ {/* Floating toolbar here */}
+
+
+
+ }/>
+
+
+
+
+
+
+
+
+
PDF Viewer Color Editor
+
PDF Viewer Text and Color Editor
+
+
+
+
+
+ Text Style
+
+
+
+
+ Color
+
+
+
+
+
+
PDF Viewer Toolbar Menu Popup
+
PDF Viewer Annotation Selection Popup
+
+
+
+
+
+
+
-
+
PDF Viewer with Search Panel
+
+
PDF Viewer + Annotations Toolbar with Search Panel
+
+ { Toolbar.options.fillMode.map((fillMode) => (
+ <>
+ {fillMode}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+);
diff --git a/packages/html/src/toolbar/toolbar-angular.spec.tsx b/packages/html/src/toolbar/toolbar-angular.spec.tsx
index ce0dbf3b0a6..ff1a3cdf877 100644
--- a/packages/html/src/toolbar/toolbar-angular.spec.tsx
+++ b/packages/html/src/toolbar/toolbar-angular.spec.tsx
@@ -5,7 +5,7 @@ import { Combobox } from '../combobox';
import { DropdownList } from '../dropdownlist';
import { MenuButton } from '../menu-button';
import SplitButton from '../split-button/split-button.spec';
-import { classNames, optionClassNames, stateClassNames, States, Size } from '../misc';
+import { classNames, optionClassNames, stateClassNames, States, Size, FillMode } from '../misc';
export const TOOLBARANGULAR_CLASSNAME = `k-toolbar`;
@@ -14,11 +14,13 @@ const states = [
];
const options = {
- size: [ Size.small, Size.medium, Size.large ]
+ size: [ Size.small, Size.medium, Size.large ],
+ fillMode: [FillMode.solid, FillMode.outline, FillMode.flat],
};
export type KendoToolbarAngularOptions = {
size?: (typeof options.size)[number] | null;
+ fillMode?: (typeof options.fillMode)[number] | null;
};
export type KendoToolbarAngularProps = KendoToolbarAngularOptions & {
@@ -28,7 +30,8 @@ export type KendoToolbarAngularProps = KendoToolbarAngularOptions & {
export type KendoToolbarAngularState = { [K in (typeof states)[number]]?: boolean };
const defaultOptions = {
- size: Size.medium
+ size: Size.medium,
+ fillMode: FillMode.solid
};
export const ToolbarAngular = (
@@ -38,6 +41,7 @@ export const ToolbarAngular = (
) => {
const {
size = defaultOptions.size,
+ fillMode = defaultOptions.fillMode,
focus,
resizable,
...other
@@ -166,6 +170,7 @@ export const ToolbarAngular = (
TOOLBARANGULAR_CLASSNAME,
optionClassNames(TOOLBARANGULAR_CLASSNAME, {
size,
+ fillMode
}),
stateClassNames(TOOLBARANGULAR_CLASSNAME, {
focus,
diff --git a/packages/html/src/toolbar/toolbar.spec.tsx b/packages/html/src/toolbar/toolbar.spec.tsx
index ae66e5aa6f4..9b88a9cb0e5 100644
--- a/packages/html/src/toolbar/toolbar.spec.tsx
+++ b/packages/html/src/toolbar/toolbar.spec.tsx
@@ -5,7 +5,7 @@ import { Combobox } from '../combobox';
import { DropdownList } from '../dropdownlist';
import { MenuButton } from '../menu-button';
import SplitButton from '../split-button/split-button.spec';
-import { classNames, optionClassNames, stateClassNames, States, Size } from '../misc';
+import { classNames, optionClassNames, stateClassNames, States, Size, FillMode } from '../misc';
export const TOOLBAR_CLASSNAME = `k-toolbar`;
@@ -14,11 +14,13 @@ const states = [
];
const options = {
- size: [ Size.small, Size.medium, Size.large ]
+ size: [Size.small, Size.medium, Size.large],
+ fillMode: [FillMode.solid, FillMode.outline, FillMode.flat],
};
export type KendoToolbarOptions = {
- size?: (typeof options.size)[number] | null;
+ size?: (typeof options.size)[number] | null;
+ fillMode?: (typeof options.fillMode)[number] | null;
};
export type KendoToolbarProps = KendoToolbarOptions & {
@@ -28,7 +30,8 @@ export type KendoToolbarProps = KendoToolbarOptions & {
export type KendoToolbarState = { [K in (typeof states)[number]]?: boolean };
const defaultOptions = {
- size: Size.medium
+ size: Size.medium,
+ fillMode: FillMode.solid,
};
export const Toolbar = (
@@ -38,6 +41,7 @@ export const Toolbar = (
) => {
const {
size = defaultOptions.size,
+ fillMode = defaultOptions.fillMode,
focus,
resizable,
...other
@@ -152,6 +156,7 @@ export const Toolbar = (
TOOLBAR_CLASSNAME,
optionClassNames(TOOLBAR_CLASSNAME, {
size,
+ fillMode
}),
stateClassNames(TOOLBAR_CLASSNAME, {
focus,
diff --git a/packages/material/docs/customization-pdf-viewer.md b/packages/material/docs/customization-pdf-viewer.md
index b9a5f0ab185..923465575ce 100644
--- a/packages/material/docs/customization-pdf-viewer.md
+++ b/packages/material/docs/customization-pdf-viewer.md
@@ -357,6 +357,76 @@ The following table lists the available variables for customization.
Description The text color of the PDFViewer icon.
+
+ $kendo-pdf-viewer-popup-padding-x
+ String
+ k-spacing(2)var(--kendo-spacing-2, 0.5rem)
+
+ Description The vertical padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-popup-padding-y
+ String
+ $kendo-pdf-viewer-popup-padding-xvar(--kendo-spacing-2, 0.5rem)
+
+ Description The horizontal padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-highlight-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #3f51b5)
+
+ Description The border color of the PDFViewer selected highlight annotation.
+
+ $kendo-pdf-viewer-highlight-annotation-hover-border
+ String
+ if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)var(--kendo-color-primary-hover, #3a4ba7)
+
+ Description The background color of the PDFViewer hover highlight annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #3f51b5)
+
+ Description The border color of the PDFViewer selected free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-placeholder-text
+ Color
+ rgba(124, 22, 27, 0.5)rgba(124, 22, 27, 0.5)
+
+ Description The placeholder text color of the PDFViewer free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-text
+ Color
+ rgba(124, 22, 27, 0.7)rgba(124, 22, 27, 0.7)
+
+ Description The text color of the PDFViewer free text annotation.
diff --git a/packages/material/docs/customization-toolbar.md b/packages/material/docs/customization-toolbar.md
index c80b2397177..17ce94cfbd5 100644
--- a/packages/material/docs/customization-toolbar.md
+++ b/packages/material/docs/customization-toolbar.md
@@ -219,9 +219,9 @@ The following table lists the available variables for customization.
$kendo-toolbar-border
- Null
- nullnullString
+ $kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description The color of the border around the Toolbar.
- $kendo-toolbar-separator-border
+ $kendo-toolbar-outline-text
+ Null
+ nullnull
+
+ Description The text color of the outline Toolbar.
+
+ $kendo-toolbar-outline-border
String
- $kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))currentColorcurrentColor
- Description The color of the separator border of the Toolbar.
Description The color of the border around the outline Toolbar.
- $kendo-toolbar-input-width
+ $kendo-toolbar-outline-gradient
+ Null
+ nullnull
+
+ Description The gradient of the outline Toolbar.
+
+ $kendo-toolbar-outline-shadow
+ String
+ nonenone
+
+ Description The box shadow of the outline Toolbar.
+
+ $kendo-toolbar-outline-border-width
Number
- 10em10em1px1px
- Description The width of the input in the Toolbar.
Description The width of the border around the outline Toolbar.
- $kendo-toolbar-item-shadow
+ $kendo-toolbar-flat-text
+ Null
+ nullnull
+
+ Description The text color of the flat Toolbar.
+
+ $kendo-toolbar-flat-border
+ String
+ $kendo-toolbar-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
+
+ Description The color of the border around the flat Toolbar.
+
+ $kendo-toolbar-flat-gradient
+ Null
+ nullnull
+
+ Description The gradient of the flat Toolbar.
+
+ $kendo-toolbar-flat-shadow
List
- 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12)0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12)0 2px 0 -1px $kendo-component-border0 2px 0 -1px var(--kendo-color-border, rgba(0, 0, 0, 0.12))
- Description The box shadow of the focused Toolbar item.
Description The box shadow of the flat Toolbar.
@@ -287,6 +347,36 @@ The following table lists the available variables for customization.
Description Border width of the flat Toolbar.
+
+ $kendo-toolbar-separator-border
+ String
+ inheritinherit
+
+ Description The color of the separator border of the Toolbar.
+
+ $kendo-toolbar-input-width
+ Number
+ 10em10em
+
+ Description The width of the input in the Toolbar.
+
+ $kendo-toolbar-item-shadow
+ List
+ 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12)0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12)
+
+ Description The box shadow of the focused Toolbar item.
$kendo-toolbar-sizes
Map
diff --git a/packages/material/docs/customization.md b/packages/material/docs/customization.md
index d189d03b398..70089330d65 100644
--- a/packages/material/docs/customization.md
+++ b/packages/material/docs/customization.md
@@ -16621,6 +16621,76 @@ The following table lists the available variables for customizing the Material t
Description The text color of the PDFViewer icon.
+
+ $kendo-pdf-viewer-popup-padding-x
+ String
+ k-spacing(2)var(--kendo-spacing-2, 0.5rem)
+
+ Description The vertical padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-popup-padding-y
+ String
+ $kendo-pdf-viewer-popup-padding-xvar(--kendo-spacing-2, 0.5rem)
+
+ Description The horizontal padding of the PDFViewer popup.
+
+ $kendo-pdf-viewer-highlight-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #3f51b5)
+
+ Description The border color of the PDFViewer selected highlight annotation.
+
+ $kendo-pdf-viewer-highlight-annotation-hover-border
+ String
+ if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)var(--kendo-color-primary-hover, #3a4ba7)
+
+ Description The background color of the PDFViewer hover highlight annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-border
+ String
+ if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #3f51b5)
+
+ Description The border color of the PDFViewer selected free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-placeholder-text
+ Color
+ rgba(124, 22, 27, 0.5)rgba(124, 22, 27, 0.5)
+
+ Description The placeholder text color of the PDFViewer free text annotation.
+
+ $kendo-pdf-viewer-free-text-annotation-text
+ Color
+ rgba(124, 22, 27, 0.7)rgba(124, 22, 27, 0.7)
+
+ Description The text color of the PDFViewer free text annotation.
@@ -27614,9 +27684,9 @@ The following table lists the available variables for customizing the Material t
$kendo-toolbar-border
- Null
- nullnullString
+ $kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description The color of the border around the Toolbar.
- $kendo-toolbar-separator-border
+ $kendo-toolbar-outline-text
+ Null
+ nullnull
+
+ Description The text color of the outline Toolbar.
+
+ $kendo-toolbar-outline-border
String
- $kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))currentColorcurrentColor
- Description The color of the separator border of the Toolbar.
Description The color of the border around the outline Toolbar.
- $kendo-toolbar-input-width
+ $kendo-toolbar-outline-gradient
+ Null
+ nullnull
+
+ Description The gradient of the outline Toolbar.
+
+ $kendo-toolbar-outline-shadow
+ String
+ nonenone
+
+ Description The box shadow of the outline Toolbar.
+
+ $kendo-toolbar-outline-border-width
Number
- 10em10em1px1px
- Description The width of the input in the Toolbar.
Description The width of the border around the outline Toolbar.
- $kendo-toolbar-item-shadow
+ $kendo-toolbar-flat-text
+ Null
+ nullnull
+
+ Description The text color of the flat Toolbar.
+
+ $kendo-toolbar-flat-border
+ String
+ $kendo-toolbar-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
+
+ Description The color of the border around the flat Toolbar.
+
+ $kendo-toolbar-flat-gradient
+ Null
+ nullnull
+
+ Description The gradient of the flat Toolbar.
+
+ $kendo-toolbar-flat-shadow
List
- 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12)0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12)0 2px 0 -1px $kendo-component-border0 2px 0 -1px var(--kendo-color-border, rgba(0, 0, 0, 0.12))
- Description The box shadow of the focused Toolbar item.
Description The box shadow of the flat Toolbar.
@@ -27682,6 +27812,36 @@ The following table lists the available variables for customizing the Material t
Description Border width of the flat Toolbar.
+
+ $kendo-toolbar-separator-border
+ String
+ inheritinherit
+
+ Description The color of the separator border of the Toolbar.
+
+ $kendo-toolbar-input-width
+ Number
+ 10em10em
+
+ Description The width of the input in the Toolbar.
+
+ $kendo-toolbar-item-shadow
+ List
+ 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12)0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12)
+
+ Description The box shadow of the focused Toolbar item.
$kendo-toolbar-sizes
Map
diff --git a/packages/material/scss/pdf-viewer/_variables.scss b/packages/material/scss/pdf-viewer/_variables.scss
index 633e58dd9fc..7df5ea6ee0e 100644
--- a/packages/material/scss/pdf-viewer/_variables.scss
+++ b/packages/material/scss/pdf-viewer/_variables.scss
@@ -108,3 +108,26 @@ $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
/// The text color of the PDFViewer icon.
/// @group pdf-viewer
$kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;
+
+/// The vertical padding of the PDFViewer popup.
+/// @group pdf-viewer
+$kendo-pdf-viewer-popup-padding-x: k-spacing(2) !default;
+/// The horizontal padding of the PDFViewer popup.
+/// @group pdf-viewer
+$kendo-pdf-viewer-popup-padding-y: $kendo-pdf-viewer-popup-padding-x !default;
+
+/// The border color of the PDFViewer selected highlight annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-highlight-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
+/// The background color of the PDFViewer hover highlight annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-highlight-annotation-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
+/// The border color of the PDFViewer selected free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
+/// The placeholder text color of the PDFViewer free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-placeholder-text: rgba(124, 22, 27, 0.5) !default;
+/// The text color of the PDFViewer free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.7) !default;
diff --git a/packages/material/scss/toolbar/_layout.scss b/packages/material/scss/toolbar/_layout.scss
index 0e98e612927..8c5fa9aa328 100644
--- a/packages/material/scss/toolbar/_layout.scss
+++ b/packages/material/scss/toolbar/_layout.scss
@@ -23,6 +23,10 @@
.k-split-button {
@include box-shadow( none );
}
+
+ &.k-toolbar-outline {
+ @include box-shadow( none );
+ }
}
// Overflow container
diff --git a/packages/material/scss/toolbar/_variables.scss b/packages/material/scss/toolbar/_variables.scss
index 3a5c027ca12..f4a6f5c06dc 100644
--- a/packages/material/scss/toolbar/_variables.scss
+++ b/packages/material/scss/toolbar/_variables.scss
@@ -64,7 +64,7 @@ $kendo-toolbar-bg: $kendo-component-bg !default;
$kendo-toolbar-text: $kendo-component-text !default;
/// The color of the border around the Toolbar.
/// @group toolbar
-$kendo-toolbar-border: null !default;
+$kendo-toolbar-border: $kendo-component-border !default;
/// The gradient of the Toolbar.
/// @group toolbar
$kendo-toolbar-gradient: null !default;
@@ -72,9 +72,41 @@ $kendo-toolbar-gradient: null !default;
/// @group toolbar
$kendo-toolbar-shadow: $box-shadow-depth-4 !default;
+/// The text color of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-text: null !default;
+/// The color of the border around the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-border: currentColor !default;
+/// The gradient of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-gradient: null !default;
+/// The box shadow of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-shadow: none !default;
+/// The width of the border around the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-border-width: 1px !default;
+
+/// The text color of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-text: null !default;
+/// The color of the border around the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-border: $kendo-toolbar-border !default;
+/// The gradient of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-gradient: null !default;
+/// The box shadow of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-shadow: 0 2px 0 -1px $kendo-component-border !default;
+/// Border width of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-border-width: 1px !default;
+
/// The color of the separator border of the Toolbar.
/// @group toolbar
-$kendo-toolbar-separator-border: $kendo-component-border !default;
+$kendo-toolbar-separator-border: inherit !default;
/// The width of the input in the Toolbar.
/// @group toolbar
@@ -84,10 +116,6 @@ $kendo-toolbar-input-width: 10em !default;
/// @group toolbar
$kendo-toolbar-item-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12) !default;
-/// Border width of the flat Toolbar.
-/// @group toolbar
-$kendo-toolbar-flat-border-width: 1px !default;
-
/// The sizes map for the Toolbar.
/// @group toolbar
$kendo-toolbar-sizes: (
diff --git a/tests/_output/bootstrap/pdf-viewer/pdf-viewer-annotations.png b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-annotations.png
new file mode 100644
index 00000000000..95c50d5ab80
Binary files /dev/null and b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-annotations.png differ
diff --git a/tests/_output/bootstrap/pdf-viewer/pdf-viewer-blank-page.png b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-blank-page.png
index 9fec92b2f61..6219b9b11ca 100644
Binary files a/tests/_output/bootstrap/pdf-viewer/pdf-viewer-blank-page.png and b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-blank-page.png differ
diff --git a/tests/_output/bootstrap/pdf-viewer/pdf-viewer-dialogs.png b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-dialogs.png
new file mode 100644
index 00000000000..62ca901085c
Binary files /dev/null and b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-dialogs.png differ
diff --git a/tests/_output/bootstrap/pdf-viewer/pdf-viewer-free-text-annotation.png b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-free-text-annotation.png
new file mode 100644
index 00000000000..20989de4bd8
Binary files /dev/null and b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-free-text-annotation.png differ
diff --git a/tests/_output/bootstrap/pdf-viewer/pdf-viewer-highlight-annotation.png b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-highlight-annotation.png
new file mode 100644
index 00000000000..4a577a1f061
Binary files /dev/null and b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-highlight-annotation.png differ
diff --git a/tests/_output/bootstrap/pdf-viewer/pdf-viewer-old-toolbar.png b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-old-toolbar.png
new file mode 100644
index 00000000000..b33c8fe89b1
Binary files /dev/null and b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-old-toolbar.png differ
diff --git a/tests/_output/bootstrap/pdf-viewer/pdf-viewer-popup-editors.png b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-popup-editors.png
new file mode 100644
index 00000000000..f4a6979431d
Binary files /dev/null and b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-popup-editors.png differ
diff --git a/tests/_output/bootstrap/pdf-viewer/pdf-viewer-popups.png b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-popups.png
new file mode 100644
index 00000000000..fbe69b09d7c
Binary files /dev/null and b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-popups.png differ
diff --git a/tests/_output/bootstrap/pdf-viewer/pdf-viewer-search-panel.png b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-search-panel.png
index 6fe03b77b10..904fa9a9cc8 100644
Binary files a/tests/_output/bootstrap/pdf-viewer/pdf-viewer-search-panel.png and b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-search-panel.png differ
diff --git a/tests/_output/bootstrap/pdf-viewer/pdf-viewer.png b/tests/_output/bootstrap/pdf-viewer/pdf-viewer.png
index b33c8fe89b1..e25228e8a52 100644
Binary files a/tests/_output/bootstrap/pdf-viewer/pdf-viewer.png and b/tests/_output/bootstrap/pdf-viewer/pdf-viewer.png differ
diff --git a/tests/_output/bootstrap/prompt/prompt-more-actions.png b/tests/_output/bootstrap/prompt/prompt-more-actions.png
index e6a34eb92a3..81cc5356955 100644
Binary files a/tests/_output/bootstrap/prompt/prompt-more-actions.png and b/tests/_output/bootstrap/prompt/prompt-more-actions.png differ
diff --git a/tests/_output/bootstrap/prompt/prompt-normal.png b/tests/_output/bootstrap/prompt/prompt-normal.png
index e78965c6f9f..f73afe66233 100644
Binary files a/tests/_output/bootstrap/prompt/prompt-normal.png and b/tests/_output/bootstrap/prompt/prompt-normal.png differ
diff --git a/tests/_output/bootstrap/prompt/prompt-output.png b/tests/_output/bootstrap/prompt/prompt-output.png
index fbac71f89ba..572b9f3e287 100644
Binary files a/tests/_output/bootstrap/prompt/prompt-output.png and b/tests/_output/bootstrap/prompt/prompt-output.png differ
diff --git a/tests/_output/bootstrap/spreadsheet/spreadsheet-cell-contextmenu.png b/tests/_output/bootstrap/spreadsheet/spreadsheet-cell-contextmenu.png
index 594f63c5c40..6247a0e79af 100644
Binary files a/tests/_output/bootstrap/spreadsheet/spreadsheet-cell-contextmenu.png and b/tests/_output/bootstrap/spreadsheet/spreadsheet-cell-contextmenu.png differ
diff --git a/tests/_output/bootstrap/spreadsheet/spreadsheet-filtering.png b/tests/_output/bootstrap/spreadsheet/spreadsheet-filtering.png
index 860534fcd93..2c25c3824ef 100644
Binary files a/tests/_output/bootstrap/spreadsheet/spreadsheet-filtering.png and b/tests/_output/bootstrap/spreadsheet/spreadsheet-filtering.png differ
diff --git a/tests/_output/bootstrap/spreadsheet/spreadsheet-formula.png b/tests/_output/bootstrap/spreadsheet/spreadsheet-formula.png
index 9d066a55a46..f5b7c4d25f2 100644
Binary files a/tests/_output/bootstrap/spreadsheet/spreadsheet-formula.png and b/tests/_output/bootstrap/spreadsheet/spreadsheet-formula.png differ
diff --git a/tests/_output/bootstrap/spreadsheet/spreadsheet-jquery.png b/tests/_output/bootstrap/spreadsheet/spreadsheet-jquery.png
index e5b47855f1f..a1181784e5b 100644
Binary files a/tests/_output/bootstrap/spreadsheet/spreadsheet-jquery.png and b/tests/_output/bootstrap/spreadsheet/spreadsheet-jquery.png differ
diff --git a/tests/_output/bootstrap/spreadsheet/spreadsheet-row-contextmenu.png b/tests/_output/bootstrap/spreadsheet/spreadsheet-row-contextmenu.png
index 1e76fdf9b7e..4a62d753def 100644
Binary files a/tests/_output/bootstrap/spreadsheet/spreadsheet-row-contextmenu.png and b/tests/_output/bootstrap/spreadsheet/spreadsheet-row-contextmenu.png differ
diff --git a/tests/_output/bootstrap/spreadsheet/spreadsheet-tools.png b/tests/_output/bootstrap/spreadsheet/spreadsheet-tools.png
index a5c0a574809..c53328a05bf 100644
Binary files a/tests/_output/bootstrap/spreadsheet/spreadsheet-tools.png and b/tests/_output/bootstrap/spreadsheet/spreadsheet-tools.png differ
diff --git a/tests/_output/bootstrap/spreadsheet/spreadsheet.png b/tests/_output/bootstrap/spreadsheet/spreadsheet.png
index 344e88d924f..844114b0d14 100644
Binary files a/tests/_output/bootstrap/spreadsheet/spreadsheet.png and b/tests/_output/bootstrap/spreadsheet/spreadsheet.png differ
diff --git a/tests/_output/bootstrap/toolbar/toolbar-fill-modes.png b/tests/_output/bootstrap/toolbar/toolbar-fill-modes.png
new file mode 100644
index 00000000000..7d5ba052352
Binary files /dev/null and b/tests/_output/bootstrap/toolbar/toolbar-fill-modes.png differ
diff --git a/tests/_output/classic/pdf-viewer/pdf-viewer-annotations.png b/tests/_output/classic/pdf-viewer/pdf-viewer-annotations.png
new file mode 100644
index 00000000000..e4cdaf0de40
Binary files /dev/null and b/tests/_output/classic/pdf-viewer/pdf-viewer-annotations.png differ
diff --git a/tests/_output/classic/pdf-viewer/pdf-viewer-blank-page.png b/tests/_output/classic/pdf-viewer/pdf-viewer-blank-page.png
index 04440ccd559..d82ac31b716 100644
Binary files a/tests/_output/classic/pdf-viewer/pdf-viewer-blank-page.png and b/tests/_output/classic/pdf-viewer/pdf-viewer-blank-page.png differ
diff --git a/tests/_output/classic/pdf-viewer/pdf-viewer-dialogs.png b/tests/_output/classic/pdf-viewer/pdf-viewer-dialogs.png
new file mode 100644
index 00000000000..7b787bf2ecb
Binary files /dev/null and b/tests/_output/classic/pdf-viewer/pdf-viewer-dialogs.png differ
diff --git a/tests/_output/classic/pdf-viewer/pdf-viewer-free-text-annotation.png b/tests/_output/classic/pdf-viewer/pdf-viewer-free-text-annotation.png
new file mode 100644
index 00000000000..412ec2908d7
Binary files /dev/null and b/tests/_output/classic/pdf-viewer/pdf-viewer-free-text-annotation.png differ
diff --git a/tests/_output/classic/pdf-viewer/pdf-viewer-highlight-annotation.png b/tests/_output/classic/pdf-viewer/pdf-viewer-highlight-annotation.png
new file mode 100644
index 00000000000..b09ff9353de
Binary files /dev/null and b/tests/_output/classic/pdf-viewer/pdf-viewer-highlight-annotation.png differ
diff --git a/tests/_output/classic/pdf-viewer/pdf-viewer-old-toolbar.png b/tests/_output/classic/pdf-viewer/pdf-viewer-old-toolbar.png
new file mode 100644
index 00000000000..e7fcdbad211
Binary files /dev/null and b/tests/_output/classic/pdf-viewer/pdf-viewer-old-toolbar.png differ
diff --git a/tests/_output/classic/pdf-viewer/pdf-viewer-popup-editors.png b/tests/_output/classic/pdf-viewer/pdf-viewer-popup-editors.png
new file mode 100644
index 00000000000..3178e805cf0
Binary files /dev/null and b/tests/_output/classic/pdf-viewer/pdf-viewer-popup-editors.png differ
diff --git a/tests/_output/classic/pdf-viewer/pdf-viewer-popups.png b/tests/_output/classic/pdf-viewer/pdf-viewer-popups.png
new file mode 100644
index 00000000000..81624799c34
Binary files /dev/null and b/tests/_output/classic/pdf-viewer/pdf-viewer-popups.png differ
diff --git a/tests/_output/classic/pdf-viewer/pdf-viewer-search-panel.png b/tests/_output/classic/pdf-viewer/pdf-viewer-search-panel.png
index f7fa985e7e1..bad34419cc7 100644
Binary files a/tests/_output/classic/pdf-viewer/pdf-viewer-search-panel.png and b/tests/_output/classic/pdf-viewer/pdf-viewer-search-panel.png differ
diff --git a/tests/_output/classic/pdf-viewer/pdf-viewer.png b/tests/_output/classic/pdf-viewer/pdf-viewer.png
index e7fcdbad211..1b842290448 100644
Binary files a/tests/_output/classic/pdf-viewer/pdf-viewer.png and b/tests/_output/classic/pdf-viewer/pdf-viewer.png differ
diff --git a/tests/_output/classic/prompt/prompt-more-actions.png b/tests/_output/classic/prompt/prompt-more-actions.png
index 23ed597c2ec..7ddf5866364 100644
Binary files a/tests/_output/classic/prompt/prompt-more-actions.png and b/tests/_output/classic/prompt/prompt-more-actions.png differ
diff --git a/tests/_output/classic/prompt/prompt-normal.png b/tests/_output/classic/prompt/prompt-normal.png
index 58883fd9e23..1b795fa1583 100644
Binary files a/tests/_output/classic/prompt/prompt-normal.png and b/tests/_output/classic/prompt/prompt-normal.png differ
diff --git a/tests/_output/classic/prompt/prompt-output.png b/tests/_output/classic/prompt/prompt-output.png
index 74368fe2338..d538022d30b 100644
Binary files a/tests/_output/classic/prompt/prompt-output.png and b/tests/_output/classic/prompt/prompt-output.png differ
diff --git a/tests/_output/classic/spreadsheet/spreadsheet-cell-contextmenu.png b/tests/_output/classic/spreadsheet/spreadsheet-cell-contextmenu.png
index ab57ffd4c55..221d41a6641 100644
Binary files a/tests/_output/classic/spreadsheet/spreadsheet-cell-contextmenu.png and b/tests/_output/classic/spreadsheet/spreadsheet-cell-contextmenu.png differ
diff --git a/tests/_output/classic/spreadsheet/spreadsheet-filtering.png b/tests/_output/classic/spreadsheet/spreadsheet-filtering.png
index c6224caddae..ac4013a0fb2 100644
Binary files a/tests/_output/classic/spreadsheet/spreadsheet-filtering.png and b/tests/_output/classic/spreadsheet/spreadsheet-filtering.png differ
diff --git a/tests/_output/classic/spreadsheet/spreadsheet-formula.png b/tests/_output/classic/spreadsheet/spreadsheet-formula.png
index 328de3a6dc3..c85c62f9af8 100644
Binary files a/tests/_output/classic/spreadsheet/spreadsheet-formula.png and b/tests/_output/classic/spreadsheet/spreadsheet-formula.png differ
diff --git a/tests/_output/classic/spreadsheet/spreadsheet-jquery.png b/tests/_output/classic/spreadsheet/spreadsheet-jquery.png
index 9b982ccb46b..c1aed98c948 100644
Binary files a/tests/_output/classic/spreadsheet/spreadsheet-jquery.png and b/tests/_output/classic/spreadsheet/spreadsheet-jquery.png differ
diff --git a/tests/_output/classic/spreadsheet/spreadsheet-row-contextmenu.png b/tests/_output/classic/spreadsheet/spreadsheet-row-contextmenu.png
index 62065409c04..05c00fef845 100644
Binary files a/tests/_output/classic/spreadsheet/spreadsheet-row-contextmenu.png and b/tests/_output/classic/spreadsheet/spreadsheet-row-contextmenu.png differ
diff --git a/tests/_output/classic/spreadsheet/spreadsheet-tools.png b/tests/_output/classic/spreadsheet/spreadsheet-tools.png
index 62b7b742d70..c1c756755b0 100644
Binary files a/tests/_output/classic/spreadsheet/spreadsheet-tools.png and b/tests/_output/classic/spreadsheet/spreadsheet-tools.png differ
diff --git a/tests/_output/classic/spreadsheet/spreadsheet.png b/tests/_output/classic/spreadsheet/spreadsheet.png
index 1fe6534d93c..7dc2eaf27e5 100644
Binary files a/tests/_output/classic/spreadsheet/spreadsheet.png and b/tests/_output/classic/spreadsheet/spreadsheet.png differ
diff --git a/tests/_output/classic/toolbar/toolbar-fill-modes.png b/tests/_output/classic/toolbar/toolbar-fill-modes.png
new file mode 100644
index 00000000000..6c5e326caff
Binary files /dev/null and b/tests/_output/classic/toolbar/toolbar-fill-modes.png differ
diff --git a/tests/_output/default/pdf-viewer/pdf-viewer-annotations.png b/tests/_output/default/pdf-viewer/pdf-viewer-annotations.png
new file mode 100644
index 00000000000..5823b636b25
Binary files /dev/null and b/tests/_output/default/pdf-viewer/pdf-viewer-annotations.png differ
diff --git a/tests/_output/default/pdf-viewer/pdf-viewer-blank-page.png b/tests/_output/default/pdf-viewer/pdf-viewer-blank-page.png
index b335d621b2a..371125f4485 100644
Binary files a/tests/_output/default/pdf-viewer/pdf-viewer-blank-page.png and b/tests/_output/default/pdf-viewer/pdf-viewer-blank-page.png differ
diff --git a/tests/_output/default/pdf-viewer/pdf-viewer-dialogs.png b/tests/_output/default/pdf-viewer/pdf-viewer-dialogs.png
new file mode 100644
index 00000000000..e244113b38f
Binary files /dev/null and b/tests/_output/default/pdf-viewer/pdf-viewer-dialogs.png differ
diff --git a/tests/_output/default/pdf-viewer/pdf-viewer-free-text-annotation.png b/tests/_output/default/pdf-viewer/pdf-viewer-free-text-annotation.png
new file mode 100644
index 00000000000..bd9c39b5ad9
Binary files /dev/null and b/tests/_output/default/pdf-viewer/pdf-viewer-free-text-annotation.png differ
diff --git a/tests/_output/default/pdf-viewer/pdf-viewer-highlight-annotation.png b/tests/_output/default/pdf-viewer/pdf-viewer-highlight-annotation.png
new file mode 100644
index 00000000000..3be7f868726
Binary files /dev/null and b/tests/_output/default/pdf-viewer/pdf-viewer-highlight-annotation.png differ
diff --git a/tests/_output/default/pdf-viewer/pdf-viewer-old-toolbar.png b/tests/_output/default/pdf-viewer/pdf-viewer-old-toolbar.png
new file mode 100644
index 00000000000..9f80805be74
Binary files /dev/null and b/tests/_output/default/pdf-viewer/pdf-viewer-old-toolbar.png differ
diff --git a/tests/_output/default/pdf-viewer/pdf-viewer-popup-editors.png b/tests/_output/default/pdf-viewer/pdf-viewer-popup-editors.png
new file mode 100644
index 00000000000..c433616ef04
Binary files /dev/null and b/tests/_output/default/pdf-viewer/pdf-viewer-popup-editors.png differ
diff --git a/tests/_output/default/pdf-viewer/pdf-viewer-popups.png b/tests/_output/default/pdf-viewer/pdf-viewer-popups.png
new file mode 100644
index 00000000000..8de08f7441b
Binary files /dev/null and b/tests/_output/default/pdf-viewer/pdf-viewer-popups.png differ
diff --git a/tests/_output/default/pdf-viewer/pdf-viewer-search-panel.png b/tests/_output/default/pdf-viewer/pdf-viewer-search-panel.png
index f79d43463e5..a2106aaa2cc 100644
Binary files a/tests/_output/default/pdf-viewer/pdf-viewer-search-panel.png and b/tests/_output/default/pdf-viewer/pdf-viewer-search-panel.png differ
diff --git a/tests/_output/default/pdf-viewer/pdf-viewer.png b/tests/_output/default/pdf-viewer/pdf-viewer.png
index 9f80805be74..d24693ec212 100644
Binary files a/tests/_output/default/pdf-viewer/pdf-viewer.png and b/tests/_output/default/pdf-viewer/pdf-viewer.png differ
diff --git a/tests/_output/default/prompt/prompt-more-actions.png b/tests/_output/default/prompt/prompt-more-actions.png
index eb7cbd0cd30..99fcc240654 100644
Binary files a/tests/_output/default/prompt/prompt-more-actions.png and b/tests/_output/default/prompt/prompt-more-actions.png differ
diff --git a/tests/_output/default/prompt/prompt-normal.png b/tests/_output/default/prompt/prompt-normal.png
index eed969633bd..301a4320bc5 100644
Binary files a/tests/_output/default/prompt/prompt-normal.png and b/tests/_output/default/prompt/prompt-normal.png differ
diff --git a/tests/_output/default/prompt/prompt-output.png b/tests/_output/default/prompt/prompt-output.png
index fe0a318e03a..ca5124e3454 100644
Binary files a/tests/_output/default/prompt/prompt-output.png and b/tests/_output/default/prompt/prompt-output.png differ
diff --git a/tests/_output/default/spreadsheet/spreadsheet-cell-contextmenu.png b/tests/_output/default/spreadsheet/spreadsheet-cell-contextmenu.png
index e0f87d2bc47..3bfef91e59d 100644
Binary files a/tests/_output/default/spreadsheet/spreadsheet-cell-contextmenu.png and b/tests/_output/default/spreadsheet/spreadsheet-cell-contextmenu.png differ
diff --git a/tests/_output/default/spreadsheet/spreadsheet-filtering.png b/tests/_output/default/spreadsheet/spreadsheet-filtering.png
index 7bab17f8ae1..ee965cd68a2 100644
Binary files a/tests/_output/default/spreadsheet/spreadsheet-filtering.png and b/tests/_output/default/spreadsheet/spreadsheet-filtering.png differ
diff --git a/tests/_output/default/spreadsheet/spreadsheet-formula.png b/tests/_output/default/spreadsheet/spreadsheet-formula.png
index e90a5373ec8..3c33b4a6d72 100644
Binary files a/tests/_output/default/spreadsheet/spreadsheet-formula.png and b/tests/_output/default/spreadsheet/spreadsheet-formula.png differ
diff --git a/tests/_output/default/spreadsheet/spreadsheet-jquery.png b/tests/_output/default/spreadsheet/spreadsheet-jquery.png
index f1677950b2e..96108c80251 100644
Binary files a/tests/_output/default/spreadsheet/spreadsheet-jquery.png and b/tests/_output/default/spreadsheet/spreadsheet-jquery.png differ
diff --git a/tests/_output/default/spreadsheet/spreadsheet-row-contextmenu.png b/tests/_output/default/spreadsheet/spreadsheet-row-contextmenu.png
index a3520f30c5f..c8c79674b10 100644
Binary files a/tests/_output/default/spreadsheet/spreadsheet-row-contextmenu.png and b/tests/_output/default/spreadsheet/spreadsheet-row-contextmenu.png differ
diff --git a/tests/_output/default/spreadsheet/spreadsheet-tools.png b/tests/_output/default/spreadsheet/spreadsheet-tools.png
index 487d819d659..83f437d40cb 100644
Binary files a/tests/_output/default/spreadsheet/spreadsheet-tools.png and b/tests/_output/default/spreadsheet/spreadsheet-tools.png differ
diff --git a/tests/_output/default/spreadsheet/spreadsheet.png b/tests/_output/default/spreadsheet/spreadsheet.png
index a3cd574b70c..22c9cfeb532 100644
Binary files a/tests/_output/default/spreadsheet/spreadsheet.png and b/tests/_output/default/spreadsheet/spreadsheet.png differ
diff --git a/tests/_output/default/toolbar/toolbar-fill-modes.png b/tests/_output/default/toolbar/toolbar-fill-modes.png
new file mode 100644
index 00000000000..f31d50baaeb
Binary files /dev/null and b/tests/_output/default/toolbar/toolbar-fill-modes.png differ
diff --git a/tests/_output/fluent/dock-manager/dock-manager.png b/tests/_output/fluent/dock-manager/dock-manager.png
index 2e160838bf1..97894221c25 100644
Binary files a/tests/_output/fluent/dock-manager/dock-manager.png and b/tests/_output/fluent/dock-manager/dock-manager.png differ
diff --git a/tests/_output/fluent/imageeditor/imageeditor-crop-pane.png b/tests/_output/fluent/imageeditor/imageeditor-crop-pane.png
index 20c25c2285e..5fd58c6906d 100644
Binary files a/tests/_output/fluent/imageeditor/imageeditor-crop-pane.png and b/tests/_output/fluent/imageeditor/imageeditor-crop-pane.png differ
diff --git a/tests/_output/fluent/imageeditor/imageeditor-resize-pane.png b/tests/_output/fluent/imageeditor/imageeditor-resize-pane.png
index 534ceb6e88b..518e35c5cbe 100644
Binary files a/tests/_output/fluent/imageeditor/imageeditor-resize-pane.png and b/tests/_output/fluent/imageeditor/imageeditor-resize-pane.png differ
diff --git a/tests/_output/fluent/imageeditor/imageeditor.png b/tests/_output/fluent/imageeditor/imageeditor.png
index b37def36f09..37ca07b76fa 100644
Binary files a/tests/_output/fluent/imageeditor/imageeditor.png and b/tests/_output/fluent/imageeditor/imageeditor.png differ
diff --git a/tests/_output/fluent/pdf-viewer/pdf-viewer-annotations.png b/tests/_output/fluent/pdf-viewer/pdf-viewer-annotations.png
new file mode 100644
index 00000000000..776fc9482e9
Binary files /dev/null and b/tests/_output/fluent/pdf-viewer/pdf-viewer-annotations.png differ
diff --git a/tests/_output/fluent/pdf-viewer/pdf-viewer-blank-page.png b/tests/_output/fluent/pdf-viewer/pdf-viewer-blank-page.png
index 394ee7a63d2..a6d4b4df9cc 100644
Binary files a/tests/_output/fluent/pdf-viewer/pdf-viewer-blank-page.png and b/tests/_output/fluent/pdf-viewer/pdf-viewer-blank-page.png differ
diff --git a/tests/_output/fluent/pdf-viewer/pdf-viewer-dialogs.png b/tests/_output/fluent/pdf-viewer/pdf-viewer-dialogs.png
new file mode 100644
index 00000000000..a70afc5b050
Binary files /dev/null and b/tests/_output/fluent/pdf-viewer/pdf-viewer-dialogs.png differ
diff --git a/tests/_output/fluent/pdf-viewer/pdf-viewer-free-text-annotation.png b/tests/_output/fluent/pdf-viewer/pdf-viewer-free-text-annotation.png
new file mode 100644
index 00000000000..7a999bb87d8
Binary files /dev/null and b/tests/_output/fluent/pdf-viewer/pdf-viewer-free-text-annotation.png differ
diff --git a/tests/_output/fluent/pdf-viewer/pdf-viewer-highlight-annotation.png b/tests/_output/fluent/pdf-viewer/pdf-viewer-highlight-annotation.png
new file mode 100644
index 00000000000..bf4827b3bba
Binary files /dev/null and b/tests/_output/fluent/pdf-viewer/pdf-viewer-highlight-annotation.png differ
diff --git a/tests/_output/fluent/pdf-viewer/pdf-viewer-old-toolbar.png b/tests/_output/fluent/pdf-viewer/pdf-viewer-old-toolbar.png
new file mode 100644
index 00000000000..9ceabd7a737
Binary files /dev/null and b/tests/_output/fluent/pdf-viewer/pdf-viewer-old-toolbar.png differ
diff --git a/tests/_output/fluent/pdf-viewer/pdf-viewer-popup-editors.png b/tests/_output/fluent/pdf-viewer/pdf-viewer-popup-editors.png
new file mode 100644
index 00000000000..36953c4d0dc
Binary files /dev/null and b/tests/_output/fluent/pdf-viewer/pdf-viewer-popup-editors.png differ
diff --git a/tests/_output/fluent/pdf-viewer/pdf-viewer-popups.png b/tests/_output/fluent/pdf-viewer/pdf-viewer-popups.png
new file mode 100644
index 00000000000..1efda1d9d81
Binary files /dev/null and b/tests/_output/fluent/pdf-viewer/pdf-viewer-popups.png differ
diff --git a/tests/_output/fluent/pdf-viewer/pdf-viewer-search-panel.png b/tests/_output/fluent/pdf-viewer/pdf-viewer-search-panel.png
index ff7c0a23707..786e70fdbdb 100644
Binary files a/tests/_output/fluent/pdf-viewer/pdf-viewer-search-panel.png and b/tests/_output/fluent/pdf-viewer/pdf-viewer-search-panel.png differ
diff --git a/tests/_output/fluent/pdf-viewer/pdf-viewer.png b/tests/_output/fluent/pdf-viewer/pdf-viewer.png
index 9ceabd7a737..c9122b0aac6 100644
Binary files a/tests/_output/fluent/pdf-viewer/pdf-viewer.png and b/tests/_output/fluent/pdf-viewer/pdf-viewer.png differ
diff --git a/tests/_output/fluent/prompt/prompt-more-actions.png b/tests/_output/fluent/prompt/prompt-more-actions.png
index 6720edba1d6..129fab52411 100644
Binary files a/tests/_output/fluent/prompt/prompt-more-actions.png and b/tests/_output/fluent/prompt/prompt-more-actions.png differ
diff --git a/tests/_output/fluent/prompt/prompt-normal.png b/tests/_output/fluent/prompt/prompt-normal.png
index d0b27742bdd..b27da9584f9 100644
Binary files a/tests/_output/fluent/prompt/prompt-normal.png and b/tests/_output/fluent/prompt/prompt-normal.png differ
diff --git a/tests/_output/fluent/prompt/prompt-output.png b/tests/_output/fluent/prompt/prompt-output.png
index 65f5b0b9544..38b2a79650a 100644
Binary files a/tests/_output/fluent/prompt/prompt-output.png and b/tests/_output/fluent/prompt/prompt-output.png differ
diff --git a/tests/_output/fluent/spreadsheet/spreadsheet-borders-config.png b/tests/_output/fluent/spreadsheet/spreadsheet-borders-config.png
index d01304704f1..049d31b51e0 100644
Binary files a/tests/_output/fluent/spreadsheet/spreadsheet-borders-config.png and b/tests/_output/fluent/spreadsheet/spreadsheet-borders-config.png differ
diff --git a/tests/_output/fluent/spreadsheet/spreadsheet-cell-contextmenu.png b/tests/_output/fluent/spreadsheet/spreadsheet-cell-contextmenu.png
index 4e3bc7faa8d..461d3f3f138 100644
Binary files a/tests/_output/fluent/spreadsheet/spreadsheet-cell-contextmenu.png and b/tests/_output/fluent/spreadsheet/spreadsheet-cell-contextmenu.png differ
diff --git a/tests/_output/fluent/spreadsheet/spreadsheet-filtering.png b/tests/_output/fluent/spreadsheet/spreadsheet-filtering.png
index 61da8d903cc..7ec80ed126a 100644
Binary files a/tests/_output/fluent/spreadsheet/spreadsheet-filtering.png and b/tests/_output/fluent/spreadsheet/spreadsheet-filtering.png differ
diff --git a/tests/_output/fluent/spreadsheet/spreadsheet-formula.png b/tests/_output/fluent/spreadsheet/spreadsheet-formula.png
index 62cbc2661d7..f0b9ef8bbf2 100644
Binary files a/tests/_output/fluent/spreadsheet/spreadsheet-formula.png and b/tests/_output/fluent/spreadsheet/spreadsheet-formula.png differ
diff --git a/tests/_output/fluent/spreadsheet/spreadsheet-jquery.png b/tests/_output/fluent/spreadsheet/spreadsheet-jquery.png
index 6ae4caebee2..ef0479a91ee 100644
Binary files a/tests/_output/fluent/spreadsheet/spreadsheet-jquery.png and b/tests/_output/fluent/spreadsheet/spreadsheet-jquery.png differ
diff --git a/tests/_output/fluent/spreadsheet/spreadsheet-row-contextmenu.png b/tests/_output/fluent/spreadsheet/spreadsheet-row-contextmenu.png
index 6c44c4a9bbd..fe6ff1ad270 100644
Binary files a/tests/_output/fluent/spreadsheet/spreadsheet-row-contextmenu.png and b/tests/_output/fluent/spreadsheet/spreadsheet-row-contextmenu.png differ
diff --git a/tests/_output/fluent/spreadsheet/spreadsheet-tools.png b/tests/_output/fluent/spreadsheet/spreadsheet-tools.png
index cae30b35434..7c4c31271c3 100644
Binary files a/tests/_output/fluent/spreadsheet/spreadsheet-tools.png and b/tests/_output/fluent/spreadsheet/spreadsheet-tools.png differ
diff --git a/tests/_output/fluent/spreadsheet/spreadsheet.png b/tests/_output/fluent/spreadsheet/spreadsheet.png
index e25a4843121..76b86dca2b3 100644
Binary files a/tests/_output/fluent/spreadsheet/spreadsheet.png and b/tests/_output/fluent/spreadsheet/spreadsheet.png differ
diff --git a/tests/_output/fluent/toolbar/toolbar-angular.png b/tests/_output/fluent/toolbar/toolbar-angular.png
index 62ee53ff25c..10298f34ab1 100644
Binary files a/tests/_output/fluent/toolbar/toolbar-angular.png and b/tests/_output/fluent/toolbar/toolbar-angular.png differ
diff --git a/tests/_output/fluent/toolbar/toolbar-fill-modes.png b/tests/_output/fluent/toolbar/toolbar-fill-modes.png
new file mode 100644
index 00000000000..51b40e71216
Binary files /dev/null and b/tests/_output/fluent/toolbar/toolbar-fill-modes.png differ
diff --git a/tests/_output/fluent/toolbar/toolbar-sizes.png b/tests/_output/fluent/toolbar/toolbar-sizes.png
index 46a4065dc34..b3d8e614aaf 100644
Binary files a/tests/_output/fluent/toolbar/toolbar-sizes.png and b/tests/_output/fluent/toolbar/toolbar-sizes.png differ
diff --git a/tests/_output/fluent/toolbar/toolbar.png b/tests/_output/fluent/toolbar/toolbar.png
index c7b3e7e5cc4..8b7ab3a1e84 100644
Binary files a/tests/_output/fluent/toolbar/toolbar.png and b/tests/_output/fluent/toolbar/toolbar.png differ
diff --git a/tests/_output/material/chat/chat-rtl.png b/tests/_output/material/chat/chat-rtl.png
index 24b375a8e12..669ed626bc4 100644
Binary files a/tests/_output/material/chat/chat-rtl.png and b/tests/_output/material/chat/chat-rtl.png differ
diff --git a/tests/_output/material/chat/chat.png b/tests/_output/material/chat/chat.png
index ed0d5c1780d..4e4bf311d5c 100644
Binary files a/tests/_output/material/chat/chat.png and b/tests/_output/material/chat/chat.png differ
diff --git a/tests/_output/material/pdf-viewer/pdf-viewer-annotations.png b/tests/_output/material/pdf-viewer/pdf-viewer-annotations.png
new file mode 100644
index 00000000000..0e4d063836d
Binary files /dev/null and b/tests/_output/material/pdf-viewer/pdf-viewer-annotations.png differ
diff --git a/tests/_output/material/pdf-viewer/pdf-viewer-blank-page.png b/tests/_output/material/pdf-viewer/pdf-viewer-blank-page.png
index a7416072a3c..4248cc90954 100644
Binary files a/tests/_output/material/pdf-viewer/pdf-viewer-blank-page.png and b/tests/_output/material/pdf-viewer/pdf-viewer-blank-page.png differ
diff --git a/tests/_output/material/pdf-viewer/pdf-viewer-dialogs.png b/tests/_output/material/pdf-viewer/pdf-viewer-dialogs.png
new file mode 100644
index 00000000000..d241864571f
Binary files /dev/null and b/tests/_output/material/pdf-viewer/pdf-viewer-dialogs.png differ
diff --git a/tests/_output/material/pdf-viewer/pdf-viewer-free-text-annotation.png b/tests/_output/material/pdf-viewer/pdf-viewer-free-text-annotation.png
new file mode 100644
index 00000000000..aefc0cf1d66
Binary files /dev/null and b/tests/_output/material/pdf-viewer/pdf-viewer-free-text-annotation.png differ
diff --git a/tests/_output/material/pdf-viewer/pdf-viewer-highlight-annotation.png b/tests/_output/material/pdf-viewer/pdf-viewer-highlight-annotation.png
new file mode 100644
index 00000000000..1c6b0cc3e87
Binary files /dev/null and b/tests/_output/material/pdf-viewer/pdf-viewer-highlight-annotation.png differ
diff --git a/tests/_output/material/pdf-viewer/pdf-viewer-old-toolbar.png b/tests/_output/material/pdf-viewer/pdf-viewer-old-toolbar.png
new file mode 100644
index 00000000000..6ace3e797de
Binary files /dev/null and b/tests/_output/material/pdf-viewer/pdf-viewer-old-toolbar.png differ
diff --git a/tests/_output/material/pdf-viewer/pdf-viewer-popup-editors.png b/tests/_output/material/pdf-viewer/pdf-viewer-popup-editors.png
new file mode 100644
index 00000000000..1c86c4b4e4a
Binary files /dev/null and b/tests/_output/material/pdf-viewer/pdf-viewer-popup-editors.png differ
diff --git a/tests/_output/material/pdf-viewer/pdf-viewer-popups.png b/tests/_output/material/pdf-viewer/pdf-viewer-popups.png
new file mode 100644
index 00000000000..9d9c2326bf5
Binary files /dev/null and b/tests/_output/material/pdf-viewer/pdf-viewer-popups.png differ
diff --git a/tests/_output/material/pdf-viewer/pdf-viewer-search-panel.png b/tests/_output/material/pdf-viewer/pdf-viewer-search-panel.png
index 04991f9a10b..3d25b2562cc 100644
Binary files a/tests/_output/material/pdf-viewer/pdf-viewer-search-panel.png and b/tests/_output/material/pdf-viewer/pdf-viewer-search-panel.png differ
diff --git a/tests/_output/material/pdf-viewer/pdf-viewer.png b/tests/_output/material/pdf-viewer/pdf-viewer.png
index 6ace3e797de..ddba9840b0a 100644
Binary files a/tests/_output/material/pdf-viewer/pdf-viewer.png and b/tests/_output/material/pdf-viewer/pdf-viewer.png differ
diff --git a/tests/_output/material/prompt/prompt-more-actions.png b/tests/_output/material/prompt/prompt-more-actions.png
index 79a6f674109..4c809a9f1ce 100644
Binary files a/tests/_output/material/prompt/prompt-more-actions.png and b/tests/_output/material/prompt/prompt-more-actions.png differ
diff --git a/tests/_output/material/prompt/prompt-normal.png b/tests/_output/material/prompt/prompt-normal.png
index 7fde825f315..933839cb5fd 100644
Binary files a/tests/_output/material/prompt/prompt-normal.png and b/tests/_output/material/prompt/prompt-normal.png differ
diff --git a/tests/_output/material/prompt/prompt-output.png b/tests/_output/material/prompt/prompt-output.png
index 39c6119779a..6e7a1922d55 100644
Binary files a/tests/_output/material/prompt/prompt-output.png and b/tests/_output/material/prompt/prompt-output.png differ
diff --git a/tests/_output/material/spreadsheet/spreadsheet-cell-contextmenu.png b/tests/_output/material/spreadsheet/spreadsheet-cell-contextmenu.png
index 1baf2ecd544..29e606b8e64 100644
Binary files a/tests/_output/material/spreadsheet/spreadsheet-cell-contextmenu.png and b/tests/_output/material/spreadsheet/spreadsheet-cell-contextmenu.png differ
diff --git a/tests/_output/material/spreadsheet/spreadsheet-filtering.png b/tests/_output/material/spreadsheet/spreadsheet-filtering.png
index 0d686455f4a..bc8307683e9 100644
Binary files a/tests/_output/material/spreadsheet/spreadsheet-filtering.png and b/tests/_output/material/spreadsheet/spreadsheet-filtering.png differ
diff --git a/tests/_output/material/spreadsheet/spreadsheet-formula.png b/tests/_output/material/spreadsheet/spreadsheet-formula.png
index 2c6d9789a33..d7a98a6bdcc 100644
Binary files a/tests/_output/material/spreadsheet/spreadsheet-formula.png and b/tests/_output/material/spreadsheet/spreadsheet-formula.png differ
diff --git a/tests/_output/material/spreadsheet/spreadsheet-row-contextmenu.png b/tests/_output/material/spreadsheet/spreadsheet-row-contextmenu.png
index 15a6801eff6..18cfe971235 100644
Binary files a/tests/_output/material/spreadsheet/spreadsheet-row-contextmenu.png and b/tests/_output/material/spreadsheet/spreadsheet-row-contextmenu.png differ
diff --git a/tests/_output/material/spreadsheet/spreadsheet-tools.png b/tests/_output/material/spreadsheet/spreadsheet-tools.png
index b629d5b0586..d4700dc3f3c 100644
Binary files a/tests/_output/material/spreadsheet/spreadsheet-tools.png and b/tests/_output/material/spreadsheet/spreadsheet-tools.png differ
diff --git a/tests/_output/material/spreadsheet/spreadsheet.png b/tests/_output/material/spreadsheet/spreadsheet.png
index eed9d05d7b3..3d8e50c91ea 100644
Binary files a/tests/_output/material/spreadsheet/spreadsheet.png and b/tests/_output/material/spreadsheet/spreadsheet.png differ
diff --git a/tests/_output/material/toolbar/toolbar-fill-modes.png b/tests/_output/material/toolbar/toolbar-fill-modes.png
new file mode 100644
index 00000000000..2a05373595f
Binary files /dev/null and b/tests/_output/material/toolbar/toolbar-fill-modes.png differ
diff --git a/tests/_output/nouvelle/pdf-viewer/pdf-viewer-annotations.png b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-annotations.png
new file mode 100644
index 00000000000..9ebd0f728c1
Binary files /dev/null and b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-annotations.png differ
diff --git a/tests/_output/nouvelle/pdf-viewer/pdf-viewer-dialogs.png b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-dialogs.png
new file mode 100644
index 00000000000..af37b7f5c4a
Binary files /dev/null and b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-dialogs.png differ
diff --git a/tests/_output/nouvelle/pdf-viewer/pdf-viewer-free-text-annotation.png b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-free-text-annotation.png
new file mode 100644
index 00000000000..a5c1428cda7
Binary files /dev/null and b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-free-text-annotation.png differ
diff --git a/tests/_output/nouvelle/pdf-viewer/pdf-viewer-highlight-annotation.png b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-highlight-annotation.png
new file mode 100644
index 00000000000..5d9e53ebfe9
Binary files /dev/null and b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-highlight-annotation.png differ
diff --git a/tests/_output/nouvelle/pdf-viewer/pdf-viewer-old-toolbar.png b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-old-toolbar.png
new file mode 100644
index 00000000000..b6c4c10a350
Binary files /dev/null and b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-old-toolbar.png differ
diff --git a/tests/_output/nouvelle/pdf-viewer/pdf-viewer-popup-editors.png b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-popup-editors.png
new file mode 100644
index 00000000000..2c05f41a62c
Binary files /dev/null and b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-popup-editors.png differ
diff --git a/tests/_output/nouvelle/pdf-viewer/pdf-viewer-popups.png b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-popups.png
new file mode 100644
index 00000000000..231bf25e21a
Binary files /dev/null and b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-popups.png differ
diff --git a/tests/_output/nouvelle/pdf-viewer/pdf-viewer-search-panel.png b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-search-panel.png
index a8d200c7df7..f265edb48a0 100644
Binary files a/tests/_output/nouvelle/pdf-viewer/pdf-viewer-search-panel.png and b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-search-panel.png differ
diff --git a/tests/_output/nouvelle/toolbar/toolbar-fill-modes.png b/tests/_output/nouvelle/toolbar/toolbar-fill-modes.png
new file mode 100644
index 00000000000..ab5c8e25b19
Binary files /dev/null and b/tests/_output/nouvelle/toolbar/toolbar-fill-modes.png differ
diff --git a/tests/chart-wizard/tab-data-sections-expanded.html b/tests/chart-wizard/tab-data-sections-expanded.html
index b53213cd1fa..2369425e512 100644
--- a/tests/chart-wizard/tab-data-sections-expanded.html
+++ b/tests/chart-wizard/tab-data-sections-expanded.html
@@ -53,7 +53,7 @@
Series