fix: color and size

docs/components/avatar.md

@@ -105,7 +105,7 @@ const name = ref('Cameron')
 
   <template #default-value>
 
-  `var(--r-common-comment-color)`
+  `var(--r-common-color)`
 
   </template>
 

docs/components/color-picker.md

@@ -110,18 +110,6 @@ let color = ref('')
 
   <template #name="{ value }">--r-color-picker-{{ value }}</template>
 
-  <RStyle name="current-color">
-
-  <template #values>
-
-  `<color>`
-
-  </template>
-
-  Value of the color picker.
-
-  </RStyle>
-
   <RStyle name="color">
 
   <template #values>

docs/components/rate.md

@@ -144,7 +144,7 @@ import { RRate } from 'roughness'
 
   <template #default-value>
 
-  `var(--r-common-line-height)`
+  `calc(1em + 4px)`
 
   </template>
 

docs/guide/theme.md

@@ -115,6 +115,34 @@ body {
 }
 ```
 
+The following properties (of colors) are effective for the **text content**:
+
+<RStylesTable>
+
+  <template #name="{ value }">--r-element-{{ value }}</template>
+
+  <RStyle name="color">
+
+  <template #values>
+
+  `<color>`
+
+  </template>
+
+  <template #default-value>
+
+  `var(--r-common-color)`
+
+  </template>
+
+  Color of the element. Usually it will be changed by the `type` property of components.
+
+  See also [Color Styles](#color-styles).
+
+  </RStyle>
+
+</RStylesTable>
+
 Common style properties are declared under the root node. Changing them will affect all components.
 
 <RStylesTable>

src/avatar/index.vue

@@ -118,7 +118,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 
 .r-avatar {
   --r-avatar-size: 2em;
-  --r-avatar-border-color: var(--r-common-comment-color);
+  --r-avatar-border-color: var(--r-common-color);
   --r-avatar-border-width: 1px;
   --r-avatar-border-dash: none;
   block-size: var(--r-avatar-size);

src/color-picker/index.vue

@@ -113,7 +113,6 @@ const style = $computed(() => {
 @use '../common/_reset';
 
 .r-color-picker {
-  --r-color-picker-current-color: var(--r-element-color);
   --r-color-picker-color: var(--r-common-color);
   --r-color-picker-border-width: 1px;
   --r-color-picker-border-dash: none;

src/rate/index.vue

@@ -85,7 +85,7 @@ watchEffect(() => {
 
 .r-rate {
   --r-rate-color: var(--r-common-primary-color);
-  --r-rate-control-size: calc(var(--r-common-font-size) + 4px);
+  --r-rate-control-size: calc(1em + 4px);
   --r-rate-gap-size: 4px;
   display: inline-flex;
   flex-direction: row-reverse;

src/upload/index.vue

@@ -105,7 +105,7 @@ function change(event: InputEvent) {
 @use '../common/_partials';
 
 .r-upload {
-  --r-upload-color: var(--r-element-color);
+  --r-upload-color: var(--r-common-color);
   --r-upload-border-color: var(--r-upload-color);
   --r-upload-border-width: 1px;
   --r-upload-border-dash: 8px;