@uniformdev/design-system 19.92.3-alpha.7 → 19.94.0

package/dist/esm/index.js

@@ -16527,7 +16527,7 @@ var input2 = css76`
   appearance: none;
   box-sizing: border-box;
   background: var(--white);
-  border: 1px solid var(--white);
+  border: 1px solid var(--gray-200);
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
   font-size: var(--fs-sm);
@@ -16548,11 +16548,15 @@ var input2 = css76`
   &:focus,
   &:focus-within {
     border-radius: var(--rounded-md);
-    box-shadow: none;
-    border: 1px solid var(--gray-300);
+    box-shadow: var(--elevation-100);
+    border: 1px solid var(--accent-dark-active);
     outline: none;
   }
 
+  &:hover {
+    border: 1px solid var(--accent-dark-hover);
+  }
+
   &:disabled,
   &:disabled::placeholder,
   &:disabled:hover {
@@ -16595,7 +16599,6 @@ var inputIcon2 = css76`
 `;
 var inputToggleLabel2 = css76`
   align-items: center;
-  background: var(--white);
   cursor: pointer;
   display: inline-flex;
   gap: var(--spacing-sm);
@@ -16606,10 +16609,10 @@ var inputToggleLabel2 = css76`
 `;
 var toggleInput2 = css76`
   appearance: none;
-  border: 1px solid var(--gray-300);
+  border: 1px solid var(--gray-200);
   background: var(--white);
-  width: var(--spacing-md);
-  height: var(--spacing-md);
+  width: var(--spacing-base);
+  height: var(--spacing-base);
   transition: background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
@@ -16624,19 +16627,23 @@ var toggleInput2 = css76`
   }
 
   &:where([type='checkbox']) {
-    border-radius: var(--rounded-md);
+    border-radius: var(--rounded-sm);
   }
 
   &:checked,
   &:checked:hover,
   &:checked:focus {
-    background: var(--brand-secondary-3)
-      url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23fff' /%3E%3C/svg%3E")
+    background: var(--accent-dark-active)
+      url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23fff' /%3E%3C/svg%3E")
       no-repeat center center;
-    border-color: var(--brand-secondary-3);
+    border-color: var(--accent-dark-active);
     color: var(--white);
   }
 
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
+
   &:disabled {
     cursor: not-allowed;
     color: var(--gray-400);
@@ -16644,7 +16651,7 @@ var toggleInput2 = css76`
   }
 `;
 var inlineLabel2 = css76`
-  padding-left: var(--spacing-lg);
+  padding-left: var(--spacing-md);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
   translate: 0 1px; // brings the span into central alignment
@@ -16689,9 +16696,9 @@ var dataConnectButton = css76`
   appearance: none;
   box-sizing: border-box;
   background-color: var(--white);
-  border: 1px solid var(--brand-secondary-3);
+  border: 1px solid var(--primary-action-default);
   border-radius: var(--rounded-md);
-  color: var(--brand-secondary-3);
+  color: var(--primary-action-default);
   display: flex;
   padding: var(--spacing-sm);
   position: relative;
@@ -16983,9 +16990,7 @@ var ParameterMenuButton = forwardRef12(
 import { css as css80 } from "@emotion/react";
 var emptyParameterShell = css80`
   border-radius: var(--rounded-sm);
-  background: var(--white);
   flex-grow: 1;
-  padding: var(--spacing-xs);
   position: relative;
   max-width: 100%;
 `;
@@ -18769,20 +18774,20 @@ var editorPlaceholder = css85`
 `;
 var editorInput = css85`
   background: var(--white);
-  border: 1px solid var(--white);
+  border: 1px solid var(--gray-200);
   border-radius: var(--rounded-sm);
   color: var(--gray-900);
   flex-grow: 1;
   font-size: var(--fs-base);
   line-height: 1.2;
   min-height: 2rem;
-  padding: var(--spacing-xs) var(--spacing-sm);
+  padding: var(--spacing-sm);
 
   &:focus,
   &:focus-within {
     border-radius: var(--rounded-md);
-    box-shadow: none;
-    border: 1px solid var(--gray-300);
+    box-shadow: var(--elevation-100);
+    border: 1px solid var(--accent-dark-hover);
     outline: none;
   }
 `;
@@ -18908,6 +18913,9 @@ var RichText = ({
       removeUpdateListener();
     };
   }, [editor, onChange]);
+  useEffect15(() => {
+    editor.setEditable(!readOnly);
+  }, [editor, readOnly]);
   return /* @__PURE__ */ jsxs71(Fragment18, { children: [
     readOnly ? null : /* @__PURE__ */ jsx106(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ jsxs71("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [

package/dist/index.js

@@ -18332,7 +18332,7 @@ var input2 = import_react102.css`
   appearance: none;
   box-sizing: border-box;
   background: var(--white);
-  border: 1px solid var(--white);
+  border: 1px solid var(--gray-200);
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
   font-size: var(--fs-sm);
