@broxus/react-uikit 0.22.0 → 0.23.1

package/dist/assets/datepicker.css

@@ -0,0 +1,662 @@
+/* Picker
+ ========================================================================== */
+[class^=uk-datepicker],
+[class*=" uk-datepicker"],
+[class^=uk-datepicker]::before,
+[class*=" uk-datepicker"]::before,
+[class^=uk-datepicker]::after,
+[class*=" uk-datepicker"]::after {
+  box-sizing: border-box;
+}
+
+.uk-datepicker {
+  align-items: center;
+  background-color: var(--control-background);
+  border: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
+  border-radius: var(--control-border-radius);
+  color: var(--control-color);
+  cursor: text;
+  display: flex;
+  font-size: inherit;
+  padding-left: var(--control-padding-horizontal);
+  padding-right: var(--control-padding-horizontal);
+  position: relative;
+  transition: all var(--transition-duration);
+}
+
+/* Hover state (unused for disabled state) */
+.uk-datepicker:hover {
+  background-color: var(--control-hover-background);
+  border-color: var(--control-hover-border);
+  color: var(--control-hover-color);
+}
+
+/* Focus state (unused for disabled state) */
+.uk-datepicker:focus,
+.uk-datepicker:focus-within,
+.uk-datepicker-focused {
+  background-color: var(--control-focus-background);
+  border-color: var(--control-focus-border);
+  color: var(--control-focus-color);
+  outline: none;
+}
+
+/* Disabled state */
+.uk-datepicker-disabled {
+  background-color: var(--control-disabled-background);
+}
+
+.uk-datepicker-disabled .uk-control.uk-disabled {
+  background: none;
+}
+
+/* Control Input
+ ========================================================================== */
+.uk-datepicker .uk-datepicker-input {
+  align-items: center;
+  display: inline-flex;
+  position: relative;
+  width: 100%;
+}
+
+.uk-datepicker .uk-datepicker-input .uk-control {
+  border: 0 none;
+  flex: 1;
+  min-height: var(--datepicker-height);
+  min-width: 1px;
+  padding: 0;
+}
+
+/* Size modifier
+ ========================================================================== */
+/*
+ * Small
+ */
+.uk-datepicker-small {
+  font-size: var(--control-small-font-size);
+  padding: 0 var(--control-small-padding-horizontal);
+}
+
+.uk-datepicker-small .uk-datepicker-input .uk-control {
+  min-height: var(--datepicker-small-height);
+}
+
+/*
+ * Medium
+ */
+.uk-datepicker-medium {
+  font-size: var(--control-medium-font-size);
+  padding: 0 var(--control-medium-padding-horizontal);
+}
+
+.uk-datepicker-medium .uk-datepicker-input .uk-control {
+  min-height: var(--datepicker-medium-height);
+}
+
+/*
+ * Large
+ */
+.uk-datepicker-large {
+  font-size: var(--control-large-font-size);
+  padding: 0 var(--control-large-padding-horizontal);
+}
+
+.uk-datepicker-large .uk-datepicker-input .uk-control {
+  min-height: var(--datepicker-large-height);
+}
+
+/* Style modifier
+ ========================================================================== */
+/*
+ * Success
+ */
+.uk-datepicker-success,
+.uk-datepicker-success:hover,
+.uk-datepicker-success:focus-within {
+  border-color: var(--datepicker-success-border);
+  color: var(--datepicker-success-color);
+}
+
+/*
+ * Warning
+ */
+.uk-datepicker-warning,
+.uk-datepicker-warning:hover,
+.uk-datepicker-warning:focus-within {
+  border-color: var(--datepicker-warning-border);
+  color: var(--datepicker-warning-color);
+}
+
+/*
+ * Danger
+ */
+.uk-datepicker-danger,
+.uk-datepicker-danger:hover,
+.uk-datepicker-danger:focus-within {
+  border-color: var(--datepicker-danger-border);
+  color: var(--datepicker-danger-color);
+}
+
+/*
+ * Blank
+ */
+.uk-datepicker-blank,
+.uk-datepicker-blank:hover,
+.uk-datepicker-blank:focus-within {
+  background-color: transparent;
+  border-color: transparent;
+  border-style: var(--datepicker-blank-border-style);
+}
+
+.uk-datepicker-blank:focus-within {
+  border-color: var(--datepicker-blank-focus-border);
+}
+
+/* Panel
+ ========================================================================== */
+.uk-datepicker-panel-layout {
+  align-items: stretch;
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.uk-datepicker-panel {
+  border: 0 none;
+  border-radius: 0;
+  display: inline-flex;
+  flex-direction: column;
+  text-align: center;
+  vertical-align: top;
+}
+
+.uk-datepicker-datetime-panel {
+  display: flex;
+}
+
+.uk-datepicker-time-panel,
+.uk-datepicker-date-panel,
+.uk-datepicker-month-panel,
+.uk-datepicker-quarter-panel,
+.uk-datepicker-decade-panel,
+.uk-datepicker-week-panel,
+.uk-datepicker-year-panel {
+  display: flex;
+  flex-direction: column;
+  transition: opacity var(--transition-duration);
+  width: calc(var(--datepicker-cell-width) * 7 + var(--datepicker-body-padding-horizontal) * 2);
+}
+
+.uk-datepicker-time-panel {
+  min-width: auto;
+  width: auto;
+}
+
+.uk-datepicker-time-panel:not(:first-child) {
+  border-inline-start: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
+}
+
+/* Header */
+.uk-datepicker-header {
+  align-items: center;
+  border-bottom: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
+  color: var(--global-color);
+  display: flex;
+  padding-left: var(--datepicker-header-padding-horizontal);
+  padding-right: var(--datepicker-header-padding-horizontal);
+}
+
+.uk-datepicker-header-view {
+  display: inline-flex;
+  flex: auto;
+  font-size: var(--datepicker-header-font-size);
+  font-weight: var(--datepicker-header-font-weight);
+  justify-content: center;
+  line-height: var(--datepicker-header-height);
+}
+
+/* Body and content */
+.uk-datepicker-body {
+  padding: var(--datepicker-body-padding-vertical) var(--datepicker-body-padding-horizontal);
+}
+
+.uk-datepicker-content {
+  border-collapse: collapse;
+  table-layout: fixed;
+  text-align: center;
+  width: 100%;
+}
+
+.uk-datepicker-header button {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  color: var(--datepicker-header-button-color);
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  font-size: var(--datepicker-header-button-font-size);
+  font-weight: var(--datepicker-header-button-font-weight);
+  height: var(--datepicker-header-button-line-height);
+  justify-content: center;
+  line-height: var(--datepicker-header-button-line-height);
+  min-width: 1.6em;
+  padding: 0 var(--datepicker-header-button-padding-horizontal);
+  text-align: center;
+  transition: color var(--transition-medium-fast-duration);
+}
+
+.uk-datepicker-header-view button {
+  color: inherit;
+}
+
+.uk-datepicker-header-view button:hover {
+  color: var(--datepicker-header-view-button-hover-color);
+}
+
+.uk-datepicker-header > button:hover {
+  color: var(--datepicker-header-button-hover-color);
+}
+
+.uk-datepicker-prev-icon,
+.uk-datepicker-next-icon,
+.uk-datepicker-super-prev-icon,
+.uk-datepicker-super-next-icon {
+  color: inherit;
+  display: block;
+  height: 7px;
+  position: relative;
+  width: 7px;
+}
+
+.uk-datepicker-next-icon,
+.uk-datepicker-super-next-icon {
+  transform: rotate(135deg);
+}
+
+.uk-datepicker-prev-icon,
+.uk-datepicker-super-prev-icon {
+  transform: rotate(-45deg);
+}
+
+.uk-datepicker-prev-icon::before,
+.uk-datepicker-next-icon::before,
+.uk-datepicker-super-prev-icon::before,
+.uk-datepicker-super-next-icon::before {
+  border: 0 solid currentColor;
+  border-block-width: 1.5px 0;
+  border-inline-width: 1.5px 0;
+  content: "";
+  height: 7px;
+  inset-inline-start: 0;
+  position: absolute;
+  top: 0;
+  width: 7px;
+}
+
+.uk-datepicker-super-prev-icon::after,
+.uk-datepicker-super-next-icon::after {
+  border: 0 solid currentColor;
+  border-block-width: 1.5px 0;
+  border-inline-width: 1.5px 0;
+  content: "";
+  display: inline-block;
+  height: 7px;
+  inset-inline-start: 4px;
+  position: absolute;
+  top: 4px;
+  width: 7px;
+}
+
+.uk-datepicker-content th {
+  box-sizing: border-box;
+  height: var(--datepicker-cell-height);
+  padding: 0;
+}
+
+/* Footer */
+.uk-datepicker-footer {
+  border-top: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
+  padding: var(--datepicker-footer-padding-vertical) var(--datepicker-footer-padding-horizontal);
+}
+
+.uk-datepicker-ranges {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  list-style: none;
+  margin-block: 0;
+  overflow: hidden;
+  padding-inline: var(--datepicker-footer-ranges-padding-vertical) var(--datepicker-footer-ranges-padding-horizontal);
+  text-align: start;
+}
+
+.uk-datepicker-ranges li {
+  display: inline-block;
+}
+
+/* Calendar
+ ========================================================================== */
+.uk-datepicker-cell {
+  color: var(--datepicker-cell-disabled-color);
+  cursor: pointer;
+  font-weight: normal;
+  min-width: var(--datepicker-cell-height);
+  padding: var(--datepicker-cell-padding) calc(var(--datepicker-cell-padding) / 2);
+  position: relative;
+  transition: background var(--transition-medium-fast-duration);
+}
+
+.uk-datepicker-cell::before {
+  content: "";
+  height: var(--datepicker-cell-height);
+  inset-inline: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+
+.uk-datepicker-cell-in-view {
+  color: var(--datepicker-cell-color);
+}
+
+.uk-datepicker-cell-inner {
+  border-radius: var(--datepicker-cell-border-radius);
+  display: inline-block;
+  height: var(--datepicker-cell-height);
+  line-height: var(--datepicker-cell-height);
+  min-width: var(--datepicker-cell-height);
+  position: relative;
+  z-index: 2;
+}
+
+/* Hover cell state */
+.uk-datepicker-cell:hover:not(.uk-datepicker-cell-in-view, .uk-datepicker-cell-disabled) .uk-datepicker-cell-inner,
+.uk-datepicker-cell:hover:not(.uk-datepicker-cell-selected,
+.uk-datepicker-cell-range-start,
+.uk-datepicker-cell-range-end,
+.uk-datepicker-cell-disabled) .uk-datepicker-cell-inner {
+  background-color: var(--datepicker-cell-hover-background);
+}
+
+.uk-datepicker-cell-in-view.uk-datepicker-cell-selected:not(.uk-datepicker-cell-disabled) .uk-datepicker-cell-inner,
+.uk-datepicker-cell-in-view.uk-datepicker-cell-range-start:not(.uk-datepicker-cell-disabled) .uk-datepicker-cell-inner,
+.uk-datepicker-cell-in-view.uk-datepicker-cell-range-end:not(.uk-datepicker-cell-disabled) .uk-datepicker-cell-inner {
+  background-color: var(--datepicker-cell-active-background);
+  color: var(--datepicker-cell-active-color);
+}
+
+/* Disabled cell state */
+.uk-datepicker-cell-disabled:not(.uk-datepicker-cell-selected) {
+  color: var(--datepicker-cell-disabled-color);
+  cursor: not-allowed;
+}
+
+.uk-datepicker-cell-disabled::before {
+  background: var(--datepicker-cell-disabled-background);
+}
+
+.uk-datepicker-cell-disabled .uk-datepicker-cell-inner {
+  background: none;
+}
+
+/* Today */
+.uk-datepicker-cell-in-view.uk-datepicker-cell-today .uk-datepicker-cell-inner::before {
+  border: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
+  border-radius: var(--datepicker-cell-border-radius);
+  bottom: 0;
+  content: "";
+  inset-inline: 0;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+}
+
+.uk-datepicker-cell-disabled.uk-datepicker-cell-today .uk-datepicker-cell-inner::before {
+  border-color: var(--datepicker-cell-disabled-border);
+}
+
+.uk-datepicker-week-panel-row-range-start td.uk-datepicker-cell .uk-datepicker-cell-inner,
+.uk-datepicker-week-panel-row-range-end td.uk-datepicker-cell .uk-datepicker-cell-inner,
+.uk-datepicker-week-panel-row-hover td.uk-datepicker-cell .uk-datepicker-cell-inner {
+  color: var(--datepicker-cell-week-hover-color);
+}
+
+.uk-datepicker-week-panel-row-range-start td.uk-datepicker-cell::before,
+.uk-datepicker-week-panel-row-range-end td.uk-datepicker-cell::before,
+.uk-datepicker-week-panel-row-hover td.uk-datepicker-cell::before {
+  background-color: var(--datepicker-cell-week-hover-background);
+}
+
+.uk-datepicker-week-panel-row-selected td.uk-datepicker-cell .uk-datepicker-cell-inner {
+  color: var(--datepicker-cell-week-active-color);
+}
+
+.uk-datepicker-week-panel-row-selected td.uk-datepicker-cell::before {
+  background-color: var(--datepicker-cell-week-active-background);
+}
+
+.uk-datepicker-week-panel-row td:first-child::before {
+  border-bottom-left-radius: var(--datepicker-cell-border-radius);
+  border-top-left-radius: var(--datepicker-cell-border-radius);
+}
+
+.uk-datepicker-week-panel-row td:last-child::before {
+  border-bottom-right-radius: var(--datepicker-cell-border-radius);
+  border-top-right-radius: var(--datepicker-cell-border-radius);
+}
+
+.uk-datepicker-year-panel .uk-datepicker-cell-inner,
+.uk-datepicker-quarter-panel .uk-datepicker-cell-inner,
+.uk-datepicker-month-panel .uk-datepicker-cell-inner {
+  width: calc(var(--datepicker-cell-width) * 1.5);
+}
+
+.uk-datepicker-decade-panel .uk-datepicker-cell-inner,
+.uk-datepicker-year-panel .uk-datepicker-cell-inner,
+.uk-datepicker-quarter-panel .uk-datepicker-cell-inner,
+.uk-datepicker-month-panel .uk-datepicker-cell-inner {
+  padding: 0 calc(var(--datepicker-cell-padding) * 2);
+}
+
+/* Time panel */
+.uk-datepicker-time-panel .uk-datepicker-content {
+  display: flex;
+  flex: auto;
+  height: var(--datepicker-time-column-height);
+}
+
+.uk-datepicker-time-panel-column {
+  flex: 1 0 auto;
+  margin: var(--global-xsmall-margin) 0;
+  overflow: hidden;
+  padding: 0;
+  scrollbar-color: var(--global-scroll-background, var(--global-muted-background, rgba(0, 0, 0, 0.15))) transparent;
+  scrollbar-width: thin;
+  text-align: start;
+  transition: background var(--transition-medium-fast-duration);
+  width: var(--datepicker-time-column-width);
+}
+
+.uk-datepicker-time-panel-column:hover {
+  overflow-y: auto;
+}
+
+.uk-datepicker-time-panel-column ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Time
+ ========================================================================== */
+.uk-datepicker-time-panel-column .uk-datepicker-time-panel-cell {
+  margin-inline: var(--global-xsmall-margin);
+}
+
+.uk-datepicker-time-panel-column .uk-datepicker-time-panel-cell-inner {
+  border-radius: var(--global-small-border-radius);
+  color: var(--datepicker-cell-color);
+  cursor: pointer;
+  display: block;
+  height: var(--datepicker-time-cell-height);
+  line-height: var(--datepicker-time-cell-height);
+  margin: 0;
+  padding-block: 0;
+  padding-inline: calc((var(--datepicker-time-column-width) - var(--datepicker-time-cell-height)) / 2) 0;
+  transition: background var(--transition-medium-fast-duration);
+  width: calc(var(--datepicker-time-column-width) - var(--global-xsmall-margin) * 2);
+}
+
+.uk-datepicker-time-panel-cell-inner:hover {
+  background-color: var(--datepicker-cell-hover-background);
+}
+
+.uk-datepicker-time-panel-cell-selected .uk-datepicker-time-panel-cell-inner {
+  background-color: var(--datepicker-cell-active-background);
+  color: var(--datepicker-cell-active-color);
+}
+
+.uk-datepicker-time-panel-cell-disabled:not(.uk-datepicker-time-panel-cell-selected) .uk-datepicker-time-panel-cell-inner {
+  color: var(--datepicker-cell-disabled-color);
+  cursor: not-allowed;
+}
+
+/* Icons
+ ========================================================================== */
+.uk-datepicker .uk-datepicker-suffix {
+  --icon-size: 1em;
+  align-self: center;
+  color: var(--datepicker-suffix-color);
+  display: flex;
+  flex: none;
+  font-size: 1em;
+  line-height: 0;
+  margin-inline-start: calc(var(--datepicker-suffix-padding-horizontal) / 2);
+  pointer-events: none;
+  transition: opacity var(--transition-medium-fast-duration), color var(--transition-medium-fast-duration);
+}
+
+.uk-datepicker:hover .uk-datepicker-suffix:not(:last-child) {
+  opacity: 0;
+}
+
+.uk-datepicker .uk-datepicker-clear {
+  --icon-size: 1em;
+  color: var(--datepicker-clear-color);
+  cursor: pointer;
+  font-size: 1em;
+  inset-inline-end: 0;
+  line-height: 0;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: opacity var(--transition-medium-fast-duration), color var(--transition-medium-fast-duration);
+}
+
+.uk-datepicker:hover .uk-datepicker-clear {
+  opacity: 1;
+}
+
+/* Dropdown
+ ========================================================================== */
+.uk-datepicker-dropdown {
+  background-color: var(--datepicker-dropdown-background);
+  border: var(--datepicker-dropdown-border-width) var(--datepicker-dropdown-border-style) var(--datepicker-dropdown-border);
+  font-variant: initial;
+  left: -9999px;
+  max-width: fit-content;
+  outline: none;
+  overflow: hidden;
+  padding: var(--datepicker-gutter);
+  position: absolute;
+  top: -9999px;
+  z-index: calc(var(--global-z-index) + 30);
+}
+
+.uk-datepicker-dropdown-placement-bottom-left.uk-slide-up-enter.uk-slide-up-enter-active,
+.uk-datepicker-dropdown-placement-bottom-left.uk-slide-up-appear.uk-slide-up-appear-active {
+  animation-name: uk-slide-up-in;
+}
+
+.uk-datepicker-dropdown-placement-top-left.uk-slide-up-enter.uk-slide-up-enter-active,
+.uk-datepicker-dropdown-placement-top-left.uk-slide-up-appear.uk-slide-up-appear-active {
+  animation-name: uk-slide-down-in;
+}
+
+.uk-datepicker-dropdown-placement-bottom-left .uk-slide-up-leave.uk-slide-up-leave-active {
+  animation-name: uk-slide-up-out;
+}
+
+.uk-datepicker-dropdown-placement-top-left.uk-slide-up-leave.uk-slide-up-leave-active {
+  animation-name: uk-slide-down-out;
+}
+
+.uk-datepicker-dropdown-hidden {
+  display: none;
+}
+
+:root {
+  --datepicker-border: var(--control-border);
+  --datepicker-border-style: var(--control-border-style);
+  --datepicker-border-width: var(--control-border-width);
+  --datepicker-gutter: var(--global-small-gutter);
+  --datepicker-height: 38px;
+  --datepicker-small-height: 28px;
+  --datepicker-medium-height: 48px;
+  --datepicker-large-height: 58px;
+  --datepicker-success-border: var(--control-success-border);
+  --datepicker-success-color: var(--control-success-color);
+  --datepicker-warning-border: var(--control-warning-border);
+  --datepicker-warning-color: var(--control-warning-color);
+  --datepicker-danger-border: var(--control-danger-border);
+  --datepicker-danger-color: var(--control-danger-color);
+  --datepicker-blank-border-style: var(--control-blank-border-style);
+  --datepicker-blank-focus-border: var(--control-blank-focus-border);
+  --datepicker-header-padding-horizontal: var(--global-small-gutter);
+  --datepicker-header-font-size: var(--global-font-size);
+  --datepicker-header-font-weight: var(--global-bold-font-weight);
+  --datepicker-header-height: var(--global-control-large-height);
+  --datepicker-body-padding-horizontal: var(--global-gutter);
+  --datepicker-body-padding-vertical: var(--global-small-gutter);
+  --datepicker-header-button-color: var(--global-muted-color);
+  --datepicker-header-button-font-size: var(--global-font-size);
+  --datepicker-header-button-font-weight: var(--global-bold-font-weight);
+  --datepicker-header-button-line-height: var(--global-control-large-height);
+  --datepicker-header-button-padding-horizontal: var(--global-small-gutter);
+  --datepicker-header-button-hover-color: var(--global-color);
+  --datepicker-header-view-button-hover-color: var(--global-primary-color);
+  --datepicker-footer-padding-horizontal: var(--global-small-gutter);
+  --datepicker-footer-padding-vertical: var(--global-small-gutter);
+  --datepicker-footer-ranges-padding-horizontal: var(--global-small-gutter);
+  --datepicker-footer-ranges-padding-vertical: var(--global-small-gutter);
+  --datepicker-cell-border-radius: var(--global-small-border-radius);
+  --datepicker-cell-height: var(--global-control-height);
+  --datepicker-cell-width: 42px;
+  --datepicker-cell-padding: var(--global-xsmall-gutter);
+  --datepicker-cell-color: var(--global-color);
+  --datepicker-cell-hover-background: var(--global-secondary-background);
+  --datepicker-cell-active-background: var(--global-primary-background);
+  --datepicker-cell-active-color: var(--global-inverse-color);
+  --datepicker-cell-disabled-background: var(--global-muted-background);
+  --datepicker-cell-disabled-border: var(--global-muted-border);
+  --datepicker-cell-disabled-color: var(--global-muted-color);
+  --datepicker-cell-week-hover-background: var(--global-secondary-background);
+  --datepicker-cell-week-hover-color: var(--global-color);
+  --datepicker-cell-week-active-background: var(--global-primary-background);
+  --datepicker-cell-week-active-color: var(--global-inverse-color);
+  --datepicker-time-column-height: 252px;
+  --datepicker-time-column-width: 60px;
+  --datepicker-time-cell-height: 28px;
+  --datepicker-suffix-color: var(--global-muted-color);
+  --datepicker-suffix-padding-horizontal: var(--global-small-gutter);
+  --datepicker-clear-color: var(--global-color);
+  --datepicker-dropdown-background: var(--global-muted-background);
+  --datepicker-dropdown-border: var(--global-border);
+  --datepicker-dropdown-border-style: var(--global-border-style);
+  --datepicker-dropdown-border-width: var(--global-border-width);
+}

package/dist/assets/description-list.css

@@ -0,0 +1,39 @@
+/* ========================================================================
+   Component: Description list
+ ========================================================================== */
+/*
+ * Term
+ */
+.uk-description-list > dt {
+  color: var(--description-list-term-color);
+}
+
+.uk-description-list > dt:nth-child(n+2) {
+  margin-top: var(--description-list-term-margin-top);
+}
+
+/*
+ * Description
+ */
+/* Style modifier
+ ========================================================================== */
+/*
+ * Line
+ */
+.uk-description-list-divider > dt:nth-child(n+2) {
+  border-top: var(--description-list-divider-term-border-width) solid var(--description-list-divider-term-border);
+  margin-top: var(--description-list-divider-term-margin-top);
+  padding-top: var(--description-list-divider-term-margin-top);
+}
+
+:root {
+  --description-list-term-color: var(--global-emphasis-color);
+  --description-list-term-margin-top: var(--global-margin);
+  --description-list-term-font-size: var(--global-small-font-size);
+  --description-list-term-font-weight: 500;
+  --description-list-term-text-transform: uppercase;
+  --description-list-divider-term-margin-top: var(--global-margin);
+  --description-list-divider-term-border-width: var(--global-border-width);
+  --description-list-divider-term-border: var(--global-border);
+  --inverse-description-list-term-color: var(--inverse-global-emphasis-color);
+}