ssovee-os-web-ui 0.1.16 → 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)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssovee-os-web-ui",
-  "version": "0.1.16",
+  "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",

package/theme.css

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