@cesdk/cesdk-js 1.8.0 → 1.9.0-preview.1

package/assets/i18n/de.json

@@ -211,29 +211,36 @@
   "assets.ly.img.cesdk.stickers.hand.luck.tags": "hand",
   "assets.ly.img.cesdk.stickers.hand.vibes.label": "Good vibes only",
   "assets.ly.img.cesdk.stickers.hand.vibes.tags": "hand",
+  "assets.ly.img.cesdk.vectorpaths.abstract.frame.label": "Rahmen",
+  "assets.ly.img.cesdk.vectorpaths.abstract.halfcircle.label": "Halbkreis",
+  "assets.ly.img.cesdk.vectorpaths.abstract.organic1.label": "Organisch 1",
+  "assets.ly.img.cesdk.vectorpaths.abstract.organic2.label": "Organisch 2",
+  "assets.ly.img.cesdk.vectorpaths.abstract.organic3.label": "Organisch 3",
+  "assets.ly.img.cesdk.vectorpaths.abstract.organic4.label": "Organisch 4",
+  "assets.ly.img.cesdk.vectorpaths.abstract.organicdot1.label": "Organischer Punkt 1",
+  "assets.ly.img.cesdk.vectorpaths.abstract.organicdot2.label": "Organischer Punkt 2",
+  "assets.ly.img.cesdk.vectorpaths.abstract.quartercircle-outline.label": "Viertelkreis Kontur",
+  "assets.ly.img.cesdk.vectorpaths.abstract.quartercircle.label": "Viertelkreis",
+  "assets.ly.img.cesdk.vectorpaths.abstract.rectanglemask.label": "Rechteck Maske",
+  "assets.ly.img.cesdk.vectorpaths.abstract.roundmask.label": "Runde Maske",
+  "assets.ly.img.cesdk.vectorpaths.abstract.splash1.label": "Spritzer 1",
+  "assets.ly.img.cesdk.vectorpaths.abstract.splash2.label": "Spritzer 2",
+  "assets.ly.img.cesdk.vectorpaths.abstract.splash3.label": "Spritzer 3",
+  "assets.ly.img.cesdk.vectorpaths.abstract.splash4.label": "Spritzer 4",
+  "assets.ly.img.cesdk.vectorpaths.abstract.wiggle.label": "Wackeln",
+  "assets.ly.img.cesdk.vectorpaths.abstract.ziczac.label": "Zickzack",
   "assets.ly.img.cesdk.vectorpaths.arrow1.label": "Pfeil nach rechts",
   "assets.ly.img.cesdk.vectorpaths.arrow2.label": "Pfeil nach rechts mit einem breiten Ende auf der linken Seite",
   "assets.ly.img.cesdk.vectorpaths.arrow3.label": "Pfeil nach rechts mit abgerundeten Ecken",
   "assets.ly.img.cesdk.vectorpaths.arrow4.label": "Pfeil nach rechts mit Befiederung am linken Ende",
   "assets.ly.img.cesdk.vectorpaths.arrow5.label": "Pfeil nach rechts mit einem breiten Schaft",
   "assets.ly.img.cesdk.vectorpaths.badge.label": "Abzeichen",
+  "assets.ly.img.ubq.shapes.ellipse.label": "Ellipse",
   "assets.ly.img.ubq.shapes.line.label": "Linie",
-  "assets.ly.img.ubq.shapes.oval.label": "Ellipse",
   "assets.ly.img.ubq.shapes.polygon.label": "Mehreck",
   "assets.ly.img.ubq.shapes.rect.label": "Rechteck",
   "assets.ly.img.ubq.shapes.star.label": "Stern",
-  "action.shadow.angle.change": "Schattenwinkel ändern",
-  "action.shadow.angle.rotate": "Schatten um 45 Grad im Uhrzeigersinn drehen",
-  "action.shadow.blur.change": "Schattenunschärfe ändern",
-  "action.shadow.color.change": "Schattenfarbe ändern",
-  "action.shadow.distance.change": "Schattenabstand ändern",
-  "action.strokeJoin.change": "Konturkanten ändern",
-  "action.strokePosition.change": "Konturposition ändern",
-  "action.strokeStyle.change": "$t(property.strokeStyle.description)",
-  "action.text.autoHeight": "Automatische Höhe aktivieren",
-  "action.text.change": "Text ändern",
-  "action.text.fixedFrame": "Feste Größe aktivieren",
-  "action.ungroup": "Gruppierung auflösen",
+  "block.audio": "Audio",
   "block.ellipse": "Ellipse",
   "block.group": "Gruppe",
   "block.image": "Bild",
