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

package/src/rokkit/organisms.css

@@ -0,0 +1,307 @@
+[data-style='rokkit'] rk-list-item {
+  @apply gap-2;
+}
+/* rk-list styles */
+
+[data-style='rokkit'] rk-list {
+  @apply gap-1px bg-neutral-subtle;
+}
+
+[data-style='rokkit'] rk-list rk-list-item,
+[data-style='rokkit'] rk-accordion div rk-summary {
+  @apply bg-neutral-base min-h-8 px-4 leading-10 text-neutral-800;
+}
+[data-style='rokkit'] rk-accordion > div > rk-summary {
+  @apply bg-gradient from-neutral-subtle to-neutral-muted rounded pr-2;
+}
+
+/* Remove default details marker from summary */
+/* [data-style="rokkit"] rk-accordion > div > rk-summary::-webkit-details-marker {
+  display: none;
+} */
+
+/* Nested rk-list and Tree styles */
+[data-style='rokkit'] :not(accordion > div) > rk-list {
+  @apply overflow-y-scroll rounded border border-neutral-400 shadow;
+}
+[data-style='rokkit'] :not(accordion > div) > rk-list rk-list-item {
+  @apply first:rounded-t last:rounded-b;
+}
+
+[data-style='rokkit'] rk-accordion rk-list rk-list-item {
+  @apply gap-2 last:rounded-b;
+}
+[data-style='rokkit'] rk-accordion rk-list rk-list-item > a {
+  @apply gap-2;
+}
+[data-style='rokkit'] rk-accordion rk-list {
+  @apply rounded-b;
+}
+
+[data-style='rokkit'] rk-accordion .is-expanded rk-list {
+  @apply -mt-10 rounded-t pt-10;
+}
+/* Styles for 'tabs' class */
+[data-style='rokkit'] tabs {
+  @apply border-neutral-muted gap-1 border-b-2 px-1;
+}
+[data-style='rokkit'] tabs.is-below {
+  @apply border-b-0 border-t-2;
+}
+[data-style='rokkit'] tabs:focus-within {
+  @apply border-secondary outline-none;
+}
+[data-style='rokkit'] tabs .tab {
+  @apply bg-neutral-base flex-shrink-0 cursor-pointer items-center gap-3 rounded-t px-3 leading-9;
+}
+[data-style='rokkit'] tabs.is-below .tab {
+  @apply rounded-b rounded-t-none;
+}
+[data-style='rokkit'] tabs.is-centered {
+  @apply justify-center;
+}
+[data-style='rokkit'] tabs .tab[aria-selected='true'] {
+  @apply bg-neutral-muted;
+}
+[data-style='rokkit'] tabs:focus-within .tab[aria-selected='true'] {
+  @apply from-primary to-secondary bg-gradient-to-b text-white;
+}
+[data-style='rokkit'] tabs.is-below:focus-within .tab[aria-selected='true'] {
+  @apply bg-gradient-to-t;
+}
+
+/* Styles for 'button' and 'button-group' classes */
+[data-style='rokkit'] button,
+[data-style='rokkit'] .button {
+  @apply bg-neutral-subtle text-on-neutral-subtle flex min-h-9 cursor-pointer items-center gap-3 rounded-full px-6 uppercase;
+  animation: button-pop var(--animation-btn, 0.25s) ease-out;
+}
+
+[data-style='rokkit'] button.is-primary,
+[data-style='rokkit'] .button.is-primary {
+  @apply from-primary to-secondary bg-gradient-to-r px-4 text-white;
+}
+[data-style='rokkit'] a.square > rk-icon {
+  @apply text-on-neutral-subtle h-full w-full;
+}
+[data-style='rokkit'] a.square {
+  @apply border-neutral-subtle bg-neutral-subtle flex items-center justify-center rounded-md border leading-loose;
+}
+[data-style='rokkit'] button-group {
+  @apply gap-1px m-auto flex items-center justify-center py-1;
+}
+
+[data-style='rokkit'] button-group button {
+  @apply flex rounded-none px-2 pt-0.5 uppercase focus:outline-none;
+}
+[data-style='rokkit'] button-group button:first-child {
+  @apply rounded-l-full pl-3;
+}
+[data-style='rokkit'] button-group button:last-child {
+  @apply rounded-r-full pr-3;
+}
+
+[data-style='rokkit'] button-group button.active {
+  @apply from-primary to-secondary bg-gradient-to-r text-white;
+}
+
+/* Input and Drop-down styles */
+[data-style="rokkit"] input-select,
+/* [data-style="rokkit"] select, */
+[data-style="rokkit"] drop-down > button {
+  @apply rounded;
+  /* @apply border border-neutral-muted; */
+}
+
+[data-style='rokkit'] drop-down > button {
+  @apply bg-neutral-base p-0;
+}
+[data-style='rokkit'] drop-down > button > span {
+  @apply rounded py-0;
+}
+[data-style='rokkit'] drop-down > button > span > * {
+  @apply h-full items-center;
+}
+
+[data-style='rokkit'] :not(field) > input-select {
+  @apply bg-neutral-base border-neutral-muted p-2px border;
+}
+[data-style='rokkit'] :not(field) > input-select > selected-item {
+  @apply bg-neutral-subtle;
+}
+[data-style='rokkit'] :not(field) > input-select:focus-within,
+[data-style='rokkit'] :not(field) > input-select:focus-within,
+[data-style='rokkit'] drop-down:focus-within > button {
+  /* @apply p-2px; */
+  @apply border-none outline-none;
+  @apply from-primary to-secondary bg-gradient-to-r text-white;
+}
+/* [data-style="rokkit"] :not(field) > input-select:focus-within > selected-item,
+[data-style="rokkit"] drop-down:focus-within > button > span {
+  @apply bg-neutral-muted outline-none min-h-10;
+} */
+
+/* Hover and rk-icon styles */
+/* [data-style="rokkit"] input-select:hover > rk-icon,
+[data-style="rokkit"] drop-down:hover > rk-icon {
+  @apply border-neutral;
+} */
+
+/* Scroll styles */
+[data-style='rokkit'] input-select scroll {
+  @apply my-1 rounded shadow-lg;
+}
+
+/* [data-style="rokkit"] input-select > selected-item > items {
+  @apply flex-grow flex-wrap gap-2;
+} */
+
+/* rk-accordion styles */
+[data-style='rokkit'] rk-accordion {
+  @apply flex-grow gap-1 overflow-y-scroll;
+}
+[data-style='rokkit'] rk-accordion > div {
+  @apply relative rounded shadow;
+}
+
+/* Nested rk-list and rk-node styles */
+[data-style='rokkit'] rk-nested-list {
+  @apply text-neutral-800;
+}
+[data-style='rokkit'] rk-nested-list rk-node > div {
+  @apply h-8 px-2;
+}
+
+/* Tree styles */
+[data-style='rokkit'] tree {
+  @apply rounded;
+}
+
+/* Focus styles for Nested rk-list, Tree, and rk-accordion */
+[data-style='rokkit'] rk-nested-list,
+[data-style='rokkit'] rk-nested-list:focus-within,
+[data-style='rokkit'] rk-tree:focus-within {
+  @apply rounded outline-none;
+}
+
+[data-style='rokkit'] rk-accordion,
+[data-style='rokkit'] rk-list {
+  @apply rounded;
+}
+
+/* Remove outline from focused elements */
+[data-style='rokkit'] rk-accordion:focus-within rk-list,
+[data-style='rokkit'] drop-down:focus-within rk-list,
+[data-style='rokkit'] input-select:focus-within rk-list {
+  @apply outline-none focus:outline-none;
+}
+
+/* Focus and Hover styles for rk-list and rk-node */
+[data-style='rokkit'] rk-list:focus {
+  @apply outline-secondary outline;
+}
+[data-style='rokkit'] rk-list rk-list-item:hover,
+[data-style='rokkit'] rk-node > div:hover {
+  @apply bg-neutral-subtle;
+}
+
+[data-style='rokkit'] rk-list-item[aria-current='true'],
+[data-style='rokkit'] rk-node[aria-current='true'] > div {
+  @apply bg-neutral-subtle text-on-neutral-subtle;
+}
+
+/* Selected and Hover styles for rk-list and rk-node */
+[data-style='rokkit'] rk-list rk-list-item[aria-selected='true'] > a {
+  @apply text-white;
+}
+
+/* Expanded and Selected styles for rk-accordion */
+[data-style='rokkit'] rk-accordion .is-expanded rk-summary {
+  @apply border-neutral-muted z-1 sticky top-0 rounded-b-none border-b;
+}
+
+[data-style='rokkit'] rk-accordion [aria-selected='true'] rk-summary {
+  @apply bg-neutral-subtle;
+}
+[data-style='rokkit'] rk-accordion:focus-within [aria-selected='true'] rk-summary {
+  @apply from-primary to-secondary bg-gradient-to-r text-white outline-none;
+}
+
+/* Border styles for rk-accordion */
+[data-style='rokkit'] rk-accordion > div {
+  @apply border-neutral-muted border;
+}
+
+/* Folder Tree styles */
+[data-style='rokkit'] .folder-tree {
+  @apply bg-neutral-inset h-full;
+}
+[data-style='rokkit'] .folder-tree rk-nested-list {
+  @apply bg-neutral-inset h-full;
+}
+[data-style='rokkit'] rk-node > div > rk-item {
+  @apply px-1;
+}
+[data-style='rokkit'] rk-node > div > span {
+  @apply flex-shrink-0;
+}
+[data-style='rokkit'] rk-node > div > span > i {
+  @apply border-neutral-muted;
+}
+[data-style='rokkit'] rk-node > div > rk-icon > i {
+  @apply text-neutral-elevated;
+}
+
+/* Toggle Switch styles */
+[data-style='rokkit'] rk-switch {
+  @apply mx-auto min-w-12 rounded-full;
+  @apply bg-neutral-subtle border-neutral-muted border;
+  @apply p-2px leading-loose;
+}
+[data-style='rokkit'] rk-switch:focus-within {
+  @apply outline-secondary outline;
+}
+[data-style='rokkit'] rk-switch rk-item {
+  @apply items-center justify-center gap-1 px-3 py-0 leading-loose;
+  @apply min-h-6 min-w-6 cursor-pointer rounded-full;
+}
+[data-style='rokkit'] rk-switch rk-item > rk-icon > i {
+  @apply text-lg;
+}
+
+[data-style='rokkit'] rk-switch rk-item[aria-selected='true'] {
+  @apply from-neutral-muted to-neutral-muted bg-gradient-to-r;
+}
+
+[data-style='rokkit'] rk-switch.compact > rk-item {
+  @apply gap-0 px-0;
+}
+
+[data-style='rokkit'] rk-switch:focus-within rk-item[aria-selected='true'],
+[data-style='rokkit'] rk-list:focus-within rk-list-item[aria-selected='true'],
+[data-style='rokkit'] rk-tree:focus-within rk-node[aria-selected='true'] > div {
+  @apply from-primary to-secondary bg-gradient-to-r text-white;
+  @apply hover:from-secondary hover:to-primary;
+}
+
+[data-style='rokkit'] rk-switch[aria-disabled='true'] {
+  @apply bg-neutral-muted cursor-not-allowed text-neutral-500;
+}
+[data-style='rokkit'] rk-input-select > rk-selected-item > rk-items {
+  @apply flex-grow flex-wrap gap-2;
+}
+
+[data-style='rokkit'] rk-container:focus-within {
+  @apply outline-none;
+}
+
+[data-style='rokkit'] rk-pill {
+  @apply bg-neutral-muted border-neutral-muted rounded-full border px-4 text-neutral-800;
+}
+[data-style='rokkit'] rk-pill rk-icon {
+  @apply text-neutral-700;
+}
+
+[data-style='rokkit'] rk-pill rk-icon[role='button'] {
+  @apply hover:text-primary-elevated text-neutral-elevated text-sm;
+}

