@agorapulse/ui-theme 15.0.22 → 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 (10) hide show
  1. package/agorapulse-ui-theme-15.0.23.tgz +0 -0
  2. package/assets/desktop_variables.css +11 -0
  3. package/assets/mobile_variables.css +11 -0
  4. package/assets/style/_tooltip.scss +134 -0
  5. package/assets/style/theme.scss +1 -0
  6. package/package.json +1 -1
  7. package/src/tokens/components/tooltip.json +36 -0
  8. package/src/tokens/reference/animation.json +18 -0
  9. package/agorapulse-ui-theme-15.0.22.tgz +0 -0
  10. /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;
@@ -302,6 +306,7 @@
302
306
  --comp-link-visited-color: #3C2C95;
303
307
  --comp-link-spacing: 4px;
304
308
  --comp-link-icon-size: 16px;
309
+ --comp-radio-transition-duration: 250ms;
305
310
  --comp-split-button-text-size: 14px;
306
311
  --comp-split-button-text-font-family: Averta;
307
312
  --comp-split-button-text-weight: 700;
@@ -310,4 +315,10 @@
310
315
  --comp-split-button-padding-vertical: 16px;
311
316
  --comp-split-button-border-radius: 4px;
312
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;
313
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;
@@ -302,6 +306,7 @@
302
306
  --comp-link-visited-color: #3C2C95;
303
307
  --comp-link-spacing: 4px;
304
308
  --comp-link-icon-size: 16px;
309
+ --comp-radio-transition-duration: 250ms;
305
310
  --comp-split-button-text-size: 14px;
306
311
  --comp-split-button-text-font-family: Averta;
307
312
  --comp-split-button-text-weight: 700;
@@ -310,4 +315,10 @@
310
315
  --comp-split-button-padding-vertical: 16px;
311
316
  --comp-split-button-border-radius: 4px;
312
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;
313
324
  }
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/theme.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @use '@angular/material' as mat;
6
6
  @include mat.legacy-core();
7
7
 
8
+ @import '_tooltip.scss';
8
9
  @import '_link.scss';
9
10
 
10
11
  @import 'font-face';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agorapulse/ui-theme",
3
- "version": "15.0.22",
3
+ "version": "15.0.23",
4
4
  "description": "Agorapulse UI Theme Library",
5
5
  "repository": {
6
6
  "type": "git",
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/agorapulse-ui-theme-15.0.22.tgz DELETED
Binary file
/package/src/tokens/{component → components}/radio.json RENAMED
File without changes