Merge pull request #95 from Giveth/add-color-to-typographies

Add color to typographies
Giveth · Jan 23, 2024 · 3d27ccf · 3d27ccf
2 parents 7225edc + 343b726
commit 3d27ccf
Show file tree

Hide file tree

Showing 21 changed files with 24 additions and 3 deletions.
diff --git 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"
 	],

diff --git a/src/components/typography/ButtonText.tsx b/src/components/typography/ButtonText.tsx
@@ -9,6 +9,7 @@ export const ButtonText = styled.span<IButtonTextProps>`
 	font-style: normal;
 	text-transform: uppercase;
 	font-weight: 700;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${props => {
 		switch (props.size) {
 			case 'small':

diff --git a/src/components/typography/GLink.tsx b/src/components/typography/GLink.tsx
@@ -9,6 +9,7 @@ export const GLink = styled.span<IGLinkProps>`
 	font-style: normal;
 	font-weight: normal;
 	display: inline-block;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${props => {
 		switch (props.size) {
 			case 'Tiny':

diff --git a/src/components/typography/Overline.tsx b/src/components/typography/Overline.tsx
@@ -8,6 +8,7 @@ export const Overline = styled.span<IOverlineProps>`
 	/* Overline */
 	font-family: Red Hat Text, sans-serif;
 	line-height: 132%;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${props => {
 		switch (props.styleType) {
 			case 'Small':

diff --git a/src/components/typography/QuoteText.tsx b/src/components/typography/QuoteText.tsx
@@ -10,6 +10,7 @@ export const QuoteText = styled.div<IQuoteTextProps>`
 	font-weight: normal;
 	font-style: normal;
 	line-height: 134%;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${props => {
 		switch (props.size) {
 			case 'small':

diff --git a/src/components/typography/body/Caption.tsx b/src/components/typography/body/Caption.tsx
@@ -11,4 +11,5 @@ export const Caption = styled.div<ICaptionProps>`
 	font-weight: ${props => (props.medium ? 500 : 400)};
 	font-size: 0.875rem;
 	line-height: 150%;
+	color: ${props => (props.color ? props.color : 'inherit')};
 `;
diff --git a/src/components/typography/body/Lead.tsx b/src/components/typography/body/Lead.tsx
@@ -15,6 +15,7 @@ export const Lead = styled.div<ILeadProps>`
 	font-style: normal;
 	font-weight: normal;
 	line-height: 150%;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${props => {
 		switch (props.size) {
 			case 'medium':

diff --git 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')};
 `;
diff --git 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')};
 `;
diff --git 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')};
 `;
diff --git 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')};
 `;
diff --git 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;
 	}

diff --git 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;
 	}

diff --git 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;
 	}

diff --git a/src/components/typography/headlines/H1.tsx b/src/components/typography/headlines/H1.tsx
@@ -12,6 +12,7 @@ export const H1 = styled.h1<IHeadingProps>`
 	letter-spacing: -0.03em;
 	margin-top: 0;
 	margin-bottom: 0;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 4.125rem;
 	}

diff --git a/src/components/typography/headlines/H2.tsx b/src/components/typography/headlines/H2.tsx
@@ -12,6 +12,7 @@ export const H2 = styled.h2<IHeadingProps>`
 	letter-spacing: -0.02em;
 	margin-top: 0;
 	margin-bottom: 0;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 3.25rem;
 	}

diff --git a/src/components/typography/headlines/H3.tsx b/src/components/typography/headlines/H3.tsx
@@ -11,6 +11,7 @@ export const H3 = styled.h3<IHeadingProps>`
 	line-height: 130%;
 	margin-top: 0;
 	margin-bottom: 0;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 2.56rem;
 	}

diff --git a/src/components/typography/headlines/H4.tsx b/src/components/typography/headlines/H4.tsx
@@ -12,6 +12,7 @@ export const H4 = styled.h4<IHeadingProps>`
 	letter-spacing: -0.01em;
 	margin-top: 0;
 	margin-bottom: 0;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 2rem;
 	}

diff --git a/src/components/typography/headlines/H5.tsx b/src/components/typography/headlines/H5.tsx
@@ -12,6 +12,7 @@ export const H5 = styled.h5<IHeadingProps>`
 	letter-spacing: -0.005em;
 	margin-top: 0;
 	margin-bottom: 0;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 1.56rem;
 	}

diff --git a/src/components/typography/headlines/H6.tsx b/src/components/typography/headlines/H6.tsx
@@ -11,4 +11,5 @@ export const H6 = styled.h6<IHeadingProps>`
 	letter-spacing: -0.005em;
 	margin-top: 0;
 	margin-bottom: 0;
+	color: ${props => (props.color ? props.color : 'inherit')};
 `;
diff --git a/src/stories/typography/body/P.stories.tsx b/src/stories/typography/body/P.stories.tsx
@@ -8,9 +8,11 @@ export default {
 } as ComponentMeta<typeof P>;
 
 const Template: ComponentStory<typeof P> = args => (
-	<P {...args}>
+	<P {...args} color='red'>
 		{args.label || 'Was he a beast if music could move him so?'}
 	</P>
 );
 
-export const Example = Template.bind({});
+export const Example = Template.bind({
+	color: 'red',
+});