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

package/package.json

@@ -1,37 +1,22 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.12",
+  "version": "1.0.0-next.120",
   "description": "Themes for use with rokkit components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
-  "svelte": "src/index.js",
   "module": "src/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
-  "prettier": "@jerrythomas/prettier-config",
   "publishConfig": {
     "access": "public"
   },
-  "devDependencies": {
-    "@jerrythomas/eslint-config-svelte": "^1.0.2",
-    "@jerrythomas/prettier-config": "^1.0.0",
-    "@sveltejs/vite-plugin-svelte": "^1.4.0",
-    "@vitest/ui": "~0.12.10",
-    "c8": "^7.12.0",
-    "eslint": "^7.32.0",
-    "jsdom": "^19.0.0",
-    "svelte": "^3.55.1",
-    "typescript": "^4.9.5",
-    "vite": "^3.2.5",
-    "vitest": "~0.19.1",
-    "@rokkit/core": "1.0.0-next.12",
-    "shared-config": "1.0.0"
+  "scripts": {
+    "prepublishOnly": "tsc --project tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "build": "bun clean && bun prepublishOnly"
   },
   "files": [
-    "src/**/*.js",
-    "src/**/*.svelte",
-    "!src/fixtures",
-    "!src/**/*.spec.js"
+    "src"
   ],
   "exports": {
     "./modern.css": "./src/modern.css",
@@ -46,14 +31,7 @@
       "import": "./src/index.js"
     }
   },
-  "scripts": {
-    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
-    "format": "prettier --write --plugin-search-dir=. .",
-    "test:ct": "playwright test -c playwright.config.js",
-    "test:ui": "vitest --ui",
-    "test:ci": "vitest run",
-    "test": "vitest",
-    "coverage": "vitest run --coverage",
-    "upgrade": "pnpm upgrade"
+  "dependencies": {
+    "@rokkit/core": "latest"
   }
-}
+}

package/src/base/alert.css

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

package/src/base/animation.css

