Themes: Update themes border radius (#111478)

* Themes: Update themes border radius * Update * md, sm, lg * Fixes * Updated snapshot * update * Update * Update * Fixes --------- Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
2025-09-25 14:53:54 +02:00
parent 1f84b979a2
commit 25d1a03187
21 changed files with 39 additions and 48 deletions
@@ -7,8 +7,28 @@ export interface ThemeShape {
  radius: Radii;
 }

-interface Radii {
+export interface Radii {
+  /**
+   * Use for most things (inputs, buttons, cards, panels, etc)
+   * Same as `md`
+   */
  default: string;
+  /**
+   * Use for most things (inputs, buttons, cards, panels, etc)
+   * Same as `default`
+   */
+  md: string;
+  /**
+   * Use for smaller things like chips, tags and badges
+   */
+  sm: string;
+  /**
+   * Use for large things, like modals
+   */
+  lg: string;
+  /**
+   * Used to create maximum half circle sides (e.g. for pills)
+   */
  pill: string;
  circle: string;
 }
@@ -19,10 +39,13 @@ export interface ThemeShapeInput {
 }

 export function createShape(options: ThemeShapeInput): ThemeShape {
-  const baseBorderRadius = options.borderRadius ?? 2;
+  const baseBorderRadius = options.borderRadius ?? 6;

  const radius = {
    default: `${baseBorderRadius}px`,
+    md: `${baseBorderRadius}px`,
+    sm: `${Math.ceil(baseBorderRadius * (2 / 3))}px`, // for default base becomes 4
+    lg: `${Math.ceil(baseBorderRadius * (5 / 3))}px`, // for default base becomes 10
    pill: '9999px',
    circle: '100%',
  };
@@ -48,9 +48,6 @@ const aubergineTheme: NewThemeOptions = {
    hoverFactor: 0.07,
    tonalOffset: 0.15,
  },
-  shape: {
-    borderRadius: 6,
-  },
 };

 export default aubergineTheme;
@@ -70,9 +70,6 @@ const desertBloomTheme: NewThemeOptions = {
    hoverFactor: 0.03,
    tonalOffset: 0.15,
  },
-  shape: {
-    borderRadius: 6,
-  },
 };

 export default desertBloomTheme;
@@ -60,9 +60,6 @@ const gildedGroveTheme: NewThemeOptions = {
    hoverFactor: 0.03,
    tonalOffset: 0.15,
  },
-  shape: {
-    borderRadius: 5,
-  },
 };

 export default gildedGroveTheme;
@@ -75,9 +75,6 @@ const gloomTheme: NewThemeOptions = {
    hoverFactor: 0.03,
    tonalOffset: 0.15,
  },
-  shape: {
-    borderRadius: 5,
-  },
 };

 export default gloomTheme;
@@ -48,9 +48,6 @@ const marsTheme: NewThemeOptions = {
    hoverFactor: 0.05,
    tonalOffset: 0.2,
  },
-  shape: {
-    borderRadius: 4,
-  },
 };

 export default marsTheme;
@@ -74,9 +74,6 @@ const sapphireDuskTheme: NewThemeOptions = {
    hoverFactor: 0.03,
    tonalOffset: 0.15,
  },
-  shape: {
-    borderRadius: 5,
-  },
 };

 export default sapphireDuskTheme;
@@ -48,9 +48,6 @@ const synthwaveTheme: NewThemeOptions = {
    hoverFactor: 0.03,
    tonalOffset: 0.15,
  },
-  shape: {
-    borderRadius: 6,
-  },
 };

 export default synthwaveTheme;
@@ -48,9 +48,6 @@ const tronTheme: NewThemeOptions = {
    hoverFactor: 0.05,
    tonalOffset: 0.2,
  },
-  shape: {
-    borderRadius: 6,
-  },
 };

 export default tronTheme;
@@ -48,9 +48,6 @@ const victorianTheme: NewThemeOptions = {
    hoverFactor: 0.07,
    tonalOffset: 0.15,
  },
-  shape: {
-    borderRadius: 6,
-  },
  typography: {
    fontFamily: '"Georgia", "Times New Roman", serif',
    fontFamilyMonospace: "'Courier New', monospace",
@@ -48,9 +48,6 @@ const zenTheme: NewThemeOptions = {
    hoverFactor: 0.03,
    tonalOffset: 0.2,
  },
-  shape: {
-    borderRadius: 8,
-  },
 };

 export default zenTheme;
