feat: add variable for control-size, shadow for checkbox and radio, a…

…nd radio indicator size
receter · Jan 15, 2025 · 80b23b1 · 80b23b1
1 parent 7f5214a
commit 80b23b1
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 15 deletions.
diff --git a/packages/ui/lib/Checkbox/styles.module.css b/packages/ui/lib/Checkbox/styles.module.css
@@ -1,13 +1,15 @@
 .checkbox {
   all: unset;
-  height: 1em;
-  width: 1em;
+  box-sizing: border-box;
+  height: var(--sys42-control-height);
+  width: var(--sys42-control-height);
   border-radius: var(--sys42-checkbox-border-radius);
   border: var(--sys42-checkbox-border-width) solid
     var(--sys42-checkbox-border-color);
   flex-shrink: 0;
   color: var(--sys42-checkbox-color);
   display: inline-block;
+  box-shadow: var(--sys42-checkbox-box-shadow);
 }
 
 .checkbox:checked,
@@ -20,8 +22,8 @@
 .checkbox:checked:before,
 .checkbox:indeterminate:before {
   content: "";
-  height: 1em;
-  width: 1em;
+  height: 100%;
+  width: 100%;
   display: block;
   background: currentColor;
   mask: url(./checked.svg);
@@ -32,7 +34,7 @@
 
 .checkbox:indeterminate:before {
   background: currentColor;
-  mask: url(./indeterminate.svg);
+  mask-image: url(./indeterminate.svg);
 }
 
 .checkbox:disabled {

diff --git a/packages/ui/lib/LabeledControl/render.tsx b/packages/ui/lib/LabeledControl/render.tsx
@@ -6,7 +6,7 @@ export function renderLabeledControl(args: BaseLabeledControlRenderArgs) {
   return (
     <>
       {control}
-      {label}
+      <div>{label}</div>
     </>
   );
 }
diff --git a/packages/ui/lib/LabeledControl/styles.module.css b/packages/ui/lib/LabeledControl/styles.module.css
@@ -1,11 +1,13 @@
 .labeledControl {
   display: flex;
-  align-items: flex-start;
+  align-items: start;
   gap: var(--sys42-spacing-sm);
 }
 
-.labeledControl > *:first-child {
-  position: relative;
-  top: calc(1lh / 2);
-  transform: translateY(-50%);
+.labeledControl *:first-child {
+  margin-top: max(0px, calc((1lh - var(--sys42-control-height)) / 2));
+}
+
+.labeledControl div:last-child {
+  margin-top: max(0px, calc((var(--sys42-control-height) - 1lh) / 2));
 }
diff --git a/packages/ui/lib/Radio/styles.module.css b/packages/ui/lib/Radio/styles.module.css
@@ -1,12 +1,14 @@
 .radio {
   all: unset;
-  height: 1em;
-  width: 1em;
+  box-sizing: border-box;
+  height: var(--sys42-control-height);
+  width: var(--sys42-control-height);
   border-radius: var(--sys42-radio-border-radius);
   border: var(--sys42-radio-border-width) solid var(--sys42-radio-border-color);
   flex-shrink: 0;
   color: var(--sys42-radio-color);
   display: inline-block;
+  box-shadow: var(--sys42-radio-box-shadow);
 }
 
 .radio:checked {
@@ -17,8 +19,8 @@
 
 .radio:checked:before {
   content: "";
-  height: 0.5em;
-  width: 0.5em;
+  height: var(--sys42-radio-indicator-size);
+  width: var(--sys42-radio-indicator-size);
   display: block;
   background: currentColor;
   border-radius: var(--sys42-radio-border-radius);

diff --git a/packages/ui/lib/default-custom-properties.css b/packages/ui/lib/default-custom-properties.css
@@ -158,12 +158,17 @@
   --sys42-textLink-color--visited: #551a8b;
   --sys42-textLink-color--active: #ff0000;
 
+  /* Controls */
+  /* Currently this applies to Checkbox and Radio */
+  --sys42-control-height: 1.25em;
+
   /* Checkbox */
   --sys42-checkbox-background: #fff;
   --sys42-checkbox-border-width: 2px;
   --sys42-checkbox-border-color: #ddd;
   --sys42-checkbox-border-radius: var(--sys42-border-radius-sm);
   --sys42-checkbox-color: transparent;
+  --sys42-checkbox-box-shadow: none;
 
   /* :checked */
   --sys42-checkbox-color--checked: #fff;
@@ -181,6 +186,8 @@
   --sys42-radio-border-color: #ddd;
   --sys42-radio-border-radius: 50%;
   --sys42-radio-color: transparent;
+  --sys42-radio-box-shadow: none;
+  --sys42-radio-indicator-size: 50%;
 
   /* :checked */
   --sys42-radio-color--checked: #fff;