@techv/design-system 0.1.3 → 0.1.5

package/README.md

@@ -27,10 +27,15 @@ pnpm add @techv/design-system styled-components
 Import the global CSS in your app entry point. This loads the CSS custom properties (design tokens) and dark mode support.
 
 ```tsx
-// index.tsx or App.tsx
 import '@techv/design-system/styles.css';
 ```
 
+To use utility classes (className-based styling), also import:
+
+```tsx
+import '@techv/design-system/utility.css';
+```
+
 ---
 
 ## Components
@@ -128,249 +133,253 @@ import { IconButton } from '@techv/design-system';
 
 ---
 
-## Design Tokens
-
-### CSS Custom Properties
-
-Import `styles.css` to get all tokens as CSS variables on `:root`, usable anywhere in your app.
-
-```css
-.my-component {
-  background-color: var(--color-brand-500);
-  padding: var(--space-md);
-  border-radius: var(--radius-lg);
-}
-```
+## Utility Classes
 
-### JavaScript Tokens
+Import `@techv/design-system/utility.css` to use className-based styling. Classes map directly to design tokens.
 
-#### Inline styles
-
-Use tokens directly in React `style` props:
+### Badge
 
 ```tsx
-import { tokens, colors, spacing, radii } from '@techv/design-system';
-
-function Badge({ children }: { children: React.ReactNode }) {
-  return (
-    <span
-      style={{
-        backgroundColor: tokens.color.brand[50],   // '#EEF2FF'
-        color: tokens.color.brand[700],             // '#3730A3'
-        padding: `${tokens.space.xs}px ${tokens.space.sm}px`, // '4px 8px'
-        borderRadius: tokens.radius.full,           // 9999
-        fontSize: tokens.fontSize.caption,          // '12px'
-        fontFamily: tokens.font.text,               // 'Inter'
-      }}
-    >
-      {children}
-    </span>
-  );
-}
+<span className="bg-indigo-50 tx-indigo-700 px-2 py-1 br-full fs-xs fw-5">
+  New
+</span>
 ```
 
-#### Alert / status banner
+### Alert / status banner
 
 ```tsx
-import { tokens, colors } from '@techv/design-system';
-
-type AlertType = 'success' | 'danger' | 'warning';
-
-const alertStyles: Record<AlertType, React.CSSProperties> = {
-  success: {
-    backgroundColor: tokens.color.success[50],   // '#ECFDF5'
-    color: tokens.color.success[500],            // '#10B981'
-    border: `1px solid ${tokens.color.success[500]}`,
-  },
-  danger: {
-    backgroundColor: tokens.color.danger[50],    // '#FEF2F2'
-    color: tokens.color.danger[500],             // '#EF4444'
-    border: `1px solid ${tokens.color.danger[500]}`,
-  },
-  warning: {
-    backgroundColor: tokens.color.warning[50],   // '#FFFBEB'
-    color: tokens.color.warning[500],            // '#F59E0B'
-    border: `1px solid ${tokens.color.warning[500]}`,
-  },
-};
-
-function Alert({ type, message }: { type: AlertType; message: string }) {
+function Alert({ type, message }: { type: 'success' | 'danger' | 'warning'; message: string }) {
+  const styles = {
+    success: 'bg-green-50 tx-green-700 bd-green-300 border bw-1',
+    danger:  'bg-red-50 tx-red-700 bd-red-300 border bw-1',
+    warning: 'bg-amber-50 tx-amber-700 bd-amber-300 border bw-1',
+  };
+
   return (
-    <div
-      role="alert"
-      style={{
-        ...alertStyles[type],
-        padding: `${tokens.space.sm}px ${tokens.space.md}px`, // '8px 16px'
-        borderRadius: tokens.radius.md,                        // 6
-        fontSize: tokens.fontSize.bodyMd,                      // '14px'
-      }}
-    >
+    <div role="alert" className={`${styles[type]} px-4 py-2 br-md fs-sm`}>
       {message}
     </div>
   );
 }
 
-// Usage
 <Alert type="success" message="Profile saved!" />
-<Alert type="danger" message="Something went wrong." />
+<Alert type="danger"  message="Something went wrong." />
 <Alert type="warning" message="Your session expires soon." />
 ```
 
