fix(docs): changing component variables example snippet

[lucivpav]

This PR updates the outdated code snippets in changing component variables section of docs. The buttons were not rendered as a user would expect. Relevant issue with error description: #1592.

Before:

After:

[codecov]

Codecov Report

Merging #1626 into master will decrease coverage by 0.2%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #1626      +/-   ##
==========================================
- Coverage   71.49%   71.28%   -0.21%     
==========================================
  Files         846      846              
  Lines        6945     6938       -7     
  Branches     2002     1982      -20     
==========================================
- Hits         4965     4946      -19     
- Misses       1974     1986      +12     
  Partials        6        6

Impacted Files	Coverage Δ
...ages/react/test/specs/behaviors/testDefinitions.ts	87.39% <0%> (-5.58%)	⬇️
...b/accessibility/Behaviors/Tree/treeItemBehavior.ts	100% <0%> (ø)	⬆️
packages/react/src/components/Tree/TreeItem.tsx	76.31% <0%> (+1.31%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7dc2027...03e54a9. Read the comment docs.

[codecov]

Codecov Report

Merging #1626 into master will increase coverage by 0.26%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #1626      +/-   ##
==========================================
+ Coverage   70.97%   71.24%   +0.26%     
==========================================
  Files         860      851       -9     
  Lines        7153     7035     -118     
  Branches     2078     2027      -51     
==========================================
- Hits         5077     5012      -65     
+ Misses       2070     2017      -53     
  Partials        6        6

Impacted Files	Coverage Δ
...mes/teams/components/Checkbox/checkboxVariables.ts	0% <0%> (-75%)	⬇️
packages/react/src/components/Chat/Chat.tsx	62.5% <0%> (-8.93%)	⬇️
packages/react/src/components/Dialog/Dialog.tsx	31.57% <0%> (-3.31%)	⬇️
...ackages/react/src/components/Checkbox/Checkbox.tsx	80% <0%> (-1.82%)	⬇️
packages/react-proptypes/src/index.ts	34.26% <0%> (-0.46%)	⬇️
packages/react/src/lib/factories.ts	94.2% <0%> (-0.25%)	⬇️
...ages/react/test/specs/behaviors/testDefinitions.ts	92.97% <0%> (-0.12%)	⬇️
...es/teams/components/ItemLayout/itemLayoutStyles.ts	20% <0%> (ø)	⬆️
packages/react/src/components/Button/Button.tsx	80% <0%> (ø)	⬆️
...ges/react/src/components/Attachment/Attachment.tsx	77.77% <0%> (ø)	⬆️
... and 56 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fbb59d8...7f0d856. Read the comment docs.

[kuzhelov]

unfortunately, this leads to change in the example's semantics. Originally the purpose was to demo variables usage - specifically, how it is possible to customize variables and obtain different look of the component. Now what we have is the styles demo, with additional aspect of using variables as style parameters.

[alinais]

Talked to Roman about it - we should advertise the colors from the color palette rather than the usage of the styles.

[lucivpav]

@alinais do you mean, for example, siteVars.colors.pink[50] instead of, say, pink? I have updated the PR, please let me know whether you like it now :)

[lucivpav]

The example looks like this now:

[lucivpav]

Please note that only a small fraction of icons support the color variable. User thus may be confused, why his icon does not have a proper color. Relevant issue #1039.