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

package/src/minimal/list.css

@@ -1,57 +1,57 @@
-.minimal item {
+.minimal rkt-item {
   @apply flex items-center gap-1;
 }
-.minimal accordion {
+.minimal rkt-accordion {
   @apply flex-grow overflow-y-scroll focus-within:outline-none;
 }
-.minimal accordion > div,
-.minimal accordion > details {
+.minimal rkt-accordion > div,
+.minimal rkt-accordion > details {
   @apply relative;
 }
-.minimal list,
-.minimal accordion summary {
+.minimal rkt-list,
+.minimal rkt-accordion summary {
   @apply border-l-2px border-l-neutral-muted;
 }
-.minimal :not(accordion > div) list:focus-within {
-  @apply outline outline-offset-3 outline-secondary-700;
+.minimal :not(accordion > div) rkt-list:focus-within {
+  @apply outline-offset-3 outline-secondary-700 outline;
 }
-.minimal list > item,
-.minimal accordion summary {
-  @apply px-2 text-neutral-700 bg-neutral-base items-center leading-8;
+.minimal rkt-list > rkt-item,
+.minimal rkt-accordion summary {
+  @apply bg-neutral-base items-center px-2 leading-8 text-neutral-700;
 }
 
-.minimal item > a {
-  @apply px-0 gap-2;
+.minimal rkt-item > a {
+  @apply gap-2 px-0;
 }
 
-.minimal list item:hover {
+.minimal rkt-list rkt-item:hover {
   @apply -m-l-2px border-l-2px border-l-neutral-subtle;
 }
-.minimal accordion summary:hover {
+.minimal rkt-accordion summary:hover {
   @apply border-l-neutral-subtle;
 }
-.minimal list item[aria-selected='true'] {
+.minimal rkt-list rkt-item[aria-selected='true'] {
   @apply -m-l-2px border-l-2px border-l-secondary-600 text-secondary-600 bg-neutral-subtle;
 }
-.minimal accordion .is-selected summary {
+.minimal rkt-accordion .is-selected summary {
   @apply border-l-2px border-l-secondary-600 bg-neutral-subtle;
 }
 
-.minimal accordion .is-expanded summary {
-  @apply sticky top-0 z-1;
+.minimal rkt-accordion .is-expanded summary {
+  @apply z-1 sticky top-0;
 }
-.minimal accordion item > a {
+.minimal rkt-accordion rkt-item > a {
   @apply px-0;
 }
-.minimal item > img,
-.minimal item > a > img {
-  @apply w-6 h-6;
+.minimal rkt-item > img,
+.minimal rkt-item > a > img {
+  @apply h-6 w-6;
 }
 
-.minimal accordion .is-selected summary,
-.minimal accordion .is-selected summary > a,
-.minimal accordion item[aria-selected='true'],
-.minimal accordion item[aria-selected='true'] > a {
+.minimal rkt-accordion .is-selected summary,
+.minimal rkt-accordion .is-selected summary > a,
+.minimal rkt-accordion rkt-item[aria-selected='true'],
+.minimal rkt-accordion rkt-item[aria-selected='true'] > a {
   @apply text-secondary-600;
   /* @apply hover:text-secondary; */
 }
@@ -59,78 +59,78 @@
 /* .minimal nested-list {
   @apply text-sm;
 } */
-.minimal node > div {
+.minimal rkt-node > div {
   @apply h-7 px-2 py-1;
 }
-.minimal node > item {
-  @apply px-1 gap-1;
+.minimal rkt-node > rkt-item {
+  @apply gap-1 px-1;
 }
-.minimal node > div > span > i {
-  @apply border-none w-3;
+.minimal rkt-node > div > span > i {
+  @apply w-3 border-none;
 }
-.minimal node > div > icon {
+.minimal rkt-node > div > rkt-icon {
   @apply text-xs text-neutral-400;
 }
-.minimal node[aria-selected='true'] > item > p {
+.minimal rkt-node[aria-selected='true'] > rkt-item > p {
   @apply text-secondary-600;
 }
-.minimal node.is-selected icon {
+.minimal rkt-node.is-selected rkt-icon {
   @apply text-secondary-600;
   @apply hover:text-secondary-600;
 }
 
-.minimal .small list > item,
-.minimal .small accordion summary {
+.minimal .small rkt-list > rkt-item,
+.minimal .small rkt-accordion summary {
   @apply text-sm;
 }
 
-.minimal .small node > div {
-  @apply text-sm gap-1 h-5;
+.minimal .small rkt-node > div {
+  @apply h-5 gap-1 text-sm;
 }
-.minimal .small node > div > icon {
+.minimal .small rkt-node > div > rkt-icon {
   @apply text-sm;
 }
-.minimal .small item > img,
-.minimal .small item > a > img {
-  @apply w-4 h-4;
+.minimal .small rkt-item > img,
+.minimal .small rkt-item > a > img {
+  @apply h-4 w-4;
 }
-.minimal .small item > a > icon {
+.minimal .small rkt-item > a > rkt-icon {
   @apply text-sm leading-6;
 }
-.minimal accordion.indented list > item {
+.minimal rkt-accordion.indented rkt-list > rkt-item {
   @apply px-4;
 }
 
 .minimal .folder-tree {
-  @apply h-full bg-neutral-inset min-w-40;
+  @apply bg-neutral-inset h-full min-w-40;
 }
 
-/* .minimal node > div > i {
+/* .minimal rkt-node > div > i {
   @apply border-neutral-muted;
 } */
 
-.minimal crumbs {
+.minimal rkt-crumbs {
   @apply flex-grow gap-1 text-sm;
 }
-.minimal crumbs crumb.is-selected {
+.minimal rkt-crumbs rkt-crumb.is-selected {
   @apply text-secondary;
 }
 
-.minimal toggle-switch {
-  @apply min-w-12 min-h-6 rounded mx-auto;
-  @apply bg-neutral-subtle border border-neutral-muted;
-  @apply leading-loose p-2px;
+.minimal rkt-toggle {
+  @apply mx-auto min-h-6 min-w-12 rounded;
+  @apply bg-neutral-subtle border-neutral-muted border;
+  @apply p-2px leading-loose;
 }
-.minimal toggle-switch item {
-  @apply items-center justify-center px-3 gap-1;
-  @apply min-w-6 min-h-6 rounded cursor-pointer;
+.minimal rkt-toggle rkt-item {
+  @apply items-center justify-center gap-1 px-3;
+  @apply min-h-6 min-w-6 cursor-pointer rounded;
 }
-.minimal toggle-switch.compact {
+.minimal rkt-toggle.compact {
   @apply rounded-full;
 }
-.minimal toggle-switch.compact > item {
-  @apply px-0 gap-0 rounded-full;
+.minimal rkt-toggle.compact > rkt-item {
+  @apply gap-0 rounded-full px-0;
 }
-.minimal toggle-switch item[aria-selected='true'] {
+.minimal rkt-toggle rkt-item[aria-selected='true'] {
   @apply bg-secondary text-neutral-800;
 }

package/src/minimal/tabs.css

@@ -1,44 +1,44 @@
-.minimal tabs:focus {
+.minimal rkt-tabs:focus {
   @apply outline-none;
 }
-.minimal tabs {
-  @apply box-border px-2 gap-2 border-b-2 border-neutral-subtle cursor-pointer select-none;
+.minimal rkt-tabs {
+  @apply border-neutral-subtle box-border cursor-pointer select-none gap-2 border-b-2 px-2;
 }
-.minimal tabs .tab {
-  @apply leading-8 text-base px-2;
+.minimal rkt-tabs .tab {
+  @apply px-2 text-base leading-8;
 }
-.minimal tabs .tab icon[role='img'] {
-  @apply w-6 h-6;
+.minimal rkt-tabs .tab rkt-icon[role='img'] {
+  @apply h-6 w-6;
 }
-.minimal tabs .tab icon[role='button'] {
-  @apply w-4 h-4;
+.minimal rkt-tabs .tab rkt-icon[role='button'] {
+  @apply h-4 w-4;
 }
-.minimal tabs.is-below {
+.minimal rkt-tabs.is-below {
   @apply border-b-none border-t-2;
 }
-.minimal tabs > p {
+.minimal rkt-tabs > p {
   @apply pr-4;
 }
-.minimal tabs .tab {
-  @apply flex relative gap-1 items-center;
+.minimal rkt-tabs .tab {
+  @apply relative flex items-center gap-1;
 }
-.minimal tabs .tab > img {
-  @apply w-5 h-5;
+.minimal rkt-tabs .tab > img {
+  @apply h-5 w-5;
 }
 
-.minimal tabs .tab[aria-selected='true'] {
-  @apply -mb-2px border-b-2 border-secondary-600;
+.minimal rkt-tabs .tab[aria-selected='true'] {
+  @apply -mb-2px border-secondary-600 border-b-2;
 }
-.minimal tabs.is-below .tab {
+.minimal rkt-tabs.is-below .tab {
   @apply pt-2px;
 }
-.minimal tabs.is-below .tab[aria-selected='true'] {
-  @apply mb-0 -mt-2px border-b-none border-t-2 border-b-secondary-600;
+.minimal rkt-tabs.is-below .tab[aria-selected='true'] {
+  @apply -mt-2px border-b-none border-b-secondary-600 mb-0 border-t-2;
 }
 
-.minimal .small tabs .tab {
-  @apply text-sm leading-8 px-2;
+.minimal .small rkt-tabs .tab {
+  @apply px-2 text-sm leading-8;
 }
-.minimal .small tabs tab > img {
-  @apply w-5 h-5;
+.minimal .small rkt-tabs rkt-tab > img {
+  @apply h-5 w-5;
 }

package/src/rokkit/alert.css

@@ -1,4 +1,4 @@
 /* Styles for 'alert-list' class */
-.rokkit alert-list {
-  @apply top-12 right-8 w-80;
+.rokkit rkt-alert-list {
+  @apply right-8 top-12 w-80;
 }

package/src/rokkit/atoms.css

@@ -4,21 +4,21 @@
 }
 
 /* Zebra styles */
-.rokkit .zebra item {
+.rokkit .zebra rkt-item {
   @apply even:bg-neutral-zebra hover:bg-neutral-50;
 }
 
-/* Styles for 'icon' class */
-.rokkit icon:not([role='button']) {
-  @apply focus:outline-none text-neutral-700;
+/* Styles for 'rkt-icon' class */
+.rokkit rkt-icon {
+  @apply text-neutral-700 focus:outline-none;
 }
-.rokkit icon[role='button'] {
-  @apply text-neutral-700 focus:rounded hover:text-secondary rounded-md;
+.rokkit button {
+  @apply hover:text-secondary rounded-md text-neutral-700 focus:rounded;
 }
-.rokkit icon[role='button']:focus {
-  @apply outline-none bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
+.rokkit button:focus {
+  @apply from-primary to-secondary bg-gradient-to-r text-neutral-200 outline-none dark:text-neutral-800;
 }
-.rokkit icon.disabled[role='button'] {
+.rokkit button:disabled {
   @apply text-neutral-subtle hover:text-neutral-subtle cursor-not-allowed;
 }
 
@@ -31,13 +31,13 @@
   -webkit-appearance: none;
 }
 
-.rokkit progress-bar value-bar {
-  @apply bg-gradient-to-r from-primary to-secondary text-neutral-subtle dark:text-neutral-800;
+.rokkit rkt-progress-bar rkt-value-bar {
+  @apply from-primary to-secondary text-neutral-subtle bg-gradient-to-r dark:text-neutral-800;
 }
 
 /* Styles for 'searchable' class */
 .searchable input {
-  @apply border border-neutral-subtle;
+  @apply border-neutral-subtle border;
 }
 
 .rokkit a {

package/src/rokkit/carousel.css

@@ -1,19 +1,19 @@
-carousel slide {
-  @apply items-center min-h-100 gap-3 px-12;
+rkt-carousel rkt-slide {
+  @apply min-h-100 items-center gap-3 px-12;
 }
-carousel slide > img {
-  @apply w-80 h-80 object-cover;
+rkt-carousel rkt-slide > img {
+  @apply h-80 w-80 object-cover;
 }
-carousel slide > p {
-  @apply text-2xl text-center;
+rkt-carousel rkt-slide > p {
+  @apply text-center text-2xl;
 }
-carousel dot-nav {
-  @apply flex h-4 w-full gap-2 justify-center;
+rkt-carousel rkt-dot-nav {
+  @apply flex h-4 w-full justify-center gap-2;
 }
-carousel dot {
+rkt-carousel rkt-dot {
   /* @apply block h-4 w-4 p-0 m-0 text-xs rounded-full bg-neutral-subtle cursor-pointer focus:outline-none; */
-  @apply bg-gradient-to-r from-neutral-subtle to-neutral-subtle;
+  @apply from-neutral-subtle to-neutral-subtle bg-gradient-to-r;
 }
-carousel dot[aria-checked='true'] {
-  @apply bg-gradient-to-r from-primary to-secondary;
+rkt-carousel rkt-dot[aria-checked='true'] {
+  @apply from-primary to-secondary bg-gradient-to-r;
 }

package/src/rokkit/input.css

@@ -1,36 +1,36 @@
-/* Styles for 'input-field' class */
-.rokkit input-field field {
-  @apply p-2px box-border border border-neutral-muted rounded;
+/* Styles for 'rkt-input-field' class */
+.rokkit rkt-input-field rkt-field {
+  @apply p-2px border-neutral-muted box-border rounded border;
 }
-.rokkit input-field input,
-.rokkit input-field textarea,
-.rokkit input-field select {
-  @apply border-0 rounded-sm;
+.rokkit rkt-input-field input,
+.rokkit rkt-input-field textarea,
+.rokkit rkt-input-field select {
+  @apply rounded-sm border-0;
 }
-.rokkit checkbox {
+.rokkit rkt-checkbox {
   @apply outline-none;
 }
-.rokkit input-field > label {
+.rokkit rkt-input-field > label {
   @apply text-secondary-600;
 }
-.rokkit input-field field > label {
-  @apply w-full h-full flex items-center text-secondary-600 uppercase text-xs;
+.rokkit rkt-input-field rkt-field > label {
+  @apply text-secondary-600 flex h-full w-full items-center text-xs uppercase;
 }
-.rokkit input-field:not(.disabled) field:focus-within {
-  @apply border-neutral-base bg-gradient-to-r from-primary to-secondary;
+.rokkit rkt-input-field:not(.disabled) rkt-field:focus-within {
+  @apply border-neutral-base from-primary to-secondary bg-gradient-to-r;
 }
-.rokkit input-field.disabled label {
+.rokkit rkt-input-field.disabled label {
   @apply text-neutral-500;
 }
-/* .rokkit input-field.disabled field:focus-within {
+/* .rokkit rkt-input-field.disabled rkt-field:focus-within {
   @apply bg-gradient-to-r from-neutral-subtle to-neutral-subtle;
 } */
-.rokkit input-field > span {
-  @apply border-r border-neutral-muted bg-neutral-base px-1 h-full aspect-square;
+.rokkit rkt-input-field > span {
+  @apply border-neutral-muted bg-neutral-base aspect-square h-full border-r px-1;
 }
-.rokkit input-field message {
-  @apply px-2 py-1 bg-neutral-base rounded;
+.rokkit rkt-input-field message {
+  @apply bg-neutral-base rounded px-2 py-1;
 }
-.rokkit input-field.fail {
+.rokkit rkt-input-field.fail {
   @apply bg-error rounded px-2;
 }

package/src/rokkit/layout.css

@@ -1,17 +1,17 @@
-/* Styles for 'toggle-switch' */
-.rokkit field toggle-switch:focus-within {
+/* Styles for ' rkt-toggle' */
+.rokkit rkt-field rkt-toggle:focus-within {
   @apply outline-none;
 }
-.rokkit field toggle-switch {
-  @apply min-h-10 items-center justify-center px-1 border-none rounded-sm;
+.rokkit rkt-field rkt-toggle {
+  @apply min-h-10 items-center justify-center rounded-sm border-none px-1;
 }
-.rokkit field toggle-switch item {
-  @apply leading-loose rounded-sm;
+.rokkit rkt-field rkt-toggle rkt-item {
+  @apply rounded-sm leading-loose;
 }
-.rokkit field toggle-switch item p {
+.rokkit rkt-field rkt-toggle rkt-item p {
   @apply justify-center;
 }
 
-.rokkit .horizontal > field radio-group {
+.rokkit .horizontal > rkt-field radio-group {
   @apply md:flex-row md:gap-4;
 }

package/src/rokkit/molecules.css

@@ -1,66 +1,66 @@
-/* Styles for 'input-range' class */
-.rokkit input-range range-track {
-  @apply h-2 mt-2 relative;
+/* Styles for ' rkt-input-range' class */
+.rokkit rkt-input-range rkt-range-track {
+  @apply relative mt-2 h-2;
 }
-.rokkit input-range range-track range-track-bar {
-  @apply bg-neutral-muted border box-border border-neutral-muted rounded-full;
+.rokkit rkt-input-range rkt-range-track rkt-range-track-bar {
+  @apply bg-neutral-muted border-neutral-muted box-border rounded-full border;
 }
-.rokkit input-range range-track selected-bar {
-  @apply border top-0px bottom-0px bg-gradient-to-r from-primary to-secondary border-secondary rounded-full;
+.rokkit rkt-input-range rkt-range-track selected-bar {
+  @apply top-0px bottom-0px from-primary to-secondary border-secondary rounded-full border bg-gradient-to-r;
 }
-.rokkit input-range range-track thumb {
+.rokkit rkt-input-range rkt-range-track rkt-thumb {
   @apply rounded-sm focus:outline-none;
 }
-/* .rokkit input-range tick p {
+/* .rokkit  rkt-input-range rkt-tick p {
   @apply text-neutral-800;
 } */
-.rokkit .bookend range-track range-track-bar::before,
-.rokkit .bookend range-track range-track-bar::after {
+.rokkit .bookend rkt-range-track rkt-range-track-bar::before,
+.rokkit .bookend rkt-range-track rkt-range-track-bar::after {
   content: '';
-  @apply absolute w-1px rounded-full -top-2 -bottom-2 bg-gray-300;
+  @apply w-1px absolute -bottom-2 -top-2 rounded-full bg-gray-300;
 }
-.rokkit .bookend range-track range-track-bar::before {
+.rokkit .bookend rkt-range-track rkt-range-track-bar::before {
   @apply -left-1px;
 }
-.rokkit .bookend range-track range-track-bar::after {
+.rokkit .bookend rkt-range-track rkt-range-track-bar::after {
   @apply -right-2px;
 }
 
 /* Styles for 'tick' class */
-/* .rokkit tick {
+/* .rokkit rkt-tick {
   @apply h-6;
 } */
-.rokkit tick tick-bar {
+.rokkit rkt-tick rkt-tick-bar {
   @apply border-neutral h-full;
 }
-.rokkit tick p {
+.rokkit rkt-tick p {
   @apply items-top text-neutral-600;
   font-size: 8px;
 }
 
 /* Styles for 'thumb' class */
-.rokkit thumb {
-  @apply bg-gradient-to-r from-primary to-secondary border-secondary shadow-xl border;
+.rokkit rkt-thumb {
+  @apply from-primary to-secondary border-secondary border bg-gradient-to-r shadow-xl;
 }
-.rokkit thumb.sliding::before {
+.rokkit rkt-thumb.sliding::before {
   content: '';
-  @apply absolute left-0 top-0 right-0 bottom-0 bg-secondary  opacity-30 rounded-sm;
+  @apply bg-secondary absolute bottom-0 left-0 right-0 top-0 rounded-sm opacity-30;
   transform: scale(2, 2);
 }
 
 /* Styles for 'button[role='switch']' class */
 .rokkit button[role='switch'] {
-  @apply rounded-full p-0 min-h-6 h-8 w-16;
-  @apply bg-neutral-subtle border border-neutral-subtle;
+  @apply h-8 min-h-6 w-16 rounded-full p-0;
+  @apply bg-neutral-subtle border-neutral-subtle border;
 }
-.rokkit button[role='switch'] > mark {
-  @apply rounded-full w-6 h-6 top-0.75;
-  @apply bg-gradient-to-r from-primary to-secondary;
+.rokkit button[role='switch'] > rkt-mark {
+  @apply top-0.75 h-6 w-6 rounded-full;
+  @apply from-primary to-secondary bg-gradient-to-r;
 }
 
 /* Styles for 'rating' class */
 .rokkit rating {
-  @apply text-neutral-600 text-xl h-9 justify-center rounded focus:outline focus:outline-secondary;
+  @apply focus:outline-secondary h-9 justify-center rounded text-xl text-neutral-600 focus:outline;
 }
 .rokkit rating > icon {
   @apply w-8;
@@ -74,46 +74,46 @@
 
 /* Pill styles */
 .rokkit .pill {
-  @apply rounded-full bg-neutral-inset border-neutral-subtle border px-2 py-1 flex-grow-0;
+  @apply bg-neutral-inset border-neutral-subtle flex-grow-0 rounded-full border px-2 py-1;
 }
 .rokkit .pill > icon[role='button'] {
-  @apply rounded-full w-5 h-5 hover:bg-neutral-muted hover:text-current focus:rounded-full focus:m-0;
+  @apply hover:bg-neutral-muted h-5 w-5 rounded-full hover:text-current focus:m-0 focus:rounded-full;
 }
 
-.rokkit .pill > item {
-  @apply gap-2 leading-6 px-2;
+.rokkit .pill > rkt-item {
+  @apply gap-2 px-2 leading-6;
 }
-.rokkit .pill > item > img {
-  @apply w-4 h-4;
+.rokkit .pill > rkt-item > img {
+  @apply h-4 w-4;
 }
 
 /* Styles for 'item' class */
-.rokkit item {
+.rokkit rkt-item {
   @apply flex flex-shrink items-center gap-1;
 }
-.rokkit item > p {
+.rokkit rkt-item > p {
   @apply flex-shrink text-ellipsis;
 }
 
 /* Image and link styles */
-.rokkit item > img,
-.rokkit item > a > img {
-  @apply w-6 h-6;
+.rokkit rkt-item > img,
+.rokkit rkt-item > a > img {
+  @apply h-6 w-6;
 }
-.rokkit item > a {
+.rokkit rkt-item > a {
   @apply gap-2;
 }
-.rokkit node item {
-  @apply px-1 gap-2;
+.rokkit node rkt-item {
+  @apply gap-2 px-1;
 }
-/* Crumbs styles */
-.rokkit crumbs {
+/* rkt-crumbs styles */
+.rokkit rkt-crumbs {
   @apply flex-grow gap-1;
 }
-.rokkit crumbs crumb.is-selected {
+.rokkit rkt-crumbs rkt-crumb.is-selected {
   @apply text-secondary-700;
 }
 
-.rokkit day-of-month[aria-selected='true'] {
-  @apply bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
+.rokkit rkt-day-of-month[aria-selected='true'] {
+  @apply from-primary to-secondary bg-gradient-to-r text-neutral-200 dark:text-neutral-800;
 }