@rokkit/themes 1.0.0-next.100

package/LICENSE

@@ -0,0 +1,21 @@
+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/README.md

@@ -0,0 +1,13 @@
+# Themes
+
+Contains the following themes for use with `Rokkit` components.
+
+- Rokkit
+- Modern
+- Material
+
+This package also includes some mixins which make it easy to implement `light` and `dark` modes.
+
+- markdown.css: A customized variant of Github flavored markdown
+- prism.css: A variation of the prism syntax highlighting colors using CSS variables to support light and dark modes.
+- palette.css: Light and dark palettes using CSS variables.

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@rokkit/themes",
+  "version": "1.0.0-next.100",
+  "description": "Themes for use with rokkit components.",
+  "author": "Jerry Thomas <me@jerrythomas.name>",
+  "license": "MIT",
+  "module": "src/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "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"
+  },
+  "files": [
+    "src"
+  ],
+  "exports": {
+    "./modern.css": "./src/modern.css",
+    "./material.css": "./src/material.css",
+    "./minimal.css": "./src/minimal.css",
+    "./rokkit.css": "./src/rokkit.css",
+    "./prism.css": "./src/prism.css",
+    "./palette.css": "./src/palette.css",
+    "./markdown.css": "./src/markdown.css",
+    "./package.json": "./src/package.json",
+    ".": {
+      "import": "./src/index.js"
+    }
+  },
+  "dependencies": {
+    "@rokkit/core": "1.0.0-next.100"
+  },
+  "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"
+  }
+}

package/src/base/alert.css

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

package/src/base/animation.css

@@ -0,0 +1,22 @@
+/* progress animation */
+@keyframes pendulum {
+  from {
+    left: -50%;
+  }
+  to {
+    left: 100%;
+  }
+}
+
+/* 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 */
+icon {
+  @apply min-h-4 h-content;
+}
+icon[role='button'] {
+  @apply p-2 cursor-pointer aspect-square select-none focus:outline;
+}
+icon > i {
+  @apply text-2xl leading-6 aspect-square text-current mx-auto;
+}
+icon.large > i {
+  @apply text-3xl;
+}
+icon.medium > i {
+  @apply text-lg leading-5;
+}
+icon.small > i {
+  @apply leading-4;
+  font-size: 1rem;
+}
+icon.large[role='button'] {
+  @apply w-12 h-12;
+}
+icon.medium[role='button'] {
+  @apply w-8 h-8;
+}
+icon.small[role='button'] {
+  @apply w-6 h-6;
+}
+
+/* Scroll styles */
+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;
+}
+/* Item styles */
+item,
+.item {
+  @apply flex flex-shrink-0 flex-grow-0 cursor-pointer select-none items-center gap-2;
+}
+item p,
+summary p {
+  @apply flex flex-grow;
+}
+
+/* Overlay styles */
+overlay {
+  @apply bg-neutral-inset bg-opacity-50;
+}
+
+/* Checkbox styles */
+checkbox {
+  @apply gap-2;
+}

package/src/base/carousel.css

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

package/src/base/core.css

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

package/src/base/layout.css

@@ -0,0 +1,65 @@
+container > segment {
+  @apply overflow-hidden h-full;
+}
+
+.three-col,
+.two-col {
+  @apply grid w-full min-h-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-rows-1 grid-cols-2;
+  /* grid-template-columns: repeat(2, 1fr); */
+  grid-template-areas: 'c-1 c-2';
+}
+.two-col.lg {
+  @apply grid-rows-1 grid-cols-5;
+  /* 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,126 @@
+/* Input range styles */
+input-range range-track {
+  @apply h-1 mt-3 relative;
+}
+input-range range-track range-track-bar {
+  @apply bg-neutral-subtle border-neutral-muted rounded-full;
+}
+input-range range-track selected {
+  @apply top-0px bottom-0px;
+}
+input-range range-track thumb {
+  @apply rounded-full;
+}
+input-range thumb {
+  @apply -top-1.5 bg-secondary shadow-xl border border-secondary;
+}
+input-range 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);
+}
+
+/* Bookend styles */
+.bookend range-track range-track-bar::before,
+.bookend range-track range-track-bar::after {
+  content: '';
+  @apply absolute w-1px rounded-full -top-2 -bottom-2 bg-gray-300;
+}
+.bookend range-track range-track-bar::before {
+  @apply -left-1px;
+}
+.bookend range-track range-track-bar::after {
+  @apply -right-2px;
+}
+
+/* Input range tick styles */
+input-range tick {
+  grid-template-rows: 7px auto;
+}
+input-range tick tick-bar {
+  @apply border-neutral-600 h-full;
+}
+input-range tick p {
+  @apply items-top text-neutral-600 leading-tight;
+  font-size: 8px;
+}
+
+/* Calendar styles */
+calendar {
+  @apply rounded-md overflow-hidden shadow-lg;
+}
+calendar month-year {
+  @apply bg-secondary-400 text-white;
+}
+calendar cal-body days-of-week p,
+calendar cal-body days-of-month p {
+  @apply h-8 w-8 text-xs;
+}
+calendar cal-body days-of-week p.weekend,
+calendar cal-body days-of-month p.weekend,
+calendar cal-body days-of-month p.holiday {
+  @apply text-primary-700;
+}
+calendar cal-body days-of-month {
+  @apply gap-2px;
+}
+day-of-month {
+  @apply hover:bg-secondary-200 hover:rounded-full;
+}
+day-of-month[aria-selected='true'] {
+  @apply bg-secondary text-white rounded-full;
+}
+
+/* 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 item {
+  @apply flex-grow;
+}
+input-field {
+  @apply w-full m-0 py-1;
+}
+input-field input,
+input-field textarea,
+input-field select,
+input-field > field > :not(icon) {
+  @apply px-3;
+  @apply flex-grow outline-none min-h-9 leading-loose;
+  @apply bg-neutral-subtle text-neutral-800;
+}
+input-field > label {
+  @apply uppercase text-xs;
+  @apply leading-loose;
+}
+input-field > label.required::after {
+  content: ' *';
+  @apply state-danger;
+}
+
+radio-group label {
+  @apply uppercase cursor-pointer;
+}
+/* Progress bar styles */
+progress-bar {
+  @apply bg-neutral-muted border border-neutral-subtle;
+}
+progress-bar 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/organisms.css

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

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 rounded-full rgba(0,0,0,0.5);
+}

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-sm text-left rtl:text-right text-neutral-700;
+  @apply border-separate border-spacing-x-1px;
+}
+table > thead {
+  @apply table-header-group sticky top-0 z-10;
+  @apply text-xs uppercase bg-neutral-400;
+}
+table > caption {
+  @apply table-caption p-5 text-sm font-normal text-left rtl:text-right bg-neutral-subtle text-neutral-600;
+}
+
+table > tbody > tr {
+  @apply table-row border-b border-neutral-base bg-neutral-subtle;
+}
+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;
+}
+tree-table,
+table-wrapper {
+  @apply max-h-full overflow-y-auto;
+}

package/src/base/tree.css

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

package/src/base.css

@@ -0,0 +1,11 @@
+@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';

package/src/constants.js

@@ -0,0 +1,8 @@
+import { themeColors, themeRules } from '@rokkit/core'
+export { defaultStateIcons, defaultIcons } from '@rokkit/core'
+export const defaultThemeColors = themeColors()
+
+export const palettes = {
+	rokkit: themeRules(),
+	'sea-green': themeRules('sea-green', { primary: 'teal', secondary: 'sky', accent: 'lime' })
+}

package/src/index.js

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