@zohodesk/components 1.0.0-temp-259.2 → 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,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-259.2",
+  "version": "1.0.0-temp-260",
   "main": "lib/index.js",
   "module": "es/index.js",
   "private": false,
@@ -79,7 +79,7 @@
     "@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.15",
     "@zohodesk/layout": "3.2.2",
@@ -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.4"
   }
-}
+}

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

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

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

@@ -1,165 +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: {
-    bg: false,
-    border: true
-  },
-  hoverAppearance: {
-    bg: false,
-    border: true
-  },
-  selectedAppearance: {
-    bg: false,
-    border: true
-  }
-};
-exports.BRAND_OUTLINE = BRAND_OUTLINE;
-var BRAND_GHOST = {
-  palette: 'brand',
-  appearance: {
-    bg: false
-  },
-  hoverAppearance: {
-    bg: false
-  },
-  selectedAppearance: {
-    bg: false
-  }
-};
-exports.BRAND_GHOST = BRAND_GHOST;
-var BRAND_TINTED_OUTLINE = {
-  palette: 'brandLighter',
-  appearance: {
-    border: true
-  },
-  hoverAppearance: {
-    border: true
-  },
-  selectedAppearance: {
-    border: true
-  }
-};
-exports.BRAND_TINTED_OUTLINE = BRAND_TINTED_OUTLINE;
-var SUCCESS_OUTLINE = {
-  palette: 'success',
-  appearance: {
-    bg: false,
-    border: true
-  },
-  hoverAppearance: {
-    bg: false,
-    border: true
-  },
-  selectedAppearance: {
-    bg: false,
-    border: true
-  }
-};
-exports.SUCCESS_OUTLINE = SUCCESS_OUTLINE;
-var SUCCESS_GHOST = {
-  palette: 'success',
-  appearance: {
-    bg: false
-  },
-  hoverAppearance: {
-    bg: false
-  },
-  selectedAppearance: {
-    bg: false
-  }
-};
-exports.SUCCESS_GHOST = SUCCESS_GHOST;
-var SUCCESS_TINTED_OUTLINE = {
-  palette: 'successLighter',
-  appearance: {
-    border: true
-  },
-  hoverAppearance: {
-    border: true
-  },
-  selectedAppearance: {
-    border: true
-  }
-};
-exports.SUCCESS_TINTED_OUTLINE = SUCCESS_TINTED_OUTLINE;
-var SECONDARY_OUTLINE = {
-  palette: 'secondary',
-  appearance: {
-    bg: false,
-    border: true
-  },
-  hoverAppearance: {
-    bg: false,
-    border: true
-  },
-  selectedAppearance: {
-    border: 'brandLighter',
-    text: 'brand',
-    bg: 'brandLighter'
-  }
-};
-exports.SECONDARY_OUTLINE = SECONDARY_OUTLINE;
-var BLACK_GHOST = {
-  palette: 'brand',
-  appearance: {
-    bg: false,
-    text: 'black'
-  },
-  hoverAppearance: {
-    bg: false
-  },
-  selectedAppearance: {
-    bg: false
-  }
-};
-exports.BLACK_GHOST = BLACK_GHOST;
-var BRAND_OUTLINE_NO_SELECT = {
-  palette: 'brand',
-  appearance: {
-    bg: false,
-    border: true
-  },
-  hoverAppearance: {
-    bg: false,
-    border: true
-  }
-};
-exports.BRAND_OUTLINE_NO_SELECT = BRAND_OUTLINE_NO_SELECT;
-var GHOST_TINTED_HOVER = {
-  palette: 'brandLighter',
-  appearance: {
-    bg: false
-  },
-  hoverAppearance: {
-    bg: true
-  },
-  selectedAppearance: {
-    border: true,
-    bg: true
-  }
-};
-exports.GHOST_TINTED_HOVER = GHOST_TINTED_HOVER;
-var GHOST_DANGER_HOVER = {
-  palette: 'brandLighter',
-  appearance: {
-    bg: false
-  },
-  hoverAppearance: {
-    bg: 'dangerLighter',
-    text: 'danger'
-  },
-  selectedAppearance: {
-    border: 'dangerLighter',
-    text: 'danger',
-    bg: 'dangerLighter'
-  }
-};
-exports.GHOST_DANGER_HOVER = GHOST_DANGER_HOVER;