feat: Use semantic css var for colors - make the bar theme responsive

cozy · Feb 15, 2024 · daaacf9 · daaacf9
1 parent 0741e48
commit daaacf9
Show file tree

Hide file tree

Showing 17 changed files with 71 additions and 59 deletions.
diff --git a/public/index.html b/public/index.html
@@ -28,7 +28,7 @@
       width: 100vw;
       height: 100vh;
       padding: 0 1em;
-      background-color: #fcfcfc
+      background-color: var(--paperBackgroundColor)
   }
 
   [role=application] p:first-child {
@@ -46,9 +46,9 @@
   kbd,
   code {
       padding: .3em;
-      border: 1px solid #999;
+      border: 1px solid var(--borderMainColor);
       border-radius: 3px;
-      background-color: #eee;
+      background-color: var(--paperBackgroundColor);
   }
 </style>
 <div role="application">

diff --git a/src/components/Apps/AppNavButtons.jsx b/src/components/Apps/AppNavButtons.jsx
@@ -70,7 +70,7 @@ const AppNavButton = ({
         {!isPublic && (
           <Icon
             icon={opened ? TopIcon : BottomIcon}
-            color="#95999d"
+            color="var(--secondaryTextColor)"
             size="12"
           />
         )}

diff --git a/src/components/BarComponent.jsx b/src/components/BarComponent.jsx
@@ -21,6 +21,7 @@ import Bar from './Bar'
 import { Provider } from 'react-redux'
 import { useClient } from 'cozy-client'
 import { isMobileApp } from 'cozy-device-helper'
+import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
 
 import stack from 'lib/stack'
 
@@ -153,13 +154,15 @@ const BarComponent = ({
       setWrapperElement={setWrapperElement}
     >
       <Provider store={options.reduxStore}>
-        <Bar
-          {...options}
-          barSearch={barSearch}
-          barLeft={barLeft}
-          barCenter={barCenter}
-          barRight={barRight}
-        />
+        <CozyTheme>
+          <Bar
+            {...options}
+            barSearch={barSearch}
+            barLeft={barLeft}
+            barCenter={barCenter}
+            barRight={barRight}
+          />
+        </CozyTheme>
       </Provider>
     </ReactPortal>
   )

diff --git a/src/components/Drawer.spec.jsx b/src/components/Drawer.spec.jsx
@@ -37,6 +37,7 @@ describe('bar', () => {
       const logOut = jest.fn().mockImplementation(() => {
         callOrder.push('logOut')
       })
+
       const onLogOut = jest.fn().mockImplementation(async () => {
         prom = sleep(100)
         callOrder.push('onLogOut')
@@ -52,6 +53,7 @@ describe('bar', () => {
       expect(logOut).not.toHaveBeenCalled()
       await prom
       await sleep(0)
+
       expect(logOut).toHaveBeenCalled()
       expect(onLogOut).toHaveBeenCalled()
       expect(callOrder).toEqual(['onLogOut', 'logOut'])
@@ -63,6 +65,7 @@ describe('bar', () => {
       act(() => {
         clickLogout()
       })
+
       expect(logOut).toHaveBeenCalled()
     })
 
@@ -73,6 +76,7 @@ describe('bar', () => {
       act(() => {
         clickLogout()
       })
+
       expect(logOut).toHaveBeenCalled()
       expect(onLogOut).toHaveBeenCalled()
     })

diff --git a/src/components/Settings/SettingsContent.jsx b/src/components/Settings/SettingsContent.jsx
@@ -20,14 +20,14 @@ import StorageData from 'components/Settings/StorageData'
 import useI18n from 'components/useI18n'
 
 const MenuIcon = ({ icon }) => {
-  return <Icon className="u-mr-1" color="var(--slateGrey)" icon={icon} />
+  return <Icon className="u-mr-1" color="var(--iconTextColor)" icon={icon} />
 }
 
 const ExternalLinkIcon = () => {
   return (
     <Icon
       className="coz-nav-settings-item-btn-external-icon"
-      color="var(--coolGrey)"
+      color="var(--iconTextColor)"
       icon={OpenwithIcon}
     />
   )

diff --git a/src/lib/reducers/apps.spec.js b/src/lib/reducers/apps.spec.js
@@ -20,6 +20,7 @@ describe('app reducer', () => {
 
     stack.init(params)
   })
+
   it('dispatch RECEIVE_HOME_APP if context has default redirection', async () => {
     jest.spyOn(client.get, 'context').mockResolvedValue({
       data: { attributes: { default_redirection: 'home/' } }
@@ -28,6 +29,7 @@ describe('app reducer', () => {
 
     const setted = setDefaultApp([{ slug: 'home' }])
     await setted(dispatchMock)
+
     expect(dispatchMock).toHaveBeenCalledWith({
       homeApp: { slug: 'home' },
       type: 'RECEIVE_HOME_APP'
@@ -40,6 +42,7 @@ describe('app reducer', () => {
 
     const setted = setDefaultApp([{ slug: 'home' }])
     await setted(dispatchMock)
+
     expect(dispatchMock).toHaveBeenCalledWith({
       homeApp: { slug: 'home' },
       type: 'RECEIVE_HOME_APP'

diff --git a/src/styles/apps.css b/src/styles/apps.css
@@ -17,15 +17,15 @@
   padding: 0;
   background-color: transparent;
   border: none;
-  color: black;
+  color: var(--primaryTextColor);
   font-size: 1rem;
 }
 
 [role=banner] .coz-nav-apps-btns-main:hover,
 [role=banner] .coz-nav-apps-btns-main:focus,
 [role=banner] .coz-nav-apps-btns-main:active {
   cursor: pointer;
-  color: black;
+  color: var(--primaryTextColor);
 }
 
 [role=banner] .coz-nav-apps-btns-main[disabled]:hover,
@@ -41,7 +41,7 @@
 
 [role=banner] .coz-nav-apps-btns-sep {
   height: 1.75rem;
-  background-color: #d8d8d8;
+  background-color: var(--dividerColor);
   width: 1px;
 }
 
@@ -68,13 +68,13 @@
 
 [role=banner] .coz-nav-apps-btns-home,
 [role=banner] .coz-nav-apps-btns-home[href]:visited {
-  color: var(--dodgerBlue);
+  color: var(--actionColorFocus);
 }
 
 [role=banner] .coz-nav-apps-btns-home[href]:hover,
 [role=banner] .coz-nav-apps-btns-home[href]:active,
 [role=banner] .coz-nav-apps-btns-home[href]:focus {
-  color: var(--scienceBlue);
+  color: var(--actionColorHover);
 }
 
 [role=banner] .coz-nav-apps-btns.--currentHome .coz-nav-apps-btns-main {
@@ -131,8 +131,8 @@
 /* current app item */
 [role=banner] .coz-nav-apps-item.--current a[role=menuitem] {
   font-weight: bold;
-  background-color: var(--paleGrey);
-  border-left: 4px solid var(--dodgerBlue)
+  background-color: var(--defaultBackgroundColor);
+  border-left: 4px solid var(--primaryColor)
 }
 
 [role=banner] .coz-nav-apps-item [role=menuitem],
@@ -146,7 +146,7 @@
   height: 3rem;
   /* we remove the left border from the padding */
   padding: .5rem 1rem .5rem calc(1rem - 4px);
-  color: var(--charcoalGrey);
+  color: var(--primaryTextColor);
   text-decoration: none;
   outline: none;
 }
@@ -178,7 +178,7 @@
 [role=banner] [role=menuitem].coz-apps-home-btn {
   display: flex;
   margin-top: 0;
-  color: #5d6165;
+  color: var(--primaryTextColor);
   font-weight: bold;
   font-size: 14px;
   justify-content: center;
@@ -225,10 +225,10 @@
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   background-position: -20rem 0;
-  background-image: linear-gradient(to right, var(--silver) 0, var(--paleGrey) 50%, var(--silver) 100%);
+  background-image: linear-gradient(to right, var(--contrastBackgroundColor) 0, var(--defaultBackgroundColor) 50%, var(--contrastBackgroundColor) 100%);
   background-size: 20rem 10rem;
   background-repeat: no-repeat;
-  background-color: var(--silver);
+  background-color: var(--defaultBackgroundColor);
   border-radius: .15rem;
   margin: .1rem 0;
 }
@@ -254,12 +254,12 @@
   height: 2rem;
   width: 2rem;
   border-radius: 2rem;
-  background-color: var(--silver);
+  background-color: var(--defaultBackgroundColor);
   flex-shrink: 0;
 }
 
 [role=banner] .coz-nav-apps-btns-main.coz-loading-placeholder {
   height: 1.5rem;
   margin: 0;
-  background-color: var(--silver);
+  background-color: var(--defaultBackgroundColor);
 }
diff --git a/src/styles/banner.css b/src/styles/banner.css
@@ -37,16 +37,16 @@
 
 [role=banner] .coz-bar-banner {
   display: flex;
-  background: var(--dodgerBlue);
+  background: var(--primaryColor);
   box-sizing: border-box;
   width: 100%;
   height: 3rem;
   padding: 0 1rem 0 1rem;
   justify-content: space-between;
   align-items: center;
-  color: white;
+  color: var(--primaryContrastTextColor);
   overflow: hidden;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--shadow2);
   transition: height 1s;
   transition-delay: 1s;
 }
@@ -56,7 +56,7 @@
 [role=banner] .coz-bar-banner-button:visited
 [role=banner] .coz-bar-banner-button:active
 [role=banner] .coz-bar-banner-button:focus {
-  border-color: white!important;
+  border-color: var(--primaryContrastTextColor) !important;
   min-height: 2rem;
   height: 2rem;
   flex-shrink: 0;

diff --git a/src/styles/bar.css b/src/styles/bar.css
@@ -46,7 +46,7 @@
   min-width: 8em;
   font-size: 1.5em;
   font-weight: normal;
-  color: var(--charcoalGrey);
+  color: var(--primaryTextColor);
 }
 
 @media (max-width: 48em) {

diff --git a/src/styles/drawer.css b/src/styles/drawer.css
@@ -23,7 +23,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--charcoalGrey);
+  background-color: var(--primaryTextColor);
   opacity: 0;
   transition: opacity .2s ease-out .1s;
 }
@@ -42,7 +42,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #fff;
+  background-color: var(--paperBackgroundColor);
   transform: translateX(-100%);
   transform-origin: 0% 0%;
 }
@@ -68,7 +68,7 @@
 [role=banner] .coz-drawer-wrapper nav hr {
   margin: 0;
   border: none;
-  border-bottom: solid 1px var(--silver);
+  border-bottom: solid 1px var(--borderMainColor);
 }
 
 [role=banner] .coz-drawer-wrapper .coz-nav-icon {

diff --git a/src/styles/indicators.css b/src/styles/indicators.css
@@ -12,24 +12,24 @@
 [role=banner] progress[value] {
   /* Reset the default appearance */
   appearance: none;
-  background-color: var(--paleGrey);
-  border: solid 1px var(--silver);
+  background-color: var(--defaultBackgroundColor);
+  border: solid 1px var(--borderMainColor);
   border-radius: 2px;
-  color: var(--dodgerBlue);
+  color: var(--primaryColor);
 }
 
 [role=banner] progress[value]::-webkit-progress-bar {
-  background: var(--paleGrey);
+  background: var(--defaultBackgroundColor);
   border-radius: 2px;
 }
 
 [role=banner] progress[value]::-webkit-progress-value {
-  background: var(--dodgerBlue);
+  background: var(--primaryColor);
   border-radius: 1px;
 }
 
 [role=banner] progress[value]::-moz-progress-bar {
-  background: var(--dodgerBlue);
+  background: var(--primaryColor);
   border-radius: 1px;
 }
 
@@ -38,5 +38,5 @@
   margin: 0 0 .1em 0;
   font-weight: normal;
   font-size: .875em;
-  color: var(--pomegranate);
+  color: var(--errorColor);
 }
diff --git a/src/styles/nav.css b/src/styles/nav.css
@@ -43,10 +43,10 @@
   min-width: 100%;
   max-height: calc(100vh - 4rem);
   overflow-y: auto;
-  background-color: #fff;
+  background-color: var(--paperBackgroundColor);
   border-radius: 8px;
-  border: solid 1px rgba(50, 54, 63, 0.12);
-  box-shadow: 0 1px 3px 0 rgba(50, 54, 63, 0.19), 0 6px 18px 0 rgba(50, 54, 63, 0.19);
+  border: solid 1px var(--borderMainColor);
+  box-shadow: var(--shadow5);
   opacity: 1;
   transform: scale(1);
   transform-origin: 80% 0%;
@@ -73,7 +73,7 @@
 }
 
 [role=banner] .coz-nav-pop .coz-nav-group {
-  border-bottom: solid 1px var(--silver);
+  border-bottom: solid 1px var(--borderMainColor);
 }
 
 [role=banner] .coz-nav-pop .coz-nav-group:last-child {

diff --git a/src/styles/navigation_item.css b/src/styles/navigation_item.css
@@ -9,7 +9,7 @@
 [role=banner] a[role=menuitem]:focus,
 [role=banner] button[role=menuitem]:hover,
 [role=banner] button[role=menuitem]:focus {
-  background-color: var(--paleGrey);
+  background-color: var(--defaultBackgroundColor);
 }
 
 [role=banner] [role=menuitem][aria-busy=true]::after {

diff --git a/src/styles/settings.css b/src/styles/settings.css
@@ -1,11 +1,9 @@
 [role=banner] .coz-nav-settings-btn {
-  color: var(--slateGrey);
+  color: var(--primaryTextColor);
 }
 [role=banner] .coz-nav-settings-btn:hover,
 [role=banner] .coz-nav-settings-btn:focus {
-  background-color: var(--paleGrey);
-  box-shadow: inset 0 -1px 0 0 var(--silver);
-  color: var(--charcoalGrey);
+  background-color: var(--actionColorHover);
 }
 
 [role=banner] .coz-nav-pop--settings {
@@ -23,7 +21,7 @@
   text-align: left;
   font-size: 1rem;
   white-space: nowrap;
-  color: var(--charcoalGrey);
+  color: var(--primaryTextColor);
   text-decoration: none;
   outline: none;
 }