Update settings and other dialogs to use CSS variables for colors (#3024

) This is a continuation of moving to CSS variables for colors within the app. This is a large one that updates most of the Settings and other dialogs.
Automattic · Sep 28, 2021 · cdfd445 · cdfd445
1 parent 1aa6662
commit cdfd445
Show file tree

Hide file tree

Showing 16 changed files with 35 additions and 37 deletions.
diff --git a/lib/components/panel-title/index.tsx b/lib/components/panel-title/index.tsx
@@ -11,7 +11,7 @@ const PanelTitle: FunctionComponent<OwnProps> = ({
 }) => {
   return createElement(
     `h${headingLevel}`,
-    { className: 'panel-title theme-color-fg-dim' },
+    { className: 'panel-title' },
     children
   );
 };

diff --git a/lib/components/panel-title/style.scss b/lib/components/panel-title/style.scss
@@ -1,4 +1,5 @@
 .panel-title {
+  color: var(--foreground-color);
   margin: 0 0 0.5em;
   text-transform: uppercase;
   font-size: 90%;

diff --git a/lib/components/tab-panels/index.tsx b/lib/components/tab-panels/index.tsx
@@ -18,7 +18,7 @@ export class TabPanels extends Component<OwnProps> {
 
     return (
       <Tabs selectedTabClassName="is-active">
-        <TabList className="tab-panels__tab-list theme-color-border">
+        <TabList className="tab-panels__tab-list">
           {tabNames.map((tabName, key) => (
             <Tab className="button button-borderless" key={key}>
               {tabName}

diff --git a/lib/components/tab-panels/style.scss b/lib/components/tab-panels/style.scss
@@ -4,41 +4,32 @@
   justify-content: center;
   margin: 0;
   padding: 0;
-  border-bottom: 1px solid;
+  border-bottom: 1px solid var(--secondary-color);
   list-style: none;
 
   li {
     margin: 0 0.5em;
     border-bottom: 2px solid;
     padding: 0.75em;
-    color: var(--primary-color);
+    color: var(--accent-color);
     text-transform: capitalize;
     border-radius: 0;
 
     &.button {
-      border-bottom-color: transparent;
-    }
+      border-bottom-color: var(--secondary-color);
 
-    &.is-active {
-      color: var(--accent-color);
-      border-bottom-color: var(--accent-color);
+      &.is-active {
+        color: var(--accent-color);
+        border-bottom-color: var(--accent-color);
+      }
     }
+
     &:active {
       color: var(--background-color);
     }
   }
 }
 
-body[data-theme='light'] .tab-panels__tab-list li.is-active {
-  color: var(--accent-color);
-  border-bottom-color: var(--accent-color);
-}
-
-body[data-theme='dark'] .tab-panels__tab-list li.is-active {
-  color: var(--accent-color);
-  border-bottom-color: var(--accent-color);
-}
-
 .tab-panels__panel {
   height: 30.5em;
   overflow: auto;

diff --git a/lib/dialog/index.tsx b/lib/dialog/index.tsx
@@ -25,14 +25,9 @@ export class Dialog extends Component {
     } = this.props;
 
     return (
-      <div
-        className={classNames(
-          className,
-          'dialog theme-color-bg theme-color-fg theme-color-border'
-        )}
-      >
+      <div className={classNames(className, 'dialog')}>
         {!hideTitleBar && (
-          <div className="dialog-title-bar theme-color-border">
+          <div className="dialog-title-bar">
             <h2 className="dialog-title-text">{title}</h2>
             <div className="dialog-title-side">
               {!!onDone && (

diff --git a/lib/dialog/style.scss b/lib/dialog/style.scss
@@ -36,6 +36,7 @@ $dialog-title-height: 56px;
 }
 
 .dialog-title-text {
+  color: var(--primary-color);
   flex: 1 1 auto;
   margin: 15px 0 0 16px;
   text-align: left;

diff --git a/lib/dialogs/button-group/index.tsx b/lib/dialogs/button-group/index.tsx
@@ -8,7 +8,7 @@ const ButtonGroup = (props) => {
   return (
     <ul className="button-group">
       {items.map((item) => (
-        <li key={item.slug} className="button-group__item theme-color-border">
+        <li key={item.slug} className="button-group__item">
           <button type="button" onClick={() => onClickItem(item)}>
             {item.name}
             <SmallChevronRightIcon />

diff --git a/lib/dialogs/button-group/style.scss b/lib/dialogs/button-group/style.scss
@@ -5,11 +5,11 @@
 }
 
 .button-group__item {
+  color: var(--primary-color);
   display: flex;
   height: 3em;
   margin: 0;
-  border-width: 1px;
-  border-style: solid;
+  border: 1px solid var(--secondary-color);
 
   & + & {
     border-top-width: 0;

diff --git a/lib/dialogs/keybindings/style.scss b/lib/dialogs/keybindings/style.scss
@@ -6,6 +6,7 @@
   }
 
   .dialog-content {
+    color: var(--primary-color);
     padding: 10px 20px 20px;
     max-height: calc(100vh - 2rem - 56px);
   }

diff --git a/lib/dialogs/settings-group.tsx b/lib/dialogs/settings-group.tsx
@@ -32,10 +32,10 @@ export const SettingsGroup = ({
   return (
     <div className="settings-group">
       <PanelTitle headingLevel={3}>{groupTitle}</PanelTitle>
-      <div className="settings-items theme-color-border">
+      <div className="settings-items">
         {childElements.map(({ props: { slug, title } }) => (
           <label
-            className="settings-item theme-color-border"
+            className="settings-item"
             htmlFor={`settings-field-${groupSlug}-${slug}`}
             key={slug}
           >

diff --git a/lib/dialogs/settings/panels/account.tsx b/lib/dialogs/settings/panels/account.tsx
@@ -35,8 +35,8 @@ const AccountPanel: FunctionComponent<Props> = ({
     <div className="settings-account">
       <PanelTitle headingLevel={3}>Account</PanelTitle>
 
-      <div className="settings-items theme-color-border">
-        <div className="settings-item theme-color-border">
+      <div className="settings-items">
+        <div className="settings-item">
           <span className="settings-account-name">{accountName}</span>
         </div>
       </div>

diff --git a/lib/dialogs/settings/style.scss b/lib/dialogs/settings/style.scss
@@ -1,6 +1,10 @@
 .settings {
   max-width: 630px;
 
+  .button-borderless {
+    color: var(--accent-color);
+  }
+
   &.dialog {
     max-height: calc(100vh - 2rem);
 
@@ -33,12 +37,13 @@
 
   p {
     line-height: normal;
-    color: var(--primary-color);
+    color: var(--settings-fg-color);
   }
 }
 
 .settings-items {
   border: 1px solid var(--secondary-color);
+  color: var(--primary-color);
 }
 
 .settings-item {

diff --git a/lib/dialogs/share/index.tsx b/lib/dialogs/share/index.tsx
@@ -78,9 +78,9 @@ export class ShareDialog extends Component<Props> {
                 Add an email address of another Simplenote user to share a note.
                 You&apos;ll both be able to edit and view the note.
               </p>
-              <div className="settings-items theme-color-border">
+              <div className="settings-items">
                 <form
-                  className="settings-item theme-color-border"
+                  className="settings-item"
                   onSubmit={this.onAddCollaborator}
                 >
                   <input
@@ -101,7 +101,7 @@ export class ShareDialog extends Component<Props> {
               </div>
             </div>
             <div className="settings-group">
-              <div className="share-collaborators-heading theme-color-border">
+              <div className="share-collaborators-heading">
                 <PanelTitle headingLevel={3}>Collaborators</PanelTitle>
               </div>
               <ul className="share-collaborators">

diff --git a/lib/dialogs/share/style.scss b/lib/dialogs/share/style.scss
@@ -25,6 +25,7 @@
   }
 
   .share-collaborator-name {
+    color: var(--primary-color);
     flex: 1 1 auto;
     font-size: 143%;
     font-weight: $light;

diff --git a/lib/dialogs/trash-tag-confirmation/style.scss b/lib/dialogs/trash-tag-confirmation/style.scss
@@ -15,6 +15,7 @@
   }
 
   .dialog-content {
+    color: var(--primary-color);
     padding: 0 16px;
 
     .dialog-inner-content {

diff --git a/lib/dialogs/unsynchronized/style.scss b/lib/dialogs/unsynchronized/style.scss
@@ -19,6 +19,7 @@
 
   .explanation,
   .explanation-secondary {
+    color: var(--primary-color);
     font-size: 14px;
     margin: 12px 0;
     padding-left: 16px;
@@ -47,6 +48,7 @@
     }
 
     li span {
+      color: var(--primary-color);
       padding-left: 5px;
       padding-right: 16px;
       overflow: hidden;