Add Button design system and Storybook Solid setup

add Button component and Storybook configuration
move TypeScript lint-staged and @astrojs/check to devDependencies
2026-05-27 15:10:38 +03:00 · 2026-05-04 11:38:50 +03:00 · 2026-04-29 15:45:04 +03:00
44 changed files with 5594 additions and 760 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,6 @@ pnpm-debug.log*

 # zed setting folder
 .zed/
+
+*storybook.log
+storybook-static
--- a/.npmrc
+++ b/.npmrc
@@ -1 +0,0 @@
-package-lock=false
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -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;
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -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;
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,4 +1,5 @@
 // @ts-check
+import solid from "@astrojs/solid-js";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "astro/config";

@@ -19,4 +20,6 @@ export default defineConfig({
 			alias,
 		},
 	},
+	server: {},
+	integrations: [solid({ devtools: true })],
 });
--- a/package.json
+++ b/package.json
@@ -16,7 +16,9 @@
 		"lint": "astro check && biome check .",
 		"format": "biome format . --write",
 		"prepare": "husky",
-		"ci": "astro check && biome ci ."
+		"ci": "astro check && biome ci .",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
 	},
 	"lint-staged": {
 		"*.{js,jsx,ts,tsx,json,jsonc,css,scss}": [
@@ -27,16 +29,25 @@
 		]
 	},
 	"dependencies": {
-		"@astrojs/check": "^0.9.9",
+		"@astrojs/solid-js": "^6.0.1",
 		"@tailwindcss/vite": "^4.2.4",
 		"@webtui/css": "^0.1.7",
-		"astro": "^6.1.8",
-		"tailwindcss": "^4.2.4",
-		"typescript": "^6.0.3"
+		"astro": "^6.3.1",
+		"solid-js": "^1.9.13",
+		"tailwindcss": "^4.2.4"
 	},
 	"devDependencies": {
+		"@astrojs/check": "^0.9.9",
 		"@biomejs/biome": "2.4.13",
+		"@storybook/addon-a11y": "^10.4.1",
+		"@storybook/addon-docs": "^10.4.1",
 		"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"
 	}
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app/layouts/BaseLayout/BaseLayout.astro
+++ b/src/app/layouts/BaseLayout/BaseLayout.astro
@@ -9,7 +9,7 @@ interface Props {
 const { title = "NikitaPozd Dev", description = "" } = Astro.props;
 ---

-<html lang="ru" data-webtui-theme="dark">
+<html lang="ru" data-theme="dark">
  <head>
    <meta charset="utf-8" />
    <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="description" content={description} />
    <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>
  <body>
    <slot />
-  </body>
-</html>

+    <script is:inline>
+      window.__setTheme = (theme) => {
+        document.documentElement.dataset.theme = theme;
+        localStorage.setItem("theme", theme);
+      };
+    </script>
+  </body>
+</html>
--- a/src/app/styles/global.css
+++ b/src/app/styles/global.css
@@ -1,15 +1,3 @@
-@layer theme, base, components, utilities;
@import "tailwindcss";

-@import "@webtui/css/base.css" layer(base);
-
-/* 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);
+@import "../../shared/designSystem/styles/global.css";
--- a/src/pageModules/home/ui/HomePage.astro
+++ b/src/pageModules/home/ui/HomePage.astro
@@ -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)]">
-		<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">
-			Базовая главная страница собрана как page module и подключается маршрутом из
-			`src/pages/index.astro`.
-		</p>
-		<div class="flex justify-center">
-			<button is-="button" variant-="cyan">Открыть демо</button>
-		</div>
+---
+import { Button } from "@shared/designSystem";
+---
+
+<main class="mx-auto flex min-h-screen max-w-6xl flex-col items-center gap-10 px-4 py-8 md:px-6">
+	<section class="box flex w-full flex-col gap-6 border border-cyan/20 p-6">
+		<h1>Home Page</h1>
+		<Button>
+			Hello
+		</Button>
 	</section>
 </main>
--- a/src/shared/.gitkeep
+++ b/src/shared/.gitkeep
--- a/src/shared/designSystem/components/Button/helpers/getButtonClassNames.ts
+++ b/src/shared/designSystem/components/Button/helpers/getButtonClassNames.ts
@@ -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;
--- a/src/shared/designSystem/components/Button/helpers/isLinkButton.ts
+++ b/src/shared/designSystem/components/Button/helpers/isLinkButton.ts
@@ -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";
+};
--- a/src/shared/designSystem/components/Button/index.ts
+++ b/src/shared/designSystem/components/Button/index.ts
@@ -0,0 +1,2 @@
+export type { ButtonProps } from "./types/Button.types.ts";
+export { Button } from "./ui/Button.tsx";
--- a/src/shared/designSystem/components/Button/stories/Button.stories.tsx
+++ b/src/shared/designSystem/components/Button/stories/Button.stories.tsx
@@ -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>
+	),
+};
--- a/src/shared/designSystem/components/Button/styles/Button.module.scss
+++ b/src/shared/designSystem/components/Button/styles/Button.module.scss
@@ -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)
+      );
+    }
+  }
+}
--- a/src/shared/designSystem/components/Button/types/Button.types.ts
+++ b/src/shared/designSystem/components/Button/types/Button.types.ts
@@ -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;
--- a/src/shared/designSystem/components/Button/ui/Button.tsx
+++ b/src/shared/designSystem/components/Button/ui/Button.tsx
@@ -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} />;
+};
--- a/src/shared/designSystem/components/Button/ui/ButtonAsButton.tsx
+++ b/src/shared/designSystem/components/Button/ui/ButtonAsButton.tsx
@@ -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>
+	);
+};
--- a/src/shared/designSystem/components/Button/ui/ButtonAsLink.tsx
+++ b/src/shared/designSystem/components/Button/ui/ButtonAsLink.tsx
@@ -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>
+	);
+};
--- a/src/shared/designSystem/constants/colors.ts
+++ b/src/shared/designSystem/constants/colors.ts
@@ -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];
--- a/src/shared/designSystem/constants/index.ts
+++ b/src/shared/designSystem/constants/index.ts
@@ -0,0 +1,5 @@
+export * from "./colors.ts";
+export * from "./sizes.ts";
+export * from "./spaces.ts";
+export * from "./variants.ts";
+export * from "./zIndexes.ts";
--- a/src/shared/designSystem/constants/sizes.ts
+++ b/src/shared/designSystem/constants/sizes.ts
@@ -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];
--- a/src/shared/designSystem/constants/spaces.ts
+++ b/src/shared/designSystem/constants/spaces.ts
@@ -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];
--- a/src/shared/designSystem/constants/variants.ts
+++ b/src/shared/designSystem/constants/variants.ts
@@ -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];
--- a/src/shared/designSystem/constants/zIndexes.ts
+++ b/src/shared/designSystem/constants/zIndexes.ts
@@ -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];
--- a/src/shared/designSystem/index.ts
+++ b/src/shared/designSystem/index.ts
@@ -0,0 +1 @@
+export { Button } from "./components/Button";
--- a/src/shared/designSystem/styles/components/button/index.css
+++ b/src/shared/designSystem/styles/components/button/index.css
@@ -0,0 +1,4 @@
+@import "./primary.css";
+@import "./secondary.css";
+@import "./outlined.css";
+@import "./text.css";
--- a/src/shared/designSystem/styles/components/button/outlined.css
+++ b/src/shared/designSystem/styles/components/button/outlined.css
@@ -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
+	);
+}
--- a/src/shared/designSystem/styles/components/button/primary.css
+++ b/src/shared/designSystem/styles/components/button/primary.css
@@ -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;
+}
--- a/src/shared/designSystem/styles/components/button/secondary.css
+++ b/src/shared/designSystem/styles/components/button/secondary.css
@@ -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;
+}
--- a/src/shared/designSystem/styles/components/button/text.css
+++ b/src/shared/designSystem/styles/components/button/text.css
@@ -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;
+}
--- a/src/shared/designSystem/styles/components/index.css
+++ b/src/shared/designSystem/styles/components/index.css
@@ -0,0 +1 @@
+@import "./button/index.css";
--- a/src/shared/designSystem/styles/core/animation.css
+++ b/src/shared/designSystem/styles/core/animation.css
@@ -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;
+}
--- a/src/shared/designSystem/styles/core/base.css
+++ b/src/shared/designSystem/styles/core/base.css
@@ -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);
+}
--- a/src/shared/designSystem/styles/core/colors.css
+++ b/src/shared/designSystem/styles/core/colors.css
@@ -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);
+}
--- a/src/shared/designSystem/styles/core/fonts.css
+++ b/src/shared/designSystem/styles/core/fonts.css
@@ -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";
+}
--- a/src/shared/designSystem/styles/core/reset.css
+++ b/src/shared/designSystem/styles/core/reset.css
@@ -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;
+}
--- a/src/shared/designSystem/styles/core/sizes.css
+++ b/src/shared/designSystem/styles/core/sizes.css
@@ -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;
+}
--- a/src/shared/designSystem/styles/core/spaces.css
+++ b/src/shared/designSystem/styles/core/spaces.css
@@ -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;
+}
--- a/src/shared/designSystem/styles/core/theme.css
+++ b/src/shared/designSystem/styles/core/theme.css
@@ -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);
+}
--- a/src/shared/designSystem/styles/core/z-indexes.css
+++ b/src/shared/designSystem/styles/core/z-indexes.css
@@ -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;
+}
--- a/src/shared/designSystem/styles/global.css
+++ b/src/shared/designSystem/styles/global.css
@@ -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";
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
 	"extends": "astro/tsconfigs/strict",
 	"compilerOptions": {
-		"baseUrl": ".",
+		"baseUrl": "./",
 		"paths": {
 			"@app/*": ["src/app/*"],
 			"@pageModules/*": ["src/pageModules/*"],
@@ -13,8 +13,11 @@
 		},
 		"strict": true,
 		"noUnusedLocals": true,
-		"noUnusedParameters": true
+		"noUnusedParameters": true,
+		"forceConsistentCasingInFileNames": true,
+		"jsx": "preserve",
+		"jsxImportSource": "solid-js"
 	},
-	"include": [".astro/types.d.ts", "**/*"],
+	"include": [".astro/types.d.ts", ".storybook/**/*", "./**/*"],
 	"exclude": ["dist"]
 }
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
				`@@ -0,0 +1 @@`
				`export { Button } from "./components/Button";`