@impulse-ui-native/theme 9.1.2 → 11.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 -1
- package/dist/constants/index.js.map +1 -1
- package/dist/hooks/index.d.mts +1 -1
- package/dist/hooks/index.js.map +1 -1
- package/dist/hooks/use-border.hook.js +1 -2
- package/dist/hooks/use-border.hook.js.map +1 -1
- package/dist/hooks/use-colors.hook.d.mts +1 -1
- package/dist/hooks/use-colors.hook.js +1 -2
- package/dist/hooks/use-colors.hook.js.map +1 -1
- package/dist/hooks/use-components-tokens.hook.d.mts +1 -1
- package/dist/hooks/use-components-tokens.hook.js +1 -2
- package/dist/hooks/use-components-tokens.hook.js.map +1 -1
- package/dist/hooks/use-radii.hook.js +1 -2
- package/dist/hooks/use-radii.hook.js.map +1 -1
- package/dist/hooks/use-space.hook.js +1 -2
- package/dist/hooks/use-space.hook.js.map +1 -1
- package/dist/hooks/use-style-props.hook.js +4 -3
- package/dist/hooks/use-style-props.hook.js.map +1 -1
- package/dist/hooks/use-theme.hook.d.mts +1 -1
- package/dist/hooks/use-theme.hook.js.map +1 -1
- package/dist/hooks/use-themed-styles.d.mts +10 -8
- package/dist/hooks/use-themed-styles.js.map +1 -1
- package/dist/index.d.mts +1 -2
- package/dist/index.js.map +1 -1
- package/dist/providers/index.d.mts +1 -2
- package/dist/providers/index.js.map +1 -1
- package/dist/providers/theme.provider.d.mts +2 -3
- package/dist/theme/create-accordion-tokens.d.mts +1 -1
- package/dist/theme/create-accordion-tokens.js +2 -2
- package/dist/theme/create-accordion-tokens.js.map +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-badge-tokens.js +1 -1
- package/dist/theme/create-badge-tokens.js.map +1 -1
- package/dist/theme/create-button-tokens.d.mts +1 -1
- package/dist/theme/create-button-tokens.js +2 -2
- package/dist/theme/create-button-tokens.js.map +1 -1
- package/dist/theme/create-card-tokens.d.mts +1 -1
- package/dist/theme/create-card-tokens.js +2 -2
- package/dist/theme/create-card-tokens.js.map +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-checkbox-tokens.js +3 -3
- package/dist/theme/create-checkbox-tokens.js.map +1 -1
- package/dist/theme/create-color-picker-tokens.d.mts +1 -1
- package/dist/theme/create-control-tokens.d.mts +1 -1
- package/dist/theme/create-control-tokens.js +4 -4
- 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-button-tokens.js +2 -2
- package/dist/theme/create-icon-button-tokens.js.map +1 -1
- package/dist/theme/create-list-tokens.d.mts +1 -1
- package/dist/theme/create-list-tokens.js +1 -1
- package/dist/theme/create-list-tokens.js.map +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-pagination-tokens.js +1 -1
- package/dist/theme/create-pagination-tokens.js.map +1 -1
- package/dist/theme/create-popover-tokens.d.mts +1 -1
- package/dist/theme/create-popover-tokens.js +1 -1
- package/dist/theme/create-popover-tokens.js.map +1 -1
- package/dist/theme/create-progress-tokens.d.mts +1 -1
- package/dist/theme/create-progress-tokens.js +2 -2
- package/dist/theme/create-progress-tokens.js.map +1 -1
- package/dist/theme/create-radio-tokens.d.mts +1 -1
- package/dist/theme/create-radio-tokens.js +3 -3
- package/dist/theme/create-radio-tokens.js.map +1 -1
- package/dist/theme/create-segmented-control-tokens.d.mts +1 -1
- package/dist/theme/create-segmented-control-tokens.js +3 -3
- package/dist/theme/create-segmented-control-tokens.js.map +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-switch-tokens.js +9 -9
- package/dist/theme/create-switch-tokens.js.map +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-tag-tokens.js +12 -12
- package/dist/theme/create-tag-tokens.js.map +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-time-picker-tokens.js +2 -2
- package/dist/theme/create-time-picker-tokens.js.map +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 +12 -4
- package/dist/theme/tokens.theme.js.map +1 -1
- package/dist/{theme-provider.types-CIh3wHN_.d.mts → theme-provider.types-DLP3kyqN.d.mts} +6 -2
- package/dist/types/index.d.mts +1 -1
- 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/dist/utils/style.utils.js +2 -7
- package/dist/utils/style.utils.js.map +1 -1
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -36,7 +36,7 @@ export function App() {
|
|
|
36
36
|
semantic surface, border, and text tokens for colors that should adapt to the
|
|
37
37
|
active scheme. The `white` and `black` tokens also keep their literal colors.
|
|
38
38
|
- Dark borders use progressively lighter `subtle`, `default`, and `strong` tones
|
|
39
|
-
that remain visible on
|
|
39
|
+
that remain visible on canvas, default, and elevated surfaces. Disabled
|
|
40
40
|
control fills use surface tokens independently of the border scale.
|
|
41
41
|
- `useTheme` returns the complete `AppTheme`.
|
|
42
42
|
- `useColors`, `useSpace`, `useBorder`, and `useRadii` read focused token groups.
|
|
@@ -153,3 +153,22 @@ series props continue to take precedence.
|
|
|
153
153
|
|
|
154
154
|
`getShadowStyle` accepts the active shadow scale as its fourth argument. Omitting
|
|
155
155
|
it retains the exported default `ShadowScale` for existing utility callers.
|
|
156
|
+
|
|
157
|
+
## Surface roles
|
|
158
|
+
|
|
159
|
+
| Role | Purpose | Light | Dark |
|
|
160
|
+
| ------------------------- | ----------------------------------------------------- | --------- | --------- |
|
|
161
|
+
| `colors.surface.canvas` | App and screen backgrounds | `#f1f3f5` | `#16191d` |
|
|
162
|
+
| `colors.surface.subtle` | Muted control fills, tracks, and disabled backgrounds | `#f1f3f5` | `#16191d` |
|
|
163
|
+
| `colors.surface.default` | Content panels, cards, and lists | `#ffffff` | `#212529` |
|
|
164
|
+
| `colors.surface.elevated` | Floating overlays, popovers, sheets, and toasts | `#ffffff` | `#343a40` |
|
|
165
|
+
| `colors.surface.inverse` | Inverse surfaces such as tooltips | `#000000` | `#ffffff` |
|
|
166
|
+
|
|
167
|
+
Each role has a `value` fill and a `contrast` foreground. Canvas and subtle
|
|
168
|
+
start with the same colors but can be overridden independently. For example,
|
|
169
|
+
changing `theme.dark.colors.surface.canvas.value` leaves control fills intact.
|
|
170
|
+
|
|
171
|
+
Migration: replace `surface.primary` with `surface.canvas` for page backgrounds
|
|
172
|
+
or `surface.subtle` for muted control fills. Replace `surface.secondary` with
|
|
173
|
+
`surface.default` for content surfaces. Cards, lists, and accordions now use
|
|
174
|
+
`default`; popovers use `elevated`.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/constants/index.ts"],"sourcesContent":["export * from \"./style.constants\";\
|
|
1
|
+
{"version":3,"sources":["../../src/constants/index.ts"],"sourcesContent":["export * from \"./style.constants\";\n"],"mappings":"AAAA,cAAc;","names":[]}
|
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-DLP3kyqN.mjs';
|
|
11
11
|
import '../types/badge-tokens.types.mjs';
|
|
12
12
|
import '../types/components.types.mjs';
|
|
13
13
|
import '../types/carousel-tokens.types.mjs';
|
package/dist/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["export { useBorder } from \"./use-border.hook\";\
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["export { useBorder } from \"./use-border.hook\";\nexport { useColors } from \"./use-colors.hook\";\nexport { useComponentsTokens } from \"./use-components-tokens.hook\";\nexport { useRadii } from \"./use-radii.hook\";\nexport { useSpace } from \"./use-space.hook\";\nexport { useStyleProps } from \"./use-style-props.hook\";\nexport { useTheme } from \"./use-theme.hook\";\nexport { useThemedStyles } from \"./use-themed-styles\";\n"],"mappings":"AAAA,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;","names":[]}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { useMemo } from "react";
|
|
2
1
|
import { useThemeContext } from "../providers";
|
|
3
2
|
function useBorder() {
|
|
4
3
|
const context = useThemeContext();
|
|
5
|
-
return
|
|
4
|
+
return context.borderSize;
|
|
6
5
|
}
|
|
7
6
|
export {
|
|
8
7
|
useBorder
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-border.hook.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-border.hook.ts"],"sourcesContent":["import { useThemeContext } from \"../providers\";\nimport { BorderSize } from \"../types\";\n\nexport function useBorder(): BorderSize {\n const context = useThemeContext();\n\n return context.borderSize;\n}\n"],"mappings":"AAAA,SAAS,uBAAuB;AAGzB,SAAS,YAAwB;AACtC,QAAM,UAAU,gBAAgB;AAEhC,SAAO,QAAQ;AACjB;","names":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as ThemeColors } from '../theme-provider.types-
|
|
1
|
+
import { T as ThemeColors } from '../theme-provider.types-DLP3kyqN.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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-colors.hook.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-colors.hook.ts"],"sourcesContent":["import { useThemeContext } from \"../providers\";\nimport { ThemeColors } from \"../types\";\n\nexport function useColors(): ThemeColors {\n const context = useThemeContext();\n\n return context.colors;\n}\n"],"mappings":"AAAA,SAAS,uBAAuB;AAGzB,SAAS,YAAyB;AACvC,QAAM,UAAU,gBAAgB;AAEhC,SAAO,QAAQ;AACjB;","names":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { c as ComponentsTokens } from '../theme-provider.types-
|
|
1
|
+
import { c as ComponentsTokens } from '../theme-provider.types-DLP3kyqN.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,8 +1,7 @@
|
|
|
1
|
-
import { useMemo } from "react";
|
|
2
1
|
import { useThemeContext } from "../providers";
|
|
3
2
|
function useComponentsTokens() {
|
|
4
3
|
const context = useThemeContext();
|
|
5
|
-
return
|
|
4
|
+
return context.components;
|
|
6
5
|
}
|
|
7
6
|
export {
|
|
8
7
|
useComponentsTokens
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-components-tokens.hook.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-components-tokens.hook.ts"],"sourcesContent":["import { useThemeContext } from \"../providers\";\n\nexport function useComponentsTokens() {\n const context = useThemeContext();\n\n return context.components;\n}\n"],"mappings":"AAAA,SAAS,uBAAuB;AAEzB,SAAS,sBAAsB;AACpC,QAAM,UAAU,gBAAgB;AAEhC,SAAO,QAAQ;AACjB;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-radii.hook.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-radii.hook.ts"],"sourcesContent":["import { useThemeContext } from \"../providers\";\nimport { Radii } from \"../types\";\n\nexport function useRadii(): Radii {\n const context = useThemeContext();\n\n return context.radii;\n}\n"],"mappings":"AAAA,SAAS,uBAAuB;AAGzB,SAAS,WAAkB;AAChC,QAAM,UAAU,gBAAgB;AAEhC,SAAO,QAAQ;AACjB;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-space.hook.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-space.hook.ts"],"sourcesContent":["import { useThemeContext } from \"../providers\";\nimport { Space } from \"../types\";\n\nexport function useSpace(): Space {\n const context = useThemeContext();\n\n return context.space;\n}\n"],"mappings":"AAAA,SAAS,uBAAuB;AAGzB,SAAS,WAAkB;AAChC,QAAM,UAAU,gBAAgB;AAEhC,SAAO,QAAQ;AACjB;","names":[]}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { StylePropsSet } from "../constants";
|
|
3
|
+
import { extractStyleProps } from "../utils";
|
|
3
4
|
function useStyleProps(props) {
|
|
4
|
-
const
|
|
5
|
-
return useMemo(() => extractStyleProps(props),
|
|
5
|
+
const values = Array.from(StylePropsSet, (key) => props[key]);
|
|
6
|
+
return useMemo(() => extractStyleProps(props), values);
|
|
6
7
|
}
|
|
7
8
|
export {
|
|
8
9
|
useStyleProps
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-style-props.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-style-props.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { StylePropsSet } from \"../constants\";\nimport { extractStyleProps } from \"../utils\";\n\nexport function useStyleProps<Props extends object>(props: Props) {\n // The fixed key order compares actual values without a serialized cache key.\n const values = Array.from(StylePropsSet, (key) => props[key as keyof Props]);\n\n return useMemo(() => extractStyleProps(props), values);\n}\n"],"mappings":"AAAA,SAAS,eAAe;AAExB,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAE3B,SAAS,cAAoC,OAAc;AAEhE,QAAM,SAAS,MAAM,KAAK,eAAe,CAAC,QAAQ,MAAM,GAAkB,CAAC;AAE3E,SAAO,QAAQ,MAAM,kBAAkB,KAAK,GAAG,MAAM;AACvD;","names":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { A as AppTheme } from '../theme-provider.types-
|
|
1
|
+
import { A as AppTheme } from '../theme-provider.types-DLP3kyqN.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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-theme.hook.ts"],"sourcesContent":["import { useThemeContext } from \"../providers\";\
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-theme.hook.ts"],"sourcesContent":["import { useThemeContext } from \"../providers\";\nimport { AppTheme } from \"../types\";\n\nexport function useTheme(): AppTheme {\n return useThemeContext();\n}\n"],"mappings":"AAAA,SAAS,uBAAuB;AAGzB,SAAS,WAAqB;AACnC,SAAO,gBAAgB;AACzB;","names":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { A as AppTheme } from '../theme-provider.types-
|
|
1
|
+
import { ViewStyle, TextStyle, ImageStyle } from 'react-native';
|
|
2
|
+
import { A as AppTheme } from '../theme-provider.types-DLP3kyqN.mjs';
|
|
3
3
|
import '../types/badge-tokens.types.mjs';
|
|
4
4
|
import '../types/components.types.mjs';
|
|
5
5
|
import '../types/carousel-tokens.types.mjs';
|
|
@@ -38,11 +38,13 @@ import '../types/tag-tokens.types.mjs';
|
|
|
38
38
|
import '../types/textarea-tokens.types.mjs';
|
|
39
39
|
import '../types/time-picker-token.types.mjs';
|
|
40
40
|
|
|
41
|
-
type
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
41
|
+
type NamedStyles<T> = {
|
|
42
|
+
[Key in keyof T]: ViewStyle | TextStyle | ImageStyle;
|
|
43
|
+
};
|
|
44
|
+
type ThemedStyles<T extends NamedStyles<T>> = T;
|
|
45
|
+
type StyledFunctionNoProps<T extends NamedStyles<T>> = (theme: AppTheme) => ThemedStyles<T>;
|
|
46
|
+
type StyledFunctionWithProps<Props extends object, T extends NamedStyles<T>> = (theme: AppTheme, props: Props) => ThemedStyles<T>;
|
|
47
|
+
declare function useThemedStyles<T extends NamedStyles<T>>(styledFunction: StyledFunctionNoProps<T>): ThemedStyles<T>;
|
|
48
|
+
declare function useThemedStyles<Props extends object, T extends NamedStyles<T>>(styledFunction: StyledFunctionWithProps<Props, T>, props: Props, dependencies: readonly unknown[]): ThemedStyles<T>;
|
|
47
49
|
|
|
48
50
|
export { useThemedStyles };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-themed-styles.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-themed-styles.ts"],"sourcesContent":["import type { ImageStyle, TextStyle, ViewStyle } from \"react-native\";\nimport { useMemo } from \"react\";\n\nimport { AppTheme } from \"../types\";\nimport { useTheme } from \"./use-theme.hook\";\n\ntype NamedStyles<T> = { [Key in keyof T]: ViewStyle | TextStyle | ImageStyle };\n\ntype ThemedStyles<T extends NamedStyles<T>> = T;\n\ntype StyledFunctionNoProps<T extends NamedStyles<T>> = (\n theme: AppTheme,\n) => ThemedStyles<T>;\n\ntype StyledFunctionWithProps<Props extends object, T extends NamedStyles<T>> = (\n theme: AppTheme,\n props: Props,\n) => ThemedStyles<T>;\n\nexport function useThemedStyles<T extends NamedStyles<T>>(\n styledFunction: StyledFunctionNoProps<T>,\n): ThemedStyles<T>;\n\nexport function useThemedStyles<Props extends object, T extends NamedStyles<T>>(\n styledFunction: StyledFunctionWithProps<Props, T>,\n props: Props,\n dependencies: readonly unknown[],\n): ThemedStyles<T>;\n\nexport function useThemedStyles<Props extends object, T extends NamedStyles<T>>(\n styledFunction: StyledFunctionNoProps<T> | StyledFunctionWithProps<Props, T>,\n props?: Props,\n dependencies?: readonly unknown[],\n): ThemedStyles<T> {\n const theme = useTheme();\n\n const memoDependencies = dependencies ?? (props === undefined ? [] : [props]);\n\n return useMemo(() => {\n if (props === undefined) {\n return (styledFunction as StyledFunctionNoProps<T>)(theme);\n }\n\n return (styledFunction as StyledFunctionWithProps<Props, T>)(theme, props);\n }, [theme, styledFunction, ...memoDependencies]);\n}\n"],"mappings":"AACA,SAAS,eAAe;AAGxB,SAAS,gBAAgB;AAyBlB,SAAS,gBACd,gBACA,OACA,cACiB;AACjB,QAAM,QAAQ,SAAS;AAEvB,QAAM,mBAAmB,iBAAiB,UAAU,SAAY,CAAC,IAAI,CAAC,KAAK;AAE3E,SAAO,QAAQ,MAAM;AACnB,QAAI,UAAU,QAAW;AACvB,aAAQ,eAA4C,KAAK;AAAA,IAC3D;AAEA,WAAQ,eAAqD,OAAO,KAAK;AAAA,EAC3E,GAAG,CAAC,OAAO,gBAAgB,GAAG,gBAAgB,CAAC;AACjD;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -31,7 +31,7 @@ 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-DLP3kyqN.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';
|
|
@@ -83,5 +83,4 @@ export { getTabsItemTokens } from './utils/tabs-state.utils.mjs';
|
|
|
83
83
|
export { ChartColorTokens } from './theme/chart-color-tokens.mjs';
|
|
84
84
|
import 'react-native';
|
|
85
85
|
import 'react';
|
|
86
|
-
import 'react/jsx-runtime';
|
|
87
86
|
import '@impulse-ui-native/core';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from \"./constants\";\
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from \"./constants\";\nexport * from \"./hooks\";\nexport * from \"./providers\";\nexport * from \"./theme\";\nexport * from \"./types\";\nexport * from \"./utils\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
export { ThemeProvider, useThemeContext } from './theme.provider.mjs';
|
|
2
2
|
import 'react';
|
|
3
|
-
import 'react/jsx-runtime';
|
|
4
3
|
import '@impulse-ui-native/core';
|
|
5
|
-
import '../theme-provider.types-
|
|
4
|
+
import '../theme-provider.types-DLP3kyqN.mjs';
|
|
6
5
|
import '../types/badge-tokens.types.mjs';
|
|
7
6
|
import '../types/components.types.mjs';
|
|
8
7
|
import '../types/carousel-tokens.types.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/providers/index.ts"],"sourcesContent":["export * from \"./theme.provider\";\
|
|
1
|
+
{"version":3,"sources":["../../src/providers/index.ts"],"sourcesContent":["export * from \"./theme.provider\";\n"],"mappings":"AAAA,cAAc;","names":[]}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { PropsWithChildren } from 'react';
|
|
3
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
3
|
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-
|
|
4
|
+
import { a as ColorScheme, P as PrimitiveThemeTokens, c as ComponentsTokens, A as AppTheme } from '../theme-provider.types-DLP3kyqN.mjs';
|
|
6
5
|
import '../types/badge-tokens.types.mjs';
|
|
7
6
|
import '../types/components.types.mjs';
|
|
8
7
|
import '../types/carousel-tokens.types.mjs';
|
|
@@ -50,7 +49,7 @@ interface ThemeProviderProps {
|
|
|
50
49
|
}>;
|
|
51
50
|
components?: ((theme: PrimitiveThemeTokens) => DeepPartial<ComponentsTokens>) | DeepPartial<ComponentsTokens>;
|
|
52
51
|
}
|
|
53
|
-
declare const ThemeProvider: react.MemoExoticComponent<(props: PropsWithChildren<ThemeProviderProps>) =>
|
|
52
|
+
declare const ThemeProvider: react.MemoExoticComponent<(props: PropsWithChildren<ThemeProviderProps>) => react.JSX.Element>;
|
|
54
53
|
declare function useThemeContext(): AppTheme;
|
|
55
54
|
|
|
56
55
|
export { ThemeProvider, useThemeContext };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-DLP3kyqN.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,7 +1,7 @@
|
|
|
1
1
|
function createAccordionTokens(tokens) {
|
|
2
2
|
return {
|
|
3
3
|
animationDuration: 220,
|
|
4
|
-
backgroundColor: tokens.colors.surface.
|
|
4
|
+
backgroundColor: tokens.colors.surface.default.value,
|
|
5
5
|
borderColor: tokens.colors.border.subtle.value,
|
|
6
6
|
borderRadius: tokens.radii.lg,
|
|
7
7
|
borderWidth: tokens.borderSize.sm,
|
|
@@ -26,7 +26,7 @@ function createAccordionTokens(tokens) {
|
|
|
26
26
|
titleColor: tokens.colors.text.primary
|
|
27
27
|
},
|
|
28
28
|
focused: {
|
|
29
|
-
backgroundColor: tokens.colors.surface.
|
|
29
|
+
backgroundColor: tokens.colors.surface.subtle.value,
|
|
30
30
|
iconColor: tokens.colors.text.secondary,
|
|
31
31
|
opacity: 1,
|
|
32
32
|
pressedOpacity: 0.72,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-accordion-tokens.ts"],"sourcesContent":["import type { AccordionTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createAccordionTokens(\n tokens: PrimitiveThemeTokens,\n): AccordionTokens {\n return {\n animationDuration: 220,\n backgroundColor: tokens.colors.surface.
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-accordion-tokens.ts"],"sourcesContent":["import type { AccordionTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createAccordionTokens(\n tokens: PrimitiveThemeTokens,\n): AccordionTokens {\n return {\n animationDuration: 220,\n backgroundColor: tokens.colors.surface.default.value,\n borderColor: tokens.colors.border.subtle.value,\n borderRadius: tokens.radii.lg,\n borderWidth: tokens.borderSize.sm,\n content: {\n paddingBottom: tokens.space.sm,\n paddingHorizontal: tokens.space.sm,\n },\n dividerColor: tokens.colors.border.subtle.value,\n dividerWidth: tokens.borderSize.sm,\n iconSize: 18,\n trigger: {\n gap: tokens.space.xs,\n minHeight: 48,\n paddingHorizontal: tokens.space.sm,\n paddingVertical: tokens.space.xs,\n states: {\n default: {\n backgroundColor: \"transparent\",\n iconColor: tokens.colors.text.secondary,\n opacity: 1,\n pressedOpacity: 0.72,\n titleColor: tokens.colors.text.primary,\n },\n focused: {\n backgroundColor: tokens.colors.surface.subtle.value,\n iconColor: tokens.colors.text.secondary,\n opacity: 1,\n pressedOpacity: 0.72,\n titleColor: tokens.colors.text.primary,\n },\n disabled: {\n backgroundColor: \"transparent\",\n iconColor: tokens.colors.text.disabled,\n opacity: 0.5,\n pressedOpacity: 0.5,\n titleColor: tokens.colors.text.disabled,\n },\n },\n },\n };\n}\n"],"mappings":"AAEO,SAAS,sBACd,QACiB;AACjB,SAAO;AAAA,IACL,mBAAmB;AAAA,IACnB,iBAAiB,OAAO,OAAO,QAAQ,QAAQ;AAAA,IAC/C,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,IACzC,cAAc,OAAO,MAAM;AAAA,IAC3B,aAAa,OAAO,WAAW;AAAA,IAC/B,SAAS;AAAA,MACP,eAAe,OAAO,MAAM;AAAA,MAC5B,mBAAmB,OAAO,MAAM;AAAA,IAClC;AAAA,IACA,cAAc,OAAO,OAAO,OAAO,OAAO;AAAA,IAC1C,cAAc,OAAO,WAAW;AAAA,IAChC,UAAU;AAAA,IACV,SAAS;AAAA,MACP,KAAK,OAAO,MAAM;AAAA,MAClB,WAAW;AAAA,MACX,mBAAmB,OAAO,MAAM;AAAA,MAChC,iBAAiB,OAAO,MAAM;AAAA,MAC9B,QAAQ;AAAA,QACN,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,WAAW,OAAO,OAAO,KAAK;AAAA,UAC9B,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY,OAAO,OAAO,KAAK;AAAA,QACjC;AAAA,QACA,SAAS;AAAA,UACP,iBAAiB,OAAO,OAAO,QAAQ,OAAO;AAAA,UAC9C,WAAW,OAAO,OAAO,KAAK;AAAA,UAC9B,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY,OAAO,OAAO,KAAK;AAAA,QACjC;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,WAAW,OAAO,OAAO,KAAK;AAAA,UAC9B,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY,OAAO,OAAO,KAAK;AAAA,QACjC;AAAA,MACF;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-DLP3kyqN.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-DLP3kyqN.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';
|
|
@@ -64,7 +64,7 @@ function createBadgeTokens(tokens) {
|
|
|
64
64
|
neutral: createVariants(
|
|
65
65
|
tokens.colors.text.secondary,
|
|
66
66
|
tokens.colors.text.inverse,
|
|
67
|
-
tokens.colors.surface.
|
|
67
|
+
tokens.colors.surface.subtle.value,
|
|
68
68
|
tokens.colors.text.primary
|
|
69
69
|
),
|
|
70
70
|
error: createVariants(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-badge-tokens.ts"],"sourcesContent":["import type { BadgeTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createBadgeTokens(tokens: PrimitiveThemeTokens): BadgeTokens {\n const createVariants = (\n value: string,\n contrast: string,\n softBackgroundColor = contrast,\n softColor = value,\n outlinedColor = value,\n ) => ({\n filled: {\n backgroundColor: value,\n borderColor: value,\n color: contrast,\n },\n outlined: {\n backgroundColor: \"transparent\",\n borderColor: outlinedColor,\n color: outlinedColor,\n },\n soft: {\n backgroundColor: softBackgroundColor,\n borderColor: softBackgroundColor,\n color: softColor,\n },\n });\n\n return {\n addonHitSlop: tokens.space.xs,\n borderRadius: tokens.radii.round,\n borderWidth: tokens.borderSize.sm,\n fontFamily: tokens.fontFamily.normal[tokens.fontWeight.semiBold],\n gap: tokens.space.xxs,\n sizes: {\n small: {\n fontSize: tokens.fontSize.xxs,\n height: 20,\n iconSize: 12,\n lineHeight: tokens.lineHeight.xxs,\n minWidth: 20,\n paddingHorizontal: tokens.space.xxs,\n },\n medium: {\n fontSize: tokens.fontSize.xs,\n height: 24,\n iconSize: 14,\n lineHeight: tokens.lineHeight.xs,\n minWidth: 24,\n paddingHorizontal: tokens.space.xs,\n },\n large: {\n fontSize: tokens.fontSize.xsm,\n height: 28,\n iconSize: 16,\n lineHeight: tokens.lineHeight.xsm,\n minWidth: 28,\n paddingHorizontal: tokens.space.mxs,\n },\n },\n colors: {\n primary: createVariants(\n tokens.colors.primary.value,\n tokens.colors.primary.contrast,\n tokens.colors.secondary.value,\n ),\n secondary: createVariants(\n tokens.colors.secondary.value,\n tokens.colors.secondary.contrast,\n tokens.colors.secondary.value,\n tokens.colors.secondary.contrast,\n tokens.colors.secondary.contrast,\n ),\n neutral: createVariants(\n tokens.colors.text.secondary,\n tokens.colors.text.inverse,\n tokens.colors.surface.
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-badge-tokens.ts"],"sourcesContent":["import type { BadgeTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createBadgeTokens(tokens: PrimitiveThemeTokens): BadgeTokens {\n const createVariants = (\n value: string,\n contrast: string,\n softBackgroundColor = contrast,\n softColor = value,\n outlinedColor = value,\n ) => ({\n filled: {\n backgroundColor: value,\n borderColor: value,\n color: contrast,\n },\n outlined: {\n backgroundColor: \"transparent\",\n borderColor: outlinedColor,\n color: outlinedColor,\n },\n soft: {\n backgroundColor: softBackgroundColor,\n borderColor: softBackgroundColor,\n color: softColor,\n },\n });\n\n return {\n addonHitSlop: tokens.space.xs,\n borderRadius: tokens.radii.round,\n borderWidth: tokens.borderSize.sm,\n fontFamily: tokens.fontFamily.normal[tokens.fontWeight.semiBold],\n gap: tokens.space.xxs,\n sizes: {\n small: {\n fontSize: tokens.fontSize.xxs,\n height: 20,\n iconSize: 12,\n lineHeight: tokens.lineHeight.xxs,\n minWidth: 20,\n paddingHorizontal: tokens.space.xxs,\n },\n medium: {\n fontSize: tokens.fontSize.xs,\n height: 24,\n iconSize: 14,\n lineHeight: tokens.lineHeight.xs,\n minWidth: 24,\n paddingHorizontal: tokens.space.xs,\n },\n large: {\n fontSize: tokens.fontSize.xsm,\n height: 28,\n iconSize: 16,\n lineHeight: tokens.lineHeight.xsm,\n minWidth: 28,\n paddingHorizontal: tokens.space.mxs,\n },\n },\n colors: {\n primary: createVariants(\n tokens.colors.primary.value,\n tokens.colors.primary.contrast,\n tokens.colors.secondary.value,\n ),\n secondary: createVariants(\n tokens.colors.secondary.value,\n tokens.colors.secondary.contrast,\n tokens.colors.secondary.value,\n tokens.colors.secondary.contrast,\n tokens.colors.secondary.contrast,\n ),\n neutral: createVariants(\n tokens.colors.text.secondary,\n tokens.colors.text.inverse,\n tokens.colors.surface.subtle.value,\n tokens.colors.text.primary,\n ),\n error: createVariants(\n tokens.colors.feedback.error.value,\n tokens.colors.feedback.error.contrast,\n ),\n warning: createVariants(\n tokens.colors.feedback.warning.value,\n tokens.colors.feedback.warning.contrast,\n ),\n success: createVariants(\n tokens.colors.feedback.success.value,\n tokens.colors.feedback.success.contrast,\n ),\n info: createVariants(\n tokens.colors.feedback.info.value,\n tokens.colors.feedback.info.contrast,\n ),\n },\n };\n}\n"],"mappings":"AAEO,SAAS,kBAAkB,QAA2C;AAC3E,QAAM,iBAAiB,CACrB,OACA,UACA,sBAAsB,UACtB,YAAY,OACZ,gBAAgB,WACZ;AAAA,IACJ,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA,MAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO;AAAA,IACL,cAAc,OAAO,MAAM;AAAA,IAC3B,cAAc,OAAO,MAAM;AAAA,IAC3B,aAAa,OAAO,WAAW;AAAA,IAC/B,YAAY,OAAO,WAAW,OAAO,OAAO,WAAW,QAAQ;AAAA,IAC/D,KAAK,OAAO,MAAM;AAAA,IAClB,OAAO;AAAA,MACL,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,QAC1B,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,YAAY,OAAO,WAAW;AAAA,QAC9B,UAAU;AAAA,QACV,mBAAmB,OAAO,MAAM;AAAA,MAClC;AAAA,MACA,QAAQ;AAAA,QACN,UAAU,OAAO,SAAS;AAAA,QAC1B,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,YAAY,OAAO,WAAW;AAAA,QAC9B,UAAU;AAAA,QACV,mBAAmB,OAAO,MAAM;AAAA,MAClC;AAAA,MACA,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,QAC1B,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,YAAY,OAAO,WAAW;AAAA,QAC9B,UAAU;AAAA,QACV,mBAAmB,OAAO,MAAM;AAAA,MAClC;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,OAAO,OAAO,QAAQ;AAAA,QACtB,OAAO,OAAO,QAAQ;AAAA,QACtB,OAAO,OAAO,UAAU;AAAA,MAC1B;AAAA,MACA,WAAW;AAAA,QACT,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,OAAO,UAAU;AAAA,MAC1B;AAAA,MACA,SAAS;AAAA,QACP,OAAO,OAAO,KAAK;AAAA,QACnB,OAAO,OAAO,KAAK;AAAA,QACnB,OAAO,OAAO,QAAQ,OAAO;AAAA,QAC7B,OAAO,OAAO,KAAK;AAAA,MACrB;AAAA,MACA,OAAO;AAAA,QACL,OAAO,OAAO,SAAS,MAAM;AAAA,QAC7B,OAAO,OAAO,SAAS,MAAM;AAAA,MAC/B;AAAA,MACA,SAAS;AAAA,QACP,OAAO,OAAO,SAAS,QAAQ;AAAA,QAC/B,OAAO,OAAO,SAAS,QAAQ;AAAA,MACjC;AAAA,MACA,SAAS;AAAA,QACP,OAAO,OAAO,SAAS,QAAQ;AAAA,QAC/B,OAAO,OAAO,SAAS,QAAQ;AAAA,MACjC;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO,SAAS,KAAK;AAAA,QAC5B,OAAO,OAAO,SAAS,KAAK;AAAA,MAC9B;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-DLP3kyqN.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';
|
|
@@ -40,7 +40,7 @@ function createButtonTokens(tokens) {
|
|
|
40
40
|
color: primaryContrast
|
|
41
41
|
},
|
|
42
42
|
disabled: {
|
|
43
|
-
backgroundColor: tokens.colors.surface.
|
|
43
|
+
backgroundColor: tokens.colors.surface.subtle.value,
|
|
44
44
|
borderColor: tokens.colors.border.default.value,
|
|
45
45
|
color: disabledColor
|
|
46
46
|
}
|
|
@@ -74,7 +74,7 @@ function createButtonTokens(tokens) {
|
|
|
74
74
|
color: secondaryContrast
|
|
75
75
|
},
|
|
76
76
|
disabled: {
|
|
77
|
-
backgroundColor: tokens.colors.surface.
|
|
77
|
+
backgroundColor: tokens.colors.surface.subtle.value,
|
|
78
78
|
borderColor: tokens.colors.border.subtle.value,
|
|
79
79
|
color: disabledColor
|
|
80
80
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-button-tokens.ts"],"sourcesContent":["import { ButtonTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createButtonTokens(tokens: PrimitiveThemeTokens): ButtonTokens {\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 height: 32,\n paddingVertical: 6,\n paddingHorizontal: 12,\n fontSize: tokens.fontSize.xsm,\n },\n medium: {\n height: 40,\n paddingVertical: 8,\n paddingHorizontal: 16,\n fontSize: tokens.fontSize.sm,\n },\n large: {\n height: 48,\n paddingVertical: 10,\n paddingHorizontal: 20,\n fontSize: tokens.fontSize.sm,\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.
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-button-tokens.ts"],"sourcesContent":["import { ButtonTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createButtonTokens(tokens: PrimitiveThemeTokens): ButtonTokens {\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 height: 32,\n paddingVertical: 6,\n paddingHorizontal: 12,\n fontSize: tokens.fontSize.xsm,\n },\n medium: {\n height: 40,\n paddingVertical: 8,\n paddingHorizontal: 16,\n fontSize: tokens.fontSize.sm,\n },\n large: {\n height: 48,\n paddingVertical: 10,\n paddingHorizontal: 20,\n fontSize: tokens.fontSize.sm,\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.subtle.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.subtle.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,mBAAmB,QAA4C;AAC7E,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,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MACA,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MACA,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,UAAU,OAAO,SAAS;AAAA,MAC5B;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,OAAO;AAAA,UAC9C,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,OAAO;AAAA,UAC9C,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":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-DLP3kyqN.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,6 +1,6 @@
|
|
|
1
1
|
function createCardTokens(tokens) {
|
|
2
2
|
return {
|
|
3
|
-
backgroundColor: tokens.colors.surface.
|
|
3
|
+
backgroundColor: tokens.colors.surface.default.value,
|
|
4
4
|
borderColor: tokens.colors.border.subtle.value,
|
|
5
5
|
borderRadius: tokens.radii.lg,
|
|
6
6
|
borderWidth: tokens.borderSize.sm,
|
|
@@ -16,7 +16,7 @@ function createCardTokens(tokens) {
|
|
|
16
16
|
gap: tokens.space.xs,
|
|
17
17
|
padding: tokens.space.sm
|
|
18
18
|
},
|
|
19
|
-
mediaBackgroundColor: tokens.colors.surface.
|
|
19
|
+
mediaBackgroundColor: tokens.colors.surface.subtle.value
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
22
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-card-tokens.ts"],"sourcesContent":["import type { CardTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createCardTokens(tokens: PrimitiveThemeTokens): CardTokens {\n return {\n backgroundColor: tokens.colors.surface.
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-card-tokens.ts"],"sourcesContent":["import type { CardTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createCardTokens(tokens: PrimitiveThemeTokens): CardTokens {\n return {\n backgroundColor: tokens.colors.surface.default.value,\n borderColor: tokens.colors.border.subtle.value,\n borderRadius: tokens.radii.lg,\n borderWidth: tokens.borderSize.sm,\n header: {\n gap: tokens.space.xxs,\n padding: tokens.space.sm,\n },\n content: {\n gap: tokens.space.xs,\n padding: tokens.space.sm,\n },\n footer: {\n gap: tokens.space.xs,\n padding: tokens.space.sm,\n },\n mediaBackgroundColor: tokens.colors.surface.subtle.value,\n };\n}\n"],"mappings":"AAEO,SAAS,iBAAiB,QAA0C;AACzE,SAAO;AAAA,IACL,iBAAiB,OAAO,OAAO,QAAQ,QAAQ;AAAA,IAC/C,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,IACzC,cAAc,OAAO,MAAM;AAAA,IAC3B,aAAa,OAAO,WAAW;AAAA,IAC/B,QAAQ;AAAA,MACN,KAAK,OAAO,MAAM;AAAA,MAClB,SAAS,OAAO,MAAM;AAAA,IACxB;AAAA,IACA,SAAS;AAAA,MACP,KAAK,OAAO,MAAM;AAAA,MAClB,SAAS,OAAO,MAAM;AAAA,IACxB;AAAA,IACA,QAAQ;AAAA,MACN,KAAK,OAAO,MAAM;AAAA,MAClB,SAAS,OAAO,MAAM;AAAA,IACxB;AAAA,IACA,sBAAsB,OAAO,OAAO,QAAQ,OAAO;AAAA,EACrD;AACF;","names":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-DLP3kyqN.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-DLP3kyqN.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-DLP3kyqN.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';
|
|
@@ -41,7 +41,7 @@ function createCheckboxTokens(tokens) {
|
|
|
41
41
|
color: tokens.colors.text.disabled
|
|
42
42
|
},
|
|
43
43
|
disabledSelected: {
|
|
44
|
-
backgroundColor: tokens.colors.surface.
|
|
44
|
+
backgroundColor: tokens.colors.surface.subtle.value,
|
|
45
45
|
borderColor: tokens.colors.border.default.value,
|
|
46
46
|
color: tokens.colors.text.disabled
|
|
47
47
|
}
|
|
@@ -63,7 +63,7 @@ function createCheckboxTokens(tokens) {
|
|
|
63
63
|
color: tokens.colors.text.disabled
|
|
64
64
|
},
|
|
65
65
|
disabledSelected: {
|
|
66
|
-
backgroundColor: tokens.colors.surface.
|
|
66
|
+
backgroundColor: tokens.colors.surface.subtle.value,
|
|
67
67
|
borderColor: tokens.colors.border.default.value,
|
|
68
68
|
color: tokens.colors.text.disabled
|
|
69
69
|
}
|
|
@@ -85,7 +85,7 @@ function createCheckboxTokens(tokens) {
|
|
|
85
85
|
color: tokens.colors.text.disabled
|
|
86
86
|
},
|
|
87
87
|
disabledSelected: {
|
|
88
|
-
backgroundColor: tokens.colors.surface.
|
|
88
|
+
backgroundColor: tokens.colors.surface.subtle.value,
|
|
89
89
|
borderColor: tokens.colors.border.default.value,
|
|
90
90
|
color: tokens.colors.text.disabled
|
|
91
91
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/theme/create-checkbox-tokens.ts"],"sourcesContent":["import type { CheckboxTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createCheckboxTokens(\n tokens: PrimitiveThemeTokens,\n): CheckboxTokens {\n const primary = tokens.colors.primary.value;\n const primaryContrast = tokens.colors.primary.contrast;\n const secondary = tokens.colors.secondary.value;\n const secondaryContrast = tokens.colors.secondary.contrast;\n\n return {\n borderWidth: tokens.borderSize.md,\n borderRadius: tokens.radii.sm,\n\n sizes: {\n small: {\n size: 20,\n iconSize: 14,\n hitSlop: 12,\n },\n medium: {\n size: 24,\n iconSize: 18,\n hitSlop: 10,\n },\n large: {\n size: 28,\n iconSize: 22,\n hitSlop: 8,\n },\n },\n\n variants: {\n filled: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: primaryContrast,\n },\n selected: {\n backgroundColor: primary,\n borderColor: primary,\n color: primaryContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.
|
|
1
|
+
{"version":3,"sources":["../../src/theme/create-checkbox-tokens.ts"],"sourcesContent":["import type { CheckboxTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createCheckboxTokens(\n tokens: PrimitiveThemeTokens,\n): CheckboxTokens {\n const primary = tokens.colors.primary.value;\n const primaryContrast = tokens.colors.primary.contrast;\n const secondary = tokens.colors.secondary.value;\n const secondaryContrast = tokens.colors.secondary.contrast;\n\n return {\n borderWidth: tokens.borderSize.md,\n borderRadius: tokens.radii.sm,\n\n sizes: {\n small: {\n size: 20,\n iconSize: 14,\n hitSlop: 12,\n },\n medium: {\n size: 24,\n iconSize: 18,\n hitSlop: 10,\n },\n large: {\n size: 28,\n iconSize: 22,\n hitSlop: 8,\n },\n },\n\n variants: {\n filled: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: primaryContrast,\n },\n selected: {\n backgroundColor: primary,\n borderColor: primary,\n color: primaryContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.subtle.value,\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n },\n outlined: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: primary,\n },\n selected: {\n backgroundColor: \"transparent\",\n borderColor: primary,\n color: primary,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.subtle.value,\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n },\n soft: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: secondaryContrast,\n },\n selected: {\n backgroundColor: secondary,\n borderColor: secondary,\n color: secondaryContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.subtle.value,\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n },\n },\n };\n}\n"],"mappings":"AAEO,SAAS,qBACd,QACgB;AAChB,QAAM,UAAU,OAAO,OAAO,QAAQ;AACtC,QAAM,kBAAkB,OAAO,OAAO,QAAQ;AAC9C,QAAM,YAAY,OAAO,OAAO,UAAU;AAC1C,QAAM,oBAAoB,OAAO,OAAO,UAAU;AAElD,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,cAAc,OAAO,MAAM;AAAA,IAE3B,OAAO;AAAA,MACL,OAAO;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,UACzC,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,oBAAoB;AAAA,UAClB,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,QACA,kBAAkB;AAAA,UAChB,iBAAiB,OAAO,OAAO,QAAQ,OAAO;AAAA,UAC9C,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,UAAU;AAAA,QACR,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,UACzC,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,oBAAoB;AAAA,UAClB,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,QACA,kBAAkB;AAAA,UAChB,iBAAiB,OAAO,OAAO,QAAQ,OAAO;AAAA,UAC9C,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,MAAM;AAAA,QACJ,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,UACzC,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,oBAAoB;AAAA,UAClB,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,QACA,kBAAkB;AAAA,UAChB,iBAAiB,OAAO,OAAO,QAAQ,OAAO;AAAA,UAC9C,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,MACF;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-DLP3kyqN.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';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as PrimitiveThemeTokens } from '../theme-provider.types-
|
|
1
|
+
import { P as PrimitiveThemeTokens } from '../theme-provider.types-DLP3kyqN.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';
|
|
@@ -39,22 +39,22 @@ function createControlContainerTokens(tokens) {
|
|
|
39
39
|
variants: {
|
|
40
40
|
filled: {
|
|
41
41
|
default: {
|
|
42
|
-
backgroundColor: tokens.colors.surface.
|
|
42
|
+
backgroundColor: tokens.colors.surface.default.value,
|
|
43
43
|
borderColor: "transparent",
|
|
44
44
|
opacity: 1
|
|
45
45
|
},
|
|
46
46
|
error: {
|
|
47
|
-
backgroundColor: tokens.colors.surface.
|
|
47
|
+
backgroundColor: tokens.colors.surface.default.value,
|
|
48
48
|
borderColor: tokens.colors.feedback.error.value,
|
|
49
49
|
opacity: 1
|
|
50
50
|
},
|
|
51
51
|
disabled: {
|
|
52
|
-
backgroundColor: tokens.colors.surface.
|
|
52
|
+
backgroundColor: tokens.colors.surface.subtle.value,
|
|
53
53
|
borderColor: "transparent",
|
|
54
54
|
opacity: 0.7
|
|
55
55
|
},
|
|
56
56
|
disabledError: {
|
|
57
|
-
backgroundColor: tokens.colors.surface.
|
|
57
|
+
backgroundColor: tokens.colors.surface.subtle.value,
|
|
58
58
|
borderColor: tokens.colors.feedback.error.value,
|
|
59
59
|
opacity: 0.7
|
|
60
60
|
}
|