Outdated CSS classes?

[benjaminrancourt]

In my Ghost theme, I disabled the generation of callout cards as I made my own CSS implementation for this component.

{
  "config": {
    "card_assets": {
      "exclude": [
        "callout"
      ]
    }
  }
}

However, by doing this, gscan gives me several warnings despite the fact that I am using exactly the same classes as the current implementation of kg-callout-card.

- Warning: The .kg-callout-card-background-grey CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-callout-card-background-white CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-callout-card-background-blue CSS class is required to appear styled in your theme
Affected Files: styles

/*
  https://github.com/TryGhost/Ghost/blob/main/ghost/core/core/frontend/src/cards/css/callout.css
 */
.kg-callout-card {
  background-color: color-mix(in srgb, transparent, var(--background-color) 12%);
  border-radius: 3px;
  display: flex;
  padding: 1em 1.5em;

  & div.kg-callout-emoji {
    font-size: 1.15em;
    line-height: 1.25em;
    padding-right: 0.8em;
  }

  & + .kg-callout-card {
    margin-top: 1em;
  }
}

.kg-callout-card-grey {
  --background-color: #7c8b9a;
}

.kg-callout-card-white {
  --background-color: var(--color-white);
  box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
}

.kg-callout-card-blue {
  --background-color: #21ace8;
}

.kg-callout-card-background-green,
.kg-callout-card-green {
  --background-color: #f0a50f;
}

.kg-callout-card-yellow {
  --background-color: #34b743;
}

.kg-callout-card-red {
  --background-color: #d12e2e;
}

.kg-callout-card-pink {
  --background-color: #e147ae;
}

.kg-callout-card-purple {
  --background-color: #8755ec;
}

.kg-callout-card-accent {
  background-color: var(--ghost-accent-color);
  color: var(--color-black);
}

Is it possible that we should update the CSS classes in the v4.js file to match the current implementation? If so, let me know, I can probably do this fix if you want.

[benjaminrancourt]

In fact, using the following configuration, I think there would be 15 CSS classes to fix if I'm not mistaken.

{
  "config": {
    "card_assets": {
      "exclude": [
        "callout"
      ]
    }
  }
}

Checking theme compatibility...

Your theme has 15 warnings!
--------

Warnings
--------
- Warning: The .kg-callout-card-emoji CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-callout-card-text CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-callout-card-background-grey CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-callout-card-background-white CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-callout-card-background-blue CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-callout-card-background-green CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-callout-card-background-yellow CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-callout-card-background-red CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-callout-card-background-pink CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-callout-card-background-purple CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-callout-card-background-accent CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-nft-logo CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-video-thumbnail CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-video-thumbnail.placeholder CSS class is required to appear styled in your theme
Affected Files: styles

- Warning: The .kg-video-title CSS class is required to appear styled in your theme
Affected Files: styles

References:

• callout.css
• nft.css
• video.css