@cesdk/cesdk-js 1.1.1 → 1.2.0

package/.browserslistrc

@@ -0,0 +1,4 @@
+Chrome >= 73
+Firefox >= 66
+Edge >= 17
+Safari >= 11

package/assets/i18n/de.json

@@ -135,6 +135,48 @@
       "italic": { "label": "Kursiv" }
     }
   },
+  "libraries": {
+    "label": "Bibliothek",
+    "noItems": { "label": "Keine Elemente vorhanden" },
+    "noMoreItems": { "label": "Keine weiteren Elemente" },
+    "search": {
+      "placeholder": "Suchen …"
+    },
+    "breadcrumb": {
+      "root": {
+        "label": "Alle"
+      }
+    },
+    "local": {
+      "label": "Uploads",
+      "addFile": { "label": "Hinzufügen" }
+    },
+    "ly": {
+      "img": {
+        "image": {
+          "label": "Bilder"
+        },
+        "text": {
+          "label": "Text",
+
+          "title": { "label": "Titel" },
+          "headline": { "label": "Überschrift" },
+          "paragraph": { "label": "Absatz" }
+        },
+        "sticker": {
+          "label": "Sticker",
+          "emoticons": { "label": "Emoticons" },
+          "openmoji": { "label": "Openmoji" },
+          "doodle": { "label": "Doodle" },
+          "emoji": { "label": "Emoji" },
+          "hand": { "label": "Hands" }
+        },
+        "vectorpath": {
+          "label": "Formen"
+        }
+      }
+    }
+  },
   "textEditing": {
     "bold": {
       "label": "Fett"
@@ -149,6 +191,20 @@
       "label": "Variable hinzufügen"
     }
   },
+  "placeholder": {
+    "create": {
+      "label": "Platzhalter"
+    },
+    "remove": {
+      "label": "Platzhalter entfernen"
+    },
+    "settings": {
+      "label": "Platzhaltereinstellungen ändern"
+    },
+    "settingsMenu": {
+      "label": "Platzhaltereinstellungsmenü"
+    }
+  },
   "scopes": {
     "content": {
       "replace": {
@@ -197,6 +253,9 @@
       "vectorPath": { "label": "Pfad" },
       "element": { "label": "Elemente" },
       "call-to-action": { "more": "Weitere Optionen anzeigen" },
+      "preview": {
+        "label": "Vorschau"
+      },
       "modeswitch": {
         "design": {
           "label": "Design",
@@ -301,8 +360,8 @@
       "label": "Editor Leinwand",
       "state": {
         "loading": {
-          "headline": {"label": "Editor wird geladen"},
-          "description": {"label":  "Nur ein paar Sekunden..."},
+          "headline": { "label": "Editor wird geladen" },
+          "description": { "label": "Nur ein paar Sekunden..." },
           "error": { "label": "Engine des Editors konnte nicht geladen werden" }
         },
         "unsupported": { "label": "Ihr Browser wird nicht unterstützt" }
@@ -314,6 +373,12 @@
         "duplicate": { "label": "$t(common.duplicate)" },
         "edit": { "label": "$t(common.edit)" },
         "delete": { "label": "$t(common.delete)" },
+        "smartImage": {
+          "label": "Intelligente Funktionen",
+          "menu": {
+            "label": "Aktionen für intelligente Funktionen"
+          }
+        },
         "mask": { "label": "Maskieren" },
         "smartCrop": { "label": "Smartes Zuschneiden" },
         "superResolution": { "label": "Hochskalieren" },
@@ -340,6 +405,9 @@
       "page": {
         "label": "Neue Seite"
       },
+      "elements": {
+        "label": "Element hinzufügen"
+      },
       "settings": {
         "label": "Editor anpassen",
         "description": "Einstellungen öffnen um den Editor anzupassen"
@@ -354,6 +422,13 @@
         }
       }
     },
+    "panel": {
+      "header": {
+        "renameDesignElement": {
+          "label": "{{designElementName}} umbenennen"
+        }
+      }
+    },
     "SettingsPanel": {
       "header": {
         "label": "Editor anpassen"
@@ -452,6 +527,19 @@
           }
         }
       },
+      "AdopterViewSelect": {
+        "label": "Adopter Ansicht",
+        "options": {
+          "classic": {
+            "label": "Classic",
+            "description": "Den Inspektor immer anzeigen."
+          },
+          "minimal": {
+            "label": "Minimal",
+            "description": "Den Inspektor möglichst verbergen."
+          }
+        }
+      },
       "ScalingSelect": {
         "label": "UI Skalierung",
         "description": "UI Skalierung auswählen",
@@ -879,7 +967,9 @@
           "reset": {
             "description": "Eigenschaften eines Elements zurücksetzen"
           }
-        }
+        },
+
+        "rename": { "description": "Element umbenennen" }
       }
     }
   },

package/assets/i18n/en.json

@@ -135,6 +135,48 @@
       "italic": { "label": "Italic" }
     }
   },
+  "libraries": {
+    "label": "Library",
+    "noItems": { "label": "No elements" },
+    "noMoreItems": { "label": "No more elements" },
+    "search": {
+      "placeholder": "Search …"
+    },
+    "breadcrumb": {
+      "root": {
+        "label": "All"
+      }
+    },
+    "local": {
+      "label": "Uploads",
+      "addFile": { "label": "Add file" }
+    },
+    "ly": {
+      "img": {
+        "image": {
+          "label": "Images"
+        },
+        "text": {
+          "label": "Text",
+
+          "title": { "label": "Title" },
+          "headline": { "label": "Headline" },
+          "paragraph": { "label": "Paragraph" }
+        },
+        "sticker": {
+          "label": "Stickers",
+          "emoticons": { "label": "Emoticons" },
+          "openmoji": { "label": "Openmoji" },
+          "doodle": { "label": "Doodle" },
+          "emoji": { "label": "Emoji" },
+          "hand": { "label": "Hands" }
+        },
+        "vectorpath": {
+          "label": "Shapes"
+        }
+      }
+    }
+  },
   "textEditing": {
     "bold": {
       "label": "Bold"
@@ -149,6 +191,20 @@
       "label": "Insert variable"
     }
   },
+  "placeholder": {
+    "create": {
+      "label": "Placeholder"
+    },
+    "remove": {
+      "label": "Remove Placeholder"
+    },
+    "settings": {
+      "label": "Change placeholder settings"
+    },
+    "settingsMenu": {
+      "label": "Placeholder settings menu"
+    }
+  },
   "scopes": {
     "content": {
       "replace": {
@@ -197,6 +253,9 @@
       "vectorPath": { "label": "Path" },
       "element": { "label": "Element" },
       "call-to-action": { "more": "Show more options" },
+      "preview": {
+        "label": "Preview"
+      },
       "modeswitch": {
         "design": {
           "label": "Design",
@@ -314,6 +373,12 @@
         "duplicate": { "label": "$t(common.duplicate)" },
         "edit": { "label": "$t(common.edit)" },
         "delete": { "label": "$t(common.delete)" },
+        "smartImage": {
+          "label": "Smart Features",
+          "menu": {
+            "label": "Smart Features Actions"
+          }
+        },
         "mask": { "label": "Mask" },
         "smartCrop": { "label": "Smart-crop" },
         "superResolution": { "label": "Super-resolution" },
@@ -340,6 +405,9 @@
       "page": {
         "label": "New Page"
       },
+      "elements": {
+        "label": "Add Elements"
+      },
       "settings": {
         "label": "Customize Editor",
         "description": "Open settings to customize editor"
@@ -354,6 +422,13 @@
         }
       }
     },
+    "panel": {
+      "header": {
+        "renameDesignElement": {
+          "label": "Rename {{designElementName}}"
+        }
+      }
+    },
     "SettingsPanel": {
       "header": {
         "label": "Customize Editor"
@@ -452,6 +527,19 @@
           }
         }
       },
+      "AdopterViewSelect": {
+        "label": "Adopter View",
+        "options": {
+          "classic": {
+            "label": "Classic",
+            "description": "Always show the inspector."
+          },
+          "minimal": {
+            "label": "Minimal",
+            "description": "Hide the inspector if possible."
+          }
+        }
+      },
       "ScalingSelect": {
         "label": "UI Scaling",
         "description": "Select ui scaling",
@@ -1060,7 +1148,9 @@
         "property": {
           "update": { "description": "Update element property" },
           "reset": { "description": "Reset element properties to default" }
-        }
+        },
+
+        "rename": { "description": "Rename element" }
       }
     }
   },

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

