V2 integration (#293)

* feat: integrations and lifecycles

* refactor: prevent issues with start order

apps/client/src/theme/_v2Styles.scss

@@ -35,6 +35,8 @@ $bg-container-onlight: $gray-100;
 $box-shadow-l1: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
 $box-shadow-l2: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
 
+$modal-note-color: $gray-700;
+
 // interface elements
 $border-color-ondark: $white-10;
 $element-inner-spacing: 4px;

apps/client/src/theme/ontimeButton.ts

@@ -1,17 +1,13 @@
-const commonStyles = {
-  letterSpacing: '0.3px',
-  fontWeight: '400',
-  borderRadius: '3px',
-};
-
 export const ontimeButtonFilled = {
-  ...commonStyles,
   background: '#2B5ABC', // $blue-700
   color: '#fff', // pure-white
   border: '1px solid #2B5ABC', // $blue-700
   _hover: {
     backgroundColor: '#0A43B9', // $blue-800
     border: '1px solid #0A43B9', // $blue-800
+    _disabled: {
+      background: '#2B5ABC', // $blue-700
+    },
   },
   _active: {
     backgroundColor: '#0036A6', // blue-900
@@ -20,7 +16,6 @@ export const ontimeButtonFilled = {
 };
 
 export const ontimeButtonOutlined = {
-  ...commonStyles,
   backgroundColor: '#2d2d2d', // $gray-1100
   color: '#e2e2e2', // $blue-400
   border: '1px solid rgba(255, 255, 255, 0.10)', // white-10
@@ -34,7 +29,6 @@ export const ontimeButtonOutlined = {
 };
 
 export const ontimeButtonSubtle = {
-  ...commonStyles,
   backgroundColor: '#303030', // $gray-1050
   color: '#779BE7', // $blue-400
   border: '1px solid transparent',
@@ -47,6 +41,32 @@ export const ontimeButtonSubtle = {
   },
 };
 
+export const ontimeButtonSubtleOnLight = {
+  backgroundColor: '#ececec', // $gray-100
+  color: '#595959', // $gray-800
+  border: '1px solid transparent',
+  _hover: {
+    backgroundColor: '#cfcfcf', // $gray-200
+  },
+  _active: {
+    backgroundColor: '#ececec', // $gray-200
+    borderColor: '#ececec', // $gray-300
+  },
+};
+
+export const ontimeGhostOnLight = {
+  backgroundColor: 'transparent',
+  color: '#595959', // $gray-800
+  _hover: {
+    color: '#595959', // $gray-800
+    backgroundColor: '#ececec', // $gray-200
+  },
+  _active: {
+    backgroundColor: 'transparent',
+    borderColor: '#595959', // $gray-800
+  },
+};
+
 export const ontimeButtonSubtleWhite = {
   ...ontimeButtonSubtle,
   color: '#f6f6f6', // $gray-50

apps/client/src/theme/ontimeModal.ts

@@ -0,0 +1,20 @@
+export const ontimeModal = {
+  header: {
+    fontWeight: 400,
+    letterSpacing: '0.3px',
+    padding: '8px 16px',
+    fontSize: '20px',
+    color: '#202020', // $gray-50
+  },
+  dialog: {
+    borderRadius: '3px',
+    padding: 0,
+    minHeight: 'min(500px, 75vh)',
+  },
+  body: {
+    padding: 0,
+  },
+  closeButton: {
+    color: '#202020', // $gray-50
+  },
+};

apps/client/src/theme/ontimeSwitch.ts

@@ -1,5 +1,4 @@
 export const ontimeSwitch = {
-  container: {  },
   track: {
     background: '#2d2d2d', // $gray-1100
     border: '1px solid transparent',
@@ -8,7 +7,19 @@ export const ontimeSwitch = {
     },
     _focus: {
       border: '1px solid #578AF4', // $blue-500
-    }
+    },
+  },
+};
+
+export const lightSwitch = {
+  track: {
+    border: '2px solid transparent',
+    background: '#cfcfcf', // $gray-300
+    _checked: {
+      background: `#578AF4`, // $blue-500
+    },
+    _focus: {
+      border: '2px solid #D2DDFF', // $blue-200
+    },
   },
-  thumb: {},
 };

apps/client/src/theme/ontimeTab.ts

@@ -0,0 +1,16 @@
+export const ontimeTab = {
+  tab: {
+    fontWeight: 600,
+    borderBottom: '2px solid transparent',
+    color: '#9d9d9d', // $gray-500
+    marginBottom: '-2px',
+    _selected: {
+      color: '#101010', // $ui-black
+      border: 'none',
+      borderBottom: '2px solid #779BE7', // $blue-400
+    },
+  },
+  tablist: {
+    borderBottom: '2px solid #ececec', // $gray-100
+  },
+};

apps/client/src/theme/theme.ts

@@ -4,24 +4,26 @@ import {
   ontimeButtonFilled,
   ontimeButtonOutlined,
   ontimeButtonSubtle,
+  ontimeButtonSubtleOnLight,
   ontimeButtonSubtleWhite,
+  ontimeGhostOnLight,
 } from './ontimeButton';
 import { ontimeCheckboxOnDark } from './ontimeCheckbox';
 import { ontimeEditable } from './ontimeEditable';
 import { ontimeMenuOnDark } from './ontimeMenu';
+import { ontimeModal } from './ontimeModal';
 import { ontimeSelect } from './ontimeSelect';
-import { ontimeSwitch } from './ontimeSwitch';
-import {
-  ontimeInputFilled,
-  ontimeTextAreaFilled,
-  ontimeTextAreaFilledOnLight,
-} from './ontimeTextInputs';
+import { lightSwitch, ontimeSwitch } from './ontimeSwitch';
+import { ontimeTab } from './ontimeTab';
+import { ontimeInputFilled, ontimeTextAreaFilled, ontimeTextAreaFilledOnLight } from './ontimeTextInputs';
 import { ontimeTooltip } from './ontimeTooltip';
 
 const theme = extendTheme({
   components: {
     Button: {
       baseStyle: {
+        letterSpacing: '0.3px',
+        fontWeight: '400',
         borderRadius: '3px',
       },
       variants: {
@@ -29,6 +31,8 @@ const theme = extendTheme({
         'ontime-outlined': { ...ontimeButtonOutlined },
         'ontime-subtle': { ...ontimeButtonSubtle },
         'ontime-subtle-white': { ...ontimeButtonSubtleWhite },
+        'ontime-subtle-on-light': { ...ontimeButtonSubtleOnLight },
+        'ontime-ghost-on-light': { ...ontimeGhostOnLight },
       },
     },
     Checkbox: {
@@ -38,7 +42,7 @@ const theme = extendTheme({
     },
     Editable: {
       variants: {
-        'ontime': { ...ontimeEditable },
+        ontime: { ...ontimeEditable },
       },
     },
     Input: {
@@ -50,6 +54,16 @@ const theme = extendTheme({
         'ontime-filled': { ...ontimeInputFilled },
       },
     },
+    Modal: {
+      variants: {
+        ontime: { ...ontimeModal },
+      },
+    },
+    Tabs: {
+      variants: {
+        ontime: { ...ontimeTab },
+      },
+    },
     Textarea: {
       baseStyle: {
         borderRadius: '3px',
@@ -60,16 +74,17 @@ const theme = extendTheme({
       },
     },
     Tooltip: {
-      baseStyle: { ...ontimeTooltip},
+      baseStyle: { ...ontimeTooltip },
     },
     Switch: {
       variants: {
-        'ontime': { ...ontimeSwitch },
+        ontime: { ...ontimeSwitch },
+        'ontime-on-light': { ...lightSwitch },
       },
     },
     Select: {
       variants: {
-        'ontime': { ...ontimeSelect },
+        ontime: { ...ontimeSelect },
       },
     },
     Menu: {