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

package/dist/meta/variables.json

@@ -199,77 +199,233 @@
         "type": "Map",
         "value": "(1: (0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)), 2: (0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12)), 3: (0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12)), 4: (0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12)), 5: (0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12)), 6: (0 12px 14px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12)), 7: (0 14px 16px rgba(0, 0, 0, 0.24), 0 4px 16px rgba(0, 0, 0, 0.12)), 8: (0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12)), 9: (0 32px 34px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(0, 0, 0, 0.12)))"
     },
-    "kendo-enable-shadows": {
-        "type": "Bool",
-        "value": "true"
+    "kendo-font-size": {
+        "type": "Number",
+        "value": "0.875rem"
     },
-    "kendo-enable-rounded": {
-        "type": "Bool",
-        "value": "true"
+    "kendo-font-size-xxs": {
+        "type": "Number",
+        "value": "0.5rem"
     },
-    "kendo-enable-gradients": {
-        "type": "Bool",
-        "value": "true"
+    "kendo-font-size-xs": {
+        "type": "Number",
+        "value": "0.625rem"
     },
-    "kendo-enable-transitions": {
-        "type": "Bool",
-        "value": "true"
+    "kendo-font-size-sm": {
+        "type": "Number",
+        "value": "0.75rem"
     },
-    "kendo-spacing": {
-        "type": "Map",
-        "value": "(0: 0, 1px: 1px, 0.5: 0.125rem, 1: 0.25rem, 1.5: 0.375rem, 2: 0.5rem, 2.5: 0.625rem, 3: 0.75rem, 3.5: 0.875rem, 4: 1rem, 4.5: 1.125rem, 5: 1.25rem, 5.5: 1.375rem, 6: 1.5rem, 6.5: 1.625rem, 7: 1.75rem, 7.5: 1.875rem, 8: 2rem, 9: 2.25rem, 10: 2.5rem, 11: 2.75rem, 12: 3rem, 13: 3.25rem, 14: 3.5rem, 15: 3.75rem, 16: 4rem, 17: 4.25rem, 18: 4.5rem, 19: 4.75rem, 20: 5rem, 21: 5.25rem, 22: 5.5rem, 23: 5.75rem, 24: 6rem)"
+    "kendo-font-size-md": {
+        "type": "Number",
+        "value": "0.875rem"
     },
-    "kendo-border-radius": {
+    "kendo-font-size-lg": {
         "type": "Number",
-        "value": "0.125rem"
+        "value": "1rem"
     },
-    "kendo-border-radius-sm": {
+    "kendo-font-size-xl": {
         "type": "Number",
-        "value": "0.0625rem"
+        "value": "1.25rem"
     },
-    "kendo-border-radius-md": {
+    "kendo-line-height": {
         "type": "Number",
-        "value": "0.125rem"
+        "value": "1.4285714286"
     },
-    "kendo-border-radius-lg": {
+    "kendo-line-height-xs": {
         "type": "Number",
-        "value": "0.25rem"
+        "value": "1"
     },
-    "kendo-border-radii": {
+    "kendo-line-height-sm": {
+        "type": "Number",
+        "value": "1.25"
+    },
+    "kendo-line-height-md": {
+        "type": "Number",
+        "value": "1.4285714286"
+    },
+    "kendo-line-height-lg": {
+        "type": "Number",
+        "value": "1.5"
+    },
+    "kendo-line-height-em": {
+        "type": "Calculation",
+        "value": "calc(1.4285714286 * 1em)"
+    },
+    "kendo-font-weight": {
+        "type": "Number",
+        "value": "400"
+    },
+    "kendo-font-weight-thin": {
+        "type": "Number",
+        "value": "100"
+    },
+    "kendo-font-weight-extra-light": {
+        "type": "Number",
+        "value": "200"
+    },
+    "kendo-font-weight-light": {
+        "type": "Number",
+        "value": "300"
+    },
+    "kendo-font-weight-normal": {
+        "type": "Number",
+        "value": "400"
+    },
+    "kendo-font-weight-medium": {
+        "type": "Number",
+        "value": "500"
+    },
+    "kendo-font-weight-semibold": {
+        "type": "Number",
+        "value": "600"
+    },
+    "kendo-font-weight-bold": {
+        "type": "Number",
+        "value": "700"
+    },
+    "kendo-font-weight-extra-bold": {
+        "type": "Number",
+        "value": "800"
+    },
+    "kendo-font-weight-black": {
+        "type": "Number",
+        "value": "900"
+    },
+    "kendo-letter-spacing": {
+        "type": "Null",
+        "value": "null"
+    },
+    "kendo-letter-spacing-tightest": {
+        "type": "Number",
+        "value": "-0.15px"
+    },
+    "kendo-letter-spacing-tighter": {
+        "type": "Number",
+        "value": "-0.1px"
+    },
+    "kendo-letter-spacing-tight": {
+        "type": "Number",
+        "value": "-0.5px"
+    },
+    "kendo-letter-spacing-normal": {
+        "type": "Number",
+        "value": "0px"
+    },
+    "kendo-letter-spacing-wide": {
+        "type": "Number",
+        "value": "0.5px"
+    },
+    "kendo-letter-spacing-wider": {
+        "type": "Number",
+        "value": "0.1px"
+    },
+    "kendo-letter-spacing-widest": {
+        "type": "Number",
+        "value": "0.15px"
+    },
+    "kendo-font-family-sans": {
+        "type": "List",
+        "value": "Arial, Verdana, Tahoma, \"Trebuchet MS\", Helvetica, Impact, Gill Sans"
+    },
+    "kendo-font-family-serif": {
+        "type": "List",
+        "value": "\"Times New Roman\", Georgia, Garamond, Palatino, Baskerville"
+    },
+    "kendo-font-family-sans-serif": {
+        "type": "List",
+        "value": "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\""
+    },
+    "kendo-font-family-monospace": {
+        "type": "List",
+        "value": "SFMono-Regular, Menlo, Monaco, Consolas, \"Roboto Mono\", \"Ubuntu Mono\", \"Lucida Console\", \"Courier New\", monospace"
+    },
+    "kendo-font-family": {
+        "type": "String",
+        "value": "inherit"
+    },
+    "kendo-font-sizes": {
+        "type": "Map",
+        "value": "(xxs: 0.5rem, xs: 0.625rem, sm: 0.75rem, md: 0.875rem, lg: 1rem, xl: 1.25rem)"
+    },
+    "kendo-line-heights": {
+        "type": "Map",
+        "value": "(xs: 1, sm: 1.25, md: 1.4285714286, lg: 1.5)"
+    },
+    "kendo-font-weights": {
+        "type": "Map",
+        "value": "(thin: 100, extra-light: 200, light: 300, normal: 400, medium: 500, semibold: 600, bold: 700)"
+    },
+    "kendo-letter-spacings": {
         "type": "Map",
-        "value": "(DEFAULT: var(--kendo-border-radius-md, 0.125rem), 0: 0, sm: var(--kendo-border-radius-sm, 0.0625rem), md: var(--kendo-border-radius-md, 0.125rem), lg: var(--kendo-border-radius-lg, 0.25rem), none: 0, full: 9999px)"
+        "value": "(tightest: -0.15px, tighter: -0.1px, tight: -0.5px, normal: 0px, wide: 0.5px, wider: 0.1px, widest: 0.15px)"
     },
-    "kendo-padding-x": {
+    "kendo-font-families": {
+        "type": "Map",
+        "value": "(sans: (Arial, Verdana, Tahoma, \"Trebuchet MS\", Helvetica, Impact, Gill Sans), serif: (\"Times New Roman\", Georgia, Garamond, Palatino, Baskerville), 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\"), monospace: (SFMono-Regular, Menlo, Monaco, Consolas, \"Roboto Mono\", \"Ubuntu Mono\", \"Lucida Console\", \"Courier New\", monospace))"
+    },
+    "kendo-spacing": {
+        "type": "Map",
+        "value": "(0: 0px, 1px: 1px, 0.5: 0.125rem, 1: 0.25rem, 1.5: 0.375rem, 2: 0.5rem, 2.5: 0.625rem, 3: 0.75rem, 3.5: 0.875rem, 4: 1rem, 4.5: 1.125rem, 5: 1.25rem, 5.5: 1.375rem, 6: 1.5rem, 6.5: 1.625rem, 7: 1.75rem, 7.5: 1.875rem, 8: 2rem, 9: 2.25rem, 10: 2.5rem, 11: 2.75rem, 12: 3rem, 13: 3.25rem, 14: 3.5rem, 15: 3.75rem, 16: 4rem, 17: 4.25rem, 18: 4.5rem, 19: 4.75rem, 20: 5rem, 21: 5.25rem, 22: 5.5rem, 23: 5.75rem, 24: 6rem, 25: 7rem, 26: 8rem, 27: 9rem, 28: 10rem, 29: 11rem, 30: 12rem)"
+    },
+    "kendo-sizing": {
+        "type": "Map",
+        "value": "(0: 0px, 1px: 1px, 0.5: 0.125rem, 1: 0.25rem, 1.5: 0.375rem, 2: 0.5rem, 2.5: 0.625rem, 3: 0.75rem, 3.5: 0.875rem, 4: 1rem, 4.5: 1.125rem, 5: 1.25rem, 5.5: 1.375rem, 6: 1.5rem, 6.5: 1.625rem, 7: 1.75rem, 7.5: 1.875rem, 8: 2rem, 9: 2.25rem, 10: 2.5rem, 11: 2.75rem, 12: 3rem, 13: 3.25rem, 14: 3.5rem, 15: 3.75rem, 16: 4rem, 17: 4.25rem, 18: 4.5rem, 19: 4.75rem, 20: 5rem, 21: 5.25rem, 22: 5.5rem, 23: 5.75rem, 24: 6rem, 25: 7rem, 26: 8rem, 27: 9rem, 28: 10rem, 29: 11rem, 30: 12rem, \"auto\": auto, \"1/2\": 50%, \"1/3\": 33.333333%, \"2/3\": 66.666667%, \"1/4\": 25%, \"2/4\": 50%, \"3/4\": 75%, \"1/5\": 20%, \"2/5\": 40%, \"3/5\": 60%, \"4/5\": 80%, \"1/6\": 16.666667%, \"2/6\": 33.333333%, \"3/6\": 50%, \"4/6\": 66.666667%, \"5/6\": 83.333333%, \"1/12\": 8.333333%, \"2/12\": 16.666667%, \"3/12\": 25%, \"4/12\": 33.333333%, \"5/12\": 41.666667%, \"6/12\": 50%, \"7/12\": 58.333333%, \"8/12\": 66.666667%, \"9/12\": 75%, \"10/12\": 83.333333%, \"11/12\": 91.666667%, \"full\": 100%, \"min\": min-content, \"max\": max-content, \"fit\": fit-content)"
+    },
+    "kendo-border-radius-none": {
         "type": "Number",
-        "value": "0.5rem"
+        "value": "0px"
     },
-    "kendo-padding-y": {
+    "kendo-border-radius-xs": {
         "type": "Number",
-        "value": "0.25rem"
+        "value": "1px"
+    },
+    "kendo-border-radius-sm": {
+        "type": "Number",
+        "value": "0.125rem"
     },
-    "kendo-padding-sm-x": {
+    "kendo-border-radius-md": {
         "type": "Number",
         "value": "0.25rem"
     },
-    "kendo-padding-sm-y": {
+    "kendo-border-radius-lg": {
         "type": "Number",
-        "value": "0.125rem"
+        "value": "0.375rem"
     },
-    "kendo-padding-md-x": {
+    "kendo-border-radius-xl": {
         "type": "Number",
         "value": "0.5rem"
     },
-    "kendo-padding-md-y": {
+    "kendo-border-radius-xxl": {
         "type": "Number",
-        "value": "0.25rem"
+        "value": "0.75rem"
     },
-    "kendo-padding-lg-x": {
+    "kendo-border-radius-xxxl": {
         "type": "Number",
-        "value": "0.75rem"
+        "value": "1rem"
     },
-    "kendo-padding-lg-y": {
+    "kendo-border-radius-full": {
         "type": "Number",
-        "value": "0.375rem"
+        "value": "9999px"
+    },
+    "kendo-border-radii": {
+        "type": "Map",
+        "value": "(none: 0px, xs: 1px, sm: 0.125rem, md: 0.25rem, lg: 0.375rem, xl: 0.5rem, xxl: 0.75rem, xxxl: 1rem, full: 9999px)"
+    },
+    "kendo-enable-shadows": {
+        "type": "Bool",
+        "value": "true"
+    },
+    "kendo-enable-rounded": {
+        "type": "Bool",
+        "value": "true"
+    },
+    "kendo-enable-gradients": {
+        "type": "Bool",
+        "value": "true"
+    },
+    "kendo-enable-transitions": {
+        "type": "Bool",
+        "value": "true"
     },
     "equilateral-index": {
         "type": "Number",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "8.0.0-dev.0",
+  "version": "8.0.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -44,5 +44,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "82fa9745206aad68ed9f5a6d8c11d84dbb70c20c"
+  "gitHead": "6d8ad8ad9108d3a9ec0aaadd488571a639a412a5"
 }

package/scss/_variables.scss

@@ -6,69 +6,6 @@ $kendo-enable-rounded: true !default;
 $kendo-enable-gradients: true !default;
 $kendo-enable-transitions: true !default;
 
-$kendo-spacing: (
-    0: 0,
-    1px: 1px,
-    0.5: 0.125rem,
-    1: 0.25rem,
-    1.5: 0.375rem,
-    2: 0.5rem,
-    2.5: 0.625rem,
-    3: 0.75rem,
-    3.5: 0.875rem,
-    4: 1rem,
-    4.5: 1.125rem,
-    5: 1.25rem,
-    5.5: 1.375rem,
-    6: 1.5rem,
-    6.5: 1.625rem,
-    7: 1.75rem,
-    7.5: 1.875rem,
-    8: 2rem,
-    9: 2.25rem,
-    10: 2.5rem,
-    11: 2.75rem,
-    12: 3rem,
-    13: 3.25rem,
-    14: 3.5rem,
-    15: 3.75rem,
-    16: 4rem,
-    17: 4.25rem,
-    18: 4.5rem,
-    19: 4.75rem,
-    20: 5rem,
-    21: 5.25rem,
-    22: 5.5rem,
-    23: 5.75rem,
-    24: 6rem,
-) !default;
-
-/// Border radius for all components.
-$kendo-border-radius: k-map-get($kendo-spacing, 0.5) !default;
-$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: var(--kendo-border-radius-md, $kendo-border-radius-md),
-    0: 0,
-    sm: var(--kendo-border-radius-sm, $kendo-border-radius-sm),
-    md: var(--kendo-border-radius-md, $kendo-border-radius-md),
-    lg: var(--kendo-border-radius-lg, $kendo-border-radius-lg),
-    none: 0,
-    full: 9999px,
-) !default;
-
-// Metrics
-$kendo-padding-x: k-map-get($kendo-spacing, 2) !default;
-$kendo-padding-y: k-map-get($kendo-spacing, 1) !default;
-$kendo-padding-sm-x: k-map-get($kendo-spacing, 1) !default;
-$kendo-padding-sm-y: k-map-get($kendo-spacing, 0.5) !default;
-$kendo-padding-md-x: k-map-get($kendo-spacing, 2) !default;
-$kendo-padding-md-y: k-map-get($kendo-spacing, 1) !default;
-$kendo-padding-lg-x: k-map-get($kendo-spacing, 3) !default;
-$kendo-padding-lg-y: k-map-get($kendo-spacing, 1.5) !default;
-
 // Equilateral triangle variables
 // stylelint-disable number-max-precision
 $equilateral-index: 1.7320508076 !default;
@@ -77,4 +14,4 @@ $equilateral-height: 0.8660254038 !default;
 
 // Loading
 $kendo-loading-opacity: .3 !default;
-$kendo-zindex-loading: 100 !default;
+$kendo-zindex-loading: 100 !default;

package/scss/border-radii/index.import.scss

@@ -0,0 +1,41 @@
+$kendo-border-radius-none: k-map-get($kendo-spacing, 0) !default;
+$kendo-border-radius-xs: k-map-get($kendo-spacing, 1px) !default;
+$kendo-border-radius-sm: k-map-get($kendo-spacing, 0.5) !default;
+$kendo-border-radius-md: k-map-get($kendo-spacing, 1) !default;
+$kendo-border-radius-lg: k-map-get($kendo-spacing, 1.5) !default;
+$kendo-border-radius-xl: k-map-get($kendo-spacing, 2) !default;
+$kendo-border-radius-xxl: k-map-get($kendo-spacing, 3) !default;
+$kendo-border-radius-xxxl: k-map-get($kendo-spacing, 4) !default;
+$kendo-border-radius-full: 9999px !default;
+
+
+$_default-border-radii: (
+    none: $kendo-border-radius-none,
+    xs: $kendo-border-radius-xs,
+    sm: $kendo-border-radius-sm,
+    md: $kendo-border-radius-md,
+    lg: $kendo-border-radius-lg,
+    xl: $kendo-border-radius-xl,
+    xxl: $kendo-border-radius-xxl,
+    xxxl: $kendo-border-radius-xxxl,
+    full: $kendo-border-radius-full
+
+) !default;
+
+$kendo-border-radii: $_default-border-radii !default;
+
+$kendo-border-radii: k-map-merge($_default-border-radii, $kendo-border-radii);
+
+
+@function k-border-radius($key) {
+    $_border-radius: k-map-get($kendo-border-radii, $key);
+    @return var(--kendo-border-radius-#{$key}, $_border-radius);
+}
+
+@mixin kendo-border-radius--styles() {
+    :root {
+        @each $key, $value in $kendo-border-radii {
+            --kendo-border-radius-#{$key}: #{$value};
+        }
+    }
+}

package/scss/index.import.scss

@@ -4,4 +4,7 @@
 @import "./module-system/index.import.scss";
 @import "./styles/index.import.scss";
 @import "./elevation/index.import.scss";
+@import "./typography/index.import.scss";
+@import "./spacing/index.import.scss";
+@import "./border-radii/index.import.scss";
 @import "./_variables.scss";

package/scss/mixins/index.import.scss

@@ -7,7 +7,6 @@
 @import "./_gradient.scss";
 @import "./_hide-scrollbar.scss";
 @import "./_import-once.scss";
-@import "./_typography.scss";
 
 @mixin background-image( $background-image: null ) {
     @if $background-image {

package/scss/spacing/index.import.scss

@@ -0,0 +1,101 @@
+@import "../functions/index.import.scss";
+
+$_default-spacing: (
+    0: 0px,
+    1px: 1px,
+    0.5: .125rem,
+    1: .25rem,
+    1.5: .375rem,
+    2: .5rem,
+    2.5: .625rem,
+    3: .75rem,
+    3.5: .875rem,
+    4: 1rem,
+    4.5: 1.125rem,
+    5: 1.25rem,
+    5.5: 1.375rem,
+    6: 1.5rem,
+    6.5: 1.625rem,
+    7: 1.75rem,
+    7.5: 1.875rem,
+    8: 2rem,
+    9: 2.25rem,
+    10: 2.5rem,
+    11: 2.75rem,
+    12: 3rem,
+    13: 3.25rem,
+    14: 3.5rem,
+    15: 3.75rem,
+    16: 4rem,
+    17: 4.25rem,
+    18: 4.5rem,
+    19: 4.75rem,
+    20: 5rem,
+    21: 5.25rem,
+    22: 5.5rem,
+    23: 5.75rem,
+    24: 6rem,
+    25: 7rem,
+    26: 8rem,
+    27: 9rem,
+    28: 10rem,
+    29: 11rem,
+    30: 12rem
+) !default;
+
+/// The global default Spacing map.
+/// @group spacing
+$kendo-spacing: $_default-spacing !default;
+
+$kendo-spacing: k-map-merge($_default-spacing, $kendo-spacing);
+
+
+@function k-spacing($step) {
+    $spacing: k-map-get($kendo-spacing, $step);
+    $_step: k-escape-class-name( $step );
+    @return var(--kendo-spacing-#{$_step}, #{$spacing});
+}
+
+// Generate a CSS variable for each value in the Spacing map
+@mixin kendo-spacing--styles() {
+    :root {
+        @each $step, $spacing in $kendo-spacing {
+            $_step: k-escape-class-name( $step );
+            --kendo-spacing-#{$_step}: #{$spacing};
+        }
+    }
+}
+
+$kendo-sizing: k-map-merge( $kendo-spacing, (
+    "auto": auto,
+    "1/2": 50%,
+    "1/3": 33.333333%,
+    "2/3": 66.666667%,
+    "1/4": 25%,
+    "2/4": 50%,
+    "3/4": 75%,
+    "1/5": 20%,
+    "2/5": 40%,
+    "3/5": 60%,
+    "4/5": 80%,
+    "1/6": 16.666667%,
+    "2/6": 33.333333%,
+    "3/6": 50%,
+    "4/6": 66.666667%,
+    "5/6": 83.333333%,
+    "1/12": 8.333333%,
+    "2/12": 16.666667%,
+    "3/12": 25%,
+    "4/12": 33.333333%,
+    "5/12": 41.666667%,
+    "6/12": 50%,
+    "7/12": 58.333333%,
+    "8/12": 66.666667%,
+    "9/12": 75%,
+    "10/12": 83.333333%,
+    "11/12": 91.666667%,
+    "full": 100%,
+    "min": min-content,
+    "max": max-content,
+    "fit": fit-content
+)) !default;

package/scss/styles/_base.scss

@@ -16,7 +16,7 @@
 
     // Horizontal line
     .k-hr {
-        margin-block: k-map-get( $kendo-spacing, 4 );
+        margin-block: k-spacing(4);
         padding: 0;
         height: 0;
         border-width: 1px 0 0;
@@ -130,4 +130,4 @@
         inset-block-start: 0;
         inset-inline-end: 0;
     }
-}
+}

package/scss/styles/_layout.scss

@@ -1,19 +1,4 @@
 @mixin kendo-core--styles--layout() {
-    .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 ),
-        );
-        @include fill(
-            var( --kendo-body-text, initial ),
-            var( --kendo-body-bg, initial )
-        );
-        margin: 0;
-    }
-
     // Basic layout
     .k-hstack {
         display: flex;