From 85de3cd5ce8f1aa45d5e70cf2365a694ecda091f Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 29 Apr 2021 11:41:29 -0500 Subject: [PATCH 1/5] fix(ComponentDemo): update table zebra stripe styles --- .../ComponentDemo/ComponentDemo.module.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/ComponentDemo/ComponentDemo.module.scss b/src/components/ComponentDemo/ComponentDemo.module.scss index ea9d58208f6..de70f23f12f 100644 --- a/src/components/ComponentDemo/ComponentDemo.module.scss +++ b/src/components/ComponentDemo/ComponentDemo.module.scss @@ -362,10 +362,16 @@ fieldset.form-group:last-of-type { color: var(--cds-text-01, #161616); } + [class*='--data-table--zebra'] tbody tr:nth-child(even) td { + background-color: var(--cds-ui-03, #e0e0e0); + border-bottom: var(--cds-ui-03, #e0e0e0); + border-top: var(--cds-ui-03, #e0e0e0); + } + [class*='--data-table--zebra'] tbody tr:nth-child(odd) td { - background-color: var(--cds-ui-02, #fffff); - border-bottom: var(--cds-ui-02, #fffff); - border-top: var(--cds-ui-02, #fffff); + background-color: var(--cds-ui-01, #f4f4f4); + border-bottom: var(--cds-ui-01, #f4f4f4); + border-top: var(--cds-ui-01, #f4f4f4); } [class*='--content-switcher-btn'] { From a986a61b803fcc8b42c6df397b2b7919fcec10e6 Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 29 Apr 2021 13:32:30 -0500 Subject: [PATCH 2/5] fix(ComponentDemo): update sortable table hover styles --- src/components/ComponentDemo/ComponentDemo.module.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/ComponentDemo/ComponentDemo.module.scss b/src/components/ComponentDemo/ComponentDemo.module.scss index de70f23f12f..0764095d315 100644 --- a/src/components/ComponentDemo/ComponentDemo.module.scss +++ b/src/components/ComponentDemo/ComponentDemo.module.scss @@ -384,4 +384,8 @@ fieldset.form-group:last-of-type { .bx--select { width: 50%; } + + [class*='--table-sort']:hover { + background-color: var(--cds-layer-selected-hover, #cacaca); + } } From 158bb7703320b4c572d60c7c5a4e67df200912db Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 29 Apr 2021 17:48:28 -0500 Subject: [PATCH 3/5] fix(ComponentDemo): update themed tooltip styles --- src/components/ComponentDemo/ComponentDemo.js | 1 + src/components/ComponentDemo/ComponentDemo.module.scss | 10 ++++++++++ 2 files changed, 11 insertions(+) diff --git a/src/components/ComponentDemo/ComponentDemo.js b/src/components/ComponentDemo/ComponentDemo.js index 25525db9045..08de0099403 100644 --- a/src/components/ComponentDemo/ComponentDemo.js +++ b/src/components/ComponentDemo/ComponentDemo.js @@ -68,6 +68,7 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => { const onThemeChange = (event) => { setTheme(themes[event.selectedItem]); + document.body.dataset.livePreviewTheme = event.selectedItem; }; const onVariantChange = (event) => { diff --git a/src/components/ComponentDemo/ComponentDemo.module.scss b/src/components/ComponentDemo/ComponentDemo.module.scss index 0764095d315..2e3e8c19daf 100644 --- a/src/components/ComponentDemo/ComponentDemo.module.scss +++ b/src/components/ComponentDemo/ComponentDemo.module.scss @@ -309,6 +309,7 @@ fieldset.form-group:last-of-type { } // Themes +body[data-live-preview-theme='White'] [class^='bx--tooltip'], .white { @include carbon--theme( $theme: $carbon--theme--white, @@ -316,6 +317,7 @@ fieldset.form-group:last-of-type { ); } +body[data-live-preview-theme='Gray 10'] [class^='bx--tooltip'], .g10 { @include carbon--theme( $theme: $carbon--theme--g10, @@ -323,6 +325,7 @@ fieldset.form-group:last-of-type { ); } +body[data-live-preview-theme='Gray 90'] [class^='bx--tooltip'], .g90 { @include carbon--theme( $theme: $carbon--theme--g90, @@ -330,6 +333,7 @@ fieldset.form-group:last-of-type { ); } +body[data-live-preview-theme='Gray 100'] [class^='bx--tooltip'], .g100 { @include carbon--theme( $theme: $carbon--theme--g100, @@ -389,3 +393,9 @@ fieldset.form-group:last-of-type { background-color: var(--cds-layer-selected-hover, #cacaca); } } + +body { + [class$='--tooltip'] { + background-color: var(--cds-inverse-02, #393939); + } +} From 0cf857e29721e685d6ee930289093922e3f63589 Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 29 Apr 2021 17:48:38 -0500 Subject: [PATCH 4/5] fix(ComponentDemo): update themed date picker styles --- .../ComponentDemo/ComponentDemo.module.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/ComponentDemo/ComponentDemo.module.scss b/src/components/ComponentDemo/ComponentDemo.module.scss index 2e3e8c19daf..9c448f43427 100644 --- a/src/components/ComponentDemo/ComponentDemo.module.scss +++ b/src/components/ComponentDemo/ComponentDemo.module.scss @@ -310,6 +310,8 @@ fieldset.form-group:last-of-type { // Themes body[data-live-preview-theme='White'] [class^='bx--tooltip'], +body[data-live-preview-theme='White'] + [class^='flatpickr-calendar'][class*='open'], .white { @include carbon--theme( $theme: $carbon--theme--white, @@ -318,6 +320,8 @@ body[data-live-preview-theme='White'] [class^='bx--tooltip'], } body[data-live-preview-theme='Gray 10'] [class^='bx--tooltip'], +body[data-live-preview-theme='Gray 10'] + [class^='flatpickr-calendar'][class*='open'], .g10 { @include carbon--theme( $theme: $carbon--theme--g10, @@ -326,6 +330,8 @@ body[data-live-preview-theme='Gray 10'] [class^='bx--tooltip'], } body[data-live-preview-theme='Gray 90'] [class^='bx--tooltip'], +body[data-live-preview-theme='Gray 90'] + [class^='flatpickr-calendar'][class*='open'], .g90 { @include carbon--theme( $theme: $carbon--theme--g90, @@ -334,6 +340,8 @@ body[data-live-preview-theme='Gray 90'] [class^='bx--tooltip'], } body[data-live-preview-theme='Gray 100'] [class^='bx--tooltip'], +body[data-live-preview-theme='Gray 100'] + [class^='flatpickr-calendar'][class*='open'], .g100 { @include carbon--theme( $theme: $carbon--theme--g100, @@ -398,4 +406,8 @@ body { [class$='--tooltip'] { background-color: var(--cds-inverse-02, #393939); } + + .flatpickr-calendar.open { + background-color: var(--cds-ui-01, #ffffff); + } } From 5615eb9567cf8a1cc1f87c4bda5f4ac73c761e5f Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 29 Apr 2021 18:23:15 -0500 Subject: [PATCH 5/5] fix(ComponentDemo): update themed overflow menu styles --- .../ComponentDemo/ComponentDemo.module.scss | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/src/components/ComponentDemo/ComponentDemo.module.scss b/src/components/ComponentDemo/ComponentDemo.module.scss index 9c448f43427..a26b701211c 100644 --- a/src/components/ComponentDemo/ComponentDemo.module.scss +++ b/src/components/ComponentDemo/ComponentDemo.module.scss @@ -312,6 +312,7 @@ fieldset.form-group:last-of-type { body[data-live-preview-theme='White'] [class^='bx--tooltip'], body[data-live-preview-theme='White'] [class^='flatpickr-calendar'][class*='open'], +body[data-live-preview-theme='White'] ul[class^='bx--overflow-menu-options'], .white { @include carbon--theme( $theme: $carbon--theme--white, @@ -322,6 +323,7 @@ body[data-live-preview-theme='White'] body[data-live-preview-theme='Gray 10'] [class^='bx--tooltip'], body[data-live-preview-theme='Gray 10'] [class^='flatpickr-calendar'][class*='open'], +body[data-live-preview-theme='Gray 10'] ul[class^='bx--overflow-menu-options'], .g10 { @include carbon--theme( $theme: $carbon--theme--g10, @@ -332,6 +334,7 @@ body[data-live-preview-theme='Gray 10'] body[data-live-preview-theme='Gray 90'] [class^='bx--tooltip'], body[data-live-preview-theme='Gray 90'] [class^='flatpickr-calendar'][class*='open'], +body[data-live-preview-theme='Gray 90'] ul[class^='bx--overflow-menu-options'], .g90 { @include carbon--theme( $theme: $carbon--theme--g90, @@ -342,6 +345,7 @@ body[data-live-preview-theme='Gray 90'] body[data-live-preview-theme='Gray 100'] [class^='bx--tooltip'], body[data-live-preview-theme='Gray 100'] [class^='flatpickr-calendar'][class*='open'], +body[data-live-preview-theme='Gray 100'] ul[class^='bx--overflow-menu-options'], .g100 { @include carbon--theme( $theme: $carbon--theme--g100, @@ -390,6 +394,18 @@ body[data-live-preview-theme='Gray 100'] height: 2.5rem; } + [class*='--overflow-menu__icon'] { + fill: var(--cds-icon-01, #161616); + } + + [class$='--overflow-menu']:hover { + background-color: var(--cds-hover-ui, #e5e5e5); + } + + [class*='--overflow-menu'][class*='--overflow-menu--open'] { + background-color: var(--cds-ui-01, #f4f4f4); + } + [class*='--search--sm'], [class*='--search--lg'], [class*='--search--xl'], @@ -410,4 +426,34 @@ body { .flatpickr-calendar.open { background-color: var(--cds-ui-01, #ffffff); } + + [class*='--overflow-menu-options'][class*='--overflow-menu-options--open'] { + background-color: var(--cds-ui-01, #f4f4f4); + + &::after { + background-color: var(--cds-ui-01, #f4f4f4); + } + } + + [class$='--overflow-menu-options__option']:hover, + [class*='--overflow-menu-options__option'][class$='--overflow-menu--divider']:hover { + background-color: var(--cds-hover-ui, #e5e5e5); + } + + [class$='--overflow-menu-options__option']:hover + [class*='--overflow-menu-options'] { + background-color: transparent; + } + + [class*='--overflow-menu-options__btn'] { + color: var(--cds-text-02, #525252); + + &:hover { + color: var(--cds-text-01, #161616); + } + + &:focus { + outline: 2px solid var(--cds-focus, #0f62fe); + } + } }