@nil-/doc 0.2.24 → 0.2.25

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nil-/doc
 
+## 0.2.25
+
+### Patch Changes
+
+-   186187c: [doc][breaking] removed layout slot prop for content. all unnamed slots will be part of the default slot
+-   186187c: [doc] fix range tooltip styling
+-   a82c0de: [doc] support dark/light mode
+
 ## 0.2.24
 
 ### Patch Changes

package/components/Layout.svelte

@@ -2,8 +2,6 @@
     .layout {
         width: 100%;
         height: 100%;
-        color: rgb(201, 205, 207);
-        background-color: rgb(34, 36, 37);
         font-family: "Fira Code", "Courier New", Courier, monospace;
     }
 
@@ -38,18 +36,35 @@
     .scrollable::-webkit-scrollbar {
         display: none;
     }
+
+    /* colors */
+    .layout {
+        background-color: hsl(0, 0%, 100%);
+        color: hsl(0, 100%, 0%);
+        color-scheme: light;
+    }
+
+    .layout.dark {
+        background-color: hsl(200, 4%, 14%);
+        color: hsl(200, 6%, 80%);
+        color-scheme: dark;
+    }
 </style>
 
 <script>import Container from "./etc/Container.svelte";
 import Nav from "./navigation/Nav.svelte";
-import { inRoot } from "./context";
+import { inRoot, getTheme, initTheme, evalTheme } from "./context";
 export let data;
 export let current = null;
 export let sorter = null;
 export let renamer = null;
+export let theme = undefined;
 const r = inRoot();
+const parentTheme = getTheme();
+const isDark = initTheme();
+$: $isDark = evalTheme(parentTheme ? $parentTheme : true, theme);
 </script>
-<div class="layout" class:reset={r}>
+<div class="layout" class:reset={r} class:dark={$isDark}>
     <Container offset={250} padding={250} vertical secondary>
         <svelte:fragment slot="primary">
             <div class="content scrollable">
