@zohodesk/components 1.6.8 → 1.6.11

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

@@ -0,0 +1,368 @@
+/* Theme-aware Brand Palette (changes with CTA theme selection) */
+.text-brand-80 {
+    color: var(--zdt_v1_palette_brand_text);
+}
+
+.hover\:text-brand-80:hover {
+    color: var(--zdt_v1_palette_brand_text);
+}
+
+.focus\:text-brand-80:focus {
+    color: var(--zdt_v1_palette_brand_text);
+}
+
+.active\:text-brand-80:active {
+    color: var(--zdt_v1_palette_brand_text);
+}
+
+.selected\:text-brand-80 {
+    color: var(--zdt_v1_palette_brand_text);
+}
+
+.text-brand-100 {
+    color: var(--zdt_v1_palette_brand_hover_text);
+}
+
+.hover\:text-brand-100:hover {
+    color: var(--zdt_v1_palette_brand_hover_text);
+}
+
+.focus\:text-brand-100:focus {
+    color: var(--zdt_v1_palette_brand_hover_text);
+}
+
+.active\:text-brand-100:active {
+    color: var(--zdt_v1_palette_brand_hover_text);
+}
+
+.selected\:text-brand-100 {
+    color: var(--zdt_v1_palette_brand_hover_text);
+}
+
+/* Static Grey Palette */
+.text-grey-65 {
+    color: var(--zdt_v1_palette_grey_text);
+}
+
+.hover\:text-grey-65:hover {
+    color: var(--zdt_v1_palette_grey_text);
+}
+
+.focus\:text-grey-65:focus {
+    color: var(--zdt_v1_palette_grey_text);
+}
+
+.active\:text-grey-65:active {
+    color: var(--zdt_v1_palette_grey_text);
+}
+
+.selected\:text-grey-65 {
+    color: var(--zdt_v1_palette_grey_text);
+}
+
+.text-grey-100 {
+    color: var(--zdt_v1_palette_grey_hover_text);
+}
+
+.hover\:text-grey-100:hover {
+    color: var(--zdt_v1_palette_grey_hover_text);
+}
+
+.focus\:text-grey-100:focus {
+    color: var(--zdt_v1_palette_grey_hover_text);
+}
+
+.active\:text-grey-100:active {
+    color: var(--zdt_v1_palette_grey_hover_text);
+}
+
+.selected\:text-grey-100 {
+    color: var(--zdt_v1_palette_grey_hover_text);
+}
+
+/* Static Blue Palette */
+.text-blue-80 {
+    color: var(--zdt_v1_palette_blue_text);
+}
+
+.hover\:text-blue-80:hover {
+    color: var(--zdt_v1_palette_blue_text);
+}
+
+.focus\:text-blue-80:focus {
+    color: var(--zdt_v1_palette_blue_text);
+}
+
+.active\:text-blue-80:active {
+    color: var(--zdt_v1_palette_blue_text);
+}
+
+.selected\:text-blue-80 {
+    color: var(--zdt_v1_palette_blue_text);
+}
+
+.text-blue-100 {
+    color: var(--zdt_v1_palette_blue_hover_text);
+}
+
+.hover\:text-blue-100:hover {
+    color: var(--zdt_v1_palette_blue_hover_text);
+}
+
+.focus\:text-blue-100:focus {
+    color: var(--zdt_v1_palette_blue_hover_text);
+}
+
+.active\:text-blue-100:active {
+    color: var(--zdt_v1_palette_blue_hover_text);
+}
+
+.selected\:text-blue-100 {
+    color: var(--zdt_v1_palette_blue_hover_text);
+}
+
+/* Static Green Palette */
+.text-green-80 {
+    color: var(--zdt_v1_palette_green_text);
+}
+
+.hover\:text-green-80:hover {
+    color: var(--zdt_v1_palette_green_text);
+}
+
+.focus\:text-green-80:focus {
+    color: var(--zdt_v1_palette_green_text);
+}
+
+.active\:text-green-80:active {
+    color: var(--zdt_v1_palette_green_text);
+}
+
+.selected\:text-green-80 {
+    color: var(--zdt_v1_palette_green_text);
+}
+
+.text-green-100 {
+    color: var(--zdt_v1_palette_green_hover_text);
+}
+
+.hover\:text-green-100:hover {
+    color: var(--zdt_v1_palette_green_hover_text);
+}
+
+.focus\:text-green-100:focus {
+    color: var(--zdt_v1_palette_green_hover_text);
+}
+
+.active\:text-green-100:active {
+    color: var(--zdt_v1_palette_green_hover_text);
+}
+
+.selected\:text-green-100 {
+    color: var(--zdt_v1_palette_green_hover_text);
+}
+
+/* Static Orange Palette */
+.text-orange-80 {
+    color: var(--zdt_v1_palette_orange_text);
+}
+
+.hover\:text-orange-80:hover {
+    color: var(--zdt_v1_palette_orange_text);
+}
+
+.focus\:text-orange-80:focus {
+    color: var(--zdt_v1_palette_orange_text);
+}
+
+.active\:text-orange-80:active {
+    color: var(--zdt_v1_palette_orange_text);
+}
+
+.selected\:text-orange-80 {
+    color: var(--zdt_v1_palette_orange_text);
+}
+
+.text-orange-100 {
+    color: var(--zdt_v1_palette_orange_hover_text);
+}
+
+.hover\:text-orange-100:hover {
+    color: var(--zdt_v1_palette_orange_hover_text);
+}
+
+.focus\:text-orange-100:focus {
+    color: var(--zdt_v1_palette_orange_hover_text);
+}
+
+.active\:text-orange-100:active {
+    color: var(--zdt_v1_palette_orange_hover_text);
+}
+
+.selected\:text-orange-100 {
+    color: var(--zdt_v1_palette_orange_hover_text);
+}
+
+/* Static Red Palette */
+.text-red-70 {
+    color: var(--zdt_v1_palette_red_text);
+}
+
+.hover\:text-red-70:hover {
+    color: var(--zdt_v1_palette_red_text);
+}
+
+.focus\:text-red-70:focus {
+    color: var(--zdt_v1_palette_red_text);
+}
+
+.active\:text-red-70:active {
+    color: var(--zdt_v1_palette_red_text);
+}
+
+.selected\:text-red-70 {
+    color: var(--zdt_v1_palette_red_text);
+}
+
+.text-red-100 {
+    color: var(--zdt_v1_palette_red_hover_text);
+}
+
+.hover\:text-red-100:hover {
+    color: var(--zdt_v1_palette_red_hover_text);
+}
+
+.focus\:text-red-100:focus {
+    color: var(--zdt_v1_palette_red_hover_text);
+}
+
+.active\:text-red-100:active {
+    color: var(--zdt_v1_palette_red_hover_text);
+}
+
+.selected\:text-red-100 {
+    color: var(--zdt_v1_palette_red_hover_text);
+}
+
+/* Static Yellow Palette */
+.text-yellow-80 {
+    color: var(--zdt_v1_palette_yellow_text);
+}
+
+.hover\:text-yellow-80:hover {
+    color: var(--zdt_v1_palette_yellow_text);
+}
+
+.focus\:text-yellow-80:focus {
+    color: var(--zdt_v1_palette_yellow_text);
+}
+
+.active\:text-yellow-80:active {
+    color: var(--zdt_v1_palette_yellow_text);
+}
+
+.selected\:text-yellow-80 {
+    color: var(--zdt_v1_palette_yellow_text);
+}
+
+.text-yellow-100 {
+    color: var(--zdt_v1_palette_yellow_hover_text);
+}
+
+.hover\:text-yellow-100:hover {
+    color: var(--zdt_v1_palette_yellow_hover_text);
+}
+
+.focus\:text-yellow-100:focus {
+    color: var(--zdt_v1_palette_yellow_hover_text);
+}
+
+.active\:text-yellow-100:active {
+    color: var(--zdt_v1_palette_yellow_hover_text);
+}
+
+.selected\:text-yellow-100 {
+    color: var(--zdt_v1_palette_yellow_hover_text);
+}
+
+/* Utility Colors */
+.text-transparent {
+    color: var(--dot_mirror);
+}
+
+.hover\:text-transparent:hover {
+    color: var(--dot_mirror);
+}
+
+.focus\:text-transparent:focus {
+    color: var(--dot_mirror);
+}
+
+.active\:text-transparent:active {
+    color: var(--dot_mirror);
+}
+
+.selected\:text-transparent {
+    color: var(--dot_mirror);
+}
+
+.text-white {
+    color: var(--zdt_v1_palette_white);
+}
+
+.hover\:text-white:hover {
+    color: var(--zdt_v1_palette_white);
+}
+
+.focus\:text-white:focus {
+    color: var(--zdt_v1_palette_white);
+}
+
+.active\:text-white:active {
+    color: var(--zdt_v1_palette_white);
+}
+
+.selected\:text-white {
+    color: var(--zdt_v1_palette_white);
+}
+
+.text-black {
+    color: var(--zdt_v1_palette_black);
+}
+
+.hover\:text-black:hover {
+    color: var(--zdt_v1_palette_black);
+}
+
+.focus\:text-black:focus {
+    color: var(--zdt_v1_palette_black);
+}
+
+.active\:text-black:active {
+    color: var(--zdt_v1_palette_black);
+}
+
+.selected\:text-black {
+    color: var(--zdt_v1_palette_black);
+}
+
+/* CTA-aware filled text — adapts to CTA theme */
+.text-brand-filled {
+    color: var(--zdt_v1_palette_brand_filled_text);
+}
+
+.hover\:text-brand-filled:hover {
+    color: var(--zdt_v1_palette_brand_filled_text);
+}
+
+.focus\:text-brand-filled:focus {
+    color: var(--zdt_v1_palette_brand_filled_text);
+}
+
+.active\:text-brand-filled:active {
+    color: var(--zdt_v1_palette_brand_filled_text);
+}
+
+.selected\:text-brand-filled {
+    color: var(--zdt_v1_palette_brand_filled_text);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.6.8",
+  "version": "1.6.11",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -73,11 +73,11 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
     "@zohodesk-private/css-audit-tool": "0.0.2",
-    "@zohodesk-private/color-variable-preprocessor": "1.3.0",
+    "@zohodesk-private/color-variable-preprocessor": "1.3.1",
     "@zohodesk-private/css-variable-migrator": "1.0.9",
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
-    "@zohodesk/a11y": "2.3.8",
+    "@zohodesk/a11y": "2.3.9",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.9",
     "@zohodesk/hooks": "2.0.8",
@@ -108,7 +108,7 @@
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.8",
     "@zohodesk/utils": "1.3.16",
-    "@zohodesk/a11y": "2.3.8",
+    "@zohodesk/a11y": "2.3.9",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/dotkit": "1.0.9",
     "color": "4.2.3"