| 1 |
// APP : private API |
| 2 |
// - local tokens mapped to EPS global tokens |
| 3 |
|
| 4 |
$app-background-color: tints(200); |
| 5 |
$spp-font-size: type(text, base); |
| 6 |
$app-box-shadow-color: $eps-box-shadow-size-3; |
| 7 |
$app-radius: 0; |
| 8 |
$app-max-width: 100%; |
| 9 |
|
| 10 |
$app-header-background-color: theme-colors(light); |
| 11 |
$app-header-box-shadow: $eps-box-shadow-2; |
| 12 |
$app-header-height: px-to-rem(50); |
| 13 |
$app-header-color: tints(800); |
| 14 |
$app-header-font-size: type(size, "15"); |
| 15 |
$spp-header-padding-x: spacing(16); |
| 16 |
$app-header-padding-y: 0; |
| 17 |
$app-header-z-index: 3; |
| 18 |
|
| 19 |
$app-main-height: 100%; |
| 20 |
|
| 21 |
$app-sidebar-background-color: rgba(theme-colors(light), $opacity-05); |
| 22 |
$app-sidebar-padding-top: spacing(20); |
| 23 |
$app-sidebar-width: 30%; |
| 24 |
$app-sidebar-max-width: px-to-rem(275); |
| 25 |
$app-sidebar-box-shadow: $eps-box-shadow-3; |
| 26 |
$app-sidebar-z-index: 4; |
| 27 |
|
| 28 |
$app-logo-size: px-to-rem(28); |
| 29 |
$app-logo-font-size: calc(0.4 * #{$app-logo-size}); |
| 30 |
$app-logo-radius: 50%; |
| 31 |
$app-logo-color: theme-colors(light); |
| 32 |
$app-logo-background-color: theme-colors(cta); |
| 33 |
$app-logo-margin-end: spacing(10); |
| 34 |
|
| 35 |
$app-header-buttons-separator-color: tints(300); |
| 36 |
$app-header-buttons-color: tints(500); |
| 37 |
$app-header-buttons-font-size: type(size, "18"); |
| 38 |
|
| 39 |
$app-header-btn-padding-x: spacing(16); |
| 40 |
|
| 41 |
$app-header-btn-font-size: type(size, "18"); |
| 42 |
$app-header-btn-line-height: spacing(20); |
| 43 |
|
| 44 |
$app-title-font-size: type(text, lg); |
| 45 |
$app-title-font-weight: $eps-font-weight-bold; |
| 46 |
|
| 47 |
$app-content-padding: spacing(44); |
| 48 |
|
| 49 |
$app-lightbox-background-color: rgba($eps-dark-theme-dark, $opacity-08); |
| 50 |
$app-lightbox-z-index: $eps-zindex-modal; |
| 51 |
|
| 52 |
// dark theme tokens |
| 53 |
$app-dark-background-color: dark-tints(700); |
| 54 |
$app-dark-box-shadow-color: rgba(var(--box-shadow-color, #{$eps-dark-box-shadow-color}), 4 * $eps-box-shadow-alpha-unit); |
| 55 |
$app-dark-header-background-color: dark-tints(800); |
| 56 |
$app-dark-header-color: dark-tints(100); |
| 57 |
|
| 58 |
$app-dark-header-buttons-separator-color: dark-tints(400); |
| 59 |
$app-dark-header-buttons-color: dark-tints(200); |
| 60 |
|
| 61 |
$app-dark-sidebar-background-color: dark-tints(700); |
| 62 |
|
| 63 |
$app-dark-lightbox-background-color: rgba(dark-theme-colors(dark), $opacity-08); |
| 64 |
|
| 65 |
:root { |
| 66 |
--app-background-color: #{$app-background-color}; |
| 67 |
--app-box-shadow-color: #{$app-dark-box-shadow-color}; |
| 68 |
--app-header-background-color: #{$app-header-background-color}; |
| 69 |
--app-header-color: #{$app-header-color}; |
| 70 |
--app-sidebar-background-color: #{$app-sidebar-background-color}; |
| 71 |
--app-header-buttons-separator-color: #{$app-header-buttons-separator-color}; |
| 72 |
--app-header-buttons-color: #{$app-header-buttons-color}; |
| 73 |
--app-lightbox-background-color: #{$app-lightbox-background-color}; |
| 74 |
} |
| 75 |
|
| 76 |
.eps-theme-dark { |
| 77 |
--app-background-color: #{$app-dark-background-color}; |
| 78 |
--app-box-shadow-color: #{$app-dark-box-shadow-color}; |
| 79 |
--app-header-background-color: #{$app-dark-header-background-color}; |
| 80 |
--app-header-color: #{$app-dark-header-color}; |
| 81 |
--app-sidebar-background-color: #{$app-dark-sidebar-background-color}; |
| 82 |
--app-header-buttons-separator-color: #{$app-dark-header-buttons-separator-color}; |
| 83 |
--app-header-buttons-color: #{$app-dark-header-buttons-color}; |
| 84 |
--app-lightbox-background-color: #{$app-dark-lightbox-background-color}; |
| 85 |
} |
| 86 |
|
