@techv/design-system 0.1.3 → 0.1.4

package/README.md

@@ -27,7 +27,6 @@ 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';
 ```
 
@@ -130,16 +129,54 @@ import { IconButton } from '@techv/design-system';
 
 ## Design Tokens
 
+### Setup
+
+```tsx
+import '@techv/design-system/styles.css';
+```
+
+### Available exports
+
+| 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` |
+
 ### CSS Custom Properties
 
-Import `styles.css` to get all tokens as CSS variables on `:root`, usable anywhere in your app.
+All tokens are also available as CSS variables:
 
 ```css
-.my-component {
-  background-color: var(--color-brand-500);
-  padding: var(--space-md);
-  border-radius: var(--radius-lg);
-}
+/* Colors */
+background-color: var(--indigo-500);
+color: var(--gray-700);
+border-color: var(--red-200);
+
+/* Spacing */
+padding: var(--spacing-4);           /* 16px */
+gap: var(--spacing-2);               /* 8px  */
+
+/* Typography */
+font-size: var(--fs-lg);             /* 18px */
+font-weight: var(--fw-6);            /* 600  */
+
+/* Border radius / shadow */
+border-radius: var(--br-lg);         /* 8px  */
+box-shadow: var(--sh-3);
 ```
 
 ### JavaScript Tokens
@@ -149,18 +186,18 @@ Import `styles.css` to get all tokens as CSS variables on `:root`, usable anywhe
 Use tokens directly in React `style` props:
 
 ```tsx
-import { tokens, colors, spacing, radii } from '@techv/design-system';
+import { bg, tx, spacing, br, fs, fw } 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'
+        backgroundColor: bg.indigo[50],
+        color:           tx.indigo[700],
+        padding:         `${spacing[1]} ${spacing[2]}`,
+        borderRadius:    br.full,
+        fontSize:        fs.xs,
+        fontWeight:      fw[5],
       }}
     >
       {children}
@@ -172,26 +209,14 @@ function Badge({ children }: { children: React.ReactNode }) {
 #### Alert / status banner
 
 ```tsx
-import { tokens, colors } from '@techv/design-system';
+import { bg, tx, bd, spacing, br, fs, bw } 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]}`,
-  },
+const alertMap: Record<AlertType, React.CSSProperties> = {
+  success: { backgroundColor: bg.green[50],  color: tx.green[700],  border: `${bw[1]} solid ${bd.green[300]}`  },
+  danger:  { backgroundColor: bg.red[50],    color: tx.red[700],    border: `${bw[1]} solid ${bd.red[300]}`    },
+  warning: { backgroundColor: bg.amber[50],  color: tx.amber[700],  border: `${bw[1]} solid ${bd.amber[300]}`  },
 };
 
 function Alert({ type, message }: { type: AlertType; message: string }) {
@@ -199,10 +224,10 @@ function Alert({ type, message }: { type: AlertType; message: string }) {
     <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'
+        ...alertMap[type],
+        padding:      `${spacing[2]} ${spacing[4]}`,
+        borderRadius: br.md,
+        fontSize:     fs.sm,
       }}
     >
       {message}
@@ -210,44 +235,44 @@ function Alert({ type, message }: { type: AlertType; message: string }) {
   );
 }
 
-// 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
 
 ```tsx
-import { tokens } from '@techv/design-system';
+import { bg, tx, bd, spacing, br, sh, fs, fw, bw } 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',
+        backgroundColor: bg.white,
+        border:          `${bw[1]} solid ${bd.gray[200]}`,
+        borderRadius:    br['2xl'],
+        padding:         spacing[8],
+        boxShadow:       sh[3],
+        maxWidth:        '400px',
       }}
     >
       <h2
         style={{
-          margin: 0,
-          fontSize: tokens.fontSize.h4,             // '18px'
-          color: tokens.semantic.textPrimary,        // '#111827'
-          marginBottom: tokens.space.sm,             // 8
+          margin:       0,
+          fontSize:     fs.lg,
+          fontWeight:   fw[6],
+          color:        tx.gray[900],
+          marginBottom: spacing[2],
         }}
       >
         {title}
       </h2>
       <p
         style={{
-          margin: 0,
-          fontSize: tokens.fontSize.bodyMd,          // '14px'
-          color: tokens.semantic.textSecondary,       // '#6B7280'
+          margin:     0,
+          fontSize:   fs.sm,
+          color:      tx.gray[500],
           lineHeight: 1.6,
         }}
       >
@@ -258,20 +283,22 @@ function Card({ title, body }: { title: string; body: string }) {
 }
 ```
 
-#### Using flat `colors` / `spacing` / `radii` exports
+#### Tag
 
 ```tsx
-import { colors, spacing, radii } from '@techv/design-system';
+import { bg, tx, bd, spacing, br, fs, fw, bw } 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'
+        backgroundColor: bg.gray[100],
+        color:           tx.gray[700],
+        padding:         `${spacing[1]} ${spacing[2]}`,
+        borderRadius:    br.md,
+        border:          `${bw[1]} solid ${bd.gray[200]}`,
+        fontSize:        fs.xs,
+        fontWeight:      fw[5],
       }}
     >
       {label}
@@ -280,20 +307,19 @@ function Tag({ label }: { label: string }) {
 }
 ```
 
-#### Animated element using duration + easing tokens
+#### Animated element
 
 ```tsx
-import { tokens } from '@techv/design-system';
+import { bg, br, spacing, duration, ease } from '@techv/design-system';
 
 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)
+        padding:         spacing[6],
+        backgroundColor: bg.indigo[50],
+        borderRadius:    br.xl,
+        transition:      `opacity ${duration.normal} ${ease.standard}`,
       }}
     >
       {children}
@@ -305,32 +331,36 @@ function FadeInBox({ children }: { children: React.ReactNode }) {
 #### Quick reference
 
 ```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';
+
+bg.indigo[50]
+tx.gray[700]
+bd.gray[200]
+fl.green[400]
+bg.red[500]
+bg.white
+bg.black
+
+spacing[1]
+spacing[2]
+spacing[4]
+spacing[6]
+spacing[8]
+spacing.full
+
+fs.xs
+fs.lg
+fw[4]
+lh.tight
+ta.c
+
+br.sm
+bw[1]
+sh[1]
+op[50]
+
+duration.fast
+ease.standard
 ```
 
 ### Token Reference
@@ -379,10 +409,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');
 ```
 
@@ -404,13 +432,24 @@ import type { ButtonProps, IconButtonProps } from '@techv/design-system';
 
 ```tsx
 import styled from 'styled-components';
-import { tokens } from '@techv/design-system';
+import { bg, bd, tx, spacing, br, sh, fs, fw, bw } 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};
+  background:    ${bg.white};
+  border:        ${bw[1]} solid ${bd.gray[200]};
+  border-radius: ${br['2xl']};
+  padding:       ${spacing[8]};
+  box-shadow:    ${sh[3]};
+`;
+
+const Heading = styled.h2`
+  font-size:   ${fs.lg};
+  font-weight: ${fw[6]};
+  color:       ${tx.gray[900]};
+`;
+
+const Body = styled.p`
+  font-size: ${fs.sm};
+  color:     ${tx.gray[500]};
 `;
 ```

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":";;;;;;;;;;;;;;;;;;;;;;;;;;"}