@agorapulse/ui-theme 16.1.3-beta → 16.1.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 (10) hide show
  1. package/agorapulse-ui-theme-16.1.3.tgz +0 -0
  2. package/assets/desktop_variables.css +2 -2
  3. package/assets/mobile_variables.css +2 -2
  4. package/assets/style/_colors.scss +1 -0
  5. package/assets/style/_link.scss +17 -28
  6. package/assets/style/components-custom-style/_input.scss +23 -30
  7. package/package.json +22 -22
  8. package/src/tokens/components/link.json +1 -1
  9. package/src/tokens/reference/color.json +1 -1
  10. package/agorapulse-ui-theme-16.1.3-beta.tgz +0 -0
package/agorapulse-ui-theme-16.1.3.tgz ADDED
Binary file
package/assets/desktop_variables.css CHANGED
@@ -28,7 +28,7 @@
28
28
  --ref-color-soft-blue-40: #C0DBF4;
29
29
  --ref-color-soft-blue-60: #A0C8EF;
30
30
  --ref-color-soft-blue-80: #78B1E8;
31
- --ref-color-soft-blue-100: #2873BA;
31
+ --ref-color-soft-blue-100: #61A4E4;
32
32
  --ref-color-soft-blue-150: #2873BA;
33
33
  --ref-color-grey-10: #EAECEF;
34
34
  --ref-color-grey-20: #D6DAE0;
@@ -409,7 +409,7 @@
409
409
  --comp-link-standalone-small-text-style-size: 12px;
410
410
  --comp-link-standalone-small-text-style-font-weight: 700;
411
411
  --comp-link-standalone-small-text-style-line-height: 16px;
412
- --comp-link-default-color: #178DFE;
412
+ --comp-link-default-color: #0E72D6;
413
413
  --comp-link-hover-color: #3A9EFE;
414
414
  --comp-link-clicked-color: #0E72D6;
415
415
  --comp-link-disabled-color: #D1E8FF;
package/assets/mobile_variables.css CHANGED
@@ -28,7 +28,7 @@
28
28
  --ref-color-soft-blue-40: #C0DBF4;
29
29
  --ref-color-soft-blue-60: #A0C8EF;
30
30
  --ref-color-soft-blue-80: #78B1E8;
31
- --ref-color-soft-blue-100: #2873BA;
31
+ --ref-color-soft-blue-100: #61A4E4;
32
32
  --ref-color-soft-blue-150: #2873BA;
33
33
  --ref-color-grey-10: #EAECEF;
34
34
  --ref-color-grey-20: #D6DAE0;
@@ -409,7 +409,7 @@
409
409
  --comp-link-standalone-small-text-style-size: 12px;
410
410
  --comp-link-standalone-small-text-style-font-weight: 700;
411
411
  --comp-link-standalone-small-text-style-line-height: 16px;
412
- --comp-link-default-color: #178DFE;
412
+ --comp-link-default-color: #0E72D6;
413
413
  --comp-link-hover-color: #3A9EFE;
414
414
  --comp-link-clicked-color: #0E72D6;
415
415
  --comp-link-disabled-color: #D1E8FF;
package/assets/style/_colors.scss CHANGED
@@ -273,6 +273,7 @@ $color-linkedin: #2c67bc;
273
273
  $color-twitter: #55acee;
274
274
  $color-youtube: #ff0000;
275
275
  $color-instagramlink: #00376b;
276
+ $color-web: #178DFE;
276
277
 
277
278
  // Others
278
279
  //$state-tag: #5EA9FF;
package/assets/style/_link.scss CHANGED
@@ -24,6 +24,22 @@ a {
24
24
  font-size: var(--comp-link-big-text-style-size);
25
25
  }
26
26
 
27
+ &.standalone {
28
+ text-decoration: none;
29
+ font-family: var(--comp-link-standalone-default-text-style-font-family);
30
+ font-weight: var(--comp-link-standalone-default-text-style-font-weight);
31
+ line-height: var(--comp-link-standalone-default-text-style-line-height);
32
+ font-size: var(--comp-link-standalone-default-text-style-size);
33
+ color: var(--comp-link-default-color);
34
+
35
+ &.small {
36
+ font-family: var(--comp-link-standalone-small-text-style-font-family);
37
+ font-weight: var(--comp-link-standalone-small-text-style-font-weight);
38
+ line-height: var(--comp-link-standalone-small-text-style-line-height);
39
+ font-size: var(--comp-link-standalone-small-text-style-size);
40
+ }
41
+ }
42
+
27
43
  &:not(:visited) {
28
44
  color: var(--comp-link-default-color);
29
45
  }
