@cesdk/cesdk-js 1.6.3 → 1.7.0-alpha.2

package/assets/i18n/de.json

@@ -297,8 +297,9 @@
   "common.role.creator": "Creator",
   "common.role.presenter": "Presenter",
   "common.role.viewer": "Viewer",
-  "common.rotation": "Rotation",
-  "common.rotation.inUnit": "Rotation in Grad",
+  "common.rotateAndFlip": "$t(common.rotation) & $t(property.flip)",
+  "common.rotation": "Drehen",
+  "common.rotation.inUnit": "$t(common.rotation) in Grad",
   "common.save": "Speichern",
   "common.select": "Auswählen",
   "common.size": "Größe",
@@ -310,6 +311,16 @@
   "common.unlock": "Entsperren",
   "common.width": "Breite",
   "common.width.inUnit": "Breite in {{unit}}",
+  "component.assetPanelAutoCloseSettings": "Nach dem Hinzufügen",
+  "component.assetPanelAutoCloseSettings.false": "Offen lassen",
+  "component.assetPanelAutoCloseSettings.false.description": "Die Bibliothek offen lassen nachdem ein Asset eingefügt wurde",
+  "component.assetPanelAutoCloseSettings.true": "Schließen",
+  "component.assetPanelAutoCloseSettings.true.description": "Die Bibliothek schließen nachdem ein Asset eingefügt wurde",
+  "component.assetPanelFloatingSettings": "Bibliothek (einfügen)",
+  "component.assetPanelFloatingSettings.fixed": "Fixiert",
+  "component.assetPanelFloatingSettings.fixed.description": "Die Bibliothek beim Einfügen ist nebem der Arbeitsfläche fixiert.",
+  "component.assetPanelFloatingSettings.floating": "Schwebend",
+  "component.assetPanelFloatingSettings.floating.description": "Die Bibliothek beim Einfügen schwebt über der Arbeitsfläche",
   "component.assetSettings": "Assets",
   "component.assetSettings.image.adjustments": "Bildkorrekturen",
   "component.assetSettings.image.blur": "Bildunschärfe",
@@ -327,8 +338,8 @@
   "component.canvas.state.loading": "Editor wird geladen",
   "component.canvas.state.loading.description": "Nur ein paar Sekunden...",
   "component.canvas.state.unsupported": "Ihr Browser wird nicht unterstützt",
-  "component.colorPicker.colorItem.description": "Diese Farbe verwenden",
   "component.colorPicker.colorItem": "Farbelement {{index}}",
+  "component.colorPicker.colorItem.description": "Klicken um diese Farbe zu verwenden ({{color}})",
   "component.colorPicker.colorItem.hexInput": "Hex",
   "component.colorPicker.colorItem.transparent": "Farbelement {{index}}, Farbname: Transparent",
   "component.colorPicker.description": "Farbe ändern",
@@ -342,12 +353,12 @@
   "component.colorSchemeSelect.background.description": "Hintergrundfarbe ändern",
   "component.dnd.description": "Die hochgeladenen Dateien werden in der Bibliothek gespeichert",
   "component.dnd.prompt": "Dateien hier hinziehen",
-  "component.dockIconSizeSelect": "Dock Icon Skalierung",
+  "component.dockIconSizeSelect": "Icon Skalierung",
   "component.dockIconSizeSelect.large": "Groß",
   "component.dockIconSizeSelect.large.description": "Große Dock Icon Skalierung auswählen",
   "component.dockIconSizeSelect.normal": "Normal",
   "component.dockIconSizeSelect.normal.description": "Normale Dock Icon Skalierung auswählen",
-  "component.dockLabelVisibilityToggle": "Dock Label",
+  "component.dockLabelVisibilityToggle": "Labels",
   "component.dockLabelVisibilityToggle.hide": "Ausblenden",
   "component.dockLabelVisibilityToggle.hide.description": "Beschriftungen der Dock Buttons ausblenden",
   "component.dockLabelVisibilityToggle.show": "Anzeigen",
@@ -393,6 +404,7 @@
   "component.librarySettings.imageLibrary": "Bilder-Bibliothek",
   "component.librarySettings.templateLibrary": "$t(component.templateLibrary)",
   "component.librarySettings.textLibrary": "Text-Bibliothek",
+  "component.librarySettings.uploadLibrary": "Upload-Bibliothek",
   "component.pageTitleVisibilityToggle": "Seiten Titel",
   "component.pageTitleVisibilityToggle.hide": "Ausblenden",
   "component.pageTitleVisibilityToggle.hide.description": "Titel einer Seite ausblenden",
@@ -401,6 +413,16 @@
   "component.placeholder.create": "$t(common.placeholder)",
   "component.placeholder.settings": "Platzhaltereinstellungen ändern",
   "component.placeholder.settingsMenu": "Platzhaltereinstellungsmenü",
+  "component.replacePanelAutoCloseSettings": "Nach dem Ersetzen",
+  "component.replacePanelAutoCloseSettings.false": "Offen lassen",
+  "component.replacePanelAutoCloseSettings.false.description": "Die Bibliothek offen lassen nachdem ein Asset ersetzt wurde",
+  "component.replacePanelAutoCloseSettings.true": "Schließen",
+  "component.replacePanelAutoCloseSettings.true.description": "Die Bibliothek schließen nachdem ein Asset ersetzt wurde",
+  "component.replacePanelFloatingSettings": "Bibliothek (ersetzen)",
+  "component.replacePanelFloatingSettings.fixed": "Fixiert",
+  "component.replacePanelFloatingSettings.fixed.description": "Die Bibliothek beim Ersetzen ist nebem der Arbeitsfläche fixiert.",
+  "component.replacePanelFloatingSettings.floating": "Schwebend",
+  "component.replacePanelFloatingSettings.floating.description": "Die Bibliothek beim Ersetzen schwebt über der Arbeitsfläche",
   "component.roleSelect": "$t(common.role)",
   "component.roleSelect.description": "$t(common.role) auswählen",
   "component.scalingSelect": "UI Skalierung",
