Spaces:
Runtime error
Runtime error
| /* Author: Yazan Agha-Schrader */ | |
| /* Inspiration from llama.cpp logo/banner https://github.com/ggerganov/llama.cpp#readme */ | |
| .theme-mangotango { | |
| --primary-color-1: hsl(192, 8.5%, 11.6%); | |
| --primary-color-2: hsl(192, 8.5%, 21%); | |
| --primary-color-3: hsl(192, 8.5%, 30%); | |
| --primary-color-4: hsl(192, 8.5%, 40%); | |
| --secondary-color-1: hsl(192, 8.5%, 80%); | |
| --secondary-color-2: hsl(192, 8.5%, 73%); | |
| --secondary-color-3: hsl(192, 8.5%, 66%); | |
| --secondary-color-4: hsl(192, 8.5%, 60%); | |
| --theme-nuance-color-1: hsl(23.1, 100%, 60.2%); | |
| --theme-nuance-color-2: hsl(23.1, 100%, 60.2%); | |
| --theme-nuance-color-3: hsl(23.1, 100%, 60.2%); | |
| --theme-nuance-color-4: hsl(23.1, 100%, 60.2%); | |
| /* ---------- PRIMARY COLORS ----------------- */ | |
| --primary-color-1: hsl(192, 8.5%, 11.6%); | |
| --primary-color-1-saturation: 8.5%; | |
| --primary-color-1-lightness: 11.6%; | |
| --primary-color-2: hsl(192, 8.5%, 21%); | |
| --primary-color-2-saturation: 8.5%; | |
| --primary-color-2-lightness: 21%; | |
| --primary-color-3: hsl(192, 8.5%, 30%); | |
| --primary-color-3-saturation: 8.5%; | |
| --primary-color-3-lightness: 30%; | |
| --primary-color-4: hsl(192, 8.5%, 40%); | |
| --primary-color-4-saturation: 8.5%; | |
| --primary-color-4-lightness: 40%; | |
| /* ---------- SECONDARY COLORS --------------- */ | |
| --secondary-color-1: hsl(192, 8.5%, 80%); | |
| --secondary-color-1-saturation: 8.5%; | |
| --secondary-color-1-lightness: 80%; | |
| --secondary-color-2: hsl(192, 8.5%, 73%); | |
| --secondary-color-2-saturation: 8.5%; | |
| --secondary-color-2-lightness: 73%; | |
| --secondary-color-3: hsl(192, 8.5%, 66%); | |
| --secondary-color-3-saturation: 8.5%; | |
| --secondary-color-3-lightness: 66%; | |
| --secondary-color-4: hsl(192, 8.5%, 60%); | |
| --secondary-color-4-saturation: 8.5%; | |
| --secondary-color-4-lightness: 60%; | |
| /* ----------- NUANCES COLORS ---------------- */ | |
| --theme-nuance-color-1: hsl(23.1, 100%, 60.2%); | |
| --theme-nuance-color-1-saturation: 100%; | |
| --theme-nuance-color-1-lightness: 60.2%; | |
| --theme-nuance-color-2: hsl(23.1, 100%, 60.2%); | |
| --theme-nuance-color-2-saturation: 100%; | |
| --theme-nuance-color-2-lightness: 60.2%; | |
| --theme-nuance-color-3: hsl(23.1, 100%, 60.2%); | |
| --theme-nuance-color-3-saturation: 100%; | |
| --theme-nuance-color-3-lightness: 60.2%; | |
| --theme-nuance-color-4: hsl(23.1, 100%, 60.2%); | |
| --theme-nuance-color-4-saturation: 100%; | |
| --theme-nuance-color-4-lightness: 60.2%; | |
| /* ----------- ROYGP COLORS ------------------ */ | |
| --theme-red-color: hsl(325, 60%, 50%); | |
| --theme-orange-color: #e76f51; | |
| --theme-yellow-color: #ffd95f; | |
| --theme-green-color: #A3BE8C; | |
| --theme-blue-color: hsl(192, 95%, 40%); | |
| --theme-purple-color: hsl(192, 80%, 35%); | |
| /* ------------------------------------------- */ | |
| --background-color-1: var(--primary-color-1); | |
| --background-color-2: var(--primary-color-2); | |
| --background-color-3: var(--primary-color-3); | |
| --background-color-4: var(--primary-color-4); | |
| --border-color-1: var(--primary-color-2); | |
| --border-color-2: var(--primary-color-3); | |
| --border-color-3: var(--primary-color-4); | |
| --border-focus-color: var(--theme-nuance-color-2); | |
| --border-focus-shadow: var(--theme-nuance-color-1); | |
| --text-color-plain: var(--secondary-color-1); | |
| --text-color-subtile-1: var(--secondary-color-2); | |
| --text-color-subtile-2: var(--secondary-color-3); | |
| --code-background-color: var(--secondary-color-2); | |
| --code-text-color: var(--primary-color-2); | |
| --ui-range-thumb-color: var(--theme-nuance-color-3); | |
| --ui-range-thumb-border: var(--ui-ranger-thumb-color); | |
| --textarea-border-color: var(--secondary-color-4); | |
| --chat-id-color: var(--theme-nuance-color-4); | |
| /* ------------------------------------------- */ | |
| --button-alert-text-hover: var(--secondary-color-1); | |
| --button-alert-color-hover: var(--theme-purple-color); | |
| --button-alert-border-hover: var(--theme-purple-color); | |
| --button-alert-text-active: var(--secondary-color-1); | |
| --button-alert-color-active: var(--theme-blue-color); | |
| --button-alert-border-active: var(--theme-blue-color); | |
| /* ----------- PRIMARY BUTTONS --------------- */ | |
| /* - button should immediately catch the eye - */ | |
| --button-primary-text: var(--primary-color-1); | |
| --button-primary-color: var(--theme-nuance-color-3); | |
| --button-primary-border: var(--theme-nuance-color-3); | |
| /* ---------hover---------- */ | |
| --button-primary-text-hover: | |
| hsl(192, | |
| calc(var(--primary-color-1-saturation) - 100%), | |
| calc(var(--primary-color-1-lightness) + 100%)); | |
| --button-primary-color-hover: | |
| hsl(23.1, | |
| calc(var(--theme-nuance-color-3-saturation) - 2%), | |
| calc(var(--theme-nuance-color-3-lightness) - 10%)); | |
| --button-primary-border-hover: | |
| hsl(23.1, | |
| calc(var(--theme-nuance-color-3-saturation) - 2%), | |
| calc(var(--theme-nuance-color-3-lightness) - 10%)); | |
| /* ---------active--------- */ | |
| --button-primary-text-active: | |
| hsl(23.1, | |
| calc(var(--theme-nuance-color-3-saturation) - 100%), | |
| calc(var(--theme-nuance-color-3-lightness) + 100%)); | |
| --button-primary-color-active: | |
| hsl(23.1, | |
| calc(var(--theme-nuance-color-3-saturation) - 10%), | |
| calc(var(--theme-nuance-color-3-lightness) - 15%)); | |
| --button-primary-border-active: | |
| hsl(23.1, | |
| calc(var(--theme-nuance-color-3-saturation) - 2%), | |
| calc(var(--theme-nuance-color-3-lightness) + 10%)); | |
| /* ---------- SECONDARY BUTTONS -------------- */ | |
| /* these should NOT immediately catch the eye */ | |
| --button-secondary-text: var(--secondary-color-1); | |
| --button-secondary-color: var(--primary-color-3); | |
| --button-secondary-border: var(--primary-color-3); | |
| /* ---------hover---------- */ | |
| --button-secondary-text-hover: | |
| hsl(23.1, | |
| calc(var(--theme-nuance-color-3-saturation) - 20%), | |
| calc(var(--theme-nuance-color-3-lightness) - 80%)); | |
| --button-secondary-color-hover: var(--primary-color-4); | |
| --button-secondary-border-hover: var(--primary-color-4); | |
| /* ---------active--------- */ | |
| --button-secondary-text-active: var(--secondary-color-1); | |
| --button-secondary-color-active: | |
| hsl(192, | |
| calc(var(--primary-color-4-saturation) - 30%), | |
| calc(var(--primary-color-4-lightness) - 15%)); | |
| --button-secondary-border-active: | |
| hsl(192, | |
| calc(var(--primary-color-4-saturation) - 30%), | |
| calc(var(--primary-color-4-lightness) - 15%)); | |
| /* ---------- TERTIARY BUTTONS --------------- */ | |
| /* ---------- disabled buttons --------------- */ | |
| --button-tertiary-text: var(--primary-color-4); | |
| --button-tertiary-color: var(--primary-color-2); | |
| --button-tertiary-border: var(--primary-color-2); | |
| /* ---------hover---------- */ | |
| --button-tertiary-text: var(--primary-color-4); | |
| --button-tertiary-color: var(--primary-color-2); | |
| --button-tertiary-border: var(--primary-color-2); | |
| } | |