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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.100",
+  "version": "1.0.0-next.105",
   "description": "Themes for use with rokkit components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -10,16 +10,10 @@
   "publishConfig": {
     "access": "public"
   },
-  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "@vitest/coverage-v8": "^2.1.1",
-    "@vitest/ui": "~2.1.1",
-    "jsdom": "^25.0.0",
-    "svelte": "^4.2.19",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.6",
-    "vitest": "~2.1.1",
-    "shared-config": "1.0.0-next.100"
+  "scripts": {
+    "prepublishOnly": "npx tsc --project tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "build": "pnpm clean && pnpm prepublishOnly"
   },
   "files": [
     "src"
@@ -38,17 +32,9 @@
     }
   },
   "dependencies": {
-    "@rokkit/core": "1.0.0-next.100"
+    "@rokkit/core": "1.0.0-next.105"
   },
-  "scripts": {
-    "format": "prettier --write .",
-    "lint": "eslint --fix .",
-    "test:ct": "playwright test -c playwright.config.js",
-    "test:ui": "vitest --ui",
-    "test:ci": "vitest run",
-    "test": "vitest",
-    "coverage": "vitest run --coverage",
-    "latest": "pnpm upgrade --latest && pnpm test:ci",
-    "release": "pnpm publish --access public"
+  "devDependencies": {
+    "typescript": "^5.7.3"
   }
-}
+}

package/src/base/alert.css

@@ -1,30 +1,30 @@
 /* Alert styles */
