@ebitex/forms-sdk 0.6.126 → 0.6.127
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 +44 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/react/styles.css +68 -1
- package/dist/theme.d.ts +18 -0
- package/dist/theme.d.ts.map +1 -0
- package/dist/theme.js +91 -0
- package/dist/theme.js.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -50,6 +50,50 @@ Multi-step forms save progress as the respondent advances.
|
|
|
50
50
|
`500`'s body (`null` when a proxy answered and the request never reached ebitex). The message ends
|
|
51
51
|
`[request <id>]` when there is one. Log it, and quote it to support.
|
|
52
52
|
|
|
53
|
+
## Theming
|
|
54
|
+
|
|
55
|
+
`styles.css` is one custom property per concern, targeting `.ebitex-forms`:
|
|
56
|
+
|
|
57
|
+
```css
|
|
58
|
+
.ebitex-forms {
|
|
59
|
+
--ebitex-forms-accent: #7c3aed;
|
|
60
|
+
--ebitex-forms-accent-contrast: #ffffff;
|
|
61
|
+
--ebitex-forms-text: #111827;
|
|
62
|
+
--ebitex-forms-muted: #6b7280;
|
|
63
|
+
--ebitex-forms-border: #d1d5db;
|
|
64
|
+
--ebitex-forms-error: #dc2626;
|
|
65
|
+
--ebitex-forms-surface: transparent;
|
|
66
|
+
--ebitex-forms-radius: 0.375rem;
|
|
67
|
+
--ebitex-forms-gap: 1rem;
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Override what you need; the rest inherit the shipped default. There's no font stack and no imposed
|
|
72
|
+
max-width either — a form embedded in someone else's page should look like it belongs there.
|
|
73
|
+
|
|
74
|
+
### Dark mode
|
|
75
|
+
|
|
76
|
+
The shipped default reacts to dark mode two ways, both covering every color property above:
|
|
77
|
+
`prefers-color-scheme: dark` (the visitor's OS setting, with no toggle of your own) and a `.dark`
|
|
78
|
+
class on any ancestor element (an explicit light/dark choice your app already tracks — this is the
|
|
79
|
+
convention [`@ebitex/theme-core`](../theme-core) uses, and what ebitex's own hosted page and iframe
|
|
80
|
+
embed run on). Add `data-ebitex-theme="light"` to `.ebitex-forms` (or an ancestor) to opt out of both
|
|
81
|
+
and force light regardless of OS preference or a `.dark` class above it.
|
|
82
|
+
|
|
83
|
+
If you set your own `--ebitex-forms-accent`/`--ebitex-forms-surface`/etc. and want a distinct dark
|
|
84
|
+
variant rather than the same value in both modes, set it again under your own `.dark` (or
|
|
85
|
+
`prefers-color-scheme: dark`) rule — the shipped dark values only apply to whichever properties
|
|
86
|
+
you haven't overridden. `deriveDarkVariant` (exported from `@ebitex/forms-sdk`, no `/react` import
|
|
87
|
+
needed) suggests one from a `#rrggbb` light color, the same heuristic ebitex's own look-and-feel
|
|
88
|
+
settings UI uses to pre-fill a dark color picker — a starting point, not a requirement, and a no-op
|
|
89
|
+
for any non-hex CSS color string:
|
|
90
|
+
|
|
91
|
+
```ts
|
|
92
|
+
import { deriveDarkVariant } from '@ebitex/forms-sdk'
|
|
93
|
+
|
|
94
|
+
deriveDarkVariant('#7c3aed') // '#aa7ff3'
|
|
95
|
+
```
|
|
96
|
+
|
|
53
97
|
## Rendering nodes yourself
|
|
54
98
|
|
|
55
99
|
If you're not using `<EbitexForm>` — building a custom renderer, or validating a submission
|
package/dist/index.d.ts
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
export { createFormsClient, FormsApiError, type FormsClient, type FormsClientOptions, } from './client.js';
|
|
11
11
|
export { validateSubmission, type ValidateOptions } from './validators.js';
|
|
12
12
|
export { isAllOfSatisfied, isFieldComparisonSatisfied, isSatisfied } from './predicates.js';
|
|
13
|
+
export { deriveDarkVariant } from './theme.js';
|
|
13
14
|
export { adjacentVisibleStepSlot, collectDataFields, defaultChoiceValues, isDataField, isFormField, resolveSteps, resolveVariant, resolveVisibleStepSlot, } from './nodes.js';
|
|
14
15
|
export { type AllOfPredicate, type ButtonField, type ButtonType, type ChoiceField, type ChoiceOption, type ChoiceType, type FieldComparisonOperator, type FieldComparisonPredicate, type FieldsetNode, type FormField, type FormNode, type FormStep, type InputField, type InputVariant, type NumberField, type RowNode, type SdkForm, type SubmissionData, type TextareaField, type ValidationErrors, type VariantBranch, type VariantNode, type VariantPredicate, } from './types.js';
|
|
15
16
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,KAAK,WAAW,EAChB,KAAK,kBAAkB,GACxB,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAE,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAE1E,OAAO,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE3F,OAAO,EACL,uBAAuB,EACvB,iBAAiB,EACjB,mBAAmB,EACnB,WAAW,EACX,WAAW,EACX,YAAY,EACZ,cAAc,EACd,sBAAsB,GACvB,MAAM,YAAY,CAAA;AAEnB,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,uBAAuB,EAC5B,KAAK,wBAAwB,EAC7B,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,OAAO,EACZ,KAAK,OAAO,EACZ,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,gBAAgB,GACtB,MAAM,YAAY,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,KAAK,WAAW,EAChB,KAAK,kBAAkB,GACxB,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAE,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAE1E,OAAO,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE3F,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAE9C,OAAO,EACL,uBAAuB,EACvB,iBAAiB,EACjB,mBAAmB,EACnB,WAAW,EACX,WAAW,EACX,YAAY,EACZ,cAAc,EACd,sBAAsB,GACvB,MAAM,YAAY,CAAA;AAEnB,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,uBAAuB,EAC5B,KAAK,wBAAwB,EAC7B,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,OAAO,EACZ,KAAK,OAAO,EACZ,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,gBAAgB,GACtB,MAAM,YAAY,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
export { createFormsClient, FormsApiError, } from './client.js';
|
|
11
11
|
export { validateSubmission } from './validators.js';
|
|
12
12
|
export { isAllOfSatisfied, isFieldComparisonSatisfied, isSatisfied } from './predicates.js';
|
|
13
|
+
export { deriveDarkVariant } from './theme.js';
|
|
13
14
|
export { adjacentVisibleStepSlot, collectDataFields, defaultChoiceValues, isDataField, isFormField, resolveSteps, resolveVariant, resolveVisibleStepSlot, } from './nodes.js';
|
|
14
15
|
export {} from './types.js';
|
|
15
16
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EACL,iBAAiB,EACjB,aAAa,GAGd,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAE,kBAAkB,EAAwB,MAAM,iBAAiB,CAAA;AAE1E,OAAO,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE3F,OAAO,EACL,uBAAuB,EACvB,iBAAiB,EACjB,mBAAmB,EACnB,WAAW,EACX,WAAW,EACX,YAAY,EACZ,cAAc,EACd,sBAAsB,GACvB,MAAM,YAAY,CAAA;AAEnB,OAAO,EAwBN,MAAM,YAAY,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EACL,iBAAiB,EACjB,aAAa,GAGd,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAE,kBAAkB,EAAwB,MAAM,iBAAiB,CAAA;AAE1E,OAAO,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE3F,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAE9C,OAAO,EACL,uBAAuB,EACvB,iBAAiB,EACjB,mBAAmB,EACnB,WAAW,EACX,WAAW,EACX,YAAY,EACZ,cAAc,EACd,sBAAsB,GACvB,MAAM,YAAY,CAAA;AAEnB,OAAO,EAwBN,MAAM,YAAY,CAAA"}
|
package/dist/react/styles.css
CHANGED
|
@@ -34,9 +34,30 @@
|
|
|
34
34
|
gap: var(--ebitex-forms-gap);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
/*
|
|
37
|
+
/*
|
|
38
|
+
* Two ways into dark mode, both covering the same properties (spec 955-forms-look-and-feel).
|
|
39
|
+
*
|
|
40
|
+
* `prefers-color-scheme` follows the host page when it hasn't set an explicit theme, rather than
|
|
41
|
+
* forcing light — the original, still-correct behavior for a consumer with no light/dark toggle of
|
|
42
|
+
* their own.
|
|
43
|
+
*
|
|
44
|
+
* `.dark` follows an explicit choice instead of the OS preference — the convention `theme-core`'s
|
|
45
|
+
* cookie-driven toggle applies everywhere else in this suite (see packages/js/theme-core). Before
|
|
46
|
+
* this spec, ebitex's own hosted page had no way to reach this block at all: it never got the
|
|
47
|
+
* `.dark` class from anything but `prefers-color-scheme`, so a visitor who explicitly picked "dark"
|
|
48
|
+
* over a light OS preference saw this contract stay light. Both blocks were also missing
|
|
49
|
+
* `accent`/`surface` entirely — every property below is new to the `.dark` block, and `accent`/
|
|
50
|
+
* `surface` are new to the `prefers-color-scheme` block too.
|
|
51
|
+
*
|
|
52
|
+
* `--ebitex-forms-surface`'s dark value is the same `transparent` as light — declared explicitly
|
|
53
|
+
* rather than omitted, so a reader can tell this was decided rather than forgotten. A `transparent`
|
|
54
|
+
* surface needs no dark counterpart; a real one (in a configured theme, applied inline as this same
|
|
55
|
+
* custom property) would.
|
|
56
|
+
*/
|
|
38
57
|
@media (prefers-color-scheme: dark) {
|
|
39
58
|
.ebitex-forms:not([data-ebitex-theme='light']) {
|
|
59
|
+
--ebitex-forms-accent: #3b82f6;
|
|
60
|
+
--ebitex-forms-surface: transparent;
|
|
40
61
|
--ebitex-forms-text: #f3f4f6;
|
|
41
62
|
--ebitex-forms-muted: #9ca3af;
|
|
42
63
|
--ebitex-forms-border: #4b5563;
|
|
@@ -44,6 +65,52 @@
|
|
|
44
65
|
}
|
|
45
66
|
}
|
|
46
67
|
|
|
68
|
+
.dark .ebitex-forms:not([data-ebitex-theme='light']) {
|
|
69
|
+
--ebitex-forms-accent: #3b82f6;
|
|
70
|
+
--ebitex-forms-surface: transparent;
|
|
71
|
+
--ebitex-forms-text: #f3f4f6;
|
|
72
|
+
--ebitex-forms-muted: #9ca3af;
|
|
73
|
+
--ebitex-forms-border: #4b5563;
|
|
74
|
+
--ebitex-forms-error: #f87171;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/*
|
|
78
|
+
* Follows theme-core's own `.dark`-class convention, wherever that class actually lands (this
|
|
79
|
+
* package has no dependency on theme-core itself — see the README's zero-dependency posture, one
|
|
80
|
+
* level up — but the class name is the contract every consumer of it already relies on).
|
|
81
|
+
*/
|
|
82
|
+
.dark {
|
|
83
|
+
color-scheme: dark;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/*
|
|
87
|
+
* Opt-in per-render theme override (spec 955-forms-look-and-feel), additive and independent of the
|
|
88
|
+
* default block above — a consumer who never adds this class or sets these `-light`/`-dark`
|
|
89
|
+
* properties is completely unaffected.
|
|
90
|
+
*
|
|
91
|
+
* The caller sets `--ebitex-forms-theme-*-light`/`-dark` via React's `style` prop, never by
|
|
92
|
+
* building a CSS/HTML string: React sets a custom property through the CSSOM (`setProperty`) or its
|
|
93
|
+
* own attribute-escaped serialization during SSR, not by re-parsing a stylesheet, so an arbitrary,
|
|
94
|
+
* unvalidated organization-supplied color string (`Forms.Api` never validates one past
|
|
95
|
+
* non-emptiness) can never break out of a rule or inject a selector — only ever read back as an
|
|
96
|
+
* opaque property value. `light-dark()` then picks between the pair based on the inherited
|
|
97
|
+
* `color-scheme` property, which the plain `.dark` rule above ties to the same ancestor class every
|
|
98
|
+
* other dark-mode rule in this file already keys off, so no second toggle mechanism exists.
|
|
99
|
+
*
|
|
100
|
+
* Every declaration below is `!important`. Without it, `.dark .ebitex-forms:not(...)` above wins on
|
|
101
|
+
* pure specificity (three class-level selectors, `:not()`'s argument counting as one, versus this
|
|
102
|
+
* rule's one) regardless of source order — found live: a themed element under `.dark` silently fell
|
|
103
|
+
* back to the package's own default dark accent instead of the organization's. `!important` here is
|
|
104
|
+
* exactly the "a per-instance override always wins" case it exists for, and is robust against the
|
|
105
|
+
* base rule above gaining more selectors later.
|
|
106
|
+
*/
|
|
107
|
+
.ebitex-forms--themed {
|
|
108
|
+
--ebitex-forms-accent: light-dark(var(--ebitex-forms-theme-accent-light), var(--ebitex-forms-theme-accent-dark)) !important;
|
|
109
|
+
--ebitex-forms-surface: light-dark(var(--ebitex-forms-theme-surface-light), var(--ebitex-forms-theme-surface-dark)) !important;
|
|
110
|
+
--ebitex-forms-text: light-dark(var(--ebitex-forms-theme-text-light), var(--ebitex-forms-theme-text-dark)) !important;
|
|
111
|
+
--ebitex-forms-radius: var(--ebitex-forms-theme-radius) !important;
|
|
112
|
+
}
|
|
113
|
+
|
|
47
114
|
.ebitex-forms form {
|
|
48
115
|
display: flex;
|
|
49
116
|
flex-direction: column;
|
package/dist/theme.d.ts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A client-only heuristic for pre-filling a dark-mode color from a light one — spec
|
|
3
|
+
* 955-forms-look-and-feel. Used by a settings UI (ebitex's own hosted-page/embed look-and-feel
|
|
4
|
+
* settings, or any third-party consumer building their own) to suggest a starting dark value the
|
|
5
|
+
* moment a light color is picked, before the organization ever saves; the suggestion is always
|
|
6
|
+
* editable afterward. Deliberately the *only* place this derivation exists — `Forms.Api` never
|
|
7
|
+
* computes one, it only ever stores what it's given (see SPEC.md's Business Logic) — so there is
|
|
8
|
+
* exactly one implementation to keep correct, not two kept in sync across languages.
|
|
9
|
+
*
|
|
10
|
+
* Only understands `#rrggbb` hex, which is what a native `<input type="color">` produces and
|
|
11
|
+
* therefore what any color-picker-driven settings UI will actually pass in. A non-hex CSS color
|
|
12
|
+
* string (`oklch(...)`, a named color, `transparent`, …) is returned unchanged — deriving a dark
|
|
13
|
+
* variant of an arbitrary CSS color generically needs a real color-management library, which this
|
|
14
|
+
* zero-runtime-dependency package deliberately doesn't carry (see README's "no font stack, no
|
|
15
|
+
* imposed max-width" posture, one level up).
|
|
16
|
+
*/
|
|
17
|
+
export declare function deriveDarkVariant(lightColor: string): string;
|
|
18
|
+
//# sourceMappingURL=theme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAa5D"}
|
package/dist/theme.js
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A client-only heuristic for pre-filling a dark-mode color from a light one — spec
|
|
3
|
+
* 955-forms-look-and-feel. Used by a settings UI (ebitex's own hosted-page/embed look-and-feel
|
|
4
|
+
* settings, or any third-party consumer building their own) to suggest a starting dark value the
|
|
5
|
+
* moment a light color is picked, before the organization ever saves; the suggestion is always
|
|
6
|
+
* editable afterward. Deliberately the *only* place this derivation exists — `Forms.Api` never
|
|
7
|
+
* computes one, it only ever stores what it's given (see SPEC.md's Business Logic) — so there is
|
|
8
|
+
* exactly one implementation to keep correct, not two kept in sync across languages.
|
|
9
|
+
*
|
|
10
|
+
* Only understands `#rrggbb` hex, which is what a native `<input type="color">` produces and
|
|
11
|
+
* therefore what any color-picker-driven settings UI will actually pass in. A non-hex CSS color
|
|
12
|
+
* string (`oklch(...)`, a named color, `transparent`, …) is returned unchanged — deriving a dark
|
|
13
|
+
* variant of an arbitrary CSS color generically needs a real color-management library, which this
|
|
14
|
+
* zero-runtime-dependency package deliberately doesn't carry (see README's "no font stack, no
|
|
15
|
+
* imposed max-width" posture, one level up).
|
|
16
|
+
*/
|
|
17
|
+
export function deriveDarkVariant(lightColor) {
|
|
18
|
+
const rgb = hexToRgb(lightColor);
|
|
19
|
+
if (!rgb)
|
|
20
|
+
return lightColor;
|
|
21
|
+
const [h, s, l] = rgbToHsl(rgb[0], rgb[1], rgb[2]);
|
|
22
|
+
// Moves lightness partway toward white, capped short of it — a light-mode accent tuned for a
|
|
23
|
+
// white surface reads as too dim on a dark one at the same lightness, and pure white loses all
|
|
24
|
+
// color identity. 35%/85 are a starting point, not a derived constant; an organization can always
|
|
25
|
+
// override the suggestion.
|
|
26
|
+
const darkLightness = Math.min(85, l + (100 - l) * 0.35);
|
|
27
|
+
const [r, g, b] = hslToRgb(h, s, darkLightness);
|
|
28
|
+
return `#${toHexByte(r)}${toHexByte(g)}${toHexByte(b)}`;
|
|
29
|
+
}
|
|
30
|
+
function hexToRgb(hex) {
|
|
31
|
+
const match = /^#([0-9a-f]{6})$/i.exec(hex.trim());
|
|
32
|
+
if (!match)
|
|
33
|
+
return null;
|
|
34
|
+
const value = parseInt(match[1], 16);
|
|
35
|
+
return [(value >> 16) & 255, (value >> 8) & 255, value & 255];
|
|
36
|
+
}
|
|
37
|
+
function rgbToHsl(r, g, b) {
|
|
38
|
+
const rNorm = r / 255;
|
|
39
|
+
const gNorm = g / 255;
|
|
40
|
+
const bNorm = b / 255;
|
|
41
|
+
const max = Math.max(rNorm, gNorm, bNorm);
|
|
42
|
+
const min = Math.min(rNorm, gNorm, bNorm);
|
|
43
|
+
const l = (max + min) / 2;
|
|
44
|
+
const delta = max - min;
|
|
45
|
+
if (delta === 0) {
|
|
46
|
+
return [0, 0, l * 100];
|
|
47
|
+
}
|
|
48
|
+
const s = delta / (1 - Math.abs(2 * l - 1));
|
|
49
|
+
let h;
|
|
50
|
+
switch (max) {
|
|
51
|
+
case rNorm:
|
|
52
|
+
h = ((gNorm - bNorm) / delta) % 6;
|
|
53
|
+
break;
|
|
54
|
+
case gNorm:
|
|
55
|
+
h = (bNorm - rNorm) / delta + 2;
|
|
56
|
+
break;
|
|
57
|
+
default:
|
|
58
|
+
h = (rNorm - gNorm) / delta + 4;
|
|
59
|
+
}
|
|
60
|
+
h *= 60;
|
|
61
|
+
if (h < 0)
|
|
62
|
+
h += 360;
|
|
63
|
+
return [h, s * 100, l * 100];
|
|
64
|
+
}
|
|
65
|
+
function hslToRgb(h, s, l) {
|
|
66
|
+
const sNorm = s / 100;
|
|
67
|
+
const lNorm = l / 100;
|
|
68
|
+
const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
|
|
69
|
+
const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
|
|
70
|
+
const m = lNorm - c / 2;
|
|
71
|
+
let r = 0;
|
|
72
|
+
let g = 0;
|
|
73
|
+
let b = 0;
|
|
74
|
+
if (h < 60)
|
|
75
|
+
[r, g, b] = [c, x, 0];
|
|
76
|
+
else if (h < 120)
|
|
77
|
+
[r, g, b] = [x, c, 0];
|
|
78
|
+
else if (h < 180)
|
|
79
|
+
[r, g, b] = [0, c, x];
|
|
80
|
+
else if (h < 240)
|
|
81
|
+
[r, g, b] = [0, x, c];
|
|
82
|
+
else if (h < 300)
|
|
83
|
+
[r, g, b] = [x, 0, c];
|
|
84
|
+
else
|
|
85
|
+
[r, g, b] = [c, 0, x];
|
|
86
|
+
return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
|
|
87
|
+
}
|
|
88
|
+
function toHexByte(value) {
|
|
89
|
+
return Math.max(0, Math.min(255, value)).toString(16).padStart(2, '0');
|
|
90
|
+
}
|
|
91
|
+
//# sourceMappingURL=theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED