@nectary/components 1.4.0 → 2.0.0

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 (168) hide show
  1. package/accordion/index.js +0 -3
  2. package/accordion/types.d.ts +0 -3
  3. package/accordion-item/index.d.ts +2 -0
  4. package/accordion-item/index.js +33 -34
  5. package/action-menu-option/index.js +2 -2
  6. package/alert/index.js +2 -12
  7. package/avatar/index.js +1 -1
  8. package/avatar/utils.js +3 -3
  9. package/badge/index.js +41 -67
  10. package/badge/types.d.ts +0 -4
  11. package/badge/utils.d.ts +0 -3
  12. package/badge/utils.js +0 -11
  13. package/button/index.js +1 -1
  14. package/button/types.d.ts +2 -2
  15. package/card/index.js +5 -16
  16. package/card/types.d.ts +0 -6
  17. package/card-container/index.js +1 -1
  18. package/chat-block/index.js +1 -1
  19. package/chat-bubble/index.js +3 -24
  20. package/checkbox/index.js +31 -30
  21. package/checkbox/types.d.ts +0 -3
  22. package/chip/index.js +34 -27
  23. package/chip/utils.js +3 -3
  24. package/code-tag/index.js +1 -1
  25. package/color-menu/index.d.ts +0 -3
  26. package/color-menu/index.js +50 -99
  27. package/color-menu/types.d.ts +0 -4
  28. package/color-menu-option/index.d.ts +14 -0
  29. package/color-menu-option/index.js +52 -0
  30. package/color-menu-option/types.d.ts +9 -0
  31. package/color-menu-option/utils.d.ts +1 -0
  32. package/color-menu-option/utils.js +11 -0
  33. package/color-swatch/index.js +1 -1
  34. package/color-swatch/utils.js +3 -3
  35. package/date-picker/index.js +2 -21
  36. package/date-picker/types.d.ts +0 -3
  37. package/dialog/index.js +2 -5
  38. package/dialog/types.d.ts +0 -2
  39. package/emoji/index.js +1 -1
  40. package/emoji-picker/index.d.ts +1 -0
  41. package/emoji-picker/index.js +32 -23
  42. package/field/index.js +39 -32
  43. package/file-drop/index.js +1 -1
  44. package/file-status/index.js +2 -16
  45. package/flag/index.js +1 -1
  46. package/grid/index.js +1 -1
  47. package/help-tooltip/index.js +3 -12
  48. package/horizontal-stepper/index.js +1 -1
  49. package/horizontal-stepper-item/index.d.ts +2 -0
  50. package/horizontal-stepper-item/index.js +8 -12
  51. package/icon/index.js +1 -1
  52. package/icon-button/index.js +1 -1
  53. package/inline-alert/index.js +19 -29
  54. package/input/index.d.ts +0 -3
  55. package/input/index.js +12 -46
  56. package/input/types.d.ts +1 -5
  57. package/link/index.js +35 -37
  58. package/list-item/index.js +1 -1
  59. package/package.json +10 -9
  60. package/pagination/index.js +8 -21
  61. package/pagination/types.d.ts +0 -3
  62. package/pop/index.js +16 -13
  63. package/popover/index.js +44 -50
  64. package/progress/index.js +20 -15
  65. package/radio/index.js +19 -6
  66. package/radio/types.d.ts +3 -3
  67. package/radio-option/index.js +35 -27
  68. package/rich-text/index.js +1 -1
  69. package/segment/index.js +2 -3
  70. package/segment-collapse/index.js +2 -11
  71. package/segment-collapse/types.d.ts +0 -3
  72. package/segmented-control/index.js +0 -3
  73. package/segmented-control/types.d.ts +0 -3
  74. package/segmented-control-option/index.js +20 -19
  75. package/segmented-icon-control/index.js +1 -4
  76. package/segmented-icon-control/types.d.ts +0 -3
  77. package/segmented-icon-control-option/index.js +18 -14
  78. package/select-button/index.js +7 -12
  79. package/select-menu/index.js +12 -5
  80. package/select-menu-option/index.js +2 -5
  81. package/skeleton/index.js +1 -1
  82. package/skeleton-item/index.js +1 -1
  83. package/spinner/index.js +1 -1
  84. package/table/index.js +1 -1
  85. package/table-body/index.js +1 -1
  86. package/table-cell/index.js +1 -1
  87. package/table-head-cell/index.d.ts +1 -0
  88. package/table-head-cell/index.js +12 -3
  89. package/table-row/index.js +18 -2
  90. package/tabs/index.js +1 -4
  91. package/tabs/types.d.ts +0 -3
  92. package/tabs-icon-option/index.js +4 -2
  93. package/tabs-option/index.js +25 -20
  94. package/tag/index.js +16 -8
  95. package/tag/utils.js +3 -3
  96. package/text/index.js +30 -20
  97. package/textarea/index.js +10 -6
  98. package/textarea/types.d.ts +0 -3
  99. package/tile-control/index.js +23 -25
  100. package/tile-control/types.d.ts +0 -3
  101. package/tile-control-option/index.js +1 -1
  102. package/time-picker/index.js +2 -8
  103. package/time-picker/types.d.ts +0 -3
  104. package/title/index.js +30 -22
  105. package/toast/index.js +20 -30
  106. package/toggle/index.js +33 -30
  107. package/toggle/types.d.ts +0 -3
  108. package/tooltip/index.js +2 -8
  109. package/tooltip/types.d.ts +0 -12
  110. package/vertical-stepper/index.js +1 -1
  111. package/vertical-stepper-item/index.d.ts +2 -0
  112. package/vertical-stepper-item/index.js +8 -12
  113. package/logo/create-logo-class.d.ts +0 -1
  114. package/logo/create-logo-class.js +0 -52
  115. package/logo/engage-icon/index.d.ts +0 -11
  116. package/logo/engage-icon/index.js +0 -4
  117. package/logo/engage-icon-wordmark/index.d.ts +0 -11
  118. package/logo/engage-icon-wordmark/index.js +0 -4
  119. package/logo/sinch-icon/index.d.ts +0 -11
  120. package/logo/sinch-icon/index.js +0 -4
  121. package/logo/sinch-icon-wordmark/index.d.ts +0 -11
  122. package/logo/sinch-icon-wordmark/index.js +0 -4
  123. package/logo/types.d.ts +0 -11
  124. package/theme/accordion-item.css +0 -4
  125. package/theme/alert.css +0 -6
  126. package/theme/avatar.css +0 -25
  127. package/theme/badge.css +0 -15
  128. package/theme/button.css +0 -146
  129. package/theme/chat.css +0 -9
  130. package/theme/chip.css +0 -68
  131. package/theme/color-menu.css +0 -4
  132. package/theme/color-swatch.css +0 -71
  133. package/theme/colors.d.ts +0 -4
  134. package/theme/colors.js +0 -4
  135. package/theme/contextual.css +0 -40
  136. package/theme/date-picker.css +0 -7
  137. package/theme/dialog.css +0 -4
  138. package/theme/elevation.css +0 -7
  139. package/theme/emoji-picker.css +0 -13
  140. package/theme/emoji.css +0 -5
  141. package/theme/file-status.css +0 -7
  142. package/theme/flag.css +0 -4
  143. package/theme/fonts.css +0 -86
  144. package/theme/fonts.json +0 -89
  145. package/theme/help-tooltip.css +0 -5
  146. package/theme/horizontal-stepper.css +0 -5
  147. package/theme/icon-button.css +0 -68
  148. package/theme/icon.css +0 -7
  149. package/theme/index.css +0 -4
  150. package/theme/index.d.ts +0 -39
  151. package/theme/index.js +0 -39
  152. package/theme/inline-alert.css +0 -7
  153. package/theme/input.css +0 -10
  154. package/theme/link.css +0 -5
  155. package/theme/pagination.css +0 -5
  156. package/theme/palette.css +0 -90
  157. package/theme/segment.css +0 -4
  158. package/theme/select-button.css +0 -10
  159. package/theme/select-menu.css +0 -6
  160. package/theme/shapes.css +0 -8
  161. package/theme/size.css +0 -9
  162. package/theme/spinner.css +0 -7
  163. package/theme/tag.css +0 -67
  164. package/theme/time-picker.css +0 -4
  165. package/theme/toast.css +0 -7
  166. package/theme/typography.css +0 -16
  167. package/theme/vertical-stepper.css +0 -5
  168. /package/{logo → color-menu-option}/types.js +0 -0