@@ -18353,11 +18353,15 @@ var input2 = import_react102.css`
   &:focus,
   &:focus-within {
     border-radius: var(--rounded-md);
-    box-shadow: none;
-    border: 1px solid var(--gray-300);
+    box-shadow: var(--elevation-100);
+    border: 1px solid var(--accent-dark-active);
     outline: none;
   }
 
+  &:hover {
+    border: 1px solid var(--accent-dark-hover);
+  }
+
   &:disabled,
   &:disabled::placeholder,
   &:disabled:hover {
@@ -18400,7 +18404,6 @@ var inputIcon2 = import_react102.css`
 `;
 var inputToggleLabel2 = import_react102.css`
   align-items: center;
-  background: var(--white);
   cursor: pointer;
   display: inline-flex;
   gap: var(--spacing-sm);
@@ -18411,10 +18414,10 @@ var inputToggleLabel2 = import_react102.css`
 `;
 var toggleInput2 = import_react102.css`
   appearance: none;
-  border: 1px solid var(--gray-300);
+  border: 1px solid var(--gray-200);
   background: var(--white);
-  width: var(--spacing-md);
-  height: var(--spacing-md);
+  width: var(--spacing-base);
+  height: var(--spacing-base);
   transition: background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
@@ -18429,19 +18432,23 @@ var toggleInput2 = import_react102.css`
   }
 
   &:where([type='checkbox']) {
-    border-radius: var(--rounded-md);
+    border-radius: var(--rounded-sm);
   }
 
   &:checked,
   &:checked:hover,
   &:checked:focus {
-    background: var(--brand-secondary-3)
-      url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23fff' /%3E%3C/svg%3E")
+    background: var(--accent-dark-active)
+      url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23fff' /%3E%3C/svg%3E")
       no-repeat center center;
-    border-color: var(--brand-secondary-3);
+    border-color: var(--accent-dark-active);
     color: var(--white);
   }
 
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
+
   &:disabled {
     cursor: not-allowed;
     color: var(--gray-400);
@@ -18449,7 +18456,7 @@ var toggleInput2 = import_react102.css`
   }
 `;
 var inlineLabel2 = import_react102.css`
-  padding-left: var(--spacing-lg);
+  padding-left: var(--spacing-md);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
   translate: 0 1px; // brings the span into central alignment
@@ -18494,9 +18501,9 @@ var dataConnectButton = import_react102.css`
   appearance: none;
   box-sizing: border-box;
   background-color: var(--white);
-  border: 1px solid var(--brand-secondary-3);
+  border: 1px solid var(--primary-action-default);
   border-radius: var(--rounded-md);
-  color: var(--brand-secondary-3);
+  color: var(--primary-action-default);
   display: flex;
   padding: var(--spacing-sm);
   position: relative;
@@ -18801,9 +18808,7 @@ init_emotion_jsx_shim();
 var import_react109 = require("@emotion/react");
 var emptyParameterShell = import_react109.css`
   border-radius: var(--rounded-sm);
-  background: var(--white);
   flex-grow: 1;
-  padding: var(--spacing-xs);
   position: relative;
   max-width: 100%;
 `;
@@ -20562,20 +20567,20 @@ var editorPlaceholder = import_react121.css`
 `;
 var editorInput = import_react121.css`
   background: var(--white);
-  border: 1px solid var(--white);
+  border: 1px solid var(--gray-200);
   border-radius: var(--rounded-sm);
   color: var(--gray-900);
   flex-grow: 1;
   font-size: var(--fs-base);
   line-height: 1.2;
   min-height: 2rem;
-  padding: var(--spacing-xs) var(--spacing-sm);
+  padding: var(--spacing-sm);
 
   &:focus,
   &:focus-within {
     border-radius: var(--rounded-md);
-    box-shadow: none;
-    border: 1px solid var(--gray-300);
+    box-shadow: var(--elevation-100);
+    border: 1px solid var(--accent-dark-hover);
     outline: none;
   }
 `;
@@ -20701,6 +20706,9 @@ var RichText = ({
       removeUpdateListener();
     };
   }, [editor, onChange]);
+  (0, import_react122.useEffect)(() => {
+    editor.setEditable(!readOnly);
+  }, [editor, readOnly]);
   return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
     readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.92.3-alpha.7+a4ee2d638",
+  "version": "19.94.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,8 +23,8 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",
-    "@uniformdev/canvas": "^19.92.3-alpha.7+a4ee2d638",
-    "@uniformdev/richtext": "^19.92.3-alpha.7+a4ee2d638",
+    "@uniformdev/canvas": "^19.94.0",
+    "@uniformdev/richtext": "^19.94.0",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.32",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a4ee2d638902c3fb978d7c7344a1dbc52ec25912"
+  "gitHead": "83b33647cd09dafcd4ea23012c4e87a45b71c0af"
 }