@crystallize/design-system 1.14.0 → 1.15.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @crystallize/design-system
 
+## 1.15.0
+
+### Minor Changes
+
+- af5e94e1: Added custom variables for rich text editor padding. This will enable easy override from the consumer.
+
 ## 1.14.0
 
 ### Minor Changes

package/dist/index.css

@@ -2258,11 +2258,12 @@ button {
   overflow: auto;
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
   padding-left: 1rem;
   padding-right: 0.5rem;
   vertical-align: middle;
+  padding-top: var(--c-rte-toolbar-pt, 0.25rem);
+  padding-left: var(--c-rte-toolbar-pl, 0.5rem);
+  padding-right: var(--c-rte-toolbar-pr, 0.5rem);
 }
 .c-rte-toolbar__inner {
   display: flex;
@@ -2519,22 +2520,6 @@ button {
   right: 2px;
   top: 2px;
 }
-.c-rich-text-editor .c-rte-contenteditable-root {
-  position: relative;
-  display: block;
-  border-width: 0px;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-top: 0px !important;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  outline-width: 0px;
-  tab-size: 1;
-  padding-bottom: 8px;
-  min-height: calc(var(--c-rte-min-height) - 8px);
-}
 .c-rich-text-editor [contenteditable] pre {
   line-height: 1.1;
   color: #fff;
@@ -2645,6 +2630,26 @@ button {
     visibility: hidden;
   }
 }
+.c-rte-contenteditable-root {
+  position: relative;
+  display: block;
+  border-width: 0px;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-top: 0px !important;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  outline-width: 0px;
+  tab-size: 1;
+  padding-bottom: 8px;
+  min-height: calc(var(--c-rte-min-height) - 8px);
+  padding-top: var(--c-rte-content-pt, 0);
+  padding-left: var(--c-rte-content-pl, 1.5rem);
+  padding-right: var(--c-rte-content-pr, 1.5rem);
+  padding-bottom: var(--c-rte-content-pb, 8px);
+}
 
 /* src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.css */
 .c-rte-link-editor {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/rich-text-editor/plugins/ToolbarPlugin/index.css

@@ -1,5 +1,10 @@
 .c-rte-toolbar {
-  @apply flex h-12 w-full justify-between overflow-auto rounded-tl-md rounded-tr-md py-1 pl-4 pr-2 align-middle;
+  @apply flex h-12 w-full justify-between overflow-auto rounded-tl-md rounded-tr-md pl-4 pr-2 align-middle;
+
+  /* Allow for customization from the outside */
+  padding-top: var(--c-rte-toolbar-pt, 0.25rem);
+  padding-left: var(--c-rte-toolbar-pl, 0.5rem);
+  padding-right: var(--c-rte-toolbar-pr, 0.5rem);
 
   &__inner {
     @apply flex;

package/src/rich-text-editor/rich-text-editor.css

@@ -53,13 +53,6 @@
     top: 2px;
   }
 
-  .c-rte-contenteditable-root {
-    @apply relative block border-0 px-6 py-2 !pt-0 text-sm outline-0;
-    tab-size: 1;
-    padding-bottom: 8px;
-    min-height: calc(var(--c-rte-min-height) - 8px);
-  }
-
   [contenteditable] {
     pre {
       line-height: 1.1;
@@ -167,3 +160,16 @@
     }
   }
 }
+
+.c-rte-contenteditable-root {
+  @apply relative block border-0 px-6 py-2 !pt-0 text-sm outline-0;
+  tab-size: 1;
+  padding-bottom: 8px;
+  min-height: calc(var(--c-rte-min-height) - 8px);
+
+  /* Allow for customization from the outside */
+  padding-top: var(--c-rte-content-pt, 0);
+  padding-left: var(--c-rte-content-pl, 1.5rem);
+  padding-right: var(--c-rte-content-pr, 1.5rem);
+  padding-bottom: var(--c-rte-content-pb, 8px);
+}