nordcode-agency · JSHSJ · Apr 30, 2025 · Apr 19, 2025 · Apr 19, 2025
diff --git a/apps/ui-generator/src/layouts/Layout.astro b/apps/ui-generator/src/layouts/Layout.astro
@@ -38,10 +38,6 @@ const { title } = Astro.props;
 <style is:global>
     @import '@nordcode/ui/complete';
 
-    html {
-        font-size: clamp(0.875rem, 0.75rem + 0.2vw, 1rem);
-    }
-
     body {
         max-block-size: 100%;
         overflow: hidden;

diff --git a/apps/ui-generator/src/modules/components/cssVariables/buttonVariables.ts b/apps/ui-generator/src/modules/components/cssVariables/buttonVariables.ts
@@ -45,7 +45,7 @@ export const buttonVariables = [
         description: 'Set default button inline padding. Default: <var>1ch</var>.',
     },
     {
-        name: '--button-height-base',
+        name: '--control-height-base',
         description: 'Set the min button height. Default: <not set>',
     },
 ];
diff --git a/apps/ui-generator/src/modules/generator/components/Themepicker.astro b/apps/ui-generator/src/modules/generator/components/Themepicker.astro
@@ -11,7 +11,7 @@
         isolation: isolate;
         flex-shrink: 0;
         background: var(--color-surface-emphasis);
-        block-size: var(--button-height-small);
+        block-size: var(--control-height-small);
         border-radius: var(--border-radius-round);
         padding-inline: 0.5ch;
     }

