Skip to content

Commit

Permalink
feat(plasma-giga): update Button config
Browse files Browse the repository at this point in the history
  • Loading branch information
@TitanKuzmich
TitanKuzmich committed Dec 19, 2024
1 parent 09228c9 commit f012cdc
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 23 deletions.
13 changes: 8 additions & 5 deletions packages/plasma-giga/src/components/Button/Button.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components';

// INFO: Rounded radius. Should be removed after token will be added in theme
const roundedRadius = '1000px';

export const config = {
defaults: {
view: 'default',
Expand Down Expand Up @@ -114,7 +117,7 @@ export const config = {
${buttonTokens.buttonHeight}: 3.5rem;
${buttonTokens.buttonWidth}: 12.5rem;
${buttonTokens.buttonPadding}: 1.5rem;
${buttonTokens.buttonRadius}: 0.875rem;
${buttonTokens.buttonRadius}: ${roundedRadius};
${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family);
${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size);
${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style);
Expand Down Expand Up @@ -150,7 +153,7 @@ export const config = {
${buttonTokens.buttonHeight}: 3rem;
${buttonTokens.buttonWidth}: 11.25rem;
${buttonTokens.buttonPadding}: 1.25rem;
${buttonTokens.buttonRadius}: 0.75rem;
${buttonTokens.buttonRadius}: ${roundedRadius};
${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
Expand Down Expand Up @@ -186,7 +189,7 @@ export const config = {
${buttonTokens.buttonHeight}: 2.5rem;
${buttonTokens.buttonWidth}: 11.25rem;
${buttonTokens.buttonPadding}: 1rem;
${buttonTokens.buttonRadius}: 0.625rem;
${buttonTokens.buttonRadius}: ${roundedRadius};
${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family);
${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size);
${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style);
Expand Down Expand Up @@ -222,7 +225,7 @@ export const config = {
${buttonTokens.buttonHeight}: 2rem;
${buttonTokens.buttonWidth}: 10rem;
${buttonTokens.buttonPadding}: 0.75rem;
${buttonTokens.buttonRadius}: 0.5rem;
${buttonTokens.buttonRadius}: ${roundedRadius};
${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family);
${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size);
${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style);
Expand Down Expand Up @@ -258,7 +261,7 @@ export const config = {
${buttonTokens.buttonHeight}: 1.5rem;
${buttonTokens.buttonWidth}: 8.75rem;
${buttonTokens.buttonPadding}: 0.625rem;
${buttonTokens.buttonRadius}: 0.375rem;
${buttonTokens.buttonRadius}: ${roundedRadius};
${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family);
${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size);
${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style);
Expand Down
39 changes: 21 additions & 18 deletions packages/plasma-giga/src/components/ButtonGroup/ButtonGroup.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import { css, buttonGroupTokens, buttonGroupClasses } from '@salutejs/plasma-new-hope/styled-components';

// INFO: Rounded radius. Should be removed after token will be added in theme
const roundedRadius = '1000px';

export const config = {
defaults: {
view: 'default',
Expand Down Expand Up @@ -110,9 +113,9 @@ export const config = {
},
size: {
l: css`
${buttonGroupTokens.buttonDefaultRadius}: 0.875rem;
${buttonGroupTokens.buttonDefaultRadius}: ${roundedRadius};
${buttonGroupTokens.buttonSegmentedRadius}: 0.375rem;
${buttonGroupTokens.buttonSideRadius}: 0.875rem;
${buttonGroupTokens.buttonSideRadius}: ${roundedRadius};
${buttonGroupTokens.buttonHeight}: 3.5rem;
${buttonGroupTokens.buttonPadding}: 1.5rem;
Expand All @@ -124,9 +127,9 @@ export const config = {
${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height);
`,
lr: css`
${buttonGroupTokens.buttonDefaultRadius}: 0.875rem;
${buttonGroupTokens.buttonDefaultRadius}: ${roundedRadius};
${buttonGroupTokens.buttonSegmentedRadius}: 0.375rem;
${buttonGroupTokens.buttonSideRadius}: 0.875rem;
${buttonGroupTokens.buttonSideRadius}: ${roundedRadius};
${buttonGroupTokens.buttonHeight}: 3.5rem;
${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family);
Expand All @@ -138,8 +141,8 @@ export const config = {
`,
m: css`
${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem;
${buttonGroupTokens.buttonDefaultRadius}: 0.75rem;
${buttonGroupTokens.buttonSideRadius}: 0.75rem;
${buttonGroupTokens.buttonDefaultRadius}: ${roundedRadius};
${buttonGroupTokens.buttonSideRadius}: ${roundedRadius};
${buttonGroupTokens.buttonHeight}: 3rem;
${buttonGroupTokens.buttonPadding}: 1.25rem;
Expand All @@ -154,8 +157,8 @@ export const config = {
mr: css`
&.${buttonGroupClasses.segmented} {
${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem;
${buttonGroupTokens.buttonDefaultRadius}: 0.75rem;
${buttonGroupTokens.buttonSideRadius}: 0.75rem;
${buttonGroupTokens.buttonDefaultRadius}: ${roundedRadius};
${buttonGroupTokens.buttonSideRadius}: ${roundedRadius};
${buttonGroupTokens.buttonHeight}: 3rem;
${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
Expand All @@ -167,8 +170,8 @@ export const config = {
`,
s: css`
${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem;
${buttonGroupTokens.buttonSideRadius}: 0.625rem;
${buttonGroupTokens.buttonDefaultRadius}: 0.625rem;
${buttonGroupTokens.buttonSideRadius}: ${roundedRadius};
${buttonGroupTokens.buttonDefaultRadius}: ${roundedRadius};
${buttonGroupTokens.buttonHeight}: 2.5rem;
${buttonGroupTokens.buttonPadding}: 1rem;
Expand All @@ -181,8 +184,8 @@ export const config = {
`,
sr: css`
${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem;
${buttonGroupTokens.buttonDefaultRadius}: 0.625rem;
${buttonGroupTokens.buttonSideRadius}: 0.625rem;
${buttonGroupTokens.buttonDefaultRadius}: ${roundedRadius};
${buttonGroupTokens.buttonSideRadius}: ${roundedRadius};
${buttonGroupTokens.buttonHeight}: 2.5rem;
${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family);
Expand All @@ -194,8 +197,8 @@ export const config = {
`,
xs: css`
${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem;
${buttonGroupTokens.buttonDefaultRadius}: 0.5rem;
${buttonGroupTokens.buttonSideRadius}: 0.5rem;
${buttonGroupTokens.buttonDefaultRadius}: ${roundedRadius};
${buttonGroupTokens.buttonSideRadius}: ${roundedRadius};
${buttonGroupTokens.buttonHeight}: 2rem;
${buttonGroupTokens.buttonPadding}: 0.75rem;
Expand All @@ -208,8 +211,8 @@ export const config = {
`,
xsr: css`
${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem;
${buttonGroupTokens.buttonDefaultRadius}: 0.5rem;
${buttonGroupTokens.buttonSideRadius}: 0.5rem;
${buttonGroupTokens.buttonDefaultRadius}: ${roundedRadius};
${buttonGroupTokens.buttonSideRadius}: ${roundedRadius};
${buttonGroupTokens.buttonHeight}: 2rem;
${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family);
Expand All @@ -221,8 +224,8 @@ export const config = {
`,
xxs: css`
${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem;
${buttonGroupTokens.buttonDefaultRadius}: 0.375rem;
${buttonGroupTokens.buttonSideRadius}: 0.375rem;
${buttonGroupTokens.buttonDefaultRadius}: ${roundedRadius};
${buttonGroupTokens.buttonSideRadius}: ${roundedRadius};
${buttonGroupTokens.buttonHeight}: 1.5rem;
${buttonGroupTokens.buttonPadding}: 0.625rem;
Expand Down

0 comments on commit f012cdc

Please sign in to comment.