@progress/kendo-theme-core 8.2.0-dev.0 → 9.0.0-dev.0

package/dist/all.scss

@@ -3049,175 +3049,175 @@ $kendo-palettes: (
 // #endregion
 
 // Config
-$kendo-enable-color-system: false !default;
+$kendo-enable-color-system: true !default;
 
 // Colors
-$_default-colors: (
+$_default_colors: (
     // Misc
-    app-surface: null,
-    on-app-surface: null,
-    subtle: null,
-    surface: null,
-    surface-alt: null,
-    border: null,
-    border-alt: null,
+    app-surface: #ffffff,
+    on-app-surface: #3d3d3d,
+    subtle: #666666,
+    surface: #fafafa,
+    surface-alt: #ffffff,
+    border: rgba(0, 0, 0, 0.08),
+    border-alt: rgba(0, 0, 0, 0.16),
     // Base
-    base-subtle: null,
-    base-subtle-hover: null,
-    base-subtle-active: null,
-    base: null,
-    base-hover: null,
-    base-active: null,
-    base-emphasis: null,
-    base-on-subtle: null,
-    on-base: null,
-    base-on-surface: null,
+    base-subtle: #ebebeb,
+    base-subtle-hover: #e0e0e0,
+    base-subtle-active: #d6d6d6,
+    base: #f5f5f5,
+    base-hover: #ebebeb,
+    base-active: #d6d6d6,
+    base-emphasis: #c2c2c2,
+    base-on-subtle: #3d3d3d,
+    on-base: #3d3d3d,
+    base-on-surface: #3d3d3d,
     // Primary
-    primary-subtle: null,
-    primary-subtle-hover: null,
-    primary-subtle-active: null,
-    primary: null,
-    primary-hover: null,
-    primary-active: null,
-    primary-emphasis: null,
-    primary-on-subtle: null,
-    on-primary: null,
-    primary-on-surface: null,
+    primary-subtle: #ffeceb,
+    primary-subtle-hover: #ffdedb,
+    primary-subtle-active: #ffc8c4,
+    primary: #ff6358,
+    primary-hover: #ea5a51,
+    primary-active: #d45349,
+    primary-emphasis: #ff9d97,
+    primary-on-subtle: #5c201c,
+    on-primary: #ffffff,
+    primary-on-surface: #ff6358,
     // Secondary
-    secondary-subtle: null,
-    secondary-subtle-hover: null,
-    secondary-subtle-active: null,
-    secondary: null,
-    secondary-hover: null,
-    secondary-active: null,
-    secondary-emphasis: null,
-    secondary-on-subtle: null,
-    on-secondary: null,
-    secondary-on-surface: null,
+    secondary-subtle: #fafafa,
+    secondary-subtle-hover: #f5f5f5,
+    secondary-subtle-active: #ebebeb,
+    secondary: #666666,
+    secondary-hover: #525252,
+    secondary-active: #3d3d3d,
+    secondary-emphasis: #e0e0e0,
+    secondary-on-subtle: #141414,
+    on-secondary: #ffffff,
+    secondary-on-surface: #292929,
     // Tertiary
-    tertiary-subtle: null,
-    tertiary-subtle-hover: null,
-    tertiary-subtle-active: null,
-    tertiary: null,
-    tertiary-hover: null,
-    tertiary-active: null,
-    tertiary-emphasis: null,
-    tertiary-on-subtle: null,
-    on-tertiary: null,
-    tertiary-on-surface: null,
+    tertiary-subtle: #d8f1fd,
+    tertiary-subtle-hover: #c5eafc,
+    tertiary-subtle-active: #a3dffb,
+    tertiary: #03a9f4,
+    tertiary-hover: #039ae0,
+    tertiary-active: #028ccb,
+    tertiary-emphasis: #61c9f9,
+    tertiary-on-subtle: #023f5c,
+    on-tertiary: #ffffff,
+    tertiary-on-surface: #028ccb,
     // Info
-    info-subtle: null,
-    info-subtle-hover: null,
-    info-subtle-active: null,
-    info: null,
-    info-hover: null,
-    info-active: null,
-    info-emphasis: null,
-    info-on-subtle: null,
-    on-info: null,
-    info-on-surface: null,
+    info-subtle: #d2e2fb,
+    info-subtle-hover: #bdd4f8,
+    info-subtle-active: #80acf4,
+    info: #0058e9,
+    info-hover: #0052d6,
+    info-active: #004ac2,
+    info-emphasis: #6098f2,
+    info-on-subtle: #002259,
+    on-info: #ffffff,
+    info-on-surface: #004ac2,
     // Success
-    success-subtle: null,
-    success-subtle-hover: null,
-    success-subtle-active: null,
-    success: null,
-    success-hover: null,
-    success-active: null,
-    success-emphasis: null,
-    success-on-subtle: null,
-    on-success: null,
-    success-on-surface: null,
+    success-subtle: #dcf0d3,
+    success-subtle-hover: #cbe9bf,
+    success-subtle-active: #b7e1a5,
+    success: #37b400,
+    success-hover: #32a500,
+    success-active: #2d9600,
+    success-emphasis: #81d15f,
+    success-on-subtle: #1c5a00,
+    on-success: #ffffff,
+    success-on-surface: #2d9600,
     // Warning
-    warning-subtle: null,
-    warning-subtle-hover: null,
-    warning-subtle-active: null,
-    warning: null,
-    warning-hover: null,
-    warning-active: null,
-    warning-emphasis: null,
-    warning-on-subtle: null,
-    on-warning: null,
-    warning-on-surface: null,
+    warning-subtle: #fff4d3,
+    warning-subtle-hover: #ffeebd,
+    warning-subtle-active: #ffe79e,
+    warning: #ffc000,
+    warning-hover: #eaaf00,
+    warning-active: #d49f00,
+    warning-emphasis: #ffd760,
+    warning-on-subtle: #5e4700,
+    on-warning: #3d3d3d,
+    warning-on-surface: #ffc000,
     // Error
-    error-subtle: null,
-    error-subtle-hover: null,
-    error-subtle-active: null,
-    error: null,
-    error-hover: null,
-    error-active: null,
-    error-emphasis: null,
-    error-on-subtle: null,
-    on-error: null,
-    error-on-surface: null,
+    error-subtle: #fcddda,
+    error-subtle-hover: #fbc8c3,
+    error-subtle-active: #f98b80,
+    error: #f31700,
+    error-hover: #df1600,
+    error-active: #ca1400,
+    error-emphasis: #f76f60,
+    error-on-subtle: #7a0c00,
+    on-error: #ffffff,
+    error-on-surface: #ca1400,
     // Light
-    light-subtle: null,
-    light-subtle-hover: null,
-    light-subtle-active: null,
-    light: null,
-    light-hover: null,
-    light-active: null,
-    light-emphasis: null,
-    light-on-subtle: null,
-    on-light: null,
-    light-on-surface: null,
+    light-subtle: #fafafa,
+    light-subtle-hover: #f5f5f5,
+    light-subtle-active: #ebebeb,
+    light: #ebebeb,
+    light-hover: #e0e0e0,
+    light-active: #d6d6d6,
+    light-emphasis: #d6d6d6,
+    light-on-subtle: #141414,
+    on-light: #000000,
+    light-on-surface: #e0e0e0,
     // Dark
-    dark-subtle: null,
-    dark-subtle-hover: null,
-    dark-subtle-active: null,
-    dark: null,
-    dark-hover: null,
-    dark-active: null,
-    dark-emphasis: null,
-    dark-on-subtle: null,
-    on-dark: null,
-    dark-on-surface: null,
+    dark-subtle: #c2c2c2,
+    dark-subtle-hover: #adadad,
+    dark-subtle-active: #999999,
+    dark: #3d3d3d,
+    dark-hover: #292929,
+    dark-active: #1f1f1f,
+    dark-emphasis: #666666,
+    dark-on-subtle: #1f1f1f,
+    on-dark: #ffffff,
+    dark-on-surface: #141414,
     // Inverse
-    inverse-subtle: null,
-    inverse-subtle-hover: null,
-    inverse-subtle-active: null,
-    inverse: null,
-    inverse-hover: null,
-    inverse-active: null,
-    inverse-emphasis: null,
-    inverse-on-subtle: null,
-    on-inverse: null,
-    inverse-on-surface: null,
+    inverse-subtle: #c2c2c2,
+    inverse-subtle-hover: #adadad,
+    inverse-subtle-active: #999999,
+    inverse: #3d3d3d,
+    inverse-hover: #292929,
+    inverse-active: #1f1f1f,
+    inverse-emphasis: #666666,
+    inverse-on-subtle: #1f1f1f,
+    on-inverse: #ffffff,
+    inverse-on-surface: #141414,
     // Series A
-    series-a: null,
-    series-a-bold: null,
-    series-a-bolder: null,
-    series-a-subtle: null,
-    series-a-subtler: null,
+    series-a: #ff6358,
+    series-a-bold: #bf4a42,
+    series-a-bolder: #80322c,
+    series-a-subtle: #ffb1ac,
+    series-a-subtler: #ff8a82,
     // Series B
-    series-b: null,
-    series-b-bold: null,
-    series-b-bolder: null,
-    series-b-subtle: null,
-    series-b-subtler: null,
+    series-b: #ffe162,
+    series-b-bold: #bfa94a,
+    series-b-bolder: #807131,
+    series-b-subtle: #fff0b1,
+    series-b-subtler: #ffe989,
     // Series C
-    series-c: null,
-    series-c-bold: null,
-    series-c-bolder: null,
-    series-c-subtle: null,
-    series-c-subtler: null,
+    series-c: #4cd180,
+    series-c-bold: #399d60,
+    series-c-bolder: #266940,
+    series-c-subtle: #a6e8c0,
+    series-c-subtler: #79dda0,
     // Series D
-    series-d: null,
-    series-d-bold: null,
-    series-d-bolder: null,
-    series-d-subtle: null,
-    series-d-subtler: null,
-    // Series Е
-    series-e: null,
-    series-e-bold: null,
-    series-e-bolder: null,
-    series-e-subtle: null,
-    series-e-subtler: null,
+    series-d: #4b5ffa,
+    series-d-bold: #3847bc,
+    series-d-bolder: #26307d,
+    series-d-subtle: #a5affd,
+    series-d-subtler: #7887fb,
+    // Series E
+    series-e: #ac58ff,
+    series-e-bold: #8142bf,
+    series-e-bolder: #562c80,
+    series-e-subtle: #d6acff,
+    series-e-subtler: #c182ff,
     // Series F
-    series-f: null,
-    series-f-bold: null,
-    series-f-bolder: null,
-    series-f-subtle: null,
-    series-f-subtler: null,
+    series-f: #ff5892,
+    series-f-bold: #bf426e,
+    series-f-bolder: #802c49,
+    series-f-subtle: #ffacc9,
+    series-f-subtler: #ff82ae,
 ) !default;
 
 /// The global default Colors map.
@@ -3629,9 +3629,103 @@ $_kendo-imported-modules: () !default;
 // #region @import "./module-system/index.import.scss"; -> scss/module-system/index.import.scss
 // #region @import "./_components.scss"; -> scss/module-system/_components.scss
 $kendo-components: (
-    // Typography and utils
-    "typography",
+    // Utils
     "utils",
+    "utils-accessibility-screen-readers",
+    "utils-background-clip",
+    "utils-background-color",
+    "utils-background-position",
+    "utils-background-size",
+    "utils-border-color",
+    "utils-border-radius",
+    "utils-border-style",
+    "utils-border-width",
+    "utils-outline-color",
+    "utils-outline-offset",
+    "utils-outline-style",
+    "utils-outline-width",
+    "utils-effects-opacity",
+    "utils-elevation",
+    "utils-filter-backdrop",
+    "utils-flex-grid-align-content",
+    "utils-flex-grid-align-items",
+    "utils-flex-grid-align-self",
+    "utils-flex-grid-flex-basis",
+    "utils-flex-grid-flex-direction",
+    "utils-flex-grid-flex-grow",
+    "utils-flex-grid-flex-shrink",
+    "utils-flex-grid-flex-wrap",
+    "utils-flex-grid-flex",
+    "utils-flex-grid-gap",
+    "utils-flex-grid-grid-auto-columns",
+    "utils-flex-grid-grid-auto-flow",
+    "utils-flex-grid-grid-auto-rows",
+    "utils-flex-grid-grid-column-start-end",
+    "utils-flex-grid-grid-row-start-end",
+    "utils-flex-grid-grid-template-columns",
+    "utils-flex-grid-grid-template-rows",
+    "utils-flex-grid-justify-content",
+    "utils-flex-grid-justify-items",
+    "utils-flex-grid-justify-self",
+    "utils-flex-grid-order",
+    "utils-flex-grid-place-content",
+    "utils-flex-grid-place-items",
+    "utils-flex-grid-place-self",
+    "utils-interactivity-accent-color",
+    "utils-interactivity-appearance",
+    "utils-interactivity-caret-color",
+    "utils-interactivity-cursor",
+    "utils-interactivity-pointer-events",
+    "utils-interactivity-resize",
+    "utils-interactivity-scroll",
+    "utils-interactivity-touch-action",
+    "utils-interactivity-user-select",
+    "utils-interactivity-will-change",
+    "utils-layout-aspect-ratio",
+    "utils-layout-box-sizing",
+    "utils-layout-clear",
+    "utils-layout-columns",
+    "utils-layout-display",
+    "utils-layout-float",
+    "utils-layout-object-fit",
+    "utils-layout-object-position",
+    "utils-layout-overflow",
+    "utils-layout-placement",
+    "utils-layout-position",
+    "utils-layout-visibility",
+    "utils-layout-zindex",
+    "utils-sizing-height",
+    "utils-sizing-width",
+    "utils-spacing-margin",
+    "utils-spacing-padding",
+    "utils-spacing-space-between",
+    "utils-svg-fill",
+    "utils-svg-stroke",
+    "utils-table-border-collapse",
+    "utils-table-table-layout",
+    "utils-transform-flip",
+    "utils-transform-origin",
+    "utils-transform-rotate",
+    "utils-transform-scale",
+    "utils-transform-skew",
+    "utils-transform-translate",
+    "utils-typography-font-family",
+    "utils-typography-font-size",
+    "utils-typography-font-style",
+    "utils-typography-font-weight",
+    "utils-typography-letter-spacing",
+    "utils-typography-line-height",
+    "utils-typography-list-style",
+    "utils-typography-text-align",
+    "utils-typography-text-color",
+    "utils-typography-text-decoration",
+    "utils-typography-text-overflow",
+    "utils-typography-text-transform",
+    "utils-typography-vertical-align",
+    "utils-typography-white-space",
+
+    // Typography
+    "typography",
     "draggable",
 
     // Generic content
@@ -4259,6 +4353,98 @@ $_kendo-dependencies: (
         "toolbar"
     ),
     utils: (),
+    utils-accessibility-screen-readers: (),
+    utils-background-clip: (),
+    utils-background-color: (),
+    utils-background-position: (),
+    utils-background-size: (),
+    utils-border-color: (),
+    utils-border-radius: (),
+    utils-border-style: (),
+    utils-border-width: (),
+    utils-outline-color: (),
+    utils-outline-offset: (),
+    utils-outline-style: (),
+    utils-outline-width: (),
+    utils-effects-opacity: (),
+    utils-elevation: (),
+    utils-filter-backdrop: (),
+    utils-flex-grid-align-content: (),
+    utils-flex-grid-align-items: (),
+    utils-flex-grid-align-self: (),
+    utils-flex-grid-flex-basis: (),
+    utils-flex-grid-flex-direction: (),
+    utils-flex-grid-flex-grow: (),
+    utils-flex-grid-flex-shrink: (),
+    utils-flex-grid-flex-wrap: (),
+    utils-flex-grid-flex: (),
+    utils-flex-grid-gap: (),
+    utils-flex-grid-grid-auto-columns: (),
+    utils-flex-grid-grid-auto-flow: (),
+    utils-flex-grid-grid-auto-rows: (),
+    utils-flex-grid-grid-column-start-end: (),
+    utils-flex-grid-grid-row-start-end: (),
+    utils-flex-grid-grid-template-columns: (),
+    utils-flex-grid-grid-template-rows: (),
+    utils-flex-grid-justify-content: (),
+    utils-flex-grid-justify-items: (),
+    utils-flex-grid-justify-self: (),
+    utils-flex-grid-order: (),
+    utils-flex-grid-place-content: (),
+    utils-flex-grid-place-items: (),
+    utils-flex-grid-place-self: (),
+    utils-interactivity-accent-color: (),
+    utils-interactivity-appearance: (),
+    utils-interactivity-caret-color: (),
+    utils-interactivity-cursor: (),
+    utils-interactivity-pointer-events: (),
+    utils-interactivity-resize: (),
+    utils-interactivity-scroll: (),
+    utils-interactivity-touch-action: (),
+    utils-interactivity-user-select: (),
+    utils-interactivity-will-change: (),
+    utils-layout-aspect-ratio: (),
+    utils-layout-box-sizing: (),
+    utils-layout-clear: (),
+    utils-layout-columns: (),
+    utils-layout-display: (),
+    utils-layout-float: (),
+    utils-layout-object-fit: (),
+    utils-layout-object-position: (),
+    utils-layout-overflow: (),
+    utils-layout-placement: (),
+    utils-layout-position: (),
+    utils-layout-visibility: (),
+    utils-layout-zindex: (),
+    utils-sizing-height: (),
+    utils-sizing-width: (),
+    utils-spacing-margin: (),
+    utils-spacing-padding: (),
+    utils-spacing-space-between: (),
+    utils-svg-fill: (),
+    utils-svg-stroke: (),
+    utils-table-border-collapse: (),
+    utils-table-table-layout: (),
+    utils-transform-flip: (),
+    utils-transform-origin: (),
+    utils-transform-rotate: (),
+    utils-transform-scale: (),
+    utils-transform-skew: (),
+    utils-transform-translate: (),
+    utils-typography-font-family: (),
+    utils-typography-font-size: (),
+    utils-typography-font-style: (),
+    utils-typography-font-weight: (),
+    utils-typography-letter-spacing: (),
+    utils-typography-line-height: (),
+    utils-typography-list-style: (),
+    utils-typography-text-align: (),
+    utils-typography-text-color: (),
+    utils-typography-text-decoration: (),
+    utils-typography-text-overflow: (),
+    utils-typography-text-transform: (),
+    utils-typography-vertical-align: (),
+    utils-typography-white-space: (),
     validator: (
         "tooltip"
     ),
@@ -5524,6 +5710,69 @@ $_imported: () !default;
     }
 }
 
+// #endregion
+// #region @import "./_utils-components.scss"; -> scss/styles/_utils-components.scss
+$kendo-prefix: k- !default;
+
+@mixin kendo-core--styles--utils-components() {
+    // Legacy aliases
+    .#{$kendo-prefix}top-start,
+    .#{$kendo-prefix}pos-top-start {
+        top: 0;
+        inset-inline-start: 0;
+    }
+
+    .#{$kendo-prefix}top-end,
+    .#{$kendo-prefix}pos-top-end {
+        top: 0;
+        inset-inline-end: 0;
+    }
+
+    .#{$kendo-prefix}bottom-start,
+    .#{$kendo-prefix}pos-bottom-start {
+        bottom: 0;
+        inset-inline-start: 0;
+    }
+
+    .#{$kendo-prefix}bottom-end,
+    .#{$kendo-prefix}pos-bottom-end {
+        bottom: 0;
+        inset-inline-end: 0;
+    }
+
+    .#{$kendo-prefix}top-center,
+    .#{$kendo-prefix}pos-top-center {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .#{$kendo-prefix}middle-left,
+    .#{$kendo-prefix}middle-start,
+    .#{$kendo-prefix}pos-middle-start {
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}middle-center {
+        top: 50%;
+        left: 50%;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}middle-right,
+    .#{$kendo-prefix}middle-end,
+    .#{$kendo-prefix}pos-middle-end {
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}bottom-center,
+    .#{$kendo-prefix}pos-bottom-center {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+
 // #endregion
 
 @mixin kendo-core--styles() {
@@ -5537,6 +5786,7 @@ $_imported: () !default;
     @include kendo-core--styles--selection();
     @include kendo-core--styles--scrollbar();
     @include kendo-core--styles--resizing();
+    @include kendo-core--styles--utils-components();
 }
 
 // #endregion
@@ -6012,6 +6262,14 @@ $kendo-border-radii: k-map-merge($_default-border-radii, $kendo-border-radii);
             --kendo-border-radius-#{$key}: #{$value};
         }
     }
+
+    // Generate k-rounded-* classes
+    // which are part of the components rendering.
+    @each $key, $val in $kendo-border-radii {
+        .k-rounded-#{$key} {
+            border-radius: k-border-radius($key);
+        }
+    }
 }
 
 // #endregion