@agorapulse/ui-theme 15.0.21 → 15.0.23

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 (15) hide show
  1. package/agorapulse-ui-theme-15.0.23.tgz +0 -0
  2. package/assets/desktop_variables.css +43 -5
  3. package/assets/mobile_variables.css +43 -5
  4. package/assets/style/_link.scss +80 -0
  5. package/assets/style/_mat-typography.scss +7 -12
  6. package/assets/style/_tooltip.scss +134 -0
  7. package/assets/style/components-custom-style/_clickable-text.scss +1 -1
  8. package/assets/style/theme.scss +12 -9
  9. package/package.json +1 -1
  10. package/src/tokens/components/link.json +127 -0
  11. package/src/tokens/components/tooltip.json +36 -0
  12. package/src/tokens/reference/animation.json +18 -0
  13. package/src/tokens/system/color.json +5 -5
  14. package/agorapulse-ui-theme-15.0.21.tgz +0 -0
  15. /package/src/tokens/{component → components}/radio.json +0 -0
package/agorapulse-ui-theme-15.0.23.tgz ADDED
Binary file
package/assets/desktop_variables.css CHANGED
@@ -1,4 +1,8 @@
1
1
  :root {
2
+ --ref-animation-long: 400ms;
3
+ --ref-animation-normal: 250ms;
4
+ --ref-animation-short: 150ms;
5
+ --ref-animation-xshort: 75ms;
2
6
  --ref-border-radius-sm: 4px;
3
7
  --ref-border-radius-md: 6px;
4
8
  --ref-border-radius-lg: 8px;
@@ -139,7 +143,7 @@
139
143
  --sys-color-main-light-bg: #FFEFE9;
140
144
  --sys-color-main-light-text: #C83E07;
141
145
  --sys-color-main-text: #FF6726;
142
- --sys-color-accent-default-bg: #178DFE;
146
+ --sys-color-accent-default-bg-default: #178DFE;
143
147
  --sys-color-accent-default-bg-hover: #3A9EFE;
144
148
  --sys-color-accent-default-bg-clicked: #74BBFE;
145
149
  --sys-color-accent-default-bg-disabled: #D1E8FF;
@@ -147,7 +151,7 @@
147
151
  --sys-color-accent-light-bg: #F3F9FF;
148
152
  --sys-color-accent-light-text: #0E72D6;
149
153
  --sys-color-accent-text: #178DFE;
150
- --sys-color-error-default-bg: #E81313;
154
+ --sys-color-error-default-bg-default: #E81313;
151
155
  --sys-color-error-default-bg-hover: #EB3636;
152
156
  --sys-color-error-default-bg-clicked: #F17171;
153
157
  --sys-color-error-default-bg-disabled: #FAD0D0;
@@ -155,7 +159,7 @@
155
159
  --sys-color-error-light-bg: #FDE7E7;
156
160
  --sys-color-error-light-text: #D80505;
157
161
  --sys-color-error-text: #E81313;
158
- --sys-color-warning-default-bg: #FFE91F;
162
+ --sys-color-warning-default-bg-default: #FFE91F;
159
163
  --sys-color-warning-default-bg-hover: #FFEC41;
160
164
  --sys-color-warning-default-bg-clicked: #FFF279;
161
165
  --sys-color-warning-default-bg-disabled: #FFFBD2;
@@ -163,7 +167,7 @@
163
167
  --sys-color-warning-light-bg: #FFFDE9;
164
168
  --sys-color-warning-light-text: #A56608;
165
169
  --sys-color-warning-text: #FFE91F;
166
- --sys-color-success-default-bg: #45B854;
170
+ --sys-color-success-default-bg-default: #45B854;
167
171
  --sys-color-success-default-bg-hover: #61C26D;
168
172
  --sys-color-success-default-bg-clicked: #8FD498;
169
173
  --sys-color-success-default-bg-disabled: #DAF1DD;
@@ -171,7 +175,7 @@
171
175
  --sys-color-success-light-bg: #ECF7ED;
172
176
  --sys-color-success-light-text: #0F821D;
173
177
  --sys-color-success-text: #45B854;
174
- --sys-color-feature-lock-default-bg: #6554C0;
178
+ --sys-color-feature-lock-default-bg-default: #6554C0;
175
179
  --sys-color-feature-lock-default-bg-hover: #7C6DC9;
176
180
  --sys-color-feature-lock-default-bg-clicked: #A398D9;
177
181
  --sys-color-feature-lock-default-bg-disabled: #E0DDF2;
@@ -275,6 +279,34 @@
275
279
  --comp-infobox-success-background-color: #DAF1DD;
276
280
  --comp-infobox-success-border-left-color: #0F821D;
277
281
  --comp-infobox-success-icon-color: #0F821D;
282
+ --comp-link-text-font-family: Averta;
283
+ --comp-link-text-size: 14px;
284
+ --comp-link-text-font-weight: 400;
285
+ --comp-link-text-line-height: 18px;
286
+ --comp-link-small-text-style-font-family: Averta;
287
+ --comp-link-small-text-style-size: 12px;
288
+ --comp-link-small-text-style-font-weight: 400;
289
+ --comp-link-small-text-style-line-height: 16px;
290
+ --comp-link-big-text-style-font-family: Averta;
291
+ --comp-link-big-text-style-size: 16px;
292
+ --comp-link-big-text-style-font-weight: 400;
293
+ --comp-link-big-text-style-line-height: 20px;
294
+ --comp-link-standalone-default-text-style-font-family: Averta;
295
+ --comp-link-standalone-default-text-style-size: 14px;
296
+ --comp-link-standalone-default-text-style-font-weight: 700;
297
+ --comp-link-standalone-default-text-style-line-height: 18px;
298
+ --comp-link-standalone-small-text-style-font-family: Averta;
299
+ --comp-link-standalone-small-text-style-size: 12px;
300
+ --comp-link-standalone-small-text-style-font-weight: 400;
301
+ --comp-link-standalone-small-text-style-line-height: 16px;
302
+ --comp-link-default-color: #178DFE;
303
+ --comp-link-hover-color: #3A9EFE;
304
+ --comp-link-clicked-color: #0E72D6;
305
+ --comp-link-disabled-color: #D1E8FF;
306
+ --comp-link-visited-color: #3C2C95;
307
+ --comp-link-spacing: 4px;
308
+ --comp-link-icon-size: 16px;
309
+ --comp-radio-transition-duration: 250ms;
278
310
  --comp-split-button-text-size: 14px;
279
311
  --comp-split-button-text-font-family: Averta;
280
312
  --comp-split-button-text-weight: 700;
@@ -283,4 +315,10 @@
283
315
  --comp-split-button-padding-vertical: 16px;
284
316
  --comp-split-button-border-radius: 4px;
285
317
  --comp-split-button-spacing: 8px;
318
+ --comp-tooltip-text-style-font-family: Averta;
319
+ --comp-tooltip-text-style-size: 14px;
320
+ --comp-tooltip-text-style-weight: 400;
321
+ --comp-tooltip-text-style-line-height: 18px;
322
+ --comp-tooltip-text-default-color: #FFFFFF;
323
+ --comp-tooltip-text-color-main-default-bg: #344563;
286
324
  }
