@taruvi/navkit 0.0.11 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/src/App.styles.ts +1 -0
  3. package/src/components/AppLauncher/AppLauncher.styles.ts +3 -2
  4. package/src/components/Profile/Profile.styles.ts +3 -2
  5. package/src/components/Shortucts/ShortcutsMenu.styles.ts +3 -2
  6. package/src/styles/variables.ts +7 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@taruvi/navkit",
3
- "version": "0.0.11",
3
+ "version": "0.0.12",
4
4
  "main": "src/App.tsx",
5
5
  "type": "module",
6
6
  "scripts": {
package/src/App.styles.ts CHANGED
@@ -73,6 +73,7 @@ export const getAppStyles = (mode: ThemeMode) => {
73
73
  },
74
74
  toolbar: {
75
75
  backgroundColor: colors.bg.white,
76
+ boxShadow: ' 0px 0px 10px 2px rgba(0, 0, 0, 0.3)',
76
77
  },
77
78
  leftSection: {
78
79
  display: 'flex',
package/src/components/AppLauncher/AppLauncher.styles.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors } from '../../styles/variables'
1
+ import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors, getShadows } from '../../styles/variables'
2
2
  import type { ThemeMode } from '../../styles/variables'
3
3
 
4
4
  export const appLauncherStyles = {
@@ -61,6 +61,7 @@ export const appLauncherStyles = {
61
61
 
62
62
  export const getAppLauncherStyles = (mode: ThemeMode) => {
63
63
  const colors = getColors(mode)
64
+ const themeShadows = getShadows(mode)
64
65
  return {
65
66
  container: {
66
67
  position: 'absolute' as const,
@@ -70,7 +71,7 @@ export const getAppLauncherStyles = (mode: ThemeMode) => {
70
71
  maxWidth: '800px',
71
72
  maxHeight: { xs: 'calc(100vh - 80px)', md: '335px' },
72
73
  borderRadius: borderRadius.default,
73
- boxShadow: shadows.dropdown,
74
+ boxShadow: themeShadows.dropdown,
74
75
  p: spacing.lg,
75
76
  backgroundColor: colors.bg.white,
76
77
  zIndex: zIndex.overlay,
package/src/components/Profile/Profile.styles.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors } from '../../styles/variables'
1
+ import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors, getShadows } from '../../styles/variables'
2
2
  import type { ThemeMode } from '../../styles/variables'
3
3
 
4
4
  export const profileStyles = {
@@ -61,6 +61,7 @@ export const profileStyles = {
61
61
 
62
62
  export const getProfileStyles = (mode: ThemeMode) => {
63
63
  const colors = getColors(mode)
64
+ const themeShadows = getShadows(mode)
64
65
  return {
65
66
  container: {
66
67
  position: 'relative' as const,
@@ -93,7 +94,7 @@ export const getProfileStyles = (mode: ThemeMode) => {
93
94
  right: 0,
94
95
  width: 200,
95
96
  borderRadius: borderRadius.default,
96
- boxShadow: shadows.dropdown,
97
+ boxShadow: themeShadows.dropdown,
97
98
  backgroundColor: colors.bg.white,
98
99
  zIndex: zIndex.overlay,
99
100
  py: 1,
package/src/components/Shortucts/ShortcutsMenu.styles.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors } from '../../styles/variables'
1
+ import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors, getShadows } from '../../styles/variables'
2
2
  import type { ThemeMode } from '../../styles/variables'
3
3
 
4
4
  export const shortcutsMenuStyles = {
@@ -36,6 +36,7 @@ export const shortcutsMenuStyles = {
36
36
 
37
37
  export const getShortcutsMenuStyles = (mode: ThemeMode) => {
38
38
  const colors = getColors(mode)
39
+ const themeShadows = getShadows(mode)
39
40
  return {
40
41
  menu: {
41
42
  position: 'absolute' as const,
@@ -43,7 +44,7 @@ export const getShortcutsMenuStyles = (mode: ThemeMode) => {
43
44
  right: 0,
44
45
  width: 200,
45
46
  borderRadius: borderRadius.default,
46
- boxShadow: shadows.dropdown,
47
+ boxShadow: themeShadows.dropdown,
47
48
  backgroundColor: colors.bg.white,
48
49
  zIndex: zIndex.overlay,
49
50
  py: 1,
package/src/styles/variables.ts CHANGED
@@ -25,7 +25,7 @@ export const darkColors = {
25
25
  tertiary: '#9e9e9e',
26
26
  },
27
27
  bg: {
28
- white: '#1e1e1e',
28
+ white: '#111827',
29
29
  light: '#2d2d2d',
30
30
  avatar: '#424242',
31
31
  },
@@ -50,6 +50,12 @@ export const shadows = {
50
50
  dropdown: '0 4px 20px rgba(0,0,0,0.1)',
51
51
  }
52
52
 
53
+ export const getShadows = (mode: ThemeMode) => ({
54
+ dropdown: mode === 'dark'
55
+ ? '0 4px 20px rgba(255,255,255,0.1)'
56
+ : '0 4px 20px rgba(0,0,0,0.1)',
57
+ })
58
+
53
59
  export const borderRadius = {
54
60
  default: 2,
55
61
  }