package/src/rokkit/table.css

@@ -0,0 +1,57 @@
+th,
+td {
+  @apply px-5 py-3;
+}
+tr {
+  @apply gap-1px;
+}
+th {
+  @apply whitespace-nowrap;
+}
+th cell,
+td cell {
+  @apply flex w-full items-center gap-2;
+}
+th[data-sortable='true'] {
+  @apply cursor-pointer;
+}
+th[data-sortable='true']:hover,
+th[data-sortable='true']:hover icon {
+  @apply text-primary-700;
+}
+
+table {
+  @apply w-full text-left text-sm text-neutral-700 rtl:text-right;
+}
+table > thead {
+  @apply table-header-group bg-neutral-400 text-xs uppercase;
+}
+table > caption {
+  @apply bg-neutral-subtle table-caption p-5 text-left text-sm font-normal text-neutral-600 rtl:text-right;
+}
+
+table > tbody > tr {
+  @apply border-neutral-base bg-neutral-subtle table-row border-b;
+}
+table.striped > tbody > tr:nth-child(even) {
+  @apply bg-neutral-inset;
+}
+table > tfoot {
+  @apply table-footer-group;
+}
+table > tfoot > tr {
+  @apply table-row font-semibold text-neutral-800;
+}
+
+rk-table-wrapper {
+  @apply shadow-md sm:rounded-lg;
+}
+
+td rk-cell.cell-type-integer p,
+td rk-cell.cell-type-number p {
+  @apply w-full text-right;
+}
+
+td rk-cell rk-item {
+  @apply flex w-full;
+}

