@impulse-ui-native/theme 11.3.2 → 12.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 +20 -0
- package/dist/hooks/index.d.mts +1 -1
- package/dist/hooks/use-colors.hook.d.mts +1 -1
- package/dist/hooks/use-components-tokens.hook.d.mts +1 -1
- package/dist/hooks/use-theme.hook.d.mts +1 -1
- package/dist/hooks/use-themed-styles.d.mts +1 -1
- package/dist/index.d.mts +2 -2
- package/dist/providers/index.d.mts +1 -1
- package/dist/providers/theme.provider.d.mts +1 -1
- package/dist/theme/create-accordion-tokens.d.mts +1 -1
- package/dist/theme/create-avatar-tokens.d.mts +1 -1
- package/dist/theme/create-badge-tokens.d.mts +1 -1
- package/dist/theme/create-button-tokens.d.mts +1 -1
- package/dist/theme/create-card-tokens.d.mts +1 -1
- package/dist/theme/create-carousel-tokens.d.mts +1 -1
- package/dist/theme/create-charts-tokens.d.mts +1 -1
- package/dist/theme/create-checkbox-tokens.d.mts +1 -1
- package/dist/theme/create-color-picker-tokens.d.mts +1 -1
- package/dist/theme/create-color-picker-tokens.js +1 -0
- package/dist/theme/create-color-picker-tokens.js.map +1 -1
- package/dist/theme/create-control-tokens.d.mts +1 -1
- package/dist/theme/create-control-tokens.js +521 -85
- package/dist/theme/create-control-tokens.js.map +1 -1
- package/dist/theme/create-data-state-tokens.d.mts +1 -1
- package/dist/theme/create-datetime-picker.d.mts +1 -1
- package/dist/theme/create-divider-tokens.d.mts +1 -1
- package/dist/theme/create-flyout-tokens.d.mts +1 -1
- package/dist/theme/create-icon-button-tokens.d.mts +1 -1
- package/dist/theme/create-icon-view-tokens.d.mts +1 -1
- package/dist/theme/create-list-tokens.d.mts +1 -1
- package/dist/theme/create-modal-tokens.d.mts +1 -1
- package/dist/theme/create-pagination-tokens.d.mts +1 -1
- package/dist/theme/create-popover-tokens.d.mts +1 -1
- package/dist/theme/create-progress-tokens.d.mts +1 -1
- package/dist/theme/create-radio-tokens.d.mts +1 -1
- package/dist/theme/create-segmented-control-tokens.d.mts +1 -1
- package/dist/theme/create-select-tokens.d.mts +1 -1
- package/dist/theme/create-skeleton-tokens.d.mts +1 -1
- package/dist/theme/create-slider-tokens.d.mts +1 -1
- package/dist/theme/create-spinner-tokens.d.mts +1 -1
- package/dist/theme/create-stepper-tokens.d.mts +1 -1
- package/dist/theme/create-switch-tokens.d.mts +1 -1
- package/dist/theme/create-tabs-tokens.d.mts +1 -1
- package/dist/theme/create-tag-tokens.d.mts +1 -1
- package/dist/theme/create-textarea-tokens.d.mts +1 -1
- package/dist/theme/create-time-picker-tokens.d.mts +1 -1
- package/dist/theme/create-toast-tokens.d.mts +1 -1
- package/dist/theme/dark.theme.d.mts +1 -1
- package/dist/theme/index.d.mts +1 -1
- package/dist/theme/light.theme.d.mts +1 -1
- package/dist/theme/tokens.theme.d.mts +1 -1
- package/dist/theme/tokens.theme.js +8 -0
- package/dist/theme/tokens.theme.js.map +1 -1
- package/dist/{theme-provider.types-e3tYI4ca.d.mts → theme-provider.types-Cw0b-Rcy.d.mts} +2 -0
- package/dist/types/components.types.d.mts +3 -2
- package/dist/types/control-tokens.types.d.mts +4 -4
- package/dist/types/index.d.mts +2 -2
- package/dist/types/theme-provider.types.d.mts +1 -1
- package/dist/types/toast-tokens.types.d.mts +1 -1
- package/dist/utils/index.d.mts +1 -1
- package/dist/utils/style.utils.d.mts +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -46,6 +46,26 @@ export function App() {
|
|
|
46
46
|
- Primitive token constants include `SpaceTokens`, `BorderSizeTokens`, `RadiiTokens`, `FontSizeTokens`, `LineHeightTokens`, `FontWeightTokens`, and the color scales.
|
|
47
47
|
- Public types cover colors, spacing, dimensions, flex, typography, shadows, component variants, theme extension, and every component-token group.
|
|
48
48
|
|
|
49
|
+
## Brand colors
|
|
50
|
+
|
|
51
|
+
`colors.primary`, `colors.accent`, `colors.secondary`, and `colors.subtle` each
|
|
52
|
+
provide a `value` fill and a `contrast` foreground. `subtle` is the faintest brand
|
|
53
|
+
tint: near-white pink (`#FFF5F6`) in light mode and a restrained dark pink
|
|
54
|
+
(`#241C20`) in dark mode. Use it for low-emphasis branded backgrounds with
|
|
55
|
+
`subtle.contrast` for text or icons. It is separate from the neutral
|
|
56
|
+
`colors.surface.subtle` role. ColorPicker includes it in the default presets.
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
const { subtle } = useColors();
|
|
60
|
+
|
|
61
|
+
<View backgroundColor={subtle.value}>
|
|
62
|
+
<Typography.Body color={subtle.contrast}>Quiet emphasis</Typography.Body>
|
|
63
|
+
</View>;
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Override `colors.subtle.value` and `colors.subtle.contrast` through the same
|
|
67
|
+
per-scheme theme overrides as the other brand colors.
|
|
68
|
+
|
|
49
69
|
## Customizing tokens
|
|
50
70
|
|
|
51
71
|
```tsx
|
package/dist/hooks/index.d.mts
CHANGED
|
@@ -7,7 +7,7 @@ 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-Cw0b-Rcy.mjs';
|
|
11
11
|
import '../types/badge-tokens.types.mjs';
|
|
12
12
|
import '../types/components.types.mjs';
|
|
13
13
|
import '../types/carousel-tokens.types.mjs';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as ThemeColors } from '../theme-provider.types-
|
|
1
|
+
import { T as ThemeColors } from '../theme-provider.types-Cw0b-Rcy.mjs';
|
|
2
2
|
import '../types/badge-tokens.types.mjs';
|
|
3
3
|
import '../types/components.types.mjs';
|
|
4
4
|
import '../types/carousel-tokens.types.mjs';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { c as ComponentsTokens } from '../theme-provider.types-
|
|
1
|
+
import { c as ComponentsTokens } from '../theme-provider.types-Cw0b-Rcy.mjs';
|
|
2
2
|
import '../types/badge-tokens.types.mjs';
|
|
3
3
|
import '../types/components.types.mjs';
|
|
4
4
|
import '../types/carousel-tokens.types.mjs';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { A as AppTheme } from '../theme-provider.types-
|
|
1
|
+
import { A as AppTheme } from '../theme-provider.types-Cw0b-Rcy.mjs';
|
|
2
2
|
import '../types/badge-tokens.types.mjs';
|
|
3
3
|
import '../types/components.types.mjs';
|
|
4
4
|
import '../types/carousel-tokens.types.mjs';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ViewStyle, TextStyle, ImageStyle } from 'react-native';
|
|
2
|
-
import { A as AppTheme } from '../theme-provider.types-
|
|
2
|
+
import { A as AppTheme } from '../theme-provider.types-Cw0b-Rcy.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
5
|
import '../types/carousel-tokens.types.mjs';
|
package/dist/index.d.mts
CHANGED
|
@@ -25,13 +25,13 @@ export { BorderProps } from './types/border.types.mjs';
|
|
|
25
25
|
export { ColorProps } from './types/color.types.mjs';
|
|
26
26
|
export { ChartColorPalette } from './types/chart.types.mjs';
|
|
27
27
|
export { ChartsLabelTokens, ChartsTokens } from './types/charts-tokens.types.mjs';
|
|
28
|
-
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';
|
|
28
|
+
export { ActionState, ActionVariant, ActionVisualState, AvailabilityState, AvailabilityVisualState, ComponentSize, ComponentVariant, ControlState, ControlVisualState, DisplayVariant, FieldState, FieldTone, FieldVariant, FieldVisualState, SelectionItemState, SelectionItemVisualState, SelectionState, SelectionVariant, SelectionVisualState, VisualStateTokens } from './types/components.types.mjs';
|
|
29
29
|
export { DimensionProps } from './types/dimension.types.mjs';
|
|
30
30
|
export { FlexProps } from './types/flex.types.mjs';
|
|
31
31
|
export { ShadowIntensity, ShadowLevel, ShadowPosition, ShadowProps, ShadowScaleTokens } from './types/shadow.types.mjs';
|
|
32
32
|
export { SpacingProps } from './types/spacing.types.mjs';
|
|
33
33
|
export { StylePropKey, StyleProps } from './types/style.types.mjs';
|
|
34
|
-
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-
|
|
34
|
+
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-Cw0b-Rcy.mjs';
|
|
35
35
|
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';
|
|
36
36
|
export { TypographyPresetKey, TypographyProps } from './types/typography.types.mjs';
|
|
37
37
|
export { ActionAppearanceTokens, ButtonSizeTokens, ButtonTokens, ButtonVariantTokens, IconButtonSizeTokens, IconButtonTokens, IconButtonVariantTokens } from './types/buttons-tokens.types.mjs';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { ThemeProvider, useThemeContext } from './theme.provider.mjs';
|
|
2
2
|
import 'react';
|
|
3
3
|
import '@impulse-ui-native/core';
|
|
4
|
-
import '../theme-provider.types-
|
|
4
|
+
import '../theme-provider.types-Cw0b-Rcy.mjs';
|
|
5
5
|
import '../types/badge-tokens.types.mjs';
|
|
6
6
|
import '../types/components.types.mjs';
|
|
7
7
|
import '../types/carousel-tokens.types.mjs';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { PropsWithChildren } from 'react';
|
|
3
3
|
import { DeepPartial } from '@impulse-ui-native/core';
|
|
4
|
-
import { a as ColorScheme, P as PrimitiveThemeTokens, c as ComponentsTokens, A as AppTheme } from '../theme-provider.types-
|
|
4
|
+
import { a as ColorScheme, P as PrimitiveThemeTokens, c as ComponentsTokens, A as AppTheme } from '../theme-provider.types-Cw0b-Rcy.mjs';
|
|
5
5
|
import '../types/badge-tokens.types.mjs';
|
|
6
6
|
import '../types/components.types.mjs';
|
|
7
7
|
import '../types/carousel-tokens.types.mjs';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-Cw0b-Rcy.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';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-Cw0b-Rcy.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';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-Cw0b-Rcy.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';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-Cw0b-Rcy.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';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-Cw0b-Rcy.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';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-Cw0b-Rcy.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';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ChartsLabelTokens, ChartsTokens } from '../types/charts-tokens.types.mjs';
|
|
2
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
2
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-Cw0b-Rcy.mjs';
|
|
3
3
|
import 'react-native';
|
|
4
4
|
import '../types/chart.types.mjs';
|
|
5
5
|
import '../types/tokens.types.mjs';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-Cw0b-Rcy.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';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-Cw0b-Rcy.mjs';
|
|
2
2
|
import { ColorPickerTokens } from '../types/color-picker-tokens.types.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
@@ -35,6 +35,7 @@ function createColorPickerTokens(tokens) {
|
|
|
35
35
|
{ label: "Primary", color: colors.primary.value },
|
|
36
36
|
{ label: "Accent", color: colors.accent.value },
|
|
37
37
|
{ label: "Secondary", color: colors.secondary.value },
|
|
38
|
+
{ label: "Subtle", color: colors.subtle.value },
|
|
38
39
|
{ label: "Error", color: colors.feedback.error.value },
|
|
39
40
|
{ label: "Warning", color: colors.feedback.warning.value },
|
|
40
41
|
{ label: "Success", color: colors.feedback.success.value },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-color-picker-tokens.ts"],"sourcesContent":["import type { ColorPickerTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createColorPickerTokens(\n tokens: PrimitiveThemeTokens,\n): ColorPickerTokens {\n const { colors, space, radii, borderSize } = tokens;\n\n return {\n gap: space.sm,\n rowGap: space.sm,\n sliderLabelGap: space.xxs,\n presetsLabelGap: space.xs,\n presetsGap: space.xs,\n presetLabelGap: space.xxs,\n alphaFieldFlex: 0.6,\n padding: space.sm,\n borderRadius: radii.lg,\n spectrumBorderRadius: radii.md,\n previewBorderRadius: radii.md,\n swatchBorderRadius: radii.round,\n swatchRingPadding: space.xxs,\n swatchRingBorderWidth: borderSize.md,\n borderWidth: borderSize.sm,\n borderColor: colors.border.default.value,\n backgroundColor: colors.surface.elevated.value,\n labelColor: colors.text.primary,\n selectedBorderColor: colors.border.focus.value,\n indicatorColor: colors.white,\n indicatorBorderRadius: radii.round,\n indicatorBorderWidth: borderSize.md,\n indicatorShadowOffsetX: 0,\n indicatorShadowOffsetY: 1,\n indicatorShadowBlurRadius: space.xxs,\n indicatorShadowColor: colors.black,\n checkerLightColor: colors.neutral[\"0\"],\n checkerDarkColor: colors.neutral[\"4\"],\n checkerSize: space.xs,\n disabledOpacity: 0.5,\n presets: [\n { label: \"Primary\", color: colors.primary.value },\n { label: \"Accent\", color: colors.accent.value },\n { label: \"Secondary\", color: colors.secondary.value },\n { label: \"Error\", color: colors.feedback.error.value },\n { label: \"Warning\", color: colors.feedback.warning.value },\n { label: \"Success\", color: colors.feedback.success.value },\n { label: \"Info\", color: colors.feedback.info.value },\n { label: \"White\", color: colors.white },\n { label: \"Black\", color: colors.black },\n ],\n sizes: {\n small: {\n spectrumHeight: 144,\n indicatorSize: 20,\n previewSize: 32,\n swatchSize: 24,\n swatchCheckSize: 12,\n swatchTargetSize: 44,\n },\n medium: {\n spectrumHeight: 192,\n indicatorSize: 24,\n previewSize: 40,\n swatchSize: 32,\n swatchCheckSize: 16,\n swatchTargetSize: 44,\n },\n large: {\n spectrumHeight: 240,\n indicatorSize: 28,\n previewSize: 48,\n swatchSize: 40,\n swatchCheckSize: 20,\n swatchTargetSize: 48,\n },\n },\n };\n}\n"],"mappings":"AAEO,SAAS,wBACd,QACmB;AACnB,QAAM,EAAE,QAAQ,OAAO,OAAO,WAAW,IAAI;AAE7C,SAAO;AAAA,IACL,KAAK,MAAM;AAAA,IACX,QAAQ,MAAM;AAAA,IACd,gBAAgB,MAAM;AAAA,IACtB,iBAAiB,MAAM;AAAA,IACvB,YAAY,MAAM;AAAA,IAClB,gBAAgB,MAAM;AAAA,IACtB,gBAAgB;AAAA,IAChB,SAAS,MAAM;AAAA,IACf,cAAc,MAAM;AAAA,IACpB,sBAAsB,MAAM;AAAA,IAC5B,qBAAqB,MAAM;AAAA,IAC3B,oBAAoB,MAAM;AAAA,IAC1B,mBAAmB,MAAM;AAAA,IACzB,uBAAuB,WAAW;AAAA,IAClC,aAAa,WAAW;AAAA,IACxB,aAAa,OAAO,OAAO,QAAQ;AAAA,IACnC,iBAAiB,OAAO,QAAQ,SAAS;AAAA,IACzC,YAAY,OAAO,KAAK;AAAA,IACxB,qBAAqB,OAAO,OAAO,MAAM;AAAA,IACzC,gBAAgB,OAAO;AAAA,IACvB,uBAAuB,MAAM;AAAA,IAC7B,sBAAsB,WAAW;AAAA,IACjC,wBAAwB;AAAA,IACxB,wBAAwB;AAAA,IACxB,2BAA2B,MAAM;AAAA,IACjC,sBAAsB,OAAO;AAAA,IAC7B,mBAAmB,OAAO,QAAQ,GAAG;AAAA,IACrC,kBAAkB,OAAO,QAAQ,GAAG;AAAA,IACpC,aAAa,MAAM;AAAA,IACnB,iBAAiB;AAAA,IACjB,SAAS;AAAA,MACP,EAAE,OAAO,WAAW,OAAO,OAAO,QAAQ,MAAM;AAAA,MAChD,EAAE,OAAO,UAAU,OAAO,OAAO,OAAO,MAAM;AAAA,MAC9C,EAAE,OAAO,aAAa,OAAO,OAAO,UAAU,MAAM;AAAA,MACpD,EAAE,OAAO,SAAS,OAAO,OAAO,SAAS,MAAM,MAAM;AAAA,MACrD,EAAE,OAAO,WAAW,OAAO,OAAO,SAAS,QAAQ,MAAM;AAAA,MACzD,EAAE,OAAO,WAAW,OAAO,OAAO,SAAS,QAAQ,MAAM;AAAA,MACzD,EAAE,OAAO,QAAQ,OAAO,OAAO,SAAS,KAAK,MAAM;AAAA,MACnD,EAAE,OAAO,SAAS,OAAO,OAAO,MAAM;AAAA,MACtC,EAAE,OAAO,SAAS,OAAO,OAAO,MAAM;AAAA,IACxC;AAAA,IACA,OAAO;AAAA,MACL,OAAO;AAAA,QACL,gBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,MACpB;AAAA,MACA,QAAQ;AAAA,QACN,gBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,MACpB;AAAA,MACA,OAAO;AAAA,QACL,gBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,MACpB;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-color-picker-tokens.ts"],"sourcesContent":["import type { ColorPickerTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createColorPickerTokens(\n tokens: PrimitiveThemeTokens,\n): ColorPickerTokens {\n const { colors, space, radii, borderSize } = tokens;\n\n return {\n gap: space.sm,\n rowGap: space.sm,\n sliderLabelGap: space.xxs,\n presetsLabelGap: space.xs,\n presetsGap: space.xs,\n presetLabelGap: space.xxs,\n alphaFieldFlex: 0.6,\n padding: space.sm,\n borderRadius: radii.lg,\n spectrumBorderRadius: radii.md,\n previewBorderRadius: radii.md,\n swatchBorderRadius: radii.round,\n swatchRingPadding: space.xxs,\n swatchRingBorderWidth: borderSize.md,\n borderWidth: borderSize.sm,\n borderColor: colors.border.default.value,\n backgroundColor: colors.surface.elevated.value,\n labelColor: colors.text.primary,\n selectedBorderColor: colors.border.focus.value,\n indicatorColor: colors.white,\n indicatorBorderRadius: radii.round,\n indicatorBorderWidth: borderSize.md,\n indicatorShadowOffsetX: 0,\n indicatorShadowOffsetY: 1,\n indicatorShadowBlurRadius: space.xxs,\n indicatorShadowColor: colors.black,\n checkerLightColor: colors.neutral[\"0\"],\n checkerDarkColor: colors.neutral[\"4\"],\n checkerSize: space.xs,\n disabledOpacity: 0.5,\n presets: [\n { label: \"Primary\", color: colors.primary.value },\n { label: \"Accent\", color: colors.accent.value },\n { label: \"Secondary\", color: colors.secondary.value },\n { label: \"Subtle\", color: colors.subtle.value },\n { label: \"Error\", color: colors.feedback.error.value },\n { label: \"Warning\", color: colors.feedback.warning.value },\n { label: \"Success\", color: colors.feedback.success.value },\n { label: \"Info\", color: colors.feedback.info.value },\n { label: \"White\", color: colors.white },\n { label: \"Black\", color: colors.black },\n ],\n sizes: {\n small: {\n spectrumHeight: 144,\n indicatorSize: 20,\n previewSize: 32,\n swatchSize: 24,\n swatchCheckSize: 12,\n swatchTargetSize: 44,\n },\n medium: {\n spectrumHeight: 192,\n indicatorSize: 24,\n previewSize: 40,\n swatchSize: 32,\n swatchCheckSize: 16,\n swatchTargetSize: 44,\n },\n large: {\n spectrumHeight: 240,\n indicatorSize: 28,\n previewSize: 48,\n swatchSize: 40,\n swatchCheckSize: 20,\n swatchTargetSize: 48,\n },\n },\n };\n}\n"],"mappings":"AAEO,SAAS,wBACd,QACmB;AACnB,QAAM,EAAE,QAAQ,OAAO,OAAO,WAAW,IAAI;AAE7C,SAAO;AAAA,IACL,KAAK,MAAM;AAAA,IACX,QAAQ,MAAM;AAAA,IACd,gBAAgB,MAAM;AAAA,IACtB,iBAAiB,MAAM;AAAA,IACvB,YAAY,MAAM;AAAA,IAClB,gBAAgB,MAAM;AAAA,IACtB,gBAAgB;AAAA,IAChB,SAAS,MAAM;AAAA,IACf,cAAc,MAAM;AAAA,IACpB,sBAAsB,MAAM;AAAA,IAC5B,qBAAqB,MAAM;AAAA,IAC3B,oBAAoB,MAAM;AAAA,IAC1B,mBAAmB,MAAM;AAAA,IACzB,uBAAuB,WAAW;AAAA,IAClC,aAAa,WAAW;AAAA,IACxB,aAAa,OAAO,OAAO,QAAQ;AAAA,IACnC,iBAAiB,OAAO,QAAQ,SAAS;AAAA,IACzC,YAAY,OAAO,KAAK;AAAA,IACxB,qBAAqB,OAAO,OAAO,MAAM;AAAA,IACzC,gBAAgB,OAAO;AAAA,IACvB,uBAAuB,MAAM;AAAA,IAC7B,sBAAsB,WAAW;AAAA,IACjC,wBAAwB;AAAA,IACxB,wBAAwB;AAAA,IACxB,2BAA2B,MAAM;AAAA,IACjC,sBAAsB,OAAO;AAAA,IAC7B,mBAAmB,OAAO,QAAQ,GAAG;AAAA,IACrC,kBAAkB,OAAO,QAAQ,GAAG;AAAA,IACpC,aAAa,MAAM;AAAA,IACnB,iBAAiB;AAAA,IACjB,SAAS;AAAA,MACP,EAAE,OAAO,WAAW,OAAO,OAAO,QAAQ,MAAM;AAAA,MAChD,EAAE,OAAO,UAAU,OAAO,OAAO,OAAO,MAAM;AAAA,MAC9C,EAAE,OAAO,aAAa,OAAO,OAAO,UAAU,MAAM;AAAA,MACpD,EAAE,OAAO,UAAU,OAAO,OAAO,OAAO,MAAM;AAAA,MAC9C,EAAE,OAAO,SAAS,OAAO,OAAO,SAAS,MAAM,MAAM;AAAA,MACrD,EAAE,OAAO,WAAW,OAAO,OAAO,SAAS,QAAQ,MAAM;AAAA,MACzD,EAAE,OAAO,WAAW,OAAO,OAAO,SAAS,QAAQ,MAAM;AAAA,MACzD,EAAE,OAAO,QAAQ,OAAO,OAAO,SAAS,KAAK,MAAM;AAAA,MACnD,EAAE,OAAO,SAAS,OAAO,OAAO,MAAM;AAAA,MACtC,EAAE,OAAO,SAAS,OAAO,OAAO,MAAM;AAAA,IACxC;AAAA,IACA,OAAO;AAAA,MACL,OAAO;AAAA,QACL,gBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,MACpB;AAAA,MACA,QAAQ;AAAA,QACN,gBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,MACpB;AAAA,MACA,OAAO;AAAA,QACL,gBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,MACpB;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-Cw0b-Rcy.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';
|