@progress/kendo-theme-fluent 13.2.0-dev.3 → 13.2.0-dev.4

package/lib/swatches/fluent-1.json

@@ -3,7 +3,7 @@
     "name": "Fluent 1",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "13.2.0-dev.3",
+    "version": "13.2.0-dev.4",
     "previewColors": [
         "oklch(100.00% 0.0001 0deg)",
         "oklch(98.26% 0.0016 66.88deg)",
@@ -451,106 +451,6 @@
                     "type": "color",
                     "value": "oklch(47.54% 0.1618 23.65deg)"
                 },
-                "light-subtle": {
-                    "name": "Light Subtle",
-                    "type": "color",
-                    "value": "oklch(98.26% 0.0016 66.88deg)"
-                },
-                "light-subtle-hover": {
-                    "name": "Light Subtle Hover",
-                    "type": "color",
-                    "value": "oklch(96.16% 0.0016 66.90deg)"
-                },
-                "light-subtle-active": {
-                    "name": "Light Subtle Active",
-                    "type": "color",
-                    "value": "oklch(94.11% 0.0033 67.36deg)"
-                },
-                "light": {
-                    "name": "Light",
-                    "type": "color",
-                    "value": "oklch(85.86% 0.0034 67.41deg)"
-                },
-                "light-hover": {
-                    "name": "Light Hover",
-                    "type": "color",
-                    "value": "oklch(82.76% 0.0035 67.42deg)"
-                },
-                "light-active": {
-                    "name": "Light Active",
-                    "type": "color",
-                    "value": "oklch(70.36% 0.0036 67.48deg)"
-                },
-                "light-emphasis": {
-                    "name": "Light Emphasis",
-                    "type": "color",
-                    "value": "oklch(90.46% 0.0034 67.38deg)"
-                },
-                "light-on-subtle": {
-                    "name": "Light On Subtle",
-                    "type": "color",
-                    "value": "oklch(31.38% 0.0022 67.54deg)"
-                },
-                "on-light": {
-                    "name": "On Light",
-                    "type": "color",
-                    "value": "oklch(31.38% 0.0022 67.54deg)"
-                },
-                "light-on-surface": {
-                    "name": "Light On Surface",
-                    "type": "color",
-                    "value": "oklch(85.86% 0.0034 67.41deg)"
-                },
-                "dark-subtle": {
-                    "name": "Dark Subtle",
-                    "type": "color",
-                    "value": "oklch(70.36% 0.0036 67.48deg)"
-                },
-                "dark-subtle-hover": {
-                    "name": "Dark Subtle Hover",
-                    "type": "color",
-                    "value": "oklch(67.09% 0.0037 67.49deg)"
-                },
-                "dark-subtle-active": {
-                    "name": "Dark Subtle Active",
-                    "type": "color",
-                    "value": "oklch(62.78% 0.0037 67.51deg)"
-                },
-                "dark": {
-                    "name": "Dark",
-                    "type": "color",
-                    "value": "oklch(31.38% 0.0022 67.54deg)"
-                },
-                "dark-hover": {
-                    "name": "Dark Hover",
-                    "type": "color",
-                    "value": "oklch(24.00% 0.0024 67.57deg)"
-                },
-                "dark-active": {
-                    "name": "Dark Active",
-                    "type": "color",
-                    "value": "oklch(0.00% 0.0000 0deg)"
-                },
-                "dark-emphasis": {
-                    "name": "Dark Emphasis",
-                    "type": "color",
-                    "value": "oklch(57.04% 0.0038 67.53deg)"
-                },
-                "dark-on-subtle": {
-                    "name": "Dark On Subtle",
-                    "type": "color",
-                    "value": "oklch(24.00% 0.0024 67.57deg)"
-                },
-                "on-dark": {
-                    "name": "On Dark",
-                    "type": "color",
-                    "value": "oklch(100.00% 0.0001 0deg)"
-                },
-                "dark-on-surface": {
-                    "name": "Dark On Surface",
-                    "type": "color",
-                    "value": "oklch(31.38% 0.0022 67.54deg)"
-                },
                 "inverse-subtle": {
                     "name": "Inverse Subtle",
                     "type": "color",

package/lib/swatches/fluent-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "13.2.0-dev.3",
+    "version": "13.2.0-dev.4",
     "previewColors": [
         "oklch(23.93% 0.0000 0deg)",
         "oklch(28.09% 0.0000 0deg)",
@@ -451,106 +451,6 @@
                     "type": "color",
                     "value": "oklch(80.80% 0.0779 12.85deg)"
                 },
-                "light-subtle": {
-                    "name": "Light Subtle",
-                    "type": "color",
-                    "value": "oklch(74.76% 0.0001 0deg)"
-                },
-                "light-subtle-hover": {
-                    "name": "Light Subtle Hover",
-                    "type": "color",
-                    "value": "oklch(68.30% 0.0001 0deg)"
-                },
-                "light-subtle-active": {
-                    "name": "Light Subtle Active",
-                    "type": "color",
-                    "value": "oklch(56.24% 0.0001 0deg)"
-                },
-                "light": {
-                    "name": "Light",
-                    "type": "color",
-                    "value": "oklch(87.61% 0.0001 0deg)"
-                },
-                "light-hover": {
-                    "name": "Light Hover",
-                    "type": "color",
-                    "value": "oklch(74.76% 0.0001 0deg)"
-                },
-                "light-active": {
-                    "name": "Light Active",
-                    "type": "color",
-                    "value": "oklch(68.30% 0.0001 0deg)"
-                },
-                "light-emphasis": {
-                    "name": "Light Emphasis",
-                    "type": "color",
-                    "value": "oklch(43.86% 0.0001 0deg)"
-                },
-                "light-on-subtle": {
-                    "name": "Light On Subtle",
-                    "type": "color",
-                    "value": "oklch(28.09% 0.0000 0deg)"
-                },
-                "on-light": {
-                    "name": "On Light",
-                    "type": "color",
-                    "value": "oklch(28.09% 0.0000 0deg)"
-                },
-                "light-on-surface": {
-                    "name": "Light On Surface",
-                    "type": "color",
-                    "value": "oklch(74.76% 0.0001 0deg)"
-                },
-                "dark-subtle": {
-                    "name": "Dark Subtle",
-                    "type": "color",
-                    "value": "oklch(16.84% 0.0000 0deg)"
-                },
-                "dark-subtle-hover": {
-                    "name": "Dark Subtle Hover",
-                    "type": "color",
-                    "value": "oklch(21.78% 0.0000 0deg)"
-                },
-                "dark-subtle-active": {
-                    "name": "Dark Subtle Active",
-                    "type": "color",
-                    "value": "oklch(26.03% 0.0000 0deg)"
-                },
-                "dark": {
-                    "name": "Dark",
-                    "type": "color",
-                    "value": "oklch(28.09% 0.0000 0deg)"
-                },
-                "dark-hover": {
-                    "name": "Dark Hover",
-                    "type": "color",
-                    "value": "oklch(36.00% 0.0000 0deg)"
-                },
-                "dark-active": {
-                    "name": "Dark Active",
-                    "type": "color",
-                    "value": "oklch(34.07% 0.0000 0deg)"
-                },
-                "dark-emphasis": {
-                    "name": "Dark Emphasis",
-                    "type": "color",
-                    "value": "oklch(43.86% 0.0001 0deg)"
-                },
-                "dark-on-subtle": {
-                    "name": "Dark On Subtle",
-                    "type": "color",
-                    "value": "oklch(74.76% 0.0001 0deg)"
-                },
-                "on-dark": {
-                    "name": "On Dark",
-                    "type": "color",
-                    "value": "oklch(100.00% 0.0001 0deg)"
-                },
-                "dark-on-surface": {
-                    "name": "Dark On Surface",
-                    "type": "color",
-                    "value": "oklch(28.09% 0.0000 0deg)"
-                },
                 "inverse-subtle": {
                     "name": "Inverse Subtle",
                     "type": "color",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "13.2.0-dev.3",
+    "version": "13.2.0-dev.4",
     "previewColors": [
         "oklch(98.51% 0.0001 0deg)",
         "oklch(100.00% 0.0001 0deg)",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "13.2.0-dev.3",
+  "version": "13.2.0-dev.4",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -55,12 +55,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.8.0",
-    "@progress/kendo-theme-core": "13.2.0-dev.3",
-    "@progress/kendo-theme-utils": "13.2.0-dev.3"
+    "@progress/kendo-theme-core": "13.2.0-dev.4",
+    "@progress/kendo-theme-utils": "13.2.0-dev.4"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "5487edc15973af51b6b452b987a8cb020d654a57"
+  "gitHead": "7368a47b22d3a917d55b6f022728aee002b3125a"
 }

package/scss/appbar/_variables.scss

@@ -5,7 +5,7 @@
 /// The default theme color of the AppBar.
 /// @group appbar
 /// @role default
-$kendo-appbar-default-theme-color: "light" !default;
+$kendo-appbar-default-theme-color: "base" !default;
 
 /// The horizontal margin of the AppBar.
 /// @group appbar
@@ -49,20 +49,6 @@ $kendo-appbar-bg: var( --kendo-appbar-bg, k-color(surface) ) !default;
 /// @group appbar
 $kendo-appbar-border: var( --kendo-appbar-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
-/// The background color of the AppBar based on light theme color.
-/// @group appbar
-$kendo-appbar-light-bg: k-color(light) !default;
-/// The text color of the AppBar based on light theme color.
-/// @group appbar
-$kendo-appbar-light-text: k-color(on-light) !default;
-
-/// The background color of the AppBar based on dark theme color.
-/// @group appbar
-$kendo-appbar-dark-bg: k-color(dark) !default;
-/// The text color of the AppBar based on dark theme color.
-/// @group appbar
-$kendo-appbar-dark-text: k-color(on-dark) !default;
-
 @forward "@progress/kendo-theme-core/scss/components/appbar/_variables.scss" with (
     $kendo-appbar-margin-x: $kendo-appbar-margin-x,
     $kendo-appbar-margin-y: $kendo-appbar-margin-y,
@@ -74,9 +60,5 @@ $kendo-appbar-dark-text: k-color(on-dark) !default;
     $kendo-appbar-font-size: $kendo-appbar-font-size,
     $kendo-appbar-line-height: $kendo-appbar-line-height,
     $kendo-appbar-gap: $kendo-appbar-spacing,
-    $kendo-appbar-light-bg: $kendo-appbar-light-bg,
-    $kendo-appbar-dark-bg: $kendo-appbar-dark-bg,
-    $kendo-appbar-light-text: $kendo-appbar-light-text,
-    $kendo-appbar-dark-text: $kendo-appbar-dark-text,
     $kendo-appbar-default-theme-color: $kendo-appbar-default-theme-color
 );

package/scss/bottom-navigation/_theme.scss

@@ -60,7 +60,7 @@
                     background-color: k-color(app-surface);
                     border-color: color-mix(in srgb, k-color(border) 16%, transparent);
 
-                    @if ($name == "warning" or $name == "dark" or $name == "inverse") {
+                    @if ($name == "warning" or $name == "inverse") {
                         border-color: k-color(#{$name});
                     }
 

package/scss/button/_theme.scss

@@ -169,22 +169,6 @@
                     }
                 }
             }
-
-            @if($theme-color == "light") {
-                #{k-when-default($kendo-button-default-fill-mode, ("outline", "flat", "clear", "link"))}
-                &.k-button-outline,
-                &.k-button-flat,
-                &.k-button-clear,
-                &.k-button-link {
-                    #{k-when-default($kendo-button-default-theme-color, $theme-color)}
-                    &.k-button-#{$theme-color} {
-                        &:focus,
-                        &.k-focus {
-                            outline-color: k-color(light-on-surface);
-                        }
-                    }
-                }
-            }
         }
     }
 

