diff --git a/.changeset/orange-suits-grow.md b/.changeset/orange-suits-grow.md new file mode 100644 index 0000000000..45ca74d4c3 --- /dev/null +++ b/.changeset/orange-suits-grow.md @@ -0,0 +1,5 @@ +--- +'@commercetools-uikit/data-table': patch +--- + +Update styling of data table container and table cells diff --git a/design-system/materials/custom-properties.css b/design-system/materials/custom-properties.css index 1c0d83cb9e..17ca9684df 100644 --- a/design-system/materials/custom-properties.css +++ b/design-system/materials/custom-properties.css @@ -136,6 +136,7 @@ --shadow-15: 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12); --shadow-16: 0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25); + --shadow-17: 0 1px 5px 0 rgba(0, 0, 0, 0.05); --constraint-scale: 100%; --constraint-1: 42px; --constraint-2: 84px; @@ -414,6 +415,7 @@ --box-shadow-for-view-switcher-when-selected: none; --box-shadow-for-select-input-when-focused: inset 0 0 0 1px; --box-shadow-for-calendar-menu-when-focused: 0 2px 5px 0px rgba(0, 0, 0, 0.15); + --box-shadow-for-table: 0 1px 5px 0 rgba(0, 0, 0, 0.05); --font-color-for-text: #1a1a1a; --font-color-for-text-when-disabled: hsl(232, 18%, 60%); --font-color-for-input: #1a1a1a; diff --git a/design-system/materials/custom-properties.json b/design-system/materials/custom-properties.json index c634863e14..482df7c096 100644 --- a/design-system/materials/custom-properties.json +++ b/design-system/materials/custom-properties.json @@ -124,6 +124,7 @@ "--shadow-14": "0 0 0.5px rgba(0, 0, 0, 0.1)", "--shadow-15": "0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)", "--shadow-16": "0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)", + "--shadow-17": "0 1px 5px 0 rgba(0, 0, 0, 0.05)", "--constraint-scale": "100%", "--constraint-1": "42px", "--constraint-2": "84px", @@ -312,6 +313,7 @@ "--box-shadow-for-view-switcher-when-selected": "none", "--box-shadow-for-select-input-when-focused": "inset 0 0 0 1px", "--box-shadow-for-calendar-menu-when-focused": "0 2px 5px 0px rgba(0, 0, 0, 0.15)", + "--box-shadow-for-table": "0 1px 5px 0 rgba(0, 0, 0, 0.05)", "--font-color-for-text": "#1a1a1a", "--font-color-for-text-when-disabled": "hsl(232, 18%, 60%)", "--font-color-for-input": "#1a1a1a", diff --git a/design-system/materials/internals/definition.yaml b/design-system/materials/internals/definition.yaml index f373de625e..cdbc4dc8ba 100644 --- a/design-system/materials/internals/definition.yaml +++ b/design-system/materials/internals/definition.yaml @@ -196,6 +196,7 @@ choiceGroupsByTheme: shadow-14: '0 0 0.5px rgba(0, 0, 0, 0.1)' shadow-15: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)' shadow-16: '0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)' + shadow-17: '0 1px 5px 0 rgba(0, 0, 0, 0.05)' constraints: label: Constraints prefix: constraint @@ -823,6 +824,8 @@ decisionGroupsByTheme: choice: 'inset 0 0 0 1px' box-shadow-for-calendar-menu-when-focused: choice: '0 2px 5px 0px rgba(0, 0, 0, 0.15)' + box-shadow-for-table: + choice: shadow-17 fontColors: label: Font Colors @@ -1247,7 +1250,7 @@ decisionGroupsByTheme: shadow-for-button-when-disabled: choice: shadow-0 shadow-for-card-when-raised: - choice: '0 1px 5px 0 rgba(0, 0, 0, 0.05)' + choice: shadow-17 shadow-for-input: choice: shadow-0 shadow-for-input-when-focused: diff --git a/design-system/src/design-tokens.ts b/design-system/src/design-tokens.ts index 2b8e7b7fdd..509ec287eb 100644 --- a/design-system/src/design-tokens.ts +++ b/design-system/src/design-tokens.ts @@ -135,6 +135,7 @@ export const themes = { shadow15: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)', shadow16: '0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)', + shadow17: '0 1px 5px 0 rgba(0, 0, 0, 0.05)', constraintScale: '100%', constraint1: '42px', constraint2: '84px', @@ -342,6 +343,7 @@ export const themes = { boxShadowForViewSwitcherWhenSelected: 'none', boxShadowForSelectInputWhenFocused: 'inset 0 0 0 1px', boxShadowForCalendarMenuWhenFocused: '0 2px 5px 0px rgba(0, 0, 0, 0.15)', + boxShadowForTable: '0 1px 5px 0 rgba(0, 0, 0, 0.05)', fontColorForText: '#1a1a1a', fontColorForTextWhenDisabled: 'hsl(232, 18%, 60%)', fontColorForInput: '#1a1a1a', @@ -699,6 +701,7 @@ const designTokens = { 'var(--shadow-15, 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12))', shadow16: 'var(--shadow-16, 0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25))', + shadow17: 'var(--shadow-17, 0 1px 5px 0 rgba(0, 0, 0, 0.05))', constraintScale: 'var(--constraint-scale, 100%)', constraint1: 'var(--constraint-1, 42px)', constraint2: 'var(--constraint-2, 84px)', @@ -1019,6 +1022,8 @@ const designTokens = { 'var(--box-shadow-for-select-input-when-focused, inset 0 0 0 1px)', boxShadowForCalendarMenuWhenFocused: 'var(--box-shadow-for-calendar-menu-when-focused, 0 2px 5px 0px rgba(0, 0, 0, 0.15))', + boxShadowForTable: + 'var(--box-shadow-for-table, 0 1px 5px 0 rgba(0, 0, 0, 0.05))', fontColorForText: 'var(--font-color-for-text, #1a1a1a)', fontColorForTextWhenDisabled: 'var(--font-color-for-text-when-disabled, hsl(232, 18%, 60%))', diff --git a/packages/components/data-table/src/cell.styles.tsx b/packages/components/data-table/src/cell.styles.tsx index a3a8c8cc9d..ec646b12e7 100644 --- a/packages/components/data-table/src/cell.styles.tsx +++ b/packages/components/data-table/src/cell.styles.tsx @@ -128,7 +128,7 @@ const BaseCell = styled.td` background-color: ${designTokens.colorSurface}; border-bottom: ${(props) => props.shouldRenderBottomBorder - ? `1px solid ${designTokens.colorNeutral90};` + ? `1px solid ${designTokens.colorNeutral95};` : 'none'}; font-size: ${designTokens.fontSizeForTable}; ${(props) => diff --git a/packages/components/data-table/src/data-table.styles.tsx b/packages/components/data-table/src/data-table.styles.tsx index 61c56f73ad..0e08528b85 100644 --- a/packages/components/data-table/src/data-table.styles.tsx +++ b/packages/components/data-table/src/data-table.styles.tsx @@ -48,6 +48,10 @@ type TTableContainer = { const TableContainer = styled.div` position: relative; z-index: 0; + box-shadow: ${designTokens.boxShadowForTable}; + border: 1px solid ${designTokens.colorNeutral95}; + border-radius: ${designTokens.borderRadius4}; + ${(props) => // this is needed in order to have a sticky header props.maxHeight ? `overflow-x: auto;` : ''}