@impulse-ui-native/theme 8.1.0 → 8.3.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 +47 -0
- package/dist/hooks/index.d.mts +5 -3
- 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 +4 -1
- package/dist/index.d.mts +6 -3
- package/dist/providers/index.d.mts +5 -1
- package/dist/providers/theme.provider.d.mts +5 -1
- package/dist/theme/chart-color-tokens.d.mts +5 -0
- package/dist/theme/chart-color-tokens.js +21 -0
- package/dist/theme/chart-color-tokens.js.map +1 -0
- package/dist/theme/create-accordion-tokens.d.mts +5 -1
- package/dist/theme/create-avatar-tokens.d.mts +5 -1
- package/dist/theme/create-badge-tokens.d.mts +5 -1
- package/dist/theme/create-button-tokens.d.mts +5 -1
- package/dist/theme/create-card-tokens.d.mts +5 -1
- package/dist/theme/create-carousel-tokens.d.mts +5 -1
- package/dist/theme/create-charts-tokens.d.mts +42 -0
- package/dist/theme/create-charts-tokens.js +25 -0
- package/dist/theme/create-charts-tokens.js.map +1 -0
- package/dist/theme/create-checkbox-tokens.d.mts +5 -1
- package/dist/theme/create-control-tokens.d.mts +5 -1
- package/dist/theme/create-data-state-tokens.d.mts +5 -1
- package/dist/theme/create-datetime-picker.d.mts +5 -1
- package/dist/theme/create-divider-tokens.d.mts +5 -1
- package/dist/theme/create-flyout-tokens.d.mts +5 -1
- package/dist/theme/create-flyout-tokens.js +2 -0
- 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-list-tokens.d.mts +5 -1
- package/dist/theme/create-modal-tokens.d.mts +5 -1
- package/dist/theme/create-modal-tokens.js +2 -0
- package/dist/theme/create-modal-tokens.js.map +1 -1
- package/dist/theme/create-pagination-tokens.d.mts +5 -1
- package/dist/theme/create-popover-tokens.d.mts +5 -1
- package/dist/theme/create-progress-tokens.d.mts +5 -1
- package/dist/theme/create-radio-tokens.d.mts +5 -1
- package/dist/theme/create-segmented-control-tokens.d.mts +5 -1
- package/dist/theme/create-select-tokens.d.mts +5 -1
- package/dist/theme/create-select-tokens.js +1 -0
- package/dist/theme/create-select-tokens.js.map +1 -1
- package/dist/theme/create-skeleton-tokens.d.mts +5 -1
- package/dist/theme/create-slider-tokens.d.mts +5 -1
- package/dist/theme/create-slider-tokens.js +3 -0
- package/dist/theme/create-slider-tokens.js.map +1 -1
- package/dist/theme/create-spinner-tokens.d.mts +5 -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-tabs-tokens.d.mts +5 -1
- package/dist/theme/create-tag-tokens.d.mts +5 -1
- package/dist/theme/create-textarea-tokens.d.mts +5 -1
- package/dist/theme/create-time-picker-tokens.d.mts +5 -1
- package/dist/theme/create-toast-tokens.d.mts +5 -1
- package/dist/theme/create-toast-tokens.js +4 -0
- package/dist/theme/create-toast-tokens.js.map +1 -1
- package/dist/theme/dark.theme.d.mts +5 -1
- package/dist/theme/dark.theme.js +4 -0
- package/dist/theme/dark.theme.js.map +1 -1
- package/dist/theme/index.d.mts +8 -3
- package/dist/theme/index.js +1 -0
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/light.theme.d.mts +5 -1
- package/dist/theme/light.theme.js +4 -0
- package/dist/theme/light.theme.js.map +1 -1
- package/dist/theme/tokens.theme.d.mts +9 -4
- package/dist/theme/tokens.theme.js +5 -17
- package/dist/theme/tokens.theme.js.map +1 -1
- package/dist/{theme-provider.types-B4jCf93c.d.mts → theme-provider.types-CLjz9-IY.d.mts} +10 -1
- package/dist/types/charts-tokens.types.d.mts +31 -0
- package/dist/types/charts-tokens.types.js +1 -0
- package/dist/types/charts-tokens.types.js.map +1 -0
- package/dist/types/flyout-tokens.types.d.mts +6 -0
- package/dist/types/index.d.mts +3 -2
- package/dist/types/index.js +1 -0
- package/dist/types/index.js.map +1 -1
- package/dist/types/modal-tokens.types.d.mts +2 -0
- package/dist/types/select-tokens.types.d.mts +1 -0
- package/dist/types/shadow.types.d.mts +2 -1
- package/dist/types/slider-tokens.types.d.mts +3 -0
- package/dist/types/theme-provider.types.d.mts +5 -1
- package/dist/types/toast-tokens.types.d.mts +6 -2
- package/dist/utils/index.d.mts +3 -1
- package/dist/utils/style.utils.d.mts +5 -3
- package/dist/utils/style.utils.js +2 -2
- package/dist/utils/style.utils.js.map +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -100,3 +100,50 @@ small foreground text distinct from their fills. Secondary foregrounds use
|
|
|
100
100
|
From the repository root, run `node scripts/check-theme-visuals.mjs` to check
|
|
101
101
|
default foreground/background pairs and state indicators in both palettes.
|
|
102
102
|
See `docs/visual-token-audit.md` for package coverage and verification limits.
|
|
103
|
+
|
|
104
|
+
## Shared visual customization
|
|
105
|
+
|
|
106
|
+
`theme.light` and `theme.dark` support `shadows` (radius, opacity, and Android
|
|
107
|
+
elevation by semantic level) and `codeFontFamily`. Component defaults are
|
|
108
|
+
configurable through `components.charts`, `components.slider`, and the overlay
|
|
109
|
+
motion tokens.
|
|
110
|
+
|
|
111
|
+
```tsx
|
|
112
|
+
<ThemeProvider
|
|
113
|
+
theme={{
|
|
114
|
+
light: {
|
|
115
|
+
shadows: { sm: { radius: 6, opacity: 0.16, elevation: 3 } },
|
|
116
|
+
codeFontFamily: "MyCodeFont",
|
|
117
|
+
},
|
|
118
|
+
dark: {
|
|
119
|
+
shadows: { sm: { radius: 6, opacity: 0.24, elevation: 3 } },
|
|
120
|
+
codeFontFamily: "MyCodeFont",
|
|
121
|
+
},
|
|
122
|
+
}}
|
|
123
|
+
components={(theme) => ({
|
|
124
|
+
charts: {
|
|
125
|
+
insets: { left: theme.space.lg },
|
|
126
|
+
line: { width: theme.borderSize.lg },
|
|
127
|
+
},
|
|
128
|
+
slider: {
|
|
129
|
+
markLabelWidth: 64,
|
|
130
|
+
thumbHighlightSize: 6,
|
|
131
|
+
valueBubbleMinWidth: 48,
|
|
132
|
+
},
|
|
133
|
+
modal: { enterDuration: 220, exitDuration: 180 },
|
|
134
|
+
toast: { enterDuration: 220, exitDuration: 180, stackDuration: 260 },
|
|
135
|
+
flyout: { enterSpring: { damping: 45 }, exitDuration: 180 },
|
|
136
|
+
})}
|
|
137
|
+
>
|
|
138
|
+
{/* application */}
|
|
139
|
+
</ThemeProvider>
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
`createChartsTokens` and `ChartsTokens` define the chart palette, Cartesian
|
|
143
|
+
insets, axis/grid/line widths, axis tick length and label gap, bar padding ratios,
|
|
144
|
+
and pie ring padding. The palette defaults to `ChartColorTokens`; override
|
|
145
|
+
`components.charts.palette` to customize series colors. Explicit component and
|
|
146
|
+
series props continue to take precedence.
|
|
147
|
+
|
|
148
|
+
`getShadowStyle` accepts the active shadow scale as its fourth argument. Omitting
|
|
149
|
+
it retains the exported default `ShadowScale` for existing utility callers.
|
package/dist/hooks/index.d.mts
CHANGED
|
@@ -7,15 +7,19 @@ export { useStyleProps } from './use-style-props.hook.mjs';
|
|
|
7
7
|
export { useTheme } from './use-theme.hook.mjs';
|
|
8
8
|
export { useThemedStyles } from './use-themed-styles.mjs';
|
|
9
9
|
import '../types/tokens.types.mjs';
|
|
10
|
-
import '../theme-provider.types-
|
|
10
|
+
import '../theme-provider.types-CLjz9-IY.mjs';
|
|
11
11
|
import '../types/badge-tokens.types.mjs';
|
|
12
12
|
import '../types/components.types.mjs';
|
|
13
13
|
import '../types/carousel-tokens.types.mjs';
|
|
14
|
+
import '../types/charts-tokens.types.mjs';
|
|
15
|
+
import '../types/chart.types.mjs';
|
|
14
16
|
import '../types/checkbox-tokens.types.mjs';
|
|
15
17
|
import '../types/list-tokens.types.mjs';
|
|
16
18
|
import '../types/modal-tokens.types.mjs';
|
|
17
19
|
import '../types/popover-tokens.types.mjs';
|
|
18
20
|
import '../types/radio-tokens.types.mjs';
|
|
21
|
+
import '../types/shadow.types.mjs';
|
|
22
|
+
import 'react-native';
|
|
19
23
|
import '../types/tabs-tokens.types.mjs';
|
|
20
24
|
import '../types/accordion-tokens.types.mjs';
|
|
21
25
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -41,10 +45,8 @@ import '../types/tag-tokens.types.mjs';
|
|
|
41
45
|
import '../types/textarea-tokens.types.mjs';
|
|
42
46
|
import '../types/time-picker-token.types.mjs';
|
|
43
47
|
import '../types/border.types.mjs';
|
|
44
|
-
import 'react-native';
|
|
45
48
|
import '../types/color.types.mjs';
|
|
46
49
|
import '../types/dimension.types.mjs';
|
|
47
50
|
import '../types/flex.types.mjs';
|
|
48
|
-
import '../types/shadow.types.mjs';
|
|
49
51
|
import '../types/spacing.types.mjs';
|
|
50
52
|
import '../types/typography.types.mjs';
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
import { T as ThemeColors } from '../theme-provider.types-
|
|
1
|
+
import { T as ThemeColors } from '../theme-provider.types-CLjz9-IY.mjs';
|
|
2
2
|
import '../types/badge-tokens.types.mjs';
|
|
3
3
|
import '../types/components.types.mjs';
|
|
4
4
|
import '../types/carousel-tokens.types.mjs';
|
|
5
|
+
import '../types/charts-tokens.types.mjs';
|
|
6
|
+
import '../types/chart.types.mjs';
|
|
5
7
|
import '../types/checkbox-tokens.types.mjs';
|
|
6
8
|
import '../types/list-tokens.types.mjs';
|
|
7
9
|
import '../types/modal-tokens.types.mjs';
|
|
8
10
|
import '../types/popover-tokens.types.mjs';
|
|
9
11
|
import '../types/radio-tokens.types.mjs';
|
|
12
|
+
import '../types/shadow.types.mjs';
|
|
13
|
+
import 'react-native';
|
|
10
14
|
import '../types/tabs-tokens.types.mjs';
|
|
11
15
|
import '../types/accordion-tokens.types.mjs';
|
|
12
16
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
import { c as ComponentsTokens } from '../theme-provider.types-
|
|
1
|
+
import { c as ComponentsTokens } from '../theme-provider.types-CLjz9-IY.mjs';
|
|
2
2
|
import '../types/badge-tokens.types.mjs';
|
|
3
3
|
import '../types/components.types.mjs';
|
|
4
4
|
import '../types/carousel-tokens.types.mjs';
|
|
5
|
+
import '../types/charts-tokens.types.mjs';
|
|
6
|
+
import '../types/chart.types.mjs';
|
|
5
7
|
import '../types/checkbox-tokens.types.mjs';
|
|
6
8
|
import '../types/list-tokens.types.mjs';
|
|
7
9
|
import '../types/modal-tokens.types.mjs';
|
|
8
10
|
import '../types/popover-tokens.types.mjs';
|
|
9
11
|
import '../types/radio-tokens.types.mjs';
|
|
12
|
+
import '../types/shadow.types.mjs';
|
|
13
|
+
import 'react-native';
|
|
10
14
|
import '../types/tabs-tokens.types.mjs';
|
|
11
15
|
import '../types/accordion-tokens.types.mjs';
|
|
12
16
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
import { A as AppTheme } from '../theme-provider.types-
|
|
1
|
+
import { A as AppTheme } from '../theme-provider.types-CLjz9-IY.mjs';
|
|
2
2
|
import '../types/badge-tokens.types.mjs';
|
|
3
3
|
import '../types/components.types.mjs';
|
|
4
4
|
import '../types/carousel-tokens.types.mjs';
|
|
5
|
+
import '../types/charts-tokens.types.mjs';
|
|
6
|
+
import '../types/chart.types.mjs';
|
|
5
7
|
import '../types/checkbox-tokens.types.mjs';
|
|
6
8
|
import '../types/list-tokens.types.mjs';
|
|
7
9
|
import '../types/modal-tokens.types.mjs';
|
|
8
10
|
import '../types/popover-tokens.types.mjs';
|
|
9
11
|
import '../types/radio-tokens.types.mjs';
|
|
12
|
+
import '../types/shadow.types.mjs';
|
|
13
|
+
import 'react-native';
|
|
10
14
|
import '../types/tabs-tokens.types.mjs';
|
|
11
15
|
import '../types/accordion-tokens.types.mjs';
|
|
12
16
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { StyleSheet } from 'react-native';
|
|
2
|
-
import { A as AppTheme } from '../theme-provider.types-
|
|
2
|
+
import { A as AppTheme } from '../theme-provider.types-CLjz9-IY.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
5
|
import '../types/carousel-tokens.types.mjs';
|
|
6
|
+
import '../types/charts-tokens.types.mjs';
|
|
7
|
+
import '../types/chart.types.mjs';
|
|
6
8
|
import '../types/checkbox-tokens.types.mjs';
|
|
7
9
|
import '../types/list-tokens.types.mjs';
|
|
8
10
|
import '../types/modal-tokens.types.mjs';
|
|
9
11
|
import '../types/popover-tokens.types.mjs';
|
|
10
12
|
import '../types/radio-tokens.types.mjs';
|
|
13
|
+
import '../types/shadow.types.mjs';
|
|
11
14
|
import '../types/tabs-tokens.types.mjs';
|
|
12
15
|
import '../types/accordion-tokens.types.mjs';
|
|
13
16
|
import '../types/avatar-tokens.types.mjs';
|
package/dist/index.d.mts
CHANGED
|
@@ -10,7 +10,8 @@ export { useThemedStyles } from './hooks/use-themed-styles.mjs';
|
|
|
10
10
|
export { ThemeProvider, useThemeContext } from './providers/theme.provider.mjs';
|
|
11
11
|
export { DarkTheme } from './theme/dark.theme.mjs';
|
|
12
12
|
export { LightTheme } from './theme/light.theme.mjs';
|
|
13
|
-
export { BorderSizeTokens,
|
|
13
|
+
export { BorderSizeTokens, CodeFontFamilyToken, DarkColors, FontFamilyTokens, FontFamilyWeightsItalicTokens, FontFamilyWeightsNormalTokens, FontSizeTokens, FontWeightTokens, LetterSpacingTokens, LightColors, LineHeightTokens, NeutralColorTokens, RadiiTokens, SpaceTokens, createComponentsTokens } from './theme/tokens.theme.mjs';
|
|
14
|
+
export { createChartsTokens } from './theme/create-charts-tokens.mjs';
|
|
14
15
|
export { createPaginationTokens } from './theme/create-pagination-tokens.mjs';
|
|
15
16
|
export { createSliderTokens } from './theme/create-slider-tokens.mjs';
|
|
16
17
|
export { createSegmentedControlTokens } from './theme/create-segmented-control-tokens.mjs';
|
|
@@ -22,13 +23,14 @@ export { createModalTokens } from './theme/create-modal-tokens.mjs';
|
|
|
22
23
|
export { BorderProps } from './types/border.types.mjs';
|
|
23
24
|
export { ColorProps } from './types/color.types.mjs';
|
|
24
25
|
export { ChartColorPalette } from './types/chart.types.mjs';
|
|
26
|
+
export { ChartsTokens } from './types/charts-tokens.types.mjs';
|
|
25
27
|
export { ActionState, ActionVariant, ActionVisualState, AvailabilityState, AvailabilityVisualState, ComponentSize, ComponentVariant, ControlState, ControlVisualState, DisplayVariant, FieldState, FieldVariant, FieldVisualState, SelectionItemState, SelectionItemVisualState, SelectionState, SelectionVariant, SelectionVisualState, VisualStateTokens } from './types/components.types.mjs';
|
|
26
28
|
export { DimensionProps } from './types/dimension.types.mjs';
|
|
27
29
|
export { FlexProps } from './types/flex.types.mjs';
|
|
28
|
-
export { ShadowIntensity, ShadowLevel, ShadowPosition, ShadowProps } from './types/shadow.types.mjs';
|
|
30
|
+
export { ShadowIntensity, ShadowLevel, ShadowPosition, ShadowProps, ShadowScaleTokens } from './types/shadow.types.mjs';
|
|
29
31
|
export { SpacingProps } from './types/spacing.types.mjs';
|
|
30
32
|
export { StylePropKey, StyleProps } from './types/style.types.mjs';
|
|
31
|
-
export { A as AppTheme, C as ColorPair, a as ColorScheme, b as ComponentsThemes, c as ComponentsTokens, E as ExtendedThemeColors, P as PrimitiveThemeTokens, T as ThemeColors, d as ThemeContextData, e as ToastTokens, f as ToastTone } from './theme-provider.types-
|
|
33
|
+
export { A as AppTheme, C as ColorPair, a as ColorScheme, b as ComponentsThemes, c as ComponentsTokens, E as ExtendedThemeColors, P as PrimitiveThemeTokens, T as ThemeColors, d as ThemeContextData, e as ToastTokens, f as ToastTone } from './theme-provider.types-CLjz9-IY.mjs';
|
|
32
34
|
export { BorderSize, BorderSizeKey, FontFamily, FontSize, FontWeight, FontWeightItalic, FontWeightKeys, FontWeightNormal, FontWeightValue, LetterSpacingKey, LetterSpacings, LineHeight, NeutralColor, NeutralColorKey, Radii, RadiiBlob, RadiiConditional, RadiiDrawn, RadiusBlobKey, RadiusConditionalKey, RadiusDrawnKey, RadiusKey, Space, SpaceSizesKey, TypographyKey } from './types/tokens.types.mjs';
|
|
33
35
|
export { TypographyPresetKey, TypographyProps } from './types/typography.types.mjs';
|
|
34
36
|
export { ActionAppearanceTokens, ButtonSizeTokens, ButtonTokens, ButtonVariantTokens, IconButtonSizeTokens, IconButtonTokens, IconButtonVariantTokens } from './types/buttons-tokens.types.mjs';
|
|
@@ -76,6 +78,7 @@ export { getSegmentedControlItemTokens } from './utils/segmented-control-state.u
|
|
|
76
78
|
export { getSliderTrackTokens } from './utils/slider-tokens.utils.mjs';
|
|
77
79
|
export { createStyleKey, extractStyleProps, getShadowStyle } from './utils/style.utils.mjs';
|
|
78
80
|
export { getTabsItemTokens } from './utils/tabs-state.utils.mjs';
|
|
81
|
+
export { ChartColorTokens } from './theme/chart-color-tokens.mjs';
|
|
79
82
|
import 'react-native';
|
|
80
83
|
import 'react';
|
|
81
84
|
import 'react/jsx-runtime';
|
|
@@ -2,15 +2,19 @@ export { ThemeProvider, useThemeContext } from './theme.provider.mjs';
|
|
|
2
2
|
import 'react';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import '@impulse-ui-native/core';
|
|
5
|
-
import '../theme-provider.types-
|
|
5
|
+
import '../theme-provider.types-CLjz9-IY.mjs';
|
|
6
6
|
import '../types/badge-tokens.types.mjs';
|
|
7
7
|
import '../types/components.types.mjs';
|
|
8
8
|
import '../types/carousel-tokens.types.mjs';
|
|
9
|
+
import '../types/charts-tokens.types.mjs';
|
|
10
|
+
import '../types/chart.types.mjs';
|
|
9
11
|
import '../types/checkbox-tokens.types.mjs';
|
|
10
12
|
import '../types/list-tokens.types.mjs';
|
|
11
13
|
import '../types/modal-tokens.types.mjs';
|
|
12
14
|
import '../types/popover-tokens.types.mjs';
|
|
13
15
|
import '../types/radio-tokens.types.mjs';
|
|
16
|
+
import '../types/shadow.types.mjs';
|
|
17
|
+
import 'react-native';
|
|
14
18
|
import '../types/tabs-tokens.types.mjs';
|
|
15
19
|
import '../types/accordion-tokens.types.mjs';
|
|
16
20
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -2,15 +2,19 @@ import * as react from 'react';
|
|
|
2
2
|
import { PropsWithChildren } from 'react';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import { DeepPartial } from '@impulse-ui-native/core';
|
|
5
|
-
import { a as ColorScheme, P as PrimitiveThemeTokens, c as ComponentsTokens, A as AppTheme } from '../theme-provider.types-
|
|
5
|
+
import { a as ColorScheme, P as PrimitiveThemeTokens, c as ComponentsTokens, A as AppTheme } from '../theme-provider.types-CLjz9-IY.mjs';
|
|
6
6
|
import '../types/badge-tokens.types.mjs';
|
|
7
7
|
import '../types/components.types.mjs';
|
|
8
8
|
import '../types/carousel-tokens.types.mjs';
|
|
9
|
+
import '../types/charts-tokens.types.mjs';
|
|
10
|
+
import '../types/chart.types.mjs';
|
|
9
11
|
import '../types/checkbox-tokens.types.mjs';
|
|
10
12
|
import '../types/list-tokens.types.mjs';
|
|
11
13
|
import '../types/modal-tokens.types.mjs';
|
|
12
14
|
import '../types/popover-tokens.types.mjs';
|
|
13
15
|
import '../types/radio-tokens.types.mjs';
|
|
16
|
+
import '../types/shadow.types.mjs';
|
|
17
|
+
import 'react-native';
|
|
14
18
|
import '../types/tabs-tokens.types.mjs';
|
|
15
19
|
import '../types/accordion-tokens.types.mjs';
|
|
16
20
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
const ChartColorTokens = [
|
|
2
|
+
"#F55D6B",
|
|
3
|
+
"#2563eb",
|
|
4
|
+
"#16a34a",
|
|
5
|
+
"#9333ea",
|
|
6
|
+
"#ea580c",
|
|
7
|
+
"#0891b2",
|
|
8
|
+
"#db2777",
|
|
9
|
+
"#65a30d",
|
|
10
|
+
"#4f46e5",
|
|
11
|
+
"#0d9488",
|
|
12
|
+
"#ca8a04",
|
|
13
|
+
"#c026d3",
|
|
14
|
+
"#0284c7",
|
|
15
|
+
"#7c3aed",
|
|
16
|
+
"#9f5f3f"
|
|
17
|
+
];
|
|
18
|
+
export {
|
|
19
|
+
ChartColorTokens
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=chart-color-tokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/chart-color-tokens.ts"],"sourcesContent":["import type { ChartColorPalette } from \"../types\";\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"],"mappings":"AAEO,MAAM,mBAAsC;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;","names":[]}
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-CLjz9-IY.mjs';
|
|
2
2
|
import { AccordionTokens } from '../types/accordion-tokens.types.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
5
|
import '../types/carousel-tokens.types.mjs';
|
|
6
|
+
import '../types/charts-tokens.types.mjs';
|
|
7
|
+
import '../types/chart.types.mjs';
|
|
6
8
|
import '../types/checkbox-tokens.types.mjs';
|
|
7
9
|
import '../types/list-tokens.types.mjs';
|
|
8
10
|
import '../types/modal-tokens.types.mjs';
|
|
9
11
|
import '../types/popover-tokens.types.mjs';
|
|
10
12
|
import '../types/radio-tokens.types.mjs';
|
|
13
|
+
import '../types/shadow.types.mjs';
|
|
14
|
+
import 'react-native';
|
|
11
15
|
import '../types/tabs-tokens.types.mjs';
|
|
12
16
|
import '../types/avatar-tokens.types.mjs';
|
|
13
17
|
import '../types/buttons-tokens.types.mjs';
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-CLjz9-IY.mjs';
|
|
2
2
|
import { AvatarTokens } from '../types/avatar-tokens.types.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
5
|
import '../types/carousel-tokens.types.mjs';
|
|
6
|
+
import '../types/charts-tokens.types.mjs';
|
|
7
|
+
import '../types/chart.types.mjs';
|
|
6
8
|
import '../types/checkbox-tokens.types.mjs';
|
|
7
9
|
import '../types/list-tokens.types.mjs';
|
|
8
10
|
import '../types/modal-tokens.types.mjs';
|
|
9
11
|
import '../types/popover-tokens.types.mjs';
|
|
10
12
|
import '../types/radio-tokens.types.mjs';
|
|
13
|
+
import '../types/shadow.types.mjs';
|
|
14
|
+
import 'react-native';
|
|
11
15
|
import '../types/tabs-tokens.types.mjs';
|
|
12
16
|
import '../types/accordion-tokens.types.mjs';
|
|
13
17
|
import '../types/buttons-tokens.types.mjs';
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-CLjz9-IY.mjs';
|
|
2
2
|
import { BadgeTokens } from '../types/badge-tokens.types.mjs';
|
|
3
3
|
import '../types/carousel-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/charts-tokens.types.mjs';
|
|
6
|
+
import '../types/chart.types.mjs';
|
|
5
7
|
import '../types/checkbox-tokens.types.mjs';
|
|
6
8
|
import '../types/list-tokens.types.mjs';
|
|
7
9
|
import '../types/modal-tokens.types.mjs';
|
|
8
10
|
import '../types/popover-tokens.types.mjs';
|
|
9
11
|
import '../types/radio-tokens.types.mjs';
|
|
12
|
+
import '../types/shadow.types.mjs';
|
|
13
|
+
import 'react-native';
|
|
10
14
|
import '../types/tabs-tokens.types.mjs';
|
|
11
15
|
import '../types/accordion-tokens.types.mjs';
|
|
12
16
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-CLjz9-IY.mjs';
|
|
2
2
|
import { ButtonTokens } from '../types/buttons-tokens.types.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
5
|
import '../types/carousel-tokens.types.mjs';
|
|
6
|
+
import '../types/charts-tokens.types.mjs';
|
|
7
|
+
import '../types/chart.types.mjs';
|
|
6
8
|
import '../types/checkbox-tokens.types.mjs';
|
|
7
9
|
import '../types/list-tokens.types.mjs';
|
|
8
10
|
import '../types/modal-tokens.types.mjs';
|
|
9
11
|
import '../types/popover-tokens.types.mjs';
|
|
10
12
|
import '../types/radio-tokens.types.mjs';
|
|
13
|
+
import '../types/shadow.types.mjs';
|
|
14
|
+
import 'react-native';
|
|
11
15
|
import '../types/tabs-tokens.types.mjs';
|
|
12
16
|
import '../types/accordion-tokens.types.mjs';
|
|
13
17
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-CLjz9-IY.mjs';
|
|
2
2
|
import { CardTokens } from '../types/card-tokens.types.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
5
|
import '../types/carousel-tokens.types.mjs';
|
|
6
|
+
import '../types/charts-tokens.types.mjs';
|
|
7
|
+
import '../types/chart.types.mjs';
|
|
6
8
|
import '../types/checkbox-tokens.types.mjs';
|
|
7
9
|
import '../types/list-tokens.types.mjs';
|
|
8
10
|
import '../types/modal-tokens.types.mjs';
|
|
9
11
|
import '../types/popover-tokens.types.mjs';
|
|
10
12
|
import '../types/radio-tokens.types.mjs';
|
|
13
|
+
import '../types/shadow.types.mjs';
|
|
14
|
+
import 'react-native';
|
|
11
15
|
import '../types/tabs-tokens.types.mjs';
|
|
12
16
|
import '../types/accordion-tokens.types.mjs';
|
|
13
17
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-CLjz9-IY.mjs';
|
|
2
2
|
import { CarouselTokens } from '../types/carousel-tokens.types.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
|
+
import '../types/charts-tokens.types.mjs';
|
|
6
|
+
import '../types/chart.types.mjs';
|
|
5
7
|
import '../types/checkbox-tokens.types.mjs';
|
|
6
8
|
import '../types/list-tokens.types.mjs';
|
|
7
9
|
import '../types/modal-tokens.types.mjs';
|
|
8
10
|
import '../types/popover-tokens.types.mjs';
|
|
9
11
|
import '../types/radio-tokens.types.mjs';
|
|
12
|
+
import '../types/shadow.types.mjs';
|
|
13
|
+
import 'react-native';
|
|
10
14
|
import '../types/tabs-tokens.types.mjs';
|
|
11
15
|
import '../types/accordion-tokens.types.mjs';
|
|
12
16
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { ChartsTokens } from '../types/charts-tokens.types.mjs';
|
|
2
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-CLjz9-IY.mjs';
|
|
3
|
+
import '../types/chart.types.mjs';
|
|
4
|
+
import '../types/badge-tokens.types.mjs';
|
|
5
|
+
import '../types/components.types.mjs';
|
|
6
|
+
import '../types/carousel-tokens.types.mjs';
|
|
7
|
+
import '../types/checkbox-tokens.types.mjs';
|
|
8
|
+
import '../types/list-tokens.types.mjs';
|
|
9
|
+
import '../types/modal-tokens.types.mjs';
|
|
10
|
+
import '../types/popover-tokens.types.mjs';
|
|
11
|
+
import '../types/radio-tokens.types.mjs';
|
|
12
|
+
import '../types/shadow.types.mjs';
|
|
13
|
+
import 'react-native';
|
|
14
|
+
import '../types/tabs-tokens.types.mjs';
|
|
15
|
+
import '../types/accordion-tokens.types.mjs';
|
|
16
|
+
import '../types/avatar-tokens.types.mjs';
|
|
17
|
+
import '../types/buttons-tokens.types.mjs';
|
|
18
|
+
import '../types/card-tokens.types.mjs';
|
|
19
|
+
import '../types/control-tokens.types.mjs';
|
|
20
|
+
import '../types/data-state-tokens.types.mjs';
|
|
21
|
+
import '../types/datetime-picker-tokens.types.mjs';
|
|
22
|
+
import '../types/divider-tokens.types.mjs';
|
|
23
|
+
import '../types/flyout-tokens.types.mjs';
|
|
24
|
+
import '../types/icon-tokens.types.mjs';
|
|
25
|
+
import '../types/pagination-tokens.types.mjs';
|
|
26
|
+
import '../types/pressable-tokens.types.mjs';
|
|
27
|
+
import '../types/progress-tokens.types.mjs';
|
|
28
|
+
import '../types/spinner-tokens.types.mjs';
|
|
29
|
+
import '../types/segmented-control-tokens.types.mjs';
|
|
30
|
+
import '../types/select-tokens.types.mjs';
|
|
31
|
+
import '../types/skeleton-tokens.types.mjs';
|
|
32
|
+
import '../types/slider-tokens.types.mjs';
|
|
33
|
+
import '../types/stepper-tokens.types.mjs';
|
|
34
|
+
import '../types/switch-tokens.types.mjs';
|
|
35
|
+
import '../types/tag-tokens.types.mjs';
|
|
36
|
+
import '../types/textarea-tokens.types.mjs';
|
|
37
|
+
import '../types/time-picker-token.types.mjs';
|
|
38
|
+
import '../types/tokens.types.mjs';
|
|
39
|
+
|
|
40
|
+
declare function createChartsTokens(tokens: PrimitiveThemeTokens): ChartsTokens;
|
|
41
|
+
|
|
42
|
+
export { createChartsTokens };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { ChartColorTokens } from "./chart-color-tokens";
|
|
2
|
+
function createChartsTokens(tokens) {
|
|
3
|
+
return {
|
|
4
|
+
palette: ChartColorTokens,
|
|
5
|
+
insets: {
|
|
6
|
+
top: tokens.space.md,
|
|
7
|
+
right: tokens.space.md,
|
|
8
|
+
bottom: tokens.space.md,
|
|
9
|
+
left: tokens.space.md
|
|
10
|
+
},
|
|
11
|
+
axis: {
|
|
12
|
+
width: tokens.borderSize.sm,
|
|
13
|
+
tickLength: tokens.space.xxs,
|
|
14
|
+
labelGap: tokens.space.xxs
|
|
15
|
+
},
|
|
16
|
+
grid: { width: tokens.borderSize.sm },
|
|
17
|
+
line: { width: tokens.borderSize.md },
|
|
18
|
+
bar: { categoryPadding: 0.2, seriesPadding: 0.1 },
|
|
19
|
+
pie: { ringPadding: tokens.borderSize.md }
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
export {
|
|
23
|
+
createChartsTokens
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=create-charts-tokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-charts-tokens.ts"],"sourcesContent":["import type { ChartsTokens, PrimitiveThemeTokens } from \"../types\";\nimport { ChartColorTokens } from \"./chart-color-tokens\";\n\nexport function createChartsTokens(tokens: PrimitiveThemeTokens): ChartsTokens {\n return {\n palette: ChartColorTokens,\n insets: {\n top: tokens.space.md,\n right: tokens.space.md,\n bottom: tokens.space.md,\n left: tokens.space.md,\n },\n axis: {\n width: tokens.borderSize.sm,\n tickLength: tokens.space.xxs,\n labelGap: tokens.space.xxs,\n },\n grid: { width: tokens.borderSize.sm },\n line: { width: tokens.borderSize.md },\n bar: { categoryPadding: 0.2, seriesPadding: 0.1 },\n pie: { ringPadding: tokens.borderSize.md },\n };\n}\n"],"mappings":"AACA,SAAS,wBAAwB;AAE1B,SAAS,mBAAmB,QAA4C;AAC7E,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,MACN,KAAK,OAAO,MAAM;AAAA,MAClB,OAAO,OAAO,MAAM;AAAA,MACpB,QAAQ,OAAO,MAAM;AAAA,MACrB,MAAM,OAAO,MAAM;AAAA,IACrB;AAAA,IACA,MAAM;AAAA,MACJ,OAAO,OAAO,WAAW;AAAA,MACzB,YAAY,OAAO,MAAM;AAAA,MACzB,UAAU,OAAO,MAAM;AAAA,IACzB;AAAA,IACA,MAAM,EAAE,OAAO,OAAO,WAAW,GAAG;AAAA,IACpC,MAAM,EAAE,OAAO,OAAO,WAAW,GAAG;AAAA,IACpC,KAAK,EAAE,iBAAiB,KAAK,eAAe,IAAI;AAAA,IAChD,KAAK,EAAE,aAAa,OAAO,WAAW,GAAG;AAAA,EAC3C;AACF;","names":[]}
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-CLjz9-IY.mjs';
|
|
2
2
|
import { CheckboxTokens } from '../types/checkbox-tokens.types.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
5
|
import '../types/carousel-tokens.types.mjs';
|
|
6
|
+
import '../types/charts-tokens.types.mjs';
|
|
7
|
+
import '../types/chart.types.mjs';
|
|
6
8
|
import '../types/list-tokens.types.mjs';
|
|
7
9
|
import '../types/modal-tokens.types.mjs';
|
|
8
10
|
import '../types/popover-tokens.types.mjs';
|
|
9
11
|
import '../types/radio-tokens.types.mjs';
|
|
12
|
+
import '../types/shadow.types.mjs';
|
|
13
|
+
import 'react-native';
|
|
10
14
|
import '../types/tabs-tokens.types.mjs';
|
|
11
15
|
import '../types/accordion-tokens.types.mjs';
|
|
12
16
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-CLjz9-IY.mjs';
|
|
2
2
|
import { ControlAddonTokens, ControlContainerTokens, ControlErrorTokens, ControlInputTokens, ControlLabelTokens } from '../types/control-tokens.types.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
5
|
import '../types/carousel-tokens.types.mjs';
|
|
6
|
+
import '../types/charts-tokens.types.mjs';
|
|
7
|
+
import '../types/chart.types.mjs';
|
|
6
8
|
import '../types/checkbox-tokens.types.mjs';
|
|
7
9
|
import '../types/list-tokens.types.mjs';
|
|
8
10
|
import '../types/modal-tokens.types.mjs';
|
|
9
11
|
import '../types/popover-tokens.types.mjs';
|
|
10
12
|
import '../types/radio-tokens.types.mjs';
|
|
13
|
+
import '../types/shadow.types.mjs';
|
|
14
|
+
import 'react-native';
|
|
11
15
|
import '../types/tabs-tokens.types.mjs';
|
|
12
16
|
import '../types/accordion-tokens.types.mjs';
|
|
13
17
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-CLjz9-IY.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
5
|
import '../types/carousel-tokens.types.mjs';
|
|
6
|
+
import '../types/charts-tokens.types.mjs';
|
|
7
|
+
import '../types/chart.types.mjs';
|
|
6
8
|
import '../types/checkbox-tokens.types.mjs';
|
|
7
9
|
import '../types/list-tokens.types.mjs';
|
|
8
10
|
import '../types/modal-tokens.types.mjs';
|
|
9
11
|
import '../types/popover-tokens.types.mjs';
|
|
10
12
|
import '../types/radio-tokens.types.mjs';
|
|
13
|
+
import '../types/shadow.types.mjs';
|
|
14
|
+
import 'react-native';
|
|
11
15
|
import '../types/tabs-tokens.types.mjs';
|
|
12
16
|
import '../types/accordion-tokens.types.mjs';
|
|
13
17
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-CLjz9-IY.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
5
|
import '../types/carousel-tokens.types.mjs';
|
|
6
|
+
import '../types/charts-tokens.types.mjs';
|
|
7
|
+
import '../types/chart.types.mjs';
|
|
6
8
|
import '../types/checkbox-tokens.types.mjs';
|
|
7
9
|
import '../types/list-tokens.types.mjs';
|
|
8
10
|
import '../types/modal-tokens.types.mjs';
|
|
9
11
|
import '../types/popover-tokens.types.mjs';
|
|
10
12
|
import '../types/radio-tokens.types.mjs';
|
|
13
|
+
import '../types/shadow.types.mjs';
|
|
14
|
+
import 'react-native';
|
|
11
15
|
import '../types/tabs-tokens.types.mjs';
|
|
12
16
|
import '../types/accordion-tokens.types.mjs';
|
|
13
17
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-CLjz9-IY.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
5
|
import '../types/carousel-tokens.types.mjs';
|
|
6
|
+
import '../types/charts-tokens.types.mjs';
|
|
7
|
+
import '../types/chart.types.mjs';
|
|
6
8
|
import '../types/checkbox-tokens.types.mjs';
|
|
7
9
|
import '../types/list-tokens.types.mjs';
|
|
8
10
|
import '../types/modal-tokens.types.mjs';
|
|
9
11
|
import '../types/popover-tokens.types.mjs';
|
|
10
12
|
import '../types/radio-tokens.types.mjs';
|
|
13
|
+
import '../types/shadow.types.mjs';
|
|
14
|
+
import 'react-native';
|
|
11
15
|
import '../types/tabs-tokens.types.mjs';
|
|
12
16
|
import '../types/accordion-tokens.types.mjs';
|
|
13
17
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-CLjz9-IY.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
5
|
import '../types/carousel-tokens.types.mjs';
|
|
6
|
+
import '../types/charts-tokens.types.mjs';
|
|
7
|
+
import '../types/chart.types.mjs';
|
|
6
8
|
import '../types/checkbox-tokens.types.mjs';
|
|
7
9
|
import '../types/list-tokens.types.mjs';
|
|
8
10
|
import '../types/modal-tokens.types.mjs';
|
|
9
11
|
import '../types/popover-tokens.types.mjs';
|
|
10
12
|
import '../types/radio-tokens.types.mjs';
|
|
13
|
+
import '../types/shadow.types.mjs';
|
|
14
|
+
import 'react-native';
|
|
11
15
|
import '../types/tabs-tokens.types.mjs';
|
|
12
16
|
import '../types/accordion-tokens.types.mjs';
|
|
13
17
|
import '../types/avatar-tokens.types.mjs';
|
|
@@ -2,6 +2,8 @@ function createFlyoutTokens(tokens) {
|
|
|
2
2
|
const borderRadius = tokens.radii.lg;
|
|
3
3
|
const handleContainerHeight = 32;
|
|
4
4
|
return {
|
|
5
|
+
enterSpring: { damping: 50, stiffness: 300, mass: 1 },
|
|
6
|
+
exitDuration: 150,
|
|
5
7
|
zIndexBase: 100,
|
|
6
8
|
maxHeightRatio: 0.7,
|
|
7
9
|
overlayColor: tokens.colors.text.tertiary,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-flyout-tokens.ts"],"sourcesContent":["import type { FlyoutTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createFlyoutTokens(tokens: PrimitiveThemeTokens): FlyoutTokens {\n const borderRadius = tokens.radii.lg;\n const handleContainerHeight = 32;\n\n return {\n zIndexBase: 100,\n\n maxHeightRatio: 0.7,\n\n overlayColor: tokens.colors.text.tertiary,\n overlayVisibleOpacity: 0.4,\n\n backgroundColor: tokens.colors.surface.elevated.value,\n contentPaddingHorizontal: tokens.space.sm,\n\n hiddenOpacity: 0,\n\n title: {\n paddingVertical: tokens.space.sm,\n paddingHorizontal: tokens.space.sm,\n color: tokens.colors.text.primary,\n fontSize: tokens.fontSize.lg,\n lineHeight: tokens.lineHeight.lg,\n },\n\n handle: {\n width: \"25%\",\n height: 6,\n borderRadius: tokens.radii.round,\n backgroundColor: tokens.colors.border.default.value,\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,KAAK;AAAA,IACjC,uBAAuB;AAAA,IAEvB,iBAAiB,OAAO,OAAO,QAAQ,SAAS;AAAA,IAChD,0BAA0B,OAAO,MAAM;AAAA,IAEvC,eAAe;AAAA,IAEf,OAAO;AAAA,MACL,iBAAiB,OAAO,MAAM;AAAA,MAC9B,mBAAmB,OAAO,MAAM;AAAA,MAChC,OAAO,OAAO,OAAO,KAAK;AAAA,MAC1B,UAAU,OAAO,SAAS;AAAA,MAC1B,YAAY,OAAO,WAAW;AAAA,IAChC;AAAA,IAEA,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc,OAAO,MAAM;AAAA,MAC3B,iBAAiB,OAAO,OAAO,OAAO,QAAQ;AAAA,IAChD;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":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-flyout-tokens.ts"],"sourcesContent":["import type { FlyoutTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createFlyoutTokens(tokens: PrimitiveThemeTokens): FlyoutTokens {\n const borderRadius = tokens.radii.lg;\n const handleContainerHeight = 32;\n\n return {\n enterSpring: { damping: 50, stiffness: 300, mass: 1 },\n exitDuration: 150,\n zIndexBase: 100,\n\n maxHeightRatio: 0.7,\n\n overlayColor: tokens.colors.text.tertiary,\n overlayVisibleOpacity: 0.4,\n\n backgroundColor: tokens.colors.surface.elevated.value,\n contentPaddingHorizontal: tokens.space.sm,\n\n hiddenOpacity: 0,\n\n title: {\n paddingVertical: tokens.space.sm,\n paddingHorizontal: tokens.space.sm,\n color: tokens.colors.text.primary,\n fontSize: tokens.fontSize.lg,\n lineHeight: tokens.lineHeight.lg,\n },\n\n handle: {\n width: \"25%\",\n height: 6,\n borderRadius: tokens.radii.round,\n backgroundColor: tokens.colors.border.default.value,\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,aAAa,EAAE,SAAS,IAAI,WAAW,KAAK,MAAM,EAAE;AAAA,IACpD,cAAc;AAAA,IACd,YAAY;AAAA,IAEZ,gBAAgB;AAAA,IAEhB,cAAc,OAAO,OAAO,KAAK;AAAA,IACjC,uBAAuB;AAAA,IAEvB,iBAAiB,OAAO,OAAO,QAAQ,SAAS;AAAA,IAChD,0BAA0B,OAAO,MAAM;AAAA,IAEvC,eAAe;AAAA,IAEf,OAAO;AAAA,MACL,iBAAiB,OAAO,MAAM;AAAA,MAC9B,mBAAmB,OAAO,MAAM;AAAA,MAChC,OAAO,OAAO,OAAO,KAAK;AAAA,MAC1B,UAAU,OAAO,SAAS;AAAA,MAC1B,YAAY,OAAO,WAAW;AAAA,IAChC;AAAA,IAEA,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc,OAAO,MAAM;AAAA,MAC3B,iBAAiB,OAAO,OAAO,OAAO,QAAQ;AAAA,IAChD;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":[]}
|