@abhir9/pd-design-system 0.1.8 → 0.1.10

package/dist/styles.css

@@ -333,10 +333,216 @@ video {
   display: none;
 }
 :root {
+  --accent: #EDEDED;
+  --accent-foreground: #17171C;
+  --background: #FFFFFF;
+  --background-green: #E0FFEC;
+  --background-green-on-hover: #BDFFD5;
+  --background-info: #EBF1FF;
+  --background-info-on-hover: #99B7FF;
+  --background-invert: #09090B;
+  --background-invert-light: #17171C;
+  --background-low: #EDEDED;
+  --background-low-on-hover: #DFDFE2;
+  --background-orange: #FFF3EB;
+  --background-orange-on-hover: #FFE1CC;
+  --background-primary: #FFFFFF;
+  --background-red: #FDF2F4;
+  --background-red-on-hover: #FADBE1;
+  --background-secondary: #EDEDED;
+  --background-system: #FAFAFA;
+  --background-tertiary: #DFDFE2;
+  --background-yellow: #FFF3EB;
+  --background-yellow-on-hover: #FFE1CC;
+  --border: #BEBEC1;
+  --border-blue: #3772FF;
+  --border-blue-on-hover: #003FD6;
+  --border-blue-subtle: #99B7FF;
+  --border-green: #00E052;
+  --border-green-on-hover: #00B241;
+  --border-green-subtle: #8AFFB5;
+  --border-invert: #09090B;
+  --border-on-color: #FFFFFF;
+  --border-orange: #D65700;
+  --border-orange-on-hover: #AD4700;
+  --border-orange-subtle: #FFC9A3;
+  --border-primary: #BEBEC1;
+  --border-red: #C41C3B;
+  --border-red-on-hover: #A11730;
+  --border-red-subtle: #F6C1CA;
+  --border-secondary: #DFDFE2;
+  --border-subtle: #DFDFE2;
+  --border-yellow: #F09700;
+  --border-yellow-on-hover: #D68700;
+  --border-yellow-subtle: #FFD999;
+  --card: #EDEDED;
+  --card-foreground: #17171C;
+  --color-black: #09090B;
+  --color-white: #FFFFFF;
+  --content-always-black: #09090B;
+  --content-always-white: #FFFFFF;
+  --content-blue: #3772FF;
+  --content-blue-disabled: #709AFF;
+  --content-blue-on-hover: #004BFF;
+  --content-green: #00B241;
+  --content-green-disabled: #5CFF98;
+  --content-green-on-hover: #00E052;
+  --content-on-color: #FFFFFF;
+  --content-on-color-inverse: #09090B;
+  --content-orange: #D65700;
+  --content-orange-disabled: #EC9C64;
+  --content-orange-on-hover: #AD4700;
+  --content-primary: #17171C;
+  --content-red: #C41C3B;
+  --content-red-disabled: #E15C5C;
+  --content-red-on-hover: #A11730;
+  --content-secondary: #60606C;
+  --content-subtle: #BEBEC1;
+  --content-yellow: #F09700;
+  --content-yellow-disabled: #FFCA70;
+  --content-yellow-on-hover: #D68700;
+  --destructive: #C41C3B;
+  --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: #17171C;
+  --input: #BEBEC1;
+  --intent-danger: #C41C3B;
+  --intent-danger-active: #7D1225;
+  --intent-danger-bg: #FDF2F4;
+  --intent-danger-bg-active: #FADBE1;
+  --intent-danger-bg-hover: #FADBE1;
+  --intent-danger-border: #C41C3B;
+  --intent-danger-hover: #A11730;
+  --intent-danger-text: #C41C3B;
+  --intent-neutral: #60606C;
+  --intent-neutral-active: #2F2F37;
+  --intent-neutral-bg: #EDEDED;
+  --intent-neutral-bg-active: #DFDFE2;
+  --intent-neutral-bg-hover: #DFDFE2;
+  --intent-neutral-border: #BEBEC1;
+  --intent-neutral-hover: #4E4E5A;
+  --intent-neutral-text: #17171C;
+  --intent-primary: #60606C;
+  --intent-primary-active: #2F2F37;
+  --intent-primary-bg: #EDEDED;
+  --intent-primary-bg-active: #DFDFE2;
+  --intent-primary-bg-hover: #DFDFE2;
+  --intent-primary-border: #BEBEC1;
+  --intent-primary-hover: #4E4E5A;
+  --intent-primary-text: #17171C;
+  --intent-success: #00E052;
+  --intent-success-active: #008A32;
+  --intent-success-bg: #E0FFEC;
+  --intent-success-bg-active: #8AFFB5;
+  --intent-success-bg-hover: #BDFFD5;
+  --intent-success-border: #00E052;
+  --intent-success-hover: #00B241;
+  --intent-success-text: #00B241;
+  --intent-warning: #F09700;
+  --intent-warning-active: #7A4D00;
+  --intent-warning-bg: #FFF3EB;
+  --intent-warning-bg-active: #FFE8C2;
+  --intent-warning-bg-hover: #FFE1CC;
+  --intent-warning-border: #F09700;
+  --intent-warning-hover: #D68700;
+  --intent-warning-text: #F09700;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+  --line-height-tight: 1.25;
+  --muted: #EDEDED;
+  --muted-foreground: #BEBEC1;
+  --popover: #EDEDED;
+  --popover-foreground: #17171C;
+  --primary: #60606C;
+  --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: #60606C;
+  --secondary: #EDEDED;
+  --secondary-foreground: #17171C;
+  --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: #FFFFFF;
+  --surface-base-border: #BEBEC1;
+  --surface-elevated: #EDEDED;
+  --surface-elevated-border: #DFDFE2;
+  --surface-overlay: rgba(0, 0, 0, 0.5);
+  --text-body: #17171C;
+  --text-disabled: #BEBEC1;
+  --text-heading: #17171C;
+  --text-muted: #BEBEC1;
+  --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);
+}
+.dark {
   --accent: #17171C;
   --accent-foreground: #DFDFE2;
   --background: #09090B;
-  --background-base: #09090B;
   --background-green: #00471A;
   --background-green-on-hover: #006625;
   --background-info: #00123D;
@@ -347,11 +553,11 @@ video {
   --background-low-on-hover: #2F2F37;
   --background-orange: #331500;
   --background-orange-on-hover: #5C2500;
-  --background-primary: #00123D;
-  --background-primary-on-hover: #001E66;
+  --background-primary: #09090B;
   --background-red: #2D060D;
   --background-red-on-hover: #4C0B17;
   --background-secondary: #17171C;
+  --background-system: #09090B;
   --background-tertiary: #2F2F37;
   --background-yellow: #3D2600;
   --background-yellow-on-hover: #5C3A00;
@@ -536,9 +742,6 @@ video {
   --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);
 }
 * {
   box-sizing: border-box;
@@ -550,6 +753,49 @@ textarea:focus-visible {
   outline: 2px solid var(--intent-primary);
   outline-offset: 2px;
 }
+* {
+  border-color: var(--border-primary);
+}
+body {
+  background-color: var(--background-primary);
+  color: var(--content-primary);
+}
+html {
+  font-size: 10px;
+}
+html,
+body {
+  height: 100vh;
+  min-height: 100vh;
+  width: 100vw;
+  min-width: 100vw;
+  margin: 0;
+  padding: 0;
+}
+body {
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+}
+:focus {
+  outline: 0 !important;
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
+}
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  background-color: transparent;
+  -webkit-transition: background-color 5000s ease-in-out 0s;
+  transition: background-color 5000s ease-in-out 0s;
+  -webkit-text-fill-color: var(--content-primary);
+}
 .container {
   width: 100%;
 }
@@ -578,6 +824,10 @@ textarea:focus-visible {
     max-width: 1536px;
   }
 }
