SpaceyaTech / Team-Berlin-React

Repository for Team Berlin

10 stars 9 forks source link

chore: Add global color variables #24

Closed daveclinton closed 2 years ago

daveclinton commented 2 years ago

Add Project Wide Variables

This change adds a new ts file containing the global color variables from the figma design

Fixes # (issue)

Type of change

Please delete options that are not relevant.

[x] New feature (non-breaking change which adds functionality) requires a documentation update

How Has This Been Tested?

[ ] Test A
[ ] Test B

Checklist:

[x] My code follows the style guidelines of this project
[x] I have performed a self-review of my own code
[x] I have commented my code, particularly in hard-to-understand areas
[x] I have made corresponding changes to the documentation
[x] My changes generate no new warnings

jumalaw98 commented 2 years ago

Can the global variables be added in the index.css like

:root{
      --color-bg: #;
    --color-bg-varian: #;
    --color-primary: #;
    --color-primary-variant: ;
    --color-white: #;
    --color-light: ;
}

or why did you make it to different file? Enlighten me on this too

daveclinton commented 2 years ago

Can the global variables be added in the index.css like
:root{
      --color-bg: #;
    --color-bg-varian: #;
    --color-primary: #;
    --color-primary-variant: ;
    --color-white: #;
    --color-light: ;
}
Save or why did you make it to different file? Enlighten me on this too

In my opinion. Being able to access theme values without an import or an inline function is a breath of fresh air. You do lose some static typing benefits—more on this later—but it's a very happy tradeoff in my eyes.

jumalaw98 commented 2 years ago

@mamba-dev-KE @beingnile would you mind helping out on this review, the css file/ variable to use

mamba-dev-KE commented 2 years ago

Will have a look tomorrow

jumalaw98 commented 2 years ago

@mamba-dev-KE keep me updated, I'll be grateful to get your feedback, on this merge

mamba-dev-KE commented 2 years ago

@jumalaw98 imo this would work well with a CSS In JS styling strategy using something like inline styles in .ts components or something like Styled components or emotion because importing the value in .css files would not work. What strategy do you have in mind @daveclinton ?

jumalaw98 commented 2 years ago

@mamba-dev-KE what could be your suggestions, as we wait for same points from @daveclinton

jumalaw98 commented 2 years ago

@jumalaw98 imo this would work well with a CSS In JS styling strategy using something like inline styles in .ts components or something like Styled components or emotion because importing the value in .css files would not work. What strategy do you have in mind @daveclinton ?

@daveclinton whats your response on this