juyung/devscard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add item-title-suffix typography variant

Browse source
This commit is contained in:
Konrad Szwarc 2022-08-29 17:34:50 +02:00
parent de5967f959
commit 860be15d71
2 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/atoms/typography.astro
View file

@ -1,13 +1,14 @@
--- ---
type TypographyVariant = type TypographyVariant =
| 'item-title'
| 'item-subtitle'
| 'tile-title'
| 'tile-subtitle'
| 'main-title' | 'main-title'
| 'main-subtitle' | 'main-subtitle'
| 'section-title' | 'section-title'
| 'section-subtitle' | 'section-subtitle'
| 'item-title'
| 'item-title-suffix'
| 'item-subtitle'
| 'tile-title'
| 'tile-subtitle'
| 'paragraph'; | 'paragraph';
const variantToElement = { const variantToElement = {
@ -16,6 +17,7 @@ const variantToElement = {
'section-title': 'h2', 'section-title': 'h2',
'section-subtitle': 'h3', 'section-subtitle': 'h3',
'item-title': 'h3', 'item-title': 'h3',
'item-title-suffix': 'span',
'item-subtitle': 'p', 'item-subtitle': 'p',
'tile-title': 'h4', 'tile-title': 'h4',
'tile-subtitle': 'p', 'tile-subtitle': 'p',
@ -28,6 +30,7 @@ const variantToClassName = {
'section-title': 'text-3xl font-extrabold text-gray-900', 'section-title': 'text-3xl font-extrabold text-gray-900',
'section-subtitle': 'text-lg font-extrabold text-gray-900', 'section-subtitle': 'text-lg font-extrabold text-gray-900',
'item-title': 'text-xl font-extrabold text-gray-900', 'item-title': 'text-xl font-extrabold text-gray-900',
'item-title-suffix': 'text-xl font-medium text-gray-700',
'item-subtitle': 'text-md font-medium text-gray-700', 'item-subtitle': 'text-md font-medium text-gray-700',
'tile-title': 'text-sm font-medium text-gray-700', 'tile-title': 'text-sm font-medium text-gray-700',
'tile-subtitle': 'text-sm font-normal text-gray-500', 'tile-subtitle': 'text-sm font-normal text-gray-500',

4
src/pages/playground/typography.astro
View file

@ -29,6 +29,10 @@ const text = 'A quick brown fox jumps over the lazy dog';
<p class="mb-2 font-mono">item-title</p> <p class="mb-2 font-mono">item-title</p>
<Typography variant="item-title">{text}</Typography> <Typography variant="item-title">{text}</Typography>
</div> </div>
<div>
<p class="mb-2 font-mono">item-title-suffix</p>
<Typography variant="item-title-suffix">{text}</Typography>
</div>
<div> <div>
<p class="mb-2 font-mono">item-subtitle</p> <p class="mb-2 font-mono">item-subtitle</p>
<Typography variant="item-subtitle">{text}</Typography> <Typography variant="item-subtitle">{text}</Typography>