refactor: 💡 migrate typography to docs storybook
This commit is contained in:
10 files changed
+524
-245
No files matched your search
@@ -1,5 +1,8 @@
|
||||
module.exports = {
|
||||
stories: ['../addon/components/**/*.stories.(js|mdx)'],
|
||||
stories: [
|
||||
'../addon/components/**/*.stories.(js|mdx)',
|
||||
'../stories/**/*.stories.mdx',
|
||||
],
|
||||
addons: [
|
||||
'@storybook/addon-knobs',
|
||||
'@storybook/addon-actions',
|
||||
|
||||
@@ -1 +1,35 @@
|
||||
@import 'rose';
|
||||
|
||||
.swatches {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.swatch {
|
||||
width: 9rem;
|
||||
//border: 1px solid var(--ui-gray-subtler-4);
|
||||
border-radius: 4px;
|
||||
margin: 0 0.5rem 0.5rem 0 !important;
|
||||
box-shadow: 0px 3px 6px rgba(var(--stark-components), var(--opacity-3));
|
||||
|
||||
code {
|
||||
display: block !important;
|
||||
font-size: 0.65rem !important;
|
||||
max-width: 100% !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
overflow-x: scroll !important;
|
||||
color: var(--ui-gray) !important;
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
.swatch-chip {
|
||||
height: 5rem;
|
||||
border: 0.5rem solid var(--subtle);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.swatch-detail {
|
||||
border-top: 1px solid var(--ui-gray-subtler-4);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
};
|
||||
|
||||
const icons = {
|
||||
none: null,
|
||||
'alert-circle-fill': 'alert-circle-fill',
|
||||
'chevron-right': 'chevron-right',
|
||||
'copy-action': 'copy-action',
|
||||
'lock-closed': 'lock-closed',
|
||||
};
|
||||
|
||||
export const Normal = () => ({
|
||||
template: hbs`
|
||||
<Rose::Button
|
||||
@submit={{submit}}
|
||||
@disabled={{disabled}}
|
||||
@style={{style}}
|
||||
@iconLeft={{iconLeft}}
|
||||
@iconRight={{iconRight}}
|
||||
{{on "click" onClick}}
|
||||
>
|
||||
{{text}}
|
||||
</Rose::Button>
|
||||
`,
|
||||
context: {
|
||||
text: text('text', 'Button'),
|
||||
submit: boolean('submit', false),
|
||||
disabled: boolean('disabled', false),
|
||||
style: select(
|
||||
'style',
|
||||
{
|
||||
primary: 'primary',
|
||||
secondary: 'secondary',
|
||||
warning: 'warning',
|
||||
ghost: 'ghost',
|
||||
'inline-link-action': 'inline-link-action',
|
||||
},
|
||||
'primary'
|
||||
),
|
||||
iconLeft: select('iconLeft', icons, 'copy-action'),
|
||||
iconRight: select('iconRight', icons, 'chevron-right'),
|
||||
onClick: action('clicked'),
|
||||
},
|
||||
});
|
||||
|
||||
export const IconOnly = () => ({
|
||||
template: hbs`
|
||||
<p>Icon-only buttons visually hide their text, revealing just an icon.
|
||||
It's still important to include meaningful text in the body of the
|
||||
button for accessibility purposes.</p>
|
||||
|
||||
<Rose::Button
|
||||
@style="secondary"
|
||||
@iconOnly={{iconOnly}}
|
||||
>
|
||||
{{text}}
|
||||
</Rose::Button>
|
||||
`,
|
||||
context: {
|
||||
text: text('text', 'Button'),
|
||||
iconOnly: select('iconOnly', icons, 'lock-closed'),
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,339 @@
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
|
||||
<Meta title="Style Guide|Colors" />
|
||||
|
||||
# Colors
|
||||
|
||||
Colors are available using CSS custom properties. Find the color swatch you
|
||||
need and copy the CSS custom property variable into your stylesheet.
|
||||
Use only these properties when specifying colors instead of absolute SCSS color
|
||||
variables. This ensures consistency and dark mode compatibility.
|
||||
|
||||
**Tip**: Try it out in dark mode. Set your system to dark mode to see these
|
||||
swatches in a different light.
|
||||
|
||||
For example...
|
||||
```css
|
||||
.my-component {
|
||||
color: var(--stark);
|
||||
background-color: var(--subtle);
|
||||
}
|
||||
```
|
||||
|
||||
## Relative Poles
|
||||
|
||||
These colors depend on light or dark mode. Use these most often
|
||||
when specifying primary foreground and background colors.
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--subtle)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--subtle</code>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--stark)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--stark</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
## Absolute Poles
|
||||
|
||||
Some colors don't change in dark vs light mode. Use these values sparingly.
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--white)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--white</code>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--black)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--black</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
## Theme Colors
|
||||
|
||||
### Info
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--info-subtler-3)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--info-subtler-3</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--info-subtler-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--info-subtler-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--info-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--info-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--info)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--info</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--info-starker-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--info-starker-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--info-starker-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--info-starker-2</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Alert
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--alert-subtler-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--alert-subtler-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--alert-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--alert-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--alert)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--alert</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--alert-starker-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--alert-starker-1</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Warning
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--warning-subtler-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--warning-subtler-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--warning-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--warning-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--warning)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--warning</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--warning-starker-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--warning-starker-1</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Failure
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--failure-subtler-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--failure-subtler-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--failure-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--failure-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--failure)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--failure</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--failure-starker-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--failure-starker-1</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Success
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--success-subtler-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--success-subtler-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--success-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--success-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--success)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--success</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--success-starker-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--success-starker-1</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Action
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--action-subtler-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--action-subtler-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--action-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--action-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--action)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--action</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--action-starker-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--action-starker-1</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### UI Border
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-border-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-border-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-border)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-border</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### UI Border
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-6)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-subtler-6</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-5)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-subtler-5</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-4)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-subtler-4</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-3)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-subtler-3</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-subtler-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-starker-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-starker-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-starker-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-starker-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-starker-3)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-starker-3</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-starker-4)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-starker-4</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -1,27 +0,0 @@
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { text, boolean } from '@storybook/addon-knobs';
|
||||
|
||||
export default {
|
||||
title: 'Form/Checkbox',
|
||||
};
|
||||
|
||||
export const Normal = () => ({
|
||||
template: hbs`
|
||||
<Rose::Form::Checkbox
|
||||
@id={{id}}
|
||||
name={{name}}
|
||||
@label={{label}}
|
||||
@checked={{checked}}
|
||||
@error={{error}}
|
||||
disabled={{disabled}}
|
||||
/>
|
||||
`,
|
||||
context: {
|
||||
label: text('text', 'Checkbox 🛎'),
|
||||
id: text('id', 'checkbox-1'),
|
||||
name: text('name', 'checkbox-1'),
|
||||
checked: boolean('checked', false),
|
||||
error: boolean('error', false),
|
||||
disabled: boolean('disabled', false),
|
||||
},
|
||||
});
|
||||
@@ -1,38 +0,0 @@
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
export default {
|
||||
title: 'Form/Input',
|
||||
};
|
||||
|
||||
export const Normal = () => ({
|
||||
template: hbs`
|
||||
<Rose::Form::Input
|
||||
@type={{type}}
|
||||
@value={{value}}
|
||||
@label={{label}}
|
||||
@helperText={{helperText}}
|
||||
@error={{error}}
|
||||
disabled={{disabled}}
|
||||
readonly={{read-only}}
|
||||
/>
|
||||
`,
|
||||
context: {
|
||||
type: select(
|
||||
'type',
|
||||
{
|
||||
text: 'text',
|
||||
email: 'email',
|
||||
number: 'number',
|
||||
password: 'password',
|
||||
},
|
||||
'text'
|
||||
),
|
||||
value: text('value', 'Value'),
|
||||
label: text('label', 'Label'),
|
||||
helperText: text('helperText', 'Helper text'),
|
||||
disabled: boolean('disabled', false),
|
||||
'read-only': boolean('readonly', false),
|
||||
error: boolean('error', false),
|
||||
},
|
||||
});
|
||||
@@ -1,45 +0,0 @@
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
export default {
|
||||
title: 'Form/Select',
|
||||
};
|
||||
|
||||
export const Normal = () => ({
|
||||
template: hbs`
|
||||
<Rose::Form::Select
|
||||
@id={{id}}
|
||||
@value={{value}}
|
||||
@label={{label}}
|
||||
@helperText={{helperText}}
|
||||
disabled={{disabled}}
|
||||
@error={{error}}
|
||||
@onChange={{fn onChange}}
|
||||
as |select|
|
||||
>
|
||||
<select.option>Choose an option</select.option>
|
||||
<select.option @value="value-1">Value 1</select.option>
|
||||
<select.option @value="value-2">Value 2</select.option>
|
||||
<select.option @value="value-3">Value 3</select.option>
|
||||
</Rose::Form::Select>
|
||||
`,
|
||||
context: {
|
||||
value: select(
|
||||
'value',
|
||||
{
|
||||
null: null,
|
||||
'value-1': 'value-1',
|
||||
'value-2': 'value-2',
|
||||
'value-3': 'value-3',
|
||||
},
|
||||
null
|
||||
),
|
||||
id: text('id', 'field-id'),
|
||||
label: text('label', 'Label'),
|
||||
helperText: text('helperText', 'Helper text'),
|
||||
disabled: boolean('disabled', false),
|
||||
error: boolean('error', false),
|
||||
onChange: action('changed'),
|
||||
},
|
||||
});
|
||||
@@ -1,27 +0,0 @@
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { text, boolean } from '@storybook/addon-knobs';
|
||||
|
||||
export default {
|
||||
title: 'Form/Textarea',
|
||||
};
|
||||
|
||||
export const Normal = () => ({
|
||||
template: hbs`
|
||||
<Rose::Form::Textarea
|
||||
@value={{value}}
|
||||
@label={{label}}
|
||||
@helperText={{helperText}}
|
||||
@error={{error}}
|
||||
disabled={{disabled}}
|
||||
readonly={{read-only}}
|
||||
/>
|
||||
`,
|
||||
context: {
|
||||
value: text('value', 'Value'),
|
||||
label: text('label', 'Label'),
|
||||
helperText: text('helperText', 'Helper text'),
|
||||
disabled: boolean('disabled', false),
|
||||
'read-only': boolean('readonly', false),
|
||||
error: boolean('error', false),
|
||||
},
|
||||
});
|
||||
@@ -1,39 +0,0 @@
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
|
||||
export default {
|
||||
title: 'Icon',
|
||||
};
|
||||
|
||||
export const Normal = () => ({
|
||||
template: hbs`
|
||||
<Rose::Icon @name={{name}} @size={{size}} />
|
||||
|
||||
<br>
|
||||
|
||||
<p>For a full list of available icons, review the <code>dist</code> folder
|
||||
of the <code>@hashicorp/structure-icons</code> package.</p>
|
||||
`,
|
||||
context: {
|
||||
name: select(
|
||||
'name',
|
||||
{
|
||||
'check-circle-outline': 'check-circle-outline',
|
||||
'copy-action': 'copy-action',
|
||||
'unfold-more': 'unfold-more',
|
||||
'unfold-less': 'unfold-less',
|
||||
},
|
||||
'check-circle-outline'
|
||||
),
|
||||
|
||||
size: select(
|
||||
'size',
|
||||
{
|
||||
'large (24px / default)': 'large',
|
||||
'medium (16px)': 'medium',
|
||||
'small (12px)': 'small',
|
||||
},
|
||||
'large'
|
||||
),
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,147 @@
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
|
||||
<Meta title="Style Guide|Typography" />
|
||||
|
||||
# Typography
|
||||
|
||||
To specify custom typography, use the SCSS mixin.
|
||||
The <code>type</code> mixin accepts two parameters: a font size name
|
||||
(required) and an optional font weight name (normal, semibold, bold).
|
||||
This mixin sets both font size and line height, and optionally weight.
|
||||
|
||||
For example...
|
||||
|
||||
```scss
|
||||
@import "utilities/type";
|
||||
.my-component {
|
||||
@include type.type(m, bold);
|
||||
}
|
||||
```
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="column">Name</th>
|
||||
<th scope="column" class="number-col">Font Size</th>
|
||||
<th scope="column">SCSS</th>
|
||||
<th scope="column">Note</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>xl</code>
|
||||
</th>
|
||||
<td class="number-col">28</td>
|
||||
<td>
|
||||
<code>@include type.type(xl);</code>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>l</code>
|
||||
</th>
|
||||
<td class="number-col">20</td>
|
||||
<td>
|
||||
<code>@include type.type(l);</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>m</code>
|
||||
</th>
|
||||
<td class="number-col">16</td>
|
||||
<td>
|
||||
<code>@include type.type(m);</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>s</code>
|
||||
</th>
|
||||
<td class="number-col">14</td>
|
||||
<td>
|
||||
<code>@include type.type(s);</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>xs</code>
|
||||
</th>
|
||||
<td class="number-col">12</td>
|
||||
<td>
|
||||
<code>@include type.type(xs);</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>h1</code>
|
||||
</th>
|
||||
<td class="number-col">28</td>
|
||||
<td>
|
||||
<code>@include type.type(h1);</code>
|
||||
</td>
|
||||
<td>
|
||||
Same as xl, but different line height.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>h2</code>
|
||||
</th>
|
||||
<td class="number-col">20</td>
|
||||
<td>
|
||||
<code>@include type.type(h2);</code>
|
||||
</td>
|
||||
<td>
|
||||
Same as l, but different line height.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>h3</code>
|
||||
</th>
|
||||
<td class="number-col">16</td>
|
||||
<td>
|
||||
<code>@include type.type(h3);</code>
|
||||
</td>
|
||||
<td>
|
||||
Same as m, but different line height.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>button</code>
|
||||
</th>
|
||||
<td class="number-col">13</td>
|
||||
<td>
|
||||
<code>@include type.type(button);</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
Reference in new issue
Block a user