Update all hardcoded values to variables

future-standard · Nov 28, 2023 · 96cbad8 · 96cbad8
1 parent da868e1
commit 96cbad8
Show file tree

Hide file tree

Showing 38 changed files with 77 additions and 78 deletions.
diff --git a/packages/ui-lib/src/Alerts/atom/AlertBar.tsx b/packages/ui-lib/src/Alerts/atom/AlertBar.tsx
@@ -7,7 +7,7 @@ import { resetButtonStyles } from '../../common/index';
 const IconButton = styled.button<{selected?: boolean}>`
   ${resetButtonStyles};
   ${({selected=false}) => selected && css`
-    border-bottom: 5px solid hsl(207, 80%, 64%);
+    border-bottom: 5px solid var(--primary-7);
   `}
   &:focus {
     outline: none;

diff --git a/packages/ui-lib/src/Alerts/atom/Notification.tsx b/packages/ui-lib/src/Alerts/atom/Notification.tsx
@@ -71,7 +71,7 @@ export const IconNames = {
 const IconButton = styled.div<{selected?: boolean}>`
   ${resetButtonStyles};
   ${({selected=false}) => selected && css`
-    border-bottom: 5px solid hsl(207, 80%, 64%);
+    border-bottom: 5px solid var(--primary-7);
   `}
   &:focus {
     outline: none;

diff --git a/packages/ui-lib/src/CameraPanels/atoms/PanelMetaData.tsx b/packages/ui-lib/src/CameraPanels/atoms/PanelMetaData.tsx
@@ -47,7 +47,7 @@ const LeftTitle = styled.div<{ hasMarginBottom: boolean, hasRightData: boolean }
   }};
   ${({ hasMarginBottom }) => hasMarginBottom && `margin-bottom: 1px;`};
 
-  color: hsla(195, 10%, 52%, 0.72);
+  color: var(--grey-a10);
   font-size: 10px;
 `;
 
@@ -59,22 +59,22 @@ const LeftSubTitle = styled.div<{ hasRightData: boolean }>`
     : `max-width: 250px;`
   }
 
-  color: hsl(208, 8%, 38%);
+  color: var(--grey-11);
   font-size: 16px;
 `;
 
 const Title = styled.div<{ hasMarginBottom: boolean }>`
   ${EllipsisStyles};
   max-width: 80px;
-  color: hsla(195, 10%, 52%, 0.72);
+  color: var(--grey-a10);
   font-size: 10px;
   ${({ hasMarginBottom }) => hasMarginBottom && `margin-bottom: 6px;`};
 `;
 
 const SubTitle = styled.div`
   ${EllipsisStyles};
   max-width: 80px;
-  color: hsl(195, 10%, 52%);
+  color: var(--grey-11);
   font-size: 12px;
 `;
 

diff --git a/packages/ui-lib/src/CameraPanels/molecules/CameraPanel.tsx b/packages/ui-lib/src/CameraPanels/molecules/CameraPanel.tsx
@@ -7,7 +7,7 @@ export const CameraPanelWrapper = styled.div<{hasOnClick: boolean}>`
   width: 300px;
   height: 230px;
   border-radius: 3px;
-  box-shadow: 0 2px 10px 0 hsla(211, 42%, 86%, 0.41);
+  box-shadow: 0 2px 10px 0 var(--grey-a5);
   background-color: ${({theme}) => theme.styles.global.background.backgroundImage};
   }
 

