Packages
corex
0.1.0-alpha.4
0.1.2
0.1.1
0.1.0
0.1.0-rc.1
0.1.0-rc.0
0.1.0-beta.5
0.1.0-beta.4
0.1.0-beta.3
0.1.0-beta.2
0.1.0-beta.1
0.1.0-alpha.33
0.1.0-alpha.32
0.1.0-alpha.31
0.1.0-alpha.30
0.1.0-alpha.29
0.1.0-alpha.28
0.1.0-alpha.27
0.1.0-alpha.26
0.1.0-alpha.25
0.1.0-alpha.24
0.1.0-alpha.23
0.1.0-alpha.22
0.1.0-alpha.21
0.1.0-alpha.20
0.1.0-alpha.19
0.1.0-alpha.18
0.1.0-alpha.17
0.1.0-alpha.16
0.1.0-alpha.15
0.1.0-alpha.14
0.1.0-alpha.13
0.1.0-alpha.12
0.1.0-alpha.11
0.1.0-alpha.10
0.1.0-alpha.9
0.1.0-alpha.8
0.1.0-alpha.7
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
Accessible and unstyled UI components library written in Elixir and TypeScript that integrates Zag.js state machines into the Phoenix Framework.
Current section
Files
Jump to
Current section
Files
priv/design/components/typo.css
@import "../main.css";
@import "./scrollbar.css";
@layer components {
.typo {
font-family: var(--font-ui);
font-size: var(--text-ui);
line-height: var(--text-ui--line-height);
font-weight: var(--font-weight-ui);
color: var(--color-root--text);
text-wrap: wrap;
&:focus-visible {
outline: none;
}
}
.typo h1 {
font-size: var(--text-ui-xl);
line-height: var(--text-ui-xl--line-height);
font-weight: var(--font-weight-ui-xl);
color: var(--color-ui--text);
margin-block: var(--spacing-ui);
&:focus-visible {
outline: none;
}
}
.typo h2 {
font-size: var(--text-ui-lg);
line-height: var(--text-ui-lg--line-height);
font-weight: var(--font-weight-ui-lg);
color: var(--color-ui--text);
margin-block: var(--spacing-ui);
&:focus-visible {
outline: none;
}
}
.typo h3 {
font-size: var(--text-ui-lg);
line-height: var(--text-ui-lg--line-height);
font-weight: var(--font-weight-ui-lg);
color: var(--color-ui--text);
margin-block: var(--spacing-ui);
&:focus-visible {
outline: none;
}
}
.typo h4 {
font-size: var(--text-ui);
line-height: var(--text-ui--line-height);
font-weight: var(--font-weight-ui);
color: var(--color-ui--text);
margin-block: var(--spacing-ui);
}
.typo p {
font-size: var(--text-ui);
line-height: var(--text-ui--line-height);
font-weight: var(--font-weight-ui);
color: var(--color-ui--text);
margin-block: var(--spacing-ui);
}
.typo small {
font-size: var(--text-ui-sm);
line-height: var(--text-ui-sm--line-height);
font-weight: var(--font-weight-ui-sm);
margin-block: var(--spacing-ui);
}
.typo mark {
background: var(--color-ui-success);
color: var(--color-ui-success--text);
padding: 0.1em 0.25em;
border-radius: 0.25em;
}
.typo abbr[title] {
border-bottom: 1px dotted var(--color-ui--border);
cursor: help;
text-decoration: none;
}
.typo sup,
.typo sub {
font-size: 0.75em;
line-height: 1;
position: relative;
vertical-align: baseline;
}
.typo sup {
top: -0.5em;
}
.typo sub {
bottom: -0.25em;
}
.typo kbd {
font-family: var(--font-mono);
background: var(--color-layer);
color: var(--color-layer--text);
border-radius: var(--radius-ui);
border: 1px solid var(--color-layer--border);
padding: 0.25em;
margin-inline: 0.25em;
}
.typo del {
text-decoration: line-through;
color: var(--color-ui--alert);
}
.typo ins {
text-decoration: underline;
color: var(--color-ui--success);
}
.typo b,
.typo strong {
font-weight: var(--font-weight-ui-lg);
}
.typo i,
.typo em {
font-style: italic;
}
.typo blockquote {
background: var(--color-layer);
color: var(--color-layer--text);
box-shadow: var(--shadow-layer);
font-style: italic;
border-end-end-radius: var(--radius-ui);
border-start-end-radius: var(--radius-ui);
border: 1px solid var(--color-layer--border);
border-inline-start: 4px solid var(--color-layer--info);
margin-block: var(--spacing-ui);
padding: var(--spacing-ui-padding);
gap: var(--spacing-ui-gap);
width: fit-content;
& p {
margin-block: 0;
}
}
.typo hr {
border-top: 1px solid var(--color-ui--border);
margin-block: 5em;
margin-inline: auto;
width: 80%;
}
.typo dt {
font-weight: var(--font-weight-ui-lg);
font-style: italic;
}
.typo figcaption {
font-size: var(--text-ui-sm);
line-height: var(--text-ui-sm--line-height);
color: var(--color-ui--muted);
margin-top: 1em;
}
.typo table {
display: block;
width: 100%;
font-size: var(--text-ui);
line-height: var(--text-ui--line-height);
margin-block: 2em;
border-collapse: collapse;
}
.typo table th,
.typo table td {
text-align: left;
padding: 1em;
border-bottom: 1px solid var(--color-ui--border);
white-space: wrap;
}
.typo table a {
white-space: wrap;
}
.typo ul,
.typo ol {
list-style-position: outside;
}
.typo li {
font-size: var(--text-ui);
line-height: var(--text-ui--line-height);
}
.typo ul {
list-style-type: disc;
}
.typo ol {
list-style-type: decimal;
}
.typo li::marker {
color: currentcolor;
}
.typo pre {
@apply scrollbar scrollbar--sm;
font-family: var(--font-code);
font-size: var(--text-ui-sm);
line-height: var(--text-ui-sm--line-height);
padding: var(--spacing-ui-padding-sm);
background-color: var(--color-ui);
color: var(--color-ui--text);
border: 1px solid var(--color-ui--border);
overflow: auto;
}
}