Skip to content

Commit

Permalink
feat(TDOPS-4875): use elevation tokens (#4821)
Browse files Browse the repository at this point in the history 
* feat: use elevation tokens

* chore: update

* chore: udpate

* fix(TDOPS-4875): elevation improvements and added story in DS (#4822)

* fix: elevation story

* fix: elevation story

* fix: lint error in story

* fix: linter error no global funcs

* fix: linter warnings

* fix: remove temp story

---------

Co-authored-by: Inna Ivashchuk <[email protected]>
Co-authored-by: inna-i <[email protected]>
  • Loading branch information
@jmfrancois @inna-i
3 people authored Aug 3, 2023
1 parent d9616e4 commit 275e7da
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 41 deletions.
5 changes: 5 additions & 0 deletions .changeset/fuzzy-pans-approve.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@talend/bootstrap-theme': minor
---

feat: use design-tokens for elevation
15 changes: 7 additions & 8 deletions fork/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,14 +274,13 @@ $dropdown-caret-color: #000 !default;
//
// Note: These variables are not generated into the Customizer.

$zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
$zindex-navbar-fixed: 1030 !default;
$zindex-modal-background: 1040 !default;
$zindex-modal: 1050 !default;

$zindex-navbar: tokens.$coral-elevation-layer-flat !default; // 0
$zindex-dropdown: tokens.$coral-elevation-layer-interactive-front !default; // 8
$zindex-navbar-fixed: tokens.$coral-elevation-layer-standard-front !default; // 4
$zindex-modal-background: tokens.$coral-elevation-layer-standard-front !default; // 4
$zindex-modal: tokens.$coral-elevation-layer-standard-front !default; // 4
$zindex-popover: tokens.$coral-elevation-layer-interactive-front !default; // 8
$zindex-tooltip: tokens.$coral-elevation-layer-overlay !default; // 16

//== Media queries breakpoints
//
Expand Down
3 changes: 1 addition & 2 deletions packages/components/src/TooltipTrigger/TooltipTrigger.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ $tc-tooltip-background: tokens.$coral-color-neutral-text !default;
$tc-tooltip-border-radius: 0.2rem !default;
$tc-tooltip-box-shadow: 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2) !default;
$tc-tooltip-margin: 1rem !default;
$tc-tooltip-z-index: $zindex-tooltip !default;

$tc-tooltip-arrow-border-size: 0.5rem !default;
$tc-tooltip-arrow-color: $tc-tooltip-background !default;
Expand All @@ -21,7 +20,7 @@ $tc-tooltip-arrow-color: $tc-tooltip-background !default;
padding: 0 $tc-tooltip-margin;
width: $tc-tooltip-max-width;
pointer-events: none;
z-index: $tc-tooltip-z-index;
z-index: tokens.$coral-elevation-layer-overlay;
}

