sakana-element 2.1.2 → 2.1.4

package/dist/theme/Card.css

@@ -0,0 +1,112 @@
+/* Card Variables */
+.px-card[data-v-1f65a210] {
+  --px-card-bg-color: var(--px-bg-color);
+  --px-card-border-color: var(--px-border-color);
+  --px-card-shadow-color: var(--px-shadow-color);
+  --px-card-text-color: var(--px-text-color-primary);
+  --px-card-header-border-color: var(--px-border-color-light);
+  --px-card-footer-border-color: var(--px-border-color-light);
+  --px-card-padding: 16px;
+}
+/* Base Card Styles - Pixel Game Aesthetic */
+.px-card[data-v-1f65a210] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  color: var(--px-card-text-color);
+  font-family: var(--px-font-family);
+  font-size: var(--px-font-size-base);
+  background: transparent;
+  border: none;
+  box-sizing: border-box;
+  overflow: hidden;
+  transition: none;
+}
+/* Border layer — filled with border color, clipped to pixel shape */
+.px-card[data-v-1f65a210]::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--px-card-border-color);
+    clip-path: polygon(
+      0 2px, 2px 2px, 2px 0,
+      calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
+      100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
+      2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
+    );
+    z-index: 0;
+}
+/* Fill layer — inset by border width, filled with bg color */
+.px-card[data-v-1f65a210]::after {
+    content: '';
+    position: absolute;
+    inset: 2px;
+    background: var(--px-card-bg-color);
+    clip-path: polygon(
+      0 2px, 2px 2px, 2px 0,
+      calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
+      100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
+      2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
+    );
+    z-index: 0;
+}
+/* Card sections - all above pseudo-elements */
+.px-card__header[data-v-1f65a210] {
+  position: relative;
+  z-index: 1;
+  padding: var(--px-card-padding);
+  border-bottom: 2px solid var(--px-card-header-border-color);
+  font-weight: 600;
+}
+.px-card__body[data-v-1f65a210] {
+  position: relative;
+  z-index: 1;
+  padding: var(--px-card-padding);
+  flex: 1;
+}
+.px-card__footer[data-v-1f65a210] {
+  position: relative;
+  z-index: 1;
+  padding: var(--px-card-padding);
+  border-top: 2px solid var(--px-card-footer-border-color);
+}
+/* Shadow variants */
+.px-card--shadow-always[data-v-1f65a210] {
+  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-card-shadow-color));
+}
+.px-card--shadow-hover[data-v-1f65a210] {
+  filter: none;
+}
+.px-card--shadow-hover[data-v-1f65a210]:hover {
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-card-shadow-color));
+}
+.px-card--shadow-never[data-v-1f65a210] {
+  filter: none;
+}
+/* Hoverable interaction */
+.px-card.is-hoverable[data-v-1f65a210] {
+  cursor: pointer;
+}
+.px-card.is-hoverable[data-v-1f65a210]:hover {
+    transform: translateY(-4px);
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-card-shadow-color));
+}
+.px-card.is-hoverable[data-v-1f65a210]:active {
+    transform: translateY(0);
+}
+/* Size variants */
+.px-card--small[data-v-1f65a210] {
+  --px-card-padding: 12px;
+  font-size: var(--px-font-size-small);
+  filter: drop-shadow(2px 2px 0px var(--px-card-shadow-color));
+}
+.px-card--small.px-card--shadow-hover[data-v-1f65a210] { filter: none;
+}
+.px-card--small.px-card--shadow-hover[data-v-1f65a210]:hover { filter: drop-shadow(2px 2px 0px var(--px-card-shadow-color));
+}
+.px-card--small.px-card--shadow-never[data-v-1f65a210] { filter: none;
+}
+.px-card--large[data-v-1f65a210] {
+  --px-card-padding: 20px;
+  font-size: var(--px-font-size-large);
+}

package/dist/theme/Collapse.css

