@colijnit/inphoto 300.1.7 → 300.1.9

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

@@ -1,106 +1,138 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-canvas-tool-bar-theme') {
-  .co-canvas-tool-bar {
-    .canvas-toolbar {
-      background: var(--co-inphoto-background-white);
-      padding: var(--co-inphoto-toolbar-padding);
-
-      .drag-indicator-icon {
-        padding: 8px;
-        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-toolbar-spacer-color);
-        font-size: 30px;
-        font-weight: lighter;
-        margin: 0 5px;
-      }
-
-      .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: 0;
-          border-radius: var(--co-inphoto-button-radius);
-          margin: 0 4px;
-          height: 35px;
-          width: 35px;
-          @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-toolbar-padding);
-          border-radius: var(--co-inphoto-border-radius);
-
-          .brush-preview-line {
-            background: var(--co-inphoto-brush-size-preview-color);
-            transition: height 0.05s linear;
-          }
-        }
-
-        .selected {
-          color: var(--co-inphoto-active-button-color);
-          background: var(--co-inphoto-active-button-background);
-          border: 1px solid 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: transparent;
-          color: var(--co-inphoto-button-color);
-          font-size: var(--co-inphoto-button-font-size);
-          padding: var(--co-inphoto-button-padding);
-          font-weight: 500;
-          @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: 10px;
-          }
-        }
-
-        .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: 10px;
-          }
-        }
-      }
-    }
-  }
-}
-
-
-
+@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,55 +1,68 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('cco-catalog-layout') {
-  .co-catalog {
-    .catalog-dialog {
-      z-index: 100;
-      top: 0;
-      left: 85px;
-      right: 0;
-      bottom: 0;
-      position: absolute;
-      overflow-y: scroll;
-      overflow-x: hidden;
-
-      .catalog-container {
-
-        .catalog-dialog-wrapper {
-          display: flex;
-          align-items: center;
-
-          .back-button {
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-          }
-
-          .close-button {
-            display: flex;
-            align-items: center;
-          }
-        }
-
-        .catalog-body {
-          max-height: 100%;
-
-          .catalog-tile-wrapper {
-            display: grid;
-            overflow: hidden;
-
-            .catalog-tile {
-              cursor: pointer;
-              position: relative;
-              display: flex;
-              flex-direction: column;
-              height: 100%;
-              width: 100%;
-              min-height: 150px;
-              
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@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,4 +1,22 @@
-:root {
-  --co-photo-catalog-border-color: #ccc;
-
-}
+.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;
+}

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

@@ -1,59 +1,43 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-catalog-theme') {
-  .co-catalog {
-    .catalog-dialog {
-      background-color: var(--co-inphoto-dialog-background-color);
-      border-left: 1px solid var(--co-photo-catalog-border-color);
-
-      .catalog-container {
-        padding-left: 25px;
-
-        .catalog-dialog-wrapper {
-          padding: 10px;
-
-          .back-button {
-            align-items: center;
-            background: none;
-            box-shadow: none;
-            @include cfg.text();
-            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
-          }
-
-          .close-button {
-            margin-left: auto;
-            background: none;
-            align-items: center;
-            box-shadow: none;
-            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
-          }
-        }
-
-        .catalog-body {
-          max-height: 100%;
-
-          .catalog-tile-wrapper {
-            grid-template-columns: repeat(auto-fit, minmax(10px, 150px));
-            padding: 0;
-            grid-gap: 10px;
-
-            .catalog-tile {
-              p {
-                display: block;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-                font-size: var(--ca-font-size);
-                font-weight: bold;
-                text-shadow: none;
-                text-transform: capitalize;
-                margin: 10px 0;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-catalog-theme') {
+  .co-catalog {
+    font-family: var(--co-inphoto-catalog-font-family);
+    font-size: var(--co-inphoto-catalog-font-size-text);
+
+    .catalog-dialog {
+      background-color: var(--co-inphoto-dialog-background-color);
+      border-left: var(--co-inphoto-catalog-dialog-border-left);
+
+      .catalog-container {
+        .catalog-dialog-wrapper {
+          .back-button {
+            background: none;
+            box-shadow: none;
+            @include cfg.text();
+            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
+          }
+
+          .close-button {
+            background: none;
+            box-shadow: none;
+            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
+          }
+        }
+
+        .catalog-body {
+          .catalog-tile-wrapper {
+            .catalog-tile {
+              p {
+                font-size: var(--co-inphoto-catalog-font-size-text);
+                font-weight: var(--co-inphoto-catalog-tile-text-font-weight);
+                text-shadow: none;
+                text-transform: capitalize;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/component/configuration-side-bar-menu/style/_layout.scss

@@ -1,33 +1,33 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-configuration-side-bar-menu-layout') {
-  .co-configuration-side-bar-menu {
-    .configuration-side-bar-menu {
-      position: absolute;
-      top: var(--co-inphoto-side-bar-menu-position-top);
-      right: var(--co-inphoto-side-bar-menu-position-right);
-      width: var(--co-inphoto-side-bar-menu-width);
-
-      .configuration-side-bar-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .slider-container {
-        width: 100%;
-
-        input {
-          width: 100%;
-        }
-      }
-
-      .buttons {
-        display: flex;
-        gap: 10px;
-        justify-content: space-between;
-        align-items: center;
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-configuration-side-bar-menu-layout') {
+  .co-configuration-side-bar-menu {
+    .configuration-side-bar-menu {
+      position: absolute;
+      top: var(--co-inphoto-configuration-side-bar-menu-position-top);
+      right: var(--co-inphoto-configuration-side-bar-menu-position-right);
+      width: var(--co-inphoto-configuration-side-bar-menu-width);
+
+      .configuration-side-bar-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .slider-container {
+        width: var(--co-inphoto-configuration-side-bar-menu-full-width);
+
+        input {
+          width: var(--co-inphoto-configuration-side-bar-menu-full-width);
+        }
+      }
+
+      .buttons {
+        display: flex;
+        gap: var(--co-inphoto-configuration-side-bar-menu-buttons-gap);
+        justify-content: space-between;
+        align-items: center;
+      }
+    }
+  }
+}

package/lib/component/configuration-side-bar-menu/style/_material-definition.scss

@@ -1,6 +1,10 @@
-:root {
-  --co-inphoto-side-bar-menu-position-top: 10px;
-  --co-inphoto-side-bar-menu-position-right: 10px;
-  --co-inphoto-side-bar-menu-width: 30%;
-  --co-inphoto-side-bar-menu-padding: 15px 25px;
-}
+.co-configuration-side-bar-menu {
+  --co-inphoto-configuration-side-bar-menu-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-configuration-side-bar-menu-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-configuration-side-bar-menu-position-top: 10px;
+  --co-inphoto-configuration-side-bar-menu-position-right: 10px;
+  --co-inphoto-configuration-side-bar-menu-width: 30%;
+  --co-inphoto-configuration-side-bar-menu-padding: 15px 25px;
+  --co-inphoto-configuration-side-bar-menu-full-width: 100%;
+  --co-inphoto-configuration-side-bar-menu-buttons-gap: 10px;
+}

package/lib/component/configuration-side-bar-menu/style/_theme.scss

@@ -2,10 +2,13 @@
 
 @include cfg.export-module('co-configuration-side-bar-menu-theme') {
   .co-configuration-side-bar-menu {
+    font-family: var(--co-inphoto-configuration-side-bar-menu-font-family);
+    font-size: var(--co-inphoto-configuration-side-bar-menu-font-size-text);
+
     .configuration-side-bar-menu {
       background: var(--co-inphoto-dialog-background-color);
       border-radius: var(--co-inphoto-border-radius);
-      padding: var(--co-inphoto-side-bar-menu-padding);
+      padding: var(--co-inphoto-configuration-side-bar-menu-padding);
 
       .configuration-side-bar-header {
         .header {