niuma-ui 1.0.0 → 1.0.2

package/src/components/RsTag.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRsI18n } from '../composables/useRsI18n'
+import type { RsComponentSize, RsRadius } from '../theme/types'
+import { rsRadiusCss, useResolvedRsRadius } from './resolve-radius'
+import { useResolvedRsComponentSize } from './resolve-size'
+import RsIcon from './RsIcon.vue'
+
+export type RsTagVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+
+const props = withDefaults(
+  defineProps<{
+    variant?: RsTagVariant
+    closable?: boolean
+    disabled?: boolean
+    /** 胶囊圆角快捷开关；等价于 radius="full" */
+    round?: boolean
+    size?: RsComponentSize
+    radius?: RsRadius
+  }>(),
+  {
+    variant: 'default',
+    closable: false,
+    disabled: false,
+    round: false,
+  },
+)
+
+const emit = defineEmits<{
+  close: [event: MouseEvent]
+}>()
+
+const { t } = useRsI18n()
+const resolvedSize = useResolvedRsComponentSize(() => props.size)
+const resolvedRadius = useResolvedRsRadius(
+  () => (props.round ? 'full' : props.radius),
+  'sm',
+)
+
+const rootClass = computed(() => [
+  'rs-tag',
+  `rs-tag--${props.variant}`,
+  `rs-tag--${resolvedSize.value}`,
+  {
+    'rs-tag--closable': props.closable,
+    'rs-tag--disabled': props.disabled,
+    'rs-tag--round': props.round || resolvedRadius.value === 'full',
+  },
+])
+
+const rootStyle = computed(() => ({
+  '--rs-tag-radius': rsRadiusCss(resolvedRadius.value),
+}))
+
+function onClose(event: MouseEvent): void {
+  if (props.disabled) return
+  event.stopPropagation()
+  emit('close', event)
+}
+</script>
+
+<template>
+  <span :class="rootClass" :style="rootStyle">
+    <span class="rs-tag__content">
+      <slot />
+    </span>
+    <button
+      v-if="closable"
+      type="button"
+      class="rs-tag__close"
+      :disabled="disabled"
+      :aria-label="t('tag.close')"
+      @click="onClose"
+    >
+      <RsIcon name="x" :size="12" />
+    </button>
+  </span>
+</template>
+
+<style scoped>
+.rs-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-space-xs);
+  max-width: 100%;
+  border-radius: var(--rs-tag-radius, var(--rs-radius-sm));
+  font-weight: var(--rs-tag-font-weight, 500);
+  line-height: var(--rs-line-height-tight);
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+
+.rs-tag--ssm {
+  padding: 0 var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
+}
+
+.rs-tag--sm {
+  padding: 0.0625rem var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
+}
+
+.rs-tag--md {
+  padding: 0.125rem var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
+}
+
+.rs-tag--lg {
+  padding: var(--rs-space-xs) var(--rs-space-sm);
+  font-size: var(--rs-font-size-sm);
+}
+
+.rs-tag--round {
+  border-radius: var(--rs-radius-full);
+}
+
+.rs-tag--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.rs-tag__content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rs-tag__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--rs-radius-full);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.75;
+  outline: none;
+}
+
+.rs-tag__close:hover:not(:disabled) {
+  opacity: 1;
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.rs-tag__close:focus-visible {
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+.rs-tag__close:disabled {
+  cursor: not-allowed;
+}
+
+.rs-tag--default {
+  background: var(--rs-surface-hover);
+  color: var(--rs-text);
+  border: 1px solid var(--rs-border);
+}
+
+.rs-tag--primary {
+  background: var(--rs-primary-container);
+  color: var(--rs-on-primary-container);
+  border: 1px solid color-mix(in srgb, var(--rs-primary) var(--rs-tag-border-alpha, 40%), transparent);
+}
+
+.rs-tag--success {
+  background: var(--rs-success-container);
+  color: var(--rs-on-success-container);
+  border: 1px solid color-mix(in srgb, var(--rs-success) var(--rs-tag-border-alpha, 40%), transparent);
+}
+
+.rs-tag--warning {
+  background: var(--rs-warning-container);
+  color: var(--rs-on-warning-container);
+  border: 1px solid color-mix(in srgb, var(--rs-warning) var(--rs-tag-border-alpha, 40%), transparent);
+}
+
+.rs-tag--danger {
+  background: var(--rs-danger-container);
+  color: var(--rs-on-danger-container);
+  border: 1px solid color-mix(in srgb, var(--rs-danger) var(--rs-tag-border-alpha, 40%), transparent);
+}
+
+.rs-tag--info {
+  background: var(--rs-info-container);
+  color: var(--rs-on-info-container);
+  border: 1px solid color-mix(in srgb, var(--rs-info) var(--rs-tag-border-alpha, 40%), transparent);
+}
+</style>

package/src/components/RsTerminal.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { FitAddon } from '@xterm/addon-fit'
-import type { ITheme } from 'xterm'
-import { Terminal } from 'xterm'
-import 'xterm/css/xterm.css'
+import type { ITheme } from '@xterm/xterm'
+import { Terminal } from '@xterm/xterm'
+import '@xterm/xterm/css/xterm.css'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRsI18n } from '../composables/useRsI18n'
 import {

package/src/components/RsTimePicker.vue

@@ -4,6 +4,8 @@ import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from './re
 import RsIcon from './RsIcon.vue'
 import RsTimePickerColumns from './RsTimePickerColumns.vue'
 import { useRsI18n } from '../composables/useRsI18n'
+import { RS_COMPONENT_SIZE_ICON_PX, type RsComponentSize } from '../theme/types'
+import { useResolvedRsComponentSize } from './resolve-size'
 import {
   EMPTY_TIME_RANGE,
   formatTimeFromParts,
@@ -16,6 +18,7 @@ import {
   pickEarlierTime,
   pickLaterTime,
   type RsTimeRangeValue,
+  type RsTimeUnit,
 } from './time-picker-utils'
 
 defineOptions({ name: 'RsTimePicker' })
@@ -43,6 +46,7 @@ const props = withDefaults(
     maxTime?: string
     embedded?: boolean
     labelPosition?: RsTimePickerLabelPosition
+    size?: RsComponentSize
   }>(),
   {
     disabled: false,
@@ -56,6 +60,8 @@ const props = withDefaults(
 
 const fieldId = useId()
 const { t } = useRsI18n()
+const resolvedSize = useResolvedRsComponentSize(() => props.size)
+const triggerIconSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value])
 const columnsRef = useTemplateRef<InstanceType<typeof RsTimePickerColumns>>('columnsRef')
 
 const draftHour = ref(0)
@@ -171,7 +177,7 @@ function syncDraftFromModel(): void {
   syncSingleDraft()
 }
 
-function isUnitDisabled(unit: 'hour' | 'minute' | 'second', value: number): boolean {
+function isUnitDisabled(unit: RsTimeUnit, value: number): boolean {
   const hour = unit === 'hour' ? value : draftHour.value
   const minute = unit === 'minute' ? value : draftMinute.value
   const second = unit === 'second' ? value : draftSecond.value
@@ -275,6 +281,7 @@ watch(open, async (isOpen) => {
   <div
     :class="[
       embedded ? 'rs-time-picker-embedded' : 'rs-field',
+      `rs-time-picker--${resolvedSize}`,
       !embedded && `rs-field--label-${labelPosition}`,
     ]"
   >
@@ -297,10 +304,15 @@ watch(open, async (isOpen) => {
           :disabled="disabled"
         >
           <span class="rs-time-picker__leading">
-            <RsIcon v-if="!embedded" name="clock" :size="16" class="rs-time-picker__icon" />
+            <RsIcon
+              v-if="!embedded"
+              name="clock"
+              :size="triggerIconSize"
+              class="rs-time-picker__icon"
+            />
             <span class="rs-time-picker__value">{{ displayValue }}</span>
           </span>
-          <RsIcon name="chevron-down" :size="16" class="rs-time-picker__chevron" />
+          <RsIcon name="chevron-down" :size="triggerIconSize" class="rs-time-picker__chevron" />
         </PopoverTrigger>
 
         <PopoverPortal>
@@ -321,6 +333,7 @@ watch(open, async (isOpen) => {
                     <RsTimePicker
                       v-model="draftStartTime"
                       embedded
+                      :size="resolvedSize"
                       :with-seconds="withSeconds"
                       :min-time="minTime"
                       :max-time="startMaxTime"
@@ -333,6 +346,7 @@ watch(open, async (isOpen) => {
                     <RsTimePicker
                       v-model="draftEndTime"
                       embedded
+                      :size="resolvedSize"
                       :with-seconds="withSeconds"
                       :min-time="endMinTime"
                       :max-time="maxTime"
@@ -347,6 +361,7 @@ watch(open, async (isOpen) => {
                   ref="columnsRef"
                   v-model="draftTime"
                   :second="withSeconds"
+                  :size="resolvedSize"
                   :disabled="disabled"
                   :is-unit-disabled="isUnitDisabled"
                 />
@@ -392,7 +407,9 @@ watch(open, async (isOpen) => {
   align-items: center;
   justify-content: space-between;
   gap: var(--rs-space-sm);
+  box-sizing: border-box;
   width: 100%;
+  height: var(--rs-control-height-md);
   min-height: var(--rs-control-height-md);
   padding: 0 var(--rs-space-md);
   border: 1px solid var(--rs-input-border, var(--rs-border));
@@ -401,6 +418,7 @@ watch(open, async (isOpen) => {
   color: var(--rs-text);
   font: inherit;
   font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
   text-align: left;
   cursor: pointer;
   box-shadow: var(--rs-input-shadow, none);
@@ -409,13 +427,34 @@ watch(open, async (isOpen) => {
     box-shadow var(--rs-transition-fast),
     background var(--rs-transition-fast);
 }
-.rs-time-picker__trigger--embedded {
+.rs-time-picker--ssm .rs-time-picker__trigger {
+  height: var(--rs-control-height-ssm);
+  min-height: var(--rs-control-height-ssm);
+  padding: 0 var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-time-picker--sm .rs-time-picker__trigger {
+  height: var(--rs-control-height-sm);
   min-height: var(--rs-control-height-sm);
-  min-width: 5.5rem;
   padding: 0 var(--rs-space-sm);
   font-size: var(--rs-font-size-xs);
+}
+.rs-time-picker--lg .rs-time-picker__trigger {
+  height: var(--rs-control-height-lg);
+  min-height: var(--rs-control-height-lg);
+  padding: 0 var(--rs-space-lg);
+  font-size: var(--rs-font-size-base);
+}
+.rs-time-picker__trigger--embedded {
+  min-width: 5.5rem;
   background: color-mix(in srgb, var(--rs-surface) 72%, transparent);
 }
+.rs-time-picker--ssm .rs-time-picker__trigger--embedded {
+  min-width: 4.75rem;
+}
+.rs-time-picker--lg .rs-time-picker__trigger--embedded {
+  min-width: 6.25rem;
+}
 .rs-time-picker__trigger:hover:not(:disabled) {
   border-color: var(--rs-input-border-hover, var(--rs-border));
 }

package/src/components/RsTimePickerColumns.vue

@@ -1,12 +1,21 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, useTemplateRef, watch } from 'vue'
 import { useRsI18n } from '../composables/useRsI18n'
+import type { RsComponentSize } from '../theme/types'
+import { useResolvedRsComponentSize } from './resolve-size'
 import {
+  formatTimeFromParts,
+  getTimeMinuteOptions,
   parseTimeValue,
-  rangeInclusive,
   scheduleAfterPaint,
+  scrollTimeColumnToValue,
+  TIME_HOUR_OPTIONS,
+  TIME_SECOND_OPTIONS,
+  type RsTimeUnit,
 } from './time-picker-utils'
 
+defineOptions({ name: 'RsTimePickerColumns' })
+
 const model = defineModel<string>({ default: '00:00' })
 
 const props = withDefaults(
@@ -14,7 +23,8 @@ const props = withDefaults(
     minuteStep?: number
     second?: boolean
     disabled?: boolean
-    isUnitDisabled?: (unit: 'hour' | 'minute' | 'second', value: number) => boolean
+    size?: RsComponentSize
+    isUnitDisabled?: (unit: RsTimeUnit, value: number) => boolean
   }>(),
   {
     minuteStep: 1,
@@ -24,6 +34,7 @@ const props = withDefaults(
 )
 
 const { t } = useRsI18n()
+const resolvedSize = useResolvedRsComponentSize(() => props.size)
 
 const hourListRef = useTemplateRef<HTMLDivElement>('hourListRef')
 const minuteListRef = useTemplateRef<HTMLDivElement>('minuteListRef')
@@ -31,11 +42,9 @@ const secondListRef = useTemplateRef<HTMLDivElement>('secondListRef')
 
 let cancelScheduledScroll: (() => void) | undefined
 
-const hourOptions = computed(() => rangeInclusive(23))
-const minuteOptions = computed(() =>
-  rangeInclusive(59).filter((value) => value % props.minuteStep === 0),
-)
-const secondOptions = computed(() => rangeInclusive(59))
+const hourOptions = TIME_HOUR_OPTIONS
+const secondOptions = TIME_SECOND_OPTIONS
+const minuteOptions = computed(() => getTimeMinuteOptions(props.minuteStep))
 
 const parts = computed(() => {
   const parsed = parseTimeValue(model.value, props.second)
@@ -45,27 +54,19 @@ const parts = computed(() => {
   return { hour: 0, minute: 0, second: 0 }
 })
 
-function isDisabled(unit: 'hour' | 'minute' | 'second', value: number): boolean {
-  return props.isUnitDisabled?.(unit, value) ?? false
+function isDisabled(unit: RsTimeUnit, value: number): boolean {
+  return props.disabled || (props.isUnitDisabled?.(unit, value) ?? false)
 }
 
-function scrollColumn(
-  container: HTMLDivElement | null,
-  unit: 'hour' | 'minute' | 'second',
-  value: number,
-): void {
-  if (!container) return
-  const selected = container.querySelector<HTMLElement>(
-    `[data-unit="${unit}"][data-value="${value}"]`,
-  )
-  selected?.scrollIntoView({ block: 'center', behavior: 'auto' })
+function scrollColumn(container: HTMLDivElement | null, value: number): void {
+  scrollTimeColumnToValue(container, value)
 }
 
 function scrollToSelection(): void {
-  scrollColumn(hourListRef.value, 'hour', parts.value.hour)
-  scrollColumn(minuteListRef.value, 'minute', parts.value.minute)
+  scrollColumn(hourListRef.value, parts.value.hour)
+  scrollColumn(minuteListRef.value, parts.value.minute)
   if (props.second) {
-    scrollColumn(secondListRef.value, 'second', parts.value.second)
+    scrollColumn(secondListRef.value, parts.value.second)
   }
 }
 
@@ -74,12 +75,10 @@ function scrollToSelectionAfterPaint(): void {
   cancelScheduledScroll = scheduleAfterPaint(scrollToSelection)
 }
 
-function selectUnit(unit: 'hour' | 'minute' | 'second', value: number): void {
-  if (isDisabled(unit, value) || props.disabled) return
+function selectUnit(unit: RsTimeUnit, value: number): void {
+  if (isDisabled(unit, value)) return
   const next = { ...parts.value, [unit]: value }
-  model.value = props.second
-    ? `${String(next.hour).padStart(2, '0')}:${String(next.minute).padStart(2, '0')}:${String(next.second).padStart(2, '0')}`
-    : `${String(next.hour).padStart(2, '0')}:${String(next.minute).padStart(2, '0')}`
+  model.value = formatTimeFromParts(next.hour, next.minute, next.second, props.second)
 }
 
 watch(
@@ -101,65 +100,79 @@ onUnmounted(() => {
 defineExpose({
   scrollToSelection,
   scrollToSelectionAfterPaint,
+  resolvedSize,
 })
 </script>
 
 <template>
-  <div class="rs-time-columns" :class="{ 'rs-time-columns--seconds': second }">
+  <div
+    class="rs-time-columns"
+    :class="[
+      `rs-time-columns--${resolvedSize}`,
+      { 'rs-time-columns--seconds': second },
+    ]"
+  >
     <div class="rs-time-columns__column">
       <span class="rs-time-columns__label">{{ t('timePicker.hour') }}</span>
-      <div ref="hourListRef" class="rs-time-columns__list">
-        <button
-          v-for="option in hourOptions"
-          :key="option"
-          type="button"
-          class="rs-time-columns__item"
-          :class="{ 'rs-time-columns__item--active': parts.hour === option }"
-          data-unit="hour"
-          :data-value="option"
-          :disabled="disabled || isDisabled('hour', option)"
-          @click="selectUnit('hour', option)"
-        >
-          {{ String(option).padStart(2, '0') }}
-        </button>
+      <!-- shell：overflow:hidden 裁剪滚动条，避免盖住圆角 -->
+      <div class="rs-time-columns__list-shell">
+        <div ref="hourListRef" class="rs-time-columns__list">
+          <button
+            v-for="option in hourOptions"
+            :key="option.value"
+            type="button"
+            class="rs-time-columns__item"
+            :class="{ 'rs-time-columns__item--active': parts.hour === option.value }"
+            data-unit="hour"
+            :data-value="option.value"
+            :disabled="isDisabled('hour', option.value)"
+            @click="selectUnit('hour', option.value)"
+          >
+            {{ option.label }}
+          </button>
+        </div>
       </div>
     </div>
 
     <div class="rs-time-columns__column">
       <span class="rs-time-columns__label">{{ t('timePicker.minute') }}</span>
-      <div ref="minuteListRef" class="rs-time-columns__list">
-        <button
-          v-for="option in minuteOptions"
-          :key="option"
-          type="button"
-          class="rs-time-columns__item"
-          :class="{ 'rs-time-columns__item--active': parts.minute === option }"
-          data-unit="minute"
-          :data-value="option"
-          :disabled="disabled || isDisabled('minute', option)"
-          @click="selectUnit('minute', option)"
-        >
-          {{ String(option).padStart(2, '0') }}
-        </button>
+      <div class="rs-time-columns__list-shell">
+        <div ref="minuteListRef" class="rs-time-columns__list">
+          <button
+            v-for="option in minuteOptions"
+            :key="option.value"
+            type="button"
+            class="rs-time-columns__item"
+            :class="{ 'rs-time-columns__item--active': parts.minute === option.value }"
+            data-unit="minute"
+            :data-value="option.value"
+            :disabled="isDisabled('minute', option.value)"
+            @click="selectUnit('minute', option.value)"
+          >
+            {{ option.label }}
+          </button>
+        </div>
       </div>
     </div>
 
     <div v-if="second" class="rs-time-columns__column">
       <span class="rs-time-columns__label">{{ t('timePicker.second') }}</span>
-      <div ref="secondListRef" class="rs-time-columns__list">
-        <button
-          v-for="option in secondOptions"
-          :key="option"
-          type="button"
-          class="rs-time-columns__item"
-          :class="{ 'rs-time-columns__item--active': parts.second === option }"
-          data-unit="second"
-          :data-value="option"
-          :disabled="disabled || isDisabled('second', option)"
-          @click="selectUnit('second', option)"
-        >
-          {{ String(option).padStart(2, '0') }}
-        </button>
+      <div class="rs-time-columns__list-shell">
+        <div ref="secondListRef" class="rs-time-columns__list">
+          <button
+            v-for="option in secondOptions"
+            :key="option.value"
+            type="button"
+            class="rs-time-columns__item"
+            :class="{ 'rs-time-columns__item--active': parts.second === option.value }"
+            data-unit="second"
+            :data-value="option.value"
+            :disabled="isDisabled('second', option.value)"
+            @click="selectUnit('second', option.value)"
+          >
+            {{ option.label }}
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -170,10 +183,33 @@ defineExpose({
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--rs-space-sm);
+  --rs-time-columns-list-max-height: 10rem;
+  --rs-time-columns-item-padding-y: 0.375rem;
+  --rs-time-columns-item-font-size: var(--rs-font-size-sm);
+  --rs-time-columns-label-font-size: 0.6875rem;
 }
 .rs-time-columns--seconds {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
+.rs-time-columns--ssm {
+  --rs-time-columns-list-max-height: 7.5rem;
+  --rs-time-columns-item-padding-y: 0.2rem;
+  --rs-time-columns-item-font-size: var(--rs-font-size-xs);
+  --rs-time-columns-label-font-size: 0.625rem;
+  gap: var(--rs-space-xs);
+}
+.rs-time-columns--sm {
+  --rs-time-columns-list-max-height: 8.5rem;
+  --rs-time-columns-item-padding-y: 0.28rem;
+  --rs-time-columns-item-font-size: var(--rs-font-size-xs);
+  --rs-time-columns-label-font-size: 0.625rem;
+}
+.rs-time-columns--lg {
+  --rs-time-columns-list-max-height: 12rem;
+  --rs-time-columns-item-padding-y: 0.5rem;
+  --rs-time-columns-item-font-size: var(--rs-font-size-base);
+  --rs-time-columns-label-font-size: var(--rs-font-size-xs);
+}
 .rs-time-columns__column {
   display: flex;
   min-width: 0;
@@ -182,19 +218,41 @@ defineExpose({
 }
 .rs-time-columns__label {
   text-align: center;
-  font-size: 0.6875rem;
+  font-size: var(--rs-time-columns-label-font-size);
   font-weight: 500;
   letter-spacing: 0.02em;
   color: var(--rs-muted);
 }
-.rs-time-columns__list {
-  max-height: 10rem;
-  overflow-y: auto;
-  padding: 0.25rem;
+.rs-time-columns__list-shell {
+  overflow: hidden;
   border: 1px solid var(--rs-border-subtle);
   border-radius: var(--rs-radius-sm);
   background: color-mix(in srgb, var(--rs-surface) 72%, transparent);
 }
+.rs-time-columns__list {
+  position: relative;
+  max-height: var(--rs-time-columns-list-max-height);
+  overflow-y: auto;
+  padding: 0.25rem;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--rs-muted) 42%, transparent) transparent;
+}
+/* 去掉 Windows 原生滚动条上下三角，避免盖住圆角描边 */
+.rs-time-columns__list::-webkit-scrollbar {
+  width: 6px;
+}
+.rs-time-columns__list::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.rs-time-columns__list::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rs-muted) 42%, transparent);
+}
+.rs-time-columns__list::-webkit-scrollbar-track {
+  background: transparent;
+}
 .rs-time-columns__item {
   display: flex;
   width: 100%;
@@ -202,10 +260,11 @@ defineExpose({
   justify-content: center;
   border: 0;
   border-radius: var(--rs-radius-sm);
-  padding: 0.375rem 0;
+  padding: var(--rs-time-columns-item-padding-y) 0;
   background: transparent;
   color: var(--rs-text);
-  font-size: var(--rs-font-size-sm);
+  font-size: var(--rs-time-columns-item-font-size);
+  line-height: var(--rs-line-height-tight);
   cursor: pointer;
   transition: background var(--rs-transition-fast), color var(--rs-transition-fast);
 }