@@ -411,7 +433,12 @@
   "component.settings.toggle": "Editor anpassen",
   "component.settings.toggle.description": "Einstellungen öffnen um den Editor anzupassen",
   "component.settingsPanel.appearance": "Aussehen",
+  "component.settingsPanel.assetPanel": "Asset-Leiste",
+  "component.settingsPanel.dock": "Dock",
+  "component.settingsPanel.general": "Generell",
   "component.settingsPanel.header": "Editor anpassen",
+  "component.settingsPanel.inspectorPanel": "Inspector Leiste",
+  "component.settingsPanel.replacePanel": "Ersetzungsleiste",
   "component.templateLibrary": "Vorlagen-Bibliothek",
   "component.templateLibrary.abort": "$t(common.cancel)",
   "component.templateLibrary.confirm": "Ja, Änderungen verwerfen",
@@ -490,6 +517,7 @@
   "input.multiSelection.notice": "Mehrere Elemente können nicht\ngleichzeitig bearbeitet werden.",
   "input.multiSelection.title": "Mehrere Elemente ({{count}})",
   "input.options": "Optionen",
+  "input.options.description": "Mehr Optionen",
   "input.page.titleTemplate": "$t(common.page) {{number}}",
   "input.pages": "Seiten",
   "input.preset": "Vorlage",
@@ -512,7 +540,7 @@
   "input.transform.description": "$t(common.position) und $t(common.size) ändern",
   "input.typefaceSelect.description": "Ausgewählte Schriftfamilie: {{fontFamily}}",
   "input.typefaceSelect.tooltip": "Schriftfamilie ändern",
-  "input.unit.tooltip": "$(common.unit) auswählen",
+  "input.unit.tooltip": "$t(common.unit) auswählen",
   "input.uploadImage": "Bild wird hochgeladen...",
   "libraries.local.label": "Uploads",
   "libraries.ly.img.image.label": "Bilder",
@@ -588,7 +616,6 @@
   "property.blendMode.ColorDodge": "Farbig abwedeln",
   "property.blendMode.Darken": "Verdunkeln",
   "property.blendMode.description": "Ausgewählter Überblendmodi: {{mode}}",
-  "property.blendMode.tooltip": "Überblendmodi ändern",
   "property.blendMode.Difference": "Differenz",
   "property.blendMode.Exclusion": "Ausschluss",
   "property.blendMode.HardLight": "Hartes Licht",
@@ -602,6 +629,7 @@
   "property.blendMode.Saturation": "Sätigung",
   "property.blendMode.Screen": "Negativ multiplizieren",
   "property.blendMode.SoftLight": "Weiches Licht",
+  "property.blendMode.tooltip": "Überblendmodi ändern",
   "property.blur.extrudeBlur": "Zoom Unschärfe",
   "property.blur.extrudeBlur.amount": "Intensität",
   "property.blur.linearBlur": "Lineare Unschärfe",
@@ -726,6 +754,7 @@
   "property.letterSpacing": "Laufweite",
   "property.lineHeight": "Zeilenhöhe",
   "property.lineWidth": "Linienbreite",
+  "property.lineWidth.description": "Linienbreite ändern",
   "property.lutFilterIntensity": "Intensität",
   "property.opacity": "Transparenz",
   "property.orientation": "Ausrichtung",
@@ -764,6 +793,7 @@
   "property.strokeWidth.description": "Strichbreite ändern",
   "property.textAlignment.horizontal": "Horizontale Ausrichtung",
   "property.textAlignment.horizontal.center": "Text mittig ausrichten",
+  "property.textAlignment.horizontal.description": "Horizontale Ausrichtung ändern",
   "property.textAlignment.horizontal.left": "Text links ausrichten",
   "property.textAlignment.horizontal.right": "Text rechts ausrichten",
   "property.textAlignment.vertical": "Vertikale Ausrichtung",
@@ -797,4 +827,4 @@
   "variables.first_name.label": "Vorname",
   "variables.last_name.label": "Nachname",
   "warning.invalidType": "Invalider Typ: Dateityp nicht erlaubt"
-}
+}

package/assets/i18n/en.json

@@ -297,8 +297,9 @@
   "common.role.creator": "Creator",
   "common.role.presenter": "Presenter",
   "common.role.viewer": "Viewer",
-  "common.rotation": "Rotation",
-  "common.rotation.inUnit": "Rotation in degrees",
+  "common.rotateAndFlip": "$t(common.rotation) & $t(property.flip)",
+  "common.rotation": "Rotate",
+  "common.rotation.inUnit": "$t(common.rotation) in degrees",
   "common.save": "Save",
   "common.select": "Select",
   "common.size": "Size",
@@ -310,6 +311,16 @@
   "common.unlock": "Unlock",
   "common.width": "Width",
   "common.width.inUnit": "Width in {{unit}}",
+  "component.assetPanelAutoCloseSettings": "After insert",
+  "component.assetPanelAutoCloseSettings.false": "Keep Open",
+  "component.assetPanelAutoCloseSettings.false.description": "Keep the asset library panel open after an asset was inserted",
+  "component.assetPanelAutoCloseSettings.true": "Close",
+  "component.assetPanelAutoCloseSettings.true.description": "Close the asset library panel after an asset was inserted",
+  "component.assetPanelFloatingSettings": "Behavior",
+  "component.assetPanelFloatingSettings.fixed": "Fixed",
+  "component.assetPanelFloatingSettings.fixed.description": "The insert library is fixed side by side with the canvas",
+  "component.assetPanelFloatingSettings.floating": "Floating",
+  "component.assetPanelFloatingSettings.floating.description": "The insert library floats over the canvas",
   "component.assetSettings": "Assets",
   "component.assetSettings.image.adjustments": "Image Adjustments",
   "component.assetSettings.image.blur": "Image Blur",
@@ -327,8 +338,8 @@
   "component.canvas.state.loading": "Loading Editor",
   "component.canvas.state.loading.description": "Just a few seconds...",
   "component.canvas.state.unsupported": "Browser is not supported",
