From 4d7afc3a0e6c9d667940b31c7f88264d599b4273 Mon Sep 17 00:00:00 2001 From: Jorge Leandro Perez Date: Fri, 17 Jul 2026 15:16:19 -0300 Subject: [PATCH 1/7] Release Notes: Applying Rebranding UX --- .../pages/release-notes/app/components/App.module.css | 7 +++++++ .../release-notes/app/components/ReleaseNotes.module.css | 5 +++++ 2 files changed, 12 insertions(+) diff --git a/special-pages/pages/release-notes/app/components/App.module.css b/special-pages/pages/release-notes/app/components/App.module.css index 78cd19cbe2a..11b3041fe01 100644 --- a/special-pages/pages/release-notes/app/components/App.module.css +++ b/special-pages/pages/release-notes/app/components/App.module.css @@ -15,6 +15,13 @@ body { gap: var(--sp-8); } +/* Release notes uses fully-rounded (pill) buttons on every platform. This + overrides the shared Button's per-platform radius (up to specificity 0-3-0, + e.g. macOS `.button.lg`), so !important is required to win reliably. */ +.main button { + border-radius: 999px !important; +} + .header { max-width: var(--sp-320); width: 100%; diff --git a/special-pages/pages/release-notes/app/components/ReleaseNotes.module.css b/special-pages/pages/release-notes/app/components/ReleaseNotes.module.css index b208e196e0b..39a84b8b43d 100644 --- a/special-pages/pages/release-notes/app/components/ReleaseNotes.module.css +++ b/special-pages/pages/release-notes/app/components/ReleaseNotes.module.css @@ -201,6 +201,11 @@ border-bottom: 1px solid transparent; width: fit-content; text-decoration: none; + color: var(--ds-color-theme-default-light-accent-text-primary); + + [data-theme="dark"] & { + color: var(--ds-color-theme-default-dark-accent-text-primary); + } &:hover { border-bottom-color: currentColor; From 83713e971d535be1d4d33f16d3fac5266158abdb Mon Sep 17 00:00:00 2001 From: Jorge Leandro Perez Date: Fri, 17 Jul 2026 15:33:57 -0300 Subject: [PATCH 2/7] Addressing feedback --- .../pages/release-notes/app/components/App.module.css | 9 ++++----- special-pages/shared/styles/variables.css | 1 + 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/special-pages/pages/release-notes/app/components/App.module.css b/special-pages/pages/release-notes/app/components/App.module.css index 11b3041fe01..6cf4240002e 100644 --- a/special-pages/pages/release-notes/app/components/App.module.css +++ b/special-pages/pages/release-notes/app/components/App.module.css @@ -15,11 +15,10 @@ body { gap: var(--sp-8); } -/* Release notes uses fully-rounded (pill) buttons on every platform. This - overrides the shared Button's per-platform radius (up to specificity 0-3-0, - e.g. macOS `.button.lg`), so !important is required to win reliably. */ -.main button { - border-radius: 999px !important; +/* macOS: pill-shaped buttons. Attribute chain reaches specificity 0-3-1 to beat + the shared `.button.lg` rule (0-3-0) without !important. */ +[data-platform-name="macos"] .main[data-theme] button { + border-radius: var(--border-radius-pill); } .header { diff --git a/special-pages/shared/styles/variables.css b/special-pages/shared/styles/variables.css index abc8cb6a929..6f271c43d01 100644 --- a/special-pages/shared/styles/variables.css +++ b/special-pages/shared/styles/variables.css @@ -137,6 +137,7 @@ --border-radius-md: 8px; --border-radius-sm: 6px; --border-radius-xs: 4px; + --border-radius-pill: 9999px; /* fully rounded (pill/capsule) */ @media (prefers-color-scheme: dark) { --theme-background-color: var(--color-gray-95); From 7b6346144dc6885a8a81ec25f7dc9eec6f9e3dc6 Mon Sep 17 00:00:00 2001 From: Jorge Leandro Perez Date: Fri, 17 Jul 2026 16:49:33 -0300 Subject: [PATCH 3/7] Wiring new Release Notes Colors --- .../app/components/App.module.css | 30 +++++++++++++++++-- .../app/components/ReleaseNotes.module.css | 6 +--- 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/special-pages/pages/release-notes/app/components/App.module.css b/special-pages/pages/release-notes/app/components/App.module.css index 6cf4240002e..0c562561322 100644 --- a/special-pages/pages/release-notes/app/components/App.module.css +++ b/special-pages/pages/release-notes/app/components/App.module.css @@ -9,16 +9,40 @@ body { } .main { + /* Release Notes accent palette (this page only): links use + accent-text-primary; buttons use accent-primary + accent-content-primary. */ + --ds-color-theme-accent-primary: #1074cc; + --ds-color-theme-accent-secondary: #045eb2; + --ds-color-theme-accent-tertiary: #034180; + --ds-color-theme-accent-content-primary: #ffffff; + --ds-color-theme-accent-text-primary: #1074cc; + padding: var(--sp-6) var(--sp-5); position: relative; display: grid; gap: var(--sp-8); } -/* macOS: pill-shaped buttons. Attribute chain reaches specificity 0-3-1 to beat - the shared `.button.lg` rule (0-3-0) without !important. */ -[data-platform-name="macos"] .main[data-theme] button { +.main[data-theme="dark"] { + --ds-color-theme-accent-primary: #75b6eb; + --ds-color-theme-accent-secondary: #4397e0; + --ds-color-theme-accent-tertiary: #1074cc; + --ds-color-theme-accent-content-primary: #242323; + --ds-color-theme-accent-text-primary: #75b6eb; +} + +/* Pill radius + recolor accentBrand buttons to the palette above. + `button[class]` (0-4-1) beats the shared dark-mode --button-text override + (0-4-0), which would otherwise win over a plain 0-3-1 selector. */ +[data-platform-name="macos"] .main[data-theme] button[class] { border-radius: var(--border-radius-pill); + + --button-text: var(--ds-color-theme-accent-content-primary); + --button-text--active: var(--ds-color-theme-accent-content-primary); + --button-bg: var(--ds-color-theme-accent-primary); + --button-bg--hover: var(--ds-color-theme-accent-secondary); + --button-bg--focus: var(--ds-color-theme-accent-primary); + --button-bg--active: var(--ds-color-theme-accent-tertiary); } .header { diff --git a/special-pages/pages/release-notes/app/components/ReleaseNotes.module.css b/special-pages/pages/release-notes/app/components/ReleaseNotes.module.css index 39a84b8b43d..8b8efab4485 100644 --- a/special-pages/pages/release-notes/app/components/ReleaseNotes.module.css +++ b/special-pages/pages/release-notes/app/components/ReleaseNotes.module.css @@ -201,11 +201,7 @@ border-bottom: 1px solid transparent; width: fit-content; text-decoration: none; - color: var(--ds-color-theme-default-light-accent-text-primary); - - [data-theme="dark"] & { - color: var(--ds-color-theme-default-dark-accent-text-primary); - } + color: var(--ds-color-theme-accent-text-primary); &:hover { border-bottom-color: currentColor; From 6f94b8a3fc1b841578833ba24de500a22c9c3192 Mon Sep 17 00:00:00 2001 From: Jorge Leandro Perez Date: Mon, 20 Jul 2026 10:10:18 -0300 Subject: [PATCH 4/7] Addressing feedback --- .../app/components/App.module.css | 32 +++++++++---------- .../app/components/ReleaseNotes.module.css | 2 +- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/special-pages/pages/release-notes/app/components/App.module.css b/special-pages/pages/release-notes/app/components/App.module.css index 0c562561322..71541552e61 100644 --- a/special-pages/pages/release-notes/app/components/App.module.css +++ b/special-pages/pages/release-notes/app/components/App.module.css @@ -11,11 +11,11 @@ body { .main { /* Release Notes accent palette (this page only): links use accent-text-primary; buttons use accent-primary + accent-content-primary. */ - --ds-color-theme-accent-primary: #1074cc; - --ds-color-theme-accent-secondary: #045eb2; - --ds-color-theme-accent-tertiary: #034180; - --ds-color-theme-accent-content-primary: #ffffff; - --ds-color-theme-accent-text-primary: #1074cc; + --theme-accent-primary: #1074cc; + --theme-accent-secondary: #045eb2; + --theme-accent-tertiary: #034180; + --theme-accent-content-primary: #ffffff; + --theme-accent-text-primary: #1074cc; padding: var(--sp-6) var(--sp-5); position: relative; @@ -24,11 +24,11 @@ body { } .main[data-theme="dark"] { - --ds-color-theme-accent-primary: #75b6eb; - --ds-color-theme-accent-secondary: #4397e0; - --ds-color-theme-accent-tertiary: #1074cc; - --ds-color-theme-accent-content-primary: #242323; - --ds-color-theme-accent-text-primary: #75b6eb; + --theme-accent-primary: #75b6eb; + --theme-accent-secondary: #4397e0; + --theme-accent-tertiary: #1074cc; + --theme-accent-content-primary: #242323; + --theme-accent-text-primary: #75b6eb; } /* Pill radius + recolor accentBrand buttons to the palette above. @@ -37,12 +37,12 @@ body { [data-platform-name="macos"] .main[data-theme] button[class] { border-radius: var(--border-radius-pill); - --button-text: var(--ds-color-theme-accent-content-primary); - --button-text--active: var(--ds-color-theme-accent-content-primary); - --button-bg: var(--ds-color-theme-accent-primary); - --button-bg--hover: var(--ds-color-theme-accent-secondary); - --button-bg--focus: var(--ds-color-theme-accent-primary); - --button-bg--active: var(--ds-color-theme-accent-tertiary); + --button-text: var(--theme-accent-content-primary); + --button-text--active: var(--theme-accent-content-primary); + --button-bg: var(--theme-accent-primary); + --button-bg--hover: var(--theme-accent-secondary); + --button-bg--focus: var(--theme-accent-primary); + --button-bg--active: var(--theme-accent-tertiary); } .header { diff --git a/special-pages/pages/release-notes/app/components/ReleaseNotes.module.css b/special-pages/pages/release-notes/app/components/ReleaseNotes.module.css index 8b8efab4485..afcc79bf671 100644 --- a/special-pages/pages/release-notes/app/components/ReleaseNotes.module.css +++ b/special-pages/pages/release-notes/app/components/ReleaseNotes.module.css @@ -201,7 +201,7 @@ border-bottom: 1px solid transparent; width: fit-content; text-decoration: none; - color: var(--ds-color-theme-accent-text-primary); + color: var(--theme-accent-text-primary); &:hover { border-bottom-color: currentColor; From 6d79217b039b3e2c67af186dbc97bf82e1ecc231 Mon Sep 17 00:00:00 2001 From: Jorge Leandro Perez Date: Mon, 20 Jul 2026 10:11:05 -0300 Subject: [PATCH 5/7] Apply suggestion from @borgateo Co-authored-by: Matteo Borgato --- special-pages/shared/styles/variables.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/special-pages/shared/styles/variables.css b/special-pages/shared/styles/variables.css index 6f271c43d01..b83f2438cbe 100644 --- a/special-pages/shared/styles/variables.css +++ b/special-pages/shared/styles/variables.css @@ -137,7 +137,7 @@ --border-radius-md: 8px; --border-radius-sm: 6px; --border-radius-xs: 4px; - --border-radius-pill: 9999px; /* fully rounded (pill/capsule) */ + --border-radius-full: 999px; @media (prefers-color-scheme: dark) { --theme-background-color: var(--color-gray-95); From a70ae2f7eb2ac4c8d14b47e9245a10e7adecb126 Mon Sep 17 00:00:00 2001 From: Jorge Leandro Perez Date: Mon, 20 Jul 2026 10:11:45 -0300 Subject: [PATCH 6/7] Fixes indentation glitch --- special-pages/shared/styles/variables.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/special-pages/shared/styles/variables.css b/special-pages/shared/styles/variables.css index b83f2438cbe..c5f10ee6bc2 100644 --- a/special-pages/shared/styles/variables.css +++ b/special-pages/shared/styles/variables.css @@ -137,7 +137,7 @@ --border-radius-md: 8px; --border-radius-sm: 6px; --border-radius-xs: 4px; - --border-radius-full: 999px; + --border-radius-full: 999px; @media (prefers-color-scheme: dark) { --theme-background-color: var(--color-gray-95); From caef9f75a28c79627bdd40a5be46202c8ce5e49d Mon Sep 17 00:00:00 2001 From: Jorge Leandro Perez Date: Mon, 20 Jul 2026 10:42:02 -0300 Subject: [PATCH 7/7] Addressing AI feedback --- special-pages/pages/release-notes/app/components/App.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/special-pages/pages/release-notes/app/components/App.module.css b/special-pages/pages/release-notes/app/components/App.module.css index 71541552e61..8cb8aceecf8 100644 --- a/special-pages/pages/release-notes/app/components/App.module.css +++ b/special-pages/pages/release-notes/app/components/App.module.css @@ -35,7 +35,7 @@ body { `button[class]` (0-4-1) beats the shared dark-mode --button-text override (0-4-0), which would otherwise win over a plain 0-3-1 selector. */ [data-platform-name="macos"] .main[data-theme] button[class] { - border-radius: var(--border-radius-pill); + border-radius: var(--border-radius-full); --button-text: var(--theme-accent-content-primary); --button-text--active: var(--theme-accent-content-primary);