@adnap/krysalicss 0.0.1 → 0.1.0

package/dist/element/image.css

@@ -0,0 +1,434 @@
+: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;
+}
+
+.image {
+  position: relative;
+  display: block;
+  max-inline-size: 100%;
+}
+.image > img,
+.image > video,
+.image > iframe,
+.image > picture > img {
+  display: block;
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+.image.is-square {
+  --kc-image-ratio: 1 / 1;
+  aspect-ratio: var(--kc-image-ratio);
+}
+.image.is-square > img,
+.image.is-square > video,
+.image.is-square > iframe,
+.image.is-square > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-1by1 {
+  --kc-image-ratio: 1 / 1;
+  aspect-ratio: var(--kc-image-ratio);
+}
+.image.is-1by1 > img,
+.image.is-1by1 > video,
+.image.is-1by1 > iframe,
+.image.is-1by1 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-5by4 {
+  --kc-image-ratio: 5 / 4;
+  aspect-ratio: var(--kc-image-ratio);
+}
+.image.is-5by4 > img,
+.image.is-5by4 > video,
+.image.is-5by4 > iframe,
+.image.is-5by4 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-4by3 {
+  --kc-image-ratio: 4 / 3;
+  aspect-ratio: var(--kc-image-ratio);
+}
+.image.is-4by3 > img,
+.image.is-4by3 > video,
+.image.is-4by3 > iframe,
+.image.is-4by3 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-3by2 {
+  --kc-image-ratio: 3 / 2;
+  aspect-ratio: var(--kc-image-ratio);
+}
+.image.is-3by2 > img,
+.image.is-3by2 > video,
+.image.is-3by2 > iframe,
+.image.is-3by2 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-16by9 {
+  --kc-image-ratio: 16 / 9;
+  aspect-ratio: var(--kc-image-ratio);
+}
+.image.is-16by9 > img,
+.image.is-16by9 > video,
+.image.is-16by9 > iframe,
+.image.is-16by9 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-21by9 {
+  --kc-image-ratio: 21 / 9;
+  aspect-ratio: var(--kc-image-ratio);
+}
+.image.is-21by9 > img,
+.image.is-21by9 > video,
+.image.is-21by9 > iframe,
+.image.is-21by9 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-2by3 {
+  --kc-image-ratio: 2 / 3;
+  aspect-ratio: var(--kc-image-ratio);
+}
+.image.is-2by3 > img,
+.image.is-2by3 > video,
+.image.is-2by3 > iframe,
+.image.is-2by3 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-3by4 {
+  --kc-image-ratio: 3 / 4;
+  aspect-ratio: var(--kc-image-ratio);
+}
+.image.is-3by4 > img,
+.image.is-3by4 > video,
+.image.is-3by4 > iframe,
+.image.is-3by4 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-9by16 {
+  --kc-image-ratio: 9 / 16;
+  aspect-ratio: var(--kc-image-ratio);
+}
+.image.is-9by16 > img,
+.image.is-9by16 > video,
+.image.is-9by16 > iframe,
+.image.is-9by16 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-16x16 {
+  inline-size: 16px;
+  block-size: 16px;
+  max-inline-size: 16px;
+}
+.image.is-16x16 > img,
+.image.is-16x16 > video,
+.image.is-16x16 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-24x24 {
+  inline-size: 24px;
+  block-size: 24px;
+  max-inline-size: 24px;
+}
+.image.is-24x24 > img,
+.image.is-24x24 > video,
+.image.is-24x24 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-32x32 {
+  inline-size: 32px;
+  block-size: 32px;
+  max-inline-size: 32px;
+}
+.image.is-32x32 > img,
+.image.is-32x32 > video,
+.image.is-32x32 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-48x48 {
+  inline-size: 48px;
+  block-size: 48px;
+  max-inline-size: 48px;
+}
+.image.is-48x48 > img,
+.image.is-48x48 > video,
+.image.is-48x48 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-64x64 {
+  inline-size: 64px;
+  block-size: 64px;
+  max-inline-size: 64px;
+}
+.image.is-64x64 > img,
+.image.is-64x64 > video,
+.image.is-64x64 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-96x96 {
+  inline-size: 96px;
+  block-size: 96px;
+  max-inline-size: 96px;
+}
+.image.is-96x96 > img,
+.image.is-96x96 > video,
+.image.is-96x96 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-128x128 {
+  inline-size: 128px;
+  block-size: 128px;
+  max-inline-size: 128px;
+}
+.image.is-128x128 > img,
+.image.is-128x128 > video,
+.image.is-128x128 > picture > img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  object-fit: cover;
+}
+
+.image.is-rounded {
+  border-radius: 5px;
+  overflow: hidden;
+}
+.image.is-circle {
+  border-radius: 50%;
+  overflow: hidden;
+}
+.image.is-thumbnail, .image.has-thumbnail {
+  padding: 0.25rem;
+  background: var(--kc-bg, transparent);
+  border: 1px solid color-mix(in srgb, var(--kc-fg, currentColor) 50%, transparent);
+  border-radius: 5px;
+}
+.image.is-thumbnail > img,
+.image.is-thumbnail > video,
+.image.is-thumbnail > picture > img, .image.has-thumbnail > img,
+.image.has-thumbnail > video,
+.image.has-thumbnail > picture > img {
+  border-radius: calc(5px - 0.25rem);
+}
+
+.img-fluid {
+  display: block;
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+@media (forced-colors: active) {
+  .image.is-thumbnail,
+  .image.has-thumbnail {
+    border-color: CanvasText;
+  }
+}

package/dist/element/image.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}.image{position:relative;display:block;max-inline-size:100%}.image>iframe,.image>img,.image>picture>img,.image>video{display:block;max-inline-size:100%;block-size:auto}.image.is-square{--kc-image-ratio:1/1;aspect-ratio:var(--kc-image-ratio)}.image.is-square>iframe,.image.is-square>img,.image.is-square>picture>img,.image.is-square>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-1by1{--kc-image-ratio:1/1;aspect-ratio:var(--kc-image-ratio)}.image.is-1by1>iframe,.image.is-1by1>img,.image.is-1by1>picture>img,.image.is-1by1>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-5by4{--kc-image-ratio:5/4;aspect-ratio:var(--kc-image-ratio)}.image.is-5by4>iframe,.image.is-5by4>img,.image.is-5by4>picture>img,.image.is-5by4>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-4by3{--kc-image-ratio:4/3;aspect-ratio:var(--kc-image-ratio)}.image.is-4by3>iframe,.image.is-4by3>img,.image.is-4by3>picture>img,.image.is-4by3>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-3by2{--kc-image-ratio:3/2;aspect-ratio:var(--kc-image-ratio)}.image.is-3by2>iframe,.image.is-3by2>img,.image.is-3by2>picture>img,.image.is-3by2>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-16by9{--kc-image-ratio:16/9;aspect-ratio:var(--kc-image-ratio)}.image.is-16by9>iframe,.image.is-16by9>img,.image.is-16by9>picture>img,.image.is-16by9>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-21by9{--kc-image-ratio:21/9;aspect-ratio:var(--kc-image-ratio)}.image.is-21by9>iframe,.image.is-21by9>img,.image.is-21by9>picture>img,.image.is-21by9>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-2by3{--kc-image-ratio:2/3;aspect-ratio:var(--kc-image-ratio)}.image.is-2by3>iframe,.image.is-2by3>img,.image.is-2by3>picture>img,.image.is-2by3>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-3by4{--kc-image-ratio:3/4;aspect-ratio:var(--kc-image-ratio)}.image.is-3by4>iframe,.image.is-3by4>img,.image.is-3by4>picture>img,.image.is-3by4>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-9by16{--kc-image-ratio:9/16;aspect-ratio:var(--kc-image-ratio)}.image.is-9by16>iframe,.image.is-9by16>img,.image.is-9by16>picture>img,.image.is-9by16>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-16x16{inline-size:16px;block-size:16px;max-inline-size:16px}.image.is-16x16>img,.image.is-16x16>picture>img,.image.is-16x16>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-24x24{inline-size:24px;block-size:24px;max-inline-size:24px}.image.is-24x24>img,.image.is-24x24>picture>img,.image.is-24x24>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-32x32{inline-size:32px;block-size:32px;max-inline-size:32px}.image.is-32x32>img,.image.is-32x32>picture>img,.image.is-32x32>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-48x48{inline-size:48px;block-size:48px;max-inline-size:48px}.image.is-48x48>img,.image.is-48x48>picture>img,.image.is-48x48>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-64x64{inline-size:64px;block-size:64px;max-inline-size:64px}.image.is-64x64>img,.image.is-64x64>picture>img,.image.is-64x64>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-96x96{inline-size:96px;block-size:96px;max-inline-size:96px}.image.is-96x96>img,.image.is-96x96>picture>img,.image.is-96x96>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-128x128{inline-size:128px;block-size:128px;max-inline-size:128px}.image.is-128x128>img,.image.is-128x128>picture>img,.image.is-128x128>video{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover}.image.is-rounded{border-radius:5px;overflow:hidden}.image.is-circle{border-radius:50%;overflow:hidden}.image.has-thumbnail,.image.is-thumbnail{padding:.25rem;background:var(--kc-bg,#0000);border:1px solid color-mix(in srgb,var(--kc-fg,currentcolor) 50%,#0000);border-radius:5px}.image.has-thumbnail>img,.image.has-thumbnail>picture>img,.image.has-thumbnail>video,.image.is-thumbnail>img,.image.is-thumbnail>picture>img,.image.is-thumbnail>video{border-radius:calc(5px - .25rem)}.img-fluid{display:block;max-inline-size:100%;block-size:auto}@media(forced-colors:active){.image.has-thumbnail,.image.is-thumbnail{border-color:CanvasText}}

package/dist/element/range.css

@@ -149,7 +149,7 @@ input[type=range]::-webkit-slider-thumb {
   height: 1.125rem;
   border-radius: 50%;
   background-color: var(--kc-fg, currentColor);
-  border: 2px solid var(--kc-bg, white);
+  border: 2px solid var(--kc-bg, #ffffff);
   margin-block-start: calc((0.375rem - 1.125rem) / 2);
   cursor: pointer;
 }
@@ -159,7 +159,7 @@ input[type=range]::-moz-range-thumb {
   height: 1.125rem;
   border-radius: 50%;
   background-color: var(--kc-fg, currentColor);
-  border: 2px solid var(--kc-bg, white);
+  border: 2px solid var(--kc-bg, #ffffff);
   cursor: pointer;
 }
 

package/dist/element/spinner.css

@@ -0,0 +1,190 @@
+: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;
+}
+
+.spinner {
+  color: #27282b;
+  color: var(--kc-spinner-fg, #27282b);
+  display: inline-block;
+  vertical-align: -0.125em;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 0.25em solid color-mix(in srgb, currentColor 25%, transparent);
+  border-block-start-color: currentColor;
+  border-radius: 50%;
+  animation: kc-spinner-rotate 0.75s linear infinite;
+}
+.spinner.is-small {
+  width: 1rem;
+  height: 1rem;
+}
+.spinner.is-large {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.spinner.is-grow {
+  background-color: currentColor;
+  border: 0;
+  animation: kc-spinner-grow 1s linear infinite;
+}
+.spinner.is-default {
+  color: #ffffff;
+  color: var(--kc-default-bg, #ffffff);
+}
+.spinner.is-primary {
+  color: #247d59;
+  color: var(--kc-primary-bg, #247d59);
+}
+.spinner.is-warning {
+  color: #7a4f10;
+  color: var(--kc-warning-bg, #7a4f10);
+}
+.spinner.is-danger {
+  color: #8c351a;
+  color: var(--kc-danger-bg, #8c351a);
+}
+.spinner.is-success {
+  color: #525a22;
+  color: var(--kc-success-bg, #525a22);
+}
+
+@keyframes kc-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes kc-spinner-grow {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation-duration: 2s;
+  }
+  .spinner.is-grow {
+    animation: none;
+    opacity: 0.5;
+  }
+}
+@media (forced-colors: active) {
+  .spinner {
+    border-color: CanvasText;
+    border-block-start-color: Highlight;
+  }
+}

package/dist/element/spinner.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}.spinner{color:#27282b;color:var(--kc-spinner-fg,#27282b);display:inline-block;vertical-align:-.125em;width:1.5rem;height:1.5rem;border:.25em solid color-mix(in srgb,currentcolor 25%,#0000);border-block-start-color:initial;border-radius:50%;animation:kc-spinner-rotate .75s linear infinite}.spinner.is-small{width:1rem;height:1rem}.spinner.is-large{width:2.5rem;height:2.5rem}.spinner.is-grow{background-color:currentColor;border:0;animation:kc-spinner-grow 1s linear infinite}.spinner.is-default{color:#fff;color:var(--kc-default-bg,#fff)}.spinner.is-primary{color:#247d59;color:var(--kc-primary-bg,#247d59)}.spinner.is-warning{color:#7a4f10;color:var(--kc-warning-bg,#7a4f10)}.spinner.is-danger{color:#8c351a;color:var(--kc-danger-bg,#8c351a)}.spinner.is-success{color:#525a22;color:var(--kc-success-bg,#525a22)}@keyframes kc-spinner-rotate{to{transform:rotate(1turn)}}@keyframes kc-spinner-grow{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:0}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2s}.spinner.is-grow{animation:none;opacity:.5}}@media(forced-colors:active){.spinner{border-color:CanvasText;border-block-start-color:Highlight}}