@dialpad/dialtone 7.20.0 → 7.21.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 (7) hide show
  1. package/lib/build/less/components/badge.less +33 -0
  2. package/lib/build/svg/brand/dialbot.svg +11 -0
  3. package/lib/dist/css/dialtone.css +75 -0
  4. package/lib/dist/css/dialtone.min.css +1 -1
  5. package/lib/dist/svg/brand/dialbot.svg +1 -0
  6. package/lib/dist/vue/icons/IconDialbot.vue +3 -0
  7. package/package.json +1 -1
package/lib/build/less/components/badge.less CHANGED
@@ -32,6 +32,7 @@
32
32
  --badge-padding-y: var(--space-100);
33
33
  --badge-padding-x: var(--space-400);
34
34
  --badge-text-case: none;
35
+ --badge-decorative-color: var(--black-900);
35
36
 
36
37
  // BASE STYLE
37
38
  // --------------------------------------------------------------------------
@@ -93,11 +94,43 @@
93
94
  background-image: var(--badge-color-background-ai);
94
95
  }
95
96
 
97
+ &--decorate-black-400 { --badge-decorative-color: var(--black-400); }
98
+ &--decorate-black-500 { --badge-decorative-color: var(--black-500); }
99
+ &--decorate-black-900 { --badge-decorative-color: var(--black-900); }
100
+ &--decorate-red-200 { --badge-decorative-color: var(--red-200); }
101
+ &--decorate-red-300 { --badge-decorative-color: var(--red-300); }
102
+ &--decorate-red-400 { --badge-decorative-color: var(--red-400); }
103
+ &--decorate-purple-200 { --badge-decorative-color: var(--purple-200); }
104
+ &--decorate-purple-300 { --badge-decorative-color: var(--purple-300); }
105
+ &--decorate-purple-400 { --badge-decorative-color: var(--purple-400); }
106
+ &--decorate-purple-500 { --badge-decorative-color: var(--purple-500); }
107
+ &--decorate-blue-200 { --badge-decorative-color: var(--blue-200); }
108
+ &--decorate-blue-300 { --badge-decorative-color: var(--blue-300); }
109
+ &--decorate-blue-400 { --badge-decorative-color: var(--blue-400); }
110
+ &--decorate-green-300 { --badge-decorative-color: var(--green-300); }
111
+ &--decorate-green-400 { --badge-decorative-color: var(--green-400); }
112
+ &--decorate-green-500 { --badge-decorative-color: var(--green-500); }
113
+ &--decorate-gold-300 { --badge-decorative-color: var(--gold-300); }
114
+ &--decorate-gold-400 { --badge-decorative-color: var(--gold-400); }
115
+ &--decorate-gold-500 { --badge-decorative-color: var(--gold-500); }
116
+ &--decorate-magenta-200 { --badge-decorative-color: var(--magenta-200); }
117
+ &--decorate-magenta-300 { --badge-decorative-color: var(--magenta-300); }
118
+ &--decorate-magenta-400 { --badge-decorative-color: var(--magenta-400); }
119
+
96
120
  // SLOTS
97
121
  // --------------------------------------------------------------------------
98
122
 
123
+ &__decorative {
124
+ display: inline-flex;
125
+ width: var(--size-400);
126
+ height: var(--size-400);
127
+ background-color: var(--badge-decorative-color);
128
+ border-radius: var(--size-200);
129
+ }
130
+
99
131
  &__label {
100
132
  display: flex;
133
+ align-items: center;
101
134
  }
102
135
 
103
136
  &__icon-left,
