@adnap/krysalicss 0.0.1

package/dist/element/button.css

@@ -0,0 +1,250 @@
+:root {
+  --kc-bg: #ffffff;
+  --kc-fg: #27282b;
+  --kc-link: #1a6347;
+  --kc-link-hover: #525a22;
+  --kc-link-visited: #8c351a;
+  --kc-border-radius: 5px;
+  --kc-card-bg: #ffffff;
+  --kc-card-fg: #27282b;
+  --kc-focus-ring: #1a6347;
+  --kc-default-bg: #ffffff;
+  --kc-default-fg: #27282b;
+  --kc-primary-bg: #247d59;
+  --kc-primary-fg: #ffffff;
+  --kc-warning-bg: #7a4f10;
+  --kc-warning-fg: #ffffff;
+  --kc-danger-bg: #8c351a;
+  --kc-danger-fg: #ffffff;
+  --kc-success-bg: #525a22;
+  --kc-success-fg: #ffffff;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --kc-bg: #ffffff;
+    --kc-fg: #27282b;
+    --kc-link: #1a6347;
+    --kc-link-hover: #525a22;
+    --kc-link-visited: #8c351a;
+    --kc-border-radius: 5px;
+    --kc-card-bg: #ffffff;
+    --kc-card-fg: #27282b;
+    --kc-focus-ring: #1a6347;
+    --kc-default-bg: #ffffff;
+    --kc-default-fg: #27282b;
+    --kc-primary-bg: #247d59;
+    --kc-primary-fg: #ffffff;
+    --kc-warning-bg: #7a4f10;
+    --kc-warning-fg: #ffffff;
+    --kc-danger-bg: #8c351a;
+    --kc-danger-fg: #ffffff;
+    --kc-success-bg: #525a22;
+    --kc-success-fg: #ffffff;
+  }
+}
+:root.theme-light {
+  --kc-bg: #ffffff;
+  --kc-fg: #27282b;
+  --kc-link: #1a6347;
+  --kc-link-hover: #525a22;
+  --kc-link-visited: #8c351a;
+  --kc-border-radius: 5px;
+  --kc-card-bg: #ffffff;
+  --kc-card-fg: #27282b;
+  --kc-focus-ring: #1a6347;
+  --kc-default-bg: #ffffff;
+  --kc-default-fg: #27282b;
+  --kc-primary-bg: #247d59;
+  --kc-primary-fg: #ffffff;
+  --kc-warning-bg: #7a4f10;
+  --kc-warning-fg: #ffffff;
+  --kc-danger-bg: #8c351a;
+  --kc-danger-fg: #ffffff;
+  --kc-success-bg: #525a22;
+  --kc-success-fg: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --kc-bg: #121417;
+    --kc-fg: #e6e8eb;
+    --kc-link: #6bd1a7;
+    --kc-link-hover: #9ce3c2;
+    --kc-link-visited: #c8a8e0;
+    --kc-border-radius: 5px;
+    --kc-card-bg: #1b1e22;
+    --kc-card-fg: #e6e8eb;
+    --kc-focus-ring: #6bd1a7;
+    --kc-modal-backdrop: color-mix(in srgb, #e6e8eb 22%, transparent);
+    --kc-default-bg: #1b1e22;
+    --kc-default-fg: #e6e8eb;
+    --kc-primary-bg: #1f6e51;
+    --kc-primary-fg: #f4f7fb;
+    --kc-warning-bg: #b8991e;
+    --kc-warning-fg: #1b1b13;
+    --kc-danger-bg: #a2481a;
+    --kc-danger-fg: #fff6f0;
+    --kc-success-bg: #5c6529;
+    --kc-success-fg: #f3f6e5;
+  }
+}
+.theme-dark {
+  --kc-bg: #121417;
+  --kc-fg: #e6e8eb;
+  --kc-link: #6bd1a7;
+  --kc-link-hover: #9ce3c2;
+  --kc-link-visited: #c8a8e0;
+  --kc-border-radius: 5px;
+  --kc-card-bg: #1b1e22;
+  --kc-card-fg: #e6e8eb;
+  --kc-focus-ring: #6bd1a7;
+  --kc-modal-backdrop: color-mix(in srgb, #e6e8eb 22%, transparent);
+  --kc-default-bg: #1b1e22;
+  --kc-default-fg: #e6e8eb;
+  --kc-primary-bg: #1f6e51;
+  --kc-primary-fg: #f4f7fb;
+  --kc-warning-bg: #b8991e;
+  --kc-warning-fg: #1b1b13;
+  --kc-danger-bg: #a2481a;
+  --kc-danger-fg: #fff6f0;
+  --kc-success-bg: #5c6529;
+  --kc-success-fg: #f3f6e5;
+}
+
+button, .button {
+  background-color: #ffffff;
+  background-color: var(--kc-default-bg, #ffffff);
+  color: #27282b;
+  color: var(--kc-default-fg, #27282b);
+  border: 1px solid transparent;
+  padding: 0.625rem 1rem;
+  min-width: 2.75rem;
+  border-radius: 5px;
+  cursor: pointer;
+  text-decoration: none;
+}
+button:focus-visible, .button:focus-visible {
+  outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
+  outline-offset: 2px;
+}
+button:hover, .button:hover {
+  filter: brightness(0.95);
+}
+button:disabled, .button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+button:disabled:hover, .button:disabled:hover {
+  filter: none;
+}
+button.is-default, .button.is-default {
+  background-color: #ffffff;
+  background-color: var(--kc-default-bg, #ffffff);
+  color: #27282b;
+  color: var(--kc-default-fg, #27282b);
+}
+button.is-primary, .button.is-primary {
+  background-color: #247d59;
+  background-color: var(--kc-primary-bg, #247d59);
+  color: #ffffff;
+  color: var(--kc-primary-fg, #ffffff);
+}
+button.is-primary.is-inverted, .button.is-primary.is-inverted {
+  background-color: #ffffff;
+  background-color: var(--kc-bg, #ffffff);
+  color: #247d59;
+  color: var(--kc-primary-bg, #247d59);
+}
+button.is-primary.is-outlined, .button.is-primary.is-outlined {
+  background: transparent;
+  color: #247d59;
+  border: 1px solid #247d59;
+}
+button.is-warning, .button.is-warning {
+  background-color: #7a4f10;
+  background-color: var(--kc-warning-bg, #7a4f10);
+  color: #ffffff;
+  color: var(--kc-warning-fg, #ffffff);
+}
+button.is-warning.is-inverted, .button.is-warning.is-inverted {
+  background-color: #ffffff;
+  background-color: var(--kc-bg, #ffffff);
+  color: #7a4f10;
+  color: var(--kc-warning-bg, #7a4f10);
+}
+button.is-warning.is-outlined, .button.is-warning.is-outlined {
+  background: transparent;
+  color: #7a4f10;
+  border: 1px solid #7a4f10;
+}
+button.is-danger, .button.is-danger {
+  background-color: #8c351a;
+  background-color: var(--kc-danger-bg, #8c351a);
+  color: #ffffff;
+  color: var(--kc-danger-fg, #ffffff);
+}
+button.is-danger.is-inverted, .button.is-danger.is-inverted {
+  background-color: #ffffff;
+  background-color: var(--kc-bg, #ffffff);
+  color: #8c351a;
+  color: var(--kc-danger-bg, #8c351a);
+}
+button.is-danger.is-outlined, .button.is-danger.is-outlined {
+  background: transparent;
+  color: #8c351a;
+  border: 1px solid #8c351a;
+}
+button.is-success, .button.is-success {
+  background-color: #525a22;
+  background-color: var(--kc-success-bg, #525a22);
+  color: #ffffff;
+  color: var(--kc-success-fg, #ffffff);
+}
+button.is-success.is-inverted, .button.is-success.is-inverted {
+  background-color: #ffffff;
+  background-color: var(--kc-bg, #ffffff);
+  color: #525a22;
+  color: var(--kc-success-bg, #525a22);
+}
+button.is-success.is-outlined, .button.is-success.is-outlined {
+  background: transparent;
+  color: #525a22;
+  border: 1px solid #525a22;
+}
+button.is-inverted, .button.is-inverted {
+  background-color: #27282b;
+  background-color: var(--kc-default-fg, #27282b);
+  color: #ffffff;
+  color: var(--kc-default-bg, #ffffff);
+}
+button.is-outlined, .button.is-outlined {
+  background: transparent;
+  border-color: #27282b;
+  border-color: var(--kc-default-fg, #27282b);
+}
+button.is-link, .button.is-link {
+  background: transparent;
+  border: 1px solid transparent;
+  cursor: pointer;
+  text-decoration: underline;
+  color: #27282b;
+  color: var(--kc-link, #27282b);
+}
+button.is-link:hover, .button.is-link:hover {
+  color: #27282b;
+  color: var(--kc-link-hover, #27282b);
+}
+button.is-link:visited, .button.is-link:visited {
+  color: #27282b;
+  color: var(--kc-link-visited, #27282b);
+}
+button.is-link:hover, .button.is-link:hover {
+  filter: none;
+}
+@media (forced-colors: active) {
+  button:hover, .button:hover {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}

package/dist/element/button.min.css

@@ -0,0 +1 @@
+:root{--kc-bg:#fff;--kc-fg:#27282b;--kc-link:#1a6347;--kc-link-hover:#525a22;--kc-link-visited:#8c351a;--kc-border-radius:5px;--kc-card-bg:#fff;--kc-card-fg:#27282b;--kc-focus-ring:#1a6347;--kc-default-bg:#fff;--kc-default-fg:#27282b;--kc-primary-bg:#247d59;--kc-primary-fg:#fff;--kc-warning-bg:#7a4f10;--kc-warning-fg:#fff;--kc-danger-bg:#8c351a;--kc-danger-fg:#fff;--kc-success-bg:#525a22;--kc-success-fg:#fff}@media(prefers-color-scheme:light){:root{--kc-bg:#fff;--kc-fg:#27282b;--kc-link:#1a6347;--kc-link-hover:#525a22;--kc-link-visited:#8c351a;--kc-border-radius:5px;--kc-card-bg:#fff;--kc-card-fg:#27282b;--kc-focus-ring:#1a6347;--kc-default-bg:#fff;--kc-default-fg:#27282b;--kc-primary-bg:#247d59;--kc-primary-fg:#fff;--kc-warning-bg:#7a4f10;--kc-warning-fg:#fff;--kc-danger-bg:#8c351a;--kc-danger-fg:#fff;--kc-success-bg:#525a22;--kc-success-fg:#fff}}:root.theme-light{--kc-bg:#fff;--kc-fg:#27282b;--kc-link:#1a6347;--kc-link-hover:#525a22;--kc-link-visited:#8c351a;--kc-border-radius:5px;--kc-card-bg:#fff;--kc-card-fg:#27282b;--kc-focus-ring:#1a6347;--kc-default-bg:#fff;--kc-default-fg:#27282b;--kc-primary-bg:#247d59;--kc-primary-fg:#fff;--kc-warning-bg:#7a4f10;--kc-warning-fg:#fff;--kc-danger-bg:#8c351a;--kc-danger-fg:#fff;--kc-success-bg:#525a22;--kc-success-fg:#fff}@media(prefers-color-scheme:dark){:root{--kc-bg:#121417;--kc-fg:#e6e8eb;--kc-link:#6bd1a7;--kc-link-hover:#9ce3c2;--kc-link-visited:#c8a8e0;--kc-border-radius:5px;--kc-card-bg:#1b1e22;--kc-card-fg:#e6e8eb;--kc-focus-ring:#6bd1a7;--kc-modal-backdrop:color-mix(in srgb,#e6e8eb 22%,#0000);--kc-default-bg:#1b1e22;--kc-default-fg:#e6e8eb;--kc-primary-bg:#1f6e51;--kc-primary-fg:#f4f7fb;--kc-warning-bg:#b8991e;--kc-warning-fg:#1b1b13;--kc-danger-bg:#a2481a;--kc-danger-fg:#fff6f0;--kc-success-bg:#5c6529;--kc-success-fg:#f3f6e5}}.theme-dark{--kc-bg:#121417;--kc-fg:#e6e8eb;--kc-link:#6bd1a7;--kc-link-hover:#9ce3c2;--kc-link-visited:#c8a8e0;--kc-border-radius:5px;--kc-card-bg:#1b1e22;--kc-card-fg:#e6e8eb;--kc-focus-ring:#6bd1a7;--kc-modal-backdrop:color-mix(in srgb,#e6e8eb 22%,#0000);--kc-default-bg:#1b1e22;--kc-default-fg:#e6e8eb;--kc-primary-bg:#1f6e51;--kc-primary-fg:#f4f7fb;--kc-warning-bg:#b8991e;--kc-warning-fg:#1b1b13;--kc-danger-bg:#a2481a;--kc-danger-fg:#fff6f0;--kc-success-bg:#5c6529;--kc-success-fg:#f3f6e5}.button,button{background-color:#fff;background-color:var(--kc-default-bg,#fff);color:#27282b;color:var(--kc-default-fg,#27282b);border:1px solid #0000;padding:.625rem 1rem;min-width:2.75rem;border-radius:5px;cursor:pointer;text-decoration:none}.button:focus-visible,button:focus-visible{outline:2px solid var(--kc-focus-ring,var(--kc-fg,currentColor));outline-offset:2px}.button:hover,button:hover{filter:brightness(.95)}.button:disabled,button:disabled{cursor:not-allowed;opacity:.6}.button:disabled:hover,button:disabled:hover{filter:none}.button.is-default,button.is-default{background-color:#fff;background-color:var(--kc-default-bg,#fff);color:#27282b;color:var(--kc-default-fg,#27282b)}.button.is-primary,button.is-primary{background-color:#247d59;background-color:var(--kc-primary-bg,#247d59);color:#fff;color:var(--kc-primary-fg,#fff)}.button.is-primary.is-inverted,button.is-primary.is-inverted{background-color:#fff;background-color:var(--kc-bg,#fff);color:#247d59;color:var(--kc-primary-bg,#247d59)}.button.is-primary.is-outlined,button.is-primary.is-outlined{background:#0000;color:#247d59;border:1px solid #247d59}.button.is-warning,button.is-warning{background-color:#7a4f10;background-color:var(--kc-warning-bg,#7a4f10);color:#fff;color:var(--kc-warning-fg,#fff)}.button.is-warning.is-inverted,button.is-warning.is-inverted{background-color:#fff;background-color:var(--kc-bg,#fff);color:#7a4f10;color:var(--kc-warning-bg,#7a4f10)}.button.is-warning.is-outlined,button.is-warning.is-outlined{background:#0000;color:#7a4f10;border:1px solid #7a4f10}.button.is-danger,button.is-danger{background-color:#8c351a;background-color:var(--kc-danger-bg,#8c351a);color:#fff;color:var(--kc-danger-fg,#fff)}.button.is-danger.is-inverted,button.is-danger.is-inverted{background-color:#fff;background-color:var(--kc-bg,#fff);color:#8c351a;color:var(--kc-danger-bg,#8c351a)}.button.is-danger.is-outlined,button.is-danger.is-outlined{background:#0000;color:#8c351a;border:1px solid #8c351a}.button.is-success,button.is-success{background-color:#525a22;background-color:var(--kc-success-bg,#525a22);color:#fff;color:var(--kc-success-fg,#fff)}.button.is-success.is-inverted,button.is-success.is-inverted{background-color:#fff;background-color:var(--kc-bg,#fff);color:#525a22;color:var(--kc-success-bg,#525a22)}.button.is-success.is-outlined,button.is-success.is-outlined{background:#0000;color:#525a22;border:1px solid #525a22}.button.is-inverted,button.is-inverted{background-color:#27282b;background-color:var(--kc-default-fg,#27282b);color:#fff;color:var(--kc-default-bg,#fff)}.button.is-outlined,button.is-outlined{background:#0000;border-color:#27282b;border-color:var(--kc-default-fg,#27282b)}.button.is-link,button.is-link{background:#0000;border:1px solid #0000;cursor:pointer;text-decoration:underline;color:#27282b;color:var(--kc-link,#27282b)}.button.is-link:hover,button.is-link:hover{color:#27282b;color:var(--kc-link-hover,#27282b)}.button.is-link:visited,button.is-link:visited{color:#27282b;color:var(--kc-link-visited,#27282b)}.button.is-link:hover,button.is-link:hover{filter:none}@media(forced-colors:active){.button:hover,button:hover{outline:2px solid Highlight;outline-offset:2px}}

package/dist/element/checkbox.css

@@ -0,0 +1,149 @@
+:root {
+  --kc-bg: #ffffff;
+  --kc-fg: #27282b;
+  --kc-link: #1a6347;
+  --kc-link-hover: #525a22;
+  --kc-link-visited: #8c351a;
+  --kc-border-radius: 5px;
+  --kc-card-bg: #ffffff;
+  --kc-card-fg: #27282b;
+  --kc-focus-ring: #1a6347;
+  --kc-default-bg: #ffffff;
+  --kc-default-fg: #27282b;
+  --kc-primary-bg: #247d59;
+  --kc-primary-fg: #ffffff;
+  --kc-warning-bg: #7a4f10;
+  --kc-warning-fg: #ffffff;
+  --kc-danger-bg: #8c351a;
+  --kc-danger-fg: #ffffff;
+  --kc-success-bg: #525a22;
+  --kc-success-fg: #ffffff;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --kc-bg: #ffffff;
+    --kc-fg: #27282b;
+    --kc-link: #1a6347;
+    --kc-link-hover: #525a22;
+    --kc-link-visited: #8c351a;
+    --kc-border-radius: 5px;
+    --kc-card-bg: #ffffff;
+    --kc-card-fg: #27282b;
+    --kc-focus-ring: #1a6347;
+    --kc-default-bg: #ffffff;
+    --kc-default-fg: #27282b;
+    --kc-primary-bg: #247d59;
+    --kc-primary-fg: #ffffff;
+    --kc-warning-bg: #7a4f10;
+    --kc-warning-fg: #ffffff;
+    --kc-danger-bg: #8c351a;
+    --kc-danger-fg: #ffffff;
+    --kc-success-bg: #525a22;
+    --kc-success-fg: #ffffff;
+  }
+}
+:root.theme-light {
+  --kc-bg: #ffffff;
+  --kc-fg: #27282b;
+  --kc-link: #1a6347;
+  --kc-link-hover: #525a22;
+  --kc-link-visited: #8c351a;
+  --kc-border-radius: 5px;
+  --kc-card-bg: #ffffff;
+  --kc-card-fg: #27282b;
+  --kc-focus-ring: #1a6347;
+  --kc-default-bg: #ffffff;
+  --kc-default-fg: #27282b;
+  --kc-primary-bg: #247d59;
+  --kc-primary-fg: #ffffff;
+  --kc-warning-bg: #7a4f10;
+  --kc-warning-fg: #ffffff;
+  --kc-danger-bg: #8c351a;
+  --kc-danger-fg: #ffffff;
+  --kc-success-bg: #525a22;
+  --kc-success-fg: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --kc-bg: #121417;
+    --kc-fg: #e6e8eb;
+    --kc-link: #6bd1a7;
+    --kc-link-hover: #9ce3c2;
+    --kc-link-visited: #c8a8e0;
+    --kc-border-radius: 5px;
+    --kc-card-bg: #1b1e22;
+    --kc-card-fg: #e6e8eb;
+    --kc-focus-ring: #6bd1a7;
+    --kc-modal-backdrop: color-mix(in srgb, #e6e8eb 22%, transparent);
+    --kc-default-bg: #1b1e22;
+    --kc-default-fg: #e6e8eb;
+    --kc-primary-bg: #1f6e51;
+    --kc-primary-fg: #f4f7fb;
+    --kc-warning-bg: #b8991e;
+    --kc-warning-fg: #1b1b13;
+    --kc-danger-bg: #a2481a;
+    --kc-danger-fg: #fff6f0;
+    --kc-success-bg: #5c6529;
+    --kc-success-fg: #f3f6e5;
+  }
+}
+.theme-dark {
+  --kc-bg: #121417;
+  --kc-fg: #e6e8eb;
+  --kc-link: #6bd1a7;
+  --kc-link-hover: #9ce3c2;
+  --kc-link-visited: #c8a8e0;
+  --kc-border-radius: 5px;
+  --kc-card-bg: #1b1e22;
+  --kc-card-fg: #e6e8eb;
+  --kc-focus-ring: #6bd1a7;
+  --kc-modal-backdrop: color-mix(in srgb, #e6e8eb 22%, transparent);
+  --kc-default-bg: #1b1e22;
+  --kc-default-fg: #e6e8eb;
+  --kc-primary-bg: #1f6e51;
+  --kc-primary-fg: #f4f7fb;
+  --kc-warning-bg: #b8991e;
+  --kc-warning-fg: #1b1b13;
+  --kc-danger-bg: #a2481a;
+  --kc-danger-fg: #fff6f0;
+  --kc-success-bg: #5c6529;
+  --kc-success-fg: #f3f6e5;
+}
+
+input[type=checkbox]:not(.switch) {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
+  border-radius: 3px;
+  background-color: transparent;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+input[type=checkbox]:not(.switch):checked {
+  background-color: var(--kc-primary-bg, currentColor);
+  border-color: var(--kc-primary-bg, currentColor);
+  color: var(--kc-primary-fg, currentColor);
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.5l2.5 2.5 4.5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 80% auto;
+}
+input[type=checkbox]:not(.switch):focus-visible {
+  outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
+  outline-offset: 2px;
+}
+input[type=checkbox]:not(.switch):user-invalid, input[type=checkbox]:not(.switch)[aria-invalid=true] {
+  border-color: var(--kc-danger-bg, currentColor);
+}
+input[type=checkbox]:not(.switch):disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/dist/element/checkbox.min.css

@@ -0,0 +1 @@
+:root{--kc-bg:#fff;--kc-fg:#27282b;--kc-link:#1a6347;--kc-link-hover:#525a22;--kc-link-visited:#8c351a;--kc-border-radius:5px;--kc-card-bg:#fff;--kc-card-fg:#27282b;--kc-focus-ring:#1a6347;--kc-default-bg:#fff;--kc-default-fg:#27282b;--kc-primary-bg:#247d59;--kc-primary-fg:#fff;--kc-warning-bg:#7a4f10;--kc-warning-fg:#fff;--kc-danger-bg:#8c351a;--kc-danger-fg:#fff;--kc-success-bg:#525a22;--kc-success-fg:#fff}@media(prefers-color-scheme:light){:root{--kc-bg:#fff;--kc-fg:#27282b;--kc-link:#1a6347;--kc-link-hover:#525a22;--kc-link-visited:#8c351a;--kc-border-radius:5px;--kc-card-bg:#fff;--kc-card-fg:#27282b;--kc-focus-ring:#1a6347;--kc-default-bg:#fff;--kc-default-fg:#27282b;--kc-primary-bg:#247d59;--kc-primary-fg:#fff;--kc-warning-bg:#7a4f10;--kc-warning-fg:#fff;--kc-danger-bg:#8c351a;--kc-danger-fg:#fff;--kc-success-bg:#525a22;--kc-success-fg:#fff}}:root.theme-light{--kc-bg:#fff;--kc-fg:#27282b;--kc-link:#1a6347;--kc-link-hover:#525a22;--kc-link-visited:#8c351a;--kc-border-radius:5px;--kc-card-bg:#fff;--kc-card-fg:#27282b;--kc-focus-ring:#1a6347;--kc-default-bg:#fff;--kc-default-fg:#27282b;--kc-primary-bg:#247d59;--kc-primary-fg:#fff;--kc-warning-bg:#7a4f10;--kc-warning-fg:#fff;--kc-danger-bg:#8c351a;--kc-danger-fg:#fff;--kc-success-bg:#525a22;--kc-success-fg:#fff}@media(prefers-color-scheme:dark){:root{--kc-bg:#121417;--kc-fg:#e6e8eb;--kc-link:#6bd1a7;--kc-link-hover:#9ce3c2;--kc-link-visited:#c8a8e0;--kc-border-radius:5px;--kc-card-bg:#1b1e22;--kc-card-fg:#e6e8eb;--kc-focus-ring:#6bd1a7;--kc-modal-backdrop:color-mix(in srgb,#e6e8eb 22%,#0000);--kc-default-bg:#1b1e22;--kc-default-fg:#e6e8eb;--kc-primary-bg:#1f6e51;--kc-primary-fg:#f4f7fb;--kc-warning-bg:#b8991e;--kc-warning-fg:#1b1b13;--kc-danger-bg:#a2481a;--kc-danger-fg:#fff6f0;--kc-success-bg:#5c6529;--kc-success-fg:#f3f6e5}}.theme-dark{--kc-bg:#121417;--kc-fg:#e6e8eb;--kc-link:#6bd1a7;--kc-link-hover:#9ce3c2;--kc-link-visited:#c8a8e0;--kc-border-radius:5px;--kc-card-bg:#1b1e22;--kc-card-fg:#e6e8eb;--kc-focus-ring:#6bd1a7;--kc-modal-backdrop:color-mix(in srgb,#e6e8eb 22%,#0000);--kc-default-bg:#1b1e22;--kc-default-fg:#e6e8eb;--kc-primary-bg:#1f6e51;--kc-primary-fg:#f4f7fb;--kc-warning-bg:#b8991e;--kc-warning-fg:#1b1b13;--kc-danger-bg:#a2481a;--kc-danger-fg:#fff6f0;--kc-success-bg:#5c6529;--kc-success-fg:#f3f6e5}input[type=checkbox]:not(.switch){appearance:none;-webkit-appearance:none;-moz-appearance:none;display:inline-block;width:1rem;height:1rem;margin:0;padding:0;border:1px solid color-mix(in srgb,currentcolor 50%,#0000);border-radius:3px;background-color:#0000;vertical-align:middle;flex-shrink:0}input[type=checkbox]:not(.switch):checked{background-color:var(--kc-primary-bg,currentColor);border-color:var(--kc-primary-bg,currentColor);color:var(--kc-primary-fg,currentColor);background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.5l2.5 2.5 4.5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');background-repeat:no-repeat;background-position:50%;background-size:80% auto}input[type=checkbox]:not(.switch):focus-visible{outline:2px solid var(--kc-focus-ring,var(--kc-fg,currentColor));outline-offset:2px}input[type=checkbox]:not(.switch):user-invalid,input[type=checkbox]:not(.switch)[aria-invalid=true]{border-color:var(--kc-danger-bg,currentColor)}input[type=checkbox]:not(.switch):disabled{cursor:not-allowed;opacity:.6}

package/dist/element/file.css

@@ -0,0 +1,148 @@
+:root {
+  --kc-bg: #ffffff;
+  --kc-fg: #27282b;
+  --kc-link: #1a6347;
+  --kc-link-hover: #525a22;
+  --kc-link-visited: #8c351a;
+  --kc-border-radius: 5px;
+  --kc-card-bg: #ffffff;
+  --kc-card-fg: #27282b;
+  --kc-focus-ring: #1a6347;
+  --kc-default-bg: #ffffff;
+  --kc-default-fg: #27282b;
+  --kc-primary-bg: #247d59;
+  --kc-primary-fg: #ffffff;
+  --kc-warning-bg: #7a4f10;
+  --kc-warning-fg: #ffffff;
+  --kc-danger-bg: #8c351a;
+  --kc-danger-fg: #ffffff;
+  --kc-success-bg: #525a22;
+  --kc-success-fg: #ffffff;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --kc-bg: #ffffff;
+    --kc-fg: #27282b;
+    --kc-link: #1a6347;
+    --kc-link-hover: #525a22;
+    --kc-link-visited: #8c351a;
+    --kc-border-radius: 5px;
+    --kc-card-bg: #ffffff;
+    --kc-card-fg: #27282b;
+    --kc-focus-ring: #1a6347;
+    --kc-default-bg: #ffffff;
+    --kc-default-fg: #27282b;
+    --kc-primary-bg: #247d59;
+    --kc-primary-fg: #ffffff;
+    --kc-warning-bg: #7a4f10;
+    --kc-warning-fg: #ffffff;
+    --kc-danger-bg: #8c351a;
+    --kc-danger-fg: #ffffff;
+    --kc-success-bg: #525a22;
+    --kc-success-fg: #ffffff;
+  }
+}
+:root.theme-light {
+  --kc-bg: #ffffff;
+  --kc-fg: #27282b;
+  --kc-link: #1a6347;
+  --kc-link-hover: #525a22;
+  --kc-link-visited: #8c351a;
+  --kc-border-radius: 5px;
+  --kc-card-bg: #ffffff;
+  --kc-card-fg: #27282b;
+  --kc-focus-ring: #1a6347;
+  --kc-default-bg: #ffffff;
+  --kc-default-fg: #27282b;
+  --kc-primary-bg: #247d59;
+  --kc-primary-fg: #ffffff;
+  --kc-warning-bg: #7a4f10;
+  --kc-warning-fg: #ffffff;
+  --kc-danger-bg: #8c351a;
+  --kc-danger-fg: #ffffff;
+  --kc-success-bg: #525a22;
+  --kc-success-fg: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --kc-bg: #121417;
+    --kc-fg: #e6e8eb;
+    --kc-link: #6bd1a7;
+    --kc-link-hover: #9ce3c2;
+    --kc-link-visited: #c8a8e0;
+    --kc-border-radius: 5px;
+    --kc-card-bg: #1b1e22;
+    --kc-card-fg: #e6e8eb;
+    --kc-focus-ring: #6bd1a7;
+    --kc-modal-backdrop: color-mix(in srgb, #e6e8eb 22%, transparent);
+    --kc-default-bg: #1b1e22;
+    --kc-default-fg: #e6e8eb;
+    --kc-primary-bg: #1f6e51;
+    --kc-primary-fg: #f4f7fb;
+    --kc-warning-bg: #b8991e;
+    --kc-warning-fg: #1b1b13;
+    --kc-danger-bg: #a2481a;
+    --kc-danger-fg: #fff6f0;
+    --kc-success-bg: #5c6529;
+    --kc-success-fg: #f3f6e5;
+  }
+}
+.theme-dark {
+  --kc-bg: #121417;
+  --kc-fg: #e6e8eb;
+  --kc-link: #6bd1a7;
+  --kc-link-hover: #9ce3c2;
+  --kc-link-visited: #c8a8e0;
+  --kc-border-radius: 5px;
+  --kc-card-bg: #1b1e22;
+  --kc-card-fg: #e6e8eb;
+  --kc-focus-ring: #6bd1a7;
+  --kc-modal-backdrop: color-mix(in srgb, #e6e8eb 22%, transparent);
+  --kc-default-bg: #1b1e22;
+  --kc-default-fg: #e6e8eb;
+  --kc-primary-bg: #1f6e51;
+  --kc-primary-fg: #f4f7fb;
+  --kc-warning-bg: #b8991e;
+  --kc-warning-fg: #1b1b13;
+  --kc-danger-bg: #a2481a;
+  --kc-danger-fg: #fff6f0;
+  --kc-success-bg: #5c6529;
+  --kc-success-fg: #f3f6e5;
+}
+
+input[type=file] {
+  background-color: transparent;
+  background-color: var(--kc-input-bg, transparent);
+  color: currentColor;
+  color: var(--kc-input-fg, currentColor);
+  display: inline-block;
+  max-width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
+  border-radius: 5px;
+  font: inherit;
+  line-height: 1.4;
+  cursor: pointer;
+}
+input[type=file]:focus-visible {
+  outline: 2px solid var(--kc-fg, currentColor);
+  outline-offset: 2px;
+  border-color: var(--kc-fg, currentColor);
+}
+input[type=file]:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+input[type=file]::file-selector-button {
+  margin-inline-end: 0.75rem;
+  padding: 0.25rem 0.75rem;
+  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
+  border-radius: 5px;
+  background-color: var(--kc-default-bg, transparent);
+  color: var(--kc-default-fg, currentColor);
+  font: inherit;
+  cursor: inherit;
+}

package/dist/element/file.min.css

@@ -0,0 +1 @@
+:root{--kc-bg:#fff;--kc-fg:#27282b;--kc-link:#1a6347;--kc-link-hover:#525a22;--kc-link-visited:#8c351a;--kc-border-radius:5px;--kc-card-bg:#fff;--kc-card-fg:#27282b;--kc-focus-ring:#1a6347;--kc-default-bg:#fff;--kc-default-fg:#27282b;--kc-primary-bg:#247d59;--kc-primary-fg:#fff;--kc-warning-bg:#7a4f10;--kc-warning-fg:#fff;--kc-danger-bg:#8c351a;--kc-danger-fg:#fff;--kc-success-bg:#525a22;--kc-success-fg:#fff}@media(prefers-color-scheme:light){:root{--kc-bg:#fff;--kc-fg:#27282b;--kc-link:#1a6347;--kc-link-hover:#525a22;--kc-link-visited:#8c351a;--kc-border-radius:5px;--kc-card-bg:#fff;--kc-card-fg:#27282b;--kc-focus-ring:#1a6347;--kc-default-bg:#fff;--kc-default-fg:#27282b;--kc-primary-bg:#247d59;--kc-primary-fg:#fff;--kc-warning-bg:#7a4f10;--kc-warning-fg:#fff;--kc-danger-bg:#8c351a;--kc-danger-fg:#fff;--kc-success-bg:#525a22;--kc-success-fg:#fff}}:root.theme-light{--kc-bg:#fff;--kc-fg:#27282b;--kc-link:#1a6347;--kc-link-hover:#525a22;--kc-link-visited:#8c351a;--kc-border-radius:5px;--kc-card-bg:#fff;--kc-card-fg:#27282b;--kc-focus-ring:#1a6347;--kc-default-bg:#fff;--kc-default-fg:#27282b;--kc-primary-bg:#247d59;--kc-primary-fg:#fff;--kc-warning-bg:#7a4f10;--kc-warning-fg:#fff;--kc-danger-bg:#8c351a;--kc-danger-fg:#fff;--kc-success-bg:#525a22;--kc-success-fg:#fff}@media(prefers-color-scheme:dark){:root{--kc-bg:#121417;--kc-fg:#e6e8eb;--kc-link:#6bd1a7;--kc-link-hover:#9ce3c2;--kc-link-visited:#c8a8e0;--kc-border-radius:5px;--kc-card-bg:#1b1e22;--kc-card-fg:#e6e8eb;--kc-focus-ring:#6bd1a7;--kc-modal-backdrop:color-mix(in srgb,#e6e8eb 22%,#0000);--kc-default-bg:#1b1e22;--kc-default-fg:#e6e8eb;--kc-primary-bg:#1f6e51;--kc-primary-fg:#f4f7fb;--kc-warning-bg:#b8991e;--kc-warning-fg:#1b1b13;--kc-danger-bg:#a2481a;--kc-danger-fg:#fff6f0;--kc-success-bg:#5c6529;--kc-success-fg:#f3f6e5}}.theme-dark{--kc-bg:#121417;--kc-fg:#e6e8eb;--kc-link:#6bd1a7;--kc-link-hover:#9ce3c2;--kc-link-visited:#c8a8e0;--kc-border-radius:5px;--kc-card-bg:#1b1e22;--kc-card-fg:#e6e8eb;--kc-focus-ring:#6bd1a7;--kc-modal-backdrop:color-mix(in srgb,#e6e8eb 22%,#0000);--kc-default-bg:#1b1e22;--kc-default-fg:#e6e8eb;--kc-primary-bg:#1f6e51;--kc-primary-fg:#f4f7fb;--kc-warning-bg:#b8991e;--kc-warning-fg:#1b1b13;--kc-danger-bg:#a2481a;--kc-danger-fg:#fff6f0;--kc-success-bg:#5c6529;--kc-success-fg:#f3f6e5}input[type=file]{background-color:#0000;background-color:var(--kc-input-bg,#0000);color:currentColor;color:var(--kc-input-fg,currentColor);display:inline-block;max-width:100%;padding:.5rem .75rem;border:1px solid color-mix(in srgb,currentcolor 50%,#0000);border-radius:5px;font:inherit;line-height:1.4;cursor:pointer}input[type=file]:focus-visible{outline:2px solid var(--kc-fg,currentColor);outline-offset:2px;border-color:var(--kc-fg,currentColor)}input[type=file]:disabled{cursor:not-allowed;opacity:.6}input[type=file]::file-selector-button{margin-inline-end:.75rem;padding:.25rem .75rem;border:1px solid color-mix(in srgb,currentcolor 50%,#0000);border-radius:5px;background-color:var(--kc-default-bg,#0000);color:var(--kc-default-fg,currentColor);font:inherit;cursor:inherit}