package/assets/mobile_variables.css CHANGED
@@ -1,4 +1,8 @@
1
1
  :root {
2
+ --ref-animation-long: 400ms;
3
+ --ref-animation-normal: 250ms;
4
+ --ref-animation-short: 150ms;
5
+ --ref-animation-xshort: 75ms;
2
6
  --ref-border-radius-sm: 4px;
3
7
  --ref-border-radius-md: 6px;
4
8
  --ref-border-radius-lg: 8px;
@@ -139,7 +143,7 @@
139
143
  --sys-color-main-light-bg: #FFEFE9;
140
144
  --sys-color-main-light-text: #C83E07;
141
145
  --sys-color-main-text: #FF6726;
142
- --sys-color-accent-default-bg: #178DFE;
146
+ --sys-color-accent-default-bg-default: #178DFE;
143
147
  --sys-color-accent-default-bg-hover: #3A9EFE;
144
148
  --sys-color-accent-default-bg-clicked: #74BBFE;
145
149
  --sys-color-accent-default-bg-disabled: #D1E8FF;
@@ -147,7 +151,7 @@
147
151
  --sys-color-accent-light-bg: #F3F9FF;
148
152
  --sys-color-accent-light-text: #0E72D6;
149
153
  --sys-color-accent-text: #178DFE;
150
- --sys-color-error-default-bg: #E81313;
154
+ --sys-color-error-default-bg-default: #E81313;
151
155
  --sys-color-error-default-bg-hover: #EB3636;
152
156
  --sys-color-error-default-bg-clicked: #F17171;
153
157
  --sys-color-error-default-bg-disabled: #FAD0D0;
@@ -155,7 +159,7 @@
155
159
  --sys-color-error-light-bg: #FDE7E7;
156
160
  --sys-color-error-light-text: #D80505;
157
161
  --sys-color-error-text: #E81313;
158
- --sys-color-warning-default-bg: #FFE91F;
162
+ --sys-color-warning-default-bg-default: #FFE91F;
159
163
  --sys-color-warning-default-bg-hover: #FFEC41;
160
164
  --sys-color-warning-default-bg-clicked: #FFF279;
161
165
  --sys-color-warning-default-bg-disabled: #FFFBD2;
@@ -163,7 +167,7 @@
163
167
  --sys-color-warning-light-bg: #FFFDE9;
164
168
  --sys-color-warning-light-text: #A56608;
165
169
  --sys-color-warning-text: #FFE91F;
166
- --sys-color-success-default-bg: #45B854;
170
+ --sys-color-success-default-bg-default: #45B854;
167
171
  --sys-color-success-default-bg-hover: #61C26D;
168
172
  --sys-color-success-default-bg-clicked: #8FD498;
169
173
  --sys-color-success-default-bg-disabled: #DAF1DD;
@@ -171,7 +175,7 @@
171
175
  --sys-color-success-light-bg: #ECF7ED;
172
176
  --sys-color-success-light-text: #0F821D;
173
177
  --sys-color-success-text: #45B854;
174
- --sys-color-feature-lock-default-bg: #6554C0;
178
+ --sys-color-feature-lock-default-bg-default: #6554C0;
175
179
  --sys-color-feature-lock-default-bg-hover: #7C6DC9;
176
180
  --sys-color-feature-lock-default-bg-clicked: #A398D9;
177
181
  --sys-color-feature-lock-default-bg-disabled: #E0DDF2;
@@ -275,6 +279,34 @@
275
279
  --comp-infobox-success-background-color: #DAF1DD;
276
280
  --comp-infobox-success-border-left-color: #0F821D;
277
281
  --comp-infobox-success-icon-color: #0F821D;
282
+ --comp-link-text-font-family: Averta;
283
+ --comp-link-text-size: 14px;
284
+ --comp-link-text-font-weight: 400;
285
+ --comp-link-text-line-height: 18px;
286
+ --comp-link-small-text-style-font-family: Averta;
287
+ --comp-link-small-text-style-size: 12px;
288
+ --comp-link-small-text-style-font-weight: 400;
289
+ --comp-link-small-text-style-line-height: 16px;
290
+ --comp-link-big-text-style-font-family: Averta;
291
+ --comp-link-big-text-style-size: 16px;
292
+ --comp-link-big-text-style-font-weight: 400;
293
+ --comp-link-big-text-style-line-height: 20px;
294
+ --comp-link-standalone-default-text-style-font-family: Averta;
295
+ --comp-link-standalone-default-text-style-size: 14px;
296
+ --comp-link-standalone-default-text-style-font-weight: 700;
297
+ --comp-link-standalone-default-text-style-line-height: 18px;
298
+ --comp-link-standalone-small-text-style-font-family: Averta;
299
+ --comp-link-standalone-small-text-style-size: 12px;
300
+ --comp-link-standalone-small-text-style-font-weight: 400;
301
+ --comp-link-standalone-small-text-style-line-height: 16px;
302
+ --comp-link-default-color: #178DFE;
303
+ --comp-link-hover-color: #3A9EFE;
304
+ --comp-link-clicked-color: #0E72D6;
305
+ --comp-link-disabled-color: #D1E8FF;
306
+ --comp-link-visited-color: #3C2C95;
307
+ --comp-link-spacing: 4px;
308
+ --comp-link-icon-size: 16px;
309
+ --comp-radio-transition-duration: 250ms;
278
310
  --comp-split-button-text-size: 14px;
279
311
  --comp-split-button-text-font-family: Averta;
280
312
  --comp-split-button-text-weight: 700;
@@ -283,4 +315,10 @@
283
315
  --comp-split-button-padding-vertical: 16px;
284
316
  --comp-split-button-border-radius: 4px;
285
317
  --comp-split-button-spacing: 8px;
318
+ --comp-tooltip-text-style-font-family: Averta;
319
+ --comp-tooltip-text-style-size: 14px;
320
+ --comp-tooltip-text-style-weight: 400;
321
+ --comp-tooltip-text-style-line-height: 18px;
322
+ --comp-tooltip-text-default-color: #FFFFFF;
323
+ --comp-tooltip-text-color-main-default-bg: #344563;
286
324
  }
