[data-theme=solarized], .app-theme-picker__picker[data-theme=solarized], [data-theme=solarized-dark], .app-theme-picker__picker[data-theme=solarized-dark], [data-theme=solarized-system], .app-theme-picker__picker[data-theme=solarized-system] {
  --background: var(--solarized-bg);
  --accent-color: var(--blue);

  /* Text */
  --text-color: var(--solarized-primary);
  --text-color-secondary: var(--solarized-secondary);

  /* Breadcrumbs - Deprecated */
  --breadcrumbs-bar-background: var(--background);

  /* Tabs - Deprecated */
  --tabs-background: var(--table-background);

  /* Table */
  --table-background: color-mix(in srgb, var(--background) 92.5%, var(--text-color-secondary));

  /* Side panel */
  --panel-border-color: color-mix(in srgb, var(--text-color-secondary) 15%, var(--card-background));

  /* Form */
  --input-color: color-mix(in srgb, var(--text-color-secondary) 3%, var(--background));
  --input-border: color-mix(in srgb, var(--text-color-secondary) 30%, var(--background));
  --input-border-hover: color-mix(in srgb, var(--text-color-secondary) 40%, var(--background));

  /* Default button */
  --button-background: oklch(from var(--text-color-secondary) l c h / 0.075);
  --button-background--hover: oklch(
      from var(--text-color-secondary) l c h / 0.125
  );
  --button-background--active: oklch(
      from var(--text-color-secondary) l c h / 0.175
  );
  --button-box-shadow--focus: oklch(
      from var(--text-color-secondary) l c h / 0.1
  );

  /* Variables for sidebar items, card items */
  --item-background--hover: oklch(from var(--text-color-secondary) l c h / 0.1);
  --item-background--active: oklch(
      from var(--text-color-secondary) l c h / 0.15
  );
  --item-box-shadow--focus: oklch(from var(--text-color-secondary) l c h / 0.1);

  /* Card */
  --card-background: var(--solarized-card);
  --card-border-color: color-mix(in srgb, var(--text-color-secondary) 12.5%, var(--card-background));

  /* This should be removed when core usees '--card-border-color' for tabs */
  .tabBar {
    &::before {
      border: var(--jenkins-border-width) solid var(--card-border-color);
    }
  }

  /* This should be removed when core usees '--card-border-color' for tables */
  .jenkins-table {
    @supports (not (-moz-appearance: none)) {
      &::before {
        border: var(--jenkins-border-width) solid var(--card-border-color);
      }
    }
  }

  /* Colors */
  --light-blue: oklch(from var(--blue) calc(l + 0.2) c h);
  --dark-blue: oklch(from var(--blue) calc(l - 0.2) c h);
  --light-brown: oklch(from var(--brown) calc(l + 0.2) c h);
  --dark-brown: oklch(from var(--brown) calc(l - 0.2) c h);
  --light-cyan: oklch(from var(--cyan) calc(l + 0.2) c h);
  --dark-cyan: oklch(from var(--cyan) calc(l - 0.2) c h);
  --light-green: oklch(from var(--green) calc(l + 0.2) c h);
  --dark-green: oklch(from var(--green) calc(l - 0.2) c h);
  --light-indigo: oklch(from var(--indigo) calc(l + 0.2) c h);
  --dark-indigo: oklch(from var(--indigo) calc(l - 0.2) c h);
  --light-orange: oklch(from var(--orange) calc(l + 0.2) c h);
  --dark-orange: oklch(from var(--orange) calc(l - 0.2) c h);
  --light-pink: oklch(from var(--pink) calc(l + 0.2) c h);
  --dark-pink: oklch(from var(--pink) calc(l - 0.2) c h);
  --light-purple: oklch(from var(--purple) calc(l + 0.2) c h);
  --dark-purple: oklch(from var(--purple) calc(l - 0.2) c h);
  --light-red: oklch(from var(--red) calc(l + 0.2) c h);
  --dark-red: oklch(from var(--red) calc(l - 0.2) c h);
  --light-yellow: oklch(from var(--yellow) calc(l + 0.2) c h);
  --dark-yellow: oklch(from var(--yellow) calc(l - 0.2) c h);
}