@commercetools-demo/puck-theme-manager 0.2.1 → 0.6.1
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/dist/index.js +383 -328
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +355 -277
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -14
package/dist/index.mjs
CHANGED
|
@@ -2,17 +2,16 @@
|
|
|
2
2
|
import { useEffect, useState as useState2, useCallback } from "react";
|
|
3
3
|
import { useHistory } from "react-router-dom";
|
|
4
4
|
import { PuckApiProvider, usePuckConfiguration } from "@commercetools-demo/puck-api";
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
import Grid from "@commercetools-uikit/grid";
|
|
5
|
+
import {
|
|
6
|
+
Button as Button2,
|
|
7
|
+
Card as NimbusCard,
|
|
8
|
+
Grid as NimbusGrid,
|
|
9
|
+
LoadingSpinner,
|
|
10
|
+
NumberInput as NimbusNumberInput,
|
|
11
|
+
Stack as Stack2,
|
|
12
|
+
Text as NimbusText,
|
|
13
|
+
TextInput as NimbusTextInput
|
|
14
|
+
} from "@commercetools/nimbus";
|
|
16
15
|
|
|
17
16
|
// src/constants.ts
|
|
18
17
|
var DEFAULT_THEME = {
|
|
@@ -45,11 +44,33 @@ var DEFAULT_THEME = {
|
|
|
45
44
|
backgroundStyle: "solid"
|
|
46
45
|
};
|
|
47
46
|
|
|
47
|
+
// src/EnsureNimbusProvider.tsx
|
|
48
|
+
import { ChakraProvider, createSystem } from "@chakra-ui/react/styled-system";
|
|
49
|
+
import {
|
|
50
|
+
NimbusI18nProvider,
|
|
51
|
+
_RegionProvider,
|
|
52
|
+
system as nimbusSystem
|
|
53
|
+
} from "@commercetools/nimbus";
|
|
54
|
+
import { jsx } from "react/jsx-runtime";
|
|
55
|
+
var SCOPED_SYSTEM_KEY = /* @__PURE__ */ Symbol.for(
|
|
56
|
+
"@commercetools-demo/puck:nimbus-scoped-system"
|
|
57
|
+
);
|
|
58
|
+
var globalScope = globalThis;
|
|
59
|
+
var scopedSystem = globalScope[SCOPED_SYSTEM_KEY] ?? (globalScope[SCOPED_SYSTEM_KEY] = createSystem({
|
|
60
|
+
// `_config` is the fully-merged Nimbus + Chakra config used to build the
|
|
61
|
+
// stock system; reusing it keeps all Nimbus theming intact.
|
|
62
|
+
...nimbusSystem._config,
|
|
63
|
+
preflight: false,
|
|
64
|
+
globalCss: {}
|
|
65
|
+
}));
|
|
66
|
+
var EnsureNimbusProvider = ({
|
|
67
|
+
locale = "en",
|
|
68
|
+
children
|
|
69
|
+
}) => /* @__PURE__ */ jsx(ChakraProvider, { value: scopedSystem, children: /* @__PURE__ */ jsx(NimbusI18nProvider, { locale, children: /* @__PURE__ */ jsx(_RegionProvider, { children }) }) });
|
|
70
|
+
|
|
48
71
|
// src/components/theme-preset-selector.tsx
|
|
49
72
|
import { useState } from "react";
|
|
50
|
-
import
|
|
51
|
-
import Spacings from "@commercetools-uikit/spacings";
|
|
52
|
-
import FieldLabel from "@commercetools-uikit/field-label";
|
|
73
|
+
import { Button, Stack } from "@commercetools/nimbus";
|
|
53
74
|
|
|
54
75
|
// src/presets.ts
|
|
55
76
|
var flatTheme = {
|
|
@@ -528,7 +549,7 @@ function buildCssVars(tokens) {
|
|
|
528
549
|
}
|
|
529
550
|
|
|
530
551
|
// src/components/theme-preset-selector.tsx
|
|
531
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
552
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
532
553
|
var PRESET_OPTIONS = [
|
|
533
554
|
{ value: "", label: "Choose a preset\u2026" },
|
|
534
555
|
...PRESET_KEYS_SELECTOR.map((key) => ({
|
|
@@ -554,34 +575,107 @@ var ThemePresetSelector = ({
|
|
|
554
575
|
onSelectPreset(themePresets[selectedKey]);
|
|
555
576
|
}
|
|
556
577
|
};
|
|
557
|
-
return /* @__PURE__ */ jsxs(
|
|
558
|
-
/* @__PURE__ */
|
|
559
|
-
|
|
560
|
-
|
|
578
|
+
return /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "200", children: [
|
|
579
|
+
/* @__PURE__ */ jsx2(
|
|
580
|
+
"label",
|
|
581
|
+
{
|
|
582
|
+
htmlFor: "theme-preset-select",
|
|
583
|
+
style: { display: "block", marginBottom: 4, fontSize: 13, fontWeight: 600 },
|
|
584
|
+
children: "Quick apply preset"
|
|
585
|
+
}
|
|
586
|
+
),
|
|
587
|
+
/* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "200", alignItems: "center", children: [
|
|
588
|
+
/* @__PURE__ */ jsx2(
|
|
561
589
|
"select",
|
|
562
590
|
{
|
|
563
591
|
id: "theme-preset-select",
|
|
564
592
|
value: selectedKey,
|
|
565
593
|
onChange: (e) => setSelectedKey(e.target.value),
|
|
566
594
|
style: SELECT_STYLE,
|
|
567
|
-
children: PRESET_OPTIONS.map((o) => /* @__PURE__ */
|
|
595
|
+
children: PRESET_OPTIONS.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value))
|
|
568
596
|
}
|
|
569
597
|
),
|
|
570
|
-
/* @__PURE__ */
|
|
571
|
-
PrimaryButton,
|
|
572
|
-
{
|
|
573
|
-
label: "Apply",
|
|
574
|
-
onClick: handleApply,
|
|
575
|
-
isDisabled: !selectedKey
|
|
576
|
-
}
|
|
577
|
-
)
|
|
598
|
+
/* @__PURE__ */ jsx2(Button, { variant: "solid", onPress: handleApply, isDisabled: !selectedKey, children: "Apply" })
|
|
578
599
|
] })
|
|
579
600
|
] });
|
|
580
601
|
};
|
|
581
602
|
var theme_preset_selector_default = ThemePresetSelector;
|
|
582
603
|
|
|
583
604
|
// src/components/theme-editor.tsx
|
|
584
|
-
import { jsx as
|
|
605
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
606
|
+
var SCALE_TO_GAP = {
|
|
607
|
+
xs: "100",
|
|
608
|
+
s: "200",
|
|
609
|
+
m: "400",
|
|
610
|
+
l: "600",
|
|
611
|
+
xl: "800"
|
|
612
|
+
};
|
|
613
|
+
var Spacings = {
|
|
614
|
+
Stack: ({ scale = "m", alignItems, justifyContent, children }) => /* @__PURE__ */ jsx3(
|
|
615
|
+
Stack2,
|
|
616
|
+
{
|
|
617
|
+
direction: "column",
|
|
618
|
+
gap: SCALE_TO_GAP[scale] ?? "400",
|
|
619
|
+
alignItems,
|
|
620
|
+
justifyContent,
|
|
621
|
+
children
|
|
622
|
+
}
|
|
623
|
+
),
|
|
624
|
+
Inline: ({ scale = "m", alignItems, justifyContent, children }) => /* @__PURE__ */ jsx3(
|
|
625
|
+
Stack2,
|
|
626
|
+
{
|
|
627
|
+
direction: "row",
|
|
628
|
+
gap: SCALE_TO_GAP[scale] ?? "400",
|
|
629
|
+
alignItems,
|
|
630
|
+
justifyContent,
|
|
631
|
+
children
|
|
632
|
+
}
|
|
633
|
+
)
|
|
634
|
+
};
|
|
635
|
+
var TONE_TO_COLOR = {
|
|
636
|
+
secondary: "neutral.11",
|
|
637
|
+
critical: "critical.11",
|
|
638
|
+
positive: "positive.11"
|
|
639
|
+
};
|
|
640
|
+
var Text = {
|
|
641
|
+
Headline: ({ as = "h2", children }) => /* @__PURE__ */ jsx3(NimbusText, { as, fontSize: as === "h1" ? "2xl" : "xl", fontWeight: "700", children }),
|
|
642
|
+
Body: ({ tone, children }) => /* @__PURE__ */ jsx3(NimbusText, { color: tone ? TONE_TO_COLOR[tone] : void 0, children })
|
|
643
|
+
};
|
|
644
|
+
var Card = ({ children }) => /* @__PURE__ */ jsx3(NimbusCard.Root, { variant: "outlined", children: /* @__PURE__ */ jsx3(NimbusCard.Body, { children }) });
|
|
645
|
+
var Grid = Object.assign(
|
|
646
|
+
({
|
|
647
|
+
gridGap,
|
|
648
|
+
gridTemplateColumns,
|
|
649
|
+
gridAutoColumns,
|
|
650
|
+
children
|
|
651
|
+
}) => /* @__PURE__ */ jsx3(NimbusGrid, { gap: gridGap, templateColumns: gridTemplateColumns, autoColumns: gridAutoColumns, children }),
|
|
652
|
+
{
|
|
653
|
+
Item: ({ children }) => /* @__PURE__ */ jsx3(NimbusGrid.Item, { children })
|
|
654
|
+
}
|
|
655
|
+
);
|
|
656
|
+
var PrimaryButton = ({ label, onClick, isDisabled }) => /* @__PURE__ */ jsx3(Button2, { variant: "solid", onPress: onClick, isDisabled, children: label });
|
|
657
|
+
var SecondaryButton = ({ label, onClick, isDisabled }) => /* @__PURE__ */ jsx3(Button2, { variant: "outline", onPress: onClick, isDisabled, children: label });
|
|
658
|
+
var FlatButton = ({ label, onClick, isDisabled, icon }) => /* @__PURE__ */ jsxs2(Button2, { variant: "ghost", onPress: onClick, isDisabled, children: [
|
|
659
|
+
icon,
|
|
660
|
+
label
|
|
661
|
+
] });
|
|
662
|
+
var FieldLabel = ({ title, htmlFor }) => /* @__PURE__ */ jsx3("label", { htmlFor, style: { display: "block", marginBottom: 4, fontSize: 13, fontWeight: 600 }, children: title });
|
|
663
|
+
var TextInput = ({ id, value, onChange }) => /* @__PURE__ */ jsx3(
|
|
664
|
+
NimbusTextInput,
|
|
665
|
+
{
|
|
666
|
+
id,
|
|
667
|
+
value: value == null ? "" : String(value),
|
|
668
|
+
onChange: (v) => onChange?.({ target: { value: v } })
|
|
669
|
+
}
|
|
670
|
+
);
|
|
671
|
+
var NumberInput = ({ id, value, onChange }) => /* @__PURE__ */ jsx3(
|
|
672
|
+
NimbusNumberInput,
|
|
673
|
+
{
|
|
674
|
+
id,
|
|
675
|
+
value: value == null || value === "" ? 0 : Number(value),
|
|
676
|
+
onChange: (n) => onChange?.({ target: { value: Number.isNaN(n) ? "" : String(n) } })
|
|
677
|
+
}
|
|
678
|
+
);
|
|
585
679
|
var BORDER_RADIUS_OPTIONS = [
|
|
586
680
|
{ value: "none", label: "None" },
|
|
587
681
|
{ value: "sm", label: "Small" },
|
|
@@ -767,10 +861,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
767
861
|
}
|
|
768
862
|
}, [theme, updateTheme, clearError]);
|
|
769
863
|
if (loading && theme == null) {
|
|
770
|
-
return /* @__PURE__ */
|
|
864
|
+
return /* @__PURE__ */ jsx3("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx3(LoadingSpinner, {}) });
|
|
771
865
|
}
|
|
772
|
-
return /* @__PURE__ */ jsxs2(
|
|
773
|
-
backButton && /* @__PURE__ */
|
|
866
|
+
return /* @__PURE__ */ jsxs2(Spacings.Stack, { scale: "l", children: [
|
|
867
|
+
backButton && /* @__PURE__ */ jsx3(
|
|
774
868
|
FlatButton,
|
|
775
869
|
{
|
|
776
870
|
onClick: () => history.push("/"),
|
|
@@ -779,19 +873,19 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
779
873
|
children: backButton.label
|
|
780
874
|
}
|
|
781
875
|
),
|
|
782
|
-
/* @__PURE__ */
|
|
783
|
-
/* @__PURE__ */
|
|
784
|
-
/* @__PURE__ */
|
|
876
|
+
/* @__PURE__ */ jsx3("div", { style: { padding: "0 20px" }, children: /* @__PURE__ */ jsxs2(Spacings.Stack, { scale: "l", alignItems: "flex-start", children: [
|
|
877
|
+
/* @__PURE__ */ jsx3(Text.Headline, { as: "h1", children: "Theme" }),
|
|
878
|
+
/* @__PURE__ */ jsx3(Text.Body, { tone: "secondary", children: "Customize colors, typography, spacing, and component styles." })
|
|
785
879
|
] }) }),
|
|
786
|
-
error && /* @__PURE__ */
|
|
787
|
-
/* @__PURE__ */
|
|
788
|
-
/* @__PURE__ */
|
|
880
|
+
error && /* @__PURE__ */ jsx3(Card, { children: /* @__PURE__ */ jsxs2(Spacings.Stack, { scale: "m", children: [
|
|
881
|
+
/* @__PURE__ */ jsx3(Text.Headline, { as: "h2", children: "Error" }),
|
|
882
|
+
/* @__PURE__ */ jsx3(Text.Body, { tone: "critical", children: error })
|
|
789
883
|
] }) }),
|
|
790
|
-
saveSuccess && /* @__PURE__ */
|
|
791
|
-
/* @__PURE__ */ jsxs2(
|
|
792
|
-
/* @__PURE__ */
|
|
793
|
-
/* @__PURE__ */ jsxs2(
|
|
794
|
-
/* @__PURE__ */
|
|
884
|
+
saveSuccess && /* @__PURE__ */ jsx3(Text.Body, { tone: "positive", children: "Theme saved successfully." }),
|
|
885
|
+
/* @__PURE__ */ jsxs2(Spacings.Stack, { scale: "l", children: [
|
|
886
|
+
/* @__PURE__ */ jsx3("div", { style: { padding: "0 20px" }, children: /* @__PURE__ */ jsx3(Spacings.Inline, { scale: "s", children: /* @__PURE__ */ jsx3(theme_preset_selector_default, { onSelectPreset: applyThemeToForm }) }) }),
|
|
887
|
+
/* @__PURE__ */ jsxs2(Spacings.Stack, { scale: "s", children: [
|
|
888
|
+
/* @__PURE__ */ jsx3("div", { style: { padding: "0 20px" }, children: /* @__PURE__ */ jsxs2(
|
|
795
889
|
"button",
|
|
796
890
|
{
|
|
797
891
|
type: "button",
|
|
@@ -812,8 +906,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
812
906
|
background: "transparent"
|
|
813
907
|
},
|
|
814
908
|
children: [
|
|
815
|
-
/* @__PURE__ */
|
|
816
|
-
/* @__PURE__ */
|
|
909
|
+
/* @__PURE__ */ jsx3(Text.Headline, { as: "h2", children: "Theme configuration" }),
|
|
910
|
+
/* @__PURE__ */ jsx3(
|
|
817
911
|
"span",
|
|
818
912
|
{
|
|
819
913
|
style: {
|
|
@@ -831,8 +925,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
831
925
|
]
|
|
832
926
|
}
|
|
833
927
|
) }),
|
|
834
|
-
isConfigExpanded && /* @__PURE__ */
|
|
835
|
-
/* @__PURE__ */
|
|
928
|
+
isConfigExpanded && /* @__PURE__ */ jsx3("div", { style: { padding: "0 20px" }, children: /* @__PURE__ */ jsx3(Spacings.Stack, { scale: "l", children: /* @__PURE__ */ jsxs2(Spacings.Stack, { scale: "xl", children: [
|
|
929
|
+
/* @__PURE__ */ jsx3(Text.Headline, { as: "h2", children: "Colors" }),
|
|
836
930
|
/* @__PURE__ */ jsxs2(
|
|
837
931
|
Grid,
|
|
838
932
|
{
|
|
@@ -840,10 +934,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
840
934
|
gridAutoColumns: "1fr",
|
|
841
935
|
gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
|
842
936
|
children: [
|
|
843
|
-
/* @__PURE__ */
|
|
844
|
-
/* @__PURE__ */
|
|
845
|
-
/* @__PURE__ */ jsxs2(
|
|
846
|
-
/* @__PURE__ */
|
|
937
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
938
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Primary", htmlFor: "colorPrimary" }),
|
|
939
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
940
|
+
/* @__PURE__ */ jsx3(
|
|
847
941
|
"input",
|
|
848
942
|
{
|
|
849
943
|
type: "color",
|
|
@@ -853,7 +947,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
853
947
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
854
948
|
}
|
|
855
949
|
),
|
|
856
|
-
/* @__PURE__ */
|
|
950
|
+
/* @__PURE__ */ jsx3(
|
|
857
951
|
TextInput,
|
|
858
952
|
{
|
|
859
953
|
value: formValues.colorPrimary,
|
|
@@ -863,16 +957,16 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
863
957
|
)
|
|
864
958
|
] })
|
|
865
959
|
] }) }),
|
|
866
|
-
/* @__PURE__ */
|
|
867
|
-
/* @__PURE__ */
|
|
868
|
-
|
|
960
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
961
|
+
/* @__PURE__ */ jsx3(
|
|
962
|
+
FieldLabel,
|
|
869
963
|
{
|
|
870
964
|
title: "Primary Hover",
|
|
871
965
|
htmlFor: "colorPrimaryHover"
|
|
872
966
|
}
|
|
873
967
|
),
|
|
874
|
-
/* @__PURE__ */ jsxs2(
|
|
875
|
-
/* @__PURE__ */
|
|
968
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
969
|
+
/* @__PURE__ */ jsx3(
|
|
876
970
|
"input",
|
|
877
971
|
{
|
|
878
972
|
type: "color",
|
|
@@ -882,7 +976,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
882
976
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
883
977
|
}
|
|
884
978
|
),
|
|
885
|
-
/* @__PURE__ */
|
|
979
|
+
/* @__PURE__ */ jsx3(
|
|
886
980
|
TextInput,
|
|
887
981
|
{
|
|
888
982
|
horizontalConstraint: 3,
|
|
@@ -892,10 +986,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
892
986
|
)
|
|
893
987
|
] })
|
|
894
988
|
] }) }),
|
|
895
|
-
/* @__PURE__ */
|
|
896
|
-
/* @__PURE__ */
|
|
897
|
-
/* @__PURE__ */ jsxs2(
|
|
898
|
-
/* @__PURE__ */
|
|
989
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
990
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Secondary", htmlFor: "colorSecondary" }),
|
|
991
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
992
|
+
/* @__PURE__ */ jsx3(
|
|
899
993
|
"input",
|
|
900
994
|
{
|
|
901
995
|
type: "color",
|
|
@@ -905,7 +999,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
905
999
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
906
1000
|
}
|
|
907
1001
|
),
|
|
908
|
-
/* @__PURE__ */
|
|
1002
|
+
/* @__PURE__ */ jsx3(
|
|
909
1003
|
TextInput,
|
|
910
1004
|
{
|
|
911
1005
|
horizontalConstraint: 3,
|
|
@@ -915,16 +1009,16 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
915
1009
|
)
|
|
916
1010
|
] })
|
|
917
1011
|
] }) }),
|
|
918
|
-
/* @__PURE__ */
|
|
919
|
-
/* @__PURE__ */
|
|
920
|
-
|
|
1012
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1013
|
+
/* @__PURE__ */ jsx3(
|
|
1014
|
+
FieldLabel,
|
|
921
1015
|
{
|
|
922
1016
|
title: "Background",
|
|
923
1017
|
htmlFor: "colorBackground"
|
|
924
1018
|
}
|
|
925
1019
|
),
|
|
926
|
-
/* @__PURE__ */ jsxs2(
|
|
927
|
-
/* @__PURE__ */
|
|
1020
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1021
|
+
/* @__PURE__ */ jsx3(
|
|
928
1022
|
"input",
|
|
929
1023
|
{
|
|
930
1024
|
type: "color",
|
|
@@ -934,7 +1028,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
934
1028
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
935
1029
|
}
|
|
936
1030
|
),
|
|
937
|
-
/* @__PURE__ */
|
|
1031
|
+
/* @__PURE__ */ jsx3(
|
|
938
1032
|
TextInput,
|
|
939
1033
|
{
|
|
940
1034
|
horizontalConstraint: 3,
|
|
@@ -944,10 +1038,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
944
1038
|
)
|
|
945
1039
|
] })
|
|
946
1040
|
] }) }),
|
|
947
|
-
/* @__PURE__ */
|
|
948
|
-
/* @__PURE__ */
|
|
949
|
-
/* @__PURE__ */ jsxs2(
|
|
950
|
-
/* @__PURE__ */
|
|
1041
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1042
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Surface", htmlFor: "colorSurface" }),
|
|
1043
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1044
|
+
/* @__PURE__ */ jsx3(
|
|
951
1045
|
"input",
|
|
952
1046
|
{
|
|
953
1047
|
type: "color",
|
|
@@ -957,7 +1051,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
957
1051
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
958
1052
|
}
|
|
959
1053
|
),
|
|
960
|
-
/* @__PURE__ */
|
|
1054
|
+
/* @__PURE__ */ jsx3(
|
|
961
1055
|
TextInput,
|
|
962
1056
|
{
|
|
963
1057
|
horizontalConstraint: 3,
|
|
@@ -967,10 +1061,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
967
1061
|
)
|
|
968
1062
|
] })
|
|
969
1063
|
] }) }),
|
|
970
|
-
/* @__PURE__ */
|
|
971
|
-
/* @__PURE__ */
|
|
972
|
-
/* @__PURE__ */ jsxs2(
|
|
973
|
-
/* @__PURE__ */
|
|
1064
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1065
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Text", htmlFor: "colorText" }),
|
|
1066
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1067
|
+
/* @__PURE__ */ jsx3(
|
|
974
1068
|
"input",
|
|
975
1069
|
{
|
|
976
1070
|
type: "color",
|
|
@@ -980,7 +1074,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
980
1074
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
981
1075
|
}
|
|
982
1076
|
),
|
|
983
|
-
/* @__PURE__ */
|
|
1077
|
+
/* @__PURE__ */ jsx3(
|
|
984
1078
|
TextInput,
|
|
985
1079
|
{
|
|
986
1080
|
horizontalConstraint: 3,
|
|
@@ -990,10 +1084,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
990
1084
|
)
|
|
991
1085
|
] })
|
|
992
1086
|
] }) }),
|
|
993
|
-
/* @__PURE__ */
|
|
994
|
-
/* @__PURE__ */
|
|
995
|
-
/* @__PURE__ */ jsxs2(
|
|
996
|
-
/* @__PURE__ */
|
|
1087
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1088
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Text Muted", htmlFor: "colorTextMuted" }),
|
|
1089
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1090
|
+
/* @__PURE__ */ jsx3(
|
|
997
1091
|
"input",
|
|
998
1092
|
{
|
|
999
1093
|
type: "color",
|
|
@@ -1003,7 +1097,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1003
1097
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1004
1098
|
}
|
|
1005
1099
|
),
|
|
1006
|
-
/* @__PURE__ */
|
|
1100
|
+
/* @__PURE__ */ jsx3(
|
|
1007
1101
|
TextInput,
|
|
1008
1102
|
{
|
|
1009
1103
|
horizontalConstraint: 3,
|
|
@@ -1016,8 +1110,8 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1016
1110
|
]
|
|
1017
1111
|
}
|
|
1018
1112
|
),
|
|
1019
|
-
/* @__PURE__ */
|
|
1020
|
-
/* @__PURE__ */
|
|
1113
|
+
/* @__PURE__ */ jsx3(Text.Headline, { as: "h2", children: "Extended colors" }),
|
|
1114
|
+
/* @__PURE__ */ jsx3(Text.Body, { tone: "secondary", children: "Optional theme tokens for foregrounds, muted, destructive, accent, border, input, and ring." }),
|
|
1021
1115
|
/* @__PURE__ */ jsxs2(
|
|
1022
1116
|
Grid,
|
|
1023
1117
|
{
|
|
@@ -1025,16 +1119,16 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1025
1119
|
gridAutoColumns: "1fr",
|
|
1026
1120
|
gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
|
1027
1121
|
children: [
|
|
1028
|
-
/* @__PURE__ */
|
|
1029
|
-
/* @__PURE__ */
|
|
1030
|
-
|
|
1122
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1123
|
+
/* @__PURE__ */ jsx3(
|
|
1124
|
+
FieldLabel,
|
|
1031
1125
|
{
|
|
1032
1126
|
title: "Primary Foreground",
|
|
1033
1127
|
htmlFor: "colorPrimaryForeground"
|
|
1034
1128
|
}
|
|
1035
1129
|
),
|
|
1036
|
-
/* @__PURE__ */ jsxs2(
|
|
1037
|
-
/* @__PURE__ */
|
|
1130
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1131
|
+
/* @__PURE__ */ jsx3(
|
|
1038
1132
|
"input",
|
|
1039
1133
|
{
|
|
1040
1134
|
type: "color",
|
|
@@ -1044,7 +1138,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1044
1138
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1045
1139
|
}
|
|
1046
1140
|
),
|
|
1047
|
-
/* @__PURE__ */
|
|
1141
|
+
/* @__PURE__ */ jsx3(
|
|
1048
1142
|
TextInput,
|
|
1049
1143
|
{
|
|
1050
1144
|
horizontalConstraint: 3,
|
|
@@ -1057,16 +1151,16 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1057
1151
|
)
|
|
1058
1152
|
] })
|
|
1059
1153
|
] }) }),
|
|
1060
|
-
/* @__PURE__ */
|
|
1061
|
-
/* @__PURE__ */
|
|
1062
|
-
|
|
1154
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1155
|
+
/* @__PURE__ */ jsx3(
|
|
1156
|
+
FieldLabel,
|
|
1063
1157
|
{
|
|
1064
1158
|
title: "Secondary Foreground",
|
|
1065
1159
|
htmlFor: "colorSecondaryForeground"
|
|
1066
1160
|
}
|
|
1067
1161
|
),
|
|
1068
|
-
/* @__PURE__ */ jsxs2(
|
|
1069
|
-
/* @__PURE__ */
|
|
1162
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1163
|
+
/* @__PURE__ */ jsx3(
|
|
1070
1164
|
"input",
|
|
1071
1165
|
{
|
|
1072
1166
|
type: "color",
|
|
@@ -1076,7 +1170,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1076
1170
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1077
1171
|
}
|
|
1078
1172
|
),
|
|
1079
|
-
/* @__PURE__ */
|
|
1173
|
+
/* @__PURE__ */ jsx3(
|
|
1080
1174
|
TextInput,
|
|
1081
1175
|
{
|
|
1082
1176
|
horizontalConstraint: 3,
|
|
@@ -1089,10 +1183,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1089
1183
|
)
|
|
1090
1184
|
] })
|
|
1091
1185
|
] }) }),
|
|
1092
|
-
/* @__PURE__ */
|
|
1093
|
-
/* @__PURE__ */
|
|
1094
|
-
/* @__PURE__ */ jsxs2(
|
|
1095
|
-
/* @__PURE__ */
|
|
1186
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1187
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Foreground", htmlFor: "colorForeground" }),
|
|
1188
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1189
|
+
/* @__PURE__ */ jsx3(
|
|
1096
1190
|
"input",
|
|
1097
1191
|
{
|
|
1098
1192
|
type: "color",
|
|
@@ -1102,7 +1196,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1102
1196
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1103
1197
|
}
|
|
1104
1198
|
),
|
|
1105
|
-
/* @__PURE__ */
|
|
1199
|
+
/* @__PURE__ */ jsx3(
|
|
1106
1200
|
TextInput,
|
|
1107
1201
|
{
|
|
1108
1202
|
horizontalConstraint: 3,
|
|
@@ -1115,10 +1209,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1115
1209
|
)
|
|
1116
1210
|
] })
|
|
1117
1211
|
] }) }),
|
|
1118
|
-
/* @__PURE__ */
|
|
1119
|
-
/* @__PURE__ */
|
|
1120
|
-
/* @__PURE__ */ jsxs2(
|
|
1121
|
-
/* @__PURE__ */
|
|
1212
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1213
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Muted", htmlFor: "colorMuted" }),
|
|
1214
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1215
|
+
/* @__PURE__ */ jsx3(
|
|
1122
1216
|
"input",
|
|
1123
1217
|
{
|
|
1124
1218
|
type: "color",
|
|
@@ -1128,7 +1222,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1128
1222
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1129
1223
|
}
|
|
1130
1224
|
),
|
|
1131
|
-
/* @__PURE__ */
|
|
1225
|
+
/* @__PURE__ */ jsx3(
|
|
1132
1226
|
TextInput,
|
|
1133
1227
|
{
|
|
1134
1228
|
horizontalConstraint: 3,
|
|
@@ -1141,16 +1235,16 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1141
1235
|
)
|
|
1142
1236
|
] })
|
|
1143
1237
|
] }) }),
|
|
1144
|
-
/* @__PURE__ */
|
|
1145
|
-
/* @__PURE__ */
|
|
1146
|
-
|
|
1238
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1239
|
+
/* @__PURE__ */ jsx3(
|
|
1240
|
+
FieldLabel,
|
|
1147
1241
|
{
|
|
1148
1242
|
title: "Muted Foreground",
|
|
1149
1243
|
htmlFor: "colorMutedForeground"
|
|
1150
1244
|
}
|
|
1151
1245
|
),
|
|
1152
|
-
/* @__PURE__ */ jsxs2(
|
|
1153
|
-
/* @__PURE__ */
|
|
1246
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1247
|
+
/* @__PURE__ */ jsx3(
|
|
1154
1248
|
"input",
|
|
1155
1249
|
{
|
|
1156
1250
|
type: "color",
|
|
@@ -1160,7 +1254,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1160
1254
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1161
1255
|
}
|
|
1162
1256
|
),
|
|
1163
|
-
/* @__PURE__ */
|
|
1257
|
+
/* @__PURE__ */ jsx3(
|
|
1164
1258
|
TextInput,
|
|
1165
1259
|
{
|
|
1166
1260
|
horizontalConstraint: 3,
|
|
@@ -1173,10 +1267,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1173
1267
|
)
|
|
1174
1268
|
] })
|
|
1175
1269
|
] }) }),
|
|
1176
|
-
/* @__PURE__ */
|
|
1177
|
-
/* @__PURE__ */
|
|
1178
|
-
/* @__PURE__ */ jsxs2(
|
|
1179
|
-
/* @__PURE__ */
|
|
1270
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1271
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Destructive", htmlFor: "colorDestructive" }),
|
|
1272
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1273
|
+
/* @__PURE__ */ jsx3(
|
|
1180
1274
|
"input",
|
|
1181
1275
|
{
|
|
1182
1276
|
type: "color",
|
|
@@ -1186,7 +1280,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1186
1280
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1187
1281
|
}
|
|
1188
1282
|
),
|
|
1189
|
-
/* @__PURE__ */
|
|
1283
|
+
/* @__PURE__ */ jsx3(
|
|
1190
1284
|
TextInput,
|
|
1191
1285
|
{
|
|
1192
1286
|
horizontalConstraint: 3,
|
|
@@ -1199,16 +1293,16 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1199
1293
|
)
|
|
1200
1294
|
] })
|
|
1201
1295
|
] }) }),
|
|
1202
|
-
/* @__PURE__ */
|
|
1203
|
-
/* @__PURE__ */
|
|
1204
|
-
|
|
1296
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1297
|
+
/* @__PURE__ */ jsx3(
|
|
1298
|
+
FieldLabel,
|
|
1205
1299
|
{
|
|
1206
1300
|
title: "Destructive Foreground",
|
|
1207
1301
|
htmlFor: "colorDestructiveForeground"
|
|
1208
1302
|
}
|
|
1209
1303
|
),
|
|
1210
|
-
/* @__PURE__ */ jsxs2(
|
|
1211
|
-
/* @__PURE__ */
|
|
1304
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1305
|
+
/* @__PURE__ */ jsx3(
|
|
1212
1306
|
"input",
|
|
1213
1307
|
{
|
|
1214
1308
|
type: "color",
|
|
@@ -1218,7 +1312,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1218
1312
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1219
1313
|
}
|
|
1220
1314
|
),
|
|
1221
|
-
/* @__PURE__ */
|
|
1315
|
+
/* @__PURE__ */ jsx3(
|
|
1222
1316
|
TextInput,
|
|
1223
1317
|
{
|
|
1224
1318
|
horizontalConstraint: 3,
|
|
@@ -1231,10 +1325,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1231
1325
|
)
|
|
1232
1326
|
] })
|
|
1233
1327
|
] }) }),
|
|
1234
|
-
/* @__PURE__ */
|
|
1235
|
-
/* @__PURE__ */
|
|
1236
|
-
/* @__PURE__ */ jsxs2(
|
|
1237
|
-
/* @__PURE__ */
|
|
1328
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1329
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Accent", htmlFor: "colorAccent" }),
|
|
1330
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1331
|
+
/* @__PURE__ */ jsx3(
|
|
1238
1332
|
"input",
|
|
1239
1333
|
{
|
|
1240
1334
|
type: "color",
|
|
@@ -1244,7 +1338,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1244
1338
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1245
1339
|
}
|
|
1246
1340
|
),
|
|
1247
|
-
/* @__PURE__ */
|
|
1341
|
+
/* @__PURE__ */ jsx3(
|
|
1248
1342
|
TextInput,
|
|
1249
1343
|
{
|
|
1250
1344
|
horizontalConstraint: 3,
|
|
@@ -1257,16 +1351,16 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1257
1351
|
)
|
|
1258
1352
|
] })
|
|
1259
1353
|
] }) }),
|
|
1260
|
-
/* @__PURE__ */
|
|
1261
|
-
/* @__PURE__ */
|
|
1262
|
-
|
|
1354
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1355
|
+
/* @__PURE__ */ jsx3(
|
|
1356
|
+
FieldLabel,
|
|
1263
1357
|
{
|
|
1264
1358
|
title: "Accent Foreground",
|
|
1265
1359
|
htmlFor: "colorAccentForeground"
|
|
1266
1360
|
}
|
|
1267
1361
|
),
|
|
1268
|
-
/* @__PURE__ */ jsxs2(
|
|
1269
|
-
/* @__PURE__ */
|
|
1362
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1363
|
+
/* @__PURE__ */ jsx3(
|
|
1270
1364
|
"input",
|
|
1271
1365
|
{
|
|
1272
1366
|
type: "color",
|
|
@@ -1276,7 +1370,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1276
1370
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1277
1371
|
}
|
|
1278
1372
|
),
|
|
1279
|
-
/* @__PURE__ */
|
|
1373
|
+
/* @__PURE__ */ jsx3(
|
|
1280
1374
|
TextInput,
|
|
1281
1375
|
{
|
|
1282
1376
|
horizontalConstraint: 3,
|
|
@@ -1289,10 +1383,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1289
1383
|
)
|
|
1290
1384
|
] })
|
|
1291
1385
|
] }) }),
|
|
1292
|
-
/* @__PURE__ */
|
|
1293
|
-
/* @__PURE__ */
|
|
1294
|
-
/* @__PURE__ */ jsxs2(
|
|
1295
|
-
/* @__PURE__ */
|
|
1386
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1387
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Border", htmlFor: "colorBorder" }),
|
|
1388
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1389
|
+
/* @__PURE__ */ jsx3(
|
|
1296
1390
|
"input",
|
|
1297
1391
|
{
|
|
1298
1392
|
type: "color",
|
|
@@ -1302,7 +1396,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1302
1396
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1303
1397
|
}
|
|
1304
1398
|
),
|
|
1305
|
-
/* @__PURE__ */
|
|
1399
|
+
/* @__PURE__ */ jsx3(
|
|
1306
1400
|
TextInput,
|
|
1307
1401
|
{
|
|
1308
1402
|
horizontalConstraint: 3,
|
|
@@ -1315,10 +1409,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1315
1409
|
)
|
|
1316
1410
|
] })
|
|
1317
1411
|
] }) }),
|
|
1318
|
-
/* @__PURE__ */
|
|
1319
|
-
/* @__PURE__ */
|
|
1320
|
-
/* @__PURE__ */ jsxs2(
|
|
1321
|
-
/* @__PURE__ */
|
|
1412
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1413
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Input", htmlFor: "colorInput" }),
|
|
1414
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1415
|
+
/* @__PURE__ */ jsx3(
|
|
1322
1416
|
"input",
|
|
1323
1417
|
{
|
|
1324
1418
|
type: "color",
|
|
@@ -1328,7 +1422,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1328
1422
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1329
1423
|
}
|
|
1330
1424
|
),
|
|
1331
|
-
/* @__PURE__ */
|
|
1425
|
+
/* @__PURE__ */ jsx3(
|
|
1332
1426
|
TextInput,
|
|
1333
1427
|
{
|
|
1334
1428
|
horizontalConstraint: 3,
|
|
@@ -1341,10 +1435,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1341
1435
|
)
|
|
1342
1436
|
] })
|
|
1343
1437
|
] }) }),
|
|
1344
|
-
/* @__PURE__ */
|
|
1345
|
-
/* @__PURE__ */
|
|
1346
|
-
/* @__PURE__ */ jsxs2(
|
|
1347
|
-
/* @__PURE__ */
|
|
1438
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1439
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Ring", htmlFor: "colorRing" }),
|
|
1440
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1441
|
+
/* @__PURE__ */ jsx3(
|
|
1348
1442
|
"input",
|
|
1349
1443
|
{
|
|
1350
1444
|
type: "color",
|
|
@@ -1354,7 +1448,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1354
1448
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1355
1449
|
}
|
|
1356
1450
|
),
|
|
1357
|
-
/* @__PURE__ */
|
|
1451
|
+
/* @__PURE__ */ jsx3(
|
|
1358
1452
|
TextInput,
|
|
1359
1453
|
{
|
|
1360
1454
|
horizontalConstraint: 3,
|
|
@@ -1370,7 +1464,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1370
1464
|
]
|
|
1371
1465
|
}
|
|
1372
1466
|
),
|
|
1373
|
-
/* @__PURE__ */
|
|
1467
|
+
/* @__PURE__ */ jsx3(Text.Headline, { as: "h2", children: "Typography" }),
|
|
1374
1468
|
/* @__PURE__ */ jsxs2(
|
|
1375
1469
|
Grid,
|
|
1376
1470
|
{
|
|
@@ -1378,9 +1472,9 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1378
1472
|
gridAutoColumns: "1fr",
|
|
1379
1473
|
gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
|
1380
1474
|
children: [
|
|
1381
|
-
/* @__PURE__ */
|
|
1382
|
-
/* @__PURE__ */
|
|
1383
|
-
/* @__PURE__ */
|
|
1475
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1476
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Font Family", htmlFor: "fontFamily" }),
|
|
1477
|
+
/* @__PURE__ */ jsx3(
|
|
1384
1478
|
TextInput,
|
|
1385
1479
|
{
|
|
1386
1480
|
horizontalConstraint: 4,
|
|
@@ -1390,9 +1484,9 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1390
1484
|
}
|
|
1391
1485
|
)
|
|
1392
1486
|
] }) }),
|
|
1393
|
-
/* @__PURE__ */
|
|
1394
|
-
/* @__PURE__ */
|
|
1395
|
-
/* @__PURE__ */
|
|
1487
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1488
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Heading Font", htmlFor: "fontHeading" }),
|
|
1489
|
+
/* @__PURE__ */ jsx3(
|
|
1396
1490
|
TextInput,
|
|
1397
1491
|
{
|
|
1398
1492
|
horizontalConstraint: 4,
|
|
@@ -1405,7 +1499,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1405
1499
|
]
|
|
1406
1500
|
}
|
|
1407
1501
|
),
|
|
1408
|
-
/* @__PURE__ */
|
|
1502
|
+
/* @__PURE__ */ jsx3(Text.Headline, { as: "h2", children: "Layout & Components" }),
|
|
1409
1503
|
/* @__PURE__ */ jsxs2(
|
|
1410
1504
|
Grid,
|
|
1411
1505
|
{
|
|
@@ -1413,9 +1507,9 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1413
1507
|
gridAutoColumns: "1fr",
|
|
1414
1508
|
gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
|
1415
1509
|
children: [
|
|
1416
|
-
/* @__PURE__ */
|
|
1417
|
-
/* @__PURE__ */
|
|
1418
|
-
/* @__PURE__ */
|
|
1510
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1511
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Spacing Scale", htmlFor: "spacingScale" }),
|
|
1512
|
+
/* @__PURE__ */ jsx3(
|
|
1419
1513
|
NumberInput,
|
|
1420
1514
|
{
|
|
1421
1515
|
id: "spacingScale",
|
|
@@ -1428,9 +1522,9 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1428
1522
|
}
|
|
1429
1523
|
)
|
|
1430
1524
|
] }) }),
|
|
1431
|
-
/* @__PURE__ */
|
|
1432
|
-
/* @__PURE__ */
|
|
1433
|
-
/* @__PURE__ */
|
|
1525
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1526
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Border Radius", htmlFor: "borderRadius" }),
|
|
1527
|
+
/* @__PURE__ */ jsx3(
|
|
1434
1528
|
"select",
|
|
1435
1529
|
{
|
|
1436
1530
|
id: "borderRadius",
|
|
@@ -1440,13 +1534,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1440
1534
|
e.target.value
|
|
1441
1535
|
),
|
|
1442
1536
|
style: SELECT_STYLE2,
|
|
1443
|
-
children: BORDER_RADIUS_OPTIONS.map((o) => /* @__PURE__ */
|
|
1537
|
+
children: BORDER_RADIUS_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value))
|
|
1444
1538
|
}
|
|
1445
1539
|
)
|
|
1446
1540
|
] }) }),
|
|
1447
|
-
/* @__PURE__ */
|
|
1448
|
-
/* @__PURE__ */
|
|
1449
|
-
/* @__PURE__ */
|
|
1541
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1542
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Border Width", htmlFor: "borderWidth" }),
|
|
1543
|
+
/* @__PURE__ */ jsx3(
|
|
1450
1544
|
"select",
|
|
1451
1545
|
{
|
|
1452
1546
|
id: "borderWidth",
|
|
@@ -1456,13 +1550,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1456
1550
|
e.target.value
|
|
1457
1551
|
),
|
|
1458
1552
|
style: SELECT_STYLE2,
|
|
1459
|
-
children: BORDER_WIDTH_OPTIONS.map((o) => /* @__PURE__ */
|
|
1553
|
+
children: BORDER_WIDTH_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value))
|
|
1460
1554
|
}
|
|
1461
1555
|
)
|
|
1462
1556
|
] }) }),
|
|
1463
|
-
/* @__PURE__ */
|
|
1464
|
-
/* @__PURE__ */
|
|
1465
|
-
/* @__PURE__ */
|
|
1557
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1558
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Button Style", htmlFor: "buttonStyle" }),
|
|
1559
|
+
/* @__PURE__ */ jsx3(
|
|
1466
1560
|
"select",
|
|
1467
1561
|
{
|
|
1468
1562
|
id: "buttonStyle",
|
|
@@ -1472,13 +1566,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1472
1566
|
e.target.value
|
|
1473
1567
|
),
|
|
1474
1568
|
style: SELECT_STYLE2,
|
|
1475
|
-
children: BUTTON_STYLE_OPTIONS.map((o) => /* @__PURE__ */
|
|
1569
|
+
children: BUTTON_STYLE_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value))
|
|
1476
1570
|
}
|
|
1477
1571
|
)
|
|
1478
1572
|
] }) }),
|
|
1479
|
-
/* @__PURE__ */
|
|
1480
|
-
/* @__PURE__ */
|
|
1481
|
-
/* @__PURE__ */
|
|
1573
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1574
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Card Shadow", htmlFor: "cardShadow" }),
|
|
1575
|
+
/* @__PURE__ */ jsx3(
|
|
1482
1576
|
"select",
|
|
1483
1577
|
{
|
|
1484
1578
|
id: "cardShadow",
|
|
@@ -1488,13 +1582,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1488
1582
|
e.target.value
|
|
1489
1583
|
),
|
|
1490
1584
|
style: SELECT_STYLE2,
|
|
1491
|
-
children: CARD_SHADOW_OPTIONS.map((o) => /* @__PURE__ */
|
|
1585
|
+
children: CARD_SHADOW_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value))
|
|
1492
1586
|
}
|
|
1493
1587
|
)
|
|
1494
1588
|
] }) }),
|
|
1495
|
-
/* @__PURE__ */
|
|
1496
|
-
/* @__PURE__ */
|
|
1497
|
-
/* @__PURE__ */
|
|
1589
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1590
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Header Style", htmlFor: "headerStyle" }),
|
|
1591
|
+
/* @__PURE__ */ jsx3(
|
|
1498
1592
|
"select",
|
|
1499
1593
|
{
|
|
1500
1594
|
id: "headerStyle",
|
|
@@ -1504,14 +1598,14 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1504
1598
|
e.target.value
|
|
1505
1599
|
),
|
|
1506
1600
|
style: SELECT_STYLE2,
|
|
1507
|
-
children: HEADER_STYLE_OPTIONS.map((o) => /* @__PURE__ */
|
|
1601
|
+
children: HEADER_STYLE_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value))
|
|
1508
1602
|
}
|
|
1509
1603
|
)
|
|
1510
1604
|
] }) })
|
|
1511
1605
|
]
|
|
1512
1606
|
}
|
|
1513
1607
|
),
|
|
1514
|
-
/* @__PURE__ */
|
|
1608
|
+
/* @__PURE__ */ jsx3(Text.Headline, { as: "h2", children: "Shadow & surface" }),
|
|
1515
1609
|
/* @__PURE__ */ jsxs2(
|
|
1516
1610
|
Grid,
|
|
1517
1611
|
{
|
|
@@ -1519,10 +1613,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1519
1613
|
gridAutoColumns: "1fr",
|
|
1520
1614
|
gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
|
1521
1615
|
children: [
|
|
1522
|
-
/* @__PURE__ */
|
|
1523
|
-
/* @__PURE__ */
|
|
1524
|
-
/* @__PURE__ */ jsxs2(
|
|
1525
|
-
/* @__PURE__ */
|
|
1616
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1617
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Shadow Light", htmlFor: "colorShadowLight" }),
|
|
1618
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1619
|
+
/* @__PURE__ */ jsx3(
|
|
1526
1620
|
"input",
|
|
1527
1621
|
{
|
|
1528
1622
|
type: "color",
|
|
@@ -1532,7 +1626,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1532
1626
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1533
1627
|
}
|
|
1534
1628
|
),
|
|
1535
|
-
/* @__PURE__ */
|
|
1629
|
+
/* @__PURE__ */ jsx3(
|
|
1536
1630
|
TextInput,
|
|
1537
1631
|
{
|
|
1538
1632
|
horizontalConstraint: 3,
|
|
@@ -1545,10 +1639,10 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1545
1639
|
)
|
|
1546
1640
|
] })
|
|
1547
1641
|
] }) }),
|
|
1548
|
-
/* @__PURE__ */
|
|
1549
|
-
/* @__PURE__ */
|
|
1550
|
-
/* @__PURE__ */ jsxs2(
|
|
1551
|
-
/* @__PURE__ */
|
|
1642
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1643
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Shadow Dark", htmlFor: "colorShadowDark" }),
|
|
1644
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { alignItems: "center", scale: "s", children: [
|
|
1645
|
+
/* @__PURE__ */ jsx3(
|
|
1552
1646
|
"input",
|
|
1553
1647
|
{
|
|
1554
1648
|
type: "color",
|
|
@@ -1558,7 +1652,7 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1558
1652
|
style: { width: 40, height: 32, cursor: "pointer" }
|
|
1559
1653
|
}
|
|
1560
1654
|
),
|
|
1561
|
-
/* @__PURE__ */
|
|
1655
|
+
/* @__PURE__ */ jsx3(
|
|
1562
1656
|
TextInput,
|
|
1563
1657
|
{
|
|
1564
1658
|
horizontalConstraint: 3,
|
|
@@ -1571,9 +1665,9 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1571
1665
|
)
|
|
1572
1666
|
] })
|
|
1573
1667
|
] }) }),
|
|
1574
|
-
/* @__PURE__ */
|
|
1575
|
-
/* @__PURE__ */
|
|
1576
|
-
/* @__PURE__ */
|
|
1668
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1669
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Surface Glass", htmlFor: "colorSurfaceGlass" }),
|
|
1670
|
+
/* @__PURE__ */ jsx3(
|
|
1577
1671
|
TextInput,
|
|
1578
1672
|
{
|
|
1579
1673
|
horizontalConstraint: 3,
|
|
@@ -1586,9 +1680,9 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1586
1680
|
}
|
|
1587
1681
|
)
|
|
1588
1682
|
] }) }),
|
|
1589
|
-
/* @__PURE__ */
|
|
1590
|
-
/* @__PURE__ */
|
|
1591
|
-
/* @__PURE__ */
|
|
1683
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1684
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Shadow Style", htmlFor: "shadowStyle" }),
|
|
1685
|
+
/* @__PURE__ */ jsx3(
|
|
1592
1686
|
"select",
|
|
1593
1687
|
{
|
|
1594
1688
|
id: "shadowStyle",
|
|
@@ -1598,13 +1692,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1598
1692
|
e.target.value
|
|
1599
1693
|
),
|
|
1600
1694
|
style: SELECT_STYLE2,
|
|
1601
|
-
children: SHADOW_STYLE_OPTIONS.map((o) => /* @__PURE__ */
|
|
1695
|
+
children: SHADOW_STYLE_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value))
|
|
1602
1696
|
}
|
|
1603
1697
|
)
|
|
1604
1698
|
] }) }),
|
|
1605
|
-
/* @__PURE__ */
|
|
1606
|
-
/* @__PURE__ */
|
|
1607
|
-
/* @__PURE__ */
|
|
1699
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1700
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Surface Blur", htmlFor: "surfaceBlur" }),
|
|
1701
|
+
/* @__PURE__ */ jsx3(
|
|
1608
1702
|
"select",
|
|
1609
1703
|
{
|
|
1610
1704
|
id: "surfaceBlur",
|
|
@@ -1614,13 +1708,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1614
1708
|
e.target.value
|
|
1615
1709
|
),
|
|
1616
1710
|
style: SELECT_STYLE2,
|
|
1617
|
-
children: SURFACE_BLUR_OPTIONS.map((o) => /* @__PURE__ */
|
|
1711
|
+
children: SURFACE_BLUR_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value))
|
|
1618
1712
|
}
|
|
1619
1713
|
)
|
|
1620
1714
|
] }) }),
|
|
1621
|
-
/* @__PURE__ */
|
|
1622
|
-
/* @__PURE__ */
|
|
1623
|
-
/* @__PURE__ */
|
|
1715
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1716
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Surface Opacity", htmlFor: "surfaceOpacity" }),
|
|
1717
|
+
/* @__PURE__ */ jsx3(
|
|
1624
1718
|
NumberInput,
|
|
1625
1719
|
{
|
|
1626
1720
|
id: "surfaceOpacity",
|
|
@@ -1633,9 +1727,9 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1633
1727
|
}
|
|
1634
1728
|
)
|
|
1635
1729
|
] }) }),
|
|
1636
|
-
/* @__PURE__ */
|
|
1637
|
-
/* @__PURE__ */
|
|
1638
|
-
/* @__PURE__ */
|
|
1730
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1731
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Border Style", htmlFor: "borderStyle" }),
|
|
1732
|
+
/* @__PURE__ */ jsx3(
|
|
1639
1733
|
"select",
|
|
1640
1734
|
{
|
|
1641
1735
|
id: "borderStyle",
|
|
@@ -1645,13 +1739,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1645
1739
|
e.target.value
|
|
1646
1740
|
),
|
|
1647
1741
|
style: SELECT_STYLE2,
|
|
1648
|
-
children: BORDER_STYLE_OPTIONS.map((o) => /* @__PURE__ */
|
|
1742
|
+
children: BORDER_STYLE_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value))
|
|
1649
1743
|
}
|
|
1650
1744
|
)
|
|
1651
1745
|
] }) }),
|
|
1652
|
-
/* @__PURE__ */
|
|
1653
|
-
/* @__PURE__ */
|
|
1654
|
-
/* @__PURE__ */
|
|
1746
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1747
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Background Style", htmlFor: "backgroundStyle" }),
|
|
1748
|
+
/* @__PURE__ */ jsx3(
|
|
1655
1749
|
"select",
|
|
1656
1750
|
{
|
|
1657
1751
|
id: "backgroundStyle",
|
|
@@ -1661,14 +1755,14 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1661
1755
|
e.target.value
|
|
1662
1756
|
),
|
|
1663
1757
|
style: SELECT_STYLE2,
|
|
1664
|
-
children: BACKGROUND_STYLE_OPTIONS.map((o) => /* @__PURE__ */
|
|
1758
|
+
children: BACKGROUND_STYLE_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value))
|
|
1665
1759
|
}
|
|
1666
1760
|
)
|
|
1667
1761
|
] }) })
|
|
1668
1762
|
]
|
|
1669
1763
|
}
|
|
1670
1764
|
),
|
|
1671
|
-
/* @__PURE__ */
|
|
1765
|
+
/* @__PURE__ */ jsx3(Text.Headline, { as: "h2", children: "Typography (weight & transform)" }),
|
|
1672
1766
|
/* @__PURE__ */ jsxs2(
|
|
1673
1767
|
Grid,
|
|
1674
1768
|
{
|
|
@@ -1676,9 +1770,9 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1676
1770
|
gridAutoColumns: "1fr",
|
|
1677
1771
|
gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
|
1678
1772
|
children: [
|
|
1679
|
-
/* @__PURE__ */
|
|
1680
|
-
/* @__PURE__ */
|
|
1681
|
-
/* @__PURE__ */
|
|
1773
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1774
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Font Weight Base", htmlFor: "fontWeightBase" }),
|
|
1775
|
+
/* @__PURE__ */ jsx3(
|
|
1682
1776
|
"select",
|
|
1683
1777
|
{
|
|
1684
1778
|
id: "fontWeightBase",
|
|
@@ -1688,13 +1782,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1688
1782
|
e.target.value
|
|
1689
1783
|
),
|
|
1690
1784
|
style: SELECT_STYLE2,
|
|
1691
|
-
children: FONT_WEIGHT_BASE_OPTIONS.map((o) => /* @__PURE__ */
|
|
1785
|
+
children: FONT_WEIGHT_BASE_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value))
|
|
1692
1786
|
}
|
|
1693
1787
|
)
|
|
1694
1788
|
] }) }),
|
|
1695
|
-
/* @__PURE__ */
|
|
1696
|
-
/* @__PURE__ */
|
|
1697
|
-
/* @__PURE__ */
|
|
1789
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1790
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Font Weight Heading", htmlFor: "fontWeightHeading" }),
|
|
1791
|
+
/* @__PURE__ */ jsx3(
|
|
1698
1792
|
"select",
|
|
1699
1793
|
{
|
|
1700
1794
|
id: "fontWeightHeading",
|
|
@@ -1704,13 +1798,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1704
1798
|
e.target.value
|
|
1705
1799
|
),
|
|
1706
1800
|
style: SELECT_STYLE2,
|
|
1707
|
-
children: FONT_WEIGHT_HEADING_OPTIONS.map((o) => /* @__PURE__ */
|
|
1801
|
+
children: FONT_WEIGHT_HEADING_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value))
|
|
1708
1802
|
}
|
|
1709
1803
|
)
|
|
1710
1804
|
] }) }),
|
|
1711
|
-
/* @__PURE__ */
|
|
1712
|
-
/* @__PURE__ */
|
|
1713
|
-
/* @__PURE__ */
|
|
1805
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1806
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Letter Spacing", htmlFor: "letterSpacing" }),
|
|
1807
|
+
/* @__PURE__ */ jsx3(
|
|
1714
1808
|
"select",
|
|
1715
1809
|
{
|
|
1716
1810
|
id: "letterSpacing",
|
|
@@ -1720,13 +1814,13 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1720
1814
|
e.target.value
|
|
1721
1815
|
),
|
|
1722
1816
|
style: SELECT_STYLE2,
|
|
1723
|
-
children: LETTER_SPACING_OPTIONS.map((o) => /* @__PURE__ */
|
|
1817
|
+
children: LETTER_SPACING_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value))
|
|
1724
1818
|
}
|
|
1725
1819
|
)
|
|
1726
1820
|
] }) }),
|
|
1727
|
-
/* @__PURE__ */
|
|
1728
|
-
/* @__PURE__ */
|
|
1729
|
-
/* @__PURE__ */
|
|
1821
|
+
/* @__PURE__ */ jsx3(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1822
|
+
/* @__PURE__ */ jsx3(FieldLabel, { title: "Text Transform", htmlFor: "textTransform" }),
|
|
1823
|
+
/* @__PURE__ */ jsx3(
|
|
1730
1824
|
"select",
|
|
1731
1825
|
{
|
|
1732
1826
|
id: "textTransform",
|
|
@@ -1736,23 +1830,23 @@ var ThemeEditorInner = ({ backButton }) => {
|
|
|
1736
1830
|
e.target.value
|
|
1737
1831
|
),
|
|
1738
1832
|
style: SELECT_STYLE2,
|
|
1739
|
-
children: TEXT_TRANSFORM_OPTIONS.map((o) => /* @__PURE__ */
|
|
1833
|
+
children: TEXT_TRANSFORM_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value))
|
|
1740
1834
|
}
|
|
1741
1835
|
)
|
|
1742
1836
|
] }) })
|
|
1743
1837
|
]
|
|
1744
1838
|
}
|
|
1745
1839
|
),
|
|
1746
|
-
/* @__PURE__ */ jsxs2(
|
|
1747
|
-
/* @__PURE__ */
|
|
1748
|
-
|
|
1840
|
+
/* @__PURE__ */ jsxs2(Spacings.Inline, { children: [
|
|
1841
|
+
/* @__PURE__ */ jsx3(
|
|
1842
|
+
PrimaryButton,
|
|
1749
1843
|
{
|
|
1750
1844
|
label: saving ? "Saving\u2026" : "Save",
|
|
1751
1845
|
onClick: handleSave,
|
|
1752
1846
|
isDisabled: saving
|
|
1753
1847
|
}
|
|
1754
1848
|
),
|
|
1755
|
-
/* @__PURE__ */
|
|
1849
|
+
/* @__PURE__ */ jsx3(
|
|
1756
1850
|
SecondaryButton,
|
|
1757
1851
|
{
|
|
1758
1852
|
label: "Reset to default",
|
|
@@ -1772,14 +1866,14 @@ var ThemeManager = ({
|
|
|
1772
1866
|
businessUnitKey,
|
|
1773
1867
|
jwtToken,
|
|
1774
1868
|
...innerProps
|
|
1775
|
-
}) => /* @__PURE__ */
|
|
1869
|
+
}) => /* @__PURE__ */ jsx3(
|
|
1776
1870
|
PuckApiProvider,
|
|
1777
1871
|
{
|
|
1778
1872
|
baseURL,
|
|
1779
1873
|
projectKey,
|
|
1780
1874
|
businessUnitKey,
|
|
1781
1875
|
jwtToken,
|
|
1782
|
-
children: /* @__PURE__ */
|
|
1876
|
+
children: /* @__PURE__ */ jsx3(EnsureNimbusProvider, { children: /* @__PURE__ */ jsx3(ThemeEditorInner, { ...innerProps }) })
|
|
1783
1877
|
}
|
|
1784
1878
|
);
|
|
1785
1879
|
var theme_editor_default = ThemeManager;
|
|
@@ -1788,12 +1882,8 @@ var theme_editor_default = ThemeManager;
|
|
|
1788
1882
|
import { useState as useState3, useCallback as useCallback2 } from "react";
|
|
1789
1883
|
import { useHistory as useHistory2 } from "react-router-dom";
|
|
1790
1884
|
import { PuckApiProvider as PuckApiProvider2, usePuckContentType } from "@commercetools-demo/puck-api";
|
|
1791
|
-
import Card2 from "@commercetools
|
|
1792
|
-
import
|
|
1793
|
-
import PrimaryButton3 from "@commercetools-uikit/primary-button";
|
|
1794
|
-
import Spacings3 from "@commercetools-uikit/spacings";
|
|
1795
|
-
import Text2 from "@commercetools-uikit/text";
|
|
1796
|
-
import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1885
|
+
import { Button as Button3, Card as Card2, Stack as Stack3, Text as Text2 } from "@commercetools/nimbus";
|
|
1886
|
+
import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1797
1887
|
var ImportContentTypesInner = ({ backButton }) => {
|
|
1798
1888
|
const history = useHistory2();
|
|
1799
1889
|
const { importDefaultContentTypes, loading, error, clearError } = usePuckContentType();
|
|
@@ -1814,55 +1904,43 @@ var ImportContentTypesInner = ({ backButton }) => {
|
|
|
1814
1904
|
} catch {
|
|
1815
1905
|
}
|
|
1816
1906
|
}, [importDefaultContentTypes, clearError]);
|
|
1817
|
-
return /* @__PURE__ */ jsxs3(
|
|
1818
|
-
backButton && /* @__PURE__ */
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
}
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
/* @__PURE__ */
|
|
1829
|
-
|
|
1830
|
-
/* @__PURE__ */
|
|
1831
|
-
/* @__PURE__ */
|
|
1832
|
-
] }) }),
|
|
1833
|
-
/* @__PURE__ */ jsx3(Spacings3.Inline, { scale: "m", justifyContent: "center", children: /* @__PURE__ */ jsx3(
|
|
1834
|
-
PrimaryButton3,
|
|
1835
|
-
{
|
|
1836
|
-
label: loading ? "Importing\u2026" : "Import default content types",
|
|
1837
|
-
onClick: handleImport,
|
|
1838
|
-
isDisabled: loading
|
|
1839
|
-
}
|
|
1840
|
-
) }),
|
|
1841
|
-
result && /* @__PURE__ */ jsx3(Card2, { children: /* @__PURE__ */ jsxs3(Spacings3.Stack, { scale: "m", children: [
|
|
1842
|
-
/* @__PURE__ */ jsx3(Text2.Headline, { as: "h2", children: "Result" }),
|
|
1843
|
-
/* @__PURE__ */ jsxs3(Text2.Body, { children: [
|
|
1907
|
+
return /* @__PURE__ */ jsxs3(Stack3, { direction: "column", gap: "600", children: [
|
|
1908
|
+
backButton && /* @__PURE__ */ jsxs3(Button3, { variant: "ghost", onPress: handleBack, children: [
|
|
1909
|
+
backButton.icon,
|
|
1910
|
+
backButton.label
|
|
1911
|
+
] }),
|
|
1912
|
+
/* @__PURE__ */ jsx4(Text2, { as: "h1", fontSize: "2xl", fontWeight: "700", children: "Import default content types" }),
|
|
1913
|
+
/* @__PURE__ */ jsx4(Text2, { color: "neutral.11", children: "Import default content type definitions from samples. Existing content types with the same key may be skipped or cause errors." }),
|
|
1914
|
+
error && /* @__PURE__ */ jsx4(Card2.Root, { variant: "outlined", children: /* @__PURE__ */ jsx4(Card2.Body, { children: /* @__PURE__ */ jsxs3(Stack3, { direction: "column", gap: "400", children: [
|
|
1915
|
+
/* @__PURE__ */ jsx4(Text2, { as: "h2", fontSize: "xl", fontWeight: "700", children: "Error" }),
|
|
1916
|
+
/* @__PURE__ */ jsx4(Text2, { color: "critical.11", children: error })
|
|
1917
|
+
] }) }) }),
|
|
1918
|
+
/* @__PURE__ */ jsx4(Stack3, { direction: "row", gap: "400", justifyContent: "center", children: /* @__PURE__ */ jsx4(Button3, { variant: "solid", onPress: handleImport, isDisabled: loading, children: loading ? "Importing\u2026" : "Import default content types" }) }),
|
|
1919
|
+
result && /* @__PURE__ */ jsx4(Card2.Root, { variant: "outlined", children: /* @__PURE__ */ jsx4(Card2.Body, { children: /* @__PURE__ */ jsxs3(Stack3, { direction: "column", gap: "400", children: [
|
|
1920
|
+
/* @__PURE__ */ jsx4(Text2, { as: "h2", fontSize: "xl", fontWeight: "700", children: "Result" }),
|
|
1921
|
+
/* @__PURE__ */ jsxs3(Text2, { children: [
|
|
1844
1922
|
"Imported: ",
|
|
1845
1923
|
result.imported.length,
|
|
1846
1924
|
" content type",
|
|
1847
1925
|
result.imported.length !== 1 ? "s" : "",
|
|
1848
1926
|
"."
|
|
1849
1927
|
] }),
|
|
1850
|
-
result.imported.length > 0 && /* @__PURE__ */
|
|
1928
|
+
result.imported.length > 0 && /* @__PURE__ */ jsx4(Text2, { color: "neutral.11", children: result.imported.join(", ") }),
|
|
1851
1929
|
result.failed.length > 0 && /* @__PURE__ */ jsxs3(Fragment, { children: [
|
|
1852
|
-
/* @__PURE__ */ jsxs3(Text2
|
|
1930
|
+
/* @__PURE__ */ jsxs3(Text2, { color: "critical.11", children: [
|
|
1853
1931
|
"Failed: ",
|
|
1854
1932
|
result.failed.length,
|
|
1855
1933
|
" content type",
|
|
1856
1934
|
result.failed.length !== 1 ? "s" : "",
|
|
1857
1935
|
"."
|
|
1858
1936
|
] }),
|
|
1859
|
-
/* @__PURE__ */
|
|
1937
|
+
/* @__PURE__ */ jsx4(Stack3, { direction: "column", gap: "200", children: result.failed.map(({ key, error: err }) => /* @__PURE__ */ jsxs3(Text2, { color: "critical.11", children: [
|
|
1860
1938
|
key,
|
|
1861
1939
|
": ",
|
|
1862
1940
|
err
|
|
1863
1941
|
] }, key)) })
|
|
1864
1942
|
] })
|
|
1865
|
-
] }) })
|
|
1943
|
+
] }) }) })
|
|
1866
1944
|
] });
|
|
1867
1945
|
};
|
|
1868
1946
|
var ImportContentTypes = ({
|
|
@@ -1871,14 +1949,14 @@ var ImportContentTypes = ({
|
|
|
1871
1949
|
businessUnitKey,
|
|
1872
1950
|
jwtToken,
|
|
1873
1951
|
...innerProps
|
|
1874
|
-
}) => /* @__PURE__ */
|
|
1952
|
+
}) => /* @__PURE__ */ jsx4(
|
|
1875
1953
|
PuckApiProvider2,
|
|
1876
1954
|
{
|
|
1877
1955
|
baseURL,
|
|
1878
1956
|
projectKey,
|
|
1879
1957
|
businessUnitKey,
|
|
1880
1958
|
jwtToken,
|
|
1881
|
-
children: /* @__PURE__ */
|
|
1959
|
+
children: /* @__PURE__ */ jsx4(EnsureNimbusProvider, { children: /* @__PURE__ */ jsx4(ImportContentTypesInner, { ...innerProps }) })
|
|
1882
1960
|
}
|
|
1883
1961
|
);
|
|
1884
1962
|
var import_content_types_default = ImportContentTypes;
|