@sikka/hawa 0.0.274 → 0.0.276

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/dist/styles.css +39 -13
  2. package/es/index.es.js +3 -3
  3. package/lib/index.js +2 -2
  4. package/package.json +2 -1
  5. package/src/elements/HawaAdCard.tsx +13 -9
  6. package/src/elements/HawaButton.tsx +3 -3
  7. package/src/elements/HawaCodeBlock.tsx +6 -6
  8. package/src/elements/HawaItemCard.tsx +5 -3
  9. package/src/elements/HawaLandingCard.tsx +1 -1
  10. package/src/layout/HawaAppLayoutSimplified.tsx +22 -21
  11. package/src/styles.css +39 -13
  12. package/src/tailwind.css +13 -1
  13. package/tailwind.config.js +3 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikka/hawa",
3
- "version": "0.0.274",
3
+ "version": "0.0.276",
4
4
  "description": "SaaS Oriented UI Kit",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.es.js",
@@ -77,6 +77,7 @@
77
77
  "rollup-plugin-postcss": "^4.0.0",
78
78
  "rollup-plugin-swc": "^0.2.1",
79
79
  "rollup-plugin-typescript2": "^0.34.1",
80
+ "storybook-dark-mode": "^3.0.1",
80
81
  "tailwindcss": "^3.3.3",
81
82
  "tailwindcss-animate": "^1.0.6",
82
83
  "tinycolor2": "^1.4.2",
package/src/elements/HawaAdCard.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import clsx from "clsx"
1
2
  import React, { FC } from "react"
2
3
 
