Skip to content

Commit

Permalink
feat: implement elevation system
Browse files Browse the repository at this point in the history 
chore(fluent): implement core elevation system

chore(utils): implement core elevation system

chore(core): use k- meta functions

chore: normalize comments
  • Loading branch information
@kspeyanski @Juveniel
kspeyanski authored and Juveniel committed Sep 21, 2023
1 parent ca7cd8e commit 132e0a4
Show file tree
Hide file tree
Showing 41 changed files with 143 additions and 88 deletions.
20 changes: 0 additions & 20 deletions packages/core/scss/color-system/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,21 +75,6 @@ $kendo-focus-outline: k-get-theme-color-var( neutral-130 ) !default;

$kendo-subtle-text: k-get-theme-color-var( neutral-130 ) !default;

// Shadows

/// Shadow for cards and grid item thumbnails.
/// Equivalent to fluent depth 4.
$kendo-box-shadow-depth-1: 0 1.6px 3.6px rgba( $kendo-color-black, 0.132 ), 0 0.3px 0.9px rgba( $kendo-color-black, 0.108 ) !default;
/// Shadow for command bars and dropdowns.
/// Equivalent to fluent depth 8.
$kendo-box-shadow-depth-2: 0 3.2px 7.2px rgba( $kendo-color-black, 0.132 ), 0 0.6px 1.8px rgba( $kendo-color-black, 0.108 ) !default;
/// Shadow for teaching callouts and hover cards / tooltips.
/// Equivalent to fluent depth 16.
$kendo-box-shadow-depth-3: 0 6.4px 14.4px rgba( $kendo-color-black, 0.132 ), 0 1.2px 3.6px rgba( $kendo-color-black, 0.108 ) !default;
/// Shadow for panels and pop up dialogs.
/// Equivalent to fluent depth 64.
$kendo-box-shadow-depth-4: 0 25.6px 57.6px rgba( $kendo-color-black, 0.22 ), 0 4.8px 14.4px rgba( $kendo-color-black, 0.18 ) !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;
Expand Down Expand Up @@ -152,11 +137,6 @@ $kendo-theme-colors: (
--kendo-component-text: #{$kendo-component-text};
--kendo-component-border: #{$kendo-component-border};

--kendo-box-shadow-depth-1: #{$kendo-box-shadow-depth-1};
--kendo-box-shadow-depth-2: #{$kendo-box-shadow-depth-2};
--kendo-box-shadow-depth-3: #{$kendo-box-shadow-depth-3};
--kendo-box-shadow-depth-4: #{$kendo-box-shadow-depth-4};

--kendo-link-text: #{$kendo-link-text};
--kendo-link-hover-text: #{$kendo-link-hover-text};

Expand Down
28 changes: 19 additions & 9 deletions packages/core/scss/elevation/index.import.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,37 @@ $kendo-elevation: (
$shadow: k-map-get($kendo-elevation, $level);

@if($inverted) {
$shadow-y: nth($shadow, 2);
$shadow-y: k-list-nth($shadow, 2);
$shadow-y-inverted: -1 * $shadow-y;
$shadow: set-nth($shadow, 2, $shadow-y-inverted);
$shadow: k-list-set-nth($shadow, 2, $shadow-y-inverted);
}

@if($center) {
$shadow: set-nth($shadow, 2, 0);
$shadow: k-list-set-nth($shadow, 2, 0);
}

@if($horizontal) {
$shadow-x: nth($shadow, 1);
$shadow-y: nth($shadow, 2);
$shadow-x: k-list-nth($shadow, 1);
$shadow-y: k-list-nth($shadow, 2);

$shadow: set-nth($shadow, 1, $shadow-y);
$shadow: set-nth($shadow, 2, $shadow-x);
$shadow: k-list-set-nth($shadow, 1, $shadow-y);
$shadow: k-list-set-nth($shadow, 2, $shadow-x);
}

@if($color) {
$shadow-color: nth($shadow, 4);
$shadow: set-nth($shadow, 4, $color);
$shadow-color: k-list-nth($shadow, 4);
$shadow: k-list-set-nth($shadow, 4, $color);
}

@return $shadow;
}


@mixin elevation--styles() {
// TODO: css vars!
// :root {
// @each $level, $shadow in $kendo-elevation {
// --kendo-elevation-#{$level}: #{$shadow};
// }
// }
}
2 changes: 1 addition & 1 deletion packages/default/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -449,4 +449,4 @@ $kendo-invalid-shadow: null !default;

// Loading
$kendo-loading-opacity: .3 !default;
$kendo-zindex-loading: 100 !default;
$kendo-zindex-loading: 100 !default;
2 changes: 1 addition & 1 deletion packages/default/scss/action-sheet/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ $kendo-actionsheet-line-height: $kendo-line-height-md !default;
$kendo-actionsheet-bg: $kendo-component-bg !default;
$kendo-actionsheet-text: $kendo-component-text !default;
$kendo-actionsheet-border: $kendo-component-border !default;
$kendo-actionsheet-shadow: elevation(6) !default; /* 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12) */
$kendo-actionsheet-shadow: elevation(6) !default; // 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12)


// Actionsheet header
Expand Down
4 changes: 2 additions & 2 deletions packages/default/scss/appbar/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ $kendo-appbar-dark-text: k-contrast-legacy( $kendo-color-dark ) !default;

/// The box shadow of the AppBar.
/// @group appbar
$kendo-appbar-box-shadow: elevation(4) !default; /* 0px 1px 1px rgba(0, 0, 0, .16) */
$kendo-appbar-box-shadow: elevation(4) !default; // 0px 1px 1px rgba(0, 0, 0, .16) */
/// The box shadow of the AppBar with bottom position.
/// @group appbar
$kendo-appbar-bottom-box-shadow: elevation(4, $inverted: true) !default; /* 0px -1px 1px rgba(0, 0, 0, .16) */
$kendo-appbar-bottom-box-shadow: elevation(4, $inverted: true) !default; // 0px -1px 1px rgba(0, 0, 0, .16)
2 changes: 1 addition & 1 deletion packages/default/scss/bottom-navigation/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ $kendo-bottom-nav-item-gap: 0 k-map-get( $kendo-spacing, 1 ) !default;

/// The box shadow of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-shadow: elevation(4) !default; /* 0px 0px 5px rgba(0, 0, 0, .12) */
$kendo-bottom-nav-shadow: elevation(4) !default; // 0px 0px 5px rgba(0, 0, 0, .12)

/// The text color of the flat BottomNavigation.
/// @group bottom-navigation
Expand Down
12 changes: 6 additions & 6 deletions packages/default/scss/chat/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,16 @@ $kendo-chat-border: $kendo-app-border !default;
$kendo-chat-bubble-bg: $kendo-component-bg !default;
$kendo-chat-bubble-text: $kendo-component-text !default;
$kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
$kendo-chat-bubble-shadow: elevation(1) !default; /* 0 1px 2px rgba( $kendo-color-black, .08) */
$kendo-chat-bubble-hover-shadow: elevation(2) !default; /* 0 1px 2px rgba( $kendo-color-black, .16) */
$kendo-chat-bubble-selected-shadow: elevation(3) !default; /* 0 3px 10px rgba( $kendo-color-black, .16) */
$kendo-chat-bubble-shadow: elevation(1) !default; // 0 1px 2px rgba( $kendo-color-black, .08)
$kendo-chat-bubble-hover-shadow: elevation(2) !default; // 0 1px 2px rgba( $kendo-color-black, .16)
$kendo-chat-bubble-selected-shadow: elevation(3) !default; // 0 3px 10px rgba( $kendo-color-black, .16)

$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-border: $kendo-chat-alt-bubble-bg !default;
$kendo-chat-alt-bubble-shadow: elevation(1) !default; /* 0 1px 2px rgba( $kendo-chat-alt-bubble-bg, .2 ) */
$kendo-chat-alt-bubble-hover-shadow: elevation(2) !default; /* 0 1px 2px rgba( $kendo-chat-alt-bubble-bg, .2 ) */
$kendo-chat-alt-bubble-selected-shadow: elevation(3) !default; /* 0 3px 10px rgba( $kendo-chat-alt-bubble-bg, .4 ) */
$kendo-chat-alt-bubble-shadow: elevation(1) !default; // 0 1px 2px rgba( $kendo-chat-alt-bubble-bg, .2 )
$kendo-chat-alt-bubble-hover-shadow: elevation(2) !default; // 0 1px 2px rgba( $kendo-chat-alt-bubble-bg, .2 )
$kendo-chat-alt-bubble-selected-shadow: elevation(3) !default; // 0 3px 10px rgba( $kendo-chat-alt-bubble-bg, .4 )

$kendo-chat-quick-reply-bg: transparent !default;
$kendo-chat-quick-reply-text: $kendo-color-primary !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/coloreditor/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ $kendo-color-editor-focus-border: null !default;
// TODO: does this ever get focused? Isn't it always in a popup?
/// The box shadow of the focused ColorEditor.
/// @group coloreditor
$kendo-color-editor-focus-shadow: null !default; /* 1px 1px 7px 1px rgba(0, 0, 0, .3) */
$kendo-color-editor-focus-shadow: null !default; // 1px 1px 7px 1px rgba(0, 0, 0, .3)

/// The vertical padding of the ColorEditor header.
/// @group coloreditor
Expand Down
6 changes: 3 additions & 3 deletions packages/default/scss/colorgradient/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ $kendo-color-gradient-border: $kendo-component-border !default;
$kendo-color-gradient-focus-border: null !default;
/// The box shadow of the focused ColorGradient.
/// @group cologradient
$kendo-color-gradient-focus-shadow: elevation(3) !default; /* 1px 1px 7px 1px rgba(0, 0, 0, .3) */
$kendo-color-gradient-focus-shadow: elevation(3) !default; // 1px 1px 7px 1px rgba(0, 0, 0, .3)

/// The border radius of the ColorGradient canvas.
/// @group cologradient
Expand Down Expand Up @@ -100,10 +100,10 @@ $kendo-color-gradient-draghandle-bg: transparent !default;
$kendo-color-gradient-draghandle-border: rgba( $kendo-color-white, .8) !default;
/// The box shadow of the ColorGradient canvas drag handle.
/// @group cologradient
$kendo-color-gradient-draghandle-shadow: elevation(2, $color: rgba($kendo-color-black, 0.5)) !default; /* 0 1px 4px rgba(0, 0, 0, .5) */
$kendo-color-gradient-draghandle-shadow: elevation(2, $color: rgba($kendo-color-black, 0.5)) !default; // 0 1px 4px rgba(0, 0, 0, .5)
/// The box shadow of the focused ColorGradient canvas drag handle.
/// @group cologradient
$kendo-color-gradient-draghandle-focus-shadow: elevation(2, $color: rgba($kendo-color-black, 1)) !default; /* 0 1px 4px black */
$kendo-color-gradient-draghandle-focus-shadow: elevation(2, $color: rgba($kendo-color-black, 1)) !default; // 0 1px 4px black
/// The box shadow of the hovered ColorGradient canvas drag handle.
/// @group cologradient
$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-focus-shadow !default;
Expand Down
4 changes: 2 additions & 2 deletions packages/default/scss/fab/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,10 @@ $kendo-fab-sizes: (

/// The base shadow of the FAB.
/// @group floating-action-button
$kendo-fab-shadow: elevation(5) !default; /* 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2) */
$kendo-fab-shadow: elevation(5) !default; // 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2)
/// The shadow of the disabled FAB.
/// @group floating-action-button
$kendo-fab-disabled-shadow: elevation(5) !default; /* 0 6px 10px k-try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px k-try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px k-try-tint( rgba(0, 0, 0, .2), .5 ) */
$kendo-fab-disabled-shadow: elevation(5) !default; // 0 6px 10px k-try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px k-try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px k-try-tint( rgba(0, 0, 0, .2), .5 )
/// The shadow of the active FAB.
/// @group floating-action-button
$kendo-fab-active-shadow: null !default;
Expand Down
4 changes: 4 additions & 0 deletions packages/default/scss/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,10 @@
@include kendo-core--styles();

// Color system
@include color-system-styles();

// Elevation system
@include elevation--styles();

// Typography and utils
@include kendo-typography--styles();
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/list/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ $kendo-list-header-text: null !default;
$kendo-list-header-border: inherit !default;
/// The box shadow of the List header.
/// @group list
$kendo-list-header-shadow: elevation(2) !default; /* old: 0 5px 10px 0 rgba(0, 0, 0, .06) */
$kendo-list-header-shadow: elevation(2) !default; // old: 0 5px 10px 0 rgba(0, 0, 0, .06)


/// The background color of the List items.
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/pdf-viewer/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ $kendo-pdf-viewer-page-spacing: 30px !default;
$kendo-pdf-viewer-page-bg: white !default;
$kendo-pdf-viewer-page-text: $kendo-component-text !default;
$kendo-pdf-viewer-page-border: $kendo-component-border !default;
$kendo-pdf-viewer-page-shadow: elevation(3, $center: true) !default; /* 0 0 k-math-div( $kendo-pdf-viewer-page-spacing, 2 ) $kendo-pdf-viewer-page-border */
$kendo-pdf-viewer-page-shadow: elevation(3, $center: true) !default; // 0 0 k-math-div( $kendo-pdf-viewer-page-spacing, 2 ) $kendo-pdf-viewer-page-border

$kendo-pdf-viewer-search-panel-padding-x: $kendo-toolbar-md-padding-x !default;
$kendo-pdf-viewer-search-panel-padding-y: calc( #{$kendo-toolbar-md-padding-x} * 2 ) !default;
Expand Down
8 changes: 4 additions & 4 deletions packages/default/scss/pivotgrid/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,10 @@ $kendo-pivotgrid-configurator-header-bg: null !default;
$kendo-pivotgrid-configurator-header-text: $kendo-component-header-text !default;
$kendo-pivotgrid-configurator-header-border: null !default;

$kendo-pivotgrid-configurator-end-shadow: elevation(3, $inverted: true, $horizontal: true) !default; /* -3px 0px 6px rgba(0, 0, 0, .16) */
$kendo-pivotgrid-configurator-start-shadow: elevation(3, $horizontal: true) !default; /* 3px 0px 6px rgba(0, 0, 0, .16) */
$kendo-pivotgrid-configurator-top-shadow: elevation(3, $inverted: true) !default; /* 0px -3px 6px rgba(0, 0, 0, .16) */
$kendo-pivotgrid-configurator-bottom-shadow: elevation(3) !default; /* 0px 3px 6px rgba(0, 0, 0, .16) */
$kendo-pivotgrid-configurator-end-shadow: elevation(3, $inverted: true, $horizontal: true) !default; // -3px 0px 6px rgba(0, 0, 0, .16)
$kendo-pivotgrid-configurator-start-shadow: elevation(3, $horizontal: true) !default; // 3px 0px 6px rgba(0, 0, 0, .16)
$kendo-pivotgrid-configurator-top-shadow: elevation(3, $inverted: true) !default; // 0px -3px 6px rgba(0, 0, 0, .16)
$kendo-pivotgrid-configurator-bottom-shadow: elevation(3) !default; // 0px 3px 6px rgba(0, 0, 0, .16)

$kendo-pivotgrid-configurator-button-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
$kendo-pivotgrid-configurator-button-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/popup/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,4 @@ $kendo-popup-text: $kendo-component-text !default;
$kendo-popup-border: $kendo-component-border !default;
/// Box shadow of the popup.
/// @group popups
$kendo-popup-shadow: elevation(6) !default; /* 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) */
$kendo-popup-shadow: elevation(6) !default; // 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04)
4 changes: 2 additions & 2 deletions packages/default/scss/rating/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,5 @@ $kendo-rating-icon-selected-text: $kendo-selected-bg !default;
$kendo-rating-icon-hover-text: $kendo-selected-bg !default;
$kendo-rating-icon-focus-text: $kendo-selected-bg !default;

$kendo-rating-icon-focus-shadow: elevation(1, $color: rgba($kendo-color-black, 0.2)) !default; /* 0 2px 4px rgba( $kendo-color-black, .1 ) */
$kendo-rating-icon-focus-selected-shadow: elevation(1, $color: rgba($kendo-color-black, 0.2)) !default; /* 0 2px 4px rgba( $kendo-color-black, .1) */
$kendo-rating-icon-focus-shadow: elevation(1, $color: rgba($kendo-color-black, 0.2)) !default; // 0 2px 4px rgba( $kendo-color-black, .1 )
$kendo-rating-icon-focus-selected-shadow: elevation(1, $color: rgba($kendo-color-black, 0.2)) !default; // 0 2px 4px rgba( $kendo-color-black, .1)
2 changes: 1 addition & 1 deletion packages/default/scss/scheduler/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ $kendo-scheduler-tooltip-border-width: 0 !default;
$kendo-scheduler-tooltip-bg: $kendo-color-primary-contrast !default;
$kendo-scheduler-tooltip-text: $kendo-base-text !default;
$kendo-scheduler-tooltip-border: null !default;
$kendo-scheduler-tooltip-shadow: elevation(5) !default; /* 0px 0px 10px rgba(0, 0, 0, .2) */
$kendo-scheduler-tooltip-shadow: elevation(5) !default; // 0px 0px 10px rgba(0, 0, 0, .2)

$kendo-scheduler-tooltip-title-margin-y: k-map-get( $kendo-spacing, 3 ) !default;
$kendo-scheduler-tooltip-month-font-size: $kendo-font-size-sm !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/tabstrip/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ $kendo-tabstrip-item-selected-gradient: null !default;

$kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;

$kendo-tabstrip-item-dragging-shadow: elevation(3) !default; /* 0px 3px 4px rgba(0, 0, 0, .15) */
$kendo-tabstrip-item-dragging-shadow: elevation(3) !default; // 0px 3px 4px rgba(0, 0, 0, .15)

$kendo-tabstrip-item-disabled-bg: null !default;
$kendo-tabstrip-item-disabled-text: null !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/timeline/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ $kendo-timeline-track-end-calc: calc(#{$kendo-timeline-track-arrow-width} - 2 *
$kendo-timeline-track-bg: $kendo-button-bg !default;
$kendo-timeline-track-border-color: $kendo-button-border !default;

$kendo-timeline-track-item-focus-shadow: elevation(2, $center: true, $color: rgba($kendo-color-black, 0.4)) !default; /* 0 3px 4px 0 rgba($kendo-color-primary, .4) */
$kendo-timeline-track-item-focus-shadow: elevation(2, $center: true, $color: rgba($kendo-color-black, 0.4)) !default; // 0 3px 4px 0 rgba($kendo-color-primary, .4)

$kendo-timeline-track-event-offset: 36px !default;

Expand Down
2 changes: 1 addition & 1 deletion packages/fluent/scss/action-sheet/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ $kendo-actionsheet-text: var( --kendo-component-text, initial ) !default;
$kendo-actionsheet-border: var( --kendo-component-border, initial ) !default;
/// Box shadow of the action sheet.
/// @group action-sheet
$kendo-actionsheet-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
$kendo-actionsheet-shadow: var( --kendo-box-shadow-depth-4, none ) !default; // TODO: replace with elevation()

/// Horizontal padding of the action sheet header.
/// @group action-sheet
Expand Down
4 changes: 2 additions & 2 deletions packages/fluent/scss/bottom-navigation/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ $kendo-bottom-nav-item-focus-outline-style: solid !default;

/// The box shadow of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
$kendo-bottom-nav-shadow: var( --kendo-box-shadow-depth-1, none ) !default; // TODO: replace with elevation()

/// The theme variations for the BottomNavigation.
/// @group bottom-navigation
Expand Down Expand Up @@ -166,4 +166,4 @@ $kendo-bottom-nav-theme-colors: () !default;
$kendo-bottom-nav-theme-colors,
k-generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
);
}
}
4 changes: 2 additions & 2 deletions packages/fluent/scss/card/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ $kendo-card-text: var( --kendo-component-text, initial ) !default;
$kendo-card-border: var( --kendo-component-border, initial ) !default;
/// Shadow of the card.
/// @group card
$kendo-card-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
$kendo-card-shadow: var( --kendo-box-shadow-depth-1, none ) !default; // TODO: replace with elevation()

/// Background color of the card when focused.
/// @group card
Expand All @@ -53,7 +53,7 @@ $kendo-card-focus-text: null !default;
$kendo-card-focus-border: var( --kendo-component-border, initial ) !default;
/// Shadow of the card when focused.
/// @group card
$kendo-card-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
$kendo-card-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default; // TODO: replace with elevation()

/// Text size of the card header.
/// @group card
Expand Down
12 changes: 6 additions & 6 deletions packages/fluent/scss/chat/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,13 +165,13 @@ $kendo-chat-bubble-text: var( --kendo-component-text, inherit ) !default;
$kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
/// The box shadow of the bubble in the chat.
/// @group chat
$kendo-chat-bubble-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
$kendo-chat-bubble-shadow: var( --kendo-box-shadow-depth-1, none ) !default; // TODO: replace with elevation()
/// The hover shadow of the bubble in the chat.
/// @group chat
$kendo-chat-bubble-hover-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
$kendo-chat-bubble-hover-shadow: var( --kendo-box-shadow-depth-3, none ) !default; // TODO: replace with elevation()
/// The selected shadow of the bubble in the chat.
/// @group chat
$kendo-chat-bubble-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
$kendo-chat-bubble-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !default; // TODO: replace with elevation()

/// The background of the alt bubble in the chat.
/// @group chat
Expand All @@ -184,13 +184,13 @@ $kendo-chat-alt-bubble-text: var( --kendo-component-bg, inherit ) !default;
$kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
/// The shadow of the alt bubble in the chat.
/// @group chat
$kendo-chat-alt-bubble-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
$kendo-chat-alt-bubble-shadow: var( --kendo-box-shadow-depth-1, none ) !default; // TODO: replace with elevation()
/// The hover shadow of the alt bubble in the chat.
/// @group chat
$kendo-chat-alt-bubble-hover-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
$kendo-chat-alt-bubble-hover-shadow: var( --kendo-box-shadow-depth-1, none ) !default; // TODO: replace with elevation()
/// The selected shadow of the alt bubble in the chat.
/// @group chat
$kendo-chat-alt-bubble-selected-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
$kendo-chat-alt-bubble-selected-shadow: var( --kendo-box-shadow-depth-1, none ) !default; // TODO: replace with elevation()

/// The background of quick reply in the chat.
/// @group chat
Expand Down
Loading

0 comments on commit 132e0a4

Please sign in to comment.