utils/vara-ui/src/components/checkbox/checkbox.stories.ts

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+
 import { Checkbox } from './checkbox';
 
 type Type = typeof Checkbox;
@@ -23,6 +24,7 @@ const meta: Meta<Type> = {
       options: ['checkbox', 'switch'],
       control: { type: 'select' },
     },
+    error: { control: 'text' },
   },
 };
 

utils/vara-ui/src/components/checkbox/checkbox.tsx

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, forwardRef } from 'react';
+import { InputHTMLAttributes, ReactNode, forwardRef } from 'react';
 import cx from 'clsx';
 
 import styles from './checkbox.module.scss';
@@ -7,7 +7,7 @@ type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
   label: string;
   type?: 'switch' | 'checkbox';
   size?: 'small' | 'default';
-  error?: string;
+  error?: ReactNode;
 };
 
 const Checkbox = forwardRef<HTMLInputElement, Props>(

utils/vara-ui/src/components/modal/modal.module.scss

@@ -1,3 +1,35 @@
+@use '../../utils.scss' as *;
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    transform: scale(0.9);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
 .customScroll {
   /* TODO: same as in gear-js/ui  */
   /* TODO: temp solution specifically for modal,
@@ -38,15 +70,19 @@
   position: fixed;
   top: 0;
   left: 0;
+  z-index: 10;
+
   width: 100%;
   height: 100%;
+  padding: 0 32px;
+
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0 32px;
+
   background-color: rgba(0, 0, 0, 0.2);
-  backdrop-filter: blur(10px);
-  z-index: 10;
+  backdrop-filter: blur(20px);
+  animation: fadeIn 0.25s ease;
 
   @media screen and (max-width: 768px) {
     padding: 0;
@@ -56,22 +92,31 @@
 }
 
 .modal {
+  @include lightDark(background-color, #fff, #262628);
+
   display: flex;
   flex-direction: column;
   gap: 20px;
+
   width: 100%;
-  padding: 30px 0;
-  background-color: rgba(246, 248, 248, 1);
-  border-radius: 4px;
+  max-width: var(--max-width);
+  padding: 32px 0;
+
+  border-radius: 8px;
   filter: drop-shadow(0px 4px 4px #00000011);
+  animation-name: fadeIn, scaleIn;
+  animation-duration: 0.25s;
+  animation-timing-function: ease;
 
   @media screen and (max-width: 768px) {
     max-width: unset;
+    border-radius: 8px 8px 0 0;
+    animation-name: fadeIn, slideIn;
   }
 
   > * {
     /* applying x-padding to every child, to preserve body scrollbar padding */
-    padding: 0 32px;
+    padding: 0 40px;
 
     @media screen and (max-width: 768px) {
       padding: 0 16px;
@@ -85,12 +130,11 @@
 }
 
 .heading {
-  font-size: 24px;
-  font-weight: 500;
-  line-height: 24px;
-  letter-spacing: 0;
+  @include lightDark(color, #000, rgba(246, 246, 246, 0.9));
 
-  color: #000;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 28.8px;
 
   &Container {
     margin-right: 16px;
@@ -101,14 +145,24 @@
   }
 }
 
+.button svg {
+  width: 20px;
+  height: 20px;
+}
+
+.body,
+.footer {
+  @include lightDark(color, #000, rgba(246, 246, 246, 0.8));
+}
+
 .small {
-  max-width: 460px;
+  --max-width: 460px;
 }
 
 .medium {
-  max-width: 560px;
+  --max-width: 560px;
 }
 
 .large {
-  max-width: 660px;
+  --max-width: 660px;
 }

utils/vara-ui/src/components/modal/modal.tsx

@@ -74,7 +74,7 @@ const Modal = ({ heading, close, children, className, headerAddon, footer, maxWi
         </header>
 
         {children && (
-          <div className={cx(styles.customScroll, className)} style={bodyStyle} ref={bodyRef}>
+          <div className={cx(styles.body, styles.customScroll, className)} style={bodyStyle} ref={bodyRef}>
             {children}
           </div>
         )}

utils/vara-ui/src/components/radio/radio.module.scss

@@ -1,24 +1,91 @@
+@use '../../utils.scss' as *;
+
 .label {
+  @include lightDark(color, #000, #fff);
+
   display: flex;
   align-items: center;
   cursor: pointer;
 
-  &.disabled {
+  font-size: var(--font-size);
+  font-weight: 400;
+  line-height: var(--line-height);
+
+  &:has(:disabled) {
     pointer-events: none;
-    opacity: 0.3;
   }
 }
 
 .input {
   appearance: none;
   cursor: inherit;
-  margin: 0 10px 0 0;
+  margin: 0;
+}
+
+.box {
+  @include lightDark(background-color, transparent, rgba(255, 255, 255, 0.03));
+  @include lightDark(--border-color, #d0d5dd, rgba(255, 255, 255, 0.04));
+  @include lightDark(--checked-color, #0ed3a3, #00ffc4);
+  @include lightDark(--error-color, rgba(255, 50, 49, 0.8), #d73b4f);
+  @include lightDark(--disabled-color, #eceded, rgba(40, 44, 48, 0.1));
+
+  width: var(--size);
+  height: var(--size);
+  margin-right: 10px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border: 1px solid var(--border-color);
+  border-radius: 50%;
+
+  transition: background-color 0.25s ease, border-color 0.25s ease;
+
+  &::before {
+    content: '';
+
+    width: 7px;
+    height: 7px;
 
-  width: 15px;
-  height: 15px;
-  background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7.5' cy='7.5' r='7' stroke='%23909090'/%3E%3C/svg%3E");
+    border-radius: 50%;
 
-  &:checked {
-    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7.5' cy='7.5' r='3.5' fill='%230ED3A3'/%3E%3Ccircle cx='7.5' cy='7.5' r='7' stroke='%230ED3A3'/%3E%3C/svg%3E");
+    transition: background-color 0.25s ease;
+
+    .input:not(:disabled):checked + & {
+      background-color: var(--checked-color);
+    }
+
+    .input:not(:disabled):checked[aria-invalid='true'] + & {
+      background-color: var(--error-color);
+    }
+
+    .input:disabled:checked + & {
+      background-color: var(--border-color);
+    }
+  }
+
+  .input:not(:disabled):checked + & {
+    border-color: var(--checked-color);
+  }
+
+  .input:not(:disabled)[aria-invalid='true'] + & {
+    border-color: var(--error-color);
   }
+
+  .input:disabled:not(:checked) + & {
+    background-color: var(--disabled-color);
+  }
+}
+
+.small {
+  --size: 15px;
+  --font-size: 12px;
+  --line-height: 22px;
+}
+
+.default {
+  --size: 18px;
+  --font-size: 14px;
+  --line-height: 24px;
 }

utils/vara-ui/src/components/radio/radio.stories.ts

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+
 import { Radio } from './radio';
 
 type Type = typeof Radio;
@@ -7,7 +8,19 @@ type Story = StoryObj<Type>;
 const meta: Meta<Type> = {
   title: 'Radio',
   component: Radio,
-  args: { label: 'Label' },
+  args: {
+    label: 'Label',
+    disabled: false,
+    error: undefined,
+  },
+  argTypes: {
+    size: {
+      options: ['small', 'default'],
+      control: { type: 'select' },
+    },
+    disabled: { control: 'boolean' },
+    error: { control: 'text' },
+  },
 };
 
 const Default: Story = {

utils/vara-ui/src/components/radio/radio.tsx

@@ -1,17 +1,19 @@
-import { InputHTMLAttributes, forwardRef } from 'react';
+import { InputHTMLAttributes, ReactNode, forwardRef } from 'react';
 import cx from 'clsx';
+
 import styles from './radio.module.scss';
 
-type Props = InputHTMLAttributes<HTMLInputElement> & {
+type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
   label: string;
+  size?: 'small' | 'default';
+  error?: ReactNode;
 };
 
-const Radio = forwardRef<HTMLInputElement, Props>(({ label, className, ...attrs }, ref) => {
-  const { disabled } = attrs;
-
+const Radio = forwardRef<HTMLInputElement, Props>(({ label, className, size = 'default', error, ...attrs }, ref) => {
   return (
-    <label className={cx(styles.label, className, disabled && styles.disabled)}>
-      <input type="radio" className={styles.input} ref={ref} {...attrs} />
+    <label className={cx(styles.label, className, styles[size])}>
+      <input type="radio" className={styles.input} ref={ref} aria-invalid={Boolean(error)} {...attrs} />
+      <span className={styles.box} />
 
       {label}
     </label>