@rokkit/themes 1.0.0-next.81 → 1.0.0-next.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.81",
+  "version": "1.0.0-next.82",
   "description": "Themes for use with rokkit components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -19,7 +19,7 @@
     "typescript": "^5.3.3",
     "vite": "^5.1.4",
     "vitest": "~1.3.1",
-    "shared-config": "1.0.0-next.81"
+    "shared-config": "1.0.0-next.82"
   },
   "files": [
     "src"
@@ -38,7 +38,7 @@
     }
   },
   "dependencies": {
-    "@rokkit/core": "1.0.0-next.81"
+    "@rokkit/core": "1.0.0-next.82"
   },
   "scripts": {
     "format": "prettier --write .",

package/src/base/atoms.css

@@ -3,7 +3,7 @@ icon {
   @apply min-h-4 h-content;
 }
 icon[role='button'] {
-  @apply w-10 h-10 cursor-pointer aspect-square select-none focus:outline;
+  @apply p-2 cursor-pointer aspect-square select-none focus:outline;
 }
 icon > i {
   @apply text-2xl leading-6 aspect-square text-current;

package/src/material/list.css

@@ -26,25 +26,25 @@
   @apply border-b-0 border-t-3;
 }
 
-.material node {
+.material .node {
   @apply h-7 px-2;
 }
-.material node > item {
+.material .node > item {
   @apply px-1 gap-1 bg-transparent;
 }
-.material node > span {
+.material .node > span {
   @apply w-3;
 }
 
-.material node > span > icon {
+.material .node > span > icon {
   @apply text-sm;
 }
 
-.material nested-list:focus-within {
+.material .nested-list:focus-within {
   @apply outline-none;
 }
 
-.material node > span > i {
+.material .node > span > i {
   @apply border-transparent;
 }
 
@@ -59,7 +59,7 @@
 /* .material list item[aria-selected='true'] {
   @apply bg-primary text-primary-800;
 } */
-.material node[aria-selected='true'],
+.material .node[aria-selected='true'],
 .material list item[aria-selected='true'] {
   @apply bg-primary text-neutral-base;
 }

package/src/minimal/list.css

@@ -56,23 +56,23 @@
   /* @apply hover:text-secondary; */
 }
 
-.minimal node {
+.minimal .node {
   @apply h-7 px-2;
 }
-.minimal node > item {
+.minimal .node > item {
   @apply px-1 gap-1;
 }
-.minimal node > span {
+.minimal .node > span {
   @apply w-3;
 }
-.minimal node > span > icon {
-  /* .minimal node > icon { */
+.minimal .node > span > icon {
+  /* .minimal .node > icon { */
   @apply text-sm;
 }
-.minimal node[aria-selected='true'] > item > p {
+.minimal .node[aria-selected='true'] > item > p {
   @apply text-secondary-600;
 }
-.minimal node.is-selected icon {
+.minimal .node.is-selected icon {
   @apply text-secondary-600;
   @apply hover:text-secondary-600;
 }
@@ -82,10 +82,10 @@
   @apply text-sm;
 }
 
-.minimal .small node {
+.minimal .small .node {
   @apply text-sm gap-1 h-5;
 }
-.minimal .small node > span > icon {
+.minimal .small .node > span > icon {
   @apply text-sm;
 }
 .minimal .small item > img,
@@ -103,7 +103,7 @@
   @apply h-full bg-neutral-inset min-w-40;
 }
 
-.minimal node > span > i {
+.minimal .node > span > i {
   @apply border-neutral-muted;
 }
 

package/src/rokkit/atoms.css

@@ -10,10 +10,10 @@
 
 /* Styles for 'icon' class */
 .rokkit icon:not([role='button']) {
-  @apply focus:outline-none;
+  @apply focus:outline-none text-neutral-700;
 }
 .rokkit icon[role='button'] {
-  @apply text-neutral focus:rounded hover:text-secondary;
+  @apply text-neutral-700 focus:rounded hover:text-secondary rounded-md;
 }
 .rokkit icon[role='button']:focus {
   @apply outline-none bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
@@ -65,4 +65,4 @@
 
 .rokkit.dark ::-webkit-calendar-picker-indicator {
   filter: invert(1);
-}
+}

package/src/rokkit/molecules.css

@@ -145,7 +145,7 @@
 .rokkit item > a {
   @apply gap-2;
 }
-.rokkit node item {
+.rokkit .node item {
   @apply px-1 gap-2;
 }
 /* Crumbs styles */
@@ -153,7 +153,7 @@
   @apply flex-grow gap-1 text-sm;
 }
 .rokkit crumbs crumb.is-selected {
-  @apply text-secondary;
+  @apply text-secondary-700;
 }
 
 .rokkit day-of-month[aria-selected='true'] {

package/src/rokkit/organisms.css

@@ -66,7 +66,7 @@
   @apply bg-neutral-muted;
 }
 .rokkit tabs:focus-within .tab[aria-selected='true'] {
-  @apply bg-gradient-to-b from-primary to-secondary text-neutral-200 dark:text-neutral-800;
+  @apply bg-gradient-to-b from-primary to-secondary text-white;
 }
 .rokkit tabs.is-below:focus-within .tab[aria-selected='true'] {
   @apply bg-gradient-to-t;
@@ -81,7 +81,7 @@
 
 .rokkit button.is-primary,
 .rokkit .button.is-primary {
-  @apply bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
+  @apply bg-gradient-to-r from-primary to-secondary text-white;
 }
 
 .rokkit button-group {
@@ -99,10 +99,15 @@
 }
 
 .rokkit button-group button.active {
-  @apply bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
+  @apply bg-gradient-to-r from-primary to-secondary text-white;
 }
 .rokkit toggle {
-  @apply flex flex-row items-center p-2 rounded-md gap-3 max-w-max cursor-pointer;
+  @apply flex flex-row items-center gap-3 cursor-pointer;
+  @apply rounded-md border border-neutral-muted p-2;
+}
+
+.rokkit toggle:hover > icon {
+  @apply text-secondary;
 }
 .rokkit toggle:focus-within {
   @apply outline-none ring-2 ring-primary-500;
@@ -134,7 +139,7 @@
 .rokkit drop-down:focus-within > button {
   /* @apply p-2px; */
   @apply outline-none border-none;
-  @apply bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
+  @apply bg-gradient-to-r from-primary to-secondary text-white;
 }
 /* .rokkit :not(field) > input-select:focus-within > selected-item,
 .rokkit drop-down:focus-within > button > span {
@@ -166,10 +171,10 @@
 }
 
 /* Nested List and Node styles */
-.rokkit nested-list {
+.rokkit .nested-list {
   @apply text-neutral-800;
 }
-.rokkit nested-list node {
+.rokkit .nested-list .node {
   @apply px-2 h-8;
 }
 
@@ -179,8 +184,8 @@
 }
 
 /* Focus styles for Nested List, Tree, and Accordion */
-.rokkit nested-list,
-.rokkit nested-list:focus-within,
+.rokkit .nested-list,
+.rokkit .nested-list:focus-within,
 .rokkit tree:focus-within {
   @apply outline-none rounded;
 }
@@ -207,13 +212,13 @@
 /* .rokkit virtual-list item.is-hovering, */
 .rokkit list item:hover,
 .rokkit virtual-list-contents virtual-list-item:hover,
-.rokkit node:hover {
+.rokkit .node:hover {
   @apply bg-neutral-inset;
 }
 
 /* Selected and Hover styles for List and Node */
 .rokkit list item[aria-selected='true'] > a {
-  @apply text-neutral-200 dark:text-neutral-800;
+  @apply text-white;
 }
 .rokkit virtual-list-item[aria-current='true'] {
   @apply bg-neutral-inset text-secondary;
@@ -228,7 +233,7 @@
   @apply bg-neutral-subtle;
 }
 .rokkit accordion:focus-within [aria-selected='true'] summary {
-  @apply outline-none bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
+  @apply outline-none bg-gradient-to-r from-primary to-secondary text-white;
 }
 
 /* Border styles for Accordion */
@@ -240,19 +245,19 @@
 .rokkit .folder-tree {
   @apply bg-neutral-inset h-full;
 }
-.rokkit .folder-tree nested-list {
+.rokkit .folder-tree .nested-list{
   @apply bg-neutral-inset h-full;
 }
-.rokkit node > item {
+.rokkit .node > item {
   @apply px-1;
 }
-.rokkit node > span {
+.rokkit .node > span {
   @apply flex-shrink-0;
 }
-.rokkit node > span > i {
+.rokkit .node > span > i {
   @apply border-neutral-muted;
 }
-.rokkit node > icon {
+.rokkit .node > icon {
   @apply text-neutral-muted;
 }
 
@@ -295,17 +300,17 @@
 
 .rokkit list item[aria-selected='true'],
 .rokkit virtual-list-contents virtual-list-item[aria-selected='true'],
-.rokkit node[aria-selected='true'] {
+.rokkit .node[aria-selected='true'] {
   @apply bg-gradient-to-r from-neutral-subtle to-neutral-subtle text-neutral-800;
 }
 /* Focus and Hover styles for Toggle Switch, List, Tree, and Nested List */
 .rokkit toggle-switch:focus-within item[aria-selected='true'],
 .rokkit list:focus-within item[aria-selected='true'],
 .rokkit virtual-list-viewport:focus-within virtual-list-item[aria-selected='true'],
-.rokkit tree:focus-within node[aria-selected='true'],
-.rokkit nested-list:focus-within node[aria-selected='true'] {
-  @apply bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
-  @apply hover:from-secondary hover:to-primary hover:text-neutral-200 dark:text-neutral-800;
+.rokkit tree:focus-within .node[aria-selected='true'],
+.rokkit .nested-list:focus-within .node[aria-selected='true'] {
+  @apply bg-gradient-to-r from-primary to-secondary text-white;
+  @apply hover:from-secondary hover:to-primary;
 }
 
 .rokkit toggle-switch[aria-disabled='true'] {