sposchedule

1
export default {
2
  root: {
3
    class: [
4
      // Sizing and Shape
5
      'min-w-[12.5rem]',
6
      'rounded-md',
7

8
      // Spacing
9
      'p-1',
10

11
      // Colors
12
      'bg-surface-0 dark:bg-surface-900',
13
      'text-surface-700 dark:text-white/80',
14
      'border border-surface-200 dark:border-surface-700',
15
    ],
16
  },
17
  list: {
18
    class: [
19
      // Spacings and Shape
20
      'list-none',
21
      'm-0',
22
      'p-0',
23
      'outline-none',
24
    ],
25
  },
26
  item: {
27
    class: 'relative my-[2px] [&:first-child]:mt-0',
28
  },
29
  itemContent: ({ context }) => ({
30
    class: [
31
      //Shape
32
      'rounded-[4px]',
33

34
      // Colors
35
      'text-surface-700 dark:text-white/80',
36
      {
37
        'text-surface-500 dark:text-white/70':
38
          !context.focused && !context.active,
39
        'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-800':
40
          context.focused && !context.active,
41
        'bg-highlight':
42
          (context.focused && context.active) ||
43
          context.active ||
44
          (!context.focused && context.active),
45
      },
46

47
      // Transitions
48
      'transition-shadow',
49
      'duration-200',
50

51
      // States
52
      {
53
        'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
54
          !context.active,
55
        'hover:bg-highlight-emphasis': context.active,
56
      },
57

58
      // Disabled
59
      { 'opacity-60 pointer-events-none cursor-default': context.disabled },
60
    ],
61
  }),
62
  itemLink: {
63
    class: [
64
      'relative',
65
      // Flexbox
66

67
      'flex',
68
      'items-center',
69

70
      // Spacing
71
      'py-2',
72
      'px-3',
73

74
      // Color
75
      'text-surface-700 dark:text-white/80',
76

77
      // Misc
78
      'no-underline',
79
      'overflow-hidden',
80
      'cursor-pointer',
81
      'select-none',
82
    ],
83
  },
84
  itemIcon: {
85
    class: [
86
      // Spacing
87
      'mr-2',
88

89
      // Color
90
      'text-surface-600 dark:text-white/70',
91
    ],
92
  },
93
  itemLabel: {
94
    class: ['leading-[normal]'],
95
  },
96
  submenuLabel: {
97
    class: [
98
      // Font
99
      'font-bold',
100

101
      // Spacing
102
      'm-0',
103
      'py-2 px-3',
104

105
      // Shape
106
      'rounded-tl-none',
107
      'rounded-tr-none',
108

109
      // Colors
110
      'bg-surface-0 dark:bg-surface-900',
111
      'text-surface-400 dark:text-surface-600',
112
    ],
113
  },
114
  transition: {
115
    enterFromClass: 'opacity-0 scale-y-[0.8]',
116
    enterActiveClass:
117
      'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
118
    leaveActiveClass: 'transition-opacity duration-100 ease-linear',
119
    leaveToClass: 'opacity-0',
120
  },
121
};
122