@rokkit/themes 1.0.0-next.100

package/src/material/base.css

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

package/src/material/form.css

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

package/src/material/input.css

@@ -0,0 +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 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 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;
+  @apply -top-2 left-3 my-0 px-1 leading-tight opacity-100;
+}
+
+.material input-select {
+  @apply rounded cursor-pointer select-none;
+}
+.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;
+  @apply hover:bg-neutral-muted hover:border-secondary-600;
+}
+
+.material input-select:hover square-icon {
+  @apply border-neutral;
+}
+.material input-select scroll {
+  @apply mt-2 shadow-lg;
+}
+
+.material input-range range-track selected {
+  @apply border-0 bg-primary;
+}
+.material input-range range-track thumb {
+  @apply -top-1.5 bg-primary-600;
+}
+.material input-range thumb.sliding::before {
+  @apply bg-primary-400;
+}
+
+.material rating {
+  @apply text-neutral-600 text-xl focus:outline-none;
+}
+.material rating > icon {
+  @apply w-8;
+}
+.material rating:focus-within icon[aria-checked='true'] {
+  @apply text-secondary;
+}
+
+.material rating icon.hovering > i {
+  @apply text-primary;
+}

package/src/material/list.css

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

package/src/minimal/form.css

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

package/src/minimal/input.css

