FEATURE: remove alternative category badge styles, set bullet style as default

[awesomerobot]

Details and additional discussion have been posted to https://meta.discourse.org/t/moving-to-a-single-category-style-site-setting/282441

Goal

Once merged, this will eliminate the site setting category style which would allow admins to select bullet, box, bar, or none category badge styles.

The default for this setting was bullet, and this will now be the only style included in Discourse core (as seen below).

A theme component that allows for the other styles has been created for admins who wish to remain on the other styles: https://github.com/discourse/discourse-category-badge-styles

Details

At this point there’s no HTML structure to the bullet portion of the badge, it’s all displayed with CSS…

The markup for a parent category:

<a class="badge-category__wrapper" href="/c/general/4">
  <span data-category-id="4" data-drop-close="true" class="badge-category" title="Create  Test topics here that don’t fit into any other existing category test.">
    <span class="badge-category__name">General</span>
  </span>
</a>

The markup for a child category:

<a class="badge-category__wrapper" href="/c/general/getting-started/11">
  <span data-category-id="11" data-parent-category-id="4" data-drop-close="true" class="badge-category --has-parent" title="Made it was really insist. Peering down with. Thence he was as asphalt. Division whose skins glowed like the end of us out of Nature. Prove it upon his shoulder.">
    <span class="badge-category__name">Getting Started</span>
  </span>
</a>

How this works:

1. Each .badge-category gets data attributes for category-id and parent-category-id

2. category-badge-css-generator.js produces CSS for each badge, in the form of custom properties:

.badge-category[data-category-id="${category.id}"] { --category-badge-color: var(--category-${category.id}-color); --category-badge-text-color: #${category.text_color};  }

These custom properties are scoped to .badge-category based on the data attribute:

• category-badge-color
• category-badge-text-color
• parent-category-badge-color

3. CSS creates the bullet within a psuedo selector:

.badge-category:before {
   content: "";
   background: var(--category-badge-color);
   flex: 0 0 auto;
   width: 0.67rem; 
   height: 0.67rem;
 }

If there’s a parent category, the badge is split using a CSS gradient. Parents get a .--has-parent modifier class that applies this:

.badge-category {
  &.--has-parent {
     &:before {
       background: linear-gradient(
         90deg,
         var(--parent-category-badge-color) 50%,
         var(--category-badge-color) 50%
       );
     }
   }
 }

This applies to all category badges, except for:

• Sidebar/navigation categories

  These are structured differently because the sidebar calls for a prefix for each link. This special case makes sense given the API for adding sidebar links. Sharing classes and styles with these is more complicated than it's worth at the moment.

• Hashtag mentions in posts

  Mentions are similar to the sidebar where they all share a structure and API, so this is another case where these are a different "organism" in a sense.

Things to update after this is merged

This PR also adjusts some padding and spacing for consistency, and removes a bunch of style-specific CSS.

Once merged this will rely on updates to:

• https://github.com/discourse/discourse-category-badge-styles - this adds the deprecated styles back if desired
• Data Explorer will require this update to its tests: DEV: fix test for new category badge structure discourse-data-explorer#263
• The Category Icons component will require this update to be compatible: REFACTOR: update for core badge style removal discourse-category-icons#26