Compare commits
11 Commits
80bc9acf71
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
8642a5bce1 | ||
|
|
7d3d87b1e5 | ||
|
|
3105d23e42 | ||
|
|
8cef9f08d2 | ||
|
|
62ac18f4fb | ||
|
|
5544b226d9 | ||
|
|
d45fdaf21a | ||
|
|
70fa864f6d | ||
|
|
be6703c86d | ||
|
|
07c90564de | ||
|
|
7fd0ae8a6b |
3
.gitignore
vendored
3
.gitignore
vendored
@@ -28,3 +28,6 @@ pnpm-debug.log*
|
|||||||
|
|
||||||
# zed setting folder
|
# zed setting folder
|
||||||
.zed/
|
.zed/
|
||||||
|
|
||||||
|
*storybook.log
|
||||||
|
storybook-static
|
||||||
|
|||||||
2
.husky/pre-commit
Normal file
2
.husky/pre-commit
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
#!/usr/bin/env sh
|
||||||
|
./node_modules/.bin/lint-staged
|
||||||
1
.node-version
Normal file
1
.node-version
Normal file
@@ -0,0 +1 @@
|
|||||||
|
24.13.0
|
||||||
20
.storybook/main.ts
Normal file
20
.storybook/main.ts
Normal 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
44
.storybook/preview.tsx
Normal 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;
|
||||||
@@ -1,5 +1,25 @@
|
|||||||
// @ts-check
|
// @ts-check
|
||||||
import { defineConfig } from 'astro/config';
|
import solid from "@astrojs/solid-js";
|
||||||
|
import tailwindcss from "@tailwindcss/vite";
|
||||||
|
import { defineConfig } from "astro/config";
|
||||||
|
|
||||||
// https://astro.build/config
|
const alias = {
|
||||||
export default defineConfig({});
|
"@app": new URL("./src/app", import.meta.url).pathname,
|
||||||
|
"@pageModules": new URL("./src/pageModules", import.meta.url).pathname,
|
||||||
|
"@widgets": new URL("./src/widgets", import.meta.url).pathname,
|
||||||
|
"@features": new URL("./src/features", import.meta.url).pathname,
|
||||||
|
"@entities": new URL("./src/entities", import.meta.url).pathname,
|
||||||
|
"@shared": new URL("./src/shared", import.meta.url).pathname,
|
||||||
|
"@mocks": new URL("./src/__mocks__", import.meta.url).pathname,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
vite: {
|
||||||
|
plugins: [tailwindcss()],
|
||||||
|
resolve: {
|
||||||
|
alias,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
server: {},
|
||||||
|
integrations: [solid({ devtools: true })],
|
||||||
|
});
|
||||||
|
|||||||
47
biome.json
Normal file
47
biome.json
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://biomejs.dev/schemas/2.4.13/schema.json",
|
||||||
|
"vcs": {
|
||||||
|
"enabled": true,
|
||||||
|
"clientKind": "git",
|
||||||
|
"useIgnoreFile": true
|
||||||
|
},
|
||||||
|
"files": {
|
||||||
|
"includes": ["**", "!!**/dist"]
|
||||||
|
},
|
||||||
|
"formatter": {
|
||||||
|
"enabled": true,
|
||||||
|
"indentStyle": "tab"
|
||||||
|
},
|
||||||
|
"linter": {
|
||||||
|
"enabled": true,
|
||||||
|
"rules": {
|
||||||
|
"recommended": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"javascript": {
|
||||||
|
"formatter": {
|
||||||
|
"quoteStyle": "double"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"assist": {
|
||||||
|
"enabled": true,
|
||||||
|
"actions": {
|
||||||
|
"source": {
|
||||||
|
"organizeImports": "on"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"includes": ["**/*.astro"],
|
||||||
|
"linter": {
|
||||||
|
"rules": {
|
||||||
|
"correctness": {
|
||||||
|
"noUnusedImports": "off",
|
||||||
|
"noUnusedVariables": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
41
package.json
41
package.json
@@ -3,8 +3,8 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "24.13.0",
|
"node": ">=24.13.0 <25",
|
||||||
"pnpm": ">=9.0.0"
|
"pnpm": ">=10.28.0"
|
||||||
},
|
},
|
||||||
"enginesStrict": true,
|
"enginesStrict": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@@ -12,9 +12,42 @@
|
|||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
"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 && biome check .",
|
||||||
|
"format": "biome format . --write",
|
||||||
|
"prepare": "husky",
|
||||||
|
"ci": "astro check && biome ci .",
|
||||||
|
"storybook": "storybook dev -p 6006",
|
||||||
|
"build-storybook": "storybook build"
|
||||||
|
},
|
||||||
|
"lint-staged": {
|
||||||
|
"*.{js,jsx,ts,tsx,json,jsonc,css,scss}": [
|
||||||
|
"biome check --no-errors-on-unmatched"
|
||||||
|
],
|
||||||
|
"*.{astro}": [
|
||||||
|
"astro check"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"astro": "^5.16.10"
|
"@astrojs/solid-js": "^6.0.1",
|
||||||
|
"@tailwindcss/vite": "^4.2.4",
|
||||||
|
"@webtui/css": "^0.1.7",
|
||||||
|
"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",
|
||||||
|
"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
4623
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
|||||||
if (!process.env.npm_execpath || !process.env.npm_execpath.includes('pnpm')) {
|
if (!process.env.npm_execpath?.includes("pnpm")) {
|
||||||
console.error(
|
console.error(
|
||||||
'Ошибка: используйте только `pnpm` для установки зависимостей (запускать: `pnpm install`).'
|
"Ошибка: используйте только `pnpm` для установки зависимостей (запускать: `pnpm install`).",
|
||||||
);
|
);
|
||||||
process.exit(1);
|
process.exit(1);
|
||||||
}
|
}
|
||||||
|
|||||||
43
src/__mocks__/demo.ts
Normal file
43
src/__mocks__/demo.ts
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
export const articles = [
|
||||||
|
{
|
||||||
|
title: "Нативный light/dark без лишнего JS",
|
||||||
|
tag: "CSS / UI",
|
||||||
|
meta: "06.04.2026",
|
||||||
|
desc: "Разбор переключения темы, системных предпочтений и аккуратной деградации интерфейса.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Astro + WebTUI: терминальный UI без боли",
|
||||||
|
tag: "ASTRO / WEBTUI",
|
||||||
|
meta: "02.04.2026",
|
||||||
|
desc: "Как подключить стили, разнести слои и не потерять читаемость в гибридном интерфейсе.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "React-архитектура для pet-проектов",
|
||||||
|
tag: "REACT / TS",
|
||||||
|
meta: "27.03.2026",
|
||||||
|
desc: "Минимальный, но живучий сетап: фичи, shared-слой, UI-кит и понятные контракты.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const projects = [
|
||||||
|
{
|
||||||
|
title: "UI System",
|
||||||
|
type: "DESIGN SYSTEM",
|
||||||
|
status: "ONLINE",
|
||||||
|
desc: "Компоненты и паттерны для React / Solid с единым visual language.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Lab Notes",
|
||||||
|
type: "BLOG",
|
||||||
|
status: "SYNCED",
|
||||||
|
desc: "Статьи, заметки и эксперименты по фронтенду, DX и интерфейсам.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Experiments",
|
||||||
|
type: "PLAYGROUND",
|
||||||
|
status: "WIP",
|
||||||
|
desc: "Графика, WebGPU, 3D и интерактивные эксперименты.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const contacts = ["GitHub", "Telegram", "Email", "LinkedIn"];
|
||||||
1
src/__mocks__/index.ts
Normal file
1
src/__mocks__/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from "./demo.ts";
|
||||||
44
src/app/layouts/BaseLayout/BaseLayout.astro
Normal file
44
src/app/layouts/BaseLayout/BaseLayout.astro
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
---
|
||||||
|
import "@app/styles/global.css";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title = "NikitaPozd Dev", description = "" } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="ru" data-theme="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<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 />
|
||||||
|
|
||||||
|
<script is:inline>
|
||||||
|
window.__setTheme = (theme) => {
|
||||||
|
document.documentElement.dataset.theme = theme;
|
||||||
|
localStorage.setItem("theme", theme);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
src/app/layouts/BaseLayout/index.ts
Normal file
1
src/app/layouts/BaseLayout/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default } from "./BaseLayout.astro";
|
||||||
3
src/app/styles/global.css
Normal file
3
src/app/styles/global.css
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@import "../../shared/designSystem/styles/global.css";
|
||||||
0
src/entities/.gitkeep
Normal file
0
src/entities/.gitkeep
Normal file
0
src/features/.gitkeep
Normal file
0
src/features/.gitkeep
Normal file
1
src/pageModules/demo/index.ts
Normal file
1
src/pageModules/demo/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default } from "./ui/DemoPage.astro";
|
||||||
680
src/pageModules/demo/ui/DemoPage.astro
Normal file
680
src/pageModules/demo/ui/DemoPage.astro
Normal file
@@ -0,0 +1,680 @@
|
|||||||
|
---
|
||||||
|
import { articles, contacts, projects } from "@mocks/demo.ts";
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="page-shell">
|
||||||
|
<div class="bg-glow"></div>
|
||||||
|
<div class="bg-grid"></div>
|
||||||
|
|
||||||
|
<header class="topbar box">
|
||||||
|
<div class="brand">
|
||||||
|
<div class="brand-mark" aria-hidden="true"></div>
|
||||||
|
<div>
|
||||||
|
<div class="eyebrow">ctOS / profile</div>
|
||||||
|
<div class="brand-title">nikitapozd.dev</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<a class="nav-link nav-link--active" href="#home">Главная</a>
|
||||||
|
<a class="nav-link" href="#articles">Статьи</a>
|
||||||
|
<a class="nav-link" href="#projects">Проекты</a>
|
||||||
|
<a class="nav-link" href="#about">Обо мне</a>
|
||||||
|
<a class="nav-link" href="#contact">Контакты</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="layout">
|
||||||
|
<section id="home" class="hero-grid">
|
||||||
|
<section class="panel hero box">
|
||||||
|
<div class="hero-head">
|
||||||
|
<div>
|
||||||
|
<div class="badge-line">
|
||||||
|
<span is-="badge" variant-="cyan">personal node / online</span>
|
||||||
|
</div>
|
||||||
|
<h1>Никита Поздняков</h1>
|
||||||
|
<p class="hero-text">
|
||||||
|
Фронтенд-разработчик. Делаю быстрые, аккуратные интерфейсы на React,
|
||||||
|
TypeScript, Next.js и Astro. Люблю дизайн-системы, терминальную эстетику и
|
||||||
|
чуть-чуть киберпанка.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="status-card box">
|
||||||
|
<div class="status-row status-row--head">
|
||||||
|
<span>status</span>
|
||||||
|
<span>v0.01</span>
|
||||||
|
</div>
|
||||||
|
<div class="status-row"><span>stack</span><span>React / TS</span></div>
|
||||||
|
<div class="status-row"><span>focus</span><span>DX / UI</span></div>
|
||||||
|
<div class="status-row"><span>mode</span><span>building</span></div>
|
||||||
|
<div class="status-row"><span>location</span><span>remote</span></div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-grid">
|
||||||
|
<article class="stat box"><span>Статьи</span><strong>013</strong></article>
|
||||||
|
<article class="stat box"><span>Проекты</span><strong>008</strong></article>
|
||||||
|
<article class="stat box"><span>Опыт с UI</span><strong>06+</strong></article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-actions">
|
||||||
|
<button is-="button" variant-="foreground0">Смотреть статьи</button>
|
||||||
|
<button is-="button" variant-="cyan">Открыть проекты</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="side-stack">
|
||||||
|
<section class="panel box tone-lime">
|
||||||
|
<div class="section-head">
|
||||||
|
<span class="eyebrow lime">mission feed</span>
|
||||||
|
<span class="muted">active</span>
|
||||||
|
</div>
|
||||||
|
<div class="mission-list">
|
||||||
|
<div class="mission box">Собрать личный сайт с сильной визуальной системой</div>
|
||||||
|
<div class="mission box">Показать статьи, проекты и стек без визуального шума</div>
|
||||||
|
<div class="mission box">Смешать WebTUI и HUD Watch Dogs в современный лендинг</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel box">
|
||||||
|
<div class="section-head">
|
||||||
|
<span class="eyebrow">quick links</span>
|
||||||
|
<span class="muted">sync</span>
|
||||||
|
</div>
|
||||||
|
<div class="link-grid">
|
||||||
|
{contacts.map((item) => (
|
||||||
|
<a class="quick-link box" href="#contact">{item}</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="content-grid">
|
||||||
|
<section id="about" class="panel box">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<div class="eyebrow">about.exe</div>
|
||||||
|
<h2>Обо мне</h2>
|
||||||
|
</div>
|
||||||
|
<span is-="badge" variant-="cyan">profile</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="prose-copy">
|
||||||
|
<p>
|
||||||
|
Мне нравится делать интерфейсы, в которых есть структура, ритм и понятная
|
||||||
|
логика. Люблю, когда дизайн не спорит с контентом, а усиливает его.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Этот макет опирается на спокойную структуру персонального сайта, но сверху
|
||||||
|
добавляет HUD-слои, статусы, терминальные компоненты и акцентные панели в
|
||||||
|
духе ctOS.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tag-grid">
|
||||||
|
{["Next.js", "TypeScript", "Design Systems", "Astro", "Accessibility", "Motion"].map((item) => (
|
||||||
|
<span is-="badge" variant-="foreground2">{item}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="articles" class="panel box tone-cyan">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<div class="eyebrow">articles.log</div>
|
||||||
|
<h2>Последние статьи</h2>
|
||||||
|
</div>
|
||||||
|
<button is-="button" variant-="foreground3">Все записи</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-list">
|
||||||
|
{articles.map((article) => (
|
||||||
|
<article class="article-card box">
|
||||||
|
<div class="card-meta">
|
||||||
|
<span>{article.tag}</span>
|
||||||
|
<span class="accent">{article.meta}</span>
|
||||||
|
</div>
|
||||||
|
<h3>{article.title}</h3>
|
||||||
|
<p>{article.desc}</p>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="projects" class="panel box tone-lime">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<div class="eyebrow lime">projects.map</div>
|
||||||
|
<h2>Избранные проекты</h2>
|
||||||
|
</div>
|
||||||
|
<span class="muted">3 active nodes</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="project-grid">
|
||||||
|
{projects.map((project) => (
|
||||||
|
<article class="project-card box">
|
||||||
|
<div class="card-meta">
|
||||||
|
<span class="accent-lime">{project.type}</span>
|
||||||
|
<span>{project.status}</span>
|
||||||
|
</div>
|
||||||
|
<h3>{project.title}</h3>
|
||||||
|
<p>{project.desc}</p>
|
||||||
|
<div class="project-foot">
|
||||||
|
<span>open</span>
|
||||||
|
<span>→</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="footer-grid">
|
||||||
|
<section class="panel box">
|
||||||
|
<div class="eyebrow">terminal / broadcast</div>
|
||||||
|
<pre is-="pre" class="terminal-block"><code>> status: available for frontend / ui work
|
||||||
|
> stack: react nextjs typescript astro
|
||||||
|
> interests: design systems webtui webgpu motion</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="contact" class="panel box tone-cyan">
|
||||||
|
<div class="eyebrow">contact</div>
|
||||||
|
<h2>Давай делать что-то красивое и удобное</h2>
|
||||||
|
<p class="contact-copy">
|
||||||
|
Блог, сайт-портфолио, продуктовый лендинг или внутренняя дизайн-система — этот
|
||||||
|
шаблон можно развить в полноценный персональный сайт.
|
||||||
|
</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<button is-="button" variant-="foreground0">Написать мне</button>
|
||||||
|
<button is-="button" variant-="cyan">GitHub</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style is:global>
|
||||||
|
:root {
|
||||||
|
--background0: #05070a;
|
||||||
|
--background1: #0a0f14;
|
||||||
|
--background2: #10161e;
|
||||||
|
--foreground0: #f4f7fb;
|
||||||
|
--foreground1: #d9e2ea;
|
||||||
|
--foreground2: #9aa8b4;
|
||||||
|
--foreground3: #6f7d88;
|
||||||
|
--cyan: #52d9ff;
|
||||||
|
--cyan-dim: rgba(82, 217, 255, 0.18);
|
||||||
|
--lime: #d8f24f;
|
||||||
|
--lime-dim: rgba(216, 242, 79, 0.16);
|
||||||
|
--red: #ff5b66;
|
||||||
|
--border-soft: rgba(255, 255, 255, 0.1);
|
||||||
|
--shadow-cyan: 0 0 36px rgba(82, 217, 255, 0.08);
|
||||||
|
--shadow-lime: 0 0 28px rgba(216, 242, 79, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--foreground1);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top, rgba(82, 217, 255, 0.11), transparent 28%),
|
||||||
|
linear-gradient(180deg, #06080b 0%, #040506 100%);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-shell {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow: clip;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-glow,
|
||||||
|
.bg-grid {
|
||||||
|
pointer-events: none;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-glow {
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 15% 15%, rgba(82, 217, 255, 0.11), transparent 25%),
|
||||||
|
radial-gradient(circle at 90% 35%, rgba(216, 242, 79, 0.06), transparent 22%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-grid {
|
||||||
|
opacity: 0.08;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
|
||||||
|
background-size: 32px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
background: rgba(5, 8, 11, 0.82);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom: 1px solid rgba(82, 217, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-mark {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border: 1px solid rgba(82, 217, 255, 0.55);
|
||||||
|
background: #000;
|
||||||
|
box-shadow: var(--shadow-cyan);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-mark::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0.62rem;
|
||||||
|
border: 1px solid var(--cyan);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.28em;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: rgba(82, 217, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow.lime {
|
||||||
|
color: var(--lime);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-title {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.55rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
border: 1px solid rgba(82, 217, 255, 0.2);
|
||||||
|
background: rgba(0, 0, 0, 0.35);
|
||||||
|
color: var(--foreground1);
|
||||||
|
padding: 0.7rem 0.9rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
transition: 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover,
|
||||||
|
.nav-link:focus-visible {
|
||||||
|
border-color: rgba(82, 217, 255, 0.65);
|
||||||
|
color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link--active {
|
||||||
|
background: var(--foreground0);
|
||||||
|
color: #000;
|
||||||
|
border-color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-grid,
|
||||||
|
.content-grid,
|
||||||
|
.footer-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-grid {
|
||||||
|
grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-grid,
|
||||||
|
.footer-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-stack {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
background: rgba(0, 0, 0, 0.48);
|
||||||
|
border: 1px solid var(--border-soft);
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel.tone-cyan {
|
||||||
|
border-color: rgba(82, 217, 255, 0.22);
|
||||||
|
box-shadow: var(--shadow-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel.tone-lime {
|
||||||
|
border-color: rgba(216, 242, 79, 0.22);
|
||||||
|
box-shadow: var(--shadow-lime);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
overflow: clip;
|
||||||
|
box-shadow: var(--shadow-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
right: -4rem;
|
||||||
|
top: 3rem;
|
||||||
|
width: 12rem;
|
||||||
|
height: 12rem;
|
||||||
|
border: 1px solid rgba(82, 217, 255, 0.16);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
border-bottom: 1px dashed rgba(82, 217, 255, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
p,
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 0.85rem;
|
||||||
|
font-size: clamp(2.4rem, 7vw, 4.8rem);
|
||||||
|
line-height: 0.95;
|
||||||
|
color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: 0.45rem;
|
||||||
|
font-size: 1.7rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text,
|
||||||
|
.prose-copy p,
|
||||||
|
.article-card p,
|
||||||
|
.project-card p,
|
||||||
|
.contact-copy {
|
||||||
|
line-height: 1.75;
|
||||||
|
color: var(--foreground1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
margin-top: 1rem;
|
||||||
|
max-width: 48rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
min-width: 220px;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(10, 16, 22, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 0.55rem 0;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
color: var(--foreground1);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-row--head {
|
||||||
|
padding-top: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: rgba(82, 217, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-row:last-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-grid,
|
||||||
|
.project-grid,
|
||||||
|
.tag-grid,
|
||||||
|
.link-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-grid {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat span,
|
||||||
|
.muted,
|
||||||
|
.card-meta,
|
||||||
|
.project-foot {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
color: var(--foreground2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat strong {
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--foreground0);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-list,
|
||||||
|
.card-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission,
|
||||||
|
.quick-link,
|
||||||
|
.article-card,
|
||||||
|
.project-card {
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-link {
|
||||||
|
display: block;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
transition: 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-link:hover,
|
||||||
|
.article-card:hover,
|
||||||
|
.project-card:hover {
|
||||||
|
border-color: rgba(82, 217, 255, 0.35);
|
||||||
|
background: rgba(82, 217, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose-copy {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-grid {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, max-content));
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent {
|
||||||
|
color: rgba(82, 217, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent-lime {
|
||||||
|
color: var(--lime);
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-card h3,
|
||||||
|
.project-card h3 {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-grid {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-foot {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 1.2rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-block {
|
||||||
|
margin-top: 1rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background: rgba(7, 16, 24, 0.95);
|
||||||
|
color: var(--foreground1);
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1080px) {
|
||||||
|
.hero-grid,
|
||||||
|
.content-grid,
|
||||||
|
.footer-grid,
|
||||||
|
.project-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-head {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.layout,
|
||||||
|
.topbar {
|
||||||
|
padding-inline: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
align-items: start;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-grid,
|
||||||
|
.link-grid,
|
||||||
|
.tag-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
1
src/pageModules/home/index.ts
Normal file
1
src/pageModules/home/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default } from "./ui/HomePage.astro";
|
||||||
12
src/pageModules/home/ui/HomePage.astro
Normal file
12
src/pageModules/home/ui/HomePage.astro
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
---
|
||||||
|
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>
|
||||||
1
src/pageModules/uiSandbox/index.ts
Normal file
1
src/pageModules/uiSandbox/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default } from "./ui/UiSandboxPage.astro";
|
||||||
39
src/pageModules/uiSandbox/ui/UiSandboxPage.astro
Normal file
39
src/pageModules/uiSandbox/ui/UiSandboxPage.astro
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
<main class="mx-auto flex min-h-screen max-w-6xl flex-col gap-6 px-4 py-8 md:px-6">
|
||||||
|
<h1>Heading 1</h1>
|
||||||
|
<details is-="accordion">
|
||||||
|
<summary>Summary title</summary>
|
||||||
|
<p>Accordion content</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<dialog id="dialog" popover>
|
||||||
|
<div box-="round" id="content">
|
||||||
|
<p>Are you sure you want to delete this?</p>
|
||||||
|
<div id="buttons">
|
||||||
|
<button box-="round">Cancel</button>
|
||||||
|
<button box-="round">Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
<button popovertarget="dialog">Open Dialog</button>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
dialog::backdrop {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1lh;
|
||||||
|
padding: 2lh 2ch 1lh 2ch;
|
||||||
|
background-color: var(--background1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 1ch;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
11
src/pages/demo.astro
Normal file
11
src/pages/demo.astro
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from "@app/layouts/BaseLayout";
|
||||||
|
import DemoPage from "@pageModules/demo";
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout
|
||||||
|
title="Никита Поздняков — Frontend Engineer"
|
||||||
|
description="Персональный сайт в стилистике Watch Dogs + WebTUI на Astro 6."
|
||||||
|
>
|
||||||
|
<DemoPage />
|
||||||
|
</BaseLayout>
|
||||||
@@ -1,16 +1,8 @@
|
|||||||
---
|
---
|
||||||
|
import BaseLayout from "@app/layouts/BaseLayout";
|
||||||
|
import HomePage from "@pageModules/home";
|
||||||
|
---
|
||||||
|
|
||||||
---
|
<BaseLayout title="Главная | NikitaPozd Dev" description="Главная страница сайта NikitaPozd Dev.">
|
||||||
|
<HomePage />
|
||||||
<html lang="en">
|
</BaseLayout>
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width" />
|
|
||||||
<meta name="generator" content={Astro.generator} />
|
|
||||||
<title>Astro</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Nikita Pozd Main Site</h1>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
8
src/pages/ui-sandbox.astro
Normal file
8
src/pages/ui-sandbox.astro
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from "@app/layouts/BaseLayout";
|
||||||
|
import UiSandboxPage from "@pageModules/uiSandbox";
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title="UI Demo | NikitaPozd Dev" description="Демонстрационная страница компонентов WebTUI и Tailwind CSS.">
|
||||||
|
<UiSandboxPage />
|
||||||
|
</BaseLayout>
|
||||||
@@ -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;
|
||||||
@@ -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
2
src/shared/designSystem/components/Button/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export type { ButtonProps } from "./types/Button.types.ts";
|
||||||
|
export { Button } from "./ui/Button.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>
|
||||||
|
),
|
||||||
|
};
|
||||||
@@ -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)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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
13
src/shared/designSystem/components/Button/ui/Button.tsx
Normal 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} />;
|
||||||
|
};
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -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
12
src/shared/designSystem/constants/colors.ts
Normal 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
5
src/shared/designSystem/constants/index.ts
Normal 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
52
src/shared/designSystem/constants/sizes.ts
Normal 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
20
src/shared/designSystem/constants/spaces.ts
Normal 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
9
src/shared/designSystem/constants/variants.ts
Normal 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
11
src/shared/designSystem/constants/zIndexes.ts
Normal 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
1
src/shared/designSystem/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { Button } from "./components/Button";
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
@import "./primary.css";
|
||||||
|
@import "./secondary.css";
|
||||||
|
@import "./outlined.css";
|
||||||
|
@import "./text.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
|
||||||
|
);
|
||||||
|
}
|
||||||
59
src/shared/designSystem/styles/components/button/primary.css
Normal file
59
src/shared/designSystem/styles/components/button/primary.css
Normal 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;
|
||||||
|
}
|
||||||
@@ -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
49
src/shared/designSystem/styles/components/button/text.css
Normal 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
1
src/shared/designSystem/styles/components/index.css
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@import "./button/index.css";
|
||||||
20
src/shared/designSystem/styles/core/animation.css
Normal file
20
src/shared/designSystem/styles/core/animation.css
Normal 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
51
src/shared/designSystem/styles/core/base.css
Normal 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
118
src/shared/designSystem/styles/core/colors.css
Normal 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
13
src/shared/designSystem/styles/core/fonts.css
Normal 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
205
src/shared/designSystem/styles/core/reset.css
Normal 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
39
src/shared/designSystem/styles/core/sizes.css
Normal 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
13
src/shared/designSystem/styles/core/spaces.css
Normal 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
48
src/shared/designSystem/styles/core/theme.css
Normal 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
8
src/shared/designSystem/styles/core/z-indexes.css
Normal 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
12
src/shared/designSystem/styles/global.css
Normal 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";
|
||||||
0
src/widgets/.gitkeep
Normal file
0
src/widgets/.gitkeep
Normal file
@@ -1,5 +1,23 @@
|
|||||||
{
|
{
|
||||||
"extends": "astro/tsconfigs/strict",
|
"extends": "astro/tsconfigs/strict",
|
||||||
"include": [".astro/types.d.ts", "**/*"],
|
"compilerOptions": {
|
||||||
|
"baseUrl": "./",
|
||||||
|
"paths": {
|
||||||
|
"@app/*": ["src/app/*"],
|
||||||
|
"@pageModules/*": ["src/pageModules/*"],
|
||||||
|
"@widgets/*": ["src/widgets/*"],
|
||||||
|
"@features/*": ["src/features/*"],
|
||||||
|
"@entities/*": ["src/entities/*"],
|
||||||
|
"@shared/*": ["src/shared/*"],
|
||||||
|
"@mocks/*": ["src/__mocks__/*"]
|
||||||
|
},
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"jsxImportSource": "solid-js"
|
||||||
|
},
|
||||||
|
"include": [".astro/types.d.ts", ".storybook/**/*", "./**/*"],
|
||||||
"exclude": ["dist"]
|
"exclude": ["dist"]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user