@@ -293,6 +300,8 @@
   "common.pixel": "Pixel",
   "common.pixelScale": "Pixelskalierung",
   "common.placeholder": "Platzhalter",
+  "common.play": "Abspielen",
+  "common.pause": "Pausieren",
   "common.position": "Position",
   "common.properties": "Eigenschaften",
   "common.property": "Eigenschaft",
@@ -340,6 +349,9 @@
   "component.assetSettings.text.advanced": "Erweiterte Texteinstellung",
   "component.assetSettings.text.color": "Textfarbe",
   "component.assetSettings.transform": "Transformieren",
+  "component.audio.properties": "Audio Eigenschaften",
+  "component.audio.source": "Original",
+  "component.audio.trim": "Audio Schnittlänge festlegen",
   "component.canvas": "Editor Leinwand",
   "component.canvas.openLibrary": "Element hinzufügen",
   "component.canvas.state.error": "Engine des Editors konnte nicht geladen werden",
@@ -467,8 +479,10 @@
   "component.themeSelect.light.description": "Helles Farbschema auswählen",
   "component.topbar.back": "$t(common.back)",
   "component.topbar.close": "$t(common.close)",
-  "component.trimVideo.play": "Abspielen",
-  "component.trimVideo.play.description": "Zu kürzendes Video abspielen",
+  "component.timeline.play.description": "Gesamtes Video $t(common.play)",
+  "component.timeline.pause.description": "Gesamtes Video $t(common.pause)",
+  "component.trimVideo.play": "$t(common.play)",
+  "component.trimVideo.play.description": "Zu kürzendes Video $t(common.play)",
   "component.trimVideo.trimDuration": "Schnittlänge",
   "component.trimVideo.trimDuration.description": "Schnittlänge festlegen",
   "component.undo.redo": "$t(common.redo)",
@@ -500,6 +514,12 @@
   "input.appearance": "Aussehen",
   "input.aspectLock": "Proportionen beibehalten",
   "input.aspectLock.description": "Proportionen beibehalten / frei",
+  "input.audio.duration": "Dauer",
+  "input.audio.duration.description": "Audio-Dauer",
+  "input.audio.duration.reset": "Audio-Dauer zurücksetzen",
+  "input.audio.mute": "Audio stummschalten",
+  "input.audio.time.end": "Zeit Ende",
+  "input.audio.time.start": "Zeit Anfang",
   "input.bleedMargin.select": "Anschnitt auswählen",
   "input.blur": "Weichzeichner",
   "input.blur.tooltip": "Weichzeichner ändern",
@@ -829,8 +849,14 @@
   "property.textAlignment.vertical.bottom": "Text unten ausrichten",
   "property.textAlignment.vertical.center": "Text mittig ausrichten",
   "property.textAlignment.vertical.top": "Text oben ausrichten",
+  "property.trim": "Schneiden",
+  "property.volume": "Lautstärke",
   "scope.content.replace": "Erlaube Austausch vom Inhalt",
   "scope.design.arrange": "Erlaube Adaption der Anordnung",
+  "scope.design.arrange.move": "Erlaube Adaption der Verschiebung",
+  "scope.design.arrange.rotate": "Erlaube Adaption der Drehung",
+  "scope.design.arrange.resize": "Erlaube Adaption der Skalierung",
+  "scope.design.arrange.flip": "Erlaube Adaption der Spiegelung",
   "scope.design.style": "Erlaube Adaption der Gestaltung",
   "scope.editor.select": "Erlaube Selektion",
   "scope.lifecycle.destroy": "Erlaube Löschen",

package/assets/i18n/en.json

@@ -211,14 +211,32 @@
   "assets.ly.img.cesdk.stickers.hand.luck.tags": "hand",
   "assets.ly.img.cesdk.stickers.hand.vibes.label": "Good vibes only",
   "assets.ly.img.cesdk.stickers.hand.vibes.tags": "hand",
