From 4ea6e47d24dc7201bbc4a40570b935fd0f16e2dc Mon Sep 17 00:00:00 2001 From: Jaalah Ramos Date: Tue, 19 Aug 2025 13:28:18 -0400 Subject: [PATCH 1/3] chore: [M3-10475] - Update to linode/design-language-system v5.0.0 --- packages/manager/package.json | 2 +- .../LinodesLanding/DisplayGroupedLinodes.tsx | 6 ++-- .../Linodes/LinodesLanding/DisplayLinodes.tsx | 7 +++-- packages/ui/package.json | 2 +- packages/ui/src/foundations/themes/light.ts | 30 +++++++++++-------- pnpm-lock.yaml | 24 +++++++-------- 6 files changed, 41 insertions(+), 30 deletions(-) diff --git a/packages/manager/package.json b/packages/manager/package.json index 69d93b1aaca..66a7d4ac60c 100644 --- a/packages/manager/package.json +++ b/packages/manager/package.json @@ -24,7 +24,7 @@ "@fontsource/nunito-sans": "^5.1.1", "@hookform/resolvers": "3.9.1", "@linode/api-v4": "workspace:*", - "@linode/design-language-system": "^4.0.0", + "@linode/design-language-system": "^5.0.0", "@linode/queries": "workspace:*", "@linode/search": "workspace:*", "@linode/shared": "workspace:*", diff --git a/packages/manager/src/features/Linodes/LinodesLanding/DisplayGroupedLinodes.tsx b/packages/manager/src/features/Linodes/LinodesLanding/DisplayGroupedLinodes.tsx index 1b4244a0f98..9f2cabe2bb3 100644 --- a/packages/manager/src/features/Linodes/LinodesLanding/DisplayGroupedLinodes.tsx +++ b/packages/manager/src/features/Linodes/LinodesLanding/DisplayGroupedLinodes.tsx @@ -162,9 +162,11 @@ export const DisplayGroupedLinodes = (props: DisplayGroupedLinodesProps) => { onClick={toggleGroupLinodes} sx={(theme) => ({ ':hover': { - color: theme.tokens.color.Brand[60], + color: + theme.tokens.component.Table.HeaderNested.Icon.Hover, }, - color: theme.tokens.component.Table.HeaderNested.Icon, + color: + theme.tokens.component.Table.HeaderNested.Icon.Default, })} > diff --git a/packages/manager/src/features/Linodes/LinodesLanding/DisplayLinodes.tsx b/packages/manager/src/features/Linodes/LinodesLanding/DisplayLinodes.tsx index 44c940a1df9..f389348ec24 100644 --- a/packages/manager/src/features/Linodes/LinodesLanding/DisplayLinodes.tsx +++ b/packages/manager/src/features/Linodes/LinodesLanding/DisplayLinodes.tsx @@ -222,10 +222,13 @@ export const DisplayLinodes = React.memo((props: DisplayLinodesProps) => { onClick={toggleGroupLinodes} sx={(theme) => ({ ':hover': { - color: theme.tokens.color.Brand[60], + color: + theme.tokens.component.Table.HeaderNested.Icon + .Hover, }, color: - theme.tokens.component.Table.HeaderNested.Icon, + theme.tokens.component.Table.HeaderNested.Icon + .Default, })} > diff --git a/packages/ui/package.json b/packages/ui/package.json index d3a0a814dec..ff24bce8aa9 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -18,7 +18,7 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@linode/design-language-system": "^4.0.0", + "@linode/design-language-system": "^5.0.0", "@mui/icons-material": "^7.1.0", "@mui/material": "^7.1.0", "@mui/utils": "^7.1.0", diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts index 2216cb7f23c..3542ac07959 100644 --- a/packages/ui/src/foundations/themes/light.ts +++ b/packages/ui/src/foundations/themes/light.ts @@ -236,14 +236,6 @@ const graphTransparency = '0.7'; const spacing = 8; -const MuiTableHeadSvgStyles = { - svg: { - path: { - fill: Color.Brand[90], - }, - }, -}; - const MuiTableZebraHoverStyles = { '&:not(.disabled-row)': { '&.MuiTableRow-hover:hover, &.Mui-selected, &.Mui-selected:hover': { @@ -1561,10 +1553,20 @@ export const lightTheme: ThemeOptions = { }, // Icons in TH (i.e.: Summary View, Group by Tag) '.MuiIconButton-root': { - '&.MuiIconButton-isActive': MuiTableHeadSvgStyles, + '&.MuiIconButton-isActive': { + svg: { + path: { + fill: Table.HeaderNested.Icon.Active, + }, + }, + }, ':hover': { color: Color.Brand[60], - ...MuiTableHeadSvgStyles, + svg: { + path: { + fill: Table.HeaderNested.Icon.Hover, + }, + }, }, }, borderBottom: `1px solid ${Border.Normal}`, @@ -1643,16 +1645,20 @@ export const lightTheme: ThemeOptions = { color: Table.HeaderNested.Text, }, ':hover, :focus': { - ...MuiTableHeadSvgStyles, color: Color.Brand[90], cursor: 'pointer', + svg: { + path: { + fill: Table.HeaderNested.Icon.Hover, + }, + }, }, fontSize: Font.FontSize.Xs, svg: { height: '16px', margin: `0 ${Spacing.S4}`, path: { - fill: Table.HeaderNested.Icon, + fill: Table.HeaderNested.Icon.Default, }, width: '16px', }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6849e63ed86..c736421ebee 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -147,8 +147,8 @@ importers: specifier: workspace:* version: link:../api-v4 '@linode/design-language-system': - specifier: ^4.0.0 - version: 4.0.0 + specifier: ^5.0.0 + version: 5.0.0 '@linode/queries': specifier: workspace:* version: link:../queries @@ -211,7 +211,7 @@ importers: version: 5.5.0 akamai-cds-react-components: specifier: 0.0.1-alpha.11 - version: 0.0.1-alpha.11(@linode/design-language-system@4.0.0)(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + version: 0.0.1-alpha.11(@linode/design-language-system@5.0.0)(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) algoliasearch: specifier: ^4.14.3 version: 4.24.0 @@ -642,8 +642,8 @@ importers: specifier: ^11.11.0 version: 11.13.5(@emotion/react@11.13.5(@types/react@19.1.6)(react@19.1.0))(@types/react@19.1.6)(react@19.1.0) '@linode/design-language-system': - specifier: ^4.0.0 - version: 4.0.0 + specifier: ^5.0.0 + version: 5.0.0 '@mui/icons-material': specifier: ^7.1.0 version: 7.1.0(@mui/material@7.1.0(@emotion/react@11.13.5(@types/react@19.1.6)(react@19.1.0))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@19.1.6)(react@19.1.0))(@types/react@19.1.6)(react@19.1.0))(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(@types/react@19.1.6)(react@19.1.0) @@ -1410,8 +1410,8 @@ packages: '@kwsites/promise-deferred@1.1.1': resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==} - '@linode/design-language-system@4.0.0': - resolution: {integrity: sha512-SKM4AG0GpFjgirKI+7bG3RT6ai3VU7MJJLUvaZsHf0OgmEJ25qWH7DqGOx5FWSTtzX0YemJSrwnKMpL+3CLawg==} + '@linode/design-language-system@5.0.0': + resolution: {integrity: sha512-yU2DN/UFt7xokb6sgsrPNSNFfjpKq8/3PbM7pRgXGcNbFKf0thJ83Ib7rHyWAevrbxU22cdl/KsSOa4POYja3Q==} '@linode/eslint-plugin-cloud-manager@0.0.11': resolution: {integrity: sha512-QKb4IqwTcpifYKnCHE70EXPW6NHO5aJAUKn3lx+cuh5MJSU5IFvtcN4ZhNHwtOlI4nIsNDEP+Bc8JaMT/YvfFQ==} @@ -6725,7 +6725,7 @@ snapshots: '@kwsites/promise-deferred@1.1.1': {} - '@linode/design-language-system@4.0.0': {} + '@linode/design-language-system@5.0.0': {} '@linode/eslint-plugin-cloud-manager@0.0.11(eslint@9.31.0(jiti@2.4.2))': dependencies: @@ -7918,19 +7918,19 @@ snapshots: json-schema-traverse: 0.4.1 uri-js: 4.4.1 - akamai-cds-react-components@0.0.1-alpha.11(@linode/design-language-system@4.0.0)(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0): + akamai-cds-react-components@0.0.1-alpha.11(@linode/design-language-system@5.0.0)(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0): dependencies: '@lit/react': 1.0.7(@types/react@19.1.6) - akamai-cds-web-components: 0.0.1-alpha.11(@linode/design-language-system@4.0.0) + akamai-cds-web-components: 0.0.1-alpha.11(@linode/design-language-system@5.0.0) react: 19.1.0 react-dom: 19.1.0(react@19.1.0) transitivePeerDependencies: - '@linode/design-language-system' - '@types/react' - akamai-cds-web-components@0.0.1-alpha.11(@linode/design-language-system@4.0.0): + akamai-cds-web-components@0.0.1-alpha.11(@linode/design-language-system@5.0.0): dependencies: - '@linode/design-language-system': 4.0.0 + '@linode/design-language-system': 5.0.0 lit: 3.3.0 algoliasearch@4.24.0: From 094cde6f21c6e5be96345791bc2badb8ce8d3537 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos Date: Tue, 19 Aug 2025 14:52:05 -0400 Subject: [PATCH 2/3] Update dark mode --- .../LinodesLanding/DisplayGroupedLinodes.tsx | 2 +- .../Linodes/LinodesLanding/DisplayLinodes.tsx | 2 +- packages/ui/src/foundations/themes/dark.ts | 36 +++++++++++-------- packages/ui/src/foundations/themes/light.ts | 6 ++-- 4 files changed, 26 insertions(+), 20 deletions(-) diff --git a/packages/manager/src/features/Linodes/LinodesLanding/DisplayGroupedLinodes.tsx b/packages/manager/src/features/Linodes/LinodesLanding/DisplayGroupedLinodes.tsx index 9f2cabe2bb3..9aca7c266c7 100644 --- a/packages/manager/src/features/Linodes/LinodesLanding/DisplayGroupedLinodes.tsx +++ b/packages/manager/src/features/Linodes/LinodesLanding/DisplayGroupedLinodes.tsx @@ -161,7 +161,7 @@ export const DisplayGroupedLinodes = (props: DisplayGroupedLinodesProps) => { disableRipple onClick={toggleGroupLinodes} sx={(theme) => ({ - ':hover': { + ':hover, :focus': { color: theme.tokens.component.Table.HeaderNested.Icon.Hover, }, diff --git a/packages/manager/src/features/Linodes/LinodesLanding/DisplayLinodes.tsx b/packages/manager/src/features/Linodes/LinodesLanding/DisplayLinodes.tsx index f389348ec24..476b0c1be19 100644 --- a/packages/manager/src/features/Linodes/LinodesLanding/DisplayLinodes.tsx +++ b/packages/manager/src/features/Linodes/LinodesLanding/DisplayLinodes.tsx @@ -221,7 +221,7 @@ export const DisplayLinodes = React.memo((props: DisplayLinodesProps) => { disableRipple onClick={toggleGroupLinodes} sx={(theme) => ({ - ':hover': { + ':hover, :focus': { color: theme.tokens.component.Table.HeaderNested.Icon .Hover, diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts index ca3dda973a6..5ab0647d149 100644 --- a/packages/ui/src/foundations/themes/dark.ts +++ b/packages/ui/src/foundations/themes/dark.ts @@ -196,14 +196,6 @@ const genericTableHeaderStyle = { }, }; -const MuiTableHeadSvgStyles = { - svg: { - path: { - fill: Color.Brand[60], - }, - }, -}; - const MuiTableZebraHoverStyles = { '&:not(.disabled-row)': { '&.MuiTableRow-hover:hover, &.Mui-selected, &.Mui-selected:hover': { @@ -1082,10 +1074,20 @@ export const darkTheme: ThemeOptions = { }, // Icons in TH (i.e.: Summary View, Group by Tag) '.MuiIconButton-root': { - '&.MuiIconButton-isActive': MuiTableHeadSvgStyles, - ':hover': { - color: Color.Brand[60], - ...MuiTableHeadSvgStyles, + '&.MuiIconButton-isActive': { + svg: { + path: { + fill: Table.HeaderNested.Icon.Active, + }, + }, + }, + ':hover, :focus': { + color: Table.HeaderNested.Icon.Hover, + svg: { + path: { + fill: Table.HeaderNested.Icon.Hover, + }, + }, }, svg: { path: { @@ -1147,9 +1149,13 @@ export const darkTheme: ThemeOptions = { '&.Mui-active': { color: Table.HeaderNested.Text, }, - ':hover': { - ...MuiTableHeadSvgStyles, - color: Color.Brand[60], + ':hover, :focus': { + color: Table.HeaderNested.Icon.Hover, + svg: { + path: { + fill: Table.HeaderNested.Icon.Hover, + }, + }, }, svg: { path: { diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts index 3542ac07959..beb2b1a7fda 100644 --- a/packages/ui/src/foundations/themes/light.ts +++ b/packages/ui/src/foundations/themes/light.ts @@ -1560,8 +1560,8 @@ export const lightTheme: ThemeOptions = { }, }, }, - ':hover': { - color: Color.Brand[60], + ':hover, :focus': { + color: Table.HeaderNested.Icon.Hover, svg: { path: { fill: Table.HeaderNested.Icon.Hover, @@ -1645,7 +1645,7 @@ export const lightTheme: ThemeOptions = { color: Table.HeaderNested.Text, }, ':hover, :focus': { - color: Color.Brand[90], + color: Table.HeaderNested.Icon.Hover, cursor: 'pointer', svg: { path: { From bcf4d2edfb0f1a483ac0625caba10010fbb13a71 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos Date: Tue, 19 Aug 2025 14:57:57 -0400 Subject: [PATCH 3/3] Add changesets --- .../manager/.changeset/pr-12728-changed-1755629789134.md | 5 +++++ packages/ui/.changeset/pr-12728-changed-1755629748985.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 packages/manager/.changeset/pr-12728-changed-1755629789134.md create mode 100644 packages/ui/.changeset/pr-12728-changed-1755629748985.md diff --git a/packages/manager/.changeset/pr-12728-changed-1755629789134.md b/packages/manager/.changeset/pr-12728-changed-1755629789134.md new file mode 100644 index 00000000000..9c72fbb8dc4 --- /dev/null +++ b/packages/manager/.changeset/pr-12728-changed-1755629789134.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Changed +--- + +Update `Table.HeaderNested.Icon` component to use new Default, Hover, and Active design tokens ([#12728](https://github.com/linode/manager/pull/12728)) diff --git a/packages/ui/.changeset/pr-12728-changed-1755629748985.md b/packages/ui/.changeset/pr-12728-changed-1755629748985.md new file mode 100644 index 00000000000..228512086a6 --- /dev/null +++ b/packages/ui/.changeset/pr-12728-changed-1755629748985.md @@ -0,0 +1,5 @@ +--- +"@linode/ui": Changed +--- + +Update sort icon tokens to use separate Default, Hover, and Active tokens for each table header type ([#12728](https://github.com/linode/manager/pull/12728))