Use modern surface colors #2020

Initial Checklist

• I understand this is a user story and questions should be posted in the Community Discussions
• I searched issues and couldn’t find anything (or linked relevant results below)

User Story

As a user, I want my OpenCloud UI to have a nice and modern look & feel so that I have an easy time using it.

User Value

UI/UX

Acceptance Criteria

• the surface color role should be #ffffff (rgba(255, 255, 255))

• the surfaceContainer color role should be #f6f8fa (rgba(246, 248, 250))

• the surfaceContainerHigh color role should be #f2f4f5 (rgba(242, 244, 245))

• the surfaceContainerHighest color role should be #eceef0 (rgba(236, 238, 240))

• the surfaceContainerLow color role should be #fbfcfe (rgba(251, 252, 254))

• the main content area should have a border with our default border color (var(--oc-role-surface-container-highest))