@colijnit/inphoto 300.1.8 → 301.1.0

package/lib/component/canvas-tool-bar/style/_layout.scss

@@ -1,63 +1,71 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-canvas-tool-bar-layout') {
-  .co-canvas-tool-bar {
-    .canvas-toolbar {
-      display: flex;
-      align-items: center;
-      position: absolute;
-      top: var(--co-inphoto-canvas-tool-bar-position-top);
-      left: var(--co-inphoto-canvas-tool-bar-position-left);
-      z-index: var(--co-inphoto-canvas-tool-bar-z-index);
-      justify-content: space-around;
-
-      .modus-indicator, .tool-selection, .actions {
-        display: flex;
-        align-items: center;
-        margin: var(--co-inphoto-canvas-tool-bar-section-margin);
-        position: relative;
-
-        .brush-size-container {
-          position: absolute;
-          top: var(--co-inphoto-canvas-tool-bar-brush-size-container-top);
-
-          .brush-preview {
-            display: flex;
-            align-items: center;
-            height: var(--co-inphoto-canvas-tool-bar-brush-preview-height);
-            overflow: hidden;
-          }
-
-          .brush-preview-line {
-            width: var(--co-inphoto-canvas-tool-bar-brush-preview-line-width);
-          }
-
-          .brush-size {
-            display: flex;
-            justify-content: space-between;
-
-            .brush-size-value {
-              width: var(--co-inphoto-canvas-tool-bar-brush-size-value-width);
-            }
-
-            .brush-size-slider {
-              width: var(--co-inphoto-canvas-tool-bar-brush-size-slider-width);
-            }
-          }
-        }
-      }
-
-      .actions {
-        gap: var(--co-inphoto-canvas-tool-bar-actions-gap);
-
-        .cancel-button, .action-button {
-          height: var(--co-inphoto-canvas-tool-bar-button-size);
-          display: flex;
-          align-content: center;
-          align-items: center;
-          cursor: pointer;
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-canvas-tool-bar-layout') {
+  .co-canvas-tool-bar {
+    .canvas-toolbar {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      top: var(--co-inphoto-canvas-tool-bar-position-top);
+      left: var(--co-inphoto-canvas-tool-bar-position-left);
+      z-index: var(--co-inphoto-canvas-tool-bar-z-index);
+      justify-content: space-around;
+
+      .modus-indicator, .tool-selection, .actions {
+        display: flex;
+        align-items: center;
+        margin: var(--co-inphoto-canvas-tool-bar-section-margin);
+        position: relative;
+
+        .brush-size-container {
+          position: absolute;
+          top: var(--co-inphoto-canvas-tool-bar-brush-size-container-top);
+
+          .brush-preview {
+            display: flex;
+            align-items: center;
+            height: var(--co-inphoto-canvas-tool-bar-brush-preview-height);
+            overflow: hidden;
+          }
+
+          .brush-preview-line {
+            width: var(--co-inphoto-canvas-tool-bar-brush-preview-line-width);
+          }
+
+          .brush-size {
+            display: flex;
+            justify-content: space-between;
+
+            .brush-size-value {
+              width: var(--co-inphoto-canvas-tool-bar-brush-size-value-width);
+            }
+
+            .brush-size-slider {
+              width: var(--co-inphoto-canvas-tool-bar-brush-size-slider-width);
+            }
+          }
+        }
+      }
+
+      .actions {
+        gap: var(--co-inphoto-canvas-tool-bar-actions-gap);
+
+        .cancel-button, .action-button {
+          height: var(--co-inphoto-canvas-tool-bar-button-size);
+          display: flex;
+          align-content: center;
+          align-items: center;
+          cursor: pointer;
+        }
+      }
+
+      .canvas-zoom-control {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        margin: var(--co-inphoto-canvas-tool-bar-section-margin);
+        position: relative;
+      }
+    }
+  }
+}

package/lib/component/canvas-tool-bar/style/_material-definition.scss

@@ -1,37 +1,40 @@
-.co-canvas-tool-bar {
-  --co-inphoto-canvas-tool-bar-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-canvas-tool-bar-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-canvas-tool-bar-spacer-color: #D9D9DF;
-
-  --co-inphoto-canvas-tool-bar-position-top: 50px;
-  --co-inphoto-canvas-tool-bar-position-left: 25%;
-  --co-inphoto-canvas-tool-bar-z-index: 25;
-  --co-inphoto-canvas-tool-bar-padding: 10px;
-
-  --co-inphoto-canvas-tool-bar-brush-size-preview-color: #FF0000;
-
-  --co-inphoto-canvas-tool-bar-section-margin: 0 5px;
-  --co-inphoto-canvas-tool-bar-actions-gap: 20px;
-  --co-inphoto-canvas-tool-bar-button-size: 35px;
-
-  --co-inphoto-canvas-tool-bar-brush-size-container-top: 50px;
-  --co-inphoto-canvas-tool-bar-brush-preview-height: 60px;
-  --co-inphoto-canvas-tool-bar-brush-preview-line-width: 100%;
-  --co-inphoto-canvas-tool-bar-brush-preview-line-radius: 999px;
-  --co-inphoto-canvas-tool-bar-brush-preview-transition: height 0.05s linear;
-  --co-inphoto-canvas-tool-bar-brush-size-value-width: 40px;
-  --co-inphoto-canvas-tool-bar-brush-size-slider-width: 150px;
-
-  --co-inphoto-canvas-tool-bar-drag-icon-padding: 8px;
-
-  --co-inphoto-canvas-tool-bar-spacer-font-size: 30px;
-  --co-inphoto-canvas-tool-bar-spacer-font-weight: lighter;
-
-  --co-inphoto-canvas-tool-bar-tool-button-padding: 0;
-  --co-inphoto-canvas-tool-bar-tool-button-margin: 0 4px;
-  --co-inphoto-canvas-tool-bar-selected-border-style: 1px solid;
-
-  --co-inphoto-canvas-tool-bar-cancel-button-background: transparent;
-  --co-inphoto-canvas-tool-bar-cancel-button-font-weight: 500;
-  --co-inphoto-canvas-tool-bar-label-spacing: 10px;
-}
+.co-canvas-tool-bar {
+  --co-inphoto-canvas-tool-bar-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-canvas-tool-bar-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-canvas-tool-bar-spacer-color: #D9D9DF;
+
+  --co-inphoto-canvas-tool-bar-position-top: 50px;
+  --co-inphoto-canvas-tool-bar-position-left: 25%;
+  --co-inphoto-canvas-tool-bar-z-index: 25;
+  --co-inphoto-canvas-tool-bar-padding: 10px;
+
+  --co-inphoto-canvas-tool-bar-brush-size-preview-color: #FF0000;
+
+  --co-inphoto-canvas-tool-bar-section-margin: 0 5px;
+  --co-inphoto-canvas-tool-bar-actions-gap: 20px;
+  --co-inphoto-canvas-tool-bar-button-size: 35px;
+
+  --co-inphoto-canvas-tool-bar-brush-size-container-top: 50px;
+  --co-inphoto-canvas-tool-bar-brush-preview-height: 60px;
+  --co-inphoto-canvas-tool-bar-brush-preview-line-width: 100%;
+  --co-inphoto-canvas-tool-bar-brush-preview-line-radius: 999px;
+  --co-inphoto-canvas-tool-bar-brush-preview-transition: height 0.05s linear;
+  --co-inphoto-canvas-tool-bar-brush-size-value-width: 40px;
+  --co-inphoto-canvas-tool-bar-brush-size-slider-width: 150px;
+
+  --co-inphoto-canvas-tool-bar-drag-icon-padding: 8px;
+
+  --co-inphoto-canvas-tool-bar-spacer-font-size: 30px;
+  --co-inphoto-canvas-tool-bar-spacer-font-weight: lighter;
+
+  --co-inphoto-canvas-tool-bar-tool-button-padding: 0;
+  --co-inphoto-canvas-tool-bar-tool-button-margin: 0 4px;
+  --co-inphoto-canvas-tool-bar-selected-border-style: 1px solid;
+
+  --co-inphoto-canvas-tool-bar-cancel-button-background: transparent;
+  --co-inphoto-canvas-tool-bar-cancel-button-font-weight: 500;
+  --co-inphoto-canvas-tool-bar-label-spacing: 10px;
+
+  --co-inphoto-canvas-tool-bar-zoom-zero: 0;
+  --co-inphoto-canvas-tool-bar-zoom-button-height: 40px;
+}

package/lib/component/canvas-tool-bar/style/_theme.scss

@@ -1,108 +1,138 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-canvas-tool-bar-theme') {
-  .co-canvas-tool-bar {
-    font-family: var(--co-inphoto-canvas-tool-bar-font-family);
-    font-size: var(--co-inphoto-canvas-tool-bar-font-size-text);
-
-    .canvas-toolbar {
-      background: var(--co-inphoto-background-white);
-      padding: var(--co-inphoto-canvas-tool-bar-padding);
-      border-radius: var(--co-inphoto-border-radius);
-
-      .drag-indicator-icon {
-        padding: var(--co-inphoto-canvas-tool-bar-drag-icon-padding);
-        background: var(--co-inphoto-dialog-background-color);
-        border-radius: var(--co-inphoto-border-radius);
-        cursor: grab;
-
-        &:active {
-          cursor: grabbing;
-        }
-
-        @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-accent-text));
-      }
-
-      .modus-indicator {
-        .modus-indicator-text {
-          @include cfg.sub-header-text();
-        }
-      }
-
-      .spacer {
-        color: var(--co-inphoto-canvas-tool-bar-spacer-color);
-        font-size: var(--co-inphoto-canvas-tool-bar-spacer-font-size);
-        font-weight: var(--co-inphoto-canvas-tool-bar-spacer-font-weight);
-        margin: var(--co-inphoto-canvas-tool-bar-section-margin);
-      }
-
-      .tool-selection {
-        .brush-button, .eraser-button, .drag-button {
-          background-color: var(--co-inphoto-button-background);
-          color: var(--co-inphoto-button-color);
-          font-size: var(--co-inphoto-button-font-size);
-          border: var(--co-inphoto-button-border);
-          cursor: pointer;
-          padding: var(--co-inphoto-canvas-tool-bar-tool-button-padding);
-          border-radius: var(--co-inphoto-button-radius);
-          margin: var(--co-inphoto-canvas-tool-bar-tool-button-margin);
-          height: var(--co-inphoto-canvas-tool-bar-button-size);
-          width: var(--co-inphoto-canvas-tool-bar-button-size);
-          @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-icon-color));
-        }
-
-        .brush-size-container {
-          background: var(--co-inphoto-background-white);
-          padding: var(--co-inphoto-canvas-tool-bar-padding);
-          border-radius: var(--co-inphoto-border-radius);
-
-          .brush-preview-line {
-            background: var(--co-inphoto-canvas-tool-bar-brush-size-preview-color);
-            border-radius: var(--co-inphoto-canvas-tool-bar-brush-preview-line-radius);
-            transition: var(--co-inphoto-canvas-tool-bar-brush-preview-transition);
-          }
-        }
-
-        .selected {
-          color: var(--co-inphoto-active-button-color);
-          background: var(--co-inphoto-active-button-background);
-          border: var(--co-inphoto-canvas-tool-bar-selected-border-style) var(--co-inphoto-active-button-background);
-
-          @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-active-button-color));
-        }
-      }
-
-      .actions {
-        .cancel-button {
-          background-color: var(--co-inphoto-canvas-tool-bar-cancel-button-background);
-          color: var(--co-inphoto-button-color);
-          font-size: var(--co-inphoto-button-font-size);
-          padding: var(--co-inphoto-button-padding);
-          font-weight: var(--co-inphoto-canvas-tool-bar-cancel-button-font-weight);
-          @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-icon-color));
-
-          .label {
-            margin-right: var(--co-inphoto-canvas-tool-bar-label-spacing);
-          }
-        }
-
-        .action-button {
-          @include cfg.action-button(
-                  var(--co-inphoto-action-button-background),
-                  var(--co-inphoto-action-button-background),
-                  var(--co-inphoto-action-button-color),
-                  var(--co-inphoto-action-button-font-size),
-                  var(--co-inphoto-button-small-icon-size),
-                  var(--co-inphoto-action-button-icon-color),
-                  var(--co-inphoto-action-button-border),
-                  var(--co-inphoto-action-button-radius),
-                  var(--co-inphoto-action-button-padding));
-
-          .label {
-            margin-left: var(--co-inphoto-canvas-tool-bar-label-spacing);
-          }
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-canvas-tool-bar-theme') {
+  .co-canvas-tool-bar {
+    font-family: var(--co-inphoto-canvas-tool-bar-font-family);
+    font-size: var(--co-inphoto-canvas-tool-bar-font-size-text);
+
+    .canvas-toolbar {
+      background: var(--co-inphoto-background-white);
+      padding: var(--co-inphoto-canvas-tool-bar-padding);
+      border-radius: var(--co-inphoto-border-radius);
+
+      .drag-indicator-icon {
+        padding: var(--co-inphoto-canvas-tool-bar-drag-icon-padding);
+        background: var(--co-inphoto-dialog-background-color);
+        border-radius: var(--co-inphoto-border-radius);
+        cursor: grab;
+
+        &:active {
+          cursor: grabbing;
+        }
+
+        @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-accent-text));
+      }
+
+      .modus-indicator {
+        .modus-indicator-text {
+          @include cfg.sub-header-text();
+        }
+      }
+
+      .spacer {
+        color: var(--co-inphoto-canvas-tool-bar-spacer-color);
+        font-size: var(--co-inphoto-canvas-tool-bar-spacer-font-size);
+        font-weight: var(--co-inphoto-canvas-tool-bar-spacer-font-weight);
+        margin: var(--co-inphoto-canvas-tool-bar-section-margin);
+      }
+
+      .tool-selection {
+        .brush-button, .eraser-button, .drag-button {
+          background-color: var(--co-inphoto-button-background);
+          color: var(--co-inphoto-button-color);
+          font-size: var(--co-inphoto-button-font-size);
+          border: var(--co-inphoto-button-border);
+          cursor: pointer;
+          padding: var(--co-inphoto-canvas-tool-bar-tool-button-padding);
+          border-radius: var(--co-inphoto-button-radius);
+          margin: var(--co-inphoto-canvas-tool-bar-tool-button-margin);
+          height: var(--co-inphoto-canvas-tool-bar-button-size);
+          width: var(--co-inphoto-canvas-tool-bar-button-size);
+          @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-icon-color));
+        }
+
+        .brush-size-container {
+          background: var(--co-inphoto-background-white);
+          padding: var(--co-inphoto-canvas-tool-bar-padding);
+          border-radius: var(--co-inphoto-border-radius);
+
+          .brush-preview-line {
+            background: var(--co-inphoto-canvas-tool-bar-brush-size-preview-color);
+            border-radius: var(--co-inphoto-canvas-tool-bar-brush-preview-line-radius);
+            transition: var(--co-inphoto-canvas-tool-bar-brush-preview-transition);
+          }
+        }
+
+        .selected {
+          color: var(--co-inphoto-active-button-color);
+          background: var(--co-inphoto-active-button-background);
+          border: var(--co-inphoto-canvas-tool-bar-selected-border-style) var(--co-inphoto-active-button-background);
+
+          @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-active-button-color));
+        }
+      }
+
+      .actions {
+        .cancel-button {
+          background-color: var(--co-inphoto-canvas-tool-bar-cancel-button-background);
+          color: var(--co-inphoto-button-color);
+          font-size: var(--co-inphoto-button-font-size);
+          padding: var(--co-inphoto-button-padding);
+          font-weight: var(--co-inphoto-canvas-tool-bar-cancel-button-font-weight);
+          @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-icon-color));
+
+          .label {
+            margin-right: var(--co-inphoto-canvas-tool-bar-label-spacing);
+          }
+        }
+
+        .action-button {
+          @include cfg.action-button(
+                  var(--co-inphoto-action-button-background),
+                  var(--co-inphoto-action-button-background),
+                  var(--co-inphoto-action-button-color),
+                  var(--co-inphoto-action-button-font-size),
+                  var(--co-inphoto-button-small-icon-size),
+                  var(--co-inphoto-action-button-icon-color),
+                  var(--co-inphoto-action-button-border),
+                  var(--co-inphoto-action-button-radius),
+                  var(--co-inphoto-action-button-padding));
+
+          .label {
+            margin-left: var(--co-inphoto-canvas-tool-bar-label-spacing);
+          }
+        }
+      }
+
+      .canvas-zoom-control {
+        .zoom-input-wrapper {
+          .co-input-text {
+            @include cfg.text();
+          }
+          .co-input-text:not(.no-style) {
+            input {
+              text-align: center;
+              align-self: center;
+              padding: var(--co-inphoto-canvas-tool-bar-zoom-zero);
+            }
+          }
+        }
+
+        .co-button {
+          @include cfg.action-button(
+                  var(--co-inphoto-button-background),
+                  var(--co-inphoto-button-background),
+                  var(--co-inphoto-button-color),
+                  var(--co-inphoto-icon-size-small),
+                  var(--co-inphoto-button-icon-size),
+                  var(--co-inphoto-button-icon-color),
+                  var(--co-inphoto-button-border),
+                  var(--co-inphoto-button-radius),
+                  var(--co-inphoto-canvas-tool-bar-zoom-zero));
+
+          height: var(--co-inphoto-canvas-tool-bar-zoom-button-height);
+        }
+      }
+    }
+  }
+}

