@repobit/dex-system-design 0.8.0 → 0.9.1

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 (4) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/package.json +2 -2
  3. package/src/components/Button/Button.js +22 -21
  4. package/src/tokens/tokens.js +414 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.9.1](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.9.0...@repobit/dex-system-design@0.9.1) (2025-07-22)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **DEX-23636:** change CSS selector from :root to :host for better encapsulation ([b221681](https://github.com/bitdefender/dex-core/commit/b2216819b10c624637727aaad96c305cb84750e2))
12
+
13
+
14
+
15
+ ## [0.9.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.8.0...@repobit/dex-system-design@0.9.0) (2025-07-22)
16
+
17
+
18
+ ### Features
19
+
20
+ * **DEX-23636:** add design tokens for consistent styling across components ([4ec7f39](https://github.com/bitdefender/dex-core/commit/4ec7f39332f2d48190fef9067d6f0738794614fc))
21
+
22
+
23
+
6
24
  ## [0.8.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.7.0...@repobit/dex-system-design@0.8.0) (2025-07-22)
7
25
 
8
26
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@repobit/dex-system-design",
3
- "version": "0.8.0",
3
+ "version": "0.9.1",
4
4
  "description": "Design system based on Web Components.",
5
5
  "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
6
6
  "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -54,5 +54,5 @@
54
54
  "volta": {
55
55
  "node": "22.14.0"
56
56
  },
57
- "gitHead": "5ee2a9f24ee50e104c614725020f50004a644f86"
57
+ "gitHead": "36170dc9b7e10b08fbaafecc09f954878a9db4e7"
58
58
  }
package/src/components/Button/Button.js CHANGED
@@ -1,18 +1,19 @@
1
1
  import { LitElement, html } from "lit";
2
- import "./icons.js";
2
+ import { tokens } from "../../tokens/tokens.js";
3
3
  import buttonsCSS from "./button.css.js";
4
+ import "./icons.js";
4
5
 
5
6
  class Button extends LitElement {
6
7
  static properties = {
7
- label: { type: String },
8
- href: { type: String },
9
- size: { type: String },
8
+ label : { type: String },
9
+ href : { type: String },
10
+ size : { type: String },
10
11
  customClass: { type: String },
11
- kind: { type: String },
12
- fullWidth: { type: Boolean },
13
- strong: { type: Boolean },
14
- fontSize: { type: String, attribute: "font-size" },
15
- fontWeight: { type: String, attribute: "font-weight" },
12
+ kind : { type: String },
13
+ fullWidth : { type: Boolean },
14
+ strong : { type: Boolean },
15
+ fontSize : { type: String, attribute: "font-size" },
16
+ fontWeight : { type: String, attribute: "font-weight" }
16
17
  };
17
18
 
18
19
  constructor() {
@@ -102,15 +103,15 @@ class Button extends LitElement {
102
103
  }
103
104
  class ButtonLink extends LitElement {
104
105
  static properties = {
105
- label: { type: String },
106
- href: { type: String },
107
- size: { type: String },
106
+ label : { type: String },
107
+ href : { type: String },
108
+ size : { type: String },
108
109
  customClass: { type: String },
109
- kind: { type: String },
110
- fullWidth: { type: Boolean },
111
- strong: { type: Boolean },
112
- fontSize: { type: String, attribute: "font-size" },
113
- fontWeight: { type: String, attribute: "font-weight" },
110
+ kind : { type: String },
111
+ fullWidth : { type: Boolean },
112
+ strong : { type: Boolean },
113
+ fontSize : { type: String, attribute: "font-size" },
114
+ fontWeight : { type: String, attribute: "font-weight" }
114
115
  };
115
116
 
116
117
  /** @private -> for private properties we are using "_text" */
@@ -187,7 +188,7 @@ class ButtonLink extends LitElement {
187
188
  class ContactButton extends LitElement {
188
189
  static properties = {
189
190
  label: { type: String },
190
- href: { type: String },
191
+ href : { type: String }
191
192
  };
192
193
 
193
194
  constructor() {
@@ -221,10 +222,10 @@ class ContactButton extends LitElement {
221
222
  }
222
223
  }
223
224
 
224
- Button.styles = [buttonsCSS];
225
- ButtonLink.styles = [buttonsCSS];
225
+ Button.styles = [tokens, buttonsCSS];
226
+ ButtonLink.styles = [tokens, buttonsCSS];
226
227
 
227
- ContactButton.styles = [buttonsCSS];
228
+ ContactButton.styles = [tokens, buttonsCSS];
228
229
 
229
230
  customElements.define("bd-button", Button);
230
231
  customElements.define("bd-button-link", ButtonLink);
package/src/tokens/tokens.js ADDED
@@ -0,0 +1,414 @@
1
+ import { css } from 'lit';
2
+
3
+ export const tokens = css`
4
+ :host {
5
+
6
+ /* =====================
7
+ COLORS
8
+ ====================== */
9
+ --color-blue-50: #F0F7FF;
10
+ --color-blue-100: #D6E8FF;
11
+ --color-blue-200: #9EC8FF;
12
+ --color-blue-300: #6BABFF;
13
+ --color-blue-400: #338BFF;
14
+ --color-blue-500: #006dff;
15
+ --color-blue-600: #0059D6;
16
+ --color-blue-700: #0045AD;
17
+ --color-blue-800: #003385;
18
+ --color-blue-900: #00225C;
19
+ --color-blue-950: #001947;
20
+
21
+ --color-red-50: #FFF0F0;
22
+ --color-red-100: #FFD6D6;
23
+ --color-red-200: #FF9E9E;
24
+ --color-red-300: #FF6B6B;
25
+ --color-red-400: #FF3333;
26
+ --color-red-500: #FF0000;
27
+ --color-red-600: #D60000;
28
+ --color-red-700: #AD0000;
29
+ --color-red-800: #850000;
30
+ --color-red-900: #5C0000;
31
+ --color-red-950: #470000;
32
+
33
+ --color-green-50: #EDFDF1;
34
+ --color-green-100: #D1FADC;
35
+ --color-green-200: #9AF4B4;
36
+ --color-green-300: #63EE8D;
37
+ --color-green-400: #2CE767;
38
+ --color-green-500: #15C14F;
39
+ --color-green-600: #12A641;
40
+ --color-green-700: #0E8532;
41
+ --color-green-800: #0B6A26;
42
+ --color-green-900: #084A1A;
43
+ --color-green-950: #063C14;
44
+
45
+ --color-yellow-50: #FFFBF0;
46
+ --color-yellow-100: #FFF5D6;
47
+ --color-yellow-200: #FFE89E;
48
+ --color-yellow-300: #FFDC6B;
49
+ --color-yellow-400: #FFCF33;
50
+ --color-yellow-500: #FFC400;
51
+ --color-yellow-600: #D6A000;
52
+ --color-yellow-700: #AD7F00;
53
+ --color-yellow-800: #855F00;
54
+ --color-yellow-900: #5C4000;
55
+ --color-yellow-950: #473100;
56
+
57
+ --color-neutral-0: #FFFFFF;
58
+ --color-neutral-25: #FAFAFA;
59
+ --color-neutral-50: #f1f2f3;
60
+ --color-neutral-100: #e1e3e5;
61
+ --color-neutral-200: #c5c9ce;
62
+ --color-neutral-300: #a6adb4;
63
+ --color-neutral-400: #88909b;
64
+ --color-neutral-500: #6c7580;
65
+ --color-neutral-600: #565e66;
66
+ --color-neutral-700: #41474d;
67
+ --color-neutral-800: #2c3035;
68
+ --color-neutral-900: #151719;
69
+ --color-neutral-950: #0c0d0e;
70
+ --color-neutral-1000: #000000;
71
+
72
+
73
+ /* =====================
74
+ DISPLAY FONT SIZES
75
+ ====================== */
76
+
77
+ /* Display default */
78
+ --display-xxsmall: 44px; /* 58.652px = 3.666rem */
79
+ --display-xsmall: 48px; /* 63.984px = 3.999rem */
80
+ --display-small: 52px; /* 69.316px = 4.332rem */
81
+ --display-medium: 56px; /* 74.648px = 4.666rem */
82
+ --display-large: 60px; /* 79.98px = 5rem */
83
+ --display-xlarge: 64px; /* 85.312px = 5.333rem */
84
+
85
+ /* Display mobile */
86
+ --display-xxsmall-mobile: 34px; /* 45.322px = 2.833rem */
87
+ --display-xsmall-mobile: 36px; /* 47.988px = 2.999rem */
88
+ --display-small-mobile: 38px; /* 50.654px = 3.167rem */
89
+ --display-medium-mobile: 40px; /* 53.32px = 3.333rem */
90
+ --display-large-mobile: 44px; /* 58.652px = 3.666rem */
91
+ --display-xlarge-mobile: 48px; /* 63.984px = 3.999rem */
92
+
93
+ /* Heading default */
94
+ --heading-xxsmall: 18px; /* 23.994px = 1.5rem */
95
+ --heading-xsmall: 20px; /* 26.66px = 1.667rem */
96
+ --heading-small: 24px; /* 31.992px = 2rem */
97
+ --heading-medium: 28px; /* 37.324px = 2.333rem */
98
+ --heading-large: 32px; /* 42.656px = 2.667rem */
99
+ --heading-xlarge: 36px; /* 47.988px = 2.999rem */
100
+ --heading-xxlarge: 40px; /* 53.32px = 3.333rem */
101
+
102
+ /* Body default */
103
+ --body-small: 13px; /* 17.329px = 1.083rem */
104
+ --body-medium: 14px; /* 18.662px = 1.167rem */
105
+ --body-large: 16px; /* 21.328px = 1.333rem */
106
+ --body-xlarge: 18px; /* 23.994px = 1.5rem */
107
+
108
+ /* Caption default */
109
+ --caption-small: 11px; /* 14.663px = 0.917rem */
110
+ --caption-large: 12px; /* 15.996px = 1rem */
111
+
112
+
113
+
114
+
115
+ /* Display Default */
116
+ --display-xlarge-line-height: 1.1; /* For 60px */
117
+ --display-medium-line-height: 1.15; /* For 52px */
118
+
119
+ /* Display Mobile */
120
+ --display-xlarge-mobile-line-height: 1.15; /* For 44px */
121
+ --display-medium-mobile-line-height: 1.2; /* For 38px */
122
+
123
+ /* Heading */
124
+ --heading-xlarge-line-height: 1.2; /* For 36px */
125
+ --heading-small-line-height: 1.3; /* For 24px */
126
+
127
+ /* Body */
128
+ --body-large-line-height: 1.5; /* For 16px */
129
+
130
+ /* Caption */
131
+ --caption-large-line-height: 1.35; /* For 12px */
132
+ /* =====================
133
+ PADDING SIZES
134
+ ====================== */
135
+
136
+ /* PADDING VALUES */
137
+ --size-0: 0;
138
+ --size-1: 1px;
139
+ --size-2: 2px;
140
+ --size-4: 4px;
141
+ --size-6: 6px;
142
+ --size-8: 8px;
143
+ --size-10: 10px;
144
+ --size-12: 12px;
145
+ --size-14: 14px;
146
+ --size-16: 16px;
147
+ --size-18: 18px;
148
+ --size-20: 20px;
149
+ --size-22: 22px;
150
+ --size-24: 24px;
151
+ --size-32: 32px;
152
+ --size-36: 36px;
153
+ --size-40: 40px;
154
+ --size-44: 44px;
155
+ --size-52: 52px;
156
+ --size-64: 64px;
157
+ --size-full: 99999999999999999999;
158
+
159
+
160
+ /* Spacing Tokens
161
+ -----------------------------------------------*/
162
+ /* Base spacing tokens - Based on 4px grid */
163
+ --space-none: 0;
164
+ --space-4xs: 0.125rem; /* 2px */
165
+ --space-3xs: 0.25rem; /* 4px */
166
+ --space-2xs: 0.5rem; /* 8px */
167
+ --space-xs: 0.75rem; /* 12px */
168
+ --space-sm: 1rem; /* 16px */
169
+ --space-md: 1.5rem; /* 24px */
170
+ --space-lg: 2rem; /* 32px */
171
+ --space-xl: 2.5rem; /* 40px */
172
+ --space-2xl: 3rem; /* 48px */
173
+ --space-3xl: 4rem; /* 64px */
174
+ --space-4xl: 6rem; /* 96px */
175
+ --space-5xl: 8rem; /* 128px */
176
+
177
+ /* Semantic Padding Tokens */
178
+ --padding-button: var(--space-xs) var(--space-md);
179
+ --padding-input: var(--space-xs);
180
+ --padding-card: var(--space-md);
181
+ --padding-card-sm: var(--space-sm);
182
+ --padding-card-lg: var(--space-lg);
183
+
184
+ --padding-section: var(--space-3xl) 0;
185
+ --padding-section-sm: var(--space-2xl) 0;
186
+ --padding-section-lg: var(--space-4xl) 0;
187
+
188
+ /* Container and Layout Tokens */
189
+ --container-padding: var(--space-md);
190
+ --container-padding-sm: var(--space-sm);
191
+ --container-padding-lg: var(--space-lg);
192
+
193
+ /* Inset (Padding All Sides) Tokens */
194
+ --inset-xs: var(--space-xs);
195
+ --inset-sm: var(--space-sm);
196
+ --inset-md: var(--space-md);
197
+ --inset-lg: var(--space-lg);
198
+
199
+ /* Stack (Vertical Spacing) Tokens */
200
+ --stack-xs: var(--space-xs);
201
+ --stack-sm: var(--space-sm);
202
+ --stack-md: var(--space-md);
203
+ --stack-lg: var(--space-lg);
204
+ --stack-xl: var(--space-xl);
205
+
206
+ /* Inline (Horizontal Spacing) Tokens */
207
+ --inline-xs: var(--space-xs);
208
+ --inline-sm: var(--space-sm);
209
+ --inline-md: var(--space-md);
210
+ --inline-lg: var(--space-lg);
211
+
212
+ /* Accessibility Spacing Tokens
213
+ -----------------------------------------------*/
214
+ /* Touch Target Sizes - WCAG 2.1 Success Criterion 2.5.5 (AAA) and 2.5.8 (AA) */
215
+ --touch-target-size: 44px; /* Minimum touch target size (44px × 44px) */
216
+ --touch-target-spacing: 8px; /* Minimum space between touch targets */
217
+
218
+ /* Readable Line Lengths - For optimal readability */
219
+ --content-width-readable: 70ch; /* Approximately 70 characters per line */
220
+ --content-width-max: 1200px; /* Maximum overall content width */
221
+
222
+
223
+ /** GRID TOKENS
224
+ */
225
+ /* Grid container max widths */
226
+ --grid-container-max-xs: 100%; /* mobile full width */
227
+ --grid-container-max-sm: 540px;
228
+ --grid-container-max-md: 720px;
229
+ --grid-container-max-lg: 960px;
230
+ --grid-container-max-xl: 1140px;
231
+ --grid-container-max-xxl: 1320px;
232
+
233
+ /* Column count (usually 12) */
234
+ --grid-columns: 12;
235
+
236
+ /* Gutter spacing between columns */
237
+ --grid-gutter-xs: 16px;
238
+ --grid-gutter-sm: 24px;
239
+ --grid-gutter-md: 32px;
240
+ --grid-gutter-lg: 40px;
241
+
242
+ /* Container padding (horizontal spacing) */
243
+ --grid-padding-xs: 16px;
244
+ --grid-padding-sm: 24px;
245
+ --grid-padding-md: 32px;
246
+ --grid-padding-lg: 40px;
247
+
248
+ /* Breakpoints */
249
+ --breakpoint-xs: 0px;
250
+ --breakpoint-sm: 576px;
251
+ --breakpoint-md: 768px;
252
+ --breakpoint-lg: 992px;
253
+ --breakpoint-xl: 1200px;
254
+ --breakpoint-xxl: 1400px;
255
+ /* =====================
256
+ FONT-FACE DEFINITIONS
257
+ ====================== */
258
+
259
+ @font-face {
260
+ font-family: 'IBM Plex Mono';
261
+ font-style: normal;
262
+ font-weight: 700;
263
+ src: url('/assets/fonts/IBMPlexMono-Bold.woff2') format('woff2');
264
+ }
265
+ @font-face {
266
+ font-family: 'IBM Plex Mono';
267
+ font-style: normal;
268
+ font-weight: 700;
269
+ src: url('/assets/fonts/IBMPlexMono-BoldItalic.woff2') format('woff2');
270
+ }
271
+
272
+ @font-face {
273
+ font-family: 'IBM Plex Mono';
274
+ font-style: italic;
275
+ font-weight: 300;
276
+ src: url('/assets/fonts/IBMPlexMono-Italic.woff2') format('woff2');
277
+ }
278
+ @font-face {
279
+ font-family: 'IBM Plex Mono';
280
+ font-style: normal;
281
+ font-weight: 300;
282
+ src: url('/assets/fonts/IBMPlexMono-Light.woff2') format('woff2');
283
+ }
284
+ @font-face {
285
+ font-family: 'IBM Plex Mono';
286
+ font-style: italic;
287
+ font-weight: 300;
288
+ src: url('/assets/fonts/IBMPlexMono-LightItalic.woff2') format('woff2');
289
+ }
290
+
291
+ @font-face {
292
+ font-family: 'IBM Plex Mono';
293
+ font-style: italic;
294
+ font-weight: 500;
295
+ src: url('/assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');
296
+ }
297
+ @font-face {
298
+ font-family: 'IBM Plex Mono';
299
+ font-style: italic;
300
+ font-weight: 500;
301
+ src: url('/assets/fonts/IBMPlexMono-MediumItalic.woff2') format('woff2');
302
+ }
303
+ @font-face {
304
+ font-family: 'IBM Plex Mono';
305
+ font-style: italic;
306
+ font-weight: 400;
307
+ src: url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
308
+ }
309
+ @font-face {
310
+ font-family: 'IBM Plex Mono';
311
+ font-style: italic;
312
+ font-weight: 600;
313
+ src: url('/assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
314
+ }
315
+ @font-face {
316
+ font-family: 'IBM Plex Mono';
317
+ font-style: italic;
318
+ font-weight: 600;
319
+ src: url('/assets/fonts/IBMPlexMono-SemiBoldItalic.woff2') format('woff2');
320
+ }
321
+
322
+ /*
323
+ IBM PLEX SANS
324
+ */
325
+
326
+ @font-face {
327
+ font-family: 'IBMPlexSans';
328
+ font-style: normal;
329
+ font-weight: 700;
330
+ src: url('/assets/fonts/IBMPlexSans-Bold.woff2') format('woff2');
331
+ }
332
+ @font-face {
333
+ font-family: 'IBMPlexSans';
334
+ font-style: normal;
335
+ font-weight: 700;
336
+ src: url('/assets/fonts/IBMPlexSans-BoldItalic.woff2') format('woff2');
337
+ }
338
+
339
+ @font-face {
340
+ font-family: 'IBMPlexSans';
341
+ font-style: italic;
342
+ font-weight: 300;
343
+ src: url('/assets/fonts/IBMPlexSans-Italic.woff2') format('woff2');
344
+ }
345
+ @font-face {
346
+ font-family: 'IBMPlexSans';
347
+ font-style: normal;
348
+ font-weight: 300;
349
+ src: url('/assets/fonts/IBMPlexSans-Light.woff2') format('woff2');
350
+ }
351
+ @font-face {
352
+ font-family: 'IBMPlexSans';
353
+ font-style: italic;
354
+ font-weight: 300;
355
+ src: url('/assets/fonts/IBMPlexSans-LightItalic.woff2') format('woff2');
356
+ }
357
+
358
+ @font-face {
359
+ font-family: 'IBMPlexSans';
360
+ font-style: italic;
361
+ font-weight: 500;
362
+ src: url('/assets/fonts/IBMPlexSans-Medium.woff2') format('woff2');
363
+ }
364
+ @font-face {
365
+ font-family: 'IBMPlexSans';
366
+ font-style: italic;
367
+ font-weight: 500;
368
+ src: url('/assets/fonts/IBMPlexSans-MediumItalic.woff2') format('woff2');
369
+ }
370
+ @font-face {
371
+ font-family: 'IBMPlexSans';
372
+ font-style: italic;
373
+ font-weight: 400;
374
+ src: url('/assets/fonts/IBMPlexSans-Regular.woff2') format('woff2');
375
+ }
376
+ @font-face {
377
+ font-family: 'IBMPlexSans';
378
+ font-style: italic;
379
+ font-weight: 600;
380
+ src: url('/assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
381
+ }
382
+ @font-face {
383
+ font-family: 'IBMPlexSans';
384
+ font-style: italic;
385
+ font-weight: 600;
386
+ src: url('/assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2');
387
+ }
388
+
389
+ /* =====================
390
+ FONT TOKENS
391
+ ====================== */
392
+ /* IBM Plex Mono */
393
+ --font-family-mono: 'IBM Plex Mono', monospace;
394
+ --font-weight-mono-light: 300;
395
+ --font-weight-mono-regular: 400;
396
+ --font-weight-mono-medium: 500;
397
+ --font-weight-mono-semibold: 600;
398
+ --font-weight-mono-bold: 700;
399
+
400
+ --font-style-mono-normal: normal;
401
+ --font-style-mono-italic: italic;
402
+
403
+ /* IBMPlexSans */
404
+ --font-family-sans: 'IBM Plex Sans', sans-serif;
405
+ --font-weight-sans-light: 300;
406
+ --font-weight-sans-regular: 400;
407
+ --font-weight-sans-medium: 500;
408
+ --font-weight-sans-semibold: 600;
409
+ --font-weight-sans-bold: 700;
410
+
411
+ --font-style-sans-normal: normal;
412
+ --font-style-sans-italic: italic;
413
+ }
414
+ `;