sposchedule

1
export default {
2
  root: ({ props }) => ({
3
    class: [
4
      // Spacing and Shape
5
      'rounded-md',
6
      'outline',
7

8
      // Colors
9
      {
10
        'bg-blue-100/70 dark:bg-blue-500/20': props.severity == 'info',
11
        'bg-green-100/70 dark:bg-green-500/20': props.severity == 'success',
12
        'bg-surface-100/70 dark:bg-surface-500/20':
13
          props.severity == 'secondary',
14
        'bg-orange-100/70 dark:bg-orange-500/20': props.severity == 'warn',
15
        'bg-red-100/70 dark:bg-red-500/20': props.severity == 'error',
16
        'bg-surface-950 dark:bg-surface-0': props.severity == 'contrast',
17
      },
18
      {
19
        'outline-blue-200 dark:outline-blue-500/20': props.severity == 'info',
20
        'outline-green-200 dark:outline-green-500/20':
21
          props.severity == 'success',
22
        'outline-surface-200 dark:outline-surface-500/20':
23
          props.severity == 'secondary',
24
        'outline-orange-200 dark:outline-orange-500/20':
25
          props.severity == 'warn',
26
        'outline-red-200 dark:outline-red-500/20': props.severity == 'error',
27
        'outline-surface-950 dark:outline-surface-0':
28
          props.severity == 'contrast',
29
      },
30
      {
31
        'text-blue-700 dark:text-blue-300': props.severity == 'info',
32
        'text-green-700 dark:text-green-300': props.severity == 'success',
33
        'text-surface-700 dark:text-surface-300': props.severity == 'secondary',
34
        'text-orange-700 dark:text-orange-300': props.severity == 'warn',
35
        'text-red-700 dark:text-red-300': props.severity == 'error',
36
        'text-surface-0 dark:text-surface-950': props.severity == 'contrast',
37
      },
38
    ],
39
  }),
40
  content: {
41
    class: [
42
      // Flexbox
43
      'flex items-center h-full',
44

45
      // Spacing
46
      'py-2 px-3 gap-2',
47
    ],
48
  },
49
  icon: {
50
    class: [
51
      // Sizing and Spacing
52
      'shrink-0 w-[1.125rem] h-[1.125rem]',
53
    ],
54
  },
55
  text: {
56
    class: [
57
      // Font and Text
58
      'text-base leading-[normal]',
59
      'font-medium',
60
    ],
61
  },
62
  closeButton: ({ props }) => ({
63
    class: [
64
      // Flexbox
65
      'flex items-center justify-center',
66

67
      // Size
68
      'w-7 h-7',
69

70
      // Spacing and Misc
71
      'ml-auto relative',
72

73
      // Shape
74
      'rounded-full',
75

76
      // Colors
77
      'bg-transparent',
78

79
      // Transitions
80
      'transition duration-200 ease-in-out',
81

82
      // States
83
      'hover:bg-surface-0/30 dark:hover:bg-[rgba(255,255,255,0.03)]',
84
      'focus:outline-none focus:outline-offset-0 focus:ring-1',
85
      {
86
        'focus:ring-blue-500 dark:focus:ring-blue-400':
87
          props.severity == 'info',
88
        'focus:ring-green-500 dark:focus:ring-green-400':
89
          props.severity == 'success',
90
        'focus:ring-surface-500 dark:focus:ring-surface-400':
91
          props.severity == 'secondary',
92
        'focus:ring-orange-500 dark:focus:ring-orange-400':
93
          props.severity == 'warn',
94
        'focus:ring-red-500 dark:focus:ring-red-4000':
95
          props.severity == 'error',
96
        'focus:ring-surface-0 dark:focus:ring-surface-950':
97
          props.severity == 'contrast',
98
      },
99

100
      // Misc
101
      'overflow-hidden',
102
    ],
103
  }),
104
  transition: {
105
    enterFromClass: 'opacity-0',
106
    enterActiveClass: 'transition-opacity duration-300',
107
    leaveFromClass: 'max-h-40',
108
    leaveActiveClass: 'overflow-hidden transition-all duration-300 ease-in',
109
    leaveToClass: 'max-h-0 opacity-0 !m-0',
110
  },
111
};
112