@@ -36,7 +52,7 @@ a {
36
52
  color: var(--comp-link-clicked-color);
37
53
  }
38
54
 
39
- &:visited {
55
+ &:visited:not(.standalone) {
40
56
  color: var(--comp-link-visited-color);
41
57
  }
42
58
 
@@ -51,31 +67,4 @@ a {
51
67
  max-width: var(--comp-link-icon-size);
52
68
  max-height: var(--comp-link-icon-size);
53
69
  }
54
-
55
- &.standalone {
56
- text-decoration: none;
57
- font-family: var(--comp-link-standalone-default-text-style-font-family);
58
- font-weight: var(--comp-link-standalone-default-text-style-font-weight);
59
- line-height: var(--comp-link-standalone-default-text-style-line-height);
60
- font-size: var(--comp-link-standalone-default-text-style-size);
61
-
62
- &.small {
63
- font-family: var(--comp-link-standalone-small-text-style-font-family);
64
- font-weight: var(--comp-link-standalone-small-text-style-font-weight);
65
- line-height: var(--comp-link-standalone-small-text-style-line-height);
66
- font-size: var(--comp-link-standalone-small-text-style-size);
67
- }
68
-
69
- &:visited {
70
- color: var(--comp-link-visited-color) !important;
71
-
72
- ap-symbol {
73
- color: var(--comp-link-visited-color) !important;
74
-
75
- .svg {
76
- color: var(--comp-link-visited-color) !important;
77
- }
78
- }
79
- }
80
- }
81
70
  }
package/assets/style/components-custom-style/_input.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '../variables';
2
-
3
1
  textarea,
4
2
  select,
5
3
  input,
