@dialpad/dialtone-css 8.74.0-next.2 → 8.74.0-next.4

package/lib/build/less/components/text.less

@@ -22,35 +22,72 @@
   //  $   TEXT STYLES
   //  ----------------------------------------------------------------------------
 
+  // the extra `.d-text` is to tick up specificity to (0,2,0), but not as high as
+  // as a CSS utility with `!important` which has specificity of (0,2,1)
+
   &-headline {
-      &--3xl  { font: var(--dt-text-headline-3xl); }
-      &--2xl  { font: var(--dt-text-headline-2xl); }
-      &--xl   { font: var(--dt-text-headline-xl); }
-      &--lg   { font: var(--dt-text-headline-lg); }
-      &--md   { font: var(--dt-text-headline-md); }
-      &--sm   { font: var(--dt-text-headline-sm); }
-      &--xs   { font: var(--dt-text-headline-xs); }
+      &--3xl,
+      &--3xl.d-text  { font: var(--dt-text-headline-3xl); }
+
+      &--2xl,
+      &--2xl.d-text  { font: var(--dt-text-headline-2xl); }
+
+      &--xl,
+      &--xl.d-text   { font: var(--dt-text-headline-xl); }
+
+      &--lg,
+      &--lg.d-text   { font: var(--dt-text-headline-lg); }
+
+      &--md,
+      &--md.d-text   { font: var(--dt-text-headline-md); }
+
+      &--sm,
+      &--sm.d-text   { font: var(--dt-text-headline-sm); }
+
+      &--xs,
+      &--xs.d-text   { font: var(--dt-text-headline-xs); }
   }
 
   &-body {
-      &--lg { font: var(--dt-text-body-lg); }
-      &--md { font: var(--dt-text-body-md); }
-      &--sm { font: var(--dt-text-body-sm); }
-      &--xs { font: var(--dt-text-body-xs); }
+      &--lg,
+      &--lg.d-text { font: var(--dt-text-body-lg); }
+
+      &--md,
+      &--md.d-text { font: var(--dt-text-body-md); }
+
+      &--sm,
+      &--sm.d-text { font: var(--dt-text-body-sm); }
+
+      &--xs,
+      &--xs.d-text { font: var(--dt-text-body-xs); }
   }
 
   &-label {
-      &--lg { font: var(--dt-text-label-lg); }
-      &--md { font: var(--dt-text-label-md); }
-      &--sm { font: var(--dt-text-label-sm); }
-      &--xs { font: var(--dt-text-label-xs); }
+      &--lg,
+      &--lg.d-text { font: var(--dt-text-label-lg); }
+
+      &--md,
+      &--md.d-text { font: var(--dt-text-label-md); }
+
+      &--sm,
+      &--sm.d-text { font: var(--dt-text-label-sm); }
+
+      &--xs,
+      &--xs.d-text { font: var(--dt-text-label-xs); }
   }
 
   &-code {
-      &--lg { font: var(--dt-text-code-lg); }
-      &--md { font: var(--dt-text-code-md); }
-      &--sm { font: var(--dt-text-code-sm); }
-      &--xs { font: var(--dt-text-code-xs); }
+      &--lg,
+      &--lg.d-text { font: var(--dt-text-code-lg); }
+
+      &--md,
+      &--md.d-text { font: var(--dt-text-code-md); }
+
+      &--sm,
+      &--sm.d-text { font: var(--dt-text-code-sm); }
+
+      &--xs,
+      &--xs.d-text { font: var(--dt-text-code-xs); }
   }
 
   //  ============================================================================
@@ -79,10 +116,10 @@
   //  $   NUMERIC
   //  ----------------------------------------------------------------------------
 
-  &--numeric {
-    &.d-text { // tick up specificity to overcome `font` property of `d-body-[variant]`, `d-header-[variant]`, etc.
-      font-variant-numeric: tabular-nums;
-    }
+  &--numeric,
+  &--numeric.d-text {
+    // tick up specificity to overcome `font` property of `d-body-[variant]`, `d-header-[variant]`, etc.
+    font-variant-numeric: tabular-nums;
   }
 
   //  ============================================================================
@@ -93,9 +130,9 @@
     --dt-text-line-clamp: 1;
 
     display: -webkit-box;
+    overflow: hidden;
     -webkit-line-clamp: var(--dt-text-line-clamp);
     -webkit-box-orient: vertical;
-    overflow: hidden;
   }
 
   //  ============================================================================
@@ -147,16 +184,35 @@
   //  $   FONT STYLE MODIFIERS
   //  ----------------------------------------------------------------------------
 
