Remove deprecated colors (#37)
This commit is contained in:
Patricio Beltran
GitHub
Родитель
54ceaacdd9
Коммит
bef78974b6
12
CHANGELOG.md
12
CHANGELOG.md
|
|
@ -1,18 +1,22 @@
|
||||||
# CHANGELOG
|
# CHANGELOG
|
||||||
|
|
||||||
# v8.0.2
|
## v8.0.3
|
||||||
## Changed
|
### Changed
|
||||||
|
- Removed deprecated colors
|
||||||
|
|
||||||
|
## v8.0.2
|
||||||
|
### Changed
|
||||||
- Added shimmer colors
|
- Added shimmer colors
|
||||||
- Added foreground tertiary for less important separations
|
- Added foreground tertiary for less important separations
|
||||||
- Removed utils generated file since it's not needed with dynamic stylesheet generation approach
|
- Removed utils generated file since it's not needed with dynamic stylesheet generation approach
|
||||||
|
|
||||||
## v8.0.1
|
## v8.0.1
|
||||||
## Changed
|
### Changed
|
||||||
- Change non-scss files to use css
|
- Change non-scss files to use css
|
||||||
- Added codegen to generate theme-related typescript files
|
- Added codegen to generate theme-related typescript files
|
||||||
|
|
||||||
## v8.0.0
|
## v8.0.0
|
||||||
## Changed
|
### Changed
|
||||||
- Deprecated mapping and made each theme to have its own palette that shares the same naming convention
|
- Deprecated mapping and made each theme to have its own palette that shares the same naming convention
|
||||||
|
|
||||||
## v7.1.3
|
## v7.1.3
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@microsoft/azure-iot-ux-fluent-css",
|
"name": "@microsoft/azure-iot-ux-fluent-css",
|
||||||
"version": "8.0.2",
|
"version": "8.0.3",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "@microsoft/azure-iot-ux-fluent-css",
|
"name": "@microsoft/azure-iot-ux-fluent-css",
|
||||||
"description": "Azure IoT common styles library for CSS, Colors and Themes",
|
"description": "Azure IoT common styles library for CSS, Colors and Themes",
|
||||||
"version": "8.0.2",
|
"version": "8.0.3",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"types": "lib/index.d.ts",
|
"types": "lib/index.d.ts",
|
||||||
|
|
|
||||||
|
|
@ -19,13 +19,6 @@
|
||||||
--color-light-transparent-tenth: rgba(255, 255, 255, 0.1);
|
--color-light-transparent-tenth: rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Import deprecated color theme mappings
|
|
||||||
*/
|
|
||||||
@import "./deprecated/color.palette";
|
|
||||||
@import "./deprecated/color.light";
|
|
||||||
@import "./deprecated/color.dark";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Import palettes for different supported themes
|
* Import palettes for different supported themes
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,296 +0,0 @@
|
||||||
/**
|
|
||||||
* Default Dark Theme Colors
|
|
||||||
*/
|
|
||||||
|
|
||||||
:root[theme='dark'] {
|
|
||||||
/* Shell */
|
|
||||||
--color-bg-navbar: var(--color-grey-70);
|
|
||||||
--color-bg-navbar-hover: var(--color-grey-60);
|
|
||||||
--color-bg-navbar-selected: var(--color-grey-80);
|
|
||||||
--color-bg-navbar-selected-hover: var(--color-grey-90);
|
|
||||||
--color-bg-header: var(--color-grey-80);
|
|
||||||
--color-bg-header-hover: var(--color-grey-80);
|
|
||||||
--color-bg-masthead: var(--color-grey-50);
|
|
||||||
--color-bg-masthead-hover: var(--color-text-20);
|
|
||||||
--color-bg-masthead-active: var(--color-grey-60);
|
|
||||||
--color-outline-masthead: var(--color-white);
|
|
||||||
--color-border-navbar-separator: var(--color-grey-60);
|
|
||||||
--color-border-masthead-focus: var(--color-white);
|
|
||||||
--color-border-navbar-focus: var(--color-blue-10);
|
|
||||||
--color-border-navbar-selected: var(--color-blue-10);
|
|
||||||
|
|
||||||
/* Surfaces */
|
|
||||||
--color-bg-panel: var(--color-grey-80);
|
|
||||||
--color-bg-container: var(--color-grey-80);
|
|
||||||
--color-bg-dashboard: var(--color-grey-80);
|
|
||||||
--color-bg-container-panel: var(--color-black);
|
|
||||||
--color-border-container-panel: var(--color-grey-60);
|
|
||||||
--color-bg-cmdbar: var(--color-grey-90);
|
|
||||||
--color-bg-titlebar: var(--color-grey-90);
|
|
||||||
--color-border-panel: var(--color-grey-60);
|
|
||||||
--color-border-grid: var(--color-grey-60);
|
|
||||||
--shadow-container-panel: 0 25.6px 57.6px 0 var(--color-dark-transparent-tenth);
|
|
||||||
--shadow-popup-panel: -3px 3px 10px -3px var(--color-dark-transparent-primary);
|
|
||||||
--shadow-balloon: 0 8px 10px 0 var(--color-dark-transparent-tenth);
|
|
||||||
|
|
||||||
/* Controls */
|
|
||||||
--color-bg-blastshield: var(--color-dark-transparent-primary);
|
|
||||||
--color-bg-balloon: var(--color-black);
|
|
||||||
--color-bg-form: transparent;
|
|
||||||
--color-bg-table: transparent;
|
|
||||||
--color-bg-searchbar-active: var(--color-white);
|
|
||||||
--color-bg-searchbar-rest: var(--color-light-transparent-third);
|
|
||||||
--color-bg-searchbar-focus: var(--color-white);
|
|
||||||
--color-text-searchbar-rest: var(--color-white);
|
|
||||||
--color-text-searchbar-active: var(--color-black);
|
|
||||||
--color-icon-searchbar-btn: var(--color-white);
|
|
||||||
--color-bg-thumbnail: var(--color-grey-60);
|
|
||||||
--color-icon-thumbnail: var(--color-white);
|
|
||||||
--color-icon-tile: var(--color-grey-40);
|
|
||||||
|
|
||||||
/* Interactions */
|
|
||||||
--color-bg-hover: var(--color-grey-70);
|
|
||||||
--color-bg-selected: var(--color-grey-60);
|
|
||||||
|
|
||||||
/* All Tiles */
|
|
||||||
--color-border-tile: var(--color-grey-60);
|
|
||||||
--color-border-tile-hover: var(--color-blue-10);
|
|
||||||
|
|
||||||
/* Gallery Tiles */
|
|
||||||
--color-bg-gallery-tile: var(--color-grey-90);
|
|
||||||
--color-bg-gallery-tile-default: var(--color-black);
|
|
||||||
--color-bg-gallery-tile-blue: var(--color-blue-40);
|
|
||||||
--color-bg-gallery-tile-banner: var(--color-grey-90);
|
|
||||||
--color-icon-gallery-tile-blue: var(--color-white);
|
|
||||||
--color-text-gallery-tile-banner: var(--color-white);
|
|
||||||
--color-border-card-banner: var(--color-grey-80);
|
|
||||||
|
|
||||||
/* Dashboard Tiles */
|
|
||||||
--color-bg-dashboard: var(--color-grey-80);
|
|
||||||
--color-tile-symbol: var(--color-white);
|
|
||||||
--color-stroke-tile-symbol: var(--color-white);
|
|
||||||
|
|
||||||
/* Input Fields */
|
|
||||||
--color-bg-input-rest: var(--color-grey-80);
|
|
||||||
--color-bg-input-hover: transparent;
|
|
||||||
--color-bg-input-selected: transparent;
|
|
||||||
--color-bg-input-disabled: var(--color-grey-70);
|
|
||||||
|
|
||||||
--color-border-input-rest: var(--color-grey-8);
|
|
||||||
--color-border-input-hover: var(--color-white);
|
|
||||||
--color-border-input-selected: var(--color-blue-10);
|
|
||||||
--color-border-input-error: var(--color-status-60);
|
|
||||||
|
|
||||||
--color-text-regular: var(--color-white);
|
|
||||||
--color-text-placeholder: var(--color-text-30);
|
|
||||||
|
|
||||||
/* Dropdowns */
|
|
||||||
--color-dropdown-rest: var(--color-grey-90);
|
|
||||||
--color-dropdown-hover: var(--color-grey-50);
|
|
||||||
--color-dropdown-focus: var(--color-grey-60);
|
|
||||||
--color-dropdown-pressed: var(--color-grey-60);
|
|
||||||
--color-dropdown-disabled: var(--color-grey-70);
|
|
||||||
--color-border-dropdown-rest: var(--color-text-20);
|
|
||||||
--color-border-dropdown-focus: var(--color-blue-10);
|
|
||||||
--color-text-dropdown-disabled: var(--color-text-disabled);
|
|
||||||
|
|
||||||
/* Radio button */
|
|
||||||
--color-bg-radio-rest: transparent;
|
|
||||||
--color-bg-radio-hover: transparent;
|
|
||||||
--color-bg-radio-selected: transparent;
|
|
||||||
--color-bg-radio-focused: transparent;
|
|
||||||
--color-bg-radio-disabled: var(--color-grey-60);
|
|
||||||
--color-border-radio-rest: var(--color-white);
|
|
||||||
--color-border-radio-hover: var(--color-blue-10);
|
|
||||||
--color-border-radio-selected: var(--color-white);
|
|
||||||
--color-border-radio-focused: var(--color-white);
|
|
||||||
--color-border-radio-disabled: var(--color-grey-60);
|
|
||||||
--color-center-radio-hover: var(--color-blue-10);
|
|
||||||
--color-center-radio-selected: var(--color-white);
|
|
||||||
--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-20);
|
|
||||||
--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-text-30);
|
|
||||||
--color-bg-toggle-off-disabled: var(--color-text-30);
|
|
||||||
--color-border-toggle-on-rest: var(--color-blue-10);
|
|
||||||
--color-border-toggle-off-rest: var(--color-white);
|
|
||||||
--color-border-toggle-on-hover: var(--color-text-20);
|
|
||||||
--color-border-toggle-off-hover: var(--color-white);
|
|
||||||
--color-border-toggle-on-focus: var(--color-blue-50);
|
|
||||||
--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-30);
|
|
||||||
--color-circle-toggle-on-rest: var(--color-white);
|
|
||||||
--color-circle-toggle-off-rest: var(--color-grey-40);
|
|
||||||
--color-circle-toggle-on-hover: var(--color-white);
|
|
||||||
--color-circle-toggle-off-hover: var(--color-grey-20);
|
|
||||||
--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-checkmark-checkbox: var(--color-white);
|
|
||||||
--color-border-checkbox-hover: var(--color-white);
|
|
||||||
--color-bg-checkbox-selected: transparent;
|
|
||||||
|
|
||||||
/* General Borders */
|
|
||||||
--color-border-rest: var(--color-text-20);
|
|
||||||
--color-border-hover: var(--color-white);
|
|
||||||
--color-border-focus: var(--color-blue-10);
|
|
||||||
--color-border-selected: var(--color-blue-10);
|
|
||||||
--color-border-disabled: var(--color-grey-60);
|
|
||||||
--color-border-error: var(--color-status-60);
|
|
||||||
--color-border-controls: var(--color-white);
|
|
||||||
--color-outline: var(--color-blue-10);
|
|
||||||
|
|
||||||
/* General Texts */
|
|
||||||
--color-text-rest: var(--color-white);
|
|
||||||
--color-text-chevron: var(--color-white);
|
|
||||||
--color-text-error: var(--color-status-60);
|
|
||||||
--color-text-required: var(--color-status-30);
|
|
||||||
--color-text-visited: var(--color-blue-60);
|
|
||||||
--color-text-nodata: var(--color-text-30);
|
|
||||||
--color-text-disabled: var(--color-text-30);
|
|
||||||
--color-text-masthead: var(--color-white);
|
|
||||||
--color-text-navbar: var(--color-white);
|
|
||||||
--color-text-active: var(--color-white);
|
|
||||||
--color-text-action-trigger: var(--color-text-rest);
|
|
||||||
|
|
||||||
/* Buttons */
|
|
||||||
--color-bg-btn-standard-rest: transparent;
|
|
||||||
--color-bg-btn-standard-hover: var(--color-grey-90);
|
|
||||||
--color-bg-btn-standard-focus: transparent;
|
|
||||||
--color-bg-btn-standard-selected: var(--color-grey-70);
|
|
||||||
--color-bg-btn-standard-disabled: var(--color-grey-20);
|
|
||||||
--color-text-btn-standard: var(--color-white);
|
|
||||||
--color-border-btn-standard: var(--color-text-20);
|
|
||||||
|
|
||||||
--color-bg-btn-primary-rest: var(--color-blue-10);
|
|
||||||
--color-bg-btn-primary-hover: var(--color-blue-30);
|
|
||||||
--color-bg-btn-primary-focus: var(--color-blue-20);
|
|
||||||
--color-bg-btn-primary-selected: var(--color-blue-40);
|
|
||||||
--color-bg-btn-primary-disabled: var(--color-grey-20);
|
|
||||||
--color-outline-btn-primary-focus: var(--color-white);
|
|
||||||
--color-text-btn-primary: var(--color-white);
|
|
||||||
--color-border-btn-primary: var(--color-blue-10);
|
|
||||||
|
|
||||||
--color-bg-btn-negative-rest: var(--color-status-60);
|
|
||||||
--color-bg-btn-negative-hover: var(--color-status-60);
|
|
||||||
--color-bg-btn-negative-focus: var(--color-status-60);
|
|
||||||
--color-bg-btn-negative-selected: var(--color-status-60);
|
|
||||||
--color-bg-btn-negative-disabled: var(--color-grey-20);
|
|
||||||
--color-outline-btn-negative-focus: var(--color-white);
|
|
||||||
--color-text-btn-negative: var(--color-white);
|
|
||||||
--color-border-btn-negative: var(--color-status-30);
|
|
||||||
|
|
||||||
/* Hyperlinks */
|
|
||||||
--color-hyperlink-rest: var(--color-blue-50);
|
|
||||||
--color-hyperlink-hover: var(--color-blue-30);
|
|
||||||
--color-hyperlink-focus: var(--color-blue-50);
|
|
||||||
--color-hyperlink-disabled: var(--color-text-30);
|
|
||||||
|
|
||||||
/* Loading */
|
|
||||||
--color-bg-loader-panel: var(--color-grey-70);
|
|
||||||
--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-30);
|
|
||||||
--color-pivot-hover: var(--color-white);
|
|
||||||
--color-pivot-focus: var(--color-white);
|
|
||||||
--color-pivot-press: var(--color-white);
|
|
||||||
--color-pivot-selected: var(--color-white);
|
|
||||||
--color-border-pivot: var(--color-blue-10);
|
|
||||||
--color-text-pivot-rest: var(--color-grey-30);
|
|
||||||
--color-text-pivot-selected: var(--color-text-30);
|
|
||||||
|
|
||||||
/* Charts */
|
|
||||||
--color-chart-xy-lines: var(--color-grey-60);
|
|
||||||
--color-chart-gap-stroke: var(--color-grey-60);
|
|
||||||
|
|
||||||
/* Alerts */
|
|
||||||
--color-bg-alert-info: var(--color-global-30);
|
|
||||||
--color-bg-alert-info-close-hover: transparent;
|
|
||||||
--color-text-alert-info: var(--color-blue-40);
|
|
||||||
|
|
||||||
--color-bg-alert-warning: var(--color-global-10);
|
|
||||||
--color-bg-alert-warning-close-hover: transparent;
|
|
||||||
--color-text-alert-warning: var(--color-text-10);
|
|
||||||
|
|
||||||
--color-bg-alert-error: var(--color-global-40);
|
|
||||||
--color-bg-alert-error-close-hover: transparent;
|
|
||||||
--color-text-alert-error: var(--color-status-30);
|
|
||||||
|
|
||||||
--color-bg-alert-success: var(--color-global-20);
|
|
||||||
--color-bg-alert-success-close-hover: transparent;
|
|
||||||
--color-text-alert-success: var(--color-status-40);
|
|
||||||
|
|
||||||
/* Color picker */
|
|
||||||
--color-border-colorpicker-in: var(--color-white);
|
|
||||||
--color-border-colorpicker-out: var(--color-text-20);
|
|
||||||
|
|
||||||
/* Calendar */
|
|
||||||
--color-bg-calendar-btn-current: var(--color-blue-10);
|
|
||||||
--color-bg-calendar-btn-hover: var(--color-grey-20);
|
|
||||||
--color-bg-calendar-btn-focus: transparent;
|
|
||||||
--color-border-calendar-btn-focus: var(--color-text-20);
|
|
||||||
|
|
||||||
/* Icon */
|
|
||||||
--color-icon-danger: var(--color-status-60);
|
|
||||||
|
|
||||||
/* Data Colors */
|
|
||||||
--data-color-1: var(--color-green-1);
|
|
||||||
--data-color-2: var(--color-green-2);
|
|
||||||
--data-color-3: var(--color-green-3);
|
|
||||||
--data-color-4: var(--color-green-4);
|
|
||||||
--data-color-5: var(--color-green-5);
|
|
||||||
--data-color-6: var(--color-green-6);
|
|
||||||
--data-color-7: var(--color-lightgrey-1);
|
|
||||||
--data-color-8: var(--color-lightgrey-2);
|
|
||||||
--data-color-9: var(--color-lightgrey-3);
|
|
||||||
--data-color-10: var(--color-lightgrey-4);
|
|
||||||
--data-color-11: var(--color-lightgrey-5);
|
|
||||||
--data-color-12: var(--color-lightgrey-6);
|
|
||||||
--data-color-13: var(--color-red-1);
|
|
||||||
--data-color-14: var(--color-red-2);
|
|
||||||
--data-color-15: var(--color-red-3);
|
|
||||||
--data-color-16: var(--color-red-4);
|
|
||||||
--data-color-17: var(--color-red-5);
|
|
||||||
--data-color-18: var(--color-red-6);
|
|
||||||
--data-color-19: var(--color-yellow-1);
|
|
||||||
--data-color-20: var(--color-yellow-2);
|
|
||||||
--data-color-21: var(--color-yellow-3);
|
|
||||||
--data-color-22: var(--color-yellow-4);
|
|
||||||
--data-color-23: var(--color-yellow-5);
|
|
||||||
--data-color-24: var(--color-yellow-6);
|
|
||||||
--data-color-25: var(--color-lightblue-1);
|
|
||||||
--data-color-26: var(--color-lightblue-2);
|
|
||||||
--data-color-27: var(--color-lightblue-3);
|
|
||||||
--data-color-28: var(--color-lightblue-4);
|
|
||||||
--data-color-29: var(--color-lightblue-5);
|
|
||||||
--data-color-30: var(--color-lightblue-6);
|
|
||||||
--data-color-31: var(--color-orange-1);
|
|
||||||
--data-color-32: var(--color-orange-2);
|
|
||||||
--data-color-33: var(--color-orange-3);
|
|
||||||
--data-color-34: var(--color-orange-4);
|
|
||||||
--data-color-35: var(--color-orange-5);
|
|
||||||
--data-color-36: var(--color-orange-6);
|
|
||||||
--data-color-37: var(--color-purple-1);
|
|
||||||
--data-color-38: var(--color-purple-2);
|
|
||||||
--data-color-39: var(--color-purple-3);
|
|
||||||
--data-color-40: var(--color-purple-4);
|
|
||||||
--data-color-41: var(--color-purple-5);
|
|
||||||
--data-color-42: var(--color-purple-6);
|
|
||||||
}
|
|
||||||
|
|
@ -1,296 +0,0 @@
|
||||||
/**
|
|
||||||
* Default Light Theme Colors
|
|
||||||
*/
|
|
||||||
|
|
||||||
:root, :root[theme='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-bg-masthead-active: var(--color-grey-30);
|
|
||||||
--color-outline-masthead: var(--color-white);
|
|
||||||
--color-border-navbar-separator: var(--color-grey-30);
|
|
||||||
--color-border-masthead-focus: var(--color-white);
|
|
||||||
--color-border-navbar-focus: var(--color-blue-10);
|
|
||||||
--color-border-navbar-selected: var(--color-blue-10);
|
|
||||||
|
|
||||||
/* Surfaces */
|
|
||||||
--color-bg-panel: var(--color-grey-10);
|
|
||||||
--color-bg-container: var(--color-white);
|
|
||||||
--color-bg-dashboard: var(--color-grey-10);
|
|
||||||
--color-bg-container-panel: var(--color-white);
|
|
||||||
--color-border-container-panel: var(--color-grey-40);
|
|
||||||
--color-bg-cmdbar: var(--color-white);
|
|
||||||
--color-bg-titlebar: var(--color-grey-30);
|
|
||||||
--color-border-panel: var(--color-grey-40);
|
|
||||||
--color-border-grid: var(--color-grey-40);
|
|
||||||
--shadow-container-panel: 0 25.6px 57.6px 0 var(--color-dark-transparent-tenth);
|
|
||||||
--shadow-popup-panel: -3px 3px 10px -3px var(--color-dark-transparent-primary);
|
|
||||||
--shadow-balloon: 0 8px 10px 0 var(--color-dark-transparent-tenth);
|
|
||||||
|
|
||||||
/* Controls */
|
|
||||||
--color-bg-blastshield: var(--color-dark-transparent-third);
|
|
||||||
--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-light-transparent-third);
|
|
||||||
--color-bg-searchbar-focus: var(--color-white);
|
|
||||||
--color-icon-searchbar-btn: var(--color-white);
|
|
||||||
--color-bg-thumbnail: var(--color-text-20);
|
|
||||||
--color-text-searchbar-rest: var(--color-white);
|
|
||||||
--color-text-searchbar-active: var(--color-black);
|
|
||||||
--color-icon-thumbnail: var(--color-white);
|
|
||||||
--color-icon-tile: var(--color-grey-40);
|
|
||||||
|
|
||||||
/* Interactions */
|
|
||||||
--color-bg-hover: var(--color-grey-20);
|
|
||||||
--color-bg-selected: var(--color-white);
|
|
||||||
|
|
||||||
/* All Tiles */
|
|
||||||
--color-border-tile: var(--color-grey-30);
|
|
||||||
--color-border-tile-hover: var(--color-blue-10);
|
|
||||||
|
|
||||||
/* Gallery Tiles */
|
|
||||||
--color-bg-gallery-tile: var(--color-white);
|
|
||||||
--color-bg-gallery-tile-default: var(--color-white);
|
|
||||||
--color-bg-gallery-tile-blue: var(--color-blue-40);
|
|
||||||
--color-bg-gallery-tile-banner: var(--color-black);
|
|
||||||
--color-icon-gallery-tile-blue: var(--color-white);
|
|
||||||
--color-text-gallery-tile-banner: var(--color-white);
|
|
||||||
--color-border-card-banner: transparent;
|
|
||||||
|
|
||||||
/* 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-20);
|
|
||||||
|
|
||||||
--color-border-input-rest: var(--color-grey-40);
|
|
||||||
--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-20);
|
|
||||||
--color-dropdown-focus: var(--color-grey-30);
|
|
||||||
--color-dropdown-pressed: var(--color-grey-30);
|
|
||||||
--color-dropdown-disabled: var(--color-white);
|
|
||||||
--color-border-dropdown-rest: var(--color-grey-40);
|
|
||||||
--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-text-10);
|
|
||||||
--color-border-radio-focused: var(--color-text-10);
|
|
||||||
--color-border-radio-disabled: var(--color-text-30);
|
|
||||||
--color-center-radio-hover: var(--color-text-10);
|
|
||||||
--color-center-radio-selected: var(--color-blue-20);
|
|
||||||
--color-center-radio-disabled: var(--color-grey-40);
|
|
||||||
|
|
||||||
/* 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-20);
|
|
||||||
--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-grey-40);
|
|
||||||
--color-bg-toggle-off-disabled: var(--color-white);
|
|
||||||
--color-border-toggle-on-rest: var(--color-blue-10);
|
|
||||||
--color-border-toggle-off-rest: var(--color-text-20);
|
|
||||||
--color-border-toggle-on-hover: var(--color-blue-20);
|
|
||||||
--color-border-toggle-off-hover: var(--color-text-10);
|
|
||||||
--color-border-toggle-on-focus: var(--color-blue-10);
|
|
||||||
--color-border-toggle-off-focus: var(--color-text-10);
|
|
||||||
--color-border-toggle-on-disabled: var(--color-grey-40);
|
|
||||||
--color-border-toggle-off-disabled: var(--color-text-10);
|
|
||||||
--color-circle-toggle-on-rest: var(--color-white);
|
|
||||||
--color-circle-toggle-off-rest: var(--color-text-20);
|
|
||||||
--color-circle-toggle-on-hover: var(--color-white);
|
|
||||||
--color-circle-toggle-off-hover: var(--color-black);
|
|
||||||
--color-circle-toggle-on-focus: var(--color-white);
|
|
||||||
--color-circle-toggle-off-focus: var(--color-text-20);
|
|
||||||
--color-circle-toggle-on-disabled: var(--color-grey-20);
|
|
||||||
--color-circle-toggle-off-disabled: var(--color-grey-40);
|
|
||||||
|
|
||||||
/* Checkbox */
|
|
||||||
--color-checkmark-checkbox: var(--color-white);
|
|
||||||
--color-border-checkbox-hover: var(--color-text-10);
|
|
||||||
--color-bg-checkbox-selected: var(--color-blue-10);
|
|
||||||
|
|
||||||
/* General Borders */
|
|
||||||
--color-border-rest: var(--color-grey-40);
|
|
||||||
--color-border-hover: var(--color-text-10);
|
|
||||||
--color-border-focus: var(--color-blue-10);
|
|
||||||
--color-border-selected: var(--color-blue-20);
|
|
||||||
--color-border-disabled: var(--color-grey-40);
|
|
||||||
--color-border-error: var(--color-status-30);
|
|
||||||
--color-border-controls: var(--color-grey-40);
|
|
||||||
--color-outline: var(--color-blue-10);
|
|
||||||
|
|
||||||
/*General Texts */
|
|
||||||
--color-text-rest: var(--color-text-10);
|
|
||||||
--color-text-chevron: var(--color-text-10);
|
|
||||||
--color-text-error: var(--color-status-30);
|
|
||||||
--color-text-required: var(--color-status-30);
|
|
||||||
--color-text-visited: var(--color-blue-40);
|
|
||||||
--color-text-nodata: var(--color-text-20);
|
|
||||||
--color-text-disabled: var(--color-text-20);
|
|
||||||
--color-text-masthead: var(--color-white);
|
|
||||||
--color-text-navbar: var(--color-text-10);
|
|
||||||
--color-text-active: var(--color-white);
|
|
||||||
--color-text-action-trigger: var(--color-text-rest);
|
|
||||||
|
|
||||||
/* Buttons */
|
|
||||||
--color-bg-btn-standard-rest: var(--color-white);
|
|
||||||
--color-bg-btn-standard-hover: var(--color-grey-20);
|
|
||||||
--color-bg-btn-standard-focus: var(--color-white);
|
|
||||||
--color-bg-btn-standard-selected: var(--color-grey-30);
|
|
||||||
--color-bg-btn-standard-disabled: var(--color-grey-20);
|
|
||||||
--color-text-btn-standard: var(--color-black);
|
|
||||||
--color-border-btn-standard: var(--color-text-20);
|
|
||||||
|
|
||||||
--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-grey-20);
|
|
||||||
--color-outline-btn-primary-focus: var(--color-white);
|
|
||||||
--color-text-btn-primary: var(--color-white);
|
|
||||||
--color-border-btn-primary: var(--color-blue-10);
|
|
||||||
|
|
||||||
--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-selected: var(--color-status-30);
|
|
||||||
--color-bg-btn-negative-disabled: var(--color-grey-20);
|
|
||||||
--color-outline-btn-negative-focus: var(--color-white);
|
|
||||||
--color-text-btn-negative: var(--color-white);
|
|
||||||
--color-border-btn-negative: var(--color-status-30);
|
|
||||||
|
|
||||||
/* Hyperlinks */
|
|
||||||
--color-hyperlink-rest: var(--color-blue-20);
|
|
||||||
--color-hyperlink-hover: var(--color-blue-30);
|
|
||||||
--color-hyperlink-focus: var(--color-blue-10);
|
|
||||||
--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);
|
|
||||||
--color-text-pivot-rest: var(--color-text-20);
|
|
||||||
--color-text-pivot-selected: var(--color-text-10);
|
|
||||||
|
|
||||||
/* Charts */
|
|
||||||
--color-chart-xy-lines: var(--color-grey-30);
|
|
||||||
--color-chart-gap-stroke: var(--color-grey-30);
|
|
||||||
|
|
||||||
/* Alerts */
|
|
||||||
--color-bg-alert-info: var(--color-global-30);
|
|
||||||
--color-bg-alert-info-close-hover: transparent;
|
|
||||||
--color-text-alert-info: var(--color-blue-40);
|
|
||||||
|
|
||||||
--color-bg-alert-warning: var(--color-global-10);
|
|
||||||
--color-bg-alert-warning-close-hover: transparent;
|
|
||||||
--color-text-alert-warning: var(--color-text-10);
|
|
||||||
|
|
||||||
--color-bg-alert-error: var(--color-global-40);
|
|
||||||
--color-bg-alert-error-close-hover: transparent;
|
|
||||||
--color-text-alert-error: var(--color-status-30);
|
|
||||||
|
|
||||||
--color-bg-alert-success: var(--color-global-20);
|
|
||||||
--color-bg-alert-success-close-hover: transparent;
|
|
||||||
--color-text-alert-success: var(--color-status-40);
|
|
||||||
|
|
||||||
/* Color picker */
|
|
||||||
--color-border-colorpicker-in: var(--color-white);
|
|
||||||
--color-border-colorpicker-out: var(--color-text-20);
|
|
||||||
|
|
||||||
/* Calendar */
|
|
||||||
--color-bg-calendar-btn-current: var(--color-blue-10);
|
|
||||||
--color-bg-calendar-btn-hover: var(--color-grey-20);
|
|
||||||
--color-bg-calendar-btn-focus: transparent;
|
|
||||||
--color-border-calendar-btn-focus: var(--color-text-20);
|
|
||||||
|
|
||||||
/* Icon */
|
|
||||||
--color-icon-danger: var(--color-status-30);
|
|
||||||
|
|
||||||
/* Data Colors */
|
|
||||||
--data-color-1: var(--color-green-1);
|
|
||||||
--data-color-2: var(--color-green-7);
|
|
||||||
--data-color-3: var(--color-green-8);
|
|
||||||
--data-color-4: var(--color-green-9);
|
|
||||||
--data-color-5: var(--color-green-10);
|
|
||||||
--data-color-6: var(--color-green-11);
|
|
||||||
--data-color-7: var(--color-lightgrey-7);
|
|
||||||
--data-color-8: var(--color-lightgrey-8);
|
|
||||||
--data-color-9: var(--color-lightgrey-9);
|
|
||||||
--data-color-10: var(--color-lightgrey-10);
|
|
||||||
--data-color-11: var(--color-lightgrey-11);
|
|
||||||
--data-color-12: var(--color-lightgrey-12);
|
|
||||||
--data-color-13: var(--color-red-1);
|
|
||||||
--data-color-14: var(--color-red-7);
|
|
||||||
--data-color-15: var(--color-red-8);
|
|
||||||
--data-color-16: var(--color-red-9);
|
|
||||||
--data-color-17: var(--color-red-10);
|
|
||||||
--data-color-18: var(--color-red-11);
|
|
||||||
--data-color-19: var(--color-yellow-1);
|
|
||||||
--data-color-20: var(--color-yellow-7);
|
|
||||||
--data-color-21: var(--color-yellow-8);
|
|
||||||
--data-color-22: var(--color-yellow-9);
|
|
||||||
--data-color-23: var(--color-yellow-10);
|
|
||||||
--data-color-24: var(--color-yellow-11);
|
|
||||||
--data-color-25: var(--color-lightblue-1);
|
|
||||||
--data-color-26: var(--color-lightblue-7);
|
|
||||||
--data-color-27: var(--color-lightblue-8);
|
|
||||||
--data-color-28: var(--color-lightblue-9);
|
|
||||||
--data-color-29: var(--color-lightblue-10);
|
|
||||||
--data-color-30: var(--color-lightblue-11);
|
|
||||||
--data-color-31: var(--color-orange-1);
|
|
||||||
--data-color-32: var(--color-orange-7);
|
|
||||||
--data-color-33: var(--color-orange-8);
|
|
||||||
--data-color-34: var(--color-orange-9);
|
|
||||||
--data-color-35: var(--color-orange-10);
|
|
||||||
--data-color-36: var(--color-orange-11);
|
|
||||||
--data-color-37: var(--color-purple-1);
|
|
||||||
--data-color-38: var(--color-purple-7);
|
|
||||||
--data-color-39: var(--color-purple-8);
|
|
||||||
--data-color-40: var(--color-purple-9);
|
|
||||||
--data-color-41: var(--color-purple-10);
|
|
||||||
--data-color-42: var(--color-purple-11);
|
|
||||||
}
|
|
||||||
|
|
@ -1,157 +0,0 @@
|
||||||
/**
|
|
||||||
* 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;
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
|
|
||||||
/* Status */
|
|
||||||
--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;
|
|
||||||
|
|
||||||
/* Alert */
|
|
||||||
--color-global-10: #FFF4CE;
|
|
||||||
--color-global-20: #DFF6DD;
|
|
||||||
--color-global-30: #CEF1FF;
|
|
||||||
--color-global-40: #FDE7E9;
|
|
||||||
|
|
||||||
/* Text */
|
|
||||||
--color-text-10: #323130;
|
|
||||||
--color-text-20: #666666;
|
|
||||||
--color-text-30: #A6A6A6;
|
|
||||||
|
|
||||||
/* Data Colors */
|
|
||||||
--LT-Azul: #118DFF;
|
|
||||||
--DM-Azul: #118DFF;
|
|
||||||
--LT-Atlantic: #3A4BC6;
|
|
||||||
--DM-Atlantic: #4E4DFF;
|
|
||||||
--LT-Mango: #E66C37;
|
|
||||||
--DM-Mango: #FF9254;
|
|
||||||
--LT-Blush: #C83D95;
|
|
||||||
--DM-Blush: #C83D95;
|
|
||||||
--LT-Pacific: #009EB3;
|
|
||||||
--DM-Pacific: #00C7E2;
|
|
||||||
--LT-Grape: #750985;
|
|
||||||
--DM-Grape: #9911B0;
|
|
||||||
--LT-Lilac: #835DD0;
|
|
||||||
--DM-Lilac: #FFADC1;
|
|
||||||
--LT-Scarlet: #E04854;
|
|
||||||
--DM-Scarlet: #E04854;
|
|
||||||
--LT-Sahara: #BD8608;
|
|
||||||
--DM-Sahara: #FCD641;
|
|
||||||
--LT-Leaf: #18A03C;
|
|
||||||
--DM-Leaf: #1CE099;
|
|
||||||
--LT-Empty-data: #868886;
|
|
||||||
--DM-Empty-data: #868886;
|
|
||||||
|
|
||||||
/* [Deprecated] Legacy colors */
|
|
||||||
--color-green-1: #01b8aa;
|
|
||||||
--color-green-2: #6be8dc;
|
|
||||||
--color-green-3: #59cec3;
|
|
||||||
--color-green-4: #08bca6;
|
|
||||||
--color-green-5: #0aa58e;
|
|
||||||
--color-green-6: #12937d;
|
|
||||||
--color-green-7: #99E3DD;
|
|
||||||
--color-green-8: #67D4CC;
|
|
||||||
--color-green-9: #34C6BB;
|
|
||||||
--color-green-10: #018A80;
|
|
||||||
--color-green-11: #015C55;
|
|
||||||
|
|
||||||
--color-lightgrey-1: #ffffff;
|
|
||||||
--color-lightgrey-2: #f2f2f2;
|
|
||||||
--color-lightgrey-3: #e6e6e6;
|
|
||||||
--color-lightgrey-4: #cccccc;
|
|
||||||
--color-lightgrey-5: #b3b3b3;
|
|
||||||
--color-lightgrey-6: #999999;
|
|
||||||
--color-lightgrey-7: #374649;
|
|
||||||
--color-lightgrey-8: #AFB5B6;
|
|
||||||
--color-lightgrey-9: #879092;
|
|
||||||
--color-lightgrey-10: #5F6B6D;
|
|
||||||
--color-lightgrey-11: #293537;
|
|
||||||
--color-lightgrey-12: #1C2325;
|
|
||||||
|
|
||||||
--color-red-1: #fd625e;
|
|
||||||
--color-red-2: #ff7878;
|
|
||||||
--color-red-3: #fc5454;
|
|
||||||
--color-red-4: #fc3232;
|
|
||||||
--color-red-5: #e81818;
|
|
||||||
--color-red-6: #b21f1f;
|
|
||||||
--color-red-7: #FEC0BF;
|
|
||||||
--color-red-8: #FEA19E;
|
|
||||||
--color-red-9: #FD817E;
|
|
||||||
--color-red-10: #BE4A47;
|
|
||||||
--color-red-11: #7F312F;
|
|
||||||
|
|
||||||
--color-yellow-1: #f2c80f;
|
|
||||||
--color-yellow-2: #fcdf65;
|
|
||||||
--color-yellow-3: #ffd629;
|
|
||||||
--color-yellow-4: #ffce00;
|
|
||||||
--color-yellow-5: #e5bd13;
|
|
||||||
--color-yellow-6: #c9a611;
|
|
||||||
--color-yellow-7: #FAE99F;
|
|
||||||
--color-yellow-8: #F7DE6F;
|
|
||||||
--color-yellow-9: #F5D33F;
|
|
||||||
--color-yellow-10: #B6960B;
|
|
||||||
--color-yellow-11: #796408;
|
|
||||||
|
|
||||||
--color-lightblue-1: #8ad4eb;
|
|
||||||
--color-lightblue-2: #caf8ff;
|
|
||||||
--color-lightblue-3: #b0f8ff;
|
|
||||||
--color-lightblue-4: #73f8ff;
|
|
||||||
--color-lightblue-5: #27e2dd;
|
|
||||||
--color-lightblue-6: #1bb2a7;
|
|
||||||
--color-lightblue-7: #D0EEF7;
|
|
||||||
--color-lightblue-8: #B9E5F3;
|
|
||||||
--color-lightblue-9: #A1DDEF;
|
|
||||||
--color-lightblue-10: #689FB0;
|
|
||||||
--color-lightblue-11: #456A76;
|
|
||||||
|
|
||||||
--color-orange-1: #fe9666;
|
|
||||||
--color-orange-2: #ffcdbb;
|
|
||||||
--color-orange-3: #f7a389;
|
|
||||||
--color-orange-4: #f9724e;
|
|
||||||
--color-orange-5: #DC5F31;
|
|
||||||
--color-orange-6: #db220f;
|
|
||||||
--color-orange-7: #FFD5C2;
|
|
||||||
--color-orange-8: #FEC0A3;
|
|
||||||
--color-orange-9: #FEAB85;
|
|
||||||
--color-orange-10: #BF714D;
|
|
||||||
--color-orange-11: #7F4B33;
|
|
||||||
|
|
||||||
--color-purple-1: #a66999;
|
|
||||||
--color-purple-2: #efa5e1;
|
|
||||||
--color-purple-3: #ea78d9;
|
|
||||||
--color-purple-4: #e247db;
|
|
||||||
--color-purple-5: #d313d3;
|
|
||||||
--color-purple-6: #921e9b;
|
|
||||||
--color-purple-7: #DFC5D9;
|
|
||||||
--color-purple-8: #CAA5C2;
|
|
||||||
--color-purple-9: #B887AD;
|
|
||||||
--color-purple-10: #7D4F73;
|
|
||||||
--color-purple-11: #53354D;
|
|
||||||
}
|
|
||||||
Загрузка…
Ссылка в новой задаче