-#### Card component
+### Card
 
 ```tsx
-import { tokens } from '@techv/design-system';
-
 function Card({ title, body }: { title: string; body: string }) {
   return (
-    <div
-      style={{
-        backgroundColor: tokens.semantic.surface,  // '#FFFFFF'
-        border: `1px solid ${tokens.semantic.border}`, // '#E5E7EB'
-        borderRadius: tokens.radius['2xl'],         // 16
-        padding: tokens.space.xl,                   // 32
-        boxShadow: tokens.shadow.md,
-        maxWidth: '400px',
-      }}
-    >
-      <h2
-        style={{
-          margin: 0,
-          fontSize: tokens.fontSize.h4,             // '18px'
-          color: tokens.semantic.textPrimary,        // '#111827'
-          marginBottom: tokens.space.sm,             // 8
-        }}
-      >
-        {title}
-      </h2>
-      <p
-        style={{
-          margin: 0,
-          fontSize: tokens.fontSize.bodyMd,          // '14px'
-          color: tokens.semantic.textSecondary,       // '#6B7280'
-          lineHeight: 1.6,
-        }}
-      >
-        {body}
-      </p>
+    <div className="bg-white bd-gray-200 border bw-1 br-2xl p-8 sh-3">
+      <h2 className="fs-lg fw-6 tx-gray-900 mb-2">{title}</h2>
+      <p className="fs-sm tx-gray-500 lh-relaxed">{body}</p>
     </div>
   );
 }
 ```
 
-#### Using flat `colors` / `spacing` / `radii` exports
+### Tag
 
 ```tsx
-import { colors, spacing, radii } from '@techv/design-system';
-
 function Tag({ label }: { label: string }) {
   return (
-    <span
-      style={{
-        backgroundColor: colors.gray100,   // '#F3F4F6'
-        color: colors.gray700,             // '#374151'
-        padding: `${spacing.xs} ${spacing.sm}`, // '4px 8px'
-        borderRadius: radii.sm,            // '4px'
-        border: `1px solid ${colors.border}`, // '#E5E7EB'
-      }}
-    >
+    <span className="bg-gray-100 tx-gray-700 px-2 py-1 br-md bd-gray-200 border bw-1 fs-xs fw-5">
       {label}
     </span>
   );
 }
 ```
 
-#### Animated element using duration + easing tokens
+### Flex layout
 
 ```tsx
-import { tokens } from '@techv/design-system';
+<div className="flex items-center gap-4 px-4 py-2">
+  <span className="fw-6 tx-gray-900">Title</span>
+  <span className="tx-gray-500 fs-sm">Subtitle</span>
+</div>
+```
 
