@teammodlr/ui-kit 2.1.39 → 2.1.43

package/src/components/checkbox/style/Checkbox.css.ts

@@ -1,161 +1,178 @@
-import {
-    createVar,
-    globalStyle,
-    style,
-    styleVariants
-} from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.css';
-
-const sizes = {
-    xs: '16px',
-    sm: '18px',
-    md: '20px',
-    lg: '22px',
-    xl: '24px'
-};
-
-export const vars = {
-    height: createVar(),
-    radius: createVar(),
-    backgroundColor: createVar(),
-    borderColor: createVar(),
-    color: createVar()
-};
-
-export const base = style({
-    position: 'relative',
-    display: 'inline-flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    gap: themeVars.space['1.5']
-});
-
-export const checkbox = style({
-    vars: {
-        [vars.height]: sizes.sm,
-        [vars.radius]: '4px',
-        [vars.backgroundColor]: 'white',
-        [vars.borderColor]: themeVars.color.gray[300],
-        [vars.color]: 'white'
-    },
-    position: 'relative',
-    width: vars.height,
-    height: vars.height,
-    borderRadius: vars.radius,
-    border: `1px solid ${vars.borderColor}`,
-    color: vars.color,
-    cursor: 'pointer',
-    transition: `all 0.125s ${themeVars.transition.default}`,
-    backgroundColor: 'currentColor',
-
-    appearance: 'none',
-    backgroundOrigin: 'border-box',
-    display: 'inline-block',
-    flexShrink: 0,
-    userSelect: 'none',
-    outline: 'none',
-
-    selectors: {
-        ['&:focus']: {
-            vars: {
-                [vars.borderColor]: themeVars.color.blue[500],
-                [vars.color]: themeVars.color.blue[500]
-            },
-            boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
-        },
-        ['&:checked']: {
-            vars: {
-                [vars.borderColor]: themeVars.color.blue[500],
-                [vars.color]: themeVars.color.blue[500]
-            },
-            backgroundColor: 'currentcolor',
-            backgroundPosition: '50%',
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: '100% 100%',
-            borderColor: 'transparent',
-            color: vars.color,
-            backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")`
-        },
-        ['&:checked:focus']: {
-            vars: {
-                [vars.borderColor]: themeVars.color.blue[500],
-                [vars.color]: themeVars.color.blue[500]
-            },
-            color: vars.color
-        },
-        ['&:indeterminate']: {
-            vars: {
-                [vars.borderColor]: themeVars.color.blue[500],
-                [vars.color]: themeVars.color.blue[500]
-            },
-            backgroundColor: 'currentcolor',
-            backgroundPosition: '50%',
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: '100% 100%',
-            borderColor: 'transparent',
-            color: vars.color,
-            backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E")`
-        },
-        ['&:hover']: {
-            vars: {
-                [vars.borderColor]: themeVars.color.gray[400]
-            }
-        },
-        ['&:disabled']: {
-            vars: {
-                [vars.borderColor]: themeVars.color.gray[400],
-                [vars.color]: themeVars.color.gray[400]
-            },
-            cursor: 'not-allowed'
-        }
-    }
-});
-
-export const disabled = style({
-    opacity: 0.5,
-    cursor: 'not-allowed'
-});
-
-export const indeterminate = style({
-    vars: {
-        [vars.borderColor]: themeVars.color.blue[500],
-        [vars.backgroundColor]: themeVars.color.blue[500]
-    }
-});
-
-export const label = style({
-    marginLeft: themeVars.space['0.5'],
-    fontWeight: '500',
-    display: 'inline-block',
-    fontSize: themeVars.fontSize.base,
-    wordBreak: 'break-word',
-    cursor: 'pointer'
-});
-
-export const size = styleVariants({
-    xs: {
-        vars: {
-            [vars.height]: sizes.xs
-        }
-    },
-    sm: {
-        vars: {
-            [vars.height]: sizes.sm
-        }
-    },
-    md: {
-        vars: {
-            [vars.height]: sizes.md
-        }
-    },
-    lg: {
-        vars: {
-            [vars.height]: sizes.lg
-        }
-    },
-    xl: {
-        vars: {
-            [vars.height]: sizes.xl
-        }
-    }
-});
+import {
+    createVar,
+    globalStyle,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+const sizes = {
+    xs: '16px',
+    sm: '18px',
+    md: '20px',
+    lg: '22px',
+    xl: '24px'
+};
+
+export const vars = {
+    height: createVar(),
+    radius: createVar(),
+    backgroundColor: createVar(),
+    borderColor: createVar(),
+    color: createVar()
+};
+
+export const base = style({
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    gap: themeVars.space['1.5']
+});
+
+export const checkbox = style({
+    vars: {
+        [vars.height]: sizes.sm,
+        [vars.radius]: '4px',
+        [vars.backgroundColor]: 'white',
+        [vars.borderColor]: themeVars.color.gray[300],
+        [vars.color]: 'white'
+    },
+    position: 'relative',
+    width: vars.height,
+    height: vars.height,
+    borderRadius: vars.radius,
+    border: `1px solid ${vars.borderColor}`,
+    color: vars.color,
+    cursor: 'pointer',
+    transition: `all 0.125s ${themeVars.transition.default}`,
+    backgroundColor: 'currentColor',
+
+    appearance: 'none',
+    backgroundOrigin: 'border-box',
+    display: 'inline-block',
+    flexShrink: 0,
+    userSelect: 'none',
+    outline: 'none',
+
+    selectors: {
+        ['&:focus']: {
+            vars: {
+                [vars.borderColor]: themeVars.color.blue[500],
+                [vars.color]: '#FFF'
+            },
+            boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
+        },
+        ['&:checked']: {
+            vars: {
+                [vars.borderColor]: themeVars.color.blue[500],
+                [vars.color]: themeVars.color.blue[500]
+            },
+            backgroundColor: 'currentcolor',
+            backgroundPosition: '50%',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: '100% 100%',
+            borderColor: 'transparent',
+            color: vars.color,
+            backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")`
+        },
+        ['&:checked:focus']: {
+            vars: {
+                [vars.borderColor]: themeVars.color.blue[500],
+                [vars.color]: themeVars.color.blue[500]
+            },
+            color: vars.color
+        },
+        ['&:indeterminate']: {
+            vars: {
+                [vars.borderColor]: themeVars.color.blue[500],
+                [vars.color]: themeVars.color.blue[500]
+            },
+            backgroundColor: 'currentcolor',
+            backgroundPosition: '50%',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: '100% 100%',
+            borderColor: 'transparent',
+            color: vars.color,
+            backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E")`
+        },
+        ['&:hover']: {
+            vars: {
+                [vars.borderColor]: themeVars.color.gray[400]
+            }
+        },
+        ['&:disabled']: {
+            vars: {
+                [vars.borderColor]: themeVars.color.gray[300],
+                [vars.color]: themeVars.color.gray[200]
+            },
+            cursor: 'not-allowed'
+        },
+        ['&:disabled:checked']: {
+            vars: {
+                [vars.borderColor]: themeVars.color.gray[400],
+                [vars.color]: themeVars.color.gray[400]
+            },
+            color: vars.color
+        },
+    }
+});
+
+export const helpMessage = style({
+    display: 'block',
+    textDecoration: 'none',
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.gray[600],
+    wordBreak: 'break-word',
+    marginTop: themeVars.space[1.5],
+    marginLeft: `calc(${themeVars.space["8"]} + ${themeVars.space["1.5"]})`
+});
+
+export const disabled = style({
+    opacity: 0.5,
+    cursor: 'not-allowed'
+});
+
+export const indeterminate = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.blue[500],
+        [vars.backgroundColor]: themeVars.color.blue[500]
+    }
+});
+
+export const label = style({
+    marginLeft: themeVars.space['0.5'],
+    fontWeight: '500',
+    display: 'inline-block',
+    fontSize: themeVars.fontSize.base,
+    wordBreak: 'break-word',
+    cursor: 'pointer'
+});
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.height]: sizes.xs
+        }
+    },
+    sm: {
+        vars: {
+            [vars.height]: sizes.sm
+        }
+    },
+    md: {
+        vars: {
+            [vars.height]: sizes.md
+        }
+    },
+    lg: {
+        vars: {
+            [vars.height]: sizes.lg
+        }
+    },
+    xl: {
+        vars: {
+            [vars.height]: sizes.xl
+        }
+    }
+});

package/src/components/checkbox/style/index.ts

@@ -1 +1 @@
-export * from './Checkbox.css';
+export * from './Checkbox.css';