oddsgate-ds 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "author": "Rui Correia <rui.correia@miew.pt>",
   "license": "MIT",

package/src/components/atoms/Button/Button.theme.ts

@@ -46,8 +46,8 @@ export const StyledButton = styled.a<IButtonSC>`
       case "primary": default:
         return css`
             ${fontSize('h6')};
-            w-[3rem] h-[3rem] line-height-[3rem] text-[2.6rem] color-current border-1-solid-current radius-full translate-z-45 text-center before
-            & i{
+
+           & i{
               width: 3rem;
               height: 3rem;
               line-height: 3rem;

package/src/components/atoms/Chip/Chip.stories.tsx

@@ -15,7 +15,7 @@ export default {
 
 export const Dark: StoryObj<IChip> = {
   render: args => (
-    <div className="bg-primary70 p-6">
+    <div className="bg-primary90 p-6">
       <Chip {...args}>Category name</Chip>
     </div>
   ),

package/src/components/atoms/EmptyState/EmptyState.stories.tsx

@@ -23,7 +23,7 @@ export const Light: StoryObj<IEmptyState> = {
 
 export const Dark: StoryObj<IEmptyState> = {
   render: args => (
-    <div className="bg-primary70 color-white p-8">
+    <div className="bg-primary90 color-white p-8">
       <EmptyState {...args}></EmptyState>
     </div>
   ),

package/src/components/atoms/EmptyState/EmptyState.theme.ts

@@ -19,7 +19,7 @@ export const StyledEmptyState = styled.div<IEmptyState>`
       case "light":
         return css`
           & svg path{
-            fill: ${colors.primary70} !important;
+            fill: ${colors.primary90} !important;
           }
         `;
     }

package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.theme.ts

@@ -94,8 +94,8 @@ export const StyledCheckRadioField = styled.div<ICheckRadioField>`
 
   & input[type="checkbox"]:checked+label::before,
   & input[type="radio"]:checked+label::before {
-    border-color: ${colors.primary70};
-    background: ${colors.primary70};
+    border-color: ${colors.primary90};
+    background: ${colors.primary90};
   }
 
   & input[type="checkbox"]:checked+label::after,
@@ -107,13 +107,13 @@ export const StyledCheckRadioField = styled.div<ICheckRadioField>`
   .style-dark & {
     & input[type="checkbox"]+label {
       &:after {
-        border-color: ${colors.primary70};
+        border-color: ${colors.primary90};
       }
     }
 
     & input[type="radio"]+label {
       &::after {
-        background: ${colors.primary70};
+        background: ${colors.primary90};
       }
     }
     & input[type="checkbox"]:checked+label::before,

package/src/components/atoms/FormField/FormField.stories.tsx

@@ -198,7 +198,7 @@ export const FilterWithInputs: StoryObj<IFormField> = {
 
 export const DarkStyle: StoryObj<IFormField> = {
   render: args => (
-    <div className="style-dark color-white bg-primary70">
+    <div className="style-dark color-white bg-primary90">
       <Formik
         initialValues={{}}
         onSubmit={function (

package/src/components/atoms/FormField/FormField.theme.tsx

@@ -70,7 +70,7 @@ export const StyledFieldContainer = styled.div<IFormField>`
         outline: none;
         width: 100%;
 
-        border: 1px solid ${colors.primary70};
+        border: 1px solid ${colors.primary90};
 
         &:focus {
           border: 1px solid ${colors.gray50};
@@ -79,7 +79,7 @@ export const StyledFieldContainer = styled.div<IFormField>`
 
       select{
         option{
-          color: ${colors.primary70};
+          color: ${colors.primary90};
         }
       }
 

package/src/components/atoms/ImageWrapper/ImageWrapper.theme.ts

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 
 import { IImageWrapper } from './ImageWrapper.interface';
 
-export const StyledImageWrapper = styled.picture<IImageWrapper>`
+export const StyledImageWrapper = styled.div<IImageWrapper>`
 
   & picture{
     position: relative;

package/src/components/atoms/Loader/Loader.stories.tsx

@@ -22,7 +22,7 @@ export const Light: StoryObj<ILoader> = {
 }
 export const Dark: StoryObj<ILoader> = {
   render: args => (
-    <div className="bg-primary70 color-white p-8">
+    <div className="bg-primary90 color-white p-8">
       <Loader {...args}></Loader>
     </div>
   ),

package/src/components/atoms/Loader/Loader.theme.ts

@@ -63,10 +63,10 @@ export const StyledLoader = styled.div<ILoader>`
         return css`
           & > div {
             &::before{
-              border: 3px dotted ${colors.primary70};
+              border: 3px dotted ${colors.primary90};
             }
             &::after {
-              border: 3px dotted ${colors.primary70};
+              border: 3px dotted ${colors.primary90};
             }
           }
         `;

package/src/components/atoms/Marquee/Marquee.theme.ts

@@ -16,7 +16,7 @@ export const StyledMarquee = styled.div<IMarquee>`
   --move-final: calc(-50% + var(--offset));
 
   color: ${colors.white};
-  background-color: ${colors.primary70};
+  background-color: ${colors.primary90};
   border-radius: ${radius.md};
 
   padding: 8px 0;

package/src/components/atoms/SocialLinks/SocialLinks.theme.ts

@@ -37,13 +37,13 @@ export const StyledSocialLinks = styled.ul<ISocialLinks>`
         return css`
           & li a{
             color: ${colors.white};
-            background-color: ${colors.primary70};
+            background-color: ${colors.primary90};
           }
         `;
       case "dark":
         return css`
           & li a{
-            color: ${colors.primary70};
+            color: ${colors.primary90};
             background-color: ${colors.white};
           }
         `;

package/src/components/molecules/Dropdown/Dropdown.theme.ts

@@ -14,7 +14,7 @@ export const StyledDropdownTitle = styled.div<IDropdownTitle>`
   cursor: pointer;
 
   ${({ open }) => open && `
-    color: ${colors.primary70} !important;
+    color: ${colors.primary90} !important;
     user-select: none
   `}
 `;
@@ -45,6 +45,6 @@ export const StyledDropdownItem = styled.li<IDropdownItem>`
   cursor: pointer;
 
   &:hover {
-    color: ${colors.primary70}
+    color: ${colors.primary90}
   }
 `;

package/src/components/molecules/IconBox/IconBox.theme.ts

@@ -14,7 +14,7 @@ export const StyledIconBox = styled.div<IIconBox>`
     width: 32px;
     height: 32px;
 
-    color: ${colors.primary70};
+    color: ${colors.primary90};
     background: ${colors.primary10};
     border-radius: 50px;
 

package/src/components/molecules/Modal/Modal.theme.ts

@@ -44,7 +44,7 @@ export const StyledWrapper = styled.div<IModal>`
 
 export const StyledTitle = styled.div<IModal>`
   color: ${colors.white};
-  background-color: ${colors.primary70};
+  background-color: ${colors.primary90};
   padding: ${spaces[3]};
 `;
 

package/src/components/molecules/ShareModal/ShareModal.theme.ts

@@ -20,7 +20,7 @@ export const StyledModal = styled.div<IShareModal>`
       line-height: 3.2rem;
       border-radius: 50%;
       color: ${colors.white};
-      background: ${colors.primary70};
+      background: ${colors.primary90};
       margin: auto;
       transition: all 0.3s ease;
 
@@ -79,7 +79,7 @@ export const StyledMessage = styled.div<IShareModal>`
   vertical-align: top;
 
   color: ${colors.white};
-  background-color: ${colors.primary70};
+  background-color: ${colors.primary90};
 
   cursor: pointer;
   padding: ${spaces[2]} ${spaces[4]};

package/src/styles/Global.ts

@@ -256,7 +256,7 @@ const GlobalStyles = createGlobalStyle`
 
     padding: 12px 22px;
 
-    color: var(--color-primary70);
+    color: var(--color-primary90);
     background: var(--color-white);
     box-shadow: 0px 2px 16px rgba(${colors.black}, 0.05);
     border-radius: 50px;

package/src/styles/variables.ts

@@ -37,8 +37,15 @@ export const colors = <Record<string, string>>{
   gray70: '#6E6D6C',
   gray90: '#3C3B39',
 
-  primary10: '#FC3151',
-  primary70: '#FF455',
+  primary10: '#FC647C',
+  primary50: '#FC3151',
+  primary90: '#FC3151',
+  
+  secondary10: '#FDFDF1',
+  secondary50: '#FFFECC',
+  
+  third10: '#440D3F',
+  third50: '#2C0929',
 
   // Feedback
   warning: '#ea9a1a',
@@ -77,43 +84,43 @@ export const spacesNegative = <Record<string, string>>{
 //if responsive is not needed for a size just set the size as px instead of rem
 export const typography = <Record<string, Record<string, unknown>>>{
   display: {
-    size: pxToRem(104),
-    sizeMob: pxToRem(56),
+    size: pxToRem(250),
+    sizeMob: pxToRem(180),
     height: 1.4,
   },
   h1: {
-    size: pxToRem(48),
-    sizeMob: pxToRem(40),
+    size: pxToRem(120),
+    sizeMob: pxToRem(64),
     height: 1.4,
   },
   h2: {
-    size: pxToRem(40),
-    sizeMob: pxToRem(32),
+    size: pxToRem(80),
+    sizeMob: pxToRem(42),
     height: 1.4,
   },
   h3: {
-    size: pxToRem(32),
+    size: pxToRem(48),
     sizeMob: pxToRem(28),
     height: 1.2,
   },
   h4: {
-    size: pxToRem(28),
-    sizeMob: pxToRem(24),
+    size: pxToRem(36),
+    sizeMob: pxToRem(20),
     height: 1.4,
   },
   h5: {
-    size: pxToRem(24),
-    sizeMob: pxToRem(20),
+    size: pxToRem(20),
+    sizeMob: pxToRem(16),
     height: 1.4,
   },
   h6: {
-    size: pxToRem(20),
-    sizeMob: pxToRem(18),
+    size: pxToRem(18),
+    sizeMob: pxToRem(16),
     height: 1.4,
   },
   texts: {
     size: "16px",
-    sizeMob: "14px",
+    sizeMob: "13px",
     height: 1.6,
   },
   captions: {