CordKitCord

Un seul style pour toute la suite Cord.

Le design, les composants et les outils que partagent Drivecord, Tunecord et le reste de la suite.

Voir les composantsLe code

Les couleurs

Tout part de tokens/tokens.json. Change une valeur, relance npm run tokens, et le CSS et le Swift suivent.

Fonds

  • ink#060509
  • ink-2#0d0b14

Texte

  • text#f3f1fa
  • dim#9a95b4
  • faint#5f5b78

Lumière

  • light-core#f2edff
  • light-mid#8d78ff
  • light-warm#ffb08a

Traits, semi-transparents

  • line#ffffff14
  • line-strong#ffffff29

Les polices

Construis avec Cord.

Bricolage Grotesque pour les titres, Instrument Sans pour le texte.

Geist Mono pour le code : npm install @cordsuite/ui

Les composants

Boutons

CommencerVoir la doc

Encadré

Verre liquide

La matière des éléments qu'on touche : un fond flou qui laisse passer la lumière, un reflet doux et un liseré. Ajoute la classe cord-glass à n'importe quel bloc.

VerrePar défaut
Verre légerPour la lecture

Recherche

Celle du haut de cette page. Quand elle a le focus, la lumière du bas monte. La touche / y amène.

Pour iOS

Les apps natives ne partagent pas de code web, mais elles partagent les valeurs : native/CordTokens.swift contient les mêmes couleurs et les mêmes noms de polices.

Text("Construis avec Cord.")
    .foregroundStyle(CordTokens.Palette.text)
    .background(CordTokens.Palette.ink)

Dans ton app web

npm install @cordsuite/ui

// layout.tsx
import { Glow } from "@cordsuite/ui";
import "@cordsuite/ui/styles.css";

Avec Next.js, ajoute transpilePackages: ["@cordsuite/ui"] dans next.config.