Global Theme Variables

export default {
  title: "Theming|Global",
};

:host {
  --border-radius: 0.5rem;
  --border-radius-input: 0.313rem;
  --button-padding: 0.75rem 1.375rem;
  --input-padding: 0.625rem 0.5rem;
  --textarea-padding: 0.438rem 0.813rem;
  --select-padding: 0.438rem 0.5rem;

  --color-surface: #ffffff;
  --color-black: #252a33;
  --color-background: #f5f5f8;
  --color-primary: #2c6fb7;
  --color-primary-light: #679dea;
  --color-primary-dark: #004587;
  --color-secondary: #69c9b9;
  --color-secondary-light: #9cfceb;
  --color-secondary-dark: #349889;
  --color-gray-lightest: #e1e3e4;
  --color-gray-light: #c4c7ca;
  --color-gray-dark: #9fa4a8;
  --color-gray-darkest: #6c737a;
  --color-warning: #fcb61a;
  --color-warning-light: #fdd375;
  --color-warning-lightest: #fef0d1;
  --color-error: #bc1c16;
  --color-error-light: #fdd375;
  --color-error-lightest: #fef0d1;
  --color-success: #00870a;
  --color-success-light: #fdd375;
  --color-success-lightest: #fef0d1;
  --color-box-shadow: rgba(159, 164, 168, 0.6);

  --font-letter-spacing: 0.018rem;
  --font-size-paragraph-medium: 0.938rem;
  --font-size-subtitle: 0.938rem;
  --font-size-title: 1.4rem;
  --font-size-input: 0.938rem;
  --font-size-label: 0.875rem;
  --font-family: sans-serif;
  --font-size-table-header: 1rem;
  --font-size-table-content: 0.875rem;
}