feat(commonlib): Move style choices to design tokens dir (#1516)

v-zhuravlev · Dasomeone · web-flow · commit fa9900ac72de · 2025-12-18T14:48:43.000Z
* Move style choices to design tokens dir

Making eaier to manage those choices and override those in the future in one place.

* Add default stylize

* Update default style:

Remove misleading thresholds from grafana by default

* Fix typo

* Fix generic stat

* Revert thresholds

* Update panels

* Fix topk percentage

---------

Co-authored-by: Emily &lt;1282515+Dasomeone@users.noreply.github.com&gt;
diff --git a/common-lib/CHANGELOG.md b/common-lib/CHANGELOG.md
@@ -1,3 +1,6 @@
+# 0.5.0
+- [Panels] feat: Move style choices (colors, line styles) to design tokens directory.
+
 # 0.4.3
 - [Signal] fix: No longer aggregates histogram signals after histogram_quantile() as it is pointless aggregation. Aggregation before applying histogram_quantile() is kept and works as expected.
 
diff --git a/common-lib/common/main.libsonnet b/common-lib/common/main.libsonnet
@@ -1,5 +1,6 @@
 {
   annotations: import './annotations/main.libsonnet',
+  tokens: import './tokens/main.libsonnet',
   panels: import './panels.libsonnet',
   variables: import './variables/variables.libsonnet',
   utils: import './utils.libsonnet',
diff --git a/common-lib/common/panels/generic/base.libsonnet b/common-lib/common/panels/generic/base.libsonnet
@@ -1,12 +1,13 @@
 local g = import '../../g.libsonnet';
-
+local tokens = import '../../tokens/main.libsonnet';
 local timeSeries = g.panel.timeSeries;
 local fieldOverride = g.panel.timeSeries.fieldOverride;
 local custom = timeSeries.fieldConfig.defaults.custom;
 local defaults = timeSeries.fieldConfig.defaults;
 local options = timeSeries.options;
+local standardOptions = timeSeries.standardOptions;
 
-// This is base of ALL panels in the common lib
+// This is the base of ALL panels in the common lib
 {
   new(targets, description=''):
     // hidden field to hold styles modifiers
@@ -22,6 +23,19 @@ local options = timeSeries.options;
          ) else {})
     + self.stylize(),
 
-  stylize(): {},
+  stylize():
+    standardOptions.color.withMode(tokens.base.colors.mode.default)
+    + standardOptions.color.withFixedColor(tokens.base.colors.palette.default)
+      // remove 0-80(green), >80 red threshold by default.
+      {
+      fieldConfig+: {
+        defaults+: {
+          thresholds: {
+            mode: 'absolute',
+            steps: [],
+          },
+        },
+      },
+    },
 
 }
diff --git a/common-lib/common/panels/generic/stat/base.libsonnet b/common-lib/common/panels/generic/stat/base.libsonnet
@@ -1,4 +1,5 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 local stat = g.panel.stat;
 local base = import '../base.libsonnet';
 
@@ -9,6 +10,23 @@ base {
 
   stylize(allLayers=true):
     (if allLayers then super.stylize() else {})
-    + stat.standardOptions.color.withMode('fixed')
-    + stat.standardOptions.color.withFixedColor('text'),
+    + stat.standardOptions.color.withMode(tokens.base.colors.mode.single)
+    + stat.standardOptions.color.withFixedColor(tokens.base.colors.palette.default)
+    // remove 0-80(green), >80 red threshold by default.
+    + {
+      fieldConfig+: {
+        defaults+: {
+
+          thresholds: {
+            mode: 'absolute',
+            steps: [
+              {
+                color: tokens.base.colors.palette.default,
+                value: null,
+              },
+            ],
+          },
+        },
+      },
+    },
 }
diff --git a/common-lib/common/panels/generic/stat/info.libsonnet b/common-lib/common/panels/generic/stat/info.libsonnet
@@ -1,4 +1,5 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 local base = import './base.libsonnet';
 local stat = g.panel.stat;
 // Simple info panel prototype with text or count of things.
