@bagelink/vue 0.0.198 → 0.0.200

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.
@@ -1 +1 @@
1
- {"version":3,"file":"Btn.vue.d.ts","sourceRoot":"","sources":["../../src/components/Btn.vue"],"names":[],"mappings":"AAuCA;AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiT9D,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
1
+ {"version":3,"file":"Btn.vue.d.ts","sourceRoot":"","sources":["../../src/components/Btn.vue"],"names":[],"mappings":"AAuCA;AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4T9D,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
package/dist/index.cjs CHANGED
@@ -14685,8 +14685,8 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
14685
14685
  },
14686
14686
  setup(__props) {
14687
14687
  vue.useCssVars((_ctx) => ({
14688
- "720e4596": computedBackgroundColor.value,
14689
- "31e8e060": cumputedTextColor.value
14688
+ "e0356e0a": computedBackgroundColor.value,
14689
+ "458dc816": cumputedTextColor.value
14690
14690
  }));
14691
14691
  const slots = vue.useSlots();
14692
14692
  const props2 = __props;
@@ -14699,13 +14699,21 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
14699
14699
  color: props2.flat ? "var(--bgl-black)" : "var(--bgl-white)"
14700
14700
  })
14701
14701
  );
14702
+ function getThemeColors(theme) {
14703
+ return {
14704
+ ...computedDefaultColors.value,
14705
+ ...theme,
14706
+ color: props2.flat ? theme.backgroundColor : theme.color
14707
+ };
14708
+ }
14702
14709
  const themes = {
14703
- red: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-red)" },
14704
- black: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-black)" },
14705
- green: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-green)", color: "var(--bgl-white)" },
14706
- gray: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-black)" },
14707
- light: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-primary-light)", color: "var(--bgl-primary)" },
14708
- "gray-light": { ...computedDefaultColors.value, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-gray)" }
14710
+ red: getThemeColors({ backgroundColor: "var(--bgl-red)" }),
14711
+ black: getThemeColors({ backgroundColor: "var(--bgl-black)" }),
14712
+ green: getThemeColors({ backgroundColor: "var(--bgl-green)", color: "var(--bgl-white)" }),
14713
+ blue: getThemeColors({ backgroundColor: "var(--bgl-blue)", color: "var(--bgl-white)" }),
14714
+ gray: getThemeColors({ backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-black)" }),
14715
+ light: getThemeColors({ backgroundColor: "var(--bgl-primary-light)", color: "var(--bgl-primary)" }),
14716
+ "gray-light": getThemeColors({ backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-gray)" })
14709
14717
  };
14710
14718
  const cumputedTextColor = vue.computed(
14711
14719
  () => {
@@ -14762,7 +14770,7 @@ const _export_sfc = (sfc, props2) => {
14762
14770
  }
14763
14771
  return target;
14764
14772
  };
14765
- const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-19291b41"]]);
14773
+ const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-718ff632"]]);
14766
14774
  const _hoisted_1$X = { class: "tool-bar" };
14767
14775
  const _hoisted_2$P = { class: "modal-title" };
14768
14776
  const _hoisted_3$I = { class: "modal-footer mt-3" };
package/dist/index.mjs CHANGED
@@ -14683,8 +14683,8 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
14683
14683
  },
14684
14684
  setup(__props) {
14685
14685
  useCssVars((_ctx) => ({
14686
- "720e4596": computedBackgroundColor.value,
14687
- "31e8e060": cumputedTextColor.value
14686
+ "e0356e0a": computedBackgroundColor.value,
14687
+ "458dc816": cumputedTextColor.value
14688
14688
  }));
14689
14689
  const slots = useSlots();
14690
14690
  const props2 = __props;
@@ -14697,13 +14697,21 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
14697
14697
  color: props2.flat ? "var(--bgl-black)" : "var(--bgl-white)"
14698
14698
  })
14699
14699
  );
14700
+ function getThemeColors(theme) {
14701
+ return {
14702
+ ...computedDefaultColors.value,
14703
+ ...theme,
14704
+ color: props2.flat ? theme.backgroundColor : theme.color
14705
+ };
14706
+ }
14700
14707
  const themes = {
14701
- red: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-red)" },
14702
- black: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-black)" },
14703
- green: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-green)", color: "var(--bgl-white)" },
14704
- gray: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-black)" },
14705
- light: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-primary-light)", color: "var(--bgl-primary)" },
14706
- "gray-light": { ...computedDefaultColors.value, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-gray)" }
14708
+ red: getThemeColors({ backgroundColor: "var(--bgl-red)" }),
14709
+ black: getThemeColors({ backgroundColor: "var(--bgl-black)" }),
14710
+ green: getThemeColors({ backgroundColor: "var(--bgl-green)", color: "var(--bgl-white)" }),
14711
+ blue: getThemeColors({ backgroundColor: "var(--bgl-blue)", color: "var(--bgl-white)" }),
14712
+ gray: getThemeColors({ backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-black)" }),
14713
+ light: getThemeColors({ backgroundColor: "var(--bgl-primary-light)", color: "var(--bgl-primary)" }),
14714
+ "gray-light": getThemeColors({ backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-gray)" })
14707
14715
  };
14708
14716
  const cumputedTextColor = computed(
14709
14717
  () => {
@@ -14760,7 +14768,7 @@ const _export_sfc = (sfc, props2) => {
14760
14768
  }
14761
14769
  return target;
14762
14770
  };
14763
- const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-19291b41"]]);
14771
+ const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-718ff632"]]);
14764
14772
  const _hoisted_1$X = { class: "tool-bar" };
14765
14773
  const _hoisted_2$P = { class: "modal-title" };
14766
14774
  const _hoisted_3$I = { class: "modal-footer mt-3" };
package/dist/style.css CHANGED
@@ -306,16 +306,16 @@
306
306
  }
307
307
  }
