@adnap/krysalicss 0.0.1 → 0.1.0

package/dist/module/toast.css

@@ -0,0 +1,307 @@
+: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;
+}
+
+.toast-container {
+  position: fixed;
+  z-index: 1090;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: 420px;
+  padding: 1rem;
+  pointer-events: none;
+}
+.toast-container.is-top-start {
+  inset-block-start: 0;
+  inset-block-end: auto;
+  inset-inline-start: 0;
+  inset-inline-end: auto;
+  align-items: flex-start;
+}
+.toast-container.is-top-center {
+  inset-block-start: 0;
+  inset-block-end: auto;
+  inset-inline-start: 50%;
+  inset-inline-end: auto;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.toast-container.is-top-end {
+  inset-block-start: 0;
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+  align-items: flex-end;
+}
+.toast-container.is-bottom-start {
+  inset-block-start: auto;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: auto;
+  align-items: flex-start;
+}
+.toast-container.is-bottom-center {
+  inset-block-start: auto;
+  inset-block-end: 0;
+  inset-inline-start: 50%;
+  inset-inline-end: auto;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.toast-container.is-bottom-end {
+  inset-block-start: auto;
+  inset-block-end: 0;
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+  align-items: flex-end;
+}
+
+.toast {
+  background-color: #ffffff;
+  background-color: var(--kc-toast-bg, #ffffff);
+  color: #27282b;
+  color: var(--kc-toast-fg, #27282b);
+  width: 100%;
+  max-width: 420px;
+  border-radius: 5px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+  pointer-events: auto;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .toast {
+    transition: none;
+  }
+}
+.toast.is-show {
+  opacity: 1;
+}
+.toast[hidden] {
+  display: none;
+}
+.toast:has(.toast__toggle:checked) {
+  display: none;
+}
+.toast:has(.toast__toggle:focus-visible) .toast__dismiss {
+  outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
+  outline-offset: 2px;
+}
+.toast .toast__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+}
+.toast .toast__title {
+  font-weight: 600;
+}
+.toast .toast__dismiss {
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  opacity: 0.6;
+  transition: opacity 120ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .toast .toast__dismiss {
+    transition: none;
+  }
+}
+.toast .toast__dismiss:hover, .toast .toast__dismiss:focus-visible {
+  opacity: 1;
+}
+.toast .toast__dismiss:focus-visible {
+  outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
+  outline-offset: 2px;
+}
+.toast .toast__body {
+  padding: 0.75rem 1rem;
+}
+.toast a {
+  color: currentColor;
+  text-decoration: underline;
+}
+.toast.is-default {
+  background-color: #ffffff;
+  background-color: var(--kc-default-bg, #ffffff);
+  color: #27282b;
+  color: var(--kc-default-fg, #27282b);
+}
+.toast.is-primary {
+  background-color: #247d59;
+  background-color: var(--kc-primary-bg, #247d59);
+  color: #ffffff;
+  color: var(--kc-primary-fg, #ffffff);
+}
+.toast.is-warning {
+  background-color: #7a4f10;
+  background-color: var(--kc-warning-bg, #7a4f10);
+  color: #ffffff;
+  color: var(--kc-warning-fg, #ffffff);
+}
+.toast.is-danger {
+  background-color: #8c351a;
+  background-color: var(--kc-danger-bg, #8c351a);
+  color: #ffffff;
+  color: var(--kc-danger-fg, #ffffff);
+}
+.toast.is-success {
+  background-color: #525a22;
+  background-color: var(--kc-success-bg, #525a22);
+  color: #ffffff;
+  color: var(--kc-success-fg, #ffffff);
+}
+.toast.is-default.is-light {
+  background-color: #ffffff;
+  background-color: var(--kc-default-light-bg, #ffffff);
+  color: #27282b;
+  color: var(--kc-default-light-fg, #27282b);
+}
+.toast.is-primary.is-light {
+  background-color: #247d59;
+  background-color: var(--kc-primary-light-bg, #247d59);
+  color: #ffffff;
+  color: var(--kc-primary-light-fg, #ffffff);
+}
+.toast.is-warning.is-light {
+  background-color: #7a4f10;
+  background-color: var(--kc-warning-light-bg, #7a4f10);
+  color: #ffffff;
+  color: var(--kc-warning-light-fg, #ffffff);
+}
+.toast.is-danger.is-light {
+  background-color: #8c351a;
+  background-color: var(--kc-danger-light-bg, #8c351a);
+  color: #ffffff;
+  color: var(--kc-danger-light-fg, #ffffff);
+}
+.toast.is-success.is-light {
+  background-color: #525a22;
+  background-color: var(--kc-success-light-bg, #525a22);
+  color: #ffffff;
+  color: var(--kc-success-light-fg, #ffffff);
+}
+@media (forced-colors: active) {
+  .toast {
+    border: 1px solid CanvasText;
+  }
+}

package/dist/module/toast.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}.toast-container{position:fixed;z-index:1090;inset-block-start:0;inset-inline-end:0;display:flex;flex-direction:column;gap:.5rem;max-width:420px;padding:1rem;pointer-events:none}.toast-container.is-top-start{inset-inline-start:0;align-items:flex-start}.toast-container.is-top-center,.toast-container.is-top-start{inset-block-start:0;inset-block-end:auto;inset-inline-end:auto}.toast-container.is-top-center{inset-inline-start:50%;transform:translateX(-50%);align-items:center}.toast-container.is-top-end{inset-block-start:0;inset-block-end:auto;inset-inline-start:auto;inset-inline-end:0;align-items:flex-end}.toast-container.is-bottom-start{inset-block-start:auto;inset-block-end:0;inset-inline-start:0;inset-inline-end:auto;align-items:flex-start}.toast-container.is-bottom-center{inset-block-start:auto;inset-block-end:0;inset-inline-start:50%;inset-inline-end:auto;transform:translateX(-50%);align-items:center}.toast-container.is-bottom-end{inset-block-start:auto;inset-block-end:0;inset-inline-start:auto;inset-inline-end:0;align-items:flex-end}.toast{background-color:#fff;background-color:var(--kc-toast-bg,#fff);color:#27282b;color:var(--kc-toast-fg,#27282b);width:100%;max-width:420px;border-radius:5px;box-shadow:0 6px 20px #00000026;pointer-events:auto;opacity:0;transition:opacity .12s ease}@media(prefers-reduced-motion:reduce){.toast{transition:none}}.toast.is-show{opacity:1}.toast:has(.toast__toggle:checked),.toast[hidden]{display:none}.toast:has(.toast__toggle:focus-visible) .toast__dismiss{outline:2px solid var(--kc-focus-ring,var(--kc-fg,currentColor));outline-offset:2px}.toast .toast__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem 1rem}.toast .toast__title{font-weight:600}.toast .toast__dismiss{appearance:none;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;opacity:.6;transition:opacity .12s ease}@media(prefers-reduced-motion:reduce){.toast .toast__dismiss{transition:none}}.toast :is(.toast__dismiss:focus-visible,.toast__dismiss:hover){opacity:1}.toast .toast__dismiss:focus-visible{outline:2px solid var(--kc-focus-ring,var(--kc-fg,currentColor));outline-offset:2px}.toast .toast__body{padding:.75rem 1rem}.toast a{color:currentColor;text-decoration:underline}.toast.is-default{background-color:#fff;background-color:var(--kc-default-bg,#fff);color:#27282b;color:var(--kc-default-fg,#27282b)}.toast.is-primary{background-color:#247d59;background-color:var(--kc-primary-bg,#247d59);color:#fff;color:var(--kc-primary-fg,#fff)}.toast.is-warning{background-color:#7a4f10;background-color:var(--kc-warning-bg,#7a4f10);color:#fff;color:var(--kc-warning-fg,#fff)}.toast.is-danger{background-color:#8c351a;background-color:var(--kc-danger-bg,#8c351a);color:#fff;color:var(--kc-danger-fg,#fff)}.toast.is-success{background-color:#525a22;background-color:var(--kc-success-bg,#525a22);color:#fff;color:var(--kc-success-fg,#fff)}.toast.is-default.is-light{background-color:#fff;background-color:var(--kc-default-light-bg,#fff);color:#27282b;color:var(--kc-default-light-fg,#27282b)}.toast.is-primary.is-light{background-color:#247d59;background-color:var(--kc-primary-light-bg,#247d59);color:#fff;color:var(--kc-primary-light-fg,#fff)}.toast.is-warning.is-light{background-color:#7a4f10;background-color:var(--kc-warning-light-bg,#7a4f10);color:#fff;color:var(--kc-warning-light-fg,#fff)}.toast.is-danger.is-light{background-color:#8c351a;background-color:var(--kc-danger-light-bg,#8c351a);color:#fff;color:var(--kc-danger-light-fg,#fff)}.toast.is-success.is-light{background-color:#525a22;background-color:var(--kc-success-light-bg,#525a22);color:#fff;color:var(--kc-success-light-fg,#fff)}@media(forced-colors:active){.toast{border:1px solid CanvasText}}