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

package/src/material/form.css

@@ -1,30 +1,30 @@
-.material field-layout.vertical {
+[data-style='material'] field-layout.vertical {
   @apply gap-5;
 }
 
-.material button,
-.material .button {
+[data-style='material'] button,
+[data-style='material'] .button {
   @apply bg-neutral-subtle rounded px-4 py-2 uppercase;
 }
-.material button-group {
+[data-style='material'] button-group {
   @apply flex justify-center rounded-sm shadow;
 }
-.material .is-primary {
+[data-style='material'] .is-primary {
   @apply bg-primary text-white;
 }
 
-.material button-group > button {
+[data-style='material'] button-group > button {
   @apply rounded-none border-none border-neutral-400;
   @apply bg-neutral-subtle focus:outline-none;
   @apply text-sm uppercase text-neutral-800;
 }
-.material button-group > button:not(:last-child) {
+[data-style='material'] button-group > button:not(:last-child) {
   @apply border-r;
 }
-.material button-group > button.active {
+[data-style='material'] button-group > button.active {
   @apply bg-primary text-white;
 }
 
-.material field > toggle-switch {
+[data-style='material'] field > toggle-switch {
   @apply mx-2 mb-2 mt-1;
 }

package/src/material/input.css

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

package/src/material/list.css

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

package/src/minimal/base.css

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

package/src/minimal/form.css

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

package/src/minimal/input.css

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