Skip to content

feat: apply the OpenCloud brand colors to the CTA - #3521

Open
AlexAndBear wants to merge 2 commits into
mainfrom
feat/brand-color-cta
Open

AlexAndBear wants to merge 2 commits into
mainfrom
feat/brand-color-cta

Conversation

@AlexAndBear

@AlexAndBear AlexAndBear commented Oct 1, 2026 •

Copy link
Copy Markdown
Member

Description

Aligns the call-to-action with the OpenCloud brand colors. The colors themselves (primary → #e2baff, onPrimary → #20434f in light and dark theme) are set in the OpenCloud theme in opencloud-eu/opencloud#3631.

What changed Why
Removed the gradient, shadow, transition and hover brightness from the "New" button in the sidebar (desktop) The CTA should be a plain button in the brand color
Removed the same styling from the floating action button (mobile/tablet) Same as above, for small resolutions
Both buttons use the primary color role in the light and dark theme (previously primaryContainer in dark mode) The brand color applies to both themes
Checkboxes use the secondary / onSecondary color roles instead of primary / onPrimary primary is now reserved for the hand-picked CTA colors and is too light for checkboxes

The logo change (petrol in light mode, lilac in dark mode) from the issue is not part of this PR.

Screenshots

Before After
Desktop light before-Desktop light after-Desktop light
Desktop dark before-Desktop dark after-Desktop dark
Mobile light before-Mobile light after-Mobile light
Mobile dark before-Mobile dark after-Mobile dark

Related Issue

How Has This Been Tested?

  • test environment: local docker setup with opencloudeu/opencloud:dev including the theme change from the OpenCloud PR
  • test case 1: the "New" button in the sidebar is a plain primary button in the light and dark theme
  • test case 2: the FAB on mobile resolutions is a plain primary button in the light and dark theme
  • test case 3: checked and indeterminate checkboxes use the secondary color role
  • unit tests for SidebarNav, AppFloatingActionButton and OcCheckbox pass

Types of changes

  • Bugfix
  • Enhancement (a change that doesn't break existing code or deployments)
  • Breaking change (a modification that affects current functionality)
  • Technical debt (addressing code that needs refactoring or improvements)
  • Tests (adding or improving tests)
  • Documentation (updates or additions to documentation)
  • Maintenance (like dependency updates or tooling adjustments)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant