Axent Component Library

The Axent libary contains web components for standard website widgets to ease the creation of static sites.

By using the included components, you can minimize the amount of extra Javascript and CSS required build responsive layouts.

Theme

The library can be themed by setting the CSS variables described below and each component exposes parts for you to add your own styling.

:root {
  /* Primary colors */
  --axent-primary: #008f7d;
  --axent-primary-light: #02af98;
  --axent-primary-dark: #005c50;
  --axent-on-primary: #ffffff;
  --axent-ring-primary: rgba(0, 143, 125, 0.5);

  /* Neutral colors */
  --axent-neutral-dark: #626971;
  --axent-neutral: #e5e8e8;
  --axent-neutral-light: #f6f7f9;
  --axent-neutral-lighter: #f2f2f2;

  /* Semantic colors */
  --axent-background: #ffffff;
  --axent-on-background: #282829;
  --axent-success: #008f7d;
  --axent-error: #ad4738;
  --axent-warning: #cea81f;
  --axent-visited: #752e9c;
  --axent-disabled: #c5cacf;

  /* Border radius */
  --axent-border-radius: 0;
  --axent-border-radius-md: 0.5rem;
  --axent-border-radius-lg: 0.75rem;
  --axent-border-radius-xl: 1rem;

  /* Font */
  --axent-font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial,
    sans-serif; /* Following https://systemfontstack.com/ */
  --axent-font-normal: 300;
  --axent-font-bold: 500;

  /* Text size */
  --axent-text-base: 0.875rem; /* 14px */
  --axent-text-sm: 0.75rem; /* 12px */
  --axent-text-lg: 1rem; /* 16px */
  --axent-text-xl: 1.125rem; /* 18px */
  --axent-text-2xl: 1.5rem; /* 24px */
}