npm - @npm_leadtech/legal-lib-components - Versions diffs - 5.43.3 → 5.43.5 - Mend

@npm_leadtech/legal-lib-components 5.43.3 → 5.43.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (189) hide show

package/dist/src/components/molecules/FaqItem/FaqItem.styled.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 export const FaqItemStyled = styled.article `
-  border-radius: var(--s-border-radius);
+  border-radius: var(--global-border-radius);
   background: var(--others-white);
   box-shadow: var(--box-shadow-small);

package/dist/src/components/molecules/FaqItem/FaqItem.styled.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 export const FaqItemStyled = styled.article`
-  border-radius: var(--s-border-radius);
+  border-radius: var(--global-border-radius);
   background: var(--others-white);
   box-shadow: var(--box-shadow-small);

package/dist/src/components/molecules/FeatureRatafiaCardList/FeatureRatafiaCardList.styled.js CHANGED Viewed

@@ -5,5 +5,5 @@ export const FeatureRatafiaCardListStyled = styled.div `
   justify-content: center;
   align-items: center;
   align-self: stretch;
-  gap: var(--global-gap);
+  gap: 1rem;
 `;

package/dist/src/components/molecules/FeatureRatafiaCardList/FeatureRatafiaCardList.styled.ts CHANGED Viewed

@@ -6,5 +6,5 @@ export const FeatureRatafiaCardListStyled = styled.div`
   justify-content: center;
   align-items: center;
   align-self: stretch;
-  gap: var(--global-gap);
+  gap: 1rem;
 `

package/dist/src/components/molecules/KeyFactCardListRatafia/KeyFactCardListRatafia.styled.js CHANGED Viewed

@@ -11,7 +11,7 @@ export const KeyFactCardListRatafiaStyled = styled.div `
   padding: 0 2rem 1.5rem 1.5rem;
   gap: 0.5rem;
-  border-radius: var(--s-border-radius);
+  border-radius: 4px;
   border-top: 4px solid var(--neutral-neutral-6);
   border-bottom: 8px solid var(--neutral-neutral-6);
   background: var(--neutral-neutral-6);

package/dist/src/components/molecules/KeyFactCardListRatafia/KeyFactCardListRatafia.styled.ts CHANGED Viewed

@@ -12,7 +12,7 @@ export const KeyFactCardListRatafiaStyled = styled.div`
   padding: 0 2rem 1.5rem 1.5rem;
   gap: 0.5rem;
-  border-radius: var(--s-border-radius);
+  border-radius: 4px;
   border-top: 4px solid var(--neutral-neutral-6);
   border-bottom: 8px solid var(--neutral-neutral-6);
   background: var(--neutral-neutral-6);

package/dist/src/components/molecules/MidBannerRatafiaContent/MidBannerRatafiaContent.scss CHANGED Viewed

@@ -11,7 +11,7 @@
     justify-content: center;
     align-items: flex-start;
     align-self: stretch;
