sk-clib 1.7.0 → 1.9.0

package/dist/index.d.ts

@@ -1 +1,2 @@
+export * from "./theme";
 export * from "./ui";

package/dist/index.js

@@ -1 +1,2 @@
+export * from "./theme";
 export * from "./ui";

package/dist/styles.css

@@ -310,6 +310,14 @@
   .italic {
     font-style: italic;
   }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .data-\[state\=toggled\]\:bg-black {
     &[data-state="toggled"] {
       background-color: var(--color-black);
@@ -321,14 +329,803 @@
     }
   }
 }
+@layer theme, base, components, utilities;
+@layer theme;
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities;
+@layer utilities {
+  .bg-background > * {
+    color: var(--color-on-background);
+  }
+  .bg-primary > * {
+    color: var(--color-primary);
+  }
+  .bg-primary-container > * {
+    color: var(--color-on-primary-container);
+  }
+  .bg-secondary > * {
+    color: var(--color-on-secondary);
+  }
+  .bg-secondary-container > * {
+    color: var(--color-on-secondary-container);
+  }
+  .bg-tertiary > * {
+    color: var(--color-on-tertiary);
+  }
+  .bg-tertiary-container > * {
+    color: var(--color-on-tertiary-container);
+  }
+  .bg-error > * {
+    color: var(--color-on-error);
+  }
+  .bg-surface > * {
+    color: var(--color-on-surface);
+  }
+  .bg-surface-variant > * {
+    color: var(--color-on-surface-variant);
+  }
+  .bg-outline > * {
+    color: var(--color-on-outline);
+  }
+  .bg-outline-variant > * {
+    color: var(--color-on-outline-variant);
+  }
+  .bg-shadow > * {
+    color: var(--color-on-shadow);
+  }
+  .bg-scrim > * {
+    color: var(--color-on-scrim);
+  }
+  .bg-inverse-surface > * {
+    color: var(--color-on-inverse-surface);
+  }
+  .bg-inverse-primary > * {
+    color: var(--color-on-inverse-primary);
+  }
+}
+@layer utilities {
+  .bg-primary {
+    background: var(--color-primary);
+  }
+  .text-primary {
+    color: var(--color-primary);
+  }
+  .border-primary {
+    border-color: var(--color-primary);
+  }
+  .ring-primary {
+    --tw-ring-color: var(--color-primary);
+  }
+  .bg-on-primary {
+    background: var(--color-on-primary);
+  }
+  .text-on-primary {
+    color: var(--color-on-primary);
+  }
+  .border-on-primary {
+    border-color: var(--color-on-primary);
+  }
+  .ring-on-primary {
+    --tw-ring-color: var(--color-on-primary);
+  }
+  .bg-primary-container {
+    background: var(--color-primary-container);
+  }
+  .text-primary-container {
+    color: var(--color-primary-container);
+  }
+  .border-primary-container {
+    border-color: var(--color-primary-container);
+  }
+  .ring-primary-container {
+    --tw-ring-color: var(--color-primary-container);
+  }
+  .bg-on-primary-container {
+    background: var(--color-on-primary-container);
+  }
+  .text-on-primary-container {
+    color: var(--color-on-primary-container);
+  }
+  .border-on-primary-container {
+    border-color: var(--color-on-primary-container);
+  }
+  .ring-on-primary-container {
+    --tw-ring-color: var(--color-on-primary-container);
+  }
+  .bg-secondary {
+    background: var(--color-secondary);
+  }
+  .text-secondary {
+    color: var(--color-secondary);
+  }
+  .border-secondary {
+    border-color: var(--color-secondary);
+  }
+  .ring-secondary {
+    --tw-ring-color: var(--color-secondary);
+  }
+  .bg-on-secondary {
+    background: var(--color-on-secondary);
+  }
+  .text-on-secondary {
+    color: var(--color-on-secondary);
+  }
+  .border-on-secondary {
+    border-color: var(--color-on-secondary);
+  }
+  .ring-on-secondary {
+    --tw-ring-color: var(--color-on-secondary);
+  }
+  .bg-secondary-container {
+    background: var(--color-secondary-container);
+  }
+  .text-secondary-container {
+    color: var(--color-secondary-container);
+  }
+  .border-secondary-container {
+    border-color: var(--color-secondary-container);
+  }
+  .ring-secondary-container {
+    --tw-ring-color: var(--color-secondary-container);
+  }
+  .bg-on-secondary-container {
+    background: var(--color-on-secondary-container);
+  }
+  .text-on-secondary-container {
+    color: var(--color-on-secondary-container);
+  }
+  .border-on-secondary-container {
+    border-color: var(--color-on-secondary-container);
+  }
+  .ring-on-secondary-container {
+    --tw-ring-color: var(--color-on-secondary-container);
+  }
+  .bg-tertiary {
+    background: var(--color-tertiary);
+  }
+  .text-tertiary {
+    color: var(--color-tertiary);
+  }
+  .border-tertiary {
+    border-color: var(--color-tertiary);
+  }
+  .ring-tertiary {
+    --tw-ring-color: var(--color-tertiary);
+  }
+  .bg-on-tertiary {
+    background: var(--color-on-tertiary);
+  }
+  .text-on-tertiary {
+    color: var(--color-on-tertiary);
+  }
+  .border-on-tertiary {
+    border-color: var(--color-on-tertiary);
+  }
+  .ring-on-tertiary {
+    --tw-ring-color: var(--color-on-tertiary);
+  }
+  .bg-tertiary-container {
+    background: var(--color-tertiary-container);
+  }
+  .text-tertiary-container {
+    color: var(--color-tertiary-container);
+  }
+  .border-tertiary-container {
+    border-color: var(--color-tertiary-container);
+  }
+  .ring-tertiary-container {
+    --tw-ring-color: var(--color-tertiary-container);
+  }
+  .bg-on-tertiary-container {
+    background: var(--color-on-tertiary-container);
+  }
+  .text-on-tertiary-container {
+    color: var(--color-on-tertiary-container);
+  }
+  .border-on-tertiary-container {
+    border-color: var(--color-on-tertiary-container);
+  }
+  .ring-on-tertiary-container {
+    --tw-ring-color: var(--color-on-tertiary-container);
+  }
+  .bg-error {
+    background: var(--color-error);
+  }
+  .text-error {
+    color: var(--color-error);
+  }
+  .border-error {
+    border-color: var(--color-error);
+  }
+  .ring-error {
+    --tw-ring-color: var(--color-error);
+  }
+  .bg-on-error {
+    background: var(--color-on-error);
+  }
+  .text-on-error {
+    color: var(--color-on-error);
+  }
+  .border-on-error {
+    border-color: var(--color-on-error);
+  }
+  .ring-on-error {
+    --tw-ring-color: var(--color-on-error);
+  }
+  .bg-error-container {
+    background: var(--color-error-container);
+  }
+  .text-error-container {
+    color: var(--color-error-container);
+  }
+  .border-error-container {
+    border-color: var(--color-error-container);
+  }
+  .ring-error-container {
+    --tw-ring-color: var(--color-error-container);
+  }
+  .bg-on-error-container {
+    background: var(--color-on-error-container);
+  }
+  .text-on-error-container {
+    color: var(--color-on-error-container);
+  }
+  .border-on-error-container {
+    border-color: var(--color-on-error-container);
+  }
+  .ring-on-error-container {
+    --tw-ring-color: var(--color-on-error-container);
+  }
+  .bg-background {
+    background: var(--color-background);
+  }
+  .text-background {
+    color: var(--color-background);
+  }
+  .border-background {
+    border-color: var(--color-background);
+  }
+  .ring-background {
+    --tw-ring-color: var(--color-background);
+  }
+  .bg-on-background {
+    background: var(--color-on-background);
+  }
+  .text-on-background {
+    color: var(--color-on-background);
+  }
+  .border-on-background {
+    border-color: var(--color-on-background);
+  }
+  .ring-on-background {
+    --tw-ring-color: var(--color-on-background);
+  }
+  .bg-surface {
+    background: var(--color-surface);
+  }
+  .text-surface {
+    color: var(--color-surface);
+  }
+  .border-surface {
+    border-color: var(--color-surface);
+  }
+  .ring-surface {
+    --tw-ring-color: var(--color-surface);
+  }
+  .bg-on-surface {
+    background: var(--color-on-surface);
+  }
+  .text-on-surface {
+    color: var(--color-on-surface);
+  }
+  .border-on-surface {
+    border-color: var(--color-on-surface);
+  }
+  .ring-on-surface {
+    --tw-ring-color: var(--color-on-surface);
+  }
+  .bg-surface-variant {
+    background: var(--color-surface-variant);
+  }
+  .text-surface-variant {
+    color: var(--color-surface-variant);
+  }
+  .border-surface-variant {
+    border-color: var(--color-surface-variant);
+  }
+  .ring-surface-variant {
+    --tw-ring-color: var(--color-surface-variant);
+  }
+  .bg-on-surface-variant {
+    background: var(--color-on-surface-variant);
+  }
+  .text-on-surface-variant {
+    color: var(--color-on-surface-variant);
+  }
+  .border-on-surface-variant {
+    border-color: var(--color-on-surface-variant);
+  }
+  .ring-on-surface-variant {
+    --tw-ring-color: var(--color-on-surface-variant);
+  }
+  .bg-outline {
+    background: var(--color-outline);
+  }
+  .text-outline {
+    color: var(--color-outline);
+  }
+  .border-outline {
+    border-color: var(--color-outline);
+  }
+  .ring-outline {
+    --tw-ring-color: var(--color-outline);
+  }
+  .bg-outline-variant {
+    background: var(--color-outline-variant);
+  }
+  .text-outline-variant {
+    color: var(--color-outline-variant);
+  }
+  .border-outline-variant {
+    border-color: var(--color-outline-variant);
+  }
+  .ring-outline-variant {
+    --tw-ring-color: var(--color-outline-variant);
+  }
+  .bg-shadow {
+    background: var(--color-shadow);
+  }
+  .text-shadow {
+    color: var(--color-shadow);
+  }
+  .border-shadow {
+    border-color: var(--color-shadow);
+  }
+  .ring-shadow {
+    --tw-ring-color: var(--color-shadow);
+  }
+  .bg-scrim {
+    background: var(--color-scrim);
+  }
+  .text-scrim {
+    color: var(--color-scrim);
+  }
+  .border-scrim {
+    border-color: var(--color-scrim);
+  }
+  .ring-scrim {
+    --tw-ring-color: var(--color-scrim);
+  }
+  .bg-inverse-surface {
+    background: var(--color-inverse-surface);
+  }
+  .text-inverse-surface {
+    color: var(--color-inverse-surface);
+  }
+  .border-inverse-surface {
+    border-color: var(--color-inverse-surface);
+  }
+  .ring-inverse-surface {
+    --tw-ring-color: var(--color-inverse-surface);
+  }
+  .bg-inverse-on-surface {
+    background: var(--color-inverse-on-surface);
+  }
+  .text-inverse-on-surface {
+    color: var(--color-inverse-on-surface);
+  }
+  .border-inverse-on-surface {
+    border-color: var(--color-inverse-on-surface);
+  }
+  .ring-inverse-on-surface {
+    --tw-ring-color: var(--color-inverse-on-surface);
+  }
+  .bg-inverse-primary {
+    background: var(--color-inverse-primary);
+  }
+  .text-inverse-primary {
+    color: var(--color-inverse-primary);
+  }
+  .border-inverse-primary {
+    border-color: var(--color-inverse-primary);
+  }
+  .ring-inverse-primary {
+    --tw-ring-color: var(--color-inverse-primary);
+  }
+}
+@layer theme, base, components, utilities;
+@layer theme;
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities;
+@layer base {
+  html,	body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
 }
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
       --tw-font-weight: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
     }
   }
 }

