Skip to content

Commit

Permalink
feat!: customization refactor (#773)
Browse files Browse the repository at this point in the history 
Co-authored-by: Alexei Paksevatkin <k1ra1nd@yandex-team.ru>
  • Loading branch information
@amje @kiraind
amje and kiraind committed Jul 14, 2023
1 parent e5346f9 commit 3c1a33e
Show file tree
Hide file tree
Showing 61 changed files with 271 additions and 316 deletions.
8 changes: 4 additions & 4 deletions src/components/Button/Button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,10 +150,10 @@ $iconWidth: 16px;
}

&_action {
--yc-button-background-color: var(--g-color-base-special);
--yc-button-background-color-hover: var(--g-color-base-special-hover);
--yc-button-background-color: var(--g-color-base-brand);
--yc-button-background-color-hover: var(--g-color-base-brand-hover);

@include button-text-color(var(--yc-color-brand-text-contrast));
@include button-text-color(var(--g-color-text-brand-contrast));
}

&_outlined,
Expand Down Expand Up @@ -310,7 +310,7 @@ $iconWidth: 16px;
--yc-button-background-color: var(--g-color-base-selection);
--yc-button-background-color-hover: var(--g-color-base-selection-hover);

@include button-text-color(var(--yc-color-brand-text));
@include button-text-color(var(--g-color-text-brand));

&::before {
border: none;
Expand Down
5 changes: 3 additions & 2 deletions src/components/Card/Card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ $block: '.#{variables.$ns}card';

&::before {
content: '';
border: 2px solid var(--g-color-line-selection-hover);
border: 2px solid var(--g-color-line-brand);
opacity: 0.5;
}

&:focus-visible::before {
Expand All @@ -99,7 +100,7 @@ $block: '.#{variables.$ns}card';

&::before {
content: '';
border: 2px solid var(--g-color-line-selection-active);
border: 2px solid var(--g-color-line-brand);
}
}

Expand Down
6 changes: 3 additions & 3 deletions src/components/Checkbox/Checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,14 +127,14 @@ $block: '.#{variables.$ns}checkbox';
&_indeterminate {
#{$block}__indicator {
&::before {
background-color: var(--g-color-base-special);
background-color: var(--g-color-base-brand);
border: transparent;
}
}

#{$block}__icon {
visibility: visible;
color: var(--yc-color-brand-text-contrast);
color: var(--g-color-text-brand-contrast);
transform: translateX(0);
}
}
Expand All @@ -151,7 +151,7 @@ $block: '.#{variables.$ns}checkbox';
&#{$block}_indeterminate {
#{$block}__indicator {
&::before {
background-color: var(--g-color-base-special);
background-color: var(--g-color-base-brand);
opacity: 0.5;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Loader/Loader.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ $base-height-l: 36px;
&__left,
&__center,
&__right {
background: var(--g-color-base-special);
background: var(--g-color-base-brand);
animation: $animation;
}

Expand Down
8 changes: 4 additions & 4 deletions src/components/Popover/Popover.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,8 @@ $block: '.#{variables.$ns}popover';
&_special {
// Increasing specificity for overrides
&#{&} {
--yc-popup-background-color: var(--g-color-base-special);
--yc-popup-border-color: var(--g-color-base-special);
--yc-popup-background-color: var(--g-color-base-brand);
--yc-popup-border-color: var(--g-color-base-brand);
color: var(--g-color-text-light-primary);
}

Expand All @@ -131,15 +131,15 @@ $block: '.#{variables.$ns}popover';
color: var(--g-color-text-light-primary);

&:hover {
color: var(--g-color-text-yandex-red);
color: var(--g-color-text-light-secondary);
}
}

