BOX-154: Replaces some repeatable css colors with custom props (#48)

* refactor(app): adds css custom props for other repeatable colors #154 ISSUES CLOSED: #154 * chore(app): fix extra item in commitizen config ISSUES CLOSED: #154
cardbox · Aug 13, 2021 · 45d1fd0 · 45d1fd0
1 parent df67785
commit 45d1fd0
Show file tree

Hide file tree

Showing 19 changed files with 157 additions and 119 deletions.
diff --git a/.cz-config.js b/.cz-config.js
@@ -2,25 +2,25 @@ const glob = require('glob');
 
 // prettier-ignore
 const types = [
-  { value: "feat",     name: "feat", description: "A new feature" },
-  { value: "fix",      name: "fix", description: "A bug fix" },
-  { value: "docs",     name: "docs", description: "Documentation only changes" },
-  { value: "style",    name: "style", description: "Changes that do not affect the meaning of the code", },
-  { value: "chore",    name: "chore", description: "Changes to the build process or auxiliary tools", },
-  { value: "config",   name: "config", description: "Changes in configuration files. Add new or remove old." },
+  { value: "feat",     name: "feat",     description: "A new feature" },
+  { value: "fix",      name: "fix",      description: "A bug fix" },
+  { value: "docs",     name: "docs",     description: "Documentation only changes" },
+  { value: "style",    name: "style",    description: "Changes that do not affect the meaning of the code", },
+  { value: "chore",    name: "chore",    description: "Changes to the build process or auxiliary tools", },
+  { value: "config",   name: "config",   description: "Changes in configuration files. Add new or remove old." },
   { value: "refactor", name: "refactor", description: "A code change that neither fixes a bug nor adds a feature", },
-  { value: "perf",     name: "perf", description: "A code change that improves performance" },
-  { value: "test",     name: "test", description: "Adding missing tests" },
-  { value: "revert",   name: "revert", description: "Revert to a commit" },
-  { value: "wip",      name: "wip", description: "Work in progress" },
+  { value: "perf",     name: "perf",     description: "A code change that improves performance" },
+  { value: "test",     name: "test",     description: "Adding missing tests" },
+  { value: "revert",   name: "revert",   description: "Revert to a commit" },
+  { value: "wip",      name: "wip",      description: "Work in progress" },
 ]
 
 module.exports = {
   types: types.map(beautify),
   scopes: [].concat(
     'app',
     globMap('src/*/', (path) => path.replace(/src\//, '')).filter(
-      exclude(['features', 'ui', 'lib']),
+      exclude(['features', 'ui', 'lib', 'app']),
     ),
     'features',
     globMap('src/features/*/', (path) => path.replace('src/', '')),

diff --git a/src/app/application.tsx b/src/app/application.tsx
@@ -33,12 +33,25 @@ const Globals = createGlobalStyle`
 
     --gray100: #fbfafb;
 
+    --notice500: #ef3a5b;
+
     /* backgrounds */
+    --bnw0: #fff;
     --bnw100: #fbfafb;
     --bnw200: #eeeef1;
-    --bnw0: #fff;
+    --bnw500: #9b99ac;
+    --bnw700: #62616d;
+    --bnw1000: #000;
 
-    --box-shadow-1: 0px 3px 9px #ebebeb;
+    /* todo: in figma it presents as it is, without name of variable */
+    --unknown-1: #a39bb2;
+    --unknown-2: #683aef;
+    --unknown-3: #007bff;
+    --unknown-4: #f7f6f9;
+    --unknown-5: #1a1e23;
+    --unknown-6: #e7e5ee;
+    --unknown-7: #f6f5f8;
+    --unknown-8: #f4f2f7;
   }
 `;
 

diff --git a/src/entities/card/organisms/card-preview.tsx b/src/entities/card/organisms/card-preview.tsx
@@ -135,7 +135,7 @@ const PaperContainerStyled = styled(PaperContainer)<{
   }
 
   &[data-size='large'] {
-    background: #fff;
+    background: var(${theme.palette.bnw0});
     min-height: 190px;
   }
 `;
@@ -186,7 +186,7 @@ const TitleLink = styled(Link)`
 `;
 
 const ItemEditorContainer = styled.div`
-  --editor-color: #62616d;
+  --editor-color: var(${theme.palette.bnw700});
   --editor-font-size: 15px;
   --editor-line-height: 21px;
   -webkit-line-clamp: 3;
@@ -245,7 +245,7 @@ const AddButtonStyled = styled(button.Icon)<{
   'data-is-card-to-deck-added': boolean;
 }>`
   &[data-is-card-to-deck-added='true'] {
-    background-color: #f7f6ff;
+    background-color: var(${theme.palette.wizard100});
 
     &:hover {
       background-color: inherit;
@@ -263,13 +263,13 @@ const Header = styled.header`
 `;
 
 const MetaStyled = styled.div`
-  color: #9b99ac;
+  color: var(${theme.palette.bnw500});
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
 
 const UserLink = styled(Link)`
   text-decoration: none;
-  color: #9b99ac;
+  color: var(${theme.palette.bnw500});
 `;
diff --git a/src/entities/user/organisms/user-preview.tsx b/src/entities/user/organisms/user-preview.tsx
@@ -4,6 +4,7 @@ import { Avatar, PaperContainer, Text, TextType } from '@box/ui';
 import { Link } from 'react-router-dom';
 import type { User } from '@box/api';
 import { plural } from '@box/lib/plural';
+import { theme } from '@box/lib/theme';
 import { useSearchQuery } from '@box/features/search-bar';
 
 import { getFoundData } from '../lib';
@@ -35,7 +36,7 @@ const PaperContainerStyled = styled(PaperContainer)`
   transition: 0.25s;
 
   &:hover {
-    box-shadow: 0 3px 9px #ebebeb;
+    box-shadow: ${theme.shadows[3]};
   }
 `;
 
@@ -81,7 +82,7 @@ const Content: React.FC<ContentProps> = ({
 
 const PartUserName = styled.span<{ 'data-is-selected': boolean }>`
   &[data-is-selected='true'] {
-    color: blue;
+    color: var(${theme.palette.wizard500});
   }
 `;
 const UserName = styled(Text)`
@@ -99,7 +100,7 @@ const Meta = ({ cards }: Pick<User, 'cards'>) => {
   );
 };
 const MetaStyled = styled.div`
-  color: #9b99ac;
+  color: var(${theme.palette.bnw500});
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -114,7 +115,7 @@ const ContentStyled = styled.div`
   }
 `;
 const ContentText = styled(Text)`
-  color: #62616d;
+  color: var(${theme.palette.bnw700});
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 3;
@@ -124,7 +125,7 @@ const ContentText = styled(Text)`
 
 const UserLink = styled(Link)`
   text-decoration: none;
-  color: #000000;
+  color: var(${theme.palette.bnw1000});
 
   &:hover {
     color: blue;

diff --git a/src/features/search-bar/molecules/search.tsx b/src/features/search-bar/molecules/search.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { reflect } from '@effector/reflect/ssr';
+import { theme } from '@box/lib/theme';
 
 import * as model from '../models';
 
@@ -15,22 +16,21 @@ export const Search = () => {
 };
 
 const Container = styled.div`
-  border: 1px solid #e7e5ee;
-  border-radius: 3px;
   display: flex;
   height: 42px;
 `;
 
 const Input = styled.input`
   border: none;
-  border-right: 1px solid #e7e5ee;
+  border-radius: 6px;
+  background: var(${theme.palette.bnw100});
   flex-grow: 1;
   font-size: 0.9375rem;
   outline: 0;
   padding: 0 1.125rem;
 
   &::placeholder {
-    color: #a39bb2;
+    color: var(${theme.palette.bnw500});
   }
 `;
 const SearchInput = reflect({

diff --git a/src/features/search-bar/organisms/search-bar.tsx b/src/features/search-bar/organisms/search-bar.tsx
@@ -4,6 +4,7 @@ import { Avatar, ContentCenteredTemplate, IconLogo, button } from '@box/ui';
 import { Link } from 'react-router-dom';
 import type { User } from '@box/api';
 import { paths } from '@box/pages/paths';
+import { theme } from '@box/lib/theme';
 import { useEvent } from 'effector-react/ssr';
 import { viewer } from '@box/api/mock/fixtures';
 
@@ -53,8 +54,8 @@ function useSearchQueryChanged() {
 }
 
 const Container = styled.header`
-  background-color: #fff;
-  box-shadow: 0 6px 9px #f6f5f8;
+  background-color: var(${theme.palette.bnw0});
+  box-shadow: 0 6px 9px var(${theme.palette.unknown7});
   display: flex;
   flex-shrink: 0;
   justify-content: center;

diff --git a/src/lib/theme.ts b/src/lib/theme.ts
@@ -1,12 +1,31 @@
+const palette = {
+  wizard100: '--wizard100',
+  wizard300: '--wizard300',
+  wizard500: '--wizard500',
+  gray100: '--gray100',
+  bnw100: '--bnw100',
+  bnw200: '--bnw200',
+  bnw0: '--bnw0',
+  bnw500: '--bnw500',
+  bnw700: '--bnw700',
+  bnw1000: '--bnw1000',
+  notice500: '--notice500',
+  unknown1: '--unknown-1',
+  unknown2: '--unknown-2',
+  unknown3: '--unknown-3',
+  unknown4: '--unknown-4',
+  unknown5: '--unknown-5',
+  unknown6: '--unknown-6',
+  unknown7: '--unknown-7',
+  unknown8: '--unknown-8',
+};
+
 export const theme = {
-  palette: {
-    wizard100: '--wizard100',
-    wizard300: '--wizard300',
-    wizard500: '--wizard500',
-    gray100: '--gray100',
-    bnw100: '--bnw100',
-    bnw200: '--bnw200',
-    bnw0: '--bnw0',
-    boxShadow1: '--box-shadow-1',
-  },
+  palette,
+  shadows: [
+    'none',
+    `0px 3px 9px var(${palette.gray100})`,
+    `0px 6px 9px var(${palette.bnw100})`,
+    '0 3px 9px #ebebeb',
+  ],
 };
diff --git a/src/pages/card/view/index.tsx b/src/pages/card/view/index.tsx
@@ -4,6 +4,7 @@ import { CardPreview, cardModel } from '@box/entities/card';
 import { ContentCenteredTemplate, UserCard } from '@box/ui';
 import { Helmet } from 'react-helmet-async';
 import { Link } from 'react-router-dom';
+import { theme } from '@box/lib/theme';
 import { useStart, withStart } from '@box/lib/page-routing';
 import { useStore } from 'effector-react/ssr';
 //FIXME
@@ -106,10 +107,11 @@ const LinkBase = styled(Link).attrs(map)<{ disabled?: boolean }>`
   }
 `;
 
+// todo: change view for links (according to design from figma)
 const LinkEdit = styled(LinkBase)`
-  color: #683aef;
+  color: var(${theme.palette.unknown2});
 `;
 
 const LinkDelete = styled(LinkBase)`
-  color: #ef3a5b;
+  color: var(${theme.palette.notice500});
 `;