@iskra-ui/styles 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENCE.md +79 -0
- package/dist/elements.css +58 -0
- package/dist/fonts/Inter-VariableFont_opsz_wght.ttf +0 -0
- package/dist/fonts/JetBrainsMono_wght_.ttf +0 -0
- package/dist/fonts.css +15 -0
- package/dist/index.css +297 -0
- package/dist/reset.css +52 -0
- package/dist/tokens.css +163 -0
- package/package.json +26 -0
package/LICENCE.md
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
# Лицензии
|
|
2
|
+
|
|
3
|
+
Документ фиксирует правовой статус кода дизайн-системы **Искра.DCI** и сторонних компонентов, которые **поставляются потребителям** вместе с npm-пакетами `@iskra-ui/*`.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Пакеты `@iskra-ui/*`
|
|
8
|
+
|
|
9
|
+
| Пакет | Статус |
|
|
10
|
+
| --------------------- | ---------------------------------------------- |
|
|
11
|
+
| `@iskra-ui/tokens` | Проприетарное ПО |
|
|
12
|
+
| `@iskra-ui/styles` | Проприетарное ПО + сторонние шрифты (см. ниже) |
|
|
13
|
+
| `@iskra-ui/icons` | Проприетарное ПО |
|
|
14
|
+
| `@iskra-ui/core` | Проприетарное ПО |
|
|
15
|
+
| `@iskra-ui/react` | Проприетарное ПО |
|
|
16
|
+
| `@iskra-ui/vue` | Проприетарное ПО |
|
|
17
|
+
| `@iskra-ui/dci-react` | Проприетарное ПО |
|
|
18
|
+
|
|
19
|
+
Исходный код, дизайн-токены, компоненты, документация и торговые обозначения **Искра.DCI** / **ИСКРА.DCI** принадлежат правообладателю платформы. Все права защищены.
|
|
20
|
+
|
|
21
|
+
Пакеты публикуются в публичном npm-реестре (`publishConfig.access: public`). Использование, копирование, распространение и модификация **вне условий, согласованных с правообладателем**, запрещены.
|
|
22
|
+
|
|
23
|
+
Приватные пакеты монорепозитория (`@iskra-ui/eslint-config`, `@iskra-ui/tsconfig`, `@iskra-ui/docs-react`) распространяются только внутри репозитория и не публикуются в npm.
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## Сторонние компоненты в составе поставки
|
|
28
|
+
|
|
29
|
+
### Шрифты (`@iskra-ui/styles`)
|
|
30
|
+
|
|
31
|
+
В бандл `@iskra-ui/styles` встроены variable-шрифты (self-hosted, без CDN):
|
|
32
|
+
|
|
33
|
+
| Шрифт | Файл | Лицензия |
|
|
34
|
+
| ---------------------------------------------------- | ---------------------------------- | --------------------------------------------------------- |
|
|
35
|
+
| [Inter](https://rsms.me/inter/) | `Inter-VariableFont_opsz_wght.ttf` | [SIL Open Font License 1.1](https://openfontlicense.org/) |
|
|
36
|
+
| [JetBrains Mono](https://www.jetbrains.com/lp/mono/) | `JetBrainsMono_wght_.ttf` | [SIL Open Font License 1.1](https://openfontlicense.org/) |
|
|
37
|
+
|
|
38
|
+
Шрифты копируются в `packages/styles/dist/fonts/` при сборке пакета. При распространении производных продуктов необходимо сохранять уведомления OFL для этих файлов.
|
|
39
|
+
|
|
40
|
+
**Краткое условие OFL 1.1:** шрифты можно использовать, изучать, модифицировать и распространять при условии, что производные шрифты не продаются отдельно и что уведомление об авторских правах и лицензии OFL сохраняется в составе дистрибутива.
|
|
41
|
+
|
|
42
|
+
### Иконки (`@iskra-ui/icons`)
|
|
43
|
+
|
|
44
|
+
Набор `@iskra-ui/icons` — **оригинальная SVG-разметка** Искра.DCI (16×16, stroke 1.5px), нарисованная под геометрию outline-иконок, принятую в бренде.
|
|
45
|
+
|
|
46
|
+
Геометрия согласована со стилем:
|
|
47
|
+
|
|
48
|
+
| Источник | Лицензия | Примечание |
|
|
49
|
+
| --------------------------------------------- | -------- | ---------------------------------------------------------------------- |
|
|
50
|
+
| [Feather Icons](https://feathericons.com/) | MIT | Референс по stroke и сетке; глифы в репозитории не копируются дословно |
|
|
51
|
+
| [Heroicons](https://heroicons.com/) (outline) | MIT | Допустимый заменитель при отсутствии глифа в наборе |
|
|
52
|
+
|
|
53
|
+
MIT-лицензии Feather Icons и Heroicons **не распространяются** на код `@iskra-ui/icons`, но указаны как происхождение визуального языка. При публикации открытых форков или выноса иконок в отдельный OSS-пакет — сверьтесь с юридической службой правообладателя.
|
|
54
|
+
|
|
55
|
+
### Инструменты разработки (не входят в npm-поставку)
|
|
56
|
+
|
|
57
|
+
Зависимости dev/build (React, Vue, Vite, Storybook, ESLint, Turbo, Changesets и др.) подчиняются лицензиям соответствующих проектов. Они **не включаются** в publishable-артефакты `@iskra-ui/*` и в этом документе не перечисляются.
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Торговые марки
|
|
62
|
+
|
|
63
|
+
**Искра**, **Искра.DCI**, **ИСКРА.DCI**, логотип-искра и маскот **Бит** — элементы бренда платформы. Их использование вне продуктов правообладателя регулируется отдельно от лицензии на исходный код.
|
|
64
|
+
|
|
65
|
+
Названия **React**, **Vue**, **pnpm**, **Storybook** и других сторонних проектов принадлежат их владельцам.
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## Вопросы по лицензированию
|
|
70
|
+
|
|
71
|
+
По условиям использования пакетов `@iskra-ui/*`, white-label брендингу и включению компонентов в сторонние продукты обращайтесь к правообладателю платформы Искра.DCI.
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## См. также
|
|
76
|
+
|
|
77
|
+
- [README.md](README.md) — обзор монорепозитория
|
|
78
|
+
- [docs/PACKAGES.md](docs/PACKAGES.md) — состав поставки пакетов
|
|
79
|
+
- [CONTRIBUTING.md](CONTRIBUTING.md) — разработка и релизы
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/* Искра.DCI — semantic element/utility classes built on design tokens. */
|
|
2
|
+
.iskra-scope {
|
|
3
|
+
font-size: 14px;
|
|
4
|
+
} /* enforce intentional 14px root */
|
|
5
|
+
|
|
6
|
+
.h1 {
|
|
7
|
+
font-family: var(--font-display);
|
|
8
|
+
font-size: var(--text-h1);
|
|
9
|
+
line-height: var(--lh-h1);
|
|
10
|
+
font-weight: var(--wt-h1);
|
|
11
|
+
letter-spacing: -0.02em;
|
|
12
|
+
color: var(--fg1);
|
|
13
|
+
}
|
|
14
|
+
.h2 {
|
|
15
|
+
font-family: var(--font-display);
|
|
16
|
+
font-size: var(--text-h2);
|
|
17
|
+
line-height: var(--lh-h2);
|
|
18
|
+
font-weight: var(--wt-h2);
|
|
19
|
+
letter-spacing: -0.02em;
|
|
20
|
+
color: var(--fg1);
|
|
21
|
+
}
|
|
22
|
+
.h3 {
|
|
23
|
+
font-family: var(--font-display);
|
|
24
|
+
font-size: var(--text-h3);
|
|
25
|
+
line-height: var(--lh-h3);
|
|
26
|
+
font-weight: var(--wt-h3);
|
|
27
|
+
letter-spacing: -0.01em;
|
|
28
|
+
color: var(--fg1);
|
|
29
|
+
}
|
|
30
|
+
.p {
|
|
31
|
+
font-family: var(--font-ui);
|
|
32
|
+
font-size: var(--text-ui);
|
|
33
|
+
line-height: var(--lh-ui);
|
|
34
|
+
color: var(--fg1);
|
|
35
|
+
}
|
|
36
|
+
.small {
|
|
37
|
+
font-size: var(--text-small);
|
|
38
|
+
line-height: var(--lh-sm);
|
|
39
|
+
color: var(--fg2);
|
|
40
|
+
}
|
|
41
|
+
.mono {
|
|
42
|
+
font-family: var(--font-mono);
|
|
43
|
+
font-size: var(--text-mono);
|
|
44
|
+
line-height: var(--lh-mono);
|
|
45
|
+
color: var(--fg1);
|
|
46
|
+
}
|
|
47
|
+
.code {
|
|
48
|
+
font-family: var(--font-mono);
|
|
49
|
+
font-size: var(--text-mono);
|
|
50
|
+
color: var(--accent-safe);
|
|
51
|
+
}
|
|
52
|
+
.label {
|
|
53
|
+
font-family: var(--font-mono);
|
|
54
|
+
font-size: var(--text-label);
|
|
55
|
+
letter-spacing: 0.12em;
|
|
56
|
+
text-transform: uppercase;
|
|
57
|
+
color: var(--fg2);
|
|
58
|
+
}
|
|
Binary file
|
|
Binary file
|
package/dist/fonts.css
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/* Искра.DCI — self-hosted variable fonts (no CDN). */
|
|
2
|
+
@font-face {
|
|
3
|
+
font-family: 'Inter';
|
|
4
|
+
src: url('./fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
|
|
5
|
+
font-weight: 100 900;
|
|
6
|
+
font-style: normal;
|
|
7
|
+
font-display: swap;
|
|
8
|
+
}
|
|
9
|
+
@font-face {
|
|
10
|
+
font-family: 'JetBrains Mono';
|
|
11
|
+
src: url('./fonts/JetBrainsMono_wght_.ttf') format('truetype');
|
|
12
|
+
font-weight: 100 800;
|
|
13
|
+
font-style: normal;
|
|
14
|
+
font-display: swap;
|
|
15
|
+
}
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,297 @@
|
|
|
1
|
+
/* Искра.DCI — @iskra-ui/styles bundle (GENERATED, do not edit). */
|
|
2
|
+
|
|
3
|
+
/* Искра.DCI — self-hosted variable fonts (no CDN). */
|
|
4
|
+
@font-face {
|
|
5
|
+
font-family: 'Inter';
|
|
6
|
+
src: url('./fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
|
|
7
|
+
font-weight: 100 900;
|
|
8
|
+
font-style: normal;
|
|
9
|
+
font-display: swap;
|
|
10
|
+
}
|
|
11
|
+
@font-face {
|
|
12
|
+
font-family: 'JetBrains Mono';
|
|
13
|
+
src: url('./fonts/JetBrainsMono_wght_.ttf') format('truetype');
|
|
14
|
+
font-weight: 100 800;
|
|
15
|
+
font-style: normal;
|
|
16
|
+
font-display: swap;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
/* Искра.DCI design tokens — GENERATED by @iskra-ui/tokens (do not edit). */
|
|
21
|
+
/* Hard-Shell Minimal · single accent hue · root font-size is intentionally 14px. */
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Do not edit directly, this file was auto-generated.
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
:root {
|
|
28
|
+
--border: 1px solid var(--line);
|
|
29
|
+
--focus-ring: 0 0 0 1px var(--accent);
|
|
30
|
+
--border-width-thin: 1px;
|
|
31
|
+
--border-width-regular: 1px;
|
|
32
|
+
--border-width-strong: 2px;
|
|
33
|
+
--bp-sm: 640px;
|
|
34
|
+
--bp-md: 768px;
|
|
35
|
+
--bp-lg: 1024px;
|
|
36
|
+
--bp-xl: 1280px;
|
|
37
|
+
--bg: #0d1117; /** Global page background */
|
|
38
|
+
--panel: #161b22; /** Elevated graphite — cards, modals */
|
|
39
|
+
--panel-soft: #1d2530;
|
|
40
|
+
--panel-muted: #202a35;
|
|
41
|
+
--line: #30363d;
|
|
42
|
+
--line-soft: rgba(48, 54, 61, 0.5);
|
|
43
|
+
--fg1: #f0f6fc; /** Primary text */
|
|
44
|
+
--fg2: #8b949e; /** Secondary text, placeholders */
|
|
45
|
+
--fg3: #6e7681; /** Tertiary / disabled */
|
|
46
|
+
--accent: #00ffc2; /** Indicators, borders, focus ONLY — never accent text on dark */
|
|
47
|
+
--accent-hover: #00cc9a;
|
|
48
|
+
--accent-safe: #00aa85; /** AA-safe accent for text/fills */
|
|
49
|
+
--accent-soft: rgba(0, 170, 133, 0.14);
|
|
50
|
+
--accent-line: rgba(0, 170, 133, 0.32);
|
|
51
|
+
--fg-on-accent: #0d1117; /** Dark text/icons on bright accent fills (accent stays bright across themes — stable) */
|
|
52
|
+
--fg-on-status: #ffffff; /** White text on saturated status fills (stable across themes) */
|
|
53
|
+
--scrim: #0d1117; /** Modal/overlay scrim base — always dark */
|
|
54
|
+
--status-ok: #00ffc2; /** Sync / Online */
|
|
55
|
+
--status-warn: #f97316; /** Drift / Warning */
|
|
56
|
+
--status-err: #f85149; /** Error / Critical */
|
|
57
|
+
--status-off: #6e7681; /** Maintenance / Inactive */
|
|
58
|
+
--status-info: #58a6ff; /** Info / Neutral (used minimally) */
|
|
59
|
+
--ease: cubic-bezier(.2,.6,.2,1);
|
|
60
|
+
--dur: .15s;
|
|
61
|
+
--dur-fast: 100ms;
|
|
62
|
+
--dur-normal: 150ms;
|
|
63
|
+
--dur-slow: 250ms;
|
|
64
|
+
--opacity-disabled: 0.45;
|
|
65
|
+
--opacity-muted: 0.7;
|
|
66
|
+
--opacity-overlay: 0.6;
|
|
67
|
+
--opacity-pressed: 0.85;
|
|
68
|
+
--radius: 4px;
|
|
69
|
+
--radius-sm: 2px;
|
|
70
|
+
--control-h: 32px;
|
|
71
|
+
--control-h-lg: 36px;
|
|
72
|
+
--control-s: 28px;
|
|
73
|
+
--control-m: 32px;
|
|
74
|
+
--control-l: 36px;
|
|
75
|
+
--icon-sm: 16px;
|
|
76
|
+
--icon-md: 20px;
|
|
77
|
+
--avatar-sm: 24px;
|
|
78
|
+
--avatar-md: 32px;
|
|
79
|
+
--avatar-lg: 48px;
|
|
80
|
+
--min-target: 24px;
|
|
81
|
+
--s1: 4px;
|
|
82
|
+
--s2: 8px;
|
|
83
|
+
--s3: 12px;
|
|
84
|
+
--s4: 16px;
|
|
85
|
+
--s5: 24px;
|
|
86
|
+
--s6: 32px;
|
|
87
|
+
--s7: 48px;
|
|
88
|
+
--s8: 64px;
|
|
89
|
+
--font-ui: 'Inter', system-ui, -apple-system, sans-serif;
|
|
90
|
+
--font-display: 'Inter', system-ui, -apple-system, sans-serif;
|
|
91
|
+
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
|
|
92
|
+
--text-h1: 24px;
|
|
93
|
+
--lh-h1: 1.2;
|
|
94
|
+
--wt-h1: 600;
|
|
95
|
+
--text-h2: 20px;
|
|
96
|
+
--lh-h2: 1.2;
|
|
97
|
+
--wt-h2: 600;
|
|
98
|
+
--text-h3: 18px;
|
|
99
|
+
--lh-h3: 1.2;
|
|
100
|
+
--wt-h3: 600;
|
|
101
|
+
--text-ui: 14px;
|
|
102
|
+
--lh-ui: 1.4;
|
|
103
|
+
--wt-ui: 400;
|
|
104
|
+
--text-ui-med: 14px;
|
|
105
|
+
--wt-ui-med: 500;
|
|
106
|
+
--text-small: 12px;
|
|
107
|
+
--lh-sm: 1.4;
|
|
108
|
+
--text-mono: 13px;
|
|
109
|
+
--lh-mono: 1.45;
|
|
110
|
+
--text-label: 11px;
|
|
111
|
+
--z-dropdown: 1000;
|
|
112
|
+
--z-sticky: 1100;
|
|
113
|
+
--z-overlay: 1200;
|
|
114
|
+
--z-modal: 1300;
|
|
115
|
+
--z-toast: 1400;
|
|
116
|
+
--z-tooltip: 1500;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* Do not edit directly, this file was auto-generated.
|
|
121
|
+
*/
|
|
122
|
+
|
|
123
|
+
.theme-cold {
|
|
124
|
+
--bg: #eef2f7;
|
|
125
|
+
--panel: #e2e8f0;
|
|
126
|
+
--panel-soft: #e9eef4;
|
|
127
|
+
--panel-muted: #dce3ec;
|
|
128
|
+
--line: #cdd5e0;
|
|
129
|
+
--line-soft: rgba(205, 213, 224, 0.6);
|
|
130
|
+
--fg1: #1c2128;
|
|
131
|
+
--fg2: #57606a;
|
|
132
|
+
--fg3: #8b949e;
|
|
133
|
+
--accent: #00aa85;
|
|
134
|
+
--accent-hover: #009478;
|
|
135
|
+
--accent-safe: #008268;
|
|
136
|
+
--accent-soft: #e6f7f2;
|
|
137
|
+
--accent-line: rgba(0, 170, 133, 0.32);
|
|
138
|
+
--status-ok: #00aa85;
|
|
139
|
+
--status-warn: #d0610a;
|
|
140
|
+
--status-err: #d0302a;
|
|
141
|
+
--status-off: #6e7681;
|
|
142
|
+
--status-info: #2e6da4;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/**
|
|
146
|
+
* Do not edit directly, this file was auto-generated.
|
|
147
|
+
*/
|
|
148
|
+
|
|
149
|
+
.theme-warm {
|
|
150
|
+
--bg: #f5f0e8;
|
|
151
|
+
--panel: #ede8df;
|
|
152
|
+
--panel-soft: #f0ebe3;
|
|
153
|
+
--panel-muted: #e4ded3;
|
|
154
|
+
--line: #d8d2c8;
|
|
155
|
+
--line-soft: rgba(216, 210, 200, 0.6);
|
|
156
|
+
--fg1: #1c1a17;
|
|
157
|
+
--fg2: #6b6560;
|
|
158
|
+
--fg3: #9a948c;
|
|
159
|
+
--accent: #009b78;
|
|
160
|
+
--accent-hover: #008268;
|
|
161
|
+
--accent-safe: #00795d;
|
|
162
|
+
--accent-soft: #e8f5f0;
|
|
163
|
+
--accent-line: rgba(0, 155, 120, 0.32);
|
|
164
|
+
--status-ok: #009b78;
|
|
165
|
+
--status-warn: #c2620a;
|
|
166
|
+
--status-err: #c23b36;
|
|
167
|
+
--status-off: #7a756e;
|
|
168
|
+
--status-info: #3a6fa8;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/**
|
|
172
|
+
* Do not edit directly, this file was auto-generated.
|
|
173
|
+
*/
|
|
174
|
+
|
|
175
|
+
.brand-aurora {
|
|
176
|
+
--accent: #7c5cff;
|
|
177
|
+
--accent-hover: #6a47f5;
|
|
178
|
+
--accent-safe: #6a47f5;
|
|
179
|
+
--accent-soft: rgba(124, 92, 255, 0.14);
|
|
180
|
+
--accent-line: rgba(124, 92, 255, 0.32);
|
|
181
|
+
--status-ok: #7c5cff;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
/* Искра.DCI — minimal modern reset. Scoped-friendly, no opinionated typography. */
|
|
186
|
+
*,
|
|
187
|
+
*::before,
|
|
188
|
+
*::after {
|
|
189
|
+
box-sizing: border-box;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
html {
|
|
193
|
+
-webkit-text-size-adjust: 100%;
|
|
194
|
+
text-size-adjust: 100%;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
body {
|
|
198
|
+
margin: 0;
|
|
199
|
+
font-family: var(--font-ui);
|
|
200
|
+
font-size: 14px;
|
|
201
|
+
line-height: var(--lh-ui);
|
|
202
|
+
color: var(--fg1);
|
|
203
|
+
background: var(--bg);
|
|
204
|
+
-webkit-font-smoothing: antialiased;
|
|
205
|
+
-moz-osx-font-smoothing: grayscale;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
img,
|
|
209
|
+
svg,
|
|
210
|
+
video,
|
|
211
|
+
canvas {
|
|
212
|
+
display: block;
|
|
213
|
+
max-width: 100%;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
button,
|
|
217
|
+
input,
|
|
218
|
+
select,
|
|
219
|
+
textarea {
|
|
220
|
+
font: inherit;
|
|
221
|
+
color: inherit;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
:where(:focus-visible) {
|
|
225
|
+
outline: none;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
@media (prefers-reduced-motion: reduce) {
|
|
229
|
+
*,
|
|
230
|
+
*::before,
|
|
231
|
+
*::after {
|
|
232
|
+
animation-duration: 0.01ms !important;
|
|
233
|
+
animation-iteration-count: 1 !important;
|
|
234
|
+
transition-duration: 0.01ms !important;
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
/* Искра.DCI — semantic element/utility classes built on design tokens. */
|
|
240
|
+
.iskra-scope {
|
|
241
|
+
font-size: 14px;
|
|
242
|
+
} /* enforce intentional 14px root */
|
|
243
|
+
|
|
244
|
+
.h1 {
|
|
245
|
+
font-family: var(--font-display);
|
|
246
|
+
font-size: var(--text-h1);
|
|
247
|
+
line-height: var(--lh-h1);
|
|
248
|
+
font-weight: var(--wt-h1);
|
|
249
|
+
letter-spacing: -0.02em;
|
|
250
|
+
color: var(--fg1);
|
|
251
|
+
}
|
|
252
|
+
.h2 {
|
|
253
|
+
font-family: var(--font-display);
|
|
254
|
+
font-size: var(--text-h2);
|
|
255
|
+
line-height: var(--lh-h2);
|
|
256
|
+
font-weight: var(--wt-h2);
|
|
257
|
+
letter-spacing: -0.02em;
|
|
258
|
+
color: var(--fg1);
|
|
259
|
+
}
|
|
260
|
+
.h3 {
|
|
261
|
+
font-family: var(--font-display);
|
|
262
|
+
font-size: var(--text-h3);
|
|
263
|
+
line-height: var(--lh-h3);
|
|
264
|
+
font-weight: var(--wt-h3);
|
|
265
|
+
letter-spacing: -0.01em;
|
|
266
|
+
color: var(--fg1);
|
|
267
|
+
}
|
|
268
|
+
.p {
|
|
269
|
+
font-family: var(--font-ui);
|
|
270
|
+
font-size: var(--text-ui);
|
|
271
|
+
line-height: var(--lh-ui);
|
|
272
|
+
color: var(--fg1);
|
|
273
|
+
}
|
|
274
|
+
.small {
|
|
275
|
+
font-size: var(--text-small);
|
|
276
|
+
line-height: var(--lh-sm);
|
|
277
|
+
color: var(--fg2);
|
|
278
|
+
}
|
|
279
|
+
.mono {
|
|
280
|
+
font-family: var(--font-mono);
|
|
281
|
+
font-size: var(--text-mono);
|
|
282
|
+
line-height: var(--lh-mono);
|
|
283
|
+
color: var(--fg1);
|
|
284
|
+
}
|
|
285
|
+
.code {
|
|
286
|
+
font-family: var(--font-mono);
|
|
287
|
+
font-size: var(--text-mono);
|
|
288
|
+
color: var(--accent-safe);
|
|
289
|
+
}
|
|
290
|
+
.label {
|
|
291
|
+
font-family: var(--font-mono);
|
|
292
|
+
font-size: var(--text-label);
|
|
293
|
+
letter-spacing: 0.12em;
|
|
294
|
+
text-transform: uppercase;
|
|
295
|
+
color: var(--fg2);
|
|
296
|
+
}
|
|
297
|
+
|
package/dist/reset.css
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/* Искра.DCI — minimal modern reset. Scoped-friendly, no opinionated typography. */
|
|
2
|
+
*,
|
|
3
|
+
*::before,
|
|
4
|
+
*::after {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
html {
|
|
9
|
+
-webkit-text-size-adjust: 100%;
|
|
10
|
+
text-size-adjust: 100%;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
body {
|
|
14
|
+
margin: 0;
|
|
15
|
+
font-family: var(--font-ui);
|
|
16
|
+
font-size: 14px;
|
|
17
|
+
line-height: var(--lh-ui);
|
|
18
|
+
color: var(--fg1);
|
|
19
|
+
background: var(--bg);
|
|
20
|
+
-webkit-font-smoothing: antialiased;
|
|
21
|
+
-moz-osx-font-smoothing: grayscale;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
img,
|
|
25
|
+
svg,
|
|
26
|
+
video,
|
|
27
|
+
canvas {
|
|
28
|
+
display: block;
|
|
29
|
+
max-width: 100%;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
button,
|
|
33
|
+
input,
|
|
34
|
+
select,
|
|
35
|
+
textarea {
|
|
36
|
+
font: inherit;
|
|
37
|
+
color: inherit;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
:where(:focus-visible) {
|
|
41
|
+
outline: none;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@media (prefers-reduced-motion: reduce) {
|
|
45
|
+
*,
|
|
46
|
+
*::before,
|
|
47
|
+
*::after {
|
|
48
|
+
animation-duration: 0.01ms !important;
|
|
49
|
+
animation-iteration-count: 1 !important;
|
|
50
|
+
transition-duration: 0.01ms !important;
|
|
51
|
+
}
|
|
52
|
+
}
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
/* Искра.DCI design tokens — GENERATED by @iskra-ui/tokens (do not edit). */
|
|
2
|
+
/* Hard-Shell Minimal · single accent hue · root font-size is intentionally 14px. */
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Do not edit directly, this file was auto-generated.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
--border: 1px solid var(--line);
|
|
10
|
+
--focus-ring: 0 0 0 1px var(--accent);
|
|
11
|
+
--border-width-thin: 1px;
|
|
12
|
+
--border-width-regular: 1px;
|
|
13
|
+
--border-width-strong: 2px;
|
|
14
|
+
--bp-sm: 640px;
|
|
15
|
+
--bp-md: 768px;
|
|
16
|
+
--bp-lg: 1024px;
|
|
17
|
+
--bp-xl: 1280px;
|
|
18
|
+
--bg: #0d1117; /** Global page background */
|
|
19
|
+
--panel: #161b22; /** Elevated graphite — cards, modals */
|
|
20
|
+
--panel-soft: #1d2530;
|
|
21
|
+
--panel-muted: #202a35;
|
|
22
|
+
--line: #30363d;
|
|
23
|
+
--line-soft: rgba(48, 54, 61, 0.5);
|
|
24
|
+
--fg1: #f0f6fc; /** Primary text */
|
|
25
|
+
--fg2: #8b949e; /** Secondary text, placeholders */
|
|
26
|
+
--fg3: #6e7681; /** Tertiary / disabled */
|
|
27
|
+
--accent: #00ffc2; /** Indicators, borders, focus ONLY — never accent text on dark */
|
|
28
|
+
--accent-hover: #00cc9a;
|
|
29
|
+
--accent-safe: #00aa85; /** AA-safe accent for text/fills */
|
|
30
|
+
--accent-soft: rgba(0, 170, 133, 0.14);
|
|
31
|
+
--accent-line: rgba(0, 170, 133, 0.32);
|
|
32
|
+
--fg-on-accent: #0d1117; /** Dark text/icons on bright accent fills (accent stays bright across themes — stable) */
|
|
33
|
+
--fg-on-status: #ffffff; /** White text on saturated status fills (stable across themes) */
|
|
34
|
+
--scrim: #0d1117; /** Modal/overlay scrim base — always dark */
|
|
35
|
+
--status-ok: #00ffc2; /** Sync / Online */
|
|
36
|
+
--status-warn: #f97316; /** Drift / Warning */
|
|
37
|
+
--status-err: #f85149; /** Error / Critical */
|
|
38
|
+
--status-off: #6e7681; /** Maintenance / Inactive */
|
|
39
|
+
--status-info: #58a6ff; /** Info / Neutral (used minimally) */
|
|
40
|
+
--ease: cubic-bezier(.2,.6,.2,1);
|
|
41
|
+
--dur: .15s;
|
|
42
|
+
--dur-fast: 100ms;
|
|
43
|
+
--dur-normal: 150ms;
|
|
44
|
+
--dur-slow: 250ms;
|
|
45
|
+
--opacity-disabled: 0.45;
|
|
46
|
+
--opacity-muted: 0.7;
|
|
47
|
+
--opacity-overlay: 0.6;
|
|
48
|
+
--opacity-pressed: 0.85;
|
|
49
|
+
--radius: 4px;
|
|
50
|
+
--radius-sm: 2px;
|
|
51
|
+
--control-h: 32px;
|
|
52
|
+
--control-h-lg: 36px;
|
|
53
|
+
--control-s: 28px;
|
|
54
|
+
--control-m: 32px;
|
|
55
|
+
--control-l: 36px;
|
|
56
|
+
--icon-sm: 16px;
|
|
57
|
+
--icon-md: 20px;
|
|
58
|
+
--avatar-sm: 24px;
|
|
59
|
+
--avatar-md: 32px;
|
|
60
|
+
--avatar-lg: 48px;
|
|
61
|
+
--min-target: 24px;
|
|
62
|
+
--s1: 4px;
|
|
63
|
+
--s2: 8px;
|
|
64
|
+
--s3: 12px;
|
|
65
|
+
--s4: 16px;
|
|
66
|
+
--s5: 24px;
|
|
67
|
+
--s6: 32px;
|
|
68
|
+
--s7: 48px;
|
|
69
|
+
--s8: 64px;
|
|
70
|
+
--font-ui: 'Inter', system-ui, -apple-system, sans-serif;
|
|
71
|
+
--font-display: 'Inter', system-ui, -apple-system, sans-serif;
|
|
72
|
+
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
|
|
73
|
+
--text-h1: 24px;
|
|
74
|
+
--lh-h1: 1.2;
|
|
75
|
+
--wt-h1: 600;
|
|
76
|
+
--text-h2: 20px;
|
|
77
|
+
--lh-h2: 1.2;
|
|
78
|
+
--wt-h2: 600;
|
|
79
|
+
--text-h3: 18px;
|
|
80
|
+
--lh-h3: 1.2;
|
|
81
|
+
--wt-h3: 600;
|
|
82
|
+
--text-ui: 14px;
|
|
83
|
+
--lh-ui: 1.4;
|
|
84
|
+
--wt-ui: 400;
|
|
85
|
+
--text-ui-med: 14px;
|
|
86
|
+
--wt-ui-med: 500;
|
|
87
|
+
--text-small: 12px;
|
|
88
|
+
--lh-sm: 1.4;
|
|
89
|
+
--text-mono: 13px;
|
|
90
|
+
--lh-mono: 1.45;
|
|
91
|
+
--text-label: 11px;
|
|
92
|
+
--z-dropdown: 1000;
|
|
93
|
+
--z-sticky: 1100;
|
|
94
|
+
--z-overlay: 1200;
|
|
95
|
+
--z-modal: 1300;
|
|
96
|
+
--z-toast: 1400;
|
|
97
|
+
--z-tooltip: 1500;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Do not edit directly, this file was auto-generated.
|
|
102
|
+
*/
|
|
103
|
+
|
|
104
|
+
.theme-cold {
|
|
105
|
+
--bg: #eef2f7;
|
|
106
|
+
--panel: #e2e8f0;
|
|
107
|
+
--panel-soft: #e9eef4;
|
|
108
|
+
--panel-muted: #dce3ec;
|
|
109
|
+
--line: #cdd5e0;
|
|
110
|
+
--line-soft: rgba(205, 213, 224, 0.6);
|
|
111
|
+
--fg1: #1c2128;
|
|
112
|
+
--fg2: #57606a;
|
|
113
|
+
--fg3: #8b949e;
|
|
114
|
+
--accent: #00aa85;
|
|
115
|
+
--accent-hover: #009478;
|
|
116
|
+
--accent-safe: #008268;
|
|
117
|
+
--accent-soft: #e6f7f2;
|
|
118
|
+
--accent-line: rgba(0, 170, 133, 0.32);
|
|
119
|
+
--status-ok: #00aa85;
|
|
120
|
+
--status-warn: #d0610a;
|
|
121
|
+
--status-err: #d0302a;
|
|
122
|
+
--status-off: #6e7681;
|
|
123
|
+
--status-info: #2e6da4;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Do not edit directly, this file was auto-generated.
|
|
128
|
+
*/
|
|
129
|
+
|
|
130
|
+
.theme-warm {
|
|
131
|
+
--bg: #f5f0e8;
|
|
132
|
+
--panel: #ede8df;
|
|
133
|
+
--panel-soft: #f0ebe3;
|
|
134
|
+
--panel-muted: #e4ded3;
|
|
135
|
+
--line: #d8d2c8;
|
|
136
|
+
--line-soft: rgba(216, 210, 200, 0.6);
|
|
137
|
+
--fg1: #1c1a17;
|
|
138
|
+
--fg2: #6b6560;
|
|
139
|
+
--fg3: #9a948c;
|
|
140
|
+
--accent: #009b78;
|
|
141
|
+
--accent-hover: #008268;
|
|
142
|
+
--accent-safe: #00795d;
|
|
143
|
+
--accent-soft: #e8f5f0;
|
|
144
|
+
--accent-line: rgba(0, 155, 120, 0.32);
|
|
145
|
+
--status-ok: #009b78;
|
|
146
|
+
--status-warn: #c2620a;
|
|
147
|
+
--status-err: #c23b36;
|
|
148
|
+
--status-off: #7a756e;
|
|
149
|
+
--status-info: #3a6fa8;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/**
|
|
153
|
+
* Do not edit directly, this file was auto-generated.
|
|
154
|
+
*/
|
|
155
|
+
|
|
156
|
+
.brand-aurora {
|
|
157
|
+
--accent: #7c5cff;
|
|
158
|
+
--accent-hover: #6a47f5;
|
|
159
|
+
--accent-safe: #6a47f5;
|
|
160
|
+
--accent-soft: rgba(124, 92, 255, 0.14);
|
|
161
|
+
--accent-line: rgba(124, 92, 255, 0.32);
|
|
162
|
+
--status-ok: #7c5cff;
|
|
163
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@iskra-ui/styles",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Искра.DCI global stylesheet — tokens + self-hosted fonts + reset + element classes.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"files": [
|
|
7
|
+
"dist"
|
|
8
|
+
],
|
|
9
|
+
"exports": {
|
|
10
|
+
"./index.css": "./dist/index.css",
|
|
11
|
+
"./tokens.css": "./dist/tokens.css",
|
|
12
|
+
"./fonts.css": "./dist/fonts.css",
|
|
13
|
+
"./reset.css": "./dist/reset.css",
|
|
14
|
+
"./elements.css": "./dist/elements.css"
|
|
15
|
+
},
|
|
16
|
+
"dependencies": {
|
|
17
|
+
"@iskra-ui/tokens": "0.1.0"
|
|
18
|
+
},
|
|
19
|
+
"publishConfig": {
|
|
20
|
+
"access": "public",
|
|
21
|
+
"provenance": true
|
|
22
|
+
},
|
|
23
|
+
"scripts": {
|
|
24
|
+
"build": "node build.mjs"
|
|
25
|
+
}
|
|
26
|
+
}
|