diff --git a/packages/ui-lib/src/Filters/atoms/LoadingBox.tsx b/packages/ui-lib/src/Filters/atoms/LoadingBox.tsx
@@ -8,14 +8,14 @@ const Container = styled.div`
   align-items: center;
   justify-content: center;
   min-height: 146px;
-  border-top: 1px solid hsl(0, 0%, 91%);
+  border-top: 1px solid var(--grey-5);
 `;
 
 const LoadingText = styled.div`
   ${({ theme }) => theme && css`
     font-family: ${theme.fontFamily.data};
   `}
-  color: hsl(0, 0%, 55%);
+  color: var(--grey-11);
   font-size: 12px;
   font-style: italic;
   padding: 15px 0;

diff --git a/packages/ui-lib/src/Filters/molecules/FilterDropdown.tsx b/packages/ui-lib/src/Filters/molecules/FilterDropdown.tsx
@@ -58,7 +58,7 @@ const ResultsContainer = styled.div`
 const ResultCounter = styled.div`
   opacity: 0.75;
   font-family: ${({ theme }) => theme.fontFamily.data};
-  color: hsl(0, 0%, 55%);
+  color: var(--grey-10);
   font-size: 12px;
   font-style: italic;
   font-weight: 300;
@@ -79,7 +79,7 @@ const SearchWrapper = styled.div`
 
 const EmptyResultText = styled.div`
   display: block;
-  color: hsl(0, 0%, 56%);
+  color: var(--grey-10);
   margin-left: 12px;
   user-select: none;
   pointer-events: none;

diff --git a/packages/ui-lib/src/Filters/molecules/FiltersResults.tsx b/packages/ui-lib/src/Filters/molecules/FiltersResults.tsx
@@ -16,7 +16,7 @@ const Container = styled.div`
 
 const ResultsTextWrapper = styled.div`
   font-family: ${({ theme }) => theme.fontFamily.ui};
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-9);
 `;
 
 const FilterLabel = styled.div`
@@ -26,7 +26,7 @@ const FilterLabel = styled.div`
   align-items: center;
   padding: 0 11px 0 8px;
   margin-left: 3px;
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-9);
 
   ${({ theme }) => theme && css`
     font-family: ${theme.fontFamily.data};
@@ -36,7 +36,7 @@ const FilterLabel = styled.div`
     display: flex;
     align-items: center;
   }
-  border-right: 1px solid hsla(0, 0%, 13%, 0.16);
+  border-right: 1px solid var(--grey-8);
 `;
 const FilterLabelText = styled.div<{ hasIcon?: boolean }>`
   padding: ${({ hasIcon }) => hasIcon ? '0 15px 0 9px' : '0 15px 0 0'};
@@ -49,7 +49,7 @@ const FilterLabelText = styled.div<{ hasIcon?: boolean }>`
 const ClearTextButton = styled.button`
   ${resetButtonStyles};
   font-family: ${({ theme }) => theme.fontFamily.data};
-  color: hsl(216, 4%, 77%);
+  color: var(--grey-10);
   margin-left: 11px;
   font-size: 12px;
 `;

diff --git a/packages/ui-lib/src/Filters/molecules/SortDropdown.tsx b/packages/ui-lib/src/Filters/molecules/SortDropdown.tsx
@@ -22,8 +22,7 @@ const TopLine = styled.div`
 const InnerBox = styled.div`
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
-  box-shadow: 0 4px 9px 0 hsla(204, 22%, 67%, 0.07);
-  border: solid 1px hsl(207, 16%, 86%);
+  border: solid 1px var(--grey-7);
   border-top: unset;
   ${({theme}) => theme.styles.filters.dropdownContainer.background};
 `;
@@ -54,7 +53,7 @@ const OrderButton = styled.button<{ isSelected: boolean }>`
   display: flex;
   align-items: center;
   font-family: ${({ theme }) => theme.fontFamily.data};
-  color: hsl(0, 0%, 56%);
+  color: var(--grey-12);
   font-size: 14px;
   height: 35px;
   ${({ theme, isSelected }) => theme && css`

diff --git a/packages/ui-lib/src/Filters/organisms/FilterBar.tsx b/packages/ui-lib/src/Filters/organisms/FilterBar.tsx
@@ -17,7 +17,7 @@ import debounce from 'lodash.debounce';
 
 const Title = styled.div`
   font-family: ${({ theme }) => theme.fontFamily.ui};
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-10);
   font-size: 12px;
   font-weight: 700;
   margin-bottom: 17px;

diff --git a/packages/ui-lib/src/Form/atoms/ButtonWithIcon.tsx b/packages/ui-lib/src/Form/atoms/ButtonWithIcon.tsx
@@ -40,7 +40,7 @@ const IconContainer = styled.div<{ position?: string }>`
   svg {
     display:block;
     path, rect, circle, d {
-      stroke: hsla(0, 0%, 100%, 1.000);
+      stroke: var(--white-1);
     }
   }
 `;

diff --git a/packages/ui-lib/src/Form/atoms/CropArea.tsx b/packages/ui-lib/src/Form/atoms/CropArea.tsx
@@ -46,8 +46,8 @@ const resizeSquaresCss = css`
   position: absolute;
   width: 10px;
   height: 10px;
-  border: solid 1px hsl(0, 1%, 28%);
-  background-color: hsl(0, 0%, 100%);
+  border: solid 1px var(--black-a12);
+  background-color: var(--white-1);
 `;
 
 const PointN = styled.div<{ isResizable: boolean }>`

