jb-checkbox/lib/variables.css

checkbox web component

:host{
  /*Sizes*/
  --size:var(--jb-check-box-size, 2rem);
  --label-font-size:1rem;
  --message-font-size: var(--jb-checkbox-message-font-size, 0.7rem);
  /*Colors*/
  --label-color:var(--jb-checkbox-label-color, var(--jb-neutral-5));
  --message-color:var(--jb-checkbox-message-color, var(--jb-text-secondary));
  --check-bg-color:var(--jb-checkbox-check-bg-color, var(--jb-white));
  --check-border-color:var(--jb-checkbox-check-border-color, var(--jb-neutral-7));
  --check-mark-color:var(--jb-checkbox-check-mark-color, var(--jb-text-contrast));
}
:host(:state(invalid)){
  --message-color:var(--jb-checkbox-message-error-color, var(--jb-red));
}
:host(:state(checked)){
  --label-color:var(--jb-checkbox-label-color, var(--jb-text-primary));
  --check-bg-color:var(--jb-checkbox-check-bg-color-checked, var(--jb-green));
  --check-mark-color:var(--jb-checkbox-check-mark-color-checked, var(--jb-white));
}
:host(:state(disabled)){
  --check-bg-color:var(--jb-checkbox-check-bg-color-disabled, var(--jb-neutral-9));
  /* --check-bg-color:var(--jb-checkbox-check-bg-color-disabled, red); */
}
/**/
:host([size="xs"]){
  --size:var(--jb-check-box-size-xs, 1rem);
  --label-font-size:0.5rem;
    /*0.7 - (0.0875 *2) */
  --message-font-size: var(--jb-checkbox-message-font-size-xs, 0.525rem);
}
:host([size="sm"]){
  --size:var(--jb-check-box-size-sm, 1.5rem);
  --label-font-size:0.75rem;
  --message-font-size: var(--jb-checkbox-message-font-size-sm, 0.6125rem);
}
:host([size="lg"]){
  --size:var(--jb-check-box-size-lg, 2.5rem);
  --label-font-size:1.25rem;
    /*0.7 + 0.0875*/
  --message-font-size: var(--jb-checkbox-message-font-size-lg, 0.7875rem);
}
:host([size="xl"]){
  --size: var(--jb-check-box-size-xl, 3rem);
  --label-font-size:1.5rem;
    --message-font-size: var(--jb-checkbox-message-font-size-xl, 0.875rem);
}