@crystallize/design-system 1.13.0 → 1.14.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @crystallize/design-system
 
+## 1.14.0
+
+### Minor Changes
+
+- 97f6c34: Clean up the visuals of the code block in rich text editor
+
+## 1.13.2
+
+### Patch Changes
+
+- a86c6794: It was found that all of a sudden storybook build time increased significantly. The issue was isolated to update on the pnpm.lock file. Since a lot of packages changed the cause for the issue was not found. To fix this, the pnpm.lock file from before the issue was taken and packages that were changed after that were installed again. Thus the build time to back to just a few seconds.
+
+## 1.13.1
+
+### Patch Changes
+
+- 1fb6f91: Fix typo in table actions menu
+
 ## 1.13.0
 
 ### Minor Changes

package/dist/index.css

@@ -2145,58 +2145,66 @@ button {
 
 /* src/rich-text-editor/plugins/CodeActionMenuPlugin/index.css */
 .c-rte-code-action-menu-container {
-  height: 35.8px;
-  font-size: 10px;
-  color: rgba(0, 0, 0, 0.5);
+  height: 37px;
   position: absolute;
   display: flex;
   align-items: center;
   flex-direction: row;
   user-select: none;
+  border-radius: 0.375rem;
+  background-color: rgb(var(--c-color-gray-100-800) / 0.75);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
 }
 .c-rte-code-highlight-language {
   margin-right: 4px;
 }
 .c-rte-code-button {
+  border-radius: 0.125rem;
+  padding: 0.25rem;
   border: 1px solid transparent;
-  border-radius: 4px;
-  padding: 4px;
   background: none;
   cursor: pointer;
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  color: rgba(0, 0, 0, 0.5);
   text-transform: uppercase;
 }
 .c-rte-code-button:hover {
-  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-color: rgb(var(--c-color-gray-900-50) / 0.3);
   opacity: 0.9;
 }
 .c-rte-code-button:active {
-  background-color: rgba(223, 232, 250);
-  border: 1px solid rgba(0, 0, 0, 0.45);
+  border-color: rgb(var(--c-color-gray-900-50) / 0.5);
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
 }
 .c-rte-code-button__icon {
   height: 16px;
   width: 16px;
   opacity: 0.6;
   display: flex;
-  color: rgba(0, 0, 0, 0.5);
   background-size: contain;
+  color: rgb(var(--c-color-gray));
 }
 .c-rte-prettier-wrapper {
   position: relative;
 }
 .c-rte-code-error-tips {
-  padding: 5px;
-  border-radius: 4px;
-  color: #fff;
-  background: #222;
-  margin-top: 4px;
   position: absolute;
+  right: 0px;
   top: 26px;
-  right: 0;
+  margin-top: 0.5rem;
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-gray-200-700) / var(--tw-bg-opacity));
+  padding: 0.75rem;
+  --tw-text-opacity: 1;
+  color: rgb(var(--c-color-gray-900-50) / var(--tw-text-opacity));
 }
 
 /* src/rich-text-editor/plugins/DraggableBlockPlugin/index.css */
@@ -2527,7 +2535,7 @@ button {
   padding-bottom: 8px;
   min-height: calc(var(--c-rte-min-height) - 8px);
 }
-.c-rich-text-editor pre {
+.c-rich-text-editor [contenteditable] pre {
   line-height: 1.1;
   color: #fff;
   margin: 0;
@@ -2539,41 +2547,21 @@ button {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-.c-rich-text-editor pre::-webkit-scrollbar {
+.c-rich-text-editor [contenteditable] pre::-webkit-scrollbar {
   background: transparent;
   width: 10px;
 }
-.c-rich-text-editor pre::-webkit-scrollbar-thumb {
+.c-rich-text-editor [contenteditable] pre::-webkit-scrollbar-thumb {
   background: #999;
 }
-.c-rich-text-editor [role=separator] {
-  height: 1px;
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-200-700) / var(--tw-bg-opacity));
-}
-.c-rich-text-editor .ltr {
-  text-align: left;
-}
-.c-rich-text-editor .rtl {
-  text-align: right;
-}
-.c-rich-text-editor button.item i {
-  opacity: 0.6;
-}
-.c-rich-text-editor button.item.dropdown-item-active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-.c-rich-text-editor button.item.dropdown-item-active i {
-  opacity: 1;
-}
-.c-rich-text-editor hr {
+.c-rich-text-editor [contenteditable] hr {
   padding: 4px 0;
   border: 1px solid red;
   border: none;
   margin: 1em 0;
   cursor: pointer;
 }
-.c-rich-text-editor hr:after {
+.c-rich-text-editor [contenteditable] hr:after {
   content: "";
   display: block;
   height: 1px;
@@ -2582,10 +2570,24 @@ button {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
 }
-.c-rich-text-editor hr.selected {
+.c-rich-text-editor [contenteditable] hr.selected {
   outline: 2px solid rgb(60, 132, 244);
   user-select: none;
 }
+.c-rich-text-editor [role=separator] {
+  height: 1px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-gray-200-700) / var(--tw-bg-opacity));
+}
+.c-rich-text-editor .ltr {
+  text-align: left;
+}
+.c-rich-text-editor .rtl {
+  text-align: right;
+}
+.c-rich-text-editor button.item i {
+  opacity: 0.6;
+}
 .c-rich-text-editor .TableNode__contentEditable {
   min-height: 20px;
   border: 0px;