feat: Checkbox revisited!

packages/core/.storybook/main.js

@@ -6,6 +6,7 @@ import { ImageLoader } from 'esbuild-vanilla-image-loader';
 export default {
   // stories: [, '../stories/(?!all)*.stories.tsx'],
   stories: [
+    '../stories/checkbox.stories.tsx',
     '../stories/avatar.stories.tsx',
     '../stories/button.stories.tsx',
     '../stories/cursor.stories.tsx',

packages/core/components/Checkbox/Checkbox.css.ts

@@ -0,0 +1,73 @@
+import check from './imgs/check.svg';
+import checkDisabled from './imgs/check-disabled.svg';
+import { globalStyle, style } from '@vanilla-extract/css';
+import { contract } from '../ThemeProvider/themes/contract.css';
+
+console.log({ shadows: contract.shadows });
+
+export const icon = style({
+  width: contract.space[12],
+  height: contract.space[12],
+  display: 'inline-block',
+  position: 'absolute',
+  left: '0',
+  borderLeftStyle: 'solid',
+  borderLeftWidth: contract.space[1],
+  borderLeftColor: contract.colors.borderDark,
+  borderTopStyle: 'solid',
+  borderTopWidth: contract.space[1],
+  borderTopColor: contract.colors.borderDark,
+  backgroundColor: contract.colors.inputBackground,
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'center center',
+  backgroundSize: '7px 7px',
+  boxShadow: contract.shadows.checkbox,
+});
+
+export const text = style({
+  padding: contract.space[1],
+  userSelect: 'none',
+});
+
+export const field = style({
+  width: contract.space[12],
+  height: contract.space[12],
+  margin: '0',
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  opacity: 0,
+});
+
+export const label = style({
+  display: 'inline-block',
+  height: contract.space[15],
+  lineHeight: 1.5,
+  position: 'relative',
+  marginBlock: contract.space[4],
+  paddingLeft: contract.space[20],
+});
+
+globalStyle(`${field}:checked + ${icon}`, {
+  backgroundImage: `url('${check}')`,
+});
+
+globalStyle(`${field}:focus ~ ${text}, ${field}:active ~ ${text}`, {
+  borderWidth: contract.space[1],
+  borderStyle: 'dotted',
+  padding: '0',
+});
+
+globalStyle(`${field}:checked:disabled + ${icon}`, {
+  backgroundImage: `url('${checkDisabled}')`,
+  backgroundSize: '7px 7px, 1.9px 1.9px',
+});
+
+globalStyle(`${field}:disabled + ${icon}`, {
+  backgroundColor: contract.colors.inputBackgroundDisabled,
+});
+
+globalStyle(`${label}:has(:disabled)`, {
+  color: contract.colors.borderDark,
+  textShadow: `0.5px 0.5px ${contract.colors.borderLight}`,
+});

packages/core/components/Checkbox/Checkbox.tsx

@@ -1,99 +1,10 @@
 import React, { forwardRef } from 'react';
-import styled, { css, th } from '@xstyled/styled-components';
 
-import check from './imgs/check.svg';
-import checkDisabled from './imgs/check-disabled.svg';
-
-const Icon = styled.span`
-  width: 12px;
-  height: 12px;
-
-  content: '';
-  display: inline-block;
-
-  position: absolute;
-  left: 0;
-
-  border-left: 1;
-  border-left-color: borderDark;
-  border-top: 1;
-  border-top-color: borderDark;
-
-  box-shadow: inset -1px -1px 0 0 ${th('colors.material')},
-    inset 1px 1px 0 0 ${th('colors.borderDarkest')},
-    0.5px 0.5px 0 0.5px ${th('colors.borderLightest')};
-
-  background-color: inputBackground;
-
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: 7px 7px;
-`;
-
-const Text = styled.span`
-  padding: 1;
-  user-select: none;
-`;
-
-const Field = styled.input.attrs({
-  type: 'checkbox',
-})`
-  width: 12px;
-  height: 12px;
-
-  margin: 0;
-
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  opacity: 0;
-
-  &:focus ~ ${Text}, &:active ~ ${Text} {
-    border-width: 1;
-    border-style: dotted;
-    padding: 0;
-  }
-
-  &:checked + ${Icon} {
-    background-image: url('${check}');
-  }
-
-  &:checked &:disabled + ${Icon} {
-    background-image: url('${checkDisabled}');
-    background-size: 7px 7px, 1.9px 1.9px;
-  }
-
-  &:disabled + ${Icon} {
-    background-color: inputBackgroundDisabled;
-  }
-`;
-
-Field.displayName = 'Field';
+import * as styles from './Checkbox.css';
 
 export type LabelProps = {
   disabled?: boolean;
 };
-
-const Label = styled.label<LabelProps>`
-  display: inline-block;
-  height: 15px;
-
-  line-height: 1.5;
-
-  position: relative;
-
-  margin: 4 0;
-  padding-left: 20;
-
-  ${({ disabled }) =>
-    disabled &&
-    css`
-      color: borderDark;
-      text-shadow: 0.5px 0.5px ${th('colors.borderLight')};
-    `}
-`;
-
 export type CheckboxProps = {
   label?: string;
   children?: string;
@@ -104,11 +15,18 @@ export type CheckboxProps = {
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   ({ children, style, checked, label, disabled = false, ...rest }, ref) => (
-    <Label style={style} disabled={disabled}>
-      <Field checked={checked} disabled={disabled} {...rest} ref={ref} />
-      <Icon />
-      <Text>{children || label}</Text>
-    </Label>
+    <label style={style} className={styles.label}>
+      <input
+        className={styles.field}
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        {...rest}
+        ref={ref}
+      />
+      <span className={styles.icon} />
+      <span className={styles.text}>{children || label}</span>
+    </label>
   ),
 );
 

packages/core/components/ThemeProvider/themes/baseTheme.css.ts

@@ -67,6 +67,9 @@ export const generateShadows = (colors: IColors) => {
     input: `inset -1px -1px 0 0 ${colors.material},
             inset 1px 1px 0 0 ${colors.borderDarkest},
             0.5px 0.5px 0 0.5px ${colors.borderLightest}`,
+    checkbox: `inset -1px -1px 0 0 ${colors.material},
+              inset 1px 1px 0 0 ${colors.borderDarkest},
+              0.5px 0.5px 0 0.5px ${colors.borderLightest}`,
   };
 };
 

packages/core/components/ThemeProvider/themes/contract.css.ts

@@ -8,5 +8,6 @@ export const contract = createThemeContract({
     out: '',
     in: '',
     input: '',
+    checkbox: '',
   },
 });