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

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

@@ -6,7 +6,11 @@
   base: {
     color: {
       black: {
-        $value: '#010409',
+        $value: {
+          colorSpace: 'hsl',
+          components: [217.5, 80, 2],
+          hex: '#010409',
+        },
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -24,7 +28,11 @@
         },
       },
       white: {
-        $value: '#ffffff',
+        $value: {
+          colorSpace: 'hsl',
+          components: [0, 0, 100],
+          hex: '#ffffff',
+        },
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -33,7 +41,11 @@
         },
       },
       transparent: {
-        $value: '#000000',
+        $value: {
+          colorSpace: 'hsl',
+          components: [0, 0, 0],
+          hex: '#000000',
+        },
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -53,7 +65,11 @@
           },
         },
         '1': {
-          $value: '#0D1117',
+          $value: {
+            colorSpace: 'hsl',
+            components: [216, 27.8, 7.1],
+            hex: '#0D1117',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -62,7 +78,11 @@
           },
         },
         '2': {
-          $value: '#151B23',
+          $value: {
+            colorSpace: 'hsl',
+            components: [214.3, 25, 11],
+            hex: '#151B23',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -71,7 +91,11 @@
           },
         },
         '3': {
-          $value: '#212830',
+          $value: {
+            colorSpace: 'hsl',
+            components: [212, 18.5, 15.9],
+            hex: '#212830',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -80,7 +104,11 @@
           },
         },
         '4': {
-          $value: '#262C36',
+          $value: {
+            colorSpace: 'hsl',
+            components: [217.5, 17.4, 18],
+            hex: '#262C36',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -89,7 +117,11 @@
           },
         },
         '5': {
-          $value: '#2A313C',
+          $value: {
+            colorSpace: 'hsl',
+            components: [216.7, 17.6, 20],
+            hex: '#2A313C',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -98,7 +130,11 @@
           },
         },
         '6': {
-          $value: '#2F3742',
+          $value: {
+            colorSpace: 'hsl',
+            components: [214.7, 16.8, 22.2],
+            hex: '#2F3742',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -107,7 +143,11 @@
           },
         },
         '7': {
-          $value: '#3D444D',
+          $value: {
+            colorSpace: 'hsl',
+            components: [213.8, 11.6, 27.1],
+            hex: '#3D444D',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -116,7 +156,11 @@
           },
         },
         '8': {
-          $value: '#656C76',
+          $value: {
+            colorSpace: 'hsl',
+            components: [215.3, 7.8, 42.9],
+            hex: '#656C76',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -125,7 +169,11 @@
           },
         },
         '9': {
-          $value: '#9198A1',
+          $value: {
+            colorSpace: 'hsl',
+            components: [213.8, 7.8, 60],
+            hex: '#9198A1',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -134,7 +182,11 @@
           },
         },
         '10': {
-          $value: '#B7BDC8',
+          $value: {
+            colorSpace: 'hsl',
+            components: [218.8, 13.4, 75.1],
+            hex: '#B7BDC8',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -143,7 +195,11 @@
           },
         },
         '11': {
-          $value: '#D1D7E0',
+          $value: {
+            colorSpace: 'hsl',
+            components: [216, 19.5, 84.9],
+            hex: '#D1D7E0',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -152,7 +208,11 @@
           },
         },
         '12': {
-          $value: '#F0F6FC',
+          $value: {
+            colorSpace: 'hsl',
+            components: [210, 66.7, 96.5],
+            hex: '#F0F6FC',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -172,7 +232,11 @@
       },
       blue: {
         '0': {
-          $value: '#cae8ff',
+          $value: {
+            colorSpace: 'hsl',
+            components: [206, 100, 89.6],
+            hex: '#cae8ff',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -181,7 +245,11 @@
           },
         },
         '1': {
-          $value: '#a5d6ff',
+          $value: {
+            colorSpace: 'hsl',
+            components: [207.3, 100, 82.4],
+            hex: '#a5d6ff',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -190,7 +258,11 @@
           },
         },
         '2': {
-          $value: '#79c0ff',
+          $value: {
+            colorSpace: 'hsl',
+            components: [208.2, 100, 73.7],
+            hex: '#79c0ff',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -199,7 +271,11 @@
           },
         },
         '3': {
-          $value: '#58a6ff',
+          $value: {
+            colorSpace: 'hsl',
+            components: [212, 100, 67.3],
+            hex: '#58a6ff',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -208,7 +284,11 @@
           },
         },
         '4': {
-          $value: '#388bfd',
+          $value: {
+            colorSpace: 'hsl',
+            components: [214.7, 98, 60.6],
+            hex: '#388bfd',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -217,7 +297,11 @@
           },
         },
         '5': {
-          $value: '#1f6feb',
+          $value: {
+            colorSpace: 'hsl',
+            components: [216.5, 83.6, 52.2],
+            hex: '#1f6feb',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -226,7 +310,11 @@
           },
         },
         '6': {
-          $value: '#1158c7',
+          $value: {
+            colorSpace: 'hsl',
+            components: [216.6, 84.3, 42.4],
+            hex: '#1158c7',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -235,7 +323,11 @@
           },
         },
         '7': {
-          $value: '#0d419d',
+          $value: {
+            colorSpace: 'hsl',
+            components: [218.3, 84.7, 33.3],
+            hex: '#0d419d',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -244,7 +336,11 @@
           },
         },
         '8': {
-          $value: '#0c2d6b',
+          $value: {
+            colorSpace: 'hsl',
+            components: [219.2, 79.8, 23.3],
+            hex: '#0c2d6b',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -253,7 +349,11 @@
           },
         },
         '9': {
-          $value: '#051d4d',
+          $value: {
+            colorSpace: 'hsl',
+            components: [220, 87.8, 16.1],
+            hex: '#051d4d',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -264,7 +364,11 @@
       },
       green: {
         '0': {
-          $value: '#aff5b4',
+          $value: {
+            colorSpace: 'hsl',
+            components: [124.3, 77.8, 82.4],
+            hex: '#aff5b4',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -273,7 +377,11 @@
           },
         },
         '1': {
-          $value: '#7ee787',
+          $value: {
+            colorSpace: 'hsl',
+            components: [125.1, 68.6, 70],
+            hex: '#7ee787',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -282,7 +390,11 @@
           },
         },
         '2': {
-          $value: '#56d364',
+          $value: {
+            colorSpace: 'hsl',
+            components: [126.7, 58.7, 58.2],
+            hex: '#56d364',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -291,7 +403,11 @@
           },
         },
         '3': {
-          $value: '#3fb950',
+          $value: {
+            colorSpace: 'hsl',
+            components: [128.4, 49.2, 48.6],
+            hex: '#3fb950',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -300,7 +416,11 @@
           },
         },
         '4': {
-          $value: '#2ea043',
+          $value: {
+            colorSpace: 'hsl',
+            components: [131.1, 55.3, 40.4],
+            hex: '#2ea043',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -309,7 +429,11 @@
           },
         },
         '5': {
-          $value: '#238636',
+          $value: {
+            colorSpace: 'hsl',
+            components: [131.5, 58.6, 33.1],
+            hex: '#238636',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -318,7 +442,11 @@
           },
         },
         '6': {
-          $value: '#196c2e',
+          $value: {
+            colorSpace: 'hsl',
+            components: [135.2, 62.4, 26.1],
+            hex: '#196c2e',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -327,7 +455,11 @@
           },
         },
         '7': {
-          $value: '#0f5323',
+          $value: {
+            colorSpace: 'hsl',
+            components: [137.6, 69.4, 19.2],
+            hex: '#0f5323',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -336,7 +468,11 @@
           },
         },
         '8': {
-          $value: '#033a16',
+          $value: {
+            colorSpace: 'hsl',
+            components: [140.7, 90.2, 12],
+            hex: '#033a16',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -345,7 +481,11 @@
           },
         },
         '9': {
-          $value: '#04260f',
+          $value: {
+            colorSpace: 'hsl',
+            components: [139.4, 81, 8.2],
+            hex: '#04260f',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -356,7 +496,11 @@
       },
       yellow: {
         '0': {
-          $value: '#f8e3a1',
+          $value: {
+            colorSpace: 'hsl',
+            components: [45.5, 86.1, 80.2],
+            hex: '#f8e3a1',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -365,7 +509,11 @@
           },
         },
         '1': {
-          $value: '#f2cc60',
+          $value: {
+            colorSpace: 'hsl',
+            components: [44.4, 84.9, 66.3],
+            hex: '#f2cc60',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -374,7 +522,11 @@
           },
         },
         '2': {
-          $value: '#e3b341',
+          $value: {
+            colorSpace: 'hsl',
+            components: [42.2, 74.3, 57.3],
+            hex: '#e3b341',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -383,7 +535,11 @@
           },
         },
         '3': {
-          $value: '#d29922',
+          $value: {
+            colorSpace: 'hsl',
+            components: [40.6, 72.1, 47.8],
+            hex: '#d29922',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -392,7 +548,11 @@
           },
         },
         '4': {
-          $value: '#bb8009',
+          $value: {
+            colorSpace: 'hsl',
+            components: [40.1, 90.8, 38.4],
+            hex: '#bb8009',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -401,7 +561,11 @@
           },
         },
         '5': {
-          $value: '#9e6a03',
+          $value: {
+            colorSpace: 'hsl',
+            components: [39.9, 96.3, 31.6],
+            hex: '#9e6a03',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -410,7 +574,11 @@
           },
         },
         '6': {
-          $value: '#845306',
+          $value: {
+            colorSpace: 'hsl',
+            components: [36.7, 91.3, 27.1],
+            hex: '#845306',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -419,7 +587,11 @@
           },
         },
         '7': {
-          $value: '#693e00',
+          $value: {
+            colorSpace: 'hsl',
+            components: [35.4, 100, 20.6],
+            hex: '#693e00',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -428,7 +600,11 @@
           },
         },
         '8': {
-          $value: '#4b2900',
+          $value: {
+            colorSpace: 'hsl',
+            components: [32.8, 100, 14.7],
+            hex: '#4b2900',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -437,7 +613,11 @@
           },
         },
         '9': {
-          $value: '#341a00',
+          $value: {
+            colorSpace: 'hsl',
+            components: [30, 100, 10.2],
+            hex: '#341a00',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -448,7 +628,11 @@
       },
       orange: {
         '0': {
-          $value: '#ffdfb6',
+          $value: {
+            colorSpace: 'hsl',
+            components: [33.7, 100, 85.7],
+            hex: '#ffdfb6',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -457,7 +641,11 @@
           },
         },
         '1': {
-          $value: '#ffc680',
+          $value: {
+            colorSpace: 'hsl',
+            components: [33.1, 100, 75.1],
+            hex: '#ffc680',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -466,7 +654,11 @@
           },
         },
         '2': {
-          $value: '#ffa657',
+          $value: {
+            colorSpace: 'hsl',
+            components: [28.2, 100, 67.1],
+            hex: '#ffa657',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -475,7 +667,11 @@
           },
         },
         '3': {
-          $value: '#f0883e',
+          $value: {
+            colorSpace: 'hsl',
+            components: [24.9, 85.6, 59.2],
+            hex: '#f0883e',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -484,7 +680,11 @@
           },
         },
         '4': {
-          $value: '#db6d28',
+          $value: {
+            colorSpace: 'hsl',
+            components: [23.1, 71.3, 50.8],
+            hex: '#db6d28',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -493,7 +693,11 @@
           },
         },
         '5': {
-          $value: '#bd561d',
+          $value: {
+            colorSpace: 'hsl',
+            components: [21.4, 73.4, 42.7],
+            hex: '#bd561d',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -502,7 +706,11 @@
           },
         },
         '6': {
-          $value: '#9b4215',
+          $value: {
+            colorSpace: 'hsl',
+            components: [20.1, 76.1, 34.5],
+            hex: '#9b4215',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -511,7 +719,11 @@
           },
         },
         '7': {
-          $value: '#762d0a',
+          $value: {
+            colorSpace: 'hsl',
+            components: [19.4, 84.4, 25.1],
+            hex: '#762d0a',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -520,7 +732,11 @@
           },
         },
         '8': {
-          $value: '#5a1e02',
+          $value: {
+            colorSpace: 'hsl',
+            components: [19.1, 95.7, 18],
+            hex: '#5a1e02',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -529,7 +745,11 @@
           },
         },
         '9': {
-          $value: '#3d1300',
+          $value: {
+            colorSpace: 'hsl',
+            components: [18.7, 100, 12],
+            hex: '#3d1300',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -540,7 +760,11 @@
       },
       red: {
         '0': {
-          $value: '#ffdcd7',
+          $value: {
+            colorSpace: 'hsl',
+            components: [7.5, 100, 92.2],
+            hex: '#ffdcd7',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -549,7 +773,11 @@
           },
         },
         '1': {
-          $value: '#ffc1ba',
+          $value: {
+            colorSpace: 'hsl',
+            components: [6.1, 100, 86.5],
+            hex: '#ffc1ba',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -558,7 +786,11 @@
           },
         },
         '2': {
-          $value: '#ffa198',
+          $value: {
+            colorSpace: 'hsl',
+            components: [5.2, 100, 79.8],
+            hex: '#ffa198',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -567,7 +799,11 @@
           },
         },
         '3': {
-          $value: '#ff7b72',
+          $value: {
+            colorSpace: 'hsl',
+            components: [3.8, 100, 72.4],
+            hex: '#ff7b72',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -576,7 +812,11 @@
           },
         },
         '4': {
-          $value: '#f85149',
+          $value: {
+            colorSpace: 'hsl',
+            components: [2.7, 92.6, 62.9],
+            hex: '#f85149',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -585,7 +825,11 @@
           },
         },
         '5': {
-          $value: '#da3633',
+          $value: {
+            colorSpace: 'hsl',
+            components: [1.1, 69.3, 52.7],
+            hex: '#da3633',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -594,7 +838,11 @@
           },
         },
         '6': {
-          $value: '#b62324',
+          $value: {
+            colorSpace: 'hsl',
+            components: [359.6, 67.7, 42.5],
+            hex: '#b62324',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -603,7 +851,11 @@
           },
         },
         '7': {
-          $value: '#8e1519',
+          $value: {
+            colorSpace: 'hsl',
+            components: [358, 74.2, 32],
+            hex: '#8e1519',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -612,7 +864,11 @@
           },
         },
         '8': {
-          $value: '#67060c',
+          $value: {
+            colorSpace: 'hsl',
+            components: [356.3, 89, 21.4],
+            hex: '#67060c',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -621,7 +877,11 @@
           },
         },
         '9': {
-          $value: '#490202',
+          $value: {
+            colorSpace: 'hsl',
+            components: [0, 94.7, 14.7],
+            hex: '#490202',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -632,7 +892,11 @@
       },
       purple: {
         '0': {
-          $value: '#eddeff',
+          $value: {
+            colorSpace: 'hsl',
+            components: [267.3, 100, 93.5],
+            hex: '#eddeff',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -641,7 +905,11 @@
           },
         },
         '1': {
-          $value: '#e2c5ff',
+          $value: {
+            colorSpace: 'hsl',
+            components: [270, 100, 88.6],
+            hex: '#e2c5ff',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -650,7 +918,11 @@
           },
         },
         '2': {
-          $value: '#d2a8ff',
+          $value: {
+            colorSpace: 'hsl',
+            components: [269, 100, 82.9],
+            hex: '#d2a8ff',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -659,7 +931,11 @@
           },
         },
         '3': {
-          $value: '#BE8FFF',
+          $value: {
+            colorSpace: 'hsl',
+            components: [265.2, 100, 78],
+            hex: '#BE8FFF',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -668,7 +944,11 @@
           },
         },
         '4': {
-          $value: '#AB7DF8',
+          $value: {
+            colorSpace: 'hsl',
+            components: [262.4, 89.8, 73.1],
+            hex: '#AB7DF8',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -677,7 +957,11 @@
           },
         },
         '5': {
-          $value: '#8957e5',
+          $value: {
+            colorSpace: 'hsl',
+            components: [261.1, 73.2, 62],
+            hex: '#8957e5',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -686,7 +970,11 @@
           },
         },
         '6': {
-          $value: '#6e40c9',
+          $value: {
+            colorSpace: 'hsl',
+            components: [260.1, 55.9, 52],
+            hex: '#6e40c9',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -695,7 +983,11 @@
           },
         },
         '7': {
-          $value: '#553098',
+          $value: {
+            colorSpace: 'hsl',
+            components: [261.3, 52, 39.2],
+            hex: '#553098',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -704,7 +996,11 @@
           },
         },
         '8': {
-          $value: '#3c1e70',
+          $value: {
+            colorSpace: 'hsl',
+            components: [262, 57.7, 27.8],
+            hex: '#3c1e70',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -713,7 +1009,11 @@
           },
         },
         '9': {
-          $value: '#271052',
+          $value: {
+            colorSpace: 'hsl',
+            components: [260.9, 67.3, 19.2],
+            hex: '#271052',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -724,7 +1024,11 @@
       },
       pink: {
         '0': {
-          $value: '#ffdaec',
+          $value: {
+            colorSpace: 'hsl',
+            components: [330.8, 100, 92.7],
+            hex: '#ffdaec',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -733,7 +1037,11 @@
           },
         },
         '1': {
-          $value: '#ffbedd',
+          $value: {
+            colorSpace: 'hsl',
+            components: [331.4, 100, 87.3],
+            hex: '#ffbedd',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -742,7 +1050,11 @@
           },
         },
         '2': {
-          $value: '#ff9bce',
+          $value: {
+            colorSpace: 'hsl',
+            components: [329.4, 100, 80.4],
+            hex: '#ff9bce',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -751,7 +1063,11 @@
           },
         },
         '3': {
-          $value: '#f778ba',
+          $value: {
+            colorSpace: 'hsl',
+            components: [328.8, 88.8, 72],
+            hex: '#f778ba',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -760,7 +1076,11 @@
           },
         },
         '4': {
-          $value: '#db61a2',
+          $value: {
+            colorSpace: 'hsl',
+            components: [328, 62.9, 62],
+            hex: '#db61a2',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -769,7 +1089,11 @@
           },
         },
         '5': {
-          $value: '#bf4b8a',
+          $value: {
+            colorSpace: 'hsl',
+            components: [327.4, 47.5, 52.2],
+            hex: '#bf4b8a',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -778,7 +1102,11 @@
           },
         },
         '6': {
-          $value: '#9e3670',
+          $value: {
+            colorSpace: 'hsl',
+            components: [326.5, 49.1, 41.6],
+            hex: '#9e3670',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -787,7 +1115,11 @@
           },
         },
         '7': {
-          $value: '#7d2457',
+          $value: {
+            colorSpace: 'hsl',
+            components: [325.6, 55.3, 31.6],
+            hex: '#7d2457',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -796,7 +1128,11 @@
           },
         },
         '8': {
-          $value: '#5e103e',
+          $value: {
+            colorSpace: 'hsl',
+            components: [324.6, 70.9, 21.6],
+            hex: '#5e103e',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -805,7 +1141,11 @@
           },
         },
         '9': {
-          $value: '#42062a',
+          $value: {
+            colorSpace: 'hsl',
+            components: [324, 83.3, 14.1],
+            hex: '#42062a',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -816,7 +1156,11 @@
       },
       coral: {
         '0': {
-          $value: '#ffddd2',
+          $value: {
+            colorSpace: 'hsl',
+            components: [14.7, 100, 91.2],
+            hex: '#ffddd2',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -825,7 +1169,11 @@
           },
         },
         '1': {
-          $value: '#ffc2b2',
+          $value: {
+            colorSpace: 'hsl',
+            components: [12.5, 100, 84.9],
+            hex: '#ffc2b2',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -834,7 +1182,11 @@
           },
         },
         '2': {
-          $value: '#ffa28b',
+          $value: {
+            colorSpace: 'hsl',
+            components: [11.9, 100, 77.3],
+            hex: '#ffa28b',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -843,7 +1195,11 @@
           },
         },
         '3': {
-          $value: '#f78166',
+          $value: {
+            colorSpace: 'hsl',
+            components: [11.2, 90.1, 68.4],
+            hex: '#f78166',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -852,7 +1208,11 @@
           },
         },
         '4': {
-          $value: '#ea6045',
+          $value: {
+            colorSpace: 'hsl',
+            components: [9.8, 79.7, 59.4],
+            hex: '#ea6045',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -861,7 +1221,11 @@
           },
         },
         '5': {
-          $value: '#cf462d',
+          $value: {
+            colorSpace: 'hsl',
+            components: [9.3, 64.3, 49.4],
+            hex: '#cf462d',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -870,7 +1234,11 @@
           },
         },
         '6': {
-          $value: '#ac3220',
+          $value: {
+            colorSpace: 'hsl',
+            components: [7.7, 68.6, 40],
+            hex: '#ac3220',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -879,7 +1247,11 @@
           },
         },
         '7': {
-          $value: '#872012',
+          $value: {
+            colorSpace: 'hsl',
+            components: [7.2, 76.5, 30],
+            hex: '#872012',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -888,7 +1260,11 @@
           },
         },
         '8': {
-          $value: '#640d04',
+          $value: {
+            colorSpace: 'hsl',
+            components: [5.6, 92.3, 20.4],
+            hex: '#640d04',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -897,7 +1273,11 @@
           },
         },
         '9': {
-          $value: '#460701',
+          $value: {
+            colorSpace: 'hsl',
+            components: [5.2, 97.2, 13.9],
+            hex: '#460701',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {