diff options
Diffstat (limited to 'FrontEnd')
21 files changed, 161 insertions, 135 deletions
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 */ |