Drupal logo hat
ID: mantra_starter:drupal_logo_hat
A hat for `mantra_starter:drupal_logo`, drawn in the logo's own coordinate space so that it lands on the drop's head with no placement of its own. Use it through the logo's `hat` prop, or hand it to the logo's `accessories` slot to set the props below.
| Name | Label | Type | Description |
|---|---|---|---|
color
|
Color | String | The body of the hat: the crown, the cone, the band of the crown. Any CSS color. |
accent
|
Accent color | String | The trim: the hat band, the party stripes, the cuff of the bobble hat, the jewels of the crown. |
detail
|
Detail color | String | The small parts: the bobble, the stars on the wizard hat, the orbs of the crown. |
outline
|
Outline color | String | Drawn behind every shape, so it reads as an outline. Transparent by default on the hats whose body is dark enough not to need one. |
x
|
Nudge across | Number | Logo units, of the 681 the logo is wide. Positive moves right. |
y
|
Nudge down | Number | Logo units, of the 778 the logo is tall. Positive moves down. |
rotate
|
Tilt | Number | Degrees, about the middle of the hat band. Negative tilts to the left. -7 by default. |
scale
|
Scale | Number | 1 is the size the hat is drawn at. |
Recolored
A party hat in colors of its own. Each prop writes one CSS variable onto the group that carries the drawing, so a variable set further out -- a UI Skins theme, a page, a parent component -- still wins where a prop is left out.
Default
The hat on its own, in the box it is drawn for -- the same shape and viewBox as the logo, so the hat sits where it would sit on the drop's head. To see it worn, use `mantra_starter:drupal_logo`'s `hat` prop or its `accessories` slot.