@@ -7,8 +8,8 @@ base {
   stylize(allLayers=true):
     (if allLayers then super.stylize() else {})
     // Style choice: No color for simple text panels by default
-    + stat.options.withColorMode('fixed')
-    + stat.standardOptions.color.withFixedColor('text')
+    + stat.standardOptions.color.withMode(tokens.base.colors.mode.single)
+    + stat.standardOptions.color.withFixedColor(tokens.base.colors.palette.text)
     // Style choice: No graph
     + stat.options.withGraphMode('none')
     // Show last value by default, not mean.
diff --git a/common-lib/common/panels/generic/stat/percentage.libsonnet b/common-lib/common/panels/generic/stat/percentage.libsonnet
@@ -1,4 +1,5 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 local stat = g.panel.stat;
 local base = import './base.libsonnet';
 // This panel can be used to display gauge metrics with possible values range 0-100%.
@@ -11,7 +12,7 @@ base {
     + stat.standardOptions.withUnit('percent')
     + stat.options.withColorMode('value')
     // Change color from blue(cold) to red(hot)
-    + stat.standardOptions.color.withMode('continuous-BlYlRd')
+    + stat.standardOptions.color.withMode(tokens.base.colors.mode.coldhot)
     + stat.standardOptions.withMax(100)
     + stat.standardOptions.withMin(0)
     // Show last value by default, not mean.
diff --git a/common-lib/common/panels/generic/table/cold_hot_gauge.libsonnet b/common-lib/common/panels/generic/table/cold_hot_gauge.libsonnet
@@ -4,6 +4,7 @@ local timeSeries = g.panel.timeSeries;
 local percentage = import '../timeSeries/percentage.libsonnet';
 local fieldOverride = g.panel.timeSeries.fieldOverride;
 local fieldConfig = g.panel.timeSeries.fieldConfig;
+local tokens = import '../../../tokens/main.libsonnet';
 local base = import './base.libsonnet';
 // This panel can be used to display gauge metrics in table columns with unknown max/min values.
 // Examples: Network bandwidth, RPS.
@@ -19,7 +20,7 @@ base {
       + fieldOverride.byName.withProperty('custom.cellOptions', { type: 'gauge', mode: 'basic' })
       + fieldOverride.byName.withProperty('fieldMinMax', true)
       + fieldOverride.byName.withPropertiesFromOptions(
-        timeSeries.standardOptions.color.withMode('continuous-BlYlRd')
+        timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.coldhot)
       ),
     ),
 }
diff --git a/common-lib/common/panels/generic/timeSeries/base.libsonnet b/common-lib/common/panels/generic/timeSeries/base.libsonnet
@@ -1,4 +1,5 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 
 local timeSeries = g.panel.timeSeries;
 local fieldOverride = g.panel.timeSeries.fieldOverride;
