@tarik-leviathan/ltds

v0.4.9

Published

4 months ago

Leviathan Tarik Design System (tokens, utils, atoms)

Downloads

272

0High
0Medium
0Low

tarik-leviathan

design-system css tokens utilities atoms vite

LTDS — Leviathan Tarik Design System

Design system minimaliste, modulaire et distribuable via npm. Inclut : tokens (couleurs, typo, scale), reset, utilitaires (spacing, grids/flex, dimensions…), layouts de base et atomes (buttons).

Installation

npm i @tarik-leviathan/ltds

Utilisation rapide (tout le DS)

Vite / bundlers modernes

import '@tarik-leviathan/ltds/styles';

Tree-shaking par entrées ciblées

Vous pouvez importer uniquement une partie des styles :

Core (reset + tokens + colors)

import '@tarik-leviathan/ltds/styles/core';

Utilitaires (spacing, grids, flex, dimensions, utilities…)

import '@tarik-leviathan/ltds/styles/utils';

Atomes (ex: buttons)

import '@tarik-leviathan/ltds/styles/buttons';

Theming & couleurs

Le cœur des couleurs est piloté par les brand tokens. Pour surcharger globalement :

:root {
  --brand-primary: rgb(136, 91, 241);
  --brand-primary-hover: oklch(from var(--brand-primary) calc(l * .90) c h);
  --brand-primary-active: oklch(from var(--brand-primary) calc(l * .80) c h);
}

Schémas prêts à l’emploi via attribut :

<body data-scheme="1"> … </body> <!-- violet/plum -->
<body data-scheme="2"> … </body> <!-- bleu/azure -->

Typographie

LTDS expose des tokens de typo (familles, graisses, échelle). Les fichiers @font-face doivent être gérés par votre application (DS agnostique côté fonts).

Exemple d’override :


:root{
  --font-family-base: "Anton", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-accent: "Mona Sans", var(--font-family-base);
}

Breakpoints (max-width)

414px (small-mobile)

768px (mobile)

1024px (tablet)

1199px (notepad)

1439px (laptop)

1919px (desktop)

Versioning & publication

Le repo utilise Conventional Commits et un flux release + tag + publish automatisé via GitHub Actions.

coder, committer

git add .
git commit -m "feat: nouvelle utilitaire responsive fs"

release

npm run release

push avec tags (déclenche le workflow lt-factory/.github/workflows/publish-on-tag.yml)

git push origin main --follow-tags

La CI (workflow publish-on-tag.yml) :

installe deps
build
npm publish --access public

⚠️ Prérequis : secret NPM_TOKEN (automation token npm) dans GitHub → Repo → Settings → Secrets and variables → Actions.

Convention commits

Conventions attendues par standard-version

fix: → pour une correction de bug (→ patch)
feat: → pour une nouvelle fonctionnalité (→ minor)
perf: → pour une amélioration de performance
docs: → uniquement pour la doc
style: → pour le style/formatage
refactor: → refacto sans changement de fonctionnalité
test: → ajout/modif de tests
chore: → tâches diverses, outils, CI, dépendances…

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme