@webitel/styleguide 24.12.27 → 24.12.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/styleguide",
-  "version": "24.12.27",
+  "version": "24.12.30",
   "main": "",
   "exports": {
     ".": "./src/lib/main.scss",
@@ -16,7 +16,7 @@
     "./wt-flow-diagram": "./src/wt-flow-diagram/main.scss",
     "./fonts": "./src/lib/styleguide/fonts/_fonts.scss",
     "./component-schemes": "./src/lib/primevue/components/index.js",
-    "./semantic": "./src/lib/primevue/semantic/color-scheme/index.js"
+    "./semantic": "./src/lib/primevue/semantic/index.js"
   },
   "files": [
     "src/"

package/src/lib/primevue/components/button/colors/dark/index.js

@@ -1,287 +1,242 @@
 const darkColors = {
   root: {
     primary: {
-      background: '{primary.color}',
-      hoverBackground: '{primary.hover.color}',
-      activeBackground: '{primary.active.color}',
-      borderColor: '{primary.color}',
-      hoverBorderColor: '{primary.hover.color}',
-      activeBorderColor: '{primary.active.color}',
-      color: '{primary.contrast.color}',
-      hoverColor: '{primary.contrast.color}',
-      activeColor: '{primary.contrast.color}',
+      background: '{primary-color}',
+      hoverBackground: '{primary-hover-color}',
+      activeBackground: '{primary-active-color}',
+      borderColor: '{primary-color}',
+      hoverBorderColor: '{primary-hover-color}',
+      activeBorderColor: '{primary-active-color}',
+      color: '{primary-on-color}',
+      hoverColor: '{primary-on-color}',
+      activeColor: '{primary-on-color}',
       focusRing: {
-        color: '{primary.color}',
-        shadow: 'none'
-      }
+        color: '{focus-color}',
+        shadow: 'none',
+      },
     },
     secondary: {
-      background: '{surface.800}',
-      hoverBackground: '{surface.700}',
-      activeBackground: '{surface.600}',
-      borderColor: '{surface.800}',
-      hoverBorderColor: '{surface.700}',
-      activeBorderColor: '{surface.600}',
-      color: '{surface.300}',
-      hoverColor: '{surface.200}',
-      activeColor: '{surface.100}',
-      focusRing: {
-        color: '{surface.300}',
-        shadow: 'none'
-      }
-    },
-    info: {
-      background: '{sky.400}',
-      hoverBackground: '{sky.300}',
-      activeBackground: '{sky.200}',
-      borderColor: '{sky.400}',
-      hoverBorderColor: '{sky.300}',
-      activeBorderColor: '{sky.200}',
-      color: '{sky.950}',
-      hoverColor: '{sky.950}',
-      activeColor: '{sky.950}',
+      background: '{secondary-color}',
+      hoverBackground: '{secondary-hover-color}',
+      activeBackground: '{secondary-active-color}',
+      borderColor: '{secondary-color}',
+      hoverBorderColor: '{secondary-hover-color}',
+      activeBorderColor: '{secondary-active-color}',
+      color: '{secondary-on-color}',
+      hoverColor: '{secondary-on-color}',
+      activeColor: '{secondary-on-color}',
       focusRing: {
-        color: '{sky.400}',
-        shadow: 'none'
-      }
+        color: '{focus-color}',
+        shadow: 'none',
+      },
     },
     success: {
-      background: '{green.400}',
-      hoverBackground: '{green.300}',
-      activeBackground: '{green.200}',
-      borderColor: '{green.400}',
-      hoverBorderColor: '{green.300}',
-      activeBorderColor: '{green.200}',
-      color: '{green.950}',
-      hoverColor: '{green.950}',
-      activeColor: '{green.950}',
+      background: '{success-color}',
+      hoverBackground: '{success-hover-color}',
+      activeBackground: '{success-active-color}',
+      borderColor: '{success-color}',
+      hoverBorderColor: '{success-hover-color}',
+      activeBorderColor: '{success-active-color}',
+      color: '{success-on-color}',
+      hoverColor: '{success-on-color}',
+      activeColor: '{success-on-color}',
       focusRing: {
-        color: '{green.400}',
-        shadow: 'none'
-      }
+        color: '{focus-color}',
+        shadow: 'none',
+      },
     },
     warn: {
-      background: '{orange.400}',
-      hoverBackground: '{orange.300}',
-      activeBackground: '{orange.200}',
-      borderColor: '{orange.400}',
-      hoverBorderColor: '{orange.300}',
-      activeBorderColor: '{orange.200}',
-      color: '{orange.950}',
-      hoverColor: '{orange.950}',
-      activeColor: '{orange.950}',
+      background: '{warning-color}',
+      hoverBackground: '{warning-hover-color}',
+      activeBackground: '{warning-active-color}',
+      borderColor: '{warning-color}',
+      hoverBorderColor: '{warning-hover-color}',
+      activeBorderColor: '{warning-active-color}',
+      color: '{warning-on-color}',
+      hoverColor: '{warning-on-color}',
+      activeColor: '{warning-on-color}',
       focusRing: {
-        color: '{orange.400}',
-        shadow: 'none'
-      }
+        color: '{focus-color}',
+        shadow: 'none',
+      },
     },