package/dist/theme/index.d.ts

@@ -0,0 +1,4 @@
+export { theme_state as theme } from './stores.svelte';
+export { default as ThemeInit } from './theme-init/components/theme-init.svelte';
+export type { tThemeInitProps } from './theme-init/types';
+export * from "./logic";

package/dist/theme/index.js

@@ -0,0 +1,6 @@
+// Stores
+export { theme_state as theme } from './stores.svelte';
+// Component
+export { default as ThemeInit } from './theme-init/components/theme-init.svelte';
+// Logic
+export * from "./logic";

package/dist/theme/logic.d.ts

@@ -0,0 +1,4 @@
+import { Mode, Variant } from "./types";
+export declare function saveTheme(theme: object): void;
+export declare function build(seedHex: string, mode?: Mode, variant?: Variant, contrast?: number): any;
+export declare function applyScheme(scheme: any): any;

package/dist/theme/logic.js

@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { argbFromHex, SchemeTonalSpot, Hct, hexFromArgb, SchemeContent, SchemeExpressive, SchemeFidelity, SchemeFruitSalad, SchemeMonochrome, SchemeNeutral, SchemeRainbow, SchemeVibrant } from '@material/material-color-utilities';
+export function saveTheme(theme) {
+    var expires = new Date();
+    expires.setFullYear(expires.getFullYear() + 10);
+    document.cookie = "md-theme=".concat(JSON.stringify(theme), "; expires=").concat(expires.toUTCString(), "; path=/");
+}
+export function build(seedHex, mode, variant, contrast) {
+    if (mode === void 0) { mode = "dark"; }
+    if (variant === void 0) { variant = "vibrant"; }
+    if (contrast === void 0) { contrast = 0; }
+    var variant_map = {
+        "content": SchemeContent,
+        "expressive": SchemeExpressive,
+        "fidelity": SchemeFidelity,
+        "fruit-salad": SchemeFruitSalad,
+        "monochrome": SchemeMonochrome,
+        "neutral": SchemeNeutral,
+        "rainbow": SchemeRainbow,
+        "tonal-spot": SchemeTonalSpot,
+        "vibrant": SchemeVibrant
+    };
+    if (!(variant in variant_map)) {
+        variant = "content";
+    }
+    var source = Hct.fromInt(argbFromHex(seedHex));
+    var isDark = mode === "dark";
+    var scheme = new variant_map[variant](source, isDark, contrast);
+    return scheme;
+}
+export function applyScheme(scheme) {
+    var map = {
+        "--color-primary": scheme.primary,
+        "--color-on-primary": scheme.onPrimary,
+        "--color-primary-container": scheme.primaryContainer,
+        "--color-on-primary-container": scheme.onPrimaryContainer,
+        "--color-secondary": scheme.secondary,
+        "--color-on-secondary": scheme.onSecondary,
+        "--color-secondary-container": scheme.secondaryContainer,
+        "--color-on-secondary-container": scheme.onSecondaryContainer,
+        "--color-tertiary": scheme.tertiary,
+        "--color-on-tertiary": scheme.onTertiary,
+        "--color-tertiary-container": scheme.tertiaryContainer,
+        "--color-on-tertiary-container": scheme.onTertiaryContainer,
+        "--color-error": scheme.error,
+        "--color-on-error": scheme.onError,
+        "--color-error-container": scheme.errorContainer,
+        "--color-on-error-container": scheme.onErrorContainer,
+        "--color-background": scheme.background,
+        "--color-on-background": scheme.onBackground,
+        "--color-surface": scheme.surface,
+        "--color-on-surface": scheme.onSurface,
+        "--color-surface-variant": scheme.surfaceVariant,
+        "--color-on-surface-variant": scheme.onSurfaceVariant,
+        "--color-outline": scheme.outline,
+        "--color-outline-variant": scheme.outlineVariant,
+        "--color-shadow": scheme.shadow,
+        "--color-scrim": scheme.scrim,
+        "--color-inverse-surface": scheme.inverseSurface,
+        "--color-inverse-on-surface": scheme.inverseOnSurface,
+        "--color-inverse-primary": scheme.inversePrimary
+    };
+    var out = {};
+    var root = document.documentElement;
+    for (var _i = 0, _a = Object.entries(map); _i < _a.length; _i++) {
+        var _b = _a[_i], name = _b[0], argb = _b[1];
+        out[name] = hexFromArgb(argb);
+        root.style.setProperty(name, hexFromArgb(argb));
+    }
+    return out;
+}

