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