Skip to content

Commit

Permalink
fix(styles): update Radio Button to Horizon 2023 [ci visual] (#4479)
Browse files Browse the repository at this point in the history
  • Loading branch information
@InnaAtanasova
InnaAtanasova committed Apr 26, 2023
1 parent 2661e72 commit e94d31b
Show file tree
Hide file tree
Showing 26 changed files with 8,497 additions and 8,441 deletions.
8 changes: 4 additions & 4 deletions packages/styles/src/checkbox.scss
View file
Expand Up @@ -66,11 +66,11 @@ $block: #{$fd-namespace}-checkbox;
&::before {
@include fd-form-radio-icon-base(var(--fdCheckbox_Dimensions)) {
font-family: "SAP-icons";
background-color: var(--fdCheckbox_Background_Color);
color: var(--fdCheckbox_Selected_Color);
border: var(--fdCheckbox_Border);
border-radius: var(--sapField_BorderCornerRadius);
}

background-color: var(--fdCheckbox_Background_Color);
border: var(--fdCheckbox_Border);
border-radius: var(--sapField_BorderCornerRadius);
}

&::after {
Expand Down
136 changes: 60 additions & 76 deletions packages/styles/src/radio.scss
View file
Expand Up @@ -18,15 +18,10 @@ $block: #{$fd-namespace}-radio;
}
}

