@volue/design-sizing 0.1.0-next.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.
Files changed (16) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/README.md +43 -0
  3. package/dist/index.common.d.ts +73 -0
  4. package/dist/index.common.js +72 -0
  5. package/dist/index.cssmodules.css +50 -0
  6. package/dist/index.custom-properties.css +57 -0
  7. package/dist/index.json +52 -0
  8. package/dist/index.map.scss +131 -0
  9. package/dist/index.module.d.ts +73 -0
  10. package/dist/index.module.js +72 -0
  11. package/dist/index.scss +54 -0
  12. package/package.json +45 -0
  13. package/src/base.json +63 -0
  14. package/src/borderRadius.json +24 -0
  15. package/src/control.json +72 -0
  16. package/src/spacing.json +27 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,5 @@
1
+ # Changelog
2
+
3
+ All notable changes to this project will be documented in this file. See [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for commit guidelines.
4
+
5
+ <!-- MONODEPLOY:BELOW -->
package/README.md ADDED
@@ -0,0 +1,43 @@
1
+ # `@volue/design-sizing`
2
+
3
+ Sizing primitives/tokens to be used across Volue's products
4
+
5
+ ## Installation
6
+
7
+ ```sh
8
+ npm install @volue/design-sizing --save
9
+ # or
10
+ yarn add @volue/design-sizing
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ ### JavaScript
16
+
17
+ In JavaScript, design token names are formatted in [lower camelCase](https://en.wikipedia.org/wiki/Camel_case).
18
+ Tokens are exported as nested object structure.
19
+
20
+ ```js
21
+ const tokens = require('@volue/design-sizing');
22
+ console.log(tokens.spacing.xs); // 0.25rem
23
+ ```
24
+
25
+ In JSON, design token names are formatted in [SNAKE_CASE](https://en.wikipedia.org/wiki/Snake_case).
26
+
27
+ ```js
28
+ const tokens = require('@volue/design-sizing/dist/index.json');
29
+ console.log(tokens['SIZE_SPACING_XS']); // 0.25rem
30
+ ```
31
+
32
+ ### Sass
33
+
34
+ Sass variables and map keys are formatted in [kebab-case](https://en.wikipedia.org/wiki/Kebab_case).
35
+
36
+ ```scss
37
+ // Using variables
38
+ @import '~@volue/design-sizing/dist/index';
39
+
40
+ div {
41
+ padding: $size-spacing-xs;
42
+ }
43
+ ```
package/dist/index.common.d.ts ADDED
@@ -0,0 +1,73 @@
1
+ export default tokens;
2
+ declare const tokens: {
3
+ "base": {
4
+ "4": "0.25rem",
5
+ "6": "0.375rem",
6
+ "8": "0.5rem",
7
+ "12": "0.75rem",
8
+ "16": "1rem",
9
+ "20": "1.25rem",
10
+ "24": "1.5rem",
11
+ "28": "1.75rem",
12
+ "32": "2rem",
13
+ "36": "2.25rem",
14
+ "40": "2.5rem",
15
+ "44": "2.75rem",
16
+ "48": "3rem",
17
+ "64": "4rem",
18
+ "72": "4.5rem",
19
+ "80": "5rem",
20
+ "96": "6rem",
21
+ "112": "7rem",
22
+ "128": "8rem"
23
+ },
24
+ "borderRadius": {
25
+ "xs": "0.25rem",
26
+ "s": "0.375rem",
27
+ "m": "0.5rem",
28
+ "l": "0.75rem",
29
+ "xl": "1rem",
30
+ "full": "100vh"
31
+ },
32
+ "control": {
33
+ "small": {
34
+ "height": "1.75rem",
35
+ "paddingInline": {
36
+ "condensed": "0.25rem",
37
+ "normal": "0.5rem",
38
+ "spacious": "0.75rem"
39
+ },
40
+ "gap": "0.25rem",
41
+ "borderRadius": "0.25rem"
42
+ },
43
+ "medium": {
44
+ "height": "2.5rem",
45
+ "paddingInline": {
46
+ "condensed": "0.5rem",
47
+ "normal": "0.75rem",
48
+ "spacious": "1rem"
49
+ },
50
+ "gap": "0.5rem",
51
+ "borderRadius": "0.375rem"
52
+ },
53
+ "large": {
54
+ "height": "3rem",
55
+ "paddingInline": {
56
+ "condensed": "0.5rem",
57
+ "normal": "0.75rem",
58
+ "spacious": "1rem"
59
+ },
60
+ "gap": "0.5rem",
61
+ "borderRadius": "0.5rem"
62
+ }
63
+ },
64
+ "spacing": {
65
+ "xs": "0.25rem",
66
+ "s": "0.5rem",
67
+ "m": "1rem",
68
+ "l": "1.5rem",
69
+ "xl": "2.25rem",
70
+ "xxl": "3rem",
71
+ "xxxl": "4.5rem"
72
+ }
73
+ };
package/dist/index.common.js ADDED
@@ -0,0 +1,72 @@
1
+ module.exports = {
2
+ "base": {
3
+ "4": "0.25rem",
4
+ "6": "0.375rem",
5
+ "8": "0.5rem",
6
+ "12": "0.75rem",
7
+ "16": "1rem",
8
+ "20": "1.25rem",
9
+ "24": "1.5rem",
10
+ "28": "1.75rem",
11
+ "32": "2rem",
12
+ "36": "2.25rem",
13
+ "40": "2.5rem",
14
+ "44": "2.75rem",
15
+ "48": "3rem",
16
+ "64": "4rem",
17
+ "72": "4.5rem",
18
+ "80": "5rem",
19
+ "96": "6rem",
20
+ "112": "7rem",
21
+ "128": "8rem"
22
+ },
23
+ "borderRadius": {
24
+ "xs": "0.25rem",
25
+ "s": "0.375rem",
26
+ "m": "0.5rem",
27
+ "l": "0.75rem",
28
+ "xl": "1rem",
29
+ "full": "100vh"
30
+ },
31
+ "control": {
32
+ "small": {
33
+ "height": "1.75rem",
34
+ "paddingInline": {
35
+ "condensed": "0.25rem",
36
+ "normal": "0.5rem",
37
+ "spacious": "0.75rem"
38
+ },
39
+ "gap": "0.25rem",
40
+ "borderRadius": "0.25rem"
41
+ },
42
+ "medium": {
43
+ "height": "2.5rem",
44
+ "paddingInline": {
45
+ "condensed": "0.5rem",
46
+ "normal": "0.75rem",
47
+ "spacious": "1rem"
48
+ },
49
+ "gap": "0.5rem",
50
+ "borderRadius": "0.375rem"
51
+ },
52
+ "large": {
53
+ "height": "3rem",
54
+ "paddingInline": {
55
+ "condensed": "0.5rem",
56
+ "normal": "0.75rem",
57
+ "spacious": "1rem"
58
+ },
59
+ "gap": "0.5rem",
60
+ "borderRadius": "0.5rem"
61
+ }
62
+ },
63
+ "spacing": {
64
+ "xs": "0.25rem",
65
+ "s": "0.5rem",
66
+ "m": "1rem",
67
+ "l": "1.5rem",
68
+ "xl": "2.25rem",
69
+ "xxl": "3rem",
70
+ "xxxl": "4.5rem"
71
+ }
72
+ }
package/dist/index.cssmodules.css ADDED
@@ -0,0 +1,50 @@
1
+ @value size-base-4: 0.25rem;
2
+ @value size-base-6: 0.375rem;
3
+ @value size-base-8: 0.5rem;
4
+ @value size-base-12: 0.75rem;
5
+ @value size-base-16: 1rem;
6
+ @value size-base-20: 1.25rem;
7
+ @value size-base-24: 1.5rem;
8
+ @value size-base-28: 1.75rem;
9
+ @value size-base-32: 2rem;
10
+ @value size-base-36: 2.25rem;
11
+ @value size-base-40: 2.5rem;
12
+ @value size-base-44: 2.75rem;
13
+ @value size-base-48: 3rem;
14
+ @value size-base-64: 4rem;
15
+ @value size-base-72: 4.5rem;
16
+ @value size-base-80: 5rem;
17
+ @value size-base-96: 6rem;
18
+ @value size-base-112: 7rem;
19
+ @value size-base-128: 8rem;
20
+ @value size-border-radius-xs: 0.25rem;
21
+ @value size-border-radius-s: 0.375rem;
22
+ @value size-border-radius-m: 0.5rem;
23
+ @value size-border-radius-l: 0.75rem;
24
+ @value size-border-radius-xl: 1rem;
25
+ @value size-border-radius-full: 100vh;
26
+ @value size-control-small-height: 1.75rem;
27
+ @value size-control-small-padding-inline-condensed: 0.25rem;
28
+ @value size-control-small-padding-inline-normal: 0.5rem;
29
+ @value size-control-small-padding-inline-spacious: 0.75rem;
30
+ @value size-control-small-gap: 0.25rem;
31
+ @value size-control-small-border-radius: 0.25rem;
32
+ @value size-control-medium-height: 2.5rem;
33
+ @value size-control-medium-padding-inline-condensed: 0.5rem;
34
+ @value size-control-medium-padding-inline-normal: 0.75rem;
35
+ @value size-control-medium-padding-inline-spacious: 1rem;
36
+ @value size-control-medium-gap: 0.5rem;
37
+ @value size-control-medium-border-radius: 0.375rem;
38
+ @value size-control-large-height: 3rem;
39
+ @value size-control-large-padding-inline-condensed: 0.5rem;
40
+ @value size-control-large-padding-inline-normal: 0.75rem;
41
+ @value size-control-large-padding-inline-spacious: 1rem;
42
+ @value size-control-large-gap: 0.5rem;
43
+ @value size-control-large-border-radius: 0.5rem;
44
+ @value size-spacing-xs: 0.25rem;
45
+ @value size-spacing-s: 0.5rem;
46
+ @value size-spacing-m: 1rem;
47
+ @value size-spacing-l: 1.5rem;
48
+ @value size-spacing-xl: 2.25rem;
49
+ @value size-spacing-xxl: 3rem;
50
+ @value size-spacing-xxxl: 4.5rem;
package/dist/index.custom-properties.css ADDED
@@ -0,0 +1,57 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon, 03 Apr 2023 08:11:39 GMT
4
+ */
5
+
6
+ :root {
7
+ --size-base-4: 0.25rem;
8
+ --size-base-6: 0.375rem;
9
+ --size-base-8: 0.5rem;
10
+ --size-base-12: 0.75rem;
11
+ --size-base-16: 1rem;
12
+ --size-base-20: 1.25rem;
13
+ --size-base-24: 1.5rem;
14
+ --size-base-28: 1.75rem;
15
+ --size-base-32: 2rem;
16
+ --size-base-36: 2.25rem;
17
+ --size-base-40: 2.5rem;
18
+ --size-base-44: 2.75rem;
19
+ --size-base-48: 3rem;
20
+ --size-base-64: 4rem;
21
+ --size-base-72: 4.5rem;
22
+ --size-base-80: 5rem;
23
+ --size-base-96: 6rem;
24
+ --size-base-112: 7rem;
25
+ --size-base-128: 8rem;
26
+ --size-border-radius-xs: 0.25rem;
27
+ --size-border-radius-s: 0.375rem;
28
+ --size-border-radius-m: 0.5rem;
29
+ --size-border-radius-l: 0.75rem;
30
+ --size-border-radius-xl: 1rem;
31
+ --size-border-radius-full: 100vh;
32
+ --size-control-small-height: 1.75rem;
33
+ --size-control-small-padding-inline-condensed: 0.25rem;
34
+ --size-control-small-padding-inline-normal: 0.5rem;
35
+ --size-control-small-padding-inline-spacious: 0.75rem;
36
+ --size-control-small-gap: 0.25rem;
37
+ --size-control-small-border-radius: 0.25rem;
38
+ --size-control-medium-height: 2.5rem;
39
+ --size-control-medium-padding-inline-condensed: 0.5rem;
40
+ --size-control-medium-padding-inline-normal: 0.75rem;
41
+ --size-control-medium-padding-inline-spacious: 1rem;
42
+ --size-control-medium-gap: 0.5rem;
43
+ --size-control-medium-border-radius: 0.375rem;
44
+ --size-control-large-height: 3rem;
45
+ --size-control-large-padding-inline-condensed: 0.5rem;
46
+ --size-control-large-padding-inline-normal: 0.75rem;
47
+ --size-control-large-padding-inline-spacious: 1rem;
48
+ --size-control-large-gap: 0.5rem;
49
+ --size-control-large-border-radius: 0.5rem;
50
+ --size-spacing-xs: 0.25rem;
51
+ --size-spacing-s: 0.5rem;
52
+ --size-spacing-m: 1rem;
53
+ --size-spacing-l: 1.5rem;
54
+ --size-spacing-xl: 2.25rem;
55
+ --size-spacing-xxl: 3rem;
56
+ --size-spacing-xxxl: 4.5rem;
57
+ }
package/dist/index.json ADDED
@@ -0,0 +1,52 @@
1
+ {
2
+ "SIZE_BASE_4": "0.25rem",
3
+ "SIZE_BASE_6": "0.375rem",
4
+ "SIZE_BASE_8": "0.5rem",
5
+ "SIZE_BASE_12": "0.75rem",
6
+ "SIZE_BASE_16": "1rem",
7
+ "SIZE_BASE_20": "1.25rem",
8
+ "SIZE_BASE_24": "1.5rem",
9
+ "SIZE_BASE_28": "1.75rem",
10
+ "SIZE_BASE_32": "2rem",
11
+ "SIZE_BASE_36": "2.25rem",
12
+ "SIZE_BASE_40": "2.5rem",
13
+ "SIZE_BASE_44": "2.75rem",
14
+ "SIZE_BASE_48": "3rem",
15
+ "SIZE_BASE_64": "4rem",
16
+ "SIZE_BASE_72": "4.5rem",
17
+ "SIZE_BASE_80": "5rem",
18
+ "SIZE_BASE_96": "6rem",
19
+ "SIZE_BASE_112": "7rem",
20
+ "SIZE_BASE_128": "8rem",
21
+ "SIZE_BORDER_RADIUS_XS": "0.25rem",
22
+ "SIZE_BORDER_RADIUS_S": "0.375rem",
23
+ "SIZE_BORDER_RADIUS_M": "0.5rem",
24
+ "SIZE_BORDER_RADIUS_L": "0.75rem",
25
+ "SIZE_BORDER_RADIUS_XL": "1rem",
26
+ "SIZE_BORDER_RADIUS_FULL": "100vh",
27
+ "SIZE_CONTROL_SMALL_HEIGHT": "1.75rem",
28
+ "SIZE_CONTROL_SMALL_PADDING_INLINE_CONDENSED": "0.25rem",
29
+ "SIZE_CONTROL_SMALL_PADDING_INLINE_NORMAL": "0.5rem",
30
+ "SIZE_CONTROL_SMALL_PADDING_INLINE_SPACIOUS": "0.75rem",
31
+ "SIZE_CONTROL_SMALL_GAP": "0.25rem",
32
+ "SIZE_CONTROL_SMALL_BORDER_RADIUS": "0.25rem",
33
+ "SIZE_CONTROL_MEDIUM_HEIGHT": "2.5rem",
34
+ "SIZE_CONTROL_MEDIUM_PADDING_INLINE_CONDENSED": "0.5rem",
35
+ "SIZE_CONTROL_MEDIUM_PADDING_INLINE_NORMAL": "0.75rem",
36
+ "SIZE_CONTROL_MEDIUM_PADDING_INLINE_SPACIOUS": "1rem",
37
+ "SIZE_CONTROL_MEDIUM_GAP": "0.5rem",
38
+ "SIZE_CONTROL_MEDIUM_BORDER_RADIUS": "0.375rem",
39
+ "SIZE_CONTROL_LARGE_HEIGHT": "3rem",
40
+ "SIZE_CONTROL_LARGE_PADDING_INLINE_CONDENSED": "0.5rem",
41
+ "SIZE_CONTROL_LARGE_PADDING_INLINE_NORMAL": "0.75rem",
42
+ "SIZE_CONTROL_LARGE_PADDING_INLINE_SPACIOUS": "1rem",
43
+ "SIZE_CONTROL_LARGE_GAP": "0.5rem",
44
+ "SIZE_CONTROL_LARGE_BORDER_RADIUS": "0.5rem",
45
+ "SIZE_SPACING_XS": "0.25rem",
46
+ "SIZE_SPACING_S": "0.5rem",
47
+ "SIZE_SPACING_M": "1rem",
48
+ "SIZE_SPACING_L": "1.5rem",
49
+ "SIZE_SPACING_XL": "2.25rem",
50
+ "SIZE_SPACING_XXL": "3rem",
51
+ "SIZE_SPACING_XXXL": "4.5rem"
52
+ }
package/dist/index.map.scss ADDED
@@ -0,0 +1,131 @@
1
+
2
+ /**
3
+ * Do not edit directly
4
+ * Generated on Mon, 03 Apr 2023 08:11:39 GMT
5
+ */
6
+
7
+ $size-base-4: 0.25rem !default;
8
+ $size-base-6: 0.375rem !default;
9
+ $size-base-8: 0.5rem !default;
10
+ $size-base-12: 0.75rem !default;
11
+ $size-base-16: 1rem !default;
12
+ $size-base-20: 1.25rem !default;
13
+ $size-base-24: 1.5rem !default;
14
+ $size-base-28: 1.75rem !default;
15
+ $size-base-32: 2rem !default;
16
+ $size-base-36: 2.25rem !default;
17
+ $size-base-40: 2.5rem !default;
18
+ $size-base-44: 2.75rem !default;
19
+ $size-base-48: 3rem !default;
20
+ $size-base-64: 4rem !default;
21
+ $size-base-72: 4.5rem !default;
22
+ $size-base-80: 5rem !default;
23
+ $size-base-96: 6rem !default;
24
+ $size-base-112: 7rem !default;
25
+ $size-base-128: 8rem !default;
26
+ $size-border-radius-xs: 0.25rem !default;
27
+ $size-border-radius-s: 0.375rem !default;
28
+ $size-border-radius-m: 0.5rem !default;
29
+ $size-border-radius-l: 0.75rem !default;
30
+ $size-border-radius-xl: 1rem !default;
31
+ $size-border-radius-full: 100vh !default;
32
+ $size-control-small-height: 1.75rem !default;
33
+ $size-control-small-padding-inline-condensed: 0.25rem !default;
34
+ $size-control-small-padding-inline-normal: 0.5rem !default;
35
+ $size-control-small-padding-inline-spacious: 0.75rem !default;
36
+ $size-control-small-gap: 0.25rem !default;
37
+ $size-control-small-border-radius: 0.25rem !default;
38
+ $size-control-medium-height: 2.5rem !default;
39
+ $size-control-medium-padding-inline-condensed: 0.5rem !default;
40
+ $size-control-medium-padding-inline-normal: 0.75rem !default;
41
+ $size-control-medium-padding-inline-spacious: 1rem !default;
42
+ $size-control-medium-gap: 0.5rem !default;
43
+ $size-control-medium-border-radius: 0.375rem !default;
44
+ $size-control-large-height: 3rem !default;
45
+ $size-control-large-padding-inline-condensed: 0.5rem !default;
46
+ $size-control-large-padding-inline-normal: 0.75rem !default;
47
+ $size-control-large-padding-inline-spacious: 1rem !default;
48
+ $size-control-large-gap: 0.5rem !default;
49
+ $size-control-large-border-radius: 0.5rem !default;
50
+ $size-spacing-xs: 0.25rem !default;
51
+ $size-spacing-s: 0.5rem !default;
52
+ $size-spacing-m: 1rem !default;
53
+ $size-spacing-l: 1.5rem !default;
54
+ $size-spacing-xl: 2.25rem !default;
55
+ $size-spacing-xxl: 3rem !default;
56
+ $size-spacing-xxxl: 4.5rem !default;
57
+
58
+ $sizing-map: (
59
+ 'size': (
60
+ 'base': (
61
+ '4': $size-base-4,
62
+ '6': $size-base-6,
63
+ '8': $size-base-8,
64
+ '12': $size-base-12,
65
+ '16': $size-base-16,
66
+ '20': $size-base-20,
67
+ '24': $size-base-24,
68
+ '28': $size-base-28,
69
+ '32': $size-base-32,
70
+ '36': $size-base-36,
71
+ '40': $size-base-40,
72
+ '44': $size-base-44,
73
+ '48': $size-base-48,
74
+ '64': $size-base-64,
75
+ '72': $size-base-72,
76
+ '80': $size-base-80,
77
+ '96': $size-base-96,
78
+ '112': $size-base-112,
79
+ '128': $size-base-128
80
+ ),
81
+ 'borderRadius': (
82
+ 'xs': $size-border-radius-xs,
83
+ 's': $size-border-radius-s,
84
+ 'm': $size-border-radius-m,
85
+ 'l': $size-border-radius-l,
86
+ 'xl': $size-border-radius-xl,
87
+ 'full': $size-border-radius-full
88
+ ),
89
+ 'control': (
90
+ 'small': (
91
+ 'height': $size-control-small-height,
92
+ 'paddingInline': (
93
+ 'condensed': $size-control-small-padding-inline-condensed,
94
+ 'normal': $size-control-small-padding-inline-normal,
95
+ 'spacious': $size-control-small-padding-inline-spacious
96
+ ),
97
+ 'gap': $size-control-small-gap,
98
+ 'borderRadius': $size-control-small-border-radius
99
+ ),
100
+ 'medium': (
101
+ 'height': $size-control-medium-height,
102
+ 'paddingInline': (
103
+ 'condensed': $size-control-medium-padding-inline-condensed,
104
+ 'normal': $size-control-medium-padding-inline-normal,
105
+ 'spacious': $size-control-medium-padding-inline-spacious
106
+ ),
107
+ 'gap': $size-control-medium-gap,
108
+ 'borderRadius': $size-control-medium-border-radius
109
+ ),
110
+ 'large': (
111
+ 'height': $size-control-large-height,
112
+ 'paddingInline': (
113
+ 'condensed': $size-control-large-padding-inline-condensed,
114
+ 'normal': $size-control-large-padding-inline-normal,
115
+ 'spacious': $size-control-large-padding-inline-spacious
116
+ ),
117
+ 'gap': $size-control-large-gap,
118
+ 'borderRadius': $size-control-large-border-radius
119
+ )
120
+ ),
121
+ 'spacing': (
122
+ 'xs': $size-spacing-xs,
123
+ 's': $size-spacing-s,
124
+ 'm': $size-spacing-m,
125
+ 'l': $size-spacing-l,
126
+ 'xl': $size-spacing-xl,
127
+ 'xxl': $size-spacing-xxl,
128
+ 'xxxl': $size-spacing-xxxl
129
+ )
130
+ )
131
+ );
package/dist/index.module.d.ts ADDED
@@ -0,0 +1,73 @@
1
+ export default tokens;
2
+ declare const tokens: {
3
+ "base": {
4
+ "4": "0.25rem",
5
+ "6": "0.375rem",
6
+ "8": "0.5rem",
7
+ "12": "0.75rem",
8
+ "16": "1rem",
9
+ "20": "1.25rem",
10
+ "24": "1.5rem",
11
+ "28": "1.75rem",
12
+ "32": "2rem",
13
+ "36": "2.25rem",
14
+ "40": "2.5rem",
15
+ "44": "2.75rem",
16
+ "48": "3rem",
17
+ "64": "4rem",
18
+ "72": "4.5rem",
19
+ "80": "5rem",
20
+ "96": "6rem",
21
+ "112": "7rem",
22
+ "128": "8rem"
23
+ },
24
+ "borderRadius": {
25
+ "xs": "0.25rem",
26
+ "s": "0.375rem",
27
+ "m": "0.5rem",
28
+ "l": "0.75rem",
29
+ "xl": "1rem",
30
+ "full": "100vh"
31
+ },
32
+ "control": {
33
+ "small": {
34
+ "height": "1.75rem",
35
+ "paddingInline": {
36
+ "condensed": "0.25rem",
37
+ "normal": "0.5rem",
38
+ "spacious": "0.75rem"
39
+ },
40
+ "gap": "0.25rem",
41
+ "borderRadius": "0.25rem"
42
+ },
43
+ "medium": {
44
+ "height": "2.5rem",
45
+ "paddingInline": {
46
+ "condensed": "0.5rem",
47
+ "normal": "0.75rem",
48
+ "spacious": "1rem"
49
+ },
50
+ "gap": "0.5rem",
51
+ "borderRadius": "0.375rem"
52
+ },
53
+ "large": {
54
+ "height": "3rem",
55
+ "paddingInline": {
56
+ "condensed": "0.5rem",
57
+ "normal": "0.75rem",
58
+ "spacious": "1rem"
59
+ },
60
+ "gap": "0.5rem",
61
+ "borderRadius": "0.5rem"
62
+ }
63
+ },
64
+ "spacing": {
65
+ "xs": "0.25rem",
66
+ "s": "0.5rem",
67
+ "m": "1rem",
68
+ "l": "1.5rem",
69
+ "xl": "2.25rem",
70
+ "xxl": "3rem",
71
+ "xxxl": "4.5rem"
72
+ }
73
+ };
package/dist/index.module.js ADDED
@@ -0,0 +1,72 @@
1
+ export default {
2
+ "base": {
3
+ "4": "0.25rem",
4
+ "6": "0.375rem",
5
+ "8": "0.5rem",
6
+ "12": "0.75rem",
7
+ "16": "1rem",
8
+ "20": "1.25rem",
9
+ "24": "1.5rem",
10
+ "28": "1.75rem",
11
+ "32": "2rem",
12
+ "36": "2.25rem",
13
+ "40": "2.5rem",
14
+ "44": "2.75rem",
15
+ "48": "3rem",
16
+ "64": "4rem",
17
+ "72": "4.5rem",
18
+ "80": "5rem",
19
+ "96": "6rem",
20
+ "112": "7rem",
21
+ "128": "8rem"
22
+ },
23
+ "borderRadius": {
24
+ "xs": "0.25rem",
25
+ "s": "0.375rem",
26
+ "m": "0.5rem",
27
+ "l": "0.75rem",
28
+ "xl": "1rem",
29
+ "full": "100vh"
30
+ },
31
+ "control": {
32
+ "small": {
33
+ "height": "1.75rem",
34
+ "paddingInline": {
35
+ "condensed": "0.25rem",
36
+ "normal": "0.5rem",
37
+ "spacious": "0.75rem"
38
+ },
39
+ "gap": "0.25rem",
40
+ "borderRadius": "0.25rem"
41
+ },
42
+ "medium": {
43
+ "height": "2.5rem",
44
+ "paddingInline": {
45
+ "condensed": "0.5rem",
46
+ "normal": "0.75rem",
47
+ "spacious": "1rem"
48
+ },
49
+ "gap": "0.5rem",
50
+ "borderRadius": "0.375rem"
51
+ },
52
+ "large": {
53
+ "height": "3rem",
54
+ "paddingInline": {
55
+ "condensed": "0.5rem",
56
+ "normal": "0.75rem",
57
+ "spacious": "1rem"
58
+ },
59
+ "gap": "0.5rem",
60
+ "borderRadius": "0.5rem"
61
+ }
62
+ },
63
+ "spacing": {
64
+ "xs": "0.25rem",
65
+ "s": "0.5rem",
66
+ "m": "1rem",
67
+ "l": "1.5rem",
68
+ "xl": "2.25rem",
69
+ "xxl": "3rem",
70
+ "xxxl": "4.5rem"
71
+ }
72
+ }
package/dist/index.scss ADDED
@@ -0,0 +1,54 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Mon, 03 Apr 2023 08:11:39 GMT
4
+
5
+ $size-base-4: 0.25rem;
6
+ $size-base-6: 0.375rem;
7
+ $size-base-8: 0.5rem;
8
+ $size-base-12: 0.75rem;
9
+ $size-base-16: 1rem;
10
+ $size-base-20: 1.25rem;
11
+ $size-base-24: 1.5rem;
12
+ $size-base-28: 1.75rem;
13
+ $size-base-32: 2rem;
14
+ $size-base-36: 2.25rem;
15
+ $size-base-40: 2.5rem;
16
+ $size-base-44: 2.75rem;
17
+ $size-base-48: 3rem;
18
+ $size-base-64: 4rem;
19
+ $size-base-72: 4.5rem;
20
+ $size-base-80: 5rem;
21
+ $size-base-96: 6rem;
22
+ $size-base-112: 7rem;
23
+ $size-base-128: 8rem;
24
+ $size-border-radius-xs: 0.25rem;
25
+ $size-border-radius-s: 0.375rem;
26
+ $size-border-radius-m: 0.5rem;
27
+ $size-border-radius-l: 0.75rem;
28
+ $size-border-radius-xl: 1rem;
29
+ $size-border-radius-full: 100vh;
30
+ $size-control-small-height: 1.75rem;
31
+ $size-control-small-padding-inline-condensed: 0.25rem;
32
+ $size-control-small-padding-inline-normal: 0.5rem;
33
+ $size-control-small-padding-inline-spacious: 0.75rem;
34
+ $size-control-small-gap: 0.25rem;
35
+ $size-control-small-border-radius: 0.25rem;
36
+ $size-control-medium-height: 2.5rem;
37
+ $size-control-medium-padding-inline-condensed: 0.5rem;
38
+ $size-control-medium-padding-inline-normal: 0.75rem;
39
+ $size-control-medium-padding-inline-spacious: 1rem;
40
+ $size-control-medium-gap: 0.5rem;
41
+ $size-control-medium-border-radius: 0.375rem;
42
+ $size-control-large-height: 3rem;
43
+ $size-control-large-padding-inline-condensed: 0.5rem;
44
+ $size-control-large-padding-inline-normal: 0.75rem;
45
+ $size-control-large-padding-inline-spacious: 1rem;
46
+ $size-control-large-gap: 0.5rem;
47
+ $size-control-large-border-radius: 0.5rem;
48
+ $size-spacing-xs: 0.25rem;
49
+ $size-spacing-s: 0.5rem;
50
+ $size-spacing-m: 1rem;
51
+ $size-spacing-l: 1.5rem;
52
+ $size-spacing-xl: 2.25rem;
53
+ $size-spacing-xxl: 3rem;
54
+ $size-spacing-xxxl: 4.5rem;
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@volue/design-sizing",
3
+ "version": "0.1.0-next.0",
4
+ "description": "Sizing primitives for Volue design primitives",
5
+ "license": "UNLICENSED",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/Volue/wave",
9
+ "directory": "design-primitives/design-sizing"
10
+ },
11
+ "publishConfig": {
12
+ "access": "public"
13
+ },
14
+ "main": "dist/index.common.js",
15
+ "module": "dist/index.module.js",
16
+ "types": "dist/index.common.d.ts",
17
+ "sideEffects": false,
18
+ "files": [
19
+ "dist",
20
+ "src"
21
+ ],
22
+ "scripts": {
23
+ "lint": "eslint . --cache",
24
+ "lint:fix": "yarn run lint --fix",
25
+ "_prettier": "prettier \"**/*.{json,md,mdx,yml,css}\" --ignore-path .eslintignore",
26
+ "format": "yarn run _prettier --write",
27
+ "test": "run-p lint \"_prettier --check\"",
28
+ "clean": "rimraf dist",
29
+ "build:tokens": "style-dictionary build",
30
+ "build": "yarn run clean && yarn run build:tokens",
31
+ "prepack": "yarn run build"
32
+ },
33
+ "devDependencies": {
34
+ "eslint": "8.36.0",
35
+ "eslint-config-powel": "14.2.1",
36
+ "eslint-import-resolver-node": "0.3.7",
37
+ "eslint-plugin-import": "2.27.5",
38
+ "map-obj": "4.3.0",
39
+ "npm-run-all": "4.1.5",
40
+ "prettier": "2.8.6",
41
+ "rimraf": "3.0.2",
42
+ "style-dictionary": "3.7.3-rc.1",
43
+ "typescript": "4.9.5"
44
+ }
45
+ }
package/src/base.json ADDED
@@ -0,0 +1,63 @@
1
+ {
2
+ "size": {
3
+ "base": {
4
+ "4": {
5
+ "value": "4px"
6
+ },
7
+ "6": {
8
+ "value": "6px"
9
+ },
10
+ "8": {
11
+ "value": "8px"
12
+ },
13
+ "12": {
14
+ "value": "12px"
15
+ },
16
+ "16": {
17
+ "value": "16px"
18
+ },
19
+ "20": {
20
+ "value": "20px"
21
+ },
22
+ "24": {
23
+ "value": "24px"
24
+ },
25
+ "28": {
26
+ "value": "28px"
27
+ },
28
+ "32": {
29
+ "value": "32px"
30
+ },
31
+ "36": {
32
+ "value": "36px"
33
+ },
34
+ "40": {
35
+ "value": "40px"
36
+ },
37
+ "44": {
38
+ "value": "44px"
39
+ },
40
+ "48": {
41
+ "value": "48px"
42
+ },
43
+ "64": {
44
+ "value": "64px"
45
+ },
46
+ "72": {
47
+ "value": "72px"
48
+ },
49
+ "80": {
50
+ "value": "80px"
51
+ },
52
+ "96": {
53
+ "value": "96px"
54
+ },
55
+ "112": {
56
+ "value": "112px"
57
+ },
58
+ "128": {
59
+ "value": "128px"
60
+ }
61
+ }
62
+ }
63
+ }
package/src/borderRadius.json ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ "size": {
3
+ "borderRadius": {
4
+ "xs": {
5
+ "value": "{size.base.4}"
6
+ },
7
+ "s": {
8
+ "value": "{size.base.6}"
9
+ },
10
+ "m": {
11
+ "value": "{size.base.8}"
12
+ },
13
+ "l": {
14
+ "value": "{size.base.12}"
15
+ },
16
+ "xl": {
17
+ "value": "{size.base.16}"
18
+ },
19
+ "full": {
20
+ "value": "100vh"
21
+ }
22
+ }
23
+ }
24
+ }
package/src/control.json ADDED
@@ -0,0 +1,72 @@
1
+ {
2
+ "size": {
3
+ "control": {
4
+ "small": {
5
+ "height": {
6
+ "value": "{size.base.28}"
7
+ },
8
+ "paddingInline": {
9
+ "condensed": {
10
+ "value": "{size.base.4}"
11
+ },
12
+ "normal": {
13
+ "value": "{size.base.8}"
14
+ },
15
+ "spacious": {
16
+ "value": "{size.base.12}"
17
+ }
18
+ },
19
+ "gap": {
20
+ "value": "{size.spacing.xs}"
21
+ },
22
+ "borderRadius": {
23
+ "value": "{size.borderRadius.xs}"
24
+ }
25
+ },
26
+ "medium": {
27
+ "height": {
28
+ "value": "{size.base.40}"
29
+ },
30
+ "paddingInline": {
31
+ "condensed": {
32
+ "value": "{size.base.8}"
33
+ },
34
+ "normal": {
35
+ "value": "{size.base.12}"
36
+ },
37
+ "spacious": {
38
+ "value": "{size.base.16}"
39
+ }
40
+ },
41
+ "gap": {
42
+ "value": "{size.spacing.s}"
43
+ },
44
+ "borderRadius": {
45
+ "value": "{size.borderRadius.s}"
46
+ }
47
+ },
48
+ "large": {
49
+ "height": {
50
+ "value": "{size.base.48}"
51
+ },
52
+ "paddingInline": {
53
+ "condensed": {
54
+ "value": "{size.base.8}"
55
+ },
56
+ "normal": {
57
+ "value": "{size.base.12}"
58
+ },
59
+ "spacious": {
60
+ "value": "{size.base.16}"
61
+ }
62
+ },
63
+ "gap": {
64
+ "value": "{size.spacing.s}"
65
+ },
66
+ "borderRadius": {
67
+ "value": "{size.borderRadius.m}"
68
+ }
69
+ }
70
+ }
71
+ }
72
+ }
package/src/spacing.json ADDED
@@ -0,0 +1,27 @@
1
+ {
2
+ "size": {
3
+ "spacing": {
4
+ "xs": {
5
+ "value": "{size.base.4}"
6
+ },
7
+ "s": {
8
+ "value": "{size.base.8}"
9
+ },
10
+ "m": {
11
+ "value": "{size.base.16}"
12
+ },
13
+ "l": {
14
+ "value": "{size.base.24}"
15
+ },
16
+ "xl": {
17
+ "value": "{size.base.36}"
18
+ },
19
+ "xxl": {
20
+ "value": "{size.base.48}"
21
+ },
22
+ "xxxl": {
23
+ "value": "{size.base.72}"
24
+ }
25
+ }
26
+ }
27
+ }