@cregis/tokens 1.0.1 → 1.0.3

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 (19) hide show
  1. package/package.json +1 -1
  2. package/src/web/index.css +2 -1
  3. package/src/web/motion/index.css +1 -0
  4. package/src/web/motion/motion.css +7 -0
  5. package/src/web/size/base.css +39 -33
  6. package/src/web/size/blur.css +3 -3
  7. package/src/web/size/control.css +15 -0
  8. package/src/web/size/depth.css +3 -3
  9. package/src/web/size/icon.css +4 -5
  10. package/src/web/size/index.css +7 -6
  11. package/src/web/size/radius.css +3 -5
  12. package/src/web/size/spacing.css +4 -3
  13. package/src/web/typography/combination.css +94 -30
  14. package/src/web/typography/font-family.css +1 -2
  15. package/src/web/typography/font-size.css +19 -8
  16. package/src/web/typography/font-weight.css +3 -3
  17. package/src/web/typography/index.css +7 -5
  18. package/src/web/typography/line-height.css +19 -8
  19. package/src/web/typography/typography.css +62 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cregis/tokens",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "Design tokens for frontend projects",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/src/web/index.css CHANGED
@@ -1,4 +1,5 @@
1
- @import "./theme/default.css";
1
+ @import "./theme.css";
2
2
  @import "./color-definition.css";
3
3
  @import "./size/index.css";
4
+ @import "./motion/index.css";
4
5
  @import "./typography/index.css";
package/src/web/motion/index.css ADDED
@@ -0,0 +1 @@
1
+ @import "./motion.css";
package/src/web/motion/motion.css ADDED
@@ -0,0 +1,7 @@
1
+ :root {
2
+ --eds-motion-hover-duration: 0.35s;
3
+ --eds-motion-control-duration: 0.5s;
4
+ --eds-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
5
+ --eds-motion-ease-in-out: var(--eds-motion-ease-standard);
6
+ --eds-hover-transition-duration: var(--eds-motion-hover-duration);
7
+ }
package/src/web/size/base.css CHANGED
@@ -1,37 +1,43 @@
1
1
  :root {
2
- --scale-0: 0px;
3
- --scale-025: 1px;
4
- --scale-05: 2px;
5
- --scale-1: 4px;
6
- --scale-1-5: 6px;
7
- --scale-2: 8px;
8
- --scale-2-5: 10px;
9
- --scale-3: 12px;
10
- --scale-4: 16px;
11
- --scale-5: 20px;
12
- --scale-6: 24px;
13
- --scale-7: 28px;
14
- --scale-8: 32px;
15
- --scale-9: 36px;
16
- --scale-10: 40px;
17
- --scale-11: 44px;
18
- --scale-12: 48px;
19
- --scale-13: 52px;
20
- --scale-14: 56px;
21
- --scale-15: 60px;
22
- --scale-16: 64px;
23
- --scale-17: 68px;
24
- --scale-18: 72px;
25
- --scale-19: 76px;
26
- --scale-20: 80px;
27
- --scale-30: 120px;
28
- --scale-40: 160px;
29
- --scale-50: 200px;
2
+ --scale-base: 8px;
3
+ --scale-0: calc(0 * var(--scale-base));
4
+ --scale-05: calc(0.5 * var(--scale-base));
5
+ --scale-0-75: calc(0.75 * var(--scale-base));
6
+ --scale-1: calc(1 * var(--scale-base));
7
+ --scale-1-5: calc(1.5 * var(--scale-base));
8
+ --scale-2: calc(2 * var(--scale-base));
9
+ --scale-2-5: calc(2.5 * var(--scale-base));
10
+ --scale-3: calc(3 * var(--scale-base));
11
+ --scale-4: calc(4 * var(--scale-base));
12
+ --scale-4-5: calc(4.5 * var(--scale-base));
13
+ --scale-5: calc(5 * var(--scale-base));
14
+ --scale-5-5: calc(5.5 * var(--scale-base));
15
+ --scale-6: calc(6 * var(--scale-base));
16
+ --scale-6-5: calc(6.5 * var(--scale-base));
17
+ --scale-7: calc(7 * var(--scale-base));
18
+ --scale-7-5: calc(7.5 * var(--scale-base));
19
+ --scale-8: calc(8 * var(--scale-base));
20
+ --scale-9: calc(9 * var(--scale-base));
21
+ --scale-10: calc(10 * var(--scale-base));
22
+ --scale-11: calc(11 * var(--scale-base));
23
+ --scale-12: calc(12 * var(--scale-base));
24
+ --scale-13: calc(13 * var(--scale-base));
25
+ --scale-14: calc(14 * var(--scale-base));
26
+ --scale-15: calc(15 * var(--scale-base));
27
+ --scale-16: calc(16 * var(--scale-base));
28
+ --scale-17: calc(17 * var(--scale-base));
29
+ --scale-18: calc(18 * var(--scale-base));
30
+ --scale-19: calc(19 * var(--scale-base));
31
+ --scale-20: calc(20 * var(--scale-base));
32
+ --scale-30: calc(30 * var(--scale-base));
33
+ --scale-40: calc(40 * var(--scale-base));
34
+ --scale-50: calc(50 * var(--scale-base));
30
35
  --scale-full: 888px;
31
36
 
32
- --stroke-xl: 2;
33
- --stroke-lg: 1.4;
34
- --stroke-md: 1.1;
35
- --stroke-sm: 1;
36
- --stroke-xs: 0.5;
37
+ --stroke-xs: 0.5px;
38
+ --stroke-sm: 1px;
39
+ --stroke-md: 1.5px;
40
+ --stroke-lg: 2px;
41
+
42
+ --corner-smoothing: 0.6;
37
43
  }
