opui-css 2.2.0 → 2.2.2

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/op+ui.css +30 -191
  2. package/dist/ui.css +29 -28
  3. package/package.json +1 -1
  4. package/src/core/normalize.css +29 -28
  5. package/src/main.css +1 -1
package/dist/op+ui.css CHANGED
@@ -95,7 +95,7 @@ Ideally it's the root/entry CSS file in your project.
95
95
  *,
96
96
  ::before,
97
97
  ::after {
98
- box-sizing: border-box;
98
+ box-sizing: inherit;
99
99
  }
100
100
 
101
101
  * {
@@ -108,6 +108,7 @@ Ideally it's the root/entry CSS file in your project.
108
108
  accent-color: var(--primary);
109
109
  background-color: var(--_page-bg-color);
110
110
  block-size: 100%;
111
+ box-sizing: border-box;
111
112
  caret-color: var(--primary);
112
113
  color: var(--text-color-2);
113
114
  font-family: var(--font-sans);
@@ -223,37 +224,37 @@ Ideally it's the root/entry CSS file in your project.
223
224
  }
224
225
 
225
226
  :where(
226
- a[href],
227
- area,
228
- button,
229
- input:not(
230
- [type="text"],
231
- [type="email"],
232
- [type="number"],
233
- [type="password"],
234
- [type=""],
235
- [type="tel"],
236
- [type="url"]
237
- ),
238
- label[for],
239
- select,
240
- summary
241
- ) {
227
+ a[href],
228
+ area,
229
+ button,
230
+ input:not(
231
+ [type="text"],
232
+ [type="email"],
233
+ [type="number"],
234
+ [type="password"],
235
+ [type=""],
236
+ [type="tel"],
237
+ [type="url"]
238
+ ),
239
+ label[for],
240
+ select,
241
+ summary
242
+ ) {
242
243
  cursor: pointer;
243
244
  }
244
245
 
245
246
  :where(
246
- a[href],
247
- area,
248
- button,
249
- [role="button"],
250
- input,
251
- label[for],
252
- select,
253
- summary,
254
- textarea,
255
- [tabindex]:not([tabindex*="-"])
256
- ) {
247
+ a[href],
248
+ area,
249
+ button,
250
+ [role="button"],
251
+ input,
252
+ label[for],
253
+ select,
254
+ summary,
255
+ textarea,
256
+ [tabindex]:not([tabindex*="-"])
257
+ ) {
257
258
  -webkit-tap-highlight-color: transparent;
258
259
  touch-action: manipulation;
259
260
  }
@@ -4150,166 +4151,4 @@ Lists meant to be used stand-alone or as part of Select elements
4150
4151
  }
4151
4152
  }
4152
4153
  /* Theme (example) */
