@zohodesk/components 1.0.0-temp-259.1 → 1.0.0-temp-260

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-259.1",
-  "main": "es/index.js",
+  "version": "1.0.0-temp-260",
+  "main": "lib/index.js",
   "module": "es/index.js",
   "private": false,
   "publishConfig": {
@@ -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 css:review && npm run review:props ",
+    "prepublishOnly": "node ../prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
     "postpublish": "node ../postPublish.js",
     "test": "ZDTestingFramework unit-test",
     "test:changed": "ZDTestingFramework unit-test --onlyChanged",
@@ -76,12 +76,12 @@
     "@zohodesk-private/color-variable-preprocessor": "1.3.4",
     "@zohodesk-private/css-variable-migrator": "1.0.12",
     "@zohodesk-private/node-plugins": "1.1.16",
-    "@zohodesk-private/react-prop-validator": "1.2.3",
+    "@zohodesk-private/react-prop-validator": "1.2.4",
     "@zohodesk/a11y": "2.3.9",
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/dotkit": "1.0.10",
+    "@zohodesk/dotkit": "1.0.0-temp-7",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.3.14",
+    "@zohodesk/icons": "1.3.15",
     "@zohodesk/layout": "3.2.2",
     "@zohodesk/svg": "1.3.13",
     "@zohodesk/utils": "1.3.16",
@@ -93,7 +93,7 @@
     "@zohodesk/client_build_tool": "0.0.23",
     "color": "4.2.3",
     "@zohodesk/jsx_attribute_wrapper": "1.0.0",
-    "@dot-system/css-utility": "0.1.3",
+    "@dot-system/css-utility": "0.1.4",
     "@zohodesk-private/client_deployment_tool": "0.0.7",
     "@babel/preset-react": "7.29.7",
     "@zohodesk/testinglibrary": "4.1.10"
@@ -105,7 +105,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.3.14",
+    "@zohodesk/icons": "1.3.15",
     "@zohodesk/variables": "1.3.2",
     "@zohodesk/svg": "1.3.13",
     "@zohodesk/virtualizer": "1.0.13",
@@ -115,8 +115,8 @@
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.9",
     "@zohodesk/layout": "3.2.2",
-    "@zohodesk/dotkit": "1.0.10",
+    "@zohodesk/dotkit": "1.0.0-temp-7",
     "color": "4.2.3",
-    "@dot-system/css-utility": "0.1.3"
+    "@dot-system/css-utility": "0.1.4"
   }
 }

package/es/v1/Button/constants/presets.js

@@ -1,158 +0,0 @@
-/** Button appearance presets */
-export const BRAND_OUTLINE = {
-  palette: 'brand',
-  appearance: {
-    border: true,
-    text: true
-  },
-  hoverAppearance: {
-    border: true,
-    text: true
-  },
-  selectedAppearance: {
-    border: true,
-    text: true
-  }
-};
-export const BRAND_GHOST = {
-  palette: 'brand',
-  appearance: {
-    text: true
-  },
-  hoverAppearance: {
-    text: true
-  },
-  selectedAppearance: {
-    text: true
-  }
-};
-export const BRAND_TINTED_OUTLINE = {
-  palette: 'brandLighter',
-  appearance: {
-    bg: true,
-    text: true,
-    border: true
-  },
-  hoverAppearance: {
-    bg: true,
-    text: true,
-    border: true
-  },
-  selectedAppearance: {
-    bg: true,
-    text: true,
-    border: true
-  }
-};
-export const SUCCESS_OUTLINE = {
-  palette: 'success',
-  appearance: {
-    border: true,
-    text: true
-  },
-  hoverAppearance: {
-    border: true,
-    text: true
-  },
-  selectedAppearance: {
-    border: true,
-    text: true
-  }
-};
-export const SUCCESS_GHOST = {
-  palette: 'success',
-  appearance: {
-    text: true
-  },
-  hoverAppearance: {
-    text: true
-  },
-  selectedAppearance: {
-    text: true
-  }
-};
-export const SUCCESS_TINTED_OUTLINE = {
-  palette: 'successLighter',
-  appearance: {
-    bg: true,
-    text: true,
-    border: true
-  },
-  hoverAppearance: {
-    bg: true,
-    text: true,
-    border: true
-  },
-  selectedAppearance: {
-    bg: true,
-    text: true,
-    border: true
-  }
-};
-export const SECONDARY_OUTLINE = {
-  palette: 'secondary',
-  appearance: {
-    border: true,
-    text: true
-  },
-  hoverAppearance: {
-    border: true,
-    text: true
-  },
-  selectedAppearance: {
-    border: 'brandLighter',
-    text: 'brand',
-    bg: 'brandLighter'
-  }
-};
-export const BLACK_GHOST = {
-  palette: 'brand',
-  appearance: {
-    text: 'black'
-  },
-  hoverAppearance: {
-    text: true
-  },
-  selectedAppearance: {
-    text: true
-  }
-};
-export const BRAND_OUTLINE_NO_SELECT = {
-  palette: 'brand',
-  appearance: {
-    border: true,
-    text: true
-  },
-  hoverAppearance: {
-    border: true,
-    text: true
-  }
-};
-export const GHOST_TINTED_HOVER = {
-  palette: 'brandLighter',
-  appearance: {
-    text: true
-  },
-  hoverAppearance: {
-    bg: true
-  },
-  selectedAppearance: {
-    border: true,
-    bg: true
-  }
-};
-export const GHOST_DANGER_HOVER = {
-  palette: 'brandLighter',
-  appearance: {
-    text: true
-  },
-  hoverAppearance: {
-    bg: 'dangerLighter',
-    text: 'danger'
-  },
-  selectedAppearance: {
-    border: 'dangerLighter',
-    text: 'danger',
-    bg: 'dangerLighter'
-  }
-};

package/lib/v1/Button/constants/presets.js

@@ -1,176 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SUCCESS_TINTED_OUTLINE = exports.SUCCESS_OUTLINE = exports.SUCCESS_GHOST = exports.SECONDARY_OUTLINE = exports.GHOST_TINTED_HOVER = exports.GHOST_DANGER_HOVER = exports.BRAND_TINTED_OUTLINE = exports.BRAND_OUTLINE_NO_SELECT = exports.BRAND_OUTLINE = exports.BRAND_GHOST = exports.BLACK_GHOST = void 0;
-
-/** Button appearance presets */
-var BRAND_OUTLINE = {
-  palette: 'brand',
-  appearance: {
-    border: true,
-    text: true
-  },
-  hoverAppearance: {
-    border: true,
-    text: true
-  },
-  selectedAppearance: {
-    border: true,
-    text: true
-  }
-};
-exports.BRAND_OUTLINE = BRAND_OUTLINE;
-var BRAND_GHOST = {
-  palette: 'brand',
-  appearance: {
-    text: true
-  },
-  hoverAppearance: {
-    text: true
-  },
-  selectedAppearance: {
-    text: true
-  }
-};
-exports.BRAND_GHOST = BRAND_GHOST;
-var BRAND_TINTED_OUTLINE = {
-  palette: 'brandLighter',
-  appearance: {
-    bg: true,
-    text: true,
-    border: true
-  },
-  hoverAppearance: {
-    bg: true,
-    text: true,
-    border: true
-  },
-  selectedAppearance: {
-    bg: true,
-    text: true,
-    border: true
-  }
-};
-exports.BRAND_TINTED_OUTLINE = BRAND_TINTED_OUTLINE;
-var SUCCESS_OUTLINE = {
-  palette: 'success',
-  appearance: {
-    border: true,
-    text: true
-  },
-  hoverAppearance: {
-    border: true,
-    text: true
-  },
-  selectedAppearance: {
-    border: true,
-    text: true
-  }
-};
-exports.SUCCESS_OUTLINE = SUCCESS_OUTLINE;
-var SUCCESS_GHOST = {
-  palette: 'success',
-  appearance: {
-    text: true
-  },
-  hoverAppearance: {
-    text: true
-  },
-  selectedAppearance: {
-    text: true
-  }
-};
-exports.SUCCESS_GHOST = SUCCESS_GHOST;
-var SUCCESS_TINTED_OUTLINE = {
-  palette: 'successLighter',
-  appearance: {
-    bg: true,
-    text: true,
-    border: true
-  },
-  hoverAppearance: {
-    bg: true,
-    text: true,
-    border: true
-  },
-  selectedAppearance: {
-    bg: true,
-    text: true,
-    border: true
-  }
-};
-exports.SUCCESS_TINTED_OUTLINE = SUCCESS_TINTED_OUTLINE;
-var SECONDARY_OUTLINE = {
-  palette: 'secondary',
-  appearance: {
-    border: true,
-    text: true
-  },
-  hoverAppearance: {
-    border: true,
-    text: true
-  },
-  selectedAppearance: {
-    border: 'brandLighter',
-    text: 'brand',
-    bg: 'brandLighter'
-  }
-};
-exports.SECONDARY_OUTLINE = SECONDARY_OUTLINE;
-var BLACK_GHOST = {
-  palette: 'brand',
-  appearance: {
-    text: 'black'
-  },
-  hoverAppearance: {
-    text: true
-  },
-  selectedAppearance: {
-    text: true
-  }
-};
-exports.BLACK_GHOST = BLACK_GHOST;
-var BRAND_OUTLINE_NO_SELECT = {
-  palette: 'brand',
-  appearance: {
-    border: true,
-    text: true
-  },
-  hoverAppearance: {
-    border: true,
-    text: true
-  }
-};
-exports.BRAND_OUTLINE_NO_SELECT = BRAND_OUTLINE_NO_SELECT;
-var GHOST_TINTED_HOVER = {
-  palette: 'brandLighter',
-  appearance: {
-    text: true
-  },
-  hoverAppearance: {
-    bg: true
-  },
-  selectedAppearance: {
-    border: true,
-    bg: true
-  }
-};
-exports.GHOST_TINTED_HOVER = GHOST_TINTED_HOVER;
-var GHOST_DANGER_HOVER = {
-  palette: 'brandLighter',
-  appearance: {
-    text: true
-  },
-  hoverAppearance: {
-    bg: 'dangerLighter',
-    text: 'danger'
-  },
-  selectedAppearance: {
-    border: 'dangerLighter',
-    text: 'danger',
-    bg: 'dangerLighter'
-  }
-};
-exports.GHOST_DANGER_HOVER = GHOST_DANGER_HOVER;