@agorapulse/ui-theme 15.0.1 → 15.0.3

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 (16) hide show
  1. package/agorapulse-ui-theme-15.0.3.tgz +0 -0
  2. package/assets/style/theme.scss +3 -5
  3. package/assets/variables.css +200 -0
  4. package/package.json +7 -1
  5. package/src/README.md +38 -0
  6. package/src/config.json +15 -0
  7. package/src/tokens/reference/border-radius.json +15 -0
  8. package/src/tokens/reference/color.json +84 -0
  9. package/src/tokens/reference/font.json +67 -0
  10. package/src/tokens/reference/spacing.json +33 -0
  11. package/src/tokens/system/border.json +28 -0
  12. package/src/tokens/system/color.json +198 -0
  13. package/src/tokens/system/icon.json +12 -0
  14. package/src/tokens/system/text.json +173 -0
  15. package/agorapulse-ui-theme-15.0.1.tgz +0 -0
  16. package/assets/style/_grid.scss +0 -166
package/agorapulse-ui-theme-15.0.3.tgz ADDED
Binary file
package/assets/style/theme.scss CHANGED
@@ -10,6 +10,9 @@
10
10
  @import 'colors';
11
11
  @import 'variables';
12
12
 
13
+ // Design Tokens
14
+ @import '../variables.css';
15
+
13
16
  // Custom palettes