package/dist/theme/stores.svelte.d.ts

@@ -0,0 +1,24 @@
+export const theme_state: ThemeState;
+/**
+ * Class representing the current state of the theme
+ *
+ * If either `mode`, `variant` or `seedColor` are updated, the whole theme will refresh
+ */
+declare class ThemeState {
+    /**
+     * Current mode of the theme, either light or dark
+     * @type {"dark"|"light"|undefined}
+     */
+    mode: "dark" | "light" | undefined;
+    /**
+     * Variant of the theme, Changes the look and feel of the used colors
+     * @type {"content"|"expressive"|"fidelity"|"fruit-salad"|"monochrome"|"neutral"|"rainbow"|"tonal-spot"|"vibrant"|undefined}
+     */
+    variant: "content" | "expressive" | "fidelity" | "fruit-salad" | "monochrome" | "neutral" | "rainbow" | "tonal-spot" | "vibrant" | undefined;
+    /**
+     * Main color used to generate the theme.
+     * @type {string|undefined}
+     */
+    seedColor: string | undefined;
+}
+export {};

package/dist/theme/stores.svelte.js

@@ -0,0 +1,33 @@
+
+
+
+/**
+ * Class representing the current state of the theme
+ * 
+ * If either `mode`, `variant` or `seedColor` are updated, the whole theme will refresh
+ */
+class ThemeState {
+
+    /**
+     * Current mode of the theme, either light or dark
+     * @type {"dark"|"light"|undefined}
+     */
+    mode = $state(undefined)
+
+    /**
+     * Variant of the theme, Changes the look and feel of the used colors
+     * @type {"content"|"expressive"|"fidelity"|"fruit-salad"|"monochrome"|"neutral"|"rainbow"|"tonal-spot"|"vibrant"|undefined}
+     */
+    variant = $state(undefined)
+
+    /**
+     * Main color used to generate the theme.
+     * @type {string|undefined}
+     */
+    seedColor = $state(undefined)
+}
+
+const theme_state = new ThemeState();
+
+export { theme_state }
+

