\n\n\n```\n\n## Масштабирование\n\n`font-size` у `html` задаётся в `vw` отдельно на каждом брейкпоинте:\n`font / design × 100vw`. На эталонной ширине `design` получается `1rem = font`\n(по умолчанию `design` = `min` брейкпоинта, `font` = 10px). Шрифты (`--fs-*`),\nотступы (`--space-step` = 0.4rem) и max-width `[container]` заданы в `rem`, поэтому\nвнутри брейкпоинта вся раскладка масштабируется пропорционально ширине окна и\nвыглядит одинаково: md на 768px и на 1000px — одна и та же картинка, просто крупнее.\nНа границе брейкпоинта масштаб скачком переходит к шкале следующего. Ниже первого и\nвыше последнего брейкпоинта масштабирование продолжается.\n\n| ширина | 1rem | h1 (3.2rem) |\n|--------|------|-------------|\n| 768px (md) | 10px | 32px |\n| 1023px (md) | 13.3px | 42.6px |\n| 1024px (lp) | 10px | 32px |\n\nРазмеры из макета переводятся делением на `font`: 16px → `1.6rem`, 320px → `32rem`.\n\n```scss\n@use '@cat-of-summer/st-style/scss/main/config' with (\n $breakpoints: (\n xs: (min: 360px, design: 375px, container: 343px),\n md: (min: 768px, container: 720px),\n lg: (min: 1280px, design: 1440px, font: 12px, container: 1320px),\n ),\n $font-sizes: (h1: 4rem, h2: 3rem, h3: 2.4rem, h4: 2rem, h5: 1.8rem, h6: 1.6rem, p: 1.4rem),\n);\n@use '@cat-of-summer/st-style/scss/main';\n```\n\nБез пересборки токены переопределяются в CSS (`:root { --fs-h1: 4rem }`), шкала — правилом\nна `html`. `[tx=\"h1\"]` ставит размер токена на любой элемент, свой размер —\n`tx style=\"--tx: 1.8rem\"` или просто `font-size: 1.8rem`.\n\n> [!warning]\n> Шрифт в `vw` почти не реагирует на масштаб браузера (Ctrl +/−): при зуме меняется\n> ширина вьюпорта в CSS-пикселях, и `1rem` пересчитывается обратно. Это плата за\n> жёсткое масштабирование макета. При `$scale: false` (ниже) этого эффекта нет.\n\n### Без масштабирования (`$scale: false`)\n\nДля приложений и админок, где кнопки и поля не должны расти вместе с окном,\nмасштабирование выключается флагом:\n\n```scss\n@use '@cat-of-summer/st-style/scss/main/config' with ($scale: false);\n@use '@cat-of-summer/st-style/scss/main';\n```\n\nТогда `html { font-size }` на каждом брейкпоинте — фиксированный процент от\nбраузерных 16px: `font / 16px × 100%` (10px → `62.5%`). `1rem` по-прежнему равен\n`font`, так что токены, `rem()` и `[container]` считаются так же, но учитываются\nзум и размер шрифта, выбранный пользователем в браузере.\n\nС готовым `main.css` то же самое делается без пересборки — правилом в своём CSS:\n\n```css\nhtml { font-size: 62.5% }\n```\n\n## Development\n\n```bash\nnpm install # installs sass, builds dist/ via the prepare script\nnpm run build # compile src/ → dist/*.min.css\nnpm run watch # rebuild on change\n```\n\nSource layout:\n\n```\nsrc/\n main/ index.scss + _*.scss partials # → dist/main.min.css\n _config.scss (build config), _media.scss (SCSS helpers, no CSS)\n effects/ index.scss + _*.scss partials # → dist/effects.min.css\n```\n\n**Conventions** (`build.mjs` relies on these — no script edits needed to extend):\n\n- A **folder** under `src/` whose name does **not** start with `_` is a *bundle*.\n Its `index.scss` is compiled to `dist/.min.css`. Drop a new\n `src//index.scss` and it is built automatically.\n- A **file or folder** starting with `_` is shared content (a Sass *partial* /\n partials folder), pulled in via `@use` and never compiled on its own.\n\n`dist/` is generated and git-ignored (only minified output is produced). It is\nbuilt on `npm install` (`prepare`), on `npm publish` (`prepack`), and in CI to\nattach artifacts to releases.\n\n## Configuration\n\nEach bundle has its own config partial in its folder — `src/main/_config.scss`\nand `src/effects/_config.scss` — since the two bundles share no settings.\n\nFor `main`, `$breakpoints` is the single source of truth: one map drives all\nresponsive utilities, the `html` font-size scale and the `[container]` ladder.\nEach breakpoint has a `min` (the `min-width` threshold) and optional `design`\n(mockup width, default = `min`), `font` (1rem at that width, default\n`$font-size` = 10px), `container` (the `[container]` max-width in px at the\ndesign width, emitted in rem; omit it to keep the container fluid there) and\n`gutter` (the `[container]` horizontal padding in px at the design width; a step\nwithout it keeps the previous one). Other\n`main` knobs are scales (`$space-max`/`$gap-max`/`$lc-max`), `$space-step`,\nthe typography tokens `$font-sizes`/`$font-weights`, `$scale` (`true` — vw scale,\n`false` — fixed rem, see «Без масштабирования») and `$user-select` (`auto` by\ndefault; `none` forbids text selection on `body`, inputs and contenteditable stay\nselectable). For `effects`, `$durations` is the duration map.\n\nProject SCSS gets the same breakpoints from `scss/main/media` (`up`, `down`,\n`between`, `rem`). Configure once in a project partial and `@use` it everywhere:\n\n```scss\n// _st.scss\n@forward '@cat-of-summer/st-style/scss/main/config' with ($breakpoints: ( … ));\n@forward '@cat-of-summer/st-style/scss/main/media';\n\n// any file\n@use 'st';\n.card { @include st.up(lp) { padding: st.rem(40px, lp); } }\n```\n\nEvery variable has `!default`, so a consumer overrides it **before** loading the\nrelevant bundle:\n\n```scss\n@use '@cat-of-summer/st-style/scss/main/config' with (\n $breakpoints: (\n xs: (min: 360px, container: 340px),\n sm: (min: 576px, container: 540px),\n md: (min: 768px, container: 720px),\n lg: (min: 1440px, container: 1320px),\n ),\n $space-max: 40\n);\n@use '@cat-of-summer/st-style/scss/main';\n\n@use '@cat-of-summer/st-style/scss/effects/config' with (\n $durations: (fast: 0.2s, slow: 1s)\n);\n@use '@cat-of-summer/st-style/scss/effects';\n```\n\nRuntime theming (colours, step sizes, durations) is done with CSS custom\nproperties — override `--space-step`, `--fs-h1`, `--td-fast`, … in your own CSS.\n\n## Фокус\n\nReset снимает со всех элементов стили браузера (`all: unset`), но кольцо фокуса\nвозвращает для фокуса с клавиатуры: `:where(:focus-visible) { outline: revert }`.\nПри клике мышью рамки нет. Специфичность нулевая, поэтому своё кольцо задаётся\nобычным правилом:\n\n```css\n:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }\n```\n\nУбирать кольцо целиком нельзя: с клавиатуры станет не видно, где фокус (WCAG 2.4.7).\n\n## Тёмная тема\n\nЦветов и тем во фреймворке нет, это задача проекта. Каркас переключения: системная\nтема по умолчанию, явный выбор пользователя в `data-theme` на ``, который\nхранится в куке.\n\n```css\n:root {\n color-scheme: light dark;\n --bg: #fff;\n --fg: #16181d;\n}\n/* Системная тёмная, если пользователь не выбрал светлую явно */\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) { --bg: #16181d; --fg: #e7eaf0; }\n}\n/* Явный выбор */\n:root[data-theme=\"light\"] { color-scheme: light; }\n:root[data-theme=\"dark\"] { color-scheme: dark; --bg: #16181d; --fg: #e7eaf0; }\n\nbody { background: var(--bg); color: var(--fg); }\n```\n\nПереключатель (`theme` = `light` / `dark` / `auto`):\n\n```js\nfunction setTheme(theme) {\n const root = document.documentElement;\n if (theme === 'auto') root.removeAttribute('data-theme');\n else root.dataset.theme = theme;\n document.cookie = `theme=${theme}; path=/; max-age=31536000; SameSite=Lax`;\n}\n```\n\nЧтобы страница не мигала светлой темой при загрузке, `data-theme` должен стоять до\nпервой отрисовки. Лучше всего — проставить его на сервере из куки при рендере\n``. Если сервера нет — инлайн-скрипт в `` до подключения CSS:\n\n```html\n\n```\n\nКука, а не `localStorage`, — как раз для того, чтобы тему видел сервер.\n\n## Releasing\n\nReleases are triggered by **pushing a `v*` tag** (not by ordinary pushes):\n\n```bash\ngit tag v1.2.3\ngit push origin v1.2.3\n```\n\n`.github/workflows/ci-cd.yml` (reusable workflow from `cat-of-summer/git_toolkit`)\nruns on every push. On a `v*` tag it additionally builds `dist/`, creates a GitHub\nRelease with `main.min.css` and `effects.min.css` attached and, with\n`PUBLISH_METHOD=npm`, publishes the package to **npm** (registry.npmjs.org). The\npublished version is derived from the tag (`v1.2.3` → `1.2.3`), so the tag is the\nsource of truth.\n\n## A. Use via npm\n\nПакет опубликован в публичном реестре npm — токен и `.npmrc` не нужны.\n\n### 1. Установить\n\n```bash\nnpm install @cat-of-summer/st-style\n```\n\n### 2. Использовать\n\nСкомпилированный CSS:\n\n```js\nimport '@cat-of-summer/st-style/main.css';\nimport '@cat-of-summer/st-style/effects.css';\n```\n\nИли SCSS-источник с переопределением конфига (см. **Configuration** выше):\n\n```scss\n@use '@cat-of-summer/st-style/scss/main/config' with (\n $breakpoints: ( … )\n);\n@use '@cat-of-summer/st-style/scss/main';\n```\n\n## B. Скачать артефакты релиза\n\nК каждому GitHub Release прикреплены скомпилированные файлы:\n\n```bash\ngh release download v1.2.3 -R cat-of-summer/ST-style---framework\n```\n","readmeFilename":"README.md"}