diff --git a/apps/panoramablick/app.config.ts b/apps/panoramablick/app.config.ts index f6ac6b9..d4c0631 100644 --- a/apps/panoramablick/app.config.ts +++ b/apps/panoramablick/app.config.ts @@ -2,7 +2,7 @@ export default defineAppConfig({ ui: { colors: { primary: 'gimblet', - secondary: 'sapphire', + secondary: 'stone', neutral: 'sandstone' } } diff --git a/apps/panoramablick/assets/css/main.css b/apps/panoramablick/assets/css/main.css index f4d671e..b289269 100644 --- a/apps/panoramablick/assets/css/main.css +++ b/apps/panoramablick/assets/css/main.css @@ -41,6 +41,19 @@ --color-gimblet-800: oklch(44.164% 0.05385 91.131); --color-gimblet-900: oklch(31.471% 0.0355 91.688); + --color-driftwood: oklch(72% 0.065 228); + --color-driftwood-50: oklch(97.5% 0.008 228); + --color-driftwood-100: oklch(94.5% 0.015 228); + --color-driftwood-200: oklch(88.8% 0.028 228); + --color-driftwood-300: oklch(83% 0.042 228); + --color-driftwood-400: oklch(77% 0.056 228); + --color-driftwood-500: oklch(72% 0.065 228); + --color-driftwood-600: oklch(63% 0.07 228); + --color-driftwood-700: oklch(50% 0.06 228); + --color-driftwood-800: oklch(38% 0.045 228); + --color-driftwood-900: oklch(27% 0.03 228); + + --color-sapphire-50: oklch(97.5% 0.005 260); --color-sapphire-100: oklch(95.2% 0.01 260); --color-sapphire-200: oklch(90% 0.02 260); @@ -52,6 +65,30 @@ --color-sapphire-800: oklch(42% 0.045 260); --color-sapphire-900: oklch(30% 0.03 260); + --color-stone-50: oklch(98% 0.002 260); /* lightest gray */ + --color-stone-100: oklch(94% 0.004 260); + --color-stone-200: oklch(88% 0.006 260); + --color-stone-300: oklch(80% 0.008 260); + --color-stone-400: oklch(70% 0.01 260); + --color-stone-500: oklch(60% 0.012 260); /* true neutral gray */ + --color-stone-600: oklch(48% 0.012 260); + --color-stone-700: oklch(36% 0.01 260); + --color-stone-800: oklch(26% 0.008 260); + --color-stone-900: oklch(16% 0.006 260); /* darkest gray */ + + + --color-clay-50: oklch(96% 0.008 35); + --color-clay-100: oklch(92% 0.015 35); + --color-clay-200: oklch(86% 0.03 35); + --color-clay-300: oklch(80% 0.05 35); + --color-clay-400: oklch(74% 0.07 35); + --color-clay-500: oklch(70% 0.08 35); + --color-clay-600: oklch(62% 0.09 35); + --color-clay-700: oklch(50% 0.07 35); + --color-clay-800: oklch(38% 0.05 35); + --color-clay-900: oklch(28% 0.035 35); + + --color-sandstone-50: oklch(98% 0.003 85); --color-sandstone-100: oklch(96% 0.006 85); --color-sandstone-200: oklch(92% 0.012 85); diff --git a/apps/panoramablick/components/AppApartment.vue b/apps/panoramablick/components/AppApartment.vue index d3b8068..986bd4b 100644 --- a/apps/panoramablick/components/AppApartment.vue +++ b/apps/panoramablick/components/AppApartment.vue @@ -1,25 +1,29 @@