Adding correct sizes + CSS var to control them. (#371)

* feat(rating): add CSS variable for size and spacing of the symbols

src/components/rating/rating.base.scss

@@ -1,9 +1,9 @@
 @use '../../styles/common/component';
 @use '../../styles/utilities' as *;
 
-$size-small: rem(16px);
-$size-medium: rem(20px);
-$size-large: rem(24px);
+$size-small: var(--symbol-size, #{rem(18px)});
+$size-medium: var(--symbol-size, #{rem(24px)});
+$size-large: var(--symbol-size, #{rem(36px)});
 $spacing: rem(2px);
 $color-label: color(gray, 700) !default;
 $color-symbols: color(gray, 900) !default;
@@ -65,6 +65,18 @@ slot {
     }
 }
 
+[part='symbol small'] {
+    font-size: $size-small;
+}
+
+[part='symbol medium'] {
+    font-size: $size-medium;
+}
+
+[part='symbol large'] {
+    font-size: $size-large;
+}
+
 [part~='symbols-wrapper'] {
     color: $color-symbols;
     position: relative;

stories/rating.stories.ts

@@ -115,8 +115,6 @@ const Template: Story<ArgTypes, Context> = (
   { globals: { direction } }: Context
 ) => {
   const heartSVG = svg`<?xml version="1.0" ?><svg
-  width="24px"
-  height="24px"
   viewBox="0 0 24 24"
   xmlns="http://www.w3.org/2000/svg"
 >