@etchteam/storybook-addon-design-token-tables
Version:
Storybook addon for design token tables
87 lines (73 loc) • 1.76 kB
CSS
.tokens {
line-height: 1.5;
margin-block: 1rem;
white-space: nowrap;
width: 100%;
th {
text-align: left;
}
th,
td {
width: 33.33%;
}
td {
min-height: 24px;
}
}
.tokens__preview--border {
border: var(--token-preview);
border-bottom-width: 0;
border-radius: .5rem 0 0 0;
border-right-width: 0;
height: 1rem;
width: 2rem;
}
.tokens__preview-cell--color {
background-image:
linear-gradient(to bottom, var(--token-preview), var(--token-preview)),
repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px);
padding: 0 ;
}
.tokens__preview-cell--opacity {
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, var(--token-preview)),
rgba(255, 255, 255, var(--token-preview))
),
repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px);
padding: 0 ;
}
.tokens__preview--font-family {
font-family: var(--token-preview) ;
}
.tokens__preview--font-size {
font-size: var(--token-preview) ;
line-height: 1.2;
}
.tokens__preview--line-height {
background: #f001;
height: calc(var(--token-preview) * 1em);
line-height: var(--token-preview) ;
}
.tokens__preview--font-weight {
font-weight: var(--token-preview) ;
}
.tokens__preview--radius {
border: 1px solid rgb(2, 156, 253);
border-radius: var(--token-preview) 0 0 0;
border-width: 2px 0 0 2px;
height: 1rem;
width: 2rem;
}
.tokens__preview--shadow {
box-shadow: var(--token-preview);
height: 0.5rem;
width: 100%;
}
.tokens__preview--spacing {
background: rgba(2, 156, 253, 0.2);
border: 2px solid rgb(2, 156, 253);
border-width: 0 2px;
height: 1rem;
width: var(--token-preview);
}