@dialpad/dialtone-css 8.78.0-next.1 → 8.78.0-next.2

package/lib/build/less/utilities/sizing.less

@@ -25,51 +25,66 @@
 //  ----------------------------------------------------------------------------
 @layer dialtone.utilities {
 .d-h10p { block-size: 10% !important; }
+.d-h15p { block-size: 15% !important; }
 .d-h20p { block-size: 20% !important; }
 .d-h25p { block-size: 25% !important; }
 .d-h30p { block-size: 30% !important; }
+.d-h33p { block-size: 33.333% !important; }
 .d-h40p { block-size: 40% !important; }
 .d-h50p { block-size: 50% !important; }
 .d-h60p { block-size: 60% !important; }
+.d-h66p { block-size: 66.667% !important; }
 .d-h70p { block-size: 70% !important; }
 .d-h75p { block-size: 75% !important; }
 .d-h80p { block-size: 80% !important; }
+.d-h85p { block-size: 85% !important; }
 .d-h90p { block-size: 90% !important; }
 .d-h100p { block-size: 100% !important; }
 
 //  $$  MAX-HEIGHT
 //  ----------------------------------------------------------------------------
 .d-hmx10p { max-block-size: 10% !important; }
+.d-hmx15p { max-block-size: 15% !important; }
 .d-hmx20p { max-block-size: 20% !important; }
 .d-hmx25p { max-block-size: 25% !important; }
 .d-hmx30p { max-block-size: 30% !important; }
+.d-hmx33p { max-block-size: 33.333% !important; }
 .d-hmx40p { max-block-size: 40% !important; }
 .d-hmx50p { max-block-size: 50% !important; }
 .d-hmx60p { max-block-size: 60% !important; }
+.d-hmx66p { max-block-size: 66.667% !important; }
 .d-hmx70p { max-block-size: 70% !important; }
 .d-hmx75p { max-block-size: 75% !important; }
 .d-hmx80p { max-block-size: 80% !important; }
+.d-hmx85p { max-block-size: 85% !important; }
 .d-hmx90p { max-block-size: 90% !important; }
 .d-hmx100p { max-block-size: 100% !important; }
 
 //  $$  MIN-HEIGHT
 //  ----------------------------------------------------------------------------
 .d-hmn10p { min-block-size: 10% !important; }
+.d-hmn15p { min-block-size: 15% !important; }
 .d-hmn20p { min-block-size: 20% !important; }
 .d-hmn25p { min-block-size: 25% !important; }
 .d-hmn30p { min-block-size: 30% !important; }
+.d-hmn33p { min-block-size: 33.333% !important; }
 .d-hmn40p { min-block-size: 40% !important; }
 .d-hmn50p { min-block-size: 50% !important; }
 .d-hmn60p { min-block-size: 60% !important; }
+.d-hmn66p { min-block-size: 66.667% !important; }
 .d-hmn70p { min-block-size: 70% !important; }
 .d-hmn75p { min-block-size: 75% !important; }
 .d-hmn80p { min-block-size: 80% !important; }
+.d-hmn85p { min-block-size: 85% !important; }
 .d-hmn90p { min-block-size: 90% !important; }
 .d-hmn100p { min-block-size: 100% !important; }
 
 //  $$  FIXED
 //  ----------------------------------------------------------------------------
 .d-h100vh { block-size: 100vh !important; }
+.d-h-dvh { block-size: 100dvh !important; }
+.d-h-svh { block-size: 100svh !important; }
+.d-h-lvh { block-size: 100lvh !important; }
 .d-h-auto { block-size: auto !important; }
 .d-h-unset { block-size: unset !important; }
 .d-h-fit-content { block-size: fit-content !important; }
@@ -95,45 +110,57 @@
 //  $$  FLUID
 //  ----------------------------------------------------------------------------
 .d-w10p { inline-size: 10% !important; }
+.d-w15p { inline-size: 15% !important; }
 .d-w20p { inline-size: 20% !important; }
 .d-w25p { inline-size: 25% !important; }
 .d-w30p { inline-size: 30% !important; }
+.d-w33p { inline-size: 33.333% !important; }
 .d-w40p { inline-size: 40% !important; }
 .d-w50p { inline-size: 50% !important; }
 .d-w60p { inline-size: 60% !important; }
+.d-w66p { inline-size: 66.667% !important; }
 .d-w70p { inline-size: 70% !important; }
 .d-w75p { inline-size: 75% !important; }
 .d-w80p { inline-size: 80% !important; }
+.d-w85p { inline-size: 85% !important; }
 .d-w90p { inline-size: 90% !important; }
 .d-w100p { inline-size: 100% !important; }
 
 //  $$  MAX-WIDTH
 //  ----------------------------------------------------------------------------
 .d-wmx10p { max-inline-size: 10% !important; }
+.d-wmx15p { max-inline-size: 15% !important; }
 .d-wmx20p { max-inline-size: 20% !important; }
 .d-wmx25p { max-inline-size: 25% !important; }
 .d-wmx30p { max-inline-size: 30% !important; }
+.d-wmx33p { max-inline-size: 33.333% !important; }
 .d-wmx40p { max-inline-size: 40% !important; }
 .d-wmx50p { max-inline-size: 50% !important; }
 .d-wmx60p { max-inline-size: 60% !important; }
+.d-wmx66p { max-inline-size: 66.667% !important; }
 .d-wmx70p { max-inline-size: 70% !important; }
 .d-wmx75p { max-inline-size: 75% !important; }
 .d-wmx80p { max-inline-size: 80% !important; }
+.d-wmx85p { max-inline-size: 85% !important; }
 .d-wmx90p { max-inline-size: 90% !important; }
 .d-wmx100p { max-inline-size: 100% !important; }
 
 //  $$  MIN-WIDTH
 //  ----------------------------------------------------------------------------
 .d-wmn10p { min-inline-size: 10% !important; }
+.d-wmn15p { min-inline-size: 15% !important; }
 .d-wmn20p { min-inline-size: 20% !important; }
 .d-wmn25p { min-inline-size: 25% !important; }
 .d-wmn30p { min-inline-size: 30% !important; }
+.d-wmn33p { min-inline-size: 33.333% !important; }
 .d-wmn40p { min-inline-size: 40% !important; }
 .d-wmn50p { min-inline-size: 50% !important; }
 .d-wmn60p { min-inline-size: 60% !important; }
+.d-wmn66p { min-inline-size: 66.667% !important; }
 .d-wmn70p { min-inline-size: 70% !important; }
 .d-wmn75p { min-inline-size: 75% !important; }
 .d-wmn80p { min-inline-size: 80% !important; }
+.d-wmn85p { min-inline-size: 85% !important; }
 .d-wmn90p { min-inline-size: 90% !important; }
 .d-wmn100p { min-inline-size: 100% !important; }
 
@@ -144,6 +171,9 @@
 .d-w90ch { inline-size: 90ch !important; }
 
 .d-w100vw { inline-size: 100vw !important; }
+.d-w-dvw { inline-size: 100dvw !important; }
+.d-w-svw { inline-size: 100svw !important; }
+.d-w-lvw { inline-size: 100lvw !important; }
 .d-w-auto { inline-size: auto !important; }
 .d-w-unset { inline-size: unset !important; }
 .d-w-fit-content { inline-size: fit-content !important; }
@@ -169,4 +199,146 @@
 .d-wmx-fit-content { max-inline-size: fit-content !important; }
 .d-wmx-max-content { max-inline-size: max-content !important; }
 .d-wmx-min-content { max-inline-size: min-content !important; }
+
+//  ============================================================================
+//  $   SIZE (both dimensions)
+//  ============================================================================
+//  $$  KEYWORDS & VIEWPORT
+//  ----------------------------------------------------------------------------
+.d-size-auto {
+  inline-size: auto !important;
+  block-size: auto !important;
+}
+
+.d-size-full {
+  inline-size: 100% !important;
+  block-size: 100% !important;
+}
+
+.d-size-fit {
+  inline-size: fit-content !important;
+  block-size: fit-content !important;
+}
+
+.d-size-min {
+  inline-size: min-content !important;
+  block-size: min-content !important;
+}
+
+.d-size-max {
+  inline-size: max-content !important;
+  block-size: max-content !important;
+}
+
+.d-size-dvh {
+  inline-size: 100dvh !important;
+  block-size: 100dvh !important;
+}
+
+.d-size-dvw {
+  inline-size: 100dvw !important;
+  block-size: 100dvw !important;
+}
+
+.d-size-svh {
+  inline-size: 100svh !important;
+  block-size: 100svh !important;
+}
+
+.d-size-svw {
+  inline-size: 100svw !important;
+  block-size: 100svw !important;
+}
+
+.d-size-lvh {
+  inline-size: 100lvh !important;
+  block-size: 100lvh !important;
+}
+
+.d-size-lvw {
+  inline-size: 100lvw !important;
+  block-size: 100lvw !important;
+}
+
+//  $$  PERCENTAGES
+//  ----------------------------------------------------------------------------
+.d-size-10p {
+  inline-size: 10% !important;
+  block-size: 10% !important;
+}
+
+.d-size-15p {
+  inline-size: 15% !important;
+  block-size: 15% !important;
+}
+
+.d-size-20p {
+  inline-size: 20% !important;
+  block-size: 20% !important;
+}
+
+.d-size-25p {
+  inline-size: 25% !important;
+  block-size: 25% !important;
+}
+
+.d-size-30p {
+  inline-size: 30% !important;
+  block-size: 30% !important;
+}
+
+.d-size-33p {
+  inline-size: 33.333% !important;
+  block-size: 33.333% !important;
+}
+
+.d-size-40p {
+  inline-size: 40% !important;
+  block-size: 40% !important;
+}
+
+.d-size-50p {
+  inline-size: 50% !important;
+  block-size: 50% !important;
+}
+
+.d-size-60p {
+  inline-size: 60% !important;
+  block-size: 60% !important;
+}
+
+.d-size-66p {
+  inline-size: 66.667% !important;
+  block-size: 66.667% !important;
+}
+
+.d-size-70p {
+  inline-size: 70% !important;
+  block-size: 70% !important;
+}
+
+.d-size-75p {
+  inline-size: 75% !important;
+  block-size: 75% !important;
+}
+
+.d-size-80p {
+  inline-size: 80% !important;
+  block-size: 80% !important;
+}
+
+.d-size-85p {
+  inline-size: 85% !important;
+  block-size: 85% !important;
+}
+
+.d-size-90p {
+  inline-size: 90% !important;
+  block-size: 90% !important;
+}
+
+.d-size-100p {
+  inline-size: 100% !important;
+  block-size: 100% !important;
+}
 }