package/scss/card/_variables.scss

@@ -2,11 +2,6 @@
 @use "../core/_index.scss" as *;
 @use "../button/_variables.scss" as *;
 
-/// The default theme color of the Card.
-/// @role default
-/// @group card
-$kendo-card-default-theme-color: null !default;
-
 /// The horizontal padding of the Card.
 /// @group card
 $kendo-card-padding-x: var( --kendo-card-padding-x, k-spacing(3) ) !default;
@@ -179,7 +174,6 @@ $kendo-card-deck-scroll-button-offset: calc( -1 * #{$kendo-button-border-width}
 $kendo-card-callout-size: 20px !default;
 
 @forward "@progress/kendo-theme-core/scss/components/card/_variables.scss" with (
-    $kendo-card-default-theme-color: $kendo-card-default-theme-color,
     $kendo-card-padding-x: $kendo-card-padding-x,
     $kendo-card-padding-y: $kendo-card-padding-y,
     $kendo-card-border-width: $kendo-card-border-width,

package/scss/core/color-system/_swatch.scss

@@ -107,30 +107,6 @@ $_default-colors: (
     on-error: #{"oklch(from var(--kendo-color-error) clamp(0, (0.6 - l) * 99999, 1) 0 h)"},
     error-on-surface: #{"oklch(from var(--kendo-color-error) l c h)"},
 
-    // Light
-    light-subtle: #{"oklch(from var(--kendo-color-light) calc(l + 0.060) c h)"},
-    light-subtle-hover: #{"oklch(from var(--kendo-color-light) calc(l + 0.030) c h)"},
-    light-subtle-active: #{"oklch(from var(--kendo-color-light) l c h)"},
-    light: oklch(94.01% 0 0deg),
-    light-hover: #{"oklch(from var(--kendo-color-light) calc(l + 0.030) c h)"},
-    light-active: #{"oklch(from var(--kendo-color-light) calc(l + 0.015) c h)"},
-    light-emphasis: #{"oklch(from var(--kendo-color-light) calc(l - 0.033) c h)"},
-    light-on-subtle: oklch(49.26% 0 0deg),
-    on-light: oklch(26.03% 0 0deg),
-    light-on-surface: oklch(100% 0 0deg),
-
-    // Dark
-    dark-subtle: oklch(0% 0 0deg),
-    dark-subtle-hover: #{"oklch(from var(--kendo-color-dark) l c h)"},
-    dark-subtle-active: #{"oklch(from var(--kendo-color-dark) calc(l + 0.061) c h)"},
-    dark: oklch(26.03% 0 0deg),
-    dark-hover: #{"oklch(from var(--kendo-color-dark) calc(l + 0.119) c h)"},
-    dark-active: #{"oklch(from var(--kendo-color-dark) calc(l + 0.061) c h)"},
-    dark-emphasis: #{"oklch(from var(--kendo-color-dark) calc(l + 0.232) c h)"},
-    dark-on-subtle: oklch(100% 0 0deg),
-    on-dark: oklch(100% 0 0deg),
-    dark-on-surface: oklch(49.26% 0 0deg),
-
     // Inverse
     inverse-subtle: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.232) c h)"},
     inverse-subtle-hover: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.373) c h)"},
