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

package/src/material/base.css

@@ -1,9 +1,9 @@
 @import '../base.css';
 
-.material icon[role='button'] {
-  @apply text-neutral-muted focus:rounded hover:text-primary focus:outline-primary focus:m-1px;
+.material rkt-icon[role='button'] {
+  @apply text-neutral-muted hover:text-primary focus:outline-primary focus:m-1px focus:rounded;
 }
-.material icon.disabled[role='button'] {
+.material rkt-icon.disabled[role='button'] {
   @apply text-neutral-subtle hover:text-neutral-subtle cursor-not-allowed;
 }
 

package/src/material/form.css

@@ -4,7 +4,7 @@
 
 .material button,
 .material .button {
-  @apply py-2 px-4 rounded bg-neutral-subtle uppercase;
+  @apply bg-neutral-subtle rounded px-4 py-2 uppercase;
 }
 .material button-group {
   @apply flex justify-center rounded-sm shadow;
@@ -14,9 +14,9 @@
 }
 
 .material button-group > button {
-  @apply border-neutral-400 border-none rounded-none;
+  @apply rounded-none border-none border-neutral-400;
   @apply bg-neutral-subtle focus:outline-none;
-  @apply uppercase text-sm text-neutral-800;
+  @apply text-sm uppercase text-neutral-800;
 }
 .material button-group > button:not(:last-child) {
   @apply border-r;
@@ -26,5 +26,5 @@
 }
 
 .material field > toggle-switch {
-  @apply mx-2 mt-1 mb-2;
+  @apply mx-2 mb-2 mt-1;
 }

package/src/material/input.css

@@ -1,65 +1,65 @@
 .material input {
   @apply border-box focus:outline-none;
 }
-.material input-field {
-  @apply box-border border border-neutral-muted rounded;
-  @apply text-neutral-800 leading-loose relative pb-0;
+.material rkt-input-field {
+  @apply border-neutral-muted box-border rounded border;
+  @apply relative pb-0 leading-loose text-neutral-800;
 }
-.material input-field.empty label {
+.material rkt-input-field.empty label {
   @apply absolute top-0 my-3.5 align-middle;
 }
 
-.material input-field input,
-.material input-field > field > :not(icon) {
-  @apply border-none focus:outline-none bg-transparent;
+.material rkt-input-field input,
+.material rkt-input-field > field > :not(icon) {
+  @apply border-none bg-transparent focus:outline-none;
 }
 
-.material input-field:focus-within {
+.material rkt-input-field:focus-within {
   @apply border-primary;
 }
 
-.material input-field label,
-.material input-field:focus-within label {
-  @apply bg-neutral-base absolute block z-1;
+.material rkt-input-field label,
+.material rkt-input-field:focus-within label {
+  @apply bg-neutral-base z-1 absolute block;
   @apply -top-2 left-3 my-0 px-1 leading-tight opacity-100;
 }
 
-.material input-select {
-  @apply rounded cursor-pointer select-none;
+.material rkt-input-select {
+  @apply cursor-pointer select-none rounded;
 }
-.material input-select > selected-item {
-  @apply h-10 pl-4 pr-0 items-center bg-neutral-base normal-case;
-  @apply rounded border border-neutral-muted text-neutral-800;
+.material rkt-input-select > selected-item {
+  @apply bg-neutral-base h-10 items-center pl-4 pr-0 normal-case;
+  @apply border-neutral-muted rounded border text-neutral-800;
   @apply hover:bg-neutral-muted hover:border-secondary-600;
 }
 
-.material input-select:hover square-icon {
+.material rkt-input-select:hover square-icon {
   @apply border-neutral;
 }
-.material input-select scroll {
+.material rkt-input-select scroll {
   @apply mt-2 shadow-lg;
 }
 
-.material input-range range-track selected {
-  @apply border-0 bg-primary;
+.material rkt-input-range range-track selected {
+  @apply bg-primary border-0;
 }
-.material input-range range-track thumb {
-  @apply -top-1.5 bg-primary-600;
+.material rkt-input-range range-track rkt-thumb {
+  @apply bg-primary-600 -top-1.5;
 }
-.material input-range thumb.sliding::before {
+.material rkt-input-range rkt-thumb.sliding::before {
   @apply bg-primary-400;
 }
 
-.material rating {
-  @apply text-neutral-600 text-xl focus:outline-none;
+.material rkt-rating {
+  @apply text-xl text-neutral-600 focus:outline-none;
 }
-.material rating > icon {
+.material rkt-rating > rkt-icon {
   @apply w-8;
 }
-.material rating:focus-within icon[aria-checked='true'] {
+.material rkt-rating:focus-within rkt-icon[aria-checked='true'] {
   @apply text-secondary;
 }
 
-.material rating icon.hovering > i {
+.material rkt-rating rkt-icon.hovering > i {
   @apply text-primary;
 }

package/src/material/list.css

@@ -1,96 +1,96 @@
-.material accordion,
-.material list {
-  @apply rounded  gap-1px;
+.material rkt-accordion,
+.material rkt-list {
+  @apply gap-1px rounded;
 }
-.material list > item {
+.material rkt-list > rkt-item {
   @apply bg-neutral-subtle;
 }
-.material item {
-  @apply flex leading-10 items-center gap-2 px-3;
+.material rkt-item {
+  @apply flex items-center gap-2 px-3 leading-10;
 }
-.material item > img,
-.material item > a > img {
-  @apply w-4 h-4 rounded;
+.material rkt-item > img,
+.material rkt-item > a > img {
+  @apply h-4 w-4 rounded;
 }
 .material .tab.is-hovering {
   @apply bg-primary;
 }
 
-.material tabs .tab {
+.material rkt-tabs .tab {
   @apply cursor-pointer;
 }
-.material tabs .tab[aria-selected='true'] {
+.material rkt-tabs .tab[aria-selected='true'] {
   @apply border-b-3 border-primary;
 }
-.material tabs.is-below .tab[aria-selected='true'] {
-  @apply border-b-0 border-t-3;
+.material rkt-tabs.is-below .tab[aria-selected='true'] {
+  @apply border-t-3 border-b-0;
 }
 
-.material node > div {
+.material rkt-node > div {
   @apply h-7 px-2;
 }
-.material node > item {
-  @apply px-1 gap-1 bg-transparent;
+.material rkt-node > rkt-item {
+  @apply gap-1 bg-transparent px-1;
 }
-.material node > span {
+.material rkt-node > span {
   @apply w-3;
 }
 
-.material node > span > icon {
+.material rkt-node > span > rkt-icon {
   @apply text-sm;
 }
 
-.material nested-list:focus-within {
+.material rkt-nested-list:focus-within {
   @apply outline-none;
 }
 
-.material node > span > i {
+.material rkt-node > span > i {
   @apply border-transparent;
 }
 
-.material accordion .is-expanded summary {
-  @apply border-b border-neutral-muted rounded-b-none sticky top-0 z-1;
+.material rkt-accordion .is-expanded summary {
+  @apply border-neutral-muted z-1 sticky top-0 rounded-b-none border-b;
 }
 
-.material accordion .is-selected summary {
-  @apply border-b-primary border-b text-primary-600;
+.material rkt-accordion .is-selected summary {
+  @apply border-b-primary text-primary-600 border-b;
   @apply hover:text-primary-600;
 }
-/* .material list item[aria-selected='true'] {
+/* .material rkt-list item[aria-selected='true'] {
   @apply bg-primary text-primary-800;
 } */
-.material node[aria-selected='true'],
-.material list item[aria-selected='true'] {
+.material rkt-node[aria-selected='true'],
+.material rkt-list rkt-item[aria-selected='true'] {
   @apply bg-primary text-neutral-base;
 }
-.material crumbs {
+.material rkt-crumbs {
   @apply flex-grow gap-1 text-sm;
 }
 
-.material toggle-switch item[aria-selected='true'] {
+.material rkt-toggle rkt-item[aria-selected='true'] {
   @apply bg-primary text-neutral-200 dark:text-neutral-800;
 }
-.material crumbs crumb.is-selected {
+.material rkt-crumbs rkt-crumb.is-selected {
   @apply text-secondary;
 }
 
-.material toggle-switch {
-  @apply min-w-12 min-h-6 rounded-full mx-auto;
-  @apply bg-neutral-subtle border border-neutral-muted;
+.material rkt-toggle {
+  @apply mx-auto min-h-6 min-w-12 rounded-full;
+  @apply bg-neutral-subtle border-neutral-muted border;
   @apply p-2px;
 }
-.material toggle-switch item {
-  @apply items-center justify-center px-3 gap-1 leading-tight;
-  @apply min-w-6 min-h-6 rounded-full cursor-pointer;
+.material rkt-toggle rkt-item {
+  @apply items-center justify-center gap-1 px-3 leading-tight;
+  @apply min-h-6 min-w-6 cursor-pointer rounded-full;
 }
 
-.material toggle-switch.compact > item {
-  @apply px-0 gap-0;
+.material rkt-toggle.compact > rkt-item {
+  @apply gap-0 px-0;
 }
 
-.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;
 }

package/src/minimal/base.css

@@ -1,8 +1,8 @@
 /* @import '../base.css'; */
 
-.minimal icon[role='button'] {
-  @apply text-neutral-muted focus:rounded hover:text-secondary-600 focus:outline-secondary-600 focus:m-1px;
+.minimal rkt-icon[role='button'] {
+  @apply text-neutral-muted hover:text-secondary-600 focus:outline-secondary-600 focus:m-1px focus:rounded;
 }
-.minimal icon.disabled[role='button'] {
+.minimal button:disabled > rkt-icon {
   @apply text-neutral-subtle hover:text-neutral-subtle cursor-not-allowed;
 }

package/src/minimal/form.css

@@ -1,12 +1,12 @@
 .minimal button {
-  @apply rounded leading-loose select-none px-4;
-  @apply bg-neutral-muted border border-neutral-muted;
+  @apply select-none rounded px-4 leading-loose;
+  @apply bg-neutral-muted border-neutral-muted border;
 }
-.minimal button icon-left,
-.minimal button icon-right {
-  @apply flex flex-col items-center justify-center h-10 aspect-square;
+.minimal button rkt-icon-left,
+.minimal button rkt-icon-right {
+  @apply flex aspect-square h-10 flex-col items-center justify-center;
 }
-.minimal button icon {
+.minimal button rkt-icon {
   @apply text-2xl;
 }
 
@@ -14,74 +14,74 @@
   @apply bg-secondary text-white;
 }
 .minimal button p {
-  @apply px-2 flex flex-grow;
+  @apply flex flex-grow px-2;
 }
 
-.minimal button-group {
-  @apply flex justify-center rounded-sm gap-1px;
+.minimal rkt-button-group {
+  @apply gap-1px flex justify-center rounded-sm;
 }
-.minimal button-group button {
-  @apply border-neutral-400 border-none rounded-none;
+.minimal rkt-button-group button {
+  @apply rounded-none border-none border-neutral-400;
   @apply bg-neutral-subtle shadow focus:outline-none;
-  @apply uppercase text-sm text-neutral-800 leading-8 px-2;
+  @apply px-2 text-sm uppercase leading-8 text-neutral-800;
 }
-.minimal button-group button:not(:last-child) {
+.minimal rkt-button-group button:not(:last-child) {
   @apply border-r;
 }
-.minimal button-group button.active {
+.minimal rkt-button-group button.active {
   @apply bg-secondary text-white;
 }
 
-.minimal button-group button:first-child {
+.minimal rkt-button-group button:first-child {
   @apply rounded-l-sm;
 }
-.minimal button-group button:last-child {
+.minimal rkt-button-group button:last-child {
   @apply rounded-r-sm;
 }
 
-.minimal input-select {
+.minimal rkt-input-select {
   @apply focus:outline-none;
 }
-.minimal input-select > selected-item {
-  @apply leading-8 gap-4 items-center pl-2 min-h-8 cursor-pointer select-none;
-  @apply border-b-2 border-b-neutral-muted;
+.minimal rkt-input-select > selected-item {
+  @apply min-h-8 cursor-pointer select-none items-center gap-4 pl-2 leading-8;
+  @apply border-b-neutral-muted border-b-2;
   @apply focus:border-b-secondary-600;
 }
-.minimal input-select:focus > selected-item {
+.minimal rkt-input-select:focus > selected-item {
   @apply border-b-secondary-600 text-secondary-600;
 }
-.minimal input-select:focus square-icon {
+.minimal rkt-input-select:focus square-icon {
   @apply text-secondary-600;
 }
-.minimal input-select > selected-item > items {
+.minimal rkt-input-select > selected-item > items {
   @apply flex-grow flex-wrap gap-2;
 }
-.minimal pill {
+.minimal rkt-pill {
   @apply gap-2 rounded-full border border-neutral-400 px-2;
 }
-.minimal pill > item {
+.minimal rkt-pill > rkt-item {
   @apply gap-2 leading-6;
 }
-.minimal pill > item > img {
-  @apply w-4 h-4;
+.minimal rkt-pill > rkt-item > img {
+  @apply h-4 w-4;
 }
 
-.minimal pill > icon {
+.minimal rkt-pill > rkt-icon {
   @apply text-sm;
 }
-.minimal input-select scroll {
+.minimal rkt-input-select rkt-scroll {
   @apply mt-1 shadow-lg;
 }
 
 .minimal 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;
 }
 
-.minimal button[role='switch'] > mark {
-  @apply rounded-full w-6 h-6 bg-secondary top-0.75;
+.minimal button[role='switch'] > rkt-mark {
+  @apply bg-secondary top-0.75 h-6 w-6 rounded-full;
 }
 
-.minimal progress-bar value-bar {
+.minimal rkt-progress-bar rkt-value-bar {
   @apply bg-secondary;
 }

package/src/minimal/input.css

@@ -3,45 +3,45 @@
 .minimal textarea,
 .minimal select,
 .minimal fieldset {
-  @apply rounded leading-loose px-2 border border-neutral-muted outline-none;
+  @apply border-neutral-muted rounded border px-2 leading-loose outline-none;
 }
 
 .minimal fieldset {
-  @apply p-4 pt-2 gap-2 rounded-md;
+  @apply gap-2 rounded-md p-4 pt-2;
 }
 .minimal fieldset legend {
-  @apply px-2 border-l border-r rounded-md leading-tight border-neutral-muted hover:text-primary select-none;
+  @apply border-neutral-muted hover:text-primary select-none rounded-md border-l border-r px-2 leading-tight;
 }
-.minimal fieldset icon {
+.minimal fieldset rkt-icon {
   @apply text-2xl;
 }
 
 .minimal input-field {
-  @apply w-full m-0 py-1;
+  @apply m-0 w-full py-1;
 }
 
 .minimal input-field field {
-  @apply box-border border-b-1 border-neutral-muted min-h-9 overflow-hidden;
+  @apply border-b-1 border-neutral-muted box-border min-h-9 overflow-hidden;
   @apply focus-within:border-b-secondary-600;
 }
 .minimal input-field:focus-within label {
   @apply text-secondary-600;
 }
 .minimal input-field span {
-  @apply border-r border-neutral-muted bg-neutral-base px-1 h-full aspect-square;
+  @apply border-neutral-muted bg-neutral-base aspect-square h-full border-r px-1;
 }
 .minimal input-field input,
 .minimal input-field textarea,
 .minimal input-field select,
 .minimal input-field > field > :not(icon) {
-  @apply flex-grow border-0 focus:outline-none bg-transparent;
+  @apply flex-grow border-0 bg-transparent focus:outline-none;
 }
 
 .minimal input-field label {
-  @apply leading-6 w-full uppercase text-sm text-neutral;
+  @apply text-neutral w-full text-sm uppercase leading-6;
 }
 .minimal input-field message {
-  @apply px-2 py-1 bg-neutral-base rounded;
+  @apply bg-neutral-base rounded px-2 py-1;
 }
 
 .minimal input-field.fail {
@@ -49,13 +49,13 @@
 }
 
 .minimal input-range range-track {
-  @apply h-1 mt-3 relative;
+  @apply relative mt-3 h-1;
 }
 .minimal input-range range-track span {
-  @apply bg-neutral-subtle box-border border-neutral-muted rounded-full;
+  @apply bg-neutral-subtle border-neutral-muted box-border rounded-full;
 }
 .minimal input-range range-track selected {
-  @apply border -top-0px -bottom-0px border-secondary bg-secondary-600 rounded-full;
+  @apply -top-0px -bottom-0px border-secondary bg-secondary-600 rounded-full border;
 }
 .minimal input-range range-track thumb {
   @apply rounded-full;
@@ -69,7 +69,7 @@
 .minimal .bookend range-track span::before,
 .minimal .bookend range-track span::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;
 }
 .minimal .bookend range-track span::before {
   @apply -left-1px;
@@ -90,25 +90,25 @@
 }
 
 .minimal thumb {
-  @apply -top-1.5 bg-secondary shadow-xl border border-secondary;
+  @apply bg-secondary border-secondary -top-1.5 border shadow-xl;
 }
 .minimal thumb.sliding::before {
   content: '';
-  @apply absolute left-0 top-0 right-0 bottom-0 bg-secondary-400 opacity-30 rounded-full;
+  @apply bg-secondary-400 absolute bottom-0 left-0 right-0 top-0 rounded-full opacity-30;
   transform: scale(2, 2);
 }
 
 .minimal rating {
   @apply text-secondary-600 text-xl focus:outline-none;
 }
-.minimal rating > icon {
+.minimal rating > rkt-icon {
   @apply w-8;
 }
-.minimal rating:focus-within icon[aria-checked='true'] {
+.minimal rating:focus-within rkt-icon[aria-checked='true'] {
   @apply text-primary-600;
 }
 
-.minimal rating icon.hovering > i {
+.minimal rating rkt-icon.hovering > i {
   @apply text-secondary-600;
 }
 /* .error,