+  "assets.ly.img.cesdk.vectorpaths.abstract.frame.label": "Frame",
+  "assets.ly.img.cesdk.vectorpaths.abstract.halfcircle.label": "Half Circle",
+  "assets.ly.img.cesdk.vectorpaths.abstract.organic1.label": "Organic 1",
+  "assets.ly.img.cesdk.vectorpaths.abstract.organic2.label": "Organic 2",
+  "assets.ly.img.cesdk.vectorpaths.abstract.organic3.label": "Organic 3",
+  "assets.ly.img.cesdk.vectorpaths.abstract.organic4.label": "Organic 4",
+  "assets.ly.img.cesdk.vectorpaths.abstract.organicdot1.label": "Organic Dot 1",
+  "assets.ly.img.cesdk.vectorpaths.abstract.organicdot2.label": "Organic Dot 2",
+  "assets.ly.img.cesdk.vectorpaths.abstract.quartercircle-outline.label": "Quarter Circle Outline",
+  "assets.ly.img.cesdk.vectorpaths.abstract.quartercircle.label": "Quarter Circle",
+  "assets.ly.img.cesdk.vectorpaths.abstract.rectanglemask.label": "Rectangle Mask",
+  "assets.ly.img.cesdk.vectorpaths.abstract.roundmask.label": "Round Mask",
+  "assets.ly.img.cesdk.vectorpaths.abstract.splash1.label": "Splash 1",
+  "assets.ly.img.cesdk.vectorpaths.abstract.splash2.label": "Splash 2",
+  "assets.ly.img.cesdk.vectorpaths.abstract.splash3.label": "Splash 3",
+  "assets.ly.img.cesdk.vectorpaths.abstract.splash4.label": "Splash 4",
+  "assets.ly.img.cesdk.vectorpaths.abstract.wiggle.label": "Wiggle",
+  "assets.ly.img.cesdk.vectorpaths.abstract.ziczac.label": "Ziczac",
   "assets.ly.img.cesdk.vectorpaths.arrow1.label": "Arrow to the right",
   "assets.ly.img.cesdk.vectorpaths.arrow2.label": "Arrow to the right with a wide end on the left side",
   "assets.ly.img.cesdk.vectorpaths.arrow3.label": "Arrow to the right with rounded corners",
   "assets.ly.img.cesdk.vectorpaths.arrow4.label": "Arrow to the right with fletching on the left side",
   "assets.ly.img.cesdk.vectorpaths.arrow5.label": "Arrow to the right with a wide shaft",
   "assets.ly.img.cesdk.vectorpaths.badge.label": "Badge",
+  "assets.ly.img.ubq.shapes.ellipse.label": "Ellipse",
   "assets.ly.img.ubq.shapes.line.label": "Line",
-  "assets.ly.img.ubq.shapes.oval.label": "Ellipse",
   "assets.ly.img.ubq.shapes.polygon.label": "Polygon",
   "assets.ly.img.ubq.shapes.rect.label": "Rectangle",
   "assets.ly.img.ubq.shapes.star.label": "Star",
@@ -234,6 +252,7 @@
   "action.text.change": "Change text",
   "action.text.fixedFrame": "Enable fixed frame",
   "action.ungroup": "Ungroup element",
+  "block.audio": "Audio",
   "block.ellipse": "Ellipse",
   "block.group": "Group",
   "block.image": "Image",
@@ -293,6 +312,8 @@
   "common.pixel": "Pixel",
   "common.pixelScale": "Pixel Scale",
   "common.placeholder": "Placeholder",
+  "common.play": "Play",
+  "common.pause": "Pause",
   "common.position": "Position",
   "common.properties": "Properties",
   "common.property": "Property",
@@ -340,6 +361,9 @@
   "component.assetSettings.text.advanced": "Text Advanced",
   "component.assetSettings.text.color": "Text Color",
   "component.assetSettings.transform": "Transform",
+  "component.audio.properties": "Audio Properties",
+  "component.audio.source": "Original",
+  "component.audio.trim": "Adjust Audio Trim",
   "component.canvas": "Editor canvas",
   "component.canvas.openLibrary": "Add Elements",
   "component.canvas.state.error": "Editor engine could not be loaded",