-  "component.colorPicker.colorItem.description": "Use this color",
   "component.colorPicker.colorItem": "Color item {{index}}",
+  "component.colorPicker.colorItem.description": "Click to use this color ({{color}})",
   "component.colorPicker.colorItem.hexInput": "Hex",
   "component.colorPicker.colorItem.transparent": "Color item {{index}}, Color name: transparent",
   "component.colorPicker.description": "Change color",
@@ -342,12 +353,12 @@
   "component.colorSchemeSelect.background.description": "Change background color",
   "component.dnd.description": "The added files are stored in the library",
   "component.dnd.prompt": "Drag file here",
-  "component.dockIconSizeSelect": "Dock Icon Scaling",
+  "component.dockIconSizeSelect": "Icon Scaling",
   "component.dockIconSizeSelect.large": "Large",
   "component.dockIconSizeSelect.large.description": "Select large dock icon scaling",
   "component.dockIconSizeSelect.normal": "Normal",
   "component.dockIconSizeSelect.normal.description": "Select normal dock icon scaling",
-  "component.dockLabelVisibilityToggle": "Dock Label",
+  "component.dockLabelVisibilityToggle": "Labels",
   "component.dockLabelVisibilityToggle.hide": "Hide",
   "component.dockLabelVisibilityToggle.hide.description": "Hide labels for dock buttons",
   "component.dockLabelVisibilityToggle.show": "Show",
@@ -383,7 +394,7 @@
   "component.library.clearSearch": "Clear search",
   "component.library.elements": "Elements",
   "component.library.enterSection": "Enter section",
-  "component.library.error": "Cannot connec to to asset source",
+  "component.library.error": "Cannot connect to to asset source",
   "component.library.loading": "Loading …",
   "component.library.noItems": "No elements",
   "component.library.noMoreItems": "No more elements",
@@ -393,6 +404,7 @@
   "component.librarySettings.imageLibrary": "Image Library",
   "component.librarySettings.templateLibrary": "$t(component.templateLibrary)",
   "component.librarySettings.textLibrary": "Text Library",
+  "component.librarySettings.uploadLibrary": "Upload Library",
   "component.pageTitleVisibilityToggle": "Page Title",
   "component.pageTitleVisibilityToggle.hide": "Hide",
   "component.pageTitleVisibilityToggle.hide.description": "Hide page title",
@@ -401,6 +413,16 @@
   "component.placeholder.create": "$t(common.placeholder)",
   "component.placeholder.settings": "Change $t(common.placeholder) settings",
   "component.placeholder.settingsMenu": "$t(common.placeholder) settings menu",
+  "component.replacePanelAutoCloseSettings": "After replace",
+  "component.replacePanelAutoCloseSettings.false": "Keep Open",
+  "component.replacePanelAutoCloseSettings.false.description": "Keep the asset library panel open after an asset was replaced",
+  "component.replacePanelAutoCloseSettings.true": "Close",
+  "component.replacePanelAutoCloseSettings.true.description": "Close the asset library panel after an asset was replaced",
+  "component.replacePanelFloatingSettings": "Behavior",
+  "component.replacePanelFloatingSettings.fixed": "Fixed",
+  "component.replacePanelFloatingSettings.fixed.description": "The replace library is fixed side by side with the canvas",
+  "component.replacePanelFloatingSettings.floating": "Floating",
+  "component.replacePanelFloatingSettings.floating.description": "The replace library floats over the canvas",
   "component.roleSelect": "$t(common.role)",
   "component.roleSelect.description": "Select $t(common.role)",
   "component.scalingSelect": "UI Scaling",
@@ -411,21 +433,26 @@
   "component.settings.toggle": "Customize Editor",
   "component.settings.toggle.description": "Open settings to customize editor",
   "component.settingsPanel.appearance": "Appearance",
+  "component.settingsPanel.assetPanel": "Asset Panel",
+  "component.settingsPanel.dock": "Dock",
+  "component.settingsPanel.general": "General",
   "component.settingsPanel.header": "Customize Editor",
+  "component.settingsPanel.inspectorPanel": "Inspector Panel",
+  "component.settingsPanel.replacePanel": "Replace Panel",
   "component.templateLibrary": "Template Library",
   "component.templateLibrary.abort": "$t(common.cancel)",
   "component.templateLibrary.confirm": "Yes, discard changes",
-  "component.templateLibrary.dialog.body": "Your content, like images and text, can not be adopted and all content will be discarted.",
+  "component.templateLibrary.dialog.body": "Your content, like images and text, can not be adopted and all content will be discarded.",
   "component.templateLibrary.dialog.headline": "Replace current document?",
   "component.templateLibrary.dialog.invalid": "This preset is not valid and cannot be used.",
   "component.themeSelect": "Theme",
   "component.themeSelect.dark": "Dark",
-  "component.themeSelect.dark.description": "Selet dark theme",
+  "component.themeSelect.dark.description": "Select dark theme",
   "component.themeSelect.dialog": "Generated CSS Custom Properties",
   "component.themeSelect.dialog.description": "$t(component.themeSelect.dialog)",
   "component.themeSelect.generate": "Generate CSS",
   "component.themeSelect.light": "Light",
-  "component.themeSelect.light.description": "Selet light theme",
+  "component.themeSelect.light.description": "Select light theme",
   "component.topbar.back": "$t(common.back)",
   "component.topbar.close": "$t(common.close)",
   "component.undo.redo": "$t(common.redo)",
@@ -451,29 +478,29 @@
   "input.adjustments": "Adjustments",
   "input.adjustments.basic": "Basic",
   "input.adjustments.refinements": "Refinements",
-  "input.adjustments.tooltip": "Change Adjustments",
+  "input.adjustments.tooltip": "Change adjustments",
   "input.alwaysOnTop": "Stay always on top",
   "input.appearance": "Appearance",
   "input.aspectLock": "Lock proportions",
   "input.aspectLock.description": "Toggle proportion lock",
   "input.bleedMargin.select": "Select bleed margins",
   "input.blur": "Blur",
