From 939f35b6abbc704d0c9a7004677e4b9441f0f31b Mon Sep 17 00:00:00 2001 From: Zohar Manor-Abel Date: Tue, 16 Jun 2026 16:27:04 +0100 Subject: [PATCH 1/2] Updated some aspects of DS - docs and colours - practical guidance - fix mismatch info colour - Updated light ds-grey-200 --- .storybook/storybook.css | 4 ++-- src/storybook/PracticalGuidance.mdx | 12 ++++++++---- src/styles/diamondDS/DiamondDSTokens.css | 5 +---- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index ffbe7148..837d1bc7 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -14,7 +14,7 @@ --sb-ds-background: #f6f6f9; --sb-ds-surface: #ffffff; --sb-ds-surface-container: #eef1f5; - --sb-ds-surface-container-high: #e6e9f0; + --sb-ds-surface-container-high: #eaedf3; --sb-ds-on-surface: #1a1c23; --sb-ds-on-surface-variant: #505563; @@ -27,7 +27,7 @@ --sb-ds-success: #24a148; --sb-ds-warning: #f1c21b; --sb-ds-danger: #da1e28; - --sb-ds-info: #3d1380; + --sb-ds-info: #355ec9; --sb-ds-brand: #202945; } diff --git a/src/storybook/PracticalGuidance.mdx b/src/storybook/PracticalGuidance.mdx index 42a5619c..ff1230b1 100644 --- a/src/storybook/PracticalGuidance.mdx +++ b/src/storybook/PracticalGuidance.mdx @@ -84,16 +84,18 @@ styles. Build with existing components and patterns before creating new ones. -Components should keep interfaces predictable, readable, and consistent. +Components should keep interfaces predictable, efficient, readable, and consistent. Users should be able to understand how an interface behaves, complete common tasks with minimal effort, and recognise the meaning of visual cues without additional explanation.

✅ Do

    -
  • Reuse established layouts and behaviours.
    • +
  • Reuse established layouts, behaviours, and interaction patterns.
  • Use standard component variants consistently.
    • -
  • Keep disabled and error states visually clear.
    • -
  • Use spacing and typography for hierarchy.
    • +
  • Minimise unnecessary steps for common tasks.
    • +
  • Use spacing, typography, and colour to create clear hierarchy.
    • +
  • Keep disabled, read-only, selected, and error states visually distinct.
    • +
  • Use visual styling that matches the meaning being communicated.
@@ -103,6 +105,8 @@ Components should keep interfaces predictable, readable, and consistent.
  • Don’t restyle components screen by screen.
  • Don’t introduce custom colours unnecessarily.
  • Don’t create multiple patterns for the same interaction.
    • +
  • Don't require extra interactions when a direct action would be expected.
    • +
  • Don't use error or warning styling for normal states.
  • Don’t override the theme without a reusable reason.
    • diff --git a/src/styles/diamondDS/DiamondDSTokens.css b/src/styles/diamondDS/DiamondDSTokens.css index c21d6db3..9325806f 100644 --- a/src/styles/diamondDS/DiamondDSTokens.css +++ b/src/styles/diamondDS/DiamondDSTokens.css @@ -2,7 +2,7 @@ /* Neutral primitives */ --ds-grey-50: #f8f8fa; --ds-grey-100: #eef1f5; - --ds-grey-200: #e6e9f0; + --ds-grey-200: #eaedf3; --ds-grey-300: #dde1e8; --ds-grey-400: #bcc2cd; --ds-grey-500: #a5acb8; @@ -55,8 +55,6 @@ --ds-elevation-23: #eef1f5; --ds-elevation-24: #eef1f5; - - /* Neutral roles */ --ds-background: #f6f6f9; --ds-background-channel: 246 246 249; @@ -297,7 +295,6 @@ --ds-elevation-23: #2a3140; --ds-elevation-24: #2c3140; - /* Neutral roles */ --ds-background: var(--ds-grey-dark-800); --ds-background-channel: 14 16 23; From 1ff4f5b8464906b8c2eee5e6e7ec808f682efa85 Mon Sep 17 00:00:00 2001 From: Zohar Manor-Abel Date: Wed, 17 Jun 2026 15:46:48 +0100 Subject: [PATCH 2/2] Made sure previews are not affected by storybook.css --- .storybook/storybook.css | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 837d1bc7..5a92c1f2 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -1,4 +1,4 @@ -:root { +:root:not(.MuiTypography-root) { --sb-ds-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; @@ -14,7 +14,7 @@ --sb-ds-background: #f6f6f9; --sb-ds-surface: #ffffff; --sb-ds-surface-container: #eef1f5; - --sb-ds-surface-container-high: #eaedf3; + --sb-ds-surface-container-high: #e6e9f0; --sb-ds-on-surface: #1a1c23; --sb-ds-on-surface-variant: #505563; @@ -27,20 +27,20 @@ --sb-ds-success: #24a148; --sb-ds-warning: #f1c21b; --sb-ds-danger: #da1e28; - --sb-ds-info: #355ec9; + --sb-ds-info: #3d1380; --sb-ds-brand: #202945; } /* Applied to all of Storybook, including the UI and Docs */ -body .sbdocs { +body .sbdocs:not(.MuiTypography-root) { background-color: var(--sb-ds-background) !important; } /* Base font */ -.sbdocs, -.sbdocs p, -.sbdocs li { +.sbdocs:not(.MuiTypography-root), +.sbdocs p:not(.MuiTypography-root), +.sbdocs li:not(.MuiTypography-root) { font-family: var(--sb-ds-font-body); } @@ -51,22 +51,22 @@ body .sbdocs { font-family: var(--sb-ds-font-heading); } -.sbdocs h2, -.sbdocs h3, -.sbdocs h4, -.sbdocs h5, -.sbdocs h6, -table th, -table td { +.sbdocs h2:not(.MuiTypography-root), +.sbdocs h3:not(.MuiTypography-root), +.sbdocs h4:not(.MuiTypography-root), +.sbdocs h5:not(.MuiTypography-root), +.sbdocs h6:not(.MuiTypography-root), +table th:not(.MuiTypography-root), +table td:not(.MuiTypography-root) { font-family: var(--sb-ds-font-body); } /* Code uses IBM Plex Mono */ -code, -.sbdocs code, -.sbdocs pre, -.sbdocs kbd, -.sbdocs samp, -.token { +code:not(.MuiTypography-root), +.sbdocs code:not(.MuiTypography-root), +.sbdocs pre:not(.MuiTypography-root), +.sbdocs kbd:not(.MuiTypography-root), +.sbdocs samp:not(.MuiTypography-root), +.token:not(.MuiTypography-root) { font-family: var(--sb-ds-font-mono); }