@cuboapp/styles
v2.0.0
Published
Cubo Styles — SaaS design system: tokens, typography, themes and markdown styles. Generates plain CSS for apps, websites and presentations.
Maintainers
acrobatiusReadme
Cubo Styles
Design system for SaaS products — one set of tokens for the UI kit, web apps, websites and presentations. Built with Vite + TypeScript + SCSS (docs site in Vue 3 TSX), distributed as plain CSS.
Published as @cuboapp/styles.
Every public custom property and class is namespaced with a c- prefix
(--c-color-*, .c-markdown, …) so the styles can be embedded inside a host
app without colliding with its own CSS.
npm install @cuboapp/stylesFeatures
- Colors — blue, red, green, orange, gray, white, black and primary
(equals blue,
#3B82F6, by default). Every scale has 10 gradations with suffixes of 10:--c-color-primary-10(lightest) …--c-color-primary-100(darkest), step50is the base tone. - Configurable accents — primary, green and orange are plain CSS custom properties; re-brand at runtime without rebuilding (the docs site has a live configurator).
- Light & dark themes — semantic tokens (
--c-color-bg,--c-color-text,--c-color-border, …) switch viadata-theme="light|dark"on<html>(or any subtree — themes can be nested). - Inter Variable as the default typeface, with Cyrillic.
- rem everywhere — every size (spacing, type, radii, shadows) is rem-based.
- Markdown styles — wrap rendered markdown in
class="c-markdown"and all constructs are covered: headings, quotes (incl. nested), lists, task lists, code blocks, tables, images with wraps (c-img-left/c-img-right/c-img-center/c-img-full), figures, footnotes,kbd,mark, details, hr.
Commands
npm install
npm run dev # docs site with live reload
npm run build # docs site → dist/site + CSS → dist/css
npm run build:css # CSS only
npm run typecheck # vue-tscGenerated CSS (npm run build:css → dist/css/)
Each entry ships expanded and .min.css variants.
| File | Contents |
| --- | --- |
| all.css | Namespaced bundle: tokens + themes + markdown + utilities (no global resets — safe to embed) |
| global.css | Global base: reset + element typography (opt-in; applies to bare <h1>, <p>, … on the page) |
| tokens.css | Custom properties only (tokens + themes) |
| markdown.css | Markdown content styles only (.c-markdown) |
| fonts.css + fonts/ | Inter Variable @font-face (all subsets incl. Cyrillic) |
all.css deliberately omits the global reset so it won't clobber a host app's
elements. Use global.css only when Cubo owns the whole page.
Include from the package (e.g. served via your bundler or a CDN like unpkg):
<link rel="stylesheet" href="@cuboapp/styles/css/fonts.css" />
<link rel="stylesheet" href="@cuboapp/styles/css/all.min.css" />
<!-- add global.css too if Cubo owns the whole page -->Or consume the SCSS sources directly (requires sass):
@use '@cuboapp/styles/scss/index.scss'; // everything
@use '@cuboapp/styles/scss/tokens.scss'; // tokens onlyTheming
<html data-theme="dark"> <!-- whole app dark -->
<aside data-theme="light">…</aside> <!-- nested override -->
</html>Re-branding
Primary aliases blue by default. Override the scale variables (no rebuild):
:root {
--c-color-primary-50: #7c3aed; /* base tone */
--c-color-primary-10: color-mix(in oklab, #7c3aed 7%, white);
/* …steps 20–100; see src/docs/colorConfig.ts for ramp generation */
}Green and orange are configurable the same way. To change the default at build
time, edit the palettes in src/styles/_palette.scss.
Repository layout
src/styles/ # the design system (SCSS source of truth)
_palette.scss # raw color scales
tokens/ # colors, typography, spacing, radius, shadows, motion
themes/ # light / dark semantic tokens
base/ # reset + element typography
components/ # markdown content styles
utilities/ # small utility classes
index.scss # namespaced bundle entry → all.css
global.scss # global base/reset entry → global.css
tokens.scss # tokens-only entry → tokens.css
markdown.scss # markdown-only entry → markdown.css
src/docs/ # public docs site (Vue 3 TSX)
scripts/build-css.ts # dist/css generator