@impulse-ui-native/theme 2.4.0 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -0
- package/dist/hooks/index.d.mts +6 -1
- package/dist/hooks/use-colors.hook.d.mts +6 -1
- package/dist/hooks/use-components-tokens.hook.d.mts +6 -1
- package/dist/hooks/use-components-tokens.hook.js.map +1 -1
- package/dist/hooks/use-theme.hook.d.mts +6 -1
- package/dist/hooks/use-themed-styles.d.mts +6 -1
- package/dist/index.d.mts +7 -2
- package/dist/providers/index.d.mts +6 -1
- package/dist/providers/theme.provider.d.mts +6 -1
- package/dist/providers/theme.provider.js +12 -11
- package/dist/providers/theme.provider.js.map +1 -1
- package/dist/theme/create-button-tokens.d.mts +6 -1
- package/dist/theme/create-checkbox-tokens.d.mts +21 -0
- package/dist/theme/create-checkbox-tokens.js +63 -0
- package/dist/theme/create-checkbox-tokens.js.map +1 -0
- package/dist/theme/create-control-tokens.d.mts +6 -1
- package/dist/theme/create-control-tokens.js +30 -3
- package/dist/theme/create-control-tokens.js.map +1 -1
- package/dist/theme/create-data-state-tokens.d.mts +6 -1
- package/dist/theme/create-datetime-picker.d.mts +6 -1
- package/dist/theme/create-flyout-tokens.d.mts +6 -1
- package/dist/theme/create-icon-button-tokens.d.mts +6 -1
- package/dist/theme/create-icon-tokens.d.mts +6 -0
- package/dist/theme/create-icon-tokens.js +13 -0
- package/dist/theme/create-icon-tokens.js.map +1 -0
- package/dist/theme/create-pressable-tokens.d.mts +5 -0
- package/dist/theme/create-pressable-tokens.js +10 -0
- package/dist/theme/create-pressable-tokens.js.map +1 -0
- package/dist/theme/create-radio-tokens.d.mts +21 -0
- package/dist/theme/create-radio-tokens.js +63 -0
- package/dist/theme/create-radio-tokens.js.map +1 -0
- package/dist/theme/create-select-tokens.d.mts +6 -1
- package/dist/theme/create-select-tokens.js +3 -0
- package/dist/theme/create-select-tokens.js.map +1 -1
- package/dist/theme/create-skeleton-tokens.d.mts +6 -1
- package/dist/theme/create-stepper-tokens.d.mts +21 -0
- package/dist/theme/create-stepper-tokens.js +12 -0
- package/dist/theme/create-stepper-tokens.js.map +1 -0
- package/dist/theme/create-tag-tokens.d.mts +6 -1
- package/dist/theme/create-tag-tokens.js +1 -0
- package/dist/theme/create-tag-tokens.js.map +1 -1
- package/dist/theme/create-time-picker-tokens.d.mts +6 -1
- package/dist/theme/dark.theme.d.mts +6 -1
- package/dist/theme/dark.theme.js +3 -1
- package/dist/theme/dark.theme.js.map +1 -1
- package/dist/theme/index.d.mts +7 -2
- package/dist/theme/light.theme.d.mts +6 -1
- package/dist/theme/light.theme.js +3 -1
- package/dist/theme/light.theme.js.map +1 -1
- package/dist/theme/tokens.theme.d.mts +9 -3
- package/dist/theme/tokens.theme.js +21 -0
- package/dist/theme/tokens.theme.js.map +1 -1
- package/dist/types/checkbox-tokens.types.d.mts +25 -0
- package/dist/types/checkbox-tokens.types.js +1 -0
- package/dist/types/checkbox-tokens.types.js.map +1 -0
- package/dist/types/control-tokes.types.d.mts +8 -5
- package/dist/types/icon-tokens.types.d.mts +7 -0
- package/dist/types/icon-tokens.types.js +1 -0
- package/dist/types/icon-tokens.types.js.map +1 -0
- package/dist/types/index.d.mts +6 -1
- package/dist/types/index.js +5 -0
- package/dist/types/index.js.map +1 -1
- package/dist/types/pressable-tokens.types.d.mts +6 -0
- package/dist/types/pressable-tokens.types.js +1 -0
- package/dist/types/pressable-tokens.types.js.map +1 -0
- package/dist/types/radio-tokens.types.d.mts +25 -0
- package/dist/types/radio-tokens.types.js +1 -0
- package/dist/types/radio-tokens.types.js.map +1 -0
- package/dist/types/select-tokens.types.d.mts +3 -0
- package/dist/types/stepper-tokens.types.d.mts +9 -0
- package/dist/types/stepper-tokens.types.js +1 -0
- package/dist/types/stepper-tokens.types.js.map +1 -0
- package/dist/types/tag-tokens.types.d.mts +1 -0
- package/dist/types/theme-provider.types.d.mts +12 -1
- package/dist/utils/index.d.mts +6 -1
- package/dist/utils/style.utils.d.mts +6 -1
- package/package.json +4 -4
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-pressable-tokens.ts"],"sourcesContent":["import { PressableTokens } from \"../types\";\n\nexport function createPressableTokens(): PressableTokens {\n return {\n disabledOpacity: 0.6,\n pressedOpacity: 0.6,\n };\n}\n"],"mappings":"AAEO,SAAS,wBAAyC;AACvD,SAAO;AAAA,IACL,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,EAClB;AACF;","names":[]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
|
+
import { RadioTokens } from '../types/radio-tokens.types.mjs';
|
|
3
|
+
import '../types/checkbox-tokens.types.mjs';
|
|
4
|
+
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/buttons-tokens.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/icon-tokens.types.mjs';
|
|
11
|
+
import '../types/pressable-tokens.types.mjs';
|
|
12
|
+
import '../types/select-tokens.types.mjs';
|
|
13
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
14
|
+
import '../types/stepper-tokens.types.mjs';
|
|
15
|
+
import '../types/tag-tokens.types.mjs';
|
|
16
|
+
import '../types/time-picker-token.types.mjs';
|
|
17
|
+
import '../types/tokens.types.mjs';
|
|
18
|
+
|
|
19
|
+
declare function createRadioTokens(tokens: PrimitiveThemeTokens): RadioTokens;
|
|
20
|
+
|
|
21
|
+
export { createRadioTokens };
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
function createRadioTokens(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
|
+
return {
|
|
7
|
+
borderWidth: tokens.borderSize.md,
|
|
8
|
+
borderRadius: tokens.radii.round,
|
|
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
|
+
sizes: {
|
|
15
|
+
small: {
|
|
16
|
+
size: 20,
|
|
17
|
+
indicatorSize: 8,
|
|
18
|
+
hitSlop: 12
|
|
19
|
+
},
|
|
20
|
+
medium: {
|
|
21
|
+
size: 24,
|
|
22
|
+
indicatorSize: 10,
|
|
23
|
+
hitSlop: 10
|
|
24
|
+
},
|
|
25
|
+
large: {
|
|
26
|
+
size: 28,
|
|
27
|
+
indicatorSize: 12,
|
|
28
|
+
hitSlop: 8
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
variants: {
|
|
32
|
+
filled: {
|
|
33
|
+
backgroundColor: primary,
|
|
34
|
+
borderColor: primary,
|
|
35
|
+
color: primaryContrast
|
|
36
|
+
},
|
|
37
|
+
outlined: {
|
|
38
|
+
backgroundColor: "transparent",
|
|
39
|
+
borderColor: primary,
|
|
40
|
+
color: primary
|
|
41
|
+
},
|
|
42
|
+
soft: {
|
|
43
|
+
backgroundColor: secondary,
|
|
44
|
+
borderColor: secondary,
|
|
45
|
+
color: secondaryContrast
|
|
46
|
+
},
|
|
47
|
+
ghost: {
|
|
48
|
+
backgroundColor: "transparent",
|
|
49
|
+
borderColor: "transparent",
|
|
50
|
+
color: primary
|
|
51
|
+
},
|
|
52
|
+
plain: {
|
|
53
|
+
backgroundColor: "transparent",
|
|
54
|
+
borderColor: "transparent",
|
|
55
|
+
color: primary
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
export {
|
|
61
|
+
createRadioTokens
|
|
62
|
+
};
|
|
63
|
+
//# sourceMappingURL=create-radio-tokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-radio-tokens.ts"],"sourcesContent":["import type { PrimitiveThemeTokens, RadioTokens } from \"../types\";\n\nexport function createRadioTokens(tokens: PrimitiveThemeTokens): RadioTokens {\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.round,\n uncheckedBackgroundColor: \"transparent\",\n uncheckedBorderColor: tokens.colors.border.strong.value,\n disabledBackgroundColor: tokens.colors.neutral[\"3\"],\n disabledBorderColor: tokens.colors.neutral[\"5\"],\n disabledColor: tokens.colors.text.disabled,\n\n sizes: {\n small: {\n size: 20,\n indicatorSize: 8,\n hitSlop: 12,\n },\n medium: {\n size: 24,\n indicatorSize: 10,\n hitSlop: 10,\n },\n large: {\n size: 28,\n indicatorSize: 12,\n hitSlop: 8,\n },\n },\n\n variants: {\n filled: {\n backgroundColor: primary,\n borderColor: primary,\n color: primaryContrast,\n },\n outlined: {\n backgroundColor: \"transparent\",\n borderColor: primary,\n color: primary,\n },\n soft: {\n backgroundColor: secondary,\n borderColor: secondary,\n color: secondaryContrast,\n },\n ghost: {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n color: primary,\n },\n plain: {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n color: primary,\n },\n },\n };\n}\n"],"mappings":"AAEO,SAAS,kBAAkB,QAA2C;AAC3E,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,IAC3B,0BAA0B;AAAA,IAC1B,sBAAsB,OAAO,OAAO,OAAO,OAAO;AAAA,IAClD,yBAAyB,OAAO,OAAO,QAAQ,GAAG;AAAA,IAClD,qBAAqB,OAAO,OAAO,QAAQ,GAAG;AAAA,IAC9C,eAAe,OAAO,OAAO,KAAK;AAAA,IAElC,OAAO;AAAA,MACL,OAAO;AAAA,QACL,MAAM;AAAA,QACN,eAAe;AAAA,QACf,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,eAAe;AAAA,QACf,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,eAAe;AAAA,QACf,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,UAAU;AAAA,QACR,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
2
|
import { SelectTokens } from '../types/select-tokens.types.mjs';
|
|
3
|
-
import '../types/
|
|
3
|
+
import '../types/checkbox-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/radio-tokens.types.mjs';
|
|
6
|
+
import '../types/buttons-tokens.types.mjs';
|
|
5
7
|
import '../types/control-tokes.types.mjs';
|
|
6
8
|
import '../types/data-state-tokens.types.mjs';
|
|
7
9
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
8
10
|
import '../types/flyout-tokens.types.mjs';
|
|
11
|
+
import '../types/icon-tokens.types.mjs';
|
|
12
|
+
import '../types/pressable-tokens.types.mjs';
|
|
9
13
|
import '../types/skeleton-tokens.types.mjs';
|
|
14
|
+
import '../types/stepper-tokens.types.mjs';
|
|
10
15
|
import '../types/tag-tokens.types.mjs';
|
|
11
16
|
import '../types/time-picker-token.types.mjs';
|
|
12
17
|
import '../types/tokens.types.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-select-tokens.ts"],"sourcesContent":["import { PrimitiveThemeTokens, SelectTokens } from \"../types\";\
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-select-tokens.ts"],"sourcesContent":["import { PrimitiveThemeTokens, SelectTokens } from \"../types\";\n\nexport function createSelectTokens(tokens: PrimitiveThemeTokens): SelectTokens {\n return {\n flyoutHeight: 300,\n multiValueGap: tokens.space.xxs,\n multiValueMarginHorizontal: tokens.space.xxs,\n\n option: {\n padding: tokens.space.sm,\n selectedIconColor: tokens.colors.primary.value,\n selectedIconVisibleOpacity: 1,\n selectedIconHiddenOpacity: 0,\n },\n };\n}\n"],"mappings":"AAEO,SAAS,mBAAmB,QAA4C;AAC7E,SAAO;AAAA,IACL,cAAc;AAAA,IACd,eAAe,OAAO,MAAM;AAAA,IAC5B,4BAA4B,OAAO,MAAM;AAAA,IAEzC,QAAQ;AAAA,MACN,SAAS,OAAO,MAAM;AAAA,MACtB,mBAAmB,OAAO,OAAO,QAAQ;AAAA,MACzC,4BAA4B;AAAA,MAC5B,2BAA2B;AAAA,IAC7B;AAAA,EACF;AACF;","names":[]}
|
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
2
|
import { SkeletonTokens } from '../types/skeleton-tokens.types.mjs';
|
|
3
|
-
import '../types/
|
|
3
|
+
import '../types/checkbox-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/radio-tokens.types.mjs';
|
|
6
|
+
import '../types/buttons-tokens.types.mjs';
|
|
5
7
|
import '../types/control-tokes.types.mjs';
|
|
6
8
|
import '../types/data-state-tokens.types.mjs';
|
|
7
9
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
8
10
|
import '../types/flyout-tokens.types.mjs';
|
|
11
|
+
import '../types/icon-tokens.types.mjs';
|
|
12
|
+
import '../types/pressable-tokens.types.mjs';
|
|
9
13
|
import '../types/select-tokens.types.mjs';
|
|
14
|
+
import '../types/stepper-tokens.types.mjs';
|
|
10
15
|
import '../types/tag-tokens.types.mjs';
|
|
11
16
|
import '../types/time-picker-token.types.mjs';
|
|
12
17
|
import '../types/tokens.types.mjs';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
|
+
import { StepperTokens } from '../types/stepper-tokens.types.mjs';
|
|
3
|
+
import '../types/checkbox-tokens.types.mjs';
|
|
4
|
+
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/radio-tokens.types.mjs';
|
|
6
|
+
import '../types/buttons-tokens.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/icon-tokens.types.mjs';
|
|
12
|
+
import '../types/pressable-tokens.types.mjs';
|
|
13
|
+
import '../types/select-tokens.types.mjs';
|
|
14
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
15
|
+
import '../types/tag-tokens.types.mjs';
|
|
16
|
+
import '../types/time-picker-token.types.mjs';
|
|
17
|
+
import '../types/tokens.types.mjs';
|
|
18
|
+
|
|
19
|
+
declare function createStepperTokens(tokens: PrimitiveThemeTokens): StepperTokens;
|
|
20
|
+
|
|
21
|
+
export { createStepperTokens };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-stepper-tokens.ts"],"sourcesContent":["import { PrimitiveThemeTokens, StepperTokens } from \"../types\";\n\nexport function createStepperTokens(\n tokens: PrimitiveThemeTokens,\n): StepperTokens {\n return {\n navigation: {\n itemHeight: 6,\n itemBackgroundColor: tokens.colors.primary.value,\n },\n };\n}\n"],"mappings":"AAEO,SAAS,oBACd,QACe;AACf,SAAO;AAAA,IACL,YAAY;AAAA,MACV,YAAY;AAAA,MACZ,qBAAqB,OAAO,OAAO,QAAQ;AAAA,IAC7C;AAAA,EACF;AACF;","names":[]}
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
2
|
import { TagTokens } from '../types/tag-tokens.types.mjs';
|
|
3
|
-
import '../types/
|
|
3
|
+
import '../types/checkbox-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/radio-tokens.types.mjs';
|
|
6
|
+
import '../types/buttons-tokens.types.mjs';
|
|
5
7
|
import '../types/control-tokes.types.mjs';
|
|
6
8
|
import '../types/data-state-tokens.types.mjs';
|
|
7
9
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
8
10
|
import '../types/flyout-tokens.types.mjs';
|
|
11
|
+
import '../types/icon-tokens.types.mjs';
|
|
12
|
+
import '../types/pressable-tokens.types.mjs';
|
|
9
13
|
import '../types/select-tokens.types.mjs';
|
|
10
14
|
import '../types/skeleton-tokens.types.mjs';
|
|
15
|
+
import '../types/stepper-tokens.types.mjs';
|
|
11
16
|
import '../types/time-picker-token.types.mjs';
|
|
12
17
|
import '../types/tokens.types.mjs';
|
|
13
18
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-tag-tokens.ts"],"sourcesContent":["import { PrimitiveThemeTokens, TagTokens } from \"../types\";\
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-tag-tokens.ts"],"sourcesContent":["import { PrimitiveThemeTokens, TagTokens } from \"../types\";\n\nexport function createTagTokens(tokens: PrimitiveThemeTokens): TagTokens {\n const neutral = tokens.colors.neutral;\n const disabledColor = tokens.colors.text.disabled;\n\n const createVariants = (value: string, contrast: string) => ({\n filled: {\n backgroundColor: value,\n borderColor: value,\n color: contrast,\n\n disabledBackgroundColor: neutral[\"4\"],\n disabledBorderColor: neutral[\"6\"],\n disabledColor,\n },\n\n outlined: {\n backgroundColor: \"transparent\",\n borderColor: value,\n color: value,\n\n disabledBackgroundColor: \"transparent\",\n disabledBorderColor: neutral[\"6\"],\n disabledColor,\n },\n\n soft: {\n backgroundColor: contrast,\n borderColor: contrast,\n color: value,\n\n disabledBackgroundColor: neutral[\"3\"],\n disabledBorderColor: neutral[\"3\"],\n disabledColor,\n },\n\n ghost: {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n color: value,\n\n disabledBackgroundColor: \"transparent\",\n disabledBorderColor: \"transparent\",\n disabledColor,\n },\n\n plain: {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n color: value,\n\n disabledBackgroundColor: \"transparent\",\n disabledBorderColor: \"transparent\",\n disabledColor,\n },\n });\n\n return {\n borderWidth: tokens.borderSize.sm,\n borderRadius: tokens.radii.round,\n gap: tokens.space.xxs,\n closeHitSlop: 10,\n iconMarginLeft: tokens.borderSize.md,\n\n sizes: {\n small: {\n height: 24,\n paddingHorizontal: tokens.space.xs,\n minWidth: tokens.space.xl,\n fontSize: tokens.fontSize.xs,\n },\n\n medium: {\n height: 28,\n paddingHorizontal: tokens.space.xs,\n minWidth: tokens.space.xxl,\n fontSize: tokens.fontSize.xsm,\n },\n\n large: {\n height: 32,\n paddingHorizontal: tokens.space.mxs,\n minWidth: tokens.space.xxl,\n fontSize: tokens.fontSize.xsm,\n },\n },\n\n colors: {\n primary: createVariants(\n tokens.colors.primary.value,\n tokens.colors.primary.contrast,\n ),\n\n secondary: createVariants(\n tokens.colors.secondary.value,\n tokens.colors.secondary.contrast,\n ),\n\n error: createVariants(\n tokens.colors.feedback.error.value,\n tokens.colors.feedback.error.contrast,\n ),\n\n warning: createVariants(\n tokens.colors.feedback.warning.value,\n tokens.colors.feedback.warning.contrast,\n ),\n\n success: createVariants(\n tokens.colors.feedback.success.value,\n tokens.colors.feedback.success.contrast,\n ),\n\n info: createVariants(\n tokens.colors.feedback.info.value,\n tokens.colors.feedback.info.contrast,\n ),\n },\n };\n}\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,cAAc;AAAA,IACd,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":[]}
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
2
|
import { TimePickerTokens } from '../types/time-picker-token.types.mjs';
|
|
3
|
-
import '../types/
|
|
3
|
+
import '../types/checkbox-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/radio-tokens.types.mjs';
|
|
6
|
+
import '../types/buttons-tokens.types.mjs';
|
|
5
7
|
import '../types/control-tokes.types.mjs';
|
|
6
8
|
import '../types/data-state-tokens.types.mjs';
|
|
7
9
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
8
10
|
import '../types/flyout-tokens.types.mjs';
|
|
11
|
+
import '../types/icon-tokens.types.mjs';
|
|
12
|
+
import '../types/pressable-tokens.types.mjs';
|
|
9
13
|
import '../types/select-tokens.types.mjs';
|
|
10
14
|
import '../types/skeleton-tokens.types.mjs';
|
|
15
|
+
import '../types/stepper-tokens.types.mjs';
|
|
11
16
|
import '../types/tag-tokens.types.mjs';
|
|
12
17
|
import '../types/tokens.types.mjs';
|
|
13
18
|
|
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
|
-
import '../types/
|
|
2
|
+
import '../types/checkbox-tokens.types.mjs';
|
|
3
3
|
import '../types/components.types.mjs';
|
|
4
|
+
import '../types/radio-tokens.types.mjs';
|
|
5
|
+
import '../types/buttons-tokens.types.mjs';
|
|
4
6
|
import '../types/control-tokes.types.mjs';
|
|
5
7
|
import '../types/data-state-tokens.types.mjs';
|
|
6
8
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
7
9
|
import '../types/flyout-tokens.types.mjs';
|
|
10
|
+
import '../types/icon-tokens.types.mjs';
|
|
11
|
+
import '../types/pressable-tokens.types.mjs';
|
|
8
12
|
import '../types/select-tokens.types.mjs';
|
|
9
13
|
import '../types/skeleton-tokens.types.mjs';
|
|
14
|
+
import '../types/stepper-tokens.types.mjs';
|
|
10
15
|
import '../types/tag-tokens.types.mjs';
|
|
11
16
|
import '../types/time-picker-token.types.mjs';
|
|
12
17
|
import '../types/tokens.types.mjs';
|
package/dist/theme/dark.theme.js
CHANGED
|
@@ -3,6 +3,7 @@ import {
|
|
|
3
3
|
FontFamilyTokens,
|
|
4
4
|
FontSizeTokens,
|
|
5
5
|
FontWeightTokens,
|
|
6
|
+
LetterSpacingTokens,
|
|
6
7
|
LightColors,
|
|
7
8
|
LineHeightTokens,
|
|
8
9
|
RadiiTokens,
|
|
@@ -16,7 +17,8 @@ const DarkTheme = {
|
|
|
16
17
|
borderSize: BorderSizeTokens,
|
|
17
18
|
fontSize: FontSizeTokens,
|
|
18
19
|
fontWeight: FontWeightTokens,
|
|
19
|
-
lineHeight: LineHeightTokens
|
|
20
|
+
lineHeight: LineHeightTokens,
|
|
21
|
+
letterSpacing: LetterSpacingTokens
|
|
20
22
|
};
|
|
21
23
|
export {
|
|
22
24
|
DarkTheme
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/dark.theme.ts"],"sourcesContent":["import { PrimitiveThemeTokens } from \"../types\";\
|
|
1
|
+
{"version":3,"sources":["../../src/theme/dark.theme.ts"],"sourcesContent":["import { PrimitiveThemeTokens } from \"../types\";\nimport {\n BorderSizeTokens,\n FontFamilyTokens,\n FontSizeTokens,\n FontWeightTokens,\n LetterSpacingTokens,\n LightColors,\n LineHeightTokens,\n RadiiTokens,\n SpaceTokens,\n} from \"./tokens.theme\";\n\nexport const DarkTheme: PrimitiveThemeTokens = {\n colors: LightColors,\n space: SpaceTokens,\n radii: RadiiTokens,\n fontFamily: FontFamilyTokens,\n borderSize: BorderSizeTokens,\n fontSize: FontSizeTokens,\n fontWeight: FontWeightTokens,\n lineHeight: LineHeightTokens,\n letterSpacing: LetterSpacingTokens,\n};\n"],"mappings":"AACA;AAAA,EACE;AAAA,EACA;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;AAAA,EACZ,eAAe;AACjB;","names":[]}
|
package/dist/theme/index.d.mts
CHANGED
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
export { DarkTheme } from './dark.theme.mjs';
|
|
2
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';
|
|
3
|
+
export { BorderSizeTokens, ChartColorTokens, FontFamilyTokens, FontFamilyWeightsItalicTokens, FontFamilyWeightsNormalTokens, FontSizeTokens, FontWeightTokens, LetterSpacingTokens, LightColors, LineHeightTokens, NeutralColorTokens, RadiiTokens, SpaceTokens, createComponentsTokens } from './tokens.theme.mjs';
|
|
4
4
|
import '../types/theme-provider.types.mjs';
|
|
5
|
-
import '../types/
|
|
5
|
+
import '../types/checkbox-tokens.types.mjs';
|
|
6
6
|
import '../types/components.types.mjs';
|
|
7
|
+
import '../types/radio-tokens.types.mjs';
|
|
8
|
+
import '../types/buttons-tokens.types.mjs';
|
|
7
9
|
import '../types/control-tokes.types.mjs';
|
|
8
10
|
import '../types/data-state-tokens.types.mjs';
|
|
9
11
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
10
12
|
import '../types/flyout-tokens.types.mjs';
|
|
13
|
+
import '../types/icon-tokens.types.mjs';
|
|
14
|
+
import '../types/pressable-tokens.types.mjs';
|
|
11
15
|
import '../types/select-tokens.types.mjs';
|
|
12
16
|
import '../types/skeleton-tokens.types.mjs';
|
|
17
|
+
import '../types/stepper-tokens.types.mjs';
|
|
13
18
|
import '../types/tag-tokens.types.mjs';
|
|
14
19
|
import '../types/time-picker-token.types.mjs';
|
|
15
20
|
import '../types/tokens.types.mjs';
|
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
|
-
import '../types/
|
|
2
|
+
import '../types/checkbox-tokens.types.mjs';
|
|
3
3
|
import '../types/components.types.mjs';
|
|
4
|
+
import '../types/radio-tokens.types.mjs';
|
|
5
|
+
import '../types/buttons-tokens.types.mjs';
|
|
4
6
|
import '../types/control-tokes.types.mjs';
|
|
5
7
|
import '../types/data-state-tokens.types.mjs';
|
|
6
8
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
7
9
|
import '../types/flyout-tokens.types.mjs';
|
|
10
|
+
import '../types/icon-tokens.types.mjs';
|
|
11
|
+
import '../types/pressable-tokens.types.mjs';
|
|
8
12
|
import '../types/select-tokens.types.mjs';
|
|
9
13
|
import '../types/skeleton-tokens.types.mjs';
|
|
14
|
+
import '../types/stepper-tokens.types.mjs';
|
|
10
15
|
import '../types/tag-tokens.types.mjs';
|
|
11
16
|
import '../types/time-picker-token.types.mjs';
|
|
12
17
|
import '../types/tokens.types.mjs';
|
|
@@ -3,6 +3,7 @@ import {
|
|
|
3
3
|
FontFamilyTokens,
|
|
4
4
|
FontSizeTokens,
|
|
5
5
|
FontWeightTokens,
|
|
6
|
+
LetterSpacingTokens,
|
|
6
7
|
LightColors,
|
|
7
8
|
LineHeightTokens,
|
|
8
9
|
RadiiTokens,
|
|
@@ -16,7 +17,8 @@ const LightTheme = {
|
|
|
16
17
|
borderSize: BorderSizeTokens,
|
|
17
18
|
fontSize: FontSizeTokens,
|
|
18
19
|
fontWeight: FontWeightTokens,
|
|
19
|
-
lineHeight: LineHeightTokens
|
|
20
|
+
lineHeight: LineHeightTokens,
|
|
21
|
+
letterSpacing: LetterSpacingTokens
|
|
20
22
|
};
|
|
21
23
|
export {
|
|
22
24
|
LightTheme
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/light.theme.ts"],"sourcesContent":["import { PrimitiveThemeTokens } from \"../types\";\
|
|
1
|
+
{"version":3,"sources":["../../src/theme/light.theme.ts"],"sourcesContent":["import { PrimitiveThemeTokens } from \"../types\";\nimport {\n BorderSizeTokens,\n FontFamilyTokens,\n FontSizeTokens,\n FontWeightTokens,\n LetterSpacingTokens,\n LightColors,\n LineHeightTokens,\n RadiiTokens,\n SpaceTokens,\n} from \"./tokens.theme\";\n\nexport const LightTheme: PrimitiveThemeTokens = {\n colors: LightColors,\n space: SpaceTokens,\n radii: RadiiTokens,\n fontFamily: FontFamilyTokens,\n borderSize: BorderSizeTokens,\n fontSize: FontSizeTokens,\n fontWeight: FontWeightTokens,\n lineHeight: LineHeightTokens,\n letterSpacing: LetterSpacingTokens,\n};\n"],"mappings":"AACA;AAAA,EACE;AAAA,EACA;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;AAAA,EACZ,eAAe;AACjB;","names":[]}
|
|
@@ -1,14 +1,19 @@
|
|
|
1
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';
|
|
2
|
+
import { BorderSize, FontFamily, FontWeightValue, FontWeightItalic, FontWeightNormal, FontSize, FontWeight, LetterSpacings, LineHeight, NeutralColor, Radii, Space } from '../types/tokens.types.mjs';
|
|
3
3
|
import { ThemeColors, PrimitiveThemeTokens, ComponentsTokens } from '../types/theme-provider.types.mjs';
|
|
4
|
-
import '../types/
|
|
4
|
+
import '../types/checkbox-tokens.types.mjs';
|
|
5
5
|
import '../types/components.types.mjs';
|
|
6
|
+
import '../types/radio-tokens.types.mjs';
|
|
7
|
+
import '../types/buttons-tokens.types.mjs';
|
|
6
8
|
import '../types/control-tokes.types.mjs';
|
|
7
9
|
import '../types/data-state-tokens.types.mjs';
|
|
8
10
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
9
11
|
import '../types/flyout-tokens.types.mjs';
|
|
12
|
+
import '../types/icon-tokens.types.mjs';
|
|
13
|
+
import '../types/pressable-tokens.types.mjs';
|
|
10
14
|
import '../types/select-tokens.types.mjs';
|
|
11
15
|
import '../types/skeleton-tokens.types.mjs';
|
|
16
|
+
import '../types/stepper-tokens.types.mjs';
|
|
12
17
|
import '../types/tag-tokens.types.mjs';
|
|
13
18
|
import '../types/time-picker-token.types.mjs';
|
|
14
19
|
|
|
@@ -18,6 +23,7 @@ declare const BorderSizeTokens: BorderSize;
|
|
|
18
23
|
declare const RadiiTokens: Radii;
|
|
19
24
|
declare const FontSizeTokens: FontSize;
|
|
20
25
|
declare const LineHeightTokens: LineHeight;
|
|
26
|
+
declare const LetterSpacingTokens: LetterSpacings;
|
|
21
27
|
declare const FontWeightTokens: FontWeight;
|
|
22
28
|
declare const FontFamilyWeightsNormalTokens: Record<FontWeightValue, FontWeightNormal>;
|
|
23
29
|
declare const FontFamilyWeightsItalicTokens: Record<FontWeightValue, FontWeightItalic>;
|
|
@@ -26,4 +32,4 @@ declare const NeutralColorTokens: NeutralColor;
|
|
|
26
32
|
declare const LightColors: ThemeColors;
|
|
27
33
|
declare function createComponentsTokens(tokens: PrimitiveThemeTokens): ComponentsTokens;
|
|
28
34
|
|
|
29
|
-
export { BorderSizeTokens, ChartColorTokens, FontFamilyTokens, FontFamilyWeightsItalicTokens, FontFamilyWeightsNormalTokens, FontSizeTokens, FontWeightTokens, LightColors, LineHeightTokens, NeutralColorTokens, RadiiTokens, SpaceTokens, createComponentsTokens };
|
|
35
|
+
export { BorderSizeTokens, ChartColorTokens, FontFamilyTokens, FontFamilyWeightsItalicTokens, FontFamilyWeightsNormalTokens, FontSizeTokens, FontWeightTokens, LetterSpacingTokens, LightColors, LineHeightTokens, NeutralColorTokens, RadiiTokens, SpaceTokens, createComponentsTokens };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { createButtonTokens } from "./create-button-tokens";
|
|
2
|
+
import { createCheckboxTokens } from "./create-checkbox-tokens";
|
|
2
3
|
import {
|
|
3
4
|
createControlAddonTokens,
|
|
4
5
|
createControlContainerTokens,
|
|
@@ -10,8 +11,12 @@ import { createDataStateTokens } from "./create-data-state-tokens";
|
|
|
10
11
|
import { createDatetimePickerTokens } from "./create-datetime-picker";
|
|
11
12
|
import { createFlyoutTokens } from "./create-flyout-tokens";
|
|
12
13
|
import { createIconButtonTokens } from "./create-icon-button-tokens";
|
|
14
|
+
import { createIconTokens } from "./create-icon-tokens";
|
|
15
|
+
import { createPressableTokens } from "./create-pressable-tokens";
|
|
16
|
+
import { createRadioTokens } from "./create-radio-tokens";
|
|
13
17
|
import { createSelectTokens } from "./create-select-tokens";
|
|
14
18
|
import { createSkeletonTokens } from "./create-skeleton-tokens";
|
|
19
|
+
import { createStepperTokens } from "./create-stepper-tokens";
|
|
15
20
|
import { createTagTokens } from "./create-tag-tokens";
|
|
16
21
|
import { createTimePickerTokens } from "./create-time-picker-tokens";
|
|
17
22
|
const ChartColorTokens = [
|
|
@@ -89,6 +94,16 @@ const LineHeightTokens = {
|
|
|
89
94
|
giant: 56,
|
|
90
95
|
colossal: 64
|
|
91
96
|
};
|
|
97
|
+
const LetterSpacingTokens = {
|
|
98
|
+
tightest: -1,
|
|
99
|
+
tighter: -0.5,
|
|
100
|
+
tight: -0.25,
|
|
101
|
+
normal: 0,
|
|
102
|
+
wide: 0.25,
|
|
103
|
+
wider: 0.5,
|
|
104
|
+
widest: 0.75,
|
|
105
|
+
ultraWide: 1
|
|
106
|
+
};
|
|
92
107
|
const FontWeightTokens = {
|
|
93
108
|
thin: 100,
|
|
94
109
|
extraLight: 200,
|
|
@@ -224,7 +239,11 @@ const LightColors = {
|
|
|
224
239
|
function createComponentsTokens(tokens) {
|
|
225
240
|
return {
|
|
226
241
|
button: createButtonTokens(tokens),
|
|
242
|
+
checkbox: createCheckboxTokens(tokens),
|
|
227
243
|
iconButton: createIconButtonTokens(tokens),
|
|
244
|
+
icon: createIconTokens(),
|
|
245
|
+
pressable: createPressableTokens(),
|
|
246
|
+
radio: createRadioTokens(tokens),
|
|
228
247
|
tag: createTagTokens(tokens),
|
|
229
248
|
controlAddon: createControlAddonTokens(tokens),
|
|
230
249
|
controlContainer: createControlContainerTokens(tokens),
|
|
@@ -236,6 +255,7 @@ function createComponentsTokens(tokens) {
|
|
|
236
255
|
timePicker: createTimePickerTokens(tokens),
|
|
237
256
|
flyout: createFlyoutTokens(tokens),
|
|
238
257
|
skeleton: createSkeletonTokens(tokens),
|
|
258
|
+
stepper: createStepperTokens(tokens),
|
|
239
259
|
dataState: createDataStateTokens(tokens)
|
|
240
260
|
};
|
|
241
261
|
}
|
|
@@ -247,6 +267,7 @@ export {
|
|
|
247
267
|
FontFamilyWeightsNormalTokens,
|
|
248
268
|
FontSizeTokens,
|
|
249
269
|
FontWeightTokens,
|
|
270
|
+
LetterSpacingTokens,
|
|
250
271
|
LightColors,
|
|
251
272
|
LineHeightTokens,
|
|
252
273
|
NeutralColorTokens,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/tokens.theme.ts"],"sourcesContent":["import {\n BorderSize,\n ChartColorPalette,\n ComponentsTokens,\n FontFamily,\n FontSize,\n FontWeight,\n FontWeightItalic,\n FontWeightNormal,\n FontWeightValue,\n LineHeight,\n NeutralColor,\n PrimitiveThemeTokens,\n Radii,\n Space,\n ThemeColors,\n} from \"../types\";\nimport { createButtonTokens } from \"./create-button-tokens\";\nimport {\n createControlAddonTokens,\n createControlContainerTokens,\n createControlErrorTokens,\n createControlInputTokens,\n createControlLabelTokens,\n} from \"./create-control-tokens\";\nimport { createDataStateTokens } from \"./create-data-state-tokens\";\nimport { createDatetimePickerTokens } from \"./create-datetime-picker\";\nimport { createFlyoutTokens } from \"./create-flyout-tokens\";\nimport { createIconButtonTokens } from \"./create-icon-button-tokens\";\nimport { createSelectTokens } from \"./create-select-tokens\";\nimport { createSkeletonTokens } from \"./create-skeleton-tokens\";\nimport { createTagTokens } from \"./create-tag-tokens\";\nimport { createTimePickerTokens } from \"./create-time-picker-tokens\";\n\nexport const ChartColorTokens: ChartColorPalette = [\n \"#f55d6b\",\n \"#2563eb\",\n \"#16a34a\",\n \"#9333ea\",\n \"#ea580c\",\n \"#0891b2\",\n \"#db2777\",\n \"#65a30d\",\n \"#4f46e5\",\n \"#0d9488\",\n \"#ca8a04\",\n \"#c026d3\",\n \"#0284c7\",\n \"#7c3aed\",\n \"#9f5f3f\",\n];\n\nexport const SpaceTokens: Space = {\n none: 0,\n xxs: 4,\n xs: 8,\n mxs: 12,\n sm: 16,\n msm: 24,\n md: 32,\n lg: 48,\n xl: 64,\n xxl: 96,\n};\n\nexport const BorderSizeTokens: BorderSize = {\n sm: 1,\n md: 2,\n lg: 3,\n xl: 5,\n xxl: 10,\n};\n\nexport const RadiiTokens: Radii = {\n sm: 4,\n md: 8,\n lg: 16,\n xl: 32,\n xxl: 64,\n xxxl: 128,\n round: 100000,\n};\n\nexport const FontSizeTokens: FontSize = {\n xxs: 8,\n xs: 12,\n xsm: 14,\n sm: 16,\n md: 18,\n lg: 20,\n xl: 24,\n xxl: 28,\n xxxl: 32,\n huge: 36,\n massive: 40,\n giant: 48,\n colossal: 56,\n};\n\nexport const LineHeightTokens: LineHeight = {\n xxs: 12,\n xs: 16,\n xsm: 20,\n sm: 24,\n md: 26,\n lg: 28,\n xl: 32,\n xxl: 36,\n xxxl: 40,\n huge: 44,\n massive: 48,\n giant: 56,\n colossal: 64,\n};\n\nexport const FontWeightTokens: FontWeight = {\n thin: 100,\n extraLight: 200,\n light: 300,\n regular: 400,\n medium: 500,\n semiBold: 600,\n bold: 700,\n extraBold: 800,\n black: 900,\n};\n\nexport const FontFamilyWeightsNormalTokens: Record<\n FontWeightValue,\n FontWeightNormal\n> = {\n 100: \"Montserrat_100Thin\",\n 200: \"Montserrat_200ExtraLight\",\n 300: \"Montserrat_300Light\",\n 400: \"Montserrat_400Regular\",\n 500: \"Montserrat_500Medium\",\n 600: \"Montserrat_600SemiBold\",\n 700: \"Montserrat_700Bold\",\n 800: \"Montserrat_800ExtraBold\",\n 900: \"Montserrat_900Black\",\n};\n\nexport const FontFamilyWeightsItalicTokens: Record<\n FontWeightValue,\n FontWeightItalic\n> = {\n 100: \"Montserrat_100Thin_Italic\",\n 200: \"Montserrat_200ExtraLight_Italic\",\n 300: \"Montserrat_300Light_Italic\",\n 400: \"Montserrat_400Regular_Italic\",\n 500: \"Montserrat_500Medium_Italic\",\n 600: \"Montserrat_600SemiBold_Italic\",\n 700: \"Montserrat_700Bold_Italic\",\n 800: \"Montserrat_800ExtraBold_Italic\",\n 900: \"Montserrat_900Black_Italic\",\n};\n\nexport const FontFamilyTokens: FontFamily = {\n normal: FontFamilyWeightsNormalTokens,\n italic: FontFamilyWeightsItalicTokens,\n};\n\nexport const NeutralColorTokens: NeutralColor = {\n \"0\": \"#ffffff\",\n \"1\": \"#f8f9fa\",\n \"2\": \"#f1f3f5\",\n \"3\": \"#e9ecef\",\n \"4\": \"#dee2e6\",\n \"5\": \"#ced4da\",\n \"6\": \"#adb5bd\",\n \"7\": \"#868e96\",\n \"8\": \"#495057\",\n \"9\": \"#343a40\",\n \"10\": \"#212529\",\n \"11\": \"#16191d\",\n \"12\": \"#0d0f12\",\n \"13\": \"#000000\",\n};\n\nexport const LightColors: ThemeColors = {\n primary: {\n value: \"#f55d6b\",\n contrast: NeutralColorTokens[\"0\"],\n },\n\n accent: {\n value: \"#FA9EA7\",\n contrast: NeutralColorTokens[\"0\"],\n },\n\n secondary: {\n value: \"#FEE7E9\",\n contrast: \"#f55d6b\",\n },\n\n neutral: NeutralColorTokens,\n\n surface: {\n primary: {\n value: NeutralColorTokens[\"2\"],\n contrast: NeutralColorTokens[\"11\"],\n },\n secondary: {\n value: NeutralColorTokens[\"0\"],\n contrast: NeutralColorTokens[\"11\"],\n },\n elevated: {\n value: NeutralColorTokens[\"0\"],\n contrast: NeutralColorTokens[\"11\"],\n },\n inverse: {\n value: NeutralColorTokens[\"13\"],\n contrast: NeutralColorTokens[\"0\"],\n },\n },\n\n text: {\n primary: NeutralColorTokens[\"11\"],\n secondary: NeutralColorTokens[\"10\"],\n tertiary: NeutralColorTokens[\"9\"],\n inverse: NeutralColorTokens[\"0\"],\n disabled: NeutralColorTokens[\"7\"],\n },\n\n border: {\n subtle: {\n value: NeutralColorTokens[\"3\"],\n contrast: NeutralColorTokens[\"9\"],\n },\n default: {\n value: NeutralColorTokens[\"4\"],\n contrast: NeutralColorTokens[\"10\"],\n },\n strong: {\n value: NeutralColorTokens[\"6\"],\n contrast: NeutralColorTokens[\"11\"],\n },\n focus: {\n value: \"#f55d6b\",\n contrast: NeutralColorTokens[\"0\"],\n },\n },\n\n feedback: {\n error: {\n value: \"#c92a2a\",\n contrast: \"#fff5f5\",\n },\n warning: {\n value: \"#e67700\",\n contrast: \"#fff4e6\",\n },\n success: {\n value: \"#7a9908\",\n contrast: \"#f4fce3\",\n },\n info: {\n value: \"#1864ab\",\n contrast: \"#e7f5ff\",\n },\n },\n\n overlay: \"rgba(0, 0, 0, 0.45)\",\n\n white: NeutralColorTokens[\"0\"],\n black: NeutralColorTokens[\"13\"],\n};\n\nexport function createComponentsTokens(\n tokens: PrimitiveThemeTokens,\n): ComponentsTokens {\n return {\n button: createButtonTokens(tokens),\n iconButton: createIconButtonTokens(tokens),\n tag: createTagTokens(tokens),\n controlAddon: createControlAddonTokens(tokens),\n controlContainer: createControlContainerTokens(tokens),\n controlError: createControlErrorTokens(tokens),\n controlInput: createControlInputTokens(tokens),\n controlLabel: createControlLabelTokens(tokens),\n select: createSelectTokens(tokens),\n datetimePicker: createDatetimePickerTokens(tokens),\n timePicker: createTimePickerTokens(tokens),\n flyout: createFlyoutTokens(tokens),\n skeleton: createSkeletonTokens(tokens),\n dataState: createDataStateTokens(tokens),\n };\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/theme/tokens.theme.ts"],"sourcesContent":["import {\n BorderSize,\n ChartColorPalette,\n ComponentsTokens,\n FontFamily,\n FontSize,\n FontWeight,\n FontWeightItalic,\n FontWeightNormal,\n FontWeightValue,\n LetterSpacings,\n LineHeight,\n NeutralColor,\n PrimitiveThemeTokens,\n Radii,\n Space,\n ThemeColors,\n} from \"../types\";\nimport { createButtonTokens } from \"./create-button-tokens\";\nimport { createCheckboxTokens } from \"./create-checkbox-tokens\";\nimport {\n createControlAddonTokens,\n createControlContainerTokens,\n createControlErrorTokens,\n createControlInputTokens,\n createControlLabelTokens,\n} from \"./create-control-tokens\";\nimport { createDataStateTokens } from \"./create-data-state-tokens\";\nimport { createDatetimePickerTokens } from \"./create-datetime-picker\";\nimport { createFlyoutTokens } from \"./create-flyout-tokens\";\nimport { createIconButtonTokens } from \"./create-icon-button-tokens\";\nimport { createIconTokens } from \"./create-icon-tokens\";\nimport { createPressableTokens } from \"./create-pressable-tokens\";\nimport { createRadioTokens } from \"./create-radio-tokens\";\nimport { createSelectTokens } from \"./create-select-tokens\";\nimport { createSkeletonTokens } from \"./create-skeleton-tokens\";\nimport { createStepperTokens } from \"./create-stepper-tokens\";\nimport { createTagTokens } from \"./create-tag-tokens\";\nimport { createTimePickerTokens } from \"./create-time-picker-tokens\";\n\nexport const ChartColorTokens: ChartColorPalette = [\n \"#f55d6b\",\n \"#2563eb\",\n \"#16a34a\",\n \"#9333ea\",\n \"#ea580c\",\n \"#0891b2\",\n \"#db2777\",\n \"#65a30d\",\n \"#4f46e5\",\n \"#0d9488\",\n \"#ca8a04\",\n \"#c026d3\",\n \"#0284c7\",\n \"#7c3aed\",\n \"#9f5f3f\",\n];\n\nexport const SpaceTokens: Space = {\n none: 0,\n xxs: 4,\n xs: 8,\n mxs: 12,\n sm: 16,\n msm: 24,\n md: 32,\n lg: 48,\n xl: 64,\n xxl: 96,\n};\n\nexport const BorderSizeTokens: BorderSize = {\n sm: 1,\n md: 2,\n lg: 3,\n xl: 5,\n xxl: 10,\n};\n\nexport const RadiiTokens: Radii = {\n sm: 4,\n md: 8,\n lg: 16,\n xl: 32,\n xxl: 64,\n xxxl: 128,\n round: 100000,\n};\n\nexport const FontSizeTokens: FontSize = {\n xxs: 8,\n xs: 12,\n xsm: 14,\n sm: 16,\n md: 18,\n lg: 20,\n xl: 24,\n xxl: 28,\n xxxl: 32,\n huge: 36,\n massive: 40,\n giant: 48,\n colossal: 56,\n};\n\nexport const LineHeightTokens: LineHeight = {\n xxs: 12,\n xs: 16,\n xsm: 20,\n sm: 24,\n md: 26,\n lg: 28,\n xl: 32,\n xxl: 36,\n xxxl: 40,\n huge: 44,\n massive: 48,\n giant: 56,\n colossal: 64,\n};\n\nexport const LetterSpacingTokens: LetterSpacings = {\n tightest: -1,\n tighter: -0.5,\n tight: -0.25,\n normal: 0,\n wide: 0.25,\n wider: 0.5,\n widest: 0.75,\n ultraWide: 1,\n};\n\nexport const FontWeightTokens: FontWeight = {\n thin: 100,\n extraLight: 200,\n light: 300,\n regular: 400,\n medium: 500,\n semiBold: 600,\n bold: 700,\n extraBold: 800,\n black: 900,\n};\n\nexport const FontFamilyWeightsNormalTokens: Record<\n FontWeightValue,\n FontWeightNormal\n> = {\n 100: \"Montserrat_100Thin\",\n 200: \"Montserrat_200ExtraLight\",\n 300: \"Montserrat_300Light\",\n 400: \"Montserrat_400Regular\",\n 500: \"Montserrat_500Medium\",\n 600: \"Montserrat_600SemiBold\",\n 700: \"Montserrat_700Bold\",\n 800: \"Montserrat_800ExtraBold\",\n 900: \"Montserrat_900Black\",\n};\n\nexport const FontFamilyWeightsItalicTokens: Record<\n FontWeightValue,\n FontWeightItalic\n> = {\n 100: \"Montserrat_100Thin_Italic\",\n 200: \"Montserrat_200ExtraLight_Italic\",\n 300: \"Montserrat_300Light_Italic\",\n 400: \"Montserrat_400Regular_Italic\",\n 500: \"Montserrat_500Medium_Italic\",\n 600: \"Montserrat_600SemiBold_Italic\",\n 700: \"Montserrat_700Bold_Italic\",\n 800: \"Montserrat_800ExtraBold_Italic\",\n 900: \"Montserrat_900Black_Italic\",\n};\n\nexport const FontFamilyTokens: FontFamily = {\n normal: FontFamilyWeightsNormalTokens,\n italic: FontFamilyWeightsItalicTokens,\n};\n\nexport const NeutralColorTokens: NeutralColor = {\n \"0\": \"#ffffff\",\n \"1\": \"#f8f9fa\",\n \"2\": \"#f1f3f5\",\n \"3\": \"#e9ecef\",\n \"4\": \"#dee2e6\",\n \"5\": \"#ced4da\",\n \"6\": \"#adb5bd\",\n \"7\": \"#868e96\",\n \"8\": \"#495057\",\n \"9\": \"#343a40\",\n \"10\": \"#212529\",\n \"11\": \"#16191d\",\n \"12\": \"#0d0f12\",\n \"13\": \"#000000\",\n};\n\nexport const LightColors: ThemeColors = {\n primary: {\n value: \"#f55d6b\",\n contrast: NeutralColorTokens[\"0\"],\n },\n\n accent: {\n value: \"#FA9EA7\",\n contrast: NeutralColorTokens[\"0\"],\n },\n\n secondary: {\n value: \"#FEE7E9\",\n contrast: \"#f55d6b\",\n },\n\n neutral: NeutralColorTokens,\n\n surface: {\n primary: {\n value: NeutralColorTokens[\"2\"],\n contrast: NeutralColorTokens[\"11\"],\n },\n secondary: {\n value: NeutralColorTokens[\"0\"],\n contrast: NeutralColorTokens[\"11\"],\n },\n elevated: {\n value: NeutralColorTokens[\"0\"],\n contrast: NeutralColorTokens[\"11\"],\n },\n inverse: {\n value: NeutralColorTokens[\"13\"],\n contrast: NeutralColorTokens[\"0\"],\n },\n },\n\n text: {\n primary: NeutralColorTokens[\"11\"],\n secondary: NeutralColorTokens[\"10\"],\n tertiary: NeutralColorTokens[\"9\"],\n inverse: NeutralColorTokens[\"0\"],\n disabled: NeutralColorTokens[\"7\"],\n },\n\n border: {\n subtle: {\n value: NeutralColorTokens[\"3\"],\n contrast: NeutralColorTokens[\"9\"],\n },\n default: {\n value: NeutralColorTokens[\"4\"],\n contrast: NeutralColorTokens[\"10\"],\n },\n strong: {\n value: NeutralColorTokens[\"6\"],\n contrast: NeutralColorTokens[\"11\"],\n },\n focus: {\n value: \"#f55d6b\",\n contrast: NeutralColorTokens[\"0\"],\n },\n },\n\n feedback: {\n error: {\n value: \"#c92a2a\",\n contrast: \"#fff5f5\",\n },\n warning: {\n value: \"#e67700\",\n contrast: \"#fff4e6\",\n },\n success: {\n value: \"#7a9908\",\n contrast: \"#f4fce3\",\n },\n info: {\n value: \"#1864ab\",\n contrast: \"#e7f5ff\",\n },\n },\n\n overlay: \"rgba(0, 0, 0, 0.45)\",\n\n white: NeutralColorTokens[\"0\"],\n black: NeutralColorTokens[\"13\"],\n};\n\nexport function createComponentsTokens(\n tokens: PrimitiveThemeTokens,\n): ComponentsTokens {\n return {\n button: createButtonTokens(tokens),\n checkbox: createCheckboxTokens(tokens),\n iconButton: createIconButtonTokens(tokens),\n icon: createIconTokens(),\n pressable: createPressableTokens(),\n radio: createRadioTokens(tokens),\n tag: createTagTokens(tokens),\n controlAddon: createControlAddonTokens(tokens),\n controlContainer: createControlContainerTokens(tokens),\n controlError: createControlErrorTokens(tokens),\n controlInput: createControlInputTokens(tokens),\n controlLabel: createControlLabelTokens(tokens),\n select: createSelectTokens(tokens),\n datetimePicker: createDatetimePickerTokens(tokens),\n timePicker: createTimePickerTokens(tokens),\n flyout: createFlyoutTokens(tokens),\n skeleton: createSkeletonTokens(tokens),\n stepper: createStepperTokens(tokens),\n dataState: createDataStateTokens(tokens),\n };\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { ComponentSize, ComponentVariant } from './components.types.mjs';
|
|
2
|
+
|
|
3
|
+
type CheckboxSizeTokens = Record<ComponentSize, {
|
|
4
|
+
size: number;
|
|
5
|
+
iconSize: number;
|
|
6
|
+
hitSlop: number;
|
|
7
|
+
}>;
|
|
8
|
+
type CheckboxVariantTokens = Record<ComponentVariant, {
|
|
9
|
+
backgroundColor: string;
|
|
10
|
+
borderColor: string;
|
|
11
|
+
color: string;
|
|
12
|
+
}>;
|
|
13
|
+
interface CheckboxTokens {
|
|
14
|
+
borderWidth: number;
|
|
15
|
+
borderRadius: number;
|
|
16
|
+
uncheckedBackgroundColor: string;
|
|
17
|
+
uncheckedBorderColor: string;
|
|
18
|
+
disabledBackgroundColor: string;
|
|
19
|
+
disabledBorderColor: string;
|
|
20
|
+
disabledColor: string;
|
|
21
|
+
sizes: CheckboxSizeTokens;
|
|
22
|
+
variants: CheckboxVariantTokens;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export type { CheckboxSizeTokens, CheckboxTokens, CheckboxVariantTokens };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=checkbox-tokens.types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ComponentVariant, ComponentSize } from './components.types.mjs';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
marginHorizontal: number;
|
|
5
|
-
hitSlop: number;
|
|
3
|
+
type ControlAddonVariantTokens = Record<ComponentVariant, {
|
|
6
4
|
iconColor: string;
|
|
7
5
|
errorIconColor: string;
|
|
8
6
|
disabledIconColor: string;
|
|
7
|
+
}>;
|
|
8
|
+
interface ControlAddonTokens {
|
|
9
|
+
marginHorizontal: number;
|
|
10
|
+
hitSlop: number;
|
|
11
|
+
variants: ControlAddonVariantTokens;
|
|
9
12
|
}
|
|
10
13
|
type ControlContainerSizeTokens = Record<ComponentSize, {
|
|
11
14
|
height: number;
|
|
@@ -56,4 +59,4 @@ interface ControlLabelTokens {
|
|
|
56
59
|
errorColor: string;
|
|
57
60
|
}
|
|
58
61
|
|
|
59
|
-
export type { ControlAddonTokens, ControlContainerSizeTokens, ControlContainerTokens, ControlContainerVariantTokens, ControlErrorTokens, ControlInputSizeTokens, ControlInputTokens, ControlInputVariantTokens, ControlLabelTokens };
|
|
62
|
+
export type { ControlAddonTokens, ControlAddonVariantTokens, ControlContainerSizeTokens, ControlContainerTokens, ControlContainerVariantTokens, ControlErrorTokens, ControlInputSizeTokens, ControlInputTokens, ControlInputVariantTokens, ControlLabelTokens };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=icon-tokens.types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|