@dialpad/dialtone 7.8.2 → 7.9.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 (25) hide show
  1. package/lib/build/less/components/badge.less +75 -67
  2. package/lib/build/svg/brand/google-business-messaging.svg +1 -0
  3. package/lib/build/svg/brand/line-messenger.svg +1 -0
  4. package/lib/build/svg/brand/snapchat.svg +1 -0
  5. package/lib/build/svg/brand/telegram.svg +11 -0
  6. package/lib/build/svg/brand/tiktok.svg +1 -0
  7. package/lib/build/svg/brand/viber.svg +1 -0
  8. package/lib/build/svg/brand/we-chat.svg +1 -0
  9. package/lib/dist/css/dialtone.css +50 -50
  10. package/lib/dist/css/dialtone.min.css +1 -1
  11. package/lib/dist/svg/brand/google-business-messaging.svg +1 -0
  12. package/lib/dist/svg/brand/line-messenger.svg +1 -0
  13. package/lib/dist/svg/brand/snapchat.svg +1 -0
  14. package/lib/dist/svg/brand/telegram.svg +1 -0
  15. package/lib/dist/svg/brand/tiktok.svg +1 -0
  16. package/lib/dist/svg/brand/viber.svg +1 -0
  17. package/lib/dist/svg/brand/we-chat.svg +1 -0
  18. package/lib/dist/vue/icons/IconGoogleBusinessMessaging.vue +3 -0
  19. package/lib/dist/vue/icons/IconLineMessenger.vue +3 -0
  20. package/lib/dist/vue/icons/IconSnapchat.vue +3 -0
  21. package/lib/dist/vue/icons/IconTelegram.vue +3 -0
  22. package/lib/dist/vue/icons/IconTiktok.vue +3 -0
  23. package/lib/dist/vue/icons/IconViber.vue +3 -0
  24. package/lib/dist/vue/icons/IconWeChat.vue +3 -0
  25. package/package.json +1 -2
package/lib/build/less/components/badge.less CHANGED
@@ -7,91 +7,99 @@
7
7
  // visit https://dialpad.design/components/badges
8
8
  //
9
9
  // TABLE OF CONTENTS
10
+ // • COMPONENT CSS VARIABLES
10
11
  // • BASE STYLE
11
- // • COLORS
12
+ // • KIND
13
+ // • TYPE
14
+ // • SLOTS
12
15
  //
13
16
  // ============================================================================
14
17
  // $ BASE STYLE
15
18
  // ----------------------------------------------------------------------------
