unkn0wn/nova-design-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: unkn0wn/nova-design-system:35b9ca30cd519e835d2a0e0ab2ce88249151d846
Branches Tags
unkn0wn/nova-design-system:main
..
compare: unkn0wn/nova-design-system:18702da0b640fe93abace97851250c1980305531
Branches Tags
unkn0wn/nova-design-system:main

4 Commits
35b9ca30cd .. 18702da0b6

Author SHA1 Message Date
unkn0wn 18702da0b6 feat: update icon exports and add Search icon with multiple sizes 2026-05-15 18:51:05 +02:00
unkn0wn 678ce7f36f feat: add Share icon with multiple sizes (16, 24, 32) and update index export 2026-05-15 18:44:25 +02:00
unkn0wn a67d5eae12 feat: enforce required size prop and remove orientation prop from profile icon 2026-05-15 18:42:55 +02:00
unkn0wn 5323483d65 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.
 2026-05-15 18:38:11 +02:00
31 changed files with 320 additions and 8 deletions
Expand all files Collapse all files
src/components/Icons/Arrow2/Arrow2.astro
+45
View File
@@ -0,0 +1,45 @@
---
import arrow16down from './svgs/arrow2-16-down.svg?raw';
import arrow16left from './svgs/arrow2-16-left.svg?raw';
import arrow16right from './svgs/arrow2-16-right.svg?raw';
import arrow16up from './svgs/arrow2-16-up.svg?raw';
import arrow24down from './svgs/arrow2-24-down.svg?raw';
import arrow24left from './svgs/arrow2-24-left.svg?raw';
import arrow24right from './svgs/arrow2-24-right.svg?raw';
import arrow24up from './svgs/arrow2-24-up.svg?raw';
import arrow32down from './svgs/arrow2-32-down.svg?raw';
import arrow32left from './svgs/arrow2-32-left.svg?raw';
import arrow32right from './svgs/arrow2-32-right.svg?raw';
import arrow32up from './svgs/arrow2-32-up.svg?raw';
export interface Props {
size: 16 | 24 | 32;
orientation: 'up' | 'down' | 'left' | 'right';
label?: string;
class?: string;
}
const { size = 24, orientation = 'down', label, class: className } = Astro.props;
let raw: string;
if (size === 16 && orientation === 'down') raw = arrow16down;
else if (size === 16 && orientation === 'left') raw = arrow16left;
else if (size === 16 && orientation === 'right') raw = arrow16right;
else if (size === 16 && orientation === 'up') raw = arrow16up;
else if (size === 24 && orientation === 'down') raw = arrow24down;
else if (size === 24 && orientation === 'left') raw = arrow24left;
else if (size === 24 && orientation === 'right') raw = arrow24right;
else if (size === 24 && orientation === 'up') raw = arrow24up;
else if (size === 32 && orientation === 'down') raw = arrow32down;
else if (size === 32 && orientation === 'left') raw = arrow32left;
else if (size === 32 && orientation === 'right') raw = arrow32right;
else if (size === 32 && orientation === 'up') raw = arrow32up;
else raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size and orientation.
const classes = ['nds-icon-arrow2', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
src/components/Icons/Arrow2/svgs/arrow2-16-down.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.44167 9.69166C8.32448 9.8087 8.16563 9.87444 8 9.87444C7.83438 9.87444 7.67553 9.8087 7.55834 9.69166L5.20084 7.33499C5.08365 7.21775 5.01783 7.05875 5.01787 6.89297C5.01791 6.7272 5.0838 6.56823 5.20105 6.45104C5.31829 6.33384 5.47729 6.26803 5.64307 6.26807C5.80884 6.26811 5.96781 6.334 6.085 6.45124L8 8.36624L9.915 6.45124C10.0328 6.33734 10.1907 6.27427 10.3545 6.27561C10.5184 6.27696 10.6752 6.34262 10.7911 6.45844C10.9071 6.57427 10.9729 6.731 10.9744 6.89487C10.9759 7.05874 10.913 7.21665 10.7992 7.33458L8.44209 9.69208L8.44167 9.69166Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 723 B

src/components/Icons/Arrow2/svgs/arrow2-16-left.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.30833 7.55834C6.19129 7.67553 6.12555 7.83439 6.12555 8.00001C6.12555 8.16564 6.19129 8.32449 6.30833 8.44168L8.665 10.7992C8.72305 10.8572 8.79197 10.9032 8.86781 10.9346C8.94366 10.966 9.02494 10.9822 9.10702 10.9821C9.1891 10.9821 9.27038 10.9659 9.34621 10.9345C9.42204 10.9031 9.49093 10.857 9.54896 10.799C9.60699 10.7409 9.65301 10.672 9.6844 10.5962C9.7158 10.5203 9.73195 10.439 9.73193 10.3569C9.73191 10.2749 9.71572 10.1936 9.68429 10.1178C9.65286 10.0419 9.6068 9.97304 9.54875 9.91501L7.63417 8.00001L9.54917 6.08501C9.60889 6.02738 9.65653 5.95844 9.68932 5.8822C9.72211 5.80597 9.73939 5.72396 9.74015 5.64098C9.74091 5.55799 9.72514 5.47568 9.69375 5.39886C9.66236 5.32204 9.61599 5.25223 9.55733 5.19352C9.49868 5.13481 9.42892 5.08837 9.35212 5.05691C9.27532 5.02545 9.19303 5.00959 9.11005 5.01027C9.02706 5.01096 8.94504 5.02816 8.86877 5.06088C8.7925 5.0936 8.72352 5.14118 8.66583 5.20084L6.30833 7.55834Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

src/components/Icons/Arrow2/svgs/arrow2-16-right.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.69167 7.55834C9.80871 7.67553 9.87445 7.83439 9.87445 8.00001C9.87445 8.16564 9.80871 8.32449 9.69167 8.44168L7.335 10.7992C7.27695 10.8572 7.20803 10.9032 7.13219 10.9346C7.05634 10.966 6.97506 10.9822 6.89298 10.9821C6.8109 10.9821 6.72962 10.9659 6.65379 10.9345C6.57796 10.9031 6.50907 10.857 6.45104 10.799C6.39301 10.7409 6.34699 10.672 6.3156 10.5962C6.2842 10.5203 6.26805 10.439 6.26807 10.3569C6.26809 10.2749 6.28428 10.1936 6.31571 10.1178C6.34714 10.0419 6.3932 9.97304 6.45125 9.91501L8.36583 8.00001L6.45083 6.08501C6.39111 6.02738 6.34347 5.95844 6.31068 5.8822C6.27789 5.80597 6.26061 5.72396 6.25985 5.64098C6.25909 5.55799 6.27486 5.47568 6.30625 5.39886C6.33764 5.32204 6.38401 5.25223 6.44267 5.19352C6.50132 5.13481 6.57108 5.08837 6.64788 5.05691C6.72468 5.02545 6.80697 5.00959 6.88995 5.01027C6.97294 5.01096 7.05496 5.02816 7.13123 5.06088C7.2075 5.0936 7.27648 5.14118 7.33417 5.20084L9.69167 7.55834Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

src/components/Icons/Arrow2/svgs/arrow2-16-up.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.55833 6.30833C7.67552 6.19129 7.83437 6.12555 8 6.12555C8.16562 6.12555 8.32447 6.19129 8.44166 6.30833L10.7992 8.665C10.8572 8.72305 10.9032 8.79197 10.9346 8.86781C10.966 8.94366 10.9822 9.02494 10.9821 9.10702C10.9821 9.1891 10.9659 9.27038 10.9345 9.34621C10.9031 9.42204 10.857 9.49093 10.799 9.54896C10.7409 9.60699 10.672 9.65301 10.5961 9.6844C10.5203 9.7158 10.439 9.73195 10.3569 9.73193C10.2748 9.73191 10.1936 9.71572 10.1177 9.68429C10.0419 9.65286 9.97302 9.6068 9.915 9.54875L8 7.63417L6.085 9.54917C6.02737 9.60889 5.95843 9.65653 5.88219 9.68932C5.80595 9.72211 5.72395 9.73939 5.64096 9.74015C5.55798 9.74091 5.47567 9.72514 5.39884 9.69375C5.32202 9.66236 5.25222 9.61599 5.19351 9.55733C5.1348 9.49868 5.08835 9.42892 5.05689 9.35212C5.02543 9.27532 5.00958 9.19303 5.01026 9.11005C5.01094 9.02706 5.02814 8.94504 5.06086 8.86877C5.09358 8.7925 5.14116 8.72352 5.20083 8.66583L7.55833 6.30833Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

src/components/Icons/Arrow2/svgs/arrow2-24-down.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.795 15.045C12.5841 15.2557 12.2981 15.374 12 15.374C11.7019 15.374 11.4159 15.2557 11.205 15.045L6.9615 10.803C6.75056 10.592 6.63209 10.3058 6.63216 10.0074C6.63223 9.70897 6.75083 9.42283 6.96188 9.21188C7.17292 9.00094 7.45912 8.88247 7.75752 8.88254C8.05591 8.88261 8.34205 9.00121 8.553 9.21226L12 12.6593L15.447 9.21226C15.6591 9.00723 15.9432 8.8937 16.2382 8.89612C16.5332 8.89855 16.8154 9.01673 17.0241 9.22521C17.2327 9.4337 17.3512 9.71581 17.3539 10.0108C17.3566 10.3058 17.2433 10.59 17.0385 10.8023L12.7958 15.0458L12.795 15.045Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 719 B

src/components/Icons/Arrow2/svgs/arrow2-24-left.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.95499 11.205C8.74431 11.4159 8.62598 11.7019 8.62598 12C8.62598 12.2981 8.74431 12.5841 8.95499 12.795L13.197 17.0385C13.3015 17.143 13.4255 17.2258 13.5621 17.2823C13.6986 17.3388 13.8449 17.3679 13.9926 17.3678C14.1404 17.3678 14.2867 17.3387 14.4232 17.2821C14.5597 17.2255 14.6837 17.1426 14.7881 17.0381C14.8926 16.9336 14.9754 16.8096 15.0319 16.6731C15.0884 16.5365 15.1175 16.3902 15.1175 16.2425C15.1174 16.0947 15.0883 15.9484 15.0317 15.812C14.9751 15.6755 14.8922 15.5515 14.7877 15.447L11.3415 12L14.7885 8.553C14.896 8.44927 14.9817 8.32518 15.0408 8.18795C15.0998 8.05072 15.1309 7.90312 15.1323 7.75374C15.1336 7.60437 15.1052 7.45621 15.0487 7.31793C14.9922 7.17964 14.9088 7.054 14.8032 6.94832C14.6976 6.84264 14.572 6.75905 14.4338 6.70242C14.2956 6.64578 14.1474 6.61725 13.9981 6.61848C13.8487 6.6197 13.7011 6.65067 13.5638 6.70956C13.4265 6.76846 13.3023 6.8541 13.1985 6.9615L8.95499 11.205Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

src/components/Icons/Arrow2/svgs/arrow2-24-right.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.045 11.205C15.2557 11.4159 15.374 11.7019 15.374 12C15.374 12.2981 15.2557 12.5841 15.045 12.795L10.803 17.0385C10.6985 17.143 10.5745 17.2258 10.4379 17.2823C10.3014 17.3388 10.1551 17.3679 10.0074 17.3678C9.85962 17.3678 9.71333 17.3387 9.57684 17.2821C9.44035 17.2255 9.31634 17.1426 9.21189 17.0381C9.10744 16.9336 9.02459 16.8096 8.96808 16.6731C8.91158 16.5365 8.88251 16.3902 8.88254 16.2425C8.88258 16.0947 8.91171 15.9484 8.96829 15.812C9.02486 15.6755 9.10776 15.5515 9.21226 15.447L12.6585 12L9.21151 8.553C9.10402 8.44927 9.01825 8.32518 8.95923 8.18795C8.90021 8.05072 8.8691 7.90312 8.86774 7.75374C8.86637 7.60437 8.89476 7.45621 8.95126 7.31793C9.00776 7.17964 9.09124 7.054 9.19682 6.94832C9.3024 6.84264 9.42797 6.75905 9.5662 6.70242C9.70443 6.64578 9.85255 6.61725 10.0019 6.61848C10.1513 6.6197 10.2989 6.65067 10.4362 6.70956C10.5735 6.76846 10.6977 6.8541 10.8015 6.9615L15.045 11.205Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

src/components/Icons/Arrow2/svgs/arrow2-24-up.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.205 8.95499C11.4159 8.74431 11.7019 8.62598 12 8.62598C12.2981 8.62598 12.5841 8.74431 12.795 8.95499L17.0385 13.197C17.143 13.3015 17.2258 13.4255 17.2823 13.5621C17.3388 13.6986 17.3679 13.8449 17.3678 13.9926C17.3678 14.1404 17.3387 14.2867 17.2821 14.4232C17.2255 14.5597 17.1426 14.6837 17.0381 14.7881C16.9336 14.8926 16.8096 14.9754 16.6731 15.0319C16.5365 15.0884 16.3902 15.1175 16.2425 15.1175C16.0947 15.1174 15.9484 15.0883 15.812 15.0317C15.6755 14.9751 15.5515 14.8922 15.447 14.7877L12 11.3415L8.553 14.7885C8.44927 14.896 8.32518 14.9817 8.18795 15.0408C8.05072 15.0998 7.90312 15.1309 7.75374 15.1323C7.60437 15.1336 7.45621 15.1052 7.31793 15.0487C7.17964 14.9922 7.054 14.9088 6.94832 14.8032C6.84264 14.6976 6.75905 14.572 6.70242 14.4338C6.64578 14.2956 6.61725 14.1474 6.61848 13.9981C6.6197 13.8487 6.65067 13.7011 6.70956 13.5638C6.76846 13.4265 6.8541 13.3023 6.9615 13.1985L11.205 8.95499Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

src/components/Icons/Arrow2/svgs/arrow2-32-down.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1483 20.3984C16.8436 20.7027 16.4306 20.8736 16 20.8736C15.5694 20.8736 15.1564 20.7027 14.8517 20.3984L8.72217 14.271C8.41747 13.9662 8.24634 13.5528 8.24644 13.1218C8.24655 12.6908 8.41786 12.2774 8.72271 11.9727C9.02755 11.668 9.44095 11.4969 9.87197 11.497C10.303 11.4971 10.7163 11.6684 11.021 11.9733L16 16.9523L20.979 11.9733C21.2853 11.6771 21.6957 11.5131 22.1218 11.5166C22.5479 11.5201 22.9555 11.6908 23.257 11.992C23.5584 12.2931 23.7295 12.7006 23.7334 13.1267C23.7373 13.5528 23.5737 13.9633 23.2778 14.2699L17.1494 20.3994L17.1483 20.3984Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 730 B

src/components/Icons/Arrow2/svgs/arrow2-32-left.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6016 14.8517C11.2973 15.1563 11.1264 15.5694 11.1264 16C11.1264 16.4306 11.2973 16.8436 11.6016 17.1483L17.729 23.2778C17.8799 23.4287 18.0591 23.5484 18.2563 23.63C18.4535 23.7116 18.6648 23.7536 18.8782 23.7535C19.0917 23.7535 19.303 23.7114 19.5001 23.6297C19.6973 23.548 19.8764 23.4282 20.0273 23.2773C20.1781 23.1263 20.2978 22.9472 20.3794 22.75C20.4611 22.5528 20.503 22.3414 20.503 22.128C20.5029 21.9146 20.4609 21.7033 20.3791 21.5061C20.2974 21.309 20.1777 21.1299 20.0267 20.979L15.0488 16L20.0278 11.021C20.1831 10.8712 20.307 10.6919 20.3922 10.4937C20.4775 10.2955 20.5224 10.0823 20.5244 9.86651C20.5264 9.65074 20.4853 9.43674 20.4037 9.237C20.3221 9.03725 20.2015 8.85576 20.049 8.70312C19.8965 8.55047 19.7152 8.42972 19.5155 8.34792C19.3158 8.26612 19.1019 8.22491 18.8861 8.22668C18.6703 8.22845 18.4571 8.27318 18.2588 8.35825C18.0605 8.44332 17.8811 8.56703 17.7311 8.72216L11.6016 14.8517Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

src/components/Icons/Arrow2/svgs/arrow2-32-right.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3984 14.8517C20.7027 15.1563 20.8736 15.5694 20.8736 16C20.8736 16.4306 20.7027 16.8436 20.3984 17.1483L14.271 23.2778C14.1201 23.4287 13.9409 23.5484 13.7437 23.63C13.5465 23.7116 13.3352 23.7536 13.1218 23.7535C12.9084 23.7535 12.697 23.7114 12.4999 23.6297C12.3027 23.548 12.1236 23.4282 11.9727 23.2773C11.8219 23.1263 11.7022 22.9472 11.6206 22.75C11.5389 22.5528 11.497 22.3414 11.497 22.128C11.4971 21.9146 11.5391 21.7033 11.6209 21.5061C11.7026 21.309 11.8223 21.1299 11.9733 20.979L16.9512 16L11.9722 11.021C11.8169 10.8712 11.693 10.6919 11.6078 10.4937C11.5225 10.2955 11.4776 10.0823 11.4756 9.86651C11.4736 9.65074 11.5147 9.43674 11.5963 9.237C11.6779 9.03725 11.7985 8.85576 11.951 8.70312C12.1035 8.55047 12.2848 8.42972 12.4845 8.34792C12.6842 8.26612 12.8981 8.22491 13.1139 8.22668C13.3297 8.22845 13.5429 8.27318 13.7412 8.35825C13.9395 8.44332 14.1189 8.56703 14.2689 8.72216L20.3984 14.8517Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

src/components/Icons/Arrow2/svgs/arrow2-32-up.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8517 11.6017C15.1563 11.2974 15.5694 11.1264 16 11.1264C16.4306 11.1264 16.8436 11.2974 17.1483 11.6017L23.2778 17.729C23.4287 17.8799 23.5484 18.0591 23.63 18.2563C23.7116 18.4535 23.7536 18.6648 23.7535 18.8783C23.7535 19.0917 23.7114 19.303 23.6297 19.5001C23.548 19.6973 23.4282 19.8764 23.2773 20.0273C23.1263 20.1782 22.9472 20.2978 22.75 20.3795C22.5528 20.4611 22.3414 20.5031 22.128 20.503C21.9146 20.503 21.7033 20.4609 21.5061 20.3792C21.309 20.2974 21.1299 20.1777 20.979 20.0268L16 15.0488L11.021 20.0278C10.8712 20.1831 10.6919 20.307 10.4937 20.3922C10.2955 20.4775 10.0823 20.5224 9.86651 20.5244C9.65074 20.5264 9.43674 20.4854 9.237 20.4038C9.03725 20.3221 8.85576 20.2016 8.70312 20.0491C8.55047 19.8966 8.42972 19.7152 8.34792 19.5155C8.26612 19.3159 8.22491 19.1019 8.22668 18.8861C8.22845 18.6704 8.27318 18.4571 8.35825 18.2588C8.44332 18.0605 8.56703 17.8811 8.72216 17.7312L14.8517 11.6017Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

src/components/Icons/index.ts
+4
View File
@@ -0,0 +1,4 @@
export { default as Arrow2Icon } from './Arrow2/Arrow2.astro';
export { default as ProfileIcon } from './profile/profile.astro';
export { default as ShareIcon } from './share/share.astro';
export { default as SearchIcon } from './search/search.astro';
src/components/Icons/profile/profile.astro
+27
View File
@@ -0,0 +1,27 @@
---
import profile16 from './svgs/profile-16.svg?raw';
import profile24 from './svgs/profile-24.svg?raw';
import profile32 from './svgs/profile-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16 ) raw = profile16;
else if (size === 24 ) raw = profile24;
else if (size === 32 ) raw = profile32;
else raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size.
const classes = ['nds-icon-profile', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
src/components/Icons/profile/svgs/profile-16.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.77778 5.22222C5.77778 4.63285 6.0119 4.06762 6.42865 3.65087C6.8454 3.23413 7.41063 3 8 3C8.58937 3 9.1546 3.23413 9.57135 3.65087C9.9881 4.06762 10.2222 4.63285 10.2222 5.22222C10.2222 5.81159 9.9881 6.37682 9.57135 6.79357C9.1546 7.21032 8.58937 7.44444 8 7.44444C7.41063 7.44444 6.8454 7.21032 6.42865 6.79357C6.0119 6.37682 5.77778 5.81159 5.77778 5.22222ZM5.77778 8.55556C5.04107 8.55556 4.33453 8.84821 3.81359 9.36915C3.29266 9.89008 3 10.5966 3 11.3333C3 11.7754 3.17559 12.1993 3.48816 12.5118C3.80072 12.8244 4.22464 13 4.66667 13H11.3333C11.7754 13 12.1993 12.8244 12.5118 12.5118C12.8244 12.1993 13 11.7754 13 11.3333C13 10.5966 12.7073 9.89008 12.1864 9.36915C11.6655 8.84821 10.9589 8.55556 10.2222 8.55556H5.77778Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 903 B

src/components/Icons/profile/svgs/profile-24.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7.27778C8 6.27585 8.42143 5.31496 9.17157 4.60649C9.92172 3.89801 10.9391 3.5 12 3.5C13.0609 3.5 14.0783 3.89801 14.8284 4.60649C15.5786 5.31496 16 6.27585 16 7.27778C16 8.27971 15.5786 9.2406 14.8284 9.94907C14.0783 10.6575 13.0609 11.0556 12 11.0556C10.9391 11.0556 9.92172 10.6575 9.17157 9.94907C8.42143 9.2406 8 8.27971 8 7.27778ZM8 12.9444C6.67392 12.9444 5.40215 13.442 4.46447 14.3276C3.52678 15.2131 3 16.4143 3 17.6667C3 18.4181 3.31607 19.1388 3.87868 19.6701C4.44129 20.2015 5.20435 20.5 6 20.5H18C18.7956 20.5 19.5587 20.2015 20.1213 19.6701C20.6839 19.1388 21 18.4181 21 17.6667C21 16.4143 20.4732 15.2131 19.5355 14.3276C18.5979 13.442 17.3261 12.9444 16 12.9444H8Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 854 B

src/components/Icons/profile/svgs/profile-32.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2222 8.77778C10.2222 7.24542 10.831 5.77582 11.9145 4.69227C12.998 3.60873 14.4676 3 16 3C17.5324 3 19.002 3.60873 20.0855 4.69227C21.1691 5.77582 21.7778 7.24542 21.7778 8.77778C21.7778 10.3101 21.1691 11.7797 20.0855 12.8633C19.002 13.9468 17.5324 14.5556 16 14.5556C14.4676 14.5556 12.998 13.9468 11.9145 12.8633C10.831 11.7797 10.2222 10.3101 10.2222 8.77778ZM10.2222 17.4444C8.30677 17.4444 6.46977 18.2054 5.11534 19.5598C3.76091 20.9142 3 22.7512 3 24.6667C3 25.8159 3.45655 26.9181 4.2692 27.7308C5.08186 28.5435 6.18406 29 7.33333 29H24.6667C25.8159 29 26.9181 28.5435 27.7308 27.7308C28.5435 26.9181 29 25.8159 29 24.6667C29 22.7512 28.2391 20.9142 26.8847 19.5598C25.5302 18.2054 23.6932 17.4444 21.7778 17.4444H10.2222Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 906 B

src/components/Icons/search/search.astro
+27
View File
@@ -0,0 +1,27 @@
---
import search16 from './svgs/search-16.svg?raw';
import search24 from './svgs/search-24.svg?raw';
import search32 from './svgs/search-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16 ) raw = search16;
else if (size === 24 ) raw = search24;
else if (size === 32 ) raw = search32;
else raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size.
const classes = ['nds-icon-search', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
src/components/Icons/search/svgs/search-16.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.69844 10.3969C5.66477 10.3969 4.79004 10.0388 4.07425 9.32262C3.35846 8.60645 3.00038 7.73172 3 6.69843C2.99962 5.66515 3.35771 4.79042 4.07425 4.07425C4.7908 3.35808 5.66553 3 6.69844 3C7.73134 3 8.60626 3.35808 9.32319 4.07425C10.0401 4.79042 10.398 5.66515 10.3969 6.69843C10.3969 7.11569 10.3305 7.50925 10.1977 7.87909C10.065 8.24893 9.88478 8.5761 9.65718 8.8606L12.8435 12.0469C12.9478 12.1513 13 12.284 13 12.4452C13 12.6064 12.9478 12.7392 12.8435 12.8435C12.7392 12.9478 12.6064 13 12.4452 13C12.284 13 12.1513 12.9478 12.0469 12.8435L8.8606 9.65718C8.5761 9.88478 8.24893 10.065 7.87909 10.1977C7.50925 10.3305 7.11569 10.3969 6.69844 10.3969ZM6.69844 9.25889C7.40967 9.25889 8.01432 9.01005 8.51238 8.51237C9.01043 8.0147 9.25927 7.41005 9.25889 6.69843C9.25851 5.98682 9.00967 5.38236 8.51238 4.88506C8.01508 4.38777 7.41043 4.13874 6.69844 4.13798C5.98644 4.13722 5.38198 4.38625 4.88506 4.88506C4.38815 5.38388 4.13912 5.98834 4.13798 6.69843C4.13684 7.40853 4.38587 8.01318 4.88506 8.51237C5.38426 9.01157 5.98872 9.26041 6.69844 9.25889Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

src/components/Icons/search/svgs/search-24.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.65718 16.3144C7.79659 16.3144 6.22208 15.6698 4.93366 14.3807C3.64524 13.0916 3.00068 11.5171 3 9.65718C2.99932 7.79727 3.64387 6.22276 4.93366 4.93366C6.22344 3.64455 7.79795 3 9.65718 3C11.5164 3 13.0913 3.64455 14.3817 4.93366C15.6722 6.22276 16.3164 7.79727 16.3144 9.65718C16.3144 10.4083 16.1949 11.1166 15.9559 11.7824C15.7169 12.4481 15.3926 13.037 14.9829 13.5491L20.7183 19.2845C20.9061 19.4723 21 19.7112 21 20.0014C21 20.2916 20.9061 20.5306 20.7183 20.7183C20.5306 20.9061 20.2916 21 20.0014 21C19.7112 21 19.4723 20.9061 19.2845 20.7183L13.5491 14.9829C13.037 15.3926 12.4481 15.7169 11.7824 15.9559C11.1166 16.1949 10.4083 16.3144 9.65718 16.3144ZM9.65718 14.266C10.9374 14.266 12.0258 13.8181 12.9223 12.9223C13.8188 12.0265 14.2667 10.9381 14.266 9.65718C14.2653 8.37627 13.8174 7.28825 12.9223 6.39312C12.0271 5.49798 10.9388 5.04973 9.65718 5.04836C8.37559 5.047 7.28757 5.49525 6.39312 6.39312C5.49866 7.29098 5.05041 8.379 5.04836 9.65718C5.04632 10.9354 5.49457 12.0237 6.39312 12.9223C7.29167 13.8208 8.37969 14.2687 9.65718 14.266Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

src/components/Icons/search/svgs/search-32.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.6159 22.2319C9.9284 22.2319 7.65411 21.3008 5.79306 19.4388C3.93201 17.5768 3.00099 15.3025 3 12.6159C2.99901 9.92939 3.93003 7.6551 5.79306 5.79306C7.65608 3.93102 9.93038 3 12.6159 3C15.3015 3 17.5763 3.93102 19.4403 5.79306C21.3043 7.6551 22.2348 9.92939 22.2319 12.6159C22.2319 13.7008 22.0593 14.724 21.7141 15.6856C21.3689 16.6472 20.9004 17.4979 20.3087 18.2376L28.5932 26.522C28.8644 26.7933 29 27.1385 29 27.5576C29 27.9768 28.8644 28.322 28.5932 28.5932C28.322 28.8644 27.9768 29 27.5576 29C27.1385 29 26.7933 28.8644 26.522 28.5932L18.2376 20.3087C17.4979 20.9004 16.6472 21.3689 15.6856 21.7141C14.724 22.0593 13.7008 22.2319 12.6159 22.2319ZM12.6159 19.2731C14.4651 19.2731 16.0372 18.6261 17.3322 17.3322C18.6271 16.0382 19.2741 14.4661 19.2731 12.6159C19.2721 10.7657 18.6251 9.19414 17.3322 7.90117C16.0392 6.60819 14.4671 5.96072 12.6159 5.95875C10.7647 5.95678 9.19315 6.60425 7.90117 7.90117C6.60918 9.19808 5.96171 10.7697 5.95875 12.6159C5.95579 14.4622 6.60326 16.0343 7.90117 17.3322C9.19907 18.6301 10.7707 19.2771 12.6159 19.2731Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

src/components/Icons/share/share.astro
+27
View File
@@ -0,0 +1,27 @@
---
import share16 from './svgs/share-16.svg?raw';
import share24 from './svgs/share-24.svg?raw';
import share32 from './svgs/share-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16 ) raw = share16;
else if (size === 24 ) raw = share24;
else if (size === 32 ) raw = share32;
else raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size.
const classes = ['nds-icon-share', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
src/components/Icons/share/svgs/share-16.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 13C10.5833 13 10.2292 12.8542 9.9375 12.5625C9.64583 12.2708 9.5 11.9167 9.5 11.5C9.5 11.45 9.5125 11.3333 9.5375 11.15L6.025 9.1C5.89167 9.225 5.7375 9.323 5.5625 9.394C5.3875 9.465 5.2 9.50033 5 9.5C4.58333 9.5 4.22917 9.35417 3.9375 9.0625C3.64583 8.77083 3.5 8.41667 3.5 8C3.5 7.58333 3.64583 7.22917 3.9375 6.9375C4.22917 6.64583 4.58333 6.5 5 6.5C5.2 6.5 5.3875 6.5355 5.5625 6.6065C5.7375 6.6775 5.89167 6.77533 6.025 6.9L9.5375 4.85C9.52083 4.79167 9.5105 4.7355 9.5065 4.6815C9.5025 4.6275 9.50033 4.567 9.5 4.5C9.5 4.08333 9.64583 3.72917 9.9375 3.4375C10.2292 3.14583 10.5833 3 11 3C11.4167 3 11.7708 3.14583 12.0625 3.4375C12.3542 3.72917 12.5 4.08333 12.5 4.5C12.5 4.91667 12.3542 5.27083 12.0625 5.5625C11.7708 5.85417 11.4167 6 11 6C10.8 6 10.6125 5.9645 10.4375 5.8935C10.2625 5.8225 10.1083 5.72467 9.975 5.6L6.4625 7.65C6.47917 7.70833 6.48967 7.76467 6.494 7.819C6.49833 7.87333 6.50033 7.93367 6.5 8C6.49967 8.06633 6.49767 8.12683 6.494 8.1815C6.49033 8.23617 6.47983 8.29233 6.4625 8.35L9.975 10.4C10.1083 10.275 10.2625 10.1772 10.4375 10.1065C10.6125 10.0358 10.8 10.0003 11 10C11.4167 10 11.7708 10.1458 12.0625 10.4375C12.3542 10.7292 12.5 11.0833 12.5 11.5C12.5 11.9167 12.3542 12.2708 12.0625 12.5625C11.7708 12.8542 11.4167 13 11 13Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

src/components/Icons/share/svgs/share-24.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.4 21C16.65 21 16.0125 20.7375 15.4875 20.2125C14.9625 19.6875 14.7 19.05 14.7 18.3C14.7 18.21 14.7225 18 14.7675 17.67L8.445 13.98C8.205 14.205 7.9275 14.3814 7.6125 14.5092C7.2975 14.637 6.96 14.7006 6.6 14.7C5.85 14.7 5.2125 14.4375 4.6875 13.9125C4.1625 13.3875 3.9 12.75 3.9 12C3.9 11.25 4.1625 10.6125 4.6875 10.0875C5.2125 9.5625 5.85 9.3 6.6 9.3C6.96 9.3 7.2975 9.3639 7.6125 9.4917C7.9275 9.6195 8.205 9.7956 8.445 10.02L14.7675 6.33C14.7375 6.225 14.7189 6.1239 14.7117 6.0267C14.7045 5.9295 14.7006 5.8206 14.7 5.7C14.7 4.95 14.9625 4.3125 15.4875 3.7875C16.0125 3.2625 16.65 3 17.4 3C18.15 3 18.7875 3.2625 19.3125 3.7875C19.8375 4.3125 20.1 4.95 20.1 5.7C20.1 6.45 19.8375 7.0875 19.3125 7.6125C18.7875 8.1375 18.15 8.4 17.4 8.4C17.04 8.4 16.7025 8.3361 16.3875 8.2083C16.0725 8.0805 15.795 7.9044 15.555 7.68L9.2325 11.37C9.2625 11.475 9.2814 11.5764 9.2892 11.6742C9.297 11.772 9.3006 11.8806 9.3 12C9.2994 12.1194 9.2958 12.2283 9.2892 12.3267C9.2826 12.4251 9.2637 12.5262 9.2325 12.63L15.555 16.32C15.795 16.095 16.0725 15.9189 16.3875 15.7917C16.7025 15.6645 17.04 15.6006 17.4 15.6C18.15 15.6 18.7875 15.8625 19.3125 16.3875C19.8375 16.9125 20.1 17.55 20.1 18.3C20.1 19.05 19.8375 19.6875 19.3125 20.2125C18.7875 20.7375 18.15 21 17.4 21Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

src/components/Icons/share/svgs/share-32.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.8 29C22.7167 29 21.7958 28.6208 21.0375 27.8625C20.2792 27.1042 19.9 26.1833 19.9 25.1C19.9 24.97 19.9325 24.6667 19.9975 24.19L10.865 18.86C10.5183 19.185 10.1175 19.4398 9.6625 19.6244C9.2075 19.809 8.72 19.9009 8.2 19.9C7.11667 19.9 6.19583 19.5208 5.4375 18.7625C4.67917 18.0042 4.3 17.0833 4.3 16C4.3 14.9167 4.67917 13.9958 5.4375 13.2375C6.19583 12.4792 7.11667 12.1 8.2 12.1C8.72 12.1 9.2075 12.1923 9.6625 12.3769C10.1175 12.5615 10.5183 12.8159 10.865 13.14L19.9975 7.81C19.9542 7.65833 19.9273 7.5123 19.9169 7.3719C19.9065 7.2315 19.9009 7.0742 19.9 6.9C19.9 5.81667 20.2792 4.89583 21.0375 4.1375C21.7958 3.37917 22.7167 3 23.8 3C24.8833 3 25.8042 3.37917 26.5625 4.1375C27.3208 4.89583 27.7 5.81667 27.7 6.9C27.7 7.98333 27.3208 8.90417 26.5625 9.6625C25.8042 10.4208 24.8833 10.8 23.8 10.8C23.28 10.8 22.7925 10.7077 22.3375 10.5231C21.8825 10.3385 21.4817 10.0841 21.135 9.76L12.0025 15.09C12.0458 15.2417 12.0731 15.3881 12.0844 15.5294C12.0957 15.6707 12.1009 15.8275 12.1 16C12.0991 16.1725 12.0939 16.3298 12.0844 16.4719C12.0749 16.614 12.0476 16.7601 12.0025 16.91L21.135 22.24C21.4817 21.915 21.8825 21.6606 22.3375 21.4769C22.7925 21.2932 23.28 21.2009 23.8 21.2C24.8833 21.2 25.8042 21.5792 26.5625 22.3375C27.3208 23.0958 27.7 24.0167 27.7 25.1C27.7 26.1833 27.3208 27.1042 26.5625 27.8625C25.8042 28.6208 24.8833 29 23.8 29Z" fill="#F4F2EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

src/components/index.ts
+3
View File
@@ -0,0 +1,3 @@
// Auto-generated by scripts/generate-barrel.mjs — do not edit manually.
export * from './Icons/index.ts';
src/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './components/index.ts';
src/layouts/Layout.astro
+9 -3
View File
@@ -1,12 +1,15 @@
---
import '../styles/index.scss';
---
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>Astro Basics</title> <title>Nova Design System</title>
</head> </head>
<body> <body>
<slot /> <slot />
@@ -18,6 +21,9 @@
body { body {
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100%; min-height: 100%;
font-family: var(--nds-font-family-base);
background-color: var(--nds-page-low);
color: var(--nds-default);
} }
</style> </style>
src/pages/index.astro
+104 -5
View File
@@ -1,11 +1,110 @@
--- ---
import Welcome from '../components/Welcome.astro';
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import { Arrow2Icon, ProfileIcon, ShareIcon, SearchIcon } from '../components/Icons/index.ts';
// 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.
--- ---
<Layout> <Layout>
<Welcome /> <main>
<h1>Nova Design System</h1>
<section>
<h2>Icon — 16 / 24 / 32</h2>
<div class="icon-grid">
<div class="icon-row">
<Arrow2Icon size={16} orientation="up" />
<Arrow2Icon size={16} orientation="right" />
<Arrow2Icon size={16} orientation="down" />
<Arrow2Icon size={16} orientation="left" />
</div>
<div class="icon-row">
<Arrow2Icon size={24} orientation="up" />
<Arrow2Icon size={24} orientation="right" />
<Arrow2Icon size={24} orientation="down" />
<Arrow2Icon size={24} orientation="left" />
</div>
<div class="icon-row">
<Arrow2Icon size={32} orientation="up" />
<Arrow2Icon size={32} orientation="right" />
<Arrow2Icon size={32} orientation="down" />
<Arrow2Icon size={32} orientation="left" />
</div>
<div class="icon-row">
<ProfileIcon size={16} />
<ProfileIcon size={24} />
<ProfileIcon size={32} />
</div>
<div class="icon-row">
<ShareIcon size={16} />
<ShareIcon size={24} />
<ShareIcon size={32} />
</div>
<div class="icon-row">
<SearchIcon size={16} />
<SearchIcon size={24} />
<SearchIcon size={32} />
</div>
</div>
</section>
</main>
</Layout> </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>
src/styles/index.scss
+10
View File
@@ -0,0 +1,10 @@
@use 'tokens/colors';
@use 'tokens/typography';
@use 'tokens/spacing';
// Global reset (opt-in)
*,
*::before,
*::after {
box-sizing: border-box;
}