diff --git a/CHANGELOG.md b/CHANGELOG.md index 991134f..bae6b2a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,18 +1,22 @@ # CHANGELOG -# v8.0.2 -## Changed +## v8.0.3 +### Changed +- Removed deprecated colors + +## v8.0.2 +### Changed - Added shimmer colors - Added foreground tertiary for less important separations - Removed utils generated file since it's not needed with dynamic stylesheet generation approach ## v8.0.1 -## Changed +### Changed - Change non-scss files to use css - Added codegen to generate theme-related typescript files ## v8.0.0 -## Changed +### Changed - Deprecated mapping and made each theme to have its own palette that shares the same naming convention ## v7.1.3 diff --git a/package-lock.json b/package-lock.json index 165041f..3901906 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@microsoft/azure-iot-ux-fluent-css", - "version": "8.0.2", + "version": "8.0.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 8a6c2c6..e34d9a9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@microsoft/azure-iot-ux-fluent-css", "description": "Azure IoT common styles library for CSS, Colors and Themes", - "version": "8.0.2", + "version": "8.0.3", "license": "MIT", "main": "lib/index.js", "types": "lib/index.d.ts", diff --git a/src/_colors.css b/src/_colors.css index de7dd74..140f79d 100644 --- a/src/_colors.css +++ b/src/_colors.css @@ -19,13 +19,6 @@ --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 */ diff --git a/src/deprecated/_color.dark.css b/src/deprecated/_color.dark.css deleted file mode 100644 index c0cbb39..0000000 --- a/src/deprecated/_color.dark.css +++ /dev/null @@ -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); -} \ No newline at end of file diff --git a/src/deprecated/_color.light.css b/src/deprecated/_color.light.css deleted file mode 100644 index a8a3955..0000000 --- a/src/deprecated/_color.light.css +++ /dev/null @@ -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); -} \ No newline at end of file diff --git a/src/deprecated/_color.palette.css b/src/deprecated/_color.palette.css deleted file mode 100644 index 90f6da9..0000000 --- a/src/deprecated/_color.palette.css +++ /dev/null @@ -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; - } \ No newline at end of file