package/assets/style/_link.scss ADDED
@@ -0,0 +1,80 @@
1
+ a {
2
+ display: flex;
3
+ gap: var(--comp-link-spacing);
4
+ font-family: var(--comp-link-text-font-family);
5
+ font-weight: var(--comp-link-text-font-weight);
6
+ line-height: var(--comp-link-text-line-height);
7
+ font-size: var(--comp-link-text-size);
8
+ align-items: center;
9
+ text-decoration: underline;
10
+ -webkit-tap-highlight-color: transparent;
11
+
12
+ &.small {
13
+ font-family: var(--comp-link-small-text-style-font-family);
14
+ font-weight: var(--comp-link-small-text-style-font-weight);
15
+ line-height: var(--comp-link-small-text-style-line-height);
16
+ font-size: var(--comp-link-small-text-style-size);
17
+ }
18
+
19
+ &.big {
20
+ font-family: var(--comp-link-big-text-style-font-family);
21
+ font-weight: var(--comp-link-big-text-style-font-weight);
22
+ line-height: var(--comp-link-big-text-style-line-height);
23
+ font-size: var(--comp-link-big-text-style-size);
24
+ }
25
+
26
+ &:not(:visited) {
27
+ color: var(--comp-link-default-color);
28
+ }
29
+
30
+ &:hover {
31
+ color: var(--comp-link-hover-color);
32
+ }
33
+
34
+ &:active:not(:visited) {
35
+ color: var(--comp-link-clicked-color);
36
+ }
37
+
38
+ &:visited {
39
+ color: var(--comp-link-visited-color);
40
+ }
41
+
42
+ &[disabled='true'] {
43
+ color: var(--comp-link-disabled-color);
44
+ pointer-events: none;
45
+ }
46
+
47
+ ap-symbol {
48
+ min-width: var(--comp-link-icon-size);
49
+ min-height: var(--comp-link-icon-size);
50
+ max-width: var(--comp-link-icon-size);
51
+ max-height: var(--comp-link-icon-size);
52
+ }
53
+
54
+ &.standalone {
55
+ text-decoration: none;
56
+ font-family: var(--comp-link-standalone-default-text-style-font-family);
57
+ font-weight: var(--comp-link-standalone-default-text-style-font-weight);
58
+ line-height: var(--comp-link-standalone-default-text-style-line-height);
59
+ font-size: var(--comp-link-standalone-default-text-style-size);
60
+
61
+ &.small {
62
+ font-family: var(--comp-link-standalone-small-text-style-font-family);
63
+ font-weight: var(--comp-link-standalone-small-text-style-font-weight);
64
+ line-height: var(--comp-link-standalone-small-text-style-line-height);
65
+ font-size: var(--comp-link-standalone-small-text-style-size);
66
+ }
67
+
68
+ &:visited {
69
+ color: var(--comp-link-visited-color) !important;
70
+
71
+ ap-symbol {
72
+ color: var(--comp-link-visited-color) !important;
73
+
74
+ .svg {
75
+ color: var(--comp-link-visited-color) !important;
76
+ }
77
+ }
78
+ }
79
+ }
80
+ }
package/assets/style/_mat-typography.scss CHANGED
@@ -15,13 +15,16 @@ $custom-typography: mat.define-legacy-typography-config(
15
15
  $body-1: mat.define-typography-level($font-size, $font-line-height, $font-weight),
16
16
  $body-2: mat.define-typography-level($font-size, $font-line-height, $font-weight-semibold),
17
17
  $caption: mat.define-typography-level($font-size-s, $font-line-height-s, $font-weight)
18
- //$button: mat.define-typography-level(16px, 24px, 500),
19
- //$input: mat.define-typography-level(16px, 24px, 500)
18
+ //$button: mat.define-typography-level(16px, 24px, 500),
19
+ //$input: mat.define-typography-level(16px, 24px, 500),
20
20
  );