@@ -23,34 +21,34 @@ form.full-width {
23
21
 
24
22
  input,
25
23
  textarea {
26
- border: 1px solid $form-input-default-border-color;
27
- border-radius: $border-radius;
28
- color: $form-control-selected-font-color;
29
- font-family: $font-family;
30
- font-size: $font-size;
31
- font-weight: $font-weight;
32
- padding: $padding-s $padding-m;
24
+ border: 1px solid var(--comp-input-border-default-color);
25
+ border-radius: var(--comp-input-border-radius);
26
+ color: var(--comp-input-text-default-color);
27
+ font-family: var(--comp-input-text-font-family);
28
+ font-size: var(--comp-input-text-size);
29
+ font-weight: var(--comp-input-text-font-weight);
30
+ padding: var(--ref-spacing-xxs) var(--ref-spacing-sm);
31
+
33
32
  &::placeholder {
34
- color: $form-input-placeholder-font-color;
33
+ color: var(--comp-input-text-placeholder-color);
35
34
  }
36
35
  // Disabled
37
36
  &:disabled {
38
- background: $form-input-disabled-background-color;
39
- border-color: $form-control-disabled-border-color;
40
- color: $form-input-placeholder-font-color;
37
+ background-color: var(--comp-input-fill-disabled-color);
38
+ color: var(--comp-input-border-disabled-color);
41
39
  }
42
40
  // Focus
43
41
  &:focus:not(.transparent) {
44
- border-color: $form-control-selected-border-color;
42
+ border-color: var(--comp-input-border-focused-color);
45
43
  }
46
44
  // Invalid
47
45
  &.invalid:not([disabled]):not(.transparent),
48
46
  &.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent) {
49
- border: 1px solid $color-error;
47
+ border: 1px solid var(--comp-input-border-error-color);
50
48
  }
51
49
  // Valid
52
50
  &.valid:not([disabled]):not(.transparent) {
53
- border: 1px solid $color-success;
51
+ border: 1px solid var(--comp-input-border-success-color);
54
52
  }
55
53
 
56
54
  // Transparent
@@ -65,7 +63,7 @@ textarea {
65
63
 
66
64
  // Hover
67
65
  &:not(.transparent):not(.valid):not(.invalid):not(:focus):not([disabled]):hover {
68
- border-color: $form-input-hover-border-color;
66
+ border-color: var(--comp-input-border-hover-color);
69
67
  }
70
68
  }
71
69
 
@@ -73,12 +71,12 @@ textarea {
73
71
  display: flex;
74
72
  flex-direction: row;
75
73
  width: 180px;
76
- color: map_get($colors-grey, 100);
77
- border-radius: $border-radius;
74
+ color: var(--comp-input-text-default-color);
75
+ border-radius: var(--comp-input-border-radius);
78
76
 
79
77
  input {
80
78
  box-sizing: border-box;
81
- padding: $padding-s $padding-xl $padding-s $padding-m;
79
+ padding: var(--ref-spacing-xxs) var(--ref-spacing-lg) var(--ref-spacing-xxs) var(--ref-spacing-sm);
82
80
  width: 100%;
83
81
  }
84
82
 
@@ -88,21 +86,16 @@ textarea {
88
86
  right: 26px;
89
87
  height: 15px;
90
88
  width: 0;
91
- color: map_get($colors-grey, 60);
89
+ color: var(--comp-input-icon-color);
92
90
  }
93
91
 
94
92
  input:focus + .input-group-append {
95
- color: map_get($colors-electric-blue, 100);
93
+ color: var(--comp-input-border-focused-color);
96
94
  }
97
95
 
98
96
  &.disabled {
99
- color: map_get($colors-grey, 20);
100
- background: map_get($colors-grey, 5);
101
-
102
- .input-group-append {
103
- background: map_get($colors-grey, 5);
104
- color: map_get($colors-grey, 20);
105
- }
97
+ background-color: var(--comp-input-fill-disabled-color);
98
+ color: var(--comp-input-border-disabled-color);
106
99
  }
107
100
 
108
101
  &.full-width {
@@ -116,7 +109,7 @@ form.submitted {
116
109
  textarea {
117
110
  // Invalid
118
111
  &.ng-invalid:not([disabled]):not(.transparent) {
119
- border: 1px solid $color-error;
112
+ border: 1px solid var(--comp-input-border-error-color);
120
113
  }
121
114
  }
122
115
  }
package/package.json CHANGED
@@ -1,24 +1,24 @@
1
1
  {
2
- "name": "@agorapulse/ui-theme",
3
- "version": "16.1.3-beta",
4
- "description": "Agorapulse UI Theme Library",
5
- "repository": {
6
- "type": "git",
7
- "url": "https://github.com/agorapulse/design.git"
8
- },
9
- "author": "Arnaud BUSO",
10
- "license": "ISC",
11
- "bugs": {
12
- "url": "https://github.com/agorapulse/design/issues"
13
- },
14
- "scripts": {
15
- "generate-tokens": "cd src && node build.js && cd ../assets && git add mobile_variables.css && git add desktop_variables.css"
16
- },
17
- "homepage": "https://github.com/agorapulse/design#readme",
18
- "peerDependencies": {
19
- "@angular/material": "^16.2.9"
20
- },
21
- "devDependencies": {
22
- "style-dictionary": "^3.7.2"
23
- }
2
+ "name": "@agorapulse/ui-theme",
3
+ "version": "16.1.3",
4
+ "description": "Agorapulse UI Theme Library",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/agorapulse/design.git"
8
+ },
9
+ "author": "Arnaud BUSO",
10
+ "license": "ISC",
11
+ "bugs": {
12
+ "url": "https://github.com/agorapulse/design/issues"
13
+ },
14
+ "scripts": {
15
+ "generate-tokens": "cd src && node build.js && cd ../assets && git add mobile_variables.css && git add desktop_variables.css"
16
+ },
17
+ "homepage": "https://github.com/agorapulse/design#readme",
18
+ "peerDependencies": {
19
+ "@angular/material": "^16.2.9"
20
+ },
21
+ "devDependencies": {
22
+ "style-dictionary": "^3.7.2"
23
+ }
24
24
  }
package/src/tokens/components/link.json CHANGED
@@ -91,7 +91,7 @@
91
91
  },
92
92
  "default": {
93
93
  "color": {
94
- "value": "{sys.color.accent.default.bg.default}"
94
+ "value": "{sys.color.accent.light.text}"
95
95
  }
96
96
  },
97
97
  "hover": {
package/src/tokens/reference/color.json CHANGED
@@ -28,7 +28,7 @@
28
28
  },
29
29
  "softBlue": {
30
30
  "150" : { "value": "#2873BA" },
31
- "100" : { "value": "#2873BA" },
31
+ "100" : { "value": "#61A4E4" },
32
32
  "80" : { "value": "#78B1E8" },
33
33
  "60" : { "value": "#A0C8EF" },
34
34
  "40" : { "value": "#C0DBF4" },
package/agorapulse-ui-theme-16.1.3-beta.tgz DELETED
Binary file