sveltekit-ui 1.1.39 → 1.1.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.1.39",
+  "version": "1.1.41",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -19,14 +19,14 @@
   "dependencies": {
     "context-filter-polyfill": "^0.3.23",
     "qr-code-styling": "^1.9.2",
-    "svelte": "^5.50.1"
+    "svelte": "^5.53.5"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.22.2"
   },
   "devDependencies": {
-    "@sveltejs/adapter-vercel": "^6.3.1",
-    "@sveltejs/kit": "^2.50.2",
+    "@sveltejs/adapter-vercel": "^6.3.3",
+    "@sveltejs/kit": "^2.53.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@vercel/analytics": "^1.6.1",

package/src/routes/+page.svelte

@@ -9,6 +9,57 @@
   import { definitions, docs_definition_to_sample_code, docs_overview_code_sample } from "$lib/client/docs/index.js"
   import { copy_to_clipboard } from "$lib/client/index.js"
 
+  const colors_section = `color system (oklch css variables)
+
+overview
+- all colors are exposed as css custom properties (variables).
+- most of the time you should use the "-t" themed versions (they automatically flip for dark mode).
+- variables are designed to be composable: oklch(lightness chroma hue / alpha).
+
+core pieces
+1) lightness scale
+- --l0 ... --l24 are lightness steps for the default (light) theme.
+- --l0-t ... --l24-t are the themed lightness steps (invert in dark theme).
+
+2) hue + chroma scales
+- --h0 ... --h24 are hue steps (0-360-ish).
+- --c0 ... --c24 are chroma steps (0-1-ish).
+- --o0 ... --o24 are opacity steps (0-1).
+
+3) grayscale system tied to the primary hue
+- --g0 ... --g24 and --g0-t ... --g24-t are “neutral grays” but actually oklch grays tinted toward --primary-h.
+- use these for almost everything (text, borders, surfaces) because they stay cohesive with your primary color.
+
+theme guidance
+- use *-t variables by default (ex: var(--g6-t), var(--bg), var(--shadow3-t)).
+- use non -t variables only if you explicitly want the same value in light and dark modes.
+
+recommended usage patterns
+- page background: var(--bg)
+- elevated/surface background: var(--bg2) or var(--shadow1-t) (subtle)
+- primary brand color: var(--primary) or var(--primary-t)
+- primary text: var(--g6-t)
+- muted text / labels: var(--g10-t) to var(--g14-t)
+- borders / dividers: var(--g16-t) or var(--shadow7-t)
+- shadows: var(--shadow1-t) ... var(--shadow10-t)
+- tints (light overlays): var(--tint1-t) ... var(--tint10-t)
+
+states
+- focus ring: var(--selected-t) with contrast ring var(--g1-t)
+- error/warning/success: var(--error-t), var(--warning-t), var(--success-t)
+
+examples
+- text color: color: var(--g6-t);
+- surface: background: var(--bg2);
+- border: box-shadow: inset 0 0 0 1px var(--shadow7-t);
+- primary button: background: var(--primary-t); color: var(--primary-contrast-t);
+- translucent primary: background: var(--primary-transparent1-t);
+
+dark theme
+- dark theme is activated with [data-theme="dark"] on a parent element.
+- in dark theme, the -t lightness ramp is inverted so your chosen step numbers still "mean" the same thing (lower = darker surface, higher = brighter surface), without rewriting styles.
+`
+
   let content_manager = create_content_manager({
     val: {
       type_id: "div",
@@ -255,6 +306,26 @@
     },
   })
 
+  const overview = `Each component can be combined into a more complex component. This is intended for sveltekit projects. The whole "tree" of components should be initialized at the parent-most level which is likely in the <script> tags of a +page.svelte file.
+      
+${docs_overview_code_sample}
+
+${colors_section}
+
+below are the docs for each component individually
+
+`
+
+  let docs_prepped = {}
+  for (let [key, definition] of Object.entries(definitions)) {
+    let sample_code = docs_definition_to_sample_code(definition)
+    docs_prepped[key] = {
+      ...definition,
+      sample_code: sample_code,
+    }
+  }
+  const all_docs = overview + JSON.stringify(docs_prepped)
+
   let button_manager = create_button_manager({
     text: "Visit Docs",
     mt: 2,
@@ -269,25 +340,7 @@
     is_success_animation: true,
     mt: 2,
     support_icon: "clipboard",
-    on_click: () => {
-      const overview = `Each component can be combined into a more complex component. This is intended for sveltekit projects. The whole "tree" of components should be initialized at the parent-most level which is likely in the <script> tags of a +page.svelte file.
-      
-${docs_overview_code_sample}
-
-below are the docs for each component individually
-
-`
-
-      let docs_prepped = {}
-      for (let [key, definition] of Object.entries(definitions)) {
-        let sample_code = docs_definition_to_sample_code(definition)
-        docs_prepped[key] = {
-          ...definition,
-          sample_code: sample_code,
-        }
-      }
-      copy_to_clipboard(overview + JSON.stringify(docs_prepped))
-    },
+    on_click: () => copy_to_clipboard(all_docs),
   })
 
   let youtube_video_manager = create_youtube_video_manager({
@@ -302,9 +355,10 @@ below are the docs for each component individually
   <Content manager={content_manager} />
   <Button manager={button_manager} />
   <Button manager={copy_all_docs_button_manager} />
-  <p>
-    Questions? Email <a href="mailto:info@sveltekit-ui.com">info@sveltekit-ui.com</a>
-  </p>
+  <div>
+    <h3>All Docs</h3>
+    {all_docs}
+  </div>
 </div>
 
 <style>