feat: fix styles

riccardoperra · May 1, 2023 · c6ad783 · c6ad783
1 parent 89158dc
commit c6ad783
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 125 deletions.
diff --git a/apps/codeimage/src/components/PropertyEditor/controls/ColorPicker.tsx b/apps/codeimage/src/components/PropertyEditor/controls/ColorPicker.tsx
@@ -83,7 +83,7 @@ export function ColorPickerPopover(props: VoidProps<ColorPickerPopoverProps>) {
       <Show when={mode() === ColorPickerSelectionMode.color}>
         <FlexField size={'xs'}>
           <TextField
-            size={'xs'}
+            size={'sm'}
             value={internalColor()}
             onChange={value => props.onChange(value)}
           />
@@ -106,7 +106,7 @@ export function ColorPickerPopover(props: VoidProps<ColorPickerPopoverProps>) {
       <Show when={mode() === ColorPickerSelectionMode.gradient}>
         <FlexField size={'xs'}>
           <TextField
-            size={'xs'}
+            size={'sm'}
             value={internalColor()}
             onChange={value => props.onChange(value)}
           />

diff --git a/apps/codeimage/src/components/PropertyEditor/controls/CustomColorPicker.css.ts b/apps/codeimage/src/components/PropertyEditor/controls/CustomColorPicker.css.ts
@@ -1,4 +1,10 @@
-import {backgroundColorVar, textFieldStyles, themeVars} from '@codeimage/ui';
+import {
+  backgroundColorVar,
+  textFieldStyles,
+  themeVars,
+  withThemeMode,
+} from '@codeimage/ui';
+import {darkGrayScale} from '@codeimage/ui/themes/darkTheme';
 import {style} from '@vanilla-extract/css';
 import {recipe, RecipeVariants} from '@vanilla-extract/recipes';
 
@@ -52,6 +58,16 @@ export const colorItem = recipe({
 export const popover = style({
   maxWidth: 'initial',
   transition: `all 250ms ease-in-out`,
+  selectors: {
+    ...withThemeMode({
+      dark: {
+        background: darkGrayScale.gray1,
+      },
+      light: {
+        background: darkGrayScale.white,
+      },
+    }),
+  },
 });
 
 export type ColorPickerColorItemProps = RecipeVariants<typeof colorItem>;
diff --git a/apps/codeimage/src/components/PropertyEditor/controls/CustomColorPicker.tsx b/apps/codeimage/src/components/PropertyEditor/controls/CustomColorPicker.tsx
@@ -38,7 +38,7 @@ export function CustomColorPicker(props: CustomColorPickerProps) {
           />
         </As>
       </PopoverTrigger>
-      <PopoverContent title={''} class={styles.popover}>
+      <PopoverContent variant={'bordered'} class={styles.popover}>
         <DynamicSizedContainer>
           <Box
             display={'flex'}

diff --git a/apps/codeimage/src/components/PropertyEditor/controls/ImagePicker/ImagePicker.css.ts b/apps/codeimage/src/components/PropertyEditor/controls/ImagePicker/ImagePicker.css.ts
@@ -1,11 +1,12 @@
 import {themeVars, withThemeMode} from '@codeimage/ui';
 import {darkGrayScale} from '@codeimage/ui/themes/darkTheme';
+import {themeTokens} from '@codeui/kit';
 import {style} from '@vanilla-extract/css';
 
 export const imageGrid = style([
   {
     display: 'grid',
-    padding: themeVars.spacing['2'],
+    padding: themeTokens.spacing['2'],
     gridTemplateColumns: 'repeat(1, 1fr)',
     gap: themeVars.spacing[3],
     overflow: 'auto',
@@ -24,10 +25,10 @@ export const imagesCard = style([
   {
     backgroundColor: themeVars.dynamicColors.input.backgroundColor,
     width: '100%',
-    borderRadius: themeVars.borderRadius.xl,
-    padding: themeVars.spacing['5'],
-    paddingBottom: themeVars.spacing['2'],
-    boxShadow: themeVars.boxShadow.md,
+    borderRadius: themeTokens.radii.xl,
+    padding: themeTokens.spacing['3'],
+    paddingBottom: themeTokens.spacing['2'],
+    boxShadow: themeTokens.boxShadow.md,
     color: themeVars.dynamicColors.baseText,
     transition: 'background-color 0.2s ease-in-out',
     position: 'relative',
@@ -46,7 +47,7 @@ export const imagesCard = style([
         light: {
           backgroundColor: themeVars.backgroundColor.white,
           border: `1px solid ${themeVars.borderColor.default}`,
-          boxShadow: themeVars.boxShadow.default,
+          boxShadow: themeTokens.boxShadow.default,
         },
       }),
 
@@ -76,3 +77,9 @@ export const confirmButton = style({
   borderTopLeftRadius: 0,
   borderBottomLeftRadius: 0,
 });
+
+export const assetImagePreview = style([
+  {
+    borderRadius: themeTokens.radii.sm,
+  },
+]);
diff --git a/apps/codeimage/src/components/PropertyEditor/controls/ImagePicker/ImagePickerList.tsx b/apps/codeimage/src/components/PropertyEditor/controls/ImagePicker/ImagePickerList.tsx
@@ -80,6 +80,7 @@ function ImagePickerAssetImage(props: ImagePickerAssetImageProps) {
     <Suspense fallback={<SkeletonLine width={'100%'} height={'100%'} />}>
       <div style={{height: '90px'}}>
         <AssetsImage
+          class={styles.assetImagePreview}
           onLoad={props.onLoad}
           onError={props.onError}
           assetId={props.assetId}

diff --git a/apps/codeimage/src/index.tsx b/apps/codeimage/src/index.tsx
@@ -10,7 +10,6 @@ import {
   ThemeProviderProps,
 } from '@codeimage/ui';
 import '@codeimage/ui/themes/lightTheme';
-import {theme as themeClass} from '@codeui/kit';
 import {Router, useRoutes} from '@solidjs/router';
 import {snackbarHostAppStyleCss} from '@ui/snackbarHostAppStyle.css';
 import {setElementVars} from '@vanilla-extract/dynamic';
@@ -113,8 +112,6 @@ export function Bootstrap() {
     },
   ]);
 
-  document.documentElement.classList.add(themeClass);
-
   createEffect(
     on(mode, theme => {
       const scheme = document.querySelector('meta[name="theme-color"]');