@digitallinguistics/design/components/dlx.less

The design system for Digital Linguistics (DLx) projects.

// CSS reset
@import 'node_modules/flexbox-reset/flexbox-reset.less';

// Global variables
@import 'colors.less';
@import 'spacing.less';
@import 'fonts.less';
@import 'typography.less';
@import 'utilities.less';
@import 'borders.less';

// Components
@import 'BlockHeader/BlockHeader.less';
@import 'BoxInput/BoxInput.less';
@import 'Bulleted/Bulleted.less';
@import 'Button/Button.less';
@import 'Code/Code.less';
@import 'ColorBlock/ColorBlock.less';
@import 'DefinitionList/DefinitionList.less';
@import 'Label/Label.less';
@import 'Link/Link.less';
@import 'List/List.less';
@import 'Markdown/Markdown.less';
@import 'MultiLangString/MultiLangString.less';
@import 'MultiOrthoTranscription/MultiOrthoTranscription.less';
@import 'NavList/NavList.less';
@import 'Note/Note.less';
@import 'Numbered/Numbered.less';
@import 'Notes/Notes.less';
@import 'PageTitle/PageTitle.less';
@import 'SectionHeader/SectionHeader.less';
@import 'SkipLink/SkipLink.less';
@import 'Table/Table.less';

body {
  font-family: var(--font);
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--background-color-dark);
    color           : var(--text-color-dark);
  }
}