From 6967f3c7cdd52de17e628ca90f5d0d31f0e365b7 Mon Sep 17 00:00:00 2001 From: unkn0wn Date: Tue, 23 Jun 2026 10:51:40 +0200 Subject: [PATCH] refactor: reorganize component imports and enhance index page layout - Grouped component imports into categories for better organization. - Updated the layout of the index page to include a gallery structure. - Added new sections for Button, Badge, Selection Controls, TextField, Select, Numeric Stepper, Avatar, Loading Bar, List Item, Link, Tabs, Breadcrumb, Pagination, Notification, Tooltip, Card, Navbar, Sidebar, Modal, and Icons. - Improved styling for better visual hierarchy and spacing. - Implemented a theme toggle feature with persistent state using localStorage. --- src/components/Link/_link.scss | 48 +- src/components/LoadingBar/_loadingBar.scss | 37 +- src/components/LoadingBar/loadingBar.astro | 26 +- .../Notifications/_notification.scss | 95 +- .../Notifications/notification.astro | 23 +- src/components/Tabs/_tab.scss | 67 +- src/components/Toggle/_toggle.scss | 42 +- src/components/Toggle/toggle.astro | 10 +- src/components/pagination/_pagination.scss | 9 +- .../pagination/_paginationNumber.scss | 38 +- src/components/textField/_textField.scss | 1 + src/layouts/Layout.astro | 36 +- src/pages/gallery.astro | 1144 +++++++++++++++++ src/pages/index.astro | 747 ++++++----- 14 files changed, 1741 insertions(+), 582 deletions(-) create mode 100644 src/pages/gallery.astro diff --git a/src/components/Link/_link.scss b/src/components/Link/_link.scss index 62f95c8..be2de4c 100644 --- a/src/components/Link/_link.scss +++ b/src/components/Link/_link.scss @@ -1,30 +1,28 @@ -@use '../../styles/tokens/typography' as *; +@use "../../styles/tokens/typography" as *; -.link { +.link__container { + width: fit-content; + display: inline-flex; + align-items: center; +} +.link { text-decoration: none; color: var(--nds-primary); @include text-base; - &:hover { - color: var(--nds-text); - opacity: 0.25; - } - &:active { - color: var(--nds-text); - opacity: 0.25; - } - &__container { - width: fit-content; - display: flex; - align-items: center; - justify-content: center; - border-bottom: var(--nds-border-width-medium) dashed var(--nds-secondary); - &:hover { - background-color: var(--nds-secondary); - border-bottom: var(--nds-border-width-medium) dashed var(--nds-accent); - } - &:active { - background-color: var(--nds-primary); - border-bottom: var(--nds-border-width-medium) dashed var(--nds-secondary); - } + font-weight: 600; + display: inline-flex; + align-items: center; + gap: var(--nds-spacing-3xs); + border-bottom: 1px solid transparent; + transition: + border-color 130ms ease, + color 130ms ease; + &:hover { + border-bottom-color: var(--nds-primary); } -} \ No newline at end of file + &:focus-visible { + outline: none; + box-shadow: 0 0 0 3px var(--nds-ring); + border-radius: var(--nds-radius-xs); + } +} diff --git a/src/components/LoadingBar/_loadingBar.scss b/src/components/LoadingBar/_loadingBar.scss index 34b1543..3442b60 100644 --- a/src/components/LoadingBar/_loadingBar.scss +++ b/src/components/LoadingBar/_loadingBar.scss @@ -1,37 +1,34 @@ -@use '../../styles/tokens/typography' as *; +@use "../../styles/tokens/typography" as *; .loading-bar { position: relative; width: 100%; height: 6px; - background-color: var(--nds-text); + background-color: var(--nds-surface-2); overflow: hidden; - border-radius: var(--nds-radius-sm); - + border-radius: var(--nds-radius-full); &__progress { height: 100%; background-color: var(--nds-primary); - transition: width 0.3s ease; - border-radius: var(--nds-radius-sm); + border-radius: var(--nds-radius-full); + transition: width 0.35s ease; } - &__unknown { position: absolute; top: 0; - left: -50%; - width: 50%; + left: 0; + width: 40%; height: 100%; background-color: var(--nds-primary); - border-radius: var(--nds-radius-sm); - animation: loadingBarIndeterminate 1.5s infinite; + border-radius: var(--nds-radius-full); + animation: nds-lb 1.3s ease-in-out infinite; } - - @keyframes loadingBarIndeterminate { - from { - left: -50%; - } - to { - left: 100%; - } +} +@keyframes nds-lb { + 0% { + left: -40%; } -} \ No newline at end of file + 100% { + left: 100%; + } +} diff --git a/src/components/LoadingBar/loadingBar.astro b/src/components/LoadingBar/loadingBar.astro index da89a86..8a64c53 100644 --- a/src/components/LoadingBar/loadingBar.astro +++ b/src/components/LoadingBar/loadingBar.astro @@ -1,19 +1,25 @@ --- export interface Props { - type: 'known' | 'unknown'; + type: "known" | "unknown"; percentage?: number; - width?: string; + width?: string; } const { type, percentage, width } = Astro.props; --- -
- {type === 'known' && percentage !== undefined ? ( -
- ) : ( -
- )} + +
+ { + type === "known" && percentage !== undefined ? ( +
+ ) : ( +
+ ) + }
\ No newline at end of file + @use "./_loadingBar.scss"; + diff --git a/src/components/Notifications/_notification.scss b/src/components/Notifications/_notification.scss index ca01cc7..87068e6 100644 --- a/src/components/Notifications/_notification.scss +++ b/src/components/Notifications/_notification.scss @@ -1,61 +1,50 @@ -@use '../../styles/tokens/typography' as *; +@use "../../styles/tokens/typography" as *; .notification { display: flex; + align-items: flex-start; justify-content: space-between; - align-items: center; - padding: var(--nds-spacing-sm) var(--nds-spacing-xs) ; - border-radius: var(--nds-radius-md); - @include text-sm; - &__error { - background-color: var(--nds-error-low); - &__close { - background: transparent; - border: none; - color: var(--nds-error-medium); - cursor: pointer; - } - &__content { - color: var(--nds-error-high); - } - } - - &__success { - background-color: var(--nds-success-low); - &__close { - background: transparent; - border: none; - color: var(--nds-success-medium); - cursor: pointer; - } - &__content { - color: var(--nds-success-high); - } - } - - &__warning { - background-color: var(--nds-warning-low); - &__close { - background: transparent; - border: none; - color: var(--nds-warning-medium); - cursor: pointer; - } - &__content { - color: var(--nds-warning-high); - } - } - + gap: var(--nds-spacing-sm); + padding: var(--nds-spacing-sm) var(--nds-spacing-md); + border-radius: var(--nds-radius-lg); + background-color: var(--nds-surface); + box-shadow: var(--nds-shadow-md); + border-left: 3px solid var(--nds-info-medium); + @include text-base; + max-width: 400px; &__info { - background-color: var(--nds-info-low); - &__close { - background: transparent; - border: none; - color: var(--nds-info-medium); - cursor: pointer; - } - &__content { - color: var(--nds-info-high); + border-left-color: var(--nds-info-medium); + } + &__success { + border-left-color: var(--nds-success-medium); + } + &__warning { + border-left-color: var(--nds-warning-medium); + } + &__error { + border-left-color: var(--nds-error-medium); + } + &__info__content, + &__success__content, + &__warning__content, + &__error__content { + color: var(--nds-text); + flex: 1; + } + &__info__close, + &__success__close, + &__warning__close, + &__error__close { + background: transparent; + border: none; + cursor: pointer; + display: flex; + color: var(--nds-neutral); + padding: 0; + border-radius: var(--nds-radius-sm); + transition: color 120ms ease; + &:hover { + color: var(--nds-text); } } } diff --git a/src/components/Notifications/notification.astro b/src/components/Notifications/notification.astro index 403a115..cee7550 100644 --- a/src/components/Notifications/notification.astro +++ b/src/components/Notifications/notification.astro @@ -1,23 +1,30 @@ --- import { CloseIcon } from "../Icons"; - export interface Props { - type: 'info' | 'success' | 'warning' | 'error'; + type: "info" | "success" | "warning" | "error"; } -const notificationUUID = `notification-${Math.random().toString(36).substr(2, 9)}`; +const notificationUUID = `notification-${Math.random().toString(36).slice(2, 11)}`; const { type } = Astro.props; --- -