@nectary/components 0.42.0 → 0.42.1

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 (12) hide show
  1. package/package.json +3 -1
  2. package/theme/avatar.css +25 -0
  3. package/theme/badge.css +15 -0
  4. package/theme/chip.css +53 -0
  5. package/theme/color-swatch.css +65 -0
  6. package/theme/elevation.css +7 -0
  7. package/theme/fonts.css +76 -0
  8. package/theme/fonts.json +79 -0
  9. package/theme/palette.css +90 -0
  10. package/theme/shapes.css +7 -0
  11. package/theme/tag.css +53 -0
  12. package/theme/typography.css +16 -0
package/package.json CHANGED
@@ -1,8 +1,10 @@
1
1
  {
2
2
  "name": "@nectary/components",
3
- "version": "0.42.0",
3
+ "version": "0.42.1",
4
4
  "files": [
5
5
  "theme.css",
6
+ "theme/*.css",
7
+ "theme/fonts.json",
6
8
  "**/*/*.js",
7
9
  "**/*/*.d.ts",
8
10
  "types.d.ts",
package/theme/avatar.css ADDED
@@ -0,0 +1,25 @@
1
+ :root,
2
+ :host {
3
+ --sinch-avatar-color-light-blue-bg: var(--sinch-color-night-200);
4
+ --sinch-avatar-color-light-blue-fg: var(--sinch-color-night-700);
5
+ --sinch-avatar-color-light-brown-bg: var(--sinch-color-mud-200);
6
+ --sinch-avatar-color-light-brown-fg: var(--sinch-color-mud-700);
7
+ --sinch-avatar-color-light-gray-bg: var(--sinch-color-dirt-200);
8
+ --sinch-avatar-color-light-gray-fg: var(--sinch-color-dirt-700);
9
+ --sinch-avatar-color-light-green-bg: var(--sinch-color-grass-200);
10
+ --sinch-avatar-color-light-green-fg: var(--sinch-color-grass-700);
11
+ --sinch-avatar-color-light-orange-bg: var(--sinch-color-orange-200);
12
+ --sinch-avatar-color-light-orange-fg: var(--sinch-color-orange-700);
13
+ --sinch-avatar-color-light-pink-bg: var(--sinch-color-candy-200);
14
+ --sinch-avatar-color-light-pink-fg: var(--sinch-color-candy-700);
15
+ --sinch-avatar-color-light-violet-bg: var(--sinch-color-violet-200);
16
+ --sinch-avatar-color-light-violet-fg: var(--sinch-color-violet-700);
17
+ --sinch-avatar-color-light-yellow-bg: var(--sinch-color-bolt-200);
18
+ --sinch-avatar-color-light-yellow-fg: var(--sinch-color-bolt-700);
19
+ --sinch-avatar-color-default-bg: var(--sinch-avatar-color-light-gray-bg);
20
+ --sinch-avatar-color-default-fg: var(--sinch-avatar-color-light-gray-fg);
21
+ --sinch-avatar-status-color-online: var(--sinch-color-grass-400);
22
+ --sinch-avatar-status-color-away: var(--sinch-color-honey-500);
23
+ --sinch-avatar-status-color-busy: var(--sinch-color-raspberry-500);
24
+ --sinch-avatar-status-color-offline: var(--sinch-color-stormy-200);
25
+ }
package/theme/badge.css ADDED
@@ -0,0 +1,15 @@
1
+ :root,
2
+ :host {
3
+ --sinch-badge-color-yellow-bg: var(--sinch-color-bolt-400);
4
+ --sinch-badge-color-yellow-fg: var(--sinch-color-stormy-500);
5
+ --sinch-badge-color-red-bg: var(--sinch-color-raspberry-500);
6
+ --sinch-badge-color-red-fg: var(--sinch-color-snow-100);
7
+ --sinch-badge-color-black-bg: var(--sinch-color-stormy-500);
8
+ --sinch-badge-color-black-fg: var(--sinch-color-snow-100);
9
+ --sinch-badge-color-gray-bg: var(--sinch-color-snow-500);
10
+ --sinch-badge-color-gray-fg: var(--sinch-color-stormy-500);
11
+ --sinch-badge-color-green-bg: var(--sinch-color-grass-400);
12
+ --sinch-badge-color-green-fg: var(--sinch-color-snow-100);
13
+ --sinch-badge-color-default-bg: var(--sinch-badge-color-red-bg);
14
+ --sinch-badge-color-default-fg: var(--sinch-badge-color-red-fg);
15
+ }
package/theme/chip.css ADDED
@@ -0,0 +1,53 @@
1
+ :root,
2
+ :host {
3
+ --sinch-chip-color-default-bg: var(--sinch-color-snow-500);
4
+ --sinch-chip-color-default-fg: var(--sinch-color-stormy-500);
5
+ --sinch-chip-color-light-blue-bg: var(--sinch-color-night-200);
6
+ --sinch-chip-color-light-blue-fg: var(--sinch-color-night-700);
7
+ --sinch-chip-color-light-brown-bg: var(--sinch-color-mud-200);
8
+ --sinch-chip-color-light-brown-fg: var(--sinch-color-mud-700);
9
+ --sinch-chip-color-light-gray-bg: var(--sinch-color-dirt-200);
10
+ --sinch-chip-color-light-gray-fg: var(--sinch-color-dirt-700);
11
+ --sinch-chip-color-light-green-bg: var(--sinch-color-grass-200);
12
+ --sinch-chip-color-light-green-fg: var(--sinch-color-grass-700);
13
+ --sinch-chip-color-light-orange-bg: var(--sinch-color-orange-200);
14
+ --sinch-chip-color-light-orange-fg: var(--sinch-color-orange-700);
15
+ --sinch-chip-color-light-pink-bg: var(--sinch-color-candy-200);
16
+ --sinch-chip-color-light-pink-fg: var(--sinch-color-candy-700);
17
+ --sinch-chip-color-light-violet-bg: var(--sinch-color-violet-200);
18
+ --sinch-chip-color-light-violet-fg: var(--sinch-color-violet-700);
19
+ --sinch-chip-color-light-yellow-bg: var(--sinch-color-bolt-200);
20
+ --sinch-chip-color-light-yellow-fg: var(--sinch-color-bolt-700);
21
+ --sinch-chip-color-dark-blue-bg: var(--sinch-color-night-700);
22
+ --sinch-chip-color-dark-blue-fg: var(--sinch-color-night-200);
23
+ --sinch-chip-color-dark-brown-bg: var(--sinch-color-mud-700);
24
+ --sinch-chip-color-dark-brown-fg: var(--sinch-color-mud-200);
25
+ --sinch-chip-color-dark-gray-bg: var(--sinch-color-dirt-700);
26
+ --sinch-chip-color-dark-gray-fg: var(--sinch-color-dirt-200);
27
+ --sinch-chip-color-dark-green-bg: var(--sinch-color-grass-700);
28
+ --sinch-chip-color-dark-green-fg: var(--sinch-color-grass-200);
29
+ --sinch-chip-color-dark-orange-bg: var(--sinch-color-orange-700);
30
+ --sinch-chip-color-dark-orange-fg: var(--sinch-color-orange-200);
31
+ --sinch-chip-color-dark-pink-bg: var(--sinch-color-candy-700);
32
+ --sinch-chip-color-dark-pink-fg: var(--sinch-color-candy-200);
33
+ --sinch-chip-color-dark-violet-bg: var(--sinch-color-violet-700);
34
+ --sinch-chip-color-dark-violet-fg: var(--sinch-color-violet-200);
35
+ --sinch-chip-color-dark-yellow-bg: var(--sinch-color-bolt-700);
36
+ --sinch-chip-color-dark-yellow-fg: var(--sinch-color-bolt-200);
37
+ --sinch-chip-color-blue-bg: var(--sinch-color-night-400);
38
+ --sinch-chip-color-blue-fg: var(--sinch-color-snow-100);
39
+ --sinch-chip-color-brown-bg: var(--sinch-color-mud-400);
40
+ --sinch-chip-color-brown-fg: var(--sinch-color-snow-100);
41
+ --sinch-chip-color-gray-bg: var(--sinch-color-dirt-400);
42
+ --sinch-chip-color-gray-fg: var(--sinch-color-snow-100);
43
+ --sinch-chip-color-green-bg: var(--sinch-color-grass-400);
44
+ --sinch-chip-color-green-fg: var(--sinch-color-stormy-500);
45
+ --sinch-chip-color-orange-bg: var(--sinch-color-orange-400);
46
+ --sinch-chip-color-orange-fg: var(--sinch-color-stormy-500);
47
+ --sinch-chip-color-pink-bg: var(--sinch-color-candy-400);
48
+ --sinch-chip-color-pink-fg: var(--sinch-color-stormy-500);
49
+ --sinch-chip-color-violet-bg: var(--sinch-color-violet-400);
50
+ --sinch-chip-color-violet-fg: var(--sinch-color-stormy-500);
51
+ --sinch-chip-color-yellow-bg: var(--sinch-color-bolt-400);
52
+ --sinch-chip-color-yellow-fg: var(--sinch-color-stormy-500);
53
+ }
package/theme/color-swatch.css ADDED
@@ -0,0 +1,65 @@
1
+ :root,
2
+ :host {
3
+ --sinch-color-swatch-color-default-bg: var(--sinch-color-snow-500);
4
+ --sinch-color-swatch-color-default-fg: var(--sinch-color-stormy-500);
5
+ --sinch-color-swatch-color-light-blue-bg: var(--sinch-color-night-200);
6
+ --sinch-color-swatch-color-light-blue-fg: var(--sinch-color-night-700);
7
+ --sinch-color-swatch-color-light-brown-bg: var(--sinch-color-mud-200);
8
+ --sinch-color-swatch-color-light-brown-fg: var(--sinch-color-mud-700);
9
+ --sinch-color-swatch-color-light-gray-bg: var(--sinch-color-dirt-200);
10
+ --sinch-color-swatch-color-light-gray-fg: var(--sinch-color-dirt-700);
11
+ --sinch-color-swatch-color-light-green-bg: var(--sinch-color-grass-200);
12
+ --sinch-color-swatch-color-light-green-fg: var(--sinch-color-grass-700);
13
+ --sinch-color-swatch-color-light-orange-bg: var(--sinch-color-orange-200);
14
+ --sinch-color-swatch-color-light-orange-fg: var(--sinch-color-orange-700);
15
+ --sinch-color-swatch-color-light-pink-bg: var(--sinch-color-candy-200);
16
+ --sinch-color-swatch-color-light-pink-fg: var(--sinch-color-candy-700);
17
+ --sinch-color-swatch-color-light-violet-bg: var(--sinch-color-violet-200);
18
+ --sinch-color-swatch-color-light-violet-fg: var(--sinch-color-violet-700);
19
+ --sinch-color-swatch-color-light-yellow-bg: var(--sinch-color-bolt-200);
20
+ --sinch-color-swatch-color-light-yellow-fg: var(--sinch-color-bolt-700);
21
+ --sinch-color-swatch-color-dark-blue-bg: var(--sinch-color-night-700);
22
+ --sinch-color-swatch-color-dark-blue-fg: var(--sinch-color-night-200);
23
+ --sinch-color-swatch-color-dark-brown-bg: var(--sinch-color-mud-700);
24
+ --sinch-color-swatch-color-dark-brown-fg: var(--sinch-color-mud-200);
25
+ --sinch-color-swatch-color-dark-gray-bg: var(--sinch-color-dirt-700);
26
+ --sinch-color-swatch-color-dark-gray-fg: var(--sinch-color-dirt-200);
27
+ --sinch-color-swatch-color-dark-green-bg: var(--sinch-color-grass-700);
28
+ --sinch-color-swatch-color-dark-green-fg: var(--sinch-color-grass-200);
29
+ --sinch-color-swatch-color-dark-orange-bg: var(--sinch-color-orange-700);
30
+ --sinch-color-swatch-color-dark-orange-fg: var(--sinch-color-orange-200);
31
+ --sinch-color-swatch-color-dark-pink-bg: var(--sinch-color-candy-700);
32
+ --sinch-color-swatch-color-dark-pink-fg: var(--sinch-color-candy-200);
33
+ --sinch-color-swatch-color-dark-violet-bg: var(--sinch-color-violet-700);
34
+ --sinch-color-swatch-color-dark-violet-fg: var(--sinch-color-violet-200);
35
+ --sinch-color-swatch-color-dark-yellow-bg: var(--sinch-color-bolt-700);
36
+ --sinch-color-swatch-color-dark-yellow-fg: var(--sinch-color-bolt-200);
37
+ --sinch-color-swatch-color-blue-bg: var(--sinch-color-night-400);
38
+ --sinch-color-swatch-color-blue-fg: var(--sinch-color-snow-100);
39
+ --sinch-color-swatch-color-brown-bg: var(--sinch-color-mud-400);
40
+ --sinch-color-swatch-color-brown-fg: var(--sinch-color-snow-100);
41
+ --sinch-color-swatch-color-gray-bg: var(--sinch-color-dirt-400);
42
+ --sinch-color-swatch-color-gray-fg: var(--sinch-color-snow-100);
43
+ --sinch-color-swatch-color-green-bg: var(--sinch-color-grass-400);
44
+ --sinch-color-swatch-color-green-fg: var(--sinch-color-stormy-500);
45
+ --sinch-color-swatch-color-orange-bg: var(--sinch-color-orange-400);
46
+ --sinch-color-swatch-color-orange-fg: var(--sinch-color-stormy-500);
47
+ --sinch-color-swatch-color-pink-bg: var(--sinch-color-candy-400);
48
+ --sinch-color-swatch-color-pink-fg: var(--sinch-color-stormy-500);
49
+ --sinch-color-swatch-color-violet-bg: var(--sinch-color-violet-400);
50
+ --sinch-color-swatch-color-violet-fg: var(--sinch-color-stormy-500);
51
+ --sinch-color-swatch-color-yellow-bg: var(--sinch-color-bolt-400);
52
+ --sinch-color-swatch-color-yellow-fg: var(--sinch-color-stormy-500);
53
+ --sinch-color-swatch-color-skin-tone-0-bg: var(--sinch-color-skin-tone-0);
54
+ --sinch-color-swatch-color-skin-tone-0-fg: var(--sinch-color-stormy-500);
55
+ --sinch-color-swatch-color-skin-tone-10-bg: var(--sinch-color-skin-tone-10);
56
+ --sinch-color-swatch-color-skin-tone-10-fg: var(--sinch-color-stormy-500);
57
+ --sinch-color-swatch-color-skin-tone-20-bg: var(--sinch-color-skin-tone-20);
58
+ --sinch-color-swatch-color-skin-tone-20-fg: var(--sinch-color-stormy-500);
59
+ --sinch-color-swatch-color-skin-tone-30-bg: var(--sinch-color-skin-tone-30);
60
+ --sinch-color-swatch-color-skin-tone-30-fg: var(--sinch-color-stormy-500);
61
+ --sinch-color-swatch-color-skin-tone-40-bg: var(--sinch-color-skin-tone-40);
62
+ --sinch-color-swatch-color-skin-tone-40-fg: var(--sinch-color-stormy-500);
63
+ --sinch-color-swatch-color-skin-tone-50-bg: var(--sinch-color-skin-tone-50);
64
+ --sinch-color-swatch-color-skin-tone-50-fg: var(--sinch-color-snow-100);
65
+ }
package/theme/elevation.css ADDED
@@ -0,0 +1,7 @@
1
+ :root,
2
+ :host {
3
+ --sinch-elevation-level-0: 0 0 0 0 rgba(10, 39, 61, 0.1);
4
+ --sinch-elevation-level-1: 1px 2px 6px rgba(10, 39, 61, 0.1);
5
+ --sinch-elevation-level-2: 1px 4px 8px rgba(10, 39, 61, 0.1);
6
+ --sinch-elevation-level-3: 1px 6px 12px rgba(10, 39, 61, 0.15);
7
+ }
package/theme/fonts.css ADDED
@@ -0,0 +1,76 @@
1
+ @font-face {
2
+ font-family: "Gilroy";
3
+ font-weight: 400;
4
+ font-style: normal;
5
+ font-display: swap;
6
+ src:
7
+ local("Gilroy-Regular"),
8
+ url("https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff2") format("woff2"),
9
+ url("https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff") format("woff");
10
+ }
11
+
12
+ @font-face {
13
+ font-family: "Gilroy";
14
+ font-weight: 600;
15
+ font-style: normal;
16
+ font-display: swap;
17
+ src:
18
+ local("Gilroy-SemiBold"),
19
+ url("https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff2") format("woff2"),
20
+ url("https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff") format("woff");
21
+ }
22
+
23
+ @font-face {
24
+ font-family: "Gilroy";
25
+ font-weight: 700;
26
+ font-style: normal;
27
+ font-display: swap;
28
+ src:
29
+ local("Gilroy-Bold"),
30
+ url("https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff2") format("woff2"),
31
+ url("https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff") format("woff");
32
+ }
33
+
34
+ @font-face {
35
+ font-family: "DM Sans";
36
+ font-weight: 400;
37
+ font-style: normal;
38
+ font-display: swap;
39
+ src:
40
+ local("DMSans-Regular"),
41
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff2") format("woff2"),
42
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff") format("woff");
43
+ }
44
+
45
+ @font-face {
46
+ font-family: "DM Sans";
47
+ font-weight: 500;
48
+ font-style: normal;
49
+ font-display: swap;
50
+ src:
51
+ local("DMSans-Medium"),
52
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff2") format("woff2"),
53
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff") format("woff");
54
+ }
55
+
56
+ @font-face {
57
+ font-family: "DM Sans";
58
+ font-weight: 700;
59
+ font-style: normal;
60
+ font-display: swap;
61
+ src:
62
+ local("DMSans-Bold"),
63
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff2") format("woff2"),
64
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff") format("woff");
65
+ }
66
+
67
+ @font-face {
68
+ font-family: "DM Mono";
69
+ font-weight: 400;
70
+ font-style: normal;
71
+ font-display: swap;
72
+ src:
73
+ local("DMMono-Regular"),
74
+ url("https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff2") format("woff2"),
75
+ url("https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff") format("woff");
76
+ }
package/theme/fonts.json ADDED
@@ -0,0 +1,79 @@
1
+ [
2
+ {
3
+ "family": "Gilroy",
4
+ "weight": 400,
5
+ "style": "normal",
6
+ "display": "swap",
7
+ "src": {
8
+ "local": "Gilroy-Regular",
9
+ "woff2": "https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff2",
10
+ "woff": "https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff"
11
+ }
12
+ },
13
+ {
14
+ "family": "Gilroy",
15
+ "weight": 600,
16
+ "style": "normal",
17
+ "display": "swap",
18
+ "src": {
19
+ "local": "Gilroy-SemiBold",
20
+ "woff2": "https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff2",
21
+ "woff": "https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff"
22
+ }
23
+ },
24
+ {
25
+ "family": "Gilroy",
26
+ "weight": 700,
27
+ "style": "normal",
28
+ "display": "swap",
29
+ "src": {
30
+ "local": "Gilroy-Bold",
31
+ "woff2": "https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff2",
32
+ "woff": "https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff"
33
+ }
34
+ },
35
+ {
36
+ "family": "DM Sans",
37
+ "weight": 400,
38
+ "style": "normal",
39
+ "display": "swap",
40
+ "src": {
41
+ "local": "DMSans-Regular",
42
+ "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff2",
43
+ "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff"
44
+ }
45
+ },
46
+ {
47
+ "family": "DM Sans",
48
+ "weight": 500,
49
+ "style": "normal",
50
+ "display": "swap",
51
+ "src": {
52
+ "local": "DMSans-Medium",
53
+ "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff2",
54
+ "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff"
55
+ }
56
+ },
57
+ {
58
+ "family": "DM Sans",
59
+ "weight": 700,
60
+ "style": "normal",
61
+ "display": "swap",
62
+ "src": {
63
+ "local": "DMSans-Bold",
64
+ "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff2",
65
+ "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff"
66
+ }
67
+ },
68
+ {
69
+ "family": "DM Mono",
70
+ "weight": 400,
71
+ "style": "normal",
72
+ "display": "swap",
73
+ "src": {
74
+ "local": "DMMono-Regular",
75
+ "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff2",
76
+ "woff": "https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff"
77
+ }
78
+ }
79
+ ]
package/theme/palette.css ADDED
@@ -0,0 +1,90 @@
1
+ :root,
2
+ :host {
3
+ --sinch-color-honey-700: #CC8800;
4
+ --sinch-color-honey-600: #FFAA00;
5
+ --sinch-color-honey-500: #FFBE3C;
6
+ --sinch-color-honey-400: #FFCC66;
7
+ --sinch-color-honey-300: #FFDF9E;
8
+ --sinch-color-honey-200: #FCECCB;
9
+ --sinch-color-honey-100: #FFF7E6;
10
+ --sinch-color-tropical-700: #003D3D;
11
+ --sinch-color-tropical-600: #005757;
12
+ --sinch-color-tropical-500: #007171;
13
+ --sinch-color-tropical-400: #059688;
14
+ --sinch-color-tropical-300: #66AAAA;
15
+ --sinch-color-tropical-200: #A7D5C2;
16
+ --sinch-color-tropical-100: #DCEDE1;
17
+ --sinch-color-tropical-50: #E5F1F1;
18
+ --sinch-color-stormy-700: #000000;
19
+ --sinch-color-stormy-600: #171717;
20
+ --sinch-color-stormy-500: #242424;
21
+ --sinch-color-stormy-400: #595959;
22
+ --sinch-color-stormy-300: #767676;
23
+ --sinch-color-stormy-200: #8C8C8C;
24
+ --sinch-color-stormy-100: #A6A6A6;
25
+ --sinch-color-ocean-700: #1B3E65;
26
+ --sinch-color-ocean-600: #1686CB;
27
+ --sinch-color-ocean-500: #3AA7EA;
28
+ --sinch-color-ocean-400: #6EBBEE;
29
+ --sinch-color-ocean-300: #A1D5F5;
30
+ --sinch-color-ocean-200: #C8E6F9;
31
+ --sinch-color-ocean-100: #DEF2FF;
32
+ --sinch-color-ocean-50: #F3FAFE;
33
+ --sinch-color-snow-700: #CCCCCC;
34
+ --sinch-color-snow-600: #D9D9D9;
35
+ --sinch-color-snow-500: #E0E0E0;
36
+ --sinch-color-snow-400: #F2F2F2;
37
+ --sinch-color-snow-200: #F8F8F8;
38
+ --sinch-color-snow-100: #FFFFFF;
39
+ --sinch-color-raspberry-700: #882024;
40
+ --sinch-color-raspberry-600: #D13D42;
41
+ --sinch-color-raspberry-500: #EF5858;
42
+ --sinch-color-raspberry-400: #F38686;
43
+ --sinch-color-raspberry-300: #FFB8B8;
44
+ --sinch-color-raspberry-200: #FBD5D5;
45
+ --sinch-color-raspberry-100: #FFE8E4;
46
+ --sinch-color-raspberry-50: #FFF6F5;
47
+ --sinch-color-night-700: #1223a1;
48
+ --sinch-color-night-400: #3247E9;
49
+ --sinch-color-night-200: #D1D6FA;
50
+ --sinch-color-grass-700: #006602;
51
+ --sinch-color-grass-400: #39B93D;
52
+ --sinch-color-grass-200: #B4E4B5;
53
+ --sinch-color-dirt-700: #363230;
54
+ --sinch-color-dirt-400: #828282;
55
+ --sinch-color-dirt-200: #E0DDDC;
56
+ --sinch-color-candy-700: #981b77;
57
+ --sinch-color-candy-400: #E467C3;
58
+ --sinch-color-candy-200: #F6CBEA;
59
+ --sinch-color-mud-700: #6d4e46;
60
+ --sinch-color-mud-400: #8B6559;
61
+ --sinch-color-mud-200: #D7C6C1;
62
+ --sinch-color-orange-700: #974302;
63
+ --sinch-color-orange-400: #FF8C34;
64
+ --sinch-color-orange-200: #FFD4B3;
65
+ --sinch-color-bolt-700: #805500;
66
+ --sinch-color-bolt-400: #FFBE3C;
67
+ --sinch-color-bolt-200: #FFE6B3;
68
+ --sinch-color-violet-700: #4F1B98;
69
+ --sinch-color-violet-400: #9E67E4;
70
+ --sinch-color-violet-200: #DECBF6;
71
+ --sinch-color-error-700: #882024;
72
+ --sinch-color-error-500: #D13D42;
73
+ --sinch-color-error-200: #FBD5D5;
74
+ --sinch-color-success-700: #275D33;
75
+ --sinch-color-success-500: #46A65A;
76
+ --sinch-color-success-200: #D7F1D8;
77
+ --sinch-color-informative-700: #003B7E;
78
+ --sinch-color-informative-500: #2071CE;
79
+ --sinch-color-informative-200: #D5E5F8;
80
+ --sinch-color-warning-700: #9C2E00;
81
+ --sinch-color-warning-500: #F35B1C;
82
+ --sinch-color-warning-200: #FFE8D6;
83
+ --sinch-color-skin-tone-0: #FFCC4D;
84
+ --sinch-color-skin-tone-10: #F7DECE;
85
+ --sinch-color-skin-tone-20: #F3D2A2;
86
+ --sinch-color-skin-tone-30: #D4AB88;
87
+ --sinch-color-skin-tone-40: #AF7E57;
88
+ --sinch-color-skin-tone-50: #7C533E;
89
+ --sinch-color-transparent: transparent;
90
+ }
package/theme/shapes.css ADDED
@@ -0,0 +1,7 @@
1
+ :root,
2
+ :host {
3
+ --sinch-shape-radius-xs: 2px;
4
+ --sinch-shape-radius-s: 4px;
5
+ --sinch-shape-radius-m: 8px;
6
+ --sinch-shape-radius-l: 12px;
7
+ }
package/theme/tag.css ADDED
@@ -0,0 +1,53 @@
1
+ :root,
2
+ :host {
3
+ --sinch-tag-color-default-bg: var(--sinch-color-snow-500);
4
+ --sinch-tag-color-default-fg: var(--sinch-color-stormy-500);
5
+ --sinch-tag-color-light-blue-bg: var(--sinch-color-night-200);
6
+ --sinch-tag-color-light-blue-fg: var(--sinch-color-night-700);
7
+ --sinch-tag-color-light-brown-bg: var(--sinch-color-mud-200);
8
+ --sinch-tag-color-light-brown-fg: var(--sinch-color-mud-700);
9
+ --sinch-tag-color-light-gray-bg: var(--sinch-color-dirt-200);
10
+ --sinch-tag-color-light-gray-fg: var(--sinch-color-dirt-700);
11
+ --sinch-tag-color-light-green-bg: var(--sinch-color-grass-200);
12
+ --sinch-tag-color-light-green-fg: var(--sinch-color-grass-700);
13
+ --sinch-tag-color-light-orange-bg: var(--sinch-color-orange-200);
14
+ --sinch-tag-color-light-orange-fg: var(--sinch-color-orange-700);
15
+ --sinch-tag-color-light-pink-bg: var(--sinch-color-candy-200);
16
+ --sinch-tag-color-light-pink-fg: var(--sinch-color-candy-700);
17
+ --sinch-tag-color-light-violet-bg: var(--sinch-color-violet-200);
18
+ --sinch-tag-color-light-violet-fg: var(--sinch-color-violet-700);
19
+ --sinch-tag-color-light-yellow-bg: var(--sinch-color-bolt-200);
20
+ --sinch-tag-color-light-yellow-fg: var(--sinch-color-bolt-700);
21
+ --sinch-tag-color-dark-blue-bg: var(--sinch-color-night-700);
22
+ --sinch-tag-color-dark-blue-fg: var(--sinch-color-night-200);
23
+ --sinch-tag-color-dark-brown-bg: var(--sinch-color-mud-700);
24
+ --sinch-tag-color-dark-brown-fg: var(--sinch-color-mud-200);
25
+ --sinch-tag-color-dark-gray-bg: var(--sinch-color-dirt-700);
26
+ --sinch-tag-color-dark-gray-fg: var(--sinch-color-dirt-200);
27
+ --sinch-tag-color-dark-green-bg: var(--sinch-color-grass-700);
28
+ --sinch-tag-color-dark-green-fg: var(--sinch-color-grass-200);
29
+ --sinch-tag-color-dark-orange-bg: var(--sinch-color-orange-700);
30
+ --sinch-tag-color-dark-orange-fg: var(--sinch-color-orange-200);
31
+ --sinch-tag-color-dark-pink-bg: var(--sinch-color-candy-700);
32
+ --sinch-tag-color-dark-pink-fg: var(--sinch-color-candy-200);
33
+ --sinch-tag-color-dark-violet-bg: var(--sinch-color-violet-700);
34
+ --sinch-tag-color-dark-violet-fg: var(--sinch-color-violet-200);
35
+ --sinch-tag-color-dark-yellow-bg: var(--sinch-color-bolt-700);
36
+ --sinch-tag-color-dark-yellow-fg: var(--sinch-color-bolt-200);
37
+ --sinch-tag-color-blue-bg: var(--sinch-color-night-400);
38
+ --sinch-tag-color-blue-fg: var(--sinch-color-snow-100);
39
+ --sinch-tag-color-brown-bg: var(--sinch-color-mud-400);
40
+ --sinch-tag-color-brown-fg: var(--sinch-color-snow-100);
41
+ --sinch-tag-color-gray-bg: var(--sinch-color-dirt-400);
42
+ --sinch-tag-color-gray-fg: var(--sinch-color-snow-100);
43
+ --sinch-tag-color-green-bg: var(--sinch-color-grass-400);
44
+ --sinch-tag-color-green-fg: var(--sinch-color-stormy-500);
45
+ --sinch-tag-color-orange-bg: var(--sinch-color-orange-400);
46
+ --sinch-tag-color-orange-fg: var(--sinch-color-stormy-500);
47
+ --sinch-tag-color-pink-bg: var(--sinch-color-candy-400);
48
+ --sinch-tag-color-pink-fg: var(--sinch-color-stormy-500);
49
+ --sinch-tag-color-violet-bg: var(--sinch-color-violet-400);
50
+ --sinch-tag-color-violet-fg: var(--sinch-color-stormy-500);
51
+ --sinch-tag-color-yellow-bg: var(--sinch-color-bolt-400);
52
+ --sinch-tag-color-yellow-fg: var(--sinch-color-stormy-500);
53
+ }
package/theme/typography.css ADDED
@@ -0,0 +1,16 @@
1
+ :root,
2
+ :host {
3
+ --sinch-font-family: "Gilroy", "Arial", "sans-serif";
4
+ --sinch-font-weight-emphasized: 600;
5
+ --sinch-font-title-xl: 600 40px/48px var(--sinch-font-family);
6
+ --sinch-font-title-l: 600 24px/32px var(--sinch-font-family);
7
+ --sinch-font-title-m: 600 20px/24px var(--sinch-font-family);
8
+ --sinch-font-title-s: 600 16px/24px var(--sinch-font-family);
9
+ --sinch-font-title-xs: 600 14px/22px var(--sinch-font-family);
10
+ --sinch-font-text-m: 400 16px/24px var(--sinch-font-family);
11
+ --sinch-font-text-s: 400 14px/22px var(--sinch-font-family);
12
+ --sinch-font-text-xs: 400 12px/20px var(--sinch-font-family);
13
+ --sinch-font-text-xxs: 400 10px/16px var(--sinch-font-family);
14
+ --sinch-font-mono-family: "DM Mono", "monospace";
15
+ --sinch-font-mono-text-s: 400 16px/24px var(--sinch-font-mono-family);
16
+ }