misc

theme/components/Input.ts

@@ -69,7 +69,7 @@ const variantOutline = definePartsStyle((props) => {
     addon: {
       border: '2px solid',
       borderColor: 'transparent',
-      bg: mode('blackAlpha.300', 'whiteAlpha.200')(props),
+      bg: mode('blackAlpha.100', 'whiteAlpha.200')(props),
       color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
       ...transitionProps,
     },

theme/components/Menu.ts

@@ -5,6 +5,8 @@ import {
   defineStyle,
 } from '@chakra-ui/styled-system';
 
+import luxColors from 'theme/foundations/lux-colors';
+
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
@@ -15,7 +17,7 @@ const baseStyleList = defineStyle({
   [$bg.variable]: '#fff',
   [$shadow.variable]: 'shadows.2xl',
   _dark: {
-    [$bg.variable]: 'colors.gray.900',
+    [$bg.variable]: luxColors.colors.muted, //'colors.gray.900',
     [$shadow.variable]: 'shadows.dark-lg',
   },
   borderWidth: '0',
@@ -36,7 +38,7 @@ const baseStyleItem = defineStyle({
       [$bg.variable]: 'colors.whiteAlpha.100',
     },
   },
-  bg: $bg.reference,
+  bg: luxColors.colors.level1,
 });
 
 const baseStyle = definePartsStyle({

theme/foundations/semanticTokens.ts

@@ -3,16 +3,16 @@ import luxColors from './lux-colors';
 const semanticTokens = {
   colors: {
     divider: {
-      'default': 'blackAlpha.200',
-      _dark: 'whiteAlpha.200',
+      'default': luxColors.colors.muted4,
+      _dark: luxColors.colors.muted4,
     },
     text: {
-      'default': 'blackAlpha.800',
-      _dark: 'whiteAlpha.800',
+      'default': luxColors.colors.foreground,
+      _dark: luxColors.colors.foreground,
     },
     text_secondary: {
-      'default': 'gray.500',
-      _dark: 'gray.400',
+      'default': luxColors.colors.muted,
+      _dark: luxColors.colors.muted,
     },
     link: {
       'default': luxColors.colors.muted2,

theme/utils/getOutlinedFieldStyles.ts

@@ -1,6 +1,8 @@
 import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
 import { mode } from '@chakra-ui/theme-tools';
 
+import luxColors from 'theme/foundations/lux-colors';
+
 import getDefaultTransitionProps from './getDefaultTransitionProps';
 import getFormStyles from './getFormStyles';
 
@@ -47,6 +49,7 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
       ...formStyles.input.focus,
       zIndex: 1,
       boxShadow: 'md',
+      color: luxColors.colors.muted2,
     },
     _placeholder: {
       color: formStyles.placeholder.default.color,