@sk-web-gui/core 0.1.33 → 0.1.35

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 (35) hide show
  1. package/README.md +1 -1
  2. package/package.json +2 -2
  3. package/src/colors.js +116 -116
  4. package/src/components/accordion.js +46 -43
  5. package/src/components/alert.js +17 -17
  6. package/src/components/avatar.js +43 -43
  7. package/src/components/badge.js +25 -26
  8. package/src/components/breadcrumb.js +6 -6
  9. package/src/components/button-group.js +24 -24
  10. package/src/components/button.js +81 -85
  11. package/src/components/calendar.js +68 -67
  12. package/src/components/card.js +49 -50
  13. package/src/components/checkbox.js +49 -50
  14. package/src/components/code.js +5 -5
  15. package/src/components/cookie-consent.js +21 -21
  16. package/src/components/divider.js +6 -6
  17. package/src/components/dot.js +28 -28
  18. package/src/components/footer.js +7 -4
  19. package/src/components/forms.js +139 -146
  20. package/src/components/header.js +33 -35
  21. package/src/components/icon-button.js +2 -2
  22. package/src/components/icon.js +4 -4
  23. package/src/components/kbd.js +5 -5
  24. package/src/components/link.js +12 -12
  25. package/src/components/message.js +35 -35
  26. package/src/components/modal.js +21 -20
  27. package/src/components/notification.js +31 -31
  28. package/src/components/pagination.js +33 -34
  29. package/src/components/radio.js +55 -54
  30. package/src/components/switch.js +61 -64
  31. package/src/components/table.js +9 -9
  32. package/src/components/tag.js +40 -38
  33. package/src/components/user-menu.js +23 -23
  34. package/src/components/zebratable.js +59 -60
  35. package/src/index.js +109 -119
package/README.md CHANGED
@@ -2,4 +2,4 @@
2
2
 
3
3
  ```sh
4
4
  yarn add @sk-web-gui/core
5
- ```
5
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sk-web-gui/core",
3
- "version": "0.1.33",
3
+ "version": "0.1.35",
4
4
  "license": "MIT",
5
5
  "main": "src/index.js",
6
6
  "files": [
@@ -31,5 +31,5 @@
31
31
  "postcss-import": "^14.0.2",
32
32
  "tailwindcss": "^2.2.4"
33
33
  },
34
- "gitHead": "4dda41ef60bddb55cc4118e8ca226d0445d2471e"
34
+ "gitHead": "aa805b28878fb4a93340d14695314a0307869fb4"
35
35
  }
package/src/colors.js CHANGED
@@ -1,145 +1,145 @@
1
- const withOpacity = require("./with-opacity");
1
+ const withOpacity = require('./with-opacity');
2
2
 
