tempest-react-sdk 0.59.0 → 0.61.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.
- package/README.md +21 -1
- package/dist/components/ImageCropper/ImageCropper.module.cjs.map +1 -1
- package/dist/components/ImageCropper/ImageCropper.module.js.map +1 -1
- package/dist/components/PasswordInput/PasswordInput.module.cjs.map +1 -1
- package/dist/components/PasswordInput/PasswordInput.module.js.map +1 -1
- package/dist/components/PinInput/PinInput.module.cjs.map +1 -1
- package/dist/components/PinInput/PinInput.module.js.map +1 -1
- package/dist/styles/ImageCropper.css +3 -3
- package/dist/styles/PasswordInput.css +1 -1
- package/dist/styles/PinInput.css +1 -1
- package/dist/styles/auto.css +4 -0
- package/dist/styles/base.css +33 -0
- package/dist/styles/core.css +3 -3
- package/dist/styles/forms.css +5 -5
- package/dist/styles/manifest.json +496 -0
- package/dist/styles/scoped.css +131 -0
- package/dist/styles/tokens.css +10 -0
- package/dist/styles.css +1 -1
- package/dist/vite/tempest-styles.cjs +5 -0
- package/dist/vite/tempest-styles.cjs.map +1 -0
- package/dist/vite/tempest-styles.js +103 -0
- package/dist/vite/tempest-styles.js.map +1 -0
- package/dist/vite.cjs +1 -1
- package/dist/vite.d.ts +82 -0
- package/dist/vite.js +2 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -208,13 +208,33 @@ The styles ship hashed under the `tempest_` namespace — they do **not** collid
|
|
|
208
208
|
**Importing less.** The JavaScript you import is tree-shaken; the CSS is not, so `styles.css` carries all ~150 components whether you mount thirteen or all of them. Pay for what you use by taking the foundation plus the sheets you need:
|
|
209
209
|
|
|
210
210
|
```ts
|
|
211
|
-
import "tempest-react-sdk/styles/core.css"; //
|
|
211
|
+
import "tempest-react-sdk/styles/core.css"; // tokens + global reset — see below
|
|
212
212
|
import "tempest-react-sdk/styles/Button.css";
|
|
213
213
|
import "tempest-react-sdk/styles/forms.css"; // or a whole family
|
|
214
214
|
```
|
|
215
215
|
|
|
216
216
|
Measured in a real Vite app mounting twelve components: **236.71 kB raw / 35.38 kB gzip** with `styles.css`, **38.94 kB / 7.70 kB** with `core.css` plus those twelve — 78% less. See [Styles](https://mauriciobenjamin700.github.io/tempest-react-sdk/styles/) for the full list of groups.
|
|
217
217
|
|
|
218
|
+
**Letting the build keep that list.** `tempestStyles()` reads the imports your source already writes and resolves `styles/auto.css` to exactly the sheets your app can reach — including the ones it reaches _transitively_, which is where a hand-kept list goes wrong (`<DataTable>` alone needs six, `<AIChat>` seven):
|
|
219
|
+
|
|
220
|
+
```ts
|
|
221
|
+
// vite.config.ts
|
|
222
|
+
import { tempestStyles } from "tempest-react-sdk/vite";
|
|
223
|
+
export default defineConfig({ plugins: [react(), tempestStyles()] });
|
|
224
|
+
|
|
225
|
+
// src/main.tsx — one line, forever
|
|
226
|
+
import "tempest-react-sdk/styles/auto.css";
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
**If your app owns its own layout,** do not reach for `core.css`: 44 of its 46 selectors dress markup you own (`html`, `body`, `#root`, `button`, `table`, `:where(ul, ol)[class]`). Dropping it is not the fix either — the components are written _against_ that reset, so without it they lose their box model, not their polish. Take the foundation in two pieces instead, which is also what `tempestStyles()` emits by default:
|
|
230
|
+
|
|
231
|
+
```ts
|
|
232
|
+
import "tempest-react-sdk/styles/tokens.css"; // the 373 --tempest-* tokens
|
|
233
|
+
import "tempest-react-sdk/styles/scoped.css"; // the reset, confined to :where([class*="tempest_"])
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
**3.03 kB brotli** against `core.css`'s 3.23 kB — near enough the same bytes, which is the point: what you drop is not weight, it is the SDK reaching outside its own components.
|
|
237
|
+
|
|
218
238
|
**Rebranding.** The `--tempest-*` tokens are the only theming API, and `createTheme` writes them for you — `primary` alone yields the ten-step scale for **both** color schemes (dark inverts the ramp), plus the status families, the radius scale and the focus ring:
|
|
219
239
|
|
|
220
240
|
```ts
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageCropper.module.cjs","names":[],"sources":["../../../src/components/ImageCropper/ImageCropper.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-3);\n max-width: 100%;\n font-family: var(--tempest-font-sans);\n}\n\n.frame {\n position: relative;\n width: 100%;\n overflow: hidden;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-lg);\n background-color: var(--tempest-surface);\n /*\n * `grab` rather than `move`: nothing is being moved to a destination, the\n * image is being dragged under a fixed frame.\n */\n cursor: grab;\n /*\n * The frame owns dragging on touch, so the browser must not also scroll the\n * page from the same gesture.\n */\n touch-action: none;\n user-select: none;\n}\n\n.frame:active {\n cursor: grabbing;\n}\n\n.frame:focus-visible {\n outline: 2px solid var(--tempest-primary);\n outline-offset: 2px;\n}\n\n.circle {\n border-radius: var(--tempest-radius-full);\n}\n\n.image {\n position: absolute;\n top: 50%;\n left: 50%;\n max-width: none;\n pointer-events: none;\n /*\n * Centring lives in `translate` and the pan in the inline `transform`, which\n * are separate CSS properties applied in that order. Keeping them apart means\n * a pan is just `transform: translate(x, y)` — it never has to re-derive the\n * `-50% -50%` centring, and the two cannot overwrite each other.\n */\n translate: -50% -50%;\n}\n\n.controls {\n display: flex;\n align-items: center;\n gap: var(--tempest-space-3);\n}\n\n.zoom {\n flex: 1;\n min-width:
|
|
1
|
+
{"version":3,"file":"ImageCropper.module.cjs","names":[],"sources":["../../../src/components/ImageCropper/ImageCropper.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-3);\n max-width: 100%;\n font-family: var(--tempest-font-sans);\n}\n\n.frame {\n position: relative;\n width: 100%;\n overflow: hidden;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-lg);\n background-color: var(--tempest-surface);\n /*\n * `grab` rather than `move`: nothing is being moved to a destination, the\n * image is being dragged under a fixed frame.\n */\n cursor: grab;\n /*\n * The frame owns dragging on touch, so the browser must not also scroll the\n * page from the same gesture.\n */\n touch-action: none;\n user-select: none;\n}\n\n.frame:active {\n cursor: grabbing;\n}\n\n.frame:focus-visible {\n outline: 2px solid var(--tempest-primary);\n outline-offset: 2px;\n}\n\n.circle {\n border-radius: var(--tempest-radius-full);\n}\n\n.image {\n position: absolute;\n top: 50%;\n left: 50%;\n /*\n * Both `max-*`, not just the width. The size is set inline from the zoom, so\n * either cap silently overrides it — and an app reset carrying\n * `img { max-height: 100% }` is enough, since a 0-0-1 element rule meets no\n * competition here. The failure is worse than it looks: `crop()` builds its\n * rectangle from `computeCropRect({ image: natural, ... })` and never reads the\n * rendered element, so the export stays correct while the preview is squashed\n * on one axis. The user drags against a distorted image and gets a framing they\n * never saw. A component that sizes itself inline owns neutralising both caps.\n */\n max-width: none;\n max-height: none;\n pointer-events: none;\n /*\n * Centring lives in `translate` and the pan in the inline `transform`, which\n * are separate CSS properties applied in that order. Keeping them apart means\n * a pan is just `transform: translate(x, y)` — it never has to re-derive the\n * `-50% -50%` centring, and the two cannot overwrite each other.\n */\n translate: -50% -50%;\n}\n\n.controls {\n display: flex;\n /*\n * Wraps rather than squeezing. The zoom slider is the flexible item, so on a\n * narrow row it is the one that gives — and a range input has no useful floor\n * of its own, so it gave all the way to `width: 0`, leaving the thumb alone and\n * no visible focus ring while the button beside it kept both. Measured at 390px\n * with a crowded row. Wrapping moves the slider to its own line instead.\n */\n flex-wrap: wrap;\n align-items: center;\n gap: var(--tempest-space-3);\n}\n\n.zoom {\n /*\n * `min-width: 0` is what let it collapse to nothing: it exists to let a flex\n * item shrink past its min-content size, which for a range input is the whole\n * control. A real floor keeps the slider draggable and its focus ring visible;\n * the wrap on `.controls` is what absorbs the width this refuses to give up.\n */\n flex: 1 1 6rem;\n min-width: 6rem;\n accent-color: var(--tempest-primary);\n}\n\n.zoom:disabled {\n opacity: 0.5;\n}\n\n.reset {\n padding: var(--tempest-space-1) var(--tempest-space-3);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-md);\n background-color: var(--tempest-bg);\n color: var(--tempest-text);\n font: inherit;\n font-size: var(--tempest-text-sm);\n cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n .reset:hover:not(:disabled) {\n background-color: var(--tempest-surface);\n }\n}\n\n.reset:focus-visible {\n outline: 2px solid var(--tempest-primary);\n outline-offset: 2px;\n}\n\n.reset:disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n.hint {\n margin: 0;\n color: var(--tempest-text-muted);\n font-size: var(--tempest-text-xs);\n}\n\n.hint kbd {\n padding: 0 var(--tempest-space-1);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-sm);\n background-color: var(--tempest-surface);\n font-family: var(--tempest-font-mono, monospace);\n font-size: inherit;\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageCropper.module.js","names":[],"sources":["../../../src/components/ImageCropper/ImageCropper.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-3);\n max-width: 100%;\n font-family: var(--tempest-font-sans);\n}\n\n.frame {\n position: relative;\n width: 100%;\n overflow: hidden;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-lg);\n background-color: var(--tempest-surface);\n /*\n * `grab` rather than `move`: nothing is being moved to a destination, the\n * image is being dragged under a fixed frame.\n */\n cursor: grab;\n /*\n * The frame owns dragging on touch, so the browser must not also scroll the\n * page from the same gesture.\n */\n touch-action: none;\n user-select: none;\n}\n\n.frame:active {\n cursor: grabbing;\n}\n\n.frame:focus-visible {\n outline: 2px solid var(--tempest-primary);\n outline-offset: 2px;\n}\n\n.circle {\n border-radius: var(--tempest-radius-full);\n}\n\n.image {\n position: absolute;\n top: 50%;\n left: 50%;\n max-width: none;\n pointer-events: none;\n /*\n * Centring lives in `translate` and the pan in the inline `transform`, which\n * are separate CSS properties applied in that order. Keeping them apart means\n * a pan is just `transform: translate(x, y)` — it never has to re-derive the\n * `-50% -50%` centring, and the two cannot overwrite each other.\n */\n translate: -50% -50%;\n}\n\n.controls {\n display: flex;\n align-items: center;\n gap: var(--tempest-space-3);\n}\n\n.zoom {\n flex: 1;\n min-width:
|
|
1
|
+
{"version":3,"file":"ImageCropper.module.js","names":[],"sources":["../../../src/components/ImageCropper/ImageCropper.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-3);\n max-width: 100%;\n font-family: var(--tempest-font-sans);\n}\n\n.frame {\n position: relative;\n width: 100%;\n overflow: hidden;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-lg);\n background-color: var(--tempest-surface);\n /*\n * `grab` rather than `move`: nothing is being moved to a destination, the\n * image is being dragged under a fixed frame.\n */\n cursor: grab;\n /*\n * The frame owns dragging on touch, so the browser must not also scroll the\n * page from the same gesture.\n */\n touch-action: none;\n user-select: none;\n}\n\n.frame:active {\n cursor: grabbing;\n}\n\n.frame:focus-visible {\n outline: 2px solid var(--tempest-primary);\n outline-offset: 2px;\n}\n\n.circle {\n border-radius: var(--tempest-radius-full);\n}\n\n.image {\n position: absolute;\n top: 50%;\n left: 50%;\n /*\n * Both `max-*`, not just the width. The size is set inline from the zoom, so\n * either cap silently overrides it — and an app reset carrying\n * `img { max-height: 100% }` is enough, since a 0-0-1 element rule meets no\n * competition here. The failure is worse than it looks: `crop()` builds its\n * rectangle from `computeCropRect({ image: natural, ... })` and never reads the\n * rendered element, so the export stays correct while the preview is squashed\n * on one axis. The user drags against a distorted image and gets a framing they\n * never saw. A component that sizes itself inline owns neutralising both caps.\n */\n max-width: none;\n max-height: none;\n pointer-events: none;\n /*\n * Centring lives in `translate` and the pan in the inline `transform`, which\n * are separate CSS properties applied in that order. Keeping them apart means\n * a pan is just `transform: translate(x, y)` — it never has to re-derive the\n * `-50% -50%` centring, and the two cannot overwrite each other.\n */\n translate: -50% -50%;\n}\n\n.controls {\n display: flex;\n /*\n * Wraps rather than squeezing. The zoom slider is the flexible item, so on a\n * narrow row it is the one that gives — and a range input has no useful floor\n * of its own, so it gave all the way to `width: 0`, leaving the thumb alone and\n * no visible focus ring while the button beside it kept both. Measured at 390px\n * with a crowded row. Wrapping moves the slider to its own line instead.\n */\n flex-wrap: wrap;\n align-items: center;\n gap: var(--tempest-space-3);\n}\n\n.zoom {\n /*\n * `min-width: 0` is what let it collapse to nothing: it exists to let a flex\n * item shrink past its min-content size, which for a range input is the whole\n * control. A real floor keeps the slider draggable and its focus ring visible;\n * the wrap on `.controls` is what absorbs the width this refuses to give up.\n */\n flex: 1 1 6rem;\n min-width: 6rem;\n accent-color: var(--tempest-primary);\n}\n\n.zoom:disabled {\n opacity: 0.5;\n}\n\n.reset {\n padding: var(--tempest-space-1) var(--tempest-space-3);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-md);\n background-color: var(--tempest-bg);\n color: var(--tempest-text);\n font: inherit;\n font-size: var(--tempest-text-sm);\n cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n .reset:hover:not(:disabled) {\n background-color: var(--tempest-surface);\n }\n}\n\n.reset:focus-visible {\n outline: 2px solid var(--tempest-primary);\n outline-offset: 2px;\n}\n\n.reset:disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n.hint {\n margin: 0;\n color: var(--tempest-text-muted);\n font-size: var(--tempest-text-xs);\n}\n\n.hint kbd {\n padding: 0 var(--tempest-space-1);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-sm);\n background-color: var(--tempest-surface);\n font-family: var(--tempest-font-mono, monospace);\n font-size: inherit;\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordInput.module.cjs","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-1);\n font-family: var(--tempest-font-sans);\n width: 100%;\n}\n\n.label {\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n color: var(--tempest-text);\n}\n\n.field {\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-md);\n background: var(--tempest-surface);\n transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n border-color: var(--tempest-primary);\n box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n var(--tempest-focus-ring-color, var(--tempest-primary
|
|
1
|
+
{"version":3,"file":"PasswordInput.module.cjs","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-1);\n font-family: var(--tempest-font-sans);\n width: 100%;\n}\n\n.label {\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n color: var(--tempest-text);\n}\n\n.field {\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-md);\n background: var(--tempest-surface);\n transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n border-color: var(--tempest-primary);\n box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n var(--tempest-focus-ring-color, var(--tempest-primary));\n}\n\n.input {\n flex: 1 1 auto;\n border: 0;\n background: transparent;\n outline: 0;\n color: var(--tempest-text);\n font: inherit;\n font-family: var(--tempest-font-sans);\n}\n\n.sm .input {\n padding: 6px 8px;\n font-size: var(--tempest-text-sm);\n}\n\n.md .input {\n padding: 8px 12px;\n font-size: var(--tempest-text-md);\n}\n\n.lg .input {\n padding: 10px 14px;\n font-size: var(--tempest-text-lg);\n}\n\n.toggle {\n flex: 0 0 auto;\n background: none;\n border: 0;\n cursor: pointer;\n padding: 0 12px;\n font-size: 16px;\n color: var(--tempest-text-muted);\n}\n\n.toggle:hover {\n color: var(--tempest-text);\n}\n\n.error .field {\n border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n font-size: var(--tempest-text-xs);\n color: var(--tempest-text-muted);\n}\n\n.errorText {\n font-size: var(--tempest-text-xs);\n color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n\n.strength {\n display: flex;\n align-items: center;\n gap: var(--tempest-space-2);\n font-size: var(--tempest-text-xs);\n}\n\n.strengthBar {\n flex: 1 1 auto;\n height: 4px;\n background: var(--tempest-border);\n border-radius: var(--tempest-radius-full);\n overflow: hidden;\n}\n\n.strengthBar > span {\n display: block;\n height: 100%;\n transition: width var(--tempest-duration-base, 200ms);\n}\n\n.strengthLabel {\n color: var(--tempest-text-muted);\n flex: 0 0 auto;\n}\n\n.level0 .strengthBar > span,\n.level1 .strengthBar > span {\n background: var(--tempest-danger-solid, var(--tempest-danger));\n}\n\n.level2 .strengthBar > span {\n background: var(--tempest-warning-solid, var(--tempest-warning));\n}\n\n.level3 .strengthBar > span,\n.level4 .strengthBar > span {\n background: var(--tempest-success-solid, var(--tempest-success));\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordInput.module.js","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-1);\n font-family: var(--tempest-font-sans);\n width: 100%;\n}\n\n.label {\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n color: var(--tempest-text);\n}\n\n.field {\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-md);\n background: var(--tempest-surface);\n transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n border-color: var(--tempest-primary);\n box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n var(--tempest-focus-ring-color, var(--tempest-primary
|
|
1
|
+
{"version":3,"file":"PasswordInput.module.js","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-1);\n font-family: var(--tempest-font-sans);\n width: 100%;\n}\n\n.label {\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n color: var(--tempest-text);\n}\n\n.field {\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-md);\n background: var(--tempest-surface);\n transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n border-color: var(--tempest-primary);\n box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n var(--tempest-focus-ring-color, var(--tempest-primary));\n}\n\n.input {\n flex: 1 1 auto;\n border: 0;\n background: transparent;\n outline: 0;\n color: var(--tempest-text);\n font: inherit;\n font-family: var(--tempest-font-sans);\n}\n\n.sm .input {\n padding: 6px 8px;\n font-size: var(--tempest-text-sm);\n}\n\n.md .input {\n padding: 8px 12px;\n font-size: var(--tempest-text-md);\n}\n\n.lg .input {\n padding: 10px 14px;\n font-size: var(--tempest-text-lg);\n}\n\n.toggle {\n flex: 0 0 auto;\n background: none;\n border: 0;\n cursor: pointer;\n padding: 0 12px;\n font-size: 16px;\n color: var(--tempest-text-muted);\n}\n\n.toggle:hover {\n color: var(--tempest-text);\n}\n\n.error .field {\n border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n font-size: var(--tempest-text-xs);\n color: var(--tempest-text-muted);\n}\n\n.errorText {\n font-size: var(--tempest-text-xs);\n color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n\n.strength {\n display: flex;\n align-items: center;\n gap: var(--tempest-space-2);\n font-size: var(--tempest-text-xs);\n}\n\n.strengthBar {\n flex: 1 1 auto;\n height: 4px;\n background: var(--tempest-border);\n border-radius: var(--tempest-radius-full);\n overflow: hidden;\n}\n\n.strengthBar > span {\n display: block;\n height: 100%;\n transition: width var(--tempest-duration-base, 200ms);\n}\n\n.strengthLabel {\n color: var(--tempest-text-muted);\n flex: 0 0 auto;\n}\n\n.level0 .strengthBar > span,\n.level1 .strengthBar > span {\n background: var(--tempest-danger-solid, var(--tempest-danger));\n}\n\n.level2 .strengthBar > span {\n background: var(--tempest-warning-solid, var(--tempest-warning));\n}\n\n.level3 .strengthBar > span,\n.level4 .strengthBar > span {\n background: var(--tempest-success-solid, var(--tempest-success));\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PinInput.module.cjs","names":[],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-1);\n font-family: var(--tempest-font-sans);\n}\n\n.label {\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n color: var(--tempest-text);\n}\n\n.cells {\n display: flex;\n gap: var(--tempest-space-2);\n}\n\n.cell {\n flex: 0 0 auto;\n text-align: center;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-md);\n background: var(--tempest-surface);\n color: var(--tempest-text);\n font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n width: 32px;\n height: 36px;\n font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n width: 44px;\n height: 52px;\n font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n width: 56px;\n height: 64px;\n font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n outline: none;\n border-color: var(--tempest-primary);\n box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n var(--tempest-focus-ring-color, var(--tempest-primary
|
|
1
|
+
{"version":3,"file":"PinInput.module.cjs","names":[],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-1);\n font-family: var(--tempest-font-sans);\n}\n\n.label {\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n color: var(--tempest-text);\n}\n\n.cells {\n display: flex;\n gap: var(--tempest-space-2);\n}\n\n.cell {\n flex: 0 0 auto;\n text-align: center;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-md);\n background: var(--tempest-surface);\n color: var(--tempest-text);\n font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n width: 32px;\n height: 36px;\n font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n width: 44px;\n height: 52px;\n font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n width: 56px;\n height: 64px;\n font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n outline: none;\n border-color: var(--tempest-primary);\n box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n var(--tempest-focus-ring-color, var(--tempest-primary));\n}\n\n.cell:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.error .cell {\n border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n font-size: var(--tempest-text-xs);\n color: var(--tempest-text-muted);\n}\n\n.errorText {\n font-size: var(--tempest-text-xs);\n color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PinInput.module.js","names":[],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-1);\n font-family: var(--tempest-font-sans);\n}\n\n.label {\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n color: var(--tempest-text);\n}\n\n.cells {\n display: flex;\n gap: var(--tempest-space-2);\n}\n\n.cell {\n flex: 0 0 auto;\n text-align: center;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-md);\n background: var(--tempest-surface);\n color: var(--tempest-text);\n font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n width: 32px;\n height: 36px;\n font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n width: 44px;\n height: 52px;\n font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n width: 56px;\n height: 64px;\n font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n outline: none;\n border-color: var(--tempest-primary);\n box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n var(--tempest-focus-ring-color, var(--tempest-primary
|
|
1
|
+
{"version":3,"file":"PinInput.module.js","names":[],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-1);\n font-family: var(--tempest-font-sans);\n}\n\n.label {\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n color: var(--tempest-text);\n}\n\n.cells {\n display: flex;\n gap: var(--tempest-space-2);\n}\n\n.cell {\n flex: 0 0 auto;\n text-align: center;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-md);\n background: var(--tempest-surface);\n color: var(--tempest-text);\n font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n width: 32px;\n height: 36px;\n font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n width: 44px;\n height: 52px;\n font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n width: 56px;\n height: 64px;\n font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n outline: none;\n border-color: var(--tempest-primary);\n box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n var(--tempest-focus-ring-color, var(--tempest-primary));\n}\n\n.cell:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.error .cell {\n border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n font-size: var(--tempest-text-xs);\n color: var(--tempest-text-muted);\n}\n\n.errorText {\n font-size: var(--tempest-text-xs);\n color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n"],"mappings":""}
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
.tempest_frame_AFLKa:active{cursor:grabbing}
|
|
5
5
|
.tempest_frame_AFLKa:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:2px}
|
|
6
6
|
.tempest_circle_qI5b8{border-radius:var(--tempest-radius-full)}
|
|
7
|
-
.tempest_image_8RAkb{pointer-events:none;max-width:none;position:absolute;top:50%;left:50%;translate:-50% -50%}
|
|
8
|
-
.tempest_controls_Tbg70{align-items:center;gap:var(--tempest-space-3);display:flex}
|
|
9
|
-
.tempest_zoom_hMOSD{min-width:
|
|
7
|
+
.tempest_image_8RAkb{pointer-events:none;max-width:none;max-height:none;position:absolute;top:50%;left:50%;translate:-50% -50%}
|
|
8
|
+
.tempest_controls_Tbg70{align-items:center;gap:var(--tempest-space-3);flex-wrap:wrap;display:flex}
|
|
9
|
+
.tempest_zoom_hMOSD{min-width:6rem;accent-color:var(--tempest-primary);flex:6rem}
|
|
10
10
|
.tempest_zoom_hMOSD:disabled{opacity:.5}
|
|
11
11
|
.tempest_reset_TK3vP{padding:var(--tempest-space-1) var(--tempest-space-3);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-md);background-color:var(--tempest-bg);color:var(--tempest-text);font:inherit;font-size:var(--tempest-text-sm);cursor:pointer}
|
|
12
12
|
@media (hover:hover) and (pointer:fine){.tempest_reset_TK3vP:hover:not(:disabled){background-color:var(--tempest-surface)}}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
.tempest_wrapper_zEU-L{gap:var(--tempest-space-1);font-family:var(--tempest-font-sans);flex-direction:column;width:100%;display:flex}
|
|
3
3
|
.tempest_label_ps3gD{font-size:var(--tempest-text-sm);font-weight:var(--tempest-weight-medium);color:var(--tempest-text)}
|
|
4
4
|
.tempest_field_7taZG{border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-md);background:var(--tempest-surface);transition:border-color var(--tempest-duration-fast,.12s);align-items:center;display:flex;position:relative}
|
|
5
|
-
.tempest_field_7taZG:focus-within{border-color:var(--tempest-primary);box-shadow:0 0 0 var(--tempest-focus-ring-width,2px) var(--tempest-focus-ring-color,var(--tempest-primary
|
|
5
|
+
.tempest_field_7taZG:focus-within{border-color:var(--tempest-primary);box-shadow:0 0 0 var(--tempest-focus-ring-width,2px) var(--tempest-focus-ring-color,var(--tempest-primary))}
|
|
6
6
|
.tempest_input_FWEvb{color:var(--tempest-text);font:inherit;font-family:var(--tempest-font-sans);background:0 0;border:0;outline:0;flex:auto}
|
|
7
7
|
.tempest_sm_3-CZz .tempest_input_FWEvb{font-size:var(--tempest-text-sm);padding:6px 8px}
|
|
8
8
|
.tempest_md_ReV0O .tempest_input_FWEvb{font-size:var(--tempest-text-md);padding:8px 12px}
|
package/dist/styles/PinInput.css
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
.tempest_cells_URO3v.tempest_sm_SQM-s .tempest_cell_fxLzs{width:32px;height:36px;font-size:var(--tempest-text-md)}
|
|
7
7
|
.tempest_cells_URO3v.tempest_md_aHCGl .tempest_cell_fxLzs{width:44px;height:52px;font-size:var(--tempest-text-lg)}
|
|
8
8
|
.tempest_cells_URO3v.tempest_lg_JpI4A .tempest_cell_fxLzs{width:56px;height:64px;font-size:var(--tempest-text-xl)}
|
|
9
|
-
.tempest_cell_fxLzs:focus{border-color:var(--tempest-primary);box-shadow:0 0 0 var(--tempest-focus-ring-width,2px) var(--tempest-focus-ring-color,var(--tempest-primary
|
|
9
|
+
.tempest_cell_fxLzs:focus{border-color:var(--tempest-primary);box-shadow:0 0 0 var(--tempest-focus-ring-width,2px) var(--tempest-focus-ring-color,var(--tempest-primary));outline:none}
|
|
10
10
|
.tempest_cell_fxLzs:disabled{opacity:.4;cursor:not-allowed}
|
|
11
11
|
.tempest_error_Kou0o .tempest_cell_fxLzs{border-color:var(--tempest-danger-border,var(--tempest-danger))}
|
|
12
12
|
.tempest_helper_W04iL{font-size:var(--tempest-text-xs);color:var(--tempest-text-muted)}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/* Generated by scripts/split-css.mjs — do not edit. */
|
|
2
|
+
*,:before,:after{box-sizing:border-box}
|
|
3
|
+
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;tab-size:4}
|
|
4
|
+
:where(html,body,#root){height:100%}
|
|
5
|
+
body{background-color:var(--tempest-bg);color:var(--tempest-text);margin:0}
|
|
6
|
+
img,svg,video,canvas,audio,iframe,embed,object{max-width:100%;display:block}
|
|
7
|
+
img,video{height:auto}
|
|
8
|
+
:where(button,a,label,summary)>svg:only-child{margin-inline:auto}
|
|
9
|
+
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;letter-spacing:inherit}
|
|
10
|
+
button{cursor:pointer;background:0 0;border:0;padding:0}
|
|
11
|
+
button:disabled{cursor:not-allowed}
|
|
12
|
+
button::-moz-focus-inner{border:0;padding:0}
|
|
13
|
+
textarea{resize:vertical}
|
|
14
|
+
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
|
|
15
|
+
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
|
|
16
|
+
input[type=search]::-webkit-search-results-button{-webkit-appearance:none}
|
|
17
|
+
input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}
|
|
18
|
+
table{border-collapse:collapse;border-spacing:0}
|
|
19
|
+
:where(ul,ol)[class]{margin:0;padding:0;list-style:none}
|
|
20
|
+
:focus-visible{outline:var(--tempest-focus-ring-width,3px) solid var(--tempest-focus-ring-color,currentColor);outline-offset:var(--tempest-focus-ring-offset,2px)}
|
|
21
|
+
@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
|
|
22
|
+
@media (width<=767.98px){.tempest-hide-mobile{display:none!important}}
|
|
23
|
+
@media (width>=768px) and (width<=1023.98px){.tempest-hide-tablet{display:none!important}}
|
|
24
|
+
@media (width>=1024px){.tempest-hide-desktop{display:none!important}}
|
|
25
|
+
@media (width>=768px){.tempest-show-only-mobile{display:none!important}}
|
|
26
|
+
@media (width<=767.98px),(width>=1024px){.tempest-show-only-tablet{display:none!important}}
|
|
27
|
+
@media (width<=1023.98px){.tempest-show-only-desktop{display:none!important}}
|
|
28
|
+
@media (pointer:fine){.tempest-show-only-touch{display:none!important}}
|
|
29
|
+
@media (pointer:coarse){.tempest-hide-touch{display:none!important}}
|
|
30
|
+
@media print{.tempest-hide-print{display:none!important}}
|
|
31
|
+
@media screen{.tempest-show-only-print{display:none!important}}
|
|
32
|
+
@media print{*,:before,:after{box-shadow:none!important;text-shadow:none!important;color:#000!important;background-color:#0000!important}body{font-size:11pt;line-height:1.4;color:#000!important;background:#fff!important}.tempest-hide-print,[role=dialog],[aria-modal=true],[role=tooltip],[role=status][aria-live]{display:none!important}table,figure,pre,[class*=card]{page-break-inside:avoid;break-inside:avoid}a[href]:after{content:" (" attr(href) ")";font-size:90%;color:#555!important}a[href^=\#]:after,a[href^=javascript\:]:after{content:""}h1,h2,h3,h4,h5,h6{page-break-after:avoid;break-after:avoid-page;color:#000!important}}
|
|
33
|
+
/*$vite$:1*/
|
package/dist/styles/core.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* Generated by scripts/split-css.mjs — do not edit. */
|
|
2
|
-
:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--tempest-primary-50:#eef4ff;--tempest-primary-100:#d9e6ff;--tempest-primary-200:#b3ccff;--tempest-primary-300:#80aaff;--tempest-primary-400:#4d85ff;--tempest-primary-500:#06f;--tempest-primary-600:#0052cc;--tempest-primary-700:#003d99;--tempest-primary-800:#002e75;--tempest-primary-900:#001f4d;--tempest-primary:var(--tempest-primary-500);--tempest-primary-hover:var(--tempest-primary-600);--tempest-primary-active:var(--tempest-primary-700);--tempest-primary-soft:var(--tempest-primary-50);--tempest-primary-soft-hover:var(--tempest-primary-100);--tempest-primary-foreground:#fff;--tempest-danger-on-solid:#fff;--tempest-info-on-solid:#fff;--tempest-success-on-solid:#1f0606;--tempest-warning-on-solid:#1f0606;--tempest-neutral-on-solid:#fff;--tempest-primary-on-soft:var(--tempest-primary-600);--tempest-gray-50:#f8f9fb;--tempest-gray-100:#f1f3f6;--tempest-gray-200:#e4e7ec;--tempest-gray-300:#d0d5dd;--tempest-gray-400:#98a2b3;--tempest-gray-500:#667085;--tempest-gray-600:#475467;--tempest-gray-700:#344054;--tempest-gray-800:#1d2939;--tempest-gray-900:#101828;--tempest-bg:#fff;--tempest-surface:var(--tempest-gray-50);--tempest-surface-2:var(--tempest-gray-100);--tempest-surface-3:var(--tempest-gray-200);--tempest-border:var(--tempest-gray-200);--tempest-border-strong:var(--tempest-gray-300);--tempest-text:var(--tempest-gray-900);--tempest-text-muted:var(--tempest-gray-600);--tempest-text-subtle:var(--tempest-gray-500);--tempest-text-on-primary:#fff;--tempest-success:#15803d;--tempest-success-fg:#14532d;--tempest-success-bg:#dcfce7;--tempest-success-border:#86efac;--tempest-success-solid:#16a34a;--tempest-warning:#b45309;--tempest-warning-fg:#78350f;--tempest-warning-bg:#fef3c7;--tempest-warning-border:#fcd34d;--tempest-warning-solid:#d97706;--tempest-danger:#b91c1c;--tempest-danger-fg:#7f1d1d;--tempest-danger-bg:#fee2e2;--tempest-danger-border:#fca5a5;--tempest-danger-solid:#dc2626;--tempest-danger-hover:#991b1b;--tempest-info:#1d4ed8;--tempest-info-fg:#1e3a8a;--tempest-info-bg:#dbeafe;--tempest-info-border:#93c5fd;--tempest-info-solid:#2563eb;--tempest-focus-ring-color:#
|
|
3
|
-
[data-tempest-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--tempest-primary-50:#0a1730;--tempest-primary-100:#0f2245;--tempest-primary-200:#133066;--tempest-primary-300:#1a4399;--tempest-primary-400:#2563eb;--tempest-primary-500:#3b82f6;--tempest-primary-600:#60a5fa;--tempest-primary-700:#93c5fd;--tempest-primary-800:#bfdbfe;--tempest-primary-900:#dbeafe;--tempest-primary:var(--tempest-primary-500);--tempest-primary-hover:var(--tempest-primary-600);--tempest-primary-active:var(--tempest-primary-700);--tempest-primary-soft:var(--tempest-primary-100);--tempest-primary-soft-hover:var(--tempest-primary-200);--tempest-primary-on-soft:var(--tempest-primary-700);--tempest-bg:#0b0d12;--tempest-surface:#14171f;--tempest-surface-2:#1d2230;--tempest-surface-3:#262d3f;--tempest-border:#2a3142;--tempest-border-strong:#3a4258;--tempest-text:#f1f3f8;--tempest-text-muted:#aab2c0;--tempest-text-subtle:#7b849a;--tempest-primary-foreground:#1f0606;--tempest-text-on-primary:var(--tempest-primary-foreground);--tempest-danger-on-solid:#1f0606;--tempest-info-on-solid:#1f0606;--tempest-success-on-solid:#1f0606;--tempest-warning-on-solid:#1f0606;--tempest-neutral-on-solid:#fff;--tempest-success-fg:#4ade80;--tempest-success-bg:#052e16;--tempest-success-border:#166534;--tempest-success-solid:#22c55e;--tempest-success:#4ade80;--tempest-warning-fg:#fbbf24;--tempest-warning-bg:#2c1c05;--tempest-warning-border:#78350f;--tempest-warning-solid:#f59e0b;--tempest-warning:#fbbf24;--tempest-danger-fg:#f87171;--tempest-danger-bg:#2c0a0a;--tempest-danger-border:#7f1d1d;--tempest-danger-solid:#ef4444;--tempest-danger:#f87171;--tempest-danger-hover:#f87171;--tempest-info-fg:#60a5fa;--tempest-info-bg:#0a1730;--tempest-info-border:#1e3a8a;--tempest-info-solid:#3b82f6;--tempest-info:#60a5fa;--tempest-focus-ring-color:#
|
|
2
|
+
:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--tempest-primary-50:#eef4ff;--tempest-primary-100:#d9e6ff;--tempest-primary-200:#b3ccff;--tempest-primary-300:#80aaff;--tempest-primary-400:#4d85ff;--tempest-primary-500:#06f;--tempest-primary-600:#0052cc;--tempest-primary-700:#003d99;--tempest-primary-800:#002e75;--tempest-primary-900:#001f4d;--tempest-primary:var(--tempest-primary-500);--tempest-primary-hover:var(--tempest-primary-600);--tempest-primary-active:var(--tempest-primary-700);--tempest-primary-soft:var(--tempest-primary-50);--tempest-primary-soft-hover:var(--tempest-primary-100);--tempest-primary-foreground:#fff;--tempest-danger-on-solid:#fff;--tempest-info-on-solid:#fff;--tempest-success-on-solid:#1f0606;--tempest-warning-on-solid:#1f0606;--tempest-neutral-on-solid:#fff;--tempest-primary-on-soft:var(--tempest-primary-600);--tempest-gray-50:#f8f9fb;--tempest-gray-100:#f1f3f6;--tempest-gray-200:#e4e7ec;--tempest-gray-300:#d0d5dd;--tempest-gray-400:#98a2b3;--tempest-gray-500:#667085;--tempest-gray-600:#475467;--tempest-gray-700:#344054;--tempest-gray-800:#1d2939;--tempest-gray-900:#101828;--tempest-bg:#fff;--tempest-surface:var(--tempest-gray-50);--tempest-surface-2:var(--tempest-gray-100);--tempest-surface-3:var(--tempest-gray-200);--tempest-border:var(--tempest-gray-200);--tempest-border-strong:var(--tempest-gray-300);--tempest-text:var(--tempest-gray-900);--tempest-text-muted:var(--tempest-gray-600);--tempest-text-subtle:var(--tempest-gray-500);--tempest-text-on-primary:#fff;--tempest-success:#15803d;--tempest-success-fg:#14532d;--tempest-success-bg:#dcfce7;--tempest-success-border:#86efac;--tempest-success-solid:#16a34a;--tempest-warning:#b45309;--tempest-warning-fg:#78350f;--tempest-warning-bg:#fef3c7;--tempest-warning-border:#fcd34d;--tempest-warning-solid:#d97706;--tempest-danger:#b91c1c;--tempest-danger-fg:#7f1d1d;--tempest-danger-bg:#fee2e2;--tempest-danger-border:#fca5a5;--tempest-danger-solid:#dc2626;--tempest-danger-hover:#991b1b;--tempest-info:#1d4ed8;--tempest-info-fg:#1e3a8a;--tempest-info-bg:#dbeafe;--tempest-info-border:#93c5fd;--tempest-info-solid:#2563eb;--tempest-focus-ring-color:#0052cc;--tempest-focus-ring-width:3px;--tempest-focus-ring-offset:2px;--tempest-radius-xs:2px;--tempest-radius-sm:4px;--tempest-radius-md:8px;--tempest-radius-lg:12px;--tempest-radius-xl:16px;--tempest-radius-2xl:24px;--tempest-radius-full:9999px;--tempest-shadow-xs:0 1px 2px #0f172a0a;--tempest-shadow-sm:0 1px 3px #0f172a14, 0 1px 2px #0f172a0a;--tempest-shadow-md:0 4px 12px #0f172a14, 0 2px 4px #0f172a0a;--tempest-shadow-lg:0 12px 32px #0f172a1f, 0 4px 8px #0f172a0f;--tempest-shadow-xl:0 24px 48px #0f172a2e, 0 8px 16px #0f172a14;--tempest-shadow-inner:inset 0 2px 4px #0f172a0f;--tempest-space-0:0px;--tempest-space-1:4px;--tempest-space-2:8px;--tempest-space-3:12px;--tempest-space-4:16px;--tempest-space-5:20px;--tempest-space-6:24px;--tempest-space-7:28px;--tempest-space-8:32px;--tempest-space-10:40px;--tempest-space-12:48px;--tempest-space-16:64px;--tempest-space-20:80px;--tempest-space-24:96px;--tempest-font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;--tempest-font-mono:ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;--tempest-font-display:var(--tempest-font-sans);--tempest-z-base:0;--tempest-z-raised:10;--tempest-z-dropdown:1000;--tempest-z-sticky:1020;--tempest-z-overlay:1050;--tempest-z-modal:1100;--tempest-z-popover:1150;--tempest-z-toast:1200;--tempest-z-tooltip:1300;--tempest-bp-xs:480px;--tempest-bp-sm:640px;--tempest-bp-md:768px;--tempest-bp-lg:1024px;--tempest-bp-xl:1280px;--tempest-bp-2xl:1536px;--tempest-chart-1:#2563eb;--tempest-chart-2:#16a34a;--tempest-chart-3:#f59e0b;--tempest-chart-4:#7c3aed;--tempest-chart-5:#ec4899;--tempest-chart-6:#06b6d4;--tempest-chart-7:#ea580c;--tempest-chart-8:#0f766e;--tempest-chart-sequential-1:#dde8fe;--tempest-chart-sequential-2:#acc8fe;--tempest-chart-sequential-3:#7aa7ff;--tempest-chart-sequential-4:#4983fc;--tempest-chart-sequential-5:#3667ce;--tempest-chart-sequential-6:#2b4e96;--tempest-chart-sequential-7:#25375a;--tempest-chart-diverging-1:#0f3ca1;--tempest-chart-diverging-2:#416eca;--tempest-chart-diverging-3:#7ba0e7;--tempest-chart-diverging-4:#bdd2f9;--tempest-chart-diverging-5:#e4e7ec;--tempest-chart-diverging-6:#f6c3bc;--tempest-chart-diverging-7:#de847a;--tempest-chart-diverging-8:#ba473f;--tempest-chart-diverging-9:#870f11;--tempest-chart-grid:var(--tempest-gray-200);--tempest-chart-axis:var(--tempest-gray-500);--tempest-code-comment:#5f666e;--tempest-code-punctuation:#5d6671;--tempest-code-string:#327243;--tempest-code-number:#9d5035;--tempest-code-keyword:#625baf;--tempest-code-literal:#9f4c4f;--tempest-code-function:#1a6c94;--tempest-code-tag:#974d72;--tempest-code-attribute:#127171;--tempest-code-property:#127171;--tempest-safe-area-top:env(safe-area-inset-top,0px);--tempest-safe-area-right:env(safe-area-inset-right,0px);--tempest-safe-area-bottom:env(safe-area-inset-bottom,0px);--tempest-safe-area-left:env(safe-area-inset-left,0px)}
|
|
3
|
+
[data-tempest-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--tempest-primary-50:#0a1730;--tempest-primary-100:#0f2245;--tempest-primary-200:#133066;--tempest-primary-300:#1a4399;--tempest-primary-400:#2563eb;--tempest-primary-500:#3b82f6;--tempest-primary-600:#60a5fa;--tempest-primary-700:#93c5fd;--tempest-primary-800:#bfdbfe;--tempest-primary-900:#dbeafe;--tempest-primary:var(--tempest-primary-500);--tempest-primary-hover:var(--tempest-primary-600);--tempest-primary-active:var(--tempest-primary-700);--tempest-primary-soft:var(--tempest-primary-100);--tempest-primary-soft-hover:var(--tempest-primary-200);--tempest-primary-on-soft:var(--tempest-primary-700);--tempest-bg:#0b0d12;--tempest-surface:#14171f;--tempest-surface-2:#1d2230;--tempest-surface-3:#262d3f;--tempest-border:#2a3142;--tempest-border-strong:#3a4258;--tempest-text:#f1f3f8;--tempest-text-muted:#aab2c0;--tempest-text-subtle:#7b849a;--tempest-primary-foreground:#1f0606;--tempest-text-on-primary:var(--tempest-primary-foreground);--tempest-danger-on-solid:#1f0606;--tempest-info-on-solid:#1f0606;--tempest-success-on-solid:#1f0606;--tempest-warning-on-solid:#1f0606;--tempest-neutral-on-solid:#fff;--tempest-success-fg:#4ade80;--tempest-success-bg:#052e16;--tempest-success-border:#166534;--tempest-success-solid:#22c55e;--tempest-success:#4ade80;--tempest-warning-fg:#fbbf24;--tempest-warning-bg:#2c1c05;--tempest-warning-border:#78350f;--tempest-warning-solid:#f59e0b;--tempest-warning:#fbbf24;--tempest-danger-fg:#f87171;--tempest-danger-bg:#2c0a0a;--tempest-danger-border:#7f1d1d;--tempest-danger-solid:#ef4444;--tempest-danger:#f87171;--tempest-danger-hover:#f87171;--tempest-info-fg:#60a5fa;--tempest-info-bg:#0a1730;--tempest-info-border:#1e3a8a;--tempest-info-solid:#3b82f6;--tempest-info:#60a5fa;--tempest-focus-ring-color:#60a5fa;--tempest-shadow-xs:0 1px 2px #0000004d;--tempest-shadow-sm:0 1px 3px #0006, 0 1px 2px #0003;--tempest-shadow-md:0 4px 12px #0006, 0 2px 4px #0003;--tempest-shadow-lg:0 12px 32px #00000080, 0 4px 8px #0000004d;--tempest-shadow-xl:0 24px 48px #0009, 0 8px 16px #0000004d;--tempest-chart-1:#60a5fa;--tempest-chart-2:#4ade80;--tempest-chart-3:#fbbf24;--tempest-chart-4:#a78bfa;--tempest-chart-5:#f472b6;--tempest-chart-6:#22d3ee;--tempest-chart-7:#fb923c;--tempest-chart-8:#2dd4bf;--tempest-chart-sequential-1:#172849;--tempest-chart-sequential-2:#1b3c83;--tempest-chart-sequential-3:#2453b9;--tempest-chart-sequential-4:#376fe5;--tempest-chart-sequential-5:#5b90fb;--tempest-chart-sequential-6:#8cb2fa;--tempest-chart-sequential-7:#bad2fe;--tempest-chart-diverging-1:#1543a8;--tempest-chart-diverging-2:#416eca;--tempest-chart-diverging-3:#7599e0;--tempest-chart-diverging-4:#b0c5ec;--tempest-chart-diverging-5:#262d3f;--tempest-chart-diverging-6:#e8b6af;--tempest-chart-diverging-7:#d77e74;--tempest-chart-diverging-8:#ba473f;--tempest-chart-diverging-9:#94020c;--tempest-chart-grid:var(--tempest-gray-300);--tempest-chart-axis:var(--tempest-gray-600);--tempest-code-comment:#838b93;--tempest-code-punctuation:#818b95;--tempest-code-string:#589866;--tempest-code-number:#c57558;--tempest-code-keyword:#8580d8;--tempest-code-literal:#c87172;--tempest-code-function:#2893c6;--tempest-code-tag:#c07197;--tempest-code-attribute:#349897;--tempest-code-property:#349897}
|
|
4
4
|
:root{--tempest-text-2xs:10px;--tempest-text-xs:12px;--tempest-text-sm:13px;--tempest-text-base:14px;--tempest-text-md:15px;--tempest-text-lg:16px;--tempest-text-xl:18px;--tempest-text-2xl:20px;--tempest-text-3xl:24px;--tempest-text-4xl:30px;--tempest-text-5xl:36px;--tempest-text-6xl:48px;--tempest-leading-none:1;--tempest-leading-tight:1.2;--tempest-leading-snug:1.35;--tempest-leading-normal:1.5;--tempest-leading-relaxed:1.65;--tempest-leading-loose:1.9;--tempest-weight-regular:400;--tempest-weight-medium:500;--tempest-weight-semibold:600;--tempest-weight-bold:700;--tempest-weight-extrabold:800;--tempest-tracking-tight:-.02em;--tempest-tracking-normal:0;--tempest-tracking-wide:.025em;--tempest-tracking-wider:.05em;--tempest-tracking-widest:.1em;--tempest-text-fluid-sm:clamp(13px, 12px + .2vw, 15px);--tempest-text-fluid-base:clamp(14px, 13px + .3vw, 16px);--tempest-text-fluid-lg:clamp(16px, 14px + .5vw, 20px);--tempest-text-fluid-xl:clamp(18px, 15px + .8vw, 24px);--tempest-text-fluid-2xl:clamp(20px, 16px + 1.2vw, 30px);--tempest-text-fluid-3xl:clamp(24px, 18px + 2vw, 40px);--tempest-text-fluid-4xl:clamp(28px, 20px + 3vw, 56px);--tempest-text-fluid-5xl:clamp(32px, 24px + 4vw, 72px);--tempest-text-fluid-6xl:clamp(40px, 28px + 5vw, 96px);--tempest-duration-instant:0s;--tempest-duration-fast:.12s;--tempest-duration-base:.18s;--tempest-duration-slow:.28s;--tempest-duration-slower:.42s;--tempest-ease-linear:linear;--tempest-ease-in:cubic-bezier(.4, 0, 1, 1);--tempest-ease-out:cubic-bezier(0, 0, .2, 1);--tempest-ease-in-out:cubic-bezier(.4, 0, .2, 1);--tempest-ease-emphasized:cubic-bezier(.2, 0, 0, 1);--tempest-ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--tempest-transition-color:color var(--tempest-duration-fast) var(--tempest-ease-out), background-color var(--tempest-duration-fast) var(--tempest-ease-out), border-color var(--tempest-duration-fast) var(--tempest-ease-out);--tempest-transition-shadow:box-shadow var(--tempest-duration-base) var(--tempest-ease-out);--tempest-transition-transform:transform var(--tempest-duration-fast) var(--tempest-ease-out);--tempest-transition-base:color var(--tempest-duration-fast) var(--tempest-ease-out), background-color var(--tempest-duration-fast) var(--tempest-ease-out), border-color var(--tempest-duration-fast) var(--tempest-ease-out), box-shadow var(--tempest-duration-base) var(--tempest-ease-out), transform var(--tempest-duration-fast) var(--tempest-ease-out), opacity var(--tempest-duration-fast) var(--tempest-ease-out)}
|
|
5
5
|
@media (prefers-reduced-motion:reduce){:root{--tempest-duration-fast:.01ms;--tempest-duration-base:.01ms;--tempest-duration-slow:.01ms;--tempest-duration-slower:.01ms}}
|
|
6
6
|
:root,[data-tempest-density=comfortable]{--tempest-control-height-xs:24px;--tempest-control-height-sm:32px;--tempest-control-height-md:40px;--tempest-control-height-lg:48px;--tempest-control-height-xl:56px;--tempest-control-padding-xs:var(--tempest-space-2);--tempest-control-padding-sm:var(--tempest-space-3);--tempest-control-padding-md:var(--tempest-space-4);--tempest-control-padding-lg:var(--tempest-space-5);--tempest-control-padding-xl:var(--tempest-space-6);--tempest-control-font-xs:var(--tempest-text-xs);--tempest-control-font-sm:var(--tempest-text-sm);--tempest-control-font-md:var(--tempest-text-base);--tempest-control-font-lg:var(--tempest-text-lg);--tempest-control-font-xl:var(--tempest-text-xl);--tempest-control-radius:var(--tempest-radius-md);--tempest-control-gap:var(--tempest-space-2)}
|
|
@@ -26,7 +26,7 @@ input[type=search]::-webkit-search-results-button{-webkit-appearance:none}
|
|
|
26
26
|
input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}
|
|
27
27
|
table{border-collapse:collapse;border-spacing:0}
|
|
28
28
|
:where(ul,ol)[class]{margin:0;padding:0;list-style:none}
|
|
29
|
-
:focus-visible{outline:var(--tempest-focus-ring-width,3px) solid var(--tempest-focus-ring-color
|
|
29
|
+
:focus-visible{outline:var(--tempest-focus-ring-width,3px) solid var(--tempest-focus-ring-color,currentColor);outline-offset:var(--tempest-focus-ring-offset,2px)}
|
|
30
30
|
@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
|
|
31
31
|
@media (width<=767.98px){.tempest-hide-mobile{display:none!important}}
|
|
32
32
|
@media (width>=768px) and (width<=1023.98px){.tempest-hide-tablet{display:none!important}}
|
package/dist/styles/forms.css
CHANGED
|
@@ -106,9 +106,9 @@
|
|
|
106
106
|
.tempest_frame_AFLKa:active{cursor:grabbing}
|
|
107
107
|
.tempest_frame_AFLKa:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:2px}
|
|
108
108
|
.tempest_circle_qI5b8{border-radius:var(--tempest-radius-full)}
|
|
109
|
-
.tempest_image_8RAkb{pointer-events:none;max-width:none;position:absolute;top:50%;left:50%;translate:-50% -50%}
|
|
110
|
-
.tempest_controls_Tbg70{align-items:center;gap:var(--tempest-space-3);display:flex}
|
|
111
|
-
.tempest_zoom_hMOSD{min-width:
|
|
109
|
+
.tempest_image_8RAkb{pointer-events:none;max-width:none;max-height:none;position:absolute;top:50%;left:50%;translate:-50% -50%}
|
|
110
|
+
.tempest_controls_Tbg70{align-items:center;gap:var(--tempest-space-3);flex-wrap:wrap;display:flex}
|
|
111
|
+
.tempest_zoom_hMOSD{min-width:6rem;accent-color:var(--tempest-primary);flex:6rem}
|
|
112
112
|
.tempest_zoom_hMOSD:disabled{opacity:.5}
|
|
113
113
|
.tempest_reset_TK3vP{padding:var(--tempest-space-1) var(--tempest-space-3);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-md);background-color:var(--tempest-bg);color:var(--tempest-text);font:inherit;font-size:var(--tempest-text-sm);cursor:pointer}
|
|
114
114
|
@media (hover:hover) and (pointer:fine){.tempest_reset_TK3vP:hover:not(:disabled){background-color:var(--tempest-surface)}}
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
.tempest_wrapper_zEU-L{gap:var(--tempest-space-1);font-family:var(--tempest-font-sans);flex-direction:column;width:100%;display:flex}
|
|
163
163
|
.tempest_label_ps3gD{font-size:var(--tempest-text-sm);font-weight:var(--tempest-weight-medium);color:var(--tempest-text)}
|
|
164
164
|
.tempest_field_7taZG{border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-md);background:var(--tempest-surface);transition:border-color var(--tempest-duration-fast,.12s);align-items:center;display:flex;position:relative}
|
|
165
|
-
.tempest_field_7taZG:focus-within{border-color:var(--tempest-primary);box-shadow:0 0 0 var(--tempest-focus-ring-width,2px) var(--tempest-focus-ring-color,var(--tempest-primary
|
|
165
|
+
.tempest_field_7taZG:focus-within{border-color:var(--tempest-primary);box-shadow:0 0 0 var(--tempest-focus-ring-width,2px) var(--tempest-focus-ring-color,var(--tempest-primary))}
|
|
166
166
|
.tempest_input_FWEvb{color:var(--tempest-text);font:inherit;font-family:var(--tempest-font-sans);background:0 0;border:0;outline:0;flex:auto}
|
|
167
167
|
.tempest_sm_3-CZz .tempest_input_FWEvb{font-size:var(--tempest-text-sm);padding:6px 8px}
|
|
168
168
|
.tempest_md_ReV0O .tempest_input_FWEvb{font-size:var(--tempest-text-md);padding:8px 12px}
|
|
@@ -186,7 +186,7 @@
|
|
|
186
186
|
.tempest_cells_URO3v.tempest_sm_SQM-s .tempest_cell_fxLzs{width:32px;height:36px;font-size:var(--tempest-text-md)}
|
|
187
187
|
.tempest_cells_URO3v.tempest_md_aHCGl .tempest_cell_fxLzs{width:44px;height:52px;font-size:var(--tempest-text-lg)}
|
|
188
188
|
.tempest_cells_URO3v.tempest_lg_JpI4A .tempest_cell_fxLzs{width:56px;height:64px;font-size:var(--tempest-text-xl)}
|
|
189
|
-
.tempest_cell_fxLzs:focus{border-color:var(--tempest-primary);box-shadow:0 0 0 var(--tempest-focus-ring-width,2px) var(--tempest-focus-ring-color,var(--tempest-primary
|
|
189
|
+
.tempest_cell_fxLzs:focus{border-color:var(--tempest-primary);box-shadow:0 0 0 var(--tempest-focus-ring-width,2px) var(--tempest-focus-ring-color,var(--tempest-primary));outline:none}
|
|
190
190
|
.tempest_cell_fxLzs:disabled{opacity:.4;cursor:not-allowed}
|
|
191
191
|
.tempest_error_Kou0o .tempest_cell_fxLzs{border-color:var(--tempest-danger-border,var(--tempest-danger))}
|
|
192
192
|
.tempest_helper_W04iL{font-size:var(--tempest-text-xs);color:var(--tempest-text-muted)}
|