@layer theme {
  [data-sl-context='primary'] {
    --sl-color: var(--tw-color-primary);
    --sl-on-color: var(--tw-color-on-primary);
  }

  [data-sl-context='success'] {
    --sl-color: var(--tw-color-success);
    --sl-on-color: var(--tw-color-on-success);
  }
  [data-sl-context='success'][data-sl-tone='strong'] {
    --sl-color: var(--tw-color-success-700, var(--tw-color-success));
    --sl-on-color: var(--tw-color-on-success-700, var(--tw-color-on-success));
  }

  [data-sl-context='warning'] {
    --sl-color: var(--tw-color-warning);
    --sl-on-color: var(--tw-color-on-warning);
  }

  [data-sl-context='danger'],
  [data-sl-context='error'] {
    --sl-color: var(--tw-color-danger);
    --sl-on-color: var(--tw-color-on-danger);
  }

  [data-sl-context='info'] {
    --sl-color: var(--tw-color-info);
    --sl-on-color: var(--tw-color-on-info);
    --sl-linear-gradient: 180deg, var(--tw-color-info-500) 0%, var(--tw-color-info-700) 100%;
  }

  [data-sl-context='info'][data-sl-tone='subtle'] {
    --sl-color: #b3e2ff;
    --sl-on-color: #68aad2;
    --sl-linear-gradient: 180deg, #b3e2ff 0%, #68aad2 100%;
  }

  [data-sl-context='info'][data-sl-tone='strong'] {
    --sl-color: var(--tw-color-info-700, var(--tw-color-info));
    --sl-on-color: var(--tw-color-on-info-700, var(--tw-color-on-info));
  }

  [data-sl-context='neutral'] {
    --sl-color: var(--tw-color-gray);
    --sl-on-color: var(--tw-color-on-gray);
    --sl-linear-gradient: 180deg, var(--tw-color-gray) 0%, var(--tw-color-on-gray) 100%;
  }

  [data-sl-context='neutral'][data-sl-tone='subtle'] {
    --sl-color: #b6b4b4;
    --sl-on-color: #979797;
    --sl-linear-gradient: 180deg, #b6b4b4 0%, #979797 100%;
  }
}