diff --git a/packages/ui-lib/src/Form/atoms/DropArea.tsx b/packages/ui-lib/src/Form/atoms/DropArea.tsx
@@ -16,7 +16,7 @@ const DragAndDrop = styled.div<{inDropZone: boolean}>`
   display: flex;
   align-items: center;
   justify-content: center;
-  border: ${({inDropZone}) => inDropZone ? `dashed #afa9a9 2px` : null};
+  border: ${({inDropZone}) => inDropZone ? `dashed var(--grey-8) 2px` : null};
 `;
 
 interface IDropArea {

diff --git a/packages/ui-lib/src/Form/atoms/Label.tsx b/packages/ui-lib/src/Form/atoms/Label.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 export const StyledLabel = styled.label<{ rightAlign: boolean }>`
   font-family: ${({ theme }) => theme.fontFamily.ui};
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-10);
   font-size: 14px;
   font-weight: 500;
   ${({ rightAlign }) => rightAlign

diff --git a/packages/ui-lib/src/Form/atoms/SliderInput.tsx b/packages/ui-lib/src/Form/atoms/SliderInput.tsx
@@ -48,7 +48,7 @@ const Rail = styled.div`
   width: calc(100% - ${ThumbDiameter}px);
   height: 2px;
   border-radius: 11px;
-  background-image: linear-gradient(to bottom, hsl(210, 30%, 96%), hsl(203, 42%, 94%) 98%);
+  background-image: linear-gradient(to bottom, var(--grey-10), var(--primary-10) 98%);
 `;
 
 const Mark = styled.span<{leftValue: number}>`
@@ -58,7 +58,7 @@ const Mark = styled.span<{leftValue: number}>`
   width: 1px;
   height: 9px;
   opacity: 0.25;
-  background-color: hsl(205, 77%, 64%);
+  background-color: var(--primary-11);
 `;
 
 const MarkLabel = styled.span<{leftValue: number, alignment?: IMartAlignment,}>`
@@ -70,7 +70,7 @@ const MarkLabel = styled.span<{leftValue: number, alignment?: IMartAlignment,}>`
   font-style: italic;
   line-height: normal;
   text-align: center;
-  color: hsla(195, 10%, 52%, 0.72);
+  color: var(--grey-a11);
 
   ${({alignment}) => (alignment === 'center') && css`transform: translateX(-50%);;`}
   ${({alignment}) => (alignment === 'right') && css`transform: translateX(5%);`}

diff --git a/packages/ui-lib/src/Form/atoms/SmallInput.tsx b/packages/ui-lib/src/Form/atoms/SmallInput.tsx
@@ -61,7 +61,7 @@ const UnitKey = styled.div`
   top:0;
   font-family: ${({ theme }) => theme.fontFamily.ui };
   font-size: 12px;
-  color: #99a1a3;
+  color: var(--grey-10);
   line-height:30px;
 `;
 

diff --git a/packages/ui-lib/src/Form/atoms/TextArea.tsx b/packages/ui-lib/src/Form/atoms/TextArea.tsx
@@ -66,7 +66,7 @@ const Container =  styled.div<{ fieldState: string }>`
     ${({theme, fieldState}) => theme.styles.form.input[fieldState].normal};
 
     &:focus {
-      box-shadow: 0px 3px 7px 0px hsla(207, 65.8%, 31%, 0.078);
+      box-shadow: 0px 3px 7px 0px var(--primary-a3);
     }
 
     &:disabled {
@@ -92,15 +92,15 @@ const Container =  styled.div<{ fieldState: string }>`
     ${({ fieldState }) =>
 
     fieldState === 'required' ? `
-      box-shadow: 0px 3px 7px 0px hsla(207, 67.8%, 35.3%, 0.071);
+      box-shadow: 0px 3px 7px 0px var(--primary-a3);
     ` : null};
 
     ${({ fieldState }) => fieldState === 'valid' ? `
-      box-shadow: 0px 3px 5px 0px hsla(120, 76.6%, 15.1%, 0.071);
+      box-shadow: 0px 3px 5px 0px var(--success-a3);
     ` : null};
 
     ${({ fieldState }) => fieldState === 'invalid' ? `
-      box-shadow: 0px 3px 7px 0px hsla(0, 100%, 50%, 0.102);
+      box-shadow: 0px 3px 7px 0px var(--error-a3);
     ` : null};
   }
 
@@ -128,11 +128,11 @@ const TextArea : React.FC<Props> = ({
       case 'disabled':
         break;
       case 'required':
-        return <Icon icon='Required' size={20} color='inverse' />;
+        return <Icon icon='Required' size={20} color='white' />;
       case 'valid':
-        return <Icon icon='Success' size={20} color='inverse' />;
+        return <Icon icon='Success' size={20} color='white' />;
       case 'invalid':
-        return <Icon icon='Invalid' size={20} color='inverse' />;
+        return <Icon icon='Invalid' size={20} color='white' />;
       case 'processing':
         return <Spinner size='medium' styling='primary' />;
     }

diff --git a/packages/ui-lib/src/Form/molecules/CropTool.tsx b/packages/ui-lib/src/Form/molecules/CropTool.tsx
@@ -28,7 +28,7 @@ const Container = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: hsla(202, 33%, 95%, 0.51);
+  background-color: var(--grey-3);
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
   font-family: ${({ theme }) => theme.fontFamily.ui};
@@ -73,8 +73,8 @@ const PreviewArea = styled.div<{ canvasHeight?: number, canvasWidth?: number }>`
   height: ${({ canvasHeight }) => canvasHeight ? `${canvasHeight}px` : `462px`};
   width: ${({ canvasWidth }) => canvasWidth ? `${canvasWidth}px` : `485px`};
   border-radius: 5px;
-  background-color: hsla(202, 33%, 95%, 0.8);
-  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.8) 35px, rgba(255,255,255,.8) 70px);
+  background-color: var(--grey-3);
+  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, var(--white-a10) 35px, var(--white-a10) 70px);
 `;
 
 const HiddenImage = styled.img`