4153
- /*
4154
- OPUI default theme
4155
- */
4156
- @layer theme {
4157
- .light {
4158
- --color-scheme: light;
4159
- }
4160
- .dark {
4161
- --color-scheme: dark;
4162
- }
4163
-
4164
- :where(html) {
4165
- color-scheme: var(--color-scheme, light dark);
4166
-
4167
- --palette-hue: var(--oklch-teal);
4168
- --palette-hue-rotate-by: 5;
4169
- --palette-chroma: 0.89;
4170
-
4171
- /* Primary */
4172
- --primary: var(--color-8);
4173
- --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
4174
- --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
4175
- --primary-contrast: var(--gray-1);
4176
-
4177
- /* Text */
4178
- --text-color-1: light-dark(var(--gray-15), var(--gray-1));
4179
- --text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
4180
- --text-color-2: light-dark(var(--gray-13), var(--gray-4));
4181
- --text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));
4182
-
4183
- /* Surface */
4184
- --surface-default: light-dark(var(--gray-1), var(--gray-13));
4185
- --surface-filled: light-dark(var(--gray-3), var(--gray-15));
4186
- --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
4187
- --surface-elevated: light-dark(var(--gray-1), var(--gray-12));
4188
-
4189
- /* Shadows */
4190
- --shadow-color: light-dark(220 3% 15%, 220 40% 2%);
4191
- --shadow-strength: light-dark(1%, 10%);
4192
- --inner-shadow-highlight: light-dark(
4193
- inset 0 -0.5px 0 0 #fff,
4194
- inset 0 0.5px 0 0 #0001,
4195
- inset 0 -0.5px 0 0 #fff1,
4196
- inset 0 0.5px 0 0 #0007
4197
- );
4198
-
4199
- /* Typography */
4200
- --font-size-h1: var(--font-size-fluid-3, 3.5rem);
4201
- --font-size-h2: var(--font-size-fluid-2, 2rem);
4202
- --font-size-h3: var(--font-size-fluid-1, 1.5rem);
4203
- --font-size-h4: var(--font-size-3, 1.25rem);
4204
- --font-size-h5: var(--font-size-2, 1.1rem);
4205
- --font-size-h6: var(--font-size-fluid-0, 1rem);
4206
- --font-size-lg: var(--font-size-3, 1.25rem);
4207
- --font-size-md: var(--font-size-fluid-0, 1rem);
4208
- --font-size-sm: 0.875rem;
4209
- --font-size-xs: var(--font-size-0, 0.75rem);
4210
-
4211
- /* Borders */
4212
- --border-color: light-dark(var(--gray-4), var(--gray-12));
4213
- --border-radius: var(--size-1);
4214
- --border-width: 1px;
4215
-
4216
- /* Input Field */
4217
- --field-border-color: var(--border-color);
4218
- --field-border-radius: var(--size-1);
4219
- --field-border-width: 1px;
4220
- --field-size: 2.3lh;
4221
- --field-size-small: 1.9lh;
4222
-
4223
- /* Button */
4224
- --button-border-radius: var(--radius-round);
4225
- /* Ripple effect */
4226
- @media (prefers-reduced-motion: no-preference) {
4227
- --button-ripple-size: 100%;
4228
- --button-ripple-duration: 0.5s;
4229
- }
4230
- }
4231
-
4232
- /* Highlight colors */
4233
- :where(.red, .error, del) {
4234
- --palette-hue: var(--oklch-red, 25);
4235
- --palette-chroma: 1;
4236
- --palette-hue-rotate-by: 1;
4237
- }
4238
- :where(.blue, .ok, abbr, dfn) {
4239
- --palette-hue: var(--oklch-blue, 210);
4240
- --palette-chroma: 1;
4241
- --palette-hue-rotate-by: 1;
4242
- }
4243
- :where(.green, .good, ins) {
4244
- --palette-hue: var(--oklch-green, 145);
4245
- --palette-chroma: 1;
4246
- --palette-hue-rotate-by: 1;
4247
- }
4248
- :where(.orange, .warning) {
4249
- --palette-hue: var(--oklch-orange, 75);
4250
- --palette-chroma: 1;
4251
- --palette-hue-rotate-by: 1;
4252
- }
4253
-
4254
- :where(html) {
4255
- --red: oklch(from var(--color-9) l 0.2 25);
4256
- --blue: oklch(from var(--color-9) l 0.2 210);
4257
- --green: oklch(from var(--color-9) l 0.2 145);
4258
- --orange: oklch(from var(--color-7) l 0.2 75);
4259
- }
4260
-
4261
- /* Gray palette */
4262
- :where(html) {
4263
- --gray-chroma: 0.01;
4264
- --gray-lightness: 255;
4265
-
4266
- --gray-1: oklch(
4267
- from var(--color-1) l var(--gray-chroma) var(--gray-lightness)
4268
- );
4269
- --gray-2: oklch(
4270
- from var(--color-2) l var(--gray-chroma) var(--gray-lightness)
4271
- );
4272
- --gray-3: oklch(
4273
- from var(--color-3) l var(--gray-chroma) var(--gray-lightness)
4274
- );
4275
- --gray-4: oklch(
4276
- from var(--color-4) l var(--gray-chroma) var(--gray-lightness)
4277
- );
4278
- --gray-5: oklch(
4279
- from var(--color-5) l var(--gray-chroma) var(--gray-lightness)
4280
- );
4281
- --gray-6: oklch(
4282
- from var(--color-6) l var(--gray-chroma) var(--gray-lightness)
4283
- );
4284
- --gray-7: oklch(
4285
- from var(--color-7) l var(--gray-chroma) var(--gray-lightness)
4286
- );
4287
- --gray-8: oklch(
4288
- from var(--color-8) l var(--gray-chroma) var(--gray-lightness)
4289
- );
4290
- --gray-9: oklch(
4291
- from var(--color-9) l var(--gray-chroma) var(--gray-lightness)
4292
- );
4293
- --gray-10: oklch(
4294
- from var(--color-10) l var(--gray-chroma) var(--gray-lightness)
4295
- );
4296
- --gray-11: oklch(
4297
- from var(--color-11) l var(--gray-chroma) var(--gray-lightness)
4298
- );
4299
- --gray-12: oklch(
4300
- from var(--color-12) l var(--gray-chroma) var(--gray-lightness)
4301
- );
4302
- --gray-13: oklch(
4303
- from var(--color-13) l var(--gray-chroma) var(--gray-lightness)
4304
- );
4305
- --gray-14: oklch(
4306
- from var(--color-14) l var(--gray-chroma) var(--gray-lightness)
4307
- );
4308
- --gray-15: oklch(
4309
- from var(--color-15) l var(--gray-chroma) var(--gray-lightness)
4310
- );
4311
- --gray-16: oklch(
4312
- from var(--color-16) l var(--gray-chroma) var(--gray-lightness)
4313
- );
4314
- }
4315
- }
4154
+ /* @import "./theme.css"; */
package/dist/ui.css CHANGED
@@ -6,7 +6,7 @@
6
6
  *,
7
7
  ::before,
8
8
  ::after {
9
- box-sizing: border-box;
9
+ box-sizing: inherit;
10
10
  }
11
11
 
12
12
  * {
@@ -19,6 +19,7 @@
19
19
  accent-color: var(--primary);
20
20
  background-color: var(--_page-bg-color);
21
21
  block-size: 100%;
22
+ box-sizing: border-box;
22
23
  caret-color: var(--primary);
23
24
  color: var(--text-color-2);
24
25
  font-family: var(--font-sans);
@@ -134,37 +135,37 @@
134
135
  }
135
136
 
136
137
  :where(
137
- a[href],
138
- area,
139
- button,
140
- input:not(
141
- [type="text"],
142
- [type="email"],
143
- [type="number"],
144
- [type="password"],
145
- [type=""],
146
- [type="tel"],
147
- [type="url"]
148
- ),
149
- label[for],
150
- select,
151
- summary
152
- ) {
138
+ a[href],
139
+ area,
140
+ button,
141
+ input:not(
142
+ [type="text"],
143
+ [type="email"],
144
+ [type="number"],
145
+ [type="password"],
146
+ [type=""],
147
+ [type="tel"],
148
+ [type="url"]
149
+ ),
150
+ label[for],
151
+ select,
152
+ summary
153
+ ) {
153
154
  cursor: pointer;
154
155
  }
155
156
 
156
157
  :where(
157
- a[href],
158
- area,
159
- button,
160
- [role="button"],
161
- input,
162
- label[for],
163
- select,
164
- summary,
165
- textarea,
166
- [tabindex]:not([tabindex*="-"])
167
- ) {
158
+ a[href],
159
+ area,
160
+ button,
161
+ [role="button"],
162
+ input,
163
+ label[for],
164
+ select,
165
+ summary,
166
+ textarea,
167
+ [tabindex]:not([tabindex*="-"])
168
+ ) {
168
169
  -webkit-tap-highlight-color: transparent;
169
170
  touch-action: manipulation;
170
171
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "opui-css",
3
- "version": "2.2.0",
3
+ "version": "2.2.2",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "files": [
package/src/core/normalize.css CHANGED
@@ -2,7 +2,7 @@
2
2
  *,
3
3
  ::before,
4
4
  ::after {
5
- box-sizing: border-box;
5
+ box-sizing: inherit;
6
6
  }
7
7
 
8
8
  * {
@@ -15,6 +15,7 @@
15
15
  accent-color: var(--primary);
16
16
  background-color: var(--_page-bg-color);
17
17
  block-size: 100%;
18
+ box-sizing: border-box;
18
19
  caret-color: var(--primary);
19
20
  color: var(--text-color-2);
20
21
  font-family: var(--font-sans);
@@ -130,37 +131,37 @@
130
131
  }
131
132
 
132
133
  :where(
133
- a[href],
134
- area,
135
- button,
136
- input:not(
137
- [type="text"],
138
- [type="email"],
139
- [type="number"],
140
- [type="password"],
141
- [type=""],
142
- [type="tel"],
143
- [type="url"]
144
- ),
145
- label[for],
146
- select,
147
- summary
148
- ) {
134
+ a[href],
135
+ area,
136
+ button,
137
+ input:not(
138
+ [type="text"],
139
+ [type="email"],
140
+ [type="number"],
141
+ [type="password"],
142
+ [type=""],
143
+ [type="tel"],
144
+ [type="url"]
145
+ ),
146
+ label[for],
147
+ select,
148
+ summary
149
+ ) {
149
150
  cursor: pointer;
150
151
  }
151
152
 
152
153
  :where(
153
- a[href],
154
- area,
155
- button,
156
- [role="button"],
157
- input,
158
- label[for],
159
- select,
160
- summary,
161
- textarea,
162
- [tabindex]:not([tabindex*="-"])
163
- ) {
154
+ a[href],
155
+ area,
156
+ button,
157
+ [role="button"],
158
+ input,
159
+ label[for],
160
+ select,
161
+ summary,
162
+ textarea,
163
+ [tabindex]:not([tabindex*="-"])
164
+ ) {
164
165
  -webkit-tap-highlight-color: transparent;
165
166
  touch-action: manipulation;
166
167
  }
package/src/main.css CHANGED
@@ -10,4 +10,4 @@ Ideally it's the root/entry CSS file in your project.
10
10
  @import "./opui.css";
11
11
 
12
12
  /* Theme (example) */
13
- @import "./theme.css";
13
+ /* @import "./theme.css"; */