@abhir9/pd-design-system 0.1.3 → 0.1.5

package/dist/styles.css

@@ -333,6 +333,209 @@ video {
   display: none;
 }
 :root {
+  --accent: #17171C;
+  --accent-foreground: #DFDFE2;
+  --background: #09090B;
+  --background-base: #09090B;
+  --background-green: #00471A;
+  --background-green-on-hover: #006625;
+  --background-info: #00123D;
+  --background-info-on-hover: #001E66;
+  --background-invert: #FFFFFF;
+  --background-invert-light: #DFDFE2;
+  --background-low: #17171C;
+  --background-low-on-hover: #2F2F37;
+  --background-orange: #331500;
+  --background-orange-on-hover: #5C2500;
+  --background-primary: #00123D;
+  --background-primary-on-hover: #001E66;
+  --background-red: #2D060D;
+  --background-red-on-hover: #4C0B17;
+  --background-secondary: #17171C;
+  --background-tertiary: #2F2F37;
+  --background-yellow: #3D2600;
+  --background-yellow-on-hover: #5C3A00;
+  --border: #4E4E5A;
+  --border-blue: #709AFF;
+  --border-blue-on-hover: #3772FF;
+  --border-blue-subtle: #002680;
+  --border-green: #00E052;
+  --border-green-on-hover: #00B241;
+  --border-green-subtle: #006625;
+  --border-invert: #FFFFFF;
+  --border-on-color: #09090B;
+  --border-orange: #EC9C64;
+  --border-orange-on-hover: #FF6800;
+  --border-orange-subtle: #5C2500;
+  --border-primary: #4E4E5A;
+  --border-red: #E15C5C;
+  --border-red-on-hover: #E12D4E;
+  --border-red-subtle: #4C0B17;
+  --border-secondary: #2F2F37;
+  --border-subtle: #2F2F37;
+  --border-yellow: #FFCA70;
+  --border-yellow-on-hover: #FFAD22;
+  --border-yellow-subtle: #5C3A00;
+  --card: #17171C;
+  --card-foreground: #DFDFE2;
+  --color-black: #09090B;
+  --color-white: #FFFFFF;
+  --content-always-black: #09090B;
+  --content-always-white: #FFFFFF;
+  --content-blue: #709AFF;
+  --content-blue-disabled: #002680;
+  --content-blue-on-hover: #3772FF;
+  --content-green: #00E052;
+  --content-green-disabled: #008A32;
+  --content-green-on-hover: #09FF63;
+  --content-on-color: #09090B;
+  --content-on-color-inverse: #EDEDED;
+  --content-orange: #EC9C64;
+  --content-orange-disabled: #7A3200;
+  --content-orange-on-hover: #FFC9A3;
+  --content-primary: #DFDFE2;
+  --content-red: #E15C5C;
+  --content-red-disabled: #7D1225;
+  --content-red-on-hover: #F6C1CA;
+  --content-secondary: #7E7E8B;
+  --content-subtle: #4E4E5A;
+  --content-yellow: #FFCA70;
+  --content-yellow-disabled: #7A4D00;
+  --content-yellow-on-hover: #FFD999;
+  --destructive: #E15C5C;
+  --destructive-foreground: #FFFFFF;
+  --font-mono:
+    Gist Mono,
+    Menlo,
+    Monaco,
+    Consolas,
+    Liberation Mono,
+    Courier New,
+    monospace;
+  --font-sans:
+    Gist,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    sans-serif;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-sm: 0.875rem;
+  --font-size-xl: 1.25rem;
+  --font-size-xs: 0.75rem;
+  --font-weight-bold: 700;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
+  --foreground: #DFDFE2;
+  --input: #4E4E5A;
+  --intent-danger: #E15C5C;
+  --intent-danger-active: #E12D4E;
+  --intent-danger-bg: #2D060D;
+  --intent-danger-bg-active: #4C0B17;
+  --intent-danger-bg-hover: #4C0B17;
+  --intent-danger-border: #E15C5C;
+  --intent-danger-hover: #F6C1CA;
+  --intent-danger-text: #E15C5C;
+  --intent-neutral: #7E7E8B;
+  --intent-neutral-active: #EDEDED;
+  --intent-neutral-bg: #17171C;
+  --intent-neutral-bg-active: #2F2F37;
+  --intent-neutral-bg-hover: #2F2F37;
+  --intent-neutral-border: #4E4E5A;
+  --intent-neutral-hover: #DFDFE2;
+  --intent-neutral-text: #DFDFE2;
+  --intent-primary: #7E7E8B;
+  --intent-primary-active: #EDEDED;
+  --intent-primary-bg: #17171C;
+  --intent-primary-bg-active: #2F2F37;
+  --intent-primary-bg-hover: #2F2F37;
+  --intent-primary-border: #4E4E5A;
+  --intent-primary-hover: #DFDFE2;
+  --intent-primary-text: #DFDFE2;
+  --intent-success: #00E052;
+  --intent-success-active: #00B241;
+  --intent-success-bg: #00471A;
+  --intent-success-bg-active: #008A32;
+  --intent-success-bg-hover: #006625;
+  --intent-success-border: #00E052;
+  --intent-success-hover: #09FF63;
+  --intent-success-text: #00E052;
+  --intent-warning: #FFCA70;
+  --intent-warning-active: #FFAD22;
+  --intent-warning-bg: #3D2600;
+  --intent-warning-bg-active: #5C3A00;
+  --intent-warning-bg-hover: #5C3A00;
+  --intent-warning-border: #FFCA70;
+  --intent-warning-hover: #FFD999;
+  --intent-warning-text: #FFCA70;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+  --line-height-tight: 1.25;
+  --muted: #17171C;
+  --muted-foreground: #4E4E5A;
+  --popover: #17171C;
+  --popover-foreground: #DFDFE2;
+  --primary: #7E7E8B;
+  --primary-foreground: #FFFFFF;
+  --radius: 0.375rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-base: 0.25rem;
+  --radius-full: 9999px;
+  --radius-lg: 0.5rem;
+  --radius-md: 0.375rem;
+  --radius-none: 0;
+  --radius-sm: 0.125rem;
+  --radius-xl: 0.75rem;
+  --ring: #7E7E8B;
+  --secondary: #17171C;
+  --secondary-foreground: #DFDFE2;
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-none: none;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --spacing-0: 0;
+  --spacing-1: 0.25rem;
+  --spacing-10: 2.5rem;
+  --spacing-12: 3rem;
+  --spacing-16: 4rem;
+  --spacing-2: 0.5rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  --surface-base: #09090B;
+  --surface-base-border: #4E4E5A;
+  --surface-elevated: #17171C;
+  --surface-elevated-border: #2F2F37;
+  --surface-overlay: rgba(0, 0, 0, 0.7);
+  --text-body: #DFDFE2;
+  --text-disabled: #60606C;
+  --text-heading: #DFDFE2;
+  --text-muted: #4E4E5A;
+  --z-dropdown: 1000;
+  --z-fixed: 1030;
+  --z-modal: 1050;
+  --z-modal-backdrop: 1040;
+  --z-popover: 1060;
+  --z-sticky: 1020;
+  --z-tooltip: 1070;
   font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
   color: var(--text-body);
   background-color: var(--surface-base);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abhir9/pd-design-system",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Production-grade design system with adapter layer support",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -31,7 +31,8 @@
   "scripts": {
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build": "tsup && npm run build:css && rm -f dist/*.css.map",
+    "build": "npm run generate:css-variables && tsup && npm run build:css && rm -f dist/*.css.map",
+    "generate:css-variables": "tsx scripts/generate-css-variables.ts",
     "build:css": "postcss src/styles.css -o dist/index.css --no-map && sed -i '' '/sourceMappingURL/d' dist/index.css 2>/dev/null || sed -i '/sourceMappingURL/d' dist/index.css 2>/dev/null || true",
     "dev": "tsup --watch",
     "type-check": "tsc --noEmit",
@@ -138,6 +139,7 @@
     "storybook": "^7.6.17",
     "tailwindcss": "^3.4.1",
     "tsup": "^8.0.1",
+    "tsx": "^4.21.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.11",
     "vitest": "^1.2.0"