@progress/kendo-theme-classic 5.12.1-dev.1 → 5.12.1-dev.3

package/lib/swatches/classic-silver-dark.json

@@ -3,7 +3,8 @@
     "name": "Classic Silver Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.12.1-dev.1",
+    "version": "5.12.1-dev.3",
+    "api": "legacy",
     "previewColors": [
         "#000000",
         "#131314",
@@ -14,53 +15,39 @@
     "components": [],
     "groups": [
         {
-            "hidden": true,
+            "name": "Theme colors",
             "variables": {
-                "dark-theme": {
+                "kendo-is-dark-theme": {
                     "name": "Dark theme",
                     "type": "boolean",
                     "value": true
-                }
-            }
-        },
-        {
-            "variables": {
-                "border-radius": {
-                    "name": "Border radius",
-                    "type": "number",
-                    "value": "4px"
-                }
-            }
-        },
-        {
-            "name": "Theme colors",
-            "variables": {
-                "primary": {
+                },
+                "kendo-color-primary": {
                     "name": "Primary",
                     "type": "color",
                     "value": "#1984c8"
                 },
-                "secondary": {
+                "kendo-color-secondary": {
                     "name": "Secondary",
                     "type": "color",
                     "value": "#131314"
                 },
-                "info": {
+                "kendo-color-info": {
                     "name": "Info",
                     "type": "color",
                     "value": "#007bc3"
                 },
-                "success": {
+                "kendo-color-success": {
                     "name": "Success",
                     "type": "color",
                     "value": "#3ea44e"
                 },
-                "warning": {
+                "kendo-color-warning": {
                     "name": "Warning",
                     "type": "color",
                     "value": "#ff9800"
                 },
-                "error": {
+                "kendo-color-error": {
                     "name": "Error",
                     "type": "color",
                     "value": "#d92800"
@@ -70,27 +57,22 @@
         {
             "name": "Body",
             "variables": {
-                "body-text": {
+                "kendo-body-text": {
                     "name": "Body text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "body-bg": {
+                "kendo-body-bg": {
                     "name": "Body background",
                     "type": "color",
                     "value": "#000000"
                 },
-                "headings-text": {
-                    "name": "Headings text color",
-                    "type": "color",
-                    "value": "#ffffff"
-                },
-                "subtle-text": {
+                "kendo-subtle-text": {
                     "name": "Subtle text color",
                     "type": "color",
                     "value": "#e0e0e0"
                 },
-                "disabled-text": {
+                "kendo-disabled-text": {
                     "name": "Disabled text color",
                     "type": "color",
                     "value": "#d0d0d0"
@@ -100,42 +82,42 @@
         {
             "name": "Components",
             "variables": {
-                "component-text": {
+                "kendo-component-text": {
                     "name": "Component text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "component-bg": {
+                "kendo-component-bg": {
                     "name": "Component background",
                     "type": "color",
                     "value": "#202020"
                 },
-                "base-text": {
+                "kendo-base-text": {
                     "name": "Header text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "base-bg": {
+                "kendo-base-bg": {
                     "name": "Header background",
                     "type": "color",
                     "value": "#131314"
                 },
-                "hovered-text": {
+                "kendo-hover-text": {
                     "name": "Hover text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "hovered-bg": {
+                "kendo-hover-bg": {
                     "name": "Hover background",
                     "type": "color",
                     "value": "#262627"
                 },
-                "selected-text": {
+                "kendo-selected-text": {
                     "name": "Selected text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "selected-bg": {
+                "kendo-selected-bg": {
                     "name": "Selected background",
                     "type": "color",
                     "value": "#1984c8"
@@ -160,12 +142,12 @@
         {
             "name": "Link",
             "variables": {
-                "link-text": {
+                "kendo-link-text": {
                     "name": "Link text color",
                     "type": "color",
                     "value": "#1984c8"
                 },
-                "link-hover-text": {
+                "kendo-link-hover-text": {
                     "name": "Link hover text color",
                     "type": "color",
                     "value": "#156fa8"
@@ -175,32 +157,32 @@
         {
             "name": "Dataviz",
             "variables": {
-                "series-a": {
+                "kendo-series-a": {
                     "name": "Series A",
                     "type": "color",
                     "value": "#007bc3"
                 },
-                "series-b": {
+                "kendo-series-b": {
                     "name": "Series B",
                     "type": "color",
                     "value": "#3ea44e"
                 },
-                "series-c": {
+                "kendo-series-c": {
                     "name": "Series C",
                     "type": "color",
                     "value": "#ffae00"
                 },
-                "series-d": {
+                "kendo-series-d": {
                     "name": "Series D",
                     "type": "color",
                     "value": "#ef4c00"
                 },
-                "series-e": {
+                "kendo-series-e": {
                     "name": "Series E",
                     "type": "color",
                     "value": "#a419b7"
                 },
-                "series-f": {
+                "kendo-series-f": {
                     "name": "Series F",
                     "type": "color",
                     "value": "#430b62"

package/lib/swatches/classic-silver.json

@@ -3,7 +3,8 @@
     "name": "Classic Silver",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.12.1-dev.1",
+    "version": "5.12.1-dev.3",
+    "api": "legacy",
     "previewColors": [
         "#ffffff",
         "#f3f3f4",
@@ -13,44 +14,40 @@
     ],
     "components": [],
     "groups": [
-        {
-            "variables": {
-                "border-radius": {
-                    "name": "Border radius",
-                    "type": "number",
-                    "value": "4px"
-                }
-            }
-        },
         {
             "name": "Theme colors",
             "variables": {
-                "primary": {
+                "kendo-is-dark-theme": {
+                    "name": "Dark theme",
+                    "type": "boolean",
+                    "value": false
+                },
+                "kendo-color-primary": {
                     "name": "Primary",
                     "type": "color",
                     "value": "#1984c8"
                 },
-                "secondary": {
+                "kendo-color-secondary": {
                     "name": "Secondary",
                     "type": "color",
                     "value": "#f3f3f4"
                 },
-                "info": {
+                "kendo-color-info": {
                     "name": "Info",
                     "type": "color",
                     "value": "#007bc3"
                 },
-                "success": {
+                "kendo-color-success": {
                     "name": "Success",
                     "type": "color",
                     "value": "#3ea44e"
                 },
-                "warning": {
+                "kendo-color-warning": {
                     "name": "Warning",
                     "type": "color",
                     "value": "#ff9800"
                 },
-                "error": {
+                "kendo-color-error": {
                     "name": "Error",
                     "type": "color",
                     "value": "#d92800"
@@ -60,27 +57,22 @@
         {
             "name": "Body",
             "variables": {
-                "body-text": {
+                "kendo-body-text": {
                     "name": "Body text color",
                     "type": "color",
                     "value": "#515967"
                 },
-                "body-bg": {
+                "kendo-body-bg": {
                     "name": "Body background",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "headings-text": {
-                    "name": "Headings text color",
-                    "type": "color",
-                    "value": "#515967"
-                },
-                "subtle-text": {
+                "kendo-subtle-text": {
                     "name": "Subtle text color",
                     "type": "color",
                     "value": "#666666"
                 },
-                "disabled-text": {
+                "kendo-disabled-text": {
                     "name": "Disabled text color",
                     "type": "color",
                     "value": "#8f8f8f"
@@ -90,42 +82,42 @@
         {
             "name": "Components",
             "variables": {
-                "component-text": {
+                "kendo-component-text": {
                     "name": "Component text color",
                     "type": "color",
                     "value": "#515967"
                 },
-                "component-bg": {
+                "kendo-component-bg": {
                     "name": "Component background",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "base-text": {
+                "kendo-base-text": {
                     "name": "Header text color",
                     "type": "color",
                     "value": "#515967"
                 },
-                "base-bg": {
+                "kendo-base-bg": {
                     "name": "Header background",
                     "type": "color",
                     "value": "#f3f3f4"
                 },
-                "hovered-text": {
+                "kendo-hover-text": {
                     "name": "Hover text color",
                     "type": "color",
                     "value": "#263248"
                 },
-                "hovered-bg": {
+                "kendo-hover-bg": {
                     "name": "Hover background",
                     "type": "color",
                     "value": "#dbdee5"
                 },
-                "selected-text": {
+                "kendo-selected-text": {
                     "name": "Selected text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "selected-bg": {
+                "kendo-selected-bg": {
                     "name": "Selected background",
                     "type": "color",
                     "value": "#1984c8"
@@ -150,12 +142,12 @@
         {
             "name": "Link",
             "variables": {
-                "link-text": {
+                "kendo-link-text": {
                     "name": "Link text color",
                     "type": "color",
                     "value": "#1984c8"
                 },
-                "link-hover-text": {
+                "kendo-link-hover-text": {
                     "name": "Link hover text color",
                     "type": "color",
                     "value": "#156fa8"
@@ -165,32 +157,32 @@
         {
             "name": "Dataviz",
             "variables": {
-                "series-a": {
+                "kendo-series-a": {
                     "name": "Series A",
                     "type": "color",
                     "value": "#007bc3"
                 },
-                "series-b": {
+                "kendo-series-b": {
                     "name": "Series B",
                     "type": "color",
                     "value": "#3ea44e"
                 },
-                "series-c": {
+                "kendo-series-c": {
                     "name": "Series C",
                     "type": "color",
                     "value": "#ffae00"
                 },
-                "series-d": {
+                "kendo-series-d": {
                     "name": "Series D",
                     "type": "color",
                     "value": "#ef4c00"
                 },
-                "series-e": {
+                "kendo-series-e": {
                     "name": "Series E",
                     "type": "color",
                     "value": "#a419b7"
                 },
-                "series-f": {
+                "kendo-series-f": {
                     "name": "Series F",
                     "type": "color",
                     "value": "#430b62"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-classic",
   "description": "Sass port of less based themes for Kendo UI theme",
-  "version": "5.12.1-dev.1",
+  "version": "5.12.1-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -48,10 +48,10 @@
     "postpublish": "echo 'no postpublish for classic theme'"
   },
   "dependencies": {
-    "@progress/kendo-font-icons": "^0.6.0",
-    "@progress/kendo-theme-core": "^5.12.1-dev.1",
-    "@progress/kendo-theme-default": "^5.12.1-dev.1",
-    "@progress/kendo-theme-utils": "^5.12.1-dev.1"
+    "@progress/kendo-font-icons": "^1.0.0",
+    "@progress/kendo-theme-core": "^5.12.1-dev.3",
+    "@progress/kendo-theme-default": "^5.12.1-dev.3",
+    "@progress/kendo-theme-utils": "^5.12.1-dev.3"
   },
-  "gitHead": "1810e01c441cc3328d74864b2bfcb82167a3a0c1"
+  "gitHead": "8c82f49a750901799f12f09ca977f65b74ff9577"
 }

package/scss/_variables.scss

@@ -6,6 +6,8 @@ $kendo-enable-rounded: true !default;
 $kendo-enable-shadows: true !default;
 $kendo-enable-gradients: true !default;
 $kendo-enable-transitions: true !default;
+$kendo-enable-focus-contrast: false !default;
+$kendo-enable-typography: false !default;
 
 $kendo-use-input-button-width: false !default;
 $kendo-use-input-spinner-width: false !default;
@@ -13,10 +15,6 @@ $kendo-use-input-spinner-icon-offset: false !default;
 
 
 // Spacing
-$spacer: 1em !default;
-$spacer-x: $spacer !default;
-$spacer-y: $spacer !default;
-
 $kendo-spacing: (
     // sass-lint:disable-block leading-zero
     0: 0,
@@ -55,19 +53,20 @@ $kendo-spacing: (
     24: 96px
 ) !default;
 
-$default-scrollbar-width: 17px !default;
-
 
 // Icons
-$icon-size: 16px !default;
-$icon-size-lg: 32px !default;
-$icon-spacing: k-map-get( $kendo-spacing, 1 ) !default;
-$icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-icon-size: 16px !default;
+
+$kendo-icon-size-xs: calc( #{$kendo-icon-size} * .75 ) !default;
+$kendo-icon-size-sm: calc( #{$kendo-icon-size} * .875 ) !default;
+$kendo-icon-size-md: $kendo-icon-size !default;
+$kendo-icon-size-lg: calc( #{$kendo-icon-size} * 1.25 ) !default;
+$kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
+$kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
+$kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
 
-/// The URL to the icon font that will be used by the theme
-/// The default value of `null` embeds the package font with a `data:` URL
-/// @group icons
-$icon-font-url: null !default;
+$kendo-icon-spacing: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
 
 
 // Metrics
@@ -86,6 +85,15 @@ $kendo-border-radius-sm: k-math-div( $kendo-border-radius, 2 ) !default;
 $kendo-border-radius-md: $kendo-border-radius !default;
 $kendo-border-radius-lg: $kendo-border-radius * 2 !default;
 
+$kendo-border-radii: (
+    DEFAULT: $kendo-border-radius-md,
+    0: 0,
+    sm: $kendo-border-radius-sm,
+    md: $kendo-border-radius-md,
+    lg: $kendo-border-radius-lg,
+    full: 9999px
+) !default;
+
 
 $kendo-zindex-popup: 1 !default;
 $kendo-zindex-window: 2 !default;
@@ -93,7 +101,7 @@ $kendo-zindex-loading: 100 !default;
 
 
 // Color settings
-$dark-theme: false !default;
+$kendo-is-dark-theme: false !default;
 
 // Theme colors
 /// The color that focuses the user attention.
@@ -176,7 +184,7 @@ $kendo-color-light: #ebebeb !default;
 
 /// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
 /// @group color-system
-$kendo-color-inverse: if( $dark-theme, $kendo-color-light, $kendo-color-dark ) !default;
+$kendo-color-inverse: if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) !default;
 
 
 $kendo-theme-colors: (
@@ -193,6 +201,59 @@ $kendo-theme-colors: (
 ) !default;
 
 
+// Typography
+
+/// Base font size across all components.
+/// @group typography
+$kendo-font-size: 14px !default;
+$kendo-font-size-xs: 10px !default;
+$kendo-font-size-sm: 12px !default;
+$kendo-font-size-md: $kendo-font-size !default;
+$kendo-font-size-lg: 16px !default;
+$kendo-font-size-xl: 20px !default;
+
+$kendo-font-sizes: (
+    xs: $kendo-font-size-xs,
+    sm: $kendo-font-size-sm,
+    md: $kendo-font-size-md,
+    lg: $kendo-font-size-lg,
+    xl: $kendo-font-size-xl
+) !default;
+
+/// Font family for text.
+/// @group typography
+$kendo-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !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;
+
+/// Font family across all components.
+/// @group typography
+$kendo-font-family: inherit !default;
+
+/// Line height used along with $kendo-font-size.
+/// @group typography
+$kendo-line-height: k-math-div( 20, 14 ) !default;
+$kendo-line-height-xs: 1 !default;
+$kendo-line-height-sm: 1.25 !default;
+$kendo-line-height-md: $kendo-line-height !default;
+$kendo-line-height-lg: 1.5 !default;
+$kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
+
+// Font weight
+$kendo-font-weight-light: 300 !default;
+$kendo-font-weight-normal: 400 !default;
+$kendo-font-weight-medium: 500 !default;
+$kendo-font-weight-semibold: 600 !default;
+$kendo-font-weight-bold: 700 !default;
+
+// Letter Spacing
+$kendo-letter-spacing: null !default;
+
+
+// Generic styles
+
 // Root styles
 $kendo-body-bg: $kendo-color-white !default;
 $kendo-body-text: #272727 !default;
@@ -203,17 +264,21 @@ $kendo-app-bg: $kendo-body-bg !default;
 $kendo-app-text: $kendo-body-text !default;
 $kendo-app-border: k-try-shade( $kendo-app-bg, 2 ) !default;
 
+// Link
+$kendo-link-text: $kendo-color-primary !default;
+$kendo-link-hover-text: $kendo-color-primary-darker !default;
+
 
 // Components
 
 /// The background of the components' chrome area.
-$base-bg: #f0f0f0 !default;
+$kendo-base-bg: #f0f0f0 !default;
 /// The text color of the components' chrome area.
-$base-text: $kendo-body-text !default;
+$kendo-base-text: $kendo-body-text !default;
 /// The border color of the components' chrome area.
-$base-border: k-try-shade( $base-bg, 2 ) !default;
+$kendo-base-border: k-try-shade( $kendo-base-bg, 2 ) !default;
 /// The gradient background of the components' chrome area.
-$base-gradient: rgba( white, .1 ), rgba( white, 0 ) !default;
+$kendo-base-gradient: rgba( white, .1 ), rgba( white, 0 ) !default;
 
 /// Background color of a component.
 /// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
@@ -226,16 +291,16 @@ $kendo-component-text: $kendo-body-text !default;
 /// Border color of a component.
 /// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
 /// @group component
-$kendo-component-border: $base-border !default;
+$kendo-component-border: $kendo-base-border !default;
 
 /// The background of hovered items.
-$kendo-hover-bg: k-try-shade( $base-bg, 1 ) !default;
+$kendo-hover-bg: k-try-shade( $kendo-base-bg, 1 ) !default;
 /// The text color of hovered items.
-$kendo-hover-text: $base-text !default;
+$kendo-hover-text: $kendo-base-text !default;
 /// The border color of hovered items.
 $kendo-hover-border: k-try-shade( $kendo-hover-bg, 2 ) !default;
 /// The gradient background of hovered items.
-$kendo-hover-gradient: $base-gradient !default;
+$kendo-hover-gradient: $kendo-base-gradient !default;
 
 /// The background of selected items.
 $kendo-selected-bg: $kendo-color-primary !default;
@@ -244,7 +309,7 @@ $kendo-selected-text: k-contrast-legacy( $kendo-selected-bg ) !default;
 /// The border color of selected items.
 $kendo-selected-border: k-try-shade( $kendo-selected-bg, 2 ) !default;
 /// The gradient background of selected items.
-$kendo-selected-gradient: $base-gradient !default;
+$kendo-selected-gradient: $kendo-base-gradient !default;
 
 $kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, 1 ) !default;
 $kendo-selected-hover-text: k-contrast-legacy( $kendo-selected-hover-bg ) !default;
@@ -267,20 +332,16 @@ $kendo-disabled-styling: (
 ) !default;
 
 
-
 // Generic styles
 
 // TODO: refactor once we extract drag drop as separate module
-$font-size: 14px !default;
-$font-family: inherit !default;
-$line-height: k-math-div( 20, 14 ) !default;
 
 
 // Header
-$kendo-component-header-bg: $base-bg !default;
-$kendo-component-header-text: $base-text !default;
-$kendo-component-header-border: $base-border !default;
-$kendo-component-header-gradient: $base-gradient !default;
+$kendo-component-header-bg: $kendo-base-bg !default;
+$kendo-component-header-text: $kendo-base-text !default;
+$kendo-component-header-border: $kendo-base-border !default;
+$kendo-component-header-gradient: $kendo-base-gradient !default;
 
 
 // Validator
@@ -288,9 +349,3 @@ $kendo-invalid-bg: null !default;
 $kendo-invalid-text: $kendo-color-error !default;
 $kendo-invalid-border: $kendo-color-error !default;
 $kendo-invalid-shadow: null !default;
-
-
-// Layout
-$grid-cols: 12 !default;
-$grid-rows: 10 !default;
-$grid-gap: 10px !default;