@adnap/krysalicss 0.0.1

package/dist/module/navbar.css

@@ -0,0 +1,256 @@
+: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;
+}
+
+.navbar {
+  background-color: var(--kc-bg, #ffffff);
+  background-color: var(--kc-navbar-bg, var(--kc-bg, #ffffff));
+  color: var(--kc-fg, #27282b);
+  color: var(--kc-navbar-fg, var(--kc-fg, #27282b));
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-radius: 5px;
+}
+.navbar .navbar__brand,
+.navbar .navbar__link {
+  display: inline-block;
+  padding: 0.5rem 0.75rem;
+  border-radius: 5px;
+  text-decoration: none;
+  color: inherit;
+}
+.navbar .navbar__brand:focus-visible,
+.navbar .navbar__link:focus-visible {
+  outline: 2px solid var(--kc-focus-ring, currentColor);
+  outline-offset: 2px;
+}
+.navbar .navbar__brand:hover,
+.navbar .navbar__link:hover {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+.navbar .navbar__brand {
+  font-weight: 600;
+  flex: 0 0 auto;
+}
+.navbar .navbar__menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  flex: 1 1 auto;
+}
+.navbar .navbar__item {
+  position: relative;
+}
+.navbar .navbar__link {
+  background: transparent;
+  border: 0;
+  min-width: 0;
+  font: inherit;
+  cursor: pointer;
+}
+.navbar .navbar__item.has-dropdown .navbar__dropdown-toggle {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.navbar .navbar__item.has-dropdown .navbar__dropdown {
+  display: none;
+  position: absolute;
+  inset-block-start: 100%;
+  inset-inline-start: 0;
+  min-width: 12rem;
+  padding: 0.5rem;
+  margin: 0;
+  list-style: none;
+  border-radius: 5px;
+  background-color: var(--kc-bg, #ffffff);
+  background-color: var(--kc-navbar-dropdown-bg, var(--kc-bg, #ffffff));
+  color: var(--kc-fg, #27282b);
+  color: var(--kc-navbar-dropdown-fg, var(--kc-fg, #27282b));
+  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+  box-shadow: 0 4px 12px color-mix(in srgb, currentColor 18%, transparent);
+  z-index: 10;
+}
+.navbar .navbar__item.has-dropdown:has(.navbar__dropdown-toggle:checked) .navbar__dropdown {
+  display: block;
+}
+.navbar .navbar__item.has-dropdown:has([aria-expanded=true]) .navbar__dropdown {
+  display: block;
+}
+.navbar .navbar__item.has-dropdown.hoverable:hover .navbar__dropdown, .navbar .navbar__item.has-dropdown.hoverable:focus-within .navbar__dropdown {
+  display: block;
+}
+.navbar .navbar__toggle {
+  display: none;
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+}
+@media screen and (max-width: 767px) {
+  .navbar {
+    flex-wrap: wrap;
+  }
+  .navbar .navbar__toggle {
+    display: inline-block;
+  }
+  .navbar .navbar__menu {
+    flex-direction: column;
+    flex-basis: 100%;
+    gap: 0.5rem;
+  }
+  .navbar .navbar__item.has-dropdown .navbar__dropdown {
+    position: static;
+    box-shadow: none;
+    border: 0;
+  }
+}
+.navbar.is-default {
+  background-color: #ffffff;
+  background-color: var(--kc-default-bg, #ffffff);
+  color: #27282b;
+  color: var(--kc-default-fg, #27282b);
+}
+.navbar.is-primary {
+  background-color: #247d59;
+  background-color: var(--kc-primary-bg, #247d59);
+  color: #ffffff;
+  color: var(--kc-primary-fg, #ffffff);
+}
+.navbar.is-warning {
+  background-color: #7a4f10;
+  background-color: var(--kc-warning-bg, #7a4f10);
+  color: #ffffff;
+  color: var(--kc-warning-fg, #ffffff);
+}
+.navbar.is-danger {
+  background-color: #8c351a;
+  background-color: var(--kc-danger-bg, #8c351a);
+  color: #ffffff;
+  color: var(--kc-danger-fg, #ffffff);
+}
+.navbar.is-success {
+  background-color: #525a22;
+  background-color: var(--kc-success-bg, #525a22);
+  color: #ffffff;
+  color: var(--kc-success-fg, #ffffff);
+}

package/dist/module/navbar.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}.navbar{background-color:var(--kc-bg,#fff);background-color:var(--kc-navbar-bg,var(--kc-bg,#fff));color:var(--kc-fg,#27282b);color:var(--kc-navbar-fg,var(--kc-fg,#27282b));display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border-radius:5px}.navbar :is(.navbar__brand,.navbar__link){display:inline-block;padding:.5rem .75rem;border-radius:5px;text-decoration:none;color:inherit}.navbar :is(.navbar__brand:focus-visible,.navbar__link:focus-visible){outline:2px solid var(--kc-focus-ring,currentColor);outline-offset:2px}.navbar :is(.navbar__brand:hover,.navbar__link:hover){background:color-mix(in srgb,currentColor 8%,#0000)}.navbar .navbar__brand{font-weight:600;flex:0 0 auto}.navbar .navbar__menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1rem;flex:1 1 auto}.navbar .navbar__item{position:relative}.navbar .navbar__link{background:#0000;border:0;min-width:0;font:inherit;cursor:pointer}.navbar .navbar__item.has-dropdown .navbar__dropdown-toggle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.navbar .navbar__item.has-dropdown .navbar__dropdown{display:none;position:absolute;inset-block-start:100%;inset-inline-start:0;min-width:12rem;padding:.5rem;margin:0;list-style:none;border-radius:5px;background-color:var(--kc-bg,#fff);background-color:var(--kc-navbar-dropdown-bg,var(--kc-bg,#fff));color:var(--kc-fg,#27282b);color:var(--kc-navbar-dropdown-fg,var(--kc-fg,#27282b));border:1px solid color-mix(in srgb,currentcolor 12%,#0000);box-shadow:0 4px 12px color-mix(in srgb,currentColor 18%,#0000);z-index:10}.navbar .navbar__item.has-dropdown:has(.navbar__dropdown-toggle:checked) .navbar__dropdown,.navbar .navbar__item.has-dropdown:has([aria-expanded=true]) .navbar__dropdown,.navbar :is(.navbar__item.has-dropdown.hoverable:focus-within,.navbar__item.has-dropdown.hoverable:hover) .navbar__dropdown{display:block}.navbar .navbar__toggle{display:none;flex:0 0 auto;margin-inline-start:auto}@media screen and (max-width:767px){.navbar{flex-wrap:wrap}.navbar .navbar__toggle{display:inline-block}.navbar .navbar__menu{flex-direction:column;flex-basis:100%;gap:.5rem}.navbar .navbar__item.has-dropdown .navbar__dropdown{position:static;box-shadow:none;border:0}}.navbar.is-default{background-color:#fff;background-color:var(--kc-default-bg,#fff);color:#27282b;color:var(--kc-default-fg,#27282b)}.navbar.is-primary{background-color:#247d59;background-color:var(--kc-primary-bg,#247d59);color:#fff;color:var(--kc-primary-fg,#fff)}.navbar.is-warning{background-color:#7a4f10;background-color:var(--kc-warning-bg,#7a4f10);color:#fff;color:var(--kc-warning-fg,#fff)}.navbar.is-danger{background-color:#8c351a;background-color:var(--kc-danger-bg,#8c351a);color:#fff;color:var(--kc-danger-fg,#fff)}.navbar.is-success{background-color:#525a22;background-color:var(--kc-success-bg,#525a22);color:#fff;color:var(--kc-success-fg,#fff)}

package/dist/module/tabs.css

@@ -0,0 +1,167 @@
+: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;
+}
+
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.tabs .tabs__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.tabs .tabs__tab {
+  display: inline-block;
+  padding: 0.75rem 0.75rem;
+  border-start-start-radius: 5px;
+  border-start-end-radius: 5px;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  cursor: pointer;
+  appearance: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  border: 0;
+  border-block-end: 2px solid transparent;
+  -webkit-user-select: none;
+          user-select: none;
+}
+.tabs .tabs__input:checked + .tabs__tab {
+  background-color: #ffffff;
+  background-color: var(--kc-tabs-active-bg, #ffffff);
+  color: #27282b;
+  color: var(--kc-tabs-active-fg, #27282b);
+  border-block-end-color: currentColor;
+}
+.tabs .tabs__input:focus-visible + .tabs__tab {
+  outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
+  outline-offset: 2px;
+}
+.tabs .tabs__panel {
+  order: 999;
+  flex: 1 1 100%;
+  padding: 1rem;
+  display: none;
+}
+.tabs .tabs__input:checked + .tabs__tab + .tabs__panel {
+  display: block;
+}

package/dist/module/tabs.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}.tabs{display:flex;flex-wrap:wrap;gap:.5rem}.tabs .tabs__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tabs .tabs__tab{display:inline-block;padding:.75rem;border-start-start-radius:5px;border-start-end-radius:5px;border-end-start-radius:0;border-end-end-radius:0;cursor:pointer;appearance:none;background:#0000;color:inherit;font:inherit;border:0;border-block-end:2px solid #0000;-webkit-user-select:none;user-select:none}.tabs .tabs__input:checked+.tabs__tab{background-color:#fff;background-color:var(--kc-tabs-active-bg,#fff);color:#27282b;color:var(--kc-tabs-active-fg,#27282b);border-block-end-color:initial}.tabs .tabs__input:focus-visible+.tabs__tab{outline:2px solid var(--kc-focus-ring,var(--kc-fg,currentColor));outline-offset:2px}.tabs .tabs__panel{order:999;flex:1 1 100%;padding:1rem;display:none}.tabs .tabs__input:checked+.tabs__tab+.tabs__panel{display:block}

package/dist/tokens/dark.json

@@ -0,0 +1,85 @@
+{
+  "$description": "Krysalicss \"dark\" theme tokens, W3C Design Tokens Community Group format. Compatible with Style Dictionary v4.",
+  "kc": {
+    "bg": {
+      "$value": "#121417",
+      "$type": "color"
+    },
+    "fg": {
+      "$value": "#e6e8eb",
+      "$type": "color"
+    },
+    "link": {
+      "$value": "#6cd2a8",
+      "$type": "color"
+    },
+    "link-hover": {
+      "$value": "#9be3c1",
+      "$type": "color"
+    },
+    "border-radius": {
+      "$value": "5px",
+      "$type": "dimension"
+    },
+    "card-bg": {
+      "$value": "#1c1f23",
+      "$type": "color"
+    },
+    "card-fg": {
+      "$value": "#e6e8eb",
+      "$type": "color"
+    },
+    "focus-ring": {
+      "$value": "#6cd2a8",
+      "$type": "color"
+    },
+    "default-bg": {
+      "$value": "#1c1f23",
+      "$type": "color"
+    },
+    "default-fg": {
+      "$value": "#e6e8eb",
+      "$type": "color"
+    },
+    "light-bg": {
+      "$value": "#3d5a3f",
+      "$type": "color"
+    },
+    "light-fg": {
+      "$value": "#e6e8eb",
+      "$type": "color"
+    },
+    "primary-bg": {
+      "$value": "#21704f",
+      "$type": "color"
+    },
+    "primary-fg": {
+      "$value": "#f5f7f5",
+      "$type": "color"
+    },
+    "warning-bg": {
+      "$value": "#b89a1e",
+      "$type": "color"
+    },
+    "warning-fg": {
+      "$value": "#1a1a12",
+      "$type": "color"
+    },
+    "danger-bg": {
+      "$value": "#a3471a",
+      "$type": "color"
+    },
+    "danger-fg": {
+      "$value": "#fff5ee",
+      "$type": "color"
+    },
+    "success-bg": {
+      "$value": "#5c6529",
+      "$type": "color"
+    },
+    "success-fg": {
+      "$value": "#f4f6e6",
+      "$type": "color"
+    }
+  }
+}

package/dist/tokens/default.json

@@ -0,0 +1,85 @@
+{
+  "$description": "Krysalicss \"default\" theme tokens, W3C Design Tokens Community Group format. Compatible with Style Dictionary v4.",
+  "kc": {
+    "bg": {
+      "$value": "#fff",
+      "$type": "color"
+    },
+    "fg": {
+      "$value": "#27282b",
+      "$type": "color"
+    },
+    "link": {
+      "$value": "#1f6e51",
+      "$type": "color"
+    },
+    "link-hover": {
+      "$value": "#6b7330",
+      "$type": "color"
+    },
+    "border-radius": {
+      "$value": "5px",
+      "$type": "dimension"
+    },
+    "card-bg": {
+      "$value": "#fff",
+      "$type": "color"
+    },
+    "card-fg": {
+      "$value": "#27282b",
+      "$type": "color"
+    },
+    "focus-ring": {
+      "$value": "#1f6e51",
+      "$type": "color"
+    },
+    "default-bg": {
+      "$value": "#fff",
+      "$type": "color"
+    },
+    "default-fg": {
+      "$value": "#27282b",
+      "$type": "color"
+    },
+    "light-bg": {
+      "$value": "#c2f2c5",
+      "$type": "color"
+    },
+    "light-fg": {
+      "$value": "#27282b",
+      "$type": "color"
+    },
+    "primary-bg": {
+      "$value": "#1f6e51",
+      "$type": "color"
+    },
+    "primary-fg": {
+      "$value": "#fff",
+      "$type": "color"
+    },
+    "warning-bg": {
+      "$value": "#ecf241",
+      "$type": "color"
+    },
+    "warning-fg": {
+      "$value": "#27282b",
+      "$type": "color"
+    },
+    "danger-bg": {
+      "$value": "#f26b1d",
+      "$type": "color"
+    },
+    "danger-fg": {
+      "$value": "#27282b",
+      "$type": "color"
+    },
+    "success-bg": {
+      "$value": "#6b7330",
+      "$type": "color"
+    },
+    "success-fg": {
+      "$value": "#fff",
+      "$type": "color"
+    }
+  }
+}

package/dist/tokens/high-contrast.json

@@ -0,0 +1,85 @@
+{
+  "$description": "Krysalicss \"high-contrast\" theme tokens, W3C Design Tokens Community Group format. Compatible with Style Dictionary v4.",
+  "kc": {
+    "bg": {
+      "$value": "#000",
+      "$type": "color"
+    },
+    "fg": {
+      "$value": "#fff",
+      "$type": "color"
+    },
+    "link": {
+      "$value": "#ffd400",
+      "$type": "color"
+    },
+    "link-hover": {
+      "$value": "#fff",
+      "$type": "color"
+    },
+    "border-radius": {
+      "$value": "0",
+      "$type": "dimension"
+    },
+    "card-bg": {
+      "$value": "#000",
+      "$type": "color"
+    },
+    "card-fg": {
+      "$value": "#fff",
+      "$type": "color"
+    },
+    "focus-ring": {
+      "$value": "#ffd400",
+      "$type": "color"
+    },
+    "default-bg": {
+      "$value": "#fff",
+      "$type": "color"
+    },
+    "default-fg": {
+      "$value": "#000",
+      "$type": "color"
+    },
+    "light-bg": {
+      "$value": "#fff",
+      "$type": "color"
+    },
+    "light-fg": {
+      "$value": "#000",
+      "$type": "color"
+    },
+    "primary-bg": {
+      "$value": "#00d2ff",
+      "$type": "color"
+    },
+    "primary-fg": {
+      "$value": "#000",
+      "$type": "color"
+    },
+    "warning-bg": {
+      "$value": "#ffd400",
+      "$type": "color"
+    },
+    "warning-fg": {
+      "$value": "#000",
+      "$type": "color"
+    },
+    "danger-bg": {
+      "$value": "#ff8585",
+      "$type": "color"
+    },
+    "danger-fg": {
+      "$value": "#000",
+      "$type": "color"
+    },
+    "success-bg": {
+      "$value": "#00ff85",
+      "$type": "color"
+    },
+    "success-fg": {
+      "$value": "#000",
+      "$type": "color"
+    }
+  }
+}