@@ -467,8 +491,10 @@
   "component.themeSelect.light.description": "Select light theme",
   "component.topbar.back": "$t(common.back)",
   "component.topbar.close": "$t(common.close)",
-  "component.trimVideo.play": "Play",
-  "component.trimVideo.play.description": "Play trimmed video",
+  "component.timeline.play.description": "$t(common.play) complete video",
+  "component.timeline.pause.description": "$t(common.pause) complete video",
+  "component.trimVideo.play": "$t(common.play)",
+  "component.trimVideo.play.description": "$t(common.play) trimmed video",
   "component.trimVideo.trimDuration": "Trim duration",
   "component.trimVideo.trimDuration.description": "Set trimmed video duration",
   "component.undo.redo": "$t(common.redo)",
@@ -500,6 +526,12 @@
   "input.appearance": "Appearance",
   "input.aspectLock": "Lock proportions",
   "input.aspectLock.description": "Toggle proportion lock",
+  "input.audio.duration": "Duration",
+  "input.audio.duration.description": "Audio Duration",
+  "input.audio.duration.reset": "Reset audio duration",
+  "input.audio.mute": "Mute Audio",
+  "input.audio.time.end": "Time End",
+  "input.audio.time.start": "Time Start",
   "input.bleedMargin.select": "Select bleed margins",
   "input.blur": "Blur",
   "input.blur.tooltip": "Change blur",
@@ -906,8 +938,14 @@
   "property.textAlignment.vertical.bottom": "Align Text to the Bottom",
   "property.textAlignment.vertical.center": "Align Text to the Center",
   "property.textAlignment.vertical.top": "Align Text to the Top",
+  "property.trim": "Trim",
+  "property.volume": "Volume",
   "scope.content.replace": "Allow to Replace Content",
   "scope.design.arrange": "Allow to Arrange",
