From 5901df1cd5df9f57c29b0ff1f6b42c731677faa3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaime=20Go=CC=81mez=20Cimarro?= Date: Tue, 28 Nov 2023 12:13:21 +0100 Subject: [PATCH] feat(comunica): Design Changes. --- .idea/sonarlint/issuestore/index.pb | 22 +- .idea/sonarlint/securityhotspotstore/index.pb | 22 +- merged_tokens.json | 173 ++++++++------ packages/components/src/index.js | 1 + .../informative/ChatMessage/ChatMessage.js | 72 +++--- .../ChatMessage/ChatMessage.styles.js | 62 +++-- packages/components/src/tokens.compiled.js | 212 +++++++++++------- 7 files changed, 367 insertions(+), 197 deletions(-) diff --git a/.idea/sonarlint/issuestore/index.pb b/.idea/sonarlint/issuestore/index.pb index 459dd1522..29196be26 100644 --- a/.idea/sonarlint/issuestore/index.pb +++ b/.idea/sonarlint/issuestore/index.pb @@ -51,4 +51,24 @@ Hpackages/components/src/informative/ChatMessage/ChatMessage.constants.js,0/0/0 b 2packages/components/src/overlay/Popover/Popover.js,2/9/29770eaf36e8ec06aa05c7020bb0fc10ffd22edb n ->packages/components/src/informative/ChatMessage/ChatMessage.js,3/3/330088854447605ac7a103cb4dc1076c44ed6b14 \ No newline at end of file +>packages/components/src/informative/ChatMessage/ChatMessage.js,3/3/330088854447605ac7a103cb4dc1076c44ed6b14 +v +Fpackages/components/src/informative/UserDisplayItem/UserDisplayItem.js,5/7/573d7b17542f75351c0e249ab93359dc5f33508d +` +0packages/components/src/overlay/Drawer/Drawer.js,2/6/26fb71f397e5b9daa9acb99cfd205c800f6a4165 +_ +/packages/components/src/navigation/Tabs/Tabs.js,2/1/211a60de33ba4d877b02012f6a5f1f4b9925d9a4 +_ +/packages/components/lib/navigation/Tabs/Tabs.js,6/b/6b8d1e7bce63557e77aa68761dcbcf28b76852c0 +b +2packages/icons/src/solid/setting-menu-vertical.svg,6/0/60b344a7dc351ffdedfe29421c854dfe2b04a3de +_ +/packages/components/src/navigation/Menu/Menu.js,a/b/abbd7b3db4b04fa535644d97df09aa89429e9421 +` +0packages/components/src/navigation/Menu/Menu.mdx,d/f/dff48d484d680c30707b7708c0a091a3d95eba52 +g +7packages/components/src/navigation/Menu/Menu.stories.js,a/4/a496c9602d873584dd35e31949fb2f1b13fcc74a +P + packages/components/src/index.js,7/d/7deb43166b0f5546bd343d08eae4d9aded2d1403 +u +Epackages/components/src/navigation/MainNav/helpers/getUserFullName.js,b/e/be36e2f0978eff9d850394cd3ad71d2be97d3a9e \ No newline at end of file diff --git a/.idea/sonarlint/securityhotspotstore/index.pb b/.idea/sonarlint/securityhotspotstore/index.pb index dce679835..304112982 100644 --- a/.idea/sonarlint/securityhotspotstore/index.pb +++ b/.idea/sonarlint/securityhotspotstore/index.pb @@ -51,4 +51,24 @@ Hpackages/components/src/informative/ChatMessage/ChatMessage.constants.js,0/0/0 b 2packages/components/src/overlay/Popover/Popover.js,2/9/29770eaf36e8ec06aa05c7020bb0fc10ffd22edb n ->packages/components/src/informative/ChatMessage/ChatMessage.js,3/3/330088854447605ac7a103cb4dc1076c44ed6b14 \ No newline at end of file +>packages/components/src/informative/ChatMessage/ChatMessage.js,3/3/330088854447605ac7a103cb4dc1076c44ed6b14 +v +Fpackages/components/src/informative/UserDisplayItem/UserDisplayItem.js,5/7/573d7b17542f75351c0e249ab93359dc5f33508d +` +0packages/components/src/overlay/Drawer/Drawer.js,2/6/26fb71f397e5b9daa9acb99cfd205c800f6a4165 +_ +/packages/components/src/navigation/Tabs/Tabs.js,2/1/211a60de33ba4d877b02012f6a5f1f4b9925d9a4 +_ +/packages/components/lib/navigation/Tabs/Tabs.js,6/b/6b8d1e7bce63557e77aa68761dcbcf28b76852c0 +b +2packages/icons/src/solid/setting-menu-vertical.svg,6/0/60b344a7dc351ffdedfe29421c854dfe2b04a3de +_ +/packages/components/src/navigation/Menu/Menu.js,a/b/abbd7b3db4b04fa535644d97df09aa89429e9421 +` +0packages/components/src/navigation/Menu/Menu.mdx,d/f/dff48d484d680c30707b7708c0a091a3d95eba52 +g +7packages/components/src/navigation/Menu/Menu.stories.js,a/4/a496c9602d873584dd35e31949fb2f1b13fcc74a +P + packages/components/src/index.js,7/d/7deb43166b0f5546bd343d08eae4d9aded2d1403 +u +Epackages/components/src/navigation/MainNav/helpers/getUserFullName.js,b/e/be36e2f0978eff9d850394cd3ad71d2be97d3a9e \ No newline at end of file diff --git a/merged_tokens.json b/merged_tokens.json index 12d775097..aa0f071fd 100644 --- a/merged_tokens.json +++ b/merged_tokens.json @@ -843,6 +843,10 @@ "content": { "color": { "text": { + "dark": { + "value": "{core.color.tertiary.100}", + "type": "color" + }, "emphasis": { "value": "{core.color.neutral.800}", "type": "color" @@ -1515,7 +1519,7 @@ }, "overlay": { "default": { - "value": "rgb({core.color.neutral.100},0.5)", + "value": "{core.color.neutral.300}", "type": "color" } }, @@ -1861,6 +1865,10 @@ }, "icon": { "size": { + "1xs": { + "value": "{core.dimension.50}", + "type": "sizing" + }, "xsm": { "value": "{core.dimension.100}px", "type": "sizing" @@ -4187,21 +4195,15 @@ "content": { "typo": { "md": { - "value": { - "fontFamily": "{core.font.family.alt}", - "fontWeight": "{core.font.weight.medium}", - "lineHeight": "{core.font.lineHeight.300}px", - "fontSize": "{core.font.size.75}px" - }, + "value": "{global.content.typo.body.sm--medium}", + "type": "typography" + }, + "sm--regular": { + "value": "{global.content.typo.body.sm}", "type": "typography" }, "sm": { - "value": { - "fontFamily": "{core.font.family.alt}", - "fontWeight": "{core.font.weight.regular}", - "lineHeight": "{core.font.lineHeight.100}px", - "fontSize": "{core.font.size.50}px" - }, + "value": "{global.content.typo.body.xsm}", "type": "typography" } }, @@ -4337,6 +4339,12 @@ "value": "{global.control.size.600}", "type": "sizing" } + }, + "shadow": { + "hover": { + "value": "{button.shadow.hover}", + "type": "boxShadow" + } } }, "popover": { @@ -5408,12 +5416,7 @@ "tooltip": { "content": { "typo": { - "value": { - "fontFamily": "{core.font.family.main}", - "fontWeight": "{core.font.weight.medium}", - "lineHeight": "{core.font.lineHeight.200}", - "fontSize": "{core.font.size.75}" - }, + "value": "{global.content.typo.body.xsm}", "type": "typography" }, "color": { @@ -5438,7 +5441,7 @@ "type": "color" }, "default-reverse": { - "value": "{global.background.color.surface.default}", + "value": "{global.background.color.surface.muted}", "type": "color" } } @@ -5446,16 +5449,28 @@ "spacing": { "padding": { "vertical": { - "sm": { + "2xsm": { "value": "{global.spacing.padding.2xsm}", "type": "spacing" }, + "xsm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, "md": { "value": "{global.spacing.padding.sm}", "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" } }, "horizontal": { + "2xsm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, "sm": { "value": "{global.spacing.padding.xsm}", "type": "spacing" @@ -5476,6 +5491,21 @@ "value": "{global.border.radius.sm}", "type": "borderRadius" } + }, + "shadow": { + "default": { + "value": [ + { + "color": "rgba(221, 225, 230, 0.08)", + "type": "dropShadow", + "x": "0", + "y": "2", + "blur": "0", + "spread": "0" + } + ], + "type": "boxShadow" + } } }, "banner": { @@ -5944,53 +5974,43 @@ "stepper": { "content": { "typo": { - "value": { - "fontFamily": "{core.font.family.main}", - "fontWeight": "{core.font.weight.semiBold}", - "fontSize": "{core.font.size.75}", - "lineHeight": "{core.font.lineHeight.200}" - }, + "value": "{global.content.typo.body.sm--medium}", "type": "typography" }, "typo-pending": { - "value": { - "fontFamily": "{core.font.family.main}", - "fontWeight": "{core.font.weight.medium}", - "fontSize": "{core.font.size.75}", - "lineHeight": "{core.font.lineHeight.200}" - }, + "value": "{global.content.typo.body.sm}", "type": "typography" }, "color": { - "pending": { - "value": "{global.content.color.secondary.mutedSuble}", - "type": "color" - }, - "pending-text": { - "value": "{global.content.color.secondary.default}", + "default": { + "value": "{global.content.color.neutral.muted}", "type": "color" }, "active": { - "value": "{global.content.color.primary.default}", + "value": "{global.content.color.secondary.default}", "type": "color" }, "completed": { - "value": "{global.content.color.text.emphasis}", + "value": "{global.content.color.secondary.default}", "type": "color" }, - "default": { - "value": "{global.content.color.text.muted}", + "icon": { + "value": "{global.content.color.secondary.default}", "type": "color" } } }, "spacing": { "gap": { - "value": "{global.spacing.gap.sm}", + "value": "{global.spacing.gap.md}", "type": "spacing" }, "xsm": { - "value": "{global.spacing.gap.xsm}", + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "2xsm": { + "value": "{global.spacing.padding.2xsm}", "type": "spacing" }, "padding": { @@ -6006,21 +6026,21 @@ }, "background": { "color": { - "pending": { - "value": "{global.background.color.primary.verySubtle}", - "type": "color" - }, - "active": { - "value": "{global.background.color.primary.verySubtle}", + "default": { + "value": "{global.background.color.overlay.default}", "type": "color" }, "active--reverse": { - "value": "{global.background.color.surface.emphasis}", + "value": "{global.background.color.primary.subtle}", "type": "color" }, "completed": { "value": "{global.background.color.primary.default}", "type": "color" + }, + "active": { + "value": "{global.background.color.primary.default}", + "type": "color" } } }, @@ -6034,8 +6054,8 @@ "value": "{global.border.color.line.muted}", "type": "color" }, - "active--reverse": { - "value": "{global.border.color.line.default--reverse}", + "transaparet": { + "value": "{global.content.color.transparent}", "type": "color" }, "completed": { @@ -6057,12 +6077,16 @@ } }, "size": { + "xs": { + "value": "6px", + "type": "sizing" + }, "sm": { "value": "{global.icon.size.sm}", "type": "sizing" }, "md": { - "value": "{global.icon.size.lg}", + "value": "{global.icon.size.md}", "type": "sizing" }, "xlg": { @@ -6149,11 +6173,19 @@ "content": { "typo": { "md": { + "value": "{global.content.typo.body.sm}", + "type": "typography" + }, + "md--medium": { + "value": "{global.content.typo.body.sm--medium}", + "type": "typography" + }, + "sm": { "value": { "fontFamily": "{core.font.family.alt}", "fontWeight": "{core.font.weight.regular}", - "lineHeight": "{core.font.lineHeight.200}", - "fontSize": "{core.font.size.75}" + "lineHeight": "{core.font.lineHeight.100}", + "fontSize": "{core.font.size.50}" }, "type": "typography" }, @@ -6165,21 +6197,20 @@ "fontSize": "{core.font.size.75}" }, "type": "typography" - }, - "sm": { - "value": { - "fontFamily": "{core.font.family.alt}", - "fontWeight": "{core.font.weight.regular}", - "lineHeight": "{core.font.lineHeight.100}", - "fontSize": "{core.font.size.50}" - }, - "type": "typography" } }, "color": { "default": { "value": "{global.content.color.text.default}", "type": "color" + }, + "subtext": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "icon": { + "value": "{global.content.color.icon.dark}", + "type": "color" } } }, @@ -6188,6 +6219,10 @@ "default": { "value": "{global.background.color.surface.default}", "type": "color" + }, + "grey": { + "value": "{global.background.color.surface.subtle}", + "type": "color" } } }, @@ -6203,7 +6238,7 @@ } }, "width": { - "value": "{global.border.width.md}", + "value": "{global.border.width.sm}", "type": "borderWidth" }, "radius": { @@ -6220,6 +6255,10 @@ "md": { "value": "{global.spacing.gap.md}", "type": "spacing" + }, + "lg": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" } }, "gaps": { diff --git a/packages/components/src/index.js b/packages/components/src/index.js index e1d5a25f2..d68115b94 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -19,6 +19,7 @@ export { Skeleton, keyframes, Navbar, + Highlight } from '@mantine/core'; export * from '@mantine/spotlight'; export { diff --git a/packages/components/src/informative/ChatMessage/ChatMessage.js b/packages/components/src/informative/ChatMessage/ChatMessage.js index f1471fe96..1a8a030bb 100644 --- a/packages/components/src/informative/ChatMessage/ChatMessage.js +++ b/packages/components/src/informative/ChatMessage/ChatMessage.js @@ -1,48 +1,58 @@ import React from 'react'; import { Box } from '../../layout'; -import { UserDisplayItem } from '../UserDisplayItem'; import { ChatMessageStyles } from './ChatMessage.styles'; import { CHAT_MESSAGE_DEFAULT_PROPS, CHAT_MESSAGE_PROP_TYPES } from './ChatMessage.constants'; import { Highlight } from '@mantine/core'; +import { Avatar } from '../Avatar'; +import { getUserFullName } from '../../navigation/MainNav/helpers/getUserFullName'; const ChatMessage = ({ - message, - user, - isOwn, - isOnline, - locale, - selected, - highlight, - showUser = true, - isTeacher, - isAdmin, - ...props - }) => { - const { classes, cx } = ChatMessageStyles({ isOwn, isTeacher, isAdmin, selected }, { name: 'ChatMessage' }); + message, + user, + isOwn, + isOnline, + locale, + selected, + highlight, + showUser = true, + showUserName = true, + isTeacher, + isAdmin, + ...props +}) => { + const { classes, cx } = ChatMessageStyles( + { isOwn, isTeacher, isAdmin, selected }, + { name: 'ChatMessage' }, + ); + const fullName = getUserFullName(user); return ( - {showUser ? : null} + {showUser && !isOwn ? ( + + + + ) : null} - {message?.type === 'text' && ( - - + {!isOwn && showUserName && fullName && ( + + {fullName} + + )} + + {message?.type === 'text' && message?.content && ( + {message?.content} + )} + {message?.type === 'img' && ( + + + + )} + + {message?.date.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' })} - )} - {message?.type === 'img' && ( - - - - )} - - {message?.date.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' })} diff --git a/packages/components/src/informative/ChatMessage/ChatMessage.styles.js b/packages/components/src/informative/ChatMessage/ChatMessage.styles.js index bd6bd5b3d..c3579fe09 100644 --- a/packages/components/src/informative/ChatMessage/ChatMessage.styles.js +++ b/packages/components/src/informative/ChatMessage/ChatMessage.styles.js @@ -1,40 +1,64 @@ import { createStyles } from '@mantine/styles'; -import { getFontExpressive } from '../../theme.mixins'; export const ChatMessageStyles = createStyles((theme, { isOwn, isTeacher, isAdmin, selected }) => { - - let backgroundColor = theme.other.global.background.color.surface.default; - let borderColor = theme.other.global.border.color.line.muted; - if (isAdmin) borderColor = theme.other.global.border.color.line.emphasis; - if (isTeacher) borderColor = theme.other.global.border.color.primary.default; + const messageBox = {}; if (isOwn) { - borderColor = theme.other.global.background.color.surface.muted; - backgroundColor = theme.other.global.background.color.surface.muted; + messageBox.borderRight = `2px solid #878D96`; + } else { + messageBox.borderLeft = `2px solid #878D96`; } return { root: { - ...getFontExpressive(theme.fontSizes['2']), padding: theme.spacing[2], background: selected ? theme.other.global.background.color.primary.default : 'transparent', + display: 'flex', + justifyContent: 'end', + alignItems: 'end', + gap: theme.spacing[1], }, message: { - color: theme.other.global.content.color.text.muted, - ...theme.other.input.content.typo + color: theme.other.global.content.color.text.default, + fontFamily: 'Albert Sans', + fontSize: 14, + fontStyle: 'normal', + fontWeight: 400, + lineHeight: '20px', }, messageBox: { - marginTop: theme.spacing[2], - borderRadius: 4, - backgroundColor: `${backgroundColor}`, + marginTop: theme.spacing[4], padding: theme.spacing[2], - paddingBottom: theme.spacing[1], - border: `2px solid ${borderColor}` + paddingLeft: theme.spacing[3], + borderRadius: '2px 4px 4px 2px', + ...messageBox, + }, + messageBoxInner: { + display: 'flex', + alignItems: 'end', }, messageDate: { display: 'block', textAlign: 'right', - color: theme.other.global.content.color.text.subtle, - ...theme.other.input.content.typo - } + color: theme.other.global.content.color.text.muted, + fontFamily: 'Albert Sans', + fontSize: 12, + fontStyle: 'normal', + fontWeight: 400, + lineHeight: '16px', + }, + name: { + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + color: theme.other.global.content.color.text.muted, + fontFamily: 'Albert Sans', + fontSize: 12, + fontStyle: 'normal', + fontWeight: 400, + lineHeight: '16px', + }, + avatar: { + display: 'flex', + }, }; }); diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js index de53ba26c..ca38df630 100644 --- a/packages/components/src/tokens.compiled.js +++ b/packages/components/src/tokens.compiled.js @@ -1234,17 +1234,8 @@ export default { "type": "color" }, "hover--reverse-transparent": { - "value": "#ffffff", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - } + "value": "#ffffff26", + "type": "color" }, "down": { "value": "#F1FFBD", @@ -2207,7 +2198,16 @@ export default { "value": { "fontFamily": "Albert Sans", "fontWeight": 500, - "lineHeight": "24px", + "lineHeight": "20px", + "fontSize": "14px" + }, + "type": "typography" + }, + "sm--regular": { + "value": { + "fontFamily": "Albert Sans", + "fontWeight": 400, + "lineHeight": "20px", "fontSize": "14px" }, "type": "typography" @@ -2354,6 +2354,19 @@ export default { "value": "36px", "type": "sizing" } + }, + "shadow": { + "hover": { + "value": { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "#b4e600cc", + "type": "dropShadow" + }, + "type": "boxShadow" + } } }, "popover": { @@ -3465,9 +3478,9 @@ export default { "typo": { "value": { "fontFamily": "Albert Sans", - "fontWeight": 500, - "lineHeight": 20, - "fontSize": 14 + "fontWeight": 400, + "lineHeight": "16px", + "fontSize": "12px" }, "type": "typography" }, @@ -3493,7 +3506,7 @@ export default { "type": "color" }, "default-reverse": { - "value": "#ffffff", + "value": "#F2F4F8", "type": "color" } } @@ -3501,16 +3514,28 @@ export default { "spacing": { "padding": { "vertical": { - "sm": { + "2xsm": { "value": "4px", "type": "spacing" }, + "xsm": { + "value": "8px", + "type": "spacing" + }, "md": { "value": "12px", "type": "spacing" + }, + "sm": { + "value": "4px", + "type": "spacing" } }, "horizontal": { + "2xsm": { + "value": "4px", + "type": "spacing" + }, "sm": { "value": "8px", "type": "spacing" @@ -3531,6 +3556,21 @@ export default { "value": "2px", "type": "borderRadius" } + }, + "shadow": { + "default": { + "value": [ + { + "color": "#dde1e614", + "type": "dropShadow", + "x": 0, + "y": 2, + "blur": 0, + "spread": 0 + } + ], + "type": "boxShadow" + } } }, "banner": { @@ -4034,52 +4074,51 @@ export default { "typo": { "value": { "fontFamily": "Albert Sans", - "fontWeight": 600, - "fontSize": 14, - "lineHeight": 20 + "fontWeight": 500, + "lineHeight": "20px", + "fontSize": "14px" }, "type": "typography" }, "typo-pending": { "value": { "fontFamily": "Albert Sans", - "fontWeight": 500, - "fontSize": 14, - "lineHeight": 20 + "fontWeight": 400, + "lineHeight": "20px", + "fontSize": "14px" }, "type": "typography" }, "color": { - "pending": { - "value": "{global.content.color.secondary.mutedSuble}", - "type": "color", - "failedToResolve": true - }, - "pending-text": { - "value": "#0C1F22", + "default": { + "value": "#878D96", "type": "color" }, "active": { - "value": "#B4E600", + "value": "#0C1F22", "type": "color" }, "completed": { - "value": "#343A3F", + "value": "#0C1F22", "type": "color" }, - "default": { - "value": "#878D96", + "icon": { + "value": "#0C1F22", "type": "color" } } }, "spacing": { "gap": { - "value": "4px", + "value": "8px", "type": "spacing" }, "xsm": { - "value": "6px", + "value": "8px", + "type": "spacing" + }, + "2xsm": { + "value": "4px", "type": "spacing" }, "padding": { @@ -4095,23 +4134,21 @@ export default { }, "background": { "color": { - "pending": { - "value": "{global.background.color.primary.verySubtle}", - "type": "color", - "failedToResolve": true - }, - "active": { - "value": "{global.background.color.primary.verySubtle}", - "type": "color", - "failedToResolve": true + "default": { + "value": "#C1C7CD", + "type": "color" }, "active--reverse": { - "value": "#DDE1E6", + "value": "#F1FFBD", "type": "color" }, "completed": { "value": "#B4E600", "type": "color" + }, + "active": { + "value": "#B4E600", + "type": "color" } } }, @@ -4125,8 +4162,8 @@ export default { "value": "#C1C7CD", "type": "color" }, - "active--reverse": { - "value": "#ffffff", + "transaparet": { + "value": "transparent", "type": "color" }, "completed": { @@ -4148,12 +4185,16 @@ export default { } }, "size": { + "xs": { + "value": "6px", + "type": "sizing" + }, "sm": { "value": "12px", "type": "sizing" }, "md": { - "value": "20px", + "value": "16px", "type": "sizing" }, "xlg": { @@ -4243,17 +4284,17 @@ export default { "value": { "fontFamily": "Albert Sans", "fontWeight": 400, - "lineHeight": 20, - "fontSize": 14 + "lineHeight": "20px", + "fontSize": "14px" }, "type": "typography" }, - "md--bold": { + "md--medium": { "value": { "fontFamily": "Albert Sans", "fontWeight": 500, - "lineHeight": 20, - "fontSize": 14 + "lineHeight": "20px", + "fontSize": "14px" }, "type": "typography" }, @@ -4265,12 +4306,29 @@ export default { "fontSize": 12 }, "type": "typography" + }, + "md--bold": { + "value": { + "fontFamily": "Albert Sans", + "fontWeight": 500, + "lineHeight": 20, + "fontSize": 14 + }, + "type": "typography" } }, "color": { "default": { "value": "#4D5358", "type": "color" + }, + "subtext": { + "value": "#878D96", + "type": "color" + }, + "icon": { + "value": "#2F463F", + "type": "color" } } }, @@ -4279,6 +4337,10 @@ export default { "default": { "value": "#ffffff", "type": "color" + }, + "grey": { + "value": "#F8F9FB", + "type": "color" } } }, @@ -4294,7 +4356,7 @@ export default { } }, "width": { - "value": "2px", + "value": "1px", "type": "borderWidth" }, "radius": { @@ -4311,6 +4373,10 @@ export default { "md": { "value": "8px", "type": "spacing" + }, + "lg": { + "value": "16px", + "type": "spacing" } }, "gaps": { @@ -4864,30 +4930,12 @@ export default { "color": { "primary": { "default": { - "value": "#4D5358", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - } + "value": "#4d535866", + "type": "color" }, "hover": { - "value": "#4D5358", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.7", - "space": "lch" - } - } - } + "value": "#4d5358b3", + "type": "color" }, "down": { "value": "#4D5358", @@ -5735,6 +5783,10 @@ export default { "content": { "color": { "text": { + "dark": { + "value": "#2F463F", + "type": "color" + }, "emphasis": { "value": "#343A3F", "type": "color" @@ -6407,7 +6459,7 @@ export default { }, "overlay": { "default": { - "value": "#f2f4f880", + "value": "#C1C7CD", "type": "color" } }, @@ -6754,6 +6806,10 @@ export default { }, "icon": { "size": { + "1xs": { + "value": 4, + "type": "sizing" + }, "xsm": { "value": "8px", "type": "sizing"