package/src/web/size/blur.css CHANGED
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --blur-shallow: var(--scale-20);
3
- --blur-deep: var(--scale-12);
4
- --blur-subtle: var(--scale-4);
2
+ --blur-subtle: var(--scale-2);
3
+ --blur-shallow: var(--scale-6);
4
+ --blur-deep: var(--scale-10);
5
5
  }
package/src/web/size/control.css ADDED
@@ -0,0 +1,15 @@
1
+ :root {
2
+ --control-button-xs: var(--scale-4);
3
+ --control-button-sm: var(--scale-5);
4
+ --control-button-md: var(--scale-6);
5
+ --control-button-lg: var(--scale-7);
6
+ --control-button-xl: var(--scale-7-5);
7
+ --control-icon-xs: var(--scale-4-5);
8
+ --control-icon-sm: var(--scale-5);
9
+ --control-icon-md: var(--scale-6);
10
+ --control-icon-lg: var(--scale-6-5);
11
+ --control-icon-xl: var(--scale-7);
12
+ --control-input-sm: var(--scale-4-5);
13
+ --control-input-md: var(--scale-5-5);
14
+ --control-input-lg: var(--scale-6-5);
15
+ }
package/src/web/size/depth.css CHANGED
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --depth-shallow: var(--scale-6);
3
- --depth-deep: var(--scale-2);
4
- --depth-subtle: var(--scale-1-5);
2
+ --depth-subtle: var(--scale-05);
3
+ --depth-shallow: var(--scale-1);
4
+ --depth-deep: var(--scale-3);
5
5
  }
package/src/web/size/icon.css CHANGED
@@ -1,7 +1,6 @@
1
1
  :root {
2
- --icon-root: var(--scale-8);
3
- --icon-xl: var(--scale-6);
4
- --icon-lg: var(--scale-5);
5
- --icon-md: var(--scale-4);
6
- --icon-sm: var(--scale-3);
2
+ --icon-sm: var(--scale-1-5);
3
+ --icon-md: var(--scale-2);
4
+ --icon-lg: var(--scale-2-5);
5
+ --icon-xl: var(--scale-3);
7
6
  }