@@ -140,7 +140,7 @@
       background-color: var(--px-fill-color-light);
 }
 .px-collapse-item__header[data-v-4f9f8081]:hover:not(.is-disabled)::before {
-      border-color: var(--px-color-primary);
+      border-color: var(--px-hover-border-color);
 }
 /* Disabled state */
 .px-collapse-item__header.is-disabled[data-v-4f9f8081] {
@@ -442,7 +442,7 @@
       background-color: var(--px-fill-color-light);
 }
 .px-collapse-item__header[data-v-9af3f092]:hover:not(.is-disabled)::before {
-      border-color: var(--px-color-primary);
+      border-color: var(--px-hover-border-color);
 }
 /* Disabled state */
 .px-collapse-item__header.is-disabled[data-v-9af3f092] {

package/dist/theme/Dropdown.css

@@ -1,7 +1,7 @@
 /* Dropdown Variables */
 .px-dropdown .px-dropdown__menu {
-  --px-dropdown-menuItem-hover-fill: var(--px-color-primary-light-9);
-  --px-dropdown-menuItem-hover-color: var(--px-color-primary);
+  --px-dropdown-menuItem-hover-fill: var(--px-hover-bg-color);
+  --px-dropdown-menuItem-hover-color: var(--px-hover-text-color);
   --px-dropdown-menuItem-disabled-color: var(--px-text-color-disabled);
   --px-dropdown-menuItem-divided-color: var(--px-border-color-dark);
   --px-dropdown-shadow-color: var(--px-shadow-color-dark);
@@ -92,8 +92,8 @@
 }
 /* Dropdown Variables */
 .px-dropdown .px-dropdown__menu {
-  --px-dropdown-menuItem-hover-fill: var(--px-color-primary-light-9);
-  --px-dropdown-menuItem-hover-color: var(--px-color-primary);
+  --px-dropdown-menuItem-hover-fill: var(--px-hover-bg-color);
+  --px-dropdown-menuItem-hover-color: var(--px-hover-text-color);
   --px-dropdown-menuItem-disabled-color: var(--px-text-color-disabled);
   --px-dropdown-menuItem-divided-color: var(--px-border-color-dark);
   --px-dropdown-shadow-color: var(--px-shadow-color-dark);

package/dist/theme/Input.css

@@ -2,13 +2,14 @@
 .px-input {
   --px-input-text-color: var(--px-text-color-primary);
   --px-input-border-color: var(--px-border-color);
-  --px-input-hover-border-color: var(--px-color-primary);
-  --px-input-focus-border-color: var(--px-color-primary);
+  --px-input-hover-border-color: var(--px-hover-border-color);
+  --px-input-focus-border-color: var(--px-hover-border-color);
   --px-input-bg-color: var(--px-fill-color-blank);
   --px-input-icon-color: var(--px-text-color-secondary);
   --px-input-placeholder-color: var(--px-text-color-placeholder);
   --px-input-clear-hover-color: var(--px-text-color-primary);
   --px-input-shadow-color: var(--px-shadow-color);
+  --px-input-focus-shadow-color: var(--px-shadow-color-dark);
 }
 /* Base Input Styles */
 .px-input {
@@ -101,7 +102,7 @@
       background: var(--px-input-focus-border-color);
 }
 .px-input.is-focus .px-input__wrapper {
-    filter: drop-shadow(4px 4px 0px var(--px-color-primary-dark));
+    filter: drop-shadow(4px 4px 0px var(--px-input-focus-shadow-color));
 }
 /* Input Wrapper - Main pixel-style container */
 .px-input__wrapper {
@@ -251,6 +252,214 @@
 .px-input--small .px-input__inner {
     --px-input-inner-height: calc(var(--px-input-height) - 6px);
 }
+/* Color variants */
+.px-input--primary {
+    --px-input-border-color: var(--px-color-primary);
+    --px-input-hover-border-color: var(--px-color-primary-dark);
+    --px-input-focus-border-color: var(--px-color-primary-dark);
+    --px-input-focus-shadow-color: var(--px-color-primary-dark);
+}
+.px-input--primary .px-input__wrapper {
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark));
+}
+.px-input--primary.is-focus .px-input__wrapper {
+    filter: drop-shadow(4px 4px 0px var(--px-color-primary-dark));
+}
+/* Textarea color variant */
+.px-input--primary .px-textarea__wrapper {
+    border-color: var(--px-color-primary);
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark));
+}
+.px-input--primary .px-textarea__wrapper:hover { border-color: var(--px-color-primary-dark);
+}
+.px-input--primary .px-textarea__wrapper:focus {
+      border-color: var(--px-color-primary-dark);
+      filter: drop-shadow(4px 4px 0px var(--px-color-primary-dark));
+}
+.px-input--success {
+    --px-input-border-color: var(--px-color-success);
+    --px-input-hover-border-color: var(--px-color-success-dark);
+    --px-input-focus-border-color: var(--px-color-success-dark);
+    --px-input-focus-shadow-color: var(--px-color-success-dark);
+}
+.px-input--success .px-input__wrapper {
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark));
+}
+.px-input--success.is-focus .px-input__wrapper {
+    filter: drop-shadow(4px 4px 0px var(--px-color-success-dark));
+}
+/* Textarea color variant */
+.px-input--success .px-textarea__wrapper {
+    border-color: var(--px-color-success);
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark));
+}
+.px-input--success .px-textarea__wrapper:hover { border-color: var(--px-color-success-dark);
+}
+.px-input--success .px-textarea__wrapper:focus {
+      border-color: var(--px-color-success-dark);
+      filter: drop-shadow(4px 4px 0px var(--px-color-success-dark));
+}
+.px-input--warning {
+    --px-input-border-color: var(--px-color-warning);
+    --px-input-hover-border-color: var(--px-color-warning-dark);
+    --px-input-focus-border-color: var(--px-color-warning-dark);
+    --px-input-focus-shadow-color: var(--px-color-warning-dark);
+}
+.px-input--warning .px-input__wrapper {
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark));
+}
+.px-input--warning.is-focus .px-input__wrapper {
+    filter: drop-shadow(4px 4px 0px var(--px-color-warning-dark));
+}
+/* Textarea color variant */
+.px-input--warning .px-textarea__wrapper {
+    border-color: var(--px-color-warning);
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark));
+}
+.px-input--warning .px-textarea__wrapper:hover { border-color: var(--px-color-warning-dark);
+}
+.px-input--warning .px-textarea__wrapper:focus {
+      border-color: var(--px-color-warning-dark);
+      filter: drop-shadow(4px 4px 0px var(--px-color-warning-dark));
+}
+.px-input--info {
+    --px-input-border-color: var(--px-color-info);
+    --px-input-hover-border-color: var(--px-color-info-dark);
+    --px-input-focus-border-color: var(--px-color-info-dark);
+    --px-input-focus-shadow-color: var(--px-color-info-dark);
+}
+.px-input--info .px-input__wrapper {
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark));
+}
+.px-input--info.is-focus .px-input__wrapper {
+    filter: drop-shadow(4px 4px 0px var(--px-color-info-dark));
+}
+/* Textarea color variant */
+.px-input--info .px-textarea__wrapper {
+    border-color: var(--px-color-info);
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark));
+}
+.px-input--info .px-textarea__wrapper:hover { border-color: var(--px-color-info-dark);
+}
+.px-input--info .px-textarea__wrapper:focus {
+      border-color: var(--px-color-info-dark);
+      filter: drop-shadow(4px 4px 0px var(--px-color-info-dark));
+}
+.px-input--danger {
+    --px-input-border-color: var(--px-color-danger);
+    --px-input-hover-border-color: var(--px-color-danger-dark);
+    --px-input-focus-border-color: var(--px-color-danger-dark);
+    --px-input-focus-shadow-color: var(--px-color-danger-dark);
+}
+.px-input--danger .px-input__wrapper {
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark));
+}
+.px-input--danger.is-focus .px-input__wrapper {
+    filter: drop-shadow(4px 4px 0px var(--px-color-danger-dark));
+}
+/* Textarea color variant */
+.px-input--danger .px-textarea__wrapper {
+    border-color: var(--px-color-danger);
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark));
+}
+.px-input--danger .px-textarea__wrapper:hover { border-color: var(--px-color-danger-dark);
+}
+.px-input--danger .px-textarea__wrapper:focus {
+      border-color: var(--px-color-danger-dark);
+      filter: drop-shadow(4px 4px 0px var(--px-color-danger-dark));
+}
+/* Ghost variant — no border/shadow at rest */
+.px-input.is-ghost .px-input__wrapper {
+    filter: none;
+}
+.px-input.is-ghost .px-input__wrapper::before { background: transparent;
+}
+.px-input.is-ghost .px-input__wrapper:hover::before { background: var(--px-input-hover-border-color);
+}
+.px-input.is-ghost .px-input__wrapper:hover {
+      filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color));
+}
+.px-input.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-input-focus-border-color);
+}
+.px-input.is-ghost.is-focus .px-input__wrapper {
+    filter: drop-shadow(4px 4px 0px var(--px-input-focus-shadow-color));
+}
+/* Ghost + Color variants */
+.px-input--primary.is-ghost .px-input__wrapper {
+      filter: none;
+}
+.px-input--primary.is-ghost .px-input__wrapper::before { background: transparent;
+}
+.px-input--primary.is-ghost .px-input__wrapper:hover::before { background: var(--px-color-primary);
+}
+.px-input--primary.is-ghost .px-input__wrapper:hover {
+        filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark));
+}
+.px-input--primary.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-color-primary-dark);
+}
+.px-input--primary.is-ghost.is-focus .px-input__wrapper {
+      filter: drop-shadow(4px 4px 0px var(--px-color-primary-dark));
+}
+.px-input--success.is-ghost .px-input__wrapper {
+      filter: none;
+}
+.px-input--success.is-ghost .px-input__wrapper::before { background: transparent;
+}
+.px-input--success.is-ghost .px-input__wrapper:hover::before { background: var(--px-color-success);
+}
+.px-input--success.is-ghost .px-input__wrapper:hover {
+        filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark));
+}
+.px-input--success.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-color-success-dark);
+}
+.px-input--success.is-ghost.is-focus .px-input__wrapper {
+      filter: drop-shadow(4px 4px 0px var(--px-color-success-dark));
+}
+.px-input--warning.is-ghost .px-input__wrapper {
+      filter: none;
+}
+.px-input--warning.is-ghost .px-input__wrapper::before { background: transparent;
+}
+.px-input--warning.is-ghost .px-input__wrapper:hover::before { background: var(--px-color-warning);
+}
+.px-input--warning.is-ghost .px-input__wrapper:hover {
+        filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark));
+}
+.px-input--warning.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-color-warning-dark);
+}
+.px-input--warning.is-ghost.is-focus .px-input__wrapper {
+      filter: drop-shadow(4px 4px 0px var(--px-color-warning-dark));
+}
+.px-input--info.is-ghost .px-input__wrapper {
+      filter: none;
+}
+.px-input--info.is-ghost .px-input__wrapper::before { background: transparent;
+}
+.px-input--info.is-ghost .px-input__wrapper:hover::before { background: var(--px-color-info);
+}
+.px-input--info.is-ghost .px-input__wrapper:hover {
+        filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark));
+}
+.px-input--info.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-color-info-dark);
+}
+.px-input--info.is-ghost.is-focus .px-input__wrapper {
+      filter: drop-shadow(4px 4px 0px var(--px-color-info-dark));
+}
+.px-input--danger.is-ghost .px-input__wrapper {
+      filter: none;
+}
+.px-input--danger.is-ghost .px-input__wrapper::before { background: transparent;
+}
+.px-input--danger.is-ghost .px-input__wrapper:hover::before { background: var(--px-color-danger);
+}
+.px-input--danger.is-ghost .px-input__wrapper:hover {
+        filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark));
+}
+.px-input--danger.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-color-danger-dark);
+}
+.px-input--danger.is-ghost.is-focus .px-input__wrapper {
+      filter: drop-shadow(4px 4px 0px var(--px-color-danger-dark));
+}
 /* Prefix and Suffix */
 .px-input__prefix,
 .px-input__suffix {
@@ -388,7 +597,7 @@
       background: var(--px-input-focus-border-color);
 }
 .px-textarea__wrapper:focus {
-    filter: drop-shadow(4px 4px 0px var(--px-color-primary-dark));
+    filter: drop-shadow(4px 4px 0px var(--px-input-focus-shadow-color));
 }
 .px-textarea__wrapper::placeholder {
     color: var(--px-input-placeholder-color);