ssovee-os-web-ui 0.1.15 → 0.1.17

package/dist/index.css

@@ -83,6 +83,15 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-primary: rgb(var(--ssovee-primary) / 1);
+    --color-secondary: rgb(var(--ssovee-secondary) / 1);
+    --color-surface-1: rgb(var(--ssovee-surface-1) / 1);
+    --color-surface-2: rgb(var(--ssovee-surface-2) / 1);
+    --color-surface-3: rgb(var(--ssovee-surface-3) / 1);
+    --color-surface-4: rgb(var(--ssovee-surface-4) / 1);
+    --color-brand-color: rgb(var(--ssovee-brand-color) / 1);
+    --color-border-1: rgb(var(--ssovee-border-1) / 1);
+    --color-muted: rgb(var(--ssovee-muted) / 1);
   }
 }
 @layer base {
@@ -685,6 +694,12 @@
   .border-blue-500 {
     border-color: var(--color-blue-500);
   }
+  .border-border-1 {
+    border-color: var(--color-border-1);
+  }
+  .border-brand-color {
+    border-color: var(--color-brand-color);
+  }
   .border-current {
     border-color: currentcolor;
   }
@@ -700,6 +715,12 @@
   .border-red-500 {
     border-color: var(--color-red-500);
   }
+  .border-surface-1 {
+    border-color: var(--color-surface-1);
+  }
+  .border-surface-4 {
+    border-color: var(--color-surface-4);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -709,9 +730,18 @@
   .border-yellow-500 {
     border-color: var(--color-yellow-500);
   }
+  .border-t-surface-1 {
+    border-top-color: var(--color-surface-1);
+  }
   .border-t-transparent {
     border-top-color: transparent;
   }
+  .border-r-surface-1 {
+    border-right-color: var(--color-surface-1);
+  }
+  .border-b-surface-1 {
+    border-bottom-color: var(--color-surface-1);
+  }
   .border-l-blue-500 {
     border-left-color: var(--color-blue-500);
   }
@@ -721,6 +751,9 @@
   .border-l-red-500 {
     border-left-color: var(--color-red-500);
   }
+  .border-l-surface-1 {
+    border-left-color: var(--color-surface-1);
+  }
   .border-l-yellow-500 {
     border-left-color: var(--color-yellow-500);
   }
@@ -736,6 +769,15 @@
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
+  .bg-brand-color {
+    background-color: var(--color-brand-color);
+  }
+  .bg-brand-color\/10 {
+    background-color: color-mix(in srgb, rgb(var(--ssovee-brand-color) / 1) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-brand-color) 10%, transparent);
+    }
+  }
   .bg-current {
     background-color: currentcolor;
   }
@@ -748,12 +790,42 @@
   .bg-green-500 {
     background-color: var(--color-green-500);
   }