package/src/rokkit/toggle.css

@@ -0,0 +1,64 @@
+[data-style='rokkit'] rk-switch {
+  @apply flex cursor-pointer flex-row items-center gap-3;
+  @apply border-neutral-muted rounded-md border p-2;
+}
+
+[data-style='rokkit'] rk-switch:hover > rk-icon {
+  @apply text-secondary;
+}
+[data-style='rokkit'] rk-switch:focus-within,
+[data-style='rokkit'] rk-toggle:focus-within {
+  @apply ring-primary-500 px-2 outline-none;
+}
+
+[data-style='rokkit'] rk-switch.minimal {
+  @apply border-none py-0 focus-within:ring-0;
+}
+[data-style='rokkit'] rk-switch.minimal rk-icon > i {
+  @apply text-md h-4;
+}
+[data-style='rokkit'] rk-toggle {
+  @apply border-neutral-subtle bg-neutral-subtle box-border aspect-square h-9 border;
+  @apply flex items-center justify-center rounded-md leading-loose;
+}
+
+[data-style='rokkit'] rk-toggle:focus-within,
+[data-style='rokkit'] a.button.square:focus-within {
+  @apply ring-secondary border-neutral-base border ring-2;
+}
+[data-style='rokkit'] rk-toggle:focus-within button {
+  @apply p-0;
+}
+[data-style='rokkit'] rk-toggle > button {
+  @apply p-0 outline-none;
+}
+/* [data-style='rokkit'] rk-toggle rk-icon {
+  @apply bg-neutral-base flex rounded p-0 leading-loose;
+} */
+
+[data-style='rokkit'] a.square {
+  @apply aspect-square min-h-9 min-w-9;
+}
+[data-style='rokkit'] a.button {
+  @apply p-0;
+}
+[data-style='rokkit'] rk-toggle rk-icon {
+  @apply bg-neutral-subtle h-full w-full rounded-md;
+}
+
+/* [data-style='rokkit'] rk-toggle > button {
+  @apply items-center justify-center rounded-md p-0;
+}
+[data-style='rokkit'] rk-toggle > button > rk-icon {
+  @apply aspect-square items-center justify-center;
+} */
+/* [data-style='rokkit'] rk-toggle button {
+  @apply m-0 h-full w-full p-0;
+} */
+
+/* [data-style='rokkit'] rk-toggle.small {
+  @apply p-2px flex aspect-square flex-col items-center justify-center;
+} */
+/* [data-style="rokkit"] rk-toggle:focus-within button {
+  @apply bg-neutral-base text-neutral hover:text-primary rounded-sm;
+} */