-  "input.blur.tooltip": "Change Blur",
+  "input.blur.tooltip": "Change blur",
   "input.character": "Character",
   "input.clipContent": "Clip content",
   "input.clipContent.off.description": "Turn clip content off",
   "input.clipContent.on.description": "Turn clip content on",
   "input.document": "$t(block.scene)",
   "input.effect": "Effect",
-  "input.effect.tooltip": "Change Effect",
+  "input.effect.tooltip": "Change effect",
   "input.export": "Export",
   "input.filter": "Filter",
-  "input.filter.tooltip": "Change Filter",
+  "input.filter.tooltip": "Change filter",
   "input.fontSelect": "Selected font: {{font}}",
   "input.fontSelect.fallback": "Standard",
   "input.fontSelect.tooltip": "Change font style",
   "input.fontSize.select": "Select font size",
-  "input.fontStyle.toggle": "Toggle {{style}}",
+  "input.fontStyle.toggle": "Toggle {{style}} style",
   "input.gradient.activateColorStop": "Press space to activate.",
   "input.gradient.colorPosition": "Color Position",
   "input.gradient.colorStop": "Color stop",
@@ -489,6 +516,7 @@
   "input.multiSelection.notice": "Editing multiple items at once\nis not supported yet.",
   "input.multiSelection.title": "Multiple Elements ({{count}})",
   "input.options": "Options",
+  "input.options.description": "More options",
   "input.page.titleTemplate": "$t(common.page) {{number}}",
   "input.pages": "Pages",
   "input.preset": "Preset",
@@ -508,10 +536,10 @@
   "input.text.advanced.description": "Line Height, Spacing, Alignment & Sizing",
   "input.text.placeholder": "Write Something",
   "input.transform": "$t(common.position) & $t(common.size)",
-  "input.transform.description": "Adjust $t(common.position) and $t(common.size)",
+  "input.transform.description": "Adjust position and size.",
   "input.typefaceSelect.description": "Selected font typeface: {{fontFamily}}",
-  "input.typefaceSelect.tooltip": "Change font typeface",
-  "input.unit.tooltip": "Select $(common.unit)",
+  "input.typefaceSelect.tooltip": "Change typeface",
+  "input.unit.tooltip": "Select $t(common.unit)",
   "input.uploadImage": "Uploading image...",
   "libraries.local.label": "Uploads",
   "libraries.ly.img.image.label": "Images",
@@ -587,7 +615,6 @@
   "property.blendMode.ColorDodge": "Color Dodge",
   "property.blendMode.Darken": "Darken",
   "property.blendMode.description": "Selected blend mode: {{mode}}",
-  "property.blendMode.tooltip": "Change blend mode",
   "property.blendMode.Difference": "Difference",
   "property.blendMode.Exclusion": "Exclusion",
   "property.blendMode.HardLight": "Hard Light",
@@ -601,6 +628,7 @@
   "property.blendMode.Saturation": "Saturation",
   "property.blendMode.Screen": "Screen",
   "property.blendMode.SoftLight": "Soft Light",
+  "property.blendMode.tooltip": "Change blend mode",
   "property.blur.extrudeBlur": "Extrude Blur",
   "property.blur.extrudeBlur.amount": "Intensity",
   "property.blur.linearBlur": "Linear Blur",
@@ -626,7 +654,7 @@
   "property.blur.uniformBlur": "Gaussian Blur",
   "property.blur.uniformBlur.intensity": "Intensity",
   "property.color": "Color",
-  "property.color.description": "Change Color",
+  "property.color.description": "Change color",
   "property.crop": "Crop",
   "property.crop.offset": "{{axis}} Offset",
   "property.crop.offset.description": "Crop offset on the {{axis}}-axis in {{unit}}",
@@ -634,7 +662,7 @@
   "property.crop.scale.description": "Proportionally scale image dimensions",
   "property.crop.size": "Crop Area",
   "property.crop.size.description": "{{dimension}} of the crop frame in {{unit}}",
-  "property.crop.tooltip": "Change Crop properties",
+  "property.crop.tooltip": "Change crop properties",
   "property.crop.transform": "$t(block.image)",
   "property.duotoneFilter.breezy": "Breezy",
   "property.duotoneFilter.clash": "Clash",
@@ -741,6 +769,7 @@
   "property.letterSpacing": "Letter Spacing",
   "property.lineHeight": "Line Height",
   "property.lineWidth": "Line Width",
+  "property.lineWidth.description": "Change line width",
   "property.lutFilter.ad1920": "1920 A.D.",
   "property.lutFilter.ancient": "Ancient",
   "property.lutFilter.bleached": "Kalmen",
@@ -840,6 +869,7 @@
   "property.strokeWidth.description": "Change stroke width",
   "property.textAlignment.horizontal": "Horizontal Alignment",
   "property.textAlignment.horizontal.center": "Align text to the center",
+  "property.textAlignment.horizontal.description": "Change horizontal alignment",
   "property.textAlignment.horizontal.left": "Align text to the left",
   "property.textAlignment.horizontal.right": "Align text to the right",
   "property.textAlignment.vertical": "Vertical Alignment",
@@ -873,4 +903,4 @@
   "variables.first_name.label": "First name",
   "variables.last_name.label": "Last name",
   "warning.invalidType": "Invalid Type: File type is not allowed"
-}
+}

package/assets/ui/stylesheets/cesdk-themes.css