-    gap: var(--global-gap);
+    gap: 1rem;
     &__title {
       align-self: stretch;

package/dist/src/components/molecules/MidBannerRatafiaContent/MidBannerRatafiaContent.styled.js CHANGED Viewed

@@ -11,7 +11,7 @@ export const MidBannerRatafiaContentStyled = styled.div `
       justify-content: center;
       align-items: flex-start;
       align-self: stretch;
-      gap: var(--global-gap);
+      gap: 1rem;
       &__title {
         align-self: stretch;

package/dist/src/components/molecules/MidBannerRatafiaContent/MidBannerRatafiaContent.styled.ts CHANGED Viewed

@@ -12,7 +12,7 @@ export const MidBannerRatafiaContentStyled = styled.div`
       justify-content: center;
       align-items: flex-start;
       align-self: stretch;
-      gap: var(--global-gap);
+      gap: 1rem;
       &__title {
         align-self: stretch;

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSample.styled.js CHANGED Viewed

@@ -7,9 +7,9 @@ export const MidBannerRatafiaSampleStyled = styled.div `
   .mid-banner-ratafia-sample {
     &__image {
       img {
-        border-radius: var(--m-border-radius) var(--m-border-radius) 0 0;
+        border-radius: 8px 8px 0 0;
         box-shadow: var(--box-shadow-small);
-        width: 727px;
+        max-width: 727px;
       }
     }
     &__sumarized-tag {
@@ -24,7 +24,7 @@ export const MidBannerRatafiaSampleStyled = styled.div `
       top: -13px;
       background: var(--primary-main-light-5);
-      border-radius: var(--s-border-radius);
+      border-radius: var(--global-border-radius);
       border: 1px solid var(--primary-main-light-3);
       box-shadow: var(--box-shadow-small);
@@ -44,7 +44,7 @@ export const MidBannerRatafiaSampleStyled = styled.div `
       gap: 0.25rem;
       background: var(--neutral-neutral-6);
-      border-radius: var(--s-border-radius);
+      border-radius: var(--global-border-radius);
       box-shadow: var(--box-shadow-small);
       &__icon {

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSample.styled.ts CHANGED Viewed

@@ -8,9 +8,9 @@ export const MidBannerRatafiaSampleStyled = styled.div`
   .mid-banner-ratafia-sample {
     &__image {
       img {
-        border-radius: var(--m-border-radius) var(--m-border-radius) 0 0;
+        border-radius: 8px 8px 0 0;
         box-shadow: var(--box-shadow-small);
-        width: 727px;
+        max-width: 727px;
       }
     }
     &__sumarized-tag {
@@ -25,7 +25,7 @@ export const MidBannerRatafiaSampleStyled = styled.div`
       top: -13px;
       background: var(--primary-main-light-5);
-      border-radius: var(--s-border-radius);
+      border-radius: var(--global-border-radius);
       border: 1px solid var(--primary-main-light-3);
       box-shadow: var(--box-shadow-small);
@@ -45,7 +45,7 @@ export const MidBannerRatafiaSampleStyled = styled.div`
       gap: 0.25rem;
       background: var(--neutral-neutral-6);
-      border-radius: var(--s-border-radius);
+      border-radius: var(--global-border-radius);
       box-shadow: var(--box-shadow-small);
       &__icon {

package/dist/src/components/molecules/MoreDocsMobile/MoreDocsMobile.styled.js CHANGED Viewed

@@ -7,7 +7,7 @@ export const MoreDocsMobileStyled = styled.div `
       margin: 0 4.5rem 2.5rem 4.5rem;
     }
     padding: 0.3125rem 0;
-    border-radius: var(--s-border-radius);
+    border-radius: 4px;
     border: solid 2px #dfe5e8;
     display: flex;
     flex-direction: column;
@@ -50,8 +50,8 @@ export const MoreDocsMobileStyled = styled.div `
     @media ${device['portrait-tablets']} {
       margin: -2.5rem 4.5rem 2.5rem 4.5rem;
     }
-    padding: 1rem 0.5rem;
-    border-radius: var(--s-border-radius);
+    padding: 1rem 0.5rem 1rem 0.5rem;
+    border-radius: 4px;
     border: solid 2px #dfe5e8;
     display: flex;
     flex-direction: column;

package/dist/src/components/molecules/MoreDocsMobile/MoreDocsMobile.styled.ts CHANGED Viewed

@@ -8,7 +8,7 @@ export const MoreDocsMobileStyled = styled.div`
       margin: 0 4.5rem 2.5rem 4.5rem;
     }
     padding: 0.3125rem 0;
-    border-radius: var(--s-border-radius);
+    border-radius: 4px;
     border: solid 2px #dfe5e8;
     display: flex;
     flex-direction: column;
@@ -51,8 +51,8 @@ export const MoreDocsMobileStyled = styled.div`
     @media ${device['portrait-tablets']} {
       margin: -2.5rem 4.5rem 2.5rem 4.5rem;
     }
-    padding: 1rem 0.5rem;
-    border-radius: var(--s-border-radius);
+    padding: 1rem 0.5rem 1rem 0.5rem;
+    border-radius: 4px;
     border: solid 2px #dfe5e8;
     display: flex;
     flex-direction: column;

package/dist/src/components/molecules/Pagination/Pagination.styled.js CHANGED Viewed

@@ -38,7 +38,7 @@ export const PaginationStyled = styled.div `
       align-items: center;
       background: var(--neutral-neutral-6);
       border: 2px solid var(--neutral-neutral-3);
-      border-radius: var(--s-border-radius);
+      border-radius: 4px;
       box-sizing: border-box;
       color: var(--neutral-neutral-2);
       cursor: pointer;

package/dist/src/components/molecules/Pagination/Pagination.styled.ts CHANGED Viewed

@@ -39,7 +39,7 @@ export const PaginationStyled = styled.div`
       align-items: center;
       background: var(--neutral-neutral-6);
       border: 2px solid var(--neutral-neutral-3);
-      border-radius: var(--s-border-radius);
+      border-radius: 4px;
       box-sizing: border-box;
       color: var(--neutral-neutral-2);
       cursor: pointer;

package/dist/src/components/molecules/PhoneContactBoxDesktop/PhoneContactBoxDesktop.styled.js CHANGED Viewed

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const PhoneContactBoxDesktopStyled = styled.div `
   background-color: var(--others-white);
   width: 100%;
-  border-radius: var(--s-border-radius);
+  border-radius: 4px;
   margin-bottom: 2rem;
   display: none;
   padding: 2rem 1.5rem;

package/dist/src/components/molecules/PhoneContactBoxDesktop/PhoneContactBoxDesktop.styled.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 export const PhoneContactBoxDesktopStyled = styled.div`
   background-color: var(--others-white);
   width: 100%;
-  border-radius: var(--s-border-radius);
+  border-radius: 4px;
   margin-bottom: 2rem;
   display: none;
   padding: 2rem 1.5rem;

package/dist/src/components/molecules/PhoneContactBoxMobile/PhoneContactBoxMobile.styled.js CHANGED Viewed

@@ -26,7 +26,7 @@ export const PhoneContactBoxMobileStyled = styled.div `
     &-text {
       color: var(--neutral-neutral-2);
       text-align: center;
-      margin: 0 0 2rem;
+      margin: 0rem 0 2rem;
     }
   }
 `;

package/dist/src/components/molecules/PhoneContactBoxMobile/PhoneContactBoxMobile.styled.ts CHANGED Viewed

@@ -27,7 +27,7 @@ export const PhoneContactBoxMobileStyled = styled.div`
     &-text {
       color: var(--neutral-neutral-2);
       text-align: center;
-      margin: 0 0 2rem;
+      margin: 0rem 0 2rem;
     }
   }
 `

package/dist/src/components/molecules/PopularDocs/PopularDocs.styled.js CHANGED Viewed

@@ -19,7 +19,7 @@ export const PopularDocsStyled = styled.div `
     line-height: 1.33;
     letter-spacing: -0.3px;
     color: var(--primary-main-dark-1);
-    margin-bottom: 1rem;
+    margin-bottom: 16px;
     @media only screen and (max-width: ${size.md}) {
       text-align: center;

package/dist/src/components/molecules/PopularDocs/PopularDocs.styled.ts CHANGED Viewed

@@ -20,7 +20,7 @@ export const PopularDocsStyled = styled.div`
     line-height: 1.33;
     letter-spacing: -0.3px;
     color: var(--primary-main-dark-1);
-    margin-bottom: 1rem;
+    margin-bottom: 16px;
     @media only screen and (max-width: ${size.md}) {
       text-align: center;

package/dist/src/components/molecules/PricingCard/PricingCard.styled.js CHANGED Viewed

@@ -53,7 +53,7 @@ export const PricingCardStyled = styled.li `
     &__wrapper {
       background-color: var(--others-white);
       box-shadow: var(--box-shadow-container);
-      border-radius: var(--s-border-radius);
+      border-radius: var(--global-border-radius);
       border: solid 1px transparent;
       ul {

package/dist/src/components/molecules/PricingCard/PricingCard.styled.ts CHANGED Viewed

@@ -54,7 +54,7 @@ export const PricingCardStyled = styled.li`
     &__wrapper {
       background-color: var(--others-white);
       box-shadow: var(--box-shadow-container);
-      border-radius: var(--s-border-radius);
+      border-radius: var(--global-border-radius);
       border: solid 1px transparent;
       ul {

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCard.styled.js CHANGED Viewed

@@ -7,7 +7,7 @@ export const RatafiaSubscriptionCardStyled = styled.div `
   gap: 0.5rem;
   min-width: 368px;
   padding: 1rem;
-  border-radius: var(--s-border-radius);
+  border-radius: var(--global-border-radius);
   @media ${device.mobile} {
     min-width: auto;
@@ -57,7 +57,7 @@ export const RatafiaSubscriptionCardStyled = styled.div `
       flex-flow: row wrap;
       align-items: center;
       justify-content: space-between;
-      gap: 0.5rem var(--global-gap);
+      gap: 0.5rem 1rem;
       @media ${device.mobile} {
         flex-direction: column;

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCard.styled.ts CHANGED Viewed

@@ -8,7 +8,7 @@ export const RatafiaSubscriptionCardStyled = styled.div`
   gap: 0.5rem;
   min-width: 368px;
   padding: 1rem;
-  border-radius: var(--s-border-radius);
+  border-radius: var(--global-border-radius);
   @media ${device.mobile} {
     min-width: auto;
@@ -58,7 +58,7 @@ export const RatafiaSubscriptionCardStyled = styled.div`
       flex-flow: row wrap;
       align-items: center;
       justify-content: space-between;
-      gap: 0.5rem var(--global-gap);
+      gap: 0.5rem 1rem;
       @media ${device.mobile} {
         flex-direction: column;

package/dist/src/components/molecules/Snackbar/Snackbar.styled.js CHANGED Viewed

@@ -11,7 +11,7 @@ export const SnackbarStyled = styled.div `
   transition: transform 1s;
   z-index: 10000;
   overflow: hidden;
-  border-radius: var(--s-border-radius);
+  border-radius: 4px;
   box-shadow: var(--box-shadow-container);
   font-size: 14px;
@@ -34,7 +34,7 @@ export const SnackbarStyled = styled.div `
     float: left;
     margin: 1.25rem 0.75rem 0 0.75rem;
     @media ${device['portrait-tablets']} {
-      margin: 0.75rem 0.75rem 0 0.75rem;
+      margin: space(3) space(3) 0 space(3);
     }
   }

package/dist/src/components/molecules/Snackbar/Snackbar.styled.ts CHANGED Viewed

@@ -12,7 +12,7 @@ export const SnackbarStyled = styled.div`
   transition: transform 1s;
   z-index: 10000;
   overflow: hidden;
-  border-radius: var(--s-border-radius);
+  border-radius: 4px;
   box-shadow: var(--box-shadow-container);
   font-size: 14px;
@@ -35,7 +35,7 @@ export const SnackbarStyled = styled.div`
     float: left;
     margin: 1.25rem 0.75rem 0 0.75rem;
     @media ${device['portrait-tablets']} {
-      margin: 0.75rem 0.75rem 0 0.75rem;
+      margin: space(3) space(3) 0 space(3);
     }
   }

package/dist/src/components/molecules/StepGetForm/StepGetForm.styled.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const StepGetFormStyled = styled.div `
-  border-radius: var(--s-border-radius);
+  border-radius: var(--global-border-radius);
   display: flex;
   max-width: 100%;
   padding: 2rem;
@@ -12,7 +12,7 @@ export const StepGetFormStyled = styled.div `
   text-align: center;
   background: var(--others-white);
   box-shadow: var(--box-shadow-medium);
-  border: var(--s-border-radius);
+  border: var(--global-border-radius);
   margin-right: 0.5rem;
   margin-bottom: 1rem;

package/dist/src/components/molecules/StepGetForm/StepGetForm.styled.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 export const StepGetFormStyled = styled.div`
-  border-radius: var(--s-border-radius);
+  border-radius: var(--global-border-radius);
   display: flex;
   max-width: 100%;
   padding: 2rem;
@@ -13,7 +13,7 @@ export const StepGetFormStyled = styled.div`
   text-align: center;
   background: var(--others-white);
   box-shadow: var(--box-shadow-medium);
-  border: var(--s-border-radius);
+  border: var(--global-border-radius);
   margin-right: 0.5rem;
   margin-bottom: 1rem;

package/dist/src/components/molecules/StepRatafiaCardList/StepRatafiaCardList.scss CHANGED Viewed

@@ -13,6 +13,6 @@
   }
   @include desktop-xl {
     flex-direction: column;
-    gap: var(--global-gap);
+    gap: 1rem;
   }
 }

package/dist/src/components/molecules/StepRatafiaCardList/StepRatafiaCardList.styled.js CHANGED Viewed

@@ -14,6 +14,6 @@ export const StepRatafiaCardListStyled = styled.div `
   @media ${device['desktop-xl']} {
     flex-direction: column;
-    gap: var(--global-gap);
+    gap: 1rem;
   }
 `;

package/dist/src/components/molecules/StepRatafiaCardList/StepRatafiaCardList.styled.ts CHANGED Viewed

@@ -15,6 +15,6 @@ export const StepRatafiaCardListStyled = styled.div`
   @media ${device['desktop-xl']} {
     flex-direction: column;
-    gap: var(--global-gap);
+    gap: 1rem;
   }
 `

package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.js CHANGED Viewed

@@ -9,9 +9,9 @@ export const SubtypeDocumentCardStyled = styled.div `
   width: 100%;
   max-width: 376px;
   min-height: 600px;
-  padding: 2rem 1.5rem 2rem 1.5rem;
+  padding: 32px 24px 32px 24px;
   gap: 24px;
-  border-radius: var(--s-border-radius) 0 0 0;
+  border-radius: 4px 0px 0px 0px;
   opacity: 0px;
   box-shadow: 0px 2px 6px 0px var(--neutral-neutral-3);
   background-color: var(--secondary-main-light-5);
@@ -90,7 +90,7 @@ export const SubtypeDocumentCardStyled = styled.div `
     @media ${device.desktop} {
       flex-direction: row;
       align-self: flex-start;
-      gap: var(--global-gap);
+      gap: 1rem;
       align-items: center;
     }
@@ -112,7 +112,7 @@ export const SubtypeDocumentCardStyled = styled.div `
     .downloadable-buttons {
       display: flex;
       flex-wrap: wrap;
-      gap: var(--global-gap);
+      gap: 1rem;
       width: 100%;
       justify-content: space-between;
@@ -142,7 +142,7 @@ export const SubtypeDocumentCardStyled = styled.div `
       @media ${device.desktop} {
         display: flex;
-        gap: var(--global-gap);
+        gap: 1rem;
         flex-wrap: nowrap;
         margin-top: 0;
       }

package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.ts CHANGED Viewed

@@ -10,9 +10,9 @@ export const SubtypeDocumentCardStyled = styled.div`
   width: 100%;
   max-width: 376px;
   min-height: 600px;
-  padding: 2rem 1.5rem 2rem 1.5rem;
+  padding: 32px 24px 32px 24px;
   gap: 24px;
-  border-radius: var(--s-border-radius) 0 0 0;
+  border-radius: 4px 0px 0px 0px;
   opacity: 0px;
   box-shadow: 0px 2px 6px 0px var(--neutral-neutral-3);
   background-color: var(--secondary-main-light-5);
@@ -91,7 +91,7 @@ export const SubtypeDocumentCardStyled = styled.div`
     @media ${device.desktop} {
       flex-direction: row;
       align-self: flex-start;
-      gap: var(--global-gap);
+      gap: 1rem;
       align-items: center;
     }
@@ -113,7 +113,7 @@ export const SubtypeDocumentCardStyled = styled.div`
     .downloadable-buttons {
       display: flex;
       flex-wrap: wrap;
-      gap: var(--global-gap);
+      gap: 1rem;
       width: 100%;
       justify-content: space-between;
@@ -143,7 +143,7 @@ export const SubtypeDocumentCardStyled = styled.div`
       @media ${device.desktop} {
         display: flex;
-        gap: var(--global-gap);
+        gap: 1rem;
         flex-wrap: nowrap;
         margin-top: 0;
       }

package/dist/src/components/molecules/TagsRatafiaList/TagsRatafiaList.styled.js CHANGED Viewed

@@ -3,5 +3,5 @@ export const TagsRatafiaListStyled = styled.div `
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
-  gap: 0.5rem var(--global-gap);
+  gap: 0.5rem 1rem;
 `;

package/dist/src/components/molecules/TagsRatafiaList/TagsRatafiaList.styled.ts CHANGED Viewed

@@ -4,5 +4,5 @@ export const TagsRatafiaListStyled = styled.div`
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
-  gap: 0.5rem var(--global-gap);
+  gap: 0.5rem 1rem;
 `

package/dist/src/components/molecules/TextInput/TextInput.scss CHANGED Viewed

@@ -16,7 +16,7 @@
     appearance: none;
     color: var(--neutral-neutral-1);
     background-color: var(--neutral-neutral-6);
-    border-radius: var(--s-border-radius);
+    border-radius: var(--global-border-radius);
     padding: 0.75rem 0 0.75rem 0.75rem;
     font-size: 0.875rem;
     height: 40px;

package/dist/src/components/molecules/TooltipMenu/TooltipMenu.scss CHANGED Viewed

@@ -2,7 +2,7 @@
 @import '../../../globalStyles/mediaqueries.scss';
 .tooltip-menu__item {
-  border-radius: var(--s-border-radius);
+  border-radius: var(--global-border-radius);
   border: 1px solid var(--neutral-neutral-4);
   display: flex;
   padding: 0.1875rem;

package/dist/src/components/molecules/TypeModulesList/TypeModulesList.styled.js CHANGED Viewed

@@ -15,7 +15,7 @@ export const TypeModulesListStyled = styled.div `
     justify-content: center;
     flex-direction: column;
     background-color: var(--neutral-neutral-6);
-    padding: 1.5rem;
+    padding: 24px;
     box-shadow: 0px 2px 6px 0px #02374a3f;
     @media ${device.laptop} {

package/dist/src/components/molecules/TypeModulesList/TypeModulesList.styled.ts CHANGED Viewed

@@ -16,7 +16,7 @@ export const TypeModulesListStyled = styled.div`
     justify-content: center;
     flex-direction: column;
     background-color: var(--neutral-neutral-6);
-    padding: 1.5rem;
+    padding: 24px;
     box-shadow: 0px 2px 6px 0px #02374a3f;
     @media ${device.laptop} {

package/dist/src/components/molecules/UploadRatafiaZone/UploadRatafiaZone.styled.js CHANGED Viewed

@@ -30,7 +30,7 @@ export const UploadRatafiaZoneStyled = styled.div `
       padding: 3.5rem 2rem 1rem 2rem;
-      border-radius: var(--l-border-radius);
+      border-radius: 16px;
       background: var(--neutral-neutral-6);
       color: var(--neutral-neutral-3);

package/dist/src/components/molecules/UploadRatafiaZone/UploadRatafiaZone.styled.ts CHANGED Viewed

@@ -31,7 +31,7 @@ export const UploadRatafiaZoneStyled = styled.div`
       padding: 3.5rem 2rem 1rem 2rem;
-      border-radius: var(--l-border-radius);
+      border-radius: 16px;
       background: var(--neutral-neutral-6);
       color: var(--neutral-neutral-3);

package/dist/src/components/organisms/CardFunctionality/CardFunctionality.styled.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const CardFunctionalityStyled = styled.article `
-  border-radius: var(--s-border-radius);
+  border-radius: var(--global-border-radius);
   box-shadow: var(--box-shadow-medium);
   display: flex;
   flex-direction: column;
@@ -20,7 +20,7 @@ export const CardFunctionalityStyled = styled.article `
     .content {
       display: flex;
       flex-direction: column;
-      gap: 0.5rem;
+      gap: calc(1rem / 2);
       .header {
         display: flex;
@@ -30,7 +30,7 @@ export const CardFunctionalityStyled = styled.article `
         .icon {
           padding: 2px;
-          border-radius: var(--s-border-radius);
+          border-radius: var(--global-border-radius);
           background: var(--primary-main-light-5);
         }
@@ -53,7 +53,7 @@ export const CardFunctionalityStyled = styled.article `
     .tags {
       display: flex;
-      gap: 2rem;
+      gap: calc(1rem * 2);
       flex-wrap: wrap;
     }
   }