3
3
  module.exports = {
4
4
  primary: {
5
- DEFAULT: withOpacity("--vc-colors-primary-DEFAULT"),
6
- dark: withOpacity("--vc-colors-primary-dark"),
7
- light: withOpacity("--vc-colors-primary-light"),
8
- active: withOpacity("--vc-colors-primary-active"),
9
- 50: withOpacity("--vc-colors-primary-DEFAULT"),
10
- 100: withOpacity("--vc-colors-primary-DEFAULT"),
11
- 200: withOpacity("--vc-colors-primary-DEFAULT"),
12
- 300: withOpacity("--vc-colors-primary-DEFAULT"),
13
- 400: withOpacity("--vc-colors-primary-DEFAULT"),
14
- 500: withOpacity("--vc-colors-primary-DEFAULT"),
15
- 600: withOpacity("--vc-colors-primary-DEFAULT"),
16
- 700: withOpacity("--vc-colors-primary-DEFAULT"),
17
- 800: withOpacity("--vc-colors-primary-DEFAULT"),
18
- 900: withOpacity("--vc-colors-primary-DEFAULT"),
5
+ DEFAULT: withOpacity('--vc-colors-primary-DEFAULT'),
6
+ dark: withOpacity('--vc-colors-primary-dark'),
7
+ light: withOpacity('--vc-colors-primary-light'),
8
+ active: withOpacity('--vc-colors-primary-active'),
9
+ 50: withOpacity('--vc-colors-primary-DEFAULT'),
10
+ 100: withOpacity('--vc-colors-primary-DEFAULT'),
11
+ 200: withOpacity('--vc-colors-primary-DEFAULT'),
12
+ 300: withOpacity('--vc-colors-primary-DEFAULT'),
13
+ 400: withOpacity('--vc-colors-primary-DEFAULT'),
14
+ 500: withOpacity('--vc-colors-primary-DEFAULT'),
15
+ 600: withOpacity('--vc-colors-primary-DEFAULT'),
16
+ 700: withOpacity('--vc-colors-primary-DEFAULT'),
17
+ 800: withOpacity('--vc-colors-primary-DEFAULT'),
18
+ 900: withOpacity('--vc-colors-primary-DEFAULT'),
19
19
  },
20
20
 
21
21
  secondary: {
22
- DEFAULT: withOpacity("--vc-colors-secondary-DEFAULT"),
23
- dark: withOpacity("--vc-colors-secondary-dark"),
24
- light: withOpacity("--vc-colors-secondary-light"),
25
- active: withOpacity("--vc-colors-secondary-active"),
26
- 50: withOpacity("--vc-colors-secondary-DEFAULT"),
27
- 100: withOpacity("--vc-colors-secondary-DEFAULT"),
28
- 200: withOpacity("--vc-colors-secondary-DEFAULT"),
29
- 300: withOpacity("--vc-colors-secondary-DEFAULT"),
30
- 400: withOpacity("--vc-colors-secondary-DEFAULT"),
31
- 500: withOpacity("--vc-colors-secondary-DEFAULT"),
32
- 600: withOpacity("--vc-colors-secondary-DEFAULT"),
33
- 700: withOpacity("--vc-colors-secondary-DEFAULT"),
34
- 800: withOpacity("--vc-colors-secondary-DEFAULT"),
35
- 900: withOpacity("--vc-colors-secondary-DEFAULT"),
22
+ DEFAULT: withOpacity('--vc-colors-secondary-DEFAULT'),
23
+ dark: withOpacity('--vc-colors-secondary-dark'),
24
+ light: withOpacity('--vc-colors-secondary-light'),
25
+ active: withOpacity('--vc-colors-secondary-active'),
26
+ 50: withOpacity('--vc-colors-secondary-DEFAULT'),
27
+ 100: withOpacity('--vc-colors-secondary-DEFAULT'),
28
+ 200: withOpacity('--vc-colors-secondary-DEFAULT'),
29
+ 300: withOpacity('--vc-colors-secondary-DEFAULT'),
30
+ 400: withOpacity('--vc-colors-secondary-DEFAULT'),
31
+ 500: withOpacity('--vc-colors-secondary-DEFAULT'),
32
+ 600: withOpacity('--vc-colors-secondary-DEFAULT'),
33
+ 700: withOpacity('--vc-colors-secondary-DEFAULT'),
34
+ 800: withOpacity('--vc-colors-secondary-DEFAULT'),
35
+ 900: withOpacity('--vc-colors-secondary-DEFAULT'),
36
36
  },
37
37
 
38
38
  success: {
39
- DEFAULT: withOpacity("--vc-colors-success-DEFAULT"),
40
- dark: withOpacity("--vc-colors-success-dark"),
41
- light: withOpacity("--vc-colors-success-light"),
42
- active: withOpacity("--vc-colors-success-active"),
43
- 50: withOpacity("--vc-colors-success-DEFAULT"),
44
- 100: withOpacity("--vc-colors-success-DEFAULT"),
45
- 200: withOpacity("--vc-colors-success-DEFAULT"),
46
- 300: withOpacity("--vc-colors-success-DEFAULT"),
47
- 400: withOpacity("--vc-colors-success-DEFAULT"),
48
- 500: withOpacity("--vc-colors-success-DEFAULT"),
49
- 600: withOpacity("--vc-colors-success-DEFAULT"),
50
- 700: withOpacity("--vc-colors-success-DEFAULT"),
51
- 800: withOpacity("--vc-colors-success-DEFAULT"),
52
- 900: withOpacity("--vc-colors-success-DEFAULT"),
39
+ DEFAULT: withOpacity('--vc-colors-success-DEFAULT'),
40
+ dark: withOpacity('--vc-colors-success-dark'),
41
+ light: withOpacity('--vc-colors-success-light'),
42
+ active: withOpacity('--vc-colors-success-active'),
43
+ 50: withOpacity('--vc-colors-success-DEFAULT'),
44
+ 100: withOpacity('--vc-colors-success-DEFAULT'),
45
+ 200: withOpacity('--vc-colors-success-DEFAULT'),
46
+ 300: withOpacity('--vc-colors-success-DEFAULT'),
47
+ 400: withOpacity('--vc-colors-success-DEFAULT'),
48
+ 500: withOpacity('--vc-colors-success-DEFAULT'),
49
+ 600: withOpacity('--vc-colors-success-DEFAULT'),
50
+ 700: withOpacity('--vc-colors-success-DEFAULT'),
51
+ 800: withOpacity('--vc-colors-success-DEFAULT'),
52
+ 900: withOpacity('--vc-colors-success-DEFAULT'),
53
53
  },
54
54
 
55
55
  info: {
56
- DEFAULT: withOpacity("--vc-colors-info-DEFAULT"),
57
- dark: withOpacity("--vc-colors-info-dark"),
58
- light: withOpacity("--vc-colors-info-light"),
59
- active: withOpacity("--vc-colors-info-active"),
60
- 50: withOpacity("--vc-colors-info-DEFAULT"),
61
- 100: withOpacity("--vc-colors-info-DEFAULT"),
62
- 200: withOpacity("--vc-colors-info-DEFAULT"),
63
- 300: withOpacity("--vc-colors-info-DEFAULT"),
64
- 400: withOpacity("--vc-colors-info-DEFAULT"),
65
- 500: withOpacity("--vc-colors-info-DEFAULT"),
66
- 600: withOpacity("--vc-colors-info-DEFAULT"),
67
- 700: withOpacity("--vc-colors-info-DEFAULT"),
68
- 800: withOpacity("--vc-colors-info-DEFAULT"),
69
- 900: withOpacity("--vc-colors-info-DEFAULT"),
56
+ DEFAULT: withOpacity('--vc-colors-info-DEFAULT'),
57
+ dark: withOpacity('--vc-colors-info-dark'),
58
+ light: withOpacity('--vc-colors-info-light'),
59
+ active: withOpacity('--vc-colors-info-active'),
60
+ 50: withOpacity('--vc-colors-info-DEFAULT'),
61
+ 100: withOpacity('--vc-colors-info-DEFAULT'),
62
+ 200: withOpacity('--vc-colors-info-DEFAULT'),
63
+ 300: withOpacity('--vc-colors-info-DEFAULT'),
64
+ 400: withOpacity('--vc-colors-info-DEFAULT'),
65
+ 500: withOpacity('--vc-colors-info-DEFAULT'),
66
+ 600: withOpacity('--vc-colors-info-DEFAULT'),
67
+ 700: withOpacity('--vc-colors-info-DEFAULT'),
68
+ 800: withOpacity('--vc-colors-info-DEFAULT'),
69
+ 900: withOpacity('--vc-colors-info-DEFAULT'),
70
70
  },
71
71
 
72
72
  warning: {
73
- DEFAULT: withOpacity("--vc-colors-warning-DEFAULT"),
74
- dark: withOpacity("--vc-colors-warning-dark"),
75
- light: withOpacity("--vc-colors-warning-light"),
76
- active: withOpacity("--vc-colors-warning-active"),
77
- 50: withOpacity("--vc-colors-warning-DEFAULT"),
78
- 100: withOpacity("--vc-colors-warning-DEFAULT"),
79
- 200: withOpacity("--vc-colors-warning-DEFAULT"),
80
- 300: withOpacity("--vc-colors-warning-DEFAULT"),
81
- 400: withOpacity("--vc-colors-warning-DEFAULT"),
82
- 500: withOpacity("--vc-colors-warning-DEFAULT"),
83
- 600: withOpacity("--vc-colors-warning-DEFAULT"),
84
- 700: withOpacity("--vc-colors-warning-DEFAULT"),
85
- 800: withOpacity("--vc-colors-warning-DEFAULT"),
86
- 900: withOpacity("--vc-colors-warning-DEFAULT"),
73
+ DEFAULT: withOpacity('--vc-colors-warning-DEFAULT'),
74
+ dark: withOpacity('--vc-colors-warning-dark'),
75
+ light: withOpacity('--vc-colors-warning-light'),
76
+ active: withOpacity('--vc-colors-warning-active'),
77
+ 50: withOpacity('--vc-colors-warning-DEFAULT'),
78
+ 100: withOpacity('--vc-colors-warning-DEFAULT'),
79
+ 200: withOpacity('--vc-colors-warning-DEFAULT'),
80
+ 300: withOpacity('--vc-colors-warning-DEFAULT'),
81
+ 400: withOpacity('--vc-colors-warning-DEFAULT'),
82
+ 500: withOpacity('--vc-colors-warning-DEFAULT'),
83
+ 600: withOpacity('--vc-colors-warning-DEFAULT'),
84
+ 700: withOpacity('--vc-colors-warning-DEFAULT'),
85
+ 800: withOpacity('--vc-colors-warning-DEFAULT'),
86
+ 900: withOpacity('--vc-colors-warning-DEFAULT'),
87
87
  },
88
88
 
89
89
  error: {
90
- DEFAULT: withOpacity("--vc-colors-error-DEFAULT"),
91
- dark: withOpacity("--vc-colors-error-dark"),
92
- light: withOpacity("--vc-colors-error-light"),
93
- active: withOpacity("--vc-colors-error-active"),
94
- 50: withOpacity("--vc-colors-error-DEFAULT"),
95
- 100: withOpacity("--vc-colors-error-DEFAULT"),
96
- 200: withOpacity("--vc-colors-error-DEFAULT"),
97
- 300: withOpacity("--vc-colors-error-DEFAULT"),
98
- 400: withOpacity("--vc-colors-error-DEFAULT"),
99
- 500: withOpacity("--vc-colors-error-DEFAULT"),
100
- 600: withOpacity("--vc-colors-error-DEFAULT"),
101
- 700: withOpacity("--vc-colors-error-DEFAULT"),
102
- 800: withOpacity("--vc-colors-error-DEFAULT"),
103
- 900: withOpacity("--vc-colors-error-DEFAULT"),
90
+ DEFAULT: withOpacity('--vc-colors-error-DEFAULT'),
91
+ dark: withOpacity('--vc-colors-error-dark'),
92
+ light: withOpacity('--vc-colors-error-light'),
93
+ active: withOpacity('--vc-colors-error-active'),
94
+ 50: withOpacity('--vc-colors-error-DEFAULT'),
95
+ 100: withOpacity('--vc-colors-error-DEFAULT'),
96
+ 200: withOpacity('--vc-colors-error-DEFAULT'),
97
+ 300: withOpacity('--vc-colors-error-DEFAULT'),
98
+ 400: withOpacity('--vc-colors-error-DEFAULT'),
99
+ 500: withOpacity('--vc-colors-error-DEFAULT'),
100
+ 600: withOpacity('--vc-colors-error-DEFAULT'),
101
+ 700: withOpacity('--vc-colors-error-DEFAULT'),
102
+ 800: withOpacity('--vc-colors-error-DEFAULT'),
103
+ 900: withOpacity('--vc-colors-error-DEFAULT'),
104
104
  },
105
105
 
106
106
  neutral: {
107
- DEFAULT: withOpacity("--vc-colors-neutral"),
108
- 50: withOpacity("--vc-colors-neutral-50"),
109
- 100: withOpacity("--vc-colors-neutral-100"),
110
- 200: withOpacity("--vc-colors-neutral-200"),
111
- 300: withOpacity("--vc-colors-neutral-300"),
112
- 400: withOpacity("--vc-colors-neutral-400"),
113
- 500: withOpacity("--vc-colors-neutral-500"),
114
- 600: withOpacity("--vc-colors-neutral-600"),
115
- 700: withOpacity("--vc-colors-neutral-700"),
116
- 800: withOpacity("--vc-colors-neutral-800"),
117
- 900: withOpacity("--vc-colors-neutral-900"),
107
+ DEFAULT: withOpacity('--vc-colors-neutral'),
108
+ 50: withOpacity('--vc-colors-neutral-50'),
109
+ 100: withOpacity('--vc-colors-neutral-100'),
110
+ 200: withOpacity('--vc-colors-neutral-200'),
111
+ 300: withOpacity('--vc-colors-neutral-300'),
112
+ 400: withOpacity('--vc-colors-neutral-400'),
113
+ 500: withOpacity('--vc-colors-neutral-500'),
114
+ 600: withOpacity('--vc-colors-neutral-600'),
115
+ 700: withOpacity('--vc-colors-neutral-700'),
116
+ 800: withOpacity('--vc-colors-neutral-800'),
117
+ 900: withOpacity('--vc-colors-neutral-900'),
118
118
  },
119
119
 
120
120
  whiteAlpha: {
121
- 50: "rgba(255, 255, 255, 0.04)",
122
- 100: "rgba(255, 255, 255, 0.06)",
123
- 200: "rgba(255, 255, 255, 0.08)",
124
- 300: "rgba(255, 255, 255, 0.16)",
125
- 400: "rgba(255, 255, 255, 0.24)",
126
- 500: "rgba(255, 255, 255, 0.36)",
127
- 600: "rgba(255, 255, 255, 0.48)",
128
- 700: "rgba(255, 255, 255, 0.64)",
129
- 800: "rgba(255, 255, 255, 0.80)",
130
- 900: "rgba(255, 255, 255, 0.92)",
121
+ 50: 'rgba(255, 255, 255, 0.04)',
122
+ 100: 'rgba(255, 255, 255, 0.06)',
123
+ 200: 'rgba(255, 255, 255, 0.08)',
124
+ 300: 'rgba(255, 255, 255, 0.16)',
125
+ 400: 'rgba(255, 255, 255, 0.24)',
126
+ 500: 'rgba(255, 255, 255, 0.36)',
127
+ 600: 'rgba(255, 255, 255, 0.48)',
128
+ 700: 'rgba(255, 255, 255, 0.64)',
129
+ 800: 'rgba(255, 255, 255, 0.80)',
130
+ 900: 'rgba(255, 255, 255, 0.92)',
131
131
  },
132
132
 
133
133
  blackAlpha: {
134
- 50: "rgba(0, 0, 0, 0.04)",
135
- 100: "rgba(0, 0, 0, 0.06)",
136
- 200: "rgba(0, 0, 0, 0.08)",
137
- 300: "rgba(0, 0, 0, 0.16)",
138
- 400: "rgba(0, 0, 0, 0.24)",
139
- 500: "rgba(0, 0, 0, 0.36)",
140
- 600: "rgba(0, 0, 0, 0.48)",
141
- 700: "rgba(0, 0, 0, 0.64)",
142
- 800: "rgba(0, 0, 0, 0.80)",
143
- 900: "rgba(0, 0, 0, 0.92)",
134
+ 50: 'rgba(0, 0, 0, 0.04)',
135
+ 100: 'rgba(0, 0, 0, 0.06)',
136
+ 200: 'rgba(0, 0, 0, 0.08)',
137
+ 300: 'rgba(0, 0, 0, 0.16)',
138
+ 400: 'rgba(0, 0, 0, 0.24)',
139
+ 500: 'rgba(0, 0, 0, 0.36)',
140
+ 600: 'rgba(0, 0, 0, 0.48)',
141
+ 700: 'rgba(0, 0, 0, 0.64)',
142
+ 800: 'rgba(0, 0, 0, 0.80)',
143
+ 900: 'rgba(0, 0, 0, 0.92)',
144
144
  },
145
145
  };
