sakana-element 2.2.0 → 2.4.0

package/dist/theme/Checkbox.css

@@ -0,0 +1,604 @@
+/* Checkbox Variables */
+.px-checkbox {
+  --px-checkbox-size: 18px;
+  --px-checkbox-checked-color: var(--px-color-primary);
+  --px-checkbox-checked-border-color: var(--px-color-primary-dark);
+  --px-checkbox-border-color: var(--px-border-color);
+  --px-checkbox-bg-color: var(--px-fill-color-blank);
+  --px-checkbox-shadow-color: var(--px-shadow-color);
+
+  /* 3D bevel — sunken look (unchecked) */
+  --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
+  --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.1);
+}
+/* Base Checkbox Styles */
+.px-checkbox {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--px-font-size-base);
+  font-family: var(--px-font-family);
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+/* Disabled state */
+.px-checkbox.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.px-checkbox.is-disabled .px-checkbox__inner {
+      cursor: not-allowed;
+}
+/* Checked & Indeterminate shared styles */
+.px-checkbox.is-checked .px-checkbox__inner::before, .px-checkbox.is-indeterminate .px-checkbox__inner::before {
+        background: var(--px-checkbox-checked-border-color);
+}
+.px-checkbox.is-checked .px-checkbox__inner::after, .px-checkbox.is-indeterminate .px-checkbox__inner::after {
+        background: var(--px-checkbox-checked-color);
+}
+.px-checkbox.is-checked .px-checkbox__inner .px-checkbox__tick, .px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+        opacity: 1;
+}
+/* Checked state — raised bevel */
+.px-checkbox.is-checked {
+    --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
+    --px-checkbox-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
+}
+.px-checkbox.is-checked .px-checkbox__input {
+      filter: drop-shadow(
+        var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-checkbox-checked-border-color)
+      );
+}
+/* Hover feedback */
+.px-checkbox:hover:not(.is-disabled) .px-checkbox__inner::after {
+      --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
+}
+/* Active/pressed feedback */
+.px-checkbox:active:not(.is-disabled) .px-checkbox__inner::after {
+      --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
+      --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.15);
+}
+/* Indeterminate state */
+.px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+      /* Override checkmark with a pixel-art horizontal dash */
+      clip-path: none;
+      position: absolute;
+      width: 8px;
+      height: 2px;
+      background: var(--px-fill-color-blank);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+}
+.px-checkbox.is-indeterminate .px-checkbox__input {
+      filter: none;
+}
+/* Size variants */
+.px-checkbox--large {
+  --px-checkbox-size: 22px;
+  font-size: var(--px-font-size-base);
+}
+.px-checkbox--large .px-checkbox__tick {
+    width: 12px;
+    height: 12px;
+}
+.px-checkbox--large.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+    width: 10px;
+    height: 2px;
+}
+.px-checkbox--small {
+  --px-checkbox-size: 14px;
+  font-size: var(--px-font-size-small);
+}
+.px-checkbox--small .px-checkbox__input {
+    filter: drop-shadow(2px 2px 0px var(--px-checkbox-shadow-color));
+}
+.px-checkbox--small .px-checkbox__tick {
+    width: 8px;
+    height: 8px;
+}
+.px-checkbox--small.is-checked .px-checkbox__input {
+    filter: drop-shadow(2px 2px 0px var(--px-checkbox-checked-border-color));
+}
+.px-checkbox--small.is-indeterminate .px-checkbox__input {
+    filter: none;
+}
+.px-checkbox--small.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+    width: 6px;
+    height: 2px;
+}
+/* Hidden native input */
+.px-checkbox__original {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  margin: 0;
+  outline: none;
+}
+.px-checkbox__original:focus-visible ~ .px-checkbox__inner {
+    outline: 2px dashed var(--px-checkbox-checked-color);
+    outline-offset: 2px;
+}
+/* Input wrapper */
+.px-checkbox__input {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  /* Pixel shadow via drop-shadow */
+  filter: drop-shadow(
+    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-checkbox-shadow-color)
+  );
+}
+/* The pixel-art checkbox box */
+.px-checkbox__inner {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--px-checkbox-size);
+  height: var(--px-checkbox-size);
+  box-sizing: border-box;
+  background: transparent;
+
+  --px-checkbox-pixel-corners: 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)
+  );
+}
+/* Border layer - pixel shape */
+.px-checkbox__inner::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--px-checkbox-border-color);
+    clip-path: var(--px-checkbox-pixel-corners);
+    z-index: 0;
+}
+/* Fill layer - pixel shape with 3D bevel */
+.px-checkbox__inner::after {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    background: var(--px-checkbox-bg-color);
+    clip-path: var(--px-checkbox-pixel-corners);
+    box-shadow:
+      var(--px-checkbox-inset-highlight),
+      var(--px-checkbox-inset-shadow);
+    z-index: 0;
+}
+/* Pixel checkmark */
+.px-checkbox__tick {
+  position: relative;
+  z-index: 1;
+  width: 10px;
+  height: 10px;
+  opacity: 0;
+  /* Pixel staircase checkmark (✓) — stepped 2px increments */
+  clip-path: polygon(
+    /* Left arm descending */
+    10% 40%,
+    10% 60%,
+    20% 60%,
+    20% 70%,
+    30% 70%,
+    30% 80%,
+    /* Bottom vertex */
+    40% 80%,
+    40% 90%,
+    50% 90%,
+    50% 80%,
+    /* Right arm ascending */
+    60% 80%,
+    60% 70%,
+    70% 70%,
+    70% 60%,
+    80% 60%,
+    80% 50%,
+    90% 50%,
+    90% 30%,
+    /* Top of right arm */
+    80% 30%,
+    80% 40%,
+    70% 40%,
+    70% 50%,
+    60% 50%,
+    60% 60%,
+    50% 60%,
+    50% 70%,
+    /* Return along inner edge */
+    40% 70%,
+    40% 60%,
+    30% 60%,
+    30% 50%,
+    20% 50%,
+    20% 40%
+  );
+  background: var(--px-fill-color-blank);
+}
+/* Label */
+.px-checkbox__label {
+  padding-left: 8px;
+  font-family: var(--px-font-family);
+  font-size: inherit;
+  line-height: 1.2;
+  color: var(--px-text-color-primary);
+}
+/* Type variants */
+.px-checkbox--primary {
+    --px-checkbox-checked-color: var(--px-color-primary);
+    --px-checkbox-checked-border-color: var(--px-color-primary-dark);
+}
+.px-checkbox--primary.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark)
+    );
+}
+.px-checkbox--success {
+    --px-checkbox-checked-color: var(--px-color-success);
+    --px-checkbox-checked-border-color: var(--px-color-success-dark);
+}
+.px-checkbox--success.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark)
+    );
+}
+.px-checkbox--info {
+    --px-checkbox-checked-color: var(--px-color-info);
+    --px-checkbox-checked-border-color: var(--px-color-info-dark);
+}
+.px-checkbox--info.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark)
+    );
+}
+.px-checkbox--warning {
+    --px-checkbox-checked-color: var(--px-color-warning);
+    --px-checkbox-checked-border-color: var(--px-color-warning-dark);
+}
+.px-checkbox--warning.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark)
+    );
+}
+.px-checkbox--danger {
+    --px-checkbox-checked-color: var(--px-color-danger);
+    --px-checkbox-checked-border-color: var(--px-color-danger-dark);
+}
+.px-checkbox--danger.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark)
+    );
+}
+/* Dark mode bevel adjustment */
+html.dark .px-checkbox {
+  --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
+}
+html.dark .px-checkbox.is-checked {
+  --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-checkbox-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
+}
+/* Checkbox Group */
+.px-checkbox-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}
+/* Checkbox Variables */
+.px-checkbox {
+  --px-checkbox-size: 18px;
+  --px-checkbox-checked-color: var(--px-color-primary);
+  --px-checkbox-checked-border-color: var(--px-color-primary-dark);
+  --px-checkbox-border-color: var(--px-border-color);
+  --px-checkbox-bg-color: var(--px-fill-color-blank);
+  --px-checkbox-shadow-color: var(--px-shadow-color);
+
+  /* 3D bevel — sunken look (unchecked) */
+  --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
+  --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.1);
+}
+/* Base Checkbox Styles */
+.px-checkbox {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--px-font-size-base);
+  font-family: var(--px-font-family);
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+/* Disabled state */
+.px-checkbox.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.px-checkbox.is-disabled .px-checkbox__inner {
+      cursor: not-allowed;
+}
+/* Checked & Indeterminate shared styles */
+.px-checkbox.is-checked .px-checkbox__inner::before, .px-checkbox.is-indeterminate .px-checkbox__inner::before {
+        background: var(--px-checkbox-checked-border-color);
+}
+.px-checkbox.is-checked .px-checkbox__inner::after, .px-checkbox.is-indeterminate .px-checkbox__inner::after {
+        background: var(--px-checkbox-checked-color);
+}
+.px-checkbox.is-checked .px-checkbox__inner .px-checkbox__tick, .px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+        opacity: 1;
+}
+/* Checked state — raised bevel */
+.px-checkbox.is-checked {
+    --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
+    --px-checkbox-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
+}
+.px-checkbox.is-checked .px-checkbox__input {
+      filter: drop-shadow(
+        var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-checkbox-checked-border-color)
+      );
+}
+/* Hover feedback */
+.px-checkbox:hover:not(.is-disabled) .px-checkbox__inner::after {
+      --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
+}
+/* Active/pressed feedback */
+.px-checkbox:active:not(.is-disabled) .px-checkbox__inner::after {
+      --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
+      --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.15);
+}
+/* Indeterminate state */
+.px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+      /* Override checkmark with a pixel-art horizontal dash */
+      clip-path: none;
+      position: absolute;
+      width: 8px;
+      height: 2px;
+      background: var(--px-fill-color-blank);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+}
+.px-checkbox.is-indeterminate .px-checkbox__input {
+      filter: none;
+}
+/* Size variants */
+.px-checkbox--large {
+  --px-checkbox-size: 22px;
+  font-size: var(--px-font-size-base);
+}
+.px-checkbox--large .px-checkbox__tick {
+    width: 12px;
+    height: 12px;
+}
+.px-checkbox--large.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+    width: 10px;
+    height: 2px;
+}
+.px-checkbox--small {
+  --px-checkbox-size: 14px;
+  font-size: var(--px-font-size-small);
+}
+.px-checkbox--small .px-checkbox__input {
+    filter: drop-shadow(2px 2px 0px var(--px-checkbox-shadow-color));
+}
+.px-checkbox--small .px-checkbox__tick {
+    width: 8px;
+    height: 8px;
+}
+.px-checkbox--small.is-checked .px-checkbox__input {
+    filter: drop-shadow(2px 2px 0px var(--px-checkbox-checked-border-color));
+}
+.px-checkbox--small.is-indeterminate .px-checkbox__input {
+    filter: none;
+}
+.px-checkbox--small.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+    width: 6px;
+    height: 2px;
+}
+/* Hidden native input */
+.px-checkbox__original {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  margin: 0;
+  outline: none;
+}
+.px-checkbox__original:focus-visible ~ .px-checkbox__inner {
+    outline: 2px dashed var(--px-checkbox-checked-color);
+    outline-offset: 2px;
+}
+/* Input wrapper */
+.px-checkbox__input {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  /* Pixel shadow via drop-shadow */
+  filter: drop-shadow(
+    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-checkbox-shadow-color)
+  );
+}
+/* The pixel-art checkbox box */
+.px-checkbox__inner {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--px-checkbox-size);
+  height: var(--px-checkbox-size);
+  box-sizing: border-box;
+  background: transparent;
+
+  --px-checkbox-pixel-corners: 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)
+  );
+}
+/* Border layer - pixel shape */
+.px-checkbox__inner::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--px-checkbox-border-color);
+    clip-path: var(--px-checkbox-pixel-corners);
+    z-index: 0;
+}
+/* Fill layer - pixel shape with 3D bevel */
+.px-checkbox__inner::after {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    background: var(--px-checkbox-bg-color);
+    clip-path: var(--px-checkbox-pixel-corners);
+    box-shadow:
+      var(--px-checkbox-inset-highlight),
+      var(--px-checkbox-inset-shadow);
+    z-index: 0;
+}
+/* Pixel checkmark */
+.px-checkbox__tick {
+  position: relative;
+  z-index: 1;
+  width: 10px;
+  height: 10px;
+  opacity: 0;
+  /* Pixel staircase checkmark (✓) — stepped 2px increments */
+  clip-path: polygon(
+    /* Left arm descending */
+    10% 40%,
+    10% 60%,
+    20% 60%,
+    20% 70%,
+    30% 70%,
+    30% 80%,
+    /* Bottom vertex */
+    40% 80%,
+    40% 90%,
+    50% 90%,
+    50% 80%,
+    /* Right arm ascending */
+    60% 80%,
+    60% 70%,
+    70% 70%,
+    70% 60%,
+    80% 60%,
+    80% 50%,
+    90% 50%,
+    90% 30%,
+    /* Top of right arm */
+    80% 30%,
+    80% 40%,
+    70% 40%,
+    70% 50%,
+    60% 50%,
+    60% 60%,
+    50% 60%,
+    50% 70%,
+    /* Return along inner edge */
+    40% 70%,
+    40% 60%,
+    30% 60%,
+    30% 50%,
+    20% 50%,
+    20% 40%
+  );
+  background: var(--px-fill-color-blank);
+}
+/* Label */
+.px-checkbox__label {
+  padding-left: 8px;
+  font-family: var(--px-font-family);
+  font-size: inherit;
+  line-height: 1.2;
+  color: var(--px-text-color-primary);
+}
+/* Type variants */
+.px-checkbox--primary {
+    --px-checkbox-checked-color: var(--px-color-primary);
+    --px-checkbox-checked-border-color: var(--px-color-primary-dark);
+}
+.px-checkbox--primary.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark)
+    );
+}
+.px-checkbox--success {
+    --px-checkbox-checked-color: var(--px-color-success);
+    --px-checkbox-checked-border-color: var(--px-color-success-dark);
+}
+.px-checkbox--success.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark)
+    );
+}
+.px-checkbox--info {
+    --px-checkbox-checked-color: var(--px-color-info);
+    --px-checkbox-checked-border-color: var(--px-color-info-dark);
+}
+.px-checkbox--info.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark)
+    );
+}
+.px-checkbox--warning {
+    --px-checkbox-checked-color: var(--px-color-warning);
+    --px-checkbox-checked-border-color: var(--px-color-warning-dark);
+}
+.px-checkbox--warning.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark)
+    );
+}
+.px-checkbox--danger {
+    --px-checkbox-checked-color: var(--px-color-danger);
+    --px-checkbox-checked-border-color: var(--px-color-danger-dark);
+}
+.px-checkbox--danger.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark)
+    );
+}
+/* Dark mode bevel adjustment */
+html.dark .px-checkbox {
+  --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
+}
+html.dark .px-checkbox.is-checked {
+  --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-checkbox-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
+}
+/* Checkbox Group */
+.px-checkbox-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}