21
21
  @include mat.all-legacy-component-typographies($custom-typography);
22
22
 
23
23
  // Override base header tags (so that we don't have to add Material classes, e.g: class="mat-h1")
24
- h1, h2, h3, h4 {
24
+ h1,
25
+ h2,
26
+ h3,
27
+ h4 {
25
28
  color: $color-black;
26
29
  font-family: $font-family-header;
27
30
  }
@@ -70,15 +73,7 @@ small {
70
73
 
71
74
  // Override default text state
72
75
  body {
73
- .mat-drawer-container{
76
+ .mat-drawer-container {
74
77
  color: $font-color;
75
78
  }
76
79
  }
77
-
78
- a {
79
- color: $link-color;
80
- text-decoration: none;
81
-
82
- // Gets rid of tap active state
83
- -webkit-tap-highlight-color: transparent;
84
- }
package/assets/style/_tooltip.scss ADDED
@@ -0,0 +1,134 @@
1
+ .ap-tooltip {
2
+ --ap-arrow-width: 16px;
3
+ --ap-arrow-height: 8px;
4
+ --ap-arrow-offset: 10px;
5
+
6
+ width: fit-content;
7
+ max-width: 350px;
8
+ background: var(--ref-color-grey-100);
9
+ border-radius: var(--ref-border-radius-md);
10
+ position: absolute;
11
+ z-index: 9999;
12
+ animation: fadeIn var(--ref-animation-short) ease-in-out;
13
+
14
+ @keyframes fadeIn {
15
+ 0% {
16
+ opacity: 0;
17
+ }
18
+ 100% {
19
+ opacity: 1;
20
+ }
21
+ }
22
+
23
+ .ap-content-container {
24
+ padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
25
+ border-radius: var(--ref-border-radius-md);
26
+
27
+ .ap-tooltip-text {
28
+ color: var(--ref-color-white);
29
+ }
30
+
31
+ .ap-tooltip-arrow {
32
+ color: var(--ref-color-grey-100);
33
+ position: absolute;
34
+ z-index: 10000;
35
+ width: var(--ap-arrow-width);
36
+ height: var(--ap-arrow-height);
37
+ display: block;
38
+
39
+ path {
40
+ fill: currentColor;
41
+ }
42
+ }
43
+ }
44
+ &.ap-tooltip-top,
45
+ &.ap-tooltip-bottom {
46
+ .ap-tooltip-arrow {
47
+ margin: auto;
48
+ right: 0;
49
+ left: 0;
50
+ }
51
+ }
52
+
53
+ &.ap-tooltip-top,
54
+ &.ap-tooltip-bottom,
55
+ &.ap-tooltip-top-left,
56
+ &.ap-tooltip-top-right,
57
+ &.ap-tooltip-bottom-left,
58
+ &.ap-tooltip-bottom-right {
59
+ .ap-tooltip-arrow {
60
+ transform: translateY(7px) rotate(180deg);
61
+ }
62
+ }
63
+
64
+ &.ap-tooltip-top-left,
65
+ &.ap-tooltip-bottom-left {
66
+ .ap-tooltip-arrow {
67
+ left: var(--ap-arrow-offset);
68
+ }
69
+ }
70
+
71
+ &.ap-tooltip-top-right,
72
+ &.ap-tooltip-bottom-right {
73
+ .ap-tooltip-arrow {
74
+ right: var(--ap-arrow-offset);
75
+ }
76
+ }
77
+
78
+ &.ap-tooltip-bottom,
79
+ &.ap-tooltip-bottom-right,
80
+ &.ap-tooltip-bottom-left {
81
+ .ap-tooltip-arrow {
82
+ top: 0;
83
+ rotate: 180deg;
84
+ }
85
+ }
86
+
87
+ &.ap-tooltip-top,
88
+ &.ap-tooltip-top-right,
89
+ &.ap-tooltip-top-left {
90
+ .ap-tooltip-arrow {
91
+ bottom: 0;
92
+ }
93
+ }
94
+
95
+ &.ap-tooltip-right {
96
+ .ap-tooltip-arrow {
97
+ top: 0;
98
+ left: 0;
99
+ transform: scale(-1) translateY(-11px) translateX(calc((var(--ap-tooltip-height) / 2 - 4px) * -1));
100
+ rotate: 90deg;
101
+ }
102
+ }
103
+
104
+ &.ap-tooltip-left {
105
+ .ap-tooltip-arrow {
106
+ top: 0;
107
+ right: 0;
108
+ rotate: 90deg;
109
+ transform: translateY(-11px) translateX(calc((var(--ap-tooltip-height) / 2 - 4px)));
110
+ }
111
+ }
112
+
113
+ &.ap-tooltip-custom-template {
114
+ background-color: var(--ref-color-white);
115
+ filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.08));
116
+
117
+ .ap-tooltip-text {
118
+ color: var(--ref-color-grey-100);
119
+ }
120
+
121
+ .ap-tooltip-arrow {
122
+ color: var(--ref-color-white);
123
+ position: absolute;
124
+ z-index: 10000;
125
+ width: var(--ap-arrow-width);
126
+ height: var(--ap-arrow-height);
127
+ display: block;
128
+
129
+ path {
130
+ fill: currentColor;
131
+ }
132
+ }
133
+ }
134
+ }
package/assets/style/components-custom-style/_clickable-text.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @import '../variables';
2
2
 
3
- span, a {
3
+ span {
4
4
  &.ap-clickable-text {
5
5
  color: map_get($colors-electric-blue, 100);
6
6
  cursor: pointer;
package/assets/style/theme.scss CHANGED
@@ -5,17 +5,21 @@
5
5
  @use '@angular/material' as mat;
6
6
  @include mat.legacy-core();
7
7
 
8
+ @import '_tooltip.scss';
9
+ @import '_link.scss';
8
10
 
9
11
  @import 'font-face';
10
12
  @import 'colors';
11
13
  @import 'variables';
12
14
 
13
15
  // Custom palettes
14
- @include mat.all-legacy-component-themes(mat.define-light-theme(
15
- $primary: mat.define-palette($colors-primary),
16
- $accent: mat.define-palette($colors-accent),
17
- $warn: mat.define-palette($colors-warn)
18
- ));
16
+ @include mat.all-legacy-component-themes(
17
+ mat.define-light-theme(
18
+ $primary: mat.define-palette($colors-primary),
19
+ $accent: mat.define-palette($colors-accent),
20
+ $warn: mat.define-palette($colors-warn)
21
+ )
22
+ );
19
23
 
20
24
  /*
21
25
  * TYPOGRAPHY
@@ -52,7 +56,9 @@
52
56
  @import 'components-custom-style/clickable-text';
53
57
  @import 'components-custom-style/input-error';
54
58
 
55
- .mat-ripple { display: none; }
59
+ .mat-ripple {
60
+ display: none;
61
+ }
56
62
 
57
63
  /*
58
64
  * {
@@ -65,6 +71,3 @@ a, button {
65
71
  cursor: pointer;
66
72
  }
67
73
  */
68
-
69
-
70
-
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agorapulse/ui-theme",
3
- "version": "15.0.21",
3
+ "version": "15.0.23",
4
4
  "description": "Agorapulse UI Theme Library",
5
5
  "repository": {
6
6
  "type": "git",
package/src/tokens/components/link.json ADDED
@@ -0,0 +1,127 @@
1
+ {
2
+ "comp": {
3
+ "link": {
4
+ "text": {
5
+ "font-family": {
6
+ "value": "{sys.text.style.body.font-family}"
7
+ },
8
+ "size": {
9
+ "value": "{sys.text.style.body.size}"
10
+ },
11
+ "font-weight": {
12
+ "value": "{sys.text.style.body.weight}"
13
+ },
14
+ "line-height": {
15
+ "value": "{sys.text.style.body.line-height}"
16
+ }
17
+ },
18
+ "small": {
19
+ "text": {
20
+ "style": {
21
+ "font-family": {
22
+ "value": "{sys.text.style.caption.font-family}"
23
+ },
24
+ "size": {
25
+ "value": "{sys.text.style.caption.size}"
26
+ },
27
+ "font-weight": {
28
+ "value": "{sys.text.style.caption.weight}"
29
+ },
30
+ "line-height": {
31
+ "value": "{sys.text.style.caption.line-height}"
32
+ }
33
+ }
34
+ }
35
+ },
36
+ "big": {
37
+ "text": {
38
+ "style": {
39
+ "font-family": {
40
+ "value": "{sys.text.style.subtitle.font-family}"
41
+ },
42
+ "size": {
43
+ "value": "{sys.text.style.subtitle.size}"
44
+ },
45
+ "font-weight": {
46
+ "value": "{sys.text.style.subtitle.weight}"
47
+ },
48
+ "line-height": {
49
+ "value": "{sys.text.style.subtitle.line-height}"
50
+ }
51
+ }
52
+ }
53
+ },
54
+ "standalone": {
55
+ "default": {
56
+ "text": {
57
+ "style": {
58
+ "font-family": {
59
+ "value": "{sys.text.style.bodyBold.font-family}"
60
+ },
61
+ "size": {
62
+ "value": "{sys.text.style.bodyBold.size}"
63
+ },
64
+ "font-weight": {
65
+ "value": "{sys.text.style.bodyBold.weight}"
66
+ },
67
+ "line-height": {
68
+ "value": "{sys.text.style.bodyBold.line-height}"
69
+ }
70
+ }
71
+ }
72
+ },
73
+ "small": {
74
+ "text": {
75
+ "style": {
76
+ "font-family": {
77
+ "value": "{sys.text.style.caption.font-family}"
78
+ },
79
+ "size": {
80
+ "value": "{sys.text.style.caption.size}"
81
+ },
82
+ "font-weight": {
83
+ "value": "{sys.text.style.caption.weight}"
84
+ },
85
+ "line-height": {
86
+ "value": "{sys.text.style.caption.line-height}"
87
+ }
88
+ }
89
+ }
90
+ }
91
+ },
92
+ "default": {
93
+ "color": {
94
+ "value": "{sys.color.accent.default.bg.default}"
95
+ }
96
+ },
97
+ "hover": {
98
+ "color": {
99
+ "value": "{sys.color.accent.default.bg.hover}"
100
+ }
101
+ },
102
+ "clicked": {
103
+ "color": {
104
+ "value": "{sys.color.accent.light.text}"
105
+ }
106
+ },
107
+ "disabled": {
108
+ "color": {
109
+ "value": "{sys.color.accent.default.bg.disabled}"
110
+ }
111
+ },
112
+ "visited": {
113
+ "color": {
114
+ "value": "{ref.color.purple.150}"
115
+ }
116
+ },
117
+ "spacing": {
118
+ "value": "{ref.spacing.xxxs}"
119
+ },
120
+ "icon": {
121
+ "size": {
122
+ "value": "{sys.icon.md}"
123
+ }
124
+ }
125
+ }
126
+ }
127
+ }
package/src/tokens/components/tooltip.json ADDED
@@ -0,0 +1,36 @@
1
+ {
2
+ "comp": {
3
+ "tooltip": {
4
+ "text": {
5
+ "style": {
6
+ "font-family": {
7
+ "value": "{sys.text.style.body.font-family}"
8
+ },
9
+ "size": {
10
+ "value": "{sys.text.style.body.size}"
11
+ },
12
+ "weight": {
13
+ "value": "{sys.text.style.body.weight}"
14
+ },
15
+ "line-height": {
16
+ "value": "{sys.text.style.body.line-height}"
17
+ }
18
+ },
19
+ "default": {
20
+ "color": {
21
+ "value": "{sys.color.accent.default.text}"
22
+ }
23
+ },
24
+ "color": {
25
+ "main": {
26
+ "default": {
27
+ "bg": {
28
+ "value": "{ref.color.grey.100}"
29
+ }
30
+ }
31
+ }
32
+ }
33
+ }
34
+ }
35
+ }
36
+ }
package/src/tokens/reference/animation.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "ref": {
3
+ "animation": {
4
+ "long" : {
5
+ "value": "400ms"
6
+ },
7
+ "normal" : {
8
+ "value": "250ms"
9
+ },
10
+ "short" : {
11
+ "value": "150ms"
12
+ },
13
+ "xshort" : {
14
+ "value": "75ms"
15
+ }
16
+ }
17
+ }
18
+ }
package/src/tokens/system/color.json CHANGED
@@ -36,7 +36,7 @@
36
36
  "accent": {
37
37
  "default": {
38
38
  "bg": {
39
- " ": {
39
+ "default": {
40
40
  "value": "{ref.color.electricBlue.100}"
41
41
  },
42
42
  "hover": {
@@ -68,7 +68,7 @@
68
68
  "error": {
69
69
  "default": {
70
70
  "bg": {
71
- " ": {
71
+ "default": {
72
72
  "value": "{ref.color.red.100}"
73
73
  },
74
74
  "hover": {
@@ -100,7 +100,7 @@
100
100
  "warning": {
101
101
  "default": {
102
102
  "bg": {
103
- " ": {
103
+ "default": {
104
104
  "value": "{ref.color.yellow.100}"
105
105
  },
106
106
  "hover": {
@@ -132,7 +132,7 @@
132
132
  "success": {
133
133
  "default": {
134
134
  "bg": {
135
- " ": {
135
+ "default": {
136
136
  "value": "{ref.color.green.100}"
137
137
  },
138
138
  "hover": {
@@ -164,7 +164,7 @@
164
164
  "featureLock": {
165
165
  "default": {
166
166
  "bg": {
167
- " ": {
167
+ "default": {
168
168
  "value": "{ref.color.purple.100}"
169
169
  },
170
170
  "hover": {
package/agorapulse-ui-theme-15.0.21.tgz DELETED
Binary file
/package/src/tokens/{component → components}/radio.json RENAMED
File without changes