package/src/rokkit.css

@@ -0,0 +1,11 @@
+@import './base.css';
+
+@import './rokkit/atoms.css';
+@import './rokkit/alert.css';
+@import './rokkit/input.css';
+@import './rokkit/molecules.css';
+@import './rokkit/organisms.css';
+@import './rokkit/layout.css';
+@import './rokkit/toggle.css';
+@import './rokkit/table.css';
+@import './rokkit/carousel.css';

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Jerry Thomas
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/src/utils.js

@@ -1,88 +0,0 @@
-const modifiers = {
-	hsl: (value) => `hsl(${value})`,
-	rgb: (value) => `rgb(${value})`,
-	none: (value) => value
-}
-/**
- * Generate shades for a color using css varuable
- *
- * @param {string} name
- * @returns
- */
-export function shadesOf(name, modifier = 'none') {
-	const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
-	const fn = modifier in modifiers ? modifiers[modifier] : modifier.none
-
-	return shades.reduce(
-		(result, shade) => ({
-			...result,
-			[shade]: fn(`var(--${name}-${shade})`)
-		}),
-		{ DEFAULT: fn(`var(--${name}-500)`) }
-	)
-}
-
-export function stateColors(name, modifier = 'none') {
-	const fn = modifier in modifiers ? modifiers[modifier] : modifier.none
-	return {
-		DEFAULT: fn(`var(--${name}-500)`),
-		light: fn(`var(--${name}-100)`),
-		dark: fn(`var(--${name}-800)`)
-	}
-}
-
-export function themeColors(modifier = 'none') {
-	const fn = modifier in modifiers ? modifiers[modifier] : modifier.none
-
-	let states = ['info', 'error', 'warn', 'pass']
-	let variants = ['skin', 'primary', 'secondary', 'accent']
-	let colors = states.reduce(
-		(acc, state) => ({ ...acc, [state]: stateColors(state, modifier) }),
-		{}
-	)
-	colors = variants.reduce(
-		(acc, variant) => ({ ...acc, [variant]: shadesOf(variant, modifier) }),
-		colors
-	)
-
-	colors.skin = {
-		...colors.skin,
-		contrast: fn(`var(--skin-800)`),
-		base: fn(`var(--skin-100)`),
-		zebra: fn(`var(--skin-zebra)`)
-	}
-
-	return colors
-}
-
-// export function stateIconsFromNames(names) {
-// 	return names
-// 		.map((k) => [...k.split('-'), k])
-// 		.reduce(
-// 			(acc, [element, state, icon]) => ({
-// 				...acc,
-// 				[element]: { ...acc[element], [state]: icon }
-// 			}),
-// 			{}
-// 		)
-// }
-
-export function iconShortcuts(icons, collection, variant = '') {
-	const prefix = collection ? collection + ':' : ''
-	const suffix = variant ? '-' + variant : ''
-
-	const shortcuts = icons.reduce(
-		(acc, name) => ({
-			...acc,
-			[name]:
-				prefix +
-				(name.startsWith('selector')
-					? 'chevron-sort'
-					: name.replace('rating', 'star').replace('navigate', 'chevron')) +
-				suffix
-		}),
-		{}
-	)
-
-	return shortcuts
-}