refactor(cc-dark-theme): organize styles in several files
Until now we had a single file for the dark theme styles with ~2500
lines, with several sections which were marked with CSS comments.
This CL separates this file into several ones to improve its
maintainability, using the folder structure suggested by
https://sass-guidelin.es/#architecture.
Fixed: twpowertools:21
Change-Id: I0c1741f58b470085c0a499b32aa64feb43d8ad31
diff --git a/src/ccDarkTheme/components/inputs/_checkbox.scss b/src/ccDarkTheme/components/inputs/_checkbox.scss
new file mode 100644
index 0000000..657373f
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_checkbox.scss
@@ -0,0 +1,35 @@
+// This doesn't apply to checkboxes in the drawer
+material-checkbox material-icon:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon) {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+material-checkbox .content:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon) {
+ color: var(--TWPT-primary-text)!important;
+}
+
+material-checkbox.disabled .content:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon) {
+ color: rgba(255, 255, 255, .54)!important;
+}
+
+/* .gm-icons is added by the SMEI_GOOGLE_MATERIAL_ICONS experiment. */
+material-checkbox material-icon.filled:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon) {
+ color: var(--TWPT-blue-A100)!important;
+}
+
+material-checkbox:focus:not(.disabled).gm-icons .icon,
+ .gm-icons material-checkbox:focus:not(.disabled) .icon,
+ material-checkbox:hover:not(.disabled).gm-icons .icon,
+ .gm-icons material-checkbox:hover:not(.disabled) .icon {
+ color: #cfd2d8!important; /* custom value */
+}
+
+material-checkbox:focus:not(.disabled).gm-icons .icon.filled,
+ .gm-icons material-checkbox:focus:not(.disabled) .icon.filled,
+ material-checkbox:hover:not(.disabled).gm-icons .icon.filled,
+ .gm-icons material-checkbox:hover:not(.disabled) .icon.filled {
+ color: var(--TWPT-blue-100)!important;
+}
+
+.gm-icons material-checkbox .icon-container::before{
+ background-color: #dfdedb!important; /* custom value */
+}
diff --git a/src/ccDarkTheme/components/inputs/_dropdown-select.scss b/src/ccDarkTheme/components/inputs/_dropdown-select.scss
new file mode 100644
index 0000000..9ea47d8
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_dropdown-select.scss
@@ -0,0 +1,8 @@
+material-dropdown-select dropdown-button {
+ color: var(--TWPT-primary-text)!important;
+}
+
+material-dropdown-select dropdown-button .button.is-disabled .button-text,
+ material-dropdown-select dropdown-button .button.is-disabled material-icon {
+ color: rgba(255, 255, 255, .32)!important;
+}
diff --git a/src/ccDarkTheme/components/inputs/_index.scss b/src/ccDarkTheme/components/inputs/_index.scss
new file mode 100644
index 0000000..a1d509b
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_index.scss
@@ -0,0 +1,7 @@
+@forward 'checkbox';
+@forward 'dropdown-select';
+@forward 'pickers';
+@forward 'radio';
+@forward 'selector';
+@forward 'switch';
+@forward 'text';
diff --git a/src/ccDarkTheme/components/inputs/_pickers.scss b/src/ccDarkTheme/components/inputs/_pickers.scss
new file mode 100644
index 0000000..2cf091c
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_pickers.scss
@@ -0,0 +1,10 @@
+ec-work-state-picker > button,
+ ec-symptom-picker > button {
+ color: var(--TWPT-secondary-text)!important;
+ background-color: var(--TWPT-button-background)!important;
+ border-color: var(--TWPT-subtle-border)!important;
+}
+
+.material-popup-content .popup-content .title {
+ color: var(--TWPT-primary-text)!important;
+}
diff --git a/src/ccDarkTheme/components/inputs/_radio.scss b/src/ccDarkTheme/components/inputs/_radio.scss
new file mode 100644
index 0000000..e7b1668
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_radio.scss
@@ -0,0 +1,12 @@
+material-radio .icon-container:not(.checked) material-icon {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+material-radio .icon-container.checked material-icon {
+ color: var(--TWPT-blue-A100)!important;
+}
+
+material-radio {
+ --gm-radio-stroke-color--checked: var(--TWPT-blue-A100);
+ --gm-radio-ink-color: var(--TWPT-blue-A100);
+}
diff --git a/src/ccDarkTheme/components/inputs/_selector.scss b/src/ccDarkTheme/components/inputs/_selector.scss
new file mode 100644
index 0000000..e0a62f0
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_selector.scss
@@ -0,0 +1,51 @@
+// This applies not only to the selector but also to the ec-work-state-picker.
+material-list, .popup .item-group-list {
+ background-color: var(--TWPT-drawer-background)!important;
+}
+
+material-list [group]:not(.empty) + *:not(script):not(template):not(.empty),
+ .popup .item-group-list [group]:not(.empty) + *:not(script):not(template):not(.empty) {
+ box-shadow: inset 0 8px 0 0 var(--TWPT-drawer-background)!important;
+ border-top-color: #1f1f1f!important;
+}
+
+material-list material-select-item:hover,
+ material-list material-select-item:focus,
+ material-list material-select-dropdown-item:hover,
+ material-list material-select-dropdown-item:focus,
+ material-list material-select-dropdown-item.active,
+ material-list material-select-dropdown-item:not(.multiselect).selected,
+ material-select-searchbox:focus-within + material-list .single-select-item:first-of-type,
+ .popup .item-group-list material-select-item:hover,
+ .popup .item-group-list material-select-item:focus,
+ .popup .item-group-list material-select-item.active,
+ .popup .item-group-list material-select-dropdown-item:hover,
+ .popup .item-group-list material-select-dropdown-item:focus,
+ .popup .item-group-list material-select-dropdown-item.active,
+ .popup .item-group-list material-select-dropdown-item:not(.multiselect).selected {
+ background-color: var(--TWPT-highlighted-item-background)!important;
+}
+
+material-list .single-select-item,
+ material-list .menu-item-label,
+ material-list .label,
+ material-list .text-segment,
+ menu-item-groups .single-select-item,
+ menu-item-groups .menu-item-label,
+ menu-item-groups .label,
+ menu-item-groups .text-segment {
+ color: rgba(255, 255, 255, .87)!important;
+}
+
+.popup .item-group-list material-icon {
+ color: rgba(255, 255, 255, .7)!important;
+}
+
+material-list [group] > [label] {
+ color: #8a8a8a!important;
+}
+
+// This is shown in the new thread view
+ec-forum-language-picker .labeled-select .select-label {
+ color: var(--TWPT-secondary-text)!important;
+}
diff --git a/src/ccDarkTheme/components/inputs/_switch.scss b/src/ccDarkTheme/components/inputs/_switch.scss
new file mode 100644
index 0000000..4d1f61d
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_switch.scss
@@ -0,0 +1,15 @@
+.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
+ background-color: #7d7d7d!important; /* custom value */
+}
+
+.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
+ border-color: #fff!important; /* custom value */
+}
+
+.mdc-switch.mdc-switch--checked .mdc-switch__track {
+ background-color: var(--TWPT-blue-A100)!important;
+}
+
+.mdc-switch.mdc-switch--checked .mdc-switch__thumb {
+ border-color: var(--TWPT-blue-A100)!important;
+}
diff --git a/src/ccDarkTheme/components/inputs/_text.scss b/src/ccDarkTheme/components/inputs/_text.scss
new file mode 100644
index 0000000..b61da70
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_text.scss
@@ -0,0 +1,70 @@
+material-input input {
+ color: var(--TWPT-primary-text)!important;
+}
+
+material-input .label-text,
+ material-input .hint-text,
+ material-input .counter,
+ material-input .leading-text,
+ material-input .leading-text material-icon {
+ color: var(--TWPT-subtle-button-background)!important;
+}
+
+material-input .underline .unfocused-underline {
+ background-color: var(--TWPT-input-underline)!important;
+}
+
+material-input .underline .focused-underline {
+ background-color: var(--TWPT-blue-A100)!important;
+}
+
+:is(material-input.gm-input, .gm-input material-input) .baseline {
+ border-color: var(--gm-outlinedtextfield-outline-color)!important;
+}
+
+:is(material-input.gm-input, .gm-input material-input) .baseline:hover {
+ border-color: var(--gm-outlinedtextfield-outline-color)!important;
+}
+
+:is(material-input.gm-input, .gm-input material-input) .baseline.focused {
+ border-color: var(--gm-outlinedtextfield-outline-color--stateful)!important;
+}
+
+:is(material-input.gm-input, .gm-input material-input).invalid .baseline {
+ border-color: var(--gm-outlinedtextfield-outline-color--error)!important;
+}
+
+:is(material-input.gm-input, .gm-input material-input).invalid .error-text {
+ color: var(--gm-outlinedtextfield-helper-text-color--error)!important;
+}
+
+label .label,
+ .input-field > .label {
+ color: var(--TWPT-primary-text)!important;
+}
+
+.mdc-text-field--outlined:hover:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-floating-label {
+ color: var(--gm-outlinedtextfield-label-color)!important;
+}
+
+.mdc-text-field--outlined:hover:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-notched-outline :is(.mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing) {
+ border-color: var(--gm-outlinedtextfield-outline-color)!important;
+}
+
+.mdc-text-field--outlined.mdc-text-field--invalid:hover:not(.mdc-text-field--focused):not(.mdc-text-field--disabled) .mdc-floating-label {
+ color: var(--gm-outlinedtextfield-label-color--error)!important;
+}
+
+.mdc-text-field--outlined.mdc-text-field--invalid:hover:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-notched-outline :is(.mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing) {
+ border-color: var(--gm-outlinedtextfield-outline-color--error)!important;
+}
+
+.mdc-text-field--outlined.mdc-text-field--invalid:hover:not(.mdc-text-field--focused):not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text {
+ color: var(--gm-outlinedtextfield-helper-text-color--error)!important;
+}
+
+// Input underline
+material-input .underline .unfocused-underline,
+ material-dropdown-select dropdown-button [buttondecorator] {
+ border-color: var(--TWPT-input-underline)!important;
+}