ui-lab-theme-onyx 0.1.0 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-lab-theme-onyx",
-  "version": "0.1.0",
+  "version": "0.3.4",
   "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,15 @@
   --hover-border: color-mix(in srgb, var(--background-600) 75%, var(--background-950));
 }
 
+.button {
+  font-size: var(--text-sm);
+}
+
+.button.icon { @apply aspect-square }
+.button.sm { @apply px-2 py-1.5 text-xs font-semibold }
+.button.md { @apply px-3 py-1.5 }
+.button.lg { @apply px-5 py-2.5 }
+
 .button.primary {
   --background: var(--foreground-200);
   --foreground: var(--background-900);
@@ -43,8 +52,10 @@
 
 .button.ghost {
   --background: transparent;
+  --foreground: var(--foreground-300);
   --background-border: transparent;
-  --hover-background: var(--background-800);
+  --hover-background: var(--background-700);
+  --hover-border: transparent;
 }
 
 /* Gallery Styles */
@@ -105,9 +116,11 @@
 
 .group {
   --background: var(--background-950);
+  /* --foreground: red; */
   --border: var(--background-700);
   --focus-ring-color: var(--accent-500);
   --active-background: var(--background-800);
+  --active-foreground: var(--foreground-100);
 }
 
 .group.ghost {
@@ -115,7 +128,6 @@
 }
 
 /* Command Styles */
-
 .command {
   --background-default: var(--background-900);
   --background-input: var(--background-900);
@@ -132,6 +144,7 @@
   --shadow: 0 20px 25px -5px rgb(#ff0000 / 0.1);
 }
 
+
 /* Date Styles */
 
 .date {
@@ -187,30 +200,34 @@
 /* Checkbox Styles */
 
 .checkbox {
-  --background: var(--background-700);
-  --border: var(--background-600);
+  --background: var(--background-900);
+  --border: var(--background-700);
   --ring-color: var(--accent-500);
-  --hover-background: color-mix(in srgb, var(--background-500) 60%, transparent);
-  --hover-border: transparent;
+  --hover-background: color-mix(in srgb, var(--background-500) 10%, transparent);
+  --hover-border: var(--background-600);
 }
 
 .checkbox[data-selected="true"] {
-  --background: var(--background-600);
-  --border: transparent;
+  --background: var(--accent-500);
+  --hover-background: var(--accent-600);
+  --border: var(--accent-500);
+  --hover-border: var(--accent-400);
 }
 
 .checkbox[data-indeterminate="true"] {
-  --background: var(--background-600);
-  --border: transparent;
+  --background: var(--accent-600);
+  --hover-background: var(--accent-500);
+  --border: var(--accent-600);
+  --hover-border: var(--accent-400);
 }
 
 .checkbox-root.checkbox-checkmark,
 .checkbox-root.checkbox-indeterminate {
-  --checkmark-color: var(--foreground-50);
+  --checkmark-color: white
 }
 
 .checkbox-root.helper-text-error {
-  --error-color: var(--danger-600);
+  --error-color: white;
 }
 
 /* Color Styles */
@@ -258,6 +275,8 @@
   --ring-color: var(--accent-500);
   --disabled-background: var(--background-900);
   --disabled-foreground: var(--foreground-400);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium)
 }
 
 .input[data-error] {
@@ -350,6 +369,7 @@
   --focus-ring-background: var(--background-950);
   --hover-background: color-mix(in srgb, var(--background-700) 50%, transparent);
   --pressed-background: color-mix(in srgb, var(--background-600) 50%, transparent);
+  --font-size: var(--text-xs)
 }
 
 .select.ghost {
@@ -403,12 +423,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,46 +525,48 @@
 .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);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--text-xs)
 }
 
 .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 */
@@ -563,6 +585,8 @@
 .tooltip.content {
   --tooltip-fill: var(--background-900);
   --tooltip-border-color: var(--background-700);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium)
 }
 
 .tooltip.frame {
@@ -641,6 +665,43 @@
   --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);
+  font-size: var(--text-xs)
+}
+
+.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 {
@@ -663,6 +724,7 @@
   --trigger-selected-background: color-mix(in srgb, var(--background-700) 50%, transparent);
   --trigger-underline-color: var(--accent-500);
   --trigger-focus-background: var(--background-800);
+  font-size: var(--text-xs);
 }
 
 .tabs.content {
@@ -674,6 +736,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 +749,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 +765,4 @@
   --thumb-hover-background: var(--background-600);
   --thumb-dragging-background: color-mix(in srgb, var(--background-500) 60%, var(--background-950));
 }
+