feat: apply the OpenCloud brand colors to the CTA

packages/design-system/src/components/OcCheckbox/OcCheckbox.vue

@@ -17,8 +17,8 @@
         'outline-role-secondary',
         'focus-visible:outline',
         'rounded-md',
-        'checked:bg-role-primary',
-        'checked:border-role-primary',
+        'checked:bg-role-secondary',
+        'checked:border-role-secondary',
         'indeterminate:bg-white',
         'bg-transparent',
         'overflow-hidden',
@@ -126,15 +126,15 @@ const keydownEnter = (event: KeyboardEvent) => {
 
 .oc-checkbox-checked::before,
 .oc-checkbox:checked::before {
-  background-color: var(--oc-role-on-primary);
+  background-color: var(--oc-role-on-secondary);
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,12.5 9.5,18 20,6'/%3E%3C/svg%3E");
   mask-size: 90%;
   mask-repeat: no-repeat;
   mask-position: center;
 }
 
 .oc-checkbox:indeterminate::before {
-  background-color: var(--oc-role-on-primary);
+  background-color: var(--oc-role-on-secondary);
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
   mask-size: 90%;
   mask-repeat: no-repeat;

packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`Projects view > different files view states > lists all available proje
         <thead data-v-3c9ab66c="" class="oc-thead border-b">
           <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-table-header-row h-10.5">
             <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-select z-10 pl-4" style="top: 0px;">
-              <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><div class="resource-table-select-all flex justify-center items-center"><span data-v-5c58355a="" class="inline-flex items-center"><input data-v-5c58355a="" id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-primary checked:border-role-primary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select all"> <!--v-if--></span></div></span>
+              <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><div class="resource-table-select-all flex justify-center items-center"><span data-v-5c58355a="" class="inline-flex items-center"><input data-v-5c58355a="" id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-secondary checked:border-role-secondary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select all"> <!--v-if--></span></div></span>
     </div>
     </th>
     <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10" style="top: 0px;" aria-sort="ascending"><button data-v-3c9ab66c="" type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">

packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`ResourceTiles component > renders a footer slot 1`] = `
 "<div data-v-67d39700="" id="tiles-view" class="px-4 pt-2">
-  <div data-v-67d39700="" class="flex items-center mb-2 pb-2 oc-tiles-controls"><span data-v-5c58355a="" data-v-67d39700="" class="inline-flex items-center ml-2"><input data-v-5c58355a="" id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-primary checked:border-role-primary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" disabled="" aria-label="Select all"> <!--v-if--></span>
+  <div data-v-67d39700="" class="flex items-center mb-2 pb-2 oc-tiles-controls"><span data-v-5c58355a="" data-v-67d39700="" class="inline-flex items-center ml-2"><input data-v-5c58355a="" id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-secondary checked:border-role-secondary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" disabled="" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>
   <ul data-v-67d39700="" class="oc-list oc-tiles grid justify-start gap-3"> </ul>
@@ -13,7 +13,7 @@ exports[`ResourceTiles component > renders a footer slot 1`] = `
 
 exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
 "<div data-v-67d39700="" id="tiles-view" class="px-4 pt-2">
-  <div data-v-67d39700="" class="flex items-center mb-2 pb-2 oc-tiles-controls"><span data-v-5c58355a="" data-v-67d39700="" class="inline-flex items-center ml-2"><input data-v-5c58355a="" id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-primary checked:border-role-primary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select all"> <!--v-if--></span>
+  <div data-v-67d39700="" class="flex items-center mb-2 pb-2 oc-tiles-controls"><span data-v-5c58355a="" data-v-67d39700="" class="inline-flex items-center ml-2"><input data-v-5c58355a="" id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-secondary checked:border-role-secondary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>
   <ul data-v-67d39700="" class="oc-list oc-tiles grid justify-start gap-3">

packages/web-runtime/src/components/AppFloatingActionButton.vue

@@ -3,12 +3,9 @@
     <oc-floating-action-button
       v-oc-tooltip="floatingActionButton.tooltip?.()"
       :button-id="getButtonId(floatingActionButton.id)"
-      :color-role="currentTheme.isDark ? 'primaryContainer' : 'primary'"
+      color-role="primary"
       class="oc-app-floating-action-button"
-      :class="{
-        'bottom-[70px]': isEmbedModeEnabled,
-        'is-dark-mode': currentTheme.isDark
-      }"
+      :class="{ 'bottom-[70px]': isEmbedModeEnabled }"
       mode="action"
       :handler="floatingActionButton.handler"
     />
@@ -22,14 +19,12 @@
 </template>
 
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
 import { computed, unref } from 'vue'
 import {
   FloatingActionButtonExtension,
   useActiveApp,
   useEmbedMode,
-  useExtensionRegistry,
-  useThemeStore
+  useExtensionRegistry
 } from '@opencloud-eu/web-pkg'
 import { useIsMobile } from '@opencloud-eu/design-system/composables'
 
@@ -38,9 +33,6 @@ const { isTablet } = useIsMobile()
 const activeApp = useActiveApp()
 const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
 
-const themeStore = useThemeStore()
-const { currentTheme } = storeToRefs(themeStore)
-
 const floatingActionButton = computed(() => {
   return requestExtensions<FloatingActionButtonExtension>({
     id: `app.${unref(activeApp)}.floating-action-button`,
@@ -54,22 +46,8 @@ function getButtonId(extensionId: string): string {
 </script>
 
 <style>
-@reference '@opencloud-eu/design-system/tailwind';
-
 /* space that scrollable app content keeps at its end, so the floating button doesn't cover the last entries */
 #web-content:has([id^='mobile-app-floating-action-button-']) {
   --oc-floating-action-button-space: 5rem;
 }
-
-.oc-app-floating-action-button [id^='mobile-app-floating-action-button-'] {
-  @apply bg-gradient-to-r from-role-secondary to-role-primary shadow-md transition-[filter,box-shadow] duration-150 ease-out;
-}
-
-.oc-app-floating-action-button.is-dark-mode [id^='mobile-app-floating-action-button-'] {
-  @apply from-role-secondary-container to-role-primary-container;
-}
-
-.oc-app-floating-action-button [id^='mobile-app-floating-action-button-']:hover {
-  @apply brightness-110 shadow-lg;
-}
 </style>

packages/web-runtime/src/components/SidebarNav/SidebarNav.vue

@@ -11,11 +11,8 @@
             v-oc-tooltip="floatingActionButton.tooltip?.()"
             :disabled="isFloatingActionButtonDisabled"
             appearance="filled"
-            :color-role="currentTheme.isDark ? 'primaryContainer' : 'primary'"
-            class="oc-app-floating-action-button w-full !bg-gradient-to-r !from-role-secondary !to-role-primary shadow-md transition-[filter,box-shadow] duration-150 ease-out hover:brightness-110 shadow-md"
-            :class="{
-              '!from-role-secondary-container !to-role-primary-container': currentTheme.isDark
-            }"
+            color-role="primary"
+            class="oc-app-floating-action-button w-full"
             @click="floatingActionButton.handler?.()"
           >
             <oc-icon :name="floatingActionButton.icon" />
@@ -81,7 +78,6 @@ import {
   useActiveApp,
   useExtensionRegistry,
   FloatingActionButtonExtension,
-  useThemeStore,
   useConfigStore
 } from '@opencloud-eu/web-pkg'
 import { useIsMobile } from '@opencloud-eu/design-system/composables'
@@ -96,9 +92,6 @@ const { requestExtensions } = useExtensionRegistry()
 
 const { isTablet } = useIsMobile()
 
-const themeStore = useThemeStore()
-const { currentTheme } = storeToRefs(themeStore)
-
 const configStore = useConfigStore()
 const { options } = storeToRefs(configStore)