@progress/kendo-theme-core 10.2.0-dev.1 → 10.2.0-dev.3

package/dist/meta/variables.json

@@ -35,6 +35,10 @@
         "type": "Number",
         "value": "4.5"
     },
+    "kendo-enable-typography": {
+        "type": "Bool",
+        "value": "false"
+    },
     "equilateral-index": {
         "type": "Number",
         "value": "1.7320508076"
@@ -884,5 +888,9 @@
             "xxxl": "1rem",
             "full": "9999px"
         }
+    },
+    "kendo-transition": {
+        "type": "List",
+        "value": "(color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out)"
     }
 }

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": "10.2.0-dev.1",
+  "version": "10.2.0-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -45,5 +45,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "d0b68833bec04a91798d4f90ad41a819401b13ce"
+  "gitHead": "082662582bfa2df1e3ee8bbeab7d395ec47d944f"
 }

package/scss/_variables.scss

@@ -8,7 +8,7 @@ $kendo-enable-transitions: true !default;
 $kendo-nested-disabled: true !default;
 $kendo-enable-focus-contrast: false !default;
 $wcag-min-contrast-ratio: 4.5 !default;
-
+$kendo-enable-typography: false !default;
 // Equilateral triangle variables
 // stylelint-disable number-max-precision
 $equilateral-index: 1.7320508076 !default;

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

@@ -0,0 +1,150 @@
+// Primary colors
+$kendo-color-primary: null !default;
+$kendo-color-primary-lighter: null !default;
+$kendo-color-primary-darker: null !default;
+$kendo-color-primary-contrast: null !default;
+
+// Secondary colors
+$kendo-color-secondary: null !default;
+$kendo-color-secondary-lighter: null !default;
+$kendo-color-secondary-darker: null !default;
+$kendo-color-secondary-contrast: null !default;
+
+// Tertiary colors
+$kendo-color-tertiary: null !default;
+$kendo-color-tertiary-lighter: null !default;
+$kendo-color-tertiary-darker: null !default;
+$kendo-color-tertiary-contrast: null !default;
+
+// Info colors
+$kendo-color-info: null !default;
+$kendo-color-info-lighter: null !default;
+$kendo-color-info-darker: null !default;
+
+// Success colors
+$kendo-color-success: null !default;
+$kendo-color-success-lighter: null !default;
+$kendo-color-success-darker: null !default;
+
+// Warning colors
+$kendo-color-warning: null !default;
+$kendo-color-warning-lighter: null !default;
+$kendo-color-warning-darker: null !default;
+
+// Error colors
+$kendo-color-error: null !default;
+$kendo-color-error-lighter: null !default;
+$kendo-color-error-darker: null !default;
+
+
+$kendo-color-dark: null !default;
+
+// Light colors
+$kendo-color-light: null !default;
+
+// Inverse colors
+$kendo-color-inverse: null !default;
+
+// Body styles
+$kendo-body-bg: null !default;
+$kendo-body-text: null !default;
+
+// App styles
+$kendo-app-bg: null !default;
+$kendo-app-text: $kendo-body-text !default;
+$kendo-app-border: null !default;
+
+// Component styles
+$kendo-component-bg: null !default;
+$kendo-component-text: $kendo-body-text  !default;
+$kendo-component-border: null !default;
+
+$kendo-base-bg: null !default;
+$kendo-base-text: $kendo-body-text !default;
+$kendo-base-border: $kendo-app-border !default;
+$kendo-base-gradient: null !default;
+
+// States styles
+$kendo-hover-bg: null !default;
+$kendo-hover-text: $kendo-base-text !default;
+$kendo-hover-border: $kendo-base-border !default;
+$kendo-hover-gradient: $kendo-base-gradient !default;
+
+$kendo-selected-bg: $kendo-color-primary !default;
+$kendo-selected-text: $kendo-color-primary-contrast !default;
+$kendo-selected-border: $kendo-base-border !default;
+$kendo-selected-gradient: $kendo-base-gradient !default;
+
+$kendo-selected-hover-bg: null !default;
+$kendo-selected-hover-text: $kendo-selected-text !default;
+$kendo-selected-hover-border: $kendo-base-border !default;
+$kendo-selected-hover-gradient: $kendo-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: null !default;
+
+$kendo-focus-outline: null !default;
+
+$kendo-subtle-text: null !default;
+
+// Link
+$kendo-link-text: $kendo-color-primary !default;
+$kendo-link-hover-text: null !default;
+
+// Validator
+$kendo-invalid-bg: null !default;
+$kendo-invalid-text: $kendo-color-error !default;
+$kendo-invalid-border: $kendo-color-error !default;
+$kendo-invalid-shadow: null !default;
+
+$kendo-valid-bg: null !default;
+$kendo-valid-text: $kendo-color-success !default;
+$kendo-valid-border: $kendo-color-success !default;
+$kendo-valid-shadow: null !default;
+
+// Disabled Styling
+
+$kendo-disabled-bg: null !default;
+$kendo-disabled-text: null !default;
+$kendo-disabled-border: null !default;
+$kendo-disabled-opacity: null !default;
+$kendo-disabled-filter: null !default;
+
+$kendo-disabled-styling: (
+    bg: $kendo-disabled-bg,
+    color: $kendo-disabled-text,
+    border: $kendo-disabled-border,
+    opacity: $kendo-disabled-opacity,
+    filter: $kendo-disabled-filter
+) !default;
+
+$kendo-theme-colors: (
+    "primary": $kendo-color-primary,
+    "secondary": $kendo-color-secondary,
+    "tertiary": $kendo-color-tertiary,
+    "info": $kendo-color-info,
+    "success": $kendo-color-success,
+    "warning": $kendo-color-warning,
+    "error": $kendo-color-error,
+    "dark": $kendo-color-dark,
+    "light": $kendo-color-light,
+    "inverse": $kendo-color-inverse,
+) !default;
+
+:root {
+    --kendo-disabled-text: #{$kendo-disabled-text};
+    --kendo-disabled-bg: #{$kendo-disabled-bg};
+    --kendo-disabled-border: #{$kendo-disabled-border};
+    --kendo-disabled-opacity: #{$kendo-disabled-opacity};
+    --kendo-disabled-filter: #{$kendo-disabled-filter};
+
+    --kendo-hr-border: #{$kendo-component-border};
+
+    --kendo-marquee-text: #{$kendo-selected-text};
+    --kendo-marquee-bg: #{$kendo-selected-bg};
+    --kendo-marquee-border: #{$kendo-selected-border};
+
+    --kendo-text-selection-bg: #{$kendo-color-primary};
+}

