From cb8bac03b201151c6422bffb175336b35e2ee88f Mon Sep 17 00:00:00 2001 From: niinaad5 Date: Thu, 8 Oct 2026 11:46:04 +0530 Subject: [PATCH 1/3] Add button interaction states --- _styles/main.css | 66 ++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 64 insertions(+), 2 deletions(-) diff --git a/_styles/main.css b/_styles/main.css index 6f12259c5f..e5efe8140f 100644 --- a/_styles/main.css +++ b/_styles/main.css @@ -737,7 +737,7 @@ select, text-align: center; text-decoration: none; text-shadow: 0 1px rgba(255, 255, 255, 0.4); - transition: all 100ms ease-in; + transition: all 150ms ease; } button, @@ -745,6 +745,18 @@ button, display: inline-block; } +button:hover, +select:hover, +.button:hover { + background-color: rgba(0, 0, 0, 0.02); + border-color: rgba(0, 0, 0, 0.25); + box-shadow: + inset 0 0 0 1px rgba(255, 255, 255, 0.05), + inset 0 1px 0 0 rgba(255, 255, 255, 0.45), + inset 0 -1px 0 0 rgba(255, 255, 255, 0.15), + 0 1px 3px rgba(0, 0, 0, 0.1); +} + button:focus, .button:focus { border-color: rgba(77, 156, 209, 0.8); @@ -757,6 +769,19 @@ button:focus, text-decoration: none; } +button:focus-visible, +select:focus-visible, +.button:focus-visible { + border-color: rgba(77, 156, 209, 0.9); + box-shadow: + inset 0 0 0 1px rgba(255, 255, 255, 0.05), + inset 0 1px 0 0 rgba(255, 255, 255, 0.45), + inset 0 -1px 0 0 rgba(255, 255, 255, 0.15), + 0 0 0 2px rgba(77, 156, 209, 0.4), + 0 3px 6px rgba(12, 128, 200, 0.23); + outline: none; +} + button:active, .button:active, button.active, @@ -779,6 +804,37 @@ button.suggested-action, text-shadow: 0 1px rgba(0, 0, 0, 0.3); } +button.suggested-action:hover, +.button.suggested-action:hover { + background-color: #70c1f5; + background-image: linear-gradient(to bottom, #5cb3ed, #3b94d2); + border-color: #2b74a4; + box-shadow: + inset 0 0 0 1px rgba(255, 255, 255, 0.1), + inset 0 1px 0 0 rgba(255, 255, 255, 0.5), + inset 0 -1px 0 0 rgba(255, 255, 255, 0.15), + 0 2px 4px rgba(18, 92, 146, 0.25); +} + +button.suggested-action:focus, +.button.suggested-action:focus { + border-color: #2b74a4; + box-shadow: + inset 0 0 0 1px rgba(255, 255, 255, 0.2), + 0 0 0 2px rgba(77, 156, 209, 0.8), + 0 3px 6px rgba(12, 128, 200, 0.23); +} + +button.suggested-action:active, +.button.suggested-action:active { + background-color: #328ecc; + background-image: linear-gradient(to bottom, #2b7eb6, #3b94d2); + border-color: #246590; + box-shadow: + inset 0 1px 2px rgba(0, 0, 0, 0.2), + 0 1px 0 0 rgba(255, 255, 255, 0.3); +} + .button.flat { background: rgba(0, 0, 0, 0.07); border: none; @@ -790,7 +846,7 @@ button.suggested-action, min-width: 250px; padding: 7px; text-shadow: none; - transition: opacity 200ms ease; + transition: all 200ms ease; } .button.flat:focus, @@ -801,6 +857,12 @@ button.suggested-action, 0 5px 10px -2px rgba(0, 0, 0, 0.15); } +.button.flat:active { + background: rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + opacity: 1; +} + .light .button.flat, .light .button.flat .svg { border-color: #fff; From e1b7ec3fd563acde3639b55348871e7abadc5b98 Mon Sep 17 00:00:00 2001 From: niinaad5 Date: Thu, 8 Oct 2026 12:16:43 +0530 Subject: [PATCH 2/3] Fix inconsistent theme-color values --- _backend/preload.php | 2 +- docs/_mdr/index.php | 2 -- get-involved.php | 1 - thank-you.php | 1 - 4 files changed, 1 insertion(+), 5 deletions(-) diff --git a/_backend/preload.php b/_backend/preload.php index 1d200bbeb4..90a51b1f77 100644 --- a/_backend/preload.php +++ b/_backend/preload.php @@ -9,7 +9,7 @@ $sitewide['author'] = 'elementary, Inc.'; $sitewide['description'] = 'Thoughtful, capable, and ethical computing'; $sitewide['image'] = 'https://elementary.io/images/preview.png'; -$sitewide['theme-color'] = '#3689e6'; +$sitewide['theme-color'] = '#fff'; // Autodetect website root path $serverRoot = $_SERVER['DOCUMENT_ROOT']; diff --git a/docs/_mdr/index.php b/docs/_mdr/index.php index a3662b5dcb..d53cff1f3c 100644 --- a/docs/_mdr/index.php +++ b/docs/_mdr/index.php @@ -68,8 +68,6 @@ 'styles/docs.css' ); - $page['theme-color'] = '#403757'; - include $Templates['Header']; echo '
'; include $Templates['Alert']; diff --git a/get-involved.php b/get-involved.php index af52369a2b..e9b3df4d0c 100644 --- a/get-involved.php +++ b/get-involved.php @@ -2,7 +2,6 @@ require_once __DIR__.'/_backend/preload.php'; $page['title'] = 'Get Involved with elementary OS'; -$page['theme-color'] = '#3E4E54'; $page['styles'] = array( 'https://fonts.googleapis.com/css?family=Marck+Script', diff --git a/thank-you.php b/thank-you.php index 8742bae6c3..b187a8b8a3 100644 --- a/thank-you.php +++ b/thank-you.php @@ -2,7 +2,6 @@ require_once __DIR__.'/_backend/preload.php'; $page['title'] = 'Thank You for Downloading elementary OS'; -$page['theme-color'] = '#3E4E54'; include $template['header']; include $template['alert']; From 97187bfb3076f01958211007d3cba77fefa1da9d Mon Sep 17 00:00:00 2001 From: niinaad5 Date: Thu, 8 Oct 2026 12:58:05 +0530 Subject: [PATCH 3/3] Update Node.js to version 22 --- .github/CONTRIBUTING.md | 4 ++-- .github/workflows/ci.yml | 2 +- .github/workflows/update_translations.yml | 2 +- dev/Dockerfile | 6 +++--- package.json | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index e400b4cd97..3356d8bac9 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -47,7 +47,7 @@ For a simple local development environment running on PHP, you will need: #### GNU/Linux Based Operating Systems -First, install Node.js (18.x recommended) from [Nodesource](https://github.com/nodesource/distributions/blob/master/README.md#debian-and-ubuntu-based-distributions). +First, install Node.js (22.x recommended) from [Nodesource](https://github.com/nodesource/distributions/blob/master/README.md#debian-and-ubuntu-based-distributions). _If you are on an unsupported version of elementary OS—i.e. during development of a new version—you may need to download the provided installation script, modify it first to map `elementaryOS` and the version codename to `Ubuntu` and its equivalent codename, then `chmod +x` the script and run it as root._ @@ -77,7 +77,7 @@ and rebuild on the fly. First, make sure you have your system updated. -Second, install Node.js (18.x recommended) from [Nodejs.org](https://nodejs.org). +Second, install Node.js (22.x recommended) from [Nodejs.org](https://nodejs.org). Then follow these directions from your favorite shell: diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 56a853ed97..c9b25bf8a7 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -33,7 +33,7 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v7 with: - node-version: 18 # This Node version matches the server. + node-version: 22 # This Node version matches the server. - name: Install run: npm ci diff --git a/.github/workflows/update_translations.yml b/.github/workflows/update_translations.yml index f407a74905..7c03866d41 100644 --- a/.github/workflows/update_translations.yml +++ b/.github/workflows/update_translations.yml @@ -34,7 +34,7 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v7 with: - node-version: 18 + node-version: 22 - name: Setup submodules run: git submodule init && git submodule update --force --rebase diff --git a/dev/Dockerfile b/dev/Dockerfile index 785a692b29..a371cffe99 100644 --- a/dev/Dockerfile +++ b/dev/Dockerfile @@ -1,11 +1,11 @@ # Current server versions (2026-02-28): # - PHP: 8.1.2 # - Nginx: 1.18 -# - Node: 18.17.1 -# - NPM: 9.6.7 +# - Node: 22 +# - NPM: 10 # - Composer: 2.2.6 FROM composer:2.5 AS composer -FROM node:18 AS node +FROM node:22 AS node FROM php:8.1-fpm COPY --from=composer /usr/bin/composer /usr/bin/composer diff --git a/package.json b/package.json index 641b8026ed..36417a93b9 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "type": "module", "version": "0.4.0", "engines": { - "node": ">=18.17.1" + "node": ">=22.0.0" }, "description": "The elementary.io Website http://elementary.io", "dependencies": {