@rokkit/themes 1.0.0-next.54 → 1.0.0-next.55

package/src/rokkit/organisms.css

@@ -1,20 +1,20 @@
 /* List styles */
 .rokkit virtual-list-contents {
   @apply flex flex-col;
-  @apply gap-1px bg-skin-inset;
+  @apply gap-1px bg-neutral-inset;
 }
 
 .rokkit list {
-  @apply gap-1px bg-skin-subtle;
+  @apply gap-1px bg-neutral-subtle;
 }
 
 .rokkit list > item,
 .rokkit virtual-list-contents > virtual-list-item,
 .rokkit accordion div summary {
-  @apply leading-10 px-4 bg-skin-base text-skin-800 min-h-10;
+  @apply leading-10 px-4 bg-neutral-base text-neutral-800 min-h-10;
 }
 .rokkit accordion > div > summary {
-  @apply rounded pr-2 bg-gradient from-skin-subtle to-skin-muted;
+  @apply rounded pr-2 bg-gradient from-neutral-subtle to-neutral-muted;
 }
 
 /* Remove default details marker from summary */
@@ -24,7 +24,7 @@
 
 /* Nested List and Tree styles */
 .rokkit :not(accordion > div) > list {
-  @apply rounded shadow border border-skin-400 overflow-y-scroll;
+  @apply rounded shadow border border-neutral-400 overflow-y-scroll;
 }
 .rokkit :not(accordion > div) > list item {
   @apply last:rounded-b first:rounded-t;
@@ -45,7 +45,7 @@
 }
 /* Styles for 'tabs' class */
 .rokkit tabs {
-  @apply border-b-2 border-skin-muted px-1 gap-1;
+  @apply border-b-2 border-neutral-muted px-1 gap-1;
 }
 .rokkit tabs.is-below {
   @apply border-b-0 border-t-2;
@@ -54,7 +54,7 @@
   @apply outline-none border-secondary;
 }
 .rokkit tabs .tab {
-  @apply leading-9 px-3 flex-shrink-0 items-center cursor-pointer rounded-t bg-skin-base gap-3;
+  @apply leading-9 px-3 flex-shrink-0 items-center cursor-pointer rounded-t bg-neutral-base gap-3;
 }
 .rokkit tabs.is-below .tab {
   @apply rounded-b rounded-t-none;
@@ -63,10 +63,10 @@
   @apply justify-center;
 }
 .rokkit tabs .tab[aria-selected='true'] {
-  @apply bg-skin-muted;
+  @apply bg-neutral-muted;
 }
 .rokkit tabs:focus-within .tab[aria-selected='true'] {
-  @apply bg-gradient-to-b from-primary-500 to-secondary text-skin-50;
+  @apply bg-gradient-to-b from-primary-500 to-secondary text-neutral-50;
 }
 .rokkit tabs.is-below:focus-within .tab[aria-selected='true'] {
   @apply bg-gradient-to-t;
@@ -75,13 +75,13 @@
 /* Styles for 'button' and 'button-group' classes */
 .rokkit button,
 .rokkit .button {
-  @apply flex min-h-9 items-center rounded-full px-6 uppercase bg-skin-muted text-skin-700 cursor-pointer;
+  @apply flex min-h-9 items-center rounded-full px-6 uppercase bg-neutral-muted text-neutral-700 cursor-pointer;
   animation: button-pop var(--animation-btn, 0.25s) ease-out;
 }
 
 .rokkit button.is-primary,
 .rokkit .button.is-primary {
-  @apply bg-gradient-to-r from-primary to-secondary text-skin-subtle;
+  @apply bg-gradient-to-r from-primary to-secondary text-neutral-subtle;
 }
 
 .rokkit button-group {
@@ -99,18 +99,18 @@
 }
 
 .rokkit button-group button.active {
-  @apply bg-gradient-to-r from-primary to-secondary text-skin-subtle;
+  @apply bg-gradient-to-r from-primary to-secondary text-neutral-subtle;
 }
 
 /* Input and Drop-down styles */
 .rokkit input-select,
 .rokkit drop-down > button {
   @apply rounded;
-  /* @apply border border-skin-muted; */
+  /* @apply border border-neutral-muted; */
 }
 
 .rokkit drop-down > button {
-  @apply bg-skin-base p-0;
+  @apply bg-neutral-base p-0;
 }
 .rokkit drop-down > button > span {
   @apply rounded py-0;
@@ -120,26 +120,26 @@
 }
 
 .rokkit :not(field) > input-select {
-  @apply bg-skin-base border border-skin-muted p-2px;
+  @apply bg-neutral-base border border-neutral-muted p-2px;
 }
 .rokkit :not(field) > input-select > selected-item {
-  @apply bg-skin-subtle;
+  @apply bg-neutral-subtle;
 }
 .rokkit :not(field) > input-select:focus-within,
 .rokkit drop-down:focus-within > button {
   /* @apply p-2px; */
   @apply outline-none border-none;
-  @apply bg-gradient-to-r from-primary-500 to-secondary text-skin-50;
+  @apply bg-gradient-to-r from-primary-500 to-secondary text-neutral-50;
 }
 /* .rokkit :not(field) > input-select:focus-within > selected-item,
 .rokkit drop-down:focus-within > button > span {
-  @apply bg-skin-muted outline-none min-h-10;
+  @apply bg-neutral-muted outline-none min-h-10;
 } */
 
 /* Hover and Icon styles */
 /* .rokkit input-select:hover > icon,
 .rokkit drop-down:hover > icon {
-  @apply border-skin-500;
+  @apply border-neutral-500;
 } */
 
 /* Scroll styles */
@@ -162,7 +162,7 @@
 
 /* Nested List and Node styles */
 .rokkit nested-list {
-  @apply text-skin-800;
+  @apply text-neutral-800;
 }
 .rokkit nested-list node {
   @apply px-2 h-8;
@@ -203,46 +203,46 @@
 .rokkit list item:hover,
 .rokkit virtual-list-contents virtual-list-item:hover,
 .rokkit node:hover {
-  @apply bg-skin-inset;
+  @apply bg-neutral-inset;
 }
 
 /* Selected and Hover styles for List and Node */
 .rokkit list item[aria-selected='true'] > a {
-  @apply text-skin-50;
+  @apply text-neutral-50;
 }
 .rokkit virtual-list-item[aria-current='true'] {
-  @apply bg-skin-inset text-secondary;
+  @apply bg-neutral-inset text-secondary;
 }
 
 .rokkit list item[aria-selected='true'],
 .rokkit virtual-list-contents virtual-list-item[aria-selected='true'],
 .rokkit node[aria-selected='true'] {
-  @apply bg-gradient-to-r from-skin-subtle to-skin-subtle text-skin-800;
+  @apply bg-gradient-to-r from-neutral-subtle to-neutral-subtle text-neutral-800;
 }
 
 /* Expanded and Selected styles for Accordion */
 .rokkit accordion .is-expanded summary {
-  @apply border-b border-skin-muted rounded-b-none sticky top-0 z-1;
+  @apply border-b border-neutral-muted rounded-b-none sticky top-0 z-1;
 }
 
 .rokkit accordion [aria-selected='true'] summary {
-  @apply bg-skin-subtle;
+  @apply bg-neutral-subtle;
 }
 .rokkit accordion:focus-within [aria-selected='true'] summary {
-  @apply outline-none bg-gradient-to-r from-primary-500 to-secondary text-skin-50;
+  @apply outline-none bg-gradient-to-r from-primary-500 to-secondary text-neutral-50;
 }
 
 /* Border styles for Accordion */
 .rokkit accordion > div {
-  @apply border border-skin-muted;
+  @apply border border-neutral-muted;
 }
 
 /* Folder Tree styles */
 .rokkit .folder-tree {
-  @apply bg-skin-inset h-full;
+  @apply bg-neutral-inset h-full;
 }
 .rokkit .folder-tree nested-list {
-  @apply bg-skin-inset h-full;
+  @apply bg-neutral-inset h-full;
 }
 .rokkit node > item {
   @apply px-1;
@@ -251,16 +251,16 @@
   @apply flex-shrink-0;
 }
 .rokkit node > span > i {
-  @apply border-skin-muted;
+  @apply border-neutral-muted;
 }
 .rokkit node > icon {
-  @apply text-skin-muted;
+  @apply text-neutral-muted;
 }
 
 /* Toggle Switch styles */
 .rokkit toggle-switch {
   @apply min-w-12 min-h-6 rounded-full mx-auto;
-  @apply bg-skin-subtle border border-skin-muted;
+  @apply bg-neutral-subtle border border-neutral-muted;
   @apply leading-loose p-2px;
 }
 .rokkit toggle-switch:focus-within {
@@ -275,20 +275,20 @@
 }
 
 .rokkit toggle-switch item[aria-selected='true'] {
-  @apply bg-gradient-to-r from-skin-muted to-skin-muted;
+  @apply bg-gradient-to-r from-neutral-muted to-neutral-muted;
 }
 
 .rokkit toggle-switch.compact > item {
   @apply px-0 gap-0;
 }
 .rokkit virtual-list-viewport {
-  @apply border box-content border-skin-inset;
+  @apply border box-content border-neutral-inset;
 }
 .rokkit virtual-list-viewport:focus-within {
   @apply outline-none;
 }
 .rokkit virtual-list {
-  @apply p-2px from-transparent to-transparent rounded border border-skin-muted;
+  @apply p-2px from-transparent to-transparent rounded border border-neutral-muted;
 }
 .rokkit virtual-list:focus-within {
   @apply bg-gradient-to-r from-primary-500 to-secondary;
@@ -302,6 +302,10 @@
   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-500 to-secondary text-skin-50;
-  @apply hover:from-secondary-500 hover:to-primary-500 hover:text-skin-50;
+  @apply bg-gradient-to-r from-primary-500 to-secondary text-neutral-50;
+  @apply hover:from-secondary-500 hover:to-primary-500 hover:text-neutral-50;
 }
+
+.rokkit input-select > selected-item > items {
+  @apply flex-grow flex-wrap gap-2;
+}