@luminescent/ui 3.0.3 → 4.0.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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/formatting.css +4 -4
  3. package/src/index.css +42 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luminescent/ui",
3
- "version": "3.0.3",
3
+ "version": "4.0.0-0",
4
4
  "description": "Luminescent UI library",
5
5
  "main": "./lib/index.js",
6
6
  "types": "./lib-types/index.d.ts",
package/src/formatting.css CHANGED
@@ -7,7 +7,7 @@ a.lum-btn, a.lum-card {
7
7
  }
8
8
 
9
9
  blockquote {
10
- @apply bg-gray-800 border-l-6 border-l-blue-400 rounded-md px-6 py-8 my-4 border border-gray-700;
10
+ @apply bg-gray-800 border-l-6 border-l-blue-400 rounded-lum px-6 py-8 my-4 border border-gray-700;
11
11
  }
12
12
 
13
13
  blockquote p:first-child {
@@ -55,7 +55,7 @@ li {
55
55
  }
56
56
 
57
57
  pre {
58
- @apply rounded-md overflow-auto p-4 bg-gray-800 my-2;
58
+ @apply rounded-lum overflow-auto p-4 bg-gray-800 my-2;
59
59
  }
60
60
 
61
61
  pre.shiki {
@@ -67,7 +67,7 @@ pre code {
67
67
  }
68
68
 
69
69
  code {
70
- @apply bg-gray-800 py-0.5 px-1 rounded-md select-all border-b-2 border-b-gray-700 break-all sm:break-normal;
70
+ @apply bg-gray-800 py-0.5 px-1 rounded-lum select-all border-b-2 border-b-gray-700 break-all sm:break-normal;
71
71
  }
72
72
 
73
73
  table {
@@ -87,7 +87,7 @@ th:last-child, td:last-child {
87
87
  }
88
88
 
89
89
  img {
90
- @apply rounded-md overflow-hidden;
90
+ @apply rounded-lum overflow-hidden;
91
91
  }
92
92
 
93
93
  hr {
package/src/index.css CHANGED
@@ -10,27 +10,63 @@
10
10
  --color-luminescent-800: oklch(45.9% 0.187 327.815);
11
11
  --color-luminescent-900: oklch(40.8% 0.153 326.432);
12
12
  --color-luminescent-950: oklch(28.4% 0.109 327.907);
13
+ --lum-border-radius: var(--radius-md);
14
+ --lum-btn-p-x: 2;
15
+ --lum-input-p-x: 1.5;
16
+ }
17
+
18
+ @utility rounded-lum {
19
+ border-radius: var(--lum-border-radius);
20
+ }
21
+
22
+ @utility rounded-lum-* {
23
+ border-radius: calc(var(--lum-border-radius) - calc(var(--spacing) * --value(integer)));
24
+ }
25
+
26
+ @utility border-gradient-* {
27
+ @apply relative box-border bg-clip-padding;
28
+ border-width: calc(--value(integer) * 1px);
29
+ border-color: transparent !important;
30
+ &::before {
31
+ @apply bg-gradient-to-br content-[''] absolute inset-0 z-[-1];
32
+ margin: calc(--value(integer) * -1px);
33
+ border-radius: inherit;
34
+ }
13
35
  }
14
36
 
15
37
  @utility lum-btn-p-* {
16
38
  padding: calc(var(--spacing) * --value(integer))
17
- calc(var(--spacing) * --value(integer) * 2)
39
+ calc(var(--spacing) * --value(integer) * var(--lum-btn-p-x))
18
40
  calc(var(--spacing) * --value(integer))
19
- calc(var(--spacing) * --value(integer) * 2);
41
+ calc(var(--spacing) * --value(integer) * var(--lum-btn-p-x));
42
+ }
43
+
44
+ @utility lum-input-p-* {
45
+ padding: calc(var(--spacing) * --value(integer))
46
+ calc(var(--spacing) * --value(integer) * var(--lum-input-p-x))
47
+ calc(var(--spacing) * --value(integer))
48
+ calc(var(--spacing) * --value(integer) * var(--lum-input-p-x));
20
49
  }
21
50
 
22
51
  @utility lum-input {
23
- @apply flex motion-safe:transition duration-300 hover:duration-75 ease-out disabled:opacity-50 hover:drop-shadow-lg whitespace-nowrap touch-manipulation select-none p-2 lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md;
52
+ @apply flex motion-safe:transition duration-300 hover:duration-75 ease-out disabled:opacity-50 hover:drop-shadow-lg whitespace-nowrap touch-manipulation select-none lum-input-p-2 lum-bg-gray-800 hover:lum-bg-gray-700;
53
+ border-radius: var(--lum-border-radius);
24
54
  }
25
55
 
26
56
  @utility lum-btn {
27
- @apply flex items-center gap-3 motion-safe:transition duration-300 hover:duration-75 ease-out disabled:opacity-50 hover:drop-shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none lum-btn-p-2 text-base lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md;
57
+ @apply flex items-center gap-3 motion-safe:transition duration-300 hover:duration-75 ease-out disabled:opacity-50 hover:drop-shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none lum-btn-p-2 text-base lum-bg-gray-800 hover:lum-bg-gray-700;
58
+ border-radius: var(--lum-border-radius);
28
59
  }
29
60
 
30
61
  @utility lum-card {
31
- @apply flex flex-col gap-3 whitespace-pre-wrap lum-bg-gray-900 p-7 rounded-lg;
62
+ @apply flex flex-col gap-3 whitespace-pre-wrap lum-bg-gray-900 p-7;
63
+ border-radius: var(--lum-border-radius);
64
+ }
65
+
66
+ @utility lum-hoverable {
67
+ @apply transition hover:scale-102 hover:drop-shadow-lg hover:duration-75 ease-out;
32
68
  }
33
69
 
34
70
  @utility lum-loading {
35
- @apply animate-spin rounded-full border-transparent border-l-current border-t-current border-2;
71
+ @apply animate-spin border-transparent border-l-current border-t-current border-3 rounded-full;
36
72
  }