@impulse-ui-native/theme 2.9.0 → 4.0.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/constants/index.d.mts +1 -1
- package/dist/constants/style.constants.d.mts +3 -3
- package/dist/constants/style.constants.js +3 -3
- package/dist/constants/style.constants.js.map +1 -1
- package/dist/hooks/index.d.mts +2 -1
- package/dist/hooks/use-colors.hook.d.mts +2 -1
- package/dist/hooks/use-components-tokens.hook.d.mts +2 -1
- package/dist/hooks/use-theme.hook.d.mts +2 -1
- package/dist/hooks/use-themed-styles.d.mts +2 -1
- package/dist/index.d.mts +22 -13
- package/dist/providers/index.d.mts +2 -1
- package/dist/providers/theme.provider.d.mts +2 -1
- package/dist/theme/create-accordion-tokens.d.mts +2 -1
- package/dist/theme/create-accordion-tokens.js +24 -7
- package/dist/theme/create-accordion-tokens.js.map +1 -1
- package/dist/theme/create-avatar-tokens.d.mts +2 -1
- package/dist/theme/create-avatar-tokens.js +0 -10
- package/dist/theme/create-avatar-tokens.js.map +1 -1
- package/dist/theme/create-badge-tokens.d.mts +2 -1
- package/dist/theme/create-badge-tokens.js +0 -10
- package/dist/theme/create-badge-tokens.js.map +1 -1
- package/dist/theme/create-button-tokens.d.mts +2 -1
- package/dist/theme/create-button-tokens.js +60 -32
- package/dist/theme/create-button-tokens.js.map +1 -1
- package/dist/theme/create-card-tokens.d.mts +2 -1
- package/dist/theme/create-checkbox-tokens.d.mts +2 -1
- package/dist/theme/create-checkbox-tokens.js +60 -24
- package/dist/theme/create-checkbox-tokens.js.map +1 -1
- package/dist/theme/create-control-tokens.d.mts +2 -1
- package/dist/theme/create-control-tokens.js +86 -97
- package/dist/theme/create-control-tokens.js.map +1 -1
- package/dist/theme/create-data-state-tokens.d.mts +2 -1
- package/dist/theme/create-data-state-tokens.js.map +1 -1
- package/dist/theme/create-datetime-picker.d.mts +2 -1
- package/dist/theme/create-datetime-picker.js +18 -6
- package/dist/theme/create-datetime-picker.js.map +1 -1
- package/dist/theme/create-divider-tokens.d.mts +2 -1
- package/dist/theme/create-flyout-tokens.d.mts +2 -1
- package/dist/theme/create-flyout-tokens.js.map +1 -1
- package/dist/theme/create-icon-button-tokens.d.mts +2 -1
- package/dist/theme/create-icon-button-tokens.js +60 -32
- package/dist/theme/create-icon-button-tokens.js.map +1 -1
- package/dist/theme/create-progress-tokens.d.mts +2 -1
- package/dist/theme/create-radio-tokens.d.mts +2 -1
- package/dist/theme/create-radio-tokens.js +60 -24
- package/dist/theme/create-radio-tokens.js.map +1 -1
- package/dist/theme/create-select-tokens.d.mts +2 -1
- package/dist/theme/create-select-tokens.js +10 -3
- package/dist/theme/create-select-tokens.js.map +1 -1
- package/dist/theme/create-skeleton-tokens.d.mts +2 -1
- package/dist/theme/create-skeleton-tokens.js.map +1 -1
- package/dist/theme/create-slider-tokens.d.mts +31 -0
- package/dist/theme/create-slider-tokens.js +182 -0
- package/dist/theme/create-slider-tokens.js.map +1 -0
- package/dist/theme/create-spinner-tokens.d.mts +2 -1
- package/dist/theme/create-stepper-tokens.d.mts +2 -1
- package/dist/theme/create-switch-tokens.d.mts +2 -1
- package/dist/theme/create-switch-tokens.js +48 -25
- package/dist/theme/create-switch-tokens.js.map +1 -1
- package/dist/theme/create-tag-tokens.d.mts +2 -1
- package/dist/theme/create-tag-tokens.js +228 -68
- package/dist/theme/create-tag-tokens.js.map +1 -1
- package/dist/theme/create-textarea-tokens.d.mts +2 -1
- package/dist/theme/create-textarea-tokens.js +6 -3
- package/dist/theme/create-textarea-tokens.js.map +1 -1
- package/dist/theme/create-time-picker-tokens.d.mts +2 -1
- package/dist/theme/create-time-picker-tokens.js +10 -4
- package/dist/theme/create-time-picker-tokens.js.map +1 -1
- package/dist/theme/dark.theme.d.mts +2 -1
- package/dist/theme/index.d.mts +3 -1
- package/dist/theme/index.js +1 -0
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/light.theme.d.mts +2 -1
- package/dist/theme/tokens.theme.d.mts +2 -1
- package/dist/theme/tokens.theme.js +2 -0
- package/dist/theme/tokens.theme.js.map +1 -1
- package/dist/types/accordion-tokens.types.d.mts +11 -7
- package/dist/types/avatar-tokens.types.d.mts +2 -2
- package/dist/types/badge-tokens.types.d.mts +2 -2
- package/dist/types/buttons-tokens.types.d.mts +6 -15
- package/dist/types/checkbox-tokens.types.d.mts +5 -9
- package/dist/types/components.types.d.mts +36 -2
- package/dist/types/control-tokens.types.d.mts +57 -0
- package/dist/types/control-tokens.types.js +1 -0
- package/dist/types/datetime-picker-tokens.types.d.mts +14 -7
- package/dist/types/index.d.mts +13 -12
- package/dist/types/index.js +2 -1
- package/dist/types/index.js.map +1 -1
- package/dist/types/radio-tokens.types.d.mts +5 -9
- package/dist/types/select-tokens.types.d.mts +8 -4
- package/dist/types/slider-tokens.types.d.mts +43 -0
- package/dist/types/slider-tokens.types.js +1 -0
- package/dist/types/slider-tokens.types.js.map +1 -0
- package/dist/types/switch-tokens.types.d.mts +11 -13
- package/dist/types/tag-tokens.types.d.mts +5 -7
- package/dist/types/textarea-tokens.types.d.mts +6 -5
- package/dist/types/theme-provider.types.d.mts +3 -1
- package/dist/types/time-picker-token.types.d.mts +8 -5
- package/dist/utils/action-state.utils.d.mts +5 -0
- package/dist/utils/action-state.utils.js +9 -0
- package/dist/utils/action-state.utils.js.map +1 -0
- package/dist/utils/availability-state.utils.d.mts +5 -0
- package/dist/utils/availability-state.utils.js +8 -0
- package/dist/utils/availability-state.utils.js.map +1 -0
- package/dist/utils/control-state.utils.d.mts +5 -0
- package/dist/utils/control-state.utils.js +9 -0
- package/dist/utils/control-state.utils.js.map +1 -0
- package/dist/utils/datetime-picker-state.utils.d.mts +6 -0
- package/dist/utils/datetime-picker-state.utils.js +10 -0
- package/dist/utils/datetime-picker-state.utils.js.map +1 -0
- package/dist/utils/field-state.utils.d.mts +5 -0
- package/dist/utils/field-state.utils.js +9 -0
- package/dist/utils/field-state.utils.js.map +1 -0
- package/dist/utils/index.d.mts +11 -3
- package/dist/utils/index.js +7 -0
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/selection-item-state.utils.d.mts +5 -0
- package/dist/utils/selection-item-state.utils.js +8 -0
- package/dist/utils/selection-item-state.utils.js.map +1 -0
- package/dist/utils/selection-state.utils.d.mts +5 -0
- package/dist/utils/selection-state.utils.js +11 -0
- package/dist/utils/selection-state.utils.js.map +1 -0
- package/dist/utils/style.utils.d.mts +2 -1
- package/dist/utils/style.utils.js +2 -2
- package/dist/utils/style.utils.js.map +1 -1
- package/package.json +3 -3
- package/dist/types/control-tokes.types.d.mts +0 -62
- package/dist/types/control-tokes.types.js +0 -1
- /package/dist/types/{control-tokes.types.js.map → control-tokens.types.js.map} +0 -0
|
@@ -7,7 +7,7 @@ import '../types/radio-tokens.types.mjs';
|
|
|
7
7
|
import '../types/accordion-tokens.types.mjs';
|
|
8
8
|
import '../types/avatar-tokens.types.mjs';
|
|
9
9
|
import '../types/buttons-tokens.types.mjs';
|
|
10
|
-
import '../types/control-
|
|
10
|
+
import '../types/control-tokens.types.mjs';
|
|
11
11
|
import '../types/data-state-tokens.types.mjs';
|
|
12
12
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
13
13
|
import '../types/divider-tokens.types.mjs';
|
|
@@ -18,6 +18,7 @@ import '../types/progress-tokens.types.mjs';
|
|
|
18
18
|
import '../types/spinner-tokens.types.mjs';
|
|
19
19
|
import '../types/select-tokens.types.mjs';
|
|
20
20
|
import '../types/skeleton-tokens.types.mjs';
|
|
21
|
+
import '../types/slider-tokens.types.mjs';
|
|
21
22
|
import '../types/stepper-tokens.types.mjs';
|
|
22
23
|
import '../types/switch-tokens.types.mjs';
|
|
23
24
|
import '../types/tag-tokens.types.mjs';
|
|
@@ -7,7 +7,7 @@ import '../types/accordion-tokens.types.mjs';
|
|
|
7
7
|
import '../types/avatar-tokens.types.mjs';
|
|
8
8
|
import '../types/buttons-tokens.types.mjs';
|
|
9
9
|
import '../types/card-tokens.types.mjs';
|
|
10
|
-
import '../types/control-
|
|
10
|
+
import '../types/control-tokens.types.mjs';
|
|
11
11
|
import '../types/data-state-tokens.types.mjs';
|
|
12
12
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
13
13
|
import '../types/divider-tokens.types.mjs';
|
|
@@ -18,6 +18,7 @@ import '../types/progress-tokens.types.mjs';
|
|
|
18
18
|
import '../types/spinner-tokens.types.mjs';
|
|
19
19
|
import '../types/select-tokens.types.mjs';
|
|
20
20
|
import '../types/skeleton-tokens.types.mjs';
|
|
21
|
+
import '../types/slider-tokens.types.mjs';
|
|
21
22
|
import '../types/stepper-tokens.types.mjs';
|
|
22
23
|
import '../types/switch-tokens.types.mjs';
|
|
23
24
|
import '../types/tag-tokens.types.mjs';
|
|
@@ -6,11 +6,6 @@ function createCheckboxTokens(tokens) {
|
|
|
6
6
|
return {
|
|
7
7
|
borderWidth: tokens.borderSize.md,
|
|
8
8
|
borderRadius: tokens.radii.sm,
|
|
9
|
-
uncheckedBackgroundColor: "transparent",
|
|
10
|
-
uncheckedBorderColor: tokens.colors.border.strong.value,
|
|
11
|
-
disabledBackgroundColor: tokens.colors.neutral["3"],
|
|
12
|
-
disabledBorderColor: tokens.colors.neutral["5"],
|
|
13
|
-
disabledColor: tokens.colors.text.disabled,
|
|
14
9
|
sizes: {
|
|
15
10
|
small: {
|
|
16
11
|
size: 20,
|
|
@@ -30,29 +25,70 @@ function createCheckboxTokens(tokens) {
|
|
|
30
25
|
},
|
|
31
26
|
variants: {
|
|
32
27
|
filled: {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
28
|
+
unselected: {
|
|
29
|
+
backgroundColor: "transparent",
|
|
30
|
+
borderColor: tokens.colors.border.strong.value,
|
|
31
|
+
color: primaryContrast
|
|
32
|
+
},
|
|
33
|
+
selected: {
|
|
34
|
+
backgroundColor: primary,
|
|
35
|
+
borderColor: primary,
|
|
36
|
+
color: primaryContrast
|
|
37
|
+
},
|
|
38
|
+
disabledUnselected: {
|
|
39
|
+
backgroundColor: "transparent",
|
|
40
|
+
borderColor: tokens.colors.neutral["5"],
|
|
41
|
+
color: tokens.colors.text.disabled
|
|
42
|
+
},
|
|
43
|
+
disabledSelected: {
|
|
44
|
+
backgroundColor: tokens.colors.neutral["3"],
|
|
45
|
+
borderColor: tokens.colors.neutral["5"],
|
|
46
|
+
color: tokens.colors.text.disabled
|
|
47
|
+
}
|
|
36
48
|
},
|
|
37
49
|
outlined: {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
50
|
+
unselected: {
|
|
51
|
+
backgroundColor: "transparent",
|
|
52
|
+
borderColor: tokens.colors.border.strong.value,
|
|
53
|
+
color: primary
|
|
54
|
+
},
|
|
55
|
+
selected: {
|
|
56
|
+
backgroundColor: "transparent",
|
|
57
|
+
borderColor: primary,
|
|
58
|
+
color: primary
|
|
59
|
+
},
|
|
60
|
+
disabledUnselected: {
|
|
61
|
+
backgroundColor: "transparent",
|
|
62
|
+
borderColor: tokens.colors.neutral["5"],
|
|
63
|
+
color: tokens.colors.text.disabled
|
|
64
|
+
},
|
|
65
|
+
disabledSelected: {
|
|
66
|
+
backgroundColor: tokens.colors.neutral["3"],
|
|
67
|
+
borderColor: tokens.colors.neutral["5"],
|
|
68
|
+
color: tokens.colors.text.disabled
|
|
69
|
+
}
|
|
41
70
|
},
|
|
42
71
|
soft: {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
72
|
+
unselected: {
|
|
73
|
+
backgroundColor: "transparent",
|
|
74
|
+
borderColor: tokens.colors.border.strong.value,
|
|
75
|
+
color: secondaryContrast
|
|
76
|
+
},
|
|
77
|
+
selected: {
|
|
78
|
+
backgroundColor: secondary,
|
|
79
|
+
borderColor: secondary,
|
|
80
|
+
color: secondaryContrast
|
|
81
|
+
},
|
|
82
|
+
disabledUnselected: {
|
|
83
|
+
backgroundColor: "transparent",
|
|
84
|
+
borderColor: tokens.colors.neutral["5"],
|
|
85
|
+
color: tokens.colors.text.disabled
|
|
86
|
+
},
|
|
87
|
+
disabledSelected: {
|
|
88
|
+
backgroundColor: tokens.colors.neutral["3"],
|
|
89
|
+
borderColor: tokens.colors.neutral["5"],
|
|
90
|
+
color: tokens.colors.text.disabled
|
|
91
|
+
}
|
|
56
92
|
}
|
|
57
93
|
}
|
|
58
94
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-checkbox-tokens.ts"],"sourcesContent":["import type { CheckboxTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createCheckboxTokens(\n tokens: PrimitiveThemeTokens,\n): CheckboxTokens {\n const primary = tokens.colors.primary.value;\n const primaryContrast = tokens.colors.primary.contrast;\n const secondary = tokens.colors.secondary.value;\n const secondaryContrast = tokens.colors.secondary.contrast;\n\n return {\n borderWidth: tokens.borderSize.md,\n borderRadius: tokens.radii.sm,\n
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-checkbox-tokens.ts"],"sourcesContent":["import type { CheckboxTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createCheckboxTokens(\n tokens: PrimitiveThemeTokens,\n): CheckboxTokens {\n const primary = tokens.colors.primary.value;\n const primaryContrast = tokens.colors.primary.contrast;\n const secondary = tokens.colors.secondary.value;\n const secondaryContrast = tokens.colors.secondary.contrast;\n\n return {\n borderWidth: tokens.borderSize.md,\n borderRadius: tokens.radii.sm,\n\n sizes: {\n small: {\n size: 20,\n iconSize: 14,\n hitSlop: 12,\n },\n medium: {\n size: 24,\n iconSize: 18,\n hitSlop: 10,\n },\n large: {\n size: 28,\n iconSize: 22,\n hitSlop: 8,\n },\n },\n\n variants: {\n filled: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: primaryContrast,\n },\n selected: {\n backgroundColor: primary,\n borderColor: primary,\n color: primaryContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.neutral[\"5\"],\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.neutral[\"3\"],\n borderColor: tokens.colors.neutral[\"5\"],\n color: tokens.colors.text.disabled,\n },\n },\n outlined: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: primary,\n },\n selected: {\n backgroundColor: \"transparent\",\n borderColor: primary,\n color: primary,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.neutral[\"5\"],\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.neutral[\"3\"],\n borderColor: tokens.colors.neutral[\"5\"],\n color: tokens.colors.text.disabled,\n },\n },\n soft: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: secondaryContrast,\n },\n selected: {\n backgroundColor: secondary,\n borderColor: secondary,\n color: secondaryContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.neutral[\"5\"],\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.neutral[\"3\"],\n borderColor: tokens.colors.neutral[\"5\"],\n color: tokens.colors.text.disabled,\n },\n },\n },\n };\n}\n"],"mappings":"AAEO,SAAS,qBACd,QACgB;AAChB,QAAM,UAAU,OAAO,OAAO,QAAQ;AACtC,QAAM,kBAAkB,OAAO,OAAO,QAAQ;AAC9C,QAAM,YAAY,OAAO,OAAO,UAAU;AAC1C,QAAM,oBAAoB,OAAO,OAAO,UAAU;AAElD,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,cAAc,OAAO,MAAM;AAAA,IAE3B,OAAO;AAAA,MACL,OAAO;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,UACzC,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,oBAAoB;AAAA,UAClB,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,UACtC,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,QACA,kBAAkB;AAAA,UAChB,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,UAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,UACtC,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,UAAU;AAAA,QACR,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,UACzC,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,oBAAoB;AAAA,UAClB,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,UACtC,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,QACA,kBAAkB;AAAA,UAChB,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,UAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,UACtC,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,MAAM;AAAA,QACJ,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,UACzC,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,oBAAoB;AAAA,UAClB,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,UACtC,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,QACA,kBAAkB;AAAA,UAChB,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,UAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,UACtC,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
|
-
import { ControlAddonTokens, ControlContainerTokens, ControlErrorTokens, ControlInputTokens, ControlLabelTokens } from '../types/control-
|
|
2
|
+
import { ControlAddonTokens, ControlContainerTokens, ControlErrorTokens, ControlInputTokens, ControlLabelTokens } from '../types/control-tokens.types.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
5
|
import '../types/checkbox-tokens.types.mjs';
|
|
@@ -18,6 +18,7 @@ import '../types/progress-tokens.types.mjs';
|
|
|
18
18
|
import '../types/spinner-tokens.types.mjs';
|
|
19
19
|
import '../types/select-tokens.types.mjs';
|
|
20
20
|
import '../types/skeleton-tokens.types.mjs';
|
|
21
|
+
import '../types/slider-tokens.types.mjs';
|
|
21
22
|
import '../types/stepper-tokens.types.mjs';
|
|
22
23
|
import '../types/switch-tokens.types.mjs';
|
|
23
24
|
import '../types/tag-tokens.types.mjs';
|
|
@@ -1,46 +1,27 @@
|
|
|
1
1
|
function createControlAddonTokens(tokens) {
|
|
2
|
-
const DefaultIconColor = tokens.colors.text.primary;
|
|
3
|
-
const DisabledIconColor = tokens.colors.text.disabled;
|
|
4
|
-
const SoftIconColor = tokens.colors.accent.contrast;
|
|
5
2
|
return {
|
|
6
3
|
marginHorizontal: tokens.space.xxs,
|
|
7
4
|
hitSlop: tokens.space.sm,
|
|
8
5
|
variants: {
|
|
9
6
|
filled: {
|
|
10
|
-
iconColor:
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
default: { iconColor: tokens.colors.text.primary },
|
|
8
|
+
error: { iconColor: tokens.colors.text.primary },
|
|
9
|
+
disabled: { iconColor: tokens.colors.text.disabled },
|
|
10
|
+
disabledError: { iconColor: tokens.colors.text.disabled }
|
|
13
11
|
},
|
|
14
12
|
outlined: {
|
|
15
|
-
iconColor:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
soft: {
|
|
20
|
-
iconColor: SoftIconColor,
|
|
21
|
-
errorIconColor: SoftIconColor,
|
|
22
|
-
disabledIconColor: DisabledIconColor
|
|
23
|
-
},
|
|
24
|
-
ghost: {
|
|
25
|
-
iconColor: DefaultIconColor,
|
|
26
|
-
errorIconColor: DefaultIconColor,
|
|
27
|
-
disabledIconColor: DisabledIconColor
|
|
28
|
-
},
|
|
29
|
-
plain: {
|
|
30
|
-
iconColor: DefaultIconColor,
|
|
31
|
-
errorIconColor: DefaultIconColor,
|
|
32
|
-
disabledIconColor: DisabledIconColor
|
|
13
|
+
default: { iconColor: tokens.colors.text.primary },
|
|
14
|
+
error: { iconColor: tokens.colors.text.primary },
|
|
15
|
+
disabled: { iconColor: tokens.colors.text.disabled },
|
|
16
|
+
disabledError: { iconColor: tokens.colors.text.disabled }
|
|
33
17
|
}
|
|
34
18
|
}
|
|
35
19
|
};
|
|
36
20
|
}
|
|
37
21
|
function createControlContainerTokens(tokens) {
|
|
38
|
-
const ErrorColor = tokens.colors.feedback.error.value;
|
|
39
|
-
const TransparentColor = "transparent";
|
|
40
22
|
return {
|
|
41
23
|
borderWidth: tokens.borderSize.sm,
|
|
42
24
|
borderRadius: tokens.radii.sm,
|
|
43
|
-
disabledOpacity: 0.7,
|
|
44
25
|
sizes: {
|
|
45
26
|
small: {
|
|
46
27
|
height: 32,
|
|
@@ -57,39 +38,48 @@ function createControlContainerTokens(tokens) {
|
|
|
57
38
|
},
|
|
58
39
|
variants: {
|
|
59
40
|
filled: {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
41
|
+
default: {
|
|
42
|
+
backgroundColor: tokens.colors.surface.secondary.value,
|
|
43
|
+
borderColor: "transparent",
|
|
44
|
+
opacity: 1
|
|
45
|
+
},
|
|
46
|
+
error: {
|
|
47
|
+
backgroundColor: tokens.colors.surface.secondary.value,
|
|
48
|
+
borderColor: tokens.colors.feedback.error.value,
|
|
49
|
+
opacity: 1
|
|
50
|
+
},
|
|
51
|
+
disabled: {
|
|
52
|
+
backgroundColor: tokens.colors.neutral["2"],
|
|
53
|
+
borderColor: "transparent",
|
|
54
|
+
opacity: 0.7
|
|
55
|
+
},
|
|
56
|
+
disabledError: {
|
|
57
|
+
backgroundColor: tokens.colors.neutral["2"],
|
|
58
|
+
borderColor: tokens.colors.feedback.error.value,
|
|
59
|
+
opacity: 0.7
|
|
60
|
+
}
|
|
65
61
|
},
|
|
66
62
|
outlined: {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
plain: {
|
|
88
|
-
backgroundColor: TransparentColor,
|
|
89
|
-
borderColor: TransparentColor,
|
|
90
|
-
errorBorderColor: ErrorColor,
|
|
91
|
-
disabledBackgroundColor: TransparentColor,
|
|
92
|
-
disabledBorderColor: TransparentColor
|
|
63
|
+
default: {
|
|
64
|
+
backgroundColor: "transparent",
|
|
65
|
+
borderColor: tokens.colors.neutral["5"],
|
|
66
|
+
opacity: 1
|
|
67
|
+
},
|
|
68
|
+
error: {
|
|
69
|
+
backgroundColor: "transparent",
|
|
70
|
+
borderColor: tokens.colors.feedback.error.value,
|
|
71
|
+
opacity: 1
|
|
72
|
+
},
|
|
73
|
+
disabled: {
|
|
74
|
+
backgroundColor: "transparent",
|
|
75
|
+
borderColor: tokens.colors.neutral["5"],
|
|
76
|
+
opacity: 0.7
|
|
77
|
+
},
|
|
78
|
+
disabledError: {
|
|
79
|
+
backgroundColor: "transparent",
|
|
80
|
+
borderColor: tokens.colors.feedback.error.value,
|
|
81
|
+
opacity: 0.7
|
|
82
|
+
}
|
|
93
83
|
}
|
|
94
84
|
}
|
|
95
85
|
};
|
|
@@ -119,44 +109,40 @@ function createControlInputTokens(tokens) {
|
|
|
119
109
|
},
|
|
120
110
|
variants: {
|
|
121
111
|
filled: {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
112
|
+
default: {
|
|
113
|
+
color: tokens.colors.text.primary,
|
|
114
|
+
placeholderColor: tokens.colors.text.disabled
|
|
115
|
+
},
|
|
116
|
+
error: {
|
|
117
|
+
color: tokens.colors.text.primary,
|
|
118
|
+
placeholderColor: tokens.colors.feedback.error.value
|
|
119
|
+
},
|
|
120
|
+
disabled: {
|
|
121
|
+
color: tokens.colors.text.disabled,
|
|
122
|
+
placeholderColor: tokens.colors.text.disabled
|
|
123
|
+
},
|
|
124
|
+
disabledError: {
|
|
125
|
+
color: tokens.colors.text.disabled,
|
|
126
|
+
placeholderColor: tokens.colors.text.disabled
|
|
127
|
+
}
|
|
128
128
|
},
|
|
129
129
|
outlined: {
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
color: tokens.colors.text.primary,
|
|
147
|
-
placeholderColor: tokens.colors.text.disabled,
|
|
148
|
-
disabledColor: tokens.colors.text.disabled,
|
|
149
|
-
disabledPlaceholderColor: tokens.colors.text.disabled,
|
|
150
|
-
errorColor: tokens.colors.text.primary,
|
|
151
|
-
errorPlaceholderColor: tokens.colors.feedback.error.value
|
|
152
|
-
},
|
|
153
|
-
plain: {
|
|
154
|
-
color: tokens.colors.text.primary,
|
|
155
|
-
placeholderColor: tokens.colors.text.disabled,
|
|
156
|
-
disabledColor: tokens.colors.text.disabled,
|
|
157
|
-
disabledPlaceholderColor: tokens.colors.text.disabled,
|
|
158
|
-
errorColor: tokens.colors.text.primary,
|
|
159
|
-
errorPlaceholderColor: tokens.colors.feedback.error.value
|
|
130
|
+
default: {
|
|
131
|
+
color: tokens.colors.text.primary,
|
|
132
|
+
placeholderColor: tokens.colors.text.disabled
|
|
133
|
+
},
|
|
134
|
+
error: {
|
|
135
|
+
color: tokens.colors.text.primary,
|
|
136
|
+
placeholderColor: tokens.colors.feedback.error.value
|
|
137
|
+
},
|
|
138
|
+
disabled: {
|
|
139
|
+
color: tokens.colors.text.disabled,
|
|
140
|
+
placeholderColor: tokens.colors.text.disabled
|
|
141
|
+
},
|
|
142
|
+
disabledError: {
|
|
143
|
+
color: tokens.colors.text.disabled,
|
|
144
|
+
placeholderColor: tokens.colors.text.disabled
|
|
145
|
+
}
|
|
160
146
|
}
|
|
161
147
|
}
|
|
162
148
|
};
|
|
@@ -165,9 +151,12 @@ function createControlLabelTokens(tokens) {
|
|
|
165
151
|
return {
|
|
166
152
|
marginBottom: tokens.space.xxs,
|
|
167
153
|
fontSize: tokens.fontSize.xsm,
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
154
|
+
states: {
|
|
155
|
+
default: { color: tokens.colors.text.secondary },
|
|
156
|
+
error: { color: tokens.colors.feedback.error.value },
|
|
157
|
+
disabled: { color: tokens.colors.text.disabled },
|
|
158
|
+
disabledError: { color: tokens.colors.text.disabled }
|
|
159
|
+
}
|
|
171
160
|
};
|
|
172
161
|
}
|
|
173
162
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-control-tokens.ts"],"sourcesContent":["import {\n ControlAddonTokens,\n ControlContainerTokens,\n ControlErrorTokens,\n ControlInputTokens,\n ControlLabelTokens,\n PrimitiveThemeTokens,\n} from \"../types\";\n\nexport function createControlAddonTokens(\n tokens: PrimitiveThemeTokens,\n): ControlAddonTokens {\n
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-control-tokens.ts"],"sourcesContent":["import {\n ControlAddonTokens,\n ControlContainerTokens,\n ControlErrorTokens,\n ControlInputTokens,\n ControlLabelTokens,\n PrimitiveThemeTokens,\n} from \"../types\";\n\nexport function createControlAddonTokens(\n tokens: PrimitiveThemeTokens,\n): ControlAddonTokens {\n return {\n marginHorizontal: tokens.space.xxs,\n hitSlop: tokens.space.sm,\n variants: {\n filled: {\n default: { iconColor: tokens.colors.text.primary },\n error: { iconColor: tokens.colors.text.primary },\n disabled: { iconColor: tokens.colors.text.disabled },\n disabledError: { iconColor: tokens.colors.text.disabled },\n },\n outlined: {\n default: { iconColor: tokens.colors.text.primary },\n error: { iconColor: tokens.colors.text.primary },\n disabled: { iconColor: tokens.colors.text.disabled },\n disabledError: { iconColor: tokens.colors.text.disabled },\n },\n },\n };\n}\n\nexport function createControlContainerTokens(\n tokens: PrimitiveThemeTokens,\n): ControlContainerTokens {\n return {\n borderWidth: tokens.borderSize.sm,\n borderRadius: tokens.radii.sm,\n\n sizes: {\n small: {\n height: 32,\n paddingHorizontal: tokens.space.xs,\n },\n medium: {\n height: 40,\n paddingHorizontal: tokens.space.xs,\n },\n large: {\n height: 48,\n paddingHorizontal: tokens.space.xs,\n },\n },\n\n variants: {\n filled: {\n default: {\n backgroundColor: tokens.colors.surface.secondary.value,\n borderColor: \"transparent\",\n opacity: 1,\n },\n error: {\n backgroundColor: tokens.colors.surface.secondary.value,\n borderColor: tokens.colors.feedback.error.value,\n opacity: 1,\n },\n disabled: {\n backgroundColor: tokens.colors.neutral[\"2\"],\n borderColor: \"transparent\",\n opacity: 0.7,\n },\n disabledError: {\n backgroundColor: tokens.colors.neutral[\"2\"],\n borderColor: tokens.colors.feedback.error.value,\n opacity: 0.7,\n },\n },\n\n outlined: {\n default: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.neutral[\"5\"],\n opacity: 1,\n },\n error: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.feedback.error.value,\n opacity: 1,\n },\n disabled: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.neutral[\"5\"],\n opacity: 0.7,\n },\n disabledError: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.feedback.error.value,\n opacity: 0.7,\n },\n },\n },\n };\n}\n\nexport function createControlErrorTokens(\n tokens: PrimitiveThemeTokens,\n): ControlErrorTokens {\n return {\n marginTop: tokens.space.xxs,\n color: tokens.colors.feedback.error.value,\n fontSize: tokens.fontSize.xs,\n };\n}\n\nexport function createControlInputTokens(\n tokens: PrimitiveThemeTokens,\n): ControlInputTokens {\n return {\n flex: 1,\n fontFamily: tokens.fontFamily.normal[400],\n paddingHorizontal: tokens.space.xxs,\n\n sizes: {\n small: {\n fontSize: tokens.fontSize.xs,\n },\n medium: {\n fontSize: tokens.fontSize.xsm,\n },\n large: {\n fontSize: tokens.fontSize.sm,\n },\n },\n\n variants: {\n filled: {\n default: {\n color: tokens.colors.text.primary,\n placeholderColor: tokens.colors.text.disabled,\n },\n error: {\n color: tokens.colors.text.primary,\n placeholderColor: tokens.colors.feedback.error.value,\n },\n disabled: {\n color: tokens.colors.text.disabled,\n placeholderColor: tokens.colors.text.disabled,\n },\n disabledError: {\n color: tokens.colors.text.disabled,\n placeholderColor: tokens.colors.text.disabled,\n },\n },\n\n outlined: {\n default: {\n color: tokens.colors.text.primary,\n placeholderColor: tokens.colors.text.disabled,\n },\n error: {\n color: tokens.colors.text.primary,\n placeholderColor: tokens.colors.feedback.error.value,\n },\n disabled: {\n color: tokens.colors.text.disabled,\n placeholderColor: tokens.colors.text.disabled,\n },\n disabledError: {\n color: tokens.colors.text.disabled,\n placeholderColor: tokens.colors.text.disabled,\n },\n },\n },\n };\n}\n\nexport function createControlLabelTokens(\n tokens: PrimitiveThemeTokens,\n): ControlLabelTokens {\n return {\n marginBottom: tokens.space.xxs,\n fontSize: tokens.fontSize.xsm,\n states: {\n default: { color: tokens.colors.text.secondary },\n error: { color: tokens.colors.feedback.error.value },\n disabled: { color: tokens.colors.text.disabled },\n disabledError: { color: tokens.colors.text.disabled },\n },\n };\n}\n"],"mappings":"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","names":[]}
|
|
@@ -8,7 +8,7 @@ import '../types/accordion-tokens.types.mjs';
|
|
|
8
8
|
import '../types/avatar-tokens.types.mjs';
|
|
9
9
|
import '../types/buttons-tokens.types.mjs';
|
|
10
10
|
import '../types/card-tokens.types.mjs';
|
|
11
|
-
import '../types/control-
|
|
11
|
+
import '../types/control-tokens.types.mjs';
|
|
12
12
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
13
13
|
import '../types/divider-tokens.types.mjs';
|
|
14
14
|
import '../types/flyout-tokens.types.mjs';
|
|
@@ -18,6 +18,7 @@ import '../types/progress-tokens.types.mjs';
|
|
|
18
18
|
import '../types/spinner-tokens.types.mjs';
|
|
19
19
|
import '../types/select-tokens.types.mjs';
|
|
20
20
|
import '../types/skeleton-tokens.types.mjs';
|
|
21
|
+
import '../types/slider-tokens.types.mjs';
|
|
21
22
|
import '../types/stepper-tokens.types.mjs';
|
|
22
23
|
import '../types/switch-tokens.types.mjs';
|
|
23
24
|
import '../types/tag-tokens.types.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-data-state-tokens.ts"],"sourcesContent":["import { DataStateTokens, PrimitiveThemeTokens } from \"../types\";\
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-data-state-tokens.ts"],"sourcesContent":["import { DataStateTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createDataStateTokens(\n tokens: PrimitiveThemeTokens,\n): DataStateTokens {\n return {\n details: {\n gap: 10,\n iconSize: 150,\n iconColor: tokens.colors.primary.value,\n },\n\n actionsFooter: {\n gap: 10,\n },\n\n content: {\n zIndex: 1,\n },\n\n loading: {\n transitionDuration: 250,\n loaderZIndex: 1,\n },\n };\n}\n"],"mappings":"AAEO,SAAS,sBACd,QACiB;AACjB,SAAO;AAAA,IACL,SAAS;AAAA,MACP,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW,OAAO,OAAO,QAAQ;AAAA,IACnC;AAAA,IAEA,eAAe;AAAA,MACb,KAAK;AAAA,IACP;AAAA,IAEA,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAEA,SAAS;AAAA,MACP,oBAAoB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,EACF;AACF;","names":[]}
|
|
@@ -8,7 +8,7 @@ import '../types/accordion-tokens.types.mjs';
|
|
|
8
8
|
import '../types/avatar-tokens.types.mjs';
|
|
9
9
|
import '../types/buttons-tokens.types.mjs';
|
|
10
10
|
import '../types/card-tokens.types.mjs';
|
|
11
|
-
import '../types/control-
|
|
11
|
+
import '../types/control-tokens.types.mjs';
|
|
12
12
|
import '../types/data-state-tokens.types.mjs';
|
|
13
13
|
import '../types/divider-tokens.types.mjs';
|
|
14
14
|
import '../types/flyout-tokens.types.mjs';
|
|
@@ -18,6 +18,7 @@ import '../types/progress-tokens.types.mjs';
|
|
|
18
18
|
import '../types/spinner-tokens.types.mjs';
|
|
19
19
|
import '../types/select-tokens.types.mjs';
|
|
20
20
|
import '../types/skeleton-tokens.types.mjs';
|
|
21
|
+
import '../types/slider-tokens.types.mjs';
|
|
21
22
|
import '../types/stepper-tokens.types.mjs';
|
|
22
23
|
import '../types/switch-tokens.types.mjs';
|
|
23
24
|
import '../types/tag-tokens.types.mjs';
|
|
@@ -7,12 +7,24 @@ function createDatetimePickerTokens(tokens) {
|
|
|
7
7
|
day: {
|
|
8
8
|
size: 40,
|
|
9
9
|
borderRadius: tokens.radii.sm,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
states: {
|
|
11
|
+
default: {
|
|
12
|
+
backgroundColor: "transparent",
|
|
13
|
+
color: tokens.colors.text.primary
|
|
14
|
+
},
|
|
15
|
+
outsideMonth: {
|
|
16
|
+
backgroundColor: "transparent",
|
|
17
|
+
color: tokens.colors.neutral["5"]
|
|
18
|
+
},
|
|
19
|
+
range: {
|
|
20
|
+
backgroundColor: tokens.colors.secondary.value,
|
|
21
|
+
color: tokens.colors.secondary.contrast
|
|
22
|
+
},
|
|
23
|
+
selected: {
|
|
24
|
+
backgroundColor: tokens.colors.primary.value,
|
|
25
|
+
color: tokens.colors.primary.contrast
|
|
26
|
+
}
|
|
27
|
+
}
|
|
16
28
|
},
|
|
17
29
|
datePickerFlyout: {
|
|
18
30
|
gap: tokens.space.msm
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-datetime-picker.ts"],"sourcesContent":["import { DatetimePickerTokens, PrimitiveThemeTokens } from \"../types\";\
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-datetime-picker.ts"],"sourcesContent":["import { DatetimePickerTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createDatetimePickerTokens(\n tokens: PrimitiveThemeTokens,\n): DatetimePickerTokens {\n return {\n calendar: {\n dayNamesMarginBottom: tokens.space.msm,\n weeksGap: tokens.space.xxs,\n },\n day: {\n size: 40,\n borderRadius: tokens.radii.sm,\n states: {\n default: {\n backgroundColor: \"transparent\",\n color: tokens.colors.text.primary,\n },\n outsideMonth: {\n backgroundColor: \"transparent\",\n color: tokens.colors.neutral[\"5\"],\n },\n range: {\n backgroundColor: tokens.colors.secondary.value,\n color: tokens.colors.secondary.contrast,\n },\n selected: {\n backgroundColor: tokens.colors.primary.value,\n color: tokens.colors.primary.contrast,\n },\n },\n },\n datePickerFlyout: {\n gap: tokens.space.msm,\n },\n datetimePickerFlyout: {\n gap: tokens.space.msm,\n },\n datetimeRangePickerFlyout: {\n gap: tokens.space.msm,\n timeInputsGap: tokens.space.xs,\n },\n flyoutActions: {\n gap: tokens.space.msm,\n buttonsGap: tokens.space.xs,\n clearColor: tokens.colors.primary.value,\n },\n quickDateOptions: {\n gap: tokens.space.xs,\n },\n visibleDateSelect: {\n gap: tokens.space.xs,\n },\n };\n}\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,MAC3B,QAAQ;AAAA,QACN,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,QACA,cAAc;AAAA,UACZ,iBAAiB;AAAA,UACjB,OAAO,OAAO,OAAO,QAAQ,GAAG;AAAA,QAClC;AAAA,QACA,OAAO;AAAA,UACL,iBAAiB,OAAO,OAAO,UAAU;AAAA,UACzC,OAAO,OAAO,OAAO,UAAU;AAAA,QACjC;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB,OAAO,OAAO,QAAQ;AAAA,UACvC,OAAO,OAAO,OAAO,QAAQ;AAAA,QAC/B;AAAA,MACF;AAAA,IACF;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":[]}
|
|
@@ -8,7 +8,7 @@ import '../types/accordion-tokens.types.mjs';
|
|
|
8
8
|
import '../types/avatar-tokens.types.mjs';
|
|
9
9
|
import '../types/buttons-tokens.types.mjs';
|
|
10
10
|
import '../types/card-tokens.types.mjs';
|
|
11
|
-
import '../types/control-
|
|
11
|
+
import '../types/control-tokens.types.mjs';
|
|
12
12
|
import '../types/data-state-tokens.types.mjs';
|
|
13
13
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
14
14
|
import '../types/flyout-tokens.types.mjs';
|
|
@@ -18,6 +18,7 @@ import '../types/progress-tokens.types.mjs';
|
|
|
18
18
|
import '../types/spinner-tokens.types.mjs';
|
|
19
19
|
import '../types/select-tokens.types.mjs';
|
|
20
20
|
import '../types/skeleton-tokens.types.mjs';
|
|
21
|
+
import '../types/slider-tokens.types.mjs';
|
|
21
22
|
import '../types/stepper-tokens.types.mjs';
|
|
22
23
|
import '../types/switch-tokens.types.mjs';
|
|
23
24
|
import '../types/tag-tokens.types.mjs';
|
|
@@ -8,7 +8,7 @@ import '../types/accordion-tokens.types.mjs';
|
|
|
8
8
|
import '../types/avatar-tokens.types.mjs';
|
|
9
9
|
import '../types/buttons-tokens.types.mjs';
|
|
10
10
|
import '../types/card-tokens.types.mjs';
|
|
11
|
-
import '../types/control-
|
|
11
|
+
import '../types/control-tokens.types.mjs';
|
|
12
12
|
import '../types/data-state-tokens.types.mjs';
|
|
13
13
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
14
14
|
import '../types/divider-tokens.types.mjs';
|
|
@@ -18,6 +18,7 @@ import '../types/progress-tokens.types.mjs';
|
|
|
18
18
|
import '../types/spinner-tokens.types.mjs';
|
|
19
19
|
import '../types/select-tokens.types.mjs';
|
|
20
20
|
import '../types/skeleton-tokens.types.mjs';
|
|
21
|
+
import '../types/slider-tokens.types.mjs';
|
|
21
22
|
import '../types/stepper-tokens.types.mjs';
|
|
22
23
|
import '../types/switch-tokens.types.mjs';
|
|
23
24
|
import '../types/tag-tokens.types.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-flyout-tokens.ts"],"sourcesContent":["import { FlyoutTokens, PrimitiveThemeTokens } from \"../types\";\
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-flyout-tokens.ts"],"sourcesContent":["import { FlyoutTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createFlyoutTokens(tokens: PrimitiveThemeTokens): FlyoutTokens {\n return {\n zIndexBase: 100,\n\n maxHeightRatio: 0.7,\n\n overlayColor: tokens.colors.black,\n overlayVisibleOpacity: 0.4,\n\n backgroundColor: tokens.colors.surface.secondary.value,\n contentPaddingHorizontal: tokens.space.md,\n\n borderRadius: tokens.radii.xl,\n\n hiddenOpacity: 0,\n\n title: {\n paddingVertical: tokens.space.msm,\n paddingHorizontal: tokens.space.md,\n },\n\n handle: {\n containerHeight: 32,\n width: \"25%\",\n height: 6,\n borderRadius: tokens.radii.round,\n backgroundColor: tokens.colors.surface.primary.value,\n },\n };\n}\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":[]}
|
|
@@ -7,7 +7,7 @@ import '../types/radio-tokens.types.mjs';
|
|
|
7
7
|
import '../types/accordion-tokens.types.mjs';
|
|
8
8
|
import '../types/avatar-tokens.types.mjs';
|
|
9
9
|
import '../types/card-tokens.types.mjs';
|
|
10
|
-
import '../types/control-
|
|
10
|
+
import '../types/control-tokens.types.mjs';
|
|
11
11
|
import '../types/data-state-tokens.types.mjs';
|
|
12
12
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
13
13
|
import '../types/divider-tokens.types.mjs';
|
|
@@ -18,6 +18,7 @@ import '../types/progress-tokens.types.mjs';
|
|
|
18
18
|
import '../types/spinner-tokens.types.mjs';
|
|
19
19
|
import '../types/select-tokens.types.mjs';
|
|
20
20
|
import '../types/skeleton-tokens.types.mjs';
|
|
21
|
+
import '../types/slider-tokens.types.mjs';
|
|
21
22
|
import '../types/stepper-tokens.types.mjs';
|
|
22
23
|
import '../types/switch-tokens.types.mjs';
|
|
23
24
|
import '../types/tag-tokens.types.mjs';
|