@@ -777,7 +801,7 @@ async function updateSystemLanguage(event) {
${IntField({ label: "Prediction", max: 2048, min: -1, step: 16, name: "n_predict", value: params.value.n_predict, })}
${FloatField({ label: "Min-P sampling", max: 1.0, min: 0.0, name: "min_p", step: 0.01, value: params.value.min_p })}
${FloatField({ label: "Repetition Penalty", max: 2.0, min: 0.0, name: "repeat_penalty", step: 0.01, value: params.value.repeat_penalty })}
- ${FloatField({ label: "Temperature", max: 1.5, min: 0.0, name: "temperature", step: 0.01, value: params.value.temperature })}
+ ${FloatField({ label: "Temperature", max: 2.0, min: 0.0, name: "temperature", step: 0.01, value: params.value.temperature })}
@@ -1031,7 +1055,69 @@ async function updateSystemLanguage(event) {
`;
}
+
+document.addEventListener('DOMContentLoaded', function() {
+ var themeSelector = document.getElementById('theme-selector');
+
+ themeSelector.addEventListener('change', function(event) {
+ // remove all existing/defined theme classes
+ document.body.classList.remove('theme-default', 'theme-mangotango', 'theme-playground', 'theme-polarnight', 'theme-snowstorm', 'theme-been_in_order');
+ // add the selected theme class
+ var selectedTheme = event.target.value;
+ if (selectedTheme !== 'default') {
+ document.body.classList.add('theme-' + selectedTheme);
+ }
+ // save selection in local storage
+ localStorage.setItem('selected-theme', selectedTheme);
+ });
+
+ // set the selected theme when loading the page
+ var savedTheme = localStorage.getItem('selected-theme');
+ if (savedTheme && savedTheme !== 'default') {
+ document.body.classList.add('theme-' + savedTheme);
+ themeSelector.value = savedTheme;
+ }
+});
+
+
+// snapping of the slider to indicate 'disabled'
+document.addEventListener('DOMContentLoaded', (event) => {
+ // define an object that contains snap values and ranges for each slider
+ const snapSettings = {
+ temperature: { snapValue: 1.0, snapRangeMultiplier: 6 },
+ min_p: { snapValue: 0.05, snapRangeMultiplier: 2 },
+ top_p: { snapValue: 1.0, snapRangeMultiplier: 4 },
+ tfs_z: { snapValue: 1.0, snapRangeMultiplier: 4 },
+ typical_p: { snapValue: 1.0, snapRangeMultiplier: 4 },
+ repeat_penalty: { snapValue: 1.0, snapRangeMultiplier: 4 },
+ presence_penalty: { snapValue: 0.0, snapRangeMultiplier: 4 },
+ frequency_penalty: { snapValue: 0.0, snapRangeMultiplier: 4 },
+ };
+ // add an event listener for each slider
+ Object.keys(snapSettings).forEach(sliderName => {
+ const slider = document.querySelector(`input[name="${sliderName}"]`);
+ const settings = snapSettings[sliderName];
+
+ slider.addEventListener('input', (e) => {
+ let value = parseFloat(e.target.value);
+ const step = parseFloat(e.target.step);
+ const snapRange = step * settings.snapRangeMultiplier;
+ const valueDisplay = document.getElementById(`${e.target.name}-value`);
+
+ if (value >= settings.snapValue - snapRange && value <= settings.snapValue + snapRange) {
+ value = settings.snapValue; // set value to the snap value
+ e.target.value = value; // update the slider value
+ }
+ // update the displayed value
+ if (valueDisplay) {
+ valueDisplay.textContent = value.toFixed(2); // display value with two decimal places
+ }
+ });
+ });
+});
+
render(h(App), document.querySelector('#container'));
+
diff --git a/examples/server/public/promptFormats.js b/examples/server/public/promptFormats.js
index f6b179a81..1b5064088 100644
--- a/examples/server/public/promptFormats.js
+++ b/examples/server/public/promptFormats.js
@@ -1,225 +1,231 @@
// extended list
export const promptFormats = {
-"airoborosl2": {
- template: "{{prompt}} {{history}} {{char}}",
- historyTemplate: "{{name}}: {{message}}",
- char: "ASSISTANT",
- user: "USER"
-},
-"alpaca": {
- template: "{{prompt}}\n\n{{history}}\n\n### {{char}}:",
- historyTemplate: "### {{name}}:\n{{message}}",
- char: "Response",
- user: "Instruction"
-},
-"bakllava": {
- template: "{{history}}{{char}}:",
- historyTemplate: "{{name}}: {{message}}\n",
- char: "ASSISTANT",
- user: "USER"
-},
-"chatml": {
- template: "<|im_start|>system\n{{prompt}}<|im_end|>\n{{history}}\n<|im_start|>{{char}}",
- historyTemplate: "<|im_start|>{{user}}\n{{message}}<|im_end|>",
- char: "assistant",
- user: "user"
-},
-"codeCherryPop": {
- template: "{{prompt}}\n\n{{history}}\n\n### {{char}}:",
- historyTemplate: "### {{name}}:\n{{message}}",
- char: "Response",
- user: "Instruction"
-},
-"deepseekCoder": {
- template: "{{prompt}}\n{{history}}\n### {{char}}:",
- historyTemplate: "### {{name}}:\n{{message}}",
- char: "Response",
- user: "Instruction"
-},
-"dolphinMistral": {
- template: "<|im_start|>system\n{{prompt}}<|im_end|>\n{{history}}\n<|im_start|>{{char}}",
- historyTemplate: "<|im_start|>{{user}}\n{{message}}<|im_end|>",
- char: "assistant",
- user: "user"
-},
-"evolvedSeeker": {
- template: "<|im_start|>system\n{{prompt}}<|im_end|>\n{{history}}\n<|im_start|>{{char}}",
- historyTemplate: "<|im_start|>{{user}}\n{{message}}<|im_end|>",
- char: "assistant",
- user: "user"
-},
-"goliath120b": {
- template: "{{prompt}}\n\n{{history}}\n{{char}}:",
- historyTemplate: "{{name}}: {{message}}",
- char: "ASSISTANT",
- user: "USER"
-},
-"jordan": {
- template: "{{prompt}}\n\n{{history}}\n{{char}}:",
- historyTemplate: "{{name}}: {{message}}",
- char: "ASSISTANT",
- user: "USER"
-},
-"llama2": {
- template: "[INST] <>\n{{prompt}}\n<>\n\n{{history}} [/INST] {{char}} [INST] ",
- historyTemplate: "{{name}}: {{message}} [/INST]",
- char: "llama",
- user: "user"
-},
-"llava": {
- template: "{{history}}{{char}}:",
- historyTemplate: "{{name}}: {{message}}\n",
- char: "ASSISTANT",
- user: "USER"
-},
-"leoHessianai": {
- template: "<|im_start|>system\n{{prompt}}<|im_end|>\n{{history}}\n<|im_start|>{{char}}",
- historyTemplate: "<|im_start|>{{user}}\n{{message}}<|im_end|>",
- char: "assistant",
- user: "user"
-},
-"leoMistral": {
- template: "{{prompt}} {{history}} {{char}}",
- historyTemplate: "{{name}}: {{message}}",
- char: "ASSISTANT",
- user: "USER"
-},
-"marx": {
- template: "{{history}}\n{{char}}:",
- historyTemplate: "{{name}}: {{message}}",
- char: "ASSISTANT",
- user: "USER"
-},
-"med42": {
- template: "<|system|>: {{prompt}}\n{{history}}\n{{char}}",
- historyTemplate: "<|{{name}}|>:{{message}}",
- char: "assistant",
- user: "prompter"
-},
-"metaMath": {
- template: "{{prompt}}\n\n{{history}}\n\n### {{char}}:",
- historyTemplate: "### {{name}}:\n{{message}}",
- char: "Response",
- user: "Instruction"
-},
-"mistralInstruct": {
- template: "{{history}} [/INST]\n{{char}}",
- historyTemplate: "{{name}} {{message}}",
- char: "",
- user: "[INST] "
-},
-"mistralOpenOrca": {
- template: "<|im_start|>system\n{{prompt}}<|im_end|>\n{{history}}\n<|im_start|>{{char}}",
- historyTemplate: "<|im_start|>{{user}}\n{{message}}<|im_end|>",
- char: "assistant",
- user: "user"
-},
-"mythomax": {
- template: "{{prompt}}\n\n{{history}}\n\n### {{char}}:",
- historyTemplate: "### {{name}}:\n{{message}}",
- char: "Response",
- user: "Instruction"
-},
-"neuralchat": {
- template: "### System:\n{{prompt}}\n{{history}}\n### {{char}}:",
- historyTemplate: "### {{name}}:\n{{message}}",
- char: "Assistant",
- user: "User"
-},
-"nousCapybara": {
- template: "{{history}}\n{{char}}",
- historyTemplate: "\n{{name}}: {{message}}",
- char: "ASSISTANT",
- user: "USER"
-},
-"nousHermes": {
- template: "### Instruction: {{prompt}}\n{{history}}\n### {{char}}:",
- historyTemplate: "\n### {{name}}: {{message}}",
- char: "Response",
- user: "Input"
-},
-"openChat": {
- template: "{{history}}{{char}}",
- historyTemplate: "GPT4 {{user}}: {{message}}<|end_of_turn|>",
- char: "Assistant",
- user: "User"
-},
-"openhermes2Mistral": {
- template: "<|im_start|>system\n{{prompt}}<|im_end|>\n{{history}}\n<|im_start|>{{char}}",
- historyTemplate: "<|im_start|>{{user}}\n{{message}}<|im_end|>",
- char: "assistant",
- user: "user"
-},
-"orcamini": {
- template: "{{prompt}}\n\n{{history}}\n\n### {{char}}:",
- historyTemplate: "### {{name}}:\n{{message}}",
- char: "Response",
- user: "Instruction"
-},
-"sauerkraut": {
- template: "{{prompt}}\n{{history}}\n{{char}}:",
- historyTemplate: "{{name}}: {{message}}",
- char: "Assistant",
- user: "User"
-},
-"samantha": {
- template: "{{prompt}}\n\n{{history}}\n{{char}}:",
- historyTemplate: "{{name}}: {{message}}",
- char: "ASSISTANT",
- user: "USER"
-},
-"samanthaMistral": {
- template: "<|im_start|>system\n{{prompt}}<|im_end|>\n{{history}}\n<|im_start|>{{char}}",
- historyTemplate: "<|im_start|>{{user}}\n{{message}}<|im_end|>",
- char: "assistant",
- user: "user"
-},
-"scarlett": {
- template: "{{prompt}}\n\n{{history}}\n{{char}}:",
- historyTemplate: "{{name}}: {{message}}",
- char: "ASSISTANT",
- user: "USER"
-},
-"starlingLM": {
- template: "{{history}}{{char}}",
- historyTemplate: "GPT4 {{user}}: {{message}}<|end_of_turn|>",
- char: "Assistant",
- user: "User"
-},
-"sydney": {
- template: "{{prompt}}\n\n{{history}}\n{{char}}",
- historyTemplate: "### {{name}}:\n{{message}}\n",
- char: "Response",
- user: "Instruction"
-},
-"synthia": {
- template: "SYSTEM: {{prompt}}\n{{history}}\n{{char}}:",
- historyTemplate: "{{name}}: {{message}}",
- char: "ASSISTANT",
- user: "USER"
-},
-"tess": {
- template: "SYSTEM: {{prompt}}\n{{history}}\n{{char}}:",
- historyTemplate: "{{name}}: {{message}}",
- char: "ASSISTANT",
- user: "USER"
-},
-"vicuna": {
- template: "{{prompt}}\n{{history}}\n{{char}}:",
- historyTemplate: "\n{{name}}: {{message}}",
- char: "ASSISTANT",
- user: "USER"
-},
-"yi34b": {
- template: "{{history}} {{char}}",
- historyTemplate: "{{name}}: {{message}}",
- char: "Assistant",
- user: "Human"
-},
-"zephyr": {
- template: "<|system|>\n{{prompt}}\n{{history}}\n{{char}}",
- historyTemplate: "<|{{name}}|>\n{{message}}",
- char: "assistant",
- user: "user"
-}
-};
+ "airoborosl2": {
+ template: "{{prompt}} {{history}} {{char}}",
+ historyTemplate: "{{name}}: {{message}}",
+ char: "ASSISTANT",
+ user: "USER"
+ },
+ "alpaca": {
+ template: "{{prompt}}\n\n{{history}}\n\n### {{char}}:",
+ historyTemplate: "### {{name}}:\n{{message}}",
+ char: "Response",
+ user: "Instruction"
+ },
+ "bakllava": {
+ template: "{{history}}{{char}}:",
+ historyTemplate: "{{name}}: {{message}}\n",
+ char: "ASSISTANT",
+ user: "USER"
+ },
+ "chatml": {
+ template: "<|im_start|>system\n{{prompt}}<|im_end|>\n{{history}}\n<|im_start|>{{char}}",
+ historyTemplate: "<|im_start|>{{user}}\n{{message}}<|im_end|>",
+ char: "assistant",
+ user: "user"
+ },
+ "codeCherryPop": {
+ template: "{{prompt}}\n\n{{history}}\n\n### {{char}}:",
+ historyTemplate: "### {{name}}:\n{{message}}",
+ char: "Response",
+ user: "Instruction"
+ },
+ "deepseekCoder": {
+ template: "{{prompt}}\n{{history}}\n### {{char}}:",
+ historyTemplate: "### {{name}}:\n{{message}}",
+ char: "Response",
+ user: "Instruction"
+ },
+ "dolphinMistral": {
+ template: "<|im_start|>system\n{{prompt}}<|im_end|>\n{{history}}\n<|im_start|>{{char}}",
+ historyTemplate: "<|im_start|>{{user}}\n{{message}}<|im_end|>",
+ char: "assistant",
+ user: "user"
+ },
+ "evolvedSeeker": {
+ template: "<|im_start|>system\n{{prompt}}<|im_end|>\n{{history}}\n<|im_start|>{{char}}",
+ historyTemplate: "<|im_start|>{{user}}\n{{message}}<|im_end|>",
+ char: "assistant",
+ user: "user"
+ },
+ "goliath120b": {
+ template: "{{prompt}}\n\n{{history}}\n{{char}}:",
+ historyTemplate: "{{name}}: {{message}}",
+ char: "ASSISTANT",
+ user: "USER"
+ },
+ "jordan": {
+ template: "{{prompt}}\n\n{{history}}\n{{char}}:",
+ historyTemplate: "{{name}}: {{message}}",
+ char: "ASSISTANT",
+ user: "USER"
+ },
+ "llama2": {
+ template: "[INST] <>\n{{prompt}}\n<>\n\n{{history}} [/INST] {{char}} [INST] ",
+ historyTemplate: "{{name}}: {{message}} [/INST]",
+ char: "llama",
+ user: "user"
+ },
+ "llava": {
+ template: "{{history}}{{char}}:",
+ historyTemplate: "{{name}}: {{message}}\n",
+ char: "ASSISTANT",
+ user: "USER"
+ },
+ "leoHessianai": {
+ template: "<|im_start|>system\n{{prompt}}<|im_end|>\n{{history}}\n<|im_start|>{{char}}",
+ historyTemplate: "<|im_start|>{{user}}\n{{message}}<|im_end|>",
+ char: "assistant",
+ user: "user"
+ },
+ "leoMistral": {
+ template: "{{prompt}} {{history}} {{char}}",
+ historyTemplate: "{{name}}: {{message}}",
+ char: "ASSISTANT",
+ user: "USER"
+ },
+ "marx": {
+ template: "{{history}}\n{{char}}:",
+ historyTemplate: "{{name}}: {{message}}",
+ char: "ASSISTANT",
+ user: "USER"
+ },
+ "med42": {
+ template: "<|system|>: {{prompt}}\n{{history}}\n{{char}}",
+ historyTemplate: "<|{{name}}|>:{{message}}",
+ char: "assistant",
+ user: "prompter"
+ },
+ "metaMath": {
+ template: "{{prompt}}\n\n{{history}}\n\n### {{char}}:",
+ historyTemplate: "### {{name}}:\n{{message}}",
+ char: "Response",
+ user: "Instruction"
+ },
+ "mistralInstruct": {
+ template: "{{history}} [/INST]\n{{char}}",
+ historyTemplate: "{{name}} {{message}}",
+ char: "",
+ user: "[INST] "
+ },
+ "mistralOpenOrca": {
+ template: "<|im_start|>system\n{{prompt}}<|im_end|>\n{{history}}\n<|im_start|>{{char}}",
+ historyTemplate: "<|im_start|>{{user}}\n{{message}}<|im_end|>",
+ char: "assistant",
+ user: "user"
+ },
+ "mythomax": {
+ template: "{{prompt}}\n\n{{history}}\n\n### {{char}}:",
+ historyTemplate: "### {{name}}:\n{{message}}",
+ char: "Response",
+ user: "Instruction"
+ },
+ "neuralchat": {
+ template: "### System:\n{{prompt}}\n{{history}}\n### {{char}}:",
+ historyTemplate: "### {{name}}:\n{{message}}",
+ char: "Assistant",
+ user: "User"
+ },
+ "nousCapybara": {
+ template: "{{history}}\n{{char}}",
+ historyTemplate: "\n{{name}}: {{message}}",
+ char: "ASSISTANT",
+ user: "USER"
+ },
+ "nousHermes": {
+ template: "### Instruction: {{prompt}}\n{{history}}\n### {{char}}:",
+ historyTemplate: "\n### {{name}}: {{message}}",
+ char: "Response",
+ user: "Input"
+ },
+ "openChat": {
+ template: "{{history}}{{char}}",
+ historyTemplate: "GPT4 {{user}}: {{message}}<|end_of_turn|>",
+ char: "Assistant",
+ user: "User"
+ },
+ "openhermes2Mistral": {
+ template: "<|im_start|>system\n{{prompt}}<|im_end|>\n{{history}}\n<|im_start|>{{char}}",
+ historyTemplate: "<|im_start|>{{user}}\n{{message}}<|im_end|>",
+ char: "assistant",
+ user: "user"
+ },
+ "orcamini": {
+ template: "{{prompt}}\n\n{{history}}\n\n### {{char}}:",
+ historyTemplate: "### {{name}}:\n{{message}}",
+ char: "Response",
+ user: "Instruction"
+ },
+ "sauerkraut": {
+ template: "{{prompt}}\n{{history}}\n{{char}}:",
+ historyTemplate: "{{name}}: {{message}}",
+ char: "Assistant",
+ user: "User"
+ },
+ "samantha": {
+ template: "{{prompt}}\n\n{{history}}\n{{char}}:",
+ historyTemplate: "{{name}}: {{message}}",
+ char: "ASSISTANT",
+ user: "USER"
+ },
+ "samanthaMistral": {
+ template: "<|im_start|>system\n{{prompt}}<|im_end|>\n{{history}}\n<|im_start|>{{char}}",
+ historyTemplate: "<|im_start|>{{user}}\n{{message}}<|im_end|>",
+ char: "assistant",
+ user: "user"
+ },
+ "scarlett": {
+ template: "{{prompt}}\n\n{{history}}\n{{char}}:",
+ historyTemplate: "{{name}}: {{message}}",
+ char: "ASSISTANT",
+ user: "USER"
+ },
+ "starlingLM": {
+ template: "{{history}}{{char}}",
+ historyTemplate: "GPT4 Correct {{user}}: {{message}}<|end_of_turn|>",
+ char: "Assistant",
+ user: "User"
+ },
+ "starlingLMCode": {
+ template: "{{history}}{{char}}",
+ historyTemplate: "Code {{user}}: {{message}}<|end_of_turn|>",
+ char: "Assistant",
+ user: "User"
+ },
+ "sydney": {
+ template: "{{prompt}}\n\n{{history}}\n{{char}}",
+ historyTemplate: "### {{name}}:\n{{message}}\n",
+ char: "Response",
+ user: "Instruction"
+ },
+ "synthia": {
+ template: "SYSTEM: {{prompt}}\n{{history}}\n{{char}}:",
+ historyTemplate: "{{name}}: {{message}}",
+ char: "ASSISTANT",
+ user: "USER"
+ },
+ "tess": {
+ template: "SYSTEM: {{prompt}}\n{{history}}\n{{char}}:",
+ historyTemplate: "{{name}}: {{message}}",
+ char: "ASSISTANT",
+ user: "USER"
+ },
+ "vicuna": {
+ template: "{{prompt}}\n{{history}}\n{{char}}:",
+ historyTemplate: "\n{{name}}: {{message}}",
+ char: "ASSISTANT",
+ user: "USER"
+ },
+ "yi34b": {
+ template: "{{history}} {{char}}",
+ historyTemplate: "{{name}}: {{message}}",
+ char: "Assistant",
+ user: "Human"
+ },
+ "zephyr": {
+ template: "<|system|>\n{{prompt}}\n{{history}}\n{{char}}",
+ historyTemplate: "<|{{name}}|>\n{{message}}",
+ char: "assistant",
+ user: "user"
+ }
+ };
diff --git a/examples/server/public/style.css b/examples/server/public/style.css
index 70d20e698..462a79e1f 100644
--- a/examples/server/public/style.css
+++ b/examples/server/public/style.css
@@ -1,642 +1,687 @@
-:root {
- /* Bright topic colors*/
- --primary-color: #11a37f;
- --secondary-color: #264653;
- --background-color: #fefeff;
- --text-color: #333333;
- --border-color: #cccccc;
- --button-hover-color: #197f63;
- --button-hover-alert: #e76f51;
- --input-focus-border-color: #11a37f;
- --loading-color-1: #eeeeee00;
- --loading-color-2: #eeeeeeff;
-
- /* Dark topic colors (to add/adapt — WIP) */
- --dark-primary-color: #13b896;
- --dark-secondary-color: #1a2a33;
- --dark-background-color: #121212;
- --dark-text-color: #e0e0e0;
- --dark-border-color: #333333;
- --dark-button-hover-color: #16876a;
- --dark-button-hover-alert: #cf6252;
- --dark-input-focus-border-color: #13b896;
- --dark-loading-color-1: #33333300;
- --dark-loading-color-2: #333333ff;
- }
-
- body {
- font-family: 'Arial', sans-serif;
- font-size: 90%;
- background-color: var(--background-color);
- color: var(--text-color);
- max-width: 600px;
- min-width: 300px;
- line-height: 1.2;
- margin: 0 auto;
- padding: 0 0.5em;
- }
-
- code, pre code {
- font-family: 'Courier New', monospace;
- }
-
- #container {
- margin: 0em auto;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- height: 100%;
- }
-
- main {
- margin: 3px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- gap: 1em;
- flex-grow: 1;
- overflow-y: auto;
- border: 1px solid var(--border-color);
- border-radius: 5px;
- padding: 0.5em;
- }
-
- p {
- overflow-wrap: break-word;
- word-wrap: break-word;
- hyphens: auto;
- margin-top: 0.5em;
- margin-bottom: 0.5em;
- }
-
- #write form {
- margin: 1em 0 0 0;
- display: flex;
- flex-direction: column;
- gap: 0.5em;
- align-items: stretch;
- }
-
- .right {
- display: flex;
- flex-direction: row;
- gap: 0.5em;
- justify-content: flex-end;
- }
-
- .two-columns {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 1em;
- }
-
- .summary-title {
- font-weight: 600;
- font-size: x-small;
- color: var(--secondary-color);
- text-transform: uppercase;
- }
-
- fieldset {
- border: none;
- padding: 0;
- margin: 0;
- color: #353740;
- }
-
- fieldset.two {
- display: grid;
- grid-template: "a a";
- gap: 1em;
- font-size: x-small;
- color: var(--text-color);
- }
-
- fieldset.three {
- display: grid;
- grid-template: "a a a";
- gap: 1em;
- font-size: x-small;
- color: var(--text-color);
- }
-
- fieldset.names {
- display: grid;
- grid-template: "a a";
- gap: 1em;
- font-size: x-small;
- color: var(--primary-color);
- padding-top: 16px;
- padding-bottom: 16px;
- text-transform: uppercase;
- font-weight: 600;
- }
-
- fieldset.dropdowns {
- display: flex;
- grid-template: "a a";
- gap: 1em;
- font-size: x-small;
- color: var(--primary-color);
- padding-top: 16px;
- padding-bottom: 16px;
- text-transform: uppercase;
- font-weight: 600;
- }
-
- .names input[type="text"] {
- font-family: Arial, sans-serif;
- font-size: medium;
- color: var(--text-color);
- font-weight: 500;
- padding: 5px;
- border: 1px solid var(--border-color);
- }
-
- .names input[type="text"].special-text-format {
- font-style: italic;
- font-weight: bold;
- color: #FF0000;
- }
-
- details {
- border: 1px solid #ececf1;
- border-radius: 10px;
- padding: 0.5em 0.5em 0;
- margin-top: 0.5em;
- }
-
- summary {
- font-weight: bold;
- margin: -0.5em -0.5em 0;
- padding: 0.5em;
- cursor: pointer;
- }
-
- details[open] {
- padding: 0.5em;
- }
-
- textarea-sec, input-sec, button-sec {
- padding: 10px;
- height: 40px;
- align-items: center;
- }
-
- textarea-sec::placeholder, input-sec::placeholder {
- padding-left: 10px;
- }
-
- .toggleCheckbox {
- display: none;
- }
-
- .toggleContainer {
- position: relative;
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- width: fit-content;
- border: 3px solid var(--border-color);
- border-radius: 20px;
- background: var(--border-color);
- font-size: small;
- cursor: pointer;
- overflow: hidden;
- }
-
- .toggleContainer::before {
- content: '';
- position: absolute;
- width: 50%;
- height: 100%;
- left: 0%;
- border-radius: 20px;
- background: var(--primary-color);
- transition: all 0.3s;
- }
-
- .toggleContainer div {
- padding: 6px;
- text-align: center;
- z-index: 1;
- transition: color 0.3s;
- }
-
- .toggleCheckbox:checked + .toggleContainer::before {
- left: 50%;
- }
-
- .toggleCheckbox:checked + .toggleContainer div:first-child {
- color: var(--text-color);
- }
-
- .toggleCheckbox:checked + .toggleContainer div:last-child {
- color: var(--background-color);
- }
-
- .toggleCheckbox + .toggleContainer div:first-child {
- color: var(--background-color);
- }
-
- .toggleCheckbox + .toggleContainer div:last-child {
- color: var(--text-color);
- }
-
- .button-container {
- display: flex;
- justify-content: flex-end;
- }
-
- .reset-button {
- width: fit-content;
- height: fit-content;
- background-color: #cccccc;
- color: #353740;
- font-size: x-small;
- font-weight: 600;
- border: 1px solid #cccccc;
- border-radius: 50px;
- overflow: hidden;
- }
-
- .reset-button:hover {
- color: var(--background-color);
- background-color: var(--button-hover-alert);
- border: 1px solid var(--button-hover-alert);
- }
-
- select {
- padding: 5px;
- border-radius: 8px;
- border: 1px solid #ccc;
- background-color: white;
- cursor: pointer;
- }
-
- select:focus {
- border: 1px solid var(--input-focus-border-color);
- box-shadow: 0 0 1px var(--input-focus-border-color);
- }
-
- button {
- background-color: var(--primary-color);
- color: white;
- border: none;
- padding: 10px 20px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: x-small;
- font-weight: 600;
- margin: 4px 2px;
- transition: background-color 0.3s, transform 0.3s;
- cursor: pointer;
- border-radius: 12px;
- border: 1px solid #f0f0f0;
- }
-
- button:hover {
- background-color: var(--button-hover-color);
- font-size: x-small;
- font-weight: 600;
- }
-
- button:disabled {
- color: #acacbd;
- background-color: #f7f7f8;
- cursor: not-allowed;
- font-size: x-small;
- font-weight: 600;
- }
-
- .button-back {
- background-color: #cccccc;
- color: #353740;
- border: none;
- padding: 10px 20px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: x-small;
- font-weight: 600;
- margin: 4px 2px;
- transition: background-color 0.3s, transform 0.3s;
- cursor: pointer;
- border-radius: 12px;
- border: 1px solid #f0f0f0;
- }
-
- .button-back:hover {
- background-color: #353740;
- color: #f0f0f0;
- border: none;
- padding: 10px 20px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: x-small;
- font-weight: 600;
- margin: 4px 2px;
- transition: background-color 0.3s, transform 0.3s;
- cursor: pointer;
- border-radius: 12px;
- border: 1px solid #f0f0f0;
- }
-
- .button-grammar {
- background-color: var(--primary-color);
- color: white;
- border: none;
- padding: 10px 20px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: small;
- margin: 2px 2px;
- transition: background-color 0.3s, transform 0.3s;
- cursor: pointer;
- border-radius: 10px;
- border: 1px solid #f0f0f0;
- }
-
- .button-grammar:hover {
- background-color: var(--primary-color);
- color: white;
- border: none;
- padding: 10px 20px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: small;
- margin: 2px 2px;
- transition: background-color 0.3s, transform 0.3s;
- cursor: pointer;
- border-radius: 10px;
- border: 1px solid #f0f0f0;
- }
-
- .prob-set {
- padding: 0.3em;
- border-bottom: 1px solid #ccc;
- }
-
- .popover-content {
- position: absolute;
- background-color: white;
- padding: 0.2em;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- }
-
- textarea {
- padding: 5px;
- flex-grow: 1;
- width: 100%;
- border-radius: 8px;
- border: 1px solid #ccc;
- resize: none;
- height: 6em;
- }
-
- input[type="text"],
- input[type="range"] {
- padding: 5px;
- border-radius: 8px;
- border: 1px solid #ccc;
- }
-
- input[type="text"]:focus {
- outline: none;
- border: 1px solid var(--input-focus-border-color);
- box-shadow: 0 0 1px var(--input-focus-border-color);
- }
-
- input[type="text"] {
- border-radius: 8px;
- }
-
- input[type="range"] {
- -webkit-appearance: none;
- width: 80%;
- height: 1px;
- border: 3px solid var(--background-color);
- border-radius: 8px;
- background: var(--border-color);
- outline: none;
- opacity: 0.7;
- -webkit-transition: .2s;
- transition: opacity .2s;
- }
-
- input[type="range"]:hover {
- opacity: 1;
- }
-
- input[type="range"]:focus,
- textarea:focus {
- outline: none;
- border: 1px solid var(--primary-color);
- box-shadow: 0 0 1px var(--input-focus-border-color);
- }
-
- input[type="range"]::-webkit-slider-thumb {
- -webkit-appearance: none;
- appearance: none;
- width: 6px;
- height: 25px;
- border: 1px solid var(--border-color);
- border-radius: 5px;
- background: var(--background-color);
- background-color: var(--background-color);
- cursor: pointer;
- }
-
- input[type="range"]::-moz-range-thumb {
- width: 3px;
- height: 25px;
- border: 1px solid var(--border-color);
- border-radius: 5px;
- background: var(--background-color);
- cursor: pointer;
- }
-
- input[type="range"]::-webkit-slider-runnable-track {
- background-size: var(--slider-track-size);
- }
-
- input[type="range"]:focus {
- background-size: var(--slider-track-size-focus);
- }
-
- input[type="radio"] {
- accent-color: var(--primary-color);
- }
-
- .chat-input-container {
- position: relative;
- }
-
- .chat-input-label {
- position: absolute;
- top: 0;
- left: 0;
- color: var(--text-color);
- pointer-events: none;
- margin-left: 5px;
- margin-top: 5px;
- }
-
- textarea#chat-input {
- padding-top: 10px;
- padding-left: 10px;
- font-size: medium;
- }
-
- .input-container {
- position: relative;
- }
-
- .input-label {
- position: absolute;
- top: 0;
- left: 0;
- color: var(--primary-color);
- pointer-events: none;
- margin-left: 13px;
- margin-top: 16px;
- text-transform: uppercase;
- font-weight: 600;
- font-size: small;
- }
-
- .input-label-sec {
- position: absolute;
- top: 0;
- left: 0;
- color: var(--text-color);
- pointer-events: none;
- margin-left: 13px;
- margin-top: 16px;
- text-transform: uppercase;
- font-weight: 600;
- font-size: x-small;
- }
-
-
- textarea.persistent-input {
- padding-top: 42px;
- padding-left: 11px;
- font-size: medium;
- }
-
- textarea.persistent-input-sec {
- padding-top: 42px;
- padding-left: 11px;
- font-size: small;
- }
-
- .persistent-input-sec {
- height: auto;
- min-height: 150px;
- }
-
- .json-schema-controls {
- margin-top: 10px;
- display: flex;
- width: 100%;
- /*gap: 1em; Fügt einen Abstand zwischen den Elementen hinzu */
- }
-
- .json-schema-controls > * {
- flex: 1; /* Teilt den verfügbaren Platz gleichmäßig auf */
- }
-
- pre code {
- display: block;
- background-color: #222;
- color: #ddd;
- }
-
- code {
- font-family: monospace;
- padding: 0.1em 0.3em;
- border-radius: 3px;
- }
-
- fieldset label {
- margin: 0.5em 0;
- display: block;
- }
-
- fieldset label.slim {
- margin: 0 0.5em;
- display: inline;
- }
-
- header,
- footer {
- text-align: center;
- }
-
- footer {
- font-size: 80%;
- color: #888;
- text-align: center;
- }
-
- footer a {
- color: #333; /* Farbe des Links */
- text-decoration: none; /* Keine Unterstreichung */
- font-weight: bold; /* Fettgedruckt */
- }
-
- footer a:hover {
- color: #555; /* Farbe des Links beim Hovern */
- text-decoration: underline; /* Unterstreichung beim Hovern */
- }
-
- .mode-chat textarea[name=prompt] {
- height: 8.5em;
- }
-
- .mode-completion textarea[name=prompt] {
- height: 30em;
- }
-
- @keyframes loading-bg-wipe {
- 0% {
- background-position: 0%;
- }
- 100% {
- background-position: 100%;
- }
- }
-
- .loading {
- background-size: 50% 100%;
- background-image: linear-gradient(90deg, var(--loading-color-1), var(--loading-color-2), var(--loading-color-1));
- animation: loading-bg-wipe 2s linear infinite;
- }
-
- @media (prefers-color-scheme: dark) {
- :root {
- --primary-color: var(--dark-primary-color);
- --secondary-color: var(--dark-secondary-color);
- --background-color: var(--dark-background-color);
- --text-color: var(--dark-text-color);
- --border-color: var(--dark-border-color);
- --button-hover-color: var(--dark-button-hover-color);
- --button-hover-alert: var(--dark-button-hover-alert);
- --input-focus-border-color: var(--dark-input-focus-border-color);
- --loading-color-1: var(--dark-loading-color-1);
- --loading-color-2: var(--dark-loading-color-2);
- --loading-color-1: #22222200;
- --loading-color-2: #222222ff;
- }
- body {
- background-color: black;
- color: white;
- }
- .popover-content {
- background-color: black;
- }
- }
+@import url("colorthemes.css");
+
+body {
+ font-family: 'Arial', sans-serif;
+ font-size: 90%;
+ background-color: var(--background-color-1);
+ color: var(--text-color-subtile-1); /* head 1 llama.cpp & triangle options for some reason */
+ max-width: 600px;
+ min-width: 300px;
+ line-height: 1.2;
+ margin: 0 auto;
+ padding: 0 0.5em;
+ transition: background-color 0.3s;
+}
+
+code, pre code {
+ font-family: 'Courier New', monospace;
+}
+
+#container {
+ margin: 0em auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 100%;
+}
+
+main {
+ margin: 3px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 1em;
+ flex-grow: 1;
+ overflow-y: auto;
+ border: 1px solid var(--border-color-3);
+ border-radius: 5px;
+ padding: 0.5em;
+}
+
+p {
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ hyphens: auto;
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+}
+
+#write form {
+ margin: 1em 0 0 0;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5em;
+ align-items: stretch;
+}
+
+.right {
+ display: flex;
+ flex-direction: row;
+ gap: 0.5em;
+ justify-content: flex-end;
+}
+
+.two-columns {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1em;
+}
+
+/* titles of the details-summary boxes */
+.summary-title {
+ font-weight: 600;
+ font-size: x-small;
+ color: var(--text-color-subtile-1);
+ text-transform: uppercase;
+}
+
+fieldset {
+ border: none;
+ padding: 0;
+ margin: 0;
+ color: var(--text-color-plain);
+}
+
+fieldset.two {
+ display: grid;
+ grid-template: "a a";
+ gap: 1em;
+ font-size: x-small;
+ color: var(--text-color-plain);
+}
+
+fieldset.three {
+ display: grid;
+ grid-template: "a a a";
+ gap: 1em;
+ font-size: x-small;
+ color: var(--text-color-plain);
+}
+
+/* titles of name fields*/
+fieldset.names {
+ display: grid;
+ grid-template: "a a";
+ gap: 1em;
+ font-size: x-small;
+ color: var(--theme-nuance-color-3);
+ padding-top: 16px;
+ padding-bottom: 16px;
+ text-transform: uppercase;
+ font-weight: 600;
+}
+
+fieldset.dropdowns {
+ display: flex;
+ grid-template: "a a";
+ gap: 1em;
+ font-size: x-small;
+ color: red;
+ padding-top: 16px;
+ padding-bottom: 16px;
+ text-transform: uppercase;
+ font-weight: 600;
+}
+
+/* input of name fields*/
+.names input[type="text"] {
+ font-family: Arial, sans-serif;
+ font-size: medium;
+ font-weight: 500;
+ padding: 5px;
+ border: 1px solid var(--border-color-2);
+}
+
+details {
+ border: 1px solid var(--border-color-2);
+ border-radius: 5px;
+ padding: 0.5em 0.5em 0;
+ margin-top: 0.5em;
+}
+
+summary {
+ font-weight: bold;
+ margin: -0.5em -0.5em 0;
+ padding: 0.5em;
+ cursor: pointer;
+}
+
+details[open] {
+ padding: 0.5em;
+}
+
+textarea-sec, input-sec, button-sec {
+ padding: 10px;
+ height: 40px;
+ align-items: center;
+}
+
+textarea-sec::placeholder, input-sec::placeholder {
+ padding-left: 10px;
+}
+
+.toggleCheckbox {
+ display: none;
+}
+
+.toggleContainer {
+ position: relative;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ width: fit-content;
+ border: 3px solid var(--border-color-2);
+ border-radius: 20px;
+ background: var(--border-color-2);
+ font-size: small;
+ cursor: pointer;
+ overflow: hidden;
+}
+
+/* toggle button current state */
+.toggleContainer::before {
+ color: var(--button-primary-text);
+ background-color: var(--button-primary-color);
+ content: '';
+ position: absolute;
+ width: 50%;
+ height: 100%;
+ left: 0%;
+ border-radius: 20px;
+ transition: all 0.3s;
+}
+
+.toggleContainer div {
+ padding: 6px;
+ text-align: center;
+ z-index: 1;
+ transition: color 0.3s;
+}
+
+.toggleCheckbox:checked + .toggleContainer::before {
+ left: 50%;
+}
+
+.toggleCheckbox:checked + .toggleContainer div:first-child {
+ color: var(--text-color-subtile-2);
+}
+
+.toggleCheckbox:checked + .toggleContainer div:last-child {
+ color: var(--button-primary-text);
+}
+
+.toggleCheckbox + .toggleContainer div:first-child {
+ color: var(--button-primary-text);
+}
+
+.toggleCheckbox + .toggleContainer div:last-child {
+ color: var(--text-color-subtile-2);
+}
+
+select {
+ padding: 5px;
+ margin-right: 5px;
+ border-radius: 4px;
+ border: 1px solid var(--secondary-color-4);
+ background-color: var(--primary-color-3);
+ color: var(--secondary-color-4);
+ cursor: pointer;
+}
+
+select:focus {
+ border: 1px solid var(--border-focus-color);
+ box-shadow: 0 0 1px var(--border-focus-shadow);
+}
+
+.button-container {
+ display: flex;
+ justify-content: flex-end;
+}
+
+button {
+ color: var(--button-primary-text);
+ background-color: var(--button-primary-color);
+ border: 1px solid var(--button-primary-border);
+ transition: background-color 0.1s;
+ border-radius: 12px;
+ font-size: x-small;
+ font-weight: 600;
+ text-shadow: 0px 0px 30px #ffffff;
+ text-align: center;
+ text-decoration: none;
+ margin: 4px 2px;
+ padding: 10px 20px;
+ display: inline-block;
+ cursor: pointer;
+}
+
+button:hover {
+ color: var(--button-primary-text-hover);
+ background-color: var(--button-primary-color-hover);
+ border: 1px solid var(--button-primary-border-hover);
+ font-size: x-small;
+ font-weight: 600;
+}
+
+button:active {
+ color: var(--button-primary-text-active);
+ background-color: var(--button-primary-color-active);
+ border: 1px solid var(--button-primary-border-active);
+ font-size: x-small;
+ font-weight: 600;
+}
+
+button:disabled {
+ color: var(--button-tertiary-text);
+ background-color: var(--button-tertiary-color);
+ border: 1px solid var(--button-tertiary-border);
+ font-size: x-small;
+ font-weight: 600;
+ cursor: not-allowed;
+}
+
+.reset-button {
+ background-color: var(--button-secondary-color);
+ border: 1px solid var(--button-secondary-color);
+ color: var(--button-secondary-text);
+ width: fit-content;
+ height: fit-content;
+ font-size: x-small;
+ font-weight: 600;
+ border-radius: 50px;
+ overflow: hidden;
+}
+
+.reset-button:hover {
+ color: var(--button-alert-text-hover);
+ background-color: var(--button-alert-color-hover);
+ border: 1px solid var(--button-alert-border-hover);
+ font-size: x-small;
+ font-weight: 600;
+}
+
+.reset-button:active {
+ color: var(--button-alert-text-active);
+ background-color: var(--button-alert-color-active);
+ border: 1px solid var(--button-alert-border-active);
+ font-size: x-small;
+ font-weight: 600;
+}
+
+.button-grammar {
+ color: var(--button-primary-text);
+ background-color: var(--button-primary-color);
+ border: 1px solid var(--button-primary-border);
+ border-radius: 10px;
+ padding: 10px 20px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: x-small;
+ font-weight: 600;
+ margin: 2px 2px;
+ transition: background-color 0.1s;
+ cursor: pointer;
+}
+
+.button-grammar:hover {
+ color: var(--button-primary-text-hover);
+ background-color: var(--button-primary-color-hover);
+ border: 1px solid var(--button-primary-border-hover);
+ border-radius: 10px;
+ padding: 10px 20px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: x-small;
+ font-weight: 600;
+ margin: 2px 2px;
+ transition: background-color 0.1s;
+ cursor: pointer;
+}
+
+.button-grammar:active {
+ color: var(--button-primary-text-active);
+ background-color: var(--button-primary-color-active);
+ border: 1px solid var(--button-primary-border-active);
+ font-size: x-small;
+ font-weight: 600;
+}
+
+.button-back {
+ background-color: var(--button-secondary-color);
+ border: 1px solid var(--button-secondary-color);
+ color: var(--button-secondary-text);
+ transition: background-color 0.1s;
+ border-radius: 12px;
+ font-size: x-small;
+ font-weight: 600;
+ text-align: center;
+ text-decoration: none;
+ margin: 4px 2px;
+ padding: 10px 20px;
+ display: inline-block;
+ cursor: pointer;
+}
+
+.button-back:hover {
+ color: var(--button-secondary-text-hover);
+ background-color: var(--button-secondary-color-hover);
+ border: 1px solid var(--button-secondary-border-hover);
+ padding: 10px 20px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: x-small;
+ font-weight: 600;
+ margin: 4px 2px;
+ transition: background-color 0.1s;
+ cursor: pointer;
+ border-radius: 12px;
+}
+
+.button-back:active {
+ color: var(--button-secondary-text-active);
+ background-color: var(--button-secondary-color-active);
+ border: 1px solid var(--button-secondary-border-active);
+ font-size: x-small;
+ font-weight: 600;
+}
+
+.prob-set {
+ padding: 0.3em;
+ border-bottom: 1px solid red; /* unknown */
+}
+
+.popover-content {
+ position: absolute;
+ background-color: white;
+ padding: 0.2em;
+ box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
+}
+
+/* Grammar text field */
+textarea {
+ padding: 5px;
+ flex-grow: 1;
+ width: 100%;
+ border-radius: 8px;
+ border: 1px solid var(--border-color-1);
+ resize: none;
+ height: 6em;
+}
+
+textarea:focus {
+ outline: none;
+ border: 1px solid var(--border-focus-color);
+ box-shadow: 0 0 3px var(--border-focus-shadow);
+}
+
+/* "props" frame */
+input[type="text"],
+input[type="range"] {
+ padding: 5px;
+ border-radius: 8px;
+ border: 1px solid var(--border-color-1);
+}
+
+/* "names and props" frame focused*/
+input[type="text"]:focus {
+ outline: none;
+ border: 1px solid var(--border-focus-color);
+ box-shadow: 0 0 3px var(--border-focus-shadow);
+}
+
+input[type="range"]:hover {
+ opacity: 1;
+}
+
+input[type="range"]:focus {
+ outline: none;
+ border: 1px solid var(--border-focus-color);
+ box-shadow: 0 0 3px var(--border-focus-shadow);
+ background-size: var(--slider-track-size-focus);
+}
+
+input[type="range"]::-moz-range-thumb {
+ width: 6px;
+ height: 25px;
+ border: 1px solid var(--ui-range-thumb-border);
+ border-radius: 5px;
+ background-color: var(--ui-range-thumb-color);
+ cursor: pointer;
+}
+
+input[type="range"] {
+ -webkit-appearance: none;
+ width: 80%;
+ height: 1px;
+ border: 1px solid var(--border-color-1);
+ border-radius: 8px;
+ background: var(--border-color-2);
+ outline: none;
+ opacity: 0.7;
+ -webkit-transition: .2s;
+ transition: opacity .2s;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 6px;
+ height: 25px;
+ border: 1px solid var(--ui-range-thumb-border);
+ border-radius: 5px;
+ background-color: var(--ui-range-thumb-color);
+ cursor: pointer;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+ background-size: var(--slider-track-size);
+}
+
+input[type="radio"] {
+ accent-color: var(--theme-nuance-color-2);
+}
+
+.chat-input-container {
+ position: relative;
+}
+
+.chat-input-label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ color: var(--text-color-plain);
+ pointer-events: none;
+ margin-left: 5px;
+ margin-top: 5px;
+}
+
+textarea#chat-input {
+ padding-top: 10px;
+ padding-left: 10px;
+ font-size: medium;
+ border: 1px solid var(--border-color-2);
+}
+
+textarea#chat-input:focus {
+ border: 1px solid var(--border-focus-color);
+ box-shadow: 0 0 3px var(--border-focus-shadow);
+}
+
+.input-container {
+ position: relative;
+}
+
+.input-container:focus {
+ border: 1px solid var(--border-focus-color);
+ box-shadow: 0 0 3px var(--border-focus-shadow);
+}
+
+/* embedded title of the system prompt text area */
+.input-label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ color: var(--theme-nuance-color-4);
+ pointer-events: none;
+ border-radius: 8px 8px 0px 0px;
+ padding-top: 10px;
+ padding-left: 13px;
+ padding-right: 0px;
+ margin-top: 1px;
+ margin-left: 1px;
+ margin-right: 20px;
+ text-transform: uppercase;
+ font-weight: 600;
+ font-size: small;
+ background: rgba(255, 255, 255, 0.5);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px); /* for safari */
+ width: 97%;
+ /* display: block;
+ box-sizing: border-box; */
+}
+
+/* embedded title of the prompt style areas */
+.input-label-sec {
+ position: absolute;
+ top: 0;
+ left: 0;
+ color: var(--theme-nuance-color-4);
+ pointer-events: none;
+ margin-left: 13px;
+ margin-top: 16px;
+ text-transform: uppercase;
+ font-weight: 600;
+ font-size: x-small;
+}
+
+/* system prompt input area */
+textarea.persistent-input {
+ padding-top: 42px;
+ padding-left: 11px;
+ font-size: medium;
+}
+
+/* chat history box */
+.persistent-input {
+ height: auto;
+ min-height: 150px;
+}
+
+/* chat history box */
+.persistent-input:focus {
+ height: auto;
+ min-height: 150px;
+ border: 1px solid var(--border-focus-color);
+ box-shadow: 0 0 3px var(--border-focus-shadow);
+}
+
+textarea.persistent-input:focus {
+ border: 1px solid var(--border-focus-color);
+ box-shadow: 0 0 3px var(--border-focus-shadow);
+}
+
+/* prompt style input area */
+textarea.persistent-input-sec {
+ padding-top: 42px;
+ padding-left: 11px;
+ font-size: small;
+ border: 1px solid var(--border-color-1);
+}
+
+textarea.persistent-input-sec:focus {
+ border: 1px solid var(--border-focus-color);
+ box-shadow: 0 0 3px var(--border-focus-shadow);
+}
+
+/* chat history box */
+.persistent-input-sec {
+ height: auto;
+ min-height: 150px;
+}
+
+.json-schema-controls {
+ margin-top: 10px;
+ display: flex;
+ width: 100%;
+}
+
+.json-schema-controls > * {
+ flex: 1; /* Divides the available space evenly */
+}
+
+/* code area background */
+pre code {
+ display: block;
+ background-color: var(--code-background-color);
+ color: var(--code-text-color);
+ padding: 0.2em 0.2em;
+ border-radius: 5px;
+}
+
+/* code area text */
+code {
+ font-family: monospace;
+ font-weight: bold;
+ padding: 0.1em 0.3em;
+ border-radius: 5px;
+}
+
+fieldset label {
+ margin: 0.5em 0;
+ display: block;
+}
+
+fieldset label.slim {
+ margin: 0 0.5em;
+ display: inline;
+}
+
+header,
+footer {
+ text-align: center;
+}
+
+footer {
+ font-size: 80%;
+ color: var(--background-color-3);
+ text-align: center;
+ }
+
+footer a {
+ color: var(--background-color-4); /* Color of the link */
+ text-decoration: none; /* No underlining */
+ font-weight: bold; /* Bold print */
+}
+
+footer a:hover {
+ color: var(--theme-nuance-color-4); /* Color of the link when hovering */
+ text-decoration: underline; /* Underlining when hovering */
+}
+
+.mode-chat textarea[name=prompt] {
+ height: 8.5em;
+ border: 1px solid var(--primary-color-3);
+}
+
+.mode-completion textarea[name=prompt] {
+ height: 30em;
+ border: 1px solid var(--primary-color-3);
+}
+
+@keyframes loading-bg-wipe {
+ 0% {
+ background-position: 0%;
+ }
+ 100% {
+ background-position: 100%;
+ }
+}
+
+.loading {
+ background-size: 50% 100%;
+ background-image: linear-gradient(90deg, var(--loading-color-1), var(--loading-color-2), var(--loading-color-1));
+ animation: loading-bg-wipe 2s linear infinite;
+}
diff --git a/examples/server/public/theme-been_in_order.css b/examples/server/public/theme-been_in_order.css
new file mode 100644
index 000000000..4e4222871
--- /dev/null
+++ b/examples/server/public/theme-been_in_order.css
@@ -0,0 +1,226 @@
+/* Author: Yazan Agha-Schrader */
+/* Inspiration was a batman wallpaper that i have on my phone */
+
+.theme-been_in_order {
+
+ --primary-color-1: hsl(202, 11%, 19%);
+ --primary-color-2: hsl(202, 11%, 23%);
+ --primary-color-3: hsl(201, 11%, 28%);
+ --primary-color-4: hsl(201, 11%, 40%);
+
+ --secondary-color-1: hsl(201, 11%, 80%);
+ --secondary-color-2: hsl(201, 11%, 74%);
+ --secondary-color-3: hsl(201, 11%, 67%);
+ --secondary-color-4: hsl(201, 11%, 60%);
+
+
+ --theme-nuance-color-1: hsl(44.5, 96.7%, 52.9%);
+ --theme-nuance-color-2: hsl(44.5, 96.7%, 52.9%);
+ --theme-nuance-color-3: hsl(44.5, 96.7%, 52.9%);
+ --theme-nuance-color-4: hsl(44.5, 96.7%, 52.9%);
+
+
+
+ /* ---------- PRIMARY COLORS ----------------- */
+ --primary-color-1: hsl(201, 11%, 19%);
+ --primary-color-1-hue: 201;
+ --primary-color-1-saturation: 11%;
+ --primary-color-1-lightness: 19%;
+
+ --primary-color-2: hsl(201, 11%, 23%);
+ --primary-color-2-hue: 201;
+ --primary-color-2-saturation: 11%;
+ --primary-color-2-lightness: 23%;
+
+ --primary-color-3: hsl(201, 11%, 28%);
+ --primary-color-3-hue: 201;
+ --primary-color-3-saturation: 11%;
+ --primary-color-3-lightness: 28%;
+
+ --primary-color-4: hsl(201, 11%, 40%);
+ --primary-color-4-hue: 201;
+ --primary-color-4-saturation: 11%;
+ --primary-color-4-lightness: 40%;
+
+
+
+ /* ---------- SECONDARY COLORS --------------- */
+ --secondary-color-1: hsl(201, 11%, 80%);
+ --secondary-color-1-hue: 201;
+ --secondary-color-1-saturation: 11%;
+ --secondary-color-1-lightness: 80%;
+
+ --secondary-color-2: hsl(201, 11%, 74%);
+ --secondary-color-2-hue: 201;
+ --secondary-color-2-saturation: 11%;
+ --secondary-color-2-lightness: 74%;
+
+ --secondary-color-3: hsl(201, 11%, 67%);
+ --secondary-color-3-hue: 201;
+ --secondary-color-3-saturation: 11%;
+ --secondary-color-3-lightness: 67%;
+
+ --secondary-color-4: hsl(201, 11%, 60%);
+ --secondary-color-4-hue: 201;
+ --secondary-color-4-saturation: 11%;
+ --secondary-color-4-lightness: 60%;
+
+
+
+ /* ----------- NUANCES COLORS ---------------- */
+ --theme-nuance-color-1: hsl(44.5, 96.7%, 52.9%);
+ --theme-nuance-color-1-hue: 44.5;
+ --theme-nuance-color-1-saturation: 96.7%;
+ --theme-nuance-color-1-lightness: 52.9%;
+
+ --theme-nuance-color-2: hsl(44.5, 96.7%, 52.9%);
+ --theme-nuance-color-2-hue: 44.5;
+ --theme-nuance-color-2-saturation: 96.7%;
+ --theme-nuance-color-2-lightness: 52.9%;
+
+ --theme-nuance-color-2: hsl(44.5, 96.7%, 52.9%);
+ --theme-nuance-color-3-hue: 44.5;
+ --theme-nuance-color-3-saturation: 96.7%;
+ --theme-nuance-color-3-lightness: 52.9%;
+
+ --theme-nuance-color-2: hsl(44.5, 96.7%, 52.9%);
+ --theme-nuance-color-4-hue: 44.5;
+ --theme-nuance-color-4-saturation: 96.7%;
+ --theme-nuance-color-4-lightness: 52.9%;
+
+
+
+ /* ----------- ROYGP COLORS ------------------ */
+ --theme-red-color: hsl(232, 40%, 45%);
+ --theme-orange-color: #e76f51;
+ --theme-yellow-color: #ffd95f;
+ --theme-green-color: #A3BE8C;
+ --theme-purple-color: hsl(232, 30%, 40%);
+
+
+
+ /* ------------------------------------------- */
+ --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);
+
+
+
+ /* ------------------------------------------- */
+ --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-red-color);
+ --button-alert-border-active: var(--theme-red-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(201,
+ calc(var(--primary-color-1-saturation) - 100%),
+ calc(var(--primary-color-1-lightness) + 100%));
+
+ --button-primary-color-hover:
+ hsl(44.5,
+ calc(var(--theme-nuance-color-3-saturation) - 2%),
+ calc(var(--theme-nuance-color-3-lightness) - 10%));
+
+ --button-primary-border-hover:
+ hsl(44.5,
+ calc(var(--theme-nuance-color-3-saturation) - 2%),
+ calc(var(--theme-nuance-color-3-lightness) - 10%));
+
+
+ /* ---------active--------- */
+ --button-primary-text-active:
+ hsl(44.5,
+ calc(var(--theme-nuance-color-3-saturation) - 100%),
+ calc(var(--theme-nuance-color-3-lightness) + 100%));
+
+ --button-primary-color-active:
+ hsl(44.5,
+ calc(var(--theme-nuance-color-3-saturation) - 10%),
+ calc(var(--theme-nuance-color-3-lightness) - 15%));
+
+ --button-primary-border-active:
+ hsl(44.5,
+ 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(44.5,
+ 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(201,
+ calc(var(--primary-color-4-saturation) - 30%),
+ calc(var(--primary-color-4-lightness) - 15%));
+
+ --button-secondary-border-active:
+ hsl(201,
+ 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);
+
+ }
diff --git a/examples/server/public/theme-mangotango.css b/examples/server/public/theme-mangotango.css
new file mode 100644
index 000000000..5344eb62c
--- /dev/null
+++ b/examples/server/public/theme-mangotango.css
@@ -0,0 +1,214 @@
+/* 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);
+
+
+
+ /* ------------------------------------------- */
+ --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);
+
+ }
diff --git a/examples/server/public/theme-playground.css b/examples/server/public/theme-playground.css
new file mode 100644
index 000000000..5e9a12c73
--- /dev/null
+++ b/examples/server/public/theme-playground.css
@@ -0,0 +1,219 @@
+/* Author: Yazan Agha-Schrader */
+/* Inspiration from OpenAI's Playground platform https://platform.openai.com/playground/ */
+
+.theme-playground {
+
+ /* ---------- PRIMARY COLORS ----------------- */
+ --primary-color-1: hsl(0, 0%, 99.2%);
+ --primary-color-1-hue: 0;
+ --primary-color-1-saturation: 0%;
+ --primary-color-1-lightness: 99.2%;
+
+ --primary-color-2: hsl(0, 0%, 95%);
+ --primary-color-2-hue: 0;
+ --primary-color-2-saturation: 0%;
+ --primary-color-2-lightness: 95%;
+
+ --primary-color-3: hsl(0, 0%, 88%);
+ --primary-color-3-hue: 0;
+ --primary-color-3-saturation: 0%;
+ --primary-color-3-lightness: 88%;
+
+ --primary-color-4: hsl(0, 0%, 80%);
+ --primary-color-4-hue: 0;
+ --primary-color-4-saturation: 0%;
+ --primary-color-4-lightness: 80%;
+
+
+
+ /* ---------- SECONDARY COLORS --------------- */
+ --secondary-color-1: hsl(0, 0%, 20%);
+ --secondary-color-1-hue: 0;
+ --secondary-color-1-saturation: 0%;
+ --secondary-color-1-lightness: 20%;
+
+ --secondary-color-2: hsl(0, 0%, 23.1%);
+ --secondary-color-2-hue: 0;
+ --secondary-color-2-saturation: 0%;
+ --secondary-color-2-lightness: 23.1%;
+
+ --secondary-color-3: hsl(0, 0%, 29%);
+ --secondary-color-3-hue: 0;
+ --secondary-color-3-saturation: 0%;
+ --secondary-color-3-lightness: 29%;
+
+ --secondary-color-4: hsl(0, 0%, 36.1%);
+ --secondary-color-4-hue: 0;
+ --secondary-color-4-saturation: 0%;
+ --secondary-color-4-lightness: 36.1%;
+
+
+
+ /* ----------- NUANCES COLORS ---------------- */
+ --theme-nuance-color-1: hsl(165.2, 82.1%, 35.1%);
+ --theme-nuance-color-1-hue: 165.2;
+ --theme-nuance-color-1-saturation: 82.1%;
+ --theme-nuance-color-1-lightness: 35.1%;
+
+ --theme-nuance-color-2: hsl(165.2, 82.1%, 35.1%);
+ --theme-nuance-color-2-hue: 165.2;
+ --theme-nuance-color-2-saturation: 82.1%;
+ --theme-nuance-color-2-lightness: 35.1%;
+
+ --theme-nuance-color-3: hsl(165.2, 81.1%, 35.3%);
+ --theme-nuance-color-3-hue: 165.2;
+ --theme-nuance-color-3-saturation: 81.1%;
+ --theme-nuance-color-3-lightness: 35.3%;
+
+ --theme-nuance-color-4: hsl(164.9, 81.6%, 27.6%);
+ --theme-nuance-color-4-hue: 164.9;
+ --theme-nuance-color-4-saturation: 81.6%;
+ --theme-nuance-color-4-lightness: 27.6%;
+
+
+
+ /* ----------- ROYGP COLORS ------------------ */
+ --theme-red-color: hsl(0.3, 80%, 50%);
+ --theme-orange-color: #e76f51;
+ --theme-yellow-color: hsl(60, 70.6%, 73.3%);
+ --theme-green-color: #A3BE8C;
+ --theme-purple-color: hsl(0.3, 70%, 45%);
+
+
+
+ /* ------------------------------------------- */
+ --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(--primary-color-4);
+ --ui-range-thumb-border: var(--ui-ranger-thumb-color);
+
+ --textarea-border-color: var(--secondary-color-4);
+
+
+
+ /* ------------------------------------------- */
+ --button-alert-text-hover: var(--primary-color-1);
+ --button-alert-color-hover: var(--theme-purple-color);
+ --button-alert-border-hover: var(--theme-purple-color);
+
+ --button-alert-text-active: var(--primary-color-1);
+ --button-alert-color-active: var(--theme-red-color);
+ --button-alert-border-active: var(--theme-red-color);
+
+
+
+ /* ----------- PRIMARY BUTTONS --------------- */
+ /* - button should immediately catch the eye - */
+ --button-primary-text:
+ hsl(0,
+ calc(var(--primary-color-1-saturation) - 100%),
+ calc(var(--primary-color-1-lightness) + 100%));
+
+ --button-primary-color: var(--theme-nuance-color-3);
+ --button-primary-border: var(--theme-nuance-color-3);
+
+
+ /* ---------hover---------- */
+ --button-primary-text-hover:
+ hsl(0,
+ calc(var(--primary-color-1-saturation) - 100%),
+ calc(var(--primary-color-1-lightness) + 100%));
+
+ --button-primary-color-hover:
+ hsl(165.2,
+ calc(var(--theme-nuance-color-3-saturation) - 2%),
+ calc(var(--theme-nuance-color-3-lightness) - 10%));
+
+ --button-primary-border-hover:
+ hsl(165.2,
+ calc(var(--theme-nuance-color-3-saturation) - 2%),
+ calc(var(--theme-nuance-color-3-lightness) - 10%));
+
+
+ /* ---------active--------- */
+ --button-primary-text-active:
+ hsl(165.2,
+ calc(var(--theme-nuance-color-3-saturation) - 100%),
+ calc(var(--theme-nuance-color-3-lightness) + 100%));
+
+ --button-primary-color-active:
+ hsl(165.2,
+ calc(var(--theme-nuance-color-3-saturation) - 10%),
+ calc(var(--theme-nuance-color-3-lightness) - 15%));
+
+ --button-primary-border-active:
+ hsl(165.2,
+ 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:
+ hsl(165.2,
+ calc(var(--theme-nuance-color-3-saturation) - 20%),
+ calc(var(--theme-nuance-color-3-lightness) - 50%));
+
+ --button-secondary-color: var(--primary-color-3);
+ --button-secondary-border: var(--primary-color-3);
+
+
+ /* ---------hover---------- */
+ --button-secondary-text-hover:
+ hsl(165.2,
+ 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:
+ hsl(165.2,
+ calc(var(--theme-nuance-color-3-saturation) - 20%),
+ calc(var(--theme-nuance-color-3-lightness) - 80%));
+
+ --button-secondary-color-active:
+ hsl(0,
+ calc(var(--primary-color-4-saturation) - 30%),
+ calc(var(--primary-color-4-lightness) - 15%));
+
+ --button-secondary-border-active:
+ hsl(0,
+ 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);
+
+ }
diff --git a/examples/server/public/theme-polarnight.css b/examples/server/public/theme-polarnight.css
new file mode 100644
index 000000000..c1aa24c4a
--- /dev/null
+++ b/examples/server/public/theme-polarnight.css
@@ -0,0 +1,251 @@
+/* Author: Yazan Agha-Schrader */
+/* Inspiration from Nord Theme https://www.nordtheme.com/docs/colors-and-palettes */
+
+.theme-polarnight {
+
+ /* ---------- PRIMARY COLORS ----------------- */
+ --primary-color-1: hsl(220.0, 16.4%, 21.6%) ;
+ --primary-color-1-hue: 220.0;
+ --primary-color-1-saturation: 16.4%;
+ --primary-color-1-lightness: 21.6%;
+
+ --primary-color-2: hsl(221.7, 16.3%, 27.6%) ;
+ -primary-color-2-hue: 221.7;
+ --primary-color-2-saturation: 16.3%;
+ --primary-color-2-lightness: 27.6%;
+
+ --primary-color-3: hsl(220.0, 16.8%, 31.6%) ;
+ --primary-color-3-hue: 220.0;
+ --primary-color-3-saturation: 16.8%;
+ --primary-color-3-lightness: 31.6%;
+
+ --primary-color-4: hsl(220.0, 16.5%, 35.7%);
+ --primary-color-4-hue: 220.0;
+ --primary-color-4-saturation: 16.5%;
+ --primary-color-4-lightness: 35.7%;
+
+
+
+ /* ---------- SECONDARY COLORS --------------- */
+ --secondary-color-1: hsl(217.5, 26.7%, 94.1%);
+ --secondary-color-1-hue: 217.5;
+ --secondary-color-1-saturation: 26.7%;
+ --secondary-color-1-lightness: 94.1%;
+
+ --secondary-color-2: hsl(218.2, 26.8%, 92.0%);
+ --secondary-color-2-hue: 218.2;
+ --secondary-color-2-saturation: 26.8%;
+ --secondary-color-2-lightness: 92.0%;
+
+ --secondary-color-3: hsl(218.8, 27.9%, 88.0%);
+ --secondary-color-3-hue: 218.8;
+ --secondary-color-3-saturation: 27.9%;
+ --secondary-color-3-lightness: 88.0%;
+
+ --secondary-color-4: hsl(218.8, 18.3%, 81.8%);
+ --secondary-color-4-hue: 218.8;
+ --secondary-color-4-saturation: 18.3%;
+ --secondary-color-4-lightness: 81.8%;
+
+
+
+ /* ----------- NUANCES COLORS ---------------- */
+ --theme-nuance-color-1: hsl(178.7, 25.1%, 64.9%);
+ --theme-nuance-color-1-hue: 178.7;
+ --theme-nuance-color-1-saturation: 25.1%;
+ --theme-nuance-color-1-lightness: 64.9%;
+
+ --theme-nuance-color-2: hsl(193.3, 43.4%, 67.5%);
+ --theme-nuance-color-2-hue: 193.3;
+ --theme-nuance-color-2-saturation: 43.4%;
+ --theme-nuance-color-2-lightness: 67.5%;
+
+ --theme-nuance-color-3: hsl(210.0, 34.0%, 63.1%);
+ --theme-nuance-color-3-hue: 210.0;
+ --theme-nuance-color-3-saturation: 34.0%;
+ --theme-nuance-color-3-lightness: 63.1%;
+
+ --theme-nuance-color-4: hsl(213.1, 32.0%, 52.2%);
+ --theme-nuance-color-4-hue: 213.1;
+ --theme-nuance-color-4-saturation: 32.0%;
+ --theme-nuance-color-4-lightness: 52.2%;
+
+
+
+ /* ----------- ROYGP COLORS ------------------ */
+ --theme-red-color: hsl(354.3, 42.3%, 56.5%);
+ --theme-orange-color: hsl(20, 85%, 50%);
+ --theme-yellow-color: hsl(20, 75%, 45%);
+ --theme-green-color: hsl( 92.4, 27.8%, 64.7%);
+ --theme-purple-color: hsl(311.1, 20.2%, 63.1%);
+
+
+
+ /* ------------------------------------------------ */
+ --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);
+
+
+
+ /* ------------------------------------------- */
+ --button-alert-text-hover: var(--secondary-color-1);
+ --button-alert-color-hover: var(--theme-yellow-color);
+ --button-alert-border-hover: var(--theme-yellow-color);
+
+ --button-alert-text-active: var(--secondary-color-1);
+ --button-alert-color-active: var(--theme-orange-color);
+ --button-alert-border-active: var(--theme-orange-color);
+
+
+
+ /* ----------- PRIMARY BUTTONS --------------- */
+ /* - button should immediately catch the eye - */
+ --button-primary-text: var(--secondary-color-1);
+ --button-primary-color: var(--theme-nuance-color-3);
+ --button-primary-border: var(--theme-nuance-color-3);
+
+
+ /* ---------hover---------- */
+ --button-primary-text-hover:
+ hsl(217.5,
+ calc(var(--secondary-color-1-saturation) - 35%),
+ calc(var(--secondary-color-1-lightness) + 30%));
+
+ --button-primary-color-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 2%),
+ calc(var(--theme-nuance-color-3-lightness) - 10%));
+
+ --button-primary-border-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 2%),
+ calc(var(--theme-nuance-color-3-lightness) - 10%));
+
+
+ /* ---------active--------- */
+ --button-primary-text-active:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 20%),
+ calc(var(--theme-nuance-color-3-lightness) + 35%));
+
+ --button-primary-color-active:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 10%),
+ calc(var(--theme-nuance-color-3-lightness) - 25%));
+
+ --button-primary-border-active:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 10%),
+ calc(var(--theme-nuance-color-3-lightness) - 25%));
+
+
+
+ /* ---------- SECONDARY BUTTONS -------------- */
+ /* these should NOT immediately catch the eye */
+ --button-secondary-text:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 20%),
+ calc(var(--theme-nuance-color-3-lightness) - 50%));
+
+ --button-secondary-color:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 20%),
+ calc(var(--theme-nuance-color-3-lightness) + 10%));
+
+ --button-secondary-border:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 20%),
+ calc(var(--theme-nuance-color-3-lightness) + 10%));
+
+
+ /* ---------hover---------- */
+ --button-secondary-text-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 20%),
+ calc(var(--theme-nuance-color-3-lightness) - 80%));
+
+ --button-secondary-color-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 22%),
+ calc(var(--theme-nuance-color-3-lightness) + 1%));
+
+ --button-secondary-border-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 22%),
+ calc(var(--theme-nuance-color-3-lightness) + 1%));
+
+
+ /* ---------active--------- */
+ --button-secondary-text-active:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 20%),
+ calc(var(--theme-nuance-color-3-lightness) + 25%));
+
+ --button-secondary-color-active:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 30%),
+ calc(var(--theme-nuance-color-3-lightness) - 15%));
+
+ --button-secondary-border-active:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 30%),
+ calc(var(--theme-nuance-color-3-lightness) - 15%));
+
+
+
+ /* ---------- TERTIARY BUTTONS --------------- */
+ /* ---------- disabled buttons --------------- */
+ --button-tertiary-text:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 40%),
+ calc(var(--theme-nuance-color-3-lightness) - 5%));
+
+ --button-tertiary-color:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 40%),
+ calc(var(--theme-nuance-color-3-lightness) + 20%));
+
+ --button-tertiary-border:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 40%),
+ calc(var(--theme-nuance-color-3-lightness) + 20%));
+
+
+ /* ---------hover---------- */
+ --button-tertiary-text-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 40%),
+ calc(var(--theme-nuance-color-3-lightness) - 5%));
+
+ --button-tertiary-color-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 40%),
+ calc(var(--theme-nuance-color-3-lightness) + 20%));
+
+ --button-tertiary-border-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 40%),
+ calc(var(--theme-nuance-color-3-lightness) + 20%));
+
+ }
diff --git a/examples/server/public/theme-snowstorm.css b/examples/server/public/theme-snowstorm.css
new file mode 100644
index 000000000..a74342404
--- /dev/null
+++ b/examples/server/public/theme-snowstorm.css
@@ -0,0 +1,249 @@
+/* Author: Yazan Agha-Schrader */
+/* Inspiration from Nord Theme https://www.nordtheme.com/docs/colors-and-palettes */
+
+.theme-snowstorm {
+
+ /* ---------- PRIMARY COLORS ----------------- */
+ --primary-color-1: hsl(217.5, 26.7%, 94.1%);
+ --primary-color-1-hue: 217.5;
+ --primary-color-1-saturation: 26.7%;
+ --primary-color-1-lightness: 94.1%;
+
+ --primary-color-2: hsl(218.2, 26.8%, 92.0%);
+ --primary-color-2-hue: 218.2;
+ --primary-color-2-saturation: 26.8%;
+ --primary-color-2-lightness: 92.0%;
+
+ --primary-color-3: hsl(218.8, 27.9%, 88.0%);
+ --primary-color-3-hue: 218.8;
+ --primary-color-3-saturation: 27.9%;
+ --primary-color-3-lightness: 88.0%;
+
+ --primary-color-4: hsl(218.8, 18.3%, 81.8%);
+ --primary-color-4-hue: 218.8;
+ --primary-color-4-saturation: 18.3%;
+ --primary-color-4-lightness: 81.8%;
+
+
+ /* ---------- SECONDARY COLORS --------------- */
+ --secondary-color-1: hsl(220.0, 16.4%, 21.6%);
+ --secondary-color-1-hue: 220.0;
+ --secondary-color-1-saturation: 16.4%;
+ --secondary-color-1-lightness: 21.6%;
+
+ --secondary-color-2: hsl(221.7, 16.3%, 27.6%);
+ --secondary-color-2-hue: 221.7;
+ --secondary-color-2-saturation: 16.3%;
+ --secondary-color-2-lightness: 27.6%;
+
+ --secondary-color-3: hsl(220.0, 16.8%, 31.6%);
+ --secondary-color-3-hue: 220.0;
+ --secondary-color-3-saturation: 16.8%;
+ --secondary-color-3-lightness: 31.6%;
+
+ --secondary-color-4: hsl(220.0, 16.5%, 35.7%);
+ --secondary-color-4-hue: 220.0;
+ --secondary-color-4-saturation: 16.5%;
+ --secondary-color-4-lightness: 35.7%;
+
+
+
+ /* ----------- NUANCES COLORS ---------------- */
+ --theme-nuance-color-1: hsl(178.7, 25.1%, 64.9%);
+ --theme-nuance-color-1-hue: 178.7;
+ --theme-nuance-color-1-saturation: 25.1%;
+ --theme-nuance-color-1-lightness: 64.9%;
+
+ --theme-nuance-color-2: hsl(193.3, 43.4%, 67.5%);
+ --theme-nuance-color-2-hue: 193.3;
+ --theme-nuance-color-2-saturation: 43.4%;
+ --theme-nuance-color-2-lightness: 67.5%;
+
+ --theme-nuance-color-3: hsl(210.0, 34.0%, 63.1%);
+ --theme-nuance-color-3-hue: 210.0;
+ --theme-nuance-color-3-saturation: 34.0%;
+ --theme-nuance-color-3-lightness: 63.1%;
+
+ --theme-nuance-color-4: hsl(213.1, 32.0%, 52.2%);
+ --theme-nuance-color-4-hue: 213.1;
+ --theme-nuance-color-4-saturation: 32.0%;
+ --theme-nuance-color-4-lightness: 52.2%;
+
+
+
+ /* ----------- ROYGP COLORS ------------------ */
+ --theme-red-color: hsl(32.5, 80%, 50%);
+ --theme-orange-color: hsl(32.5, 70%, 45%);
+ --theme-yellow-color: hsl(40.0, 0.6%, 73.3%);
+ --theme-green-color: hsl(92.4, 27.8%, 64.7%);
+ --theme-purple-color: hsl(311.1, 20.2%, 63.1%);
+
+
+
+ /* ------------------------------------------- */
+ --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);
+
+
+
+ /* ------------------------------------------- */
+ --button-alert-text-hover: var(--primary-color-1);
+ --button-alert-color-hover: var(--theme-orange-color);
+ --button-alert-border-hover: var(--theme-orange-color);
+
+ --button-alert-text-active: var(--primary-color-1);
+ --button-alert-color-active: var(--theme-red-color);
+ --button-alert-border-active: var(--theme-red-color);
+
+
+
+ /* ----------- PRIMARY BUTTONS --------------- */
+ /* - button should immediately catch the eye - */
+ --button-primary-text: var(--secondary-color-1);
+ --button-primary-color: var(--theme-nuance-color-3);
+ --button-primary-border: var(--theme-nuance-color-3);
+
+
+ /* ---------hover---------- */
+ --button-primary-text-hover:
+ hsl(217.5,
+ calc(var(--secondary-color-1-saturation) + 35%),
+ calc(var(--secondary-color-1-lightness) - 30%));
+
+ --button-primary-color-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 2%),
+ calc(var(--theme-nuance-color-3-lightness) - 10%));
+
+ --button-primary-border-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 2%),
+ calc(var(--theme-nuance-color-3-lightness) - 10%));
+
+
+ /* ---------active--------- */
+ --button-primary-text-active:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 20%),
+ calc(var(--theme-nuance-color-3-lightness) + 35%));
+
+ --button-primary-color-active:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 10%),
+ calc(var(--theme-nuance-color-3-lightness) - 25%));
+
+ --button-primary-border-active:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 10%),
+ calc(var(--theme-nuance-color-3-lightness) - 25%));
+
+
+
+ /* ---------- SECONDARY BUTTONS -------------- */
+ /* these should NOT immediately catch the eye */
+ --button-secondary-text:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 20%),
+ calc(var(--theme-nuance-color-3-lightness) - 50%));
+
+ --button-secondary-color:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 20%),
+ calc(var(--theme-nuance-color-3-lightness) + 10%));
+
+ --button-secondary-border:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 20%),
+ calc(var(--theme-nuance-color-3-lightness) + 10%));
+
+
+ /* ---------hover---------- */
+ --button-secondary-text-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 20%),
+ calc(var(--theme-nuance-color-3-lightness) - 80%));
+
+ --button-secondary-color-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 22%),
+ calc(var(--theme-nuance-color-3-lightness) + 1%));
+
+ --button-secondary-border-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 22%),
+ calc(var(--theme-nuance-color-3-lightness) + 1%));
+
+
+ /* ---------active--------- */
+ --button-secondary-text-active:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) + 40%),
+ calc(var(--theme-nuance-color-3-lightness) - 55%));
+
+ --button-secondary-color-active:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 30%),
+ calc(var(--theme-nuance-color-3-lightness) - 5%));
+
+ --button-secondary-border-active:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 30%),
+ calc(var(--theme-nuance-color-3-lightness) - 5%));
+
+
+
+ /* ---------- TERTIARY BUTTONS --------------- */
+ /* ---------- disabled buttons --------------- */
+ --button-tertiary-text:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 40%),
+ calc(var(--theme-nuance-color-3-lightness) - 5%));
+
+ --button-tertiary-color:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 40%),
+ calc(var(--theme-nuance-color-3-lightness) + 20%));
+
+ --button-tertiary-border:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 40%),
+ calc(var(--theme-nuance-color-3-lightness) + 20%));
+
+ /* ---------hover---------- */
+ --button-tertiary-text-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 40%),
+ calc(var(--theme-nuance-color-3-lightness) - 5%));
+
+ --button-tertiary-color-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 40%),
+ calc(var(--theme-nuance-color-3-lightness) + 20%));
+
+ --button-tertiary-border-hover:
+ hsl(210,
+ calc(var(--theme-nuance-color-3-saturation) - 40%),
+ calc(var(--theme-nuance-color-3-lightness) + 20%));
+
+ }