open-consul/ui/packages/consul-ui/app/styles/base/icons
Kenia fbb9f5cdf5
ui: Adding Partition to topology card (#11805)
2022-01-11 10:04:06 -05:00
..
README.mdx ui: Fix brand coloring for inline-code plus docs (#11578) 2021-11-23 18:32:11 +00:00
base-placeholders.scss ui: Fix brand coloring for inline-code plus docs (#11578) 2021-11-23 18:32:11 +00:00
base-variables.scss ui: Adding Partition to topology card (#11805) 2022-01-11 10:04:06 -05:00
debug.scss ui: Fix brand coloring for inline-code plus docs (#11578) 2021-11-23 18:32:11 +00:00
icon-placeholders.scss ui: Adding Partition to topology card (#11805) 2022-01-11 10:04:06 -05:00
index.scss ui: Rename icons for consistency and remove unused icons (#10311) 2021-06-22 18:56:17 +01:00
overrides.scss ui: Replaces almost all remaining instances of SASS variables with CSS (#11200) 2021-10-07 19:21:11 +01:00

README.mdx

# Iconography

Please prefer our Constructable `%placeholder` styles over singular CSS
properties. If you need to drop back, to something not covered there then you
can also use CSS properties directly.

All icons use a `%with-` prefix for example `%with-alert-circle-fill-icon` or
`%with-alert-circle-fill-mask`. We mostly use the `-mask` suffix and also use
the `%as-pseudo` placeholder to tell CSS that we are using the background on a
pseudo element:

```css
.selector::before {
  @extend %with-alert-circle-fill-mask, %as-pseudo;
}
```

If you are not using a pseudo element for whatever reason, then you do not need
to use `%as-pseudo`.

When using `-mask` icons, color will use the `currentColor` of the element. If
you need the color of the icon to be different to the text you can define the
color of the icon itself via the `color` CSS property (preferred) but you can
also use `background-color`.

```css
.selector::before {
  @extend %with-alert-circle-fill-mask, %as-pseudo;
  color: rgb(var(--tone-strawberry-500));
}
```

If you need to use a colored icon (usually an existing brand icon) then don't
use `-mask`, use `-icon` instead:

```css
.selector::before {
  @extend %with-logo-consul-color-icon, %as-pseudo;
}
```

## Structure Icons + Consul Specific Icons

```hbs preview-template
<ul>
{{#each (icons-debug 'structure') as |prop|}}
  <li>
    <figure
      {{with-copyable (concat "@extend %" prop.placeholder ", %as-pseudo;")}}
      class={{concat 'debug-' prop.placeholder '-before'}}
    >
      <figcaption>{{prop.name}}</figcaption>
    </figure>
  </li>
{{/each}}
</ul>
```

## Flight Icons

```hbs preview-template
<ul>
{{#each (icons-debug 'flight') as |prop|}}
  <li>
    <figure
      {{with-copyable (concat "@extend %" prop.placeholder ", %as-pseudo;")}}
      class={{concat 'debug-' prop.placeholder '-before'}}
    >
      <figcaption>{{prop.name}}</figcaption>
    </figure>
  </li>
{{/each}}
</ul>
```