@@ -14,16 +15,11 @@ base {
 
   stylize(allLayers=true):
     (if allLayers then super.stylize() else {})
-    // Style choice: Make lines more thick
-    + custom.withLineWidth(2)
-    // Style choice: Opacity level
-    + custom.withFillOpacity(30)
-    // Style choice: Don't show points on lines
-    + custom.withShowPoints('never')
-    // Style choice: Opacity gradient
-    + custom.withGradientMode('opacity')
-    // Style choice: Smoother lines
-    + custom.withLineInterpolation('smooth')
+    + custom.withLineWidth(tokens.panels.timeSeries.lines.width.default)
+    + custom.withFillOpacity(tokens.panels.timeSeries.lines.opacity.default)
+    + custom.withShowPoints(tokens.panels.timeSeries.lines.showPoints.default)
+    + custom.withGradientMode(tokens.panels.timeSeries.lines.gradientMode.default)
+    + custom.withLineInterpolation(tokens.panels.timeSeries.lines.interpolation.default)
     // Style choice: Show all values in tooltip, sorted
     + options.tooltip.withMode('multi')
     + options.tooltip.withSort('desc')
diff --git a/common-lib/common/panels/generic/timeSeries/percentage.libsonnet b/common-lib/common/panels/generic/timeSeries/percentage.libsonnet
@@ -1,4 +1,5 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 local timeSeries = g.panel.timeSeries;
 local base = import './base.libsonnet';
 // This panel can be used to display gauge metrics with possible values range 0-100%.
@@ -9,7 +10,7 @@ base {
     + timeSeries.standardOptions.withDecimals(1)
     + timeSeries.standardOptions.withUnit('percent')
     // Change color from blue(cold) to red(hot)
-    + timeSeries.standardOptions.color.withMode('continuous-BlYlRd')
+    + timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.coldhot)
     + timeSeries.fieldConfig.defaults.custom.withGradientMode('scheme')
     + timeSeries.standardOptions.withMax(100)
     + timeSeries.standardOptions.withMin(0),
diff --git a/common-lib/common/panels/generic/timeSeries/threshold.libsonnet b/common-lib/common/panels/generic/timeSeries/threshold.libsonnet
@@ -1,4 +1,5 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 local timeSeries = g.panel.timeSeries;
 local fieldOverride = g.panel.timeSeries.fieldOverride;
 local fieldConfig = g.panel.timeSeries.fieldConfig;
@@ -15,8 +16,8 @@ local fieldConfig = g.panel.timeSeries.fieldConfig;
       }
     )
     + fieldConfig.defaults.custom.withFillOpacity(0)
-    + timeSeries.standardOptions.color.withMode('fixed')
-    + timeSeries.standardOptions.color.withFixedColor('light-orange'),
+    + timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.single)
+    + timeSeries.standardOptions.color.withFixedColor(tokens.base.colors.palette.threshold),
   stylizeByRegexp(regexp):
     timeSeries.standardOptions.withOverridesMixin(
       fieldOverride.byRegexp.new(regexp)
diff --git a/common-lib/common/panels/generic/timeSeries/topk_percentage.libsonnet b/common-lib/common/panels/generic/timeSeries/topk_percentage.libsonnet
@@ -1,4 +1,5 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 local base = import './base.libsonnet';
 local generic = import './main.libsonnet';
 local timeSeries = g.panel.timeSeries;
@@ -51,8 +52,8 @@ base {
           }
         )
         + fieldConfig.defaults.custom.withFillOpacity(0)
-        + timeSeries.standardOptions.color.withMode('fixed')
-        + timeSeries.standardOptions.color.withFixedColor('light-purple'),
+        + timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.single)
+        + timeSeries.standardOptions.color.withFixedColor(tokens.base.colors.palette.threshold),
       )
     ),
 }
diff --git a/common-lib/common/panels/hardware/timeSeries/temperature.libsonnet b/common-lib/common/panels/hardware/timeSeries/temperature.libsonnet
@@ -1,4 +1,5 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 local generic = import '../../generic/timeSeries/main.libsonnet';
 local base = import './base.libsonnet';
 local timeSeries = g.panel.timeSeries;
@@ -13,13 +14,13 @@ base {
     super.new(title, targets, description)
     + self.stylize(),
 
-  stylize(allLayers=true, softMin=0, softMax=100, unit='Celsius'):
+  stylize(allLayers=true, softMin=0, softMax=100, unit='celsius'):
     (if allLayers then super.stylize() else {})
     + timeSeries.fieldConfig.defaults.custom.withAxisSoftMax(softMax)
     + timeSeries.fieldConfig.defaults.custom.withAxisSoftMin(softMin)
     + timeSeries.standardOptions.withDecimals(1)
-    + timeSeries.standardOptions.withUnit('celsius')
+    + timeSeries.standardOptions.withUnit(unit)
     // Change color from blue(cold) to red(hot)
-    + timeSeries.standardOptions.color.withMode('continuous-BlYlRd')
+    + timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.coldhot)
     + timeSeries.fieldConfig.defaults.custom.withGradientMode('scheme'),
 }
