@agorapulse/ui-theme 20.0.4-beta.1 → 20.0.6

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 (6) hide show
  1. package/agorapulse-ui-theme-20.0.6.tgz +0 -0
  2. package/assets/desktop_variables.css +28 -0
  3. package/assets/mobile_variables.css +28 -0
  4. package/package.json +1 -1
  5. package/src/tokens/components/tabs.json +150 -0
  6. package/agorapulse-ui-theme-20.0.4-beta.1.tgz +0 -0
package/agorapulse-ui-theme-20.0.6.tgz ADDED
Binary file
package/assets/desktop_variables.css CHANGED
@@ -621,6 +621,34 @@
621
621
  --comp-status-font-family: Averta;
622
622
  --comp-status-font-size: 12px;
623
623
  --comp-status-line-height: 16px;
624
+ --comp-tabs-text-font-family: Averta;
625
+ --comp-tabs-border-color: #EAECEF;
626
+ --comp-tabs-content-spacing: 16px;
627
+ --comp-tabs-tab-padding: 12px 16px;
628
+ --comp-tabs-tab-font-size: 14px;
629
+ --comp-tabs-tab-line-height: 18px;
630
+ --comp-tabs-tab-min-height: 48px;
631
+ --comp-tabs-tab-text-color-default: #344563;
632
+ --comp-tabs-tab-text-color-hover: #0E72D6;
633
+ --comp-tabs-tab-text-color-active: #0E72D6;
634
+ --comp-tabs-tab-text-color-disabled: #858FA1;
635
+ --comp-tabs-tab-text-color-feature-locked-hover: #6554C0;
636
+ --comp-tabs-tab-text-color-feature-locked-focus: #6554C0;
637
+ --comp-tabs-tab-text-color-feature-locked-active: #6554C0;
638
+ --comp-tabs-tab-focus-color: #0E72D6;
639
+ --comp-tabs-tab-focus-border-radius: 4px;
640
+ --comp-tabs-tab-focus-background-color: #E8F4FF;
641
+ --comp-tabs-tab-hover-background-color: #E8F4FF;
642
+ --comp-tabs-tab-active-indicator-color: #0E72D6;
643
+ --comp-tabs-tab-active-background-color: #D1E8FF;
644
+ --comp-tabs-tab-feature-lock-color: #6554C0;
645
+ --comp-tabs-tab-feature-locked-indicator-color: #6554C0;
646
+ --comp-tabs-tab-feature-locked-hover-background-color: #EFEDF8;
647
+ --comp-tabs-tab-feature-locked-focus-background-color: #EFEDF8;
648
+ --comp-tabs-tab-feature-locked-active-background-color: #E0DDF2;
649
+ --comp-tabs-tab-gap: 8px;
650
+ --comp-tabs-tab-content-gap: 4px;
651
+ --comp-tabs-tab-header-gap: 8px;
624
652
  --comp-tag-text-style-font-family: Averta;
625
653
  --comp-tag-text-style-size: 14px;
626
654
  --comp-tag-text-style-font-weight: 400;
package/assets/mobile_variables.css CHANGED
@@ -621,6 +621,34 @@
621
621
  --comp-status-font-family: Averta;
622
622
  --comp-status-font-size: 12px;
623
623
  --comp-status-line-height: 16px;
624
+ --comp-tabs-text-font-family: Averta;
625
+ --comp-tabs-border-color: #EAECEF;
626
+ --comp-tabs-content-spacing: 16px;
627
+ --comp-tabs-tab-padding: 12px 16px;
628
+ --comp-tabs-tab-font-size: 14px;
629
+ --comp-tabs-tab-line-height: 18px;
630
+ --comp-tabs-tab-min-height: 48px;
631
+ --comp-tabs-tab-text-color-default: #344563;
632
+ --comp-tabs-tab-text-color-hover: #0E72D6;
633
+ --comp-tabs-tab-text-color-active: #0E72D6;
634
+ --comp-tabs-tab-text-color-disabled: #858FA1;
635
+ --comp-tabs-tab-text-color-feature-locked-hover: #6554C0;
636
+ --comp-tabs-tab-text-color-feature-locked-focus: #6554C0;
637
+ --comp-tabs-tab-text-color-feature-locked-active: #6554C0;
638
+ --comp-tabs-tab-focus-color: #0E72D6;
639
+ --comp-tabs-tab-focus-border-radius: 4px;
640
+ --comp-tabs-tab-focus-background-color: #E8F4FF;
641
+ --comp-tabs-tab-hover-background-color: #E8F4FF;
642
+ --comp-tabs-tab-active-indicator-color: #0E72D6;
643
+ --comp-tabs-tab-active-background-color: #D1E8FF;
644
+ --comp-tabs-tab-feature-lock-color: #6554C0;
645
+ --comp-tabs-tab-feature-locked-indicator-color: #6554C0;
646
+ --comp-tabs-tab-feature-locked-hover-background-color: #EFEDF8;
647
+ --comp-tabs-tab-feature-locked-focus-background-color: #EFEDF8;
648
+ --comp-tabs-tab-feature-locked-active-background-color: #E0DDF2;
649
+ --comp-tabs-tab-gap: 8px;
650
+ --comp-tabs-tab-content-gap: 4px;
651
+ --comp-tabs-tab-header-gap: 8px;
624
652
  --comp-tag-text-style-font-family: Averta;
