From cde0442489ac77d75d25f3686a3d88a3b02c5a51 Mon Sep 17 00:00:00 2001 From: Darius Rapalis Date: Wed, 7 Sep 2022 00:01:54 +0300 Subject: [PATCH] Implemented notes importing --- Twitch Notes/twitch-notes.css | 358 +++++++++++---- Twitch Notes/twitch-notes.js | 315 ++++++++++++- Twitch Notes/twitchvars.css | 818 ++++++++++++++++++++++++++++++++++ 3 files changed, 1394 insertions(+), 97 deletions(-) create mode 100644 Twitch Notes/twitchvars.css diff --git a/Twitch Notes/twitch-notes.css b/Twitch Notes/twitch-notes.css index 7baa397..7d55def 100644 --- a/Twitch Notes/twitch-notes.css +++ b/Twitch Notes/twitch-notes.css @@ -1,115 +1,287 @@ -:root { - --window-close: #f77669; - --window-minify: #ffcb6b; - --window-expand: #c3e88d; - - --background-header: #393d3e; - --background-code: #1f1e1e; -} - .twitch-note-container { - position: fixed; - z-index: 1000000; - min-width: 420px; - max-width: 95vw; - min-height: 240px; - max-height: 50vh; - background: var(--color-background-base); - border: var(--border-width-default) solid var(--color-border-base) !important; + position: fixed; + z-index: 1000000; + min-width: 420px; + max-width: 95vw; + min-height: 240px; + max-height: 50vh; + background: var(--color-background-base); + border: var(--border-width-default) solid var(--color-border-base) !important; } .twitch-note-header { - width: 100%; - height: 32px; - line-height: 32px; - border-bottom: var(--border-width-default) solid var(--color-border-base) !important; - position: relative; - cursor: move; + width: 100%; + height: 32px; + line-height: 32px; + border-bottom: var(--border-width-default) solid var(--color-border-base) !important; + position: relative; + cursor: move; } .twitch-note-title { - color: var(--color-text-alt) !important; - font-size: var(--font-size-6) !important; - font-weight: var(--font-weight-semibold) !important; - text-transform: uppercase !important; - padding-left: calc((32px - var(--font-size-6)) / 2); + color: var(--color-text-alt) !important; + font-size: var(--font-size-6) !important; + font-weight: var(--font-weight-semibold) !important; + text-transform: uppercase !important; + padding-left: calc((32px - var(--font-size-6)) / 2); } .twitch-note-close-button { - position: absolute; - right: 5px; - top: 5px; - width: 22px; - height: 22px; - line-height: 22px; - text-align: center; - aspect-ration: 1; - color: var(--color-text-alt) !important; - font-size: var(--font-size-6) !important; - font-weight: var(--font-weight-semibold) !important; - text-transform: uppercase !important; - border: var(--border-width-default) solid var(--color-border-base) !important; - cursor: pointer; + position: absolute; + right: 5px; + top: 5px; + width: 22px; + height: 22px; + line-height: 22px; + text-align: center; + aspect-ratio: 1; + color: var(--color-text-alt) !important; + font-size: var(--font-size-6) !important; + font-weight: var(--font-weight-semibold) !important; + text-transform: uppercase !important; + cursor: pointer; } .twitch-note-content { - position: absolute; - top: 32px; - left: 0; - right: 0; - bottom: 32px; - background: transparent; - color: var(--color-text-base) !important; - font-family: var(--font-base); - vertical-align: baseline; - outline: none; - overflow: auto; - padding: calc((32px - var(--font-size-6)) / 2); + position: absolute; + top: 32px; + left: 0; + right: 0; + bottom: 32px; + background: transparent; + color: var(--color-text-base) !important; + font-family: var(--font-base); + vertical-align: baseline; + outline: none; + overflow: auto; + padding: calc((32px - var(--font-size-6)) / 2); } .twitch-note-save-button { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 32px; - border-top: var(--border-width-default) solid var(--color-border-base) !important; - cursor: pointer; - color: var(--color-text-alt) !important; - font-size: var(--font-size-6) !important; - font-weight: var(--font-weight-semibold) !important; - text-transform: uppercase !important; - text-align: center; - line-height: 32px; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 32px; + border-top: var(--border-width-default) solid var(--color-border-base) !important; + cursor: pointer; + color: var(--color-text-alt) !important; + font-size: var(--font-size-6) !important; + font-weight: var(--font-weight-semibold) !important; + text-transform: uppercase !important; + text-align: center; + line-height: 32px; } .twitch-notes-settings-button { - z-index: var(--z-index-default) !important; - position: relative !important; - background-color: var(--color-background-button-primary-default); - color: var(--color-text-button-primary); - text-decoration: none; - cursor: pointer; - display: inline-flex; - -webkit-box-align: center; - align-items: center; - -webkit-box-pack: center; - justify-content: center; - vertical-align: middle; - overflow: hidden; - white-space: nowrap; - user-select: none; - font-weight: var(--font-weight-semibold); - border-radius: var(--border-radius-medium); - font-size: var(--button-text-default); - height: var(--button-size-default); - padding: 0 var(--button-padding-x); + z-index: var(--z-index-default) !important; + position: relative !important; + background-color: var(--color-background-button-primary-default); + color: var(--color-text-button-primary); + text-decoration: none; + cursor: pointer; + display: inline-flex; + -webkit-box-align: center; + align-items: center; + -webkit-box-pack: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + white-space: nowrap; + user-select: none; + font-weight: var(--font-weight-semibold); + border-radius: var(--border-radius-medium); + font-size: var(--button-text-default); + height: var(--button-size-default); + padding: 0 var(--button-padding-x); } -.twitch-note-settings-container { - position: absolute; - z-index: var(--z-index-balloon); - inset: auto 0px 100% auto; - margin-bottom: 8px; - margin-right: -5.3rem; +.twitch-notes-settings-container { + border: 0; + font: inherit; + padding: 0; + vertical-align: baseline; + position: fixed; + z-index: var(--z-index-balloon); + inset: auto 0 0 auto; + margin: 0 69px 48px 0; +} + +.twitch-notes-settings-balloon { + display: inline-block; + max-width: 90vw; + min-width: 0; + white-space: nowrap; + border-radius: 0.6rem !important; + background-color: var(--color-background-base) !important; + box-shadow: var(--shadow-elevation-2) !important; + color: inherit !important; +} + +.twitch-notes-settings-popover { + white-space: normal; + width: 32rem; +} + +.twitch-notes-settings-header { + display: flex !important; + -webkit-box-align: center !important; + align-items: center !important; + position: relative !important; + padding-left: 1rem !important; + padding-right: 1rem !important; + background-color: var(--color-background-base) !important; + min-height: 4rem; +} + +.twitch-notes-settings-header-left-element { + left: 0 !important; + margin-right: 0.5rem !important; + width: 3rem; +} + +.twitch-notes-settings-header-center-element { + -webkit-box-align: center !important; + align-items: center !important; + display: flex !important; + text-align: center !important; + -webkit-box-flex: 1 !important; + flex-grow: 1 !important; + -webkit-box-pack: center !important; + justify-content: center !important; +} + +.twitch-notes-settings-header-center-element-content { + line-height: 1.5; + color: var(--color-text-alt) !important; + font-size: var(--font-size-5) !important; + font-weight: var(--font-weight-semibold) !important; +} + + +.twitch-notes-settings-header-right-element { + right: 0 !important; + margin-left: 0.5rem !important; +} + +.twitch-notes-settings-close-button { + cursor: default; + text-transform: none; + text-indent: 0; + text-shadow: none; + letter-spacing: normal; + text-rendering: auto; + appearance: auto; + writing-mode: horizontal-tb !important; + box-sizing: border-box; + margin: 0; + font: inherit; + border: none; + font-size: var(--button-text-default); + font-weight: var(--font-weight-semibold); + vertical-align: middle; + overflow: hidden; + text-decoration: none; + white-space: nowrap; + position: relative; + display: inline-flex; + -webkit-box-align: center; + align-items: center; + -webkit-box-pack: center; + justify-content: center; + user-select: none; + border-radius: var(--border-radius-medium); + height: calc(var(--button-size-default) - 1rem); + width: calc(var(--button-size-default) - 1rem); + background-color: var(--color-background-button-text-default); + color: var(--color-fill-button-icon); +} + +.twitch-notes-settings-scrollable-area { + display: flex; + overflow: hidden; + z-index: 0; + height: 100%; + position: relative; + max-height: 478px; +} + +.twitch-notes-settings-content { + box-sizing: content-box; + min-width: 100%; + overflow-x: hidden; + overflow-y: auto; + max-height: inherit!important; + margin: 1rem; + padding-bottom: 0!important; +} + +.twitch-notes-settings-option-line { + position: relative !important; + width: calc(100% - 2rem)!important; +} + +.twitch-notes-settings-option-line-button { + border-radius: var(--border-radius-medium); + display: block; + width: 100%; + color: inherit; +} + +.twitch-notes-settings-option-line-button:hover { + cursor: pointer; + text-decoration: none; + color: inherit; + background-color: var(--color-background-interactable-hover); +} + +.twitch-notes-settings-option-line-button-container { + display: flex !important; + -webkit-box-align: center !important; + align-items: center !important; + position: relative !important; + padding: 0.5rem !important; +} + +.twitch-notes-settings-option-line-button-container-content { + -webkit-box-flex: 1 !important; + flex-grow: 1 !important; +} + +.twitch-note-settings-separator { + border-top: 1px solid var(--color-border-base); + margin-top: 1rem !important; + margin-left: 0.5rem !important; + margin-right: 0.5rem !important; + padding-bottom: 1rem !important; +} + +.twitch-notes-x-button { + position: absolute; + left: 0; + width: 100%; + min-height: 100%; + top: 0; + fill: currentcolor; +} + +.twitch-notes-blurred-background { + position: fixed; + inset: 0 0 0 0; + z-index: 2000000; + background: rgba(0,0,0,0.4); + backdrop-filter: blur(2px); +} + +.twitch-notes-center-floating-container { + background: var(--color-background-base); + border: var(--border-width-default) solid var(--color-border-base) !important; + padding: 4rem 2rem 2rem; + position: fixed; + top: 50vh; + left: 50vw; + transform: translate(-50%, -50%); + max-height: 90vh; + max-width: 90vw; + overflow: auto; } diff --git a/Twitch Notes/twitch-notes.js b/Twitch Notes/twitch-notes.js index 0121eee..992d6b6 100644 --- a/Twitch Notes/twitch-notes.js +++ b/Twitch Notes/twitch-notes.js @@ -1,6 +1,16 @@ (function runTwitchNotes() { + function save(filename, data) { + const blob = new Blob([data], {type: 'text/json'}); + const elem = window.document.createElement('a'); + elem.href = window.URL.createObjectURL(blob); + elem.download = filename; + document.body.appendChild(elem); + elem.click(); + document.body.removeChild(elem); + } const Notes = { + inputData: {}, getSavedUserList: () => { return JSON.parse(localStorage.getItem(LS_UserList) || "[]"); }, @@ -13,11 +23,225 @@ } }, saveNote: (username, note) => { + console.log({username, note}); Notes.addUserToSavedList(username); localStorage.setItem(LS_Prefix + username, note); }, getNote: (username) => { return localStorage.getItem(LS_Prefix + username) || ""; + }, + exportNotes: () => { + save('twitch-notes-' + (Date.now()) + '.json', JSON.stringify({ + users: Notes.getSavedUserList(), + notes: Notes.getSavedUserList().map(user => { + return {user: user, note: Notes.getNote(user)}; + }), + settings: {}, + })); + }, + importNotesConflictResolve: (user, resultsContainer, container, blurredBackground) => { + const diffBlurredBackground = createElement('div', null, 'twitch-notes-blurred-background'); + const diffContainer = createElement('div', 'Select which note to keep for ' + user + '
You can modify notes to merge them and keep updated one

', 'twitch-notes-center-floating-container'); + + const inputContainer = createElement('div', null, null, { + display: 'flex', + flexDirection: 'row', + flexWrap: 'no-wrap', + width: '100%', + }); + + const valueStyle = { + minWidth: '320px', + padding: '6px', + border: '1px solid #FFFFFF19' + }; + const valueAttr = {contentEditable: 'true'}; + + const localValueContainer = createElement('div'); + const pLocal = createElement('p', 'Locally saved note'); + localValueContainer.appendChild(pLocal); + const localValue = createElement('div', Notes.getNote(user), null, valueStyle, valueAttr, 'local-value-container'); + const localValueSave = createElement('button', 'Save this', 'twitch-notes-settings-button'); + localValueSave.addEventListener('click', () => { + const val = document.getElementById('local-value-container').innerHTML; + Notes.inputData.notes = Notes.inputData.notes.map(n => n.user === user ? { + user: n.user, + note: val, + resolved: true + } : n); + diffBlurredBackground.remove(); + resultsContainer.remove(); + Notes.importNotesResult(container, blurredBackground); + }); + localValueContainer.appendChild(localValue); + localValueContainer.innerHTML += '
'; + localValueContainer.appendChild(localValueSave); + + const importedValueContainer = createElement('div'); + const iLocal = createElement('p', 'Imported note'); + importedValueContainer.appendChild(iLocal); + const importedValue = createElement('div', Notes.inputData.notes.filter(n => n.user === user)[0].note || '', null, valueStyle, valueAttr, 'import-value-container'); + const importedValueSave = createElement('button', 'Save this', 'twitch-notes-settings-button'); + importedValueSave.addEventListener('click', () => { + const val = document.getElementById('import-value-container').innerHTML; + Notes.inputData.notes = Notes.inputData.notes.map(n => n.user === user ? { + user: n.user, + note: val, + resolved: true + } : n); + diffBlurredBackground.remove(); + resultsContainer.remove(); + Notes.importNotesResult(container, blurredBackground); + }); + + importedValueContainer.appendChild(importedValue); + importedValueContainer.innerHTML += '
'; + importedValueContainer.appendChild(importedValueSave); + + + inputContainer.appendChild(localValueContainer); + inputContainer.appendChild(importedValueContainer); + + diffContainer.appendChild(inputContainer); + diffBlurredBackground.appendChild(diffContainer); + document.body.appendChild(diffBlurredBackground); + }, + importNotesResult: (container, blurredBackground) => { + + const willBeAdded = []; + let willBeOverwritten = []; + const noChanges = []; + + for (let user of Notes.inputData.users) { + if (Notes.getNote(user)) { + if (Notes.inputData.notes.find(note => note.user === user).resolved || Notes.getNote(user) !== Notes.inputData.notes.find(note => note.user === user).note) { + willBeOverwritten.push(user); + } else { + noChanges.push(user); + } + } else { + willBeAdded.push(user); + } + } + + const resultsContainer = createElement('div', null); + + if (willBeOverwritten.length) { + const overwrittenContainer = createElement('div', 'Note conflicts found for:
', null, { + marginTop: '1rem', + }); + for (let item of willBeOverwritten) { + const row = createElement('div', item + ' ', null, { + color: Notes.inputData.notes.find(note => note.user === item).resolved ? 'green' : 'red', + }); + const resolve = createElement('a', Notes.inputData.notes.find(note => note.user === item).resolved ? '[update]' : '[resolve]', null, { + cursor: 'pointer', + }); + resolve.addEventListener('click', () => { + Notes.importNotesConflictResolve(item, resultsContainer, container, blurredBackground); + }) + row.appendChild(resolve); + overwrittenContainer.appendChild(row); + } + resultsContainer.appendChild(overwrittenContainer); + } + + if (willBeAdded.length) { + const addedContainer = createElement('div', 'Note will be added for:
' + willBeAdded.join('
'), null, { + marginTop: '1rem', + color: 'white' + }) + resultsContainer.appendChild(addedContainer); + } + + if (noChanges.length) { + const noChangesContainer = createElement('div', 'No changes for:
' + noChanges.join('
'), null, { + marginTop: '1rem', + color: 'gray' + }) + resultsContainer.appendChild(noChangesContainer); + } + + const spacer = createElement('div', null, null, {height: '24px'}); + resultsContainer.appendChild(spacer); + + /* + TODO: make popup to allow checking differences between existing notes and ones that would override them + TODO: allow to edit notes and select which one to keep after import, if any content was modified after opening comparison window show that record was merged as a status + TODO: show visually that records have some data that will be merged or overwritten entirely + */ + + willBeOverwritten = willBeOverwritten.filter(x => !Notes.inputData.notes.find(n => n.user === x).resolved); + + const saveButton = createElement('button', 'Complete import', 'twitch-notes-settings-button', + willBeOverwritten.length > 0 ? {background: 'gray'} : null, + willBeOverwritten.length > 0 ? {disabled: 'true'} : null) + + resultsContainer.appendChild(saveButton) + + if (willBeOverwritten.length > 0) { + const note = createElement('div', 'Import cannot be completed while there are unresolved conflicts', null, { + color: 'gray', + }); + resultsContainer.appendChild(note); + } else { + saveButton.addEventListener('click', () => { + for (let note of Notes.inputData.notes) { + Notes.saveNote(note.user, note.note); + } + blurredBackground.remove(); + Notes.inputData = {}; + }); + } + + container.appendChild(resultsContainer); + }, + importNotes: () => { + const blurredBackground = createElement('div', null, 'twitch-notes-blurred-background'); + const container = createElement('div', 'WARNING! This action might override existing data!

', 'twitch-notes-center-floating-container'); + const inputBlock = createElement('div', 'Select exported twitch notes file

'); + const input = createElement('input', null, 'twitch-notes-file-input', null, { + type: 'file', + accept: '.json' + }); + const settingsCloseButton = createElement('button', xButton, 'twitch-notes-settings-close-button', { + position: 'absolute', + top: '1rem', + right: '1rem', + }); + inputBlock.appendChild(input); + settingsCloseButton.addEventListener('click', () => { + blurredBackground.remove(); + }); + input.addEventListener('change', () => { + let file = input.files[0]; + if (!file) { + return; + } + let reader = new FileReader(); + reader.readAsText(file, "UTF-8"); + reader.onload = function (evt) { + Notes.inputData = JSON.parse(evt.target.result.toString()); + if (Notes.inputData) { + inputBlock.style.display = 'none'; + Notes.importNotesResult(container, blurredBackground); + } + } + reader.onerror = function () { + console.error("error reading file"); + } + }); + + container.appendChild(settingsCloseButton); + container.appendChild(inputBlock); + blurredBackground.appendChild(container); + document.body.appendChild(blurredBackground); + }, + clearAllData: () => { + console.log('TODO: Implement Notes Data Clearing'); + }, + openAllNotes: () => { + console.log('TODO: Implement Open All Notes functionality'); } } @@ -47,7 +271,7 @@ } } - function createElement(tag, body, classes, styles, attributes) { + function createElement(tag, body, classes, styles, attributes, id) { const element = document.createElement(tag); if (body) { @@ -80,6 +304,8 @@ } } + element.setAttribute('id', id ? id : 'element-' + Math.floor((Math.random() * 10000000))) + return element; } @@ -125,7 +351,7 @@ isMouseDown = true; }); - const closeButton = createElement('span', "X", 'twitch-note-close-button') + const closeButton = createElement('span', xButton, 'twitch-note-close-button') closeButton.addEventListener("click", function close() { removeContainer(username); }); @@ -173,7 +399,7 @@ }); const img = createElement('img', null, null, { - height: '18px', + height: '18px', paddingRight: '4px' }, { src: "https://cdn.rdarius.lt/icons/32-id-card.png" @@ -194,14 +420,95 @@ } } + function createChatSettingsLine(text) { + const element = createElement('div', null, 'twitch-notes-settings-option-line'); + const button = createElement('button', null, 'twitch-notes-settings-option-line-button'); + const buttonContainer = createElement('div', null, 'twitch-notes-settings-option-line-button-container'); + const buttonContainerContent = createElement('div', text, 'twitch-notes-settings-option-line-button-container-content'); + buttonContainer.appendChild(buttonContainerContent); + button.appendChild(buttonContainer); + element.appendChild(button); + + return element; + } + + function createChatSettingsSeparator() { + return createElement('div', null, 'twitch-note-settings-separator'); + } + function toggleSettings() { + if (!settingsWindow) { + const settingsContainer = createElement('div', null, 'twitch-notes-settings-container'); + const settingsBalloon = createElement('div', null, 'twitch-notes-settings-balloon'); + const settingsPopover = createElement('div', null, 'twitch-notes-settings-popover'); + + // startOf: settings header + const settingsHeader = createElement('div', null, 'twitch-notes-settings-header'); + const settingsHeaderLeftElement = createElement('div', null, 'twitch-notes-settings-header-left-element') + settingsHeader.appendChild(settingsHeaderLeftElement); + const settingsHeaderCenterElement = createElement('div', null, 'twitch-notes-settings-header-center-element') + settingsHeader.appendChild(settingsHeaderCenterElement); + const settingsHeaderCenterElementContent = createElement('p', 'Twitch Notes Settings', 'twitch-notes-settings-header-center-element-content') + settingsHeaderCenterElement.appendChild(settingsHeaderCenterElementContent); + const settingsHeaderRightElement = createElement('div', null, 'twitch-notes-settings-header-right-element') + settingsHeader.appendChild(settingsHeaderRightElement); + const settingsCloseButton = createElement('button', xButton, 'twitch-notes-settings-close-button'); + settingsHeaderRightElement.appendChild(settingsCloseButton); + settingsPopover.appendChild(settingsHeader); + // endOf: settings header + + settingsCloseButton.addEventListener('click', toggleSettings); + + + // startOf: scrollable area + const settingsScrollableArea = createElement('div', null, 'twitch-notes-settings-scrollable-area'); + const settingsContent = createElement('div', null, 'twitch-notes-settings-content'); + settingsScrollableArea.appendChild(settingsContent); + + const exportNotes = createChatSettingsLine('Export Notes'); + settingsContent.appendChild(exportNotes); + const importNotes = createChatSettingsLine('Import Notes'); + settingsContent.appendChild(importNotes); + const clearData = createChatSettingsLine('Clear Data'); + settingsContent.appendChild(clearData); + settingsContent.appendChild(createChatSettingsSeparator()); + const openAllNotes = createChatSettingsLine('View All Notes'); + settingsContent.appendChild(openAllNotes); + + exportNotes.addEventListener('click', Notes.exportNotes); + importNotes.addEventListener('click', Notes.importNotes); + clearData.addEventListener('click', Notes.clearAllData); + openAllNotes.addEventListener('click', Notes.openAllNotes); + + + settingsPopover.appendChild(settingsScrollableArea); + // endOf: scrollable area + + + settingsBalloon.appendChild(settingsPopover); + settingsContainer.appendChild(settingsBalloon); + settingsWindow = settingsContainer; + document.body.appendChild(settingsWindow); + settingsWindowOpen = true; + return; + } + + if (settingsWindowOpen) { + settingsWindow.style.display = 'none'; + settingsWindowOpen = false; + } else { + settingsWindow.style.display = 'block'; + settingsWindowOpen = true; + } console.log('toggle settings'); } + const xButton = ``; let openContainers = {}; let isMouseDown = false; let activeContainer = null; - // let settingsWindowOpen = false; + let settingsWindowOpen = false; + let settingsWindow = null; let LS_UserList = "twitch-note-all-users-list"; let LS_Prefix = "twitch-note-"; diff --git a/Twitch Notes/twitchvars.css b/Twitch Notes/twitchvars.css new file mode 100644 index 0000000..4ae3559 --- /dev/null +++ b/Twitch Notes/twitchvars.css @@ -0,0 +1,818 @@ +:root { + --border-width-default: 1px; + --border-width-input: 2px; + --border-width-input-overlay-unfocused: 1px; + --border-width-marked: 3px; + --border-width-spinner: 2px; + --border-width-tag: 2px; + --border-radius-none: 0; + --border-radius-small: 0.2rem; + --border-radius-medium: 0.4rem; + --border-radius-large: 0.6rem; + --border-radius-extra-large: 1rem; + --border-radius-extra-extra-large: 1.6rem; + --border-radius-rounded: 9000px; + --break-xs: 480px; + --break-sm: 768px; + --break-md: 1024px; + --break-lg: 1200px; + --break-xl: 1440px; + --break-xxl: 1600px; + --color-brand-muted-ice: #d6e4ff; + --color-brand-muted-cupcake: #ffa3ee; + --color-brand-muted-mint: #5cffbe; + --color-brand-muted-sky: #7aa7ff; + --color-brand-muted-blush: #ffcdcc; + --color-brand-muted-canary: #ebeb00; + --color-brand-muted-smoke: #d3d3d9; + --color-brand-muted-lavender: #d1b3ff; + --color-brand-muted-mustard: #ffd37a; + --color-brand-muted-emerald: #00f593; + --color-brand-muted-coral: #ff8280; + --color-brand-muted-ocean: #1345aa; + --color-brand-accent-grape: #5c16c5; + --color-brand-accent-dragonfruit: #ff38db; + --color-brand-accent-carrot: #e69900; + --color-brand-accent-sun: #ebeb00; + --color-brand-accent-lime: #00f593; + --color-brand-accent-turquoise: #00f0f0; + --color-brand-accent-eggplant: #451093; + --color-brand-accent-wine: #ae1392; + --color-brand-accent-slime: #00f593; + --color-brand-accent-seafoam: #5cffbe; + --color-brand-accent-cherry: #eb0400; + --color-brand-accent-marine: #1f69ff; + --color-brand-accent-seaweed: #00a3a3; + --color-brand-accent-pebble: #848494; + --color-brand-accent-moon: #efeff1; + --color-brand-accent-fiji: #5cffbe; + --color-brand-accent-blueberry: #1f69ff; + --color-brand-accent-arctic: #00f0f0; + --color-brand-accent-highlighter: #f5f500; + --color-brand-accent-flamingo: #ff38db; + --color-brand-accent-ruby: #eb0400; + --color-brand-accent-punch: #ffcdcc; + --color-brand-accent-creamsicle: #ffd37a; + --color-white: #fff; + --color-black: #000; + --color-red: #e91916; + --color-red-darker: #bb1411; + --color-orange: #ffd37a; + --color-yellow: #ffd37a; + --color-green: #00f593; + --color-green-darker: #00ad96; + --color-blue: #1f69ff; + --color-prime-blue: #0e9bd8; + --color-magenta: #c53dff; + --color-error: #eb0400; + --color-warn: #ffd37a; + --color-success: #00f593; + --color-info: #1f69ff; + --color-accent: #9147ff; + --color-twitch-purple: #9147ff; + --color-twitch-purple-1: #040109; + --color-twitch-purple-2: #0d031c; + --color-twitch-purple-3: #15052e; + --color-twitch-purple-4: #24094e; + --color-twitch-purple-5: #330c6e; + --color-twitch-purple-6: #451093; + --color-twitch-purple-7: #5c16c5; + --color-twitch-purple-8: #772ce8; + --color-twitch-purple-9: #9147ff; + --color-twitch-purple-10: #a970ff; + --color-twitch-purple-11: #bf94ff; + --color-twitch-purple-12: #d1b3ff; + --color-twitch-purple-13: #e3d1ff; + --color-twitch-purple-14: #ede0ff; + --color-twitch-purple-15: #f3ebff; + --color-hinted-grey-1: #0e0e10; + --color-hinted-grey-2: #18181b; + --color-hinted-grey-3: #1f1f23; + --color-hinted-grey-4: #26262c; + --color-hinted-grey-5: #323239; + --color-hinted-grey-6: #3b3b44; + --color-hinted-grey-7: #53535f; + --color-hinted-grey-8: #848494; + --color-hinted-grey-9: #adadb8; + --color-hinted-grey-10: #c8c8d0; + --color-hinted-grey-11: #d3d3d9; + --color-hinted-grey-12: #dedee3; + --color-hinted-grey-13: #e6e6ea; + --color-hinted-grey-14: #efeff1; + --color-hinted-grey-15: #f7f7f8; + --color-transparent: transparent; + --color-opac-b-1: rgba(0,0,0,.05); + --color-opac-b-2: rgba(0,0,0,.1); + --color-opac-b-3: rgba(0,0,0,.15); + --color-opac-b-4: rgba(0,0,0,.2); + --color-opac-b-5: rgba(0,0,0,.25); + --color-opac-b-6: rgba(0,0,0,.3); + --color-opac-b-7: rgba(0,0,0,.4); + --color-opac-b-8: rgba(0,0,0,.5); + --color-opac-b-9: rgba(0,0,0,.6); + --color-opac-b-10: rgba(0,0,0,.7); + --color-opac-b-11: rgba(0,0,0,.75); + --color-opac-b-12: rgba(0,0,0,.8); + --color-opac-b-13: rgba(0,0,0,.85); + --color-opac-b-14: rgba(0,0,0,.9); + --color-opac-b-15: rgba(0,0,0,.95); + --color-opac-w-1: hsla(0,0%,100%,.05); + --color-opac-w-2: hsla(0,0%,100%,.1); + --color-opac-w-3: hsla(0,0%,100%,.15); + --color-opac-w-4: hsla(0,0%,100%,.2); + --color-opac-w-5: hsla(0,0%,100%,.25); + --color-opac-w-6: hsla(0,0%,100%,.3); + --color-opac-w-7: hsla(0,0%,100%,.4); + --color-opac-w-8: hsla(0,0%,100%,.5); + --color-opac-w-9: hsla(0,0%,100%,.6); + --color-opac-w-10: hsla(0,0%,100%,.7); + --color-opac-w-11: hsla(0,0%,100%,.75); + --color-opac-w-12: hsla(0,0%,100%,.8); + --color-opac-w-13: hsla(0,0%,100%,.85); + --color-opac-w-14: hsla(0,0%,100%,.9); + --color-opac-w-15: hsla(0,0%,100%,.95); + --color-opac-p-1: rgba(92,22,197,.05); + --color-opac-p-2: rgba(92,22,197,.1); + --color-opac-p-3: rgba(92,22,197,.15); + --color-opac-p-4: rgba(92,22,197,.2); + --color-opac-p-5: rgba(92,22,197,.25); + --color-opac-p-6: rgba(92,22,197,.3); + --color-opac-p-7: rgba(92,22,197,.4); + --color-opac-p-8: rgba(92,22,197,.5); + --color-opac-p-9: rgba(92,22,197,.6); + --color-opac-p-10: rgba(92,22,197,.7); + --color-opac-p-11: rgba(92,22,197,.75); + --color-opac-p-12: rgba(92,22,197,.8); + --color-opac-p-13: rgba(92,22,197,.85); + --color-opac-p-14: rgba(92,22,197,.9); + --color-opac-p-15: rgba(92,22,197,.95); + --color-orange-1: #050301; + --color-orange-2: #090601; + --color-orange-3: #120d02; + --color-orange-4: #251a04; + --color-orange-5: #372706; + --color-orange-6: #453008; + --color-orange-7: #65470b; + --color-orange-8: #7c570e; + --color-orange-9: #9e6900; + --color-orange-10: #c28100; + --color-orange-11: #e69900; + --color-orange-12: #ffb31a; + --color-orange-13: #ffd37a; + --color-orange-14: #ffdf9e; + --color-orange-15: #ffebc2; + --color-yellow-1: #050501; + --color-yellow-2: #090901; + --color-yellow-3: #0e0e02; + --color-yellow-4: #1c1c03; + --color-yellow-5: #292905; + --color-yellow-6: #373706; + --color-yellow-7: #4e4e09; + --color-yellow-8: #60600b; + --color-yellow-9: #7a7a00; + --color-yellow-10: #949400; + --color-yellow-11: #adad00; + --color-yellow-12: #c7c700; + --color-yellow-13: #e0e000; + --color-yellow-14: #ebeb00; + --color-yellow-15: #f5f500; + --color-green-1: #010503; + --color-green-2: #010906; + --color-green-3: #02120c; + --color-green-4: #042015; + --color-green-5: #063221; + --color-green-6: #074029; + --color-green-7: #0a5738; + --color-green-8: #016b40; + --color-green-9: #018852; + --color-green-10: #00a865; + --color-green-11: #00c274; + --color-green-12: #00db84; + --color-green-13: #00f593; + --color-green-14: #5cffbe; + --color-green-15: #a8ffdc; + --color-cyan-1: #010505; + --color-cyan-2: #010909; + --color-cyan-3: #021212; + --color-cyan-4: #042020; + --color-cyan-5: #052e2e; + --color-cyan-6: #073c3c; + --color-cyan-7: #095353; + --color-cyan-8: #0c6a6a; + --color-cyan-9: #018383; + --color-cyan-10: #00a3a3; + --color-cyan-11: #00b8b8; + --color-cyan-12: #00d6d6; + --color-cyan-13: #00f0f0; + --color-cyan-14: #2effff; + --color-cyan-15: #94ffff; + --color-blue-1: #010205; + --color-blue-2: #020712; + --color-blue-3: #040d20; + --color-blue-4: #071a40; + --color-blue-5: #0a255c; + --color-blue-6: #0d3177; + --color-blue-7: #1345aa; + --color-blue-8: #1756d3; + --color-blue-9: #1f69ff; + --color-blue-10: #528bff; + --color-blue-11: #7aa7ff; + --color-blue-12: #a3c2ff; + --color-blue-13: #c7daff; + --color-blue-14: #d6e4ff; + --color-blue-15: #e5eeff; + --color-magenta-1: #050104; + --color-magenta-2: #12020f; + --color-magenta-3: #20041b; + --color-magenta-4: #37062e; + --color-magenta-5: #4e0941; + --color-magenta-6: #650b55; + --color-magenta-7: #8a0f73; + --color-magenta-8: #ae1392; + --color-magenta-9: #c516a5; + --color-magenta-10: #ff38db; + --color-magenta-11: #ff75e6; + --color-magenta-12: #ffa3ee; + --color-magenta-13: #ffc7f5; + --color-magenta-14: #ffd6f8; + --color-magenta-15: #ffe5fa; + --color-red-1: #050101; + --color-red-2: #120202; + --color-red-3: #200404; + --color-red-4: #3c0807; + --color-red-5: #530a09; + --color-red-6: #6e0e0c; + --color-red-7: #971311; + --color-red-8: #bb1411; + --color-red-9: #eb0400; + --color-red-10: #ff4f4d; + --color-red-11: #ff8280; + --color-red-12: #ffaaa8; + --color-red-13: #ffcdcc; + --color-red-14: #ffdcdb; + --color-red-15: #ffe6e5; + --color-twitter: #1da1f2; + --color-facebook: #3b5998; + --color-reddit: #ff4500; + --color-snapchat: #fffc00; + --color-instagram: #405de6; + --color-youtube: #cd201f; + --color-paypal: #009cde; + --color-paypal-blue: #009cde; + --color-paypal-yellow: #fcc439; + --color-vk: #45668e; + --color-amazon: #fad677; + --button-size-small: 2.4rem; + --button-size-default: 3rem; + --button-size-large: 3.6rem; + --button-text-small: 1.2rem; + --button-text-default: 1.3rem; + --button-text-large: 1.4rem; + --button-padding-x: 1rem; + --button-padding-y: 0.5rem; + --input-text-small: 1.2rem; + --input-text-default: 1.3rem; + --input-text-large: 1.4rem; + --input-size-small: 2.4rem; + --input-size-default: 3rem; + --input-size-large: 3.6rem; + --font-base: "Inter","Roobert","Helvetica Neue",Helvetica,Arial,sans-serif; + --font-display: "Roobert","Inter","Helvetica Neue",Helvetica,Arial,sans-serif; + --font-mono: monospace; + --font-size-1: 5.4rem; + --font-size-2: 3.6rem; + --font-size-3: 2.4rem; + --font-size-4: 1.8rem; + --font-size-5: 1.4rem; + --font-size-6: 1.3rem; + --font-size-7: 1.2rem; + --font-size-8: 1.2rem; + --font-size-base: 1.3rem; + --font-weight-normal: 400; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --font-weight-hdr: 400; + --line-height-body: 1.5; + --line-height-heading: 1.2; + --base-rem-unit: 10; + --grid-columns: 12; + --grid-gutter-width: 1.5rem; + --grid-gutter-width-lg: 2rem; + --grid-gutter-width-sm: 1rem; + --grid-gutter-width-xs: 0.5rem; + --opac-1: 0.05; + --opac-2: 0.1; + --opac-3: 0.15; + --opac-4: 0.2; + --opac-5: 0.25; + --opac-6: 0.3; + --opac-7: 0.4; + --opac-8: 0.5; + --opac-9: 0.6; + --opac-10: 0.7; + --opac-11: 0.75; + --opac-12: 0.8; + --opac-13: 0.85; + --opac-14: 0.9; + --opac-15: 0.95; + --space-0: 0; + --space-1: 1rem; + --space-2: 2rem; + --space-3: 3rem; + --space-4: 4rem; + --space-5: 5rem; + --space-6: 6rem; + --space-7: 7rem; + --space-8: 8rem; + --space-9: 9rem; + --space-10: 10rem; + --space-auto: auto; + --space-05: 0.5rem; + --timing-short: 100ms; + --timing-medium: 150ms; + --timing-long: 200ms; + --z-index-modal: 5000; + --z-index-notification: 4000; + --z-index-overlay: 3000; + --z-index-balloon: 2000; + --z-index-sticky: 1000; + --z-index-above: 10; + --z-index-default: 1; + --z-index-below: -1; + --color-background-button: var(--color-twitch-purple-7); + --color-background-button-hover: var(--color-twitch-purple-8); + --color-background-button-focus: var(--color-twitch-purple-8); + --color-background-button-active: var(--color-twitch-purple-7); + --color-background-button-purchase: var(--color-opac-b-5); + --color-background-button-status: var(--color-background-button-success); + --color-background-button-status-hover: var(--color-background-button-error-hover); + --color-background-button-status-focus: var(--color-background-button-error-hover); + --color-background-button-status-active: var(--color-background-button-error-active); + --color-background-button-success-focus: var(--color-green-darker); + --color-background-button-alert: var(--color-red); + --color-background-button-alert-hover: var(--color-red-darker); + --color-background-button-alert-focus: var(--color-red-darker); + --color-background-button-alert-active: var(--color-red); + --color-background-button-overlay: var(--color-transparent); + --color-background-button-overlay-hover: var(--color-opac-w-1); + --color-background-button-overlay-focus: var(--color-opac-w-1); + --color-background-button-overlay-active: transparent; + --color-background-interactable-alpha-hover: var(--color-opac-w-4); + --color-background-interactable-alpha-active: var(--color-opac-w-5); + --color-background-interactable-alpha-selected: var(--color-opac-w-3); + --color-text-button: var(--color-white); + --color-text-button-hover: var(--color-white); + --color-text-button-focus: var(--color-white); + --color-text-button-active: var(--color-white); + --color-text-button-secondary-hover: var(--color-hinted-grey-6); + --color-text-button-secondary-focus: var(--color-hinted-grey-6); + --color-text-button-secondary-active: var(--color-hinted-grey-6); + --color-text-button-text-focus: var(--color-opac-w-1); + --color-text-button-text-active: var(--color-opac-p-2); + --color-text-button-status: var(--color-white); + --color-text-button-status-hover: var(--color-white); + --color-text-button-status-focus: var(--color-white); + --color-text-button-status-active: var(--color-white); + --color-text-button-success-hover: var(--color-black); + --color-text-button-success-focus: var(--color-black); + --color-text-button-success-active: var(--color-black); + --color-text-button-alert: var(--color-black); + --color-text-button-alert-hover: var(--color-black); + --color-text-button-alert-focus: var(--color-black); + --color-text-button-alert-active: var(--color-black); + --color-text-button-overlay: var(--color-white); + --color-text-button-overlay-hover: var(--color-white); + --color-text-button-overlay-focus: var(--color-white); + --color-text-button-overlay-active: var(--color-white); + --color-text-interactable: currentColor; + --color-text-interactable-hover: var(--color-white); + --color-text-interactable-active: var(--color-white); + --color-text-interactable-inverted: var(--color-white); + --color-text-input-focus: transparent; + --color-border-button: var(--color-twitch-purple-7); + --color-border-button-hover: var(--color-twitch-purple-8); + --color-border-button-focus: var(--color-twitch-purple-9); + --color-border-button-active: var(--color-twitch-purple-8); + --color-border-button-disabled: var(--color-opac-w-1); + --color-border-button-status: var(--color-green); + --color-border-button-status-hover: var(--color-red-darker); + --color-border-button-status-focus: var(--color-red-darker); + --color-border-button-status-active: var(--color-red); + --color-border-button-success: var(--color-green); + --color-border-button-success-hover: var(--color-green); + --color-border-button-success-focus: var(--color-green); + --color-border-button-success-active: var(--color-green); + --color-border-button-alert: var(--color-red); + --color-border-button-alert-hover: var(--color-red-darker); + --color-border-button-alert-focus: var(--color-red-darker); + --color-border-button-alert-active: var(--color-red); + --color-border-button-overlay: var(--color-transparent); + --color-border-button-overlay-hover: var(--color-transparent); + --color-border-button-overlay-focus: var(--color-opac-w-6); + --color-border-button-overlay-active: var(--color-opac-w-9); + --color-border-button-overlay-bordered: var(--color-white); + --color-border-interactable-selected: var(--color-twitch-purple-10); + --shadow-input: inset 0 0 0 1px var(--color-twitch-purple-5); + --shadow-input-error: 0 0 0 1px var(--color-border-error); + --shadow-input-focus: 0 0 10px -2px var(--color-border-brand); + --shadow-input-error-focus: 0 0 6px -2px var(--color-border-error); + --shadow-interactable-focus: 0 0 6px 0 var(--color-twitch-purple-8); + --color-background-subscriber-stream-tag-default: var(--color-twitch-purple-4); + --color-background-subscriber-stream-tag-hover: var(--color-twitch-purple-3); + --color-background-subscriber-stream-tag-active: var(--color-twitch-purple-4); + --color-border-subscriber-stream-tag: var(--color-twitch-purple-5); + --color-background-body: var(--color-hinted-grey-1); + --color-background-base: var(--color-hinted-grey-2); + --color-background-alt: var(--color-hinted-grey-3); + --color-background-alt-2: var(--color-hinted-grey-4); + --color-background-float: var(--color-hinted-grey-3); + --color-background-accent: var(--color-twitch-purple-8); + --color-background-accent-alt: var(--color-twitch-purple-7); + --color-background-accent-alt-2: var(--color-twitch-purple-6); + --color-background-placeholder: var(--color-opac-w-1); + --color-background-overlay-placeholder: var(--color-opac-w-3); + --color-background-live: var(--color-red); + --color-background-prime: var(--color-prime-blue); + --color-background-error: var(--color-red-11); + --color-background-warn: var(--color-orange-13); + --color-background-success: var(--color-green-13); + --color-background-info: var(--color-blue-12); + --color-background-brand: var(--color-twitch-purple-11); + --color-background-overlay-error: var(--color-red-11); + --color-background-overlay-warn: var(--color-orange-13); + --color-background-overlay-success: var(--color-green-13); + --color-background-overlay-info: var(--color-blue-12); + --color-background-overlay-brand: var(--color-twitch-purple-11); + --color-background-interactable-hover: var(--color-opac-w-4); + --color-background-interactable-active: var(--color-opac-w-5); + --color-background-interactable-selected: var(--color-background-button-brand); + --color-background-interactable-overlay-hover: var(--color-opac-w-4); + --color-background-interactable-overlay-active: var(--color-opac-w-5); + --color-background-interactable-overlay-selected: var(--color-white); + --color-background-interactable-destructive-hover: var(--color-red-darker); + --color-background-interactable-destructive-active: var(--color-red); + --color-background-button-primary-default: var(--color-background-button-brand); + --color-background-button-primary-hover: var(--color-background-button-brand-hover); + --color-background-button-primary-active: var(--color-background-button-brand-active); + --color-background-button-secondary-default: var(--color-opac-w-3); + --color-background-button-secondary-hover: var(--color-background-interactable-hover); + --color-background-button-secondary-active: var(--color-background-interactable-active); + --color-background-button-text-default: var(--color-transparent); + --color-background-button-text-hover: var(--color-background-interactable-hover); + --color-background-button-text-active: var(--color-background-interactable-active); + --color-background-button-destructive-default: var(--color-background-button-error); + --color-background-button-destructive-hover: var(--color-background-button-error-hover); + --color-background-button-destructive-active: var(--color-background-button-error-active); + --color-background-button-error: var(--color-red-10); + --color-background-button-error-hover: var(--color-red-12); + --color-background-button-error-active: var(--color-red-14); + --color-background-button-warn: var(--color-orange-12); + --color-background-button-warn-hover: var(--color-orange-14); + --color-background-button-warn-active: var(--color-orange-15); + --color-background-button-success: var(--color-green-12); + --color-background-button-success-hover: var(--color-green-14); + --color-background-button-success-active: var(--color-green-15); + --color-background-button-info: var(--color-blue-11); + --color-background-button-info-hover: var(--color-blue-13); + --color-background-button-info-active: var(--color-blue-15); + --color-background-button-brand: var(--color-twitch-purple-9); + --color-background-button-brand-hover: var(--color-twitch-purple-8); + --color-background-button-brand-active: var(--color-twitch-purple-7); + --color-background-button-overlay-primary-default: var(--color-white); + --color-background-button-overlay-primary-hover: var(--color-opac-w-14); + --color-background-button-overlay-primary-active: var(--color-opac-w-13); + --color-background-button-overlay-secondary-default: var(--color-opac-w-3); + --color-background-button-overlay-secondary-hover: var(--color-background-interactable-overlay-hover); + --color-background-button-overlay-secondary-active: var(--color-background-interactable-overlay-active); + --color-background-button-overlay-text-default: var(--color-transparent); + --color-background-button-overlay-text-hover: var(--color-background-interactable-overlay-hover); + --color-background-button-overlay-text-active: var(--color-background-interactable-overlay-active); + --color-background-button-overlay-error: var(--color-background-button-error); + --color-background-button-overlay-error-hover: var(--color-background-button-error-hover); + --color-background-button-overlay-error-active: var(--color-background-button-error-active); + --color-background-button-overlay-warn: var(--color-background-button-warn); + --color-background-button-overlay-warn-hover: var(--color-background-button-warn-hover); + --color-background-button-overlay-warn-active: var(--color-background-button-warn-active); + --color-background-button-overlay-success: var(--color-background-button-success); + --color-background-button-overlay-success-hover: var(--color-background-button-success-hover); + --color-background-button-overlay-success-active: var(--color-background-button-success-active); + --color-background-button-overlay-info: var(--color-background-button-info); + --color-background-button-overlay-info-hover: var(--color-background-button-info-hover); + --color-background-button-overlay-info-active: var(--color-background-button-info-active); + --color-background-button-overlay-brand: var(--color-white); + --color-background-button-overlay-brand-hover: var(--color-opac-w-14); + --color-background-button-overlay-brand-active: var(--color-opac-w-13); + --color-background-button-icon-overlay-default: var(--color-transparent); + --color-background-button-icon-overlay-hover: var(--color-background-interactable-overlay-hover); + --color-background-button-icon-overlay-active: var(--color-background-interactable-overlay-active); + --color-background-button-disabled: var(--color-opac-w-3); + --color-background-button-overlay-disabled: var(--color-opac-w-2); + --color-background-image-selector-overlay: var(--color-transparent); + --color-background-input: var(--color-opac-w-4); + --color-background-input-focus: var(--color-black); + --color-background-input-checked: var(--color-twitch-purple-8); + --color-background-input-overlay: var(--color-opac-b-4); + --color-background-input-overlay-focus: var(--color-black); + --color-background-input-checkbox-checked: var(--color-border-brand); + --color-background-input-checkbox-checked-background: var(--color-black); + --color-background-input-checkbox-checked-background-overlay: var(--color-black); + --color-background-input-checkbox-checked-overlay: var(--color-white); + --color-background-selectable: var(--color-opac-w-3); + --color-background-selectable-hover: var(--color-opac-w-4); + --color-background-selectable-overlay: var(--color-opac-w-3); + --color-background-selectable-overlay-hover: var(--color-opac-w-4); + --color-background-tag-default: var(--color-opac-w-3); + --color-background-tag-hover: var(--color-background-interactable-hover); + --color-background-tag-active: var(--color-background-interactable-active); + --color-background-toggle: var(--color-transparent); + --color-background-toggle-handle: var(--color-white); + --color-background-toggle-handle-checked: var(--color-twitch-purple-10); + --color-background-toggle-handle-overlay: var(--color-white); + --color-background-toggle-hover: var(--color-opac-w-5); + --color-background-toggle-focus: var(--color-opac-w-5); + --color-background-toggle-checked: var(--color-black); + --color-background-toggle-overlay: var(--color-opac-b-4); + --color-background-toggle-overlay-checked: var(--color-black); + --color-background-tooltip: var(--color-white); + --color-background-overlay: var(--color-opac-b-9); + --color-background-progress: var(--color-opac-w-4); + --color-background-progress-status: var(--color-border-brand); + --color-background-progress-status-error: var(--color-border-error); + --color-background-progress-status-caution: var(--color-border-warn); + --color-background-progress-status-success: var(--color-border-success); + --color-background-progress-overlay-status: var(--color-opac-w-12); + --color-background-progress-overlay-mask: var(--color-opac-b-7); + --color-background-progress-countdown: none; + --color-background-progress-countdown-status: var(--color-twitch-purple-9); + --color-background-pill: var(--color-hinted-grey-7); + --color-background-pill-new: var(--color-magenta-11); + --color-background-pill-subtle: var(--color-hinted-grey-10); + --color-background-pill-notification: var(--color-red); + --color-background-range: var(--color-opac-w-4); + --color-background-range-fill: var(--color-border-brand); + --color-background-range-overlay: var(--color-opac-w-6); + --color-background-range-overlay-fill: var(--color-white); + --color-background-social-column: var(--color-hinted-grey-2); + --color-background-top-nav: var(--color-twitch-purple-6); + --color-background-chat: var(--color-twitch-purple-1); + --color-background-chat-alt: var(--color-twitch-purple-3); + --color-background-chat-header: var(--color-twitch-purple-2); + --color-background-chat-line-mentioning: var(--color-hinted-grey-5); + --color-background-chat-line-mentioned: var(--color-hinted-grey-15); + --color-background-modal-overlay: var(--color-opac-b-13); + --color-background-modal: var(--color-twitch-purple-3); + --color-background-graph: var(--color-twitch-purple-2); + --color-background-graph-fill: var(--color-twitch-purple-8); + --color-background-scrollbar: var(--color-opac-w-8); + --color-background-hover: var(--color-opac-w-3); + --color-text-base: var(--color-hinted-grey-14); + --color-text-alt: var(--color-hinted-grey-12); + --color-text-alt-2: var(--color-hinted-grey-9); + --color-text-link: var(--color-twitch-purple-11); + --color-text-link-hover: var(--color-twitch-purple-10); + --color-text-link-active: var(--color-twitch-purple-11); + --color-text-link-focus: var(--color-twitch-purple-10); + --color-text-link-visited: var(--color-twitch-purple-11); + --color-text-live: var(--color-text-accessible-red); + --color-text-alert: var(--color-text-accessible-red); + --color-text-prime: var(--color-prime-blue); + --color-text-error: var(--color-red-11); + --color-text-warn: var(--color-orange-11); + --color-text-success: var(--color-green-11); + --color-text-info: var(--color-blue-11); + --color-text-brand: var(--color-twitch-purple-11); + --color-text-overlay-error: var(--color-red-11); + --color-text-overlay-warn: var(--color-orange-11); + --color-text-overlay-success: var(--color-green-11); + --color-text-overlay-info: var(--color-blue-11); + --color-text-overlay-brand: var(--color-white); + --color-text-accessible-red: var(--color-red-11); + --color-text-accessible-green: var(--color-green-11); + --color-text-accessible-blue: var(--color-blue-11); + --color-text-tab: var(--color-text-base); + --color-text-tab-active: var(--color-twitch-purple-11); + --color-text-badge-alt: var(--color-black); + --color-text-badge-alt-2: var(--color-black); + --color-text-button-primary: var(--color-white); + --color-text-button-secondary: var(--color-text-base); + --color-text-button-text: var(--color-text-brand); + --color-text-button-text-hover: var(--color-text-base); + --color-text-button-destructive: var(--color-text-button-error); + --color-text-button-error: var(--color-black); + --color-text-button-warn: var(--color-black); + --color-text-button-success: var(--color-black); + --color-text-button-info: var(--color-black); + --color-text-button-brand: var(--color-white); + --color-text-button-overlay-primary: var(--color-black); + --color-text-button-overlay-secondary: var(--color-white); + --color-text-button-overlay-text: var(--color-white); + --color-text-button-overlay-error: var(--color-black); + --color-text-button-overlay-warn: var(--color-black); + --color-text-button-overlay-success: var(--color-black); + --color-text-button-overlay-info: var(--color-black); + --color-text-button-overlay-brand: var(--color-black); + --color-text-button-disabled: var(--color-opac-w-8); + --color-text-interactable-selected: var(--color-text-overlay); + --color-text-interactable-overlay-selected: var(--color-black); + --color-text-input: var(--color-text-base); + --color-text-input-placeholder: var(--color-opac-w-10); + --color-text-input-placeholder-overlay: var(--color-opac-w-10); + --color-text-input-checked-icon: var(--color-white); + --color-text-label: var(--color-hinted-grey-15); + --color-text-label-optional: var(--color-hinted-grey-8); + --color-text-hint: var(--color-hinted-grey-8); + --color-text-tag: var(--color-opac-w-10); + --color-text-toggle-checked-icon: var(--color-border-brand); + --color-text-toggle-checked-icon-overlay: var(--color-white); + --color-text-tooltip: var(--color-twitch-purple-1); + --color-text-overlay: var(--color-white); + --color-text-overlay-alt: var(--color-opac-w-13); + --color-text-overlay-link: var(--color-white); + --color-text-overlay-link-hover: var(--color-opac-w-12); + --color-text-overlay-link-active: var(--color-white); + --color-text-overlay-link-focus: var(--color-opac-w-12); + --color-text-overlay-link-visited: var(--color-white); + --color-text-pill: var(--color-black); + --color-text-chat-line-mentioning: var(--color-white); + --color-text-chat-line-mentioned: var(--color-hinted-grey-2); + --color-text-channel-status-text-indicator-hosting: var(--color-black); + --color-text-channel-status-text-indicator-rerun: var(--color-black); + --color-text-channel-status-text-indicator-offline: var(--color-black); + --color-text-channel-status-text-indicator-hosting-overlay: var(--color-black); + --color-text-channel-status-text-indicator-rerun-overlay: var(--color-black); + --color-text-channel-status-text-indicator-offline-overlay: var(--color-black); + --color-text-ribbon: var(--color-white); + --color-border-base: var(--color-opac-w-2); + --color-border-region: var(--color-black); + --color-border-overlay: var(--color-opac-w-5); + --color-border-alert: var(--color-red); + --color-border-error: var(--color-red-10); + --color-border-warn: var(--color-orange-12); + --color-border-success: var(--color-green-12); + --color-border-info: var(--color-blue-10); + --color-border-brand: var(--color-twitch-purple-10); + --color-border-error-decorative: var(--color-red-10); + --color-border-warn-decorative: var(--color-orange-12); + --color-border-success-decorative: var(--color-green-12); + --color-border-info-decorative: var(--color-blue-10); + --color-border-brand-decorative: var(--color-twitch-purple-10); + --color-border-overlay-error: var(--color-red-10); + --color-border-overlay-warn: var(--color-orange-12); + --color-border-overlay-success: var(--color-green-12); + --color-border-overlay-info: var(--color-blue-10); + --color-border-overlay-brand: var(--color-white); + --color-border-overlay-error-decorative: var(--color-red-10); + --color-border-overlay-warn-decorative: var(--color-orange-12); + --color-border-overlay-success-decorative: var(--color-green-12); + --color-border-overlay-info-decorative: var(--color-blue-10); + --color-border-overlay-brand-decorative: var(--color-twitch-purple-10); + --color-border-balloon-overlay: var(--color-opac-w-4); + --color-border-tab: var(--color-border-base); + --color-border-tab-hover: var(--color-twitch-purple-11); + --color-border-tab-focus: var(--color-twitch-purple-11); + --color-border-tab-active: var(--color-border-brand); + --color-border-image-selector: var(--color-opac-b-6); + --color-border-image-selector-overlay: var(--color-opac-w-6); + --color-border-image-selector-overlay-selected: var(--color-white); + --color-border-input: var(--color-opac-w-4); + --color-border-input-hover: var(--color-opac-w-6); + --color-border-input-focus: var(--color-border-brand); + --color-border-input-error: var(--color-border-error); + --color-border-input-overlay: var(--color-opac-w-6); + --color-border-input-overlay-hover: var(--color-opac-w-8); + --color-border-input-overlay-focus: var(--color-white); + --color-border-input-checkbox: var(--color-opac-w-10); + --color-border-input-checkbox-hover: var(--color-white); + --color-border-input-checkbox-focus: var(--color-border-brand); + --color-border-input-checkbox-checked: var(--color-border-brand); + --color-border-input-checkbox-error: var(--color-border-error); + --color-border-input-checkbox-overlay: var(--color-opac-w-10); + --color-border-input-checkbox-hover-overlay: var(--color-white); + --color-border-input-checkbox-checked-overlay: var(--color-white); + --color-border-input-checkbox-overlay-focus: var(--color-white); + --color-border-range-handle: var(--color-border-brand); + --color-border-range-handle-focus: var(--color-white); + --color-border-tag: var(--color-opac-w-3); + --color-border-toggle: var(--color-opac-w-10); + --color-border-toggle-hover: var(--color-white); + --color-border-toggle-focus: var(--color-border-brand); + --color-border-toggle-checked: var(--color-border-brand); + --color-border-toggle-overlay: var(--color-opac-w-10); + --color-border-toggle-overlay-hover: var(--color-white); + --color-border-toggle-overlay-focus: var(--color-white); + --color-border-toggle-overlay-checked: var(--color-white); + --color-border-whisper-incoming: var(--color-twitch-purple-10); + --color-border-whisper-outgoing: var(--color-hinted-grey-9); + --color-border-selectable: var(--color-opac-w-3); + --color-border-selectable-hover: var(--color-opac-w-4); + --color-border-selectable-hover-selected: var(--color-white); + --color-border-selectable-selected-outer: var(--color-white); + --color-border-selectable-selected-inner: var(--color-black); + --color-border-selectable-overlay: var(--color-opac-w-3); + --color-border-selectable-overlay-hover: var(--color-opac-w-4); + --color-border-selectable-overlay-selected: var(--color-white); + --color-border-selectable-overlay-selected-inner: var(--color-black); + --color-border-spinner: var(--color-opac-w-3); + --color-border-spinner-fill: var(--color-hinted-grey-12); + --color-border-quote: var(--color-hinted-grey-9); + --color-data-series-a-base: var(--color-twitch-purple-12); + --color-data-series-a-alt: var(--color-twitch-purple-11); + --color-data-series-a-alt-2: var(--color-twitch-purple-10); + --color-data-series-a-alt-3: var(--color-twitch-purple-9); + --color-data-series-a-alt-4: var(--color-twitch-purple-8); + --color-data-series-b-base: var(--color-magenta-12); + --color-data-series-b-alt: var(--color-magenta-11); + --color-data-series-b-alt-2: var(--color-magenta-10); + --color-data-series-b-alt-3: var(--color-magenta-9); + --color-data-series-b-alt-4: var(--color-magenta-8); + --color-data-series-c-base: var(--color-blue-12); + --color-data-series-c-alt: var(--color-blue-11); + --color-data-series-c-alt-2: var(--color-blue-10); + --color-data-series-c-alt-3: var(--color-blue-9); + --color-data-series-c-alt-4: var(--color-blue-8); + --color-data-series-d-base: var(--color-cyan-12); + --color-data-series-d-alt: var(--color-cyan-11); + --color-data-series-d-alt-2: var(--color-cyan-10); + --color-data-series-d-alt-3: var(--color-cyan-9); + --color-data-series-d-alt-4: var(--color-cyan-8); + --color-data-series-e-base: var(--color-orange-12); + --color-data-series-e-alt: var(--color-orange-11); + --color-data-series-e-alt-2: var(--color-orange-10); + --color-data-series-e-alt-3: var(--color-orange-9); + --color-data-series-e-alt-4: var(--color-orange-8); + --color-data-text-title: var(--color-text-base); + --color-data-text-subtitle: var(--color-text-alt-2); + --color-data-background-chart: var(--color-background-base); + --color-data-axis: var(--color-text-alt-2); + --color-data-grid: var(--color-border-base); + --color-data-background-gauge: var(--color-background-alt); + --color-data-indicator-positive: var(--color-cyan-11); + --color-data-indicator-negative: var(--color-red-11); + --color-icon-input-checked: var(--color-white); + --color-icon-input-radio-checked: var(--color-white); + --color-fill-base: var(--color-text-base); + --color-fill-current: currentColor; + --color-fill-alt: var(--color-text-alt); + --color-fill-alt-2: var(--color-text-alt-2); + --color-fill-offline: var(--color-hinted-grey-9); + --color-fill-hosting: var(--color-orange-13); + --color-fill-live: var(--color-red-9); + --color-fill-recording: var(--color-red-9); + --color-fill-alert: var(--color-error); + --color-fill-error: var(--color-red-10); + --color-fill-warn: var(--color-orange-12); + --color-fill-success: var(--color-green-13); + --color-fill-info: var(--color-blue-10); + --color-fill-brand: var(--color-twitch-purple-10); + --color-fill-error-overlay: var(--color-red-10); + --color-fill-warn-overlay: var(--color-orange-12); + --color-fill-success-overlay: var(--color-green-13); + --color-fill-info-overlay: var(--color-blue-10); + --color-fill-brand-overlay: var(--color-twitch-purple-10); + --color-fill-prime: var(--color-prime-blue); + --color-fill-drops: var(--color-green); + --color-fill-crate: var(--color-green); + --color-fill-range-notch: var(--color-hinted-grey-7); + --color-fill-button-icon: var(--color-text-base); + --color-fill-button-icon-hover: var(--color-text-base); + --color-fill-button-icon-focus: var(--color-text-base); + --color-fill-button-icon-active: var(--color-text-base); + --color-fill-channel-status-text-indicator-hosting: var(--color-opac-w-10); + --color-fill-channel-status-text-indicator-rerun: var(--color-opac-w-10); + --color-fill-channel-status-text-indicator-offline: var(--color-white); + --color-fill-channel-status-text-indicator-hosting-overlay: var(--color-opac-w-10); + --color-fill-channel-status-text-indicator-rerun-overlay: var(--color-opac-w-10); + --color-fill-channel-status-text-indicator-offline-overlay: var(--color-white); + --color-fill-new-item-indicator: var(--color-magenta-11); + --color-fill-presence-offline: var(--color-hinted-grey-9); + --color-fill-presence-invisible: var(--color-hinted-grey-9); + --color-fill-presence-online: var(--color-green-13); + --color-fill-presence-away: var(--color-orange-12); + --color-fill-presence-busy: var(--color-red-10); + --color-fill-presence-idle: var(--color-orange-12); + --color-fill-ribbon: var(--color-red-9); + --color-social-twitter: var(--color-twitter); + --color-social-facebook: var(--color-facebook); + --color-social-reddit: var(--color-reddit); + --color-social-snapchat: var(--color-snapchat); + --color-social-instagram: var(--color-instagram); + --color-social-youtube: var(--color-youtube); + --color-social-paypal: var(--color-paypal); + --color-social-vk: var(--color-vk); + --shadow-elevation-umbra: 0.34; + --shadow-elevation-penumbra: 0.26; + --shadow-elevation-ambient: 0.28; + --shadow-elevation-1: 0 1px 2px var(--color-opac-b-14),0 0px 2px var(--color-opac-b-14); + --shadow-elevation-2: 0 4px 8px var(--color-opac-b-7),0 0px 4px var(--color-opac-b-7); + --shadow-elevation-3: 0 6px 16px var(--color-opac-b-8),0 0px 4px var(--color-opac-b-7); + --shadow-elevation-4: 0 12px 32px var(--color-opac-b-8),0 0px 8px var(--color-opac-b-7); + --shadow-elevation-5: 0 32px 64px var(--color-opac-b-9),0 0px 16px var(--color-opac-b-7); + --shadow-button-focus: 0 0 6px 0 var(--color-twitch-purple-8); + --shadow-button-active: 0 0 6px 0 var(--color-twitch-purple-8); + --shadow-button-disabled: none; + --shadow-button-overlay-focus: 0 0 6px 0 var(--color-opac-w-6); + --shadow-button-overlay-active: 0 0 6px 0 var(--color-opac-w-6); + --shadow-tab-focus: 0 4px 6px -4px var(--color-twitch-purple-11); + --shadow-balloon: 0 1px 1px var(--color-opac-b-5); + --shadow-scrollbar: 0 0 1px 1px var(--color-opac-w-5); +}