-    help: {
-      background: '{purple.400}',
-      hoverBackground: '{purple.300}',
-      activeBackground: '{purple.200}',
-      borderColor: '{purple.400}',
-      hoverBorderColor: '{purple.300}',
-      activeBorderColor: '{purple.200}',
-      color: '{purple.950}',
-      hoverColor: '{purple.950}',
-      activeColor: '{purple.950}',
-      focusRing: {
-        color: '{purple.400}',
-        shadow: 'none'
-      }
-    },
-    danger: {
-      background: '{red.400}',
-      hoverBackground: '{red.300}',
-      activeBackground: '{red.200}',
-      borderColor: '{red.400}',
-      hoverBorderColor: '{red.300}',
-      activeBorderColor: '{red.200}',
-      color: '{red.950}',
-      hoverColor: '{red.950}',
-      activeColor: '{red.950}',
+    error: {
+      background: '{error-color}',
+      hoverBackground: '{error-hover-color}',
+      activeBackground: '{error-active-color}',
+      borderColor: '{error-color}',
+      hoverBorderColor: '{error-hover-color}',
+      activeBorderColor: '{error-active-color}',
+      color: '{error-on-color}',
+      hoverColor: '{error-on-color}',
+      activeColor: '{error-on-color}',
       focusRing: {
-        color: '{red.400}',
-        shadow: 'none'
-      }
+        color: '{focus-color}',
+        shadow: 'none',
+      },
     },
-    contrast: {
-      background: '{surface.0}',
-      hoverBackground: '{surface.100}',
-      activeBackground: '{surface.200}',
-      borderColor: '{surface.0}',
-      hoverBorderColor: '{surface.100}',
-      activeBorderColor: '{surface.200}',
-      color: '{surface.950}',
-      hoverColor: '{surface.950}',
-      activeColor: '{surface.950}',
+    info: {
+      background: '{info-color}',
+      hoverBackground: '{info-hover-color}',
+      activeBackground: '{info-active-color}',
+      borderColor: '{info-color}',
+      hoverBorderColor: '{info-hover-color}',
+      activeBorderColor: '{info-active-color}',
+      color: '{info-on-color}',
+      hoverColor: '{info-on-color}',
+      activeColor: '{info-on-color}',
       focusRing: {
-        color: '{surface.0}',
-        shadow: 'none'
-      }
+        color: '{focus-color}',
+        shadow: 'none',
+      },
     },
     /**
-     * TODO @Evgeniy Trahtenberg
-     * need to refactor transfer, error and job colors
+     * TODO @Oleksandr Palonnyi
+     * need to replace name "job" to "task",
      * */
-    transfer: {
-      background: '{primary.color}',
-      hoverBackground: '{primary.hover.color}',
-      activeBackground: '{primary.active.color}',
-      borderColor: '{primary.color}',
-      hoverBorderColor: '{primary.hover.color}',
-      activeBorderColor: '{primary.active.color}',
-      color: '{primary.contrast.color}',
-      hoverColor: '{primary.contrast.color}',
-      activeColor: '{primary.contrast.color}',
-      focusRing: {
-        color: '{primary.color}',
-        shadow: 'none'
-      }
-    },
-    error: {
-      background: '{primary.color}',
-      hoverBackground: '{primary.hover.color}',
-      activeBackground: '{primary.active.color}',
-      borderColor: '{primary.color}',
-      hoverBorderColor: '{primary.hover.color}',
-      activeBorderColor: '{primary.active.color}',
-      color: '{primary.contrast.color}',
-      hoverColor: '{primary.contrast.color}',
-      activeColor: '{primary.contrast.color}',
+    job: {
+      background: '{task-color}',
+      hoverBackground: '{task-hover-color}',
+      activeBackground: '{task-active-color}',
+      borderColor: '{task-color}',
+      hoverBorderColor: '{task-hover-color}',
+      activeBorderColor: '{task-active-color}',
+      color: '{task-on-color}',
+      hoverColor: '{task-on-color}',
+      activeColor: '{task-on-color}',
       focusRing: {
-        color: '{primary.color}',
-        shadow: 'none'
-      }
+        color: '{focus-color}',
+        shadow: 'none',
+      },
     },
