mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-16 18:17:31 +08:00
3b93bb4a9b
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. -->
53 lines
1.8 KiB
HTML
53 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
|
/>
|
|
<title>Design Tokens</title>
|
|
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
|
<link rel="stylesheet" href="../../scripts/tokens/preview.styles.css" />
|
|
</head>
|
|
<body>
|
|
<ion-app>
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-title>Design Tokens - Preview</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<ion-content class="ion-padding-horizontal">
|
|
<h1>Color Tokens</h1>
|
|
<div class="token-wrapper">{{colorTokens}}</div>
|
|
<hr />
|
|
<h1>Font Size Tokens</h1>
|
|
<div class="token-wrapper">{{fontSizeTokens}}</div>
|
|
<hr />
|
|
<h1>Font Weight Tokens</h1>
|
|
<div class="token-wrapper">{{fontWeightTokens}}</div>
|
|
<hr />
|
|
<h1>Letter Spacing Tokens</h1>
|
|
<div class="token-wrapper">{{letterSpacingTokens}}</div>
|
|
<hr />
|
|
<h1>Box Shadow Tokens</h1>
|
|
<div class="token-wrapper">{{boxShadowTokens}}</div>
|
|
<hr />
|
|
<h1>Border Size Tokens</h1>
|
|
<div class="token-wrapper">{{borderSizeTokens}}</div>
|
|
<hr />
|
|
<h1>Border Radius Tokens</h1>
|
|
<div class="token-wrapper">{{borderRadiusTokens}}</div>
|
|
<hr />
|
|
<h1>Border Style Tokens</h1>
|
|
<div class="token-wrapper">{{borderStyleTokens}}</div>
|
|
<hr />
|
|
<h1>Space Tokens</h1>
|
|
<div class="token-wrapper">{{spaceTokens}}</div>
|
|
</ion-content>
|
|
</ion-app>
|
|
</body>
|
|
</html>
|