diff --git a/packages/bootstrap/scss/_bootstrap-overrides.scss b/packages/bootstrap/scss/_bootstrap-overrides.scss index 57bff30c69d..e69de29bb2d 100644 --- a/packages/bootstrap/scss/_bootstrap-overrides.scss +++ b/packages/bootstrap/scss/_bootstrap-overrides.scss @@ -1,22 +0,0 @@ -$kendo-is-dark-theme: false !default; - -$gray-100: #f8f9fa !default; -$gray-200: #e9ecef !default; -$gray-300: #dee2e6 !default; -$gray-400: #ced4da !default; -$gray-500: #adb5bd !default; -$gray-600: #6c757d !default; -$gray-700: #495057 !default; -$gray-800: #343a40 !default; -$gray-900: #212529 !default; - -$kendo-body-bg: #ffffff !default; - -$kendo-component-bg: $kendo-body-bg !default; -$kendo-component-text: k-contrast-color( $kendo-component-bg, $gray-900, $gray-100 ) !default; -$kendo-component-border: if( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 ) !default; - -$input-bg: $kendo-component-bg !default; -$input-color: k-contrast-color( $input-bg, $gray-900, $gray-300 ) !default; -$input-border-color: if( k-is-light( $input-bg ), $gray-400, $gray-600 ) !default; -$input-placeholder-color: k-contrast-color( $input-bg, $gray-600, $gray-400 ) !default; diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss index 2505eaac474..1de4ae8d877 100644 --- a/packages/bootstrap/scss/_variables.scss +++ b/packages/bootstrap/scss/_variables.scss @@ -1,19 +1,4 @@ @import "./core/functions/index.import.scss"; -@import "./_bootstrap-overrides.scss"; -@import "bootstrap/scss/_functions.scss"; -@import "bootstrap/scss/_variables.scss"; - -/// The color white. -/// Note: you cannot change this value. -/// @type Color -/// @group color-system -$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default - -/// The color black. -/// Note: you cannot change this value. -/// @type Color -/// @group color-system -$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default // Options $kendo-enable-rounded: true !default; @@ -114,107 +99,6 @@ $kendo-zindex-window: 2 !default; $kendo-zindex-loading: 100 !default; -// Color settings -$kendo-is-dark-theme: false !default; - -// Theme colors -/// The color that focuses the user attention. -/// Used for primary buttons and for elements of primary importance across the theme. -/// @group color-system -/// @type Color -$kendo-color-primary: $primary !default; -$kendo-color-primary-lighter: k-color-tint( $kendo-color-primary, 2 ) !default; -$kendo-color-primary-darker: k-color-shade( $kendo-color-primary, 2 ) !default; - -/// The color used along with the primary color denoted by $kendo-color-primary. -/// Used to provide contrast between the background and foreground colors. -/// @group color-system -/// @type Color -$kendo-color-primary-contrast: k-contrast-color( $kendo-color-primary ) !default; - -/// The secondary color of the theme. -/// @group color-system -/// @type Color -$kendo-color-secondary: $secondary !default; -$kendo-color-secondary-lighter: k-color-tint( $kendo-color-secondary, 2 ) !default; -$kendo-color-secondary-darker: k-color-shade( $kendo-color-secondary, 2 ) !default; - -/// The color used along with the secondary color denoted by $kendo-color-secondary. -/// Used to provide contrast between the background and foreground colors. -/// @group color-system -/// @type Color -$kendo-color-secondary-contrast: k-contrast-color( $kendo-color-secondary ) !default; - -/// The tertiary color of the theme. -/// @group color-system -/// @type Color -$kendo-color-tertiary: $purple !default; -$kendo-color-tertiary-lighter: k-color-tint( $kendo-color-tertiary, 2 ) !default; -$kendo-color-tertiary-darker: k-color-shade( $kendo-color-tertiary, 2 ) !default; - -/// The color used along with the tertiary color denoted by $kendo-color-tertiary. -/// Used to provide contrast between the background and foreground colors. -/// @group color-system -/// @type Color -$kendo-color-tertiary-contrast: k-contrast-color( $kendo-color-tertiary ) !default; - -/// The color for informational messages and states. -/// @group color-system -/// @type Color -$kendo-color-info: $info !default; -$kendo-color-info-lighter: k-color-tint( $kendo-color-info, 2 ) !default; -$kendo-color-info-darker: k-color-shade( $kendo-color-info, 2 ) !default; - -/// The color for success messages and states. -/// @group color-system -/// @type Color -$kendo-color-success: $success !default; -$kendo-color-success-lighter: k-color-tint( $kendo-color-success, 2 ) !default; -$kendo-color-success-darker: k-color-shade( $kendo-color-success, 2 ) !default; - -/// The color for warning messages and states. -/// @group color-system -/// @type Color -$kendo-color-warning: $warning !default; -$kendo-color-warning-lighter: k-color-tint( $kendo-color-warning, 2 ) !default; -$kendo-color-warning-darker: k-color-shade( $kendo-color-warning, 2 ) !default; - -/// The color for error messages and states. -/// @group color-system -/// @type Color -$kendo-color-error: $danger !default; -$kendo-color-error-lighter: k-color-tint( $kendo-color-error, 2 ) !default; -$kendo-color-error-darker: k-color-shade( $kendo-color-error, 2 ) !default; - -/// The dark color of the theme. -/// @group color-system -/// @type Color -$kendo-color-dark: $dark !default; - -/// The light color of the theme. -/// @group color-system -/// @type Color -$kendo-color-light: $light !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( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) !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; - - // Typography /// Base font size across all components. @@ -266,73 +150,6 @@ $kendo-font-weight-bold: $font-weight-bold !default; $kendo-letter-spacing: null !default; -// Generic styles - -// Root styles -$kendo-body-bg: $kendo-color-white !default; -$kendo-body-text: k-contrast-color( $kendo-body-bg, $gray-900, $gray-100 ) !default; - -$kendo-subtle-text: if( $kendo-is-dark-theme, $gray-400, $text-muted ) !default; - -$kendo-app-bg: k-try-shade( $kendo-body-bg, .25 ) !default; -$kendo-app-text: $kendo-body-text !default; -$kendo-app-border: if( k-is-light( $kendo-app-bg ), $gray-300, $gray-700 ) !default; - -// Link -$kendo-link-text: $link-color !default; -$kendo-link-hover-text: $link-hover-color !default; - - -// Components - -// Component -/// 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;`. -/// @group component -$kendo-component-bg: $kendo-body-bg !default; -/// Text color of a component. -/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`. -/// @group component -$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: if( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 ) !default; - - -/// The background of the components' chrome area. -$kendo-base-bg: $gray-100 !default; -/// The text color of the components' chrome area. -$kendo-base-text: $kendo-body-text !default; -/// The border color of the components' chrome area. -$kendo-base-border: k-try-shade( $kendo-base-bg, 1 ) !default; -/// The gradient background of the components' chrome area. -$kendo-base-gradient: null !default; - -/// The background of hovered items. -$kendo-hover-bg: $gray-200 !default; -/// The text color of hovered items. -$kendo-hover-text: $kendo-base-text !default; -/// The border color of hovered items. -$kendo-hover-border: k-try-shade( $kendo-hover-bg, 1 ) !default; -/// The gradient background of hovered items. -$kendo-hover-gradient: null !default; - -/// The background of selected items. -$kendo-selected-bg: $kendo-color-primary !default; -/// The text color of selected items. -$kendo-selected-text: k-contrast-color( $kendo-selected-bg ) !default; -/// The border color of selected items. -$kendo-selected-border: k-try-shade( $kendo-selected-bg, 1 ) !default; -/// The gradient background of selected items. -$kendo-selected-gradient: null !default; - -$kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, .5 ) !default; -$kendo-selected-hover-text: $kendo-selected-text !default; -$kendo-selected-hover-border: $kendo-base-border !default; -$kendo-selected-hover-gradient: null !default; - - // TODO: refactor $kendo-focus-shadow: null !default; @@ -354,25 +171,6 @@ $kendo-disabled-styling: ( // TODO: refactor once we extract drag drop as separate module - -// Header -$kendo-component-header-bg: $kendo-base-bg !default; -$kendo-component-header-text: $kendo-component-text !default; -$kendo-component-header-border: $kendo-component-border !default; -$kendo-component-header-gradient: 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: 0 0 0 .25rem rgba( $kendo-invalid-border, .25 ) !default; - -$kendo-valid-bg: null !default; -$kendo-valid-text: $kendo-color-success !default; -$kendo-valid-border: $kendo-color-success !default; -$kendo-valid-shadow: 0 0 0 .25rem rgba( $kendo-valid-border, .25 ) !default; - // Loading $kendo-loading-opacity: .3 !default; $kendo-zindex-loading: 100 !default; diff --git a/packages/bootstrap/scss/all.scss b/packages/bootstrap/scss/all.scss index 25ed8ba7b7f..ed43b061942 100644 --- a/packages/bootstrap/scss/all.scss +++ b/packages/bootstrap/scss/all.scss @@ -1,6 +1,6 @@ +$kendo-new-colors: false; @import "./index.scss"; - @if not $kendo-auto-bootstrap { @include kendo-theme--config(); @include kendo-theme--styles(); diff --git a/packages/bootstrap/scss/core/_index.scss b/packages/bootstrap/scss/core/_index.scss index 1ded1140568..05299e52fbc 100644 --- a/packages/bootstrap/scss/core/_index.scss +++ b/packages/bootstrap/scss/core/_index.scss @@ -1,5 +1,8 @@ $wcag-min-contrast-ratio: 4.5 !default; +// Color System +@import "./color-system/_swatch.scss"; + // Variables @import "../_variables.scss"; @@ -8,6 +11,9 @@ $wcag-min-contrast-ratio: 4.5 !default; @import "@progress/kendo-theme-core/scss/index.import.scss"; +// Backward compatibility +@import "./color-system/_swatch-legacy.scss"; + // Expose @include exports("kendo-core-styles") { @include kendo-core--styles(); diff --git a/packages/bootstrap/scss/core/color-system/_swatch-legacy.scss b/packages/bootstrap/scss/core/color-system/_swatch-legacy.scss new file mode 100644 index 00000000000..ea39cbfb3c7 --- /dev/null +++ b/packages/bootstrap/scss/core/color-system/_swatch-legacy.scss @@ -0,0 +1,83 @@ +@if ($kendo-new-colors) { + $input-bg: null; + $input-color: null; + $input-border-color: null; + $input-placeholder-color: null; + $kendo-color-primary: null; + $kendo-color-primary-lighter: null; + $kendo-color-primary-darker: null; + $kendo-color-primary-contrast: null; + $kendo-color-secondary: null; + $kendo-color-secondary-lighter: null; + $kendo-color-secondary-darker: null; + $kendo-color-secondary-contrast: null; + $kendo-color-tertiary: null; + $kendo-color-tertiary-lighter: null; + $kendo-color-tertiary-darker: null; + $kendo-color-tertiary-contrast: null; + $kendo-color-info: null; + $kendo-color-info-lighter: null; + $kendo-color-info-darker: null; + $kendo-color-success: null; + $kendo-color-success-lighter: null; + $kendo-color-success-darker: null; + $kendo-color-warning: null; + $kendo-color-warning-lighter: null; + $kendo-color-warning-darker: null; + $kendo-color-error: null; + $kendo-color-error-lighter: null; + $kendo-color-error-darker: null; + $kendo-color-dark: null; + $kendo-color-light: null; + $kendo-color-inverse: null; + + // We probably wont be able to use this, but leaving it for now + $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, + ); + + $kendo-body-bg: null; + $kendo-body-text: null; + $kendo-subtle-text: null; + $kendo-app-bg: null; + $kendo-app-text: null; + $kendo-app-border: null; + $kendo-link-text: null; + $kendo-link-hover-text: null; + $kendo-component-bg: null; + $kendo-component-text: null; + $kendo-component-border: null; + $kendo-base-bg: null; + $kendo-base-text: null; + $kendo-base-border: null; + $kendo-base-gradient: null; + $kendo-hover-bg: null; + $kendo-hover-text: null; + $kendo-hover-border: null; + $kendo-hover-gradient: null; + $kendo-selected-bg: null; + $kendo-selected-text: null; + $kendo-selected-border: null; + $kendo-selected-gradient: null; + $kendo-selected-hover-bg: null; + $kendo-selected-hover-text: null; + $kendo-selected-hover-border: null; + $kendo-selected-hover-gradient: null; + $kendo-component-header-bg: null; + $kendo-component-header-text: null; + $kendo-component-header-border: null; + $kendo-component-header-gradient: null; + $kendo-invalid-bg: null; + $kendo-invalid-text: null; + $kendo-invalid-border: null; + $kendo-invalid-shadow: null; +} diff --git a/packages/bootstrap/scss/core/color-system/_swatch.scss b/packages/bootstrap/scss/core/color-system/_swatch.scss new file mode 100644 index 00000000000..801b253be96 --- /dev/null +++ b/packages/bootstrap/scss/core/color-system/_swatch.scss @@ -0,0 +1,331 @@ +@import "@progress/kendo-theme-core/scss/functions/index.import.scss"; +@import "@progress/kendo-theme-core/scss/color-system/_constants.scss"; +@import "bootstrap/scss/_functions.scss"; +@import "bootstrap/scss/_variables.scss"; + +// Config +$kendo-new-colors: false !default; + +// TODO! +// Colors +$_default-colors: ( + // Misc + surface: null, + surface-alt: null, + border: null, + border-alt: null, + // 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, + base-on-base: null, + base-on-surface: null, + // 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, + primary-on-base: null, + primary-on-surface: null, + // 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, + secondary-on-base: null, + secondary-on-surface: null, + // 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, + tertiary-on-base: null, + tertiary-on-surface: null, + // 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, + info-on-base: null, + info-on-surface: null, + // 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, + success-on-base: null, + success-on-surface: null, + // 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, + warning-on-base: null, + warning-on-surface: null, + // 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, + error-on-base: null, + error-on-surface: null, + // 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, + light-on-base: null, + light-on-surface: null, + // 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, + dark-on-base: null, + dark-on-surface: null +) !default; + +$kendo-colors: $_default-colors !default; + +// Legacy + +$kendo-is-dark-theme: false !default; + +$gray-100: #f8f9fa !default; +$gray-200: #e9ecef !default; +$gray-300: #dee2e6 !default; +$gray-400: #ced4da !default; +$gray-500: #adb5bd !default; +$gray-600: #6c757d !default; +$gray-700: #495057 !default; +$gray-800: #343a40 !default; +$gray-900: #212529 !default; + +$kendo-body-bg: #ffffff !default; + +$kendo-component-bg: $kendo-body-bg !default; +$kendo-component-text: k-contrast-color( $kendo-component-bg, $gray-900, $gray-100 ) !default; +$kendo-component-border: if( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 ) !default; + +$input-bg: $kendo-component-bg !default; +$input-color: k-contrast-color( $input-bg, $gray-900, $gray-300 ) !default; +$input-border-color: if( k-is-light( $input-bg ), $gray-400, $gray-600 ) !default; +$input-placeholder-color: k-contrast-color( $input-bg, $gray-600, $gray-400 ) !default; + + +// Theme colors +/// The color that focuses the user attention. +/// Used for primary buttons and for elements of primary importance across the theme. +/// @group color-system +/// @type Color +$kendo-color-primary: $primary !default; +$kendo-color-primary-lighter: k-color-tint( $kendo-color-primary, 2 ) !default; +$kendo-color-primary-darker: k-color-shade( $kendo-color-primary, 2 ) !default; + +/// The color used along with the primary color denoted by $kendo-color-primary. +/// Used to provide contrast between the background and foreground colors. +/// @group color-system +/// @type Color +$kendo-color-primary-contrast: k-contrast-color( $kendo-color-primary ) !default; + +/// The secondary color of the theme. +/// @group color-system +/// @type Color +$kendo-color-secondary: $secondary !default; +$kendo-color-secondary-lighter: k-color-tint( $kendo-color-secondary, 2 ) !default; +$kendo-color-secondary-darker: k-color-shade( $kendo-color-secondary, 2 ) !default; + +/// The color used along with the secondary color denoted by $kendo-color-secondary. +/// Used to provide contrast between the background and foreground colors. +/// @group color-system +/// @type Color +$kendo-color-secondary-contrast: k-contrast-color( $kendo-color-secondary ) !default; + +/// The tertiary color of the theme. +/// @group color-system +/// @type Color +$kendo-color-tertiary: $purple !default; +$kendo-color-tertiary-lighter: k-color-tint( $kendo-color-tertiary, 2 ) !default; +$kendo-color-tertiary-darker: k-color-shade( $kendo-color-tertiary, 2 ) !default; + +/// The color used along with the tertiary color denoted by $kendo-color-tertiary. +/// Used to provide contrast between the background and foreground colors. +/// @group color-system +/// @type Color +$kendo-color-tertiary-contrast: k-contrast-color( $kendo-color-tertiary ) !default; + +/// The color for informational messages and states. +/// @group color-system +/// @type Color +$kendo-color-info: $info !default; +$kendo-color-info-lighter: k-color-tint( $kendo-color-info, 2 ) !default; +$kendo-color-info-darker: k-color-shade( $kendo-color-info, 2 ) !default; + +/// The color for success messages and states. +/// @group color-system +/// @type Color +$kendo-color-success: $success !default; +$kendo-color-success-lighter: k-color-tint( $kendo-color-success, 2 ) !default; +$kendo-color-success-darker: k-color-shade( $kendo-color-success, 2 ) !default; + +/// The color for warning messages and states. +/// @group color-system +/// @type Color +$kendo-color-warning: $warning !default; +$kendo-color-warning-lighter: k-color-tint( $kendo-color-warning, 2 ) !default; +$kendo-color-warning-darker: k-color-shade( $kendo-color-warning, 2 ) !default; + +/// The color for error messages and states. +/// @group color-system +/// @type Color +$kendo-color-error: $danger !default; +$kendo-color-error-lighter: k-color-tint( $kendo-color-error, 2 ) !default; +$kendo-color-error-darker: k-color-shade( $kendo-color-error, 2 ) !default; + +/// The dark color of the theme. +/// @group color-system +/// @type Color +$kendo-color-dark: $dark !default; + +/// The light color of the theme. +/// @group color-system +/// @type Color +$kendo-color-light: $light !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( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) !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; + + +// Generic styles + +// Root styles +$kendo-body-bg: $kendo-color-white !default; +$kendo-body-text: k-contrast-color( $kendo-body-bg, $gray-900, $gray-100 ) !default; + +$kendo-subtle-text: if( $kendo-is-dark-theme, $gray-400, $text-muted ) !default; + +$kendo-app-bg: k-try-shade( $kendo-body-bg, .25 ) !default; +$kendo-app-text: $kendo-body-text !default; +$kendo-app-border: if( k-is-light( $kendo-app-bg ), $gray-300, $gray-700 ) !default; + +// Link +$kendo-link-text: $link-color !default; +$kendo-link-hover-text: $link-hover-color !default; + + +// Components + +// Component +/// 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;`. +/// @group component +$kendo-component-bg: $kendo-body-bg !default; +/// Text color of a component. +/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`. +/// @group component +$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: if( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 ) !default; + + +/// The background of the components' chrome area. +$kendo-base-bg: $gray-100 !default; +/// The text color of the components' chrome area. +$kendo-base-text: $kendo-body-text !default; +/// The border color of the components' chrome area. +$kendo-base-border: k-try-shade( $kendo-base-bg, 1 ) !default; +/// The gradient background of the components' chrome area. +$kendo-base-gradient: null !default; + +/// The background of hovered items. +$kendo-hover-bg: $gray-200 !default; +/// The text color of hovered items. +$kendo-hover-text: $kendo-base-text !default; +/// The border color of hovered items. +$kendo-hover-border: k-try-shade( $kendo-hover-bg, 1 ) !default; +/// The gradient background of hovered items. +$kendo-hover-gradient: null !default; + +/// The background of selected items. +$kendo-selected-bg: $kendo-color-primary !default; +/// The text color of selected items. +$kendo-selected-text: k-contrast-color( $kendo-selected-bg ) !default; +/// The border color of selected items. +$kendo-selected-border: k-try-shade( $kendo-selected-bg, 1 ) !default; +/// The gradient background of selected items. +$kendo-selected-gradient: null !default; + +$kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, .5 ) !default; +$kendo-selected-hover-text: $kendo-selected-text !default; +$kendo-selected-hover-border: $kendo-base-border !default; +$kendo-selected-hover-gradient: null !default; + +// Header +$kendo-component-header-bg: $kendo-base-bg !default; +$kendo-component-header-text: $kendo-component-text !default; +$kendo-component-header-border: $kendo-component-border !default; +$kendo-component-header-gradient: 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: 0 0 0 .25rem rgba( $kendo-invalid-border, .25 ) !default; diff --git a/packages/core/scss/color-system/_constants.scss b/packages/core/scss/color-system/_constants.scss new file mode 100644 index 00000000000..55ae319500d --- /dev/null +++ b/packages/core/scss/color-system/_constants.scss @@ -0,0 +1,49 @@ +// Color constants + +/// The color white. +/// Note: you cannot change this value. +/// @type Color +/// @group color-system +$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default + +/// The color black. +/// Note: you cannot change this value. +/// @type Color +/// @group color-system +$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default + +/// The color transparent. +/// Note: you cannot change this value. +/// @type Color +/// @group color-system +$kendo-color-rgba-transparent: rgba(0, 0, 0, 0); // stylelint-disable-line scss/dollar-variable-default + +/// A gradient that goes from transparent to black. +/// Note: you cannot change this value. +/// @type Gradient +/// @group color-system +$kendo-gradient-transparent-to-black: rgba(black, 0), black; // stylelint-disable-line scss/dollar-variable-default + +/// A gradient that goes from transparent to white. +/// Note: you cannot change this value. +/// @type Gradient +/// @group color-system +$kendo-gradient-transparent-to-white: rgba(white, 0), white; // stylelint-disable-line scss/dollar-variable-default + +/// A gradient that goes from black to transparent. +/// Note: you cannot change this value. +/// @type Gradient +/// @group color-system +$kendo-gradient-black-to-transparent: black, rgba(black, 0); // stylelint-disable-line scss/dollar-variable-default + +/// A gradient that goes from white to transparent. +/// Note: you cannot change this value. +/// @type Gradient +/// @group color-system +$kendo-gradient-white-to-transparent: white, rgba(white, 0); // stylelint-disable-line scss/dollar-variable-default + +/// A gradient that cycles through the colors of the rainbow. +/// Note: you cannot change this value. +/// @type Gradient +/// @group color-system +$kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default diff --git a/packages/core/scss/color-system/_functions.import.scss b/packages/core/scss/color-system/_functions.import.scss index 126f8726a4f..51fb734bb41 100644 --- a/packages/core/scss/color-system/_functions.import.scss +++ b/packages/core/scss/color-system/_functions.import.scss @@ -142,3 +142,15 @@ @return $result; } + +@function k-hex-to-rgb( $color ) { + @if($color) { + $r: k-color-red($color); + $g: k-color-green($color); + $b: k-color-blue($color); + + @return $r, $g, $b; + } @else { + @return null; + } +} diff --git a/packages/core/scss/color-system/_swatch-legacy.scss b/packages/core/scss/color-system/_swatch-legacy.scss new file mode 100644 index 00000000000..ee6fc82d078 --- /dev/null +++ b/packages/core/scss/color-system/_swatch-legacy.scss @@ -0,0 +1,77 @@ +$kendo-is-dark-theme: false !default; + +// Root styles +$kendo-body-bg: null !default; +$kendo-body-text: null !default; + +// Component styles +$kendo-component-bg: null !default; +$kendo-component-text: null !default; +$kendo-component-border: null !default; + +// States styles +$kendo-hover-bg: null !default; +$kendo-hover-text: null !default; +$kendo-hover-border: null !default; + +$kendo-selected-bg: null !default; +$kendo-selected-text: null !default; +$kendo-selected-border: null !default; + +$kendo-selected-hover-bg: null !default; +$kendo-selected-hover-text: null !default; +$kendo-selected-hover-border: null !default; + +$kendo-focus-outline: null !default; + +$kendo-subtle-text: null !default; + +// Link +$kendo-link-text: null !default; +$kendo-link-hover-text: null !default; + +// Validator +$kendo-invalid-bg: null !default; +$kendo-invalid-text: null !default; +$kendo-invalid-border: null !default; +$kendo-invalid-shadow: null !default; + +// Disabled Styling +$kendo-disabled-bg: null !default; +$kendo-disabled-text: null !default; +$kendo-disabled-border: null !default; + +// Loading +$kendo-loading-bg: null !default; +$kendo-loading-text: null !default; + +$kendo-palettes: () !default; +$kendo-theme-colors: () !default; + +@mixin color-system-styles() { + :root { + @include k-css-vars($kendo-palettes); + @include k-css-vars($kendo-theme-colors); + + // Text colors + @each $theme-color, $color-props in $kendo-theme-colors { + $_color: k-map-get($color-props, text); + + .k-text-#{$theme-color}, + .k-color-#{$theme-color} { + color: var(--kendo-text-#{$theme-color}, #{$_color}); + } + .\!k-text-#{$theme-color}, + .\!k-color-#{$theme-color} { + color: var(--kendo-text-#{$theme-color}, #{$_color}) !important; // stylelint-disable-line declaration-no-important + } + + .k-bg-#{$theme-color} { + background-color: var(--kendo-bg-#{$theme-color}, #{$_color}); + } + .\!k-bg-#{$theme-color} { + background-color: var(--kendo-bg-#{$theme-color}, #{$_color}) !important; // stylelint-disable-line declaration-no-important + } + } + } +} diff --git a/packages/core/scss/color-system/_swatch.scss b/packages/core/scss/color-system/_swatch.scss new file mode 100644 index 00000000000..80f99a42d16 --- /dev/null +++ b/packages/core/scss/color-system/_swatch.scss @@ -0,0 +1,167 @@ +@import "./_functions.import.scss"; + +// Config +$kendo-enable-color-system: false !default; + +// Colors +$_default-colors: ( + // Misc + app-surface: null, + on-app-surface: null, + subtle: null, + surface: null, + surface-alt: null, + border: null, + border-alt: null, + // 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, + // 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, + // 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, + // 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, + // 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, + // 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, + // 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, + // 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, + // 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, + // 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, + // 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, +) !default; + +/// The global default Colors map. +/// @group color-system +$kendo-colors: $_default-colors !default; +$kendo-colors: k-map-merge($_default-colors, $kendo-colors); + +@function k-color($key, $rgb: false) { + $_color: k-map-get($kendo-colors, $key); + + @if ($_color) { + @if ($rgb) { + @return var(--kendo-color-#{$key}-rgb, k-hex-to-rgb($_color)); + } @else { + @return var(--kendo-color-#{$key}, $_color); + } + } @else { + @error "Color Variable \`#{$key}\` does not exists in the color collection."; + } +} + +@mixin color-system--styles() { + :root { + @each $key, $value in $kendo-colors { + @if($value) { + --kendo-color-#{$key}: #{$value}; + --kendo-color-#{$key}-rgb: #{k-hex-to-rgb($value)}; + } + } + } +} diff --git a/packages/core/scss/color-system/_variables.scss b/packages/core/scss/color-system/_variables.scss deleted file mode 100644 index 1cbd3f2c1a4..00000000000 --- a/packages/core/scss/color-system/_variables.scss +++ /dev/null @@ -1,198 +0,0 @@ -// Color constants - -/// The color white. -/// Note: you cannot change this value. -/// @type Color -/// @group color-system -$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default - -/// The color black. -/// Note: you cannot change this value. -/// @type Color -/// @group color-system -$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default - -/// The color transparent. -/// Note: you cannot change this value. -/// @type Color -/// @group color-system -$kendo-color-rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default - -/// A gradient that goes from transparent to black. -/// Note: you cannot change this value. -/// @type Gradient -/// @group color-system -$kendo-gradient-transparent-to-black: rgba( black, 0 ), black; // stylelint-disable-line scss/dollar-variable-default - -/// A gradient that goes from transparent to white. -/// Note: you cannot change this value. -/// @type Gradient -/// @group color-system -$kendo-gradient-transparent-to-white: rgba( white, 0 ), white; // stylelint-disable-line scss/dollar-variable-default - -/// A gradient that goes from black to transparent. -/// Note: you cannot change this value. -/// @type Gradient -/// @group color-system -$kendo-gradient-black-to-transparent: black, rgba( black, 0 ); // stylelint-disable-line scss/dollar-variable-default - -/// A gradient that goes from white to transparent. -/// Note: you cannot change this value. -/// @type Gradient -/// @group color-system -$kendo-gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disable-line scss/dollar-variable-default - -/// A gradient that cycles through the colors of the rainbow. -/// Note: you cannot change this value. -/// @type Gradient -/// @group color-system -$kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default - - -// Root styles -$kendo-body-bg: $kendo-color-white !default; -$kendo-body-text: k-get-theme-color-var( neutral-160 ) !default; - -// Component styles -$kendo-component-bg: $kendo-body-bg !default; -$kendo-component-text: $kendo-body-text !default; -$kendo-component-border: k-get-theme-color-var( neutral-30 ) !default; - -// States styles -$kendo-hover-bg: k-get-theme-color-var( neutral-20 ) !default; -$kendo-hover-text: k-get-theme-color-var( neutral-190 ) !default; -$kendo-hover-border: k-get-theme-color-var( neutral-20 ) !default; - -$kendo-selected-bg: k-get-theme-color-var( neutral-30 ) !default; -$kendo-selected-text: k-get-theme-color-var( neutral-160 ) !default; -$kendo-selected-border: k-get-theme-color-var( neutral-130 ) !default; - -$kendo-selected-hover-bg: k-get-theme-color-var( neutral-40 ) !default; -$kendo-selected-hover-text: k-get-theme-color-var( neutral-190 ) !default; -$kendo-selected-hover-border: k-get-theme-color-var( neutral-130 ) !default; - -$kendo-focus-outline: k-get-theme-color-var( neutral-130 ) !default; - -$kendo-subtle-text: k-get-theme-color-var( neutral-130 ) !default; - -// Link -$kendo-link-text: k-get-theme-color-var( primary-100 ) !default; -$kendo-link-hover-text: k-get-theme-color-var( primary-120 ) !default; - -// Validator -$kendo-invalid-bg: initial !default; -$kendo-invalid-text: k-get-theme-color-var( error-190 ) !default; -$kendo-invalid-border: k-get-theme-color-var( error-190 ) !default; -$kendo-invalid-shadow: null !default; - -$kendo-valid-bg: initial !default; -$kendo-valid-text: k-get-theme-color-var( success-190 ) !default; -$kendo-valid-border: k-get-theme-color-var( success-190 ) !default; -$kendo-valid-shadow: null !default; - -// Disabled Styling -$kendo-disabled-bg: k-get-theme-color-var( neutral-20 ) !default; -$kendo-disabled-text: k-get-theme-color-var( neutral-90 ) !default; -$kendo-disabled-border: transparent !default; - -// Loading -$kendo-loading-bg: $kendo-component-bg !default; -$kendo-loading-text: currentColor !default; - - -// Theme colors -$kendo-theme-colors: ( - primary: ( - text: k-get-theme-color-var( primary-130 ), - bg: k-get-theme-color-var( primary-20 ), - border: k-get-theme-color-var( primary-20 ) - ), - info: ( - text: k-get-theme-color-var( info-190 ), - bg: k-get-theme-color-var( info-20 ), - border: k-get-theme-color-var( info-20 ) - ), - success: ( - text: k-get-theme-color-var( success-190 ), - bg: k-get-theme-color-var( success-20 ), - border: k-get-theme-color-var( success-20 ) - ), - warning: ( - text: k-get-theme-color-var( neutral-160 ), - bg: k-get-theme-color-var( warning-20 ), - border: k-get-theme-color-var( warning-20 ) - ), - error: ( - text: k-get-theme-color-var( error-190 ), - bg: k-get-theme-color-var( error-20 ), - border: k-get-theme-color-var( error-20 ) - ) -) !default; - - -@mixin color-system-styles() { - :root { - @include k-css-vars( $kendo-palettes ); - @include k-css-vars( $kendo-theme-colors ); - - --kendo-body-bg: #{$kendo-body-bg}; - --kendo-body-text: #{$kendo-body-text}; - - --kendo-component-bg: #{$kendo-component-bg}; - --kendo-component-text: #{$kendo-component-text}; - --kendo-component-border: #{$kendo-component-border}; - - --kendo-link-text: #{$kendo-link-text}; - --kendo-link-hover-text: #{$kendo-link-hover-text}; - - --kendo-disabled-bg: #{$kendo-disabled-bg}; - --kendo-disabled-text: #{$kendo-disabled-text}; - --kendo-disabled-border: #{$kendo-disabled-border}; - - --kendo-hover-bg: #{$kendo-hover-bg}; - --kendo-hover-text: #{$kendo-hover-text}; - --kendo-hover-border: #{$kendo-hover-border}; - - --kendo-selected-bg: #{$kendo-selected-bg}; - --kendo-selected-text: #{$kendo-selected-text}; - --kendo-selected-border: #{$kendo-selected-border}; - - --kendo-selected-hover-bg: #{$kendo-selected-hover-bg}; - --kendo-selected-hover-text: #{$kendo-selected-hover-text}; - --kendo-selected-hover-border: #{$kendo-selected-hover-border}; - - --kendo-focus-outline: #{$kendo-focus-outline}; - - --kendo-subtle-text: #{$kendo-subtle-text}; - - --kendo-invalid-bg: #{$kendo-invalid-bg}; - --kendo-invalid-text: #{$kendo-invalid-text}; - --kendo-invalid-border: #{$kendo-invalid-border}; - --kendo-invalid-shadow: #{$kendo-invalid-shadow}; - - --kendo-border-radius-sm: #{$kendo-border-radius-sm}; - --kendo-border-radius-md: #{$kendo-border-radius-md}; - --kendo-border-radius-lg: #{$kendo-border-radius-lg}; - } - - // Text colors - @each $theme-color, $color-props in $kendo-theme-colors { - $_color: k-map-get( $color-props, text ); - - .k-text-#{$theme-color}, - .k-color-#{$theme-color} { - color: var( --kendo-text-#{$theme-color}, #{$_color} ); - } - .\!k-text-#{$theme-color}, - .\!k-color-#{$theme-color} { - color: var( --kendo-text-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important - } - - .k-bg-#{$theme-color} { - background-color: var( --kendo-bg-#{$theme-color}, #{$_color} ); - } - .\!k-bg-#{$theme-color} { - background-color: var( --kendo-bg-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important - } - }; -} diff --git a/packages/core/scss/color-system/index.import.scss b/packages/core/scss/color-system/index.import.scss index 82c690fec95..0d2203746a8 100644 --- a/packages/core/scss/color-system/index.import.scss +++ b/packages/core/scss/color-system/index.import.scss @@ -1,4 +1,6 @@ @import "./_functions.import.scss"; @import "./_mixins.import.scss"; -@import "./_variables.scss"; +@import "./_swatch.scss"; +@import "./_constants.scss"; +@import "./_swatch-legacy.scss"; // @import "./_palettes.scss"; diff --git a/packages/core/scss/functions/_color-manipulation.import.scss b/packages/core/scss/functions/_color-manipulation.import.scss index 31fac4bea3d..f89389542c4 100644 --- a/packages/core/scss/functions/_color-manipulation.import.scss +++ b/packages/core/scss/functions/_color-manipulation.import.scss @@ -132,3 +132,26 @@ $kendo-color-level-step: 8% !default; @function k-true-mix( $color1, $color2, $weight: 50% ) { @return k-color-mix( rgba( $color1, 1 ), rgba( $color2, 1 ), $weight ); } + +/// Generates all color variations of a given main color +/// @param {String} $name - The name of the main color +/// @param {Color} $level - The color value to be assigned to the main color +/// @return {Map} - A map with the generated keys and values +/// +/// @group color-system +@function k-generate-colors( $name, $color ) { + $_variations: ( + #{$name}-subtle: k-try-tint( $color, 80% ), + #{$name}-subtle-hover: k-try-tint( $color, 65% ), + #{$name}-subtle-active: k-try-tint( $color, 50% ), + #{$name}: $color, + #{$name}-hover: k-try-shade( $color, 0.5 ), + #{$name}-active: k-try-shade( $color, 1.5 ), + #{$name}-emphasis: k-try-tint( $color, 4.5 ), + #{$name}-on-subtle: k-try-shade( $color, 8 ), + on-#{$name}: k-contrast-legacy( $color ), + #{$name}-on-surface: $color, + ); + + @return $_variations; +} \ No newline at end of file diff --git a/packages/core/scss/styles/_colors.scss b/packages/core/scss/styles/_colors.scss new file mode 100644 index 00000000000..c1ba69d728b --- /dev/null +++ b/packages/core/scss/styles/_colors.scss @@ -0,0 +1,5 @@ +@mixin kendo-core--styles--colors() { + @if ($kendo-enable-color-system) { + @include color-system--styles(); + } +} diff --git a/packages/core/scss/styles/index.import.scss b/packages/core/scss/styles/index.import.scss index 43261c604ce..69cc89e78b9 100644 --- a/packages/core/scss/styles/index.import.scss +++ b/packages/core/scss/styles/index.import.scss @@ -5,7 +5,7 @@ @import "./_base.scss"; @import "./_loading.scss"; @import "./_selection.scss"; - +@import "./_colors.scss"; @mixin kendo-core--styles() { @include kendo-core--styles--accessibility(); @@ -15,4 +15,5 @@ @include kendo-core--styles--base(); @include kendo-core--styles--loading(); @include kendo-core--styles--selection(); + @include kendo-core--styles--colors(); } diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss index 276f91c61d9..b14ba8d154c 100644 --- a/packages/default/scss/_variables.scss +++ b/packages/default/scss/_variables.scss @@ -1,8 +1,5 @@ @import "./core/functions/index.import.scss"; -$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default -$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default - // Options $kendo-enable-rounded: true !default; $kendo-enable-shadows: true !default; @@ -141,102 +138,7 @@ $kendo-zindex-loading: 100 !default; // Color settings $kendo-is-dark-theme: false !default; -// Theme colors -/// The color that focuses the user attention. -/// Used for primary buttons and for elements of primary importance across the theme. -/// @group color-system -/// @type Color -$kendo-color-primary: #ff6358 !default; -$kendo-color-primary-lighter: k-color-tint( $kendo-color-primary, 2 ) !default; -$kendo-color-primary-darker: k-color-shade( $kendo-color-primary, 2 ) !default; - -/// The color used along with the primary color denoted by $kendo-color-primary. -/// Used to provide contrast between the background and foreground colors. -/// @group color-system -/// @type Color -$kendo-color-primary-contrast: k-contrast-legacy( $kendo-color-primary ) !default; - -/// The secondary color of the theme. -/// @group color-system -/// @type Color -$kendo-color-secondary: #666666 !default; -$kendo-color-secondary-lighter: k-color-tint( $kendo-color-secondary, 2 ) !default; -$kendo-color-secondary-darker: k-color-shade( $kendo-color-secondary, 2 ) !default; - -/// The color used along with the secondary color denoted by $kendo-color-secondary. -/// Used to provide contrast between the background and foreground colors. -/// @group color-system -/// @type Color -$kendo-color-secondary-contrast: k-contrast-legacy( $kendo-color-secondary ) !default; - -/// The tertiary color of the theme. -/// @group color-system -/// @type Color -$kendo-color-tertiary: #03a9f4 !default; -$kendo-color-tertiary-lighter: k-color-tint( $kendo-color-tertiary, 2 ) !default; -$kendo-color-tertiary-darker: k-color-shade( $kendo-color-tertiary, 2 ) !default; - -/// The color used along with the tertiary color denoted by $kendo-color-tertiary. -/// Used to provide contrast between the background and foreground colors. -/// @group color-system -/// @type Color -$kendo-color-tertiary-contrast: k-contrast-legacy( $kendo-color-tertiary ) !default; - -/// The color for informational messages and states. -/// @group color-system -/// @type Color -$kendo-color-info: #0058e9 !default; -$kendo-color-info-lighter: k-color-tint( $kendo-color-info, 2 ) !default; -$kendo-color-info-darker: k-color-shade( $kendo-color-info, 2 ) !default; - -/// The color for success messages and states. -/// @group color-system -/// @type Color -$kendo-color-success: #37b400 !default; -$kendo-color-success-lighter: k-color-tint( $kendo-color-success, 2 ) !default; -$kendo-color-success-darker: k-color-shade( $kendo-color-success, 2 ) !default; - -/// The color for warning messages and states. -/// @group color-system -/// @type Color -$kendo-color-warning: #ffc000 !default; -$kendo-color-warning-lighter: k-color-tint( $kendo-color-warning, 2 ) !default; -$kendo-color-warning-darker: k-color-shade( $kendo-color-warning, 2 ) !default; - -/// The color for error messages and states. -/// @group color-system -/// @type Color -$kendo-color-error: #f31700 !default; -$kendo-color-error-lighter: k-color-tint( $kendo-color-error, 2 ) !default; -$kendo-color-error-darker: k-color-shade( $kendo-color-error, 2 ) !default; - -/// The dark color of the theme. -/// @group color-system -/// @type Color -$kendo-color-dark: #424242 !default; - -/// The light color of the theme. -/// @group color-system -/// @type Color -$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( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) !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; + // Typography @@ -318,85 +220,6 @@ $kendo-font-weight-bold: 700 !default; $kendo-letter-spacing: null !default; -// Generic styles - -/// Background color of the body. -/// @group common -$kendo-body-bg: $kendo-color-white !default; -/// Text color of the body. -/// @group common -$kendo-body-text: #424242 !default; - -/// Subtle text color. -/// @group common -$kendo-subtle-text: #666666 !default; - -$kendo-app-bg: k-try-shade( $kendo-body-bg, .25 ) !default; -$kendo-app-text: $kendo-body-text !default; -$kendo-app-border: rgba( $kendo-color-black, .08 ) !default; - -// Link -/// Text color of the links. -/// @group common -$kendo-link-text: $kendo-color-primary !default; -/// Text color of the links on hover. -/// @group common -$kendo-link-hover-text: $kendo-color-primary-darker !default; - - -// Components - -// Component -/// 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;`. -/// @group component -$kendo-component-bg: $kendo-body-bg !default; -/// Text color of a component. -/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`. -/// @group component -$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: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default; - - -/// The background of the components' chrome area. -$kendo-base-bg: #fafafa !default; -/// The text color of the components' chrome area. -$kendo-base-text: $kendo-body-text !default; -/// The border color of the components' chrome area. -$kendo-base-border: rgba( black, .08 ) !default; -/// The gradient background of the components' chrome area. -$kendo-base-gradient: rgba( black, 0 ), rgba( black, .02 ) !default; - -/// The background of hovered items. -$kendo-hover-bg: k-try-shade( $kendo-base-bg, .5 ) !default; -/// The text color of hovered items. -$kendo-hover-text: $kendo-base-text !default; -/// The border color of hovered items. -$kendo-hover-border: $kendo-base-border !default; -/// The gradient background of hovered items. -$kendo-hover-gradient: $kendo-base-gradient !default; - -/// The background of selected items. -$kendo-selected-bg: $kendo-color-primary !default; -/// The text color of selected items. -$kendo-selected-text: k-contrast-legacy( $kendo-selected-bg ) !default; -/// The border color of selected items. -$kendo-selected-border: $kendo-base-border !default; -/// The gradient background of selected items. -$kendo-selected-gradient: $kendo-base-gradient !default; - -/// The background of selected and hovered items. -$kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, .5 ) !default; -/// The text color of selected and hovered items. -$kendo-selected-hover-text: $kendo-selected-text !default; -/// The border of selected and hovered items. -$kendo-selected-hover-border: $kendo-base-border !default; -/// The gradient of selected and hovered items. -$kendo-selected-hover-gradient: $kendo-base-gradient !default; - // TODO: refactor /// Box shadow of focused items. $kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default; @@ -405,8 +228,6 @@ $kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default; $kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default; -/// Text color of disabled items. -$kendo-disabled-text: #8f8f8f !default; /// Filter used for disabled items. $kendo-disabled-filter: grayscale(.1) !default; /// Opacity used for disabled items. @@ -418,48 +239,6 @@ $kendo-disabled-styling: ( ) !default; -// Generic styles - -/// Background color of the component header. -/// @group component -$kendo-component-header-bg: $kendo-base-bg !default; -/// Text color of the component header. -/// @group component -$kendo-component-header-text: $kendo-base-text !default; -/// Border color of the component header. -/// @group component -$kendo-component-header-border: $kendo-base-border !default; -/// Gradient of the component header. -/// @group component -$kendo-component-header-gradient: null !default; - - -/// Background color of the invalid items. -/// @group component -$kendo-invalid-bg: null !default; -/// Text color of the invalid items. -/// @group component -$kendo-invalid-text: $kendo-color-error !default; -/// Border color of the invalid items. -/// @group component -$kendo-invalid-border: $kendo-color-error !default; -/// Shadow of the invalid items. -/// @group component -$kendo-invalid-shadow: null !default; - -/// Background color of the valid items. -/// @group component -$kendo-valid-bg: null !default; -/// Text color of the valid items. -/// @group component -$kendo-valid-text: $kendo-color-success !default; -/// Border color of the valid items. -/// @group component -$kendo-valid-border: $kendo-color-success !default; -/// Shadow of the valid items. -/// @group component -$kendo-valid-shadow: null !default; - // Loading $kendo-loading-opacity: .3 !default; $kendo-zindex-loading: 100 !default; diff --git a/packages/default/scss/adaptive/_variables.scss b/packages/default/scss/adaptive/_variables.scss index 30ecac04547..8651f2b7206 100644 --- a/packages/default/scss/adaptive/_variables.scss +++ b/packages/default/scss/adaptive/_variables.scss @@ -7,7 +7,7 @@ $kendo-adaptive-content-bg: $kendo-app-bg !default; $kendo-adaptive-content-text: $kendo-app-text !default; $kendo-adaptive-menu-bg: $kendo-color-primary !default; -$kendo-adaptive-menu-text: k-contrast-legacy( $kendo-adaptive-menu-bg ) !default; +$kendo-adaptive-menu-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-adaptive-menu-bg )) !default; $kendo-adaptive-menu-clear-text: $kendo-color-primary !default; diff --git a/packages/default/scss/appbar/_theme.scss b/packages/default/scss/appbar/_theme.scss index 69de20809de..66fa5ab1589 100644 --- a/packages/default/scss/appbar/_theme.scss +++ b/packages/default/scss/appbar/_theme.scss @@ -18,7 +18,7 @@ color: $kendo-appbar-dark-text; background-color: $kendo-appbar-dark-bg; } @else { - color: k-contrast-legacy( $color ); + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); background-color: $color; } } diff --git a/packages/default/scss/appbar/_variables.scss b/packages/default/scss/appbar/_variables.scss index c8c26b23d32..d9b86383ce8 100644 --- a/packages/default/scss/appbar/_variables.scss +++ b/packages/default/scss/appbar/_variables.scss @@ -37,14 +37,14 @@ $kendo-appbar-gap: k-map-get( $kendo-spacing, 2 ) !default; $kendo-appbar-light-bg: $kendo-color-light !default; /// The text color of the AppBar based on light theme color. /// @group appbar -$kendo-appbar-light-text: k-contrast-legacy( $kendo-color-light ) !default; +$kendo-appbar-light-text: if($kendo-enable-color-system, k-color( on-light ), k-contrast-legacy( $kendo-color-light )) !default; /// The background color of the AppBar based on dark theme color. /// @group appbar $kendo-appbar-dark-bg: $kendo-color-dark !default; /// The text color of the AppBar based on dark theme color. /// @group appbar -$kendo-appbar-dark-text: k-contrast-legacy( $kendo-color-dark ) !default; +$kendo-appbar-dark-text: if($kendo-enable-color-system, k-color( on-dark ), k-contrast-legacy( $kendo-color-dark )) !default; /// The box shadow of the AppBar. /// @group appbar diff --git a/packages/default/scss/avatar/_theme.scss b/packages/default/scss/avatar/_theme.scss index d051d667617..6d0801ece66 100644 --- a/packages/default/scss/avatar/_theme.scss +++ b/packages/default/scss/avatar/_theme.scss @@ -4,7 +4,7 @@ @each $name, $color in $kendo-avatar-theme-colors { .k-avatar-solid-#{$name} { border-color: $color; - color: k-contrast-legacy( $color ); + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); background-color: $color; } } diff --git a/packages/default/scss/badge/_theme.scss b/packages/default/scss/badge/_theme.scss index c89b4ec5372..183c4c06514 100644 --- a/packages/default/scss/badge/_theme.scss +++ b/packages/default/scss/badge/_theme.scss @@ -4,7 +4,7 @@ @each $name, $color in $kendo-theme-colors { .k-badge-solid-#{$name} { border-color: $color; - color: k-contrast-legacy( $color ); + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); background-color: $color; } } diff --git a/packages/default/scss/bottom-navigation/_theme.scss b/packages/default/scss/bottom-navigation/_theme.scss index 525fa184ebc..aa2edc7b593 100644 --- a/packages/default/scss/bottom-navigation/_theme.scss +++ b/packages/default/scss/bottom-navigation/_theme.scss @@ -4,17 +4,17 @@ @each $name, $color in $kendo-theme-colors { .k-bottom-nav-solid-#{$name} { @include fill( - $color: k-true-mix( $color, k-contrast-legacy( $color ), 35%), + $color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .65 ), k-true-mix( $color, k-contrast-legacy( $color ), 35%)), $bg: $color ); .k-bottom-nav-item.k-focus, .k-bottom-nav-item:focus { - @include fill( $bg: rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2)); + @include fill( $bg: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .125 ), rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2))); } .k-bottom-nav-item.k-selected { - @include fill( $color: k-contrast-legacy( $color ) ); + @include fill( $color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )) ); } } // TODO: remove when suites update class names @@ -34,12 +34,12 @@ .k-bottom-nav-item.k-focus, .k-bottom-nav-item:focus { - @include fill( $bg: rgba($kendo-bottom-nav-flat-text, .05) ); + @include fill( $bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05), rgba($kendo-bottom-nav-flat-text, .05)) ); } .k-bottom-nav-item.k-selected { @if $name == "secondary" or $name == "light" { - @include fill( $color: k-try-shade($color, 3) ); + @include fill( $color: if($kendo-enable-color-system, k-color( #{$name} ), k-try-shade($color, 3)) ); } @else { @include fill( $color: $color ); } diff --git a/packages/default/scss/button/_theme.scss b/packages/default/scss/button/_theme.scss index a3f9fca6bb7..7a77165263f 100644 --- a/packages/default/scss/button/_theme.scss +++ b/packages/default/scss/button/_theme.scss @@ -68,17 +68,17 @@ @each $name, $color in $kendo-button-theme-colors { @if ($name != "base") { - $_button-text: k-contrast-legacy( $color ); - $_button-bg: if( $kendo-solid-button-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null ); - $_button-border: if( $kendo-solid-button-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null ); + $_button-text: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); + $_button-bg: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null )); + $_button-border: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null )); $_button-hover-text: null; - $_button-hover-bg: if( $kendo-solid-button-hover-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null ); - $_button-hover-border: if( $kendo-solid-button-hover-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null ); + $_button-hover-bg: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null )); + $_button-hover-border: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null )); $_button-active-text: null; - $_button-active-bg: if( $kendo-solid-button-active-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null ); - $_button-active-border: if( $kendo-solid-button-active-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null ); + $_button-active-bg: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null )); + $_button-active-border: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null )); .k-button-solid-#{$name} { @include fill( @@ -102,7 +102,7 @@ &:focus, &.k-focus { @if ( $kendo-solid-button-shadow ) { - @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread rgba( $_button-border, $kendo-solid-button-shadow-opacity ), true, true ); + @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( $name, true ), $kendo-solid-button-shadow-opacity ), rgba( $_button-border, $kendo-solid-button-shadow-opacity )), true, true ); } } @@ -146,44 +146,72 @@ .k-button-outline-#{$name} { @include box-shadow( none ); border-color: currentColor; - color: $color; + color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color); background-color: transparent; // Hover state &:hover, &.k-hover { - @include fill( - k-contrast-legacy( $color ), - $color, - $color - ); + @if $name == "base" { + @include fill( + if($kendo-enable-color-system, $kendo-base-bg, k-contrast-legacy( $color )), + $color, + $color + ); + } @else { + @include fill( + if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + $color, + $color + ); + } } // Focus state &:focus, &.k-focus { @if $kendo-outline-button-shadow { - @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread rgba( $color, $kendo-outline-button-shadow-opacity ), true, true ); + @if $name == "base" { + @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), $kendo-outline-button-shadow-opacity ), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true ); + } @else { + @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( $name, true ), $kendo-outline-button-shadow-opacity ), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true ); + } } } // Active state &:active, &.k-active { - @include fill( - k-contrast-legacy( $color ), - $color, - $color - ); + @if $name == "base" { + @include fill( + if($kendo-enable-color-system, $kendo-base-bg, k-contrast-legacy( $color )), + $color, + $color + ); + } @else { + @include fill( + if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + $color, + $color + ); + } } // Selected &.k-selected { - @include fill( - k-contrast-legacy( $color ), - $color, - $color - ); + @if $name == "base" { + @include fill( + if($kendo-enable-color-system, $kendo-base-bg, k-contrast-legacy( $color )), + $color, + $color + ); + } @else { + @include fill( + if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + $color, + $color + ); + } } // Disabled state @@ -217,26 +245,42 @@ // Hover &:hover, &.k-hover { - color: k-try-shade( $color, 2 ); + @if $name == "base" { + color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 )); + } @else { + color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 2 )); + } } // Focus &:focus, &.k-focus { @if ( $kendo-link-button-shadow ) { - @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread rgba( $color, $kendo-link-button-shadow-opacity ), true, true ); + @if $name == "base" { + @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), $kendo-link-button-shadow-opacity ), rgba( $color, $kendo-link-button-shadow-opacity )), true, true ); + } @else { + @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( $name, true ), $kendo-link-button-shadow-opacity ), rgba( $color, $kendo-link-button-shadow-opacity )), true, true ); + } } } // Active &:active, &.k-active { - color: k-try-shade( $color, 2 ); + @if $name == "base" { + color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 )); + } @else { + color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 )); + } } // Selected &.k-selected { - color: k-try-shade( $color, 2 ); + @if $name == "base" { + color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 )); + } @else { + color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 )); + } } // Disabled state @@ -281,4 +325,4 @@ @mixin kendo-button--theme() { @include kendo-button--theme-base(); -} +} \ No newline at end of file diff --git a/packages/default/scss/button/_variables.scss b/packages/default/scss/button/_variables.scss index cb5bef7618e..331e9dbae62 100644 --- a/packages/default/scss/button/_variables.scss +++ b/packages/default/scss/button/_variables.scss @@ -105,28 +105,28 @@ $kendo-button-sizes: ( /// @group button $kendo-button-theme-colors: k-map-merge( $kendo-theme-colors, - ( "base": #f5f5f5 ) + ( "base": if($kendo-enable-color-system, k-color( base ), #f5f5f5) ) ) !default; /// The base background of the Button. /// @group button -$kendo-button-bg: #f5f5f5 !default; +$kendo-button-bg: if($kendo-enable-color-system, k-color( base ), #f5f5f5) !default; /// The base text color of the Button. /// @group button -$kendo-button-text: #424242 !default; +$kendo-button-text: if($kendo-enable-color-system, k-color( on-base ), #424242) !default; /// The base border color of the Button. /// @group button -$kendo-button-border: rgba( black, .08 ) !default; +$kendo-button-border: if($kendo-enable-color-system, k-color( border ), rgba( black, .08 )) !default; /// The base background gradient of the Button. /// @group button -$kendo-button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default; +$kendo-button-gradient: if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) !default; /// The base shadow of the Button. /// @group button $kendo-button-shadow: null !default; /// The base background of the hovered Button. /// @group button -$kendo-button-hover-bg: k-try-shade( $kendo-button-bg, .5 ) !default; +$kendo-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, .5 )) !default; /// The base text color of the hovered Button. /// @group button $kendo-button-hover-text: null !default; @@ -142,7 +142,7 @@ $kendo-button-hover-shadow: null !default; /// The base background color of the active Button. /// @group button -$kendo-button-active-bg: k-try-shade( $kendo-button-bg, 1.5 ) !default; +$kendo-button-active-bg: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 1.5 )) !default; /// The base text color of the active Button. /// @group button $kendo-button-active-text: null !default; @@ -161,7 +161,7 @@ $kendo-button-active-shadow: null !default; $kendo-button-selected-bg: $kendo-color-primary !default; /// The text color of the selected Button. /// @group button -$kendo-button-selected-text: k-contrast-legacy( $kendo-button-selected-bg ) !default; +$kendo-button-selected-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg )) !default; /// The border color of the selected Button. /// @group button $kendo-button-selected-border: $kendo-button-selected-bg !default; @@ -186,7 +186,7 @@ $kendo-button-focus-border: null !default; $kendo-button-focus-gradient: null !default; /// The base shadow of the focused Button. /// @group button -$kendo-button-focus-shadow: 0 0 0 2px rgba( $kendo-button-border, .08 ) !default; +$kendo-button-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08), rgba( $kendo-button-border, .08 )) !default; /// The base background of the disabled Button. /// @group button @@ -205,7 +205,7 @@ $kendo-button-disabled-gradient: null !default; $kendo-button-disabled-shadow: null !default; // Solid Button -$kendo-solid-button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default; +$kendo-solid-button-gradient: if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) !default; $kendo-solid-button-shade-function: "k-try-shade" !default; $kendo-solid-button-shade-text-amount: 0 !default; $kendo-solid-button-shade-bg-amount: 0 !default; diff --git a/packages/default/scss/calendar/_theme.scss b/packages/default/scss/calendar/_theme.scss index 998902435ae..d96f3a45b5b 100644 --- a/packages/default/scss/calendar/_theme.scss +++ b/packages/default/scss/calendar/_theme.scss @@ -159,7 +159,7 @@ .k-calendar { // stylelint-disable-line $kendo-calendar-range-gap: 1px !default; - $kendo-calendar-range-bg: rgba( $kendo-calendar-cell-selected-bg, .25 ); + $kendo-calendar-range-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-calendar-cell-selected-bg, .25 )); $kendo-calendar-range-split-size: 5px !default; .k-range-start, diff --git a/packages/default/scss/card/_theme.scss b/packages/default/scss/card/_theme.scss index 53d9a7590de..c1005b86385 100644 --- a/packages/default/scss/card/_theme.scss +++ b/packages/default/scss/card/_theme.scss @@ -64,9 +64,9 @@ // Card theme colors @each $name, $color in $kendo-theme-colors { .k-card-#{$name} { - background-color: k-color-tint($color, 10); - color: k-color-shade($color, 6); - border-color: k-color-tint($color, 9); + background-color: if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-color-tint($color, 10)); + color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-color-shade($color, 6)); + border-color: if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-color-tint($color, 9)); .k-card-subtitle { color: inherit; diff --git a/packages/default/scss/chat/_variables.scss b/packages/default/scss/chat/_variables.scss index 59063ea7be3..68edc4fdb71 100644 --- a/packages/default/scss/chat/_variables.scss +++ b/packages/default/scss/chat/_variables.scss @@ -57,7 +57,7 @@ $kendo-chat-bubble-hover-shadow: k-elevation(2) !default; $kendo-chat-bubble-selected-shadow: k-elevation(3) !default; $kendo-chat-alt-bubble-bg: $kendo-color-primary !default; -$kendo-chat-alt-bubble-text: k-contrast-legacy( $kendo-chat-alt-bubble-bg ) !default; +$kendo-chat-alt-bubble-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg )) !default; $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default; $kendo-chat-alt-bubble-shadow: k-elevation(1) !default; $kendo-chat-alt-bubble-hover-shadow: k-elevation(2) !default; diff --git a/packages/default/scss/checkbox/_variables.scss b/packages/default/scss/checkbox/_variables.scss index 6a3e18ce612..7ba4aaf5f29 100644 --- a/packages/default/scss/checkbox/_variables.scss +++ b/packages/default/scss/checkbox/_variables.scss @@ -81,7 +81,7 @@ $kendo-checkbox-hover-border: null !default; $kendo-checkbox-checked-bg: $kendo-color-primary !default; /// The text color of the checked CheckBox. /// @group checkbox -$kendo-checkbox-checked-text: k-contrast-legacy( $kendo-checkbox-checked-bg ) !default; +$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) !default; /// The border color of the checked CheckBox. /// @group checkbox $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default; @@ -107,7 +107,7 @@ $kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default; $kendo-checkbox-focus-checked-border: null !default; /// The box shadow of the focused and checked CheckBox. /// @group checkbox -$kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( $kendo-color-primary, .3 ) !default; +$kendo-checkbox-focus-checked-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 )) !default; /// The background color of the disabled CheckBox. /// @group checkbox diff --git a/packages/default/scss/chip/_theme.scss b/packages/default/scss/chip/_theme.scss index ae947c27928..24e739f9ebc 100644 --- a/packages/default/scss/chip/_theme.scss +++ b/packages/default/scss/chip/_theme.scss @@ -28,24 +28,24 @@ } } @else { @include fill( - k-try-shade( $color, 65% ), - k-try-tint( $color, 80% ), - k-try-tint( $color, 25% ), + if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 65% )), + if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-try-tint( $color, 80% )), + if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-try-tint( $color, 25% )), $kendo-chip-solid-gradient ); &:focus, &.k-focus { - @include focus-indicator( 0 0 0 2px rgba( $color, .16 ) ); + @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), rgba( $color, .16 )) ); } &:hover, &.k-hover { - @include fill( $bg: k-try-tint($color, 65% ) ); + @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint($color, 65% )) ); } &.k-selected { - @include fill( $bg: k-try-tint( $color, 50% ) ); + @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 50% )) ); } } } @@ -83,54 +83,56 @@ } } @else if ($name == "warning") { @include fill( - if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text), - if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ), - if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color) + if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)), + if($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )), + if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)) ); &:focus, &.k-focus { - @include focus-indicator( 0 0 0 2px if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) ); + @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) ); } &:hover, &.k-hover { @include fill( - $color: if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) , - $bg: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color) + $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )), + $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)) ); } &.k-selected { @include fill( - $color: if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) , - $bg: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color) + $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )), + $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)) ); } } @else { @include fill( - k-try-shade( $color, 25% ), - if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ), - k-try-shade( $color, 25% ) + if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )), + if($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )), + if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )) ); &:focus, &.k-focus { - @include focus-indicator( 0 0 0 2px if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) ); + @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) ); } &:hover, &.k-hover { @include fill( - $color: k-contrast-legacy( k-try-shade( $color, 25% ) ), - $bg: k-try-shade( $color, 25% ) + if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )), + if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )), + if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )) ); } &.k-selected { @include fill( - $color: k-contrast-legacy( k-try-shade( $color, 25% ) ), - $bg: k-try-shade( $color, 25% ) + if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )), + if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )), + if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )) ); } } diff --git a/packages/default/scss/chip/_variables.scss b/packages/default/scss/chip/_variables.scss index 8eb97800bbd..fa4d1d79b14 100644 --- a/packages/default/scss/chip/_variables.scss +++ b/packages/default/scss/chip/_variables.scss @@ -92,7 +92,7 @@ $kendo-chip-sizes: ( /// The base background of the Chip. /// @group chip -$kendo-chip-base-bg: $kendo-button-bg !default; +$kendo-chip-base-bg: if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg) !default; /// The theme colors map for the Chip. /// @group chip @@ -115,7 +115,7 @@ $kendo-chip-solid-text: $kendo-button-text !default; $kendo-chip-solid-border: $kendo-button-border !default; /// The base shadow of the solid Chip. /// @group chip -$kendo-chip-solid-shadow: 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ) !default; +$kendo-chip-solid-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default; /// The base gradient of the solid Chip. /// @group chip $kendo-chip-solid-gradient: $kendo-button-gradient !default; @@ -129,7 +129,7 @@ $kendo-chip-solid-focus-text: null !default; /// The base background color of the hovered solid Chip. /// @group chip -$kendo-chip-solid-hover-bg: $kendo-button-hover-bg !default; +$kendo-chip-solid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg) !default; /// The base text color of the hovered solid Chip. /// @group chip $kendo-chip-solid-hover-text: null !default; @@ -152,14 +152,14 @@ $kendo-chip-outline-text: $kendo-chip-solid-text !default; $kendo-chip-outline-border: $kendo-chip-outline-text !default; /// The base shadow of the outline Chip. /// @group chip -$kendo-chip-outline-shadow: 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ) !default; +$kendo-chip-outline-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default; /// The base background color of the hovered outline Chip. /// @group chip $kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default; /// The base text color of the hovered outline Chip. /// @group chip -$kendo-chip-outline-hover-text: k-contrast-legacy( $kendo-chip-outline-hover-bg ) !default; +$kendo-chip-outline-hover-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) !default; /// The base background color of the selected outline Chip. /// @group chip diff --git a/packages/default/scss/core/_index.scss b/packages/default/scss/core/_index.scss index 84b4130c27d..2886358e355 100644 --- a/packages/default/scss/core/_index.scss +++ b/packages/default/scss/core/_index.scss @@ -1,10 +1,16 @@ $wcag-min-contrast-ratio: 4.5 !default; +// Color System +@import "./color-system/_swatch.scss"; + // Variables @import "../_variables.scss"; @import "@progress/kendo-theme-core/scss/index.import.scss"; +// Backward compatibility +@import "./color-system/_swatch-legacy.scss"; + // Expose @include exports("kendo-core-styles") { @include kendo-core--styles(); diff --git a/packages/default/scss/core/color-system/_palettes.scss b/packages/default/scss/core/color-system/_palettes.scss new file mode 100644 index 00000000000..a85906a2110 --- /dev/null +++ b/packages/default/scss/core/color-system/_palettes.scss @@ -0,0 +1,256 @@ +$_default-palette-gray: ( + white: #ffffff, + 1: #fafafa, + 2: #f5f5f5, + 3: #ebebeb, + 4: #e0e0e0, + 5: #d6d6d6, + 6: #c2c2c2, + 7: #adadad, + 8: #999999, + 9: #808080, + 10: #666666, + 11: #525252, + 12: #3d3d3d, + 13: #292929, + 14: #1f1f1f, + 15: #141414, + black: #000000, +); + +$_default-palette-coral: ( + 1: #fff6f5, + 2: #ffeceb, + 3: #ffdedb, + 4: #ffc8c4, + 5: #ffb1ac, + 6: #ff9d97, + 7: #ff8a82, + 8: #ff766d, + 9: #ff6358, + 10: #ea5a51, + 11: #d45349, + 12: #bf4a42, + 13: #a33f38, + 14: #80322c, + 15: #5c201c, +); + +$_default-palette-sky-blue: ( + 1: #ebf8fe, + 2: #d8f1fd, + 3: #c5eafc, + 4: #a3dffb, + 5: #81d4fA, + 6: #61c9f9, + 7: #42bff7, + 8: #22b3f5, + 9: #03a9f4, + 10: #039ae0, + 11: #028ccb, + 12: #027fb7, + 13: #026999, + 14: #02557a, + 15: #023f5c, +); + +$_default-palette-green: ( + 1: #edf8e9, + 2: #dcf0d3, + 3: #cbe9bf, + 4: #b7e1a5, + 5: #9bda80, + 6: #81d15f, + 7: #69c740, + 8: #4ebe1f, + 9: #37b400, + 10: #32a500, + 11: #2d9600, + 12: #298700, + 13: #227100, + 14: #1c5a00, + 15: #1c5a00, +); + +$_default-palette-blue: ( + 1: #e9f0fd, + 2: #d2e2fb, + 3: #bdd4f8, + 4: #9ec0f6, + 5: #80acf4, + 6: #6098f2, + 7: #4082ef, + 8: #206eec, + 9: #0058e9, + 10: #0052d6, + 11: #004ac2, + 12: #0042af, + 13: #003892, + 14: #002c75, + 15: #002259, +); + +$_default-palette-yellow: ( + 1: #fffae9, + 2: #fff4d3, + 3: #ffeebd, + 4: #ffe79e, + 5: #ffe080, + 6: #ffd760, + 7: #ffd040, + 8: #ffc720, + 9: #ffc000, + 10: #eaaf00, + 11: #d49f00, + 12: #bf9000, + 13: #a07800, + 14: #806000, + 15: #5e4700, +); + +$_default-palette-red: ( + 1: #feeeed, + 2: #fcddda, + 3: #fbc8c3, + 4: #faaaa2, + 5: #f98b80, + 6: #f76f60, + 7: #f65140, + 8: #f43520, + 9: #f31700, + 10: #df1600, + 11: #ca1400, + 12: #b61100, + 13: #980f00, + 14: #7a0c00, + 15: #7a0c00, +); + +$_default-palette-lemon-yellow: ( + 1: #fffcf1, + 2: #fffae2, + 3: #fff7d4, + 4: #fff4c2, + 5: #fff0b1, + 6: #ffed9d, + 7: #ffe989, + 8: #ffe676, + 9: #ffe162, + 10: #ead05a, + 11: #d4bc52, + 12: #bfa94a, + 13: #a3913f, + 14: #807131, + 15: #5c5223, +); + +$_default-palette-spring-green: ( + 1: #effaf3, + 2: #e0f6e8, + 3: #d1f1dd, + 4: #c0edd1, + 5: #a6e8c0, + 6: #8fe2af, + 7: #79dda0, + 8: #62d78f, + 9: #4cd180, + 10: #46c074, + 11: #3fae6a, + 12: #399d60, + 13: #2f834f, + 14: #266940, + 15: #1c4f30, +); + +$_default-palette-royal-blue: ( + 1: #f0f2ff, + 2: #e1e4fe, + 3: #d2d7fe, + 4: #bbc3fd, + 5: #a5affd, + 6: #8e9bfc, + 7: #7887fb, + 8: #6173fb, + 9: #4b5ffa, + 10: #4558e5, + 11: #3f50d1, + 12: #3847bc, + 13: #2f3c9d, + 14: #26307d, + 15: #1c245e, +); + +$_default-palette-lavender-purple: ( + 1: #f7f0ff, + 2: #f0e0ff, + 3: #e8d1ff, + 4: #dfbfff, + 5: #d6acff, + 6: #cc97ff, + 7: #c182ff, + 8: #b76dff, + 9: #ac58ff, + 10: #9e51ea, + 11: #8f49d4, + 12: #8142bf, + 13: #6b37a0, + 14: #562c80, + 15: #3f205e, +); + +$_default-palette-flamingo-pink: ( + 1: #fff0f5, + 2: #ffe1eb, + 3: #ffd1e1, + 4: #ffbfd6, + 5: #ffacc9, + 6: #ff97bb, + 7: #ff82ae, + 8: #ff6da0, + 9: #ff5892, + 10: #ea5186, + 11: #d4497a, + 12: #bf426e, + 13: #a0375c, + 14: #802c49, + 15: #5e2036, +); + + +// stylelint-disable scss/no-global-function-names +$kendo-palette-gray: $_default-palette-gray !default; +$kendo-palette-gray: map-merge($_default-palette-gray, $kendo-palette-gray); + +$kendo-palette-coral: $_default-palette-coral !default; +$kendo-palette-coral: map-merge($_default-palette-coral, $kendo-palette-coral); + +$kendo-palette-sky-blue: $_default-palette-sky-blue !default; +$kendo-palette-sky-blue: map-merge($_default-palette-sky-blue, $kendo-palette-sky-blue); + +$kendo-palette-green: $_default-palette-green !default; +$kendo-palette-green: map-merge($_default-palette-green, $kendo-palette-green); + +$kendo-palette-blue: $_default-palette-blue !default; +$kendo-palette-blue: map-merge($_default-palette-blue, $kendo-palette-blue); + +$kendo-palette-yellow: $_default-palette-yellow !default; +$kendo-palette-yellow: map-merge($_default-palette-yellow, $kendo-palette-yellow); + +$kendo-palette-red: $_default-palette-red !default; +$kendo-palette-red: map-merge($_default-palette-red, $kendo-palette-red); + +$kendo-palette-lemon-yellow: $_default-palette-lemon-yellow !default; +$kendo-palette-lemon-yellow: map-merge($_default-palette-lemon-yellow, $kendo-palette-lemon-yellow); + +$kendo-palette-spring-green: $_default-palette-spring-green !default; +$kendo-palette-spring-green: map-merge($_default-palette-spring-green, $kendo-palette-spring-green); + +$kendo-palette-royal-blue: $_default-palette-royal-blue !default; +$kendo-palette-royal-blue: map-merge($_default-palette-royal-blue, $kendo-palette-royal-blue); + +$kendo-palette-lavender-purple: $_default-palette-lavender-purple !default; +$kendo-palette-lavender-purple: map-merge($_default-palette-lavender-purple, $kendo-palette-lavender-purple); + +$kendo-palette-flamingo-pink: $_default-palette-flamingo-pink !default; +$kendo-palette-flamingo-pink: map-merge($_default-palette-flamingo-pink, $kendo-palette-flamingo-pink); +// stylelint-enable scss/no-global-function-names \ No newline at end of file diff --git a/packages/default/scss/core/color-system/_swatch-legacy.scss b/packages/default/scss/core/color-system/_swatch-legacy.scss new file mode 100644 index 00000000000..961267a7a57 --- /dev/null +++ b/packages/default/scss/core/color-system/_swatch-legacy.scss @@ -0,0 +1,62 @@ +@if ($kendo-enable-color-system) { + $kendo-color-primary: k-color( primary ); + $kendo-color-primary-contrast: k-color( on-primary ); + $kendo-color-secondary: k-color( secondary ); + $kendo-color-tertiary: k-color( tertiary ); + $kendo-color-info: k-color( info ); + $kendo-color-success: k-color( success ); + $kendo-color-warning: k-color( warning ); + $kendo-color-error: k-color( error ); + $kendo-color-dark: k-color( dark ); + $kendo-color-light: k-color( light ); + $kendo-color-inverse: $kendo-color-dark; + $kendo-body-bg: k-color( app-surface ); + $kendo-body-text: k-color( on-app-surface ); + $kendo-subtle-text: k-color( subtle ); + $kendo-app-bg: k-color( surface ); + $kendo-app-text: $kendo-body-text; + $kendo-app-border: k-color( border ); + $kendo-link-text: $kendo-color-primary; + $kendo-link-hover-text: k-color( primary-hover ); + $kendo-component-bg: $kendo-body-bg; + $kendo-component-text: $kendo-body-text; + $kendo-component-border: $kendo-app-border; + $kendo-base-bg: k-color( surface ); + $kendo-base-text: $kendo-body-text; + $kendo-base-border: $kendo-app-border; + $kendo-base-gradient: null; + $kendo-hover-bg: k-color( base-hover ); + $kendo-hover-text: $kendo-base-text; + $kendo-hover-border: $kendo-base-border; + $kendo-hover-gradient: null; + $kendo-selected-bg: $kendo-color-primary; + $kendo-selected-text: $kendo-color-primary-contrast; + $kendo-selected-border: $kendo-base-border; + $kendo-selected-gradient: $kendo-base-gradient; + $kendo-selected-hover-bg: k-color( primary-hover ); + $kendo-selected-hover-text: $kendo-selected-text; + $kendo-selected-hover-border: $kendo-base-border; + $kendo-selected-hover-gradient: $kendo-base-gradient; + $kendo-disabled-text: k-color( on-app-surface ); + $kendo-component-header-bg: $kendo-base-bg; + $kendo-component-header-text: $kendo-base-text; + $kendo-component-header-border: $kendo-base-border; + $kendo-component-header-gradient: null; + $kendo-invalid-bg: null; + $kendo-invalid-text: $kendo-color-error; + $kendo-invalid-border: $kendo-color-error; + $kendo-invalid-shadow: null; + + $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, + ); +} diff --git a/packages/default/scss/core/color-system/_swatch.scss b/packages/default/scss/core/color-system/_swatch.scss new file mode 100644 index 00000000000..389f2432f70 --- /dev/null +++ b/packages/default/scss/core/color-system/_swatch.scss @@ -0,0 +1,397 @@ +@import "@progress/kendo-theme-core/scss/functions/index.import.scss"; +@import "@progress/kendo-theme-core/scss/color-system/_constants.scss"; +@import "./_palettes.scss"; + +// Config +$kendo-enable-color-system: false !default; + +// Colors +$_default-colors: ( + // Misc + app-surface: k-map-get( $kendo-palette-gray, white ), + on-app-surface: k-map-get( $kendo-palette-gray, 12 ), + subtle: k-map-get( $kendo-palette-gray, 10 ), + surface: k-map-get( $kendo-palette-gray, 1 ), + surface-alt: k-map-get( $kendo-palette-gray, white ), + border: rgba( k-map-get( $kendo-palette-gray, black ), .08), + border-alt: rgba( k-map-get( $kendo-palette-gray, black ), .16), + // Base + base-subtle: k-map-get( $kendo-palette-gray, 3 ), + base-subtle-hover: k-map-get( $kendo-palette-gray, 4 ), + base-subtle-active: k-map-get( $kendo-palette-gray, 5 ), + base: k-map-get( $kendo-palette-gray, 2 ), + base-hover: k-map-get( $kendo-palette-gray, 3 ), + base-active: k-map-get( $kendo-palette-gray, 5 ), + base-emphasis: k-map-get( $kendo-palette-gray, 6 ), + base-on-subtle: k-map-get( $kendo-palette-gray, 12 ), + on-base: k-map-get( $kendo-palette-gray, 12 ), + base-on-surface: k-map-get( $kendo-palette-gray, 12 ), + // Primary + primary-subtle: k-map-get( $kendo-palette-coral, 2 ), + primary-subtle-hover: k-map-get( $kendo-palette-coral, 3 ), + primary-subtle-active: k-map-get( $kendo-palette-coral, 4 ), + primary: k-map-get( $kendo-palette-coral, 9 ), + primary-hover: k-map-get( $kendo-palette-coral, 10 ), + primary-active: k-map-get( $kendo-palette-coral, 11 ), + primary-emphasis: k-map-get( $kendo-palette-coral, 6 ), + primary-on-subtle: k-map-get( $kendo-palette-coral, 15 ), + on-primary: k-map-get( $kendo-palette-gray, white ), + primary-on-surface: k-map-get( $kendo-palette-coral, 9 ), + // Secondary + secondary-subtle: k-map-get( $kendo-palette-gray, 1 ), + secondary-subtle-hover: k-map-get( $kendo-palette-gray, 2 ), + secondary-subtle-active: k-map-get( $kendo-palette-gray, 3 ), + secondary: k-map-get( $kendo-palette-gray, 10 ), + secondary-hover: k-map-get( $kendo-palette-gray, 11 ), + secondary-active: k-map-get( $kendo-palette-gray, 12 ), + secondary-emphasis: k-map-get( $kendo-palette-gray, 4 ), + secondary-on-subtle: k-map-get( $kendo-palette-gray, 15 ), + on-secondary: k-map-get( $kendo-palette-gray, white ), + secondary-on-surface: k-map-get( $kendo-palette-gray, 13 ), + // Tertiary + tertiary-subtle: k-map-get( $kendo-palette-sky-blue, 2 ), + tertiary-subtle-hover: k-map-get( $kendo-palette-sky-blue, 3 ), + tertiary-subtle-active: k-map-get( $kendo-palette-sky-blue, 4 ), + tertiary: k-map-get( $kendo-palette-sky-blue, 9 ), + tertiary-hover: k-map-get( $kendo-palette-sky-blue, 10 ), + tertiary-active: k-map-get( $kendo-palette-sky-blue, 11 ), + tertiary-emphasis: k-map-get( $kendo-palette-sky-blue, 6 ), + tertiary-on-subtle: k-map-get( $kendo-palette-sky-blue, 15 ), + on-tertiary: k-map-get( $kendo-palette-gray, white ), + tertiary-on-surface: k-map-get( $kendo-palette-sky-blue, 11 ), + // Info + info-subtle: k-map-get( $kendo-palette-blue, 2 ), + info-subtle-hover: k-map-get( $kendo-palette-blue, 3 ), + info-subtle-active: k-map-get( $kendo-palette-blue, 5 ), + info: k-map-get( $kendo-palette-blue, 9 ), + info-hover: k-map-get( $kendo-palette-blue, 10 ), + info-active: k-map-get( $kendo-palette-blue, 11 ), + info-emphasis: k-map-get( $kendo-palette-blue, 6 ), + info-on-subtle: k-map-get( $kendo-palette-blue, 15 ), + on-info: k-map-get( $kendo-palette-gray, white ), + info-on-surface: k-map-get( $kendo-palette-blue, 11 ), + // Success + success-subtle: k-map-get( $kendo-palette-green, 2 ), + success-subtle-hover: k-map-get( $kendo-palette-green, 3 ), + success-subtle-active: k-map-get( $kendo-palette-green, 4 ), + success: k-map-get( $kendo-palette-green, 9 ), + success-hover: k-map-get( $kendo-palette-green, 10 ), + success-active: k-map-get( $kendo-palette-green, 11 ), + success-emphasis: k-map-get( $kendo-palette-green, 6 ), + success-on-subtle: k-map-get( $kendo-palette-green, 15 ), + on-success: k-map-get( $kendo-palette-gray, white ), + success-on-surface: k-map-get( $kendo-palette-green, 11 ), + // Warning + warning-subtle: k-map-get( $kendo-palette-yellow, 2 ), + warning-subtle-hover: k-map-get( $kendo-palette-yellow, 3 ), + warning-subtle-active: k-map-get( $kendo-palette-yellow, 4 ), + warning: k-map-get( $kendo-palette-yellow, 9 ), + warning-hover: k-map-get( $kendo-palette-yellow, 10 ), + warning-active: k-map-get( $kendo-palette-yellow, 11 ), + warning-emphasis: k-map-get( $kendo-palette-yellow, 6 ), + warning-on-subtle: k-map-get( $kendo-palette-yellow, 15 ), + on-warning: k-map-get( $kendo-palette-gray, 12 ), + warning-on-surface: k-map-get( $kendo-palette-yellow, 9 ), + // Error + error-subtle: k-map-get( $kendo-palette-red, 2 ), + error-subtle-hover: k-map-get( $kendo-palette-red, 3 ), + error-subtle-active: k-map-get( $kendo-palette-red, 5 ), + error: k-map-get( $kendo-palette-red, 9 ), + error-hover: k-map-get( $kendo-palette-red, 10 ), + error-active: k-map-get( $kendo-palette-red, 11 ), + error-emphasis: k-map-get( $kendo-palette-red, 6 ), + error-on-subtle: k-map-get( $kendo-palette-red, 15 ), + on-error: k-map-get( $kendo-palette-gray, white ), + error-on-surface: k-map-get( $kendo-palette-red, 11 ), + // Light + light-subtle: k-map-get( $kendo-palette-gray, 1 ), + light-subtle-hover: k-map-get( $kendo-palette-gray, 2 ), + light-subtle-active: k-map-get( $kendo-palette-gray, 3 ), + light: k-map-get( $kendo-palette-gray, 3 ), + light-hover: k-map-get( $kendo-palette-gray, 4 ), + light-active: k-map-get( $kendo-palette-gray, 5 ), + light-emphasis: k-map-get( $kendo-palette-gray, 5 ), + light-on-subtle: k-map-get( $kendo-palette-gray, 15 ), + on-light: k-map-get( $kendo-palette-gray, black ), + light-on-surface: k-map-get( $kendo-palette-gray, 4 ), + // Dark + dark-subtle: k-map-get( $kendo-palette-gray, 6 ), + dark-subtle-hover: k-map-get( $kendo-palette-gray, 7 ), + dark-subtle-active: k-map-get( $kendo-palette-gray, 8 ), + dark: k-map-get( $kendo-palette-gray, 12 ), + dark-hover: k-map-get( $kendo-palette-gray, 13 ), + dark-active: k-map-get( $kendo-palette-gray, 14 ), + dark-emphasis: k-map-get( $kendo-palette-gray, 10 ), + dark-on-subtle: k-map-get( $kendo-palette-gray, 14 ), + on-dark: k-map-get( $kendo-palette-gray, white ), + dark-on-surface: k-map-get( $kendo-palette-gray, 15 ), + // Inverse + inverse-subtle: k-map-get( $kendo-palette-gray, 6 ), + inverse-subtle-hover: k-map-get( $kendo-palette-gray, 7 ), + inverse-subtle-active: k-map-get( $kendo-palette-gray, 8 ), + inverse: k-map-get( $kendo-palette-gray, 12 ), + inverse-hover: k-map-get( $kendo-palette-gray, 13 ), + inverse-active: k-map-get( $kendo-palette-gray, 14 ), + inverse-emphasis: k-map-get( $kendo-palette-gray, 10 ), + inverse-on-subtle: k-map-get( $kendo-palette-gray, 14 ), + on-inverse: k-map-get( $kendo-palette-gray, white ), + inverse-on-surface: k-map-get( $kendo-palette-gray, 15 ), + // Series A + series-a: k-map-get( $kendo-palette-coral, 9 ), + series-a-dark: k-map-get( $kendo-palette-coral, 12 ), + series-a-darker: k-map-get( $kendo-palette-coral, 14 ), + series-a-light: k-map-get( $kendo-palette-coral, 5 ), + series-a-lighter: k-map-get( $kendo-palette-coral, 7 ), + // Series B + series-b: k-map-get( $kendo-palette-lemon-yellow, 9 ), + series-b-dark: k-map-get( $kendo-palette-lemon-yellow, 12 ), + series-b-darker: k-map-get( $kendo-palette-lemon-yellow, 14 ), + series-b-light: k-map-get( $kendo-palette-lemon-yellow, 5 ), + series-b-lighter: k-map-get( $kendo-palette-lemon-yellow, 7 ), + // Series C + series-c: k-map-get( $kendo-palette-spring-green, 9 ), + series-c-dark: k-map-get( $kendo-palette-spring-green, 12 ), + series-c-darker: k-map-get( $kendo-palette-spring-green, 14 ), + series-c-light: k-map-get( $kendo-palette-spring-green, 5 ), + series-c-lighter: k-map-get( $kendo-palette-spring-green, 7 ), + // Series D + series-d: k-map-get( $kendo-palette-royal-blue, 9 ), + series-d-dark: k-map-get( $kendo-palette-royal-blue, 12 ), + series-d-darker: k-map-get( $kendo-palette-royal-blue, 14 ), + series-d-light: k-map-get( $kendo-palette-royal-blue, 5 ), + series-d-lighter: k-map-get( $kendo-palette-royal-blue, 7 ), + // Series Е + series-e: k-map-get( $kendo-palette-lavender-purple, 9 ), + series-e-dark: k-map-get( $kendo-palette-lavender-purple, 12 ), + series-e-darker: k-map-get( $kendo-palette-lavender-purple, 14 ), + series-e-light: k-map-get( $kendo-palette-lavender-purple, 5 ), + series-e-lighter: k-map-get( $kendo-palette-lavender-purple, 7 ), + // Series F + series-f: k-map-get( $kendo-palette-flamingo-pink, 9 ), + series-f-dark: k-map-get( $kendo-palette-flamingo-pink, 12 ), + series-f-darker: k-map-get( $kendo-palette-flamingo-pink, 14 ), + series-f-light: k-map-get( $kendo-palette-flamingo-pink, 5 ), + series-f-lighter: k-map-get( $kendo-palette-flamingo-pink, 7 ), +) !default; + +/// The global default Colors map. +/// @group color-system +$kendo-colors: $_default-colors !default; + +$kendo-is-dark-theme: false !default; + +// Theme colors +/// The color that focuses the user attention. +/// Used for primary buttons and for elements of primary importance across the theme. +/// @group color-system +/// @type Color +$kendo-color-primary: #ff6358 !default; +$kendo-color-primary-lighter: k-color-tint($kendo-color-primary, 2) !default; +$kendo-color-primary-darker: k-color-shade($kendo-color-primary, 2) !default; +/// The color used along with the primary color denoted by $kendo-color-primary. +/// Used to provide contrast between the background and foreground colors. +/// @group color-system +/// @type Color +$kendo-color-primary-contrast: k-contrast-legacy($kendo-color-primary) !default; + +/// The secondary color of the theme. +/// @group color-system +/// @type Color +$kendo-color-secondary: #666666 !default; +$kendo-color-secondary-lighter: k-color-tint($kendo-color-secondary, 2) !default; +$kendo-color-secondary-darker: k-color-shade($kendo-color-secondary, 2) !default; + +/// The color used along with the secondary color denoted by $kendo-color-secondary. +/// Used to provide contrast between the background and foreground colors. +/// @group color-system +/// @type Color +$kendo-color-secondary-contrast: k-contrast-legacy($kendo-color-secondary) !default; + +/// The tertiary color of the theme. +/// @group color-system +/// @type Color +$kendo-color-tertiary: #03a9f4 !default; +$kendo-color-tertiary-lighter: k-color-tint($kendo-color-tertiary, 2) !default; +$kendo-color-tertiary-darker: k-color-shade($kendo-color-tertiary, 2) !default; + +/// The color used along with the tertiary color denoted by $kendo-color-tertiary. +/// Used to provide contrast between the background and foreground colors. +/// @group color-system +/// @type Color +$kendo-color-tertiary-contrast: k-contrast-legacy($kendo-color-tertiary) !default; + +/// The color for informational messages and states. +/// @group color-system +/// @type Color +$kendo-color-info: #0058e9 !default; +$kendo-color-info-lighter: k-color-tint($kendo-color-info, 2) !default; +$kendo-color-info-darker: k-color-shade($kendo-color-info, 2) !default; + +/// The color for success messages and states. +/// @group color-system +/// @type Color +$kendo-color-success: #37b400 !default; +$kendo-color-success-lighter: k-color-tint($kendo-color-success, 2) !default; +$kendo-color-success-darker: k-color-shade($kendo-color-success, 2) !default; + +/// The color for warning messages and states. +/// @group color-system +/// @type Color +$kendo-color-warning: #ffc000 !default; +$kendo-color-warning-lighter: k-color-tint($kendo-color-warning, 2) !default; +$kendo-color-warning-darker: k-color-shade($kendo-color-warning, 2) !default; + +/// The color for error messages and states. +/// @group color-system +/// @type Color +$kendo-color-error: #f31700 !default; +$kendo-color-error-lighter: k-color-tint($kendo-color-error, 2) !default; +$kendo-color-error-darker: k-color-shade($kendo-color-error, 2) !default; + +/// The dark color of the theme. +/// @group color-system +/// @type Color +$kendo-color-dark: #424242 !default; + +/// The light color of the theme. +/// @group color-system +/// @type Color +$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($kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark) !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, +); // todo: add !default; + +// Generic styles + +/// Background color of the body. +/// @group common +$kendo-body-bg: $kendo-color-white !default; +/// Text color of the body. +/// @group common +$kendo-body-text: #424242 !default; + +/// Subtle text color. +/// @group common +$kendo-subtle-text: #666666 !default; + +$kendo-app-bg: k-try-shade($kendo-body-bg, 0.25) !default; +$kendo-app-text: $kendo-body-text !default; +$kendo-app-border: rgba($kendo-color-black, 0.08) !default; + +// Link +/// Text color of the links. +/// @group common +$kendo-link-text: $kendo-color-primary !default; +/// Text color of the links on hover. +/// @group common +$kendo-link-hover-text: $kendo-color-primary-darker !default; + +// Components + +// Component +/// 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;`. +/// @group component +$kendo-component-bg: $kendo-body-bg !default; +/// Text color of a component. +/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`. +/// @group component +$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: rgba(if($kendo-is-dark-theme, $kendo-color-white, $kendo-color-black), 0.08) !default; + +/// The background of the components' chrome area. +$kendo-base-bg: #fafafa !default; +/// The text color of the components' chrome area. +$kendo-base-text: $kendo-body-text !default; +/// The border color of the components' chrome area. +$kendo-base-border: rgba(black, 0.08) !default; +/// The gradient background of the components' chrome area. +$kendo-base-gradient: rgba(black, 0), rgba(black, 0.02) !default; + +/// The background of hovered items. +$kendo-hover-bg: k-try-shade($kendo-base-bg, 0.5) !default; +/// The text color of hovered items. +$kendo-hover-text: $kendo-base-text !default; +/// The border color of hovered items. +$kendo-hover-border: $kendo-base-border !default; +/// The gradient background of hovered items. +$kendo-hover-gradient: $kendo-base-gradient !default; + +/// The background of selected items. +$kendo-selected-bg: $kendo-color-primary !default; +/// The text color of selected items. +$kendo-selected-text: k-contrast-legacy($kendo-selected-bg) !default; +/// The border color of selected items. +$kendo-selected-border: $kendo-base-border !default; +/// The gradient background of selected items. +$kendo-selected-gradient: $kendo-base-gradient !default; + +/// The background of selected and hovered items. +$kendo-selected-hover-bg: k-try-shade($kendo-selected-bg, 0.5) !default; +/// The text color of selected and hovered items. +$kendo-selected-hover-text: $kendo-selected-text !default; +/// The border of selected and hovered items. +$kendo-selected-hover-border: $kendo-base-border !default; +/// The gradient of selected and hovered items. +$kendo-selected-hover-gradient: $kendo-base-gradient !default; + +/// Text color of disabled items. +$kendo-disabled-text: #8f8f8f !default; + +// Generic styles + +/// Background color of the component header. +/// @group component +$kendo-component-header-bg: $kendo-base-bg !default; +/// Text color of the component header. +/// @group component +$kendo-component-header-text: $kendo-base-text !default; +/// Border color of the component header. +/// @group component +$kendo-component-header-border: $kendo-base-border !default; +/// Gradient of the component header. +/// @group component +$kendo-component-header-gradient: null !default; + +/// Background color of the invalid items. +/// @group component +$kendo-invalid-bg: null !default; +/// Text color of the invalid items. +/// @group component +$kendo-invalid-text: $kendo-color-error !default; +/// Border color of the invalid items. +/// @group component +$kendo-invalid-border: $kendo-color-error !default; +/// Shadow of the invalid items. +/// @group component +$kendo-invalid-shadow: null !default; + +/// Background color of the valid items. +/// @group component +$kendo-valid-bg: null !default; +/// Text color of the valid items. +/// @group component +$kendo-valid-text: $kendo-color-success !default; +/// Border color of the valid items. +/// @group component +$kendo-valid-border: $kendo-color-success !default; +/// Shadow of the valid items. +/// @group component +$kendo-valid-shadow: null !default; \ No newline at end of file diff --git a/packages/default/scss/core/color-system/index.import.scss b/packages/default/scss/core/color-system/index.import.scss deleted file mode 100644 index b274d39cbfa..00000000000 --- a/packages/default/scss/core/color-system/index.import.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-core/scss/color-system/index.import.scss"; diff --git a/packages/default/scss/dataviz/_layout.scss b/packages/default/scss/dataviz/_layout.scss index e44cc8ca80d..ea79360edf7 100644 --- a/packages/default/scss/dataviz/_layout.scss +++ b/packages/default/scss/dataviz/_layout.scss @@ -453,14 +453,14 @@ series-30: $kendo-series-30, gauge-pointer: $kendo-color-primary, - gauge-track: k-try-shade( $kendo-chart-bg ) + gauge-track: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-chart-bg )) ); @each $name, $value in $exported { $type: k-meta-type-of($value); .k-var--#{$name} { - @if $type == "color" { + @if $type == "color" or $type == "string" { // background-color can store any color background-color: $value; } @else if $type == "number" { diff --git a/packages/default/scss/dataviz/_variables.scss b/packages/default/scss/dataviz/_variables.scss index 1c76d675ea9..d24b1736f31 100644 --- a/packages/default/scss/dataviz/_variables.scss +++ b/packages/default/scss/dataviz/_variables.scss @@ -5,51 +5,51 @@ /// The first base series color and its light and dark shades. /// @group charts -$kendo-series-a: #ff6358 !default; -$kendo-series-a-dark: k-color-mix(black, $kendo-series-a, 25%) !default; -$kendo-series-a-darker: k-color-mix(black, $kendo-series-a, 50%) !default; -$kendo-series-a-light: k-color-mix(white, $kendo-series-a, 25%) !default; -$kendo-series-a-lighter: k-color-mix(white, $kendo-series-a, 50%) !default; +$kendo-series-a: if($kendo-enable-color-system, k-color( series-a ), #ff6358) !default; +$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), k-color-mix(black, $kendo-series-a, 25%)) !default; +$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), k-color-mix(black, $kendo-series-a, 50%)) !default; +$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), k-color-mix(white, $kendo-series-a, 25%)) !default; +$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), k-color-mix(white, $kendo-series-a, 50%)) !default; /// The second base series color and its light and dark shades. /// @group charts -$kendo-series-b: #ffe162 !default; -$kendo-series-b-dark: k-color-mix(black, $kendo-series-b, 25%) !default; -$kendo-series-b-darker: k-color-mix(black, $kendo-series-b, 50%) !default; -$kendo-series-b-light: k-color-mix(white, $kendo-series-b, 25%) !default; -$kendo-series-b-lighter: k-color-mix(white, $kendo-series-b, 50%) !default; +$kendo-series-b: if($kendo-enable-color-system, k-color( series-b ), #ffe162) !default; +$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), k-color-mix(black, $kendo-series-b, 25%)) !default; +$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), k-color-mix(black, $kendo-series-b, 50%)) !default; +$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), k-color-mix(white, $kendo-series-b, 25%)) !default; +$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), k-color-mix(white, $kendo-series-b, 50%)) !default; /// The third base series color and its light and dark shades. /// @group charts -$kendo-series-c: #4cd180 !default; -$kendo-series-c-dark: k-color-mix(black, $kendo-series-c, 25%) !default; -$kendo-series-c-darker: k-color-mix(black, $kendo-series-c, 50%) !default; -$kendo-series-c-light: k-color-mix(white, $kendo-series-c, 25%) !default; -$kendo-series-c-lighter: k-color-mix(white, $kendo-series-c, 50%) !default; +$kendo-series-c: if($kendo-enable-color-system, k-color( series-c ), #4cd180) !default; +$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), k-color-mix(black, $kendo-series-c, 25%)) !default; +$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), k-color-mix(black, $kendo-series-c, 50%)) !default; +$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), k-color-mix(white, $kendo-series-c, 25%)) !default; +$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), k-color-mix(white, $kendo-series-c, 50%)) !default; /// The fourth base series color and its light and dark shades. /// @group charts -$kendo-series-d: #4b5ffa !default; -$kendo-series-d-dark: k-color-mix(black, $kendo-series-d, 25%) !default; -$kendo-series-d-darker: k-color-mix(black, $kendo-series-d, 50%) !default; -$kendo-series-d-light: k-color-mix(white, $kendo-series-d, 25%) !default; -$kendo-series-d-lighter: k-color-mix(white, $kendo-series-d, 50%) !default; +$kendo-series-d: if($kendo-enable-color-system, k-color( series-d ), #4b5ffa) !default; +$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), k-color-mix(black, $kendo-series-d, 25%)) !default; +$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), k-color-mix(black, $kendo-series-d, 50%)) !default; +$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), k-color-mix(white, $kendo-series-d, 25%)) !default; +$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), k-color-mix(white, $kendo-series-d, 50%)) !default; /// The fifth base series color and its light and dark shades. /// @group charts -$kendo-series-e: #ac58ff !default; -$kendo-series-e-dark: k-color-mix(black, $kendo-series-e, 25%) !default; -$kendo-series-e-darker: k-color-mix(black, $kendo-series-e, 50%) !default; -$kendo-series-e-light: k-color-mix(white, $kendo-series-e, 25%) !default; -$kendo-series-e-lighter: k-color-mix(white, $kendo-series-e, 50%) !default; +$kendo-series-e: if($kendo-enable-color-system, k-color( series-e ), #ac58ff) !default; +$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), k-color-mix(black, $kendo-series-e, 25%)) !default; +$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), k-color-mix(black, $kendo-series-e, 50%)) !default; +$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), k-color-mix(white, $kendo-series-e, 25%)) !default; +$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), k-color-mix(white, $kendo-series-e, 50%)) !default; /// The sixth base series color and its light and dark shades. /// @group charts -$kendo-series-f: #ff5892 !default; -$kendo-series-f-dark: k-color-mix(black, $kendo-series-f, 25%) !default; -$kendo-series-f-darker: k-color-mix(black, $kendo-series-f, 50%) !default; -$kendo-series-f-light: k-color-mix(white, $kendo-series-f, 25%) !default; -$kendo-series-f-lighter: k-color-mix(white, $kendo-series-f, 50%) !default; +$kendo-series-f: if($kendo-enable-color-system, k-color( series-f ), #ff5892) !default; +$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), k-color-mix(black, $kendo-series-f, 25%)) !default; +$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), k-color-mix(black, $kendo-series-f, 50%)) !default; +$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), k-color-mix(white, $kendo-series-f, 25%)) !default; +$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), k-color-mix(white, $kendo-series-f, 50%)) !default; /// The series colors in order: /// base, light, dark, lighter, darker @@ -100,13 +100,13 @@ $kendo-chart-pane-title-font-weight: $kendo-font-weight-normal !default; /// The color of the Chart grid lines (major). /// @group charts -$kendo-chart-major-lines: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default; +$kendo-chart-major-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) !default; /// The color of the Chart grid lines (minor). /// @group charts -$kendo-chart-minor-lines: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ) !default; +$kendo-chart-minor-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) !default; -$kendo-chart-inactive: rgba( $kendo-body-text, .5 ) !default; +$kendo-chart-inactive: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-body-text, .5 )) !default; $kendo-chart-area-opacity: .6 !default; $kendo-chart-area-inactive-opacity: .1 !default; $kendo-chart-line-inactive-opacity: .3 !default; @@ -117,20 +117,20 @@ $kendo-chart-bg: $kendo-component-bg !default; $kendo-chart-text: $kendo-component-text !default; $kendo-chart-border: $kendo-component-border !default; -$kendo-chart-crosshair-background: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default; +$kendo-chart-crosshair-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default; $kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-text !default; -$kendo-chart-crosshair-shared-tooltip-background: k-try-shade( $kendo-chart-bg, 1 ) !default; -$kendo-chart-crosshair-shared-tooltip-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08) !default; +$kendo-chart-crosshair-shared-tooltip-background: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-chart-bg, 1 )) !default; +$kendo-chart-crosshair-shared-tooltip-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08) !default; -$kendo-chart-notes-background: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default; -$kendo-chart-notes-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default; -$kendo-chart-notes-lines: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default; +$kendo-chart-notes-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default; +$kendo-chart-notes-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default; +$kendo-chart-notes-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default; -$kendo-chart-error-bars-background: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default; +$kendo-chart-error-bars-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default; $kendo-chart-selection-handle-size: 22px !default; -$kendo-chart-selection-border-color: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default; -$kendo-chart-selection-shadow: inset 0 1px 7px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .15) !default; +$kendo-chart-selection-border-color: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) !default; +$kendo-chart-selection-shadow: inset 0 1px 7px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .15) !default; // TreeMap diff --git a/packages/default/scss/dialog/_theme.scss b/packages/default/scss/dialog/_theme.scss index ea5f348763a..b4622c77df8 100644 --- a/packages/default/scss/dialog/_theme.scss +++ b/packages/default/scss/dialog/_theme.scss @@ -12,7 +12,7 @@ // Dialog theme colors @each $name, $color in $kendo-dialog-theme-colors { .k-dialog-#{$name} .k-dialog-titlebar { - color: k-contrast-legacy( $color ); + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); background-color: $color; } } diff --git a/packages/default/scss/dock-manager/_variables.scss b/packages/default/scss/dock-manager/_variables.scss index ae792e313ce..0ddda434260 100644 --- a/packages/default/scss/dock-manager/_variables.scss +++ b/packages/default/scss/dock-manager/_variables.scss @@ -107,7 +107,7 @@ $kendo-dock-manager-dock-preview-border-style: dashed !default; $kendo-dock-manager-dock-preview-border-radius: $kendo-border-radius-sm !default; /// The background color of the dropping area in the DockManager component. /// @group dock-manager -$kendo-dock-manager-dock-preview-bg: rgba( $kendo-color-primary, .16 ) !default; +$kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 )) !default; /// The border color of the dropping area in the DockManager component. /// @group dock-manager $kendo-dock-manager-dock-preview-border: $kendo-color-primary !default; diff --git a/packages/default/scss/dropzone/_variables.scss b/packages/default/scss/dropzone/_variables.scss index 3802d2c1703..9bc730f302b 100644 --- a/packages/default/scss/dropzone/_variables.scss +++ b/packages/default/scss/dropzone/_variables.scss @@ -38,7 +38,7 @@ $kendo-dropzone-border: $kendo-base-border !default; $kendo-dropzone-icon-spacing: k-map-get( $kendo-spacing, 6 ) !default; /// The text color of the DropZone icon. /// @group dropzone -$kendo-dropzone-icon-text: k-try-tint( $kendo-dropzone-text, 4 ) !default; +$kendo-dropzone-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 )) !default; /// The text color of the hovered DropZone icon. /// @group dropzone $kendo-dropzone-icon-hover-text: $kendo-color-primary !default; diff --git a/packages/default/scss/editor/_variables.scss b/packages/default/scss/editor/_variables.scss index 4216baffa7d..d6ec4677c5e 100644 --- a/packages/default/scss/editor/_variables.scss +++ b/packages/default/scss/editor/_variables.scss @@ -29,7 +29,7 @@ $kendo-editor-selected-bg: $kendo-color-primary !default; /// The highlighted background color of the Editor. /// @group editor -$kendo-editor-highlighted-bg: k-color-mix($kendo-color-primary, #ffffff, 20%) !default; +$kendo-editor-highlighted-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix($kendo-color-primary, #ffffff, 20%)) !default; /// The horizontal margin of the Editor's export tool icon. /// @group editor diff --git a/packages/default/scss/fab/_theme.scss b/packages/default/scss/fab/_theme.scss index f441130b863..d44c3bb57f8 100644 --- a/packages/default/scss/fab/_theme.scss +++ b/packages/default/scss/fab/_theme.scss @@ -7,7 +7,7 @@ outline: $kendo-fab-border-width $kendo-fab-outline-style $color; outline-offset: -$kendo-fab-border-width; border-color: $color; - color: k-contrast-legacy( $color ); + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); background-color: $color; } } @@ -16,8 +16,8 @@ @each $name, $color in $kendo-fab-theme-colors { .k-hover.k-fab-solid-#{$name}, .k-fab-solid-#{$name}:hover { - border-color: k-try-shade( $color, .5 ); - background-color: k-try-shade( $color, .5 ); + border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 )); + background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 )); } } @@ -28,7 +28,7 @@ @if $kendo-enable-focus-contrast { @include box-shadow( inset 0 0 0 2px currentColor ); } @else { - outline: $kendo-fab-outline-style $kendo-fab-outline-width rgba( $color, .3 ); + outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, rgba( k-color( $name, true ), .3 ), rgba( $color, .3 )); } } } @@ -39,8 +39,8 @@ .k-selected.k-fab-solid-#{$name}, .k-fab-solid-#{$name}:active { @include box-shadow($kendo-fab-active-shadow); - border-color: k-try-shade( $color, 1.5); - background-color: k-try-shade( $color, 1.5); + border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5)); + background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5)); } } @@ -49,8 +49,8 @@ .k-disabled.k-fab-solid-#{$name}, .k-fab-solid-#{$name}:disabled { @include box-shadow($kendo-fab-disabled-shadow); - background-color: k-try-tint( $color, 5 ); - color: k-try-tint( k-contrast-legacy( $color ), 5 ); + background-color: if($kendo-enable-color-system, rgba( k-color( $name, true ), .6 ), k-try-tint( $color, 5 )); + color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .6 ), k-try-tint( k-contrast-legacy( $color ), 5 )); opacity: 1; } } @@ -79,8 +79,8 @@ // Hover state .k-fab-item.k-hover .k-fab-item-icon, .k-fab-item:hover .k-fab-item-icon { - border-color: k-try-shade( $kendo-fab-item-icon-border, .5 ); - background-color: k-try-shade( $kendo-fab-item-icon-bg, .5 ); + border-color: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-fab-item-icon-border, .5 )); + background-color: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-fab-item-icon-bg, .5 )); } // Focus state @@ -89,7 +89,7 @@ .k-fab-item.k-focus .k-fab-item-text, .k-fab-item.k-focus .k-fab-item-icon { @if $kendo-enable-focus-contrast { - @include box-shadow( inset 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) ); + @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) ); } @else { outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color; } @@ -99,8 +99,8 @@ .k-fab-item.k-active .k-fab-item-icon, .k-fab-item:active .k-fab-item-icon { @include box-shadow($kendo-fab-item-active-shadow); - border-color: k-try-shade( $kendo-fab-item-icon-border, 1); - background-color: k-try-shade( $kendo-fab-item-icon-bg, 1); + border-color: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-fab-item-icon-border, 1 )); + background-color: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-fab-item-icon-bg, 1 )); } // Disabled state @@ -111,8 +111,8 @@ .k-fab-item-text, .k-fab-item-icon { @include box-shadow($kendo-fab-item-disabled-shadow); - background-color: k-try-tint( $kendo-fab-item-bg, 5 ); - color: k-try-tint( $kendo-fab-item-text, 5 ); + background-color: if($kendo-enable-color-system, rgba( k-color( base, true ), .6 ), k-try-tint( $kendo-fab-item-bg, 5 )); + color: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-try-tint( $kendo-fab-item-text, 5 )); } } diff --git a/packages/default/scss/filemanager/_variables.scss b/packages/default/scss/filemanager/_variables.scss index d128cf9eb8c..662d7367c34 100644 --- a/packages/default/scss/filemanager/_variables.scss +++ b/packages/default/scss/filemanager/_variables.scss @@ -119,7 +119,7 @@ $kendo-file-manager-listview-item-border: null !default; $kendo-file-manager-listview-item-icon-bg: null !default; /// The text color of the FileManager ListView item icon. /// @group filemanager -$kendo-file-manager-listview-item-icon-text: k-try-tint($kendo-file-manager-text, 4) !default; +$kendo-file-manager-listview-item-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default; /// The border color of the FileManager ListView item icon. /// @group filemanager $kendo-file-manager-listview-item-icon-border: null !default; @@ -176,7 +176,7 @@ $kendo-file-manager-preview-border: null !default; $kendo-file-manager-preview-icon-bg: null !default; /// The text color of the FileManager preview icon. /// @group filemanager -$kendo-file-manager-preview-icon-text: k-try-tint($kendo-file-manager-text, 4) !default; +$kendo-file-manager-preview-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default; /// The border color of the FileManager preview icon. /// @group filemanager $kendo-file-manager-preview-icon-border: null !default; diff --git a/packages/default/scss/forms/_variables.scss b/packages/default/scss/forms/_variables.scss index 84dcde4403f..772cd24a01e 100644 --- a/packages/default/scss/forms/_variables.scss +++ b/packages/default/scss/forms/_variables.scss @@ -151,7 +151,7 @@ $kendo-fieldset-border: null !default; $kendo-fieldset-legend-bg: null !default; /// The text color of the Form legend. /// @group form -$kendo-fieldset-legend-text: k-try-shade( $kendo-body-text, 2 ) !default; +$kendo-fieldset-legend-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 )) !default; /// The border color of the Form legend. /// @group form $kendo-fieldset-legend-border: null !default; diff --git a/packages/default/scss/gantt/_variables.scss b/packages/default/scss/gantt/_variables.scss index 3744f9bfddc..ff6d1e33209 100644 --- a/packages/default/scss/gantt/_variables.scss +++ b/packages/default/scss/gantt/_variables.scss @@ -16,12 +16,12 @@ $kendo-gantt-treelist-bg: null !default; $kendo-gantt-treelist-text: null !default; $kendo-gantt-treelist-border: null !default; -$kendo-gantt-nonwork-bg: rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 ) !default; +$kendo-gantt-nonwork-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .03 ), rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 )) !default; $kendo-gantt-nonwork-text: null !default; $kendo-gantt-nonwork-border: null !default; $kendo-gantt-line-size: 2px !default; -$kendo-gantt-line-fill: k-contrast-legacy( $kendo-gantt-bg ) !default; +$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $kendo-gantt-bg )) !default; $kendo-gantt-line-selected-fill: $kendo-color-primary !default; $kendo-gantt-dot-size: 8px !default; @@ -36,19 +36,19 @@ $kendo-gantt-milestone-border: $kendo-gantt-border !default; $kendo-gantt-milestone-selected-bg: $kendo-selected-bg !default; $kendo-gantt-milestone-selected-border: $kendo-selected-border !default; -$kendo-gantt-summary-bg: k-try-tint( $kendo-gantt-text, 1 ) !default; -$kendo-gantt-summary-progress-bg: k-try-shade( $kendo-gantt-text, 5 ) !default; -$kendo-gantt-summary-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default; +$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 1 )) !default; +$kendo-gantt-summary-progress-bg: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-gantt-text, 5 )) !default; +$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default; $kendo-gantt-summary-progress-selected-bg: $kendo-selected-bg !default; $kendo-gantt-task-border-width: 0px !default; $kendo-gantt-task-padding-x: k-map-get( $kendo-spacing, 2 ) !default; $kendo-gantt-task-padding-y: k-map-get( $kendo-spacing, 1 ) !default; -$kendo-gantt-task-bg: k-try-tint( $kendo-gantt-text, 2 ) !default; -$kendo-gantt-task-text: k-contrast-legacy( $kendo-gantt-text ) !default; +$kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 2 )) !default; +$kendo-gantt-task-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-gantt-text )) !default; $kendo-gantt-task-border: null !default; $kendo-gantt-task-progress-bg: $kendo-gantt-text !default; -$kendo-gantt-task-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default; +$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default; $kendo-gantt-task-selected-text: $kendo-selected-text !default; $kendo-gantt-task-selected-border: null !default; $kendo-gantt-task-progress-selected-bg: $kendo-selected-bg !default; @@ -82,10 +82,10 @@ $kendo-gantt-planned-bg: $kendo-color-primary !default; $kendo-gantt-planned-border: $kendo-gantt-planned-bg !default; $kendo-gantt-delayed-bg: $kendo-color-error !default; -$kendo-gantt-delayed-bg-lighter: k-color-tint($kendo-gantt-delayed-bg, 5) !default; +$kendo-gantt-delayed-bg-lighter: if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5)) !default; $kendo-gantt-advanced-bg: $kendo-color-success !default; -$kendo-gantt-advanced-bg-lighter: k-color-tint($kendo-gantt-advanced-bg, 5) !default; +$kendo-gantt-advanced-bg-lighter: if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5)) !default; $kendo-gantt-action-on-offset-text: #000000 !default; $kendo-gantt-offset-resize-handler-top: 50% !default; diff --git a/packages/default/scss/grid/_theme.scss b/packages/default/scss/grid/_theme.scss index 38aa9096523..2140ac1e46a 100644 --- a/packages/default/scss/grid/_theme.scss +++ b/packages/default/scss/grid/_theme.scss @@ -270,14 +270,30 @@ &.k-table-row.k-selected .k-table-td.k-grid-row-sticky, &.k-table-row td.k-grid-content-sticky.k-selected, &.k-table-row .k-table-td.k-grid-content-sticky.k-selected { - @include fill( $bg: $kendo-grid-sticky-selected-bg ); + @if($kendo-enable-color-system) { + @include fill( $bg: $kendo-grid-sticky-bg ); + + &::before { + @include fill( $bg: $kendo-grid-sticky-selected-bg ); + } + } @else { + @include fill( $bg: $kendo-grid-sticky-selected-bg ); + } } &.k-selected.k-table-alt-row td.k-grid-content-sticky, &.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky, &.k-table-alt-row td.k-grid-content-sticky.k-selected, &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected { - @include fill( $bg: $kendo-grid-sticky-selected-alt-bg ); + @if($kendo-enable-color-system) { + @include fill( $bg: $kendo-grid-sticky-alt-bg ); + + &::before { + @include fill( $bg: $kendo-grid-sticky-selected-alt-bg ); + } + } @else { + @include fill( $bg: $kendo-grid-sticky-selected-alt-bg ); + } } @@ -299,7 +315,15 @@ &.k-hover td.k-grid-content-sticky.k-selected, &:hover .k-table-td.k-grid-content-sticky.k-selected, &.k-hover .k-table-td.k-grid-content-sticky.k-selected { - background-color: $kendo-grid-sticky-selected-hover-bg; + @if($kendo-enable-color-system) { + background-color: $kendo-grid-sticky-hover-bg; + + &::before { + background-color: $kendo-grid-sticky-selected-hover-bg; + } + } @else { + background-color: $kendo-grid-sticky-selected-hover-bg; + } } } @@ -345,14 +369,30 @@ .k-selected.k-grid-row-sticky .k-table-td, .k-grid-row-sticky .k-table-td.k-selected, .k-selected.k-grid-content-sticky { - @include fill( $bg: $kendo-grid-sticky-selected-bg ); + @if($kendo-enable-color-system) { + @include fill( $bg: $kendo-grid-sticky-bg ); + + &::before { + @include fill( $bg: $kendo-grid-sticky-selected-bg ); + } + } @else { + @include fill( $bg: $kendo-grid-sticky-selected-bg ); + } } .k-table-row.k-selected.k-table-alt-row .k-grid-content-sticky, .k-selected.k-table-alt-row.k-grid-row-sticky td, .k-selected.k-table-alt-row.k-grid-row-sticky .k-table-td, .k-table-alt-row .k-selected.k-grid-content-sticky { - @include fill( $bg: $kendo-grid-sticky-selected-alt-bg ); + @if($kendo-enable-color-system) { + @include fill( $bg: $kendo-grid-sticky-alt-bg ); + + &::before { + @include fill( $bg: $kendo-grid-sticky-selected-alt-bg ); + } + } @else { + @include fill( $bg: $kendo-grid-sticky-selected-alt-bg ); + } } // Hover state @@ -390,7 +430,15 @@ .k-grid-row-sticky.k-hover .k-table-td.k-selected, .k-table-row:hover .k-grid-content-sticky.k-selected, .k-table-row.k-hover .k-grid-content-sticky.k-selected { - background-color: $kendo-grid-sticky-selected-hover-bg; + @if($kendo-enable-color-system) { + background-color: $kendo-grid-sticky-hover-bg; + + &::before { + background-color: $kendo-grid-sticky-selected-hover-bg; + } + } @else { + background-color: $kendo-grid-sticky-selected-hover-bg; + } } } diff --git a/packages/default/scss/grid/_variables.scss b/packages/default/scss/grid/_variables.scss index 814c03c7377..d98d40f9c22 100644 --- a/packages/default/scss/grid/_variables.scss +++ b/packages/default/scss/grid/_variables.scss @@ -222,7 +222,7 @@ $kendo-grid-grouping-row-bg: $kendo-base-bg !default; $kendo-grid-grouping-row-text: $kendo-grid-text !default; $kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default; -$kendo-grid-sorted-bg: rgba( k-contrast-legacy( $kendo-grid-bg ), .02 ) !default; +$kendo-grid-sorted-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( k-contrast-legacy( $kendo-grid-bg ), .02 )) !default; $kendo-grid-sorting-indicator-text: $kendo-color-primary !default; $kendo-grid-sorting-index-font-size: $kendo-font-size-sm !default; $kendo-grid-sorting-index-height: $kendo-icon-size !default; @@ -236,11 +236,13 @@ $kendo-grid-command-cell-button-spacing: k-map-get( $kendo-spacing, 2 ) !default // be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38 $kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em}) / 2 ) !default; +// Must be a solid color $kendo-grid-sticky-bg: $kendo-component-bg !default; $kendo-grid-sticky-text: $kendo-grid-text !default; $kendo-grid-sticky-border: rgba( black, .3 ) !default; -$kendo-grid-sticky-alt-bg: k-color-shade($kendo-grid-bg, 3.5%) !default; +// Must be a solid color +$kendo-grid-sticky-alt-bg: if($kendo-enable-color-system, k-color( base ), k-color-shade($kendo-grid-bg, 3.5%)) !default; $kendo-grid-sticky-header-bg: $kendo-grid-header-bg !default; $kendo-grid-sticky-header-text: $kendo-grid-header-text !default; @@ -249,11 +251,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default; $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default; $kendo-grid-sticky-footer-hover-bg: $kendo-grid-hover-bg !default; -$kendo-grid-sticky-selected-bg: k-color-mix($kendo-selected-bg, #ffffff, 25%) !default; -$kendo-grid-sticky-selected-alt-bg: k-color-shade($kendo-grid-sticky-selected-bg, .4) !default; +$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-color-mix($kendo-selected-bg, #ffffff, 25%)) !default; +$kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .24 ), k-color-shade($kendo-grid-sticky-selected-bg, .4)) !default; -$kendo-grid-sticky-hover-bg: k-color-darken($kendo-grid-bg, 8%) !default; -$kendo-grid-sticky-selected-hover-bg: k-color-shade($kendo-grid-sticky-selected-bg, .7) !default; +// Must be a solid color +$kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-grid-bg, 8%)) !default; +$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .24 ), k-color-shade($kendo-grid-sticky-selected-bg, .7)) !default; $kendo-grid-column-menu-width: 230px !default; $kendo-grid-column-menu-max-width: 320px !default; @@ -304,7 +307,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default; /// Background color of the grid row resize indicator /// @group grid -$kendo-grid-row-resizer-hover-bg: rgba( k-contrast-color( $kendo-grid-bg ), .12 ) !default; +$kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) !default; /// Active background color of the grid row resize indicator /// @group grid $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default; diff --git a/packages/default/scss/input/_variables.scss b/packages/default/scss/input/_variables.scss index 67839e2267d..85dc81fefc7 100644 --- a/packages/default/scss/input/_variables.scss +++ b/packages/default/scss/input/_variables.scss @@ -118,7 +118,7 @@ $kendo-input-hover-bg: null !default; $kendo-input-hover-text: null !default; /// The border color of the hovered Input components. /// @group input -$kendo-input-hover-border: rgba( $kendo-input-border, .16 ) !default; +$kendo-input-hover-border: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 )) !default; /// The shadow of the hovered Input components. /// @group input $kendo-input-hover-shadow: null !default; @@ -134,7 +134,7 @@ $kendo-input-focus-text: null !default; $kendo-input-focus-border: $kendo-input-hover-border !default; /// The shadow of the focused Input components. /// @group input -$kendo-input-focus-shadow: 0 0 0 2px rgba( $kendo-input-focus-border, .08 ) !default; +$kendo-input-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-input-focus-border, .08 )) !default; /// The background color of the selected Input components. /// @group input @@ -167,7 +167,7 @@ $kendo-input-outline-bg: null !default; $kendo-input-outline-text: $kendo-input-text !default; /// The border color of the outline Input components. /// @group input -$kendo-input-outline-border: rgba( $kendo-button-text, .5) !default; +$kendo-input-outline-border: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-button-text, .5)) !default; /// The background color of the outline hovered Input components. /// @group input @@ -177,7 +177,7 @@ $kendo-input-outline-hover-bg: null !default; $kendo-input-outline-hover-text: null !default; /// The border color of the outline hovered Input components. /// @group input -$kendo-input-outline-hover-border: rgba( $kendo-button-text, .8) !default; +$kendo-input-outline-hover-border: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .8 ), rgba( $kendo-button-text, .8)) !default; /// The background color of the outline focused Input components. /// @group input @@ -372,14 +372,14 @@ $kendo-picker-outline-bg: null !default; $kendo-picker-outline-text: $kendo-button-text !default; /// The border color of the outline Picker components. /// @group picker -$kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default; +$kendo-picker-outline-border: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-picker-outline-text, .5)) !default; /// The background color of the outline hovered Picker components. /// @group picker $kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default; /// The text color of the outline hovered Picker components. /// @group picker -$kendo-picker-outline-hover-text: k-contrast-legacy( $kendo-picker-outline-hover-bg ) !default; +$kendo-picker-outline-hover-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg )) !default; /// The border color of the outline hovered Picker components. /// @group picker $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default; @@ -419,13 +419,13 @@ $kendo-picker-flat-border: $kendo-button-border !default; /// The background color of the flat hovered Picker components. /// @group picker -$kendo-picker-flat-hover-bg: rgba( $kendo-button-text, .04 ) !default; +$kendo-picker-flat-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .04 ), rgba( $kendo-button-text, .04 )) !default; /// The text color of the flat hovered Picker components. /// @group picker $kendo-picker-flat-hover-text: null !default; /// The border color of the flat hovered Picker components. /// @group picker -$kendo-picker-flat-hover-border: rgba( $kendo-button-border, .16 ) !default; +$kendo-picker-flat-hover-border: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 )) !default; /// The background color of the flat focused Picker components. /// @group picker diff --git a/packages/default/scss/list/_theme.scss b/packages/default/scss/list/_theme.scss index fcceba89e4d..4581a127b69 100644 --- a/packages/default/scss/list/_theme.scss +++ b/packages/default/scss/list/_theme.scss @@ -58,7 +58,7 @@ &.k-selected:hover, &.k-selected.k-hover { color: $kendo-list-item-selected-text; - background-color: k-color-shade( $kendo-list-item-selected-bg ); + background-color: if($kendo-enable-color-system, k-color( primary-hover ), k-color-shade( $kendo-list-item-selected-bg )); } } diff --git a/packages/default/scss/listview/_variables.scss b/packages/default/scss/listview/_variables.scss index 013bf4c2d31..ee69da35308 100644 --- a/packages/default/scss/listview/_variables.scss +++ b/packages/default/scss/listview/_variables.scss @@ -41,7 +41,7 @@ $kendo-listview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default; $kendo-listview-item-selected-text: null !default; /// The background color of the selected ListView items. /// @group listview -$kendo-listview-item-selected-bg: rgba( $kendo-selected-bg, .25 ) !default; +$kendo-listview-item-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default; /// The border color of the selected ListView items. /// @group listview $kendo-listview-item-selected-border: null !default; diff --git a/packages/default/scss/map/_variables.scss b/packages/default/scss/map/_variables.scss index 732ebaa6c74..5181047a765 100644 --- a/packages/default/scss/map/_variables.scss +++ b/packages/default/scss/map/_variables.scss @@ -25,6 +25,6 @@ $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding $kendo-map-attribution-padding-x: $kendo-padding-sm-x !default; $kendo-map-attribution-padding-y: $kendo-padding-sm-y !default; $kendo-map-attribution-font-size: ($kendo-map-font-size * .75) !default; -$kendo-map-attribution-bg: rgba( $kendo-map-bg, .8 ) !default; +$kendo-map-attribution-bg: if($kendo-enable-color-system, rgba( k-color( app-surface, true ), .8 ), rgba( $kendo-map-bg, .8 )) !default; $kendo-map-marker-fill: $kendo-color-primary !default; diff --git a/packages/default/scss/mediaplayer/_theme.scss b/packages/default/scss/mediaplayer/_theme.scss index 716b8eabd49..55395af7180 100644 --- a/packages/default/scss/mediaplayer/_theme.scss +++ b/packages/default/scss/mediaplayer/_theme.scss @@ -14,7 +14,7 @@ .k-mediaplayer-titlebar { color: $kendo-media-player-titlebar-text; background-image: linear-gradient( $kendo-media-player-titlebar-gradient ); - text-shadow: 0 0 2px rgba( $kendo-media-player-text, .5 ); + text-shadow: 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-media-player-text, .5 )); } } diff --git a/packages/default/scss/mediaplayer/_variables.scss b/packages/default/scss/mediaplayer/_variables.scss index 26d443547d9..6071cf310d5 100644 --- a/packages/default/scss/mediaplayer/_variables.scss +++ b/packages/default/scss/mediaplayer/_variables.scss @@ -13,4 +13,4 @@ $kendo-media-player-titlebar-padding-y: k-map-get( $kendo-spacing, 2 ) !default; $kendo-media-player-titlebar-bg: null !default; $kendo-media-player-titlebar-text: $kendo-media-player-bg !default; $kendo-media-player-titlebar-border: null !default; -$kendo-media-player-titlebar-gradient: rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) !default; +$kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( rgba( k-color( on-app-surface, true ), .7 ), rgba( k-color( on-app-surface, true ), 0 ) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default; diff --git a/packages/default/scss/messagebox/_theme.scss b/packages/default/scss/messagebox/_theme.scss index 6ec4e7fd6a2..e656e9358de 100644 --- a/packages/default/scss/messagebox/_theme.scss +++ b/packages/default/scss/messagebox/_theme.scss @@ -2,11 +2,19 @@ @each $color-name, $color in $kendo-theme-colors { .k-messagebox-#{$color-name} { - @include fill( - k-color-level( $color, $kendo-message-box-text-level ), - k-color-level( $color, $kendo-message-box-bg-level ), - k-color-level( $color, $kendo-message-box-border-level ) - ); + @if $color-name == "inverse" { + @include fill( + if($kendo-enable-color-system, k-color( dark-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )), + if($kendo-enable-color-system, k-color( dark-subtle ), k-color-level( $color, $kendo-message-box-bg-level )), + if($kendo-enable-color-system, k-color( dark-hover ), k-color-level( $color, $kendo-message-box-border-level )) + ); + } @else { + @include fill( + if($kendo-enable-color-system, k-color( #{$color-name}-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )), + if($kendo-enable-color-system, k-color( #{$color-name}-subtle ), k-color-level( $color, $kendo-message-box-bg-level )), + if($kendo-enable-color-system, k-color( #{$color-name}-emphasis ), k-color-level( $color, $kendo-message-box-border-level )) + ); + } } } diff --git a/packages/default/scss/notification/_variables.scss b/packages/default/scss/notification/_variables.scss index 87b355da1ba..2f50916015a 100644 --- a/packages/default/scss/notification/_variables.scss +++ b/packages/default/scss/notification/_variables.scss @@ -47,7 +47,7 @@ $kendo-notification-icon-spacing: $kendo-icon-spacing !default; @each $name, $color in $colors { $_theme: k-map-merge(( $name: ( - color: k-contrast-legacy( $color ), + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), background-color: $color, border: $color, )), $_theme ); diff --git a/packages/default/scss/panelbar/_variables.scss b/packages/default/scss/panelbar/_variables.scss index a24b44add47..0585e01b1b0 100644 --- a/packages/default/scss/panelbar/_variables.scss +++ b/packages/default/scss/panelbar/_variables.scss @@ -27,7 +27,7 @@ $kendo-panelbar-header-text: $kendo-link-text !default; $kendo-panelbar-header-border: null !default; $kendo-panelbar-header-gradient: null !default; -$kendo-panelbar-header-hover-bg: k-try-shade( $kendo-panelbar-header-bg, .5 ) !default; +$kendo-panelbar-header-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 )) !default; $kendo-panelbar-header-hover-text: null !default; $kendo-panelbar-header-hover-border: null !default; $kendo-panelbar-header-hover-gradient: null !default; @@ -48,7 +48,7 @@ $kendo-panelbar-header-selected-text: $kendo-selected-text !default; $kendo-panelbar-header-selected-border: null !default; $kendo-panelbar-header-selected-gradient: null !default; -$kendo-panelbar-header-selected-hover-bg: k-try-shade( $kendo-panelbar-header-selected-bg ) !default; +$kendo-panelbar-header-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg )) !default; $kendo-panelbar-header-selected-hover-text: null !default; $kendo-panelbar-header-selected-hover-border: null !default; $kendo-panelbar-header-selected-hover-gradient: null !default; @@ -63,7 +63,7 @@ $kendo-panelbar-header-selected-hover-focus-text: null !default; $kendo-panelbar-header-selected-hover-focus-border: null !default; $kendo-panelbar-header-selected-hover-focus-gradient: null !default; -$kendo-panelbar-item-hover-bg: k-try-shade( $kendo-panelbar-bg, .5 ) !default; +$kendo-panelbar-item-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, .5 )) !default; $kendo-panelbar-item-hover-text: null !default; $kendo-panelbar-item-hover-border: null !default; $kendo-panelbar-item-hover-gradient: null !default; @@ -84,7 +84,7 @@ $kendo-panelbar-item-selected-text: $kendo-selected-text !default; $kendo-panelbar-item-selected-border: null !default; $kendo-panelbar-item-selected-gradient: null !default; -$kendo-panelbar-item-selected-hover-bg: k-try-shade( $kendo-panelbar-item-selected-bg ) !default; +$kendo-panelbar-item-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg )) !default; $kendo-panelbar-item-selected-hover-text: null !default; $kendo-panelbar-item-selected-hover-border: null !default; $kendo-panelbar-item-selected-hover-gradient: null !default; diff --git a/packages/default/scss/pivotgrid/_variables.scss b/packages/default/scss/pivotgrid/_variables.scss index 0b9d216e2fb..c6b44acfd08 100644 --- a/packages/default/scss/pivotgrid/_variables.scss +++ b/packages/default/scss/pivotgrid/_variables.scss @@ -22,21 +22,21 @@ $kendo-pivotgrid-bg: $kendo-component-bg !default; $kendo-pivotgrid-text: $kendo-component-text !default; $kendo-pivotgrid-border: $kendo-component-border !default; -$kendo-pivotgrid-alt-border: k-try-shade($kendo-pivotgrid-border, 2) !default; +$kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade($kendo-pivotgrid-border, 2)) !default; $kendo-pivotgrid-headers-bg: $kendo-component-header-bg !default; $kendo-pivotgrid-headers-text: $kendo-component-header-text !default; $kendo-pivotgrid-headers-border: $kendo-component-header-border !default; -$kendo-pivotgrid-total-bg: k-try-shade( $kendo-pivotgrid-bg, 1 ) !default; +$kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default; $kendo-pivotgrid-total-text: $kendo-component-header-text !default; $kendo-pivotgrid-total-border: $kendo-component-header-border !default; -$kendo-pivotgrid-hover-bg: k-color-darken($kendo-pivotgrid-bg, 7%) !default; +$kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-pivotgrid-bg, 7%)) !default; $kendo-pivotgrid-hover-text: null !default; $kendo-pivotgrid-hover-border: null !default; -$kendo-pivotgrid-selected-bg: rgba($kendo-selected-bg, .25) !default; +$kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default; $kendo-pivotgrid-selected-text: null !default; $kendo-pivotgrid-selected-border: null !default; @@ -105,7 +105,7 @@ $kendo-pivotgrid-alt-text: $kendo-grid-header-text !default; $kendo-pivotgrid-chrome-border: $kendo-grid-border !default; $kendo-pivotgrid-container-bg: $kendo-component-bg !default; -$kendo-pivotgrid-row-headers-bg: k-try-shade( $kendo-component-bg, 1 ) !default; +$kendo-pivotgrid-row-headers-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 )) !default; $kendo-pivotgrid-button-bg: null !default; $kendo-pivotgrid-button-text: null !default; diff --git a/packages/default/scss/progressbar/_theme.scss b/packages/default/scss/progressbar/_theme.scss index 1ac1940121b..6e2da7a2e23 100644 --- a/packages/default/scss/progressbar/_theme.scss +++ b/packages/default/scss/progressbar/_theme.scss @@ -29,7 +29,7 @@ .k-progressbar-indeterminate { @include fill( $kendo-progressbar-indeterminate-text, $kendo-progressbar-indeterminate-bg, $kendo-progressbar-indeterminate-border ); - @include striped-gradient( k-color-shade($kendo-progressbar-indeterminate-bg) ); + @include striped-gradient( if($kendo-enable-color-system, rgba( k-color( base-emphasis, true ), .55 ), k-color-shade($kendo-progressbar-indeterminate-bg)) ); background-size: $kendo-progressbar-height $kendo-progressbar-height; animation: kendo-progressbar-indeterminate-animation $kendo-progressbar-animation-timing; } diff --git a/packages/default/scss/progressbar/_variables.scss b/packages/default/scss/progressbar/_variables.scss index 1e961035545..d58d9a3f3d1 100644 --- a/packages/default/scss/progressbar/_variables.scss +++ b/packages/default/scss/progressbar/_variables.scss @@ -24,7 +24,7 @@ $kendo-progressbar-line-height: 1 !default; /// The background color of the ProgressBar. /// @group progressbar -$kendo-progressbar-bg: k-try-shade( $kendo-component-bg, 1 ) !default; +$kendo-progressbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 )) !default; /// The text color of the ProgressBar. /// @group progressbar $kendo-progressbar-text: $kendo-component-text !default; @@ -40,10 +40,10 @@ $kendo-progressbar-gradient: null !default; $kendo-progressbar-value-bg: $kendo-color-primary !default; /// The progress text color of the ProgressBar. /// @group progressbar -$kendo-progressbar-value-text: k-contrast-legacy( $kendo-progressbar-value-bg ) !default; +$kendo-progressbar-value-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg )) !default; /// The progress border color of the ProgressBar. /// @group progressbar -$kendo-progressbar-value-border: k-try-shade( $kendo-progressbar-value-bg ) !default; +$kendo-progressbar-value-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg )) !default; /// The progress background gradient of the ProgressBar. /// @group progressbar $kendo-progressbar-value-gradient: null !default; diff --git a/packages/default/scss/scheduler/_theme.scss b/packages/default/scss/scheduler/_theme.scss index 1fef5c59400..cf4929d6af9 100644 --- a/packages/default/scss/scheduler/_theme.scss +++ b/packages/default/scss/scheduler/_theme.scss @@ -67,7 +67,7 @@ .k-scheduler-layout td.k-selected, .k-scheduler-layout .k-scheduler-cell.k-selected { - background-color: rgba($kendo-selected-bg, .25); + background-color: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)); } .k-scheduler-layout-flex { @@ -110,7 +110,7 @@ } &.k-event-inverse { - color: k-contrast-legacy( $kendo-scheduler-event-text ); + color: if($kendo-enable-color-system, k-color( on-app-surface ), k-contrast-legacy( $kendo-scheduler-event-text )); } &.k-event-ongoing { @@ -184,7 +184,7 @@ // Selected .k-scheduler-content tr.k-selected { - background-color: rgba($kendo-selected-bg, .25); + background-color: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)); } .k-scheduler-content tr.k-selected .k-scheduler-datecolumn, .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn { diff --git a/packages/default/scss/scheduler/_variables.scss b/packages/default/scss/scheduler/_variables.scss index 399f039e5de..b94137da0ac 100644 --- a/packages/default/scss/scheduler/_variables.scss +++ b/packages/default/scss/scheduler/_variables.scss @@ -22,7 +22,7 @@ $kendo-scheduler-event-min-height: 25px !default; $kendo-scheduler-event-border-radius: $kendo-border-radius-md !default; $kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-md-y}) ) !default; -$kendo-scheduler-event-bg: k-color-tint( $kendo-selected-bg, 2 ) !default; +$kendo-scheduler-event-bg: if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) !default; $kendo-scheduler-event-text: $kendo-selected-text !default; $kendo-scheduler-event-border: null !default; $kendo-scheduler-event-gradient: null !default; @@ -34,7 +34,7 @@ $kendo-scheduler-event-hover-border: null !default; $kendo-scheduler-event-hover-gradient: null !default; $kendo-scheduler-event-hover-shadow: null !default; -$kendo-scheduler-event-selected-bg: $kendo-selected-bg !default; +$kendo-scheduler-event-selected-bg: if($kendo-enable-color-system, k-color( primary-active ), $kendo-selected-bg) !default; $kendo-scheduler-event-selected-text: $kendo-selected-text !default; $kendo-scheduler-event-selected-border: null !default; $kendo-scheduler-event-selected-gradient: null !default; @@ -48,13 +48,13 @@ $kendo-scheduler-cell-height: $kendo-line-height-em !default; $kendo-scheduler-datecolumn-width: 12em !default; $kendo-scheduler-timecolumn-width: 11em !default; -$kendo-scheduler-nonwork-bg: k-try-shade( $kendo-scheduler-bg, .5 ) !default; +$kendo-scheduler-nonwork-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 )) !default; $kendo-scheduler-nonwork-text: null !default; $kendo-scheduler-weekend-bg: null !default; $kendo-scheduler-weekend-text: null !default; -$kendo-scheduler-othermonth-bg: k-try-shade( $kendo-scheduler-bg, .5 ) !default; +$kendo-scheduler-othermonth-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 )) !default; $kendo-scheduler-othermonth-text: null !default; $kendo-scheduler-yearview-padding-x: k-map-get( $kendo-spacing, 3 ) !default; diff --git a/packages/default/scss/signature/_variables.scss b/packages/default/scss/signature/_variables.scss index 2fbbd4992c7..e3dc725bd6c 100644 --- a/packages/default/scss/signature/_variables.scss +++ b/packages/default/scss/signature/_variables.scss @@ -18,7 +18,7 @@ $kendo-signature-lg-padding-y: $kendo-signature-lg-padding-x !default; $kendo-signature-line-width: 1px !default; $kendo-signature-line-style: dashed !default; -$kendo-signature-line-color: rgba( $kendo-color-info, .24 ) !default; +$kendo-signature-line-color: if($kendo-enable-color-system, rgba( k-color( info, true ), .24 ), rgba( $kendo-color-info, .24 )) !default; $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default; $kendo-signature-sm-line-size: calc( 100% - 2 * #{$kendo-signature-sm-padding-x} ) !default; diff --git a/packages/default/scss/skeleton/_variables.scss b/packages/default/scss/skeleton/_variables.scss index 506a97288c6..93c1055d34a 100644 --- a/packages/default/scss/skeleton/_variables.scss +++ b/packages/default/scss/skeleton/_variables.scss @@ -15,9 +15,6 @@ $kendo-skeleton-rect-border-radius: 0 !default; /// @group skeleton $kendo-skeleton-circle-border-radius: 9999px !default; -/// The background color of the Skeleton item. -/// @group skeleton -$kendo-skeleton-item-bg: rgba( $kendo-color-inverse, .2 ) !default; -/// The background color of the Skeleton wave animation. -/// @group skeleton +$kendo-skeleton-item-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 )) !default; + $kendo-skeleton-wave-bg: rgba( black, .04 ) !default; diff --git a/packages/default/scss/slider/_variables.scss b/packages/default/scss/slider/_variables.scss index d45535de489..a41663cc2e3 100644 --- a/packages/default/scss/slider/_variables.scss +++ b/packages/default/scss/slider/_variables.scss @@ -23,27 +23,27 @@ $kendo-slider-draghandle-active-scale: 1 !default; $kendo-slider-draghandle-active-size: null !default; $kendo-slider-draghandle-bg: $kendo-color-primary !default; -$kendo-slider-draghandle-text: k-contrast-legacy( $kendo-color-primary ) !default; +$kendo-slider-draghandle-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary )) !default; $kendo-slider-draghandle-border: $kendo-color-primary !default; $kendo-slider-draghandle-gradient: null !default; -$kendo-slider-draghandle-hover-bg: k-try-shade( $kendo-color-primary , .5 ) !default; +$kendo-slider-draghandle-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary , .5 )) !default; $kendo-slider-draghandle-hover-text: null !default; $kendo-slider-draghandle-hover-border: $kendo-color-primary !default; $kendo-slider-draghandle-hover-gradient: null !default; -$kendo-slider-draghandle-pressed-bg: k-try-shade( $kendo-color-primary , 1.5 ) !default; +$kendo-slider-draghandle-pressed-bg: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) !default; $kendo-slider-draghandle-pressed-text: null !default; -$kendo-slider-draghandle-pressed-border: k-try-shade( $kendo-color-primary , 1.5 ) !default; +$kendo-slider-draghandle-pressed-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) !default; $kendo-slider-draghandle-pressed-gradient: null !default; -$kendo-slider-draghandle-focus-shadow: 0 0 0 2px rgba( $kendo-color-primary , .3 ) !default; +$kendo-slider-draghandle-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary , .3 )) !default; $kendo-slider-transition-speed: .3s !default; $kendo-slider-transition-function: ease-out !default; $kendo-slider-draghandle-transition-speed: .4s !default; $kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default; -$kendo-slider-track-bg: k-try-shade( $kendo-component-bg, 1 ) !default; +$kendo-slider-track-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 )) !default; $kendo-slider-selection-bg: $kendo-color-primary !default; $kendo-slider-disabled-opacity: null !default; diff --git a/packages/default/scss/splitter/_variables.scss b/packages/default/scss/splitter/_variables.scss index 8ed04bd39e2..7b234f8b888 100644 --- a/packages/default/scss/splitter/_variables.scss +++ b/packages/default/scss/splitter/_variables.scss @@ -18,7 +18,7 @@ $kendo-splitter-collapse-icon-padding-y: k-map-get( $kendo-spacing, .5 ) !defaul $kendo-splitbar-bg: $kendo-base-bg !default; $kendo-splitbar-text: $kendo-base-text !default; -$kendo-splitbar-hover-bg: k-try-shade( $kendo-splitbar-bg, .5 ) !default; +$kendo-splitbar-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 )) !default; $kendo-splitbar-hover-text: $kendo-splitbar-text !default; $kendo-splitbar-selected-bg: $kendo-selected-bg !default; diff --git a/packages/default/scss/spreadsheet/_variables.scss b/packages/default/scss/spreadsheet/_variables.scss index fd78d217c74..5749e4431b2 100644 --- a/packages/default/scss/spreadsheet/_variables.scss +++ b/packages/default/scss/spreadsheet/_variables.scss @@ -37,7 +37,7 @@ $kendo-spreadsheet-formula-input-line-height: $kendo-input-line-height !default; $kendo-spreadsheet-view-font-family: Arial, Verdana, sans-serif !default; $kendo-spreadsheet-view-font-size: $kendo-spreadsheet-font-size !default; -$kendo-spreadsheet-selection-bg: rgba( $kendo-selected-bg, .25 ) !default; +$kendo-spreadsheet-selection-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default; $kendo-spreadsheet-selection-text: null !default; $kendo-spreadsheet-selection-border: $kendo-selected-bg !default; $kendo-spreadsheet-selection-shadow: inset 0 0 0 1px $kendo-selected-bg !default; @@ -46,12 +46,12 @@ $kendo-spreadsheet-single-selection-bg: $kendo-selected-bg !default; $kendo-spreadsheet-single-selection-text: null !default; $kendo-spreadsheet-single-selection-border: $kendo-spreadsheet-bg !default; -$kendo-spreadsheet-partial-selection-bg: rgba( $kendo-selected-bg, .25 ) !default; +$kendo-spreadsheet-partial-selection-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default; $kendo-spreadsheet-active-cell-bg: $kendo-spreadsheet-bg !default; $kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px $kendo-selected-bg !default; -$kendo-spreadsheet-auto-fill-bg: rgba( $kendo-selected-bg, .25 ) !default; +$kendo-spreadsheet-auto-fill-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default; $kendo-spreadsheet-auto-fill-text: null !default; $kendo-spreadsheet-auto-fill-border: $kendo-selected-bg !default; $kendo-spreadsheet-auto-fill-shadow: inset 0 0 0 1px $kendo-selected-bg !default; @@ -99,7 +99,7 @@ $kendo-spreadsheet-drawing-handle-bg: $kendo-color-primary !default; $kendo-spreadsheet-drawing-handle-border-radius: $kendo-border-radius-lg !default; $kendo-spreadsheet-drawing-outline-style: solid !default; $kendo-spreadsheet-drawing-outline-width: 2px !default; -$kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default; +$kendo-spreadsheet-drawing-anchor-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default; $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 4 ) !default; diff --git a/packages/default/scss/stepper/_layout.scss b/packages/default/scss/stepper/_layout.scss index 8af613a94b9..9257101998a 100644 --- a/packages/default/scss/stepper/_layout.scss +++ b/packages/default/scss/stepper/_layout.scss @@ -73,6 +73,17 @@ transition-duration: .4s; transition-timing-function: ease-in-out; + &::before { + @include border-radius( $kendo-stepper-indicator-border-radius ); + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + &::after { @include border-radius( 100% ); content: ""; diff --git a/packages/default/scss/stepper/_theme.scss b/packages/default/scss/stepper/_theme.scss index a1daec5f452..b341731578f 100644 --- a/packages/default/scss/stepper/_theme.scss +++ b/packages/default/scss/stepper/_theme.scss @@ -41,11 +41,23 @@ &.k-disabled, &:disabled { .k-step-indicator { - @include fill( - $kendo-stepper-indicator-disabled-text, - $kendo-stepper-indicator-disabled-bg, - $kendo-stepper-indicator-disabled-border - ); + @if($kendo-enable-color-system) { + @include fill( + $kendo-stepper-indicator-disabled-text, + k-color( app-surface ), + $kendo-stepper-indicator-disabled-border + ); + + &::before { + background-color: $kendo-stepper-indicator-disabled-bg; + } + } @else { + @include fill( + $kendo-stepper-indicator-disabled-text, + $kendo-stepper-indicator-disabled-bg, + $kendo-stepper-indicator-disabled-border + ); + } } .k-step-label { @@ -103,11 +115,23 @@ &.k-disabled, &:disabled { .k-step-indicator { - @include fill( - $kendo-stepper-indicator-done-disabled-text, - $kendo-stepper-indicator-done-disabled-bg, - $kendo-stepper-indicator-done-disabled-border - ); + @if($kendo-enable-color-system) { + @include fill( + $kendo-stepper-indicator-done-disabled-text, + k-color( app-surface ), + $kendo-stepper-indicator-done-disabled-border + ); + + &::before { + background-color: $kendo-stepper-indicator-done-disabled-bg; + } + } @else { + @include fill( + $kendo-stepper-indicator-done-disabled-text, + $kendo-stepper-indicator-done-disabled-bg, + $kendo-stepper-indicator-done-disabled-border + ); + } } } } @@ -144,11 +168,23 @@ &.k-disabled, &:disabled { .k-step-indicator { - @include fill( - $kendo-stepper-indicator-current-disabled-text, - $kendo-stepper-indicator-current-disabled-bg, - $kendo-stepper-indicator-current-disabled-border - ); + @if($kendo-enable-color-system) { + @include fill( + $kendo-stepper-indicator-current-disabled-text, + k-color( app-surface ), + $kendo-stepper-indicator-current-disabled-border + ); + + &::before { + background-color: $kendo-stepper-indicator-current-disabled-bg; + } + } @else { + @include fill( + $kendo-stepper-indicator-current-disabled-text, + $kendo-stepper-indicator-current-disabled-bg, + $kendo-stepper-indicator-current-disabled-border + ); + } } } } diff --git a/packages/default/scss/stepper/_variables.scss b/packages/default/scss/stepper/_variables.scss index e0d55a01606..78466832111 100644 --- a/packages/default/scss/stepper/_variables.scss +++ b/packages/default/scss/stepper/_variables.scss @@ -33,24 +33,24 @@ $kendo-stepper-indicator-bg: $kendo-component-bg !default; $kendo-stepper-indicator-text: $kendo-component-text !default; $kendo-stepper-indicator-border: #cccccc !default; -$kendo-stepper-indicator-hover-bg: k-try-shade( $kendo-stepper-indicator-bg ) !default; +$kendo-stepper-indicator-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg )) !default; $kendo-stepper-indicator-hover-text: null !default; $kendo-stepper-indicator-hover-border: null !default; $kendo-stepper-indicator-disabled-bg: null !default; -$kendo-stepper-indicator-disabled-text: $kendo-disabled-text !default; +$kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text) !default; $kendo-stepper-indicator-disabled-border: null !default; $kendo-stepper-indicator-done-bg: $kendo-color-primary !default; -$kendo-stepper-indicator-done-text: k-contrast-legacy( $kendo-stepper-indicator-done-bg ) !default; +$kendo-stepper-indicator-done-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) !default; $kendo-stepper-indicator-done-border: $kendo-stepper-indicator-done-bg !default; -$kendo-stepper-indicator-done-hover-bg: k-try-shade( $kendo-stepper-indicator-done-bg ) !default; +$kendo-stepper-indicator-done-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg )) !default; $kendo-stepper-indicator-done-hover-text: null !default; $kendo-stepper-indicator-done-hover-border: null !default; -$kendo-stepper-indicator-done-disabled-bg: k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%) !default; -$kendo-stepper-indicator-done-disabled-text: k-contrast-legacy( $kendo-stepper-indicator-done-bg ) !default; +$kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%)) !default; +$kendo-stepper-indicator-done-disabled-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) !default; $kendo-stepper-indicator-done-disabled-border: $kendo-stepper-indicator-done-disabled-bg !default; $kendo-stepper-indicator-current-bg: $kendo-stepper-indicator-done-bg !default; @@ -68,8 +68,8 @@ $kendo-stepper-indicator-current-disabled-border: $kendo-stepper-indicator-done- $kendo-stepper-label-text: null !default; $kendo-stepper-label-success-text: $kendo-color-success !default; $kendo-stepper-label-error-text: $kendo-color-error !default; -$kendo-stepper-label-hover-text: k-try-shade( $kendo-stepper-text, 2 ) !default; -$kendo-stepper-label-disabled-text: $kendo-disabled-text !default; +$kendo-stepper-label-hover-text: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-stepper-text, 2 )) !default; +$kendo-stepper-label-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text) !default; $kendo-stepper-optional-label-text: $kendo-subtle-text !default; $kendo-stepper-optional-label-opacity: null !default; diff --git a/packages/default/scss/switch/_theme.scss b/packages/default/scss/switch/_theme.scss index 130c207f1c9..8ddbd1c4684 100644 --- a/packages/default/scss/switch/_theme.scss +++ b/packages/default/scss/switch/_theme.scss @@ -58,7 +58,7 @@ $kendo-switch-off-track-focus-gradient ); @if $kendo-enable-focus-contrast { - @include box-shadow( 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) ); + @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) ); } @else { outline: $kendo-switch-off-track-focus-ring; } @@ -138,7 +138,7 @@ $kendo-switch-on-track-focus-gradient ); @if $kendo-enable-focus-contrast { - @include box-shadow( 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) ); + @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) ); } @else { outline: $kendo-switch-on-track-focus-ring; } diff --git a/packages/default/scss/switch/_variables.scss b/packages/default/scss/switch/_variables.scss index 3d9edce26fb..a7c58d0c1fb 100644 --- a/packages/default/scss/switch/_variables.scss +++ b/packages/default/scss/switch/_variables.scss @@ -36,7 +36,7 @@ $kendo-switch-off-track-bg: $kendo-component-bg !default; $kendo-switch-off-track-text: $kendo-component-text !default; /// The border color of the track when the Switch is not checked. /// @group switch -$kendo-switch-off-track-border: k-try-shade( $kendo-switch-off-track-bg, 8% ) !default; +$kendo-switch-off-track-border: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% )) !default; /// The background gradient of the track when the Switch is not checked. /// @group switch $kendo-switch-off-track-gradient: null !default; @@ -68,7 +68,7 @@ $kendo-switch-off-track-focus-border: null !default; $kendo-switch-off-track-focus-gradient: null !default; /// The ring around the track when the focused Switch is not checked. /// @group switch -$kendo-switch-off-track-focus-ring: 2px solid rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ) !default; +$kendo-switch-off-track-focus-ring: 2px solid if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 )) !default; /// The background of the track when the disabled Switch is not checked. /// @group switch @@ -115,7 +115,7 @@ $kendo-switch-off-thumb-hover-gradient: null !default; $kendo-switch-on-track-bg: $kendo-color-primary !default; /// The text color of the track when the Switch is checked. /// @group switch -$kendo-switch-on-track-text: k-contrast-legacy( $kendo-switch-on-track-bg ) !default; +$kendo-switch-on-track-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg )) !default; /// The border color of the track when the Switch is checked. /// @group switch $kendo-switch-on-track-border: $kendo-switch-on-track-bg !default; @@ -150,7 +150,7 @@ $kendo-switch-on-track-focus-border: null !default; $kendo-switch-on-track-focus-gradient: null !default; /// The ring around the track when the focused Switch is checked. /// @group switch -$kendo-switch-on-track-focus-ring: 2px solid rgba( $kendo-switch-on-track-border, .25 ) !default; +$kendo-switch-on-track-focus-ring: 2px solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 )) !default; /// The background of the track when the disabled Switch is checked. /// @group switch diff --git a/packages/default/scss/table/_variables.scss b/packages/default/scss/table/_variables.scss index 0adb02cad7b..77f08f29b83 100644 --- a/packages/default/scss/table/_variables.scss +++ b/packages/default/scss/table/_variables.scss @@ -108,10 +108,9 @@ $kendo-table-group-row-text: $kendo-table-header-text !default; /// @group table $kendo-table-group-row-border: $kendo-table-header-border !default; - /// Background color of alternating rows in table. /// @group table -$kendo-table-alt-row-bg: rgba( k-contrast-legacy( $kendo-table-bg ), .04 ) !default; +$kendo-table-alt-row-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-legacy( $kendo-table-bg ), .04 )) !default; /// Text color of alternating rows in table. /// @group table $kendo-table-alt-row-text: null !default; @@ -122,7 +121,7 @@ $kendo-table-alt-row-border: null !default; /// Background color of hovered rows in table. /// @group table -$kendo-table-hover-bg: k-color-darken($kendo-table-bg, 7%) !default; +$kendo-table-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-color-darken($kendo-table-bg, 7%)) !default; /// Text color of hovered rows in table. /// @group table $kendo-table-hover-text: null !default; @@ -147,7 +146,7 @@ $kendo-table-focus-shadow: $kendo-list-item-focus-shadow !default; /// Background color of selected rows in table. /// @group table -$kendo-table-selected-bg: rgba($kendo-selected-bg, .25) !default; +$kendo-table-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default; /// Text color of selected rows in table. /// @group table $kendo-table-selected-text: null !default; diff --git a/packages/default/scss/taskboard/_variables.scss b/packages/default/scss/taskboard/_variables.scss index 43d63043b42..6a2891f4430 100644 --- a/packages/default/scss/taskboard/_variables.scss +++ b/packages/default/scss/taskboard/_variables.scss @@ -33,7 +33,7 @@ $kendo-taskboard-column-border: transparent !default; $kendo-taskboard-column-focus-bg: null !default; $kendo-taskboard-column-focus-text: null !default; -$kendo-taskboard-column-focus-border: k-try-shade( $kendo-base-border, 2.5 ) !default; +$kendo-taskboard-column-focus-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 )) !default; $kendo-taskboard-column-header-padding-y: k-math-div( $kendo-taskboard-spacer, 2 ) !default; $kendo-taskboard-column-header-padding-x: $kendo-taskboard-column-header-padding-y !default; @@ -76,17 +76,17 @@ $kendo-taskboard-card-border: $kendo-card-border !default; $kendo-taskboard-card-category-border-width: 4px !default; -$kendo-taskboard-card-focus-border: k-try-shade( $kendo-taskboard-card-border, 18% ) !default; -$kendo-taskboard-card-focus-shadow: none !default; +$kendo-taskboard-card-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% )) !default; -$kendo-taskboard-card-hover-border: k-try-shade( $kendo-taskboard-card-border, 10% ) !default; +$kendo-taskboard-card-focus-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% )) !default; +$kendo-taskboard-card-focus-shadow: none !default; -$kendo-taskboard-card-selected-border: k-color-tint( $kendo-color-primary-lighter, 5 ) !default; +$kendo-taskboard-card-selected-border: if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 )) !default; $kendo-taskboard-card-selected-shadow: none !default; $kendo-taskboard-card-header-text: $kendo-color-primary !default; -$kendo-taskboard-card-header-focus-text: $kendo-color-primary-darker !default; -$kendo-taskboard-card-header-hover-text: $kendo-color-primary-darker !default; +$kendo-taskboard-card-header-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default; +$kendo-taskboard-card-header-focus-text: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default; $kendo-taskboard-drag-placeholder-border-width: 1px !default; $kendo-taskboard-drag-placeholder-border-radius: $kendo-taskboard-card-border-radius !default; diff --git a/packages/default/scss/timeline/_variables.scss b/packages/default/scss/timeline/_variables.scss index 50e9416724b..0c7a0a22b7d 100644 --- a/packages/default/scss/timeline/_variables.scss +++ b/packages/default/scss/timeline/_variables.scss @@ -13,9 +13,9 @@ $kendo-timeline-mobile-spacing-y: 16px !default; $kendo-timeline-track-arrow-width: 30px !default; $kendo-timeline-track-arrow-height: 30px !default; -$kendo-timeline-track-arrow-disabled-bg: k-true-mix($kendo-button-bg, $kendo-body-bg, 65%) !default; -$kendo-timeline-track-arrow-disabled-text: k-true-mix($kendo-button-text, $kendo-body-bg, 65%) !default; -$kendo-timeline-track-arrow-disabled-border: k-true-mix(#000000, $kendo-body-bg, 4.8%) !default; +$kendo-timeline-track-arrow-disabled-bg: if($kendo-enable-color-system, rgba( k-color( base-subtle, true ), .6 ), k-true-mix($kendo-button-bg, $kendo-body-bg, 65%)) !default; +$kendo-timeline-track-arrow-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-true-mix($kendo-button-text, $kendo-body-bg, 65%)) !default; +$kendo-timeline-track-arrow-disabled-border: if($kendo-enable-color-system, k-color( border ), k-true-mix(#000000, $kendo-body-bg, 4.8%)) !default; $kendo-timeline-track-size: 6px !default; $kendo-timeline-track-wrap-padding-bottom: k-math-div( $kendo-timeline-track-size, 2 ) !default; @@ -39,7 +39,7 @@ $kendo-timeline-flag-max-width: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$ $kendo-timeline-mobile-flag-max-width: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x}) !default; $kendo-timeline-horizontal-flag-min-width: 60px !default; $kendo-timeline-flag-bg: $kendo-color-primary !default; -$kendo-timeline-flag-text: k-contrast-legacy( $kendo-timeline-flag-bg ) !default; +$kendo-timeline-flag-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-timeline-flag-bg )) !default; $kendo-timeline-flag-callout-width: 10px !default; $kendo-timeline-flag-callout-height: 10px !default; diff --git a/packages/default/scss/tooltip/_variables.scss b/packages/default/scss/tooltip/_variables.scss index 5fba11e20c8..1e8160e7a56 100644 --- a/packages/default/scss/tooltip/_variables.scss +++ b/packages/default/scss/tooltip/_variables.scss @@ -36,10 +36,10 @@ $kendo-tooltip-callout-size: 6px !default; /// The default background of the Tooltip. /// @group tooltip -$kendo-tooltip-bg: rgba( k-contrast-legacy( $kendo-body-bg ), .75 ) !default; +$kendo-tooltip-bg: if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-legacy( $kendo-body-bg ), .75 )) !default; /// The default text color of the Tooltip. /// @group tooltip -$kendo-tooltip-text: k-contrast-legacy( $kendo-tooltip-bg ) !default; +$kendo-tooltip-text: if($kendo-enable-color-system, k-color( app-surface ), k-contrast-legacy( $kendo-tooltip-bg )) !default; /// The default border color of the Tooltip. /// @group tooltip $kendo-tooltip-border: $kendo-tooltip-bg !default; @@ -53,7 +53,7 @@ $kendo-tooltip-shadow: k-elevation(2) !default; @each $name, $color in $colors { $_theme: k-map-merge(( $name: ( - color: k-contrast-legacy( $color ), + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), background-color: $color, border: $color, )), $_theme ); @@ -67,4 +67,4 @@ $kendo-tooltip-shadow: k-elevation(2) !default; $kendo-tooltip-theme-colors: $kendo-theme-colors !default; /// The generated theme colors map for the Tooltip. /// @group tooltip -$kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default; \ No newline at end of file +$kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default; diff --git a/packages/default/scss/window/_theme.scss b/packages/default/scss/window/_theme.scss index 1d7c1c5ae69..f0829899c9a 100644 --- a/packages/default/scss/window/_theme.scss +++ b/packages/default/scss/window/_theme.scss @@ -29,7 +29,7 @@ // Window theme colors @each $name, $color in $kendo-window-theme-colors { .k-window-#{$name} .k-window-titlebar { - color: k-contrast-legacy( $color ); + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); background-color: $color; } } diff --git a/packages/fluent/scss/all.scss b/packages/fluent/scss/all.scss index d0f10830662..2218699f524 100644 --- a/packages/fluent/scss/all.scss +++ b/packages/fluent/scss/all.scss @@ -1,4 +1,6 @@ -@use "./index.scss" as kendo-theme; +@use "./index.scss" as kendo-theme with ( + $kendo-new-colors: true, +); @include kendo-theme.config(); @include kendo-theme.styles(); diff --git a/packages/fluent/scss/core/_index.scss b/packages/fluent/scss/core/_index.scss index 5d02869bed8..bf41edfa708 100644 --- a/packages/fluent/scss/core/_index.scss +++ b/packages/fluent/scss/core/_index.scss @@ -1,8 +1,7 @@ @use "sass:map"; -// Palettes -@forward "./color-system/palettes"; -@use "./color-system/palettes" as *; +// Swatch +@use "./color-system/swatch" as *; // Elevation @use "./elevation" as *; @@ -11,12 +10,47 @@ // Variables @forward "./variables"; -@forward "@progress/kendo-theme-core/scss/index.import.scss" with ( - $kendo-palettes: $kendo-fluent-palettes, +@forward "@progress/kendo-theme-core/scss/index.import.scss" with ( + $kendo-new-colors: $kendo-new-colors !default, + // Color System + $kendo-colors: $kendo-colors !default, + // Legacy + $kendo-theme-colors: $kendo-theme-colors !default, + $kendo-palettes: $kendo-palettes !default, + $kendo-body-bg: $kendo-body-bg !default, + $kendo-body-text: $kendo-body-text !default, + $kendo-component-bg: $kendo-component-bg !default, + $kendo-component-text: $kendo-component-text !default, + $kendo-component-border: $kendo-component-border !default, + $kendo-hover-bg: $kendo-hover-bg !default, + $kendo-hover-text: $kendo-hover-text !default, + $kendo-hover-border: $kendo-hover-border !default, + $kendo-selected-bg: $kendo-selected-bg !default, + $kendo-selected-text: $kendo-selected-text !default, + $kendo-selected-border: $kendo-selected-border !default, + $kendo-selected-hover-bg: $kendo-selected-hover-bg !default, + $kendo-selected-hover-text: $kendo-selected-hover-text !default, + $kendo-selected-hover-border: $kendo-selected-hover-border !default, + $kendo-focus-outline: $kendo-focus-outline !default, + $kendo-subtle-text: $kendo-subtle-text !default, + $kendo-link-text: $kendo-link-text !default, + $kendo-link-hover-text: $kendo-link-hover-text !default, + $kendo-invalid-bg: $kendo-invalid-bg !default, + $kendo-invalid-text: $kendo-invalid-text !default, + $kendo-invalid-border: $kendo-invalid-border !default, + $kendo-invalid-shadow: $kendo-invalid-shadow !default, + $kendo-disabled-bg: $kendo-disabled-bg !default, + $kendo-disabled-text: $kendo-disabled-text !default, + $kendo-disabled-border: $kendo-disabled-border !default, + $kendo-loading-bg: $kendo-loading-bg !default, + $kendo-loading-text: $kendo-loading-text !default, + // Elevation $_default-elevation: $kendo-elevation, - $kendo-elevation: $kendo-elevation !default, + $kendo-elevation: $kendo-elevation !default ); +@forward "./color-system/swatch-legacy"; + // Helpers @use "./helpers"; diff --git a/packages/fluent/scss/core/color-system/_index.scss b/packages/fluent/scss/core/color-system/_index.scss index a25420fba65..a529351723b 100644 --- a/packages/fluent/scss/core/color-system/_index.scss +++ b/packages/fluent/scss/core/color-system/_index.scss @@ -1 +1,3 @@ +@forward "./swatch"; +@forward "./swatch-legacy"; @forward "./utils"; diff --git a/packages/fluent/scss/core/color-system/_palettes.scss b/packages/fluent/scss/core/color-system/_palettes.scss index 8aef3280c8a..4f8a71312c4 100644 --- a/packages/fluent/scss/core/color-system/_palettes.scss +++ b/packages/fluent/scss/core/color-system/_palettes.scss @@ -1,5 +1,152 @@ // Palettes -$kendo-fluent-palettes: ( +$gray: ( + white: #ffffff, + 10: #faf9f8, + 20: #f3f2f1, + 30: #edebe9, + 40: #e1dfdd, + 50: #d2d0ce, + 60: #c8c6c4, + 70: #a19f9d, + 80: #979593, + 90: #8a8886, + 100: #757371, + 110: #605e5c, + 120: #4e4d4b, + 130: #3b3a39, + 140: #323130, + 150: #201f1e, + black: #000000, +); + +$ocean-blue: ( + 10: #eff6fc, + 20: #deecf9, + 30: #c7e0f4, + 40: #abd1ef, + 50: #8ec2eb, + 60: #72b3e6, + 70: #1c87d9, + 80: #0078d4, + 90: #106ebe, + 100: #005a9e, + 110: #004578, + 120: #003760, + 130: #002948, + 140: #001c30, + 150: #000e18, +); + +$crimson-red: ( + 10: #fef3f4, + 20: #fde7e9, + 30: #f3d2d4, + 40: #e9bcbf, + 50: #dfa7aa, + 60: #d59195, + 70: #cc7c80, + 80: #c2666b, + 90: #b85156, + 100: #ae3b41, + 110: #a4262c, + 120: #831e23, + 130: #62171a, + 140: #420f12, + 150: #220000, +); + +$dandelion-yellow: ( + 10: #fff9e7, + 20: #fff4ce, + 30: #ffedad, + 40: #ffe58d, + 50: #ffde6c, + 60: #ffd74b, + 70: #ffcf2b, + 80: #ffc80a, + 90: #d2ad2e, + 100: #a69251, + 110: #797775, + 120: #615f5e, + 130: #494746, + 140: #30302f, + 150: #181817, +); + +$forest-green: ( + 10: #effbee, + 20: #dff6dd, + 30: #c8e8c6, + 40: #b1dbaf, + 50: #9acd99, + 60: #83c082, + 70: #6cb26b, + 80: #55a554, + 90: #3e973e, + 100: #278a27, + 110: #107c10, + 120: #0d630d, + 130: #0a4a0a, + 140: #063206, + 150: #031903, +); + +$papaya-orange: ( + 10: #ffece6, + 20: #fed9cc, + 30: #fec8b5, + 40: #fdb79f, + 50: #fda688, + 60: #fc9571, + 70: #fc855b, + 80: #fb7444, + 90: #fb632d, + 100: #fa5217, + 110: #fa4100, + 120: #c83400, + 130: #962700, + 140: #641a00, + 150: #320d00, +); + +$cobalt-blue: ( + 10: #e7f2ff, + 20: #cee5ff, + 30: #add4ff, + 40: #8dc3ff, + 50: #6cb2ff, + 60: #4ba0ff, + 70: #2b8fff, + 80: #0a7eff, + 90: #096edf, + 100: #085ebf, + 110: #064f9f, + 120: #053f80, + 130: #042f60, + 140: #032040, + 150: #011020, +); + +$azure-blue: ( + 10: #eaf3fb, + 20: #deecf9, + 30: #bfdbf3, + 40: #aacfef, + 50: #95c3ec, + 60: #80b8e8, + 70: #4094dc, + 80: #2b88d8, + 90: #287ec7, + 100: #2473b7, + 110: #2169a6, + 120: #1e5e96, + 130: #1a5485, + 140: #174974, + 150: #0d2a42, +); + + +$kendo-palettes: ( primary: ( 10: #eff6fc, 20: #deecf9, @@ -22,7 +169,7 @@ $kendo-fluent-palettes: ( 190: #162435, 200: #131d29, 210: #0e151e, - 220: #070B10 + 220: #070b10, ), neutral: ( 10: #faf9f8, @@ -46,7 +193,7 @@ $kendo-fluent-palettes: ( 190: #201f1e, 200: #1b1a19, 210: #161514, - 220: #11100f + 220: #11100f, ), error: ( 10: #fef3f4, @@ -70,7 +217,7 @@ $kendo-fluent-palettes: ( 190: #a80000, 200: #77231c, 210: #4d211d, - 220: #251616 + 220: #251616, ), success: ( 10: #effbee, @@ -94,7 +241,7 @@ $kendo-fluent-palettes: ( 190: #107c10, 200: #1d5d34, 210: #193e2c, - 220: #10211d + 220: #10211d, ), warning: ( 10: #fff9e7, @@ -118,7 +265,7 @@ $kendo-fluent-palettes: ( 190: #797775, 200: #555557, 210: #35373b, - 220: #1a1c20 + 220: #1a1c20, ), info: ( 10: #e7f2ff, @@ -142,7 +289,7 @@ $kendo-fluent-palettes: ( 190: #03274e, 200: #021d3b, 210: #021327, - 220: #010a14 + 220: #010a14, ), tertiary: ( 10: #eaf3fb, @@ -166,7 +313,7 @@ $kendo-fluent-palettes: ( 190: #0d2a42, 200: #0a1f32, 210: #071521, - 220: #030a11 + 220: #030a11, ), series-a: ( 10: #bfe6ee, @@ -190,7 +337,7 @@ $kendo-fluent-palettes: ( 190: #00262f, 200: #001c23, 210: #001318, - 220: #000a0c + 220: #000a0c, ), series-b: ( 10: #f9d1d5, @@ -214,7 +361,7 @@ $kendo-fluent-palettes: ( 190: #3a1216, 200: #2c0e10, 210: #1d090b, - 220: #0f0505 + 220: #0f0505, ), series-c: ( 10: #ffeebf, @@ -238,7 +385,7 @@ $kendo-fluent-palettes: ( 190: #402e00, 200: #302300, 210: #201700, - 220: #100c00 + 220: #100c00, ), series-d: ( 10: #bfddf5, @@ -262,7 +409,7 @@ $kendo-fluent-palettes: ( 190: #001e36, 200: #001623, 210: #000f1b, - 220: #00080e + 220: #00080e, ), series-e: ( 10: #e1d8ed, @@ -286,7 +433,7 @@ $kendo-fluent-palettes: ( 190: #22192e, 200: #1a1323, 210: #110d17, - 220: #09060c + 220: #09060c, ), series-f: ( 10: #bff2da, @@ -310,6 +457,6 @@ $kendo-fluent-palettes: ( 190: #00331b, 200: #002614, 210: #001a0d, - 220: #000d07 - ) + 220: #000d07, + ), ) !default; diff --git a/packages/fluent/scss/core/color-system/_swatch-legacy.scss b/packages/fluent/scss/core/color-system/_swatch-legacy.scss new file mode 100644 index 00000000000..39c5172805e --- /dev/null +++ b/packages/fluent/scss/core/color-system/_swatch-legacy.scss @@ -0,0 +1,74 @@ +@use "@progress/kendo-theme-core/scss/index.import.scss" as *; + +@if($kendo-new-colors) { + $kendo-body-bg: null; + $kendo-body-text: null; + $kendo-component-bg: null; + $kendo-component-text: null; + $kendo-component-border: null; + $kendo-hover-bg: null; + $kendo-hover-text: null; + $kendo-hover-border: null; + $kendo-selected-bg: null; + $kendo-selected-text: null; + $kendo-selected-border: null; + $kendo-selected-hover-bg: null; + $kendo-selected-hover-text: null; + $kendo-selected-hover-border: null; + $kendo-focus-outline: null; + $kendo-subtle-text: null; + $kendo-link-text: null; + $kendo-link-hover-text: null; + $kendo-invalid-bg: null; + $kendo-invalid-text: null; + $kendo-invalid-border: null; + $kendo-invalid-shadow: null; + $kendo-disabled-bg: null; + $kendo-disabled-text: null; + $kendo-disabled-border: null; + $kendo-loading-bg: null; + $kendo-loading-text: null; + $kendo-palettes: (); + $kendo-theme-colors: (); +} + +:root { + --kendo-body-bg: #{$kendo-body-bg}; + --kendo-body-text: #{$kendo-body-text}; + + --kendo-component-bg: #{$kendo-component-bg}; + --kendo-component-text: #{$kendo-component-text}; + --kendo-component-border: #{$kendo-component-border}; + + --kendo-link-text: #{$kendo-link-text}; + --kendo-link-hover-text: #{$kendo-link-hover-text}; + + --kendo-disabled-bg: #{$kendo-disabled-bg}; + --kendo-disabled-text: #{$kendo-disabled-text}; + --kendo-disabled-border: #{$kendo-disabled-border}; + + --kendo-hover-bg: #{$kendo-hover-bg}; + --kendo-hover-text: #{$kendo-hover-text}; + --kendo-hover-border: #{$kendo-hover-border}; + + --kendo-selected-bg: #{$kendo-selected-bg}; + --kendo-selected-text: #{$kendo-selected-text}; + --kendo-selected-border: #{$kendo-selected-border}; + + --kendo-selected-hover-bg: #{$kendo-selected-hover-bg}; + --kendo-selected-hover-text: #{$kendo-selected-hover-text}; + --kendo-selected-hover-border: #{$kendo-selected-hover-border}; + + --kendo-focus-outline: #{$kendo-focus-outline}; + + --kendo-subtle-text: #{$kendo-subtle-text}; + + --kendo-invalid-bg: #{$kendo-invalid-bg}; + --kendo-invalid-text: #{$kendo-invalid-text}; + --kendo-invalid-border: #{$kendo-invalid-border}; + --kendo-invalid-shadow: #{$kendo-invalid-shadow}; + + --kendo-border-radius-sm: #{$kendo-border-radius-sm}; + --kendo-border-radius-md: #{$kendo-border-radius-md}; + --kendo-border-radius-lg: #{$kendo-border-radius-lg}; +} \ No newline at end of file diff --git a/packages/fluent/scss/core/color-system/_swatch.scss b/packages/fluent/scss/core/color-system/_swatch.scss new file mode 100644 index 00000000000..d590b307188 --- /dev/null +++ b/packages/fluent/scss/core/color-system/_swatch.scss @@ -0,0 +1,205 @@ +@use "@progress/kendo-theme-core/scss/color-system/_functions.import.scss" as functions; +@use "@progress/kendo-theme-core/scss/color-system/_constants.scss" as constants; +@use "./palettes" as *; +@forward "./palettes"; + +// TODO! + +// Config +$kendo-new-colors: false !default; + +// Colors +$_default-colors: ( + // Misc + surface: null, + surface-alt: null, + border: null, + border-alt: null, + // 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, + base-on-base: null, + base-on-surface: null, + // 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, + primary-on-base: null, + primary-on-surface: null, + // 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, + secondary-on-base: null, + secondary-on-surface: null, + // 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, + tertiary-on-base: null, + tertiary-on-surface: null, + // 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, + info-on-base: null, + info-on-surface: null, + // 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, + success-on-base: null, + success-on-surface: null, + // 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, + warning-on-base: null, + warning-on-surface: null, + // 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, + error-on-base: null, + error-on-surface: null, + // 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, + light-on-base: null, + light-on-surface: null, + // 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, + dark-on-base: null, + dark-on-surface: null +) !default; + +$kendo-colors: $_default-colors !default; + +// Legacy + +// Root styles +$kendo-body-bg: constants.$kendo-color-white !default; +$kendo-body-text: functions.k-get-theme-color-var(neutral-160) !default; + +// Component styles +$kendo-component-bg: $kendo-body-bg !default; +$kendo-component-text: $kendo-body-text !default; +$kendo-component-border: functions.k-get-theme-color-var(neutral-30) !default; + +// States styles +$kendo-hover-bg: functions.k-get-theme-color-var(neutral-20) !default; +$kendo-hover-text: functions.k-get-theme-color-var(neutral-190) !default; +$kendo-hover-border: functions.k-get-theme-color-var(neutral-20) !default; + +$kendo-selected-bg: functions.k-get-theme-color-var(neutral-30) !default; +$kendo-selected-text: functions.k-get-theme-color-var(neutral-160) !default; +$kendo-selected-border: functions.k-get-theme-color-var(neutral-130) !default; + +$kendo-selected-hover-bg: functions.k-get-theme-color-var(neutral-40) !default; +$kendo-selected-hover-text: functions.k-get-theme-color-var(neutral-190) !default; +$kendo-selected-hover-border: functions.k-get-theme-color-var(neutral-130) !default; + +$kendo-focus-outline: functions.k-get-theme-color-var(neutral-130) !default; + +$kendo-subtle-text: functions.k-get-theme-color-var(neutral-130) !default; + +// Link +$kendo-link-text: functions.k-get-theme-color-var(primary-100) !default; +$kendo-link-hover-text: functions.k-get-theme-color-var(primary-120) !default; + +// Validator +$kendo-invalid-bg: initial !default; +$kendo-invalid-text: functions.k-get-theme-color-var(error-190) !default; +$kendo-invalid-border: functions.k-get-theme-color-var(error-190) !default; +$kendo-invalid-shadow: null !default; + +// Disabled Styling +$kendo-disabled-bg: functions.k-get-theme-color-var(neutral-20) !default; +$kendo-disabled-text: functions.k-get-theme-color-var(neutral-90) !default; +$kendo-disabled-border: transparent !default; + +// Loading +$kendo-loading-bg: $kendo-component-bg !default; +$kendo-loading-text: currentColor !default; + +$kendo-theme-colors: ( + primary: ( + text: functions.k-get-theme-color-var(primary-130), + bg: functions.k-get-theme-color-var(primary-20), + border: functions.k-get-theme-color-var(primary-20), + ), + info: ( + text: functions.k-get-theme-color-var(info-190), + bg: functions.k-get-theme-color-var(info-20), + border: functions.k-get-theme-color-var(info-20), + ), + success: ( + text: functions.k-get-theme-color-var(success-190), + bg: functions.k-get-theme-color-var(success-20), + border: functions.k-get-theme-color-var(success-20), + ), + warning: ( + text: functions.k-get-theme-color-var(neutral-160), + bg: functions.k-get-theme-color-var(warning-20), + border: functions.k-get-theme-color-var(warning-20), + ), + error: ( + text: functions.k-get-theme-color-var(error-190), + bg: functions.k-get-theme-color-var(error-20), + border: functions.k-get-theme-color-var(error-20), + ), +) !default; diff --git a/packages/fluent/scss/index.scss b/packages/fluent/scss/index.scss index 82ae721c5b8..b44db6422ab 100644 --- a/packages/fluent/scss/index.scss +++ b/packages/fluent/scss/index.scss @@ -163,7 +163,6 @@ // Use component modules @use "./core" as *; - // Typography and utils @use "./typography" as *; @use "./utils" as *; diff --git a/packages/material/scss/core/_index.scss b/packages/material/scss/core/_index.scss index e9ba71b4a62..8697314b3fa 100644 --- a/packages/material/scss/core/_index.scss +++ b/packages/material/scss/core/_index.scss @@ -1,7 +1,7 @@ $wcag-min-contrast-ratio: 4.5 !default; // Color system -@import "./color-system/index.import.scss"; +@import "./color-system/_swatch.scss"; // Elevation @import "./elevation/index.import.scss"; @@ -11,6 +11,9 @@ $wcag-min-contrast-ratio: 4.5 !default; @import "@progress/kendo-theme-core/scss/index.import.scss"; +// Backward compatibility +@import "./color-system/_swatch-legacy.scss"; + // Expose @include exports("kendo-core-styles") { @include kendo-core--styles(); diff --git a/packages/material/scss/core/color-system/_color-system-material.scss b/packages/material/scss/core/color-system/_color-system-material.scss deleted file mode 100644 index 1592bf691bc..00000000000 --- a/packages/material/scss/core/color-system/_color-system-material.scss +++ /dev/null @@ -1,801 +0,0 @@ -@import "@progress/kendo-theme-core/scss/functions/index.import.scss"; - -/// The color white. -/// Note: you cannot change this value. -/// @type Color -/// @group color-system -$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default - -/// The color black. -/// Note: you cannot change this value. -/// @type Color -/// @group color-system -$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default - -// Adapted from https://github.com/angular/material2/blob/master/src/lib/core/theming/_palette.scss -// Adapted from https://github.com/angular/components/blob/master/src/material/core/theming/_theming.scss - -$dark-primary-text: rgba( black, .87 ) !default; -$dark-secondary-text: rgba( black, .54 ) !default; -$dark-disabled-text: rgba( black, .38 ) !default; -$dark-dividers: rgba( black, .12 ) !default; -$light-primary-text: $kendo-color-white !default; -$light-secondary-text: rgba( white, .7 ) !default; -$light-disabled-text: rgba( white, .5 ) !default; -$light-dividers: rgba( white, .12 ) !default; - -$palettes: ( - - // Red - red: ( - 50: #ffebee, - 100: #ffcdd2, - 200: #ef9a9a, - 300: #e57373, - 400: #ef5350, - 500: #f44336, - 600: #e53935, - 700: #d32f2f, - 800: #c62828, - 900: #b71c1c, - A100: #ff8a80, - A200: #ff5252, - A400: #ff1744, - A700: #d50000, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $dark-primary-text, - 600: $dark-primary-text, - 700: $light-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $light-primary-text - ) - ), - - // Pink - pink: ( - 50: #fce4ec, - 100: #f8bbd0, - 200: #f48fb1, - 300: #f06292, - 400: #ec407a, - 500: #e51a5f, // originally it was #e91e63, but changed for better contrast against white - 600: #d81b60, - 700: #c2185b, - 800: #ad1457, - 900: #880e4f, - A100: #ff80ab, - A200: #ff4081, - A400: #f50057, - A700: #c51162, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $light-primary-text, - 600: $light-primary-text, - 700: $light-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $light-primary-text - ) - ), - - // Purple - purple: ( - 50: #f3e5f5, - 100: #e1bee7, - 200: #ce93d8, - 300: #ba68c8, - 400: #ab47bc, - 500: #9c27b0, - 600: #8e24aa, - 700: #7b1fa2, - 800: #6a1b9a, - 900: #4a148c, - A100: #ea80fc, - A200: #e040fb, - A400: #d500f9, - A700: #aa00ff, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $light-primary-text, - 500: $light-primary-text, - 600: $light-primary-text, - 700: $light-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $light-primary-text - ) - ), - - // Deep Purple - deepPurple: ( - 50: #ede7f6, - 100: #d1c4e9, - 200: #b39ddb, - 300: #9575cd, - 400: #7e57c2, - 500: #673ab7, - 600: #5e35b1, - 700: #512da8, - 800: #4527a0, - 900: #311b92, - A100: #b388ff, - A200: #7c4dff, - A400: #651fff, - A700: #6200ea, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $light-primary-text, - 500: $light-primary-text, - 600: $light-primary-text, - 700: $light-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $light-primary-text, - A400: $light-primary-text, - A700: $light-primary-text - ) - ), - - // Indigo - indigo: ( - 50: #e8eaf6, - 100: #c5cae9, - 200: #9fa8da, - 300: #7986cb, - 400: #5c6bc0, - 500: #3f51b5, - 600: #3949ab, - 700: #303f9f, - 800: #283593, - 900: #1a237e, - A100: #8c9eff, - A200: #536dfe, - A400: #3d5afe, - A700: #304ffe, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $light-primary-text, - 500: $light-primary-text, - 600: $light-primary-text, - 700: $light-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $light-primary-text, - A700: $light-primary-text - ) - ), - - // Blue - blue: ( - 50: #e3f2fd, - 100: #bbdefb, - 200: #90caf9, - 300: #64b5f6, - 400: #42a5f5, - 500: #2196f3, - 600: #1e88e5, - 700: #1976d2, - 800: #1565c0, - 900: #0d47a1, - A100: #82b1ff, - A200: #448aff, - A400: #2979ff, - A700: #2962ff, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $dark-primary-text, - 600: $dark-primary-text, - 700: $light-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $light-primary-text - ) - ), - - // Light Blue - lightBlue: ( - 50: #e1f5fe, - 100: #b3e5fc, - 200: #81d4fa, - 300: #4fc3f7, - 400: #29b6f6, - 500: #03a9f4, - 600: #039be5, - 700: #0288d1, - 800: #0277bd, - 900: #01579b, - A100: #80d8ff, - A200: #40c4ff, - A400: #00b0ff, - A700: #0091ea, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $dark-primary-text, - 600: $dark-primary-text, - 700: $dark-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $dark-primary-text - ) - ), - - // Cyan - cyan: ( - 50: #e0f7fa, - 100: #b2ebf2, - 200: #80deea, - 300: #4dd0e1, - 400: #26c6da, - 500: #00bcd4, - 600: #00acc1, - 700: #0097a7, - 800: #00838f, - 900: #006064, - A100: #84ffff, - A200: #18ffff, - A400: #00e5ff, - A700: #00b8d4, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $dark-primary-text, - 600: $dark-primary-text, - 700: $dark-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $dark-primary-text - ) - ), - - // Teal - teal: ( - 50: #e0f2f1, - 100: #b2dfdb, - 200: #80cbc4, - 300: #4db6ac, - 400: #26a69a, - 500: #009688, - 600: #00897b, - 700: #00796b, - 800: #00695c, - 900: #004d40, - A100: #a7ffeb, - A200: #64ffda, - A400: #1de9b6, - A700: #00bfa5, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $dark-primary-text, - 600: $dark-primary-text, - 700: $light-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $dark-primary-text - ) - ), - - // Green - green: ( - 50: #e8f5e9, - 100: #c8e6c9, - 200: #a5d6a7, - 300: #81c784, - 400: #66bb6a, - 500: #4caf50, - 600: #43a047, - 700: #388e3c, - 800: #2e7d32, - 900: #1b5e20, - A100: #b9f6ca, - A200: #69f0ae, - A400: #00e676, - A700: #00c853, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $dark-primary-text, - 600: $dark-primary-text, - 700: $dark-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $dark-primary-text - ) - ), - - // Light Green - lightGreen: ( - 50: #f1f8e9, - 100: #dcedc8, - 200: #c5e1a5, - 300: #aed581, - 400: #9ccc65, - 500: #8bc34a, - 600: #7cb342, - 700: #689f38, - 800: #558b2f, - 900: #33691e, - A100: #ccff90, - A200: #b2ff59, - A400: #76ff03, - A700: #64dd17, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $dark-primary-text, - 600: $dark-primary-text, - 700: $dark-primary-text, - 800: $dark-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $dark-primary-text - ) - ), - - // Lime - lime: ( - 50: #f9fbe7, - 100: #f0f4c3, - 200: #e6ee9c, - 300: #dce775, - 400: #d4e157, - 500: #cddc39, - 600: #c0ca33, - 700: #afb42b, - 800: #9e9d24, - 900: #827717, - A100: #f4ff81, - A200: #eeff41, - A400: #c6ff00, - A700: #aeea00, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $dark-primary-text, - 600: $dark-primary-text, - 700: $dark-primary-text, - 800: $dark-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $dark-primary-text - ) - ), - - // Yellow - yellow: ( - 50: #fffde7, - 100: #fff9c4, - 200: #fff59d, - 300: #fff176, - 400: #ffee58, - 500: #ffeb3b, - 600: #fdd835, - 700: #fbc02d, - 800: #f9a825, - 900: #f57f17, - A100: #ffff8d, - A200: #ffff00, - A400: #ffea00, - A700: #ffd600, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $dark-primary-text, - 600: $dark-primary-text, - 700: $dark-primary-text, - 800: $dark-primary-text, - 900: $dark-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $dark-primary-text - ) - ), - - // Amber - amber: ( - 50: #fff8e1, - 100: #ffecb3, - 200: #ffe082, - 300: #ffd54f, - 400: #ffca28, - 500: #ffc107, - 600: #ffb300, - 700: #ffa000, - 800: #ff8f00, - 900: #ff6f00, - A100: #ffe57f, - A200: #ffd740, - A400: #ffc400, - A700: #ffab00, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $dark-primary-text, - 600: $dark-primary-text, - 700: $dark-primary-text, - 800: $dark-primary-text, - 900: $dark-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $dark-primary-text - ) - ), - - // Orange - orange: ( - 50: #fff3e0, - 100: #ffe0b2, - 200: #ffcc80, - 300: #ffb74d, - 400: #ffa726, - 500: #ff9800, - 600: #fb8c00, - 700: #f57c00, - 800: #ef6c00, - 900: #e65100, - A100: #ffd180, - A200: #ffab40, - A400: #ff9100, - A700: #ff6d00, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $dark-primary-text, - 600: $dark-primary-text, - 700: $dark-primary-text, - 800: $dark-primary-text, - 900: $dark-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $dark-primary-text - ) - ), - - // Deep Orange - deepOrange: ( - 50: #fbe9e7, - 100: #ffccbc, - 200: #ffab91, - 300: #ff8a65, - 400: #ff7043, - 500: #ff5722, - 600: #f4511e, - 700: #e64a19, - 800: #d84315, - 900: #bf360c, - A100: #ff9e80, - A200: #ff6e40, - A400: #ff3d00, - A700: #dd2c00, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $dark-primary-text, - 600: $dark-primary-text, - 700: $dark-primary-text, - 800: $dark-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $light-primary-text - ) - ), - - // Brown - brown: ( - 50: #efebe9, - 100: #d7ccc8, - 200: #bcaaa4, - 300: #a1887f, - 400: #8d6e63, - 500: #795548, - 600: #6d4c41, - 700: #5d4037, - 800: #4e342e, - 900: #3e2723, - A100: #d7ccc8, - A200: #bcaaa4, - A400: #8d6e63, - A700: #5d4037, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $light-primary-text, - 500: $light-primary-text, - 600: $light-primary-text, - 700: $light-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $light-primary-text, - A700: $light-primary-text - ) - ), - - // Gray - gray: ( - 50: #fafafa, - 100: #f5f5f5, - 200: #eeeeee, - 300: #e0e0e0, - 400: #bdbdbd, - 500: #9e9e9e, - 600: #757575, - 700: #616161, - 800: #424242, - 900: #212121, - A100: #ffffff, - A200: #eeeeee, - A400: #bdbdbd, - A700: #616161, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $dark-primary-text, - 600: $light-primary-text, - 700: $light-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $light-primary-text - ) - ), - - // Blue Gray - blueGray: ( - 50: #eceff1, - 100: #cfd8dc, - 200: #b0bec5, - 300: #90a4ae, - 400: #78909c, - 500: #607d8b, - 600: #546e7a, - 700: #455a64, - 800: #37474f, - 900: #263238, - A100: #cfd8dc, - A200: #b0bec5, - A400: #78909c, - A700: #455a64, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $dark-primary-text, - 600: $light-primary-text, - 700: $light-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $light-primary-text, - A700: $light-primary-text - ) - ) - -) !default; - -@function get-base-palette($name) { - @return k-map-get( $palettes, $name ); -} - -@function get-base-hue($palette, $hue) { - @return k-map-get( get-base-palette( $palette ), $hue ); -} - -@function get-base-contrast($palette, $hue) { - @return k-map-get( k-map-get( get-base-palette($palette), contrast), $hue ); -} - -$material-dark-complimentary: ( - is-dark: true, - body-bg: #121212, - body-text: $light-primary-text, - subtle-text: $light-secondary-text, - disabled-text: $light-disabled-text, - component-bg: #121212, - component-text: $light-primary-text, - component-border: $light-dividers, - base-bg: get-base-hue( gray, 900 ), - hover-bg: rgba( white, .08 ), - focus-bg: rgba( white, .24 ), - elevation: $kendo-color-black -) !default; - - -$material-light-complimentary: ( - is-dark: false, - body-bg: $kendo-color-white, - body-text: get-base-contrast( gray, 50 ), - subtle-text: $dark-secondary-text, - disabled-text: $dark-disabled-text, - component-bg: $kendo-color-white, - component-text: $dark-primary-text, - component-border: $dark-dividers, - base-bg: $kendo-color-white, - hover-bg: rgba( black, .04 ), - focus-bg: rgba( black, .12 ), - elevation: $kendo-color-black -) !default; - - -// For a given hue in a palette, return the contrast color from the map of contrast palettes. -@function material-contrast($palette, $hue) { - @return k-map-get(k-map-get($palette, contrast), $hue); -} - -// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms -// of the Material Design hues. -@function material-palette($base-palette, $main: 500, $lighter: 300, $darker: 700, $adjust-contrast: true) { - - @if not (k-meta-type-of($base-palette) == map) { - $base-palette: get-base-palette($base-palette); - } - - $main-contrast: material-contrast($base-palette, $main); - - @if ( $adjust-contrast == true ) { - @if ($theme-type == dark) and ($main-contrast == $light-primary-text) { - $main: 200; - $lighter: 100; - $darker: 300; - } - - @if ($theme-type == light) and ($main-contrast == $dark-primary-text) { - $main: 800; - $lighter: 700; - $darker: 900; - } - } - - // stylelint-disable-next-line function-comma-newline-after - $result: k-map-merge($base-palette, ( - main: k-map-get($base-palette, $main), - lighter: k-map-get($base-palette, $lighter), - darker: k-map-get($base-palette, $darker), - main-contrast: material-contrast($base-palette, $main), - lighter-contrast: material-contrast($base-palette, $lighter), - darker-contrast: material-contrast($base-palette, $darker) - )); - - // For each hue in the palette, add a "-contrast" color to the map. - @each $hue, $color in $base-palette { - // stylelint-disable-next-line function-comma-newline-after - $result: k-map-merge($result, ( - "#{$hue}-contrast": material-contrast($base-palette, $hue) - )); - } - - @return $result; -} - - -// Gets a color from a theme palette (the output of material-palette). -// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured -// hues (main, lighter, darker), or any of the aforementioned prefixed with "-contrast". -@function material-color($palette, $hue: main, $opacity: null) { - - @if not (k-meta-type-of($palette) == map) { - $palette: get-base-palette($palette); - } - - // If hueKey is a number between zero and one, then it actually contains an - // opacity value, so recall this function with the default hue and that given opacity. - @if k-meta-type-of($hue) == number and $hue >= 0 and $hue <= 1 { - @return material-color($palette, main, $hue); - } - - $color: k-map-get($palette, $hue); - $opacity: if($opacity == null, k-color-alpha($color), $opacity); - - @return rgba( $color, $opacity ); -} - -// Creates a container object for a light theme to be given to individual component theme mixins. -@function material-theme($kendo-color-primary, $kendo-color-secondary, $theme-type, $warn: material-palette(red)) { - $complimentary: if($theme-type == dark, $material-dark-complimentary, $material-light-complimentary); - @return k-map-merge(( - primary: $kendo-color-primary, - secondary: $kendo-color-secondary, - warn: $warn - ), $complimentary ); -} diff --git a/packages/material/scss/core/color-system/_functions.scss b/packages/material/scss/core/color-system/_functions.scss new file mode 100644 index 00000000000..f9f5b249790 --- /dev/null +++ b/packages/material/scss/core/color-system/_functions.scss @@ -0,0 +1,88 @@ +@import "./_palettes.scss"; + +@function get-base-palette($name) { + @return k-map-get($palettes, $name); +} + +@function get-base-hue($palette, $hue) { + @return k-map-get(get-base-palette($palette), $hue); +} + +@function get-base-contrast($palette, $hue) { + @return k-map-get(k-map-get(get-base-palette($palette), contrast), $hue); +} + +// For a given hue in a palette, return the contrast color from the map of contrast palettes. +@function material-contrast($palette, $hue) { + @return k-map-get(k-map-get($palette, contrast), $hue); +} + +// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms +// of the Material Design hues. +@function material-palette($base-palette, $main: 500, $lighter: 300, $darker: 700, $adjust-contrast: true) { + @if not(k-meta-type-of($base-palette) == map) { + $base-palette: get-base-palette($base-palette); + } + + $main-contrast: material-contrast($base-palette, $main); + + @if ($adjust-contrast == true) { + @if ($theme-type == dark) and ($main-contrast == $light-primary-text) { + $main: 200; + $lighter: 100; + $darker: 300; + } + + @if ($theme-type == light) and ($main-contrast == $dark-primary-text) { + $main: 800; + $lighter: 700; + $darker: 900; + } + } + + // stylelint-disable-next-line function-comma-newline-after + $result: k-map-merge( + $base-palette, + ( + main: k-map-get($base-palette, $main), + lighter: k-map-get($base-palette, $lighter), + darker: k-map-get($base-palette, $darker), + main-contrast: material-contrast($base-palette, $main), + lighter-contrast: material-contrast($base-palette, $lighter), + darker-contrast: material-contrast($base-palette, $darker), + ) + ); + + // For each hue in the palette, add a "-contrast" color to the map. + @each $hue, $color in $base-palette { + // stylelint-disable-next-line function-comma-newline-after + $result: k-map-merge( + $result, + ( + "#{$hue}-contrast": material-contrast($base-palette, $hue), + ) + ); + } + + @return $result; +} + +// Gets a color from a theme palette (the output of material-palette). +// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured +// hues (main, lighter, darker), or any of the aforementioned prefixed with "-contrast". +@function material-color($palette, $hue: main, $opacity: null) { + @if not(k-meta-type-of($palette) == map) { + $palette: get-base-palette($palette); + } + + // If hueKey is a number between zero and one, then it actually contains an + // opacity value, so recall this function with the default hue and that given opacity. + @if k-meta-type-of($hue) == number and $hue >= 0 and $hue <= 1 { + @return material-color($palette, main, $hue); + } + + $color: k-map-get($palette, $hue); + $opacity: if($opacity == null, k-color-alpha($color), $opacity); + + @return rgba($color, $opacity); +} diff --git a/packages/material/scss/core/color-system/_palettes.scss b/packages/material/scss/core/color-system/_palettes.scss new file mode 100644 index 00000000000..7b793261e5a --- /dev/null +++ b/packages/material/scss/core/color-system/_palettes.scss @@ -0,0 +1,670 @@ +$dark-primary-text: rgba(black, 0.87) !default; +$light-primary-text: #ffffff !default; + +$palettes: ( + // Red + red: + ( + 50: #ffebee, + 100: #ffcdd2, + 200: #ef9a9a, + 300: #e57373, + 400: #ef5350, + 500: #f44336, + 600: #e53935, + 700: #d32f2f, + 800: #c62828, + 900: #b71c1c, + A100: #ff8a80, + A200: #ff5252, + A400: #ff1744, + A700: #d50000, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $dark-primary-text, + 600: $dark-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $light-primary-text, + ), + ), + + // Pink + pink: + ( + 50: #fce4ec, + 100: #f8bbd0, + 200: #f48fb1, + 300: #f06292, + 400: #ec407a, + 500: #e51a5f, + // originally it was #e91e63, but changed for better contrast against white + 600: #d81b60, + 700: #c2185b, + 800: #ad1457, + 900: #880e4f, + A100: #ff80ab, + A200: #ff4081, + A400: #f50057, + A700: #c51162, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $light-primary-text, + 600: $light-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $light-primary-text, + ), + ), + + // Purple + purple: + ( + 50: #f3e5f5, + 100: #e1bee7, + 200: #ce93d8, + 300: #ba68c8, + 400: #ab47bc, + 500: #9c27b0, + 600: #8e24aa, + 700: #7b1fa2, + 800: #6a1b9a, + 900: #4a148c, + A100: #ea80fc, + A200: #e040fb, + A400: #d500f9, + A700: #aa00ff, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $light-primary-text, + 500: $light-primary-text, + 600: $light-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $light-primary-text, + ), + ), + + // Deep Purple + deepPurple: + ( + 50: #ede7f6, + 100: #d1c4e9, + 200: #b39ddb, + 300: #9575cd, + 400: #7e57c2, + 500: #673ab7, + 600: #5e35b1, + 700: #512da8, + 800: #4527a0, + 900: #311b92, + A100: #b388ff, + A200: #7c4dff, + A400: #651fff, + A700: #6200ea, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $light-primary-text, + 500: $light-primary-text, + 600: $light-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $light-primary-text, + A400: $light-primary-text, + A700: $light-primary-text, + ), + ), + + // Indigo + indigo: + ( + 50: #e8eaf6, + 100: #c5cae9, + 200: #9fa8da, + 300: #7986cb, + 400: #5c6bc0, + 500: #3f51b5, + 600: #3949ab, + 700: #303f9f, + 800: #283593, + 900: #1a237e, + A100: #8c9eff, + A200: #536dfe, + A400: #3d5afe, + A700: #304ffe, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $light-primary-text, + 500: $light-primary-text, + 600: $light-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $light-primary-text, + A700: $light-primary-text, + ), + ), + + // Blue + blue: + ( + 50: #e3f2fd, + 100: #bbdefb, + 200: #90caf9, + 300: #64b5f6, + 400: #42a5f5, + 500: #2196f3, + 600: #1e88e5, + 700: #1976d2, + 800: #1565c0, + 900: #0d47a1, + A100: #82b1ff, + A200: #448aff, + A400: #2979ff, + A700: #2962ff, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $dark-primary-text, + 600: $dark-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $light-primary-text, + ), + ), + + // Light Blue + lightBlue: + ( + 50: #e1f5fe, + 100: #b3e5fc, + 200: #81d4fa, + 300: #4fc3f7, + 400: #29b6f6, + 500: #03a9f4, + 600: #039be5, + 700: #0288d1, + 800: #0277bd, + 900: #01579b, + A100: #80d8ff, + A200: #40c4ff, + A400: #00b0ff, + A700: #0091ea, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $dark-primary-text, + 600: $dark-primary-text, + 700: $dark-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $dark-primary-text, + ), + ), + + // Cyan + cyan: + ( + 50: #e0f7fa, + 100: #b2ebf2, + 200: #80deea, + 300: #4dd0e1, + 400: #26c6da, + 500: #00bcd4, + 600: #00acc1, + 700: #0097a7, + 800: #00838f, + 900: #006064, + A100: #84ffff, + A200: #18ffff, + A400: #00e5ff, + A700: #00b8d4, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $dark-primary-text, + 600: $dark-primary-text, + 700: $dark-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $dark-primary-text, + ), + ), + + // Teal + teal: + ( + 50: #e0f2f1, + 100: #b2dfdb, + 200: #80cbc4, + 300: #4db6ac, + 400: #26a69a, + 500: #009688, + 600: #00897b, + 700: #00796b, + 800: #00695c, + 900: #004d40, + A100: #a7ffeb, + A200: #64ffda, + A400: #1de9b6, + A700: #00bfa5, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $dark-primary-text, + 600: $dark-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $dark-primary-text, + ), + ), + + // Green + green: + ( + 50: #e8f5e9, + 100: #c8e6c9, + 200: #a5d6a7, + 300: #81c784, + 400: #66bb6a, + 500: #4caf50, + 600: #43a047, + 700: #388e3c, + 800: #2e7d32, + 900: #1b5e20, + A100: #b9f6ca, + A200: #69f0ae, + A400: #00e676, + A700: #00c853, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $dark-primary-text, + 600: $dark-primary-text, + 700: $dark-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $dark-primary-text, + ), + ), + + // Light Green + lightGreen: + ( + 50: #f1f8e9, + 100: #dcedc8, + 200: #c5e1a5, + 300: #aed581, + 400: #9ccc65, + 500: #8bc34a, + 600: #7cb342, + 700: #689f38, + 800: #558b2f, + 900: #33691e, + A100: #ccff90, + A200: #b2ff59, + A400: #76ff03, + A700: #64dd17, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $dark-primary-text, + 600: $dark-primary-text, + 700: $dark-primary-text, + 800: $dark-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $dark-primary-text, + ), + ), + + // Lime + lime: + ( + 50: #f9fbe7, + 100: #f0f4c3, + 200: #e6ee9c, + 300: #dce775, + 400: #d4e157, + 500: #cddc39, + 600: #c0ca33, + 700: #afb42b, + 800: #9e9d24, + 900: #827717, + A100: #f4ff81, + A200: #eeff41, + A400: #c6ff00, + A700: #aeea00, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $dark-primary-text, + 600: $dark-primary-text, + 700: $dark-primary-text, + 800: $dark-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $dark-primary-text, + ), + ), + + // Yellow + yellow: + ( + 50: #fffde7, + 100: #fff9c4, + 200: #fff59d, + 300: #fff176, + 400: #ffee58, + 500: #ffeb3b, + 600: #fdd835, + 700: #fbc02d, + 800: #f9a825, + 900: #f57f17, + A100: #ffff8d, + A200: #ffff00, + A400: #ffea00, + A700: #ffd600, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $dark-primary-text, + 600: $dark-primary-text, + 700: $dark-primary-text, + 800: $dark-primary-text, + 900: $dark-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $dark-primary-text, + ), + ), + + // Amber + amber: + ( + 50: #fff8e1, + 100: #ffecb3, + 200: #ffe082, + 300: #ffd54f, + 400: #ffca28, + 500: #ffc107, + 600: #ffb300, + 700: #ffa000, + 800: #ff8f00, + 900: #ff6f00, + A100: #ffe57f, + A200: #ffd740, + A400: #ffc400, + A700: #ffab00, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $dark-primary-text, + 600: $dark-primary-text, + 700: $dark-primary-text, + 800: $dark-primary-text, + 900: $dark-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $dark-primary-text, + ), + ), + + // Orange + orange: + ( + 50: #fff3e0, + 100: #ffe0b2, + 200: #ffcc80, + 300: #ffb74d, + 400: #ffa726, + 500: #ff9800, + 600: #fb8c00, + 700: #f57c00, + 800: #ef6c00, + 900: #e65100, + A100: #ffd180, + A200: #ffab40, + A400: #ff9100, + A700: #ff6d00, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $dark-primary-text, + 600: $dark-primary-text, + 700: $dark-primary-text, + 800: $dark-primary-text, + 900: $dark-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $dark-primary-text, + ), + ), + + // Deep Orange + deepOrange: + ( + 50: #fbe9e7, + 100: #ffccbc, + 200: #ffab91, + 300: #ff8a65, + 400: #ff7043, + 500: #ff5722, + 600: #f4511e, + 700: #e64a19, + 800: #d84315, + 900: #bf360c, + A100: #ff9e80, + A200: #ff6e40, + A400: #ff3d00, + A700: #dd2c00, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $dark-primary-text, + 600: $dark-primary-text, + 700: $dark-primary-text, + 800: $dark-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $light-primary-text, + ), + ), + + // Brown + brown: + ( + 50: #efebe9, + 100: #d7ccc8, + 200: #bcaaa4, + 300: #a1887f, + 400: #8d6e63, + 500: #795548, + 600: #6d4c41, + 700: #5d4037, + 800: #4e342e, + 900: #3e2723, + A100: #d7ccc8, + A200: #bcaaa4, + A400: #8d6e63, + A700: #5d4037, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $light-primary-text, + 500: $light-primary-text, + 600: $light-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $light-primary-text, + A700: $light-primary-text, + ), + ), + + // Gray + gray: + ( + 50: #fafafa, + 100: #f5f5f5, + 200: #eeeeee, + 300: #e0e0e0, + 400: #bdbdbd, + 500: #9e9e9e, + 600: #757575, + 700: #616161, + 800: #424242, + 900: #212121, + A100: #ffffff, + A200: #eeeeee, + A400: #bdbdbd, + A700: #616161, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $dark-primary-text, + 600: $light-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $light-primary-text, + ), + ), + + // Blue Gray + blueGray: + ( + 50: #eceff1, + 100: #cfd8dc, + 200: #b0bec5, + 300: #90a4ae, + 400: #78909c, + 500: #607d8b, + 600: #546e7a, + 700: #455a64, + 800: #37474f, + 900: #263238, + A100: #cfd8dc, + A200: #b0bec5, + A400: #78909c, + A700: #455a64, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $dark-primary-text, + 600: $light-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $light-primary-text, + A700: $light-primary-text, + ), + ) +) !default; diff --git a/packages/material/scss/core/color-system/_swatch-legacy.scss b/packages/material/scss/core/color-system/_swatch-legacy.scss new file mode 100644 index 00000000000..6c9a6407e60 --- /dev/null +++ b/packages/material/scss/core/color-system/_swatch-legacy.scss @@ -0,0 +1,38 @@ +@if ($kendo-new-colors) { + $dark-primary-text: null; + $dark-secondary-text: null; + $dark-disabled-text: null; + $dark-dividers: null; + $light-primary-text: null; + $light-secondary-text: null; + $light-disabled-text: null; + $light-dividers: null; + $material-dark-complimentary: ( + is-dark: true, + body-bg: null, + body-text: null, + subtle-text: null, + disabled-text: null, + component-bg: null, + component-text: null, + component-border: null, + base-bg: null, + hover-bg: null, + focus-bg: null, + elevation: null, + ); + $material-light-complimentary: ( + is-dark: false, + body-bg: null, + body-text: null, + subtle-text: null, + disabled-text: null, + component-bg: null, + component-text: null, + component-border: null, + base-bg: null, + hover-bg: null, + focus-bg: null, + elevation: null, + ); +} diff --git a/packages/material/scss/core/color-system/_swatch.scss b/packages/material/scss/core/color-system/_swatch.scss new file mode 100644 index 00000000000..7088552c4c7 --- /dev/null +++ b/packages/material/scss/core/color-system/_swatch.scss @@ -0,0 +1,186 @@ +@import "@progress/kendo-theme-core/scss/functions/index.import.scss"; +@import "@progress/kendo-theme-core/scss/color-system/_constants.scss"; +@import "./_palettes.scss"; +@import "./_functions.scss"; + +// Config +$kendo-new-colors: false !default; + +// TODO! +// Colors +$_default-colors: ( + // Misc + surface: null, + surface-alt: null, + border: null, + border-alt: null, + // 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, + base-on-base: null, + base-on-surface: null, + // 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, + primary-on-base: null, + primary-on-surface: null, + // 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, + secondary-on-base: null, + secondary-on-surface: null, + // 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, + tertiary-on-base: null, + tertiary-on-surface: null, + // 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, + info-on-base: null, + info-on-surface: null, + // 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, + success-on-base: null, + success-on-surface: null, + // 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, + warning-on-base: null, + warning-on-surface: null, + // 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, + error-on-base: null, + error-on-surface: null, + // 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, + light-on-base: null, + light-on-surface: null, + // 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, + dark-on-base: null, + dark-on-surface: null +) !default; + +$kendo-colors: $_default-colors !default; + +$kendo-is-dark-theme: false !default; + +// Adapted from https://github.com/angular/material2/blob/master/src/lib/core/theming/_palette.scss +// Adapted from https://github.com/angular/components/blob/master/src/material/core/theming/_theming.scss + +$dark-primary-text: rgba(black, 0.87) !default; +$dark-secondary-text: rgba(black, 0.54) !default; +$dark-disabled-text: rgba(black, 0.38) !default; +$dark-dividers: rgba(black, 0.12) !default; +$light-primary-text: $kendo-color-white !default; +$light-secondary-text: rgba(white, 0.7) !default; +$light-disabled-text: rgba(white, 0.5) !default; +$light-dividers: rgba(white, 0.12) !default; + +$material-dark-complimentary: ( + is-dark: true, + body-bg: #121212, + body-text: $light-primary-text, + subtle-text: $light-secondary-text, + disabled-text: $light-disabled-text, + component-bg: #121212, + component-text: $light-primary-text, + component-border: $light-dividers, + base-bg: get-base-hue(gray, 900), + hover-bg: rgba(white, 0.08), + focus-bg: rgba(white, 0.24), + elevation: $kendo-color-black, +) !default; + +$material-light-complimentary: ( + is-dark: false, + body-bg: $kendo-color-white, + body-text: get-base-contrast(gray, 50), + subtle-text: $dark-secondary-text, + disabled-text: $dark-disabled-text, + component-bg: $kendo-color-white, + component-text: $dark-primary-text, + component-border: $dark-dividers, + base-bg: $kendo-color-white, + hover-bg: rgba(black, 0.04), + focus-bg: rgba(black, 0.12), + elevation: $kendo-color-black, +) !default; + +// Creates a container object for a light theme to be given to individual component theme mixins. +@function material-theme($kendo-color-primary, $kendo-color-secondary, $theme-type, $warn: material-palette(red)) { + $complimentary: if($theme-type == dark, $material-dark-complimentary, $material-light-complimentary); + @return k-map-merge( + ( + primary: $kendo-color-primary, + secondary: $kendo-color-secondary, + warn: $warn, + ), + $complimentary + ); +} diff --git a/packages/material/scss/core/color-system/index.import.scss b/packages/material/scss/core/color-system/index.import.scss index 7389d45baad..7f05d7335bd 100644 --- a/packages/material/scss/core/color-system/index.import.scss +++ b/packages/material/scss/core/color-system/index.import.scss @@ -1 +1 @@ -@import "./_color-system-material.scss"; +// @import "./_color-system-material.scss";