mkdocs.yml

site_name: Siemens Element Documentation

site_author: 'Siemens'
site_url: 'https://element.siemens.io/'
site_dir: 'dist/design'

repo_name: 'siemens/element'
repo_url: 'https://github.com/siemens/element'
edit_uri: 'blob/main/docs/'

copyright: '© Siemens 2016-2025'

nav:
  - Home:                                 'README.md'
  - Fundamentals:
    - Typography:                         'fundamentals/typography.md'
    - Colors:
      - Color palette:                    'fundamentals/colors/color-palette.md'
      - UI colors:                        'fundamentals/colors/ui-colors.md'
      - Data visualization colors:        'fundamentals/colors/data-visualization-colors.md'
    - Shapes:                             'fundamentals/shapes.md'
    - Illustrations:                      'fundamentals/illustrations.md'
    - Layouts:
      - Overview:                         'fundamentals/layouts/overview.md'
      - Anatomy:                          'fundamentals/layouts/anatomy.md'
      - Header:                           'fundamentals/layouts/header.md'
      - Content:                          'fundamentals/layouts/content.md'
      - Grid:                             'fundamentals/layouts/grid.md'
      - Spacing:                          'fundamentals/layouts/spacing.md'
    - Elevation:                          'fundamentals/elevation.md'
    - Localization:                       'fundamentals/localization.md'
  - Components:
    - Overview:                           'components/index.md'
    - Buttons & menus:
      - Buttons:                          'components/buttons-menus/buttons.md'
      - Content Action Bar:               'components/buttons-menus/content-actions.md'
      - Dropdowns:                        'components/buttons-menus/dropdowns.md'
      - Links:                            'components/buttons-menus/links.md'
      - Menu:                             'components/buttons-menus/menu.md'
    - Forms & Inputs:
      - Checkbox:                         'components/forms-inputs/checkbox.md'
      - Color Picker:                     'components/forms-inputs/color-picker.md'
      - Date & Time:                      'components/forms-inputs/datepicker.md'
      - Date Range Filter:                'components/forms-inputs/date-range-filter.md'
      - File Uploader:                    'components/forms-inputs/file-uploader.md'
      - Forms:                            'components/forms-inputs/forms.md'
      - Input:                            'components/forms-inputs/input.md'
      - Number Input:                     'components/forms-inputs/number-input.md'
      - Pills Input:                      'components/forms-inputs/pills-input.md'
      - Photo Uploader:                   'components/forms-inputs/photo-upload.md'
      - Radio:                            'components/forms-inputs/radio.md'
      - Select:                           'components/forms-inputs/select.md'
      - Slider:                           'components/forms-inputs/slider.md'
      - Switch:                           'components/forms-inputs/switch.md'
      - Text Area:                        'components/forms-inputs/text-area.md'
    - Layout & navigation:
      - Accordion:                        'components/layout-navigation/accordion.md'
      - Application header:               'components/layout-navigation/application-header.md'
      - Breadcrumb:                       'components/layout-navigation/breadcrumb.md'
      - Card:                             'components/layout-navigation/card.md'
      - Electron Titlebar:                'components/layout-navigation/electron-titlebar.md'
      - Footer:                           'components/layout-navigation/footer.md'
      - Launchpad:                        'components/layout-navigation/launchpad.md'
      - Modals:                           'components/layout-navigation/modals.md'
      - Pagination:                       'components/layout-navigation/pagination.md'
      - Side Panel:                       'components/layout-navigation/side-panel.md'
      - Split:                            'components/layout-navigation/split.md'
      - Wizard:                           'components/layout-navigation/wizard.md'
      - Tabs:                             'components/layout-navigation/tabs.md'
    - Lists, Tables & Trees:
      - Table & Datatable:                'components/lists-tables-trees/datatable.md'
    - Progress Indications:
      - Progress Bar:                     'components/progress-indication/progress-bar.md'
      - Spinner:                          'components/progress-indication/spinner.md'
    - Search, Filter & Sort:
      - Search Bar:                       'components/sorting-filtering/search-bar.md'
      - Sort Bar:                         'components/sorting-filtering/sort-bar.md'
      - Typeahead:                        'components/sorting-filtering/typeahead.md'
      - Filter Bar:                       'components/sorting-filtering/filter-bar.md'
      - Filter Pills:                     'components/sorting-filtering/filter-pills.md'
    - Status & notifications:
      - Avatar:                           'components/status-notifications/avatar.md'
      - Circle Status:                    'components/status-notifications/circle-status.md'
      - Connection Strength:              'components/status-notifications/connection-strength.md'
      - Copyright Notice:                 'components/status-notifications/copyright-notice.md'
      - Empty State:                      'components/status-notifications/empty-state.md'
      - Icon Status:                      'components/status-notifications/icon-status.md'
      - Inline Notification:              'components/status-notifications/inline-notification.md'
      - Popover:                          'components/status-notifications/popover.md'
      - Status Bar:                       'components/status-notifications/status-bar.md'
      - Status Toggle:                    'components/status-notifications/status-toggle.md'
      - Summary Chip:                     'components/status-notifications/summary-chip.md'
      - Summary Widget:                   'components/status-notifications/summary-widget.md'
      - System banner:                    'components/status-notifications/system-banner.md'
      - Toast Notification:               'components/status-notifications/toast-notification.md'
      - Tooltip:                          'components/status-notifications/tooltip.md'
    - Pages:
      - Info Page:                        'components/pages/info-page.md'
      - Unauthorized Page:                'components/pages/unauthorized-page.md'
  - Architecture:
    - CSS framework:                      'architecture/css-framework.md'
    - Theming:                            'architecture/theming.md'
    - Motion and animation:               'architecture/motion-animation.md'
  - Contributing:                         'CONTRIBUTING.md'
  - Changelog:                            'CHANGELOG.md'

theme:
  name: code-siemens-code-docs-theme
  palette:
    - media: "(prefers-color-scheme: dark)"
      scheme: dark
      toggle:
        icon: siemens/element/element-economy
        name: Switch to light mode
    - media: "(prefers-color-scheme: light)"
      scheme: light
      toggle:
        icon: siemens/element/element-sun
        name: Switch to system theme
    - media: "(prefers-color-scheme)"
      toggle:
        icon: siemens/element/element-theme-auto
        name: Switch to dark mode
  favicon: '_src/favicon.png'
  features:
    - navigation.tabs
    - page.toc
    - content.action.edit

extra_javascript:
  - '//w3.siemens.com/ote/ote_config.js'
  - '//w3.siemens.com/ote/sinet/ote.js'
extra:
  links:
    - name: 'GitHub'
      value: 'https://github.com/siemens/element'
    - name: 'Siemens Xcelerator Developer Portal'
      value: 'https://developer.siemens.com/'
  page_license_text: Except where otherwise noted, content on this site is licensed under <a href="https://github.com/siemens/element/blob/main/LICENSE.md">MIT License</a>.

markdown_extensions:
  - attr_list
  - pymdownx.highlight:
      linenums: true
      linenums_style: pymdownx-inline
      guess_lang: true
  - pymdownx.emoji:
      emoji_index: !!python/name:mkdocs_siemens.icons.twemoji
      emoji_generator: !!python/name:material.extensions.emoji.to_svg
  - pymdownx.details
  - pymdownx.tasklist
  - pymdownx.tilde
  - pymdownx.snippets
  - pymdownx.superfences
  - admonition
  - md_in_html
  - element-docs:
      examples_base: !ENV [ EXAMPLES_BASE, 'http://localhost:4200' ]
  - toc:
      permalink: true

plugins:
  - material/search
  - minify_html
  - element-docs-builder