-function FadeInBox({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      style={{
-        padding: tokens.space.lg,         // 24
-        backgroundColor: tokens.color.brand[50],
-        borderRadius: tokens.radius.xl,   // 12
-        transition: `opacity ${tokens.duration.normal}ms ${tokens.ease.standard}`,
-                     // 200ms cubic-bezier(0.4, 0, 0.2, 1)
-      }}
-    >
-      {children}
-    </div>
-  );
-}
+---
+
+## Class Reference
+
+### Colors
+
+| Pattern | Example | Property |
+|---|---|---|
+| `bg-{color}-{weight}` | `bg-indigo-500` | `background-color` |
+| `tx-{color}-{weight}` | `tx-gray-700` | `color` |
+| `bd-{color}-{weight}` | `bd-gray-200` | `border-color` |
+| `bg-white` / `bg-black` | — | `background-color` |
+| `tx-white` / `tx-black` | — | `color` |
+
+Available colors: `red` `orange` `amber` `yellow` `lime` `green` `teal` `cyan` `sky` `blue` `indigo` `violet` `purple` `pink` `rose` `slate` `gray` `zinc`
+
+Weights: `50` `100` `200` `300` `400` `500` `600` `700` `800` `900`
+
+### Spacing
+
+| Pattern | Example | Values |
+|---|---|---|
+| `p-{n}` | `p-4` → 16px | 0–32 |
+| `px-{n}` | `px-2` → 8px | 0–32 |
+| `py-{n}` | `py-1` → 4px | 0–32 |
+| `pt/pb/pl/pr-{n}` | `pt-2` | 0–32 |
+| `m-{n}` | `m-4` | 0–32 |
+| `mx-{n}` / `my-{n}` | `mx-auto` | 0–32 + auto |
+| `mt/mb/ml/mr-{n}` | `mb-2` | 0–32 |
+| `gap-{n}` / `gap-x-{n}` / `gap-y-{n}` | `gap-4` | 0–32 |
+
+Spacing values: 0=0px · 0.5=2px · 1=4px · 1.5=6px · 2=8px · 2.5=10px · 3=12px · 4=16px · 5=20px · 6=24px · 8=32px · 10=40px · 12=48px · 16=64px
+
+### Typography
+
+| Class | Value |
+|---|---|
+| `fs-xs` | 12px |
+| `fs-sm` | 14px |
+| `fs-md` | 16px |
+| `fs-lg` | 18px |
+| `fs-xl` | 20px |
+| `fs-2xl` | 24px |
+| `fs-3xl` | 30px |
+| `fs-4xl` | 36px |
+| `fs-5xl` | 48px |
+| `fw-3` | 300 |
+| `fw-4` | 400 |
+| `fw-5` | 500 |
+| `fw-6` | 600 |
+| `fw-7` | 700 |
+| `fw-8` | 800 |
+| `fw-9` | 900 |
+| `lh-tight` | 1.25 |
+| `lh-base` | 1.5 |
+| `lh-relaxed` | 1.625 |
+| `ta-l` / `ta-c` / `ta-r` | text-align |
+
+### Border
+
+| Class | Value |
+|---|---|
+| `border` | `border-style: solid` |
+| `border-t/b/l/r` | per-side solid border |
+| `bw-1` | 1px |
+| `bw-2` | 2px |
+| `bw-4` | 4px |
+| `br-none` | 0px |
+| `br-sm` | 2px |
+| `br-md` | 4px |
+| `br-lg` | 8px |
+| `br-xl` | 12px |
+| `br-2xl` | 16px |
+| `br-full` | 9999px |
+
+### Shadow & Opacity
+
+| Class | Description |
+|---|---|
+| `sh-1` – `sh-5` | Elevation levels |
+| `sh-none` | No shadow |
+| `op-0` – `op-100` | Opacity (0–1) |
+
+### Layout
+
+| Class | Value |
+|---|---|
+| `flex` | `display: flex` |
+| `inline-flex` | `display: inline-flex` |
+| `block` | `display: block` |
+| `hidden` | `display: none` |
+| `flex-row` | `flex-direction: row` |
+| `flex-col` | `flex-direction: column` |
+| `flex-wrap` | `flex-wrap: wrap` |
+| `items-center` | `align-items: center` |
+| `items-start` | `align-items: flex-start` |
+| `justify-center` | `justify-content: center` |
+| `justify-between` | `justify-content: space-between` |
+| `justify-end` | `justify-content: flex-end` |
+| `relative` | `position: relative` |
+| `absolute` | `position: absolute` |
+| `w-full` | `width: 100%` |
+| `h-full` | `height: 100%` |
+
+---
+
+## CSS Custom Properties
+
+All tokens are also available as CSS variables:
+
+```css
+background-color: var(--indigo-500);
+color: var(--gray-700);
+border-color: var(--red-200);
+
+padding: var(--spacing-4);           /* 16px */
+gap: var(--spacing-2);               /* 8px  */
+
+font-size: var(--fs-lg);             /* 18px */
+font-weight: var(--fw-6);            /* 600  */
+
+border-radius: var(--br-lg);         /* 8px  */
+box-shadow: var(--sh-3);
 ```
 
-#### Quick reference
+---
+
+## JavaScript Tokens
+
+Import token values for use in styled-components or dynamic styles:
 
 ```tsx
-import { tokens, colors, spacing, radii } from '@techv/design-system';
-
-// tokens — full structured object
-tokens.color.brand[500]      // '#4F46E5'
-tokens.color.gray[200]       // '#E5E7EB'
-tokens.space.md              // 16  (number, use as px)
-tokens.radius.lg             // 8   (number, use as px)
-tokens.shadow.md             // '0 4px 6px rgba(0,0,0,0.07)...'
-tokens.duration.normal       // 200 (number, ms)
-tokens.ease.standard         // 'cubic-bezier(0.4, 0, 0.2, 1)'
-tokens.font.text             // 'Inter'
-tokens.fontSize.h1           // '36px'
-tokens.semantic.textPrimary  // '#111827'
-
-// colors — flat convenience object
-colors.brand500              // '#4F46E5'
-colors.textPrimary           // '#111827'
-colors.border                // '#E5E7EB'
-
-// spacing — string values ready for CSS
-spacing.md                   // '16px'
-spacing.lg                   // '24px'
-
-// radii — string values ready for CSS
-radii.sm                     // '4px'
-radii.full                   // '9999px'
+import { bg, tx, bd, fl, spacing, fs, fw, lh, ta, br, bw, sh, op, duration, ease } from '@techv/design-system';
 ```
 