308
308
 
309
- .loading[data-v-19291b41] {
309
+ .loading[data-v-718ff632] {
310
310
  border: 1px solid var(--bgl-white);
311
311
  border-bottom: 2px solid var(--bgl-white);
312
- animation: spin-19291b41 1s linear infinite;
312
+ animation: spin-718ff632 1s linear infinite;
313
313
  border-radius: 100px;
314
314
  width: 1rem;
315
315
  height: 1rem;
316
316
  margin: auto;
317
317
  }
318
- @keyframes spin-19291b41 {
318
+ @keyframes spin-718ff632 {
319
319
  0% {
320
320
  transform: rotate(0deg);
321
321
  }
@@ -323,7 +323,7 @@
323
323
  transform: rotate(360deg);
324
324
  }
325
325
  }
326
- .btn-icon[data-v-19291b41] {
326
+ .btn-icon[data-v-718ff632] {
327
327
  height: var(--btn-height);
328
328
  width: var(--btn-height);
329
329
  border-radius: 100%;
@@ -333,97 +333,97 @@
333
333
  flex-shrink: 0;
334
334
  transition: var(--bgl-transition);
335
335
  }
336
- .btn[data-v-19291b41] {
336
+ .btn[data-v-718ff632] {
337
337
  padding-left: var(--btn-padding);
338
338
  padding-right: var(--btn-padding);
339
339
  transition: var(--bgl-transition);
340
340
  text-decoration: none;
341
341
  }
342
- .btn[disabled="true"][data-v-19291b41] {
342
+ .btn[disabled="true"][data-v-718ff632] {
343
343
  opacity: 0.5;
344
344
  cursor: not-allowed;
345
345
  }
346
- .btn-flex[data-v-19291b41] {
346
+ .btn-flex[data-v-718ff632] {
347
347
  display: flex;
348
348
  align-items: center;
349
349
  gap: 0.5rem;
350
350
  justify-content: center;
351
351
  }
352
- .btn .icon-font[data-v-19291b41] {
352
+ .btn .icon-font[data-v-718ff632] {
353
353
  font-size: calc(var(--input-font-size) * 1.3);
354
354
  }
355
- .btn[data-v-19291b41],
356
- .btn-icon[data-v-19291b41] {
357
- background-color: var(--720e4596);
358
- color: var(--31e8e060);
355
+ .btn[data-v-718ff632],
356
+ .btn-icon[data-v-718ff632] {
357
+ background-color: var(--e0356e0a);
358
+ color: var(--458dc816);
359
359
  }
360
- .btn[data-v-19291b41]:hover,
361
- .btn-icon[data-v-19291b41]:hover {
360
+ .btn[data-v-718ff632]:hover,
361
+ .btn-icon[data-v-718ff632]:hover {
362
362
  filter: var(--bgl-hover-filter);
363
363
  }
364
- .btn[data-v-19291b41]:active,
365
- .btn-icon[data-v-19291b41]:active {
364
+ .btn[data-v-718ff632]:active,
365
+ .btn-icon[data-v-718ff632]:active {
366
366
  filter: var(--bgl-active-filter);
367
367
  }
368
- .btn.flatBtn[data-v-19291b41] {
368
+ .btn.flatBtn[data-v-718ff632] {
369
369
  padding-left: var(--btn-padding);
370
370
  padding-right: var(--btn-padding);
371
371
  background: transparent;
372
372
  }
373
- .btn-icon.flatBtn[data-v-19291b41] {
373
+ .btn-icon.flatBtn[data-v-718ff632] {
374
374
  background: transparent;
375
375
  }
376
- .btn.flatBtn[data-v-19291b41]:hover,
377
- .btn-icon.flatBtn[data-v-19291b41]:hover {
376
+ .btn.flatBtn[data-v-718ff632]:hover,
377
+ .btn-icon.flatBtn[data-v-718ff632]:hover {
378
378
  filter: var(--bgl-active-filter);
379
379
  }
380
- .btn.flatBtn[data-v-19291b41]:active,
381
- .btn-icon.flatBtn[data-v-19291b41]:active {
380
+ .btn.flatBtn[data-v-718ff632]:active,
381
+ .btn-icon.flatBtn[data-v-718ff632]:active {
382
382
  background: var(--bgl-white);
383
383
  filter: var(--bgl-hover-filter);
384
384
  }
385
- .btn.flatBtn.red[data-v-19291b41],
386
- .btn-icon.flatBtn.red[data-v-19291b41] {
385
+ .btn.flatBtn.red[data-v-718ff632],
386
+ .btn-icon.flatBtn.red[data-v-718ff632] {
387
387
  color: var(--bgl-red);
388
388
  }
389
- .btn.flatBtn.light[data-v-19291b41],
390
- .btn-icon.flatBtn.light[data-v-19291b41] {
389
+ .btn.flatBtn.light[data-v-718ff632],
390
+ .btn-icon.flatBtn.light[data-v-718ff632] {
391
391
  color: var(--bgl-primary-tint);
392
392
  }
393
- .btn.flatBtn.black[data-v-19291b41],
394
- .btn-icon.flatBtn.black[data-v-19291b41] {
393
+ .btn.flatBtn.black[data-v-718ff632],
394
+ .btn-icon.flatBtn.black[data-v-718ff632] {
395
395
  color: var(--bgl-black);
396
396
  }
397
- .btn.flatBtn.gray[data-v-19291b41],
398
- .btn-icon.flatBtn.gray[data-v-19291b41] {
397
+ .btn.flatBtn.gray[data-v-718ff632],
398
+ .btn-icon.flatBtn.gray[data-v-718ff632] {
399
399
  color: var(--bgl-gray);
400
400
  }
401
- .btn.thin[data-v-19291b41] {
401
+ .btn.thin[data-v-718ff632] {
402
402
  padding-left: calc(var(--btn-padding) / 2);
403
403
  padding-right: calc(var(--btn-padding) / 2);
404
404
  }
405
- .btn.round[data-v-19291b41] {
405
+ .btn.round[data-v-718ff632] {
406
406
  border-radius: calc(var(--btn-border-radius) * 2);
407
407
  }
408
- .btn-icon.thin[data-v-19291b41] {
408
+ .btn-icon.thin[data-v-718ff632] {
409
409
  height: calc(var(--btn-height) / 1.5);
410
410
  width: calc(var(--btn-height) / 1.5);
411
411
  line-height: 1;
412
412
  }
413
- [dir="rtl"] .icon-font[data-v-19291b41] {
413
+ [dir="rtl"] .icon-font[data-v-718ff632] {
414
414
  transform: rotateY(180deg);
415
415
  }
416
- .btn-border[data-v-19291b41] {
417
- outline: 1px solid var(--720e4596);
418
- color: var(--720e4596);
416
+ .btn-border[data-v-718ff632] {
417
+ outline: 1px solid var(--e0356e0a);
418
+ color: var(--e0356e0a);
419
419
  background: transparent;
420
420
  }
421
- .btn-border[data-v-19291b41]:hover {
421
+ .btn-border[data-v-718ff632]:hover {
422
422
  color: var(--bgl-white);
423
- background: var(--720e4596);
423
+ background: var(--e0356e0a);
424
424
  filter: brightness(100%);
425
425
  }
426
- .btn-border[data-v-19291b41]:active {
426
+ .btn-border[data-v-718ff632]:active {
427
427
  filter: brightness(80%);
428
428
  }
429
429
  .bg-dark {
@@ -4,5 +4,5 @@ export type { Tables, TableToTypeMapping } from '@bagelink/sdk';
4
4
  export type { StorageFile } from './file';
5
5
  export * from './BagelField';
6
6
  export * from './BtnOptions';
7
- export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green';
7
+ export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green' | 'blue';
8
8
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxE,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAE7B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,OAAO,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxE,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAE7B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,OAAO,GAAE,MAAM,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.198",
4
+ "version": "0.0.200",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
@@ -84,13 +84,24 @@ const computedDefaultColors = $computed(
84
84
  })
85
85
  )
86
86
 
87
+ function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof computedDefaultColors {
88
+ return ({
89
+ ...computedDefaultColors,
90
+ ...theme,
91
+ color: props.flat
92
+ ? theme.backgroundColor as string
93
+ : theme.color as string,
94
+ })
95
+ }
96
+
87
97
  const themes: { [key in ThemeType]: typeof computedDefaultColors } = {
88
- red: { ...computedDefaultColors, backgroundColor: 'var(--bgl-red)', },
89
- black: { ...computedDefaultColors, backgroundColor: 'var(--bgl-black)' },
90
- green: { ...computedDefaultColors, backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' },
91
- gray: { ...computedDefaultColors, backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' },
92
- light: { ...computedDefaultColors, backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' },
93
- 'gray-light': { ...computedDefaultColors, backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' },
98
+ red: getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
99
+ black: getThemeColors({ backgroundColor: 'var(--bgl-black)' }),
100
+ green: getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
101
+ blue: getThemeColors({ backgroundColor: 'var(--bgl-blue)', color: 'var(--bgl-white)' }),
102
+ gray: getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
103
+ light: getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
104
+ 'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' }),
94
105
  };
95
106
 
96
107
  const cumputedTextColor = $computed(
@@ -5,4 +5,4 @@ export type { StorageFile } from './file';
5
5
  export * from './BagelField';
6
6
  export * from './BtnOptions';
7
7
 
8
- export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green';
8
+ export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green'| 'blue';