mirror of https://github.com/rancher/dashboard.git
37 lines
1.5 KiB
Plaintext
37 lines
1.5 KiB
Plaintext
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
|
|
|
|
<Meta title='Design Systems' />
|
|
|
|
# Colors: Essential
|
|
|
|
<Preview>
|
|
<Story name="Colors: Essential">
|
|
{{
|
|
components: {},
|
|
template: `
|
|
<div class="row">
|
|
<div class="col span-2">
|
|
<div class="swatch-dot" style="background: var(--body-text);"></div>
|
|
<h3>Primary Text</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
<div class="col span-2">
|
|
<div class="swatch-dot" style="background: var(--secondary);"></div>
|
|
<h3>Secondary Text</h3>
|
|
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
<div class="col span-2">
|
|
<div class="swatch-dot" style="background: var(--link-text);"></div>
|
|
<h3>Interactive Text</h3>
|
|
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
<div class="col span-2">
|
|
<div class="swatch-dot" style="background: var(--muted);"></div>
|
|
<h3>Disabled Text</h3>
|
|
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>`
|
|
}}
|
|
</Story>
|
|
</Preview>
|