-### Token Reference
+| Export | Purpose | Example |
+|---|---|---|
+| `colors` | Full color palette | `colors.red[500]` → `'#EF4444'` |
+| `bg` | Background colors (alias of colors) | `bg.indigo[50]` → `'#EEF2FF'` |
+| `tx` | Text colors (alias of colors) | `tx.gray[700]` → `'#374151'` |
+| `bd` | Border colors (alias of colors) | `bd.gray[200]` → `'#E5E7EB'` |
+| `fl` | SVG fill colors (alias of colors) | `fl.green[400]` → `'#4ADE80'` |
+| `spacing` | 4px-base numeric scale | `spacing[4]` → `'16px'` |
+| `fs` | Font sizes | `fs.sm` → `'14px'` |
+| `fw` | Font weights | `fw[7]` → `'700'` |
+| `lh` | Line heights | `lh.base` → `1.5` |
+| `ta` | Text alignment | `ta.c` → `'center'` |
+| `br` | Border radius | `br.full` → `'9999px'` |
+| `bw` | Border widths | `bw[1]` → `'1px'` |
+| `sh` | Shadows | `sh[3]` → md elevation |
+| `op` | Opacity | `op[50]` → `'0.5'` |
+| `duration` | Animation durations | `duration.normal` → `'200ms'` |
+| `ease` | Easing curves | `ease.standard` |
+
+### Using tokens in styled-components
 
-#### Colors
+```tsx
+import styled from 'styled-components';
+import { bg, bd, tx, spacing, br, sh, fs, fw, bw } from '@techv/design-system';
 
-| Token | Value |
-|---|---|
-| `brand 50–900` | Indigo scale |
-| `success 50, 500` | Green |
-| `danger 50, 500` | Red |
-| `warning 50, 500` | Amber |
-| `info 50, 500` | Blue |
-| `gray 50–900` | Neutral gray scale |
+const Card = styled.div`
+  background:    ${bg.white};
+  border:        ${bw[1]} solid ${bd.gray[200]};
+  border-radius: ${br['2xl']};
+  padding:       ${spacing[8]};
+  box-shadow:    ${sh[3]};
+`;
 
-#### Spacing
+const Heading = styled.h2`
+  font-size:   ${fs.lg};
+  font-weight: ${fw[6]};
+  color:       ${tx.gray[900]};
+`;
 
-| Token | Value |
-|---|---|
-| `2xs` | 2px |
-| `xs` | 4px |
-| `sm` | 8px |
-| `md` | 16px |
-| `lg` | 24px |
-| `xl` | 32px |
-| `2xl` | 48px |
-| `3xl` | 64px |
-
-#### Border radius
-
-| Token | Value |
-|---|---|
-| `none` | 0 |
-| `xs` | 2px |
-| `sm` | 4px |
-| `md` | 6px |
-| `lg` | 8px |
-| `xl` | 12px |
-| `2xl` | 16px |
-| `full` | 9999px |
+const Body = styled.p`
+  font-size: ${fs.sm};
+  color:     ${tx.gray[500]};
+`;
+```
 
 ---
 
@@ -379,10 +388,8 @@ radii.full                   // '9999px'
 The library ships with a built-in dark mode. Toggle it by setting `data-theme="dark"` on any ancestor element (typically `<html>` or `<body>`).
 
 ```tsx
-// Enable dark mode
 document.documentElement.setAttribute('data-theme', 'dark');
 
-// Disable dark mode
 document.documentElement.removeAttribute('data-theme');
 ```
 
@@ -397,20 +404,3 @@ Full TypeScript support is included. All component props and token types are exp
 ```tsx
 import type { ButtonProps, IconButtonProps } from '@techv/design-system';
 ```
-
----
-
-## Using tokens in styled-components
-
-```tsx
-import styled from 'styled-components';
-import { tokens } from '@techv/design-system';
-
-const Card = styled.div`
-  background: ${tokens.semantic.surface};
-  border: 1px solid ${tokens.semantic.border};
-  border-radius: ${tokens.radius.xl}px;
-  padding: ${tokens.space.lg}px;
-  box-shadow: ${tokens.shadow.md};
-`;
-```

package/dist/cjs/index.js

@@ -5,10 +5,24 @@ var Button = require('./ui/dist/esm/components/Button/Button.js');
 
 
 
+exports.bd = index.bd;
+exports.bg = index.bg;
+exports.br = index.br;
+exports.bw = index.bw;
 exports.colors = index.colors;
+exports.duration = index.duration;
+exports.ease = index.ease;
+exports.fl = index.fl;
+exports.fs = index.fs;
+exports.fw = index.fw;
+exports.lh = index.lh;
+exports.op = index.op;
 exports.radii = index.radii;
+exports.sh = index.sh;
 exports.spacing = index.spacing;
+exports.ta = index.ta;
 exports.tokens = index.tokens;
+exports.tx = index.tx;
 exports.Button = Button.Button;
 exports.IconButton = Button.IconButton;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}