-alert-list {
-  @apply top-12 right-8 w-80;
+rkt-alert-list {
+  @apply right-8 top-12 w-80;
 }
 
-alert,
-error,
-info,
-warning,
-success {
-  @apply px-4 py-2 border rounded select-none cursor-pointer;
+rkt-alert,
+rkt-error,
+rkt-info,
+rkt-warning,
+rkt-success {
+  @apply cursor-pointer select-none rounded border px-4 py-2;
 }
 
-alert.error,
-alert.danger,
-error {
+rkt-alert.error,
+rkt-alert.danger,
+rkt-error {
   @apply bg-error text-error-contrast border-error-muted;
 }
-alert.info,
-info {
+rkt-alert.info,
+rkt-info {
   @apply bg-info text-info-contrast border-info-muted;
 }
-alert.warning,
-warning {
+rkt-alert.warning,
+rkt-warning {
   @apply bg-warn text-warn-contrast border-warn-muted;
 }
-alert.success,
-success {
+rkt-alert.success,
+rkt-success {
   @apply bg-success text-success-contrast border-success-muted;
 }

package/src/base/atoms.css

@@ -1,58 +1,59 @@
 /* Icon styles */
-icon {
-  @apply min-h-4 h-content;
+rkt-icon {
+  @apply flex flex-shrink-0 flex-grow-0 items-center justify-center;
+  @apply h-4 min-h-4 w-4;
 }
-icon[role='button'] {
-  @apply p-2 cursor-pointer aspect-square select-none focus:outline;
+button > rkt-icon {
+  @apply aspect-square cursor-pointer select-none p-2 focus:outline;
 }
-icon > i {
-  @apply text-2xl leading-6 aspect-square text-current mx-auto;
+rkt-icon > i {
+  @apply mx-auto aspect-square text-2xl leading-6 text-current;
 }
-icon.large > i {
+rkt-icon.large > i {
   @apply text-3xl;
 }
-icon.medium > i {
+rkt-icon.medium > i {
   @apply text-lg leading-5;
 }
-icon.small > i {
+rkt-icon.small > i {
   @apply leading-4;
   font-size: 1rem;
 }
-icon.large[role='button'] {
-  @apply w-12 h-12;
+button > rkt-icon.large {
+  @apply h-12 w-12;
 }
-icon.medium[role='button'] {
-  @apply w-8 h-8;
+button > rkt-icon.medium {
+  @apply h-8 w-8;
 }
-icon.small[role='button'] {
-  @apply w-6 h-6;
+button > rkt-icon.small {
+  @apply h-6 w-6;
 }
 
 /* Scroll styles */
-scroll {
+rkt-scroll {
   @apply flex flex-col overflow-y-scroll;
 }
 
 /* Square styles */
 square {
-  @apply flex flex-col items-center justify-center h-full min-h-full aspect-square;
+  @apply flex aspect-square h-full min-h-full flex-col items-center justify-center;
 }
 /* Item styles */
-item,
+rkt-item,
 .item {
   @apply flex flex-shrink-0 flex-grow-0 cursor-pointer select-none items-center gap-2;
 }
-item p,
-summary p {
+rkt-item p,
+rkt-summary p {
   @apply flex flex-grow;
 }
 
 /* Overlay styles */
-overlay {
+rkt-overlay {
   @apply bg-neutral-inset bg-opacity-50;
 }
 
 /* Checkbox styles */
-checkbox {
+rkt-checkbox {
   @apply gap-2;
 }

package/src/base/carousel.css

@@ -1,18 +1,18 @@
-carousel slide {
-  @apply items-center min-h-100 gap-3 px-12;
+rkt-carousel rkt-slide {
+  @apply min-h-100 items-center gap-3 px-12;
 }
-carousel slide > img {
-  @apply w-80 h-80 object-cover;
+rkt-carousel rkt-slide > img {
+  @apply h-80 w-80 object-cover;
 }
-carousel slide > p {
-  @apply text-xl text-center;
+rkt-carousel rkt-slide > p {
+  @apply text-center text-xl;
 }
-carousel dot-nav {
-  @apply flex h-4 w-full gap-2 justify-center;
+rkt-carousel rkt-dot-nav {
+  @apply flex h-4 w-full justify-center gap-2;
 }
-carousel dot {
-  @apply block h-4 w-4 p-0 m-0 rounded-full cursor-pointer focus:outline-none;
+rkt-carousel rkt-dot {
+  @apply m-0 block h-4 w-4 cursor-pointer rounded-full p-0 focus:outline-none;
 }
-carousel dot[aria-checked='true'] {
+rkt-carousel rkt-dot[aria-checked='true'] {
   @apply bg-primary;
 }

package/src/base/core.css

@@ -1,6 +1,6 @@
 /* Global styles */
 *:focus {
-  @apply outline outline-2 outline-offset-2 outline-secondary;
+  @apply outline-secondary outline outline-2 outline-offset-2;
 }
 *[tabindex='-1']:focus {
   @apply outline-none;
@@ -8,7 +8,7 @@
 
 /* Body styles */
 body {
-  @apply flex flex-col w-screen overflow-hidden;
+  @apply flex w-screen flex-col overflow-hidden;
   /* height: var(--viewport-height, 100dvh); */
   height: 100vh;
   height: --webkit-fill-available;
@@ -18,7 +18,7 @@ body {
 
 /* Link styles */
 a {
-  @apply cursor-pointer text-primary-800 hover:text-secondary-800 visited:text-secondary-700;
+  @apply text-primary-800 hover:text-secondary-800 visited:text-secondary-700 cursor-pointer;
 }
 a:focus {
   @apply outline-none;
@@ -35,58 +35,50 @@ pre {
 .disabled {
   @apply text-disabled;
 }
-.disabled input,
-.disabled textarea,
-.disabled select {
-  @apply outline-disabled;
-}
-.disabled {
-  @apply text-disabled;
-}
-.disabled input,
-.disabled textarea,
-.disabled select {
+input[disabled='true'],
+textarea[disabled='true'],
+select[disabled='true'] {
   @apply outline-disabled;
 }
 
 /* plots*/
-plot {
-  @apply rounded-md bg-neutral-inset p-4;
+rkt-plot {
+  @apply bg-neutral-inset rounded-md p-4;
 }
 g[aria-label='tip'] {
   --plot-background: var(--neutral-200);
 }
 
-input-field input,
-input-field toggle-switch,
-drop-down {
+rkt-input-field input,
+rkt-input-field toggle-switch,
+rkt-drop-down {
   @apply focus:outline-none;
 }
 
-alert,
-error,
-info,
-warning,
-success {
-  @apply px-4 py-2 border rounded select-none cursor-pointer;
+rkt-alert,
+rkt-error,
+rkt-info,
+rkt-warning,
+rkt-success {
+  @apply cursor-pointer select-none rounded border px-4 py-2;
 }
 
-checkbox {
+rkt-checkbox {
   @apply gap-2;
 }
 
 button:disabled {
-  @apply bg-neutral-muted text-neutral-500 cursor-not-allowed;
+  @apply bg-neutral-muted cursor-not-allowed text-neutral-500;
 }
 
-cell.cell-type-string {
+rkt-cell.cell-type-string {
   @apply text-left;
 }
-cell.cell-type-integer item p,
-cell.cell-type-number item p {
+rkt-cell.cell-type-integer rkt-itemp,
+rkt-cell.cell-type-number rkt-itemp {
   @apply text-right;
 }
 
-cell item {
+rkt-cell rkt-item {
   @apply flex w-full;
 }

package/src/base/layout.css

@@ -1,10 +1,10 @@
-container > segment {
-  @apply overflow-hidden h-full;
+rkt-container > rkt-segment {
+  @apply h-full overflow-hidden;
 }
 
 .three-col,
 .two-col {
-  @apply grid w-full min-h-full overflow-hidden;
+  @apply grid min-h-full w-full overflow-hidden;
 }
 
 .three-col.md {
@@ -41,12 +41,12 @@ container > segment {
 }
 
 .two-col.md {
-  @apply grid-rows-1 grid-cols-2;
+  @apply grid-cols-2 grid-rows-1;
   /* grid-template-columns: repeat(2, 1fr); */
   grid-template-areas: 'c-1 c-2';
 }
 .two-col.lg {
-  @apply grid-rows-1 grid-cols-5;
+  @apply grid-cols-5 grid-rows-1;
   /* grid-template-columns: repeat(5, 1fr); */
   grid-template-areas: 'c-1 c-1 c-2 c-2 c-2';
 }

package/src/base/molecules.css

@@ -1,53 +1,53 @@
 /* Input range styles */
-input-range range-track {
-  @apply h-1 mt-3 relative;
+rkt-input-range rkt-range-track {
+  @apply relative mt-3 h-1;
 }
-input-range range-track range-track-bar {
+rkt-input-range rkt-range-track rkt-range-track-bar {
   @apply bg-neutral-subtle border-neutral-muted rounded-full;
 }
-input-range range-track selected {
+rkt-input-range rkt-range-track selected {
   @apply top-0px bottom-0px;
 }
-input-range range-track thumb {
+rkt-input-range rkt-range-track rkt-thumb {
   @apply rounded-full;
 }
-input-range thumb {
-  @apply -top-1.5 bg-secondary shadow-xl border border-secondary;
+rkt-input-range rkt-thumb {
+  @apply bg-secondary border-secondary -top-1.5 border shadow-xl;
 }
-input-range thumb.sliding::before {
+rkt-input-range rkt-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);
 }
 
 /* Bookend styles */
-.bookend range-track range-track-bar::before,
-.bookend range-track range-track-bar::after {
+.bookend rkt-range-track rkt-range-track-bar::before,
+.bookend rkt-range-track rkt-range-track-bar::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;
 }
-.bookend range-track range-track-bar::before {
+.bookend rkt-range-track rkt-range-track-bar::before {
   @apply -left-1px;
 }
-.bookend range-track range-track-bar::after {
+.bookend rkt-range-track rkt-range-track-bar::after {
   @apply -right-2px;
 }
 
-/* Input range tick styles */
-input-range tick {
+/* Input rkt-range tick styles */
+rkt-input-range tick {
   grid-template-rows: 7px auto;
 }
-input-range tick tick-bar {
-  @apply border-neutral-600 h-full;
+rkt-input-range tick tick-bar {
+  @apply h-full border-neutral-600;
 }
-input-range tick p {
-  @apply items-top text-neutral-600 leading-tight;
+rkt-input-range tick p {
+  @apply items-top leading-tight text-neutral-600;
   font-size: 8px;
 }
 
 /* Calendar styles */
 calendar {
-  @apply rounded-md overflow-hidden shadow-lg;
+  @apply overflow-hidden rounded-md shadow-lg;
 }
 calendar month-year {
   @apply bg-secondary-400 text-white;
@@ -68,7 +68,7 @@ day-of-month {
   @apply hover:bg-secondary-200 hover:rounded-full;
 }
 day-of-month[aria-selected='true'] {
-  @apply bg-secondary text-white rounded-full;
+  @apply bg-secondary rounded-full text-white;
 }
 
 /* Form styles */
@@ -81,35 +81,35 @@ field-layout.vertical {
 field-layout.horizontal {
   @apply flex flex-col gap-2 md:flex-row md:gap-4;
 }
-selected-item item {
+selected-item rkt-item {
   @apply flex-grow;
 }
-input-field {
-  @apply w-full m-0 py-1;
+rkt-input-field {
+  @apply m-0 w-full py-1;
 }
-input-field input,
-input-field textarea,
-input-field select,
-input-field > field > :not(icon) {
+rkt-input-field input,
+rkt-input-field textarea,
+rkt-input-field select,
+rkt-input-field > field > :not(icon) {
   @apply px-3;
-  @apply flex-grow outline-none min-h-9 leading-loose;
+  @apply min-h-9 flex-grow leading-loose outline-none;
   @apply bg-neutral-subtle text-neutral-800;
 }
-input-field > label {
-  @apply uppercase text-xs;
+rkt-input-field > label {
+  @apply text-xs uppercase;
   @apply leading-loose;
 }
-input-field > label.required::after {
+rkt-input-field > label.required::after {
   content: ' *';
   @apply state-danger;
 }
 
 radio-group label {
-  @apply uppercase cursor-pointer;
+  @apply cursor-pointer uppercase;
 }
 /* Progress bar styles */
 progress-bar {
-  @apply bg-neutral-muted border border-neutral-subtle;
+  @apply bg-neutral-muted border-neutral-subtle border;
 }
 progress-bar value-bar {
   @apply bg-primary;

package/src/base/organisms.css

@@ -1,26 +1,26 @@
-input-select,
-drop-down {
-  @apply overflow-visible cursor-pointer;
+rkt-input-select,
+rkt-drop-down {
+  @apply cursor-pointer overflow-visible;
 }
 
-input-field field {
+rkt-input-field rkt-field {
   @apply gap-1px;
 }
-input-field field icon {
-  @apply w-9 h-9 bg-neutral-subtle text-neutral-800;
+rkt-input-field rkt-field rkt-icon {
+  @apply bg-neutral-subtle h-9 w-9 text-neutral-800;
 }
 
-input-field > field > input-select {
+rkt-input-field > rkt-field > rkt-input-select {
   @apply px-0;
 }
 
-input-select selected-item > icon,
-drop-down > button > span > icon {
-  @apply w-9 h-full;
+rkt-input-select rkt-selected-item > rkt-icon,
+rkt-drop-down > button > span > rkt-icon {
+  @apply h-full w-9;
 }
-input-select > selected-item,
-drop-down > button > span {
+rkt-input-select > rkt-selected-item,
+rkt-drop-down > button > span {
   /* @apply bg-neutral-base pl-3; */
-  @apply pl-3 min-h-9 gap-2 items-center normal-case;
+  @apply min-h-9 items-center gap-2 pl-3 normal-case;
   @apply rounded text-neutral-800;
 }

package/src/base/scrollbar.css

@@ -12,5 +12,5 @@
   @apply max-w-2;
 }
 ::-webkit-scrollbar-thumb {
-  @apply rounded-full rgba(0,0,0,0.5);
+  @apply rgba(0,0,0,0.5) rounded-full;
 }

package/src/base/table.css

@@ -20,19 +20,19 @@ th[data-sortable='true']:hover icon {
 }
 
 table {
-  @apply w-full text-sm text-left rtl:text-right text-neutral-700;
-  @apply border-separate border-spacing-x-1px;
+  @apply w-full text-left text-sm text-neutral-700 rtl:text-right;
+  @apply border-spacing-x-1px border-separate;
 }
 table > thead {
-  @apply table-header-group sticky top-0 z-10;
-  @apply text-xs uppercase bg-neutral-400;
+  @apply sticky top-0 z-10 table-header-group;
+  @apply bg-neutral-400 text-xs uppercase;
 }
 table > caption {
-  @apply table-caption p-5 text-sm font-normal text-left rtl:text-right bg-neutral-subtle text-neutral-600;
+  @apply bg-neutral-subtle table-caption p-5 text-left text-sm font-normal text-neutral-600 rtl:text-right;
 }
 
 table > tbody > tr {
-  @apply table-row border-b border-neutral-base bg-neutral-subtle;
+  @apply border-neutral-base bg-neutral-subtle table-row border-b;
 }
 table.striped > tbody > tr:nth-child(even) {
   @apply bg-neutral-inset;
@@ -43,7 +43,7 @@ table > tfoot {
 table > tfoot > tr {
   @apply table-row font-semibold text-neutral-800;
 }
-tree-table,
-table-wrapper {
+rkt-tree-table,
+rkt-table {
   @apply max-h-full overflow-y-auto;
 }

package/src/base/tree.css

@@ -1,18 +1,18 @@
-tree,
-nested-list {
-  @apply flex flex-col w-full text-sm;
+rkt-tree,
+rkt-nested-list {
+  @apply flex w-full flex-col text-sm;
 }
-nested-list node > div {
-  @apply px-2 h-8;
+rkt-nested-list rkt-node > div {
+  @apply h-8 px-2;
 }
 
-nested-list node {
+rkt-nested-list rkt-node {
   @apply flex flex-col;
 }
 
-node > div > item {
+rkt-node > div > rkt-item {
   @apply px-1;
 }
-node > div > span {
+rkt-node > div > span {
   @apply flex-shrink-0;
 }

package/src/index.js

@@ -1,3 +1,3 @@
 export { iconShortcuts, themeColors, themeRules } from '@rokkit/core'
 // skipcq: JS-E1004 - Needed for exposing all constants
-export * from './constants'
+export * from './constants.js'

package/src/markdown.css

@@ -72,7 +72,7 @@
 }
 /* postcss-ignore */
 .markdown-body summary {
-  display: list-item;
+  display: rkt-list-item;
 }
 /* postcss-ignore */
 .markdown-body a {
@@ -223,30 +223,30 @@
   margin-bottom: 0;
 }
 .markdown-body ul {
-  list-style-type: none;
+  rkt-list-style-type: none;
 }
 .markdown-body ul li {
   @apply relative mb-2;
 }
 .markdown-body ul li::before {
   content: '';
-  @apply absolute bg-neutral-muted mt-2 -ml-5 w-1.5 h-1.5 rounded-sm;
+  @apply bg-neutral-muted absolute -ml-5 mt-2 h-1.5 w-1.5 rounded-sm;
 }
 
 .markdown-body ol {
-  list-style-type: decimal;
+  rkt-list-style-type: decimal;
 }
 
 .markdown-body ol ol,
 .markdown-body ul ol {
-  list-style-type: lower-roman;
+  rkt-list-style-type: lower-roman;
 }
 
 .markdown-body ol ol ol,
 .markdown-body ol ul ol,
 .markdown-body ul ol ol,
 .markdown-body ul ul ol {
-  list-style-type: lower-alpha;
+  rkt-list-style-type: lower-alpha;
 }
 
 .markdown-body dd {
@@ -650,7 +650,7 @@
 .markdown-body h1,
 .markdown-body h2 {
   /* padding-bottom: 0.3em; */
-  @apply border-b border-neutral-subtle mt-16;
+  @apply border-neutral-subtle mt-16 border-b;
   /* border-bottom: 1px solid #eaecef; */
 }
 
@@ -737,12 +737,12 @@
 .markdown-body table th {
   padding: 6px 13px;
   /* border: 1px solid #dfe2e5; */
-  @apply border border-neutral-base;
+  @apply border-neutral-base border;
 }
 
 .markdown-body table tr {
   /* background-color: #fff; */
-  @apply border-t border-neutral-subtle;
+  @apply border-neutral-subtle border-t;
   /* border-top: 1px solid #c6cbd1; */
 }
 
@@ -773,7 +773,7 @@
 
 .markdown-body pre {
   word-wrap: normal;
-  @apply rounded-sm border border-neutral-subtle;
+  @apply border-neutral-subtle rounded-sm border;
 }
 
 .markdown-body pre > code {
@@ -942,7 +942,7 @@
 }
 
 .markdown-body .task-list-item {
-  list-style-type: none;
+  rkt-list-style-type: none;
 }
 
 .markdown-body .task-list-item + .task-list-item {