folinhilo/defgov
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mm

Browse Source
This commit is contained in:
folinhilo
2026-03-24 18:22:47 +08:00
parent ef6fe2e16c
commit 3a7b48e483
19 changed files with 163 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
.turbo/cookies/1.cookie
View File

1
.turbo/daemon/934a1a5ec62dbadc-turbo.log.2026-03-23 Normal file
View File

@@ -0,0 +1 @@
2026-03-23T18:36:13.907353Z WARN daemon_server: turborepo_lib::commands::daemon: daemon already running

6
apps/ui-site/src/App.tsx
View File

@@ -1,11 +1,11 @@
import { ThemeProvider } from "@defgov/ui"; import { Skin } from "@defgov/ui";
import { ButtonGallery } from "./gallery/ButtonGallery"; import { ButtonGallery } from "./gallery/ButtonGallery";
const App = () => { const App = () => {
return ( return (
<ThemeProvider> <Skin>
<ButtonGallery /> <ButtonGallery />
</ThemeProvider> </Skin>
); );
}; };

62
apps/ui-site/src/gallery/ButtonGallery.tsx
View File

@@ -6,11 +6,67 @@ export const ButtonGallery = () => {
return ( return (
<OuterWrap> <OuterWrap>
<InnerWrap> <InnerWrap>
<Button variant="filled" icon={<DownloadSvg />}> <Button variant="filled" icon={<DownloadSvg />} size="md">
Button
</Button>
<Button variant="filled" icon={<DownloadSvg />} size="lg">
Button
</Button>
<Button variant="filled" icon={<DownloadSvg />} size="xl">
Button
</Button>
</InnerWrap>
<InnerWrap>
<Button variant="filled" brand="default">
Buttun
</Button>{" "}
<Button variant="outline" brand="default">
Buttun
</Button>{" "}
<Button variant="subtle" brand="default">
Buttun
</Button>
<Button variant="filled" brand="success">
Buttun
</Button>{" "}
<Button variant="outline" brand="success">
Buttun
</Button>{" "}
<Button variant="subtle" brand="success">
Buttun
</Button>
</InnerWrap>
<InnerWrap>
<Button variant="filled" brand="danger">
Buttun
</Button>{" "}
<Button variant="outline" brand="danger">
Buttun
</Button>{" "}
<Button variant="subtle" brand="danger">
Buttun
</Button>
<Button variant="filled" brand="warning">
Buttun
</Button>{" "}
<Button variant="outline" brand="warning">
Buttun
</Button>{" "}
<Button variant="subtle" brand="warning">
Buttun
</Button>
</InnerWrap>
<InnerWrap>
<Button variant="filled" brand="info">
Buttun
</Button>{" "}
<Button variant="outline" brand="info">
Buttun
</Button>{" "}
<Button variant="subtle" brand="info">
Buttun Buttun
</Button> </Button>
<Button variant="outline">Buttun</Button>
<Button variant="subtle">Buttun</Button>
</InnerWrap> </InnerWrap>
</OuterWrap> </OuterWrap>
); );

7
packages/ui/src/common/Box.tsx
View File

@@ -1,5 +1,4 @@
import React from "react"; import React from "react";
import { useThemeContext } from "./ThemeProvider/useThemeContext";
import { cn } from "tailwind-variants"; import { cn } from "tailwind-variants";
import type { CommonProps } from "@/common/CommonProps"; import type { CommonProps } from "@/common/CommonProps";
@@ -23,12 +22,8 @@ const Box = <C extends React.ElementType = "div">(
) => { ) => {
const { as: Component = "div", children, className, ...rest } = props; const { as: Component = "div", children, className, ...rest } = props;
const { themeClass } = useThemeContext();
if (!themeClass) {
throw new Error("Box must be used within a ThemeProvider");
}
const boxRootClass = cn(themeClass, className); const boxRootClass = cn( className);
return ( return (
<Component ref={ref} className={boxRootClass} {...(rest as any)}> <Component ref={ref} className={boxRootClass} {...(rest as any)}>

10
packages/ui/src/common/Skin.tsx Normal file
View File

@@ -0,0 +1,10 @@
import type { CommonProps } from "./CommonProps";
type SkinProps = CommonProps & {
theme?: "light" | "dark";
};
export const Skin = (props: SkinProps) => {
const { theme = "light", children } = props;
return <div className={theme}>{children}</div>;
};

9
packages/ui/src/common/ThemeProvider/ThemeContext.ts
View File

@@ -1,9 +0,0 @@
import { createContext } from "react";
export type Theme = "light" | "dark";
export const ThemeContext = createContext<{
theme?: Theme;
toggleTheme?: () => void;
themeClass?: string;
} | null>(null);

32
packages/ui/src/common/ThemeProvider/ThemeProvider.tsx
View File

@@ -1,32 +0,0 @@
import { useState, type ReactNode } from "react";
import { type Theme, ThemeContext } from "./ThemeContext";
import { cn } from "tailwind-variants";
type ThemeProviderProps = {
children?: ReactNode;
defaultTheme?: Theme;
};
export const ThemeProvider = ({
children,
defaultTheme,
}: ThemeProviderProps) => {
const [theme, setTheme] = useState<Theme>(defaultTheme || "light");
const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light");
const frameworkClass = "dg";
const themeClass = cn(frameworkClass, theme);
return (
<ThemeContext.Provider value={{ theme, toggleTheme, themeClass }}>
<div
className={"dg-theme-provider"}
style={
theme == "light" ? { background: "white" } : { background: "black" }
}
>
{children}
</div>
</ThemeContext.Provider>
);
};

8
packages/ui/src/common/ThemeProvider/useThemeContext.ts
View File

@@ -1,8 +0,0 @@
import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";
export function useThemeContext() {
const context = useContext(ThemeContext);
if (!context) throw new Error("useTheme must be used within ThemeProvider");
return context;
}

15
packages/ui/src/component/button/Button.tsx
View File

@@ -2,15 +2,17 @@
import * as BUI from "@base-ui/react/button"; import * as BUI from "@base-ui/react/button";
import { cn } from "tailwind-variants"; import { cn } from "tailwind-variants";
import type { CommonProps } from "@/common/CommonProps"; import type { CommonProps } from "@/common/CommonProps";
import { itemRootRecipe } from "@/styles/recipe/ItemRoot.recipe"; import { itemSizeRecipe } from "@/styles/recipe/ItemSize.recipe";
import { variantRecipe } from "@/styles/recipe/variant.recipe"; import { variantRecipe } from "@/styles/recipe/variant.recipe";
import type { ReactNode } from "react"; import type { ReactNode } from "react";
import { inlineRootRecipe } from "@/styles/recipe/IinlineRoot.recipe"; import { inlineSizeRecipe } from "@/styles/recipe/IinlineSize.recipe";
import { Slot } from "@/common/Slot"; import { Slot } from "@/common/Slot";
type ButtonProps = CommonProps & { type ButtonProps = CommonProps & {
size?: "md" | "lg" | "xl"; size?: "md" | "lg" | "xl";
variant?: "filled" | "outline" | "subtle"; variant?: "filled" | "outline" | "subtle";
shape?: "rounded" | "square" | "circle";
brand?: "success" | "danger" | "info" | "warning" | "default";
loading?: boolean; loading?: boolean;
icon?: ReactNode; icon?: ReactNode;
iconOnly?: boolean; iconOnly?: boolean;
@@ -23,6 +25,8 @@ export const Button = (props: ButtonProps) => {
children, children,
size = "md", size = "md",
variant = "filled", variant = "filled",
shape = "rounded",
brand,
loading, loading,
disabled, disabled,
icon, icon,
@@ -30,13 +34,16 @@ export const Button = (props: ButtonProps) => {
hideIcon = false, hideIcon = false,
} = props; } = props;
const currentBrand =
brand == undefined ? (variant == "filled" ? "info" : "default") : brand;
const buttonCls = cn( const buttonCls = cn(
itemRootRecipe({ size }), itemSizeRecipe({ size, brand: currentBrand, shape }),
variantRecipe({ variant, disabled: loading || disabled }), variantRecipe({ variant, disabled: loading || disabled }),
className, className,
); );
const iconCls = cn(inlineRootRecipe({ size, iconOnly })); const iconCls = cn(inlineSizeRecipe({ size, iconOnly: true }));
return ( return (
<BUI.Button className={buttonCls} disabled={loading || disabled}> <BUI.Button className={buttonCls} disabled={loading || disabled}>

3
packages/ui/src/index.css
View File

@@ -1,6 +1,5 @@
@import "tailwindcss"; @import "tailwindcss";
@import './styles/theme/theme-base.css'; @import './styles/theme/global.css';
@import './styles/theme/theme-variant.css';
@import './styles/utility/brand.css'; @import './styles/utility/brand.css';
@import './styles/utility/gap.css'; @import './styles/utility/gap.css';
@import './styles/utility/height.css'; @import './styles/utility/height.css';

8
packages/ui/src/index.ts
View File

@@ -24,11 +24,9 @@ export * from './assets/svg/VolumeMediumSvg';
export * from './assets/svg/VolumeMuteSvg'; export * from './assets/svg/VolumeMuteSvg';
export * from './common/Box'; export * from './common/Box';
export * from './common/CommonProps'; export * from './common/CommonProps';
export * from './common/Skin';
export * from './common/Slot'; export * from './common/Slot';
export * from './common/ThemeProvider/ThemeContext';
export * from './common/ThemeProvider/ThemeProvider';
export * from './common/ThemeProvider/useThemeContext';
export * from './component/button/Button'; export * from './component/button/Button';
export * from './styles/recipe/IinlineRoot.recipe'; export * from './styles/recipe/IinlineSize.recipe';
export * from './styles/recipe/ItemRoot.recipe'; export * from './styles/recipe/ItemSize.recipe';
export * from './styles/recipe/variant.recipe'; export * from './styles/recipe/variant.recipe';

2
packages/ui/src/styles/recipe/IinlineRoot.recipe.ts → packages/ui/src/styles/recipe/IinlineSize.recipe.ts
View File

@@ -1,6 +1,6 @@
import { tv } from "tailwind-variants"; import { tv } from "tailwind-variants";
export const inlineRootRecipe = tv({ export const inlineSizeRecipe = tv({
base: "relative overflow-hidden flex flex-nowrap", base: "relative overflow-hidden flex flex-nowrap",
variants: { variants: {
size: { size: {

6
packages/ui/src/styles/recipe/ItemRoot.recipe.ts → packages/ui/src/styles/recipe/ItemSize.recipe.ts
View File

@@ -1,7 +1,7 @@
import { tv } from "tailwind-variants"; import { tv } from "tailwind-variants";
export const itemRootRecipe = tv({ export const itemSizeRecipe = tv({
base: "relative select-none overflow-hidden flex flex-nowrap", base: "relative select-none overflow-hidden flex flex-nowrap justify-center items-center",
variants: { variants: {
size: { size: {
xs: "text-xs h-xs px-xs gap-xs", xs: "text-xs h-xs px-xs gap-xs",
@@ -21,7 +21,7 @@ export const itemRootRecipe = tv({
danger: "brand-danger", danger: "brand-danger",
info: "brand-info", info: "brand-info",
warning: "brand-warning", warning: "brand-warning",
emphasis: "brand-emphasis", default: "brand-default",
}, },
iconOnly: { iconOnly: {
true: "", true: "",

32
packages/ui/src/styles/theme/global.css Normal file
View File

@@ -0,0 +1,32 @@
@theme {
--color-transparent: transparent;
--danger-bg: var(--color-red-600);
--danger-bg-high-hover: var(--color-red-500);
--danger-bg-high-active: var(--color-red-400);
--danger-bg-low-hover: var(--color-red-100);
--danger-bg-low-active: var(--color-red-200);
--success-bg: var(--color-emerald-600);
--success-bg-high-hover: var(--color-emerald-500);
--success-bg-high-active: var(--color-emerald-400);
--success-bg-low-hover: var(--color-emerald-100);
--success-bg-low-active: var(--color-emerald-200);
--info-bg: var(--color-sky-600);
--info-bg-high-hover: var(--color-sky-500);
--info-bg-high-active: var(--color-sky-400);
--info-bg-low-hover: var(--color-sky-100);
--info-bg-low-active: var(--color-sky-200);
--warning-bg: var(--color-yellow-600);
--warning-bg-high-hover: var(--color-yellow-500);
--warning-bg-high-active: var(--color-yellow-400);
--warning-bg-low-hover: var(--color-yellow-100);
--warning-bg-low-active: var(--color-yellow-200);
--default-bg: var(--color-neutral-800);
--default-bg-high-hover: var(--color-neutral-700);
--default-bg-high-active: var(--color-neutral-600);
--default-bg-low-hover: var(--color-neutral-100);
--default-bg-low-active: var(--color-neutral-200);
}

33
packages/ui/src/styles/theme/theme-base.css
View File

@@ -1,33 +0,0 @@
@theme {
--color-transparent: transparent;
--danger-fg: var(--base-fg);
--danger-bg-low-hover: var(--color-red-100);
--danger-bg-low-active: var(--color-red-200);
--danger-bg: var(--color-red-600);
--danger-bg-high-hover: var(--color-red-700);
--danger-bg-high-active: var(--color-red-800);
--success-fg: var(--base-fg);
--success-bg-low-hover: var(--color-green-100);
--success-bg-low-active: var(--color-green-200);
--success-bg: var(--color-green-600);
--success-bg-high-hover: var(--color-green-700);
--success-bg-high-active: var(--color-green-800);
--info-fg: var(--base-fg);
--info-bg-low-hover: var(--color-sky-100);
--info-bg-low-active: var(--color-sky-200);
--info-bg: var(--color-sky-600);
--info-bg-high-hover: var(--color-sky-700);
--info-bg-high-active: var(--color-sky-800);
--warning-fg: var(--base-fg);
--warning-bg-low-hover: var(--color-amber-100);
--warning-bg-low-active: var(--color-amber-200);
--warning-bg: var(--color-amber-600);
--warning-bg-high-hover: var(--color-amber-700);
--warning-bg-high-active: var(--color-amber-800);
--default-fg: var(--base-fg);
--default-bg-low-hover: var(--color-gray-100);
--default-bg-low-active: var(--color-gray-200);
--default-bg: var(--color-gray-600);
--default-bgr-high-hover: var(--color-gray-700);
--default-bg-high-active: var(--color-gray-800);
}

25
packages/ui/src/styles/theme/theme-variant.css
View File

@@ -1,25 +0,0 @@
@theme {
--filled-fg: var(--color-white);
--filled-fg-hover: var(--color-white);
--filled-fg-active: var(--color-white);
--filled-bg: var(--brand-bg);
--filled-bg-hover: var(--brand-bg-high-hover);
--filled-bg-active: var(--brand-bg-high-active);
--filled-border-color: var(--color-transparent);
--outline-fg: var(--base-fg);
--outline-fg-hover: var(--brand-bg);
--outline-fg-active: var(--brand-bg);
--outline-bg: var(--color-transparent);
--outline-bg-hover: var(--brand-bg-low-hover);
--outline-bg-active: var(--brand-bg-low-active);
--outline-border-color: var(--brand-bg);
--subtle-fg: var(--base-fg);
--subtle-fg-hover: var(--brand-bg);
--subtle-fg-active: var(--brand-bg);
--subtle-bg: var(--color-transparent);
--subtle-bg-hover: var(--brand-bg-low-hover);
--subtle-bg-active: var(--brand-bg-low-active);
--subtle-border-color: var(--color-transparent);
}

20
packages/ui/src/styles/utility/brand.css
View File

@@ -1,35 +1,35 @@
@utility brand-info { @utility brand-info {
--brand-bg-low-hover: var(--info-bg-low-hover);
--brand-bg-low-active: var(--info-bg-low-active);
--brand-bg: var(--info-bg); --brand-bg: var(--info-bg);
--brand-bg-high-hover: var(--info-bg-high-hover); --brand-bg-high-hover: var(--info-bg-high-hover);
--brand-bg-high-active: var(--info-bg-high-active); --brand-bg-high-active: var(--info-bg-high-active);
--brand-bg-low-hover: var(--info-bg-low-hover);
--brand-bg-low-active: var(--info-bg-low-active);
} }
@utility brand-danger { @utility brand-danger {
--brand-bg-low-hover: var(--danger-bg-low-hover);
--brand-bg-low-active: var(--danger-bg-low-active);
--brand-bg: var(--danger-bg); --brand-bg: var(--danger-bg);
--brand-bg-high-hover: var(--danger-bg-high-hover); --brand-bg-high-hover: var(--danger-bg-high-hover);
--brand-bg-high-active: var(--danger-bg-high-active); --brand-bg-high-active: var(--danger-bg-high-active);
--brand-bg-low-hover: var(--danger-bg-low-hover);
--brand-bg-low-active: var(--danger-bg-low-active);
} }
@utility brand-success { @utility brand-success {
--brand-bg-low-hover: var(--success-bg-low-hover);
--brand-bg-low-active: var(--success-bg-low-active);
--brand-bg: var(--success-bg); --brand-bg: var(--success-bg);
--brand-bg-high-hover: var(--success-bg-high-hover); --brand-bg-high-hover: var(--success-bg-high-hover);
--brand-bg-high-active: var(--success-bg-high-active); --brand-bg-high-active: var(--success-bg-high-active);
--brand-bg-low-hover: var(--success-bg-low-hover);
--brand-bg-low-active: var(--success-bg-low-active);
} }
@utility brand-warning { @utility brand-warning {
--brand-bg-low-hover: var(--warning-bg-low-hover);
--brand-bg-low-active: var(--warning-bg-low-active);
--brand-bg: var(--warning-bg); --brand-bg: var(--warning-bg);
--brand-bg-high-hover: var(--warning-bg-high-hover); --brand-bg-high-hover: var(--warning-bg-high-hover);
--brand-bg-high-active: var(--warning-bg-high-active); --brand-bg-high-active: var(--warning-bg-high-active);
--brand-bg-low-hover: var(--warning-bg-low-hover);
--brand-bg-low-active: var(--warning-bg-low-active);
} }
@utility brand-default { @utility brand-default {
--brand-bg-low-hover: var(--default-bg-low-hover);
--brand-bg-low-active: var(--default-bg-low-active);
--brand-bg: var(--default-bg); --brand-bg: var(--default-bg);
--brand-bg-high-hover: var(--default-bg-high-hover); --brand-bg-high-hover: var(--default-bg-high-hover);
--brand-bg-high-active: var(--default-bg-high-active); --brand-bg-high-active: var(--default-bg-high-active);
--brand-bg-low-hover: var(--default-bg-low-hover);
--brand-bg-low-active: var(--default-bg-low-active);
} }

31
packages/ui/src/styles/utility/variant.css
View File

@@ -1,27 +1,44 @@
@utility variant-filled { @utility variant-filled {
--filled-fg: var(--color-white);
--filled-fg-hover: var(--color-white);
--filled-fg-active: var(--color-white);
--filled-bg: var(--brand-bg);
--filled-bg-hover: var(--brand-bg-high-hover);
--filled-bg-active: var(--brand-bg-high-active);
--filled-border-color: var(--color-transparent);
color: var(--filled-fg); color: var(--filled-fg);
background-color: var(--filled-bg); background-color: var(--filled-bg);
border-color: var(--filled-border-color); border-color: var(--filled-border-color);
&:hover { &:hover {
background-color: var(--filled-bg-hover); background-color: var(--filled-bg-hover);
color: var(--filid-fg-hover); color: var(--filled-fg-hover);
} }
&:active { &:active {
background-color: var(--filled-bg-active); background-color: var(--filled-bg-active);
color: var(--filid-fg-active); color: var(--filled-fg-active);
} }
&:focus-visible { &:focus-visible {
background-color: var(--filled-bg-hover); background-color: var(--filled-bg-hover);
color: var(--filid-fg-hover); color: var(--filled-fg-hover);
} }
} }
@utility variant-outline { @utility variant-outline {
--outline-fg: var(--brand-bg);
--outline-fg-hover: var(--brand-bg);
--outline-fg-active: var(--brand-bg);
--outline-bg: var(--color-transparent);
--outline-bg-hover: var(--brand-bg-low-hover);
--outline-bg-active: var(--brand-bg-low-active);
--outline-border-color: var(--brand-bg);
color: var(--outline-fg); color: var(--outline-fg);
background-color: var(--outline-bg); background-color: var(--outline-bg);
border: solid 1px;
border-color: var(--outline-border-color); border-color: var(--outline-border-color);
&:hover { &:hover {
@@ -41,6 +58,14 @@
} }
@utility variant-subtle { @utility variant-subtle {
--subtle-fg: var(--brand-bg);
--subtle-fg-hover: var(--brand-bg);
--subtle-fg-active: var(--brand-bg);
--subtle-bg: var(--color-transparent);
--subtle-bg-hover: var(--brand-bg-low-hover);
--subtle-bg-active: var(--brand-bg-low-active);
--subtle-border-color: var(--color-transparent);
color: var(--subtle-fg); color: var(--subtle-fg);
background-color: var(--subtle-bg); background-color: var(--subtle-bg);
border-color: var(--subtle-border-color); border-color: var(--subtle-border-color);