@rokkit/themes 1.0.0-next.100 → 1.0.0-next.105

package/src/rokkit/organisms.css

@@ -1,60 +1,60 @@
-/* List styles */
-.rokkit virtual-list-contents {
+/* rkt-list styles */
+.rokkit rkt-virtual-list-contents {
   @apply flex flex-col;
   @apply gap-1px bg-neutral-inset;
 }
 
-.rokkit list {
+.rokkit rkt-list {
   @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-neutral-base text-neutral-800 min-h-10;
+.rokkit rkt-list > rkt-item,
+.rokkit rkt-virtual-list-contents > rkt-virtual-list-item,
+.rokkit rkt-accordion div summary {
+  @apply bg-neutral-base min-h-10 px-4 leading-10 text-neutral-800;
 }
-.rokkit accordion > div > summary {
-  @apply rounded pr-2 bg-gradient from-neutral-subtle to-neutral-muted;
+.rokkit rkt-accordion > div > summary {
+  @apply bg-gradient from-neutral-subtle to-neutral-muted rounded pr-2;
 }
 
 /* Remove default details marker from summary */
-.rokkit accordion > div > summary::-webkit-details-marker {
+.rokkit rkt-accordion > div > summary::-webkit-details-marker {
   display: none;
 }
 
-/* Nested List and Tree styles */
-.rokkit :not(accordion > div) > list {
-  @apply rounded shadow border border-neutral-400 overflow-y-scroll;
+/* Nested rkt-list and Tree styles */
+.rokkit :not(accordion > div) > rkt-list {
+  @apply overflow-y-scroll rounded border border-neutral-400 shadow;
 }
-.rokkit :not(accordion > div) > list item {
-  @apply last:rounded-b first:rounded-t;
+.rokkit :not(accordion > div) > rkt-list rkt-item {
+  @apply first:rounded-t last:rounded-b;
 }
 
-.rokkit accordion list item {
-  @apply last:rounded-b gap-2;
+.rokkit rkt-accordion rkt-list rkt-item {
+  @apply gap-2 last:rounded-b;
 }
-.rokkit accordion list item > a {
+.rokkit rkt-accordion rkt-list rkt-item > a {
   @apply gap-2;
 }
-.rokkit accordion list {
+.rokkit rkt-accordion rkt-list {
   @apply rounded-b;
 }
 
-.rokkit accordion .is-expanded list {
-  @apply -mt-10 pt-10 rounded-t;
+.rokkit rkt-accordion .is-expanded rkt-list {
+  @apply -mt-10 rounded-t pt-10;
 }
 /* Styles for 'tabs' class */
 .rokkit tabs {
-  @apply border-b-2 border-neutral-muted px-1 gap-1;
+  @apply border-neutral-muted gap-1 border-b-2 px-1;
 }
 .rokkit tabs.is-below {
   @apply border-b-0 border-t-2;
 }
 .rokkit tabs:focus-within {
-  @apply outline-none border-secondary;
+  @apply border-secondary outline-none;
 }
 .rokkit tabs .tab {
-  @apply leading-9 px-3 flex-shrink-0 items-center cursor-pointer rounded-t bg-neutral-base gap-3;
+  @apply bg-neutral-base flex-shrink-0 cursor-pointer items-center gap-3 rounded-t px-3 leading-9;
 }
 .rokkit tabs.is-below .tab {
   @apply rounded-b rounded-t-none;
@@ -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-white;
+  @apply from-primary to-secondary bg-gradient-to-b text-white;
 }
 .rokkit tabs.is-below:focus-within .tab[aria-selected='true'] {
   @apply bg-gradient-to-t;
@@ -75,21 +75,21 @@
 /* Styles for 'button' and 'button-group' classes */
 .rokkit button,
 .rokkit .button {
-  @apply flex min-h-9 items-center rounded-full px-6 gap-3 uppercase bg-neutral-muted text-neutral-700 cursor-pointer;
+  @apply bg-neutral-muted flex min-h-9 cursor-pointer items-center gap-3 rounded-full px-6 uppercase text-neutral-700;
   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-white;
+  @apply from-primary to-secondary bg-gradient-to-r text-white;
 }
 
 .rokkit button-group {
-  @apply flex items-center justify-center m-auto py-1 gap-1px;
+  @apply gap-1px m-auto flex items-center justify-center py-1;
 }
 
 .rokkit button-group button {
-  @apply flex px-2 pt-0.5 uppercase rounded-none focus:outline-none;
+  @apply flex rounded-none px-2 pt-0.5 uppercase focus:outline-none;
 }
 .rokkit button-group button:first-child {
   @apply rounded-l-full pl-3;
@@ -99,7 +99,7 @@
 }
 
 .rokkit button-group button.active {
-  @apply bg-gradient-to-r from-primary to-secondary text-white;
+  @apply from-primary to-secondary bg-gradient-to-r text-white;
 }
 
 /* Input and Drop-down styles */
@@ -120,7 +120,7 @@
 }
 
 .rokkit :not(field) > input-select {
-  @apply bg-neutral-base border border-neutral-muted p-2px;
+  @apply bg-neutral-base border-neutral-muted p-2px border;
 }
 .rokkit :not(field) > input-select > selected-item {
   @apply bg-neutral-subtle;
@@ -128,44 +128,44 @@
 .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 to-secondary text-white;
+  @apply border-none outline-none;
+  @apply from-primary to-secondary bg-gradient-to-r text-white;
 }
 /* .rokkit :not(field) > input-select:focus-within > selected-item,
 .rokkit drop-down:focus-within > button > span {
   @apply bg-neutral-muted outline-none min-h-10;
 } */
 
-/* Hover and Icon styles */
-/* .rokkit input-select:hover > icon,
-.rokkit drop-down:hover > icon {
+/* Hover and rkt-icon styles */
+/* .rokkit input-select:hover > rkt-icon,
+.rokkit drop-down:hover > rkt-icon {
   @apply border-neutral;
 } */
 
 /* Scroll styles */
 .rokkit input-select scroll,
-.rokkit input-select virtual-list {
-  @apply my-1 shadow-lg rounded;
+.rokkit input-select rkt-virtual-list {
+  @apply my-1 rounded shadow-lg;
 }
 
 /* .rokkit input-select > selected-item > items {
   @apply flex-grow flex-wrap gap-2;
 } */
 
-/* Accordion styles */
-.rokkit accordion {
+/* rkt-accordion styles */
+.rokkit rkt-accordion {
   @apply flex-grow gap-1 overflow-y-scroll;
 }
-.rokkit accordion > div {
-  @apply rounded shadow relative;
+.rokkit rkt-accordion > div {
+  @apply relative rounded shadow;
 }
 
-/* Nested List and Node styles */
-.rokkit nested-list {
+/* Nested rkt-list and rkt-node styles */
+.rokkit rkt-nested-list {
   @apply text-neutral-800;
 }
-.rokkit nested-list node > div {
-  @apply px-2 h-8;
+.rokkit rkt-nested-list rkt-node > div {
+  @apply h-8 px-2;
 }
 
 /* Tree styles */
@@ -173,143 +173,143 @@
   @apply rounded;
 }
 
-/* Focus styles for Nested List, Tree, and Accordion */
-.rokkit nested-list,
-.rokkit nested-list:focus-within,
+/* Focus styles for Nested rkt-list, Tree, and rkt-accordion */
+.rokkit rkt-nested-list,
+.rokkit rkt-nested-list:focus-within,
 .rokkit tree:focus-within {
-  @apply outline-none rounded;
+  @apply rounded outline-none;
 }
 
-.rokkit accordion,
-.rokkit list,
-.rokkit virtual-list-viewport {
+.rokkit rkt-accordion,
+.rokkit rkt-list,
+.rokkit rkt-virtual-list-viewport {
   @apply rounded;
 }
 
 /* Remove outline from focused elements */
-.rokkit accordion:focus-within list,
-.rokkit drop-down:focus-within list,
-.rokkit input-select:focus-within list,
-.rokkit input-select:focus-within virtual-list-viewport {
+.rokkit rkt-accordion:focus-within rkt-list,
+.rokkit drop-down:focus-within rkt-list,
+.rokkit input-select:focus-within rkt-list,
+.rokkit input-select:focus-within rkt-virtual-list-viewport {
   @apply outline-none focus:outline-none;
 }
 
-/* Focus and Hover styles for List and Node */
-.rokkit list:focus {
-  @apply outline outline-secondary;
+/* Focus and Hover styles for rkt-list and rkt-node */
+.rokkit rkt-list:focus {
+  @apply outline-secondary outline;
 }
-/* .rokkit list item.is-hovering, */
-/* .rokkit virtual-list item.is-hovering, */
-.rokkit list item:hover,
-.rokkit virtual-list-contents virtual-list-item:hover,
-.rokkit node > div:hover {
+/* .rokkit rkt-list rkt-item.is-hovering, */
+/* .rokkit rkt-virtual-list rkt-item.is-hovering, */
+.rokkit rkt-list rkt-item:hover,
+.rokkit rkt-virtual-list-contents rkt-virtual-list-item:hover,
+.rokkit rkt-node > div:hover {
   @apply bg-neutral-subtle;
 }
 
-/* Selected and Hover styles for List and Node */
-.rokkit list item[aria-selected='true'] > a {
+/* Selected and Hover styles for rkt-list and rkt-node */
+.rokkit rkt-list rkt-item[aria-selected='true'] > a {
   @apply text-white;
 }
-.rokkit virtual-list-item[aria-current='true'] {
+.rokkit rkt-virtual-list-item[aria-current='true'] {
   @apply bg-neutral-inset text-secondary;
 }
 
-/* Expanded and Selected styles for Accordion */
-.rokkit accordion .is-expanded summary {
-  @apply border-b border-neutral-muted rounded-b-none sticky top-0 z-1;
+/* Expanded and Selected styles for rkt-accordion */
+.rokkit rkt-accordion .is-expanded summary {
+  @apply border-neutral-muted z-1 sticky top-0 rounded-b-none border-b;
 }
 
-.rokkit accordion [aria-selected='true'] summary {
+.rokkit rkt-accordion [aria-selected='true'] summary {
   @apply bg-neutral-subtle;
 }
-.rokkit accordion:focus-within [aria-selected='true'] summary {
-  @apply outline-none bg-gradient-to-r from-primary to-secondary text-white;
+.rokkit rkt-accordion:focus-within [aria-selected='true'] summary {
+  @apply from-primary to-secondary bg-gradient-to-r text-white outline-none;
 }
 
-/* Border styles for Accordion */
-.rokkit accordion > div {
-  @apply border border-neutral-muted;
+/* Border styles for rkt-accordion */
+.rokkit rkt-accordion > div {
+  @apply border-neutral-muted border;
 }
 
 /* Folder Tree styles */
 .rokkit .folder-tree {
   @apply bg-neutral-inset h-full;
 }
-.rokkit .folder-tree nested-list {
+.rokkit .folder-tree rkt-nested-list {
   @apply bg-neutral-inset h-full;
 }
-.rokkit node > div > item {
+.rokkit rkt-node > div > rkt-item {
   @apply px-1;
 }
-.rokkit node > div > span {
+.rokkit rkt-node > div > span {
   @apply flex-shrink-0;
 }
-.rokkit node > div > span > i {
+.rokkit rkt-node > div > span > i {
   @apply border-neutral-muted;
 }
-.rokkit node > div > icon > i {
+.rokkit rkt-node > div > rkt-icon > i {
   @apply text-neutral-elevated;
 }
 
 /* Toggle Switch styles */
-.rokkit toggle-switch {
-  @apply min-w-12 rounded-full mx-auto;
-  @apply bg-neutral-subtle border border-neutral-muted;
-  @apply leading-loose p-2px;
+.rokkit rkt-toggle {
+  @apply mx-auto min-w-12 rounded-full;
+  @apply bg-neutral-subtle border-neutral-muted border;
+  @apply p-2px leading-loose;
 }
-.rokkit toggle-switch:focus-within {
-  @apply outline outline-secondary;
+.rokkit rkt-toggle:focus-within {
+  @apply outline-secondary outline;
 }
-.rokkit toggle-switch item {
-  @apply items-center justify-center px-3 gap-1 py-0 leading-loose;
-  @apply min-w-6 min-h-6 rounded-full cursor-pointer;
+.rokkit rkt-toggle rkt-item {
+  @apply items-center justify-center gap-1 px-3 py-0 leading-loose;
+  @apply min-h-6 min-w-6 cursor-pointer rounded-full;
 }
-.rokkit toggle-switch item > icon > i {
+.rokkit rkt-toggle rkt-item > rkt-icon > i {
   @apply text-lg;
 }
 
-.rokkit toggle-switch item[aria-selected='true'] {
-  @apply bg-gradient-to-r from-neutral-muted to-neutral-muted;
+.rokkit rkt-toggle rkt-item[aria-selected='true'] {
+  @apply from-neutral-muted to-neutral-muted bg-gradient-to-r;
 }
 
-.rokkit toggle-switch.compact > item {
-  @apply px-0 gap-0;
+.rokkit rkt-toggle.compact > rkt-item {
+  @apply gap-0 px-0;
 }
-.rokkit virtual-list-viewport {
-  @apply border box-content border-neutral-inset;
+.rokkit rkt-virtual-list-viewport {
+  @apply border-neutral-inset box-content border;
 }
-.rokkit virtual-list-viewport:focus-within {
+.rokkit rkt-virtual-list-viewport:focus-within {
   @apply outline-none;
 }
-.rokkit virtual-list {
-  @apply p-2px from-transparent to-transparent rounded border border-neutral-muted;
+.rokkit rkt-virtual-list {
+  @apply p-2px border-neutral-muted rounded border from-transparent to-transparent;
 }
-.rokkit virtual-list:focus-within {
-  @apply bg-gradient-to-r from-primary to-secondary;
+.rokkit rkt-virtual-list:focus-within {
+  @apply from-primary to-secondary bg-gradient-to-r;
 }
 
-.rokkit list item[aria-selected='true'],
-.rokkit virtual-list-contents virtual-list-item[aria-selected='true'],
-.rokkit node[aria-selected='true'] > div {
-  @apply bg-gradient-to-r from-neutral-subtle to-neutral-subtle text-neutral-800;
+.rokkit rkt-list rkt-item[aria-selected='true'],
+.rokkit rkt-virtual-list-contents rkt-virtual-list-item[aria-selected='true'],
+.rokkit rkt-node[aria-selected='true'] > div {
+  @apply from-neutral-subtle to-neutral-subtle bg-gradient-to-r 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'] > div,
-.rokkit nested-list:focus-within node[aria-selected='true'] > div {
-  @apply bg-gradient-to-r from-primary to-secondary text-white;
+/* Focus and Hover styles for Toggle Switch, rkt-list, Tree, and Nested rkt-list */
+.rokkit rkt-toggle:focus-within rkt-item[aria-selected='true'],
+.rokkit rkt-list:focus-within rkt-item[aria-selected='true'],
+.rokkit rkt-virtual-list-viewport:focus-within rkt-virtual-list-item[aria-selected='true'],
+.rokkit tree:focus-within rkt-node[aria-selected='true'] > div,
+.rokkit rkt-nested-list:focus-within rkt-node[aria-selected='true'] > div {
+  @apply from-primary to-secondary bg-gradient-to-r text-white;
   @apply hover:from-secondary hover:to-primary;
 }
 
-.rokkit toggle-switch[aria-disabled='true'] {
-  @apply bg-neutral-muted text-neutral-500 cursor-not-allowed;
+.rokkit rkt-toggle[aria-disabled='true'] {
+  @apply bg-neutral-muted cursor-not-allowed text-neutral-500;
 }
-.rokkit input-select > selected-item > items {
+.rokkit rkt-input-select > rkt-selected-item > rkt-items {
   @apply flex-grow flex-wrap gap-2;
 }
 
-.rokkit container:focus-within {
+.rokkit rkt-container:focus-within {
   @apply outline-none;
 }

package/src/rokkit/table.css

@@ -21,17 +21,17 @@ th[data-sortable='true']:hover icon {
 }
 
 table {
-  @apply w-full text-sm text-left rtl:text-right text-neutral-700;
+  @apply w-full text-left text-sm text-neutral-700 rtl:text-right;
 }
 table > thead {
-  @apply table-header-group text-xs uppercase bg-neutral-400;
+  @apply table-header-group bg-neutral-400 text-xs uppercase;
 }
 table > caption {
-  @apply table-caption p-5 text-sm font-normal text-left rtl:text-right bg-neutral-subtle text-neutral-600;
+  @apply bg-neutral-subtle table-caption p-5 text-left text-sm font-normal text-neutral-600 rtl:text-right;
 }
 
 table > tbody > tr {
-  @apply table-row border-b border-neutral-base bg-neutral-subtle;
+  @apply border-neutral-base bg-neutral-subtle table-row border-b;
 }
 table.striped > tbody > tr:nth-child(even) {
   @apply bg-neutral-inset;
@@ -43,15 +43,15 @@ table > tfoot > tr {
   @apply table-row font-semibold text-neutral-800;
 }
 
-table-wrapper {
+rkt-table-wrapper {
   @apply shadow-md sm:rounded-lg;
 }
 
-td cell.cell-type-integer p,
-td cell.cell-type-number p {
-  @apply text-right w-full;
+td rkt-cell.cell-type-integer p,
+td rkt-cell.cell-type-number p {
+  @apply w-full text-right;
 }
 
-td cell item {
+td rkt-cell rkt-item {
   @apply flex w-full;
 }

package/src/rokkit/toggle.css

@@ -1,18 +1,18 @@
-.rokkit toggle {
-  @apply flex flex-row items-center gap-3 cursor-pointer;
-  @apply rounded-md border border-neutral-muted p-2;
+.rokkit rkt-toggle {
+  @apply flex cursor-pointer flex-row items-center gap-3;
+  @apply border-neutral-muted rounded-md border p-2;
 }
 
-.rokkit toggle:hover > icon {
+.rokkit rkt-toggle:hover > rkt-icon {
   @apply text-secondary;
 }
-.rokkit toggle:focus-within {
-  @apply outline-none ring-2 ring-primary-500;
+.rokkit rkt-toggle:focus-within {
+  @apply ring-primary-500 outline-none ring-2;
 }
 
-.rokkit toggle.minimal {
-  @apply py-0 border-none focus-within:ring-0;
+.rokkit rkt-toggle.minimal {
+  @apply border-none py-0 focus-within:ring-0;
 }
-.rokkit toggle.minimal icon > i {
+.rokkit rkt-toggle.minimal rkt-icon > i {
   @apply h-4;
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Jerry Thomas
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.