Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Research]: Drop legacy Colour System support #5343

Draft
wants to merge 6 commits into
base: develop
Choose a base branch
from
Draft

[Research]: Drop legacy Colour System support #5343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fe71987
chore(default): drop legacy color system support
epetrow Feb 17, 2025
341b139
chore(core): drop legacy color variable usage in typography
epetrow Feb 18, 2025
82ddfdb
chore(core): drop legacy color system support
epetrow Feb 18, 2025
fbc9c47
chore: regen docs
epetrow Feb 17, 2025
3634a23
chore: scope ci for default
epetrow Feb 18, 2025
e5b9446
chore: update visual previews
kendo-bot Feb 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 3 additions & 7 deletions .github/workflows/_compile-themes.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ jobs:

- name: Build test assets
run: |
npm run sass
npm run sass --prefix packages/core
npm run sass --prefix packages/default

- name: Build swatch for a11y tests
run: |
Expand All @@ -48,12 +49,7 @@ jobs:
run: |
tar -cf themes.tar \
packages/default/dist/all.css \
packages/default/dist/default-ocean-blue-a11y.css \
packages/bootstrap/dist/all.css \
packages/classic/dist/all.css \
packages/fluent/dist/all.css \
packages/material/dist/all.css \
packages/utils/dist/all.css
packages/default/dist/default-ocean-blue-a11y.css

- name: Upload themes
uses: actions/upload-artifact@v4
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/_create-screenshots.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ jobs:

strategy:
matrix:
theme: [default, bootstrap, material, classic, fluent]
theme: [default]

steps:

Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/_test-units.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ jobs:

strategy:
matrix:
theme: [default, bootstrap, material, classic, fluent]
theme: [default]

steps:

Expand Down
7 changes: 7 additions & 0 deletions packages/core/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,10 @@ $kendo-enable-typography: false !default;
$equilateral-index: 1.7320508076 !default;
$equilateral-height: 0.8660254038 !default;
// stylelint-enable number-max-precision
$kendo-disabled-styling: (
bg: null,
color: null,
border: null,
opacity: .6,
filter: grayscale(.1)
) !default;
150 changes: 0 additions & 150 deletions packages/core/scss/color-system/_swatch-legacy.scss
View file
Open in desktop

This file was deleted.

14 changes: 14 additions & 0 deletions packages/core/scss/color-system/_swatch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,6 +424,20 @@ $_default-colors: (
$kendo-colors: $_default-colors !default;
$kendo-colors: map.merge($_default-colors, $kendo-colors);

$kendo-component-colors: (
"primary": k-color( primary ),
"secondary": k-color( secondary ),
"tertiary": k-color( tertiary ),
"info": k-color( info ),
"success": k-color( success ),
"warning": k-color( warning ),
"error": k-color( error ),
"dark": k-color( dark ),
"light": k-color( light ),
"inverse": k-color( inverse )

) !default;

@mixin kendo-color-system--styles() {
@if ($kendo-enable-color-system) {
:root {
Expand Down
7 changes: 3 additions & 4 deletions packages/core/scss/components/adaptive/_theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@use "../../mixins/index.import.scss" as *;
@use "../../color-system/_swatch-legacy.scss" as *;
@use "./variables.scss" as *;

@mixin kendo-adaptive--theme-base() {
Expand All @@ -23,11 +22,11 @@
.k-grid-mobile {

.k-column-active + th.k-header {
border-left-color: $kendo-body-text;
border-left-color: k-color( on-app-surface );
}

.k-resize-handle-inner::before {
background-color: $kendo-base-bg;
background-color: k-color( surface );
}
}

Expand Down Expand Up @@ -72,7 +71,7 @@

.k-item,
.k-link {
color: $kendo-base-text;
color: k-color( on-app-surface );
}

.k-clear,
Expand Down
5 changes: 2 additions & 3 deletions packages/core/scss/components/appbar/_theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@use "../../mixins/index.import.scss" as *;
@use "../../functions/index.import.scss" as *;
@use "../../color-system/_swatch-legacy.scss" as *;
@use "../../color-system/_functions.import.scss" as *;
@use "../../_variables.scss" as *;
@use "./variables.scss" as *;
Expand All @@ -16,7 +15,7 @@


// AppBar theme colors
@each $name, $color in $kendo-theme-colors {
@each $name, $color in $kendo-appbar-theme-colors {
.k-appbar-#{$name} {
@if $name == "light" {
color: $kendo-appbar-light-text;
Expand All @@ -25,7 +24,7 @@
color: $kendo-appbar-dark-text;
background-color: $kendo-appbar-dark-bg;
} @else {
color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
color: k-color( on-#{$name} );
background-color: $color;
}
}
Expand Down
4 changes: 4 additions & 0 deletions packages/core/scss/components/appbar/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "../../color-system/_swatch.scss" as *;

// AppBar

$kendo-appbar-margin-x: null !default;
Expand All @@ -20,3 +22,5 @@ $kendo-appbar-dark-text: null !default;

$kendo-appbar-box-shadow: null !default;
$kendo-appbar-bottom-box-shadow: null !default;

$kendo-appbar-theme-colors: null !default;
2 changes: 1 addition & 1 deletion packages/core/scss/components/avatar/_theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
@each $name, $color in $kendo-avatar-theme-colors {
.k-avatar-solid-#{$name} {
border-color: $color;
color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
color: k-color( on-#{$name} );
background-color: $color;
}
}
Expand Down
2 changes: 2 additions & 0 deletions packages/core/scss/components/avatar/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "../../color-system/_swatch.scss" as *;

// Avatar

$kendo-avatar-border-width: null !default;
Expand Down
6 changes: 3 additions & 3 deletions packages/core/scss/components/badge/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@use "../../color-system/_swatch-legacy.scss" as *;
@use "./_variables.scss" as *;
@use "sass:map";
@use "../../color-system/_functions.import.scss" as *;
@use "./_variables.scss" as *;

@mixin kendo-badge--layout-base() {

Expand Down Expand Up @@ -143,7 +143,7 @@

// Border cutout
.k-badge-border-cutout {
box-shadow: 0 0 0 2px $kendo-component-bg;
box-shadow: 0 0 0 2px k-color( surface-alt );
}

}
Expand Down
9 changes: 4 additions & 5 deletions packages/core/scss/components/badge/_theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
@use "../../color-system/_swatch-legacy.scss" as *;
@use "../../functions/index.import.scss" as *;
@use "../../color-system/_functions.import.scss" as *;
@use "../../_variables.scss" as *;
@use "_variables.scss" as *;

@mixin kendo-badge--theme-base() {

// Solid badges
@each $name, $color in $kendo-theme-colors {
@each $name, $color in $kendo-badge-theme-colors {
.k-badge-solid-#{$name} {
border-color: $color;
color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
color: k-color( on-#{$name} );
background-color: $color;
}
}
Expand All @@ -20,7 +19,7 @@
background-color: transparent;
}

@each $name, $color in $kendo-theme-colors {
@each $name, $color in $kendo-badge-theme-colors {
.k-badge-outline-#{$name} {
color: $color;
}
Expand Down
4 changes: 4 additions & 0 deletions packages/core/scss/components/badge/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "../../color-system/_swatch.scss" as *;

// Badge

$kendo-badge-border-width: null !default;
Expand Down Expand Up @@ -31,3 +33,5 @@ $kendo-badge-md-min-width: null !default;
$kendo-badge-lg-min-width: null !default;

$kendo-badge-sizes: null !default;

$kendo-badge-theme-colors: null !default;
Loading