-  &--fw-bold { font-weight: var(--dt-font-weight-bold); }
-  &--fw-semibold { font-weight: var(--dt-font-weight-semi-bold); }
-  &--fw-medium { font-weight: var(--dt-font-weight-medium); }
-  &--fw-normal { font-weight: var(--dt-font-weight-normal); }
-
-  &--lh-100 { line-height: var(--dt-font-line-height-100); }
-  &--lh-200 { line-height: var(--dt-font-line-height-200); }
-  &--lh-300 { line-height: var(--dt-font-line-height-300); }
-  &--lh-400 { line-height: var(--dt-font-line-height-400); }
-  &--lh-500 { line-height: var(--dt-font-line-height-500); }
-  &--lh-600 { line-height: var(--dt-font-line-height-600); }
+  &--fw-bold,
+  &--fw-bold.d-text { font-weight: var(--dt-font-weight-bold); }
+
+  &--fw-semibold,
+  &--fw-semibold.d-text { font-weight: var(--dt-font-weight-semi-bold); }
+
+  &--fw-medium,
+  &--fw-medium.d-text { font-weight: var(--dt-font-weight-medium); }
+
+  &--fw-normal,
+  &--fw-normal.d-text { font-weight: var(--dt-font-weight-normal); }
+
+
+  &--lh-100,
+  &--lh-100.d-text { line-height: var(--dt-font-line-height-100); }
+
+  &--lh-200,
+  &--lh-200.d-text { line-height: var(--dt-font-line-height-200); }
+
+  &--lh-300,
+  &--lh-300.d-text { line-height: var(--dt-font-line-height-300); }
+
+  &--lh-400,
+  &--lh-400.d-text { line-height: var(--dt-font-line-height-400); }
+
+  &--lh-500,
+  &--lh-500.d-text { line-height: var(--dt-font-line-height-500); }
+
+  &--lh-600,
+  &--lh-600.d-text { line-height: var(--dt-font-line-height-600); }
 }
 }

package/lib/build/less/components/toast.less

@@ -38,7 +38,7 @@
     pointer-events: all;
 
     //  If there's a link in a toast, break the url so it wraps