3
4
  type AdCardTypes = {
@@ -10,19 +11,22 @@ type AdCardTypes = {
10
11
  export const HawaAdCard: FC<AdCardTypes> = ({ orientation, ...props }) => {
11
12
  let cardStyles = {
12
13
  horizontal:
13
- "flex max-w-xl rounded border-gray-200 bg-gray-100 shadow-md dark:border-gray-700 dark:bg-gray-800 ",
14
+ "flex flex-row max-w-xl rounded border-gray-200 bg-gray-100 shadow-md p-2 gap-2 items-center relative dark:border-gray-700 dark:bg-gray-800 ",
14
15
  vertical:
15
- "flex max-w-xs rounded border-gray-200 bg-gray-100 shadow-md dark:border-gray-700 dark:bg-gray-800 ",
16
+ "flex flex-col max-w-[200px] justify-start rounded border-gray-200 bg-gray-100 gap-2 shadow-md p-2 relative dark:border-gray-700 dark:bg-gray-800 ",
16
17
  }
17
18
 
18
19
  let imageStyles = {
19
- horizontal: "w-8 h-8 rounded",
20
- vertical: "w-14 h-14 rounded",
20
+ horizontal: "w-auto h-full bg-blue-500 rounded-inner",
21
+ vertical: "bg-blue-500 rounded-inner w-auto ",
21
22
  }
22
23
 
23
24
  return (
24
- <div className={cardStyles[orientation]} {...props}>
25
- <div className=" m-2 mr-0 flex w-full max-w-fit items-center">
25
+ <div
26
+ className={clsx(cardStyles[orientation], "dark:text-white")}
27
+ {...props}
28
+ >
29
+ <div className="flex aspect-square w-full max-w-fit items-start ">
26
30
  <img
27
31
  src={
28
32
  props.imageURL ? props.imageURL : "https://via.placeholder.com/50"
@@ -30,13 +34,13 @@ export const HawaAdCard: FC<AdCardTypes> = ({ orientation, ...props }) => {
30
34
  className={imageStyles[orientation]}
31
35
  />
32
36
  </div>
33
- <div className="w-full p-2 text-xs">
37
+ <div className="w-full text-xs">
34
38
  <div className="font-bold">{props.title}</div>
35
- <div>{props.description}</div>
39
+ <div className="text-[12px]">{props.description}</div>
36
40
  </div>
37
41
  <span
38
42
  onClick={props.handleHide}
39
- className="h-fit rounded-bl-lg rounded-tr-lg bg-blue-100 px-2.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
43
+ className="absolute right-0 top-0 h-fit cursor-pointer select-none rounded-bl-lg rounded-tr-lg bg-blue-100 px-2.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
40
44
  >
41
45
  Hide
42
46
  </span>
package/src/elements/HawaButton.tsx CHANGED
@@ -71,10 +71,10 @@ const colorStyles = {
71
71
  dark: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
72
72
  },
73
73
  outlined: {
74
- default: "text-gray-600 border-gray-600 hover:bg-gray-200",
75
- primary: "text-black hover:bg-gray-50",
74
+ default: "text-gray-600 border-gray-600 hover:bg-gray-200 dark:text-white",
75
+ primary: "text-black hover:bg-gray-50 dark:text-white",
76
76
  secondary:
77
- "text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",
77
+ " dark:text-white text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",
78
78
  gray: "border-gray-300 hover:bg-gray-200 ",
79
79
  dark: "border-gray-900 hover:bg-gray-700 ",
80
80
  },
package/src/elements/HawaCodeBlock.tsx CHANGED
@@ -46,24 +46,24 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
46
46
  <div
47
47
  className={clsx(
48
48
  widthStyles[width],
49
- "w-full flex-col items-center rounded bg-gray-800 text-left text-sm text-white sm:text-base"
49
+ "w-full flex-col items-center rounded bg-gray-200 text-left text-sm text-white dark:bg-gray-800 sm:text-base"
50
50
  )}
51
51
  >
52
52
  {" "}
53
53
  {tabs && (
54
- <div className="flex flex-row gap-2 rounded-t bg-gray-700 p-2 pb-0">
54
+ <div className="flex flex-row gap-2 rounded-t bg-gray-100 p-2 pb-0 text-black dark:bg-gray-700 dark:text-white">
55
55
  {tabs.map((tab, i) => (
56
56
  <div
57
57
  className={clsx(
58
58
  selectedTab === i
59
- ? "border-buttonPrimary-400 border-b-2"
59
+ ? "dark:border-buttonPrimary-400 border-b-2 border-buttonPrimary-700"
60
60
  : "bg-transparent"
61
61
  )}
62
62
  >
63
63
  <div
64
64
  onClick={() => setSelectedTab(i)}
65
65
  className={clsx(
66
- "mb-1 w-full max-w-[52px] cursor-pointer rounded-inner p-2 py-1 text-center text-[0.75rem] hover:bg-gray-500"
66
+ "mb-1 w-full max-w-[52px] cursor-pointer rounded-inner p-2 py-1 text-center text-[0.75rem] hover:bg-gray-300 dark:hover:bg-gray-500"
67
67
  )}
68
68
  >
69
69
  {tab.title}
@@ -73,7 +73,7 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
73
73
  </div>
74
74
  )}
75
75
  {fileName && (
76
- <div className="flex flex-row gap-2 rounded-t bg-gray-700 p-2 pb-0">
76
+ <div className="flex flex-row gap-2 rounded-t p-2 pb-0 text-black bg-gray-100 dark:bg-gray-700 dark:text-white">
77
77
  <div
78
78
  className={clsx(
79
79
  "mb-1 w-full max-w-[52px] rounded-inner p-2 py-1 text-center text-[0.75rem]"
@@ -86,7 +86,7 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
86
86
  <pre>
87
87
  <code
88
88
  className={clsx(
89
- "flex w-full flex-row items-start justify-between rounded bg-gray-800 p-2 text-left text-sm text-white sm:text-base"
89
+ "flex w-full flex-row items-start justify-between rounded bg-gray-200 p-2 text-left text-sm text-black dark:bg-gray-800 dark:text-white sm:text-base"
90
90
  // `language-${language}`,
91
91
  )}
92
92
  >
package/src/elements/HawaItemCard.tsx CHANGED
@@ -57,7 +57,9 @@ export const HawaItemCard: FC<ItemCardTypes> = ({
57
57
  let imageStyles = {
58
58
  vertical: "h-auto max-h-56 w-full rounded-t-lg object-cover",
59
59
  horizontal:
60
- "h-auto w-full rounded-l-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg",
60
+ // "h-auto w-full rounded-l-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg",
61
+ // "h-full w-full rounded-l-lg object-cover md:w-48 md:rounded-none md:rounded-l-lg",
62
+ "h-full w-48 rounded-l object-cover",
61
63
  }
62
64
  let headerActionsButtonStyle =
63
65
  "inline-block rounded p-1 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
@@ -83,7 +85,7 @@ export const HawaItemCard: FC<ItemCardTypes> = ({
83
85
  {...props}
84
86
  >
85
87
  {cardImage && (
86
- <div className="group relative overflow-clip rounded-t">
88
+ <div className="group relative overflow-clip">
87
89
  <img
88
90
  src={"https://via.placeholder.com/50"}
89
91
  className={clsx(
@@ -141,7 +143,7 @@ export const HawaItemCard: FC<ItemCardTypes> = ({
141
143
  {actions || counts ? (
142
144
  <div
143
145
  className={clsx(
144
- "mt-3 flex items-center rounded-b-lg ",
146
+ "mt-3 flex items-center rounded-b-lg dark:text-white ",
145
147
  actions && counts ? "justify-between" : "justify-end"
146
148
  )}
147
149
  >
package/src/elements/HawaLandingCard.tsx CHANGED
@@ -37,7 +37,7 @@ export const HawaLandingCard: FC<LandingCardTypes> = ({
37
37
  className={clsx(
38
38
  cardStyles[orientation],
39
39
  "flex flex-col p-10",
40
- "relative overflow-hidden",
40
+ "relative overflow-hidden dark:text-white",
41
41
  props.className
42
42
  )}
43
43
  {...props}
package/src/layout/HawaAppLayoutSimplified.tsx CHANGED
@@ -104,6 +104,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
104
104
  {size > 600 ? (
105
105
  <div
106
106
  className={clsx(
107
+ "dark:text-white",
107
108
  isRTL
108
109
  ? [size > 600 ? "mr-14" : "mr-2", keepOpen ? "mr-40" : ""]
109
110
  : [size > 600 ? "ml-14" : "ml-2", keepOpen ? "ml-40" : ""]
@@ -165,7 +166,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
165
166
 
166
167
  <div
167
168
  className={clsx(
168
- "flex gap-2",
169
+ "flex gap-2 dark:text-white",
169
170
  isRTL ? "flex-row-reverse" : "flex-row"
170
171
  )}
171
172
  >
@@ -194,7 +195,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
194
195
  // position={isRTL ? "bottom-left" : "bottom-left"}
195
196
  // position={isRTL ? "right-bottom" : "bottom-left"}
196
197
  >
197
- <div className="relative h-8 w-8 cursor-pointer overflow-hidden rounded-full ring-1 ring-buttonPrimary-500 dark:bg-gray-600">
198
+ <div className="relative mx-2 h-8 w-8 cursor-pointer overflow-hidden rounded-full ring-1 ring-buttonPrimary-500 dark:bg-gray-600">
198
199
  <AvatarIcon />
199
200
  </div>
200
201
  </HawaMenu>
@@ -229,8 +230,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
229
230
  <div
230
231
  dir={direction}
231
232
  className={clsx(
232
- "fixed z-50 mb-2 flex h-14 w-full flex-row items-center justify-center bg-layoutPrimary-500 transition-all"
233
- // "bg-blue-400",
233
+ "fixed z-50 mb-2 flex h-14 w-full flex-row items-center justify-center bg-layoutPrimary-500 transition-all"
234
234
  )}
235
235
  style={{
236
236
  width:
@@ -319,12 +319,12 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
319
319
  )}
320
320
  >
321
321
  <div className="flex flex-row" dir={direction}>
322
- <div className="flex items-center justify-center">
322
+ <div className="flex items-center justify-center dark:text-white">
323
323
  {dItem.icon}
324
324
  </div>
325
325
  <div
326
326
  className={clsx(
327
- "mx-2 whitespace-nowrap text-sm transition-all",
327
+ "mx-2 whitespace-nowrap text-sm transition-all dark:text-white",
328
328
  openSideMenu ? "opacity-100" : "opacity-0"
329
329
  )}
330
330
  >
@@ -333,14 +333,14 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
333
333
  </div>
334
334
  {dItem.subItems && (
335
335
  <ArrowIcon
336
- color={
337
- props.currentPage === dItem.slug ||
338
- dItem.subItems?.find(
339
- (e) => e.slug === props.currentPage
340
- )
341
- ? "white"
342
- : "black"
343
- }
336
+ // color={
337
+ // props.currentPage === dItem.slug ||
338
+ // dItem.subItems?.find(
339
+ // (e) => e.slug === props.currentPage
340
+ // )
341
+ // ? "white"
342
+ // : "black"
343
+ // }
344
344
  pointing={
345
345
  openSubItem && dItem.slug === openSubItem
346
346
  ? "up"
@@ -353,7 +353,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
353
353
  {dItem.subItems && (
354
354
  <div
355
355
  className={clsx(
356
- "m-1 mx-2 flex cursor-pointer flex-col gap-1 overflow-clip whitespace-nowrap rounded bg-layoutPrimary-300 p-1 transition-all",
356
+ "m-1 mx-2 flex cursor-pointer flex-col gap-[2px] overflow-clip whitespace-nowrap rounded bg-layoutPrimary-300 p-1 transition-all",
357
357
  openSubItem == dItem.slug && openSideMenu
358
358
  ? ""
359
359
  : "my-0 py-0",
@@ -374,7 +374,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
374
374
  isRTL ? "text-right" : "text-left",
375
375
  props.currentPage === subIt.slug
376
376
  ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
377
- : "hover:bg-layoutPrimary-500"
377
+ : "hover:bg-layoutPrimary-500 dark:text-white"
378
378
  )}
379
379
  dir={direction}
380
380
  onClick={() => {
@@ -451,11 +451,11 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
451
451
  <div
452
452
  onClick={() => setKeepOpen(!keepOpen)}
453
453
  className={
454
- "w-fit cursor-pointer rounded bg-gray-300 p-1 transition-all hover:bg-gray-400"
454
+ "w-fit cursor-pointer rounded bg-gray-300 p-1 transition-all hover:bg-gray-400 bg-layoutPrimary-600 dark:hover:bg-layoutPrimary-700"
455
455
  }
456
456
  >
457
457
  <ArrowIcon
458
- color={"black"}
458
+ // color={"black"}
459
459
  pointing={
460
460
  keepOpen
461
461
  ? isRTL
@@ -513,7 +513,7 @@ const AvatarIcon = () => (
513
513
  </svg>
514
514
  )
515
515
 
516
- const ArrowIcon = ({ pointing, color }) => {
516
+ const ArrowIcon = ({ pointing }) => {
517
517
  let directionStyle
518
518
  switch (pointing) {
519
519
  case "right":
@@ -535,10 +535,11 @@ const ArrowIcon = ({ pointing, color }) => {
535
535
  return (
536
536
  <svg
537
537
  className={clsx(
538
- "h-6 w-6 shrink-0 transition-all disabled:bg-gray-200",
538
+ "h-6 w-6 shrink-0 transition-all disabled:bg-gray-200 dark:text-white",
539
539
  directionStyle
540
540
  )}
541
- fill={color}
541
+ // fill={color}
542
+ fill="currentColor"
542
543
  viewBox="0 0 20 20"
543
544
  >
544
545
  <path
package/src/styles.css CHANGED
@@ -386,9 +386,15 @@ video {
386
386
  display: none;
387
387
  }
388
388
  :root {
389
+ --background: 0 0% 100%;
390
+ --foreground: 240 10% 3.9%;
391
+
389
392
  --layout-primary-700: #b7aff7;
390
- --layout-primary-500: #dfdcfc;
393
+ /* --layout-primary-500: #dfdcfc; */
394
+ --layout-primary-500: #fdfdfd;
395
+ --layout-primary-600: #f7f7f7;
391
396
  --layout-primary-300: #e7e5fa;
397
+
392
398
  --layout-secondary: #d2cdfa;
393
399
 
394
400
  --button-primary-300: #6555e3;
@@ -411,7 +417,13 @@ video {
411
417
  }
412
418
 
413
419
  .dark {
420
+ --layout-primary-500: #363636;
421
+ --layout-primary-600: #2d2d2d;
422
+ --layout-primary-700: #1d1d1d;
423
+ --layout-primary-300: #4a4a4a;
424
+
414
425
  --background: 240 10% 3.9%;
426
+
415
427
  --foreground: 0 0% 98%;
416
428
  --card: 240 10% 3.9%;
417
429
  --card-foreground: 0 0% 98%;
@@ -994,6 +1006,9 @@ video {
994
1006
  .hidden {
995
1007
  display: none;
996
1008
  }
1009
+ .aspect-square {
1010
+ aspect-ratio: 1 / 1;
1011
+ }
997
1012
  .h-0 {
998
1013
  height: 0px;
999
1014
  }
@@ -1473,6 +1488,9 @@ video {
1473
1488
  .gap-9 {
1474
1489
  gap: 2.25rem;
1475
1490
  }
1491
+ .gap-\[2px\] {
1492
+ gap: 2px;
1493
+ }
1476
1494
  .gap-x-16 {
1477
1495
  -moz-column-gap: 4rem;
1478
1496
  column-gap: 4rem;
@@ -1722,6 +1740,9 @@ video {
1722
1740
  .border-buttonPrimary-500 {
1723
1741
  border-color: var(--button-primary-500);
1724
1742
  }
1743
+ .border-buttonPrimary-700 {
1744
+ border-color: var(--button-primary-700);
1745
+ }
1725
1746
  .border-gray-100 {
1726
1747
  --tw-border-opacity: 1;
1727
1748
  border-color: rgb(243 244 246 / var(--tw-border-opacity));
@@ -1780,14 +1801,14 @@ video {
1780
1801
  --tw-bg-opacity: 1;
1781
1802
  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
1782
1803
  }
1783
- .bg-blue-400 {
1784
- --tw-bg-opacity: 1;
1785
- background-color: rgb(96 165 250 / var(--tw-bg-opacity));
1786
- }
1787
1804
  .bg-blue-50 {
1788
1805
  --tw-bg-opacity: 1;
1789
1806
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
1790
1807
  }
1808
+ .bg-blue-500 {
1809
+ --tw-bg-opacity: 1;
1810
+ background-color: rgb(59 130 246 / var(--tw-bg-opacity));
1811
+ }
1791
1812
  .bg-buttonPrimary-300 {
1792
1813
  background-color: var(--button-primary-300);
1793
1814
  }
@@ -1832,10 +1853,6 @@ video {
1832
1853
  --tw-bg-opacity: 1;
1833
1854
  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
1834
1855
  }
1835
- .bg-gray-700 {
1836
- --tw-bg-opacity: 1;
1837
- background-color: rgb(55 65 81 / var(--tw-bg-opacity));
1838
- }
1839
1856
  .bg-gray-800 {
1840
1857
  --tw-bg-opacity: 1;
1841
1858
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
@@ -1862,6 +1879,9 @@ video {
1862
1879
  .bg-layoutPrimary-500 {
1863
1880
  background-color: var(--layout-primary-500);
1864
1881
  }
1882
+ .bg-layoutPrimary-600 {
1883
+ background-color: var(--layout-primary-600);
1884
+ }
1865
1885
  .bg-red-100 {
1866
1886
  --tw-bg-opacity: 1;
1867
1887
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -2141,6 +2161,9 @@ video {
2141
2161
  .text-\[11px\] {
2142
2162
  font-size: 11px;
2143
2163
  }
2164
+ .text-\[12px\] {
2165
+ font-size: 12px;
2166
+ }
2144
2167
  .text-\[13px\] {
2145
2168
  font-size: 13px;
2146
2169
  }
@@ -2657,10 +2680,6 @@ body {
2657
2680
  --tw-bg-opacity: 1;
2658
2681
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
2659
2682
  }
2660
- .hover\:bg-gray-500:hover {
2661
- --tw-bg-opacity: 1;
2662
- background-color: rgb(107 114 128 / var(--tw-bg-opacity));
2663
- }
2664
2683
  .hover\:bg-gray-700:hover {
2665
2684
  --tw-bg-opacity: 1;
2666
2685
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -3102,6 +3121,10 @@ body {
3102
3121
  :is(.dark .dark\:hover\:bg-buttonPrimary-700:hover) {
3103
3122
  background-color: var(--button-primary-700);
3104
3123
  }
3124
+ :is(.dark .dark\:hover\:bg-gray-500:hover) {
3125
+ --tw-bg-opacity: 1;
3126
+ background-color: rgb(107 114 128 / var(--tw-bg-opacity));
3127
+ }
3105
3128
  :is(.dark .dark\:hover\:bg-gray-600:hover) {
3106
3129
  --tw-bg-opacity: 1;
3107
3130
  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -3114,6 +3137,9 @@ body {
3114
3137
  --tw-bg-opacity: 1;
3115
3138
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
3116
3139
  }
3140
+ :is(.dark .dark\:hover\:bg-layoutPrimary-700:hover) {
3141
+ background-color: var(--layout-primary-700);
3142
+ }
3117
3143
  :is(.dark .dark\:hover\:text-blue-500:hover) {
3118
3144
  --tw-text-opacity: 1;
3119
3145
  color: rgb(59 130 246 / var(--tw-text-opacity));
package/src/tailwind.css CHANGED
@@ -5,9 +5,15 @@
5
5
 
6
6
  @layer base {
7
7
  :root {
8
+ --background: 0 0% 100%;
9
+ --foreground: 240 10% 3.9%;
10
+
8
11
  --layout-primary-700: #b7aff7;
9
- --layout-primary-500: #dfdcfc;
12
+ /* --layout-primary-500: #dfdcfc; */
13
+ --layout-primary-500: #fdfdfd;
14
+ --layout-primary-600: #f7f7f7;
10
15
  --layout-primary-300: #e7e5fa;
16
+
11
17
  --layout-secondary: #d2cdfa;
12
18
 
13
19
  --button-primary-300: #6555e3;
@@ -30,7 +36,13 @@
30
36
  }
31
37
 
32
38
  .dark {
39
+ --layout-primary-500: #363636;
40
+ --layout-primary-600: #2d2d2d;
41
+ --layout-primary-700: #1d1d1d;
42
+ --layout-primary-300: #4a4a4a;
43
+
33
44
  --background: 240 10% 3.9%;
45
+
34
46
  --foreground: 0 0% 98%;
35
47
  --card: 240 10% 3.9%;
36
48
  --card-foreground: 0 0% 98%;
package/tailwind.config.js CHANGED
@@ -106,6 +106,8 @@ module.exports = {
106
106
  inner: "var(--border-radius-inner)"
107
107
  },
108
108
  colors: {
109
+ background: "hsl(var(--background))",
110
+ foreground: "hsl(var(--foreground))",
109
111
  muted: {
110
112
  DEFAULT: "hsl(var(--muted))",
111
113
  foreground: "hsl(var(--muted-foreground))"
@@ -181,6 +183,7 @@ module.exports = {
181
183
  layoutPrimary: {
182
184
  300: "var(--layout-primary-300)",
183
185
  500: "var(--layout-primary-500)",
186
+ 600: "var(--layout-primary-600)",
184
187
  700: "var(--layout-primary-700)",
185
188
  // 700: "#b7aff7",
186
189
  dark: "#251b73",