@x-plat/design-system 0.10.0 → 0.12.0

package/dist/components/Editor/index.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 /* src/components/Editor/editor.scss */
 .lib-xplat-editor {
   display: flex;
@@ -284,3 +286,101 @@
   color: var(--semantic-text-inverse);
   border-color: var(--semantic-surface-brand-default);
 }
+.lib-xplat-editor__editable .align-center {
+  text-align: center;
+}
+.lib-xplat-editor__editable .align-right {
+  text-align: right;
+}
+.lib-xplat-editor__editable ul.checklist {
+  list-style: none;
+  padding-left: var(--spacing-space-2);
+}
+.lib-xplat-editor__editable ul.checklist > li {
+  position: relative;
+  padding-left: var(--spacing-space-6);
+  cursor: default;
+}
+.lib-xplat-editor__editable ul.checklist > li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.25em;
+  width: 1em;
+  height: 1em;
+  border: 1px solid var(--semantic-border-tertiary);
+  border-radius: var(--spacing-radius-sm);
+  background-color: var(--semantic-surface-neutral-primary);
+  cursor: pointer;
+}
+.lib-xplat-editor__editable ul.checklist > li[data-checked=true] {
+  color: var(--semantic-text-tertiary);
+  text-decoration: line-through;
+}
+.lib-xplat-editor__editable ul.checklist > li[data-checked=true]::before {
+  content: "\2713";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-color: var(--semantic-surface-brand-default);
+  background-color: var(--semantic-surface-brand-default);
+  color: var(--semantic-text-inverse);
+  font-size: 0.75em;
+  line-height: 1;
+}
+.lib-xplat-editor__editable mark {
+  background-color: var(--semantic-surface-warning-subtle);
+  color: var(--semantic-text-primary);
+  border-radius: var(--spacing-radius-sm);
+  padding: 0 2px;
+}
+.lib-xplat-editor__editable table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--spacing-space-3) 0;
+  font-family: var(--semantic-typo-label-2-m-font);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
+}
+.lib-xplat-editor__editable table th,
+.lib-xplat-editor__editable table td {
+  border: 1px solid var(--semantic-border-primary);
+  padding: var(--spacing-space-2) var(--spacing-space-3);
+  text-align: left;
+  vertical-align: top;
+  min-width: 3em;
+}
+.lib-xplat-editor__editable table th {
+  background-color: var(--semantic-surface-neutral-secondary);
+  font-weight: var(--semantic-typo-label-2-sb-weight);
+}
+.lib-xplat-editor__lang {
+  margin-left: auto;
+  border: 1px solid var(--semantic-border-primary);
+  border-radius: var(--spacing-radius-sm);
+  background-color: var(--semantic-surface-neutral-primary);
+  color: var(--semantic-text-secondary);
+  padding: 0 var(--spacing-space-1);
+  font-family: var(--semantic-typo-caption-2-r-font);
+  font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
+  cursor: pointer;
+}
+.lib-xplat-editor__editable pre .tok-keyword {
+  color: var(--semantic-text-link);
+  font-weight: var(--semantic-typo-label-2-sb-weight);
+}
+.lib-xplat-editor__editable pre .tok-string {
+  color: var(--semantic-text-success);
+}
+.lib-xplat-editor__editable pre .tok-number {
+  color: var(--semantic-text-accent-blue);
+}
+.lib-xplat-editor__editable pre .tok-comment {
+  color: var(--semantic-text-tertiary);
+  font-style: italic;
+}

package/dist/components/Editor/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-type EditorToolbarItem = "bold" | "italic" | "underline" | "strikethrough" | "code" | "heading" | "list" | "ordered-list" | "blockquote" | "code-block" | "link" | "image" | "divider";
+type EditorToolbarItem = "bold" | "italic" | "underline" | "strikethrough" | "code" | "heading-1" | "heading-2" | "heading-3" | "list" | "ordered-list" | "blockquote" | "code-block" | "link" | "image" | "divider" | "checklist" | "align-left" | "align-center" | "align-right" | "highlight" | "superscript" | "subscript" | "table" | "clear-format" | "undo" | "redo";
 interface EditorProps {
     /** HTML 문자열. 외부에서 setter 와 함께 controlled 로 사용 */
     value?: string;

package/dist/components/Editor/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-type EditorToolbarItem = "bold" | "italic" | "underline" | "strikethrough" | "code" | "heading" | "list" | "ordered-list" | "blockquote" | "code-block" | "link" | "image" | "divider";
+type EditorToolbarItem = "bold" | "italic" | "underline" | "strikethrough" | "code" | "heading-1" | "heading-2" | "heading-3" | "list" | "ordered-list" | "blockquote" | "code-block" | "link" | "image" | "divider" | "checklist" | "align-left" | "align-center" | "align-right" | "highlight" | "superscript" | "subscript" | "table" | "clear-format" | "undo" | "redo";
 interface EditorProps {
     /** HTML 문자열. 외부에서 setter 와 함께 controlled 로 사용 */
     value?: string;