Feature/color fixes (#362)

* minor color changes

* minor color changes

Author: kandrelczyk

demo_markdown/docs/_guide/theme/customize_theme.md

@@ -55,6 +55,8 @@ let on_customize_dark_theme = move |_| {
     theme.set(Theme::custom_dark(&brand_colors.get()));
 };
 let value = RwSignal::new(0.0);
+let page = RwSignal::new(1);
+let selected_value = RwSignal::new(String::from("apple"));
 
 view! {
     <ConfigProvider theme>
@@ -64,13 +66,42 @@ view! {
                 <Button appearance=ButtonAppearance::Primary on_click=on_customize_light_theme>"Custom Light Theme"</Button>
                 <Button appearance=ButtonAppearance::Primary on_click=on_customize_dark_theme>"Custom Dark Theme"</Button>
             </Space>
-            <Input/>
             <Link href="https://react.fluentui.dev/?path=/docs/theme-theme-designer--docs">
                 "You can use this tool to generate brand color palette"
             </Link>
-            <Checkbox />
+            <TabList selected_value>
+                <Tab value="apple">
+                    "Apple"
+                </Tab>
+                <Tab value="pear">
+                    "Pear"
+                </Tab>
+            </TabList>
+            <RadioGroup value=selected_value>
+                <Radio value="apple" label="Apple"/>
+                <Radio value="pear" label="Pear"/>
+            </RadioGroup>
+            <InfoLabel>
+                <InfoLabelInfo slot>
+                    "This is example information for an InfoLabel. "
+                </InfoLabelInfo>
+                "Example label"
+            </InfoLabel>
             <Badge appearance=BadgeAppearance::Filled>"10+"</Badge>
+            <Checkbox />
+            <Switch />
+            <Tag dismissible=true>"Tag"</Tag> //TODO make dismissable
+            <Input/>
+            <Select>
+                <option>"Red"</option>
+                <option>"Green"</option>
+                <option>"Blue"</option>
+            </Select>
+            <TimePicker />
+            <DatePicker/>
             <Slider step=25.0 value/>
+            <ProgressBar value/>
+            <Pagination page page_count=10 />
         </Card>
     </ConfigProvider>
 }

thaw/src/radio/radio.css

@@ -50,6 +50,14 @@
     color: var(--colorCompoundBrandForeground1);
 }
 
+.thaw-radio__input:hover:checked ~ .thaw-radio__indicator {
+    color: var(--colorCompoundBrandForeground1Hover);
+}
+
+.thaw-radio__input:hover:active ~ .thaw-radio__indicator {
+    color: var(--colorCompoundBrandForeground1Pressed);
+}
+
 .thaw-radio__indicator::after {
     position: absolute;
     width: 16px;
@@ -74,11 +82,19 @@
     line-height: var(--lineHeightBase300);
     font-size: var(--fontSizeBase300);
     font-family: var(--fontFamilyBase);
+    color: var(--colorNeutralForeground3);
+}
+
+.thaw-radio__input:enabled:hover ~ .thaw-radio__label {
+    color: var(--colorNeutralForeground2);
+}
+
+.thaw-radio__input:enabled:active ~ .thaw-radio__label {
     color: var(--colorNeutralForeground1);
 }
 
-.thaw-radio__input:enabled:not(:checked) ~ .thaw-radio__label {
-    color: var(--colorNeutralForeground3);
+.thaw-radio__input:enabled:checked ~ .thaw-radio__label {
+    color: var(--colorNeutralForeground1);
 }
 
 .thaw-radio__input:enabled ~ .thaw-radio__label {

thaw/src/switch/switch.css

@@ -45,6 +45,14 @@
     border-color: var(--colorTransparentStroke);
 }
 
+.thaw-switch__input:enabled:checked:hover ~ .thaw-switch__indicator {
+    background-color: var(--colorCompoundBrandBackgroundHover);
+}
+
+.thaw-switch__input:enabled:checked:active ~ .thaw-switch__indicator {
+    background-color: var(--colorCompoundBrandBackgroundPressed);
+}
+
 .thaw-switch__indicator > svg {
     display: inline;
     line-height: 0;