@@ -81,7 +81,7 @@ const getStyles = (theme: GrafanaTheme2, color: BadgeColor) => {
    wrapper: css({
      display: 'inline-flex',
      padding: '1px 4px',
-      borderRadius: theme.shape.radius.default,
+      borderRadius: theme.shape.radius.sm,
      background: bgColor,
      border: `1px solid ${borderColor}`,
      color: textColor,
@@ -43,7 +43,7 @@ ValuePill.displayName = 'ValuePill';
 const getValuePillStyles = (theme: GrafanaTheme2, disabled?: boolean) => ({
  wrapper: css({
    display: 'inline-flex',
-    borderRadius: theme.shape.radius.default,
+    borderRadius: theme.shape.radius.sm,
    color: theme.colors.text.primary,
    background: theme.colors.background.secondary,
    padding: theme.spacing(0.25),
@@ -67,7 +67,7 @@ const getValuePillStyles = (theme: GrafanaTheme2, disabled?: boolean) => ({

  separator: css({
    background: theme.colors.border.weak,
-    width: '2px',
+    width: '1px',
    height: '100%',
    marginRight: theme.spacing(0.5),
  }),
@@ -3,7 +3,7 @@
 exports[`CustomScrollbar renders correctly 1`] = `
 <div>
  <div
-    class="css-rzpihd"
+    class="css-1bz6b2c"
    style="position: relative; overflow: hidden; width: 100%; height: auto; min-height: 0; max-height: 100%;"
  >
    <div
@@ -183,7 +183,7 @@ export const getCheckboxStyles = (theme: GrafanaTheme2, invalid = false) => {
      display: 'inline-block',
      width: theme.spacing(checkboxSize),
      height: theme.spacing(checkboxSize),
-      borderRadius: theme.shape.radius.default,
+      borderRadius: theme.shape.radius.sm,
      background: theme.components.input.background,
      border: `1px solid ${getBorderColor(theme.components.input.borderColor)}`,

@@ -3,15 +3,13 @@ import { css } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';

 export const getModalStyles = (theme: GrafanaTheme2) => {
-  const borderRadius = theme.shape.radius.default;
-
  return {
    modal: css({
      position: 'fixed',
      zIndex: theme.zIndex.modal,
      background: theme.colors.background.primary,
      boxShadow: theme.shadows.z3,
-      borderRadius,
+      borderRadius: theme.shape.radius.lg,
      border: `1px solid ${theme.colors.border.weak}`,
      backgroundClip: 'padding-box',
      outline: 'none',
@@ -127,7 +127,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
      alignItems: 'center',
      lineHeight: 1,
      background: theme.colors.background.secondary,
-      borderRadius: theme.shape.radius.default,
+      borderRadius: theme.shape.radius.sm,
      margin: theme.spacing(0.25, 1, 0.25, 0),
      padding: theme.spacing(0.25, 0, 0.25, 1),
      color: theme.colors.text.primary,
@@ -85,7 +85,7 @@ const getTagStyles = (theme: GrafanaTheme2, name: string, colorIndex?: number) =
      whiteSpace: 'pre',
      textShadow: 'none',
      padding: '3px 6px',
-      borderRadius: theme.shape.radius.default,
+      borderRadius: theme.shape.radius.sm,
    }),
    hover: css({
      '&:hover': {
@@ -19,7 +19,7 @@ exports[`VariableQueryEditor renders correctly 1`] = `
    <div>
      <div>
        <div
-          class="css-1d4urid-input-wrapper css-smf98s"
+          class="css-j1vt9l-input-wrapper css-smf98s"
        >
          <span
            class="css-1f43avz-a11yText-A11yText"
@@ -132,9 +132,9 @@ $headings-line-height: 1.5 !default;

 $border-width: 1px !default;

-$border-radius: 2px !default;
-$border-radius-lg: 6px !default;
-$border-radius-sm: 2px !default;
+$border-radius: 6px !default;
+$border-radius-lg: 10px !default;
+$border-radius-sm: 4px !default;

 // Page

@@ -131,8 +131,8 @@ $headings-line-height: ${theme.typography.bodySmall.lineHeight} !default;
 $border-width: 1px !default;

 $border-radius: ${theme.shape.radius.default} !default;
-$border-radius-lg: ${theme.shape.borderRadius(3)} !default;
-$border-radius-sm: ${theme.shape.radius.default} !default;
+$border-radius-lg: ${theme.shape.radius.lg} !default;
+$border-radius-sm: ${theme.shape.radius.sm} !default;

 // Page