aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src/components')
-rw-r--r--FrontEnd/src/components/common.ts2
-rw-r--r--FrontEnd/src/components/dialog/Dialog.css4
-rw-r--r--FrontEnd/src/components/dialog/Dialog.tsx39
-rw-r--r--FrontEnd/src/components/theme-color.css173
-rw-r--r--FrontEnd/src/components/theme.css100
5 files changed, 75 insertions, 243 deletions
diff --git a/FrontEnd/src/components/common.ts b/FrontEnd/src/components/common.ts
index 171ebc48..835a8b4a 100644
--- a/FrontEnd/src/components/common.ts
+++ b/FrontEnd/src/components/common.ts
@@ -1,3 +1,5 @@
+import "./index.css";
+
export type { Text, I18nText } from "~src/common";
export { UiLogicError, c, convertI18nText, useC } from "~src/common";
diff --git a/FrontEnd/src/components/dialog/Dialog.css b/FrontEnd/src/components/dialog/Dialog.css
index e4c61440..f25309ae 100644
--- a/FrontEnd/src/components/dialog/Dialog.css
+++ b/FrontEnd/src/components/dialog/Dialog.css
@@ -17,7 +17,7 @@
right: 0;
top: 0;
bottom: 0;
- background-color: var(--cru-surface-dim-color);
+ background-color: var(--cru-dialog-overlay-color);
opacity: 0.8;
}
@@ -27,7 +27,7 @@
margin: 2em auto;
- border: var(--cru-key-container-color) 1px solid;
+ border: var(--cru-dialog-container-background-color) 1px solid;
border-radius: 5px;
padding: 1.5em;
background-color: var(--cru-surface-color);
diff --git a/FrontEnd/src/components/dialog/Dialog.tsx b/FrontEnd/src/components/dialog/Dialog.tsx
index b1d66704..bdba9198 100644
--- a/FrontEnd/src/components/dialog/Dialog.tsx
+++ b/FrontEnd/src/components/dialog/Dialog.tsx
@@ -1,6 +1,5 @@
import { ReactNode, useRef } from "react";
import ReactDOM from "react-dom";
-import { CSSTransition } from "react-transition-group";
import classNames from "classnames";
import { ThemeColor } from "../common";
@@ -16,42 +15,34 @@ if (optionalPortalElement == null) {
const portalElement = optionalPortalElement;
interface DialogProps {
- color?: ThemeColor;
children?: ReactNode;
disableCloseOnClickOnOverlay?: boolean;
}
export default function Dialog({
- color,
children,
disableCloseOnClickOnOverlay,
}: DialogProps) {
- color = color ?? "primary";
-
const closeDialog = useCloseDialog();
- const nodeRef = useRef(null);
+ const lastPointerDownIdRef = useRef<number | null>(null);
return ReactDOM.createPortal(
- <CSSTransition
- nodeRef={nodeRef}
- mountOnEnter
- unmountOnExit
- in
- timeout={300}
- classNames="cru-dialog"
- >
+ <div className={classNames("cru-dialog-overlay")}>
<div
- ref={nodeRef}
- className={classNames("cru-dialog-overlay", `cru-${color}`)}
- >
- <div
- className="cru-dialog-background"
- onClick={disableCloseOnClickOnOverlay ? undefined : closeDialog}
- />
- <div className="cru-dialog-container">{children}</div>
- </div>
- </CSSTransition>,
+ className="cru-dialog-background"
+ onPointerDown={(e) => {
+ lastPointerDownIdRef.current = e.pointerId;
+ }}
+ onPointerUp={(e) => {
+ if (lastPointerDownIdRef.current === e.pointerId) {
+ if (!disableCloseOnClickOnOverlay) closeDialog();
+ }
+ lastPointerDownIdRef.current = null;
+ }}
+ />
+ <div className="cru-dialog-container">{children}</div>
+ </div>,
portalElement,
);
}
diff --git a/FrontEnd/src/components/theme-color.css b/FrontEnd/src/components/theme-color.css
deleted file mode 100644
index 24a7e267..00000000
--- a/FrontEnd/src/components/theme-color.css
+++ /dev/null
@@ -1,173 +0,0 @@
-/* Generated by theme-generator.ts */
-
-:root {
- --cru-primary-color: hsl(210 100% 40%);
- --cru-primary-1-color: hsl(210 100% 37%);
- --cru-primary-2-color: hsl(210 100% 34%);
- --cru-primary-on-color: hsl(210 100% 100%);
- --cru-primary-container-color: hsl(210 100% 90%);
- --cru-primary-container-1-color: hsl(210 100% 80%);
- --cru-primary-container-2-color: hsl(210 100% 70%);
- --cru-primary-on-container-color: hsl(210 100% 10%);
- --cru-secondary-color: hsl(40 100% 40%);
- --cru-secondary-1-color: hsl(40 100% 37%);
- --cru-secondary-2-color: hsl(40 100% 34%);
- --cru-secondary-on-color: hsl(40 100% 100%);
- --cru-secondary-container-color: hsl(40 100% 90%);
- --cru-secondary-container-1-color: hsl(40 100% 80%);
- --cru-secondary-container-2-color: hsl(40 100% 70%);
- --cru-secondary-on-container-color: hsl(40 100% 10%);
- --cru-tertiary-color: hsl(160 100% 40%);
- --cru-tertiary-1-color: hsl(160 100% 37%);
- --cru-tertiary-2-color: hsl(160 100% 34%);
- --cru-tertiary-on-color: hsl(160 100% 100%);
- --cru-tertiary-container-color: hsl(160 100% 90%);
- --cru-tertiary-container-1-color: hsl(160 100% 80%);
- --cru-tertiary-container-2-color: hsl(160 100% 70%);
- --cru-tertiary-on-container-color: hsl(160 100% 10%);
- --cru-danger-color: hsl(0 100% 40%);
- --cru-danger-1-color: hsl(0 100% 37%);
- --cru-danger-2-color: hsl(0 100% 34%);
- --cru-danger-on-color: hsl(0 100% 100%);
- --cru-danger-container-color: hsl(0 100% 90%);
- --cru-danger-container-1-color: hsl(0 100% 80%);
- --cru-danger-container-2-color: hsl(0 100% 70%);
- --cru-danger-on-container-color: hsl(0 100% 10%);
- --cru-success-color: hsl(120 60% 40%);
- --cru-success-1-color: hsl(120 60% 37%);
- --cru-success-2-color: hsl(120 60% 34%);
- --cru-success-on-color: hsl(120 60% 100%);
- --cru-success-container-color: hsl(120 60% 90%);
- --cru-success-container-1-color: hsl(120 60% 80%);
- --cru-success-container-2-color: hsl(120 60% 70%);
- --cru-success-on-container-color: hsl(120 60% 10%);
- --cru-surface-dim-color: hsl(0 0% 87%);
- --cru-surface-color: hsl(0 0% 98%);
- --cru-surface-1-color: hsl(0 0% 90%);
- --cru-surface-2-color: hsl(0 0% 82%);
- --cru-surface-bright-color: hsl(0 0% 98%);
- --cru-surface-container-lowest-color: hsl(0 0% 100%);
- --cru-surface-container-low-color: hsl(0 0% 96%);
- --cru-surface-container-color: hsl(0 0% 94%);
- --cru-surface-container-high-color: hsl(0 0% 92%);
- --cru-surface-container-highest-color: hsl(0 0% 90%);
- --cru-surface-on-color: hsl(0 0% 10%);
- --cru-surface-on-variant-color: hsl(0 0% 30%);
- --cru-surface-outline-color: hsl(0 0% 50%);
- --cru-surface-outline-variant-color: hsl(0 0% 80%);
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --cru-primary-color: hsl(210 100% 80%);
- --cru-primary-1-color: hsl(210 100% 75%);
- --cru-primary-2-color: hsl(210 100% 68%);
- --cru-primary-on-color: hsl(210 100% 20%);
- --cru-primary-container-color: hsl(210 100% 30%);
- --cru-primary-container-1-color: hsl(210 100% 25%);
- --cru-primary-container-2-color: hsl(210 100% 20%);
- --cru-primary-on-container-color: hsl(210 100% 90%);
- --cru-secondary-color: hsl(40 100% 80%);
- --cru-secondary-1-color: hsl(40 100% 75%);
- --cru-secondary-2-color: hsl(40 100% 68%);
- --cru-secondary-on-color: hsl(40 100% 20%);
- --cru-secondary-container-color: hsl(40 100% 30%);
- --cru-secondary-container-1-color: hsl(40 100% 25%);
- --cru-secondary-container-2-color: hsl(40 100% 20%);
- --cru-secondary-on-container-color: hsl(40 100% 90%);
- --cru-tertiary-color: hsl(160 100% 80%);
- --cru-tertiary-1-color: hsl(160 100% 75%);
- --cru-tertiary-2-color: hsl(160 100% 68%);
- --cru-tertiary-on-color: hsl(160 100% 20%);
- --cru-tertiary-container-color: hsl(160 100% 30%);
- --cru-tertiary-container-1-color: hsl(160 100% 25%);
- --cru-tertiary-container-2-color: hsl(160 100% 20%);
- --cru-tertiary-on-container-color: hsl(160 100% 90%);
- --cru-danger-color: hsl(0 100% 80%);
- --cru-danger-1-color: hsl(0 100% 75%);
- --cru-danger-2-color: hsl(0 100% 68%);
- --cru-danger-on-color: hsl(0 100% 20%);
- --cru-danger-container-color: hsl(0 100% 30%);
- --cru-danger-container-1-color: hsl(0 100% 25%);
- --cru-danger-container-2-color: hsl(0 100% 20%);
- --cru-danger-on-container-color: hsl(0 100% 90%);
- --cru-success-color: hsl(120 60% 80%);
- --cru-success-1-color: hsl(120 60% 75%);
- --cru-success-2-color: hsl(120 60% 68%);
- --cru-success-on-color: hsl(120 60% 20%);
- --cru-success-container-color: hsl(120 60% 30%);
- --cru-success-container-1-color: hsl(120 60% 25%);
- --cru-success-container-2-color: hsl(120 60% 20%);
- --cru-success-on-container-color: hsl(120 60% 90%);
- --cru-surface-dim-color: hsl(0 0% 6%);
- --cru-surface-color: hsl(0 0% 6%);
- --cru-surface-1-color: hsl(0 0% 25%);
- --cru-surface-2-color: hsl(0 0% 40%);
- --cru-surface-bright-color: hsl(0 0% 24%);
- --cru-surface-container-lowest-color: hsl(0 0% 4%);
- --cru-surface-container-low-color: hsl(0 0% 10%);
- --cru-surface-container-color: hsl(0 0% 12%);
- --cru-surface-container-high-color: hsl(0 0% 17%);
- --cru-surface-container-highest-color: hsl(0 0% 22%);
- --cru-surface-on-color: hsl(0 0% 90%);
- --cru-surface-on-variant-color: hsl(0 0% 80%);
- --cru-surface-outline-color: hsl(0 0% 60%);
- --cru-surface-outline-variant-color: hsl(0 0% 30%);
- }
-}
-
-.cru-primary {
- --cru-key-color: var(--cru-primary-color);
- --cru-key-1-color: var(--cru-primary-1-color);
- --cru-key-2-color: var(--cru-primary-2-color);
- --cru-key-on-color: var(--cru-primary-on-color);
- --cru-key-container-color: var(--cru-primary-container-color);
- --cru-key-container-1-color: var(--cru-primary-container-1-color);
- --cru-key-container-2-color: var(--cru-primary-container-2-color);
- --cru-key-on-container-color: var(--cru-primary-on-container-color);
-}
-
-.cru-secondary {
- --cru-key-color: var(--cru-secondary-color);
- --cru-key-1-color: var(--cru-secondary-1-color);
- --cru-key-2-color: var(--cru-secondary-2-color);
- --cru-key-on-color: var(--cru-secondary-on-color);
- --cru-key-container-color: var(--cru-secondary-container-color);
- --cru-key-container-1-color: var(--cru-secondary-container-1-color);
- --cru-key-container-2-color: var(--cru-secondary-container-2-color);
- --cru-key-on-container-color: var(--cru-secondary-on-container-color);
-}
-
-.cru-tertiary {
- --cru-key-color: var(--cru-tertiary-color);
- --cru-key-1-color: var(--cru-tertiary-1-color);
- --cru-key-2-color: var(--cru-tertiary-2-color);
- --cru-key-on-color: var(--cru-tertiary-on-color);
- --cru-key-container-color: var(--cru-tertiary-container-color);
- --cru-key-container-1-color: var(--cru-tertiary-container-1-color);
- --cru-key-container-2-color: var(--cru-tertiary-container-2-color);
- --cru-key-on-container-color: var(--cru-tertiary-on-container-color);
-}
-
-.cru-danger {
- --cru-key-color: var(--cru-danger-color);
- --cru-key-1-color: var(--cru-danger-1-color);
- --cru-key-2-color: var(--cru-danger-2-color);
- --cru-key-on-color: var(--cru-danger-on-color);
- --cru-key-container-color: var(--cru-danger-container-color);
- --cru-key-container-1-color: var(--cru-danger-container-1-color);
- --cru-key-container-2-color: var(--cru-danger-container-2-color);
- --cru-key-on-container-color: var(--cru-danger-on-container-color);
-}
-
-.cru-success {
- --cru-key-color: var(--cru-success-color);
- --cru-key-1-color: var(--cru-success-1-color);
- --cru-key-2-color: var(--cru-success-2-color);
- --cru-key-on-color: var(--cru-success-on-color);
- --cru-key-container-color: var(--cru-success-container-color);
- --cru-key-container-1-color: var(--cru-success-container-1-color);
- --cru-key-container-2-color: var(--cru-success-container-2-color);
- --cru-key-on-container-color: var(--cru-success-on-container-color);
-}
-
diff --git a/FrontEnd/src/components/theme.css b/FrontEnd/src/components/theme.css
index 6ceb369f..d7e30d1a 100644
--- a/FrontEnd/src/components/theme.css
+++ b/FrontEnd/src/components/theme.css
@@ -1,5 +1,3 @@
-@import "./theme-color.css";
-
:root {
--cru-default-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--cru-page-padding: 1em 2em;
@@ -10,26 +8,26 @@
/* theme colors */
:root {
- --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%);
+ --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 */
:root {
- --cru-background-color: hsl(0, 0%, 100%);
- --cru-container-background-color: hsl(0, 0%, 97%);
- --cru-text-primary-color: hsl(0, 0%, 0%);
- --cru-text-secondary-color: hsl(0, 0%, 38%);
+ --cru-background-color: hsl(0 0% 100%);
+ --cru-container-background-color: hsl(0 0% 97%);
+ --cru-text-primary-color: hsl(0 0% 0%);
+ --cru-text-secondary-color: hsl(0 0% 38%);
}
@media (prefers-color-scheme: dark) {
:root {
- --cru-background-color: hsl(0, 0%, 0%);
- --cru-container-background-color: hsl(0, 0%, 2%);
- --cru-text-primary-color: hsl(0, 0%, 100%);
- --cru-text-secondary-color: hsl(0, 0%, 85%);
+ --cru-background-color: hsl(0 0% 0%);
+ --cru-container-background-color: hsl(0 0% 2%);
+ --cru-text-primary-color: hsl(0 0% 100%);
+ --cru-text-secondary-color: hsl(0 0% 85%);
}
}
@@ -37,37 +35,51 @@
--cru-body-background-color: var(--cru-background-color);
}
+/* dialog color */
+
+:root {
+ --cru-dialog-overlay-color: hsl(0 0% 100%);
+ --cru-dialog-container-background-color: hsl(0 0% 100%);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --cru-dialog-overlay-color: hsl(0 0% 0%);
+ --cru-dialog-container-background-color: hsl(0 0% 0%);
+ }
+}
+
/* clickable color */
:root {
--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-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-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-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%);
+ --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 {
- --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-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%);
}
}
@@ -110,19 +122,19 @@
:root {
/* push button colors */
--cru-push-button-text-color: #ffffff;
- --cru-push-button-disabled-text-color: hsl(0, 0%, 80%);
+ --cru-push-button-disabled-text-color: hsl(0 0% 80%);
}
/* Card colors */
:root {
- --cru-card-background-primary-color: hsl(210, 100%, 50%);
- --cru-card-border-primary-color: hsl(210, 100%, 50%);
- --cru-card-background-secondary-color: hsl(30, 100%, 50%);
- --cru-card-border-secondary-color: hsl(30, 100%, 50%);
- --cru-card-background-create-color: hsl(120, 100%, 25%);
- --cru-card-border-create-color: hsl(120, 100%, 25%);
- --cru-card-background-danger-color: hsl(0, 100%, 50%);
- --cru-card-border-danger-color: hsl(0, 100%, 50%);
+ --cru-card-background-primary-color: hsl(210 100% 50%);
+ --cru-card-border-primary-color: hsl(210 100% 50%);
+ --cru-card-background-secondary-color: hsl(30 100% 50%);
+ --cru-card-border-secondary-color: hsl(30 100% 50%);
+ --cru-card-background-create-color: hsl(120 100% 25%);
+ --cru-card-border-create-color: hsl(120 100% 25%);
+ --cru-card-background-danger-color: hsl(0 100% 50%);
+ --cru-card-border-danger-color: hsl(0 100% 50%);
}
.cru-card-primary {
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 14:33:42 +0000