kwikid-components-react/assets/styles/index.css

KwikID's Component Library in React

:root {
  color-scheme: light;
  font-family: "Poppins", sans-serif;

  font-size: 16px !important;

  /* Colors */
  /* Blacks and Whites */
  --kwikui-color-white: #fff; /* White color */
  --kwikui-color-black: #000; /* Black color */

  /* Primary Colors */
  --kwikui-color-primary: #037aff; /* Primary color: applies to background and borders */
  --kwikui-color-primary-hover: #4ca0ff; /* Hover state, lighter shade of primary color */
  --kwikui-color-primary-active: #004da5; /* Active state, darker shade of primary color */
  --kwikui-color-primary-text: #f5f5f5; /* Text color on primary background */

  /* Secondary Colors */
  --kwikui-color-secondary: #03dac6; /* Secondary color: applies to background and borders  */
  --kwikui-color-secondary-hover: #64ffda; /* Hover state, lighter shade of secondary color */
  --kwikui-color-secondary-active: #00b894; /* Active state, darker shade of secondary color */
  --kwikui-color-secondary-text: #121212; /* Text color on secondary background */

  --kwikui-color-disabled: lightgray; /* Disabled color: applies to background and borders */
  --kwikui-color-disabled-hover: #f5f5f5; /* Hover state, lighter shade of disabled background */
  --kwikui-color-disabled-active: gray; /* Active state, darker shade of disabled background */
  --kwikui-color-disabled-text: gray; /* Text color on disabled background */

  /* Error, Info, Success and Warning Colors */
  --kwikui-color-error: #b00020; /* Error color */
  --kwikui-color-info: #2196f3; /* Info color */
  --kwikui-color-success: #4caf50; /* Success color */
  --kwikui-color-warning: #f57c00; /* Warning color */

  /* Card Background Color */
  --kwikui-color-card-background: #f0f0f0;

  /* Circular Progressbar Colors */
  --kwikui-color-success-path: #4ab32d;
  --kwikui-color-error-path: #ff4545;
  --kwikui-color-success-trail: #c2deba;
  --kwikui-color-error-trail: #e7c7c7;

  /* Border Radii */
  --kwikui-radius-xxs: 0.125rem; /* 2px */
  --kwikui-radius-xs: 0.1875rem; /* 3px */
  --kwikui-radius-s: 0.3125rem; /* 5px */
  --kwikui-radius-m: 0.5rem; /* 8px, reference point */
  --kwikui-radius-l: 0.6875rem; /* 11px */
  --kwikui-radius-xl: 0.875rem; /* 14px */
  --kwikui-radius-xxl: 1.125rem; /* 18px */

  /* Spacing */
  --kwikui-space-xxs: 0.1875rem; /* 3px */
  --kwikui-space-xs: 0.375rem; /* 6px */
  --kwikui-space-s: 0.625rem; /* 10px */
  --kwikui-space-m: 1rem; /* 16px, reference point */
  --kwikui-space-l: 1.375rem; /* 22px */
  --kwikui-space-xl: 1.75rem; /* 28px */
  --kwikui-space-xxl: 2.25rem; /* 36px */

  /* Font Sizes */
  --kwikui-font-size-xxs: 0.625rem; /* 10px */
  --kwikui-font-size-xs: 0.75rem; /* 12px */
  --kwikui-font-size-s: 0.875rem; /* 14px */
  --kwikui-font-size-m: 1rem; /* 16px, reference point */
  --kwikui-font-size-l: 1.25rem; /* 20px */
  --kwikui-font-size-xl: 1.5rem; /* 24px */
  --kwikui-font-size-xxl: 2rem; /* 32px */

  /* Multiplier */
  --kwikui-multiplier-xxs: 0.625;
  --kwikui-multiplier-xs: 0.75;
  --kwikui-multiplier-s: 0.875;
  --kwikui-multiplier-m: 1; /* reference point */
  --kwikui-multiplier-l: 1.25;
  --kwikui-multiplier-xl: 1.5;
  --kwikui-multiplier-xxl: 2;

  /* Box Shadows */
  --kwikui-box-shadow-1: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  --kwikui-box-shadow-2: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}
::-webkit-scrollbar-track {
  background: "white";
}
::-webkit-scrollbar-thumb {
  background-color: lightgray;
  border-radius: 2.5rem;
}
::-webkit-scrollbar-thumb:hover {
  background-color: gray;
}