@arcanejs/toolkit-frontend 0.4.0 → 0.5.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/{chunk-XEIKOLS2.js → chunk-7VTNOX5O.js} +30 -2
- package/dist/{chunk-6Z2ACPNM.mjs → chunk-BQS6YM6U.mjs} +75 -14
- package/dist/{chunk-35U577MM.mjs → chunk-E7JSREGM.mjs} +29 -1
- package/dist/{chunk-UJVH3PQF.mjs → chunk-MESQQRK3.mjs} +2 -4
- package/dist/{chunk-KNYDA6D6.js → chunk-T3QSZARM.js} +3 -5
- package/dist/{chunk-Y5UYS6EX.js → chunk-WVMAJYGI.js} +73 -12
- package/dist/components/core/index.js +3 -4
- package/dist/components/core/index.mjs +2 -3
- package/dist/components/index.js +90 -96
- package/dist/components/index.mjs +62 -68
- package/dist/styling.d.mts +23 -3
- package/dist/styling.d.ts +23 -3
- package/dist/styling.js +7 -3
- package/dist/styling.mjs +8 -4
- package/dist/util/index.d.mts +2 -1
- package/dist/util/index.d.ts +2 -1
- package/dist/util/index.js +4 -3
- package/dist/util/index.mjs +3 -2
- package/package.json +2 -2
- package/dist/chunk-7P6ASYW6.mjs +0 -9
- package/dist/chunk-MLKGABMK.js +0 -9
|
@@ -2,9 +2,8 @@ import {
|
|
|
2
2
|
Icon,
|
|
3
3
|
TRANSPARENCY_SVG_URI,
|
|
4
4
|
core_exports
|
|
5
|
-
} from "../chunk-
|
|
5
|
+
} from "../chunk-MESQQRK3.mjs";
|
|
6
6
|
import {
|
|
7
|
-
THEME,
|
|
8
7
|
buttonPressed,
|
|
9
8
|
buttonStateNormal,
|
|
10
9
|
buttonStateNormalActive,
|
|
@@ -12,13 +11,12 @@ import {
|
|
|
12
11
|
rectButton,
|
|
13
12
|
touchIndicatorNormal,
|
|
14
13
|
touchIndicatorTouching
|
|
15
|
-
} from "../chunk-
|
|
14
|
+
} from "../chunk-BQS6YM6U.mjs";
|
|
16
15
|
import {
|
|
17
16
|
calculateClass,
|
|
18
17
|
trackTouch,
|
|
19
18
|
usePressable
|
|
20
|
-
} from "../chunk-
|
|
21
|
-
import "../chunk-7P6ASYW6.mjs";
|
|
19
|
+
} from "../chunk-E7JSREGM.mjs";
|
|
22
20
|
|
|
23
21
|
// src/components/index.tsx
|
|
24
22
|
import { isCoreComponent } from "@arcanejs/protocol/core";
|
|
@@ -98,8 +96,8 @@ var StyledButton = styled(Button)`
|
|
|
98
96
|
}
|
|
99
97
|
|
|
100
98
|
&.${ERROR_CLASS} {
|
|
101
|
-
color: ${
|
|
102
|
-
border-color: ${
|
|
99
|
+
color: ${(p) => p.theme.colorRed};
|
|
100
|
+
border-color: ${(p) => p.theme.colorRed};
|
|
103
101
|
}
|
|
104
102
|
|
|
105
103
|
&.${TOUCHING_CLASS} {
|
|
@@ -139,19 +137,19 @@ var NestedContent = ({ className, children }) => {
|
|
|
139
137
|
};
|
|
140
138
|
NestedContent.displayName = "NestedContent";
|
|
141
139
|
var StyledNestedContent = styled2(NestedContent)`
|
|
142
|
-
padding: ${
|
|
143
|
-
box-shadow:
|
|
140
|
+
padding: ${(p) => p.theme.sizingPx.spacing / 2}px;
|
|
141
|
+
box-shadow: ${(p) => p.theme.shadows.boxShadowInset};
|
|
144
142
|
|
|
145
143
|
&.color-dark {
|
|
146
|
-
background: ${
|
|
144
|
+
background: ${(p) => p.theme.bgDark1};
|
|
147
145
|
}
|
|
148
146
|
|
|
149
147
|
&.color-lighter {
|
|
150
|
-
background: ${
|
|
148
|
+
background: ${(p) => p.theme.bg};
|
|
151
149
|
}
|
|
152
150
|
|
|
153
151
|
&.color-lighterer {
|
|
154
|
-
background: ${
|
|
152
|
+
background: ${(p) => p.theme.bgLight1};
|
|
155
153
|
}
|
|
156
154
|
`;
|
|
157
155
|
|
|
@@ -164,11 +162,11 @@ var Header = styled3.div`
|
|
|
164
162
|
display: flex;
|
|
165
163
|
align-items: center;
|
|
166
164
|
padding: 5px 2px;
|
|
167
|
-
background: ${
|
|
168
|
-
border-bottom: 1px solid ${
|
|
165
|
+
background: ${(p) => p.theme.borderDark};
|
|
166
|
+
border-bottom: 1px solid ${(p) => p.theme.borderDark};
|
|
169
167
|
|
|
170
168
|
&.touching {
|
|
171
|
-
background: ${
|
|
169
|
+
background: ${(p) => p.theme.bgDark1};
|
|
172
170
|
}
|
|
173
171
|
|
|
174
172
|
&.collapsed {
|
|
@@ -182,8 +180,8 @@ var Header = styled3.div`
|
|
|
182
180
|
var Label = styled3.span`
|
|
183
181
|
display: inline-block;
|
|
184
182
|
border-radius: 3px;
|
|
185
|
-
background: ${
|
|
186
|
-
border: 1px solid ${
|
|
183
|
+
background: ${(p) => p.theme.bg};
|
|
184
|
+
border: 1px solid ${(p) => p.theme.bgLight1};
|
|
187
185
|
padding: 3px 4px;
|
|
188
186
|
`;
|
|
189
187
|
var Grow = styled3.span({
|
|
@@ -201,7 +199,7 @@ var GroupChildren = styled3.div`
|
|
|
201
199
|
${(p) => p.info.direction === "vertical" ? "" : "align-items: center;"}
|
|
202
200
|
|
|
203
201
|
> * {
|
|
204
|
-
margin: ${
|
|
202
|
+
margin: ${(p) => p.theme.sizingPx.spacing / 2}px;
|
|
205
203
|
}
|
|
206
204
|
`;
|
|
207
205
|
var EditableTitle = styled3.span`
|
|
@@ -216,14 +214,14 @@ var EditableTitle = styled3.span`
|
|
|
216
214
|
}
|
|
217
215
|
|
|
218
216
|
> .icon {
|
|
219
|
-
color: ${
|
|
217
|
+
color: ${(p) => p.theme.textMuted};
|
|
220
218
|
}
|
|
221
219
|
|
|
222
220
|
&:hover {
|
|
223
|
-
background: ${
|
|
221
|
+
background: ${(p) => p.theme.bg};
|
|
224
222
|
|
|
225
223
|
> .icon {
|
|
226
|
-
color: ${
|
|
224
|
+
color: ${(p) => p.theme.hint};
|
|
227
225
|
}
|
|
228
226
|
}
|
|
229
227
|
`;
|
|
@@ -231,7 +229,7 @@ var TitleInput = styled3.input`
|
|
|
231
229
|
background: none;
|
|
232
230
|
border: none;
|
|
233
231
|
outline: none;
|
|
234
|
-
color: ${
|
|
232
|
+
color: ${(p) => p.theme.textNormal};
|
|
235
233
|
`;
|
|
236
234
|
var GroupStateContext = React3.createContext({
|
|
237
235
|
isCollapsed: () => {
|
|
@@ -335,12 +333,12 @@ var Group = ({ className, info }) => {
|
|
|
335
333
|
};
|
|
336
334
|
Group.displayName = "Group";
|
|
337
335
|
var StyledGroup = styled3(Group)`
|
|
338
|
-
border: 1px solid ${
|
|
336
|
+
border: 1px solid ${(p) => p.theme.borderDark};
|
|
339
337
|
|
|
340
338
|
> .title {
|
|
341
339
|
padding: 5px;
|
|
342
|
-
background: ${
|
|
343
|
-
border-bottom: 1px solid ${
|
|
340
|
+
background: ${(p) => p.theme.borderDark};
|
|
341
|
+
border-bottom: 1px solid ${(p) => p.theme.borderDark};
|
|
344
342
|
}
|
|
345
343
|
|
|
346
344
|
&.no-border {
|
|
@@ -370,7 +368,7 @@ var Wrapper = styled5.div`
|
|
|
370
368
|
background: url('${TRANSPARENCY_SVG_URI}');
|
|
371
369
|
background-repeat: repeat;
|
|
372
370
|
background-size: 10px;
|
|
373
|
-
border: 1px solid ${
|
|
371
|
+
border: 1px solid ${(p) => p.theme.borderDark};
|
|
374
372
|
|
|
375
373
|
&.${CLS_GROW} {
|
|
376
374
|
flex-grow: 1;
|
|
@@ -586,11 +584,11 @@ var StyledSliderButton = styled6(SliderButton)`
|
|
|
586
584
|
cursor: pointer;
|
|
587
585
|
transition: all 200ms;
|
|
588
586
|
border-radius: 3px;
|
|
589
|
-
border: 1px solid ${
|
|
587
|
+
border: 1px solid ${(p) => p.theme.borderDark};
|
|
590
588
|
${buttonStateNormal}
|
|
591
589
|
|
|
592
590
|
> input {
|
|
593
|
-
color: ${
|
|
591
|
+
color: ${(p) => p.theme.textNormal};
|
|
594
592
|
opacity: 0;
|
|
595
593
|
margin: 0 -9px;
|
|
596
594
|
padding: 6px 8px;
|
|
@@ -598,22 +596,22 @@ var StyledSliderButton = styled6(SliderButton)`
|
|
|
598
596
|
pointer-events: none;
|
|
599
597
|
transition: all 200ms;
|
|
600
598
|
border-radius: 3px;
|
|
601
|
-
background: ${
|
|
602
|
-
border: 1px solid ${
|
|
599
|
+
background: ${(p) => p.theme.bgDark1};
|
|
600
|
+
border: 1px solid ${(p) => p.theme.borderDark};
|
|
603
601
|
overflow: hidden;
|
|
604
|
-
box-shadow:
|
|
602
|
+
box-shadow: ${(p) => p.theme.shadows.boxShadowInset};
|
|
605
603
|
}
|
|
606
604
|
|
|
607
605
|
> .${CLASS_SLIDER_DISPLAY} {
|
|
608
606
|
flex-grow: 1;
|
|
609
607
|
margin: 0 ${SLIDER_PADDING / 2}px;
|
|
610
608
|
height: 4px;
|
|
611
|
-
background: ${
|
|
612
|
-
border: 1px solid ${
|
|
609
|
+
background: ${(p) => p.theme.bgDark1};
|
|
610
|
+
border: 1px solid ${(p) => p.theme.borderDark};
|
|
613
611
|
|
|
614
612
|
> .inner {
|
|
615
613
|
height: 100%;
|
|
616
|
-
background: ${
|
|
614
|
+
background: ${(p) => p.theme.hint};
|
|
617
615
|
}
|
|
618
616
|
|
|
619
617
|
&.${CLASS_GRADIENT} {
|
|
@@ -622,7 +620,7 @@ var StyledSliderButton = styled6(SliderButton)`
|
|
|
622
620
|
> .inner {
|
|
623
621
|
position: relative;
|
|
624
622
|
background: none;
|
|
625
|
-
border-right: 2px solid ${
|
|
623
|
+
border-right: 2px solid ${(p) => p.theme.borderDark};
|
|
626
624
|
|
|
627
625
|
&::before {
|
|
628
626
|
content: '';
|
|
@@ -631,7 +629,7 @@ var StyledSliderButton = styled6(SliderButton)`
|
|
|
631
629
|
top: -5px;
|
|
632
630
|
bottom: -5px;
|
|
633
631
|
right: -3px;
|
|
634
|
-
background: ${
|
|
632
|
+
background: ${(p) => p.theme.borderDark};
|
|
635
633
|
}
|
|
636
634
|
|
|
637
635
|
&::after {
|
|
@@ -641,7 +639,7 @@ var StyledSliderButton = styled6(SliderButton)`
|
|
|
641
639
|
top: -4px;
|
|
642
640
|
bottom: -4px;
|
|
643
641
|
right: -2px;
|
|
644
|
-
background: ${
|
|
642
|
+
background: ${(p) => p.theme.textNormal};
|
|
645
643
|
}
|
|
646
644
|
}
|
|
647
645
|
}
|
|
@@ -681,7 +679,7 @@ var StyledSliderButton = styled6(SliderButton)`
|
|
|
681
679
|
z-index: 100;
|
|
682
680
|
|
|
683
681
|
.inner {
|
|
684
|
-
background: ${
|
|
682
|
+
background: ${(p) => p.theme.bgDark1};
|
|
685
683
|
width: ${OPEN_SLIDER_WIDTH}px;
|
|
686
684
|
|
|
687
685
|
> .${CLASS_SLIDER_VALUE} {
|
|
@@ -759,7 +757,7 @@ var StyledSwitch = styled7(Switch)`
|
|
|
759
757
|
min-width: ${BUTTON_WIDTH + TEXT_WIDTH}px;
|
|
760
758
|
height: ${SWITCH_HEIGHT}px;
|
|
761
759
|
border-radius: 3px;
|
|
762
|
-
border: 1px solid ${
|
|
760
|
+
border: 1px solid ${(p) => p.theme.borderDark};
|
|
763
761
|
|
|
764
762
|
> .slider {
|
|
765
763
|
position: absolute;
|
|
@@ -781,7 +779,7 @@ var StyledSwitch = styled7(Switch)`
|
|
|
781
779
|
text-align: center;
|
|
782
780
|
top: 0;
|
|
783
781
|
line-height: ${SWITCH_HEIGHT - 2}px;
|
|
784
|
-
text-shadow:
|
|
782
|
+
text-shadow: ${(p) => p.theme.shadows.textShadowActive};
|
|
785
783
|
box-shadow:
|
|
786
784
|
inset 0 1px 2px rgba(0, 0, 0, 0.2),
|
|
787
785
|
0 1px 0 0 rgba(255, 255, 255, 0.15);
|
|
@@ -789,26 +787,22 @@ var StyledSwitch = styled7(Switch)`
|
|
|
789
787
|
|
|
790
788
|
> .on-text {
|
|
791
789
|
left: -40px;
|
|
792
|
-
background:
|
|
793
|
-
to bottom,
|
|
794
|
-
${THEME.hintDark1},
|
|
795
|
-
${THEME.hint}
|
|
796
|
-
);
|
|
790
|
+
background: ${(p) => p.theme.gradients.hintPressed};
|
|
797
791
|
}
|
|
798
792
|
|
|
799
793
|
> .button {
|
|
800
794
|
top: -1px;
|
|
801
795
|
left: -1px;
|
|
802
796
|
width: ${BUTTON_WIDTH}px;
|
|
803
|
-
background:
|
|
804
|
-
text-shadow:
|
|
797
|
+
background: ${(p) => p.theme.gradients.button};
|
|
798
|
+
text-shadow: ${(p) => p.theme.shadows.textShadow};
|
|
805
799
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
|
806
800
|
border-radius: 3px;
|
|
807
|
-
border: 1px solid ${
|
|
801
|
+
border: 1px solid ${(p) => p.theme.borderDark};
|
|
808
802
|
}
|
|
809
803
|
|
|
810
804
|
> .off-text {
|
|
811
|
-
background:
|
|
805
|
+
background: ${(p) => p.theme.gradients.buttonActive};
|
|
812
806
|
left: ${BUTTON_WIDTH - 2}px;
|
|
813
807
|
}
|
|
814
808
|
|
|
@@ -817,7 +811,7 @@ var StyledSwitch = styled7(Switch)`
|
|
|
817
811
|
}
|
|
818
812
|
|
|
819
813
|
&:hover > .button {
|
|
820
|
-
background:
|
|
814
|
+
background: ${(p) => p.theme.gradients.buttonHover};
|
|
821
815
|
}
|
|
822
816
|
}
|
|
823
817
|
}
|
|
@@ -840,37 +834,37 @@ import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
|
840
834
|
var Wrapper2 = styled8.div`
|
|
841
835
|
display: flex;
|
|
842
836
|
flex-direction: column;
|
|
843
|
-
background: ${
|
|
844
|
-
border: 1px solid ${
|
|
837
|
+
background: ${(p) => p.theme.borderDark};
|
|
838
|
+
border: 1px solid ${(p) => p.theme.borderDark};
|
|
845
839
|
`;
|
|
846
840
|
var TabList = styled8.div`
|
|
847
841
|
display: flex;
|
|
848
842
|
flex-direction: row;
|
|
849
|
-
border-bottom: 1px solid ${
|
|
843
|
+
border-bottom: 1px solid ${(p) => p.theme.borderDark};
|
|
850
844
|
`;
|
|
851
845
|
var TabItem = styled8.div`
|
|
852
|
-
height: ${
|
|
846
|
+
height: ${(p) => p.theme.sizingPx.spacing * 3}px;
|
|
853
847
|
display: flex;
|
|
854
848
|
flex-direction: column;
|
|
855
849
|
justify-content: center;
|
|
856
|
-
padding: 0 ${
|
|
850
|
+
padding: 0 ${(p) => p.theme.sizingPx.spacing}px;
|
|
857
851
|
cursor: pointer;
|
|
858
|
-
background: ${
|
|
852
|
+
background: ${(p) => p.theme.bgDark1};
|
|
859
853
|
margin-right: 1px;
|
|
860
854
|
|
|
861
855
|
&:hover,
|
|
862
856
|
&.touching {
|
|
863
|
-
background: ${
|
|
857
|
+
background: ${(p) => p.theme.bgLight1};
|
|
864
858
|
}
|
|
865
859
|
|
|
866
860
|
&.current {
|
|
867
|
-
color: ${
|
|
861
|
+
color: ${(p) => p.theme.hint};
|
|
868
862
|
|
|
869
863
|
&::after {
|
|
870
864
|
content: '';
|
|
871
|
-
border-bottom: 2px solid ${
|
|
865
|
+
border-bottom: 2px solid ${(p) => p.theme.hint};
|
|
872
866
|
display: block;
|
|
873
|
-
margin-top: ${
|
|
867
|
+
margin-top: ${(p) => p.theme.sizingPx.spacing / 2}px;
|
|
874
868
|
}
|
|
875
869
|
}
|
|
876
870
|
`;
|
|
@@ -938,12 +932,12 @@ var StyledTextInput = styled9(TextInput)`
|
|
|
938
932
|
box-sizing: border-box;
|
|
939
933
|
padding: 6px 8px;
|
|
940
934
|
border-radius: 3px;
|
|
941
|
-
background: ${
|
|
942
|
-
border: 1px solid ${
|
|
935
|
+
background: ${(p) => p.theme.bgDark1};
|
|
936
|
+
border: 1px solid ${(p) => p.theme.borderDark};
|
|
943
937
|
overflow: hidden;
|
|
944
|
-
box-shadow:
|
|
945
|
-
color: ${
|
|
946
|
-
text-shadow:
|
|
938
|
+
box-shadow: ${(p) => p.theme.shadows.boxShadowInset};
|
|
939
|
+
color: ${(p) => p.theme.textNormal};
|
|
940
|
+
text-shadow: ${(p) => p.theme.shadows.textShadow};
|
|
947
941
|
|
|
948
942
|
@media (max-width: 500px) {
|
|
949
943
|
flex-basis: 100%;
|
|
@@ -975,12 +969,12 @@ var IndicatorIcon = styled10(Icon)`
|
|
|
975
969
|
var Bar = styled10.div`
|
|
976
970
|
width: 100%;
|
|
977
971
|
height: 10px;
|
|
978
|
-
border: 1px solid ${
|
|
979
|
-
background: ${
|
|
972
|
+
border: 1px solid ${(p) => p.theme.borderDark};
|
|
973
|
+
background: ${(p) => p.theme.borderDark};
|
|
980
974
|
`;
|
|
981
975
|
var Fill = styled10.div`
|
|
982
976
|
height: 100%;
|
|
983
|
-
background: ${
|
|
977
|
+
background: ${(p) => p.theme.hint};
|
|
984
978
|
`;
|
|
985
979
|
var Title = styled10.div`
|
|
986
980
|
font-size: 1.5em;
|
package/dist/styling.d.mts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { createGlobalStyle, RuleSet } from 'styled-components';
|
|
2
2
|
|
|
3
3
|
declare const GlobalStyle: ReturnType<typeof createGlobalStyle>;
|
|
4
|
-
declare const
|
|
4
|
+
declare const DARK_THEME: {
|
|
5
|
+
pageBg: string;
|
|
5
6
|
colorGreen: string;
|
|
6
7
|
colorRed: string;
|
|
7
8
|
colorAmber: string;
|
|
@@ -16,13 +17,27 @@ declare const THEME: {
|
|
|
16
17
|
hintRGB: string;
|
|
17
18
|
hintDark1: string;
|
|
18
19
|
textNormal: string;
|
|
20
|
+
textActive: string;
|
|
19
21
|
textMuted: string;
|
|
22
|
+
shadows: {
|
|
23
|
+
boxShadowInset: string;
|
|
24
|
+
textShadow: string;
|
|
25
|
+
textShadowActive: string;
|
|
26
|
+
};
|
|
27
|
+
gradients: {
|
|
28
|
+
button: string;
|
|
29
|
+
buttonHover: string;
|
|
30
|
+
buttonActive: string;
|
|
31
|
+
buttonPressedHover: string;
|
|
32
|
+
hintPressed: string;
|
|
33
|
+
};
|
|
20
34
|
sizingPx: {
|
|
21
35
|
spacing: number;
|
|
22
36
|
unitHeight: number;
|
|
23
37
|
};
|
|
24
38
|
};
|
|
25
|
-
type Theme = typeof
|
|
39
|
+
type Theme = typeof DARK_THEME;
|
|
40
|
+
declare const LIGHT_THEME: Theme;
|
|
26
41
|
declare const BaseStyle: ReturnType<typeof createGlobalStyle>;
|
|
27
42
|
declare const buttonStateNormal: RuleSet<object>;
|
|
28
43
|
declare const buttonStateNormalHover: RuleSet<object>;
|
|
@@ -32,5 +47,10 @@ declare const buttonDisabled: RuleSet<object>;
|
|
|
32
47
|
declare const rectButton: RuleSet<object>;
|
|
33
48
|
declare const touchIndicatorNormal: RuleSet<object>;
|
|
34
49
|
declare const touchIndicatorTouching: RuleSet<object>;
|
|
50
|
+
declare const PreferredThemeProvider: React.FC<{
|
|
51
|
+
dark: Theme;
|
|
52
|
+
light: Theme;
|
|
53
|
+
children: React.ReactNode;
|
|
54
|
+
}>;
|
|
35
55
|
|
|
36
|
-
export { BaseStyle, GlobalStyle,
|
|
56
|
+
export { BaseStyle, DARK_THEME, GlobalStyle, LIGHT_THEME, PreferredThemeProvider, type Theme, buttonDisabled, buttonPressed, buttonStateNormal, buttonStateNormalActive, buttonStateNormalHover, rectButton, touchIndicatorNormal, touchIndicatorTouching };
|
package/dist/styling.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { createGlobalStyle, RuleSet } from 'styled-components';
|
|
2
2
|
|
|
3
3
|
declare const GlobalStyle: ReturnType<typeof createGlobalStyle>;
|
|
4
|
-
declare const
|
|
4
|
+
declare const DARK_THEME: {
|
|
5
|
+
pageBg: string;
|
|
5
6
|
colorGreen: string;
|
|
6
7
|
colorRed: string;
|
|
7
8
|
colorAmber: string;
|
|
@@ -16,13 +17,27 @@ declare const THEME: {
|
|
|
16
17
|
hintRGB: string;
|
|
17
18
|
hintDark1: string;
|
|
18
19
|
textNormal: string;
|
|
20
|
+
textActive: string;
|
|
19
21
|
textMuted: string;
|
|
22
|
+
shadows: {
|
|
23
|
+
boxShadowInset: string;
|
|
24
|
+
textShadow: string;
|
|
25
|
+
textShadowActive: string;
|
|
26
|
+
};
|
|
27
|
+
gradients: {
|
|
28
|
+
button: string;
|
|
29
|
+
buttonHover: string;
|
|
30
|
+
buttonActive: string;
|
|
31
|
+
buttonPressedHover: string;
|
|
32
|
+
hintPressed: string;
|
|
33
|
+
};
|
|
20
34
|
sizingPx: {
|
|
21
35
|
spacing: number;
|
|
22
36
|
unitHeight: number;
|
|
23
37
|
};
|
|
24
38
|
};
|
|
25
|
-
type Theme = typeof
|
|
39
|
+
type Theme = typeof DARK_THEME;
|
|
40
|
+
declare const LIGHT_THEME: Theme;
|
|
26
41
|
declare const BaseStyle: ReturnType<typeof createGlobalStyle>;
|
|
27
42
|
declare const buttonStateNormal: RuleSet<object>;
|
|
28
43
|
declare const buttonStateNormalHover: RuleSet<object>;
|
|
@@ -32,5 +47,10 @@ declare const buttonDisabled: RuleSet<object>;
|
|
|
32
47
|
declare const rectButton: RuleSet<object>;
|
|
33
48
|
declare const touchIndicatorNormal: RuleSet<object>;
|
|
34
49
|
declare const touchIndicatorTouching: RuleSet<object>;
|
|
50
|
+
declare const PreferredThemeProvider: React.FC<{
|
|
51
|
+
dark: Theme;
|
|
52
|
+
light: Theme;
|
|
53
|
+
children: React.ReactNode;
|
|
54
|
+
}>;
|
|
35
55
|
|
|
36
|
-
export { BaseStyle, GlobalStyle,
|
|
56
|
+
export { BaseStyle, DARK_THEME, GlobalStyle, LIGHT_THEME, PreferredThemeProvider, type Theme, buttonDisabled, buttonPressed, buttonStateNormal, buttonStateNormalActive, buttonStateNormalHover, rectButton, touchIndicatorNormal, touchIndicatorTouching };
|
package/dist/styling.js
CHANGED
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
var _chunkY5UYS6EXjs = require('./chunk-Y5UYS6EX.js');
|
|
14
|
-
require('./chunk-MLKGABMK.js');
|
|
15
13
|
|
|
16
14
|
|
|
15
|
+
var _chunkWVMAJYGIjs = require('./chunk-WVMAJYGI.js');
|
|
16
|
+
require('./chunk-7VTNOX5O.js');
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
|
|
@@ -24,4 +24,8 @@ require('./chunk-MLKGABMK.js');
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
exports.BaseStyle = _chunkWVMAJYGIjs.BaseStyle; exports.DARK_THEME = _chunkWVMAJYGIjs.DARK_THEME; exports.GlobalStyle = _chunkWVMAJYGIjs.GlobalStyle; exports.LIGHT_THEME = _chunkWVMAJYGIjs.LIGHT_THEME; exports.PreferredThemeProvider = _chunkWVMAJYGIjs.PreferredThemeProvider; exports.buttonDisabled = _chunkWVMAJYGIjs.buttonDisabled; exports.buttonPressed = _chunkWVMAJYGIjs.buttonPressed; exports.buttonStateNormal = _chunkWVMAJYGIjs.buttonStateNormal; exports.buttonStateNormalActive = _chunkWVMAJYGIjs.buttonStateNormalActive; exports.buttonStateNormalHover = _chunkWVMAJYGIjs.buttonStateNormalHover; exports.rectButton = _chunkWVMAJYGIjs.rectButton; exports.touchIndicatorNormal = _chunkWVMAJYGIjs.touchIndicatorNormal; exports.touchIndicatorTouching = _chunkWVMAJYGIjs.touchIndicatorTouching;
|
package/dist/styling.mjs
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
BaseStyle,
|
|
3
|
+
DARK_THEME,
|
|
3
4
|
GlobalStyle,
|
|
4
|
-
|
|
5
|
+
LIGHT_THEME,
|
|
6
|
+
PreferredThemeProvider,
|
|
5
7
|
buttonDisabled,
|
|
6
8
|
buttonPressed,
|
|
7
9
|
buttonStateNormal,
|
|
@@ -10,12 +12,14 @@ import {
|
|
|
10
12
|
rectButton,
|
|
11
13
|
touchIndicatorNormal,
|
|
12
14
|
touchIndicatorTouching
|
|
13
|
-
} from "./chunk-
|
|
14
|
-
import "./chunk-
|
|
15
|
+
} from "./chunk-BQS6YM6U.mjs";
|
|
16
|
+
import "./chunk-E7JSREGM.mjs";
|
|
15
17
|
export {
|
|
16
18
|
BaseStyle,
|
|
19
|
+
DARK_THEME,
|
|
17
20
|
GlobalStyle,
|
|
18
|
-
|
|
21
|
+
LIGHT_THEME,
|
|
22
|
+
PreferredThemeProvider,
|
|
19
23
|
buttonDisabled,
|
|
20
24
|
buttonPressed,
|
|
21
25
|
buttonStateNormal,
|
package/dist/util/index.d.mts
CHANGED
|
@@ -19,5 +19,6 @@ declare function trackTouch(touch: React.Touch, move: (pos: {
|
|
|
19
19
|
}) => void): void;
|
|
20
20
|
|
|
21
21
|
declare const calculateClass: (...args: (string | undefined | null | false)[]) => string;
|
|
22
|
+
declare const usePreferredColorScheme: () => 'dark' | 'light';
|
|
22
23
|
|
|
23
|
-
export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePressable };
|
|
24
|
+
export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePreferredColorScheme, usePressable };
|
package/dist/util/index.d.ts
CHANGED
|
@@ -19,5 +19,6 @@ declare function trackTouch(touch: React.Touch, move: (pos: {
|
|
|
19
19
|
}) => void): void;
|
|
20
20
|
|
|
21
21
|
declare const calculateClass: (...args: (string | undefined | null | false)[]) => string;
|
|
22
|
+
declare const usePreferredColorScheme: () => 'dark' | 'light';
|
|
22
23
|
|
|
23
|
-
export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePressable };
|
|
24
|
+
export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePreferredColorScheme, usePressable };
|
package/dist/util/index.js
CHANGED
|
@@ -5,13 +5,14 @@
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
var _chunkXEIKOLS2js = require('../chunk-XEIKOLS2.js');
|
|
9
|
-
require('../chunk-MLKGABMK.js');
|
|
10
8
|
|
|
9
|
+
var _chunk7VTNOX5Ojs = require('../chunk-7VTNOX5O.js');
|
|
11
10
|
|
|
12
11
|
|
|
13
12
|
|
|
14
13
|
|
|
15
14
|
|
|
16
15
|
|
|
17
|
-
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
exports.calculateClass = _chunk7VTNOX5Ojs.calculateClass; exports.initialiseListeners = _chunk7VTNOX5Ojs.initialiseListeners; exports.switchToMouseMode = _chunk7VTNOX5Ojs.switchToMouseMode; exports.switchToTouchMode = _chunk7VTNOX5Ojs.switchToTouchMode; exports.trackTouch = _chunk7VTNOX5Ojs.trackTouch; exports.usePreferredColorScheme = _chunk7VTNOX5Ojs.usePreferredColorScheme; exports.usePressable = _chunk7VTNOX5Ojs.usePressable;
|
package/dist/util/index.mjs
CHANGED
|
@@ -4,14 +4,15 @@ import {
|
|
|
4
4
|
switchToMouseMode,
|
|
5
5
|
switchToTouchMode,
|
|
6
6
|
trackTouch,
|
|
7
|
+
usePreferredColorScheme,
|
|
7
8
|
usePressable
|
|
8
|
-
} from "../chunk-
|
|
9
|
-
import "../chunk-7P6ASYW6.mjs";
|
|
9
|
+
} from "../chunk-E7JSREGM.mjs";
|
|
10
10
|
export {
|
|
11
11
|
calculateClass,
|
|
12
12
|
initialiseListeners,
|
|
13
13
|
switchToMouseMode,
|
|
14
14
|
switchToTouchMode,
|
|
15
15
|
trackTouch,
|
|
16
|
+
usePreferredColorScheme,
|
|
16
17
|
usePressable
|
|
17
18
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcanejs/toolkit-frontend",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Library of the frontend react components used to render the @arcanejs Toolkit",
|
|
6
6
|
"keywords": [],
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"require": "./dist/components/core/index.js"
|
|
28
28
|
},
|
|
29
29
|
"./styling": {
|
|
30
|
-
"@arcanejs/source": "./src/styling.
|
|
30
|
+
"@arcanejs/source": "./src/styling.tsx",
|
|
31
31
|
"types": "./dist/styling.d.ts",
|
|
32
32
|
"import": "./dist/styling.mjs",
|
|
33
33
|
"require": "./dist/styling.js"
|
package/dist/chunk-7P6ASYW6.mjs
DELETED
package/dist/chunk-MLKGABMK.js
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});var __defProp = Object.defineProperty;
|
|
2
|
-
var __export = (target, all) => {
|
|
3
|
-
for (var name in all)
|
|
4
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
5
|
-
};
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
exports.__export = __export;
|