package/lib/build/svg/brand/dialbot.svg ADDED
@@ -0,0 +1,11 @@
1
+ <svg width="358" height="358" viewBox="0 0 358 358" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="179" cy="179" r="179" fill="url(#paint0_linear_1957_89480)"/>
3
+ <path d="M179 268.5L179 256.567L179 256.567L179 268.5ZM265.517 268.5L265.517 280.433L284.825 280.433L276.19 263.163L265.517 268.5ZM248.787 235.041L239.487 227.563L234.69 233.53L238.114 240.378L248.787 235.041ZM179 101.433C221.839 101.433 256.567 136.161 256.567 179L280.433 179C280.433 122.98 235.02 77.5667 179 77.5667L179 101.433ZM101.433 179C101.433 136.161 136.161 101.433 179 101.433L179 77.5667C122.98 77.5667 77.5667 122.98 77.5667 179L101.433 179ZM179 256.567C136.161 256.567 101.433 221.839 101.433 179L77.5667 179C77.5667 235.02 122.98 280.433 179 280.433L179 256.567ZM265.517 256.567L179 256.567L179 280.433L265.517 280.433L265.517 256.567ZM238.114 240.378L254.843 273.837L276.19 263.163L259.461 229.704L238.114 240.378ZM256.567 179C256.567 197.396 250.177 214.268 239.487 227.563L258.087 242.518C272.062 225.138 280.433 203.03 280.433 179L256.567 179Z" fill="white"/>
4
+ <path d="M226.733 202.867C220.206 208.568 212.791 212.977 204.49 216.093C196.188 219.209 187.709 220.767 179.053 220.767C170.326 220.767 161.812 219.209 153.51 216.093C145.209 212.977 137.794 208.568 131.267 202.867L131.267 190.934C135.666 193.585 140.632 195.873 146.167 197.795C151.63 199.784 157.235 201.342 162.983 202.469C168.73 203.596 174.087 204.16 179.053 204.16C184.091 204.16 189.448 203.596 195.124 202.469C200.871 201.342 206.476 199.784 211.94 197.795C217.474 195.873 222.405 193.585 226.733 190.934L226.733 202.867Z" fill="white"/>
5
+ <defs>
6
+ <linearGradient id="paint0_linear_1957_89480" x1="0" y1="0" x2="358" y2="358" gradientUnits="userSpaceOnUse">
7
+ <stop stop-color="#7C52FF"/>
8
+ <stop offset="1" stop-color="#F9008E"/>
9
+ </linearGradient>
10
+ </defs>
11
+ </svg>
package/lib/dist/css/dialtone.css CHANGED
@@ -590,6 +590,7 @@ body {
590
590
  --badge-padding-y: var(--space-100);
591
591
  --badge-padding-x: var(--space-400);
592
592
  --badge-text-case: none;
593
+ --badge-decorative-color: var(--black-900);
593
594
  display: inline-flex;
594
595
  gap: var(--badge-gap);
595
596
  align-items: center;
@@ -634,8 +635,82 @@ body {
634
635
  --badge-color-background: var(--magenta-300);
635
636
  background-image: var(--badge-color-background-ai);
636
637
  }
638
+ .d-badge--decorate-black-400 {
639
+ --badge-decorative-color: var(--black-400);
640
+ }
641
+ .d-badge--decorate-black-500 {
642
+ --badge-decorative-color: var(--black-500);
643
+ }
644
+ .d-badge--decorate-black-900 {
645
+ --badge-decorative-color: var(--black-900);
646
+ }
647
+ .d-badge--decorate-red-200 {
648
+ --badge-decorative-color: var(--red-200);
649
+ }
650
+ .d-badge--decorate-red-300 {
651
+ --badge-decorative-color: var(--red-300);
652
+ }
653
+ .d-badge--decorate-red-400 {
654
+ --badge-decorative-color: var(--red-400);
655
+ }
656
+ .d-badge--decorate-purple-200 {
657
+ --badge-decorative-color: var(--purple-200);
658
+ }
659
+ .d-badge--decorate-purple-300 {
660
+ --badge-decorative-color: var(--purple-300);
661
+ }
662
+ .d-badge--decorate-purple-400 {
663
+ --badge-decorative-color: var(--purple-400);
664
+ }
665
+ .d-badge--decorate-purple-500 {
666
+ --badge-decorative-color: var(--purple-500);
667
+ }
668
+ .d-badge--decorate-blue-200 {
669
+ --badge-decorative-color: var(--blue-200);
670
+ }
671
+ .d-badge--decorate-blue-300 {
672
+ --badge-decorative-color: var(--blue-300);
673
+ }
674
+ .d-badge--decorate-blue-400 {
675
+ --badge-decorative-color: var(--blue-400);
676
+ }
677
+ .d-badge--decorate-green-300 {
678
+ --badge-decorative-color: var(--green-300);
679
+ }
680
+ .d-badge--decorate-green-400 {
681
+ --badge-decorative-color: var(--green-400);
682
+ }
683
+ .d-badge--decorate-green-500 {
684
+ --badge-decorative-color: var(--green-500);
685
+ }
686
+ .d-badge--decorate-gold-300 {
687
+ --badge-decorative-color: var(--gold-300);
688
+ }
689
+ .d-badge--decorate-gold-400 {
690
+ --badge-decorative-color: var(--gold-400);
691
+ }
692
+ .d-badge--decorate-gold-500 {
693
+ --badge-decorative-color: var(--gold-500);
694
+ }
695
+ .d-badge--decorate-magenta-200 {
696
+ --badge-decorative-color: var(--magenta-200);
697
+ }
698
+ .d-badge--decorate-magenta-300 {
699
+ --badge-decorative-color: var(--magenta-300);
700
+ }
701
+ .d-badge--decorate-magenta-400 {
702
+ --badge-decorative-color: var(--magenta-400);
703
+ }
704
+ .d-badge__decorative {
705
+ display: inline-flex;
706
+ width: var(--size-400);
707
+ height: var(--size-400);
708
+ background-color: var(--badge-decorative-color);
709
+ border-radius: var(--size-200);
710
+ }
637
711
  .d-badge__label {
638
712
  display: flex;
713
+ align-items: center;
639
714
  }
640
715
  .d-badge__icon-left,
641
716
  .d-badge__icon-right {