@krosoft/react 0.0.174 → 0.0.175
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 +10 -10
- 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
|
|
@@ -48,7 +48,7 @@ Story `Démos/Radius` pour comparer les presets, sélecteur **Radius** dans la b
|
|
|
48
48
|
|
|
49
49
|
### Changer de preset au runtime
|
|
50
50
|
|
|
51
|
-
Quand la forme est figée pour toute l'application, l'
|
|
51
|
+
Quand la forme est figée pour toute l'application, l'override de `:root` ci-dessus reste le bon choix : servi avec la feuille de style, il évite tout flash au premier rendu.
|
|
52
52
|
|
|
53
53
|
Pour un changement à chaud (sélecteur utilisateur, Storybook), les mêmes presets sont exposés en TypeScript — un preset n'est rien d'autre qu'un jeu de variables CSS :
|
|
54
54
|
|
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"}
|