From 982cb3bf7c3dec0b8164cc265c7b46a8491f3aac Mon Sep 17 00:00:00 2001
From: jgonza16 <93665374+jgonza16@users.noreply.github.com>
Date: Thu, 28 Mar 2024 14:30:10 +0100
Subject: [PATCH] feat: expose clip-path proertie in checkbox (#615)

---
 src/design-system/formcheckbox.css | 2 +-
 src/design-system/tokens.json      | 1 +
 stories/themes/material.theme.css  | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/design-system/formcheckbox.css b/src/design-system/formcheckbox.css
index 4170de34..899df85c 100644
--- 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
index 634cf74e..cac412d5 100644
--- 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
index 04124ab0..769b9e14 100644
--- 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 {