Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update color names and box-shadows to be consistent with Figma #1092

Closed
Traxmaxx opened this issue Oct 16, 2023 · 3 comments · Fixed by #1143
Closed

Update color names and box-shadows to be consistent with Figma #1092

Traxmaxx opened this issue Oct 16, 2023 · 3 comments · Fixed by #1143
Assignees

Comments

@Traxmaxx
Copy link
Contributor

Traxmaxx commented Oct 16, 2023

Update colors in either Figma or Tailwind to have matching names. Please sync with @AllieMendes before starting this task!
Also to check as part of this task are box-shadows

Figma design for box-hadows can be found here:
https://www.figma.com/file/eq3JgvmW48IVrYcg2kzgLL/Komiser---Design-System?type=design&node-id=2085-14866&mode=dev

Colors are here:
https://www.figma.com/file/eq3JgvmW48IVrYcg2kzgLL/Komiser---Design-System?type=design&node-id=2825-13629&mode=dev

Our colors are defined inside komiser/dashboard/tailwind.config.js:1

      colors: {
        primary: '#008484',
        secondary: '#065555',
        komiser: {
          100: '#F5FDFD',
          120: '#e5f8f8',
          130: '#E2F6F6',
          150: '#DFF5F5',
          200: '#CCF2F2',
          300: '#99E5E5',
          400: '#66D9D9',
          500: '#33CCCC',
          600: '#008484',
          700: '#065555'
        },
        info: {
          600: '#387BEB'
        },
        warning: {
          100: '#FFF5DA',
          600: '#EDC16B'
        },
        error: {
          100: '#FFE8E8',
          600: '#DE5E5E',
          700: '#ae4242',
          900: '#362033'
        },
        success: {
          100: '#E1FFE3',
          600: '#56BA5B'
        },
        black: {
          100: '#F4F9F9',
          130: '#F4F2F7',
          150: '#F5F5F5',
          170: '#EDEBEE',
          200: '#CFD7D7',
          300: '#95A3A3',
          400: '#697372',
          800: '#0C1717',
          900: '#070011'
        }
      },

Screenshot 2023-10-16 at 11 08 53

As you can see the naming scheme differs a bit. It should be unified.

Additional context
If you want to tackle this task, feel free to share with us your email address so we can give you access to the Figma project :)

@umrkhn
Copy link
Contributor

umrkhn commented Oct 19, 2023

@Traxmaxx I would like to work on this.

@Traxmaxx
Copy link
Contributor Author

Its all yours! I think it might make sense to pair with @AllieMendes on the color names and box shadows to give you a brief introduction? What do you two think?

@umrkhn
Copy link
Contributor

umrkhn commented Oct 19, 2023

@Traxmaxx sure will do once I make a PR for #1097

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants