jbx 2.14.0 → 2.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/README.md +40 -3
  2. package/dist/generated/css.d.ts +1 -1
  3. package/dist/generated/css.d.ts.map +1 -1
  4. package/dist/generated/css.js +1 -1
  5. package/dist/generated/css.js.map +1 -1
  6. package/dist/main.css +50 -25
  7. package/dist/primitives.d.ts.map +1 -1
  8. package/dist/primitives.js +2 -1
  9. package/dist/primitives.js.map +1 -1
  10. package/dist/spacing.d.ts +1 -1
  11. package/dist/spacing.d.ts.map +1 -1
  12. package/dist/spacing.js +1 -1
  13. package/dist/spacing.js.map +1 -1
  14. package/package.json +32 -13
  15. package/src/generated/css.ts +1 -1
  16. package/src/primitives.tsx +2 -2
  17. package/src/spacing.ts +1 -1
  18. package/src/style.css +50 -25
package/README.md CHANGED
@@ -7,6 +7,8 @@ components with a class each, one stylesheet, no runtime dependencies.
7
7
  pnpm add jbx
8
8
  ```
9
9
 
10
+ React is a peer dependency (`17`, `18` or `19`), so it uses whichever copy you already have.
11
+
10
12
  ## Styles
11
13
 
12
14
  Either import the stylesheet and set your own accent color:
@@ -27,7 +29,14 @@ Or let the `JBX` component do both:
27
29
  <JBX accent="#f1c40f" />
28
30
  ```
29
31
 
30
- `JBX` has no hooks and no dependencies, so it renders inside a React server component too.
32
+ `JBX` has no hooks and no dependencies, so it renders inside a React server component too. So does
33
+ every component except `Input`, which holds the state behind `onValueChange` and is marked
34
+ `'use client'`.
35
+
36
+ Two more variables are worth knowing about. `--control-height` is how tall a `Button`, `Input` or
37
+ `Range` stands on its own; `--control-height-compact` is what one shrinks to inside a `Tabs` row,
38
+ where it matches the line box of the text beside it so the row is no taller than a row of plain
39
+ tabs.
31
40
 
32
41
  ## Use
33
42
 
@@ -46,6 +55,32 @@ function App() {
46
55
  }
47
56
  ```
48
57
 
58
+ ## Components
59
+
60
+ Layout: `Container`, `Inline`, `Stack`, `Box`, `Space`.
61
+
62
+ Type: `MainHeader`, `HeaderH1`--`HeaderH4`, `Text`, `SmallText`, `A`, `Ul`, `Li`, `Bullet`, `HR`.
63
+
64
+ Controls: `Button`, `Input`, `Range`, `Checkbox`, `Tabs` with `Tab`, `Dropzone`.
65
+
66
+ Code: `CodeSnippet`, `CodeTextarea`.
67
+
68
+ Plus `JBX` for the stylesheet, `MoreExperiments` for the footer that links the other tools, and
69
+ `Component` and `space` for building your own.
70
+
71
+ ## Number inputs
72
+
73
+ `Input` is a plain controlled input until you hand it `onValueChange`, which switches it to numbers
74
+ and takes over the awkward part: it holds what was typed and only calls you back once that parses
75
+ and lands inside `min`/`max`. A half typed value never reaches your state, so nothing downstream
76
+ jumps around mid-keystroke, and blurring a field you left half typed restores the live value.
77
+
78
+ ```jsx
79
+ <Input value={seconds} onValueChange={secondsSet} min={0.2} max={60} step="0.5" />
80
+ ```
81
+
82
+ `value` and `onChange` on their own behave exactly as they always did.
83
+
49
84
  ## Spacing
50
85
 
51
86
  Everything is measured in units of `--size` (16px, 14px on smaller screens). `<Space h={2} />`,
@@ -69,9 +104,11 @@ const Sprite = Component(
69
104
  ## Develop
70
105
 
71
106
  ```
72
- pnpm dev # rebuild on change
107
+ pnpm dev # serve the interactive preview at localhost:3008/jbx
108
+ pnpm dev:lib # rebuild the published library on change
109
+ pnpm preview:build # make a production build of the preview
73
110
  pnpm typecheck