package/dist/theme/theme-init/components/theme-init.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	// --- Logic ---
+	import { cn } from '../../../utils';
+	import type { Props } from '..';
+	import { onMount } from 'svelte';
+
+	// === State ===
+	import { theme, build, applyScheme, saveTheme } from '../..';
+
+	const {
+		defaults = {
+			defaultMode: 'dark',
+			defaultVariant: 'vibrant',
+			defaultSeedColor: '#f8b518'
+		}
+	}: Props = $props();
+
+	/**
+	 * Checks if the user already has a set md-theme
+	 */
+	function hasTheme() {
+		const match = document.cookie.match(/(?:^|;\s*)md-theme=([^;]*)/);
+		return match ? true : false;
+	}
+
+	/**
+	 * Returns a fallback value if designated value is undefined
+	 * @param value Value to return normally
+	 * @param _default default if value is undefined
+	 */
+	function fallback(value: any, _default: any) {
+		return value === undefined ? _default : value;
+	}
+
+	// Whenever any state changes, refresh theme
+	$effect(() => {
+		// Get fallback values
+		theme.mode = fallback(theme.mode, defaults.defaultMode);
+		theme.variant = fallback(theme.variant, defaults.defaultVariant);
+		theme.seedColor = fallback(theme.seedColor, defaults.defaultSeedColor);
+
+		// Build the theme with material utilities
+		const built = build(theme.seedColor, theme.mode, theme.variant);
+
+		// Create css variables object and save to body
+		const applied = applyScheme(built);
+
+		// Save the theme to the user's cookies
+		saveTheme(applied);
+	});
+</script>
+
+<svelte:head>
+	<!-- ============== Theme Script ============== -->
+	<script>
+		/**
+		 * Attempts to get the current theme stored in the user's cookies, returns it, otherwise undefined
+		 * @return {Object|undefined} The theme or undefined
+		 */
+		function getTheme() {
+			const match = document.cookie.match(/(?:^|;\s*)md-theme=([^;]*)/);
+			return match ? JSON.parse(decodeURIComponent(match[1])) : undefined;
+		}
+
+		/**
+		 * Attempts to apply a given theme
+		 * @param {Object|undefined} theme - The theme to be applied, if undefined, this method does nothing
+		 */
+		function applyTheme(theme) {
+			if (theme === undefined) {
+				console.warn('No theme specified, defaulting to doing nothing');
+				return;
+			}
+
+			for (const [name, hex] of Object.entries(theme)) {
+				console.info(`Setting ${name} to ${hex}`);
+				document.documentElement.style.setProperty(name, hex);
+			}
+		}
+
+		applyTheme(getTheme());
+	</script>
+</svelte:head>
+
+<!--@component
+    ---
+    name: ThemeInit
+    props:
+        defaultSeed (undefined|string) = undefine Default color seed for the theme.        
+    ---
+
+    Used to initialize the theme within your projects
+-->