+  "scope.design.arrange.move": "Allow to Move",
+  "scope.design.arrange.rotate": "Allow to Rotate",
+  "scope.design.arrange.resize": "Allow to Scale",
+  "scope.design.arrange.flip": "Allow to Flip",
   "scope.design.style": "Allow to Style",
   "scope.editor.select": "Allow to Select",
   "scope.lifecycle.destroy": "Allow to Delete",

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.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-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{--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-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-l-size: 16px;--ubq-typography-headline-l-weight: 600;--ubq-typography-headline-l-letter_spacing: 0.01em;--ubq-typography-headline-l-line_height: 20px;--ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-m-size: 12px;--ubq-typography-headline-m-weight: 600;--ubq-typography-headline-m-letter_spacing: 0.03em;--ubq-typography-headline-m-line_height: 16px;--ubq-typography-label-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-m-size: 12px;--ubq-typography-label-m-weight: normal;--ubq-typography-label-m-letter_spacing: 0.02em;--ubq-typography-label-m-line_height: 16px;--ubq-typography-label-s-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-s-size: 10px;--ubq-typography-label-s-weight: normal;--ubq-typography-label-s-letter_spacing: 0.02em;--ubq-typography-label-s-line_height: 14px;--ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-m-size: 12px;--ubq-typography-body-m-weight: normal;--ubq-typography-body-m-letter_spacing: 0.02em;--ubq-typography-body-m-line_height: 18px;--ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Overpass Mono", monospace );--ubq-typography-input-m-size: 12px;--ubq-typography-input-m-weight: 500;--ubq-typography-input-m-letter_spacing: 0.02em;--ubq-typography-input-m-line_height: 16px;--ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-button-m-size: 12px;--ubq-typography-button-m-weight: normal;--ubq-typography-button-m-letter_spacing: 0.02em;--ubq-typography-button-m-line_height: 16px;--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-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-l-size: 20px;--ubq-typography-headline-l-weight: 600;--ubq-typography-headline-l-letter_spacing: 0.01em;--ubq-typography-headline-l-line_height: 25px;--ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-m-size: 15px;--ubq-typography-headline-m-weight: 600;--ubq-typography-headline-m-letter_spacing: 0.03em;--ubq-typography-headline-m-line_height: 20px;--ubq-typography-label-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-m-size: 15px;--ubq-typography-label-m-weight: normal;--ubq-typography-label-m-letter_spacing: 0.02em;--ubq-typography-label-m-line_height: 20px;--ubq-typography-label-s-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-s-size: 12.5px;--ubq-typography-label-s-weight: normal;--ubq-typography-label-s-letter_spacing: 0.02em;--ubq-typography-label-s-line_height: 17.5px;--ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-m-size: 15px;--ubq-typography-body-m-weight: normal;--ubq-typography-body-m-letter_spacing: 0.02em;--ubq-typography-body-m-line_height: 22.5px;--ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Overpass Mono", monospace );--ubq-typography-input-m-size: 15px;--ubq-typography-input-m-weight: 500;--ubq-typography-input-m-letter_spacing: 0.02em;--ubq-typography-input-m-line_height: 20px;--ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-button-m-size: 15px;--ubq-typography-button-m-weight: normal;--ubq-typography-button-m-letter_spacing: 0.02em;--ubq-typography-button-m-line_height: 20px;--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}
+.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-default: hsla(0, 0%, 100%, 0.16);--ubq-stroke-contrast-1: hsla(0, 0%, 100%, 0.08);--ubq-stroke-contrast-2: 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-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-default: hsla(210, 0%, 100%, 0.4);--ubq-stroke-contrast-1: hsla(210, 0%, 0%, 0.08);--ubq-stroke-contrast-2: 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{--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-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-l-size: 16px;--ubq-typography-headline-l-weight: 600;--ubq-typography-headline-l-letter_spacing: 0.01em;--ubq-typography-headline-l-line_height: 20px;--ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-m-size: 12px;--ubq-typography-headline-m-weight: 600;--ubq-typography-headline-m-letter_spacing: 0.03em;--ubq-typography-headline-m-line_height: 16px;--ubq-typography-label-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-m-size: 12px;--ubq-typography-label-m-weight: normal;--ubq-typography-label-m-letter_spacing: 0.02em;--ubq-typography-label-m-line_height: 16px;--ubq-typography-label-s-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-s-size: 10px;--ubq-typography-label-s-weight: normal;--ubq-typography-label-s-letter_spacing: 0.02em;--ubq-typography-label-s-line_height: 14px;--ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-m-size: 12px;--ubq-typography-body-m-weight: normal;--ubq-typography-body-m-letter_spacing: 0.02em;--ubq-typography-body-m-line_height: 18px;--ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Overpass Mono", monospace );--ubq-typography-input-m-size: 12px;--ubq-typography-input-m-weight: 500;--ubq-typography-input-m-letter_spacing: 0.02em;--ubq-typography-input-m-line_height: 16px;--ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-button-m-size: 12px;--ubq-typography-button-m-weight: normal;--ubq-typography-button-m-letter_spacing: 0.02em;--ubq-typography-button-m-line_height: 16px;--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-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-l-size: 20px;--ubq-typography-headline-l-weight: 600;--ubq-typography-headline-l-letter_spacing: 0.01em;--ubq-typography-headline-l-line_height: 25px;--ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-m-size: 15px;--ubq-typography-headline-m-weight: 600;--ubq-typography-headline-m-letter_spacing: 0.03em;--ubq-typography-headline-m-line_height: 20px;--ubq-typography-label-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-m-size: 15px;--ubq-typography-label-m-weight: normal;--ubq-typography-label-m-letter_spacing: 0.02em;--ubq-typography-label-m-line_height: 20px;--ubq-typography-label-s-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-s-size: 12.5px;--ubq-typography-label-s-weight: normal;--ubq-typography-label-s-letter_spacing: 0.02em;--ubq-typography-label-s-line_height: 17.5px;--ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-m-size: 15px;--ubq-typography-body-m-weight: normal;--ubq-typography-body-m-letter_spacing: 0.02em;--ubq-typography-body-m-line_height: 22.5px;--ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Overpass Mono", monospace );--ubq-typography-input-m-size: 15px;--ubq-typography-input-m-weight: 500;--ubq-typography-input-m-letter_spacing: 0.02em;--ubq-typography-input-m-line_height: 20px;--ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-button-m-size: 15px;--ubq-typography-button-m-weight: normal;--ubq-typography-button-m-letter_spacing: 0.02em;--ubq-typography-button-m-line_height: 20px;--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}