@smartyweb/ui 1.0.3 → 1.1.0

package/README.md

@@ -8,6 +8,7 @@ Shared React component library consumed by multiple Next.js microservices via pr
 - Vite (outputs ESM + CJS + types to `dist/`)
 - Storybook v10 for component development and documentation
 - Changesets for versioning and changelogs
+- Style Dictionary v4 for design token transformation
 
 ## Getting Started
 
@@ -21,12 +22,22 @@ npm install
 npm run storybook
 ```
 
+This also runs `node sd.config.js` first to generate CSS tokens from `tokens.json`.
+
 ### Build
 
 ```bash
 npm run build
 ```
 
+### Tokens only
+
+```bash
+npm run tokens
+```
+
+Regenerates `src/styles/_tokens.generated.scss` from `tokens.json` without building or starting Storybook.
+
 ## Usage
 
 Install the package in your consuming app:
@@ -50,17 +61,19 @@ import { Button } from "@smartyweb/ui";
 ## Project Structure
 
 ```
+sd.config.js                     # Style Dictionary config — tokens.json → _tokens.generated.scss
+tokens.json                      # Designer-owned, synced from Tokens Studio (Figma plugin)
 src/
-  components/
+  text/
     ComponentName/
       ComponentName.tsx          # "use client" at top
-      ComponentName.module.scss
+      ComponentName.module.scss  # uses var(--token-*) CSS custom properties
       ComponentName.stories.tsx
       index.ts                   # named export
     index.ts                     # barrel export
   styles/
