UNPKG

@atlaskit/primitives

Version:

Primitives are token-backed low-level building blocks.

atlassian.design/components/primitives/overview/

144 lines (143 loc) • 7.15 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
import type { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize'; import type * as CSS from 'csstype'; import type { StrictXCSSProp, XCSSAllProperties, XCSSAllPseudos } from '@atlaskit/css'; import type { MediaQuery } from '../responsive/types'; import { allSpaceMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, fontFamilyMap, fontMap, fontWeightMap, layerMap, opacityMap, positiveSpaceMap, shadowMap, textColorMap, type TokenisedProps } from './style-maps.partial'; export declare const tokensMap: { readonly backgroundColor: typeof backgroundColorMap; readonly blockSize: typeof dimensionMap; readonly borderBlockColor: typeof borderColorMap; readonly borderBlockEndColor: typeof borderColorMap; readonly borderBlockEndWidth: typeof borderWidthMap; readonly borderBlockStartColor: typeof borderColorMap; readonly borderBlockStartWidth: typeof borderWidthMap; readonly borderBlockWidth: typeof borderWidthMap; readonly borderBottomColor: typeof borderColorMap; readonly borderBottomLeftRadius: typeof borderRadiusMap; readonly borderBottomRightRadius: typeof borderRadiusMap; readonly borderBottomWidth: typeof borderWidthMap; readonly borderColor: typeof borderColorMap; readonly borderEndEndRadius: typeof borderRadiusMap; readonly borderEndStartRadius: typeof borderRadiusMap; readonly borderInlineColor: typeof borderColorMap; readonly borderInlineEndColor: typeof borderColorMap; readonly borderInlineEndWidth: typeof borderWidthMap; readonly borderInlineStartColor: typeof borderColorMap; readonly borderInlineStartWidth: typeof borderWidthMap; readonly borderInlineWidth: typeof borderWidthMap; readonly borderLeftColor: typeof borderColorMap; readonly borderLeftWidth: typeof borderWidthMap; readonly borderRadius: typeof borderRadiusMap; readonly borderRightColor: typeof borderColorMap; readonly borderRightWidth: typeof borderWidthMap; readonly borderStartEndRadius: typeof borderRadiusMap; readonly borderStartStartRadius: typeof borderRadiusMap; readonly borderTopColor: typeof borderColorMap; readonly borderTopLeftRadius: typeof borderRadiusMap; readonly borderTopRightRadius: typeof borderRadiusMap; readonly borderTopWidth: typeof borderWidthMap; readonly borderWidth: typeof borderWidthMap; readonly bottom: typeof allSpaceMap; readonly boxShadow: typeof shadowMap; readonly color: typeof textColorMap; readonly columnGap: typeof positiveSpaceMap; readonly font: typeof fontMap; readonly fontFamily: typeof fontFamilyMap; readonly fontWeight: typeof fontWeightMap; readonly gap: typeof positiveSpaceMap; readonly height: typeof dimensionMap; readonly inlineSize: typeof dimensionMap; readonly inset: typeof allSpaceMap; readonly insetBlock: typeof allSpaceMap; readonly insetBlockEnd: typeof allSpaceMap; readonly insetBlockStart: typeof allSpaceMap; readonly insetInline: typeof allSpaceMap; readonly insetInlineEnd: typeof allSpaceMap; readonly insetInlineStart: typeof allSpaceMap; readonly left: typeof allSpaceMap; readonly margin: typeof allSpaceMap; readonly marginBlock: typeof allSpaceMap; readonly marginBlockEnd: typeof allSpaceMap; readonly marginBlockStart: typeof allSpaceMap; readonly marginBottom: typeof allSpaceMap; readonly marginInline: typeof allSpaceMap; readonly marginInlineEnd: typeof allSpaceMap; readonly marginInlineStart: typeof allSpaceMap; readonly marginLeft: typeof allSpaceMap; readonly marginRight: typeof allSpaceMap; readonly marginTop: typeof allSpaceMap; readonly maxBlockSize: typeof dimensionMap; readonly maxHeight: typeof dimensionMap; readonly maxInlineSize: typeof dimensionMap; readonly maxWidth: typeof dimensionMap; readonly minBlockSize: typeof dimensionMap; readonly minHeight: typeof dimensionMap; readonly minInlineSize: typeof dimensionMap; readonly minWidth: typeof dimensionMap; readonly opacity: typeof opacityMap; readonly outlineColor: typeof borderColorMap; readonly outlineOffset: typeof allSpaceMap; readonly outlineWidth: typeof borderWidthMap; readonly padding: typeof positiveSpaceMap; readonly paddingBlock: typeof positiveSpaceMap; readonly paddingBlockEnd: typeof positiveSpaceMap; readonly paddingBlockStart: typeof positiveSpaceMap; readonly paddingBottom: typeof positiveSpaceMap; readonly paddingInline: typeof positiveSpaceMap; readonly paddingInlineEnd: typeof positiveSpaceMap; readonly paddingInlineStart: typeof positiveSpaceMap; readonly paddingLeft: typeof positiveSpaceMap; readonly paddingRight: typeof positiveSpaceMap; readonly paddingTop: typeof positiveSpaceMap; readonly right: typeof allSpaceMap; readonly rowGap: typeof positiveSpaceMap; readonly top: typeof allSpaceMap; readonly width: typeof dimensionMap; readonly zIndex: typeof layerMap; }; declare const uniqueSymbol: unique symbol; /** * Picks out runtime XCSS objects and build-time XCSS strings. This is needed * to supported both Emotion and Compiled styles until we've fully migrated * to Compiled. * * @private * @deprecated */ export declare const parseXcss: (args: XCSS | (XCSS | false | undefined)[] | undefined | StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>) => { emotion?: SerializedStyles[]; static?: string; }; type AllMedia = MediaQuery | '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)' | '@media (prefers-color-scheme: dark)' | '@media (prefers-color-scheme: light)' | '@media (prefers-reduced-motion: reduce)'; type CSSMediaQueries = { [MQ in AllMedia]?: Omit<SafeCSSObject, AllMedia>; }; type ChainedCSSPseudos = ':visited:active' | ':visited:hover' | ':active:visited' | ':hover::before' | ':focus::before' | ':hover::after' | ':focus-visible::before' | ':focus-visible::after' | ':focus:not(:focus-visible)'; type CSSPseudos = { [Pseudo in CSS.Pseudos | ChainedCSSPseudos]?: Omit<SafeCSSObject, CSS.Pseudos | AllMedia>; }; type AtRulesWithoutMedia = Exclude<CSS.AtRules, '@media'>; type CSSAtRules = { [AtRule in AtRulesWithoutMedia as `${AtRule}${string}`]?: Omit<SafeCSSObject, AtRulesWithoutMedia>; }; type SafeCSSObject = CSSPseudos & CSSAtRules & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>; export type XCSS = ReturnType<typeof xcss>; /** * ### xcss * * `xcss` is a safer, tokens-first approach to CSS-in-JS. It allows token-backed values for * CSS application. * * ```tsx * const styles = xcss({ * padding: 'space.100' * }) * ``` * * @deprecated Use `@atlaskit/css` with `@atlaskit/primitives/compiled` instead. * {@link https://hello.atlassian.net/wiki/spaces/DST/pages/4992259434/Guidance+Migrating+to+atlaskit+css+from+xcss Internal documentation for migration; no external access} */ export declare function xcss(style: SafeCSSObject): { readonly [uniqueSymbol]: SerializedStyles; }; export {};