feat: expose clip-path proertie in checkbox (#615)

Capgemini · May 24, 2024 · 982cb3b · 982cb3b
1 parent e328837
commit 982cb3b
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 1 deletion.
diff --git a/src/design-system/formcheckbox.css b/src/design-system/formcheckbox.css
@@ -72,7 +72,7 @@
       content: '';
       width: 0.8em;
       height: 0.8em;
-      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+      clip-path: token('clip-path-formcontrol_checkmark');
       transform: scale(0);
       transform-origin: bottom left;
       transition: 120ms transform ease-in-out;

diff --git a/src/design-system/tokens.json b/src/design-system/tokens.json
@@ -49,6 +49,7 @@
   "color-background-formcontrol_suffix": "transparent",
   "color-background-formcontrol_prefix": "transparent",
   "color-background-formcontrol_checkmark": "white",
+  "clip-path-formcontrol_checkmark": "polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%)",
   "color-background-highlight_body": "yellow",
   "color-background-pre_box": "transparent",
   "color-chevron-formcontrol": "#000",

diff --git a/stories/themes/material.theme.css b/stories/themes/material.theme.css
@@ -55,6 +55,7 @@
   --dcx-border-radius-formcontrol: 6px;
   --dcx-color-text-formcontrol: #00000099;
   --dcx-color-text-formcontrol_label: #00000099;
+  --dcx-clip-path-formcontrol_checkmark: inset(4px 1px);
 }
 
 .dcx-radio-button-group {