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 + &__month-year-picker { + display: flex; + gap: var(--dt-space-500); + align-items: center; + justify-content: space-between; + + > div { + display: flex; + gap: var(--dt-space-200); + } + + button { + // TODO: all of this should be replaced with the Vue DT button + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--datepicker-day-size); + height: var(--datepicker-day-size); + padding: 0; + color: var(--dt-action-color-foreground-base-default); + background-color: var(--dt-action-color-background-base-default); + border: none; + border-radius: var(--dt-size-radius-circle); + cursor: pointer; + + &:hover { + color: var(--dt-action-color-foreground-base-hover); + background-color: var(--dt-action-color-background-base-hover); + } + + &:active { + color: var(--dt-action-color-foreground-base-active); + background-color: var(--dt-action-color-background-base-active); + } + } + } + + &__calendar { + display: flex; + flex-direction: column; + gap: var(--dt-space-200); } &__week-day { display: flex; + align-items: center; justify-content: space-between; - margin-bottom: var(--dt-size-500); > div { display: flex; align-items: center; justify-content: center; - width: var(--dt-size-550); - height: var(--dt-size-550); + width: var(--datepicker-day-size); + height: var(--datepicker-day-size); p { margin: 0; - color: var(--dt-color-surface-strong); + color: var(--dt-color-foreground-tertiary); + font-weight: var(--dt-font-weight-medium); } } } @@ -51,53 +99,48 @@ display: flex; align-items: center; justify-content: space-between; - margin-bottom: var(--dt-size-400); } &__day { - width: var(--dt-size-550); - height: var(--dt-size-550); + // TODO: all of this should be replaced with the Vue DT button + width: var(--datepicker-day-size); + height: var(--datepicker-day-size); padding: 0; - font-size: var(--dt-size-450); + color: var(--dt-action-color-foreground-muted-default); + font-size: var(--dt-font-size-100); + font-variant-numeric: tabular-nums; + line-height: 1; background-color: transparent; border: none; - border-radius: calc(var(--dt-size-650) + var(--dt-size-200)); + border-radius: var(--dt-size-radius-circle); cursor: pointer; &--disabled { - color: var(--dt-color-surface-bold); + color: var(--dt-color-foreground-muted); + cursor: default; } &--selected { - color: var(--dt-color-foreground-primary); - background: var(--dt-color-purple-400); + color: var(--dt-color-neutral-white); + background: var(--dt-color-brand-purple); } - &:focus { - box-shadow: var(--dt-shadow-focus); + &:hover:not(.d-datepicker__day--selected, .d-datepicker__day--disabled) { + color: var(--dt-action-color-foreground-muted-hover); + background-color: var(--dt-action-color-background-muted-hover); } - } - &__month-year-picker { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - height: 100%; - margin-bottom: var(--dt-size-525); + &:active:not(.d-datepicker__day--selected, .d-datepicker__day--disabled) { + color: var(--dt-action-color-foreground-muted-active); + background-color: var(--dt-action-color-background-muted-active); + } - > div { - display: inline-flex; - } + &:focus-visible { + box-shadow: var(--dt-shadow-focus); + } - button { - display: inline-flex; - align-items: center; - padding: 0; - color: var(--dt-action-color-foreground-base-default); - background-color: transparent; - border: none; - cursor: pointer; + &:focus-visible:not(.d-datepicker__day--selected) { + background-color: var(--dt-color-surface-moderate); } } }