@progress/kendo-theme-fluent 8.0.0-dev.0 → 8.0.0-dev.2

package/scss/treeview/_variables.scss

@@ -24,39 +24,39 @@ $kendo-treeview-md-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-treeview-lg-line-height: var( --kendo-line-height, normal ) !default;
 /// The indentation of child groups in the TreeView.
 /// @group treeview
-$kendo-treeview-indent: map.get( $kendo-spacing, 6 ) !default;
+$kendo-treeview-indent: k-spacing(6) !default;
 
 /// The horizontal padding of the small TreeView items.
 /// @group treeview
-$kendo-treeview-sm-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-sm-item-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the medium TreeView items.
 /// @group treeview
-$kendo-treeview-md-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-md-item-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the large TreeView items.
 /// @group treeview
-$kendo-treeview-lg-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-lg-item-padding-x: k-spacing(2) !default;
 /// The vertical padding of the small TreeView items.
 /// @group treeview
-$kendo-treeview-sm-item-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-treeview-sm-item-padding-y: k-spacing(1.5) !default;
 /// The vertical padding of the medium TreeView items.
 /// @group treeview
-$kendo-treeview-md-item-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-md-item-padding-y: k-spacing(2) !default;
 /// The vertical padding of the large TreeView items.
 /// @group treeview
-$kendo-treeview-lg-item-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-treeview-lg-item-padding-y: k-spacing(2.5) !default;
 /// The border width of the TreeView items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0 !default;
 /// The border radius of the TreeView items.
 /// @group treeview
-$kendo-treeview-item-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-treeview-item-border-radius: k-border-radius(md) !default;
 
 /// The horizontal padding of the TreeViews' filter element.
 /// @group treeview
-$kendo-treeview-filter-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-filter-padding-x: k-spacing(2) !default;
 /// The vertical padding of the TreeViews' filter element.
 /// @group treeview
-$kendo-treeview-filter-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-filter-padding-y: k-spacing(2) !default;
 
 
 /// The sizes map of the TreeView.
@@ -181,4 +181,4 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
 
 /// The padding of the checkbox wrapper in the TreeView.
 /// @group treeview
-$kendo-treeview-checkbox-wrap-padding: map.get( $kendo-spacing, .5 ) !default;
+$kendo-treeview-checkbox-wrap-padding: k-spacing(.5) !default;

package/scss/typography/_layout.scss

@@ -17,6 +17,15 @@
     }
 
     .k-body {
+        @include typography(
+            var( --kendo-font-size, inherit ),
+            var( --kendo-font-family, inherit ),
+            var( --kendo-line-height, normal ),
+            var( --kendo-font-weight, normal ),
+            var( --kendo-letter-spacing, normal ),
+        );
+        margin: 0;
+
         p {
             margin: var( --kendo-paragraph-margin, #{$kendo-paragraph-margin});
         }

package/scss/typography/_theme.scss

@@ -2,6 +2,13 @@
 @use "./_variables.scss" as *;
 
 @mixin kendo-typography--theme() {
+    .k-body {
+        @include fill(
+            var( --kendo-body-text, initial ),
+            var( --kendo-body-bg, initial )
+        );
+    }
+
     // Code snippet
     .k-pre,
     .k-code {

package/scss/typography/_variables.scss

@@ -3,65 +3,98 @@
 
 // Typography
 
-/// Global typography styles for the Kendo Default theme.
-/// @group typography
-$kendo-enable-typography: false !default;
+// Headings
 
+$kendo-h1-font-size: 32px !default;
+$kendo-h2-font-size: 28px !default;
+$kendo-h3-font-size: 24px !default;
+$kendo-h4-font-size: 20px !default;
+$kendo-h5-font-size: 18px !default;
+$kendo-h6-font-size: 16px !default;
 
-/// Font family for monospaced text. Used for styling the code.
-/// @group typography
-$kendo-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
+$kendo-h1-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-h2-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-h3-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-h4-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-h5-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-h6-font-family: var( --kendo-font-family, inherit ) !default;
 
+$kendo-h1-line-height: 40px !default;
+$kendo-h2-line-height: 36px !default;
+$kendo-h3-line-height: 32px !default;
+$kendo-h4-line-height: 28px !default;
+$kendo-h5-line-height: 24px !default;
+$kendo-h6-line-height: 22px !default;
+
+$kendo-h2-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
+$kendo-h1-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
+$kendo-h3-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
+$kendo-h4-font-weight: var( --kendo-font-weight-semibold, normal )!default;
+$kendo-h5-font-weight: var( --kendo-font-weight-semibold, normal )!default;
+$kendo-h6-font-weight: var( --kendo-font-weight-semibold, normal )!default;
+
+$kendo-h1-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
+$kendo-h2-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
+$kendo-h3-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
+$kendo-h4-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
+$kendo-h5-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
+$kendo-h6-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
+
+$kendo-h1-margin: 0 0 var( --kendo-font-size, inherit ) !default;
+$kendo-h2-margin: 0 0 var( --kendo-font-size, inherit ) !default;
+$kendo-h3-margin: 0 0 var( --kendo-font-size, inherit ) !default;
+$kendo-h4-margin: 0 0 var( --kendo-font-size, inherit ) !default;
+$kendo-h5-margin: 0 0 var( --kendo-font-size, inherit ) !default;
+$kendo-h6-margin: 0 0 var( --kendo-font-size, inherit ) !default;
 
-// Headings
 $kendo-headings: (
     h1: (
-        font-size: 42px,
-        font-family: var( --kendo-font-family, inherit ),
-        line-height: var( --kendo-line-height, normal ),
-        font-weight: var( --kendo-font-weight-bold, bold),
-        letter-spacing: var( --kendo-letter-spacing, normal),
-        margin: 0 0 var( --kendo-font-size, inherit)
+        font-size: $kendo-h1-font-size,
+        font-family: $kendo-h1-font-family,
+        line-height: $kendo-h1-line-height,
+        font-weight: $kendo-h1-font-weight,
+        letter-spacing: $kendo-h1-letter-spacing,
+        margin: $kendo-h1-margin
     ),
     h2: (
-        font-size: 32px,
-        font-family: var( --kendo-font-family, inherit ),
-        line-height: var( --kendo-line-height, normal ),
-        font-weight: var( --kendo-font-weight-bold, bold),
-        letter-spacing: var( --kendo-letter-spacing, normal),
-        margin: 0 0 var( --kendo-font-size, inherit)
+        font-size: $kendo-h2-font-size,
+        font-family: $kendo-h2-font-family,
+        line-height: $kendo-h2-line-height,
+        font-weight: $kendo-h2-font-weight,
+        letter-spacing: $kendo-h2-letter-spacing,
+        margin: $kendo-h2-margin
     ),
     h3: (
-        font-size: 28px,
-        font-family: var( --kendo-font-family, inherit ),
-        line-height: var( --kendo-line-height, normal ),
-        font-weight: var( --kendo-font-weight-bold, bold),
-        letter-spacing: var( --kendo-letter-spacing, normal),
-        margin: 0 0 var( --kendo-font-size, inherit)
+        font-size: $kendo-h3-font-size,
+        font-family: $kendo-h3-font-family,
+        line-height: $kendo-h3-line-height,
+        font-weight: $kendo-h3-font-weight,
+        letter-spacing: $kendo-h3-letter-spacing,
+        margin: $kendo-h3-margin
     ),
     h4: (
-        font-size: 20px,
-        font-family: var( --kendo-font-family, inherit ),
-        line-height: var( --kendo-line-height, normal ),
-        font-weight: var( --kendo-font-weight-bold, bold),
-        letter-spacing: var( --kendo-letter-spacing, normal),
-        margin: 0 0 var( --kendo-font-size, inherit)
+        font-size: $kendo-h4-font-size,
+        font-family: $kendo-h4-font-family,
+        line-height: $kendo-h4-line-height,
+        font-weight: $kendo-h4-font-weight,
+        letter-spacing: $kendo-h4-letter-spacing,
+        margin: $kendo-h4-margin
     ),
     h5: (
-        font-size: 18px,
-        font-family: var( --kendo-font-family, inherit ),
-        line-height: var( --kendo-line-height, normal ),
-        font-weight: var( --kendo-font-weight-bold, bold),
-        letter-spacing: var( --kendo-letter-spacing, normal),
-        margin: 0 0 var( --kendo-font-size, inherit)
+        font-size: $kendo-h5-font-size,
+        font-family: $kendo-h5-font-family,
+        line-height: $kendo-h5-line-height,
+        font-weight: $kendo-h5-font-weight,
+        letter-spacing: $kendo-h5-letter-spacing,
+        margin: $kendo-h5-margin
     ),
     h6: (
-        font-size: 16px,
-        font-family: var( --kendo-font-family, inherit ),
-        line-height: var( --kendo-line-height, normal ),
-        font-weight: var( --kendo-font-weight-bold, bold),
-        letter-spacing: var( --kendo-letter-spacing, normal),
-        margin: 0 0 var( --kendo-font-size, inherit)
+        font-size: $kendo-h6-font-size,
+        font-family: $kendo-h6-font-family,
+        line-height: $kendo-h6-line-height,
+        font-weight: $kendo-h6-font-weight,
+        letter-spacing: $kendo-h6-letter-spacing,
+        margin: $kendo-h6-margin
     )
 ) !default;
 
@@ -82,10 +115,10 @@ $kendo-code-line-height: var( --kendo-line-height, normal) !default;
 $kendo-code-font-weight: var( --kendo-font-weight, normal) !default;
 $kendo-code-letter-spacing: var( --kendo-letter-spacing, normal) !default;
 
-$kendo-code-padding-x: map.get( $kendo-spacing, 1 ) !default;
-$kendo-code-padding-y: map.get( $kendo-spacing, 0 ) !default;
-$kendo-pre-padding-x: map.get( $kendo-spacing, 6 ) !default;
-$kendo-pre-padding-y: map.get( $kendo-spacing, 4 ) !default;
+$kendo-code-padding-x: k-spacing(1) !default;
+$kendo-code-padding-y: k-spacing(0) !default;
+$kendo-pre-padding-x: k-spacing(6) !default;
+$kendo-pre-padding-y: k-spacing(4) !default;
 $kendo-code-border-width: 1px !default;
 
 $kendo-code-bg: var( --kendo-component-bg, initial) !default;
@@ -94,33 +127,58 @@ $kendo-code-border: var( --kendo-component-border, initial) !default;
 
 
 // Display
+$kendo-display1-font-size: calc( var( --kendo-font-size, inherit ) * 9 ) !default;
+$kendo-display2-font-size: calc( var( --kendo-font-size, inherit ) * 6 )  !default;
+$kendo-display3-font-size: 68px !default;
+$kendo-display4-font-size: calc( var( --kendo-font-size, inherit ) * 3 )  !default;
+
+$kendo-display1-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-display2-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-display3-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-display4-font-family: var( --kendo-font-family, inherit ) !default;
+
+$kendo-display1-line-height: 118px !default;
+$kendo-display2-line-height: 94px !default;
+$kendo-display3-line-height: 76px !default;
+$kendo-display4-line-height: 52px !default;
+
+$kendo-display1-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
+$kendo-display2-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
+$kendo-display3-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
+$kendo-display4-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
+
+$kendo-display1-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
+$kendo-display2-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
+$kendo-display3-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
+$kendo-display4-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
+
 $kendo-display: (
     1: (
-        font-size: calc( var( --kendo-font-size, inherit) * 6 ),
-        font-family: var( --kendo-font-family, inherit ),
-        line-height: var( --kendo-line-height, normal ),
-        font-weight: var( --kendo-font-weight-bold, bold),
-        letter-spacing: var( --kendo-letter-spacing, normal)
+        font-size: $kendo-display1-font-size,
+        font-family: $kendo-display1-font-family,
+        line-height: $kendo-display1-line-height,
+        font-weight: $kendo-display1-font-weight,
+        letter-spacing: $kendo-display1-letter-spacing
     ),
     2: (
-        font-size: calc( var( --kendo-font-size, inherit) * 5 ),
-        font-family: var( --kendo-font-family, inherit ),
-        line-height: var( --kendo-line-height, normal ),
-        font-weight: var( --kendo-font-weight-bold, bold),
-        letter-spacing: var( --kendo-letter-spacing, normal)
+        font-size: $kendo-display2-font-size,
+        font-family: $kendo-display2-font-family,
+        line-height: $kendo-display2-line-height,
+        font-weight: $kendo-display2-font-weight,
+        letter-spacing: $kendo-display2-letter-spacing
     ),
     3: (
-        font-size: calc( var( --kendo-font-size, inherit) * 4 ),
-        font-family: var( --kendo-font-family, inherit ),
-        line-height: var( --kendo-line-height, normal ),
-        font-weight: var( --kendo-font-weight-bold, bold),
-        letter-spacing: var( --kendo-letter-spacing, normal)
+        font-size: $kendo-display3-font-size,
+        font-family: $kendo-display3-font-family,
+        line-height: $kendo-display3-line-height,
+        font-weight: $kendo-display3-font-weight,
+        letter-spacing: $kendo-display3-letter-spacing
     ),
     4: (
-        font-size: calc( var( --kendo-font-size, inherit) * 3 ),
-        font-family: var( --kendo-font-family, inherit ),
-        line-height: var( --kendo-line-height, normal ),
-        font-weight: var( --kendo-font-weight-bold, bold),
-        letter-spacing: var( --kendo-letter-spacing, normal)
+        font-size: $kendo-display4-font-size,
+        font-family: $kendo-display4-font-family,
+        line-height: $kendo-display4-line-height,
+        font-weight: $kendo-display4-font-weight,
+        letter-spacing: $kendo-display4-letter-spacing
     )
 ) !default;

package/scss/upload/_layout.scss

@@ -1,5 +1,6 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
+@use "../core/spacing" as *;
 
 @mixin kendo-upload--layout() {
 

package/scss/upload/_variables.scss

@@ -29,10 +29,10 @@ $kendo-upload-border: var( --kendo-component-border, initial ) !default;
 
 /// The horizontal padding of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-upload-dropzone-padding-x: k-spacing(2) !default;
 /// The vertical padding of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-upload-dropzone-padding-y: k-spacing(2) !default;
 /// The text color of the Upload dropzone.
 /// @group upload
 $kendo-upload-dropzone-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
@@ -55,14 +55,14 @@ $kendo-upload-status-text-opacity: null !default;
 
 /// The horizontal padding of an uploaded item.
 /// @group upload
-$kendo-upload-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-upload-item-padding-x: k-spacing(2) !default;
 /// The vertical padding of an uploaded item.
 /// @group upload
-$kendo-upload-item-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-upload-item-padding-y: k-spacing(2) !default;
 
 /// The vertical spacing between uploaded batch items.
 /// @group upload
-$kendo-upload-multiple-items-spacing: map.get( $kendo-spacing, 4 ) !default;
+$kendo-upload-multiple-items-spacing: k-spacing(4) !default;
 
 /// The font size of the Upload validation message.
 /// @group upload

package/scss/window/_layout.scss

@@ -71,7 +71,7 @@
     .k-window-titlebar-actions {
         margin-block: -5em;
         margin-inline: 0;
-        margin-inline-end: ( $kendo-window-titlebar-padding-y - $kendo-window-titlebar-padding-x );
+        margin-inline-end: calc( #{$kendo-window-titlebar-padding-y} - #{$kendo-window-titlebar-padding-x} );
         line-height: 1;
         display: flex;
         gap: var( --kendo-window-actions-gap, #{$kendo-window-actions-gap} );

package/scss/window/_variables.scss

@@ -3,10 +3,10 @@
 
 /// The width of the border around the Window.
 /// @group window
-$kendo-window-border-width: map.get( $kendo-spacing, 1 ) 0 0 !default;
+$kendo-window-border-width: k-spacing(1) 0 0 !default;
 /// The border radius of the Window.
 /// @group window
-$kendo-window-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-window-border-radius: k-border-radius(md) !default;
 /// The font family of the Window.
 /// @group window
 $kendo-window-font-family: var( --kendo-font-family, inherit ) !default;
@@ -19,10 +19,10 @@ $kendo-window-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal padding of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-padding-x: map.get( $kendo-spacing, 6 ) !default;
+$kendo-window-titlebar-padding-x: k-spacing(6) !default;
 /// The vertical padding of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-padding-y: map.get( $kendo-spacing, 5 ) !default;
+$kendo-window-titlebar-padding-y: k-spacing(5) !default;
 /// The width of the border of the Window titlebar.
 /// @group window
 $kendo-window-titlebar-border-width: 0 !default;
@@ -42,7 +42,7 @@ $kendo-window-title-font-weight: var( --kendo-font-weight-bold, bold ) !default;
 
 /// The spacing between the buttons in the Window titlebar.
 /// @group window
-$kendo-window-actions-gap: 0px !default;
+$kendo-window-actions-gap: k-spacing(0) !default;
 /// OThe opacity of the buttons in the Window titlebar.
 /// @group window
 $kendo-window-action-opacity: 1 !default;
@@ -52,23 +52,23 @@ $kendo-window-action-hover-opacity: 1 !default;
 
 /// The horizontal padding of the content of the Window.
 /// @group window
-$kendo-window-inner-padding-x: map.get( $kendo-spacing, 6 ) !default;
+$kendo-window-inner-padding-x: k-spacing(6) !default;
 /// The vertical padding of the content of the Window.
 /// @group window
-$kendo-window-inner-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-window-inner-padding-y: k-spacing(3) !default;
 
 /// The horizontal padding of the Window action buttons.
 /// @group window
-$kendo-window-buttongroup-padding-x: map.get( $kendo-spacing, 6 ) !default; // $kendo-actions-padding-x
+$kendo-window-buttongroup-padding-x: k-spacing(6) !default; // $kendo-actions-padding-x
 /// The vertical padding of the Window action buttons.
 /// @group window
-$kendo-window-buttongroup-padding-y: map.get( $kendo-spacing, 6 ) !default; // $kendo-actions-padding-y
+$kendo-window-buttongroup-padding-y: k-spacing(6) !default; // $kendo-actions-padding-y
 /// The width of the top border of the Window action buttons.
 /// @group window
 $kendo-window-buttongroup-border-width: 0 !default;
 /// The spacing between the Window action buttons.
 /// @group window
-$kendo-window-buttongroup-spacing: map.get( $kendo-spacing, 3 ) !default;
+$kendo-window-buttongroup-spacing: k-spacing(3) !default;
 
 /// The background color of the Window.
 /// @group window

package/scss/wizard/_variables.scss

@@ -6,10 +6,10 @@
 $kendo-wizard-border-width: 0px !default;
 /// The horizontal padding of the Wizard.
 /// @group wizard
-$kendo-wizard-padding-x: map.get( $kendo-spacing, 6 ) !default;
+$kendo-wizard-padding-x: k-spacing(6) !default;
 /// The vertical padding of the Wizard.
 /// @group wizard
-$kendo-wizard-padding-y: map.get( $kendo-spacing, 6 ) !default;
+$kendo-wizard-padding-y: k-spacing(6) !default;
 /// The font size of the Wizard.
 /// @group wizard
 $kendo-wizard-font-size: var( --kendo-font-size, inherit ) !default;
@@ -23,17 +23,17 @@ $kendo-wizard-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The horizontal padding of the Wizard steps.
 /// @group wizard
-$kendo-wizard-steps-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-wizard-steps-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Wizard steps.
 /// @group wizard
-$kendo-wizard-steps-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-wizard-steps-padding-y: k-spacing(3) !default;
 
 /// The horizontal padding of the Wizard content.
 /// @group wizard
-$kendo-wizard-content-padding-x: 0px !default;
+$kendo-wizard-content-padding-x: k-spacing(0) !default;
 /// The vertical padding of the Wizard content.
 /// @group wizard
-$kendo-wizard-content-padding-y: 0px !default;
+$kendo-wizard-content-padding-y: k-spacing(0) !default;
 /// The text color of the Wizard content.
 /// @group wizard
 $kendo-wizard-content-text: var( --kendo-component-text, initial ) !default;
@@ -43,10 +43,10 @@ $kendo-wizard-content-bg: var( --kendo-component-bg, initial ) !default;
 
 /// The horizontal margin of the Wizard's Button container.
 /// @group wizard
-$kendo-wizard-buttons-margin-x: map.get( $kendo-spacing, 7 ) !default;
+$kendo-wizard-buttons-margin-x: k-spacing(7) !default;
 /// The vertical margin of the Wizard Button container.
 /// @group wizard
-$kendo-wizard-buttons-margin-y: map.get( $kendo-spacing, 6 ) !default;
+$kendo-wizard-buttons-margin-y: k-spacing(6) !default;
 
 /// The outline of the focused Wizard step.
 /// @group wizard