naive-ui/styles/themes/common.scss

$--n-font-family: 'FiraSans', '-apple-system';
$--n-mono-font-family: 'FiraCode', monospace;

$--n-strong-weight: 600;

$--n-ease-in-out-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
$--n-ease-out-cubic-bezier: cubic-bezier(0, 0, .2, 1);
$--n-ease-in-cubic-bezier: cubic-bezier(.4, 0, 1, 1);

$--n-border-radius: 3px;
$--n-light-border-radius: 2px;

$--n-height: (
  "tiny": 22px,
  "small": 28px,
  "medium": 34px,
  "large": 40px,
  "huge": 48px
);

$--n-font-size: (
  "tiny": 13px,
  "small": 14px,
  "medium": 14px,
  "large": 15px,
  "huge": 16px
);

$--n-icon-transition: (fill .3s $--n-ease-in-out-cubic-bezier, stroke .3s $--n-ease-in-out-cubic-bezier);

$--n-transform-debounce-scale: scale(0.99999);

$--n-ease-in-out-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
$--n-ease-out-cubic-bezier: cubic-bezier(0, 0, .2, 1);
$--n-ease-in-cubic-bezier: cubic-bezier(.4, 0, 1, 1);

$--n-popmenu-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.18) !global;

/** alert */
$--n-alert-border-radius: $--n-border-radius;

/** avatar */
$--n-avatar-border-radius: $--n-border-radius;

/** button */
$--n-button-border-radius: $--n-border-radius;
$--n-button-font-size: (
  "tiny": 12px,
  "small": 14px,
  "medium": 14px,
  "large": 15px
) !global;
$--n-button-padding: (
  "tiny": 0 6px,
  "small": 0 10px,
  "medium": 0 14px,
  "large": 0 18px
) !global;
$--n-button-round-padding: (
  "tiny": 0 10px,
  "small": 0 14px,
  "medium": 0 18px,
  "large": 0 22px
) !global;
$--n-button-icon-size: (
  "tiny": 15px,
  "small": 18px,
  "medium": 18px,
  "large": 20px
) !global;

/** base loading */
$--n-base-loading-stroke-dashoffset: 500;

/** base selection */
$--n-base-selection-border-radius: $--n-border-radius;

/** base select menu */
$--n-base-select-menu-border-radius: $--n-border-radius;

/** card */
$--n-card-border-radius: $--n-border-radius;
$--n-card-font-size: (
  'small': 16px,
  'medium': 18px,
  'large': 18px,
  'huge': 18px
);

$--n-card-margin-left: (
  'small': 16px,
  'medium': 24px,
  'large': 32px,
  'huge': 40px
);

$--n-card-margin-top: (
  'small': 12px,
  'medium': 20px,
  'large': 24px,
  'huge': 28px
);

$--n-card-margin-bottom: (
  'small': 12px,
  'medium': 16px,
  'large': 20px,
  'huge': 24px
);

/** cascader */
$--n-cascader-border-radius: $--n-border-radius;

/** checkbox */
$--n-checkbox-size: (
  'small': 14px,
  'medium': 14px,
  'large': 16px
);

/** data table */
$--n-data-table-border-radius: $--n-border-radius;

/** date pcicker */
$--n-date-picker-border-radius: $--n-border-radius;

/** descriptions */
$--n-descriptions-border-radius: $--n-border-radius;
$--n-descriptions-bordered-padding: (
  'small': (8px 12px),
  'medium': (12px 16px),
  'large': (16px 24px),
);
$--n-descriptions-padding: (
  'small': 8px,
  'medium': 12px,
  'large': 16px,
);

/** input number */
$--n-input-number-border-radius: $--n-border-radius;
$--n-input-number-button-width: (
  'small': 24px,
  'medium': 28px,
  'large': 28px
);

/** input */
$--n-input-icon-size: 20px;
$--n-input-border-radius: $--n-border-radius;

/** list */
$--n-list-border-radius: $--n-border-radius;

/** notification */
$--n-notification-border-radius: $--n-border-radius;

/** popover */
$--n-popover-border-radius: $--n-border-radius;
$--n-popover-arrow-width: 4px;
$--n-popover-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
$--n-popover-arrow-box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.12);

/** radio */
$--n-radio-button-border-radius: $--n-border-radius;
$--n-radio-size: (
  'small': 14px,
  'medium': 14px,
  'large': 16px
);

/** slider */
$--n-slider-rail-height: 4px;
$--n-slider-dot-size: 8px;
$--n-slider-handle-size: 14px;

/** steps */
$--n-steps-header-font-size: (
  'small': 14px,
  'medium': 16px
);

$--n-steps-indicator-index-font-size: (
  'small': 14px,
  'medium': 16px
);

$--n-steps-indicator-size: (
  'small': 22px,
  'medium': 28px
);

$--n-steps-indicator-icon-size: (
  'small': 16px,
  'medium': 22px
);

/** tab */
$--n-tabs-border-radius: $--n-border-radius;
$--n-tabs-tab-font-size: (
  'small': 13px,
  'medium': 14px,
  'large': 16px,
  'huge': 18px
);

/** tag */
$--n-tag-border-radius: $--n-light-border-radius;

/** timeline */
$--n-timeline-header-font-size: (
  'medium': 14px,
  'large': 16px
);

$--n-timeline-header-margin-top: (
  'medium': 0,
  'large': -1px
);

/** time picker */
$--n-time-picker-border-radius: $--n-border-radius;

/** tooltip */
$--n-tooltip-border-radius: $--n-border-radius;

/** transfer */
$--n-transfer-border-radius: $--n-border-radius;

/** tree */
$--n-tree-node-border-radius: $--n-light-border-radius;

/** typography */
$--n-typography-code-border-radius: $--n-light-border-radius;
$--n-typography-header-font-size: (
  '1': 30px,
  '2': 26px,
  '3': 18px,
  '4': 16px,
  '5': 14px,
  '6': 14px
);

$--n-typography-header-margin: (
  '1': 1.6em 0 1em 0,
  '2': 1.6em 0 1em 0,
  '3': 1.6em 0 1.2em 0,
  '4': 1.4em 0 1.2em 0,
  '5': 1.4em 0 1.2em 0,
  '6': 1.4em 0 1.2em 0
);

$--n-typography-header-prefix-width: (
  '1': 16px,
  '2': 16px,
  '3': 12px,
  '4': 12px,
  '5': 12px,
  '6': 12px
);

$--n-typography-header-bar-width: (
  '1': 4px,
  '2': 4px,
  '3': 3px,
  '4': 3px,
  '5': 3px,
  '6': 3px
);

/** upload */
$--n-upload-border-radius: $--n-border-radius;