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

package/src/tokens/base/color/dark/display-dark.json5

@@ -4,7 +4,11 @@
       color: {
         gray: {
           '0': {
-            $value: '#1c1c1c',
+            $value: {
+              colorSpace: 'hsl',
+              components: [0, 0, 11],
+              hex: '#1c1c1c',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -13,7 +17,11 @@
             },
           },
           '1': {
-            $value: '#2a2b2d',
+            $value: {
+              colorSpace: 'hsl',
+              components: [220, 3.4, 17.1],
+              hex: '#2a2b2d',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -22,7 +30,11 @@
             },
           },
           '2': {
-            $value: '#393d41',
+            $value: {
+              colorSpace: 'hsl',
+              components: [210, 6.6, 23.9],
+              hex: '#393d41',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -31,7 +43,11 @@
             },
           },
           '3': {
-            $value: '#474e57',
+            $value: {
+              colorSpace: 'hsl',
+              components: [213.8, 10.1, 31],
+              hex: '#474e57',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -40,7 +56,11 @@
             },
           },
           '4': {
-            $value: '#576270',
+            $value: {
+              colorSpace: 'hsl',
+              components: [213.6, 12.6, 39],
+              hex: '#576270',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -49,7 +69,11 @@
             },
           },
           '5': {
-            $value: '#6e7f96',
+            $value: {
+              colorSpace: 'hsl',
+              components: [214.5, 16, 51],
+              hex: '#6e7f96',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -58,7 +82,11 @@
             },
           },
           '6': {
-            $value: '#92a1b5',
+            $value: {
+              colorSpace: 'hsl',
+              components: [214.3, 19.1, 64.1],
+              hex: '#92a1b5',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -67,7 +95,11 @@
             },
           },
           '7': {
-            $value: '#9babbf',
+            $value: {
+              colorSpace: 'hsl',
+              components: [213.3, 22, 67.8],
+              hex: '#9babbf',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -76,7 +108,11 @@
             },
           },
           '8': {
-            $value: '#b3c0d1',
+            $value: {
+              colorSpace: 'hsl',
+              components: [214, 24.6, 76.1],
+              hex: '#b3c0d1',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -85,7 +121,11 @@
             },
           },
           '9': {
-            $value: '#c4cfde',
+            $value: {
+              colorSpace: 'hsl',
+              components: [214.6, 28.3, 82],
+              hex: '#c4cfde',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -96,7 +136,11 @@
         },
         red: {
           '0': {
-            $value: '#3c0614',
+            $value: {
+              colorSpace: 'hsl',
+              components: [344.4, 81.8, 12.9],
+              hex: '#3c0614',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -105,7 +149,11 @@
             },
           },
           '1': {
-            $value: '#58091a',
+            $value: {
+              colorSpace: 'hsl',
+              components: [347.1, 81.4, 19],
+              hex: '#58091a',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -114,7 +162,11 @@
             },
           },
           '2': {
-            $value: '#790c20',
+            $value: {
+              colorSpace: 'hsl',
+              components: [349, 82, 26.1],
+              hex: '#790c20',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -123,7 +175,11 @@
             },
           },
           '3': {
-            $value: '#990f24',
+            $value: {
+              colorSpace: 'hsl',
+              components: [350.9, 82.1, 32.9],
+              hex: '#990f24',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -132,7 +188,11 @@
             },
           },
           '4': {
-            $value: '#c31328',
+            $value: {
+              colorSpace: 'hsl',
+              components: [352.8, 82.2, 42],
+              hex: '#c31328',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -141,7 +201,11 @@
             },
           },
           '5': {
-            $value: '#eb3342',
+            $value: {
+              colorSpace: 'hsl',
+              components: [355.1, 82.1, 56.1],
+              hex: '#eb3342',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -150,7 +214,11 @@
             },
           },
           '6': {
-            $value: '#f27d83',
+            $value: {
+              colorSpace: 'hsl',
+              components: [356.9, 81.8, 72],
+              hex: '#f27d83',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -159,7 +227,11 @@
             },
           },
           '7': {
-            $value: '#f48b8d',
+            $value: {
+              colorSpace: 'hsl',
+              components: [358.9, 82.7, 75.1],
+              hex: '#f48b8d',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -168,7 +240,11 @@
             },
           },
           '8': {
-            $value: '#f7adab',
+            $value: {
+              colorSpace: 'hsl',
+              components: [1.6, 82.6, 82],
+              hex: '#f7adab',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -177,7 +253,11 @@
             },
           },
           '9': {
-            $value: '#f9c1be',
+            $value: {
+              colorSpace: 'hsl',
+              components: [3.1, 83.1, 86.1],
+              hex: '#f9c1be',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -188,7 +268,11 @@
         },
         coral: {
           '0': {
-            $value: '#351008',
+            $value: {
+              colorSpace: 'hsl',
+              components: [10.7, 73.8, 12],
+              hex: '#351008',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -197,7 +281,11 @@
             },
           },
           '1': {
-            $value: '#51180b',
+            $value: {
+              colorSpace: 'hsl',
+              components: [11.1, 76.1, 18],
+              hex: '#51180b',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -206,7 +294,11 @@
             },
           },
           '2': {
-            $value: '#72220d',
+            $value: {
+              colorSpace: 'hsl',
+              components: [12.5, 79.5, 24.9],
+              hex: '#72220d',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -215,7 +307,11 @@
             },
           },
           '3': {
-            $value: '#902a0e',
+            $value: {
+              colorSpace: 'hsl',
+              components: [12.9, 82.3, 31],
+              hex: '#902a0e',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -224,7 +320,11 @@
             },
           },
           '4': {
-            $value: '#b3350f',
+            $value: {
+              colorSpace: 'hsl',
+              components: [13.9, 84.5, 38],
+              hex: '#b3350f',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -233,7 +333,11 @@
             },
           },
           '5': {
-            $value: '#e1430e',
+            $value: {
+              colorSpace: 'hsl',
+              components: [15.1, 88.3, 46.9],
+              hex: '#e1430e',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -242,7 +346,11 @@
             },
           },
           '6': {
-            $value: '#f7794b',
+            $value: {
+              colorSpace: 'hsl',
+              components: [16, 91.5, 63.1],
+              hex: '#f7794b',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -251,7 +359,11 @@
             },
           },
           '7': {
-            $value: '#fa8c61',
+            $value: {
+              colorSpace: 'hsl',
+              components: [16.9, 93.9, 68],
+              hex: '#fa8c61',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -260,7 +372,11 @@
             },
           },
           '8': {
-            $value: '#fdaa86',
+            $value: {
+              colorSpace: 'hsl',
+              components: [18.2, 96.7, 75.9],
+              hex: '#fdaa86',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -269,7 +385,11 @@
             },
           },
           '9': {
-            $value: '#ffc0a3',
+            $value: {
+              colorSpace: 'hsl',
+              components: [18.9, 100, 82],
+              hex: '#ffc0a3',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -280,7 +400,11 @@
         },
         orange: {
           '0': {
-            $value: '#311708',
+            $value: {
+              colorSpace: 'hsl',
+              components: [22, 71.9, 11.2],
+              hex: '#311708',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -289,7 +413,11 @@
             },
           },
           '1': {
-            $value: '#43200a',
+            $value: {
+              colorSpace: 'hsl',
+              components: [23.2, 74, 15.1],
+              hex: '#43200a',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -298,7 +426,11 @@
             },
           },
           '2': {
-            $value: '#632f0d',
+            $value: {
+              colorSpace: 'hsl',
+              components: [23.7, 76.8, 22],
+              hex: '#632f0d',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -307,7 +439,11 @@
             },
           },
           '3': {
-            $value: '#7b3c0e',
+            $value: {
+              colorSpace: 'hsl',
+              components: [25.3, 79.6, 26.9],
+              hex: '#7b3c0e',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -316,7 +452,11 @@
             },
           },
           '4': {
-            $value: '#984b10',
+            $value: {
+              colorSpace: 'hsl',
+              components: [26, 81, 32.9],
+              hex: '#984b10',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -325,7 +465,11 @@
             },
           },
           '5': {
-            $value: '#c46212',
+            $value: {
+              colorSpace: 'hsl',
+              components: [27, 83.2, 42],
+              hex: '#c46212',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -334,7 +478,11 @@
             },
           },
           '6': {
-            $value: '#ed8326',
+            $value: {
+              colorSpace: 'hsl',
+              components: [28, 84.7, 53.9],
+              hex: '#ed8326',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -343,7 +491,11 @@
             },
           },
           '7': {
-            $value: '#f1933b',
+            $value: {
+              colorSpace: 'hsl',
+              components: [29, 86.7, 58.8],
+              hex: '#f1933b',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -352,7 +504,11 @@
             },
           },
           '8': {
-            $value: '#f6b06a',
+            $value: {
+              colorSpace: 'hsl',
+              components: [30, 88.6, 69],
+              hex: '#f6b06a',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -361,7 +517,11 @@
             },
           },
           '9': {
-            $value: '#fac68f',
+            $value: {
+              colorSpace: 'hsl',
+              components: [30.8, 91.5, 77.1],
+              hex: '#fac68f',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -372,7 +532,11 @@
         },
         yellow: {
           '0': {
-            $value: '#2e1a00',
+            $value: {
+              colorSpace: 'hsl',
+              components: [33.9, 100, 9],
+              hex: '#2e1a00',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -381,7 +545,11 @@
             },
           },
           '1': {
-            $value: '#3d2401',
+            $value: {
+              colorSpace: 'hsl',
+              components: [35, 96.8, 12.2],
+              hex: '#3d2401',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -390,7 +558,11 @@
             },
           },
           '2': {
-            $value: '#5a3702',
+            $value: {
+              colorSpace: 'hsl',
+              components: [36.1, 95.7, 18],
+              hex: '#5a3702',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -399,7 +571,11 @@
             },
           },
           '3': {
-            $value: '#6d4403',
+            $value: {
+              colorSpace: 'hsl',
+              components: [36.8, 94.6, 22],
+              hex: '#6d4403',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -408,7 +584,11 @@
             },
           },
           '4': {
-            $value: '#895906',
+            $value: {
+              colorSpace: 'hsl',
+              components: [38, 91.6, 28],
+              hex: '#895906',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -417,7 +597,11 @@
             },
           },
           '5': {
-            $value: '#aa7109',
+            $value: {
+              colorSpace: 'hsl',
+              components: [38.8, 89.9, 35.1],
+              hex: '#aa7109',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -426,7 +610,11 @@
             },
           },
           '6': {
-            $value: '#d3910d',
+            $value: {
+              colorSpace: 'hsl',
+              components: [40, 88.4, 43.9],
+              hex: '#d3910d',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -435,7 +623,11 @@
             },
           },
           '7': {
-            $value: '#df9e11',
+            $value: {
+              colorSpace: 'hsl',
+              components: [41.1, 85.8, 47.1],
+              hex: '#df9e11',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -444,7 +636,11 @@
             },
           },
           '8': {
-            $value: '#edb431',
+            $value: {
+              colorSpace: 'hsl',
+              components: [41.8, 83.9, 56.1],
+              hex: '#edb431',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -453,7 +649,11 @@
             },
           },
           '9': {
-            $value: '#f0ca6a',
+            $value: {
+              colorSpace: 'hsl',
+              components: [43, 81.7, 67.8],
+              hex: '#f0ca6a',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -464,7 +664,11 @@
         },
         lemon: {
           '0': {
-            $value: '#291d00',
+            $value: {
+              colorSpace: 'hsl',
+              components: [42.4, 100, 8],
+              hex: '#291d00',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -473,7 +677,11 @@
             },
           },
           '1': {
-            $value: '#372901',
+            $value: {
+              colorSpace: 'hsl',
+              components: [44.4, 96.4, 11],
+              hex: '#372901',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -482,7 +690,11 @@
             },
           },
           '2': {
-            $value: '#4f3c02',
+            $value: {
+              colorSpace: 'hsl',
+              components: [45.2, 95.1, 15.9],
+              hex: '#4f3c02',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -491,7 +703,11 @@
             },
           },
           '3': {
-            $value: '#614c05',
+            $value: {
+              colorSpace: 'hsl',
+              components: [46.3, 90.2, 20],
+              hex: '#614c05',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -500,7 +716,11 @@
             },
           },
           '4': {
-            $value: '#786008',
+            $value: {
+              colorSpace: 'hsl',
+              components: [47.1, 87.5, 25.1],
+              hex: '#786008',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -509,7 +729,11 @@
             },
           },
           '5': {
-            $value: '#977b0c',
+            $value: {
+              colorSpace: 'hsl',
+              components: [47.9, 85.3, 32],
+              hex: '#977b0c',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -518,7 +742,11 @@
             },
           },
           '6': {
-            $value: '#ba9b12',
+            $value: {
+              colorSpace: 'hsl',
+              components: [48.9, 82.4, 40],
+              hex: '#ba9b12',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -527,7 +755,11 @@
             },
           },
           '7': {
-            $value: '#c4a717',
+            $value: {
+              colorSpace: 'hsl',
+              components: [49.9, 79, 42.9],
+              hex: '#c4a717',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -536,7 +768,11 @@
             },
           },
           '8': {
-            $value: '#d7bc1d',
+            $value: {
+              colorSpace: 'hsl',
+              components: [51.3, 76.2, 47.8],
+              hex: '#d7bc1d',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -545,7 +781,11 @@
             },
           },
           '9': {
-            $value: '#e3d04f',
+            $value: {
+              colorSpace: 'hsl',
+              components: [52.3, 72.5, 60],
+              hex: '#e3d04f',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -556,7 +796,11 @@
         },
         olive: {
           '0': {
-            $value: '#171e0b',
+            $value: {
+              colorSpace: 'hsl',
+              components: [82.1, 46.3, 8],
+              hex: '#171e0b',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -565,7 +809,11 @@
             },
           },
           '1': {
-            $value: '#252d10',
+            $value: {
+              colorSpace: 'hsl',
+              components: [76.6, 47.5, 12],
+              hex: '#252d10',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -574,7 +822,11 @@
             },
           },
           '2': {
-            $value: '#374115',
+            $value: {
+              colorSpace: 'hsl',
+              components: [73.6, 51.2, 16.9],
+              hex: '#374115',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -583,7 +835,11 @@
             },
           },
           '3': {
-            $value: '#485219',
+            $value: {
+              colorSpace: 'hsl',
+              components: [70.5, 53.3, 21],
+              hex: '#485219',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -592,7 +848,11 @@
             },
           },
           '4': {
-            $value: '#5e681d',
+            $value: {
+              colorSpace: 'hsl',
+              components: [68, 56.4, 26.1],
+              hex: '#5e681d',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -601,7 +861,11 @@
             },
           },
           '5': {
-            $value: '#7a8321',
+            $value: {
+              colorSpace: 'hsl',
+              components: [65.5, 59.8, 32.2],
+              hex: '#7a8321',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -610,7 +874,11 @@
             },
           },
           '6': {
-            $value: '#a2a626',
+            $value: {
+              colorSpace: 'hsl',
+              components: [61.9, 62.7, 40],
+              hex: '#a2a626',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -619,7 +887,11 @@
             },
           },
           '7': {
-            $value: '#b2af24',
+            $value: {
+              colorSpace: 'hsl',
+              components: [58.7, 66.4, 42],
+              hex: '#b2af24',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -628,7 +900,11 @@
             },
           },
           '8': {
-            $value: '#cbc025',
+            $value: {
+              colorSpace: 'hsl',
+              components: [56, 69.2, 47.1],
+              hex: '#cbc025',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -637,7 +913,11 @@
             },
           },
           '9': {
-            $value: '#e2d04b',
+            $value: {
+              colorSpace: 'hsl',
+              components: [52.8, 72.2, 59],
+              hex: '#e2d04b',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -648,7 +928,11 @@
         },
         lime: {
           '0': {
-            $value: '#141f0f',
+            $value: {
+              colorSpace: 'hsl',
+              components: [101.3, 34.8, 9],
+              hex: '#141f0f',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -657,7 +941,11 @@
             },
           },
           '1': {
-            $value: '#1f3116',
+            $value: {
+              colorSpace: 'hsl',
+              components: [100, 38, 13.9],
+              hex: '#1f3116',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -666,7 +954,11 @@
             },
           },
           '2': {
-            $value: '#2c441d',
+            $value: {
+              colorSpace: 'hsl',
+              components: [96.9, 40.2, 19],
+              hex: '#2c441d',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -675,7 +967,11 @@
             },
           },
           '3': {
-            $value: '#375421',
+            $value: {
+              colorSpace: 'hsl',
+              components: [94.1, 43.6, 22.9],
+              hex: '#375421',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -684,7 +980,11 @@
             },
           },
           '4': {
-            $value: '#496c28',
+            $value: {
+              colorSpace: 'hsl',
+              components: [90.9, 45.9, 29],
+              hex: '#496c28',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -693,7 +993,11 @@
             },
           },
           '5': {
-            $value: '#5f892f',
+            $value: {
+              colorSpace: 'hsl',
+              components: [88, 48.9, 36.1],
+              hex: '#5f892f',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -702,7 +1006,11 @@
             },
           },
           '6': {
-            $value: '#7dae37',
+            $value: {
+              colorSpace: 'hsl',
+              components: [84.7, 52, 44.9],
+              hex: '#7dae37',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -711,7 +1019,11 @@
             },
           },
           '7': {
-            $value: '#89ba36',
+            $value: {
+              colorSpace: 'hsl',
+              components: [82.3, 55, 47.1],
+              hex: '#89ba36',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -720,7 +1032,11 @@
             },
           },
           '8': {
-            $value: '#9fcc3e',
+            $value: {
+              colorSpace: 'hsl',
+              components: [79, 58.2, 52.2],
+              hex: '#9fcc3e',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -729,7 +1045,11 @@
             },
           },
           '9': {
-            $value: '#bcda67',
+            $value: {
+              colorSpace: 'hsl',
+              components: [75.7, 60.8, 62.9],
+              hex: '#bcda67',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -740,7 +1060,11 @@
         },
         green: {
           '0': {
-            $value: '#122117',
+            $value: {
+              colorSpace: 'hsl',
+              components: [140, 29.4, 10],
+              hex: '#122117',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -749,7 +1073,11 @@
             },
           },
           '1': {
-            $value: '#182f1f',
+            $value: {
+              colorSpace: 'hsl',
+              components: [138.3, 32.4, 13.9],
+              hex: '#182f1f',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -758,7 +1086,11 @@
             },
           },
           '2': {
-            $value: '#214529',
+            $value: {
+              colorSpace: 'hsl',
+              components: [133.3, 35.3, 20],
+              hex: '#214529',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -767,7 +1099,11 @@
             },
           },
           '3': {
-            $value: '#285830',
+            $value: {
+              colorSpace: 'hsl',
+              components: [130, 37.5, 25.1],
+              hex: '#285830',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -776,7 +1112,11 @@
             },
           },
           '4': {
-            $value: '#2f6f37',
+            $value: {
+              colorSpace: 'hsl',
+              components: [127.5, 40.5, 31],
+              hex: '#2f6f37',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -785,7 +1125,11 @@
             },
           },
           '5': {
-            $value: '#388f3f',
+            $value: {
+              colorSpace: 'hsl',
+              components: [124.8, 43.7, 39],
+              hex: '#388f3f',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -794,7 +1138,11 @@
             },
           },
           '6': {
-            $value: '#41b445',
+            $value: {
+              colorSpace: 'hsl',
+              components: [122.1, 46.9, 48],
+              hex: '#41b445',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -803,7 +1151,11 @@
             },
           },
           '7': {
-            $value: '#46c144',
+            $value: {
+              colorSpace: 'hsl',
+              components: [119, 50.2, 51.2],
+              hex: '#46c144',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -812,7 +1164,11 @@
             },
           },
           '8': {
-            $value: '#75d36f',
+            $value: {
+              colorSpace: 'hsl',
+              components: [116.4, 53.2, 63.1],
+              hex: '#75d36f',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -821,7 +1177,11 @@
             },
           },
           '9': {
-            $value: '#99e090',
+            $value: {
+              colorSpace: 'hsl',
+              components: [113.3, 56.3, 72.2],
+              hex: '#99e090',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -832,7 +1192,11 @@
         },
         pine: {
           '0': {
-            $value: '#082119',
+            $value: {
+              colorSpace: 'hsl',
+              components: [160.8, 61, 8],
+              hex: '#082119',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -841,7 +1205,11 @@
             },
           },
           '1': {
-            $value: '#0b3224',
+            $value: {
+              colorSpace: 'hsl',
+              components: [158.5, 63.9, 12],
+              hex: '#0b3224',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -850,7 +1218,11 @@
             },
           },
           '2': {
-            $value: '#0e4430',
+            $value: {
+              colorSpace: 'hsl',
+              components: [157.8, 65.9, 16.1],
+              hex: '#0e4430',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -859,7 +1231,11 @@
             },
           },
           '3': {
-            $value: '#115a3e',
+            $value: {
+              colorSpace: 'hsl',
+              components: [157, 68.2, 21],
+              hex: '#115a3e',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -868,7 +1244,11 @@
             },
           },
           '4': {
-            $value: '#14714c',
+            $value: {
+              colorSpace: 'hsl',
+              components: [156.1, 69.9, 26.1],
+              hex: '#14714c',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -877,7 +1257,11 @@
             },
           },
           '5': {
-            $value: '#18915e',
+            $value: {
+              colorSpace: 'hsl',
+              components: [154.7, 71.6, 33.1],
+              hex: '#18915e',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -886,7 +1270,11 @@
             },
           },
           '6': {
-            $value: '#1bb673',
+            $value: {
+              colorSpace: 'hsl',
+              components: [154.1, 74.2, 41],
+              hex: '#1bb673',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -895,7 +1283,11 @@
             },
           },
           '7': {
-            $value: '#1ac176',
+            $value: {
+              colorSpace: 'hsl',
+              components: [153.1, 76.3, 42.9],
+              hex: '#1ac176',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -904,7 +1296,11 @@
             },
           },
           '8': {
-            $value: '#1bda81',
+            $value: {
+              colorSpace: 'hsl',
+              components: [152, 78, 48],
+              hex: '#1bda81',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -913,7 +1309,11 @@
             },
           },
           '9': {
-            $value: '#3eea97',
+            $value: {
+              colorSpace: 'hsl',
+              components: [151, 80.4, 58],
+              hex: '#3eea97',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -924,7 +1324,11 @@
         },
         teal: {
           '0': {
-            $value: '#041f25',
+            $value: {
+              colorSpace: 'hsl',
+              components: [190.9, 80.5, 8],
+              hex: '#041f25',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -933,7 +1337,11 @@
             },
           },
           '1': {
-            $value: '#073036',
+            $value: {
+              colorSpace: 'hsl',
+              components: [187.7, 77, 12],
+              hex: '#073036',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -942,7 +1350,11 @@
             },
           },
           '2': {
-            $value: '#0a464d',
+            $value: {
+              colorSpace: 'hsl',
+              components: [186.3, 77, 17.1],
+              hex: '#0a464d',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -951,7 +1363,11 @@
             },
           },
           '3': {
-            $value: '#0c555a',
+            $value: {
+              colorSpace: 'hsl',
+              components: [183.8, 76.5, 20],
+              hex: '#0c555a',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -960,7 +1376,11 @@
             },
           },
           '4': {
-            $value: '#106c70',
+            $value: {
+              colorSpace: 'hsl',
+              components: [182.5, 75, 25.1],
+              hex: '#106c70',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -969,7 +1389,11 @@
             },
           },
           '5': {
-            $value: '#158a8a',
+            $value: {
+              colorSpace: 'hsl',
+              components: [180, 73.6, 31.2],
+              hex: '#158a8a',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -978,7 +1402,11 @@
             },
           },
           '6': {
-            $value: '#1cb0ab',
+            $value: {
+              colorSpace: 'hsl',
+              components: [178, 72.5, 40],
+              hex: '#1cb0ab',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -987,7 +1415,11 @@
             },
           },
           '7': {
-            $value: '#1fbdb2',
+            $value: {
+              colorSpace: 'hsl',
+              components: [175.8, 71.8, 43.1],
+              hex: '#1fbdb2',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -996,7 +1428,11 @@
             },
           },
           '8': {
-            $value: '#24d6c4',
+            $value: {
+              colorSpace: 'hsl',
+              components: [173.9, 71.2, 49],
+              hex: '#24d6c4',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1005,7 +1441,11 @@
             },
           },
           '9': {
-            $value: '#5fe3d1',
+            $value: {
+              colorSpace: 'hsl',
+              components: [171.8, 70.2, 63.1],
+              hex: '#5fe3d1',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1016,7 +1456,11 @@
         },
         cyan: {
           '0': {
-            $value: '#001f29',
+            $value: {
+              colorSpace: 'hsl',
+              components: [194.6, 100, 8],
+              hex: '#001f29',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1025,7 +1469,11 @@
             },
           },
           '1': {
-            $value: '#002e3d',
+            $value: {
+              colorSpace: 'hsl',
+              components: [194.8, 100, 12],
+              hex: '#002e3d',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1034,7 +1482,11 @@
             },
           },
           '2': {
-            $value: '#014156',
+            $value: {
+              colorSpace: 'hsl',
+              components: [194.8, 97.7, 17.1],
+              hex: '#014156',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1043,7 +1495,11 @@
             },
           },
           '3': {
-            $value: '#02536f',
+            $value: {
+              colorSpace: 'hsl',
+              components: [195.4, 96.5, 22.2],
+              hex: '#02536f',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1052,7 +1508,11 @@
             },
           },
           '4': {
-            $value: '#036a8c',
+            $value: {
+              colorSpace: 'hsl',
+              components: [194.9, 95.8, 28],
+              hex: '#036a8c',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1061,7 +1521,11 @@
             },
           },
           '5': {
-            $value: '#0587b3',
+            $value: {
+              colorSpace: 'hsl',
+              components: [195.2, 94.6, 36.1],
+              hex: '#0587b3',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1070,7 +1534,11 @@
             },
           },
           '6': {
-            $value: '#07ace4',
+            $value: {
+              colorSpace: 'hsl',
+              components: [195.2, 94, 46.1],
+              hex: '#07ace4',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1079,7 +1547,11 @@
             },
           },
           '7': {
-            $value: '#09b7f1',
+            $value: {
+              colorSpace: 'hsl',
+              components: [195, 92.8, 49],
+              hex: '#09b7f1',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1088,7 +1560,11 @@
             },
           },
           '8': {
-            $value: '#45cbf7',
+            $value: {
+              colorSpace: 'hsl',
+              components: [194.8, 91.8, 62],
+              hex: '#45cbf7',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1097,7 +1573,11 @@
             },
           },
           '9': {
-            $value: '#80dbf9',
+            $value: {
+              colorSpace: 'hsl',
+              components: [194.9, 91, 73.9],
+              hex: '#80dbf9',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1108,7 +1588,11 @@
         },
         blue: {
           '0': {
-            $value: '#001a47',
+            $value: {
+              colorSpace: 'hsl',
+              components: [218, 100, 13.9],
+              hex: '#001a47',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1117,7 +1601,11 @@
             },
           },
           '1': {
-            $value: '#002766',
+            $value: {
+              colorSpace: 'hsl',
+              components: [217.1, 100, 20],
+              hex: '#002766',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1126,7 +1614,11 @@
             },
           },
           '2': {
-            $value: '#00378a',
+            $value: {
+              colorSpace: 'hsl',
+              components: [216.1, 100, 27.1],
+              hex: '#00378a',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1135,7 +1627,11 @@
             },
           },
           '3': {
-            $value: '#0046a8',
+            $value: {
+              colorSpace: 'hsl',
+              components: [215, 100, 32.9],
+              hex: '#0046a8',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1144,7 +1640,11 @@
             },
           },
           '4': {
-            $value: '#005bd1',
+            $value: {
+              colorSpace: 'hsl',
+              components: [213.9, 100, 41],
+              hex: '#005bd1',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1153,7 +1653,11 @@
             },
           },
           '5': {
-            $value: '#0576ff',
+            $value: {
+              colorSpace: 'hsl',
+              components: [212.9, 100, 51],
+              hex: '#0576ff',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1162,7 +1666,11 @@
             },
           },
           '6': {
-            $value: '#4da0ff',
+            $value: {
+              colorSpace: 'hsl',
+              components: [212, 100, 65.1],
+              hex: '#4da0ff',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1171,7 +1679,11 @@
             },
           },
           '7': {
-            $value: '#61adff',
+            $value: {
+              colorSpace: 'hsl',
+              components: [211.1, 100, 69],
+              hex: '#61adff',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1180,7 +1692,11 @@
             },
           },
           '8': {
-            $value: '#85c2ff',
+            $value: {
+              colorSpace: 'hsl',
+              components: [210, 100, 76.1],
+              hex: '#85c2ff',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1189,7 +1705,11 @@
             },
           },
           '9': {
-            $value: '#a3d3ff',
+            $value: {
+              colorSpace: 'hsl',
+              components: [208.7, 100, 82],
+              hex: '#a3d3ff',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1200,7 +1720,11 @@
         },
         indigo: {
           '0': {
-            $value: '#1b183f',
+            $value: {
+              colorSpace: 'hsl',
+              components: [244.6, 44.8, 17.1],
+              hex: '#1b183f',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1209,7 +1733,11 @@
             },
           },
           '1': {
-            $value: '#25215f',
+            $value: {
+              colorSpace: 'hsl',
+              components: [243.9, 48.4, 25.1],
+              hex: '#25215f',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1218,7 +1746,11 @@
             },
           },
           '2': {
-            $value: '#312c90',
+            $value: {
+              colorSpace: 'hsl',
+              components: [243, 53.2, 36.9],
+              hex: '#312c90',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1227,7 +1759,11 @@
             },
           },
           '3': {
-            $value: '#3935c0',
+            $value: {
+              colorSpace: 'hsl',
+              components: [241.7, 56.7, 48],
+              hex: '#3935c0',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1236,7 +1772,11 @@
             },
           },
           '4': {
-            $value: '#514ed4',
+            $value: {
+              colorSpace: 'hsl',
+              components: [241.3, 60.9, 56.9],
+              hex: '#514ed4',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1245,7 +1785,11 @@
             },
           },
           '5': {
-            $value: '#7070e1',
+            $value: {
+              colorSpace: 'hsl',
+              components: [240, 65.3, 66.1],
+              hex: '#7070e1',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1254,7 +1798,11 @@
             },
           },
           '6': {
-            $value: '#9899ec',
+            $value: {
+              colorSpace: 'hsl',
+              components: [239.3, 68.9, 76.1],
+              hex: '#9899ec',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1263,7 +1811,11 @@
             },
           },
           '7': {
-            $value: '#a2a5f1',
+            $value: {
+              colorSpace: 'hsl',
+              components: [237.7, 73.8, 79],
+              hex: '#a2a5f1',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1272,7 +1824,11 @@
             },
           },
           '8': {
-            $value: '#b7baf6',
+            $value: {
+              colorSpace: 'hsl',
+              components: [237.1, 77.8, 84.1],
+              hex: '#b7baf6',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1281,7 +1837,11 @@
             },
           },
           '9': {
-            $value: '#c8cbf9',
+            $value: {
+              colorSpace: 'hsl',
+              components: [236.3, 80.3, 88],
+              hex: '#c8cbf9',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1292,7 +1852,11 @@
         },
         purple: {
           '0': {
-            $value: '#211047',
+            $value: {
+              colorSpace: 'hsl',
+              components: [258.5, 63.2, 17.1],
+              hex: '#211047',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1301,7 +1865,11 @@
             },
           },
           '1': {
-            $value: '#31146b',
+            $value: {
+              colorSpace: 'hsl',
+              components: [260, 68.5, 24.9],
+              hex: '#31146b',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1310,7 +1878,11 @@
             },
           },
           '2': {
-            $value: '#481a9e',
+            $value: {
+              colorSpace: 'hsl',
+              components: [260.9, 71.7, 36.1],
+              hex: '#481a9e',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1319,7 +1891,11 @@
             },
           },
           '3': {
-            $value: '#5b1cca',
+            $value: {
+              colorSpace: 'hsl',
+              components: [261.7, 75.7, 45.1],
+              hex: '#5b1cca',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1328,7 +1904,11 @@
             },
           },
           '4': {
-            $value: '#7730e8',
+            $value: {
+              colorSpace: 'hsl',
+              components: [263.2, 80, 54.9],
+              hex: '#7730e8',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1337,7 +1917,11 @@
             },
           },
           '5': {
-            $value: '#975bf1',
+            $value: {
+              colorSpace: 'hsl',
+              components: [264, 84.3, 65.1],
+              hex: '#975bf1',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1346,7 +1930,11 @@
             },
           },
           '6': {
-            $value: '#b687f7',
+            $value: {
+              colorSpace: 'hsl',
+              components: [265.2, 87.5, 74.9],
+              hex: '#b687f7',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1355,7 +1943,11 @@
             },
           },
           '7': {
-            $value: '#c398fb',
+            $value: {
+              colorSpace: 'hsl',
+              components: [266.1, 92.5, 79],
+              hex: '#c398fb',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1364,7 +1956,11 @@
             },
           },
           '8': {
-            $value: '#d2affd',
+            $value: {
+              colorSpace: 'hsl',
+              components: [266.9, 95.1, 83.9],
+              hex: '#d2affd',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1373,7 +1969,11 @@
             },
           },
           '9': {
-            $value: '#e1c7ff',
+            $value: {
+              colorSpace: 'hsl',
+              components: [267.9, 100, 89],
+              hex: '#e1c7ff',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1384,7 +1984,11 @@
         },
         plum: {
           '0': {
-            $value: '#2a0e3f',
+            $value: {
+              colorSpace: 'hsl',
+              components: [274.3, 63.6, 15.1],
+              hex: '#2a0e3f',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1393,7 +1997,11 @@
             },
           },
           '1': {
-            $value: '#40125e',
+            $value: {
+              colorSpace: 'hsl',
+              components: [276.3, 67.9, 22],
+              hex: '#40125e',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1402,7 +2010,11 @@
             },
           },
           '2': {
-            $value: '#5c1688',
+            $value: {
+              colorSpace: 'hsl',
+              components: [276.8, 72.2, 31],
+              hex: '#5c1688',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1411,7 +2023,11 @@
             },
           },
           '3': {
-            $value: '#7517ab',
+            $value: {
+              colorSpace: 'hsl',
+              components: [278.1, 76.3, 38],
+              hex: '#7517ab',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1420,7 +2036,11 @@
             },
           },
           '4': {
-            $value: '#9518d8',
+            $value: {
+              colorSpace: 'hsl',
+              components: [279.1, 80, 47.1],
+              hex: '#9518d8',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1429,7 +2049,11 @@
             },
           },
           '5': {
-            $value: '#b643ef',
+            $value: {
+              colorSpace: 'hsl',
+              components: [280.1, 84.3, 60],
+              hex: '#b643ef',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1438,7 +2062,11 @@
             },
           },
           '6': {
-            $value: '#d07ef7',
+            $value: {
+              colorSpace: 'hsl',
+              components: [280.7, 88.3, 73.1],
+              hex: '#d07ef7',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1447,7 +2075,11 @@
             },
           },
           '7': {
-            $value: '#d889fa',
+            $value: {
+              colorSpace: 'hsl',
+              components: [281.9, 91.9, 75.9],
+              hex: '#d889fa',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1456,7 +2088,11 @@
             },
           },
           '8': {
-            $value: '#e4a5fd',
+            $value: {
+              colorSpace: 'hsl',
+              components: [283, 95.7, 82],
+              hex: '#e4a5fd',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1465,7 +2101,11 @@
             },
           },
           '9': {
-            $value: '#edbdff',
+            $value: {
+              colorSpace: 'hsl',
+              components: [283.6, 100, 87.1],
+              hex: '#edbdff',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1476,7 +2116,11 @@
         },
         pink: {
           '0': {
-            $value: '#2d1524',
+            $value: {
+              colorSpace: 'hsl',
+              components: [322.5, 36.4, 12.9],
+              hex: '#2d1524',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1485,7 +2129,11 @@
             },
           },
           '1': {
-            $value: '#451c35',
+            $value: {
+              colorSpace: 'hsl',
+              components: [323.4, 42.3, 19],
+              hex: '#451c35',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1494,7 +2142,11 @@
             },
           },
           '2': {
-            $value: '#65244a',
+            $value: {
+              colorSpace: 'hsl',
+              components: [324.9, 47.4, 26.9],
+              hex: '#65244a',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1503,7 +2155,11 @@
             },
           },
           '3': {
-            $value: '#842a5d',
+            $value: {
+              colorSpace: 'hsl',
+              components: [326, 51.7, 34.1],
+              hex: '#842a5d',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1512,7 +2168,11 @@
             },
           },
           '4': {
-            $value: '#ac2f74',
+            $value: {
+              colorSpace: 'hsl',
+              components: [326.9, 57.1, 42.9],
+              hex: '#ac2f74',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1521,7 +2181,11 @@
             },
           },
           '5': {
-            $value: '#d34591',
+            $value: {
+              colorSpace: 'hsl',
+              components: [327.9, 61.7, 54.9],
+              hex: '#d34591',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1530,7 +2194,11 @@
             },
           },
           '6': {
-            $value: '#e57bb2',
+            $value: {
+              colorSpace: 'hsl',
+              components: [328.9, 67.1, 69],
+              hex: '#e57bb2',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1539,7 +2207,11 @@
             },
           },
           '7': {
-            $value: '#ec8dbd',
+            $value: {
+              colorSpace: 'hsl',
+              components: [329.7, 71.4, 73.9],
+              hex: '#ec8dbd',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1548,7 +2220,11 @@
             },
           },
           '8': {
-            $value: '#f4a9cd',
+            $value: {
+              colorSpace: 'hsl',
+              components: [331.2, 77.3, 81],
+              hex: '#f4a9cd',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1557,7 +2233,11 @@
             },
           },
           '9': {
-            $value: '#f9bed9',
+            $value: {
+              colorSpace: 'hsl',
+              components: [332.5, 83.1, 86.1],
+              hex: '#f9bed9',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1568,7 +2248,11 @@
         },
         auburn: {
           '0': {
-            $value: '#271817',
+            $value: {
+              colorSpace: 'hsl',
+              components: [3.7, 25.8, 12.2],
+              hex: '#271817',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1577,7 +2261,11 @@
             },
           },
           '1': {
-            $value: '#3a2422',
+            $value: {
+              colorSpace: 'hsl',
+              components: [5, 26.1, 18],
+              hex: '#3a2422',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1586,7 +2274,11 @@
             },
           },
           '2': {
-            $value: '#543331',
+            $value: {
+              colorSpace: 'hsl',
+              components: [3.4, 26.3, 26.1],
+              hex: '#543331',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1595,7 +2287,11 @@
             },
           },
           '3': {
-            $value: '#6d4340',
+            $value: {
+              colorSpace: 'hsl',
+              components: [4, 26, 33.9],
+              hex: '#6d4340',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1604,7 +2300,11 @@
             },
           },
           '4': {
-            $value: '#87534f',
+            $value: {
+              colorSpace: 'hsl',
+              components: [4.3, 26.2, 42],
+              hex: '#87534f',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1613,7 +2313,11 @@
             },
           },
           '5': {
-            $value: '#a86f6b',
+            $value: {
+              colorSpace: 'hsl',
+              components: [3.9, 26, 53.9],
+              hex: '#a86f6b',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1622,7 +2326,11 @@
             },
           },
           '6': {
-            $value: '#bf9592',
+            $value: {
+              colorSpace: 'hsl',
+              components: [4, 26, 66.1],
+              hex: '#bf9592',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1631,7 +2339,11 @@
             },
           },
           '7': {
-            $value: '#c6a19f',
+            $value: {
+              colorSpace: 'hsl',
+              components: [3.1, 25.5, 70],
+              hex: '#c6a19f',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1640,7 +2352,11 @@
             },
           },
           '8': {
-            $value: '#d4b7b5',
+            $value: {
+              colorSpace: 'hsl',
+              components: [3.9, 26.5, 77.1],
+              hex: '#d4b7b5',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1649,7 +2365,11 @@
             },
           },
           '9': {
-            $value: '#dfcac8',
+            $value: {
+              colorSpace: 'hsl',
+              components: [5.2, 26.4, 82.9],
+              hex: '#dfcac8',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1660,7 +2380,11 @@
         },
         brown: {
           '0': {
-            $value: '#241c14',
+            $value: {
+              colorSpace: 'hsl',
+              components: [30, 28.6, 11],
+              hex: '#241c14',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1669,7 +2393,11 @@
             },
           },
           '1': {
-            $value: '#342a1d',
+            $value: {
+              colorSpace: 'hsl',
+              components: [33.9, 28.4, 15.9],
+              hex: '#342a1d',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1678,7 +2406,11 @@
             },
           },
           '2': {
-            $value: '#483a28',
+            $value: {
+              colorSpace: 'hsl',
+              components: [33.8, 28.6, 22],
+              hex: '#483a28',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1687,7 +2419,11 @@
             },
           },
           '3': {
-            $value: '#5d4a32',
+            $value: {
+              colorSpace: 'hsl',
+              components: [33.5, 30.1, 28],
+              hex: '#5d4a32',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1696,7 +2432,11 @@
             },
           },
           '4': {
-            $value: '#755e3e',
+            $value: {
+              colorSpace: 'hsl',
+              components: [34.9, 30.7, 35.1],
+              hex: '#755e3e',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1705,7 +2445,11 @@
             },
           },
           '5': {
-            $value: '#94774c',
+            $value: {
+              colorSpace: 'hsl',
+              components: [35.8, 32.1, 43.9],
+              hex: '#94774c',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1714,7 +2458,11 @@
             },
           },
           '6': {
-            $value: '#b69a6d',
+            $value: {
+              colorSpace: 'hsl',
+              components: [37, 33.3, 57.1],
+              hex: '#b69a6d',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1723,7 +2471,11 @@
             },
           },
           '7': {
-            $value: '#bfa77d',
+            $value: {
+              colorSpace: 'hsl',
+              components: [38.2, 34, 62],
+              hex: '#bfa77d',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1732,7 +2484,11 @@
             },
           },
           '8': {
-            $value: '#cdbb98',
+            $value: {
+              colorSpace: 'hsl',
+              components: [39.6, 34.6, 70],
+              hex: '#cdbb98',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1741,7 +2497,11 @@
             },
           },
           '9': {
-            $value: '#dbceb3',
+            $value: {
+              colorSpace: 'hsl',
+              components: [40.5, 35.7, 78],
+              hex: '#dbceb3',
+            },
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -1751,7 +2511,11 @@
           },
         },
         black: {
-          $value: '#0d1117',
+          $value: {
+            colorSpace: 'hsl',
+            components: [216, 27.8, 7.1],
+            hex: '#0d1117',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1760,7 +2524,11 @@
           },
         },
         white: {
-          $value: '#ffffff',
+          $value: {
+            colorSpace: 'hsl',
+            components: [0, 0, 100],
+            hex: '#ffffff',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {