nikitapozd-projects/blog-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: nikitapozd-projects:70fa864f6dd70dc7bac687ccb47043ca374b123b
Branches Tags
nikitapozd-projects:master
...
compare: nikitapozd-projects:master
Branches Tags
nikitapozd-projects:master

7 Commits
70fa864f6d ... master

Author SHA1 Message Date
Nikita Pozdniakov
8642a5bce1 Add Button design system and Storybook Solid setup
Some checks failed
CI TEST (Vault secrets) / build (push) Failing after 15s
Details
2026-05-27 15:10:38 +03:00
Nikita Pozdniakov
7d3d87b1e5 add Button component and Storybook configuration
Some checks failed
CI TEST (Vault secrets) / build (push) Failing after 9s
Details
2026-05-04 11:38:50 +03:00
Nikita Pozdniakov
3105d23e42 move TypeScript lint-staged and @astrojs/check to devDependencies
Some checks failed
CI TEST (Vault secrets) / build (push) Failing after 7s
Details
2026-04-29 15:45:04 +03:00
Nikita Pozdniakov
8cef9f08d2 fix lint-staged and lint scripts
Some checks failed
CI TEST (Vault secrets) / build (push) Failing after 7s
Details
2026-04-29 15:38:36 +03:00
Nikita Pozdniakov
62ac18f4fb remove unused script 2026-04-29 15:33:42 +03:00
Nikita Pozdniakov
5544b226d9 Fix pre commit hook 2026-04-29 15:31:26 +03:00
Nikita Pozdniakov
d45fdaf21a Enable strict TypeScript compiler checks 2026-04-29 15:26:16 +03:00
45 changed files with 5600 additions and 764 deletions
Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -28,3 +28,6 @@ pnpm-debug.log*
# zed setting folder # zed setting folder
.zed/ .zed/
*storybook.log
storybook-static

2
.husky/pre-commit
View File

@@ -1,2 +1,2 @@
#!/usr/bin/env sh #!/usr/bin/env sh
corepack pnpm run precommit ./node_modules/.bin/lint-staged

1
.npmrc
View File

@@ -1 +0,0 @@
package-lock=false

20
.storybook/main.ts Normal file
View File

@@ -0,0 +1,20 @@
import tailwindcss from "@tailwindcss/vite";
import type { StorybookConfig } from "storybook-solidjs-vite";
const config: StorybookConfig = {
stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
framework: "storybook-solidjs-vite",
viteFinal: async (config) => {
config.plugins ||= [];
config.plugins.push(tailwindcss());
return config;
},
core: {
disableTelemetry: true,
disableWhatsNewNotifications: true,
enableCrashReports: false,
},
};
export default config;

44
.storybook/preview.tsx Normal file
View File

@@ -0,0 +1,44 @@
import type { Preview } from "storybook-solidjs-vite";
import "../src/app/styles/global.css";
const preview: Preview = {
globalTypes: {
theme: {
name: "Theme",
description: "Global theme for components",
defaultValue: "light",
toolbar: {
icon: "mirror",
items: [
{ value: "light", title: "Light" },
{ value: "dark", title: "Dark" },
],
dynamicTitle: true,
},
},
},
decorators: [
(Story, context) => {
document.documentElement.dataset.theme = context.globals.theme ?? "light";
return (
<div style={{ padding: "16px" }}>
<Story />
</div>
);
},
],
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
a11y: {
test: "todo",
},
},
};
export default preview;

3
astro.config.mjs
View File

@@ -1,4 +1,5 @@
// @ts-check // @ts-check
import solid from "@astrojs/solid-js";
import tailwindcss from "@tailwindcss/vite"; import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "astro/config"; import { defineConfig } from "astro/config";
@@ -19,4 +20,6 @@ export default defineConfig({
alias, alias,
}, },
}, },
server: {},
integrations: [solid({ devtools: true })],
}); });

28
package.json
View File

@@ -13,31 +13,41 @@
"preview": "astro preview", "preview": "astro preview",
"astro": "astro", "astro": "astro",
"preinstall": "node ./scripts/enforce-pnpm.mjs", "preinstall": "node ./scripts/enforce-pnpm.mjs",
"lint": "astro check --minimumFailingSeverity warning && biome check .", "lint": "astro check && biome check .",
"format": "biome format . --write", "format": "biome format . --write",
"prepare": "husky", "prepare": "husky",
"precommit": "lint-staged", "ci": "astro check && biome ci .",
"ci": "astro check && biome ci ." "storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
}, },
"lint-staged": { "lint-staged": {
"*.{js,jsx,ts,tsx,json,jsonc,css,scss}": [ "*.{js,jsx,ts,tsx,json,jsonc,css,scss}": [
"biome check --no-errors-on-unmatched" "biome check --no-errors-on-unmatched"
], ],
"*.{astro}": [ "*.{astro}": [
"astro check --minimumFailingSeverity warning" "astro check"
] ]
}, },
"dependencies": { "dependencies": {
"@astrojs/check": "^0.9.9", "@astrojs/solid-js": "^6.0.1",
"@tailwindcss/vite": "^4.2.4", "@tailwindcss/vite": "^4.2.4",
"@webtui/css": "^0.1.7", "@webtui/css": "^0.1.7",
"astro": "^6.1.8", "astro": "^6.3.1",
"tailwindcss": "^4.2.4", "solid-js": "^1.9.13",
"typescript": "^6.0.3" "tailwindcss": "^4.2.4"
}, },
"devDependencies": { "devDependencies": {
"@astrojs/check": "^0.9.9",
"@biomejs/biome": "2.4.13", "@biomejs/biome": "2.4.13",
"@storybook/addon-a11y": "^10.4.1",
"@storybook/addon-docs": "^10.4.1",
"husky": "^9.1.7", "husky": "^9.1.7",
"lint-staged": "^16.4.0" "lint-staged": "^16.4.0",
"sass": "^1.100.0",
"solid-devtools": "^0.34.5",
"storybook": "^10.4.1",
"storybook-solidjs-vite": "^10.0.13",
"typescript": "^6.0.3",
"vite-plugin-solid": "^2.11.12"
} }
} }

4623
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

25
src/app/layouts/BaseLayout/BaseLayout.astro
View File

