Skip to content

Commit

Permalink
feat(sdds-serv): update config and stories for Button
Browse files Browse the repository at this point in the history
  • Loading branch information
@TitanKuzmich
TitanKuzmich committed May 24, 2024
1 parent 6ca48ab commit b58cf90
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 71 deletions.
64 changes: 55 additions & 9 deletions packages/sdds-serv/src/components/Button/Button.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export const config = {
view: {
default: css`
${buttonTokens.buttonColor}: var(--inverse-text-primary);
${buttonTokens.buttonValueColor}: var(--inverse-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default);
${buttonTokens.buttonColorHover}: var(--inverse-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
Expand All @@ -18,6 +19,7 @@ export const config = {
`,
accent: css`
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-accent);
${buttonTokens.buttonColorHover}: var(--on-dark-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
Expand All @@ -26,6 +28,7 @@ export const config = {
`,
secondary: css`
${buttonTokens.buttonColor}: var(--text-primary);
${buttonTokens.buttonValueColor}: var(--text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary);
${buttonTokens.buttonColorHover}: var(--text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
Expand All @@ -34,6 +37,7 @@ export const config = {
`,
clear: css`
${buttonTokens.buttonColor}: var(--text-primary);
${buttonTokens.buttonValueColor}: var(--text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-clear);
${buttonTokens.buttonColorHover}: var(--text-primary-hover);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-clear);
Expand All @@ -42,6 +46,7 @@ export const config = {
`,
success: css`
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-positive);
${buttonTokens.buttonColorHover}: var(--on-dark-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover);
Expand All @@ -50,6 +55,7 @@ export const config = {
`,
warning: css`
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-warning);
${buttonTokens.buttonColorHover}: var(--on-dark-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover);
Expand All @@ -58,6 +64,7 @@ export const config = {
`,
critical: css`
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-negative);
${buttonTokens.buttonColorHover}: var(--on-dark-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover);
Expand All @@ -66,6 +73,7 @@ export const config = {
`,
dark: css`
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep);
${buttonTokens.buttonColorHover}: var(--on-dark-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover);
Expand All @@ -74,6 +82,7 @@ export const config = {
`,
black: css`
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default);
${buttonTokens.buttonColorHover}: var(--on-dark-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover);
Expand All @@ -82,6 +91,7 @@ export const config = {
`,
white: css`
${buttonTokens.buttonColor}: var(--on-light-text-primary);
${buttonTokens.buttonValueColor}: var(--on-light-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default);
${buttonTokens.buttonColorHover}: var(--on-light-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover);
Expand All @@ -102,8 +112,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height);
${buttonTokens.buttonSpinnerSize}: 22px;
${buttonTokens.buttonSpinnerSize}: 1.375rem;
${buttonTokens.buttonSpinnerColor}: inherit;
${buttonTokens.buttonLeftContentMargin}: 0 0.5rem 0 -0.125rem;
${buttonTokens.buttonRightContentMargin}: 0 -0.125rem 0 0.5rem;
${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
lr: css`
${buttonTokens.buttonHeight}: 3.5rem;
Expand All @@ -115,8 +129,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height);
${buttonTokens.buttonSpinnerSize}: 22px;
${buttonTokens.buttonSpinnerSize}: 1.375rem;
${buttonTokens.buttonSpinnerColor}: inherit;
${buttonTokens.buttonLeftContentMargin}: 0 0.5rem 0 0;
${buttonTokens.buttonRightContentMargin}: 0 0 0 0.5rem;
${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
m: css`
${buttonTokens.buttonHeight}: 3rem;
Expand All @@ -130,8 +148,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
${buttonTokens.buttonSpinnerSize}: 22px;
${buttonTokens.buttonSpinnerSize}: 1.375rem;
${buttonTokens.buttonSpinnerColor}: inherit;
${buttonTokens.buttonLeftContentMargin}: 0 0.375rem 0 -0.125rem;
${buttonTokens.buttonRightContentMargin}: 0 -0.125rem 0 0.375rem;
${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
mr: css`
${buttonTokens.buttonHeight}: 3rem;
Expand All @@ -143,8 +165,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
${buttonTokens.buttonSpinnerSize}: 22px;
${buttonTokens.buttonSpinnerSize}: 1.375rem;
${buttonTokens.buttonSpinnerColor}: inherit;
${buttonTokens.buttonLeftContentMargin}: 0 0.375rem 0 0;
${buttonTokens.buttonRightContentMargin}: 0 0 0 0.375rem;
${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
s: css`
${buttonTokens.buttonHeight}: 2.5rem;
Expand All @@ -158,8 +184,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
${buttonTokens.buttonSpinnerSize}: 22px;
${buttonTokens.buttonSpinnerSize}: 1.375rem;
${buttonTokens.buttonSpinnerColor}: inherit;
${buttonTokens.buttonLeftContentMargin}: 0 0.25rem 0 -0.125rem;
${buttonTokens.buttonRightContentMargin}: 0 -0.125rem 0 0.25rem;
${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
sr: css`
${buttonTokens.buttonHeight}: 2.5rem;
Expand All @@ -171,8 +201,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
${buttonTokens.buttonSpinnerSize}: 22px;
${buttonTokens.buttonSpinnerSize}: 1.375rem;
${buttonTokens.buttonSpinnerColor}: inherit;
${buttonTokens.buttonLeftContentMargin}: 0 0.25rem 0 0;
${buttonTokens.buttonRightContentMargin}: 0 0 0 0.25rem;
${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
xs: css`
${buttonTokens.buttonHeight}: 2rem;
Expand All @@ -186,8 +220,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height);
${buttonTokens.buttonSpinnerSize}: 16px;
${buttonTokens.buttonSpinnerSize}: 1rem;
${buttonTokens.buttonSpinnerColor}: inherit;
${buttonTokens.buttonLeftContentMargin}: 0 0.25rem 0 -0.125rem;
${buttonTokens.buttonRightContentMargin}: 0 -0.125rem 0 0.25rem;
${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
xsr: css`
${buttonTokens.buttonHeight}: 2rem;
Expand All @@ -199,8 +237,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height);
${buttonTokens.buttonSpinnerSize}: 16px;
${buttonTokens.buttonSpinnerSize}: 1rem;
${buttonTokens.buttonSpinnerColor}: inherit;
${buttonTokens.buttonLeftContentMargin}: 0 0.25rem 0 0;
${buttonTokens.buttonRightContentMargin}: 0 0 0 0.25rem;
${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
xxs: css`
${buttonTokens.buttonHeight}: 1.5rem;
Expand All @@ -214,8 +256,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height);
${buttonTokens.buttonSpinnerSize}: 12px;
${buttonTokens.buttonSpinnerSize}: 0.75rem;
${buttonTokens.buttonSpinnerColor}: inherit;
${buttonTokens.buttonLeftContentMargin}: 0 0.25rem 0 -0.125rem;
${buttonTokens.buttonRightContentMargin}: 0 -0.125rem 0 0.25rem;
${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
},
disabled: {
Expand Down
Loading

0 comments on commit b58cf90

Please sign in to comment.