@mixin fd-radio-state($background-color, $text-color, $border-color, $border-size, $border-type, $hover-shadow) {
@include fd-radio-label() {
--fdRadio_Background_Color: #{$background-color};
--fdRadio_Hover_Background: var(--fdRadio_Hover_Background);
--fdRadio_Border_Width: #{$border-size};
--fdRadio_Border: #{$border-size $border-type $border-color};
--fdRadio_Hover_Shadow: #{$hover-shadow};
--fdRadio_Selected_Color: #{$border-color};
--fdRadio_Hover_Border_Color: #{$border-color};
@mixin fd-radio-label-states() {
&:checked + .#{$block}__label::after,
& + .#{$block}__label::before {
@content;
}
}

Expand All @@ -46,13 +41,12 @@ $block: #{$fd-namespace}-radio;
color: var(--sapField_TextColor);

&::before {
@include fd-form-radio-icon-base(var(--fdRadio_Inner_Circle_Diameter)) {
background-color: var(--fdRadio_Background_Color);
margin-right: var(--fdRadio_Outer_Circle_Padding);
color: var(--fdRadio_Selected_Color);
border: var(--fdRadio_Border);
border-radius: 50%;
}
@include fd-form-radio-icon-base(var(--fdRadio_Inner_Circle_Diameter));

border-radius: 50%;
margin-right: var(--fdRadio_Outer_Circle_Padding);
background-color: var(--fdRadio_Background_Color);
border: var(--fdRadio_Inner_Border_Width) var(--fdRadio_Inner_Border_Style) var(--fdRadio_Inner_Border_Color);
}

&::after {
Expand All @@ -68,10 +62,13 @@ $block: #{$fd-namespace}-radio;

@include fd-hover() {
&::before {
background-color: var(--fdRadio_Hover_Background);
border-width: var(--fdRadio_Border_Width);
border-color: var(--fdRadio_Hover_Border_Color);
box-shadow: var(--fdRadio_Hover_Box_Shadow);
background-color: var(--fdRadio_Hover_Background_Color);

--fdRadio_Inner_Border_Width: var(--fdRadio_Inner_Border_Width_Default_Hover);
--fdRadio_Inner_Border_Style: var(--fdRadio_Inner_Border_Style_Default_Hover);
--fdRadio_Inner_Border_Color: var(--fdRadio_Inner_Border_Color_Default_Hover);
--fdRadio_Active_Dot_Color: var(--fdRadio_Active_Dot_Color_Default_Hover);
--fdRadio_Hover_Background_Color: var(--fdRadio_Background_Color_Default_Hover);
}
}

Expand Down Expand Up @@ -102,76 +99,63 @@ $block: #{$fd-namespace}-radio;
content: "";
position: absolute;
border-radius: 50%;
background: var(--fdRadio_Selected_Color);
background: var(--fdRadio_Active_Dot_Color);
}

// states
&.is-warning,
&.is-alert {
@include fd-radio-state(
var(--sapField_WarningBackground),
var(--sapField_TextColor),
var(--sapField_WarningColor),
var(--sapField_WarningBorderWidth),
var(--fdRadio_Warning_Error_Information_Border_Style),
var(--fdRadio_Warning_Hover_Shadow)
);
&.is-error {
@include fd-radio-label-states() {
--fdRadio_Background_Color: var(--fdRadio_Background_Color_Error);
--fdRadio_Inner_Border_Width: var(--fdRadio_Inner_Border_Width_Error);
--fdRadio_Inner_Border_Style: var(--fdRadio_Inner_Border_Style_Error);
--fdRadio_Inner_Border_Color: var(--fdRadio_Inner_Border_Color_Error);
--fdRadio_Active_Dot_Color: var(--fdRadio_Active_Dot_Color_Error);
--fdRadio_Hover_Background_Color: var(--fdRadio_Background_Color_Error_Hover);
}
}

&.is-error {
@include fd-radio-state(
var(--sapField_InvalidBackground),
var(--sapField_InvalidColor),
var(--sapField_InvalidColor),
var(--sapField_InvalidBorderWidth),
var(--fdRadio_Warning_Error_Information_Border_Style),
var(--fdRadio_Error_Hover_Shadow)
);
&.is-warning,
&.is-alert {
@include fd-radio-label-states() {
--fdRadio_Background_Color: var(--fdRadio_Background_Color_Warning);
--fdRadio_Inner_Border_Width: var(--fdRadio_Inner_Border_Width_Warning);
--fdRadio_Inner_Border_Style: var(--fdRadio_Inner_Border_Style_Warning);
--fdRadio_Inner_Border_Color: var(--fdRadio_Inner_Border_Color_Warning);
--fdRadio_Active_Dot_Color: var(--fdRadio_Active_Dot_Color_Warning);
--fdRadio_Hover_Background_Color: var(--fdRadio_Background_Color_Warning_Hover);
}
}

&.is-success {
@include fd-radio-state(
var(--sapField_SuccessBackground),
var(--sapField_SuccessColor),
var(--sapField_SuccessColor),
var(--sapField_BorderWidth),
solid,
var(--fdRadio_Success_Hover_Shadow)
);
@include fd-radio-label-states() {
--fdRadio_Background_Color: var(--fdRadio_Background_Color_Success);
--fdRadio_Inner_Border_Width: var(--fdRadio_Inner_Border_Width_Success);
--fdRadio_Inner_Border_Style: var(--fdRadio_Inner_Border_Style_Success);
--fdRadio_Inner_Border_Color: var(--fdRadio_Inner_Border_Color_Success);
--fdRadio_Active_Dot_Color: var(--fdRadio_Active_Dot_Color_Success);
--fdRadio_Hover_Background_Color: var(--fdRadio_Background_Color_Success_Hover);
}
}

&.is-information {
@include fd-radio-state(
var(--sapField_InformationBackground),
var(--sapField_InformationColor),
var(--sapField_InformationColor),
var(--sapField_InformationBorderWidth),
var(--fdRadio_Warning_Error_Information_Border_Style),
var(--fdRadio_Information_Hover_Shadow)
);
@include fd-radio-label-states() {
--fdRadio_Background_Color: var(--fdRadio_Background_Color_Information);
--fdRadio_Inner_Border_Width: var(--fdRadio_Inner_Border_Width_Information);
--fdRadio_Inner_Border_Style: var(--fdRadio_Inner_Border_Style_Information);
--fdRadio_Inner_Border_Color: var(--fdRadio_Inner_Border_Color_Information);
--fdRadio_Active_Dot_Color: var(--fdRadio_Active_Dot_Color_Information);
--fdRadio_Hover_Background_Color: var(--fdRadio_Background_Color_Information_Hover);
}
}

@include fd-readonly() {
@include fd-radio-state(
var(--sapField_ReadOnly_Background),
var(--sapContent_NonInteractiveIconColor),
var(--sapField_ReadOnly_BorderColor),
var(--fdRadio_Readonly_Border_Width),
var(--fdRadio_Readonly_Border_Type),
none
);
}

&[readonly],
&.is-readonly {
@include fd-radio-state(
var(--sapField_ReadOnly_Background),
var(--sapContent_NonInteractiveIconColor),
var(--sapField_ReadOnly_BorderColor),
var(--fdRadio_Readonly_Border_Width),
var(--fdRadio_Readonly_Border_Type),
none
);
@include fd-radio-label-states() {
--fdRadio_Background_Color: var(--fdRadio_Background_Color_ReadOnly);
--fdRadio_Inner_Border_Width: var(--fdRadio_Inner_Border_Width_ReadOnly);
--fdRadio_Inner_Border_Style: var(--fdRadio_Inner_Border_Style_ReadOnly);
--fdRadio_Inner_Border_Color: var(--fdRadio_Inner_Border_Color_ReadOnly);
--fdRadio_Active_Dot_Color: var(--fdRadio_Active_Dot_Color_ReadOnly);
}
}

@include fd-focus() {
Expand Down
12 changes: 6 additions & 6 deletions packages/styles/src/theming/common/radio/_common.scss
View file
@@ -1,12 +1,12 @@
:root {
--fdRadio_Background_Color: var(--sapField_Background);
--fdRadio_Selected_Color: var(--sapSelectedColor);
--fdRadio_Border: var(--sapField_BorderWidth) solid var(--sapField_BorderColor);
--fdRadio_Border_Width: var(--sapField_BorderWidth);
--fdRadio_Hover_Border_Color: var(--sapField_Hover_BorderColor);
--fdRadio_Inner_Circle_Diameter: 1.375rem;
--fdRadio_Compact_Inner_Circle_Diameter: 1rem;
--fdRadio_Outer_Circle_Padding: 0.6875rem;
--fdRadio_Compact_Outer_Circle_Padding: 0.5rem;
--fdRadio_Hover_Background: var(--sapField_Hover_Background);
--fdRadio_Background_Color: var(--sapField_Background);
--fdRadio_Inner_Border_Width: var(--sapField_BorderWidth);
--fdRadio_Inner_Border_Style: solid;
--fdRadio_Inner_Border_Color: var(--sapField_BorderColor);
--fdRadio_Active_Dot_Color: var(--sapContent_Selected_ForegroundColor);
--fdRadio_Hover_Background_Color: var(--sapContent_Selected_Hover_Background);
}
63 changes: 54 additions & 9 deletions packages/styles/src/theming/common/radio/_sap_fiori.scss
View file
@@ -1,20 +1,65 @@
@import "./common";

:root {
--fdRadio_Selected_Color: var(--sapSelectedColor);
--fdRadio_Inner_Content_Size: 0.625rem;
--fdRadio_Inner_Content_Size_Compact: 0.375rem;
--fdRadio_Inner_Content_Padding: 1.0625rem;
--fdRadio_Inner_Content_Padding_Compact: 0.8125rem;
--fdRadio_Hover_Box_Shadow: none;
--fdRadio_Readonly_Border_Type: solid;
--fdRadio_Readonly_Border_Width: var(--sapField_BorderWidth);
--fdRadio_Error_Hover_Shadow: none;
--fdRadio_Warning_Hover_Shadow: none;
--fdRadio_Success_Hover_Shadow: none;
--fdRadio_Information_Hover_Shadow: none;
--fdRadio_Warning_Error_Information_Border_Style: solid;
--fdRadio_Focus_Outline_Offset: 0.125rem;
--fdRadio_Outline_Border_Radius: 0;
--fdRadio_Compact_Outline_Border_radius: 0;
--fdRadio_Success_Border_Style: var(--sapField_SuccessBorderStyle);

// Default
--fdRadio_Background_Color_Default: var(--sapField_Background);
--fdRadio_Inner_Border_Width_Default: var(--sapField_BorderWidth);
--fdRadio_Inner_Border_Style_Default: solid;
--fdRadio_Inner_Border_Color_Default: var(--sapField_BorderColor);
--fdRadio_Active_Dot_Color_Default: var(--sapSelectedColor);

// Hover
--fdRadio_Background_Color_Default_Hover: var(--sapField_Hover_Background);
--fdRadio_Inner_Border_Width_Default_Hover: var(--sapField_BorderWidth);
--fdRadio_Inner_Border_Style_Default_Hover: solid;
--fdRadio_Inner_Border_Color_Default_Hover: var(--sapField_Hover_BorderColor);
--fdRadio_Active_Dot_Color_Default_Hover: var(--sapSelectedColor);

// ReadOnly
--fdRadio_Background_Color_ReadOnly: var(--sapField_ReadOnly_Background);
--fdRadio_Inner_Border_Width_ReadOnly: var(--sapField_BorderWidth);
--fdRadio_Inner_Border_Style_ReadOnly: solid;
--fdRadio_Inner_Border_Color_ReadOnly: var(--sapField_ReadOnly_BorderColor);
--fdRadio_Active_Dot_Color_ReadOnly: var(--sapContent_NonInteractiveIconColor);

// Error
--fdRadio_Background_Color_Error: var(--sapField_InvalidBackground);
--fdRadio_Inner_Border_Width_Error: var(--sapField_InvalidBorderWidth);
--fdRadio_Inner_Border_Style_Error: var(--sapField_InvalidBorderStyle);
--fdRadio_Inner_Border_Color_Error: var(--sapField_InvalidColor);
--fdRadio_Active_Dot_Color_Error: var(--sapField_InvalidColor);
--fdRadio_Background_Color_Error_Hover: var(--sapField_InvalidBackground);

// Warning
--fdRadio_Background_Color_Warning: var(--sapField_WarningBackground);
--fdRadio_Inner_Border_Width_Warning: var(--sapField_WarningBorderWidth);
--fdRadio_Inner_Border_Style_Warning: var(--sapField_WarningBorderStyle);
--fdRadio_Inner_Border_Color_Warning: var(--sapField_WarningColor);
--fdRadio_Active_Dot_Color_Warning: var(--sapField_TextColor);
--fdRadio_Background_Color_Warning_Hover: var(--sapField_WarningBackground);

// Success
--fdRadio_Background_Color_Success: var(--sapField_SuccessBackground);
--fdRadio_Inner_Border_Width_Success: var(--sapField_SuccessBorderWidth);
--fdRadio_Inner_Border_Style_Success: var(--sapField_SuccessBorderStyle);
--fdRadio_Inner_Border_Color_Success: var(--sapField_SuccessColor);
--fdRadio_Active_Dot_Color_Success: var(--sapField_SuccessColor);
--fdRadio_Background_Color_Success_Hover: var(--sapField_SuccessBackground);

// Information
--fdRadio_Background_Color_Information: var(--sapField_InformationBackground);
--fdRadio_Inner_Border_Width_Information: var(--sapField_InformationBorderWidth);
--fdRadio_Inner_Border_Style_Information: var(--sapField_InformationBorderStyle);
--fdRadio_Inner_Border_Color_Information: var(--sapField_InformationColor);
--fdRadio_Active_Dot_Color_Information: var(--sapField_InformationColor);
--fdRadio_Background_Color_Information_Hover: var(--sapField_InformationBackground);
}
64 changes: 61 additions & 3 deletions packages/styles/src/theming/common/radio/_sap_fiori_hc.scss
View file
@@ -1,7 +1,65 @@
@import "./sap_fiori";

:root {
--fdRadio_Selected_Color: var(--sapContent_IconColor);
--fdRadio_Warning_Error_Information_Border_Style: dashed;
--fdRadio_Hover_Background: var(--sapSelectedColor);
--fdRadio_Inner_Content_Size: 0.625rem;
--fdRadio_Inner_Content_Size_Compact: 0.375rem;
--fdRadio_Inner_Content_Padding: 1.0625rem;
--fdRadio_Inner_Content_Padding_Compact: 0.8125rem;
--fdRadio_Focus_Outline_Offset: 0.125rem;
--fdRadio_Outline_Border_Radius: 0;
--fdRadio_Compact_Outline_Border_radius: 0;
--fdRadio_Success_Border_Style: var(--sapField_SuccessBorderStyle);

// Default
--fdRadio_Background_Color_Default: var(--sapField_Background);
--fdRadio_Inner_Border_Width_Default: var(--sapField_BorderWidth);
--fdRadio_Inner_Border_Style_Default: solid;
--fdRadio_Inner_Border_Color_Default: var(--sapField_BorderColor);
--fdRadio_Active_Dot_Color_Default: var(--sapContent_IconColor);

// Hover
--fdRadio_Background_Color_Default_Hover: var(--sapSelectedColor);
--fdRadio_Inner_Border_Width_Default_Hover: var(--sapField_BorderWidth);
--fdRadio_Inner_Border_Style_Default_Hover: solid;
--fdRadio_Inner_Border_Color_Default_Hover: var(--sapField_Hover_BorderColor);
--fdRadio_Active_Dot_Color_Default_Hover: var(--sapContent_IconColor);

// ReadOnly
--fdRadio_Background_Color_ReadOnly: var(--sapField_ReadOnly_Background);
--fdRadio_Inner_Border_Width_ReadOnly: var(--sapField_BorderWidth);
--fdRadio_Inner_Border_Style_ReadOnly: solid;
--fdRadio_Inner_Border_Color_ReadOnly: var(--sapField_ReadOnly_BorderColor);
--fdRadio_Active_Dot_Color_ReadOnly: var(--sapContent_NonInteractiveIconColor);

// Error
--fdRadio_Background_Color_Error: var(--sapField_InvalidBackground);
--fdRadio_Inner_Border_Width_Error: var(--sapField_InvalidBorderWidth);
--fdRadio_Inner_Border_Style_Error: var(--sapField_InvalidBorderStyle);
--fdRadio_Inner_Border_Color_Error: var(--sapField_InvalidColor);
--fdRadio_Active_Dot_Color_Error: var(--sapField_InvalidColor);
--fdRadio_Background_Color_Error_Hover: var(--sapField_InvalidBackground);

// Warning
--fdRadio_Background_Color_Warning: var(--sapField_WarningBackground);
--fdRadio_Inner_Border_Width_Warning: var(--sapField_WarningBorderWidth);
--fdRadio_Inner_Border_Style_Warning: var(--sapField_WarningBorderStyle);
--fdRadio_Inner_Border_Color_Warning: var(--sapField_WarningColor);
--fdRadio_Active_Dot_Color_Warning: var(--sapField_TextColor);
--fdRadio_Background_Color_Warning_Hover: var(--sapField_WarningBackground);

// Success
--fdRadio_Background_Color_Success: var(--sapField_SuccessBackground);
--fdRadio_Inner_Border_Width_Success: var(--sapField_SuccessBorderWidth);
--fdRadio_Inner_Border_Style_Success: var(--sapField_SuccessBorderStyle);
--fdRadio_Inner_Border_Color_Success: var(--sapField_SuccessColor);
--fdRadio_Active_Dot_Color_Success: var(--sapField_SuccessColor);
--fdRadio_Background_Color_Success_Hover: var(--sapField_SuccessBackground);

// Information
--fdRadio_Background_Color_Information: var(--sapField_InformationBackground);
--fdRadio_Inner_Border_Width_Information: var(--sapField_InformationBorderWidth);
--fdRadio_Inner_Border_Style_Information: var(--sapField_InformationBorderStyle);
--fdRadio_Inner_Border_Color_Information: var(--sapField_InformationColor);
--fdRadio_Active_Dot_Color_Information: var(--sapField_InformationColor);
--fdRadio_Background_Color_Information_Hover: var(--sapField_InformationBackground);
}

0 comments on commit e94d31b

Please sign in to comment.