@zohodesk/components 1.0.0-temp-256.1 → 1.0.0-temp-257.1

package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css

@@ -1,83 +1,83 @@
 /* Theme-aware Brand Palette (changes with CTA theme selection) */
 .bg-brand-80 {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .hover\:bg-brand-80:hover {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .focus\:bg-brand-80:focus {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .active\:bg-brand-80:active {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .selected\:bg-brand-80 {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .bg-brand-100 {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .hover\:bg-brand-100:hover {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .focus\:bg-brand-100:focus {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .active\:bg-brand-100:active {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .selected\:bg-brand-100 {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .bg-brand-10 {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .hover\:bg-brand-10:hover {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .focus\:bg-brand-10:focus {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .active\:bg-brand-10:active {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .selected\:bg-brand-10 {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 /* color not available */
 .bg-brand-20 {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .hover\:bg-brand-20:hover {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .focus\:bg-brand-20:focus {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .active\:bg-brand-20:active {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .selected\:bg-brand-20 {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 /* Static Grey Palette */
@@ -122,23 +122,23 @@
 }
 
 .bg-grey-10 {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .hover\:bg-grey-10:hover {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .focus\:bg-grey-10:focus {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .active\:bg-grey-10:active {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .selected\:bg-grey-10 {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .bg-grey-15 {
@@ -163,23 +163,23 @@
 
 /* Static Blue Palette */
 .bg-blue-80 {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .hover\:bg-blue-80:hover {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .focus\:bg-blue-80:focus {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .active\:bg-blue-80:active {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .selected\:bg-blue-80 {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .bg-blue-100 {
@@ -569,23 +569,23 @@
 
 /* Utility Colors */
 .bg-transparent {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .hover\:bg-transparent:hover {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .focus\:bg-transparent:focus {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .active\:bg-transparent:active {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .selected\:bg-transparent {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .bg-white {

package/lib/v1/helpers/colorHelpers/border/borderColor.module.css

@@ -62,84 +62,84 @@
 
 /* Static Grey Palette */
 .border-grey-65 {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .hover\:border-grey-65:hover {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .focus\:border-grey-65:focus {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .active\:border-grey-65:active {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .selected\:border-grey-65 {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .border-grey-55 {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .hover\:border-grey-55:hover {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .focus\:border-grey-55:focus {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .active\:border-grey-55:active {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .selected\:border-grey-55 {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .border-grey-15 {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .hover\:border-grey-15:hover {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .focus\:border-grey-15:focus {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .active\:border-grey-15:active {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .selected\:border-grey-15 {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 /* Static Blue Palette */
 .border-blue-80 {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .hover\:border-blue-80:hover {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .focus\:border-blue-80:focus {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .active\:border-blue-80:active {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .selected\:border-blue-80 {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .border-blue-100 {

package/lib/v1/helpers/colorHelpers/text/textColor.module.css

@@ -1,22 +1,22 @@
 /* Theme-aware Brand Palette (changes with CTA theme selection) */
 .text-brand-80 {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .hover\:text-brand-80:hover {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .focus\:text-brand-80:focus {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .active\:text-brand-80:active {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .selected\:text-brand-80 {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .text-brand-100 {
@@ -41,23 +41,23 @@
 
 /* Static Grey Palette */
 .text-grey-65 {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .hover\:text-grey-65:hover {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .focus\:text-grey-65:focus {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .active\:text-grey-65:active {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .selected\:text-grey-65 {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .text-grey-100 {
@@ -82,43 +82,43 @@
 
 /* Static Blue Palette */
 .text-blue-80 {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .hover\:text-blue-80:hover {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .focus\:text-blue-80:focus {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .active\:text-blue-80:active {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .selected\:text-blue-80 {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .text-blue-100 {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .hover\:text-blue-100:hover {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .focus\:text-blue-100:focus {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .active\:text-blue-100:active {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .selected\:text-blue-100 {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 /* Static Green Palette */
@@ -307,62 +307,62 @@
 }
 
 .text-white {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .hover\:text-white:hover {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .focus\:text-white:focus {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .active\:text-white:active {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .selected\:text-white {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .text-black {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .hover\:text-black:hover {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .focus\:text-black:focus {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .active\:text-black:active {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .selected\:text-black {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 /* CTA-aware filled text — adapts to CTA theme */
 .text-brand-filled {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .hover\:text-brand-filled:hover {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .focus\:text-brand-filled:focus {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .active\:text-brand-filled:active {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .selected\:text-brand-filled {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-256.1",
+  "version": "1.0.0-temp-257.1",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -30,7 +30,7 @@
     "build:local": "npm run build",
     "build:watch": "npm run build:es:watch --module:mode=dev -- -w",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node ../prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node ../prePublish.js && npm run css:review && npm run review:props ",
     "postpublish": "node ../postPublish.js",
     "test": "ZDTestingFramework unit-test",
     "test:changed": "ZDTestingFramework unit-test --onlyChanged",
@@ -73,7 +73,7 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
     "@dot-system/css-audit-tool": "1.0.1",
-    "@zohodesk-private/color-variable-preprocessor": "1.3.3",
+    "@zohodesk-private/color-variable-preprocessor": "1.3.4",
     "@zohodesk-private/css-variable-migrator": "1.0.11",
     "@zohodesk-private/node-plugins": "1.1.15",
     "@zohodesk-private/react-prop-validator": "1.2.3",
@@ -81,9 +81,9 @@
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.10",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.3.11",
+    "@zohodesk/icons": "1.3.14",
     "@zohodesk/layout": "3.2.1",
-    "@zohodesk/svg": "1.3.10",
+    "@zohodesk/svg": "1.3.11",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.3.2",
     "@zohodesk/virtualizer": "1.0.13",
@@ -105,9 +105,9 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.3.11",
+    "@zohodesk/icons": "1.3.14",
     "@zohodesk/variables": "1.3.2",
-    "@zohodesk/svg": "1.3.10",
+    "@zohodesk/svg": "1.3.11",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",