@webitel/styleguide 24.12.61 → 24.12.63

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webitel/styleguide",
3
- "version": "24.12.61",
3
+ "version": "24.12.63",
4
4
  "main": "",
5
5
  "exports": {
6
6
  ".": "./src/lib/main.scss",
@@ -1,21 +1,22 @@
1
1
  export default {
2
2
  root: {
3
3
  background: '{content.border.color}',
4
- color: '{content.color}',
4
+ color: '{text.avatar.color}',
5
5
  },
6
6
  letters: {
7
- 'p1-color': '{red.300}',
8
- 'p2-color': '{red.300}',
9
- 'p3-color': '{red.300}',
10
- 'p4-color': '{red.300}',
11
- 'p5-color': '{red.300}',
12
- 'p6-color': '{red.300}',
13
- 'p7-color': '{red.300}',
14
- 'p8-color': '{red.300}',
15
- 'p9-color': '{red.300}',
16
- 'p10-color': '{red.300}',
17
- 'p11-color': '{red.300}',
18
- 'p12-color': '{red.300}',
19
- 'p13-color': '{red.300}',
7
+ 'p1-color': 'linear-gradient(45deg, {deep-purple.700}, {deep-purple.350})',
8
+ 'p2-color': 'linear-gradient(45deg, {indigo.550}, {indigo.300})',
9
+ 'p3-color': 'linear-gradient(45deg, {deep-purple.350}, {cyan.250})',
10
+ 'p4-color': 'linear-gradient(45deg, {deep-purple.500}, {green.500})',
11
+ 'p5-color': 'linear-gradient(45deg, {green.300}, {pink.350})',
12
+ 'p6-color': 'linear-gradient(45deg, {purple.550}, {pink.450})',
13
+ 'p7-color': 'linear-gradient(45deg, {pink.450}, {pink.200})',
14
+ 'p8-color': 'linear-gradient(45deg, {red.500}, {amber.500})',
15
+ 'p9-color': 'linear-gradient(45deg, {blue.450}, {light-green.450})',
16
+ 'p10-color': 'linear-gradient(45deg, {green.550}, {teal.200})',
17
+ 'p11-color': 'linear-gradient(45deg, {amber.500}, {green.500})',
18
+ 'p12-color': 'linear-gradient(45deg, {green.500}, {indigo.500})',
19
+ 'p13-color': 'linear-gradient(45deg, {orange.400}, {amber.200})',
20
+ 'p14-color': 'linear-gradient(45deg, {amber.400}, {lime.350})',
20
21
  }
21
22
  }
@@ -1,21 +1,22 @@
1
1
  export default {
2
2
  root: {
3
3
  background: '{content.border.color}',
4
- color: '{content.color}',
4
+ color: '{text.avatar.color}',
5
5
  },
6
6
  letters: {
7
- 'p1-color': '{blue.300}',
8
- 'p2-color': '{blue.300}',
9
- 'p3-color': '{blue.300}',
10
- 'p4-color': '{blue.300}',
11
- 'p5-color': '{blue.300}',
12
- 'p6-color': '{blue.300}',
13
- 'p7-color': '{blue.300}',
14
- 'p8-color': '{blue.300}',
15
- 'p9-color': '{blue.300}',
16
- 'p10-color': '{blue.300}',
17
- 'p11-color': '{blue.300}',
18
- 'p12-color': '{blue.300}',
19
- 'p13-color': '{blue.300}',
7
+ 'p1-color': 'linear-gradient(45deg, {deep-purple.700}, {deep-purple.350})',
8
+ 'p2-color': 'linear-gradient(45deg, {indigo.550}, {indigo.300})',
9
+ 'p3-color': 'linear-gradient(45deg, {deep-purple.350}, {cyan.250})',
10
+ 'p4-color': 'linear-gradient(45deg, {deep-purple.500}, {green.500})',
11
+ 'p5-color': 'linear-gradient(45deg, {green.300}, {pink.350})',
12
+ 'p6-color': 'linear-gradient(45deg, {purple.550}, {pink.450})',
13
+ 'p7-color': 'linear-gradient(45deg, {pink.450}, {pink.200})',
14
+ 'p8-color': 'linear-gradient(45deg, {red.500}, {amber.500})',
15
+ 'p9-color': 'linear-gradient(45deg, {blue.450}, {light-green.450})',
16
+ 'p10-color': 'linear-gradient(45deg, {green.550}, {teal.200})',
17
+ 'p11-color': 'linear-gradient(45deg, {amber.500}, {green.500})',
18
+ 'p12-color': 'linear-gradient(45deg, {green.500}, {indigo.500})',
19
+ 'p13-color': 'linear-gradient(45deg, {orange.400}, {amber.200})',
20
+ 'p14-color': 'linear-gradient(45deg, {amber.400}, {lime.350})',
20
21
  }
21
22
  }
@@ -4,39 +4,44 @@ const sizes = {
4
4
  fontSize: '1rem',
5
5
  borderRadius: '{content.border.radius}',
6
6
 
7
- xs: {
7
+ '2xs': {
8
8
  width: '1rem',
9
9
  height: '1rem',
10
- fontSize: '0.5rem',
10
+ fontSize: '0.4rem',
11
11
  },
12
- sm: {
12
+ xs: {
13
13
  width: '1.5rem',
14
14
  height: '1.5rem',
15
- fontSize: '0.75rem',
15
+ fontSize: '0.6rem',
16
16
  },
17
- md: {
17
+ sm: {
18
18
  width: '2rem',
19
19
  height: '2rem',
20
- fontSize: '1rem',
20
+ fontSize: '0.75rem',
21
+ },
22
+ md: {
23
+ width: '2.5rem',
24
+ height: '2.5rem',
25
+ fontSize: '0.875rem',
21
26
  },
22
27
  lg: {
23
- width: '3rem',
24
- height: '3rem',
25
- fontSize: '1.5rem',
28
+ width: '3.5rem',
29
+ height: '3.5rem',
30
+ fontSize: '1.25rem',
26
31
  },
27
32
  xl: {
28
- width: '4rem',
29
- height: '4rem',
30
- fontSize: '2rem',
33
+ width: '4.5rem',
34
+ height: '4.5rem',
35
+ fontSize: '1.5rem',
31
36
  },
32
37
  '2xl': {
33
- width: '5rem',
34
- height: '5rem',
35
- fontSize: '2.5rem',
36
- },
37
- '3xl': {
38
38
  width: '6rem',
39
39
  height: '6rem',
40
+ fontSize: '2.25rem',
41
+ },
42
+ '3xl': {
43
+ width: '8rem',
44
+ height: '8rem',
40
45
  fontSize: '3rem',
41
46
  },
42
47
  };
@@ -1,6 +1,6 @@
1
1
  export default {
2
- background: '{content.background}',
3
- borderColor: '{content.border.color}',
2
+ background: '{surface.900}',
3
+ borderColor: '{transparent}',
4
4
  color: '{content.color}',
5
5
  transitionDuration: '{transition.duration}'
6
6
  }
@@ -1,6 +1,6 @@
1
1
  export default {
2
- background: '{content.background}',
3
- borderColor: '{content.border.color}',
2
+ background: '{surface.150}',
3
+ borderColor: '{transparent}',
4
4
  color: '{content.color}',
5
5
  transitionDuration: '{transition.duration}'
6
6
  }
@@ -1,7 +1,7 @@
1
1
  const sizes = {
2
- gap: '0.5rem',
3
- padding: '0.5rem 0.75rem',
4
- borderRadius: '{content.border.radius}',
2
+ gap: '1em',
3
+ padding: '0.5rem 1rem',
4
+ borderRadius: '0rem',
5
5
  };
6
6
 
7
7
  export default sizes
@@ -3,6 +3,7 @@ export default {
3
3
  color: '{surface.100}',
4
4
  hoverColor: '{surface.50}',
5
5
  mutedColor: '{surface.400}',
6
- hoverMutedColor: '{surface.300}'
6
+ hoverMutedColor: '{surface.300}',
7
+ avatarColor: '{gray.850}'
7
8
  }
8
9
  }
@@ -3,6 +3,7 @@ export default {
3
3
  color: '{surface.750}',
4
4
  hoverColor: '{surface.800}',
5
5
  mutedColor: '{surface.500}',
6
- hoverMutedColor: '{surface.600}'
6
+ hoverMutedColor: '{surface.600}',
7
+ avatarColor: '{gray.0}'
7
8
  }
8
9
  }