14
17
  @include mat.all-legacy-component-themes(mat.define-light-theme(
15
18
  $primary: mat.define-palette($colors-primary),
@@ -23,11 +26,6 @@
23
26
 
24
27
  @import 'mat-typography';
25
28
 
26
- /*
27
- * GRID
28
- */
29
- @import 'grid';
30
-
31
29
  /*
32
30
  * HELPERS
33
31
  */
package/assets/variables.css ADDED
@@ -0,0 +1,200 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 29 Mar 2023 10:20:13 GMT
4
+ */
5
+
6
+ :root {
7
+ --ref-border-radius-sm: 4px;
8
+ --ref-border-radius-md: 6px;
9
+ --ref-border-radius-lg: 8px;
10
+ --ref-color-white: #FFFFFF;
11
+ --ref-color-orange-10: #FFEFE9;
12
+ --ref-color-orange-20: #FFE1D4;
13
+ --ref-color-orange-40: #FFA47D;
14
+ --ref-color-orange-60: #FFA47D;
15
+ --ref-color-orange-80: #FF7E46;
16
+ --ref-color-orange-100: #FF6726;
17
+ --ref-color-orange-150: #C83E07;
18
+ --ref-color-electric-blue-10: #E8F4FF;
19
+ --ref-color-electric-blue-20: #D1E8FF;
20
+ --ref-color-electric-blue-40: #A2D1FF;
21
+ --ref-color-electric-blue-60: #74BBFE;
22
+ --ref-color-electric-blue-80: #3A9EFE;
23
+ --ref-color-electric-blue-100: #178DFE;
24
+ --ref-color-electric-blue-150: #0E72D6;
25
+ --ref-color-electric-blue-05: #F3F9FF;
26
+ --ref-color-grey-10: #EAECEF;
27
+ --ref-color-grey-20: #D6DAE0;
28
+ --ref-color-grey-40: #858FA1;
29
+ --ref-color-grey-60: #858FA1;
30
+ --ref-color-grey-80: #5D6A82;
31
+ --ref-color-grey-100: #344563;
32
+ --ref-color-grey-150: #212E44;
33
+ --ref-color-grey-05: #F5F5F7;
34
+ --ref-color-grey-bg: #F9F9FA;
35
+ --ref-color-green-10: #ECF7ED;
36
+ --ref-color-green-20: #DAF1DD;
37
+ --ref-color-green-40: #B5E3BB;
38
+ --ref-color-green-60: #8FD498;
39
+ --ref-color-green-80: #61C26D;
40
+ --ref-color-green-100: #45B854;
41
+ --ref-color-green-150: #0F821D;
42
+ --ref-color-yellow-10: #FFF8E6;
43
+ --ref-color-yellow-20: #FEF0CC;
44
+ --ref-color-yellow-40: #FDE199;
45
+ --ref-color-yellow-60: #FDD366;
46
+ --ref-color-yellow-80: #FCC026;
47
+ --ref-color-yellow-100: #FBB500;
48
+ --ref-color-yellow-150: #A66200;
49
+ --ref-color-red-10: #FDE7E7;
50
+ --ref-color-red-20: #FAD0D0;
51
+ --ref-color-red-40: #F6A1A1;
52
+ --ref-color-red-60: #F17171;
53
+ --ref-color-red-80: #EB3636;
54
+ --ref-color-red-100: #E81313;
55
+ --ref-color-red-150: #D80505;
56
+ --ref-color-purple-10: #EFEDF8;
57
+ --ref-color-purple-20: #E0DDF2;
58
+ --ref-color-purple-40: #C1BBE6;
59
+ --ref-color-purple-60: #A398D9;
60
+ --ref-color-purple-80: #7C6DC9;
61
+ --ref-color-purple-100: #6554C0;
62
+ --ref-color-purple-150: #3C2C95;
63
+ --ref-color-menthol-10: #F1F9F8;
64
+ --ref-color-menthol-20: #CFECEA;
65
+ --ref-color-menthol-40: #9FD9D6;
66
+ --ref-color-menthol-60: #64C8BC;
67
+ --ref-color-menthol-80: #1DBEB0;
68
+ --ref-color-menthol-100: #0FA09B;
69
+ --ref-color-menthol-150: #057E7A;
70
+ --ref-font-size-xs: 12px;
71
+ --ref-font-size-sm: 14px;
72
+ --ref-font-size-md: 16px;
73
+ --ref-font-size-lg: 18px;
74
+ --ref-font-size-xl: 20px;
75
+ --ref-font-size-xxl: 24px;
76
+ --ref-font-size-xxxl: 28px;
77
+ --ref-font-weight-regular: 400;
78
+ --ref-font-weight-bold: 700;
79
+ --ref-font-weight-extra-bold: 800;
80
+ --ref-font-weight-black: 900;
81
+ --ref-font-line-height-xxs: 14px;
82
+ --ref-font-line-height-xs: 16px;
83
+ --ref-font-line-height-sm: 18px;
84
+ --ref-font-line-height-md: 20px;
85
+ --ref-font-line-height-lg: 24px;
86
+ --ref-font-line-height-xl: 32px;
87
+ --ref-font-line-height-xxl: 36px;
88
+ --ref-spacing-xxxs: 4px;
89
+ --ref-spacing-xxs: 8px;
90
+ --ref-spacing-xs: 12px;
91
+ --ref-spacing-sm: 16px;
92
+ --ref-spacing-md: 24px;
93
+ --ref-spacing-lg: 32px;
94
+ --ref-spacing-xl: 40px;
95
+ --ref-spacing-xxl: 48px;
96
+ --ref-spacing-xxxl: 60px;
97
+ --sys-border-color-default: #EAECEF;
98
+ --sys-border-color-active: #178DFE;
99
+ --sys-border-color-error: #E81313;
100
+ --sys-border-radius-sm: 4px;
101
+ --sys-border-radius-md: 4px;
102
+ --sys-border-radius-lg: 8px;
103
+ --sys-color-main-default-bg: #FF6726;
104
+ --sys-color-main-default-bg-hover: #FF7E46;
105
+ --sys-color-main-default-bg-clicked: #FFA47D;
106
+ --sys-color-main-default-bg-disabled: #FFE1D4;
107
+ --sys-color-main-default-text: #FFFFFF;
108
+ --sys-color-main-light-bg: #FFEFE9;
109
+ --sys-color-main-light-text: #C83E07;
110
+ --sys-color-main-text: #FF6726;
111
+ --sys-color-accent-default-bg: #178DFE;
112
+ --sys-color-accent-default-bg-hover: #3A9EFE;
113
+ --sys-color-accent-default-bg-clicked: #74BBFE;
114
+ --sys-color-accent-default-bg-disabled: #D1E8FF;
115
+ --sys-color-accent-default-text: #FFFFFF;
116
+ --sys-color-accent-light-bg: #F3F9FF;
117
+ --sys-color-accent-light-text: #0E72D6;
118
+ --sys-color-accent-text: #178DFE;
119
+ --sys-color-error-default-bg: #E81313;
120
+ --sys-color-error-default-bg-hover: #EB3636;
121
+ --sys-color-error-default-bg-clicked: #F17171;
122
+ --sys-color-error-default-bg-disabled: #FAD0D0;
123
+ --sys-color-error-default-text: #FFFFFF;
124
+ --sys-color-error-light-bg: #FDE7E7;
125
+ --sys-color-error-light-text: #D80505;
126
+ --sys-color-error-text: #E81313;
127
+ --sys-color-warning-default-bg: #FBB500;
128
+ --sys-color-warning-default-bg-hover: #FCC026;
129
+ --sys-color-warning-default-bg-clicked: #FDD366;
130
+ --sys-color-warning-default-bg-disabled: #FEF0CC;
131
+ --sys-color-warning-default-text: #FFFFFF;
132
+ --sys-color-warning-light-bg: #FFF8E6;
133
+ --sys-color-warning-light-text: #A66200;
134
+ --sys-color-warning-text: #FBB500;
135
+ --sys-color-success-default-bg: #45B854;
136
+ --sys-color-success-default-bg-hover: #61C26D;
137
+ --sys-color-success-default-bg-clicked: #8FD498;
138
+ --sys-color-success-default-bg-disabled: #DAF1DD;
139
+ --sys-color-success-default-text: #FFFFFF;
140
+ --sys-color-success-light-bg: #ECF7ED;
141
+ --sys-color-success-light-text: #0F821D;
142
+ --sys-color-success-text: #45B854;
143
+ --sys-color-feature-lock-default-bg: #6554C0;
144
+ --sys-color-feature-lock-default-bg-hover: #7C6DC9;
145
+ --sys-color-feature-lock-default-bg-clicked: #A398D9;
146
+ --sys-color-feature-lock-default-bg-disabled: #E0DDF2;
147
+ --sys-color-feature-lock-default-text: #FFFFFF;
148
+ --sys-color-feature-lock-light-bg: #EFEDF8;
149
+ --sys-color-feature-lock-light-text: #3C2C95;
150
+ --sys-color-feature-lock-text: #6554C0;
151
+ --sys-icon-sm: 14px;
152
+ --sys-icon-md: 16px;
153
+ --sys-text-color-default: #344563;
154
+ --sys-text-color-light: #5D6A82;
155
+ --sys-text-color-error: #E81313;
156
+ --sys-text-style-h0-font-family: Averta Std;
157
+ --sys-text-style-h0-size: 20px;
158
+ --sys-text-style-h0-weight: 900;
159
+ --sys-text-style-h0-line-height: 36px;
160
+ --sys-text-style-marketing-font-family: Averta Std;
161
+ --sys-text-style-marketing-size: 24px;
162
+ --sys-text-style-marketing-weight: 800;
163
+ --sys-text-style-marketing-line-height: 36px;
164
+ --sys-text-style-h1-font-family: Averta Std;
165
+ --sys-text-style-h1-size: 20px;
166
+ --sys-text-style-h1-weight: 700;
167
+ --sys-text-style-h1-line-height: 36px;
168
+ --sys-text-style-h2-font-family: Averta Std;
169
+ --sys-text-style-h2-size: 18px;
170
+ --sys-text-style-h2-weight: 700;
171
+ --sys-text-style-h2-line-height: 24px;
172
+ --sys-text-style-subtitle-font-family: Averta Std;
173
+ --sys-text-style-subtitle-size: 16px;
174
+ --sys-text-style-subtitle-weight: 400;
175
+ --sys-text-style-subtitle-line-height: 20px;
176
+ --sys-text-style-h3-font-family: Averta Std;
177
+ --sys-text-style-h3-size: 16px;
178
+ --sys-text-style-h3-weight: 700;
179
+ --sys-text-style-h3-line-height: 24px;
180
+ --sys-text-style-h4-font-family: Averta Std;
181
+ --sys-text-style-h4-size: 14px;
182
+ --sys-text-style-h4-weight: 700;
183
+ --sys-text-style-h4-line-height: 20px;
184
+ --sys-text-style-body-font-family: Averta Std;
185
+ --sys-text-style-body-size: 14px;
186
+ --sys-text-style-body-weight: 400;
187
+ --sys-text-style-body-line-height: 18px;
188
+ --sys-text-style-body-bold-font-family: Averta Std;
189
+ --sys-text-style-body-bold-size: 14px;
190
+ --sys-text-style-body-bold-weight: 700;
191
+ --sys-text-style-body-bold-line-height: 18px;
192
+ --sys-text-style-caption-font-family: Averta Std;
193
+ --sys-text-style-caption-size: 12px;
194
+ --sys-text-style-caption-weight: 400;
195
+ --sys-text-style-caption-line-height: 16px;
196
+ --sys-text-style-caption-bold-font-family: Averta Std;
197
+ --sys-text-style-caption-bold-size: 12px;
198
+ --sys-text-style-caption-bold-weight: 700;
199
+ --sys-text-style-caption-bold-line-height: 16px;
200
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agorapulse/ui-theme",
3
- "version": "15.0.1",
3
+ "version": "15.0.3",
4
4
  "description": "Agorapulse UI Theme Library",
5
5
  "repository": {
6
6
  "type": "git",
@@ -11,8 +11,14 @@
11
11
  "bugs": {
12
12
  "url": "https://github.com/agorapulse/design/issues"
13
13
  },
14
+ "scripts": {
15
+ "generate-tokens": "cd src && style-dictionary build && cd ../assets && git add variables.css"
16
+ },
14
17
  "homepage": "https://github.com/agorapulse/design#readme",
15
18
  "peerDependencies": {
16
19
  "@angular/material": "^15.1.0"
20
+ },
21
+ "devDependencies": {
22
+ "style-dictionary": "^3.7.2"
17
23
  }
18
24
  }
package/src/README.md ADDED
@@ -0,0 +1,38 @@
1
+ # Agorapulse Style Dictionary
2
+
3
+ To generate the style dictionary based on the config file, you'll have to run the following command:
4
+ ```bash
5
+ style-dictionary build
6
+ ```
7
+
8
+ You should see something like this output:
9
+ ```
10
+ Copying starter files...
11
+
12
+ Source style dictionary starter files created!
13
+
14
+ Running `style-dictionary build` for the first time to generate build artifacts.
15
+
16
+ css
17
+ ✔︎ assets/variables.css
18
+ ```
19
+ If everything goes well, you'll should have the following architecture.
20
+ ```
21
+ ├── README.md
22
+ ├── config.json
23
+ ├── tokens/
24
+ │ ├── reference/
25
+ │ ├── border-radius.json
26
+ │ ├── color.json
27
+ │ ├── font.json
28
+ │ ├── spacing.json
29
+ │ ├── system/
30
+ │ ├── border.json
31
+ │ ├── color.json
32
+ │ ├── icon.json
33
+ │ ├── text.json
34
+ ├── build/
35
+ │ ├── css/
36
+ │ ├── variables.css
37
+
38
+ ```
package/src/config.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "source": ["tokens/**/*.json"],
3
+ "platforms": {
4
+ "css": {
5
+ "transformGroup": "css",
6
+ "transforms": ["attribute/cti", "name/cti/kebab", "color/hex", "size/px"],
7
+ "files": [
8
+ {
9
+ "format": "css/variables",
10
+ "destination": "../assets/variables.css"
11
+ }
12
+ ]
13
+ }
14
+ }
15
+ }
package/src/tokens/reference/border-radius.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "ref": {
3
+ "borderRadius": {
4
+ "sm" : {
5
+ "value": "4px"
6
+ },
7
+ "md" : {
8
+ "value": "6px"
9
+ },
10
+ "lg" : {
11
+ "value": "8px"
12
+ }
13
+ }
14
+ }
15
+ }
package/src/tokens/reference/color.json ADDED
@@ -0,0 +1,84 @@
1
+ {
2
+ "ref": {
3
+ "color": {
4
+ "white": {
5
+ "value": "#FFFFFF"
6
+ },
7
+ "orange": {
8
+ "150" : { "value": "#C83E07" },
9
+ "100" : { "value": "#FF6726" },
10
+ "80" : { "value": "#FF7E46" },
11
+ "60" : { "value": "#FFA47D" },
12
+ "40" : { "value": "#FFA47D" },
13
+ "20" : { "value": "#FFE1D4" },
14
+ "10" : { "value": "#FFEFE9" }
15
+ },
16
+ "electricBlue": {
17
+ "150" : { "value": "#0E72D6" },
18
+ "100" : { "value": "#178DFE" },
19
+ "80" : { "value": "#3A9EFE" },
20
+ "60" : { "value": "#74BBFE" },
21
+ "40" : { "value": "#A2D1FF" },
22
+ "20" : { "value": "#D1E8FF" },
23
+ "10" : { "value": "#E8F4FF" },
24
+ "05" : { "value": "#F3F9FF" }
25
+ },
26
+ "grey": {
27
+ "150" : { "value": "#212E44" },
28
+ "100" : { "value": "#344563" },
29
+ "80" : { "value": "#5D6A82" },
30
+ "60" : { "value": "#858FA1" },
31
+ "40" : { "value": "#858FA1" },
32
+ "20" : { "value": "#D6DAE0" },
33
+ "10" : { "value": "#EAECEF" },
34
+ "05" : { "value": "#F5F5F7" },
35
+ "bg" : { "value": "#F9F9FA" }
36
+ },
37
+ "green": {
38
+ "150" : { "value": "#0F821D" },
39
+ "100" : { "value": "#45B854" },
40
+ "80" : { "value": "#61C26D" },
41
+ "60" : { "value": "#8FD498" },
42
+ "40" : { "value": "#B5E3BB" },
43
+ "20" : { "value": "#DAF1DD" },
44
+ "10" : { "value": "#ECF7ED" }
45
+ },
46
+ "yellow": {
47
+ "150" : { "value": "#A66200" },
48
+ "100" : { "value": "#FBB500" },
49
+ "80" : { "value": "#FCC026" },
50
+ "60" : { "value": "#FDD366" },
51
+ "40" : { "value": "#FDE199" },
52
+ "20" : { "value": "#FEF0CC" },
53
+ "10" : { "value": "#FFF8E6" }
54
+ },
55
+ "red": {
56
+ "150" : { "value": "#D80505" },
57
+ "100" : { "value": "#E81313" },
58
+ "80" : { "value": "#EB3636" },
59
+ "60" : { "value": "#F17171" },
60
+ "40" : { "value": "#F6A1A1" },
61
+ "20" : { "value": "#FAD0D0" },
62
+ "10" : { "value": "#FDE7E7" }
63
+ },
64
+ "purple": {
65
+ "150" : { "value": "#3C2C95" },
66
+ "100" : { "value": "#6554C0" },
67
+ "80" : { "value": "#7C6DC9" },
68
+ "60" : { "value": "#A398D9" },
69
+ "40" : { "value": "#C1BBE6" },
70
+ "20" : { "value": "#E0DDF2" },
71
+ "10" : { "value": "#EFEDF8" }
72
+ },
73
+ "menthol": {
74
+ "150" : { "value": "#057E7A" },
75
+ "100" : { "value": "#0FA09B" },
76
+ "80" : { "value": "#1DBEB0" },
77
+ "60" : { "value": "#64C8BC" },
78
+ "40" : { "value": "#9FD9D6" },
79
+ "20" : { "value": "#CFECEA" },
80
+ "10" : { "value": "#F1F9F8" }
81
+ }
82
+ }
83
+ }
84
+ }
package/src/tokens/reference/font.json ADDED
@@ -0,0 +1,67 @@
1
+ {
2
+ "ref": {
3
+ "font": {
4
+ "family": "Averta Std",
5
+ "size": {
6
+ "xs" : {
7
+ "value": "12px"
8
+ },
9
+ "sm" : {
10
+ "value": "14px"
11
+ },
12
+ "md" : {
13
+ "value": "16px"
14
+ },
15
+ "lg" : {
16
+ "value": "18px"
17
+ },
18
+ "xl" : {
19
+ "value": "20px"
20
+ },
21
+ "xxl" : {
22
+ "value": "24px"
23
+ },
24
+ "xxxl" : {
25
+ "value": "28px"
26
+ }
27
+ },
28
+ "weight": {
29
+ "regular": {
30
+ "value": 400
31
+ },
32
+ "bold": {
33
+ "value": 700
34
+ },
35
+ "extraBold": {
36
+ "value": 800
37
+ },
38
+ "black": {
39
+ "value": 900
40
+ }
41
+ },
42
+ "lineHeight": {
43
+ "xxs": {
44
+ "value": "14px"
45
+ },
46
+ "xs": {
47
+ "value": "16px"
48
+ },
49
+ "sm": {
50
+ "value": "18px"
51
+ },
52
+ "md": {
53
+ "value": "20px"
54
+ },
55
+ "lg": {
56
+ "value": "24px"
57
+ },
58
+ "xl": {
59
+ "value": "32px"
60
+ },
61
+ "xxl": {
62
+ "value": "36px"
63
+ }
64
+ }
65
+ }
66
+ }
67
+ }
package/src/tokens/reference/spacing.json ADDED
@@ -0,0 +1,33 @@
1
+ {
2
+ "ref": {
3
+ "spacing": {
4
+ "xxxs" : {
5
+ "value": "4px"
6
+ },
7
+ "xxs" : {
8
+ "value": "8px"
9
+ },
10
+ "xs" : {
11
+ "value": "12px"
12
+ },
13
+ "sm" : {
14
+ "value": "16px"
15
+ },
16
+ "md" : {
17
+ "value": "24px"
18
+ },
19
+ "lg" : {
20
+ "value": "32px"
21
+ },
22
+ "xl" : {
23
+ "value": "40px"
24
+ },
25
+ "xxl" : {
26
+ "value": "48px"
27
+ },
28
+ "xxxl" : {
29
+ "value": "60px"
30
+ }
31
+ }
32
+ }
33
+ }
package/src/tokens/system/border.json ADDED
@@ -0,0 +1,28 @@
1
+ {
2
+ "sys": {
3
+ "border": {
4
+ "color": {
5
+ "default": {
6
+ "value": "{ref.color.grey.10}"
7
+ },
8
+ "active": {
9
+ "value": "{ref.color.electricBlue.100}"
10
+ },
11
+ "error": {
12
+ "value": "{ref.color.red.100}"
13
+ }
14
+ },
15
+ "radius": {
16
+ "sm": {
17
+ "value": "{ref.borderRadius.sm}"
18
+ },
19
+ "md": {
20
+ "value": "{ref.borderRadius.sm}"
21
+ },
22
+ "lg": {
23
+ "value": "{ref.borderRadius.lg}"
24
+ }
25
+ }
26
+ }
27
+ }
28
+ }
package/src/tokens/system/color.json ADDED
@@ -0,0 +1,198 @@
1
+ {
2
+ "sys": {
3
+ "color": {
4
+ "main": {
5
+ "default": {
6
+ "bg": {
7
+ " ": {
8
+ "value": "{ref.color.orange.100}"
9
+ },
10
+ "hover": {
11
+ "value": "{ref.color.orange.80}"
12
+ },
13
+ "clicked": {
14
+ "value": "{ref.color.orange.60}"
15
+ },
16
+ "disabled": {
17
+ "value": "{ref.color.orange.20}"
18
+ }
19
+ },
20
+ "text": {
21
+ "value": "{ref.color.white}"
22
+ }
23
+ },
24
+ "light": {
25
+ "bg": {
26
+ "value": "{ref.color.orange.10}"
27
+ },
28
+ "text": {
29
+ "value": "{ref.color.orange.150}"
30
+ }
31
+ },
32
+ "text": {
33
+ "value": "{ref.color.orange.100}"
34
+ }
35
+ },
36
+ "accent": {
37
+ "default": {
38
+ "bg": {
39
+ " ": {
40
+ "value": "{ref.color.electricBlue.100}"
41
+ },
42
+ "hover": {
43
+ "value": "{ref.color.electricBlue.80}"
44
+ },
45
+ "clicked": {
46
+ "value": "{ref.color.electricBlue.60}"
47
+ },
48
+ "disabled": {
49
+ "value": "{ref.color.electricBlue.20}"
50
+ }
51
+ },
52
+ "text": {
53
+ "value": "{ref.color.white}"
54
+ }
55
+ },
56
+ "light": {
57
+ "bg": {
58
+ "value": "{ref.color.electricBlue.05}"
59
+ },
60
+ "text": {
61
+ "value": "{ref.color.electricBlue.150}"
62
+ }
63
+ },
64
+ "text": {
65
+ "value": "{ref.color.electricBlue.100}"
66
+ }
67
+ },
68
+ "error": {
69
+ "default": {
70
+ "bg": {
71
+ " ": {
72
+ "value": "{ref.color.red.100}"
73
+ },
74
+ "hover": {
75
+ "value": "{ref.color.red.80}"
76
+ },
77
+ "clicked": {
78
+ "value": "{ref.color.red.60}"
79
+ },
80
+ "disabled": {
81
+ "value": "{ref.color.red.20}"
82
+ }
83
+ },
84
+ "text": {
85
+ "value": "{ref.color.white}"
86
+ }
87
+ },
88
+ "light": {
89
+ "bg": {
90
+ "value": "{ref.color.red.10}"
91
+ },
92
+ "text": {
93
+ "value": "{ref.color.red.150}"
94
+ }
95
+ },
96
+ "text": {
97
+ "value": "{ref.color.red.100}"
98
+ }
99
+ },
100
+ "warning": {
101
+ "default": {
102
+ "bg": {
103
+ " ": {
104
+ "value": "{ref.color.yellow.100}"
105
+ },
106
+ "hover": {
107
+ "value": "{ref.color.yellow.80}"
108
+ },
109
+ "clicked": {
110
+ "value": "{ref.color.yellow.60}"
111
+ },
112
+ "disabled": {
113
+ "value": "{ref.color.yellow.20}"
114
+ }
115
+ },
116
+ "text": {
117
+ "value": "{ref.color.white}"
118
+ }
119
+ },
120
+ "light": {
121
+ "bg": {
122
+ "value": "{ref.color.yellow.10}"
123
+ },
124
+ "text": {
125
+ "value": "{ref.color.yellow.150}"
126
+ }
127
+ },
128
+ "text": {
129
+ "value": "{ref.color.yellow.100}"
130
+ }
131
+ },
132
+ "success": {
133
+ "default": {
134
+ "bg": {
135
+ " ": {
136
+ "value": "{ref.color.green.100}"
137
+ },
138
+ "hover": {
139
+ "value": "{ref.color.green.80}"
140
+ },
141
+ "clicked": {
142
+ "value": "{ref.color.green.60}"
143
+ },
144
+ "disabled": {
145
+ "value": "{ref.color.green.20}"
146
+ }
147
+ },
148
+ "text": {
149
+ "value": "{ref.color.white}"
150
+ }
151
+ },
152
+ "light": {
153
+ "bg": {
154
+ "value": "{ref.color.green.10}"
155
+ },
156
+ "text": {
157
+ "value": "{ref.color.green.150}"
158
+ }
159
+ },
160
+ "text": {
161
+ "value": "{ref.color.green.100}"
162
+ }
163
+ },
164
+ "featureLock": {
165
+ "default": {
166
+ "bg": {
167
+ " ": {
168
+ "value": "{ref.color.purple.100}"
169
+ },
170
+ "hover": {
171
+ "value": "{ref.color.purple.80}"
172
+ },
173
+ "clicked": {
174
+ "value": "{ref.color.purple.60}"
175
+ },
176
+ "disabled": {
177
+ "value": "{ref.color.purple.20}"
178
+ }
179
+ },
180
+ "text": {
181
+ "value": "{ref.color.white}"
182
+ }
183
+ },
184
+ "light": {
185
+ "bg": {
186
+ "value": "{ref.color.purple.10}"
187
+ },
188
+ "text": {
189
+ "value": "{ref.color.purple.150}"
190
+ }
191
+ },
192
+ "text": {
193
+ "value": "{ref.color.purple.100}"
194
+ }
195
+ }
196
+ }
197
+ }
198
+ }
package/src/tokens/system/icon.json ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "sys": {
3
+ "icon": {
4
+ "sm": {
5
+ "value": "{ref.font.size.sm}"
6
+ },
7
+ "md": {
8
+ "value": "{ref.font.size.md}"
9
+ }
10
+ }
11
+ }
12
+ }
package/src/tokens/system/text.json ADDED
@@ -0,0 +1,173 @@
1
+ {
2
+ "sys": {
3
+ "text": {
4
+ "color": {
5
+ "default": {
6
+ "value": "{ref.color.grey.100}"
7
+ },
8
+ "light": {
9
+ "value": "{ref.color.grey.80}"
10
+ },
11
+ "error": {
12
+ "value": "{ref.color.red.100}"
13
+ }
14
+ },
15
+ "style": {
16
+ "h0": {
17
+ "font-family": {
18
+ "value": "{ref.font.family}"
19
+ },
20
+ "size": {
21
+ "value": "{ref.font.size.xl}"
22
+ },
23
+ "weight": {
24
+ "value": "{ref.font.weight.black}"
25
+ },
26
+ "line-height": {
27
+ "value": "{ref.font.lineHeight.xxl}"
28
+ }
29
+ },
30
+ "marketing": {
31
+ "font-family": {
32
+ "value": "{ref.font.family}"
33
+ },
34
+ "size": {
35
+ "value": "{ref.font.size.xxl}"
36
+ },
37
+ "weight": {
38
+ "value": "{ref.font.weight.extraBold}"
39
+ },
40
+ "line-height": {
41
+ "value": "{ref.font.lineHeight.xxl}"
42
+ }
43
+ },
44
+ "h1": {
45
+ "font-family": {
46
+ "value": "{ref.font.family}"
47
+ },
48
+ "size": {
49
+ "value": "{ref.font.size.xl}"
50
+ },
51
+ "weight": {
52
+ "value": "{ref.font.weight.bold}"
53
+ },
54
+ "line-height": {
55
+ "value": "{ref.font.lineHeight.xxl}"
56
+ }
57
+ },
58
+ "h2": {
59
+ "font-family": {
60
+ "value": "{ref.font.family}"
61
+ },
62
+ "size": {
63
+ "value": "{ref.font.size.lg}"
64
+ },
65
+ "weight": {
66
+ "value": "{ref.font.weight.bold}"
67
+ },
68
+ "line-height": {
69
+ "value": "{ref.font.lineHeight.lg}"
70
+ }
71
+ },
72
+ "subtitle": {
73
+ "font-family": {
74
+ "value": "{ref.font.family}"
75
+ },
76
+ "size": {
77
+ "value": "{ref.font.size.md}"
78
+ },
79
+ "weight": {
80
+ "value": "{ref.font.weight.regular}"
81
+ },
82
+ "line-height": {
83
+ "value": "{ref.font.lineHeight.md}"
84
+ }
85
+ },
86
+ "h3": {
87
+ "font-family": {
88
+ "value": "{ref.font.family}"
89
+ },
90
+ "size": {
91
+ "value": "{ref.font.size.md}"
92
+ },
93
+ "weight": {
94
+ "value": "{ref.font.weight.bold}"
95
+ },
96
+ "line-height": {
97
+ "value": "{ref.font.lineHeight.lg}"
98
+ }
99
+ },
100
+ "h4": {
101
+ "font-family": {
102
+ "value": "{ref.font.family}"
103
+ },
104
+ "size": {
105
+ "value": "{ref.font.size.sm}"
106
+ },
107
+ "weight": {
108
+ "value": "{ref.font.weight.bold}"
109
+ },
110
+ "line-height": {
111
+ "value": "{ref.font.lineHeight.md}"
112
+ }
113
+ },
114
+ "body": {
115
+ "font-family": {
116
+ "value": "{ref.font.family}"
117
+ },
118
+ "size": {
119
+ "value": "{ref.font.size.sm}"
120
+ },
121
+ "weight": {
122
+ "value": "{ref.font.weight.regular}"
123
+ },
124
+ "line-height": {
125
+ "value": "{ref.font.lineHeight.sm}"
126
+ }
127
+ },
128
+ "bodyBold": {
129
+ "font-family": {
130
+ "value": "{ref.font.family}"
131
+ },
132
+ "size": {
133
+ "value": "{ref.font.size.sm}"
134
+ },
135
+ "weight": {
136
+ "value": "{ref.font.weight.bold}"
137
+ },
138
+ "line-height": {
139
+ "value": "{ref.font.lineHeight.sm}"
140
+ }
141
+ },
142
+ "caption": {
143
+ "font-family": {
144
+ "value": "{ref.font.family}"
145
+ },
146
+ "size": {
147
+ "value": "{ref.font.size.xs}"
148
+ },
149
+ "weight": {
150
+ "value": "{ref.font.weight.regular}"
151
+ },
152
+ "line-height": {
153
+ "value": "{ref.font.lineHeight.xs}"
154
+ }
155
+ },
156
+ "captionBold": {
157
+ "font-family": {
158
+ "value": "{ref.font.family}"
159
+ },
160
+ "size": {
161
+ "value": "{ref.font.size.xs}"
162
+ },
163
+ "weight": {
164
+ "value": "{ref.font.weight.bold}"
165
+ },
166
+ "line-height": {
167
+ "value": "{ref.font.lineHeight.xs}"
168
+ }
169
+ }
170
+ }
171
+ }
172
+ }
173
+ }
package/agorapulse-ui-theme-15.0.1.tgz DELETED
Binary file
package/assets/style/_grid.scss DELETED
@@ -1,166 +0,0 @@
1
- /*
2
- * Grid, mostly from https://materializecss.com/grid.html
3
- */
4
-
5
- @use "sass:math";
6
-
7
- body {
8
- margin : 0 !important;
9
- }
10
-
11
- .container {
12
- margin: 0 auto;
13
- max-width: 1280px;
14
- width: 90%;
15
- }
16
- @media #{$medium-and-up} {
17
- .container {
18
- width: 85%;
19
- }
20
- }
21
- @media #{$large-and-up} {
22
- .container {
23
- width: 70%;
24
- }
25
- }
26
- .col .row {
27
- margin-left: (-1 * $gutter-width * 0.5);
28
- margin-right: (-1 * $gutter-width * 0.5);
29
- }
30
-
31
- .section {
32
- padding-top: 1rem;
33
- padding-bottom: 1rem;
34
-
35
- &.no-pad {
36
- padding: 0;
37
- }
38
- &.no-pad-bot {
39
- padding-bottom: 0;
40
- }
41
- &.no-pad-top {
42
- padding-top: 0;
43
- }
44
- }
45
-
46
-
47
- // Mixins to eliminate code repitition
48
- @mixin reset-offset {
49
- margin-left: auto;
50
- left: auto;
51
- right: auto;
52
- }
53
- @mixin grid-classes($size, $i, $perc) {
54
- &.offset-#{$size}#{$i} {
55
- margin-left: $perc;
56
- }
57
- &.pull-#{$size}#{$i} {
58
- right: $perc;
59
- }
60
- &.push-#{$size}#{$i} {
61
- left: $perc;
62
- }
63
- }
64
-
65
-
66
- .row {
67
- margin-left: auto;
68
- margin-right: auto;
69
- margin-bottom: 20px;
70
-
71
- // Clear floating children
72
- &:after {
73
- content: "";
74
- display: table;
75
- clear: both;
76
- }
77
-
78
- .col {
79
- float: left;
80
- box-sizing: border-box;
81
- padding: 0 $gutter-width * 0.5;
82
- min-height: 1px;
83
-
84
- &[class*="push-"],
85
- &[class*="pull-"] {
86
- position: relative;
87
- }
88
-
89
- $i: 1;
90
- @while $i <= $num-cols {
91
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
92
- &.s#{$i} {
93
- width: $perc;
94
- @include reset-offset;
95
- }
96
- $i: $i + 1;
97
- }
98
-
99
- $i: 1;
100
- @while $i <= $num-cols {
101
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
102
- @include grid-classes("s", $i, $perc);
103
- $i: $i + 1;
104
- }
105
-
106
- @media #{$medium-and-up} {
107
-
108
- $i: 1;
109
- @while $i <= $num-cols {
110
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
111
- &.m#{$i} {
112
- width: $perc;
113
- @include reset-offset;
114
- }
115
- $i: $i + 1
116
- }
117
-
118
- $i: 1;
119
- @while $i <= $num-cols {
120
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
121
- @include grid-classes("m", $i, $perc);
122
- $i: $i + 1;
123
- }
124
- }
125
-
126
- @media #{$large-and-up} {
127
-
128
- $i: 1;
129
- @while $i <= $num-cols {
130
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
131
- &.l#{$i} {
132
- width: $perc;
133
- @include reset-offset;
134
- }
135
- $i: $i + 1;
136
- }
137
-
138
- $i: 1;
139
- @while $i <= $num-cols {
140
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
141
- @include grid-classes("l", $i, $perc);
142
- $i: $i + 1;
143
- }
144
- }
145
-
146
- @media #{$extra-large-and-up} {
147
-
148
- $i: 1;
149
- @while $i <= $num-cols {
150
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
151
- &.xl#{$i} {
152
- width: $perc;
153
- @include reset-offset;
154
- }
155
- $i: $i + 1;
156
- }
157
-
158
- $i: 1;
159
- @while $i <= $num-cols {
160
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
161
- @include grid-classes("xl", $i, $perc);
162
- $i: $i + 1;
163
- }
164
- }
165
- }
166
- }