package/src/components/accordion.js CHANGED
@@ -1,84 +1,87 @@
1
1
  module.exports = Accordion = (colors) => ({
2
- ".accordion": {
3
- "&-header": {
4
- "@apply flex flex-col text-left": {},
2
+ '.accordion': {
3
+ '&-header': {
4
+ '@apply flex flex-col text-left': {},
5
5
 
6
6
  '[aria-expanded="true"] &': {
7
- "@apply bg-hover": {},
7
+ '@apply bg-hover': {},
8
8
  },
9
9
 
10
- "&-icon": {
11
- "@apply ml-auto !text-2xl": {},
10
+ '&-icon': {
11
+ '@apply ml-auto !text-2xl': {},
12
12
  },
13
13
  },
14
14
 
15
- "&-is-open &-header": {
16
- "@apply bg-hover": {},
15
+ '&-is-open &-header': {
16
+ '@apply bg-hover': {},
17
17
  },
18
18
 
19
- "&-toggle": {
20
- "@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-lg my-md": {},
21
- fontWeight: "bold",
19
+ '&-toggle': {
20
+ '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},
21
+ fontWeight: 'bold',
22
22
  //"@apply focus-visible:shadow shadow-lg": {},
23
- "&:focus-visible": {
24
- boxShadow: "0 0 0 0.4rem #fff!important",
25
- outline: "0",
23
+ '&:focus-visible': {
24
+ boxShadow: '0 0 0 0.4rem #fff!important',
25
+ outline: '0',
26
26
  //"@apply border-4": {},
27
27
  },
28
- ".accordion-subtitle": {
29
- "@apply m-0 text-sm font-normal": {},
28
+ '.accordion-title': {
29
+ '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},
30
+ },
31
+ '.accordion-subtitle': {
32
+ '@apply m-0 mr-md text-sm font-normal': {},
30
33
  },
31
34
  },
32
35
 
33
- "&-body": {
34
- "@apply h-0 overflow-hidden m-lg": {},
35
- transitionProperty: "visibility, height, padding, margin",
36
- transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
37
- transitionDuration: "180ms",
36
+ '&-body': {
37
+ '@apply h-0 overflow-hidden m-lg': {},
38
+ transitionProperty: 'visibility, height, padding, margin',
39
+ transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
40
+ transitionDuration: '180ms',
38
41
 
39
42
  '&[aria-hidden="true"], &[data-hidden="true"]': {
40
- "@apply my-0 invisible": {},
43
+ '@apply my-0 invisible': {},
41
44
  },
42
45
 
43
46
  '&[aria-hidden="false"], &[data-hidden="false"]': {
44
- "@apply block h-auto visible": {},
47
+ '@apply block h-auto visible': {},
45
48
  },
46
49
  },
47
50
 
48
- "&-solid": {
49
- "@apply border border-primary": {},
50
- ".accordion-header": {
51
- "@apply bg-primary text-white": {},
51
+ '&-solid': {
52
+ '@apply border border-primary': {},
53
+ '.accordion-header': {
54
+ '@apply bg-primary text-white': {},
52
55
 
53
56
  '[aria-expanded="true"] &': {
54
- "@apply bg-hover": {},
57
+ '@apply bg-hover': {},
55
58
  },
56
59
  },
57
60
  },
58
61
 
59
- "&-is-open": {
60
- "@apply border border-gray-stroke": {},
61
- "& .accordion-header": {
62
- "@apply bg-hover text-white": {},
62
+ '&-is-open': {
63
+ '@apply border border-gray-stroke': {},
64
+ '& .accordion-header': {
65
+ '@apply bg-hover text-white': {},
63
66
  },
64
67
  },
65
68
 
66
- "&-outline": {
67
- "@apply border border-gray-stroke": {},
68
- ".accordion-body": {
69
- "@apply mt-0": {},
69
+ '&-outline': {
70
+ '@apply border border-gray-stroke': {},
71
+ '.accordion-body': {
72
+ '@apply mt-0': {},
70
73
  },
71
- ".accordion-toggle": {
72
- "&:focus-visible": {
73
- boxShadow: "0 0 0 0.4rem #4b4b4b!important",
74
- outline: "0",
74
+ '.accordion-toggle': {
75
+ '&:focus-visible': {
76
+ boxShadow: '0 0 0 0.4rem #4b4b4b!important',
77
+ outline: '0',
75
78
  },
76
79
  },
77
- ".accordion-header": {
78
- "@apply bg-transparent text-body": {},
80
+ '.accordion-header': {
81
+ '@apply bg-transparent text-body': {},
79
82
 
80
83
  '[aria-expanded="true"] &': {
81
- "@apply bg-hover": {},
84
+ '@apply bg-hover': {},
82
85
  },
83
86
  },
84
87
  },
package/src/components/alert.js CHANGED
@@ -1,8 +1,8 @@
1
1
  function alertSubtle(colors) {
2
2
  return {
3
- ".alert-subtle": {
4
- "@apply border rounded-base": {},
5
- "@apply text-body": {},
3
+ '.alert-subtle': {
4
+ '@apply border rounded-base': {},
5
+ '@apply text-body': {},
6
6
 
7
7
  ...colors.reduce(
8
8
  (styles, color) => ({
@@ -11,8 +11,8 @@ function alertSubtle(colors) {
11
11
  [`@apply bg-${color}-50 border-${color}-500`]: {},
12
12
 
13
13
  [`@apply dark:text-${color}-300 dark:bg-${color}-500`]: {},
14
- "@apply dark:bg-opacity-15": {},
15
- "@apply dark:border-opacity-40": {},
14
+ '@apply dark:bg-opacity-15': {},
15
+ '@apply dark:border-opacity-40': {},
16
16
  },
17
17
  }),
18
18
  {}
@@ -23,9 +23,9 @@ function alertSubtle(colors) {
23
23
 
24
24
  function alertSolid(colors) {
25
25
  return {
26
- ".alert-solid": {
27
- "@apply border rounded-base": {},
28
- "@apply text-white": {},
26
+ '.alert-solid': {
27
+ '@apply border rounded-base': {},
28
+ '@apply text-white': {},
29
29
 
30
30
  ...colors.reduce(
31
31
  (styles, color) => ({
@@ -34,7 +34,7 @@ function alertSolid(colors) {
34
34
  [`@apply bg-${color}-500 border-${color}-700 border-opacity-20`]: {},
35
35
 
36
36
  [`@apply dark:bg-${color}-600 dark:border-${color}-500`]: {},
37
- "@apply dark:border-opacity-40": {},
37
+ '@apply dark:border-opacity-40': {},
38
38
  },
39
39
  }),
40
40
  {}
@@ -45,9 +45,9 @@ function alertSolid(colors) {
45
45
 
46
46
  function alertLeftAccent(colors) {
47
47
  return {
48
- ".alert-left-accent": {
49
- "@apply border-l-2 rounded-none": {},
50
- "@apply text-body": {},
48
+ '.alert-left-accent': {
49
+ '@apply border-l-2 rounded-none': {},
50
+ '@apply text-body': {},
51
51
 
52
52
  ...colors.reduce(
53
53
  (styles, color) => ({
@@ -66,9 +66,9 @@ function alertLeftAccent(colors) {
66
66
 
67
67
  function alertCloseButton(colors) {
68
68
  return {
69
- ".alert-close-button": {
70
- "@apply absolute right-4 cursor-base focus-visible:outline-none": {},
71
- "@apply text-neutral-600 hover:text-neutral-700": {},
69
+ '.alert-close-button': {
70
+ '@apply absolute right-4 cursor-base focus-visible:outline-none': {},
71
+ '@apply text-neutral-600 hover:text-neutral-700': {},
72
72
 
73
73
  ...colors.reduce(
74
74
  (styles, color) => ({
@@ -84,8 +84,8 @@ function alertCloseButton(colors) {
84
84
  }
85
85
 
86
86
  module.exports = Alert = (colors) => ({
87
- ".alert": {
88
- "@apply w-full flex items-center px-4 py-3 relative overflow-hidden text-sm": {},
87
+ '.alert': {
88
+ '@apply w-full flex items-center px-4 py-3 relative overflow-hidden text-sm': {},
89
89
  },
90
90
 
91
91
  // variants
package/src/components/avatar.js CHANGED
@@ -1,85 +1,85 @@
1
1
  module.exports = Avatar = () => ({
2
- ".avatar": {
3
- "@apply relative inline-flex items-center justify-center flex-shrink-0 align-top rounded-full": {},
4
- "@apply bg-neutral-300 text-neutral-800": {},
2
+ '.avatar': {
3
+ '@apply relative inline-flex items-center justify-center flex-shrink-0 align-top rounded-full': {},
4
+ '@apply bg-neutral-300 text-neutral-800': {},
5
5
  // dark colors
6
- "@apply dark:bg-neutral-600 dark:text-neutral-100": {},
6
+ '@apply dark:bg-neutral-600 dark:text-neutral-100': {},
7
7
 
8
- "&-2xs": {
9
- "@apply w-4 h-4": {},
8
+ '&-2xs': {
9
+ '@apply w-4 h-4': {},
10
10
  },
11
11
 
12
- "&-xs": {
13
- "@apply w-5 h-5": {},
12
+ '&-xs': {
13
+ '@apply w-5 h-5': {},
14
14
  },
15
15
 
16
- "&-sm": {
17
- "@apply w-6 h-6": {},
16
+ '&-sm': {
17
+ '@apply w-6 h-6': {},
18
18
  },
19
19
 
20
- "&-md": {
21
- "@apply w-7 h-7": {},
20
+ '&-md': {
21
+ '@apply w-7 h-7': {},
22
22
  },
23
23
 
24
- "&-lg": {
25
- "@apply w-8 h-8": {},
24
+ '&-lg': {
25
+ '@apply w-8 h-8': {},
26
26
  },
27
27
 
28
- "&-xl": {
29
- "@apply w-10 h-10": {},
28
+ '&-xl': {
29
+ '@apply w-10 h-10': {},
30
30
  },
31
31
 
32
- "&-2xl": {
33
- "@apply w-12 h-12": {},
32
+ '&-2xl': {
33
+ '@apply w-12 h-12': {},
34
34
  },
35
35
 
36
- "&-3xl": {
37
- "@apply w-16 h-16": {},
36
+ '&-3xl': {
37
+ '@apply w-16 h-16': {},
38
38
  },
39
39
  },
40
40
 
41
- ".avatar-bordered": {
42
- "@apply border-2 border-white": {},
43
- "@apply dark:border-neutral-800": {},
41
+ '.avatar-bordered': {
42
+ '@apply border-2 border-white': {},
43
+ '@apply dark:border-neutral-800': {},
44
44
  },
45
45
 
46
- ".avatar-name": {
47
- "@apply font-medium text-center uppercase": {},
46
+ '.avatar-name': {
47
+ '@apply font-medium text-center uppercase': {},
48
48
 
49
- "&-2xs": {
50
- "@apply w-4 h-4": {},
49
+ '&-2xs': {
50
+ '@apply w-4 h-4': {},
51
51
  },
52
52
 
53
- "&-xs": {
54
- "@apply w-5 h-5": {},
53
+ '&-xs': {
54
+ '@apply w-5 h-5': {},
55
55
  },
56
56
 
57
- "&-sm": {
58
- "@apply w-6 h-6": {},
57
+ '&-sm': {
58
+ '@apply w-6 h-6': {},
59
59
  },
60
60
 
61
- "&-md": {
62
- "@apply w-7 h-7": {},
61
+ '&-md': {
62
+ '@apply w-7 h-7': {},
63
63
  },
64
64
 
65
- "&-lg": {
66
- "@apply w-8 h-8": {},
65
+ '&-lg': {
66
+ '@apply w-8 h-8': {},
67
67
  },
68
68
 
69
- "&-xl": {
70
- "@apply w-10 h-10": {},
69
+ '&-xl': {
70
+ '@apply w-10 h-10': {},
71
71
  },
72
72
 
73
- "&-2xl": {
74
- "@apply w-12 h-12": {},
73
+ '&-2xl': {
74
+ '@apply w-12 h-12': {},
75
75
  },
76
76
 
77
- "&-3xl": {
78
- "@apply w-16 h-16": {},
77
+ '&-3xl': {
78
+ '@apply w-16 h-16': {},
79
79
  },
80
80
  },
81
81
 
82
- ".avatar-group": {
83
- "@apply flex items-center justify-end flex-row-reverse": {},
82
+ '.avatar-group': {
83
+ '@apply flex items-center justify-end flex-row-reverse': {},
84
84
  },
85
85
  });