2 Commits

Author SHA1 Message Date
olly a7e2a1887d feat(window): add default inner padding to Window body
Publish npm package / publish (push) Successful in 17s
Window children rendered flush against the frame, so content (settings
rows, placeholder text) touched the left edge. Wrap children in
.modern-sk-window-body with 16px padding for consistent breathing room.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-10 14:44:17 +03:00
Senko-san 70c55dffad Update README.md 2026-06-06 15:23:16 +03:00
3 changed files with 17 additions and 9 deletions
+13 -8
View File
@@ -12,23 +12,28 @@ Old-iOS skeuomorphism × macOS Sequoia neatness × Ubuntu warmth.
## Install ## Install
Distributed via self-hosted git — install straight from the repo: Add the registry to your project `.npmrc`:
```
@olly:registry=https://git.ollyhearn.ru/api/packages/olly/npm/
```
Then install:
```bash ```bash
npm i git+https://git.ollyhearn.ru/olly/modern-sk.git npm install @olly/@olly/modern-sk
``` ```
`react` and `react-dom` (>=18) are peer dependencies — your app provides them. `react` and `react-dom` (>=18) are peer dependencies — your app provides them.
The package builds itself on install via the `prepare` script.
## Usage ## Usage
Import the stylesheet once at your app root, then use components anywhere: Import the stylesheet once at your app root, then use components anywhere:
```tsx ```tsx
import 'modern-sk/styles.css'; // required — tokens + components import '@olly/modern-sk/styles.css'; // required — tokens + components
import 'modern-sk/fonts.css'; // optional — branded faces (see Fonts) import '@olly/modern-sk/fonts.css'; // optional — branded faces (see Fonts)
import { ThemeProvider, TooltipProvider, Button, Card } from 'modern-sk'; import { ThemeProvider, TooltipProvider, Button, Card } from '@olly/modern-sk';
export function App() { export function App() {
return ( return (
@@ -49,7 +54,7 @@ export function App() {
## Fonts ## Fonts
`modern-sk/styles.css` ships **no fonts**. The type tokens default to a chain `@olly/modern-sk/styles.css` ships **no fonts**. The type tokens default to a chain
that degrades to `system-ui`, so the library works with zero font loading. that degrades to `system-ui`, so the library works with zero font loading.
To get the branded ModernSK faces (Anta display + Onest + Geist Mono), import To get the branded ModernSK faces (Anta display + Onest + Geist Mono), import
@@ -57,7 +62,7 @@ the optional stylesheet — Anta is self-hosted and inlined, no asset hosting
needed: needed:
```tsx ```tsx
import 'modern-sk/fonts.css'; import '@olly/modern-sk/fonts.css';
``` ```
To use your **own** fonts, skip `fonts.css` and override the tokens anywhere To use your **own** fonts, skip `fonts.css` and override the tokens anywhere
+1 -1
View File
@@ -21,6 +21,6 @@ export const Window = ({
</div> </div>
)} )}
</div> </div>
{children} <div className="modern-sk-window-body">{children}</div>
</div> </div>
); );
+3
View File
@@ -1227,6 +1227,9 @@ textarea.modern-sk-field {
background: var(--steel-800); background: var(--steel-800);
box-shadow: var(--shadow-window); box-shadow: var(--shadow-window);
} }
.modern-sk-window-body {
padding: 16px;
}
.modern-sk-titlebar { .modern-sk-titlebar {
height: 42px; height: 42px;
display: flex; display: flex;