From 82d618036a96c14e5e61c3c7b7a647f6f8105fd3 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:38:42 +0330 Subject: [PATCH 01/21] add color to P --- src/components/typography/body/P.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/body/P.tsx b/src/components/typography/body/P.tsx index c5fe393..d22c124 100644 --- a/src/components/typography/body/P.tsx +++ b/src/components/typography/body/P.tsx @@ -7,4 +7,5 @@ export const P = styled.div` font-weight: normal; font-size: 1rem; line-height: 150%; + color: ${props => (props.color ? props.color : 'inherit')}; `; From 509b74f9d550f33e5da0523c0ae8ddc84d950578 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:39:01 +0330 Subject: [PATCH 02/21] add color to button text --- src/components/typography/ButtonText.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/ButtonText.tsx b/src/components/typography/ButtonText.tsx index 3733fee..44c467c 100644 --- a/src/components/typography/ButtonText.tsx +++ b/src/components/typography/ButtonText.tsx @@ -9,6 +9,7 @@ export const ButtonText = styled.span` font-style: normal; text-transform: uppercase; font-weight: 700; + color: ${props => (props.color ? props.color : 'inherit')}; ${props => { switch (props.size) { case 'small': From 51557e1dbc6e5b7f5219524a5e7cf393debefc57 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:39:09 +0330 Subject: [PATCH 03/21] add color to GLink --- src/components/typography/GLink.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/GLink.tsx b/src/components/typography/GLink.tsx index 36b5d60..390bc75 100644 --- a/src/components/typography/GLink.tsx +++ b/src/components/typography/GLink.tsx @@ -9,6 +9,7 @@ export const GLink = styled.span` font-style: normal; font-weight: normal; display: inline-block; + color: ${props => (props.color ? props.color : 'inherit')}; ${props => { switch (props.size) { case 'Tiny': From 4ae79875b1ea52f0589ca1e8761539c9ac9f72f4 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:39:16 +0330 Subject: [PATCH 04/21] add color to Overline --- src/components/typography/Overline.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/Overline.tsx b/src/components/typography/Overline.tsx index d00370f..3460c24 100644 --- a/src/components/typography/Overline.tsx +++ b/src/components/typography/Overline.tsx @@ -8,6 +8,7 @@ export const Overline = styled.span` /* Overline */ font-family: Red Hat Text, sans-serif; line-height: 132%; + color: ${props => (props.color ? props.color : 'inherit')}; ${props => { switch (props.styleType) { case 'Small': From 738560807745c152331d850ed5ee0e8b92885f83 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:39:24 +0330 Subject: [PATCH 05/21] add color to QuoteText --- src/components/typography/QuoteText.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/QuoteText.tsx b/src/components/typography/QuoteText.tsx index 710f9f5..4d3a4b0 100644 --- a/src/components/typography/QuoteText.tsx +++ b/src/components/typography/QuoteText.tsx @@ -10,6 +10,7 @@ export const QuoteText = styled.div` font-weight: normal; font-style: normal; line-height: 134%; + color: ${props => (props.color ? props.color : 'inherit')}; ${props => { switch (props.size) { case 'small': From b85803a85e2150cccd47d51863c1430e3046d4a6 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:39:32 +0330 Subject: [PATCH 06/21] add color to Caption --- src/components/typography/body/Caption.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/body/Caption.tsx b/src/components/typography/body/Caption.tsx index be46bcf..8c5dc56 100644 --- a/src/components/typography/body/Caption.tsx +++ b/src/components/typography/body/Caption.tsx @@ -11,4 +11,5 @@ export const Caption = styled.div` font-weight: ${props => (props.medium ? 500 : 400)}; font-size: 0.875rem; line-height: 150%; + color: ${props => (props.color ? props.color : 'inherit')}; `; From c04d83af487606f8845ce563e03f50beb10be683 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:39:41 +0330 Subject: [PATCH 07/21] add color to Lead --- src/components/typography/body/Lead.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/body/Lead.tsx b/src/components/typography/body/Lead.tsx index c8aa35f..92d42b2 100644 --- a/src/components/typography/body/Lead.tsx +++ b/src/components/typography/body/Lead.tsx @@ -15,6 +15,7 @@ export const Lead = styled.div` font-style: normal; font-weight: normal; line-height: 150%; + color: ${props => (props.color ? props.color : 'inherit')}; ${props => { switch (props.size) { case 'medium': From 4cf2f6be6363b59f09ae2f5bb705beb81d58feea Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:39:53 +0330 Subject: [PATCH 08/21] add color to SemiTitle --- src/components/typography/body/SemiTitle.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/body/SemiTitle.tsx b/src/components/typography/body/SemiTitle.tsx index 0618f21..21fc589 100644 --- a/src/components/typography/body/SemiTitle.tsx +++ b/src/components/typography/body/SemiTitle.tsx @@ -8,4 +8,5 @@ export const SemiTitle = styled.div` font-size: 1rem; line-height: 150%; text-transform: uppercase; + color: ${props => (props.color ? props.color : 'inherit')}; `; From 8fb0ed58450061c8af833948f6f5c965d9739afb Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:40:02 +0330 Subject: [PATCH 09/21] add color to Subline --- src/components/typography/body/Subline.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/body/Subline.tsx b/src/components/typography/body/Subline.tsx index fe65ef3..7cc1e1d 100644 --- a/src/components/typography/body/Subline.tsx +++ b/src/components/typography/body/Subline.tsx @@ -7,4 +7,5 @@ export const Subline = styled.div` font-weight: normal; font-size: 0.75rem; line-height: 150%; + color: ${props => (props.color ? props.color : 'inherit')}; `; From 3f3942d81b06d2969c3805ccadac94830c094076 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:40:09 +0330 Subject: [PATCH 10/21] add color to Title --- src/components/typography/body/Title.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/body/Title.tsx b/src/components/typography/body/Title.tsx index 8e75dd9..9081995 100644 --- a/src/components/typography/body/Title.tsx +++ b/src/components/typography/body/Title.tsx @@ -8,4 +8,5 @@ export const Title = styled.div` font-size: 2rem; line-height: 132%; letter-spacing: -0.01em; + color: ${props => (props.color ? props.color : 'inherit')}; `; From d39cef8fa54c45ed01d0aff94fab85a41ccc1f7a Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:40:17 +0330 Subject: [PATCH 11/21] add color to D1 --- src/components/typography/displays/D1.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/displays/D1.tsx b/src/components/typography/displays/D1.tsx index e8202f1..8e67f6e 100644 --- a/src/components/typography/displays/D1.tsx +++ b/src/components/typography/displays/D1.tsx @@ -9,6 +9,7 @@ export const D1 = styled.div` font-size: 5rem; line-height: 130%; letter-spacing: -0.04em; + color: ${props => (props.color ? props.color : 'inherit')}; ${mediaQueries.tablet} { font-size: 6.69rem; } From 66f2d02fd8611320ba160f2d29a0733ce7cd4192 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:40:23 +0330 Subject: [PATCH 12/21] add color to D2 --- src/components/typography/displays/D2.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/displays/D2.tsx b/src/components/typography/displays/D2.tsx index 2661dbd..82a2747 100644 --- a/src/components/typography/displays/D2.tsx +++ b/src/components/typography/displays/D2.tsx @@ -9,6 +9,7 @@ export const D2 = styled.div` font-size: 4.625rem; line-height: 130%; letter-spacing: -0.04em; + color: ${props => (props.color ? props.color : 'inherit')}; ${mediaQueries.tablet} { font-size: 6.06rem; } From e1b40563b97e7f5bbbd790d670b8aafdf553b5a2 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:40:28 +0330 Subject: [PATCH 13/21] add color to D3 --- src/components/typography/displays/D3.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/displays/D3.tsx b/src/components/typography/displays/D3.tsx index de89c93..1cc19c7 100644 --- a/src/components/typography/displays/D3.tsx +++ b/src/components/typography/displays/D3.tsx @@ -9,6 +9,7 @@ export const D3 = styled.div` font-size: 4.25rem; line-height: 120%; letter-spacing: -0.04em; + color: ${props => (props.color ? props.color : 'inherit')}; ${mediaQueries.tablet} { font-size: 5.5rem; } From d5f769c5563dc053ff91266b50a34cf06ef6cb0f Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:40:36 +0330 Subject: [PATCH 14/21] add color to H1 --- src/components/typography/headlines/H1.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/headlines/H1.tsx b/src/components/typography/headlines/H1.tsx index ced6adf..31d8604 100644 --- a/src/components/typography/headlines/H1.tsx +++ b/src/components/typography/headlines/H1.tsx @@ -12,6 +12,7 @@ export const H1 = styled.h1` letter-spacing: -0.03em; margin-top: 0; margin-bottom: 0; + color: ${props => (props.color ? props.color : 'inherit')}; ${mediaQueries.tablet} { font-size: 4.125rem; } From 41b57af6d3642a318439145369e5743f2890ef22 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:40:42 +0330 Subject: [PATCH 15/21] add color to H2 --- src/components/typography/headlines/H2.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/headlines/H2.tsx b/src/components/typography/headlines/H2.tsx index 0c257ac..a9c518b 100644 --- a/src/components/typography/headlines/H2.tsx +++ b/src/components/typography/headlines/H2.tsx @@ -12,6 +12,7 @@ export const H2 = styled.h2` letter-spacing: -0.02em; margin-top: 0; margin-bottom: 0; + color: ${props => (props.color ? props.color : 'inherit')}; ${mediaQueries.tablet} { font-size: 3.25rem; } From b510c94631e37219245f8b56ed4eff398205d49e Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:40:46 +0330 Subject: [PATCH 16/21] add color to H3 --- src/components/typography/headlines/H3.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/headlines/H3.tsx b/src/components/typography/headlines/H3.tsx index fa2cd7b..c138a2f 100644 --- a/src/components/typography/headlines/H3.tsx +++ b/src/components/typography/headlines/H3.tsx @@ -11,6 +11,7 @@ export const H3 = styled.h3` line-height: 130%; margin-top: 0; margin-bottom: 0; + color: ${props => (props.color ? props.color : 'inherit')}; ${mediaQueries.tablet} { font-size: 2.56rem; } From ab3f53b088f055f9b6aa084ed2b8c5a8f995e433 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:40:50 +0330 Subject: [PATCH 17/21] add color to H4 --- src/components/typography/headlines/H4.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/headlines/H4.tsx b/src/components/typography/headlines/H4.tsx index 7d7e10f..6058399 100644 --- a/src/components/typography/headlines/H4.tsx +++ b/src/components/typography/headlines/H4.tsx @@ -12,6 +12,7 @@ export const H4 = styled.h4` letter-spacing: -0.01em; margin-top: 0; margin-bottom: 0; + color: ${props => (props.color ? props.color : 'inherit')}; ${mediaQueries.tablet} { font-size: 2rem; } From 0f879175f1ad316c881342033924502882f7b32f Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:40:55 +0330 Subject: [PATCH 18/21] add color to H5 --- src/components/typography/headlines/H5.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/headlines/H5.tsx b/src/components/typography/headlines/H5.tsx index 434ae46..916e979 100644 --- a/src/components/typography/headlines/H5.tsx +++ b/src/components/typography/headlines/H5.tsx @@ -12,6 +12,7 @@ export const H5 = styled.h5` letter-spacing: -0.005em; margin-top: 0; margin-bottom: 0; + color: ${props => (props.color ? props.color : 'inherit')}; ${mediaQueries.tablet} { font-size: 1.56rem; } From 9656d449ab5673fef21d3910c1248a9ce1d11d70 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:41:00 +0330 Subject: [PATCH 19/21] add color to H6 --- src/components/typography/headlines/H6.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/typography/headlines/H6.tsx b/src/components/typography/headlines/H6.tsx index 5f8e292..ac7f2e2 100644 --- a/src/components/typography/headlines/H6.tsx +++ b/src/components/typography/headlines/H6.tsx @@ -11,4 +11,5 @@ export const H6 = styled.h6` letter-spacing: -0.005em; margin-top: 0; margin-bottom: 0; + color: ${props => (props.color ? props.color : 'inherit')}; `; From 9fc2b748bba79c1ad13f110aa75a8107cbf125bf Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:41:08 +0330 Subject: [PATCH 20/21] add P story --- src/stories/typography/body/P.stories.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/stories/typography/body/P.stories.tsx b/src/stories/typography/body/P.stories.tsx index b5a9aca..ae52382 100644 --- a/src/stories/typography/body/P.stories.tsx +++ b/src/stories/typography/body/P.stories.tsx @@ -8,9 +8,11 @@ export default { } as ComponentMeta; const Template: ComponentStory = args => ( -

+

{args.label || 'Was he a beast if music could move him so?'}

); -export const Example = Template.bind({}); +export const Example = Template.bind({ + color: 'red', +}); From 343b7263d1ce047a85d3c0a1350372fd6f6b975f Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 23 Jan 2024 14:41:29 +0330 Subject: [PATCH 21/21] fix: add color to typographies --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2f3350f..d59003b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@giveth/ui-design-system", - "version": "1.11.19", + "version": "1.11.20", "files": [ "/lib" ],