@bobbykim/manguito-theme 0.24.0 → 0.26.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 (10) hide show
  1. package/CHANGELOG.md +190 -0
  2. package/README.md +80 -55
  3. package/dist/core.cjs +2 -2
  4. package/dist/core.d.ts +3 -3
  5. package/dist/core.js +480 -384
  6. package/dist/mcl-theme-v4.css +747 -0
  7. package/package.json +20 -11
  8. package/dist/mcl-theme.cjs +0 -1
  9. package/dist/mcl-theme.d.ts +0 -12
  10. package/dist/mcl-theme.js +0 -540
package/package.json CHANGED
@@ -1,31 +1,40 @@
1
1
  {
2
2
  "name": "@bobbykim/manguito-theme",
3
- "version": "0.24.0",
3
+ "version": "0.26.0",
4
4
  "description": "main theme file for manguito components library. Other MCL components will need to import this file to run.",
5
5
  "type": "module",
6
6
  "publishConfig": {
7
7
  "access": "public"
8
8
  },
9
+ "keywords": [
10
+ "vue",
11
+ "vue3",
12
+ "components",
13
+ "tailwindcss",
14
+ "tailwind",
15
+ "theme",
16
+ "ui",
17
+ "design-system",
18
+ "component-library"
19
+ ],
9
20
  "files": [
10
- "dist"
21
+ "dist",
22
+ "README.md",
23
+ "CHANGELOG.md"
11
24
  ],
12
25
  "main": "./dist/core.cjs",
13
26
  "module": "./dist/core.js",
14
27
  "types": "./dist/core.d.ts",
15
28
  "exports": {
16
29
  ".": {
30
+ "types": "./dist/core.d.ts",
17
31
  "import": "./dist/core.js",
18
- "require": "./dist/core.cjs",
19
- "types": "./dist/core.d.ts"
32
+ "require": "./dist/core.cjs"
20
33
  },
21
- "./mcl-theme": {
22
- "import": "./dist/mcl-theme.js",
23
- "require": "./dist/mcl-theme.cjs",
24
- "types": "./dist/mcl-theme.d.ts"
25
- }
34
+ "./mcl-theme-v4.css": "./dist/mcl-theme-v4.css"
26
35
  },
27
36
  "scripts": {
28
- "build": "vite build"
37
+ "build": "vite build && cp lib/style/mcl-theme-v4.css dist/mcl-theme-v4.css"
29
38
  },
30
39
  "dependencies": {
31
40
  "@vueuse/core": "^12.0.0",
@@ -51,5 +60,5 @@
51
60
  "url": "https://github.com/bobbykim89/manguito-component-library.git"
52
61
  },
53
62
  "license": "MIT",
54
- "gitHead": "92ed1f261177034bd95ac0e3d60ba672e3473555"
63
+ "gitHead": "6cc7d9ea39279a8c924a0d4ef29a021f9e6463a6"
55
64
  }
