ui-lab-theme-onyx 0.1.0 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-lab-theme-onyx",
-  "version": "0.1.0",
+  "version": "0.3.3",
   "type": "module",
   "license": "MIT",
   "main": "./styles.css",
@@ -20,12 +20,9 @@
   ],
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.11",
-    "postcss": "^8.5.6",
-    "postcss-cli": "^11.0.0",
     "typescript": "^5"
   },
   "scripts": {
-    "build": "postcss src/onyx.css -o styles.css",
     "clean": "rm -f styles.css"
   }
 }

package/styles.css

@@ -9,6 +9,11 @@
   --hover-border: color-mix(in srgb, var(--background-600) 75%, var(--background-950));
 }
 
+.button.icon { @apply aspect-square px-2 py-1; font-size: var(--text-sm); }
+.button.sm { @apply px-2 py-1.5; font-size: var(--text-sm); }
+.button.md { @apply px-3 py-2;   font-size: var(--text-sm); }
+.button.lg { @apply px-7 py-1.5; font-size: var(--text-sm); }
+
 .button.primary {
   --background: var(--foreground-200);
   --foreground: var(--background-900);
@@ -44,7 +49,8 @@
 .button.ghost {
   --background: transparent;
   --background-border: transparent;
-  --hover-background: var(--background-800);
+  --hover-background: transparent;
+  --hover-border: transparent;
 }
 
 /* Gallery Styles */
@@ -132,6 +138,7 @@
   --shadow: 0 20px 25px -5px rgb(#ff0000 / 0.1);
 }
 
+
 /* Date Styles */
 
 .date {
@@ -403,12 +410,12 @@
 
 .switch {
   --track-background-unchecked: var(--background-700);
-  --track-background-checked: var(--background-500);
+  --track-background-checked: color-mix(in srgb, var(--accent-500) 80%, var(--background-500));
   --track-background-hover: var(--background-800);
   --track-background-active: var(--background-800);
   --track-background-disabled: var(--background-950);
   --thumb-background-unchecked: var(--background-500);
-  --thumb-background-checked: var(--foreground-300);
+  --thumb-background-checked: white;
 
   --border: var(--background-600);
   --border-hover: transparent;
@@ -505,7 +512,7 @@
 .badge {
   --background: var(--background-800);
   --foreground: var(--foreground-200);
-  --border: var(--background-600);
+  --background-border: var(--background-600);
   --dismiss-color: var(--foreground-400);
   --dismiss-hover-background: color-mix(in srgb, var(--background-700) 80%, var(--background-900));
   --dismiss-pressed-background: var(--background-700);
@@ -514,37 +521,37 @@
 .badge.default {
   --background: color-mix(in srgb, var(--background-600) 10%, var(--background-900));
   --foreground: var(--foreground-200);
-  --border: var(--background-700);
+  --background-border: var(--background-700);
 }
 
 .badge.secondary {
   --background: color-mix(in srgb, var(--background-600) 40%, transparent);
   --foreground: var(--foreground-300);
-  --border: var(--background-600);
+  --background-border: color-mix(in srgb, var(--background-600) 40%, transparent);;
 }
 
 .badge.success {
   --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
   --foreground: var(--success-600);
-  --border: color-mix(in srgb, var(--success-600) 20%, var(--background-900));
+  --background-border: color-mix(in srgb, var(--success-600) 20%, var(--background-900));
 }
 
 .badge.warning {
   --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
   --foreground: var(--warning-600);
-  --border: color-mix(in srgb, var(--warning-600) 20%, var(--background-900));
+  --background-border: color-mix(in srgb, var(--warning-600) 20%, var(--background-900));
 }
 
 .badge.danger {
   --background: color-mix(in srgb, var(--danger-600) 10%, var(--background-900));
   --foreground: var(--danger-600);
-  --border: color-mix(in srgb, var(--danger-600) 20%, var(--background-900));
+  --background-border: color-mix(in srgb, var(--danger-600) 20%, var(--background-900));
 }
 
 .badge.info {
   --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
   --foreground: var(--info-600);
-  --border: color-mix(in srgb, var(--info-600) 20%, var(--background-900));
+  --background-border: color-mix(in srgb, var(--info-600) 20%, var(--background-900));
 }
 
 /* Popover Styles */
@@ -641,6 +648,42 @@
   --close-hover-background: color-mix(in srgb, var(--warning-500) 20%, var(--background-900));
 }
 
+/* Menu Styles */
+
+.menu.content,
+.menu.sub-content {
+  --content-background: var(--background-900);
+  --content-border: var(--background-700);
+}
+
+.menu.trigger {
+  --trigger-active-background: var(--background-700);
+}
+
+.menu.item,
+.menu.checkbox-item,
+.menu.radio-item,
+.menu.sub-trigger {
+  --item-foreground: var(--foreground-300);
+  --item-highlighted-background: color-mix(in srgb, var(--background-700) 50%, transparent);
+}
+
+.menu.item-indicator {
+  --item-indicator-color: var(--accent-300);
+}
+
+.menu.label {
+  --label-foreground: var(--foreground-400);
+}
+
+.menu.separator {
+  --separator-background: var(--background-700);
+}
+
+.menu.shortcut {
+  --shortcut-foreground: var(--foreground-400);
+}
+
 /* Tabs Styles */
 
 .tabs.indicator {
@@ -674,6 +717,7 @@
 .anchor.trigger {
   --foreground: var(--foreground-200);
   --underline-background: var(--background-600);
+  --underline-background-hover: var(--foreground-400);
   --focus-ring: var(--color-background-600);
 }
 
@@ -686,6 +730,7 @@
   --modal-text-color: var(--foreground-300);
   --modal-close-color: var(--foreground-400);
   --modal-close-hover: var(--foreground-200);
+  --modal-focus-ring: var(--accent-500);
   --footer-background: var(--background-900);
 }
 
@@ -701,3 +746,4 @@
   --thumb-hover-background: var(--background-600);
   --thumb-dragging-background: color-mix(in srgb, var(--background-500) 60%, var(--background-950));
 }
+