diff --git a/common-lib/common/panels/network/statusHistory/interface_status.libsonnet b/common-lib/common/panels/network/statusHistory/interface_status.libsonnet
@@ -1,4 +1,5 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 local base = import './base.libsonnet';
 local statusHistory = g.panel.statusHistory;
 base {
@@ -15,12 +16,12 @@ base {
         options: {
           '0': {
             text: 'Down',
-            color: 'light-red',
+            color: tokens.base.colors.palette.critical,
             index: 0,
           },
           '1': {
             text: 'Up',
-            color: 'light-green',
+            color: tokens.base.colors.palette.ok,
             index: 1,
           },
         },
diff --git a/common-lib/common/panels/requests/stat/duration.libsonnet b/common-lib/common/panels/requests/stat/duration.libsonnet
@@ -1,4 +1,5 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 local generic = import '../../generic/stat/main.libsonnet';
 local base = import './base.libsonnet';
 local stat = g.panel.stat;
@@ -9,8 +10,8 @@ base {
 
   stylize(allLayers=true):
     (if allLayers then super.stylize() else {})
-    + stat.standardOptions.color.withMode('fixed')
-    + stat.standardOptions.color.withFixedColor('light-blue')
+    + stat.standardOptions.color.withMode(tokens.base.colors.mode.monochrome)
+    + stat.standardOptions.color.withFixedColor(tokens.base.colors.palette.duration)
     + stat.standardOptions.withUnit('s')
     + stat.options.withGraphMode('none'),
 }
diff --git a/common-lib/common/panels/requests/stat/errors.libsonnet b/common-lib/common/panels/requests/stat/errors.libsonnet
@@ -1,4 +1,5 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 local generic = import '../../generic/stat/main.libsonnet';
 local base = import './base.libsonnet';
 local stat = g.panel.stat;
@@ -10,8 +11,8 @@ base {
 
   stylize(allLayers=true):
     (if allLayers then super.stylize() else {})
-    + stat.standardOptions.color.withMode('fixed')
-    + stat.standardOptions.color.withFixedColor('light-red')
+    + stat.standardOptions.color.withMode(tokens.base.colors.mode.monochrome)
+    + stat.standardOptions.color.withFixedColor(tokens.base.colors.palette.errors)
     + stat.standardOptions.withNoValue('No errors')
     + stat.options.withGraphMode('none'),
 }
diff --git a/common-lib/common/panels/requests/stat/rate.libsonnet b/common-lib/common/panels/requests/stat/rate.libsonnet
@@ -1,4 +1,5 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 local generic = import '../../generic/stat/main.libsonnet';
 local base = import './base.libsonnet';
 local stat = g.panel.stat;
@@ -10,7 +11,7 @@ base {
 
   stylize(allLayers=true):
     (if allLayers then super.stylize() else {})
-    + stat.standardOptions.color.withMode('fixed')
-    + stat.standardOptions.color.withFixedColor('light-purple')
+    + stat.standardOptions.color.withMode(tokens.base.colors.mode.monochrome)
+    + stat.standardOptions.color.withFixedColor(tokens.base.colors.palette.rate)
     + stat.options.withGraphMode('none'),
 }
diff --git a/common-lib/common/panels/requests/timeSeries/base.libsonnet b/common-lib/common/panels/requests/timeSeries/base.libsonnet
@@ -1,4 +1,5 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 local base = import '../../generic/timeSeries/base.libsonnet';
 
 base {
diff --git a/common-lib/common/panels/requests/timeSeries/duration.libsonnet b/common-lib/common/panels/requests/timeSeries/duration.libsonnet
@@ -1,6 +1,8 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 local generic = import '../../generic/timeSeries/main.libsonnet';
 local base = import './base.libsonnet';
+
 base {
   new(
     title='Response time',
@@ -14,7 +16,7 @@ base {
 
   stylize(allLayers=true):
     (if allLayers then super.stylize() else {})
-    + g.panel.timeSeries.standardOptions.color.withMode('fixed')
-    + g.panel.timeSeries.standardOptions.color.withFixedColor('blue')
+    + g.panel.timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.monochrome)
+    + g.panel.timeSeries.standardOptions.color.withFixedColor(tokens.base.colors.palette.duration)
     + g.panel.timeSeries.standardOptions.withUnit('s'),
 }
diff --git a/common-lib/common/panels/requests/timeSeries/errors.libsonnet b/common-lib/common/panels/requests/timeSeries/errors.libsonnet
@@ -1,4 +1,5 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 local base = import './base.libsonnet';
 base {
   new(
@@ -16,9 +17,9 @@ base {
     (if allLayers then super.stylize() else {})
     + timeSeries.fieldConfig.defaults.custom.withDrawStyle('bars')
     + timeSeries.queryOptions.withMaxDataPoints(100)
-    + timeSeries.fieldConfig.defaults.custom.withFillOpacity(100)
+    + timeSeries.fieldConfig.defaults.custom.withFillOpacity(tokens.panels.timeSeries.lines.opacity.full)
     + timeSeries.fieldConfig.defaults.custom.withStacking({ mode: 'normal' })
-    + timeSeries.standardOptions.color.withMode('fixed')
-    + timeSeries.standardOptions.color.withFixedColor('light-red')
+    + timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.monochrome)
+    + timeSeries.standardOptions.color.withFixedColor(tokens.base.colors.palette.errors)
     + timeSeries.standardOptions.withNoValue('No errors'),
 }
diff --git a/common-lib/common/panels/requests/timeSeries/rate.libsonnet b/common-lib/common/panels/requests/timeSeries/rate.libsonnet
@@ -1,4 +1,5 @@
 local g = import '../../../g.libsonnet';
+local tokens = import '../../../tokens/main.libsonnet';
 local generic = import '../../generic/timeSeries/main.libsonnet';
 local base = import './base.libsonnet';
 base {
@@ -19,6 +20,6 @@ base {
     + g.panel.timeSeries.queryOptions.withMaxDataPoints(100)
     + g.panel.timeSeries.fieldConfig.defaults.custom.withFillOpacity(100)
     + g.panel.timeSeries.fieldConfig.defaults.custom.withStacking({ mode: 'normal' })
-    + g.panel.timeSeries.standardOptions.color.withMode('fixed')
-    + g.panel.timeSeries.standardOptions.color.withFixedColor('light-purple'),
+    + g.panel.timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.monochrome)
+    + g.panel.timeSeries.standardOptions.color.withFixedColor(tokens.base.colors.palette.rate),
 }
diff --git a/common-lib/common/tokens/colors.libsonnet b/common-lib/common/tokens/colors.libsonnet
diff --git a/common-lib/common/tokens/main.libsonnet b/common-lib/common/tokens/main.libsonnet
diff --git a/common-lib/common/tokens/timeSeries.libsonnet b/common-lib/common/tokens/timeSeries.libsonnet

-Original file line number
+Diff line change
@@ @@ -1,3 +1,6 @@ @@
 +# 0.5.0
 +- [Panels] feat: Move style choices (colors, line styles) to design tokens directory.
++
 # 0.4.3
 - [Signal] fix: No longer aggregates histogram signals after histogram_quantile() as it is pointless aggregation. Aggregation before applying histogram_quantile() is kept and works as expected.
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`annotations: import './annotations/main.libsonnet',`
	`3`	`+ tokens: import './tokens/main.libsonnet',`
`3`	`4`	`panels: import './panels.libsonnet',`
`4`	`5`	`variables: import './variables/variables.libsonnet',`
`5`	`6`	`utils: import './utils.libsonnet',`