FW-6214 standardize colors

cypress/e2e/login/widgets.cy.js

@@ -39,7 +39,7 @@ describe(
       Cypress.Commands.add('checkValidation', (widgetName) => {
         cy.contains(widgetName).click()
         cy.contains('Create widget').click()
-        cy.get('.text-red-500').should('exist')
+        cy.get('.text-scarlet-700').should('exist')
         cy.contains('Go back').click()
       })
       Cypress.Commands.add('createwidget', (name) => {

cypress/support/commands.js

@@ -91,7 +91,7 @@ Cypress.Commands.add('middlestuff', (_translationwp) => {
 Cypress.Commands.add('checkValidation', (widgetName) => {
   cy.contains(widgetName).click()
   cy.contains('Create widget').click()
-  cy.get('.text-red-500').should('exist')
+  cy.get('.text-scarlet-700').should('exist')
   cy.contains('Go back').click()
 })
 

src/assets/customColors.js

@@ -0,0 +1,77 @@
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+})
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get() {
+    return _default
+  },
+})
+
+const _default = {
+  scarlet: {
+    50: '#fff0f1',
+    100: '#ffdcdf',
+    200: '#ffc0c6',
+    300: '#ff949e',
+    400: '#ff5665',
+    500: '#ff2236',
+    600: '#ff0219',
+    700: '#d80013',
+    800: '#b40212',
+    900: '#920a16',
+    950: '#510007',
+  },
+  blumine: {
+    50: '#f0f9fb',
+    100: '#daeef3',
+    200: '#badee7',
+    300: '#89c5d7',
+    400: '#52a3be',
+    500: '#3787a3',
+    600: '#306d8a',
+    700: '#2d5b72',
+    800: '#2c4c5e',
+    900: '#284151',
+    950: '#162936',
+  },
+  jade: {
+    50: '#effaf6',
+    100: '#d9f2e6',
+    200: '#b6e4d1',
+    300: '#86cfb5',
+    400: '#53b494',
+    500: '#2c876d',
+    600: '#227962',
+    700: '#1b6150',
+    800: '#184d40',
+    900: '#144036',
+    950: '#0a241f',
+  },
+  ochre: {
+    50: '#fcf9ee',
+    100: '#f5edd0',
+    200: '#ebd99c',
+    300: '#e1c268',
+    400: '#daad45',
+    500: '#d1912f',
+    600: '#c37829',
+    700: '#995424',
+    800: '#7e4322',
+    900: '#68381f',
+    950: '#3b1c0d',
+  },
+  charcoal: {
+    50: '#f5f5f6',
+    100: '#e6e6e7',
+    200: '#cfd0d2',
+    300: '#aeafb2',
+    400: '#85868b',
+    500: '#6a6b70',
+    600: '#5a5b60',
+    700: '#4d4d51',
+    800: '#434347',
+    900: '#313133',
+    950: '#252527',
+  },
+}

src/assets/customColorsConfig.js

@@ -0,0 +1,4 @@
+const customColors = require('./customColors')
+module.exports = (
+  customColors.__esModule ? customColors : { default: customColors }
+).default

src/assets/main.css

@@ -8,10 +8,10 @@
 /* Changes to wysiwyg classes need to be mirrored in the function passed to the editor e.g.`frontend/app_v2/src/components/Form/WysiwygField.js` */
 @layer base {
   .wysiwyg h2 {
-    @apply border-b border-gray-500 font-bold my-6 py-5 text-2xl text-primary;
+    @apply border-b border-charcoal-500 font-bold my-6 py-5 text-2xl text-blumine-800;
   }
   .wysiwyg h3 {
-    @apply font-bold my-4 text-xl text-primary;
+    @apply font-bold my-4 text-xl text-blumine-800;
   }
   .wysiwyg ol {
     @apply list-decimal;
@@ -25,7 +25,7 @@
 }
 
 /* These component rules can be over-ridden using utility classes. 
-For example over-ride the colour of the btn-contained backgound using bg-secondary */
+For example over-ride the colour of the btn-contained backgound using bg-scarlet-800 */
 @layer components {
   .ql-video {
     @apply w-full h-96;
@@ -34,10 +34,10 @@ For example over-ride the colour of the btn-contained backgound using bg-seconda
     @apply text-blue-600 visited:text-purple-600 underline underline-offset-2;
   }
   .btn-contained {
-    @apply rounded-lg shadow-sm py-2 px-4 inline-flex justify-center items-center space-x-2 text-sm font-medium bg-primary border border-transparent text-white hover:opacity-80 active:opacity-100;
+    @apply rounded-lg shadow-sm py-2 px-4 inline-flex justify-center items-center space-x-2 text-sm font-medium bg-blumine-800 border border-transparent text-white hover:opacity-80 active:opacity-100;
   }
   .btn-outlined {
-    @apply rounded-lg shadow-sm py-2 px-4 inline-flex justify-center items-center space-x-2 text-sm font-medium bg-white border border-primary text-primary hover:bg-gray-50 active:bg-white;
+    @apply rounded-lg shadow-sm py-2 px-4 inline-flex justify-center items-center space-x-2 text-sm font-medium bg-white border border-blumine-800 text-blumine-800 hover:bg-charcoal-50 active:bg-white;
   }
   .btn-icon {
     @apply fill-current h-5 w-5;

src/common/utils/stringHelpers.js

@@ -140,71 +140,80 @@ export const getPresentationPropertiesForType = (type) => {
         singular: 'word',
         plural: 'words',
         slug: 'words',
-        color: 'word',
+        color: 'word-color-500',
+        textColor: 'word-color-700',
       }
     case TYPE_PHRASE:
       return {
         uppercase: 'PHRASES',
         singular: 'phrase',
         plural: 'phrases',
         slug: 'phrases',
-        color: 'phrase',
+        color: 'phrase-color-600',
+        textColor: 'phrase-color-800',
       }
     case TYPE_SONG:
       return {
         uppercase: 'SONGS',
         singular: 'song',
         plural: 'songs',
         slug: 'songs',
-        color: 'song',
+        color: 'song-color-800',
+        textColor: 'song-color-900',
       }
     case TYPE_STORY:
       return {
         uppercase: 'STORIES',
         singular: 'story',
         plural: 'stories',
         slug: 'stories',
-        color: 'story',
+        color: 'story-color-700',
+        textColor: 'story-color-900',
       }
     case TYPE_DICTIONARY:
       return {
         uppercase: 'DICTIONARY',
         singular: 'word / phrase',
         plural: 'words and phrases',
         slug: 'dictionary',
-        color: 'word',
+        color: 'word-color-500',
+        textColor: 'word-color-700',
       }
     case TYPE_MEDIA:
       return {
         uppercase: 'MEDIA',
         singular: 'media',
         plural: 'media',
         slug: 'search',
-        color: 'primary',
+        color: 'charcoal-500',
+        textColor: 'charcoal-900',
       }
     case TYPE_AUDIO:
       return {
         uppercase: 'AUDIO',
         singular: 'audio',
         plural: 'audio',
         slug: 'audio',
-        color: 'primary',
+        color: 'charcoal-500',
+        textColor: 'charcoal-900',
       }
     case TYPE_IMAGE:
       return {
         uppercase: 'IMAGE',
         singular: 'image',
         plural: 'images',
         slug: 'image',
-        color: 'primary',
+        color: 'charcoal-500',
+        textColor: 'charcoal-900',
       }
     case TYPE_VIDEO:
       return {
         uppercase: 'VIDEO',
         singular: 'video',
         plural: 'videos',
         slug: 'video',
-        color: 'primary',
+        color: 'charcoal-500',
+        textColor: 'charcoal-900',
       }
     case TYPE_ENTRY:
     default:
@@ -213,7 +222,8 @@ export const getPresentationPropertiesForType = (type) => {
         singular: 'language entry',
         plural: 'language entries',
         slug: 'search',
-        color: 'fv-charcoal',
+        color: 'charcoal-500',
+        textColor: 'charcoal-900',
       }
   }
 }

src/components/AboutFV/AboutFV.js

@@ -10,11 +10,8 @@ function AboutFV() {
       data-testid="AboutFirstVoices"
     >
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <SectionTitle.Presentation
-          title="ABOUT FIRSTVOICES"
-          accentColor="primary"
-        />
-        <div className="max-w-4xl mx-auto text-fv-charcoal space-y-4 py-8">
+        <SectionTitle.Presentation title="ABOUT FIRSTVOICES" />
+        <div className="max-w-4xl mx-auto text-charcoal-900 space-y-4 py-8">
           <p className={paraStyle}>
             FirstVoices.com is an online space for communities to share and
             promote their language, oral culture and linguistic history.

src/components/Actions/Copy.js

@@ -30,12 +30,12 @@ function Copy({
       type="button"
       id="CopyAction"
       aria-label="Copy to clipboard"
-      className="relative inline-flex items-center text-sm font-medium text-fv-charcoal hover:text-black group"
+      className="relative inline-flex items-center text-sm font-medium text-charcoal-900 hover:text-black group"
       onClick={() => copyToClipboard({ text: docTitle, confirmationCallback })}
     >
       {getIcon('Copy', `fill-current ${iconStyling}`)}
       {hoverTooltip ? (
-        <div className="z-10 hidden group-hover:inline-flex absolute -bottom-8 -right-1 w-auto p-1 text-sm bg-fv-charcoal-light text-white text-center rounded-lg">
+        <div className="z-10 hidden group-hover:inline-flex absolute -bottom-8 -right-1 w-auto p-1 text-sm bg-charcoal-500 text-white text-center rounded-lg">
           Copy
         </div>
       ) : null}
@@ -55,7 +55,7 @@ function Copy({
           id={`copy-message-${docId}`}
           className={confirmation ? '' : 'hidden'}
         >
-          <div className="absolute bottom-0 -right-1 w-auto p-1 text-sm bg-fv-charcoal-light text-white text-center rounded-lg shadow-lg ">
+          <div className="absolute bottom-0 -right-1 w-auto p-1 text-sm bg-charcoal-500 text-white text-center rounded-lg shadow-lg ">
             Copied
           </div>
         </span>

src/components/Actions/QrcodeButton.js

@@ -43,10 +43,10 @@ function QrcodeButton({
             id="ShareModalContent"
             className="inline-block text-center align-bottom space-y-5 bg-white rounded-lg p-6 lg:p-8 overflow-hidden shadow-xl transform transition-all sm:align-middle sm:max-w-sm sm:w-full"
           >
-            <p className="text-2xl text-fv-charcoal font-bold">
+            <p className="text-2xl text-charcoal-900 font-bold">
               This {entry?.type} is visible to {entry?.visibility} only!
             </p>
-            <p className="text-lg text-fv-charcoal">
+            <p className="text-lg text-charcoal-900">
               QR Codes can only be generated for public content.
             </p>
           </div>

src/components/Actions/QrcodeModalContent.js

@@ -17,7 +17,7 @@ function QrcodeModalContent({ closeHandler, url }) {
       id="QrcodeModalContent"
       className="inline-block align-bottom space-y-5 bg-white rounded-lg p-6 lg:p-8 overflow-hidden shadow-xl transform transition-all sm:align-middle sm:max-w-sm sm:w-full"
     >
-      <h3 className="text-center text-xl font-medium text-fv-charcoal">
+      <h3 className="text-center text-xl font-medium text-charcoal-900">
         QR Code:
       </h3>
       <div className="w-full flex justify-center">
@@ -26,7 +26,7 @@ function QrcodeModalContent({ closeHandler, url }) {
       <button
         data-testid="cancel"
         type="button"
-        className="btn-contained bg-secondary"
+        className="btn-contained bg-scarlet-800"
         onClick={closeHandler}
       >
         Cancel

src/components/Actions/ShareButton.js

@@ -25,7 +25,7 @@ function ShareButton({
             type="button"
             id="ShareButton"
             className={`${
-              active ? 'bg-gray-100 text-fv-charcoal' : 'text-fv-charcoal-light'
+              active ? 'bg-charcoal-50 text-charcoal-900' : 'text-charcoal-500'
             } w-full group flex items-center px-4 py-2 text-sm`}
             onClick={() => setShareModalOpen(true)}
           >
@@ -47,14 +47,14 @@ function ShareButton({
               siteVisibility === TEAM ||
               siteVisibility === MEMBERS ? (
                 <div className="text-center font-medium">
-                  <p className="text-2xl text-fv-charcoal">
+                  <p className="text-2xl text-charcoal-900">
                     This {entry?.type} is visible to
                   </p>
-                  <p className="text-2xl text-fv-charcoal font-bold">
+                  <p className="text-2xl text-charcoal-900 font-bold">
                     {entry?.visibility} only!
                   </p>
                   <a
-                    className="my-2 mx-1 h-9 w-9 inline-flex items-center align-center justify-center rounded text-white bg-secondary"
+                    className="my-2 mx-1 h-9 w-9 inline-flex items-center align-center justify-center rounded text-white bg-scarlet-800"
                     href={`mailto:?subject=${
                       entry?.title
                     }&body=${window.location.origin.toString()}/${sitename}/${makePlural(
@@ -66,7 +66,7 @@ function ShareButton({
                 </div>
               ) : (
                 <>
-                  <h3 className="text-center text-xl font-medium text-fv-charcoal">
+                  <h3 className="text-center text-xl font-medium text-charcoal-900">
                     Share <em>{entry?.title}</em> on:
                   </h3>
                   <ShareLinks.Presentation
@@ -81,7 +81,7 @@ function ShareButton({
               <button
                 data-testid="cancel"
                 type="button"
-                className="btn-contained bg-secondary"
+                className="btn-contained bg-scarlet-800"
                 onClick={() => setShareModalOpen(false)}
               >
                 Cancel

src/components/ActionsMenu/ActionsMenuPresentation.js

@@ -40,7 +40,7 @@ function ActionsMenuPresentation({
               <Menu.Button
                 id="More"
                 aria-label="More Options"
-                className="ml-2 pl-2 relative inline-flex items-center text-sm font-medium text-fv-charcoal hover:text-black border-l border-gray-300"
+                className="ml-2 pl-2 relative inline-flex items-center text-sm font-medium text-charcoal-900 hover:text-black border-l border-charcoal-200"
               >
                 {getIcon('More', `fill-current ${iconStyling}`)}
                 {withLabels ? <span className="mx-2">MORE</span> : null}
@@ -76,8 +76,8 @@ function ActionsMenuPresentation({
                           <QrcodeButton
                             buttonStyling={`${
                               active
-                                ? 'bg-gray-100 text-fv-charcoal'
-                                : 'text-fv-charcoal-light'
+                                ? 'bg-charcoal-50 text-charcoal-900'
+                                : 'text-charcoal-500'
                             } w-full group flex items-center px-4 py-2 text-sm`}
                             active={active}
                             withLabels

src/components/AddMediaModalWrapper/AddMediaModalWrapper.js

@@ -33,7 +33,7 @@ function AddMediaModalWrapper({
         key={`${tab.id}-btn`}
         data-testid={`${tab.id}-btn`}
         type="button"
-        className={`capitalize disabled:pointer-events-none disabled:bg-gray-100 disabled:opacity-50 ${
+        className={`capitalize disabled:pointer-events-none disabled:bg-charcoal-50 disabled:opacity-50 ${
           currentTab.id === tab.id
             ? 'btn-contained'
             : 'btn-outlined hover:btn-contained'
@@ -62,13 +62,13 @@ function AddMediaModalWrapper({
     >
       <div
         id="AddMediaModalWrapper"
-        className="h-4/5-screen w-3/4-screen mx-auto rounded-lg overflow-y-scroll bg-gray-50 p-6"
+        className="h-4/5-screen w-3/4-screen mx-auto rounded-lg overflow-y-scroll bg-charcoal-50 p-6"
       >
         <div className="h-full flex flex-col space-y-4">
-          <h2 className="text-center text-2xl font-bold text-fv-charcoal">
+          <h2 className="text-center text-2xl font-bold text-charcoal-900">
             {currentTab.title}
           </h2>
-          <div className="w-full bg-gray-50 flex justify-center space-x-4">
+          <div className="w-full bg-charcoal-50 flex justify-center space-x-4">
             {tabOptions.map((tab) => tabButton(tab))}
           </div>
           <div className="grow">{children}</div>