From c540f85ec602eb27b425b093b4d585b8b81d70da Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 12 Feb 2026 16:20:23 -0500 Subject: [PATCH] refactor(styles): introduce token-based design system and migrate key pages to shared utilities - Introduce tokens.scss as the source of truth for colors, spacing, typography, and motion - Add main.scss global entry and layered structure (reset, typography, form, bootstrap overrides) - Convert several core pages (home, navbar, footer, auth pages, explore, etc.) to use tokens and shared utilities - Remove many global/page-specific overrides, inline styles, and custom button/link hacks - Add legacy variable bridge to avoid breaking older templates This is a partial migration. Many components and pages still use legacy styles and will be migrated incrementally. Goal is to centralize styling and reduce global side effects over time. --- .../src/app/about-us/about-us.component.html | 6 +- .../src/app/about-us/about-us.component.scss | 12 -- .../app/contact-us/contact-us.component.html | 6 +- .../app/contact-us/contact-us.component.scss | 58 ++--- .../src/app/explore/explore.component.html | 14 +- .../src/app/explore/explore.component.scss | 29 +++ .../src/app/footer/footer.component.html | 47 ++-- .../src/app/footer/footer.component.scss | 163 +++++++------- .../src/app/home/home.component.html | 32 +-- .../src/app/home/home.component.scss | 199 ++++++++--------- .../src/app/login/login.component.html | 12 +- .../src/app/login/login.component.scss | 48 +++-- .../src/app/navbar/navbar.component.html | 26 +-- .../src/app/navbar/navbar.component.scss | 154 +++++++------ .../src/app/register/register.component.html | 8 +- .../src/app/register/register.component.scss | 63 +++--- .../project-card/project-card.component.html | 4 +- .../project-card/project-card.component.scss | 101 +++++---- .../src/assets/styles/abstracts/_main.scss | 0 .../src/assets/styles/abstracts/_mixins.scss | 36 ++++ .../src/assets/styles/abstracts/_tokens.scss | 152 +++++++++++++ .../assets/styles/abstracts/_variables.scss | 92 +++----- .../styles/base/_bootstrap-overrides.scss | 51 +++++ .../src/assets/styles/base/_form.scss | 14 ++ .../src/assets/styles/base/_reset.scss | 22 ++ .../src/assets/styles/base/_typography.scss | 17 ++ .../src/assets/styles/base/main.scss | 0 .../ClientApp/src/assets/styles/main.scss | 13 ++ .../assets/styles/utilities/_foundation.scss | 203 ++++++++++++++++++ src/Analysim.Web/ClientApp/src/styles.scss | 132 +----------- 30 files changed, 1057 insertions(+), 657 deletions(-) delete mode 100644 src/Analysim.Web/ClientApp/src/assets/styles/abstracts/_main.scss create mode 100644 src/Analysim.Web/ClientApp/src/assets/styles/abstracts/_tokens.scss create mode 100644 src/Analysim.Web/ClientApp/src/assets/styles/base/_bootstrap-overrides.scss delete mode 100644 src/Analysim.Web/ClientApp/src/assets/styles/base/main.scss create mode 100644 src/Analysim.Web/ClientApp/src/assets/styles/main.scss create mode 100644 src/Analysim.Web/ClientApp/src/assets/styles/utilities/_foundation.scss diff --git a/src/Analysim.Web/ClientApp/src/app/about-us/about-us.component.html b/src/Analysim.Web/ClientApp/src/app/about-us/about-us.component.html index 27a6930b..797333e9 100644 --- a/src/Analysim.Web/ClientApp/src/app/about-us/about-us.component.html +++ b/src/Analysim.Web/ClientApp/src/app/about-us/about-us.component.html @@ -1,5 +1,5 @@ -
+
@@ -7,8 +7,8 @@
-

AnalySim

-

A data sharing platform to simplify the visualization of datasets. +

AnalySim

+

A data sharing platform to simplify the visualization of datasets. Collaborate together and host your data to the world, or browser through our multiple user generated projects.

