Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(default): implement color system
Introduces a standardised Color Systems across all themes. The Color System is implemented behind a backwards compatibility switch, the `$kendo-enable-color-system` variable, and it is disabled by default. The execution timeline is as follows: - 2024 Q1: The Color System is available and turned off by default. - 2024 Q2: The Color System is enabled by default, but can be turned off. - 2025 Q2: Remove the backwards compatibility switch and the old system.
- Loading branch information
1 parent
2d92f16
commit c985322
Showing
90 changed files
with
3,381 additions
and
1,753 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
83 changes: 83 additions & 0 deletions
83
packages/bootstrap/scss/core/color-system/_swatch-legacy.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
Oops, something went wrong.