@pareto-engineering/design-system 4.0.0-alpha.39 → 4.0.0-alpha.41

package/src/ui/f/fields/EditorInput/styles.scss

@@ -0,0 +1,119 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable max-nesting-depth -- required here */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+$default-gap: calc(var(--gap) / 2);
+$default-padding: .55em .75em;
+$default-border: 1px solid var(--outline-inputs);
+$default-input-border-radius: var(--theme-default-input-border-radius);
+$default-border: var(--theme-default-input-border);
+$focus-border: var(--theme-focus-input-border);
+$active-background: var(--hard-background-inputs);
+$default-background: var(--background-inputs);
+$disabled-background: var(--background-inputs-30);
+
+.#{bem.$base}.editor-input {
+  &.#{bem.$base}.input-wrapper {
+    display: flex;
+    flex-direction: column;
+
+    > .#{bem.$base}.toolbar {
+      display: flex;
+      gap: $default-gap;
+      margin-bottom: .25em;
+
+      > .group {
+        > button {
+          background: $default-background;
+          border: $default-border;
+          padding: $default-padding;
+
+          &.active {
+            background-color: $active-background;
+          }
+        }
+      }
+
+      .flip {
+        transform: scaleX(-1);
+      }
+    }
+
+    &:not(.disabled) {
+      &:hover,
+      &:focus,
+      &:active {
+        > .textarea {
+          border: $focus-border;
+        }
+      }
+    }
+
+    &.disabled {
+      > .textarea {
+        background: $disabled-background;
+        color: var(--metadata);
+        cursor: not-allowed;
+      }
+    }
+
+    > .content-editable {
+      background: $default-background;
+      border: $default-border;
+      border-radius: $default-input-border-radius;
+      color: var(--y);
+      height: var(--rows);
+      outline: none;
+      overflow: auto;
+      padding: $default-padding;
+      resize: var(--resize);
+      width: 100%;
+
+      li:has(ol, ul) {
+        list-style-type: none;
+      }
+
+      p,
+      span,
+      strong,
+      em,
+      li {
+        &.underlined {
+          text-decoration: underline;
+
+          &.strikethrough {
+            text-decoration: underline line-through;
+          }
+        }
+
+        &.strikethrough {
+          text-decoration: line-through;
+        }
+
+        &.italic {
+          font-style: italic;
+        }
+      }
+
+      :first-child {
+        margin-top: 0;
+      }
+
+      &::placeholder {
+        color: var(--metadata);
+      }
+    }
+  }
+
+  > .tree-view-output {
+    background: $default-background;
+    border: $default-border;
+    border-radius: $default-input-border-radius;
+    max-height: 20em;
+    overflow: auto;
+    padding: $default-padding;
+  }
+}

package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx

@@ -114,6 +114,7 @@ const Combobox = ({
           baseClassName,
           componentClassName,
           userClassName,
+          `y-${color}`,
         ]
           .filter((e) => e)
           .join(' ')}

package/src/ui/f/fields/QueryCombobox/styles.scss

@@ -14,7 +14,9 @@ $default-border: var(--theme-default-input-border);
 $hover-border: var(--theme-hover-input-border);
 $focus-border: var(--theme-focus-input-border);
 $default-background: var(--background-inputs);
+$on-default-background: var(--paragraph);
 $disabled-background: var(--background-inputs-30);
+$on-disabled-background: var(--on-background-inputs-30);
 
 .#{bem.$base}.combobox,
 .#{bem.$base}.multiple-combobox {
@@ -74,7 +76,7 @@ $disabled-background: var(--background-inputs-30);
       background: $default-background;
       border: $default-border;
       border-radius: calc(var(--theme-default-border-radius) / 2);
-      color: var(--on-y);
+      color: $on-default-background;
       outline: none;
       padding: $default-input-padding;
 
@@ -84,6 +86,7 @@ $disabled-background: var(--background-inputs-30);
 
       &:disabled {
         background-color: $disabled-background;
+        color: $on-disabled-background;
       }
 
       &:not(:disabled) {

package/src/ui/f/fields/index.js

@@ -8,3 +8,4 @@ export { QuerySelect } from './QuerySelect'
 export { Checkbox } from './Checkbox'
 export { QueryChoices } from './QueryChoices'
 export { LinkInput } from './LinkInput'
+export { EditorInput } from './EditorInput'