Skip to content

Add CSS variables for UI colors#1913

Merged
UnniKohonen merged 9 commits intomainfrom
CSS-variables-for-UI-colors
Jan 29, 2026
Merged

Add CSS variables for UI colors#1913
UnniKohonen merged 9 commits intomainfrom
CSS-variables-for-UI-colors

Conversation

@UnniKohonen
Copy link
Contributor

@UnniKohonen UnniKohonen commented Jan 28, 2026 •
edited
Loading

Reasons for creating this PR

CSS variables in Skosmos 3 are not currently set to support multiple color schemes. There are also some small issues with the layout and CSS. This PR creates new color definitions and fixes some remaining issues with CSS.

Link to relevant issue(s), if any

Description of the changes in this PR

  • Add new color definitions in CSS
  • Remove old background/text color classes
  • Make sidebar links normal weight
  • Remove sidebar group icons
  • Make sidebar groups bold (with normal weight member concepts)
  • Make sidebar hierarchy buttons bigger and use .svgs instead of .pngs
  • Make "Preferred term" label bigger on concept page
  • Make prefLabel heading smaller on concept page
  • Fix search results page background color
  • Fix footer margin/padding

Known problems or uncertainties in this PR

Checklist

  • phpUnit tests pass locally with my changes
  • I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
  • The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
  • The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

@UnniKohonen UnniKohonen added this to the 3.1 milestone Jan 28, 2026
@UnniKohonen UnniKohonen requested a review from osma January 28, 2026 12:40
@UnniKohonen UnniKohonen self-assigned this Jan 28, 2026
@UnniKohonen
Copy link
Contributor Author

UnniKohonen commented Jan 28, 2026

Color definitions for Finto:

--dark-color: #002855;
--secondary-dark-color: #5d7999;
--medium-color: #1980b3;
--secondary-medium-color: #b8c9db;
--tertiary-medium-color: #9ba6bb;
--light-color: #dfe5ed;
--secondary-light-color: #f2f5f7;
--alert-color: #a0270a;
--accent-color: #fae196;
--white-color: #ffffff;

--body-text: var(--dark-color);

--scrollbar-thumb: var(--secondary-dark-color);
--scrollbar-track: var(--secondary-light-color);

--tooltip-bg: var(--dark-color);
--tooltip-text: var(--secondary-light-color);
--tooltip-border: var(--secondary-medium-color);

--topbar-bg-1: var(--dark-color); /*landing*/
--topbar-bg-2: var(--dark-color);
--topbar-text-1: var(--white-color); /*landing*/
--topbar-text-2: var(--white-color);

--headerbar-bg-1: var(--white-color); /*landing*/
--headerbar-bg-2: var(--white-color);
--headerbar-text: var(--dark-color);

--search-field-bg: var(--white-color);
--search-dropdown-bg: var(--secondary-light-color);
--search-border: var(--light-color);
--search-button-bg: var(--dark-color);
--search-button-text: var(--white-color);
--search-hover-bg: var(--light-color);
--vocab-search-language-dropdown-hover-bg: var(--dark-color);
--vocab-search-language-dropdown-hover-text: var(--white-color);
--global-search-vocab-selector-selected-bg: var(--dark-color);
--global-search-vocab-selector-check: var(--white-color);
--search-autocomplete-result-link: var(--secondary-dark-color);

--main-bg-1: var(--white-color); /*landing*/
--main-bg-2: var(--secondary-medium-color); /*vocab, concept, search, error*/
--main-bg-3: var(--light-color); /*about, feedback*/

--landing-vocabulary-list-bg: var(--dark-color);
--landing-vocabulary-list-text: var(--accent-color);
--landing-vocabulary-list-heading: var(--white-color);
--landing-vocabulary-list-link: var(--white-color);
--landing-vocabulary-list-link-underline: var(--tertiary-medium-color);

--sidebar-tab-inactive-bg: var(--light-color);
--sidebar-tab-inactive-text: var(--dark-color);
--sidebar-tab-active-bg: var(--dark-color);
--sidebar-tab-active-text: var(--white-color);
--sidebar-scrollbar-thumb: var(--accent-color);
--sidebar-scrollbar-track: var(--secondary-dark-color);
--sidebar-bg: var(--dark-color);
--sidebar-text: var(--white-color);
--sidebar-link: var(--white-color);
--sidebar-selected: var(--accent-color);
--sidebar-alphabetical-entry-term: var(--secondary-medium-color);
--sidebar-hierarchy-line: var(--white-color);
--sidebar-notation: var(--white-color);

--main-content-bg: var(--white-color);
--main-content-text: var(--dark-color);
--main-content-link: var(--medium-color);
--main-content-border: var(--light-color);

--about-text: var(--dark-color);
--about-link: var(--dark-color);

--feedback-bg: var(--white-color);
--feedback-text: var(--dark-color);
--feedback-field-bg: var(--secondary-light-color);
--feedback-submit-bg: var(--dark-color);

--footer-bg: var(--secondary-dark-color);
--footer-text: var(--white-color);

osma
osma reviewed Jan 28, 2026
View reviewed changes
Copy link
Member

@osma osma left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks very good! A lot of visual improvements in this PR, great work!

The finto.css rules need to be wrapped within :root { ... } for them to actually work. It took a while for me to figure out this...

Regarding the triangle icons: I wonder if another implementation would be possible here. The current bitmap PNG images look a bit fuzzy to me - maybe SVG would be crisper? I also looked at suitable Font Awesome icons - there are a few triangles and carets (e.g. caret-right) available in the Free section that we use, but no outline versions, so maybe that's not an option. Anyway, the Finto layout needs different colors for the triangle icons, so if we go with image files, another set of images is needed for Finto.

@osma osma moved this to Under review in Skosmos 3.x Backlog Jan 28, 2026
osma
osma reviewed Jan 28, 2026
View reviewed changes
@sonarqubecloud
Copy link

sonarqubecloud bot commented Jan 29, 2026

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@UnniKohonen UnniKohonen requested a review from osma January 29, 2026 07:44
osma
osma approved these changes Jan 29, 2026
View reviewed changes
Copy link
Member

@osma osma left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent!

@UnniKohonen UnniKohonen merged commit a8978e9 into main Jan 29, 2026
16 checks passed
@github-project-automation github-project-automation bot moved this from Under review to Issue/PR closed in Skosmos 3.x Backlog Jan 29, 2026
@UnniKohonen UnniKohonen deleted the CSS-variables-for-UI-colors branch January 29, 2026 07:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@osma osma osma approved these changes

Assignees

@UnniKohonen UnniKohonen

Labels

enhancement

Projects

None yet

Milestone

3.1

Development

Successfully merging this pull request may close these issues.

CSS variables for defining UI colors

2 participants

@UnniKohonen @osma