@impulse-ui-native/theme 2.1.0 → 2.1.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/constants/index.d.mts +10 -0
- package/dist/constants/index.js +2 -0
- package/dist/constants/index.js.map +1 -0
- package/dist/constants/style.constants.d.mts +14 -0
- package/dist/constants/style.constants.js +100 -0
- package/dist/constants/style.constants.js.map +1 -0
- package/dist/hooks/index.d.mts +28 -0
- package/dist/hooks/index.js +19 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/use-border.hook.d.mts +5 -0
- package/dist/hooks/use-border.hook.js +10 -0
- package/dist/hooks/use-border.hook.js.map +1 -0
- package/dist/hooks/use-colors.hook.d.mts +16 -0
- package/dist/hooks/use-colors.hook.js +10 -0
- package/dist/hooks/use-colors.hook.js.map +1 -0
- package/dist/hooks/use-components-tokens.hook.d.mts +16 -0
- package/dist/hooks/use-components-tokens.hook.js +10 -0
- package/dist/hooks/use-components-tokens.hook.js.map +1 -0
- package/dist/hooks/use-radii.hook.d.mts +5 -0
- package/dist/hooks/use-radii.hook.js +10 -0
- package/dist/hooks/use-radii.hook.js.map +1 -0
- package/dist/hooks/use-space.hook.d.mts +5 -0
- package/dist/hooks/use-space.hook.js +10 -0
- package/dist/hooks/use-space.hook.js.map +1 -0
- package/dist/hooks/use-style-props.hook.d.mts +13 -0
- package/dist/hooks/use-style-props.hook.js +10 -0
- package/dist/hooks/use-style-props.hook.js.map +1 -0
- package/dist/hooks/use-theme.hook.d.mts +16 -0
- package/dist/hooks/use-theme.hook.js +8 -0
- package/dist/hooks/use-theme.hook.js.map +1 -0
- package/dist/hooks/use-themed-styles.d.mts +22 -0
- package/dist/hooks/use-themed-styles.js +16 -0
- package/dist/hooks/use-themed-styles.js.map +1 -0
- package/dist/index.d.mts +39 -574
- package/dist/index.js +6 -1069
- package/dist/index.js.map +1 -1
- package/dist/providers/index.d.mts +16 -0
- package/dist/providers/index.js +2 -0
- package/dist/providers/index.js.map +1 -0
- package/dist/providers/theme.provider.d.mts +29 -0
- package/dist/providers/theme.provider.js +35 -0
- package/dist/providers/theme.provider.js.map +1 -0
- package/dist/theme/create-button-tokens.d.mts +16 -0
- package/dist/theme/create-button-tokens.js +78 -0
- package/dist/theme/create-button-tokens.js.map +1 -0
- package/dist/theme/create-control-tokens.d.mts +20 -0
- package/dist/theme/create-control-tokens.js +153 -0
- package/dist/theme/create-control-tokens.js.map +1 -0
- package/dist/theme/create-data-state-tokens.d.mts +16 -0
- package/dist/theme/create-data-state-tokens.js +23 -0
- package/dist/theme/create-data-state-tokens.js.map +1 -0
- package/dist/theme/create-datetime-picker.d.mts +16 -0
- package/dist/theme/create-datetime-picker.js +43 -0
- package/dist/theme/create-datetime-picker.js.map +1 -0
- package/dist/theme/create-flyout-tokens.d.mts +16 -0
- package/dist/theme/create-flyout-tokens.js +27 -0
- package/dist/theme/create-flyout-tokens.js.map +1 -0
- package/dist/theme/create-icon-button-tokens.d.mts +16 -0
- package/dist/theme/create-icon-button-tokens.js +72 -0
- package/dist/theme/create-icon-button-tokens.js.map +1 -0
- package/dist/theme/create-select-tokens.d.mts +16 -0
- package/dist/theme/create-select-tokens.js +14 -0
- package/dist/theme/create-select-tokens.js.map +1 -0
- package/dist/theme/create-skeleton-tokens.d.mts +16 -0
- package/dist/theme/create-skeleton-tokens.js +21 -0
- package/dist/theme/create-skeleton-tokens.js.map +1 -0
- package/dist/theme/create-tag-tokens.d.mts +16 -0
- package/dist/theme/create-tag-tokens.js +102 -0
- package/dist/theme/create-tag-tokens.js.map +1 -0
- package/dist/theme/create-time-picker-tokens.d.mts +16 -0
- package/dist/theme/create-time-picker-tokens.js +40 -0
- package/dist/theme/create-time-picker-tokens.js.map +1 -0
- package/dist/theme/dark.theme.d.mts +16 -0
- package/dist/theme/dark.theme.js +24 -0
- package/dist/theme/dark.theme.js.map +1 -0
- package/dist/theme/index.d.mts +16 -0
- package/dist/theme/index.js +8 -0
- package/dist/theme/index.js.map +1 -0
- package/dist/theme/light.theme.d.mts +16 -0
- package/dist/theme/light.theme.js +24 -0
- package/dist/theme/light.theme.js.map +1 -0
- package/dist/theme/tokens.theme.d.mts +29 -0
- package/dist/theme/tokens.theme.js +257 -0
- package/dist/theme/tokens.theme.js.map +1 -0
- package/dist/types/border.types.d.mts +22 -0
- package/dist/types/border.types.js +1 -0
- package/dist/types/border.types.js.map +1 -0
- package/dist/types/buttons-tokens.types.d.mts +42 -0
- package/dist/types/buttons-tokens.types.js +1 -0
- package/dist/types/buttons-tokens.types.js.map +1 -0
- package/dist/types/chart.types.d.mts +19 -0
- package/dist/types/chart.types.js +1 -0
- package/dist/types/chart.types.js.map +1 -0
- package/dist/types/color.types.d.mts +9 -0
- package/dist/types/color.types.js +1 -0
- package/dist/types/color.types.js.map +1 -0
- package/dist/types/components.types.d.mts +4 -0
- package/dist/types/components.types.js +1 -0
- package/dist/types/components.types.js.map +1 -0
- package/dist/types/control-tokes.types.d.mts +59 -0
- package/dist/types/control-tokes.types.js +1 -0
- package/dist/types/control-tokes.types.js.map +1 -0
- package/dist/types/data-state-tokens.types.d.mts +23 -0
- package/dist/types/data-state-tokens.types.js +1 -0
- package/dist/types/data-state-tokens.types.js.map +1 -0
- package/dist/types/datetime-picker-tokens.types.d.mts +47 -0
- package/dist/types/datetime-picker-tokens.types.js +1 -0
- package/dist/types/datetime-picker-tokens.types.js.map +1 -0
- package/dist/types/dimension.types.d.mts +14 -0
- package/dist/types/dimension.types.js +1 -0
- package/dist/types/dimension.types.js.map +1 -0
- package/dist/types/flex.types.d.mts +25 -0
- package/dist/types/flex.types.js +1 -0
- package/dist/types/flex.types.js.map +1 -0
- package/dist/types/flyout-tokens.types.d.mts +25 -0
- package/dist/types/flyout-tokens.types.js +1 -0
- package/dist/types/flyout-tokens.types.js.map +1 -0
- package/dist/types/index.d.mts +22 -0
- package/dist/types/index.js +22 -0
- package/dist/types/index.js.map +1 -0
- package/dist/types/select-tokens.types.d.mts +11 -0
- package/dist/types/select-tokens.types.js +1 -0
- package/dist/types/select-tokens.types.js.map +1 -0
- package/dist/types/shadow.types.d.mts +20 -0
- package/dist/types/shadow.types.js +1 -0
- package/dist/types/shadow.types.js.map +1 -0
- package/dist/types/skeleton-tokens.types.d.mts +18 -0
- package/dist/types/skeleton-tokens.types.js +1 -0
- package/dist/types/skeleton-tokens.types.js.map +1 -0
- package/dist/types/spacing.types.d.mts +20 -0
- package/dist/types/spacing.types.js +1 -0
- package/dist/types/spacing.types.js.map +1 -0
- package/dist/types/style.types.d.mts +14 -0
- package/dist/types/style.types.js +1 -0
- package/dist/types/style.types.js.map +1 -0
- package/dist/types/tag-tokens.types.d.mts +28 -0
- package/dist/types/tag-tokens.types.js +1 -0
- package/dist/types/tag-tokens.types.js.map +1 -0
- package/dist/types/theme-provider.types.d.mts +90 -0
- package/dist/types/theme-provider.types.js +1 -0
- package/dist/types/theme-provider.types.js.map +1 -0
- package/dist/types/time-picker-token.types.d.mts +34 -0
- package/dist/types/time-picker-token.types.js +1 -0
- package/dist/types/time-picker-token.types.js.map +1 -0
- package/dist/types/tokens.types.d.mts +27 -0
- package/dist/types/tokens.types.js +1 -0
- package/dist/types/tokens.types.js.map +1 -0
- package/dist/types/typography.types.d.mts +23 -0
- package/dist/types/typography.types.js +1 -0
- package/dist/types/typography.types.js.map +1 -0
- package/dist/utils/index.d.mts +22 -0
- package/dist/utils/index.js +2 -0
- package/dist/utils/index.js.map +1 -0
- package/dist/utils/style.utils.d.mts +27 -0
- package/dist/utils/style.utils.js +49 -0
- package/dist/utils/style.utils.js.map +1 -0
- package/package.json +5 -4
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
function createDatetimePickerTokens(tokens) {
|
|
2
|
+
return {
|
|
3
|
+
calendar: {
|
|
4
|
+
dayNamesMarginBottom: tokens.space.msm,
|
|
5
|
+
weeksGap: tokens.space.xxs
|
|
6
|
+
},
|
|
7
|
+
day: {
|
|
8
|
+
size: 40,
|
|
9
|
+
borderRadius: tokens.radii.sm,
|
|
10
|
+
color: tokens.colors.text.primary,
|
|
11
|
+
outsideMonthColor: tokens.colors.neutral["5"],
|
|
12
|
+
selectedBackgroundColor: tokens.colors.primary.value,
|
|
13
|
+
selectedColor: tokens.colors.primary.contrast,
|
|
14
|
+
rangeBackgroundColor: tokens.colors.secondary.value,
|
|
15
|
+
rangeColor: tokens.colors.secondary.contrast
|
|
16
|
+
},
|
|
17
|
+
datePickerFlyout: {
|
|
18
|
+
gap: tokens.space.msm
|
|
19
|
+
},
|
|
20
|
+
datetimePickerFlyout: {
|
|
21
|
+
gap: tokens.space.msm
|
|
22
|
+
},
|
|
23
|
+
datetimeRangePickerFlyout: {
|
|
24
|
+
gap: tokens.space.msm,
|
|
25
|
+
timeInputsGap: tokens.space.xs
|
|
26
|
+
},
|
|
27
|
+
flyoutActions: {
|
|
28
|
+
gap: tokens.space.msm,
|
|
29
|
+
buttonsGap: tokens.space.xs,
|
|
30
|
+
clearColor: tokens.colors.primary.value
|
|
31
|
+
},
|
|
32
|
+
quickDateOptions: {
|
|
33
|
+
gap: tokens.space.xs
|
|
34
|
+
},
|
|
35
|
+
visibleDateSelect: {
|
|
36
|
+
gap: tokens.space.xs
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
export {
|
|
41
|
+
createDatetimePickerTokens
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=create-datetime-picker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-datetime-picker.ts"],"sourcesContent":["import { DatetimePickerTokens, PrimitiveThemeTokens } from \"../types\";\r\n\r\nexport function createDatetimePickerTokens(\r\n tokens: PrimitiveThemeTokens,\r\n): DatetimePickerTokens {\r\n return {\r\n calendar: {\r\n dayNamesMarginBottom: tokens.space.msm,\r\n weeksGap: tokens.space.xxs,\r\n },\r\n day: {\r\n size: 40,\r\n borderRadius: tokens.radii.sm,\r\n\r\n color: tokens.colors.text.primary,\r\n outsideMonthColor: tokens.colors.neutral[\"5\"],\r\n\r\n selectedBackgroundColor: tokens.colors.primary.value,\r\n selectedColor: tokens.colors.primary.contrast,\r\n\r\n rangeBackgroundColor: tokens.colors.secondary.value,\r\n rangeColor: tokens.colors.secondary.contrast,\r\n },\r\n datePickerFlyout: {\r\n gap: tokens.space.msm,\r\n },\r\n datetimePickerFlyout: {\r\n gap: tokens.space.msm,\r\n },\r\n datetimeRangePickerFlyout: {\r\n gap: tokens.space.msm,\r\n timeInputsGap: tokens.space.xs,\r\n },\r\n flyoutActions: {\r\n gap: tokens.space.msm,\r\n buttonsGap: tokens.space.xs,\r\n clearColor: tokens.colors.primary.value,\r\n },\r\n quickDateOptions: {\r\n gap: tokens.space.xs,\r\n },\r\n visibleDateSelect: {\r\n gap: tokens.space.xs,\r\n },\r\n };\r\n}\r\n"],"mappings":"AAEO,SAAS,2BACd,QACsB;AACtB,SAAO;AAAA,IACL,UAAU;AAAA,MACR,sBAAsB,OAAO,MAAM;AAAA,MACnC,UAAU,OAAO,MAAM;AAAA,IACzB;AAAA,IACA,KAAK;AAAA,MACH,MAAM;AAAA,MACN,cAAc,OAAO,MAAM;AAAA,MAE3B,OAAO,OAAO,OAAO,KAAK;AAAA,MAC1B,mBAAmB,OAAO,OAAO,QAAQ,GAAG;AAAA,MAE5C,yBAAyB,OAAO,OAAO,QAAQ;AAAA,MAC/C,eAAe,OAAO,OAAO,QAAQ;AAAA,MAErC,sBAAsB,OAAO,OAAO,UAAU;AAAA,MAC9C,YAAY,OAAO,OAAO,UAAU;AAAA,IACtC;AAAA,IACA,kBAAkB;AAAA,MAChB,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,IACA,sBAAsB;AAAA,MACpB,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,IACA,2BAA2B;AAAA,MACzB,KAAK,OAAO,MAAM;AAAA,MAClB,eAAe,OAAO,MAAM;AAAA,IAC9B;AAAA,IACA,eAAe;AAAA,MACb,KAAK,OAAO,MAAM;AAAA,MAClB,YAAY,OAAO,MAAM;AAAA,MACzB,YAAY,OAAO,OAAO,QAAQ;AAAA,IACpC;AAAA,IACA,kBAAkB;AAAA,MAChB,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,IACA,mBAAmB;AAAA,MACjB,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
|
+
import { FlyoutTokens } from '../types/flyout-tokens.types.mjs';
|
|
3
|
+
import '../types/buttons-tokens.types.mjs';
|
|
4
|
+
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/control-tokes.types.mjs';
|
|
6
|
+
import '../types/data-state-tokens.types.mjs';
|
|
7
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
8
|
+
import '../types/select-tokens.types.mjs';
|
|
9
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
10
|
+
import '../types/tag-tokens.types.mjs';
|
|
11
|
+
import '../types/time-picker-token.types.mjs';
|
|
12
|
+
import '../types/tokens.types.mjs';
|
|
13
|
+
|
|
14
|
+
declare function createFlyoutTokens(tokens: PrimitiveThemeTokens): FlyoutTokens;
|
|
15
|
+
|
|
16
|
+
export { createFlyoutTokens };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
function createFlyoutTokens(tokens) {
|
|
2
|
+
return {
|
|
3
|
+
zIndexBase: 100,
|
|
4
|
+
maxHeightRatio: 0.7,
|
|
5
|
+
overlayColor: tokens.colors.black,
|
|
6
|
+
overlayVisibleOpacity: 0.4,
|
|
7
|
+
backgroundColor: tokens.colors.surface.secondary.value,
|
|
8
|
+
contentPaddingHorizontal: tokens.space.md,
|
|
9
|
+
borderRadius: tokens.radii.xl,
|
|
10
|
+
hiddenOpacity: 0,
|
|
11
|
+
title: {
|
|
12
|
+
paddingVertical: tokens.space.msm,
|
|
13
|
+
paddingHorizontal: tokens.space.md
|
|
14
|
+
},
|
|
15
|
+
handle: {
|
|
16
|
+
containerHeight: 32,
|
|
17
|
+
width: "25%",
|
|
18
|
+
height: 6,
|
|
19
|
+
borderRadius: tokens.radii.round,
|
|
20
|
+
backgroundColor: tokens.colors.surface.primary.value
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
export {
|
|
25
|
+
createFlyoutTokens
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=create-flyout-tokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-flyout-tokens.ts"],"sourcesContent":["import { FlyoutTokens, PrimitiveThemeTokens } from \"../types\";\r\n\r\nexport function createFlyoutTokens(tokens: PrimitiveThemeTokens): FlyoutTokens {\r\n return {\r\n zIndexBase: 100,\r\n\r\n maxHeightRatio: 0.7,\r\n\r\n overlayColor: tokens.colors.black,\r\n overlayVisibleOpacity: 0.4,\r\n\r\n backgroundColor: tokens.colors.surface.secondary.value,\r\n contentPaddingHorizontal: tokens.space.md,\r\n\r\n borderRadius: tokens.radii.xl,\r\n\r\n hiddenOpacity: 0,\r\n\r\n title: {\r\n paddingVertical: tokens.space.msm,\r\n paddingHorizontal: tokens.space.md,\r\n },\r\n\r\n handle: {\r\n containerHeight: 32,\r\n width: \"25%\",\r\n height: 6,\r\n borderRadius: tokens.radii.round,\r\n backgroundColor: tokens.colors.surface.primary.value,\r\n },\r\n };\r\n}\r\n"],"mappings":"AAEO,SAAS,mBAAmB,QAA4C;AAC7E,SAAO;AAAA,IACL,YAAY;AAAA,IAEZ,gBAAgB;AAAA,IAEhB,cAAc,OAAO,OAAO;AAAA,IAC5B,uBAAuB;AAAA,IAEvB,iBAAiB,OAAO,OAAO,QAAQ,UAAU;AAAA,IACjD,0BAA0B,OAAO,MAAM;AAAA,IAEvC,cAAc,OAAO,MAAM;AAAA,IAE3B,eAAe;AAAA,IAEf,OAAO;AAAA,MACL,iBAAiB,OAAO,MAAM;AAAA,MAC9B,mBAAmB,OAAO,MAAM;AAAA,IAClC;AAAA,IAEA,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc,OAAO,MAAM;AAAA,MAC3B,iBAAiB,OAAO,OAAO,QAAQ,QAAQ;AAAA,IACjD;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
|
+
import { IconButtonTokens } from '../types/buttons-tokens.types.mjs';
|
|
3
|
+
import '../types/control-tokes.types.mjs';
|
|
4
|
+
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/data-state-tokens.types.mjs';
|
|
6
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
7
|
+
import '../types/flyout-tokens.types.mjs';
|
|
8
|
+
import '../types/select-tokens.types.mjs';
|
|
9
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
10
|
+
import '../types/tag-tokens.types.mjs';
|
|
11
|
+
import '../types/time-picker-token.types.mjs';
|
|
12
|
+
import '../types/tokens.types.mjs';
|
|
13
|
+
|
|
14
|
+
declare function createIconButtonTokens(tokens: PrimitiveThemeTokens): IconButtonTokens;
|
|
15
|
+
|
|
16
|
+
export { createIconButtonTokens };
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
function createIconButtonTokens(tokens) {
|
|
2
|
+
const primary = tokens.colors.primary.value;
|
|
3
|
+
const primaryContrast = tokens.colors.primary.contrast;
|
|
4
|
+
const secondary = tokens.colors.secondary.value;
|
|
5
|
+
const secondaryContrast = tokens.colors.secondary.contrast;
|
|
6
|
+
const neutral = tokens.colors.neutral;
|
|
7
|
+
const disabledColor = tokens.colors.text.disabled;
|
|
8
|
+
return {
|
|
9
|
+
borderWidth: tokens.borderSize.sm,
|
|
10
|
+
borderRadius: tokens.radii.md,
|
|
11
|
+
sizes: {
|
|
12
|
+
small: {
|
|
13
|
+
size: 32,
|
|
14
|
+
padding: 6
|
|
15
|
+
},
|
|
16
|
+
medium: {
|
|
17
|
+
size: 40,
|
|
18
|
+
padding: 8
|
|
19
|
+
},
|
|
20
|
+
large: {
|
|
21
|
+
size: 48,
|
|
22
|
+
padding: 10
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
variants: {
|
|
26
|
+
filled: {
|
|
27
|
+
backgroundColor: primary,
|
|
28
|
+
borderColor: primary,
|
|
29
|
+
color: primaryContrast,
|
|
30
|
+
disabledBackgroundColor: neutral["5"],
|
|
31
|
+
disabledBorderColor: neutral["5"],
|
|
32
|
+
disabledColor
|
|
33
|
+
},
|
|
34
|
+
outlined: {
|
|
35
|
+
backgroundColor: "transparent",
|
|
36
|
+
borderColor: primary,
|
|
37
|
+
color: primary,
|
|
38
|
+
disabledBackgroundColor: "transparent",
|
|
39
|
+
disabledBorderColor: neutral["5"],
|
|
40
|
+
disabledColor
|
|
41
|
+
},
|
|
42
|
+
soft: {
|
|
43
|
+
backgroundColor: secondary,
|
|
44
|
+
borderColor: secondary,
|
|
45
|
+
color: secondaryContrast,
|
|
46
|
+
disabledBackgroundColor: neutral["3"],
|
|
47
|
+
disabledBorderColor: neutral["3"],
|
|
48
|
+
disabledColor
|
|
49
|
+
},
|
|
50
|
+
ghost: {
|
|
51
|
+
backgroundColor: "transparent",
|
|
52
|
+
borderColor: "transparent",
|
|
53
|
+
color: primary,
|
|
54
|
+
disabledBackgroundColor: "transparent",
|
|
55
|
+
disabledBorderColor: "transparent",
|
|
56
|
+
disabledColor
|
|
57
|
+
},
|
|
58
|
+
plain: {
|
|
59
|
+
backgroundColor: "transparent",
|
|
60
|
+
borderColor: "transparent",
|
|
61
|
+
color: primary,
|
|
62
|
+
disabledBackgroundColor: "transparent",
|
|
63
|
+
disabledBorderColor: "transparent",
|
|
64
|
+
disabledColor
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
export {
|
|
70
|
+
createIconButtonTokens
|
|
71
|
+
};
|
|
72
|
+
//# sourceMappingURL=create-icon-button-tokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-icon-button-tokens.ts"],"sourcesContent":["import { IconButtonTokens, PrimitiveThemeTokens } from \"../types\";\r\n\r\nexport function createIconButtonTokens(\r\n tokens: PrimitiveThemeTokens,\r\n): IconButtonTokens {\r\n const primary = tokens.colors.primary.value;\r\n const primaryContrast = tokens.colors.primary.contrast;\r\n\r\n const secondary = tokens.colors.secondary.value;\r\n const secondaryContrast = tokens.colors.secondary.contrast;\r\n\r\n const neutral = tokens.colors.neutral;\r\n const disabledColor = tokens.colors.text.disabled;\r\n\r\n return {\r\n borderWidth: tokens.borderSize.sm,\r\n borderRadius: tokens.radii.md,\r\n\r\n sizes: {\r\n small: {\r\n size: 32,\r\n padding: 6,\r\n },\r\n medium: {\r\n size: 40,\r\n padding: 8,\r\n },\r\n large: {\r\n size: 48,\r\n padding: 10,\r\n },\r\n },\r\n\r\n variants: {\r\n filled: {\r\n backgroundColor: primary,\r\n borderColor: primary,\r\n color: primaryContrast,\r\n\r\n disabledBackgroundColor: neutral[\"5\"],\r\n disabledBorderColor: neutral[\"5\"],\r\n disabledColor,\r\n },\r\n\r\n outlined: {\r\n backgroundColor: \"transparent\",\r\n borderColor: primary,\r\n color: primary,\r\n\r\n disabledBackgroundColor: \"transparent\",\r\n disabledBorderColor: neutral[\"5\"],\r\n disabledColor,\r\n },\r\n\r\n soft: {\r\n backgroundColor: secondary,\r\n borderColor: secondary,\r\n color: secondaryContrast,\r\n\r\n disabledBackgroundColor: neutral[\"3\"],\r\n disabledBorderColor: neutral[\"3\"],\r\n disabledColor,\r\n },\r\n\r\n ghost: {\r\n backgroundColor: \"transparent\",\r\n borderColor: \"transparent\",\r\n color: primary,\r\n\r\n disabledBackgroundColor: \"transparent\",\r\n disabledBorderColor: \"transparent\",\r\n disabledColor,\r\n },\r\n\r\n plain: {\r\n backgroundColor: \"transparent\",\r\n borderColor: \"transparent\",\r\n color: primary,\r\n\r\n disabledBackgroundColor: \"transparent\",\r\n disabledBorderColor: \"transparent\",\r\n disabledColor,\r\n },\r\n },\r\n };\r\n}\r\n"],"mappings":"AAEO,SAAS,uBACd,QACkB;AAClB,QAAM,UAAU,OAAO,OAAO,QAAQ;AACtC,QAAM,kBAAkB,OAAO,OAAO,QAAQ;AAE9C,QAAM,YAAY,OAAO,OAAO,UAAU;AAC1C,QAAM,oBAAoB,OAAO,OAAO,UAAU;AAElD,QAAM,UAAU,OAAO,OAAO;AAC9B,QAAM,gBAAgB,OAAO,OAAO,KAAK;AAEzC,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,cAAc,OAAO,MAAM;AAAA,IAE3B,OAAO;AAAA,MACL,OAAO;AAAA,QACL,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,QAEP,yBAAyB,QAAQ,GAAG;AAAA,QACpC,qBAAqB,QAAQ,GAAG;AAAA,QAChC;AAAA,MACF;AAAA,MAEA,UAAU;AAAA,QACR,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,QAEP,yBAAyB;AAAA,QACzB,qBAAqB,QAAQ,GAAG;AAAA,QAChC;AAAA,MACF;AAAA,MAEA,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,QAEP,yBAAyB,QAAQ,GAAG;AAAA,QACpC,qBAAqB,QAAQ,GAAG;AAAA,QAChC;AAAA,MACF;AAAA,MAEA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,QAEP,yBAAyB;AAAA,QACzB,qBAAqB;AAAA,QACrB;AAAA,MACF;AAAA,MAEA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,QAEP,yBAAyB;AAAA,QACzB,qBAAqB;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
|
+
import { SelectTokens } from '../types/select-tokens.types.mjs';
|
|
3
|
+
import '../types/buttons-tokens.types.mjs';
|
|
4
|
+
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/control-tokes.types.mjs';
|
|
6
|
+
import '../types/data-state-tokens.types.mjs';
|
|
7
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
8
|
+
import '../types/flyout-tokens.types.mjs';
|
|
9
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
10
|
+
import '../types/tag-tokens.types.mjs';
|
|
11
|
+
import '../types/time-picker-token.types.mjs';
|
|
12
|
+
import '../types/tokens.types.mjs';
|
|
13
|
+
|
|
14
|
+
declare function createSelectTokens(tokens: PrimitiveThemeTokens): SelectTokens;
|
|
15
|
+
|
|
16
|
+
export { createSelectTokens };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
function createSelectTokens(tokens) {
|
|
2
|
+
return {
|
|
3
|
+
option: {
|
|
4
|
+
padding: tokens.space.sm,
|
|
5
|
+
selectedIconColor: tokens.colors.primary.value,
|
|
6
|
+
selectedIconVisibleOpacity: 1,
|
|
7
|
+
selectedIconHiddenOpacity: 0
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
export {
|
|
12
|
+
createSelectTokens
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=create-select-tokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-select-tokens.ts"],"sourcesContent":["import { PrimitiveThemeTokens, SelectTokens } from \"../types\";\r\n\r\nexport function createSelectTokens(tokens: PrimitiveThemeTokens): SelectTokens {\r\n return {\r\n option: {\r\n padding: tokens.space.sm,\r\n selectedIconColor: tokens.colors.primary.value,\r\n selectedIconVisibleOpacity: 1,\r\n selectedIconHiddenOpacity: 0,\r\n },\r\n };\r\n}\r\n"],"mappings":"AAEO,SAAS,mBAAmB,QAA4C;AAC7E,SAAO;AAAA,IACL,QAAQ;AAAA,MACN,SAAS,OAAO,MAAM;AAAA,MACtB,mBAAmB,OAAO,OAAO,QAAQ;AAAA,MACzC,4BAA4B;AAAA,MAC5B,2BAA2B;AAAA,IAC7B;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
|
+
import { SkeletonTokens } from '../types/skeleton-tokens.types.mjs';
|
|
3
|
+
import '../types/buttons-tokens.types.mjs';
|
|
4
|
+
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/control-tokes.types.mjs';
|
|
6
|
+
import '../types/data-state-tokens.types.mjs';
|
|
7
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
8
|
+
import '../types/flyout-tokens.types.mjs';
|
|
9
|
+
import '../types/select-tokens.types.mjs';
|
|
10
|
+
import '../types/tag-tokens.types.mjs';
|
|
11
|
+
import '../types/time-picker-token.types.mjs';
|
|
12
|
+
import '../types/tokens.types.mjs';
|
|
13
|
+
|
|
14
|
+
declare function createSkeletonTokens(tokens: PrimitiveThemeTokens): SkeletonTokens;
|
|
15
|
+
|
|
16
|
+
export { createSkeletonTokens };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
function createSkeletonTokens(tokens) {
|
|
2
|
+
const boneColor = tokens.colors.neutral["5"];
|
|
3
|
+
return {
|
|
4
|
+
bone: {
|
|
5
|
+
backgroundColor: boneColor,
|
|
6
|
+
borderColor: boneColor,
|
|
7
|
+
initialOpacity: 1,
|
|
8
|
+
animatedOpacity: 0.4,
|
|
9
|
+
animationDuration: 1e3
|
|
10
|
+
},
|
|
11
|
+
text: {
|
|
12
|
+
alignSelf: "flex-start",
|
|
13
|
+
textTransform: "uppercase",
|
|
14
|
+
opacity: 0
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
export {
|
|
19
|
+
createSkeletonTokens
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=create-skeleton-tokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-skeleton-tokens.ts"],"sourcesContent":["import { PrimitiveThemeTokens, SkeletonTokens } from \"../types\";\r\n\r\nexport function createSkeletonTokens(\r\n tokens: PrimitiveThemeTokens,\r\n): SkeletonTokens {\r\n const boneColor = tokens.colors.neutral[\"5\"];\r\n\r\n return {\r\n bone: {\r\n backgroundColor: boneColor,\r\n borderColor: boneColor,\r\n initialOpacity: 1,\r\n animatedOpacity: 0.4,\r\n animationDuration: 1000,\r\n },\r\n\r\n text: {\r\n alignSelf: \"flex-start\",\r\n textTransform: \"uppercase\",\r\n opacity: 0,\r\n },\r\n };\r\n}\r\n"],"mappings":"AAEO,SAAS,qBACd,QACgB;AAChB,QAAM,YAAY,OAAO,OAAO,QAAQ,GAAG;AAE3C,SAAO;AAAA,IACL,MAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MACjB,mBAAmB;AAAA,IACrB;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,MACX,eAAe;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
|
+
import { TagTokens } from '../types/tag-tokens.types.mjs';
|
|
3
|
+
import '../types/buttons-tokens.types.mjs';
|
|
4
|
+
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/control-tokes.types.mjs';
|
|
6
|
+
import '../types/data-state-tokens.types.mjs';
|
|
7
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
8
|
+
import '../types/flyout-tokens.types.mjs';
|
|
9
|
+
import '../types/select-tokens.types.mjs';
|
|
10
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
11
|
+
import '../types/time-picker-token.types.mjs';
|
|
12
|
+
import '../types/tokens.types.mjs';
|
|
13
|
+
|
|
14
|
+
declare function createTagTokens(tokens: PrimitiveThemeTokens): TagTokens;
|
|
15
|
+
|
|
16
|
+
export { createTagTokens };
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
function createTagTokens(tokens) {
|
|
2
|
+
const neutral = tokens.colors.neutral;
|
|
3
|
+
const disabledColor = tokens.colors.text.disabled;
|
|
4
|
+
const createVariants = (value, contrast) => ({
|
|
5
|
+
filled: {
|
|
6
|
+
backgroundColor: value,
|
|
7
|
+
borderColor: value,
|
|
8
|
+
color: contrast,
|
|
9
|
+
disabledBackgroundColor: neutral["4"],
|
|
10
|
+
disabledBorderColor: neutral["6"],
|
|
11
|
+
disabledColor
|
|
12
|
+
},
|
|
13
|
+
outlined: {
|
|
14
|
+
backgroundColor: "transparent",
|
|
15
|
+
borderColor: value,
|
|
16
|
+
color: value,
|
|
17
|
+
disabledBackgroundColor: "transparent",
|
|
18
|
+
disabledBorderColor: neutral["6"],
|
|
19
|
+
disabledColor
|
|
20
|
+
},
|
|
21
|
+
soft: {
|
|
22
|
+
backgroundColor: contrast,
|
|
23
|
+
borderColor: contrast,
|
|
24
|
+
color: value,
|
|
25
|
+
disabledBackgroundColor: neutral["3"],
|
|
26
|
+
disabledBorderColor: neutral["3"],
|
|
27
|
+
disabledColor
|
|
28
|
+
},
|
|
29
|
+
ghost: {
|
|
30
|
+
backgroundColor: "transparent",
|
|
31
|
+
borderColor: "transparent",
|
|
32
|
+
color: value,
|
|
33
|
+
disabledBackgroundColor: "transparent",
|
|
34
|
+
disabledBorderColor: "transparent",
|
|
35
|
+
disabledColor
|
|
36
|
+
},
|
|
37
|
+
plain: {
|
|
38
|
+
backgroundColor: "transparent",
|
|
39
|
+
borderColor: "transparent",
|
|
40
|
+
color: value,
|
|
41
|
+
disabledBackgroundColor: "transparent",
|
|
42
|
+
disabledBorderColor: "transparent",
|
|
43
|
+
disabledColor
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
return {
|
|
47
|
+
borderWidth: tokens.borderSize.sm,
|
|
48
|
+
borderRadius: tokens.radii.round,
|
|
49
|
+
gap: tokens.space.xxs,
|
|
50
|
+
iconMarginLeft: tokens.borderSize.md,
|
|
51
|
+
sizes: {
|
|
52
|
+
small: {
|
|
53
|
+
height: 24,
|
|
54
|
+
paddingHorizontal: tokens.space.xs,
|
|
55
|
+
minWidth: tokens.space.xl,
|
|
56
|
+
fontSize: tokens.fontSize.xs
|
|
57
|
+
},
|
|
58
|
+
medium: {
|
|
59
|
+
height: 28,
|
|
60
|
+
paddingHorizontal: tokens.space.xs,
|
|
61
|
+
minWidth: tokens.space.xxl,
|
|
62
|
+
fontSize: tokens.fontSize.xsm
|
|
63
|
+
},
|
|
64
|
+
large: {
|
|
65
|
+
height: 32,
|
|
66
|
+
paddingHorizontal: tokens.space.mxs,
|
|
67
|
+
minWidth: tokens.space.xxl,
|
|
68
|
+
fontSize: tokens.fontSize.xsm
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
colors: {
|
|
72
|
+
primary: createVariants(
|
|
73
|
+
tokens.colors.primary.value,
|
|
74
|
+
tokens.colors.primary.contrast
|
|
75
|
+
),
|
|
76
|
+
secondary: createVariants(
|
|
77
|
+
tokens.colors.secondary.value,
|
|
78
|
+
tokens.colors.secondary.contrast
|
|
79
|
+
),
|
|
80
|
+
error: createVariants(
|
|
81
|
+
tokens.colors.feedback.error.value,
|
|
82
|
+
tokens.colors.feedback.error.contrast
|
|
83
|
+
),
|
|
84
|
+
warning: createVariants(
|
|
85
|
+
tokens.colors.feedback.warning.value,
|
|
86
|
+
tokens.colors.feedback.warning.contrast
|
|
87
|
+
),
|
|
88
|
+
success: createVariants(
|
|
89
|
+
tokens.colors.feedback.success.value,
|
|
90
|
+
tokens.colors.feedback.success.contrast
|
|
91
|
+
),
|
|
92
|
+
info: createVariants(
|
|
93
|
+
tokens.colors.feedback.info.value,
|
|
94
|
+
tokens.colors.feedback.info.contrast
|
|
95
|
+
)
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
export {
|
|
100
|
+
createTagTokens
|
|
101
|
+
};
|
|
102
|
+
//# sourceMappingURL=create-tag-tokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-tag-tokens.ts"],"sourcesContent":["import { PrimitiveThemeTokens, TagTokens } from \"../types\";\r\n\r\nexport function createTagTokens(tokens: PrimitiveThemeTokens): TagTokens {\r\n const neutral = tokens.colors.neutral;\r\n const disabledColor = tokens.colors.text.disabled;\r\n\r\n const createVariants = (value: string, contrast: string) => ({\r\n filled: {\r\n backgroundColor: value,\r\n borderColor: value,\r\n color: contrast,\r\n\r\n disabledBackgroundColor: neutral[\"4\"],\r\n disabledBorderColor: neutral[\"6\"],\r\n disabledColor,\r\n },\r\n\r\n outlined: {\r\n backgroundColor: \"transparent\",\r\n borderColor: value,\r\n color: value,\r\n\r\n disabledBackgroundColor: \"transparent\",\r\n disabledBorderColor: neutral[\"6\"],\r\n disabledColor,\r\n },\r\n\r\n soft: {\r\n backgroundColor: contrast,\r\n borderColor: contrast,\r\n color: value,\r\n\r\n disabledBackgroundColor: neutral[\"3\"],\r\n disabledBorderColor: neutral[\"3\"],\r\n disabledColor,\r\n },\r\n\r\n ghost: {\r\n backgroundColor: \"transparent\",\r\n borderColor: \"transparent\",\r\n color: value,\r\n\r\n disabledBackgroundColor: \"transparent\",\r\n disabledBorderColor: \"transparent\",\r\n disabledColor,\r\n },\r\n\r\n plain: {\r\n backgroundColor: \"transparent\",\r\n borderColor: \"transparent\",\r\n color: value,\r\n\r\n disabledBackgroundColor: \"transparent\",\r\n disabledBorderColor: \"transparent\",\r\n disabledColor,\r\n },\r\n });\r\n\r\n return {\r\n borderWidth: tokens.borderSize.sm,\r\n borderRadius: tokens.radii.round,\r\n gap: tokens.space.xxs,\r\n iconMarginLeft: tokens.borderSize.md,\r\n\r\n sizes: {\r\n small: {\r\n height: 24,\r\n paddingHorizontal: tokens.space.xs,\r\n minWidth: tokens.space.xl,\r\n fontSize: tokens.fontSize.xs,\r\n },\r\n\r\n medium: {\r\n height: 28,\r\n paddingHorizontal: tokens.space.xs,\r\n minWidth: tokens.space.xxl,\r\n fontSize: tokens.fontSize.xsm,\r\n },\r\n\r\n large: {\r\n height: 32,\r\n paddingHorizontal: tokens.space.mxs,\r\n minWidth: tokens.space.xxl,\r\n fontSize: tokens.fontSize.xsm,\r\n },\r\n },\r\n\r\n colors: {\r\n primary: createVariants(\r\n tokens.colors.primary.value,\r\n tokens.colors.primary.contrast,\r\n ),\r\n\r\n secondary: createVariants(\r\n tokens.colors.secondary.value,\r\n tokens.colors.secondary.contrast,\r\n ),\r\n\r\n error: createVariants(\r\n tokens.colors.feedback.error.value,\r\n tokens.colors.feedback.error.contrast,\r\n ),\r\n\r\n warning: createVariants(\r\n tokens.colors.feedback.warning.value,\r\n tokens.colors.feedback.warning.contrast,\r\n ),\r\n\r\n success: createVariants(\r\n tokens.colors.feedback.success.value,\r\n tokens.colors.feedback.success.contrast,\r\n ),\r\n\r\n info: createVariants(\r\n tokens.colors.feedback.info.value,\r\n tokens.colors.feedback.info.contrast,\r\n ),\r\n },\r\n };\r\n}\r\n"],"mappings":"AAEO,SAAS,gBAAgB,QAAyC;AACvE,QAAM,UAAU,OAAO,OAAO;AAC9B,QAAM,gBAAgB,OAAO,OAAO,KAAK;AAEzC,QAAM,iBAAiB,CAAC,OAAe,cAAsB;AAAA,IAC3D,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,MAEP,yBAAyB,QAAQ,GAAG;AAAA,MACpC,qBAAqB,QAAQ,GAAG;AAAA,MAChC;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,MAEP,yBAAyB;AAAA,MACzB,qBAAqB,QAAQ,GAAG;AAAA,MAChC;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,MAEP,yBAAyB,QAAQ,GAAG;AAAA,MACpC,qBAAqB,QAAQ,GAAG;AAAA,MAChC;AAAA,IACF;AAAA,IAEA,OAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,MAEP,yBAAyB;AAAA,MACzB,qBAAqB;AAAA,MACrB;AAAA,IACF;AAAA,IAEA,OAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,MAEP,yBAAyB;AAAA,MACzB,qBAAqB;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,cAAc,OAAO,MAAM;AAAA,IAC3B,KAAK,OAAO,MAAM;AAAA,IAClB,gBAAgB,OAAO,WAAW;AAAA,IAElC,OAAO;AAAA,MACL,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,mBAAmB,OAAO,MAAM;AAAA,QAChC,UAAU,OAAO,MAAM;AAAA,QACvB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MAEA,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,mBAAmB,OAAO,MAAM;AAAA,QAChC,UAAU,OAAO,MAAM;AAAA,QACvB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MAEA,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,mBAAmB,OAAO,MAAM;AAAA,QAChC,UAAU,OAAO,MAAM;AAAA,QACvB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,IACF;AAAA,IAEA,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,OAAO,OAAO,QAAQ;AAAA,QACtB,OAAO,OAAO,QAAQ;AAAA,MACxB;AAAA,MAEA,WAAW;AAAA,QACT,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,OAAO,UAAU;AAAA,MAC1B;AAAA,MAEA,OAAO;AAAA,QACL,OAAO,OAAO,SAAS,MAAM;AAAA,QAC7B,OAAO,OAAO,SAAS,MAAM;AAAA,MAC/B;AAAA,MAEA,SAAS;AAAA,QACP,OAAO,OAAO,SAAS,QAAQ;AAAA,QAC/B,OAAO,OAAO,SAAS,QAAQ;AAAA,MACjC;AAAA,MAEA,SAAS;AAAA,QACP,OAAO,OAAO,SAAS,QAAQ;AAAA,QAC/B,OAAO,OAAO,SAAS,QAAQ;AAAA,MACjC;AAAA,MAEA,MAAM;AAAA,QACJ,OAAO,OAAO,SAAS,KAAK;AAAA,QAC5B,OAAO,OAAO,SAAS,KAAK;AAAA,MAC9B;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
|
+
import { TimePickerTokens } from '../types/time-picker-token.types.mjs';
|
|
3
|
+
import '../types/buttons-tokens.types.mjs';
|
|
4
|
+
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/control-tokes.types.mjs';
|
|
6
|
+
import '../types/data-state-tokens.types.mjs';
|
|
7
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
8
|
+
import '../types/flyout-tokens.types.mjs';
|
|
9
|
+
import '../types/select-tokens.types.mjs';
|
|
10
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
11
|
+
import '../types/tag-tokens.types.mjs';
|
|
12
|
+
import '../types/tokens.types.mjs';
|
|
13
|
+
|
|
14
|
+
declare function createTimePickerTokens(tokens: PrimitiveThemeTokens): TimePickerTokens;
|
|
15
|
+
|
|
16
|
+
export { createTimePickerTokens };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
function createTimePickerTokens(tokens) {
|
|
2
|
+
const ItemHeight = 50;
|
|
3
|
+
const VisibleItems = 5;
|
|
4
|
+
const ContainerHeight = ItemHeight * VisibleItems;
|
|
5
|
+
const VerticalPadding = ContainerHeight / 2 - ItemHeight / 2;
|
|
6
|
+
const ColumnWidth = 70;
|
|
7
|
+
return {
|
|
8
|
+
column: {
|
|
9
|
+
width: ColumnWidth,
|
|
10
|
+
height: ContainerHeight,
|
|
11
|
+
gap: tokens.space.xxs,
|
|
12
|
+
listWidth: 30,
|
|
13
|
+
itemHeight: ItemHeight,
|
|
14
|
+
visibleItems: VisibleItems,
|
|
15
|
+
verticalPadding: VerticalPadding,
|
|
16
|
+
initialScrollIndexViewOffset: -VerticalPadding,
|
|
17
|
+
fontSize: tokens.fontSize.xl,
|
|
18
|
+
selectedColor: tokens.colors.primary.value,
|
|
19
|
+
color: tokens.colors.text.primary,
|
|
20
|
+
selectedFontWeight: tokens.fontWeight.semiBold,
|
|
21
|
+
fontWeight: tokens.fontWeight.regular
|
|
22
|
+
},
|
|
23
|
+
flyout: {
|
|
24
|
+
gap: tokens.space.msm
|
|
25
|
+
},
|
|
26
|
+
columns: {
|
|
27
|
+
height: ContainerHeight,
|
|
28
|
+
gap: tokens.space.xs,
|
|
29
|
+
indicatorHeight: ItemHeight,
|
|
30
|
+
indicatorWidth: ColumnWidth * 3 + 70,
|
|
31
|
+
indicatorTop: VerticalPadding,
|
|
32
|
+
indicatorBorderRadius: tokens.radii.round,
|
|
33
|
+
indicatorBackgroundColor: tokens.colors.surface.primary.value
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
export {
|
|
38
|
+
createTimePickerTokens
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=create-time-picker-tokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-time-picker-tokens.ts"],"sourcesContent":["import { PrimitiveThemeTokens, TimePickerTokens } from \"../types\";\r\n\r\nexport function createTimePickerTokens(\r\n tokens: PrimitiveThemeTokens,\r\n): TimePickerTokens {\r\n const ItemHeight = 50;\r\n const VisibleItems = 5;\r\n const ContainerHeight = ItemHeight * VisibleItems;\r\n const VerticalPadding = ContainerHeight / 2 - ItemHeight / 2;\r\n const ColumnWidth = 70;\r\n\r\n return {\r\n column: {\r\n width: ColumnWidth,\r\n height: ContainerHeight,\r\n gap: tokens.space.xxs,\r\n\r\n listWidth: 30,\r\n itemHeight: ItemHeight,\r\n visibleItems: VisibleItems,\r\n verticalPadding: VerticalPadding,\r\n initialScrollIndexViewOffset: -VerticalPadding,\r\n\r\n fontSize: tokens.fontSize.xl,\r\n selectedColor: tokens.colors.primary.value,\r\n color: tokens.colors.text.primary,\r\n selectedFontWeight: tokens.fontWeight.semiBold,\r\n fontWeight: tokens.fontWeight.regular,\r\n },\r\n\r\n flyout: {\r\n gap: tokens.space.msm,\r\n },\r\n\r\n columns: {\r\n height: ContainerHeight,\r\n gap: tokens.space.xs,\r\n indicatorHeight: ItemHeight,\r\n indicatorWidth: ColumnWidth * 3 + 70,\r\n indicatorTop: VerticalPadding,\r\n indicatorBorderRadius: tokens.radii.round,\r\n indicatorBackgroundColor: tokens.colors.surface.primary.value,\r\n },\r\n };\r\n}\r\n"],"mappings":"AAEO,SAAS,uBACd,QACkB;AAClB,QAAM,aAAa;AACnB,QAAM,eAAe;AACrB,QAAM,kBAAkB,aAAa;AACrC,QAAM,kBAAkB,kBAAkB,IAAI,aAAa;AAC3D,QAAM,cAAc;AAEpB,SAAO;AAAA,IACL,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,KAAK,OAAO,MAAM;AAAA,MAElB,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,8BAA8B,CAAC;AAAA,MAE/B,UAAU,OAAO,SAAS;AAAA,MAC1B,eAAe,OAAO,OAAO,QAAQ;AAAA,MACrC,OAAO,OAAO,OAAO,KAAK;AAAA,MAC1B,oBAAoB,OAAO,WAAW;AAAA,MACtC,YAAY,OAAO,WAAW;AAAA,IAChC;AAAA,IAEA,QAAQ;AAAA,MACN,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,IAEA,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,KAAK,OAAO,MAAM;AAAA,MAClB,iBAAiB;AAAA,MACjB,gBAAgB,cAAc,IAAI;AAAA,MAClC,cAAc;AAAA,MACd,uBAAuB,OAAO,MAAM;AAAA,MACpC,0BAA0B,OAAO,OAAO,QAAQ,QAAQ;AAAA,IAC1D;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
|
+
import '../types/buttons-tokens.types.mjs';
|
|
3
|
+
import '../types/components.types.mjs';
|
|
4
|
+
import '../types/control-tokes.types.mjs';
|
|
5
|
+
import '../types/data-state-tokens.types.mjs';
|
|
6
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
7
|
+
import '../types/flyout-tokens.types.mjs';
|
|
8
|
+
import '../types/select-tokens.types.mjs';
|
|
9
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
10
|
+
import '../types/tag-tokens.types.mjs';
|
|
11
|
+
import '../types/time-picker-token.types.mjs';
|
|
12
|
+
import '../types/tokens.types.mjs';
|
|
13
|
+
|
|
14
|
+
declare const DarkTheme: PrimitiveThemeTokens;
|
|
15
|
+
|
|
16
|
+
export { DarkTheme };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import {
|
|
2
|
+
BorderSizeTokens,
|
|
3
|
+
FontFamilyTokens,
|
|
4
|
+
FontSizeTokens,
|
|
5
|
+
FontWeightTokens,
|
|
6
|
+
LightColors,
|
|
7
|
+
LineHeightTokens,
|
|
8
|
+
RadiiTokens,
|
|
9
|
+
SpaceTokens
|
|
10
|
+
} from "./tokens.theme";
|
|
11
|
+
const DarkTheme = {
|
|
12
|
+
colors: LightColors,
|
|
13
|
+
space: SpaceTokens,
|
|
14
|
+
radii: RadiiTokens,
|
|
15
|
+
fontFamily: FontFamilyTokens,
|
|
16
|
+
borderSize: BorderSizeTokens,
|
|
17
|
+
fontSize: FontSizeTokens,
|
|
18
|
+
fontWeight: FontWeightTokens,
|
|
19
|
+
lineHeight: LineHeightTokens
|
|
20
|
+
};
|
|
21
|
+
export {
|
|
22
|
+
DarkTheme
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=dark.theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/dark.theme.ts"],"sourcesContent":["import { PrimitiveThemeTokens } from \"../types\";\r\nimport {\r\n BorderSizeTokens,\r\n FontFamilyTokens,\r\n FontSizeTokens,\r\n FontWeightTokens,\r\n LightColors,\r\n LineHeightTokens,\r\n RadiiTokens,\r\n SpaceTokens,\r\n} from \"./tokens.theme\";\r\n\r\nexport const DarkTheme: PrimitiveThemeTokens = {\r\n colors: LightColors,\r\n space: SpaceTokens,\r\n radii: RadiiTokens,\r\n fontFamily: FontFamilyTokens,\r\n borderSize: BorderSizeTokens,\r\n fontSize: FontSizeTokens,\r\n fontWeight: FontWeightTokens,\r\n lineHeight: LineHeightTokens,\r\n};\r\n"],"mappings":"AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,YAAkC;AAAA,EAC7C,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AACd;","names":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export { DarkTheme } from './dark.theme.mjs';
|
|
2
|
+
export { LightTheme } from './light.theme.mjs';
|
|
3
|
+
export { BorderSizeTokens, ChartColorTokens, FontFamilyTokens, FontFamilyWeightsItalicTokens, FontFamilyWeightsNormalTokens, FontSizeTokens, FontWeightTokens, LightColors, LineHeightTokens, NeutralColorTokens, RadiiTokens, SpaceTokens, createComponentsTokens } from './tokens.theme.mjs';
|
|
4
|
+
import '../types/theme-provider.types.mjs';
|
|
5
|
+
import '../types/buttons-tokens.types.mjs';
|
|
6
|
+
import '../types/components.types.mjs';
|
|
7
|
+
import '../types/control-tokes.types.mjs';
|
|
8
|
+
import '../types/data-state-tokens.types.mjs';
|
|
9
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
10
|
+
import '../types/flyout-tokens.types.mjs';
|
|
11
|
+
import '../types/select-tokens.types.mjs';
|
|
12
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
13
|
+
import '../types/tag-tokens.types.mjs';
|
|
14
|
+
import '../types/time-picker-token.types.mjs';
|
|
15
|
+
import '../types/tokens.types.mjs';
|
|
16
|
+
import '../types/chart.types.mjs';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/index.ts"],"sourcesContent":["export { DarkTheme } from \"./dark.theme\";\r\nexport { LightTheme } from \"./light.theme\";\r\nexport * from \"./tokens.theme\";\r\n"],"mappings":"AAAA,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,cAAc;","names":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
|
+
import '../types/buttons-tokens.types.mjs';
|
|
3
|
+
import '../types/components.types.mjs';
|
|
4
|
+
import '../types/control-tokes.types.mjs';
|
|
5
|
+
import '../types/data-state-tokens.types.mjs';
|
|
6
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
7
|
+
import '../types/flyout-tokens.types.mjs';
|
|
8
|
+
import '../types/select-tokens.types.mjs';
|
|
9
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
10
|
+
import '../types/tag-tokens.types.mjs';
|
|
11
|
+
import '../types/time-picker-token.types.mjs';
|
|
12
|
+
import '../types/tokens.types.mjs';
|
|
13
|
+
|
|
14
|
+
declare const LightTheme: PrimitiveThemeTokens;
|
|
15
|
+
|
|
16
|
+
export { LightTheme };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import {
|
|
2
|
+
BorderSizeTokens,
|
|
3
|
+
FontFamilyTokens,
|
|
4
|
+
FontSizeTokens,
|
|
5
|
+
FontWeightTokens,
|
|
6
|
+
LightColors,
|
|
7
|
+
LineHeightTokens,
|
|
8
|
+
RadiiTokens,
|
|
9
|
+
SpaceTokens
|
|
10
|
+
} from "./tokens.theme";
|
|
11
|
+
const LightTheme = {
|
|
12
|
+
colors: LightColors,
|
|
13
|
+
space: SpaceTokens,
|
|
14
|
+
radii: RadiiTokens,
|
|
15
|
+
fontFamily: FontFamilyTokens,
|
|
16
|
+
borderSize: BorderSizeTokens,
|
|
17
|
+
fontSize: FontSizeTokens,
|
|
18
|
+
fontWeight: FontWeightTokens,
|
|
19
|
+
lineHeight: LineHeightTokens
|
|
20
|
+
};
|
|
21
|
+
export {
|
|
22
|
+
LightTheme
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=light.theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/light.theme.ts"],"sourcesContent":["import { PrimitiveThemeTokens } from \"../types\";\r\nimport {\r\n BorderSizeTokens,\r\n FontFamilyTokens,\r\n FontSizeTokens,\r\n FontWeightTokens,\r\n LightColors,\r\n LineHeightTokens,\r\n RadiiTokens,\r\n SpaceTokens,\r\n} from \"./tokens.theme\";\r\n\r\nexport const LightTheme: PrimitiveThemeTokens = {\r\n colors: LightColors,\r\n space: SpaceTokens,\r\n radii: RadiiTokens,\r\n fontFamily: FontFamilyTokens,\r\n borderSize: BorderSizeTokens,\r\n fontSize: FontSizeTokens,\r\n fontWeight: FontWeightTokens,\r\n lineHeight: LineHeightTokens,\r\n};\r\n"],"mappings":"AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,aAAmC;AAAA,EAC9C,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AACd;","names":[]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { ChartColorPalette } from '../types/chart.types.mjs';
|
|
2
|
+
import { BorderSize, FontFamily, FontWeightValue, FontWeightItalic, FontWeightNormal, FontSize, FontWeight, LineHeight, NeutralColor, Radii, Space } from '../types/tokens.types.mjs';
|
|
3
|
+
import { ThemeColors, PrimitiveThemeTokens, ComponentsTokens } from '../types/theme-provider.types.mjs';
|
|
4
|
+
import '../types/buttons-tokens.types.mjs';
|
|
5
|
+
import '../types/components.types.mjs';
|
|
6
|
+
import '../types/control-tokes.types.mjs';
|
|
7
|
+
import '../types/data-state-tokens.types.mjs';
|
|
8
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
9
|
+
import '../types/flyout-tokens.types.mjs';
|
|
10
|
+
import '../types/select-tokens.types.mjs';
|
|
11
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
12
|
+
import '../types/tag-tokens.types.mjs';
|
|
13
|
+
import '../types/time-picker-token.types.mjs';
|
|
14
|
+
|
|
15
|
+
declare const ChartColorTokens: ChartColorPalette;
|
|
16
|
+
declare const SpaceTokens: Space;
|
|
17
|
+
declare const BorderSizeTokens: BorderSize;
|
|
18
|
+
declare const RadiiTokens: Radii;
|
|
19
|
+
declare const FontSizeTokens: FontSize;
|
|
20
|
+
declare const LineHeightTokens: LineHeight;
|
|
21
|
+
declare const FontWeightTokens: FontWeight;
|
|
22
|
+
declare const FontFamilyWeightsNormalTokens: Record<FontWeightValue, FontWeightNormal>;
|
|
23
|
+
declare const FontFamilyWeightsItalicTokens: Record<FontWeightValue, FontWeightItalic>;
|
|
24
|
+
declare const FontFamilyTokens: FontFamily;
|
|
25
|
+
declare const NeutralColorTokens: NeutralColor;
|
|
26
|
+
declare const LightColors: ThemeColors;
|
|
27
|
+
declare function createComponentsTokens(tokens: PrimitiveThemeTokens): ComponentsTokens;
|
|
28
|
+
|
|
29
|
+
export { BorderSizeTokens, ChartColorTokens, FontFamilyTokens, FontFamilyWeightsItalicTokens, FontFamilyWeightsNormalTokens, FontSizeTokens, FontWeightTokens, LightColors, LineHeightTokens, NeutralColorTokens, RadiiTokens, SpaceTokens, createComponentsTokens };
|