improve checkbox styles

src/components/checkbox/checkbox.vue

@@ -12,7 +12,7 @@
       @change="$emit('update:modelValue', $event.target.checked)"
     >
     <i
-      class="input checkbox-indicator"
+      class="input -checkbox checkbox-indicator"
       :aria-hidden="true"
       @transitionend.capture="onTransitionEnd"
     />
@@ -82,8 +82,7 @@ export default {
     transition: color 200ms;
     width: 1.1em;
     height: 1.1em;
-    border-radius: $fallback--checkboxRadius;
+    border-radius: var(--roundness);
-    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
     box-shadow: var(--shadow);
     background-color: var(--background);
     vertical-align: top;

src/components/font_control/font_control.vue

@@ -14,7 +14,7 @@
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
       :aria-labelledby="name + '-label'"
-      class="input opt exlcude-disabled visible-for-screenreader-only"
+      class="input -checkbox opt exlcude-disabled visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"

src/components/input.style.js

@@ -12,6 +12,10 @@ const hoverGlow = {
 export default {
   name: 'Input',
   selector: '.input',
+  variant: {
+    checkbox: '.-checkbox',
+    radio: '.-radio'
+  },
   states: {
     disabled: ':disabled',
     hover: ':hover:not(:disabled)',
@@ -21,6 +25,12 @@ export default {
     'Text'
   ],
   defaultRules: [
+    {
+      variant: 'checkbox',
+      directives: {
+        roundness: 1
+      }
+    },
     {
       directives: {
         background: '--fg, -5',

src/components/poll/poll.vue

@@ -43,7 +43,7 @@
           <input
             v-if="poll.multiple"
             type="checkbox"
-            class="input poll-checkbox"
+            class="input -checkbox poll-checkbox"
             :disabled="loading"
             :value="index"
           >
@@ -52,7 +52,7 @@
             type="radio"
             :disabled="loading"
             :value="index"
-            class="input"
+            class="input -radio"
           >
           <label class="option-vote">
             <RichContent

src/components/range_input/range_input.vue

@@ -14,7 +14,7 @@
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
       :aria-labelledby="name + '-label'"
-      class="input opt visible-for-screenreader-only"
+      class="input -checkbox opt visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', !present ? fallback : undefined)"

src/components/shadow_control/shadow_control.vue

@@ -129,7 +129,7 @@
           v-model="selected.inset"
           :disabled="!present"
           name="inset"
-          class="input input-inset visible-for-screenreader-only"
+          class="input -checkbox input-inset visible-for-screenreader-only"
           type="checkbox"
         >
         <label

src/services/theme_data/theme2_to_theme3.js

@@ -30,7 +30,7 @@ export const shadowsKeys = new Set([
 export const radiiKeys = new Set([
   'btn',
   'input',
-  // 'checkbox',
+  'checkbox',
   'panel',
   'avatar',
   'avatarAlt',
@@ -122,10 +122,10 @@ export const convertTheme2To3 = (data) => {
         case 'input':
           rule.component = 'Input'
           break
-        // TODO: missing feature?
+        case 'checkbox':
-        // case 'checkbox':
+          rule.component = 'Input'
-        //   rule.component = 'Input'
+          rule.variant = 'checkbox'
-        //   break
+          break
         case 'panel':
           rule.component = 'Panel'
           break