From 1f90dd29a2e1a11cf16857513f14bce3df68c1e1 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 26 Aug 2023 16:28:39 +0800
Subject: ...

---
 FrontEnd/src/pages/setting/index.css               |  25 +++--
 FrontEnd/src/pages/setting/index.tsx               |   9 +-
 FrontEnd/src/pages/timeline/CollapseButton.tsx     |  18 ++--
 FrontEnd/src/pages/timeline/TimelineCard.tsx       |   1 +
 .../src/pages/timeline/TimelinePostCreateView.css  |   4 +-
 FrontEnd/src/pages/timeline/TimelinePostView.tsx   |   1 +
 FrontEnd/src/views/common/AppBar.css               |  11 +-
 FrontEnd/src/views/common/AppBar.tsx               |   9 +-
 FrontEnd/src/views/common/Card.css                 |  16 ++-
 FrontEnd/src/views/common/Card.tsx                 |   9 +-
 FrontEnd/src/views/common/button/Button.css        |  38 +++----
 FrontEnd/src/views/common/button/Button.tsx        |   2 +-
 FrontEnd/src/views/common/button/FlatButton.css    |  12 +--
 FrontEnd/src/views/common/button/FlatButton.tsx    |   2 +-
 FrontEnd/src/views/common/button/IconButton.css    |  10 +-
 FrontEnd/src/views/common/button/IconButton.tsx    |   4 +-
 FrontEnd/src/views/common/button/LoadingButton.css |   6 +-
 FrontEnd/src/views/common/button/LoadingButton.tsx |   2 +-
 FrontEnd/src/views/common/list/ListContainer.css   |   2 +-
 .../src/views/common/list/ListItemContainer.css    |   2 +-
 FrontEnd/src/views/common/theme.css                | 113 +++++++++++----------
 21 files changed, 161 insertions(+), 135 deletions(-)

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/pages/setting/index.css b/FrontEnd/src/pages/setting/index.css
index 86ccf706..a8a44524 100644
--- a/FrontEnd/src/pages/setting/index.css
+++ b/FrontEnd/src/pages/setting/index.css
@@ -1,5 +1,3 @@
-/* TODO: Make item prettier. */
-
 .setting-section {
   padding: 1em 0;
   margin: 1em 0;
@@ -7,35 +5,36 @@
 
 .setting-section-title {
   padding: 0 1em;
-  color: white;
 }
 
 .setting-section-item-area {
   margin-top: 1em;
-  border-top: 1px solid var(--cru-secondary-color);
+  border-top: 1px solid var(--cru-primary-color);
 }
 
 .setting-item-container {
   padding: 0.5em 1em;
   transition: background-color 0.3s;
-  background-color: var(--cru-background-color);
-  border-bottom: 1px solid var(--cru-secondary-color);
+  background-color: var(--cru-clickable-grayscale-normal-color);
+  border-bottom: 1px solid var(--cru-clickable-grayscale-active-color);
   display: flex;
   align-items: center;
 }
 
 .setting-item-container:hover {
-  color: white;
-  background-color: var(--cru-secondary-color);
+  background-color: var(--cru-clickable-grayscale-hover-color);
 }
 
-.setting-item-container.danger {
-  color: var(--cru-danger-color);
+.setting-item-container:focus {
+  background-color: var(--cru-clickable-grayscale-focus-color);
 }
 
-.setting-item-container.danger:hover {
-  color: white;
-  background-color: var(--cru-danger-color);
+.setting-item-container:active {
+  background-color: var(--cru-clickable-grayscale-active-color);
+}
+
+.setting-item-container.danger {
+  color: var(--cru-danger-color);
 }
 
 .setting-item-label-sub {
diff --git a/FrontEnd/src/pages/setting/index.tsx b/FrontEnd/src/pages/setting/index.tsx
index 4e0bf27e..50967a3c 100644
--- a/FrontEnd/src/pages/setting/index.tsx
+++ b/FrontEnd/src/pages/setting/index.tsx
@@ -247,9 +247,9 @@ export default function SettingPage() {
   ]);
 
   return (
-    <Page className="cru-primary" noTopPadding>
+    <Page noTopPadding>
       {user ? (
-        <SettingSection title="settings.subheader.account" color="secondary">
+        <SettingSection title="settings.subheader.account">
           <RegisterCodeSettingItem />
           <ButtonSettingItem
             title="settings.changeAvatar"
@@ -271,10 +271,7 @@ export default function SettingPage() {
           />
         </SettingSection>
       ) : null}
-      <SettingSection
-        title="settings.subheader.customization"
-        color="secondary"
-      >
+      <SettingSection title="settings.subheader.customization">
         <LanguageChangeSettingItem />
       </SettingSection>
       <ChangePasswordDialog {...dialogPropsMap["change-password"]} />
diff --git a/FrontEnd/src/pages/timeline/CollapseButton.tsx b/FrontEnd/src/pages/timeline/CollapseButton.tsx
index 8270e160..14fc6bee 100644
--- a/FrontEnd/src/pages/timeline/CollapseButton.tsx
+++ b/FrontEnd/src/pages/timeline/CollapseButton.tsx
@@ -1,21 +1,25 @@
-import * as React from "react";
+import { CSSProperties } from "react";
 
 import IconButton from "@/views/common/button/IconButton";
 
-const CollapseButton: React.FC<{
+export default function CollapseButton({
+  collapse,
+  onClick,
+  className,
+  style,
+}: {
   collapse: boolean;
   onClick: () => void;
   className?: string;
-  style?: React.CSSProperties;
-}> = ({ collapse, onClick, className, style }) => {
+  style?: CSSProperties;
+}) {
   return (
     <IconButton
+      color="primary"
       icon={collapse ? "arrows-angle-expand" : "arrows-angle-contract"}
       onClick={onClick}
       className={className}
       style={style}
     />
   );
-};
-
-export default CollapseButton;
+}
diff --git a/FrontEnd/src/pages/timeline/TimelineCard.tsx b/FrontEnd/src/pages/timeline/TimelineCard.tsx
index 8557e5dd..ed34b4ba 100644
--- a/FrontEnd/src/pages/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/pages/timeline/TimelineCard.tsx
@@ -112,6 +112,7 @@ export default function TimelineCard(props: TimelinePageCardProps) {
             containerClassName="d-inline"
           >
             <IconButton
+              color="primary"
               className="timeline-card-button"
               icon="three-dots-vertical"
             />
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
index 2a433860..5986e566 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
@@ -24,11 +24,11 @@
 }
 
 .timeline-post-create-edit-text:hover {
-  border-color: var(--cru-button-secondary-normal-color)
+  border-color: var(--cru-clickable-secondary-normal-color)
 }
 
 .timeline-post-create-edit-text:focus {
-  border-color: var(--cru-button-secondary-normal-color)
+  border-color: var(--cru-clickable-secondary-normal-color)
 }
 
 .timeline-post-create-image {
diff --git a/FrontEnd/src/pages/timeline/TimelinePostView.tsx b/FrontEnd/src/pages/timeline/TimelinePostView.tsx
index 07f2e0f0..afae5033 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostView.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostView.tsx
@@ -47,6 +47,7 @@ export default function TimelinePostView(props: TimelinePostViewProps) {
       <TimelinePostCard className="cru-primary">
         {post.editable && (
           <IconButton
+            color="primary"
             icon="chevron-down"
             className="timeline-post-edit-button"
             onClick={(e) => {
diff --git a/FrontEnd/src/views/common/AppBar.css b/FrontEnd/src/views/common/AppBar.css
index 2f2d4a1a..a0d975b5 100644
--- a/FrontEnd/src/views/common/AppBar.css
+++ b/FrontEnd/src/views/common/AppBar.css
@@ -37,15 +37,20 @@
 }
 
 .app-bar a:hover {
-  background-color: var(--cru-button-primary-hover-color);
+  background-color: var(--cru-clickable-primary-hover-color);
 }
 
 .app-bar a:focus {
-  background-color: var(--cru-button-primary-focus-color);
+  background-color: var(--cru-clickable-primary-focus-color);
 }
 
 .app-bar a:active {
-  background-color: var(--cru-button-primary-active-color);
+  background-color: var(--cru-clickable-primary-active-color);
+}
+
+/* the current page */
+.app-bar a.active {
+  background-color: var(--cru-clickable-primary-focus-color);
 }
 
 .app-bar .app-bar-avatar img {
diff --git a/FrontEnd/src/views/common/AppBar.tsx b/FrontEnd/src/views/common/AppBar.tsx
index dacd608a..b9ea825b 100644
--- a/FrontEnd/src/views/common/AppBar.tsx
+++ b/FrontEnd/src/views/common/AppBar.tsx
@@ -59,7 +59,7 @@ export default function AppBar() {
         isCollapse && "collapse",
       )}
     >
-      <Link to="/" className="app-bar-brand active" onClick={collapse}>
+      <Link to="/" className="app-bar-brand" onClick={collapse}>
         <TimelineLogo className="app-bar-brand-icon" />
         Timeline
       </Link>
@@ -91,12 +91,7 @@ export default function AppBar() {
       </div>
 
       {isMobile && (
-        <IconButton
-          icon="list"
-          className="toggler"
-          color="on-surface"
-          onClick={toggleCollapse}
-        />
+        <IconButton icon="list" className="toggler" onClick={toggleCollapse} />
       )}
     </nav>
   );
diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css
index 301910c6..6d655eb9 100644
--- a/FrontEnd/src/views/common/Card.css
+++ b/FrontEnd/src/views/common/Card.css
@@ -1,10 +1,20 @@
 .cru-card {
   border-radius: var(--cru-card-border-radius);
-  border: 2px solid var(--cru-card-border-color);
-  background-color: var(--cru-card-background-color);
   transition: all 0.3s;
 }
 
-.cru-card-no-background {
+.cru-card-background-none {
+  background-color: transparent;
+}
+
+.cru-card-background-solid {
   background-color: var(--cru-background-color);
 }
+
+.cru-card-background-grayscale {
+  background-color: var(--cru-container-background-color);
+}
+
+.cru-card-border-color {
+  border: 2px solid var(--cru-card-border-color);
+}
diff --git a/FrontEnd/src/views/common/Card.tsx b/FrontEnd/src/views/common/Card.tsx
index fb29f728..a8f0d3cc 100644
--- a/FrontEnd/src/views/common/Card.tsx
+++ b/FrontEnd/src/views/common/Card.tsx
@@ -7,12 +7,14 @@ import "./Card.css";
 interface CardProps extends ComponentPropsWithoutRef<"div"> {
   containerRef?: Ref<HTMLDivElement>;
   color?: ThemeColor;
-  noBackground?: boolean;
+  border?: "color" | "none";
+  background?: "color" | "solid" | "grayscale" | "none";
 }
 
 export default function Card({
   color,
-  noBackground,
+  background,
+  border,
   className,
   children,
   containerRef,
@@ -24,7 +26,8 @@ export default function Card({
       className={classNames(
         "cru-card",
         `cru-card-${color ?? "primary"}`,
-        noBackground && "cru-card-no-background",
+        `cru-card-border-${border ?? "color"}`,
+        `cru-card-background-${background ?? "solid"}`,
         className,
       )}
       {...otherProps}
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index c6b180c4..1da70f0e 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -9,23 +9,23 @@
 
 .cru-button:not(.outline) {
   color: var(--cru-push-button-text-color);
-  background-color: var(--cru-button-normal-color);
-  border-color: var(--cru-button-normal-color);
+  background-color: var(--cru-clickable-normal-color);
+  border-color: var(--cru-clickable-normal-color);
 }
 
 .cru-button:not(.outline):hover {
-  background-color: var(--cru-button-hover-color);
-  border-color: var(--cru-button-hover-color);
+  background-color: var(--cru-clickable-hover-color);
+  border-color: var(--cru-clickable-hover-color);
 }
 
 .cru-button:not(.outline):focus {
-  background-color: var(--cru-button-focus-color);
-  border-color: var(--cru-button-focus-color);
+  background-color: var(--cru-clickable-focus-color);
+  border-color: var(--cru-clickable-focus-color);
 }
 
 .cru-button:not(.outline):active {
-  background-color: var(--cru-button-active-color);
-  border-color: var(--cru-button-active-color);
+  background-color: var(--cru-clickable-active-color);
+  border-color: var(--cru-clickable-active-color);
 }
 
 .cru-button:not(.outline):disabled {
@@ -37,28 +37,28 @@
 
 
 .cru-button.outline {
-  color: var(--cru-button-normal-color);
-  border-color: var(--cru-button-normal-color);
+  color: var(--cru-clickable-normal-color);
+  border-color: var(--cru-clickable-normal-color);
   background-color: transparent;
 }
 
 .cru-button.outline:hover {
-  color: var(--cru-button-hover-color);
-  border-color: var(--cru-button-hover-color);
+  color: var(--cru-clickable-hover-color);
+  border-color: var(--cru-clickable-hover-color);
 }
 
 .cru-button.outline:focus {
-  color: var(--cru-button-focus-color);
-  border-color: var(--cru-button-focus-color);
+  color: var(--cru-clickable-focus-color);
+  border-color: var(--cru-clickable-focus-color);
 }
 
 .cru-button.outline:active {
-  color: var(--cru-button-active-color);
-  border-color: var(--cru-button-active-color);
+  color: var(--cru-clickable-active-color);
+  border-color: var(--cru-clickable-active-color);
 }
 
 .cru-button.outline:disabled {
-  color: var(--cru-button-disabled-color);
-  border-color: var(--cru-button-disabled-color);
+  color: var(--cru-clickable-disabled-color);
+  border-color: var(--cru-clickable-disabled-color);
   cursor: auto;
-}
\ No newline at end of file
+}
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
index 573055cf..6c38e130 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -34,7 +34,7 @@ export default function Button(props: ButtonProps) {
       ref={buttonRef}
       className={classNames(
         "cru-button",
-        `cru-button-${color ?? "primary"}`,
+        `cru-clickable-${color ?? "primary"}`,
         outline && "outline",
         className,
       )}
diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css
index 7151f6de..2050946c 100644
--- a/FrontEnd/src/views/common/button/FlatButton.css
+++ b/FrontEnd/src/views/common/button/FlatButton.css
@@ -3,25 +3,25 @@
   padding: 0.4em 0.8em;
   transition: all 0.5s;
   border-radius: 0.2em;
-  background-color: var(--cru-flat-button-background-normal-color);
+  background-color: var(--cru-clickable-grayscale-normal-color);
   border: 1px none;
-  color: var(--cru-button-normal-color);
+  color: var(--cru-clickable-normal-color);
   cursor: pointer;
 }
 
 .cru-flat-button:hover {
-  background-color: var(--cru-flat-button-background-hover-color);
+  background-color: var(--cru-clickable-grayscale-hover-color);
 }
 
 .cru-flat-button:focus {
-  background-color: var(--cru-flat-button-background-focus-color);
+  background-color: var(--cru-clickable-grayscale-focus-color);
 }
 
 .cru-flat-button:active {
-  background-color: var(--cru-flat-button-background-active-color);
+  background-color: var(--cru-clickable-grayscale-active-color);
 }
 
 .cru-flat-button:disabled {
-  color: var(--cru-button-disabled-color);
+  color: var(--cru-clickable-disabled-color);
   cursor: auto;
 }
\ No newline at end of file
diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
index 20ca7432..9f074dd6 100644
--- a/FrontEnd/src/views/common/button/FlatButton.tsx
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -24,8 +24,8 @@ export default function FlatButton(props: FlatButtonProps) {
     <button
       ref={buttonRef}
       className={classNames(
-        `cru-button-${color ?? "primary"}`,
         "cru-flat-button",
+        `cru-clickable-${color ?? "primary"}`,
         className,
       )}
       {...otherProps}
diff --git a/FrontEnd/src/views/common/button/IconButton.css b/FrontEnd/src/views/common/button/IconButton.css
index 09f29415..a3747201 100644
--- a/FrontEnd/src/views/common/button/IconButton.css
+++ b/FrontEnd/src/views/common/button/IconButton.css
@@ -1,5 +1,5 @@
 .cru-icon-button {
-  color: var(--cru-button-normal-color);
+  color: var(--cru-clickable-normal-color);
   font-size: 1.4rem;
   background: none;
   border: none;
@@ -9,19 +9,19 @@
 }
 
 .cru-icon-button:hover {
-  color: var(--cru-button-hover-color);
+  color: var(--cru-clickable-hover-color);
 }
 
 .cru-icon-button:focus {
-  color: var(--cru-button-focus-color);
+  color: var(--cru-clickable-focus-color);
 }
 
 .cru-icon-button:active {
-  color: var(--cru-button-active-color);
+  color: var(--cru-clickable-active-color);
 }
 
 .cru-flat-button:disabled {
-  color: var(--cru-button-disabled-color);
+  color: var(--cru-clickable-disabled-color);
   cursor: auto;
 }
 
diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/views/common/button/IconButton.tsx
index 126f4263..95c58887 100644
--- a/FrontEnd/src/views/common/button/IconButton.tsx
+++ b/FrontEnd/src/views/common/button/IconButton.tsx
@@ -7,7 +7,7 @@ import "./IconButton.css";
 
 interface IconButtonProps extends ComponentPropsWithoutRef<"i"> {
   icon: string;
-  color?: ThemeColor;
+  color?: ThemeColor | "grayscale";
   large?: boolean;
   disabled?: boolean; // TODO: Not implemented
 }
@@ -19,7 +19,7 @@ export default function IconButton(props: IconButtonProps) {
     <button
       className={classNames(
         "cru-icon-button",
-        `cru-button-${color ?? "primary"}`,
+        `cru-clickable-${color ?? "grayscale"}`,
         large && "large",
         "bi-" + icon,
         className,
diff --git a/FrontEnd/src/views/common/button/LoadingButton.css b/FrontEnd/src/views/common/button/LoadingButton.css
index 2819168e..23fadd3d 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.css
+++ b/FrontEnd/src/views/common/button/LoadingButton.css
@@ -8,6 +8,6 @@
 }
 
 .cru-loading-button-loading {
-  color: var(--cru-button-normal-color) !important;
-  border-color: var(--cru-button-normal-color) !important;
-}
+  color: var(--cru-clickable-normal-color) !important;
+  border-color: var(--cru-clickable-normal-color) !important;
+}
\ No newline at end of file
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index 30b020cd..7e7d08e6 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -27,7 +27,7 @@ export default function LoadingButton(props: LoadingButtonProps) {
       disabled={disabled || loading}
       className={classNames(
         "cru-button outline cru-loading-button",
-        `cru-button-${color ?? "primary"}`,
+        `cru-clickable-${color ?? "primary"}`,
         loading && "cru-loading-button-loading",
         className,
       )}
diff --git a/FrontEnd/src/views/common/list/ListContainer.css b/FrontEnd/src/views/common/list/ListContainer.css
index 679f139d..53781834 100644
--- a/FrontEnd/src/views/common/list/ListContainer.css
+++ b/FrontEnd/src/views/common/list/ListContainer.css
@@ -1,4 +1,4 @@
 .cru-list-container {
-  border: 1px solid var(--cru-button-primary-normal-color);
+  border: 1px solid var(--cru-clickable-primary-normal-color);
   border-radius: 5px;
 }
diff --git a/FrontEnd/src/views/common/list/ListItemContainer.css b/FrontEnd/src/views/common/list/ListItemContainer.css
index 4c08a8d1..8d7afa9f 100644
--- a/FrontEnd/src/views/common/list/ListItemContainer.css
+++ b/FrontEnd/src/views/common/list/ListItemContainer.css
@@ -1,3 +1,3 @@
 .cru-list-item-container {
-  border: 1px solid var(--cru-button-primary-normal-color);
+  border: 1px solid var(--cru-clickable-primary-normal-color);
 }
diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css
index b3ca7485..a3f89cc5 100644
--- a/FrontEnd/src/views/common/theme.css
+++ b/FrontEnd/src/views/common/theme.css
@@ -19,6 +19,7 @@
 /* common colors */
 :root {
   --cru-background-color: #ffffff;
+  --cru-container-background-color: hsl(0, 0%, 97%);
   --cru-text-primary-color: #000000;
   --cru-text-secondary-color: #000000;
 }
@@ -26,6 +27,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --cru-background-color: #000000;
+    --cru-container-background-color: hsl(0, 0%, 2%);
     --cru-text-primary-color: #ffffff;
     --cru-text-secondary-color: #ffffff;
   }
@@ -35,71 +37,80 @@
   --cru-body-background-color: var(--cru-background-color);
 }
 
-/* button colors */
+/* clickable color */
 :root {
-  --cru-button-primary-normal-color: var(--cru-primary-color);
-  --cru-button-primary-hover-color: hsl(210, 100%, 60%);
-  --cru-button-primary-focus-color: hsl(210, 100%, 60%);
-  --cru-button-primary-active-color: hsl(210, 100%, 70%);
-  --cru-button-secondary-normal-color: var(--cru-secondary-color);
-  --cru-button-secondary-hover-color: hsl(30, 100%, 60%);
-  --cru-button-secondary-focus-color: hsl(30, 100%, 60%);
-  --cru-button-secondary-active-color: hsl(30, 100%, 70%);
-  --cru-button-create-normal-color: var(--cru-create-color);
-  --cru-button-create-hover-color: hsl(120, 100%, 35%);
-  --cru-button-create-focus-color: hsl(120, 100%, 35%);
-  --cru-button-create-active-color: hsl(120, 100%, 35%);
-  --cru-button-danger-normal-color: var(--cru-danger-color);
-  --cru-button-danger-hover-color: hsl(0, 100%, 60%);
-  --cru-button-danger-focus-color: hsl(0, 100%, 60%);
-  --cru-button-danger-active-color: hsl(0, 100%, 70%);
-  --cru-button-disabled-color: hsl(0, 0%, 50%);
-  /* push button colors */
-  --cru-push-button-text-color: #ffffff;
-  --cru-push-button-disabled-text-color: hsl(0, 0%, 80%);
-  /* flat button colors */
-  --cru-flat-button-background-normal-color: #ffffff;
-  --cru-flat-button-background-hover-color: hsl(0, 0%, 90%);
-  --cru-flat-button-background-focus-color: hsl(0, 0%, 90%);
-  --cru-flat-button-background-active-color: hsl(0, 0%, 80%);
+  --cru-clickable-primary-normal-color: var(--cru-primary-color);
+  --cru-clickable-primary-hover-color: hsl(210, 100%, 60%);
+  --cru-clickable-primary-focus-color: hsl(210, 100%, 60%);
+  --cru-clickable-primary-active-color: hsl(210, 100%, 70%);
+  --cru-clickable-secondary-normal-color: var(--cru-secondary-color);
+  --cru-clickable-secondary-hover-color: hsl(30, 100%, 60%);
+  --cru-clickable-secondary-focus-color: hsl(30, 100%, 60%);
+  --cru-clickable-secondary-active-color: hsl(30, 100%, 70%);
+  --cru-clickable-create-normal-color: var(--cru-create-color);
+  --cru-clickable-create-hover-color: hsl(120, 100%, 35%);
+  --cru-clickable-create-focus-color: hsl(120, 100%, 35%);
+  --cru-clickable-create-active-color: hsl(120, 100%, 35%);
+  --cru-clickable-danger-normal-color: var(--cru-danger-color);
+  --cru-clickable-danger-hover-color: hsl(0, 100%, 60%);
+  --cru-clickable-danger-focus-color: hsl(0, 100%, 60%);
+  --cru-clickable-danger-active-color: hsl(0, 100%, 70%);
+  --cru-clickable-grayscale-normal-color: hsl(0, 0%, 100%);
+  --cru-clickable-grayscale-hover-color: hsl(0, 0%, 92%);
+  --cru-clickable-grayscale-focus-color: hsl(0, 0%, 92%);
+  --cru-clickable-grayscale-active-color: hsl(0, 0%, 88%);
+  --cru-clickable-disabled-color: hsl(0, 0%, 50%);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    /* flat button colors */
-    --cru-flat-button-background-normal-color: #000000;
-    --cru-flat-button-background-hover-color: hsl(0, 0%, 20%);
-    --cru-flat-button-background-focus-color: hsl(0, 0%, 20%);
-    --cru-flat-button-background-active-color: hsl(0, 0%, 30%);
+    --cru-clickable-grayscale-normal-color: hsl(0, 0%, 0%);
+    --cru-clickable-grayscale-hover-color: hsl(0, 0%, 10%);
+    --cru-clickable-grayscale-focus-color: hsl(0, 0%, 10%);
+    --cru-clickable-grayscale-active-color: hsl(0, 0%, 20%);
   }
 }
 
-.cru-button-primary {
-  --cru-button-normal-color: var(--cru-button-primary-normal-color);
-  --cru-button-hover-color: var(--cru-button-primary-hover-color);
-  --cru-button-focus-color: var(--cru-button-primary-focus-color);
-  --cru-button-active-color: var(--cru-button-primary-active-color);
+.cru-clickable-primary {
+  --cru-clickable-normal-color: var(--cru-clickable-primary-normal-color);
+  --cru-clickable-hover-color: var(--cru-clickable-primary-hover-color);
+  --cru-clickable-focus-color: var(--cru-clickable-primary-focus-color);
+  --cru-clickable-active-color: var(--cru-clickable-primary-active-color);
 }
 
-.cru-button-secondary {
-  --cru-button-normal-color: var(--cru-button-secondary-normal-color);
-  --cru-button-hover-color: var(--cru-button-secondary-hover-color);
-  --cru-button-focus-color: var(--cru-button-secondary-focus-color);
-  --cru-button-active-color: var(--cru-button-secondary-active-color);
+.cru-clickable-secondary {
+  --cru-clickable-normal-color: var(--cru-clickable-secondary-normal-color);
+  --cru-clickable-hover-color: var(--cru-clickable-secondary-hover-color);
+  --cru-clickable-focus-color: var(--cru-clickable-secondary-focus-color);
+  --cru-clickable-active-color: var(--cru-clickable-secondary-active-color);
 }
 
-.cru-button-create {
-  --cru-button-normal-color: var(--cru-button-create-normal-color);
-  --cru-button-hover-color: var(--cru-button-create-hover-color);
-  --cru-button-focus-color: var(--cru-button-create-focus-color);
-  --cru-button-active-color: var(--cru-button-create-active-color);
+.cru-clickable-create {
+  --cru-clickable-normal-color: var(--cru-clickable-create-normal-color);
+  --cru-clickable-hover-color: var(--cru-clickable-create-hover-color);
+  --cru-clickable-focus-color: var(--cru-clickable-create-focus-color);
+  --cru-clickable-active-color: var(--cru-clickable-create-active-color);
 }
 
-.cru-button-danger {
-  --cru-button-normal-color: var(--cru-button-danger-normal-color);
-  --cru-button-hover-color: var(--cru-button-danger-hover-color);
-  --cru-button-focus-color: var(--cru-button-danger-focus-color);
-  --cru-button-active-color: var(--cru-button-danger-active-color);
+.cru-clickable-danger {
+  --cru-clickable-normal-color: var(--cru-clickable-danger-normal-color);
+  --cru-clickable-hover-color: var(--cru-clickable-danger-hover-color);
+  --cru-clickable-focus-color: var(--cru-clickable-danger-focus-color);
+  --cru-clickable-active-color: var(--cru-clickable-danger-active-color);
+}
+
+.cru-clickable-grayscale {
+  --cru-clickable-normal-color: var(--cru-clickable-grayscale-normal-color);
+  --cru-clickable-hover-color: var(--cru-clickable-grayscale-hover-color);
+  --cru-clickable-focus-color: var(--cru-clickable-grayscale-focus-color);
+  --cru-clickable-active-color: var(--cru-clickable-grayscale-active-color);
+}
+
+/* button colors */
+:root {
+  /* push button colors */
+  --cru-push-button-text-color: #ffffff;
+  --cru-push-button-disabled-text-color: hsl(0, 0%, 80%);
 }
 
 /* Card colors */
-- 
cgit v1.2.3