seblify 0.1.8 → 0.2.1

package/dist/components/display/feedback/loading/loading-dots/LoadingDots.svelte

@@ -25,8 +25,8 @@
   class:size-md={size === 'md'}
   class:size-sm={size === 'sm'}
   class:size-xs={size === 'xs'}
-  data-tone={tone}
-  class="loading-dots"
+  data-seblify-tone={tone ?? 'inherit'}
+  class="loading-dots seblify-tone-context"
   role="status"
 >
   <span></span>
@@ -34,86 +34,155 @@
   <span></span>
 </span>
 
-<style>
-  .loading-dots {
+<style>:where(.seblify-tone-context) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inherit']) {
+  --seblify-tone-fill: var(
+    --seblify-current-tone-fill,
+    var(--seblify-color-fill-neutral, #516176)
+  );
+  --seblify-tone-fill-text: var(
+    --seblify-current-tone-fill-text,
+    var(--seblify-color-fill-neutral-text, #ffffff)
+  );
+  --seblify-tone-surface: var(
+    --seblify-current-tone-surface,
+    var(--seblify-color-surface-muted, #d9e0e8)
+  );
+  --seblify-tone-text: var(
+    --seblify-current-tone-text,
+    var(--seblify-color-text-muted, #516176)
+  );
+  --seblify-tone-border: var(
+    --seblify-current-tone-border,
+    var(--seblify-color-border, #c8d2df)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='neutral']) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='primary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-accent, #f7fbfb);
+  --seblify-tone-text: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-border: var(--seblify-color-border-accent, #9ab7ba);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='success']) {
+  --seblify-tone-fill: var(--seblify-color-fill-success, #1f7a3f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-success-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-success-surface, #e8f8ee);
+  --seblify-tone-text: var(--seblify-color-success-text, #143d25);
+  --seblify-tone-border: var(--seblify-color-success-border, #b8ddc7);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='danger']) {
+  --seblify-tone-fill: var(--seblify-color-fill-danger, #c93434);
+  --seblify-tone-fill-text: var(--seblify-color-fill-danger-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-error-surface, #fff0f0);
+  --seblify-tone-text: var(--seblify-color-error-text, #5a1717);
+  --seblify-tone-border: var(--seblify-color-error-border, #efb6b6);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='warning']) {
+  --seblify-tone-fill: var(--seblify-color-fill-warning, #8a5a00);
+  --seblify-tone-fill-text: var(--seblify-color-fill-warning-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-warning-surface, #fff6d8);
+  --seblify-tone-text: var(--seblify-color-warning-text, #4d3900);
+  --seblify-tone-border: var(--seblify-color-warning-border, #e8d28f);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='info']) {
+  --seblify-tone-fill: var(--seblify-color-fill-info, #1f6fb2);
+  --seblify-tone-fill-text: var(--seblify-color-fill-info-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-info-surface, #eaf3ff);
+  --seblify-tone-text: var(--seblify-color-info-text, #102f55);
+  --seblify-tone-border: var(--seblify-color-info-border, #bfd1ea);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inverse']) {
+  --seblify-tone-fill: var(--seblify-color-fill-inverse, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-inverse-hover, #263043);
+  --seblify-tone-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-border: var(--seblify-color-border-inverse, #263043);
+}
+
+:where(.seblify-tone-publisher) {
+  --seblify-current-tone-fill: var(--seblify-tone-fill);
+  --seblify-current-tone-fill-text: var(--seblify-tone-fill-text);
+  --seblify-current-tone-surface: var(--seblify-tone-surface);
+  --seblify-current-tone-text: var(--seblify-tone-text);
+  --seblify-current-tone-border: var(--seblify-tone-border);
+}
+
+.loading-dots {
+    --loading-dots-resolved-size: var(
+      --dot-size,
+      var(--seblify-current-size, 8px)
+    );
+    --loading-dots-resolved-gap: var(
+      --dot-gap,
+      max(3px, calc(var(--loading-dots-resolved-size) * 0.625))
+    );
+
     display: inline-flex;
-    gap: var(--dot-gap, var(--seblify-current-loading-dots-gap, 5px));
+    gap: var(--loading-dots-resolved-gap);
     align-items: center;
     width: fit-content;
-    color: var(
-      --loading-dots-color,
-      var(
-        --seblify-current-tone-fill,
-        var(--seblify-color-fill-primary, #146a6f)
-      )
-    );
+    color: var(--seblify-tone-fill);
   }
 
-  .size-sm {
+.size-sm {
     --dot-size: 6px;
     --dot-gap: 4px;
   }
 
-  .size-xs {
+.size-xs {
     --dot-size: 4px;
     --dot-gap: 3px;
   }
 
-  .size-md {
+.size-md {
     --dot-size: 8px;
     --dot-gap: 5px;
   }
 
-  .size-lg {
+.size-lg {
     --dot-size: 11px;
     --dot-gap: 7px;
   }
 
-  .loading-dots[data-tone='neutral'] {
-    --loading-dots-color: var(--seblify-color-fill-neutral, #516176);
-  }
-
-  .loading-dots[data-tone='primary'] {
-    --loading-dots-color: var(--seblify-color-fill-primary, #146a6f);
-  }
-
-  .loading-dots[data-tone='success'] {
-    --loading-dots-color: var(--seblify-color-fill-success, #1f7a3f);
-  }
-
-  .loading-dots[data-tone='danger'] {
-    --loading-dots-color: var(--seblify-color-fill-danger, #c93434);
-  }
-
-  .loading-dots[data-tone='warning'] {
-    --loading-dots-color: var(--seblify-color-fill-warning, #8a5a00);
-  }
-
-  .loading-dots[data-tone='info'] {
-    --loading-dots-color: var(--seblify-color-fill-info, #1f6fb2);
-  }
-
-  .loading-dots[data-tone='inverse'] {
-    --loading-dots-color: var(--seblify-color-fill-inverse, #172033);
-  }
-
-  span span {
-    width: var(--dot-size, var(--seblify-current-loading-dot-size, 8px));
-    height: var(--dot-size, var(--seblify-current-loading-dot-size, 8px));
+span span {
+    width: var(--loading-dots-resolved-size);
+    height: var(--loading-dots-resolved-size);
     border-radius: 999px;
     background: currentColor;
     animation: pulse 900ms ease-in-out infinite;
   }
 
-  span span:nth-child(2) {
+span span:nth-child(2) {
     animation-delay: 120ms;
   }
 
-  span span:nth-child(3) {
+span span:nth-child(3) {
     animation-delay: 240ms;
   }
 
-  @keyframes pulse {
+@keyframes pulse {
     0%,
     80%,
     100% {
@@ -127,7 +196,7 @@
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
     span span {
       animation: none;
       opacity: 0.75;

package/dist/components/display/feedback/loading/spinner/Spinner.svelte

@@ -25,84 +25,153 @@
   class:size-lg={size === 'lg'}
   class:size-sm={size === 'sm'}
   class:size-xs={size === 'xs'}
-  class="spinner"
-  data-tone={tone}
+  class="spinner seblify-tone-context"
+  data-seblify-tone={tone ?? 'inherit'}
   role="status"
 ></span>
 
-<style>
-  .spinner {
-    display: inline-block;
-    width: var(--spinner-size, var(--seblify-current-spinner-size, 26px));
-    height: var(--spinner-size, var(--seblify-current-spinner-size, 26px));
-    border: var(--spinner-width, var(--seblify-current-spinner-width, 3px))
-      solid var(--seblify-color-border, #c8d2df);
-    border-top-color: var(
-      --spinner-color,
-      var(
-        --seblify-current-tone-fill,
-        var(--seblify-color-fill-primary, #146a6f)
-      )
+<style>:where(.seblify-tone-context) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inherit']) {
+  --seblify-tone-fill: var(
+    --seblify-current-tone-fill,
+    var(--seblify-color-fill-neutral, #516176)
+  );
+  --seblify-tone-fill-text: var(
+    --seblify-current-tone-fill-text,
+    var(--seblify-color-fill-neutral-text, #ffffff)
+  );
+  --seblify-tone-surface: var(
+    --seblify-current-tone-surface,
+    var(--seblify-color-surface-muted, #d9e0e8)
+  );
+  --seblify-tone-text: var(
+    --seblify-current-tone-text,
+    var(--seblify-color-text-muted, #516176)
+  );
+  --seblify-tone-border: var(
+    --seblify-current-tone-border,
+    var(--seblify-color-border, #c8d2df)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='neutral']) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='primary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-accent, #f7fbfb);
+  --seblify-tone-text: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-border: var(--seblify-color-border-accent, #9ab7ba);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='success']) {
+  --seblify-tone-fill: var(--seblify-color-fill-success, #1f7a3f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-success-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-success-surface, #e8f8ee);
+  --seblify-tone-text: var(--seblify-color-success-text, #143d25);
+  --seblify-tone-border: var(--seblify-color-success-border, #b8ddc7);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='danger']) {
+  --seblify-tone-fill: var(--seblify-color-fill-danger, #c93434);
+  --seblify-tone-fill-text: var(--seblify-color-fill-danger-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-error-surface, #fff0f0);
+  --seblify-tone-text: var(--seblify-color-error-text, #5a1717);
+  --seblify-tone-border: var(--seblify-color-error-border, #efb6b6);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='warning']) {
+  --seblify-tone-fill: var(--seblify-color-fill-warning, #8a5a00);
+  --seblify-tone-fill-text: var(--seblify-color-fill-warning-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-warning-surface, #fff6d8);
+  --seblify-tone-text: var(--seblify-color-warning-text, #4d3900);
+  --seblify-tone-border: var(--seblify-color-warning-border, #e8d28f);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='info']) {
+  --seblify-tone-fill: var(--seblify-color-fill-info, #1f6fb2);
+  --seblify-tone-fill-text: var(--seblify-color-fill-info-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-info-surface, #eaf3ff);
+  --seblify-tone-text: var(--seblify-color-info-text, #102f55);
+  --seblify-tone-border: var(--seblify-color-info-border, #bfd1ea);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inverse']) {
+  --seblify-tone-fill: var(--seblify-color-fill-inverse, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-inverse-hover, #263043);
+  --seblify-tone-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-border: var(--seblify-color-border-inverse, #263043);
+}
+
+:where(.seblify-tone-publisher) {
+  --seblify-current-tone-fill: var(--seblify-tone-fill);
+  --seblify-current-tone-fill-text: var(--seblify-tone-fill-text);
+  --seblify-current-tone-surface: var(--seblify-tone-surface);
+  --seblify-current-tone-text: var(--seblify-tone-text);
+  --seblify-current-tone-border: var(--seblify-tone-border);
+}
+
+.spinner {
+    --spinner-resolved-size: var(
+      --spinner-size,
+      var(--seblify-current-size, 26px)
+    );
+    --spinner-resolved-width: var(
+      --spinner-width,
+      max(2px, calc(var(--spinner-resolved-size) / 9))
     );
+
+    display: inline-block;
+    width: var(--spinner-resolved-size);
+    height: var(--spinner-resolved-size);
+    border: var(--spinner-resolved-width) solid
+      var(--seblify-color-border, #c8d2df);
+    border-top-color: var(--seblify-tone-fill);
     border-radius: 999px;
     animation: spin 800ms linear infinite;
   }
 
-  .size-sm {
+.size-sm {
     --spinner-size: 18px;
     --spinner-width: 2px;
   }
 
-  .size-xs {
+.size-xs {
     --spinner-size: 14px;
     --spinner-width: 2px;
   }
 
-  .size-md {
+.size-md {
     --spinner-size: 26px;
     --spinner-width: 3px;
   }
 
-  .size-lg {
+.size-lg {
     --spinner-size: 38px;
     --spinner-width: 4px;
   }
 
-  .spinner[data-tone='neutral'] {
-    --spinner-color: var(--seblify-color-fill-neutral, #516176);
-  }
-
-  .spinner[data-tone='primary'] {
-    --spinner-color: var(--seblify-color-fill-primary, #146a6f);
-  }
-
-  .spinner[data-tone='success'] {
-    --spinner-color: var(--seblify-color-fill-success, #1f7a3f);
-  }
-
-  .spinner[data-tone='danger'] {
-    --spinner-color: var(--seblify-color-fill-danger, #c93434);
-  }
-
-  .spinner[data-tone='warning'] {
-    --spinner-color: var(--seblify-color-fill-warning, #8a5a00);
-  }
-
-  .spinner[data-tone='info'] {
-    --spinner-color: var(--seblify-color-fill-info, #1f6fb2);
-  }
-
-  .spinner[data-tone='inverse'] {
-    --spinner-color: var(--seblify-color-fill-inverse, #172033);
-  }
-
-  @keyframes spin {
+@keyframes spin {
     to {
       transform: rotate(360deg);
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
     .spinner {
       animation-duration: 1400ms;
     }

package/dist/components/display/media/icon/IconGlyph.svelte

@@ -33,8 +33,14 @@
 <style>
   .icon {
     display: inline-block;
-    width: var(--icon-size, var(--seblify-current-icon-size, 24px));
-    height: var(--icon-size, var(--seblify-current-icon-size, 24px));
+    width: var(
+      --icon-size,
+      var(--seblify-current-size, var(--seblify-current-icon-size, 24px))
+    );
+    height: var(
+      --icon-size,
+      var(--seblify-current-size, var(--seblify-current-icon-size, 24px))
+    );
     flex: 0 0 auto;
     color: currentColor;
     line-height: 0;

package/dist/components/display/typography/code-snippet/CodeSnippet.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  import { tokenizeCode, type CodeLanguage } from './tokenize';
+
+  type Props = SeblifyProps<{
+    code: string;
+    language?: CodeLanguage;
+    showLineNumbers?: boolean;
+    wrap?: boolean;
+  }>;
+
+  let {
+    code,
+    language = 'svelte',
+    showLineNumbers = false,
+    wrap = false,
+  }: Props = $props();
+
+  let lines = $derived(tokenizeCode(code, language));
+  let lineDigits = $derived(String(lines.length).length);
+</script>
+
+<pre
+  class="code-snippet"
+  data-language={language}
+  data-line-numbers={showLineNumbers}
+  data-wrap={wrap}
+  style={`--code-snippet-line-digits: ${lineDigits};`}><code
+    >{#each lines as line}<span class="code-snippet__row"
+        >{#if showLineNumbers}<span
+            aria-hidden="true"
+            class="code-snippet__line-number">{line.number}</span
+          >{/if}<span class="code-snippet__line"
+          >{#each line.tokens as token}<span
+              class="code-snippet__token"
+              data-token-type={token.type}>{token.text}</span
+            >{/each}</span
+        ></span
+      >{/each}</code
+  ></pre>
+
+<style>
+  .code-snippet {
+    --code-snippet-background: var(--seblify-color-surface-muted, #d9e0e8);
+    --code-snippet-border: var(--seblify-color-border, #c8d2df);
+    --code-snippet-text: var(--seblify-color-text, #172033);
+    --code-snippet-muted: var(--seblify-color-text-muted, #516176);
+    --code-snippet-comment: var(--seblify-color-text-muted, #516176);
+    --code-snippet-string: var(--seblify-color-success-text, #143d25);
+    --code-snippet-keyword: var(--seblify-color-fill-primary, #146a6f);
+    --code-snippet-number: var(--seblify-color-warning-text, #4d3900);
+    --code-snippet-tag: var(--seblify-color-info-text, #102f55);
+    --code-snippet-attribute: var(--seblify-color-fill-danger, #c93434);
+    --code-snippet-directive: var(--seblify-color-fill-primary, #146a6f);
+    --code-snippet-punctuation: var(--seblify-color-text-muted, #516176);
+
+    margin: 0;
+    overflow-x: auto;
+    border: 1px solid var(--code-snippet-border);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    color: var(--code-snippet-text);
+    background: var(--code-snippet-background);
+    font-family:
+      ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas,
+      'Liberation Mono', 'Courier New', monospace;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    tab-size: 2;
+    white-space: pre;
+  }
+
+  code {
+    display: block;
+    min-width: max-content;
+  }
+
+  .code-snippet[data-wrap='true'] {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  .code-snippet[data-wrap='true'] code {
+    min-width: 0;
+  }
+
+  .code-snippet__row {
+    display: grid;
+    grid-template-columns: minmax(0, auto);
+  }
+
+  .code-snippet[data-line-numbers='true'] .code-snippet__row {
+    grid-template-columns:
+      minmax(calc(var(--code-snippet-line-digits) * 1ch + 0.75rem), auto)
+      minmax(0, 1fr);
+    column-gap: 1rem;
+  }
+
+  .code-snippet__line-number {
+    color: var(--code-snippet-muted);
+    text-align: right;
+    user-select: none;
+  }
+
+  .code-snippet__line {
+    min-width: 0;
+  }
+
+  .code-snippet__line:empty::before {
+    content: ' ';
+    white-space: pre;
+  }
+
+  .code-snippet__token[data-token-type='comment'] {
+    color: var(--code-snippet-comment);
+  }
+
+  .code-snippet__token[data-token-type='string'] {
+    color: var(--code-snippet-string);
+  }
+
+  .code-snippet__token[data-token-type='keyword'] {
+    color: var(--code-snippet-keyword);
+  }
+
+  .code-snippet__token[data-token-type='number'] {
+    color: var(--code-snippet-number);
+  }
+
+  .code-snippet__token[data-token-type='tag'] {
+    color: var(--code-snippet-tag);
+  }
+
+  .code-snippet__token[data-token-type='attribute'] {
+    color: var(--code-snippet-attribute);
+  }
+
+  .code-snippet__token[data-token-type='directive'] {
+    color: var(--code-snippet-directive);
+  }
+
+  .code-snippet__token[data-token-type='punctuation'] {
+    color: var(--code-snippet-punctuation);
+  }
+</style>

package/dist/components/display/typography/code-snippet/CodeSnippet.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type CodeLanguage } from './tokenize';
+declare const CodeSnippet: import("svelte").Component<{
+    code: string;
+    language?: CodeLanguage | undefined;
+    showLineNumbers?: boolean | undefined;
+    wrap?: boolean | undefined;
+}, {}, "">;
+type CodeSnippet = ReturnType<typeof CodeSnippet>;
+export default CodeSnippet;

package/dist/components/display/typography/code-snippet/tokenize.d.ts

@@ -0,0 +1,10 @@
+export type CodeLanguage = 'svelte' | (string & {});
+export interface CodeToken {
+    text: string;
+    type: 'plain' | 'comment' | 'string' | 'keyword' | 'number' | 'tag' | 'attribute' | 'directive' | 'punctuation';
+}
+export interface CodeLine {
+    number: number;
+    tokens: CodeToken[];
+}
+export declare function tokenizeCode(source: string, language?: CodeLanguage): CodeLine[];