package/dist/theme/theme-init/components/theme-init.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Props } from '..';
+/**
+ * ---
+ * name: ThemeInit
+ * props:
+ *     defaultSeed (undefined|string) = undefine Default color seed for the theme.
+ * ---
+ *
+ * Used to initialize the theme within your projects
+ */
+declare const ThemeInit: import("svelte").Component<Props, {}, "">;
+type ThemeInit = ReturnType<typeof ThemeInit>;
+export default ThemeInit;

package/dist/theme/theme-init/index.d.ts

@@ -0,0 +1,2 @@
+export { default as _, default as Root } from "./components/theme-init.svelte";
+export type { tThemeInitProps as Props, } from "./types";

package/dist/theme/theme-init/index.js

@@ -0,0 +1 @@
+export { default as _, default as Root } from "./components/theme-init.svelte";

package/dist/theme/theme-init/types.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * Possible default types, object contains
+ * `defaultMode`,
+ * `defaultVariant`,
+ * `defaultSeedColor`
+ */
+export type tDefaults = {
+    defaultMode: 'dark' | 'light' | undefined;
+    defaultVariant: 'content' | 'expressive' | 'fidelity' | 'fruit-salad' | 'monochrome' | 'neutral' | 'rainbow' | 'tonal-spot' | 'vibrant' | undefined;
+    defaultSeedColor: string | undefined;
+};
+export type tThemeInitProps = HTMLAttributes<HTMLDivElement> & {
+    defaults?: tDefaults;
+};

package/dist/theme/theme-init/types.js

@@ -0,0 +1 @@
+export {};

package/dist/theme/types.d.ts

@@ -0,0 +1,2 @@
+export type Mode = string | "light" | "dark";
+export type Variant = string | "content" | "expressive" | "fidelity" | "fruit-salad" | "monochrome" | "neutral" | "rainbow" | "tonal-spot" | "vibrant";

package/dist/theme/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/frame/components/frame.svelte

@@ -6,20 +6,51 @@
 	let {
 		children,
 		class: className,
+
+		// Flex Box
 		flex = $bindable(undefined),
 		row = $bindable(undefined),
 		col = $bindable(undefined),
+
+		// Positioning
 		center = $bindable(undefined),
 		centerx = $bindable(undefined),
 		centery = $bindable(undefined),
+
+		// Size Fillings
 		fill = $bindable(undefined),
 		fillw = $bindable(undefined),
 		fillh = $bindable(undefined),
+
+		// Flex Config
 		noshrink = $bindable(undefined),
+
+		// Aspect Ratios
 		aspectSquare = $bindable(undefined),
+
+		// Cursor options
 		cursorAuto = $bindable(undefined),
 		cursorDefault = $bindable(undefined),
 		cursorPointer = $bindable(undefined),
+
+		// Theme Colors
+		background = $bindable(undefined),
+		primary = $bindable(undefined),
+		primaryContainer = $bindable(undefined),
+		secondary = $bindable(undefined),
+		secondaryContainer = $bindable(undefined),
+		tertiary = $bindable(undefined),
+		tertiaryContainer = $bindable(undefined),
+		error = $bindable(undefined),
+		surface = $bindable(undefined),
+		surfaceVariant = $bindable(undefined),
+		outline = $bindable(undefined),
+		outlineVariant = $bindable(undefined),
+		shadow = $bindable(undefined),
+		scrim = $bindable(undefined),
+		inverseSurface = $bindable(undefined),
+		inversePrimary = $bindable(undefined),
+
 		...rest
 	}: Props = $props();
 
@@ -57,6 +88,25 @@
 	tokenInstance.addTokenIf(cursorAuto, 'cursor-auto');
 	tokenInstance.addTokenIf(cursorDefault, 'cursor-default');
 	tokenInstance.addTokenIf(cursorPointer, 'cursor-pointer');
