@impulse-ui-native/theme 3.0.0 → 5.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/README.md +23 -0
- package/dist/hooks/index.d.mts +5 -1
- package/dist/hooks/use-colors.hook.d.mts +5 -1
- package/dist/hooks/use-components-tokens.hook.d.mts +5 -1
- package/dist/hooks/use-theme.hook.d.mts +5 -1
- package/dist/hooks/use-themed-styles.d.mts +5 -1
- package/dist/index.d.mts +35 -16
- package/dist/providers/index.d.mts +5 -1
- package/dist/providers/theme.provider.d.mts +5 -1
- package/dist/theme/create-accordion-tokens.d.mts +5 -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 +5 -1
- package/dist/theme/create-avatar-tokens.js +1 -11
- package/dist/theme/create-avatar-tokens.js.map +1 -1
- package/dist/theme/create-badge-tokens.d.mts +6 -2
- package/dist/theme/create-badge-tokens.js +7 -16
- package/dist/theme/create-badge-tokens.js.map +1 -1
- package/dist/theme/create-button-tokens.d.mts +5 -1
- package/dist/theme/create-button-tokens.js +60 -33
- package/dist/theme/create-button-tokens.js.map +1 -1
- package/dist/theme/create-card-tokens.d.mts +5 -1
- package/dist/theme/create-carousel-tokens.d.mts +35 -0
- package/dist/theme/create-carousel-tokens.js +32 -0
- package/dist/theme/create-carousel-tokens.js.map +1 -0
- package/dist/theme/create-checkbox-tokens.d.mts +5 -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 +5 -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 +5 -1
- package/dist/theme/create-data-state-tokens.js.map +1 -1
- package/dist/theme/create-datetime-picker.d.mts +5 -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 +5 -1
- package/dist/theme/create-divider-tokens.js +64 -2
- package/dist/theme/create-divider-tokens.js.map +1 -1
- package/dist/theme/create-flyout-tokens.d.mts +5 -1
- package/dist/theme/create-flyout-tokens.js +31 -3
- package/dist/theme/create-flyout-tokens.js.map +1 -1
- package/dist/theme/create-icon-button-tokens.d.mts +5 -1
- package/dist/theme/create-icon-button-tokens.js +60 -33
- package/dist/theme/create-icon-button-tokens.js.map +1 -1
- package/dist/theme/create-list-tokens.d.mts +35 -0
- package/dist/theme/create-list-tokens.js +14 -0
- package/dist/theme/create-list-tokens.js.map +1 -0
- package/dist/theme/create-pagination-tokens.d.mts +35 -0
- package/dist/theme/create-pagination-tokens.js +57 -0
- package/dist/theme/create-pagination-tokens.js.map +1 -0
- package/dist/theme/create-progress-tokens.d.mts +5 -1
- package/dist/theme/create-progress-tokens.js +4 -4
- package/dist/theme/create-progress-tokens.js.map +1 -1
- package/dist/theme/create-radio-tokens.d.mts +5 -1
- package/dist/theme/create-radio-tokens.js +60 -24
- package/dist/theme/create-radio-tokens.js.map +1 -1
- package/dist/theme/create-segmented-control-tokens.d.mts +35 -0
- package/dist/theme/create-segmented-control-tokens.js +157 -0
- package/dist/theme/create-segmented-control-tokens.js.map +1 -0
- package/dist/theme/create-select-tokens.d.mts +5 -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 +5 -1
- package/dist/theme/create-skeleton-tokens.js +1 -1
- package/dist/theme/create-skeleton-tokens.js.map +1 -1
- package/dist/theme/create-slider-tokens.d.mts +5 -1
- package/dist/theme/create-slider-tokens.js +137 -41
- package/dist/theme/create-slider-tokens.js.map +1 -1
- package/dist/theme/create-spinner-tokens.d.mts +5 -1
- package/dist/theme/create-spinner-tokens.js +1 -1
- package/dist/theme/create-spinner-tokens.js.map +1 -1
- package/dist/theme/create-stepper-tokens.d.mts +5 -1
- package/dist/theme/create-switch-tokens.d.mts +5 -1
- package/dist/theme/create-switch-tokens.js +49 -26
- package/dist/theme/create-switch-tokens.js.map +1 -1
- package/dist/theme/create-tag-tokens.d.mts +5 -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 +5 -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 +5 -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 +5 -1
- package/dist/theme/dark.theme.js +2 -2
- package/dist/theme/dark.theme.js.map +1 -1
- package/dist/theme/index.d.mts +9 -2
- package/dist/theme/index.js +3 -0
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/light.theme.d.mts +5 -1
- package/dist/theme/tokens.theme.d.mts +7 -2
- package/dist/theme/tokens.theme.js +95 -7
- 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/carousel-tokens.types.d.mts +28 -0
- package/dist/types/carousel-tokens.types.js +1 -0
- 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/control-tokens.types.js.map +1 -0
- package/dist/types/datetime-picker-tokens.types.d.mts +14 -7
- package/dist/types/divider-tokens.types.d.mts +20 -3
- package/dist/types/flyout-tokens.types.d.mts +22 -3
- package/dist/types/index.d.mts +19 -15
- package/dist/types/index.js +5 -1
- package/dist/types/index.js.map +1 -1
- package/dist/types/list-tokens.types.d.mts +15 -0
- package/dist/types/list-tokens.types.js +1 -0
- package/dist/types/list-tokens.types.js.map +1 -0
- package/dist/types/pagination-tokens.types.d.mts +30 -0
- package/dist/types/pagination-tokens.types.js +1 -0
- package/dist/types/pagination-tokens.types.js.map +1 -0
- package/dist/types/radio-tokens.types.d.mts +5 -9
- package/dist/types/segmented-control-tokens.types.d.mts +49 -0
- package/dist/types/segmented-control-tokens.types.js +1 -0
- package/dist/types/segmented-control-tokens.types.js.map +1 -0
- package/dist/types/select-tokens.types.d.mts +8 -4
- package/dist/types/slider-tokens.types.d.mts +25 -17
- 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 +9 -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/divider-tokens.utils.d.mts +5 -0
- package/dist/utils/divider-tokens.utils.js +10 -0
- package/dist/utils/divider-tokens.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/flyout-tokens.utils.d.mts +5 -0
- package/dist/utils/flyout-tokens.utils.js +11 -0
- package/dist/utils/flyout-tokens.utils.js.map +1 -0
- package/dist/utils/index.d.mts +22 -6
- package/dist/utils/index.js +12 -0
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/pagination-state.utils.d.mts +6 -0
- package/dist/utils/pagination-state.utils.js +9 -0
- package/dist/utils/pagination-state.utils.js.map +1 -0
- package/dist/utils/segmented-control-state.utils.d.mts +6 -0
- package/dist/utils/segmented-control-state.utils.js +20 -0
- package/dist/utils/segmented-control-state.utils.js.map +1 -0
- 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/slider-tokens.utils.d.mts +6 -0
- package/dist/utils/slider-tokens.utils.js +15 -0
- package/dist/utils/slider-tokens.utils.js.map +1 -0
- package/dist/utils/style.utils.d.mts +5 -1
- package/package.json +4 -4
- 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 → carousel-tokens.types.js.map} +0 -0
|
@@ -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.surface.primary.value,\n borderColor: \"transparent\",\n opacity: 0.7,\n },\n disabledError: {\n backgroundColor: tokens.colors.surface.primary.value,\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.border.default.value,\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.border.default.value,\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.tertiary,\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.tertiary,\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":[]}
|
|
@@ -2,20 +2,24 @@ import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
|
2
2
|
import { DataStateTokens } from '../types/data-state-tokens.types.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/carousel-tokens.types.mjs';
|
|
5
6
|
import '../types/checkbox-tokens.types.mjs';
|
|
7
|
+
import '../types/list-tokens.types.mjs';
|
|
6
8
|
import '../types/radio-tokens.types.mjs';
|
|
7
9
|
import '../types/accordion-tokens.types.mjs';
|
|
8
10
|
import '../types/avatar-tokens.types.mjs';
|
|
9
11
|
import '../types/buttons-tokens.types.mjs';
|
|
10
12
|
import '../types/card-tokens.types.mjs';
|
|
11
|
-
import '../types/control-
|
|
13
|
+
import '../types/control-tokens.types.mjs';
|
|
12
14
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
13
15
|
import '../types/divider-tokens.types.mjs';
|
|
14
16
|
import '../types/flyout-tokens.types.mjs';
|
|
15
17
|
import '../types/icon-tokens.types.mjs';
|
|
18
|
+
import '../types/pagination-tokens.types.mjs';
|
|
16
19
|
import '../types/pressable-tokens.types.mjs';
|
|
17
20
|
import '../types/progress-tokens.types.mjs';
|
|
18
21
|
import '../types/spinner-tokens.types.mjs';
|
|
22
|
+
import '../types/segmented-control-tokens.types.mjs';
|
|
19
23
|
import '../types/select-tokens.types.mjs';
|
|
20
24
|
import '../types/skeleton-tokens.types.mjs';
|
|
21
25
|
import '../types/slider-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":[]}
|
|
@@ -2,20 +2,24 @@ import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
|
2
2
|
import { DatetimePickerTokens } from '../types/datetime-picker-tokens.types.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/carousel-tokens.types.mjs';
|
|
5
6
|
import '../types/checkbox-tokens.types.mjs';
|
|
7
|
+
import '../types/list-tokens.types.mjs';
|
|
6
8
|
import '../types/radio-tokens.types.mjs';
|
|
7
9
|
import '../types/accordion-tokens.types.mjs';
|
|
8
10
|
import '../types/avatar-tokens.types.mjs';
|
|
9
11
|
import '../types/buttons-tokens.types.mjs';
|
|
10
12
|
import '../types/card-tokens.types.mjs';
|
|
11
|
-
import '../types/control-
|
|
13
|
+
import '../types/control-tokens.types.mjs';
|
|
12
14
|
import '../types/data-state-tokens.types.mjs';
|
|
13
15
|
import '../types/divider-tokens.types.mjs';
|
|
14
16
|
import '../types/flyout-tokens.types.mjs';
|
|
15
17
|
import '../types/icon-tokens.types.mjs';
|
|
18
|
+
import '../types/pagination-tokens.types.mjs';
|
|
16
19
|
import '../types/pressable-tokens.types.mjs';
|
|
17
20
|
import '../types/progress-tokens.types.mjs';
|
|
18
21
|
import '../types/spinner-tokens.types.mjs';
|
|
22
|
+
import '../types/segmented-control-tokens.types.mjs';
|
|
19
23
|
import '../types/select-tokens.types.mjs';
|
|
20
24
|
import '../types/skeleton-tokens.types.mjs';
|
|
21
25
|
import '../types/slider-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.text.disabled
|
|
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.text.disabled,\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,KAAK;AAAA,QAC5B;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":[]}
|
|
@@ -2,20 +2,24 @@ import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
|
2
2
|
import { DividerTokens } from '../types/divider-tokens.types.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/carousel-tokens.types.mjs';
|
|
5
6
|
import '../types/checkbox-tokens.types.mjs';
|
|
7
|
+
import '../types/list-tokens.types.mjs';
|
|
6
8
|
import '../types/radio-tokens.types.mjs';
|
|
7
9
|
import '../types/accordion-tokens.types.mjs';
|
|
8
10
|
import '../types/avatar-tokens.types.mjs';
|
|
9
11
|
import '../types/buttons-tokens.types.mjs';
|
|
10
12
|
import '../types/card-tokens.types.mjs';
|
|
11
|
-
import '../types/control-
|
|
13
|
+
import '../types/control-tokens.types.mjs';
|
|
12
14
|
import '../types/data-state-tokens.types.mjs';
|
|
13
15
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
14
16
|
import '../types/flyout-tokens.types.mjs';
|
|
15
17
|
import '../types/icon-tokens.types.mjs';
|
|
18
|
+
import '../types/pagination-tokens.types.mjs';
|
|
16
19
|
import '../types/pressable-tokens.types.mjs';
|
|
17
20
|
import '../types/progress-tokens.types.mjs';
|
|
18
21
|
import '../types/spinner-tokens.types.mjs';
|
|
22
|
+
import '../types/segmented-control-tokens.types.mjs';
|
|
19
23
|
import '../types/select-tokens.types.mjs';
|
|
20
24
|
import '../types/skeleton-tokens.types.mjs';
|
|
21
25
|
import '../types/slider-tokens.types.mjs';
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
function createDividerTokens(tokens) {
|
|
2
|
+
const inset = tokens.space.sm;
|
|
3
|
+
const thickness = tokens.borderSize.sm;
|
|
2
4
|
return {
|
|
3
5
|
colors: {
|
|
4
6
|
subtle: tokens.colors.border.subtle.value,
|
|
@@ -7,8 +9,68 @@ function createDividerTokens(tokens) {
|
|
|
7
9
|
primary: tokens.colors.primary.value,
|
|
8
10
|
inverse: tokens.colors.text.inverse
|
|
9
11
|
},
|
|
10
|
-
|
|
11
|
-
|
|
12
|
+
layouts: {
|
|
13
|
+
horizontal: {
|
|
14
|
+
none: {
|
|
15
|
+
height: thickness,
|
|
16
|
+
marginBottom: 0,
|
|
17
|
+
marginEnd: 0,
|
|
18
|
+
marginStart: 0,
|
|
19
|
+
marginTop: 0
|
|
20
|
+
},
|
|
21
|
+
start: {
|
|
22
|
+
height: thickness,
|
|
23
|
+
marginBottom: 0,
|
|
24
|
+
marginEnd: 0,
|
|
25
|
+
marginStart: inset,
|
|
26
|
+
marginTop: 0
|
|
27
|
+
},
|
|
28
|
+
end: {
|
|
29
|
+
height: thickness,
|
|
30
|
+
marginBottom: 0,
|
|
31
|
+
marginEnd: inset,
|
|
32
|
+
marginStart: 0,
|
|
33
|
+
marginTop: 0
|
|
34
|
+
},
|
|
35
|
+
both: {
|
|
36
|
+
height: thickness,
|
|
37
|
+
marginBottom: 0,
|
|
38
|
+
marginEnd: inset,
|
|
39
|
+
marginStart: inset,
|
|
40
|
+
marginTop: 0
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
vertical: {
|
|
44
|
+
none: {
|
|
45
|
+
marginBottom: 0,
|
|
46
|
+
marginEnd: 0,
|
|
47
|
+
marginStart: 0,
|
|
48
|
+
marginTop: 0,
|
|
49
|
+
width: thickness
|
|
50
|
+
},
|
|
51
|
+
start: {
|
|
52
|
+
marginBottom: 0,
|
|
53
|
+
marginEnd: 0,
|
|
54
|
+
marginStart: 0,
|
|
55
|
+
marginTop: inset,
|
|
56
|
+
width: thickness
|
|
57
|
+
},
|
|
58
|
+
end: {
|
|
59
|
+
marginBottom: inset,
|
|
60
|
+
marginEnd: 0,
|
|
61
|
+
marginStart: 0,
|
|
62
|
+
marginTop: 0,
|
|
63
|
+
width: thickness
|
|
64
|
+
},
|
|
65
|
+
both: {
|
|
66
|
+
marginBottom: inset,
|
|
67
|
+
marginEnd: 0,
|
|
68
|
+
marginStart: 0,
|
|
69
|
+
marginTop: inset,
|
|
70
|
+
width: thickness
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
12
74
|
};
|
|
13
75
|
}
|
|
14
76
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-divider-tokens.ts"],"sourcesContent":["import type { DividerTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createDividerTokens(\n tokens: PrimitiveThemeTokens,\n): DividerTokens {\n return {\n colors: {\n subtle: tokens.colors.border.subtle.value,\n default: tokens.colors.border.default.value,\n strong: tokens.colors.border.strong.value,\n primary: tokens.colors.primary.value,\n inverse: tokens.colors.text.inverse,\n },\n inset:
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-divider-tokens.ts"],"sourcesContent":["import type { DividerTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createDividerTokens(\n tokens: PrimitiveThemeTokens,\n): DividerTokens {\n const inset = tokens.space.sm;\n const thickness = tokens.borderSize.sm;\n\n return {\n colors: {\n subtle: tokens.colors.border.subtle.value,\n default: tokens.colors.border.default.value,\n strong: tokens.colors.border.strong.value,\n primary: tokens.colors.primary.value,\n inverse: tokens.colors.text.inverse,\n },\n layouts: {\n horizontal: {\n none: {\n height: thickness,\n marginBottom: 0,\n marginEnd: 0,\n marginStart: 0,\n marginTop: 0,\n },\n start: {\n height: thickness,\n marginBottom: 0,\n marginEnd: 0,\n marginStart: inset,\n marginTop: 0,\n },\n end: {\n height: thickness,\n marginBottom: 0,\n marginEnd: inset,\n marginStart: 0,\n marginTop: 0,\n },\n both: {\n height: thickness,\n marginBottom: 0,\n marginEnd: inset,\n marginStart: inset,\n marginTop: 0,\n },\n },\n vertical: {\n none: {\n marginBottom: 0,\n marginEnd: 0,\n marginStart: 0,\n marginTop: 0,\n width: thickness,\n },\n start: {\n marginBottom: 0,\n marginEnd: 0,\n marginStart: 0,\n marginTop: inset,\n width: thickness,\n },\n end: {\n marginBottom: inset,\n marginEnd: 0,\n marginStart: 0,\n marginTop: 0,\n width: thickness,\n },\n both: {\n marginBottom: inset,\n marginEnd: 0,\n marginStart: 0,\n marginTop: inset,\n width: thickness,\n },\n },\n },\n };\n}\n"],"mappings":"AAEO,SAAS,oBACd,QACe;AACf,QAAM,QAAQ,OAAO,MAAM;AAC3B,QAAM,YAAY,OAAO,WAAW;AAEpC,SAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ,OAAO,OAAO,OAAO,OAAO;AAAA,MACpC,SAAS,OAAO,OAAO,OAAO,QAAQ;AAAA,MACtC,QAAQ,OAAO,OAAO,OAAO,OAAO;AAAA,MACpC,SAAS,OAAO,OAAO,QAAQ;AAAA,MAC/B,SAAS,OAAO,OAAO,KAAK;AAAA,IAC9B;AAAA,IACA,SAAS;AAAA,MACP,YAAY;AAAA,QACV,MAAM;AAAA,UACJ,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,WAAW;AAAA,UACX,aAAa;AAAA,UACb,WAAW;AAAA,QACb;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,WAAW;AAAA,UACX,aAAa;AAAA,UACb,WAAW;AAAA,QACb;AAAA,QACA,KAAK;AAAA,UACH,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,WAAW;AAAA,UACX,aAAa;AAAA,UACb,WAAW;AAAA,QACb;AAAA,QACA,MAAM;AAAA,UACJ,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,WAAW;AAAA,UACX,aAAa;AAAA,UACb,WAAW;AAAA,QACb;AAAA,MACF;AAAA,MACA,UAAU;AAAA,QACR,MAAM;AAAA,UACJ,cAAc;AAAA,UACd,WAAW;AAAA,UACX,aAAa;AAAA,UACb,WAAW;AAAA,UACX,OAAO;AAAA,QACT;AAAA,QACA,OAAO;AAAA,UACL,cAAc;AAAA,UACd,WAAW;AAAA,UACX,aAAa;AAAA,UACb,WAAW;AAAA,UACX,OAAO;AAAA,QACT;AAAA,QACA,KAAK;AAAA,UACH,cAAc;AAAA,UACd,WAAW;AAAA,UACX,aAAa;AAAA,UACb,WAAW;AAAA,UACX,OAAO;AAAA,QACT;AAAA,QACA,MAAM;AAAA,UACJ,cAAc;AAAA,UACd,WAAW;AAAA,UACX,aAAa;AAAA,UACb,WAAW;AAAA,UACX,OAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
|
@@ -2,20 +2,24 @@ import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
|
2
2
|
import { FlyoutTokens } from '../types/flyout-tokens.types.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/carousel-tokens.types.mjs';
|
|
5
6
|
import '../types/checkbox-tokens.types.mjs';
|
|
7
|
+
import '../types/list-tokens.types.mjs';
|
|
6
8
|
import '../types/radio-tokens.types.mjs';
|
|
7
9
|
import '../types/accordion-tokens.types.mjs';
|
|
8
10
|
import '../types/avatar-tokens.types.mjs';
|
|
9
11
|
import '../types/buttons-tokens.types.mjs';
|
|
10
12
|
import '../types/card-tokens.types.mjs';
|
|
11
|
-
import '../types/control-
|
|
13
|
+
import '../types/control-tokens.types.mjs';
|
|
12
14
|
import '../types/data-state-tokens.types.mjs';
|
|
13
15
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
14
16
|
import '../types/divider-tokens.types.mjs';
|
|
15
17
|
import '../types/icon-tokens.types.mjs';
|
|
18
|
+
import '../types/pagination-tokens.types.mjs';
|
|
16
19
|
import '../types/pressable-tokens.types.mjs';
|
|
17
20
|
import '../types/progress-tokens.types.mjs';
|
|
18
21
|
import '../types/spinner-tokens.types.mjs';
|
|
22
|
+
import '../types/segmented-control-tokens.types.mjs';
|
|
19
23
|
import '../types/select-tokens.types.mjs';
|
|
20
24
|
import '../types/skeleton-tokens.types.mjs';
|
|
21
25
|
import '../types/slider-tokens.types.mjs';
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
function createFlyoutTokens(tokens) {
|
|
2
|
+
const borderRadius = tokens.radii.xl;
|
|
3
|
+
const handleContainerHeight = 32;
|
|
2
4
|
return {
|
|
3
5
|
zIndexBase: 100,
|
|
4
6
|
maxHeightRatio: 0.7,
|
|
@@ -6,18 +8,44 @@ function createFlyoutTokens(tokens) {
|
|
|
6
8
|
overlayVisibleOpacity: 0.4,
|
|
7
9
|
backgroundColor: tokens.colors.surface.secondary.value,
|
|
8
10
|
contentPaddingHorizontal: tokens.space.md,
|
|
9
|
-
borderRadius: tokens.radii.xl,
|
|
10
11
|
hiddenOpacity: 0,
|
|
11
12
|
title: {
|
|
12
13
|
paddingVertical: tokens.space.msm,
|
|
13
14
|
paddingHorizontal: tokens.space.md
|
|
14
15
|
},
|
|
15
16
|
handle: {
|
|
16
|
-
containerHeight: 32,
|
|
17
17
|
width: "25%",
|
|
18
18
|
height: 6,
|
|
19
19
|
borderRadius: tokens.radii.round,
|
|
20
|
-
backgroundColor: tokens.colors.
|
|
20
|
+
backgroundColor: tokens.colors.text.tertiary
|
|
21
|
+
},
|
|
22
|
+
placements: {
|
|
23
|
+
top: {
|
|
24
|
+
container: {
|
|
25
|
+
top: 0,
|
|
26
|
+
borderTopLeftRadius: 0,
|
|
27
|
+
borderTopRightRadius: 0,
|
|
28
|
+
borderBottomLeftRadius: borderRadius,
|
|
29
|
+
borderBottomRightRadius: borderRadius
|
|
30
|
+
},
|
|
31
|
+
handleContainer: {
|
|
32
|
+
bottom: -handleContainerHeight,
|
|
33
|
+
height: handleContainerHeight
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
bottom: {
|
|
37
|
+
container: {
|
|
38
|
+
bottom: 0,
|
|
39
|
+
borderTopLeftRadius: borderRadius,
|
|
40
|
+
borderTopRightRadius: borderRadius,
|
|
41
|
+
borderBottomLeftRadius: 0,
|
|
42
|
+
borderBottomRightRadius: 0
|
|
43
|
+
},
|
|
44
|
+
handleContainer: {
|
|
45
|
+
top: -handleContainerHeight,
|
|
46
|
+
height: handleContainerHeight
|
|
47
|
+
}
|
|
48
|
+
}
|
|
21
49
|
}
|
|
22
50
|
};
|
|
23
51
|
}
|
|
@@ -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 const borderRadius = tokens.radii.xl;\n const handleContainerHeight = 32;\n\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 hiddenOpacity: 0,\n\n title: {\n paddingVertical: tokens.space.msm,\n paddingHorizontal: tokens.space.md,\n },\n\n handle: {\n width: \"25%\",\n height: 6,\n borderRadius: tokens.radii.round,\n backgroundColor: tokens.colors.text.tertiary,\n },\n\n placements: {\n top: {\n container: {\n top: 0,\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n borderBottomLeftRadius: borderRadius,\n borderBottomRightRadius: borderRadius,\n },\n handleContainer: {\n bottom: -handleContainerHeight,\n height: handleContainerHeight,\n },\n },\n bottom: {\n container: {\n bottom: 0,\n borderTopLeftRadius: borderRadius,\n borderTopRightRadius: borderRadius,\n borderBottomLeftRadius: 0,\n borderBottomRightRadius: 0,\n },\n handleContainer: {\n top: -handleContainerHeight,\n height: handleContainerHeight,\n },\n },\n },\n };\n}\n"],"mappings":"AAEO,SAAS,mBAAmB,QAA4C;AAC7E,QAAM,eAAe,OAAO,MAAM;AAClC,QAAM,wBAAwB;AAE9B,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,eAAe;AAAA,IAEf,OAAO;AAAA,MACL,iBAAiB,OAAO,MAAM;AAAA,MAC9B,mBAAmB,OAAO,MAAM;AAAA,IAClC;AAAA,IAEA,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc,OAAO,MAAM;AAAA,MAC3B,iBAAiB,OAAO,OAAO,KAAK;AAAA,IACtC;AAAA,IAEA,YAAY;AAAA,MACV,KAAK;AAAA,QACH,WAAW;AAAA,UACT,KAAK;AAAA,UACL,qBAAqB;AAAA,UACrB,sBAAsB;AAAA,UACtB,wBAAwB;AAAA,UACxB,yBAAyB;AAAA,QAC3B;AAAA,QACA,iBAAiB;AAAA,UACf,QAAQ,CAAC;AAAA,UACT,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,QACN,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,qBAAqB;AAAA,UACrB,sBAAsB;AAAA,UACtB,wBAAwB;AAAA,UACxB,yBAAyB;AAAA,QAC3B;AAAA,QACA,iBAAiB;AAAA,UACf,KAAK,CAAC;AAAA,UACN,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
|
@@ -2,20 +2,24 @@ import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
|
2
2
|
import { IconButtonTokens } from '../types/buttons-tokens.types.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/carousel-tokens.types.mjs';
|
|
5
6
|
import '../types/checkbox-tokens.types.mjs';
|
|
7
|
+
import '../types/list-tokens.types.mjs';
|
|
6
8
|
import '../types/radio-tokens.types.mjs';
|
|
7
9
|
import '../types/accordion-tokens.types.mjs';
|
|
8
10
|
import '../types/avatar-tokens.types.mjs';
|
|
9
11
|
import '../types/card-tokens.types.mjs';
|
|
10
|
-
import '../types/control-
|
|
12
|
+
import '../types/control-tokens.types.mjs';
|
|
11
13
|
import '../types/data-state-tokens.types.mjs';
|
|
12
14
|
import '../types/datetime-picker-tokens.types.mjs';
|
|
13
15
|
import '../types/divider-tokens.types.mjs';
|
|
14
16
|
import '../types/flyout-tokens.types.mjs';
|
|
15
17
|
import '../types/icon-tokens.types.mjs';
|
|
18
|
+
import '../types/pagination-tokens.types.mjs';
|
|
16
19
|
import '../types/pressable-tokens.types.mjs';
|
|
17
20
|
import '../types/progress-tokens.types.mjs';
|
|
18
21
|
import '../types/spinner-tokens.types.mjs';
|
|
22
|
+
import '../types/segmented-control-tokens.types.mjs';
|
|
19
23
|
import '../types/select-tokens.types.mjs';
|
|
20
24
|
import '../types/skeleton-tokens.types.mjs';
|
|
21
25
|
import '../types/slider-tokens.types.mjs';
|
|
@@ -3,7 +3,6 @@ function createIconButtonTokens(tokens) {
|
|
|
3
3
|
const primaryContrast = tokens.colors.primary.contrast;
|
|
4
4
|
const secondary = tokens.colors.secondary.value;
|
|
5
5
|
const secondaryContrast = tokens.colors.secondary.contrast;
|
|
6
|
-
const neutral = tokens.colors.neutral;
|
|
7
6
|
const disabledColor = tokens.colors.text.disabled;
|
|
8
7
|
return {
|
|
9
8
|
borderWidth: tokens.borderSize.sm,
|
|
@@ -24,44 +23,72 @@ function createIconButtonTokens(tokens) {
|
|
|
24
23
|
},
|
|
25
24
|
variants: {
|
|
26
25
|
filled: {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
26
|
+
default: {
|
|
27
|
+
backgroundColor: primary,
|
|
28
|
+
borderColor: primary,
|
|
29
|
+
color: primaryContrast
|
|
30
|
+
},
|
|
31
|
+
loading: {
|
|
32
|
+
backgroundColor: primary,
|
|
33
|
+
borderColor: primary,
|
|
34
|
+
color: primaryContrast
|
|
35
|
+
},
|
|
36
|
+
disabled: {
|
|
37
|
+
backgroundColor: tokens.colors.surface.primary.value,
|
|
38
|
+
borderColor: tokens.colors.border.default.value,
|
|
39
|
+
color: disabledColor
|
|
40
|
+
}
|
|
33
41
|
},
|
|
34
42
|
outlined: {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
43
|
+
default: {
|
|
44
|
+
backgroundColor: "transparent",
|
|
45
|
+
borderColor: primary,
|
|
46
|
+
color: primary
|
|
47
|
+
},
|
|
48
|
+
loading: {
|
|
49
|
+
backgroundColor: "transparent",
|
|
50
|
+
borderColor: primary,
|
|
51
|
+
color: primary
|
|
52
|
+
},
|
|
53
|
+
disabled: {
|
|
54
|
+
backgroundColor: "transparent",
|
|
55
|
+
borderColor: tokens.colors.border.default.value,
|
|
56
|
+
color: disabledColor
|
|
57
|
+
}
|
|
41
58
|
},
|
|
42
59
|
soft: {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
60
|
+
default: {
|
|
61
|
+
backgroundColor: secondary,
|
|
62
|
+
borderColor: secondary,
|
|
63
|
+
color: secondaryContrast
|
|
64
|
+
},
|
|
65
|
+
loading: {
|
|
66
|
+
backgroundColor: secondary,
|
|
67
|
+
borderColor: secondary,
|
|
68
|
+
color: secondaryContrast
|
|
69
|
+
},
|
|
70
|
+
disabled: {
|
|
71
|
+
backgroundColor: tokens.colors.surface.primary.value,
|
|
72
|
+
borderColor: tokens.colors.border.subtle.value,
|
|
73
|
+
color: disabledColor
|
|
74
|
+
}
|
|
49
75
|
},
|
|
50
76
|
ghost: {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
77
|
+
default: {
|
|
78
|
+
backgroundColor: "transparent",
|
|
79
|
+
borderColor: "transparent",
|
|
80
|
+
color: primary
|
|
81
|
+
},
|
|
82
|
+
loading: {
|
|
83
|
+
backgroundColor: "transparent",
|
|
84
|
+
borderColor: "transparent",
|
|
85
|
+
color: primary
|
|
86
|
+
},
|
|
87
|
+
disabled: {
|
|
88
|
+
backgroundColor: "transparent",
|
|
89
|
+
borderColor: "transparent",
|
|
90
|
+
color: disabledColor
|
|
91
|
+
}
|
|
65
92
|
}
|
|
66
93
|
}
|
|
67
94
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-icon-button-tokens.ts"],"sourcesContent":["import { IconButtonTokens, PrimitiveThemeTokens } from \"../types\";\
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-icon-button-tokens.ts"],"sourcesContent":["import { IconButtonTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createIconButtonTokens(\n tokens: PrimitiveThemeTokens,\n): IconButtonTokens {\n const primary = tokens.colors.primary.value;\n const primaryContrast = tokens.colors.primary.contrast;\n\n const secondary = tokens.colors.secondary.value;\n const secondaryContrast = tokens.colors.secondary.contrast;\n\n const disabledColor = tokens.colors.text.disabled;\n\n return {\n borderWidth: tokens.borderSize.sm,\n borderRadius: tokens.radii.md,\n\n sizes: {\n small: {\n size: 32,\n padding: 6,\n },\n medium: {\n size: 40,\n padding: 8,\n },\n large: {\n size: 48,\n padding: 10,\n },\n },\n\n variants: {\n filled: {\n default: {\n backgroundColor: primary,\n borderColor: primary,\n color: primaryContrast,\n },\n loading: {\n backgroundColor: primary,\n borderColor: primary,\n color: primaryContrast,\n },\n disabled: {\n backgroundColor: tokens.colors.surface.primary.value,\n borderColor: tokens.colors.border.default.value,\n color: disabledColor,\n },\n },\n\n outlined: {\n default: {\n backgroundColor: \"transparent\",\n borderColor: primary,\n color: primary,\n },\n loading: {\n backgroundColor: \"transparent\",\n borderColor: primary,\n color: primary,\n },\n disabled: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: disabledColor,\n },\n },\n\n soft: {\n default: {\n backgroundColor: secondary,\n borderColor: secondary,\n color: secondaryContrast,\n },\n loading: {\n backgroundColor: secondary,\n borderColor: secondary,\n color: secondaryContrast,\n },\n disabled: {\n backgroundColor: tokens.colors.surface.primary.value,\n borderColor: tokens.colors.border.subtle.value,\n color: disabledColor,\n },\n },\n\n ghost: {\n default: {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n color: primary,\n },\n loading: {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n color: primary,\n },\n disabled: {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n color: disabledColor,\n },\n },\n },\n };\n}\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,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,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB,OAAO,OAAO,QAAQ,QAAQ;AAAA,UAC/C,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MAEA,UAAU;AAAA,QACR,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MAEA,MAAM;AAAA,QACJ,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB,OAAO,OAAO,QAAQ,QAAQ;AAAA,UAC/C,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,UACzC,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MAEA,OAAO;AAAA,QACL,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
|
|
2
|
+
import { ListTokens } from '../types/list-tokens.types.mjs';
|
|
3
|
+
import '../types/badge-tokens.types.mjs';
|
|
4
|
+
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/carousel-tokens.types.mjs';
|
|
6
|
+
import '../types/checkbox-tokens.types.mjs';
|
|
7
|
+
import '../types/radio-tokens.types.mjs';
|
|
8
|
+
import '../types/accordion-tokens.types.mjs';
|
|
9
|
+
import '../types/avatar-tokens.types.mjs';
|
|
10
|
+
import '../types/buttons-tokens.types.mjs';
|
|
11
|
+
import '../types/card-tokens.types.mjs';
|
|
12
|
+
import '../types/control-tokens.types.mjs';
|
|
13
|
+
import '../types/data-state-tokens.types.mjs';
|
|
14
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
15
|
+
import '../types/divider-tokens.types.mjs';
|
|
16
|
+
import '../types/flyout-tokens.types.mjs';
|
|
17
|
+
import '../types/icon-tokens.types.mjs';
|
|
18
|
+
import '../types/pagination-tokens.types.mjs';
|
|
19
|
+
import '../types/pressable-tokens.types.mjs';
|
|
20
|
+
import '../types/progress-tokens.types.mjs';
|
|
21
|
+
import '../types/spinner-tokens.types.mjs';
|
|
22
|
+
import '../types/segmented-control-tokens.types.mjs';
|
|
23
|
+
import '../types/select-tokens.types.mjs';
|
|
24
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
25
|
+
import '../types/slider-tokens.types.mjs';
|
|
26
|
+
import '../types/stepper-tokens.types.mjs';
|
|
27
|
+
import '../types/switch-tokens.types.mjs';
|
|
28
|
+
import '../types/tag-tokens.types.mjs';
|
|
29
|
+
import '../types/textarea-tokens.types.mjs';
|
|
30
|
+
import '../types/time-picker-token.types.mjs';
|
|
31
|
+
import '../types/tokens.types.mjs';
|
|
32
|
+
|
|
33
|
+
declare function createListTokens(tokens: PrimitiveThemeTokens): ListTokens;
|
|
34
|
+
|
|
35
|
+
export { createListTokens };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
function createListTokens(tokens) {
|
|
2
|
+
return {
|
|
3
|
+
backgroundColor: tokens.colors.surface.elevated.value,
|
|
4
|
+
borderColor: tokens.colors.border.subtle.value,
|
|
5
|
+
borderWidth: tokens.borderSize.sm,
|
|
6
|
+
borderRadius: tokens.radii.lg,
|
|
7
|
+
item: { gap: tokens.space.mxs, padding: tokens.space.sm },
|
|
8
|
+
content: { gap: tokens.space.xxs }
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
export {
|
|
12
|
+
createListTokens
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=create-list-tokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-list-tokens.ts"],"sourcesContent":["import type { ListTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createListTokens(tokens: PrimitiveThemeTokens): ListTokens {\n return {\n backgroundColor: tokens.colors.surface.elevated.value,\n borderColor: tokens.colors.border.subtle.value,\n borderWidth: tokens.borderSize.sm,\n borderRadius: tokens.radii.lg,\n item: { gap: tokens.space.mxs, padding: tokens.space.sm },\n content: { gap: tokens.space.xxs },\n };\n}\n"],"mappings":"AAEO,SAAS,iBAAiB,QAA0C;AACzE,SAAO;AAAA,IACL,iBAAiB,OAAO,OAAO,QAAQ,SAAS;AAAA,IAChD,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,IACzC,aAAa,OAAO,WAAW;AAAA,IAC/B,cAAc,OAAO,MAAM;AAAA,IAC3B,MAAM,EAAE,KAAK,OAAO,MAAM,KAAK,SAAS,OAAO,MAAM,GAAG;AAAA,IACxD,SAAS,EAAE,KAAK,OAAO,MAAM,IAAI;AAAA,EACnC;AACF;","names":[]}
|