Merged PR 773230: New CSS library colors with mixins & example code
This commit is contained in:
Andy Zhu
Родитель
9ee5421945
Коммит
6824b4026b
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Modules
|
||||
/node_modules/
|
||||
|
||||
# Examples
|
||||
/example/
|
||||
64
README.md
64
README.md
|
|
@ -7,31 +7,59 @@ Usage
|
|||
-----
|
||||
Install as a package via npm with the command `npm install @azure-iot/ux-fluent-css`.
|
||||
|
||||
You have a few options when it comes to consuming the css.
|
||||
|
||||
Option 1: Import the theme directly into your styles using SASS.
|
||||
In your custom.scss, you’ll import the library's source Sass files. You are free to pick and choose the parts that you need.
|
||||
|
||||
```sass import
|
||||
@import "~@azure-iot/ux-fluent-css/src/[theme]/color.defaults";
|
||||
@import "~@azure-iot/ux-fluent-css/src/colors";
|
||||
@import "~@azure-iot/ux-fluent-css/src/mixins";
|
||||
```
|
||||
|
||||
Option 2: Import the theme into the build pipeline
|
||||
|
||||
```sass build
|
||||
const themePath = path.resolve(`./node_modules/@azure-iot/ux-fluent-css/src/${theme}`);
|
||||
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
includePaths: themePath
|
||||
}
|
||||
}
|
||||
```
|
||||
With that setup in place, you can begin to modify any of the Sass variables and maps in your custom.scss.
|
||||
|
||||
Customization
|
||||
-------------
|
||||
It is easy to customize and build on top of the Common IoT Fluent CSS Library.
|
||||
The library includes the colors in a Sass map of key value pairs. All Sass maps include the !default flag and can be overridden and extended without modifying the library's source code.
|
||||
|
||||
Each theme consists of two SASS files. `_color.palette.scss` contains a list of base colors standardized by the Azure IoT design studio. `_color.defaults.scss` introduces more extensive structural variables, providing a list of predefined colors that can be easily applied to common pieces of shared UI.
|
||||
### Modify map
|
||||
|
||||
Example coming soon...
|
||||
To modify an existing color in our $themes map, simply redefine the key value pair in your custom Sass file:
|
||||
|
||||
```
|
||||
$theme-dark: (
|
||||
color-fill-tile-symbol: #ff4136
|
||||
);
|
||||
```
|
||||
|
||||
### Add to map
|
||||
|
||||
To add a new color to one of our existing themes, add the new key and value:
|
||||
|
||||
```
|
||||
$theme-dark: (
|
||||
color-fill-tile-symbol-new: #aa4136
|
||||
);
|
||||
```
|
||||
|
||||
### Remove from map
|
||||
|
||||
To remove colors from $themes, use map-remove:
|
||||
|
||||
```
|
||||
$theme-dark: map-remove($theme-dark, "color-fill-tile-symbol");
|
||||
```
|
||||
|
||||
### Extend $themes with a custom theme
|
||||
|
||||
To extend the $themes map with new themes, add the new map of colors:
|
||||
|
||||
```
|
||||
$themes: (
|
||||
christmas: (
|
||||
color-fill-tile-symbol: #ff4136,
|
||||
color-stroke-tile-symbol: #36FF53
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
See the `example` directory for sample consumption code. Use `npm run build` to see the sample css output.
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
// 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
|
||||
)
|
||||
);
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
/**
|
||||
* Common Azure IoT Colors
|
||||
*/
|
||||
/**
|
||||
* Default Dark Theme Colors
|
||||
*/
|
||||
/**
|
||||
* Color Palette
|
||||
*/
|
||||
/**
|
||||
* Default Light Theme Colors
|
||||
*/
|
||||
/**
|
||||
* Color Palette
|
||||
*/
|
||||
/**
|
||||
* Mixins
|
||||
*/
|
||||
.symbol {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%); }
|
||||
.theme-dark .symbol {
|
||||
fill: #ff4136;
|
||||
stroke: #FFFFFF; }
|
||||
.theme-light .symbol {
|
||||
fill: #212121;
|
||||
stroke: #212121; }
|
||||
.theme-christmas .symbol {
|
||||
fill: #ff4136;
|
||||
stroke: #36FF53; }
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
@import "color.overrides";
|
||||
@import "../src/colors";
|
||||
@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');
|
||||
}
|
||||
}
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
10
package.json
10
package.json
|
|
@ -1,14 +1,18 @@
|
|||
{
|
||||
"name": "@azure-iot/ux-fluent-css",
|
||||
"description": "Common styles library for CSS, Colors and Themes",
|
||||
"version": "1.0.1",
|
||||
"version": "2.0.0",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": "^8.0.0"
|
||||
},
|
||||
"scripts": {},
|
||||
"scripts": {
|
||||
"build": "node-sass-chokidar example/ -o example/"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {},
|
||||
"devDependencies": {
|
||||
"node-sass-chokidar": "^1.2.2"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://msazure.visualstudio.com/DefaultCollection/One/_git/azure-iot-ux-fluent-css"
|
||||
|
|
|
|||
|
|
@ -2,191 +2,144 @@
|
|||
* Color Palette
|
||||
*/
|
||||
|
||||
// primary colors
|
||||
$color-theme-dark: #005a9e !default;
|
||||
$color-theme-primary: #0078d6 !default;
|
||||
$color-theme-primary-alt: #4ba0e4 !default;
|
||||
$color-theme-light: #b3d6f2 !default;
|
||||
$color-theme-lighter: #deecf9 !default;
|
||||
$color-theme-error: #d02e00 !default;
|
||||
|
||||
// base colors
|
||||
$color-white: #fff !default;
|
||||
$color-red: #e81123 !default;
|
||||
$color-green: #107c10 !default;
|
||||
$color-orange: #ff8c00 !default;
|
||||
$color-black: #000 !default;
|
||||
// Principal Colors
|
||||
|
||||
$color-true-red: #f00 !default;
|
||||
$color-true-orange: #fa0 !default;
|
||||
$color-true-green: #0f0 !default;
|
||||
$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-500: #A6A6A6;
|
||||
$color-grey-400: #AEAEAE;
|
||||
$color-grey-300: #C8C8C8;
|
||||
$color-grey-200: #DADADA;
|
||||
$color-grey-100: #F2F2F2;
|
||||
$color-white: #FFFFFF;
|
||||
|
||||
// primary - grayscale
|
||||
$color-neutral-primary: #333333 !default;
|
||||
$color-neutral-primary-alt-2: #212121 !default;
|
||||
$color-neutral-primary-alt: #444444 !default;
|
||||
$color-neutral-secondary: #3c3c3c !default;
|
||||
$color-neutral-secondary-alt: #666 !default;
|
||||
$color-neutral-secondary-alt-2: #515151 !default;
|
||||
$color-neutral-secondary-alt-3: #4a4a4a !default;
|
||||
$color-neutral-secondary-alt-4: #767676 !default;
|
||||
$color-neutral-secondary-alt-5: #888 !default;
|
||||
$color-neutral-tertiary: #a6a6a6 !default;
|
||||
$color-neutral-tertiary-2: #bcbcbc !default;
|
||||
$color-neutral-tertiary-alt: #c8c8c8 !default;
|
||||
$color-neutral-tertiary-alt-2: #dcdcdc !default;
|
||||
$color-neutral-light: #eaeaea !default;
|
||||
$color-neutral-lighter: #f4f4f4 !default;
|
||||
$color-neutral-lighter-alt: #f8f8f8 !default;
|
||||
|
||||
// primary - alt
|
||||
$color-cool-grey-1: #1f2328 !default;
|
||||
$color-cool-grey-2: #31373e !default;
|
||||
$color-cool-grey-3: #3d4147 !default;
|
||||
$color-cool-grey-4: #4b5157 !default;
|
||||
$color-cool-grey-5: #62666c !default;
|
||||
$color-cool-grey-6: #414953 !default;
|
||||
$color-cool-grey-7: #7a7a7a !default;
|
||||
$color-cool-grey-8: #4a5156 !default;
|
||||
// Chart & Measurement Colors
|
||||
|
||||
$color-shark: #1b1e22 !default;
|
||||
$color-data-green-100: #01b8aa;
|
||||
$color-data-green-101: #99E3DD;
|
||||
$color-data-green-102: #6be8dc;
|
||||
$color-data-green-103: #67D4CC;
|
||||
$color-data-green-104: #59cec3;
|
||||
$color-data-green-105: #34C6BB;
|
||||
$color-data-green-106: #08bca6;
|
||||
$color-data-green-107: #0aa58e;
|
||||
$color-data-green-108: #12937d;
|
||||
$color-data-green-109: #018A80;
|
||||
$color-data-green-110: #015C55;
|
||||
$color-data-grey-200: #374649;
|
||||
$color-data-grey-201: #FFFFFF;
|
||||
$color-data-grey-202: #F2F2F2;
|
||||
$color-data-grey-203: #E6E6E6;
|
||||
$color-data-grey-204: #CCCCCC;
|
||||
$color-data-grey-205: #B3B3B3;
|
||||
$color-data-grey-206: #999999;
|
||||
$color-data-grey-207: #AFB5B6;
|
||||
$color-data-grey-208: #879092;
|
||||
$color-data-grey-209: #5F6B6D;
|
||||
$color-data-grey-210: #293537;
|
||||
$color-data-red-300: #FD625E;
|
||||
$color-data-red-301: #FEC0BF;
|
||||
$color-data-red-302: #FEA19E;
|
||||
$color-data-red-303: #FD817E;
|
||||
$color-data-red-304: #fd625e;
|
||||
$color-data-red-305: #ff7878;
|
||||
$color-data-red-306: #fc5454;
|
||||
$color-data-red-307: #fc3232;
|
||||
$color-data-red-308: #e81818;
|
||||
$color-data-red-309: #BE4A47;
|
||||
$color-data-red-310: #b21f1f;
|
||||
$color-data-yellow-400: #F2C80F;
|
||||
$color-data-yellow-401: #FAE99F;
|
||||
$color-data-yellow-402: #F7DE6F;
|
||||
$color-data-yellow-403: #fcdf65;
|
||||
$color-data-yellow-404: #FFD629;
|
||||
$color-data-yellow-405: #F5D33F;
|
||||
$color-data-yellow-406: #ffce00;
|
||||
$color-data-yellow-407: #e5bd13;
|
||||
$color-data-yellow-408: #c9a611;
|
||||
$color-data-yellow-409: #B6960B;
|
||||
$color-data-yellow-410: #796408;
|
||||
$color-data-lightblue-600: #8AD4EB;
|
||||
$color-data-lightblue-601: #caf8ff;
|
||||
$color-data-lightblue-602: #b0f8ff;
|
||||
$color-data-lightblue-603: #D0EEF7;
|
||||
$color-data-lightblue-604: #B9E5F3;
|
||||
$color-data-lightblue-605: #B7DDE9;
|
||||
$color-data-lightblue-606: #A1DDEF;
|
||||
$color-data-lightblue-607: #8BC5D7;
|
||||
$color-data-lightblue-608: #689FB0;
|
||||
$color-data-lightblue-609: #456A76;
|
||||
$color-data-lightblue-610: #17323B;
|
||||
$color-data-orange-700: #FE9666;
|
||||
$color-data-orange-701: #ffcdbb;
|
||||
$color-data-orange-702: #FFD5C2;
|
||||
$color-data-orange-703: #FEC0A3;
|
||||
$color-data-orange-704: #FEAB85;
|
||||
$color-data-orange-705: #f7a389;
|
||||
$color-data-orange-706: #F98855;
|
||||
$color-data-orange-707: #f9724e;
|
||||
$color-data-orange-708: #BF714D;
|
||||
$color-data-orange-709: #A47159;
|
||||
$color-data-orange-710: #7F4B33;
|
||||
$color-data-purple-800: #A66999;
|
||||
$color-data-purple-801: #CAA5C2;
|
||||
$color-data-purple-802: #B887AD;
|
||||
$color-data-purple-803: #efa5e1;
|
||||
$color-data-purple-804: #ea78d9;
|
||||
$color-data-purple-805: #e247db;
|
||||
$color-data-purple-806: #DBC3D6;
|
||||
$color-data-purple-807: #d313d3;
|
||||
$color-data-purple-808: #921e9b;
|
||||
$color-data-purple-809: #7D4F73;
|
||||
$color-data-purple-810: #53354D;
|
||||
|
||||
$color-grey-1: #999 !default;
|
||||
$color-grey-2: #a1a1a1 !default;
|
||||
$color-grey-3: #808080 !default;
|
||||
$color-grey-4: #6f6f6f !default;
|
||||
$color-grey-5: #6E6F71 !default;
|
||||
$color-grey-6: #929293 !default;
|
||||
|
||||
$color-light-grey-1: #ccc !default;
|
||||
$color-light-grey-2: #cbcbcb !default;
|
||||
$color-light-grey-4: #ddd !default;
|
||||
$color-light-grey-5: #eee !default;
|
||||
$color-pale-yellow: #f4f2bd !default;
|
||||
// Alert Colors
|
||||
|
||||
$color-blue-1: #1a37d3 !default;
|
||||
$color-blue-2: #3062d6 !default;
|
||||
$color-blue-3: #0078d6 !default;
|
||||
$color-blue-4: #0e447a !default;
|
||||
$color-blue-5: #219DFC !default;
|
||||
$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-malibu: #5fc2ff !default;
|
||||
|
||||
$color-pale-blue: #d0e6f7 !default;
|
||||
$color-dark-lavender: #b9c3d7 !default;
|
||||
// Input Control Colors
|
||||
|
||||
$color-yellow-1: #ffe294 !default;
|
||||
$color-yellow-2: #DCB303 !default;
|
||||
$color-yellow-3: #f9e385 !default;
|
||||
$color-yellow-4: #df0 !default;
|
||||
$color-yellow-5: #f2c80f !default;
|
||||
$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;
|
||||
|
||||
$color-spicy-mustard: #826d11 !default;
|
||||
$color-goldenrod: #daa520 !default;
|
||||
|
||||
$color-red-1: $color-red !default;
|
||||
$color-red-2: #ef4810 !default;
|
||||
$color-red-3: #FF0039 !default;
|
||||
$color-red-4: #cc002e !default;
|
||||
$color-red-5: #d02e00 !default;
|
||||
$color-red-6: #ff6464 !default;
|
||||
$color-red-7: #890e0e !default;
|
||||
// Red Colors
|
||||
|
||||
$color-green-1: $color-green !default;
|
||||
$color-green-2: $color-true-green !default;
|
||||
$color-green-3: #3bb44a !default;
|
||||
$color-red-100: #b21f1f;
|
||||
$color-red-200: #e81818;
|
||||
$color-red-300: #fc3232;
|
||||
|
||||
// shared colors
|
||||
$color-semi-transparent-black: rgba($color-black, 0.8) !default;
|
||||
$color-half-opacity-black: rgba($color-black, 0.5) !default;
|
||||
$color-third-opacity-black: rgba($color-black,0.32) !default;
|
||||
$color-half-opacity-neutral-secondary-alt: rgba($color-neutral-secondary-alt-4, 0.5) !default;
|
||||
|
||||
$color-bg-addon: transparent !default;
|
||||
$color-bg-alert-error: $color-red-5 !default;
|
||||
$color-bg-alert-info: $color-neutral-tertiary-alt-2 !default;
|
||||
$color-bg-alert-warning: $color-yellow-3 !default;
|
||||
$color-bg-balloon: $color-neutral-primary !default;
|
||||
$color-bg-blastshield: $color-half-opacity-black !default;
|
||||
$color-bg-btn-danger-default: $color-red-3 !default;
|
||||
$color-bg-btn-danger-hover: $color-red-4 !default;
|
||||
$color-bg-btn-danger-pressed: $color-red-4 !default;
|
||||
$color-bg-btn-inline: $color-light-grey-4 !default;
|
||||
$color-bg-btn-primary-default: $color-theme-primary !default;
|
||||
$color-bg-btn-primary-disabled: $color-blue-3 !default;
|
||||
$color-bg-builder-icon-active-default: $color-theme-primary !default;
|
||||
$color-bg-dark: $color-black !default;
|
||||
$color-bg-masthead-hover: $color-cool-grey-3 !default;
|
||||
$color-bg-masthead: $color-black !default;
|
||||
$color-bg-navbar-active: $color-neutral-primary-alt !default;
|
||||
$color-bg-pressed: $color-theme-primary-alt !default;
|
||||
$color-bg-search-facet: $color-theme-primary !default;
|
||||
$color-bg-selected-disabled: $color-neutral-tertiary !default;
|
||||
$color-bg-selected: $color-theme-primary-alt !default;
|
||||
$color-bg-sidebar-active: $color-cool-grey-5 !default;
|
||||
$color-bg-sidebar: $color-cool-grey-6 !default;
|
||||
$color-bg-subheader-action-menu-active: $color-light-grey-5 !default;
|
||||
$color-bg-subheader-builder: $color-theme-dark !default;
|
||||
$color-bg-table-status-tick-green: $color-green !default;
|
||||
$color-bg-table-status-tick-organge: $color-orange !default;
|
||||
$color-bg-thumbnail-user: $color-cool-grey-5 !default;
|
||||
$color-bg-design-mode: $color-theme-primary !default;
|
||||
$color-border-context-menu: $color-light-grey-1 !default;
|
||||
$color-border-dropdown: $color-light-grey-1 !default;
|
||||
$color-border-editable-header-input-hover: $color-neutral-tertiary !default;
|
||||
$color-border-error: $color-theme-error !default;
|
||||
$color-border-inactive: $color-neutral-tertiary-alt !default;
|
||||
$color-border-masthead-toolbar: $color-light-grey-4 !default;
|
||||
$color-border-masthead: $color-cool-grey-4 !default;
|
||||
$color-border-searchbar: none !default;
|
||||
$color-border-selected-hover: $color-theme-dark !default;
|
||||
$color-border-selected: $color-theme-primary !default;
|
||||
$color-border-subheader-action-menu: $color-light-grey-4 !default;
|
||||
$color-border-table-header: $color-light-grey-4 !default;
|
||||
$color-border-tooltip: $color-neutral-secondary-alt !default;
|
||||
$color-disabled-light: $color-light-grey-1 !default;
|
||||
$color-disabled: $color-cool-grey-5 !default;
|
||||
$color-chart-multiple-events: $color-neutral-tertiary !default;
|
||||
$color-chart-multi-state-pattern: $color-neutral-secondary-alt !default;
|
||||
$color-grid-hover: $color-pale-blue !default;
|
||||
$color-grid-selected: $color-dark-lavender !default;
|
||||
$color-grid-status-default: $color-light-grey-2 !default;
|
||||
$color-grid-status-green: $color-green !default;
|
||||
$color-grid-status-orange : $color-orange !default;
|
||||
$color-guidance: $color-pale-yellow !default;
|
||||
$color-header-disabled: $color-neutral-light !default;
|
||||
$color-icon-placeholder: $color-goldenrod !default;
|
||||
$color-link-disabled: $color-neutral-tertiary !default;
|
||||
$color-link-pressed: $color-blue-1 !default;
|
||||
$color-link-visited: $color-blue-2 !default;
|
||||
$color-link-design-mode: $color-theme-light !default;
|
||||
$color-link-design-mode-hover: $color-malibu !default;
|
||||
$color-nav-gradient: $color-semi-transparent-black !default;
|
||||
$color-shadow-gradient-pane: $color-half-opacity-neutral-secondary-alt !default;
|
||||
$color-shadow-gradient: $color-semi-transparent-black !default;
|
||||
$color-standard-shadow: $color-third-opacity-black !default;
|
||||
$color-stroke-gap: $color-neutral-tertiary !default;
|
||||
$color-symbol-fill: $color-white !default;
|
||||
$color-symbol-stroke: $color-white !default;
|
||||
$color-text-alert: $color-neutral-primary !default;
|
||||
$color-text-alpha: $color-true-orange !default;
|
||||
$color-text-beta: $color-yellow-4 !default;
|
||||
$color-text-bright: $color-white !default;
|
||||
$color-text-chevron: $color-neutral-tertiary !default;
|
||||
$color-text-dark: $color-black !default;
|
||||
$color-text-error: $color-theme-error !default;
|
||||
$color-text-gallery-card-banner: $color-white !default;
|
||||
$color-text-hover: $color-theme-primary-alt !default;
|
||||
$color-text-icon-placeholder: $color-grey-3 !default;
|
||||
$color-text-init: $color-true-red !default;
|
||||
$color-text-label: $color-cool-grey-2 !default;
|
||||
$color-text-link-disabled: $color-neutral-secondary-alt-5 !default;
|
||||
$color-text-link: $color-theme-primary !default;
|
||||
$color-text-masthead-sub-label: $color-light-grey-2 !default;
|
||||
$color-text-placeholder: $color-neutral-tertiary !default;
|
||||
$color-text-rc: $color-true-green !default;
|
||||
$color-text-required: $color-theme-error !default;
|
||||
$color-text-subtitle: $color-cool-grey-5 !default;
|
||||
$color-text-visited: $color-blue-2 !default;
|
||||
$color-theme-error: $color-red-6 !default;
|
||||
$color-track-border: $color-theme-primary !default;
|
||||
// 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);
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/**
|
||||
* Common Azure IoT Colors
|
||||
*/
|
||||
|
||||
@import "./dark/color.defaults";
|
||||
@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);
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
/**
|
||||
* Mixins
|
||||
*/
|
||||
|
||||
/// Prefix of the top level theme class
|
||||
/// e.g. #{$default-prefix}-light -> theme-light
|
||||
///
|
||||
/// @type String
|
||||
$default-prefix: 'theme' !default;
|
||||
|
||||
/// Creates theme variations
|
||||
///
|
||||
/// @param {Map} $themes - Theme map to loop through
|
||||
@mixin themify($themes: $themes) {
|
||||
@each $theme, $colors in $themes {
|
||||
.#{$default-prefix}-#{$theme} & {
|
||||
$theme-map: () !global;
|
||||
@each $key, $submap in $colors {
|
||||
$value: map-get(map-get($themes, $theme), '#{$key}');
|
||||
$theme-map: map-merge($theme-map, ($key: $value)) !global;
|
||||
}
|
||||
@content;
|
||||
$theme-map: null !global;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Gets a value from the color map.
|
||||
///
|
||||
/// @param {String} $key - Name of the color variable
|
||||
///
|
||||
/// @returns {String} The color for the given key
|
||||
@function themed($key) {
|
||||
$value: map-get($theme-map, $key);
|
||||
|
||||
@if not $value {
|
||||
@error 'There is no `#{$key}` in your theme colors.';
|
||||
}
|
||||
|
||||
@return $value;
|
||||
}
|
||||
|
|
@ -1,139 +1,234 @@
|
|||
/**
|
||||
* Default dark theme colors
|
||||
* Default Dark Theme Colors
|
||||
*/
|
||||
|
||||
@import "../color.palette";
|
||||
|
||||
// Background colors
|
||||
$color-bg-block: $color-cool-grey-3 !default;
|
||||
$color-bg-btn-light: $color-cool-grey-4 !default;
|
||||
$color-bg-btn-primary-hover: $color-shark !default;
|
||||
$color-bg-btn-primary-pressed: $color-shark !default;
|
||||
$color-bg-btn-secondary-default: $color-neutral-secondary-alt-5 !default;
|
||||
$color-bg-btn-secondary-hover: $color-shark !default;
|
||||
$color-bg-btn-secondary-pressed: $color-shark !default;
|
||||
$color-bg-chart: $color-cool-grey-3 !default;
|
||||
$color-bg-configure-pane-container: $color-cool-grey-3 !default;
|
||||
$color-bg-content: $color-cool-grey-3 !default;
|
||||
$color-bg-dashboard-actionbar: $color-cool-grey-2 !default;
|
||||
$color-bg-default: $color-cool-grey-5 !default;
|
||||
$color-bg-disabled: $color-cool-grey-8 !default;
|
||||
$color-bg-field-loading: $color-cool-grey-4 !default;
|
||||
$color-bg-form: $color-cool-grey-2 !default;
|
||||
$color-bg-gallery-card-banner: $color-black !default;
|
||||
$color-bg-gallery-card-blue: $color-blue-4 !default;
|
||||
$color-bg-gallery-card-red: $color-red-7 !default;
|
||||
$color-bg-gallery-card-solid: $color-cool-grey-4 !default;
|
||||
$color-bg-gallery-card-yellow: $color-spicy-mustard !default;
|
||||
$color-bg-gallery-card: $color-cool-grey-2 !default;
|
||||
$color-bg-hover: $color-shark !default;
|
||||
$color-bg-management-list: $color-cool-grey-5 !default;
|
||||
$color-bg-measurement: $color-cool-grey-4 !default;
|
||||
$color-bg-navbar: $color-cool-grey-1 !default;
|
||||
$color-bg-overlay: $color-semi-transparent-black !default;
|
||||
$color-bg-pane: $color-cool-grey-3 !default;
|
||||
$color-bg-panel: $color-cool-grey-5 !default;
|
||||
$color-bg-react-grid-item: $color-cool-grey-2 !default;
|
||||
$color-bg-searchbar: $color-cool-grey-5 !default;
|
||||
$color-bg-select-default: $color-cool-grey-4 !default;
|
||||
$color-bg-selected-hover: $color-shark !default;
|
||||
$color-bg-separator: $color-cool-grey-4 !default;
|
||||
$color-bg-tabbed-pane-small: $color-cool-grey-4 !default;
|
||||
$color-bg-table-status-tick: $color-cool-grey-3 !default;
|
||||
$color-bg-tile: $color-cool-grey-2 !default;
|
||||
$color-bg-upload: $color-cool-grey-1 !default;
|
||||
|
||||
// Border color
|
||||
$color-border-active: $color-neutral-tertiary-alt !default;
|
||||
$color-border-default: transparent !default;
|
||||
$color-border-disabled: $color-grey-5 !default;
|
||||
$color-border-gallery-card-default: $color-neutral-primary !default;
|
||||
$color-border-gallery-card-hover: $color-grey-6 !default;
|
||||
$color-border-inactive: $color-neutral-secondary-alt-5 !default;
|
||||
$color-border-searchbox: $color-cool-grey-2 !default;
|
||||
$color-border-section-separator: $color-cool-grey-3 !default;
|
||||
$color-border-selected-disabled: $color-cool-grey-5 !default;
|
||||
// Theme Map
|
||||
|
||||
// Text color
|
||||
$color-text-cancel: $color-grey-1 !default;
|
||||
$color-text-default: $color-white !default;
|
||||
$color-text-disabled: $color-neutral-secondary-alt-5 !default;
|
||||
$color-text-gallery-card-content: $color-neutral-tertiary-alt !default;
|
||||
$color-text-gallery-card-header: $color-white !default;
|
||||
$color-text-inactive: $color-neutral-tertiary !default;
|
||||
$color-text-neutral-primary-alt-2: $color-white !default;
|
||||
$color-text-neutral-primary: $color-white !default;
|
||||
$color-text-neutral-secondary-alt-3: $color-white !default;
|
||||
$color-text-neutral-secondary-alt: $color-white !default;
|
||||
$color-text-neutral-tertiary: $color-white !default;
|
||||
$color-text-select-option-disabled: $color-neutral-tertiary-alt !default;
|
||||
$theme-dark: () !default;
|
||||
$theme-dark: map-merge((
|
||||
|
||||
// Miscellaneous color
|
||||
$color-chart-ticks: $color-white !default;
|
||||
$color-chart-multi-state-pattern: $color-neutral-secondary-alt !default;
|
||||
$color-header-accent: $color-cool-grey-1 !default;
|
||||
$color-header: $color-cool-grey-2 !default;
|
||||
$color-item-active: $color-cool-grey-5 !default;
|
||||
$color-item-hover: $color-shark !default;
|
||||
$color-layout-divider: $color-cool-grey-7 !default;
|
||||
$color-link-default: $color-blue-5 !default;
|
||||
$color-link-hover: $color-malibu !default;
|
||||
$color-loading: $color-white !default;
|
||||
$color-outline-default: $color-cool-grey-3 !default;
|
||||
$color-outline-focus: $color-white !default;
|
||||
$color-picker-border-inner: $color-white !default;
|
||||
$color-picker-border-outer: transparent !default;
|
||||
$color-shadow-neutral-tertiary-alt: $color-cool-grey-3 !default;
|
||||
$color-status-reported-error: $color-red-6 !default;
|
||||
$color-status-reported-success: $color-true-green !default;
|
||||
$color-status-syncing: $color-yellow-5 !default;
|
||||
$color-stroke-default: $color-cool-grey-2 !default;
|
||||
// Layouts
|
||||
color-bg-navbar: $color-grey-900,
|
||||
color-bg-navbar-hover: $color-grey-700,
|
||||
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,
|
||||
|
||||
// Data color
|
||||
$data-color-1: #01b8aa !default;
|
||||
$data-color-2: #6be8dc !default;
|
||||
$data-color-3: #59cec3 !default;
|
||||
$data-color-4: #08bca6 !default;
|
||||
$data-color-5: #0aa58e !default;
|
||||
$data-color-6: #12937d !default;
|
||||
$data-color-7: #ffffff !default;
|
||||
$data-color-8: #f2f2f2 !default;
|
||||
$data-color-9: #e6e6e6 !default;
|
||||
$data-color-10: #cccccc !default;
|
||||
$data-color-11: #b3b3b3 !default;
|
||||
$data-color-12: #999999 !default;
|
||||
$data-color-13: #fd625e !default;
|
||||
$data-color-14: #ff7878 !default;
|
||||
$data-color-15: #fc5454 !default;
|
||||
$data-color-16: #fc3232 !default;
|
||||
$data-color-17: #e81818 !default;
|
||||
$data-color-18: #b21f1f !default;
|
||||
$data-color-19: #f2c80f !default;
|
||||
$data-color-20: #fcdf65 !default;
|
||||
$data-color-21: #ffd629 !default;
|
||||
$data-color-22: #ffce00 !default;
|
||||
$data-color-23: #e5bd13 !default;
|
||||
$data-color-24: #c9a611 !default;
|
||||
$data-color-25: #8ad4eb !default;
|
||||
$data-color-26: #caf8ff !default;
|
||||
$data-color-27: #b0f8ff !default;
|
||||
$data-color-28: #73f8ff !default;
|
||||
$data-color-29: #27e2dd !default;
|
||||
$data-color-30: #1bb2a7 !default;
|
||||
$data-color-31: #fe9666 !default;
|
||||
$data-color-32: #ffcdbb !default;
|
||||
$data-color-33: #f7a389 !default;
|
||||
$data-color-34: #f98855 !default;
|
||||
$data-color-35: #f9724e !default;
|
||||
$data-color-36: #bf714d !default;
|
||||
$data-color-37: #a66999 !default;
|
||||
$data-color-38: #efa5e1 !default;
|
||||
$data-color-39: #ea78d9 !default;
|
||||
$data-color-40: #e247db !default;
|
||||
$data-color-41: #d313d3 !default;
|
||||
$data-color-42: #921e9b !default;
|
||||
// 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-bg-action-bar: $color-grey-1400,
|
||||
color-border-panel: $color-grey-700,
|
||||
color-border-grid: $color-grey-700,
|
||||
|
||||
// Event category color
|
||||
$color-event-category-informational: #CCCCCC !default;
|
||||
$color-event-category-warning: #FFD629 !default;
|
||||
$color-event-category-error: #FC3232 !default;
|
||||
// Controls
|
||||
color-bg-blastshield: $color-black-transparent-half,
|
||||
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-guidance: $color-blue-400,
|
||||
|
||||
// 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,
|
||||
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-100,
|
||||
color-bg-gallery-tile-yellow: $color-data-yellow-409,
|
||||
|
||||
// Dashboard Tiles
|
||||
color-bg-dashboard-tile: $color-grey-1500,
|
||||
color-fill-tile-symbol: $color-white,
|
||||
color-stroke-tile-symbol: $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-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-text-clear: $color-white,
|
||||
color-text-placeholder: $color-grey-400,
|
||||
|
||||
// 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,
|
||||
|
||||
// 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-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,
|
||||
|
||||
// General Borders
|
||||
color-border-rest: $color-grey-700,
|
||||
color-border-hover: $color-blue-100,
|
||||
color-border-focus: $color-blue-100,
|
||||
color-border-selected: $color-grey-700,
|
||||
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,
|
||||
color-text-nodata: $color-grey-600,
|
||||
color-text-disabled: $color-grey-500,
|
||||
color-text-white: $color-white,
|
||||
color-text-black: $color-black,
|
||||
|
||||
// Buttons
|
||||
color-bg-btn-standard-rest: $color-grey-100,
|
||||
color-bg-btn-standard-hover: $color-grey-200,
|
||||
color-bg-btn-standard-focus: $color-grey-100,
|
||||
color-bg-btn-standard-pressed-selected: $color-grey-300,
|
||||
color-bg-btn-standard-disabled: $color-grey-100,
|
||||
|
||||
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-1100,
|
||||
|
||||
color-bg-btn-danger-rest: $color-red-300,
|
||||
color-bg-btn-danger-hover: $color-red-200,
|
||||
color-bg-btn-danger-focus: $color-red-300,
|
||||
color-bg-btn-danger-pressed-selected: $color-red-100,
|
||||
color-bg-btn-danger-disabled: $color-grey-200,
|
||||
|
||||
// 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,
|
||||
|
||||
// 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,
|
||||
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,
|
||||
|
||||
// Charts
|
||||
color-chart-X-Y-lines: $color-grey-400,
|
||||
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 picker
|
||||
color-picker-border-inner: $color-white,
|
||||
color-picker-border-outer: $color-error-global-100,
|
||||
|
||||
// Data color
|
||||
data-color-1: #01b8aa,
|
||||
data-color-2: #6be8dc,
|
||||
data-color-3: #59cec3,
|
||||
data-color-4: #08bca6,
|
||||
data-color-5: #0aa58e,
|
||||
data-color-6: #12937d,
|
||||
data-color-7: #ffffff,
|
||||
data-color-8: #f2f2f2,
|
||||
data-color-9: #e6e6e6,
|
||||
data-color-10: #cccccc,
|
||||
data-color-11: #b3b3b3,
|
||||
data-color-12: #999999,
|
||||
data-color-13: #fd625e,
|
||||
data-color-14: #ff7878,
|
||||
data-color-15: #fc5454,
|
||||
data-color-16: #fc3232,
|
||||
data-color-17: #e81818,
|
||||
data-color-18: #b21f1f,
|
||||
data-color-19: #f2c80f,
|
||||
data-color-20: #fcdf65,
|
||||
data-color-21: #ffd629,
|
||||
data-color-22: #ffce00,
|
||||
data-color-23: #e5bd13,
|
||||
data-color-24: #c9a611,
|
||||
data-color-25: #8ad4eb,
|
||||
data-color-26: #caf8ff,
|
||||
data-color-27: #b0f8ff,
|
||||
data-color-28: #73f8ff,
|
||||
data-color-29: #27e2dd,
|
||||
data-color-30: #1bb2a7,
|
||||
data-color-31: #fe9666,
|
||||
data-color-32: #ffcdbb,
|
||||
data-color-33: #f7a389,
|
||||
data-color-34: #f98855,
|
||||
data-color-35: #f9724e,
|
||||
data-color-36: #bf714d,
|
||||
data-color-37: #a66999,
|
||||
data-color-38: #efa5e1,
|
||||
data-color-39: #ea78d9,
|
||||
data-color-40: #e247db,
|
||||
data-color-41: #d313d3,
|
||||
data-color-42: #921e9b,
|
||||
|
||||
), $theme-dark);
|
||||
|
|
@ -1,139 +1,234 @@
|
|||
/**
|
||||
* Default light theme colors
|
||||
* Default Light Theme Colors
|
||||
*/
|
||||
|
||||
@import "../color.palette";
|
||||
|
||||
// Background colors
|
||||
$color-bg-block: $color-white !default;
|
||||
$color-bg-btn-light: $color-neutral-light !default;
|
||||
$color-bg-btn-primary-hover: $color-theme-dark !default;
|
||||
$color-bg-btn-primary-pressed: $color-theme-dark !default;
|
||||
$color-bg-btn-secondary-default: $color-grey-2 !default;
|
||||
$color-bg-btn-secondary-hover: $color-grey-4 !default;
|
||||
$color-bg-btn-secondary-pressed: $color-grey-4 !default;
|
||||
$color-bg-chart: $color-white !default;
|
||||
$color-bg-configure-pane-container: $color-neutral-lighter !default;
|
||||
$color-bg-content: $color-neutral-lighter !default;
|
||||
$color-bg-dashboard-actionbar: $color-neutral-secondary-alt-4 !default;
|
||||
$color-bg-default: $color-white !default;
|
||||
$color-bg-disabled: $color-neutral-tertiary-alt-2 !default;
|
||||
$color-bg-field-loading: $color-neutral-light !default;
|
||||
$color-bg-form: $color-white !default;
|
||||
$color-bg-gallery-card-banner: $color-neutral-primary !default;
|
||||
$color-bg-gallery-card-blue: $color-theme-primary !default;
|
||||
$color-bg-gallery-card-red: $color-red-5 !default;
|
||||
$color-bg-gallery-card-solid: $color-neutral-tertiary-2 !default;
|
||||
$color-bg-gallery-card-yellow: $color-yellow-5 !default;
|
||||
$color-bg-gallery-card: $color-neutral-light !default;
|
||||
$color-bg-hover: $color-theme-lighter !default;
|
||||
$color-bg-management-list: $color-white !default;
|
||||
$color-bg-measurement: $color-white !default;
|
||||
$color-bg-navbar: $color-neutral-primary !default;
|
||||
$color-bg-overlay: $color-half-opacity-black !default;
|
||||
$color-bg-pane: $color-neutral-light !default;
|
||||
$color-bg-panel: $color-white !default;
|
||||
$color-bg-react-grid-item: $color-neutral-tertiary-alt !default;
|
||||
$color-bg-searchbar: $color-neutral-lighter-alt !default;
|
||||
$color-bg-select-default: $color-neutral-light !default;
|
||||
$color-bg-selected-hover: $color-theme-dark !default;
|
||||
$color-bg-separator: $color-neutral-light !default;
|
||||
$color-bg-tabbed-pane-small: $color-neutral-light !default;
|
||||
$color-bg-table-status-tick: $color-neutral-tertiary-alt-2 !default;
|
||||
$color-bg-tile: $color-white !default;
|
||||
$color-bg-upload: $color-neutral-tertiary-2 !default;
|
||||
|
||||
// Border color
|
||||
$color-border-active: $color-neutral-primary !default;
|
||||
$color-border-default: $color-neutral-tertiary-alt !default;
|
||||
$color-border-disabled: $color-neutral-tertiary-alt-2 !default;
|
||||
$color-border-gallery-card-default: $color-neutral-tertiary !default;
|
||||
$color-border-gallery-card-hover: $color-neutral-primary !default;
|
||||
$color-border-inactive: $color-neutral-tertiary-alt !default;
|
||||
$color-border-searchbox: $color-neutral-lighter !default;
|
||||
$color-border-section-separator: $color-neutral-tertiary-alt-2 !default;
|
||||
$color-border-selected-disabled: $color-neutral-secondary-alt-5 !default;
|
||||
// Theme map
|
||||
|
||||
// Text color
|
||||
$color-text-cancel: $color-neutral-secondary-alt !default;
|
||||
$color-text-default: $color-black !default;
|
||||
$color-text-disabled: $color-grey-1 !default;
|
||||
$color-text-gallery-card-content: $color-neutral-secondary-alt-2 !default;
|
||||
$color-text-gallery-card-header: $color-neutral-primary !default;
|
||||
$color-text-inactive: $color-neutral-secondary-alt !default;
|
||||
$color-text-neutral-primary-alt-2: $color-neutral-primary-alt-2 !default;
|
||||
$color-text-neutral-primary: $color-neutral-primary !default;
|
||||
$color-text-neutral-secondary-alt-3: $color-neutral-secondary-alt-3 !default;
|
||||
$color-text-neutral-secondary-alt: $color-neutral-secondary-alt !default;
|
||||
$color-text-neutral-tertiary: $color-neutral-tertiary !default;
|
||||
$color-text-select-option-disabled: $color-grey-1 !default;
|
||||
$theme-light: () !default;
|
||||
$theme-light: map-merge((
|
||||
|
||||
// Miscellaneous color
|
||||
$color-chart-ticks: $color-neutral-secondary-alt-4 !default;
|
||||
$color-chart-multi-state-pattern: $color-neutral-tertiary-alt-2 !default;
|
||||
$color-header-accent: $color-theme-primary !default;
|
||||
$color-header: $color-neutral-tertiary-alt-2 !default;
|
||||
$color-item-active: $color-theme-light !default;
|
||||
$color-item-hover: $color-theme-lighter !default;
|
||||
$color-layout-divider: $color-neutral-tertiary-alt-2 !default;
|
||||
$color-link-default: $color-blue-2 !default;
|
||||
$color-link-hover: $color-blue-1 !default;
|
||||
$color-loading: $color-neutral-secondary-alt-3 !default;
|
||||
$color-outline-default: $color-neutral-tertiary-alt-2 !default;
|
||||
$color-outline-focus: $color-neutral-primary !default;
|
||||
$color-picker-border-inner: $color-yellow-1 !default;
|
||||
$color-picker-border-outer: $color-red-2 !default;
|
||||
$color-shadow-neutral-tertiary-alt: $color-neutral-tertiary-alt-2 !default;
|
||||
$color-status-reported-error: $color-red !default;
|
||||
$color-status-reported-success: $color-green !default;
|
||||
$color-status-syncing: $color-yellow-2 !default;
|
||||
$color-stroke-default: $color-neutral-tertiary-alt !default;
|
||||
// Layouts
|
||||
color-bg-navbar: $color-grey-900,
|
||||
color-bg-navbar-hover: $color-grey-200,
|
||||
color-bg-header: $color-grey-100,
|
||||
color-bg-header-hover: $color-grey-200,
|
||||
color-bg-masthead: $color-grey-1300,
|
||||
color-bg-masthead-hover: $color-grey-200,
|
||||
|
||||
// Data colors
|
||||
$data-color-1: #01B8AA !default;
|
||||
$data-color-2: #99E3DD !default;
|
||||
$data-color-3: #67D4CC !default;
|
||||
$data-color-4: #34C6BB !default;
|
||||
$data-color-5: #018A80 !default;
|
||||
$data-color-6: #015C55 !default;
|
||||
$data-color-7: #374649 !default;
|
||||
$data-color-8: #AFB5B6 !default;
|
||||
$data-color-9: #879092 !default;
|
||||
$data-color-10: #5F6B6D !default;
|
||||
$data-color-11: #293537 !default;
|
||||
$data-color-12: #1C2325 !default;
|
||||
$data-color-13: #FD625E !default;
|
||||
$data-color-14: #FEC0BF !default;
|
||||
$data-color-15: #FEA19E !default;
|
||||
$data-color-16: #FD817E !default;
|
||||
$data-color-17: #BE4A47 !default;
|
||||
$data-color-18: #7F312F !default;
|
||||
$data-color-19: #F2C80F !default;
|
||||
$data-color-20: #FAE99F !default;
|
||||
$data-color-21: #F7DE6F !default;
|
||||
$data-color-22: #F5D33F !default;
|
||||
$data-color-23: #B6960B !default;
|
||||
$data-color-24: #796408 !default;
|
||||
$data-color-25: #8AD4EB !default;
|
||||
$data-color-26: #D0EEF7 !default;
|
||||
$data-color-27: #B9E5F3 !default;
|
||||
$data-color-28: #A1DDEF !default;
|
||||
$data-color-29: #689FB0 !default;
|
||||
$data-color-30: #456A76 !default;
|
||||
$data-color-31: #FE9666 !default;
|
||||
$data-color-32: #FFD5C2 !default;
|
||||
$data-color-33: #FEC0A3 !default;
|
||||
$data-color-34: #FEAB85 !default;
|
||||
$data-color-35: #BF714D !default;
|
||||
$data-color-36: #7F4B33 !default;
|
||||
$data-color-37: #A66999 !default;
|
||||
$data-color-38: #DBC3D6 !default;
|
||||
$data-color-39: #CAA5C2 !default;
|
||||
$data-color-40: #B887AD !default;
|
||||
$data-color-41: #7D4F73 !default;
|
||||
$data-color-42: #53354D !default;
|
||||
// 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-bg-action-bar: $color-grey-100,
|
||||
color-border-panel: $color-grey-300,
|
||||
color-border-grid: $color-grey-300,
|
||||
|
||||
// Event category colors
|
||||
$color-event-category-informational: #879092 !default;
|
||||
$color-event-category-warning: #FFD629 !default;
|
||||
$color-event-category-error: #FC3232 !default;
|
||||
// Controls
|
||||
color-bg-blastshield: $color-black-transparent-half,
|
||||
color-bg-balloon: $color-white,
|
||||
color-bg-form: $color-white,
|
||||
color-bg-table: $color-white,
|
||||
color-bg-searchbar: $color-white,
|
||||
color-bg-guidance: $color-blue-300,
|
||||
|
||||
// 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,
|
||||
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-200,
|
||||
color-bg-gallery-tile-yellow: $color-data-yellow-407,
|
||||
|
||||
// Dashboard Tiles
|
||||
color-bg-dashboard-tile: $color-grey-100,
|
||||
color-fill-tile-symbol: $color-grey-1200,
|
||||
color-stroke-tile-symbol: $color-grey-1200,
|
||||
|
||||
// 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,
|
||||
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,
|
||||
color-text-placeholder: $color-grey-400,
|
||||
|
||||
// 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,
|
||||
|
||||
// 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-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,
|
||||
|
||||
// General Borders
|
||||
color-border-rest: $color-grey-300,
|
||||
color-border-hover: $color-blue-100,
|
||||
color-border-focus: $color-blue-100,
|
||||
color-border-selected: $color-grey-300,
|
||||
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,
|
||||
color-text-nodata: $color-grey-400,
|
||||
color-text-disabled: $color-grey-500,
|
||||
color-text-white: $color-white,
|
||||
color-text-black: $color-black,
|
||||
|
||||
// Buttons
|
||||
color-bg-btn-standard-rest: $color-grey-100,
|
||||
color-bg-btn-standard-hover: $color-grey-200,
|
||||
color-bg-btn-standard-focus: $color-grey-100,
|
||||
color-bg-btn-standard-pressed-selected: $color-grey-300,
|
||||
color-bg-btn-standard-disabled: $color-grey-100,
|
||||
|
||||
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-100,
|
||||
|
||||
color-bg-btn-danger-rest: $color-red-300,
|
||||
color-bg-btn-danger-hover: $color-red-200,
|
||||
color-bg-btn-danger-focus: $color-red-300,
|
||||
color-bg-btn-danger-pressed-selected: $color-red-100,
|
||||
color-bg-btn-danger-disabled: $color-grey-200,
|
||||
|
||||
// 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,
|
||||
|
||||
// Loading
|
||||
color-bg-loader-panel: $color-grey-200,
|
||||
color-bg-loader-spinner: $color-grey-200,
|
||||
color-border-loader-global-segment: $color-blue-100,
|
||||
color-border-loader-global-track: $color-grey-800,
|
||||
|
||||
// Upload
|
||||
color-bg-upload: $color-grey-400,
|
||||
color-border-upload: $color-grey-300,
|
||||
|
||||
// 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,
|
||||
|
||||
// Charts
|
||||
color-chart-X-Y-lines: $color-grey-400,
|
||||
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 picker
|
||||
color-picker-border-inner: $color-white,
|
||||
color-picker-border-outer: $color-error-global-100,
|
||||
|
||||
// Data colors
|
||||
data-color-1: #01B8AA,
|
||||
data-color-2: #99E3DD,
|
||||
data-color-3: #67D4CC,
|
||||
data-color-4: #34C6BB,
|
||||
data-color-5: #018A80,
|
||||
data-color-6: #015C55,
|
||||
data-color-7: #374649,
|
||||
data-color-8: #AFB5B6,
|
||||
data-color-9: #879092,
|
||||
data-color-10: #5F6B6D,
|
||||
data-color-11: #293537,
|
||||
data-color-12: #1C2325,
|
||||
data-color-13: #FD625E,
|
||||
data-color-14: #FEC0BF,
|
||||
data-color-15: #FEA19E,
|
||||
data-color-16: #FD817E,
|
||||
data-color-17: #BE4A47,
|
||||
data-color-18: #7F312F,
|
||||
data-color-19: #F2C80F,
|
||||
data-color-20: #FAE99F,
|
||||
data-color-21: #F7DE6F,
|
||||
data-color-22: #F5D33F,
|
||||
data-color-23: #B6960B,
|
||||
data-color-24: #796408,
|
||||
data-color-25: #8AD4EB,
|
||||
data-color-26: #D0EEF7,
|
||||
data-color-27: #B9E5F3,
|
||||
data-color-28: #A1DDEF,
|
||||
data-color-29: #689FB0,
|
||||
data-color-30: #456A76,
|
||||
data-color-31: #FE9666,
|
||||
data-color-32: #FFD5C2,
|
||||
data-color-33: #FEC0A3,
|
||||
data-color-34: #FEAB85,
|
||||
data-color-35: #BF714D,
|
||||
data-color-36: #7F4B33,
|
||||
data-color-37: #A66999,
|
||||
data-color-38: #DBC3D6,
|
||||
data-color-39: #CAA5C2,
|
||||
data-color-40: #B887AD,
|
||||
data-color-41: #7D4F73,
|
||||
data-color-42: #53354D,
|
||||
|
||||
), $theme-light);
|
||||
Загрузка…
Ссылка в новой задаче