@@ -67,7 +82,7 @@ const r = inRoot();
         <svelte:fragment slot="secondary">
             <div class="content scrollable">
                 {#key current}
-                    <slot name="content" />
+                    <slot />
                 {/key}
             </div>
         </svelte:fragment>

package/components/Layout.svelte.d.ts

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Sorter, Renamer } from "./navigation/types";
+import { type Theme } from "./context";
 declare const __propDef: {
     props: {
         data: string[];
         current?: string | null | undefined;
         sorter?: Sorter | null | undefined;
         renamer?: Renamer | null | undefined;
+        theme?: Theme;
     };
     events: {
         navigate: CustomEvent<any>;
@@ -14,7 +16,7 @@ declare const __propDef: {
     };
     slots: {
         title: {};
-        content: {};
+        default: {};
     };
 };
 export type LayoutProps = typeof __propDef.props;

package/components/block/Block.svelte

@@ -1,12 +1,3 @@
-<script>import { initParams, initCurrent, initDefaults, initControls, initControlsState } from "./context";
-import { inRoot } from "../context";
-initParams();
-initCurrent();
-initDefaults();
-initControls();
-initControlsState();
-const r = inRoot();
-</script>
 <style>
     div {
         display: flex;
@@ -26,10 +17,33 @@ const r = inRoot();
         box-sizing: border-box;
         font-family: "Fira Code", "Courier New", Courier, monospace;
     }
-</style>
 
+    /* colors */
+    div {
+        color-scheme: light;
+        color: hsl(0, 100%, 0%);
+    }
+
+    div.dark {
+        color-scheme: dark;
+        color: hsl(200, 6%, 80%);
+    }
+</style>
 
-<div class:reset={r}>
+<script>import { initParams, initCurrent, initDefaults, initControls, initControlsState } from "./context";
+import { inRoot, getTheme, initTheme, evalTheme } from "../context";
+initParams();
+initCurrent();
+initDefaults();
+initControls();
+initControlsState();
+const r = inRoot();
+export let theme = undefined;
+const parentTheme = getTheme();
+const isDark = initTheme();
+$: $isDark = evalTheme(parentTheme ? $parentTheme : false, theme);
+</script>
+<div class:reset={r} class:dark={$isDark}>
     <slot />
 </div>
 

package/components/block/Block.svelte.d.ts

@@ -1,6 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import { type Theme } from "../context";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        theme?: Theme;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/block/Template.svelte

@@ -21,12 +21,9 @@
     .content {
         min-height: 100px;
         border-radius: 5px 5px 5px 5px;
-        border: rgb(100, 96, 96) solid 1px;
-        background-color: rgb(33, 36, 37);
     }
 
     .misc {
-        outline: rgb(100, 96, 96) solid 1px;
         border-bottom-left-radius: 5px;
         border-bottom-right-radius: 5px;
         user-select: none;
@@ -46,12 +43,32 @@
     .scrollable::-webkit-scrollbar {
         display: none;
     }
+
+    /* colors */
+    .content {
+        border: hsl(0, 2%, 60%) solid 1px;
+        background-color: hsl(0, 0%, 100%);
+    }
+
+    .misc {
+        border: hsl(0, 2%, 60%) solid 1px;
+    }
+
+    .content.dark {
+        border: hsl(0, 2%, 40%) solid 1px;
+        background-color: hsl(200, 4%, 14%);
+    }
+
+    .misc.dark {
+        outline: hsl(0, 2%, 40%) solid 1px;
+    }
 </style>
 <svelte:window on:click={() => ($current = null)} />
 
 <script>import { getParams, getCurrent, getDefaults } from "./context";
 import { getControls, getControlsState } from "./context";
 import { resolve } from "./utils";
+import { getTheme } from "../context";
 import Controls from "./controls/Controls.svelte";
 import { beforeUpdate } from "svelte";
 import { slide } from "svelte/transition";
@@ -60,6 +77,7 @@ const current = getCurrent();
 const controls = getControls();
 const controlsState = getControlsState();
 const defaultsStore = getDefaults();
+const isDark = getTheme();
 export let defaults = undefined;
 export let noreset = false;
 export let columns = false;
@@ -94,7 +112,7 @@ const resolveArgs = (resolve);
             on:keypress={null}
         >
             {#if noreset}
-                <div class="content scrollable">
+                <div class="content scrollable" class:dark={$isDark}>
                     <slot
                         id={param.id}
                         tag={param.tag}
@@ -104,7 +122,7 @@ const resolveArgs = (resolve);
                 </div>
             {:else}
                 {#key key}
-                    <div class="content scrollable">
+                    <div class="content scrollable" class:dark={$isDark}>
                         <slot
                             id={param.id}
                             tag={param.tag}
@@ -115,7 +133,7 @@ const resolveArgs = (resolve);
                 {/key}
             {/if}
             {#if $controls.length > 0 && ($controlsState.expand || $current === param.id || hovered === param.id)}
-                <div class="misc scrollable" transition:slide|local>
+                <div class="misc scrollable" class:dark={$isDark} transition:slide|local>
                     <Controls infos={$controls} bind:values={param.values} />
                 </div>
             {/if}

package/components/block/controls/misc/Styler.svelte

@@ -1,3 +1,6 @@
+<script>import { getTheme } from "../../../context";
+const isDark = getTheme();
+</script>
 <style>
     div {
         width: 100%;
@@ -8,7 +11,9 @@
         box-sizing: border-box;
     }
 
-    div :global(*) {
+    div :global(*),
+    div :global(*::before),
+    div :global(*::after) {
         box-sizing: inherit;
     }
 
@@ -17,16 +22,6 @@
         display: grid;
         padding: 2px 0px;
         grid-template-columns: minmax(250px, 1fr) 200px 40px;
-        background-color: hsl(205, 50%, 5%);
-    }
-
-    div > :global(div:nth-child(even)) {
-        background-color: hsl(205, 15%, 15%);
-    }
-
-    div > :global(div:hover .tooltip),
-    div > :global(div:nth-child(n + 2):hover) {
-        background-color: hsl(203, 100%, 15%);
     }
 
     div > :global(div > div) {
@@ -38,9 +33,45 @@
         width: 100%;
         height: 100%;
     }
+
+    /* colors */
+    div > :global(div) {
+        background-color: hsl(0, 0%, 100%);
+    }
+
+    div > :global(div:nth-child(even)) {
+        background-color: hsl(210, 29%, 97%);
+    }
+
+    div > :global(div:nth-child(n + 2):hover) {
+        background-color: hsl(210, 100%, 90%);
+    }
+
+    div > :global(div:hover .tooltip) {
+        background-color: hsl(0, 0%, 100%);
+        outline: hsl(0, 100%, 0%) 1px solid;
+    }
+
+    div.dark > :global(div) {
+        background-color: hsl(213, 26%, 7%);
+    }
+
+    div.dark > :global(div:nth-child(even)) {
+        background-color: hsl(213, 26%, 11%);
+    }
+
+    div.dark > :global(div:nth-child(n + 2):hover) {
+        background-color: hsl(203, 100%, 15%);
+    }
+
+    div.dark > :global(div:hover .tooltip) {
+        background-color: hsl(213, 26%, 7%);
+        outline: hsl(200, 6%, 80%) 1px solid;
+    }
 </style>
 
-<div>
+
+<div class:dark={$isDark}>
     <slot />
 </div>
 

package/components/block/controls/misc/Styler.svelte.d.ts

@@ -1,22 +1,6 @@
-/** @typedef {typeof __propDef.props}  StylerProps */
-/** @typedef {typeof __propDef.events}  StylerEvents */
-/** @typedef {typeof __propDef.slots}  StylerSlots */
-export default class Styler extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type StylerProps = typeof __propDef.props;
-export type StylerEvents = typeof __propDef.events;
-export type StylerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -24,4 +8,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type StylerProps = typeof __propDef.props;
+export type StylerEvents = typeof __propDef.events;
+export type StylerSlots = typeof __propDef.slots;
+export default class Styler extends SvelteComponentTyped<StylerProps, StylerEvents, StylerSlots> {
+}
 export {};

package/components/context.d.ts

@@ -1 +1,6 @@
+import type { Writable } from "svelte/store";
 export declare function inRoot(): boolean;
+export type Theme = undefined | "light" | "dark";
+export declare function getTheme(): Writable<boolean>;
+export declare function initTheme(): Writable<boolean>;
+export declare function evalTheme(parent: boolean, theme: Theme): boolean;

package/components/context.js

@@ -1,7 +1,18 @@
 import { setContext, getContext } from "svelte";
+import { writable } from "svelte/store";
 const root = Symbol();
 export function inRoot() {
     const value = getContext(root);
     setContext(root, false);
     return value !== false;
 }
+const theme = Symbol();
+export function getTheme() {
+    return getContext(theme);
+}
+export function initTheme() {
+    return setContext(theme, writable(true));
+}
+export function evalTheme(parent, theme) {
+    return theme === undefined ? parent : theme === "dark";
+}

package/components/etc/Container.svelte

@@ -28,11 +28,6 @@
         overflow: visible;
         user-select: none;
         grid-area: divider;
-        outline: rgb(100, 96, 96) solid 1px;
-    }
-
-    .container > .divider.moving {
-        outline: rgb(255, 255, 255) solid 1px;
     }
 
     .container > .divider.vertical {
@@ -54,10 +49,29 @@
         cursor: col-resize;
         transform: translateX(-50%);
     }
+
+    /* colors */
+    .container > .divider {
+        outline: hsl(0, 2%, 70%) solid 1px;
+    }
+
+    .container > .divider.moving {
+        outline: hsl(0, 0%, 0%) solid 1px;
+    }
+
+    .container.dark > .divider {
+        outline: hsl(0, 2%, 38%) solid 1px;
+    }
+
+    .container.dark > .divider.moving {
+        outline: hsl(0, 0%, 100%) solid 1px;
+    }
 </style>
 
 <script>import { writable } from "svelte/store";
 import { createDraggable } from "./action";
+import { getTheme } from "../context";
+const isDark = getTheme();
 // orientation of the layout
 export let vertical = false;
 // initial value where the divider is located
@@ -86,6 +100,7 @@ const moving = writable(false);
 <div
     class="container"
     class:vertical
+    class:dark={$isDark}
     bind:clientHeight={height}
     bind:clientWidth={width}
     style:grid-template-columns={vertical ? style : null}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.24",
+  "version": "0.2.25",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"