74
- pnpm test # renders every export, fails on any React warning
111
+ pnpm test # renders every export, fails on any React warning
75
112
  ```
76
113
 
77
114
  ## Publish
package/dist/generated/css.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const CSS = "html {\n box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\n\n:root {\n --size: 16px;\n --font-size: 16px;\n --font-size-small: 17px;\n --radius-small: 2px;\n /* Every interactive control is this tall, so a button, an input and a range\n standing next to each other line up. */\n --control-height: calc(var(--size) * 2.5);\n /* What a control shrinks to inside a tab row, where it has to match the line\n box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand\n on its own -- a row holding one is then exactly as tall as one that doesn't. */\n --control-height-compact: calc(var(--font-size) * 1.4);\n}\n\n@media screen and (max-width: 1200px) {\n :root {\n --font-size: 18px;\n --font-size-small: 16px;\n --size: 14px;\n }\n}\n\n@media screen and (max-width: 600px) {\n :root {\n --font-size: 16px;\n --font-size-small: 14px;\n }\n}\n\n* {\n padding: 0;\n margin: 0;\n position: relative;\n}\n\nbody {\n touch-action: pan-y;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n background: #fcfcfd;\n color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n line-height: 1;\n padding: 0;\n font-variation-settings: 'wght' 600;\n font-weight: 600;\n color: var(--base-font-color-bright);\n}\nh1 {\n font-variation-settings: 'wdth' 107, 'wght' 650;\n font-weight: 650;\n}\n\nstrong,\nb {\n font-weight: 500;\n}\n\n.jbx-main-h1 {\n display: inline-block;\n background-color: var(--accent-color);\n font-size: calc(var(--font-size) * 2);\n padding: 8px;\n}\n\n.jbx-h1 {\n font-size: calc(var(--font-size) * 2);\n font-weight: 700;\n}\n.jbx-h2 {\n font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n font-size: var(--font-size-small);\n text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n font-size: var(--font-size);\n line-height: 1;\n}\n\n.jbx-code-snippet {\n border-radius: var(--size);\n font-family: monaco, monospace;\n border: none;\n width: 100%;\n font-size: calc(var(--size) - 3px);\n line-height: 1.33;\n padding: var(--size) calc(var(--size) * 1.2);\n background: #ecf0f1;\n color: #34495e;\n resize: none;\n}\n.jbx-code-snippet:focus {\n outline: none;\n}\n\n.jbx-code-area {\n border-radius: var(--size);\n font-family: monaco, monospace;\n border: none;\n width: 100%;\n font-size: calc(var(--size) - 3px);\n line-height: 1.33;\n padding: var(--size) calc(var(--size) * 1.2);\n background: #ecf0f1;\n color: #34495e;\n resize: none;\n min-height: 120px;\n}\n.jbx-code-area:focus {\n outline: none;\n}\n\n.jbx-button {\n color: #000;\n border-radius: var(--radius-small);\n appearance: none;\n user-select: none;\n cursor: pointer;\n display: inline-block;\n background-color: #eee;\n box-shadow: 3px 3px 0 #ccc;\n padding: 0 calc(var(--size) / 2);\n border: none;\n height: var(--control-height);\n transition: top 0.1s, left 0.1s, box-shadow 0.05s;\n}\n.jbx-button:active {\n top: 1px;\n left: 1px;\n box-shadow: 1px 1px 0 #ccc;\n}\n.jbx-button:disabled {\n cursor: default;\n color: #999;\n background-color: #f4f4f4;\n box-shadow: 1px 1px 0 #e0e0e0;\n}\n.jbx-button:disabled:active {\n top: 0;\n left: 0;\n box-shadow: 1px 1px 0 #e0e0e0;\n}\n\n/* LINKS */\n.jbx-a {\n cursor: pointer;\n color: #000;\n box-shadow: #0002 0 2px 0;\n font-weight: 500;\n text-decoration: none;\n}\n.jbx-a::after {\n content: '\u2197';\n color: #0004;\n font-size: var(--font-size-small);\n position: relative;\n top: -1px;\n right: -1px;\n transition: top 0.3s, right 0.3s, color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n top: -3px;\n right: -3px;\n color: var(--accent-color);\n}\n\n.jbx-block-link {\n min-width: 300px;\n flex: 1;\n text-decoration: none;\n color: #000;\n display: inline-block;\n padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n content: '';\n display: block;\n position: absolute;\n background-color: #ecf0f1;\n z-index: -1;\n transition: transform 0.2s, opacity 0.2s;\n transform: scale(0.98) translatey(4px);\n opacity: 0;\n top: -4px;\n left: -6px;\n right: -6px;\n bottom: -4px;\n}\n.jbx-block-link::before {\n border-radius: 16px;\n}\na.jbx-a::before {\n border-radius: 8px;\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n transform: scale(1) translatey(0);\n opacity: 1;\n}\n\n.jbx-a {\n display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n font-size: var(--font-size-small);\n}\n\n.jbx-container {\n max-width: 1080px;\n margin: 0 auto;\n padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n flex: 1;\n}\n\n.jbx-inline {\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n}\n\n.jbx-stack {\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n}\n\n.jbx-text {\n line-height: 1.4;\n}\n\n.jbx-input {\n color: #777;\n -webkit-text-fill-color: #777;\n opacity: 1;\n flex: 1;\n display: block;\n appearance: none;\n border: none;\n border-radius: var(--radius-small);\n height: var(--control-height);\n background-color: #eee;\n padding: 0 calc(var(--size) * 0.5);\n box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n/* Chrome hides the stepper until hover and takes its width out of the content\n box, so the value slides sideways as the pointer enters. Keep it painted. */\n.jbx-input[type='number']::-webkit-inner-spin-button,\n.jbx-input[type='number']::-webkit-outer-spin-button {\n opacity: 1;\n}\n\n/* A control inside a tab row sizes to the row, not to itself: it matches the\n line box of the text beside it, so a row holding a field is exactly as tall\n as one that only holds tabs. `flex: none` because `.jbx-input` stretches,\n which is right for a field that owns its row and wrong for one sitting\n between two bits of text. */\n.jbx-tabs .jbx-input,\n.jbx-tabs .jbx-button {\n flex: none;\n height: var(--control-height-compact);\n}\n\n.jbx-dropzone {\n height: 120px;\n flex: 1;\n display: flex;\n text-align: center;\n align-items: center;\n align-content: center;\n justify-content: center;\n flex-direction: column;\n border: 2px dashed #000;\n color: #000;\n padding: 0;\n cursor: pointer;\n}\n.jbx-dropzone:hover {\n border-color: #999;\n}\n.jbx-dropzone span {\n width: 100%;\n cursor: pointer;\n}\n.jbx-dropzone input {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0;\n cursor: pointer;\n}\n\n.jbx-range {\n flex: 1;\n width: 100%;\n appearance: none;\n background-color: #bdc3c780;\n height: var(--size);\n border-radius: 0;\n border-radius: var(--radius-small);\n}\n\n.jbx-range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n box-shadow: none;\n border-radius: 0;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-thumb {\n appearance: none;\n box-shadow: none;\n border-radius: 0;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n appearance: none;\n}\n.jbx-range:focus {\n outline: none;\n}\n\n.jbx-bullet-container {\n display: inline-block;\n margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n border: 1px solid #0001;\n color: #000;\n background-color: #0001;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: calc(var(--font-size-small) - 3px);\n height: calc(var(--size) * 1.25);\n width: calc(var(--size) * 1.25);\n border-radius: 100%;\n top: -2px;\n margin-right: 2px;\n}\n\n.jbx-hr {\n margin: calc(var(--size) * 2) auto;\n width: 38.2%;\n border-radius: 0;\n border: none;\n border-top: 2px solid #ecf0f1;\n}\n";
1
+ export declare const CSS = "html {\n box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n corner-shape: squircle;\n}\n\n:root {\n --size: 16px;\n --font-size: 16px;\n --font-size-small: 15px;\n --font-family-monospace:\n ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\n --radius-small: 1px;\n --radius-big: 15px;\n /* Every interactive control is this tall, so a button, an input and a range\n standing next to each other line up. */\n --control-height: calc(var(--size) * 2.5);\n /* What a control shrinks to inside a tab row, where it has to match the line\n box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand\n on its own -- a row holding one is then exactly as tall as one that doesn't. */\n --control-height-compact: calc(var(--font-size) * 1.4);\n}\n\n@media screen and (max-width: 1200px) {\n :root {\n --font-size: 18px;\n --font-size-small: 16px;\n --size: 14px;\n }\n}\n\n@media screen and (max-width: 600px) {\n :root {\n --font-size: 16px;\n --font-size-small: 14px;\n }\n}\n\n* {\n padding: 0;\n margin: 0;\n position: relative;\n}\n\nbody {\n touch-action: pan-y;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n background: #fdfdfd;\n color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n line-height: 1;\n padding: 0;\n font-variation-settings: 'wght' 600;\n font-weight: 600;\n color: var(--base-font-color-bright);\n}\nh1 {\n font-variation-settings:\n 'wdth' 107,\n 'wght' 650;\n font-weight: 650;\n}\n\nstrong,\nb {\n font-weight: 500;\n}\n\n.jbx-main-h1 {\n display: inline-block;\n background-color: var(--accent-color);\n border-radius: var(--radius-small);\n font-size: calc(var(--font-size) * 2);\n padding: 8px;\n}\n\n.jbx-h1 {\n font-size: calc(var(--font-size) * 2);\n font-weight: 700;\n}\n.jbx-h2 {\n font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n font-size: var(--font-size-small);\n text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n font-size: var(--font-size);\n line-height: 1;\n}\n\n.jbx-code-snippet {\n border-radius: var(--radius-small);\n font-family: var(--font-family-monospace);\n border: none;\n width: 100%;\n font-size: calc(var(--size) - 3px);\n line-height: 1.33;\n padding: var(--size) calc(var(--size) * 1.2);\n background: #eee;\n color: #444;\n resize: none;\n}\n.jbx-code-snippet:focus {\n outline: none;\n}\n\n.jbx-code-area {\n border-radius: var(--radius-big);\n font-family: var(--font-family-monospace);\n border: none;\n width: 100%;\n font-size: calc(var(--size) - 3px);\n line-height: 1.33;\n padding: var(--size) calc(var(--size) * 1.2);\n background: #eee;\n color: #444;\n resize: none;\n min-height: 120px;\n}\n.jbx-code-area:focus {\n outline: none;\n}\n\n.jbx-button {\n color: #000;\n border-radius: var(--radius-small);\n appearance: none;\n user-select: none;\n cursor: pointer;\n display: inline-block;\n background-color: #eee;\n box-shadow: 3px 3px 0 #ccc;\n padding: 0 calc(var(--size) / 2);\n border: none;\n height: var(--control-height);\n transition:\n top 0.1s,\n left 0.1s,\n box-shadow 0.05s;\n}\n.jbx-button:active {\n top: 1px;\n left: 1px;\n box-shadow: 1px 1px 0 #ccc;\n}\n.jbx-button:disabled {\n cursor: default;\n color: #999;\n background-color: #f4f4f4;\n box-shadow: 1px 1px 0 #e0e0e0;\n}\n.jbx-button:disabled:active {\n top: 0;\n left: 0;\n box-shadow: 1px 1px 0 #e0e0e0;\n}\n\n/* LINKS */\n.jbx-a {\n cursor: pointer;\n color: #000;\n box-shadow: #0002 0 2px 0;\n font-weight: 500;\n text-decoration: none;\n}\n.jbx-a::after {\n content: '\u2197';\n color: #0004;\n font-size: var(--font-size-small);\n position: relative;\n top: -1px;\n right: -1px;\n transition:\n top 0.3s,\n right 0.3s,\n color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n top: -3px;\n right: -3px;\n color: var(--accent-color);\n}\n\n.jbx-block-link {\n min-width: 300px;\n flex: 1;\n text-decoration: none;\n color: #000;\n display: inline-block;\n padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n content: '';\n display: block;\n position: absolute;\n background-color: #eee;\n z-index: -1;\n transition:\n transform 0.2s,\n opacity 0.2s;\n transform: scale(0.98) translatey(4px);\n opacity: 0;\n top: -4px;\n left: -6px;\n right: -6px;\n bottom: -4px;\n}\n.jbx-block-link::before {\n border-radius: var(--radius-small);\n}\na.jbx-a::before {\n border-radius: var(--radius-small);\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n transform: scale(1) translatey(0);\n opacity: 1;\n}\n\n.jbx-a {\n display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n font-size: var(--font-size-small);\n}\n\n.jbx-container {\n max-width: 1080px;\n margin: 0 auto;\n padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n flex: 1;\n}\n\n.jbx-inline {\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n}\n\n.jbx-stack {\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n}\n\n.jbx-text {\n line-height: 1.4;\n}\n\n.jbx-tabs--tab {\n border-radius: var(--radius-small);\n}\n\n.jbx-input {\n color: #777;\n -webkit-text-fill-color: #777;\n opacity: 1;\n flex: 1;\n display: block;\n appearance: none;\n border: none;\n border-radius: var(--radius-small);\n height: var(--control-height);\n background-color: #eee;\n padding: 0 calc(var(--size) * 0.5);\n box-shadow:\n inset rgba(0, 0, 0, 0.04) 3px 3px 0,\n inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n/* Chrome hides the stepper until hover and takes its width out of the content\n box, so the value slides sideways as the pointer enters. Keep it painted. */\n.jbx-input[type='number']::-webkit-inner-spin-button,\n.jbx-input[type='number']::-webkit-outer-spin-button {\n opacity: 1;\n}\n\n/* A control inside a tab row sizes to the row, not to itself: it matches the\n line box of the text beside it, so a row holding a field is exactly as tall\n as one that only holds tabs. `flex: none` because `.jbx-input` stretches,\n which is right for a field that owns its row and wrong for one sitting\n between two bits of text. */\n.jbx-tabs .jbx-input,\n.jbx-tabs .jbx-button {\n flex: none;\n height: var(--control-height-compact);\n}\n\n.jbx-dropzone {\n height: 120px;\n flex: 1;\n display: flex;\n text-align: center;\n align-items: center;\n align-content: center;\n justify-content: center;\n flex-direction: column;\n border: 2px dashed #000;\n border-radius: var(--radius-big);\n color: #000;\n padding: 0;\n cursor: pointer;\n}\n.jbx-dropzone:hover {\n border-color: #999;\n}\n.jbx-dropzone span {\n width: 100%;\n cursor: pointer;\n}\n.jbx-dropzone input {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0;\n cursor: pointer;\n}\n\n.jbx-range {\n flex: 1;\n width: 100%;\n appearance: none;\n background-color: #c0c0c080;\n height: var(--size);\n border-radius: var(--radius-small);\n}\n\n.jbx-range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n box-shadow: none;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-thumb {\n appearance: none;\n box-shadow: none;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n appearance: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-track {\n background-color: #c0c0c080;\n border-radius: var(--radius-small);\n height: var(--size);\n}\n.jbx-range:focus {\n outline: none;\n}\n\n.jbx-bullet-container {\n display: inline-block;\n margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n border: 1px solid #0001;\n color: #000;\n background-color: #0001;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: calc(var(--font-size-small) - 3px);\n height: calc(var(--size) * 1.25);\n width: calc(var(--size) * 1.25);\n border-radius: 100%;\n top: -2px;\n margin-right: 2px;\n}\n\n.jbx-hr {\n margin: calc(var(--size) * 2) auto;\n width: 38.2%;\n border-radius: var(--radius-small);\n border: none;\n border-top: 2px solid #eee;\n}\n";
2
2
  //# sourceMappingURL=css.d.ts.map
package/dist/generated/css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,GAAG,iiQAA4hQ,CAAC"}
1
+ {"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,GAAG,ukRAAkkR,CAAC"}
package/dist/generated/css.js CHANGED
@@ -1,3 +1,3 @@
1
1
  // Generated by scripts/build-css.mjs from src/style.css. Do not edit.
2
- export const CSS = "html {\n box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\n\n:root {\n --size: 16px;\n --font-size: 16px;\n --font-size-small: 17px;\n --radius-small: 2px;\n /* Every interactive control is this tall, so a button, an input and a range\n standing next to each other line up. */\n --control-height: calc(var(--size) * 2.5);\n /* What a control shrinks to inside a tab row, where it has to match the line\n box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand\n on its own -- a row holding one is then exactly as tall as one that doesn't. */\n --control-height-compact: calc(var(--font-size) * 1.4);\n}\n\n@media screen and (max-width: 1200px) {\n :root {\n --font-size: 18px;\n --font-size-small: 16px;\n --size: 14px;\n }\n}\n\n@media screen and (max-width: 600px) {\n :root {\n --font-size: 16px;\n --font-size-small: 14px;\n }\n}\n\n* {\n padding: 0;\n margin: 0;\n position: relative;\n}\n\nbody {\n touch-action: pan-y;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n background: #fcfcfd;\n color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n line-height: 1;\n padding: 0;\n font-variation-settings: 'wght' 600;\n font-weight: 600;\n color: var(--base-font-color-bright);\n}\nh1 {\n font-variation-settings: 'wdth' 107, 'wght' 650;\n font-weight: 650;\n}\n\nstrong,\nb {\n font-weight: 500;\n}\n\n.jbx-main-h1 {\n display: inline-block;\n background-color: var(--accent-color);\n font-size: calc(var(--font-size) * 2);\n padding: 8px;\n}\n\n.jbx-h1 {\n font-size: calc(var(--font-size) * 2);\n font-weight: 700;\n}\n.jbx-h2 {\n font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n font-size: var(--font-size-small);\n text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n font-size: var(--font-size);\n line-height: 1;\n}\n\n.jbx-code-snippet {\n border-radius: var(--size);\n font-family: monaco, monospace;\n border: none;\n width: 100%;\n font-size: calc(var(--size) - 3px);\n line-height: 1.33;\n padding: var(--size) calc(var(--size) * 1.2);\n background: #ecf0f1;\n color: #34495e;\n resize: none;\n}\n.jbx-code-snippet:focus {\n outline: none;\n}\n\n.jbx-code-area {\n border-radius: var(--size);\n font-family: monaco, monospace;\n border: none;\n width: 100%;\n font-size: calc(var(--size) - 3px);\n line-height: 1.33;\n padding: var(--size) calc(var(--size) * 1.2);\n background: #ecf0f1;\n color: #34495e;\n resize: none;\n min-height: 120px;\n}\n.jbx-code-area:focus {\n outline: none;\n}\n\n.jbx-button {\n color: #000;\n border-radius: var(--radius-small);\n appearance: none;\n user-select: none;\n cursor: pointer;\n display: inline-block;\n background-color: #eee;\n box-shadow: 3px 3px 0 #ccc;\n padding: 0 calc(var(--size) / 2);\n border: none;\n height: var(--control-height);\n transition: top 0.1s, left 0.1s, box-shadow 0.05s;\n}\n.jbx-button:active {\n top: 1px;\n left: 1px;\n box-shadow: 1px 1px 0 #ccc;\n}\n.jbx-button:disabled {\n cursor: default;\n color: #999;\n background-color: #f4f4f4;\n box-shadow: 1px 1px 0 #e0e0e0;\n}\n.jbx-button:disabled:active {\n top: 0;\n left: 0;\n box-shadow: 1px 1px 0 #e0e0e0;\n}\n\n/* LINKS */\n.jbx-a {\n cursor: pointer;\n color: #000;\n box-shadow: #0002 0 2px 0;\n font-weight: 500;\n text-decoration: none;\n}\n.jbx-a::after {\n content: '↗';\n color: #0004;\n font-size: var(--font-size-small);\n position: relative;\n top: -1px;\n right: -1px;\n transition: top 0.3s, right 0.3s, color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n top: -3px;\n right: -3px;\n color: var(--accent-color);\n}\n\n.jbx-block-link {\n min-width: 300px;\n flex: 1;\n text-decoration: none;\n color: #000;\n display: inline-block;\n padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n content: '';\n display: block;\n position: absolute;\n background-color: #ecf0f1;\n z-index: -1;\n transition: transform 0.2s, opacity 0.2s;\n transform: scale(0.98) translatey(4px);\n opacity: 0;\n top: -4px;\n left: -6px;\n right: -6px;\n bottom: -4px;\n}\n.jbx-block-link::before {\n border-radius: 16px;\n}\na.jbx-a::before {\n border-radius: 8px;\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n transform: scale(1) translatey(0);\n opacity: 1;\n}\n\n.jbx-a {\n display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n font-size: var(--font-size-small);\n}\n\n.jbx-container {\n max-width: 1080px;\n margin: 0 auto;\n padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n flex: 1;\n}\n\n.jbx-inline {\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n}\n\n.jbx-stack {\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n}\n\n.jbx-text {\n line-height: 1.4;\n}\n\n.jbx-input {\n color: #777;\n -webkit-text-fill-color: #777;\n opacity: 1;\n flex: 1;\n display: block;\n appearance: none;\n border: none;\n border-radius: var(--radius-small);\n height: var(--control-height);\n background-color: #eee;\n padding: 0 calc(var(--size) * 0.5);\n box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n/* Chrome hides the stepper until hover and takes its width out of the content\n box, so the value slides sideways as the pointer enters. Keep it painted. */\n.jbx-input[type='number']::-webkit-inner-spin-button,\n.jbx-input[type='number']::-webkit-outer-spin-button {\n opacity: 1;\n}\n\n/* A control inside a tab row sizes to the row, not to itself: it matches the\n line box of the text beside it, so a row holding a field is exactly as tall\n as one that only holds tabs. `flex: none` because `.jbx-input` stretches,\n which is right for a field that owns its row and wrong for one sitting\n between two bits of text. */\n.jbx-tabs .jbx-input,\n.jbx-tabs .jbx-button {\n flex: none;\n height: var(--control-height-compact);\n}\n\n.jbx-dropzone {\n height: 120px;\n flex: 1;\n display: flex;\n text-align: center;\n align-items: center;\n align-content: center;\n justify-content: center;\n flex-direction: column;\n border: 2px dashed #000;\n color: #000;\n padding: 0;\n cursor: pointer;\n}\n.jbx-dropzone:hover {\n border-color: #999;\n}\n.jbx-dropzone span {\n width: 100%;\n cursor: pointer;\n}\n.jbx-dropzone input {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0;\n cursor: pointer;\n}\n\n.jbx-range {\n flex: 1;\n width: 100%;\n appearance: none;\n background-color: #bdc3c780;\n height: var(--size);\n border-radius: 0;\n border-radius: var(--radius-small);\n}\n\n.jbx-range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n box-shadow: none;\n border-radius: 0;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-thumb {\n appearance: none;\n box-shadow: none;\n border-radius: 0;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n appearance: none;\n}\n.jbx-range:focus {\n outline: none;\n}\n\n.jbx-bullet-container {\n display: inline-block;\n margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n border: 1px solid #0001;\n color: #000;\n background-color: #0001;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: calc(var(--font-size-small) - 3px);\n height: calc(var(--size) * 1.25);\n width: calc(var(--size) * 1.25);\n border-radius: 100%;\n top: -2px;\n margin-right: 2px;\n}\n\n.jbx-hr {\n margin: calc(var(--size) * 2) auto;\n width: 38.2%;\n border-radius: 0;\n border: none;\n border-top: 2px solid #ecf0f1;\n}\n";
2
+ export const CSS = "html {\n box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n corner-shape: squircle;\n}\n\n:root {\n --size: 16px;\n --font-size: 16px;\n --font-size-small: 15px;\n --font-family-monospace:\n ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\n --radius-small: 1px;\n --radius-big: 15px;\n /* Every interactive control is this tall, so a button, an input and a range\n standing next to each other line up. */\n --control-height: calc(var(--size) * 2.5);\n /* What a control shrinks to inside a tab row, where it has to match the line\n box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand\n on its own -- a row holding one is then exactly as tall as one that doesn't. */\n --control-height-compact: calc(var(--font-size) * 1.4);\n}\n\n@media screen and (max-width: 1200px) {\n :root {\n --font-size: 18px;\n --font-size-small: 16px;\n --size: 14px;\n }\n}\n\n@media screen and (max-width: 600px) {\n :root {\n --font-size: 16px;\n --font-size-small: 14px;\n }\n}\n\n* {\n padding: 0;\n margin: 0;\n position: relative;\n}\n\nbody {\n touch-action: pan-y;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n background: #fdfdfd;\n color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n line-height: 1;\n padding: 0;\n font-variation-settings: 'wght' 600;\n font-weight: 600;\n color: var(--base-font-color-bright);\n}\nh1 {\n font-variation-settings:\n 'wdth' 107,\n 'wght' 650;\n font-weight: 650;\n}\n\nstrong,\nb {\n font-weight: 500;\n}\n\n.jbx-main-h1 {\n display: inline-block;\n background-color: var(--accent-color);\n border-radius: var(--radius-small);\n font-size: calc(var(--font-size) * 2);\n padding: 8px;\n}\n\n.jbx-h1 {\n font-size: calc(var(--font-size) * 2);\n font-weight: 700;\n}\n.jbx-h2 {\n font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n font-size: var(--font-size-small);\n text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n font-size: var(--font-size);\n line-height: 1;\n}\n\n.jbx-code-snippet {\n border-radius: var(--radius-small);\n font-family: var(--font-family-monospace);\n border: none;\n width: 100%;\n font-size: calc(var(--size) - 3px);\n line-height: 1.33;\n padding: var(--size) calc(var(--size) * 1.2);\n background: #eee;\n color: #444;\n resize: none;\n}\n.jbx-code-snippet:focus {\n outline: none;\n}\n\n.jbx-code-area {\n border-radius: var(--radius-big);\n font-family: var(--font-family-monospace);\n border: none;\n width: 100%;\n font-size: calc(var(--size) - 3px);\n line-height: 1.33;\n padding: var(--size) calc(var(--size) * 1.2);\n background: #eee;\n color: #444;\n resize: none;\n min-height: 120px;\n}\n.jbx-code-area:focus {\n outline: none;\n}\n\n.jbx-button {\n color: #000;\n border-radius: var(--radius-small);\n appearance: none;\n user-select: none;\n cursor: pointer;\n display: inline-block;\n background-color: #eee;\n box-shadow: 3px 3px 0 #ccc;\n padding: 0 calc(var(--size) / 2);\n border: none;\n height: var(--control-height);\n transition:\n top 0.1s,\n left 0.1s,\n box-shadow 0.05s;\n}\n.jbx-button:active {\n top: 1px;\n left: 1px;\n box-shadow: 1px 1px 0 #ccc;\n}\n.jbx-button:disabled {\n cursor: default;\n color: #999;\n background-color: #f4f4f4;\n box-shadow: 1px 1px 0 #e0e0e0;\n}\n.jbx-button:disabled:active {\n top: 0;\n left: 0;\n box-shadow: 1px 1px 0 #e0e0e0;\n}\n\n/* LINKS */\n.jbx-a {\n cursor: pointer;\n color: #000;\n box-shadow: #0002 0 2px 0;\n font-weight: 500;\n text-decoration: none;\n}\n.jbx-a::after {\n content: '↗';\n color: #0004;\n font-size: var(--font-size-small);\n position: relative;\n top: -1px;\n right: -1px;\n transition:\n top 0.3s,\n right 0.3s,\n color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n top: -3px;\n right: -3px;\n color: var(--accent-color);\n}\n\n.jbx-block-link {\n min-width: 300px;\n flex: 1;\n text-decoration: none;\n color: #000;\n display: inline-block;\n padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n content: '';\n display: block;\n position: absolute;\n background-color: #eee;\n z-index: -1;\n transition:\n transform 0.2s,\n opacity 0.2s;\n transform: scale(0.98) translatey(4px);\n opacity: 0;\n top: -4px;\n left: -6px;\n right: -6px;\n bottom: -4px;\n}\n.jbx-block-link::before {\n border-radius: var(--radius-small);\n}\na.jbx-a::before {\n border-radius: var(--radius-small);\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n transform: scale(1) translatey(0);\n opacity: 1;\n}\n\n.jbx-a {\n display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n font-size: var(--font-size-small);\n}\n\n.jbx-container {\n max-width: 1080px;\n margin: 0 auto;\n padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n flex: 1;\n}\n\n.jbx-inline {\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n}\n\n.jbx-stack {\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n}\n\n.jbx-text {\n line-height: 1.4;\n}\n\n.jbx-tabs--tab {\n border-radius: var(--radius-small);\n}\n\n.jbx-input {\n color: #777;\n -webkit-text-fill-color: #777;\n opacity: 1;\n flex: 1;\n display: block;\n appearance: none;\n border: none;\n border-radius: var(--radius-small);\n height: var(--control-height);\n background-color: #eee;\n padding: 0 calc(var(--size) * 0.5);\n box-shadow:\n inset rgba(0, 0, 0, 0.04) 3px 3px 0,\n inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n/* Chrome hides the stepper until hover and takes its width out of the content\n box, so the value slides sideways as the pointer enters. Keep it painted. */\n.jbx-input[type='number']::-webkit-inner-spin-button,\n.jbx-input[type='number']::-webkit-outer-spin-button {\n opacity: 1;\n}\n\n/* A control inside a tab row sizes to the row, not to itself: it matches the\n line box of the text beside it, so a row holding a field is exactly as tall\n as one that only holds tabs. `flex: none` because `.jbx-input` stretches,\n which is right for a field that owns its row and wrong for one sitting\n between two bits of text. */\n.jbx-tabs .jbx-input,\n.jbx-tabs .jbx-button {\n flex: none;\n height: var(--control-height-compact);\n}\n\n.jbx-dropzone {\n height: 120px;\n flex: 1;\n display: flex;\n text-align: center;\n align-items: center;\n align-content: center;\n justify-content: center;\n flex-direction: column;\n border: 2px dashed #000;\n border-radius: var(--radius-big);\n color: #000;\n padding: 0;\n cursor: pointer;\n}\n.jbx-dropzone:hover {\n border-color: #999;\n}\n.jbx-dropzone span {\n width: 100%;\n cursor: pointer;\n}\n.jbx-dropzone input {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0;\n cursor: pointer;\n}\n\n.jbx-range {\n flex: 1;\n width: 100%;\n appearance: none;\n background-color: #c0c0c080;\n height: var(--size);\n border-radius: var(--radius-small);\n}\n\n.jbx-range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n box-shadow: none;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-thumb {\n appearance: none;\n box-shadow: none;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n appearance: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-track {\n background-color: #c0c0c080;\n border-radius: var(--radius-small);\n height: var(--size);\n}\n.jbx-range:focus {\n outline: none;\n}\n\n.jbx-bullet-container {\n display: inline-block;\n margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n border: 1px solid #0001;\n color: #000;\n background-color: #0001;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: calc(var(--font-size-small) - 3px);\n height: calc(var(--size) * 1.25);\n width: calc(var(--size) * 1.25);\n border-radius: 100%;\n top: -2px;\n margin-right: 2px;\n}\n\n.jbx-hr {\n margin: calc(var(--size) * 2) auto;\n width: 38.2%;\n border-radius: var(--radius-small);\n border: none;\n border-top: 2px solid #eee;\n}\n";
3
3
  //# sourceMappingURL=css.js.map
package/dist/generated/css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,CAAC,MAAM,GAAG,GAAG,yhQAAyhQ,CAAC"}
1
+ {"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,CAAC,MAAM,GAAG,GAAG,+jRAA+jR,CAAC"}
package/dist/main.css CHANGED
@@ -5,13 +5,17 @@ html {
5
5
  *:before,
6
6
  *:after {
7
7
  box-sizing: inherit;
8
+ corner-shape: squircle;
8
9
  }
9
10
 
10
11
  :root {
11
12
  --size: 16px;
12
13
  --font-size: 16px;
13
- --font-size-small: 17px;
14
- --radius-small: 2px;
14
+ --font-size-small: 15px;
15
+ --font-family-monospace:
16
+ ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
17
+ --radius-small: 1px;
18
+ --radius-big: 15px;
15
19
  /* Every interactive control is this tall, so a button, an input and a range
16
20
  standing next to each other line up. */
17
21
  --control-height: calc(var(--size) * 2.5);
@@ -54,7 +58,7 @@ button {
54
58
  }
55
59
 
56
60
  body {
57
- background: #fcfcfd;
61
+ background: #fdfdfd;
58
62
  color: #000;
59
63
  }
60
64
 
@@ -69,7 +73,9 @@ h4 {
69
73
  color: var(--base-font-color-bright);
70
74
  }
71
75
  h1 {
72
- font-variation-settings: 'wdth' 107, 'wght' 650;
76
+ font-variation-settings:
77
+ 'wdth' 107,
78
+ 'wght' 650;
73
79
  font-weight: 650;
74
80
  }
75
81
 
@@ -81,6 +87,7 @@ b {
81
87
  .jbx-main-h1 {
82
88
  display: inline-block;
83
89
  background-color: var(--accent-color);
90
+ border-radius: var(--radius-small);
84
91
  font-size: calc(var(--font-size) * 2);
85
92
  padding: 8px;
86
93
  }
@@ -110,15 +117,15 @@ body,
110
117
  }
111
118
 
112
119
  .jbx-code-snippet {
113
- border-radius: var(--size);
114
- font-family: monaco, monospace;
120
+ border-radius: var(--radius-small);
121
+ font-family: var(--font-family-monospace);
115
122
  border: none;
116
123
  width: 100%;
117
124
  font-size: calc(var(--size) - 3px);
118
125
  line-height: 1.33;
119
126
  padding: var(--size) calc(var(--size) * 1.2);
120
- background: #ecf0f1;
121
- color: #34495e;
127
+ background: #eee;
128
+ color: #444;
122
129
  resize: none;
123
130
  }
124
131
  .jbx-code-snippet:focus {
@@ -126,15 +133,15 @@ body,
126
133
  }
127
134
 
128
135
  .jbx-code-area {
129
- border-radius: var(--size);
130
- font-family: monaco, monospace;
136
+ border-radius: var(--radius-big);
137
+ font-family: var(--font-family-monospace);
131
138
  border: none;
132
139
  width: 100%;
133
140
  font-size: calc(var(--size) - 3px);
134
141
  line-height: 1.33;
135
142
  padding: var(--size) calc(var(--size) * 1.2);
136
- background: #ecf0f1;
137
- color: #34495e;
143
+ background: #eee;
144
+ color: #444;
138
145
  resize: none;
139
146
  min-height: 120px;
140
147
  }
@@ -154,7 +161,10 @@ body,
154
161
  padding: 0 calc(var(--size) / 2);
155
162
  border: none;
156
163
  height: var(--control-height);
157
- transition: top 0.1s, left 0.1s, box-shadow 0.05s;
164
+ transition:
165
+ top 0.1s,
166
+ left 0.1s,
167
+ box-shadow 0.05s;
158
168
  }
159
169
  .jbx-button:active {
160
170
  top: 1px;
@@ -188,7 +198,10 @@ body,
188
198
  position: relative;
189
199
  top: -1px;
190
200
  right: -1px;
191
- transition: top 0.3s, right 0.3s, color 0.3s;
201
+ transition:
202
+ top 0.3s,
203
+ right 0.3s,
204
+ color 0.3s;
192
205
  }
193
206
  .jbx-a:hover,
194
207
  .jbx-block-link:hover .jbx-a {
@@ -214,9 +227,11 @@ a.jbx-a::before,
214
227
  content: '';
215
228
  display: block;
216
229
  position: absolute;
217
- background-color: #ecf0f1;
230
+ background-color: #eee;
218
231
  z-index: -1;
219
- transition: transform 0.2s, opacity 0.2s;
232
+ transition:
233
+ transform 0.2s,
234
+ opacity 0.2s;
220
235
  transform: scale(0.98) translatey(4px);
221
236
  opacity: 0;
222
237
  top: -4px;
@@ -225,10 +240,10 @@ a.jbx-a::before,
225
240
  bottom: -4px;
226
241
  }
227
242
  .jbx-block-link::before {
228
- border-radius: 16px;
243
+ border-radius: var(--radius-small);
229
244
  }
230
245
  a.jbx-a::before {
231
- border-radius: 8px;
246
+ border-radius: var(--radius-small);
232
247
  }
233
248
  a.jbx-a:hover::before,
234
249
  .jbx-block-link:hover::before {
@@ -274,6 +289,10 @@ a.jbx-a:hover::before,
274
289
  line-height: 1.4;
275
290
  }
276
291
 
292
+ .jbx-tabs--tab {
293
+ border-radius: var(--radius-small);
294
+ }
295
+
277
296
  .jbx-input {
278
297
  color: #777;
279
298
  -webkit-text-fill-color: #777;
@@ -286,7 +305,9 @@ a.jbx-a:hover::before,
286
305
  height: var(--control-height);
287
306
  background-color: #eee;
288
307
  padding: 0 calc(var(--size) * 0.5);
289
- box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;
308
+ box-shadow:
309
+ inset rgba(0, 0, 0, 0.04) 3px 3px 0,
310
+ inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;
290
311
  }
291
312
 
292
313
  /* Chrome hides the stepper until hover and takes its width out of the content
@@ -317,6 +338,7 @@ a.jbx-a:hover::before,
317
338
  justify-content: center;
318
339
  flex-direction: column;
319
340
  border: 2px dashed #000;
341
+ border-radius: var(--radius-big);
320
342
  color: #000;
321
343
  padding: 0;
322
344
  cursor: pointer;
@@ -342,9 +364,8 @@ a.jbx-a:hover::before,
342
364
  flex: 1;
343
365
  width: 100%;
344
366
  appearance: none;
345
- background-color: #bdc3c780;
367
+ background-color: #c0c0c080;
346
368
  height: var(--size);
347
- border-radius: 0;
348
369
  border-radius: var(--radius-small);
349
370
  }
350
371
 
@@ -352,7 +373,6 @@ a.jbx-a:hover::before,
352
373
  -webkit-appearance: none;
353
374
  appearance: none;
354
375
  box-shadow: none;
355
- border-radius: 0;
356
376
  height: calc(var(--size) * 2);
357
377
  width: var(--size);
358
378
  background-color: #000;
@@ -362,7 +382,6 @@ a.jbx-a:hover::before,
362
382
  .jbx-range::-moz-range-thumb {
363
383
  appearance: none;
364
384
  box-shadow: none;
365
- border-radius: 0;
366
385
  height: calc(var(--size) * 2);
367
386
  width: var(--size);
368
387
  background-color: #000;
@@ -371,6 +390,12 @@ a.jbx-a:hover::before,
371
390
  }
372
391
  .jbx-range::-webkit-slider-runnable-track {
373
392
  appearance: none;
393
+ border-radius: var(--radius-small);
394
+ }
395
+ .jbx-range::-moz-range-track {
396
+ background-color: #c0c0c080;
397
+ border-radius: var(--radius-small);
398
+ height: var(--size);
374
399
  }
375
400
  .jbx-range:focus {
376
401
  outline: none;
@@ -400,7 +425,7 @@ a.jbx-a:hover::before,
400
425
  .jbx-hr {
401
426
  margin: calc(var(--size) * 2) auto;
402
427
  width: 38.2%;
403
- border-radius: 0;
428
+ border-radius: var(--radius-small);
404
429
  border: none;
405
- border-top: 2px solid #ecf0f1;
430
+ border-top: 2px solid #eee;
406
431
  }
package/dist/primitives.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"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"}
package/dist/primitives.js CHANGED
@@ -56,9 +56,10 @@ export const Li = Component(`jbx-li`, {
56
56
  }, { element: 'li' });
57
57
  export const Tabs = Component(`jbx-tabs`);
58
58
  export const Tab = Component(`jbx-tabs--tab`, ({ info, active }) => ({
59
+ borderRadius: BASE_RADIUS,
59
60
  userSelect: 'none',
60
61
  cursor: 'pointer',
61
- backgroundColor: active ? '#000' : info ? '#fff' : '#ecf0f1',
62
+ backgroundColor: active ? '#000' : info ? '#fff' : '#eee',
62
63
  color: active ? '#fff' : '#000',
63
64
  padding: space(0.5),
64
65
  paddingLeft: info ? 0 : space(0.5)
package/dist/primitives.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"primitives.js","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"primitives.js","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAA4B,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,aAAa,EAAgB,MAAM,cAAc,CAAC;AAkBpG,MAAM,UAAU,SAAS,CACvB,SAAiB,EACjB,QAAQ,GAAmB,EAAE,EAC7B,MAAM,GAAoB,EAAE;IAE5B,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC;IAElE,OAAO,SAAS,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EAIT;QACC,MAAM,eAAe,GACnB,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAqB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAE9E,MAAM,YAAY,GAAG,UAAU;YAC7B,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;YACxF,CAAC,CAAC,KAAK,CAAC;QAEV,OAAO,aAAa,CAClB,OAAO,EACP;YACE,SAAS;YACT,mDAAmD;YACnD,KAAK,EAAE,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAE;YACvC,GAAG,UAAU;YACb,GAAG,YAAY;SAChB,EACD,QAAQ,CACT,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,SAAS,CAAW,eAAe,CAAC,CAAC;AAE9D,MAAM,CAAC,MAAM,IAAI,GAAG,SAAS,CAAW,UAAU,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,SAAS,GAAG,SAAS,CAAW,gBAAgB,CAAC,CAAC;AAE/D,MAAM,CAAC,MAAM,MAAM,GAAG,SAAS,CAC7B,YAAY,EACZ,EAAE,EACF,EAAE,OAAO,EAAE,QAAQ,EAAE,CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,SAAS,CAC5B,WAAW,EACX,EAAE,EACF;IACE,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;KACd;CACF,CACF,CAAC;AAGF,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAe,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AACpF,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAe,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AACpF,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAe,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AACpF,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAe,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AACpF,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAsC,QAAQ,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAElG,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAe,aAAa,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAExF,MAAM,CAAC,MAAM,CAAC,GAAG,SAAS,CACxB,OAAO,EACP,EAAE,EACF,EAAE,OAAO,EAAE,GAAG,EAAE,CACjB,CAAC;AAGF,MAAM,CAAC,MAAM,KAAK,GAAG,SAAS,CAC5B,WAAW,EACX,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO;IAC1C,MAAM,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9C,KAAK,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;CAC9C,CAAC,EACF,EAAE,UAAU,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CACrC,CAAC;AAGF,MAAM,CAAC,MAAM,MAAM,GAAG,SAAS,CAC7B,YAAY,EACZ,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IAChC,GAAG,mBAAmB,CAAC,OAAO,CAAC;IAC/B,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;CACnC,CAAC,EACF,EAAE,UAAU,EAAE,CAAC,GAAG,aAAa,EAAE,MAAM,CAAC,EAAE,CAC3C,CAAC;AAGF,MAAM,CAAC,MAAM,KAAK,GAAG,SAAS,CAAa,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE;IAC7F,UAAU,EAAE,aAAa;CAC1B,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAW,cAAc,CAAC,CAAC;AAE5D,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CACzB,QAAQ,EACR;IACE,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,SAAS,KAAK,CAAC,IAAI,CAAC,EAAE;CAChC,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CACzB,QAAQ,EACR;IACE,MAAM,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,EAAE;IAC3B,OAAO,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI;CAC5B,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,SAAS,CAAW,UAAU,CAAC,CAAC;AAGpD,MAAM,CAAC,MAAM,GAAG,GAAG,SAAS,CAC1B,eAAe,EACf,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACrB,YAAY,EAAE,WAAW;IACzB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,SAAS;IACjB,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;IACzD,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;IAC/B,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC;IACnB,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC;CACnC,CAAC,EACF,EAAE,UAAU,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAClC,kBAAkB,EAClB,EAAE,EACF,EAAE,OAAO,EAAE,KAAK,EAAE,CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CACnC,eAAe,EACf,EAAE,EACF,EAAE,OAAO,EAAE,UAAU,EAAE,CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,CACrC,qBAAqB,EACrB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;IAClB,MAAM,EAAE,QAAQ,KAAK,CAAC,CAAC,CAAC,SAAS;IACjC,KAAK,EAAE,QAAQ,KAAK,CAAC,CAAC,CAAC,SAAS;IAChC,UAAU,EAAE,CAAC;IACb,WAAW,EAAE,CAAC;IACd,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO;IAC5D,YAAY,EAAE,WAAW;IACzB,SAAS,EAAE,SAAS;QAClB,CAAC,CAAC,qCAAqC;QACvC,CAAC,CAAC,uCAAuC;IAC3C,MAAM,EAAE,SAAS;CAClB,CAAC,EACF,EAAE,UAAU,EAAE,CAAC,WAAW,CAAC,EAAE,CAC9B,CAAC;AAEF,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,QAAQ,EAKT;IACC,SAAS,MAAM;QACb,IAAI,QAAQ;YAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;IAED,OAAO,CACL,oBAAC,MAAM,IACL,IAAI,EAAC,UAAU,kBACD,OAAO,EACrB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;YACnB,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,MAAM,EAAE,CAAC;YACX,CAAC;QACH,CAAC,EACD,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE;QAElD,oBAAC,cAAc,IAAC,SAAS,EAAE,OAAO;YAChC,6BACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,GAAG,EACf,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EACjC,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE;gBAE9E,8BAAM,CAAC,EAAC,iBAAiB,GAAG,CACxB,CACS;QACjB,oBAAC,KAAK,IAAC,CAAC,EAAE,GAAG,GAAI;QACjB,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IAAG,KAAK,CAAQ,CAC5C,CACV,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,EAAE,KAAK,EAAqB;IACjD,OAAO,CACL,6BAAK,SAAS,EAAC,sBAAsB;QACnC,6BAAK,SAAS,EAAC,YAAY,IAAE,KAAK,CAAO,CACrC,CACP,CAAC;AACJ,CAAC"}
package/dist/spacing.d.ts CHANGED
@@ -5,7 +5,7 @@ import type { CSSProperties } from 'react';
5
5
  * the stylesheet does.
6
6
  */
7
7
  export declare function space(n: number): string;
8
- export declare const BASE_RADIUS = "calc(var(--size) / 3)";
8
+ export declare const BASE_RADIUS = "var(--radius-small)";
9
9
  export type SpacingProps = {
10
10
  /** Vertical margin, in spacing units. */
11
11
  v?: number;
package/dist/spacing.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAEvC;AAED,eAAO,MAAM,WAAW,0BAA0B,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG;IACzB,yCAAyC;IACzC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC7B,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,YAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,CAAU,CAAC;AAEnE,wBAAgB,mBAAmB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,YAAY,GAAG,aAAa,CAevF"}
1
+ {"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAEvC;AAED,eAAO,MAAM,WAAW,wBAAwB,CAAC;AAEjD,MAAM,MAAM,YAAY,GAAG;IACzB,yCAAyC;IACzC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC7B,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,YAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,CAAU,CAAC;AAEnE,wBAAgB,mBAAmB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,YAAY,GAAG,aAAa,CAevF"}
package/dist/spacing.js CHANGED
@@ -6,7 +6,7 @@
6
6
  export function space(n) {
7
7
  return `calc(var(--size) * ${n})`;
8
8
  }
9
- export const BASE_RADIUS = `calc(var(--size) / 3)`;
9
+ export const BASE_RADIUS = `var(--radius-small)`;
10
10
  /** Keys `spacingPropsToStyle` consumes, so they can be kept off the DOM. */
11
11
  export const SPACING_PROPS = ['v', 'h', 'gap', 'padding'];
12
12
  export function spacingPropsToStyle({ v, h, gap, padding }) {
package/dist/spacing.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"spacing.js","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,UAAU,KAAK,CAAC,CAAS;IAC7B,OAAO,sBAAsB,CAAC,GAAG,CAAC;AACpC,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,uBAAuB,CAAC;AAanD,4EAA4E;AAC5E,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,CAAU,CAAC;AAEnE,MAAM,UAAU,mBAAmB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,EAAgB;IACtE,OAAO;QACL,UAAU,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QAClD,WAAW,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACnD,SAAS,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACjD,YAAY,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACpD,GAAG,EAAE,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC;QAC/C,OAAO,EACL,OAAO,KAAK,SAAS;YACnB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,CAAC,OAAO,CAAC;iBACN,IAAI,EAAE;iBACN,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;iBAC5B,IAAI,CAAC,GAAG,CAAC;KACnB,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"spacing.js","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,UAAU,KAAK,CAAC,CAAS;IAC7B,OAAO,sBAAsB,CAAC,GAAG,CAAC;AACpC,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,qBAAqB,CAAC;AAajD,4EAA4E;AAC5E,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,CAAU,CAAC;AAEnE,MAAM,UAAU,mBAAmB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,EAAgB;IACtE,OAAO;QACL,UAAU,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QAClD,WAAW,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACnD,SAAS,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACjD,YAAY,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACpD,GAAG,EAAE,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC;QAC/C,OAAO,EACL,OAAO,KAAK,SAAS;YACnB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,CAAC,OAAO,CAAC;iBACN,IAAI,EAAE;iBACN,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;iBAC5B,IAAI,CAAC,GAAG,CAAC;KACnB,CAAC;AACJ,CAAC"}
package/package.json CHANGED
@@ -1,11 +1,24 @@
1
1
  {
2
2
  "name": "jbx",
3
- "version": "2.14.0",
3
+ "version": "2.15.0",
4
+ "description": "The little component toolkit behind the tools on javier.xyz. Plain components with a class each, one stylesheet, no runtime dependencies.",
5
+ "keywords": [
6
+ "react",
7
+ "components",
8
+ "ui",
9
+ "css",
10
+ "design-system"
11
+ ],
12
+ "packageManager": "pnpm@11.21.0",
4
13
  "author": "hi@javier.xyz",
5
14
  "license": "Unlicensed",
15
+ "homepage": "https://github.com/javierbyte/jbx#readme",
6
16
  "repository": {
7
17
  "type": "git",
8
- "url": "https://github.com/javierbyte/jbx.git"
18
+ "url": "git+https://github.com/javierbyte/jbx.git"
19
+ },
20
+ "bugs": {
21
+ "url": "https://github.com/javierbyte/jbx/issues"
9
22
  },
10
23
  "type": "module",
11
24
  "sideEffects": [
@@ -30,27 +43,33 @@
30
43
  "engines": {
31
44
  "node": ">=18"
32
45
  },
46
+ "scripts": {
47
+ "css": "node ./scripts/build-css.mjs",
48
+ "prebuild": "pnpm run css",
49
+ "build": "tsc -p tsconfig.build.json",
50
+ "dev": "pnpm run css && next dev --webpack -p 3008",
51
+ "dev:lib": "pnpm run css && tsc -p tsconfig.build.json --watch",
52
+ "preview:build": "pnpm run css && next build --webpack",
53
+ "pretypecheck": "pnpm run css",
54
+ "typecheck": "tsc --noEmit",
55
+ "pretest": "pnpm run build",
56
+ "test": "node ./scripts/smoke.mjs",
57
+ "prepublishOnly": "pnpm run typecheck && pnpm test"
58
+ },
33
59
  "peerDependencies": {
34
60
  "react": "^17 || ^18 || ^19"
35
61
  },
36
62
  "devDependencies": {
63
+ "@next/third-parties": "^16.3.2",
64
+ "@types/node": "^26.2.0",
37
65
  "@types/react": "^19.2.18",
38
66
  "@types/react-dom": "^19.2.4",
67
+ "next": "^16.3.2",
39
68
  "react": "^19.2.8",
40
69
  "react-dom": "^19.2.8",
41
70
  "typescript": "^7.0.2"
42
71
  },
43
72
  "publishConfig": {
44
73
  "access": "public"
45
- },
46
- "scripts": {
47
- "css": "node ./scripts/build-css.mjs",
48
- "prebuild": "pnpm run css",
49
- "build": "tsc -p tsconfig.build.json",
50
- "dev": "pnpm run css && tsc -p tsconfig.build.json --watch",
51
- "pretypecheck": "pnpm run css",
52
- "typecheck": "tsc --noEmit",
53
- "pretest": "pnpm run build",
54
- "test": "node ./scripts/smoke.mjs"
55
74
  }
56
- }
75
+ }
package/src/generated/css.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  // Generated by scripts/build-css.mjs from src/style.css. Do not edit.
2
- export const CSS = "html {\n box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\n\n:root {\n --size: 16px;\n --font-size: 16px;\n --font-size-small: 17px;\n --radius-small: 2px;\n /* Every interactive control is this tall, so a button, an input and a range\n standing next to each other line up. */\n --control-height: calc(var(--size) * 2.5);\n /* What a control shrinks to inside a tab row, where it has to match the line\n box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand\n on its own -- a row holding one is then exactly as tall as one that doesn't. */\n --control-height-compact: calc(var(--font-size) * 1.4);\n}\n\n@media screen and (max-width: 1200px) {\n :root {\n --font-size: 18px;\n --font-size-small: 16px;\n --size: 14px;\n }\n}\n\n@media screen and (max-width: 600px) {\n :root {\n --font-size: 16px;\n --font-size-small: 14px;\n }\n}\n\n* {\n padding: 0;\n margin: 0;\n position: relative;\n}\n\nbody {\n touch-action: pan-y;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n background: #fcfcfd;\n color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n line-height: 1;\n padding: 0;\n font-variation-settings: 'wght' 600;\n font-weight: 600;\n color: var(--base-font-color-bright);\n}\nh1 {\n font-variation-settings: 'wdth' 107, 'wght' 650;\n font-weight: 650;\n}\n\nstrong,\nb {\n font-weight: 500;\n}\n\n.jbx-main-h1 {\n display: inline-block;\n background-color: var(--accent-color);\n font-size: calc(var(--font-size) * 2);\n padding: 8px;\n}\n\n.jbx-h1 {\n font-size: calc(var(--font-size) * 2);\n font-weight: 700;\n}\n.jbx-h2 {\n font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n font-size: var(--font-size-small);\n text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n font-size: var(--font-size);\n line-height: 1;\n}\n\n.jbx-code-snippet {\n border-radius: var(--size);\n font-family: monaco, monospace;\n border: none;\n width: 100%;\n font-size: calc(var(--size) - 3px);\n line-height: 1.33;\n padding: var(--size) calc(var(--size) * 1.2);\n background: #ecf0f1;\n color: #34495e;\n resize: none;\n}\n.jbx-code-snippet:focus {\n outline: none;\n}\n\n.jbx-code-area {\n border-radius: var(--size);\n font-family: monaco, monospace;\n border: none;\n width: 100%;\n font-size: calc(var(--size) - 3px);\n line-height: 1.33;\n padding: var(--size) calc(var(--size) * 1.2);\n background: #ecf0f1;\n color: #34495e;\n resize: none;\n min-height: 120px;\n}\n.jbx-code-area:focus {\n outline: none;\n}\n\n.jbx-button {\n color: #000;\n border-radius: var(--radius-small);\n appearance: none;\n user-select: none;\n cursor: pointer;\n display: inline-block;\n background-color: #eee;\n box-shadow: 3px 3px 0 #ccc;\n padding: 0 calc(var(--size) / 2);\n border: none;\n height: var(--control-height);\n transition: top 0.1s, left 0.1s, box-shadow 0.05s;\n}\n.jbx-button:active {\n top: 1px;\n left: 1px;\n box-shadow: 1px 1px 0 #ccc;\n}\n.jbx-button:disabled {\n cursor: default;\n color: #999;\n background-color: #f4f4f4;\n box-shadow: 1px 1px 0 #e0e0e0;\n}\n.jbx-button:disabled:active {\n top: 0;\n left: 0;\n box-shadow: 1px 1px 0 #e0e0e0;\n}\n\n/* LINKS */\n.jbx-a {\n cursor: pointer;\n color: #000;\n box-shadow: #0002 0 2px 0;\n font-weight: 500;\n text-decoration: none;\n}\n.jbx-a::after {\n content: '↗';\n color: #0004;\n font-size: var(--font-size-small);\n position: relative;\n top: -1px;\n right: -1px;\n transition: top 0.3s, right 0.3s, color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n top: -3px;\n right: -3px;\n color: var(--accent-color);\n}\n\n.jbx-block-link {\n min-width: 300px;\n flex: 1;\n text-decoration: none;\n color: #000;\n display: inline-block;\n padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n content: '';\n display: block;\n position: absolute;\n background-color: #ecf0f1;\n z-index: -1;\n transition: transform 0.2s, opacity 0.2s;\n transform: scale(0.98) translatey(4px);\n opacity: 0;\n top: -4px;\n left: -6px;\n right: -6px;\n bottom: -4px;\n}\n.jbx-block-link::before {\n border-radius: 16px;\n}\na.jbx-a::before {\n border-radius: 8px;\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n transform: scale(1) translatey(0);\n opacity: 1;\n}\n\n.jbx-a {\n display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n font-size: var(--font-size-small);\n}\n\n.jbx-container {\n max-width: 1080px;\n margin: 0 auto;\n padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n flex: 1;\n}\n\n.jbx-inline {\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n}\n\n.jbx-stack {\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n}\n\n.jbx-text {\n line-height: 1.4;\n}\n\n.jbx-input {\n color: #777;\n -webkit-text-fill-color: #777;\n opacity: 1;\n flex: 1;\n display: block;\n appearance: none;\n border: none;\n border-radius: var(--radius-small);\n height: var(--control-height);\n background-color: #eee;\n padding: 0 calc(var(--size) * 0.5);\n box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n/* Chrome hides the stepper until hover and takes its width out of the content\n box, so the value slides sideways as the pointer enters. Keep it painted. */\n.jbx-input[type='number']::-webkit-inner-spin-button,\n.jbx-input[type='number']::-webkit-outer-spin-button {\n opacity: 1;\n}\n\n/* A control inside a tab row sizes to the row, not to itself: it matches the\n line box of the text beside it, so a row holding a field is exactly as tall\n as one that only holds tabs. `flex: none` because `.jbx-input` stretches,\n which is right for a field that owns its row and wrong for one sitting\n between two bits of text. */\n.jbx-tabs .jbx-input,\n.jbx-tabs .jbx-button {\n flex: none;\n height: var(--control-height-compact);\n}\n\n.jbx-dropzone {\n height: 120px;\n flex: 1;\n display: flex;\n text-align: center;\n align-items: center;\n align-content: center;\n justify-content: center;\n flex-direction: column;\n border: 2px dashed #000;\n color: #000;\n padding: 0;\n cursor: pointer;\n}\n.jbx-dropzone:hover {\n border-color: #999;\n}\n.jbx-dropzone span {\n width: 100%;\n cursor: pointer;\n}\n.jbx-dropzone input {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0;\n cursor: pointer;\n}\n\n.jbx-range {\n flex: 1;\n width: 100%;\n appearance: none;\n background-color: #bdc3c780;\n height: var(--size);\n border-radius: 0;\n border-radius: var(--radius-small);\n}\n\n.jbx-range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n box-shadow: none;\n border-radius: 0;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-thumb {\n appearance: none;\n box-shadow: none;\n border-radius: 0;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n appearance: none;\n}\n.jbx-range:focus {\n outline: none;\n}\n\n.jbx-bullet-container {\n display: inline-block;\n margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n border: 1px solid #0001;\n color: #000;\n background-color: #0001;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: calc(var(--font-size-small) - 3px);\n height: calc(var(--size) * 1.25);\n width: calc(var(--size) * 1.25);\n border-radius: 100%;\n top: -2px;\n margin-right: 2px;\n}\n\n.jbx-hr {\n margin: calc(var(--size) * 2) auto;\n width: 38.2%;\n border-radius: 0;\n border: none;\n border-top: 2px solid #ecf0f1;\n}\n";
2
+ export const CSS = "html {\n box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n corner-shape: squircle;\n}\n\n:root {\n --size: 16px;\n --font-size: 16px;\n --font-size-small: 15px;\n --font-family-monospace:\n ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\n --radius-small: 1px;\n --radius-big: 15px;\n /* Every interactive control is this tall, so a button, an input and a range\n standing next to each other line up. */\n --control-height: calc(var(--size) * 2.5);\n /* What a control shrinks to inside a tab row, where it has to match the line\n box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand\n on its own -- a row holding one is then exactly as tall as one that doesn't. */\n --control-height-compact: calc(var(--font-size) * 1.4);\n}\n\n@media screen and (max-width: 1200px) {\n :root {\n --font-size: 18px;\n --font-size-small: 16px;\n --size: 14px;\n }\n}\n\n@media screen and (max-width: 600px) {\n :root {\n --font-size: 16px;\n --font-size-small: 14px;\n }\n}\n\n* {\n padding: 0;\n margin: 0;\n position: relative;\n}\n\nbody {\n touch-action: pan-y;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n background: #fdfdfd;\n color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n line-height: 1;\n padding: 0;\n font-variation-settings: 'wght' 600;\n font-weight: 600;\n color: var(--base-font-color-bright);\n}\nh1 {\n font-variation-settings:\n 'wdth' 107,\n 'wght' 650;\n font-weight: 650;\n}\n\nstrong,\nb {\n font-weight: 500;\n}\n\n.jbx-main-h1 {\n display: inline-block;\n background-color: var(--accent-color);\n border-radius: var(--radius-small);\n font-size: calc(var(--font-size) * 2);\n padding: 8px;\n}\n\n.jbx-h1 {\n font-size: calc(var(--font-size) * 2);\n font-weight: 700;\n}\n.jbx-h2 {\n font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n font-size: var(--font-size-small);\n text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n font-size: var(--font-size);\n line-height: 1;\n}\n\n.jbx-code-snippet {\n border-radius: var(--radius-small);\n font-family: var(--font-family-monospace);\n border: none;\n width: 100%;\n font-size: calc(var(--size) - 3px);\n line-height: 1.33;\n padding: var(--size) calc(var(--size) * 1.2);\n background: #eee;\n color: #444;\n resize: none;\n}\n.jbx-code-snippet:focus {\n outline: none;\n}\n\n.jbx-code-area {\n border-radius: var(--radius-big);\n font-family: var(--font-family-monospace);\n border: none;\n width: 100%;\n font-size: calc(var(--size) - 3px);\n line-height: 1.33;\n padding: var(--size) calc(var(--size) * 1.2);\n background: #eee;\n color: #444;\n resize: none;\n min-height: 120px;\n}\n.jbx-code-area:focus {\n outline: none;\n}\n\n.jbx-button {\n color: #000;\n border-radius: var(--radius-small);\n appearance: none;\n user-select: none;\n cursor: pointer;\n display: inline-block;\n background-color: #eee;\n box-shadow: 3px 3px 0 #ccc;\n padding: 0 calc(var(--size) / 2);\n border: none;\n height: var(--control-height);\n transition:\n top 0.1s,\n left 0.1s,\n box-shadow 0.05s;\n}\n.jbx-button:active {\n top: 1px;\n left: 1px;\n box-shadow: 1px 1px 0 #ccc;\n}\n.jbx-button:disabled {\n cursor: default;\n color: #999;\n background-color: #f4f4f4;\n box-shadow: 1px 1px 0 #e0e0e0;\n}\n.jbx-button:disabled:active {\n top: 0;\n left: 0;\n box-shadow: 1px 1px 0 #e0e0e0;\n}\n\n/* LINKS */\n.jbx-a {\n cursor: pointer;\n color: #000;\n box-shadow: #0002 0 2px 0;\n font-weight: 500;\n text-decoration: none;\n}\n.jbx-a::after {\n content: '↗';\n color: #0004;\n font-size: var(--font-size-small);\n position: relative;\n top: -1px;\n right: -1px;\n transition:\n top 0.3s,\n right 0.3s,\n color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n top: -3px;\n right: -3px;\n color: var(--accent-color);\n}\n\n.jbx-block-link {\n min-width: 300px;\n flex: 1;\n text-decoration: none;\n color: #000;\n display: inline-block;\n padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n content: '';\n display: block;\n position: absolute;\n background-color: #eee;\n z-index: -1;\n transition:\n transform 0.2s,\n opacity 0.2s;\n transform: scale(0.98) translatey(4px);\n opacity: 0;\n top: -4px;\n left: -6px;\n right: -6px;\n bottom: -4px;\n}\n.jbx-block-link::before {\n border-radius: var(--radius-small);\n}\na.jbx-a::before {\n border-radius: var(--radius-small);\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n transform: scale(1) translatey(0);\n opacity: 1;\n}\n\n.jbx-a {\n display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n font-size: var(--font-size-small);\n}\n\n.jbx-container {\n max-width: 1080px;\n margin: 0 auto;\n padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n flex: 1;\n}\n\n.jbx-inline {\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n}\n\n.jbx-stack {\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n}\n\n.jbx-text {\n line-height: 1.4;\n}\n\n.jbx-tabs--tab {\n border-radius: var(--radius-small);\n}\n\n.jbx-input {\n color: #777;\n -webkit-text-fill-color: #777;\n opacity: 1;\n flex: 1;\n display: block;\n appearance: none;\n border: none;\n border-radius: var(--radius-small);\n height: var(--control-height);\n background-color: #eee;\n padding: 0 calc(var(--size) * 0.5);\n box-shadow:\n inset rgba(0, 0, 0, 0.04) 3px 3px 0,\n inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n/* Chrome hides the stepper until hover and takes its width out of the content\n box, so the value slides sideways as the pointer enters. Keep it painted. */\n.jbx-input[type='number']::-webkit-inner-spin-button,\n.jbx-input[type='number']::-webkit-outer-spin-button {\n opacity: 1;\n}\n\n/* A control inside a tab row sizes to the row, not to itself: it matches the\n line box of the text beside it, so a row holding a field is exactly as tall\n as one that only holds tabs. `flex: none` because `.jbx-input` stretches,\n which is right for a field that owns its row and wrong for one sitting\n between two bits of text. */\n.jbx-tabs .jbx-input,\n.jbx-tabs .jbx-button {\n flex: none;\n height: var(--control-height-compact);\n}\n\n.jbx-dropzone {\n height: 120px;\n flex: 1;\n display: flex;\n text-align: center;\n align-items: center;\n align-content: center;\n justify-content: center;\n flex-direction: column;\n border: 2px dashed #000;\n border-radius: var(--radius-big);\n color: #000;\n padding: 0;\n cursor: pointer;\n}\n.jbx-dropzone:hover {\n border-color: #999;\n}\n.jbx-dropzone span {\n width: 100%;\n cursor: pointer;\n}\n.jbx-dropzone input {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0;\n cursor: pointer;\n}\n\n.jbx-range {\n flex: 1;\n width: 100%;\n appearance: none;\n background-color: #c0c0c080;\n height: var(--size);\n border-radius: var(--radius-small);\n}\n\n.jbx-range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n box-shadow: none;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-thumb {\n appearance: none;\n box-shadow: none;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n appearance: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-track {\n background-color: #c0c0c080;\n border-radius: var(--radius-small);\n height: var(--size);\n}\n.jbx-range:focus {\n outline: none;\n}\n\n.jbx-bullet-container {\n display: inline-block;\n margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n border: 1px solid #0001;\n color: #000;\n background-color: #0001;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: calc(var(--font-size-small) - 3px);\n height: calc(var(--size) * 1.25);\n width: calc(var(--size) * 1.25);\n border-radius: 100%;\n top: -2px;\n margin-right: 2px;\n}\n\n.jbx-hr {\n margin: calc(var(--size) * 2) auto;\n width: 38.2%;\n border-radius: var(--radius-small);\n border: none;\n border-top: 2px solid #eee;\n}\n";
package/src/primitives.tsx CHANGED
@@ -143,9 +143,10 @@ type TabProps = DivProps & { info?: boolean; active?: boolean };
143
143
  export const Tab = Component<TabProps>(
144
144
  `jbx-tabs--tab`,
145
145
  ({ info, active }) => ({
146
+ borderRadius: BASE_RADIUS,
146
147
  userSelect: 'none',
147
148
  cursor: 'pointer',
148
- backgroundColor: active ? '#000' : info ? '#fff' : '#ecf0f1',
149
+ backgroundColor: active ? '#000' : info ? '#fff' : '#eee',
149
150
  color: active ? '#fff' : '#000',
150
151
  padding: space(0.5),
151
152
  paddingLeft: info ? 0 : space(0.5)
@@ -238,4 +239,3 @@ export function Bullet({ value }: { value: number }) {
238
239
  </div>
239
240
  );
240
241
  }
241
-
package/src/spacing.ts CHANGED
@@ -9,7 +9,7 @@ export function space(n: number): string {
9
9
  return `calc(var(--size) * ${n})`;
10
10
  }
11
11
 
12
- export const BASE_RADIUS = `calc(var(--size) / 3)`;
12
+ export const BASE_RADIUS = `var(--radius-small)`;
13
13
 
14
14
  export type SpacingProps = {
15
15
  /** Vertical margin, in spacing units. */
package/src/style.css CHANGED
@@ -5,13 +5,17 @@ html {
5
5
  *:before,
6
6
  *:after {
7
7
  box-sizing: inherit;
8
+ corner-shape: squircle;
8
9
  }
9
10
 
10
11
  :root {
11
12
  --size: 16px;
12
13
  --font-size: 16px;
13
- --font-size-small: 17px;
14
- --radius-small: 2px;
14
+ --font-size-small: 15px;
15
+ --font-family-monospace:
16
+ ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
17
+ --radius-small: 1px;
18
+ --radius-big: 15px;
15
19
  /* Every interactive control is this tall, so a button, an input and a range
16
20
  standing next to each other line up. */
17
21
  --control-height: calc(var(--size) * 2.5);
@@ -54,7 +58,7 @@ button {
54
58
  }
55
59
 
56
60
  body {
57
- background: #fcfcfd;
61
+ background: #fdfdfd;
58
62
  color: #000;
59
63
  }
60
64
 
@@ -69,7 +73,9 @@ h4 {
69
73
  color: var(--base-font-color-bright);
70
74
  }
71
75
  h1 {
72
- font-variation-settings: 'wdth' 107, 'wght' 650;
76
+ font-variation-settings:
77
+ 'wdth' 107,
78
+ 'wght' 650;
73
79
  font-weight: 650;
74
80
  }
75
81
 
@@ -81,6 +87,7 @@ b {
81
87
  .jbx-main-h1 {
82
88
  display: inline-block;
83
89
  background-color: var(--accent-color);
90
+ border-radius: var(--radius-small);
84
91
  font-size: calc(var(--font-size) * 2);
85
92
  padding: 8px;
86
93
  }
@@ -110,15 +117,15 @@ body,
110
117
  }
111
118
 
112
119
  .jbx-code-snippet {
113
- border-radius: var(--size);
114
- font-family: monaco, monospace;
120
+ border-radius: var(--radius-small);
121
+ font-family: var(--font-family-monospace);
115
122
  border: none;
116
123
  width: 100%;
117
124
  font-size: calc(var(--size) - 3px);
118
125
  line-height: 1.33;
119
126
  padding: var(--size) calc(var(--size) * 1.2);
120
- background: #ecf0f1;
121
- color: #34495e;
127
+ background: #eee;
128
+ color: #444;
122
129
  resize: none;
123
130
  }
124
131
  .jbx-code-snippet:focus {
@@ -126,15 +133,15 @@ body,
126
133
  }
127
134
 
128
135
  .jbx-code-area {
129
- border-radius: var(--size);
130
- font-family: monaco, monospace;
136
+ border-radius: var(--radius-big);
137
+ font-family: var(--font-family-monospace);
131
138
  border: none;
132
139
  width: 100%;
133
140
  font-size: calc(var(--size) - 3px);
134
141
  line-height: 1.33;
135
142
  padding: var(--size) calc(var(--size) * 1.2);
136
- background: #ecf0f1;
137
- color: #34495e;
143
+ background: #eee;
144
+ color: #444;
138
145
  resize: none;
139
146
  min-height: 120px;
140
147
  }
@@ -154,7 +161,10 @@ body,
154
161
  padding: 0 calc(var(--size) / 2);
155
162
  border: none;
156
163
  height: var(--control-height);
157
- transition: top 0.1s, left 0.1s, box-shadow 0.05s;
164
+ transition:
165
+ top 0.1s,
166
+ left 0.1s,
167
+ box-shadow 0.05s;
158
168
  }
159
169
  .jbx-button:active {
160
170
  top: 1px;
@@ -188,7 +198,10 @@ body,
188
198
  position: relative;
189
199
  top: -1px;
190
200
  right: -1px;
191
- transition: top 0.3s, right 0.3s, color 0.3s;
201
+ transition:
202
+ top 0.3s,
203
+ right 0.3s,
204
+ color 0.3s;
192
205
  }
193
206
  .jbx-a:hover,
194
207
  .jbx-block-link:hover .jbx-a {
@@ -214,9 +227,11 @@ a.jbx-a::before,
214
227
  content: '';
215
228
  display: block;
216
229
  position: absolute;
217
- background-color: #ecf0f1;
230
+ background-color: #eee;
218
231
  z-index: -1;
219
- transition: transform 0.2s, opacity 0.2s;
232
+ transition:
233
+ transform 0.2s,
234
+ opacity 0.2s;
220
235
  transform: scale(0.98) translatey(4px);
221
236
  opacity: 0;
222
237
  top: -4px;
@@ -225,10 +240,10 @@ a.jbx-a::before,
225
240
  bottom: -4px;
226
241
  }
227
242
  .jbx-block-link::before {
228
- border-radius: 16px;
243
+ border-radius: var(--radius-small);
229
244
  }
230
245
  a.jbx-a::before {
231
- border-radius: 8px;
246
+ border-radius: var(--radius-small);
232
247
  }
233
248
  a.jbx-a:hover::before,
234
249
  .jbx-block-link:hover::before {
@@ -274,6 +289,10 @@ a.jbx-a:hover::before,
274
289
  line-height: 1.4;
275
290
  }
276
291
 
292
+ .jbx-tabs--tab {
293
+ border-radius: var(--radius-small);
294
+ }
295
+
277
296
  .jbx-input {
278
297
  color: #777;
279
298
  -webkit-text-fill-color: #777;
@@ -286,7 +305,9 @@ a.jbx-a:hover::before,
286
305
  height: var(--control-height);
287
306
  background-color: #eee;
288
307
  padding: 0 calc(var(--size) * 0.5);
289
- box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;
308
+ box-shadow:
309
+ inset rgba(0, 0, 0, 0.04) 3px 3px 0,
310
+ inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;
290
311
  }
291
312
 
292
313
  /* Chrome hides the stepper until hover and takes its width out of the content
@@ -317,6 +338,7 @@ a.jbx-a:hover::before,
317
338
  justify-content: center;
318
339
  flex-direction: column;
319
340
  border: 2px dashed #000;
341
+ border-radius: var(--radius-big);
320
342
  color: #000;
321
343
  padding: 0;
322
344
  cursor: pointer;
@@ -342,9 +364,8 @@ a.jbx-a:hover::before,
342
364
  flex: 1;
343
365
  width: 100%;
344
366
  appearance: none;
345
- background-color: #bdc3c780;
367
+ background-color: #c0c0c080;
346
368
  height: var(--size);
347
- border-radius: 0;
348
369
  border-radius: var(--radius-small);
349
370
  }
350
371
 
@@ -352,7 +373,6 @@ a.jbx-a:hover::before,
352
373
  -webkit-appearance: none;
353
374
  appearance: none;
354
375
  box-shadow: none;
355
- border-radius: 0;
356
376
  height: calc(var(--size) * 2);
357
377
  width: var(--size);
358
378
  background-color: #000;
@@ -362,7 +382,6 @@ a.jbx-a:hover::before,
362
382
  .jbx-range::-moz-range-thumb {
363
383
  appearance: none;
364
384
  box-shadow: none;
365
- border-radius: 0;
366
385
  height: calc(var(--size) * 2);
367
386
  width: var(--size);
368
387
  background-color: #000;
@@ -371,6 +390,12 @@ a.jbx-a:hover::before,
371
390
  }
372
391
  .jbx-range::-webkit-slider-runnable-track {
373
392
  appearance: none;
393
+ border-radius: var(--radius-small);
394
+ }
395
+ .jbx-range::-moz-range-track {
396
+ background-color: #c0c0c080;
397
+ border-radius: var(--radius-small);
398
+ height: var(--size);
374
399
  }
375
400
  .jbx-range:focus {
376
401
  outline: none;
@@ -400,7 +425,7 @@ a.jbx-a:hover::before,
400
425
  .jbx-hr {
401
426
  margin: calc(var(--size) * 2) auto;
402
427
  width: 38.2%;
403
- border-radius: 0;
428
+ border-radius: var(--radius-small);
404
429
  border: none;
405
- border-top: 2px solid #ecf0f1;
430
+ border-top: 2px solid #eee;
406
431
  }