package/lib/build/less/utilities/spacing.less

@@ -25,47 +25,47 @@
 //  ----------------------------------------------------------------------------
 @layer dialtone.utilities {
 .d-stack0   { > * + * { margin-block-start: 0 !important; } }
-.d-stack1   { > * + * { margin-block-start: var(--dt-size-100) !important; } }
-.d-stack2   { > * + * { margin-block-start: var(--dt-size-200) !important; } }
-.d-stack4   { > * + * { margin-block-start: var(--dt-size-300) !important; } }
-.d-stack6   { > * + * { margin-block-start: var(--dt-size-350) !important; } }
-.d-stack8   { > * + * { margin-block-start: var(--dt-size-400) !important; } }
-.d-stack12  { > * + * { margin-block-start: var(--dt-size-450) !important; } }
-.d-stack16  { > * + * { margin-block-start: var(--dt-size-500) !important; } }
-.d-stack20  { > * + * { margin-block-start: var(--dt-size-525) !important; } }
-.d-stack24  { > * + * { margin-block-start: var(--dt-size-550) !important; } }
-.d-stack32  { > * + * { margin-block-start: var(--dt-size-600) !important; } }
-.d-stack48  { > * + * { margin-block-start: var(--dt-size-650) !important; } }
-.d-stack64  { > * + * { margin-block-start: var(--dt-size-700) !important; } }
-.d-stack72  { > * + * { margin-block-start: var(--dt-size-720) !important; } }
-.d-stack84  { > * + * { margin-block-start: var(--dt-size-730) !important; } }
-.d-stack96  { > * + * { margin-block-start: var(--dt-size-750) !important; } }
-.d-stack102 { > * + * { margin-block-start: var(--dt-size-760) !important; } }
-.d-stack114 { > * + * { margin-block-start: var(--dt-size-775) !important; } }
-.d-stack128 { > * + * { margin-block-start: var(--dt-size-800) !important; } }
+.d-stack1   { > * + * { margin-block-start: var(--dt-spacing-1) !important; } }
+.d-stack2   { > * + * { margin-block-start: var(--dt-spacing-25) !important; } }
+.d-stack4   { > * + * { margin-block-start: var(--dt-spacing-50) !important; } }
+.d-stack6   { > * + * { margin-block-start: var(--dt-spacing-75) !important; } }
+.d-stack8   { > * + * { margin-block-start: var(--dt-spacing-100) !important; } }
+.d-stack12  { > * + * { margin-block-start: var(--dt-spacing-150) !important; } }
+.d-stack16  { > * + * { margin-block-start: var(--dt-spacing-200) !important; } }
+.d-stack20  { > * + * { margin-block-start: var(--dt-spacing-250) !important; } }
+.d-stack24  { > * + * { margin-block-start: var(--dt-spacing-300) !important; } }
+.d-stack32  { > * + * { margin-block-start: var(--dt-spacing-400) !important; } }
+.d-stack48  { > * + * { margin-block-start: var(--dt-spacing-600) !important; } }
+.d-stack64  { > * + * { margin-block-start: var(--dt-spacing-800) !important; } }
+.d-stack72  { > * + * { margin-block-start: calc(var(--dt-spacing-100) * 9) !important; } }
+.d-stack84  { > * + * { margin-block-start: calc(var(--dt-spacing-100) * 10.5) !important; } }
+.d-stack96  { > * + * { margin-block-start: calc(var(--dt-spacing-100) * 12) !important; } }
+.d-stack102 { > * + * { margin-block-start: calc(var(--dt-spacing-100) * 12.75) !important; } }
+.d-stack114 { > * + * { margin-block-start: calc(var(--dt-spacing-100) * 14.25) !important; } }
+.d-stack128 { > * + * { margin-block-start: calc(var(--dt-spacing-100) * 16) !important; } }
 
 //  ============================================================================
 //  $$   HORIZONTALLY
 //  ----------------------------------------------------------------------------
 .d-flow0   { > * + * { margin-inline-start: 0 !important; } }
-.d-flow1   { > * + * { margin-inline-start: var(--dt-size-100) !important; } }
-.d-flow2   { > * + * { margin-inline-start: var(--dt-size-200) !important; } }
-.d-flow4   { > * + * { margin-inline-start: var(--dt-size-300) !important; } }
-.d-flow6   { > * + * { margin-inline-start: var(--dt-size-350) !important; } }
-.d-flow8   { > * + * { margin-inline-start: var(--dt-size-400) !important; } }
-.d-flow12  { > * + * { margin-inline-start: var(--dt-size-450) !important; } }
-.d-flow16  { > * + * { margin-inline-start: var(--dt-size-500) !important; } }
-.d-flow20  { > * + * { margin-inline-start: var(--dt-size-525) !important; } }
-.d-flow24  { > * + * { margin-inline-start: var(--dt-size-550) !important; } }
-.d-flow32  { > * + * { margin-inline-start: var(--dt-size-600) !important; } }
-.d-flow48  { > * + * { margin-inline-start: var(--dt-size-650) !important; } }
-.d-flow64  { > * + * { margin-inline-start: var(--dt-size-700) !important; } }
-.d-flow72  { > * + * { margin-inline-start: var(--dt-size-720) !important; } }
-.d-flow84  { > * + * { margin-inline-start: var(--dt-size-730) !important; } }
-.d-flow96  { > * + * { margin-inline-start: var(--dt-size-750) !important; } }
-.d-flow102 { > * + * { margin-inline-start: var(--dt-size-760) !important; } }
-.d-flow114 { > * + * { margin-inline-start: var(--dt-size-775) !important; } }
-.d-flow128 { > * + * { margin-inline-start: var(--dt-size-800) !important; } }
+.d-flow1   { > * + * { margin-inline-start: var(--dt-spacing-1) !important; } }
+.d-flow2   { > * + * { margin-inline-start: var(--dt-spacing-25) !important; } }
+.d-flow4   { > * + * { margin-inline-start: var(--dt-spacing-50) !important; } }
+.d-flow6   { > * + * { margin-inline-start: var(--dt-spacing-75) !important; } }
+.d-flow8   { > * + * { margin-inline-start: var(--dt-spacing-100) !important; } }
+.d-flow12  { > * + * { margin-inline-start: var(--dt-spacing-150) !important; } }
+.d-flow16  { > * + * { margin-inline-start: var(--dt-spacing-200) !important; } }
+.d-flow20  { > * + * { margin-inline-start: var(--dt-spacing-250) !important; } }
+.d-flow24  { > * + * { margin-inline-start: var(--dt-spacing-300) !important; } }
+.d-flow32  { > * + * { margin-inline-start: var(--dt-spacing-400) !important; } }
+.d-flow48  { > * + * { margin-inline-start: var(--dt-spacing-600) !important; } }
+.d-flow64  { > * + * { margin-inline-start: var(--dt-spacing-800) !important; } }
+.d-flow72  { > * + * { margin-inline-start: calc(var(--dt-spacing-100) * 9) !important; } }
+.d-flow84  { > * + * { margin-inline-start: calc(var(--dt-spacing-100) * 10.5) !important; } }
+.d-flow96  { > * + * { margin-inline-start: calc(var(--dt-spacing-100) * 12) !important; } }
+.d-flow102 { > * + * { margin-inline-start: calc(var(--dt-spacing-100) * 12.75) !important; } }
+.d-flow114 { > * + * { margin-inline-start: calc(var(--dt-spacing-100) * 14.25) !important; } }
+.d-flow128 { > * + * { margin-inline-start: calc(var(--dt-spacing-100) * 16) !important; } }
 
 //  ============================================================================
 //  $   MARGIN
@@ -73,17 +73,17 @@
 .d-m-auto { margin: auto !important; }
 .d-m-unset { margin: unset !important; }
 
-.d-mt-auto { margin-block-start: auto !important; }
-.d-mt-unset { margin-block-start: unset !important; }
+.d-mt-auto, .d-mbs-auto { margin-block-start: auto !important; }
+.d-mt-unset, .d-mbs-unset { margin-block-start: unset !important; }
 
-.d-mr-auto { margin-inline-end: auto !important; }
-.d-mr-unset { margin-inline-end: unset !important; }
+.d-mr-auto, .d-mie-auto { margin-inline-end: auto !important; }
+.d-mr-unset, .d-mie-unset { margin-inline-end: unset !important; }
 
-.d-mb-auto { margin-block-end: auto !important; }
-.d-mb-unset { margin-block-end: unset !important; }
+.d-mb-auto, .d-mbe-auto { margin-block-end: auto !important; }
+.d-mb-unset, .d-mbe-unset { margin-block-end: unset !important; }
 
-.d-ml-auto { margin-inline-start: auto !important; }
-.d-ml-unset { margin-inline-start: unset !important; }
+.d-ml-auto, .d-mis-auto { margin-inline-start: auto !important; }
+.d-ml-unset, .d-mis-unset { margin-inline-start: unset !important; }
 
 .d-mx-auto {
   margin-inline: auto !important;
@@ -96,7 +96,7 @@
 
 .d-my-auto {
   margin-block: auto !important;
- }
+}
 
 .d-my-unset {
   margin-block-start: unset !important;
@@ -109,13 +109,13 @@
 //  ----------------------------------------------------------------------------
 .d-p-unset { padding: unset !important; }
 
-.d-pt-unset { padding-block-start: unset !important; }
+.d-pt-unset, .d-pbs-unset { padding-block-start: unset !important; }
 
-.d-pr-unset { padding-inline-end: unset !important; }
+.d-pr-unset, .d-pie-unset { padding-inline-end: unset !important; }
 
-.d-pb-unset { padding-block-end: unset !important; }
+.d-pb-unset, .d-pbe-unset { padding-block-end: unset !important; }
 
-.d-pl-unset { padding-inline-start: unset !important; }
+.d-pl-unset, .d-pis-unset { padding-inline-start: unset !important; }
 
 .d-px-unset {
   padding-inline-end: unset !important;

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

@@ -368,13 +368,13 @@ ul {
 
 .d-td-underline {
     text-decoration: underline !important;
-    text-underline-offset: var(--dt-size-200) !important;
+    text-underline-offset: var(--dt-spacing-25) !important;
     text-decoration-thickness: var(--dt-size-border-100) !important;
 }
 
 .d-td-dotted {
     text-decoration: underline dotted !important;
-    text-underline-offset: var(--dt-size-200) !important;
+    text-underline-offset: var(--dt-spacing-25) !important;
     text-decoration-thickness: var(--dt-size-border-100) !important;
 }
 

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

@@ -11,8 +11,8 @@
 //  ----------------------------------------------------------------------------
 
 #d-internal__input-and-select-xs() {
-    --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-padding-y: calc(calc(var(--dt-spacing-75) - var(--dt-spacing-1)) - var(--input-border-width));
+    --input-padding-x: calc(var(--dt-spacing-100) - var(--input-border-width));
     --input-border-radius: var(--dt-inputs-size-radius-xs);
     --input-typography: var(--dt-typography-inputs-xs);
 
@@ -25,8 +25,8 @@
 //  $$  SMALL
 //  ----------------------------------------------------------------------------
 #d-internal__input-and-select-sm() {
-    --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-padding-y: calc(var(--dt-spacing-75) - var(--input-border-width));
+    --input-padding-x: calc((var(--dt-layout-25) - var(--dt-spacing-50)) - var(--input-border-width));
     --input-typography: var(--dt-typography-inputs-sm);
     --input-border-radius: var(--dt-inputs-size-radius-sm);
 
@@ -39,8 +39,8 @@
 //  $$  LARGE
 //  ----------------------------------------------------------------------------
 #d-internal__input-and-select-lg() {
-    --input-padding-y: calc((var(--dt-size-400) + var(--dt-size-200)) - var(--input-border-width));
-    --input-padding-x: calc(var(--dt-size-500) - var(--input-border-width));
+    --input-padding-y: calc((var(--dt-spacing-100) + var(--dt-spacing-25)) - var(--input-border-width));
+    --input-padding-x: calc(var(--dt-layout-25) - var(--input-border-width));
     --input-border-radius: var(--dt-inputs-size-radius-lg);
     --input-typography: var(--dt-typography-inputs-lg);
 
@@ -53,8 +53,8 @@
 //  $$  EXTRA LARGE
 //  ----------------------------------------------------------------------------
 #d-internal__input-and-select-xl() {
-    --input-padding-y: calc((var(--dt-size-500) - var(--dt-size-300)) - var(--input-border-width));
-    --input-padding-x: calc(var(--dt-size-500) - var(--input-border-width));
+    --input-padding-y: calc((var(--dt-layout-25) - var(--dt-spacing-50)) - var(--input-border-width));
+    --input-padding-x: calc(var(--dt-layout-25) - var(--input-border-width));
     --input-border-radius: var(--dt-inputs-size-radius-xl);
     --input-typography: var(--dt-typography-inputs-xl);