@crystallize/design-system 1.12.0 → 1.13.0

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

@@ -200,65 +200,63 @@ function BlockFormatDropDown({
         <>
           <DropdownMenu.Item onClick={formatParagraph}>
             <i
-              className={`icon paragraph border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${
-                blockType === 'paragraph' ? 'opacity-100 bg-purple-50-900' : 'opacity-60'
+              className={`c-rte-icon-paragraph c-rte-toolbar__block-format__icon ${
+                blockType === 'paragraph' ? 'selected' : ''
               }`}
             />
-
-            <i className="icon paragraph" />
-            <span className={`${blockType === 'paragraph' ? 'font-bold' : 'font-normal'} text-sm px-3  min-w-[150px]`}>
+            <span className={`c-rte-toolbar__block-format__text ${blockType === 'paragraph' ? 'selected' : ''}`}>
               Normal
             </span>
           </DropdownMenu.Item>
           {headings.map(headingSize => (
             <DropdownMenu.Item key={headingSize} onClick={() => formatHeading(headingSize)}>
               <i
-                className={`icon ${headingSize} border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px]  ${
-                  blockType === headingSize ? 'opacity-100 bg-purple-50-900' : 'opacity-60'
+                className={`c-rte-icon-${headingSize} c-rte-toolbar__block-format__icon ${
+                  blockType === headingSize ? 'selected' : ''
                 }`}
               />
-              <span className={`${blockType === headingSize ? 'font-bold' : 'font-normal'} text-sm px-3 min-w-[150px]`}>
+              <span className={`c-rte-toolbar__block-format__text ${blockType === headingSize ? 'selected' : ''}`}>
                 {headingTypeToBlockName[headingSize]}
               </span>
             </DropdownMenu.Item>
           ))}
           <DropdownMenu.Item onClick={formatBulletList}>
             <i