-    _variables.scss
-    _mixins.scss
+    _variables.scss              # SCSS variables (fonts, weights, breakpoints, font-feature-settings)
+    _tokens.generated.scss       # Auto-generated by sd.config.js — do not edit manually
     global.scss
   index.ts                       # main entry point
 ```
@@ -131,6 +144,28 @@ Two secured repository variables must be configured under **Bitbucket repo → S
 
 Mark both as **Secured** so they are masked in logs.
 
+## Design Tokens
+
+Design tokens flow from Figma → code via this pipeline:
+
+1. **Designer** makes changes in Tokens Studio (Figma plugin) and syncs to the `design/tokens-update` branch
+2. **CI** (Bitbucket Pipelines) runs `npm run tokens` on push, regenerates `src/styles/_tokens.generated.scss`, and commits the diff automatically
+3. **Team** reviews the PR (seeing the exact CSS variable changes) and merges to `master`
+4. **Build** on `master` includes the updated tokens in `dist/ui.css`
+
+`sd.config.js` reads only the `Responsive/Desktop`, `Responsive/Tablet`, and `Responsive/Mobile` token sets, outputting ~99 CSS custom properties like:
+
+```css
+:root {
+	--h1-desktop-font-size: 64px;
+	--h1-desktop-line-height: 64px;
+	--h1-desktop-letter-spacing: -0.02em;
+	/* ... */
+}
+```
+
+Text components consume these via `var(--{component}-{breakpoint}-{property})`. Font families, weights, and OpenType feature settings remain as SCSS variables in `_variables.scss`.
+
 ## Architecture
 
 - **Component library only** — no routing, no pages, no app logic.
@@ -138,3 +173,4 @@ Mark both as **Secured** so they are masked in logs.
 - **CSS is compiled to a single file at build time.** No runtime CSS injection.
 - **React is a peerDependency**, not bundled.
 - **Stories are co-located with components.**
+- **`_tokens.generated.scss` is committed** so token changes are visible in PR diffs, but never edit it manually — always regenerate via `npm run tokens`.

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o="_hExtra_zekit_1",a={hExtra:o};function c({as:s="h1",children:t,className:n}){const r=[a.hExtra,n].filter(Boolean).join(" ");return e.jsx(s,{className:r,children:t})}const h="_h1_1w27n_1",i={h1:h};function l({children:s,className:t}){return e.jsx("h1",{className:`${i.h1}${t?` ${t}`:""}`,children:s})}exports.H1=l;exports.HExtra=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),e="_hExtra_dx1fb_1",c={hExtra:e};function l({as:a="h1",children:s,className:t}){const n=[c.hExtra,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const r="_h1_iuejz_1",i={h1:r};function u({children:a,className:s}){return o.jsx("h1",{className:`${i.h1}${s?` ${s}`:""}`,children:a})}const m="_h2_1i98w_1",p={h2:m};function _({as:a="h2",children:s,className:t}){const n=[p.h2,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const h="_h3_wip1f_1",f={h3:h};function j({as:a="h3",children:s,className:t}){const n=[f.h3,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const y="_h4_thwwf_1",d={h4:y};function g({as:a="h4",children:s,className:t}){const n=[d.h4,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const N="_h5_zem0s_1",x={h5:N};function B({as:a="h5",children:s,className:t}){const n=[x.h5,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const b="_h6_py9o3_1",L={h6:b};function $({as:a="h6",children:s,className:t}){const n=[L.h6,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const H="_paragraph_6mdxp_1",S={paragraph:H};function C({as:a="p",children:s,className:t}){const n=[S.paragraph,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const M="_bodyLarge_zgxpr_1",z={bodyLarge:M};function E({as:a="p",children:s,className:t}){const n=[z.bodyLarge,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const U="_bodySmall_izgxi_1",w={bodySmall:U};function P({as:a="p",children:s,className:t}){const n=[w.bodySmall,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const v="_buttonLarge_hwbzl_1",q={buttonLarge:v};function O({as:a="span",children:s,className:t}){const n=[q.buttonLarge,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const R="_buttonSmall_1psts_1",T={buttonSmall:R};function k({as:a="span",children:s,className:t}){const n=[T.buttonSmall,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const A="_captionLarge_lev6r_1",D={captionLarge:A};function F({as:a="span",children:s,className:t}){const n=[D.captionLarge,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const G="_captionMedium_1gxrg_1",I={captionMedium:G};function J({as:a="span",children:s,className:t}){const n=[I.captionMedium,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const K="_captionUppercase_1mzfy_1",Q={captionUppercase:K};function V({as:a="span",children:s,className:t}){const n=[Q.captionUppercase,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const W="_code_1to1m_1",X={code:W};function Y({as:a="code",children:s,className:t}){const n=[X.code,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}exports.BodyLarge=E;exports.BodySmall=P;exports.ButtonLarge=O;exports.ButtonSmall=k;exports.CaptionLarge=F;exports.CaptionMedium=J;exports.CaptionUppercase=V;exports.Code=Y;exports.H1=u;exports.H2=_;exports.H3=j;exports.H4=g;exports.H5=B;exports.H6=$;exports.HExtra=l;exports.Paragraph=C;

package/dist/index.js

@@ -1,18 +1,130 @@
-import { jsx as n } from "react/jsx-runtime";
-const a = "_hExtra_zekit_1", e = {
-  hExtra: a
+import { jsx as o } from "react/jsx-runtime";
+const e = "_hExtra_dx1fb_1", c = {
+  hExtra: e
 };
-function i({ as: s = "h1", children: t, className: o }) {
-  const r = [e.hExtra, o].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n(s, { className: r, children: t });
+function A({ as: a = "h1", children: s, className: n }) {
+  const t = [c.hExtra, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(a, { className: t, children: s });
 }
-const h = "_h1_1w27n_1", c = {
-  h1: h
+const l = "_h1_iuejz_1", r = {
+  h1: l
 };
-function l({ children: s, className: t }) {
-  return /* @__PURE__ */ n("h1", { className: `${c.h1}${t ? ` ${t}` : ""}`, children: s });
+function D({ children: a, className: s }) {
+  return /* @__PURE__ */ o("h1", { className: `${r.h1}${s ? ` ${s}` : ""}`, children: a });
+}
+const i = "_h2_1i98w_1", m = {
+  h2: i
+};
+function F({ as: a = "h2", children: s, className: n }) {
+  const t = [m.h2, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(a, { className: t, children: s });
+}
+const p = "_h3_wip1f_1", u = {
+  h3: p
+};
+function G({ as: a = "h3", children: s, className: n }) {
+  const t = [u.h3, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(a, { className: t, children: s });
+}
+const _ = "_h4_thwwf_1", h = {
+  h4: _
+};
+function I({ as: a = "h4", children: s, className: n }) {
+  const t = [h.h4, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(a, { className: t, children: s });
+}
+const f = "_h5_zem0s_1", N = {
+  h5: f
+};
+function J({ as: a = "h5", children: s, className: n }) {
+  const t = [N.h5, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(a, { className: t, children: s });
+}
+const y = "_h6_py9o3_1", d = {
+  h6: y
+};
+function K({ as: a = "h6", children: s, className: n }) {
+  const t = [d.h6, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(a, { className: t, children: s });
+}
+const g = "_paragraph_6mdxp_1", b = {
+  paragraph: g
+};
+function O({ as: a = "p", children: s, className: n }) {
+  const t = [b.paragraph, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(a, { className: t, children: s });
+}
+const B = "_bodyLarge_zgxpr_1", $ = {
+  bodyLarge: B
+};
+function Q({ as: a = "p", children: s, className: n }) {
+  const t = [$.bodyLarge, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(a, { className: t, children: s });
+}
+const j = "_bodySmall_izgxi_1", L = {
+  bodySmall: j
+};
+function R({ as: a = "p", children: s, className: n }) {
+  const t = [L.bodySmall, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(a, { className: t, children: s });
+}
+const x = "_buttonLarge_hwbzl_1", S = {
+  buttonLarge: x
+};
+function T({ as: a = "span", children: s, className: n }) {
+  const t = [S.buttonLarge, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(a, { className: t, children: s });
+}
+const H = "_buttonSmall_1psts_1", z = {
+  buttonSmall: H
+};
+function V({ as: a = "span", children: s, className: n }) {
+  const t = [z.buttonSmall, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(a, { className: t, children: s });
+}
+const w = "_captionLarge_lev6r_1", E = {
+  captionLarge: w
+};
+function W({ as: a = "span", children: s, className: n }) {
+  const t = [E.captionLarge, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(a, { className: t, children: s });
+}
+const M = "_captionMedium_1gxrg_1", U = {
+  captionMedium: M
+};
+function X({ as: a = "span", children: s, className: n }) {
+  const t = [U.captionMedium, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(a, { className: t, children: s });
+}
+const C = "_captionUppercase_1mzfy_1", v = {
+  captionUppercase: C
+};
+function Y({ as: a = "span", children: s, className: n }) {
+  const t = [v.captionUppercase, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(a, { className: t, children: s });
+}
+const P = "_code_1to1m_1", k = {
+  code: P
+};
+function Z({ as: a = "code", children: s, className: n }) {
+  const t = [k.code, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(a, { className: t, children: s });
 }
 export {
-  l as H1,
-  i as HExtra
+  Q as BodyLarge,
+  R as BodySmall,
+  T as ButtonLarge,
+  V as ButtonSmall,
+  W as CaptionLarge,
+  X as CaptionMedium,
+  Y as CaptionUppercase,
+  Z as Code,
+  D as H1,
+  F as H2,
+  G as H3,
+  I as H4,
+  J as H5,
+  K as H6,
+  A as HExtra,
+  O as Paragraph
 };

package/dist/text/BodyLarge/BodyLarge.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface BodyLargeProps {
+    as?: "p" | "div" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function BodyLarge({ as: Tag, children, className }: BodyLargeProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/BodyLarge/index.d.ts

@@ -0,0 +1 @@
+export { BodyLarge } from './BodyLarge';

package/dist/text/BodySmall/BodySmall.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface BodySmallProps {
+    as?: "p" | "div" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function BodySmall({ as: Tag, children, className }: BodySmallProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/BodySmall/index.d.ts

@@ -0,0 +1 @@
+export { BodySmall } from './BodySmall';

package/dist/text/ButtonLarge/ButtonLarge.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface ButtonLargeProps {
+    as?: "span" | "p" | "div";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function ButtonLarge({ as: Tag, children, className }: ButtonLargeProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/ButtonLarge/index.d.ts

@@ -0,0 +1 @@
+export { ButtonLarge } from './ButtonLarge';

package/dist/text/ButtonSmall/ButtonSmall.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface ButtonSmallProps {
+    as?: "span" | "p" | "div";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function ButtonSmall({ as: Tag, children, className }: ButtonSmallProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/ButtonSmall/index.d.ts

@@ -0,0 +1 @@
+export { ButtonSmall } from './ButtonSmall';

package/dist/text/CaptionLarge/CaptionLarge.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface CaptionLargeProps {
+    as?: "span" | "p" | "div";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function CaptionLarge({ as: Tag, children, className }: CaptionLargeProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/CaptionLarge/index.d.ts

@@ -0,0 +1 @@
+export { CaptionLarge } from './CaptionLarge';

package/dist/text/CaptionMedium/CaptionMedium.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface CaptionMediumProps {
+    as?: "span" | "p" | "div";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function CaptionMedium({ as: Tag, children, className }: CaptionMediumProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/CaptionMedium/index.d.ts

@@ -0,0 +1 @@
+export { CaptionMedium } from './CaptionMedium';

package/dist/text/CaptionUppercase/CaptionUppercase.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface CaptionUppercaseProps {
+    as?: "span" | "p" | "div";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function CaptionUppercase({ as: Tag, children, className }: CaptionUppercaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/CaptionUppercase/index.d.ts

@@ -0,0 +1 @@
+export { CaptionUppercase } from './CaptionUppercase';

package/dist/text/Code/Code.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface CodeProps {
+    as?: "code" | "pre";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function Code({ as: Tag, children, className }: CodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/Code/index.d.ts

@@ -0,0 +1 @@
+export { Code } from './Code';

package/dist/text/H2/H2.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface H2Props {
+    as?: "h1" | "h2" | "h3" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function H2({ as: Tag, children, className }: H2Props): import("react/jsx-runtime").JSX.Element;

package/dist/text/H2/index.d.ts

@@ -0,0 +1 @@
+export { H2 } from './H2';

package/dist/text/H3/H3.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface H3Props {
+    as?: "h2" | "h3" | "h4" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function H3({ as: Tag, children, className }: H3Props): import("react/jsx-runtime").JSX.Element;

package/dist/text/H3/index.d.ts

@@ -0,0 +1 @@
+export { H3 } from './H3';

package/dist/text/H4/H4.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface H4Props {
+    as?: "h3" | "h4" | "h5" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function H4({ as: Tag, children, className }: H4Props): import("react/jsx-runtime").JSX.Element;

package/dist/text/H4/index.d.ts

@@ -0,0 +1 @@
+export { H4 } from './H4';

package/dist/text/H5/H5.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface H5Props {
+    as?: "h4" | "h5" | "h6" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function H5({ as: Tag, children, className }: H5Props): import("react/jsx-runtime").JSX.Element;

package/dist/text/H5/index.d.ts

@@ -0,0 +1 @@
+export { H5 } from './H5';

package/dist/text/H6/H6.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface H6Props {
+    as?: "h5" | "h6" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function H6({ as: Tag, children, className }: H6Props): import("react/jsx-runtime").JSX.Element;

package/dist/text/H6/index.d.ts

@@ -0,0 +1 @@
+export { H6 } from './H6';

package/dist/text/Paragraph/Paragraph.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface ParagraphProps {
+    as?: "p" | "div" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function Paragraph({ as: Tag, children, className }: ParagraphProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/Paragraph/index.d.ts

@@ -0,0 +1 @@
+export { Paragraph } from './Paragraph';

package/dist/text/index.d.ts

@@ -1,2 +1,16 @@
 export * from './HExtra';
 export * from './H1';
+export * from './H2';
+export * from './H3';
+export * from './H4';
+export * from './H5';
+export * from './H6';
+export * from './Paragraph';
+export * from './BodyLarge';
+export * from './BodySmall';
+export * from './ButtonLarge';
+export * from './ButtonSmall';
+export * from './CaptionLarge';
+export * from './CaptionMedium';
+export * from './CaptionUppercase';
+export * from './Code';

package/dist/ui.css

@@ -1 +1 @@
-._hExtra_zekit_1{font-family:var(--ui-font-primary);font-weight:600;font-size:96px;line-height:106px;letter-spacing:-.03em;font-feature-settings:"dlig" 1;margin:0}@media(max-width:767px){._hExtra_zekit_1{font-size:56px;line-height:62px;letter-spacing:-.02em}}._h1_1w27n_1{font-family:var(--ui-font-primary);font-weight:500;font-size:64px;line-height:64px;letter-spacing:-.02em;font-feature-settings:"dlig" 1;margin:0}@media(max-width:767px){._h1_1w27n_1{font-size:44px;line-height:44px;letter-spacing:-.01em}}
+:root{--h-extra-desktop-font-size: 96px;--h-extra-desktop-line-height: 106px;--h-extra-desktop-letter-spacing: -.03em;--h1-desktop-font-size: 64px;--h1-desktop-line-height: 64px;--h1-desktop-letter-spacing: -.02em;--h2-desktop-font-size: 52px;--h2-desktop-line-height: 57px;--h2-desktop-letter-spacing: -.02em;--h3-desktop-font-size: 44px;--h3-desktop-line-height: 48px;--h3-desktop-letter-spacing: -.02em;--h4-desktop-font-size: 36px;--h4-desktop-line-height: 43px;--h4-desktop-letter-spacing: -.02em;--h5-desktop-font-size: 30px;--h5-desktop-line-height: 33px;--h5-desktop-letter-spacing: -.01em;--h6-desktop-font-size: 28px;--h6-desktop-line-height: 31px;--h6-desktop-letter-spacing: -.01em;--paragraph-desktop-font-size: 24px;--paragraph-desktop-line-height: 36px;--paragraph-desktop-letter-spacing: -.01em;--button-large-desktop-font-size: 20px;--button-large-desktop-line-height: 24px;--button-large-desktop-letter-spacing: -.02em;--body-large-desktop-font-size: 20px;--body-large-desktop-line-height: 30px;--body-large-desktop-letter-spacing: -.02em;--button-small-desktop-font-size: 17px;--button-small-desktop-line-height: 24px;--button-small-desktop-letter-spacing: -.02em;--body-small-desktop-font-size: 16px;--body-small-desktop-line-height: 24px;--body-small-desktop-letter-spacing: -.02em;--caption-large-desktop-font-size: 16px;--caption-large-desktop-line-height: 24px;--caption-large-desktop-letter-spacing: -.02em;--caption-medium-desktop-font-size: 12px;--caption-medium-desktop-line-height: 18px;--caption-medium-desktop-letter-spacing: -.02em;--caption-uppercase-desktop-font-size: 13px;--caption-uppercase-desktop-line-height: 16px;--caption-uppercase-desktop-letter-spacing: .04em;--code-desktop-font-size: 14px;--code-desktop-line-height: 17px;--code-desktop-letter-spacing: 0;--h-extra-tablet-font-size: 96px;--h-extra-tablet-line-height: 106px;--h-extra-tablet-letter-spacing: -.03em;--h1-tablet-font-size: 64px;--h1-tablet-line-height: 64px;--h1-tablet-letter-spacing: -.02em;--h2-tablet-font-size: 48px;--h2-tablet-line-height: 53px;--h2-tablet-letter-spacing: -.02em;--h3-tablet-font-size: 40px;--h3-tablet-line-height: 44px;--h3-tablet-letter-spacing: -.02em;--h4-tablet-font-size: 36px;--h4-tablet-line-height: 43px;--h4-tablet-letter-spacing: -.02em;--h5-tablet-font-size: 32px;--h5-tablet-line-height: 35px;--h5-tablet-letter-spacing: -.01em;--h6-tablet-font-size: 24px;--h6-tablet-line-height: 26px;--h6-tablet-letter-spacing: -.01em;--paragraph-tablet-font-size: 22px;--paragraph-tablet-line-height: 33px;--paragraph-tablet-letter-spacing: -.01em;--button-large-tablet-font-size: 18px;--button-large-tablet-line-height: 24px;--button-large-tablet-letter-spacing: -.02em;--body-large-tablet-font-size: 18px;--body-large-tablet-line-height: 27px;--body-large-tablet-letter-spacing: -.02em;--button-small-tablet-font-size: 16px;--button-small-tablet-line-height: 24px;--button-small-tablet-letter-spacing: -.02em;--body-small-tablet-font-size: 16px;--body-small-tablet-line-height: 24px;--body-small-tablet-letter-spacing: -.02em;--caption-large-tablet-font-size: 16px;--caption-large-tablet-line-height: 24px;--caption-large-tablet-letter-spacing: -.02em;--caption-medium-tablet-font-size: 12px;--caption-medium-tablet-line-height: 18px;--caption-medium-tablet-letter-spacing: -.02em;--caption-uppercase-tablet-font-size: 13px;--caption-uppercase-tablet-line-height: 16px;--caption-uppercase-tablet-letter-spacing: .04em;--code-tablet-font-size: 14px;--code-tablet-line-height: 17px;--code-tablet-letter-spacing: 0;--h-extra-mobile-font-size: 56px;--h-extra-mobile-line-height: 62px;--h-extra-mobile-letter-spacing: -.02em;--h1-mobile-font-size: 44px;--h1-mobile-line-height: 44px;--h1-mobile-letter-spacing: -.01em;--h2-mobile-font-size: 40px;--h2-mobile-line-height: 44px;--h2-mobile-letter-spacing: -.01em;--h3-mobile-font-size: 36px;--h3-mobile-line-height: 40px;--h3-mobile-letter-spacing: -.01em;--h4-mobile-font-size: 32px;--h4-mobile-line-height: 42px;--h4-mobile-letter-spacing: -.01em;--h5-mobile-font-size: 22px;--h5-mobile-line-height: 24px;--h5-mobile-letter-spacing: -.01em;--h6-mobile-font-size: 20px;--h6-mobile-line-height: 22px;--h6-mobile-letter-spacing: -.01em;--paragraph-mobile-font-size: 18px;--paragraph-mobile-line-height: 27px;--paragraph-mobile-letter-spacing: -.01em;--button-large-mobile-font-size: 16px;--button-large-mobile-line-height: 24px;--button-large-mobile-letter-spacing: -.01em;--body-large-mobile-font-size: 16px;--body-large-mobile-line-height: 24px;--body-large-mobile-letter-spacing: -.01em;--button-small-mobile-font-size: 14px;--button-small-mobile-line-height: 24px;--button-small-mobile-letter-spacing: -.01em;--body-small-mobile-font-size: 14px;--body-small-mobile-line-height: 21px;--body-small-mobile-letter-spacing: -.01em;--caption-large-mobile-font-size: 16px;--caption-large-mobile-line-height: 24px;--caption-large-mobile-letter-spacing: -.02em;--caption-medium-mobile-font-size: 12px;--caption-medium-mobile-line-height: 18px;--caption-medium-mobile-letter-spacing: -.02em;--caption-uppercase-mobile-font-size: 13px;--caption-uppercase-mobile-line-height: 16px;--caption-uppercase-mobile-letter-spacing: .04em;--code-mobile-font-size: 12px;--code-mobile-line-height: 17px;--code-mobile-letter-spacing: 0}._hExtra_dx1fb_1{font-family:var(--ui-font-primary);font-weight:600;font-size:var(--h-extra-desktop-font-size);line-height:var(--h-extra-desktop-line-height);letter-spacing:var(--h-extra-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:767px){._hExtra_dx1fb_1{font-size:var(--h-extra-mobile-font-size);line-height:var(--h-extra-mobile-line-height);letter-spacing:var(--h-extra-mobile-letter-spacing)}}._h1_iuejz_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h1-desktop-font-size);line-height:var(--h1-desktop-line-height);letter-spacing:var(--h1-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:767px){._h1_iuejz_1{font-size:var(--h1-mobile-font-size);line-height:var(--h1-mobile-line-height);letter-spacing:var(--h1-mobile-letter-spacing)}}._h2_1i98w_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h2-desktop-font-size);line-height:var(--h2-desktop-line-height);letter-spacing:var(--h2-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h2_1i98w_1{font-size:var(--h2-tablet-font-size);line-height:var(--h2-tablet-line-height)}}@media(max-width:767px){._h2_1i98w_1{font-size:var(--h2-mobile-font-size);line-height:var(--h2-mobile-line-height);letter-spacing:var(--h2-mobile-letter-spacing)}}._h3_wip1f_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h3-desktop-font-size);line-height:var(--h3-desktop-line-height);letter-spacing:var(--h3-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h3_wip1f_1{font-size:var(--h3-tablet-font-size);line-height:var(--h3-tablet-line-height)}}@media(max-width:767px){._h3_wip1f_1{font-size:var(--h3-mobile-font-size);line-height:var(--h3-mobile-line-height);letter-spacing:var(--h3-mobile-letter-spacing)}}._h4_thwwf_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h4-desktop-font-size);line-height:var(--h4-desktop-line-height);letter-spacing:var(--h4-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:767px){._h4_thwwf_1{font-size:var(--h4-mobile-font-size);line-height:var(--h4-mobile-line-height);letter-spacing:var(--h4-mobile-letter-spacing)}}._h5_zem0s_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h5-desktop-font-size);line-height:var(--h5-desktop-line-height);letter-spacing:var(--h5-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h5_zem0s_1{font-size:var(--h5-tablet-font-size);line-height:var(--h5-tablet-line-height)}}@media(max-width:767px){._h5_zem0s_1{font-size:var(--h5-mobile-font-size);line-height:var(--h5-mobile-line-height)}}._h6_py9o3_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h6-desktop-font-size);line-height:var(--h6-desktop-line-height);letter-spacing:var(--h6-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h6_py9o3_1{font-size:var(--h6-tablet-font-size);line-height:var(--h6-tablet-line-height)}}@media(max-width:767px){._h6_py9o3_1{font-size:var(--h6-mobile-font-size);line-height:var(--h6-mobile-line-height)}}._paragraph_6mdxp_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--paragraph-desktop-font-size);line-height:var(--paragraph-desktop-line-height);letter-spacing:var(--paragraph-desktop-letter-spacing);font-feature-settings:"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._paragraph_6mdxp_1{font-size:var(--paragraph-tablet-font-size);line-height:var(--paragraph-tablet-line-height)}}@media(max-width:767px){._paragraph_6mdxp_1{font-size:var(--paragraph-mobile-font-size);line-height:var(--paragraph-mobile-line-height)}}._bodyLarge_zgxpr_1{font-family:var(--ui-font-primary);font-weight:400;font-size:var(--body-large-desktop-font-size);line-height:var(--body-large-desktop-line-height);letter-spacing:var(--body-large-desktop-letter-spacing);font-feature-settings:"dlig" 1;margin:0}@media(max-width:1439px){._bodyLarge_zgxpr_1{font-size:var(--body-large-tablet-font-size);line-height:var(--body-large-tablet-line-height)}}@media(max-width:767px){._bodyLarge_zgxpr_1{font-size:var(--body-large-mobile-font-size);line-height:var(--body-large-mobile-line-height);letter-spacing:var(--body-large-mobile-letter-spacing)}}._bodySmall_izgxi_1{font-family:var(--ui-font-primary);font-weight:400;font-size:var(--body-small-desktop-font-size);line-height:var(--body-small-desktop-line-height);letter-spacing:var(--body-small-desktop-letter-spacing);font-feature-settings:"dlig" 1;margin:0}@media(max-width:767px){._bodySmall_izgxi_1{font-size:var(--body-small-mobile-font-size);line-height:var(--body-small-mobile-line-height);letter-spacing:var(--body-small-mobile-letter-spacing)}}._buttonLarge_hwbzl_1{font-family:Inter,sans-serif;font-weight:500;font-size:var(--button-large-desktop-font-size);line-height:var(--button-large-desktop-line-height);letter-spacing:var(--button-large-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:1439px){._buttonLarge_hwbzl_1{font-size:var(--button-large-tablet-font-size)}}@media(max-width:767px){._buttonLarge_hwbzl_1{font-family:var(--ui-font-primary);font-size:var(--button-large-mobile-font-size);letter-spacing:var(--button-large-mobile-letter-spacing)}}._buttonSmall_1psts_1{font-family:Inter,sans-serif;font-weight:500;font-size:var(--button-small-desktop-font-size);line-height:var(--button-small-desktop-line-height);letter-spacing:var(--button-small-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:1439px){._buttonSmall_1psts_1{font-size:var(--button-small-tablet-font-size)}}@media(max-width:767px){._buttonSmall_1psts_1{font-family:var(--ui-font-primary);font-size:var(--button-small-mobile-font-size);letter-spacing:var(--button-small-mobile-letter-spacing)}}._captionLarge_lev6r_1{font-family:Inter,sans-serif;font-weight:500;font-size:var(--caption-large-desktop-font-size);line-height:var(--caption-large-desktop-line-height);letter-spacing:var(--caption-large-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:767px){._captionLarge_lev6r_1{font-family:var(--ui-font-primary)}}._captionMedium_1gxrg_1{font-family:Inter,sans-serif;font-weight:400;font-size:var(--caption-medium-desktop-font-size);line-height:var(--caption-medium-desktop-line-height);letter-spacing:var(--caption-medium-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:767px){._captionMedium_1gxrg_1{font-family:var(--ui-font-primary)}}._captionUppercase_1mzfy_1{font-family:Inter,sans-serif;font-weight:400;font-size:var(--caption-uppercase-desktop-font-size);line-height:var(--caption-uppercase-desktop-line-height);letter-spacing:var(--caption-uppercase-desktop-letter-spacing);font-feature-settings:"dlig" 1;text-transform:uppercase}@media(max-width:767px){._captionUppercase_1mzfy_1{font-family:var(--ui-font-primary)}}._code_1to1m_1{font-family:Hack,monospace;font-weight:400;font-size:var(--code-desktop-font-size);line-height:var(--code-desktop-line-height);letter-spacing:var(--code-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:767px){._code_1to1m_1{font-size:var(--code-mobile-font-size)}}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartyweb/ui",
-	"version": "1.0.3",
+	"version": "1.1.0",
 	"type": "module",
 	"main": "dist/index.cjs",
 	"module": "dist/index.js",
@@ -17,11 +17,12 @@
 		"dist"
 	],
 	"scripts": {
-		"build": "vite build",
+		"tokens": "node sd.config.js",
+		"build": "node sd.config.js && vite build",
 		"typecheck": "tsc --noEmit",
 		"changeset": "changeset",
 		"release": "changeset publish",
-		"storybook": "storybook dev -p 6006",
+		"storybook": "node sd.config.js && storybook dev -p 6006",
 		"build-storybook": "storybook build"
 	},
 	"peerDependencies": {
@@ -30,7 +31,7 @@
 	},
 	"devDependencies": {
 		"@changesets/cli": "^2.29.8",
-		"@storybook/react-vite": "^10.2.8",
+		"@storybook/react-vite": "^10.2.15",
 		"@types/react": "^19.2.13",
 		"@types/react-dom": "^19.2.3",
 		"@vitejs/plugin-react": "^5.1.3",
@@ -38,7 +39,8 @@
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
 		"sass": "^1.97.3",
-		"storybook": "^10.2.8",
+		"storybook": "^10.2.15",
+		"style-dictionary": "^4.4.0",
 		"typescript": "^5.9.3",
 		"vite": "^7.3.1",
 		"vite-plugin-dts": "^4.5.4"