package/src/web/size/index.css CHANGED
@@ -1,6 +1,7 @@
1
- @import './base.css';
2
- @import './spacing.css';
3
- @import './radius.css';
4
- @import './blur.css';
5
- @import './depth.css';
6
- @import './icon.css';
1
+ @import "./base.css";
2
+ @import "./spacing.css";
3
+ @import "./radius.css";
4
+ @import "./blur.css";
5
+ @import "./depth.css";
6
+ @import "./icon.css";
7
+ @import "./control.css";
package/src/web/size/radius.css CHANGED
@@ -1,9 +1,7 @@
1
1
  :root {
2
2
  --radius-0: var(--scale-0);
3
- --radius-xs: var(--scale-1);
4
- --radius-sm: var(--scale-2);
5
- --radius-md: var(--scale-3);
6
- --radius-lg: var(--scale-4);
7
- --radius-frame: var(--scale-8);
3
+ --radius-sm: var(--scale-0-75);
4
+ --radius-md: var(--scale-2);
5
+ --radius-lg: var(--scale-3);
8
6
  --radius-full: var(--scale-full);
9
7
  }
package/src/web/size/spacing.css CHANGED
@@ -1,7 +1,6 @@
1
1
  :root {
2
2
  --spacing-0: var(--scale-0);
3
- --spacing-025: var(--scale-025);
4
- --spacing-0-5: var(--scale-05);
3
+ --spacing-05: var(--scale-05);
5
4
  --spacing-1: var(--scale-1);
6
5
  --spacing-1-5: var(--scale-1-5);
7
6
  --spacing-2: var(--scale-2);
@@ -14,10 +13,12 @@
14
13
  --spacing-8: var(--scale-8);
15
14
  --spacing-9: var(--scale-9);
16
15
  --spacing-10: var(--scale-10);
17
- --spacing-11: var(--scale-11);
18
16
  --spacing-12: var(--scale-12);
19
17
  --spacing-14: var(--scale-14);
20
18
  --spacing-16: var(--scale-16);
21
19
  --spacing-18: var(--scale-18);
22
20
  --spacing-20: var(--scale-20);
21
+ --spacing-30: var(--scale-30);
22
+ --spacing-40: var(--scale-40);
23
+ --spacing-50: var(--scale-50);
23
24
  }
package/src/web/typography/combination.css CHANGED
@@ -1,31 +1,95 @@
1
- :root {
2
- --display-size: var(--font-size-4xl);
3
- --display-line-height: var(--line-height-4xl);
4
- --display-font-weight: var(--font-weight-bold);
5
-
6
- --headline-size: var(--font-size-3xl);
7
- --headline-line-height: var(--line-height-3xl);
8
- --headline-font-weight: var(--font-weight-bold);
9
-
10
- --title-size: var(--font-size-2xl);
11
- --title-line-height: var(--line-height-2xl);
12
- --title-font-weight: var(--font-weight-bold);
13
-
14
- --body-size-large: var(--font-size-xl);
15
- --body-size-medium: var(--font-size-lg);
16
- --body-size-small: var(--font-size-md);
17
- --body-line-height-large: var(--line-height-xl);
18
- --body-line-height-medium: var(--line-height-lg);
19
- --body-line-height-small: var(--line-height-md);
20
- --body-font-weight: var(--font-weight-regular);
21
- --body-font-weight-bold: var(--font-weight-medium);
22
-
23
- --footnote-size: var(--font-size-sm);
24
- --footnote-line-height: var(--line-height-sm);
25
- --footnote-font-weight: var(--font-weight-regular);
26
- --footnote-font-weight-strong: var(--font-weight-medium);
27
-
28
- --bar-size: var(--font-size-xs);
29
- --bar-line-height: var(--line-height-xs);
30
- --bar-font-weight: var(--font-weight-medium);
1
+ .typography-display-large {
2
+ font-size: var(--typography-display-large-size);
3
+ font-weight: var(--typography-display-large-weight);
4
+ line-height: var(--typography-display-large-line-height);
5
+ }
6
+ .typography-display-medium {
7
+ font-size: var(--typography-display-medium-size);
8
+ font-weight: var(--typography-display-medium-weight);
9
+ line-height: var(--typography-display-medium-line-height);
10
+ }
11
+ .typography-display-small {
12
+ font-size: var(--typography-display-small-size);
13
+ font-weight: var(--typography-display-small-weight);
14
+ line-height: var(--typography-display-small-line-height);
15
+ }
16
+ .typography-headline-large {
17
+ font-size: var(--typography-headline-large-size);
18
+ font-weight: var(--typography-headline-large-weight);
19
+ line-height: var(--typography-headline-large-line-height);
20
+ }
21
+ .typography-headline-medium {
22
+ font-size: var(--typography-headline-medium-size);
23
+ font-weight: var(--typography-headline-medium-weight);
24
+ line-height: var(--typography-headline-medium-line-height);
25
+ }
26
+ .typography-headline-small {
27
+ font-size: var(--typography-headline-small-size);
28
+ font-weight: var(--typography-headline-small-weight);
29
+ line-height: var(--typography-headline-small-line-height);
30
+ }
31
+ .typography-title-large {
32
+ font-size: var(--typography-title-large-size);
33
+ font-weight: var(--typography-title-large-weight);
34
+ line-height: var(--typography-title-large-line-height);
35
+ }
36
+ .typography-title-medium {
37
+ font-size: var(--typography-title-medium-size);
38
+ font-weight: var(--typography-title-medium-weight);
39
+ line-height: var(--typography-title-medium-line-height);
40
+ }
41
+ .typography-title-small {
42
+ font-size: var(--typography-title-small-size);
43
+ font-weight: var(--typography-title-small-weight);
44
+ line-height: var(--typography-title-small-line-height);
45
+ }
46
+ .typography-body-large {
47
+ font-size: var(--typography-body-large-size);
48
+ font-weight: var(--typography-body-large-weight);
49
+ line-height: var(--typography-body-large-line-height);
50
+ }
51
+ .typography-body-large-strong {
52
+ font-size: var(--typography-body-large-strong-size);
53
+ font-weight: var(--typography-body-large-strong-weight);
54
+ line-height: var(--typography-body-large-strong-line-height);
55
+ }
56
+ .typography-body-medium {
57
+ font-size: var(--typography-body-medium-size);
58
+ font-weight: var(--typography-body-medium-weight);
59
+ line-height: var(--typography-body-medium-line-height);
60
+ }
61
+ .typography-body-medium-strong {
62
+ font-size: var(--typography-body-medium-strong-size);
63
+ font-weight: var(--typography-body-medium-strong-weight);
64
+ line-height: var(--typography-body-medium-strong-line-height);
65
+ }
66
+ .typography-body-small {
67
+ font-size: var(--typography-body-small-size);
68
+ font-weight: var(--typography-body-small-weight);
69
+ line-height: var(--typography-body-small-line-height);
70
+ }
71
+ .typography-body-small-strong {
72
+ font-size: var(--typography-body-small-strong-size);
73
+ font-weight: var(--typography-body-small-strong-weight);
74
+ line-height: var(--typography-body-small-strong-line-height);
75
+ }
76
+ .typography-footnote-large {
77
+ font-size: var(--typography-footnote-large-size);
78
+ font-weight: var(--typography-footnote-large-weight);
79
+ line-height: var(--typography-footnote-large-line-height);
80
+ }
81
+ .typography-footnote-large-strong {
82
+ font-size: var(--typography-footnote-large-strong-size);
83
+ font-weight: var(--typography-footnote-large-strong-weight);
84
+ line-height: var(--typography-footnote-large-strong-line-height);
85
+ }
86
+ .typography-footnote-medium {
87
+ font-size: var(--typography-footnote-medium-size);
88
+ font-weight: var(--typography-footnote-medium-weight);
89
+ line-height: var(--typography-footnote-medium-line-height);
90
+ }
91
+ .typography-footnote-medium-strong {
92
+ font-size: var(--typography-footnote-medium-strong-size);
93
+ font-weight: var(--typography-footnote-medium-strong-weight);
94
+ line-height: var(--typography-footnote-medium-strong-line-height);
31
95
  }
package/src/web/typography/font-family.css CHANGED
@@ -1,4 +1,3 @@
1
1
  :root {
2
- --eds-family-sans: "Cregis Display Sans", "PingFang SC", SourceHanSansSC-VF,
3
- "Apple Color Emoji", "Segoe UI Emoji"
2
+ --font-family-text: "EDS Text", "PingFang SC", "SourceHanSansSC", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
4
3
  }
package/src/web/typography/font-size.css CHANGED
@@ -1,10 +1,21 @@
1
1
  :root {
2
- --font-size-4xl: 40px;
3
- --font-size-3xl: 25px;
4
- --font-size-2xl: 21px;
5
- --font-size-xl: 17px;
6
- --font-size-lg: 15px;
7
- --font-size-md: 13px;
8
- --font-size-sm: 12px;
9
- --font-size-xs: 11px;
2
+ --size-display-large: 88px;
3
+ --size-display-medium: 80px;
4
+ --size-display-small: 72px;
5
+ --size-headline-large: 64px;
6
+ --size-headline-medium: 56px;
7
+ --size-headline-small: 48px;
8
+ --size-title-large: 40px;
9
+ --size-title-medium: 32px;
10
+ --size-title-small: 24px;
11
+ --size-body-large: 20px;
12
+ --size-body-large-strong: 20px;
13
+ --size-body-medium: 18px;
14
+ --size-body-medium-strong: 18px;
15
+ --size-body-small: 16px;
16
+ --size-body-small-strong: 16px;
17
+ --size-footnote-large: 14px;
18
+ --size-footnote-large-strong: 14px;
19
+ --size-footnote-medium: 12px;
20
+ --size-footnote-medium-strong: 12px;
10
21
  }
package/src/web/typography/font-weight.css CHANGED
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --font-weight-regular: 400;
3
- --font-weight-medium: 500;
4
- --font-weight-bold: 700;
2
+ --weight-regular: 400;
3
+ --weight-medium: 500;
4
+ --weight-bold: 700;
5
5
  }
