@radioactive-labs/plutonium 0.1.10 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Core assets for the Plutonium gem",
   "type": "module",
   "main": "src/js/core.js",
@@ -31,6 +31,7 @@
     "cssnano": "^7.0.2",
     "esbuild": "^0.20.1",
     "esbuild-plugin-manifest": "^1.0.3",
+    "flowbite-typography": "^1.0.5",
     "mermaid": "^11.4.0",
     "postcss": "^8.4.35",
     "postcss-cli": "^11.0.0",

package/src/css/easymde.css

@@ -233,11 +233,11 @@
 
   /* Preview */
   .editor-preview {
-    @apply p-2.5 bg-gray-50 dark:bg-gray-900 prose dark:prose-invert max-w-none prose-sm sm:prose-base;
+    @apply p-2.5 bg-gray-50 dark:bg-gray-900 format dark:format-invert format-primary max-w-none;
   }
 
   .editor-preview-side {
-    @apply fixed bottom-0 w-1/2 top-[50px] right-0 z-50 overflow-auto hidden box-border border border-gray-300 dark:border-gray-600 break-words prose dark:prose-invert max-w-none prose-sm sm:prose-base;
+    @apply fixed bottom-0 w-1/2 top-[50px] right-0 z-50 overflow-auto hidden box-border border border-gray-300 dark:border-gray-600 break-words format dark:format-invert format-primary max-w-none;
   }
 
   .editor-preview-active-side {

package/src/css/plutonium.css

@@ -1,5 +1,6 @@
 @import "core.css";
 @import "easymde.css";
+@import "slim_select.css";
 
 @tailwind base;
 @tailwind components;

package/src/css/slim_select.css

@@ -0,0 +1,297 @@
+@layer components {
+  :root {
+    --ss-primary-color: theme('colors.primary.500');
+    --ss-bg-color: theme('colors.white');
+    --ss-font-color: theme('colors.gray.900');
+    --ss-font-placeholder-color: theme('colors.gray.500');
+    --ss-disabled-color: theme('colors.gray.100');
+    --ss-border-color: theme('colors.gray.300');
+    --ss-highlight-color: theme('colors.yellow.200');
+    --ss-success-color: theme('colors.green.500');
+    --ss-error-color: theme('colors.red.500');
+    --ss-focus-color: theme('colors.primary.500');
+  }
+
+  .dark {
+    --ss-primary-color: theme('colors.primary.400');
+    --ss-bg-color: theme('colors.gray.700');
+    --ss-font-color: theme('colors.white');
+    --ss-font-placeholder-color: theme('colors.gray.400');
+    --ss-disabled-color: theme('colors.gray.800');
+    --ss-border-color: theme('colors.gray.600');
+    --ss-highlight-color: theme('colors.yellow.300');
+    --ss-success-color: theme('colors.green.400');
+    --ss-error-color: theme('colors.red.400');
+    --ss-focus-color: theme('colors.primary.400');
+  }
+
+  @keyframes ss-valueIn {
+    0% {
+      @apply scale-0 opacity-0;
+    }
+
+    100% {
+      @apply scale-100 opacity-100;
+    }
+  }
+
+  @keyframes ss-valueOut {
+    0% {
+      @apply scale-100 opacity-100;
+    }
+
+    100% {
+      @apply scale-0 opacity-0;
+    }
+  }
+
+  .ss-hide {
+    @apply hidden !important;
+  }
+
+  .ss-main {
+    @apply flex flex-row relative select-none w-full p-2 border rounded-md shadow-sm font-medium text-sm border-gray-300 bg-white text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:ring-primary-500 focus:border-primary-500 focus:outline-none cursor-pointer transition-colors duration-200 overflow-hidden;
+  }
+
+  .ss-main:focus {
+    @apply ring-1 ring-primary-500 border-primary-500;
+  }
+
+  .ss-main.ss-disabled {
+    @apply cursor-not-allowed bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400;
+  }
+
+  .ss-main.ss-open-above {
+    @apply rounded-b-md rounded-t-none;
+  }
+
+  .ss-main.ss-open-below {
+    @apply rounded-t-md rounded-b-none;
+  }
+
+  .ss-main .ss-values {
+    @apply inline-flex flex-wrap gap-[5px] flex-1;
+  }
+
+  .ss-main .ss-values .ss-placeholder {
+    @apply flex p-0 m-0 leading-normal items-center w-full text-gray-500 dark:text-gray-400 overflow-hidden truncate whitespace-nowrap;
+  }
+
+  .ss-main .ss-values .ss-max {
+    @apply flex select-none items-center w-fit text-xs text-white dark:text-gray-900 leading-normal p-[3px_5px] bg-primary-500 rounded-md;
+  }
+
+  .ss-main .ss-values .ss-single {
+    @apply flex m-0;
+  }
+
+  .ss-main .ss-values .ss-value {
+    @apply flex select-none items-center w-fit bg-primary-500 rounded-md;
+    animation: ss-valueIn 0.2s ease-out forwards;
+  }
+
+  .ss-main .ss-values .ss-value.ss-value-out {
+    animation: ss-valueOut 0.2s ease-out forwards;
+  }
+
+  .ss-main .ss-values .ss-value .ss-value-text {
+    @apply text-xs text-white dark:text-gray-900 leading-normal p-[3px_5px];
+  }
+
+  .ss-main .ss-values .ss-value .ss-value-delete {
+    @apply flex items-center h-[7px] w-[7px] p-[3px_5px] cursor-pointer border-l border-solid border-white dark:border-gray-900 box-content;
+  }
+
+  .ss-main .ss-values .ss-value .ss-value-delete svg {
+    @apply h-[7px] w-[7px];
+  }
+
+  .ss-main .ss-values .ss-value .ss-value-delete svg path {
+    @apply fill-none stroke-white dark:stroke-gray-900;
+    stroke-width: 18;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .ss-main .ss-deselect {
+    @apply flex-none flex items-center justify-center w-fit h-auto p-[0_5px];
+  }
+
+  .ss-main .ss-deselect svg {
+    @apply w-[8px] h-[8px];
+  }
+
+  .ss-main .ss-deselect svg path {
+    @apply fill-none stroke-gray-500 dark:stroke-gray-400;
+    stroke-width: 20;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .ss-main .ss-arrow {
+    @apply flex-none flex items-center justify-end w-4 h-4 m-auto;
+  }
+
+  .ss-main .ss-arrow path {
+    @apply fill-none stroke-gray-500 dark:stroke-gray-400 transition-transform duration-200;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .ss-content {
+    @apply absolute flex h-auto flex-col w-auto max-h-[300px] box-border border rounded-b-md shadow-lg border-gray-300 bg-white dark:bg-gray-700 dark:border-gray-600 transition-all duration-200 opacity-0 scale-y-0 origin-top overflow-hidden z-[10000];
+  }
+
+  .ss-content.ss-relative {
+    @apply relative h-full;
+  }
+
+  .ss-content.ss-fixed {
+    @apply fixed;
+  }
+
+  .ss-content.ss-open-above {
+    @apply flex-col-reverse opacity-100 scale-y-100 origin-bottom rounded-t-md;
+  }
+
+  .ss-content.ss-open-below {
+    @apply opacity-100 scale-y-100 origin-top rounded-b-md;
+  }
+
+  .ss-content .ss-search {
+    @apply flex-none flex flex-row p-2;
+  }
+
+  .ss-content .ss-search input {
+    @apply inline-flex text-base leading-normal flex-auto w-full min-w-0 p-2 m-0 border rounded-md shadow-sm font-medium text-sm border-gray-300 bg-gray-100 text-gray-900 placeholder-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-primary-500 focus:border-primary-500 focus:outline-none text-left box-border;
+  }
+
+  .ss-content .ss-search .ss-addable {
+    @apply inline-flex justify-center items-center cursor-pointer flex-none h-auto ml-2 border shadow-sm border-gray-300 dark:border-gray-600;
+  }
+
+  .ss-content .ss-search .ss-addable svg {
+    @apply flex items-center justify-end flex-none w-4 h-4 m-2;
+  }
+
+  .ss-content .ss-search .ss-addable svg path {
+    @apply fill-none stroke-gray-500 dark:stroke-gray-400;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .ss-content .ss-list {
+    @apply flex-auto h-auto overflow-x-hidden overflow-y-auto;
+  }
+
+  .ss-content .ss-list .ss-error {
+    @apply text-red-500 dark:text-red-400 p-2;
+  }
+
+  .ss-content .ss-list .ss-searching {
+    @apply text-gray-900 dark:text-white p-2;
+  }
+
+  .ss-content .ss-list .ss-optgroup.ss-close .ss-option {
+    @apply hidden !important;
+  }
+
+  /* Update the specific no results style */
+  .ss-content .ss-list .ss-search {
+    @apply flex-none text-sm text-gray-500 dark:text-gray-400 p-2 font-medium;
+  }
+
+  /* The original search container styles should be scoped properly */
+  .ss-content>.ss-search {
+    @apply flex-none flex flex-row p-2;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label {
+    @apply flex flex-row items-center justify-between p-2 bg-gray-50 dark:bg-gray-800;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text {
+    @apply flex-auto font-bold text-gray-900 dark:text-white;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow) {
+    @apply cursor-pointer;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions {
+    @apply flex-none flex flex-row items-center justify-center gap-2;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall {
+    @apply flex-none flex flex-row cursor-pointer hover:opacity-50;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path {
+    @apply stroke-red-500 dark:stroke-red-400;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span {
+    @apply flex-none flex items-center justify-center text-[60%] text-center pr-1;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg {
+    @apply flex-none w-[13px] h-[13px];
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path {
+    @apply fill-none stroke-green-500 dark:stroke-green-400;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child {
+    stroke-width: 5;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child {
+    stroke-width: 11;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable {
+    @apply flex-none flex flex-row cursor-pointer;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow {
+    @apply flex-auto w-[10px] h-[10px];
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path {
+    @apply fill-none stroke-gray-500 dark:stroke-gray-400 transition-transform duration-200;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-option {
+    @apply p-2 pl-6;
+  }
+
+  .ss-content .ss-list .ss-option {
+    @apply block p-2 whitespace-normal text-gray-900 dark:text-white cursor-pointer select-none hover:bg-gray-100 dark:hover:bg-gray-600;
+    min-height: 0;
+  }
+
+  .ss-content .ss-list .ss-option:empty {
+    @apply hidden p-0 m-0;
+  }
+
+  .ss-content .ss-list .ss-option.ss-highlighted,
+  .ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
+    @apply text-white dark:text-gray-900 bg-primary-500;
+  }
+
+  .ss-content .ss-list .ss-option.ss-disabled {
+    @apply cursor-not-allowed bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400;
+  }
+
+  .ss-content .ss-list .ss-option .ss-search-highlight {
+    @apply inline-block bg-yellow-200 dark:bg-yellow-300;
+  }
+}