Files
ionic-framework/core/scripts/tokens/preview.styles.css
Bernardo Cardoso 3b93bb4a9b feat(tokens): add html preview based on design-tokens (#29545)
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added new files to scripts/tokens for the html template and css to
style the generated preview
- Added Style Dictionary register for generating html elements for each
main token

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
2024-05-28 15:57:30 +01:00

64 lines
773 B
CSS

table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th,
td {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
}
th {
background-color: #f4f4f4;
}
thead th {
position: sticky;
top: 0;
background-color: #f4f4f4;
z-index: 1;
}
.color-swatch {
width: 50px;
height: 50px;
}
.font-size-token,
.weight-token,
.letter-spacing-token {
margin: 10px 0;
}
.border-token,
.shadow-token {
margin: 10px;
padding: 10px;
}
.border-token {
border: 1px solid #000;
}
.spacing-wrapper {
background-color: lightblue;
}
.spacing-wrapper > div {
background-color: #fff;
}
.token-wrapper:has(.spacing-wrapper) {
display: flex;
flex-direction: column;
gap: 20px;
}
hr {
background-color: #ccc;
margin: 20px 0;
}