From b9013b5098d819ea76ad884823ae30a586abc815 Mon Sep 17 00:00:00 2001 From: "wasuwat.limsuparhat2" Date: Tue, 15 Oct 2024 16:40:51 +0700 Subject: [PATCH] chore: remove old ds-theme --- package-lock.json | 19 -- packages/ds-theme/package.json | 3 - packages/ds-theme/src/colors.less | 8 - .../src/custom-elements/ef-accordion.less | 7 - .../src/custom-elements/ef-appstate-bar.less | 23 -- .../src/custom-elements/ef-autosuggest.less | 62 ---- .../src/custom-elements/ef-button-bar.less | 16 - .../src/custom-elements/ef-button.less | 157 ---------- .../src/custom-elements/ef-calendar.less | 171 ----------- .../src/custom-elements/ef-canvas.less | 1 - .../ds-theme/src/custom-elements/ef-card.less | 5 - .../src/custom-elements/ef-chart.less | 36 --- .../src/custom-elements/ef-checkbox.less | 20 -- .../src/custom-elements/ef-clock.less | 12 - .../src/custom-elements/ef-collapse.less | 57 ---- .../src/custom-elements/ef-color-dialog.less | 7 - .../src/custom-elements/ef-color-picker.less | 7 - .../src/custom-elements/ef-combo-box.less | 124 -------- .../src/custom-elements/ef-counter.less | 19 -- .../custom-elements/ef-datetime-picker.less | 84 ------ .../src/custom-elements/ef-dialog.less | 39 --- .../src/custom-elements/ef-email-field.less | 1 - .../ds-theme/src/custom-elements/ef-flag.less | 5 - .../src/custom-elements/ef-header.less | 24 -- .../src/custom-elements/ef-heatmap.less | 17 -- .../ds-theme/src/custom-elements/ef-icon.less | 21 -- .../custom-elements/ef-interactive-chart.less | 26 -- .../ds-theme/src/custom-elements/ef-item.less | 43 --- .../src/custom-elements/ef-label.less | 11 - .../src/custom-elements/ef-layout.less | 1 - .../src/custom-elements/ef-led-gauge.less | 18 -- .../src/custom-elements/ef-list-item.less | 1 - .../ds-theme/src/custom-elements/ef-list.less | 2 - .../src/custom-elements/ef-loader.less | 266 ----------------- .../src/custom-elements/ef-multi-input.less | 41 --- .../custom-elements/ef-notification-tray.less | 1 - .../src/custom-elements/ef-notification.less | 36 --- .../src/custom-elements/ef-number-field.less | 96 ------ .../src/custom-elements/ef-overlay-menu.less | 21 -- .../src/custom-elements/ef-overlay.less | 2 - .../src/custom-elements/ef-pagination.less | 26 -- .../src/custom-elements/ef-panel.less | 1 - .../custom-elements/ef-password-field.less | 12 - .../ds-theme/src/custom-elements/ef-pill.less | 83 ------ .../src/custom-elements/ef-progress-bar.less | 5 - .../src/custom-elements/ef-radio-button.less | 11 - .../src/custom-elements/ef-rating.less | 1 - .../src/custom-elements/ef-search-field.less | 1 - .../src/custom-elements/ef-select.less | 64 ---- .../custom-elements/ef-sidebar-layout.less | 2 - .../src/custom-elements/ef-slider-marker.less | 7 - .../src/custom-elements/ef-slider.less | 59 ---- .../src/custom-elements/ef-sparkline.less | 5 - .../src/custom-elements/ef-swing-gauge.less | 27 -- .../src/custom-elements/ef-tab-bar.less | 120 -------- .../ds-theme/src/custom-elements/ef-tab.less | 78 ----- .../src/custom-elements/ef-text-field.less | 94 ------ .../src/custom-elements/ef-time-picker.less | 42 --- .../src/custom-elements/ef-toggle.less | 83 ------ .../src/custom-elements/ef-tooltip.less | 10 - .../src/custom-elements/ef-tornado-chart.less | 6 - .../src/custom-elements/ef-tornado-item.less | 11 - .../src/custom-elements/ef-tree-item.less | 36 --- .../src/custom-elements/ef-tree-select.less | 71 ----- .../ds-theme/src/custom-elements/ef-tree.less | 2 - packages/ds-theme/src/defaults.less | 3 - packages/ds-theme/src/fonts.less | 21 -- packages/ds-theme/src/native-elements/a.less | 21 -- .../ds-theme/src/native-elements/body.less | 52 ---- .../ds-theme/src/native-elements/button.less | 1 - packages/ds-theme/src/native-elements/h1.less | 8 - packages/ds-theme/src/native-elements/h2.less | 8 - packages/ds-theme/src/native-elements/h3.less | 8 - packages/ds-theme/src/native-elements/h4.less | 9 - packages/ds-theme/src/native-elements/h5.less | 9 - packages/ds-theme/src/native-elements/h6.less | 9 - .../ds-theme/src/native-elements/header.less | 1 - packages/ds-theme/src/native-elements/hr.less | 1 - .../ds-theme/src/native-elements/html.less | 8 - .../ds-theme/src/native-elements/input.less | 1 - .../ds-theme/src/native-elements/kbd.less | 13 - .../ds-theme/src/native-elements/mark.less | 1 - packages/ds-theme/src/native-elements/ol.less | 1 - packages/ds-theme/src/native-elements/p.less | 5 - .../ds-theme/src/native-elements/select.less | 1 - .../ds-theme/src/native-elements/table.less | 10 - .../src/native-elements/textarea.less | 1 - packages/ds-theme/src/native-elements/ul.less | 1 - packages/ds-theme/src/palettes/action.less | 29 -- packages/ds-theme/src/palettes/core.less | 6 - packages/ds-theme/src/palettes/icon.less | 13 - packages/ds-theme/src/palettes/secondary.less | 29 -- .../ds-theme/src/palettes/typography.less | 24 -- .../ds-theme/src/palettes/visualisation.less | 58 ---- packages/ds-theme/src/responsive.less | 1 - .../ds-theme/src/shared-styles/button.less | 1 - .../ds-theme/src/shared-styles/checkbox.less | 47 --- .../src/shared-styles/close-button.less | 1 - .../ds-theme/src/shared-styles/defaults.less | 1 - packages/ds-theme/src/shared-styles/grid.less | 1 - .../ds-theme/src/shared-styles/header.less | 1 - .../ds-theme/src/shared-styles/headings.less | 1 - packages/ds-theme/src/shared-styles/icon.less | 1 - .../ds-theme/src/shared-styles/input.less | 1 - .../ds-theme/src/shared-styles/scrollbar.less | 279 ------------------ .../ds-theme/src/shared-styles/shapes.less | 1 - packages/ds-theme/src/variables.less | 1 - .../ds-theme/src/variants/dark/overrides.less | 269 ----------------- .../ds-theme/src/variants/dark/variables.less | 146 --------- .../src/variants/light/overrides.less | 154 ---------- .../src/variants/light/variables.less | 107 ------- 111 files changed, 3732 deletions(-) delete mode 100644 packages/ds-theme/src/colors.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-accordion.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-appstate-bar.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-autosuggest.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-button-bar.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-button.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-calendar.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-canvas.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-card.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-chart.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-checkbox.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-clock.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-collapse.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-color-dialog.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-color-picker.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-combo-box.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-counter.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-datetime-picker.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-dialog.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-email-field.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-flag.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-header.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-heatmap.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-icon.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-interactive-chart.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-item.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-label.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-layout.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-led-gauge.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-list-item.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-list.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-loader.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-multi-input.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-notification-tray.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-notification.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-number-field.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-overlay-menu.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-overlay.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-pagination.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-panel.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-password-field.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-pill.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-progress-bar.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-radio-button.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-rating.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-search-field.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-select.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-sidebar-layout.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-slider-marker.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-slider.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-sparkline.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-swing-gauge.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-tab-bar.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-tab.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-text-field.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-time-picker.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-toggle.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-tooltip.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-tornado-chart.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-tornado-item.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-tree-item.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-tree-select.less delete mode 100644 packages/ds-theme/src/custom-elements/ef-tree.less delete mode 100644 packages/ds-theme/src/defaults.less delete mode 100644 packages/ds-theme/src/fonts.less delete mode 100644 packages/ds-theme/src/native-elements/a.less delete mode 100644 packages/ds-theme/src/native-elements/body.less delete mode 100644 packages/ds-theme/src/native-elements/button.less delete mode 100644 packages/ds-theme/src/native-elements/h1.less delete mode 100644 packages/ds-theme/src/native-elements/h2.less delete mode 100644 packages/ds-theme/src/native-elements/h3.less delete mode 100644 packages/ds-theme/src/native-elements/h4.less delete mode 100644 packages/ds-theme/src/native-elements/h5.less delete mode 100644 packages/ds-theme/src/native-elements/h6.less delete mode 100644 packages/ds-theme/src/native-elements/header.less delete mode 100644 packages/ds-theme/src/native-elements/hr.less delete mode 100644 packages/ds-theme/src/native-elements/html.less delete mode 100644 packages/ds-theme/src/native-elements/input.less delete mode 100644 packages/ds-theme/src/native-elements/kbd.less delete mode 100644 packages/ds-theme/src/native-elements/mark.less delete mode 100644 packages/ds-theme/src/native-elements/ol.less delete mode 100644 packages/ds-theme/src/native-elements/p.less delete mode 100644 packages/ds-theme/src/native-elements/select.less delete mode 100644 packages/ds-theme/src/native-elements/table.less delete mode 100644 packages/ds-theme/src/native-elements/textarea.less delete mode 100644 packages/ds-theme/src/native-elements/ul.less delete mode 100644 packages/ds-theme/src/palettes/action.less delete mode 100644 packages/ds-theme/src/palettes/core.less delete mode 100644 packages/ds-theme/src/palettes/icon.less delete mode 100644 packages/ds-theme/src/palettes/secondary.less delete mode 100644 packages/ds-theme/src/palettes/typography.less delete mode 100644 packages/ds-theme/src/palettes/visualisation.less delete mode 100644 packages/ds-theme/src/responsive.less delete mode 100644 packages/ds-theme/src/shared-styles/button.less delete mode 100644 packages/ds-theme/src/shared-styles/checkbox.less delete mode 100644 packages/ds-theme/src/shared-styles/close-button.less delete mode 100644 packages/ds-theme/src/shared-styles/defaults.less delete mode 100644 packages/ds-theme/src/shared-styles/grid.less delete mode 100644 packages/ds-theme/src/shared-styles/header.less delete mode 100644 packages/ds-theme/src/shared-styles/headings.less delete mode 100644 packages/ds-theme/src/shared-styles/icon.less delete mode 100644 packages/ds-theme/src/shared-styles/input.less delete mode 100644 packages/ds-theme/src/shared-styles/scrollbar.less delete mode 100644 packages/ds-theme/src/shared-styles/shapes.less delete mode 100644 packages/ds-theme/src/variables.less delete mode 100644 packages/ds-theme/src/variants/dark/overrides.less delete mode 100644 packages/ds-theme/src/variants/dark/variables.less delete mode 100644 packages/ds-theme/src/variants/light/overrides.less delete mode 100644 packages/ds-theme/src/variants/light/variables.less diff --git a/package-lock.json b/package-lock.json index 9fcfd4599e..ccb75c19d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2084,22 +2084,6 @@ "@lit-labs/ssr-dom-shim": "^1.0.0" } }, - "node_modules/@lseg-workspace/design-tokens": { - "version": "0.0.3-dev.20", - "resolved": "https://bams-aws.refinitiv.com/artifactory/api/npm/default.npm.global/@lseg-workspace/design-tokens/-/@lseg-workspace/design-tokens-0.0.3-dev.20.tgz", - "integrity": "sha512-4KhRi2/Q2fFeJK+25d4DosDmIWzLJGhI6gUkYNuio0r7fqNi2ZqrVc1mTsYkl+WGPu9sKehPOxKHrCtIO3fOeg==", - "license": "SEE LICENSE IN LICENCE.md", - "peer": true - }, - "node_modules/@lseg-workspace/web-design-tokens": { - "version": "0.0.3-dev.9", - "resolved": "https://bams-aws.refinitiv.com/artifactory/api/npm/default.npm.global/@lseg-workspace/web-design-tokens/-/@lseg-workspace/web-design-tokens-0.0.3-dev.9.tgz", - "integrity": "sha512-DVUyhzaCtRGU6z8xGLiZnUiG9FcC5PDyfMabEVR8H/+SEqU/Na4GPRWMvy4FnTaiXQubChYVjBD+LX/fm3z8DA==", - "peer": true, - "dependencies": { - "@lseg-workspace/design-tokens": "0.0.3-dev.20" - } - }, "node_modules/@mdn/browser-compat-data": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-4.2.1.tgz", @@ -23199,9 +23183,6 @@ "license": "Apache-2.0", "devDependencies": { "@refinitiv-ui/theme-compiler": "^7.1.4" - }, - "peerDependencies": { - "@lseg-workspace/web-design-tokens": "latest" } }, "packages/elemental-theme": { diff --git a/packages/ds-theme/package.json b/packages/ds-theme/package.json index 8cb94c5382..29deb0e39b 100644 --- a/packages/ds-theme/package.json +++ b/packages/ds-theme/package.json @@ -27,9 +27,6 @@ "devDependencies": { "@refinitiv-ui/theme-compiler": "^7.1.4" }, - "peerDependencies": { - "@lseg-workspace/web-design-tokens": "latest" - }, "publishConfig": { "access": "public" } diff --git a/packages/ds-theme/src/colors.less b/packages/ds-theme/src/colors.less deleted file mode 100644 index f53f65ce7d..0000000000 --- a/packages/ds-theme/src/colors.less +++ /dev/null @@ -1,8 +0,0 @@ -// Import the colour palette in order of priority -// Highest priority comes last -@import (reference) './palettes/visualisation'; -@import (reference) './palettes/action'; -@import (reference) './palettes/icon'; -@import (reference) './palettes/typography'; -@import (reference) './palettes/secondary'; -@import (reference) './palettes/core'; diff --git a/packages/ds-theme/src/custom-elements/ef-accordion.less b/packages/ds-theme/src/custom-elements/ef-accordion.less deleted file mode 100644 index 20af9a484c..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-accordion.less +++ /dev/null @@ -1,7 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-accordion'; - -:host { - ::slotted(ef-collapse:not(:last-child):not([expanded])) { - border-bottom: 1px solid @separator-color; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-appstate-bar.less b/packages/ds-theme/src/custom-elements/ef-appstate-bar.less deleted file mode 100644 index 96d5ef3fb7..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-appstate-bar.less +++ /dev/null @@ -1,23 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-appstate-bar'; - -:host { - --heading-text-color: @color-white; - --heading-background-color: @color-torea-bay; - --text-color: @global-text-color; - --background-color: @header-level3-bg-color; - & when (@variant = light) { - --border-color: @color-silver; // override as control-border-color of light is too dark - } - - &[state='info'] { - --heading-background-color: @color-teal; - } - - &[state='highlight'] { - --heading-background-color: @scheme-color-primary; - } - - [part='heading'] { - padding: @header-padding; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-autosuggest.less b/packages/ds-theme/src/custom-elements/ef-autosuggest.less deleted file mode 100644 index 5f267f818c..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-autosuggest.less +++ /dev/null @@ -1,62 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-autosuggest'; -@import '../native-elements/kbd'; -@import '../shared-styles/scrollbar'; - -:host { - border-color: @scheme-color-primary; - margin: 2px 0; - - [part='content'] { - ::slotted(ef-item:not([part='more-results'])) { - background-color: @search-list-background-color; - } - - ::slotted(ef-item:not([type='header']):not([part='more-results'])) { - color: @search-list-color; - } - - ::slotted(ef-item:not([part='more-results']):not(:first-child)) { - box-shadow: 0px -1px 0 @separator-color; - } - - ::slotted(ef-item:not([part='more-results']):focus), - ::slotted(ef-item:not([part='more-results'])[highlighted]) { - background-color: @search-list-hover-background-color; - } - - ::slotted(ef-item:not([part='more-results']):focus:not([selected])), - ::slotted(ef-item:not([part='more-results'])[highlighted]:not([selected])) { - color: @search-list-hover-color; - } - } - - [part='more-results'] { - border-top-color: @separator-color; - - color: @search-list-more-search-color; - background-color: @search-list-more-search-background-color; - - &:focus, - &[highlighted] { - background-color: @search-list-more-search-hover-background-color; - color: @search-list-more-search-color; - } - } - - [part='more-results-text'] { - font-size: inherit; - } - - [part='more-results-keys'] { - kbd { - margin-left: 4px; - margin-right: 4px; - } - kbd:first-of-type { - margin-left: 0; - } - kbd:last-of-type { - margin-right: 0; - } - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-button-bar.less b/packages/ds-theme/src/custom-elements/ef-button-bar.less deleted file mode 100644 index eca52237ec..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-button-bar.less +++ /dev/null @@ -1,16 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-button-bar'; - -:host { - background: none; - - // using default border color when hover ef-button - ::slotted(ef-button:not(:focus):hover), - ::slotted(ef-button:not(:focus)[active][toggles]:hover) { - border-color: @button-border-color; - } - // joint border - ::slotted(ef-button:not(:first-child)), - ::slotted(ef-button-bar:not(:first-child)) { - margin-left: -@button-border-width; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-button.less b/packages/ds-theme/src/custom-elements/ef-button.less deleted file mode 100644 index b9509584a7..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-button.less +++ /dev/null @@ -1,157 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-button'; -@import '@refinitiv-ui/elemental-theme/src/responsive'; - -:host { - [part='label'] { - // make label vertically center - line-height: (@button-height - (@button-border-width * 2)); - } - [part='icon'] { - opacity: inherit; - min-width: @icon-size; - } - &[toggles]:hover:not(:focus) { - border-color: @button-border-color; - } - &[toggles][active]:focus { - color: @button-toggle-active-text-color; - } - &[toggles]:focus:not([focused]), - &[toggles][active][focused='visible'] { - color: @button-text-color; - } - &[cta]:hover { - border-color: @button-hover-border-color; - } - &[cta]:active { - border-color: @button-border-color; - } - - &[icon] { - &:not([toggles])[cta][transparent] { - [part='icon'] { - color: @button-cta-transparent-icon-color; - } - } - - &:hover { - &[transparent] { - [empty] { - color: @button-transparent-hover-icon-color; - } - - &[cta] { - [part='icon'] { - color: @button-hover-text-color; - } - - &[toggles] { - [part='icon'] { - color: @button-hover-text-color; - } - } - } - } - } - } - - .mobile-specific({ - &:hover { - &[transparent][cta]:not([toggles]) { - &:not(:active) { - background-color: @button-cta-background-color; - border-color: transparent; - } - } - &[transparent][cta][toggles] { - border-color: @button-border-color; - &:not([active]):not(:active) { - [part=icon] { - color: @button-text-color; - } - } - } - } - }); - - &[toggles][active][transparent] { - color: @button-toggle-active-text-color; - &:not(:focus) { - color: @scheme-color-secondary; - } - &:hover { - color: @button-hover-text-color; - } - &[cta] { - color: @button-hover-text-color; - } - } - - &:not(:hover):not(:focus):not(:active):not([cta])[transparent] { - background-color: transparent; - border-color: transparent; - } - - &:not([cta])[empty][icon][transparent] { - //override elemental - &[toggles][active] { - color: @scheme-color-secondary; - &:hover, - &[focused], - &[focused='visible'] { - color: @scheme-color-primary; - } - } - color: @button-icon-color; - &:not([active]):hover { - color: @button-transparent-hover-icon-color; - } - &[disabled] { - color: @button-icon-color; - } - } - - &[disabled] { - opacity: 0.5; - &[transparent][empty] { - color: @button-icon-color; - } - - &[cta] { - &:not([empty]) { - color: @button-cta-text-color; - background-color: @color-lights-out; - border-color: @button-cta-border-color; - - [part='icon'] { - color: inherit; - } - } - - &[icon][empty]:not([toggles]) { - border-color: @button-cta-border-color; - } - } - } - - &:not([cta])[empty][icon][transparent] { - &:active:not(:focus) { - background-color: transparent !important; - } - - &:hover { - &:not(:focus) { - background-color: transparent !important; - border-color: transparent !important; - } - } - } - &:focus:not([focused]), - &[toggles][focused='visible'], - &[cta][focused='visible'], - &[focused='visible'] { - border-color: @button-border-color; - background-color: @button-hover-background-color; - color: @color-white; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-calendar.less b/packages/ds-theme/src/custom-elements/ef-calendar.less deleted file mode 100644 index 4068937067..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-calendar.less +++ /dev/null @@ -1,171 +0,0 @@ -@import 'element:ef-button'; -@import '@refinitiv-ui/elemental-theme/src/shared-styles/defaults'; - -:host { - .defaults(); - @range-background-color: fade(@calendar-selected-background-color, 20%); - - outline: none; - font-size: @control-font-size; - color: @global-text-color; - min-width: 196px; - user-select: none; - background: @calendar-background-color; - padding: 4px 3px; - - [part='navigation'] { - padding-bottom: 3px; - } - - [part='btn-view'], - [part='btn-prev'], - [part='btn-next'] { - margin: 0; - } - - [part='btn-prev'], - [part='btn-next'] { - &:not(:hover):not(:focus):not(:active) { - & when (@variant = light) { - color: @color-scorpion; - } - } - } - - [part='btn-view'] { - background: none; - margin-left: @icon-size; - border: none; - color: inherit; - padding: 0; - } - - [part='btn-view']:hover, - [part='btn-view'][focused='visible'] { - opacity: 0.8; - } - - [part='table'] { - width: 100%; - background: @calendar-body-background-color; - } - - [part~='row'] { - &:not(:first-of-type) [part~='cell'] [part~='cell-content'] { - top: 1px; - } - } - - [part~='day-name-row'] { - background-color: @calendar-header-border-color; - } - - [part~='cell'] { - &[disabled] { - opacity: 0.4; - } - - &[today] { - color: @calendar-cell-today-text-color; - [part~='selection'] { - background: @calendar-cell-today-background-color; - } - } - - &:not([selected]):not([range]):not([disabled])[idle] [part~='selection'] { - opacity: 0.6; - } - - &:not([today]):not([range]) [part~='selection']:hover { - color: @calendar-cell-hover-text-color; - } - - &:not(:active) [part~='selection']:hover { - border-color: @calendar-cell-hover-background-color; - } - &[today][selected] [part~='selection']:hover, - &:not([today]):not([range]):not(:active) [part~='selection']:hover { - background: @calendar-cell-hover-background-color; - } - - &:not([selected]):not([range]):not([today]) { - [part~='selection']:hover { - background: @calendar-cell-hover-background-color; - } - - &:not(:active) [part~='selection']:hover { - border-color: @calendar-cell-hover-background-color; - } - - &:not([disabled]):active [part~='selection'] { - color: @calendar-cell-hover-text-color; - background-color: @calendar-cell-press-background-color; - } - } - - &[selected], - &[today], - &[range] { - &:not(:active) [part~='selection']:hover { - border-color: @calendar-cell-hover-background-color; - } - - &:not([disabled]):active [part~='selection'] { - color: @calendar-cell-hover-text-color; - background-color: @calendar-cell-press-background-color; - } - } - - &[range] [part~='selection'] { - background: @range-background-color; - } - - &[range][today] { - color: @calendar-cell-range-today-text-color; - } - - &[selected] { - color: @calendar-selected-text-color; - [part~='selection'] { - background: @calendar-selected-background-color; - } - } - - &:not(:first-of-type) [part~='cell-content'] { - left: 1px; - } - } - - [part~='day-name'] { - color: @calendar-header-text-color; - font-weight: 600; - [part~='cell-content'] { - background-color: @calendar-header-background-color; - } - } - - [part~='cell-content'] { - background: @calendar-cell-background-color; - top: 0; - bottom: 0; - right: 0; - left: 0; - } - - [part~='selection'] { - outline: none; - border: 1px solid @calendar-cell-background-color; - - ::slotted(*) { - position: absolute; - } - } - - &[focused='visible'] [part~='cell'] [part~='selection']:focus { - outline: 1px solid @calendar-cell-hover-background-color; - } - - &[disabled] { - opacity: 0.4; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-canvas.less b/packages/ds-theme/src/custom-elements/ef-canvas.less deleted file mode 100644 index db58df0eb4..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-canvas.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-canvas'; diff --git a/packages/ds-theme/src/custom-elements/ef-card.less b/packages/ds-theme/src/custom-elements/ef-card.less deleted file mode 100644 index 4868c6a636..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-card.less +++ /dev/null @@ -1,5 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-card'; - -:host { - padding: 16px; -} diff --git a/packages/ds-theme/src/custom-elements/ef-chart.less b/packages/ds-theme/src/custom-elements/ef-chart.less deleted file mode 100644 index 3cf37daeb3..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-chart.less +++ /dev/null @@ -1,36 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-chart'; - -:host { - --tooltip-background-color: @tooltip-background-color; - --tooltip-title-color: @tooltip-text-color; - --tooltip-body-color: @tooltip-text-color; - --tooltip-padding-x: 8px; - --tooltip-padding-y: 4px; - - // Output dataviz colours - --chart-color-1: @dataviz-color-1; - --chart-color-2: @dataviz-color-2; - --chart-color-3: @dataviz-color-3; - --chart-color-4: @dataviz-color-4; - --chart-color-5: @dataviz-color-5; - --chart-color-6: @dataviz-color-6; - --chart-color-7: @dataviz-color-7; - --chart-color-8: @dataviz-color-8; - --chart-color-9: @dataviz-color-9; - --chart-color-10: @dataviz-color-10; - --chart-color-11: @dataviz-color-11; - --chart-color-12: @dataviz-color-12; - --chart-color-13: @dataviz-color-13; - --chart-color-14: @dataviz-color-14; - --chart-color-15: @dataviz-color-15; - --chart-color-16: @dataviz-color-16; - --chart-color-17: @dataviz-color-17; - --chart-color-18: @dataviz-color-18; - --chart-color-19: @dataviz-color-19; - --chart-color-20: @dataviz-color-20; - --chart-color-21: @dataviz-color-21; - --chart-color-22: @dataviz-color-22; - --chart-color-23: @dataviz-color-23; - --chart-color-24: @dataviz-color-24; - --chart-color-25: @dataviz-color-25; -} diff --git a/packages/ds-theme/src/custom-elements/ef-checkbox.less b/packages/ds-theme/src/custom-elements/ef-checkbox.less deleted file mode 100644 index 456362b2ed..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-checkbox.less +++ /dev/null @@ -1,20 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-checkbox'; -@import '../shared-styles/checkbox.less'; - -:host { - .checkbox-default(); - - &[indeterminate] [part='check'] { - width: 70%; - height: 1px; - } - - &[indeterminate] [part='container'] { - border: 1px solid @scheme-color-primary; - } - - &:focus[readonly] [part='container'], - &:focus[readonly][indeterminate] [part='container'] { - border-color: @scheme-color-primary; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-clock.less b/packages/ds-theme/src/custom-elements/ef-clock.less deleted file mode 100644 index b7415ff797..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-clock.less +++ /dev/null @@ -1,12 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-clock'; - -:host { - [part~='seconds'] { - color: @color-grey; - } - - &[analogue] { - color: @color-grey; - .default-analog-svg(@color-grey); - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-collapse.less b/packages/ds-theme/src/custom-elements/ef-collapse.less deleted file mode 100644 index 7d357cc29a..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-collapse.less +++ /dev/null @@ -1,57 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-collapse'; - -:host { - text-transform: uppercase; // default header text to uppercase - - [part='header'] { - text-transform: inherit; // this allow users to customise via css - } - - [part='content'] { - text-transform: none; // reset, so content won't be uppercase - } - - [part='toggle'] { - opacity: 1; - } - - [part='header']:hover, - [part~='header'][focused='visible'], - &[expanded] [part='header'] { - color: @input-hover-text-color; - - // use to modify header color when hover and expaned - @dark-modifier: 10%; - @light-modifier: 3%; - - // default is header level 3 - background-color: lighten(@header-level3-bg-color, @dark-modifier); - & when (@variant = light) { - background-color: darken(@header-level3-bg-color, @light-modifier); - } - - // header level 1 - &[level='1'] { - background-color: lighten(@header-level1-bg-color, @dark-modifier); - & when (@variant = light) { - background-color: darken(@header-level1-bg-color, @light-modifier); - } - } - - // header level 2 - &[level='2'] { - background-color: lighten(@header-level2-bg-color, @dark-modifier); - & when (@variant = light) { - background-color: darken(@header-level2-bg-color, @light-modifier); - } - } - - // header level 4 - &[level='4'] { - background-color: lighten(@header-level4-bg-color, @dark-modifier); - & when (@variant = light) { - background-color: darken(@header-level4-bg-color, @light-modifier); - } - } - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-color-dialog.less b/packages/ds-theme/src/custom-elements/ef-color-dialog.less deleted file mode 100644 index d81c0e0899..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-color-dialog.less +++ /dev/null @@ -1,7 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-color-dialog'; - -:host { - [part='button'] { - margin: 8px; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-color-picker.less b/packages/ds-theme/src/custom-elements/ef-color-picker.less deleted file mode 100644 index ce9740c1f2..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-color-picker.less +++ /dev/null @@ -1,7 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-color-picker'; - -:host { - &:not([readonly]):not([disabled]):not([focused]):hover { - border-color: @input-hover-border-color; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-combo-box.less b/packages/ds-theme/src/custom-elements/ef-combo-box.less deleted file mode 100644 index 017434f36b..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-combo-box.less +++ /dev/null @@ -1,124 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-combo-box'; -@import 'ef-select'; -@import (reference) '../shared-styles/scrollbar'; - -:host { - padding: 0; - - [part~='input-wrapper'] { - border-left-color: inherit; - } - - [part~='input'] { - padding: @input-padding; - } - - [part~='button'] { - height: 100%; - width: @button-height; - } - - [part~='button-toggle'] { - border-left: @input-border; - border-left-color: inherit; - - &::before { - // used for pointer event only - content: ''; - display: block; - position: absolute; - top: -@input-border-width; - right: -@input-border-width; - bottom: -@input-border-width; - border: @input-border; - width: @button-height; - border: @input-border; - border-color: transparent; - } - } - - &:not([readonly]) { - &:hover { - [part~='button-toggle'] { - color: @input-focused-border-color; - } - } - - &[focused] { - [part~='button-toggle'] { - border-left-color: @input-focused-border-color; - color: @input-focused-border-color; - } - } - - [part~='button-toggle']:hover { - border-left-color: @input-focused-border-color; - color: @button-hover-text-color; - background: @button-hover-background-color; - - &::after { - // draws faux border on control - content: ''; - display: block; - position: absolute; - border-color: transparent; - top: -@input-border-width; - right: -@input-border-width; - bottom: -@input-border-width; - left: -@input-border-width; - border: @input-border; - border-color: @input-focused-border-color; - pointer-events: none; - } - } - - [part~='button-toggle']:active { - background: @button-pressed-background-color; - } - - [part~='button']:active { - color: @button-hover-text-color; - } - - [part~='icon'] { - color: inherit !important; - } - - [part~='button-clear']:hover, - [part~='button-clear']:active { - color: @input-focused-border-color; - } - } - - &[disabled] { - [part~='input'] { - border: none; - } - } - - &[readonly], - &[disabled] { - [part~='button-toggle'] { - border-left-color: @input-disabled-border-color; - } - } - - &[readonly] { - [part~='button-toggle'] { - color: @input-disabled-text-color; - cursor: default; - } - } - - &[focused][readonly] { - [part~='button-toggle'] { - border-left-color: @input-focused-border-color; - } - } - - [part='list'] { - ef-list-item:not(:first-child):not([type='divider']) { - box-shadow: 0px -1px 0 @separator-color; - } - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-counter.less b/packages/ds-theme/src/custom-elements/ef-counter.less deleted file mode 100644 index 85b7e75615..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-counter.less +++ /dev/null @@ -1,19 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-counter'; - -:host { - @size: unit((@button-font-size + 8), px); - border-radius: round((@size / 2)); - border: 1px solid @color-silver; - min-width: 14px; - height: 16px; - line-height: @size; - color: @counter-text-color; - background-color: @counter-background-color; - font-size: 10px; - padding: 0px 3px; - &:hover { - background-color: @button-hover-background-color; - border-color: @button-hover-border-color; - color: @button-hover-text-color; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-datetime-picker.less b/packages/ds-theme/src/custom-elements/ef-datetime-picker.less deleted file mode 100644 index 8ebca4ea8b..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-datetime-picker.less +++ /dev/null @@ -1,84 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-datetime-picker'; - -:host { - [part='calendar'] { - width: 196px; - padding: 4px 3px; - } - - [part='list'] { - margin-top: 2px; - border: 1px solid @scheme-color-primary; - background-color: @calendar-background-color; - } - - &[range] { - width: (2 * @input-width); - } - - [part='timepicker-wrapper'] { - box-shadow: none; - padding: 0 3px 4px 3px; - } - - [part='icon'] { - color: inherit; - & when (@variant = light) { - color: @control-border-color; - } - } - - &[warning]:not([focused]) { - border-color: @control-warning-color; - } - - &[error]:not([focused]) { - border-color: @control-error-color; - } - - &[warning]:hover:not([readonly]):not([focused]) { - border-color: @control-hover-warning-color; - } - - &[warning][disabled], - &[warning][readonly]:not([focused]) { - border-color: fade(@control-hover-warning-color, 50%); - } - - &[error]:hover:not([readonly]):not([focused]) { - border-color: @control-hover-error-color; - } - - &[error][disabled], - &[error][readonly]:not([focused]) { - border-color: fade(@control-hover-error-color, 50%); - } - - &[disabled] { - [part='icon'] { - color: @input-disabled-text-color; - } - } - - &[focused], - &[focused][error][warning], - &:not([disabled]):not([error]):not([warning]):hover { - [part='icon'] { - color: @scheme-color-secondary; - - & when (@variant = light) { - color: @scheme-color-primary; - } - } - } - - &:not([readonly]):not([error]):not([warning]):not([focused]):hover { - border-color: @input-hover-border-color; - color: @input-hover-text-color; - } - - [part~='button-clear']:hover, - [part~='button-clear']:active { - color: @input-focused-border-color; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-dialog.less b/packages/ds-theme/src/custom-elements/ef-dialog.less deleted file mode 100644 index b1023d993d..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-dialog.less +++ /dev/null @@ -1,39 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-dialog'; -@import '../shared-styles/scrollbar'; - -:host { - border: 1px solid @dialog-border-color; - text-transform: capitalize; - - [part='header'] { - text-transform: inherit; // allow to override by css - background: @color-blue-ribbon; - color: @color-white; - border-bottom: 1px solid @dialog-border-color; - } - [part='close'] { - color: @color-silver; - opacity: 0.4; - width: 20px; - height: 20px; - right: 0.25em; - } - [part='content'] { - text-transform: none; - background-color: @dialog-content-background-color; - } - [part='footer'] { - text-transform: none; - background: @dialog-footer-background-color; - border-top: none; - } - [part='default-buttons'] { - height: 40px; - } - [part~='default-button'] { - text-transform: uppercase; - margin-left: min(@panel-padding); - margin-top: 0; - margin-bottom: 0; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-email-field.less b/packages/ds-theme/src/custom-elements/ef-email-field.less deleted file mode 100644 index 7857a24877..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-email-field.less +++ /dev/null @@ -1 +0,0 @@ -@import './ef-text-field'; diff --git a/packages/ds-theme/src/custom-elements/ef-flag.less b/packages/ds-theme/src/custom-elements/ef-flag.less deleted file mode 100644 index 3beeb7fe7a..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-flag.less +++ /dev/null @@ -1,5 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-flag'; - -:host { - --cdn-prefix: 'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/flags/'; -} diff --git a/packages/ds-theme/src/custom-elements/ef-header.less b/packages/ds-theme/src/custom-elements/ef-header.less deleted file mode 100644 index e7072374b7..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-header.less +++ /dev/null @@ -1,24 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-header'; - -:host { - @split-padding: (extract(@header-padding, 2) / 2); - background-color: @header-level2-bg-color; - text-transform: uppercase; - padding-left: floor(@split-padding); - - [part='spacer'] { - width: ceil(@split-padding); - } - - &[level='1'] { - background-color: @header-level1-bg-color; - } - - &[level='3'] { - background-color: @header-level3-bg-color; - } - - &[level='4'] { - background-color: @header-level4-bg-color; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-heatmap.less b/packages/ds-theme/src/custom-elements/ef-heatmap.less deleted file mode 100644 index 4bc1d9d49d..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-heatmap.less +++ /dev/null @@ -1,17 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-heatmap'; - -:host { - --below-point-color: @dataviz-color-scale-low-negative; - --mid-point-color: @color-white; - --above-point-color: @dataviz-color-scale-low-positive; - - [part='canvas'] { - color: if(lightness(@panel-background-color) > 50%, @color-white, @color-black); - } - - .x-axis-item, - .y-axis-item, - [part='cross-box'] { - font-weight: @grid-header-font-weight; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-icon.less b/packages/ds-theme/src/custom-elements/ef-icon.less deleted file mode 100644 index a30c77c604..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-icon.less +++ /dev/null @@ -1,21 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-icon'; -@import (reference) '../responsive.less'; - -:host { - --cdn-sprite-prefix: 'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/sprites/icons.svg'; - - font-size: @icon-size; - - &[icon] { - g, - path, - rect, - line, - circle, - ellipse, - polyline, - polygon { - vector-effect: non-scaling-stroke; - } - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-interactive-chart.less b/packages/ds-theme/src/custom-elements/ef-interactive-chart.less deleted file mode 100644 index 3f1cbe7567..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-interactive-chart.less +++ /dev/null @@ -1,26 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-interactive-chart'; - -:host { - @jump-button-background-color: @panel-background-color; - @jump-button-hover-background-color: lighten(@jump-button-background-color, 10%); - @jump-button-border-color: @global-text-color; - - [part='jump-button-container'] { - background-color: @jump-button-background-color; - &:hover { - background-color: @jump-button-hover-background-color; - } - &:active { - background-color: @jump-button-background-color; - } - } - - [part='jump-button-container'], - [part='jump-button-container']:hover, - [part='jump-button'] { - border-color: darken(@jump-button-border-color, 30%); - & when (@variant = light) { - border-color: lighten(@jump-button-border-color, 50%); - } - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-item.less b/packages/ds-theme/src/custom-elements/ef-item.less deleted file mode 100644 index 606e301f71..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-item.less +++ /dev/null @@ -1,43 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-item'; - -:host { - &[type='header'] { - align-items: center; - } - - [part='checkbox'] { - margin-right: 8px; - } - - [part='sub-label'] { - font-size: 90%; - } - - &[sub-label] { - padding: 4px extract(@list-item-padding, 2); - } - - &[selected] { - &:not([highlighted]):not([focused]) { - background-color: @list-item-selected-background-color; - - &:not([multiple]) { - background-image: linear-gradient(@scheme-color-primary, @scheme-color-primary); - background-size: 4px 100%; - background-position: left top; - background-repeat: no-repeat; - } - } - - &[highlighted], - &[focused] { - color: @list-item-focus-text-color; - } - font-weight: 600; - } - - &[focused], - &[highlighted] { - color: @list-item-focus-text-color; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-label.less b/packages/ds-theme/src/custom-elements/ef-label.less deleted file mode 100644 index 1d30413fe4..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-label.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-label'; - -:host { - &[warning] { - color: @control-warning-color; - } - &[error], - &[error][warning] { - color: @control-error-color; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-layout.less b/packages/ds-theme/src/custom-elements/ef-layout.less deleted file mode 100644 index 246220495a..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-layout.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-layout'; diff --git a/packages/ds-theme/src/custom-elements/ef-led-gauge.less b/packages/ds-theme/src/custom-elements/ef-led-gauge.less deleted file mode 100644 index 3ae47f21dc..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-led-gauge.less +++ /dev/null @@ -1,18 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-led-gauge'; - -// TODO: Wait for UX specs -:host { - height: 68px; - --led-width: 5px; - --led-spacing: 1px; - - --left-segment-color: @dataviz-color-scale-negative; - --center-left-segment-color: @dataviz-color-scale-low-negative; - --center-segment-color: @dataviz-color-scale-neutral; - --center-right-segment-color: @dataviz-color-scale-low-positive; - --right-segment-color: @dataviz-color-scale-positive; - --range-color: @dataviz-color-primary; - - --top-selected-color: @dataviz-color-primary; - --bottom-selected-color: @color-carnation; -} diff --git a/packages/ds-theme/src/custom-elements/ef-list-item.less b/packages/ds-theme/src/custom-elements/ef-list-item.less deleted file mode 100644 index 9c2f6ba955..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-list-item.less +++ /dev/null @@ -1 +0,0 @@ -@import 'ef-item'; diff --git a/packages/ds-theme/src/custom-elements/ef-list.less b/packages/ds-theme/src/custom-elements/ef-list.less deleted file mode 100644 index 6c51a6054d..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-list.less +++ /dev/null @@ -1,2 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-list'; -@import '../shared-styles/scrollbar'; diff --git a/packages/ds-theme/src/custom-elements/ef-loader.less b/packages/ds-theme/src/custom-elements/ef-loader.less deleted file mode 100644 index b171318ac8..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-loader.less +++ /dev/null @@ -1,266 +0,0 @@ -:host { - @size: 32px; - @box-color: @global-background-color; - @box-flash-color: @global-text-color; - @cycle-duration: 2s; - @sin-45: 0.707106781186548; - @outer-position: (25% * @sin-45); - - // Parts to be created in the element's template - --parts: bar, shape shape-1, shape shape-2, shape shape-3, bar bar-1, bar bar-2, box box-1, box box-2, - box box-3, shape shape-1 flash flash-1, shape shape-2 flash flash-2, shape shape-3 flash flash-3; - - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - - [part='wrapper'] { - font-size: @size; - width: 2.75em; - height: 1em; - color: @loader-bar-color; - position: absolute; - top: calc(50% - 0.5em); - left: calc(50% - 1.375em); - display: block; - } - - [part~='shape'] { - color: @loader-shape-color; - border: 1px solid; - width: 0.5em; - height: 0.5em; - transform: rotate(45deg); - position: absolute; - top: 50%; - margin: calc(-0.25em - 1px); - } - - [part~='shape-1'] { - left: @outer-position; - animation: shape-1 (@cycle-duration / 2) linear infinite alternate; - } - - [part~='shape-2'] { - left: 50%; - animation: shape-2 (@cycle-duration / 4) linear infinite alternate; - } - - [part~='shape-3'] { - right: @outer-position; - animation: shape-3 (@cycle-duration / 2) linear infinite alternate; - } - - [part~='flash'] { - color: @loader-accent-color; - box-sizing: border-box; - outline: 2px solid currentColor; - margin: -0.25em; - } - - [part~='flash-1'] { - animation: flash-1 (@cycle-duration / 2) linear infinite alternate; - } - - [part~='flash-2'] { - animation: flash-2 (@cycle-duration / 4) linear infinite alternate; - } - - [part~='flash-3'] { - animation: flash-3 (@cycle-duration / 2) linear infinite alternate; - } - - [part~='box'] { - position: absolute; - border: 1px solid; - margin: calc(-1em / 32 - 1px); - width: calc(1em / 16); - height: calc(1em / 16); - top: 50%; - } - - [part~='box-1'] { - left: @outer-position; - animation: box-1 (@cycle-duration / 2) linear infinite alternate; - } - - [part~='box-2'] { - left: 50%; - animation: box-2 (@cycle-duration / 4) linear infinite alternate; - } - - [part~='box-3'] { - right: @outer-position; - animation: box-3 (@cycle-duration / 2) linear infinite alternate; - } - - [part~='bar'] { - position: absolute; - top: 50%; - left: @outer-position; - right: @outer-position; - height: 2px; - margin-top: -1px; - background-color: currentColor; - } - - [part~='bar-1'] { - left: @outer-position; - right: 50%; - background-color: @loader-accent-color; - animation: bar-1 (@cycle-duration / 2) linear infinite alternate; - } - - [part~='bar-2'] { - right: @outer-position; - left: 50%; - background-color: @loader-accent-color; - animation: bar-2 (@cycle-duration / 2) linear infinite alternate; - } - - @keyframes shape-1 { - 0%, - 10% { - opacity: 0; - } - 25%, - 100% { - opacity: 1; - } - } - - @keyframes shape-2 { - 0%, - 50% { - opacity: 1; - } - 80%, - 100% { - opacity: 0; - } - } - - @keyframes shape-3 { - 0%, - 75% { - opacity: 1; - } - 90%, - 100% { - opacity: 0; - } - } - - @keyframes flash-1 { - 0% { - opacity: 1; - } - 25%, - 100% { - opacity: 0; - } - } - - @keyframes flash-2 { - 0%, - 50% { - opacity: 0; - } - 100% { - opacity: 1; - } - } - - @keyframes flash-3 { - 0%, - 75% { - opacity: 0; - } - 100% { - opacity: 1; - } - } - - @keyframes box-1 { - 0%, - 20% { - background-color: @box-flash-color; - border-color: transparent; - } - 25%, - 100% { - background-color: @box-color; - border-color: inherit; - } - } - - @keyframes box-2 { - 0%, - 50% { - background-color: @box-color; - border-color: inherit; - } - 60%, - 100% { - background-color: @box-flash-color; - border-color: transparent; - } - } - - @keyframes box-3 { - 0%, - 75% { - background-color: @box-color; - border-color: inherit; - } - 80%, - 100% { - background-color: @box-flash-color; - border-color: transparent; - } - } - - @keyframes bar-1 { - 0%, - 5% { - transform: scaleX(0); - transform-origin: left center; - } - 24% { - transform: scaleX(1); - transform-origin: left center; - } - 26% { - transform: scaleX(1); - transform-origin: right center; - } - 45%, - 100% { - transform: scaleX(0); - transform-origin: right center; - } - } - - @keyframes bar-2 { - 0%, - 55% { - transform: scaleX(0); - transform-origin: left center; - } - 74% { - transform: scaleX(1); - transform-origin: left center; - } - 76% { - transform: scaleX(1); - transform-origin: right center; - } - 95%, - 100% { - transform: scaleX(0); - transform-origin: right center; - } - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-multi-input.less b/packages/ds-theme/src/custom-elements/ef-multi-input.less deleted file mode 100644 index 564de4a3e4..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-multi-input.less +++ /dev/null @@ -1,41 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-multi-input'; -@import '../shared-styles/scrollbar'; - -:host { - margin: 0; - padding: 0; - - [part='pill'] { - margin: 2px; - height: 18px; - } - - [part='search'] { - margin: 0; - height: 20px; - } - - &:not([readonly]):not([error]):not([warning]):hover { - border-color: @input-hover-border-color; - } - - &[readonly]:not([focused]) { - border-color: @input-disabled-border-color; - } - - &[warning] { - border-color: @control-warning-color; - } - - &[warning]:hover:not([readonly]) { - border-color: @control-hover-warning-color; - } - - &[error] { - border-color: @control-error-color; - } - - &[error]:hover:not([readonly]) { - border-color: @control-hover-error-color; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-notification-tray.less b/packages/ds-theme/src/custom-elements/ef-notification-tray.less deleted file mode 100644 index 149a2ef79a..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-notification-tray.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-notification-tray'; diff --git a/packages/ds-theme/src/custom-elements/ef-notification.less b/packages/ds-theme/src/custom-elements/ef-notification.less deleted file mode 100644 index ffd21322b3..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-notification.less +++ /dev/null @@ -1,36 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-notification'; - -:host { - --bar-height: 44px; - font-size: 14px; - color: var(--color, @color-white); - - & when (@variant = light) { - &[warning] { - color: @global-text-color; - } - } - - [part='container'] { - padding: 12px 16px; - } - - [part='content'] { - padding-right: 20px; - - // Override style of content inside notification per UX specs - ::slotted(a) { - color: inherit !important; - text-decoration: underline !important; - } - - ::slotted(a:hover) { - cursor: pointer !important; - text-decoration-color: inherit !important; - } - } - - [part='clear'] { - opacity: 0.4; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-number-field.less b/packages/ds-theme/src/custom-elements/ef-number-field.less deleted file mode 100644 index de9111a75f..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-number-field.less +++ /dev/null @@ -1,96 +0,0 @@ -@import (reference) './ef-text-field.less'; - -:host { - &:extend(:host all); - - [part='input'] { - appearance: textfield; - } - - [part='spinner-up'], - [part='spinner-down'] { - line-height: 0; - min-width: 22px; - color: @input-text-color; - } - - [part='spinner'] { - height: 100%; - margin-left: 8px; - border-left: inherit; - border-color: inherit; - } - - // if it has spinner, remove padding-right from text-field and use spinner's margin instead - &:not([no-spinner]) { - padding: 0 0 0 8px; - } - - // no border in transparent mode - &[transparent], - &[transparent] [part='spinner'] { - border: none; - } - - // hover state - &:hover:not([readonly]) { - [part='spinner-up'], - [part='spinner-down'] { - color: @scheme-color-secondary; - & when (@variant = light) { - color: @scheme-color-primary; - } - &:hover { - color: @button-hover-text-color; - background-color: @button-hover-background-color; - } - &:active { - color: @button-pressed-text-color; - background: @button-pressed-background-color; - } - } - } - - // border color of control should be focused color when spinner is hovered - &:not([transparent]):not([readonly]) [part='spinner']:hover { - border-left-color: @input-focused-border-color !important; - border-left-style: @input-border-style !important; - &::after { - content: ''; - border-width: inherit; - border: @input-border-width @input-border-style @input-focused-border-color; - position: absolute; - top: -1px; - right: -1px; - bottom: -1px; - left: -1px; - pointer-events: none; - } - } - - // focus state - &[focused] { - [part='spinner-up'], - [part='spinner-down'] { - color: @scheme-color-secondary; - & when (@variant = light) { - color: @scheme-color-primary; - } - } - } - - // disable and readonly state - &[disabled], - &[readonly]:not([focused]) { - [part='spinner-up'], - [part='spinner-down'] { - color: @input-disabled-text-color; - } - &[error] [part='spinner'] { - border-color: fade(@control-hover-error-color, 50%); - } - &[warning] [part='spinner'] { - border-color: fade(@control-hover-warning-color, 50%); - } - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-overlay-menu.less b/packages/ds-theme/src/custom-elements/ef-overlay-menu.less deleted file mode 100644 index 2bc1edfb57..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-overlay-menu.less +++ /dev/null @@ -1,21 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-overlay-menu'; - -:host { - background-color: @overlay-menu-background-color; - border: 1px solid @scheme-color-primary; - padding: 4px 0; - - ef-item, - ::slotted(ef-item) { - padding-left: 12px; - } - - [part='menu-back']:hover { - color: @list-item-focus-text-color; - } - - &[nested]:not([compact]) { - // accommodate shadow, and padding 4px + 1px border - margin: -5px 2px 0 2px; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-overlay.less b/packages/ds-theme/src/custom-elements/ef-overlay.less deleted file mode 100644 index 9989ce7267..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-overlay.less +++ /dev/null @@ -1,2 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-overlay'; -@import '../shared-styles/scrollbar'; diff --git a/packages/ds-theme/src/custom-elements/ef-pagination.less b/packages/ds-theme/src/custom-elements/ef-pagination.less deleted file mode 100644 index 195cdcd83c..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-pagination.less +++ /dev/null @@ -1,26 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-pagination'; - -:host { - margin: @control-margin; - - [part='input'] { - & when (@variant = dark) { - height: (@control-height - @input-border-width * 2); - } - width: 150px; - margin: 0; - & when (@variant = light) { - // input should have margin left/right in light theme - margin: 0 1px; - } - - &::selection { - color: @global-text-selection-color; - background-color: @global-text-selection-background; - } - } - - [part='buttons'] { - margin: 0; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-panel.less b/packages/ds-theme/src/custom-elements/ef-panel.less deleted file mode 100644 index 11ea8ba612..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-panel.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-panel'; diff --git a/packages/ds-theme/src/custom-elements/ef-password-field.less b/packages/ds-theme/src/custom-elements/ef-password-field.less deleted file mode 100644 index 79a04fa603..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-password-field.less +++ /dev/null @@ -1,12 +0,0 @@ -@import './ef-text-field'; -@import (reference) '~@refinitiv-ui/elemental-theme/src/custom-elements/ef-password-field'; - -:host { - [part='icon'] { - &:extend(:host [part='icon'] all); - } - - [part='input'] { - &:extend(:host [part='input'] all); - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-pill.less b/packages/ds-theme/src/custom-elements/ef-pill.less deleted file mode 100644 index fe3b2283f8..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-pill.less +++ /dev/null @@ -1,83 +0,0 @@ -@import (reference) '~@refinitiv-ui/elemental-theme/src/custom-elements/ef-pill'; - -:host { - &:extend(:host); - - @hover-background-color: @button-hover-background-color; - @hover-border-color: @hover-background-color; - @selected-background-color: @button-toggle-active-background-color; - @pressed-background-color: @button-pressed-background-color; - - @size: unit((@button-font-size + 8), px); - @padding: 0 8px; - @cross-size: round((@size / 2 + 2)); - border-radius: round((@size / 2)); - height: @size; - line-height: @size; - background-color: @pill-background-color; - border: 1px solid @pill-border-color; - - &:hover, - &[active]:hover { - background-color: @hover-background-color; - border-color: @hover-border-color; - } - - &[active] { - border-color: @pill-toggle-active-border-color; - background-color: @selected-background-color; - } - - &[toggles] { - &[active][pressed], - &[pressed] { - border-color: @pill-toggle-active-border-color; - } - &[pressed], - &[pressed]:hover { - background-color: @pressed-background-color; - } - } - - &[focused='visible'] { - &:extend(:host[focused='visible'] all); - } - - &:hover, - &[active], - &[pressed] { - color: @global-text-selection-color; - - [part='close'] { - color: @global-text-selection-color; - opacity: 1; - } - } - - &[disabled] { - border-color: @button-disabled-border-color; - color: @button-disabled-text-color; - background-color: @button-disabled-background-color; - } - - [part='close'] { - &:extend(:host [part='close'] all); - color: @pill-default-close-color; - min-width: @cross-size; - opacity: 0.4; - background-color: initial; - } - - .mobile-specific({ - &[toggles]:not([active]), &:not([active]) { - color: @global-text-color; - background-color: @pill-background-color; - border-color: @pill-border-color; - - [part=close] { - color: @global-text-color; - opacity: 0.4; - } - } - }); -} diff --git a/packages/ds-theme/src/custom-elements/ef-progress-bar.less b/packages/ds-theme/src/custom-elements/ef-progress-bar.less deleted file mode 100644 index bfaa6026b1..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-progress-bar.less +++ /dev/null @@ -1,5 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-progress-bar'; - -:host { - height: 8px; -} diff --git a/packages/ds-theme/src/custom-elements/ef-radio-button.less b/packages/ds-theme/src/custom-elements/ef-radio-button.less deleted file mode 100644 index 7ba688ece9..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-radio-button.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-radio-button'; -@import '../shared-styles/checkbox.less'; - -:host { - .checkbox-default(); - - [part='check'] { - width: 8px; - height: 8px; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-rating.less b/packages/ds-theme/src/custom-elements/ef-rating.less deleted file mode 100644 index e2e68e7738..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-rating.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-rating'; diff --git a/packages/ds-theme/src/custom-elements/ef-search-field.less b/packages/ds-theme/src/custom-elements/ef-search-field.less deleted file mode 100644 index 7857a24877..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-search-field.less +++ /dev/null @@ -1 +0,0 @@ -@import './ef-text-field'; diff --git a/packages/ds-theme/src/custom-elements/ef-select.less b/packages/ds-theme/src/custom-elements/ef-select.less deleted file mode 100644 index 75c8bc5bb7..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-select.less +++ /dev/null @@ -1,64 +0,0 @@ -@import 'element:ef-overlay'; -@import 'element:ef-item'; -@import 'element:ef-icon'; -@import '../shared-styles/scrollbar'; - -@import (reference) 'ef-text-field'; - -:host { - // #region - Extend from ef-text-field - &:extend(:host all); - - &:not([readonly]):not([error]):not([warning]):hover { - [part='label'] { - &:extend(:host:not([readonly]):not([error]):not([warning]):hover [part='input']); - } - } - - &[focused] { - [part='label'] { - &:extend(:host[focused] [part='input']); - } - } - // #endregion - - [part='placeholder'] { - opacity: 0.7; - } - - [part='icon'] { - color: inherit; - & when (@variant = light) { - color: @control-border-color; - } - } - - &[disabled] { - [part='icon'] { - & when (@variant = light) { - color: fade(@control-border-color, 50%); - } - } - } - - [part='list'] { - color: @control-text-color; - max-width: var(--list-max-width, 300px); - max-height: var(--list-max-height); - border: 1px solid @scheme-color-primary; - margin: 2px 0; - background-color: @select-background-color; - - ef-item:not(:first-child):not([type='divider']), - ::slotted(ef-item:not(:first-child):not([type='divider'])) { - box-shadow: 0px -1px 0 @separator-color; - } - ::slotted(:not(ef-item)) { - display: none; - } - } - - .standard-scrollbars(); -} - -.webkit-scrollbars(); diff --git a/packages/ds-theme/src/custom-elements/ef-sidebar-layout.less b/packages/ds-theme/src/custom-elements/ef-sidebar-layout.less deleted file mode 100644 index 647ee480e2..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-sidebar-layout.less +++ /dev/null @@ -1,2 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-sidebar-layout'; -@import '../shared-styles/scrollbar'; diff --git a/packages/ds-theme/src/custom-elements/ef-slider-marker.less b/packages/ds-theme/src/custom-elements/ef-slider-marker.less deleted file mode 100644 index aacce6cce0..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-slider-marker.less +++ /dev/null @@ -1,7 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-slider-marker'; - -:host { - [part='marker'] { - background-color: var(--marker-color, @slider-track-fill-color); - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-slider.less b/packages/ds-theme/src/custom-elements/ef-slider.less deleted file mode 100644 index 5a41ac723a..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-slider.less +++ /dev/null @@ -1,59 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-slider'; - -:host { - @thumb-width: 8px; - opacity: 1; - - &:not([disabled]):not([readonly]):hover { - cursor: pointer; - } - - [part='track-wrapper'] { - top: calc((100% - @slider-track-height) / 2); - } - - [part='thumb-container'] { - top: 0; - margin-left: ((-@thumb-width) / 2); - width: @thumb-width; - } - - [part='thumb'] { - top: calc(@slider-track-height / 2); - border-radius: 0; - width: @thumb-width; - height: 20px; - transform: none; - border: 1px solid @slider-thumb-border-color; - } - - &[disabled] [part='thumb'] { - & when (@variant = light) { - border-color: @color-silver; - } - } - - // there is no pin in Halo theme - [part='pin'] { - display: none; - } - - &:not([disabled]) [part='track-fill'] { - background-color: var(--progress-color, var(--thumb-color, @slider-track-fill-color)); - } - - &:not([disabled]):not([readonly]):not(.grabbable) [part='thumb']:hover { - background-color: var(--thumb-color, @slider-thumb-hover-color); - border-color: var(--thumb-color, @slider-thumb-hover-border-color); - } - - &.grabbable [part='thumb'] { - border: 1px solid var(--thumb-color, @slider-thumb-active-border-color); - background-color: var(--thumb-color, @slider-thumb-active-color); - transform: none; - } - - &[pin].grabbable [part='thumb'] { - transform: none; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-sparkline.less b/packages/ds-theme/src/custom-elements/ef-sparkline.less deleted file mode 100644 index 7b0345967f..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-sparkline.less +++ /dev/null @@ -1,5 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-sparkline'; - -:host { - --line-width: 1px; -} diff --git a/packages/ds-theme/src/custom-elements/ef-swing-gauge.less b/packages/ds-theme/src/custom-elements/ef-swing-gauge.less deleted file mode 100644 index 6873b83c80..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-swing-gauge.less +++ /dev/null @@ -1,27 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-swing-gauge'; -// TODO: Wait specs from UX. -// We use this style for now as it requires minimal variables. We can create more variables once we've specs. - -:host { - --secondary-color: @color-lights-out; - --center-line-color: @color-white; - --border-color: @dataviz-color-primary; - --center-line: dotted; - - @symbol-size: 12px; - - [part='primary-legend-symbol'], - [part='secondary-legend-symbol'] { - margin-top: 1px; - height: @symbol-size; - width: @symbol-size; - - & when (@variant = dark) { - // color of secondary is same as background so we need border - border: 1px solid var(--border-color, @dataviz-color-primary); - // deduct size of border to keep size of symbol same in both light and dark - height: (@symbol-size - 2); - width: (@symbol-size - 2); - } - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-tab-bar.less b/packages/ds-theme/src/custom-elements/ef-tab-bar.less deleted file mode 100644 index 9f14f6d518..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-tab-bar.less +++ /dev/null @@ -1,120 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-tab-bar'; - -:host { - [part='left-btn'], - [part='right-btn'] { - width: 36px; - border: none; - - &::after { - content: ''; - position: absolute; - margin: auto; - width: 1px; - background: @tab-level2-border-color; - height: 70%; - top: 0; - bottom: 0; - } - } - - &[level='1'] { - [part='left-btn'], - [part='right-btn'] { - &::after { - content: none; - } - } - [part='left-btn'] { - border-right: 1px solid @tab-border-color; - } - [part='right-btn'] { - border-left: 1px solid @tab-border-color; - } - } - - &[level='2'], - &[level='3'] { - [part='left-btn']::after { - right: 0; - } - [part='right-btn']::after { - left: 0; - } - } - - &[level='2'] { - [part='left-btn'], - [part='right-btn'] { - &:not(:active):not(:hover) { - background-color: @tab-level2-bg-color; - } - &::after { - height: 70%; - } - } - } - - &[level='3'] { - [part='left-btn'], - [part='right-btn'] { - border-color: transparent; - &:not(:active):not(:hover) { - background-color: @global-background-color; - } - &::after { - height: 30%; - } - } - } - - // For border bottom in vertical mode - @border-height: 1px; - @border-position: calc(100% + @border-height); - @border-side-size: 2% @border-height; - @border-center-size: 100% @border-height; // required 100% width, Chrome miscalculate with 96% width (100% - width of each side) - - // vertical tab bar - &[vertical] { - [part='content'] { - ::slotted(ef-tab) { - border-bottom-color: transparent; - border-right: none; - background: linear-gradient(@tab-bar-background-color, @tab-bar-background-color) left - @border-position / @border-side-size no-repeat, - linear-gradient(@tab-bar-background-color, @tab-bar-background-color) right @border-position / - @border-side-size no-repeat, - linear-gradient(@tab-vertical-border-color, @tab-vertical-border-color) center @border-position / - @border-center-size no-repeat; - } - - ::slotted(ef-tab[active]:not(:active):not(:hover)) { - background: linear-gradient(@global-background-color, @global-background-color) left @border-position / - @border-side-size no-repeat, - linear-gradient(@global-background-color, @global-background-color) right @border-position / - @border-side-size no-repeat, - linear-gradient(@tab-vertical-border-color, @tab-vertical-border-color) center @border-position / - @border-center-size no-repeat; - } - ::slotted(ef-tab:not([active]):not(:active):not(:hover)) { - background-color: @tab-bar-background-color; - } - ::slotted(ef-tab:hover) { - color: @tab-hover-text-color; - background-color: @tab-hover-background-color; - } - ::slotted(ef-tab:active) { - background-color: @tab-pressed-background-color; - } - } - &[level='1'], - &[level='3'] { - [part='content'] { - ::slotted(ef-tab[active]:not(:active):not(:hover)) { - color: @tab-level2-active-bg-color; - background-color: @global-background-color; - } - } - } - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-tab.less b/packages/ds-theme/src/custom-elements/ef-tab.less deleted file mode 100644 index edcb41958f..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-tab.less +++ /dev/null @@ -1,78 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-tab'; - -:host { - &[level='1'] { - border-right: 1px solid @tab-border-color; - } - - &[level='2'] { - &:not(:last-child) { - border-right: none; - [part='label-container']::after { - content: ''; - position: absolute; - margin: auto; - width: 1px; - background: @tab-level2-border-color; - height: 70%; - right: 0; - top: 0; - bottom: 0; - z-index: 1; - } - } - &:not(:active):not([active]):not(:hover) { - background-color: @tab-level2-bg-color; - } - &[active]:not(:active):not(:hover) { - color: @tab-level2-active-bg-color; - background-color: @global-background-color; - } - &[active]:focus:not([focused]), - &[focused='visible']:not(:active):not(:hover) { - color: @tab-focused-text-color; - } - } - - &[level='3'] { - border-bottom: 2px solid transparent; - color: @tab-level3-text-color; - background-color: @global-background-color; - - &[clears-on-hover] [part='close-container'] { - background: @global-background-color; - box-shadow: @tab-clears-box-shadow @global-background-color; - } - - &:focus:not([focused]), - &[focused='visible'] { - color: @tab-level3-active-text-color; - background-color: @tab-level2-bg-color; - } - - &:hover, - &:active, - &[active] { - color: @tab-level3-active-text-color; - background-color: @global-background-color; - - &[clears-on-hover] [part='close-container'] { - background: @global-background-color; - box-shadow: @tab-clears-box-shadow @global-background-color; - } - - [part='close'] { - color: @tab-level3-active-text-color; - } - - border-color: @tab-active-background-color; - } - - &:hover { - border-color: @tab-hover-background-color; - } - &:active { - border-color: @tab-active-pressed-background-color; - } - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-text-field.less b/packages/ds-theme/src/custom-elements/ef-text-field.less deleted file mode 100644 index ac8e7e24b1..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-text-field.less +++ /dev/null @@ -1,94 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-text-field'; -// @import '../shared-styles/input'; - -:host { - @input-readonly-icon-color: @input-disabled-text-color; - @input-readonly-border-color: @input-disabled-border-color; - @input-readonly-background-color: @input-disabled-background-color; - - color: @input-text-color; - - ::selection { - color: @global-text-selection-color; - background-color: @global-text-selection-background; - } - - [part='icon'] { - margin-left: 2px; - } - - &:not([readonly]):not([error]):not([warning]):not([focused]):hover { - border-color: @input-hover-border-color; - color: @input-hover-text-color; - - [part='icon'] { - color: @scheme-color-secondary; - & when (@variant = light) { - color: @scheme-color-primary; - } - } - } - - [part~='button-clear']:hover, - [part~='button-clear']:active { - color: @input-focused-border-color; - } - - &[warning] { - border-color: @control-warning-color; - } - - &[error], - &[error][warning] { - border-color: @control-error-color; - } - - &[warning]:hover:not([readonly]):not([focused]) { - color: @input-hover-text-color; - border-color: @control-hover-warning-color; - } - - &[warning][disabled], - &[warning][readonly]:not([focused]) { - border-color: fade(@control-hover-warning-color, 50%); - } - - &[error]:hover:not([readonly]):not([focused]) { - color: @input-hover-text-color; - border-color: @control-hover-error-color; - } - - &[error][disabled], - &[error][warning][disabled], - &[error][readonly]:not([focused]) { - border-color: fade(@control-hover-error-color, 50%); - } - - &[disabled] { - color: @input-disabled-text-color; - border-color: @input-disabled-border-color; - background-color: @input-disabled-background-color; - } - - &[readonly]:not([focused]) { - border-color: @input-readonly-border-color; - background-color: @input-readonly-background-color; - - [part='icon'] { - color: @input-readonly-icon-color; - } - } - - &[focused], - &[focused][error][warning] { - border-color: @input-focused-border-color; - color: @input-focused-text-color; - - [part='icon'] { - color: @scheme-color-secondary; - & when (@variant = light) { - color: @scheme-color-primary; - } - } - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-time-picker.less b/packages/ds-theme/src/custom-elements/ef-time-picker.less deleted file mode 100644 index 37fd445fd7..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-time-picker.less +++ /dev/null @@ -1,42 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-time-picker'; - -:host { - [part='input'] { - width: 24px; - } - - [part='divider'] { - width: 2px; - } - - [part='input'], - [part='toggle'] { - &:focus::after, - &[focused]::after { - border-bottom: 4px solid transparent; - display: none; - } - } - - &[readonly]:not([focused]) { - border-color: @input-disabled-border-color; - } - - &:hover:not([readonly]):not([focused]) { - border-color: @input-hover-border-color; - } - - &[error] { - &:not([focused]) { - border-color: @control-error-color; - } - - &[readonly]:not([focused]) { - border-color: fade(@control-hover-error-color, 50%); - } - - &:hover:not([readonly]):not([focused]) { - border-color: @control-hover-error-color; - } - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-toggle.less b/packages/ds-theme/src/custom-elements/ef-toggle.less deleted file mode 100644 index 950abc4080..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-toggle.less +++ /dev/null @@ -1,83 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-toggle'; - -:host { - @width: 44px; - @height: 24px; - @switch-margin: 1px; - @switch-width: 20px; - @label-padding: 3px; - // Padding left/right include the switch button, use for align the label to center - @switching-padding: unit((@switch-width + @switch-margin + @label-padding), px); - - width: @width; - height: @height; - font-weight: @toggle-font-weight; - color: @global-text-color; - line-height: unit((@height - (@label-padding * 2)), px); - text-transform: uppercase; - - [part='toggle'] { - border-color: @toggle-border-color; - &::after { - top: @switch-margin; - left: @switch-margin; - width: calc(50% - @switch-margin); - height: calc(100% - (@switch-margin * 2)); - background-color: @toggle-switch-background-color; - } - } - - &[label], - &[checked-label] { - width: 54px; - min-width: @width; - - &[checked] [part='toggle'] { - padding-right: @switching-padding; - padding-left: @label-padding; - } - - [part='toggle'] { - padding: @label-padding; - padding-left: @switching-padding; - - &::after { - width: @switch-width; - } - } - } - - &[checked] [part='toggle']::after { - right: @switch-margin; - } - - .desktop-specific({ - &:hover:not([readonly]) { - color: @input-hover-text-color; - [part=toggle] { - border-color: @button-hover-border-color; - &::after { - background-color: @button-hover-background-color; - border-color: @button-hover-border-color; - } - } - } - }); - - // Spacial style for dark theme only - & when (@variant = dark) { - &[checked] { - color: @color-white; - } - - &[disabled] [part='toggle']::after { - opacity: 0.2; - } - - // Hide border when not hover - [part='toggle']::after, - &[checked] [part='toggle']::after { - border: 1px solid @control-background-color; - } - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-tooltip.less b/packages/ds-theme/src/custom-elements/ef-tooltip.less deleted file mode 100644 index 8815566895..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-tooltip.less +++ /dev/null @@ -1,10 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-tooltip'; - -:host { - [part='tooltip'] { - border: none; - min-height: 18px; - line-height: 18px; - color: @tooltip-text-color; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-tornado-chart.less b/packages/ds-theme/src/custom-elements/ef-tornado-chart.less deleted file mode 100644 index 13e3d2fba0..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-tornado-chart.less +++ /dev/null @@ -1,6 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-tornado-chart'; - -:host { - --primary-color: @dataviz-color-1; - --secondary-color: @dataviz-color-2; -} diff --git a/packages/ds-theme/src/custom-elements/ef-tornado-item.less b/packages/ds-theme/src/custom-elements/ef-tornado-item.less deleted file mode 100644 index d3adb206c6..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-tornado-item.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-tornado-item'; - -:host { - &[highlighted] { - [part='label'], - [part='primary-bar'], - [part='secondary-bar'] { - font-weight: 600; - } - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-tree-item.less b/packages/ds-theme/src/custom-elements/ef-tree-item.less deleted file mode 100644 index a4af360efc..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-tree-item.less +++ /dev/null @@ -1,36 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-tree-item'; -@import (reference) 'ef-item'; - -:host { - margin-top: -1px; - border-top: 1px solid @separator-color; - border-bottom: 1px solid @separator-color; - background-color: @tree-menu-item-background-color; - min-height: @tree-menu-item-height; - - &[group] { - &:not([focused]):not([highlighted]) { - background-color: @tree-menu-item-group-background-color; - } - &[focused], - &[highlighted] { - &:not([multiple]) { - color: @tree-menu-item-group-hover-text-color; - background-color: @tree-menu-item-group-hover-background-color; - } - } - } - - [part='indent'] { - font-size: 20px; - } - - [part='label'] { - padding: 4px 6px 4px 0px; - line-height: 1.2; - } - - [part='label-icon'] { - margin: 0px 4px 0px 0px; - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-tree-select.less b/packages/ds-theme/src/custom-elements/ef-tree-select.less deleted file mode 100644 index 5033bfa8c0..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-tree-select.less +++ /dev/null @@ -1,71 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-tree-select'; -@import 'ef-combo-box'; - -:host { - @list-max-height: var(--list-max-height, 400px); - @panel-width: var(--panel-width, 320px); - width: unit((@input-width * 1.5), px); - - [part~='filter-control'], - [part~='tree-control'] { - background: @search-list-more-search-background-color; - padding: 0 extract(@list-item-padding, 2); - min-height: @list-item-height; - box-sizing: border-box; - } - - [part='pills'], - [part='pills'][focused] { - border: none; - } - - [part='list'] { - width: @panel-width; - min-width: @panel-width; - max-width: var(--list-max-width, @panel-width); - max-height: @list-max-height; - } - - [part~='footer'] { - background: @search-list-background-color; - } - - [part~='button-toggle'] { - border: none; - } - - [part='cancel-button'], - [part='done-button'] { - margin: 5px; - } - - &:not([readonly]) { - &:hover { - [part~='button-toggle'] { - color: @input-focused-border-color; - } - } - - &[focused] { - [part~='button-toggle'] { - color: @input-focused-border-color; - } - } - - [part~='button-toggle']:hover { - border: none; - color: @input-focused-border-color; - background: none; - } - - [part~='button-toggle']:active { - color: @input-focused-border-color; - background: none; - } - - [part~='button-clear']:hover, - [part~='button-clear']:active { - color: @input-focused-border-color; - } - } -} diff --git a/packages/ds-theme/src/custom-elements/ef-tree.less b/packages/ds-theme/src/custom-elements/ef-tree.less deleted file mode 100644 index e93e3f0b46..0000000000 --- a/packages/ds-theme/src/custom-elements/ef-tree.less +++ /dev/null @@ -1,2 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-tree'; -@import '../shared-styles/scrollbar'; diff --git a/packages/ds-theme/src/defaults.less b/packages/ds-theme/src/defaults.less deleted file mode 100644 index 4671df14d9..0000000000 --- a/packages/ds-theme/src/defaults.less +++ /dev/null @@ -1,3 +0,0 @@ -// This file is here to import default settings from ../exports/bare.less -@import (reference) 'colors'; -@import (reference) 'variables'; diff --git a/packages/ds-theme/src/fonts.less b/packages/ds-theme/src/fonts.less deleted file mode 100644 index 3c47dbd5b1..0000000000 --- a/packages/ds-theme/src/fonts.less +++ /dev/null @@ -1,21 +0,0 @@ -@font-face { - font-family: 'Proxima Nova Fin'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url('https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/fonts/proximanovafin/proximanovafin-regular.woff2') - format('woff2'), - url('https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/fonts/proximanovafin/proximanovafin-regular.woff') - format('woff'); -} - -@font-face { - font-family: 'Proxima Nova Fin'; - font-style: normal; - font-weight: 500 600; - font-display: swap; - src: url('https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/fonts/proximanovafin/proximanovafin-semibold.woff2') - format('woff2'), - url('https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/fonts/proximanovafin/proximanovafin-semibold.woff') - format('woff'); -} diff --git a/packages/ds-theme/src/native-elements/a.less b/packages/ds-theme/src/native-elements/a.less deleted file mode 100644 index 0c53088df2..0000000000 --- a/packages/ds-theme/src/native-elements/a.less +++ /dev/null @@ -1,21 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/a'; - -a { - &:hover { - text-decoration: underline; - text-decoration-color: @scheme-color-primary; - color: @link-hover-text-color; - } - &:visited { - color: @link-visited-text-color; - } - &[alt] { - color: @link-alt-text-color; - } - &[alt]:hover { - color: @link-alt-hover-text-color; - } - &[alt]:visited { - color: @link-alt-visited-text-color; - } -} diff --git a/packages/ds-theme/src/native-elements/body.less b/packages/ds-theme/src/native-elements/body.less deleted file mode 100644 index eca8dfd7ca..0000000000 --- a/packages/ds-theme/src/native-elements/body.less +++ /dev/null @@ -1,52 +0,0 @@ -@import '../fonts'; -@import '../shared-styles/scrollbar'; - -body { - color: @global-text-color; - font-size: @global-text-size; - line-height: @global-text-line-height; - background: @global-background-color; - padding: 0; - margin: 0 auto; - - ::selection { - background-color: @global-text-selection-background; - color: @global-text-selection-color; - } - - font-family: 'Proxima Nova Fin', Arial, 'Helvetica Nue', Helvetica, sans-serif; - visibility: visible; - - :lang(ja) & { - font-family: 'Proxima Nova Fin', Meiryo, 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', - 'MS PGothic', 'ＭＳ Ｐゴシック', Arial; - pre { - font-family: 'MS Gothic', 'ＭＳ ゴシック', 'MS PGothic', 'Osaka－等幅', 'Osaka-等幅', Osaka-mono, - monospace, 'ＭＳ Ｐゴシック', Arial; - } - } - - :lang(zh-CN) & { - font-family: 'Proxima Nova Fin', 'Microsoft YaHei', '微软雅黑', 'STXihei', '华文细黑', Simsun, '宋体', - Arial; - } - - :lang(zh-Hant) & { - font-family: 'Proxima Nova Fin', 'Heiti TC', '黑體-繁', 'Microsoft JhengHei', '微軟正黑體', Pmingliu, - '新細明體', Arial; - pre { - font-family: 'Heiti TC', '黑體-繁', Pmingliu, '新細明體', monospace, Arial; - } - } - - &::-webkit-scrollbar-button { - display: block; - } - - &::-webkit-scrollbar { - width: @scrollbar-size-large; - height: @scrollbar-size-large; - } - - .scrollbar-thumb(12px); -} diff --git a/packages/ds-theme/src/native-elements/button.less b/packages/ds-theme/src/native-elements/button.less deleted file mode 100644 index 4049bb265e..0000000000 --- a/packages/ds-theme/src/native-elements/button.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/button'; diff --git a/packages/ds-theme/src/native-elements/h1.less b/packages/ds-theme/src/native-elements/h1.less deleted file mode 100644 index 5162f35ca9..0000000000 --- a/packages/ds-theme/src/native-elements/h1.less +++ /dev/null @@ -1,8 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/h1'; - -h1 { - font-size: 44px; - margin-bottom: 15px; - font-weight: normal; - line-height: calc(50 / 44); -} diff --git a/packages/ds-theme/src/native-elements/h2.less b/packages/ds-theme/src/native-elements/h2.less deleted file mode 100644 index d952b0f35a..0000000000 --- a/packages/ds-theme/src/native-elements/h2.less +++ /dev/null @@ -1,8 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/h2'; - -h2 { - font-size: 36px; - margin-bottom: 15px; - font-weight: normal; - line-height: calc(42 / 36); -} diff --git a/packages/ds-theme/src/native-elements/h3.less b/packages/ds-theme/src/native-elements/h3.less deleted file mode 100644 index 22895a1f40..0000000000 --- a/packages/ds-theme/src/native-elements/h3.less +++ /dev/null @@ -1,8 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/h3'; - -h3 { - font-size: 28px; - margin-bottom: 15px; - font-weight: normal; - line-height: calc(34 / 28); -} diff --git a/packages/ds-theme/src/native-elements/h4.less b/packages/ds-theme/src/native-elements/h4.less deleted file mode 100644 index 0a58faf59c..0000000000 --- a/packages/ds-theme/src/native-elements/h4.less +++ /dev/null @@ -1,9 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/h4'; - -h4 { - font-size: 24px; - margin-bottom: 10px; - text-transform: uppercase; - font-weight: 600; - line-height: calc(30 / 24); -} diff --git a/packages/ds-theme/src/native-elements/h5.less b/packages/ds-theme/src/native-elements/h5.less deleted file mode 100644 index 0f8ba58639..0000000000 --- a/packages/ds-theme/src/native-elements/h5.less +++ /dev/null @@ -1,9 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/h5'; - -h5 { - font-size: 18px; - margin-bottom: 10px; - text-transform: uppercase; - font-weight: 600; - line-height: calc(24 / 18); -} diff --git a/packages/ds-theme/src/native-elements/h6.less b/packages/ds-theme/src/native-elements/h6.less deleted file mode 100644 index 1b4e4b6319..0000000000 --- a/packages/ds-theme/src/native-elements/h6.less +++ /dev/null @@ -1,9 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/h6'; - -h6 { - font-size: 16px; - margin-bottom: 10px; - text-transform: uppercase; - font-weight: 600; - line-height: calc(22 / 16); -} diff --git a/packages/ds-theme/src/native-elements/header.less b/packages/ds-theme/src/native-elements/header.less deleted file mode 100644 index 315a38b730..0000000000 --- a/packages/ds-theme/src/native-elements/header.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/header'; diff --git a/packages/ds-theme/src/native-elements/hr.less b/packages/ds-theme/src/native-elements/hr.less deleted file mode 100644 index 5bb811bc03..0000000000 --- a/packages/ds-theme/src/native-elements/hr.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/hr'; diff --git a/packages/ds-theme/src/native-elements/html.less b/packages/ds-theme/src/native-elements/html.less deleted file mode 100644 index 4b4bade2f1..0000000000 --- a/packages/ds-theme/src/native-elements/html.less +++ /dev/null @@ -1,8 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/html'; -@import '../shared-styles/scrollbar'; - -@supports not selector(::-webkit-scrollbar) { - html { - scrollbar-width: auto; - } -} diff --git a/packages/ds-theme/src/native-elements/input.less b/packages/ds-theme/src/native-elements/input.less deleted file mode 100644 index 2178fe5dd0..0000000000 --- a/packages/ds-theme/src/native-elements/input.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/input'; diff --git a/packages/ds-theme/src/native-elements/kbd.less b/packages/ds-theme/src/native-elements/kbd.less deleted file mode 100644 index 63061141ab..0000000000 --- a/packages/ds-theme/src/native-elements/kbd.less +++ /dev/null @@ -1,13 +0,0 @@ -kbd { - display: inline-block; - color: @scheme-color-complementary; - background-color: @kbd-background-color; - box-shadow: 0px 0px 0px 2px @kbd-background-color; - font-weight: 600; - font-family: inherit; - font-size: unit(((@global-text-size - 2) / @global-text-size), em); - border-radius: 1em; - padding: 0 0.5em; - height: 1.2em; - margin-top: -0.1em; -} diff --git a/packages/ds-theme/src/native-elements/mark.less b/packages/ds-theme/src/native-elements/mark.less deleted file mode 100644 index 14d6d8d2b2..0000000000 --- a/packages/ds-theme/src/native-elements/mark.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/mark'; diff --git a/packages/ds-theme/src/native-elements/ol.less b/packages/ds-theme/src/native-elements/ol.less deleted file mode 100644 index 533a19636c..0000000000 --- a/packages/ds-theme/src/native-elements/ol.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/ol'; diff --git a/packages/ds-theme/src/native-elements/p.less b/packages/ds-theme/src/native-elements/p.less deleted file mode 100644 index d993d16bca..0000000000 --- a/packages/ds-theme/src/native-elements/p.less +++ /dev/null @@ -1,5 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/p'; - -p { - margin: 0 0 12px 0; -} diff --git a/packages/ds-theme/src/native-elements/select.less b/packages/ds-theme/src/native-elements/select.less deleted file mode 100644 index d0462c94ea..0000000000 --- a/packages/ds-theme/src/native-elements/select.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/select'; diff --git a/packages/ds-theme/src/native-elements/table.less b/packages/ds-theme/src/native-elements/table.less deleted file mode 100644 index 70bc839518..0000000000 --- a/packages/ds-theme/src/native-elements/table.less +++ /dev/null @@ -1,10 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/table'; - -th { - font-weight: @grid-header-font-weight; - border: @grid-border; -} - -th:hover { - background-color: @grid-header-hover-background-color; -} diff --git a/packages/ds-theme/src/native-elements/textarea.less b/packages/ds-theme/src/native-elements/textarea.less deleted file mode 100644 index a71c25a8ec..0000000000 --- a/packages/ds-theme/src/native-elements/textarea.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/textarea'; diff --git a/packages/ds-theme/src/native-elements/ul.less b/packages/ds-theme/src/native-elements/ul.less deleted file mode 100644 index 3f0e7b9cf6..0000000000 --- a/packages/ds-theme/src/native-elements/ul.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/native-elements/ul'; diff --git a/packages/ds-theme/src/palettes/action.less b/packages/ds-theme/src/palettes/action.less deleted file mode 100644 index 025317bc09..0000000000 --- a/packages/ds-theme/src/palettes/action.less +++ /dev/null @@ -1,29 +0,0 @@ -//* Action colour palette for something - -// Dark -@color-mexican-red : #A01C2B; -@color-carnation : #F5475B; -@color-rose-bud : #FAA8B1; -@color-green-pea : #227542; -@color-emerald : #39C46E; -@color-algae-green : #87DCA7; -@color-olive : #7F6400; -@color-supernova : #FFC800; -@color-sparkler : #FFE999; -@color-teal : #007678; -@color-robins-egg : #00D0D4; -@color-mint-tulip : #AFEFF1; - -// Light -@color-chestnut-rose : #B63243; -@color-carbaret : #D94255; -@color-sea-pink : #EEACB4; -@color-everglade : #246B3E; -@color-sea-green : #309054; -@color-vista-blue : #83D6A2; -@color-olive : #7F6400; -@color-buddha-gold : #CCA000; -@color-sparkler : #FFE999; -@color-teal : #007678; -@color-persian-green : #009EA1; -@color-mint-tulip : #AFEFF1; diff --git a/packages/ds-theme/src/palettes/core.less b/packages/ds-theme/src/palettes/core.less deleted file mode 100644 index 18c6ac1697..0000000000 --- a/packages/ds-theme/src/palettes/core.less +++ /dev/null @@ -1,6 +0,0 @@ -//* Color colour palette for Halo. - -@color-refinitiv-blue : #001EFF; -@color-blue-ribbon : #334BFF; -@color-lights-out : #0D0D0D; -@color-white : #FFFFFF; diff --git a/packages/ds-theme/src/palettes/icon.less b/packages/ds-theme/src/palettes/icon.less deleted file mode 100644 index c2b7ad62a6..0000000000 --- a/packages/ds-theme/src/palettes/icon.less +++ /dev/null @@ -1,13 +0,0 @@ -//* Colour palette, used for icons. - -// Dark -@color-silver : #CCCCCC; -@color-white : #FFFFFF; -@color-cornflower-blue : #6678FF; - -// Light -@color-lights-out : #0D0D0D; -@color-scorpion : #595959; -@color-silver : #CCCCCC; -@color-white : #FFFFFF; -@color-blue-ribbon : #334BFF; diff --git a/packages/ds-theme/src/palettes/secondary.less b/packages/ds-theme/src/palettes/secondary.less deleted file mode 100644 index 144e225ff5..0000000000 --- a/packages/ds-theme/src/palettes/secondary.less +++ /dev/null @@ -1,29 +0,0 @@ -//* Secondary colour palette for Halo. - -// Dark -@color-cod-grey: #1A1A1A; -@color-mine-shaft: #262626; -@color-charcoal: #333333; -@color-emperor: #4D4D4D; -@color-tundora: #404040; -@color-scorpion: #595959; -@color-grey: #808080; -@color-dusty-grey: #999999; -@color-silver: #CCCCCC; -@color-concrete: #F2F2F2; -@color-black-pearl: #050A2E; -@color-torea-bay: #0F1E8A; -@color-persian-blue: #1429BD; - -// Light -@color-alabaster: #FAFAFA; -@color-concrete: #F2F2F2; -@color-mercury: #E6E6E6; -@color-desert-storm: #E0E0E0; -@color-alto: #D9D9D9; -@color-silver: #CCCCCC; -@color-nobel: #BFBFBF; -@color-scorpion: #595959; -@color-tundora: #404040; -@color-torea-bay: #0F1E8A; -@color-barley-white: #FFF4CC; diff --git a/packages/ds-theme/src/palettes/typography.less b/packages/ds-theme/src/palettes/typography.less deleted file mode 100644 index ae4757daa2..0000000000 --- a/packages/ds-theme/src/palettes/typography.less +++ /dev/null @@ -1,24 +0,0 @@ -//* Colour palette for all things textual. - -// Dark -@color-lights-out : #0D0D0D; -@color-dusty-grey : #999999; -@color-silver : #CCCCCC; -@color-white : #FFFFFF; -@color-cornflower-blue : #6678FF; -@color-periwinkle : #CCD2FF; -@color-robins-egg : #00D0D4; -@color-carnation : #F5475B; -@color-emerald : #39C46E; - -// Light -@color-lights-out : #0D0D0D; -@color-tundora : #404040; -@color-dove-grey : #737373; -@color-silver : #CCCCCC; -@color-white : #FFFFFF; -@color-blue-ribbon : #334BFF; -@color-torea-bay : #0F1E8A; -@color-chestnut-rose : #B63243; -@color-persian-green : #009EA1; -@color-everglade : #246B3E; diff --git a/packages/ds-theme/src/palettes/visualisation.less b/packages/ds-theme/src/palettes/visualisation.less deleted file mode 100644 index a834e17475..0000000000 --- a/packages/ds-theme/src/palettes/visualisation.less +++ /dev/null @@ -1,58 +0,0 @@ -//* Colour palette for charting and other data visualisations. -// Todo: Need to figure out the differences between data visualisation and charting colours. - - -// DARK -@color-cornflower-blue : #6678FF; -@color-white : #FFFFFF; -@color-supernova : #FFC800; -@color-amethyst : #9064CD; -@color-robins-egg : #00D0D4; -@color-inter-orange : #FF5000; -@color-caribbean-green : #00C389; -@color-amaranth : #EA2E6C; -@color-dusty-grey : #999999; -@color-dodger-blue : #3BBAFF; -@color-elm : #198C8C; -@color-crail : #C36241; -@color-periwinkle : #CCD2FF; -@color-grey : #808080; -@color-dandelion : #FFDE66; -@color-light-wisteria : #BCA2E1; -@color-turquoise-blue : #59DFE1; -@color-atomic-tangerine : #FF9666; -@color-spray : #6CEFC8; -@color-mauvelous : #F281A7; -@color-silver : #CCCCCC; -@color-anakiwa : #89D5FF; -@color-neptune : #75BABA; -@color-petite-orchid : #DBA08D; -@color-illusion : #F6ABC4; -@color-tall-poppy : #B72536; - -// LIGHT -@color-blue-ribbon : #334BFF; -@color-black : #000000; -@color-olive : #7F6400; -@color-butterfly : #71549F; -@color-teal : #007678; -@color-grenadier : #CC4000; -@color-rain-forest : #007653; -@color-cerise-red : #D22962; -@color-scorpion : #595959; -@color-jelly-bean : #236F99; -@color-genoa : #147070; -@color-brown-rust : #AF583A; -@color-torea-bay : #0F1E8A; -@color-dove-grey : #737373; -@color-saddle-brown : #4C3C00; -@color-victoria : #563F77; -@color-sherpa-blue : #004E4F; -@color-oregon : #993000; -@color-kaitoke-green : #00432F; -@color-maroon-flush : #A3204C; -@color-tundora : #404040; -@color-chathams-blue : #174A66; -@color-eden : #116262; -@color-mule-fawn : #88442D; -@color-heath : #5D122B; diff --git a/packages/ds-theme/src/responsive.less b/packages/ds-theme/src/responsive.less deleted file mode 100644 index 389665fe91..0000000000 --- a/packages/ds-theme/src/responsive.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/responsive'; diff --git a/packages/ds-theme/src/shared-styles/button.less b/packages/ds-theme/src/shared-styles/button.less deleted file mode 100644 index 63058d21e2..0000000000 --- a/packages/ds-theme/src/shared-styles/button.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/shared-styles/button'; diff --git a/packages/ds-theme/src/shared-styles/checkbox.less b/packages/ds-theme/src/shared-styles/checkbox.less deleted file mode 100644 index c972a343fb..0000000000 --- a/packages/ds-theme/src/shared-styles/checkbox.less +++ /dev/null @@ -1,47 +0,0 @@ -.checkbox-default() { - --check-color: @checkbox-checked-color; - color: @control-text-color; - - &:not([readonly]) { - [part='container'] { - cursor: pointer; - } - } - - [part='container'] { - width: 14px; - height: 14px; - } - - [part='check'] { - width: 95%; - height: 95%; - } - - &:hover { - &:not([checked]):not([indeterminate]):not([readonly]) [part='container'] { - border-color: @input-hover-border-color; - } - &:not([readonly]) { - color: @input-hover-text-color; - } - } - - &[disabled], - &[disabled] [part='label'] { - opacity: @control-disabled-opacity; - } - - &[checked] [part='container'] { - border: 1px solid @scheme-color-primary; - } - - &:focus[readonly]:not([checked]) [part='container'] { - border-color: @control-border-color; - } - - &[focused='visible'] { - outline: @input-border-width @input-border-style @input-focused-border-color; - outline-offset: 2px; - } -} diff --git a/packages/ds-theme/src/shared-styles/close-button.less b/packages/ds-theme/src/shared-styles/close-button.less deleted file mode 100644 index 17f798b98e..0000000000 --- a/packages/ds-theme/src/shared-styles/close-button.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/shared-styles/close-button'; diff --git a/packages/ds-theme/src/shared-styles/defaults.less b/packages/ds-theme/src/shared-styles/defaults.less deleted file mode 100644 index 2f49b1de0c..0000000000 --- a/packages/ds-theme/src/shared-styles/defaults.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/shared-styles/defaults'; diff --git a/packages/ds-theme/src/shared-styles/grid.less b/packages/ds-theme/src/shared-styles/grid.less deleted file mode 100644 index 937e175e9f..0000000000 --- a/packages/ds-theme/src/shared-styles/grid.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/shared-styles/grid'; diff --git a/packages/ds-theme/src/shared-styles/header.less b/packages/ds-theme/src/shared-styles/header.less deleted file mode 100644 index 6597767db1..0000000000 --- a/packages/ds-theme/src/shared-styles/header.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/shared-styles/header'; diff --git a/packages/ds-theme/src/shared-styles/headings.less b/packages/ds-theme/src/shared-styles/headings.less deleted file mode 100644 index c46603a998..0000000000 --- a/packages/ds-theme/src/shared-styles/headings.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/shared-styles/headings'; diff --git a/packages/ds-theme/src/shared-styles/icon.less b/packages/ds-theme/src/shared-styles/icon.less deleted file mode 100644 index 68803164d4..0000000000 --- a/packages/ds-theme/src/shared-styles/icon.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/shared-styles/icon'; diff --git a/packages/ds-theme/src/shared-styles/input.less b/packages/ds-theme/src/shared-styles/input.less deleted file mode 100644 index 349806a749..0000000000 --- a/packages/ds-theme/src/shared-styles/input.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/shared-styles/input'; diff --git a/packages/ds-theme/src/shared-styles/scrollbar.less b/packages/ds-theme/src/shared-styles/scrollbar.less deleted file mode 100644 index da5a3360c6..0000000000 --- a/packages/ds-theme/src/shared-styles/scrollbar.less +++ /dev/null @@ -1,279 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/shared-styles/scrollbar'; - -.scrollbar-thumb(@width) { - .thumb-background-border(@direction, @background-color) { - background-image: linear-gradient(@direction, @background-color, @background-color); - background-color: transparent; - background-position: center; - } - - &::-webkit-scrollbar-thumb { - border: 1px solid transparent; - - &:horizontal { - background-size: auto @width; - background-repeat: repeat-x; - .thumb-background-border(to bottom, @scrollbar-thumb-background-color); - - &:hover { - .thumb-background-border(to bottom, @scrollbar-thumb-hover-background-color); - } - - &:active { - .thumb-background-border(to bottom, @scrollbar-thumb-active-background-color); - } - } - - &:vertical { - background-size: @width auto; - background-repeat: repeat-y; - .thumb-background-border(to right, @scrollbar-thumb-background-color); - - &:hover { - .thumb-background-border(to right, @scrollbar-thumb-hover-background-color); - } - - &:active { - .thumb-background-border(to right, @scrollbar-thumb-active-background-color); - } - } - } -} - -// Webkit Scrollbars -// Includes Chrome, Safari, Opera and most mobile devices -.webkit-scrollbars() { - @pixel-length: 2; // Can be 1 or 2, but no more. - @arrow-size: @scrollbar-arrow-size; - @pixel: linear-gradient(@scrollbar-button-color, @scrollbar-button-color); - @pixel-hover: linear-gradient(@button-hover-text-color, @button-hover-text-color); - @pixel-active: linear-gradient(@button-pressed-text-color, @button-pressed-text-color); - - // Function to draw an arrow - .draw-arrow(@s, @type, @direction: up) { - // Make size an odd number - @size: (ceil((@s / 2)) * 2 + 1); - - // Function to draw the individual pieces/pixels - .draw(@n) when (@n > 0) { - .draw((@n - 1)); // Loop: Draw until finished - - @index: (@size - @n); - @arrow-depth: ceil((@size / 2)); - @midpoint-x: ((@scrollbar-button-width - 1.9) / 2); - @midpoint-y: ((@scrollbar-button-size - 1) / 2); - - background-image+: @type; // Draw the piece/pixel - - // Up Arrow - & when (@direction = up) { - @point-start-y: (@midpoint-y + @arrow-depth / 2 - floor((@pixel-length / 2))); - @point-start-x: (@midpoint-x - @size / 2); - & when (@index < @arrow-depth) { - background-position+: unit((@point-start-x + @index), px) unit((@point-start-y - @index - 1), px); - } - & when (@index >= @arrow-depth) { - background-position+: unit((@point-start-x + @index), px) unit((@point-start-y - @n), px); - } - } - - // Down Arrow - & when (@direction = down) { - @point-start-y: (@midpoint-y - @arrow-depth / 2 - floor((@pixel-length / 2))); - @point-start-x: (@midpoint-x - @size / 2); - & when (@index < @arrow-depth) { - background-position+: unit((@point-start-x + @index), px) unit((@point-start-y + @index), px); - } - & when (@index >= @arrow-depth) { - background-position+: unit((@point-start-x + @index), px) unit((@point-start-y + @n - 1), px); - } - } - - // Left Arrow - & when (@direction = left) { - @point-start-y: (@scrollbar-button-size - @midpoint-y); - @point-start-x: (@midpoint-x - @size / 2); - & when (@index < @arrow-depth) { - background-position+: unit((@point-start-y - @index - 1), px) unit((@point-start-x + @index), px); - } - & when (@index >= @arrow-depth) { - background-position+: unit((@point-start-y - @n), px) unit((@point-start-x + @index), px); - } - } - - // Right Arrow - & when (@direction = right) { - @point-start-y: (@arrow-depth); - @point-start-x: (@midpoint-x - @size / 2); - & when (@index < @arrow-depth) { - background-position+: unit((@point-start-y + @index), px) unit((@point-start-x + @index), px); - } - & when (@index >= @arrow-depth) { - background-position+: unit((@point-start-y + @n - 1), px) unit((@point-start-x + @index), px); - } - } - } - .draw(@size); - } - - &::-webkit-scrollbar { - width: @scrollbar-size; - height: @scrollbar-size; - } - - &::-webkit-scrollbar-button { - .scrollbar-track-background; - height: @scrollbar-button-size; - width: @scrollbar-button-width; - display: block; - } - - &::-webkit-scrollbar-thumb { - .scrollbar-thumb-background; - .scrollbar-track-background(border-color); - border-radius: @scrollbar-thumb-border-radius; - border-width: @scrollbar-thumb-margin; - border-style: solid; - } - - &::-webkit-scrollbar-thumb:hover { - .scrollbar-thumb-background-hover; - } - - &::-webkit-scrollbar-thumb:active { - .scrollbar-thumb-background-active; - } - - &::-webkit-scrollbar-track { - .scrollbar-track-background; - } - - // ================================ start custom ============================= - - .scrollbar-thumb(6px); - - &::-webkit-scrollbar-track:horizontal { - border-top: 1px solid @scrollbar-track-border-color; - border-bottom: 1px solid @scrollbar-track-border-color; - } - - &::-webkit-scrollbar-track:vertical { - border-left: 1px solid @scrollbar-track-border-color; - border-right: 1px solid @scrollbar-track-border-color; - } - - &::-webkit-scrollbar-button { - display: none; - } - - // ==================================== end custom ============================= - - &::-webkit-scrollbar-corner { - background-color: @scrollbar-corner-color; - } - - &::-webkit-scrollbar-button:start:increment, - &::-webkit-scrollbar-button:end:decrement { - display: none; - } - - &::-webkit-scrollbar-button { - background-size: 1px unit(@pixel-length, px); - background-repeat: no-repeat; - - border: 1px solid @scrollbar-button-border-color; - - &:hover { - background-color: @button-hover-background-color; - border: 1px solid @scrollbar-button-hover-border-color; - } - &:active { - background-color: @button-pressed-background-color; - border: 1px solid @scrollbar-button-pressed-border-color; - } - } - - &::-webkit-scrollbar-button:horizontal { - background-size: unit(@pixel-length, px) 1px; - } - - &::-webkit-scrollbar-button:vertical:start:decrement { - border-bottom-color: @scrollbar-button-border-color; - - .draw-arrow(@arrow-size, @pixel, up); - &:hover { - .draw-arrow(@arrow-size, @pixel-hover, up); - border-bottom-color: @scrollbar-button-hover-border-opposite-color; - } - &:active { - .draw-arrow(@arrow-size, @pixel-active, up); - border-bottom-color: @scrollbar-button-pressed-border-opposite-color; - } - } - - &::-webkit-scrollbar-button:vertical:end:increment { - border-top-color: @scrollbar-button-border-color; - - .draw-arrow(@arrow-size, @pixel, down); - &:hover { - .draw-arrow(@arrow-size, @pixel-hover, down); - border-top-color: @scrollbar-button-hover-border-opposite-color; - } - &:active { - .draw-arrow(@arrow-size, @pixel-active, down); - border-top-color: @scrollbar-button-pressed-border-opposite-color; - } - } - - &::-webkit-scrollbar-button:horizontal:start:decrement { - border-right-color: @scrollbar-button-border-color; - - .draw-arrow(@arrow-size, @pixel, left); - &:hover { - .draw-arrow(@arrow-size, @pixel-hover, left); - border-right-color: @scrollbar-button-hover-border-opposite-color; - } - &:active { - .draw-arrow(@arrow-size, @pixel-active, left); - border-right-color: @scrollbar-button-pressed-border-opposite-color; - } - } - - &::-webkit-scrollbar-button:horizontal:end:increment { - border-left-color: @scrollbar-button-border-color; - - .draw-arrow(@arrow-size, @pixel, right); - &:hover { - .draw-arrow(@arrow-size, @pixel-hover, right); - border-left-color: @scrollbar-button-hover-border-opposite-color; - } - &:active { - .draw-arrow(@arrow-size, @pixel-active, right); - border-left-color: @scrollbar-button-pressed-border-opposite-color; - } - } -} - -/* - While `.standard-scrollbars()` requires a selector to apply CSS properties, - `.webkit-scrollbars()` could be used directly as it utilizes CSS pseudo-elements. - Here's a usage example with web component: -```less -::host { - .standard-scrollbars(); -} -.webkit-scrollbars(); -``` -*/ -.standard-scrollbars() { - @supports not selector(::-webkit-scrollbar) { - & { - scrollbar-width: thin; - } - } -} - -// `.mozilla-scrollbars()` is deprecated. Use `.standard-scrollbars()` instead. -.mozilla-scrollbars() { - .standard-scrollbars(); -} diff --git a/packages/ds-theme/src/shared-styles/shapes.less b/packages/ds-theme/src/shared-styles/shapes.less deleted file mode 100644 index 2c2fca477a..0000000000 --- a/packages/ds-theme/src/shared-styles/shapes.less +++ /dev/null @@ -1 +0,0 @@ -@import '@refinitiv-ui/elemental-theme/src/shared-styles/shapes'; diff --git a/packages/ds-theme/src/variables.less b/packages/ds-theme/src/variables.less deleted file mode 100644 index 93fbf8926e..0000000000 --- a/packages/ds-theme/src/variables.less +++ /dev/null @@ -1 +0,0 @@ -@import (reference) 'variants/dark/variables'; // Load the default set of variables diff --git a/packages/ds-theme/src/variants/dark/overrides.less b/packages/ds-theme/src/variants/dark/overrides.less deleted file mode 100644 index 39740d0635..0000000000 --- a/packages/ds-theme/src/variants/dark/overrides.less +++ /dev/null @@ -1,269 +0,0 @@ -/* -HALO THEME DARK -‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾ -These variables inherits from Elemental Theme but require to -be overridden following Halo specifications. - -New variables that only need for Halo should be added in variables.less instead. - -Rules: -‾‾‾‾‾ -1. Defines only variables that need to be customised. -2. Any size should align with 4px baseline grid system. -3. Uses colour variables. Do not use colour code e.g. hex. -4. Test components that use the variables after any modifications. -5. Do not change something for the sake of it, it can have disastrous effects. -6. Never rename a variable. -***********************************************************************************/ - - -@import '@lseg-workspace/theme'; - -// primary --cont-color-common-container-primary-base vs --cont-color-common-container-brand-base - -// Scheme colours -@scheme-color-primary : var(--cont-color-common-container-brand-base); -@scheme-color-secondary : @color-cornflower-blue; -@scheme-color-tertiary : @color-charcoal; -@scheme-color-complementary : @color-white; // TODO: Not sure if this is the right color -@scheme-color-info : var(--cont-color-common-container-info-base); -@scheme-color-confirm : var(--cont-color-common-container-positive-base); -@scheme-color-warning : var(--cont-color-common-container-warning-base); -@scheme-color-error : var(--cont-color-common-container-negative-base); - -// Modifiers -@roundness : 0; -@shadowing : 0; - -// Globals -@global-font : var(--cont-typography-common-body-300-base); -@global-text-size : 12px; -@global-background-color : var(--cont-color-common-container-surface-layer-1); -@global-text-color : var(--cont-color-common-fg-generic-moderate); -@global-text-mark-color : @color-white; -@global-text-mark-background : @scheme-color-primary; -@global-transition-duration : 100ms; -@global-text-selection-color : @color-white; -@global-text-selection-background : @scheme-color-primary; -@global-box-shadow-color : rgba(0, 0, 0, 0.5); -@global-margin : (1px * @airiness) 0; - -// Icons -@icon-size : 16px; - -// Control globals -@control-height : 24px; -@control-border-color : @color-tundora; -@control-text-color : @color-silver; - -// Inputs -@input-width : 152px; -@input-border-width : 1px; -@input-padding : 0 8px; -@input-background-color : @global-background-color; // or should be transparent? -@input-hover-text-color : @color-white; -@input-hover-border-color : @color-grey; -@input-focused-text-color : @input-hover-text-color; -@input-focused-border-color : @scheme-color-primary; -@input-disabled-text-color : fade(@input-text-color, 50%); -@input-disabled-border-color : fade(@input-border-color, 50%); -@input-disabled-background-color : fade(@input-background-color, 50%); - -// Separators -@separator-color: @color-tundora; - -// Buttons -@button-min-width : 60px; -@button-padding : 0px 12px; -@button-border-width : 1px; -@button-text-color : @global-text-color; -@button-border-color : @color-lights-out; -@button-hover-background-color : @color-persian-blue; -@button-hover-text-color : @color-white; -@button-hover-border-color : @button-hover-background-color; -@button-pressed-text-color : @button-hover-text-color; -@button-pressed-background-color : @color-torea-bay; -@button-focused-text-color : @button-hover-text-color; -@button-focused-box-shadow : none; -@button-cta-background-color : @color-lights-out; -@button-cta-border-color : @color-grey; -@button-toggle-active-background-color : @scheme-color-primary; -@button-toggle-active-text-color : @button-hover-text-color; -@button-disabled-background-color : @button-background-color; -@button-disabled-border-color : @button-border-color; -@button-disabled-text-color : @button-text-color; - -// Tabs -@tab-height : 36px; -@tab-min-width : 36px; -@tab-padding : 9px 12px; -@tab-text-color : @global-text-color; -@tab-background-color : @color-tundora; -@tab-border-color : @color-lights-out; -@tab-hover-text-color : @color-white; -@tab-hover-background-color : @color-persian-blue; -@tab-pressed-text-color : @tab-hover-text-color; -@tab-pressed-background-color : @color-torea-bay; -@tab-focused-box-shadow : none; -@tab-focused-text-color : @scheme-color-secondary; -@tab-disabled-text-color : fade(@global-text-color, 50%); -@tab-disabled-background-color : fade(@tab-background-color, 50%); -@tab-active-hover-background-color : @color-persian-blue; -@tab-active-text-color : @color-white; -@tab-active-background-color : @scheme-color-primary; -@tab-active-pressed-background-color : @color-torea-bay; -@tab-active-disabled-text-color : fade(@color-white, 50%); -@tab-active-disabled-background-color : fade(@scheme-color-primary, 50%); -@tab-vertical-border-color : @color-tundora; - -// Tab Bar -@tab-bar-background-color : @color-cod-grey; - -// Links -@link-text-color : @color-periwinkle; -@link-hover-text-color : @color-white; - -// Panels -@panel-background-color : @color-cod-grey; -@panel-padding : 12px 8px; -@panel-box-shadow : 0px 2px 12px @global-box-shadow-color; - -// Overlay -@overlay-background-color : @color-black; - -// Headers -@header-height : 28px; -@header-background-color : @header-level3-bg-color; -@header-text-color : @global-text-color; -@header-padding : 0 8px; - -// Table/Grid -@grid-row-background-color : @color-lights-out; -@grid-border-color : @color-mine-shaft; -@grid-row-text-color : @control-text-color; -@grid-header-text-color : @grid-row-text-color; -@grid-header-background-color : @color-cod-grey; -@grid-header-hover-text-color : @color-white; -@grid-header-hover-background-color : @color-mine-shaft; -@grid-header-height : 28px; -@grid-row-height : 28px; -@grid-row-hover-text-color : @grid-row-text-color; -@grid-row-hover-background-color : @color-cod-grey; -@grid-row-active-background-color : @color-black-pearl; -@grid-row-active-border-color : @scheme-color-primary; -@grid-row-focus-border-color : @grid-row-active-border-color; -@grid-row-active-border : @grid-row-active-border-width solid @grid-row-active-border-color; -@grid-row-focus-border : @grid-row-focus-border-width solid @grid-row-focus-border-color; -@grid-column-active-border-color : @color-cornflower-blue; - -// Tooltip -@tooltip-background-color : @color-white; -@tooltip-padding : 4px 8px; -@tooltip-max-width : 320px; -@tooltip-margin : unit((4 * @airiness), px); - -// DataViz -@dataviz-color-primary : @color-cornflower-blue; - -// DataViz - Standard -@dataviz-color-grey : @color-silver; -@dataviz-color-red : @color-carnation; -@dataviz-color-green : @color-emerald; -@dataviz-color-yellow : @color-supernova; - -// DataViz - Light -@dataviz-color-lightred : @color-rose-bud; -@dataviz-color-lightgreen : @color-algae-green; -@dataviz-color-lightyellow : @color-sparkler; - -// DataViz - Dark -@dataviz-color-darkred : @color-mexican-red; -@dataviz-color-darkgreen : @color-green-pea; -@dataviz-color-darkyellow : @color-olive; - -// DataViz - Charting -@dataviz-color-1 : @dataviz-color-primary; -@dataviz-color-2 : @color-white; -@dataviz-color-3 : @color-supernova; -@dataviz-color-4 : @color-amethyst; -@dataviz-color-5 : @color-robins-egg; -@dataviz-color-6 : @color-inter-orange; -@dataviz-color-7 : @color-caribbean-green; -@dataviz-color-8 : @color-amaranth; -@dataviz-color-9 : @color-dusty-grey; -@dataviz-color-10 : @color-dodger-blue; -@dataviz-color-11 : @color-elm; -@dataviz-color-12 : @color-crail; -@dataviz-color-13 : @color-periwinkle; -@dataviz-color-14 : @color-grey; -@dataviz-color-15 : @color-dandelion; -@dataviz-color-16 : @color-light-wisteria; -@dataviz-color-17 : @color-turquoise-blue; -@dataviz-color-18 : @color-atomic-tangerine; -@dataviz-color-19 : @color-spray; -@dataviz-color-20 : @color-mauvelous; -@dataviz-color-21 : @color-silver; -@dataviz-color-22 : @color-anakiwa; -@dataviz-color-23 : @color-neptune; -@dataviz-color-24 : @color-petite-orchid; -@dataviz-color-25 : @color-illusion; - -// Slider -@slider-track-color : @color-charcoal; -@slider-track-height : 4px; -@slider-step-color : @scheme-color-secondary; -@slider-thumb-color : @color-silver; - -// List -@list-item-padding : 4px 8px; -@list-item-height : 24px; -@list-item-focus-background-color : @color-persian-blue; -@list-item-focus-text-color : @color-white; -@list-item-selected-text-color : @color-white; -@list-item-header-font-size : 83%; -@list-item-header-font-weight : 600; -@list-item-header-text-color : @color-dusty-grey; -@list-item-divider-margin : 2px 0px; -@list-item-divider-color : @separator-color; -@list-item-disabled-text-color : mix(@control-text-color, @list-background-color); - -// Scrollbar -@scrollbar-thumb-border-radius : 0; -@scrollbar-thumb-margin : 1px; -@scrollbar-size : 8px; -@scrollbar-thumb-background-color : @color-scorpion; -@scrollbar-thumb-hover-background-color : @color-persian-blue; -@scrollbar-thumb-active-background-color : @color-torea-bay; -@scrollbar-track-background-color : @color-cod-grey; -@scrollbar-button-size : 16px; - -// Movement colours profile (American) -@tickup-color-american : @color-emerald; -@tickdown-color-american : @color-carnation; -@positive-color-american : @color-emerald; -@neutral-color-american : @color-silver; -@negative-color-american : @color-carnation; - -// Movement colours profile (Asian1) -@tickup-color-asian1 : @color-carnation; -@tickdown-color-asian1 : @color-emerald; -@positive-color-asian1 : @color-carnation; -@neutral-color-asian1 : @color-silver; -@negative-color-asian1 : @color-emerald; - -// Movement colours profile (Asian2) -@tickup-color-asian2 : @color-supernova; -@tickdown-color-asian2 : @color-carnation; -@positive-color-asian2 : @color-robins-egg; -@neutral-color-asian2 : @color-emerald; -@negative-color-asian2 : @color-carnation; - -// Tick colours (European) -@tickup-color-european : @color-emerald; -@tickdown-color-european : @color-carnation; -@positive-color-european : @color-robins-egg; -@neutral-color-european : @color-emerald; -@negative-color-european : @color-carnation; - -// Tick text colour (All profiles) -@tick-text-color : @color-lights-out; diff --git a/packages/ds-theme/src/variants/dark/variables.less b/packages/ds-theme/src/variants/dark/variables.less deleted file mode 100644 index 8b401bbddf..0000000000 --- a/packages/ds-theme/src/variants/dark/variables.less +++ /dev/null @@ -1,146 +0,0 @@ -// Dark Variables (default) -@import 'overrides'; // Load the overrides first - - - -// Controls -@control-disabled-opacity : 0.5; -@control-error-color : @color-carnation; -@control-warning-color : @color-supernova; -@control-hover-error-color : @color-rose-bud; -@control-hover-warning-color : @color-sparkler; - -// Buttons -@button-icon-color : @button-text-color; -@button-cta-transparent-icon-color : @button-icon-color; -@button-transparent-hover-icon-color : @button-hover-text-color; - -// Checkbox and Radio -@checkbox-checked-color : @scheme-color-secondary; - -// Headers -@header-level1-bg-color : @color-tundora; -@header-level2-bg-color : @color-charcoal; -@header-level3-bg-color : @color-mine-shaft; -@header-level4-bg-color : @color-cod-grey; - -// Tabs -@tab-level2-border-color : @color-tundora; -@tab-level2-bg-color : @color-mine-shaft; -@tab-level2-active-bg-color : @color-cornflower-blue; -@tab-level3-text-color : @color-silver; -@tab-level3-active-text-color : @color-white; - -// Links -@link-visited-text-color : @color-dusty-grey; -@link-alt-text-color : @link-text-color; -@link-alt-hover-text-color : @link-hover-text-color; -@link-alt-visited-text-color : @link-visited-text-color; - -// Slider -@slider-track-fill-color : @scheme-color-secondary; -@slider-thumb-hover-color : @button-hover-background-color; -@slider-thumb-active-color : @color-torea-bay; -@slider-thumb-border-color : @color-lights-out; -@slider-thumb-hover-border-color : @slider-thumb-border-color; -@slider-thumb-active-border-color : @slider-thumb-border-color; - -// List -@list-item-selected-background-color : @color-charcoal; - -// Dialog -@dialog-content-background-color : @color-mine-shaft; -@dialog-footer-background-color : @color-cod-grey; -@dialog-border-color : @color-tundora; - -// Pill -@pill-background-color : @color-cod-grey; -@pill-border-color : @color-charcoal; -@pill-toggle-active-border-color : @color-lights-out; -@pill-default-close-color : @color-silver; - -// Loader -@loader-accent-color : @color-cornflower-blue; -@loader-bar-color : @separator-color; -@loader-shape-color : @color-grey; - -// Table/Grid -@grid-header-font-weight : 600; - -// Tooltip -@tooltip-text-color : @color-lights-out; - -// Kbd -@kbd-background-color : @color-tundora; - -// Search List Item (for auto-suggest) -@search-list-background-color : @color-mine-shaft; -@search-list-hover-background-color : @color-charcoal; -@search-list-color : @color-silver; -@search-list-description-color : @control-text-color; -@search-list-hover-color : @input-hover-text-color; -@search-list-description-hover-color : @global-text-color; -@search-list-more-search-background-color : @panel-background-color; -@search-list-more-search-hover-background-color : @search-list-hover-background-color; -@search-list-more-search-color : @color-silver; - -@tree-menu-item-height : 28px; -@tree-menu-item-background-color : @color-cod-grey; -@tree-menu-item-group-background-color : @color-mine-shaft; -@tree-menu-item-group-hover-text-color : @color-white; -@tree-menu-item-group-hover-background-color : @color-charcoal; - -// Select -@select-background-color : @color-mine-shaft; - -// Calendar -@calendar-background-color : @header-level3-bg-color; -@calendar-body-background-color : @calendar-background-color; -@calendar-header-text-color : @color-dusty-grey; -@calendar-header-background-color : @panel-background-color; -@calendar-header-border-color : @scheme-color-tertiary; -@calendar-cell-text-color : @global-text-color; -@calendar-cell-hover-text-color : @button-hover-text-color; -@calendar-cell-hover-background-color : @button-hover-background-color; -@calendar-selected-text-color : @global-text-selection-color; -@calendar-selected-background-color : @global-text-selection-background; -@calendar-cell-background-color : @global-background-color; -@calendar-cell-today-text-color : @global-text-selection-color; -@calendar-cell-today-background-color : @color-tundora; -@calendar-cell-range-today-text-color : @global-text-selection-color; -@calendar-cell-press-background-color : @button-pressed-background-color; - -// Scrollbar -@scrollbar-thumb-global-margin : 2px; -@scrollbar-size-large : 16px; -@scrollbar-button-width : 16px; -@scrollbar-arrow-size : 8px; -@scrollbar-corner-color : transparent; -@scrollbar-button-border-color : @scrollbar-track-border-color; -@scrollbar-button-border-opposite-color : @scrollbar-track-background-color; -@scrollbar-button-hover-border-color : @button-hover-background-color; -@scrollbar-button-hover-border-opposite-color : @button-hover-background-color; -@scrollbar-button-pressed-border-color : @scrollbar-track-border-color; -@scrollbar-button-pressed-border-opposite-color : @scrollbar-track-border-color; -@scrollbar-button-color : @color-silver; -@scrollbar-track-border-color : @color-lights-out; - -// Popup menu -@overlay-menu-background-color : @color-mine-shaft; - -// Toggle -@toggle-switch-background-color : @color-silver; -@toggle-border-color : @color-emperor; -@toggle-font-weight : @control-font-weight; - -// DataViz - scale -@dataviz-color-scale-negative : @color-tall-poppy; -@dataviz-color-scale-low-negative : @dataviz-color-red; -@dataviz-color-scale-neutral : @color-grey; -@dataviz-color-scale-low-positive : @dataviz-color-green; -@dataviz-color-scale-positive : @dataviz-color-darkgreen; -@dataviz-color-scale-range : @dataviz-color-pink; - -// Counter -@counter-background-color : @color-mine-shaft; -@counter-text-color : @color-white; \ No newline at end of file diff --git a/packages/ds-theme/src/variants/light/overrides.less b/packages/ds-theme/src/variants/light/overrides.less deleted file mode 100644 index 5294a67a3f..0000000000 --- a/packages/ds-theme/src/variants/light/overrides.less +++ /dev/null @@ -1,154 +0,0 @@ -// Light Overrides - -// Scheme colours -@scheme-color-tertiary : @color-alabaster; -@scheme-color-complementary : @color-lights-out; // TODO: Not sure if this is right color -@scheme-color-confirm : @dataviz-color-green; -@scheme-color-warning : @dataviz-color-yellow; -@scheme-color-error : @dataviz-color-darkred; - -// Globals -@global-background-color : @color-white; -@global-text-color : @color-lights-out; -@global-box-shadow-color : rgba(0, 0, 0, 0.25); - -// Control globals -@control-text-color : @color-tundora; -@control-border-color : @color-scorpion; - -// Inputs -@input-hover-text-color : @color-lights-out; -@input-hover-border-color : @color-lights-out; - -// Table/Grid -@grid-row-background-color : @color-white; -@grid-border-color : @color-concrete; -@grid-row-text-color : @color-mine-shaft; -@grid-header-text-color : @color-cod-grey; -@grid-header-background-color : @color-white; -@grid-header-hover-text-color : @global-text-color; -@grid-header-hover-background-color : @color-concrete; -@grid-row-hover-text-color : @grid-row-text-color; -@grid-row-hover-background-color : @color-alabaster; -@grid-row-active-background-color : @color-concrete; -@grid-row-active-text-color : @global-text-color; -@grid-column-active-border-color : @scheme-color-primary; - -//Buttons -@button-border-color : @color-silver; -@button-focused-text-color : @color-black; -@button-cta-text-color : @color-silver; -@button-cta-border-color : @color-lights-out; - -// Tabs -@tab-border-color : @color-white; -@tab-background-color : @color-mercury; -@tab-active-text-color : @color-white; -@tab-vertical-border-color : @color-alto; - -// Tab Bar -@tab-bar-background-color : @color-concrete; - -// Links -@link-text-color : @color-torea-bay; -@link-hover-text-color : @scheme-color-primary; - -// Panels -@panel-background-color : @color-alabaster; -@panel-box-shadow : 0px 2px 8px @global-box-shadow-color; - -// Tooltip -@tooltip-background-color : @color-barley-white; - -// DataViz -@dataviz-color-primary : @color-blue-ribbon; - -// DataViz - Standard -@dataviz-color-grey : @color-dusty-grey; -@dataviz-color-red : @color-chestnut-rose; -@dataviz-color-yellow : @color-buddha-gold; -@dataviz-color-green : @color-everglade; - -// DataViz - Light -@dataviz-color-lightred : @color-sea-pink; -@dataviz-color-lightgreen : @color-vista-blue; -@dataviz-color-lightyellow : @color-sparkler; - -// DataViz - Dark -@dataviz-color-darkred : @color-chestnut-rose; -@dataviz-color-darkyellow : @color-olive; -@dataviz-color-darkgreen : @color-everglade; - -// DataViz - Charting -@dataviz-color-1 : @dataviz-color-primary; -@dataviz-color-2 : @color-black; -@dataviz-color-3 : @color-olive; -@dataviz-color-4 : @color-butterfly; -@dataviz-color-5 : @color-teal; -@dataviz-color-6 : @color-grenadier; -@dataviz-color-7 : @color-rain-forest; -@dataviz-color-8 : @color-cerise-red; -@dataviz-color-9 : @color-scorpion; -@dataviz-color-10 : @color-jelly-bean; -@dataviz-color-11 : @color-genoa; -@dataviz-color-12 : @color-brown-rust; -@dataviz-color-13 : @color-torea-bay; -@dataviz-color-14 : @color-dove-grey ; -@dataviz-color-15 : @color-saddle-brown; -@dataviz-color-16 : @color-victoria; -@dataviz-color-17 : @color-sherpa-blue; -@dataviz-color-18 : @color-oregon; -@dataviz-color-19 : @color-kaitoke-green; -@dataviz-color-20 : @color-maroon-flush; -@dataviz-color-21 : @color-tundora; -@dataviz-color-22 : @color-chathams-blue; -@dataviz-color-23 : @color-eden; -@dataviz-color-24 : @color-mule-fawn; -@dataviz-color-25 : @color-heath; - -// Separators -@separator-color : @color-alto; - -// Slider -@slider-track-color : @color-alto; -@slider-step-color : @scheme-color-primary; -@slider-thumb-color : @color-alabaster; - -// List -@list-item-selected-text-color : @color-lights-out; -@list-item-header-text-color : @color-dove-grey; - -// Scrollbar -@scrollbar-track-background-color : @color-concrete; -@scrollbar-thumb-background-color : @color-dusty-grey; - -// Movement colours profile (American) -@tickup-color-american : @color-everglade; -@tickdown-color-american : @color-chestnut-rose; -@positive-color-american : @color-everglade; -@neutral-color-american : @color-tundora; -@negative-color-american : @color-chestnut-rose; - -// Movement colours profile (Asian1) -@tickup-color-asian1 : @color-chestnut-rose; -@tickdown-color-asian1 : @color-everglade; -@positive-color-asian1 : @color-chestnut-rose; -@neutral-color-asian1 : @color-tundora; -@negative-color-asian1 : @color-everglade; - -// Movement colours profile (Asian2) -@tickup-color-asian2 : @color-everglade; -@tickdown-color-asian2 : @color-chestnut-rose; -@positive-color-asian2 : @color-blue-ribbon; -@neutral-color-asian2 : @color-everglade; -@negative-color-asian2 : @color-chestnut-rose; - -// Tick colours (European) -@tickup-color-european : @color-everglade; -@tickdown-color-european : @color-chestnut-rose; -@positive-color-european : @color-blue-ribbon; -@neutral-color-european : @color-everglade; -@negative-color-european : @color-chestnut-rose; - -// Tick text colour (All profiles) -@tick-text-color : @color-white; diff --git a/packages/ds-theme/src/variants/light/variables.less b/packages/ds-theme/src/variants/light/variables.less deleted file mode 100644 index 210cbea3a5..0000000000 --- a/packages/ds-theme/src/variants/light/variables.less +++ /dev/null @@ -1,107 +0,0 @@ -// Light Variables -@import 'overrides'; // Load the overrides first - -// Controls -@control-error-color : @color-carbaret; -@control-hover-error-color : @color-sea-pink; -@control-warning-color : @color-buddha-gold; -@control-hover-warning-color : @color-sparkler; - -// Buttons -@button-icon-color : @color-scorpion; -@button-cta-transparent-icon-color : @color-silver; -@button-transparent-hover-icon-color : @color-lights-out; - -// Checkbox and Radio -@checkbox-checked-color : @scheme-color-primary; - -// Headers -@header-level1-bg-color : @color-alto; -@header-level2-bg-color : @color-mercury; -@header-level3-bg-color : @color-concrete; -@header-level4-bg-color : @color-alabaster; - -// Tabs -@tab-level2-border-color : @color-alto; -@tab-level2-bg-color : @color-concrete; -@tab-level2-active-bg-color : @color-blue-ribbon; -@tab-level3-text-color : @color-tundora; -@tab-level3-active-text-color : @color-lights-out; - -// Links -@link-visited-text-color : @color-dove-grey; - -// Slider -@slider-track-fill-color : @scheme-color-primary; -@slider-thumb-border-color : @color-tundora; -@slider-thumb-hover-border-color : @slider-thumb-hover-color; -@slider-thumb-active-border-color : @slider-thumb-active-color; - -// List -@list-item-selected-background-color : @color-mercury; - -// Dialog -@dialog-content-background-color : @color-alabaster; -@dialog-footer-background-color : @color-concrete; -@dialog-border-color : @color-alto; - -// Pill -@pill-background-color : @color-alabaster; -@pill-border-color : @button-border-color; -@pill-toggle-active-border-color : @pill-border-color; -@pill-default-close-color : @color-scorpion; - -// Loader -@loader-accent-color : @scheme-color-primary; -@loader-shape-color : @color-silver; - -// Tooltip -@tooltip-text-color : @color-lights-out; - -// Kbd -@kbd-background-color : @color-alto; - -// Search List Item (for auto-suggest) -@search-list-background-color : @color-concrete; -@search-list-color : @color-tundora; -@search-list-hover-background-color : @color-mercury; -@search-list-description-hover-color : @search-list-description-color; -@search-list-more-search-color : @color-dove-grey; - -@tree-menu-item-background-color : @color-alabaster; -@tree-menu-item-group-background-color : @color-concrete; -@tree-menu-item-group-hover-text-color : @color-lights-out; -@tree-menu-item-group-hover-background-color : @color-mercury; - -// Select -@select-background-color : @color-concrete; - -// Calendar -@calendar-body-background-color : @header-level2-bg-color; -@calendar-header-text-color : @color-dove-grey; -@calendar-header-border-color : @calendar-body-background-color; -@calendar-cell-today-text-color : @global-text-color; -@calendar-cell-today-background-color : @color-alto; - -//Scrollbar -@scrollbar-background-color : @color-alto; -@scrollbar-track-border-color : @color-white; -@scrollbar-button-color : @color-scorpion; - -//Popup menu -@overlay-menu-background-color : @color-concrete; - -// Toggle -@toggle-switch-background-color : @color-lights-out; -@toggle-border-color : @color-silver; -@toggle-font-weight : 600; - -// DataViz - scale -@dataviz-color-scale-negative : @dataviz-color-darkred; -@dataviz-color-scale-low-negative : @color-carbaret; -@dataviz-color-scale-low-positive : @color-sea-green; -@dataviz-color-scale-positive : @dataviz-color-darkgreen; - -// Counter -@counter-background-color : @color-concrete; -@counter-text-color : @color-tundora; \ No newline at end of file