@ktnpm_devops/react-component 0.0.1 → 0.1.0

package/dist/tokens/orbit-tokens.css

@@ -33,14 +33,14 @@
   --orbit-color-info: #1d4ed8;
   --orbit-color-info-soft: #dbeafe;
 
-  --orbit-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
-  --orbit-shadow-md: 0 10px 25px -10px rgba(45, 27, 46, 0.35);
-  --orbit-shadow-lg: 0 20px 45px -15px rgba(45, 27, 46, 0.3);
-
-  --orbit-radius-sm: 6px;
-  --orbit-radius-md: 10px;
-  --orbit-radius-lg: 16px;
-  --orbit-radius-pill: 999px;
+  --orbit-shadow-sm: 0 0.0625rem 0.125rem 0 rgba(15, 23, 42, 0.05);
+  --orbit-shadow-md: 0 0.625rem 1.5625rem -0.625rem rgba(45, 27, 46, 0.35);
+  --orbit-shadow-lg: 0 1.25rem 2.8125rem -0.9375rem rgba(45, 27, 46, 0.3);
+
+  --orbit-radius-sm: 0.375rem;
+  --orbit-radius-md: 0.625rem;
+  --orbit-radius-lg: 1rem;
+  --orbit-radius-pill: 62.4375rem;
 }
 
 :root[data-theme='dark'],
@@ -74,7 +74,7 @@
   --orbit-color-info: #60a5fa;
   --orbit-color-info-soft: rgba(96, 165, 250, 0.12);
 
-  --orbit-shadow-sm: 0 1px 2px 0 rgba(17, 24, 39, 0.35);
-  --orbit-shadow-md: 0 12px 30px -12px rgba(17, 24, 39, 0.55);
-  --orbit-shadow-lg: 0 24px 55px -20px rgba(17, 24, 39, 0.6);
+  --orbit-shadow-sm: 0 0.0625rem 0.125rem 0 rgba(17, 24, 39, 0.35);
+  --orbit-shadow-md: 0 0.75rem 1.875rem -0.75rem rgba(17, 24, 39, 0.55);
+  --orbit-shadow-lg: 0 1.5rem 3.4375rem -1.25rem rgba(17, 24, 39, 0.6);
 }

package/dist/tokens/semantic-tokens.css

@@ -3,24 +3,33 @@
 
   --font-family-base: var(--orbit-font-sans);
 
+  /* Surfaces */
   --app-background: var(--orbit-color-bg-primary);
   --surface-color: var(--orbit-color-surface);
   --surface-alt: var(--orbit-color-surface-muted);
   --surface-elevated: var(--orbit-color-surface);
+  --surface-secondary: var(--orbit-color-surface-muted);
 
+  /* Borders */
   --border-color: var(--orbit-color-border);
   --border-color-light: var(--orbit-color-border-light);
+  --border-width: 0.0625rem;
+  --border-width-md: 0.125rem;
 
+  /* Text */
   --text-primary: var(--orbit-color-text-primary);
+  --text-secondary: var(--orbit-color-text-secondary);
   --text-muted: var(--orbit-color-text-secondary);
   --text-tertiary: var(--orbit-color-text-tertiary);
   --text-disabled: var(--orbit-color-text-disabled);
 
+  /* Brand / Accent */
   --accent-color: var(--orbit-color-brand);
   --accent-color-strong: var(--orbit-color-brand-hover);
   --accent-color-soft: var(--orbit-color-brand-soft);
   --accent-color-contrast: #ffffff;
 
+  /* Status */
   --danger-color: var(--orbit-color-danger);
   --danger-color-soft: var(--orbit-color-danger-soft);
   --success-color: var(--orbit-color-success);
@@ -30,38 +39,74 @@
   --info-color: var(--orbit-color-info);
   --info-color-soft: var(--orbit-color-info-soft);
 
+  /* Shadows */
+  --shadow-subtle: var(--orbit-shadow-sm);
   --shadow-soft: var(--orbit-shadow-md);
+  --shadow-md: var(--orbit-shadow-md);
   --shadow-elevated: var(--orbit-shadow-lg);
-  --shadow-subtle: var(--orbit-shadow-sm);
+  --shadow-lg: var(--orbit-shadow-lg);
 
