Support fluent colors and deprecate current colors
This commit is contained in:
Patricio Beltran
Родитель
c39fe26379
Коммит
08b9dc89bd
|
|
@ -0,0 +1,14 @@
|
|||
// @todo remove
|
||||
/// @deprecated example
|
||||
// Modify a color in existing theme
|
||||
$theme-dark: (
|
||||
color-fill-tile-symbol: #ff4136
|
||||
);
|
||||
|
||||
// Extend $themes with custom christmas theme
|
||||
$themes: (
|
||||
christmas: (
|
||||
color-fill-tile-symbol: #ff4136,
|
||||
color-stroke-tile-symbol: #36FF53
|
||||
)
|
||||
);
|
||||
|
|
@ -1,12 +1,10 @@
|
|||
// Modify a color in existing theme
|
||||
$theme-dark: (
|
||||
color-fill-tile-symbol: #ff4136
|
||||
);
|
||||
:root[theme='dark'] {
|
||||
--color-fill-tile-symbol: #FF4136;
|
||||
}
|
||||
|
||||
// Extend $themes with custom christmas theme
|
||||
$themes: (
|
||||
christmas: (
|
||||
color-fill-tile-symbol: #ff4136,
|
||||
color-stroke-tile-symbol: #36FF53
|
||||
)
|
||||
);
|
||||
// Add a new theme by specifying all colors with the theme value
|
||||
:root[theme='christmas'] {
|
||||
--color-fill-tile-symbol: #FF4136,
|
||||
--color-stroke-tile-symbol: #36FF53
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
// @todo remove
|
||||
/// @deprecated example
|
||||
// import color overrides
|
||||
// Note: overrides must be imported before the default colors
|
||||
@import "color.overrides.deprecated";
|
||||
|
||||
// import default colors
|
||||
@import "../src/colors.deprecated";
|
||||
|
||||
// import mixins
|
||||
@import "../src/mixins";
|
||||
|
||||
$icon-size: 76px;
|
||||
|
||||
.symbol {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
@include themify {
|
||||
fill: themed('color-fill-tile-symbol');
|
||||
stroke: themed('color-stroke-tile-symbol');
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,9 @@
|
|||
// import color overrides
|
||||
// Note: overrides must be imported before the default colors
|
||||
@import "color.overrides";
|
||||
|
||||
// import default colors
|
||||
@import "../src/colors";
|
||||
|
||||
// import mixins
|
||||
@import "../src/mixins";
|
||||
// import color overrides
|
||||
// Note: overrides must be imported after the default colors
|
||||
@import "color.overrides";
|
||||
|
||||
$icon-size: 76px;
|
||||
|
||||
|
|
@ -17,9 +14,6 @@ $icon-size: 76px;
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
@include themify {
|
||||
fill: themed('color-fill-tile-symbol');
|
||||
stroke: themed('color-stroke-tile-symbol');
|
||||
}
|
||||
fill: var(--color-fill-tile-symbol);
|
||||
stroke: var(--color-stroke-tile-symbol);
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@microsoft/azure-iot-ux-fluent-css",
|
||||
"description": "Azure IoT common styles library for CSS, Colors and Themes",
|
||||
"version": "6.0.0",
|
||||
"version": "7.0.0-alpha.1",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "^8.0.0"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,149 @@
|
|||
/**
|
||||
* Color Palette
|
||||
*/
|
||||
|
||||
|
||||
// Principal Colors
|
||||
|
||||
$color-black: #000000;
|
||||
$color-grey-1500: #0D0E0F; //90
|
||||
$color-grey-1400: #1A1D1E; //14
|
||||
$color-grey-1300: #292D30; //80
|
||||
$color-grey-1200: #212121; //12
|
||||
$color-grey-1100: #252728; //11
|
||||
$color-grey-1000: #2D2F33; //01
|
||||
$color-grey-900: #31373E; //70
|
||||
$color-grey-800: #3F3F3F;
|
||||
$color-grey-700: #434343; //60
|
||||
$color-grey-600: #666666; //text-20
|
||||
$color-grey-550: #515151; //55
|
||||
$color-grey-500: #A6A6A6; //text-30
|
||||
$color-grey-400: #AEAEAE; //4
|
||||
$color-grey-300: #C8C8C8; //40
|
||||
$color-grey-200: #DADADA; //30
|
||||
$color-grey-100: #F2F2F2; //1
|
||||
$color-white: #FFFFFF;
|
||||
|
||||
|
||||
// Chart & Measurement Colors
|
||||
|
||||
$color-green-100: #01b8aa;
|
||||
$color-green-200: #6be8dc;
|
||||
$color-green-300: #59cec3;
|
||||
$color-green-400: #08bca6;
|
||||
$color-green-500: #0aa58e;
|
||||
$color-green-600: #12937d;
|
||||
$color-green-700: #99E3DD;
|
||||
$color-green-800: #67D4CC;
|
||||
$color-green-900: #34C6BB;
|
||||
$color-green-1000: #018A80;
|
||||
$color-green-1100: #015C55;
|
||||
|
||||
$color-lightgrey-100: #ffffff;
|
||||
$color-lightgrey-200: #f2f2f2;
|
||||
$color-lightgrey-300: #e6e6e6;
|
||||
$color-lightgrey-400: #cccccc;
|
||||
$color-lightgrey-500: #b3b3b3;
|
||||
$color-lightgrey-600: #999999;
|
||||
$color-lightgrey-700: #374649;
|
||||
$color-lightgrey-800: #AFB5B6;
|
||||
$color-lightgrey-900: #879092;
|
||||
$color-lightgrey-1000: #5F6B6D;
|
||||
$color-lightgrey-1100: #293537;
|
||||
$color-lightgrey-1200: #1C2325;
|
||||
|
||||
$color-red-100: #fd625e;
|
||||
$color-red-200: #ff7878;
|
||||
$color-red-300: #fc5454;
|
||||
$color-red-400: #fc3232; //4
|
||||
$color-red-500: #e81818; //5
|
||||
$color-red-600: #b21f1f;
|
||||
$color-red-700: #FEC0BF;
|
||||
$color-red-800: #FEA19E;
|
||||
$color-red-900: #FD817E;
|
||||
$color-red-1000: #BE4A47;
|
||||
$color-red-1100: #7F312F;
|
||||
|
||||
$color-yellow-100: #f2c80f;
|
||||
$color-yellow-200: #fcdf65;
|
||||
$color-yellow-300: #ffd629;
|
||||
$color-yellow-400: #ffce00;
|
||||
$color-yellow-500: #e5bd13;
|
||||
$color-yellow-600: #c9a611;
|
||||
$color-yellow-700: #FAE99F;
|
||||
$color-yellow-800: #F7DE6F;
|
||||
$color-yellow-900: #F5D33F;
|
||||
$color-yellow-1000: #B6960B;
|
||||
$color-yellow-1100: #796408;
|
||||
|
||||
$color-lightblue-100: #8ad4eb;
|
||||
$color-lightblue-200: #caf8ff;
|
||||
$color-lightblue-300: #b0f8ff;
|
||||
$color-lightblue-400: #73f8ff;
|
||||
$color-lightblue-500: #27e2dd;
|
||||
$color-lightblue-600: #1bb2a7;
|
||||
$color-lightblue-700: #D0EEF7;
|
||||
$color-lightblue-800: #B9E5F3;
|
||||
$color-lightblue-900: #A1DDEF;
|
||||
$color-lightblue-1000: #689FB0;
|
||||
$color-lightblue-1100: #456A76;
|
||||
|
||||
$color-orange-100: #fe9666;
|
||||
$color-orange-200: #ffcdbb;
|
||||
$color-orange-300: #f7a389;
|
||||
$color-orange-400: #f9724e;
|
||||
$color-orange-500: #DC5F31;
|
||||
$color-orange-600: #db220f;
|
||||
$color-orange-700: #FFD5C2;
|
||||
$color-orange-800: #FEC0A3;
|
||||
$color-orange-900: #FEAB85;
|
||||
$color-orange-1000: #BF714D;
|
||||
$color-orange-1100: #7F4B33;
|
||||
|
||||
$color-purple-100: #a66999;
|
||||
$color-purple-200: #efa5e1;
|
||||
$color-purple-300: #ea78d9;
|
||||
$color-purple-400: #e247db;
|
||||
$color-purple-500: #d313d3;
|
||||
$color-purple-600: #921e9b;
|
||||
$color-purple-700: #DFC5D9;
|
||||
$color-purple-800: #CAA5C2;
|
||||
$color-purple-900: #B887AD;
|
||||
$color-purple-1000: #7D4F73;
|
||||
$color-purple-1100: #53354D;
|
||||
|
||||
|
||||
// Alert Colors
|
||||
|
||||
$color-warning-100: #FFD629; //warn-1
|
||||
$color-warning-200: #F2C80F;
|
||||
$color-warning-300: #D58E00;
|
||||
$color-error-local-100: #FF2828; //status-60
|
||||
$color-error-local-200: #A50606; //status-30
|
||||
$color-error-global-100: #D02E00; //err-1
|
||||
$color-information-100: #DCDCDC; //info-1
|
||||
$color-information-200: #879092; //status-10
|
||||
$color-success-100: #3BB44A;
|
||||
$color-success-200: #89FF98;
|
||||
$color-success-300: #007D0F;
|
||||
|
||||
|
||||
// Input Control Colors
|
||||
|
||||
$color-blue-100: #136BFB; //10
|
||||
$color-blue-200: #0065D9;
|
||||
$color-blue-300: #0053B3; //30
|
||||
$color-blue-400: #00418C;
|
||||
$color-blue-500: #60AAFF; //50
|
||||
$color-blue-600: #2F7FDB;
|
||||
$color-blue-700: #A1AAB6;
|
||||
$color-blue-800: #DEECF9;
|
||||
|
||||
|
||||
// Semi-transparent Colors
|
||||
|
||||
$color-black-transparent-primary: rgba($color-black, 0.8);
|
||||
$color-black-transparent-half: rgba($color-black, 0.5);
|
||||
$color-black-transparent-third: rgba($color-black,0.33);
|
||||
$color-black-transparent-tenth: rgba($color-black,0.1);
|
||||
$color-transparent: transparent;
|
||||
|
|
@ -2,148 +2,67 @@
|
|||
* Color Palette
|
||||
*/
|
||||
|
||||
:root {
|
||||
// Main Palette Colors
|
||||
--color-white: #FFFFFF;
|
||||
--color-grey-10: #FAF9F8;
|
||||
--color-grey-20: #F3F2F1;
|
||||
--color-grey-30: #DADADA;
|
||||
--color-grey-40: #C8C8C8;
|
||||
--color-grey-50: #3C3C41;
|
||||
--color-grey-60: #434343;
|
||||
--color-grey-70: #31373E;
|
||||
--color-grey-80: #292D30;
|
||||
--color-grey-90: #0D0E0F;
|
||||
--color-black: #000000;
|
||||
|
||||
// Principal Colors
|
||||
// Accent colors
|
||||
--color-blue-10: #136BFB;
|
||||
--color-blue-20: #0065D9;
|
||||
--color-blue-30: #0053B3;
|
||||
--color-blue-40: #00418C;
|
||||
--color-blue-50: #60AAFF;
|
||||
--color-blue-60: #2F7FDB;
|
||||
--color-blue-70: #8DAACB;
|
||||
|
||||
$color-black: #000000;
|
||||
$color-grey-1500: #0D0E0F;
|
||||
$color-grey-1400: #1A1D1E;
|
||||
$color-grey-1300: #292D30;
|
||||
$color-grey-1200: #212121;
|
||||
$color-grey-1100: #252728;
|
||||
$color-grey-1000: #2D2F33;
|
||||
$color-grey-900: #31373E;
|
||||
$color-grey-800: #3F3F3F;
|
||||
$color-grey-700: #434343;
|
||||
$color-grey-600: #666666;
|
||||
$color-grey-550: #515151;
|
||||
$color-grey-500: #A6A6A6;
|
||||
$color-grey-400: #AEAEAE;
|
||||
$color-grey-300: #C8C8C8;
|
||||
$color-grey-200: #DADADA;
|
||||
$color-grey-100: #F2F2F2;
|
||||
$color-white: #FFFFFF;
|
||||
// Status/Alerts
|
||||
--color-status-10: #879092;
|
||||
--color-status-20: #D58E00;
|
||||
--color-status-30: #A50606;
|
||||
--color-status-40: #3BB44A;
|
||||
--color-status-50: #F2C80F;
|
||||
--color-status-60: #FF2828;
|
||||
--color-status-70: #89FF98;
|
||||
|
||||
// Text
|
||||
--color-text-10: #323130;
|
||||
--color-text-20: #666666;
|
||||
--color-text-30: #A6A6A6;
|
||||
|
||||
// Chart & Measurement Colors
|
||||
// Semi-transparent Colors
|
||||
--color-black-transparent-primary: rgba(var(--color-black), 0.8);
|
||||
--color-black-transparent-half: rgba(var(--color-black), 0.5);
|
||||
--color-black-transparent-third: rgba(var(--color-black), 0.3);
|
||||
--color-black-transparent-tenth: rgba(var(--color-black), 0.1);
|
||||
--color-white-transparent-primary: rgba(var(--color-black), 0.8);
|
||||
--color-white-transparent-half: rgba(var(--color-white), 0.5);
|
||||
--color-white-transparent-third: rgba(var(--color-white), 0.3);
|
||||
--color-white-transparent-tenth: rgba(var(--color-white), 0.1);
|
||||
--color-transparent: transparent;
|
||||
|
||||
$color-green-100: #01b8aa;
|
||||
$color-green-200: #6be8dc;
|
||||
$color-green-300: #59cec3;
|
||||
$color-green-400: #08bca6;
|
||||
$color-green-500: #0aa58e;
|
||||
$color-green-600: #12937d;
|
||||
$color-green-700: #99E3DD;
|
||||
$color-green-800: #67D4CC;
|
||||
$color-green-900: #34C6BB;
|
||||
$color-green-1000: #018A80;
|
||||
$color-green-1100: #015C55;
|
||||
// [Deprecated] Legacy colors
|
||||
--color-grey-1: #F2F2F2;
|
||||
--color-grey-4: #AEAEAE;
|
||||
--color-grey-01: #2D2F33;
|
||||
--color-grey-11: #252728;
|
||||
--color-grey-12: #212121;
|
||||
--color-grey-14: #1A1D1E;
|
||||
--color-grey-55: #515151;
|
||||
|
||||
$color-lightgrey-100: #ffffff;
|
||||
$color-lightgrey-200: #f2f2f2;
|
||||
$color-lightgrey-300: #e6e6e6;
|
||||
$color-lightgrey-400: #cccccc;
|
||||
$color-lightgrey-500: #b3b3b3;
|
||||
$color-lightgrey-600: #999999;
|
||||
$color-lightgrey-700: #374649;
|
||||
$color-lightgrey-800: #AFB5B6;
|
||||
$color-lightgrey-900: #879092;
|
||||
$color-lightgrey-1000: #5F6B6D;
|
||||
$color-lightgrey-1100: #293537;
|
||||
$color-lightgrey-1200: #1C2325;
|
||||
--color-red-4: #FC3232;
|
||||
--color-red-5: #E81818;
|
||||
|
||||
$color-red-100: #fd625e;
|
||||
$color-red-200: #ff7878;
|
||||
$color-red-300: #fc5454;
|
||||
$color-red-400: #fc3232;
|
||||
$color-red-500: #e81818;
|
||||
$color-red-600: #b21f1f;
|
||||
$color-red-700: #FEC0BF;
|
||||
$color-red-800: #FEA19E;
|
||||
$color-red-900: #FD817E;
|
||||
$color-red-1000: #BE4A47;
|
||||
$color-red-1100: #7F312F;
|
||||
|
||||
$color-yellow-100: #f2c80f;
|
||||
$color-yellow-200: #fcdf65;
|
||||
$color-yellow-300: #ffd629;
|
||||
$color-yellow-400: #ffce00;
|
||||
$color-yellow-500: #e5bd13;
|
||||
$color-yellow-600: #c9a611;
|
||||
$color-yellow-700: #FAE99F;
|
||||
$color-yellow-800: #F7DE6F;
|
||||
$color-yellow-900: #F5D33F;
|
||||
$color-yellow-1000: #B6960B;
|
||||
$color-yellow-1100: #796408;
|
||||
|
||||
$color-lightblue-100: #8ad4eb;
|
||||
$color-lightblue-200: #caf8ff;
|
||||
$color-lightblue-300: #b0f8ff;
|
||||
$color-lightblue-400: #73f8ff;
|
||||
$color-lightblue-500: #27e2dd;
|
||||
$color-lightblue-600: #1bb2a7;
|
||||
$color-lightblue-700: #D0EEF7;
|
||||
$color-lightblue-800: #B9E5F3;
|
||||
$color-lightblue-900: #A1DDEF;
|
||||
$color-lightblue-1000: #689FB0;
|
||||
$color-lightblue-1100: #456A76;
|
||||
|
||||
$color-orange-100: #fe9666;
|
||||
$color-orange-200: #ffcdbb;
|
||||
$color-orange-300: #f7a389;
|
||||
$color-orange-400: #f9724e;
|
||||
$color-orange-500: #DC5F31;
|
||||
$color-orange-600: #db220f;
|
||||
$color-orange-700: #FFD5C2;
|
||||
$color-orange-800: #FEC0A3;
|
||||
$color-orange-900: #FEAB85;
|
||||
$color-orange-1000: #BF714D;
|
||||
$color-orange-1100: #7F4B33;
|
||||
|
||||
$color-purple-100: #a66999;
|
||||
$color-purple-200: #efa5e1;
|
||||
$color-purple-300: #ea78d9;
|
||||
$color-purple-400: #e247db;
|
||||
$color-purple-500: #d313d3;
|
||||
$color-purple-600: #921e9b;
|
||||
$color-purple-700: #DFC5D9;
|
||||
$color-purple-800: #CAA5C2;
|
||||
$color-purple-900: #B887AD;
|
||||
$color-purple-1000: #7D4F73;
|
||||
$color-purple-1100: #53354D;
|
||||
|
||||
|
||||
// Alert Colors
|
||||
|
||||
$color-warning-100: #FFD629;
|
||||
$color-warning-200: #F2C80F;
|
||||
$color-warning-300: #D58E00;
|
||||
$color-error-local-100: #FF2828;
|
||||
$color-error-local-200: #A50606;
|
||||
$color-error-global-100: #D02E00;
|
||||
$color-information-100: #DCDCDC;
|
||||
$color-information-200: #879092;
|
||||
$color-success-100: #3BB44A;
|
||||
$color-success-200: #89FF98;
|
||||
$color-success-300: #007D0F;
|
||||
|
||||
|
||||
// Input Control Colors
|
||||
|
||||
$color-blue-100: #136BFB;
|
||||
$color-blue-200: #0065D9;
|
||||
$color-blue-300: #0053B3;
|
||||
$color-blue-400: #00418C;
|
||||
$color-blue-500: #60AAFF;
|
||||
$color-blue-600: #2F7FDB;
|
||||
$color-blue-700: #A1AAB6;
|
||||
$color-blue-800: #DEECF9;
|
||||
|
||||
|
||||
// Semi-transparent Colors
|
||||
|
||||
$color-black-transparent-primary: rgba($color-black, 0.8);
|
||||
$color-black-transparent-half: rgba($color-black, 0.5);
|
||||
$color-black-transparent-third: rgba($color-black,0.33);
|
||||
$color-black-transparent-tenth: rgba($color-black,0.1);
|
||||
$color-transparent: transparent;
|
||||
--color-err-1: #D02E00;
|
||||
--color-info-1: #DCDCDC;
|
||||
--color-warn-1: #FFD629;
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/**
|
||||
* Common Azure IoT Colors
|
||||
*/
|
||||
|
||||
@import "./dark/color.deprecated";
|
||||
@import "./light/color.deprecated";
|
||||
|
||||
// Declare map with !default to allow colors in the map
|
||||
// to be overwritten by the consumer app
|
||||
$themes: () !default;
|
||||
|
||||
// Add theme specific colors to the theme map
|
||||
$themes: map-merge((
|
||||
dark: $theme-dark,
|
||||
light: $theme-light
|
||||
), $themes);
|
||||
|
|
@ -2,15 +2,8 @@
|
|||
* Common Azure IoT Colors
|
||||
*/
|
||||
|
||||
@import "color.palette";
|
||||
@import "./dark/color.defaults";
|
||||
@import "./dark/color.fluent";
|
||||
@import "./light/color.defaults";
|
||||
|
||||
// Declare map with !default to allow colors in the map
|
||||
// to be overwritten by the consumer app
|
||||
$themes: () !default;
|
||||
|
||||
// Add theme specific colors to the theme map
|
||||
$themes: map-merge((
|
||||
dark: $theme-dark,
|
||||
light: $theme-light
|
||||
), $themes);
|
||||
@import "./light/color.fluent";
|
||||
|
|
@ -15,7 +15,6 @@ $gutter-bigger: 40px;
|
|||
|
||||
$grid-size: 4px;
|
||||
|
||||
|
||||
// Z Index
|
||||
|
||||
$z-index-large-step: 1000;
|
||||
|
|
@ -34,8 +33,7 @@ $z-index-flyouts-dropdown: $z-index-flyout-layer + 6 * $z-index-medium-step;
|
|||
$z-index-flyouts-inline-btn: $z-index-flyout-layer + 7 * $z-index-medium-step;
|
||||
$z-index-tutorial-tips: $z-index-flyout-layer + 8 * $z-index-medium-step;
|
||||
|
||||
|
||||
// Icons
|
||||
// [Deprecated - moved to typography] Icons @todo remove
|
||||
|
||||
$icon-font-family: "icons";
|
||||
$icon-size-base: 16px;
|
||||
|
|
@ -77,3 +75,8 @@ $screen-sm: 480px;
|
|||
$screen-md: 640px;
|
||||
$screen-lg: 1024px;
|
||||
$screen-xl: 1366px;
|
||||
|
||||
/// Interaction constants
|
||||
|
||||
$interaction-timing: 200ms;
|
||||
$clickable-scale: 0.9;
|
||||
|
|
@ -8,14 +8,17 @@
|
|||
/// @type String
|
||||
$default-prefix: 'theme' !default;
|
||||
|
||||
/// Interaction constants
|
||||
///
|
||||
// @todo remove
|
||||
/// Interaction constants
|
||||
/// @deprecated Moved to constants
|
||||
$interaction-timing: 200ms;
|
||||
$clickable-scale: 0.9;
|
||||
|
||||
// @todo remove
|
||||
/// Creates theme variations
|
||||
///
|
||||
/// @param {Map} $themes - Theme map to loop through. Optional.
|
||||
/// @deprecated Not needed by using css custom properties
|
||||
@mixin themify($themes: $themes) {
|
||||
// for each theme, get its name and color variable map:
|
||||
@each $theme, $colors in $themes {
|
||||
|
|
@ -32,12 +35,14 @@ $clickable-scale: 0.9;
|
|||
}
|
||||
}
|
||||
|
||||
// @todo remove
|
||||
/// Gets a value from the color map.
|
||||
///
|
||||
/// @param {String} $key - Name of the color variable
|
||||
/// @param {Map} $theme-map - Theme map to use. Optional.
|
||||
///
|
||||
/// @returns {String} The color for the given key
|
||||
/// @deprecated Not needed by using css custom properties
|
||||
@function themed($key, $theme-map: $theme-map) {
|
||||
$value: map-get($theme-map, $key);
|
||||
|
||||
|
|
@ -48,6 +53,7 @@ $clickable-scale: 0.9;
|
|||
@return $value;
|
||||
}
|
||||
|
||||
// @todo remove
|
||||
/// Clickable button animation
|
||||
///
|
||||
/// @param {Number} $scale - Clickable scale
|
||||
|
|
|
|||
|
|
@ -0,0 +1,150 @@
|
|||
/**
|
||||
* Normalize
|
||||
*/
|
||||
|
||||
@import "normalize.vendor";
|
||||
@import "constants";
|
||||
@import "typography.deprecated";
|
||||
@import "mixins";
|
||||
|
||||
:global {
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: $font-family-default;
|
||||
font-size: $font-size-default;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
* {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
*:before,
|
||||
*:after {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
// Reset fonts for relevant elements
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
// override bootstrap's vertical margins for headings since we override
|
||||
// heading sizes in overrides.scss
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3 {
|
||||
margin-top: $gutter-small / 2;
|
||||
margin-bottom: $gutter-small / 2;
|
||||
}
|
||||
|
||||
// Headings
|
||||
// -------------------------
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: $font-family-default;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3 {
|
||||
margin-top: ($gutter-small / 2);
|
||||
margin-bottom: ($gutter-small / 2);
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
margin-top: ($gutter-small / 2);
|
||||
margin-bottom: ($gutter-small / 2);
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
h1, .h1 { font-size: $font-size-h1; }
|
||||
h2, .h2 { font-size: $font-size-h2; }
|
||||
h3, .h3 { font-size: $font-size-h3; }
|
||||
h4, .h4 { font-size: $font-size-h4; }
|
||||
|
||||
|
||||
// Body text
|
||||
// -------------------------
|
||||
|
||||
p {
|
||||
margin: 0 0 ($line-height-computed / 2);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Unordered and Ordered lists
|
||||
ul,
|
||||
ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: ($line-height-computed / 2);
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Description Lists
|
||||
dl {
|
||||
margin-top: 0; // Remove browser default
|
||||
margin-bottom: $line-height-computed;
|
||||
}
|
||||
|
||||
dt,
|
||||
dd {
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 0; // Undo browser default
|
||||
}
|
||||
|
||||
// define some common css classes that everyone needs to use. These
|
||||
// need to be declared as global so they're not mangled:
|
||||
.inline-text-overflow {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,17 +3,18 @@
|
|||
*/
|
||||
|
||||
@import "normalize.vendor";
|
||||
@import "constants";
|
||||
@import "colors";
|
||||
@import "typography";
|
||||
@import "constants";
|
||||
@import "mixins";
|
||||
|
||||
:global {
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: $font-family-default;
|
||||
font-size: $font-size-default;
|
||||
line-height: $line-height-base;
|
||||
font-family: var(--font-family-default);
|
||||
font-size: var(--font-size-default);
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -49,9 +50,9 @@
|
|||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: $font-family-default;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
font-family: var(--font-family-default);
|
||||
font-weight: var(--headings-font-weight);
|
||||
line-height: var(--headings-line-height);
|
||||
|
||||
small,
|
||||
.small {
|
||||
|
|
@ -84,17 +85,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
h1, .h1 { font-size: $font-size-h1; }
|
||||
h2, .h2 { font-size: $font-size-h2; }
|
||||
h3, .h3 { font-size: $font-size-h3; }
|
||||
h4, .h4 { font-size: $font-size-h4; }
|
||||
h1, .h1 { font-size: var(--font-size-h1) }
|
||||
h2, .h2 { font-size: var(--font-size-h2) }
|
||||
h3, .h3 { font-size: var(font-size-h3) }
|
||||
h4, .h4 { font-size: var(font-size-h4) }
|
||||
|
||||
|
||||
// Body text
|
||||
// -------------------------
|
||||
|
||||
p {
|
||||
margin: 0 0 ($line-height-computed / 2);
|
||||
margin: 0 0 calc(var(--line-height-computed) / 2);
|
||||
}
|
||||
|
||||
label {
|
||||
|
|
@ -109,7 +110,7 @@
|
|||
ul,
|
||||
ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: ($line-height-computed / 2);
|
||||
margin-bottom: calc(var(--line-height-computed) / 2);
|
||||
|
||||
ul,
|
||||
ol {
|
||||
|
|
@ -120,12 +121,12 @@
|
|||
// Description Lists
|
||||
dl {
|
||||
margin-top: 0; // Remove browser default
|
||||
margin-bottom: $line-height-computed;
|
||||
margin-bottom: var(--line-height-computed);
|
||||
}
|
||||
|
||||
dt,
|
||||
dd {
|
||||
line-height: $line-height-base;
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
dt {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
/**
|
||||
* Typography constants
|
||||
*/
|
||||
|
||||
$font-size-h1: 36px;
|
||||
$font-size-h2: 24px;
|
||||
$font-size-h3: 18px;
|
||||
$font-size-h4: 18px;
|
||||
$font-size-h5: 16px;
|
||||
$font-size-default: 14px;
|
||||
$font-size-small: 12px;
|
||||
$font-size-xsmall: 10px;
|
||||
|
||||
$font-family-default: "Segoe UI Regular", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
|
||||
$font-family-light: "Segoe UI Semilight", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
|
||||
$font-family-din-regular: join('DIN-Regular', $font-family-default);
|
||||
|
||||
$headings-font-weight: normal;
|
||||
$headings-line-height: 1.5;
|
||||
|
||||
// Unit-less line-height for use in components like buttons. Taken from bootstrap.
|
||||
$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-default * $line-height-base)) !default; // ~20px
|
||||
|
|
@ -2,24 +2,36 @@
|
|||
* Typography constants
|
||||
*/
|
||||
|
||||
$font-size-h1: 36px;
|
||||
$font-size-h2: 24px;
|
||||
$font-size-h3: 18px;
|
||||
$font-size-h4: 18px;
|
||||
$font-size-h5: 16px;
|
||||
$font-size-default: 14px;
|
||||
$font-size-small: 12px;
|
||||
$font-size-xsmall: 10px;
|
||||
:root {
|
||||
--font-size-h1: 36px;
|
||||
--font-size-h2: 24px;
|
||||
--font-size-h3: 18px;
|
||||
--font-size-h4: 18px;
|
||||
--font-size-h5: 16px;
|
||||
--font-size-default: 14px;
|
||||
--font-size-small: 12px;
|
||||
--font-size-xsmall: 10px;
|
||||
|
||||
$font-family-default: "Segoe UI Regular", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
|
||||
$font-family-light: "Segoe UI Semilight", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
|
||||
$font-family-din-regular: join('DIN-Regular', $font-family-default);
|
||||
--font-family-default: Segoe UI Regular, Segoe UI, Segoe WP, Tahoma, Arial, sans-serif;
|
||||
--font-family-light: Segoe UI Semilight, Segoe UI, Segoe WP, Tahoma, Arial, sans-serif;
|
||||
--font-family-din-regular: DIN-Regular, var(--font-family-default);
|
||||
|
||||
// Icons
|
||||
--icon-font-family: "icons";
|
||||
--icon-size-base: 16px;
|
||||
--icon-size-xsmall: var(--icon-size-base);
|
||||
--icon-size-small: calc(1 * var(--icon-size-base));
|
||||
--icon-size-medium: calc(2 * var(--icon-size-base));
|
||||
--icon-size-large: calc(3 * var(--icon-size-base));
|
||||
--icon-size-xlarge: calc(4 * var(--icon-size-base));
|
||||
--icon-size-xxlarge: calc(5 * var(--icon-size-base));
|
||||
|
||||
$headings-font-weight: normal;
|
||||
$headings-line-height: 1.5;
|
||||
--headings-font-weight: normal;
|
||||
--headings-line-height: 1.5;
|
||||
|
||||
// Unit-less line-height for use in components like buttons. Taken from bootstrap.
|
||||
$line-height-base: 1.428571429 !default; // ~20/14
|
||||
// Unit-less line-height for use in components like buttons. Taken from bootstrap.
|
||||
--line-height-base: 1.428571429; // ~20/14
|
||||
|
||||
// Computed line-height (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
||||
$line-height-computed: floor(($font-size-default * $line-height-base)) !default; // ~20px
|
||||
// Computed line-height (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
||||
--line-height-computed: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,296 +2,207 @@
|
|||
* Default Dark Theme Colors
|
||||
*/
|
||||
|
||||
@import "../color.palette";
|
||||
|
||||
|
||||
// Theme Map
|
||||
|
||||
$theme-dark: () !default;
|
||||
$theme-dark: map-merge((
|
||||
|
||||
// Layouts
|
||||
color-bg-navbar: $color-grey-900,
|
||||
color-bg-navbar-hover: $color-grey-550,
|
||||
color-bg-navbar-selected: $color-grey-1100,
|
||||
color-bg-navbar-hover-selected: $color-black,
|
||||
color-bg-header: $color-grey-1400,
|
||||
color-bg-header-hover: $color-grey-700,
|
||||
color-bg-masthead: $color-grey-1300,
|
||||
color-bg-masthead-hover: $color-grey-700,
|
||||
color-border-masthead-item: $color-grey-600,
|
||||
color-border-navbar-separator: $color-grey-300,
|
||||
color-border-masthead-focus: $color-white,
|
||||
color-border-navbar-focus: $color-white,
|
||||
:root[theme='dark'] {
|
||||
// Shell
|
||||
--color-bg-navbar: var(--color-grey-70);
|
||||
--color-bg-navbar-hover: var(--color-grey-55);
|
||||
--color-bg-navbar-selected: var(--color-grey-11);
|
||||
--color-bg-navbar-selected-hover: var(--color-black);
|
||||
--color-bg-header: var(--color-grey-14);
|
||||
--color-bg-header-hover: var(--color-grey-60);
|
||||
--color-bg-masthead: var(--color-grey-80);
|
||||
--color-bg-masthead-hover: var(--color-grey-60);
|
||||
--color-outline-masthead: var(--color-white);
|
||||
--color-border-masthead-focus: var(--color-white);
|
||||
--color-border-navbar-focus: var(--color-white);
|
||||
|
||||
// Surfaces
|
||||
color-bg-panel-primary: $color-grey-1400,
|
||||
color-bg-panel-secondary: $color-grey-1400,
|
||||
color-bg-content: $color-grey-1400,
|
||||
color-bg-panel-contextual: $color-grey-1500,
|
||||
color-border-panel-contextual-separator: $color-grey-300,
|
||||
shadow-panel-contextual: -5px 0 15.0px 0 rgba(0, 0, 0, .85),
|
||||
color-bg-action-bar: $color-grey-1400,
|
||||
color-bg-title-bar: $color-grey-1500,
|
||||
color-border-panel: $color-grey-700,
|
||||
color-border-grid: $color-grey-700,
|
||||
--color-bg-panel: var(--color-grey-14);
|
||||
--color-bg-container: var(--color-grey-14);
|
||||
--color-bg-container-panel: var(--color-grey-90);
|
||||
--color-border-container-panel: var(--color-grey-40);
|
||||
--shadow-container-panel: -5px 0 15.0px 0 rgba(0, 0, 0, .85);
|
||||
--color-bg-cmdbar: var(--color-grey-14);
|
||||
--color-bg-titlebar: var(--color-grey-90);
|
||||
--color-border-panel: var(--color-grey-60);
|
||||
--color-border-grid: var(--color-grey-60);
|
||||
|
||||
// Controls
|
||||
color-bg-blastshield: $color-black-transparent-primary,
|
||||
color-bg-balloon: $color-grey-1500,
|
||||
color-bg-form: $color-grey-1500,
|
||||
color-bg-table: $color-grey-1500,
|
||||
color-bg-searchbar: $color-grey-1500,
|
||||
color-bg-searchbar-rest: $color-grey-400,
|
||||
color-bg-searchbar-focus: $color-white,
|
||||
color-bg-guidance: $color-blue-400,
|
||||
color-bg-thumbnail: $color-grey-600,
|
||||
color-text-thumbnail: $color-grey-100,
|
||||
--color-bg-blastshield: var(--color-black-transparent-primary);
|
||||
--color-bg-balloon: var(--color-grey-90);
|
||||
--color-bg-form: var(--color-grey-90);
|
||||
--color-bg-table: var(--color-grey-90);
|
||||
--color-bg-searchbar-active: var(--color-grey-90);
|
||||
--color-bg-searchbar-rest: var(--color-grey-4);
|
||||
--color-bg-searchbar-focus: var(--color-white);
|
||||
|
||||
// Interactions
|
||||
color-bg-item-hover: $color-grey-700,
|
||||
color-bg-item-selected: $color-grey-1000,
|
||||
--color-bg-hover: var(--color-grey-60);
|
||||
--color-bg-selected: var(--color-grey-01);
|
||||
|
||||
// All Tiles
|
||||
color-border-tile: $color-grey-700,
|
||||
color-border-tile-hover: $color-blue-100,
|
||||
--color-border-tile: var(--color-grey-60); // 0.5px border
|
||||
--color-border-tile-hover: var(--color-blue-10);
|
||||
|
||||
// Gallery Tiles
|
||||
color-bg-gallery-tile: $color-grey-1500,
|
||||
color-bg-gallery-tile-banner: $color-black,
|
||||
color-bg-gallery-tile-default: $color-grey-1200,
|
||||
color-bg-gallery-tile-blue: $color-blue-400,
|
||||
color-bg-gallery-tile-red: $color-red-600,
|
||||
color-bg-gallery-tile-yellow: $color-yellow-1000,
|
||||
--color-bg-gallery-tile-top: var(--color-grey-90);
|
||||
--color-bg-gallery-tile-bottom: var(--color-blue-10); // Duplicated?
|
||||
|
||||
// Dashboard Tiles
|
||||
color-bg-dashboard-tile: $color-grey-1500,
|
||||
color-fill-tile-symbol: $color-white,
|
||||
color-stroke-tile-symbol: $color-white,
|
||||
--color-bg-dashboard: var(--color-grey-90);
|
||||
--color-tile-symbol: var(--color-white);
|
||||
--color-stroke-tile-symbol: var(--color-white);
|
||||
|
||||
// Input Fields
|
||||
color-bg-input-rest: $color-grey-1400,
|
||||
color-bg-input-hover: $color-grey-1400,
|
||||
color-bg-input-selected: $color-grey-1400,
|
||||
color-bg-input-disabled: $color-grey-1100,
|
||||
--color-bg-input-rest: var(--color-grey-14);
|
||||
--color-bg-input-hover: var(--color-grey-14);
|
||||
--color-bg-input-selected: var(--color-grey-14);
|
||||
--color-bg-input-disabled: var(--color-grey-11);
|
||||
|
||||
color-border-input-rest: $color-grey-800,
|
||||
color-border-input-hover: $color-grey-600,
|
||||
color-border-input-selected: $color-blue-100,
|
||||
color-border-input-error: $color-error-local-100,
|
||||
--color-border-input-hover: var(--color-text-20);
|
||||
--color-border-input-selected: var(--color-blue-10);
|
||||
--color-border-input-error: var(--color-status-30);
|
||||
|
||||
color-text-clear: $color-white,
|
||||
color-text-placeholder: $color-grey-400,
|
||||
--color-text-regular: var(--color-white);
|
||||
--color-text-placeholder: var(--color-grey-4);
|
||||
|
||||
// Dropdowns
|
||||
color-dropdown-rest: $color-grey-1500,
|
||||
color-dropdown-hover: $color-grey-1500,
|
||||
color-dropdown-focus: $color-grey-1400,
|
||||
color-dropdown-pressed: $color-grey-700,
|
||||
color-dropdown-disabled: $color-grey-1500,
|
||||
color-border-dropdown-rest: $color-blue-100,
|
||||
color-border-dropdown-focus: $color-grey-100,
|
||||
color-dropdown-disabled-text: $color-grey-500,
|
||||
--color-dropdown-rest: var(--color-grey-90);
|
||||
--color-dropdown-hover: var(--color-grey-90);
|
||||
--color-dropdown-focus: var(--color-grey-14);
|
||||
--color-dropdown-pressed: var(--color-grey-60);
|
||||
--color-dropdown-disabled: var(--color-grey-90);
|
||||
--color-border-dropdown-rest: var(--color-blue-10);
|
||||
--color-border-dropdown-focus: var(--color-grey-1);
|
||||
--color-text-dropdown-disabled: var(--color-text-30);
|
||||
|
||||
// Radio button
|
||||
color-bg-radio-btn-rest: $color-grey-1400,
|
||||
color-bg-radio-btn-hover: $color-grey-1400,
|
||||
color-bg-radio-btn-selected: $color-grey-1400,
|
||||
color-bg-radio-btn-focused: $color-grey-1400,
|
||||
color-bg-radio-btn-disabled: $color-grey-1400,
|
||||
color-border-radio-btn-rest: $color-white,
|
||||
color-border-radio-btn-hover: $color-white,
|
||||
color-border-radio-btn-selected: $color-blue-500,
|
||||
color-border-radio-btn-focused: $color-white,
|
||||
color-border-radio-btn-disabled: $color-grey-500,
|
||||
color-center-radio-btn-hover: $color-grey-400,
|
||||
color-center-radio-btn-selected: $color-white,
|
||||
color-center-radio-btn-disabled: $color-grey-500,
|
||||
--color-bg-radio-rest: var(--color-grey-14);
|
||||
--color-bg-radio-hover: var(--color-grey-14);
|
||||
--color-bg-radio-selected: var(--color-grey-14);
|
||||
--color-bg-radio-focused: var(--color-grey-14);
|
||||
--color-bg-radio-disabled: var(--color-grey-14);
|
||||
--color-border-radio-rest: var(--color-white);
|
||||
--color-border-radio-hover: var(--color-white);
|
||||
--color-border-radio-selected: var(--color-blue-50);
|
||||
--color-border-radio-focused: var(--color-white);
|
||||
--color-border-radio-disabled: var(--color-text-30);
|
||||
--color-center-radio-hover: var(--color-grey-4); //On hover center will reduce to 2px circle
|
||||
--color-center-radio-selected: var(--color-white); //On selected center will return to normal size
|
||||
--color-center-radio-disabled: var(--color-text-30);
|
||||
|
||||
// Toggle
|
||||
color-bg-toggle-btn-rest-on: $color-blue-500,
|
||||
color-bg-toggle-btn-rest-off: $color-white,
|
||||
color-bg-toggle-btn-hover-on: $color-blue-300,
|
||||
color-bg-toggle-btn-hover-off: $color-white,
|
||||
color-bg-toggle-btn-focus-on: $color-blue-500,
|
||||
color-bg-toggle-btn-focus-off: $color-white,
|
||||
color-bg-toggle-btn-disabled-on: $color-grey-300,
|
||||
color-bg-toggle-btn-disabled-off: $color-grey-100,
|
||||
color-border-toggle-btn-rest-on: $color-blue-500,
|
||||
color-border-toggle-btn-rest-off: $color-grey-600,
|
||||
color-border-toggle-btn-hover-on: $color-blue-300,
|
||||
color-border-toggle-btn-hover-off: $color-grey-600,
|
||||
color-border-toggle-btn-focus-on: $color-white,
|
||||
color-border-toggle-btn-focus-off: $color-grey-600,
|
||||
color-border-toggle-btn-disabled-on: $color-grey-300,
|
||||
color-border-toggle-btn-disabled-off: $color-grey-500,
|
||||
color-circle-toggle-btn-rest-on: $color-white,
|
||||
color-circle-toggle-btn-rest-off: $color-grey-1200,
|
||||
color-circle-toggle-btn-hover-on: $color-white,
|
||||
color-circle-toggle-btn-hover-off: $color-blue-300,
|
||||
color-circle-toggle-btn-focus-on: $color-white,
|
||||
color-circle-toggle-btn-focus-off: $color-grey-1200,
|
||||
color-circle-toggle-btn-disabled-on: $color-grey-500,
|
||||
color-circle-toggle-btn-disabled-off: $color-grey-500,
|
||||
--color-bg-toggle-on-rest: var(--color-blue-50);
|
||||
--color-bg-toggle-off-rest: var(--color-white);
|
||||
--color-bg-toggle-on-hover: var(--color-blue-30);
|
||||
--color-bg-toggle-off-hover: var(--color-white);
|
||||
--color-bg-toggle-on-focus: var(--color-blue-50);
|
||||
--color-bg-toggle-off-focus: var(--color-white);
|
||||
--color-bg-toggle-on-disabled: var(--color-grey-40);
|
||||
--color-bg-toggle-off-disabled: var(--color-grey-1);
|
||||
--color-border-toggle-on-rest: var(--color-blue-50);
|
||||
--color-border-toggle-off-rest: var(--color-text-20);
|
||||
--color-border-toggle-on-hover: var(--color-blue-30);
|
||||
--color-border-toggle-off-hover: var(--color-text-20);
|
||||
--color-border-toggle-on-focus: var(--color-white);
|
||||
--color-border-toggle-off-focus: var(--color-text-20);
|
||||
--color-border-toggle-on-disabled: var(--color-grey-40);
|
||||
--color-border-toggle-off-disabled: var(--color-text-30);
|
||||
--color-circle-toggle-on-rest: var(--color-white);
|
||||
--color-circle-toggle-off-rest: var(--color-grey-12);
|
||||
--color-circle-toggle-on-hover: var(--color-white); //Size circle reduce to half
|
||||
--color-circle-toggle-off-hover: var(--color-blue-30);
|
||||
--color-circle-toggle-on-focus: var(--color-white);
|
||||
--color-circle-toggle-off-focus: var(--color-grey-12);
|
||||
--color-circle-toggle-on-disabled: var(--color-text-30);
|
||||
--color-circle-toggle-off-disabled: var(--color-text-30);
|
||||
|
||||
// Checkbox
|
||||
color-bg-checkbox-focused: $color-grey-1400,
|
||||
color-bg-checkbox-selected-hover: $color-blue-300,
|
||||
color-bg-checkbox-pressed-selected: $color-blue-100,
|
||||
color-bg-checkbox-disabled: $color-grey-1100,
|
||||
color-border-checkbox-hover: $color-grey-600,
|
||||
color-border-checkbox-focused: $color-grey-600,
|
||||
color-border-checkbox-selected-hover: $color-blue-300,
|
||||
color-border-checkbox-pressed-selected: $color-blue-100,
|
||||
color-border-checkbox-disabled-selected: $color-grey-1100,
|
||||
color-border-checkbox-disabled: $color-grey-1000,
|
||||
|
||||
// Calendar
|
||||
color-bg-calendar-btn-current: $color-blue-100,
|
||||
color-bg-calendar-btn-hover: $color-grey-700,
|
||||
color-bg-calendar-btn-focus: $color-transparent,
|
||||
color-border-calendar-btn-focus: $color-grey-600,
|
||||
--color-bg-checkbox-focused: var(--color-color-grey-14);
|
||||
--color-bg-checkbox-selected-hover: var(--color-blue-30);
|
||||
--color-bg-checkbox-pressed: var(--color-blue-10);
|
||||
--color-bg-checkbox-disabled: var(--color-grey-11);
|
||||
--color-border-checkbox-hover: var(--color-text-20);
|
||||
--color-border-checkbox-focused: var(--color-text-20);
|
||||
--color-border-checkbox-selected-hover: var(--color-blue-30);
|
||||
--color-border-checkbox-pressed-selected: var(--color-blue-10);
|
||||
--color-border-checkbox-disabled-selected: var(--color-grey-11);
|
||||
--color-border-checkbox-disabled: var(--color-grey-01);
|
||||
|
||||
// General Borders
|
||||
color-border-rest: $color-grey-700,
|
||||
color-border-hover: $color-blue-100,
|
||||
color-border-focus: $color-white,
|
||||
color-border-selected: $color-blue-100,
|
||||
color-border-disabled: $color-grey-500,
|
||||
color-border-error: $color-error-local-100,
|
||||
color-border-controls: $color-blue-100,
|
||||
--color-border-rest: var(--color-grey-40);
|
||||
--color-border-hover: var(--color-blue-10);
|
||||
--color-border-focus: var(--color-black);
|
||||
--color-border-selected: var(--color-blue-10);
|
||||
--color-border-disabled: var(--color-text-30);
|
||||
--color-border-error: var(--color-status-30);
|
||||
--color-border-controls: var(--color-blue-10);
|
||||
--color-outline: var(--color-white);
|
||||
|
||||
// General Texts
|
||||
color-text-rest: $color-white,
|
||||
color-text-chevron: $color-grey-300,
|
||||
color-text-error: $color-error-local-100,
|
||||
color-text-required: $color-error-local-100,
|
||||
color-text-visited: $color-blue-600,
|
||||
color-text-nodata: $color-grey-600,
|
||||
color-text-disabled: $color-grey-500,
|
||||
color-text-white: $color-white,
|
||||
color-text-black: $color-black,
|
||||
--color-text-rest: var(--color-white);
|
||||
--color-text-chevron: var(--color-grey-40);
|
||||
--color-text-error: var(--color-status-60);
|
||||
--color-text-required: var(--color-status-60);
|
||||
--color-text-nodata: var(--color-text-20);
|
||||
--color-text-disabled: var(--color-text-30);
|
||||
--color-text-masthead: var(--color-white);
|
||||
--color-text-navbar: var(--color-white);
|
||||
|
||||
// Buttons
|
||||
color-bg-btn-standard-rest: $color-grey-200,
|
||||
color-bg-btn-standard-hover: $color-grey-300,
|
||||
color-bg-btn-standard-focus: $color-grey-300,
|
||||
color-bg-btn-standard-pressed-selected: $color-grey-400,
|
||||
color-bg-btn-standard-disabled: $color-grey-1000,
|
||||
--color-bg-btn-standard-rest: var(--color-grey-30);
|
||||
--color-bg-btn-standard-hover: var(--color-grey-40);
|
||||
--color-bg-btn-standard-focus: var(--color-grey-40);
|
||||
--color-bg-btn-standard-selected: var(--color-grey-4);
|
||||
--color-bg-btn-standard-disabled: var(--color-grey-01);
|
||||
|
||||
color-bg-btn-primary-rest: $color-blue-100,
|
||||
color-bg-btn-primary-hover: $color-blue-200,
|
||||
color-bg-btn-primary-focus: $color-blue-200,
|
||||
color-bg-btn-primary-pressed-selected: $color-blue-300,
|
||||
color-bg-btn-primary-disabled: $color-grey-1000,
|
||||
color-outline-btn-primary-focus: $color-white,
|
||||
--color-bg-btn-primary-rest: var(--color-blue-10);
|
||||
--color-bg-btn-primary-hover: var(--color-blue-20);
|
||||
--color-bg-btn-primary-focus: var(--color-blue-20);
|
||||
--color-bg-btn-primary-selected: var(--color-blue-30);
|
||||
--color-bg-btn-primary-disabled: var(--color-grey-01);
|
||||
--color-outline-btn-primary-focus: var(--color-white);
|
||||
|
||||
color-bg-btn-danger-rest: $color-red-400,
|
||||
color-bg-btn-danger-hover: $color-red-500,
|
||||
color-bg-btn-danger-focus: $color-red-500,
|
||||
color-bg-btn-danger-pressed-selected: $color-red-600,
|
||||
color-bg-btn-danger-disabled: $color-grey-1000,
|
||||
color-outline-btn-danger-focus: $color-white,
|
||||
|
||||
// Layout Buttons
|
||||
color-bg-btn-layout-rest: $color-grey-1500,
|
||||
color-bg-btn-layout-hover: $color-grey-700,
|
||||
color-bg-btn-layout-focus: $color-grey-1400,
|
||||
color-bg-btn-layout-pressed-selected: $color-grey-1000,
|
||||
color-bg-btn-layout-disabled: $color-grey-1100,
|
||||
color-bg-btn-layout-header-pressed-selected: $color-grey-1200,
|
||||
color-bg-btn-layout-sidenavbar-pressed-selected: $color-grey-1200,
|
||||
color-border-btn-layout-rest: $color-blue-100,
|
||||
color-border-btn-layout-hover: $color-grey-700,
|
||||
color-border-btn-layout-focus: $color-white,
|
||||
color-border-btn-layout-pressed-selected: $color-grey-1000,
|
||||
color-border-btn-layout-disabled: $color-grey-1100,
|
||||
color-border-btn-layout-header-pressed-selected: $color-grey-1200,
|
||||
color-border-btn-layout-sidenavbar-pressed-selected: $color-grey-1200,
|
||||
--color-bg-btn-negative-rest: var(--color-red-4);
|
||||
--color-bg-btn-negative-hover: var(--color-red-5);
|
||||
--color-bg-btn-negative-focus: var(--color-red-5);
|
||||
--color-bg-btn-negative-disabled: var(--color-grey-01);
|
||||
--color-outline-btn-negative-focus: var(--color-white);
|
||||
|
||||
// Hyperlinks
|
||||
color-text-hyperlink-rest: $color-blue-500,
|
||||
color-text-hyperlink-hover: $color-blue-600,
|
||||
color-text-hyperlink-focus: $color-blue-600,
|
||||
color-text-hyperlink-disabled: $color-grey-500,
|
||||
color-border-hyperlink-focus: $color-grey-600,
|
||||
--color-hyperlink-rest: var(--color-blue-50);
|
||||
--color-hyperlink-hover: var(--color-blue-60);
|
||||
--color-hyperlink-focus: var(--color-blue-60);
|
||||
--color-hyperlink-disabled: var(--color-text-30);
|
||||
|
||||
// Loading
|
||||
color-bg-loader-panel: $color-grey-1000,
|
||||
color-bg-loader-spinner: $color-white,
|
||||
color-border-loader-global-segment: $color-blue-100,
|
||||
color-border-loader-global-track: $color-grey-300,
|
||||
--color-bg-loader-panel: var(--color-grey-01);
|
||||
--color-bg-loader-spinner: var(--color-white);
|
||||
--color-border-loader-global-segment: var(--color-blue-10);
|
||||
--color-border-loader-global-track: var(--color-grey-40);
|
||||
|
||||
// Upload
|
||||
color-bg-upload: $color-grey-1300,
|
||||
color-border-upload: $color-grey-700,
|
||||
--color-bg-upload: var(--color-grey-80);
|
||||
--color-border-upload: var(--color-grey-60);
|
||||
|
||||
// Tabs
|
||||
color-text-pivot-tab-device-rest: $color-grey-400,
|
||||
color-text-pivot-tab-device-hover: $color-white,
|
||||
color-text-pivot-tab-device-focus: $color-white,
|
||||
color-text-pivot-tab-device-press: $color-grey-100,
|
||||
color-text-pivot-tab-device-selected: $color-white,
|
||||
color-border-pivot-tab: $color-blue-100,
|
||||
--color-pivot-rest: var(--color-grey-4);
|
||||
--color-pivot-hover: var(--color-white);
|
||||
--color-pivot-focus: var(--color-white);
|
||||
--color-pivot-press: var(--color-grey-1);
|
||||
--color-pivot-selected: var(--color-white);
|
||||
--color-border-pivot: var(--color-blue-10);
|
||||
|
||||
// Charts
|
||||
color-chart-X-Y-lines: $color-grey-400,
|
||||
color-chart-gap-stroke: $color-grey-500,
|
||||
--color-chart-xy-lines: var(--color-grey-4);
|
||||
--color-chart-gap-stroke: var(--color-text-30);
|
||||
|
||||
// Alerts
|
||||
color-bg-alert-error: $color-error-global-100,
|
||||
color-bg-alert-info: $color-information-200,
|
||||
color-bg-alert-warning: $color-warning-100,
|
||||
color-bg-alert-error-close-hover: $color-red-1100,
|
||||
color-bg-alert-info-close-hover: $color-grey-700,
|
||||
color-bg-alert-warning-close-hover: $color-yellow-600,
|
||||
--color-bg-alert-error: var(--color-err-1);
|
||||
--color-bg-alert-info: var(--color-status-10);
|
||||
--color-bg-alert-warning: var(--color-warn-1);
|
||||
|
||||
// Color picker
|
||||
color-picker-border-inner: $color-white,
|
||||
color-picker-border-outer: $color-error-global-100,
|
||||
|
||||
// Data color
|
||||
data-color-1: $color-green-100,
|
||||
data-color-2: $color-green-200,
|
||||
data-color-3: $color-green-300,
|
||||
data-color-4: $color-green-400,
|
||||
data-color-5: $color-green-500,
|
||||
data-color-6: $color-green-600,
|
||||
data-color-7: $color-lightgrey-100,
|
||||
data-color-8: $color-lightgrey-200,
|
||||
data-color-9: $color-lightgrey-300,
|
||||
data-color-10: $color-lightgrey-400,
|
||||
data-color-11: $color-lightgrey-500,
|
||||
data-color-12: $color-lightgrey-600,
|
||||
data-color-13: $color-red-100,
|
||||
data-color-14: $color-red-200,
|
||||
data-color-15: $color-red-300,
|
||||
data-color-16: $color-red-400,
|
||||
data-color-17: $color-red-500,
|
||||
data-color-18: $color-red-600,
|
||||
data-color-19: $color-yellow-100,
|
||||
data-color-20: $color-yellow-200,
|
||||
data-color-21: $color-yellow-300,
|
||||
data-color-22: $color-yellow-400,
|
||||
data-color-23: $color-yellow-500,
|
||||
data-color-24: $color-yellow-600,
|
||||
data-color-25: $color-lightblue-100,
|
||||
data-color-26: $color-lightblue-200,
|
||||
data-color-27: $color-lightblue-300,
|
||||
data-color-28: $color-lightblue-400,
|
||||
data-color-29: $color-lightblue-500,
|
||||
data-color-30: $color-lightblue-600,
|
||||
data-color-31: $color-orange-100,
|
||||
data-color-32: $color-orange-200,
|
||||
data-color-33: $color-orange-300,
|
||||
data-color-34: $color-orange-400,
|
||||
data-color-35: $color-orange-500,
|
||||
data-color-36: $color-orange-600,
|
||||
data-color-37: $color-purple-100,
|
||||
data-color-38: $color-purple-200,
|
||||
data-color-39: $color-purple-300,
|
||||
data-color-40: $color-purple-400,
|
||||
data-color-41: $color-purple-500,
|
||||
data-color-42: $color-purple-600,
|
||||
|
||||
), $theme-dark);
|
||||
--color-border-colorpicker-in: var(--color-white);
|
||||
--color-border-colorpicker-out: var(--color-err-1);
|
||||
}
|
||||
|
|
@ -0,0 +1,297 @@
|
|||
/**
|
||||
* Default Dark Theme Colors
|
||||
*/
|
||||
|
||||
@import "../color.palette.deprecated";
|
||||
|
||||
|
||||
// Theme Map
|
||||
|
||||
$theme-dark: () !default;
|
||||
$theme-dark: map-merge((
|
||||
|
||||
// Layouts
|
||||
color-bg-navbar: $color-grey-900,
|
||||
color-bg-navbar-hover: $color-grey-550,
|
||||
color-bg-navbar-selected: $color-grey-1100,
|
||||
color-bg-navbar-hover-selected: $color-black, //rename
|
||||
color-bg-header: $color-grey-1400,
|
||||
color-bg-header-hover: $color-grey-700,
|
||||
color-bg-masthead: $color-grey-1300,
|
||||
color-bg-masthead-hover: $color-grey-700,
|
||||
color-border-masthead-item: $color-grey-600, //deprecated
|
||||
color-border-navbar-separator: $color-grey-300, //deprecated
|
||||
color-border-masthead-focus: $color-white,
|
||||
color-border-navbar-focus: $color-white,
|
||||
|
||||
// Surfaces
|
||||
color-bg-panel-primary: $color-grey-1400, //rename
|
||||
color-bg-panel-secondary: $color-grey-1400, //deprecated
|
||||
color-bg-content: $color-grey-1400, //rename
|
||||
color-bg-panel-contextual: $color-grey-1500, //rename
|
||||
color-border-panel-contextual-separator: $color-grey-300, //rename
|
||||
shadow-panel-contextual: -5px 0 15.0px 0 rgba(0, 0, 0, .85), //rename
|
||||
color-bg-action-bar: $color-grey-1400, //rename
|
||||
color-bg-title-bar: $color-grey-1500, //rename
|
||||
color-border-panel: $color-grey-700,
|
||||
color-border-grid: $color-grey-700,
|
||||
|
||||
// Controls
|
||||
color-bg-blastshield: $color-black-transparent-primary,
|
||||
color-bg-balloon: $color-grey-1500,
|
||||
color-bg-form: $color-grey-1500,
|
||||
color-bg-table: $color-grey-1500,
|
||||
color-bg-searchbar: $color-grey-1500, //rename
|
||||
color-bg-searchbar-rest: $color-grey-400,
|
||||
color-bg-searchbar-focus: $color-white,
|
||||
color-bg-guidance: $color-blue-400, //deprecated
|
||||
color-bg-thumbnail: $color-grey-600, //deprecated
|
||||
color-text-thumbnail: $color-grey-100, //deprecated
|
||||
|
||||
// Interactions
|
||||
color-bg-item-hover: $color-grey-700,
|
||||
color-bg-item-selected: $color-grey-1000,
|
||||
|
||||
// All Tiles
|
||||
color-border-tile: $color-grey-700,
|
||||
color-border-tile-hover: $color-blue-100,
|
||||
|
||||
// Gallery Tiles
|
||||
color-bg-gallery-tile: $color-grey-1500, //rename
|
||||
color-bg-gallery-tile-banner: $color-black, //deprecated
|
||||
color-bg-gallery-tile-default: $color-grey-1200, //deprecated
|
||||
color-bg-gallery-tile-blue: $color-blue-400, //deprecated
|
||||
color-bg-gallery-tile-red: $color-red-600, //deprecated
|
||||
color-bg-gallery-tile-yellow: $color-yellow-1000, //deprecated
|
||||
|
||||
// Dashboard Tiles
|
||||
color-bg-dashboard-tile: $color-grey-1500, //rename
|
||||
color-fill-tile-symbol: $color-white, //rename
|
||||
color-stroke-tile-symbol: $color-white, //rename
|
||||
|
||||
// Input Fields
|
||||
color-bg-input-rest: $color-grey-1400,
|
||||
color-bg-input-hover: $color-grey-1400,
|
||||
color-bg-input-selected: $color-grey-1400,
|
||||
color-bg-input-disabled: $color-grey-1100,
|
||||
|
||||
color-border-input-rest: $color-grey-800, //deprecated
|
||||
color-border-input-hover: $color-grey-600,
|
||||
color-border-input-selected: $color-blue-100,
|
||||
color-border-input-error: $color-error-local-100,
|
||||
|
||||
color-text-clear: $color-white, //rename
|
||||
color-text-placeholder: $color-grey-400,
|
||||
|
||||
// Dropdowns
|
||||
color-dropdown-rest: $color-grey-1500,
|
||||
color-dropdown-hover: $color-grey-1500,
|
||||
color-dropdown-focus: $color-grey-1400,
|
||||
color-dropdown-pressed: $color-grey-700,
|
||||
color-dropdown-disabled: $color-grey-1500,
|
||||
color-border-dropdown-rest: $color-blue-100,
|
||||
color-border-dropdown-focus: $color-grey-100,
|
||||
color-dropdown-disabled-text: $color-grey-500,
|
||||
|
||||
// Radio button
|
||||
color-bg-radio-btn-rest: $color-grey-1400, //rename
|
||||
color-bg-radio-btn-hover: $color-grey-1400, //rename
|
||||
color-bg-radio-btn-selected: $color-grey-1400, //rename
|
||||
color-bg-radio-btn-focused: $color-grey-1400, //rename
|
||||
color-bg-radio-btn-disabled: $color-grey-1400, //rename
|
||||
color-border-radio-btn-rest: $color-white, //rename
|
||||
color-border-radio-btn-hover: $color-white, //rename
|
||||
color-border-radio-btn-selected: $color-blue-500, //rename
|
||||
color-border-radio-btn-focused: $color-white, //rename
|
||||
color-border-radio-btn-disabled: $color-grey-500, //rename
|
||||
color-center-radio-btn-hover: $color-grey-400, //rename
|
||||
color-center-radio-btn-selected: $color-white, //rename
|
||||
color-center-radio-btn-disabled: $color-grey-500, //rename
|
||||
|
||||
// Toggle
|
||||
color-bg-toggle-btn-rest-on: $color-blue-500, //rename
|
||||
color-bg-toggle-btn-rest-off: $color-white, //rename
|
||||
color-bg-toggle-btn-hover-on: $color-blue-300, //rename
|
||||
color-bg-toggle-btn-hover-off: $color-white, //rename
|
||||
color-bg-toggle-btn-focus-on: $color-blue-500, //rename
|
||||
color-bg-toggle-btn-focus-off: $color-white, //rename
|
||||
color-bg-toggle-btn-disabled-on: $color-grey-300, //rename
|
||||
color-bg-toggle-btn-disabled-off: $color-grey-100, //rename
|
||||
color-border-toggle-btn-rest-on: $color-blue-500, //rename
|
||||
color-border-toggle-btn-rest-off: $color-grey-600, //rename
|
||||
color-border-toggle-btn-hover-on: $color-blue-300, //rename
|
||||
color-border-toggle-btn-hover-off: $color-grey-600, //rename
|
||||
color-border-toggle-btn-focus-on: $color-white, //rename
|
||||
color-border-toggle-btn-focus-off: $color-grey-600, //rename
|
||||
color-border-toggle-btn-disabled-on: $color-grey-300, //rename
|
||||
color-border-toggle-btn-disabled-off: $color-grey-500, //rename
|
||||
color-circle-toggle-btn-rest-on: $color-white, //rename
|
||||
color-circle-toggle-btn-rest-off: $color-grey-1200, //rename
|
||||
color-circle-toggle-btn-hover-on: $color-white, //rename
|
||||
color-circle-toggle-btn-hover-off: $color-blue-300, //rename
|
||||
color-circle-toggle-btn-focus-on: $color-white, //rename
|
||||
color-circle-toggle-btn-focus-off: $color-grey-1200, //rename
|
||||
color-circle-toggle-btn-disabled-on: $color-grey-500, //rename
|
||||
color-circle-toggle-btn-disabled-off: $color-grey-500, //rename
|
||||
|
||||
// Checkbox
|
||||
color-bg-checkbox-focused: $color-grey-1400,
|
||||
color-bg-checkbox-selected-hover: $color-blue-300,
|
||||
color-bg-checkbox-pressed-selected: $color-blue-100,
|
||||
color-bg-checkbox-disabled: $color-grey-1100,
|
||||
color-border-checkbox-hover: $color-grey-600,
|
||||
color-border-checkbox-focused: $color-grey-600,
|
||||
color-border-checkbox-selected-hover: $color-blue-300,
|
||||
color-border-checkbox-pressed-selected: $color-blue-100,
|
||||
color-border-checkbox-disabled-selected: $color-grey-1100,
|
||||
color-border-checkbox-disabled: $color-grey-1000,
|
||||
|
||||
// Calendar
|
||||
color-bg-calendar-btn-current: $color-blue-100, //deprecated
|
||||
color-bg-calendar-btn-hover: $color-grey-700, //deprecated
|
||||
color-bg-calendar-btn-focus: $color-transparent, //deprecated
|
||||
color-border-calendar-btn-focus: $color-grey-600, //deprecated
|
||||
|
||||
// General Borders
|
||||
color-border-rest: $color-grey-700,
|
||||
color-border-hover: $color-blue-100,
|
||||
color-border-focus: $color-white,
|
||||
color-border-selected: $color-blue-100,
|
||||
color-border-disabled: $color-grey-500,
|
||||
color-border-error: $color-error-local-100,
|
||||
color-border-controls: $color-blue-100,
|
||||
|
||||
// General Texts
|
||||
color-text-rest: $color-white,
|
||||
color-text-chevron: $color-grey-300,
|
||||
color-text-error: $color-error-local-100,
|
||||
color-text-required: $color-error-local-100,
|
||||
color-text-visited: $color-blue-600, //deprecated
|
||||
color-text-nodata: $color-grey-600,
|
||||
color-text-disabled: $color-grey-500,
|
||||
color-text-white: $color-white, //deprecated
|
||||
color-text-black: $color-black, //deprecated
|
||||
|
||||
// Buttons
|
||||
color-bg-btn-standard-rest: $color-grey-200,
|
||||
color-bg-btn-standard-hover: $color-grey-300,
|
||||
color-bg-btn-standard-focus: $color-grey-300,
|
||||
color-bg-btn-standard-pressed-selected: $color-grey-400,
|
||||
color-bg-btn-standard-disabled: $color-grey-1000,
|
||||
|
||||
color-bg-btn-primary-rest: $color-blue-100,
|
||||
color-bg-btn-primary-hover: $color-blue-200,
|
||||
color-bg-btn-primary-focus: $color-blue-200,
|
||||
color-bg-btn-primary-pressed-selected: $color-blue-300,
|
||||
color-bg-btn-primary-disabled: $color-grey-1000,
|
||||
color-outline-btn-primary-focus: $color-white,
|
||||
|
||||
color-bg-btn-danger-rest: $color-red-400, //rename
|
||||
color-bg-btn-danger-hover: $color-red-500, //rename
|
||||
color-bg-btn-danger-focus: $color-red-500, //rename
|
||||
color-bg-btn-danger-pressed-selected: $color-red-600, //deprecated
|
||||
color-bg-btn-danger-disabled: $color-grey-1000, //rename
|
||||
color-outline-btn-danger-focus: $color-white, //rename
|
||||
|
||||
// Layout Buttons
|
||||
color-bg-btn-layout-rest: $color-grey-1500, //deprecated
|
||||
color-bg-btn-layout-hover: $color-grey-700, //deprecated
|
||||
color-bg-btn-layout-focus: $color-grey-1400, //deprecated
|
||||
color-bg-btn-layout-pressed-selected: $color-grey-1000, //deprecated
|
||||
color-bg-btn-layout-disabled: $color-grey-1100, //deprecated
|
||||
color-bg-btn-layout-header-pressed-selected: $color-grey-1200, //deprecated
|
||||
color-bg-btn-layout-sidenavbar-pressed-selected: $color-grey-1200, //deprecated
|
||||
color-border-btn-layout-rest: $color-blue-100, //deprecated
|
||||
color-border-btn-layout-hover: $color-grey-700, //deprecated
|
||||
color-border-btn-layout-focus: $color-white, //deprecated
|
||||
color-border-btn-layout-pressed-selected: $color-grey-1000, //deprecated
|
||||
color-border-btn-layout-disabled: $color-grey-1100, //deprecated
|
||||
color-border-btn-layout-header-pressed-selected: $color-grey-1200, //deprecated
|
||||
color-border-btn-layout-sidenavbar-pressed-selected: $color-grey-1200, //deprecated
|
||||
|
||||
// Hyperlinks
|
||||
color-text-hyperlink-rest: $color-blue-500,
|
||||
color-text-hyperlink-hover: $color-blue-600,
|
||||
color-text-hyperlink-focus: $color-blue-600,
|
||||
color-text-hyperlink-disabled: $color-grey-500,
|
||||
color-border-hyperlink-focus: $color-grey-600, //deprecated
|
||||
|
||||
// Loading
|
||||
color-bg-loader-panel: $color-grey-1000,
|
||||
color-bg-loader-spinner: $color-white,
|
||||
color-border-loader-global-segment: $color-blue-100,
|
||||
color-border-loader-global-track: $color-grey-300,
|
||||
|
||||
// Upload
|
||||
color-bg-upload: $color-grey-1300,
|
||||
color-border-upload: $color-grey-700,
|
||||
|
||||
// Tabs
|
||||
color-text-pivot-tab-device-rest: $color-grey-400, //rename
|
||||
color-text-pivot-tab-device-hover: $color-white, //rename
|
||||
color-text-pivot-tab-device-focus: $color-white, //rename
|
||||
color-text-pivot-tab-device-press: $color-grey-100, //rename
|
||||
color-text-pivot-tab-device-selected: $color-white, //rename
|
||||
color-border-pivot-tab: $color-blue-100, //rename
|
||||
|
||||
// Charts
|
||||
color-chart-X-Y-lines: $color-grey-400, //rename
|
||||
color-chart-gap-stroke: $color-grey-500,
|
||||
|
||||
// Alerts
|
||||
color-bg-alert-error: $color-error-global-100,
|
||||
color-bg-alert-info: $color-information-200,
|
||||
color-bg-alert-warning: $color-warning-100,
|
||||
color-bg-alert-error-close-hover: $color-red-1100, //deprecated
|
||||
color-bg-alert-info-close-hover: $color-grey-700, //deprecated
|
||||
color-bg-alert-warning-close-hover: $color-yellow-600, //deprecated
|
||||
|
||||
// Color picker
|
||||
color-picker-border-inner: $color-white, //rename
|
||||
color-picker-border-outer: $color-error-global-100, //rename
|
||||
|
||||
// Data color
|
||||
data-color-1: $color-green-100,
|
||||
data-color-2: $color-green-200,
|
||||
data-color-3: $color-green-300,
|
||||
data-color-4: $color-green-400,
|
||||
data-color-5: $color-green-500,
|
||||
data-color-6: $color-green-600,
|
||||
data-color-7: $color-lightgrey-100,
|
||||
data-color-8: $color-lightgrey-200,
|
||||
data-color-9: $color-lightgrey-300,
|
||||
data-color-10: $color-lightgrey-400,
|
||||
data-color-11: $color-lightgrey-500,
|
||||
data-color-12: $color-lightgrey-600,
|
||||
data-color-13: $color-red-100,
|
||||
data-color-14: $color-red-200,
|
||||
data-color-15: $color-red-300,
|
||||
data-color-16: $color-red-400,
|
||||
data-color-17: $color-red-500,
|
||||
data-color-18: $color-red-600,
|
||||
data-color-19: $color-yellow-100,
|
||||
data-color-20: $color-yellow-200,
|
||||
data-color-21: $color-yellow-300,
|
||||
data-color-22: $color-yellow-400,
|
||||
data-color-23: $color-yellow-500,
|
||||
data-color-24: $color-yellow-600,
|
||||
data-color-25: $color-lightblue-100,
|
||||
data-color-26: $color-lightblue-200,
|
||||
data-color-27: $color-lightblue-300,
|
||||
data-color-28: $color-lightblue-400,
|
||||
data-color-29: $color-lightblue-500,
|
||||
data-color-30: $color-lightblue-600,
|
||||
data-color-31: $color-orange-100,
|
||||
data-color-32: $color-orange-200,
|
||||
data-color-33: $color-orange-300,
|
||||
data-color-34: $color-orange-400,
|
||||
data-color-35: $color-orange-500,
|
||||
data-color-36: $color-orange-600,
|
||||
data-color-37: $color-purple-100,
|
||||
data-color-38: $color-purple-200,
|
||||
data-color-39: $color-purple-300,
|
||||
data-color-40: $color-purple-400,
|
||||
data-color-41: $color-purple-500,
|
||||
data-color-42: $color-purple-600,
|
||||
|
||||
), $theme-dark);
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
/**
|
||||
* Default Dark Theme Colors
|
||||
*/
|
||||
|
||||
:root[theme='fluent-dark'] {
|
||||
// Shell
|
||||
--color-bg-navbar: var(--color-grey-90);
|
||||
--color-bg-navbar-hover: var(--color-grey-30);
|
||||
--color-bg-navbar-selected: var(--color-white);
|
||||
--color-bg-navbar-selected-hover: var(--color-grey-30);
|
||||
--color-bg-header: var(--color-white);
|
||||
--color-bg-header-hover: var(--color-grey-20);
|
||||
--color-bg-masthead: var(--color-grey-60);
|
||||
--color-bg-masthead-hover: var(--color-text-20);
|
||||
--color-outline-masthead: var(--color-white);
|
||||
--color-border-masthead-focus: var(--color-white);
|
||||
--color-border-navbar-focus: var(--color-black);
|
||||
|
||||
// Surfaces
|
||||
--color-bg-panel: var(--color-grey-10);
|
||||
--color-bg-container: var(--color-black);
|
||||
--color-bg-container-panel: var(--color-wblack);
|
||||
--color-border-container-panel: var(--color-grey-40);
|
||||
--shadow-container-panel: 0 25.6px 57.6px 0 rgba(0, 0, 0, .12);
|
||||
--color-bg-cmdbar: var(--color-white);
|
||||
--color-bg-titlebar: var(--color-grey-40);
|
||||
--color-border-panel: var(--color-grey-40);
|
||||
--color-border-grid: var(--color-grey-40);
|
||||
|
||||
// Controls
|
||||
--color-bg-blastshield: var(--color-black); //primary opacity
|
||||
--color-bg-balloon: var(--color-white);
|
||||
--color-bg-form: var(--color-white);
|
||||
--color-bg-table: var(--color-white);
|
||||
--color-bg-searchbar-active: var(--color-white);
|
||||
--color-bg-searchbar-rest: var(--color-white); //at 30% opacity
|
||||
--color-bg-searchbar-focus: var(--color-white);
|
||||
|
||||
// Interactions
|
||||
--color-bg-hover: var(--color-grey-20);
|
||||
--color-bg-selected: var(--color-grey-30);
|
||||
|
||||
// All Tiles
|
||||
--color-border-tile: var(--color-grey-30); // 0.5px border
|
||||
--color-border-tile-hover: var(--color-blue-10);
|
||||
|
||||
// Gallery Tiles
|
||||
--color-bg-gallery-tile-top: var(--color-white);
|
||||
--color-bg-gallery-tile-bottom: var(--color-blue-10);
|
||||
|
||||
// Dashboard Tiles
|
||||
--color-bg-dashboard: var(--color-grey-10);
|
||||
--color-tile-symbol: var(--color-text-10);
|
||||
--color-stroke-tile-symbol: var(--color-text-10);
|
||||
|
||||
// Input Fields
|
||||
--color-bg-input-rest: var(--color-white);
|
||||
--color-bg-input-hover: var(--color-white);
|
||||
--color-bg-input-selected: var(--color-white);
|
||||
--color-bg-input-disabled: var(--color-grey-30);
|
||||
|
||||
--color-border-input-hover: var(--color-text-20);
|
||||
--color-border-input-selected: var(--color-blue-10);
|
||||
--color-border-input-error: var(--color-status-30);
|
||||
|
||||
--color-text-regular: var(--color-text-10);
|
||||
--color-text-placeholder: var(--color-text-20);
|
||||
|
||||
// Dropdowns
|
||||
--color-dropdown-rest: var(--color-white);
|
||||
--color-dropdown-hover: var(--color-grey-30);
|
||||
--color-dropdown-focus: var(--color-grey-30);
|
||||
--color-dropdown-pressed: var(--color-grey-40);
|
||||
--color-dropdown-disabled: var(--color-grey-30);
|
||||
--color-border-dropdown-rest: var(--color-blue-10);
|
||||
--color-border-dropdown-focus: var(--color-text-20);
|
||||
--color-text-dropdown-disabled: var(--color-text-30);
|
||||
|
||||
// Radio button
|
||||
--color-bg-radio-rest: var(--color-white);
|
||||
--color-bg-radio-hover: var(--color-white);
|
||||
--color-bg-radio-selected: var(--color-white);
|
||||
--color-bg-radio-focused: var(--color-white);
|
||||
--color-bg-radio-disabled: var(--color-white);
|
||||
--color-border-radio-rest: var(--color-text-10);
|
||||
--color-border-radio-hover: var(--color-text-10);
|
||||
--color-border-radio-selected: var(--color-blue-10);
|
||||
--color-border-radio-focused: var(--color-text-10);
|
||||
--color-border-radio-disabled: var(--color-text-30);
|
||||
--color-center-radio-hover: var(--color-blue-10); //On hover center will reduce to 2px circle
|
||||
--color-center-radio-selected: var(--color-blue-20); //On selected center will return to normal size
|
||||
--color-center-radio-disabled: var(--color-text-30);
|
||||
|
||||
// Toggle
|
||||
--color-bg-toggle-on-rest: var(--color-blue-10);
|
||||
--color-bg-toggle-off-rest: var(--color-white);
|
||||
--color-bg-toggle-on-hover: var(--color-blue-30);
|
||||
--color-bg-toggle-off-hover: var(--color-white);
|
||||
--color-bg-toggle-on-focus: var(--color-blue-10);
|
||||
--color-bg-toggle-off-focus: var(--color-white);
|
||||
--color-bg-toggle-on-disabled: var(--color-text-30);
|
||||
--color-bg-toggle-off-disabled: var(--color-grey-30);
|
||||
--color-border-toggle-on-rest: var(--color-white);
|
||||
--color-border-toggle-off-rest: var(--color-text-20);
|
||||
--color-border-toggle-on-hover: var(--color-text-20);
|
||||
--color-border-toggle-off-hover: var(--color-text-20);
|
||||
--color-border-toggle-on-focus: var(--color-white);
|
||||
--color-border-toggle-off-focus: var(--color-text-20);
|
||||
--color-border-toggle-on-disabled: var(--color-text-30);
|
||||
--color-border-toggle-off-disabled: var(--color-text-20);
|
||||
--color-circle-toggle-on-rest: var(--color-white);
|
||||
--color-circle-toggle-off-rest: var(--color-black);
|
||||
--color-circle-toggle-on-hover: var(--color-white); //Size circle reduce to have
|
||||
--color-circle-toggle-off-hover: var(--color-blue-30);
|
||||
--color-circle-toggle-on-focus: var(--color-white);
|
||||
--color-circle-toggle-off-focus: var(--color-black);
|
||||
--color-circle-toggle-on-disabled: var(--color-text-20);
|
||||
--color-circle-toggle-off-disabled: var(--color-text-20);
|
||||
|
||||
// Checkbox
|
||||
--color-bg-checkbox-focused: var(--color-color-white);
|
||||
--color-bg-checkbox-selected-hover: var(--color-blue-30);
|
||||
--color-bg-checkbox-pressed: var(--color-blue-10);
|
||||
--color-bg-checkbox-disabled: var(--color-grey-20);
|
||||
--color-border-checkbox-hover: var(--color-text-10);
|
||||
--color-border-checkbox-focused: var(--color-text-10);
|
||||
--color-border-checkbox-selected-hover: var(--color-blue-30);
|
||||
--color-border-checkbox-pressed-selected: var(--color-blue-10);
|
||||
--color-border-checkbox-disabled-selected: var(--color-text-30);
|
||||
--color-border-checkbox-disabled: var(--color-text-30);
|
||||
|
||||
// General Borders
|
||||
--color-border-rest: var(--color-grey-40);
|
||||
--color-border-hover: var(--color-blue-10);
|
||||
--color-border-focus: var(--color-black);
|
||||
--color-border-selected: var(--color-blue-10);
|
||||
--color-border-disabled: var(--color-text-30);
|
||||
--color-border-error: var(--color-status-30);
|
||||
--color-border-controls: var(--color-blue-10);
|
||||
--color-outline: var(--color-blue-10);
|
||||
|
||||
// General Texts
|
||||
--color-text-rest: var(--color-text-10);
|
||||
--color-text-chevron: var(--color-text-20);
|
||||
--color-text-error: var(--color-status-30);
|
||||
--color-text-required: var(--color-text-20);
|
||||
--color-text-nodata: var(--color-text-20);
|
||||
--color-text-disabled: var(--color-text-30);
|
||||
--color-text-masthead: var(--color-white);
|
||||
--color-text-navbar: var(--color-text-rest);
|
||||
|
||||
// Buttons
|
||||
--color-bg-btn-standard-rest: var(--color-grey-20);
|
||||
--color-bg-btn-standard-hover: var(--color-grey-30);
|
||||
--color-bg-btn-standard-focus: var(--color-grey-20);
|
||||
--color-bg-btn-standard-selected: var(--color-grey-40);
|
||||
--color-bg-btn-standard-disabled: var(--color-text-30);
|
||||
|
||||
--color-bg-btn-primary-rest: var(--color-blue-10);
|
||||
--color-bg-btn-primary-hover: var(--color-blue-20);
|
||||
--color-bg-btn-primary-focus: var(--color-blue-10);
|
||||
--color-bg-btn-primary-selected: var(--color-blue-30);
|
||||
--color-bg-btn-primary-disabled: var(--color-text-20);
|
||||
--color-outline-btn-primary-focus: var(--color-white);
|
||||
|
||||
--color-bg-btn-negative-rest: var(--color-status-30);
|
||||
--color-bg-btn-negative-hover: var(--color-status-30);
|
||||
--color-bg-btn-negative-focus: var(--color-status-30);
|
||||
--color-bg-btn-negative-disabled: var(--color-text-30);
|
||||
--color-outline-btn-negative-focus: var(--color-white);
|
||||
|
||||
// Hyperlinks
|
||||
--color-hyperlink-rest: var(--color-blue-20);
|
||||
--color-hyperlink-hover: var(--color-blue-30);
|
||||
--color-hyperlink-focus: var(--color-blue-20);
|
||||
--color-hyperlink-disabled: var(--color-text-30);
|
||||
|
||||
// Loading
|
||||
--color-bg-loader-panel: var(--color-grey-20);
|
||||
--color-bg-loader-spinner: var(--color-blue-10);
|
||||
--color-border-loader-global-segment: var(--color-blue-10);
|
||||
--color-border-loader-global-track: var(--color-grey-40);
|
||||
|
||||
// Upload
|
||||
--color-bg-upload: var(--color-grey-20);
|
||||
--color-border-upload: var(--color-grey-30);
|
||||
|
||||
// Tabs
|
||||
--color-pivot-rest: var(--color-text-20);
|
||||
--color-pivot-hover: var(--color-text-10);
|
||||
--color-pivot-focus: var(--color-text-10);
|
||||
--color-pivot-press: var(--color-black);
|
||||
--color-pivot-selected: var(--color-text-10);
|
||||
--color-border-pivot: var(--color-blue-10);
|
||||
|
||||
// Charts
|
||||
--color-chart-xy-lines: var(--color-grey-40);
|
||||
--color-chart-gap-stroke: var(--color-text-30);
|
||||
|
||||
// Alerts
|
||||
--color-bg-alert-error: var(--color-status-30);
|
||||
--color-bg-alert-info: var(--color-status-10);
|
||||
--color-bg-alert-warning: var(--color-status-20);
|
||||
|
||||
// Color picker
|
||||
--color-border-colorpicker-in: var(--color-white);
|
||||
--color-border-colorpicker-out: var(--color-text-20);
|
||||
}
|
||||
|
|
@ -2,297 +2,209 @@
|
|||
* Default Light Theme Colors
|
||||
*/
|
||||
|
||||
@import "../color.palette";
|
||||
|
||||
|
||||
// Theme map
|
||||
|
||||
$theme-light: () !default;
|
||||
$theme-light: map-merge((
|
||||
|
||||
// Layouts
|
||||
color-bg-navbar: $color-grey-900,
|
||||
color-bg-navbar-hover: $color-grey-550,
|
||||
color-bg-navbar-selected: $color-grey-1100,
|
||||
color-bg-navbar-hover-selected: $color-black,
|
||||
color-bg-header: $color-grey-100,
|
||||
color-bg-header-hover: $color-grey-600,
|
||||
color-bg-masthead: $color-grey-1300,
|
||||
color-bg-masthead-hover: $color-grey-600,
|
||||
color-border-masthead-item: $color-grey-500,
|
||||
color-border-navbar-separator: $color-grey-300,
|
||||
color-border-masthead-focus: $color-white,
|
||||
color-border-navbar-focus: $color-white,
|
||||
// light theme is the default, therefore store everything in root
|
||||
// without any attribute
|
||||
:root {
|
||||
// Shell
|
||||
--color-bg-navbar: var(--color-grey-70);
|
||||
--color-bg-navbar-hover: var(--color-grey-55);
|
||||
--color-bg-navbar-selected: var(--color-grey-11);
|
||||
--color-bg-navbar-selected-hover: var(--color-black);
|
||||
--color-bg-header: var(--color-grey-1);
|
||||
--color-bg-header-hover: var(--color-text-20);
|
||||
--color-bg-masthead: var(--color-grey-80);
|
||||
--color-bg-masthead-hover: var(--color-text-20);
|
||||
--color-outline-masthead: var(--color-white);
|
||||
--color-border-masthead-focus: var(--color-white);
|
||||
--color-border-navbar-focus: var(--color-white);
|
||||
|
||||
// Surfaces
|
||||
color-bg-panel-primary: $color-grey-100,
|
||||
color-bg-panel-secondary: $color-grey-100,
|
||||
color-bg-content: $color-grey-100,
|
||||
color-bg-panel-contextual: $color-white,
|
||||
color-border-panel-contextual-separator: $color-grey-300,
|
||||
shadow-panel-contextual: 0 25.6px 57.6px 0 rgba(0, 0, 0, .12),
|
||||
color-bg-action-bar: $color-grey-100,
|
||||
color-bg-title-bar: $color-grey-300,
|
||||
color-border-panel: $color-grey-300,
|
||||
color-border-grid: $color-grey-300,
|
||||
--color-bg-panel: var(--color-grey-1);
|
||||
--color-bg-container: var(--color-grey-1);
|
||||
--color-bg-container-panel: var(--color-white);
|
||||
--color-border-container-panel: var(--color-grey-40);
|
||||
--shadow-container-panel: 0 25.6px 57.6px 0 rgba(0, 0, 0, .12);
|
||||
--color-bg-cmdbar: var(--color-grey-1);
|
||||
--color-bg-titlebar: var(--color-grey-40);
|
||||
--color-border-panel: var(--color-grey-40);
|
||||
--color-border-grid: var(--color-grey-40);
|
||||
|
||||
// Controls
|
||||
color-bg-blastshield: $color-black-transparent-primary,
|
||||
color-bg-balloon: $color-white,
|
||||
color-bg-form: $color-white,
|
||||
color-bg-table: $color-white,
|
||||
color-bg-searchbar: $color-white,
|
||||
color-bg-searchbar-rest: $color-grey-400,
|
||||
color-bg-searchbar-focus: $color-white,
|
||||
color-bg-guidance: $color-blue-300,
|
||||
color-bg-thumbnail: $color-grey-600,
|
||||
color-text-thumbnail: $color-grey-100,
|
||||
--color-bg-blastshield: var(--color-black-transparent-primary);
|
||||
--color-bg-balloon: var(--color-white);
|
||||
--color-bg-form: var(--color-white);
|
||||
--color-bg-table: var(--color-white);
|
||||
--color-bg-searchbar-active: var(--color-white);
|
||||
--color-bg-searchbar-rest: var(--color-grey-4);
|
||||
--color-bg-searchbar-focus: var(--color-white);
|
||||
|
||||
// Interactions
|
||||
color-bg-item-hover: $color-grey-200,
|
||||
color-bg-item-selected: $color-grey-300,
|
||||
--color-bg-hover: var(--color-grey-30);
|
||||
--color-bg-selected: var(--color-grey-40);
|
||||
|
||||
// All Tiles
|
||||
color-border-tile: $color-grey-300,
|
||||
color-border-tile-hover: $color-blue-100,
|
||||
--color-border-tile: var(--color-grey-40); // 0.5px border
|
||||
--color-border-tile-hover: var(--color-blue-10);
|
||||
|
||||
// Gallery Tiles
|
||||
color-bg-gallery-tile: $color-white,
|
||||
color-bg-gallery-tile-banner: $color-black,
|
||||
color-bg-gallery-tile-default: $color-grey-200,
|
||||
color-bg-gallery-tile-blue: $color-blue-100,
|
||||
color-bg-gallery-tile-red: $color-red-500,
|
||||
color-bg-gallery-tile-yellow: $color-yellow-500,
|
||||
--color-bg-gallery-tile-top: var(--color-white);
|
||||
--color-bg-gallery-tile-bottom: var(--color-blue-10); // Duplicated?
|
||||
|
||||
// Dashboard Tiles
|
||||
color-bg-dashboard-tile: $color-grey-100,
|
||||
color-fill-tile-symbol: $color-grey-1200,
|
||||
color-stroke-tile-symbol: $color-grey-1200,
|
||||
--color-bg-dashboard: var(--color-grey-1);
|
||||
--color-tile-symbol: var(--color-text-10);
|
||||
--color-stroke-tile-symbol: var(--color-grey-12);
|
||||
|
||||
// Input Fields
|
||||
color-bg-input-rest: $color-white,
|
||||
color-bg-input-hover: $color-white,
|
||||
color-bg-input-selected: $color-white,
|
||||
color-bg-input-disabled: $color-grey-200,
|
||||
--color-bg-input-rest: var(--color-white);
|
||||
--color-bg-input-hover: var(--color-white);
|
||||
--color-bg-input-selected: var(--color-white);
|
||||
--color-bg-input-disabled: var(--color-grey-30);
|
||||
|
||||
color-border-input-rest: $color-grey-300,
|
||||
color-border-input-hover: $color-grey-600,
|
||||
color-border-input-selected: $color-blue-100,
|
||||
color-border-input-error: $color-error-local-200,
|
||||
--color-border-input-hover: var(--color-text-20);
|
||||
--color-border-input-selected: var(--color-blue-10);
|
||||
--color-border-input-error: var(--color-status-30);
|
||||
|
||||
color-text-clear: $color-black,
|
||||
color-text-placeholder: $color-grey-400,
|
||||
--color-text-regular: var(--color-black);
|
||||
--color-text-placeholder: var(--color-grey-4);
|
||||
|
||||
// Dropdowns
|
||||
color-dropdown-rest: $color-white,
|
||||
color-dropdown-hover: $color-grey-100,
|
||||
color-dropdown-focus: $color-grey-100,
|
||||
color-dropdown-pressed: $color-grey-200,
|
||||
color-dropdown-disabled: $color-white,
|
||||
color-border-dropdown-rest: $color-blue-100,
|
||||
color-border-dropdown-focus: $color-grey-600,
|
||||
color-dropdown-disabled-text: $color-grey-400,
|
||||
--color-dropdown-rest: var(--color-white);
|
||||
--color-dropdown-hover: var(--color-grey-1);
|
||||
--color-dropdown-focus: var(--color-grey-1);
|
||||
--color-dropdown-pressed: var(--color-grey-30);
|
||||
--color-dropdown-disabled: var(--color-white);
|
||||
--color-border-dropdown-rest: var(--color-blue-10);
|
||||
--color-border-dropdown-focus: var(--color-text-20);
|
||||
--color-text-dropdown-disabled: var(--color-grey-4);
|
||||
|
||||
// Radio button
|
||||
color-bg-radio-btn-rest: $color-white,
|
||||
color-bg-radio-btn-hover: $color-white,
|
||||
color-bg-radio-btn-selected: $color-white,
|
||||
color-bg-radio-btn-focused: $color-white,
|
||||
color-bg-radio-btn-disabled: $color-white,
|
||||
color-border-radio-btn-rest: $color-grey-1200,
|
||||
color-border-radio-btn-hover: $color-grey-1200,
|
||||
color-border-radio-btn-selected: $color-blue-100,
|
||||
color-border-radio-btn-focused: $color-grey-1200,
|
||||
color-border-radio-btn-disabled: $color-grey-300,
|
||||
color-center-radio-btn-hover: $color-grey-400,
|
||||
color-center-radio-btn-selected: $color-grey-1200,
|
||||
color-center-radio-btn-disabled: $color-grey-300,
|
||||
--color-bg-radio-rest: var(--color-white);
|
||||
--color-bg-radio-hover: var(--color-white);
|
||||
--color-bg-radio-selected: var(--color-white);
|
||||
--color-bg-radio-focused: var(--color-white);
|
||||
--color-bg-radio-disabled: var(--color-white);
|
||||
--color-border-radio-rest: var(--color-grey-12);
|
||||
--color-border-radio-hover: var(--color-grey-12);
|
||||
--color-border-radio-selected: var(--color-blue-10);
|
||||
--color-border-radio-focused: var(--color-grey-12);
|
||||
--color-border-radio-disabled: var(--color-text-40);
|
||||
--color-center-radio-hover: var(--color-grey-4); //On hover center will reduce to 2px circle
|
||||
--color-center-radio-selected: var(--color-grey-12); //On selected center will return to normal size
|
||||
--color-center-radio-disabled: var(--color-grey-40);
|
||||
|
||||
// Toggle
|
||||
color-bg-toggle-btn-rest-on: $color-blue-500,
|
||||
color-bg-toggle-btn-rest-off: $color-white,
|
||||
color-bg-toggle-btn-hover-on: $color-blue-300,
|
||||
color-bg-toggle-btn-hover-off: $color-white,
|
||||
color-bg-toggle-btn-focus-on: $color-blue-500,
|
||||
color-bg-toggle-btn-focus-off: $color-white,
|
||||
color-bg-toggle-btn-disabled-on: $color-grey-300,
|
||||
color-bg-toggle-btn-disabled-off: $color-grey-100,
|
||||
color-border-toggle-btn-rest-on: $color-white,
|
||||
color-border-toggle-btn-rest-off: $color-grey-600,
|
||||
color-border-toggle-btn-hover-on: $color-white,
|
||||
color-border-toggle-btn-hover-off: $color-grey-600,
|
||||
color-border-toggle-btn-focus-on: $color-white,
|
||||
color-border-toggle-btn-focus-off: $color-grey-600,
|
||||
color-border-toggle-btn-disabled-on: $color-grey-300,
|
||||
color-border-toggle-btn-disabled-off: $color-grey-500,
|
||||
color-circle-toggle-btn-rest-on: $color-white,
|
||||
color-circle-toggle-btn-rest-off: $color-grey-1200,
|
||||
color-circle-toggle-btn-hover-on: $color-white,
|
||||
color-circle-toggle-btn-hover-off: $color-blue-300,
|
||||
color-circle-toggle-btn-focus-on: $color-white,
|
||||
color-circle-toggle-btn-focus-off: $color-grey-1200,
|
||||
color-circle-toggle-btn-disabled-on: $color-grey-500,
|
||||
color-circle-toggle-btn-disabled-off: $color-grey-500,
|
||||
--color-bg-toggle-on-rest: var(--color-blue-50);
|
||||
--color-bg-toggle-off-rest: var(--color-white);
|
||||
--color-bg-toggle-on-hover: var(--color-blue-30);
|
||||
--color-bg-toggle-off-hover: var(--color-white);
|
||||
--color-bg-toggle-on-focus: var(--color-blue-50);
|
||||
--color-bg-toggle-off-focus: var(--color-white);
|
||||
--color-bg-toggle-on-disabled: var(--color-grey-40);
|
||||
--color-bg-toggle-off-disabled: var(--color-grey-1);
|
||||
--color-border-toggle-on-rest: var(--color-white);
|
||||
--color-border-toggle-off-rest: var(--color-text-20);
|
||||
--color-border-toggle-on-hover: var(--color-white);
|
||||
--color-border-toggle-off-hover: var(--color-text-20);
|
||||
--color-border-toggle-on-focus: var(--color-white);
|
||||
--color-border-toggle-off-focus: var(--color-text-20);
|
||||
--color-border-toggle-on-disabled: var(--color-grey-40);
|
||||
--color-border-toggle-off-disabled: var(--color-text-30);
|
||||
--color-circle-toggle-on-rest: var(--color-white);
|
||||
--color-circle-toggle-off-rest: var(--color-grey-12);
|
||||
--color-circle-toggle-on-hover: var(--color-white); //Size circle reduce to half
|
||||
--color-circle-toggle-off-hover: var(--color-blue-30);
|
||||
--color-circle-toggle-on-focus: var(--color-white);
|
||||
--color-circle-toggle-off-focus: var(--color-grey-12);
|
||||
--color-circle-toggle-on-disabled: var(--color-text-30);
|
||||
--color-circle-toggle-off-disabled: var(--color-text-30);
|
||||
|
||||
// Checkbox
|
||||
color-bg-checkbox-focused: $color-white,
|
||||
color-bg-checkbox-selected-hover: $color-blue-300,
|
||||
color-bg-checkbox-pressed-selected: $color-blue-100,
|
||||
color-bg-checkbox-disabled: $color-white,
|
||||
color-border-checkbox-hover: $color-grey-1200,
|
||||
color-border-checkbox-focused: $color-grey-1200,
|
||||
color-border-checkbox-selected-hover: $color-blue-300,
|
||||
color-border-checkbox-pressed-selected: $color-blue-100,
|
||||
color-border-checkbox-disabled-selected: $color-grey-300,
|
||||
color-border-checkbox-disabled: $color-grey-300,
|
||||
|
||||
// Calendar
|
||||
color-bg-calendar-btn-current: $color-blue-100,
|
||||
color-bg-calendar-btn-hover: $color-grey-200,
|
||||
color-bg-calendar-btn-focus: $color-transparent,
|
||||
color-border-calendar-btn-focus: $color-grey-600,
|
||||
--color-bg-checkbox-focused: var(--color-color-white);
|
||||
--color-bg-checkbox-selected-hover: var(--color-blue-30);
|
||||
--color-bg-checkbox-pressed: var(--color-blue-10);
|
||||
--color-bg-checkbox-disabled: var(--color-white);
|
||||
--color-border-checkbox-hover: var(--color-grey-12);
|
||||
--color-border-checkbox-focused: var(--color-grey-12);
|
||||
--color-border-checkbox-selected-hover: var(--color-blue-30);
|
||||
--color-border-checkbox-pressed-selected: var(--color-blue-10);
|
||||
--color-border-checkbox-disabled-selected: var(--color-grey-40);
|
||||
--color-border-checkbox-disabled: var(--color-grey-40);
|
||||
|
||||
// General Borders
|
||||
color-border-rest: $color-grey-300,
|
||||
color-border-hover: $color-blue-100,
|
||||
color-border-focus: $color-black,
|
||||
color-border-selected: $color-blue-100,
|
||||
color-border-disabled: $color-grey-500,
|
||||
color-border-error: $color-error-local-200,
|
||||
color-border-controls: $color-blue-100,
|
||||
--color-border-rest: var(--color-grey-40);
|
||||
--color-border-hover: var(--color-blue-10);
|
||||
--color-border-focus: var(--color-black);
|
||||
--color-border-selected: var(--color-blue-10);
|
||||
--color-border-disabled: var(--color-text-30);
|
||||
--color-border-error: var(--color-status-30);
|
||||
--color-border-controls: var(--color-blue-10);
|
||||
--color-outline: var(--color-black);
|
||||
|
||||
// General Texts
|
||||
color-text-rest: $color-black,
|
||||
color-text-chevron: $color-grey-600,
|
||||
color-text-error: $color-error-local-200,
|
||||
color-text-required: $color-error-local-200,
|
||||
color-text-visited: $color-blue-400,
|
||||
color-text-nodata: $color-grey-400,
|
||||
color-text-disabled: $color-grey-500,
|
||||
color-text-white: $color-white,
|
||||
color-text-black: $color-black,
|
||||
--color-text-rest: var(--color-black);
|
||||
--color-text-chevron: var(--color-text-20);
|
||||
--color-text-error: var(--color-status-30);
|
||||
--color-text-required: var(--color-status-30);
|
||||
--color-text-nodata: var(--color-grey-4);
|
||||
--color-text-disabled: var(--color-text-30);
|
||||
--color-text-masthead: var(--color-white);
|
||||
--color-text-navbar: var(--color-white);
|
||||
|
||||
// Buttons
|
||||
color-bg-btn-standard-rest: $color-grey-200,
|
||||
color-bg-btn-standard-hover: $color-grey-300,
|
||||
color-bg-btn-standard-focus: $color-grey-300,
|
||||
color-bg-btn-standard-pressed-selected: $color-grey-400,
|
||||
color-bg-btn-standard-disabled: $color-grey-200,
|
||||
--color-bg-btn-standard-rest: var(--color-grey-30);
|
||||
--color-bg-btn-standard-hover: var(--color-grey-40);
|
||||
--color-bg-btn-standard-focus: var(--color-grey-40);
|
||||
--color-bg-btn-standard-selected: var(--color-grey-4);
|
||||
--color-bg-btn-standard-disabled: var(--color-text-30);
|
||||
|
||||
color-bg-btn-primary-rest: $color-blue-100,
|
||||
color-bg-btn-primary-hover: $color-blue-200,
|
||||
color-bg-btn-primary-focus: $color-blue-200,
|
||||
color-bg-btn-primary-pressed-selected: $color-blue-300,
|
||||
color-bg-btn-primary-disabled: $color-grey-200,
|
||||
color-outline-btn-primary-focus: $color-white,
|
||||
--color-bg-btn-primary-rest: var(--color-blue-10);
|
||||
--color-bg-btn-primary-hover: var(--color-blue-20);
|
||||
--color-bg-btn-primary-focus: var(--color-blue-20);
|
||||
--color-bg-btn-primary-selected: var(--color-blue-30);
|
||||
--color-bg-btn-primary-disabled: var(--color-grey-30);
|
||||
--color-outline-btn-primary-focus: var(--color-white);
|
||||
|
||||
color-bg-btn-danger-rest: $color-red-400,
|
||||
color-bg-btn-danger-hover: $color-red-500,
|
||||
color-bg-btn-danger-focus: $color-red-500,
|
||||
color-bg-btn-danger-pressed-selected: $color-red-600,
|
||||
color-bg-btn-danger-disabled: $color-grey-200,
|
||||
color-outline-btn-danger-focus: $color-white,
|
||||
|
||||
// Layout Buttons
|
||||
color-bg-btn-layout-rest: $color-white,
|
||||
color-bg-btn-layout-hover: $color-grey-600,
|
||||
color-bg-btn-layout-focus: $color-grey-100,
|
||||
color-bg-btn-layout-pressed-selected: $color-grey-300,
|
||||
color-bg-btn-layout-disabled: $color-grey-200,
|
||||
color-bg-btn-layout-header-pressed-selected: $color-grey-1200,
|
||||
color-bg-btn-layout-sidenavbar-pressed-selected: $color-grey-1200,
|
||||
color-border-btn-layout-rest: $color-blue-100,
|
||||
color-border-btn-layout-hover: $color-grey-600,
|
||||
color-border-btn-layout-focus: $color-grey-600,
|
||||
|
||||
color-border-btn-layout-pressed-selected: $color-grey-300,
|
||||
color-border-btn-layout-disabled: $color-grey-200,
|
||||
color-border-btn-layout-header-pressed-selected: $color-grey-1200,
|
||||
color-border-btn-layout-sidenavbar-pressed-selected: $color-grey-1200,
|
||||
--color-bg-btn-negative-rest: var(--color-red-4);
|
||||
--color-bg-btn-negative-hover: var(--color-red-5);
|
||||
--color-bg-btn-negative-focus: var(--color-red-5);
|
||||
--color-bg-btn-negative-disabled: var(--color-grey-30);
|
||||
--color-outline-btn-negative-focus: var(--color-white);
|
||||
|
||||
// Hyperlinks
|
||||
color-text-hyperlink-rest: $color-blue-200,
|
||||
color-text-hyperlink-hover: $color-blue-400,
|
||||
color-text-hyperlink-focus: $color-blue-200,
|
||||
color-text-hyperlink-disabled: $color-grey-500,
|
||||
color-border-hyperlink-focus: $color-grey-600,
|
||||
--color-hyperlink-rest: var(--color-blue-20);
|
||||
--color-hyperlink-hover: var(--color-blue-40);
|
||||
--color-hyperlink-focus: var(--color-blue-20);
|
||||
--color-hyperlink-disabled: var(--color-text-30);
|
||||
|
||||
// Loading
|
||||
color-bg-loader-panel: $color-grey-200,
|
||||
color-bg-loader-spinner: $color-grey-700,
|
||||
color-border-loader-global-segment: $color-blue-100,
|
||||
color-border-loader-global-track: $color-grey-300,
|
||||
--color-bg-loader-panel: var(--color-grey-30);
|
||||
--color-bg-loader-spinner: var(--color-grey-60);
|
||||
--color-border-loader-global-segment: var(--color-blue-10);
|
||||
--color-border-loader-global-track: var(--color-grey-40);
|
||||
|
||||
// Upload
|
||||
color-bg-upload: $color-grey-400,
|
||||
color-border-upload: $color-grey-300,
|
||||
--color-bg-upload: var(--color-grey-4);
|
||||
--color-border-upload: var(--color-grey-40);
|
||||
|
||||
// Tabs
|
||||
color-text-pivot-tab-device-rest: $color-grey-1200,
|
||||
color-text-pivot-tab-device-hover: $color-grey-1200,
|
||||
color-text-pivot-tab-device-focus: $color-grey-1200,
|
||||
color-text-pivot-tab-device-press: $color-black,
|
||||
color-text-pivot-tab-device-selected: $color-grey-1200,
|
||||
color-border-pivot-tab: $color-blue-100,
|
||||
--color-pivot-rest: var(--color-grey-12);
|
||||
--color-pivot-hover: var(--color-grey-12);
|
||||
--color-pivot-focus: var(--color-grey-12);
|
||||
--color-pivot-press: var(--color-black);
|
||||
--color-pivot-selected: var(--color-grey-12);
|
||||
--color-border-pivot: var(--color-blue-10);
|
||||
|
||||
// Charts
|
||||
color-chart-X-Y-lines: $color-grey-400,
|
||||
color-chart-gap-stroke: $color-grey-500,
|
||||
--color-chart-xy-lines: var(--color-grey-4);
|
||||
--color-chart-gap-stroke: var(--color-text-30);
|
||||
|
||||
// Alerts
|
||||
color-bg-alert-error: $color-error-global-100,
|
||||
color-bg-alert-info: $color-information-100,
|
||||
color-bg-alert-warning: $color-warning-100,
|
||||
color-bg-alert-error-close-hover: $color-red-1100,
|
||||
color-bg-alert-info-close-hover: $color-grey-500,
|
||||
color-bg-alert-warning-close-hover: $color-yellow-600,
|
||||
--color-bg-alert-error: var(--color-err-1);
|
||||
--color-bg-alert-info: var(--color-info-1);
|
||||
--color-bg-alert-warning: var(--color-warn-1);
|
||||
|
||||
// Color picker
|
||||
color-picker-border-inner: $color-white,
|
||||
color-picker-border-outer: $color-error-global-100,
|
||||
|
||||
// Data colors
|
||||
data-color-1: $color-green-100,
|
||||
data-color-2: $color-green-700,
|
||||
data-color-3: $color-green-800,
|
||||
data-color-4: $color-green-900,
|
||||
data-color-5: $color-green-1000,
|
||||
data-color-6: $color-green-1100,
|
||||
data-color-7: $color-lightgrey-700,
|
||||
data-color-8: $color-lightgrey-800,
|
||||
data-color-9: $color-lightgrey-900,
|
||||
data-color-10: $color-lightgrey-1000,
|
||||
data-color-11: $color-lightgrey-1100,
|
||||
data-color-12: $color-lightgrey-1200,
|
||||
data-color-13: $color-red-100,
|
||||
data-color-14: $color-red-700,
|
||||
data-color-15: $color-red-800,
|
||||
data-color-16: $color-red-900,
|
||||
data-color-17: $color-red-1000,
|
||||
data-color-18: $color-red-1100,
|
||||
data-color-19: $color-yellow-100,
|
||||
data-color-20: $color-yellow-700,
|
||||
data-color-21: $color-yellow-800,
|
||||
data-color-22: $color-yellow-900,
|
||||
data-color-23: $color-yellow-1000,
|
||||
data-color-24: $color-yellow-1100,
|
||||
data-color-25: $color-lightblue-100,
|
||||
data-color-26: $color-lightblue-700,
|
||||
data-color-27: $color-lightblue-800,
|
||||
data-color-28: $color-lightblue-900,
|
||||
data-color-29: $color-lightblue-1000,
|
||||
data-color-30: $color-lightblue-1100,
|
||||
data-color-31: $color-orange-100,
|
||||
data-color-32: $color-orange-700,
|
||||
data-color-33: $color-orange-800,
|
||||
data-color-34: $color-orange-900,
|
||||
data-color-35: $color-orange-1000,
|
||||
data-color-36: $color-orange-1100,
|
||||
data-color-37: $color-purple-100,
|
||||
data-color-38: $color-purple-700,
|
||||
data-color-39: $color-purple-800,
|
||||
data-color-40: $color-purple-900,
|
||||
data-color-41: $color-purple-1000,
|
||||
data-color-42: $color-purple-1100,
|
||||
|
||||
), $theme-light);
|
||||
--color-border-colorpicker-in: var(--color-white);
|
||||
--color-border-colorpicker-out: var(--color-err-1);
|
||||
}
|
||||
|
|
@ -0,0 +1,298 @@
|
|||
/**
|
||||
* Default Light Theme Colors
|
||||
*/
|
||||
|
||||
@import "../color.palette.deprecated";
|
||||
|
||||
|
||||
// Theme map
|
||||
|
||||
$theme-light: () !default;
|
||||
$theme-light: map-merge((
|
||||
|
||||
// Layouts
|
||||
color-bg-navbar: $color-grey-900,
|
||||
color-bg-navbar-hover: $color-grey-550,
|
||||
color-bg-navbar-selected: $color-grey-1100,
|
||||
color-bg-navbar-hover-selected: $color-black, //rename
|
||||
color-bg-header: $color-grey-100,
|
||||
color-bg-header-hover: $color-grey-600,
|
||||
color-bg-masthead: $color-grey-1300,
|
||||
color-bg-masthead-hover: $color-grey-600,
|
||||
color-border-masthead-item: $color-grey-500, //deprecated
|
||||
color-border-navbar-separator: $color-grey-300, //deprecated
|
||||
color-border-masthead-focus: $color-white,
|
||||
color-border-navbar-focus: $color-white,
|
||||
|
||||
// Surfaces
|
||||
color-bg-panel-primary: $color-grey-100, //rename
|
||||
color-bg-panel-secondary: $color-grey-100, //deprecated
|
||||
color-bg-content: $color-grey-100, //rename
|
||||
color-bg-panel-contextual: $color-white, //rename
|
||||
color-border-panel-contextual-separator: $color-grey-300, //rename
|
||||
shadow-panel-contextual: 0 25.6px 57.6px 0 rgba(0, 0, 0, .12), //rename
|
||||
color-bg-action-bar: $color-grey-100, //rename
|
||||
color-bg-title-bar: $color-grey-300, //rename
|
||||
color-border-panel: $color-grey-300,
|
||||
color-border-grid: $color-grey-300,
|
||||
|
||||
// Controls
|
||||
color-bg-blastshield: $color-black-transparent-primary,
|
||||
color-bg-balloon: $color-white,
|
||||
color-bg-form: $color-white,
|
||||
color-bg-table: $color-white,
|
||||
color-bg-searchbar: $color-white, //rename
|
||||
color-bg-searchbar-rest: $color-grey-400,
|
||||
color-bg-searchbar-focus: $color-white,
|
||||
color-bg-guidance: $color-blue-300, //deprecated
|
||||
color-bg-thumbnail: $color-grey-600, //deprecated
|
||||
color-text-thumbnail: $color-grey-100, //deprecated
|
||||
|
||||
// Interactions
|
||||
color-bg-item-hover: $color-grey-200,
|
||||
color-bg-item-selected: $color-grey-300,
|
||||
|
||||
// All Tiles
|
||||
color-border-tile: $color-grey-300,
|
||||
color-border-tile-hover: $color-blue-100,
|
||||
|
||||
// Gallery Tiles
|
||||
color-bg-gallery-tile: $color-white, //rename
|
||||
color-bg-gallery-tile-banner: $color-black, //deprecated
|
||||
color-bg-gallery-tile-default: $color-grey-200, //deprecated
|
||||
color-bg-gallery-tile-blue: $color-blue-100, //deprecated
|
||||
color-bg-gallery-tile-red: $color-red-500, //deprecated
|
||||
color-bg-gallery-tile-yellow: $color-yellow-500, //deprecated
|
||||
|
||||
// Dashboard Tiles
|
||||
color-bg-dashboard-tile: $color-grey-100, //rename
|
||||
color-fill-tile-symbol: $color-grey-1200, //rename
|
||||
color-stroke-tile-symbol: $color-grey-1200, //rename
|
||||
|
||||
// Input Fields
|
||||
color-bg-input-rest: $color-white,
|
||||
color-bg-input-hover: $color-white,
|
||||
color-bg-input-selected: $color-white,
|
||||
color-bg-input-disabled: $color-grey-200,
|
||||
|
||||
color-border-input-rest: $color-grey-300, //deprecated
|
||||
color-border-input-hover: $color-grey-600,
|
||||
color-border-input-selected: $color-blue-100,
|
||||
color-border-input-error: $color-error-local-200,
|
||||
|
||||
color-text-clear: $color-black, //rename
|
||||
color-text-placeholder: $color-grey-400,
|
||||
|
||||
// Dropdowns
|
||||
color-dropdown-rest: $color-white,
|
||||
color-dropdown-hover: $color-grey-100,
|
||||
color-dropdown-focus: $color-grey-100,
|
||||
color-dropdown-pressed: $color-grey-200,
|
||||
color-dropdown-disabled: $color-white,
|
||||
color-border-dropdown-rest: $color-blue-100,
|
||||
color-border-dropdown-focus: $color-grey-600,
|
||||
color-dropdown-disabled-text: $color-grey-400,
|
||||
|
||||
// Radio button
|
||||
color-bg-radio-btn-rest: $color-white, //rename
|
||||
color-bg-radio-btn-hover: $color-white, //rename
|
||||
color-bg-radio-btn-selected: $color-white, //rename
|
||||
color-bg-radio-btn-focused: $color-white, //rename
|
||||
color-bg-radio-btn-disabled: $color-white, //rename
|
||||
color-border-radio-btn-rest: $color-grey-1200, //rename
|
||||
color-border-radio-btn-hover: $color-grey-1200, //rename
|
||||
color-border-radio-btn-selected: $color-blue-100, //rename
|
||||
color-border-radio-btn-focused: $color-grey-1200, //rename
|
||||
color-border-radio-btn-disabled: $color-grey-300, //rename
|
||||
color-center-radio-btn-hover: $color-grey-400, //rename
|
||||
color-center-radio-btn-selected: $color-grey-1200, //rename
|
||||
color-center-radio-btn-disabled: $color-grey-300, //rename
|
||||
|
||||
// Toggle
|
||||
color-bg-toggle-btn-rest-on: $color-blue-500, //rename
|
||||
color-bg-toggle-btn-rest-off: $color-white, //rename
|
||||
color-bg-toggle-btn-hover-on: $color-blue-300, //rename
|
||||
color-bg-toggle-btn-hover-off: $color-white, //rename
|
||||
color-bg-toggle-btn-focus-on: $color-blue-500, //rename
|
||||
color-bg-toggle-btn-focus-off: $color-white, //rename
|
||||
color-bg-toggle-btn-disabled-on: $color-grey-300, //rename
|
||||
color-bg-toggle-btn-disabled-off: $color-grey-100, //rename
|
||||
color-border-toggle-btn-rest-on: $color-white, //rename
|
||||
color-border-toggle-btn-rest-off: $color-grey-600, //rename
|
||||
color-border-toggle-btn-hover-on: $color-white, //rename
|
||||
color-border-toggle-btn-hover-off: $color-grey-600, //rename
|
||||
color-border-toggle-btn-focus-on: $color-white, //rename
|
||||
color-border-toggle-btn-focus-off: $color-grey-600, //rename
|
||||
color-border-toggle-btn-disabled-on: $color-grey-300, //rename
|
||||
color-border-toggle-btn-disabled-off: $color-grey-500, //rename
|
||||
color-circle-toggle-btn-rest-on: $color-white, //rename
|
||||
color-circle-toggle-btn-rest-off: $color-grey-1200, //rename
|
||||
color-circle-toggle-btn-hover-on: $color-white, //rename
|
||||
color-circle-toggle-btn-hover-off: $color-blue-300, //rename
|
||||
color-circle-toggle-btn-focus-on: $color-white, //rename
|
||||
color-circle-toggle-btn-focus-off: $color-grey-1200, //rename
|
||||
color-circle-toggle-btn-disabled-on: $color-grey-500, //rename
|
||||
color-circle-toggle-btn-disabled-off: $color-grey-500, //rename
|
||||
|
||||
// Checkbox
|
||||
color-bg-checkbox-focused: $color-white,
|
||||
color-bg-checkbox-selected-hover: $color-blue-300,
|
||||
color-bg-checkbox-pressed-selected: $color-blue-100,
|
||||
color-bg-checkbox-disabled: $color-white,
|
||||
color-border-checkbox-hover: $color-grey-1200,
|
||||
color-border-checkbox-focused: $color-grey-1200,
|
||||
color-border-checkbox-selected-hover: $color-blue-300,
|
||||
color-border-checkbox-pressed-selected: $color-blue-100,
|
||||
color-border-checkbox-disabled-selected: $color-grey-300,
|
||||
color-border-checkbox-disabled: $color-grey-300,
|
||||
|
||||
// Calendar
|
||||
color-bg-calendar-btn-current: $color-blue-100, //deprecated
|
||||
color-bg-calendar-btn-hover: $color-grey-200, //deprecated
|
||||
color-bg-calendar-btn-focus: $color-transparent, //deprecated
|
||||
color-border-calendar-btn-focus: $color-grey-600, //deprecated
|
||||
|
||||
// General Borders
|
||||
color-border-rest: $color-grey-300,
|
||||
color-border-hover: $color-blue-100,
|
||||
color-border-focus: $color-black,
|
||||
color-border-selected: $color-blue-100,
|
||||
color-border-disabled: $color-grey-500,
|
||||
color-border-error: $color-error-local-200,
|
||||
color-border-controls: $color-blue-100,
|
||||
|
||||
// General Texts
|
||||
color-text-rest: $color-black,
|
||||
color-text-chevron: $color-grey-600,
|
||||
color-text-error: $color-error-local-200,
|
||||
color-text-required: $color-error-local-200,
|
||||
color-text-visited: $color-blue-400, //deprecated
|
||||
color-text-nodata: $color-grey-400,
|
||||
color-text-disabled: $color-grey-500,
|
||||
color-text-white: $color-white, //deprecated
|
||||
color-text-black: $color-black, //deprecated
|
||||
|
||||
// Buttons
|
||||
color-bg-btn-standard-rest: $color-grey-200,
|
||||
color-bg-btn-standard-hover: $color-grey-300,
|
||||
color-bg-btn-standard-focus: $color-grey-300,
|
||||
color-bg-btn-standard-pressed-selected: $color-grey-400,
|
||||
color-bg-btn-standard-disabled: $color-grey-200,
|
||||
|
||||
color-bg-btn-primary-rest: $color-blue-100,
|
||||
color-bg-btn-primary-hover: $color-blue-200,
|
||||
color-bg-btn-primary-focus: $color-blue-200,
|
||||
color-bg-btn-primary-pressed-selected: $color-blue-300,
|
||||
color-bg-btn-primary-disabled: $color-grey-200,
|
||||
color-outline-btn-primary-focus: $color-white,
|
||||
|
||||
color-bg-btn-danger-rest: $color-red-400, //rename
|
||||
color-bg-btn-danger-hover: $color-red-500, //rename
|
||||
color-bg-btn-danger-focus: $color-red-500, //rename
|
||||
color-bg-btn-danger-pressed-selected: $color-red-600, //deprecated
|
||||
color-bg-btn-danger-disabled: $color-grey-200, //rename
|
||||
color-outline-btn-danger-focus: $color-white, //rename
|
||||
|
||||
// Layout Buttons
|
||||
color-bg-btn-layout-rest: $color-white, //deprecated
|
||||
color-bg-btn-layout-hover: $color-grey-600, //deprecated
|
||||
color-bg-btn-layout-focus: $color-grey-100, //deprecated
|
||||
color-bg-btn-layout-pressed-selected: $color-grey-300, //deprecated
|
||||
color-bg-btn-layout-disabled: $color-grey-200, //deprecated
|
||||
color-bg-btn-layout-header-pressed-selected: $color-grey-1200, //deprecated
|
||||
color-bg-btn-layout-sidenavbar-pressed-selected: $color-grey-1200, //deprecated
|
||||
color-border-btn-layout-rest: $color-blue-100, //deprecated
|
||||
color-border-btn-layout-hover: $color-grey-600, //deprecated
|
||||
color-border-btn-layout-focus: $color-grey-600, //deprecated
|
||||
|
||||
color-border-btn-layout-pressed-selected: $color-grey-300, //deprecated
|
||||
color-border-btn-layout-disabled: $color-grey-200, //deprecated
|
||||
color-border-btn-layout-header-pressed-selected: $color-grey-1200, //deprecated
|
||||
color-border-btn-layout-sidenavbar-pressed-selected: $color-grey-1200, //deprecated
|
||||
|
||||
// Hyperlinks
|
||||
color-text-hyperlink-rest: $color-blue-200,
|
||||
color-text-hyperlink-hover: $color-blue-400,
|
||||
color-text-hyperlink-focus: $color-blue-200,
|
||||
color-text-hyperlink-disabled: $color-grey-500,
|
||||
color-border-hyperlink-focus: $color-grey-600, //deprecated
|
||||
|
||||
// Loading
|
||||
color-bg-loader-panel: $color-grey-200,
|
||||
color-bg-loader-spinner: $color-grey-700,
|
||||
color-border-loader-global-segment: $color-blue-100,
|
||||
color-border-loader-global-track: $color-grey-300,
|
||||
|
||||
// Upload
|
||||
color-bg-upload: $color-grey-400,
|
||||
color-border-upload: $color-grey-300,
|
||||
|
||||
// Tabs
|
||||
color-text-pivot-tab-device-rest: $color-grey-1200, //rename
|
||||
color-text-pivot-tab-device-hover: $color-grey-1200, //rename
|
||||
color-text-pivot-tab-device-focus: $color-grey-1200, //rename
|
||||
color-text-pivot-tab-device-press: $color-black, //rename
|
||||
color-text-pivot-tab-device-selected: $color-grey-1200, //rename
|
||||
color-border-pivot-tab: $color-blue-100, //rename
|
||||
|
||||
// Charts
|
||||
color-chart-X-Y-lines: $color-grey-400, //rename
|
||||
color-chart-gap-stroke: $color-grey-500,
|
||||
|
||||
// Alerts
|
||||
color-bg-alert-error: $color-error-global-100,
|
||||
color-bg-alert-info: $color-information-100,
|
||||
color-bg-alert-warning: $color-warning-100,
|
||||
color-bg-alert-error-close-hover: $color-red-1100, //deprecated
|
||||
color-bg-alert-info-close-hover: $color-grey-500, //deprecated
|
||||
color-bg-alert-warning-close-hover: $color-yellow-600, //deprecated
|
||||
|
||||
// Color picker
|
||||
color-picker-border-inner: $color-white, //rename
|
||||
color-picker-border-outer: $color-error-global-100, //rename
|
||||
|
||||
// Data colors
|
||||
data-color-1: $color-green-100,
|
||||
data-color-2: $color-green-700,
|
||||
data-color-3: $color-green-800,
|
||||
data-color-4: $color-green-900,
|
||||
data-color-5: $color-green-1000,
|
||||
data-color-6: $color-green-1100,
|
||||
data-color-7: $color-lightgrey-700,
|
||||
data-color-8: $color-lightgrey-800,
|
||||
data-color-9: $color-lightgrey-900,
|
||||
data-color-10: $color-lightgrey-1000,
|
||||
data-color-11: $color-lightgrey-1100,
|
||||
data-color-12: $color-lightgrey-1200,
|
||||
data-color-13: $color-red-100,
|
||||
data-color-14: $color-red-700,
|
||||
data-color-15: $color-red-800,
|
||||
data-color-16: $color-red-900,
|
||||
data-color-17: $color-red-1000,
|
||||
data-color-18: $color-red-1100,
|
||||
data-color-19: $color-yellow-100,
|
||||
data-color-20: $color-yellow-700,
|
||||
data-color-21: $color-yellow-800,
|
||||
data-color-22: $color-yellow-900,
|
||||
data-color-23: $color-yellow-1000,
|
||||
data-color-24: $color-yellow-1100,
|
||||
data-color-25: $color-lightblue-100,
|
||||
data-color-26: $color-lightblue-700,
|
||||
data-color-27: $color-lightblue-800,
|
||||
data-color-28: $color-lightblue-900,
|
||||
data-color-29: $color-lightblue-1000,
|
||||
data-color-30: $color-lightblue-1100,
|
||||
data-color-31: $color-orange-100,
|
||||
data-color-32: $color-orange-700,
|
||||
data-color-33: $color-orange-800,
|
||||
data-color-34: $color-orange-900,
|
||||
data-color-35: $color-orange-1000,
|
||||
data-color-36: $color-orange-1100,
|
||||
data-color-37: $color-purple-100,
|
||||
data-color-38: $color-purple-700,
|
||||
data-color-39: $color-purple-800,
|
||||
data-color-40: $color-purple-900,
|
||||
data-color-41: $color-purple-1000,
|
||||
data-color-42: $color-purple-1100,
|
||||
|
||||
), $theme-light);
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
/**
|
||||
* Default Light Theme Colors
|
||||
*/
|
||||
|
||||
:root[theme='fluent-light'] {
|
||||
// Shell
|
||||
--color-bg-navbar: var(--color-grey-20);
|
||||
--color-bg-navbar-hover: var(--color-grey-30);
|
||||
--color-bg-navbar-selected: var(--color-white);
|
||||
--color-bg-navbar-selected-hover: var(--color-grey-30);
|
||||
--color-bg-header: var(--color-white);
|
||||
--color-bg-header-hover: var(--color-grey-20);
|
||||
--color-bg-masthead: var(--color-grey-50);
|
||||
--color-bg-masthead-hover: var(--color-text-20);
|
||||
--color-outline-masthead: var(--color-white);
|
||||
--color-border-masthead-focus: var(--color-white);
|
||||
--color-border-navbar-focus: var(--color-black);
|
||||
|
||||
// Surfaces
|
||||
--color-bg-panel: var(--color-grey-10);
|
||||
--color-bg-container: var(--color-white);
|
||||
--color-bg-container-panel: var(--color-white);
|
||||
--color-border-container-panel: var(--color-grey-40);
|
||||
--shadow-container-panel: 0 25.6px 57.6px 0 rgba(0, 0, 0, .12);
|
||||
--color-bg-cmdbar: var(--color-white);
|
||||
--color-bg-titlebar: var(--color-grey-40);
|
||||
--color-border-panel: var(--color-grey-40);
|
||||
--color-border-grid: var(--color-grey-40);
|
||||
|
||||
// Controls
|
||||
--color-bg-blastshield: var(--color-black-transparent-primary);
|
||||
--color-bg-balloon: var(--color-white);
|
||||
--color-bg-form: var(--color-white);
|
||||
--color-bg-table: var(--color-white);
|
||||
--color-bg-searchbar-active: var(--color-white);
|
||||
--color-bg-searchbar-rest: var(--color-white-transparent-third);
|
||||
--color-bg-searchbar-focus: var(--color-white);
|
||||
|
||||
// Interactions
|
||||
--color-bg-hover: var(--color-grey-20);
|
||||
--color-bg-selected: var(--color-grey-30);
|
||||
|
||||
// All Tiles
|
||||
--color-border-tile: var(--color-grey-30); // 0.5px border
|
||||
--color-border-tile-hover: var(--color-blue-10);
|
||||
|
||||
// Gallery Tiles
|
||||
--color-bg-gallery-tile-top: var(--color-white);
|
||||
--color-bg-gallery-tile-bottom: var(--color-blue-10);
|
||||
|
||||
// Dashboard Tiles
|
||||
--color-bg-dashboard: var(--color-grey-10);
|
||||
--color-tile-symbol: var(--color-text-10);
|
||||
--color-stroke-tile-symbol: var(--color-text-10);
|
||||
|
||||
// Input Fields
|
||||
--color-bg-input-rest: var(--color-white);
|
||||
--color-bg-input-hover: var(--color-white);
|
||||
--color-bg-input-selected: var(--color-white);
|
||||
--color-bg-input-disabled: var(--color-grey-30);
|
||||
|
||||
--color-border-input-hover: var(--color-text-20);
|
||||
--color-border-input-selected: var(--color-blue-10);
|
||||
--color-border-input-error: var(--color-status-30);
|
||||
|
||||
--color-text-regular: var(--color-text-10);
|
||||
--color-text-placeholder: var(--color-text-20);
|
||||
|
||||
// Dropdowns
|
||||
--color-dropdown-rest: var(--color-white);
|
||||
--color-dropdown-hover: var(--color-grey-30);
|
||||
--color-dropdown-focus: var(--color-grey-30);
|
||||
--color-dropdown-pressed: var(--color-grey-40);
|
||||
--color-dropdown-disabled: var(--color-grey-30);
|
||||
--color-border-dropdown-rest: var(--color-blue-10);
|
||||
--color-border-dropdown-focus: var(--color-text-20);
|
||||
--color-text-dropdown-disabled: var(--color-text-30);
|
||||
|
||||
// Radio button
|
||||
--color-bg-radio-rest: var(--color-white);
|
||||
--color-bg-radio-hover: var(--color-white);
|
||||
--color-bg-radio-selected: var(--color-white);
|
||||
--color-bg-radio-focused: var(--color-white);
|
||||
--color-bg-radio-disabled: var(--color-white);
|
||||
--color-border-radio-rest: var(--color-text-10);
|
||||
--color-border-radio-hover: var(--color-text-10);
|
||||
--color-border-radio-selected: var(--color-blue-10);
|
||||
--color-border-radio-focused: var(--color-text-10);
|
||||
--color-border-radio-disabled: var(--color-text-30);
|
||||
--color-center-radio-hover: var(--color-blue-10); //On hover center will reduce to 2px circle
|
||||
--color-center-radio-selected: var(--color-blue-20); //On selected center will return to normal size
|
||||
--color-center-radio-disabled: var(--color-text-30);
|
||||
|
||||
// Toggle
|
||||
--color-bg-toggle-on-rest: var(--color-blue-10);
|
||||
--color-bg-toggle-off-rest: var(--color-white);
|
||||
--color-bg-toggle-on-hover: var(--color-blue-30);
|
||||
--color-bg-toggle-off-hover: var(--color-white);
|
||||
--color-bg-toggle-on-focus: var(--color-blue-10);
|
||||
--color-bg-toggle-off-focus: var(--color-white);
|
||||
--color-bg-toggle-on-disabled: var(--color-text-30);
|
||||
--color-bg-toggle-off-disabled: var(--color-grey-30);
|
||||
--color-border-toggle-on-rest: var(--color-white);
|
||||
--color-border-toggle-off-rest: var(--color-text-20);
|
||||
--color-border-toggle-on-hover: var(--color-text-20);
|
||||
--color-border-toggle-off-hover: var(--color-text-20);
|
||||
--color-border-toggle-on-focus: var(--color-white);
|
||||
--color-border-toggle-off-focus: var(--color-text-20);
|
||||
--color-border-toggle-on-disabled: var(--color-text-30);
|
||||
--color-border-toggle-off-disabled: var(--color-text-20);
|
||||
--color-circle-toggle-on-rest: var(--color-white);
|
||||
--color-circle-toggle-off-rest: var(--color-black);
|
||||
--color-circle-toggle-on-hover: var(--color-white); //Size circle reduce to have
|
||||
--color-circle-toggle-off-hover: var(--color-blue-30);
|
||||
--color-circle-toggle-on-focus: var(--color-white);
|
||||
--color-circle-toggle-off-focus: var(--color-black);
|
||||
--color-circle-toggle-on-disabled: var(--color-text-20);
|
||||
--color-circle-toggle-off-disabled: var(--color-text-20);
|
||||
|
||||
// Checkbox
|
||||
--color-bg-checkbox-focused: var(--color-color-white);
|
||||
--color-bg-checkbox-selected-hover: var(--color-blue-30);
|
||||
--color-bg-checkbox-pressed: var(--color-blue-10);
|
||||
--color-bg-checkbox-disabled: var(--color-grey-20);
|
||||
--color-border-checkbox-hover: var(--color-text-10);
|
||||
--color-border-checkbox-focused: var(--color-text-10);
|
||||
--color-border-checkbox-selected-hover: var(--color-blue-30);
|
||||
--color-border-checkbox-pressed-selected: var(--color-blue-10);
|
||||
--color-border-checkbox-disabled-selected: var(--color-text-30);
|
||||
--color-border-checkbox-disabled: var(--color-text-30);
|
||||
|
||||
// General Borders
|
||||
--color-border-rest: var(--color-grey-40);
|
||||
--color-border-hover: var(--color-blue-10); //duplicate?
|
||||
--color-border-focus: var(--color-black);
|
||||
--color-border-selected: var(--color-blue-10);
|
||||
--color-border-disabled: var(--color-text-30);
|
||||
--color-border-error: var(--color-status-30);
|
||||
--color-border-controls: var(--color-blue-10);
|
||||
--color-outline: var(--color-blue-10);
|
||||
|
||||
// General Texts
|
||||
--color-text-rest: var(--color-text-10);
|
||||
--color-text-chevron: var(--color-text-20);
|
||||
--color-text-error: var(--color-status-30);
|
||||
--color-text-required: var(--color-text-20);
|
||||
--color-text-nodata: var(--color-text-20);
|
||||
--color-text-disabled: var(--color-text-30);
|
||||
--color-text-masthead: var(--color-white);
|
||||
--color-text-navbar: var(--color-text-rest);
|
||||
|
||||
// Buttons
|
||||
--color-bg-btn-standard-rest: var(--color-grey-20);
|
||||
--color-bg-btn-standard-hover: var(--color-grey-30);
|
||||
--color-bg-btn-standard-focus: var(--color-grey-20);
|
||||
--color-bg-btn-standard-selected: var(--color-grey-40);
|
||||
--color-bg-btn-standard-disabled: var(--color-text-30);
|
||||
|
||||
--color-bg-btn-primary-rest: var(--color-blue-10);
|
||||
--color-bg-btn-primary-hover: var(--color-blue-20);
|
||||
--color-bg-btn-primary-focus: var(--color-blue-10);
|
||||
--color-bg-btn-primary-selected: var(--color-blue-30);
|
||||
--color-bg-btn-primary-disabled: var(--color-text-20);
|
||||
--color-outline-btn-primary-focus: var(--color-white);
|
||||
|
||||
--color-bg-btn-negative-rest: var(--color-status-30);
|
||||
--color-bg-btn-negative-hover: var(--color-status-30);
|
||||
--color-bg-btn-negative-focus: var(--color-status-30);
|
||||
--color-bg-btn-negative-disabled: var(--color-text-30);
|
||||
--color-outline-btn-negative-focus: var(--color-white);
|
||||
|
||||
// Hyperlinks
|
||||
--color-hyperlink-rest: var(--color-blue-20);
|
||||
--color-hyperlink-hover: var(--color-blue-30);
|
||||
--color-hyperlink-focus: var(--color-blue-20);
|
||||
--color-hyperlink-disabled: var(--color-text-30);
|
||||
|
||||
// Loading
|
||||
--color-bg-loader-panel: var(--color-grey-20);
|
||||
--color-bg-loader-spinner: var(--color-blue-10);
|
||||
--color-border-loader-global-segment: var(--color-blue-10);
|
||||
--color-border-loader-global-track: var(--color-grey-40);
|
||||
|
||||
// Upload
|
||||
--color-bg-upload: var(--color-grey-20);
|
||||
--color-border-upload: var(--color-grey-30);
|
||||
|
||||
// Tabs
|
||||
--color-pivot-rest: var(--color-text-20);
|
||||
--color-pivot-hover: var(--color-text-10);
|
||||
--color-pivot-focus: var(--color-text-10);
|
||||
--color-pivot-press: var(--color-black);
|
||||
--color-pivot-selected: var(--color-text-10);
|
||||
--color-border-pivot: var(--color-blue-10);
|
||||
|
||||
// Charts
|
||||
--color-chart-xy-lines: var(--color-grey-40);
|
||||
--color-chart-gap-stroke: var(--color-text-30);
|
||||
|
||||
// Alerts
|
||||
--color-bg-alert-error: var(--color-status-30);
|
||||
--color-bg-alert-info: var(--color-status-10);
|
||||
--color-bg-alert-warning: var(--color-status-20);
|
||||
|
||||
// Color picker
|
||||
--color-border-colorpicker-in: var(--color-white);
|
||||
--color-border-colorpicker-out: var(--color-text-20);
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче