@repobit/dex-system-design 0.12.0 → 0.14.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 (18) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/package.json +2 -2
  3. package/src/components/Input/custom-form.stories.js +4 -4
  4. package/src/components/Input/index.js +0 -0
  5. package/src/stories/demo.stories.js +21 -22
  6. package/src/tokens/colors.js +10 -10
  7. package/src/tokens/fonts.stories.js +5 -5
  8. package/src/tokens/layout.css +3 -3
  9. package/src/tokens/spacing.stories.js +1 -1
  10. package/src/tokens/tokens.css +224 -875
  11. package/src/tokens/tokens.stories.js +3 -3
  12. package/src/tokens/typography.css.js +4 -0
  13. package/src/tokens/typography.stories.js +2 -2
  14. package/src/assets/icons/arrow_down.png +0 -0
  15. package/src/assets/icons/arrow_up.png +0 -0
  16. package/src/tokens/fonts.css +0 -166
  17. package/src/tokens/new-tokens.css +0 -698
  18. package/src/tokens/tokens.js +0 -281
package/src/tokens/tokens.stories.js CHANGED
@@ -18,7 +18,7 @@ export const Colors = () => html`
18
18
  margin-bottom: 32px;
19
19
  }
20
20
  .color-group-title {
21
- font-family: var(--typography-fontFamily-sans);
21
+ font-family: var(--font-family-sans);
22
22
  font-weight: 600;
23
23
  font-size: var(--heading-medium);
24
24
  margin-bottom: 16px;
@@ -32,7 +32,7 @@ export const Colors = () => html`
32
32
  width: 80px;
33
33
  height: 80px;
34
34
  margin: 6px;
35
- border-radius: var(--radius-lg);
35
+ border-radius: 8px;
36
36
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
37
37
  color: white;
38
38
  font-family: var(--font-family-mono);
@@ -44,7 +44,7 @@ export const Colors = () => html`
44
44
  margin-top: 6px;
45
45
  color: var(--color-neutral-900);
46
46
  font-weight: 600;
47
- font-family: var(--typography-fontFamily-sans);
47
+ font-family: var(--font-family-sans);
48
48
  font-size: 10px;
49
49
  white-space: nowrap;
50
50
  }
package/src/tokens/typography.css.js CHANGED
@@ -2,8 +2,12 @@ import { css } from "lit";
2
2
 
3
3
  export default css`
4
4
 
5
+ /*<!-- typography -->*/
5
6
 
6
7
 
