@bbodek/internal-ui 0.0.20 → 0.0.21

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 (5) hide show
  1. package/dist/index.es.js +1 -1
  2. package/dist/index.es.js.map +1 -1
  3. package/package.json +3 -5
  4. package/src/styles/safelist.css +4 -4
  5. package/src/styles/theme.css +151 -149
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbodek/internal-ui",
3
- "version": "0.0.20",
3
+ "version": "0.0.21",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "files": [
@@ -29,14 +29,12 @@
29
29
  "@phosphor-icons/core": "^2.1.1",
30
30
  "@phosphor-icons/web": "^2.1.2",
31
31
  "clsx": "^2.1.1",
32
- "next": "^15.3.1",
33
- "pretendard": "^1.3.9",
34
- "react": "^19.1.0",
35
- "react-dom": "^19.1.0"
32
+ "pretendard": "^1.3.9"
36
33
  },
37
34
  "peerDependencies": {
38
35
  "react": "^19.1.0",
39
36
  "react-dom": "^19.1.0",
37
+ "next": "^15.3.1",
40
38
  "tailwindcss": "^4"
41
39
  },
42
40
  "devDependencies": {
package/src/styles/safelist.css CHANGED
@@ -1,4 +1,4 @@
1
- @source inline("{hover:,focus:,active:,}{bg,text,fill,placeholder,border}-{gray,red,yellow,green}-{01,02,03,04,05,06,07,08,09,}");
2
- @source inline("{hover:,focus:,active:,}{bg,text,fill,placeholder,border}-primary-{01,02,03,04,05,06,07,08,09,10,11,}");
3
- @source inline("{hover:,focus:,active:,}{bg,fill}-{tooltip,dimmed}");
4
- @source inline("{hover:,focus:,active:,}{text-{display,headline,body,}-{34,30,24,20,18,16,14,12}-{b,m,r}}");
1
+ @source inline("{in}-{hover:,focus:,active:,}{bg,text,fill,placeholder,border}-{gray,red,yellow,green}-{01,02,03,04,05,06,07,08,09,}");
2
+ @source inline("{in}-{hover:,focus:,active:,}{bg,text,fill,placeholder,border}-primary-{01,02,03,04,05,06,07,08,09,10,11,}");
3
+ @source inline("{in}-{hover:,focus:,active:,}{bg,fill}-{tooltip,dimmed}");
4
+ @source inline("{in}-{hover:,focus:,active:,}{text-{display,headline,body,}-{34,30,24,20,18,16,14,12}-{b,m,r}}");
package/src/styles/theme.css CHANGED
@@ -1,165 +1,167 @@
1
1
  @theme {
2
- --color-black: #101828;
3
- --color-white: #ffffff;
4
- --color-primary-01: #f4f8ff;
5
- --color-primary-02: #deebff;
6
- --color-primary-03: #c2daff;
7
- --color-primary-04: #9dc4ff;
8
- --color-primary-05: #3b8aff;
9
- --color-primary-06: #0579fb;
10
- --color-primary-07: #1065e3;
11
- --color-primary-08: #004dc0;
12
- --color-primary-09: #003c96;
13
- --color-primary-10: #002d6f;
14
- --color-primary-11: #0c1321;
15
- --color-gray-01: #f7f8f9;
16
- --color-gray-02: #e7eaf2;
17
- --color-gray-03: #d4dae6;
18
- --color-gray-04: #bdc6d8;
19
- --color-gray-05: #a9b2c7;
20
- --color-gray-06: #6a7489;
21
- --color-gray-07: #333d52;
22
- --color-gray-08: #1f283c;
23
- --color-gray-09: #131923;
24
- --color-red-01: #ffedef;
25
- --color-red-02: #ffe8e9;
26
- --color-red-03: #ff9da4;
27
- --color-red-04: #fc3f4c;
28
- --color-red-05: #ea2432;
29
- --color-red-06: #ca1825;
30
- --color-red-07: #a3151f;
31
- --color-red-08: #76080f;
32
- --color-red-09: #330d0f;
33
- --color-yellow-01: #fff7e3;
34
- --color-yellow-02: #ffefca;
35
- --color-yellow-03: #ffdc8a;
36
- --color-yellow-04: #ffc134;
37
- --color-yellow-05: #ffb712;
38
- --color-yellow-06: #e79908;
39
- --color-yellow-07: #905f03;
40
- --color-yellow-08: #694707;
41
- --color-yellow-09: #32250f;
42
- --color-green-01: #ebfaf7;
43
- --color-green-02: #dcf7f1;
44
- --color-green-03: #8ee7d5;
45
- --color-green-04: #15d0ab;
46
- --color-green-05: #0fb997;
47
- --color-green-06: #008c70;
48
- --color-green-07: #0f6751;
49
- --color-green-08: #045545;
50
- --color-green-09: #10392b;
51
- --color-tooltip: rgba(19, 25, 35, 0.8);
52
- --color-dimmed: rgba(12, 19, 33, 0.4);
2
+ --color-in-black: #101828;
3
+ --color-in-white: #ffffff;
4
+ --color-in-primary-01: #f4f8ff;
5
+ --color-in-primary-02: #deebff;
6
+ --color-in-primary-03: #c2daff;
7
+ --color-in-primary-04: #9dc4ff;
8
+ --color-in-primary-05: #3b8aff;
9
+ --color-in-primary-06: #0579fb;
10
+ --color-in-primary-07: #1065e3;
11
+ --color-in-primary-08: #004dc0;
12
+ --color-in-primary-09: #003c96;
13
+ --color-in-primary-10: #002d6f;
14
+ --color-in-primary-11: #0c1321;
15
+ --color-in-gray-01: #f7f8f9;
16
+ --color-in-gray-02: #e7eaf2;
17
+ --color-in-gray-03: #d4dae6;
18
+ --color-in-gray-04: #bdc6d8;
19
+ --color-in-gray-05: #a9b2c7;
20
+ --color-in-gray-06: #6a7489;
21
+ --color-in-gray-07: #333d52;
22
+ --color-in-gray-08: #1f283c;
23
+ --color-in-gray-09: #131923;
24
+ --color-in-red-01: #ffedef;
25
+ --color-in-red-02: #ffe8e9;
26
+ --color-in-red-03: #ff9da4;
27
+ --color-in-red-04: #fc3f4c;
28
+ --color-in-red-05: #ea2432;
29
+ --color-in-red-06: #ca1825;
30
+ --color-in-red-07: #a3151f;
31
+ --color-in-red-08: #76080f;
32
+ --color-in-red-09: #330d0f;
33
+ --color-in-yellow-01: #fff7e3;
34
+ --color-in-yellow-02: #ffefca;
35
+ --color-in-yellow-03: #ffdc8a;
36
+ --color-in-yellow-04: #ffc134;
37
+ --color-in-yellow-05: #ffb712;
38
+ --color-in-yellow-06: #e79908;
39
+ --color-in-yellow-07: #905f03;
40
+ --color-in-yellow-08: #694707;
41
+ --color-in-yellow-09: #32250f;
42
+ --color-in-green-01: #ebfaf7;
43
+ --color-in-green-02: #dcf7f1;
44
+ --color-in-green-03: #8ee7d5;
45
+ --color-in-green-04: #15d0ab;
46
+ --color-in-green-05: #0fb997;
47
+ --color-in-green-06: #008c70;
48
+ --color-in-green-07: #0f6751;
49
+ --color-in-green-08: #045545;
50
+ --color-in-green-09: #10392b;
51
+ --color-in-tooltip: rgba(19, 25, 35, 0.8);
52
+ --color-in-dimmed: rgba(12, 19, 33, 0.4);
53
53
 
54
- --text-display-34-b: 2.125rem;
55
- --text-display-34-b--line-height: 1.36;
56
- --text-display-34-b--font-weight: 700;
57
- --text-display-34-b--letter-spacing: -0.01em;
58
- --text-display-34-m: 2.125rem;
59
- --text-display-34-m--line-height: 1.36;
60
- --text-display-34-m--font-weight: 500;
61
- --text-display-34-m--letter-spacing: -0.01em;
54
+ --text-in-display-34-b: 2.125rem;
55
+ --text-in-display-34-b--line-height: 1.36;
56
+ --text-in-display-34-b--font-weight: 700;
57
+ --text-in-display-34-b--letter-spacing: -0.01em;
58
+ --text-in-display-34-m: 2.125rem;
59
+ --text-in-display-34-m--line-height: 1.36;
60
+ --text-in-display-34-m--font-weight: 500;
61
+ --text-in-display-34-m--letter-spacing: -0.01em;
62
62
 
63
- --text-display-30-b: 1.875rem;
64
- --text-display-30-b--line-height: 1.36;
65
- --text-display-30-b--font-weight: 700;
66
- --text-display-30-b--letter-spacing: -0.01em;
67
- --text-display-30-m: 1.875rem;
68
- --text-display-30-m--line-height: 1.36;
69
- --text-display-30-m--font-weight: 500;
70
- --text-display-30-m--letter-spacing: -0.01em;
63
+ --text-in-display-30-b: 1.875rem;
64
+ --text-in-display-30-b--line-height: 1.36;
65
+ --text-in-display-30-b--font-weight: 700;
66
+ --text-in-display-30-b--letter-spacing: -0.01em;
67
+ --text-in-display-30-m: 1.875rem;
68
+ --text-in-display-30-m--line-height: 1.36;
69
+ --text-in-display-30-m--font-weight: 500;
70
+ --text-in-display-30-m--letter-spacing: -0.01em;
71
71
 
72
- --text-headline-24-b: 1.5rem;
73
- --text-headline-24-b--line-height: 1.4;
74
- --text-headline-24-b--font-weight: 700;
75
- --text-headline-24-b--letter-spacing: -0.01em;
76
- --text-headline-24-m: 1.5rem;
77
- --text-headline-24-m--line-height: 1.4;
78
- --text-headline-24-m--font-weight: 500;
79
- --text-headline-24-m--letter-spacing: -0.01em;
72
+ --text-in-headline-24-b: 1.5rem;
73
+ --text-in-headline-24-b--line-height: 1.4;
74
+ --text-in-headline-24-b--font-weight: 700;
75
+ --text-in-headline-24-b--letter-spacing: -0.01em;
76
+ --text-in-headline-24-m: 1.5rem;
77
+ --text-in-headline-24-m--line-height: 1.4;
78
+ --text-in-headline-24-m--font-weight: 500;
79
+ --text-in-headline-24-m--letter-spacing: -0.01em;
80
80
 
81
- --text-headline-20-b: 1.25rem;
82
- --text-headline-20-b--line-height: 1.4;
83
- --text-headline-20-b--font-weight: 700;
84
- --text-headline-20-b--letter-spacing: -0.01em;
85
- --text-headline-20-m: 1.25rem;
86
- --text-headline-20-m--line-height: 1.4;
87
- --text-headline-20-m--font-weight: 500;
88
- --text-headline-20-m--letter-spacing: -0.01em;
81
+ --text-in-headline-20-b: 1.25rem;
82
+ --text-in-headline-20-b--line-height: 1.4;
83
+ --text-in-headline-20-b--font-weight: 700;
84
+ --text-in-headline-20-b--letter-spacing: -0.01em;
85
+ --text-in-headline-20-m: 1.25rem;
86
+ --text-in-headline-20-m--line-height: 1.4;
87
+ --text-in-headline-20-m--font-weight: 500;
88
+ --text-in-headline-20-m--letter-spacing: -0.01em;
89
89
 
90
- --text-body-18-b: 1.125rem;
91
- --text-body-18-b--line-height: 1.5;
92
- --text-body-18-b--font-weight: 700;
93
- --text-body-18-b--letter-spacing: -0.01em;
94
- --text-body-18-m: 1.125rem;
95
- --text-body-18-m--line-height: 1.5;
96
- --text-body-18-m--font-weight: 500;
97
- --text-body-18-m--letter-spacing: -0.01em;
98
- --text-body-18-r: 1.125rem;
99
- --text-body-18-r--line-height: 1.5;
100
- --text-body-18-r--font-weight: 400;
101
- --text-body-18-r--letter-spacing: -0.01em;
90
+ --text-in-body-18-b: 1.125rem;
91
+ --text-in-body-18-b--line-height: 1.5;
92
+ --text-in-body-18-b--font-weight: 700;
93
+ --text-in-body-18-b--letter-spacing: -0.01em;
94
+ --text-in-body-18-m: 1.125rem;
95
+ --text-in-body-18-m--line-height: 1.5;
96
+ --text-in-body-18-m--font-weight: 500;
97
+ --text-in-body-18-m--letter-spacing: -0.01em;
98
+ --text-in-body-18-r: 1.125rem;
99
+ --text-in-body-18-r--line-height: 1.5;
100
+ --text-in-body-18-r--font-weight: 400;
101
+ --text-in-body-18-r--letter-spacing: -0.01em;
102
102
 
103
- --text-body-16-b: 1rem;
104
- --text-body-16-b--line-height: 1.5;
105
- --text-body-16-b--font-weight: 700;
106
- --text-body-16-b--letter-spacing: -0.01em;
107
- --text-body-16-m: 1rem;
108
- --text-body-16-m--line-height: 1.5;
109
- --text-body-16-m--font-weight: 500;
110
- --text-body-16-m--letter-spacing: -0.01em;
111
- --text-body-16-r: 1rem;
112
- --text-body-16-r--line-height: 1.5;
113
- --text-body-16-r--font-weight: 400;
114
- --text-body-16-r--letter-spacing: -0.01em;
103
+ --text-in-body-16-b: 1rem;
104
+ --text-in-body-16-b--line-height: 1.5;
105
+ --text-in-body-16-b--font-weight: 700;
106
+ --text-in-body-16-b--letter-spacing: -0.01em;
107
+ --text-in-body-16-m: 1rem;
108
+ --text-in-body-16-m--line-height: 1.5;
109
+ --text-in-body-16-m--font-weight: 500;
110
+ --text-in-body-16-m--letter-spacing: -0.01em;
111
+ --text-in-body-16-r: 1rem;
112
+ --text-in-body-16-r--line-height: 1.5;
113
+ --text-in-body-16-r--font-weight: 400;
114
+ --text-in-body-16-r--letter-spacing: -0.01em;
115
115
 
116
- --text-body-14-b: 0.875rem;
117
- --text-body-14-b--line-height: 1.5;
118
- --text-body-14-b--font-weight: 700;
119
- --text-body-14-b--letter-spacing: -0.01em;
120
- --text-body-14-m: 0.875rem;
121
- --text-body-14-m--line-height: 1.5;
122
- --text-body-14-m--font-weight: 500;
123
- --text-body-14-m--letter-spacing: -0.01em;
124
- --text-body-14-r: 0.875rem;
125
- --text-body-14-r--line-height: 1.5;
126
- --text-body-14-r--font-weight: 400;
127
- --text-body-14-r--letter-spacing: -0.01em;
116
+ --text-in-body-14-b: 0.875rem;
117
+ --text-in-body-14-b--line-height: 1.5;
118
+ --text-in-body-14-b--font-weight: 700;
119
+ --text-in-body-14-b--letter-spacing: -0.01em;
120
+ --text-in-body-14-m: 0.875rem;
121
+ --text-in-body-14-m--line-height: 1.5;
122
+ --text-in-body-14-m--font-weight: 500;
123
+ --text-in-body-14-m--letter-spacing: -0.01em;
124
+ --text-in-body-14-r: 0.875rem;
125
+ --text-in-body-14-r--line-height: 1.5;
126
+ --text-in-body-14-r--font-weight: 400;
127
+ --text-in-body-14-r--letter-spacing: -0.01em;
128
128
 
129
- --text-body-12-b: 0.75rem;
130
- --text-body-12-b--line-height: 1.5;
131
- --text-body-12-b--font-weight: 700;
132
- --text-body-12-m: 0.75rem;
133
- --text-body-12-m--line-height: 1.5;
134
- --text-body-12-m--font-weight: 500;
129
+ --text-in-body-12-b: 0.75rem;
130
+ --text-in-body-12-b--line-height: 1.5;
131
+ --text-in-body-12-b--font-weight: 700;
132
+ --text-in-body-12-b--letter-spacing: -0.01em;
133
+ --text-in-body-12-m: 0.75rem;
134
+ --text-in-body-12-m--line-height: 1.5;
135
+ --text-in-body-12-m--font-weight: 500;
136
+ --text-in-body-12-m--letter-spacing: -0.01em;
135
137
 
136
- --radius-4: 0.25rem;
137
- --radius-6: 0.375rem;
138
- --radius-8: 0.5rem;
139
- --radius-12: 0.75rem;
140
- --radius-16: 1rem;
141
- --radius-20: 1.25rem;
142
- --radius-24: 1.5rem;
143
- --radius-full: calc(infinity * 1px);
138
+ --radius-in-4: 0.25rem;
139
+ --radius-in-6: 0.375rem;
140
+ --radius-in-8: 0.5rem;
141
+ --radius-in-12: 0.75rem;
142
+ --radius-in-16: 1rem;
143
+ --radius-in-20: 1.25rem;
144
+ --radius-in-24: 1.5rem;
145
+ --radius-in-full: calc(infinity * 1px);
144
146
 
145
- --shadow-4: 0px 1px 4px 0px rgba(16, 24, 40, 0.12);
146
- --shadow-8: 0px 3px 8px 0px rgba(16, 24, 40, 0.14);
147
- --shadow-12: 0px 6px 12px 0px rgba(16, 24, 40, 0.16);
148
- --shadow-20: 0px 8px 20px 0px rgba(16, 24, 40, 0.2);
149
- --shadow-24: 0px 10px 24px 0px rgba(16, 24, 40, 0.3);
150
- --shadow-30: 0px 12px 30px 0px rgba(16, 24, 40, 0.36);
147
+ --shadow-in-4: 0px 1px 4px 0px rgba(16, 24, 40, 0.12);
148
+ --shadow-in-8: 0px 3px 8px 0px rgba(16, 24, 40, 0.14);
149
+ --shadow-in-12: 0px 6px 12px 0px rgba(16, 24, 40, 0.16);
150
+ --shadow-in-20: 0px 8px 20px 0px rgba(16, 24, 40, 0.2);
151
+ --shadow-in-24: 0px 10px 24px 0px rgba(16, 24, 40, 0.3);
152
+ --shadow-in-30: 0px 12px 30px 0px rgba(16, 24, 40, 0.36);
151
153
 
152
- --breakpoint-sm: 22.5rem;
153
- --breakpoint-md: 51.25rem;
154
- --breakpoint-lg: 73.75rem;
155
- --container-sm: var(--breakpoint-sm);
156
- --container-md: var(--breakpoint-md);
157
- --container-lg: var(--breakpoint-lg);
154
+ --breakpoint-in-sm: 22.5rem;
155
+ --breakpoint-in-md: 51.25rem;
156
+ --breakpoint-in-lg: 73.75rem;
157
+ --container-in-sm: var(--breakpoint-in-sm);
158
+ --container-in-md: var(--breakpoint-in-md);
159
+ --container-in-lg: var(--breakpoint-in-lg);
158
160
 
159
- --animate-fade-in: fade-in 0.2s cubic-bezier(0, 0, 0.5, 1);
160
- --animate-fade-in-select: fade-in 0.3s ease;
161
- --animate-popup: popup 0.2s cubic-bezier(0, 0, 0.5, 1);
162
- --animate-bottom-sheet: bottom-sheet 0.2s cubic-bezier(0, 0, 0.5, 1);
161
+ --animate-in-fade-in: fade-in 0.2s cubic-bezier(0, 0, 0.5, 1);
162
+ --animate-in-fade-in-select: fade-in 0.3s ease;
163
+ --animate-in-popup: popup 0.2s cubic-bezier(0, 0, 0.5, 1);
164
+ --animate-in-bottom-sheet: bottom-sheet 0.2s cubic-bezier(0, 0, 0.5, 1);
163
165
 
164
166
  @keyframes fade-in {
165
167
  0% {