-              className={`icon bullet-list border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${
-                blockType === 'bullet' ? 'opacity-100 bg-purple-50-900' : 'opacity-60'
+              className={`c-rte-icon-bullet-list c-rte-toolbar__block-format__icon ${
+                blockType === 'bullet' ? 'selected' : ''
               }`}
             />
-            <span className={`${blockType === 'bullet' ? 'font-bold' : 'font-normal'} text-sm px-3  min-w-[150px]`}>
+            <span className={`c-rte-toolbar__block-format__text ${blockType === 'bullet' ? 'selected' : ''}`}>
               Bullet List
             </span>
           </DropdownMenu.Item>
           <DropdownMenu.Item onClick={formatNumberedList}>
             <i
-              className={`icon numbered-list border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${
-                blockType === 'number' ? 'opacity-100 bg-purple-50-900' : 'opacity-60'
+              className={`c-rte-icon-numbered-list c-rte-toolbar__block-format__icon ${
+                blockType === 'number' ? 'selected' : ''
               }`}
             />
-            <span className={`${blockType === 'number' ? 'font-bold' : 'font-normal'} text-sm px-3  min-w-[150px]`}>
+            <span className={`c-rte-toolbar__block-format__text ${blockType === 'number' ? 'selected' : ''}`}>
               Numbered List
             </span>
           </DropdownMenu.Item>
           <DropdownMenu.Item onClick={formatQuote} data-testid="toggle-block-format-quote">
             <i
-              className={`icon quote border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${
-                blockType === 'quote' ? 'opacity-100 bg-purple-50-900' : 'opacity-60'
+              className={`c-rte-icon-quote c-rte-toolbar__block-format__icon ${
+                blockType === 'quote' ? 'selected' : ''
               }`}
             />
-            <span className={`${blockType === 'quote' ? 'font-bold' : 'font-normal'} text-sm px-3  min-w-[150px]`}>
+            <span className={`c-rte-toolbar__block-format__text ${blockType === 'quote' ? 'selected' : ''}`}>
               Quote
             </span>
           </DropdownMenu.Item>
           <DropdownMenu.Item onClick={formatCode} data-testid="toggle-block-format-code">
             <i
-              className={`icon code border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${
-                blockType === 'code' ? 'opacity-100 bg-purple-50-900' : 'opacity-60'
+              className={`icon c-rte-icon-code border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${
+                blockType === 'code' ? 'selected' : ''
               }`}
             />
-            <span className={`${blockType === 'code' ? 'font-bold' : 'font-normal'} text-sm px-3  min-w-[150px]`}>
+            <span className={`c-rte-toolbar__block-format__text ${blockType === 'code' ? 'selected' : ''}`}>
               Code block
             </span>
           </DropdownMenu.Item>
@@ -270,7 +268,7 @@ function BlockFormatDropDown({
         aria-label="Formatting options for text style"
         data-testid="toggle-block-format"
       >
-        <i className={`icon ${blockType} border bg-no-repeat bg-center bg-[length:18px_18px] w-6 h-6`} />
+        <i className={`c-rte-toolbar__toggle-icon c-rte-icon-${blockType}`} />
         <Icon.Arrow />
       </Button>
     </DropdownMenu.Root>
@@ -278,7 +276,7 @@ function BlockFormatDropDown({
 }
 
 function Divider(): JSX.Element {
-  return <div className="divider" />;
+  return <div className="c-rte-toolbar__divider" />;
 }
 
 export default function ToolbarPlugin({
@@ -448,8 +446,8 @@ export default function ToolbarPlugin({
   );
 
   return (
-    <div className="toolbar">
-      <div className="flex">
+    <div className="c-rte-toolbar">
+      <div className="c-rte-toolbar__inner">
         <IconButton
           disabled={!canUndo || !isEditable}
           onClick={() => {
@@ -460,9 +458,7 @@ export default function ToolbarPlugin({
           aria-label={tr('actionUndoLabel')}
         >
           <i
-            className={`format icon undo border w-4 h-6 bg-no-repeat bg-center bg-[length:17px_17px] ${
-              canUndo ? 'opacity-100' : 'opacity-30'
-            }
+            className={`c-rte-icon-undo c-rte-toolbar__icon ${!canUndo ? 'disabled' : ''}
         `}
           />
         </IconButton>
@@ -475,11 +471,7 @@ export default function ToolbarPlugin({
           title={tr(IS_APPLE ? 'actionRedoTitleApple' : 'actionRedoTitle')}
           aria-label={tr('actionRedoLabel')}
         >
-          <i
-            className={`format icon redo border w-4 h-6 bg-no-repeat bg-center bg-[length:17px_17px] ${
-              canRedo ? 'opacity-100' : 'opacity-30'
-            }`}
-          />
+          <i className={`c-rte-icon-redo c-rte-toolbar__icon ${!canRedo ? 'disabled' : ''}`} />
         </IconButton>
         <Divider />
         {blockType in blockTypeToBlockName && activeEditor === editor && (
@@ -503,10 +495,8 @@ export default function ToolbarPlugin({
                         key={value}
                       >
                         <span
-                          className={`text min-w-[200px] block text-sm px-3 ${
-                            dropDownActiveClass(value === codeLanguage)
-                              ? 'font-bold opacity-100'
-                              : 'font-normal opacity-80'
+                          className={`c-rte-toolbar__code-lang__sel-item ${
+                            dropDownActiveClass(value === codeLanguage) ? 'selected' : ''
                           }`}
                         >
                           {name}
@@ -518,16 +508,16 @@ export default function ToolbarPlugin({
               }
             >
               <Button aria-label={tr('codeSelectLanguage')} append={<Icon.Arrow />}>
-                <span className="font-medium text-sm">{getLanguageFriendlyName(codeLanguage)}</span>
+                <span className="c-rte-toolbar__code-lang__button-text">{getLanguageFriendlyName(codeLanguage)}</span>
               </Button>
             </DropdownMenu.Root>
           </>
         ) : (
           <Dialog>
-            <div className="flex gap-1">
+            <div className="c-rte-toolbar__actions-rest">
               <IconButton
                 disabled={!isEditable}
-                className={`${isBold ? 'opacity-100 !bg-purple-50-900' : 'opacity-60'}`}
+                className={`c-rte-toolbar__icon-btn ${isBold ? 'selected' : ''}`}
                 type="button"
                 title={tr(IS_APPLE ? 'actionFormatAsStrongTitleApple' : 'actionFormatAsStrongTitle')}
                 aria-label={tr('actionFormatAsStrongLabel')}
@@ -536,10 +526,10 @@ export default function ToolbarPlugin({
                   activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
                 }}
               >
-                <i className={`format icon bold border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`} />
+                <i className={`c-rte-toolbar__icon-btn__icon c-rte-icon-bold`} />
               </IconButton>
               <IconButton
-                className={`${isItalic ? 'opacity-100 !bg-purple-50-900' : 'opacity-60'}`}
+                className={`c-rte-toolbar__icon-btn ${isItalic ? 'selected' : ''}`}
                 disabled={!isEditable}
                 onClick={() => {
                   activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
@@ -549,11 +539,10 @@ export default function ToolbarPlugin({
                 aria-label={tr('actionFormatAsEmphasizedLabel')}
                 data-testid="toggle-format-emphasized"
               >
-                <i className={`format icon italic border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`} />
+                <i className={`c-rte-toolbar__icon-btn__icon c-rte-icon-italic`} />
               </IconButton>
-
               <IconButton
-                className={`${isUnderline ? 'opacity-100 !bg-purple-50-900' : 'opacity-60'}`}
+                className={`c-rte-toolbar__icon-btn ${isUnderline ? 'selected' : ''}`}
                 disabled={!isEditable}
                 onClick={() => {
                   activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
@@ -563,13 +552,10 @@ export default function ToolbarPlugin({
                 aria-label={tr('actionFormatAsUnderlinedLabel')}
                 data-testid="toggle-format-underlined"
               >
-                <i
-                  className={`format icon underline border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`}
-                />
+                <i className={`c-rte-toolbar__icon-btn__icon c-rte-icon-underline`} />
               </IconButton>
-
               <IconButton
-                className={`${isCode ? 'opacity-100 !bg-purple-50-900' : 'opacity-60'}`}
+                className={`c-rte-toolbar__icon-btn ${isCode ? 'selected' : ''}`}
                 disabled={!isEditable}
                 onClick={() => {
                   activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
@@ -578,20 +564,18 @@ export default function ToolbarPlugin({
                 title={tr('actionInsertCodeBlock')}
                 aria-label={tr('actionInsertCodeBlock')}
               >
-                <i className={`format icon code border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`} />
+                <i className={`c-rte-toolbar__icon-btn__icon c-rte-icon-code`} />
               </IconButton>
-
               <IconButton
-                className={`${isLink ? 'opacity-100 !bg-purple-50-900' : 'opacity-60'}`}
+                className={`c-rte-toolbar__icon-btn ${isLink ? 'selected' : ''}`}
                 disabled={!isEditable}
                 onClick={insertLink}
                 type="button"
                 aria-label={tr('actionInsertlink')}
                 title={tr('actionInsertlink')}
               >
-                <i className={`format icon link border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`} />
+                <i className={`c-rte-toolbar__icon-btn__icon c-rte-icon-link`} />
               </IconButton>
-
               <DropdownMenu.Root
                 disabled={!isEditable}
                 style={{ zIndex: 1 }}
@@ -605,11 +589,11 @@ export default function ToolbarPlugin({
                       aria-label={tr('actionFormatWithStrikethroughLabel')}
                     >
                       <i
-                        className={`icon w-6 h-6 strikethrough border bg-no-repeat bg-center bg-[length:16px_16px]  rounded-sm ${
-                          isStrikethrough ? 'opacity-100 !bg-purple-50-900' : 'opacity-60'
+                        className={`c-rte-icon-strikethrough c-rte-toolbar__dd-item__icon ${
+                          isStrikethrough ? 'selected' : ''
                         }`}
                       />
-                      <span className={`px-3 text-sm font-sans ${isStrikethrough ? 'font-medium' : 'font-normal'}`}>
+                      <span className={`c-rte-toolbar__dd-item__text ${isStrikethrough ? 'selected' : ''}`}>
                         {tr('actionFormatAsStrongTitle')}
                       </span>
                     </DropdownMenu.Item>
@@ -621,11 +605,9 @@ export default function ToolbarPlugin({
                       aria-label={tr('actionFormatWithSubscriptLabel')}
                     >
                       <i
-                        className={`icon w-6 h-6 subscript border bg-no-repeat bg-center bg-[length:16px_16px]  rounded-sm ${
-                          isSubscript ? 'opacity-100 !bg-purple-50-900' : 'opacity-60'
-                        }`}
+                        className={`c-rte-icon-subscript c-rte-toolbar__dd-item__icon ${isSubscript ? 'selected' : ''}`}
                       />
-                      <span className={`px-3 text-sm font-sans ${isSubscript ? 'font-medium' : 'font-normal'}`}>
+                      <span className={`c-rte-toolbar__dd-item__text ${isSubscript ? 'selected' : ''}`}>
                         {tr('actionFormatWithSubscriptTitle')}
                       </span>
                     </DropdownMenu.Item>
@@ -637,11 +619,11 @@ export default function ToolbarPlugin({
                       aria-label={tr('actionFormatWithSuperscriptLabel')}
                     >
                       <i
-                        className={`icon w-6 h-6 superscript border bg-no-repeat bg-center bg-[length:16px_16px]  rounded-sm ${
-                          isSuperscript ? 'opacity-100 !bg-purple-50-900' : 'opacity-60'
+                        className={`c-rte-icon-superscript c-rte-toolbar__dd-item__icon ${
+                          isSuperscript ? 'selected' : ''
                         }`}
                       />
-                      <span className={`px-3 text-sm font-sans ${isSuperscript ? 'bg-purple-50-900' : 'font-normal'}`}>
+                      <span className={`c-rte-toolbar__dd-item__text ${isSuperscript ? 'selected' : ''}`}>
                         {tr('actionFormatWithSuperscriptTitle')}
                       </span>
                     </DropdownMenu.Item>
@@ -651,8 +633,8 @@ export default function ToolbarPlugin({
                       title={tr('actionClearTextFormatting')}
                       aria-label={tr('actionClearTextFormatting')}
                     >
-                      <i className="icon w-6 h-6 clear border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60" />
-                      <span className="px-3 text-sm text-pink-600-300 font-sans font-normal">Clear Formatting</span>
+                      <i className="c-rte-icon-clear c-rte-toolbar__dd-item__icon" />
+                      <span className="c-rte-toolbar__dd-item__text--clear">Clear Formatting</span>
                     </DropdownMenu.Item>
                   </>
                 }
@@ -661,7 +643,7 @@ export default function ToolbarPlugin({
                   style={{ backgroundColor: 'transparent', padding: '0 8px' }}
                   aria-label={tr('actionTextFormattingOptions')}
                 >
-                  <i className={`icon dropdown-more border bg-no-repeat bg-center bg-[length:18px_18px] w-6 h-6`} />
+                  <i className={`c-rte-icon-dropdown-more c-rte-toolbar__toggle-icon`} />
                   <Icon.Arrow />
                 </Button>
               </DropdownMenu.Root>
@@ -676,16 +658,14 @@ export default function ToolbarPlugin({
                         activeEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined);
                       }}
                     >
-                      <div className="flex items-center font-sans font-normal">
-                        <i className="icon w-5 h-5 horizontal-rule border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60" />
-                        <span className="px-3 text-sm">{tr('horizontalRule')}</span>
-                      </div>
+                      <i className="c-rte-toolbar__dd-item__icon c-rte-icon-horizontal-rule" />
+                      <span className="c-rte-toolbar__dd-item__text">{tr('horizontalRule')}</span>
                     </DropdownMenu.Item>
                     <DropdownMenu.Item>
                       <Dialog.Trigger asChild>
-                        <div className="flex items-center font-sans font-normal">
-                          <i className="icon w-5 h-5 table border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60" />
-                          <span className="px-3 text-sm">{tr('table')}</span>
+                        <div className="c-rte-toolbar__dd-item--table">
+                          <i className="c-rte-toolbar__dd-item__icon c-rte-icon-table" />
+                          <span className="c-rte-toolbar__dd-item__text">{tr('table')}</span>
                         </div>
                       </Dialog.Trigger>
                     </DropdownMenu.Item>
@@ -693,15 +673,14 @@ export default function ToolbarPlugin({
                 }
               >
                 <IconButton>
-                  <i className="icon plus border w-full h-full bg-no-repeat bg-center bg-[length:20px_20px] " />
+                  <i className="c-rte-icon-plus c-rte-toolbar__plus" />
                 </IconButton>
               </DropdownMenu.Root>
               <Dialog.Content>
                 <Dialog.Title>{tr('insertTableTitle')}</Dialog.Title>
                 <Dialog.Description>{tr('insertTableDescription')}</Dialog.Description>
-                <div className="items-center justify-between">
-                  <InsertTableDialog activeEditor={activeEditor} />
-                </div>
+
+                <InsertTableDialog activeEditor={activeEditor} />
               </Dialog.Content>
             </div>
           </Dialog>

package/src/rich-text-editor/plugins/ToolbarPlugin/insert-table.tsx

@@ -27,8 +27,8 @@ export function InsertTableDialog({ activeEditor }: { activeEditor: LexicalEdito
   };
 
   return (
-    <>
-      <div className="grid grid-cols-[1fr_1px_1fr] border border-gray-100-800 border-solid shadow-sm rounded-md ">
+    <div className="c-rte-insert-table">
+      <div className="c-rte-insert-table__dimensions">
         <InputWithLabel
           label={tr('insertTableRows')}
           value={rows}
@@ -37,7 +37,7 @@ export function InsertTableDialog({ activeEditor }: { activeEditor: LexicalEdito
           inputMode="numeric"
           onChange={e => setRows(e.target.value)}
         />
-        <span className="h-full bg-gray-100-800" />
+        <span className="c-rte-insert-table__dimensions__separator" />
         <InputWithLabel
           type="text"
           label={tr('insertTableColumns')}
@@ -47,11 +47,11 @@ export function InsertTableDialog({ activeEditor }: { activeEditor: LexicalEdito
           onChange={e => setColumns(e.target.value)}
         />
       </div>
-      <div className="flex justify-end mt-3">
+      <div className="c-rte-insert-table__actions">
         <Button as={Dialog.Close} size="sm" intent="action" aria-label={tr('insertTableCommit')} onClick={onClick}>
           {tr('insertTableCommit')}
         </Button>
       </div>
-    </>
+    </div>
   );
 }

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

@@ -0,0 +1,213 @@
+.c-rte-icon {
+  &-plus {
+    @apply bg-[url('images/icons/plus.svg')];
+  }
+
+  &-h1 {
+    @apply bg-[url('images/icons/type-h1.svg')];
+  }
+
+  &-h2 {
+    @apply bg-[url('images/icons/type-h2.svg')];
+  }
+
+  &-h3 {
+    @apply bg-[url('images/icons/type-h3.svg')];
+  }
+
+  &-h4 {
+    @apply bg-[url('images/icons/type-h4.svg')];
+  }
+
+  &-h5 {
+    @apply bg-[url('images/icons/type-h5.svg')];
+  }
+
+  &-h6 {
+    @apply bg-[url('images/icons/type-h6.svg')];
+  }
+
+  &-paragraph {
+    @apply bg-[url('images/icons/text-paragraph.svg')];
+  }
+
+  &-bullet-list,
+  &-bullet {
+    @apply bg-[url('images/icons/list-ul.svg')];
+  }
+
+  &-check-list,
+  &-check {
+    @apply bg-[url('images/icons/square-check.svg')];
+  }
+
+  &-numbered-list,
+  &-number {
+    @apply bg-[url('images/icons/list-ol.svg')];
+  }
+
+  &-quote {
+    @apply bg-[url('images/icons/chat-square-quote.svg')];
+  }
+
+  &-code {
+    @apply bg-[url('images/icons/code.svg')];
+  }
+
+  &-palette {
+    @apply bg-[url('images/icons/palette.svg')];
+  }
+
+  &-bucket {
+    @apply bg-[url('images/icons/paint-bucket.svg')];
+  }
+
+  &-bold {
+    @apply bg-[url('images/icons/type-bold.svg')];
+  }
+
+  &-italic {
+    @apply bg-[url('images/icons/type-italic.svg')];
+  }
+
+  &-clear {
+    @apply bg-[url('images/icons/trash.svg')];
+  }
+
+  &-code {
+    @apply bg-[url('images/icons/code.svg')];
+  }
+
+  &-underline {
+    @apply bg-[url('images/icons/type-underline.svg')];
+  }
+
+  &-strikethrough {
+    @apply bg-[url('images/icons/type-strikethrough.svg')];
+  }
+
+  &-subscript {
+    @apply bg-[url('images/icons/type-subscript.svg')];
+  }
+
+  &-superscript {
+    @apply bg-[url('images/icons/type-superscript.svg')];
+  }
+
+  &-link {
+    @apply bg-[url('images/icons/link.svg')];
+  }
+
+  &-horizontal-rule {
+    @apply bg-[url('images/icons/horizontal-rule.svg')];
+  }
+
+  &-caret-right {
+    @apply bg-[url('images/icons/caret-right-fill.svg')];
+  }
+
+  &-dropdown-more {
+    @apply bg-[url('images/icons/dropdown-more.svg')];
+  }
+
+  &-font-color {
+    @apply bg-[url('images/icons/font-color.svg')];
+  }
+
+  &-font-family {
+    @apply bg-[url('images/icons/font-family.svg')];
+  }
+
+  &-bg-color {
+    @apply bg-[url('images/icons/bg-color.svg')];
+  }
+
+  &-image {
+    @apply bg-[url('images/icons/file-image.svg')];
+  }
+
+  &-table {
+    @apply bg-[url('images/icons/table.svg')];
+  }
+
+  &-close {
+    @apply bg-[url('images/icons/close.svg')];
+  }
+
+  &-left-align,
+  &-left-align {
+    @apply bg-[url('images/icons/text-left.svg')];
+  }
+
+  &-center-align {
+    @apply bg-[url('images/icons/text-center.svg')];
+  }
+
+  &-right-align {
+    @apply bg-[url('images/icons/text-right.svg')];
+  }
+
+  &-justify-align {
+    @apply bg-[url('images/icons/justify.svg')];
+  }
+
+  &-indent {
+    @apply bg-[url('images/icons/indent.svg')];
+  }
+
+  &-outdent {
+    @apply bg-[url('images/icons/outdent.svg')];
+  }
+
+  &-undo {
+    @apply bg-[url('images/icons/arrow-counterclockwise.svg')];
+  }
+
+  &-redo {
+    @apply bg-[url('images/icons/arrow-clockwise.svg')];
+  }
+
+  &-mic {
+    @apply bg-[url('images/icons/mic.svg')];
+  }
+
+  &-import {
+    @apply bg-[url('images/icons/upload.svg')];
+  }
+
+  &-export {
+    @apply bg-[url('images/icons/download.svg')];
+  }
+
+  &-diagram-2 {
+    @apply bg-[url('images/icons/diagram-2.svg')];
+  }
+
+  &-user {
+    @apply bg-[url('images/icons/user.svg')];
+  }
+
+  &-equation {
+    @apply bg-[url('images/icons/plus-slash-minus.svg')];
+  }
+
+  &-gif {
+    @apply bg-[url('images/icons/filetype-gif.svg')];
+  }
+
+  &-copy {
+    @apply bg-[url('images/icons/copy.svg')];
+  }
+
+  &-success {
+    @apply bg-[url('images/icons/success.svg')];
+  }
+
+  &-prettier {
+    @apply bg-[url('images/icons/prettier.svg')];
+  }
+
+  &-prettier-error {
+    @apply bg-[url('images/icons/prettier-error.svg')];
+  }
+}