@@ -0,0 +1,154 @@
+/* .minimal input, */
+
+.minimal textarea,
+.minimal select,
+.minimal fieldset {
+  @apply rounded leading-loose px-2 border border-neutral-muted outline-none;
+}
+
+.minimal fieldset {
+  @apply p-4 pt-2 gap-2 rounded-md;
+}
+.minimal fieldset legend {
+  @apply px-2 border-l border-r rounded-md leading-tight border-neutral-muted hover:text-primary select-none;
+}
+.minimal fieldset icon {
+  @apply text-2xl;
+}
+
+.minimal input-field {
+  @apply w-full m-0 py-1;
+}
+
+.minimal input-field field {
+  @apply box-border border-b-1 border-neutral-muted 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;
+}
+.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;
+}
+
+.minimal input-field label {
+  @apply leading-6 w-full uppercase text-sm text-neutral;
+}
+.minimal input-field message {
+  @apply px-2 py-1 bg-neutral-base rounded;
+}
+
+.minimal input-field.fail {
+  @apply bg-error rounded px-2;
+}
+
+.minimal input-range range-track {
+  @apply h-1 mt-3 relative;
+}
+.minimal input-range range-track span {
+  @apply bg-neutral-subtle box-border border-neutral-muted rounded-full;
+}
+.minimal input-range range-track selected {
+  @apply border -top-0px -bottom-0px border-secondary bg-secondary-600 rounded-full;
+}
+.minimal input-range range-track thumb {
+  @apply rounded-full;
+}
+
+.minimal input-range range-ticks {
+  font-size: 6px;
+  @apply bg-primary-100;
+}
+
+.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;
+}
+.minimal .bookend range-track span::before {
+  @apply -left-1px;
+}
+.minimal .bookend range-track span::after {
+  @apply -right-2px;
+}
+
+/* .minimal tick {
+  @apply h-6;
+} */
+.minimal tick span {
+  @apply border-neutral h-full;
+}
+.minimal tick p {
+  @apply items-top;
+  font-size: 8px;
+}
+
+.minimal thumb {
+  @apply -top-1.5 bg-secondary shadow-xl border border-secondary;
+}
+.minimal thumb.sliding::before {
+  content: '';
+  @apply absolute left-0 top-0 right-0 bottom-0 bg-secondary-400 opacity-30 rounded-full;
+  transform: scale(2, 2);
+}
+
+.minimal rating {
+  @apply text-secondary-600 text-xl focus:outline-none;
+}
+.minimal rating > icon {
+  @apply w-8;
+}
+.minimal rating:focus-within icon[aria-checked='true'] {
+  @apply text-primary-600;
+}
+
+.minimal rating 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 @@
+.minimal item {
+  @apply flex items-center gap-1;
+}
+.minimal accordion {
+  @apply flex-grow overflow-y-scroll focus-within:outline-none;
+}
+.minimal accordion > div,
+.minimal accordion > details {
+  @apply relative;
+}
+.minimal list,
+.minimal 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 list > item,
+.minimal accordion summary {
+  @apply px-2 text-neutral-700 bg-neutral-base items-center leading-8;
+}
+
+.minimal item > a {
+  @apply px-0 gap-2;
+}
+
+.minimal list item:hover {
+  @apply -m-l-2px border-l-2px border-l-neutral-subtle;
+}
+.minimal accordion summary:hover {
+  @apply border-l-neutral-subtle;
+}
+.minimal list 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 {
+  @apply border-l-2px border-l-secondary-600 bg-neutral-subtle;
+}
+
+.minimal accordion .is-expanded summary {
+  @apply sticky top-0 z-1;
+}
+.minimal accordion item > a {
+  @apply px-0;
+}
+.minimal item > img,
+.minimal item > a > img {
+  @apply w-6 h-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 {
+  @apply text-secondary-600;
+  /* @apply hover:text-secondary; */
+}
+
+/* .minimal nested-list {
+  @apply text-sm;
+} */
+.minimal node > div {
+  @apply h-7 px-2 py-1;
+}
+.minimal node > item {
+  @apply px-1 gap-1;
+}
+.minimal node > div > span > i {
+  @apply border-none w-3;
+}
+.minimal node > div > icon {
+  @apply text-xs text-neutral-400;
+}
+.minimal node[aria-selected='true'] > item > p {
+  @apply text-secondary-600;
+}
+.minimal node.is-selected icon {
+  @apply text-secondary-600;
+  @apply hover:text-secondary-600;
+}
+
+.minimal .small list > item,
+.minimal .small accordion summary {
+  @apply text-sm;
+}
+
+.minimal .small node > div {
+  @apply text-sm gap-1 h-5;
+}
+.minimal .small node > div > icon {
+  @apply text-sm;
+}
+.minimal .small item > img,
+.minimal .small item > a > img {
+  @apply w-4 h-4;
+}
+.minimal .small item > a > icon {
+  @apply text-sm leading-6;
+}
+.minimal accordion.indented list > item {
+  @apply px-4;
+}
+
+.minimal .folder-tree {
+  @apply h-full bg-neutral-inset min-w-40;
+}
+
+/* .minimal node > div > i {
+  @apply border-neutral-muted;
+} */
+
+.minimal crumbs {
+  @apply flex-grow gap-1 text-sm;
+}
+.minimal crumbs 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 toggle-switch item {
+  @apply items-center justify-center px-3 gap-1;
+  @apply min-w-6 min-h-6 rounded cursor-pointer;
+}
+.minimal toggle-switch.compact {
+  @apply rounded-full;
+}
+.minimal toggle-switch.compact > item {
+  @apply px-0 gap-0 rounded-full;
+}
+.minimal toggle-switch item[aria-selected='true'] {
+  @apply bg-secondary text-neutral-800;
+}

package/src/minimal/tabs.css

@@ -0,0 +1,44 @@
+.minimal 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 tabs .tab {
+  @apply leading-8 text-base px-2;
+}
+.minimal tabs .tab icon[role='img'] {
+  @apply w-6 h-6;
+}
+.minimal tabs .tab icon[role='button'] {
+  @apply w-4 h-4;
+}
+.minimal tabs.is-below {
+  @apply border-b-none border-t-2;
+}
+.minimal tabs > p {
+  @apply pr-4;
+}
+.minimal tabs .tab {
+  @apply flex relative gap-1 items-center;
+}
+.minimal tabs .tab > img {
+  @apply w-5 h-5;
+}
+
+.minimal tabs .tab[aria-selected='true'] {
+  @apply -mb-2px border-b-2 border-secondary-600;
+}
+.minimal 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 .small tabs .tab {
+  @apply text-sm leading-8 px-2;
+}
+.minimal .small tabs tab > img {
+  @apply w-5 h-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'; */