-    job: {
-      background: '{primary.color}',
-      hoverBackground: '{primary.hover.color}',
-      activeBackground: '{primary.active.color}',
-      borderColor: '{primary.color}',
-      hoverBorderColor: '{primary.hover.color}',
-      activeBorderColor: '{primary.active.color}',
-      color: '{primary.contrast.color}',
-      hoverColor: '{primary.contrast.color}',
-      activeColor: '{primary.contrast.color}',
+    transfer: {
+      background: '{transfer-color}',
+      hoverBackground: '{transfer-hover-color}',
+      activeBackground: '{transfer-active-color}',
+      borderColor: '{transfer-color}',
+      hoverBorderColor: '{transfer-hover-color}',
+      activeBorderColor: '{transfer-active-color}',
+      color: '{transfer-on-color}',
+      hoverColor: '{transfer-on-color}',
+      activeColor: '{transfer-on-color}',
       focusRing: {
-        color: '{primary.color}',
-        shadow: 'none'
-      }
+        color: '{focus-color}',
+        shadow: 'none',
+      },
     },
     disabled: {
-      color: '{grey.darken.1}',
-      background: '{dp-surface-color.16}',
+      color: '{grey-lighten-1}',
+      background: '{dp-surface-color-16}',
     },
   },
   outlined: {
     primary: {
-      hoverBackground: 'color-mix(in srgb, {primary.color}, transparent 96%)',
-      activeBackground: 'color-mix(in srgb, {primary.color}, transparent 84%)',
-      borderColor: '{primary.700}',
-      color: '{primary.color}'
+      hoverBackground: '{primary.50}',
+      activeBackground: '{primary.100}',
+      borderColor: '{primary.color}',
+      color: '{primary.color}',
     },
     secondary: {
-      hoverBackground: 'rgba(255,255,255,0.04)',
-      activeBackground: 'rgba(255,255,255,0.16)',
-      borderColor: '{surface.700}',
-      color: '{surface.400}'
+      hoverBackground: '{surface.50}',
+      activeBackground: '{surface.100}',
+      borderColor: '{surface.600}',
+      color: '{surface.600}',
     },
     success: {
-      hoverBackground: 'color-mix(in srgb, {green.400}, transparent 96%)',
-      activeBackground: 'color-mix(in srgb, {green.400}, transparent 84%)',
-      borderColor: '{green.700}',
-      color: '{green.400}'
+      hoverBackground: '{green.50}',
+      activeBackground: '{green.100}',
+      borderColor: '{green.500}',
+      color: '{green.500}',
     },
     info: {
-      hoverBackground: 'color-mix(in srgb, {sky.400}, transparent 96%)',
-      activeBackground: 'color-mix(in srgb, {sky.400}, transparent 84%)',
-      borderColor: '{sky.700}',
-      color: '{sky.400}'
+      hoverBackground: '{sky.50}',
+      activeBackground: '{sky.100}',
+      borderColor: '{sky.500}',
+      color: '{sky.500}',
     },
     warn: {
-      hoverBackground: 'color-mix(in srgb, {orange.400}, transparent 96%)',
-      activeBackground: 'color-mix(in srgb, {orange.400}, transparent 84%)',
-      borderColor: '{orange.700}',
-      color: '{orange.400}'
+      hoverBackground: '{orange.50}',
+      activeBackground: '{orange.100}',
+      borderColor: '{orange.500}',
+      color: '{orange.500}',
     },
     help: {
-      hoverBackground: 'color-mix(in srgb, {purple.400}, transparent 96%)',
-      activeBackground: 'color-mix(in srgb, {purple.400}, transparent 84%)',
-      borderColor: '{purple.700}',
-      color: '{purple.400}'
+      hoverBackground: '{purple.50}',
+      activeBackground: '{purple.100}',
+      borderColor: '{purple.500}',
+      color: '{purple.500}',
     },
     danger: {
-      hoverBackground: 'color-mix(in srgb, {red.400}, transparent 96%)',
-      activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
-      borderColor: '{red.700}',
-      color: '{red.400}'
+      hoverBackground: '{red.50}',
+      activeBackground: '{red.100}',
+      borderColor: '{red.500}',
+      color: '{red.500}',
     },
     contrast: {
-      hoverBackground: '{surface.800}',
-      activeBackground: '{surface.700}',
-      borderColor: '{surface.500}',
-      color: '{surface.0}'
+      hoverBackground: '{surface.50}',
+      activeBackground: '{surface.100}',
+      borderColor: '{surface.950}',
+      color: '{surface.950}',
     },
     plain: {
-      hoverBackground: '{surface.800}',
-      activeBackground: '{surface.700}',
-      borderColor: '{surface.600}',
-      color: '{surface.0}'
-    }
+      hoverBackground: '{surface.50}',
+      activeBackground: '{surface.100}',
+      borderColor: '{surface.900}',
+      color: '{surface.900}',
+    },
   },
   text: {
     primary: {
-      hoverBackground: 'color-mix(in srgb, {primary.color}, transparent 96%)',
-      activeBackground: 'color-mix(in srgb, {primary.color}, transparent 84%)',
-      color: '{primary.color}'
+      hoverBackground: '{primary.50}',
+      activeBackground: '{primary.100}',
+      color: '{primary.color}',
     },
     secondary: {
-      hoverBackground: '{surface.800}',
-      activeBackground: '{surface.700}',
-      color: '{surface.400}'
+      hoverBackground: '{surface.50}',
+      activeBackground: '{surface.100}',
+      color: '{surface.600}',
     },
     success: {
-      hoverBackground: 'color-mix(in srgb, {green.400}, transparent 96%)',
-      activeBackground: 'color-mix(in srgb, {green.400}, transparent 84%)',
-      color: '{green.400}'
+      hoverBackground: '{green.50}',
+      activeBackground: '{green.100}',
+      color: '{green.500}',
     },
     info: {
-      hoverBackground: 'color-mix(in srgb, {sky.400}, transparent 96%)',
-      activeBackground: 'color-mix(in srgb, {sky.400}, transparent 84%)',
-      color: '{sky.400}'
+      hoverBackground: '{sky.50}',
+      activeBackground: '{sky.100}',
+      color: '{sky.500}',
     },
     warn: {
-      hoverBackground: 'color-mix(in srgb, {orange.400}, transparent 96%)',
-      activeBackground: 'color-mix(in srgb, {orange.400}, transparent 84%)',
-      color: '{orange.400}'
+      hoverBackground: '{orange.50}',
+      activeBackground: '{orange.100}',
+      color: '{orange.500}',
     },
     help: {
-      hoverBackground: 'color-mix(in srgb, {purple.400}, transparent 96%)',
-      activeBackground: 'color-mix(in srgb, {purple.400}, transparent 84%)',
-      color: '{purple.400}'
+      hoverBackground: '{purple.50}',
+      activeBackground: '{purple.100}',
+      color: '{purple.500}',
     },
     danger: {
-      hoverBackground: 'color-mix(in srgb, {red.400}, transparent 96%)',
-      activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
-      color: '{red.400}'
+      hoverBackground: '{red.50}',
+      activeBackground: '{red.100}',
+      color: '{red.500}',
     },
     contrast: {
-      hoverBackground: '{surface.800}',
-      activeBackground: '{surface.700}',
-      color: '{surface.0}'
+      hoverBackground: '{surface.50}',
+      activeBackground: '{surface.100}',
+      color: '{surface.950}',
     },
     plain: {
-      hoverBackground: '{surface.800}',
-      activeBackground: '{surface.700}',
-      color: '{surface.0}'
-    }
+      hoverBackground: '{surface.50}',
+      activeBackground: '{surface.100}',
+      color: '{surface.900}',
+    },
   },
   link: {
     color: '{primary.color}',
     hoverColor: '{primary.color}',
-    activeColor: '{primary.color}'
-  }
-}
+    activeColor: '{primary.color}',
+  },
+};
 
 export default darkColors

