@cmgfi/clear-ds 1.1.1 → 1.1.3

package/dist/llms.txt

@@ -187,7 +187,7 @@ import type { ButtonProps, ButtonVariant, ButtonSize } from '@cmgfi/clear-ds';
 
 Props:
 - `variant`: `'primary' | 'secondary' | 'ghost' | 'danger' | 'link'` — default `'primary'`
-- `size`: `'md' | 'sm'` — `md` = 40px height (default), `sm` = 24px height
+- `size`: `'sm' | 'md' | 'lg'` — `sm` = 24px height, `md` = 36px height (default), `lg` = 40px height
 - `leadingIcon`: ReactNode — rendered before the label
 - `trailingIcon`: ReactNode — rendered after the label
 - `badge`: `string | number` — red notification badge rendered after the label
@@ -215,7 +215,7 @@ import type { IconButtonProps } from '@cmgfi/clear-ds';
 Props:
 - `icon`: ReactNode — the icon to display (e.g. `<i className="pi pi-search" />`)
 - `variant`: `ButtonVariant` — same variants as Button, default `'primary'`
-- `size`: `'md' | 'sm'` — `md` = 40×40px (default), `sm` = 24×24px
+- `size`: `'sm' | 'md' | 'lg'` — `sm` = 24×24px, `md` = 36×36px (default), `lg` = 40×40px
 - `aria-label`: string — **required** (no visible text)
 - `disabled`: boolean
 - Extends `React.ButtonHTMLAttributes<HTMLButtonElement>`
@@ -1482,7 +1482,7 @@ The full interactive best practices reference is in Storybook under **Best Pract
 
 ### Mobile & Responsive
 - Design for 375px (iPhone SE) as the smallest mobile viewport
-- Minimum touch target: 44×44px (use `Button md` = 40px for mobile; supplement with padding)
+- Minimum touch target: 44×44px (use `Button md` = 36px for mobile; supplement with padding to reach 44px)
 - Test at 375px, 768px, 1024px, 1440px
 - Stack form fields vertically on mobile; never use multi-column form layouts below 768px
 

package/dist/styles.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/tokens/tokens.css

@@ -30,8 +30,8 @@
   --breakpoint-lg: 1200px;
 
   --font-family: 'Open Sans', sans-serif;
-  --color-text: #202020;
-  --color-text-secondary: #70777d;
+  --color-text: var(--navy-800);
+  --color-text-secondary: var(--navy-400);
 
   /* --- Teal ---
      Core brand color for key interactive elements */
@@ -253,7 +253,7 @@
   --color-status-info-border:    var(--blue-200);   /* Info borders */
 
   /* ── Focus Rings ─────────────────────────────────────────────────────── */
-  --focus-ring:       0 0 0 2px var(--surface-50), 0 0 0 6px var(--teal-700); /* Standard keyboard focus */
+  --focus-ring:       0 0 0 2px var(--surface-50), 0 0 0 4px var(--teal-700); /* Standard keyboard focus */
   --focus-ring-inset: inset 0 0 0 2px var(--teal-700);                        /* Inset variant — menus, popovers */
 
   /* ── Border Radius ───────────────────────────────────────────────────── */

package/dist/tokens/tokens.d.ts

@@ -0,0 +1 @@
+export {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmgfi/clear-ds",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "CMG Financial — Clear Design System React component library",
   "keywords": [
     "cmg",
@@ -27,15 +27,21 @@
       "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     },
-    "./tokens": "./dist/tokens/tokens.css",
-    "./styles": "./dist/index.css"
+    "./tokens": {
+      "types": "./dist/tokens/tokens.d.ts",
+      "default": "./dist/tokens/tokens.css"
+    },
+    "./styles": {
+      "types": "./dist/styles.d.ts",
+      "default": "./dist/index.css"
+    }
   },
   "files": [
     "dist"
   ],
   "scripts": {
     "build": "vite build",
-    "postbuild": "mkdir -p dist/tokens && cp src/tokens/tokens.css dist/tokens/tokens.css",
+    "postbuild": "mkdir -p dist/tokens && cp src/tokens/tokens.css dist/tokens/tokens.css && cp src/tokens/tokens.d.ts dist/tokens/tokens.d.ts && cp src/styles.d.ts dist/styles.d.ts",
     "build:watch": "vite build --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",