16
- .d-badge {
17
- // Component CSS Vars
18
- --badge--fc: var(--fc-primary);
19
- --badge--bgc: var(--black-200);
20
19
 
21
- display: inline-block;
22
- min-width: calc(var(--su6) + var(--su1));
23
- padding: calc(var(--su6) / 4) var(--su6);
24
- color: var(--badge--fc);
25
- font-weight: bold;
26
- font-size: var(--fs-100);
27
- line-height: var(--lh6);
20
+ .d-badge {
21
+ // COMPONENT CSS VARIABLES
22
+ // --------------------------------------------------------------------------
23
+ --badge-color-text: var(--fc-primary);
24
+ --badge-color-background: var(--black-200);
25
+ --badge-color-background-ai: linear-gradient(to bottom right, var(--purple-400) 0%, var(--magenta-300) 100%);
26
+ --badge-border-radius: var(--size-300);
27
+ --badge-line-height: var(--size-500);
28
+ --badge-font-size: var(--fs-100);
29
+ --badge-font-weight: var(--fw-semibold);
30
+ --badge-gap: var(--space-300);
31
+ --badge-letter-spacing: calc(var(--size-100) / 2);
32
+ --badge-padding-y: var(--space-100);
33
+ --badge-padding-x: var(--space-400);
34
+ --badge-text-case: none;
35
+
36
+ // BASE STYLE
37
+ // --------------------------------------------------------------------------
38
+ display: inline-flex;
39
+ gap: var(--badge-gap);
40
+ align-items: center;
41
+ justify-content: center;
42
+ min-width: calc(var(--size-400) + var(--size-500));
43
+ padding: var(--badge-padding-y) var(--badge-padding-x);
44
+ color: var(--badge-color-text);
45
+ font-weight: var(--badge-font-weight);
46
+ font-size: var(--badge-font-size);
47
+ line-height: var(--badge-line-height);
48
+ letter-spacing: var(--badge-letter-spacing);
28
49
  text-align: center;
29
- text-transform: uppercase;
30
- background-color: var(--badge--bgc);
31
- border-radius: var(--su4);
32
- }
33
-
34
-
35
- // ============================================================================
36
- // $ STYLE VARIATIONS
37
- // ----------------------------------------------------------------------------
38
- .d-badge--white {
39
- --badge--bgc: var(--white);
40
- }
50
+ text-transform: var(--badge-text-case);
51
+ background-color: var(--badge-color-background);
52
+ border-radius: var(--badge-border-radius);
41
53
 
42
- .d-badge--black-700 {
43
- --badge--fc: var(--white);
44
- --badge--bgc: var(--black-700);
45
- }
54
+ // Kind
55
+ // --------------------------------------------------------------------------
46
56
 
47
- .d-badge--purple-100 {
48
- --badge--bgc: var(--purple-100);
49
- }
57
+ &--count {
58
+ --badge-border-radius: var(--br-pill);
59
+ --badge-padding-x: calc(var(--space-400) - var(--space-100));
60
+ --badge-padding-y: var(--space-300);
61
+ }
50
62
 
51
- .d-badge--purple-300 {
52
- --badge--bgc: var(--purple-300);
53
- }
63
+ // TYPE
64
+ // --------------------------------------------------------------------------
54
65
 
55
- .d-badge--purple-400 {
56
- --badge--bgc: var(--purple-400);
57
- --badge--fc: var(--white);
58
- }
66
+ &--info {
67
+ --badge-color-background: var(--blue-100);
68
+ }
59
69
 
60
- .d-badge--purple-500 {
61
- --badge--fc: var(--white);
62
- --badge--bgc: var(--purple-500);
63
- }
70
+ &--success {
71
+ --badge-color-background: var(--green-100);
72
+ }
64
73
 
65
- .d-badge--orange-400 {
66
- --badge--bgc: var(--orange-400);
67
- }
74
+ &--warning {
75
+ --badge-color-background: var(--gold-100);
76
+ }
68
77
 
69
- .d-badge--magenta-100 {
70
- --badge--bgc: var(--magenta-100);
71
- }
78
+ &--critical {
79
+ --badge-color-background: var(--red-100);
80
+ }
72
81
 
73
- .d-badge--magenta-300 {
74
- --badge--bgc: var(--magenta-300);
75
- }
82
+ &--bulletin {
83
+ --badge-color-text: var(--fc-primary-inverted);
84
+ --badge-color-background: var(--purple-400);
85
+ }
76
86
 
77
- .d-badge--magenta-400 {
78
- --badge--fc: var(--white);
79
- --badge--bgc: var(--magenta-400);
80
- }
87
+ &--ai {
88
+ --badge-color-text: var(--fc-primary-inverted);
89
+ --badge-color-background: var(--magenta-300);
81
90
 
82
- .d-badge--magenta-500 {
83
- --badge--fc: var(--white);
84
- --badge--bgc: var(--magenta-500);
85
- }
91
+ background-image: var(--badge-color-background-ai);
92
+ }
86
93
 
87
- .d-badge--gold-200 {
88
- --badge--bgc: var(--gold-200);
89
- }
94
+ // SLOTS
95
+ // --------------------------------------------------------------------------
90
96
 
91
- .d-badge--green-400 {
92
- --badge--bgc: var(--green-400);
93
- }
97
+ &__label {
98
+ display: flex;
99
+ }
94
100
 
95
- .d-badge--red-300 {
96
- --badge--bgc: var(--red-300);
101
+ &__icon-left,
102
+ &__icon-right {
103
+ display: flex;
104
+ }
97
105
  }
package/lib/build/svg/brand/google-business-messaging.svg ADDED
@@ -0,0 +1 @@
1
+ <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m20.3312 7.245c-.65-2.72125-3.0987-4.745-6.0187-4.745h-6.375c-3.4175 0-6.1875 2.77-6.1875 6.1875 0 1.77.74375 3.3675 1.93625 4.495z" fill="#86a9ff"/><path d="m3.68628 13.1825c.2675 1.06.8175 2.04 1.60375 2.8263l6.36877 6.3687c.0787.0788.185.1225.2975.1225.2312 0 .42-.1875.42-.42v-4.205h3.6875c3.4525 0 6.245-2.8275 6.1862-6.2937-.0287-1.70878-.7625-3.23878-1.9187-4.33753z" fill="#578cff"/><path d="m14.3125 14.875c3.4175 0 6.1875-2.77 6.1875-6.1875 0-.49625-.0588-.98-.1688-1.4425-1.1387-1.0825-2.6862-1.745-4.3699-1.745h-6.2738c-3.4175 0-6.1875 2.77-6.1875 6.1875 0 .5088.06375 1.01.18625 1.495 1.10875 1.0487 2.605 1.6925 4.25125 1.6925z" fill="#0057cc"/></svg>
package/lib/build/svg/brand/line-messenger.svg ADDED
@@ -0,0 +1 @@
1
+ <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill-rule="evenodd"><path d="m6.0933 2h11.8134c2.2513 0 4.0932 1.842 4.0932 4.0933v11.8134c0 2.2513-1.8419 4.0932-4.0932 4.0932h-11.8134c-2.2513.0001-4.0933-1.8419-4.0933-4.0932v-11.8134c0-2.2513 1.842-4.0933 4.0933-4.0933z" fill="#3ace01"/><path d="m11.9806 5.31299c4.0524 0 7.3375 2.63058 7.3375 5.87561 0 1.1334-.4011 2.1917-1.0954 3.0892-.0344.0511-.0793.1076-.1359.1699l-.0043.0047c-.2372.2838-.5043.5502-.7979.7961-2.0291 1.8755-5.369 4.1084-5.8098 3.7639-.3832-.2994.6311-1.7641-.5391-2.0078-.0817-.0094-.1631-.0195-.2438-.0309l-.0016-.0001v-.0001c-3.43708-.4883-6.04723-2.8925-6.04723-5.7849-.00011-3.24503 3.28506-5.87561 7.33753-5.87561z" fill="#fff"/><path d="m7.72325 13.0627h1.47986c.21051 0 .38268-.1723.38268-.3828v-.0319c0-.2105-.17217-.3827-.38268-.3827h-1.06526v-2.42364c0-.2105-.17217-.38268-.38268-.38268h-.03192c-.2105 0-.38267.17218-.38267.38268v2.83824c0 .2105.17217.3828.38267.3828zm9.17005-1.7791v-.0319c0-.2105-.1723-.3827-.3828-.3827h-1.0652v-.6059h1.0652c.2105 0 .3828-.1722.3828-.38269v-.03192c0-.2105-.1723-.38268-.3828-.38268h-1.4798c-.2105 0-.3827.17218-.3827.38268v2.83821c0 .2105.1722.3827.3827.3827h1.4798c.2105 0 .3828-.1722.3828-.3827v-.0319c0-.2105-.1723-.3827-.3828-.3827h-1.0652v-.6059h1.0652c.2105.0001.3828-.1721.3828-.3826zm-2.846 1.665.0001-.0002c.0708-.0714.1106-.1679.1107-.2684v-2.83824c0-.2105-.1722-.38267-.3828-.38267h-.0319c-.2105 0-.3827.17217-.3827.38267v1.66604l-1.3832-1.8552c-.066-.11537-.1904-.19351-.3322-.19351h-.032c-.2105 0-.3827.17217-.3827.38267v2.83824c0 .2105.1722.3827.3827.3827h.032c.2105 0 .3826-.1722.3826-.3827v-1.6973l1.3932 1.9029c.0086.0133.0179.0261.0281.0383v.0001c.0383.0522.0906.088.149.1099.0448.0185.0939.0288.1452.0288h.0319c.0623 0 .1238-.0153.1788-.0447.0382-.0182.0705-.0417.0932-.0694zm-3.77.1141h.032c.2105 0 .3826-.1723.3826-.3828v-2.83819c0-.2105-.1721-.38267-.3826-.38267h-.032c-.2105 0-.3827.17217-.3827.38267v2.83819c0 .2105.1722.3828.3827.3828z" fill="#3ace01"/></g></svg>
package/lib/build/svg/brand/snapchat.svg ADDED
@@ -0,0 +1 @@
1
+ <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m19.8 0h-15.6c-2.3196 0-4.2 1.8804-4.2 4.2v15.6c0 2.3196 1.8804 4.2 4.2 4.2h15.6c2.3196 0 4.2-1.8804 4.2-4.2v-15.6c0-2.3196-1.8804-4.2-4.2-4.2z" fill="#fffc40"/><path d="m19.3889 15.9912c-2.6669-1.2909-3.0919-3.2841-3.1108-3.432-.0229-.1791-.0489-.3199.1487-.502.1905-.176 1.0357-.6992 1.2703-.8629.3876-.271.5583-.5416.4325-.8742-.088-.2302-.3023-.3168-.528-.3168-.0712.0002-.1422.0082-.2117.0237-.4259.0924-.8395.3058-1.0788.3635-.0288.0074-.0583.0114-.088.0118-.1276 0-.176-.0567-.1637-.2103.0299-.46549.0933-1.37409.0198-2.22285-.1008-1.16776-.4774-1.74636-.924-2.25808-.2161-.24816-1.2193-1.31428-3.1553-1.31428s-2.93783 1.06612-3.15255 1.3112c-.44792.51172-.82412 1.09032-.924 2.25808-.07348.84876-.00748 1.75692.0198 2.22283.0088.1461-.03608.2104-.16368.2104-.0297-.0005-.05923-.0045-.088-.0119-.23892-.0577-.65252-.2711-1.07844-.3635-.06948-.0155-.14044-.0235-.21164-.0237-.2266 0-.44.088-.528.3168-.12584.3326.044.6032.43296.8743.23452.1636 1.07976.6864 1.27028.8628.19712.1822.1716.323.14872.5021-.01892.15-.4444 2.1432-3.1108 3.4319-.1562.0757-.42196.2359.04664.4946.73568.4066 1.2254.363 1.606.6081.32296.2081.132.6569.36696.8188.28864.1993 1.1418-.0141 2.244.3498.924.3045 1.48545 1.1647 3.12395 1.1647 1.6386 0 2.2163-.8642 3.124-1.1647 1.1-.3639 1.955-.1505 2.244-.3498.2346-.1619.044-.6107.367-.8188.3806-.2451.8699-.2015 1.606-.6081.4677-.2556.202-.4158.0458-.4915z" fill="#fff"/><path d="m20.5492 15.8394c-.1197-.3256-.3476-.4998-.6072-.6441-.0488-.0286-.0937-.0515-.132-.0691-.0774-.04-.1566-.0788-.2354-.1197-.8092-.429-1.441-.9702-1.8792-1.6117-.1245-.1806-.2324-.372-.3226-.572-.0374-.1069-.0356-.1676-.0088-.2231.0267-.0427.0619-.0794.1034-.1078.1391-.0919.2825-.1852.3798-.2481.1733-.1122.3106-.2011.399-.264.3322-.2324.5646-.4792.7098-.7551.1013-.1906.1603-.4008.1732-.6162.0128-.2155-.0209-.4312-.0989-.6325-.22-.57904-.7669-.93852-1.4295-.93852-.1398-.00013-.2792.01462-.4158.044-.0366.00792-.0731.01628-.1087.02552.0061-.396-.0027-.814-.0379-1.2254-.1249-1.44628-.6314-2.2044-1.1594-2.80896-.3381-.37884-.7363-.69935-1.1787-.94864-.8013-.4576-1.7099-.68992-2.7003-.68992s-1.8946.23232-2.69676.68992c-.44347.24936-.84253.57052-1.18096.9504-.528.60456-1.03444 1.364-1.1594 2.80896-.0352.4114-.044.8316-.03828 1.2254-.03564-.00924-.07172-.0176-.10824-.02552-.13665-.02938-.27603-.04413-.4158-.044-.66308 0-1.21088.35948-1.43.93852-.07832.20134-.11238.41724-.09985.63294s.07134.4262.17245.6171c.14564.2759.37796.5227.71016.755.088.0616.22572.1505.39908.264.09372.0608.23056.1496.36476.2385.04695.0304.08686.0704.11704.1175.02816.0576.02904.1197-.01276.2341-.08891.1957-.19507.3832-.31724.5601-.42856.627-1.04192 1.1585-1.82512 1.584-.41492.22-.84612.367-1.02828.862-.13728.3735-.04752.7986.3014 1.1567.12806.1337.27658.2461.44.3331.34003.1869.70159.3315 1.07668.4308.0774.0199.15089.0528.21736.0972.12716.1113.10912.279.27852.5245.08503.1269.19308.2367.31856.3238.35552.2455.75504.2609 1.17832.2772.38236.0145.81576.0313 1.31076.1945.20504.0678.418.1989.66484.352.59268.3643 1.40406.8628 2.76186.8628 1.3579 0 2.1749-.5011 2.772-.8668.2451-.1504.4567-.2802.6561-.3462.495-.1637.9284-.18 1.3107-.1945.4233-.0163.8228-.0317 1.1783-.2772.1486-.1036.2725-.2389.3626-.396.1219-.2073.1188-.352.2332-.4532.0624-.0423.1314-.0738.2042-.0933.3802-.0995.7467-.2456 1.0912-.4347.1736-.0932.3299-.2155.462-.3617l.0044-.0053c.3273-.3502.4096-.7629.2754-1.1273zm-1.2069.6486c-.7361.4066-1.2254.363-1.606.6081-.3234.2081-.132.6569-.367.8188-.2886.1993-1.1418-.0141-2.244.3498-.909.3005-1.4889 1.1647-3.124 1.1647-1.635 0-2.2013-.8624-3.1253-1.1669-1.1-.3639-1.95492-.1505-2.244-.3498-.23452-.1619-.044-.6107-.36696-.8188-.38104-.2451-.87032-.2015-1.606-.6059-.4686-.2587-.20284-.4189-.04664-.4946 2.6664-1.2909 3.09188-3.2841 3.1108-3.432.02288-.179.0484-.3198-.14872-.502-.19052-.176-1.03576-.6992-1.27028-.8628-.38808-.2711-.5588-.5417-.43296-.8743.088-.2301.30272-.3168.528-.3168.0712.0002.14216.0082.21164.0237.42592.0924.83952.3058 1.07844.3635.02877.0074.0583.0114.088.0119.1276 0 .17248-.0643.16368-.2104-.02728-.46592-.09328-1.37408-.0198-2.22284.10076-1.16776.47696-1.74636.924-2.25808.21472-.24596 1.2236-1.31208 3.153-1.31208s2.941 1.06172 3.1557 1.3068c.4475.51172.8241 1.09032.924 2.25808.0735.84876.0101 1.75736-.0198 2.22292-.0101.1535.0361.2103.1637.2103.0297-.0005.0592-.0045.088-.0119.2394-.0576.653-.271 1.0789-.3634.0695-.0156.1404-.0236.2116-.0238.2266 0 .44.088.528.3168.1259.3326-.044.6032-.4325.8743-.2345.1637-1.0798.6864-1.2703.8628-.1975.1822-.1716.323-.1487.5021.0189.15.444 2.1432 3.1108 3.432.1575.0787.4233.2389-.0453.4998z" fill="#000"/></svg>
package/lib/build/svg/brand/telegram.svg ADDED
@@ -0,0 +1,11 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="url(#paint0_linear_10562_2955)"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5266 11.8945C9.4418 10.6244 11.3857 9.78702 12.3584 9.38246C15.1355 8.22737 15.7125 8.02672 16.0887 8.02009C16.1714 8.01863 16.3563 8.03913 16.4762 8.13635C16.5773 8.21844 16.6052 8.32934 16.6185 8.40717C16.6318 8.485 16.6484 8.6623 16.6352 8.80083C16.4847 10.3821 15.8335 14.2193 15.5022 15.9903C15.3621 16.7397 15.0861 16.991 14.8188 17.0156C14.2381 17.069 13.7972 16.6318 13.2347 16.2631C12.3546 15.6861 11.8573 15.327 11.003 14.764C10.0157 14.1134 10.6558 13.7558 11.2184 13.1714C11.3657 13.0184 13.9243 10.6911 13.9739 10.48C13.98 10.4536 13.9858 10.3552 13.9273 10.3032C13.8689 10.2513 13.7826 10.269 13.7203 10.2832C13.632 10.3032 12.226 11.2325 9.50222 13.0711C9.10313 13.3452 8.74164 13.4787 8.41776 13.4717C8.06071 13.464 7.37388 13.2698 6.8633 13.1039C6.23705 12.9003 5.73932 12.7927 5.78266 12.4469C5.80524 12.2669 6.05321 12.0827 6.5266 11.8945Z" fill="white"/>
4
+ <defs>
5
+ <linearGradient id="paint0_linear_10562_2955" x1="12" y1="2" x2="12" y2="21.8517" gradientUnits="userSpaceOnUse">
6
+ <stop stop-color="#2AABEE"/>
7
+ <stop offset="0.0001" stop-color="#2AABEE"/>
8
+ <stop offset="1" stop-color="#229ED9"/>
9
+ </linearGradient>
10
+ </defs>
11
+ </svg>
package/lib/build/svg/brand/tiktok.svg ADDED
@@ -0,0 +1 @@
1
+ <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill-rule="evenodd"><path d="m2 17c0 2.7612 2.23875 5 5 5h10c2.7612 0 5-2.2388 5-5v-10c0-2.76167-2.2388-5-5-5h-10c-2.76125 0-5 2.23833-5 5z" fill="#000"/><path d="m14.765 4.62002c-.0794-.31155-.1195-.63182-.1192-.95333h-2.9041v10.88871c0 1.2559-.8567 2.2738-2.1092 2.2738s-2.26792-1.0179-2.26792-2.2733c0-1.2559 1.01542-2.2738 2.26792-2.2738.25 0 .33208.0408.5571.1158v-2.93788c-.23418-.03292-.31418-.05-.5571-.05-2.83458.00042-5.1325 2.30458-5.1325 5.14628 0 2.8416 2.29792 5.1454 5.1325 5.1454 2.795 0 5.1487-2.2396 5.2125-5.0258v-5.57213c1.0533.72208 2.2479 1.14413 3.6204 1.14413v-2.75205c-1.7812 0-3.2775-1.22208-3.7-2.87583z" fill="#25f4ee"/><path d="m15.8002 5.6542c-.0795-.31153-.1197-.63181-.1196-.95333h-2.9046v10.88913c0 1.2559-.8562 2.2734-2.1087 2.2734-1.25251 0-2.26793-1.0175-2.26793-2.2734-.00066-.6022.23789-1.18.6632-1.6063.4253-.4263 1.00253-.6662 1.60473-.667.25 0 .3321.0404.5571.1154v-2.9375c-.2342-.0333-.3142-.05-.5571-.05-2.83459 0-5.13251 2.3038-5.13251 5.1454 0 2.8417 2.29792 5.1455 5.13211 5.1455 2.7946 0 5.1487-2.2392 5.2125-5.0259v-5.5717c1.0533.7221 2.2479 1.1446 3.6204 1.1446v-2.75247c-1.7813 0-3.2775-1.22208-3.7-2.87541z" fill="#fff"/><path d="m8.63343 16.5971c-.15445-.313-.23458-.6575-.23416-1.0066 0-1.2559 1.01541-2.2738 2.26793-2.2738.2179 0 .3079.0308.4762.0883l.0809.0275v-2.9379l-.0875-.0125c-.1713-.0246-.2596-.0375-.4696-.0375-.1608 0-.3204.0075-.4775.0221v1.9313l-.0808-.0275c-.16838-.0575-.25838-.0884-.4763-.0884-1.2525 0-2.26792 1.0179-2.26792 2.2738-.00024.4248.11848.8412.34271 1.2021.22424.3608.54503.6516.92604.8395zm-2.07166 2.0821c.47704.6386 1.09659 1.1571 1.80932 1.5141.71274.3569 1.49896.5426 2.29611.5422 2.7946 0 5.1487-2.2392 5.2125-5.0255v-5.5716c1.0533.7221 2.2479 1.1441 3.6204 1.1441v-2.75204c-.3497.00006-.6978-.04775-1.0346-.14208v1.85962c-1.3725 0-2.5671-.42212-3.6208-1.14421v5.57171c-.0633 2.7866-2.4175 5.0258-5.2121 5.0258-1.15125 0-2.21417-.38-3.07083-1.0221zm9.77293-11.83374c-.7538-.50864-1.3024-1.26855-1.5479-2.14417h.8937c-.0016.76411.2263 1.5111.6542 2.14417z" fill="#fe2c55"/></g></svg>
package/lib/build/svg/brand/viber.svg ADDED
@@ -0,0 +1 @@
1
+ <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m21.1906 2.34083c-.5964-.55027-3.0063-2.299775-8.3744-2.3235434 0 0-6.33033-.3817356-9.41626 2.4488734-1.71781 1.71817-2.32211 4.23222-2.38585 7.34912-.063744 3.11692-.146214 8.95822 5.48439 10.54202h.0054l-.0036 2.4168s-.03602.9785.60825 1.178c.77932.242 1.23668-.5017 1.98071-1.3033.40838-.4401.97236-1.0865 1.39726-1.5806 3.8509.3241 6.8126-.4167 7.1489-.5261.7775-.2521 5.1772-.8157 5.8928-6.6567.7386-6.02021-.3572-9.8282-2.3376-11.54457z" fill="#fff"/><path d="m19.9383 3.55699c-.5042-.45808-2.6804-1.82549-7.2213-1.84529 0 0-5.37703-.35329-7.98723 2.01095-1.45276 1.43439-1.94217 3.56743-1.99583 6.17043-.05366 2.60302-.33168 7.57562 4.42957 8.89842 0 0-.01873 3.6917-.02089 4.0161 0 .2269.03601.3821.16566.4142.09327.0227.233-.0256.35185-.1441.76131-.7645 3.19867-3.705 3.19867-3.705 3.2703.2136 5.8722-.4321 6.152-.5236.6598-.2121 4.2283-.5186 4.8322-5.3969.6241-5.02844-.2294-8.46082-1.9047-9.89521z" fill="#7360f2"/><g stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width=".6"><path d="m15.0257 9.67913c-.059-1.19058-.6638-1.81589-1.8143-1.87591"/><path d="m16.5835 10.2013c.024-1.10917-.3046-2.0359-.9857-2.78017-.6843-.7469-1.6314-1.15817-2.8468-1.24712"/><path d="m18.1781 10.8251c-.0146-1.92479-.5898-3.44069-1.7254-4.54772-1.1356-1.10704-2.5479-1.66643-4.2369-1.6782"/></g><path d="m13.2718 13.7453s.4268.036.6565-.247l.448-.5636c.2161-.2795.7376-.4577 1.2482-.1732.3827.2182.7542.4555 1.1132.7109.3389.2492 1.0328.8283 1.035.8283.3306.2791.4069.6889.1819 1.121 0 .0026-.0018.0069-.0018.009-.2479.4298-.5627.8173-.9324 1.1481-.0043.0022-.0043.0043-.0083.0065-.3212.2684-.6368.421-.9468.4577-.0456.008-.092.0109-.1383.0087-.1366.0013-.2726-.0196-.4026-.062l-.0101-.0147c-.4775-.1347-1.2748-.4718-2.6026-1.2043-.7684-.4189-1.4999-.9021-2.1867-1.4445-.3443-.2717-.6726-.5629-.98351-.8722l-.03314-.0331-.03313-.0332-.03313-.0331c-.01116-.0108-.02197-.022-.03313-.0331-.30932-.3109-.60054-.6393-.87223-.9835-.54228-.6868-1.0255-1.4182-1.44447-2.1864-.7325-1.32813-1.06958-2.12474-1.20427-2.60299l-.01477-.01008c-.04222-.12998-.06301-.26596-.06158-.40262-.00252-.04626.00026-.09266.00829-.13829.03865-.30947.19146-.6253.45844-.9475.00216-.00396.00432-.00396.00648-.00828.33071-.36974.71827-.68436 1.14809-.93201.00216 0 .00648-.00216.009-.00216.43215-.22508.84198-.14873 1.12072.18006.00216.00216.58016.69613.82829 1.03501.25542.35931.49265.73119.71085 1.11423.2845.51031.1063 1.03285-.1732 1.24821l-.56358.448c-.2845.22976-.24704.65651-.24704.65651s.83482 3.15941 3.95382 3.95561z" fill="#fff"/></svg>
package/lib/build/svg/brand/we-chat.svg ADDED
@@ -0,0 +1 @@
1
+ <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="#51c332"><path d="m16.0428 7.94609c.4084 0 .8073.03394 1.2008.08246-.7114-3.12427-3.9929-5.48747-7.93882-5.48747-4.46625 0-8.08603 3.02536-8.08603 6.75628 0 2.15104 1.21027 4.05944 3.08747 5.29434l-1.06603 2.1377 2.90404-1.2473c.62274.2218 1.26985.4044 1.96102.4894-.09445-.4123-.14812-.835-.14812-1.2688 0-3.7256 3.62637-6.75661 8.08567-6.75661zm-4.0427-2.36489c.558 0 1.0106.45399 1.0106 1.01358 0 .55978-.4525 1.01344-1.0106 1.01344-.5584 0-1.0108-.45366-1.0108-1.01344 0-.55964.4524-1.01358 1.0108-1.01358zm-5.39072 2.02702c-.55815 0-1.01072-.45366-1.01072-1.01344 0-.55959.45262-1.01358 1.01072-1.01358.55809 0 1.01076.45399 1.01076 1.01358-.00005.55978-.45272 1.01344-1.01076 1.01344z"/><path d="m22.7812 14.7026c0-2.9852-3.0176-5.40524-6.7383-5.40524-3.7209 0-6.73809 2.42004-6.73809 5.40524 0 2.985 3.01719 5.4051 6.73809 5.4051.6119 0 1.1939-.0865 1.7587-.2093l3.632 1.5605-1.2562-2.5172c1.5742-.9894 2.6038-2.5108 2.6038-4.2391zm-8.7597-.3379c-.5581 0-1.0108-.4538-1.0108-1.0136 0-.5596.4526-1.0133 1.0108-1.0133s1.0106.4539 1.0106 1.0133c0 .5599-.4524 1.0136-1.0106 1.0136zm4.0428 0c-.5583 0-1.0106-.4538-1.0106-1.0136 0-.5596.4522-1.0133 1.0106-1.0133s1.0108.4539 1.0108 1.0133c0 .5599-.4524 1.0136-1.0108 1.0136z"/></g></svg>
package/lib/dist/css/dialtone.css CHANGED
@@ -514,66 +514,66 @@ body {
514
514
  --avatar-presence-position-bottom: var(--su4);
515
515
  }
516
516
  .d-badge {
517
- --badge--fc: var(--fc-primary);
518
- --badge--bgc: var(--black-200);
519
- display: inline-block;
520
- min-width: calc(var(--su6) + var(--su1));
521
- padding: calc(var(--su6) / 4) var(--su6);
522
- color: var(--badge--fc);
523
- font-weight: bold;
524
- font-size: var(--fs-100);
525
- line-height: var(--lh6);
517
+ --badge-color-text: var(--fc-primary);
518
+ --badge-color-background: var(--black-200);
519
+ --badge-color-background-ai: linear-gradient(to bottom right, var(--purple-400) 0%, var(--magenta-300) 100%);
520
+ --badge-border-radius: var(--size-300);
521
+ --badge-line-height: var(--size-500);
522
+ --badge-font-size: var(--fs-100);
523
+ --badge-font-weight: var(--fw-semibold);
524
+ --badge-gap: var(--space-300);
525
+ --badge-letter-spacing: calc(var(--size-100) / 2);
526
+ --badge-padding-y: var(--space-100);
527
+ --badge-padding-x: var(--space-400);
528
+ --badge-text-case: none;
529
+ display: inline-flex;
530
+ gap: var(--badge-gap);
531
+ align-items: center;
532
+ justify-content: center;
533
+ min-width: calc(var(--size-400) + var(--size-500));
534
+ padding: var(--badge-padding-y) var(--badge-padding-x);
535
+ color: var(--badge-color-text);
536
+ font-weight: var(--badge-font-weight);
537
+ font-size: var(--badge-font-size);
538
+ line-height: var(--badge-line-height);
539
+ letter-spacing: var(--badge-letter-spacing);
526
540
  text-align: center;
527
- text-transform: uppercase;
528
- background-color: var(--badge--bgc);
529
- border-radius: var(--su4);
541
+ text-transform: var(--badge-text-case);
542
+ background-color: var(--badge-color-background);
543
+ border-radius: var(--badge-border-radius);
530
544
  }
531
- .d-badge--white {
532
- --badge--bgc: var(--white);
545
+ .d-badge--count {
546
+ --badge-border-radius: var(--br-pill);
547
+ --badge-padding-x: calc(var(--space-400) - var(--space-100));
548
+ --badge-padding-y: var(--space-300);
533
549
  }
534
- .d-badge--black-700 {
535
- --badge--fc: var(--white);
536
- --badge--bgc: var(--black-700);
550
+ .d-badge--info {
551
+ --badge-color-background: var(--blue-100);
537
552
  }
538
- .d-badge--purple-100 {
539
- --badge--bgc: var(--purple-100);
553
+ .d-badge--success {
554
+ --badge-color-background: var(--green-100);
540
555
  }
541
- .d-badge--purple-300 {
542
- --badge--bgc: var(--purple-300);
556
+ .d-badge--warning {
557
+ --badge-color-background: var(--gold-100);
543
558
  }
544
- .d-badge--purple-400 {
545
- --badge--bgc: var(--purple-400);
546
- --badge--fc: var(--white);
559
+ .d-badge--critical {
560
+ --badge-color-background: var(--red-100);
547
561
  }
548
- .d-badge--purple-500 {
549
- --badge--fc: var(--white);
550
- --badge--bgc: var(--purple-500);
562
+ .d-badge--bulletin {
563
+ --badge-color-text: var(--fc-primary-inverted);
564
+ --badge-color-background: var(--purple-400);
551
565
  }
552
- .d-badge--orange-400 {
553
- --badge--bgc: var(--orange-400);
566
+ .d-badge--ai {
567
+ --badge-color-text: var(--fc-primary-inverted);
568
+ --badge-color-background: var(--magenta-300);
569
+ background-image: var(--badge-color-background-ai);
554
570
  }
555
- .d-badge--magenta-100 {
556
- --badge--bgc: var(--magenta-100);
557
- }
558
- .d-badge--magenta-300 {
559
- --badge--bgc: var(--magenta-300);
560
- }
561
- .d-badge--magenta-400 {
562
- --badge--fc: var(--white);
563
- --badge--bgc: var(--magenta-400);
564
- }
565
- .d-badge--magenta-500 {
566
- --badge--fc: var(--white);
567
- --badge--bgc: var(--magenta-500);
568
- }
569
- .d-badge--gold-200 {
570
- --badge--bgc: var(--gold-200);
571
- }
572
- .d-badge--green-400 {
573
- --badge--bgc: var(--green-400);
571
+ .d-badge__label {
572
+ display: flex;
574
573
  }
575
- .d-badge--red-300 {
576
- --badge--bgc: var(--red-300);
574
+ .d-badge__icon-left,
575
+ .d-badge__icon-right {
576
+ display: flex;
577
577
  }
578
578
  .d-banner {
579
579
  --banner--bgc: var(--black-100);