+
+	// Background Options
+	tokenInstance.addTokenIf(background, 'bg-background');
+	tokenInstance.addTokenIf(primary, 'bg-primary');
+	tokenInstance.addTokenIf(primaryContainer, 'bg-primary-container');
+	tokenInstance.addTokenIf(secondary, 'bg-secondary');
+	tokenInstance.addTokenIf(secondaryContainer, 'bg-secondary-container');
+	tokenInstance.addTokenIf(tertiary, 'bg-tertiary');
+	tokenInstance.addTokenIf(tertiaryContainer, 'bg-tertiary-container');
+	tokenInstance.addTokenIf(error, 'bg-error');
+	tokenInstance.addTokenIf(surface, 'bg-surface');
+	tokenInstance.addTokenIf(surfaceVariant, 'bg-surface-variant');
+	tokenInstance.addTokenIf(outline, 'bg-outline');
+	tokenInstance.addTokenIf(outlineVariant, 'bg-outline-variant');
+	tokenInstance.addTokenIf(shadow, 'bg-shadow');
+	tokenInstance.addTokenIf(scrim, 'bg-scrim');
+	tokenInstance.addTokenIf(inverseSurface, 'bg-inverse-surface');
+	tokenInstance.addTokenIf(inversePrimary, 'bg-inverse-primary');
+
 </script>
 
 <div class={cn(tokenInstance.className)} {...rest}>

package/dist/ui/frame/components/frame.svelte.d.ts

@@ -17,6 +17,6 @@ import type { Props } from '..';
  * This will create a flex container that is a row, centered, and fills the available space.
  * The `class` prop can be used to add additional classes to the frame, and the `children` prop can be used to pass in child components.
  */
-declare const Frame: import("svelte").Component<Props, {}, "flex" | "row" | "col" | "centerx" | "centery" | "center" | "fill" | "fillw" | "fillh" | "noshrink" | "aspectSquare" | "cursorAuto" | "cursorDefault" | "cursorPointer">;
+declare const Frame: import("svelte").Component<Props, {}, "flex" | "row" | "col" | "centerx" | "centery" | "center" | "fill" | "fillw" | "fillh" | "noshrink" | "aspectSquare" | "cursorAuto" | "cursorDefault" | "cursorPointer" | "background" | "primary" | "primaryContainer" | "secondary" | "secondaryContainer" | "tertiary" | "tertiaryContainer" | "error" | "surface" | "surfaceVariant" | "outline" | "outlineVariant" | "shadow" | "scrim" | "inverseSurface" | "inversePrimary">;
 type Frame = ReturnType<typeof Frame>;
 export default Frame;

package/dist/ui/frame/types.d.ts

@@ -14,4 +14,20 @@ export type tFrameProps = HTMLAttributes<HTMLDivElement> & {
     cursorAuto?: boolean;
     cursorDefault?: boolean;
     cursorPointer?: boolean;
+    background?: boolean;
+    primary?: boolean;
+    primaryContainer?: boolean;
+    secondary?: boolean;
+    secondaryContainer?: boolean;
+    tertiary?: boolean;
+    tertiaryContainer?: boolean;
+    error?: boolean;
+    surface?: boolean;
+    surfaceVariant?: boolean;
+    outline?: boolean;
+    outlineVariant?: boolean;
+    shadow?: boolean;
+    scrim?: boolean;
+    inverseSurface?: boolean;
+    inversePrimary?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sk-clib",
-	"version": "1.7.0",
+	"version": "1.9.0",
 	"type": "module",
 	"files": [
 		"dist",
@@ -19,6 +19,11 @@
 		},
 		"./style": {
 			"default": "./dist/styles.css"
+		},
+		"./theme": {
+			"types": "./dist/theme/index.d.ts",
+			"svelte": "./dist/theme/index.js",
+			"default": "./dist/theme/index.js"
 		}
 	},
 	"svelte": "./dist/index.js",
@@ -38,7 +43,8 @@
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.0.0",
-		"svelte": "^5.0.0"
+		"svelte": "^5.0.0",
+		"@material/material-color-utilities": "^0.3.0"
 	},
 	"devDependencies": {
 		"@iconify-json/mdi": "^1.2.3",
@@ -73,6 +79,7 @@
 		"@tailwindcss/vite": "^4.1.7",
 		"mdsvex": "^0.12.6",
 		"semantic-release": "^24.2.4",
-		"tailwind-merge": "^3.2.0"
+		"tailwind-merge": "^3.2.0",
+		"@material/material-color-utilities": "^0.3.0"
 	}
 }