+  .bg-muted\/50 {
+    background-color: color-mix(in srgb, rgb(var(--ssovee-muted) / 1) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+    }
+  }
+  .bg-primary {
+    background-color: var(--color-primary);
+  }
+  .bg-primary\/50 {
+    background-color: color-mix(in srgb, rgb(var(--ssovee-primary) / 1) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+    }
+  }
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
+  .bg-secondary {
+    background-color: var(--color-secondary);
+  }
+  .bg-surface-1 {
+    background-color: var(--color-surface-1);
+  }
+  .bg-surface-2 {
+    background-color: var(--color-surface-2);
+  }
+  .bg-surface-3 {
+    background-color: var(--color-surface-3);
+  }
+  .bg-surface-4 {
+    background-color: var(--color-surface-4);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -953,6 +1025,9 @@
   .text-blue-800 {
     color: var(--color-blue-800);
   }
+  .text-brand-color {
+    color: var(--color-brand-color);
+  }
   .text-current {
     color: currentcolor;
   }
@@ -1097,16 +1172,47 @@
   .placeholder\:text-neutral-300::placeholder {
     color: var(--color-neutral-300);
   }
+  .checked\:border-brand-color:checked {
+    border-color: var(--color-brand-color);
+  }
+  .checked\:bg-brand-color:checked {
+    background-color: var(--color-brand-color);
+  }
   .checked\:opacity-100:checked {
     opacity: 100%;
   }
   @media (hover: hover) {
+    .hover\:bg-brand-color\/90:hover {
+      background-color: color-mix(in srgb, rgb(var(--ssovee-brand-color) / 1) 90%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-brand-color\/90:hover {
+        background-color: color-mix(in oklab, var(--color-brand-color) 90%, transparent);
+      }
+    }
     .hover\:bg-green-600:hover {
       background-color: var(--color-green-600);
     }
     .hover\:bg-red-600:hover {
       background-color: var(--color-red-600);
     }
+    .hover\:bg-surface-1:hover {
+      background-color: var(--color-surface-1);
+    }
+    .hover\:bg-surface-3:hover {
+      background-color: var(--color-surface-3);
+    }
+    .hover\:bg-surface-4:hover {
+      background-color: var(--color-surface-4);
+    }
+    .hover\:text-brand-color\/90:hover {
+      color: color-mix(in srgb, rgb(var(--ssovee-brand-color) / 1) 90%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:text-brand-color\/90:hover {
+        color: color-mix(in oklab, var(--color-brand-color) 90%, transparent);
+      }
+    }
     .hover\:text-green-700:hover {
       color: var(--color-green-700);
     }
@@ -1136,6 +1242,9 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus\:border-brand-color:focus {
+    border-color: var(--color-brand-color);
+  }
   .focus\:border-red-500:focus {
     border-color: var(--color-red-500);
   }
@@ -1147,6 +1256,12 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .focus\:ring-brand-color\/50:focus {
+    --tw-ring-color: color-mix(in srgb, rgb(var(--ssovee-brand-color) / 1) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-brand-color) 50%, transparent);
+    }
+  }
   .focus\:ring-green-500\/50:focus {
     --tw-ring-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1177,6 +1292,18 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .focus-visible\:ring-brand-color\/30:focus-visible {
+    --tw-ring-color: color-mix(in srgb, rgb(var(--ssovee-brand-color) / 1) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-brand-color) 30%, transparent);
+    }
+  }
+  .focus-visible\:ring-brand-color\/50:focus-visible {
+    --tw-ring-color: color-mix(in srgb, rgb(var(--ssovee-brand-color) / 1) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-brand-color) 50%, transparent);
+    }
+  }
   .focus-visible\:ring-green-500\/30:focus-visible {
     --tw-ring-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1201,16 +1328,46 @@
       --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
   }
+  .focus-visible\:ring-surface-1\/50:focus-visible {
+    --tw-ring-color: color-mix(in srgb, rgb(var(--ssovee-surface-1) / 1) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-surface-1) 50%, transparent);
+    }
+  }
+  .focus-visible\:ring-surface-3\/50:focus-visible {
+    --tw-ring-color: color-mix(in srgb, rgb(var(--ssovee-surface-3) / 1) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-surface-3) 50%, transparent);
+    }
+  }
   .focus-visible\:ring-offset-2:focus-visible {
     --tw-ring-offset-width: 2px;
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
+  .active\:bg-brand-color\/80:active {
+    background-color: color-mix(in srgb, rgb(var(--ssovee-brand-color) / 1) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-brand-color) 80%, transparent);
+    }
+  }
   .active\:bg-green-600:active {
     background-color: var(--color-green-600);
   }
   .active\:bg-red-600:active {
     background-color: var(--color-red-600);
   }