+button {
+  font-family: inherit;
+  font-size: inherit;
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -882,6 +1132,12 @@ textarea:focus-visible {
 .border-\[var\(--border-yellow-subtle\)\] {
   border-color: var(--border-yellow-subtle);
 }
+.border-\[var\(--pd-border-primary\)\] {
+  border-color: var(--pd-border-primary);
+}
+.border-\[var\(--pd-border-red\)\] {
+  border-color: var(--pd-border-red);
+}
 .bg-\[var\(--background-base\)\] {
   background-color: var(--background-base);
 }
@@ -912,6 +1168,9 @@ textarea:focus-visible {
 .bg-\[var\(--content-primary\)\] {
   background-color: var(--content-primary);
 }
+.bg-\[var\(--pd-background-base\)\] {
+  background-color: var(--pd-background-base);
+}
 .bg-blue-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
@@ -1051,6 +1310,12 @@ textarea:focus-visible {
 .text-\[var\(--content-yellow\)\] {
   color: var(--content-yellow);
 }
+.text-\[var\(--pd-content-primary\)\] {
+  color: var(--pd-content-primary);
+}
+.text-\[var\(--pd-content-red\)\] {
+  color: var(--pd-content-red);
+}
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
@@ -1126,6 +1391,34 @@ textarea:focus-visible {
   white-space: nowrap;
   border-width: 0;
 }
+.transition-all {
+  transition: all 0.15s ease-in-out;
+}
+.transition-colors {
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out;
+}
+.file\:border-0::file-selector-button {
+  border-width: 0px;
+}
+.file\:bg-transparent::file-selector-button {
+  background-color: transparent;
+}
+.file\:text-sm::file-selector-button {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.file\:font-medium::file-selector-button {
+  font-weight: 500;
+}
+.placeholder\:text-\[var\(--pd-content-subtle\)\]::-moz-placeholder {
+  color: var(--pd-content-subtle);
+}
+.placeholder\:text-\[var\(--pd-content-subtle\)\]::placeholder {
+  color: var(--pd-content-subtle);
+}
 .hover\:border-\[var\(--border-green-on-hover\)\]:hover {
   border-color: var(--border-green-on-hover);
 }
@@ -1196,6 +1489,12 @@ textarea:focus-visible {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.focus-visible\:border-\[var\(--pd-border-blueOnHover\)\]:focus-visible {
+  border-color: var(--pd-border-blueOnHover);
+}
+.focus-visible\:border-\[var\(--pd-border-redOnHover\)\]:focus-visible {
+  border-color: var(--pd-border-redOnHover);
+}
 .focus-visible\:outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1211,6 +1510,12 @@ textarea:focus-visible {
 .focus-visible\:ring-\[var\(--border-blue\)\]:focus-visible {
   --tw-ring-color: var(--border-blue);
 }
+.focus-visible\:ring-\[var\(--pd-border-blue\)\]:focus-visible {
+  --tw-ring-color: var(--pd-border-blue);
+}
+.focus-visible\:ring-\[var\(--pd-border-red\)\]:focus-visible {
+  --tw-ring-color: var(--pd-border-red);
+}
 .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
@@ -1235,6 +1540,9 @@ textarea:focus-visible {
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }
+.disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
 .disabled\:border-\[var\(--border-subtle\)\]:disabled {
   border-color: var(--border-subtle);
 }
@@ -1250,6 +1558,9 @@ textarea:focus-visible {
 .disabled\:text-\[var\(--content-subtle\)\]:disabled {
   color: var(--content-subtle);
 }
+.disabled\:text-\[var\(--pd-content-subtle\)\]:disabled {
+  color: var(--pd-content-subtle);
+}
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abhir9/pd-design-system",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Production-grade design system with adapter layer support",
   "type": "module",
   "main": "./dist/index.cjs",