package/lib/component/catalog/style/_layout.scss

@@ -1,68 +1,68 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-catalog-layout') {
-  .co-catalog {
-    .catalog-dialog {
-      z-index: var(--co-inphoto-catalog-dialog-z-index);
-      top: var(--co-inphoto-catalog-dialog-inset-zero);
-      left: var(--co-inphoto-catalog-dialog-left);
-      right: var(--co-inphoto-catalog-dialog-inset-zero);
-      bottom: var(--co-inphoto-catalog-dialog-inset-zero);
-      position: var(--co-inphoto-catalog-position-absolute);
-      overflow-y: scroll;
-      overflow-x: hidden;
-
-      .catalog-container {
-        padding-left: var(--co-inphoto-catalog-container-padding-left);
-
-        .catalog-dialog-wrapper {
-          display: flex;
-          align-items: center;
-          padding: var(--co-inphoto-catalog-dialog-wrapper-padding);
-
-          .back-button {
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-          }
-
-          .close-button {
-            display: flex;
-            align-items: center;
-            margin-left: var(--co-inphoto-catalog-close-button-margin-left);
-          }
-        }
-
-        .catalog-body {
-          max-height: var(--co-inphoto-catalog-body-max-height);
-
-          .catalog-tile-wrapper {
-            display: grid;
-            overflow: hidden;
-            grid-template-columns: var(--co-inphoto-catalog-tile-wrapper-grid-columns);
-            padding: var(--co-inphoto-catalog-tile-wrapper-padding);
-            grid-gap: var(--co-inphoto-catalog-tile-wrapper-gap);
-
-            .catalog-tile {
-              cursor: pointer;
-              position: var(--co-inphoto-catalog-position-relative);
-              display: flex;
-              flex-direction: column;
-              height: var(--co-inphoto-catalog-tile-full-size);
-              width: var(--co-inphoto-catalog-tile-full-size);
-              min-height: var(--co-inphoto-catalog-tile-min-height);
-
-              p {
-                display: block;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-                margin: var(--co-inphoto-catalog-tile-text-margin);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-catalog-layout') {
+  .co-catalog {
+    .catalog-dialog {
+      z-index: var(--co-inphoto-catalog-dialog-z-index);
+      top: var(--co-inphoto-catalog-dialog-inset-zero);
+      left: var(--co-inphoto-catalog-dialog-left);
+      right: var(--co-inphoto-catalog-dialog-inset-zero);
+      bottom: var(--co-inphoto-catalog-dialog-inset-zero);
+      position: var(--co-inphoto-catalog-position-absolute);
+      overflow-y: scroll;
+      overflow-x: hidden;
+
+      .catalog-container {
+        padding-left: var(--co-inphoto-catalog-container-padding-left);
+
+        .catalog-dialog-wrapper {
+          display: flex;
+          align-items: center;
+          padding: var(--co-inphoto-catalog-dialog-wrapper-padding);
+
+          .back-button {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+          }
+
+          .close-button {
+            display: flex;
+            align-items: center;
+            margin-left: var(--co-inphoto-catalog-close-button-margin-left);
+          }
+        }
+
+        .catalog-body {
+          max-height: var(--co-inphoto-catalog-body-max-height);
+
+          .catalog-tile-wrapper {
+            display: grid;
+            overflow: hidden;
+            grid-template-columns: var(--co-inphoto-catalog-tile-wrapper-grid-columns);
+            padding: var(--co-inphoto-catalog-tile-wrapper-padding);
+            grid-gap: var(--co-inphoto-catalog-tile-wrapper-gap);
+
+            .catalog-tile {
+              cursor: pointer;
+              position: var(--co-inphoto-catalog-position-relative);
+              display: flex;
+              flex-direction: column;
+              height: var(--co-inphoto-catalog-tile-full-size);
+              width: var(--co-inphoto-catalog-tile-full-size);
+              min-height: var(--co-inphoto-catalog-tile-min-height);
+
+              p {
+                display: block;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                margin: var(--co-inphoto-catalog-tile-text-margin);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/component/catalog/style/_material-definition.scss

@@ -1,22 +1,22 @@
-.co-catalog {
-  --co-inphoto-catalog-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-catalog-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-catalog-border-color: #ccc;
-  --co-inphoto-catalog-dialog-border-left: 1px solid var(--co-inphoto-catalog-border-color);
-  --co-inphoto-catalog-dialog-z-index: 100;
-  --co-inphoto-catalog-dialog-inset-zero: 0;
-  --co-inphoto-catalog-dialog-left: 85px;
-  --co-inphoto-catalog-position-absolute: absolute;
-  --co-inphoto-catalog-position-relative: relative;
-  --co-inphoto-catalog-container-padding-left: 25px;
-  --co-inphoto-catalog-dialog-wrapper-padding: 10px;
-  --co-inphoto-catalog-close-button-margin-left: auto;
-  --co-inphoto-catalog-body-max-height: 100%;
-  --co-inphoto-catalog-tile-wrapper-grid-columns: repeat(auto-fit, minmax(10px, 150px));
-  --co-inphoto-catalog-tile-wrapper-padding: 0;
-  --co-inphoto-catalog-tile-wrapper-gap: 10px;
-  --co-inphoto-catalog-tile-full-size: 100%;
-  --co-inphoto-catalog-tile-min-height: 150px;
-  --co-inphoto-catalog-tile-text-margin: 10px 0;
-  --co-inphoto-catalog-tile-text-font-weight: bold;
-}
+.co-catalog {
+  --co-inphoto-catalog-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-catalog-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-catalog-border-color: #ccc;
+  --co-inphoto-catalog-dialog-border-left: 1px solid var(--co-inphoto-catalog-border-color);
+  --co-inphoto-catalog-dialog-z-index: 100;
+  --co-inphoto-catalog-dialog-inset-zero: 0;
+  --co-inphoto-catalog-dialog-left: 85px;
+  --co-inphoto-catalog-position-absolute: absolute;
+  --co-inphoto-catalog-position-relative: relative;
+  --co-inphoto-catalog-container-padding-left: 25px;
+  --co-inphoto-catalog-dialog-wrapper-padding: 10px;
+  --co-inphoto-catalog-close-button-margin-left: auto;
+  --co-inphoto-catalog-body-max-height: 100%;
+  --co-inphoto-catalog-tile-wrapper-grid-columns: repeat(auto-fit, minmax(10px, 150px));
+  --co-inphoto-catalog-tile-wrapper-padding: 0;
+  --co-inphoto-catalog-tile-wrapper-gap: 10px;
+  --co-inphoto-catalog-tile-full-size: 100%;
+  --co-inphoto-catalog-tile-min-height: 150px;
+  --co-inphoto-catalog-tile-text-margin: 10px 0;
+  --co-inphoto-catalog-tile-text-font-weight: bold;
+}