@sk-web-gui/core 0.1.7 → 0.1.10

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 (4) hide show
  1. package/package.json +2 -2
  2. package/src/colors.js +68 -0
  3. package/src/components/tag.js +43 -57
  4. package/src/index.js +4 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sk-web-gui/core",
3
- "version": "0.1.7",
3
+ "version": "0.1.10",
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": "1a9b8c4195276adacfa179936122bdb4699a7d1d"
34
+ "gitHead": "da8619c184a97813b2065c8053487ec0156d54d4"
35
35
  }
package/src/colors.js CHANGED
@@ -35,6 +35,74 @@ module.exports = {
35
35
  900: withOpacity("--vc-colors-secondary-DEFAULT"),
36
36
  },
37
37
 
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"),
53
+ },
54
+
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"),
70
+ },
71
+
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"),
87
+ },
88
+
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"),
104
+ },
105
+
38
106
  neutral: {
39
107
  DEFAULT: withOpacity("--vc-colors-neutral"),
40
108
  50: withOpacity("--vc-colors-neutral-50"),
package/src/components/tag.js CHANGED
@@ -1,22 +1,13 @@
1
1
  function tagOutline(colors) {
2
2
  return {
3
3
  ".tag-outline": {
4
- "@apply border bg-transparent border-neutral-200 text-neutral-900": {},
5
- // dark
6
- "@apply dark:border-neutral-600 dark:text-neutral-100": {},
4
+ "@apply border bg-transparent border-gray-stroke text-neutral-900": {},
7
5
 
8
- ...colors.reduce(
9
- (styles, color) => ({
10
- ...styles,
11
- [`&[data-color="${color}"]`]: {
12
- [`@apply border-${color}-600 text-${color}-600`]: {},
13
- // dark
14
- [`@apply dark:border-${color}-400 dark:text-${color}-400`]: {},
15
- "@apply dark:border-opacity-40": {},
16
- },
17
- }),
18
- {}
19
- ),
6
+ "&[href]": {
7
+ [`@apply hover:border-hover hover:text-white hover:bg-hover`]: {},
8
+ [`@apply active:text-white active:bg-hover`]: {},
9
+ [`@apply focus-visible:text-white focus-visible:ring-4 focus-visible:ring-black focus-visible:bg-hover`]: {},
10
+ },
20
11
  },
21
12
  };
22
13
  }
@@ -24,23 +15,17 @@ function tagOutline(colors) {
24
15
  function tagSolid(colors) {
25
16
  return {
26
17
  ".tag-solid": {
27
- "@apply border bg-neutral-500 border-transparent text-white": {},
28
- // dark
29
- "@apply dark:border-neutral-600 dark:text-neutral-100 dark:bg-neutral-700": {},
18
+ "@apply border bg-gray-stroke border-transparent text-white": {},
30
19
 
31
- ...colors.reduce(
32
- (styles, color) => ({
33
- ...styles,
34
- [`&[data-color="${color}"]`]: {
35
- [`@apply bg-${color}-500`]: {},
36
- // dark
37
- [`@apply dark:text-${color}-400 dark:border-${color}-500 dark:bg-${color}-500`]: {},
38
- "@apply dark:bg-opacity-15": {},
39
- "@apply dark:border-opacity-40": {},
40
- },
41
- }),
42
- {}
43
- ),
20
+ "&[href]": {
21
+ [`@apply hover:text-white hover:bg-hover`]: {},
22
+ [`@apply active:text-white active:bg-hover`]: {},
23
+ [`@apply focus-visible:text-white focus-visible:ring-4 focus-visible:ring-black focus-visible:bg-hover`]: {},
24
+ },
25
+
26
+ ".tag-close-button": {
27
+ "@apply text-white": {}
28
+ },
44
29
  },
45
30
  };
46
31
  }
@@ -48,49 +33,43 @@ function tagSolid(colors) {
48
33
  function tagLight(colors) {
49
34
  return {
50
35
  ".tag-light": {
51
- "@apply text-neutral-900 bg-neutral-100": {},
52
- // dark
53
- "@apply dark:text-neutral-100 dark:bg-neutral-700": {},
36
+ "@apply border border-transparent text-neutral-900": {},
54
37
 
55
- ...colors.reduce(
56
- (styles, color) => ({
57
- ...styles,
58
- [`&[data-color="${color}"]`]: {
59
- [`@apply text-${color}-800 bg-${color}-100`]: {},
60
- // dark
61
- [`@apply dark:text-${color}-400 dark:bg-${color}-500`]: {},
62
- "@apply dark:bg-opacity-15": {},
63
- },
64
- }),
65
- {}
66
- ),
38
+ "&[href]": {
39
+ [`@apply hover:border-hover`]: {},
40
+ [`@apply active:border-hover`]: {},
41
+ [`@apply focus-visible:border-hover focus-visible:ring-4 focus-visible:ring-black`]: {},
42
+ },
67
43
  },
68
44
  };
69
45
  }
70
46
 
71
47
  module.exports = Tag = (colors) => ({
72
48
  ".tag": {
73
- "@apply inline-flex items-center max-h-full rounded-full font-medium outline-none cursor-base whitespace-nowrap": {},
49
+ "@apply leading-none inline-flex items-center content-center max-h-full rounded-full font-normal outline-none whitespace-nowrap": {},
50
+ width: "fit-content",
51
+ height: "fit-content",
52
+ padding: "0 1.145em 0 1.145em",
53
+ borderRadius: "3.2rem",
54
+
55
+ "&-text": {
56
+ padding: "0.5em 0"
57
+ },
74
58
 
75
59
  "&-sm": {
76
- "@apply px-2 h-5 text-xs": {},
60
+ "@apply text-xs": {},
77
61
  minWidth: "1.25rem",
78
62
  },
79
63
 
80
64
  "&-md": {
81
- "@apply px-2 h-6 text-xs": {},
65
+ "@apply text-sm": {},
82
66
  minWidth: "1.5rem",
83
67
  },
84
68
 
85
69
  "&-lg": {
86
- "@apply px-2.5 h-7 text-sm": {},
70
+ "@apply text-base": {},
87
71
  minWidth: "1.75rem",
88
72
  },
89
-
90
- "&-xl": {
91
- "@apply px-3 h-8 text-base": {},
92
- minWidth: "2rem",
93
- },
94
73
  },
95
74
 
96
75
  // variants
@@ -99,8 +78,15 @@ module.exports = Tag = (colors) => ({
99
78
  ...tagLight(colors),
100
79
 
101
80
  ".tag-close-button": {
102
- "@apply flex items-center justify-center transition-all duration-150 rounded-full outline-none ml-1 -mr-1 opacity-50 cursor-base": {},
103
- "@apply hover:opacity-80 focus-visible:outline-none active:opacity-100": {},
81
+ "@apply border-transparent flex items-center justify-center transition-all duration-150 rounded-full outline-none cursor-base": {},
82
+ fontSize: "1em",
83
+ padding: "0.36em",
84
+ marginLeft: "0.25em",
85
+ marginRight: "-0.55em",
86
+
87
+ "&-icon": {
88
+ fontSize: "1em"
89
+ },
104
90
 
105
91
  "&-disabled": {
106
92
  "@apply disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none": {},
package/src/index.js CHANGED
@@ -29,6 +29,8 @@ const Divider = require("./components/divider");
29
29
 
30
30
  const UserMenu = require("./components/user-menu");
31
31
 
32
+ const Tag = require("./components/tag");
33
+
32
34
  const components = [
33
35
  Alert,
34
36
  Breadcrumb,
@@ -54,6 +56,8 @@ const components = [
54
56
  Divider,
55
57
 
56
58
  UserMenu,
59
+
60
+ Tag,
57
61
  ];
58
62
 
59
63
  const defaultColors = ["primary", "secondary"];