package/dist/mcl-theme.cjs DELETED
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function z(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var f={},a={},d;function S(){return d||(d=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),Object.defineProperty(e,"default",{enumerable:!0,get:function(){return p}});function l(r,n){return{handler:r,config:n}}l.withOptions=function(r,n=()=>({})){const i=function(s){return{__options:s,handler:r(s),config:n(s)}};return i.__isOptionsFunction=!0,i.__pluginFunction=r,i.__configFunction=n,i};const p=l}(a)),a}var b;function y(){return b||(b=1,function(e){Object.defineProperty(e,"__esModule",{value:!0}),Object.defineProperty(e,"default",{enumerable:!0,get:function(){return r}});const l=p(S());function p(n){return n&&n.__esModule?n:{default:n}}const r=l.default}(f)),f}var g,c;function v(){if(c)return g;c=1;let e=y();return g=(e.__esModule?e:{default:e}).default,g}var w=v();const $=z(w),_=$.withOptions(()=>({addBase:e,theme:l,addComponents:p,addUtilities:r,e:n})=>{const i=l("colors"),s=Object.keys(i).filter(o=>typeof i[o]=="string"),u=s.reduce((o,t)=>!(t in i)||typeof i[t]!="string"?o:{...o,[`.mcl-list-${n(t)} li::before`]:{color:i[t]}},{}),h=s.reduce((o,t)=>["current","transparent","inherit"].includes(t)||!(t in i)||typeof i[t]!="string"?o:{...o,[`.mcl-link.text-${n(t)}`]:{"&:hover":{[`@apply text-${t}/60`]:{}}}},{}),x=s.reduce((o,t)=>!(t in i)||typeof i[t]!="string"?o:{...o,[`.btn.btn-${n(t)}`]:{[`@apply bg-${t}`]:{},"&:hover":{"@apply bg-opacity-70":{}},"&:focus":{[`@apply ring-4 ring-${t}`]:{}}},[`.btn.btn-invert.btn-${n(t)}`]:{[`@apply border-2 bg-transparent border-${t} text-${t}`]:{},"&:hover":{[`@apply bg-${t} text-white bg-opacity-100`]:{}},"&:focus":{[`@apply bg-${t} text-white`]:{}}},[`.btn-group .btn.btn-${n(t)}`]:{"&:focus":{"@apply ring-0":{}}},[`.btn.btn-${n(t)}.btn-no-ring`]:{"&:focus":{"@apply ring-0":{}}},[`.btn.btn-progress.btn-${n(t)}`]:{[`@apply before:bg-${t} border-${t} text-${t} bg-transparent`]:{},"&:hover, &:focus":{"@apply text-white":{}}}},{}),m=s.reduce((o,t)=>!(t in i)||typeof i[t]!="string"?o:{...o,[`.tooltip.tooltip-top.bg-${n(t)}`]:{[`@apply after:border-t-${t}`]:{}},[`.tooltip.tooltip-bottom.bg-${n(t)}`]:{[`@apply after:border-b-${t}`]:{}},[`.tooltip.tooltip-right.bg-${n(t)}`]:{[`@apply after:border-r-${t}`]:{}},[`.tooltip.tooltip-left.bg-${n(t)}`]:{[`@apply after:border-l-${t}`]:{}}},{});e({body:{fontSize:"1rem",lineHeight:"1.5"},h1:{fontSize:"30px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"30px"},"@screen lg":{fontSize:"48px"}},h2:{fontSize:"24px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"24px"},"@screen lg":{fontSize:"36px"}},h3:{fontSize:"18px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"18px"},"@screen lg":{fontSize:"20px"}},h4:{fontSize:"16px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"16px"},"@screen lg":{fontSize:"18px"}}}),p({".h1-sm":{fontSize:"24px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"24px"},"@screen lg":{fontSize:"36px"}},".h1-md":{fontSize:"30px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"30px"},"@screen lg":{fontSize:"48px"}},".h1-lg":{fontSize:"36px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"36px"},"@screen lg":{fontSize:"56px"}},".h1-xl":{fontSize:"56px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"56px"},"@screen lg":{fontSize:"72px"}},".h2-sm":{fontSize:"18px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"18px"},"@screen lg":{fontSize:"24px"}},".h2-md":{fontSize:"24px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"24px"},"@screen lg":{fontSize:"36px"}},".h2-lg":{fontSize:"30px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"30px"},"@screen lg":{fontSize:"48px"}},".h2-xl":{fontSize:"48px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"48px"},"@screen lg":{fontSize:"60px"}},".h3-sm":{fontSize:"16px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"16px"},"@screen lg":{fontSize:"16px"}},".h3-md":{fontSize:"18px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"18px"},"@screen lg":{fontSize:"20px"}},".h3-lg":{fontSize:"18px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"18px"},"@screen lg":{fontSize:"24px"}},".h3-xl":{fontSize:"30px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"30px"},"@screen lg":{fontSize:"36px"}},"h4-sm":{fontSize:"14px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"14px"},"@screen lg":{fontSize:"16px"}},"h4-md":{fontSize:"16px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"16px"},"@screen lg":{fontSize:"18px"}},"h4-lg":{fontSize:"16px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"16px"},"@screen lg":{fontSize:"20px"}},"h4-xl":{fontSize:"24px",fontWeight:"bold",lineHeight:"1.2","@screen md":{fontSize:"24px"},"@screen lg":{fontSize:"30px"}},".mcl-link":{color:l("colors.primary"),textDecoration:"underline","@apply transition-colors duration-200 ease-in":{},"&:hover":{"@apply text-primary/60":{}}},".mcl-list":{"list-style-position":"inside",padding:"0","margin-left":"1rem"},"ul .mcl-list":{"list-style":"none"},".mcl-list li":{"margin-bottom":"0.5rem"},".mcl-list li::before":{content:'"•"',"font-weight":"700",display:"inline-block",width:"1rem","margin-left":"-1rem"},".mcl-list.mcl-list-sm li::before":{"font-weight":"500"},".mcl-list.mcl-list-lg li::before":{"font-weight":"900"},".btn":{padding:"0.5rem 1rem",cursor:"pointer","font-size":"1rem",transition:"all 300ms linear",overflow:"hidden",display:"inline-block","font-weight":"bold","@apply outline-none ring-offset-white ring-offset-2 bg-primary text-center rounded":{},"&:hover":{"@apply bg-opacity-70":{}},"&:focus":{"@apply ring-4 ring-primary":{}}},".btn.btn-round":{"@apply rounded-full":{}},".btn.btn-full":{display:"block",width:"100%"},".btn.btn-sm":{padding:"0.25rem 0.5rem","font-size":"0.875rem"},".btn.btn-lg":{padding:"0.625rem 1.25rem","font-size":"1.125rem"},".btn-group":{"@apply inline-flex":{}},".btn-group.btn-group-span":{"@apply w-full":{}},".btn-group.btn-group-span .btn":{display:"block",width:"100%"},".btn-group .btn":{"@apply first:rounded-l last:rounded-r rounded-none ring-offset-0":{},"&:focus":{"@apply ring-0":{}}},".btn.btn-no-ring":{"@apply ring-offset-0":{},"&:focus":{"@apply ring-0":{}}},".btn.btn-invert":{"@apply border-2 border-primary text-primary bg-white":{},"&:hover":{"@apply bg-primary text-white bg-opacity-100":{}}},".btn.btn-progress":{position:"relative","&::before":{content:'""',position:"absolute",height:"100%",width:"0",bottom:"0",left:"0",transition:"width 300ms linear"},"@apply before:bg-primary border-2 border-primary text-primary bg-transparent":{}},".btn.btn-progress > *":{position:"relative"},".btn.btn-progress.btn-progress-r":{"&::before":{left:"100%",transition:"all 300ms linear"}},".btn.btn-progress:hover, .btn.btn-progress:focus":{"@apply text-white":{},"&::before":{width:"100%"}},".btn.btn-progress.btn-progress-r:hover, .btn.btn-progress.btn-progress-r:focus":{"&::before":{width:"100%",left:"0"}},".tooltip":{"@apply font-normal text-sm transition-opacity duration-200 p-2xs absolute rounded text-center drop-shadow-md":{}},".tooltip.tooltip-top":{left:"50%",bottom:"110%",transform:"translateX(-50%)","&::after":{content:'" "',position:"absolute",top:"100%",left:"50%","margin-left":"-5px","border-width":"5px","border-style":"solid"},"@apply after:border-t-dark-3 after:border-x-transparent after:border-b-transparent":{}},".tooltip.tooltip-bottom":{left:"50%",top:"110%",transform:"translateX(-50%)","&::after":{content:'" "',position:"absolute",bottom:"100%",left:"50%","margin-left":"-5px","border-width":"5px","border-style":"solid"},"@apply after:border-t-transparent after:border-x-transparent after:border-b-dark-3":{}},".tooltip.tooltip-left":{top:"50%",right:"110%",transform:"translateY(-50%)","&::after":{content:'" "',position:"absolute",top:"50%",left:"100%","margin-top":"-5px","border-width":"5px","border-style":"solid"},"@apply after:border-y-transparent after:border-r-transparent after:border-l-dark-3":{}},".tooltip.tooltip-right":{top:"50%",left:"110%",transform:"translateY(-50%)","&::after":{content:'" "',position:"absolute",top:"50%",right:"100%","margin-top":"-5px","border-width":"5px","border-style":"solid"},"@apply after:border-y-transparent after:border-l-transparent after:border-r-dark-3":{}}}),r(u),r(x),r(h),r(m)},(e={})=>{const l={primary:"#ec489a",secondary:"#00feda",success:"#78be20",info:"#00a3e0",warning:"#f1ac18",danger:"#cc2f2f","light-1":"#fafafa","light-2":"#f1f1f1","light-3":"#e8e8e8","light-4":"#d0d0d0","dark-1":"#747474","dark-2":"#484848","dark-3":"#1f2937","dark-4":"#191919"},p={"3xs":"4px","2xs":"8px",xs:"16px",sm:"24px",md:"32px",lg:"48px",xl:"64px","2xl":"96px","3xl":"128px"};return Object.keys(l).forEach(r=>{e.colors!==void 0&&e.colors[r]!==void 0&&(l[r]=e.colors[r])}),Object.keys(p).forEach(r=>{e.spacing!==void 0&&e.spacing[r]!==void 0&&(p[r]=e.spacing[r])}),{theme:{fontSize:{xs:"12px",sm:"14px",md:"16px",lg:"18px",xl:"20px"},container:{center:!0,screens:{sm:"640px",md:"768px",lg:"1024px",xl:"1280px"}},extend:{colors:l,spacing:p}},safelist:["mcl-list","mcl-link","btn","tooltip",{pattern:/^btn-/},{pattern:/^tooltip-/},{pattern:/^mcl-list-/}]}});exports.mclTheme=_;
package/dist/mcl-theme.d.ts DELETED
@@ -1,12 +0,0 @@
1
- import { Config } from 'tailwindcss/types/config';
2
- import { PluginCreator } from 'tailwindcss/types/config';
3
-
4
- export declare const mclTheme: {
5
- (options: Partial<Config> | undefined): {
6
- handler: PluginCreator;
7
- config?: Partial<Config>;
8
- };
9
- __isOptionsFunction: true;
10
- };
11
-
12
- export { }
package/dist/mcl-theme.js DELETED
@@ -1,540 +0,0 @@
1
- function z(e) {
2
- return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
3
- }
4
- var f = {}, a = {}, d;
5
- function S() {
6
- return d || (d = 1, function(e) {
7
- Object.defineProperty(e, "__esModule", {
8
- value: !0
9
- }), Object.defineProperty(e, "default", {
10
- enumerable: !0,
11
- get: function() {
12
- return p;
13
- }
14
- });
15
- function l(r, n) {
16
- return {
17
- handler: r,
18
- config: n
19
- };
20
- }
21
- l.withOptions = function(r, n = () => ({})) {
22
- const i = function(s) {
23
- return {
24
- __options: s,
25
- handler: r(s),
26
- config: n(s)
27
- };
28
- };
29
- return i.__isOptionsFunction = !0, i.__pluginFunction = r, i.__configFunction = n, i;
30
- };
31
- const p = l;
32
- }(a)), a;
33
- }
34
- var b;
35
- function y() {
36
- return b || (b = 1, function(e) {
37
- Object.defineProperty(e, "__esModule", {
38
- value: !0
39
- }), Object.defineProperty(e, "default", {
40
- enumerable: !0,
41
- get: function() {
42
- return r;
43
- }
44
- });
45
- const l = /* @__PURE__ */ p(S());
46
- function p(n) {
47
- return n && n.__esModule ? n : {
48
- default: n
49
- };
50
- }
51
- const r = l.default;
52
- }(f)), f;
53
- }
54
- var g, c;
55
- function v() {
56
- if (c) return g;
57
- c = 1;
58
- let e = y();
59
- return g = (e.__esModule ? e : { default: e }).default, g;
60
- }
61
- var w = v();
62
- const $ = /* @__PURE__ */ z(w), H = $.withOptions(
63
- () => ({ addBase: e, theme: l, addComponents: p, addUtilities: r, e: n }) => {
64
- const i = l("colors"), s = Object.keys(i).filter(
65
- (o) => typeof i[o] == "string"
66
- ), u = s.reduce((o, t) => !(t in i) || typeof i[t] != "string" ? o : {
67
- ...o,
68
- [`.mcl-list-${n(t)} li::before`]: {
69
- color: i[t]
70
- }
71
- }, {}), h = s.reduce((o, t) => ["current", "transparent", "inherit"].includes(t) || !(t in i) || typeof i[t] != "string" ? o : {
72
- ...o,
73
- [`.mcl-link.text-${n(t)}`]: {
74
- "&:hover": {
75
- [`@apply text-${t}/60`]: {}
76
- }
77
- }
78
- }, {}), x = s.reduce((o, t) => !(t in i) || typeof i[t] != "string" ? o : {
79
- ...o,
80
- [`.btn.btn-${n(t)}`]: {
81
- [`@apply bg-${t}`]: {},
82
- "&:hover": {
83
- "@apply bg-opacity-70": {}
84
- },
85
- "&:focus": {
86
- [`@apply ring-4 ring-${t}`]: {}
87
- }
88
- },
89
- [`.btn.btn-invert.btn-${n(t)}`]: {
90
- [`@apply border-2 bg-transparent border-${t} text-${t}`]: {},
91
- "&:hover": {
92
- [`@apply bg-${t} text-white bg-opacity-100`]: {}
93
- },
94
- "&:focus": {
95
- [`@apply bg-${t} text-white`]: {}
96
- }
97
- },
98
- [`.btn-group .btn.btn-${n(t)}`]: {
99
- "&:focus": {
100
- "@apply ring-0": {}
101
- }
102
- },
103
- [`.btn.btn-${n(t)}.btn-no-ring`]: {
104
- "&:focus": {
105
- "@apply ring-0": {}
106
- }
107
- },
108
- [`.btn.btn-progress.btn-${n(t)}`]: {
109
- [`@apply before:bg-${t} border-${t} text-${t} bg-transparent`]: {},
110
- "&:hover, &:focus": {
111
- "@apply text-white": {}
112
- }
113
- }
114
- }, {}), m = s.reduce((o, t) => !(t in i) || typeof i[t] != "string" ? o : {
115
- ...o,
116
- [`.tooltip.tooltip-top.bg-${n(t)}`]: {
117
- [`@apply after:border-t-${t}`]: {}
118
- },
119
- [`.tooltip.tooltip-bottom.bg-${n(t)}`]: {
120
- [`@apply after:border-b-${t}`]: {}
121
- },
122
- [`.tooltip.tooltip-right.bg-${n(t)}`]: {
123
- [`@apply after:border-r-${t}`]: {}
124
- },
125
- [`.tooltip.tooltip-left.bg-${n(t)}`]: {
126
- [`@apply after:border-l-${t}`]: {}
127
- }
128
- }, {});
129
- e({
130
- body: {
131
- // default font size
132
- fontSize: "1rem",
133
- lineHeight: "1.5"
134
- },
135
- h1: {
136
- // default medium size
137
- fontSize: "30px",
138
- fontWeight: "bold",
139
- lineHeight: "1.2",
140
- "@screen md": { fontSize: "30px" },
141
- "@screen lg": { fontSize: "48px" }
142
- },
143
- h2: {
144
- // default medium size
145
- fontSize: "24px",
146
- fontWeight: "bold",
147
- lineHeight: "1.2",
148
- "@screen md": { fontSize: "24px" },
149
- "@screen lg": { fontSize: "36px" }
150
- },
151
- h3: {
152
- // default medium size
153
- fontSize: "18px",
154
- fontWeight: "bold",
155
- lineHeight: "1.2",
156
- "@screen md": { fontSize: "18px" },
157
- "@screen lg": { fontSize: "20px" }
158
- },
159
- h4: {
160
- // default medium size
161
- fontSize: "16px",
162
- fontWeight: "bold",
163
- lineHeight: "1.2",
164
- "@screen md": { fontSize: "16px" },
165
- "@screen lg": { fontSize: "18px" }
166
- }
167
- }), p({
168
- ".h1-sm": {
169
- fontSize: "24px",
170
- fontWeight: "bold",
171
- lineHeight: "1.2",
172
- "@screen md": { fontSize: "24px" },
173
- "@screen lg": { fontSize: "36px" }
174
- },
175
- ".h1-md": {
176
- fontSize: "30px",
177
- fontWeight: "bold",
178
- lineHeight: "1.2",
179
- "@screen md": { fontSize: "30px" },
180
- "@screen lg": { fontSize: "48px" }
181
- },
182
- ".h1-lg": {
183
- fontSize: "36px",
184
- fontWeight: "bold",
185
- lineHeight: "1.2",
186
- "@screen md": { fontSize: "36px" },
187
- "@screen lg": { fontSize: "56px" }
188
- },
189
- ".h1-xl": {
190
- fontSize: "56px",
191
- fontWeight: "bold",
192
- lineHeight: "1.2",
193
- "@screen md": { fontSize: "56px" },
194
- "@screen lg": { fontSize: "72px" }
195
- },
196
- ".h2-sm": {
197
- fontSize: "18px",
198
- fontWeight: "bold",
199
- lineHeight: "1.2",
200
- "@screen md": { fontSize: "18px" },
201
- "@screen lg": { fontSize: "24px" }
202
- },
203
- ".h2-md": {
204
- fontSize: "24px",
205
- fontWeight: "bold",
206
- lineHeight: "1.2",
207
- "@screen md": { fontSize: "24px" },
208
- "@screen lg": { fontSize: "36px" }
209
- },
210
- ".h2-lg": {
211
- fontSize: "30px",
212
- fontWeight: "bold",
213
- lineHeight: "1.2",
214
- "@screen md": { fontSize: "30px" },
215
- "@screen lg": { fontSize: "48px" }
216
- },
217
- ".h2-xl": {
218
- fontSize: "48px",
219
- fontWeight: "bold",
220
- lineHeight: "1.2",
221
- "@screen md": { fontSize: "48px" },
222
- "@screen lg": { fontSize: "60px" }
223
- },
224
- ".h3-sm": {
225
- fontSize: "16px",
226
- fontWeight: "bold",
227
- lineHeight: "1.2",
228
- "@screen md": { fontSize: "16px" },
229
- "@screen lg": { fontSize: "16px" }
230
- },
231
- ".h3-md": {
232
- fontSize: "18px",
233
- fontWeight: "bold",
234
- lineHeight: "1.2",
235
- "@screen md": { fontSize: "18px" },
236
- "@screen lg": { fontSize: "20px" }
237
- },
238
- ".h3-lg": {
239
- fontSize: "18px",
240
- fontWeight: "bold",
241
- lineHeight: "1.2",
242
- "@screen md": { fontSize: "18px" },
243
- "@screen lg": { fontSize: "24px" }
244
- },
245
- ".h3-xl": {
246
- fontSize: "30px",
247
- fontWeight: "bold",
248
- lineHeight: "1.2",
249
- "@screen md": { fontSize: "30px" },
250
- "@screen lg": { fontSize: "36px" }
251
- },
252
- "h4-sm": {
253
- fontSize: "14px",
254
- fontWeight: "bold",
255
- lineHeight: "1.2",
256
- "@screen md": { fontSize: "14px" },
257
- "@screen lg": { fontSize: "16px" }
258
- },
259
- "h4-md": {
260
- fontSize: "16px",
261
- fontWeight: "bold",
262
- lineHeight: "1.2",
263
- "@screen md": { fontSize: "16px" },
264
- "@screen lg": { fontSize: "18px" }
265
- },
266
- "h4-lg": {
267
- fontSize: "16px",
268
- fontWeight: "bold",
269
- lineHeight: "1.2",
270
- "@screen md": { fontSize: "16px" },
271
- "@screen lg": { fontSize: "20px" }
272
- },
273
- "h4-xl": {
274
- fontSize: "24px",
275
- fontWeight: "bold",
276
- lineHeight: "1.2",
277
- "@screen md": { fontSize: "24px" },
278
- "@screen lg": { fontSize: "30px" }
279
- },
280
- ".mcl-link": {
281
- color: l("colors.primary"),
282
- textDecoration: "underline",
283
- "@apply transition-colors duration-200 ease-in": {},
284
- "&:hover": {
285
- "@apply text-primary/60": {}
286
- }
287
- },
288
- ".mcl-list": {
289
- "list-style-position": "inside",
290
- padding: "0",
291
- "margin-left": "1rem"
292
- },
293
- "ul .mcl-list": {
294
- "list-style": "none"
295
- },
296
- ".mcl-list li": {
297
- "margin-bottom": "0.5rem"
298
- },
299
- ".mcl-list li::before": {
300
- content: '"•"',
301
- "font-weight": "700",
302
- display: "inline-block",
303
- width: "1rem",
304
- "margin-left": "-1rem"
305
- },
306
- ".mcl-list.mcl-list-sm li::before": {
307
- "font-weight": "500"
308
- },
309
- ".mcl-list.mcl-list-lg li::before": {
310
- "font-weight": "900"
311
- },
312
- ".btn": {
313
- padding: "0.5rem 1rem",
314
- cursor: "pointer",
315
- "font-size": "1rem",
316
- transition: "all 300ms linear",
317
- overflow: "hidden",
318
- display: "inline-block",
319
- "font-weight": "bold",
320
- "@apply outline-none ring-offset-white ring-offset-2 bg-primary text-center rounded": {},
321
- "&:hover": {
322
- "@apply bg-opacity-70": {}
323
- },
324
- "&:focus": {
325
- "@apply ring-4 ring-primary": {}
326
- }
327
- },
328
- ".btn.btn-round": {
329
- "@apply rounded-full": {}
330
- },
331
- ".btn.btn-full": {
332
- display: "block",
333
- width: "100%"
334
- },
335
- ".btn.btn-sm": {
336
- padding: "0.25rem 0.5rem",
337
- "font-size": "0.875rem"
338
- },
339
- ".btn.btn-lg": {
340
- padding: "0.625rem 1.25rem",
341
- "font-size": "1.125rem"
342
- },
343
- ".btn-group": {
344
- "@apply inline-flex": {}
345
- },
346
- ".btn-group.btn-group-span": {
347
- "@apply w-full": {}
348
- },
349
- ".btn-group.btn-group-span .btn": {
350
- display: "block",
351
- width: "100%"
352
- },
353
- ".btn-group .btn": {
354
- "@apply first:rounded-l last:rounded-r rounded-none ring-offset-0": {},
355
- "&:focus": {
356
- "@apply ring-0": {}
357
- }
358
- },
359
- ".btn.btn-no-ring": {
360
- "@apply ring-offset-0": {},
361
- "&:focus": {
362
- "@apply ring-0": {}
363
- }
364
- },
365
- ".btn.btn-invert": {
366
- "@apply border-2 border-primary text-primary bg-white": {},
367
- "&:hover": {
368
- "@apply bg-primary text-white bg-opacity-100": {}
369
- }
370
- },
371
- ".btn.btn-progress": {
372
- position: "relative",
373
- "&::before": {
374
- content: '""',
375
- position: "absolute",
376
- height: "100%",
377
- width: "0",
378
- bottom: "0",
379
- left: "0",
380
- transition: "width 300ms linear"
381
- },
382
- "@apply before:bg-primary border-2 border-primary text-primary bg-transparent": {}
383
- },
384
- ".btn.btn-progress > *": {
385
- position: "relative"
386
- },
387
- ".btn.btn-progress.btn-progress-r": {
388
- "&::before": {
389
- left: "100%",
390
- transition: "all 300ms linear"
391
- }
392
- },
393
- ".btn.btn-progress:hover, .btn.btn-progress:focus": {
394
- "@apply text-white": {},
395
- "&::before": {
396
- width: "100%"
397
- }
398
- },
399
- ".btn.btn-progress.btn-progress-r:hover, .btn.btn-progress.btn-progress-r:focus": {
400
- "&::before": {
401
- width: "100%",
402
- left: "0"
403
- }
404
- },
405
- ".tooltip": {
406
- "@apply font-normal text-sm transition-opacity duration-200 p-2xs absolute rounded text-center drop-shadow-md": {}
407
- },
408
- ".tooltip.tooltip-top": {
409
- left: "50%",
410
- bottom: "110%",
411
- transform: "translateX(-50%)",
412
- "&::after": {
413
- content: '" "',
414
- position: "absolute",
415
- top: "100%",
416
- left: "50%",
417
- "margin-left": "-5px",
418
- "border-width": "5px",
419
- "border-style": "solid"
420
- },
421
- "@apply after:border-t-dark-3 after:border-x-transparent after:border-b-transparent": {}
422
- },
423
- ".tooltip.tooltip-bottom": {
424
- left: "50%",
425
- top: "110%",
426
- transform: "translateX(-50%)",
427
- "&::after": {
428
- content: '" "',
429
- position: "absolute",
430
- bottom: "100%",
431
- left: "50%",
432
- "margin-left": "-5px",
433
- "border-width": "5px",
434
- "border-style": "solid"
435
- },
436
- "@apply after:border-t-transparent after:border-x-transparent after:border-b-dark-3": {}
437
- },
438
- ".tooltip.tooltip-left": {
439
- top: "50%",
440
- right: "110%",
441
- transform: "translateY(-50%)",
442
- "&::after": {
443
- content: '" "',
444
- position: "absolute",
445
- top: "50%",
446
- left: "100%",
447
- "margin-top": "-5px",
448
- "border-width": "5px",
449
- "border-style": "solid"
450
- },
451
- "@apply after:border-y-transparent after:border-r-transparent after:border-l-dark-3": {}
452
- },
453
- ".tooltip.tooltip-right": {
454
- top: "50%",
455
- left: "110%",
456
- transform: "translateY(-50%)",
457
- "&::after": {
458
- content: '" "',
459
- position: "absolute",
460
- top: "50%",
461
- right: "100%",
462
- "margin-top": "-5px",
463
- "border-width": "5px",
464
- "border-style": "solid"
465
- },
466
- "@apply after:border-y-transparent after:border-l-transparent after:border-r-dark-3": {}
467
- }
468
- }), r(u), r(x), r(h), r(m);
469
- },
470
- (e = {}) => {
471
- const l = {
472
- primary: "#ec489a",
473
- secondary: "#00feda",
474
- success: "#78be20",
475
- info: "#00a3e0",
476
- warning: "#f1ac18",
477
- danger: "#cc2f2f",
478
- "light-1": "#fafafa",
479
- "light-2": "#f1f1f1",
480
- "light-3": "#e8e8e8",
481
- "light-4": "#d0d0d0",
482
- "dark-1": "#747474",
483
- "dark-2": "#484848",
484
- "dark-3": "#1f2937",
485
- "dark-4": "#191919"
486
- }, p = {
487
- "3xs": "4px",
488
- "2xs": "8px",
489
- xs: "16px",
490
- sm: "24px",
491
- md: "32px",
492
- lg: "48px",
493
- xl: "64px",
494
- "2xl": "96px",
495
- "3xl": "128px"
496
- };
497
- return Object.keys(l).forEach((r) => {
498
- e.colors !== void 0 && e.colors[r] !== void 0 && (l[r] = e.colors[r]);
499
- }), Object.keys(p).forEach((r) => {
500
- e.spacing !== void 0 && e.spacing[r] !== void 0 && (p[r] = e.spacing[r]);
501
- }), {
502
- theme: {
503
- fontSize: {
504
- xs: "12px",
505
- sm: "14px",
506
- md: "16px",
507
- lg: "18px",
508
- xl: "20px"
509
- },
510
- container: {
511
- center: !0,
512
- screens: {
513
- sm: "640px",
514
- md: "768px",
515
- lg: "1024px",
516
- xl: "1280px"
517
- }
518
- },
519
- extend: {
520
- colors: l,
521
- spacing: p
522
- }
523
- },
524
- safelist: [
525
- // static patterns
526
- "mcl-list",
527
- "mcl-link",
528
- "btn",
529
- "tooltip",
530
- // dynamic patterns
531
- { pattern: /^btn-/ },
532
- { pattern: /^tooltip-/ },
533
- { pattern: /^mcl-list-/ }
534
- ]
535
- };
536
- }
537
- );
538
- export {
539
- H as mclTheme
540
- };