@@ -83,8 +83,8 @@ const HiddenImage = styled.img`
 
 const SelectedArea = styled.div<{ cropLeft: number, cropTop: number, cropWidth: number, cropHeight: number }>`
   position: absolute;
-  border: dashed 1px hsl(0, 0%, 24%);
-  box-shadow: 0 0 0 9999em hsla(0, 0%, 32%, 0.75);
+  border: dashed 1px var(--black-a12);
+  box-shadow: 0 0 0 9999em var(--black-a11);
   ${({ cropLeft, cropTop, cropWidth, cropHeight }) => css`
     top: ${cropTop}px;
     left: ${cropLeft}px;

diff --git a/packages/ui-lib/src/Form/molecules/DurationSlider.tsx b/packages/ui-lib/src/Form/molecules/DurationSlider.tsx
@@ -16,7 +16,7 @@ import Label from '../atoms/Label';
 const Container = styled.div``;
 const Headers = styled.div`
   font-size: 14px;
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-10);
   display: flex;
   justify-content: space-between;
   margin-bottom: 30px;
@@ -30,7 +30,7 @@ const ValueLabel = styled(Label)`
 
 const Unit = styled.div`
   font-family: ${({ theme }) => theme.fontFamily.data};
-  color: hsla(195, 10%, 52%, 0.72);
+  color: var(--grey-a11);
   font-style: italic;
   font-size: 12px;
   line-height: 1.5;

diff --git a/packages/ui-lib/src/Form/molecules/PercentageSlider.tsx b/packages/ui-lib/src/Form/molecules/PercentageSlider.tsx
@@ -8,7 +8,7 @@ import Label from '../atoms/Label';
 const Container = styled.div``;
 const Headers = styled.div`
   font-size: 14px;
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-10);
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;

diff --git a/packages/ui-lib/src/Form/organisms/AreaUploadManager.tsx b/packages/ui-lib/src/Form/organisms/AreaUploadManager.tsx
@@ -32,15 +32,15 @@ const FilesUploadGroup = styled.div<{ height?: string, hasFiles: boolean }>`
 `;
 
 const Title = styled.div`
-  color: hsl(208, 8%, 38%);
+  color: var(--grey-11);
   font-size: 20px;
 `;
 
 const Description = styled.div`
   font-size: 14px;
   line-height: 2.14;
   text-align: center;
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-10);
   margin-top: 10px;
   max-width: 386px;
 `;

diff --git a/packages/ui-lib/src/Form/organisms/AvatarUploader.tsx b/packages/ui-lib/src/Form/organisms/AvatarUploader.tsx
@@ -50,15 +50,15 @@ const PhotoContainerStyle = css`
   align-items: center;
   justify-content: center;
   border-radius: 5px;
-  background-color: hsl(0, 0%, 90%);
+  background-color: var(--grey-5);
 `;
 const PreviewImage = styled.img`
   ${PhotoContainerStyle}
   object-fit: cover;
 `;
 
 const PlaceholderText = styled.div`
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-10);
   font-size: 14px;
 `;