@stubber/ui 1.0.3 → 1.0.5
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.
- package/package.json +4 -2
- package/src/app.css +60 -0
- package/src/styles/stubber/defaults.css +26 -0
- package/src/styles/stubber/tippythemes.css +27 -0
- package/src/styles/stubber/typography.css +119 -0
- package/tailwind.config.js +3 -11
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stubber/ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "vite build && npm run package",
|
|
@@ -21,7 +21,9 @@
|
|
|
21
21
|
},
|
|
22
22
|
"files": [
|
|
23
23
|
"dist",
|
|
24
|
-
"tailwind.config.js"
|
|
24
|
+
"tailwind.config.js",
|
|
25
|
+
"src/app.css",
|
|
26
|
+
"src/styles"
|
|
25
27
|
],
|
|
26
28
|
"peerDependencies": {
|
|
27
29
|
"svelte": "^4.2.19"
|
package/src/app.css
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
|
|
3
|
+
/* 3rd party */
|
|
4
|
+
@import "tippy.js/dist/tippy.css";
|
|
5
|
+
|
|
6
|
+
/* stubber */
|
|
7
|
+
@import "styles/stubber/typography.css";
|
|
8
|
+
@import "styles/stubber/defaults.css";
|
|
9
|
+
@import "styles/stubber/tippythemes.css";
|
|
10
|
+
|
|
11
|
+
/* tailwind */
|
|
12
|
+
@tailwind base;
|
|
13
|
+
@tailwind components;
|
|
14
|
+
@tailwind utilities;
|
|
15
|
+
|
|
16
|
+
@layer base {
|
|
17
|
+
:root {
|
|
18
|
+
--background: 0 0% 100%;
|
|
19
|
+
--foreground: 222.2 84% 4.9%;
|
|
20
|
+
--card: 0 0% 100%;
|
|
21
|
+
--card-foreground: 222.2 84% 4.9%;
|
|
22
|
+
--popover: 0 0% 100%;
|
|
23
|
+
--popover-foreground: 222.2 84% 4.9%;
|
|
24
|
+
--primary: 212 92% 43%;
|
|
25
|
+
--primary-foreground: 210 40% 98%;
|
|
26
|
+
--secondary: 210 40% 96.1%;
|
|
27
|
+
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
28
|
+
--muted: 210 40% 96.1%;
|
|
29
|
+
--muted-foreground: 215.4 16.3% 46.9%;
|
|
30
|
+
--accent: 210 40% 96.1%;
|
|
31
|
+
--accent-foreground: 222.2 47.4% 11.2%;
|
|
32
|
+
--destructive: 0 72.22% 50.59%;
|
|
33
|
+
--destructive-foreground: 210 40% 98%;
|
|
34
|
+
--border: 214.3 31.8% 91.4%;
|
|
35
|
+
--input: 214.3 31.8% 91.4%;
|
|
36
|
+
--ring: 221.2 83.2% 53.3%;
|
|
37
|
+
--radius: 0.5rem;
|
|
38
|
+
}
|
|
39
|
+
.dark {
|
|
40
|
+
--background: 222.2 84% 4.9%;
|
|
41
|
+
--foreground: 210 40% 98%;
|
|
42
|
+
--card: 222.2 84% 4.9%;
|
|
43
|
+
--card-foreground: 210 40% 98%;
|
|
44
|
+
--popover: 222.2 84% 4.9%;
|
|
45
|
+
--popover-foreground: 210 40% 98%;
|
|
46
|
+
--primary: 217.2 91.2% 59.8%;
|
|
47
|
+
--primary-foreground: 222.2 47.4% 11.2%;
|
|
48
|
+
--secondary: 217.2 32.6% 17.5%;
|
|
49
|
+
--secondary-foreground: 210 40% 98%;
|
|
50
|
+
--muted: 217.2 32.6% 17.5%;
|
|
51
|
+
--muted-foreground: 215 20.2% 65.1%;
|
|
52
|
+
--accent: 217.2 32.6% 17.5%;
|
|
53
|
+
--accent-foreground: 210 40% 98%;
|
|
54
|
+
--destructive: 0 62.8% 30.6%;
|
|
55
|
+
--destructive-foreground: 210 40% 98%;
|
|
56
|
+
--border: 217.2 32.6% 17.5%;
|
|
57
|
+
--input: 217.2 32.6% 17.5%;
|
|
58
|
+
--ring: 224.3 76.3% 48%;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
a {
|
|
2
|
+
@apply text-primary-400 hover:text-primary-500 focus:text-primary-300;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
::-webkit-scrollbar {
|
|
6
|
+
scrollbar-color: #bcbfc2 #e9eaeb;
|
|
7
|
+
scrollbar-width: auto;
|
|
8
|
+
background: #e9eaeb;
|
|
9
|
+
width: min(10px, max(8px, 0.35vw));
|
|
10
|
+
height: min(10px, max(8px, 0.35vw));
|
|
11
|
+
border-radius: 0.5rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
::-webkit-scrollbar-thumb {
|
|
15
|
+
background-color: #bcbfc2;
|
|
16
|
+
height: 5px;
|
|
17
|
+
border-radius: 0.5rem;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
::-webkit-scrollbar-thumb:hover {
|
|
21
|
+
background-color: #d2d4d6;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
::-webkit-scrollbar-corner {
|
|
25
|
+
background-color: transparent;
|
|
26
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
.tippy-box[data-theme~="popout"] {
|
|
2
|
+
background-color: transparent;
|
|
3
|
+
color: white;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.tippy-box[data-theme~="stubber"] {
|
|
7
|
+
@apply bg-surface-900 text-white text-small font-normal rounded-sm;
|
|
8
|
+
}
|
|
9
|
+
.tippy-box[data-theme~="stubber"] > .tippy-content {
|
|
10
|
+
padding: 8.5px 10px;
|
|
11
|
+
}
|
|
12
|
+
.tippy-box[data-theme~="stubber"][data-placement^="top"]
|
|
13
|
+
> .tippy-arrow::before {
|
|
14
|
+
@apply border-t-surface-900;
|
|
15
|
+
}
|
|
16
|
+
.tippy-box[data-theme~="stubber"][data-placement^="bottom"]
|
|
17
|
+
> .tippy-arrow::before {
|
|
18
|
+
@apply border-b-surface-900;
|
|
19
|
+
}
|
|
20
|
+
.tippy-box[data-theme~="stubber"][data-placement^="left"]
|
|
21
|
+
> .tippy-arrow::before {
|
|
22
|
+
@apply border-l-surface-900;
|
|
23
|
+
}
|
|
24
|
+
.tippy-box[data-theme~="stubber"][data-placement^="right"]
|
|
25
|
+
> .tippy-arrow::before {
|
|
26
|
+
@apply border-r-surface-900;
|
|
27
|
+
}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
|
|
2
|
+
|
|
3
|
+
@layer base {
|
|
4
|
+
.text-heading-1,
|
|
5
|
+
.text-heading-2,
|
|
6
|
+
.text-heading-3,
|
|
7
|
+
.text-heading-4,
|
|
8
|
+
.text-heading-5,
|
|
9
|
+
.text-heading-6,
|
|
10
|
+
.text-p-body,
|
|
11
|
+
.text-button,
|
|
12
|
+
.text-field,
|
|
13
|
+
.text-placeholder,
|
|
14
|
+
.text-code,
|
|
15
|
+
.text-label,
|
|
16
|
+
.text-small {
|
|
17
|
+
font-family: "Roboto", Arial, Helvetica, sans-serif;
|
|
18
|
+
font-display: swap;
|
|
19
|
+
line-height: normal;
|
|
20
|
+
font-style: normal;
|
|
21
|
+
letter-spacing: 0.5px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* MOBILE */
|
|
25
|
+
@media screen and (min-width: 320px) and (max-width: 768px) {
|
|
26
|
+
.text-heading-1 {
|
|
27
|
+
font-size: 2.125rem;
|
|
28
|
+
font-weight: 500;
|
|
29
|
+
}
|
|
30
|
+
.text-heading-2 {
|
|
31
|
+
font-size: 1.875rem;
|
|
32
|
+
font-weight: 400;
|
|
33
|
+
}
|
|
34
|
+
.text-heading-3 {
|
|
35
|
+
font-size: 1.625rem;
|
|
36
|
+
font-weight: 500;
|
|
37
|
+
}
|
|
38
|
+
.text-heading-4 {
|
|
39
|
+
font-size: 1.375rem;
|
|
40
|
+
font-weight: 400;
|
|
41
|
+
}
|
|
42
|
+
.text-heading-5 {
|
|
43
|
+
font-size: 1.125rem;
|
|
44
|
+
font-weight: 500;
|
|
45
|
+
}
|
|
46
|
+
.text-heading-6 {
|
|
47
|
+
font-size: 1rem;
|
|
48
|
+
font-weight: 400;
|
|
49
|
+
}
|
|
50
|
+
.text-button,
|
|
51
|
+
.text-field,
|
|
52
|
+
.text-placeholder,
|
|
53
|
+
.text-p-body {
|
|
54
|
+
font-size: 0.875rem;
|
|
55
|
+
font-weight: 300;
|
|
56
|
+
}
|
|
57
|
+
.text-code {
|
|
58
|
+
font-family: "Inconsolata", Arial, Helvetica, sans-serif;
|
|
59
|
+
font-size: 0.875rem;
|
|
60
|
+
font-weight: 400;
|
|
61
|
+
}
|
|
62
|
+
.text-label {
|
|
63
|
+
font-size: 0.75rem;
|
|
64
|
+
font-weight: 400;
|
|
65
|
+
}
|
|
66
|
+
.text-small {
|
|
67
|
+
font-size: 0.5625rem;
|
|
68
|
+
font-weight: 300;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* DESKTOP */
|
|
73
|
+
@media screen and (min-width: 768px) {
|
|
74
|
+
.text-heading-1 {
|
|
75
|
+
font-size: 2.375rem;
|
|
76
|
+
font-weight: 500;
|
|
77
|
+
}
|
|
78
|
+
.text-heading-2 {
|
|
79
|
+
font-size: 2.125rem;
|
|
80
|
+
font-weight: 400;
|
|
81
|
+
}
|
|
82
|
+
.text-heading-3 {
|
|
83
|
+
font-size: 1.875rem;
|
|
84
|
+
font-weight: 500;
|
|
85
|
+
}
|
|
86
|
+
.text-heading-4 {
|
|
87
|
+
font-size: 1.625rem;
|
|
88
|
+
font-weight: 400;
|
|
89
|
+
}
|
|
90
|
+
.text-heading-5 {
|
|
91
|
+
font-size: 1.375rem;
|
|
92
|
+
font-weight: 500;
|
|
93
|
+
}
|
|
94
|
+
.text-heading-6 {
|
|
95
|
+
font-size: 1.125rem;
|
|
96
|
+
font-weight: 400;
|
|
97
|
+
}
|
|
98
|
+
.text-button,
|
|
99
|
+
.text-field,
|
|
100
|
+
.text-placeholder,
|
|
101
|
+
.text-p-body {
|
|
102
|
+
font-size: 1rem;
|
|
103
|
+
font-weight: 300;
|
|
104
|
+
}
|
|
105
|
+
.text-code {
|
|
106
|
+
font-family: "Inconsolata", Arial, Helvetica, sans-serif;
|
|
107
|
+
font-size: 1rem;
|
|
108
|
+
font-weight: 400;
|
|
109
|
+
}
|
|
110
|
+
.text-label {
|
|
111
|
+
font-size: 0.875rem;
|
|
112
|
+
font-weight: 400;
|
|
113
|
+
}
|
|
114
|
+
.text-small {
|
|
115
|
+
font-size: 0.75rem;
|
|
116
|
+
font-weight: 300;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
package/tailwind.config.js
CHANGED
|
@@ -1,15 +1,12 @@
|
|
|
1
|
-
import { Select } from 'bits-ui';
|
|
2
|
-
|
|
3
1
|
/** @type {import('tailwindcss').Config} */
|
|
4
2
|
export default {
|
|
5
3
|
content: [
|
|
6
4
|
"./src/**/*.{html,js,svelte,ts,cjs}",
|
|
7
|
-
"./node_modules
|
|
5
|
+
"./node_modules/@stubber/**/*.{html,js,svelte,ts,cjs}",
|
|
8
6
|
],
|
|
9
7
|
theme: {
|
|
10
8
|
extend: {
|
|
11
9
|
colors: {
|
|
12
|
-
|
|
13
10
|
border: "hsl(var(--border) / <alpha-value>)",
|
|
14
11
|
input: "hsl(var(--input) / <alpha-value>)",
|
|
15
12
|
ring: "hsl(var(--ring) / <alpha-value>)",
|
|
@@ -39,9 +36,7 @@ export default {
|
|
|
39
36
|
DEFAULT: "hsl(var(--card) / <alpha-value>)",
|
|
40
37
|
foreground: "hsl(var(--card-foreground) / <alpha-value>)",
|
|
41
38
|
},
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
39
|
+
|
|
45
40
|
primary: {
|
|
46
41
|
DEFAULT: "hsl(var(--primary) / <alpha-value>)",
|
|
47
42
|
foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
|
|
@@ -162,11 +157,10 @@ export default {
|
|
|
162
157
|
0px 8px 16px 4px rgba(0, 0, 0, 0.08),
|
|
163
158
|
0px 12px 24px 8px rgba(0, 0, 0, 0.08)`,
|
|
164
159
|
|
|
165
|
-
|
|
160
|
+
btn: `inset 0 29px 23px -16px rgba(255, 255, 255, 0.04),
|
|
166
161
|
inset 0 0.5px 0.5px 0 rgba(255, 255, 255, 0.2),
|
|
167
162
|
0 0.5px 1px 0 rgba(0, 0, 0, 1.0)`,
|
|
168
163
|
|
|
169
|
-
|
|
170
164
|
checkbox: `
|
|
171
165
|
inset 0 16px 16px -16px rgba(0, 0, 0, 0.1333),
|
|
172
166
|
inset 0 12px 12px -12px rgba(0, 0, 0, 0.1333),
|
|
@@ -181,9 +175,7 @@ export default {
|
|
|
181
175
|
inset 0 29px 23px -16px rgba(255, 255, 255, 0.1),
|
|
182
176
|
inset 0 0.5px 0.5px 0 rgba(255, 255, 255, 0.2)
|
|
183
177
|
`,
|
|
184
|
-
|
|
185
178
|
},
|
|
186
|
-
|
|
187
179
|
|
|
188
180
|
spacing: {
|
|
189
181
|
0: "0px",
|