@vue-interface/badge 1.1.0 → 3.0.0

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 (13) hide show
  1. package/LICENSE +22 -0
  2. package/README.md +63 -0
  3. package/index.css +6 -0
  4. package/package.json +20 -44
  5. package/src/badge.css +139 -0
  6. package/src/colors.css +407 -0
  7. package/src/sizes.css +11 -0
  8. package/dist/badge.es.js +0 -128
  9. package/dist/badge.umd.js +0 -1
  10. package/index.js +0 -5
  11. package/src/Badge.vue +0 -91
  12. package/tailwindcss/index.js +0 -45
  13. package/tailwindcss/safelist.js +0 -5
package/LICENSE ADDED
@@ -0,0 +1,22 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Justin Kimbrell
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
22
+
package/README.md ADDED
@@ -0,0 +1,63 @@
1
+ # Badge
2
+
3
+ The `badge` utility class provides a flexible and customizable badge component system with customizable color variants and sizes.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ pnpm i @vue-interface/badge
9
+ ```
10
+
11
+ ```bash
12
+ yarn add @vue-interface/badge
13
+ ```
14
+
15
+ ```bash
16
+ npm i @vue-interface/badge
17
+ ```
18
+
19
+ ```bash
20
+ bun i @vue-interface/badge
21
+ ```
22
+
23
+ ## Basic Usage
24
+
25
+ To create a badge component, use the `badge` class. Use the `badge-close` class to add a close button to the badge.
26
+
27
+ ```html
28
+ <div class="badge">
29
+ Basic usage
30
+ </div>
31
+ <div class="badge">
32
+ <span>With Inner</span>
33
+ <span>Elements</span>
34
+ </div>
35
+ <div class="badge">
36
+ <span>Right Close</span>
37
+ <button class="badge-close"></button>
38
+ </div>
39
+ <div class="badge">
40
+ <button class="badge-close"></button>
41
+ <span>Left Close</span>
42
+ </div>
43
+ ```
44
+ Use the `badge-outline` class to create an outlined badge.
45
+
46
+ ```html
47
+ <div class="badge badge-outline">
48
+ No Children
49
+ </div>
50
+ <div class="badge badge-outline">
51
+ <span>With Children</span>
52
+ </div>
53
+ <div class="badge badge-outline">
54
+ <span>Right Close Button</span>
55
+ <button class="badge-close"></button>
56
+ </div>
57
+ <div class="badge badge-outline">
58
+ <button class="badge-close"></button>
59
+ <span>Left Close Button</span>
60
+ </div>
61
+ ```
62
+
63
+ For more comprehensive documentation and examples, please visit the [online documentation](https://vue-interface.github.io/packages/badge/).
package/index.css ADDED
@@ -0,0 +1,6 @@
1
+ @import 'tailwindcss';
2
+
3
+ @import './src/sizes.css';
4
+ @import './src/colors.css';
5
+
6
+ @import './src/badge.css';
package/package.json CHANGED
@@ -1,60 +1,36 @@
1
1
  {
2
2
  "name": "@vue-interface/badge",
3
- "version": "1.1.0",
4
- "description": "A Vue badge component.",
5
- "files": [
6
- "index.js",
7
- "dist",
8
- "src",
9
- "tailwindcss"
10
- ],
11
- "main": "./dist/badge.umd.js",
12
- "module": "./index.js",
3
+ "version": "3.0.0",
4
+ "description": "A TailwindCSS badge utility.",
5
+ "type": "module",
6
+ "main": "./index.css",
7
+ "module": "./index.css",
13
8
  "browserslist": "last 2 versions, > 0.5%, ie >= 11",
14
- "scripts": {
15
- "dev": "vite",
16
- "build": "vite build",
17
- "preview": "vite preview",
18
- "pre-release": "npm run build; git add . -A; git commit -m 'pre-release commit'",
19
- "release-patch": "npm run pre-release && npm version patch -m \"%s\" && npm run release;",
20
- "release-minor": "npm run pre-release && npm version minor -m \"%s\" && npm run release;",
21
- "release-major": "npm run pre-release && npm version major -m \"%s\" && npm run release;",
22
- "release": "git add . -A; git commit; git push --tags origin; npm publish;"
23
- },
24
9
  "repository": {
25
10
  "type": "git",
26
- "url": "git+https://github.com/vue-interface/badge.git"
11
+ "url": "git+https://github.com/vue-interface/vue-interface.github.io"
27
12
  },
28
13
  "keywords": [
29
14
  "Badge",
30
- "Vue",
31
15
  "Component",
32
16
  "Tailwind",
33
17
  "Bootstrap"
34
18
  ],
35
19
  "author": "Justin Kimbrell",
36
- "license": "ISC",
20
+ "license": "MIT",
37
21
  "bugs": {
38
- "url": "https://github.com/vue-interface/badge/issues"
22
+ "url": "https://github.com/vue-interface/vue-interface.github.io"
39
23
  },
40
- "homepage": "https://github.com/vue-interface/badge/docs#readme",
41
- "dependencies": {
42
- "@vue-interface/variant": "^1.3.0",
43
- "vue": "^2.6.14"
44
- },
45
- "devDependencies": {
46
- "@rollup/plugin-babel": "^5.3.0",
47
- "autoprefixer": "^10.4.2",
48
- "babel-eslint": "^10.1.0",
49
- "babel-preset-vue": "^2.0.2",
50
- "change-case": "^4.1.2",
51
- "eslint": "^6.7.2",
52
- "eslint-plugin-vue": "^6.2.2",
53
- "pascalcase": "^2.0.0",
54
- "postcss": "^8.4.6",
55
- "tailwindcss": "^3.0.0",
56
- "vite": "^2.7.2",
57
- "vite-plugin-vue2": "^1.9.3",
58
- "vue-router": "^3.5.3"
24
+ "homepage": "https://vue-interface.github.io/packages/badge",
25
+ "readme": "README.md",
26
+ "files": [
27
+ "src",
28
+ "index.css",
29
+ "README.md",
30
+ "LICENSE"
31
+ ],
32
+ "scripts": {
33
+ "dev": "vite",
34
+ "preview": "vite preview"
59
35
  }
60
- }
36
+ }
package/src/badge.css ADDED
@@ -0,0 +1,139 @@
1
+ @theme {
2
+ /* badge variables */
3
+ --badge-display: inline-flex;
4
+ --badge-align-items: stretch;
5
+ --badge-justify-content: space-between;
6
+ --badge-padding-y: .25;
7
+ --badge-padding-x: .350;
8
+
9
+ --badge-children-display: inline-flex;
10
+ --badge-children-align-items: center;
11
+
12
+ --badge-close-display: inline-flex;
13
+ --badge-close-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M6%2018L18%206M6%206l12%2012'/%3E%3C/svg%3E");
14
+
15
+ /* badge-outline variables */
16
+ --badge-outline-background-color: transparent;
17
+ --badge-outline-color: var(--badge-primary, var(--color-blue-600));
18
+ }
19
+
20
+ @utility badge {
21
+ --badge-border-radius: --spacing(1);
22
+ --badge-font-size: --spacing(4);
23
+ --badge-padding-top: calc(var(--badge-font-size) * var(--badge-padding-y));
24
+ --badge-padding-bottom: calc(var(--badge-font-size) * var(--badge-padding-y));
25
+ --badge-padding-left: calc(var(--badge-font-size) * var(--badge-padding-x));
26
+ --badge-padding-right: calc(var(--badge-font-size) * var(--badge-padding-x));
27
+ --badge-gap: calc(var(--badge-font-size) * var(--badge-padding-x) / 2);
28
+ --badge-color: var(--badge-text-default);
29
+ --badge-background-color: var(--badge-primary);
30
+ --badge-hover-color: black;
31
+ --badge-hover-mix-percentage: 90%;
32
+ --badge-close-hover-color: var(--badge-color);
33
+ --badge-close-icon-size: calc(var(--badge-font-size) * 0.75);
34
+
35
+ display: var(--badge-display);
36
+ align-items: var(--badge-align-items);
37
+ justify-content: var(--badge-justify-content);
38
+ gap: var(--badge-gap);
39
+ font-size: var(--badge-font-size);
40
+ line-height: var(--badge-font-size);
41
+ color: var(--badge-color);
42
+ background-color: var(--badge-background-color);
43
+ border-radius: var(--badge-border-radius);
44
+ text-decoration: none;
45
+
46
+ &:not(:has(:nth-child(1))) {
47
+ padding-top: var(--badge-padding-top);
48
+ padding-bottom: var(--badge-padding-bottom);
49
+ padding-left: var(--badge-padding-left);
50
+ padding-right: var(--badge-padding-right);
51
+ }
52
+
53
+ &:has(:nth-child(1)) {
54
+ > * {
55
+ display: var(--badge-children-display);
56
+ align-items: var(--badge-children-align-items);
57
+ padding-top: var(--badge-padding-top);
58
+ padding-bottom: var(--badge-padding-bottom);
59
+ }
60
+
61
+ > :first-child {
62
+ padding-left: var(--badge-padding-left);
63
+ border-top-left-radius: var(--badge-border-radius);
64
+ border-bottom-left-radius: var(--badge-border-radius);
65
+ }
66
+
67
+ > :last-child {
68
+ padding-right: var(--badge-padding-right);
69
+ border-top-right-radius: var(--badge-border-radius);
70
+ border-bottom-right-radius: var(--badge-border-radius);
71
+ }
72
+
73
+ .badge-close {
74
+ padding-left: calc(var(--badge-padding-left) / 3);
75
+ padding-right: calc(var(--badge-padding-left) / 3);
76
+
77
+
78
+ &::before {
79
+ content: "";
80
+ display: block;
81
+ width: var(--badge-close-icon-size);
82
+ height: var(--badge-close-icon-size);
83
+ background-color: currentColor;
84
+ -webkit-mask: var(--badge-close-icon) center / contain no-repeat;
85
+ mask: var(--badge-close-icon) center / contain no-repeat;
86
+ }
87
+
88
+ &:hover {
89
+ background-color: color-mix(in oklab, var(--badge-background-color) var(--badge-hover-mix-percentage), var(--badge-hover-color));
90
+ color: var(--badge-close-hover-color);
91
+ }
92
+ }
93
+ }
94
+
95
+ }
96
+
97
+ @utility badge-* {
98
+ --badge-font-size: --value(--badge-font-size-*, [length]);
99
+ --badge-font-size: --spacing(--value(integer));
100
+ --badge-border-radius: calc(var(--badge-font-size) * .25);
101
+ --badge-background-color: --value(--badge-*, --color-*, [color]);
102
+ --badge-color: --value(--badge-*-text, --text-for-*);
103
+ --badge-hover-color: --value(--badge-*-hover-color, --hover-color-for-*);
104
+ }
105
+
106
+ @utility badge-outline {
107
+ --badge-background-color: var(--badge-outline-background-color);
108
+ --badge-color: var(--badge-outline-color);
109
+ --badge-border-color: var(--badge-outline-color);
110
+ --badge-border-style: solid;
111
+ --badge-border-width: 1px;
112
+ --badge-hover-color: var(--badge-outline-color);
113
+ --badge-hover-mix-percentage: 90%;
114
+ --badge-close-hover-color: var(--badge-outline-color);
115
+
116
+ @variant dark {
117
+ --badge-hover-mix-percentage: 0%;
118
+ --badge-close-hover-color: var(--color-white, #fff);
119
+ }
120
+
121
+ border: var(--badge-border-width) var(--badge-border-style) var(--badge-border-color);
122
+ }
123
+
124
+ @utility badge-outline-* {
125
+ --badge-background-color: var(--badge-outline-background-color);
126
+ --badge-color: --value(--badge-*, --color-*, [color]);
127
+ --badge-border-color: --value(--badge-*, --color-*, [color]);
128
+ --badge-border-style: solid;
129
+ --badge-border-width: 1px;
130
+ --badge-hover-color: --value(--badge-*, --color-*, [color]);
131
+ --badge-hover-mix-percentage: 85%;
132
+
133
+ @variant dark {
134
+ --badge-hover-mix-percentage: 0%;
135
+ --badge-close-hover-color: --value(--badge-*-text, --text-for-*);
136
+ }
137
+
138
+ border: var(--badge-border-width) var(--badge-border-style) var(--badge-border-color);
139
+ }
package/src/colors.css ADDED
@@ -0,0 +1,407 @@
1
+ @theme {
2
+ --badge-text-default: var(--color-white);
3
+
4
+ --badge-primary: var(--color-primary, var(--color-blue-600));
5
+ --badge-primary-text: var(--color-white);
6
+
7
+ --badge-secondary: var(--color-secondary, var(--color-gray-600));
8
+ --badge-secondary-text: var(--color-white);
9
+
10
+ --badge-success: var(--color-success, var(--color-green-600));
11
+ --badge-success-text: var(--color-white);
12
+
13
+ --badge-danger: var(--color-danger, var(--color-red-700));
14
+ --badge-danger-text: var(--color-white);
15
+
16
+ --badge-warning: var(--color-warning, var(--color-amber-500));
17
+ --badge-warning-text: var(--color-white);
18
+
19
+ --badge-info: var(--color-info, var(--color-teal-400));
20
+ --badge-info-text: var(--color-white);
21
+
22
+ --badge-light: var(--color-light, var(--color-gray-100));
23
+ --badge-light-text: var(--color-black);
24
+ --hover-color-for-light: var(--color-black, #000);
25
+
26
+ --badge-dark: var(--color-dark, var(--color-gray-800));
27
+ --badge-dark-text: var(--color-white, #fff);
28
+ --badge-dark-hover-color: var(--color-white, #fff);
29
+
30
+ /* Grays */
31
+ --text-for-gray-50: var(--color-black, black);
32
+ --text-for-gray-100: var(--color-black, black);
33
+ --text-for-gray-200: var(--color-black, black);
34
+ --text-for-gray-300: var(--color-black, black);
35
+ --text-for-gray-400: var(--color-white, white);
36
+ --text-for-gray-500: var(--color-white, white);
37
+ --text-for-gray-600: var(--color-white, white);
38
+ --text-for-gray-700: var(--color-white, white);
39
+ --text-for-gray-800: var(--color-white, white);
40
+ --text-for-gray-900: var(--color-white, white);
41
+ --text-for-gray-950: var(--color-white, white);
42
+
43
+ --hover-color-for-gray-800: var(--color-white, white);
44
+ --hover-color-for-gray-900: var(--color-white, white);
45
+ --hover-color-for-gray-950: var(--color-white, white);
46
+
47
+ /* Slate */
48
+ --text-for-slate-50: var(--color-black, black);
49
+ --text-for-slate-100: var(--color-black, black);
50
+ --text-for-slate-200: var(--color-black, black);
51
+ --text-for-slate-300: var(--color-black, black);
52
+ --text-for-slate-400: var(--color-white, white);
53
+ --text-for-slate-500: var(--color-white, white);
54
+ --text-for-slate-600: var(--color-white, white);
55
+ --text-for-slate-700: var(--color-white, white);
56
+ --text-for-slate-800: var(--color-white, white);
57
+ --text-for-slate-900: var(--color-white, white);
58
+ --text-for-slate-950: var(--color-white, white);
59
+
60
+ --hover-color-for-slate-800: var(--color-white, white);
61
+ --hover-color-for-slate-900: var(--color-white, white);
62
+ --hover-color-for-slate-950: var(--color-white, white);
63
+
64
+ /* Zinc */
65
+ --text-for-zinc-50: var(--color-black, black);
66
+ --text-for-zinc-100: var(--color-black, black);
67
+ --text-for-zinc-200: var(--color-black, black);
68
+ --text-for-zinc-300: var(--color-black, black);
69
+ --text-for-zinc-400: var(--color-white, white);
70
+ --text-for-zinc-500: var(--color-white, white);
71
+ --text-for-zinc-600: var(--color-white, white);
72
+ --text-for-zinc-700: var(--color-white, white);
73
+ --text-for-zinc-800: var(--color-white, white);
74
+ --text-for-zinc-900: var(--color-white, white);
75
+ --text-for-zinc-950: var(--color-white, white);
76
+
77
+ --hover-color-for-zinc-800: var(--color-white, white);
78
+ --hover-color-for-zinc-900: var(--color-white, white);
79
+ --hover-color-for-zinc-950: var(--color-white, white);
80
+
81
+ /* Neutral */
82
+ --text-for-neutral-50: var(--color-black, black);
83
+ --text-for-neutral-100: var(--color-black, black);
84
+ --text-for-neutral-200: var(--color-black, black);
85
+ --text-for-neutral-300: var(--color-black, black);
86
+ --text-for-neutral-400: var(--color-white, white);
87
+ --text-for-neutral-500: var(--color-white, white);
88
+ --text-for-neutral-600: var(--color-white, white);
89
+ --text-for-neutral-700: var(--color-white, white);
90
+ --text-for-neutral-800: var(--color-white, white);
91
+ --text-for-neutral-900: var(--color-white, white);
92
+ --text-for-neutral-950: var(--color-white, white);
93
+
94
+ --hover-color-for-neutral-800: var(--color-white, white);
95
+ --hover-color-for-neutral-900: var(--color-white, white);
96
+ --hover-color-for-neutral-950: var(--color-white, white);
97
+
98
+ /* Stone */
99
+ --text-for-stone-50: var(--color-black, black);
100
+ --text-for-stone-100: var(--color-black, black);
101
+ --text-for-stone-200: var(--color-black, black);
102
+ --text-for-stone-300: var(--color-black, black);
103
+ --text-for-stone-400: var(--color-white, white);
104
+ --text-for-stone-500: var(--color-white, white);
105
+ --text-for-stone-600: var(--color-white, white);
106
+ --text-for-stone-700: var(--color-white, white);
107
+ --text-for-stone-800: var(--color-white, white);
108
+ --text-for-stone-900: var(--color-white, white);
109
+ --text-for-stone-950: var(--color-white, white);
110
+
111
+ --hover-color-for-stone-800: var(--color-white, white);
112
+ --hover-color-for-stone-900: var(--color-white, white);
113
+ --hover-color-for-stone-950: var(--color-white, white);
114
+
115
+ /* Red */
116
+ --text-for-red-50: var(--color-black, black);
117
+ --text-for-red-100: var(--color-black, black);
118
+ --text-for-red-200: var(--color-black, black);
119
+ --text-for-red-300: var(--color-black, black);
120
+ --text-for-red-400: var(--color-white, white);
121
+ --text-for-red-500: var(--color-white, white);
122
+ --text-for-red-600: var(--color-white, white);
123
+ --text-for-red-700: var(--color-white, white);
124
+ --text-for-red-800: var(--color-white, white);
125
+ --text-for-red-900: var(--color-white, white);
126
+ --text-for-red-950: var(--color-white, white);
127
+
128
+ --hover-color-for-red-800: var(--color-white, white);
129
+ --hover-color-for-red-900: var(--color-white, white);
130
+ --hover-color-for-red-950: var(--color-white, white);
131
+
132
+ /* Orange */
133
+ --text-for-orange-50: var(--color-black, black);
134
+ --text-for-orange-100: var(--color-black, black);
135
+ --text-for-orange-200: var(--color-black, black);
136
+ --text-for-orange-300: var(--color-black, black);
137
+ --text-for-orange-400: var(--color-white, white);
138
+ --text-for-orange-500: var(--color-white, white);
139
+ --text-for-orange-600: var(--color-white, white);
140
+ --text-for-orange-700: var(--color-white, white);
141
+ --text-for-orange-800: var(--color-white, white);
142
+ --text-for-orange-900: var(--color-white, white);
143
+ --text-for-orange-950: var(--color-white, white);
144
+
145
+ --hover-color-for-orange-800: var(--color-white, white);
146
+ --hover-color-for-orange-900: var(--color-white, white);
147
+ --hover-color-for-orange-950: var(--color-white, white);
148
+
149
+ /* Amber */
150
+ --text-for-amber-50: var(--color-black, black);
151
+ --text-for-amber-100: var(--color-black, black);
152
+ --text-for-amber-200: var(--color-black, black);
153
+ --text-for-amber-300: var(--color-black, black);
154
+ --text-for-amber-400: var(--color-white, white);
155
+ --text-for-amber-500: var(--color-white, white);
156
+ --text-for-amber-600: var(--color-white, white);
157
+ --text-for-amber-700: var(--color-white, white);
158
+ --text-for-amber-800: var(--color-white, white);
159
+ --text-for-amber-900: var(--color-white, white);
160
+ --text-for-amber-950: var(--color-white, white);
161
+
162
+ --hover-color-for-amber-800: var(--color-white, white);
163
+ --hover-color-for-amber-900: var(--color-white, white);
164
+ --hover-color-for-amber-950: var(--color-white, white);
165
+
166
+ /* Yellow */
167
+ --text-for-yellow-50: var(--color-black, black);
168
+ --text-for-yellow-100: var(--color-black, black);
169
+ --text-for-yellow-200: var(--color-black, black);
170
+ --text-for-yellow-300: var(--color-black, black);
171
+ --text-for-yellow-400: var(--color-white, white);
172
+ --text-for-yellow-500: var(--color-white, white);
173
+ --text-for-yellow-600: var(--color-white, white);
174
+ --text-for-yellow-700: var(--color-white, white);
175
+ --text-for-yellow-800: var(--color-white, white);
176
+ --text-for-yellow-900: var(--color-white, white);
177
+ --text-for-yellow-950: var(--color-white, white);
178
+
179
+ --hover-color-for-yellow-800: var(--color-white, white);
180
+ --hover-color-for-yellow-900: var(--color-white, white);
181
+ --hover-color-for-yellow-950: var(--color-white, white);
182
+
183
+ /* Lime */
184
+ --text-for-lime-50: var(--color-black, black);
185
+ --text-for-lime-100: var(--color-black, black);
186
+ --text-for-lime-200: var(--color-black, black);
187
+ --text-for-lime-300: var(--color-black, black);
188
+ --text-for-lime-400: var(--color-white, white);
189
+ --text-for-lime-500: var(--color-white, white);
190
+ --text-for-lime-600: var(--color-white, white);
191
+ --text-for-lime-700: var(--color-white, white);
192
+ --text-for-lime-800: var(--color-white, white);
193
+ --text-for-lime-900: var(--color-white, white);
194
+ --text-for-lime-950: var(--color-white, white);
195
+
196
+ --hover-color-for-lime-800: var(--color-white, white);
197
+ --hover-color-for-lime-900: var(--color-white, white);
198
+ --hover-color-for-lime-950: var(--color-white, white);
199
+
200
+ /* Green */
201
+ --text-for-green-50: var(--color-black, black);
202
+ --text-for-green-100: var(--color-black, black);
203
+ --text-for-green-200: var(--color-black, black);
204
+ --text-for-green-300: var(--color-black, black);
205
+ --text-for-green-400: var(--color-white, white);
206
+ --text-for-green-500: var(--color-white, white);
207
+ --text-for-green-600: var(--color-white, white);
208
+ --text-for-green-700: var(--color-white, white);
209
+ --text-for-green-800: var(--color-white, white);
210
+ --text-for-green-900: var(--color-white, white);
211
+ --text-for-green-950: var(--color-white, white);
212
+
213
+ --hover-color-for-green-800: var(--color-white, white);
214
+ --hover-color-for-green-900: var(--color-white, white);
215
+ --hover-color-for-green-950: var(--color-white, white);
216
+
217
+ /* Emerald */
218
+ --text-for-emerald-50: var(--color-black, black);
219
+ --text-for-emerald-100: var(--color-black, black);
220
+ --text-for-emerald-200: var(--color-black, black);
221
+ --text-for-emerald-300: var(--color-black, black);
222
+ --text-for-emerald-400: var(--color-white, white);
223
+ --text-for-emerald-500: var(--color-white, white);
224
+ --text-for-emerald-600: var(--color-white, white);
225
+ --text-for-emerald-700: var(--color-white, white);
226
+ --text-for-emerald-800: var(--color-white, white);
227
+ --text-for-emerald-900: var(--color-white, white);
228
+ --text-for-emerald-950: var(--color-white, white);
229
+
230
+ --hover-color-for-emerald-800: var(--color-white, white);
231
+ --hover-color-for-emerald-900: var(--color-white, white);
232
+ --hover-color-for-emerald-950: var(--color-white, white);
233
+
234
+ /* Teal */
235
+ --text-for-teal-50: var(--color-black, black);
236
+ --text-for-teal-100: var(--color-black, black);
237
+ --text-for-teal-200: var(--color-black, black);
238
+ --text-for-teal-300: var(--color-black, black);
239
+ --text-for-teal-400: var(--color-white, white);
240
+ --text-for-teal-500: var(--color-white, white);
241
+ --text-for-teal-600: var(--color-white, white);
242
+ --text-for-teal-700: var(--color-white, white);
243
+ --text-for-teal-800: var(--color-white, white);
244
+ --text-for-teal-900: var(--color-white, white);
245
+ --text-for-teal-950: var(--color-white, white);
246
+
247
+ --hover-color-for-teal-800: var(--color-white, white);
248
+ --hover-color-for-teal-900: var(--color-white, white);
249
+ --hover-color-for-teal-950: var(--color-white, white);
250
+
251
+ /* Cyan */
252
+ --text-for-cyan-50: var(--color-black, black);
253
+ --text-for-cyan-100: var(--color-black, black);
254
+ --text-for-cyan-200: var(--color-black, black);
255
+ --text-for-cyan-300: var(--color-black, black);
256
+ --text-for-cyan-400: var(--color-white, white);
257
+ --text-for-cyan-500: var(--color-white, white);
258
+ --text-for-cyan-600: var(--color-white, white);
259
+ --text-for-cyan-700: var(--color-white, white);
260
+ --text-for-cyan-800: var(--color-white, white);
261
+ --text-for-cyan-900: var(--color-white, white);
262
+ --text-for-cyan-950: var(--color-white, white);
263
+
264
+ --hover-color-for-cyan-800: var(--color-white, white);
265
+ --hover-color-for-cyan-900: var(--color-white, white);
266
+ --hover-color-for-cyan-950: var(--color-white, white);
267
+
268
+ /* Sky */
269
+ --text-for-sky-50: var(--color-black, black);
270
+ --text-for-sky-100: var(--color-black, black);
271
+ --text-for-sky-200: var(--color-black, black);
272
+ --text-for-sky-300: var(--color-black, black);
273
+ --text-for-sky-400: var(--color-white, white);
274
+ --text-for-sky-500: var(--color-white, white);
275
+ --text-for-sky-600: var(--color-white, white);
276
+ --text-for-sky-700: var(--color-white, white);
277
+ --text-for-sky-800: var(--color-white, white);
278
+ --text-for-sky-900: var(--color-white, white);
279
+ --text-for-sky-950: var(--color-white, white);
280
+
281
+ --hover-color-for-sky-800: var(--color-white, white);
282
+ --hover-color-for-sky-900: var(--color-white, white);
283
+ --hover-color-for-sky-950: var(--color-white, white);
284
+
285
+ /* Blue */
286
+ --text-for-blue-50: var(--color-black, black);
287
+ --text-for-blue-100: var(--color-black, black);
288
+ --text-for-blue-200: var(--color-black, black);
289
+ --text-for-blue-300: var(--color-black, black);
290
+ --text-for-blue-400: var(--color-black, black);
291
+ --text-for-blue-500: var(--color-white, white);
292
+ --text-for-blue-600: var(--color-white, white);
293
+ --text-for-blue-700: var(--color-white, white);
294
+ --text-for-blue-800: var(--color-white, white);
295
+ --text-for-blue-900: var(--color-white, white);
296
+ --text-for-blue-950: var(--color-white, white);
297
+
298
+ --hover-color-for-blue-800: var(--color-white, white);
299
+ --hover-color-for-blue-900: var(--color-white, white);
300
+ --hover-color-for-blue-950: var(--color-white, white);
301
+
302
+ /* Indigo */
303
+ --text-for-indigo-50: var(--color-black, black);
304
+ --text-for-indigo-100: var(--color-black, black);
305
+ --text-for-indigo-200: var(--color-black, black);
306
+ --text-for-indigo-300: var(--color-black, black);
307
+ --text-for-indigo-400: var(--color-white, white);
308
+ --text-for-indigo-500: var(--color-white, white);
309
+ --text-for-indigo-600: var(--color-white, white);
310
+ --text-for-indigo-700: var(--color-white, white);
311
+ --text-for-indigo-800: var(--color-white, white);
312
+ --text-for-indigo-900: var(--color-white, white);
313
+ --text-for-indigo-950: var(--color-white, white);
314
+
315
+ --hover-color-for-indigo-800: var(--color-white, white);
316
+ --hover-color-for-indigo-900: var(--color-white, white);
317
+ --hover-color-for-indigo-950: var(--color-white, white);
318
+
319
+ /* Violet */
320
+ --text-for-violet-50: var(--color-black, black);
321
+ --text-for-violet-100: var(--color-black, black);
322
+ --text-for-violet-200: var(--color-black, black);
323
+ --text-for-violet-300: var(--color-white, white);
324
+ --text-for-violet-400: var(--color-white, white);
325
+ --text-for-violet-500: var(--color-white, white);
326
+ --text-for-violet-600: var(--color-white, white);
327
+ --text-for-violet-700: var(--color-white, white);
328
+ --text-for-violet-800: var(--color-white, white);
329
+ --text-for-violet-900: var(--color-white, white);
330
+ --text-for-violet-950: var(--color-white, white);
331
+
332
+ --hover-color-for-violet-800: var(--color-white, white);
333
+ --hover-color-for-violet-900: var(--color-white, white);
334
+ --hover-color-for-violet-950: var(--color-white, white);
335
+
336
+ /* Purple */
337
+ --text-for-purple-50: var(--color-black, black);
338
+ --text-for-purple-100: var(--color-black, black);
339
+ --text-for-purple-200: var(--color-black, black);
340
+ --text-for-purple-300: var(--color-white, white);
341
+ --text-for-purple-400: var(--color-white, white);
342
+ --text-for-purple-500: var(--color-white, white);
343
+ --text-for-purple-600: var(--color-white, white);
344
+ --text-for-purple-700: var(--color-white, white);
345
+ --text-for-purple-800: var(--color-white, white);
346
+ --text-for-purple-900: var(--color-white, white);
347
+ --text-for-purple-950: var(--color-white, white);
348
+
349
+ --hover-color-for-purple-800: var(--color-white, white);
350
+ --hover-color-for-purple-900: var(--color-white, white);
351
+ --hover-color-for-purple-950: var(--color-white, white);
352
+
353
+ /* Fuchsia */
354
+ --text-for-fuchsia-50: var(--color-black, black);
355
+ --text-for-fuchsia-100: var(--color-black, black);
356
+ --text-for-fuchsia-200: var(--color-black, black);
357
+ --text-for-fuchsia-300: var(--color-white, white);
358
+ --text-for-fuchsia-400: var(--color-white, white);
359
+ --text-for-fuchsia-500: var(--color-white, white);
360
+ --text-for-fuchsia-600: var(--color-white, white);
361
+ --text-for-fuchsia-700: var(--color-white, white);
362
+ --text-for-fuchsia-800: var(--color-white, white);
363
+ --text-for-fuchsia-900: var(--color-white, white);
364
+ --text-for-fuchsia-950: var(--color-white, white);
365
+
366
+ --hover-color-for-fuchsia-800: var(--color-white, white);
367
+ --hover-color-for-fuchsia-900: var(--color-white, white);
368
+ --hover-color-for-fuchsia-950: var(--color-white, white);
369
+
370
+ /* Pink */
371
+ --text-for-pink-50: var(--color-black, black);
372
+ --text-for-pink-100: var(--color-black, black);
373
+ --text-for-pink-200: var(--color-black, black);
374
+ --text-for-pink-300: var(--color-black, black);
375
+ --text-for-pink-400: var(--color-white, white);
376
+ --text-for-pink-500: var(--color-white, white);
377
+ --text-for-pink-600: var(--color-white, white);
378
+ --text-for-pink-700: var(--color-white, white);
379
+ --text-for-pink-800: var(--color-white, white);
380
+ --text-for-pink-900: var(--color-white, white);
381
+ --text-for-pink-950: var(--color-white, white);
382
+
383
+ --hover-color-for-pink-800: var(--color-white, white);
384
+ --hover-color-for-pink-900: var(--color-white, white);
385
+ --hover-color-for-pink-950: var(--color-white, white);
386
+
387
+ /* Rose */
388
+ --text-for-rose-50: var(--color-black, black);
389
+ --text-for-rose-100: var(--color-black, black);
390
+ --text-for-rose-200: var(--color-black, black);
391
+ --text-for-rose-300: var(--color-black, black);
392
+ --text-for-rose-400: var(--color-white, white);
393
+ --text-for-rose-500: var(--color-white, white);
394
+ --text-for-rose-600: var(--color-white, white);
395
+ --text-for-rose-700: var(--color-white, white);
396
+ --text-for-rose-800: var(--color-white, white);
397
+ --text-for-rose-900: var(--color-white, white);
398
+ --text-for-rose-950: var(--color-white, white);
399
+
400
+ --hover-color-for-rose-800: var(--color-white, white);
401
+ --hover-color-for-rose-900: var(--color-white, white);
402
+ --hover-color-for-rose-950: var(--color-white, white);
403
+
404
+ /* Black and White */
405
+ --text-for-black: var(--color-white, white);
406
+ --text-for-white: var(--color-black, black);
407
+ }
package/src/sizes.css ADDED
@@ -0,0 +1,11 @@
1
+ @theme{
2
+ --badge-font-size-xs: --spacing(2.75);
3
+ --badge-font-size-sm: --spacing(3.5);
4
+ --badge-font-size-md: --spacing(4);
5
+ --badge-font-size-lg: --spacing(5);
6
+ --badge-font-size-xl: --spacing(6);
7
+ --badge-font-size-2xl: --spacing(7);
8
+ --badge-font-size-3xl: --spacing(8);
9
+ --badge-font-size-4xl: --spacing(9);
10
+ --badge-font-size-5xl: --spacing(10);
11
+ }
package/dist/badge.es.js DELETED
@@ -1,128 +0,0 @@
1
- var Variant = {
2
- props: {
3
- variant: String,
4
- variantPrefix: {
5
- type: String,
6
- default() {
7
- return this.$options.name && this.$options.name.toLowerCase();
8
- }
9
- }
10
- },
11
- computed: {
12
- variantClassPrefix() {
13
- return this.variantPrefix;
14
- },
15
- variantClass() {
16
- if (!this.variant || !this.variantClassPrefix) {
17
- return "";
18
- }
19
- return `${this.variantClassPrefix}-${this.variant}`;
20
- }
21
- }
22
- };
23
- var render = function() {
24
- var _vm = this;
25
- var _h = _vm.$createElement;
26
- var _c = _vm._self._c || _h;
27
- return _c(_vm.component || _vm.type, { tag: "component", staticClass: "badge", class: _vm.classes, attrs: { "href": _vm.href, "to": _vm.to } }, [_vm._t("default")], 2);
28
- };
29
- var staticRenderFns = [];
30
- function normalizeComponent(scriptExports, render2, staticRenderFns2, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
31
- var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
32
- if (render2) {
33
- options.render = render2;
34
- options.staticRenderFns = staticRenderFns2;
35
- options._compiled = true;
36
- }
37
- if (functionalTemplate) {
38
- options.functional = true;
39
- }
40
- if (scopeId) {
41
- options._scopeId = "data-v-" + scopeId;
42
- }
43
- var hook;
44
- if (moduleIdentifier) {
45
- hook = function(context) {
46
- context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
47
- if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
48
- context = __VUE_SSR_CONTEXT__;
49
- }
50
- if (injectStyles) {
51
- injectStyles.call(this, context);
52
- }
53
- if (context && context._registeredComponents) {
54
- context._registeredComponents.add(moduleIdentifier);
55
- }
56
- };
57
- options._ssrRegister = hook;
58
- } else if (injectStyles) {
59
- hook = shadowMode ? function() {
60
- injectStyles.call(this, (options.functional ? this.parent : this).$root.$options.shadowRoot);
61
- } : injectStyles;
62
- }
63
- if (hook) {
64
- if (options.functional) {
65
- options._injectStyles = hook;
66
- var originalRender = options.render;
67
- options.render = function renderWithStyleInjection(h, context) {
68
- hook.call(context);
69
- return originalRender(h, context);
70
- };
71
- } else {
72
- var existing = options.beforeCreate;
73
- options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
74
- }
75
- }
76
- return {
77
- exports: scriptExports,
78
- options
79
- };
80
- }
81
- const __vue2_script = {
82
- name: "Badge",
83
- mixins: [
84
- Variant
85
- ],
86
- props: {
87
- component: String,
88
- href: String,
89
- pill: Boolean,
90
- to: [Object, String],
91
- variant: {
92
- type: String,
93
- default: "primary"
94
- }
95
- },
96
- computed: {
97
- type() {
98
- if (this.to) {
99
- return "router-link";
100
- }
101
- if (this.href) {
102
- return "a";
103
- }
104
- return "span";
105
- },
106
- variantClass() {
107
- return `bg-${this.variant}`;
108
- },
109
- classes() {
110
- return {
111
- "badge-pill": this.pill,
112
- "badge-secondary": this.secondary,
113
- [this.variantClass]: !!this.variant
114
- };
115
- }
116
- }
117
- };
118
- const __cssModules = {};
119
- var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles, null, null, null);
120
- function __vue2_injectStyles(context) {
121
- for (let o in __cssModules) {
122
- this[o] = __cssModules[o];
123
- }
124
- }
125
- var Badge = /* @__PURE__ */ function() {
126
- return __component__.exports;
127
- }();
128
- export { Badge };
package/dist/badge.umd.js DELETED
@@ -1 +0,0 @@
1
- (function(a,s){typeof exports=="object"&&typeof module!="undefined"?s(exports):typeof define=="function"&&define.amd?define(["exports"],s):(a=typeof globalThis!="undefined"?globalThis:a||self,s(a.Badge={}))})(this,function(a){"use strict";var s={props:{variant:String,variantPrefix:{type:String,default(){return this.$options.name&&this.$options.name.toLowerCase()}}},computed:{variantClassPrefix(){return this.variantPrefix},variantClass(){return!this.variant||!this.variantClassPrefix?"":`${this.variantClassPrefix}-${this.variant}`}}},h=function(){var e=this,i=e.$createElement,f=e._self._c||i;return f(e.component||e.type,{tag:"component",staticClass:"badge",class:e.classes,attrs:{href:e.href,to:e.to}},[e._t("default")],2)},v=[];function c(e,i,f,y,o,u,d,S){var t=typeof e=="function"?e.options:e;i&&(t.render=i,t.staticRenderFns=f,t._compiled=!0),y&&(t.functional=!0),u&&(t._scopeId="data-v-"+u);var r;if(d?(r=function(n){n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!n&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(n=__VUE_SSR_CONTEXT__),o&&o.call(this,n),n&&n._registeredComponents&&n._registeredComponents.add(d)},t._ssrRegister=r):o&&(r=S?function(){o.call(this,(t.functional?this.parent:this).$root.$options.shadowRoot)}:o),r)if(t.functional){t._injectStyles=r;var b=t.render;t.render=function(T,_){return r.call(_),b(T,_)}}else{var p=t.beforeCreate;t.beforeCreate=p?[].concat(p,r):[r]}return{exports:e,options:t}}const m={name:"Badge",mixins:[s],props:{component:String,href:String,pill:Boolean,to:[Object,String],variant:{type:String,default:"primary"}},computed:{type(){return this.to?"router-link":this.href?"a":"span"},variantClass(){return`bg-${this.variant}`},classes(){return{"badge-pill":this.pill,"badge-secondary":this.secondary,[this.variantClass]:!!this.variant}}}},l={};var g=c(m,h,v,!1,C,null,null,null);function C(e){for(let i in l)this[i]=l[i]}var $=function(){return g.exports}();a.Badge=$,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
package/index.js DELETED
@@ -1,5 +0,0 @@
1
- import Badge from './src/Badge.vue';
2
-
3
- export {
4
- Badge
5
- };
package/src/Badge.vue DELETED
@@ -1,91 +0,0 @@
1
- <template>
2
- <component
3
- :is="component || type"
4
- :href="href"
5
- :to="to"
6
- class="badge"
7
- :class="classes">
8
- <slot />
9
- </component>
10
- </template>
11
-
12
- <script>
13
- import { Variant } from '@vue-interface/variant';
14
-
15
- export default {
16
-
17
- name: 'Badge',
18
-
19
- mixins: [
20
- Variant
21
- ],
22
-
23
- props: {
24
-
25
- /**
26
- * The component type.
27
- *
28
- * @property {String}
29
- */
30
- component: String,
31
-
32
- /**
33
- * If an href attribute is passed, the badge becomes an anchor.
34
- *
35
- * @property {String}
36
- */
37
- href: String,
38
-
39
- /**
40
- * The badge appear as pill shaped.
41
- *
42
- * @property {Boolean}
43
- */
44
- pill: Boolean,
45
-
46
- /**
47
- * The to route. If used, badge will be a router-link component.
48
- *
49
- * @property {Object|String}
50
- */
51
- to: [Object, String],
52
-
53
- /**
54
- * The variant name.
55
- *
56
- * @param {String}
57
- */
58
- variant: {
59
- type: String,
60
- default: 'primary'
61
- }
62
- },
63
-
64
- computed: {
65
-
66
- type() {
67
- if(this.to) {
68
- return 'router-link';
69
- }
70
-
71
- if(this.href) {
72
- return 'a';
73
- }
74
-
75
- return 'span';
76
- },
77
-
78
- variantClass() {
79
- return `bg-${this.variant}`;
80
- },
81
-
82
- classes() {
83
- return {
84
- 'badge-pill': this.pill,
85
- 'badge-secondary': this.secondary,
86
- [this.variantClass]: !!this.variant,
87
- };
88
- }
89
- }
90
- };
91
- </script>
package/tailwindcss/index.js DELETED
@@ -1,45 +0,0 @@
1
- const plugin = require('tailwindcss/plugin');
2
- const { colors } = require('tailwindcss/defaultTheme');
3
-
4
- module.exports = plugin(function({ addComponents, theme }) {
5
- addComponents({
6
- '.badge': {
7
- display: theme('badge.display'),
8
- padding: `${theme('badge.paddingY')} ${theme('badge.paddingX')}`,
9
- fontSize: theme('badge.fontSize'),
10
- fontWeight: theme('badge.fontWeight'),
11
- lineHeight: 1,
12
- color: theme('badge.color', colors.white),
13
- textAlign: 'center',
14
- whiteSpace: 'nowrap',
15
- verticalAlign: 'baseline',
16
- borderRadius: theme('badge.borderRadius'),
17
- },
18
-
19
- '.badge:empty': {
20
- display: 'none'
21
- },
22
-
23
- '.badge-pill': {
24
- borderRadius: '1000rem'
25
- },
26
-
27
- // Quick fix for badges in buttons
28
- '.btn .badge': {
29
- position: 'relative',
30
- top: '-1px'
31
- }
32
- });
33
- }, {
34
- theme: {
35
- badge: theme => ({
36
- display: 'inline-block',
37
- fontSize: '.75em',
38
- fontWeight: 'bold',
39
- color: theme('colors.white'),
40
- paddingY: '.25em',
41
- paddingX: '.5em',
42
- borderRadius: '.25rem',
43
- })
44
- }
45
- });
package/tailwindcss/safelist.js DELETED
@@ -1,5 +0,0 @@
1
- module.exports = function safelist() {
2
- return [{
3
- pattern: /badge\-/
4
- }];
5
- };