Skip to content

Commit

Permalink
fix(calendar): update calendar colors to match latest design spec
Browse files Browse the repository at this point in the history
  • Loading branch information
@joneff
joneff committed Apr 6, 2021
1 parent 26415a5 commit fdfc48c
Show file tree
Hide file tree
Showing 6 changed files with 87 additions and 36 deletions.
26 changes: 19 additions & 7 deletions packages/bootstrap/scss/calendar/_variables.scss
View file
Expand Up @@ -87,13 +87,25 @@ $calendar-other-month-bg: null !default;
$calendar-other-month-text: $calendar-header-cell-text !default;
$calendar-other-month-opacity: null !default;

$calendar-cell-hovered-bg: $node-hovered-bg !default;
$calendar-cell-hovered-text: $node-hovered-text !default;
$calendar-cell-hovered-border: $node-hovered-border !default;

$calendar-cell-selected-bg: $node-selected-bg !default;
$calendar-cell-selected-text: $node-selected-text !default;
$calendar-cell-selected-border: $node-selected-border !default;
$calendar-cell-bg: null !default;
$calendar-cell-text: null !default;
$calendar-cell-border: null !default;
$calendar-cell-gradient: null !default;

$calendar-cell-hover-bg: $hovered-bg !default;
$calendar-cell-hover-text: $hovered-text !default;
$calendar-cell-hover-border: $hovered-border !default;
$calendar-cell-hover-gradient: null !default;

$calendar-cell-selected-bg: $selected-bg !default;
$calendar-cell-selected-text: $selected-text !default;
$calendar-cell-selected-border: $selected-border !default;
$calendar-cell-selected-gradient: null !default;

$calendar-cell-selected-hover-bg: $selected-hover-bg !default;
$calendar-cell-selected-hover-text: $selected-hover-text !default;
$calendar-cell-selected-hover-border: $selected-hover-border !default;
$calendar-cell-selected-hover-gradient: null !default;

$calendar-cell-focused-shadow: inset $button-focused-shadow !default;
$calendar-cell-selected-focus-shadow: inset 0 0 0 2px rgba( $primary-button-active-border, .5 ) !default;
Expand Down
26 changes: 19 additions & 7 deletions packages/classic/scss/calendar/_variables.scss
View file
Expand Up @@ -87,13 +87,25 @@ $calendar-other-month-bg: null !default;
$calendar-other-month-text: $calendar-header-cell-text !default;
$calendar-other-month-opacity: null !default;

$calendar-cell-hovered-bg: $node-hovered-bg !default;
$calendar-cell-hovered-text: $node-hovered-text !default;
$calendar-cell-hovered-border: $node-hovered-border !default;

$calendar-cell-selected-bg: $node-selected-bg !default;
$calendar-cell-selected-text: $node-selected-text !default;
$calendar-cell-selected-border: $node-selected-border !default;
$calendar-cell-bg: null !default;
$calendar-cell-text: null !default;
$calendar-cell-border: null !default;
$calendar-cell-gradient: null !default;

$calendar-cell-hover-bg: $hovered-bg !default;
$calendar-cell-hover-text: $hovered-text !default;
$calendar-cell-hover-border: $hovered-border !default;
$calendar-cell-hover-gradient: null !default;

$calendar-cell-selected-bg: $selected-bg !default;
$calendar-cell-selected-text: $selected-text !default;
$calendar-cell-selected-border: $selected-border !default;
$calendar-cell-selected-gradient: null !default;

$calendar-cell-selected-hover-bg: $selected-hover-bg !default;
$calendar-cell-selected-hover-text: $selected-hover-text !default;
$calendar-cell-selected-hover-border: $selected-hover-border !default;
$calendar-cell-selected-hover-gradient: null !default;

$calendar-cell-focused-shadow: $list-item-focused-shadow !default;
$calendar-cell-selected-focus-shadow: $calendar-cell-focused-shadow !default;
Expand Down
21 changes: 12 additions & 9 deletions packages/default/scss/calendar/_theme.scss
View file
Expand Up @@ -120,24 +120,27 @@
.k-calendar-td:hover .k-link,
.k-calendar-td.k-state-hover .k-link {
@include fill(
$calendar-cell-hovered-text,
$calendar-cell-hovered-bg,
$calendar-cell-hovered-border
$calendar-cell-hover-text,
$calendar-cell-hover-bg,
$calendar-cell-hover-border,
$calendar-cell-hover-gradient
);
}
.k-state-selected .k-link {
@include fill(
$calendar-cell-selected-text,
$calendar-cell-selected-bg,
$calendar-cell-selected-border
$calendar-cell-selected-border,
$calendar-cell-selected-gradient
);
}
.k-state-selected.k-state-hover .k-link,
.k-state-selected:hover .k-link {
.k-state-selected:hover .k-link,
.k-state-selected.k-state-hover .k-link {
@include fill(
$calendar-cell-selected-text,
try-shade( $calendar-cell-selected-bg ),
try-shade( $calendar-cell-selected-border )
$calendar-cell-selected-hover-text,
$calendar-cell-selected-hover-bg,
$calendar-cell-selected-hover-border,
$calendar-cell-selected-hover-gradient
);
}
.k-state-focused .k-link,
Expand Down
26 changes: 19 additions & 7 deletions packages/default/scss/calendar/_variables.scss
View file
Expand Up @@ -87,13 +87,25 @@ $calendar-other-month-bg: null !default;
$calendar-other-month-text: $calendar-header-cell-text !default;
$calendar-other-month-opacity: null !default;

$calendar-cell-hovered-bg: $node-hovered-bg !default;
$calendar-cell-hovered-text: $node-hovered-text !default;
$calendar-cell-hovered-border: $node-hovered-border !default;

$calendar-cell-selected-bg: $node-selected-bg !default;
$calendar-cell-selected-text: $node-selected-text !default;
$calendar-cell-selected-border: $node-selected-border !default;
$calendar-cell-bg: null !default;
$calendar-cell-text: null !default;
$calendar-cell-border: null !default;
$calendar-cell-gradient: null !default;

$calendar-cell-hover-bg: $hovered-bg !default;
$calendar-cell-hover-text: $hovered-text !default;
$calendar-cell-hover-border: $hovered-border !default;
$calendar-cell-hover-gradient: null !default;

$calendar-cell-selected-bg: $selected-bg !default;
$calendar-cell-selected-text: $selected-text !default;
$calendar-cell-selected-border: $selected-border !default;
$calendar-cell-selected-gradient: null !default;

$calendar-cell-selected-hover-bg: $selected-hover-bg !default;
$calendar-cell-selected-hover-text: $selected-hover-text !default;
$calendar-cell-selected-hover-border: null !default;
$calendar-cell-selected-hover-gradient: null !default;

$calendar-cell-focused-shadow: $list-item-focused-shadow !default;
$calendar-cell-selected-focus-shadow: $calendar-cell-focused-shadow !default;
Expand Down
6 changes: 3 additions & 3 deletions packages/material/scss/calendar/_theme.scss
View file
Expand Up @@ -6,9 +6,9 @@

.k-state-focused .k-link {
@include fill(
$calendar-cell-hovered-text,
$calendar-cell-hovered-bg,
$calendar-cell-hovered-border
$calendar-cell-hover-text,
$calendar-cell-hover-bg,
$calendar-cell-hover-border
);
}
.k-state-selected.k-state-focused .k-link {
Expand Down
18 changes: 15 additions & 3 deletions packages/material/scss/calendar/_variables.scss
View file
Expand Up @@ -87,13 +87,25 @@ $calendar-other-month-bg: null !default;
$calendar-other-month-text: $calendar-header-cell-text !default;
$calendar-other-month-opacity: null !default;

$calendar-cell-hovered-bg: $node-hovered-bg !default;
$calendar-cell-hovered-text: $node-hovered-text !default;
$calendar-cell-hovered-border: $node-hovered-border !default;
$calendar-cell-bg: null !default;
$calendar-cell-text: null !default;
$calendar-cell-border: null !default;
$calendar-cell-gradient: null !default;

$calendar-cell-hover-bg: $hovered-bg !default;
$calendar-cell-hover-text: $hovered-text !default;
$calendar-cell-hover-border: $hovered-border !default;
$calendar-cell-hover-gradient: null !default;

$calendar-cell-selected-bg: $primary !default;
$calendar-cell-selected-text: contrast-wcag( $calendar-cell-selected-bg ) !default;
$calendar-cell-selected-border: $calendar-cell-selected-bg !default;
$calendar-cell-selected-gradient: null !default;

$calendar-cell-selected-hover-bg: try-shade( $calendar-cell-selected-bg, .5 ) !default;
$calendar-cell-selected-hover-text: $calendar-cell-selected-text !default;
$calendar-cell-selected-hover-border: null !default;
$calendar-cell-selected-hover-gradient: null !default;

$calendar-cell-focused-shadow: $list-item-focused-shadow !default;
$calendar-cell-selected-focus-shadow: $calendar-cell-focused-shadow !default;
Expand Down

0 comments on commit fdfc48c

Please sign in to comment.