seblify 0.2.1 → 0.4.0

package/dist/components/display/typography/highlight/Highlight.svelte.d.ts

@@ -1,4 +1,4 @@
-type HighlightTone = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info';
+type HighlightTone = 'neutral' | 'strong' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 type HighlightVariant = 'soft' | 'tint' | 'plain';
 declare const Highlight: import("svelte").Component<{
     query?: string | string[] | undefined;

package/dist/components/framework/layout/container/app-shell/AppShell.svelte

@@ -9,7 +9,12 @@
     sidebarWidth?: string;
   }>;
 
-  let { children, header, sidebar, sidebarWidth = 'max-content' }: Props = $props();
+  let {
+    children,
+    header,
+    sidebar,
+    sidebarWidth = 'max-content',
+  }: Props = $props();
 </script>
 
 <div class="app-shell" style:--app-shell-sidebar-width={sidebarWidth}>
@@ -34,10 +39,14 @@
 
 <style>
   .app-shell {
+    --app-shell-background: var(--seblify-color-background, #f4f6f8);
+    --app-shell-sidebar-background: var(--seblify-color-surface, #ffffff);
+    --app-shell-workspace-background: var(--app-shell-background);
+
     display: grid;
     grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
     min-height: 100vh;
-    background: var(--seblify-color-page, #f4f6f8);
+    background: var(--app-shell-background);
     color: var(--seblify-color-text, #172033);
   }
 
@@ -50,6 +59,11 @@
   .app-shell__workspace {
     display: grid;
     grid-template-rows: auto minmax(0, 1fr);
+    background: var(--app-shell-workspace-background);
+  }
+
+  .app-shell__sidebar {
+    background: var(--app-shell-sidebar-background);
   }
 
   .app-shell__header {

package/dist/components/framework/navigation/context/breadcrumb/Breadcrumb.svelte

@@ -58,7 +58,7 @@
   }
 
   a {
-    color: var(--seblify-color-fill-accent, #146a6f);
+    color: var(--seblify-color-primary-text, #0d4d52);
     text-decoration: none;
   }
 

package/dist/components/framework/navigation/sidebar/sidebar/Sidebar.svelte

@@ -265,7 +265,7 @@
       <div class="sidebar__main-nav">
         <Sidenav
           compact={compactMode}
-          currentHref={currentHref}
+          {currentHref}
           defaultOpenIds={compactMode ? [] : mainOpenIds}
           {items}
           {label}
@@ -281,7 +281,7 @@
           {#if footerItems.length}
             <Sidenav
               compact={compactMode}
-              currentHref={currentHref}
+              {currentHref}
               defaultOpenIds={compactMode ? [] : mainOpenIds}
               items={footerItems}
               {label}
@@ -316,21 +316,29 @@
             <span aria-hidden="true">
               <ChevronLeftIcon size="1rem" />
             </span>
-            <span class="sidebar__deep-title">{deepPanelRoot.label ?? 'Section'}</span>
+            <span class="sidebar__deep-title"
+              >{deepPanelRoot.label ?? 'Section'}</span
+            >
           </a>
         {:else}
-          <button class="sidebar__deep-back" onclick={expandMainPanel} type="button">
+          <button
+            class="sidebar__deep-back"
+            onclick={expandMainPanel}
+            type="button"
+          >
             <span aria-hidden="true">
               <ChevronLeftIcon size="1rem" />
             </span>
-            <span class="sidebar__deep-title">{deepPanelRoot.label ?? 'Section'}</span>
+            <span class="sidebar__deep-title"
+              >{deepPanelRoot.label ?? 'Section'}</span
+            >
           </button>
         {/if}
       </div>
 
       <div class="sidebar__deep-nav">
         <Sidenav
-          currentHref={currentHref}
+          {currentHref}
           defaultOpenIds={deepPanelOpenIds}
           items={deepPanelItems}
           {label}
@@ -405,6 +413,9 @@
     --sidebar-deep-width: 20rem;
     --sidebar-desktop-main-width: var(--sidebar-panel-width);
     --sidebar-desktop-deep-width: 0rem;
+    --sidebar-main-background: var(--seblify-color-surface, #ffffff);
+    --sidebar-deep-background: var(--seblify-color-surface-raised, #ffffff);
+    --sidebar-panel-border: var(--seblify-color-surface-muted, #d9e0e8);
     color: var(--seblify-color-text, #172033);
   }
 
@@ -504,7 +515,7 @@
     height: 100%;
     overflow-x: clip;
     overflow-y: auto;
-    background: var(--seblify-color-surface, #ffffff);
+    background: var(--sidebar-main-background);
   }
 
   .sidebar--desktop .sidebar__main-panel {
@@ -543,7 +554,7 @@
   }
 
   .sidebar__main-panel {
-    border-right: 1px solid var(--seblify-color-surface-muted, #d9e0e8);
+    border-right: 1px solid var(--sidebar-panel-border);
   }
 
   .sidebar__deep-panel {
@@ -551,8 +562,22 @@
     grid-template-rows: auto minmax(0, 1fr);
     gap: 0.75rem;
     padding: 1rem 0.875rem;
-    border-right: 1px solid var(--seblify-color-surface-muted, #d9e0e8);
-    background: var(--seblify-color-surface-raised, #ffffff);
+    border-right: 1px solid var(--sidebar-panel-border);
+    background: var(--sidebar-deep-background);
+  }
+
+  :global([data-color-mode='dark']) .sidebar {
+    --sidebar-main-background: #0e0b0a;
+    --sidebar-deep-background: #15110f;
+    --sidebar-panel-border: #241d19;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :global(:root:not([data-color-mode])) .sidebar {
+      --sidebar-main-background: #0e0b0a;
+      --sidebar-deep-background: #15110f;
+      --sidebar-panel-border: #241d19;
+    }
   }
 
   .sidebar__main-stack {

package/dist/components/framework/navigation/sidebar/sidenav/Sidenav.svelte

@@ -163,12 +163,12 @@
   .sidenav {
     --seblify-sidenav-accent-background: color-mix(
       in srgb,
-      var(--seblify-color-fill-primary, #146a6f) 22%,
+      var(--seblify-color-primary-fill, #146a6f) 22%,
       transparent
     );
     --seblify-sidenav-accent-foreground: var(
-      --seblify-color-fill-primary,
-      #146a6f
+      --seblify-color-primary-text,
+      #0d4d52
     );
     --seblify-sidenav-hover-background: var(
       --seblify-color-surface-hover,
@@ -176,11 +176,11 @@
     );
     --seblify-sidenav-link-label: var(--seblify-color-text-muted, #aebdd2);
     --seblify-sidenav-link-label-current: var(--seblify-color-text, #ffffff);
-    --seblify-sidenav-disabled: var(--seblify-color-text-disabled, #58677b);
+    --seblify-sidenav-disabled: var(--seblify-color-text-subtle, #58677b);
     --seblify-sidenav-supporting: color-mix(
       in srgb,
       var(--seblify-color-text-subtle, #667085) 45%,
-      var(--seblify-color-text-disabled, #58677b) 55%
+      var(--seblify-color-text-muted, #58677b) 55%
     );
     font-size: 0.925rem;
   }