package/scss/components/action-buttons/_index.scss

@@ -0,0 +1,19 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+// Expose
+@mixin kendo-action-buttons--styles() {
+    @include import-once( "action-buttons" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-action-buttons--layout();
+        @include kendo-action-buttons--theme();
+        @include kendo-utils--flex-grid--justify-content();
+    }
+}

package/scss/components/action-buttons/_layout.scss

@@ -0,0 +1,72 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-action-buttons--layout-base() {
+
+    // Actions
+    .k-actions {
+        padding-block: $kendo-actions-padding-y;
+        padding-inline: $kendo-actions-padding-x;
+        box-sizing: border-box;
+        border-width: $kendo-actions-border-width 0 0 0;
+        border-style: solid;
+        border-color: inherit;
+        flex-shrink: 0;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        gap: $kendo-actions-button-spacing;
+        overflow: hidden;
+        // TODO: remove
+        clear: both;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+
+    // Actions in popup
+    .k-popup .k-actions {
+        margin-top: $kendo-actions-margin-top;
+    }
+
+    // Actions align
+    .k-actions-start {
+        justify-content: flex-start;
+    }
+    .k-actions-center {
+        justify-content: center;
+    }
+    .k-actions-end {
+        justify-content: flex-end;
+    }
+    .k-actions-stretched > * {
+        flex: 1 0 0%;
+    }
+
+
+    // Actions orientation
+    .k-actions-horizontal {
+        width: 100%;
+        flex-flow: row nowrap;
+    }
+    .k-actions-vertical {
+        flex-flow: column nowrap;
+    }
+
+
+    // Aliases
+    .k-edit-buttons,
+    .k-action-buttons,
+    .k-columnmenu-actions {
+        @extend .k-actions !optional;
+    }
+
+}
+
+
+@mixin kendo-action-buttons--layout() {
+    @include kendo-action-buttons--layout-base();
+}

package/scss/components/action-buttons/_theme.scss

@@ -0,0 +1,21 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-action-buttons--theme-base() {
+
+    // Actions
+    .k-actions {
+        @include fill(
+            $kendo-actions-text,
+            $kendo-actions-bg,
+            $kendo-actions-border,
+            $kendo-actions-gradient
+        );
+    }
+
+}
+
+
+@mixin kendo-action-buttons--theme() {
+    @include kendo-action-buttons--theme-base();
+}

package/scss/components/action-buttons/_variables.scss

@@ -0,0 +1,11 @@
+// Actions
+$kendo-actions-margin-top: null !default;
+$kendo-actions-padding-x: null !default;
+$kendo-actions-padding-y: null !default;
+$kendo-actions-border-width: null !default;
+$kendo-actions-button-spacing: null !default;
+
+$kendo-actions-bg: null !default;
+$kendo-actions-text: null !default;
+$kendo-actions-border: null !default;
+$kendo-actions-gradient: null !default;

package/scss/components/action-sheet/_index.scss

@@ -0,0 +1,25 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../listgroup/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-action-sheet--styles() {
+    @include import-once( "action-sheet" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-listgroup--styles();
+        @include kendo-popup--styles();
+        @include kendo-action-sheet--layout();
+        @include kendo-action-sheet--theme();
+        @include kendo-utils--layout--overflow();
+        @include kendo-utils--typography--text-align();
+    }
+}