@@ -1 +1 @@
-.ubq-dark{--ubq-elevation-3: hsl(210, 4%, 25%);--ubq-elevation-2: hsl(210, 7.5%, 20%);--ubq-elevation-1: hsl(210, 15%, 15%);--ubq-canvas: hsl(210, 30%, 10%);--ubq-foreground-default: hsla(210, 0%, 100%, 0.9);--ubq-foreground-light: hsla(210, 0%, 100%, 0.7);--ubq-foreground-info: hsla(210, 0%, 100%, 0.5);--ubq-foreground-active: hsla(210, 30%, 10%, 0.9);--ubq-foreground-accent: hsla(210, 0%, 100%, 1);--ubq-foreground-danger: hsla(210, 0%, 100%, 1);--ubq-interactive-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.1);--ubq-interactive-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.15);--ubq-interactive-pressed: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.02);--ubq-interactive-selected: linear-gradient( 180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100% ), rgba(255, 255, 255, 0.2);--ubq-interactive-active-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.88);--ubq-interactive-active-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0) ), hsla(210, 100%, 95%, 0.98);--ubq-interactive-active-pressed: linear-gradient( to bottom, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.5);--ubq-interactive-accent-default: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 0.8);--ubq-interactive-accent-hover: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 1);--ubq-interactive-accent-pressed: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 0.7);--ubq-interactive-danger-default: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(220, 96, 142, 0.8);--ubq-interactive-danger-hover: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(220, 96, 142, 1);--ubq-interactive-danger-pressed: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(220, 96, 142, 0.7);--ubq-interactive-template-default: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(165, 54, 252, 0.4);--ubq-interactive-template-hover: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(165, 54, 252, 0.6);--ubq-interactive-template-pressed: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(165, 54, 252, 0.3);--ubq-input-default: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.2), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.2);--ubq-input-hover: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.2), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.4);--ubq-interactive-group-default: rgba(255, 255, 255, 0);--ubq-interactive-group-hover: rgba(255, 255, 255, 0.04);--ubq-interactive-group-active-default: rgba(255, 255, 255, 0.08);--ubq-interactive-group-active-hover: rgba(255, 255, 255, 0.12);--ubq-progress: hsla(210, 0%, 100%, 0.7);--ubq-border-outline: hsla(210, 0%, 100%, 0.16);--ubq-border-divider: hsla(210, 0%, 100%, 0.08);--ubq-border-contrast: hsla(210, 0%, 100%, 0.25);--ubq-focus-default: hsl(230, 90%, 80%);--ubq-focus-outline: hsl(210, 30%, 10%);--ubq-overlay: hsla(210, 30%, 10%, 0.8);--ubq-notice-info: hsla(0, 0%, 100%, 1);--ubq-notice-success: hsla(166, 90%, 37%, 1);--ubq-notice-warning: hsla(40, 100%, 60%, 1);--ubq-notice-error: hsla(338, 64%, 62%, 1);--ubq-effect-shadow: 0px 4px 16px -4px rgba(16, 22, 28, 0.14), 0px 1px 20px -4px rgba(16, 22, 28, 0.12), 0px 2px 12px -4px rgba(16, 22, 28, 0.2);--ubq-effect-focus: 0 0 0 calc(var(--ubq-scale-base) / 2 - 0.01px) var(--ubq-focus-outline), 0 0 0 var(--ubq-scale-base) var(--ubq-focus-default);--ubq-static-selection-frame: hsl(230, 100%, 60%);--ubq-static-contrast-white: hsl(210, 0%, 100%);--ubq-static-contrast-black: hsl(210, 0%, 0%);--ubq-static-snapping: hsl(338, 100%, 50%);--ubq-static-bleed: hsl(334, 73%, 43%);--ubq-static-text-variable: hsl(274, 97%, 60%);--ubq-static-card-label-background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 14.46%, rgba(0, 0, 0, 0.6) 100% )}.ubq-light{--ubq-elevation-3: hsl(210, 13%, 90%);--ubq-elevation-2: hsl(210, 13%, 86%);--ubq-elevation-1: hsl(210, 13%, 82%);--ubq-canvas: hsl(210, 13%, 78%);--ubq-foreground-default: hsla(210, 30%, 10%, 0.9);--ubq-foreground-light: hsla(210, 30%, 10%, 0.7);--ubq-foreground-info: hsla(210, 30%, 10%, 0.5);--ubq-foreground-active: hsla(210, 0%, 100%, 0.9);--ubq-foreground-accent: hsla(210, 0%, 100%, 1);--ubq-foreground-danger: hsla(210, 0%, 100%, 1);--ubq-interactive-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0) ), hsla(0, 50%, 100%, 0.6);--ubq-interactive-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 0%, 0.15);--ubq-interactive-pressed: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.02%);--ubq-interactive-selected: linear-gradient( 180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100% ), rgba(255, 255, 255, 0.6);--ubq-interactive-active-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(210, 60%, 5%, 0.85);--ubq-interactive-active-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(210, 60%, 8%, 0.8);--ubq-interactive-active-pressed: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(210, 60%, 5%, 0.95);--ubq-interactive-accent-default: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 0.8);--ubq-interactive-accent-hover: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 1);--ubq-interactive-accent-pressed: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 0.7);--ubq-interactive-danger-default: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(210, 50, 108, 0.8);--ubq-interactive-danger-hover: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(210, 50, 108, 1);--ubq-interactive-danger-pressed: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(210, 50, 108, 0.7);--ubq-interactive-template-default: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(142, 4, 251, 0.4);--ubq-interactive-template-hover: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(142, 4, 251, 0.6);--ubq-interactive-template-pressed: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(142, 4, 251, 0.3);--ubq-input-default: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.04), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.08);--ubq-input-hover: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.04), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.2);--ubq-interactive-group-default: rgba(0, 0, 0, 0);--ubq-interactive-group-hover: rgba(0, 0, 0, 0.04);--ubq-interactive-group-active-default: rgba(0, 0, 0, 0.08);--ubq-interactive-group-active-hover: rgba(0, 0, 0, 0.12);--ubq-progress: hsla(210, 30%, 10%, 0.7);--ubq-border-outline: hsla(210, 0%, 0%, 0.16);--ubq-border-divider: hsla(210, 0%, 0%, 0.08);--ubq-border-contrast: hsla(210, 0%, 0%, 0.25);--ubq-focus-default: hsl(230, 100%, 60%);--ubq-focus-outline: hsl(210, 10%, 85%);--ubq-overlay: hsla(210, 10%, 85%, 0.8);--ubq-notice-info: hsla(208, 29%, 10%, 1);--ubq-notice-success: hsla(166, 90%, 37%, 1);--ubq-notice-warning: hsla(46, 100%, 29%, 1);--ubq-notice-error: hsla(338, 64%, 51%, 1);--ubq-effect-shadow: 0px 4px 16px -4px rgba(16, 22, 28, 0.14), 0px 1px 20px -4px rgba(16, 22, 28, 0.12), 0px 2px 12px -4px rgba(16, 22, 28, 0.2);--ubq-effect-focus: 0 0 0 calc(var(--ubq-scale-base) / 2 - 0.01px) var(--ubq-focus-outline), 0 0 0 var(--ubq-scale-base) var(--ubq-focus-default);--ubq-static-selection-frame: hsl(230, 100%, 60%);--ubq-static-contrast-white: hsl(210, 0%, 100%);--ubq-static-contrast-black: hsl(210, 0%, 0%);--ubq-static-snapping: hsl(338, 100%, 50%);--ubq-static-bleed: hsl(334, 73%, 43%);--ubq-static-text-variable: hsl(274, 97%, 60%);--ubq-static-card-label-background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 14.46%, rgba(0, 0, 0, 0.6) 100% )}.ubq-normal{--ubq-typography-headline-l-size: 16px;--ubq-typography-headline-l-line_height: 20px;--ubq-typography-headline-l-letter_spacing: 0.01em;--ubq-typography-headline-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-l-weight: 600;--ubq-typography-headline-m-size: 12px;--ubq-typography-headline-m-line_height: 16px;--ubq-typography-headline-m-letter_spacing: 0.03em;--ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-m-weight: 600;--ubq-typography-label-m-size: 12px;--ubq-typography-label-m-line_height: 16px;--ubq-typography-label-m-letter_spacing: 0.02em;--ubq-typography-label-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-m-weight: normal;--ubq-typography-label-s-size: 10px;--ubq-typography-label-s-line_height: 14px;--ubq-typography-label-s-letter_spacing: 0.02em;--ubq-typography-label-s-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-s-weight: normal;--ubq-typography-body-m-size: 12px;--ubq-typography-body-m-line_height: 18px;--ubq-typography-body-m-letter_spacing: 0.02em;--ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-m-weight: normal;--ubq-typography-input-m-size: 12px;--ubq-typography-input-m-line_height: 16px;--ubq-typography-input-m-letter_spacing: 0.02em;--ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Overpass Mono", monospace );--ubq-typography-input-m-weight: 500;--ubq-typography-button-m-size: 12px;--ubq-typography-button-m-line_height: 16px;--ubq-typography-button-m-letter_spacing: 0.02em;--ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-button-m-weight: normal;--ubq-scale-base: 4px;--ubq-margin-base: 4px;--ubq-margin-xs: 4px;--ubq-margin-s: 8px;--ubq-margin-m: 12px;--ubq-margin-l: 16px;--ubq-margin-xl: 24px;--ubq-border_radius-base: 3px;--ubq-border_radius-s: 3px;--ubq-border_radius-m: 6px;--ubq-border_radius-l: 12px}.ubq-large{--ubq-typography-headline-l-size: 20px;--ubq-typography-headline-l-line_height: 25px;--ubq-typography-headline-l-letter_spacing: 0.01em;--ubq-typography-headline-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-l-weight: 600;--ubq-typography-headline-m-size: 15px;--ubq-typography-headline-m-line_height: 20px;--ubq-typography-headline-m-letter_spacing: 0.03em;--ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-m-weight: 600;--ubq-typography-label-m-size: 15px;--ubq-typography-label-m-line_height: 20px;--ubq-typography-label-m-letter_spacing: 0.02em;--ubq-typography-label-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-m-weight: normal;--ubq-typography-label-s-size: 12.5px;--ubq-typography-label-s-line_height: 17.5px;--ubq-typography-label-s-letter_spacing: 0.02em;--ubq-typography-label-s-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-s-weight: normal;--ubq-typography-body-m-size: 15px;--ubq-typography-body-m-line_height: 22.5px;--ubq-typography-body-m-letter_spacing: 0.02em;--ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-m-weight: normal;--ubq-typography-input-m-size: 15px;--ubq-typography-input-m-line_height: 20px;--ubq-typography-input-m-letter_spacing: 0.02em;--ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Overpass Mono", monospace );--ubq-typography-input-m-weight: 500;--ubq-typography-button-m-size: 15px;--ubq-typography-button-m-line_height: 20px;--ubq-typography-button-m-letter_spacing: 0.02em;--ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-button-m-weight: normal;--ubq-scale-base: 5px;--ubq-margin-base: 5px;--ubq-margin-xs: 5px;--ubq-margin-s: 10px;--ubq-margin-m: 15px;--ubq-margin-l: 20px;--ubq-margin-xl: 30px;--ubq-border_radius-base: 3.75px;--ubq-border_radius-s: 3.75px;--ubq-border_radius-m: 7.5px;--ubq-border_radius-l: 15px}
+.ubq-dark{--ubq-elevation-3: hsl(210, 4%, 25%);--ubq-elevation-2: hsl(210, 7.5%, 20%);--ubq-elevation-1: hsl(210, 15%, 15%);--ubq-canvas: hsl(210, 30%, 10%);--ubq-foreground-default: hsla(210, 0%, 100%, 0.9);--ubq-foreground-light: hsla(210, 0%, 100%, 0.7);--ubq-foreground-info: hsla(210, 0%, 100%, 0.5);--ubq-foreground-active: hsla(210, 30%, 10%, 0.9);--ubq-foreground-accent: hsla(210, 0%, 100%, 1);--ubq-foreground-danger: hsla(210, 0%, 100%, 1);--ubq-interactive-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.1);--ubq-interactive-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.06);--ubq-interactive-pressed: hsla(0, 0%, 100%, 0.06);--ubq-interactive-selected: linear-gradient( 180deg, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.2);--ubq-interactive-active-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.88);--ubq-interactive-active-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0) ), hsla(210, 100%, 95%, 0.65);--ubq-interactive-active-pressed: hsla(0, 0%, 100%, 0.65);--ubq-interactive-accent-default: linear-gradient( 180deg, hsla(0, 0%, 100%, 0.06), hsla(0, 0%, 100%, 0) ), hsla(230, 90%, 60%, 0.8);--ubq-interactive-accent-hover: linear-gradient( 180deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0) ), hsla(230, 90%, 60%, 0.7);--ubq-interactive-accent-pressed: hsla(230, 90%, 60%, 0.7);--ubq-interactive-danger-default: linear-gradient( 180deg, hsla(0, 0%, 100%, 0.07), hsla(0, 0%, 100%, 0) ), hsla(338, 64%, 62%, 0.85);--ubq-interactive-danger-hover: linear-gradient( 180deg, hsla(0, 0%, 100%, 0.07), hsla(0, 0%, 100%, 0) ), hsla(338, 64%, 62%, 0.65);--ubq-interactive-danger-pressed: hsla(338, 64%, 62%, 0.65);--ubq-interactive-template-default: linear-gradient( 180deg, hsla(0, 0%, 100%, 0.06), hsla(0, 0%, 100%, 0) ), hsla(274, 97%, 60%, 0.6);--ubq-interactive-template-hover: linear-gradient( 180deg, hsla(0, 0%, 100%, 0.06), hsla(0, 0%, 100%, 0) ), hsla(274, 97%, 60%, 0.5);--ubq-interactive-template-pressed: hsla(274, 97%, 60%, 0.5);--ubq-input-default: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.2), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.2);--ubq-input-hover: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.2), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.4);--ubq-interactive-group-default: hsla(0, 0%, 100%, 0);--ubq-interactive-group-hover: hsla(0, 0%, 100%, 0.04);--ubq-interactive-group-active-default: hsla(0, 0%, 100%, 0.08);--ubq-interactive-group-active-hover: hsla(0, 0%, 100%, 0.12);--ubq-progress: hsla(210, 0%, 100%, 0.7);--ubq-border-outline: hsla(0, 0%, 100%, 0.16);--ubq-border-divider: hsla(0, 0%, 100%, 0.08);--ubq-border-contrast: hsla(0, 0%, 100%, 0.25);--ubq-focus-default: hsl(230, 90%, 80%);--ubq-focus-outline: hsl(210, 30%, 10%);--ubq-overlay: hsla(210, 30%, 10%, 0.8);--ubq-notice-info: hsla(0, 0%, 100%, 1);--ubq-notice-success: hsla(166, 90%, 37%, 1);--ubq-notice-warning: hsla(40, 100%, 60%, 1);--ubq-notice-error: hsla(338, 64%, 62%, 1);--ubq-effect-shadow: 0px 4px 16px -4px hsla(210, 27%, 9%, 0.14), 0px 1px 20px -4px hsla(210, 27%, 9%, 0.12), 0px 2px 12px -4px hsla(210, 27%, 9%, 0.2);--ubq-effect-focus: 0 0 0 calc(var(--ubq-scale-base) / 2 - 0.01px) var(--ubq-focus-outline), 0 0 0 var(--ubq-scale-base) var(--ubq-focus-default);--ubq-static-selection-frame: hsl(230, 100%, 60%);--ubq-static-contrast-white: hsl(0, 0%, 100%);--ubq-static-contrast-black: hsl(0, 0%, 0%);--ubq-static-snapping: hsl(338, 100%, 50%);--ubq-static-bleed: hsl(334, 73%, 43%);--ubq-static-text-variable: hsl(274, 97%, 60%);--ubq-static-card-label-background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 14.46%, rgba(0, 0, 0, 0.6) 100% );--ubq-static-card-background: linear-gradient( 180deg, hsla(0, 0%, 100%, 0.08), hsla(0, 0%, 0%, 0.08) ), hsla(0, 0%, 67%, 0.16)}.ubq-light{--ubq-elevation-3: hsl(210, 16%, 96%);--ubq-elevation-2: hsl(210, 16%, 93%);--ubq-elevation-1: hsl(210, 16%, 90%);--ubq-canvas: hsl(210, 16%, 86%);--ubq-foreground-default: hsla(210, 30%, 10%, 0.9);--ubq-foreground-light: hsla(210, 30%, 10%, 0.7);--ubq-foreground-info: hsla(210, 30%, 10%, 0.5);--ubq-foreground-active: hsla(210, 0%, 100%, 0.9);--ubq-foreground-accent: hsla(210, 0%, 100%, 1);--ubq-foreground-danger: hsla(210, 0%, 100%, 1);--ubq-interactive-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.85);--ubq-interactive-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.4);--ubq-interactive-pressed: hsla(0, 0%, 100%, 0.4);--ubq-interactive-selected: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.6);--ubq-interactive-active-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0) ), hsla(210, 60%, 5%, 0.75);--ubq-interactive-active-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0) ), hsla(210, 60%, 5%, 0.65);--ubq-interactive-active-pressed: hsla(210, 60%, 5%, 0.65);--ubq-interactive-accent-default: linear-gradient( 180deg, hsla(0, 0%, 100%, 0.06), hsla(0, 0%, 100%, 0) ), hsla(230, 90%, 60%, 1);--ubq-interactive-accent-hover: linear-gradient( 180deg, hsla(0, 0%, 100%, 0.06), hsla(0, 0%, 100%, 0) ), hsla(230, 90%, 60%, 0.9);--ubq-interactive-accent-pressed: hsla(230, 90%, 60%, 0.9);--ubq-interactive-danger-default: linear-gradient( 180deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0) ), hsla(338, 64%, 51%, 0.8);--ubq-interactive-danger-hover: linear-gradient( 180deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0) ), hsla(338, 64%, 51%, 0.65);--ubq-interactive-danger-pressed: hsla(338, 64%, 51%, 0.65);--ubq-interactive-template-default: linear-gradient( 180deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0) ), hsla(274, 97%, 50%, 0.5);--ubq-interactive-template-hover: linear-gradient( 180deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0) ), hsla(274, 97%, 50%, 0.45);--ubq-interactive-template-pressed: hsla(274, 97%, 50%, 0.45);--ubq-input-default: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.04), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.04);--ubq-input-hover: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.04), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.08);--ubq-interactive-group-default: hsla(208, 29%, 10%, 0);--ubq-interactive-group-hover: hsla(208, 29%, 10%, 0.04);--ubq-interactive-group-active-default: hsla(208, 29%, 10%, 0.08);--ubq-interactive-group-active-hover: hsla(208, 29%, 10%, 0.12);--ubq-progress: hsla(210, 30%, 10%, 0.7);--ubq-border-outline: hsla(210, 0%, 100%, 0.4);--ubq-border-divider: hsla(210, 0%, 0%, 0.08);--ubq-border-contrast: hsla(210, 0%, 0%, 0.25);--ubq-focus-default: hsl(230, 100%, 60%);--ubq-focus-outline: hsl(210, 10%, 85%);--ubq-overlay: hsla(210, 10%, 85%, 0.8);--ubq-notice-info: hsla(210, 30%, 10%, 1);--ubq-notice-success: hsla(166, 90%, 37%, 1);--ubq-notice-warning: hsla(40, 100%, 37%, 1);--ubq-notice-error: hsla(338, 64%, 51%, 1);--ubq-effect-shadow: 0px 4px 16px -4px hsla(210, 27%, 9%, 0.14), 0px 1px 20px -4px hsla(210, 27%, 9%, 0.12), 0px 2px 12px -4px hsla(210, 27%, 9%, 0.2);--ubq-effect-focus: 0 0 0 calc(var(--ubq-scale-base) / 2 - 0.01px) var(--ubq-focus-outline), 0 0 0 var(--ubq-scale-base) var(--ubq-focus-default);--ubq-static-selection-frame: hsl(230, 100%, 60%);--ubq-static-contrast-white: hsl(0, 0%, 100%);--ubq-static-contrast-black: hsl(0, 0%, 0%);--ubq-static-snapping: hsl(338, 100%, 50%);--ubq-static-bleed: hsl(334, 73%, 43%);--ubq-static-text-variable: hsl(274, 97%, 60%);--ubq-static-card-label-background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 14.46%, rgba(0, 0, 0, 0.6) 100% );--ubq-static-card-background: linear-gradient( 180deg, hsla(0, 0%, 100%, 0.08), hsla(0, 0%, 0%, 0.08) ), hsla(0, 0%, 67%, 0.16)}.ubq-normal{--ubq-typography-headline-l-size: 16px;--ubq-typography-headline-l-line_height: 20px;--ubq-typography-headline-l-letter_spacing: 0.01em;--ubq-typography-headline-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-l-weight: 600;--ubq-typography-headline-m-size: 12px;--ubq-typography-headline-m-line_height: 16px;--ubq-typography-headline-m-letter_spacing: 0.03em;--ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-m-weight: 600;--ubq-typography-label-m-size: 12px;--ubq-typography-label-m-line_height: 16px;--ubq-typography-label-m-letter_spacing: 0.02em;--ubq-typography-label-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-m-weight: normal;--ubq-typography-label-s-size: 10px;--ubq-typography-label-s-line_height: 14px;--ubq-typography-label-s-letter_spacing: 0.02em;--ubq-typography-label-s-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-s-weight: normal;--ubq-typography-body-m-size: 12px;--ubq-typography-body-m-line_height: 18px;--ubq-typography-body-m-letter_spacing: 0.02em;--ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-m-weight: normal;--ubq-typography-input-m-size: 12px;--ubq-typography-input-m-line_height: 16px;--ubq-typography-input-m-letter_spacing: 0.02em;--ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Overpass Mono", monospace );--ubq-typography-input-m-weight: 500;--ubq-typography-button-m-size: 12px;--ubq-typography-button-m-line_height: 16px;--ubq-typography-button-m-letter_spacing: 0.02em;--ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-button-m-weight: normal;--ubq-scale-base: 4px;--ubq-margin-base: 4px;--ubq-margin-xs: 4px;--ubq-margin-s: 8px;--ubq-margin-m: 12px;--ubq-margin-l: 16px;--ubq-margin-xl: 24px;--ubq-border_radius-base: 4px;--ubq-border_radius-s: 4px;--ubq-border_radius-m: 8px;--ubq-border_radius-l: 12px}.ubq-large{--ubq-typography-headline-l-size: 20px;--ubq-typography-headline-l-line_height: 25px;--ubq-typography-headline-l-letter_spacing: 0.01em;--ubq-typography-headline-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-l-weight: 600;--ubq-typography-headline-m-size: 15px;--ubq-typography-headline-m-line_height: 20px;--ubq-typography-headline-m-letter_spacing: 0.03em;--ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-m-weight: 600;--ubq-typography-label-m-size: 15px;--ubq-typography-label-m-line_height: 20px;--ubq-typography-label-m-letter_spacing: 0.02em;--ubq-typography-label-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-m-weight: normal;--ubq-typography-label-s-size: 12.5px;--ubq-typography-label-s-line_height: 17.5px;--ubq-typography-label-s-letter_spacing: 0.02em;--ubq-typography-label-s-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-s-weight: normal;--ubq-typography-body-m-size: 15px;--ubq-typography-body-m-line_height: 22.5px;--ubq-typography-body-m-letter_spacing: 0.02em;--ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-m-weight: normal;--ubq-typography-input-m-size: 15px;--ubq-typography-input-m-line_height: 20px;--ubq-typography-input-m-letter_spacing: 0.02em;--ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Overpass Mono", monospace );--ubq-typography-input-m-weight: 500;--ubq-typography-button-m-size: 15px;--ubq-typography-button-m-line_height: 20px;--ubq-typography-button-m-letter_spacing: 0.02em;--ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-button-m-weight: normal;--ubq-scale-base: 5px;--ubq-margin-base: 5px;--ubq-margin-xs: 5px;--ubq-margin-s: 10px;--ubq-margin-m: 15px;--ubq-margin-l: 20px;--ubq-margin-xl: 30px;--ubq-border_radius-base: 5px;--ubq-border_radius-s: 5px;--ubq-border_radius-m: 10px;--ubq-border_radius-l: 15px}