@@ -1 +1 @@
-.ubq-dark{--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-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-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-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-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) var(--ubq-focus-outline), 0 0 0 var(--ubq-scale-base) var(--ubq-focus-default);--ubq-Slider-track-progress-color: hsla( 210, 0%, 100%, 0.16 );--ubq-Slider-background-color: hsla( 210, 0%, 100%, 0.08 );--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-2: hsl(210, 10%, 95%);--ubq-elevation-1: hsl(210, 10%, 90%);--ubq-canvas: hsl(210, 10%, 85%);--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-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-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-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-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) var(--ubq-focus-outline), 0 0 0 var(--ubq-scale-base) var(--ubq-focus-default);--ubq-Slider-track-progress-color: hsla( 210, 0%, 0%, 0.16 );--ubq-Slider-background-color: hsla( 210, 0%, 0%, 0.08 );--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-body-l-size: 16px;--ubq-typography-body-l-line_height: 20px;--ubq-typography-body-l-letter_spacing: 0em;--ubq-typography-body-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-l-weight: normal;--ubq-typography-body-m-size: 12px;--ubq-typography-body-m-line_height: 16px;--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: unset;--ubq-scale-base: 4px;--ubq-margin-base: 4px;--ubq-margin-xs: var(--ubq-margin-base);--ubq-margin-s: calc(var(--ubq-margin-base) * 2);--ubq-margin-m: calc(var(--ubq-margin-base) * 3);--ubq-margin-l: calc(var(--ubq-margin-base) * 4);--ubq-border_radius-base: 3px;--ubq-border_radius-s: var(--ubq-border_radius-base);--ubq-border_radius-m: calc(var(--ubq-border_radius-base) * 2);--ubq-border_radius-l: calc(var(--ubq-border_radius-base) * 4)}.ubq-large{--ubq-typography-headline-l-size: 18px;--ubq-typography-headline-l-line_height: 24px;--ubq-typography-headline-l-letter_spacing: 0em;--ubq-typography-headline-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-l-weight: 700;--ubq-typography-headline-m-size: 14px;--ubq-typography-headline-m-line_height: 20px;--ubq-typography-headline-m-letter_spacing: 0.01em;--ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-m-weight: 700;--ubq-typography-body-l-size: 18px;--ubq-typography-body-l-line_height: 24px;--ubq-typography-body-l-letter_spacing: 0em;--ubq-typography-body-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-l-weight: 500;--ubq-typography-body-m-size: 14px;--ubq-typography-body-m-line_height: 20px;--ubq-typography-body-m-letter_spacing: 0.01em;--ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-m-weight: 500;--ubq-typography-input-m-size: 14px;--ubq-typography-input-m-line_height: 20px;--ubq-typography-input-m-letter_spacing: 0em;--ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Overpass Mono", monospace );--ubq-typography-input-m-weight: 400;--ubq-typography-button-m-size: 14px;--ubq-typography-button-m-line_height: 20px;--ubq-typography-button-m-letter_spacing: 0.01em;--ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-button-m-weight: 500;--ubq-scale-base: 5px;--ubq-margin-base: 5px;--ubq-margin-xs: var(--ubq-margin-base);--ubq-margin-s: calc(var(--ubq-margin-base) * 2);--ubq-margin-m: calc(var(--ubq-margin-base) * 3);--ubq-margin-l: calc(var(--ubq-margin-base) * 4);--ubq-border_radius-base: 3.75px;--ubq-border_radius-s: var(--ubq-border_radius-base);--ubq-border_radius-m: calc(var(--ubq-border_radius-base) * 2);--ubq-border_radius-l: calc(var(--ubq-border_radius-base) * 4)}
+.ubq-dark{--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-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-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-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-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) var(--ubq-focus-outline), 0 0 0 var(--ubq-scale-base) var(--ubq-focus-default);--ubq-Slider-track-progress-color: hsla( 210, 0%, 100%, 0.16 );--ubq-Slider-background-color: hsla( 210, 0%, 100%, 0.08 );--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-2: hsl(210, 10%, 95%);--ubq-elevation-1: hsl(210, 10%, 90%);--ubq-canvas: hsl(210, 10%, 85%);--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-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-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-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-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) var(--ubq-focus-outline), 0 0 0 var(--ubq-scale-base) var(--ubq-focus-default);--ubq-Slider-track-progress-color: hsla( 210, 0%, 0%, 0.16 );--ubq-Slider-background-color: hsla( 210, 0%, 0%, 0.08 );--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-body-l-size: 16px;--ubq-typography-body-l-line_height: 20px;--ubq-typography-body-l-letter_spacing: 0em;--ubq-typography-body-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-l-weight: normal;--ubq-typography-body-m-size: 12px;--ubq-typography-body-m-line_height: 16px;--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: unset;--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-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: 18px;--ubq-typography-headline-l-line_height: 24px;--ubq-typography-headline-l-letter_spacing: 0em;--ubq-typography-headline-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-l-weight: 700;--ubq-typography-headline-m-size: 14px;--ubq-typography-headline-m-line_height: 20px;--ubq-typography-headline-m-letter_spacing: 0.01em;--ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-m-weight: 700;--ubq-typography-body-l-size: 18px;--ubq-typography-body-l-line_height: 24px;--ubq-typography-body-l-letter_spacing: 0em;--ubq-typography-body-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-l-weight: 500;--ubq-typography-body-m-size: 14px;--ubq-typography-body-m-line_height: 20px;--ubq-typography-body-m-letter_spacing: 0.01em;--ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-m-weight: 500;--ubq-typography-input-m-size: 14px;--ubq-typography-input-m-line_height: 20px;--ubq-typography-input-m-letter_spacing: 0em;--ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Overpass Mono", monospace );--ubq-typography-input-m-weight: 400;--ubq-typography-button-m-size: 14px;--ubq-typography-button-m-line_height: 20px;--ubq-typography-button-m-letter_spacing: 0.01em;--ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-button-m-weight: 500;--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-border_radius-base: 3.75px;--ubq-border_radius-s: 3.75px;--ubq-border_radius-m: 7.5px;--ubq-border_radius-l: 15px}