@techv/design-system 0.1.2 → 0.1.3

package/README.md

@@ -144,30 +144,193 @@ Import `styles.css` to get all tokens as CSS variables on `:root`, usable anywhe
 
 ### JavaScript Tokens
 
-Use typed token values directly in styled-components or inline styles.
+#### Inline styles
+
+Use tokens directly in React `style` props:
+
+```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>
+  );
+}
+```
+
+#### 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 }) {
+  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'
+      }}
+    >
+      {message}
+    </div>
+  );
+}
+
+// Usage
+<Alert type="success" message="Profile saved!" />
+<Alert type="danger" message="Something went wrong." />
+<Alert type="warning" message="Your session expires soon." />
+```
+
+#### Card component
+
+```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>
+  );
+}
+```
+
+#### Using flat `colors` / `spacing` / `radii` exports
+
+```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'
+      }}
+    >
+      {label}
+    </span>
+  );
+}
+```
+
+#### Animated element using duration + easing tokens
+
+```tsx
+import { tokens } 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)
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+```
+
+#### Quick reference
 
 ```tsx
 import { tokens, colors, spacing, radii } from '@techv/design-system';
 
-// Full structured token object
-tokens.color.brand[500]   // '#4F46E5'
-tokens.space.md           // 16
-tokens.radius.lg          // 8
-tokens.shadow.md          // '0 4px 6px rgba(0,0,0,0.07)...'
-tokens.duration.normal    // 200
-tokens.font.text          // 'Inter'
-tokens.fontSize.h1        // '36px'
-
-// Flat named exports (convenience)
-colors.brand500           // '#4F46E5'
-colors.textPrimary        // '#111827'
-colors.border             // '#E5E7EB'
-
-spacing.md                // '16px'
-spacing.lg                // '24px'
-
-radii.sm                  // '4px'
-radii.full                // '9999px'
+// 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'
 ```
 
 ### Token Reference

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techv/design-system",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": "Pranav V K <pranavvk@techversantinfotech.com>",
   "license": "MIT",
   "main": "./dist/cjs/index.js",