aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--FrontEnd/src/views/common/button/Button.css45
-rw-r--r--FrontEnd/src/views/common/button/Button.tsx2
-rw-r--r--FrontEnd/src/views/common/button/IconButton.css31
-rw-r--r--FrontEnd/src/views/common/button/IconButton.tsx4
-rw-r--r--FrontEnd/src/views/common/common.ts3
-rw-r--r--FrontEnd/src/views/common/theme.css111
6 files changed, 86 insertions, 110 deletions
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index 14b019b9..4e755dba 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -5,60 +5,59 @@
border-radius: 0.2em;
border: 1px solid;
cursor: pointer;
- background-color: var(--cru-surface-color);
}
.cru-button:not(.outline) {
- color: var(--cru-key-on-color);
- background-color: var(--cru-key-color);
- border-color: var(--cru-key-color);
+ color: var(--cru--push-button-text-color);
+ background-color: var(--cru-button-normal-color);
+ border-color: var(--cru-button-normal-color);
}
.cru-button:not(.outline):hover {
- background-color: var(--cru-key-1-color);
- border-color: var(--cru-key-1-color);
+ background-color: var(--cru-button-hover-color);
+ border-color: var(--cru-button-hover-color);
}
.cru-button:not(.outline):focus {
- background-color: var(--cru-key-1-color);
- border-color: var(--cru-key-1-color);
+ background-color: var(--cru-button-focus-color);
+ border-color: var(--cru-button-focus-color);
}
.cru-button:not(.outline):active {
- background-color: var(--cru-key-2-color);
- border-color: var(--cru-key-2-color);
+ background-color: var(--cru-button-active-color);
+ border-color: var(--cru-button-active-color);
}
.cru-button:not(.outline):disabled {
- background-color: var(--cru-surface-on-color);
- border-color: var(--cru-surface-on-color);
+ color: var(--cru-push-button-disabled-text-color);
+ background-color: var(--cru-push-button-disabled-color);
+ border-color: var(--cru-push-button-disabled-color);
cursor: auto;
}
.cru-button.outline {
- color: var(--cru-key-color);
- border-color: var(--cru-key-color);
+ color: var(--cru-button-normal-color);
+ border-color: var(--cru-button-normal-color);
}
.cru-button.outline:hover {
- color: var(--cru-key-1-color);
- border-color: var(--cru-key-1-color);
+ color: var(--cru-button-hover-color);
+ border-color: var(--cru-button-hover-color);
}
.cru-button.outline:focus {
- color: var(--cru-key-1-color);
- border-color: var(--cru-key-1-color);
+ color: var(--cru-button-focus-color);
+ border-color: var(--cru-button-focus-color);
}
.cru-button.outline:active {
- color: var(--cru-key-2-color);
- border-color: var(--cru-key-2-color);
+ color: var(--cru-button-active-color);
+ border-color: var(--cru-button-active-color);
}
.cru-button.outline:not(.cru-loading-button):disabled {
- color: var(--cru-surface-on-color);
- border-color: var(--cru-surface-on-color);
- background-color: white;
+ color: var(--cru-button-disabled-color);
+ border-color: var(--cru-button-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 e01023c0..02d00ee5 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -33,7 +33,7 @@ export default function Button(props: ButtonProps) {
<button
ref={buttonRef}
className={classNames(
- color && `cru-${color}`,
+ color && `cru-${color}-button`,
"cru-button",
outline && "outline",
className,
diff --git a/FrontEnd/src/views/common/button/IconButton.css b/FrontEnd/src/views/common/button/IconButton.css
index a1ac67f7..09f29415 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-key-color);
+ color: var(--cru-button-normal-color);
font-size: 1.4rem;
background: none;
border: none;
@@ -9,43 +9,22 @@
}
.cru-icon-button:hover {
- color: var(--cru-key-1-color);
+ color: var(--cru-button-hover-color);
}
.cru-icon-button:focus {
- color: var(--cru-key-1-color);
+ color: var(--cru-button-focus-color);
}
.cru-icon-button:active {
- color: var(--cru-key-2-color);
+ color: var(--cru-button-active-color);
}
.cru-flat-button:disabled {
- color: var(--cru-surface-on-color);
+ color: var(--cru-button-disabled-color);
cursor: auto;
}
.cru-icon-button.large {
font-size: 1.6rem;
}
-
-.cru-icon-button.on-surface {
- color: var(--cru-surface-color);
-}
-
-.cru-icon-button.on-surface:hover {
- color: var(--cru-surface-1-color);
-}
-
-.cru-icon-button.on-surface:focus {
- color: var(--cru-surface-1-color);
-}
-
-.cru-icon-button.on-surface:active {
- color: var(--cru-surface-2-color);
-}
-
-.cru-flat-button.on-surface:disabled {
- color: var(--cru-surface-on-color);
- cursor: auto;
-} \ No newline at end of file
diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/views/common/button/IconButton.tsx
index 2d7e86e5..d3a8b240 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 | "on-surface";
+ color?: ThemeColor;
large?: boolean;
}
@@ -20,7 +20,7 @@ export default function IconButton(props: IconButtonProps) {
"cru-icon-button",
large && "large",
"bi-" + icon,
- color && (color === "on-surface" ? "on-surface" : `cru-${color}`),
+ color && `cru-button-${color}`,
className,
)}
{...otherProps}
diff --git a/FrontEnd/src/views/common/common.ts b/FrontEnd/src/views/common/common.ts
index 4ad41edc..7af2643b 100644
--- a/FrontEnd/src/views/common/common.ts
+++ b/FrontEnd/src/views/common/common.ts
@@ -4,9 +4,8 @@ export { c, convertI18nText, useC } from "@/common";
export const themeColors = [
"primary",
"secondary",
- "tertiary",
"danger",
- "success",
+ "create",
] as const;
export type ThemeColor = (typeof themeColors)[number];
diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css
index 47034d95..150f35cf 100644
--- a/FrontEnd/src/views/common/theme.css
+++ b/FrontEnd/src/views/common/theme.css
@@ -12,19 +12,10 @@
/* theme colors */
:root {
- --cru-primary-color: #ffffff;
- --cru-secondary-color: #ffffff;
- --cru-create-color: #ffffff;
- --cru-danger-color: #ffffff;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --cru-primary-color: #ffffff;
- --cru-secondary-color: #ffffff;
- --cru-create-color: #ffffff;
- --cru-danger-color: #ffffff;
- }
+ --cru-primary-color: hsl(210, 100%, 50%);
+ --cru-secondary-color: hsl(30, 100%, 50%);
+ --cru-create-color: hsl(120, 100%, 25%);
+ --cru-danger-color: hsl(0, 100%, 50%);
}
/* common colors */
@@ -37,58 +28,66 @@
/* button colors */
:root {
--cru-button-primary-normal-color: var(--cru-primary-color);
- --cru-button-primary-hover-color: #ffffff;
- --cru-button-primary-focus-color: #ffffff;
- --cru-button-primary-active-color: #ffffff;
+ --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: #ffffff;
- --cru-button-secondary-focus-color: #ffffff;
- --cru-button-secondary-active-color: #ffffff;
+ --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: #ffffff;
- --cru-button-create-focus-color: #ffffff;
- --cru-button-create-active-color: #ffffff;
+ --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: #ffffff;
- --cru-button-danger-focus-color: #ffffff;
- --cru-button-danger-active-color: #ffffff;
- --cru-button-disabled-color: #ffffff;
+ --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, 80%);
/* push button colors */
- --push-button-text: #ffffff;
- --push-button-disabled-text: #ffffff;
+ --cru-push-button-text-color: #ffffff;
+ --cru-push-button-disabled-text-color: hsl(0, 0, 80%);
/* flat button colors */
- --flat-button-background-normal: #ffffff;
- --flat-button-background-hover: #ffffff;
- --flat-button-background-focus: #ffffff;
- --flat-button-background-active: #ffffff;
+ --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%);
}
@media (prefers-color-scheme: dark) {
:root {
- --cru-button-primary-normal-color: var(--cru-primary-color);
- --cru-button-primary-hover-color: #ffffff;
- --cru-button-primary-focus-color: #ffffff;
- --cru-button-primary-active-color: #ffffff;
- --cru-button-secondary-normal-color: var(--cru-secondary-color);
- --cru-button-secondary-hover-color: #ffffff;
- --cru-button-secondary-focus-color: #ffffff;
- --cru-button-secondary-active-color: #ffffff;
- --cru-button-create-normal-color: var(--cru-create-color);
- --cru-button-create-hover-color: #ffffff;
- --cru-button-create-focus-color: #ffffff;
- --cru-button-create-active-color: #ffffff;
- --cru-button-danger-normal-color: var(--cru-danger-color);
- --cru-button-danger-hover-color: #ffffff;
- --cru-button-danger-focus-color: #ffffff;
- --cru-button-danger-active-color: #ffffff;
- --cru-button-disabled-color: #ffffff;
- /* push button colors */
- --push-button-text: #ffffff;
- --push-button-disabled-text: #ffffff;
/* flat button colors */
- --flat-button-background-normal: #ffffff;
- --flat-button-background-hover: #ffffff;
- --flat-button-background-focus: #ffffff;
- --flat-button-background-active: #ffffff;
+ --cru-flat-button-background-normal-color: #ffffff;
+ --cru-flat-button-background-hover-color: #ffffff;
+ --cru-flat-button-background-focus-color: #ffffff;
+ --cru-flat-button-background-active-color: #ffffff;
}
}
+
+.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-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-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-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);
+}
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 14:32:44 +0000