Migration guide for @uploadcare/blocks v0.44.0

BREAKING CHANGES

• All theme variables of the previous version are deprecated and won’t affect the look anymore.
• The default button that opens the uploader dialog (SimpleBtn) component now uses independent variables.
• By default, the theme now uses OKLCH color space. You can still override it using other color spaces, but we recommend converting your colors to OKLCH.

How to migrate

Dark and light mode

CSS variable --darkmode won’t affect color scheme anymore. Now, the theme is determined by user preference by default. To force a color scheme, apply uc-light or uc-dark class to the component.

1. If you are using light mode only, apply uc-light class to the component.
2. If you are using dark mode only, apply uc-dark class to the component.
3. If you apply user system preference, you don’t have to do anything. You can safely delete any code that uses --darkmode variable.

Case 1 - you’re not using --darkmode variable

The light mode was previously the default theme. If you want to keep it, apply the uc-light class to the component.

1
<lr-file-uploader-regular>
2
  ctx-name="my-uploader" class="uc-light"
3
</lr-file-uploader-regular>

Case 2 - you are using --darkmode variable to constantly apply dark mode

If you want to keep dark mode, apply the uc-dark class to the component.

1
<lr-file-uploader-regular>
2
  ctx-name="my-uploader" class="uc-dark"
3
</lr-file-uploader-regular>

Case 3 - you are using --darkmode variable to apply dark mode only when the user prefers it

For example, you are using this code:

1
@media (prefers-color-scheme: dark) {
2
  .my-uploader {
3
    --darkmode: 1;
4
  }
5
}
6
@media (prefers-color-scheme: light) {
7
  .my-uploader {
8
    --darkmode: 0;
9
  }
10
}

Now, you can safely delete it. The mode is determined by user preference by default.

Accent colors

Case 1 - you’re not using --*-accent variables

In this case, you don’t have to do anything. The default accent color is used.

Case 2 - you’re using --*-accent variables

For example, you have this code:

1
.my-colors {
2
  --h-accent: 144;
3
  --s-accent: 67%;
4
  --l-accent: 57%;
5
}

First, you need to convert your accent color from HSL to OKLCH. We recommend using https://oklch.com/ for conversion.

Then, depending on your use of light or dark mode, change the following variables. Write values only:

1
.my-colors {
2
  --uc-primary-oklch-light: 79.2% 0.176 153;
3
  --uc-primary-oklch-dark: 79.2% 0.176 153;
4
}

Note: to maintain the contrast, don’t change first numbers that stand for lightness.

Other colors and variables

Case 1 - you’re not using CSS variables other than --*-accent

In this case, you don’t have to do anything. The default values will be used.

Case 2 - you’re using CSS variables other than --*-accent

The new styling system does not directly replace most of the values. Yet, using this guide can yield very close results.

1. Convert your colors from HSL to OKLCH. We recommend using https://oklch.com/ for conversion.
2. Assign OKLCH colors to correspondent variables using this table. If you use only light or only dark mode, override the variable with the respective suffix: -light or -dark.

Derivative values

Case 1 - you’re not using derivative values described below

In this case, you don’t have to do anything. The default values will be used.

Case 2 - you’re using derivative values described below

1. Convert your colors from HSL to OKLCH. We recommend using https://oklch.com/ for conversion.
2. Assign OKLCH colors to correspondent variables using this table. If you use only light or only dark mode, override the variable with the respective suffix: -light or -dark.

See Styling article for more info.