@krosoft/react 0.0.174 → 0.0.176
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -12
- package/dist/tokens/radius.d.ts +6 -4
- package/dist/tokens/radius.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,11 +8,7 @@ Krosoft shared React package.
|
|
|
8
8
|
|
|
9
9
|
La forme des composants est pilotée par des variables CSS, pas par des classes `rounded-*` codées en dur : un input, un bouton et une pastille de filtre posés côte à côte ont toujours la même forme.
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
```html
|
|
14
|
-
<html lang="fr" data-radius="round"></html>
|
|
15
|
-
```
|
|
11
|
+
Trois presets existent :
|
|
16
12
|
|
|
17
13
|
| Preset | Contrôles<br><small>boutons, inputs, selects, pastilles, badges</small> | Conteneurs<br><small>cards, dialogs, popovers, menus</small> |
|
|
18
14
|
| ----------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------ |
|
|
@@ -20,16 +16,20 @@ Choisir un preset sur `<html>` :
|
|
|
20
16
|
| `soft` _(défaut)_ | `0.5rem` | `0.75rem` |
|
|
21
17
|
| `round` | capsule | `1.25rem` |
|
|
22
18
|
|
|
23
|
-
|
|
19
|
+
Un projet consommateur choisit sa forme dans son propre thème, en redéfinissant les variables. Le preset `soft` :
|
|
24
20
|
|
|
25
21
|
```css
|
|
26
22
|
:root {
|
|
27
|
-
--
|
|
28
|
-
--k-radius-
|
|
29
|
-
--radius:
|
|
23
|
+
--radius: 0.5rem; /* éléments imbriqués : items de menu, checkbox */
|
|
24
|
+
--k-radius-control: 0.5rem; /* contrôles */
|
|
25
|
+
--k-radius-surface: 0.75rem; /* conteneurs */
|
|
26
|
+
--k-radius-control-dense: 0.5rem; /* mêmes valeurs, plafonnées pour le DataTable */
|
|
27
|
+
--k-radius-surface-dense: 0.75rem;
|
|
30
28
|
}
|
|
31
29
|
```
|
|
32
30
|
|
|
31
|
+
Rien n'oblige à suivre un preset : n'importe quelle valeur convient (`--k-radius-control: 4px`). Sans redéfinition, les composants tombent sur `--radius`, donc un thème shadcn existant reste cohérent sans rien déclarer.
|
|
32
|
+
|
|
33
33
|
> **Nommage** — les tokens ajoutés par krosoft portent le préfixe `--k-`, ce qui les rend repérables d'un coup d'œil. Les tokens hérités de shadcn (`--radius`, `--primary`, `--background`, `--border`, `--sidebar-*`…) gardent leur nom d'origine : un thème généré par un outil shadcn ou un composant copié depuis la doc continuent de fonctionner tels quels.
|
|
34
34
|
|
|
35
35
|
## Tokens krosoft
|
|
@@ -46,15 +46,16 @@ Ces couleurs sont désormais mappées par le preset partagé : un projet consomm
|
|
|
46
46
|
|
|
47
47
|
Story `Démos/Radius` pour comparer les presets, sélecteur **Radius** dans la barre d'outils Storybook pour les appliquer à n'importe quelle story.
|
|
48
48
|
|
|
49
|
-
###
|
|
49
|
+
### Appliquer un preset depuis le code
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
La forme est une décision de design, pas une préférence utilisateur : elle se fixe une fois pour l'application, aux côtés des couleurs du thème. L'override de `:root` ci-dessus est la voie normale — servi avec la feuille de style, il évite tout flash au premier rendu.
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
Les mêmes presets sont exposés en TypeScript pour les cas où la forme vient du code plutôt que du CSS : configuration chargée au démarrage, application multi-marques, aperçu dans une story.
|
|
54
54
|
|
|
55
55
|
```ts
|
|
56
56
|
import { applyTokenPreset, radiusPresets } from "@krosoft/react/tokens";
|
|
57
57
|
|
|
58
|
+
// dans main.tsx, avant createRoot().render()
|
|
58
59
|
applyTokenPreset(radiusPresets, "round"); // pose les variables sur <html>
|
|
59
60
|
```
|
|
60
61
|
|
package/dist/tokens/radius.d.ts
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Presets de radius.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
4
|
+
* Source de vérité des trois presets. `globals.css` n'en reprend qu'un — les
|
|
5
|
+
* valeurs par défaut de `:root` sont celles de `soft` — et
|
|
6
|
+
* `tests/tokens/radius.test.ts` vérifie que les deux restent alignés.
|
|
7
|
+
*
|
|
8
|
+
* Un projet consommateur fige sa forme en redéfinissant les variables dans son
|
|
9
|
+
* propre thème, ou bascule à chaud avec `applyTokenPreset`.
|
|
8
10
|
*
|
|
9
11
|
* Les tokens ajoutés par krosoft portent le préfixe --k- ; ceux hérités de
|
|
10
12
|
* shadcn gardent leur nom d'origine.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radius.d.ts","sourceRoot":"","sources":["../../src/tokens/radius.ts"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"radius.d.ts","sourceRoot":"","sources":["../../src/tokens/radius.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;CAsBM,CAAC;AAEjC,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC"}
|