&-body {
Expand Down
65 changes: 34 additions & 31 deletions packages/theme/src/theme/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
/* stylelint-disable color-hex-case */
@use "sass:color";
@use "sass:math";
@use '~@talend/design-tokens/lib/tokens';

// This is a fork but try to keep it as close to the original as possible
Expand All @@ -12,15 +14,16 @@ $bootstrap-sass-asset-helper: false !default;
//## Gray and brand colors for use across Bootstrap.

$gray-base: $gray900 !default;
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
$gray-dark: lighten($gray-base, 20%) !default; // #333
$gray: lighten($gray-base, 33.5%) !default; // #555
$gray-light: lighten($gray-base, 46.7%) !default; // #777
$gray-lighter: lighten($gray-base, 85%) !default; // #bfbfbf
$gray-darker: color.adjust($gray-base, $lightness: 13.5%) !default; // #222
$gray-dark: color.adjust($gray-base, $lightness: 20%) !default; // #333
$gray: color.adjust($gray-base, $lightness: 33.5%) !default; // #555
$gray-light: color.adjust($gray-base, $lightness: 46.7%) !default; // #777
$gray-lighter: color.adjust($gray-base, $lightness: 85%) !default; // #bfbfbf

$brand-primary: $deep-blue500;
$brand-primary-lighter: tint($brand-primary, 25) !default;
$brand-primary-light: tint($brand-primary, 12) !default;

$brand-primary-dark: shade($brand-primary, 12) !default;
$brand-primary-darker: shade($brand-primary, 25) !default;
$brand-secondary: $deep-blue500 !default;
Expand Down Expand Up @@ -58,11 +61,11 @@ $font-family-monospace: 'Inconsolata', monospace !default;
$font-family-base: $font-family-sans-serif !default;

$font-size-base: 14px !default;
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
$font-size-large: math.ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small: math.ceil(($font-size-base * 0.85)) !default; // ~12px

$font-size-h1: $font-size-large !default;
$font-size-h2: ceil(($font-size-base * 1.14)) !default; // ~16px
$font-size-h2: math.ceil(($font-size-base * 1.14)) !default; // ~16px
$font-size-h3: $font-size-base !default;
$font-size-h4: $font-size-small;
$font-size-h5: $font-size-small;
Expand All @@ -75,7 +78,7 @@ $font-weight-regular: 400;
//** Unit-less `line-height` for use in components like buttons.
$line-height-base: 1.428571429 !default; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
$line-height-computed: math.floor(($font-size-base * $line-height-base)) !default; // ~20px

$form-label-base-color: $gray400 !default;
$form-base-font-weight: $font-weight-regular !default;
Expand Down Expand Up @@ -307,15 +310,15 @@ $dropdown-header-color: $gray-light !default;
//
// Note: These variables are not generated into the Customizer.

$zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default;
$zindex-navbar-fixed: 1030 !default;
$zindex-modal-background: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
$zindex-guidedtour: 1080 !default;
$zindex-notification: 1090 !default;
$zindex-navbar: tokens.$coral-elevation-layer-flat !default; // 0
$zindex-dropdown: tokens.$coral-elevation-layer-interactive-front !default; // 8
$zindex-navbar-fixed: tokens.$coral-elevation-layer-standard-front !default; // 4
$zindex-modal-background: tokens.$coral-elevation-layer-standard-front !default; // 4
$zindex-modal: tokens.$coral-elevation-layer-standard-front !default; // 4
$zindex-popover: tokens.$coral-elevation-layer-interactive-front !default; // 8
$zindex-tooltip: tokens.$coral-elevation-layer-overlay !default; // 16
$zindex-guidedtour: tokens.$coral-elevation-layer-overlay !default; // 16
$zindex-notification: tokens.$coral-elevation-layer-overlay !default; // 16

//== Media queries breakpoints
//
Expand Down Expand Up @@ -402,7 +405,7 @@ $navbar-collapse-max-height: 340px !default;

$navbar-default-color: #777 !default;
$navbar-default-bg: #f8f8f8 !default;
$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
$navbar-default-border: color.adjust($navbar-default-bg, $lightness: -6.5%) !default;

// Navbar links
$navbar-default-link-color: #777 !default;
Expand All @@ -415,7 +418,7 @@ $navbar-default-link-disabled-bg: transparent !default;

// Navbar brand label
$navbar-default-brand-color: $navbar-default-link-color !default;
$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
$navbar-default-brand-hover-color: color.adjust($navbar-default-brand-color, $lightness: -10%) !default;
$navbar-default-brand-hover-bg: transparent !default;

// Navbar toggle
Expand All @@ -427,7 +430,7 @@ $navbar-default-toggle-border-color: #ddd !default;
// Reset inverted navbar basics
$navbar-inverse-color: $white !default;
$navbar-inverse-bg: $brand-primary-darker !default;
$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
$navbar-inverse-border: color.adjust($navbar-inverse-bg, $lightness: -10%) !default;

// Inverted navbar links
$navbar-inverse-link-color: $gray0 !default;
Expand Down Expand Up @@ -519,28 +522,28 @@ $jumbotron-padding: 30px !default;
$jumbotron-color: inherit !default;
$jumbotron-bg: $gray-lighter !default;
$jumbotron-heading-color: inherit !default;
$jumbotron-font-size: ceil(($font-size-base * 1.5)) !default;
$jumbotron-heading-font-size: ceil(($font-size-base * 4.5)) !default;
$jumbotron-font-size: math.ceil(($font-size-base * 1.5)) !default;
$jumbotron-heading-font-size: math.ceil(($font-size-base * 4.5)) !default;

//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.

$state-success-text: shade($brand-success, 20%) !default;
$state-success-bg: tint($brand-success, 80%) !default;
$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default;
$state-success-border: color.adjust(color.adjust($state-success-bg, $hue: -10), $lightness: -5%) !default;

$state-info-text: shade($brand-info, 20%) !default;
$state-info-bg: tint($brand-info, 80%) !default;
$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default;
$state-info-border: color.adjust(color.adjust($state-info-bg, $hue: -10), $lightness: -7%) !default;

$state-warning-text: shade($brand-warning, 20%) !default;
$state-warning-bg: tint($brand-warning, 80%) !default;
$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default;
$state-warning-border: color.adjust(color.adjust($state-warning-bg, $hue: -10), $lightness: -5%) !default;

$state-danger-text: shade($brand-danger, 20%) !default;
$state-danger-bg: tint($brand-danger, 80%) !default;
$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;
$state-danger-border: color.adjust(color.adjust($state-danger-bg, $hue: -10), $lightness: -5%) !default;

//== Tooltips
//
Expand Down Expand Up @@ -573,7 +576,7 @@ $popover-border-color: $shadow !default;
$popover-fallback-border-color: #ccc !default;

//** Popover title background color
$popover-title-bg: darken($popover-bg, 3%) !default;
$popover-title-bg: color.adjust($popover-bg, $lightness: -3%) !default;

//** Popover arrow width
$popover-arrow-width: 10px !default;
Expand All @@ -585,7 +588,7 @@ $popover-arrow-outer-width: ($popover-arrow-width + 1) !default;
//** Popover outer arrow color
$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default;
//** Popover outer arrow fallback color
$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default;
$popover-arrow-outer-fallback-color: color.adjust($popover-fallback-border-color, $lightness: -20%) !default;

//== Labels
//
Expand Down Expand Up @@ -709,7 +712,7 @@ $list-group-active-bg: $component-active-bg !default;
//** Border color of active list elements
$list-group-active-border: $list-group-active-bg !default;
//** Text color for content within active list items
$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default;
$list-group-active-text-color: color.adjust($list-group-active-bg, $lightness: 40%) !default;

//** Text color of disabled list items
$list-group-disabled-color: $gray-light !default;
Expand Down Expand Up @@ -783,7 +786,7 @@ $thumbnail-caption-padding: 9px !default;
//##

$well-bg: $gray50 !default;
$well-border: darken($well-bg, 7%) !default;
$well-border: color.adjust($well-bg, $lightness: -7%) !default;

//== Badges
//
Expand Down

0 comments on commit 275e7da

Please sign in to comment.