@dialpad/dialtone 7.0.0-beta.7 → 7.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 (8) hide show
  1. package/lib/build/less/components/input.less +6 -3
  2. package/lib/build/less/utilities/typography.less +12 -9
  3. package/lib/build/svg/system/lock-outline.svg +3 -0
  4. package/lib/dist/css/dialtone.css +26 -4
  5. package/lib/dist/css/dialtone.min.css +1 -1
  6. package/lib/dist/svg/system/lock-outline.svg +1 -0
  7. package/lib/dist/vue/icons/IconLockOutline.vue +3 -0
  8. package/package.json +1 -1
package/lib/build/less/components/input.less CHANGED
@@ -186,7 +186,8 @@
186
186
  --input--bc: var(--warning-color) !important;
187
187
  --input--focus-bc: var(--warning-color);
188
188
 
189
- &:focus {
189
+ &:focus,
190
+ &:focus-within {
190
191
  box-shadow: var(--bs-focus-ring-warning) !important;
191
192
  }
192
193
  }
@@ -196,7 +197,8 @@
196
197
  --input--bc: var(--error-color) !important;
197
198
  --input--focus-bc: var(--error-color);
198
199
 
199
- &:focus {
200
+ &:focus,
201
+ &:focus-within {
200
202
  box-shadow: var(--bs-focus-ring-error) !important;
201
203
  }
202
204
  }
@@ -206,7 +208,8 @@
206
208
  --input--bc: var(--success-color) !important;
207
209
  --input--focus-bc: var(--success-color);
208
210
 
209
- &:focus {
211
+ &:focus,
212
+ &:focus-within {
210
213
  box-shadow: var(--bs-focus-ring-success) !important;
211
214
  }
212
215
  }
package/lib/build/less/utilities/typography.less CHANGED
@@ -141,18 +141,21 @@ ul {
141
141
  .d-headline48 { .d-fs-500(); font-weight: @headline-weight !important; }
142
142
  .d-headline54 { .d-fs-500(); font-weight: @headline-weight !important; }
143
143
 
144
- .d-headline-eyebrow { line-height: var(--lh-300); font-size: var(--fs-100); font-weight: var(--fw-normal); .d-tt-uppercase(); }
145
- .d-headline-small { line-height: var(--lh-300); font-size: var(--fs-100); font-weight: var(--fw-bold); }
146
- .d-headline-medium { line-height: var(--lh-400); font-size: var(--fs-200); font-weight: var(--fw-bold); }
147
- .d-headline-compact-small { line-height: var(--lh-200); font-size: var(--fs-100); font-weight: var(--fw-bold); }
148
- .d-headline-compact-base { line-height: var(--lh-300); font-size: var(--fs-200); font-weight: var(--fw-bold); }
149
- .d-headline-large { line-height: var(--lh-400); font-size: var(--fs-300); font-weight: var(--fw-bold); }
150
- .d-headline-extra-large { line-height: var(--lh-200); font-size: var(--fs-400); font-weight: var(--fw-medium); }
151
- .d-headline-extra-extra-large { line-height: var(--lh-200); font-size: var(--fs-500); font-weight: var(--fw-medium); }
144
+ .d-headline-eyebrow { line-height: var(--lh-300); font-size: var(--fs-100); font-weight: var(--fw-normal); .d-tt-uppercase(); }
145
+ .d-headline-small { line-height: var(--lh-300); font-size: var(--fs-100); font-weight: var(--fw-bold); }
146
+ .d-headline-soft-small { line-height: var(--lh-300); font-size: var(--fs-100); font-weight: var(--fw-medium); }
147
+ .d-headline-medium { line-height: var(--lh-400); font-size: var(--fs-200); font-weight: var(--fw-bold); }
148
+ .d-headline-compact-small { line-height: var(--lh-200); font-size: var(--fs-100); font-weight: var(--fw-bold); }
149
+ .d-headline-compact-soft-small { line-height: var(--lh-200); font-size: var(--fs-100); font-weight: var(--fw-medium); }
150
+ .d-headline-compact-base,
151
+ .d-headline-compact-medium { line-height: var(--lh-300); font-size: var(--fs-200); font-weight: var(--fw-bold); }
152
+ .d-headline-compact-large { line-height: var(--lh-200); font-size: var(--fs-300); font-weight: var(--fw-bold); }
153
+ .d-headline-large { line-height: var(--lh-400); font-size: var(--fs-300); font-weight: var(--fw-bold); }
154
+ .d-headline-extra-large { line-height: var(--lh-200); font-size: var(--fs-400); font-weight: var(--fw-medium); }
155
+ .d-headline-extra-extra-large { line-height: var(--lh-200); font-size: var(--fs-500); font-weight: var(--fw-medium); }
152
156
 
153
157
  .d-fs-unset { font-size: unset !important; }
154
158
 
155
-
156
159
  // ============================================================================
157
160
  // $$ FONT STYLE
158
161
  // ----------------------------------------------------------------------------
package/lib/build/svg/system/lock-outline.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M18 8H17V6C17 3.24 14.76 1 12 1C9.24 1 7 3.24 7 6V8H6C4.9 8 4 8.9 4 10V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V10C20 8.9 19.1 8 18 8ZM9 6C9 4.34 10.34 3 12 3C13.66 3 15 4.34 15 6V8H9V6ZM18 20H6V10H18V20ZM12 17C13.1 17 14 16.1 14 15C14 13.9 13.1 13 12 13C10.9 13 10 13.9 10 15C10 16.1 10.9 17 12 17Z" fill="#0D0C0F"/>
3
+ </svg>
package/lib/dist/css/dialtone.css CHANGED
@@ -1740,7 +1740,9 @@ legend .d-label {
1740
1740
  --input--focus-bc: var(--warning-color);
1741
1741
  }
1742
1742
  .d-input--warning:focus,
1743
- .d-textarea--warning:focus {
1743
+ .d-textarea--warning:focus,
1744
+ .d-input--warning:focus-within,
1745
+ .d-textarea--warning:focus-within {
1744
1746
  box-shadow: var(--bs-focus-ring-warning) !important;
1745
1747
  }
1746
1748
  .d-input--error,
@@ -1749,7 +1751,9 @@ legend .d-label {
1749
1751
  --input--focus-bc: var(--error-color);
1750
1752
  }
1751
1753
  .d-input--error:focus,
1752
- .d-textarea--error:focus {
1754
+ .d-textarea--error:focus,
1755
+ .d-input--error:focus-within,
1756
+ .d-textarea--error:focus-within {
1753
1757
  box-shadow: var(--bs-focus-ring-error) !important;
1754
1758
  }
1755
1759
  .d-input--success,
@@ -1758,7 +1762,9 @@ legend .d-label {
1758
1762
  --input--focus-bc: var(--success-color);
1759
1763
  }
1760
1764
  .d-input--success:focus,
1761
- .d-textarea--success:focus {
1765
+ .d-textarea--success:focus,
1766
+ .d-input--success:focus-within,
1767
+ .d-textarea--success:focus-within {
1762
1768
  box-shadow: var(--bs-focus-ring-success) !important;
1763
1769
  }
1764
1770
  .d-input-icon {
@@ -19609,6 +19615,11 @@ ul {
19609
19615
  font-size: var(--fs-100);
19610
19616
  font-weight: var(--fw-bold);
19611
19617
  }
19618
+ .d-headline-soft-small {
19619
+ line-height: var(--lh-300);
19620
+ font-size: var(--fs-100);
19621
+ font-weight: var(--fw-medium);
19622
+ }
19612
19623
  .d-headline-medium {
19613
19624
  line-height: var(--lh-400);
19614
19625
  font-size: var(--fs-200);
@@ -19619,11 +19630,22 @@ ul {
19619
19630
  font-size: var(--fs-100);
19620
19631
  font-weight: var(--fw-bold);
19621
19632
  }
19622
- .d-headline-compact-base {
19633
+ .d-headline-compact-soft-small {
19634
+ line-height: var(--lh-200);
19635
+ font-size: var(--fs-100);
19636
+ font-weight: var(--fw-medium);
19637
+ }
19638
+ .d-headline-compact-base,
19639
+ .d-headline-compact-medium {
19623
19640
  line-height: var(--lh-300);
19624
19641
  font-size: var(--fs-200);
19625
19642
  font-weight: var(--fw-bold);
19626
19643
  }
19644
+ .d-headline-compact-large {
19645
+ line-height: var(--lh-200);
19646
+ font-size: var(--fs-300);
19647
+ font-weight: var(--fw-bold);
19648
+ }
19627
19649
  .d-headline-large {
19628
19650
  line-height: var(--lh-400);
19629
19651
  font-size: var(--fs-300);