+  .active\:bg-surface-1:active {
+    background-color: var(--color-surface-1);
+  }
+  .active\:bg-surface-4:active {
+    background-color: var(--color-surface-4);
+  }
+  .active\:text-brand-color\/80:active {
+    color: color-mix(in srgb, rgb(var(--ssovee-brand-color) / 1) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-brand-color) 80%, transparent);
+    }
+  }
   .active\:text-green-700:active {
     color: var(--color-green-700);
   }
@@ -1227,6 +1384,12 @@
   .disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
+  .disabled\:bg-brand-color\/50:disabled {
+    background-color: color-mix(in srgb, rgb(var(--ssovee-brand-color) / 1) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-brand-color) 50%, transparent);
+    }
+  }
   .disabled\:bg-green-500\/50:disabled {
     background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1239,6 +1402,12 @@
       background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
   }
+  .disabled\:bg-surface-3\/50:disabled {
+    background-color: color-mix(in srgb, rgb(var(--ssovee-surface-3) / 1) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-surface-3) 50%, transparent);
+    }
+  }
   .disabled\:text-white\/80:disabled {
     color: color-mix(in srgb, #fff 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1261,16 +1430,86 @@
     border-bottom-width: 0px;
   }
 }
-:root {
-  --ssovee-primary: 15 23 42;
-  --ssovee-secondary: 30 41 59;
-  --ssovee-surface-1: 51 65 85;
-  --ssovee-surface-2: 40 53 72;
-  --ssovee-surface-3: 30 41 59;
-  --ssovee-surface-4: 51 65 85;
-  --ssovee-brand-color: 59 130 246;
-  --ssovee-border-1: 71 85 105;
-  --ssovee-muted: 100 116 139;
+@layer base {
+  * {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    box-sizing: border-box;
+  }
+  body {
+    background-color: var(--primary);
+    color: var(--neutral-500);
+  }
+  :root {
+    --primary: rgba(216, 216, 216, 0.85);
+    --secondary: rgba(252, 252, 252, 0.8);
+    --tertiary: rgba(152, 162, 179, 0.3);
+    --surface-1: rgba(69, 73, 85, 0.2);
+    --surface-2: rgba(255, 255, 255, 0.65);
+    --surface-3: rgba(245, 245, 245, 1);
+    --surface-4: rgba(255, 255, 255, 1);
+    --neutral-700: rgba(0, 0, 0, 0.6);
+    --neutral-600: rgba(0, 0, 0, 1);
+    --neutral-500: rgba(18, 19, 22, 1);
+    --neutral-400: rgba(46, 48, 56, 1);
+    --neutral-300: rgba(83, 87, 101, 1);
+    --neutral-200: rgba(110, 116, 135, 1);
+    --neutral-100: rgba(255, 255, 255, 1);
+    --brand-color: rgba(10, 132, 255, 1);
+    --border-1: rgba(69, 73, 85, 0.2);
+    --border-2: rgba(255, 255, 255, 0.06);
+    --border-3: rgba(69, 73, 85, 0.2);
+    --ssovee-primary: 216 216 216;
+    --ssovee-secondary: 252 252 252;
+    --ssovee-surface-1: 69 73 85;
+    --ssovee-surface-2: 255 255 255;
+    --ssovee-surface-3: 245 245 245;
+    --ssovee-surface-4: 255 255 255;
+    --ssovee-brand-color: 10 132 255;
+    --ssovee-border-1: 69 73 85;
+    --ssovee-muted: 110 116 135;
+  }
+  .dark {
+    --primary: rgba(43, 43, 43, 0.2);
+    --secondary: rgba(43, 43, 43, 0.7);
+    --tertiary: rgba(204, 204, 204, 0.1);
+    --surface-1: rgba(235, 235, 235, 0.2);
+    --surface-2: rgba(58, 58, 58, 1);
+    --surface-3: rgba(255, 255, 255, 0.2);
+    --surface-4: rgba(255, 255, 255, 0.05);
+    --neutral-700: rgba(255, 255, 255, 0.6);
+    --neutral-600: rgba(255, 255, 255, 1);
+    --neutral-500: rgba(245, 245, 245, 1);
+    --neutral-400: rgba(205, 205, 205, 1);
+    --neutral-300: rgba(166, 166, 166, 1);
+    --neutral-200: rgba(128, 128, 128, 1);
+    --neutral-100: rgba(93, 93, 93, 1);
+    --brand-color: rgba(10, 132, 255, 1);
+    --border-1: rgba(235, 235, 245, 0.2);
+    --border-2: rgba(255, 255, 255, 0.06);
+    --border-3: rgba(255, 255, 255, 0.1);
+    --ssovee-primary: 43 43 43;
+    --ssovee-secondary: 43 43 43;
+    --ssovee-surface-1: 235 235 235;
+    --ssovee-surface-2: 58 58 58;
+    --ssovee-surface-3: 255 255 255;
+    --ssovee-surface-4: 255 255 255;
+    --ssovee-brand-color: 10 132 255;
+    --ssovee-border-1: 235 235 245;
+    --ssovee-muted: 128 128 128;
+  }
+  .bg-primary, .bg-secondary {
+    backdrop-filter: blur(40px);
+  }
+  .window-drop-shadow {
+    backdrop-filter: blur(40px);
+    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.5)) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2)) drop-shadow(0 12px 20px rgba(0, 0, 0, 0.12));
+  }
+  .input-inner-shadow {
+    box-shadow: inset 0 1.5px 1.5px rgba(0, 0, 0, 0.1), inset 0 -0.5px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(255, 255, 255, 0.08), inset 0 0.5px 0 rgba(255, 255, 255, 0.05);
+  }
 }
 @property --tw-translate-x {
   syntax: "*";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssovee-os-web-ui",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Reusable UI component library for shared applications.",
   "author": "SSOVEE",
   "license": "MIT",
@@ -31,10 +31,11 @@
     },
     "./tailwind-preset": "./tailwind-preset.js",
     "./tailwind.config.js": "./tailwind.config.js",