package/src/lib/primevue/components/button/colors/light/index.js

@@ -2,176 +2,131 @@ const lightColors = {
   root: {
     primary: {
       background: '{primary-color}',
-      hoverBackground: '{primary.hover.color}',
-      activeBackground: '{primary.active.color}',
-      borderColor: '{primary.color}',
-      hoverBorderColor: '{primary.hover.color}',
-      activeBorderColor: '{primary.active.color}',
-      color: '{primary.contrast.color}',
-      hoverColor: '{primary.contrast.color}',
-      activeColor: '{primary.contrast.color}',
+      hoverBackground: '{primary-hover-color}',
+      activeBackground: '{primary-active-color}',
+      borderColor: '{primary-color}',
+      hoverBorderColor: '{primary-hover-color}',
+      activeBorderColor: '{primary-active-color}',
+      color: '{primary-on-color}',
+      hoverColor: '{primary-on-color}',
+      activeColor: '{primary-on-color}',
       focusRing: {
-        color: '{primary.color}',
+        color: '{focus-color}',
         shadow: 'none',
       },
     },
     secondary: {
-      background: '{surface.100}',
-      hoverBackground: '{surface.200}',
-      activeBackground: '{surface.300}',
-      borderColor: '{surface.100}',
-      hoverBorderColor: '{surface.200}',
-      activeBorderColor: '{surface.300}',
-      color: '{surface.600}',
-      hoverColor: '{surface.700}',
-      activeColor: '{surface.800}',
-      focusRing: {
-        color: '{surface.600}',
-        shadow: 'none',
-      },
-    },
-    info: {
-      background: '{sky.500}',
-      hoverBackground: '{sky.400}',
-      activeBackground: '{sky.300}',
-      borderColor: '{sky.500}',
-      hoverBorderColor: '{sky.400}',
-      activeBorderColor: '{sky.300}',
-      color: '#ffffff',
-      hoverColor: '#ffffff',
-      activeColor: '#ffffff',
+      background: '{secondary-color}',
+      hoverBackground: '{secondary-hover-color}',
+      activeBackground: '{secondary-active-color}',
+      borderColor: '{secondary-color}',
+      hoverBorderColor: '{secondary-hover-color}',
+      activeBorderColor: '{secondary-active-color}',
+      color: '{secondary-on-color}',
+      hoverColor: '{secondary-on-color}',
+      activeColor: '{secondary-on-color}',
       focusRing: {
-        color: '{sky.500}',
+        color: '{focus-color}',
         shadow: 'none',
       },
     },
     success: {
       background: '{success-color}',
       hoverBackground: '{success-hover-color}',
-      activeBackground: '{success-hover-color}',
-      borderColor: '{green.500}',
-      hoverBorderColor: '{green.400}',
-      activeBorderColor: '{green.300}',
-      color: '#ffffff',
-      hoverColor: '#ffffff',
-      activeColor: '#ffffff',
+      activeBackground: '{success-active-color}',
+      borderColor: '{success-color}',
+      hoverBorderColor: '{success-hover-color}',
+      activeBorderColor: '{success-active-color}',
+      color: '{success-on-color}',
+      hoverColor: '{success-on-color}',
+      activeColor: '{success-on-color}',
       focusRing: {
-        color: '{green.500}',
+        color: '{focus-color}',
         shadow: 'none',
       },
     },
     warn: {
-      background: '{orange.500}',
-      hoverBackground: '{orange.400}',
-      activeBackground: '{orange.300}',
-      borderColor: '{orange.500}',
-      hoverBorderColor: '{orange.400}',
-      activeBorderColor: '{orange.300}',
-      color: '#ffffff',
-      hoverColor: '#ffffff',
-      activeColor: '#ffffff',
+      background: '{warning-color}',
+      hoverBackground: '{warning-hover-color}',
+      activeBackground: '{warning-active-color}',
+      borderColor: '{warning-color}',
+      hoverBorderColor: '{warning-hover-color}',
+      activeBorderColor: '{warning-active-color}',
+      color: '{warning-on-color}',
+      hoverColor: '{warning-on-color}',
+      activeColor: '{warning-on-color}',
       focusRing: {
-        color: '{orange.500}',
+        color: '{focus-color}',
         shadow: 'none',
       },
     },
-    help: {
-      background: '{purple.500}',
-      hoverBackground: '{purple.400}',
-      activeBackground: '{purple.300}',
-      borderColor: '{purple.500}',
-      hoverBorderColor: '{purple.400}',
-      activeBorderColor: '{purple.300}',
-      color: '#ffffff',
-      hoverColor: '#ffffff',
-      activeColor: '#ffffff',
-      focusRing: {
-        color: '{purple.500}',
-        shadow: 'none',
-      },
-    },
-    danger: {
-      background: '{red.500}',
-      hoverBackground: '{red.400}',
-      activeBackground: '{red.300}',
-      borderColor: '{red.500}',
-      hoverBorderColor: '{red.400}',
-      activeBorderColor: '{red.300}',
-      color: '#ffffff',
-      hoverColor: '#ffffff',
-      activeColor: '#ffffff',
+    error: {
+      background: '{error-color}',
+      hoverBackground: '{error-hover-color}',
+      activeBackground: '{error-active-color}',
+      borderColor: '{error-color}',
+      hoverBorderColor: '{error-hover-color}',
+      activeBorderColor: '{error-active-color}',
+      color: '{error-on-color}',
+      hoverColor: '{error-on-color}',
+      activeColor: '{error-on-color}',
       focusRing: {
-        color: '{red.500}',
+        color: '{focus-color}',
         shadow: 'none',
       },
     },
-    contrast: {
-      background: '{surface.950}',
-      hoverBackground: '{surface.800}',
-      activeBackground: '{surface.700}',
-      borderColor: '{surface.950}',
-      hoverBorderColor: '{surface.800}',
-      activeBorderColor: '{surface.700}',
-      color: '{surface.0}',
-      hoverColor: '{surface.0}',
-      activeColor: '{surface.0}',
+    info: {
+      background: '{info-color}',
+      hoverBackground: '{info-hover-color}',
+      activeBackground: '{info-active-color}',
+      borderColor: '{info-color}',
+      hoverBorderColor: '{info-hover-color}',
+      activeBorderColor: '{info-active-color}',
+      color: '{info-on-color}',
+      hoverColor: '{info-on-color}',
+      activeColor: '{info-on-color}',
       focusRing: {
-        color: '{surface.950}',
+        color: '{focus-color}',
         shadow: 'none',
       },
     },
     /**
-     * TODO @Evgeniy Trahtenberg
-     * need to refactor transfer, error and job colors
+     * TODO @Oleksandr Palonnyi
+     * need to replace name "job" to "task",
      * */
-    transfer: {
-      background: '{primary.color}',
-      hoverBackground: '{primary.hover.color}',
-      activeBackground: '{primary.active.color}',
-      borderColor: '{primary.color}',
-      hoverBorderColor: '{primary.hover.color}',
-      activeBorderColor: '{primary.active.color}',
-      color: '{primary.contrast.color}',
-      hoverColor: '{primary.contrast.color}',
-      activeColor: '{primary.contrast.color}',
-      focusRing: {
-        color: '{primary.color}',
-        shadow: 'none',
-      },
-    },
-    error: {
-      background: '{error-color}',
-      hoverBackground: '{error-hover-color}',
-      activeBackground: '{error-hover-color}',
-      borderColor: '{primary.color}',
-      hoverBorderColor: '{primary.hover.color}',
-      activeBorderColor: '{primary.active.color}',
-      color: '{primary.contrast.color}',
-      hoverColor: '{primary.contrast.color}',
-      activeColor: '{primary.contrast.color}',
+    job: {
+      background: '{task-color}',
+      hoverBackground: '{task-hover-color}',
+      activeBackground: '{task-active-color}',
+      borderColor: '{task-color}',
+      hoverBorderColor: '{task-hover-color}',
+      activeBorderColor: '{task-active-color}',
+      color: '{task-on-color}',
+      hoverColor: '{task-on-color}',
+      activeColor: '{task-on-color}',
       focusRing: {
-        color: '{primary.color}',
+        color: '{focus-color}',
         shadow: 'none',
       },
     },
-    job: {
-      background: '{primary.color}',
-      hoverBackground: '{primary.hover.color}',
-      activeBackground: '{primary.active.color}',
-      borderColor: '{primary.color}',
-      hoverBorderColor: '{primary.hover.color}',
-      activeBorderColor: '{primary.active.color}',
-      color: '{primary.contrast.color}',
-      hoverColor: '{primary.contrast.color}',
-      activeColor: '{primary.contrast.color}',
+    transfer: {
+      background: '{transfer-color}',
+      hoverBackground: '{transfer-hover-color}',
+      activeBackground: '{transfer-active-color}',
+      borderColor: '{transfer-color}',
+      hoverBorderColor: '{transfer-hover-color}',
+      activeBorderColor: '{transfer-active-color}',
+      color: '{transfer-on-color}',
+      hoverColor: '{transfer-on-color}',
+      activeColor: '{transfer-on-color}',
       focusRing: {
-        color: '{primary.color}',
+        color: '{focus-color}',
         shadow: 'none',
       },
     },
     disabled: {
-      color: '{grey.darken.1}',
-      background: '{dp-surface-color.16}',
+      color: '{grey-darken-1}',
+      background: '{dp-surface-color-16}',
     },
   },
   outlined: {

package/src/lib/primevue/components/tooltip/colors/dark/index.js

@@ -1,5 +1,5 @@
 const darkColors = {
-  background: '{surface.600}',
+  background: '{tooltip-background}',
   color: '{surface.0}',
   shadow: '{overlay.popover.shadow}',
 };

package/src/lib/primevue/components/tooltip/colors/light/index.js

@@ -1,5 +1,5 @@
 const lightColors = {
-  background: '{surface.600}',
+  background: '{tooltip-background}',
   color: '{surface.0}',
   shadow: '{overlay.popover.shadow}',
 };

package/src/lib/primevue/semantic/color-scheme/base/index.js

@@ -0,0 +1,12 @@
+import typography from './typography';
+
+const colorScheme = {
+  light: {
+    ...typography.light,
+  },
+  dark: {
+    ...typography.dark,
+  },
+}
+
+export default colorScheme

package/src/lib/primevue/semantic/color-scheme/base/typography/dark-color.js

@@ -0,0 +1,8 @@
+export default {
+  'text-main-color': '{grey-lighten-3}',
+  'text-disabled-color': '{grey-darken-1}',
+  'text-error-color': '{error-color}',
+  'text-link-color': '{info-color}',
+
+  'text-on-brand-color': '{white}',
+}

package/src/lib/primevue/semantic/color-scheme/base/typography/index.js

@@ -0,0 +1,7 @@
+import light from './light-color'
+import dark from './dark-color'
+
+export default {
+  light,
+  dark
+}

package/src/lib/primevue/semantic/color-scheme/base/typography/light-color.js

@@ -0,0 +1,8 @@
+export default {
+  'text-main-color': '{grey-darken-3}',
+  'text-disabled-color': '{grey-lighten-1}',
+  'text-error-color': '{error-color}',
+  'text-link-color': '{info-color}',
+
+  'text-on-brand-color': '{white}'
+}

package/src/lib/primevue/semantic/color-scheme/components/index.js

@@ -0,0 +1,15 @@
+import popover from './popover';
+import tooltip from './tooltip';
+
+const colorScheme = {
+  light: {
+    ...popover.light,
+    ...tooltip.light,
+  },
+  dark: {
+    ...popover.dark,
+    ...tooltip.dark,
+  },
+}
+
+export default colorScheme

package/src/lib/primevue/semantic/color-scheme/components/popover/dark-color.js

@@ -0,0 +1,7 @@
+export default {
+  overlay: {
+    popover: {
+      background: '{grey-lighten-3}'
+    }
+  }
+}

package/src/lib/primevue/semantic/color-scheme/components/popover/index.js

@@ -0,0 +1,7 @@
+import light from './light-color'
+import dark from './dark-color'
+
+export default {
+  light,
+  dark
+}

package/src/lib/primevue/semantic/color-scheme/components/popover/light-color.js

@@ -0,0 +1,7 @@
+export default {
+  overlay: {
+    popover: {
+      background: '{grey-lighten-3}'
+    }
+  }
+}

package/src/lib/primevue/semantic/color-scheme/components/tooltip/dark-color.js

@@ -0,0 +1,3 @@
+export default {
+  'tooltip-background': '{red-lighten-2}'
+}

package/src/lib/primevue/semantic/color-scheme/components/tooltip/index.js

@@ -0,0 +1,7 @@
+import light from './light-color'
+import dark from './dark-color'
+
+export default {
+  light,
+  dark
+}

package/src/lib/primevue/semantic/color-scheme/components/tooltip/light-color.js

@@ -0,0 +1,3 @@
+export default {
+  'tooltip-background': '{blue-lighten-2}'
+}

package/src/lib/primevue/semantic/color-scheme/dark-color.js

@@ -119,80 +119,84 @@ const darkColor = {
     contrastColor: '{white}',
   },
 
-  // content wrapper
-  'content-wrapper-color': '{dp-surface-color.20}',
-
-  // success colors
-  'success-color': '{green.darken.4}',
-  'success-hover-color': '{green.darken.3}',
-  'success-light-color': '{green.lighten.4}',
-  'success-on-color': '{black}',
-
-  // warning colors
-  'warning-color': '{orange.accent.2}',
-  'warning-hover-color': '{orange.accent.1}',
-  'warning-light-color': '{orange.lighten.3}',
-  'warning-on-color': '{black}',
-
-  // error colors
-  'error-color': '{red.accent.2}',
-  'error-hover-color': '{red.lighten.2}',
-  'error-light-color': '{red.lighten.3}',
-  'error-on-color': '{black}',
-
-  // info colors
-  'info-color': '{blue.darken.1}',
-  'info-hover-color': '{blue.lighten.1}',
-  'info-light-color': '{blue.lighten.3}',
-  'info-on-color': '{white}',
-
-  // job colors
-  'job-color': '{blue.darken.1}',
-  'job-hover-color': '{blue.lighten.1}',
-  'job-light-color': '{blue.lighten.3}',
-  'job-on-color': '{white}',
-
-  // chat colors
-  'chat-color': '{indigo.accent.2}',
-  'chat-hover-color': '{indigo.accent.1}',
-  'chat-light-color': '{indigo.lighten.3}',
-  'chat-on-color': '{white}',
-
-  // transfer colors
-  'transfer-color': '{indigo.darken.1}',
-  'transfer-hover-color': '{indigo.lighten.1}',
-  'transfer-light-color': '{indigo.lighten.4}',
-  'transfer-on-color': '{white}',
-
-  // primary colors
-  'primary-color': '{amber.darken.2}',
-  'primary-hover-color': '{amber.darken.1}',
-  'primary-light-color': '{amber.darken.4}',
-  'primary-on-color': '{black}',
-
-  // secondary colors
-  'secondary-color': '{dp-surface-color.10}',
-  'secondary-hover-color': '{dp-surface-color.14}',
-  'secondary-light-color': '{dp-surface-color.16}',
-  'secondary-on-color': '{grey.lighten.4}',
-
-  // email colors
-  'email-color': '{blue.darken.3}',
-  'email-hover-color': '{blue.darken.2}',
-  'email-light-color': '{blue.lighten.1}',
-  'email-on-color': '{white}',
+  // Focus colors
+  'focus-color': '{white}',
+
+  // Primary colors
+  'primary-color': '{amber-darken-1}',
+  'primary-hover-color': '{amber-lighten-1}',
+  'primary-active-color': '{amber-lighten-2}',
+  'primary-light-color': '{amber-darken-4}',
+  'primary-on-color': '{grey-darken-4}',
+
+  // Secondary colors
+  'secondary-color': '{dp-surface-color-10}',
+  'secondary-hover-color': '{dp-surface-color-14}',
+  'secondary-active-color': '{dp-surface-color-18}',
+  'secondary-light-color': '{dp-surface-color-16}',
+  'secondary-on-color': '{grey-lighten-4}',
+
+  // Success colors
+  'success-color': '{green-darken-3}',
+  'success-hover-color': '{green-darken-2}',
+  'success-active-color': '{green-darken-1}',
+  'success-light-color': '{green-darken-4}',
+  'success-on-color': '{grey-darken-4}',
+
+  // Warning colors
+  'warning-color': '{orange-accent-3}',
+  'warning-hover-color': '{orange-accent-2}',
+  'warning-active-color': '{orange-accent-1}',
+  'warning-light-color': '{orange-darken-4}',
+  'warning-on-color': '{grey-darken-4}',
+
+  // Error colors
+  'error-color': '{red-lighten-1}',
+  'error-hover-color': '{red-lighten-2}',
+  'error-active-color': '{red-lighten-3}',
+  'error-light-color': '{red-darken-4}',
+  'error-on-color': '{grey-darken-4}',
+
+  // Info colors
+  'info-color': '{light-blue-lighten-1}',
+  'info-hover-color': '{light-blue-lighten-2}',
+  'info-active-color': '{light-blue-lighten-3}',
+  'info-light-color': '{light-blue-lighten-4}',
+  'info-on-color': '{grey-darken-4}',
+
+  // Task colors
+  'task-color': '{blue-lighten-1}',
+  'task-hover-color': '{blue-lighten-2}',
+  'task-active-color': '{blue-lighten-3}',
+  'task-light-color': '{blue-lighten-4}',
+  'task-on-color': '{grey-darken-4}',
+
+  // Transfer colors
+  'transfer-color': '{indigo-lighten-2}',
+  'transfer-hover-color': '{indigo-lighten-3}',
+  'transfer-active-color': '{indigo-lighten-4}',
+  'transfer-light-color': '{indigo-lighten-4}',
+  'transfer-on-color': '{grey-darken-4}',
+
+  // Chat colors
+  'chat-color': '{indigo-accent-2}',
+  'chat-hover-color': '{indigo-accent-1}',
+  'chat-active-color': '{indigo-lighten-3}',
+  'chat-light-color': '{indigo-lighten-3}',
+  'chat-on-color': '{grey-darken-4}',
+
+  // Email colors
+  'email-color': '{blue-darken-3}',
+  'email-hover-color': '{blue-darken-2}',
+  'email-light-color': '{blue-lighten-1}',
+  'email-on-color': '{grey-darken-4}',
 
   // accent colors
-  'accent-color': '{purple.lighten.1}',
-  'sub-accent-color': '{indigo.darken.3}',
-
-  // typography colors
-  'text-main-color': '{grey.lighten.1}',
-  'text-disabled-color': '{grey.darken.1}',
-  'text-error-color': '{error-color}',
-  'text-link-color': '{info-color}',
+  'accent-color': '{purple-lighten-1}',
+  'sub-accent-color': '{indigo-darken-3}',
 
-  'text-on-brand-color': '{white}',
+  // content wrapper
+  'content-wrapper-color': '{dp-surface-color-20}',
 };
 
 export default darkColor;

package/src/lib/primevue/semantic/color-scheme/index.js

@@ -1,15 +1,21 @@
 import darkColor from './dark-color.js';
 import lightColor from './light-color.js';
 import palette from './palette.js';
+import base from './base'
+import components from './components'
 
 const colorScheme = {
   light: {
     ...palette,
     ...lightColor,
+    ...base.light,
+    ...components.light,
   },
   dark: {
     ...palette,
     ...darkColor,
+    ...base.dark,
+    ...components.dark,
   },
 };
 

package/src/lib/primevue/semantic/color-scheme/light-color.js

@@ -119,80 +119,84 @@ const lightColor = {
     contrastColor: '{white}',
   },
 
-  // content wrapper
-  'content-wrapper-color': '{dp-surface-color.20}',
-
-  // success colors
-  'success-color': '{green.darken.4}',
-  'success-hover-color': '{green.darken.3}',
-  'success-light-color': '{green.lighten.4}',
+  // Focus colors
+  'focus-color': '{black}',
+
+  // Primary colors
+  'primary-color': '{amber-accent-3}',
+  'primary-hover-color': '{amber-accent-2}',
+  'primary-active-color': '{amber-accent-1}',
+  'primary-light-color': '{amber-lighten-3}',
+  'primary-on-color': '{grey-darken-4}',
+
+  // Secondary colors
+  'secondary-color': '{dp-surface-color-10}',
+  'secondary-hover-color': '{dp-surface-color-14}',
+  'secondary-active-color': '{dp-surface-color-16}',
+  'secondary-light-color': '{dp-surface-color-16}',
+  'secondary-on-color': '{grey-darken-4}',
+
+  // Success colors
+  'success-color': '{green-darken-4}',
+  'success-hover-color': '{green-darken-3}',
+  'success-active-color': '{green-darken-2}',
+  'success-light-color': '{green-lighten-3}',
   'success-on-color': '{white}',
 
-  // warning colors
-  'warning-color': '{orange.accent.2}',
-  'warning-hover-color': '{orange.accent.1}',
-  'warning-light-color': '{orange.lighten.4}',
-  'warning-on-color': '{black}',
-
-  // error colors
-  'error-color': '{red.accent.2}',
-  'error-hover-color': '{red.lighten.2}',
-  'error-light-color': '{red.lighten.4}',
+  // Warning colors
+  'warning-color': '{orange-accent-2}',
+  'warning-hover-color': '{orange-accent-1}',
+  'warning-active-color': '{orange-lighten-3}',
+  'warning-light-color': '{orange-lighten-3}',
+  'warning-on-color': '{white}',
+
+  // Error colors
+  'error-color': '{red-lighten-1}',
+  'error-hover-color': '{red-lighten-2}',
+  'error-active-color': '{red-lighten-3}',
+  'error-light-color': '{red-lighten-3}',
   'error-on-color': '{white}',
 
-  // info colors
-  'info-color': '{blue.darken.1}',
-  'info-hover-color': '{blue.lighten.1}',
-  'info-light-color': '{blue.lighten.4}',
-  'info-on-color': '{black}',
-
-  // job colors
-  'job-color': '{blue.darken.1}',
-  'job-hover-color': '{blue.lighten.1}',
-  'job-light-color': '{blue.lighten.4}',
-  'job-on-color': '{black}',
-
-  // chat colors
-  'chat-color': '{indigo.accent.2}',
-  'chat-hover-color': '{indigo.accent.1}',
-  'chat-light-color': '{indigo.lighten.4}',
-  'chat-on-color': '{black}',
-
-  // transfer colors
-  'transfer-color': '{indigo.lighten.1}',
-  'transfer-hover-color': '{indigo.lighten.2}',
-  'transfer-light-color': '{indigo.lighten.4}',
+  // Info colors
+  'info-color': '{light-blue-darken-1}',
+  'info-hover-color': '{light-blue-lighten-1}',
+  'info-active-color': '{light-blue-lighten-2}',
+  'info-light-color': '{light-blue-lighten-4}',
+  'info-on-color': '{white}',
+
+  // Task colors
+  'task-color': '{blue-darken-1}',
+  'task-hover-color': '{blue-lighten-1}',
+  'task-active-color': '{blue-lighten-2}',
+  'task-light-color': '{blue-lighten-4}',
+  'task-on-color': '{white}',
+
+  // Transfer colors
+  'transfer-color': '{indigo-lighten-1}',
+  'transfer-hover-color': '{indigo-lighten-2}',
+  'transfer-active-color': '{indigo-lighten-3}',
+  'transfer-light-color': '{indigo-lighten-4}',
   'transfer-on-color': '{white}',
 
-  // primary colors
-  'primary-color': '{amber.accent.3}',
-  'primary-hover-color': '{amber.accent.2}',
-  'primary-light-color': '{amber.lighten.3}',
-  'primary-on-color': '{black}',
-
-  // secondary colors
-  'secondary-color': '{dp-surface-color.10}',
-  'secondary-hover-color': '{dp-surface-color.14}',
-  'secondary-light-color': '{dp-surface-color.16}',
-  'secondary-on-color': '{grey.darken.4}',
-
-  // email colors
-  'email-color': '{blue.darken.3}',
-  'email-hover-color': '{blue.darken.2}',
-  'email-light-color': '{blue.lighten.2}',
+  // Chat colors
+  'chat-color': '{indigo-accent-2}',
+  'chat-hover-color': '{indigo-accent-1}',
+  'chat-active-color': '{indigo-lighten-3}',
+  'chat-light-color': '{indigo-lighten-4}',
+  'chat-on-color': '{white}',
+
+  // Email colors
+  'email-color': '{blue-darken-3}',
+  'email-hover-color': '{blue-darken-2}',
+  'email-light-color': '{blue-lighten-2}',
   'email-on-color': '{black}',
 
   // accent colors
-  'accent-color': '{purple.lighten.1}',
-  'sub-accent-color': '{indigo.darken.3}',
+  'accent-color': '{purple-lighten-1}',
+  'sub-accent-color': '{indigo-darken-3}',
 
-  // typography colors
-  'text-main-color': '{grey.darken.3}',
-  'text-disabled-color': '{grey.lighten.1}',
-  'text-error-color': '{error-color}',
-  'text-link-color': '{info-color}',
-
-  'text-on-brand-color': '{white}',
+  // content wrapper
+  'content-wrapper-color': '{dp-surface-color-20}',
 };
 
 export default lightColor;

package/src/lib/primevue/semantic/index.js

@@ -0,0 +1,7 @@
+import colorScheme from './color-scheme/index.js';
+
+const semantic = {
+  colorScheme,
+};
+
+export default semantic;