@primer/primitives 11.4.1-rc.eb8ee149 → 11.5.0-rc.14eaeb12

package/src/tokens/base/color/dark/dark.dimmed.json5

@@ -6,7 +6,11 @@
   base: {
     color: {
       white: {
-        $value: '#cdd9e5',
+        $value: {
+          colorSpace: 'hsl',
+          components: [210, 31.6, 85.1],
+          hex: '#cdd9e5',
+        },
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -16,7 +20,11 @@
       },
       blue: {
         '0': {
-          $value: '#c6e6ff',
+          $value: {
+            colorSpace: 'hsl',
+            components: [206.3, 100, 88.8],
+            hex: '#c6e6ff',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -30,7 +38,11 @@
           },
         },
         '1': {
-          $value: '#96d0ff',
+          $value: {
+            colorSpace: 'hsl',
+            components: [206.9, 100, 79.4],
+            hex: '#96d0ff',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -44,7 +56,11 @@
           },
         },
         '2': {
-          $value: '#6cb6ff',
+          $value: {
+            colorSpace: 'hsl',
+            components: [209.8, 100, 71.2],
+            hex: '#6cb6ff',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -58,7 +74,11 @@
           },
         },
         '3': {
-          $value: '#539bf5',
+          $value: {
+            colorSpace: 'hsl',
+            components: [213.3, 89, 64.3],
+            hex: '#539bf5',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -72,7 +92,11 @@
           },
         },
         '4': {
-          $value: '#4184e4',
+          $value: {
+            colorSpace: 'hsl',
+            components: [215.3, 75.1, 57.5],
+            hex: '#4184e4',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -86,7 +110,11 @@
           },
         },
         '5': {
-          $value: '#316dca',
+          $value: {
+            colorSpace: 'hsl',
+            components: [216.5, 61, 49.2],
+            hex: '#316dca',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -100,7 +128,11 @@
           },
         },
         '6': {
-          $value: '#255ab2',
+          $value: {
+            colorSpace: 'hsl',
+            components: [217.4, 65.6, 42.2],
+            hex: '#255ab2',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -114,7 +146,11 @@
           },
         },
         '7': {
-          $value: '#1b4b91',
+          $value: {
+            colorSpace: 'hsl',
+            components: [215.6, 68.6, 33.7],
+            hex: '#1b4b91',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -128,7 +164,11 @@
           },
         },
         '8': {
-          $value: '#143d79',
+          $value: {
+            colorSpace: 'hsl',
+            components: [215.6, 71.6, 27.6],
+            hex: '#143d79',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -142,7 +182,11 @@
           },
         },
         '9': {
-          $value: '#0f2d5c',
+          $value: {
+            colorSpace: 'hsl',
+            components: [216.6, 72, 21],
+            hex: '#0f2d5c',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -158,7 +202,11 @@
       },
       green: {
         '0': {
-          $value: '#b4f1b4',
+          $value: {
+            colorSpace: 'hsl',
+            components: [120, 68.5, 82.5],
+            hex: '#b4f1b4',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -172,7 +220,11 @@
           },
         },
         '1': {
-          $value: '#8ddb8c',
+          $value: {
+            colorSpace: 'hsl',
+            components: [119.2, 52.3, 70.4],
+            hex: '#8ddb8c',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -186,7 +238,11 @@
           },
         },
         '2': {
-          $value: '#6bc46d',
+          $value: {
+            colorSpace: 'hsl',
+            components: [121.3, 43, 59.4],
+            hex: '#6bc46d',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -200,7 +256,11 @@
           },
         },
         '3': {
-          $value: '#57ab5a',
+          $value: {
+            colorSpace: 'hsl',
+            components: [122.1, 33.3, 50.6],
+            hex: '#57ab5a',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -214,7 +274,11 @@
           },
         },
         '4': {
-          $value: '#46954a',
+          $value: {
+            colorSpace: 'hsl',
+            components: [123, 36.1, 42.9],
+            hex: '#46954a',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -228,7 +292,11 @@
           },
         },
         '5': {
-          $value: '#347d39',
+          $value: {
+            colorSpace: 'hsl',
+            components: [124.1, 41.2, 34.7],
+            hex: '#347d39',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -242,7 +310,11 @@
           },
         },
         '6': {
-          $value: '#2b6a30',
+          $value: {
+            colorSpace: 'hsl',
+            components: [124.8, 42.3, 29.2],
+            hex: '#2b6a30',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -256,7 +328,11 @@
           },
         },
         '7': {
-          $value: '#245829',
+          $value: {
+            colorSpace: 'hsl',
+            components: [125.8, 41.9, 24.3],
+            hex: '#245829',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -270,7 +346,11 @@
           },
         },
         '8': {
-          $value: '#1b4721',
+          $value: {
+            colorSpace: 'hsl',
+            components: [128.2, 44.9, 19.2],
+            hex: '#1b4721',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -284,7 +364,11 @@
           },
         },
         '9': {
-          $value: '#113417',
+          $value: {
+            colorSpace: 'hsl',
+            components: [130.3, 50.7, 13.5],
+            hex: '#113417',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -300,7 +384,11 @@
       },
       yellow: {
         '0': {
-          $value: '#fbe090',
+          $value: {
+            colorSpace: 'hsl',
+            components: [44.9, 93, 77.5],
+            hex: '#fbe090',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -314,7 +402,11 @@
           },
         },
         '1': {
-          $value: '#eac55f',
+          $value: {
+            colorSpace: 'hsl',
+            components: [44, 76.8, 64.5],
+            hex: '#eac55f',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -328,7 +420,11 @@
           },
         },
         '2': {
-          $value: '#daaa3f',
+          $value: {
+            colorSpace: 'hsl',
+            components: [41.4, 67.7, 55.1],
+            hex: '#daaa3f',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -342,7 +438,11 @@
           },
         },
         '3': {
-          $value: '#c69026',
+          $value: {
+            colorSpace: 'hsl',
+            components: [39.8, 67.8, 46.3],
+            hex: '#c69026',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -356,7 +456,11 @@
           },
         },
         '4': {
-          $value: '#ae7c14',
+          $value: {
+            colorSpace: 'hsl',
+            components: [40.5, 79.4, 38],
+            hex: '#ae7c14',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -370,7 +474,11 @@
           },
         },
         '5': {
-          $value: '#966600',
+          $value: {
+            colorSpace: 'hsl',
+            components: [40.8, 100, 29.4],
+            hex: '#966600',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -384,7 +492,11 @@
           },
         },
         '6': {
-          $value: '#805400',
+          $value: {
+            colorSpace: 'hsl',
+            components: [39.4, 100, 25.1],
+            hex: '#805400',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -398,7 +510,11 @@
           },
         },
         '7': {
-          $value: '#6c4400',
+          $value: {
+            colorSpace: 'hsl',
+            components: [37.8, 100, 21.2],
+            hex: '#6c4400',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -412,7 +528,11 @@
           },
         },
         '8': {
-          $value: '#593600',
+          $value: {
+            colorSpace: 'hsl',
+            components: [36.4, 100, 17.5],
+            hex: '#593600',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -426,7 +546,11 @@
           },
         },
         '9': {
-          $value: '#452700',
+          $value: {
+            colorSpace: 'hsl',
+            components: [33.9, 100, 13.5],
+            hex: '#452700',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -442,7 +566,11 @@
       },
       orange: {
         '0': {
-          $value: '#ffddb0',
+          $value: {
+            colorSpace: 'hsl',
+            components: [34.2, 100, 84.5],
+            hex: '#ffddb0',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -456,7 +584,11 @@
           },
         },
         '1': {
-          $value: '#ffbc6f',
+          $value: {
+            colorSpace: 'hsl',
+            components: [32.1, 100, 71.8],
+            hex: '#ffbc6f',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -470,7 +602,11 @@
           },
         },
         '2': {
-          $value: '#f69d50',
+          $value: {
+            colorSpace: 'hsl',
+            components: [27.8, 90.2, 63.9],
+            hex: '#f69d50',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -484,7 +620,11 @@
           },
         },
         '3': {
-          $value: '#e0823d',
+          $value: {
+            colorSpace: 'hsl',
+            components: [25.4, 72.4, 55.9],
+            hex: '#e0823d',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -498,7 +638,11 @@
           },
         },
         '4': {
-          $value: '#cc6b2c',
+          $value: {
+            colorSpace: 'hsl',
+            components: [23.6, 64.5, 48.6],
+            hex: '#cc6b2c',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -512,7 +656,11 @@
           },
         },
         '5': {
-          $value: '#ae5622',
+          $value: {
+            colorSpace: 'hsl',
+            components: [22.3, 67.3, 40.8],
+            hex: '#ae5622',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -526,7 +674,11 @@
           },
         },
         '6': {
-          $value: '#94471b',
+          $value: {
+            colorSpace: 'hsl',
+            components: [21.8, 69.1, 34.3],
+            hex: '#94471b',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -540,7 +692,11 @@
           },
         },
         '7': {
-          $value: '#7f3913',
+          $value: {
+            colorSpace: 'hsl',
+            components: [21.1, 74, 28.6],
+            hex: '#7f3913',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -554,7 +710,11 @@
           },
         },
         '8': {
-          $value: '#682d0f',
+          $value: {
+            colorSpace: 'hsl',
+            components: [20.2, 74.8, 23.3],
+            hex: '#682d0f',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -568,7 +728,11 @@
           },
         },
         '9': {
-          $value: '#4d210c',
+          $value: {
+            colorSpace: 'hsl',
+            components: [19.4, 73, 17.5],
+            hex: '#4d210c',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -584,7 +748,11 @@
       },
       red: {
         '0': {
-          $value: '#ffd8d3',
+          $value: {
+            colorSpace: 'hsl',
+            components: [6.8, 100, 91.4],
+            hex: '#ffd8d3',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -598,7 +766,11 @@
           },
         },
         '1': {
-          $value: '#ffb8b0',
+          $value: {
+            colorSpace: 'hsl',
+            components: [6.1, 100, 84.5],
+            hex: '#ffb8b0',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -612,7 +784,11 @@
           },
         },
         '2': {
-          $value: '#ff938a',
+          $value: {
+            colorSpace: 'hsl',
+            components: [4.6, 100, 77.1],
+            hex: '#ff938a',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -626,7 +802,11 @@
           },
         },
         '3': {
-          $value: '#f47067',
+          $value: {
+            colorSpace: 'hsl',
+            components: [3.8, 86.5, 68],
+            hex: '#f47067',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -640,7 +820,11 @@
           },
         },
         '4': {
-          $value: '#e5534b',
+          $value: {
+            colorSpace: 'hsl',
+            components: [3.1, 74.8, 59.6],
+            hex: '#e5534b',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -654,7 +838,11 @@
           },
         },
         '5': {
-          $value: '#c93c37',
+          $value: {
+            colorSpace: 'hsl',
+            components: [2.1, 57.5, 50.2],
+            hex: '#c93c37',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -668,7 +856,11 @@
           },
         },
         '6': {
-          $value: '#ad2e2c',
+          $value: {
+            colorSpace: 'hsl',
+            components: [0.9, 59.4, 42.5],
+            hex: '#ad2e2c',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -682,7 +874,11 @@
           },
         },
         '7': {
-          $value: '#922323',
+          $value: {
+            colorSpace: 'hsl',
+            components: [0, 61.3, 35.5],
+            hex: '#922323',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -696,7 +892,11 @@
           },
         },
         '8': {
-          $value: '#78191b',
+          $value: {
+            colorSpace: 'hsl',
+            components: [358.7, 65.5, 28.4],
+            hex: '#78191b',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -710,7 +910,11 @@
           },
         },
         '9': {
-          $value: '#5d0f12',
+          $value: {
+            colorSpace: 'hsl',
+            components: [357.7, 72.2, 21.2],
+            hex: '#5d0f12',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -726,7 +930,11 @@
       },
       purple: {
         '0': {
-          $value: '#eedcff',
+          $value: {
+            colorSpace: 'hsl',
+            components: [270.9, 100, 93.1],
+            hex: '#eedcff',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -740,7 +948,11 @@
           },
         },
         '1': {
-          $value: '#dcbdfb',
+          $value: {
+            colorSpace: 'hsl',
+            components: [270, 88.6, 86.3],
+            hex: '#dcbdfb',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -754,7 +966,11 @@
           },
         },
         '2': {
-          $value: '#dcbdfb',
+          $value: {
+            colorSpace: 'hsl',
+            components: [270, 88.6, 86.3],
+            hex: '#dcbdfb',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -768,7 +984,11 @@
           },
         },
         '3': {
-          $value: '#b083f0',
+          $value: {
+            colorSpace: 'hsl',
+            components: [264.8, 78.4, 72.7],
+            hex: '#b083f0',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -782,7 +1002,11 @@
           },
         },
         '4': {
-          $value: '#986ee2',
+          $value: {
+            colorSpace: 'hsl',
+            components: [261.7, 66.7, 65.9],
+            hex: '#986ee2',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -796,7 +1020,11 @@
           },
         },
         '5': {
-          $value: '#8256d0',
+          $value: {
+            colorSpace: 'hsl',
+            components: [261.6, 56.5, 57.6],
+            hex: '#8256d0',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -810,7 +1038,11 @@
           },
         },
         '6': {
-          $value: '#6b44bc',
+          $value: {
+            colorSpace: 'hsl',
+            components: [259.5, 47.2, 50.2],
+            hex: '#6b44bc',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -824,7 +1056,11 @@
           },
         },
         '7': {
-          $value: '#5936a2',
+          $value: {
+            colorSpace: 'hsl',
+            components: [259.4, 50, 42.4],
+            hex: '#5936a2',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -838,7 +1074,11 @@
           },
         },
         '8': {
-          $value: '#472c82',
+          $value: {
+            colorSpace: 'hsl',
+            components: [258.8, 49.4, 34.1],
+            hex: '#472c82',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -852,7 +1092,11 @@
           },
         },
         '9': {
-          $value: '#352160',
+          $value: {
+            colorSpace: 'hsl',
+            components: [259, 48.8, 25.3],
+            hex: '#352160',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -868,7 +1112,11 @@
       },
       pink: {
         '0': {
-          $value: '#ffd7eb',
+          $value: {
+            colorSpace: 'hsl',
+            components: [330, 100, 92.2],
+            hex: '#ffd7eb',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -882,7 +1130,11 @@
           },
         },
         '1': {
-          $value: '#ffb3d8',
+          $value: {
+            colorSpace: 'hsl',
+            components: [330.8, 100, 85.1],
+            hex: '#ffb3d8',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -896,7 +1148,11 @@
           },
         },
         '2': {
-          $value: '#fc8dc7',
+          $value: {
+            colorSpace: 'hsl',
+            components: [328.6, 94.9, 77.1],
+            hex: '#fc8dc7',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -910,7 +1166,11 @@
           },
         },
         '3': {
-          $value: '#e275ad',
+          $value: {
+            colorSpace: 'hsl',
+            components: [329.2, 65.3, 67.3],
+            hex: '#e275ad',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -924,7 +1184,11 @@
           },
         },
         '4': {
-          $value: '#c96198',
+          $value: {
+            colorSpace: 'hsl',
+            components: [328.3, 49.1, 58.4],
+            hex: '#c96198',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -938,7 +1202,11 @@
           },
         },
         '5': {
-          $value: '#ae4c82',
+          $value: {
+            colorSpace: 'hsl',
+            components: [326.9, 39.2, 49],
+            hex: '#ae4c82',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -952,7 +1220,11 @@
           },
         },
         '6': {
-          $value: '#983b6e',
+          $value: {
+            colorSpace: 'hsl',
+            components: [327.1, 44.1, 41.4],
+            hex: '#983b6e',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -966,7 +1238,11 @@
           },
         },
         '7': {
-          $value: '#7e325a',
+          $value: {
+            colorSpace: 'hsl',
+            components: [328.4, 43.2, 34.5],
+            hex: '#7e325a',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -980,7 +1256,11 @@
           },
         },
         '8': {
-          $value: '#69264a',
+          $value: {
+            colorSpace: 'hsl',
+            components: [327.8, 46.9, 28],
+            hex: '#69264a',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -994,7 +1274,11 @@
           },
         },
         '9': {
-          $value: '#551639',
+          $value: {
+            colorSpace: 'hsl',
+            components: [326.7, 58.9, 21],
+            hex: '#551639',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1010,7 +1294,11 @@
       },
       coral: {
         '0': {
-          $value: '#ffdacf',
+          $value: {
+            colorSpace: 'hsl',
+            components: [13.7, 100, 90.6],
+            hex: '#ffdacf',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1024,7 +1312,11 @@
           },
         },
         '1': {
-          $value: '#ffb9a5',
+          $value: {
+            colorSpace: 'hsl',
+            components: [13.3, 100, 82.4],
+            hex: '#ffb9a5',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1038,7 +1330,11 @@
           },
         },
         '2': {
-          $value: '#f79981',
+          $value: {
+            colorSpace: 'hsl',
+            components: [12.2, 88.1, 73.7],
+            hex: '#f79981',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1052,7 +1348,11 @@
           },
         },
         '3': {
-          $value: '#ec775c',
+          $value: {
+            colorSpace: 'hsl',
+            components: [11.3, 79.1, 64.3],
+            hex: '#ec775c',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1066,7 +1366,11 @@
           },
         },
         '4': {
-          $value: '#de5b41',
+          $value: {
+            colorSpace: 'hsl',
+            components: [9.9, 70.4, 56.3],
+            hex: '#de5b41',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1080,7 +1384,11 @@
           },
         },
         '5': {
-          $value: '#c2442d',
+          $value: {
+            colorSpace: 'hsl',
+            components: [9.3, 62.3, 46.9],
+            hex: '#c2442d',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1094,7 +1402,11 @@
           },
         },
         '6': {
-          $value: '#a93524',
+          $value: {
+            colorSpace: 'hsl',
+            components: [7.7, 64.9, 40.2],
+            hex: '#a93524',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1108,7 +1420,11 @@
           },
         },
         '7': {
-          $value: '#8d291b',
+          $value: {
+            colorSpace: 'hsl',
+            components: [7.4, 67.9, 32.9],
+            hex: '#8d291b',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1122,7 +1438,11 @@
           },
         },
         '8': {
-          $value: '#771d13',
+          $value: {
+            colorSpace: 'hsl',
+            components: [6, 72.5, 27.1],
+            hex: '#771d13',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1136,7 +1456,11 @@
           },
         },
         '9': {
-          $value: '#5d1008',
+          $value: {
+            colorSpace: 'hsl',
+            components: [5.6, 84.2, 19.8],
+            hex: '#5d1008',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {