@atlaskit/primitives 0.6.0 → 0.7.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/.eslintrc.js +3 -0
- package/CHANGELOG.md +8 -0
- package/dist/cjs/components/box.js +3 -40
- package/dist/cjs/components/inline.partial.js +1 -0
- package/dist/cjs/components/internal/base-box.js +61 -0
- package/dist/cjs/components/stack.partial.js +1 -0
- package/dist/cjs/internal/style-maps.partial.js +370 -0
- package/dist/cjs/internal/xcss.js +17 -7
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/box.js +1 -37
- package/dist/es2019/components/inline.partial.js +1 -0
- package/dist/es2019/components/internal/base-box.js +52 -0
- package/dist/es2019/components/stack.partial.js +1 -0
- package/dist/es2019/internal/style-maps.partial.js +341 -0
- package/dist/es2019/internal/xcss.js +13 -7
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/box.js +2 -40
- package/dist/esm/components/inline.partial.js +1 -0
- package/dist/esm/components/internal/base-box.js +53 -0
- package/dist/esm/components/stack.partial.js +1 -0
- package/dist/esm/internal/style-maps.partial.js +340 -0
- package/dist/esm/internal/xcss.js +17 -7
- package/dist/esm/version.json +1 -1
- package/dist/types/components/box.d.ts +1 -1
- package/dist/types/components/internal/base-box.d.ts +83 -0
- package/dist/types/components/types.d.ts +1 -1
- package/dist/types/internal/style-maps.partial.d.ts +396 -0
- package/dist/types/internal/xcss.d.ts +5 -5
- package/package.json +2 -1
- package/report.api.md +206 -327
- package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +313 -363
- package/scripts/border-codegen-template.tsx +79 -0
- package/scripts/codegen-file-templates/align-self.tsx +9 -0
- package/scripts/codegen-file-templates/border-style.tsx +6 -0
- package/scripts/codegen-file-templates/dimensions.tsx +17 -0
- package/scripts/codegen-file-templates/display.tsx +6 -0
- package/scripts/codegen-file-templates/flex-grow.tsx +6 -0
- package/scripts/codegen-file-templates/flex-shrink.tsx +6 -0
- package/scripts/codegen-file-templates/flex.tsx +5 -0
- package/scripts/codegen-file-templates/layer.tsx +13 -0
- package/scripts/codegen-file-templates/overflow.tsx +20 -0
- package/scripts/codegen-file-templates/position.tsx +8 -0
- package/scripts/codegen-styles.tsx +80 -120
- package/scripts/color-codegen-template.tsx +9 -19
- package/scripts/misc-codegen-template.tsx +20 -40
- package/scripts/spacing-codegen-template.tsx +5 -12
- package/scripts/utils.tsx +15 -4
- package/tmp/api-report-tmp.d.ts +201 -326
- package/dist/cjs/components/internal/base-box.partial.js +0 -825
- package/dist/cjs/internal/color-map.js +0 -42
- package/dist/cjs/internal/style-maps.js +0 -130
- package/dist/es2019/components/internal/base-box.partial.js +0 -842
- package/dist/es2019/internal/color-map.js +0 -35
- package/dist/es2019/internal/style-maps.js +0 -117
- package/dist/esm/components/internal/base-box.partial.js +0 -820
- package/dist/esm/internal/color-map.js +0 -35
- package/dist/esm/internal/style-maps.js +0 -117
- package/dist/types/components/internal/base-box.partial.d.ts +0 -521
- package/dist/types/internal/color-map.d.ts +0 -36
- package/dist/types/internal/style-maps.d.ts +0 -151
- package/scripts/color-map-template.tsx +0 -52
- package/scripts/dimension-codegen-template.tsx +0 -75
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
export declare const backgroundColorMap: {
|
|
2
|
-
readonly disabled: "var(--ds-background-disabled)";
|
|
3
|
-
readonly input: "var(--ds-background-input)";
|
|
4
|
-
readonly 'inverse.subtle': "var(--ds-background-inverse-subtle)";
|
|
5
|
-
readonly neutral: "var(--ds-background-neutral)";
|
|
6
|
-
readonly 'neutral.subtle': "var(--ds-background-neutral-subtle)";
|
|
7
|
-
readonly 'neutral.bold': "var(--ds-background-neutral-bold)";
|
|
8
|
-
readonly selected: "var(--ds-background-selected)";
|
|
9
|
-
readonly 'selected.bold': "var(--ds-background-selected-bold)";
|
|
10
|
-
readonly 'brand.bold': "var(--ds-background-brand-bold)";
|
|
11
|
-
readonly danger: "var(--ds-background-danger)";
|
|
12
|
-
readonly 'danger.bold': "var(--ds-background-danger-bold)";
|
|
13
|
-
readonly warning: "var(--ds-background-warning)";
|
|
14
|
-
readonly 'warning.bold': "var(--ds-background-warning-bold)";
|
|
15
|
-
readonly success: "var(--ds-background-success)";
|
|
16
|
-
readonly 'success.bold': "var(--ds-background-success-bold)";
|
|
17
|
-
readonly discovery: "var(--ds-background-discovery)";
|
|
18
|
-
readonly 'discovery.bold': "var(--ds-background-discovery-bold)";
|
|
19
|
-
readonly information: "var(--ds-background-information)";
|
|
20
|
-
readonly 'information.bold': "var(--ds-background-information-bold)";
|
|
21
|
-
readonly 'color.blanket': "var(--ds-blanket)";
|
|
22
|
-
readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
|
|
23
|
-
readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
|
|
24
|
-
readonly 'elevation.surface': "var(--ds-surface)";
|
|
25
|
-
readonly 'elevation.surface.overlay': "var(--ds-surface-overlay)";
|
|
26
|
-
readonly 'elevation.surface.raised': "var(--ds-surface-raised)";
|
|
27
|
-
readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
|
|
28
|
-
};
|
|
29
|
-
export declare type BackgroundColor = keyof typeof backgroundColorMap;
|
|
30
|
-
export declare const borderColorMap: {
|
|
31
|
-
readonly 'color.border': "var(--ds-border)";
|
|
32
|
-
readonly disabled: "var(--ds-border-disabled)";
|
|
33
|
-
readonly focused: "var(--ds-border-focused)";
|
|
34
|
-
readonly input: "var(--ds-border-input)";
|
|
35
|
-
readonly inverse: "var(--ds-border-inverse)";
|
|
36
|
-
readonly selected: "var(--ds-border-selected)";
|
|
37
|
-
readonly brand: "var(--ds-border-brand)";
|
|
38
|
-
readonly danger: "var(--ds-border-danger)";
|
|
39
|
-
readonly warning: "var(--ds-border-warning)";
|
|
40
|
-
readonly success: "var(--ds-border-success)";
|
|
41
|
-
readonly discovery: "var(--ds-border-discovery)";
|
|
42
|
-
readonly information: "var(--ds-border-information)";
|
|
43
|
-
readonly bold: "var(--ds-border-bold)";
|
|
44
|
-
};
|
|
45
|
-
export declare type BorderColor = keyof typeof borderColorMap;
|
|
46
|
-
export declare const borderWidthMap: {
|
|
47
|
-
readonly 'size.0': "var(--ds-width-0)";
|
|
48
|
-
readonly 'size.050': "var(--ds-width-050)";
|
|
49
|
-
readonly 'size.100': "var(--ds-width-100)";
|
|
50
|
-
};
|
|
51
|
-
export declare type BorderWidth = keyof typeof borderWidthMap;
|
|
52
|
-
export declare const borderRadiusMap: {
|
|
53
|
-
readonly 'radius.400': "var(--ds-radius-400)";
|
|
54
|
-
readonly 'radius.300': "var(--ds-radius-300)";
|
|
55
|
-
readonly 'radius.100': "var(--ds-radius-100)";
|
|
56
|
-
readonly 'radius.050': "var(--ds-radius-050)";
|
|
57
|
-
readonly 'radius.200': "var(--ds-radius-200)";
|
|
58
|
-
};
|
|
59
|
-
export declare type BorderRadius = keyof typeof borderRadiusMap;
|
|
60
|
-
export declare const paddingMap: {
|
|
61
|
-
readonly 'space.0': "var(--ds-space-0)";
|
|
62
|
-
readonly 'space.025': "var(--ds-space-025)";
|
|
63
|
-
readonly 'space.050': "var(--ds-space-050)";
|
|
64
|
-
readonly 'space.075': "var(--ds-space-075)";
|
|
65
|
-
readonly 'space.100': "var(--ds-space-100)";
|
|
66
|
-
readonly 'space.150': "var(--ds-space-150)";
|
|
67
|
-
readonly 'space.200': "var(--ds-space-200)";
|
|
68
|
-
readonly 'space.250': "var(--ds-space-250)";
|
|
69
|
-
readonly 'space.300': "var(--ds-space-300)";
|
|
70
|
-
readonly 'space.400': "var(--ds-space-400)";
|
|
71
|
-
readonly 'space.500': "var(--ds-space-500)";
|
|
72
|
-
readonly 'space.600': "var(--ds-space-600)";
|
|
73
|
-
readonly 'space.800': "var(--ds-space-800)";
|
|
74
|
-
readonly 'space.1000': "var(--ds-space-1000)";
|
|
75
|
-
};
|
|
76
|
-
export declare type Padding = keyof typeof paddingMap;
|
|
77
|
-
export declare type PaddingBlock = keyof typeof paddingMap;
|
|
78
|
-
export declare type PaddingBlockStart = keyof typeof paddingMap;
|
|
79
|
-
export declare type PaddingBlockEnd = keyof typeof paddingMap;
|
|
80
|
-
export declare type PaddingInline = keyof typeof paddingMap;
|
|
81
|
-
export declare type PaddingInlineStart = keyof typeof paddingMap;
|
|
82
|
-
export declare type PaddingInlineEnd = keyof typeof paddingMap;
|
|
83
|
-
export declare const textColorMap: {
|
|
84
|
-
readonly 'color.text': "var(--ds-text)";
|
|
85
|
-
readonly 'accent.red': "var(--ds-text-accent-red)";
|
|
86
|
-
readonly 'accent.red.bolder': "var(--ds-text-accent-red-bolder)";
|
|
87
|
-
readonly 'accent.orange': "var(--ds-text-accent-orange)";
|
|
88
|
-
readonly 'accent.orange.bolder': "var(--ds-text-accent-orange-bolder)";
|
|
89
|
-
readonly 'accent.yellow': "var(--ds-text-accent-yellow)";
|
|
90
|
-
readonly 'accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder)";
|
|
91
|
-
readonly 'accent.green': "var(--ds-text-accent-green)";
|
|
92
|
-
readonly 'accent.green.bolder': "var(--ds-text-accent-green-bolder)";
|
|
93
|
-
readonly 'accent.teal': "var(--ds-text-accent-teal)";
|
|
94
|
-
readonly 'accent.teal.bolder': "var(--ds-text-accent-teal-bolder)";
|
|
95
|
-
readonly 'accent.blue': "var(--ds-text-accent-blue)";
|
|
96
|
-
readonly 'accent.blue.bolder': "var(--ds-text-accent-blue-bolder)";
|
|
97
|
-
readonly 'accent.purple': "var(--ds-text-accent-purple)";
|
|
98
|
-
readonly 'accent.purple.bolder': "var(--ds-text-accent-purple-bolder)";
|
|
99
|
-
readonly 'accent.magenta': "var(--ds-text-accent-magenta)";
|
|
100
|
-
readonly 'accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder)";
|
|
101
|
-
readonly 'accent.gray': "var(--ds-text-accent-gray)";
|
|
102
|
-
readonly 'accent.gray.bolder': "var(--ds-text-accent-gray-bolder)";
|
|
103
|
-
readonly disabled: "var(--ds-text-disabled)";
|
|
104
|
-
readonly inverse: "var(--ds-text-inverse)";
|
|
105
|
-
readonly selected: "var(--ds-text-selected)";
|
|
106
|
-
readonly brand: "var(--ds-text-brand)";
|
|
107
|
-
readonly danger: "var(--ds-text-danger)";
|
|
108
|
-
readonly warning: "var(--ds-text-warning)";
|
|
109
|
-
readonly 'warning.inverse': "var(--ds-text-warning-inverse)";
|
|
110
|
-
readonly success: "var(--ds-text-success)";
|
|
111
|
-
readonly discovery: "var(--ds-text-discovery)";
|
|
112
|
-
readonly information: "var(--ds-text-information)";
|
|
113
|
-
readonly subtlest: "var(--ds-text-subtlest)";
|
|
114
|
-
readonly subtle: "var(--ds-text-subtle)";
|
|
115
|
-
};
|
|
116
|
-
export declare type TextColor = keyof typeof textColorMap;
|
|
117
|
-
export declare const dimensionMap: {
|
|
118
|
-
readonly '100%': "100%";
|
|
119
|
-
readonly 'size.100': "16px";
|
|
120
|
-
readonly 'size.200': "24px";
|
|
121
|
-
readonly 'size.300': "32px";
|
|
122
|
-
readonly 'size.400': "40px";
|
|
123
|
-
readonly 'size.500': "48px";
|
|
124
|
-
readonly 'size.600': "96px";
|
|
125
|
-
readonly 'size.1000': "192px";
|
|
126
|
-
};
|
|
127
|
-
export declare type Width = keyof typeof dimensionMap;
|
|
128
|
-
export declare type Height = keyof typeof dimensionMap;
|
|
129
|
-
export declare type MinWidth = keyof typeof dimensionMap;
|
|
130
|
-
export declare type MaxWidth = keyof typeof dimensionMap;
|
|
131
|
-
export declare type MinHeight = keyof typeof dimensionMap;
|
|
132
|
-
export declare type MaxHeight = keyof typeof dimensionMap;
|
|
133
|
-
export declare type TokenisedProps = {
|
|
134
|
-
backgroundColor?: BackgroundColor;
|
|
135
|
-
borderColor?: BorderColor;
|
|
136
|
-
borderWidth?: BorderWidth;
|
|
137
|
-
color?: TextColor;
|
|
138
|
-
height?: Height;
|
|
139
|
-
minHeight?: MinHeight;
|
|
140
|
-
minWidth?: MinWidth;
|
|
141
|
-
maxHeight?: MaxHeight;
|
|
142
|
-
maxWidth?: MaxWidth;
|
|
143
|
-
padding?: Padding;
|
|
144
|
-
paddingBlock?: Padding;
|
|
145
|
-
paddingInline?: Padding;
|
|
146
|
-
paddingBlockStart?: Padding;
|
|
147
|
-
paddingBlockEnd?: Padding;
|
|
148
|
-
paddingInlineStart?: Padding;
|
|
149
|
-
paddingInlineEnd?: Padding;
|
|
150
|
-
width?: Width;
|
|
151
|
-
};
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import prettier from 'prettier';
|
|
2
|
-
import parserTypeScript from 'prettier/parser-typescript';
|
|
3
|
-
|
|
4
|
-
// eslint-disable-next-line @atlassian/tangerine/import/entry-points
|
|
5
|
-
import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-light';
|
|
6
|
-
|
|
7
|
-
import { compose, isAccent, not, pick } from './utils';
|
|
8
|
-
|
|
9
|
-
type Token = {
|
|
10
|
-
token: string;
|
|
11
|
-
fallback: string;
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
const activeTokens = tokens
|
|
15
|
-
.filter(
|
|
16
|
-
t =>
|
|
17
|
-
t.attributes.state !== 'deleted' && t.attributes.state !== 'deprecated',
|
|
18
|
-
)
|
|
19
|
-
.map(
|
|
20
|
-
(t): Token => ({
|
|
21
|
-
token: t.name,
|
|
22
|
-
fallback: t.value as string,
|
|
23
|
-
}),
|
|
24
|
-
)
|
|
25
|
-
.filter(compose(pick('token'), not(isAccent)))
|
|
26
|
-
.filter(t => t.token.includes('background'))
|
|
27
|
-
.filter(t => t.token.includes('bold'))
|
|
28
|
-
// @ts-ignore
|
|
29
|
-
.map(t => ({ ...t, token: t.token.replaceAll('.[default]', '') }));
|
|
30
|
-
|
|
31
|
-
export const createColorMapTemplate = () => {
|
|
32
|
-
return prettier.format(
|
|
33
|
-
`
|
|
34
|
-
export default {
|
|
35
|
-
${activeTokens
|
|
36
|
-
.map(t => {
|
|
37
|
-
// handle the default case eg color.border or color.text
|
|
38
|
-
const propName = t.token.replace('color.background.', '');
|
|
39
|
-
return `'${propName}': '${
|
|
40
|
-
propName.includes('warning') ? 'warning.inverse' : 'inverse'
|
|
41
|
-
}'`;
|
|
42
|
-
})
|
|
43
|
-
.join(',\n\t')}
|
|
44
|
-
} as const;`,
|
|
45
|
-
{
|
|
46
|
-
singleQuote: true,
|
|
47
|
-
parser: 'typescript',
|
|
48
|
-
trailingComma: 'all',
|
|
49
|
-
plugins: [parserTypeScript],
|
|
50
|
-
},
|
|
51
|
-
);
|
|
52
|
-
};
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import prettier from 'prettier';
|
|
2
|
-
import parserTypeScript from 'prettier/parser-typescript';
|
|
3
|
-
|
|
4
|
-
import { capitalize } from './utils';
|
|
5
|
-
|
|
6
|
-
const dimensionProperties = {
|
|
7
|
-
width: {
|
|
8
|
-
cssProperty: 'width',
|
|
9
|
-
},
|
|
10
|
-
height: {
|
|
11
|
-
cssProperty: 'height',
|
|
12
|
-
},
|
|
13
|
-
minWidth: {
|
|
14
|
-
cssProperty: 'minWidth',
|
|
15
|
-
},
|
|
16
|
-
maxWidth: {
|
|
17
|
-
cssProperty: 'maxWidth',
|
|
18
|
-
},
|
|
19
|
-
minHeight: {
|
|
20
|
-
cssProperty: 'minHeight',
|
|
21
|
-
},
|
|
22
|
-
maxHeight: {
|
|
23
|
-
cssProperty: 'maxHeight',
|
|
24
|
-
},
|
|
25
|
-
} as const;
|
|
26
|
-
|
|
27
|
-
// placeholder adapted from packages/design-system/avatar/src/constants.ts
|
|
28
|
-
const dimensions = {
|
|
29
|
-
'size.100': '16px',
|
|
30
|
-
'size.200': '24px',
|
|
31
|
-
'size.300': '32px',
|
|
32
|
-
'size.400': '40px',
|
|
33
|
-
'size.500': '48px',
|
|
34
|
-
'size.600': '96px',
|
|
35
|
-
'size.1000': '192px',
|
|
36
|
-
'100%': '100%',
|
|
37
|
-
} as const;
|
|
38
|
-
|
|
39
|
-
const activeTokens = Object.entries(dimensions).map(([name, value]) => ({
|
|
40
|
-
name,
|
|
41
|
-
value,
|
|
42
|
-
}));
|
|
43
|
-
|
|
44
|
-
export const createDimensionStylesFromTemplate = (
|
|
45
|
-
spacingProperty: keyof typeof dimensionProperties,
|
|
46
|
-
) => {
|
|
47
|
-
if (!dimensionProperties[spacingProperty]) {
|
|
48
|
-
throw new Error(`[codegen] Unknown option found "${spacingProperty}"`);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
const { cssProperty } = dimensionProperties[spacingProperty];
|
|
52
|
-
|
|
53
|
-
return (
|
|
54
|
-
prettier.format(
|
|
55
|
-
`
|
|
56
|
-
const ${spacingProperty}Map = {
|
|
57
|
-
${activeTokens
|
|
58
|
-
.sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }))
|
|
59
|
-
.map(token => {
|
|
60
|
-
return `'${token.name}': css({ ${cssProperty}: '${token.value}' })`;
|
|
61
|
-
})
|
|
62
|
-
.join(',\n\t')}
|
|
63
|
-
} as const;`,
|
|
64
|
-
{
|
|
65
|
-
singleQuote: true,
|
|
66
|
-
trailingComma: 'all',
|
|
67
|
-
parser: 'typescript',
|
|
68
|
-
plugins: [parserTypeScript],
|
|
69
|
-
},
|
|
70
|
-
) +
|
|
71
|
-
`\nexport type ${capitalize(
|
|
72
|
-
spacingProperty,
|
|
73
|
-
)} = keyof typeof ${spacingProperty}Map;\n`
|
|
74
|
-
);
|
|
75
|
-
};
|