feat: add ds theme (#1224)

* chore: remove old ds-theme

* feat: init structure

* feat: add theme override mechanism

* feat: add zipped less tokens

* fix: elements look up file path

* fix: theme source path containing double slash

* feat: add toggle button style

* feat: add cta button

* feat: map cta and toggles

* fix: remove redundant default toggle style

* feat: handles transparent cta toggles

* feat: add accordion and collapse

* feat: add icon color

* fix: collapse focused background color

* feat: add item, list and tree color overrides

* docs: add todos

* fix: move design tokens to devDep

* feat: add tooltip

* feat: add control and overlay variables

* fix: revise button styles

* feat: fix demo block background color

* refactor: use cont token

* fix: overlay-menu border color

* feat: add canvas, flag, icon, layout, loader

* feat: add label, sidebar-layout

* feat: add placeholder component theme

* fix: add tooltip box shadow

* feat: revise item selection styles

* feat: dataviz components MVP

* refactor: use variable for button border width

* fix: remove button border radius

* feat: add checkbox, radio button placeholder

* refactor: remove unused variables

* fix: use only primary color for icon hover

* feat: add placeholder for number-field

* refactor: use transparent contextual variable instead

* feat: add fields

* feat: add select

* feat: add overlay placeholder

* feat: add combo-box placeholder

* feat: add tree-select placeholder

* feat: add headers

* feat: add rating and counter placeholder

* feat: update status variables

* feat: update dataviz tokens

* chore: update web-design-token to dev.11

* feat: use Proxima Vara font

* fix(ds-theme): add new css vars and refactor code

* feat: add dialog

* feat: add appstate-bar, clock and notification placeholder

* feat: add toggle

* feat: add color dialog and picker placeholder

* fix(ds-theme): remove incorrect lines

* feat(ds-theme): add link and rename tgz

* feat: add tab and tabbar

* fix(ds-theme): use token for fg color of notification

* feat: add pill

* feat: add slider

* feat: add border radius to button

* feat: add calendar

* feat(ds-theme): update border-radius

* feat: update docs to use ds theme

* fix: add ds-theme to docs dependency

* fix: remove border line from tree item and add space between item

* feat: update pill tokens to use toggle tag

* fix: set border-radius tree select

* fix: improve counter

* feat: update datetime picker to use dialog background color and border

* feat: improve select

* feat: improve dialog

* fix: add workaround for selection color

* fix: body typography

* fix: remove border radius from select and pagination

* fix: combo box style

* fix: autosuggest

* fix: combo box border color

* fix: jump button in interactive chart

* fix: toggle

* feat: style scrollbar

* chore: add comment

* fix: toggle width for checked-label

* chore: remove ds-theme from package lock

* chore: update doc to use latest version of ds-theme

* chore: add ds-theme as dependencies of elements package

* fix: update ef header bg tokens from design

* fix(docs): update to use ds package in monorepo

* fix: button opacity

* fix: add opacity on close button of dialog

* fix: override border radius of input  to zero

* fix: override opacity of button and close button

* fix(ds-theme): update design-token to 0.0.3-dev.56

* fix: update background color of autosuggest item when it highlighted

* fix: update incorrect token in accordion

* fix: update incorrect border color token in accordion

* Revert "fix: update incorrect border color token in accordion"

This reverts commit 854258d.

* Revert "fix: update incorrect token in accordion"

This reverts commit b6aada5.

* fix(theme-compiler): always use forward slash in glob pattern

* fix: update hand color in clock

* fix: update bg color for each level of collapse

* chore(ds-theme): update design tokens package

* fix: update color for item header to make more distinctive

* fix: update token for checkbox

* refactor: token for checkbox

* fix: update token for radio button

* fix: release fail

* fix: release fail

* chore: update dependency

* fix: change global font size to 12px

* fix: remove override global font size and line height

* chore: update dependency for dev release

* chore: update dependency for dev release

* chore: update dependency

* fix: set text transform to none

* fix: set text transform to none for h4 h5 h6

* fix: use @input-border-radius

* fix: set data viz color scale to 500

* chore(ds-theme): add @refinitiv-ui/halo-theme as a dependency

* feat(ds-theme): add new LESS exports

* chore: update copyright year to 2024

* chore(ds-theme): update license based on Halo theme

* chore: set ds-theme of documents package to latest for dev release

* fix: update border for toggle button active hover state

* fix: update border radius token for checkbox

* fix: background color of code sandbox

* chore: update dependency for doc release

* fix: remove border radius from code sandbox iframe

* fix: update border radius for color picker

* fix(ds-theme): add missing variable import to bare.less

* chore: set ds-theme of documents package to latest for dev release

* chore: revert ds-theme of documents package for development

* fix: update opacity for close btn in pill

* fix: update separator-color color

* fix(ds-theme): change @lseg-workspace/web-design-tokens to dep instead of devDep

* chore: set ds-theme of documents package to latest for dev release

* chore: revert ds-theme of documents package for development

* feat: revised and added grid color variables (#1232)

* chore: update theme to latest

* chore: update lock file

* fix: update token for text-field and loader

* fix: update token for card

* fix: update color token for header level 1-3

* fix: update color token and font weight for header

* fix: update bg color for header of dialog

* fix: update color for warning state

* fix: update opacity of close button for notification

* fix: update token color for tab and tab-bar

* fix: update dependency to trigger Cloudflare page

* feat(ds-theme): add shared-styles in LESS format

* chore: set ds-theme of documents package to latest for dev release

* chore: revert ds-theme of documents package for development

* chore: update web design token

* chore: update web design token

* chore: update web design token

* fix: update opacity of close button in notification

* fix: update backdrop color for overlay

* chore: update web design token

* chore: update web design token

* chore: revert dependency after release dev package

* chore: revert dependency after release dev package

* fix: update token for calendar

* fix: update token for led gauge

* fix: update bg color for checkbox

* fix: update fg color font size and weight and box shadow for card

* fix: update variable for dialog

* fix: update variable for number-field

* fix: update bg color for tab bar

* fix: update bg color for tab bar arrow button

* fix: update text color for time-picker

* chore(ds-theme): add [email protected] LESS files

* refactor(ds-theme): use local web design tokens LESS

* chore: set ds-theme of documents package to latest for dev release

* chore: revert ds-theme of documents package for development

* fix: update box shadow for tooltip

* fix: update token for appstate-bar

* fix: update token for toggle

* style: remove white space

* fix: update font weight for item

* fix: update bg and text color for item

* fix: update border color for button bar

* fix: update text color for clock

* fix: update bg color for overlay

* fix: update highlighted text color for item

* fix: update style for slider

* fix: update border radius for nested button bar

* fix: update color for counter

* chore: set ds-theme of documents package to latest for dev release

* chore: revert ds-theme of documents package for development

* refactor(ds-theme): update grid color variables to match specs (#1233)

Co-authored-by: Pornchai Korpraserttaworn <[email protected]>

* chore: set ds-theme of documents package to latest preparing for a dev release

* chore: update dependency to deploy document

* chore: update to web-design-token 0.0.3-dev.14 with design-token 0.0.3-dev.95

* fix: update color for segment seconds of clock

* chore: bump web-design-tokens to 0.0.3-dev.15

* chore: set ds-theme of documents package to latest preparing for a dev release

* chore: revert ds-theme of documents package for development

* fix: update bg color for all level of header

* fix(ds-theme): accordion has no border color (#1234)

* fix(ds-theme): incorrect overlay box-shadow (#1236)

Co-authored-by: Napat Bualoy <[email protected]>

* fix(ds-theme): use default background color for track and thumb when hovering slider (#1237)

Co-authored-by: Napat Bualoy <[email protected]>

* fix(ds-theme): correct background color of swing gauge (#1238)

Co-authored-by: Napat Bualoy <[email protected]>

* fix(ds-theme): update font weights for header and non-header items (#1240)

Co-authored-by: Sakchai Homhual <[email protected]>
Co-authored-by: Napat Bualoy <[email protected]>

* fix(ds-theme): update item to consume token from menu item

* fix(ds-theme):  update data visualization color scale variables (#1235)

Co-authored-by: Sakchai Homhual <[email protected]>
Co-authored-by: Napat Bualoy <[email protected]>

* fix(ds-theme): update bg color and border color for dialog

* fix(ds-theme): update border radius and margin for button bar & pagination (#1239)

* fix(ds-theme): adjust border radius for ef-button-bar elements

* fix(ds-theme): pagination button border by adjust margin for ef-button elements in button bar

* fix(ds-theme): inherit right border radius for last ef-button-bar element

---------

Co-authored-by: Sakchai Homhual <[email protected]>
Co-authored-by: Napat Bualoy <[email protected]>

* fix(ds-theme): incorrect led gauge's bar color (#1242)

Co-authored-by: Napat Bualoy <[email protected]>

* fix(ds-theme): override styles for slotted anchor elements in appstat… (#1243)

* fix(ds-theme): override styles for slotted anchor elements in appstate bar

* fix(ds-theme): clarify comment on slotted selector limitations for child elements

* fix(ds-theme): update border and text color for tree select

* fix(ds-theme): adjust font size and vertical alignment for icon links in appstate bar demo

---------

Co-authored-by: Sakchai Homhual <[email protected]>
Co-authored-by: napat.b <[email protected]>

* fix(ds-theme): update token for counter

* fix(ds-theme): missing border when clicking at toggle pill (#1244)

Co-authored-by: Napat Bualoy <[email protected]>

* fix(ds-theme): update font family for ja, zh-CN and zh-Hant

* fix(ds-theme): update token for counter

* fix(ds-theme): update center line for swing gauge

* fix(ds-theme): update hover bg color for item

* chore: update to web-design-token 0.0.3-dev.16 with design-token 0.0.3-dev.98

* fix(ds-theme): calendar and datetime-picker ds theme (#1246)

* fix(ds-theme): update selected text color for calendar component

* fix(ds-theme): datetime-picker container by remove border and update popover radius tokens

* fix(ds-theme): update selected text color for calendar component

* fix(ds-theme): datetime-picker container by remove border and update popover radius tokens

* refactor(ds-theme): update border radius for overlay

---------

Co-authored-by: Sakchai Homhual <[email protected]>
Co-authored-by: napat.b <[email protected]>
Co-authored-by: Napat Bualoy <[email protected]>

* fix(ds-theme): update slider's track and step color based on the feedback (#1247)

* fix(ds-theme): incorrect placeholder font color of text-field, input, textarea (#1248)

* fix(ds-theme): incorrect placeholder font color of text-field, input, textarea

* docs: make helper text color in text-field page aligned with the mockup

* fix(ds-theme): update bg color for text field readonly

* fix(ds-theme): update bg color for number field readonly

---------

Co-authored-by: napat.b <[email protected]>

* docs(ds-theme): update error text color to example of field elements

* chore: set ds-theme of documents package to latest preparing for a dev release

* chore: revert ds-theme of documents package for development

* chore: revert pandora-book to 3.0.0-74

* chore: revert theme for document

* style: remove extra line

---------

Co-authored-by: Domrongpon Tanpaibul <[email protected]>
Co-authored-by: Sarin Udompanish <[email protected]>
Co-authored-by: napat.b <[email protected]>
Co-authored-by: Wattachai Kanawitoon <[email protected]>
Co-authored-by: prima.s <[email protected]>
Co-authored-by: efx-grid <[email protected]>
Co-authored-by: Pornchai Korpraserttaworn <[email protected]>
Co-authored-by: Napat Bualoy <[email protected]>
Co-authored-by: Sakchai Homhual <[email protected]>
Co-authored-by: Sakchai Homhual <[email protected]>

.gitignore

@@ -64,7 +64,6 @@ web_modules/
 .node_repl_history
 
 # Output of 'npm pack'
-*.tgz
 # Allow pandora-book offline package
 !documents/tools/*.tgz
 
@@ -130,6 +129,8 @@ packages/solar-theme/charcoal
 packages/solar-theme/pearl
 packages/halo-theme/dark
 packages/halo-theme/light
+packages/ds-theme/dark
+packages/ds-theme/light
 
 # Doc
 custom-elements.json
@@ -148,4 +149,4 @@ packages/**/node_modules
 certs
 
 # nx
-.nx
+.nx

documents/src/pages/elements/email-field.md

@@ -129,8 +129,11 @@ emailField.addEventListener("input", () => {
 });
 ```
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-email-field {
   width: 275px;
@@ -217,8 +220,11 @@ emailField.addEventListener("input", () => {
 });
 ```
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-email-field {
   width: 275px;
@@ -305,6 +311,7 @@ save.addEventListener("tap", () => {
     responseText.innerHTML = "Full name & email must be provided together";
   } else if (email.value && !/^\w+@mail.com$/.test(email.value)) {
     email.error = true;
+    responseText.classList.add('error');
     responseText.innerHTML = "Email must be valid and end with @mail.com";
   } else {
     responseText.innerHTML = "Saved";
@@ -323,8 +330,11 @@ email.addEventListener("input", inputHandler);
 ```
 
 ```css
-.error {
-  color: #d94255;
+html[prefers-color-scheme="light"] .error {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] .error {
+  color:#ff5540;
 }
 ef-text-field, ef-email-field {
   width: 250px;

documents/src/pages/elements/number-field.md

@@ -144,6 +144,14 @@ numberField.addEventListener("input", () => {
   }
 });
 ```
+```css
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
+}
+```
 ```html
 <label for="input">Input</label>
 <ef-number-field
@@ -290,8 +298,11 @@ numberField.addEventListener("input", () => {
 ```
 
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-number-field {
   width: 250px;

documents/src/pages/elements/password-field.md

@@ -51,8 +51,11 @@ label {
 ul {
   padding-inline-start: 24px;
 }
-#password-error, #pattern-error {
-  color: #d94255;
+html[prefers-color-scheme="light"] #password-error, #pattern-error {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #password-error, #pattern-error{
+  color:#ff5540;
 }
 ```
 ```html
@@ -188,8 +191,11 @@ passwordField.addEventListener("input", () => {
 });
 ```
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-password-field {
   width: 200px;
@@ -276,8 +282,11 @@ passwordField.addEventListener("input", (event) => {
 });
 ```
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-password-field {
   width: 275px;
@@ -387,8 +396,11 @@ confirmPassword.addEventListener("input", inputHandler);
 ```
 
 ```css
-.error {
-  color: #d94255;
+html[prefers-color-scheme="light"] .error {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] .error {
+  color:#ff5540;
 }
 ef-password-field {
   width: 250px;

documents/src/pages/elements/search-field.md

@@ -117,8 +117,11 @@ searchField.addEventListener("input", () => {
 });
 ```
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-search-field {
   width: 200px;
@@ -205,8 +208,11 @@ searchField.addEventListener("input", () => {
 });
 ```
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-search-field {
   width: 280px;
@@ -303,8 +309,11 @@ searchField.addEventListener("input", () => {
 ```
 
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-search-field {
   width: 250px;

documents/src/pages/elements/text-field.md

@@ -118,8 +118,11 @@ textField.addEventListener("input", () => {
 ```
 
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-text-field {
   width: 200px;
@@ -212,8 +215,11 @@ textField.addEventListener("input", () => {
 ```
 
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-text-field {
   width: 300px;
@@ -320,8 +326,11 @@ lastName.addEventListener("input", inputHandler);
 ```
 
 ```css
-.error {
-  color: #d94255;
+html[prefers-color-scheme="light"] .error {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] .error {
+  color:#ff5540;
 }
 ef-text-field {
   width: 300px;