@alsha-research/picaso-ui 0.0.1 → 0.0.2

package/dist/index.css

@@ -3580,11 +3580,11 @@ input[type="number"] {
 /* -------------------------------------------------------------------------- */
 /* Dark mode                                                                  */
 /*                                                                            */
-/* Opt-in: nothing below applies unless <html> has data-genesis-mode="dark",  */
+/* Opt-in: nothing below applies unless <html> has data-picaso-ui-mode="dark",  */
 /* which ThemeProvider / ThemeScript set. Light mode is unchanged.            */
 /* -------------------------------------------------------------------------- */
 
-:root[data-genesis-mode="dark"] {
+:root[data-picaso-ui-mode="dark"] {
   color-scheme: dark;
 
   /* Gray: reversed so surfaces are dark and text is light */
@@ -3632,7 +3632,7 @@ input[type="number"] {
 }
 
 /* Primary default (ThemeProvider replaces this when a brand colour is chosen) */
-:root[data-genesis-mode="dark"] .theme-primary {
+:root[data-picaso-ui-mode="dark"] .theme-primary {
   --primary-25: #0d192e;
   --primary-50: #0d1d38;
   --primary-100: #0e264b;
@@ -3643,56 +3643,56 @@ input[type="number"] {
   --primary-900: #8fbaf7;
 }
 
-:root[data-genesis-mode="dark"] body {
+:root[data-picaso-ui-mode="dark"] body {
   background-color: #0b0f19;
   color: var(--gray-900);
 }
 
 /* Components that use white as a surface colour */
-:root[data-genesis-mode="dark"] .bg-white,
-:root[data-genesis-mode="dark"] .hover\:bg-white:hover,
-:root[data-genesis-mode="dark"] .focus-within\:bg-white:focus-within {
+:root[data-picaso-ui-mode="dark"] .bg-white,
+:root[data-picaso-ui-mode="dark"] .hover\:bg-white:hover,
+:root[data-picaso-ui-mode="dark"] .focus-within\:bg-white:focus-within {
   background-color: var(--gray-25);
 }
 
 /* keep the Radio's inner dot (h-1.5 w-1.5) white on its coloured background */
-:root[data-genesis-mode="dark"] .bg-white.w-1\.5 {
+:root[data-picaso-ui-mode="dark"] .bg-white.w-1\.5 {
   background-color: #fff;
 }
 
-:root[data-genesis-mode="dark"] .bg-white\/90 {
+:root[data-picaso-ui-mode="dark"] .bg-white\/90 {
   background-color: color-mix(in srgb, var(--gray-25) 90%, transparent);
 }
 
-:root[data-genesis-mode="dark"] .text-black {
+:root[data-picaso-ui-mode="dark"] .text-black {
   color: var(--gray-900);
 }
 
 /* Table column dividers use a fixed light grey */
-:root[data-genesis-mode="dark"] .shadow-table {
+:root[data-picaso-ui-mode="dark"] .shadow-table {
   --tw-shadow: inset -3px 0px 0px 0px var(--gray-200);
   --tw-shadow-colored: inset -3px 0px 0px 0px var(--tw-shadow-color);
 }
-:root[data-genesis-mode="dark"] .shadow-tableRight {
+:root[data-picaso-ui-mode="dark"] .shadow-tableRight {
   --tw-shadow: inset 3px 0px 0px 0px var(--gray-200);
   --tw-shadow-colored: inset 3px 0px 0px 0px var(--tw-shadow-color);
 }
 
 /* Ring offsets default to white; :where() keeps this at zero specificity so a
    consumer's own ring-offset-* class still wins. */
-:where(:root[data-genesis-mode="dark"]) *,
-:where(:root[data-genesis-mode="dark"]) ::before,
-:where(:root[data-genesis-mode="dark"]) ::after {
+:where(:root[data-picaso-ui-mode="dark"]) *,
+:where(:root[data-picaso-ui-mode="dark"]) ::before,
+:where(:root[data-picaso-ui-mode="dark"]) ::after {
   --tw-ring-offset-color: var(--gray-25);
 }
 
 /* Skeleton */
-:root[data-genesis-mode="dark"] .skeleton,
-:root[data-genesis-mode="dark"] .skeleton.skeleton-wave,
-:root[data-genesis-mode="dark"] .skeleton.skeleton-pulse {
+:root[data-picaso-ui-mode="dark"] .skeleton,
+:root[data-picaso-ui-mode="dark"] .skeleton.skeleton-wave,
+:root[data-picaso-ui-mode="dark"] .skeleton.skeleton-pulse {
   background-color: var(--gray-100);
 }
-:root[data-genesis-mode="dark"] .skeleton.skeleton-shimmer {
+:root[data-picaso-ui-mode="dark"] .skeleton.skeleton-shimmer {
   background-image: linear-gradient(
     100deg,
     var(--gray-100) 20%,
@@ -3700,7 +3700,7 @@ input[type="number"] {
     var(--gray-100) 60%
   );
 }
-:root[data-genesis-mode="dark"] .skeleton.skeleton-wave::after {
+:root[data-picaso-ui-mode="dark"] .skeleton.skeleton-wave::after {
   background: linear-gradient(
     90deg,
     transparent,
@@ -3710,13 +3710,13 @@ input[type="number"] {
 }
 
 /* Scrollbar */
-:root[data-genesis-mode="dark"] .customScroll::-webkit-scrollbar-track {
+:root[data-picaso-ui-mode="dark"] .customScroll::-webkit-scrollbar-track {
   background-color: var(--gray-25);
 }
-:root[data-genesis-mode="dark"] .customScroll::-webkit-scrollbar-thumb {
+:root[data-picaso-ui-mode="dark"] .customScroll::-webkit-scrollbar-thumb {
   background: var(--gray-200);
 }
-:root[data-genesis-mode="dark"] .customScroll::-webkit-scrollbar-thumb:hover {
+:root[data-picaso-ui-mode="dark"] .customScroll::-webkit-scrollbar-thumb:hover {
   background: var(--gray-400);
 }
 .placeholder\:text-gray-500::-moz-placeholder {