@rokkit/themes 1.0.0-next.44 → 1.0.0-next.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.44",
+  "version": "1.0.0-next.47",
   "description": "Themes for use with rokkit components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -12,19 +12,20 @@
     "access": "public"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.3",
-    "@vitest/coverage-v8": "^0.33.0",
-    "@vitest/ui": "~0.33.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.5",
+    "@vitest/coverage-v8": "^0.34.4",
+    "@vitest/ui": "~0.34.4",
     "jsdom": "^22.1.0",
-    "svelte": "^4.1.1",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.7",
-    "vitest": "~0.33.0",
-    "@rokkit/core": "1.0.0-next.44",
-    "shared-config": "1.0.0-next.44"
+    "svelte": "^4.2.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vitest": "~0.34.4",
+    "@rokkit/core": "1.0.0-next.47",
+    "shared-config": "1.0.0-next.47"
   },
   "files": [
     "src/**/*.js",
+    "src/**/*.css",
     "src/**/*.svelte",
     "!src/fixtures",
     "!src/**/*.spec.js"

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 w-10 h-10 cursor-pointer aspect-square select-none focus:outline;
+}
+icon > i {
+  @apply text-2xl leading-6 aspect-square text-current;
+}
+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-skin-inset bg-opacity-50;
+}
+
+/* Checkbox styles */
+checkbox {
+  @apply gap-2;
+}

package/src/base/core.css

@@ -0,0 +1,62 @@
+/* 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, 100vh);
+}
+
+/* Link styles */
+a {
+  @apply text-primary hover:text-secondary visited:text-secondary-600;
+}
+
+/* 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;
+}
+
+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;
+}

package/src/base/layout.css

@@ -0,0 +1,38 @@
+container > segment {
+  @apply overflow-hidden;
+}
+.three-col {
+  @apply grid w-full h-full overflow-hidden;
+}
+
+.three-col.md {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  /* @apply grid-cols-2 grid-rows-2; */
+  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-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 {
+  @apply grid-cols-1 grid-rows-1;
+}

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 span {
+  @apply bg-skin-subtle border-skin-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 span::before,
+.bookend range-track span::after {
+  content: '';
+  @apply absolute w-1px rounded-full -top-2 -bottom-2 bg-gray-300;
+}
+.bookend range-track span::before {
+  @apply -left-1px;
+}
+.bookend range-track span::after {
+  @apply -right-2px;
+}
+
+/* Input range tick styles */
+input-range tick {
+  @apply h-6;
+}
+input-range tick span {
+  @apply border-skin-500 h-full;
+}
+input-range tick p {
+  @apply items-top;
+  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-500 text-white rounded-full;
+}
+
+/* Form styles */
+form button[type='submit'] {
+  @apply mt-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-10 leading-loose;
+  @apply bg-skin-subtle text-skin-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-skin-muted border border-skin-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,47 @@
+/* Alert styles */
+alert-list {
+  @apply top-4 right-4 w-80;
+}
+alert,
+error,
+info,
+warning,
+success {
+  @apply px-4 py-2 border rounded select-none cursor-pointer;
+}
+alert.error {
+  @apply bg-error text-error border-error;
+}
+alert.info,
+info {
+  @apply bg-info text-info border-info;
+}
+alert.warning,
+warning {
+  @apply bg-warn text-warn border-warn;
+}
+alert.success,
+success {
+  @apply bg-pass text-pass border-pass;
+}
+
+input-select,
+drop-down {
+  @apply overflow-visible cursor-pointer;
+}
+
+input-field > field > input-select {
+  @apply px-0;
+}
+
+input-select selected-item > icon,
+drop-down > button > span > icon {
+  @apply w-10 h-full;
+}
+
+input-select > selected-item,
+drop-down > button > span {
+  /* @apply bg-skin-base pl-3; */
+  @apply pl-3 min-h-10 gap-2 items-center normal-case;
+  @apply rounded text-skin-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.css

@@ -0,0 +1,7 @@
+@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/animation.css';