diff --git a/apps/dialtone-documentation/docs/components/button.md b/apps/dialtone-documentation/docs/components/button.md
index fdbe7dede2..01846a2a3a 100644
--- a/apps/dialtone-documentation/docs/components/button.md
+++ b/apps/dialtone-documentation/docs/components/button.md
@@ -370,7 +370,7 @@ The base button font size is 16px and should be used in most cases. Every button
```
-### Loading
+## Loading
Loading buttons are useful for communicating a delay between the button interaction and its action taking place. Every button style can accept the loading button class, though we only provide a few possible examples.
diff --git a/packages/dialtone/lib/build/less/components/datepicker.less b/packages/dialtone/lib/build/less/components/datepicker.less
index 9ed08cd043..f1446fb185 100644
--- a/packages/dialtone/lib/build/less/components/datepicker.less
+++ b/packages/dialtone/lib/build/less/components/datepicker.less
@@ -11,38 +11,86 @@
// $ BASE STYLE
// ----------------------------------------------------------------------------
.d-datepicker {
- width: calc(var(--dt-size-925) - var(--dt-size-550));
- padding: var(--dt-size-500);
+ --datepicker-width: calc(var(--dt-size-300) * 75); // A bit of a magic number as default fixed size, may use CSS utilities to override
+ --datepicker-day-size: calc(var(--dt-size-600) - var(--dt-size-200)); // Emulates SM button since Vue component in lieu of Vue component using DT button
+
+ display: flex;
+ flex-direction: column;
+ gap: var(--dt-space-400);
+ width: var(--datepicker-width);
+ padding: var(--dt-space-500);
p {
display: flex;
- margin: 0;
- font-weight: 400;
- font-size: var(--dt-size-450);
- font-family: inherit;
- font-style: normal;
+ color: var(--dt-color-foreground-secondary);
+ font-size: var(--dt-font-size-100);
text-transform: uppercase;
}
&--body {
- padding: 0 var(--dt-size-400);
+ padding: 0;
+ }
+
+ // TODO: update VUE component to be use a raw