+  /* Radii */
   --radius-sm: var(--orbit-radius-sm);
   --radius-md: var(--orbit-radius-md);
   --radius-lg: var(--orbit-radius-lg);
   --radius-pill: var(--orbit-radius-pill);
+
+  /* Spacing scale */
+  --spacing-2xs: 0.125rem;
+  --spacing-xs: 0.375rem;
+  --spacing-sm: 0.625rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+
+  /* Font sizes */
+  --font-size-xs: 0.6875rem;
+  --font-size-sm: 0.8125rem;
+  --font-size-md: 0.875rem;
+
+  /* Icon sizes */
+  --icon-sm: 0.875rem;
+  --icon-md: 1rem;
+  --icon-lg: 1.125rem;
+
+  /* Focus ring */
+  --focus-ring-width: 0.1875rem;
+  --focus-ring-spread: 0.25rem;
+
+  /* Overlay */
+  --overlay-color: rgba(0, 0, 0, 0.5);
+  --backdrop-blur: 0.25rem;
 }
 
 :root[data-theme='dark'],
 .dark {
   color-scheme: dark;
 
+  /* Surfaces */
   --app-background: var(--orbit-color-bg-primary);
   --surface-color: var(--orbit-color-surface);
   --surface-alt: var(--orbit-color-surface-muted);
   --surface-elevated: var(--orbit-color-surface);
+  --surface-secondary: var(--orbit-color-surface-muted);
 
+  /* Borders */
   --border-color: var(--orbit-color-border);
   --border-color-light: var(--orbit-color-border-light);
 
+  /* Text */
   --text-primary: var(--orbit-color-text-primary);
+  --text-secondary: var(--orbit-color-text-secondary);
   --text-muted: var(--orbit-color-text-secondary);
   --text-tertiary: var(--orbit-color-text-tertiary);
   --text-disabled: var(--orbit-color-text-disabled);
 
+  /* Brand / Accent */
   --accent-color: var(--orbit-color-brand);
   --accent-color-strong: var(--orbit-color-brand-hover);
   --accent-color-soft: var(--orbit-color-brand-soft);
   --accent-color-contrast: #ffffff;
 
+  /* Status */
   --danger-color: var(--orbit-color-danger);
   --danger-color-soft: var(--orbit-color-danger-soft);
   --success-color: var(--orbit-color-success);
@@ -71,7 +116,13 @@
   --info-color: var(--orbit-color-info);
   --info-color-soft: var(--orbit-color-info-soft);
 
+  /* Shadows */
+  --shadow-subtle: var(--orbit-shadow-sm);
   --shadow-soft: var(--orbit-shadow-md);
+  --shadow-md: var(--orbit-shadow-md);
   --shadow-elevated: var(--orbit-shadow-lg);
-  --shadow-subtle: var(--orbit-shadow-sm);
+  --shadow-lg: var(--orbit-shadow-lg);
+
+  /* Overlay */
+  --overlay-color: rgba(0, 0, 0, 0.6);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktnpm_devops/react-component",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Kenmei Technologies React Component Library",
   "type": "module",
   "license": "MIT",
@@ -30,24 +30,6 @@
     "README.md",
     "LICENSE"
   ],
-  "scripts": {
-    "dev": "storybook dev -p 6006",
-    "build": "vite build && pnpm build:css",
-    "build:css": "node scripts/copy-css-tokens.mjs",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "lint": "eslint src --ext .ts,.tsx",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
-    "format": "prettier --write 'src/**/*.{ts,tsx,css}'",
-    "typecheck": "tsc --noEmit",
-    "storybook:build": "storybook build -o storybook-static",
-    "changeset": "changeset",
-    "version": "changeset version",
-    "release": "changeset publish",
-    "dashboard": "node scripts/generate-dashboard.mjs",
-    "prepublishOnly": "pnpm build"
-  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -110,5 +92,22 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/kenmeitechnologies/react-component.git"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "vite build && pnpm build:css",
+    "build:css": "node scripts/copy-css-tokens.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write 'src/**/*.{ts,tsx,css}'",
+    "typecheck": "tsc --noEmit",
+    "storybook:build": "storybook build -o storybook-static",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "changeset publish",
+    "dashboard": "node scripts/generate-dashboard.mjs"
   }
-}
+}