.yc-link {
color: var(--g-color-text-light-primary);

&:hover {
color: var(--g-color-text-yandex-red);
color: var(--g-color-text-light-secondary);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/PromoSheet/PromoSheet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,5 +64,5 @@ $block: '.#{variables.$ns}promo-sheet';
--yc-promo-sheet-message-margin: 16px;
--yc-promo-sheet-image-margin: 12px;
--yc-promo-sheet-foreground: var(--g-color-text-light-primary);
--yc-promo-sheet-background: var(--yc-color-brand-normal);
--yc-promo-sheet-background: var(--g-color-base-brand);
}
6 changes: 3 additions & 3 deletions src/components/Radio/Radio.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ $discMarginLSize: 6px;
position: absolute;

border: none;
background-color: var(--yc-color-brand-text-contrast);
background-color: var(--g-color-text-brand-contrast);
border-radius: 50%;
opacity: 0;
transform: scale(0.1);
Expand Down Expand Up @@ -117,7 +117,7 @@ $discMarginLSize: 6px;
&_checked {
#{$block}__indicator {
&::before {
background-color: var(--g-color-base-special);
background-color: var(--g-color-base-brand);
border: transparent;
}

Expand All @@ -139,7 +139,7 @@ $discMarginLSize: 6px;
&#{$block}_checked {
#{$block}__indicator {
&::before {
background-color: var(--g-color-base-special);
background-color: var(--g-color-base-brand);
opacity: 0.5;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Spin/Spin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ $block: '.#{variables.$ns}spin';
height: 100%;
width: 50%;
margin-left: 50%;
border: 2px solid var(--g-color-base-special);
border: 2px solid var(--g-color-line-brand);
border-left: none;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
Expand Down
4 changes: 2 additions & 2 deletions src/components/Switch/Switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ $block: '.#{variables.$ns}switch';
&_checked,
&_checked:hover {
#{$block}__indicator::before {
background-color: var(--g-color-base-special);
background-color: var(--g-color-base-brand);
}
}

Expand All @@ -126,7 +126,7 @@ $block: '.#{variables.$ns}switch';

&#{$block}_checked {
#{$block}__indicator::before {
background-color: var(--g-color-base-special);
background-color: var(--g-color-base-brand);
opacity: 0.5;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ $block: '.#{variables.$ns}table-column-setup';
}

&__tick {
color: var(--g-color-base-special);
color: var(--g-color-base-brand);
}

&__lock-wrap {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Tabs/Tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ $block: '.#{variables.$ns}tabs';
&_active,
&_active:hover,
&_active:focus {
border-color: var(--g-color-base-special);
border-color: var(--g-color-line-brand);
}

&_disabled {
Expand Down
3 changes: 1 addition & 2 deletions src/components/Text/colorText/colorText.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,11 @@ $textColorMap: (
'utility-heavy' var(--g-color-text-utility-heavy),
'misc' var(--g-color-text-misc),
'misc-heavy' var(--g-color-text-misc-heavy),
'special' var(--g-color-text-special),
'brand' var(--g-color-text-brand),
'link' var(--g-color-text-link),
'link-hover' var(--g-color-text-link-hover),
'link-visited' var(--g-color-text-link-visited),
'link-visited-hover' var(--g-color-text-link-visited-hover),
'yandex-red' var(--g-color-text-yandex-red),
'dark-primary' var(--g-color-text-dark-primary),
'dark-complementary' var(--g-color-text-dark-complementary),
'dark-secondary' var(--g-color-text-dark-secondary),
Expand Down
5 changes: 2 additions & 3 deletions src/components/Text/colorText/colorText.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,11 @@ export const TEXT_COLORS = [
'utility-heavy',
'misc',
'misc-heavy',
'special',
'brand',
'link',
'link-hover',
'link-visited',
'link-visited-hover',
'yandex-red',
'dark-primary',
'dark-complementary',
'dark-secondary',
Expand All @@ -46,7 +45,7 @@ export interface ColorTextBaseProps {

/**
* Utility to generate text colors classes.
* Storybook: https://preview.yandexcloud.dev/uikit/?path=/story/colors--texts
* Storybook: https://preview.gravity-ui.com/uikit/?path=/story/colors--texts
*
* ---
* For example:
Expand Down
2 changes: 1 addition & 1 deletion src/components/Text/text/text.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const TEXT_VARIANTS = [

export interface TextBaseProps {
/**
* Storybook: https://preview.yandexcloud.dev/uikit/?path=/story/typography--common
* Storybook: https://preview.gravity-ui.com/uikit/?path=/story/typography--common
* **Note:**: below are the default variants that can be overridden in the project
*
* - body:
Expand Down
98 changes: 66 additions & 32 deletions src/demo/Branding/Branding.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,58 +119,92 @@
}
}

.yc-root_brand_blue.yc-root {
&_theme_light {
@include brand-vars(#5282ff, #fff);

--g-color-base-brand: var(--g-color-private-brand-800-solid);
--g-color-base-brand-hover: var(--g-color-private-brand-900-solid);
--g-color-base-selection: var(--g-color-private-brand-50);
--g-color-base-selection-hover: var(--g-color-private-brand-100);
--g-color-line-brand: var(--g-color-private-brand-800-solid);
--g-color-text-brand: var(--g-color-base-brand);
--g-color-text-link: var(--g-color-base-brand);
--g-color-text-link-hover: var(--g-color-private-brand-1000-solid);
--g-color-text-brand-contrast: var(--g-color-text-light-primary);
}

&_theme_dark {
@include brand-vars(#577ed6, #2d2c33);

--g-color-base-brand: var(--g-color-private-brand-700-solid);
--g-color-base-brand-hover: var(--g-color-private-brand-800-solid);
--g-color-base-selection: var(--g-color-private-brand-100);
--g-color-base-selection-hover: var(--g-color-private-brand-200);
--g-color-line-brand: var(--g-color-private-brand-700-solid);
--g-color-text-brand: var(--g-color-base-brand);
--g-color-text-link: var(--g-color-base-brand);
--g-color-text-link-hover: var(--g-color-private-brand-1000-solid);
--g-color-text-brand-contrast: var(--g-color-text-light-primary);
}
}

.yc-root_brand_red.yc-root {
&_theme_light {
@include brand-vars(#f14b4b, #fff);

--yc-color-brand-normal: var(--g-color-private-brand-800-solid);
--yc-color-brand-normal-hover: var(--g-color-private-brand-900-solid);
--yc-color-brand-light: var(--g-color-private-brand-300);
--yc-color-brand-selection: var(--g-color-private-brand-50);
--yc-color-brand-selection-hover: var(--g-color-private-brand-100);
--yc-color-brand-link: var(--yc-color-brand-normal);
--yc-color-brand-link-hover: var(--g-color-private-brand-1000-solid);
--yc-color-brand-text-contrast: var(--g-color-text-light-primary);
--g-color-base-brand: var(--g-color-private-brand-800-solid);
--g-color-base-brand-hover: var(--g-color-private-brand-900-solid);
--g-color-base-selection: var(--g-color-private-brand-50);
--g-color-base-selection-hover: var(--g-color-private-brand-100);
--g-color-line-brand: var(--g-color-private-brand-800-solid);
--g-color-text-brand: var(--g-color-base-brand);
--g-color-text-link: var(--g-color-base-brand);
--g-color-text-link-hover: var(--g-color-private-brand-1000-solid);
--g-color-text-brand-contrast: var(--g-color-text-light-primary);
}

&_theme_dark {
@include brand-vars(#f86b6b, #2d2c33);

--yc-color-brand-normal: var(--g-color-private-brand-700-solid);
--yc-color-brand-normal-hover: var(--g-color-private-brand-800-solid);
--yc-color-brand-light: var(--g-color-private-brand-300);
--yc-color-brand-selection: var(--g-color-private-brand-100);
--yc-color-brand-selection-hover: var(--g-color-private-brand-200);
--yc-color-brand-link: var(--yc-color-brand-normal);
--yc-color-brand-link-hover: var(--g-color-private-brand-1000-solid);
--yc-color-brand-text-contrast: var(--g-color-text-light-primary);
--g-color-base-brand: var(--g-color-private-brand-700-solid);
--g-color-base-brand-hover: var(--g-color-private-brand-800-solid);
--g-color-base-selection: var(--g-color-private-brand-100);
--g-color-base-selection-hover: var(--g-color-private-brand-200);
--g-color-line-brand: var(--g-color-private-brand-700-solid);
--g-color-text-brand: var(--g-color-base-brand);
--g-color-text-link: var(--g-color-base-brand);
--g-color-text-link-hover: var(--g-color-private-brand-1000-solid);
--g-color-text-brand-contrast: var(--g-color-text-light-primary);
}
}

.yc-root_brand_yellow.yc-root {
&_theme_light {
@include brand-vars(#ffb800, #fff);

--yc-color-brand-normal: var(--g-color-private-brand-800-solid);
--yc-color-brand-normal-hover: var(--g-color-private-brand-900-solid);
--yc-color-brand-light: var(--g-color-private-brand-300);
--yc-color-brand-selection: var(--g-color-private-brand-100);
--yc-color-brand-selection-hover: var(--g-color-private-brand-200);
--yc-color-brand-link: var(--yc-color-brand-normal);
--yc-color-brand-link-hover: var(--g-color-private-brand-1000-solid);
--yc-color-brand-text-contrast: var(--g-color-text-dark-primary);
--g-color-base-brand: var(--g-color-private-brand-800-solid);
--g-color-base-brand-hover: var(--g-color-private-brand-900-solid);
--g-color-base-selection: var(--g-color-private-brand-100);
--g-color-base-selection-hover: var(--g-color-private-brand-200);
--g-color-line-brand: var(--g-color-private-brand-800-solid);
--g-color-text-brand: var(--g-color-private-brand-900-solid);
--g-color-text-link: var(--g-color-private-brand-900-solid);
--g-color-text-link-hover: var(--g-color-private-brand-1000-solid);
--g-color-text-brand-contrast: var(--g-color-text-dark-primary);
}

&_theme_dark {
@include brand-vars(#ffb800, #2d2c33);

--yc-color-brand-normal: var(--g-color-private-brand-700-solid);
--yc-color-brand-normal-hover: var(--g-color-private-brand-800-solid);
--yc-color-brand-light: var(--g-color-private-brand-300);
--yc-color-brand-selection: var(--g-color-private-brand-100);
--yc-color-brand-selection-hover: var(--g-color-private-brand-200);
--yc-color-brand-link: var(--yc-color-brand-normal);
--yc-color-brand-link-hover: var(--g-color-private-brand-1000-solid);
--yc-color-brand-text-contrast: var(--g-color-text-dark-primary);
--g-color-base-brand: var(--g-color-private-brand-700-solid);
--g-color-base-brand-hover: var(--g-color-private-brand-800-solid);
--g-color-base-selection: var(--g-color-private-brand-100);
--g-color-base-selection-hover: var(--g-color-private-brand-200);
--g-color-line-brand: var(--g-color-private-brand-700-solid);
--g-color-text-brand: var(--g-color-private-brand-900-solid);
--g-color-text-link: var(--g-color-private-brand-900-solid);
--g-color-text-link-hover: var(--g-color-private-brand-1000-solid);
--g-color-text-brand-contrast: var(--g-color-text-dark-primary);
}
}
14 changes: 14 additions & 0 deletions src/demo/Branding/Branding.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import block from 'bem-cn-lite';
import {
Button,
Checkbox,
Link,
Loader,
Radio,
Spin,
Expand All @@ -25,6 +26,7 @@ export interface BrandingProps {
}

export function Branding({brand}: BrandingProps) {
const [activeTab, setActiveTab] = React.useState('overview');
const [selectedIds, setSelectedIds] = React.useState(['1']);

function renderColors(solid = false) {
Expand Down Expand Up @@ -67,6 +69,16 @@ export function Branding({brand}: BrandingProps) {
<header className={b('section-header')}>Components</header>
<div className={b('section-content')}>
<div className={b('components')}>
<div className={b('components-title')}>Links</div>
<div className={b('components-content')} style={{maxWidth: 300}}>
<span>
Lorem ipsum dolor sit amet, <Link href="#a">consectetur</Link>{' '}
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis{' '}
<Link href="#b">nostrud</Link> exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</div>
<div className={b('components-title')}>Main Button</div>
<div className={b('components-content')}>
<Button view="action">Action</Button>
Expand All @@ -89,6 +101,8 @@ export function Branding({brand}: BrandingProps) {
<div className={b('components-title')}>Tabs</div>
<div className={b('components-content')}>
<Tabs
activeTab={activeTab}
onSelectTab={setActiveTab}
items={[
{id: 'overview', title: 'Overview'},
{id: 'settings', title: 'Settings'},
Expand Down
Loading

0 comments on commit 3c1a33e

Please sign in to comment.