-    "./theme.css": "./dist/index.css"
+    "./theme.css": "./theme.css"
   },
   "files": [
     "dist",
+    "theme.css",
     "README.md",
     "LICENSE",
     "tailwind-preset.js",
@@ -56,8 +57,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@phosphor-icons/react": ">=2",
-    "tailwindcss": ">=3.4 <5"
+    "@phosphor-icons/react": ">=2"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.11",
@@ -67,6 +67,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "jsdom": "^29.1.1",
+    "tailwindcss": "^4.1.11",
     "tsup": "^8.3.3",
     "typescript": "^5.7.2",
     "vitest": "^4.1.10"

package/theme.css

@@ -0,0 +1 @@
+@import "./dist/index.css";

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/theme.css"],"sourcesContent":["@import \"tailwindcss\";\n@source \"../dist\";\n\n:root {\n  --ssovee-primary: 15 23 42;\n  --ssovee-secondary: 30 41 59;\n  --ssovee-surface-1: 51 65 85;\n  --ssovee-surface-2: 40 53 72;\n  --ssovee-surface-3: 30 41 59;\n  --ssovee-surface-4: 51 65 85;\n  --ssovee-brand-color: 59 130 246;\n  --ssovee-border-1: 71 85 105;\n  --ssovee-muted: 100 116 139;\n}"],"mappings":";;;AACA,QAAQ;AAER;AACE,oBAAkB,GAAG,GAAG;AACxB,sBAAoB,GAAG,GAAG;AAC1B,sBAAoB,GAAG,GAAG;AAC1B,sBAAoB,GAAG,GAAG;AAC1B,sBAAoB,GAAG,GAAG;AAC1B,sBAAoB,GAAG,GAAG;AAC1B,wBAAsB,GAAG,IAAI;AAC7B,qBAAmB,GAAG,GAAG;AACzB,kBAAgB,IAAI,IAAI;AAC1B;","names":[]}