mirror of https://github.com/rancher/dashboard.git
66 lines
2.0 KiB
Plaintext
66 lines
2.0 KiB
Plaintext
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
|
|
|
|
<Meta title='Design Systems' />
|
|
|
|
# Colors: Gray
|
|
|
|
<Story name='Colors: Gray'>
|
|
{{
|
|
components: {},
|
|
template: `
|
|
<div class="row">
|
|
<div class="col span-2">
|
|
<div class="swatch-dot" style="background: #141419;"></div>
|
|
<p>Dark: Sidebar & Block</p>
|
|
<p>Light: Primary Text</p>
|
|
</div>
|
|
<div class="col span-2">
|
|
<div class="swatch-dot" style="background: #1B1C21;"></div>
|
|
<p>Dark: Body Background</p>
|
|
<p>Light: None</p>
|
|
</div>
|
|
<div class="col span-2">
|
|
<div class="swatch-dot" style="background: #27292E;"></div>
|
|
<p>Dark: Input Fill</p>
|
|
<p>Light: None</p>
|
|
</div>
|
|
<div class="col span-2">
|
|
<div class="swatch-dot" style="background: #4A4B52;"></div>
|
|
<p>Dark: Borders & Buttons</p>
|
|
<p>Light: None</p>
|
|
</div>
|
|
<div class="col span-2">
|
|
<div class="swatch-dot" style="background: #6C6C76;"></div>
|
|
<p>Dark: Disabled Text</p>
|
|
<p>Light: Secondary Text</p>
|
|
</div>
|
|
<div class="col span-2">
|
|
<div class="swatch-dot" style="background: #B6B6C2;"></div>
|
|
<p>Dark: Secondary Text</p>
|
|
<p>Light: Disabled</p>
|
|
</div>
|
|
<div class="col span-2">
|
|
<div class="swatch-dot" style="background: #DCDEE7;"></div>
|
|
<p>Dark: None</p>
|
|
<p>Light: Borders & Buttons</p>
|
|
</div>
|
|
<div class="col span-2">
|
|
<div class="swatch-dot" style="background: #EEEFF4;"></div>
|
|
<p>Dark: None</p>
|
|
<p>Light: Input Fill</p>
|
|
</div>
|
|
<div class="col span-2">
|
|
<div class="swatch-dot" style="background: #F4F5FA;"></div>
|
|
<p>Dark: None</p>
|
|
<p>Light: Sidebar and Block</p>
|
|
</div>
|
|
<div class="col span-2">
|
|
<div class="swatch-dot" style="background: #FFFFFF;"></div>
|
|
<p>Dark: Primary Text</p>
|
|
<p>Light: Body Background</p>
|
|
</div>
|
|
</div>`
|
|
}}
|
|
</Story>
|
|
|