react95-io / React95

🌈🕹 Windows 95 style UI component library for React
https://react95.io
MIT License
6.7k stars 187 forks source link

Create a utility to map Windows theme colors to React95 theme objects. #212

Closed tpenguinltg closed 3 years ago

tpenguinltg commented 4 years ago

This utility be a function that takes in a object with key-value pairs corresponding to Windows theme color properties and maps them into a React95 theme object. The values in the input object should be a valid CSS color and is mapped untouched to the React95 theme object.

Example input:

{
  ButtonAlternateFace: '#c0c0c0',
  ButtonDkShadow: '#404040',
  ButtonFace: '#d4d0c8',
  ButtonHilight: '#ffffff',
  ButtonLight: '#d4d0c8',
  ButtonShadow: '#808080',
  ButtonText: '#000000',
  ActiveBorder: '#d4d0c8',
  AppWorkspace: '#808080',
  Background: '#3a6ea5',
  InactiveBorder: '#d4d0c8',
  Scrollbar: '#d4d0c8',
  Window: '#ffffff',
  WindowFrame: '#000000',
  WindowText: '#000000',
  ActiveTitle: '#0a246a',
  GradientActiveTitle: '#a6caf0',
  GradientInactiveTitle: '#c0c0c0',
  InactiveTitle: '#808080',
  InactiveTitleText: '#d4d0c8',
  TitleText: '#ffffff',
  Menu: '#d4d0c8',
  MenuBar: '#c0c0c0',
  MenuHilight: '#000080',
  MenuText: '#000000',
  GrayText: '#808080',
  Hilight: '#0a246a',
  HilightText: '#ffffff',
  HotTrackingColor: '#000080',
  InfoText: '#000000',
  InfoWindow: '#ffffe1',
}

To determine: Which Windows theme properties map to which React95 theme properties.

This should help ease the transition to v4 as one of the goals listed in #210 is to match color names.

tpenguinltg commented 3 years ago

I've slowly made progress on this and it's almost ready to go. I just need to add tests and do any necessary clean up when I get a chance, and then I can put up a pull request when it's ready.

arturbien commented 3 years ago

@tpenguinltg that's awesome! <3

arturbien commented 3 years ago

:tada: This issue has been resolved in version 3.5.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: