chore:BED-7215 update color tokens, add comments in plugin file

Author: KillahDillah

packages/javascript/doodle-ui/src/tailwind/plugin.ts

@@ -20,8 +20,8 @@ const plugin: PluginCreator = ({ addBase, addUtilities }) => {
     addBase({
         ' :root': {
             // SHARED (same in light and dark)
-            // '--common-dark': common.dark,
-            // '--common-white': common.white,
+            '--common-dark': common.dark,
+            '--common-white': common.white,
 
             // // UTILITIES / risk level
             // '--risk-critical': palette.purple.A300,
@@ -43,13 +43,15 @@ const plugin: PluginCreator = ({ addBase, addUtilities }) => {
 
             // END OF SHARED
 
-            // MAIN
-            '--primary': light.primary.main,
+            // MAIN / new colors - 1:1 name match in Figma
+            '--primary': light.primary.main /* failsafe until useTheme is removed.*/,
+            '--primary-main': light.primary.main,
             '--primary-variant': light.primary.variant,
-            '--secondary': light.secondary.main,
+            '--secondary': light.secondary.main /* failsafe until useTheme is removed.*/,
             '--secondary-main': light.secondary.main,
             '--secondary-variant': light.secondary.variant,
-            // '--tertiary': light.tertiary.main,
+            // '--tertiary': light.tertiary.main, /* failsafe until useTheme is removed.*/
+            // '--tertiary-main': light.tertiary.main,
             // '--tertiary-variant': light.tertiary.variant,
             '--disabled': light.disabled,
 
@@ -70,7 +72,7 @@ const plugin: PluginCreator = ({ addBase, addUtilities }) => {
             // '--text-light': text.light,
             // '--text-contrast': common.white,
             '--text-disabled': light.text.disabled,
-            // '--text-primary': light.primary.main,
+            '--text-primary': light.primary.main,
             // '--text-secondary': light.secondary.main,
 
             // LINKS
@@ -196,7 +198,9 @@ const plugin: PluginCreator = ({ addBase, addUtilities }) => {
             // '--icon-disabled': palette.grey[700],
             // '--divider': palette.neutral.light[500],
 
-            // Legacy below
+            //  End of MAIN / new colors
+
+            // Legacy below - these colors will be phased out over time
             // same as palette.neutral.dark[50]
             '--contrast': '#121212',
 
@@ -235,13 +239,14 @@ const plugin: PluginCreator = ({ addBase, addUtilities }) => {
         },
 
         '.dark': {
-            // MAIN
+            // MAIN / new colors - 1:1 name match in Figma
             '--primary': dark.primary.main,
+            '--primary-main': dark.primary.main,
             '--primary-variant': dark.primary.variant,
             '--secondary': dark.secondary.main,
             '--secondary-main': dark.secondary.main,
             '--secondary-variant': dark.secondary.variant,
-            // '--tertiary': dark.tertiary.main,
+            // '--tertiary-main': dark.tertiary.main,
             // '--tertiary-variant': dark.tertiary.variant,
             '--disabled': dark.disabled,
 
@@ -262,7 +267,7 @@ const plugin: PluginCreator = ({ addBase, addUtilities }) => {
             // '--text-light': dark.text.light,
             // '--text-contrast': common.dark,
             '--text-disabled': common.disabled,
-            // '--text-primary': dark.primary.main,
+            '--text-primary': dark.primary.main,
             // '--text-secondary': dark.secondary.main,
 
             // LINKS
@@ -388,7 +393,9 @@ const plugin: PluginCreator = ({ addBase, addUtilities }) => {
             // '--icon-disabled': common.disabled,
             // '--divider': palette.neutral.dark[500],
 
-            ///////////// Legacy below //////////
+            // End of Main / new colors
+
+            ///////////// Legacy below ////////// these colors will be phased out over time
             // same as common.white
             '--contrast': '#ffffff',
             // same palette.neutral.dark[50]
@@ -402,6 +409,7 @@ const plugin: PluginCreator = ({ addBase, addUtilities }) => {
             '--error': '#e9827c',
         },
     }),
+        // Helpers
         addUtilities({
             '.focus-ring': {
                 outline: 'var(--focus-ring-width) solid var(--focus-ring)',

packages/javascript/doodle-ui/src/tailwind/preset.ts

@@ -30,14 +30,20 @@ export default {
         },
         extend: {
             colors: {
-                primary: 'var(--primary)',
+                primary: 'var(--primary-main)',
+                'primary-main':
+                    'var(--primary-main)' /* failsafe for any classes possibly using the optional '-main' suffix*/,
                 'primary-variant': 'var(--primary-variant)',
 
                 secondary: 'var(--secondary-main)',
+                'secondary-main':
+                    'var(--secondary-main)' /* failsafe for any classes possibly using the optional '-main' suffix*/,
                 'secondary-variant': 'var(--secondary-variant)',
                 'secondary-variant-2': 'var(--secondary-variant-2)',
 
-                tertiary: 'var(--tertiary)',
+                tertiary: 'var(--tertiary-main)',
+                'tertiary-main':
+                    'var(--tertiary-main)' /* failsafe for any classes possibly using the optional '-main' suffix*/,
                 'tertiary-variant': 'var(--tertiary-variant)',
 
                 'text-main': 'var(--text-main)',
@@ -79,7 +85,7 @@ export default {
                 // tertiary: 'var(--tertiary)',
                 // 'tertiary-variant': 'var(--tertiary-variant)',
 
-                // 'common-dark': 'var(--common-dark)',
+                'common-dark': 'var(--common-dark)',
                 // 'common-white': 'var(--common-white)',
 
                 // contrast: 'var(--common-dark)',