Since last few days I have been creating a color system for my few websites but I am completely confused as to what naming system will be good. Can you tell which color system names will be good between version-1 and version-2. And there is none of these, if you have any other version please share.
version - 1
:root{ --color-primary:hsl(247, 50%, 47%); --color-secondary: hsl(51, 77%, 52%); /* text colors */ --color-text-1: hsl(0, 0%, 100%); --color-text-2: hsl(0, 0%, 80%); --color-text-3: hsl(0, 0%, 63%); --color-text-primary: var(--color-primary); --color-text-secondary: var(--color-secondary); /* bg colors */ --color-bg-1: hsl(0, 0%, 0%); --color-bg-2: hsl(0, 0%, 16%); --color-bg-primary: var(--color-primary); --color-bg-secondary: var(--color-secondary);}version-2
:root{ --color-primary:hsl(247, 50%, 47%); --color-secondary: hsl(51, 77%, 52%); /* text colors */ --color-text-primary: hsl(0, 0%, 100%); --color-text-secondary: hsl(0, 0%, 80%); --color-text-tertiary: hsl(0, 0%, 63%); --color-text-primary: var(--color-primary); --color-text-secondary: var(--color-secondary); /* bg colors */ --color-bg-primary: hsl(0, 0%, 0%); --color-bg-secondary: hsl(0, 0%, 16%); --color-bg-primary: var(--color-primary); --color-bg-secondary: var(--color-secondary);}