@rokkit/themes 1.0.0-next.12 → 1.0.0-next.121

package/src/material/base.css

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

package/src/material/form.css

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

package/src/material/input.css

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

package/src/material/list.css

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

package/src/material.css

@@ -0,0 +1,9 @@
+@import './material/base.css';
+/* @import './base/tabs.css'; */
+/* @import './base/dropdown.css'; */
+/* @import './base/states.css'; */
+/* @import './base/calendar.css'; */
+@import './material/input.css';
+@import './material/list.css';
+@import './material/form.css';
+/* @import './base/outline.css'; */

package/src/minimal/base.css

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

package/src/minimal/form.css

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

package/src/minimal/input.css

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

package/src/minimal/list.css

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

package/src/minimal/tabs.css

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

package/src/minimal.css

@@ -0,0 +1,11 @@
+@import './base.css';
+
+@import './minimal/base.css';
+/* @import './base/states.css'; */
+/* @import './base/calendar.css'; */
+
+@import './minimal/input.css';
+@import './minimal/list.css';
+@import './minimal/tabs.css';
+@import './minimal/form.css';
+/* @import './base/outline.css'; */