36 lines
1.2 KiB
Text
36 lines
1.2 KiB
Text
---
|
|
title: Logo
|
|
---
|
|
import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
|
|
import { ComponentDocs } from '@site/src/components/component-docs.js'
|
|
import * as jsdoc from '@site/prebuild/jsdoc/components.logo.mjs'
|
|
import { FreeSewingLogoExample } from './_examples.js'
|
|
|
|
|
|
<DocusaurusDoc>
|
|
|
|
The __Logo__ component family provides the following components:
|
|
|
|
- [FreeSewingLogo](#freesewinglogo)
|
|
|
|
## FreeSewingLogo
|
|
|
|
:::tip Understanding the colors of the logo
|
|
The logo will always be filled with `currentColor` which is a specific keyword
|
|
that will be substituted with whatever the current text color is.
|
|
|
|
Furthermore, two logos will be stacked on top of each other.
|
|
The one filled with `currentColor` sits on top, and below it sits one that is
|
|
not filled, but stroked with `var(--background-base-100)`.
|
|
|
|
This ensures that if the logo is placed on a background with low contrast, it
|
|
stands out On the default background, the stroked version will be the same
|
|
color, so it will be invisible.
|
|
|
|
You can also set an explicit stroke color with the `stroke` prop, or control
|
|
`currentColor` by setting the `className` prop.
|
|
:::
|
|
<ComponentDocs docs={jsdoc.jsdocFreeSewingLogo} example={FreeSewingLogoExample} />
|
|
|
|
</DocusaurusDoc>
|
|
|