package/theme/fonts.json DELETED
@@ -1,89 +0,0 @@
1
- [
2
- {
3
- "family": "DM Sans",
4
- "weight": 400,
5
- "style": "normal",
6
- "display": "swap",
7
- "src": {
8
- "local": "DMSans-Regular",
9
- "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff2",
10
- "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff"
11
- }
12
- },
13
- {
14
- "family": "DM Sans",
15
- "weight": 500,
16
- "style": "normal",
17
- "display": "swap",
18
- "src": {
19
- "local": "DMSans-Medium",
20
- "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff2",
21
- "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff"
22
- }
23
- },
24
- {
25
- "family": "DM Sans",
26
- "weight": 700,
27
- "style": "normal",
28
- "display": "swap",
29
- "src": {
30
- "local": "DMSans-Bold",
31
- "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff2",
32
- "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff"
33
- }
34
- },
35
- {
36
- "family": "DM Sans",
37
- "weight": 400,
38
- "style": "italic",
39
- "display": "swap",
40
- "src": {
41
- "local": "DMSans-Italic",
42
- "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-400-italic.woff2",
43
- "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-400-italic.woff"
44
- }
45
- },
46
- {
47
- "family": "DM Sans",
48
- "weight": 500,
49
- "style": "italic",
50
- "display": "swap",
51
- "src": {
52
- "local": "DMSans-MediumItalic",
53
- "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-500-italic.woff2",
54
- "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-500-italic.woff"
55
- }
56
- },
57
- {
58
- "family": "DM Sans",
59
- "weight": 700,
60
- "style": "italic",
61
- "display": "swap",
62
- "src": {
63
- "local": "DMSans-BoldItalic",
64
- "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-700-italic.woff2",
65
- "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-700-italic.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
- {
80
- "family": "Material Icons",
81
- "weight": 400,
82
- "style": "normal",
83
- "display": "block",
84
- "src": {
85
- "local": "MaterialSymbolsRounded24pt-Regular",
86
- "woff2": "https://fonts.gstatic.com/s/materialsymbolsrounded/v76/syl7-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvLgyidOK7BDB_Qb9vUdV6_gjDK-P3JuF_Zs-obHph2-jOcZTKPq8a9A5M.woff2"
87
- }
88
- }
89
- ]
@@ -1,5 +0,0 @@
1
- :root,
2
- :host {
3
- --sinch-help-tooltip-icon-font-variation-settings: "FILL" 0;
4
- --sinch-help-tooltip-icon-help: help;
5
- }
@@ -1,5 +0,0 @@
1
- :root,
2
- :host {
3
- --sinch-horizontal-stepper-icon-success: check;
4
- --sinch-horizontal-stepper-icon-error: exclamation;
5
- }
@@ -1,68 +0,0 @@
1
- :root,
2
- :host {
3
- /* Primary */
4
- --sinch-icon-button-primary-color-background: var(--sinch-color-tropical-500);
5
- --sinch-icon-button-primary-color-background-hover: var(--sinch-color-tropical-400);
6
- --sinch-icon-button-primary-color-background-active: var(--sinch-color-tropical-600);
7
- --sinch-icon-button-primary-color-background-disabled: var(--sinch-color-tropical-200);
8
- --sinch-icon-button-primary-color-border: transparent;
9
- --sinch-icon-button-primary-color-border-hover: transparent;
10
- --sinch-icon-button-primary-color-border-active: transparent;
11
- --sinch-icon-button-primary-color-border-disabled: transparent;
12
- --sinch-icon-button-primary-color-icon: var(--sinch-color-snow-100);
13
- --sinch-icon-button-primary-color-icon-hover: var(--sinch-color-snow-100);
14
- --sinch-icon-button-primary-color-icon-active: var(--sinch-color-snow-100);
15
- --sinch-icon-button-primary-color-icon-disabled: var(--sinch-color-snow-100);
16
- --sinch-icon-button-primary-mix-blend-mode: initial;
17
-
18
- /* Secondary */
19
- --sinch-icon-button-secondary-color-background: var(--sinch-color-snow-100);
20
- --sinch-icon-button-secondary-color-background-hover: var(--sinch-color-tropical-100);
21
- --sinch-icon-button-secondary-color-background-active: var(--sinch-color-tropical-200);
22
- --sinch-icon-button-secondary-color-background-disabled: var(--sinch-color-snow-100);
23
- --sinch-icon-button-secondary-color-border: var(--sinch-color-tropical-500);
24
- --sinch-icon-button-secondary-color-border-hover: var(--sinch-color-tropical-500);
25
- --sinch-icon-button-secondary-color-border-active: var(--sinch-color-tropical-500);
26
- --sinch-icon-button-secondary-color-border-disabled: var(--sinch-color-tropical-200);
27
- --sinch-icon-button-secondary-color-icon: var(--sinch-color-tropical-500);
28
- --sinch-icon-button-secondary-color-icon-hover: var(--sinch-color-tropical-500);
29
- --sinch-icon-button-secondary-color-icon-active: var(--sinch-color-tropical-500);
30
- --sinch-icon-button-secondary-color-icon-disabled: var(--sinch-color-tropical-200);
31
- --sinch-icon-button-secondary-mix-blend-mode: initial;
32
-
33
- /* Tertiary */
34
- --sinch-icon-button-tertiary-color-background: transparent;
35
- --sinch-icon-button-tertiary-color-background-hover: var(--sinch-color-bg-hover);
36
- --sinch-icon-button-tertiary-color-background-active: var(--sinch-color-bg-active);
37
- --sinch-icon-button-tertiary-color-background-disabled: transparent;
38
- --sinch-icon-button-tertiary-color-border: transparent;
39
- --sinch-icon-button-tertiary-color-border-hover: transparent;
40
- --sinch-icon-button-tertiary-color-border-active: transparent;
41
- --sinch-icon-button-tertiary-color-border-disabled: transparent;
42
- --sinch-icon-button-tertiary-color-icon: var(--sinch-color-stormy-500);
43
- --sinch-icon-button-tertiary-color-icon-hover: var(--sinch-color-stormy-500);
44
- --sinch-icon-button-tertiary-color-icon-active: var(--sinch-color-stormy-500);
45
- --sinch-icon-button-tertiary-color-icon-disabled: var(--sinch-color-stormy-100);
46
- --sinch-icon-button-tertiary-mix-blend-mode: multiply;
47
-
48
- /* Default */
49
- --sinch-icon-button-color-background: var(--sinch-icon-button-tertiary-color-background);
50
- --sinch-icon-button-color-background-hover: var(--sinch-icon-button-tertiary-color-background-hover);
51
- --sinch-icon-button-color-background-active: var(--sinch-icon-button-tertiary-color-background-active);
52
- --sinch-icon-button-color-background-disabled: var(--sinch-icon-button-tertiary-color-background-disabled);
53
- --sinch-icon-button-color-border: var(--sinch-icon-button-tertiary-color-border);
54
- --sinch-icon-button-color-border-hover: var(--sinch-icon-button-tertiary-color-border-hover);
55
- --sinch-icon-button-color-border-active: var(--sinch-icon-button-tertiary-color-border-active);
56
- --sinch-icon-button-color-border-disabled: var(--sinch-icon-button-tertiary-color-border-disabled);
57
- --sinch-icon-button-color-icon: var(--sinch-icon-button-tertiary-color-icon);
58
- --sinch-icon-button-color-icon-hover: var(--sinch-icon-button-tertiary-color-icon-hover);
59
- --sinch-icon-button-color-icon-active: var(--sinch-icon-button-tertiary-color-icon-active);
60
- --sinch-icon-button-color-icon-disabled: var(--sinch-icon-button-tertiary-color-icon-disabled);
61
- --sinch-icon-button-mix-blend-mode: var(--sinch-icon-button-tertiary-mix-blend-mode);
62
-
63
- /* Icon Size */
64
- --sinch-icon-button-icon-size-l: 24px;
65
- --sinch-icon-button-icon-size-m: 24px;
66
- --sinch-icon-button-icon-size-s: 24px;
67
- --sinch-icon-button-icon-size-xs: 16px;
68
- }
package/theme/icon.css DELETED
@@ -1,7 +0,0 @@
1
- :root,
2
- :host {
3
- --sinch-icon-font-family: "Material Icons";
4
- --sinch-icon-font-variation-settings: "FILL" 1;
5
- --sinch-icon-font-feature-settings: "liga";
6
- --sinch-icon-font-weight: 400;
7
- }
package/theme/index.css DELETED
@@ -1,4 +0,0 @@
1
- :root,
2
- :host {
3
- --sinch-theme: 1;
4
- }
package/theme/index.d.ts DELETED
@@ -1,39 +0,0 @@
1
- import './index.css';
2
- import './palette.css';
3
- import './contextual.css';
4
- import './fonts.css';
5
- import './typography.css';
6
- import './shapes.css';
7
- import './elevation.css';
8
- import './size.css';
9
- import './accordion-item.css';
10
- import './alert.css';
11
- import './avatar.css';
12
- import './badge.css';
13
- import './button.css';
14
- import './chat.css';
15
- import './chip.css';
16
- import './color-menu.css';
17
- import './color-swatch.css';
18
- import './date-picker.css';
19
- import './dialog.css';
20
- import './emoji-picker.css';
21
- import './emoji.css';
22
- import './file-status.css';
23
- import './flag.css';
24
- import './help-tooltip.css';
25
- import './horizontal-stepper.css';
26
- import './icon-button.css';
27
- import './icon.css';
28
- import './inline-alert.css';
29
- import './input.css';
30
- import './link.css';
31
- import './pagination.css';
32
- import './segment.css';
33
- import './select-button.css';
34
- import './select-menu.css';
35
- import './spinner.css';
36
- import './tag.css';
37
- import './time-picker.css';
38
- import './toast.css';
39
- import './vertical-stepper.css';
package/theme/index.js DELETED
@@ -1,39 +0,0 @@
1
- import './index.css';
2
- import './palette.css';
3
- import './contextual.css';
4
- import './fonts.css';
5
- import './typography.css';
6
- import './shapes.css';
7
- import './elevation.css';
8
- import './size.css';
9
- import './accordion-item.css';
10
- import './alert.css';
11
- import './avatar.css';
12
- import './badge.css';
13
- import './button.css';
14
- import './chat.css';
15
- import './chip.css';
16
- import './color-menu.css';
17
- import './color-swatch.css';
18
- import './date-picker.css';
19
- import './dialog.css';
20
- import './emoji-picker.css';
21
- import './emoji.css';
22
- import './file-status.css';
23
- import './flag.css';
24
- import './help-tooltip.css';
25
- import './horizontal-stepper.css';
26
- import './icon-button.css';
27
- import './icon.css';
28
- import './inline-alert.css';
29
- import './input.css';
30
- import './link.css';
31
- import './pagination.css';
32
- import './segment.css';
33
- import './select-button.css';
34
- import './select-menu.css';
35
- import './spinner.css';
36
- import './tag.css';
37
- import './time-picker.css';
38
- import './toast.css';
39
- import './vertical-stepper.css';
@@ -1,7 +0,0 @@
1
- :root,
2
- :host {
3
- --sinch-inline-alert-icon-info: info;
4
- --sinch-inline-alert-icon-success: check_circle;
5
- --sinch-inline-alert-icon-warn: report_problem;
6
- --sinch-inline-alert-icon-error: report;
7
- }
package/theme/input.css DELETED
@@ -1,10 +0,0 @@
1
- :root,
2
- :host {
3
- /* Icon Size */
4
- --sinch-input-icon-size-l: 24px;
5
- --sinch-input-icon-size-m: 24px;
6
- --sinch-input-icon-size-s: 16px;
7
-
8
- /* Icon name */
9
- --sinch-input-icon-clear: close;
10
- }
package/theme/link.css DELETED
@@ -1,5 +0,0 @@
1
- :root,
2
- :host {
3
- --sinch-link-icon-standalone: arrow_forward;
4
- --sinch-link-icon-external: open_in_new;
5
- }
@@ -1,5 +0,0 @@
1
- :root,
2
- :host {
3
- --sinch-pagination-icon-prev: keyboard_arrow_left;
4
- --sinch-pagination-icon-next: keyboard_arrow_right;
5
- }
package/theme/palette.css DELETED
@@ -1,90 +0,0 @@
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-olive-700: #275D33;
72
- --sinch-color-olive-400: #46A65A;
73
- --sinch-color-olive-200: #D7F1D8;
74
- --sinch-color-celtic-700: #003B7E;
75
- --sinch-color-celtic-400: #2071CE;
76
- --sinch-color-celtic-200: #D5E5F8;
77
- --sinch-color-jasper-700: #B71C1C;
78
- --sinch-color-jasper-400: #F44336;
79
- --sinch-color-jasper-200: #FFCDD2;
80
- --sinch-color-pumpkin-700: #9C2E00;
81
- --sinch-color-pumpkin-400: #F35B1C;
82
- --sinch-color-pumpkin-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/segment.css DELETED
@@ -1,4 +0,0 @@
1
- :root,
2
- :host {
3
- --sinch-segment-icon-dropdown: keyboard_arrow_down;
4
- }
@@ -1,10 +0,0 @@
1
- :root,
2
- :host {
3
- /* Icon Size */
4
- --sinch-select-button-icon-size-l: 24px;
5
- --sinch-select-button-icon-size-m: 24px;
6
- --sinch-select-button-icon-size-s: 24px;
7
-
8
- /* Icon name */
9
- --sinch-select-button-icon-dropdown: keyboard_arrow_down;
10
- }
@@ -1,6 +0,0 @@
1
- :root,
2
- :host {
3
- /* Icon name */
4
- --sinch-select-menu-icon-search: search;
5
- --sinch-select-menu-icon-check: check;
6
- }
package/theme/shapes.css DELETED
@@ -1,8 +0,0 @@
1
- :root,
2
- :host {
3
- --sinch-shape-radius-xs: 2px;
4
- --sinch-shape-radius-s: 6px;
5
- --sinch-shape-radius-m: 10px;
6
- --sinch-shape-radius-l: 14px;
7
- --sinch-shape-radius: var(--sinch-shape-radius-m);
8
- }
package/theme/size.css DELETED
@@ -1,9 +0,0 @@
1
- :root,
2
- :host {
3
- /* --sinch-sizes: "l-m-s-xs"; */
4
- --sinch-size-l: 48px;
5
- --sinch-size-m: 40px;
6
- --sinch-size-s: 32px;
7
- --sinch-size-xs: 24px;
8
- --sinch-size: var(--sinch-size-m);
9
- }
package/theme/spinner.css DELETED
@@ -1,7 +0,0 @@
1
- :root,
2
- :host {
3
- /* Size */
4
- --sinch-spinner-size-l: 48px;
5
- --sinch-spinner-size-m: 24px;
6
- --sinch-spinner-size-s: 16px;
7
- }
package/theme/tag.css DELETED
@@ -1,67 +0,0 @@
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-light-red-bg: var(--sinch-color-jasper-200);
22
- --sinch-tag-color-light-red-fg: var(--sinch-color-jasper-700);
23
- --sinch-tag-color-dark-blue-bg: var(--sinch-color-night-700);
24
- --sinch-tag-color-dark-blue-fg: var(--sinch-color-night-200);
25
- --sinch-tag-color-dark-brown-bg: var(--sinch-color-mud-700);
26
- --sinch-tag-color-dark-brown-fg: var(--sinch-color-mud-200);
27
- --sinch-tag-color-dark-gray-bg: var(--sinch-color-dirt-700);
28
- --sinch-tag-color-dark-gray-fg: var(--sinch-color-dirt-200);
29
- --sinch-tag-color-dark-green-bg: var(--sinch-color-grass-700);
30
- --sinch-tag-color-dark-green-fg: var(--sinch-color-grass-200);
31
- --sinch-tag-color-dark-orange-bg: var(--sinch-color-orange-700);
32
- --sinch-tag-color-dark-orange-fg: var(--sinch-color-orange-200);
33
- --sinch-tag-color-dark-pink-bg: var(--sinch-color-candy-700);
34
- --sinch-tag-color-dark-pink-fg: var(--sinch-color-candy-200);
35
- --sinch-tag-color-dark-violet-bg: var(--sinch-color-violet-700);
36
- --sinch-tag-color-dark-violet-fg: var(--sinch-color-violet-200);
37
- --sinch-tag-color-dark-yellow-bg: var(--sinch-color-bolt-700);
38
- --sinch-tag-color-dark-yellow-fg: var(--sinch-color-bolt-200);
39
- --sinch-tag-color-dark-red-bg: var(--sinch-color-jasper-700);
40
- --sinch-tag-color-dark-red-fg: var(--sinch-color-jasper-200);
41
- --sinch-tag-color-blue-bg: var(--sinch-color-night-400);
42
- --sinch-tag-color-blue-fg: var(--sinch-color-snow-100);
43
- --sinch-tag-color-brown-bg: var(--sinch-color-mud-400);
44
- --sinch-tag-color-brown-fg: var(--sinch-color-snow-100);
45
- --sinch-tag-color-gray-bg: var(--sinch-color-dirt-400);
46
- --sinch-tag-color-gray-fg: var(--sinch-color-snow-100);
47
- --sinch-tag-color-green-bg: var(--sinch-color-grass-400);
48
- --sinch-tag-color-green-fg: var(--sinch-color-stormy-500);
49
- --sinch-tag-color-orange-bg: var(--sinch-color-orange-400);
50
- --sinch-tag-color-orange-fg: var(--sinch-color-stormy-500);
51
- --sinch-tag-color-pink-bg: var(--sinch-color-candy-400);
52
- --sinch-tag-color-pink-fg: var(--sinch-color-stormy-500);
53
- --sinch-tag-color-violet-bg: var(--sinch-color-violet-400);
54
- --sinch-tag-color-violet-fg: var(--sinch-color-stormy-500);
55
- --sinch-tag-color-yellow-bg: var(--sinch-color-bolt-400);
56
- --sinch-tag-color-yellow-fg: var(--sinch-color-stormy-500);
57
- --sinch-tag-color-red-bg: var(--sinch-color-jasper-400);
58
- --sinch-tag-color-red-fg: var(--sinch-color-stormy-500);
59
- --sinch-tag-color-celtic-bg: var(--sinch-color-feedback-info-bg);
60
- --sinch-tag-color-celtic-fg: var(--sinch-color-feedback-info-contrast);
61
- --sinch-tag-color-olive-bg: var(--sinch-color-feedback-success-bg);
62
- --sinch-tag-color-olive-fg: var(--sinch-color-feedback-success-contrast);
63
- --sinch-tag-color-pumpkin-bg: var(--sinch-color-feedback-warning-bg);
64
- --sinch-tag-color-pumpkin-fg: var(--sinch-color-feedback-warning-contrast);
65
- --sinch-tag-color-jasper-bg: var(--sinch-color-feedback-invalid-bg);
66
- --sinch-tag-color-jasper-fg: var(--sinch-color-feedback-invalid-contrast);
67
- }
@@ -1,4 +0,0 @@
1
- :root,
2
- :host {
3
- --sinch-time-picker-icon-submit: done;
4
- }
package/theme/toast.css DELETED
@@ -1,7 +0,0 @@
1
- :root,
2
- :host {
3
- --sinch-toast-icon-info: info;
4
- --sinch-toast-icon-success: check_circle;
5
- --sinch-toast-icon-warn: report_problem;
6
- --sinch-toast-icon-error: report;
7
- }
@@ -1,16 +0,0 @@
1
- :root,
2
- :host {
3
- --sinch-font-family: "DM Sans", "Arial", "sans-serif";
4
- --sinch-font-weight-emphasized: 700;
5
- --sinch-font-title-xl: 400 40px/48px var(--sinch-font-family);
6
- --sinch-font-title-l: 500 24px/32px var(--sinch-font-family);
7
- --sinch-font-title-m: 500 20px/24px var(--sinch-font-family);
8
- --sinch-font-title-s: 500 16px/24px var(--sinch-font-family);
9
- --sinch-font-title-xs: 500 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
- }
@@ -1,5 +0,0 @@
1
- :root,
2
- :host {
3
- --sinch-vertical-stepper-icon-success: check;
4
- --sinch-vertical-stepper-icon-error: exclamation;
5
- }
File without changes