625
653
  --comp-tag-text-style-size: 14px;
626
654
  --comp-tag-text-style-font-weight: 400;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agorapulse/ui-theme",
3
- "version": "20.0.4-beta.1",
3
+ "version": "20.0.6",
4
4
  "description": "Agorapulse UI Theme Library",
5
5
  "repository": {
6
6
  "type": "git",
package/src/tokens/components/tabs.json ADDED
@@ -0,0 +1,150 @@
1
+ {
2
+ "comp": {
3
+ "tabs": {
4
+ "text": {
5
+ "font-family": {
6
+ "value": "{ref.font.family}"
7
+ }
8
+ },
9
+ "border": {
10
+ "color": {
11
+ "value": "{ref.color.grey.10}"
12
+ }
13
+ },
14
+ "content": {
15
+ "spacing": {
16
+ "value": "{ref.spacing.sm}"
17
+ }
18
+ },
19
+ "tab": {
20
+ "padding": {
21
+ "value": "{ref.spacing.xs} {ref.spacing.sm}"
22
+ },
23
+ "font": {
24
+ "size": {
25
+ "value": "{sys.text.style.body.size}"
26
+ }
27
+ },
28
+ "line": {
29
+ "height": {
30
+ "value": "{sys.text.style.body.line-height}"
31
+ }
32
+ },
33
+ "min": {
34
+ "height": {
35
+ "value": "48px"
36
+ }
37
+ },
38
+ "text": {
39
+ "color": {
40
+ "default": {
41
+ "value": "{ref.color.grey.100}"
42
+ },
43
+ "hover": {
44
+ "value": "{ref.color.electricBlue.150}"
45
+ },
46
+ "active": {
47
+ "value": "{ref.color.electricBlue.150}"
48
+ },
49
+ "disabled": {
50
+ "value": "{ref.color.grey.60}"
51
+ },
52
+ "featureLocked": {
53
+ "hover": {
54
+ "value": "{ref.color.purple.100}"
55
+ },
56
+ "focus": {
57
+ "value": "{ref.color.purple.100}"
58
+ },
59
+ "active": {
60
+ "value": "{ref.color.purple.100}"
61
+ }
62
+ }
63
+ }
64
+ },
65
+ "focus": {
66
+ "color": {
67
+ "value": "{ref.color.electricBlue.150}"
68
+ },
69
+ "border": {
70
+ "radius": {
71
+ "value": "{sys.border.radius.sm}"
72
+ }
73
+ },
74
+ "background": {
75
+ "color": {
76
+ "value": "{ref.color.electricBlue.10}"
77
+ }
78
+ }
79
+ },
80
+ "hover": {
81
+ "background": {
82
+ "color": {
83
+ "value": "{ref.color.electricBlue.10}"
84
+ }
85
+ }
86
+ },
87
+ "active": {
88
+ "indicator": {
89
+ "color": {
90
+ "value": "{ref.color.electricBlue.150}"
91
+ }
92
+ },
93
+ "background": {
94
+ "color": {
95
+ "value": "{ref.color.electricBlue.20}"
96
+ }
97
+ }
98
+ },
99
+ "feature": {
100
+ "lock": {
101
+ "color": {
102
+ "value": "{ref.color.purple.100}"
103
+ }
104
+ }
105
+ },
106
+ "featureLocked": {
107
+ "indicator": {
108
+ "color": {
109
+ "value": "{ref.color.purple.100}"
110
+ }
111
+ },
112
+ "hover": {
113
+ "background": {
114
+ "color": {
115
+ "value": "{ref.color.purple.10}"
116
+ }
117
+ }
118
+ },
119
+ "focus": {
120
+ "background": {
121
+ "color": {
122
+ "value": "{ref.color.purple.10}"
123
+ }
124
+ }
125
+ },
126
+ "active": {
127
+ "background": {
128
+ "color": {
129
+ "value": "{ref.color.purple.20}"
130
+ }
131
+ }
132
+ }
133
+ },
134
+ "gap": {
135
+ "value": "{ref.spacing.xxs}"
136
+ },
137
+ "content": {
138
+ "gap": {
139
+ "value": "4px"
140
+ }
141
+ },
142
+ "header": {
143
+ "gap": {
144
+ "value": "8px"
145
+ }
146
+ }
147
+ }
148
+ }
149
+ }
150
+ }