8
+
9
+ /* <!-- display -->/
10
+ /* <!-- desktop -->*/
7
11
  .text-display-xlarge {
8
12
  font-family: 'Arial',sans-serif;
9
13
  font-size: 4em;
package/src/tokens/typography.stories.js CHANGED
@@ -6,7 +6,7 @@ export default {
6
6
 
7
7
  const typographyTokens = {
8
8
  families: {
9
- 'Sans': 'var(--typography-fontFamily-sans, "IBM Plex Sans", Arial, sans-serif)',
9
+ 'Sans': 'var(--font-family-sans, "IBM Plex Sans", Arial, sans-serif)',
10
10
  'Mono': 'var(--font-family-mono, "IBM Plex Mono", monospace)',
11
11
  },
12
12
  sizes: {
@@ -26,7 +26,7 @@ const typographyTokens = {
26
26
  export const Typography = () => html`
27
27
  <style>
28
28
  h3 {
29
- font-family: var(--typography-fontFamily-sans);
29
+ font-family: var(--font-family-sans);
30
30
  font-weight: 600;
31
31
  font-size: var(--heading-medium);
32
32
  margin-bottom: 16px;
package/src/assets/icons/arrow_down.png DELETED
Binary file
package/src/assets/icons/arrow_up.png DELETED
Binary file
package/src/tokens/fonts.css DELETED
@@ -1,166 +0,0 @@
1
- /* =====================
2
- GLOBAL FONT-FACE DEFINITIONS
3
- For Storybook and global usage
4
- ====================== */
5
-
6
- /* IBM Plex Mono */
7
- @font-face {
8
- font-family: 'IBM Plex Mono';
9
- font-style: normal;
10
- font-weight: 300;
11
- src: url('./assets/fonts/IBMPlexMono-Light.woff2') format('woff2');
12
- font-display: swap;
13
- }
14
-
15
- @font-face {
16
- font-family: 'IBM Plex Mono';
17
- font-style: italic;
18
- font-weight: 300;
19
- src: url('./assets/fonts/IBMPlexMono-LightItalic.woff2') format('woff2');
20
- font-display: swap;
21
- }
22
-
23
- @font-face {
24
- font-family: 'IBM Plex Mono';
25
- font-style: normal;
26
- font-weight: 400;
27
- src: url('./assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
28
- font-display: swap;
29
- }
30
-
31
- @font-face {
32
- font-family: 'IBM Plex Mono';
33
- font-style: italic;
34
- font-weight: 400;
35
- src: url('./assets/fonts/IBMPlexMono-Italic.woff2') format('woff2');
36
- font-display: swap;
37
- }
38
-
39
- @font-face {
40
- font-family: 'IBM Plex Mono';
41
- font-style: normal;
42
- font-weight: 500;
43
- src: url('./assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');
44
- font-display: swap;
45
- }
46
-
47
- @font-face {
48
- font-family: 'IBM Plex Mono';
49
- font-style: italic;
50
- font-weight: 500;
51
- src: url('./assets/fonts/IBMPlexMono-MediumItalic.woff2') format('woff2');
52
- font-display: swap;
53
- }
54
-
55
- @font-face {
56
- font-family: 'IBM Plex Mono';
57
- font-style: normal;
58
- font-weight: 600;
59
- src: url('./assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
60
- font-display: swap;
61
- }
62
-
63
- @font-face {
64
- font-family: 'IBM Plex Mono';
65
- font-style: italic;
66
- font-weight: 600;
67
- src: url('./assets/fonts/IBMPlexMono-SemiBoldItalic.woff2') format('woff2');
68
- font-display: swap;
69
- }
70
-
71
- @font-face {
72
- font-family: 'IBM Plex Mono';
73
- font-style: normal;
74
- font-weight: 700;
75
- src: url('./assets/fonts/IBMPlexMono-Bold.woff2') format('woff2');
76
- font-display: swap;
77
- }
78
-
79
- @font-face {
80
- font-family: 'IBM Plex Mono';
81
- font-style: italic;
82
- font-weight: 700;
83
- src: url('./assets/fonts/IBMPlexMono-BoldItalic.woff2') format('woff2');
84
- font-display: swap;
85
- }
86
-
87
- /* IBM Plex Sans */
88
- @font-face {
89
- font-family: 'IBM Plex Sans';
90
- font-style: normal;
91
- font-weight: 300;
92
- src: url('./assets/fonts/IBMPlexSans-Light.woff2') format('woff2');
93
- font-display: swap;
94
- }
95
-
96
- @font-face {
97
- font-family: 'IBM Plex Sans';
98
- font-style: italic;
99
- font-weight: 300;
100
- src: url('./assets/fonts/IBMPlexSans-LightItalic.woff2') format('woff2');
101
- font-display: swap;
102
- }
103
-
104
- @font-face {
105
- font-family: 'IBM Plex Sans';
106
- font-style: normal;
107
- font-weight: 400;
108
- src: url('./assets/fonts/IBMPlexSans-Regular.woff2') format('woff2');
109
- font-display: swap;
110
- }
111
-
112
- @font-face {
113
- font-family: 'IBM Plex Sans';
114
- font-style: italic;
115
- font-weight: 400;
116
- src: url('./assets/fonts/IBMPlexSans-Italic.woff2') format('woff2');
117
- font-display: swap;
118
- }
119
-
120
- @font-face {
121
- font-family: 'IBM Plex Sans';
122
- font-style: normal;
123
- font-weight: 500;
124
- src: url('./assets/fonts/IBMPlexSans-Medium.woff2') format('woff2');
125
- font-display: swap;
126
- }
127
-
128
- @font-face {
129
- font-family: 'IBM Plex Sans';
130
- font-style: italic;
131
- font-weight: 500;
132
- src: url('./assets/fonts/IBMPlexSans-MediumItalic.woff2') format('woff2');
133
- font-display: swap;
134
- }
135
-
136
- @font-face {
137
- font-family: 'IBM Plex Sans';
138
- font-style: normal;
139
- font-weight: 600;
140
- src: url('./assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
141
- font-display: swap;
142
- }
143
-
144
- @font-face {
145
- font-family: 'IBM Plex Sans';
146
- font-style: italic;
147
- font-weight: 600;
148
- src: url('./assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2');
149
- font-display: swap;
150
- }
151
-
152
- @font-face {
153
- font-family: 'IBM Plex Sans';
154
- font-style: normal;
155
- font-weight: 700;
156
- src: url('./assets/fonts/IBMPlexSans-Bold.woff2') format('woff2');
157
- font-display: swap;
158
- }
159
-
160
- @font-face {
161
- font-family: 'IBM Plex Sans';
162
- font-style: italic;
163
- font-weight: 700;
164
- src: url('./assets/fonts/IBMPlexSans-BoldItalic.woff2') format('woff2');
165
- font-display: swap;
166
- }