@@ -0,0 +1,37 @@
+/* progress animation */
+@keyframes pendulum {
+  from {
+    left: -50%;
+  }
+  to {
+    left: 100%;
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(1px);
+  }
+  50% {
+    transform: translateX(-1px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+/* Button and focus animation */
+@keyframes button-pop {
+  0% {
+    transform: scale(var(--btn-focus-scale, 0.95));
+  }
+  40% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

package/src/base/atoms.css

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

package/src/base/carousel.css

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

package/src/base/core.css

@@ -0,0 +1,107 @@
+/* Global styles */
+*:focus {
+  @apply outline-secondary outline outline-2 outline-offset-2;
+}
+*[tabindex='-1']:focus {
+  @apply outline-none;
+}
+* {
+  @apply box-border;
+}
+
+/* Body styles */
+body {
+  @apply flex w-screen flex-col overflow-hidden;
+  /* height: var(--viewport-height, 100dvh); */
+  height: 100vh;
+  height: --webkit-fill-available;
+  height: 100dvh;
+  max-height: 100dvh;
+}
+
+/* Link styles */
+a {
+  @apply text-primary-800 hover:text-secondary-800 visited:text-secondary-700 cursor-pointer;
+}
+a:focus {
+  @apply outline-none;
+}
+/* Code styles */
+code,
+kbd,
+samp,
+pre {
+  @apply font-mono font-medium;
+}
+
+/* Disabled styles */
+.disabled {
+  @apply text-disabled;
+}
+
+input[disabled='true'],
+textarea[disabled='true'],
+select[disabled='true'] {
+  @apply outline-disabled;
+}
+
+/* plots*/
+rk-plot {
+  @apply bg-neutral-inset rounded-md p-4;
+}
+
+g[aria-label='tip'] {
+  --plot-background: var(--neutral-200);
+}
+
+rk-input-field input,
+rk-input-field toggle-switch,
+rk-drop-down {
+  @apply focus:outline-none;
+}
+
+rk-alert,
+rk-error,
+rk-info,
+rk-warning,
+rk-success {
+  @apply cursor-pointer rounded border px-4 py-2;
+}
+
+rk-checkbox {
+  @apply gap-2;
+}
+
+button:disabled {
+  @apply bg-neutral-muted cursor-not-allowed text-neutral-500;
+}
+
+rk-cell.cell-type-string {
+  @apply text-left;
+}
+rk-cell.cell-type-integer rk-item p,
+rk-cell.cell-type-number rk-item p {
+  @apply text-right;
+}
+
+rk-cell rk-item {
+  @apply flex w-full;
+}
+
+.dark ::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+}
+
+/* Autofill styles */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  -webkit-text-fill-color: var(--neutral-200);
+  transition: background-color 5000s ease-in-out 0s;
+}

package/src/base/layout.css

@@ -0,0 +1,65 @@
+rk-container > rk-segment {
+  @apply h-full overflow-hidden;
+}
+
+.three-col,
+.two-col {
+  @apply grid min-h-full w-full overflow-hidden;
+}
+
+.three-col.md {
+  @apply grid-cols-2 grid-rows-2;
+  /* grid-template-columns: repeat(2, 1fr); */
+  /* grid-template-rows: repeat(2, 1fr); */
+  grid-template-areas:
+    'c-1 c-2'
+    'c-1 c-3';
+}
+.three-col.md > .col-1,
+.three-col.lg > .col-1 {
+  grid-area: c-1;
+}
+.three-col.md > .col-2,
+.three-col.lg > .col-2 {
+  grid-area: c-2;
+}
+.three-col.md > .col-3,
+.three-col.lg > .col-3 {
+  grid-area: c-3;
+}
+.three-col.lg {
+  @apply grid-cols-5 grid-rows-2;
+  /* grid-template-columns: repeat(5, 1fr); */
+  /* grid-template-rows: repeat(2, 1fr); */
+  grid-template-areas:
+    'c-1 c-1 c-2 c-2 c-2'
+    'c-1 c-1 c-3 c-3 c-3';
+}
+.three-col.sm,
+.two-col.sm {
+  @apply grid-cols-1 grid-rows-1;
+}
+
+.two-col.md {
+  @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-cols-5 grid-rows-1;
+  /* grid-template-columns: repeat(5, 1fr); */
+  grid-template-areas: 'c-1 c-1 c-2 c-2 c-2';
+}
+
+.two-col.md > .col-1,
+.two-col.lg > .col-1 {
+  grid-area: c-1;
+}
+.two-col.md > .col-2,
+.two-col.lg > .col-2 {
+  grid-area: c-2;
+}
+.two-col.md > .col-3,
+.two-col.lg > .col-3 {
+  display: none;
+}

package/src/base/molecules.css

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

package/src/base/organisms.css

@@ -0,0 +1,66 @@
+/* default structure */
+/*  List styles */
+rk-list {
+  @apply flex w-full flex-shrink-0 select-none flex-col;
+}
+
+/* Accordion */
+rk-accordion {
+  @apply flex w-full select-none flex-col;
+}
+/* Node Styles */
+rk-node {
+  @apply flex min-h-5 cursor-pointer select-none flex-col;
+}
+/* Nested List Styles */
+rk-nested-list {
+  @apply flex w-full flex-col;
+}
+rk-tree {
+  @apply flex h-full w-full flex-shrink-0 flex-col scroll-auto;
+}
+rk-status-report {
+  @apply flex flex-col;
+}
+rk-status-report > rk-message {
+  @apply flex gap-2;
+}
+rk-input-range {
+  @apply relative grid h-10 grid-rows-2;
+}
+rk-checkbox {
+  @apply flex cursor-pointer select-none items-center leading-loose;
+}
+rk-crumbs {
+  @apply flex gap-1;
+}
+rk-pill {
+  @apply py-2px flex items-center gap-2 px-2;
+}
+
+rk-input-select,
+rk-drop-down {
+  @apply cursor-pointer overflow-visible;
+}
+
+rk-input-field rk-field {
+  @apply gap-1px;
+}
+rk-input-field rk-field rk-icon {
+  @apply bg-neutral-subtle h-9 w-9 text-neutral-800;
+}
+
+rk-input-field > rk-field > rk-input-select {
+  @apply px-0;
+}
+
+rk-input-select rk-selected-item > rk-icon,
+rk-drop-down > button > span > rk-icon {
+  @apply h-full w-9;
+}
+rk-input-select > rk-selected-item,
+rk-drop-down > button > span {
+  /* @apply bg-neutral-base pl-3; */
+  @apply min-h-9 items-center gap-2 pl-3 normal-case;
+  @apply rounded text-neutral-800;
+}

package/src/base/progress.css

@@ -0,0 +1,21 @@
+/* Progress bar styles */
+rk-progress {
+  @apply flex w-full;
+}
+
+rk-progress {
+  @apply bg-neutral-muted border-neutral-subtle border;
+}
+rk-progress value-bar {
+  @apply bg-primary;
+}
+
+.indeterminate value-bar {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  /* Move the bar infinitely */
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-name: pendulum;
+}

package/src/base/scrollbar.css

@@ -0,0 +1,16 @@
+/* Scrollbar styles */
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
+}
+/* For Webkit browsers */
+::-webkit-scrollbar:horizontal {
+  @apply max-h-2;
+}
+::-webkit-scrollbar:vertical {
+  @apply max-w-2;
+}
+::-webkit-scrollbar-thumb {
+  @apply rgba(0,0,0,0.5) rounded-full;
+}

package/src/base/table.css

@@ -0,0 +1,49 @@
+th,
+td {
+  @apply px-5 py-3;
+}
+tr {
+  @apply gap-1px;
+}
+th {
+  @apply whitespace-nowrap;
+}
+table cell {
+  @apply flex 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;
+  @apply border-spacing-x-1px border-separate;
+}
+table > thead {
+  @apply sticky top-0 z-10 table-header-group;
+  @apply 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-tree-table,
+rk-table {
+  @apply max-h-full overflow-y-auto;
+}

package/src/base/toggles.css

@@ -0,0 +1,17 @@
+/* Checkbox styles */
+rk-checkbox {
+  @apply gap-2;
+}
+
+rk-switch,
+rk-toggle {
+  @apply flex items-center;
+}
+
+rk-radio-group label {
+  @apply cursor-pointer uppercase;
+}
+
+rk-toggle {
+  @apply text-primary-700 flex items-center justify-center rounded-sm;
+}

package/src/base/tree.css

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

package/src/base.css

@@ -0,0 +1,13 @@
+@import './base/core.css';
+@import './base/scrollbar.css';
+@import './base/atoms.css';
+@import './base/molecules.css';
+@import './base/organisms.css';
+@import './base/layout.css';
+@import './base/table.css';
+@import './base/tree.css';
+@import './base/carousel.css';
+@import './base/animation.css';
+@import './base/alert.css';
+@import './base/progress.css';
+@import './base/toggles.css';