feat: revert material design color hacks

[kulmann]

Description

Reverting color hacks that deviated our design away from material design. Download new theme.json and logos and test with a docker-compose overlay:

services:
  opencloud:
    environment:
      WEB_ASSET_THEMES_PATH: ${WEB_ASSET_THEMES_PATH:-/web/themes}
      WEB_UI_THEME_PATH: ${WEB_UI_THEME_PATH:-/themes/opencloud/theme.json}
    volumes:
      - ../web-theme/:/web/themes/opencloud/

Download the following files and move them to the web-theme folder (or whichever folder you mount into the dev stack)

theme.json

Related Issue

Pre-requisite for merging our new theme in the opencloud repo, which will ultimately close #402 and works towards #513

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)

[Copilot]

Pull Request Overview

The PR reverts previous custom color hacks, aligning component styles back to Material Design color roles by updating theme variables and CSS class usage.

• SidebarNavItem: removed dynamic binding for color-role and updated hover/focus background to use surface-container-highest.
• ResourceTile: dropped the oc-card-default class, added a new selector for static container background, and adjusted hover/selected color roles.
• OcTable: replaced all surface-container and secondary-container mappings in hover, highlighted, and accentuated rows to their Material Design equivalents.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue	Made color-role static and updated focus/hover background to use surface-container-highest
packages/web-pkg/src/components/FilesList/ResourceTile.vue	Removed oc-card-default, added .oc-tile-card.oc-card background rule, and updated hover/selected colors
packages/design-system/src/components/OcTable/OcTable.vue	Swapped table row hover, highlighted, and accentuated colors to Material Design roles

Comments suppressed due to low confidence (2)

packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue:6

• Consider adding a visual regression or unit test to verify active/inactive states of the nav item correctly apply the intended Material Design colors after this change.

      color-role="secondaryContainer"

packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue:6

• The dynamic binding for color-role was removed, causing active nav items to lose their intended 'surface' color. Consider restoring :color-role="active ? 'surface' : 'secondaryContainer'" if active styling is still required.

      color-role="secondaryContainer"

[JammingBen]

LGTM.

Though the left sidebar animation on click feels weird now because the nav highlighter gets white while moving and then settles behind the blue-ish active color.

[JammingBen]

Nothing for now because it has always been like this, but having non-scoped and therefore global css instructions for the oc-tile class here feels a bit odd, we should improve that some day.

[kulmann]

There's more to finetune on the technical side 😅 At this point it might also make sense to introduce an OcCard component, which then has a color prop for defining the background-color. We sometimes need that (most of the time we don't), and when we need it it always gets hacky.

[kulmann]

LGTM.

Though the left sidebar animation on click feels weird now because the nav highlighter gets white while moving and then settles behind the blue-ish active color.

Good spot, changed the nav highlighter to --oc-role-secondary-container. That's the same behaviour as before. (active state was white and is now blue-ish, so the highlighter also was white and now needs to be blue-ish).