@@ -327,38 +303,6 @@ $_default-colors: (
 /// @prop {Color} on-error - The text color variable for content on error.
 /// @prop {Color} error-on-surface - The text color variable for content on surface.
 ///
-/// @subgroup {light}
-/// [light-subtle, light-subtle-hover, light-subtle-active,
-/// light, light-hover, light-active, light-emphasis,
-/// light-on-subtle, on-light, light-on-surface]
-/// The Light variable group.
-/// @prop {Color} light-subtle - The light subtle background color variable.
-/// @prop {Color} light-subtle-hover - The light subtle background color variable for the hover state.
-/// @prop {Color} light-subtle-active - The light subtle background color variable for the active state.
-/// @prop {Color} light - The light background color variable.
-/// @prop {Color} light-hover - The light background color variable for the hover state.
-/// @prop {Color} light-active - The light background color variable for the active state.
-/// @prop {Color} light-emphasis - The emphasized light color variable.
-/// @prop {Color} light-on-subtle - The text color variable for content on light subtle.
-/// @prop {Color} on-light - The text color variable for content on light.
-/// @prop {Color} light-on-surface - The text color variable for content on surface.
-///
-/// @subgroup {dark}
-/// [dark-subtle, dark-subtle-hover, dark-subtle-active,
-/// dark, dark-hover, dark-active, dark-emphasis,
-/// dark-on-subtle, on-dark, dark-on-surface]
-/// The Dark variable group.
-/// @prop {Color} dark-subtle - The dark subtle background color variable.
-/// @prop {Color} dark-subtle-hover - The dark subtle background color variable for the hover state.
-/// @prop {Color} dark-subtle-active - The dark subtle background color variable for the active state.
-/// @prop {Color} dark - The dark background color variable.
-/// @prop {Color} dark-hover - The dark background color variable for the hover state.
-/// @prop {Color} dark-active - The dark background color variable for the active state.
-/// @prop {Color} dark-emphasis - The emphasized dark color variable.
-/// @prop {Color} dark-on-subtle - The text color variable for content on dark subtle.
-/// @prop {Color} on-dark - The text color variable for content on dark.
-/// @prop {Color} dark-on-surface - The text color variable for content on surface.
-///
 /// @subgroup {inverse}
 /// [inverse-subtle, inverse-subtle-hover, inverse-subtle-active,
 /// inverse, inverse-hover, inverse-active, inverse-emphasis,

package/scss/dialog/_variables.scss

@@ -1,11 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 
-/// The default theme color of the Dialog.
-/// @group dialog
-/// @role default
-$kendo-dialog-default-theme-color: null !default;
-
 /// The background color of the Dialog titlebar.
 /// @group dialog
 $kendo-dialog-titlebar-bg: var( --kendo-dialog-titlebar-bg, k-color(surface-alt) ) !default;
@@ -38,7 +33,6 @@ $kendo-dialog-bg: var( --kendo-dialog-bg, k-color(surface-alt) ) !default;
 $kendo-dialog-shadow: var( --kendo-dialog-shadow, var( --kendo-elevation-5, none ) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/dialog/_variables.scss" with (
-    $kendo-dialog-default-theme-color: $kendo-dialog-default-theme-color,
     $kendo-dialog-titlebar-bg: $kendo-dialog-titlebar-bg,
     $kendo-dialog-titlebar-text: $kendo-dialog-titlebar-text,
     $kendo-dialog-titlebar-border: $kendo-dialog-titlebar-border,

package/scss/fab/_theme.scss

@@ -47,9 +47,8 @@
 
         #{k-when-default($kendo-fab-default-fill-mode, "solid")}
         &.k-fab-solid {
-            #{k-when-default($kendo-fab-default-theme-color, ("warning", "light"))}
-            &.k-fab-warning,
-            &.k-fab-light {
+            #{k-when-default($kendo-fab-default-theme-color, "warning")}
+            &.k-fab-warning {
                 &:focus::after,
                 &.k-focus::after {
                     outline-color: k-color(app-surface);

package/scss/notification/_variables.scss

@@ -55,7 +55,7 @@ $kendo-notification-icon-spacing: var( --kendo-notification-icon-spacing, #{k-sp
 
 /// The theme colors map for the Notification.
 /// @group notification
-$kendo-notification-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-notification-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "inverse") !default;
 
 /// The generated theme colors map for the Notification.
 /// @group notification

package/scss/overlay/_variables.scss

@@ -1,18 +1,14 @@
-/// The default theme color of the Overlay.
-/// @group overlay
-/// @role default
-$kendo-overlay-default-theme-color: "inverse" !default;
+@use "../core/_index.scss" as *;
 
-/// Background color of the dark overlay.
+/// The background color of the Overlay.
 /// @group overlay
-$kendo-overlay-bg: null !default;
+$kendo-overlay-bg: k-color(inverse) !default;
 
-/// Opacity of the overlay.
+/// The opacity of the Overlay.
 /// @group overlay
 $kendo-overlay-opacity: var( --kendo-overlay-opacity, .4 ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/overlay/_variables.scss" with (
-    $kendo-overlay-default-theme-color: $kendo-overlay-default-theme-color,
     $kendo-overlay-bg: $kendo-overlay-bg,
     $kendo-overlay-opacity: $kendo-overlay-opacity
 );

package/scss/scrollview/_theme.scss

@@ -5,22 +5,6 @@
 @mixin kendo-scrollview--theme() {
     @include kendo-scrollview--theme-base();
 
-    .k-scrollview {
-        &.k-scrollview-dark {
-            kendo-scrollview-pager,
-            .k-scrollview-nav-wrap {
-                background-color: $kendo-scrollview-pager-dark-bg;
-            }
-        }
-
-        &.k-scrollview-light {
-            kendo-scrollview-pager,
-            .k-scrollview-nav-wrap {
-                background-color: $kendo-scrollview-pager-light-bg;
-            }
-        }
-    }
-
     .k-scrollview-next,
     .k-scrollview-prev {
         text-shadow: $kendo-scrollview-navigation-arrow-shadow;

package/scss/scrollview/_variables.scss

@@ -114,6 +114,8 @@ $kendo-scrollview-transition-timing-function: var( --kendo-scrollview-transition
     $kendo-scrollview-pager-height: $kendo-scrollview-pager-height,
     $kendo-scrollview-navigation-color: $kendo-scrollview-navigation-color,
     $kendo-scrollview-navigation-bg: $kendo-scrollview-navigation-bg,
+    $kendo-scrollview-light-bg: $kendo-scrollview-pager-light-bg,
+    $kendo-scrollview-dark-bg: $kendo-scrollview-pager-dark-bg,
     $kendo-scrollview-transition-duration: $kendo-scrollview-transition-duration,
     $kendo-scrollview-transition-timing-function: $kendo-scrollview-transition-timing-function
 );

package/scss/tooltip/_functions.scss

@@ -5,7 +5,7 @@
 
 @function tooltip-theme( $colors ) {
     $_theme: ();
-    $_solid-colors: ("primary", "dark", "light", "inverse");
+    $_solid-colors: ("inverse");
 
     @each $name in $colors {
         @if list.index($_solid-colors, $name) {

package/scss/tooltip/_variables.scss

@@ -57,7 +57,7 @@ $kendo-tooltip-button-text: var( --kendo-tooltip-button-text, #{k-color(subtle)}
 
 /// The theme colors map for the Tooltip.
 /// @group tooltip
-$kendo-tooltip-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-tooltip-theme-colors: ("base", "info", "success", "warning", "error", "inverse") !default;
 
 /// The generated theme colors map for the Tooltip.
 /// @group tooltip

package/scss/window/_variables.scss

@@ -6,11 +6,6 @@
 /// @role default
 $kendo-window-default-size: "auto" !default;
 
-/// The default theme color of the Window.
-/// @group window
-/// @role default
-$kendo-window-default-theme-color: null !default;
-
 /// The width of the border around the Window.
 /// @group window
 $kendo-window-border-width: var(--kendo-window-border-width, 0) !default;
@@ -107,7 +102,6 @@ $kendo-window-titlebar-text: var( --kendo-window-titlebar-text, k-color(on-app-s
 $kendo-window-titlebar-border: var( --kendo-window-titlebar-border, k-color(primary) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/window/_variables.scss" with (
-    $kendo-window-default-theme-color: $kendo-window-default-theme-color,
     $kendo-window-border-width: $kendo-window-border-width,
     $kendo-window-border-radius: $kendo-window-border-radius,
     $kendo-window-font-family: $kendo-window-font-family,