web_lib

commit f96cd2b71c8607b7d59f45ba695584411176240c
parent 5314eb164af8818d7aa4f63024223b4a7b5feb80
Author: triesap <137732411+triesap@users.noreply.github.com>
Date:   Mon, 26 Aug 2024 15:16:04 +0000

apps-lib: update trellis styles

Diffstat:
M
apps-lib/src/lib/components/trellis.svelte
 | 
1
+
M
apps-lib/src/lib/components/trellis_default_label.svelte
 | 
4
++--
M
apps-lib/src/lib/components/trellis_offset.svelte
 | 
5
++++-
M
apps-lib/src/lib/components/trellis_title.svelte
 | 
4
++--

4 files changed, 9 insertions(+), 5 deletions(-)
diff --git a/apps-lib/src/lib/components/trellis.svelte b/apps-lib/src/lib/components/trellis.svelte
@@ -79,6 +79,7 @@
                             <svelte:component
                                 this={trellis_offset}
                                 basis={basis.offset}
+                                layer={args.layer}
                             />
                             {#if `touch` in basis && basis.touch}
                                 <svelte:component
diff --git a/apps-lib/src/lib/components/trellis_default_label.svelte b/apps-lib/src/lib/components/trellis_default_label.svelte
@@ -8,10 +8,10 @@
 </script>
 
 <div class={`${fmt_cl(classes)} flex flex-row`}>
-    <p class={`font-sans text-labelTrellis text-layer-${layer}-glyph-shade`}>
+    <p class={`font-sans text-trellisTitle text-layer-${layer}-glyph-shade`}>
         {#each labels as label}
             <span
-                class={`${fmt_cl(label.classes)} font-sans text-labelTrellis`}
+                class={`${fmt_cl(label.classes)} font-sans text-trellisTitle`}
             >
                 {#if `route` in label}
                     <a href={label.route}>
diff --git a/apps-lib/src/lib/components/trellis_offset.svelte b/apps-lib/src/lib/components/trellis_offset.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import type { ThemeLayer } from "@radroots/theme";
     import {
         fill,
         fmt_cl,
@@ -8,13 +9,14 @@
     } from "..";
 
     export let basis: ITrellisBasisOffset | undefined;
+    export let layer: ThemeLayer;
 
     let mod: ITrellisBasisOffsetMod = `sm`;
     $: mod = basis && basis.mod ? basis.mod : `sm`;
 </script>
 
 {#if mod !== `none`}
-    <div class={`flex flex-row h-full`}>
+    <div class={`flex flex-row h-full min-w-[34px]`}>
         {#if mod === `sm`}
             <div class={`${fmt_cl(``)} flex flex-row h-full w-[22px]`}>
                 <svelte:component this={fill} />
@@ -41,6 +43,7 @@
                     <svelte:component
                         this={glyph}
                         basis={{
+                            classes: `text-layer-${layer}-glyph ${fmt_cl(mod.classes ? `` : ``)}`,
                             ...mod,
                         }}
                     />
diff --git a/apps-lib/src/lib/components/trellis_title.svelte b/apps-lib/src/lib/components/trellis_title.svelte
@@ -21,7 +21,7 @@
 			<svelte:component this={fill} />
 		{:else}
 			<p
-				class={`font-sans text-labelTrellis text-layer-${layer}-glyph-label uppercase`}
+				class={`font-sans text-trellisTitle text-layer-${layer}-glyph-label uppercase`}
 			>
 				{basis.value || ``}
 			</p>
@@ -37,7 +37,7 @@
 		>
 			{#if basis.link.glyph}
 				<p
-					class={`${fmt_cl(basis.link.glyph.classes)} font-sans text-labelTrellis uppercase fade-in`}
+					class={`${fmt_cl(basis.link.glyph.classes)} font-sans text-trellisTitle uppercase fade-in`}
 				>
 					{basis.link.glyph.value || ``}
 				</p>