diff --git a/src/Analysim.Web/ClientApp/src/app/about-us/about-us.component.scss b/src/Analysim.Web/ClientApp/src/app/about-us/about-us.component.scss index 583e2ad7..e69de29b 100644 --- a/src/Analysim.Web/ClientApp/src/app/about-us/about-us.component.scss +++ b/src/Analysim.Web/ClientApp/src/app/about-us/about-us.component.scss @@ -1,12 +0,0 @@ -.header{ - // background-image: url("../../assets/img/background2.png"); - // background-repeat: no-repeat; - // background-size: cover; - // background-position: center center; - background-color: var(--background-color); -} - -.header-text{ - font-size: 1.25rem !important; - font-weight: 400; -} \ No newline at end of file diff --git a/src/Analysim.Web/ClientApp/src/app/contact-us/contact-us.component.html b/src/Analysim.Web/ClientApp/src/app/contact-us/contact-us.component.html index c722f1e3..9556cd81 100644 --- a/src/Analysim.Web/ClientApp/src/app/contact-us/contact-us.component.html +++ b/src/Analysim.Web/ClientApp/src/app/contact-us/contact-us.component.html @@ -8,7 +8,7 @@
-
+

Contact Us

@@ -50,7 +50,7 @@

Contact Us

-
@@ -63,7 +63,7 @@

Contact Us

-

Email us with any questions. We would be happy to answer any of your question.

+

Email us with any questions. We would be happy to answer any of your question.

diff --git a/src/Analysim.Web/ClientApp/src/app/contact-us/contact-us.component.scss b/src/Analysim.Web/ClientApp/src/app/contact-us/contact-us.component.scss index 60c3d3ea..e92bce8a 100644 --- a/src/Analysim.Web/ClientApp/src/app/contact-us/contact-us.component.scss +++ b/src/Analysim.Web/ClientApp/src/app/contact-us/contact-us.component.scss @@ -1,44 +1,32 @@ -.header{ - background-image: url("../../assets/img/background2.png"); - background-repeat: no-repeat; - background-size: cover; - background-position: center center; +/* Contact page layout wrapper */ +:host { + height: 100%; } -.header-text{ - font-size: 1.25rem !important; - font-weight: 400; +/* Full-height centered background layout */ +.background { + background-color: var(--surface-0); + min-height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + box-sizing: border-box; } -// .btn-navy{ -// background-color: -// #04132a;color: #FFF;} -// .btn-black:hover{color: #FFF; -// } - -// .bg-theme{ -// background-color: rgb(226, 234, 247); -// } - -.card { - background-color: var(--background-color-tertiary); +/* Soft card styling */ +.card.surface-soft { + border-radius: var(--border-radius); } -#background-img{ - background-image: url("../../assets/img/contact.png"); - background-repeat: no-repeat; - background-size: cover; - background-position: center center; +/* Divider inside soft cards */ +.card.surface-soft hr { + border: 0; + border-top: var(--border-w-1) var(--border-style) var(--border-color); } -.background { - background-color: var(--primary-color); - box-sizing: border-box; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; -} -:host { - height: 100%; +/* Helper text below contact forms */ +.contact-help { + margin-bottom: 0; + opacity: 0.9; + color: var(--text-on-light); } diff --git a/src/Analysim.Web/ClientApp/src/app/explore/explore.component.html b/src/Analysim.Web/ClientApp/src/app/explore/explore.component.html index 14f78a0c..b728c1dc 100644 --- a/src/Analysim.Web/ClientApp/src/app/explore/explore.component.html +++ b/src/Analysim.Web/ClientApp/src/app/explore/explore.component.html @@ -7,20 +7,20 @@
-
-
+ +
- + +
- +
-
diff --git a/src/Analysim.Web/ClientApp/src/app/explore/explore.component.scss b/src/Analysim.Web/ClientApp/src/app/explore/explore.component.scss index e69de29b..253b8433 100644 --- a/src/Analysim.Web/ClientApp/src/app/explore/explore.component.scss +++ b/src/Analysim.Web/ClientApp/src/app/explore/explore.component.scss @@ -0,0 +1,29 @@ +/* Borderless search input */ +.explore-search { + border: none; +} + +/* Themed select input */ +.explore-select { + color: var(--text-on-light); + border-color: var(--border-color); +} + +/* Consistent borders for grouped search controls */ +.search-group { + .form-control, + .custom-select, + .btn { + border-color: var(--border-color); + } + + /* Search button styling */ + .search-btn.btn { + background: transparent; + color: var(--text-on-light); + border-color: var(--border-color); + + padding-left: var(--space-3) !important; + padding-right: var(--space-3) !important; + } +} \ No newline at end of file diff --git a/src/Analysim.Web/ClientApp/src/app/footer/footer.component.html b/src/Analysim.Web/ClientApp/src/app/footer/footer.component.html index e75f7115..e70ca460 100644 --- a/src/Analysim.Web/ClientApp/src/app/footer/footer.component.html +++ b/src/Analysim.Web/ClientApp/src/app/footer/footer.component.html @@ -1,23 +1,23 @@ - + diff --git a/src/Analysim.Web/ClientApp/src/app/footer/footer.component.scss b/src/Analysim.Web/ClientApp/src/app/footer/footer.component.scss index 99ad0426..3ce08a04 100644 --- a/src/Analysim.Web/ClientApp/src/app/footer/footer.component.scss +++ b/src/Analysim.Web/ClientApp/src/app/footer/footer.component.scss @@ -1,104 +1,93 @@ -.bg-footer { - background-color: var(--background-color-secondary); - } - - - -.row{ -line-height: 0px; -} +@import "src/assets/styles/abstracts/mixins"; -.footer-link{ - text-decoration:none; -} +/* Footer component styling */ +.footer-inner { + color: var(--text-on-dark); -.footer-link:hover { - background-color: var(--button-background-color); - border-radius: 5%; - color: var(--primary-color) !important; - transition: 0.2s; - border-bottom: none !important; + /* Inherit footer text color */ + * { + color: inherit; + } } +/* Footer link/content rows */ .footer-link-row { - padding: 10px 0px; - - .footer-about { - height: 19px; - line-height: 14px; - margin-bottom: 15px; - //font-weight: 500; - font-size: 18px; - width: min-content; - } - - .footer-header { - height: 19px; - line-height: 14px; - margin-bottom: 15px; - font-weight: 500; - font-size: 18px; - width: min-content; - font-weight: bold; - } - - ul { - @media (max-width: 576px) { - margin-bottom: 0px; - } - } + padding: var(--space-3) 0; + + /* Section titles and about text */ + .footer-about, + .footer-header { + margin-bottom: var(--space-3); + font-size: var(--fs-16); + font-weight: 700; + width: fit-content; + } - li { - margin-bottom: 10px; + ul { + margin-bottom: 0; + } - a { - line-height: 16px; - padding: 5px; - } - } + li { + margin-bottom: var(--space-2); + } - .footer-sponser { - img { - width: 28px; - height: 28px; - } - } + .footer-link { + line-height: 1.2; + } - #about { - font-weight: bold; - } + .footer-about { + text-align: left; + } - .footer-about { - text-align: left; - } + /* Social/icon list */ + .footer-icons { + display: flex; + gap: var(--space-2); + padding-left: 0; + } - .footer-connect { + .footer-icon { + padding: 0; + } - ul { - display: flex; - img { - width: 32px; - height: 32px; - } - } - } + /* Keep partner/social logos square */ + .footer-connect img { + @include media-square(32px); + } } +/* Bottom logo/copyright row */ .footer-logo-row { - .col-md-10 { - display: flex; - border-top: 1px solid var(--primary-color); - padding-top: 10px; - - div { - line-height: 16px; - } - .footer-copyright { - margin-left: auto - } - .footer-logo{ - text-align: center; - width: 100%; - } + .col-md-10 { + display: flex; + border-top: var(--border-w-1) var(--border-style) var(--hr-on-dark); + padding-top: var(--space-3); + + .footer-logo { + text-align: center; + width: 100%; + line-height: 1.2; + font-size: var(--fs-14); + opacity: 0.9; } + } +} + +/* Dark shell theme adjustments */ +.bg-shell { + --footer-text-soft: rgba(255, 255, 255, 0.85); + + .footer-link, + .footer-icon, + .footer-about, + .footer-header, + .footer-logo { + color: var(--footer-text-soft); + } + + .footer-link:hover, + .footer-icon:hover, + .nav-interactive:hover { + color: var(--text-on-dark); + } } diff --git a/src/Analysim.Web/ClientApp/src/app/home/home.component.html b/src/Analysim.Web/ClientApp/src/app/home/home.component.html index 76962df8..c3c7bffd 100644 --- a/src/Analysim.Web/ClientApp/src/app/home/home.component.html +++ b/src/Analysim.Web/ClientApp/src/app/home/home.component.html @@ -24,31 +24,31 @@

AnalySim

-
+
-
+
-
+

Register for AnalySim

Begin building your data or colaborate with a team

- Register + Register
-
+

Create your own project

Create your own project and share your ideas

- Create Project + Create Project
-
+

Browse our projects

Not ready yet? Get inspired from our projects

- Explore Project + Explore Project
@@ -57,7 +57,7 @@

Browse our projects

-
+
@@ -66,7 +66,7 @@

Gather Data Together Collectively

@@ -85,7 +85,7 @@

Jupyter Notebooks

Host your data and notebooks on AnalySim

- Open Notebook + Open Notebook
@@ -93,7 +93,7 @@

Observable Notebooks

Harvest power and flexibility of JavaScript, host data on AnalySim

- Open Notebook + Open Notebook
@@ -101,7 +101,7 @@

Google Colab

Run your notebooks on Google, host data on AnalySim

- Open Notebook + Open Notebook
@@ -109,7 +109,7 @@

Google Colab

-
+
@@ -118,7 +118,7 @@

Create Your Own Notebook

@@ -227,7 +227,7 @@

Easily share parameter search datasets

-
+
diff --git a/src/Analysim.Web/ClientApp/src/app/home/home.component.scss b/src/Analysim.Web/ClientApp/src/app/home/home.component.scss index fc6d8aac..2382a775 100644 --- a/src/Analysim.Web/ClientApp/src/app/home/home.component.scss +++ b/src/Analysim.Web/ClientApp/src/app/home/home.component.scss @@ -1,113 +1,120 @@ -.header{ - /* background-image: url("../../assets/img/background2.png"); - background-repeat: no-repeat; - background-size: cover; - background-position: center center; */ - background-color: var(--background-color); -} +@import "src/assets/styles/abstracts/mixins"; -.header-text{ - font-size: 1.25rem !important; - font-weight: 400; -} +.header { + background-color: var(--surface-blue); + color: var(--text-on-dark); -.bg-navy { - /* background-color:#04132a; */ - color: var(--primary-color); - background-color: var(--background-color); + * { + color: inherit; + } } -.btn-primary { - color: var(--primary-color); - background-color: var(--button-background-color) !important; - border-color: var(--button-background-color) !important; + +.header-text { + font-size: 1.25rem; + font-weight: 400; } -a { - color: var(--button-background-color); - text-decoration: underline; +.services-grid { + align-items: stretch; } - .NBTitle{ - font-size: calc(1.325rem + .9vw); - margin-top: 0; -margin-bottom: .5rem !important; -font-weight: 500 !important; -line-height: 1.2 !important; -font-family:var(--bs-body-font-family) !important; ---fa-font-light: normal 300 1em/1 "Font Awesome 6 Light" !important; ---fa-font-thin: normal 100 1em/1 "Font Awesome 6 Thin" !important; ---fa-font-duotone: normal 900 1em/1 "Font Awesome 6 Duotone"!important; +.service-card { + @include card-stack; + min-height: 200px; + + p { + margin-bottom: 1rem; + } + + a { + @include card-stack-cta; } +} + +.service-card hr, +.notebook-container hr { + width: 100%; + border: 0; + border-top: var(--border-w-1) var(--border-style) var(--border-color); + margin: var(--space-2) 0; +} .notebook-row { - @media (max-width: 768px){ - flex-direction: column; + @include stack-md; + + .notebook-container { + @include card-stack; + min-height: 420px; + + @media (max-width: var(--bp-md)) { + width: 100%; + min-height: 380px; } - .notebook-container{ - display: flex; - flex-direction: column; - align-items: center; - - @media (max-width: 768px){ - width: 100% - } - - hr { - width: 100% - } - - .note-title { - border-bottom: 1px solid #c6c8c8; - width: 50%; - text-align: center; - padding-bottom: 10px; - font-size: 2rem; - font-weight: 500; - margin-bottom: 10px; - } - - .note-img { - width: 200px; - height: 200px; - } - - .note-btn { - font-size: 1.25rem; - margin-top: 15px; - } + .note-img { + width: 200px; + height: 200px; + margin: auto 0; + display: block; + object-fit: contain; } - - .note-desc{ - align-items: center; - display: flex; - font-size: 1.25rem; - padding: 30px; + + .note-btn { + @include card-stack-cta; + padding-top: var(--link-cta-padding-top); } + } + + .note-desc { + display: flex; + align-items: center; + font-size: 1.25rem; + padding: 30px; + } } - .sponsor-left{ - justify-content: center; - } - - .home-sponser { - - .sponser-column { - align-self: center; - - .hero-sponser { - display: flex; - align-items: center; - - img { - margin-right: 10px; - width: 48px; - height: 48px; - } - - a { - text-decoration: none; - color: inherit; - } - } + +.home-sponser { + > .col-md-10 > .row { + margin-bottom: var(--space-4); + } + + > .col-md-10 > .row:last-child { + margin-bottom: 0; + } + + .sponser-column { + align-self: center; + + > .row { + margin-left: 0; + margin-right: 0; } + + @media (max-width: 991.98px) { + padding-top: var(--space-2); + padding-bottom: var(--space-2); + } + + .hero-sponser { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-3); + margin: 0; + + img { + @include media-square(44px); + } + + a { + text-decoration: none; + color: inherit; + line-height: 1.2; + } + + a:hover { + text-decoration: underline; + } + } + } } diff --git a/src/Analysim.Web/ClientApp/src/app/login/login.component.html b/src/Analysim.Web/ClientApp/src/app/login/login.component.html index 3ae24cbb..12d3a1f1 100644 --- a/src/Analysim.Web/ClientApp/src/app/login/login.component.html +++ b/src/Analysim.Web/ClientApp/src/app/login/login.component.html @@ -2,7 +2,7 @@
-
+
@@ -13,7 +13,7 @@
-
+

Sign in

@@ -23,7 +23,7 @@

Sign in