diff --git a/config/livewire.php b/config/livewire.php index efe1002e5..c252d2ab9 100644 --- a/config/livewire.php +++ b/config/livewire.php @@ -118,7 +118,7 @@ 'navigate' => [ 'show_progress_bar' => true, - 'progress_bar_color' => '#6b16ed', + 'progress_bar_color' => '#fde047', // MapleDeploy branding: warning yellow ], /* diff --git a/resources/css/app.css b/resources/css/app.css index b1ae74c09..aefe30147 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -14,36 +14,51 @@ @custom-variant dark (&:where(.dark, .dark *)); +/* MapleDeploy branding: Canadian red accent, stone greys */ @theme { - --font-sans: 'Geist Sans', Inter, sans-serif; - --font-mono: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; - --font-geist-sans: 'Geist Sans', Inter, sans-serif; - --font-logs: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; + --font-sans: Inter, sans-serif; + --font-display: 'Overlock', sans-serif; + --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; + --font-logs: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; - --color-base: #101010; - --color-warning: #fcd452; + --color-base: #292524; + --color-warning: #fde047; --color-warning-50: #fefce8; --color-warning-100: #fef9c3; --color-warning-200: #fef08a; --color-warning-300: #fde047; - --color-warning-400: #fcd452; - --color-warning-500: #facc15; + --color-warning-400: #facc15; + --color-warning-500: #eab308; --color-warning-600: #ca8a04; --color-warning-700: #a16207; --color-warning-800: #854d0e; --color-warning-900: #713f12; --color-success: #22C55E; - --color-error: #dc2626; - --color-coollabs-50: #f5f0ff; - --color-coollabs: #6b16ed; - --color-coollabs-100: #7317ff; - --color-coollabs-200: #5a12c7; - --color-coollabs-300: #4a0fa3; - --color-coolgray-100: #181818; - --color-coolgray-200: #202020; - --color-coolgray-300: #242424; - --color-coolgray-400: #282828; - --color-coolgray-500: #323232; + /* MapleDeploy branding: red palette hue-normalized to OKLCH h=29.38 (#D52A1E) */ + --color-error: #dc281c; + --color-coollabs-50: #fef3f1; + --color-coollabs: #d52b1f; + --color-coollabs-100: #f34d3d; + --color-coollabs-200: #bc251a; + --color-coollabs-300: #9c2117; + /* Override Tailwind's red scale so red-* utility classes match the MapleDeploy brand hue */ + --color-red-50: #fef1ef; + --color-red-100: #ffe3df; + --color-red-200: #ffcec5; + --color-red-300: #feaa9d; + --color-red-400: #fb7968; + --color-red-500: #f34d3d; + --color-red-600: #d52b1f; + --color-red-700: #bc251a; + --color-red-800: #9c2117; + --color-red-900: #812219; + --color-red-950: #460d08; + /* MapleDeploy branding: coolgray remapped to stone (coolgray-200 interpolated, see COOLIFY_FORK.md) */ + --color-coolgray-100: #1c1917; + --color-coolgray-200: #35322f; + --color-coolgray-300: #44403c; + --color-coolgray-400: #57534e; + --color-coolgray-500: #78716c; /* Graphite design language (ported from ref/frontend). Layered neutral surfaces + translucent hairlines. See DESIGN.md. */ @@ -56,7 +71,7 @@ @theme { --color-fg: #f2f2f2; --color-fg-dim: #b4b4b8; --color-fg-faint: #6e6e74; - --color-accent: #6b16ed; + --color-accent: #d52b1f; /* MapleDeploy branding: accent → red-600 */ --color-accent-foreground: #ffffff; --color-hairline: rgba(255, 255, 255, 0.08); --color-nav-text: #525252; @@ -65,6 +80,33 @@ @theme { --color-log: #0d0d0d; --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.4); + + /* MapleDeploy branding: remap neutral and gray → stone for warm tone consistency with marketing/dashboard. + Upstream uses neutral for text/borders and gray for backgrounds/surfaces. Remapping both to stone + warms the entire UI to match our design system, covering ~1000 class references without touching + any Blade templates. */ + --color-neutral-50: oklch(98.5% 0.001 106.423); + --color-neutral-100: oklch(97% 0.001 106.424); + --color-neutral-200: oklch(92.3% 0.003 48.717); + --color-neutral-300: oklch(86.9% 0.005 56.366); + --color-neutral-400: oklch(70.9% 0.01 56.259); + --color-neutral-500: oklch(55.3% 0.013 58.071); + --color-neutral-600: oklch(44.4% 0.011 73.639); + --color-neutral-700: oklch(37.4% 0.01 67.558); + --color-neutral-800: oklch(26.8% 0.007 34.298); + --color-neutral-900: oklch(21.6% 0.006 56.043); + --color-neutral-950: oklch(14.7% 0.004 49.25); + --color-gray-50: oklch(98.5% 0.001 106.423); + --color-gray-100: oklch(97% 0.001 106.424); + --color-gray-200: oklch(92.3% 0.003 48.717); + --color-gray-300: oklch(86.9% 0.005 56.366); + --color-gray-400: oklch(70.9% 0.01 56.259); + --color-gray-500: oklch(55.3% 0.013 58.071); + --color-gray-600: oklch(44.4% 0.011 73.639); + --color-gray-700: oklch(37.4% 0.01 67.558); + --color-gray-800: oklch(26.8% 0.007 34.298); + --color-gray-900: oklch(21.6% 0.006 56.043); + --color-gray-950: oklch(14.7% 0.004 49.25); } /* @@ -258,7 +300,8 @@ @layer components { */ html, body { - @apply w-full min-h-full bg-gray-50 dark:bg-app dark:text-fg-dim; + /* MapleDeploy branding: text-stone-800 body text matches marketing/dashboard */ + @apply w-full min-h-full text-stone-800 bg-gray-50 dark:bg-app dark:text-fg-dim; } body { @@ -293,19 +336,20 @@ button[isHighlighted]:not(:disabled) { } h1 { - @apply text-[24px] leading-7 font-semibold tracking-tight dark:text-white; + /* MapleDeploy branding: font-display (Overlock) on semantic headings */ + @apply text-[24px] leading-7 font-semibold tracking-tight font-display dark:text-white; } h2 { - @apply text-xl font-bold dark:text-white; + @apply text-xl font-bold font-display dark:text-white; } h3 { - @apply text-lg font-bold dark:text-white; + @apply text-lg font-bold font-display dark:text-white; } h4 { - @apply text-base font-bold dark:text-white; + @apply text-base font-bold font-display dark:text-white; } a { @@ -935,7 +979,7 @@ :root { } .dark { - --color-accent: #fcd452; + --color-accent: #fde047; /* MapleDeploy branding: dark-mode accent → warning */ --coollabs-canvas: oklch(10% 0 0); /* elevated (card shells/headers) and recessed (input fills) sit a touch above the canvas so they read lighter than near-black */ @@ -954,7 +998,7 @@ .dark { /* Theme surfaces are derived from one brand color. Changing --theme-base-color is enough to generate a complete dark surface ladder. */ html[data-theme="custom"] { - --theme-base-color: #6b16ed; + --theme-base-color: #d52b1f; /* MapleDeploy branding: default custom-theme base → red-600 */ --theme-bright-color: color-mix(in srgb, var(--theme-base-color) 85%, white); --theme-scrollbar-thumb: color-mix(in srgb, var(--theme-bright-color) 70%, var(--theme-accent-foreground)); --theme-border-color: color-mix(in oklab, var(--theme-base-color) 42%, #52525b); @@ -1698,7 +1742,7 @@ .resource-heading-tabs-control:focus { .resource-heading-tabs-control:focus-visible .resource-heading-tabs-control-icon { box-shadow: - 0 0 0 2px color-mix(in srgb, var(--color-coollabs, #6b16ed) 45%, transparent), + 0 0 0 2px color-mix(in srgb, var(--color-coollabs, #d52b1f) 45%, transparent), /* MapleDeploy branding */ 0 0 0 1px rgba(0, 0, 0, 0.08); } diff --git a/resources/css/fonts.css b/resources/css/fonts.css index e5c6a694d..4154e6077 100644 --- a/resources/css/fonts.css +++ b/resources/css/fonts.css @@ -70,18 +70,12 @@ @font-face { src: url('../fonts/inter-v13-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2'); } +/* MapleDeploy branding: Overlock for headings */ @font-face { font-display: swap; - font-family: 'Geist Mono'; + font-family: 'Overlock'; font-style: normal; - font-weight: 100 900; - src: url('../fonts/geist-mono-variable.woff2') format('woff2'); -} - -@font-face { - font-display: swap; - font-family: 'Geist Sans'; - font-style: normal; - font-weight: 100 900; - src: url('../fonts/geist-sans-variable.woff2') format('woff2'); + font-weight: 900; + src: url('../fonts/overlock-v19-latin-900.woff2') format('woff2'), + url('../fonts/overlock-v19-latin-900.ttf') format('truetype'); } diff --git a/resources/css/utilities.css b/resources/css/utilities.css index 6fdd260b5..30db710af 100644 --- a/resources/css/utilities.css +++ b/resources/css/utilities.css @@ -40,11 +40,11 @@ @utility input-sticky { } &:focus-visible { - box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 1px #e5e5e5; + box-shadow: inset 4px 0 0 #d52b1f, inset 0 0 0 1px #e5e5e5; } &:where(.dark, .dark *):focus-visible { - box-shadow: inset 4px 0 0 #fcd452, inset 0 0 0 1px #242424; + box-shadow: inset 4px 0 0 #fde047, inset 0 0 0 1px #242424; } } @@ -178,7 +178,7 @@ @utility tag { } @utility add-tag { - @apply flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500/20 text-neutral-500 group-hover:text-neutral-700 dark:group-hover:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200; + @apply flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500 text-neutral-500 group-hover:text-neutral-700 dark:group-hover:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200; } @utility user-menu-item { @@ -272,7 +272,8 @@ @utility icon { } @utility scrollbar { - @apply scrollbar-thumb-coollabs-100 scrollbar-track-neutral-200 dark:scrollbar-thumb-coollabs-100 dark:scrollbar-track-coolgray-200 scrollbar-thin; + /* MapleDeploy branding: yellow scrollbar thumb instead of Coolify brand color */ + @apply scrollbar-thumb-warning scrollbar-track-neutral-200 dark:scrollbar-thumb-warning dark:scrollbar-track-coolgray-200 scrollbar-thin; } @utility main { @@ -332,7 +333,8 @@ @utility description { } @utility bg-coollabs-gradient { - @apply from-purple-500 via-pink-500 to-red-500 bg-linear-to-r; + /* MapleDeploy branding */ + @apply from-red-700 via-red-500 to-red-400 bg-linear-to-r; } @utility text-helper { @@ -396,7 +398,7 @@ @utility log-warning { } @utility log-debug { - @apply bg-purple-500/10 dark:bg-purple-500/15; + @apply bg-stone-500/10 dark:bg-stone-500/15; } @utility log-info { diff --git a/resources/fonts/overlock-v19-latin-900.ttf b/resources/fonts/overlock-v19-latin-900.ttf new file mode 100644 index 000000000..0cd2b55d3 Binary files /dev/null and b/resources/fonts/overlock-v19-latin-900.ttf differ diff --git a/resources/fonts/overlock-v19-latin-900.woff2 b/resources/fonts/overlock-v19-latin-900.woff2 new file mode 100644 index 000000000..25b3a0177 Binary files /dev/null and b/resources/fonts/overlock-v19-latin-900.woff2 differ diff --git a/resources/views/components/forms/datalist.blade.php b/resources/views/components/forms/datalist.blade.php index 2572daf12..49f2be0c7 100644 --- a/resources/views/components/forms/datalist.blade.php +++ b/resources/views/components/forms/datalist.blade.php @@ -99,9 +99,10 @@ {{-- Unified Input Container with Tags Inside --}}
+ wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]"> {{-- Selected Tags Inside Input --}}