diff --git a/apps/ui-generator/src/modules/presets/DensityPresets.ts b/apps/ui-generator/src/modules/presets/DensityPresets.ts
@@ -0,0 +1,75 @@
+import type { ConfigStore } from '../store/configStore';
+
+export type DensityPresetName = 'compact' | 'default' | 'spacious';
+
+export const DensityPresets: Record<DensityPresetName, Partial<ConfigStore>> = {
+    compact: {
+        controlHeightBase: 2.25,
+        controlHeightSmall: 1.75,
+
+        lineHeightLarge: 1.6,
+        lineHeightBase: 1.4,
+        lineHeightSmall: 1.1,
+
+        spacingTiny: 0.125,
+        spacingNearest: 0.2,
+        spacingNear: 0.375,
+        spacingBase: 0.75,
+        spacingFar: 1.5,
+        spacingFarthest: 3,
+
+        controlSpacingMinimal: 0.0625,
+        controlSpacingTiny: 0.125,
+        controlSpacingNearest: 0.25,
+        controlSpacingNear: 0.37,
+        controlSpacingBase: 0.5,
+        controlSpacingFar: 0.75,
+        controlSpacingFarthest: 1,
+    },
+    default: {
+        controlHeightBase: 2.5,
+        controlHeightSmall: 2,
+
+        lineHeightLarge: 1.85,
+        lineHeightBase: 1.55,
+        lineHeightSmall: 1.1,
+
+        spacingTiny: 0.125,
+        spacingNearest: 0.25,
+        spacingNear: 0.5,
+        spacingBase: 1,
+        spacingFar: 2,
+        spacingFarthest: 4,
+
+        controlSpacingMinimal: 0.125,
+        controlSpacingTiny: 0.25,
+        controlSpacingNearest: 0.375,
+        controlSpacingNear: 0.5,
+        controlSpacingBase: 0.75,
+        controlSpacingFar: 1,
+        controlSpacingFarthest: 1.5,
+    },
+    spacious: {
+        controlHeightBase: 3,
+        controlHeightSmall: 2.5,
+
+        lineHeightLarge: 1.95,
+        lineHeightBase: 1.65,
+        lineHeightSmall: 1.25,
+
+        spacingTiny: 0.25,
+        spacingNearest: 0.5,
+        spacingNear: 0.75,
+        spacingBase: 1.25,
+        spacingFar: 2.5,
+        spacingFarthest: 5,
+
+        controlSpacingMinimal: 0.1875,
+        controlSpacingTiny: 0.375,
+        controlSpacingNearest: 0.5,
+        controlSpacingNear: 0.75,
+        controlSpacingBase: 1,
+        controlSpacingFar: 1.25,
+        controlSpacingFarthest: 1.75,
+    },
+} as const;
diff --git a/apps/ui-generator/src/modules/presets/components/PresetSettings.svelte b/apps/ui-generator/src/modules/presets/components/PresetSettings.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-import { configStore, setPreset } from '../../store/configStore';
+import { configStore, setDensityPreset, setPreset } from '../../store/configStore';
 </script>
 
 {#if configStore}
     <div class="nc-region content-block">
         <form class="nc-stack -far -full-width -stretched">
-            <div class="settings-container">
-                <fieldset class="nc-fieldset nc-stack">
+            <div class="settings-container nc-stack -far">
+                <fieldset class="nc-fieldset">
                     <legend>Presets</legend>
                     <div class="nc-cluster">
                         <button class="nc-button" type="button" on:click={() => setPreset('modern')}>Modern</button>
@@ -15,6 +15,15 @@ import { configStore, setPreset } from '../../store/configStore';
                         <button class="nc-button" type="button" on:click={() => setPreset('elegant')}>Elegant</button>
                     </div>
                 </fieldset>
+
+                <fieldset class="nc-fieldset">
+                    <legend>Density Presets</legend>
+                    <div class="nc-cluster">
+                        <button class="nc-button" type="button" on:click={() => setDensityPreset('compact')}>Compact</button>
+                        <button class="nc-button" type="button" on:click={() => setDensityPreset('default')}>Default</button>
+                        <button class="nc-button" type="button" on:click={() => setDensityPreset('spacious')}>Spacious</button>
+                    </div>
+                </fieldset>
             </div>
         </form>
     </div>

diff --git a/apps/ui-generator/src/modules/store/configStore.ts b/apps/ui-generator/src/modules/store/configStore.ts
@@ -1,4 +1,5 @@
 import { localStore } from '@nordcode/forms-svelte';
+import { type DensityPresetName, DensityPresets } from '../presets/DensityPresets';
 import type { PresetName } from '../presets/Presets';
 import { Presets } from '../presets/Presets';
 
@@ -50,6 +51,14 @@ export type ConfigStore = {
 
     spacingScale: number;
 
+    controlSpacingMinimal: number;
+    controlSpacingTiny: number;
+    controlSpacingNearest: number;
+    controlSpacingNear: number;
+    controlSpacingBase: number;
+    controlSpacingFar: number;
+    controlSpacingFarthest: number;
+
     borderRadiusNone: number;
     borderWidthThin: number;
     borderWidthMedium: number;
@@ -118,6 +127,9 @@ export type ConfigStore = {
     darkNeutralBorderLightness: number;
 
     transparencyWeaker: number;
+
+    controlHeightBase: number;
+    controlHeightSmall: number;
 };
 
 const defaultStore: ConfigStore = {
@@ -165,6 +177,14 @@ const defaultStore: ConfigStore = {
 
     spacingScale: 2,
 
+    controlSpacingMinimal: 0.125,
+    controlSpacingTiny: 0.25,
+    controlSpacingNearest: 0.375,
+    controlSpacingNear: 0.5,
+    controlSpacingBase: 0.75,
+    controlSpacingFar: 1,
+    controlSpacingFarthest: 1.5,
+
     borderRadiusNone: 0,
     borderWidthThin: 1,
     borderWidthMedium: 2,
@@ -232,6 +252,9 @@ const defaultStore: ConfigStore = {
     darkTextLightnessScaleFactor: 0.88,
     darkSurfaceLightnessScaleFactor: 1.3,
     darkBorderLightnessScaleFactor: 0.98,
+
+    controlHeightBase: 2.5,
+    controlHeightSmall: 2,
 };
 
 const round = (num: number) => Math.round(num * 1000) / 1000;
@@ -332,6 +355,15 @@ export const setPreset = (preset: PresetName) => {
     });
 };
 
+export const setDensityPreset = (preset: DensityPresetName) => {
+    configStore?.update((store) => {
+        return {
+            ...store,
+            ...DensityPresets[preset],
+        };
+    });
+};
+
 export const configStore =
     typeof localStorage === 'undefined'
         ? undefined

diff --git a/apps/ui-generator/src/modules/store/utils/generateStyleString.ts b/apps/ui-generator/src/modules/store/utils/generateStyleString.ts
@@ -48,6 +48,12 @@ export const generateStyleString = (store: ConfigStore): string => {
         --spacing-far: ${store.spacingFar}rem;
         --spacing-farthest: ${store.spacingFarthest}rem;
 
+        --spacing-tiny: ${store.spacingTiny}rem;
+        --spacing-nearest: ${store.spacingNearest}rem;
+        --spacing-near: ${store.spacingNear}rem;
+        --spacing-base: ${store.spacingBase}rem;
+        --spacing-far: ${store.spacingFar}rem;
+        --spacing-farthest: ${store.spacingFarthest}rem;
 
         /* Borders */
 
@@ -61,6 +67,19 @@ export const generateStyleString = (store: ConfigStore): string => {
         --border-radius-large: ${store.borderRadiusLarge}px;
         --border-radius-round: 1e5px;
 
+        /* UI Density Elements */
+
+        --control-height-base: ${store.controlHeightBase}em;
+        --control-height-small: ${store.controlHeightSmall}em;
+
+        --control-spacing-minimal: ${store.controlSpacingMinimal}em;
+        --control-spacing-tiny: ${store.controlSpacingTiny}em;
+        --control-spacing-nearest: ${store.controlSpacingNearest}em;
+        --control-spacing-near: ${store.controlSpacingNear}em;
+        --control-spacing-base: ${store.controlSpacingBase}em;
+        --control-spacing-far: ${store.controlSpacingFar}em;
+        --control-spacing-farthest: ${store.controlSpacingFarthest}em;
+
         ${getShadows(store)}
 
         ${getStringTheme(store)}

diff --git a/apps/web/TODOS b/apps/web/TODOS
@@ -0,0 +1,3 @@
+Landing Page für unsere Hauptdienstleistungen
+- Svelte / Sveltekit
+-
diff --git a/apps/web/src/lib/modules/common/components/Cta.svelte b/apps/web/src/lib/modules/common/components/Cta.svelte
@@ -44,8 +44,7 @@
 	}
 
 	.box {
-		--button-height-base: 3.5rem;
-		--button-padding-inline: 3ch;
+		--control-height-base: 3.5rem;
 
 		z-index: 2;
 		grid-area: cta;

diff --git a/apps/web/src/lib/modules/common/components/Hero.svelte b/apps/web/src/lib/modules/common/components/Hero.svelte
@@ -87,7 +87,7 @@
         inline-size: 100%;
 
 		@media (--sm-n-above) {
-			--button-height-base: 4rem;
+			--control-height-base: 4rem;
 
 			font-size: var(--font-size-large);
 		}

diff --git a/packages/ui/src/styles/components/alerts.css b/packages/ui/src/styles/components/alerts.css
@@ -2,7 +2,7 @@
     :where(.nc-alert) {
         background: var(--surface);
         color: var(--text);
-        gap: 0.75em;
+        gap: var(--control-spacing-base, 0.75em);
     }
 
     :where(.nc-alert) > .nc-icon {

diff --git a/packages/ui/src/styles/components/badges.css b/packages/ui/src/styles/components/badges.css
@@ -7,8 +7,7 @@
         border: var(--border-width-thin) solid var(--text, var(--color-text-base));
         border-radius: var(--border-radius-small);
         background: var(--surface, transparent);
-        padding: 0.5em;
+        padding: var(--control-spacing-minimal, 0.125em) var(--control-spacing-near, 0.5em);
         inline-size: max-content;
-        line-height: 1;
     }
 }
diff --git a/packages/ui/src/styles/components/breadcrumbs.css b/packages/ui/src/styles/components/breadcrumbs.css
@@ -14,7 +14,7 @@
         }
 
         &:not(:last-child):after {
-            padding-inline: 0.5em;
+            padding-inline: var(--control-spacing-near, 0.5em);
             color: inherit;
             content: "›";
             font-size: inherit;

diff --git a/packages/ui/src/styles/components/buttons.css b/packages/ui/src/styles/components/buttons.css
@@ -32,14 +32,14 @@
         --_button-box-shadow: var(--button-box-shadow, var(--shadow-near));
         --_button-hover-shadow: var(--button-hover-shadow, var(--shadow-nearest));
 
-        --_button-padding-inline: var(--button-padding-inline, 0.5em);
+        --_button-padding-inline: var(--button-padding-inline, var(--control-spacing-base, 0.75em));
 
         background-color: var(--_button-background);
         color: var(--_button-color);
         border: var(--border-width-thin) solid var(--_button-border-color);
         border-radius: var(--_button-border-radius);
         padding-inline: var(--_button-padding-inline);
-        min-block-size: var(--button-height-base);
+        min-block-size: var(--control-height-base);
         padding-block: 0;
         font-family: var(--font-family-button);
         letter-spacing: var(--tracking-tight);
@@ -140,17 +140,23 @@
         }
 
         &.-small {
-            --_button-padding-inline: 0.5em;
-            min-block-size: var(--button-height-small);
+            --_button-padding-inline: var(--control-spacing-near, 0.5em);
+            min-block-size: var(--control-height-small);
         }
 
         &.-round {
             --_button-border-radius: var(--border-radius-round);
         }
 
         &.-offset {
-            --_button-offset-distance: var(--button-offset-distance, -0.15em);
-            --_button-offset-distance-hover: var(--button-offset-distance-hover, -0.075em);
+            --_button-offset-distance: var(
+                --button-offset-distance,
+                calc(-1 * var(--control-spacing-minimal))
+            );
+            --_button-offset-distance-hover: var(
+                --button-offset-distance-hover,
+                calc(-0.5 * var(--control-spacing-minimal))
+            );
 
             --_button-transform: translate(
                 var(--_button-offset-distance),
@@ -188,7 +194,7 @@
          */
 
         &:has(svg) {
-            gap: 0.25em;
+            gap: var(--control-spacing-tiny, 0.25em);
         }
 
         /*
@@ -206,12 +212,12 @@
 
             &:after {
                 content: "";
-                inline-size: max(var(--button-height-base), 100%);
-                block-size: max(var(--button-height-base), 100%);
+                inline-size: max(var(--control-height-base), 100%);
+                block-size: max(var(--control-height-base), 100%);
                 aspect-ratio: 1;
                 border-radius: 100%;
-                inset-inline-start: calc(-0.5 * (var(--button-height-base) - 100%));
-                inset-block-start: calc(-0.5 * (var(--button-height-base) - 100%));
+                inset-inline-start: calc(-0.5 * (var(--control-height-base) - 100%));
+                inset-block-start: calc(-0.5 * (var(--control-height-base) - 100%));
                 position: absolute;
                 z-index: -1;
                 pointer-events: all;
@@ -235,8 +241,8 @@
         color: var(--_input-color);
         background-color: var(--_input-background);
         border: var(--_input-border);
-        min-block-size: var(--button-height-base);
-        padding-inline-end: 0.5em;
+        min-block-size: var(--control-height-base);
+        padding-inline-end: var(--contol-spacing-near, 0.5em);
         padding-inline-start: 0;
         border-radius: var(--_input-border-radius);
     }
@@ -246,10 +252,10 @@
         background-color: var(--_button-background);
         color: var(--_button-color);
         padding-inline: var(--_button-padding-inline);
-        margin-inline-end: 0.5em;
+        margin-inline-end: var(--contol-spacing-near, 0.5em);
         cursor: pointer;
         box-shadow: none;
-        min-block-size: calc(var(--button-height-base) - var(--border-width-thin));
+        min-block-size: calc(var(--control-height-base) - var(--border-width-thin));
         border: none;
         border-inline-end: var(--border-width-thin) solid var(--color-border-base);
         transform: none;