@cregis/tokens 1.0.2 → 1.0.4

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 (22) hide show
  1. package/package.json +1 -1
  2. package/src/desktop/color-definition.css +148 -148
  3. package/src/mobile/color-definition.css +148 -148
  4. package/src/web/color-definition.css +148 -148
  5. package/src/web/index.css +1 -0
  6. package/src/web/motion/index.css +1 -0
  7. package/src/web/motion/motion.css +7 -0
  8. package/src/web/size/base.css +39 -33
  9. package/src/web/size/blur.css +3 -3
  10. package/src/web/size/control.css +15 -0
  11. package/src/web/size/depth.css +3 -3
  12. package/src/web/size/icon.css +4 -5
  13. package/src/web/size/index.css +7 -6
  14. package/src/web/size/radius.css +3 -5
  15. package/src/web/size/spacing.css +4 -3
  16. package/src/web/typography/combination.css +94 -30
  17. package/src/web/typography/font-family.css +1 -2
  18. package/src/web/typography/font-size.css +19 -8
  19. package/src/web/typography/font-weight.css +3 -3
  20. package/src/web/typography/index.css +7 -5
  21. package/src/web/typography/line-height.css +19 -8
  22. package/src/web/typography/typography.css +62 -0
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
+ }