jvetrau-ds 0.1.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.
- package/icons.cjs +160 -0
- package/icons.cjs.map +1 -0
- package/icons.d.cts +2 -0
- package/icons.d.ts +2 -0
- package/icons.js +158 -0
- package/icons.js.map +1 -0
- package/index.cjs +1193 -0
- package/index.cjs.map +1 -0
- package/index.d.cts +141 -0
- package/index.d.ts +141 -0
- package/index.js +1170 -0
- package/index.js.map +1 -0
- package/package.json +48 -0
- package/patterns.cjs +4 -0
- package/patterns.cjs.map +1 -0
- package/patterns.d.cts +2 -0
- package/patterns.d.ts +2 -0
- package/patterns.js +3 -0
- package/patterns.js.map +1 -0
- package/styles.css +1905 -0
- package/themes/base/desktop.css +149 -0
- package/themes/base/desktop.md +188 -0
- package/themes/base/desktop.scoped.css +149 -0
- package/themes/base/diagram.css +149 -0
- package/themes/base/diagram.md +188 -0
- package/themes/base/diagram.scoped.css +149 -0
- package/themes/base/mobile.css +149 -0
- package/themes/base/mobile.md +188 -0
- package/themes/base/mobile.scoped.css +149 -0
- package/themes/brandcopilot/desktop.css +149 -0
- package/themes/brandcopilot/desktop.md +188 -0
- package/themes/brandcopilot/desktop.scoped.css +149 -0
- package/themes/brandcopilot/diagram.css +149 -0
- package/themes/brandcopilot/diagram.md +188 -0
- package/themes/brandcopilot/diagram.scoped.css +149 -0
- package/themes/brandcopilot/mobile.css +149 -0
- package/themes/brandcopilot/mobile.md +188 -0
- package/themes/brandcopilot/mobile.scoped.css +149 -0
- package/themes/dmpatterns/desktop.css +149 -0
- package/themes/dmpatterns/desktop.md +188 -0
- package/themes/dmpatterns/desktop.scoped.css +149 -0
- package/themes/dmpatterns/diagram.css +149 -0
- package/themes/dmpatterns/diagram.md +188 -0
- package/themes/dmpatterns/diagram.scoped.css +149 -0
- package/themes/dmpatterns/mobile.css +149 -0
- package/themes/dmpatterns/mobile.md +188 -0
- package/themes/dmpatterns/mobile.scoped.css +149 -0
- package/themes/pdigest/desktop.css +149 -0
- package/themes/pdigest/desktop.md +188 -0
- package/themes/pdigest/desktop.scoped.css +149 -0
- package/themes/pdigest/diagram.css +149 -0
- package/themes/pdigest/diagram.md +188 -0
- package/themes/pdigest/diagram.scoped.css +149 -0
- package/themes/pdigest/mobile.css +149 -0
- package/themes/pdigest/mobile.md +188 -0
- package/themes/pdigest/mobile.scoped.css +149 -0
- package/themes/redesigntrack/desktop.css +149 -0
- package/themes/redesigntrack/desktop.md +188 -0
- package/themes/redesigntrack/desktop.scoped.css +149 -0
- package/themes/redesigntrack/diagram.css +149 -0
- package/themes/redesigntrack/diagram.md +188 -0
- package/themes/redesigntrack/diagram.scoped.css +149 -0
- package/themes/redesigntrack/mobile.css +149 -0
- package/themes/redesigntrack/mobile.md +188 -0
- package/themes/redesigntrack/mobile.scoped.css +149 -0
- package/tokens.cjs +17734 -0
- package/tokens.cjs.map +1 -0
- package/tokens.d.cts +27 -0
- package/tokens.d.ts +27 -0
- package/tokens.js +17732 -0
- package/tokens.js.map +1 -0
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--color-bg: #191A1A;
|
|
3
|
+
--color-bg-container: var(--color-primary-1);
|
|
4
|
+
--color-bg-contrast: #FFFFFF;
|
|
5
|
+
--color-bg-dark: #0D0D0D;
|
|
6
|
+
--color-bg-disabled: #B2B2B2;
|
|
7
|
+
--color-bg-placeholder: #EBEFF2;
|
|
8
|
+
--color-bg-true-black: #000000;
|
|
9
|
+
--color-contrast: #FFFFFF;
|
|
10
|
+
--color-control: #FFFFFF;
|
|
11
|
+
--color-line: #FFFFFF;
|
|
12
|
+
--color-line-bad: var(--color-primary-2);
|
|
13
|
+
--color-line-contrast: #000000;
|
|
14
|
+
--color-line-good: var(--color-primary-1);
|
|
15
|
+
--color-line-grid: #3E3F40;
|
|
16
|
+
--color-line-med: #FF7300;
|
|
17
|
+
--color-line-semi-bad: #FF4000;
|
|
18
|
+
--color-line-semi-good: #FFBF00;
|
|
19
|
+
--color-link: var(--color-primary-2);
|
|
20
|
+
--color-link-visited: var(--color-primary-2);
|
|
21
|
+
--color-primary-1: #F9EC0E;
|
|
22
|
+
--color-primary-2: #FA4691;
|
|
23
|
+
--color-secondary: #FFFFFF;
|
|
24
|
+
--color-text: #FFFFFF;
|
|
25
|
+
--color-text-container: #000000;
|
|
26
|
+
--color-text-contrast: #000000;
|
|
27
|
+
--color-text-control: #000000;
|
|
28
|
+
--color-text-note: #BABDBF;
|
|
29
|
+
--color-text-primary-1: #000000;
|
|
30
|
+
--color-text-primary-2: #FFFFFF;
|
|
31
|
+
--color-text-secondary: #000000;
|
|
32
|
+
--font-body: 20px;
|
|
33
|
+
--font-body-bigger: 20px;
|
|
34
|
+
--font-body-bigger-family: PP Object Sans Variable;
|
|
35
|
+
--font-body-bigger-letter-spacing: 0px;
|
|
36
|
+
--font-body-bigger-line: 24px;
|
|
37
|
+
--font-body-bigger-weight: 300px;
|
|
38
|
+
--font-body-bigger-weight-accent: 573px;
|
|
39
|
+
--font-body-family: PP Object Sans Variable;
|
|
40
|
+
--font-body-letter-spacing: 0px;
|
|
41
|
+
--font-body-line: 24px;
|
|
42
|
+
--font-body-margin: 12px;
|
|
43
|
+
--font-body-weight: 300px;
|
|
44
|
+
--font-body-weight-accent: 573px;
|
|
45
|
+
--font-control: var(--font-lead);
|
|
46
|
+
--font-control-family: PP Object Sans Variable;
|
|
47
|
+
--font-control-letter-spacing: 0px;
|
|
48
|
+
--font-control-line: var(--font-lead-line);
|
|
49
|
+
--font-control-weight: 400px;
|
|
50
|
+
--font-h0: 150px;
|
|
51
|
+
--font-h0-family: PP Object Sans Variable;
|
|
52
|
+
--font-h0-letter-spacing: -0.04px;
|
|
53
|
+
--font-h0-line: 130px;
|
|
54
|
+
--font-h0-margin: 0px;
|
|
55
|
+
--font-h0-weight: 400px;
|
|
56
|
+
--font-h1: 84px;
|
|
57
|
+
--font-h1-family: PP Object Sans Variable;
|
|
58
|
+
--font-h1-letter-spacing: -0.04px;
|
|
59
|
+
--font-h1-line: 92px;
|
|
60
|
+
--font-h1-margin: 24px;
|
|
61
|
+
--font-h1-weight: 400px;
|
|
62
|
+
--font-h2: 56px;
|
|
63
|
+
--font-h2-family: PP Object Sans Variable;
|
|
64
|
+
--font-h2-letter-spacing: -0.04px;
|
|
65
|
+
--font-h2-line: 66px;
|
|
66
|
+
--font-h2-margin: 20px;
|
|
67
|
+
--font-h2-weight: 400px;
|
|
68
|
+
--font-h3: 46px;
|
|
69
|
+
--font-h3-family: PP Object Sans Variable;
|
|
70
|
+
--font-h3-letter-spacing: -0.04px;
|
|
71
|
+
--font-h3-line: 48px;
|
|
72
|
+
--font-h3-margin: 16px;
|
|
73
|
+
--font-h3-weight: 400px;
|
|
74
|
+
--font-h3-weight-accent: 573px;
|
|
75
|
+
--font-h4: 28px;
|
|
76
|
+
--font-h4-family: PP Object Sans Variable;
|
|
77
|
+
--font-h4-letter-spacing: 0px;
|
|
78
|
+
--font-h4-line: 36px;
|
|
79
|
+
--font-h4-margin: 12px;
|
|
80
|
+
--font-h4-weight: 400px;
|
|
81
|
+
--font-lead: 24px;
|
|
82
|
+
--font-lead-family: PP Object Sans Variable;
|
|
83
|
+
--font-lead-letter-spacing: 0px;
|
|
84
|
+
--font-lead-line: 32px;
|
|
85
|
+
--font-lead-margin: 12px;
|
|
86
|
+
--font-lead-weight: 300px;
|
|
87
|
+
--font-lead-weight-accent: 400px;
|
|
88
|
+
--font-note: 16px;
|
|
89
|
+
--font-note-family: PP Object Sans Variable;
|
|
90
|
+
--font-note-letter-spacing: 0px;
|
|
91
|
+
--font-note-line: 20px;
|
|
92
|
+
--font-note-weight: 300px;
|
|
93
|
+
--font-note-weight-accent: 573px;
|
|
94
|
+
--margin-attribute: 0px;
|
|
95
|
+
--margin-bullet: 0px;
|
|
96
|
+
--margin-choice: 8px;
|
|
97
|
+
--margin-container: 20px;
|
|
98
|
+
--margin-container-item: 40px;
|
|
99
|
+
--margin-control: 16px;
|
|
100
|
+
--margin-form-field-horz: 0px;
|
|
101
|
+
--margin-form-field-set: 0px;
|
|
102
|
+
--margin-form-field-vert: 20px;
|
|
103
|
+
--margin-form-label-horz: 0px;
|
|
104
|
+
--margin-form-label-vert: 8px;
|
|
105
|
+
--margin-form-tip: 0px;
|
|
106
|
+
--margin-icon: 8px;
|
|
107
|
+
--margin-item: 20px;
|
|
108
|
+
--margin-menu: 20px;
|
|
109
|
+
--margin-popup: 0px;
|
|
110
|
+
--margin-tab: 0px;
|
|
111
|
+
--margin-tag-horz: 8px;
|
|
112
|
+
--margin-tag-vert: 4px;
|
|
113
|
+
--margin-tooltip: 0px;
|
|
114
|
+
--motion-duration1: 0px;
|
|
115
|
+
--padding-arrow: 0px;
|
|
116
|
+
--padding-container: 40px;
|
|
117
|
+
--padding-control-button-horz: 46px;
|
|
118
|
+
--padding-control-button-icon-horz: var(--padding-control-horz);
|
|
119
|
+
--padding-control-div: 0px;
|
|
120
|
+
--padding-control-horz: 29px;
|
|
121
|
+
--padding-control-more: 0px;
|
|
122
|
+
--padding-control-more-icon: 0px;
|
|
123
|
+
--padding-control-vert: var(--padding-control-horz);
|
|
124
|
+
--padding-menu: 0px;
|
|
125
|
+
--padding-slice-bottom: 0px;
|
|
126
|
+
--padding-slice-top: 0px;
|
|
127
|
+
--padding-tab: 16px;
|
|
128
|
+
--padding-table-horz: 0px;
|
|
129
|
+
--padding-table-vert: 0px;
|
|
130
|
+
--padding-tag: 4px;
|
|
131
|
+
--radius-base: 84px;
|
|
132
|
+
--radius-circle: 300px;
|
|
133
|
+
--radius-container: 30px;
|
|
134
|
+
--radius-control: 3px;
|
|
135
|
+
--radius-control-button: 46px;
|
|
136
|
+
--radius-control-circle: var(--radius-circle);
|
|
137
|
+
--radius-flowchart: 30px;
|
|
138
|
+
--radius-large: 84px;
|
|
139
|
+
--size-border-width-base: 2px;
|
|
140
|
+
--size-border-width-icon: 4px;
|
|
141
|
+
--size-border-width-min: 1px;
|
|
142
|
+
--size-control-checkbox: 24px;
|
|
143
|
+
--size-control-height: 92px;
|
|
144
|
+
--size-control-textarea-height: 158px;
|
|
145
|
+
--size-grid-column-main: 40px;
|
|
146
|
+
--size-grid-margin: 20px;
|
|
147
|
+
--size-tab-height: 36px;
|
|
148
|
+
--tone-value1: 0px;
|
|
149
|
+
}
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
# Design Tokens — redesigntrack / desktop
|
|
2
|
+
|
|
3
|
+
## color
|
|
4
|
+
|
|
5
|
+
| Token | Type | Value |
|
|
6
|
+
| --- | --- | --- |
|
|
7
|
+
| `color/bg` | `color` | `#191A1A` |
|
|
8
|
+
| `color/bg/container` | `color` | `#F9EC0E` |
|
|
9
|
+
| `color/bg/contrast` | `color` | `#FFFFFF` |
|
|
10
|
+
| `color/bg/dark` | `color` | `#0D0D0D` |
|
|
11
|
+
| `color/bg/disabled` | `color` | `#B2B2B2` |
|
|
12
|
+
| `color/bg/placeholder` | `color` | `#EBEFF2` |
|
|
13
|
+
| `color/bg/true-black` | `color` | `#000000` |
|
|
14
|
+
| `color/contrast` | `color` | `#FFFFFF` |
|
|
15
|
+
| `color/control` | `color` | `#FFFFFF` |
|
|
16
|
+
| `color/line` | `color` | `#FFFFFF` |
|
|
17
|
+
| `color/line/bad` | `color` | `#FA4691` |
|
|
18
|
+
| `color/line/contrast` | `color` | `#000000` |
|
|
19
|
+
| `color/line/good` | `color` | `#F9EC0E` |
|
|
20
|
+
| `color/line/grid` | `color` | `#3E3F40` |
|
|
21
|
+
| `color/line/med` | `color` | `#FF7300` |
|
|
22
|
+
| `color/line/semi-bad` | `color` | `#FF4000` |
|
|
23
|
+
| `color/line/semi-good` | `color` | `#FFBF00` |
|
|
24
|
+
| `color/link` | `color` | `#FA4691` |
|
|
25
|
+
| `color/link/visited` | `color` | `#FA4691` |
|
|
26
|
+
| `color/primary/1` | `color` | `#F9EC0E` |
|
|
27
|
+
| `color/primary/2` | `color` | `#FA4691` |
|
|
28
|
+
| `color/secondary` | `color` | `#FFFFFF` |
|
|
29
|
+
| `color/text` | `color` | `#FFFFFF` |
|
|
30
|
+
| `color/text/container` | `color` | `#000000` |
|
|
31
|
+
| `color/text/contrast` | `color` | `#000000` |
|
|
32
|
+
| `color/text/control` | `color` | `#000000` |
|
|
33
|
+
| `color/text/note` | `color` | `#BABDBF` |
|
|
34
|
+
| `color/text/primary/1` | `color` | `#000000` |
|
|
35
|
+
| `color/text/primary/2` | `color` | `#FFFFFF` |
|
|
36
|
+
| `color/text/secondary` | `color` | `#000000` |
|
|
37
|
+
|
|
38
|
+
## font
|
|
39
|
+
|
|
40
|
+
| Token | Type | Value |
|
|
41
|
+
| --- | --- | --- |
|
|
42
|
+
| `font/body` | `float` | `20` |
|
|
43
|
+
| `font/body/bigger` | `float` | `20` |
|
|
44
|
+
| `font/body/bigger/family` | `string` | `PP Object Sans Variable` |
|
|
45
|
+
| `font/body/bigger/letter/spacing` | `float` | `0` |
|
|
46
|
+
| `font/body/bigger/line` | `float` | `24` |
|
|
47
|
+
| `font/body/bigger/weight` | `float` | `300` |
|
|
48
|
+
| `font/body/bigger/weight/accent` | `float` | `573` |
|
|
49
|
+
| `font/body/family` | `string` | `PP Object Sans Variable` |
|
|
50
|
+
| `font/body/letter/spacing` | `float` | `0` |
|
|
51
|
+
| `font/body/line` | `float` | `24` |
|
|
52
|
+
| `font/body/margin` | `float` | `12` |
|
|
53
|
+
| `font/body/weight` | `float` | `300` |
|
|
54
|
+
| `font/body/weight/accent` | `float` | `573` |
|
|
55
|
+
| `font/control` | `float` | `24` |
|
|
56
|
+
| `font/control/family` | `string` | `PP Object Sans Variable` |
|
|
57
|
+
| `font/control/letter/spacing` | `float` | `0` |
|
|
58
|
+
| `font/control/line` | `float` | `32` |
|
|
59
|
+
| `font/control/weight` | `float` | `400` |
|
|
60
|
+
| `font/h0` | `float` | `150` |
|
|
61
|
+
| `font/h0/family` | `string` | `PP Object Sans Variable` |
|
|
62
|
+
| `font/h0/letter/spacing` | `float` | `-0.04` |
|
|
63
|
+
| `font/h0/line` | `float` | `130` |
|
|
64
|
+
| `font/h0/margin` | `float` | `0` |
|
|
65
|
+
| `font/h0/weight` | `float` | `400` |
|
|
66
|
+
| `font/h1` | `float` | `84` |
|
|
67
|
+
| `font/h1/family` | `string` | `PP Object Sans Variable` |
|
|
68
|
+
| `font/h1/letter/spacing` | `float` | `-0.04` |
|
|
69
|
+
| `font/h1/line` | `float` | `92` |
|
|
70
|
+
| `font/h1/margin` | `float` | `24` |
|
|
71
|
+
| `font/h1/weight` | `float` | `400` |
|
|
72
|
+
| `font/h2` | `float` | `56` |
|
|
73
|
+
| `font/h2/family` | `string` | `PP Object Sans Variable` |
|
|
74
|
+
| `font/h2/letter/spacing` | `float` | `-0.04` |
|
|
75
|
+
| `font/h2/line` | `float` | `66` |
|
|
76
|
+
| `font/h2/margin` | `float` | `20` |
|
|
77
|
+
| `font/h2/weight` | `float` | `400` |
|
|
78
|
+
| `font/h3` | `float` | `46` |
|
|
79
|
+
| `font/h3/family` | `string` | `PP Object Sans Variable` |
|
|
80
|
+
| `font/h3/letter/spacing` | `float` | `-0.04` |
|
|
81
|
+
| `font/h3/line` | `float` | `48` |
|
|
82
|
+
| `font/h3/margin` | `float` | `16` |
|
|
83
|
+
| `font/h3/weight` | `float` | `400` |
|
|
84
|
+
| `font/h3/weight/accent` | `float` | `573` |
|
|
85
|
+
| `font/h4` | `float` | `28` |
|
|
86
|
+
| `font/h4/family` | `string` | `PP Object Sans Variable` |
|
|
87
|
+
| `font/h4/letter/spacing` | `float` | `0` |
|
|
88
|
+
| `font/h4/line` | `float` | `36` |
|
|
89
|
+
| `font/h4/margin` | `float` | `12` |
|
|
90
|
+
| `font/h4/weight` | `float` | `400` |
|
|
91
|
+
| `font/lead` | `float` | `24` |
|
|
92
|
+
| `font/lead/family` | `string` | `PP Object Sans Variable` |
|
|
93
|
+
| `font/lead/letter/spacing` | `float` | `0` |
|
|
94
|
+
| `font/lead/line` | `float` | `32` |
|
|
95
|
+
| `font/lead/margin` | `float` | `12` |
|
|
96
|
+
| `font/lead/weight` | `float` | `300` |
|
|
97
|
+
| `font/lead/weight/accent` | `float` | `400` |
|
|
98
|
+
| `font/note` | `float` | `16` |
|
|
99
|
+
| `font/note/family` | `string` | `PP Object Sans Variable` |
|
|
100
|
+
| `font/note/letter/spacing` | `float` | `0` |
|
|
101
|
+
| `font/note/line` | `float` | `20` |
|
|
102
|
+
| `font/note/weight` | `float` | `300` |
|
|
103
|
+
| `font/note/weight/accent` | `float` | `573` |
|
|
104
|
+
|
|
105
|
+
## margin
|
|
106
|
+
|
|
107
|
+
| Token | Type | Value |
|
|
108
|
+
| --- | --- | --- |
|
|
109
|
+
| `margin/attribute` | `float` | `0` |
|
|
110
|
+
| `margin/bullet` | `float` | `0` |
|
|
111
|
+
| `margin/choice` | `float` | `8` |
|
|
112
|
+
| `margin/container` | `float` | `20` |
|
|
113
|
+
| `margin/container/item` | `float` | `40` |
|
|
114
|
+
| `margin/control` | `float` | `16` |
|
|
115
|
+
| `margin/form/field/horz` | `float` | `0` |
|
|
116
|
+
| `margin/form/field/set` | `float` | `0` |
|
|
117
|
+
| `margin/form/field/vert` | `float` | `20` |
|
|
118
|
+
| `margin/form/label/horz` | `float` | `0` |
|
|
119
|
+
| `margin/form/label/vert` | `float` | `8` |
|
|
120
|
+
| `margin/form/tip` | `float` | `0` |
|
|
121
|
+
| `margin/icon` | `float` | `8` |
|
|
122
|
+
| `margin/item` | `float` | `20` |
|
|
123
|
+
| `margin/menu` | `float` | `20` |
|
|
124
|
+
| `margin/popup` | `float` | `0` |
|
|
125
|
+
| `margin/tab` | `float` | `0` |
|
|
126
|
+
| `margin/tag/horz` | `float` | `8` |
|
|
127
|
+
| `margin/tag/vert` | `float` | `4` |
|
|
128
|
+
| `margin/tooltip` | `float` | `0` |
|
|
129
|
+
|
|
130
|
+
## motion
|
|
131
|
+
|
|
132
|
+
| Token | Type | Value |
|
|
133
|
+
| --- | --- | --- |
|
|
134
|
+
| `motion/duration1` | `float` | `0` |
|
|
135
|
+
|
|
136
|
+
## padding
|
|
137
|
+
|
|
138
|
+
| Token | Type | Value |
|
|
139
|
+
| --- | --- | --- |
|
|
140
|
+
| `padding/arrow` | `float` | `0` |
|
|
141
|
+
| `padding/container` | `float` | `40` |
|
|
142
|
+
| `padding/control/button/horz` | `float` | `46` |
|
|
143
|
+
| `padding/control/button/icon/horz` | `float` | `29` |
|
|
144
|
+
| `padding/control/div` | `float` | `0` |
|
|
145
|
+
| `padding/control/horz` | `float` | `29` |
|
|
146
|
+
| `padding/control/more` | `float` | `0` |
|
|
147
|
+
| `padding/control/more/icon` | `float` | `0` |
|
|
148
|
+
| `padding/control/vert` | `float` | `29` |
|
|
149
|
+
| `padding/menu` | `float` | `0` |
|
|
150
|
+
| `padding/slice/bottom` | `float` | `0` |
|
|
151
|
+
| `padding/slice/top` | `float` | `0` |
|
|
152
|
+
| `padding/tab` | `float` | `16` |
|
|
153
|
+
| `padding/table/horz` | `float` | `0` |
|
|
154
|
+
| `padding/table/vert` | `float` | `0` |
|
|
155
|
+
| `padding/tag` | `float` | `4` |
|
|
156
|
+
|
|
157
|
+
## radius
|
|
158
|
+
|
|
159
|
+
| Token | Type | Value |
|
|
160
|
+
| --- | --- | --- |
|
|
161
|
+
| `radius/base` | `float` | `84` |
|
|
162
|
+
| `radius/circle` | `float` | `300` |
|
|
163
|
+
| `radius/container` | `float` | `30` |
|
|
164
|
+
| `radius/control` | `float` | `3` |
|
|
165
|
+
| `radius/control/button` | `float` | `46` |
|
|
166
|
+
| `radius/control/circle` | `float` | `300` |
|
|
167
|
+
| `radius/flowchart` | `float` | `30` |
|
|
168
|
+
| `radius/large` | `float` | `84` |
|
|
169
|
+
|
|
170
|
+
## size
|
|
171
|
+
|
|
172
|
+
| Token | Type | Value |
|
|
173
|
+
| --- | --- | --- |
|
|
174
|
+
| `size/border/width/base` | `float` | `2` |
|
|
175
|
+
| `size/border/width/icon` | `float` | `4` |
|
|
176
|
+
| `size/border/width/min` | `float` | `1` |
|
|
177
|
+
| `size/control/checkbox` | `float` | `24` |
|
|
178
|
+
| `size/control/height` | `float` | `92` |
|
|
179
|
+
| `size/control/textarea/height` | `float` | `158` |
|
|
180
|
+
| `size/grid/column/main` | `float` | `40` |
|
|
181
|
+
| `size/grid/margin` | `float` | `20` |
|
|
182
|
+
| `size/tab/height` | `float` | `36` |
|
|
183
|
+
|
|
184
|
+
## tone
|
|
185
|
+
|
|
186
|
+
| Token | Type | Value |
|
|
187
|
+
| --- | --- | --- |
|
|
188
|
+
| `tone/value1` | `float` | `0` |
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
[data-theme="redesigntrack"][data-mode="desktop"] {
|
|
2
|
+
--color-bg: #191A1A;
|
|
3
|
+
--color-bg-container: var(--color-primary-1);
|
|
4
|
+
--color-bg-contrast: #FFFFFF;
|
|
5
|
+
--color-bg-dark: #0D0D0D;
|
|
6
|
+
--color-bg-disabled: #B2B2B2;
|
|
7
|
+
--color-bg-placeholder: #EBEFF2;
|
|
8
|
+
--color-bg-true-black: #000000;
|
|
9
|
+
--color-contrast: #FFFFFF;
|
|
10
|
+
--color-control: #FFFFFF;
|
|
11
|
+
--color-line: #FFFFFF;
|
|
12
|
+
--color-line-bad: var(--color-primary-2);
|
|
13
|
+
--color-line-contrast: #000000;
|
|
14
|
+
--color-line-good: var(--color-primary-1);
|
|
15
|
+
--color-line-grid: #3E3F40;
|
|
16
|
+
--color-line-med: #FF7300;
|
|
17
|
+
--color-line-semi-bad: #FF4000;
|
|
18
|
+
--color-line-semi-good: #FFBF00;
|
|
19
|
+
--color-link: var(--color-primary-2);
|
|
20
|
+
--color-link-visited: var(--color-primary-2);
|
|
21
|
+
--color-primary-1: #F9EC0E;
|
|
22
|
+
--color-primary-2: #FA4691;
|
|
23
|
+
--color-secondary: #FFFFFF;
|
|
24
|
+
--color-text: #FFFFFF;
|
|
25
|
+
--color-text-container: #000000;
|
|
26
|
+
--color-text-contrast: #000000;
|
|
27
|
+
--color-text-control: #000000;
|
|
28
|
+
--color-text-note: #BABDBF;
|
|
29
|
+
--color-text-primary-1: #000000;
|
|
30
|
+
--color-text-primary-2: #FFFFFF;
|
|
31
|
+
--color-text-secondary: #000000;
|
|
32
|
+
--font-body: 20px;
|
|
33
|
+
--font-body-bigger: 20px;
|
|
34
|
+
--font-body-bigger-family: PP Object Sans Variable;
|
|
35
|
+
--font-body-bigger-letter-spacing: 0px;
|
|
36
|
+
--font-body-bigger-line: 24px;
|
|
37
|
+
--font-body-bigger-weight: 300px;
|
|
38
|
+
--font-body-bigger-weight-accent: 573px;
|
|
39
|
+
--font-body-family: PP Object Sans Variable;
|
|
40
|
+
--font-body-letter-spacing: 0px;
|
|
41
|
+
--font-body-line: 24px;
|
|
42
|
+
--font-body-margin: 12px;
|
|
43
|
+
--font-body-weight: 300px;
|
|
44
|
+
--font-body-weight-accent: 573px;
|
|
45
|
+
--font-control: var(--font-lead);
|
|
46
|
+
--font-control-family: PP Object Sans Variable;
|
|
47
|
+
--font-control-letter-spacing: 0px;
|
|
48
|
+
--font-control-line: var(--font-lead-line);
|
|
49
|
+
--font-control-weight: 400px;
|
|
50
|
+
--font-h0: 150px;
|
|
51
|
+
--font-h0-family: PP Object Sans Variable;
|
|
52
|
+
--font-h0-letter-spacing: -0.04px;
|
|
53
|
+
--font-h0-line: 130px;
|
|
54
|
+
--font-h0-margin: 0px;
|
|
55
|
+
--font-h0-weight: 400px;
|
|
56
|
+
--font-h1: 84px;
|
|
57
|
+
--font-h1-family: PP Object Sans Variable;
|
|
58
|
+
--font-h1-letter-spacing: -0.04px;
|
|
59
|
+
--font-h1-line: 92px;
|
|
60
|
+
--font-h1-margin: 24px;
|
|
61
|
+
--font-h1-weight: 400px;
|
|
62
|
+
--font-h2: 56px;
|
|
63
|
+
--font-h2-family: PP Object Sans Variable;
|
|
64
|
+
--font-h2-letter-spacing: -0.04px;
|
|
65
|
+
--font-h2-line: 66px;
|
|
66
|
+
--font-h2-margin: 20px;
|
|
67
|
+
--font-h2-weight: 400px;
|
|
68
|
+
--font-h3: 46px;
|
|
69
|
+
--font-h3-family: PP Object Sans Variable;
|
|
70
|
+
--font-h3-letter-spacing: -0.04px;
|
|
71
|
+
--font-h3-line: 48px;
|
|
72
|
+
--font-h3-margin: 16px;
|
|
73
|
+
--font-h3-weight: 400px;
|
|
74
|
+
--font-h3-weight-accent: 573px;
|
|
75
|
+
--font-h4: 28px;
|
|
76
|
+
--font-h4-family: PP Object Sans Variable;
|
|
77
|
+
--font-h4-letter-spacing: 0px;
|
|
78
|
+
--font-h4-line: 36px;
|
|
79
|
+
--font-h4-margin: 12px;
|
|
80
|
+
--font-h4-weight: 400px;
|
|
81
|
+
--font-lead: 24px;
|
|
82
|
+
--font-lead-family: PP Object Sans Variable;
|
|
83
|
+
--font-lead-letter-spacing: 0px;
|
|
84
|
+
--font-lead-line: 32px;
|
|
85
|
+
--font-lead-margin: 12px;
|
|
86
|
+
--font-lead-weight: 300px;
|
|
87
|
+
--font-lead-weight-accent: 400px;
|
|
88
|
+
--font-note: 16px;
|
|
89
|
+
--font-note-family: PP Object Sans Variable;
|
|
90
|
+
--font-note-letter-spacing: 0px;
|
|
91
|
+
--font-note-line: 20px;
|
|
92
|
+
--font-note-weight: 300px;
|
|
93
|
+
--font-note-weight-accent: 573px;
|
|
94
|
+
--margin-attribute: 0px;
|
|
95
|
+
--margin-bullet: 0px;
|
|
96
|
+
--margin-choice: 8px;
|
|
97
|
+
--margin-container: 20px;
|
|
98
|
+
--margin-container-item: 40px;
|
|
99
|
+
--margin-control: 16px;
|
|
100
|
+
--margin-form-field-horz: 0px;
|
|
101
|
+
--margin-form-field-set: 0px;
|
|
102
|
+
--margin-form-field-vert: 20px;
|
|
103
|
+
--margin-form-label-horz: 0px;
|
|
104
|
+
--margin-form-label-vert: 8px;
|
|
105
|
+
--margin-form-tip: 0px;
|
|
106
|
+
--margin-icon: 8px;
|
|
107
|
+
--margin-item: 20px;
|
|
108
|
+
--margin-menu: 20px;
|
|
109
|
+
--margin-popup: 0px;
|
|
110
|
+
--margin-tab: 0px;
|
|
111
|
+
--margin-tag-horz: 8px;
|
|
112
|
+
--margin-tag-vert: 4px;
|
|
113
|
+
--margin-tooltip: 0px;
|
|
114
|
+
--motion-duration1: 0px;
|
|
115
|
+
--padding-arrow: 0px;
|
|
116
|
+
--padding-container: 40px;
|
|
117
|
+
--padding-control-button-horz: 46px;
|
|
118
|
+
--padding-control-button-icon-horz: var(--padding-control-horz);
|
|
119
|
+
--padding-control-div: 0px;
|
|
120
|
+
--padding-control-horz: 29px;
|
|
121
|
+
--padding-control-more: 0px;
|
|
122
|
+
--padding-control-more-icon: 0px;
|
|
123
|
+
--padding-control-vert: var(--padding-control-horz);
|
|
124
|
+
--padding-menu: 0px;
|
|
125
|
+
--padding-slice-bottom: 0px;
|
|
126
|
+
--padding-slice-top: 0px;
|
|
127
|
+
--padding-tab: 16px;
|
|
128
|
+
--padding-table-horz: 0px;
|
|
129
|
+
--padding-table-vert: 0px;
|
|
130
|
+
--padding-tag: 4px;
|
|
131
|
+
--radius-base: 84px;
|
|
132
|
+
--radius-circle: 300px;
|
|
133
|
+
--radius-container: 30px;
|
|
134
|
+
--radius-control: 3px;
|
|
135
|
+
--radius-control-button: 46px;
|
|
136
|
+
--radius-control-circle: var(--radius-circle);
|
|
137
|
+
--radius-flowchart: 30px;
|
|
138
|
+
--radius-large: 84px;
|
|
139
|
+
--size-border-width-base: 2px;
|
|
140
|
+
--size-border-width-icon: 4px;
|
|
141
|
+
--size-border-width-min: 1px;
|
|
142
|
+
--size-control-checkbox: 24px;
|
|
143
|
+
--size-control-height: 92px;
|
|
144
|
+
--size-control-textarea-height: 158px;
|
|
145
|
+
--size-grid-column-main: 40px;
|
|
146
|
+
--size-grid-margin: 20px;
|
|
147
|
+
--size-tab-height: 36px;
|
|
148
|
+
--tone-value1: 0px;
|
|
149
|
+
}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--color-bg: #0D0D0D;
|
|
3
|
+
--color-bg-container: var(--color-primary-1);
|
|
4
|
+
--color-bg-contrast: #FFFFFF;
|
|
5
|
+
--color-bg-dark: #0D0D0D;
|
|
6
|
+
--color-bg-disabled: #B2B2B2;
|
|
7
|
+
--color-bg-placeholder: #EBEFF2;
|
|
8
|
+
--color-bg-true-black: #000000;
|
|
9
|
+
--color-contrast: #FFFFFF;
|
|
10
|
+
--color-control: #FFFFFF;
|
|
11
|
+
--color-line: #FFFFFF;
|
|
12
|
+
--color-line-bad: var(--color-primary-2);
|
|
13
|
+
--color-line-contrast: #000000;
|
|
14
|
+
--color-line-good: var(--color-primary-1);
|
|
15
|
+
--color-line-grid: #3E3F40;
|
|
16
|
+
--color-line-med: #FF7300;
|
|
17
|
+
--color-line-semi-bad: #FF4000;
|
|
18
|
+
--color-line-semi-good: #FFBF00;
|
|
19
|
+
--color-link: var(--color-primary-2);
|
|
20
|
+
--color-link-visited: var(--color-primary-2);
|
|
21
|
+
--color-primary-1: #F9EC0E;
|
|
22
|
+
--color-primary-2: #FA4691;
|
|
23
|
+
--color-secondary: #FFFFFF;
|
|
24
|
+
--color-text: #FFFFFF;
|
|
25
|
+
--color-text-container: #000000;
|
|
26
|
+
--color-text-contrast: #000000;
|
|
27
|
+
--color-text-control: #000000;
|
|
28
|
+
--color-text-note: #BABDBF;
|
|
29
|
+
--color-text-primary-1: #000000;
|
|
30
|
+
--color-text-primary-2: #FFFFFF;
|
|
31
|
+
--color-text-secondary: #000000;
|
|
32
|
+
--font-body: 20px;
|
|
33
|
+
--font-body-bigger: 24px;
|
|
34
|
+
--font-body-bigger-family: PP Object Sans Variable;
|
|
35
|
+
--font-body-bigger-letter-spacing: 0px;
|
|
36
|
+
--font-body-bigger-line: 32px;
|
|
37
|
+
--font-body-bigger-weight: 300px;
|
|
38
|
+
--font-body-bigger-weight-accent: 573px;
|
|
39
|
+
--font-body-family: PP Object Sans Variable;
|
|
40
|
+
--font-body-letter-spacing: 0px;
|
|
41
|
+
--font-body-line: 24px;
|
|
42
|
+
--font-body-margin: 8px;
|
|
43
|
+
--font-body-weight: 300px;
|
|
44
|
+
--font-body-weight-accent: 573px;
|
|
45
|
+
--font-control: var(--font-lead);
|
|
46
|
+
--font-control-family: PP Object Sans Variable;
|
|
47
|
+
--font-control-letter-spacing: 0px;
|
|
48
|
+
--font-control-line: var(--font-lead-line);
|
|
49
|
+
--font-control-weight: 400px;
|
|
50
|
+
--font-h0: 46px;
|
|
51
|
+
--font-h0-family: PP Object Sans Variable;
|
|
52
|
+
--font-h0-letter-spacing: -0.04px;
|
|
53
|
+
--font-h0-line: 48px;
|
|
54
|
+
--font-h0-margin: 0px;
|
|
55
|
+
--font-h0-weight: 400px;
|
|
56
|
+
--font-h1: 56px;
|
|
57
|
+
--font-h1-family: PP Object Sans Variable;
|
|
58
|
+
--font-h1-letter-spacing: -0.04px;
|
|
59
|
+
--font-h1-line: 66px;
|
|
60
|
+
--font-h1-margin: 24px;
|
|
61
|
+
--font-h1-weight: 400px;
|
|
62
|
+
--font-h2: 24px;
|
|
63
|
+
--font-h2-family: PP Object Sans Variable;
|
|
64
|
+
--font-h2-letter-spacing: -0.04px;
|
|
65
|
+
--font-h2-line: 32px;
|
|
66
|
+
--font-h2-margin: 20px;
|
|
67
|
+
--font-h2-weight: 400px;
|
|
68
|
+
--font-h3: 28px;
|
|
69
|
+
--font-h3-family: PP Object Sans Variable;
|
|
70
|
+
--font-h3-letter-spacing: -0.04px;
|
|
71
|
+
--font-h3-line: 36px;
|
|
72
|
+
--font-h3-margin: 16px;
|
|
73
|
+
--font-h3-weight: 400px;
|
|
74
|
+
--font-h3-weight-accent: 573px;
|
|
75
|
+
--font-h4: 20px;
|
|
76
|
+
--font-h4-family: PP Object Sans Variable;
|
|
77
|
+
--font-h4-letter-spacing: 0px;
|
|
78
|
+
--font-h4-line: 24px;
|
|
79
|
+
--font-h4-margin: 12px;
|
|
80
|
+
--font-h4-weight: 400px;
|
|
81
|
+
--font-lead: 20px;
|
|
82
|
+
--font-lead-family: PP Object Sans Variable;
|
|
83
|
+
--font-lead-letter-spacing: 0px;
|
|
84
|
+
--font-lead-line: 24px;
|
|
85
|
+
--font-lead-margin: 12px;
|
|
86
|
+
--font-lead-weight: 300px;
|
|
87
|
+
--font-lead-weight-accent: 400px;
|
|
88
|
+
--font-note: 16px;
|
|
89
|
+
--font-note-family: PP Object Sans Variable;
|
|
90
|
+
--font-note-letter-spacing: 0px;
|
|
91
|
+
--font-note-line: 20px;
|
|
92
|
+
--font-note-weight: 300px;
|
|
93
|
+
--font-note-weight-accent: 573px;
|
|
94
|
+
--margin-attribute: 0px;
|
|
95
|
+
--margin-bullet: 0px;
|
|
96
|
+
--margin-choice: 8px;
|
|
97
|
+
--margin-container: 20px;
|
|
98
|
+
--margin-container-item: 40px;
|
|
99
|
+
--margin-control: 16px;
|
|
100
|
+
--margin-form-field-horz: 0px;
|
|
101
|
+
--margin-form-field-set: 0px;
|
|
102
|
+
--margin-form-field-vert: 20px;
|
|
103
|
+
--margin-form-label-horz: 0px;
|
|
104
|
+
--margin-form-label-vert: 8px;
|
|
105
|
+
--margin-form-tip: 0px;
|
|
106
|
+
--margin-icon: 8px;
|
|
107
|
+
--margin-item: 20px;
|
|
108
|
+
--margin-menu: 20px;
|
|
109
|
+
--margin-popup: 0px;
|
|
110
|
+
--margin-tab: 0px;
|
|
111
|
+
--margin-tag-horz: 8px;
|
|
112
|
+
--margin-tag-vert: 4px;
|
|
113
|
+
--margin-tooltip: 0px;
|
|
114
|
+
--motion-duration1: 0px;
|
|
115
|
+
--padding-arrow: 0px;
|
|
116
|
+
--padding-container: 40px;
|
|
117
|
+
--padding-control-button-horz: 46px;
|
|
118
|
+
--padding-control-button-icon-horz: var(--padding-control-horz);
|
|
119
|
+
--padding-control-div: 0px;
|
|
120
|
+
--padding-control-horz: 29px;
|
|
121
|
+
--padding-control-more: 0px;
|
|
122
|
+
--padding-control-more-icon: 0px;
|
|
123
|
+
--padding-control-vert: var(--padding-control-horz);
|
|
124
|
+
--padding-menu: 0px;
|
|
125
|
+
--padding-slice-bottom: 0px;
|
|
126
|
+
--padding-slice-top: 0px;
|
|
127
|
+
--padding-tab: 16px;
|
|
128
|
+
--padding-table-horz: 0px;
|
|
129
|
+
--padding-table-vert: 0px;
|
|
130
|
+
--padding-tag: 4px;
|
|
131
|
+
--radius-base: 46px;
|
|
132
|
+
--radius-circle: 300px;
|
|
133
|
+
--radius-container: 30px;
|
|
134
|
+
--radius-control: 3px;
|
|
135
|
+
--radius-control-button: 46px;
|
|
136
|
+
--radius-control-circle: var(--radius-circle);
|
|
137
|
+
--radius-flowchart: 30px;
|
|
138
|
+
--radius-large: 84px;
|
|
139
|
+
--size-border-width-base: 2px;
|
|
140
|
+
--size-border-width-icon: 4px;
|
|
141
|
+
--size-border-width-min: 1px;
|
|
142
|
+
--size-control-checkbox: 24px;
|
|
143
|
+
--size-control-height: 92px;
|
|
144
|
+
--size-control-textarea-height: 158px;
|
|
145
|
+
--size-grid-column-main: 40px;
|
|
146
|
+
--size-grid-margin: 20px;
|
|
147
|
+
--size-tab-height: 36px;
|
|
148
|
+
--tone-value1: 0px;
|
|
149
|
+
}
|