diff --git a/src/lib/Figure/Figure.module.css b/src/lib/Figure/Figure.module.css index 0254a399..1879179b 100644 --- a/src/lib/Figure/Figure.module.css +++ b/src/lib/Figure/Figure.module.css @@ -11,13 +11,13 @@ .figure { background: var(--background000); - border: 3px solid var(--colorMi); + border: 3px solid var(--colorFa); display: flex; flex-direction: column; padding: calc(var(--sizeUnit) * 2) calc(var(--sizeUnit) * 2) var(--sizeUnit); &:hover { - border-color: var(--colorRe); + border-color: var(--colorDo); } & figcaption { diff --git a/src/lib/FormField/FormField.module.css b/src/lib/FormField/FormField.module.css index 6e76e874..ac022ac7 100644 --- a/src/lib/FormField/FormField.module.css +++ b/src/lib/FormField/FormField.module.css @@ -6,7 +6,7 @@ } .label { - color: var(--textColor); + color: var(--colorFa); cursor: pointer; font-size: var(--fontSizeLarge); font-weight: var(--fontWeightBolder); diff --git a/src/lib/InputCheckbox/InputCheckbox.module.css b/src/lib/InputCheckbox/InputCheckbox.module.css index 4937f537..2607765e 100644 --- a/src/lib/InputCheckbox/InputCheckbox.module.css +++ b/src/lib/InputCheckbox/InputCheckbox.module.css @@ -6,8 +6,8 @@ .input { --bgColor: #fff; - --borderColor: var(--background200); - --centerColor: var(--colorRe); + --borderColor: var(--colorFa); + --centerColor: var(--colorSol); appearance: none; background-color: var(--bgColor); @@ -43,7 +43,7 @@ } &:focus:not(:disabled, :invalid) { - --borderColor: var(--colorRe); + --borderColor: var(--colorDo); --centerColor: var(--colorDo); } } diff --git a/src/lib/InputColor/InputColor.module.css b/src/lib/InputColor/InputColor.module.css index 2f157b4a..bdf90933 100644 --- a/src/lib/InputColor/InputColor.module.css +++ b/src/lib/InputColor/InputColor.module.css @@ -38,7 +38,7 @@ width: calc(var(--sizeUnit) * 4); &.focus { - color: var(--colorRe); + color: var(--colorDo); } } @@ -97,8 +97,8 @@ } .input-color:hover { - & .input-alt:not(:disabled) + .icon { - color: var(--colorDo); + & .input-alt:not(:disabled, :focus) + .icon { + color: var(--colorRe); } & .label { diff --git a/src/lib/InputDate/InputDate.module.css b/src/lib/InputDate/InputDate.module.css index 13b2022b..1a5283a4 100644 --- a/src/lib/InputDate/InputDate.module.css +++ b/src/lib/InputDate/InputDate.module.css @@ -88,8 +88,8 @@ } .input-date:hover { - & .input:not(:disabled) + .icon { - color: var(--colorDo); + & .input:not(:disabled, :focus) + .icon { + color: var(--colorRe); } & .input:invalid:not(:disabled) + .icon { diff --git a/src/lib/InputGroup/InputGroup.module.css b/src/lib/InputGroup/InputGroup.module.css index 2effc468..41c39487 100644 --- a/src/lib/InputGroup/InputGroup.module.css +++ b/src/lib/InputGroup/InputGroup.module.css @@ -5,7 +5,7 @@ } .legend { - color: var(--textColor); + color: var(--colorFa); cursor: default; font-size: var(--fontSizeLarge); font-weight: 500; diff --git a/src/lib/InputRadio/InputRadio.module.css b/src/lib/InputRadio/InputRadio.module.css index becd3ced..47019b02 100644 --- a/src/lib/InputRadio/InputRadio.module.css +++ b/src/lib/InputRadio/InputRadio.module.css @@ -19,8 +19,8 @@ .input { --bgColor: #fff; - --borderColor: var(--background200); - --centerColor: var(--colorRe); + --borderColor: var(--colorFa); + --centerColor: var(--colorSol); appearance: none; background-color: var(--bgColor); @@ -58,7 +58,7 @@ } &:focus:not(:disabled, :invalid) { - --borderColor: var(--colorRe); + --borderColor: var(--colorDo); --centerColor: var(--colorDo); } diff --git a/src/lib/InputRange/InputRange.module.css b/src/lib/InputRange/InputRange.module.css index 76ab737c..edd4645b 100644 --- a/src/lib/InputRange/InputRange.module.css +++ b/src/lib/InputRange/InputRange.module.css @@ -21,7 +21,7 @@ --trackColor: var(--colorMi); --trackColorActive: var(--colorDo); --thumbColor: var(--colorSol); - --thumbColorActive: var(--colorFa); + --thumbColorActive: var(--colorRe); &::-moz-range-track { background: var(--trackColor); @@ -63,14 +63,15 @@ &:disabled { &::-moz-range-thumb { - cursor: not-allowed; background-color: var(--background100); + cursor: not-allowed; } &::-webkit-slider-thumb { - cursor: not-allowed; background-color: var(--background100); + cursor: not-allowed; } + &::-moz-range-track { background: var(--background100); } @@ -160,15 +161,15 @@ .prefix { color: var(--colorFa); + cursor: pointer; flex-shrink: 0; height: calc(var(--sizeUnit) * 4); width: calc(var(--sizeUnit) * 4); - cursor: pointer; & svg { + color: inherit; height: inherit; width: inherit; - color: inherit; } &:hover { diff --git a/src/lib/InputText/InputText.module.css b/src/lib/InputText/InputText.module.css index e9accaa1..1df5ab9b 100644 --- a/src/lib/InputText/InputText.module.css +++ b/src/lib/InputText/InputText.module.css @@ -65,19 +65,19 @@ .prefix { color: var(--colorFa); + cursor: pointer; flex-shrink: 0; height: calc(var(--sizeUnit) * 4); width: calc(var(--sizeUnit) * 4); - cursor: pointer; & svg { + color: inherit; height: inherit; width: inherit; - color: inherit; } &:hover { - color: var(--colorDo); + color: var(--colorRe); } } @@ -85,3 +85,11 @@ .prefix:has(+ .input:focus:invalid:not(:disabled)) { color: var(--colorError); } + +.prefix:has(+ .input:focus:not(:disabled, :invalid)) { + color: var(--colorDo); +} + +.prefix:has(+ .input:hover:not(:disabled, :invalid, :focus)) { + color: var(--colorRe); +} diff --git a/src/lib/Text/Text.module.css b/src/lib/Text/Text.module.css index 0b2e21b7..e87fe661 100644 --- a/src/lib/Text/Text.module.css +++ b/src/lib/Text/Text.module.css @@ -9,7 +9,7 @@ .text h1, .header1 { - color: var(--textColor); + color: var(--colorFa); font-size: var(--fontSizeH1); font-weight: 600; margin-bottom: calc(var(--sizeUnit) * 3); @@ -17,7 +17,7 @@ .text h2, .header2 { - color: var(--textColor); + color: var(--colorFa); font-size: var(--fontSizeH2); font-weight: 600; margin-bottom: calc(var(--sizeUnit) * 3); @@ -25,7 +25,7 @@ .text h3, .header3 { - color: var(--textColor); + color: var(--colorFa); font-size: var(--fontSizeH3); font-weight: 600; margin-bottom: calc(var(--sizeUnit) * 3); @@ -33,7 +33,7 @@ .text h4, .header4 { - color: var(--textColor); + color: var(--colorFa); font-size: var(--fontSizeH4); font-weight: 600; margin-bottom: calc(var(--sizeUnit) * 2); @@ -41,7 +41,7 @@ .text h5, .header5 { - color: var(--textColor); + color: var(--colorFa); font-size: var(--fontSizeH5); font-weight: 600; margin-bottom: calc(var(--sizeUnit) * 2); @@ -49,7 +49,7 @@ .text h6, .header6 { - color: var(--textColor); + color: var(--colorFa); font-size: var(--fontSizeH6); font-weight: 600; margin-bottom: calc(var(--sizeUnit) * 2); @@ -159,7 +159,7 @@ & li::before { align-self: center; - background-color: var(--colorDo); + background-color: var(--colorFa); border-radius: calc(var(--sizeUnit) / 2); content: " "; height: var(--sizeUnit); @@ -181,7 +181,7 @@ & li::before { align-self: center; - color: var(--colorDo); + color: var(--colorFa); content: counter(li); direction: rtl; font-size: var(--fontSizeSmall); @@ -195,10 +195,10 @@ .blockquote, .text blockquote { - background: var(--colorMi); - border-left: 3px solid var(--colorRe); + background: var(--colorFa); + border-left: 3px solid var(--colorFa); border-radius: 0 var(--sizeUnit) var(--sizeUnit) 0; - color: var(--textColor); + color: var(--colorMi); font-size: var(--fontSizeLarge); font-style: italic; margin-bottom: calc(var(--sizeUnit) * 2); @@ -239,7 +239,7 @@ } & dd { - border-bottom: 1px solid var(--colorDo); + border-bottom: 1px solid var(--colorFa); margin-bottom: calc(var(--sizeUnit) * 1); padding-bottom: calc(var(--sizeUnit) * 1); }