Updated old Spirit class to stop overriding of Tailwind in editor (#17874)

No ref

ghost/admin/app/components/custom-theme-settings/image.hbs

@@ -21,7 +21,7 @@
                     <div class="gh-branding-image-container largeimg justify-start">
                         <img class="blog-cover" src={{@setting.value}} {{on "click" uploader.triggerFileDialog}}>
                         <button type="button" class="gh-setting-action-largeimg-delete" {{on "click" (fn this.updateValue null)}} data-test-delete-image="icon">
-                            {{svg-jar "trash" class="w4 h4 fill-white"}}
+                            {{svg-jar "trash" class="w4 h4 fill-white-no-conflict"}}
                         </button>
                     </div>
                 {{else}}

ghost/admin/app/styles/spirit/_icons.css

@@ -43,8 +43,8 @@
 .fill-red g { fill: var(--red); }
 .fill-pink path,
 .fill-pink g { fill: var(--pink); }
-.fill-white path,
+.fill-white-no-conflict path,
-.fill-white g { fill: var(--white); }
+.fill-white-no-conflict g { fill: var(--white); }
 
 .fill-white-10 path,
 .fill-white-10 g { fill: var(--white-10); }
@@ -239,8 +239,8 @@
 .fill-color-inherit path,
 .fill-color-inherit g { fill: inherit; }
 
-.fill-white path,
+.fill-white-no-conflict path,
-.fill-white g       {  fill: var(--white)  }
+.fill-white-no-conflict g       {  fill: var(--white)  }
 
 
 .stroke-blue path,

ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.js

@@ -70,7 +70,7 @@ export default class KoenigCardAudioComponent extends Component {
             items: [{
                 buttonClass: 'fw4 flex items-center white',
                 icon: 'koenig/kg-edit',
-                iconClass: 'fill-white',
+                iconClass: 'fill-white-no-conflict',
                 title: 'Edit',
                 text: '',
                 action: bind(this, this.args.editCard)

ghost/admin/lib/koenig-editor/addon/components/koenig-card-button.js

@@ -44,7 +44,7 @@ export default class KoenigCardButtonComponent extends Component {
             items: [{
                 buttonClass: 'fw4 flex items-center white',
                 icon: 'koenig/kg-edit',
-                iconClass: 'fill-white',
+                iconClass: 'fill-white-no-conflict',
                 title: 'Edit',
                 text: '',
                 action: run.bind(this, this.args.editCard)

ghost/admin/lib/koenig-editor/addon/components/koenig-card-callout.js

@@ -52,7 +52,7 @@ export default class KoenigCardCalloutComponent extends Component {
             items: [{
                 buttonClass: 'fw4 flex items-center white',
                 icon: 'koenig/kg-edit',
-                iconClass: 'fill-white',
+                iconClass: 'fill-white-no-conflict',
                 title: 'Edit',
                 text: '',
                 action: run.bind(this, this.args.editCard)

ghost/admin/lib/koenig-editor/addon/components/koenig-card-code.js

@@ -37,7 +37,7 @@ export default class KoenigCardCode extends Component {
             items: [{
                 buttonClass: 'fw4 flex items-center white',
                 icon: 'koenig/kg-edit',
-                iconClass: 'fill-white',
+                iconClass: 'fill-white-no-conflict',
                 title: 'Edit',
                 text: '',
                 action: this.args.editCard

ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.js

@@ -67,7 +67,7 @@ export default class KoenigCardEmailCtaComponent extends Component {
         items.push({
             buttonClass: 'fw4 flex items-center white',
             icon: 'koenig/kg-edit',
-            iconClass: 'fill-white',
+            iconClass: 'fill-white-no-conflict',
             title: 'Edit',
             text: '',
             action: run.bind(this, this.args.editCard)

ghost/admin/lib/koenig-editor/addon/components/koenig-card-email.js

@@ -44,7 +44,7 @@ export default class KoenigCardEmail extends Component {
             items: [{
                 buttonClass: 'fw4 flex items-center white',
                 icon: 'koenig/kg-edit',
-                iconClass: 'fill-white',
+                iconClass: 'fill-white-no-conflict',
                 title: 'Edit',
                 text: '',
                 action: run.bind(this, this.editCard)

ghost/admin/lib/koenig-editor/addon/components/koenig-card-file.js

@@ -55,7 +55,7 @@ export default class KoenigCardFileComponent extends Component {
             items: [{
                 buttonClass: 'fw4 flex items-center white',
                 icon: 'koenig/kg-edit',
-                iconClass: 'fill-white',
+                iconClass: 'fill-white-no-conflict',
                 title: 'Edit',
                 text: '',
                 action: bind(this, this.args.editCard)

ghost/admin/lib/koenig-editor/addon/components/koenig-card-gallery.js

@@ -66,7 +66,7 @@ export default class KoenigCardGallery extends Component {
             items: [{
                 title: 'Add images',
                 icon: 'koenig/kg-add',
-                iconClass: 'fill-white',
+                iconClass: 'fill-white-no-conflict',
                 action: this.triggerFileDialog
             }]
         };

ghost/admin/lib/koenig-editor/addon/components/koenig-card-header.js

@@ -46,7 +46,7 @@ export default class KoenigCardHeaderComponent extends Component {
             items: [{
                 buttonClass: 'fw4 flex items-center white',
                 icon: 'koenig/kg-edit',
-                iconClass: 'fill-white',
+                iconClass: 'fill-white-no-conflict',
                 title: 'Edit',
                 text: '',
                 action: run.bind(this, this.args.editCard)

ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.js

@@ -46,7 +46,7 @@ export default class KoenigCardHtml extends Component {
             items: [{
                 buttonClass: 'fw4 flex items-center white',
                 icon: 'koenig/kg-edit',
-                iconClass: 'fill-white',
+                iconClass: 'fill-white-no-conflict',
                 title: 'Edit',
                 text: '',
                 action: run.bind(this, this.editCard)

ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js

@@ -131,36 +131,36 @@ export default class KoenigCardImage extends Component {
             toolbarItems = [{
                 title: 'Link',
                 icon: 'koenig/kg-link',
-                iconClass: this.payload.href ? 'fill-green-l2' : 'fill-white',
+                iconClass: this.payload.href ? 'fill-green-l2' : 'fill-white-no-conflict',
                 action: run.bind(this, this._editLink)
             }];
         } else {
             toolbarItems = [{
                 title: 'Regular',
                 icon: 'koenig/kg-img-regular',
-                iconClass: !cardWidth ? 'fill-green-l2' : 'fill-white',
+                iconClass: !cardWidth ? 'fill-green-l2' : 'fill-white-no-conflict',
                 action: run.bind(this, this._changeCardWidth, '')
             }, {
                 title: 'Wide',
                 icon: 'koenig/kg-img-wide',
-                iconClass: cardWidth === 'wide' ? 'fill-green-l2' : 'fill-white',
+                iconClass: cardWidth === 'wide' ? 'fill-green-l2' : 'fill-white-no-conflict',
                 action: run.bind(this, this._changeCardWidth, 'wide')
             }, {
                 title: 'Full',
                 icon: 'koenig/kg-img-full',
-                iconClass: cardWidth === 'full' ? 'fill-green-l2' : 'fill-white',
+                iconClass: cardWidth === 'full' ? 'fill-green-l2' : 'fill-white-no-conflict',
                 action: run.bind(this, this._changeCardWidth, 'full')
             }, {
                 divider: true
             }, {
                 title: 'Link',
                 icon: 'koenig/kg-link',
-                iconClass: this.payload.href ? 'fill-green-l2' : 'fill-white',
+                iconClass: this.payload.href ? 'fill-green-l2' : 'fill-white-no-conflict',
                 action: run.bind(this, this._editLink)
             }, {
                 title: 'Replace image',
                 icon: 'koenig/kg-replace',
-                iconClass: 'fill-white',
+                iconClass: 'fill-white-no-conflict',
                 action: this.triggerFileDialog
             }];
         }

ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js

@@ -59,7 +59,7 @@ export default class KoenigCardMarkdown extends Component {
             items: [{
                 buttonClass: 'fw4 flex items-center white',
                 icon: 'koenig/kg-edit',
-                iconClass: 'fill-white',
+                iconClass: 'fill-white-no-conflict',
                 title: 'Edit',
                 text: '',
                 action: run.bind(this, this.editCard)

ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.js

@@ -55,7 +55,7 @@ export default class KoenigCardProductComponent extends Component {
             items: [{
                 buttonClass: 'fw4 flex items-center white',
                 icon: 'koenig/kg-edit',
-                iconClass: 'fill-white',
+                iconClass: 'fill-white-no-conflict',
                 title: 'Edit',
                 text: '',
                 action: run.bind(this, this.args.editCard)

ghost/admin/lib/koenig-editor/addon/components/koenig-card-toggle.js

@@ -33,7 +33,7 @@ export default class KoenigCardToggleComponent extends Component {
             items: [{
                 buttonClass: 'fw4 flex items-center white',
                 icon: 'koenig/kg-edit',
-                iconClass: 'fill-white',
+                iconClass: 'fill-white-no-conflict',
                 title: 'Edit',
                 text: '',
                 action: run.bind(this, this.args.editCard)

ghost/admin/lib/koenig-editor/addon/components/koenig-card-video.js

@@ -80,7 +80,7 @@ export default class KoenigCardVideoComponent extends Component {
             items: [{
                 buttonClass: 'fw4 flex items-center white',
                 icon: 'koenig/kg-edit',
-                iconClass: 'fill-white',
+                iconClass: 'fill-white-no-conflict',
                 title: 'Edit',
                 text: '',
                 action: bind(this, this.args.editCard)

ghost/admin/lib/koenig-editor/addon/components/koenig-link-toolbar.hbs

@@ -11,7 +11,7 @@
                 {{action "edit"}}
             >
                 {{!-- TODO: get correct icon --}}
-                {{svg-jar "koenig/kg-edit" class="fill-white w4 h4 nudge-top--1"}}
+                {{svg-jar "koenig/kg-edit" class="fill-white-no-conflict w4 h4 nudge-top--1"}}
             </button>
         </li>
         <li class="ma0">
@@ -22,7 +22,7 @@
                 {{action "remove"}}
             >
                 {{!-- TODO: get correct icon --}}
-                {{svg-jar "koenig/kg-trash" class="fill-white w4 h4 nudge-top--1"}}
+                {{svg-jar "koenig/kg-trash" class="fill-white-no-conflict w4 h4 nudge-top--1"}}
             </button>
         </li>
     </ul>

ghost/admin/lib/koenig-editor/addon/components/koenig-toolbar.hbs

@@ -6,7 +6,7 @@
             class="dib dim-lite link h9 w9 nudge-top--1"
             {{on "click" (fn this._toggleMarkup "strong")}}
         >
-            {{svg-jar "koenig/kg-bold" class=(concat (if this.activeMarkupTagNames.isStrong "fill-green-l2" "fill-white") " w4 h4")}}
+            {{svg-jar "koenig/kg-bold" class=(concat (if this.activeMarkupTagNames.isStrong "fill-green-l2" "fill-white-no-conflict") " w4 h4")}}
         </button>
     </li>
     <li class="ma0 lh-solid">
@@ -16,7 +16,7 @@
             class="dib dim-lite link h9 w9 nudge-top--1"
             {{on "click" (fn this._toggleMarkup "em")}}
         >
-            {{svg-jar "koenig/kg-italic" class=(concat (if (or this.activeMarkupTagNames.isEm this.activeMarkupTagNames.isI) "fill-green-l2" "fill-white") " w4 h4")}}
+            {{svg-jar "koenig/kg-italic" class=(concat (if (or this.activeMarkupTagNames.isEm this.activeMarkupTagNames.isI) "fill-green-l2" "fill-white-no-conflict") " w4 h4")}}
         </button>
     </li>
     {{#unless this.basicOnly}}
@@ -27,7 +27,7 @@
                 class="dib dim-lite link h9 w9 nudge-top--1"
                 {{on "click" (fn this._toggleHeaderSection "h2")}}
             >
-                {{svg-jar "koenig/kg-heading-1" class=(concat (if this.activeSectionTagNames.isH2 "fill-green-l2" "fill-white") " w4 h4")}}
+                {{svg-jar "koenig/kg-heading-1" class=(concat (if this.activeSectionTagNames.isH2 "fill-green-l2" "fill-white-no-conflict") " w4 h4")}}
             </button>
         </li>
         <li class="ma0 lh-solid">
@@ -38,7 +38,7 @@
                 {{on "click" (fn this._toggleHeaderSection "h3")}}
                 data-test-button="toolbar-h3"
             >
-                {{svg-jar "koenig/kg-heading-2" class=(concat (if this.activeSectionTagNames.isH3 "fill-green-l2" "fill-white") " w4 h4")}}
+                {{svg-jar "koenig/kg-heading-2" class=(concat (if this.activeSectionTagNames.isH3 "fill-green-l2" "fill-white-no-conflict") " w4 h4")}}
             </button>
         </li>
     {{/unless}}
@@ -70,7 +70,7 @@
             class="dib dim-lite link h9 w9 nudge-top--1"
             {{on "click" this._editLink}}
         >
-            {{svg-jar "koenig/kg-link" class=(concat (if this.activeMarkupTagNames.isA "fill-green-l2" "fill-white") " w4 h4")}}
+            {{svg-jar "koenig/kg-link" class=(concat (if this.activeMarkupTagNames.isA "fill-green-l2" "fill-white-no-conflict") " w4 h4")}}
         </button>
     </li>