package/src/web/typography/index.css CHANGED
@@ -1,5 +1,7 @@
1
- @import './font-size.css';
2
- @import './font-weight.css';
3
- @import './line-height.css';
4
- @import './font-family.css';
5
- @import './combination.css';
1
+ @import "./font-size.css";
2
+ @import "./font-weight.css";
3
+ @import "./line-height.css";
4
+ @import "./font-family.css";
5
+ @import "./typography.css";
6
+
7
+ @import "./combination.css";
package/src/web/typography/line-height.css CHANGED
@@ -1,10 +1,21 @@
1
1
  :root {
2
- --line-height-4xl: 48px;
3
- --line-height-3xl: 32px;
4
- --line-height-2xl: 28px;
5
- --line-height-xl: 24px;
6
- --line-height-lg: 22px;
7
- --line-height-md: 18px;
8
- --line-height-sm: 16px;
9
- --line-height-xs: 14px;
2
+ --line-height-display-large: 110px;
3
+ --line-height-display-medium: 100px;
4
+ --line-height-display-small: 90px;
5
+ --line-height-headline-large: 80px;
6
+ --line-height-headline-medium: 70px;
7
+ --line-height-headline-small: 60px;
8
+ --line-height-title-large: 50px;
9
+ --line-height-title-medium: 40px;
10
+ --line-height-title-small: 30px;
11
+ --line-height-body-large: 26px;
12
+ --line-height-body-large-strong: 26px;
13
+ --line-height-body-medium: 24px;
14
+ --line-height-body-medium-strong: 24px;
15
+ --line-height-body-small: 20px;
16
+ --line-height-body-small-strong: 20px;
17
+ --line-height-footnote-large: 18px;
18
+ --line-height-footnote-large-strong: 18px;
19
+ --line-height-footnote-medium: 16px;
20
+ --line-height-footnote-medium-strong: 16px;
10
21
  }