@@ -9,7 +9,7 @@ interface Props {
const { title = "NikitaPozd Dev", description = "" } = Astro.props; const { title = "NikitaPozd Dev", description = "" } = Astro.props;
--- ---
<html lang="ru" data-webtui-theme="dark"> <html lang="ru" data-theme="dark">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -17,9 +17,28 @@ const { title = "NikitaPozd Dev", description = "" } = Astro.props;
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<meta name="description" content={description} /> <meta name="description" content={description} />
<title>{title}</title> <title>{title}</title>
<script is:inline>
const storageKey = "theme";
const root = document.documentElement;
const savedTheme = localStorage.getItem(storageKey);
if (savedTheme === "light" || savedTheme === "dark") {
root.dataset.theme = savedTheme;
} else {
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
root.dataset.theme = prefersDark ? "dark" : "light";
}
</script>
</head> </head>
<body> <body>
<slot /> <slot />
</body>
</html>
<script is:inline>
window.__setTheme = (theme) => {
document.documentElement.dataset.theme = theme;
localStorage.setItem("theme", theme);
};
</script>
</body>
</html>

14
src/app/styles/global.css
View File

@@ -1,15 +1,3 @@
@layer theme, base, components, utilities;
@import "tailwindcss"; @import "tailwindcss";
@import "@webtui/css/base.css" layer(base); @import "../../shared/designSystem/styles/global.css";
/* utilities */
@import "@webtui/css/utils/box.css" layer(utilities);
/* components */
@import "@webtui/css/components/accordion.css" layer(components);
@import "@webtui/css/components/badge.css" layer(components);
@import "@webtui/css/components/button.css" layer(components);
@import "@webtui/css/components/dialog.css" layer(components);
@import "@webtui/css/components/pre.css" layer(components);
@import "@webtui/css/components/typography.css" layer(components);

21
src/pageModules/home/ui/HomePage.astro
View File

@@ -1,13 +1,12 @@
<main class="mx-auto flex min-h-screen max-w-6xl items-center justify-center px-4 py-8 md:px-6"> ---
<section class="box flex w-full max-w-xl flex-col gap-4 border border-cyan/20 bg-black/40 p-6 text-center shadow-[0_0_30px_rgba(34,211,238,0.12)]"> import { Button } from "@shared/designSystem";
<span is-="badge" variant-="cyan">home page</span> ---
<h1 class="text-4xl text-white md:text-5xl">Hello WebTUI</h1>
<p class="text-sm leading-7 text-zinc-300 md:text-base"> <main class="mx-auto flex min-h-screen max-w-6xl flex-col items-center gap-10 px-4 py-8 md:px-6">
Базовая главная страница собрана как page module и подключается маршрутом из <section class="box flex w-full flex-col gap-6 border border-cyan/20 p-6">
`src/pages/index.astro`. <h1>Home Page</h1>
</p> <Button>
<div class="flex justify-center"> Hello
<button is-="button" variant-="cyan">Открыть демо</button> </Button>
</div>
</section> </section>
</main> </main>

0
src/shared/.gitkeep
View File

41
src/shared/designSystem/components/Button/helpers/getButtonClassNames.ts Normal file
View File

@@ -0,0 +1,41 @@
import styles from "../styles/Button.module.scss";
import type { ButtonProps } from "../types/Button.types.ts";
type ButtonVariant = NonNullable<ButtonProps["variant"]>;
type ButtonColor = NonNullable<ButtonProps["color"]>;
type ButtonSize = NonNullable<ButtonProps["size"]>;
type GetButtonClassNamesParams = {
variant?: ButtonVariant;
color?: ButtonColor;
size?: ButtonSize;
fullWidth?: boolean;
loading?: boolean;
disabled?: boolean;
class?: string;
};
export const getButtonClassNames = ({
variant = "primary",
color = "dark",
size = 44,
fullWidth = false,
loading = false,
disabled = false,
class: className = "",
}: GetButtonClassNamesParams): string => {
return [
styles.root,
styles[`size-${size}`],
styles[`color-${color}-${variant}`],
disabled ? styles[`disabled-${variant}`] : "",
fullWidth && styles.block,
loading && styles.isLoading,
className,
]
.filter(Boolean)
.join(" ");
};
export const buttonContentClassName = styles.content;
export const buttonSpinnerClassName = styles.spinner;

7
src/shared/designSystem/components/Button/helpers/isLinkButton.ts Normal file
View File

@@ -0,0 +1,7 @@
import type { ButtonAsLinkProps, ButtonProps } from "../types/Button.types.ts";
export const isLinkButton = (
props: ButtonProps,
): props is ButtonAsLinkProps => {
return props.as === "a";
};

2
src/shared/designSystem/components/Button/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export type { ButtonProps } from "./types/Button.types.ts";
export { Button } from "./ui/Button.tsx";

242
src/shared/designSystem/components/Button/stories/Button.stories.tsx Normal file
View File

@@ -0,0 +1,242 @@
import type { Meta, StoryObj } from "storybook-solidjs-vite";
import { Button } from "../ui/Button.tsx";
const variants = ["primary", "secondary", "outlined", "text"] as const;
const colors = ["blue", "dark", "red", "cyan"] as const;
const sizes = [36, 44, 52, 60] as const;
const meta = {
title: "shared/designSystem/Button",
component: Button,
args: {
children: "Button",
as: "button",
variant: "primary",
color: "cyan",
size: 52,
fullWidth: false,
loading: false,
disabled: false,
type: "button",
},
argTypes: {
as: {
control: "radio",
options: ["button", "a"],
},
variant: {
control: "select",
options: variants,
},
color: {
control: "select",
options: colors,
},
size: {
control: "select",
options: sizes,
},
fullWidth: {
control: "boolean",
},
loading: {
control: "boolean",
},
disabled: {
control: "boolean",
},
type: {
control: "select",
options: ["button", "submit", "reset"],
},
href: {
control: "text",
},
},
} satisfies Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Playground: Story = {};
export const Primary: Story = {
args: {
children: "Primary button",
variant: "primary",
color: "cyan",
},
};
export const Secondary: Story = {
args: {
children: "Secondary button",
variant: "secondary",
color: "cyan",
},
};
export const Outlined: Story = {
args: {
children: "Outlined button",
variant: "outlined",
color: "cyan",
},
};
export const Text: Story = {
args: {
children: "Text button",
variant: "text",
color: "cyan",
},
};
export const Loading: Story = {
args: {
children: "Loading",
loading: true,
size: 52,
},
};
export const Disabled: Story = {
args: {
children: "Disabled",
disabled: true,
size: 52,
},
};
export const AsLink: Story = {
args: {
as: "a",
href: "/demo",
children: "Open demo",
variant: "text",
color: "cyan",
},
};
export const FullWidth: Story = {
args: {
children: "Continue",
fullWidth: true,
size: 52,
},
parameters: {
layout: "padded",
},
render: (args) => (
<div style={{ width: "320px" }}>
<Button {...args} />
</div>
),
};
export const Sizes: Story = {
render: () => (
<div
style={{
display: "flex",
"flex-wrap": "wrap",
gap: "12px",
"align-items": "center",
}}
>
{sizes.map((size) => (
<Button size={size} variant="primary" color="cyan">
size {size}
</Button>
))}
</div>
),
};
export const Colors: Story = {
render: () => (
<div style={{ display: "flex", "flex-wrap": "wrap", gap: "12px" }}>
{colors.map((color) => (
<Button color={color} variant="primary" size={52}>
primary / {color}
</Button>
))}
</div>
),
};
export const VariantMatrix: Story = {
render: () => (
<div style={{ display: "flex", "flex-direction": "column", gap: "24px" }}>
{variants.map((variant) => (
<section
style={{
display: "flex",
"flex-direction": "column",
gap: "12px",
}}
>
<h3 style={{ margin: 0 }}>{variant}</h3>
<div style={{ display: "flex", "flex-wrap": "wrap", gap: "12px" }}>
{colors.map((color) => (
<Button variant={variant} color={color} size={52}>
{variant} / {color}
</Button>
))}
</div>
</section>
))}
</div>
),
};
export const LoadingMatrix: Story = {
render: () => (
<div style={{ display: "flex", "flex-direction": "column", gap: "24px" }}>
{variants.map((variant) => (
<section
style={{
display: "flex",
"flex-direction": "column",
gap: "12px",
}}
>
<h3 style={{ margin: 0 }}>{variant} loading</h3>
<div style={{ display: "flex", "flex-wrap": "wrap", gap: "12px" }}>
{colors.map((color) => (
<Button variant={variant} color={color} loading size={52}>
{variant} / {color}
</Button>
))}
</div>
</section>
))}
</div>
),
};
export const DisabledMatrix: Story = {
render: () => (
<div style={{ display: "flex", "flex-direction": "column", gap: "24px" }}>
{variants.map((variant) => (
<section
style={{
display: "flex",
"flex-direction": "column",
gap: "12px",
}}
>
<h3 style={{ margin: 0 }}>{variant} disabled</h3>
<div style={{ display: "flex", "flex-wrap": "wrap", gap: "12px" }}>
{colors.map((color) => (
<Button variant={variant} color={color} disabled size={52}>
{variant} / {color}
</Button>
))}
</div>
</section>
))}
</div>
),
};

195
src/shared/designSystem/components/Button/styles/Button.module.scss Normal file
View File

@@ -0,0 +1,195 @@
$button-colors: "dark", "blue", "red", "cyan";
$button-variants: "primary", "secondary", "outlined", "text";
$button-sizes: 36, 44, 52, 60;
.root {
display: flex;
width: fit-content;
position: relative;
align-items: center;
justify-content: center;
gap: var(--ds-space-4);
border-width: 1px;
border-style: solid;
outline: none;
font-weight: 600;
line-height: 1;
vertical-align: middle;
white-space: nowrap;
user-select: none;
cursor: pointer;
border-radius: var(--ds-radius-1);
color: var(--button-current-color);
background-color: var(--button-current-background);
border-color: var(--button-current-border);
transition:
background-color var(--ds-duration-fast) var(--ds-ease-in-out),
border-color var(--ds-duration-fast) var(--ds-ease-in-out),
color var(--ds-duration-fast) var(--ds-ease-in-out),
box-shadow var(--ds-duration-fast) var(--ds-ease-in-out),
transform var(--ds-duration-fast) var(--ds-ease-in-out);
}
.root:focus-visible {
box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.35);
}
.content {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: var(--ds-space-4);
}
.block {
display: flex;
width: 100%;
}
.isLoading {
cursor: wait;
pointer-events: none;
}
.isLoading .content {
color: transparent;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
inline-size: var(--ds-icon-size-16);
block-size: var(--ds-icon-size-16);
transform: translate(-50%, -50%);
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 999px;
animation: button-spin 0.8s linear infinite;
}
@keyframes button-spin {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* sizes */
.size-36 {
height: var(--ds-container-size-36);
padding-inline: var(--ds-space-12);
font-size: var(--ds-font-size-14);
}
.size-44 {
height: var(--ds-container-size-44);
padding-inline: var(--ds-space-16);
font-size: var(--ds-font-size-14);
}
.size-52 {
height: var(--ds-container-size-52);
padding-inline: var(--ds-space-20);
font-size: var(--ds-font-size-16);
}
.size-60 {
height: var(--ds-container-size-60);
padding-inline: var(--ds-space-24);
font-size: var(--ds-font-size-16);
}
/* variant + color bindings */
@each $color in $button-colors {
.color-#{$color}-text {
height: fit-content;
padding: 0;
}
@each $variant in $button-variants {
.color-#{$color}-#{$variant} {
--button-current-color: var(--button-#{$variant}-#{$color}-default-color);
--button-current-background: var(
--button-#{$variant}-#{$color}-default-background
);
--button-current-border: var(
--button-#{$variant}-#{$color}-default-border,
transparent
);
}
.color-#{$color}-#{$variant}:hover,
.color-#{$color}-#{$variant}:focus-visible {
--button-current-color: var(
--button-#{$variant}-#{$color}-hover-color,
var(--button-#{$variant}-#{$color}-default-color)
);
--button-current-background: var(
--button-#{$variant}-#{$color}-hover-background,
var(--button-#{$variant}-#{$color}-default-background)
);
--button-current-border: var(
--button-#{$variant}-#{$color}-hover-border,
var(--button-#{$variant}-#{$color}-default-border, transparent)
);
}
.color-#{$color}-#{$variant}:active {
--button-current-color: var(
--button-#{$variant}-#{$color}-active-color,
var(
--button-#{$variant}-#{$color}-hover-color,
var(--button-#{$variant}-#{$color}-default-color)
)
);
--button-current-background: var(
--button-#{$variant}-#{$color}-active-background,
var(
--button-#{$variant}-#{$color}-hover-background,
var(--button-#{$variant}-#{$color}-default-background)
)
);
--button-current-border: var(
--button-#{$variant}-#{$color}-active-border,
var(
--button-#{$variant}-#{$color}-hover-border,
var(--button-#{$variant}-#{$color}-default-border, transparent)
)
);
}
}
}
/* disabled by variant */
@each $variant in $button-variants {
.disabled-#{$variant} {
cursor: default;
pointer-events: none;
}
@each $color in $button-colors {
.color-#{$color}-#{$variant}.disabled-#{$variant},
.color-#{$color}-#{$variant}[aria-disabled="true"] {
--button-current-color: var(
--button-#{$variant}-#{$color}-disabled-color,
var(--button-#{$variant}-#{$color}-default-color)
);
--button-current-background: var(
--button-#{$variant}-#{$color}-disabled-background,
var(--button-#{$variant}-#{$color}-default-background)
);
--button-current-border: var(
--button-#{$variant}-#{$color}-disabled-border,
var(--button-#{$variant}-#{$color}-default-border, transparent)
);
}
}
}

40
src/shared/designSystem/components/Button/types/Button.types.ts Normal file
View File

@@ -0,0 +1,40 @@
import type {
ColorValue,
ContainerSizeValue,
VariantValue,
} from "@shared/designSystem/constants";
import type { JSX, ParentProps } from "solid-js";
export type CommonProps = ParentProps<{
variant?: VariantValue;
size?: ContainerSizeValue;
color?: Extract<ColorValue, "dark" | "cyan" | "blue" | "red">;
fullWidth?: boolean;
loading?: boolean;
disabled?: boolean;
class?: string;
leftIcon?: JSX.Element;
rightIcon?: JSX.Element;
}>;
export type ButtonAsButtonProps = CommonProps &
Omit<
JSX.ButtonHTMLAttributes<HTMLButtonElement>,
"class" | "disabled" | "type" | "href"
> & {
as?: "button";
type?: "button" | "submit" | "reset";
href?: never;
};
export type ButtonAsLinkProps = CommonProps &
Omit<
JSX.AnchorHTMLAttributes<HTMLAnchorElement>,
"class" | "href" | "type"
> & {
as: "a";
href: string;
type?: never;
};
export type ButtonProps = ButtonAsButtonProps | ButtonAsLinkProps;

13
src/shared/designSystem/components/Button/ui/Button.tsx Normal file
View File

@@ -0,0 +1,13 @@
import type { Component } from "solid-js";
import { isLinkButton } from "../helpers/isLinkButton.ts";
import type { ButtonProps } from "../types/Button.types.ts";
import { ButtonAsButton } from "./ButtonAsButton.tsx";
import { ButtonAsLink } from "./ButtonAsLink.tsx";
export const Button: Component<ButtonProps> = (props) => {
if (isLinkButton(props)) {
return <ButtonAsLink {...props} />;
}
return <ButtonAsButton {...props} />;
};

58
src/shared/designSystem/components/Button/ui/ButtonAsButton.tsx Normal file
View File

@@ -0,0 +1,58 @@
import type { Component } from "solid-js";
import { Show, splitProps } from "solid-js";
import {
buttonContentClassName,
buttonSpinnerClassName,
getButtonClassNames,
} from "../helpers/getButtonClassNames.ts";
import type { ButtonAsButtonProps } from "../types/Button.types.ts";
export const ButtonAsButton: Component<ButtonAsButtonProps> = (props) => {
const [local, rest] = splitProps(props as ButtonAsButtonProps, [
"variant",
"color",
"size",
"fullWidth",
"loading",
"disabled",
"class",
"leftIcon",
"rightIcon",
"children",
"type",
]);
const isLoading = local.loading ?? false;
const isDisabled = local.disabled ?? false;
const classes = getButtonClassNames({
variant: local.variant || "primary",
color: local.color || "cyan",
size: local.size || 44,
fullWidth: local.fullWidth ?? false,
loading: isLoading ?? false,
disabled: isDisabled ?? false,
class: local.class,
});
return (
<button
{...rest}
type={local.type ?? "button"}
class={classes}
disabled={isDisabled}
data-loading={isLoading ? "true" : undefined}
>
<Show
when={!isLoading}
fallback={<span aria-hidden="true" class={buttonSpinnerClassName} />}
>
{local.leftIcon}
<span class={buttonContentClassName}>{local.children}</span>
{local.rightIcon}
</Show>
</button>
);
};

59
src/shared/designSystem/components/Button/ui/ButtonAsLink.tsx Normal file
View File

@@ -0,0 +1,59 @@
import type { Component } from "solid-js";
import { Show, splitProps } from "solid-js";
import {
buttonContentClassName,
buttonSpinnerClassName,
getButtonClassNames,
} from "../helpers/getButtonClassNames.ts";
import type { ButtonAsLinkProps } from "../types/Button.types.ts";
export const ButtonAsLink: Component<ButtonAsLinkProps> = (props) => {
const [local, rest] = splitProps(props as ButtonAsLinkProps, [
"variant",
"color",
"size",
"fullWidth",
"loading",
"disabled",
"class",
"leftIcon",
"rightIcon",
"children",
"type",
"href",
]);
const isLoading = local.loading ?? false;
const isDisabled = (local.disabled ?? false) || isLoading;
const classes = getButtonClassNames({
variant: local.variant || "primary",
color: local.color || "cyan",
size: local.size || 44,
fullWidth: local.fullWidth ?? false,
loading: isLoading ?? false,
class: local.class,
});
return (
<a
{...rest}
href={local.href as string}
class={classes}
aria-disabled={isDisabled ? "true" : undefined}
data-loading={isLoading ? "true" : undefined}
tabIndex={isDisabled ? -1 : undefined}
>
<Show
when={!isLoading}
fallback={<span aria-hidden="true" class={buttonSpinnerClassName} />}
>
{local.leftIcon}
<span class={buttonContentClassName}>{local.children}</span>
{local.rightIcon}
</Show>
</a>
);
};

12
src/shared/designSystem/constants/colors.ts Normal file
View File

@@ -0,0 +1,12 @@
export const colors = {
light: "light",
dark: "dark",
green: "green",
blue: "blue",
orange: "orange",
red: "red",
cyan: "cyan",
} as const;
export type ColorName = keyof typeof colors;
export type ColorValue = (typeof colors)[ColorName];

5
src/shared/designSystem/constants/index.ts Normal file
View File

@@ -0,0 +1,5 @@
export * from "./colors.ts";
export * from "./sizes.ts";
export * from "./spaces.ts";
export * from "./variants.ts";
export * from "./zIndexes.ts";

52
src/shared/designSystem/constants/sizes.ts Normal file
View File

@@ -0,0 +1,52 @@
export const contentSizes = {
s16: 16,
s20: 20,
s24: 24,
s28: 28,
} as const;
export type ContentSizeName = keyof typeof contentSizes;
export type ContentSizeValue = (typeof contentSizes)[ContentSizeName];
export const containerSizes = {
s36: 36,
s44: 44,
s52: 52,
s60: 60,
} as const;
export type ContainerSizeName = keyof typeof containerSizes;
export type ContainerSizeValue = (typeof containerSizes)[ContainerSizeName];
export const fontSizes = {
s8: 8,
s10: 10,
s12: 12,
s14: 14,
s16: 16,
s20: 20,
} as const;
export type FontSizeName = keyof typeof fontSizes;
export type FontSizeValue = (typeof fontSizes)[FontSizeName];
export const borderRadiusSizes = {
s4: 4,
s8: 8,
s12: 12,
s16: 16,
s24: 24,
s40: 40,
} as const;
export type BorderRadiusSizeName = keyof typeof borderRadiusSizes;
export type BorderRadiusSizeValue =
(typeof borderRadiusSizes)[BorderRadiusSizeName];
export const iconSizes = {
s12: 12,
...contentSizes,
} as const;
export type IconSizeName = keyof typeof iconSizes;
export type IconSizeValue = (typeof iconSizes)[IconSizeName];

20
src/shared/designSystem/constants/spaces.ts Normal file
View File

@@ -0,0 +1,20 @@
export const spaces = {
s0: 0,
s2: 2,
s4: 4,
s6: 6,
s8: 8,
s12: 12,
s16: 16,
s20: 20,
s24: 24,
s28: 28,
s32: 32,
s36: 36,
s40: 40,
s48: 48,
s60: 60,
} as const;
export type SpaceName = keyof typeof spaces;
export type SpaceValue = (typeof spaces)[SpaceName];

9
src/shared/designSystem/constants/variants.ts Normal file
View File

@@ -0,0 +1,9 @@
export const variants = {
outlined: "outlined",
primary: "primary",
secondary: "secondary",
text: "text",
} as const;
export type VariantName = keyof typeof variants;
export type VariantValue = (typeof variants)[VariantName];

11
src/shared/designSystem/constants/zIndexes.ts Normal file
View File

@@ -0,0 +1,11 @@
export const zIndexes = {
dropdown: 1060,
sticky: 1020,
fixed: 1030,
modalBackdrop: 1040,
modal: 1050,
tooltip: 1060,
} as const;
export type ZIndexName = keyof typeof zIndexes;
export type ZIndexValue = (typeof zIndexes)[ZIndexName];

1
src/shared/designSystem/index.ts Normal file
View File

@@ -0,0 +1 @@
export { Button } from "./components/Button";

4
src/shared/designSystem/styles/components/button/index.css Normal file
View File

@@ -0,0 +1,4 @@
@import "./primary.css";
@import "./secondary.css";
@import "./outlined.css";
@import "./text.css";

90
src/shared/designSystem/styles/components/button/outlined.css Normal file
View File

@@ -0,0 +1,90 @@
:root {
/* BLUE */
--button-outlined-blue-default-background: transparent;
--button-outlined-blue-hover-background: color-mix(
in srgb,
var(--ds-color-blue-primary) 20%,
transparent
);
--button-outlined-blue-default-color: var(--ds-color-blue-primary);
--button-outlined-blue-active-color: var(--ds-color-blue-primary-hover);
--button-outlined-blue-disabled-color: color-mix(
in srgb,
var(--button-outlined-blue-default-color) 70%,
transparent
);
--button-outlined-blue-default-border: var(--ds-color-blue-primary);
--button-outlined-blue-hover-border: var(--ds-color-blue-primary-hover);
--button-outlined-blue-disabled-border: color-mix(
in srgb,
var(--ds-color-blue-primary) 50%,
transparent
);
/* DARK */
--button-outlined-dark-default-background: transparent;
--button-outlined-dark-hover-background: color-mix(
in srgb,
var(--ds-color-gray-secondary) 20%,
transparent
);
--button-outlined-dark-default-color: var(--ds-theme-text-primary);
--button-outlined-dark-hover-color: var(--ds-theme-text-primary-hover);
--button-outlined-dark-active-color: var(--ds-theme-text-primary-active);
--button-outlined-dark-disabled-color: color-mix(
in srgb,
var(--button-outlined-dark-default-color) 70%,
transparent
);
--button-outlined-dark-default-border: var(--ds-theme-text-primary);
--button-outlined-dark-hover-border: var(--ds-theme-text-primary-hover);
--button-outlined-dark-disabled-border: color-mix(
in srgb,
var(--button-outlined-dark-default-border) 50%,
transparent
);
/* RED */
--button-outlined-red-default-background: transparent;
--button-outlined-red-hover-background: color-mix(
in srgb,
var(--ds-color-red-primary) 20%,
transparent
);
--button-outlined-red-default-color: var(--ds-color-red-primary);
--button-outlined-red-active-color: var(--ds-color-red-primary-hover);
--button-outlined-red-disabled-color: color-mix(
in srgb,
var(--button-outlined-red-default-color) 70%,
transparent
);
--button-outlined-red-default-border: var(--ds-color-red-primary);
--button-outlined-red-hover-border: var(--ds-color-red-primary-hover);
--button-outlined-red-disabled-border: color-mix(
in srgb,
var(--ds-color-red-primary) 50%,
transparent
);
/* CYAN */
--button-outlined-cyan-default-background: transparent;
--button-outlined-cyan-hover-background: color-mix(
in srgb,
var(--ds-color-cyan-primary) 20%,
transparent
);
--button-outlined-cyan-default-color: var(--ds-color-cyan-primary);
--button-outlined-cyan-active-color: var(--ds-color-cyan-primary-hover);
--button-outlined-cyan-disabled-color: color-mix(
in srgb,
var(--button-outlined-cyan-default-color) 70%,
transparent
);
--button-outlined-cyan-default-border: var(--ds-color-cyan-primary);
--button-outlined-cyan-hover-border: var(--ds-color-cyan-primary-hover);
--button-outlined-cyan-disabled-border: color-mix(
in srgb,
var(--ds-color-cyan-primary) 50%,
transparent
);
}

59
src/shared/designSystem/styles/components/button/primary.css Normal file
View File

@@ -0,0 +1,59 @@
:root {
/* BLUE */
--button-primary-blue-default-background: var(--ds-color-blue-primary);
--button-primary-blue-hover-background: var(--ds-color-blue-primary-hover);
--button-primary-blue-active-background: var(--ds-color-blue-primary-active);
--button-primary-blue-disabled-background: var(--ds-color-blue-4);
--button-primary-blue-default-color: var(--ds-color-gray-1);
--button-primary-blue-disabled-color: color-mix(
in srgb,
var(--button-primary-blue-default-color) 40%,
transparent
);
--button-primary-blue-default-border: transparent;
/* DARK */
--button-primary-dark-default-background: var(--ds-color-gray-primary);
--button-primary-dark-hover-background: var(--ds-color-gray-primary-hover);
--button-primary-dark-active-background: var(--ds-color-gray-primary-active);
--button-primary-dark-disabled-background: var(--ds-color-gray-7);
--button-primary-dark-default-color: var(--ds-color-gray-1);
--button-primary-dark-disabled-color: color-mix(
in srgb,
var(--button-primary-dark-default-color) 40%,
transparent
);
--button-primary-dark-default-border: transparent;
/* RED */
--button-primary-red-default-background: var(--ds-color-red-primary);
--button-primary-red-hover-background: var(--ds-color-red-primary-hover);
--button-primary-red-active-background: var(--ds-color-red-primary-active);
--button-primary-red-disabled-background: var(--ds-color-red-4);
--button-primary-red-default-color: var(--ds-color-gray-1);
--button-primary-red-disabled-color: color-mix(
in srgb,
var(--button-primary-red-default-color) 40%,
transparent
);
--button-primary-red-default-border: transparent;
/* CYAN */
--button-primary-cyan-default-background: var(--ds-color-cyan-primary);
--button-primary-cyan-hover-background: var(--ds-color-cyan-primary-hover);
--button-primary-cyan-active-background: var(--ds-color-cyan-primary-active);
--button-primary-cyan-disabled-background: var(--ds-color-cyan-4);
--button-primary-cyan-default-color: var(--ds-theme-text-primary-inverted);
--button-primary-cyan-hover-color: var(
--ds-theme-text-primary-inverted-hover
);
--button-primary-cyan-active-color: var(
--ds-theme-text-primary-inverted-active
);
--button-primary-cyan-disabled-color: color-mix(
in srgb,
var(--button-primary-cyan-default-color) 40%,
transparent
);
--button-primary-cyan-default-border: transparent;
}

71
src/shared/designSystem/styles/components/button/secondary.css Normal file
View File

@@ -0,0 +1,71 @@
:root {
/* BLUE */
--button-secondary-blue-default-background: var(--ds-color-blue-secondary);
--button-secondary-blue-hover-background: var(
--ds-color-blue-secondary-hover
);
--button-secondary-blue-active-background: var(
--ds-color-blue-secondary-active
);
--button-secondary-blue-default-color: var(--ds-color-blue-primary);
--button-secondary-blue-hover-color: var(--ds-color-blue-primary-hover);
--button-secondary-blue-active-color: var(--ds-color-blue-primary-active);
--button-secondary-blue-disabled-color: color-mix(
in srgb,
var(--button-secondary-blue-default-color) 70%,
transparent
);
--button-secondary-blue-default-border: transparent;
/* DARK */
--button-secondary-dark-default-background: var(--ds-color-gray-secondary);
--button-secondary-dark-hover-background: var(
--ds-color-gray-secondary-hover
);
--button-secondary-dark-active-background: var(
--ds-color-gray-secondary-active
);
--button-secondary-dark-default-color: var(--ds-color-gray-primary);
--button-secondary-dark-hover-color: var(--ds-color-gray-primary-hover);
--button-secondary-dark-active-color: var(--ds-color-gray-primary-active);
--button-secondary-dark-disabled-color: color-mix(
in srgb,
var(--button-secondary-dark-default-color) 70%,
transparent
);
--button-secondary-dark-default-border: transparent;
/* RED */
--button-secondary-red-default-background: var(--ds-color-red-secondary);
--button-secondary-red-hover-background: var(--ds-color-red-secondary-hover);
--button-secondary-red-active-background: var(
--ds-color-red-secondary-active
);
--button-secondary-red-default-color: var(--ds-color-red-primary);
--button-secondary-red-hover-color: var(--ds-color-red-primary-hover);
--button-secondary-red-active-color: var(--ds-color-red-primary-active);
--button-secondary-red-disabled-color: color-mix(
in srgb,
var(--button-secondary-red-default-color) 70%,
transparent
);
--button-secondary-red-default-border: transparent;
/* CYAN */
--button-secondary-cyan-default-background: var(--ds-color-cyan-secondary);
--button-secondary-cyan-hover-background: var(
--ds-color-cyan-secondary-hover
);
--button-secondary-cyan-active-background: var(
--ds-color-cyan-secondary-active
);
--button-secondary-cyan-default-color: var(--ds-color-cyan-8);
--button-secondary-cyan-hover-color: var(--ds-color-cyan-primary-hover);
--button-secondary-cyan-active-color: var(--ds-color-cyan-primary-active);
--button-secondary-cyan-disabled-color: color-mix(
in srgb,
var(--button-secondary-cyan-default-color) 70%,
transparent
);
--button-secondary-cyan-default-border: transparent;
}

49
src/shared/designSystem/styles/components/button/text.css Normal file
View File

@@ -0,0 +1,49 @@
:root {
/* BLUE */
--button-text-blue-default-background: transparent;
--button-text-blue-default-color: var(--ds-color-blue-primary);
--button-text-blue-hover-color: var(--ds-color-blue-primary-hover);
--button-text-blue-active-color: var(--ds-color-blue-primary-active);
--button-text-blue-disabled-color: color-mix(
in srgb,
var(--button-text-blue-default-color) 40%,
transparent
);
--button-text-blue-default-border: transparent;
/* DARK */
--button-text-dark-default-background: transparent;
--button-text-dark-default-color: var(--ds-theme-text-primary);
--button-text-dark-hover-color: var(--ds-theme-text-primary-hover);
--button-text-dark-active-color: var(--ds-theme-text-primary-active);
--button-text-dark-disabled-color: color-mix(
in srgb,
var(--button-text-dark-default-color) 40%,
transparent
);
--button-text-dark-default-border: transparent;
/* RED */
--button-text-red-default-background: transparent;
--button-text-red-default-color: var(--ds-color-red-primary);
--button-text-red-hover-color: var(--ds-color-red-primary-hover);
--button-text-red-active-color: var(--ds-color-red-primary-active);
--button-text-red-disabled-color: color-mix(
in srgb,
var(--button-text-red-default-color) 40%,
transparent
);
--button-text-red-default-border: transparent;
/* CYAN */
--button-text-cyan-default-background: transparent;
--button-text-cyan-default-color: var(--ds-color-cyan-primary);
--button-text-cyan-hover-color: var(--ds-color-cyan-primary-hover);
--button-text-cyan-active-color: var(--ds-color-cyan-primary-active);
--button-text-cyan-disabled-color: color-mix(
in srgb,
var(--button-text-cyan-default-color) 40%,
transparent
);
--button-text-cyan-default-border: transparent;
}

1
src/shared/designSystem/styles/components/index.css Normal file
View File

@@ -0,0 +1 @@
@import "./button/index.css";

20
src/shared/designSystem/styles/core/animation.css Normal file
View File

@@ -0,0 +1,20 @@
:root {
--ds-ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
--ds-ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
--ds-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
--ds-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ds-ease-in-out: cubic-bezier(0.46, 0, 0.03, 0.99);
--ds-ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
--ds-ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
--ds-ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
--ds-ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
--ds-ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
--ds-ease-in-out-circ: cubic-bezier(0.4, 0.15, 0.6, 0.85);
--ds-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
--ds-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ds-ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
--ds-duration-fast: 160ms;
--ds-duration-base: 220ms;
--ds-duration-slow: 320ms;
}

51
src/shared/designSystem/styles/core/base.css Normal file
View File

@@ -0,0 +1,51 @@
html {
scroll-behavior: smooth;
}
body {
background: var(--ds-theme-background);
color: var(--ds-theme-text-primary);
font-family: var(--ds-font-family-secondary), "Roboto", sans-serif;
line-height: 1.5;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: inherit;
text-decoration: none;
}
button {
border: 0;
background: transparent;
}
.theme-bg {
background-color: var(--ds-theme-background);
}
.theme-surface {
background-color: var(--ds-theme-surface);
}
.theme-surface-muted {
background-color: var(--ds-theme-surface-muted);
}
.theme-text {
color: var(--ds-theme-text-primary);
}
.theme-text-secondary {
color: var(--ds-theme-text-secondary);
}
.theme-text-muted {
color: var(--ds-theme-text-muted);
}
.theme-border {
border-color: var(--ds-theme-border);
}

118
src/shared/designSystem/styles/core/colors.css Normal file
View File

@@ -0,0 +1,118 @@
:root {
/* gray scale */
--ds-color-gray-1: #ffffff;
--ds-color-gray-2: #fafafa;
--ds-color-gray-3: #f5f5f5;
--ds-color-gray-4: #f0f0f0;
--ds-color-gray-5: #d9d9d9;
--ds-color-gray-6: #bfbfbf;
--ds-color-gray-7: #8c8c8c;
--ds-color-gray-8: #595959;
--ds-color-gray-9: #434343;
--ds-color-gray-10: #262626;
--ds-color-gray-11: #1f1f1f;
--ds-color-gray-12: #141414;
--ds-color-gray-13: #000000;
--ds-color-gray-primary: var(--ds-color-gray-12);
--ds-color-gray-primary-hover: var(--ds-color-gray-11);
--ds-color-gray-primary-active: var(--ds-color-gray-10);
--ds-color-gray-secondary: var(--ds-color-gray-5);
--ds-color-gray-secondary-hover: var(--ds-color-gray-4);
--ds-color-gray-secondary-active: var(--ds-color-gray-3);
/* green scale */
--ds-color-green-1: #f6ffed;
--ds-color-green-2: #d9f7be;
--ds-color-green-3: #b7eb8f;
--ds-color-green-4: #95de64;
--ds-color-green-5: #73d13d;
--ds-color-green-6: #52c41a;
--ds-color-green-7: #389e0d;
--ds-color-green-8: #237804;
--ds-color-green-9: #135200;
--ds-color-green-10: #092b00;
--ds-color-green-primary: var(--ds-color-green-6);
--ds-color-green-primary-hover: var(--ds-color-green-7);
--ds-color-green-primary-active: var(--ds-color-green-8);
--ds-color-green-secondary: var(--ds-color-green-3);
--ds-color-green-secondary-hover: var(--ds-color-green-2);
--ds-color-green-secondary-active: var(--ds-color-green-1);
/* blue scale */
--ds-color-blue-1: #e6f7ff;
--ds-color-blue-2: #bae7ff;
--ds-color-blue-3: #91d5ff;
--ds-color-blue-4: #69c0ff;
--ds-color-blue-5: #40a9ff;
--ds-color-blue-6: #1890ff;
--ds-color-blue-7: #096dd9;
--ds-color-blue-8: #0050b3;
--ds-color-blue-9: #003a8c;
--ds-color-blue-10: #002766;
--ds-color-blue-primary: var(--ds-color-blue-6);
--ds-color-blue-primary-hover: var(--ds-color-blue-7);
--ds-color-blue-primary-active: var(--ds-color-blue-8);
--ds-color-blue-secondary: var(--ds-color-blue-3);
--ds-color-blue-secondary-hover: var(--ds-color-blue-2);
--ds-color-blue-secondary-active: var(--ds-color-blue-1);
/* cyan scale */
--ds-color-cyan-1: #e6fffb;
--ds-color-cyan-2: #b5f5ec;
--ds-color-cyan-3: #87e8de;
--ds-color-cyan-4: #5cdbd3;
--ds-color-cyan-5: #36cfc9;
--ds-color-cyan-6: #13c2c2;
--ds-color-cyan-7: #08979c;
--ds-color-cyan-8: #006d75;
--ds-color-cyan-9: #00474f;
--ds-color-cyan-10: #002329;
--ds-color-cyan-primary: var(--ds-color-cyan-5);
--ds-color-cyan-primary-hover: var(--ds-color-cyan-7);
--ds-color-cyan-primary-active: var(--ds-color-cyan-8);
--ds-color-cyan-secondary: var(--ds-color-cyan-3);
--ds-color-cyan-secondary-hover: var(--ds-color-cyan-2);
--ds-color-cyan-secondary-active: var(--ds-color-cyan-1);
/* orange scale */
--ds-color-orange-1: #fff7e6;
--ds-color-orange-2: #ffe7ba;
--ds-color-orange-3: #ffd591;
--ds-color-orange-4: #ffc069;
--ds-color-orange-5: #ffa940;
--ds-color-orange-6: #fa8c16;
--ds-color-orange-7: #d46b08;
--ds-color-orange-8: #ad4e00;
--ds-color-orange-9: #873800;
--ds-color-orange-10: #612500;
--ds-color-orange-primary: var(--ds-color-orange-6);
--ds-color-orange-primary-hover: var(--ds-color-orange-7);
--ds-color-orange-primary-active: var(--ds-color-orange-8);
--ds-color-orange-secondary: var(--ds-color-orange-3);
--ds-color-orange-secondary-hover: var(--ds-color-orange-2);
--ds-color-orange-secondary-active: var(--ds-color-orange-1);
/* red scale */
--ds-color-red-1: #fff1f0;
--ds-color-red-2: #ffccc7;
--ds-color-red-3: #ffa39e;
--ds-color-red-4: #ff7875;
--ds-color-red-5: #ff4d4f;
--ds-color-red-6: #f5222d;
--ds-color-red-7: #cf1322;
--ds-color-red-8: #a8071a;
--ds-color-red-9: #820014;
--ds-color-red-10: #5c0011;
--ds-color-red-primary: var(--ds-color-red-6);
--ds-color-red-primary-hover: var(--ds-color-red-7);
--ds-color-red-primary-active: var(--ds-color-red-8);
--ds-color-red-secondary: var(--ds-color-red-3);
--ds-color-red-secondary-hover: var(--ds-color-red-2);
--ds-color-red-secondary-active: var(--ds-color-red-1);
}

13
src/shared/designSystem/styles/core/fonts.css Normal file
View File

@@ -0,0 +1,13 @@
:root {
--ds-font-family-fallback:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--ds-font-family-primary:
"Aeroport-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
--ds-font-family-secondary:
"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
}

205
src/shared/designSystem/styles/core/reset.css Normal file
View File

@@ -0,0 +1,205 @@
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
box-sizing: border-box;
}
/**
1. Improve consistency of default fonts in all browsers.
2. Correct the line height in all browsers.
3. Prevent adjustments of font size after orientation changes in iOS.
4. Use a more readable tab size (opinionated).
*/
html {
font-family:
system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji"; /* 1 */
line-height: 1.15; /* 2 */
-webkit-text-size-adjust: 100%; /* 3 */
tab-size: 4; /* 4 */
}
/*
Sections
========
*/
/**
Remove the margin in all browsers.
*/
body {
margin: 0;
}
/*
Text-level semantics
====================
*/
/**
Add the correct font weight in Chrome and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
1. Improve consistency of default fonts in all browsers.
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family:
ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
Tabular data
============
*/
/**
Correct table border color inheritance in Chrome and Safari.
(https://issues.chromium.org/issues/40615503,
https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
border-color: currentcolor;
}
/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
padding: 0;
}
/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}

39
src/shared/designSystem/styles/core/sizes.css Normal file
View File

@@ -0,0 +1,39 @@
:root {
/* content sizes */
--ds-content-size-16: 16px;
--ds-content-size-20: 20px;
--ds-content-size-24: 24px;
--ds-content-size-28: 28px;
/* container sizes */
--ds-container-size-36: 36px;
--ds-container-size-44: 44px;
--ds-container-size-52: 52px;
--ds-container-size-60: 60px;
/* font sizes */
--ds-font-size-8: 8px;
--ds-font-size-10: 10px;
--ds-font-size-12: 12px;
--ds-font-size-14: 14px;
--ds-font-size-16: 16px;
--ds-font-size-20: 20px;
/* border radius sizes */
--ds-radius-1: 1px;
--ds-radius-2: 2px;
--ds-radius-4: 4px;
--ds-radius-8: 8px;
--ds-radius-12: 12px;
--ds-radius-16: 16px;
--ds-radius-24: 24px;
--ds-radius-36: 36px;
--ds-radius-40: 40px;
/* icon sizes */
--ds-icon-size-12: 12px;
--ds-icon-size-16: 16px;
--ds-icon-size-20: 20px;
--ds-icon-size-24: 24px;
--ds-icon-size-28: 28px;
}

13
src/shared/designSystem/styles/core/spaces.css Normal file
View File

@@ -0,0 +1,13 @@
:root {
--ds-space-0: 0;
--ds-space-2: 0.125rem;
--ds-space-4: 0.25rem;
--ds-space-6: 0.375rem;
--ds-space-8: 0.5rem;
--ds-space-12: 0.75rem;
--ds-space-16: 1rem;
--ds-space-20: 1.25rem;
--ds-space-24: 1.5rem;
--ds-space-32: 2rem;
--ds-space-40: 2.5rem;
}

48
src/shared/designSystem/styles/core/theme.css Normal file
View File

@@ -0,0 +1,48 @@
:root,
[data-theme="light"] {
color-scheme: light;
--ds-theme-background: var(--ds-color-gray-1);
--ds-theme-surface: var(--ds-color-gray-2);
--ds-theme-surface-muted: var(--ds-color-gray-3);
--ds-theme-text-primary: var(--ds-color-gray-12);
--ds-theme-text-primary-hover: var(--ds-color-gray-7);
--ds-theme-text-primary-active: var(--ds-color-gray-6);
--ds-theme-text-primary-inverted: var(--ds-color-gray-1);
--ds-theme-text-primary-inverted-hover: var(--ds-color-gray-5);
--ds-theme-text-primary-inverted-active: var(--ds-color-gray-6);
--ds-theme-text-secondary: var(--ds-color-gray-8);
--ds-theme-text-muted: var(--ds-color-gray-7);
--ds-theme-border: var(--ds-color-gray-4);
--ds-theme-border-strong: var(--ds-color-gray-6);
--ds-theme-danger: var(--ds-color-red-5);
}
[data-theme="dark"] {
color-scheme: dark;
--ds-theme-background: var(--ds-color-gray-13);
--ds-theme-surface: var(--ds-color-gray-12);
--ds-theme-surface-muted: var(--ds-color-gray-11);
--ds-theme-text-primary: var(--ds-color-gray-1);
--ds-theme-text-primary-hover: var(--ds-color-gray-5);
--ds-theme-text-primary-active: var(--ds-color-gray-6);
--ds-theme-text-primary-inverted: var(--ds-color-gray-12);
--ds-theme-text-primary-inverted-hover: var(--ds-color-gray-5);
--ds-theme-text-primary-inverted-active: var(--ds-color-gray-4);
--ds-theme-text-secondary: var(--ds-color-gray-5);
--ds-theme-text-muted: var(--ds-color-gray-7);
--ds-theme-border: var(--ds-color-gray-10);
--ds-theme-border-strong: var(--ds-color-gray-8);
--ds-theme-danger: var(--ds-color-red-5);
}

8
src/shared/designSystem/styles/core/z-indexes.css Normal file
View File

@@ -0,0 +1,8 @@
:root {
--ds-z-dropdown: 1060;
--ds-z-sticky: 1020;
--ds-z-fixed: 1030;
--ds-z-modal-backdrop: 1040;
--ds-z-modal: 1050;
--ds-z-tooltip: 1060;
}

12
src/shared/designSystem/styles/global.css Normal file
View File

@@ -0,0 +1,12 @@
@import "./core/reset.css";
@import "./core/fonts.css";
@import "./core/colors.css";
@import "./core/theme.css";
@import "./core/base.css";
@import "./core/animation.css";
@import "./core/sizes.css";
@import "./core/spaces.css";
@import "./core/z-indexes.css";
@import "./components";

12
tsconfig.json
View File

@@ -1,7 +1,7 @@
{ {
"extends": "astro/tsconfigs/strict", "extends": "astro/tsconfigs/strict",
"compilerOptions": { "compilerOptions": {
"baseUrl": ".", "baseUrl": "./",
"paths": { "paths": {
"@app/*": ["src/app/*"], "@app/*": ["src/app/*"],
"@pageModules/*": ["src/pageModules/*"], "@pageModules/*": ["src/pageModules/*"],
@@ -10,8 +10,14 @@
"@entities/*": ["src/entities/*"], "@entities/*": ["src/entities/*"],
"@shared/*": ["src/shared/*"], "@shared/*": ["src/shared/*"],
"@mocks/*": ["src/__mocks__/*"] "@mocks/*": ["src/__mocks__/*"]
} },
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"forceConsistentCasingInFileNames": true,
"jsx": "preserve",
"jsxImportSource": "solid-js"
}, },
"include": [".astro/types.d.ts", "**/*"], "include": [".astro/types.d.ts", ".storybook/**/*", "./**/*"],
"exclude": ["dist"] "exclude": ["dist"]
} }