@kenlo/kdls-design-system 2.0.0

package/foundations/Scrollbar/Scrollbar.css

@@ -0,0 +1,26 @@
+/* ============================================================
+   KDLS Scrollbar — styled scrollbar
+
+   Two widths:
+     .kdls-scroll          normal width (auto)
+     .kdls-scroll--thin    thin bar
+
+   Thumb color: neutral-30 (auto-inverts in dark — no dark block).
+   Uses the system's native bar, so it keeps the arrow.
+
+   Where to apply it (the container needs its own overflow):
+     <div className="kdls-scroll kdls-scroll--thin">…</div>
+     <html class="kdls-scroll">   (page's root bar)
+
+   Support: Chrome, Edge and Firefox (scrollbar-width + scrollbar-color).
+   Safari doesn't support these properties → shows the default native bar.
+   ============================================================ */
+
+.kdls-scroll {
+  scrollbar-width: auto;
+  scrollbar-color: var(--color-neutral-30) transparent;
+}
+
+.kdls-scroll--thin {
+  scrollbar-width: thin;
+}

package/foundations/styles.css

@@ -0,0 +1,269 @@
+/* ============================================================
+   KDLS — Spacing utilities (opt-in)
+
+   Import:  @kenlo/kdls-design-system/styles.css
+   Brings the tokens and the scrollbar utility along (self-contained),
+   so it works standalone, no need to use components.
+
+   Classes with the SAME names as Tailwind (p-4, gap-2, mx-auto…),
+   with the value coming from the tokens. Do NOT load alongside Tailwind —
+   pick one: this file OR the preset (tailwind-preset).
+
+   GENERATED by scripts/gen-styles.mjs (npm run gen:styles) — do not hand-edit.
+   ============================================================ */
+
+@import './tokens.css';
+@import './Scrollbar/Scrollbar.css';
+
+/* ── Padding ── */
+.p-0\.5 { padding: var(--spacing-0-5); }
+.p-1 { padding: var(--spacing-1); }
+.p-2 { padding: var(--spacing-2); }
+.p-3 { padding: var(--spacing-3); }
+.p-4 { padding: var(--spacing-4); }
+.p-5 { padding: var(--spacing-5); }
+.p-6 { padding: var(--spacing-6); }
+.p-7 { padding: var(--spacing-7); }
+.p-8 { padding: var(--spacing-8); }
+.p-9 { padding: var(--spacing-9); }
+.p-10 { padding: var(--spacing-10); }
+.p-12 { padding: var(--spacing-12); }
+.p-14 { padding: var(--spacing-14); }
+.p-16 { padding: var(--spacing-16); }
+.px-0\.5 { padding-left: var(--spacing-0-5); padding-right: var(--spacing-0-5); }
+.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
+.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
+.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
+.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
+.px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
+.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
+.px-7 { padding-left: var(--spacing-7); padding-right: var(--spacing-7); }
+.px-8 { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
+.px-9 { padding-left: var(--spacing-9); padding-right: var(--spacing-9); }
+.px-10 { padding-left: var(--spacing-10); padding-right: var(--spacing-10); }
+.px-12 { padding-left: var(--spacing-12); padding-right: var(--spacing-12); }
+.px-14 { padding-left: var(--spacing-14); padding-right: var(--spacing-14); }
+.px-16 { padding-left: var(--spacing-16); padding-right: var(--spacing-16); }
+.py-0\.5 { padding-top: var(--spacing-0-5); padding-bottom: var(--spacing-0-5); }
+.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
+.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
+.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
+.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
+.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
+.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
+.py-7 { padding-top: var(--spacing-7); padding-bottom: var(--spacing-7); }
+.py-8 { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }
+.py-9 { padding-top: var(--spacing-9); padding-bottom: var(--spacing-9); }
+.py-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
+.py-12 { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }
+.py-14 { padding-top: var(--spacing-14); padding-bottom: var(--spacing-14); }
+.py-16 { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); }
+.pt-0\.5 { padding-top: var(--spacing-0-5); }
+.pt-1 { padding-top: var(--spacing-1); }
+.pt-2 { padding-top: var(--spacing-2); }
+.pt-3 { padding-top: var(--spacing-3); }
+.pt-4 { padding-top: var(--spacing-4); }
+.pt-5 { padding-top: var(--spacing-5); }
+.pt-6 { padding-top: var(--spacing-6); }
+.pt-7 { padding-top: var(--spacing-7); }
+.pt-8 { padding-top: var(--spacing-8); }
+.pt-9 { padding-top: var(--spacing-9); }
+.pt-10 { padding-top: var(--spacing-10); }
+.pt-12 { padding-top: var(--spacing-12); }
+.pt-14 { padding-top: var(--spacing-14); }
+.pt-16 { padding-top: var(--spacing-16); }
+.pr-0\.5 { padding-right: var(--spacing-0-5); }
+.pr-1 { padding-right: var(--spacing-1); }
+.pr-2 { padding-right: var(--spacing-2); }
+.pr-3 { padding-right: var(--spacing-3); }
+.pr-4 { padding-right: var(--spacing-4); }
+.pr-5 { padding-right: var(--spacing-5); }
+.pr-6 { padding-right: var(--spacing-6); }
+.pr-7 { padding-right: var(--spacing-7); }
+.pr-8 { padding-right: var(--spacing-8); }
+.pr-9 { padding-right: var(--spacing-9); }
+.pr-10 { padding-right: var(--spacing-10); }
+.pr-12 { padding-right: var(--spacing-12); }
+.pr-14 { padding-right: var(--spacing-14); }
+.pr-16 { padding-right: var(--spacing-16); }
+.pb-0\.5 { padding-bottom: var(--spacing-0-5); }
+.pb-1 { padding-bottom: var(--spacing-1); }
+.pb-2 { padding-bottom: var(--spacing-2); }
+.pb-3 { padding-bottom: var(--spacing-3); }
+.pb-4 { padding-bottom: var(--spacing-4); }
+.pb-5 { padding-bottom: var(--spacing-5); }
+.pb-6 { padding-bottom: var(--spacing-6); }
+.pb-7 { padding-bottom: var(--spacing-7); }
+.pb-8 { padding-bottom: var(--spacing-8); }
+.pb-9 { padding-bottom: var(--spacing-9); }
+.pb-10 { padding-bottom: var(--spacing-10); }
+.pb-12 { padding-bottom: var(--spacing-12); }
+.pb-14 { padding-bottom: var(--spacing-14); }
+.pb-16 { padding-bottom: var(--spacing-16); }
+.pl-0\.5 { padding-left: var(--spacing-0-5); }
+.pl-1 { padding-left: var(--spacing-1); }
+.pl-2 { padding-left: var(--spacing-2); }
+.pl-3 { padding-left: var(--spacing-3); }
+.pl-4 { padding-left: var(--spacing-4); }
+.pl-5 { padding-left: var(--spacing-5); }
+.pl-6 { padding-left: var(--spacing-6); }
+.pl-7 { padding-left: var(--spacing-7); }
+.pl-8 { padding-left: var(--spacing-8); }
+.pl-9 { padding-left: var(--spacing-9); }
+.pl-10 { padding-left: var(--spacing-10); }
+.pl-12 { padding-left: var(--spacing-12); }
+.pl-14 { padding-left: var(--spacing-14); }
+.pl-16 { padding-left: var(--spacing-16); }
+
+/* ── Margin ── */
+.m-0\.5 { margin: var(--spacing-0-5); }
+.m-1 { margin: var(--spacing-1); }
+.m-2 { margin: var(--spacing-2); }
+.m-3 { margin: var(--spacing-3); }
+.m-4 { margin: var(--spacing-4); }
+.m-5 { margin: var(--spacing-5); }
+.m-6 { margin: var(--spacing-6); }
+.m-7 { margin: var(--spacing-7); }
+.m-8 { margin: var(--spacing-8); }
+.m-9 { margin: var(--spacing-9); }
+.m-10 { margin: var(--spacing-10); }
+.m-12 { margin: var(--spacing-12); }
+.m-14 { margin: var(--spacing-14); }
+.m-16 { margin: var(--spacing-16); }
+.mx-0\.5 { margin-left: var(--spacing-0-5); margin-right: var(--spacing-0-5); }
+.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }
+.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
+.mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }
+.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
+.mx-5 { margin-left: var(--spacing-5); margin-right: var(--spacing-5); }
+.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }
+.mx-7 { margin-left: var(--spacing-7); margin-right: var(--spacing-7); }
+.mx-8 { margin-left: var(--spacing-8); margin-right: var(--spacing-8); }
+.mx-9 { margin-left: var(--spacing-9); margin-right: var(--spacing-9); }
+.mx-10 { margin-left: var(--spacing-10); margin-right: var(--spacing-10); }
+.mx-12 { margin-left: var(--spacing-12); margin-right: var(--spacing-12); }
+.mx-14 { margin-left: var(--spacing-14); margin-right: var(--spacing-14); }
+.mx-16 { margin-left: var(--spacing-16); margin-right: var(--spacing-16); }
+.my-0\.5 { margin-top: var(--spacing-0-5); margin-bottom: var(--spacing-0-5); }
+.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
+.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
+.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
+.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
+.my-5 { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); }
+.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
+.my-7 { margin-top: var(--spacing-7); margin-bottom: var(--spacing-7); }
+.my-8 { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }
+.my-9 { margin-top: var(--spacing-9); margin-bottom: var(--spacing-9); }
+.my-10 { margin-top: var(--spacing-10); margin-bottom: var(--spacing-10); }
+.my-12 { margin-top: var(--spacing-12); margin-bottom: var(--spacing-12); }
+.my-14 { margin-top: var(--spacing-14); margin-bottom: var(--spacing-14); }
+.my-16 { margin-top: var(--spacing-16); margin-bottom: var(--spacing-16); }
+.mt-0\.5 { margin-top: var(--spacing-0-5); }
+.mt-1 { margin-top: var(--spacing-1); }
+.mt-2 { margin-top: var(--spacing-2); }
+.mt-3 { margin-top: var(--spacing-3); }
+.mt-4 { margin-top: var(--spacing-4); }
+.mt-5 { margin-top: var(--spacing-5); }
+.mt-6 { margin-top: var(--spacing-6); }
+.mt-7 { margin-top: var(--spacing-7); }
+.mt-8 { margin-top: var(--spacing-8); }
+.mt-9 { margin-top: var(--spacing-9); }
+.mt-10 { margin-top: var(--spacing-10); }
+.mt-12 { margin-top: var(--spacing-12); }
+.mt-14 { margin-top: var(--spacing-14); }
+.mt-16 { margin-top: var(--spacing-16); }
+.mr-0\.5 { margin-right: var(--spacing-0-5); }
+.mr-1 { margin-right: var(--spacing-1); }
+.mr-2 { margin-right: var(--spacing-2); }
+.mr-3 { margin-right: var(--spacing-3); }
+.mr-4 { margin-right: var(--spacing-4); }
+.mr-5 { margin-right: var(--spacing-5); }
+.mr-6 { margin-right: var(--spacing-6); }
+.mr-7 { margin-right: var(--spacing-7); }
+.mr-8 { margin-right: var(--spacing-8); }
+.mr-9 { margin-right: var(--spacing-9); }
+.mr-10 { margin-right: var(--spacing-10); }
+.mr-12 { margin-right: var(--spacing-12); }
+.mr-14 { margin-right: var(--spacing-14); }
+.mr-16 { margin-right: var(--spacing-16); }
+.mb-0\.5 { margin-bottom: var(--spacing-0-5); }
+.mb-1 { margin-bottom: var(--spacing-1); }
+.mb-2 { margin-bottom: var(--spacing-2); }
+.mb-3 { margin-bottom: var(--spacing-3); }
+.mb-4 { margin-bottom: var(--spacing-4); }
+.mb-5 { margin-bottom: var(--spacing-5); }
+.mb-6 { margin-bottom: var(--spacing-6); }
+.mb-7 { margin-bottom: var(--spacing-7); }
+.mb-8 { margin-bottom: var(--spacing-8); }
+.mb-9 { margin-bottom: var(--spacing-9); }
+.mb-10 { margin-bottom: var(--spacing-10); }
+.mb-12 { margin-bottom: var(--spacing-12); }
+.mb-14 { margin-bottom: var(--spacing-14); }
+.mb-16 { margin-bottom: var(--spacing-16); }
+.ml-0\.5 { margin-left: var(--spacing-0-5); }
+.ml-1 { margin-left: var(--spacing-1); }
+.ml-2 { margin-left: var(--spacing-2); }
+.ml-3 { margin-left: var(--spacing-3); }
+.ml-4 { margin-left: var(--spacing-4); }
+.ml-5 { margin-left: var(--spacing-5); }
+.ml-6 { margin-left: var(--spacing-6); }
+.ml-7 { margin-left: var(--spacing-7); }
+.ml-8 { margin-left: var(--spacing-8); }
+.ml-9 { margin-left: var(--spacing-9); }
+.ml-10 { margin-left: var(--spacing-10); }
+.ml-12 { margin-left: var(--spacing-12); }
+.ml-14 { margin-left: var(--spacing-14); }
+.ml-16 { margin-left: var(--spacing-16); }
+
+/* ── Gap ── */
+.gap-0\.5 { gap: var(--spacing-0-5); }
+.gap-1 { gap: var(--spacing-1); }
+.gap-2 { gap: var(--spacing-2); }
+.gap-3 { gap: var(--spacing-3); }
+.gap-4 { gap: var(--spacing-4); }
+.gap-5 { gap: var(--spacing-5); }
+.gap-6 { gap: var(--spacing-6); }
+.gap-7 { gap: var(--spacing-7); }
+.gap-8 { gap: var(--spacing-8); }
+.gap-9 { gap: var(--spacing-9); }
+.gap-10 { gap: var(--spacing-10); }
+.gap-12 { gap: var(--spacing-12); }
+.gap-14 { gap: var(--spacing-14); }
+.gap-16 { gap: var(--spacing-16); }
+.gap-x-0\.5 { column-gap: var(--spacing-0-5); }
+.gap-x-1 { column-gap: var(--spacing-1); }
+.gap-x-2 { column-gap: var(--spacing-2); }
+.gap-x-3 { column-gap: var(--spacing-3); }
+.gap-x-4 { column-gap: var(--spacing-4); }
+.gap-x-5 { column-gap: var(--spacing-5); }
+.gap-x-6 { column-gap: var(--spacing-6); }
+.gap-x-7 { column-gap: var(--spacing-7); }
+.gap-x-8 { column-gap: var(--spacing-8); }
+.gap-x-9 { column-gap: var(--spacing-9); }
+.gap-x-10 { column-gap: var(--spacing-10); }
+.gap-x-12 { column-gap: var(--spacing-12); }
+.gap-x-14 { column-gap: var(--spacing-14); }
+.gap-x-16 { column-gap: var(--spacing-16); }
+.gap-y-0\.5 { row-gap: var(--spacing-0-5); }
+.gap-y-1 { row-gap: var(--spacing-1); }
+.gap-y-2 { row-gap: var(--spacing-2); }
+.gap-y-3 { row-gap: var(--spacing-3); }
+.gap-y-4 { row-gap: var(--spacing-4); }
+.gap-y-5 { row-gap: var(--spacing-5); }
+.gap-y-6 { row-gap: var(--spacing-6); }
+.gap-y-7 { row-gap: var(--spacing-7); }
+.gap-y-8 { row-gap: var(--spacing-8); }
+.gap-y-9 { row-gap: var(--spacing-9); }
+.gap-y-10 { row-gap: var(--spacing-10); }
+.gap-y-12 { row-gap: var(--spacing-12); }
+.gap-y-14 { row-gap: var(--spacing-14); }
+.gap-y-16 { row-gap: var(--spacing-16); }
+
+/* ── Margin auto ── */
+.m-auto { margin: auto; }
+.mx-auto { margin-left: auto; margin-right: auto; }
+.my-auto { margin-top: auto; margin-bottom: auto; }
+.mt-auto { margin-top: auto; }
+.mr-auto { margin-right: auto; }
+.mb-auto { margin-bottom: auto; }
+.ml-auto { margin-left: auto; }