package/src/web/typography/typography.css ADDED
@@ -0,0 +1,62 @@
1
+ :root {
2
+ --typography-display-large-size: var(--size-display-large);
3
+ --typography-display-large-weight: var(--weight-bold);
4
+ --typography-display-large-line-height: var(--line-height-display-large);
5
+ --typography-display-medium-size: var(--size-display-medium);
6
+ --typography-display-medium-weight: var(--weight-bold);
7
+ --typography-display-medium-line-height: var(--line-height-display-medium);
8
+ --typography-display-small-size: var(--size-display-small);
9
+ --typography-display-small-weight: var(--weight-bold);
10
+ --typography-display-small-line-height: var(--line-height-display-small);
11
+ --typography-headline-large-size: var(--size-headline-large);
12
+ --typography-headline-large-weight: var(--weight-bold);
13
+ --typography-headline-large-line-height: var(--line-height-headline-large);
14
+ --typography-headline-medium-size: var(--size-headline-medium);
15
+ --typography-headline-medium-weight: var(--weight-bold);
16
+ --typography-headline-medium-line-height: var(--line-height-headline-medium);
17
+ --typography-headline-small-size: var(--size-headline-small);
18
+ --typography-headline-small-weight: var(--weight-bold);
19
+ --typography-headline-small-line-height: var(--line-height-headline-small);
20
+ --typography-title-large-size: var(--size-title-large);
21
+ --typography-title-large-weight: var(--weight-bold);
22
+ --typography-title-large-line-height: var(--line-height-title-large);
23
+ --typography-title-medium-size: var(--size-title-medium);
24
+ --typography-title-medium-weight: var(--weight-bold);
25
+ --typography-title-medium-line-height: var(--line-height-title-medium);
26
+ --typography-title-small-size: var(--size-title-small);
27
+ --typography-title-small-weight: var(--weight-bold);
28
+ --typography-title-small-line-height: var(--line-height-title-small);
29
+ --typography-body-large-size: var(--size-body-large);
30
+ --typography-body-large-weight: var(--weight-regular);
31
+ --typography-body-large-line-height: var(--line-height-body-large);
32
+ --typography-body-large-strong-size: var(--size-body-large-strong);
33
+ --typography-body-large-strong-weight: var(--weight-medium);
34
+ --typography-body-large-strong-line-height: var(--line-height-body-large-strong);
35
+ --typography-body-medium-size: var(--size-body-medium);
36
+ --typography-body-medium-weight: var(--weight-regular);
37
+ --typography-body-medium-line-height: var(--line-height-body-medium);
38
+ --typography-body-medium-strong-size: var(--size-body-medium-strong);
39
+ --typography-body-medium-strong-weight: var(--weight-medium);
40
+ --typography-body-medium-strong-line-height: var(--line-height-body-medium-strong);
41
+ --typography-body-small-size: var(--size-body-small);
42
+ --typography-body-small-weight: var(--weight-regular);
43
+ --typography-body-small-line-height: var(--line-height-body-small);
44
+ --typography-body-small-strong-size: var(--size-body-small-strong);
45
+ --typography-body-small-strong-weight: var(--weight-medium);
46
+ --typography-body-small-strong-line-height: var(--line-height-body-small-strong);
47
+ --typography-footnote-large-size: var(--size-footnote-large);
48
+ --typography-footnote-large-weight: var(--weight-regular);
49
+ --typography-footnote-large-line-height: var(--line-height-footnote-large);
50
+ --typography-footnote-large-strong-size: var(--size-footnote-large-strong);
51
+ --typography-footnote-large-strong-weight: var(--weight-medium);
52
+ --typography-footnote-large-strong-line-height: var(--line-height-footnote-large-strong);
53
+ --typography-footnote-medium-size: var(--size-footnote-medium);
54
+ --typography-footnote-medium-weight: var(--weight-regular);
55
+ --typography-footnote-medium-line-height: var(--line-height-footnote-medium);
56
+ --typography-footnote-medium-strong-size: var(--size-footnote-medium-strong);
57
+ --typography-footnote-medium-strong-weight: var(--weight-medium);
58
+ --typography-footnote-medium-strong-line-height: var(--line-height-footnote-medium-strong);
59
+ --typography-footnote-strong-size: var(--typography-footnote-medium-strong-size);
60
+ --typography-footnote-strong-weight: var(--typography-footnote-medium-strong-weight);
61
+ --typography-footnote-strong-line-height: var(--typography-footnote-medium-strong-line-height);
62
+ }