Add initial Nebula Core packages and docs
Import initial monorepo structure for Nebula Core: add packages (@nebula/core, core-glyphs, core-input, core-navigation, core-theme, core-ui, core-utils) with source, dist, tests and assets. Expand README with overview, quick start and API snippets, and add package-level documentation files. Add jsconfig.json for path mapping, package.json and lockfiles to bootstrap the repo. This commit sets up the project layout, docs, and local package links for further development.
This commit is contained in:
+23
@@ -0,0 +1,23 @@
|
||||
# @nebula/core-theme
|
||||
|
||||
Theme tokens tuned for readable, couch-friendly UI. Exports plain objects and helpers only.
|
||||
|
||||
## Why it exists
|
||||
TV and handheld screens need higher contrast, larger type, and clearer spacing. This package provides opinionated defaults that work well from a distance.
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import { baseTheme, createTheme } from "@nebula/core-theme";
|
||||
|
||||
const theme = createTheme({
|
||||
colors: {
|
||||
accent: "#44d3ff"
|
||||
}
|
||||
});
|
||||
|
||||
console.log(baseTheme.typography.display, theme.colors.accent);
|
||||
```
|
||||
|
||||
## SteamOS / Steam Deck notes
|
||||
Use `display` or `title` sizes for primary UI. Keep contrast high for use in bright rooms or handheld mode.
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "@nebulaproject/core-theme",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"description": "Theme tokens for readable, couch-friendly UI.",
|
||||
"type": "module",
|
||||
"exports": "./src/index.js",
|
||||
"main": "./src/index.js",
|
||||
"files": [
|
||||
"src"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "node --test"
|
||||
}
|
||||
}
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* Nebula Core default theme tokens.
|
||||
* @type {{
|
||||
* colors: Record<string, string>,
|
||||
* spacing: Record<string, number>,
|
||||
* radius: Record<string, number>,
|
||||
* typography: Record<string, number>,
|
||||
* motion: Record<string, number>
|
||||
* }}
|
||||
*/
|
||||
export const baseTheme = {
|
||||
colors: {
|
||||
background: "#0b0d12",
|
||||
surface: "#161a22",
|
||||
accent: "#5b7cff",
|
||||
text: "#f5f7ff",
|
||||
textMuted: "#b7c0d8",
|
||||
focus: "#8ddcff",
|
||||
danger: "#ff6363"
|
||||
},
|
||||
spacing: {
|
||||
xs: 4,
|
||||
sm: 8,
|
||||
md: 16,
|
||||
lg: 24,
|
||||
xl: 32,
|
||||
xxl: 48
|
||||
},
|
||||
radius: {
|
||||
sm: 6,
|
||||
md: 10,
|
||||
lg: 16,
|
||||
pill: 999
|
||||
},
|
||||
typography: {
|
||||
caption: 12,
|
||||
body: 16,
|
||||
title: 22,
|
||||
display: 32
|
||||
},
|
||||
motion: {
|
||||
fast: 120,
|
||||
base: 200,
|
||||
slow: 320
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Merge theme overrides with the Nebula base tokens.
|
||||
* @param {Partial<typeof baseTheme>} overrides
|
||||
* @returns {typeof baseTheme}
|
||||
*/
|
||||
export function createTheme(overrides = {}) {
|
||||
return {
|
||||
colors: { ...baseTheme.colors, ...overrides.colors },
|
||||
spacing: { ...baseTheme.spacing, ...overrides.spacing },
|
||||
radius: { ...baseTheme.radius, ...overrides.radius },
|
||||
typography: { ...baseTheme.typography, ...overrides.typography },
|
||||
motion: { ...baseTheme.motion, ...overrides.motion }
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user