package/foundations/tailwind-preset.cjs

@@ -0,0 +1,39 @@
+/* ============================================================
+   KDLS — preset de Tailwind
+
+   Mapeia a escala de spacing do Tailwind para os tokens do KDLS.
+   Com isso, p-4 / m-2 / gap-2 (padding, margin, gap, etc.) passam a
+   usar var(--spacing-*) em vez do valor cravado do Tailwind.
+
+   Uso (tailwind.config.js):
+     presets: [require('@kenlo/kdls-design-system/tailwind-preset')]
+
+   Requer os tokens carregados (tokens.css OU dist/index.css).
+   NÃO usar junto do styles.css — escolha um: preset OU styles.css.
+   Cor: fica para depois (por ora só spacing/gap).
+
+   Usa theme.extend.spacing: sobrescreve só estas chaves com os tokens
+   e mantém o resto da escala padrão do Tailwind intacto.
+   ============================================================ */
+module.exports = {
+  theme: {
+    extend: {
+      spacing: {
+        '0.5': 'var(--spacing-0-5)',
+        1: 'var(--spacing-1)',
+        2: 'var(--spacing-2)',
+        3: 'var(--spacing-3)',
+        4: 'var(--spacing-4)',
+        5: 'var(--spacing-5)',
+        6: 'var(--spacing-6)',
+        7: 'var(--spacing-7)',
+        8: 'var(--spacing-8)',
+        9: 'var(--spacing-9)',
+        10: 'var(--spacing-10)',
+        12: 'var(--spacing-12)',
+        14: 'var(--spacing-14)',
+        16: 'var(--spacing-16)',
+      },
+    },
+  },
+};