feat: add Arrow2 and Profile icons with multiple sizes and orientations
- Introduced new SVG icons for Arrow2 in sizes 16, 24, and 32 with orientations: up, down, left, and right. - Added Profile icon in sizes 16, 24, and 32. - Created a new index file for icons to facilitate easier imports. - Updated the main page to showcase the new icons in a grid layout. - Added global styles for the design system, including typography and spacing tokens. - Updated layout styles for better visual consistency.
This commit is contained in:
+174
-5
@@ -1,11 +1,180 @@
|
||||
---
|
||||
import Welcome from '../components/Welcome.astro';
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
|
||||
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
|
||||
import { Arrow2, Profile } from '../components/Icons/index.ts';
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Welcome />
|
||||
<main>
|
||||
<h1>Nova Design System</h1>
|
||||
<section>
|
||||
<h2>Icon — 16 / 24 / 32</h2>
|
||||
<div class="icon-grid">
|
||||
<div class="icon-row">
|
||||
<Arrow2 size={16} orientation="up" />
|
||||
<Arrow2 size={16} orientation="right" />
|
||||
<Arrow2 size={16} orientation="down" />
|
||||
<Arrow2 size={16} orientation="left" />
|
||||
</div>
|
||||
<div class="icon-row">
|
||||
<Arrow2 size={24} orientation="up" />
|
||||
<Arrow2 size={24} orientation="right" />
|
||||
<Arrow2 size={24} orientation="down" />
|
||||
<Arrow2 size={24} orientation="left" />
|
||||
</div>
|
||||
<div class="icon-row">
|
||||
<Arrow2 size={32} orientation="up" />
|
||||
<Arrow2 size={32} orientation="right" />
|
||||
<Arrow2 size={32} orientation="down" />
|
||||
<Arrow2 size={32} orientation="left" />
|
||||
</div>
|
||||
<div class="icon-row">
|
||||
<Profile size={16} />
|
||||
<Profile size={24} />
|
||||
<Profile size={32} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
main {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: var(--nds-spacing-xl) var(--nds-spacing-md);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--nds-type-display-small-size);
|
||||
font-weight: var(--nds-type-display-small-weight);
|
||||
line-height: var(--nds-type-display-small-line-height);
|
||||
letter-spacing: var(--nds-type-display-small-letter-spacing);
|
||||
margin-bottom: var(--nds-spacing-xl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--nds-type-heading-small-size);
|
||||
font-weight: var(--nds-type-heading-small-weight);
|
||||
line-height: var(--nds-type-heading-small-line-height);
|
||||
letter-spacing: var(--nds-type-heading-small-letter-spacing);
|
||||
color: var(--nds-text-muted);
|
||||
margin-bottom: var(--nds-spacing-md);
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: var(--nds-spacing-2xl);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--nds-spacing-sm);
|
||||
}
|
||||
|
||||
.icon-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--nds-spacing-xs);
|
||||
}
|
||||
|
||||
.icon-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--nds-spacing-lg);
|
||||
}
|
||||
|
||||
.icon-name {
|
||||
font-size: var(--nds-type-body-small-size);
|
||||
color: var(--nds-text-muted);
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-sizes {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--nds-spacing-md);
|
||||
color: var(--nds-default);
|
||||
}
|
||||
</style>
|
||||
<Arrow2 size={16} orientation="left" />
|
||||
</div>
|
||||
<div class="icon-row">
|
||||
<Arrow2 size={24} orientation="up" />
|
||||
<Arrow2 size={24} orientation="right" />
|
||||
<Arrow2 size={24} orientation="down" />
|
||||
<Arrow2 size={24} orientation="left" />
|
||||
</div>
|
||||
<div class="icon-row">
|
||||
<Arrow2 size={32} orientation="up" />
|
||||
<Arrow2 size={32} orientation="right" />
|
||||
<Arrow2 size={32} orientation="down" />
|
||||
<Arrow2 size={32} orientation="left" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
main {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: var(--nds-spacing-xl) var(--nds-spacing-md);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--nds-type-display-small-size);
|
||||
font-weight: var(--nds-type-display-small-weight);
|
||||
line-height: var(--nds-type-display-small-line-height);
|
||||
letter-spacing: var(--nds-type-display-small-letter-spacing);
|
||||
margin-bottom: var(--nds-spacing-xl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--nds-type-heading-small-size);
|
||||
font-weight: var(--nds-type-heading-small-weight);
|
||||
line-height: var(--nds-type-heading-small-line-height);
|
||||
letter-spacing: var(--nds-type-heading-small-letter-spacing);
|
||||
color: var(--nds-text-muted);
|
||||
margin-bottom: var(--nds-spacing-md);
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: var(--nds-spacing-2xl);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--nds-spacing-sm);
|
||||
}
|
||||
|
||||
.icon-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--nds-spacing-xs);
|
||||
}
|
||||
|
||||
.icon-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--nds-spacing-lg);
|
||||
}
|
||||
|
||||
.icon-name {
|
||||
font-size: var(--nds-type-body-small-size);
|
||||
color: var(--nds-text-muted);
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-sizes {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--nds-spacing-md);
|
||||
color: var(--nds-default);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user