-    > a {
+    > :where(a) {
         word-break: break-all;
     }
 
@@ -60,10 +60,9 @@
 .d-toast__dialog {
     position: relative;
     display: flex;
-    align-items: center;
+    align-items: start;
 
-
-    .d-notice__actions button:first-child {
+    .d-notice__actions :where(button:first-child) {
         margin-inline-start: var(--dt-size-600); // 32
     }
 }
@@ -160,7 +159,7 @@
   pointer-events: all;
 
   //  If there's a link in a toast, break the url so it wraps
-  > a {
+  > :where(a) {
     word-break: break-all;
   }
 
@@ -212,7 +211,7 @@
   inline-size: var(--dt-size-100-percent);
 
 
-  .d-notice__actions button:first-child {
+  .d-notice__actions :where(button:first-child) {
     margin-inline-start: var(--dt-size-600); // 32
   }
 }

package/lib/build/less/dialtone.less

@@ -17,13 +17,20 @@
 @import 'components/root-layout';
 @import 'components/stack';
 @import 'components/text';
+@import 'components/link';
 @import 'components/item-layout';
 @import 'components/avatar';
-@import 'components/badge';
-@import 'components/breadcrumbs';
 @import 'components/button';
-@import 'components/card';
+@import 'components/badge';
 @import 'components/chip';
+@import 'components/keyboard-shortcut';
+@import 'components/mode-island';
+@import 'components/table';
+@import 'components/toggle';
+@import 'components/presence';
+@import 'components/icon';
+@import 'components/emoji';
+@import 'components/emoji-text-wrapper';
 @import 'components/codeblock';
 @import 'components/collapsible';
 @import 'components/combobox';
@@ -31,36 +38,30 @@
 @import 'components/dropdown';
 @import 'components/description-list';
 @import 'components/empty-state';
-@import 'components/forms';
-@import 'components/image-viewer';
 @import 'components/input';
-@import 'components/keyboard-shortcut';
-@import 'components/link';
+@import 'components/selects';
+@import 'components/image-viewer';
+@import 'components/forms';
+@import 'components/tooltip';
+@import 'components/card';
+@import 'components/breadcrumbs';
 @import 'components/list-group'; // Dialtone 5 shim
 @import 'components/list-item-group';
 @import 'components/list-item';
 @import 'components/loader';
-@import 'components/mode-island';
 @import 'components/modal';
 @import 'components/notice';
 @import 'components/toast';
 @import 'components/banner';
 @import 'components/pagination';
 @import 'components/popover';
+@import 'components/progress_circle';
 @import 'components/radio-checkbox';
 @import 'components/rich-text-editor';
 @import 'components/scroller';
-@import 'components/selects';
 @import 'components/skeleton';
-@import 'components/table';
 @import 'components/tabs';
-@import 'components/tooltip';
-@import 'components/toggle';
-@import 'components/presence';
-@import 'components/icon';
 @import 'components/scrollbar';
-@import 'components/emoji';
-@import 'components/emoji-text-wrapper';
 @import 'components/emoji-picker';
 @import 'components/filter-pill';
 

package/lib/build/less/recipes/attachment_carousel.less

@@ -19,11 +19,16 @@
 .d-recipe-attachment-carousel__arrow {
   position: absolute;
   inset-block-start: var(--dt-size-30-percent);
-  background-color: var(--dt-color-neutral-white);
+  color: var(--dt-color-foreground-tertiary-inverted);
+  background-color: var(--dt-color-surface-strong);
   border: var(--dt-size-100) solid;
-  border-color: var(--bc-default);
+  border-color: var(--dt-color-border-moderate-inverted);
   border-width: var(--dt-size-100);
   opacity: 0;
+
+  &:hover {
+    color: var(--dt-color-foreground-primary-inverted);
+  }
 }
 
 .d-recipe-attachment-carousel:hover .d-recipe-attachment-carousel__arrow {
@@ -46,12 +51,13 @@
   position: absolute;
   inset-block-start: inherit;
   inset-inline-end: inherit;
-  color: var(--dt-color-neutral-white);
-  background-color: var(--dt-color-black-400);
-  border: var(--dt-size-100) solid;
-  border-color: var(--dt-color-neutral-white);
-  border-width: var(--dt-size-200);
+  color: var(--dt-color-foreground-tertiary-inverted);
+  background-color: var(--dt-color-surface-strong);
   opacity: 0;
+
+  &:hover {
+    color: var(--dt-color-foreground-primary-inverted);
+  }
 }
 
 .d-recipe-attachment-carousel__image:focus-within .d-recipe-attachment-carousel__image-close-button, .d-recipe-attachment-carousel__image:hover .d-recipe-attachment-carousel__image-close-button {
@@ -79,33 +85,8 @@
   inset-block-start: inherit;
   inset-inline-end: inherit;
   display: flex;
-  background-color: var(--dt-color-neutral-white);
-  border: var(--dt-size-100) solid;
-  border-color: var(--dt-color-border-subtle);
-  border-width: var(--dt-size-200);
-  border-radius: 50%;
-  transform: rotate(-90deg);
-}
-
-.d-recipe-attachment-carousel__progress-bar {
-  inline-size: var(--dt-size-550);
-  block-size: var(--dt-size-550);
-}
-
-.d-recipe-attachment-carousel__progress-bar-circle {
-  fill: none;
-  stroke-width: 2;
-  stroke-dasharray: var(--stroke-dasharray);
-}
-
-.d-recipe-attachment-carousel__progress-bar-circle:nth-child(1) {
-  stroke: var(--dt-color-black-100);
-  stroke-dashoffset: 0;
-}
-
-.d-recipe-attachment-carousel__progress-bar-circle:nth-child(2) {
-  transition: stroke-dashoffset 500ms linear;
-  stroke: var(--dt-color-purple-800);
-  stroke-dashoffset: var(--stroke-dashoffset);
+  padding: var(--dt-size-300);
+  background-color: var(--dt-color-surface-moderate);
+  border-radius: var(--dt-size-radius-circle);
 }
 }

package/lib/build/less/utilities/typography.less

@@ -52,7 +52,7 @@ ul {
 }
 }
 
-@layer dialtone.components {
+@layer dialtone.base {
 //  ============================================================================
 //  $   HEADLINE STYLES
 //  ----------------------------------------------------------------------------

package/lib/build/less/variables/sizes.less

@@ -11,7 +11,7 @@
 //  ----------------------------------------------------------------------------
 
 #d-internal__input-and-select-xs() {
-    --input-padding-y: calc(calc(var(--dt-size-400) - var(--dt-size-100)) - var(--input-border-width));
+    --input-padding-y: calc(calc(var(--dt-size-350) - var(--dt-size-100)) - var(--input-border-width));
     --input-padding-x: calc(var(--dt-size-400) - var(--input-border-width));
     --input-border-radius: var(--dt-inputs-size-radius-xs);
     --input-typography: var(--dt-typography-inputs-xs);
@@ -25,7 +25,7 @@
 //  $$  SMALL
 //  ----------------------------------------------------------------------------
 #d-internal__input-and-select-sm() {
-    --input-padding-y: calc(var(--dt-size-400) - var(--input-border-width));
+    --input-padding-y: calc(var(--dt-size-350) - var(--input-border-width));
     --input-padding-x: calc((var(--dt-size-500) - var(--dt-size-300)) - var(--input-border-width));
     --input-typography: var(--dt-typography-inputs-sm);
     --input-border-radius: var(--dt-inputs-size-radius-sm);