Skip to content

Commit

Permalink
feat(sdds-dfa, sdds-serv): Sync
Browse files Browse the repository at this point in the history 
feat(sdds-serv): part 1
  • Loading branch information
@shuga2704
shuga2704 committed Jul 23, 2024
1 parent 896439f commit 59f9fdb
Show file tree
Hide file tree
Showing 46 changed files with 2,573 additions and 128 deletions.
2 changes: 1 addition & 1 deletion packages/sdds-dfa/src/components/Chip/Chip.config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export const config = {
},
focused: {
true: css`
${chipTokens.focusColor}: var(--plasma-colors-accent);
${chipTokens.focusColor}: var(--text-accent);
`,
},
pilled: {
Expand Down
2 changes: 1 addition & 1 deletion packages/sdds-dfa/src/components/Combobox/Combobox.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,7 +297,7 @@ export const config = {
${comboboxTokens.background}: var(--surface-solid-card);
${comboboxTokens.boxShadow}: var(--shadow-down-soft-s);
${comboboxTokens.itemBackground}: var(--plasma-colors-transparent);
${comboboxTokens.itemBackground}: var(--surface-clear);
${comboboxTokens.itemBackgroundHover}: var(--surface-transparent-secondary);
${comboboxTokens.itemBackgroundSelectedHover}: var(--surface-transparent-secondary);
${comboboxTokens.itemColor}: var(--text-primary);
Expand Down
2 changes: 1 addition & 1 deletion packages/sdds-dfa/src/components/Dropdown/Dropdown.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export const config = {
${dropdownTokens.background}: var(--surface-solid-card);
${dropdownTokens.boxShadow}: var(--shadow-down-soft-s);
${dropdownTokens.disclosureIconColor}: var(--text-secondary);
${dropdownTokens.itemBackground}: var(--plasma-colors-transparent);
${dropdownTokens.itemBackground}: var(--surface-clear);
${dropdownTokens.itemBackgroundHover}: var(--surface-transparent-secondary);
${dropdownTokens.itemColor}: var(--text-primary);
`,
Expand Down
2 changes: 1 addition & 1 deletion packages/sdds-dfa/src/components/Modal/Modal.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const config = {
view: {
default: css`
${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2);
${modalTokens.modalOverlayColor}: var(--plasma-colors-overlay);
${modalTokens.modalOverlayColor}: var(--overlay-soft);
`,
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/sdds-dfa/src/components/Popover/Popover.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const config = {
${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");
${popoverTokens.arrowHeight}: 0.375rem;
${popoverTokens.arrowEdgeMargin}: 0.5625rem;
${popoverTokens.arrowBackground}: var(--plasma-colors-surface-solid03);
${popoverTokens.arrowBackground}: var(--surface-solid-tertiary);
`,
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/sdds-dfa/src/components/Popover/Popover.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ type StoryPopoverProps = ComponentProps<typeof Popover> & {
};

const StyledContent = styled.div`
background: var(--plasma-colors-surface-solid03);
background: var(--surface-solid-tertiary);
padding: 1rem;
border-radius: 0.5rem;
Expand Down
2 changes: 1 addition & 1 deletion packages/sdds-dfa/src/components/Spinner/Spinner.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const StyledWrapper = styled.div<{ $loading?: boolean }>`
content: '';
display: none;
background: var(--plasma-colors-surface-liquid01);
background: var(--surface-transparent-primary);
}
${({ $loading }) =>
Expand Down
92 changes: 46 additions & 46 deletions packages/sdds-dfa/src/components/Tabs/TabItem.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,102 +8,102 @@ export const config = {
variations: {
view: {
clear: css`
${tabsTokens.itemColor}: var(--plasma-colors-secondary);
${tabsTokens.itemColor}: var(--text-secondary);
${tabsTokens.itemBackgroundColor}: transparent;
${tabsTokens.itemColorHover}: var(--plasma-colors-primary);
${tabsTokens.itemColorHover}: var(--text-primary);
${tabsTokens.itemBackgroundColorHover}: transparent;
${tabsTokens.itemSelectedColor}: var(--plasma-colors-primary);
${tabsTokens.itemSelectedColor}: var(--text-primary);
${tabsTokens.itemSelectedBackgroundColor}: transparent;
${tabsTokens.itemSelectedColorHover}: var(--plasma-colors-primary);
${tabsTokens.itemSelectedColorHover}: var(--text-primary);
${tabsTokens.itemSelectedBackgroundColorHover}: transparent;
${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out;
${tabsTokens.itemPaddingClear}: 0;
${tabsTokens.itemContentPaddingClear}: 0;
${tabsTokens.outlineFocusColor}: var(--plasma-colors-button-focused);
${tabsTokens.outlineFocusColor}: var(--surface-accent);
${tabsTokens.itemSelectedDividerHeight}: 0rem;
${tabsTokens.itemSelectedDividerColor}: var(--plasma-colors-primary);
${tabsTokens.itemSelectedDividerColorHover}: var(--plasma-colors-primary);
${tabsTokens.itemSelectedDividerColor}: var(--text-primary);
${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary);
${tabsTokens.additionalContentColor}: var(--plasma-colors-tertiary);
${tabsTokens.additionalContentHoverColor}: var(--plasma-colors-secondary);
${tabsTokens.additionalContentSelectedColor}: var(--plasma-colors-secondary);
${tabsTokens.additionalContentSelectedHoverColor}: var(--plasma-colors-secondary);
${tabsTokens.additionalContentColor}: var(--text-tertiary);
${tabsTokens.additionalContentHoverColor}: var(--text-secondary);
${tabsTokens.additionalContentSelectedColor}: var(--text-secondary);
${tabsTokens.additionalContentSelectedHoverColor}: var(--text-secondary);
`,
secondary: css`
${tabsTokens.itemColor}: var(--plasma-colors-primary);
${tabsTokens.itemColor}: var(--text-primary);
${tabsTokens.itemBackgroundColor}: transparent;
${tabsTokens.itemColorHover}: var(--plasma-colors-primary);
${tabsTokens.itemColorHover}: var(--text-primary);
${tabsTokens.itemBackgroundColorHover}: transparent;
${tabsTokens.itemSelectedColor}: var(--plasma-colors-primary);
${tabsTokens.itemSelectedBackgroundColor}: var(--plasma-colors-surface-card);
${tabsTokens.itemSelectedColorHover}: var(--plasma-colors-primary);
${tabsTokens.itemSelectedBackgroundColorHover}: var(--plasma-colors-surface-card);
${tabsTokens.itemSelectedColor}: var(--text-primary);
${tabsTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card);
${tabsTokens.itemSelectedColorHover}: var(--text-primary);
${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card);
${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out;
${tabsTokens.itemMarginLeftFilled}: 0.125rem;
${tabsTokens.outlineFocusColor}: var(--plasma-colors-button-focused);
${tabsTokens.outlineFocusColor}: var(--surface-accent);
${tabsTokens.itemSelectedDividerHeight}: 0rem;
${tabsTokens.itemSelectedDividerColor}: var(--plasma-colors-primary);
${tabsTokens.itemSelectedDividerColorHover}: var(--plasma-colors-primary);
${tabsTokens.itemSelectedDividerColor}: var(--text-primary);
${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary);
${tabsTokens.additionalContentColor}: var(--plasma-colors-secondary);
${tabsTokens.additionalContentHoverColor}: var(--plasma-colors-secondary);
${tabsTokens.additionalContentSelectedColor}: var(--plasma-colors-secondary);
${tabsTokens.additionalContentSelectedHoverColor}: var(--plasma-colors-secondary);
${tabsTokens.additionalContentColor}: var(--text-secondary);
${tabsTokens.additionalContentHoverColor}: var(--text-secondary);
${tabsTokens.additionalContentSelectedColor}: var(--text-secondary);
${tabsTokens.additionalContentSelectedHoverColor}: var(--text-secondary);
`,
divider: css`
${tabsTokens.itemColor}: var(--plasma-colors-secondary);
${tabsTokens.itemColor}: var(--text-secondary);
${tabsTokens.itemBackgroundColor}: transparent;
${tabsTokens.itemColorHover}: var(--plasma-colors-primary);
${tabsTokens.itemColorHover}: var(--text-primary);
${tabsTokens.itemBackgroundColorHover}: transparent;
${tabsTokens.itemSelectedColor}: var(--plasma-colors-primary);
${tabsTokens.itemSelectedColor}: var(--text-primary);
${tabsTokens.itemSelectedBackgroundColor}: transparent;
${tabsTokens.itemSelectedColorHover}: var(--plasma-colors-primary);
${tabsTokens.itemSelectedColorHover}: var(--text-primary);
${tabsTokens.itemSelectedBackgroundColorHover}: transparent;
${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out;
${tabsTokens.itemPaddingClear}: 0;
${tabsTokens.itemContentPaddingClear}: 0;
${tabsTokens.outlineFocusColor}: var(--plasma-colors-button-focused);
${tabsTokens.outlineFocusColor}: var(--surface-accent);
${tabsTokens.itemSelectedDividerHeight}: 0.125rem;
${tabsTokens.itemSelectedDividerColor}: var(--plasma-colors-primary);
${tabsTokens.itemSelectedDividerColorHover}: var(--plasma-colors-primary);
${tabsTokens.itemSelectedDividerColor}: var(--text-primary);
${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary);
${tabsTokens.additionalContentColor}: var(--plasma-colors-tertiary);
${tabsTokens.additionalContentHoverColor}: var(--plasma-colors-secondary);
${tabsTokens.additionalContentSelectedColor}: var(--plasma-colors-secondary);
${tabsTokens.additionalContentSelectedHoverColor}: var(--plasma-colors-secondary);
${tabsTokens.additionalContentColor}: var(--text-tertiary);
${tabsTokens.additionalContentHoverColor}: var(--text-secondary);
${tabsTokens.additionalContentSelectedColor}: var(--text-secondary);
${tabsTokens.additionalContentSelectedHoverColor}: var(--text-secondary);
`,
default: css`
${tabsTokens.itemColor}: var(--plasma-colors-primary);
${tabsTokens.itemColor}: var(--text-primary);
${tabsTokens.itemBackgroundColor}: transparent;
${tabsTokens.itemColorHover}: var(--plasma-colors-primary);
${tabsTokens.itemColorHover}: var(--text-primary);
${tabsTokens.itemBackgroundColorHover}: transparent;
${tabsTokens.itemSelectedColor}: var(--plasma-colors-inverse);
${tabsTokens.itemSelectedColor}: var(--inverse-text-primary);
${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default);
${tabsTokens.itemSelectedColorHover}: var(--plasma-colors-inverse);
${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary);
${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default);
${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out;
${tabsTokens.itemMarginLeftFilled}: 0.125rem;
${tabsTokens.outlineFocusColor}: var(--plasma-colors-button-focused);
${tabsTokens.outlineFocusColor}: var(--surface-accent);
${tabsTokens.itemSelectedDividerHeight}: 0rem;
${tabsTokens.itemSelectedDividerColor}: var(--plasma-colors-primary);
${tabsTokens.itemSelectedDividerColorHover}: var(--plasma-colors-primary);
${tabsTokens.itemSelectedDividerColor}: var(--text-primary);
${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary);
${tabsTokens.additionalContentColor}: var(--plasma-colors-secondary);
${tabsTokens.additionalContentHoverColor}: var(--plasma-colors-secondary);
${tabsTokens.additionalContentSelectedColor}: var(--plasma-colors-white-secondary);
${tabsTokens.additionalContentSelectedHoverColor}: var(--plasma-colors-white-secondary);
${tabsTokens.additionalContentColor}: var(--text-secondary);
${tabsTokens.additionalContentHoverColor}: var(--text-secondary);
${tabsTokens.additionalContentSelectedColor}: var(--on-dark-text-secondary);
${tabsTokens.additionalContentSelectedHoverColor}: var(--on-dark-text-secondary);
`,
},
size: {
Expand Down
12 changes: 6 additions & 6 deletions packages/sdds-dfa/src/components/Tabs/Tabs.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,27 @@ export const config = {
variations: {
view: {
clear: css`
${tabsTokens.arrowColor}: var(--plasma-colors-secondary);
${tabsTokens.arrowColor}: var(--text-secondary);
${tabsTokens.tabsBackgroundColor}: tranparent;
${tabsTokens.outlineFocusColor}: var(--plasma-colors-button-focused);
${tabsTokens.outlineFocusColor}: var(--surface-accent);
${tabsTokens.tabsDividerHeight}: 0rem;
${tabsTokens.tabsDividerColor}: tranparent;
${tabsTokens.tabsDividerBorderRadius}: 0rem;
`,
filled: css`
${tabsTokens.arrowColor}: var(--plasma-colors-secondary);
${tabsTokens.arrowColor}: var(--text-secondary);
${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary);
${tabsTokens.outlineFocusColor}: var(--plasma-colors-button-focused);
${tabsTokens.outlineFocusColor}: var(--surface-accent);
${tabsTokens.tabsDividerHeight}: 0rem;
${tabsTokens.tabsDividerColor}: tranparent;
${tabsTokens.tabsDividerBorderRadius}: 0rem;
`,
divider: css`
${tabsTokens.arrowColor}: var(--plasma-colors-secondary);
${tabsTokens.arrowColor}: var(--text-secondary);
${tabsTokens.tabsBackgroundColor}: tranparent;
${tabsTokens.outlineFocusColor}: var(--plasma-colors-button-focused);
${tabsTokens.outlineFocusColor}: var(--surface-accent);
${tabsTokens.tabsDividerHeight}: 0.0625rem;
${tabsTokens.tabsDividerColor}: var(--surface-transparent-secondary);
Expand Down
8 changes: 4 additions & 4 deletions packages/sdds-dfa/src/components/TextField/TextField.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export const config = {
${tokens.focusColor}: var(--text-accent);
`,
positive: css`
${tokens.color}: var(--plasma-colors-primary);
${tokens.color}: var(--text-primary);
${tokens.backgroundColor}: var(--surface-transparent-positive);
${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active);
${tokens.caretColor}: var(--text-accent);
Expand All @@ -61,7 +61,7 @@ export const config = {
${tokens.focusColor}: var(--text-accent);
`,
warning: css`
${tokens.color}: var(--plasma-colors-primary);
${tokens.color}: var(--text-primary);
${tokens.backgroundColor}: var(--surface-transparent-warning);
${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active);
${tokens.caretColor}: var(--text-accent);
Expand All @@ -87,7 +87,7 @@ export const config = {
${tokens.focusColor}: var(--text-accent);
`,
negative: css`
${tokens.color}: var(--plasma-colors-primary);
${tokens.color}: var(--text-primary);
${tokens.backgroundColor}: var(--surface-transparent-negative);
${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active);
${tokens.caretColor}: var(--text-accent);
Expand Down Expand Up @@ -333,7 +333,7 @@ export const config = {
},
labelPlacement: {
inner: css`
${tokens.placeholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary)));
${tokens.placeholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--text-secondary)));
${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family);
${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size);
${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style);
Expand Down
2 changes: 1 addition & 1 deletion packages/sdds-dfa/src/components/Tooltip/Tooltip.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export const config = {
default: css`
${tooltipTokens.backgroundColor}: var(--surface-solid-card);
${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08);
${tooltipTokens.color}: var(--plasma-colors-primary);
${tooltipTokens.color}: var(--text-primary);
`,
},
},
Expand Down
Loading

0 comments on commit 59f9fdb

Please sign in to comment.