@colijnit/inphoto 300.1.7 → 300.1.8

package/lib/component/ai-prompt/style/_layout.scss

@@ -1,86 +1,76 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-ai-prompt-layout') {
-  .co-ai-prompt {
-    .custom-prompt-container {
-      .custom-height {
-        height: 100px;
-        overflow: hidden;
-        .input-textarea-wrapper {
-          label {
-            top: 20%;
-          }
-        }
-      }
-
-      .hasvalue {
-        .input-textarea-wrapper {
-          label {
-            top: 5%;
-          }
-        }
-      }
-
-      .prompt-mode {
-        margin: 10px auto;
-        display: flex;
-        align-items: center;
-
-
-        .prompt-mode-switch {
-          margin-right: 15px;
-
-          .switch {
-            position: relative;
-            display: inline-block;
-            width: 44px;
-            height: 24px;
-
-            input {
-              opacity: 0;
-              width: 0;
-              height: 0;
-
-              &:checked + .slider {
-
-                &:before {
-                  -webkit-transform: translateX(20px);
-                  -ms-transform: translateX(20px);
-                  transform: translateX(20px);
-                }
-              }
-            }
-          }
-
-          .slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            transition: 0.4s;
-
-            &:before {
-              position: absolute;
-              content: "";
-              height: 16px;
-              width: 16px;
-              left: 4px;
-              bottom: 4px;
-              transition: 0.4s;
-            }
-
-            &.round {
-              border-radius: 34px;
-
-              &:before {
-                border-radius: 50%;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-ai-prompt-layout') {
+  .co-ai-prompt {
+    .custom-prompt-container {
+      .custom-height {
+        height: var(--co-inphoto-ai-prompt-textarea-height);
+        overflow: hidden;
+        .input-textarea-wrapper {
+          label {
+            top: var(--co-inphoto-ai-prompt-textarea-label-top-empty);
+          }
+        }
+      }
+
+      .hasvalue {
+        .input-textarea-wrapper {
+          label {
+            top: var(--co-inphoto-ai-prompt-textarea-label-top-filled);
+          }
+        }
+      }
+
+      .prompt-mode {
+        margin: var(--co-inphoto-ai-prompt-mode-margin);
+        display: flex;
+        align-items: center;
+
+
+        .prompt-mode-switch {
+          margin-right: var(--co-inphoto-ai-prompt-mode-switch-margin-right);
+
+          .switch {
+            position: var(--co-inphoto-ai-prompt-switch-position);
+            display: inline-block;
+            width: var(--co-inphoto-ai-prompt-switch-width);
+            height: var(--co-inphoto-ai-prompt-switch-height);
+
+            input {
+              opacity: var(--co-inphoto-ai-prompt-switch-input-opacity);
+              width: var(--co-inphoto-ai-prompt-switch-input-size);
+              height: var(--co-inphoto-ai-prompt-switch-input-size);
+
+              &:checked + .slider {
+
+                &:before {
+                  -webkit-transform: translateX(var(--co-inphoto-ai-prompt-switch-thumb-travel));
+                  -ms-transform: translateX(var(--co-inphoto-ai-prompt-switch-thumb-travel));
+                  transform: translateX(var(--co-inphoto-ai-prompt-switch-thumb-travel));
+                }
+              }
+            }
+          }
+
+          .slider {
+            position: var(--co-inphoto-ai-prompt-switch-slider-position);
+            cursor: pointer;
+            top: var(--co-inphoto-ai-prompt-switch-slider-inset);
+            left: var(--co-inphoto-ai-prompt-switch-slider-inset);
+            right: var(--co-inphoto-ai-prompt-switch-slider-inset);
+            bottom: var(--co-inphoto-ai-prompt-switch-slider-inset);
+
+            &:before {
+              position: var(--co-inphoto-ai-prompt-switch-slider-position);
+              content: "";
+              height: var(--co-inphoto-ai-prompt-switch-thumb-size);
+              width: var(--co-inphoto-ai-prompt-switch-thumb-size);
+              left: var(--co-inphoto-ai-prompt-switch-thumb-inset);
+              bottom: var(--co-inphoto-ai-prompt-switch-thumb-inset);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/component/ai-prompt/style/_material-definition.scss

@@ -1,6 +1,38 @@
-:root {
-  --co-inphoto-prompt-spacer-color: #D9D9DF;
-  --co-inphoto-input-required-error-color: #dc3545;
-  --co-inphoto-input-required-error-background: rgba(220, 53, 69, 0.25);
-  --co-inphoto-prompt-container-padding:  15px;
-}
+.co-ai-prompt {
+  --co-inphoto-ai-prompt-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-ai-prompt-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-ai-prompt-spacer-color: #D9D9DF;
+  --co-inphoto-ai-prompt-required-error-color: #dc3545;
+  --co-inphoto-ai-prompt-required-error-background: rgba(220, 53, 69, 0.25);
+  --co-inphoto-ai-prompt-container-padding: 15px;
+  --co-inphoto-ai-prompt-container-margin: 20px auto;
+
+  --co-inphoto-ai-prompt-text-margin-bottom: 10px;
+  --co-inphoto-ai-prompt-spacer-margin: 0 4px;
+
+  --co-inphoto-ai-prompt-textarea-height: 100px;
+  --co-inphoto-ai-prompt-textarea-label-top-empty: 20%;
+  --co-inphoto-ai-prompt-textarea-label-top-filled: 5%;
+
+  --co-inphoto-ai-prompt-mode-margin: 10px auto;
+  --co-inphoto-ai-prompt-mode-switch-margin-right: 15px;
+
+  --co-inphoto-ai-prompt-switch-width: 44px;
+  --co-inphoto-ai-prompt-switch-height: 24px;
+  --co-inphoto-ai-prompt-switch-radius: 34px;
+  --co-inphoto-ai-prompt-switch-transition-duration: 0.4s;
+  --co-inphoto-ai-prompt-switch-focus-shadow-spread: 0 0 1px;
+  --co-inphoto-ai-prompt-switch-position: relative;
+  --co-inphoto-ai-prompt-switch-slider-position: absolute;
+
+  --co-inphoto-ai-prompt-switch-input-opacity: 0;
+  --co-inphoto-ai-prompt-switch-input-size: 0;
+  --co-inphoto-ai-prompt-switch-slider-inset: 0;
+
+  --co-inphoto-ai-prompt-switch-thumb-size: 16px;
+  --co-inphoto-ai-prompt-switch-thumb-inset: 4px;
+  --co-inphoto-ai-prompt-switch-thumb-travel: 20px;
+  --co-inphoto-ai-prompt-switch-thumb-radius: 50%;
+  --co-inphoto-ai-prompt-mode-active-font-weight: bold;
+  --co-inphoto-ai-prompt-required-border: 1px solid var(--co-inphoto-ai-prompt-required-error-color);
+}

package/lib/component/ai-prompt/style/_theme.scss

@@ -1,67 +1,78 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-ai-prompt-theme') {
-  .co-ai-prompt {
-    .custom-prompt-container {
-      margin: 20px auto;
-      background: var(--co-inphoto-background-white);
-      border-radius: var(--co-inphoto-border-radius);
-      padding: var(--co-inphoto-prompt-container-padding);
-
-      .prompt-head {
-        @include cfg.sub-header-text();
-      }
-
-      .prompt-text {
-        @include cfg.text();
-        margin-bottom: 10px;
-      }
-
-      .prompt-mode {
-        .prompt-mode-text {
-          font-size: var(--co-inphoto-font-size-label);
-
-          .active {
-            font-weight: bold;
-          }
-
-          .spacer {
-            margin: 0 4px;
-            color: var(--co-inphoto-prompt-spacer-color);
-          }
-        }
-
-        .prompt-mode-switch {
-
-          .switch {
-
-            input {
-              &:checked + .slider {
-                background-color: var(--co-inphoto-accent-color);
-              }
-
-              &:focus + .slider {
-                box-shadow: 0 0 1px var(--co-inphoto-accent-color);
-              }
-            }
-          }
-
-          .slider {
-            background-color: var(--co-inphoto-prompt-spacer-color);
-
-            &:before {
-              background-color: var(--co-inphoto-background-white);
-            }
-          }
-        }
-      }
-
-      .required-input-empty {
-        border: 1px solid var(--co-inphoto-input-required-error-color);
-        background-color: var(--co-inphoto-input-required-error-background);
-      }
-    }
-  }
-}
-
-
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-ai-prompt-theme') {
+  .co-ai-prompt {
+    font-family: var(--co-inphoto-ai-prompt-font-family);
+    font-size: var(--co-inphoto-ai-prompt-font-size-text);
+
+    .custom-prompt-container {
+      margin: var(--co-inphoto-ai-prompt-container-margin);
+      background: var(--co-inphoto-background-white);
+      border-radius: var(--co-inphoto-border-radius);
+      padding: var(--co-inphoto-ai-prompt-container-padding);
+
+      .prompt-head {
+        @include cfg.sub-header-text();
+      }
+
+      .prompt-text {
+        @include cfg.text();
+        margin-bottom: var(--co-inphoto-ai-prompt-text-margin-bottom);
+      }
+
+      .prompt-mode {
+        .prompt-mode-text {
+          font-size: var(--co-inphoto-font-size-label);
+
+          .active {
+            font-weight: var(--co-inphoto-ai-prompt-mode-active-font-weight);
+          }
+
+          .spacer {
+            margin: var(--co-inphoto-ai-prompt-spacer-margin);
+            color: var(--co-inphoto-ai-prompt-spacer-color);
+          }
+        }
+
+        .prompt-mode-switch {
+
+          .switch {
+
+            input {
+              &:checked + .slider {
+                background-color: var(--co-inphoto-accent-color);
+              }
+
+              &:focus + .slider {
+                box-shadow: var(--co-inphoto-ai-prompt-switch-focus-shadow-spread) var(--co-inphoto-accent-color);
+              }
+            }
+          }
+
+          .slider {
+            background-color: var(--co-inphoto-ai-prompt-spacer-color);
+            transition: var(--co-inphoto-ai-prompt-switch-transition-duration);
+
+            &:before {
+              background-color: var(--co-inphoto-background-white);
+              transition: var(--co-inphoto-ai-prompt-switch-transition-duration);
+            }
+
+            &.round {
+              border-radius: var(--co-inphoto-ai-prompt-switch-radius);
+
+              &:before {
+                border-radius: var(--co-inphoto-ai-prompt-switch-thumb-radius);
+              }
+            }
+          }
+        }
+      }
+
+      .required-input-empty {
+        border: var(--co-inphoto-ai-prompt-required-border);
+        background-color: var(--co-inphoto-ai-prompt-required-error-background);
+      }
+    }
+  }
+}

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

@@ -1,65 +1,63 @@
-@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-toolbar-position-top);
-      left: var(--co-inphoto-toolbar-position-left);
-      z-index: var(--co-inphoto-toolbar-z-index);
-      border-radius: var(--co-inphoto-border-radius);
-      justify-content: space-around;
-
-      .modus-indicator, .tool-selection, .actions {
-        display: flex;
-        align-items: center;
-        margin: 0 5px;
-        position: relative;
-
-        .brush-size-container {
-          position: absolute;
-          top: 50px;
-
-          .brush-preview {
-            display: flex;
-            align-items: center;
-            height: 60px;
-            overflow: hidden;
-          }
-
-          .brush-preview-line {
-            width: 100%;
-            border-radius: 999px;
-          }
-
-          .brush-size {
-            display: flex;
-            justify-content: space-between;
-
-            .brush-size-value {
-              width: 40px;
-            }
-
-            .brush-size-slider {
-              width: 150px;
-            }
-          }
-        }
-      }
-
-      .actions {
-        gap: 20px;
-
-        .cancel-button, .action-button {
-          height: 35px;
-          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;
+        }
+      }
+    }
+  }
+}

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

@@ -1,11 +1,37 @@
-:root {
-  --co-inphoto-toolbar-info-icon-size: 28px;
-  --co-inphoto-toolbar-spacer-color: #D9D9DF;
-
-  --co-inphoto-toolbar-position-top: 50px;
-  --co-inphoto-toolbar-position-left: 25%;
-  --co-inphoto-toolbar-z-index: 25;
-  --co-inphoto-toolbar-padding: 10px;
-
-  --co-inphoto-brush-size-preview-color: #FF0000;
-}
+.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;
+}