@vsn-ux/gaia-styles 0.5.19 → 0.6.1

package/src/design-tokens/dtcg-tokens.json

@@ -2,195 +2,493 @@
   "color": {
     "$type": "color",
     "white": {
-      "$value": "#FFFFFF"
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [1, 1, 1],
+        "alpha": 1,
+        "hex": "#FFFFFF"
+      }
     },
     "black": {
-      "$value": "#000000"
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [0, 0, 0],
+        "alpha": 1,
+        "hex": "#000000"
+      }
     },
     "cyan": {
       "60": {
-        "$value": "#377EA0"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.21568627450980393, 0.49411764705882355, 0.6274509803921569
+          ],
+          "alpha": 1,
+          "hex": "#377EA0"
+        }
       },
       "70": {
-        "$value": "#2A6480"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.16470588235294117, 0.39215686274509803, 0.5019607843137255
+          ],
+          "alpha": 1,
+          "hex": "#2A6480"
+        }
       },
       "80": {
-        "$value": "#1F4E66"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0.12156862745098039, 0.3058823529411765, 0.4],
+          "alpha": 1,
+          "hex": "#1F4E66"
+        }
       },
       "90": {
-        "$value": "#133445"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+          ],
+          "alpha": 1,
+          "hex": "#133445"
+        }
       }
     },
     "orange": {
       "10": {
-        "$value": "#FCF0E7"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9882352941176471, 0.9411764705882353, 0.9058823529411765
+          ],
+          "alpha": 1,
+          "hex": "#FCF0E7"
+        }
       },
       "20": {
-        "$value": "#FAE0CE"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9803921568627451, 0.8784313725490196, 0.807843137254902
+          ],
+          "alpha": 1,
+          "hex": "#FAE0CE"
+        }
       },
       "30": {
-        "$value": "#F5C3A1"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9607843137254902, 0.7647058823529411, 0.6313725490196078
+          ],
+          "alpha": 1,
+          "hex": "#F5C3A1"
+        }
       },
       "40": {
-        "$value": "#F2A676"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9490196078431372, 0.6509803921568628, 0.4627450980392157
+          ],
+          "alpha": 1,
+          "hex": "#F2A676"
+        }
       },
       "60": {
-        "$value": "#BB5822"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.7333333333333333, 0.34509803921568627, 0.13333333333333333
+          ],
+          "alpha": 1,
+          "hex": "#BB5822"
+        }
       }
     },
     "neutral": {
-      "$value": "{color.neutral.30}",
       "10": {
-        "$value": "#F2F3F5"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9490196078431372, 0.9529411764705882, 0.9607843137254902
+          ],
+          "alpha": 1,
+          "hex": "#F2F3F5"
+        }
       },
       "20": {
-        "$value": "#E2E4E9"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.8862745098039215, 0.8941176470588236, 0.9137254901960784
+          ],
+          "alpha": 1,
+          "hex": "#E2E4E9"
+        }
       },
       "30": {
-        "$value": "#CCCFD7"
-      },
-      "50": {
-        "$value": "#8F95A4"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0.8, 0.8117647058823529, 0.8431372549019608],
+          "alpha": 1,
+          "hex": "#CCCFD7"
+        }
       },
       "60": {
-        "$value": "#6F7687"
-      }
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.43529411764705883, 0.4627450980392157, 0.5294117647058824
+          ],
+          "alpha": 1,
+          "hex": "#6F7687"
+        }
+      },
+      "$value": "{color.neutral.30}"
     },
     "blue": {
       "10": {
-        "$value": "#EDF4FE"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9294117647058824, 0.9568627450980393, 0.996078431372549
+          ],
+          "alpha": 1,
+          "hex": "#EDF4FE"
+        }
       },
       "40": {
-        "$value": "#93BBF9"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.5764705882352941, 0.7333333333333333, 0.9764705882352941
+          ],
+          "alpha": 1,
+          "hex": "#93BBF9"
+        }
       },
       "60": {
-        "$value": "#366AF6"
-      },
-      "70": {
-        "$value": "#1F4DDB"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.21176470588235294, 0.41568627450980394, 0.9647058823529412
+          ],
+          "alpha": 1,
+          "hex": "#366AF6"
+        }
       }
     },
     "green": {
       "10": {
-        "$value": "#EEF5EE"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9333333333333333, 0.9607843137254902, 0.9333333333333333
+          ],
+          "alpha": 1,
+          "hex": "#EEF5EE"
+        }
       },
       "40": {
-        "$value": "#9BC59B"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.6078431372549019, 0.7725490196078432, 0.6078431372549019
+          ],
+          "alpha": 1,
+          "hex": "#9BC59B"
+        }
       },
       "60": {
-        "$value": "#448548"
-      },
-      "70": {
-        "$value": "#2E6B31"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.26666666666666666, 0.5215686274509804, 0.2823529411764706
+          ],
+          "alpha": 1,
+          "hex": "#448548"
+        }
       }
     },
     "red": {
       "10": {
-        "$value": "#FCF1EE"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9882352941176471, 0.9450980392156862, 0.9333333333333333
+          ],
+          "alpha": 1,
+          "hex": "#FCF1EE"
+        }
       },
       "40": {
-        "$value": "#ECA79E"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9254901960784314, 0.6549019607843137, 0.6196078431372549
+          ],
+          "alpha": 1,
+          "hex": "#ECA79E"
+        }
       },
       "60": {
-        "$value": "#CC453E"
-      },
-      "70": {
-        "$value": "#B0241D"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0.8, 0.27058823529411763, 0.24313725490196078],
+          "alpha": 1,
+          "hex": "#CC453E"
+        }
       }
     },
     "grey": {
       "10": {
-        "$value": "#F2F2F2"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9490196078431372, 0.9490196078431372, 0.9490196078431372
+          ],
+          "alpha": 1,
+          "hex": "#F2F2F2"
+        }
       },
       "40": {
-        "$value": "#B9B9B9"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.7254901960784313, 0.7254901960784313, 0.7254901960784313
+          ],
+          "alpha": 1,
+          "hex": "#B9B9B9"
+        }
       }
     },
     "lime": {
       "10": {
-        "$value": "#EDF6DD"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9294117647058824, 0.9647058823529412, 0.8666666666666667
+          ],
+          "alpha": 1,
+          "hex": "#EDF6DD"
+        }
       },
       "40": {
-        "$value": "#A5C656"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.6470588235294118, 0.7764705882352941, 0.33725490196078434
+          ],
+          "alpha": 1,
+          "hex": "#A5C656"
+        }
       }
     },
     "teal": {
       "10": {
-        "$value": "#ECF5F4"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9254901960784314, 0.9607843137254902, 0.9568627450980393
+          ],
+          "alpha": 1,
+          "hex": "#ECF5F4"
+        }
       },
       "20": {
-        "$value": "#D5E8E6"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.8352941176470589, 0.9098039215686274, 0.9019607843137255
+          ],
+          "alpha": 1,
+          "hex": "#D5E8E6"
+        }
       },
       "30": {
-        "$value": "#B4D7D4"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.7058823529411765, 0.8431372549019608, 0.8313725490196079
+          ],
+          "alpha": 1,
+          "hex": "#B4D7D4"
+        }
       },
       "40": {
-        "$value": "#92C3C0"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.5725490196078431, 0.7647058823529411, 0.7529411764705882
+          ],
+          "alpha": 1,
+          "hex": "#92C3C0"
+        }
       },
       "50": {
-        "$value": "#51A39E"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.3176470588235294, 0.6392156862745098, 0.6196078431372549
+          ],
+          "alpha": 1,
+          "hex": "#51A39E"
+        }
       },
       "60": {
-        "$value": "#3A837E"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.22745098039215686, 0.5137254901960784, 0.49411764705882355
+          ],
+          "alpha": 1,
+          "hex": "#3A837E"
+        }
       },
       "70": {
-        "$value": "#2C6764"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.17254901960784313, 0.403921568627451, 0.39215686274509803
+          ],
+          "alpha": 1,
+          "hex": "#2C6764"
+        }
       },
       "80": {
-        "$value": "#21514E"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.12941176470588237, 0.3176470588235294, 0.3058823529411765
+          ],
+          "alpha": 1,
+          "hex": "#21514E"
+        }
       },
       "90": {
-        "$value": "#143734"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.0784313725490196, 0.21568627450980393, 0.20392156862745098
+          ],
+          "alpha": 1,
+          "hex": "#143734"
+        }
       },
       "100": {
-        "$value": "#081F1F"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.03137254901960784, 0.12156862745098039, 0.12156862745098039
+          ],
+          "alpha": 1,
+          "hex": "#081F1F"
+        }
       }
     },
     "indigo": {
       "10": {
-        "$value": "#F0F2FE"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9411764705882353, 0.9490196078431372, 0.996078431372549
+          ],
+          "alpha": 1,
+          "hex": "#F0F2FE"
+        }
       },
       "40": {
-        "$value": "#ADB4F9"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.6784313725490196, 0.7058823529411765, 0.9764705882352941
+          ],
+          "alpha": 1,
+          "hex": "#ADB4F9"
+        }
       }
     },
     "purple": {
       "10": {
-        "$value": "#F3F1FE"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9529411764705882, 0.9450980392156862, 0.996078431372549
+          ],
+          "alpha": 1,
+          "hex": "#F3F1FE"
+        }
       },
       "40": {
-        "$value": "#C3ACF9"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.7647058823529411, 0.6745098039215687, 0.9764705882352941
+          ],
+          "alpha": 1,
+          "hex": "#C3ACF9"
+        }
       },
       "80": {
-        "$value": "#591ab5"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.34901960784313724, 0.10196078431372549, 0.7098039215686275
+          ],
+          "alpha": 1,
+          "hex": "#591ab5"
+        }
       }
     },
     "pink": {
       "10": {
-        "$value": "#FBEEFC"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.984313725490196, 0.9333333333333333, 0.9882352941176471
+          ],
+          "alpha": 1,
+          "hex": "#FBEEFC"
+        }
       },
       "40": {
-        "$value": "#E79DEE"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9058823529411765, 0.615686274509804, 0.9333333333333333
+          ],
+          "alpha": 1,
+          "hex": "#E79DEE"
+        }
       }
     },
     "rose": {
       "10": {
-        "$value": "#FCF0F4"
-      },
-      "40": {
-        "$value": "#EFA1BD"
-      }
-    },
-    "yellow": {
-      "10": {
-        "$value": "#FDF5AE"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9882352941176471, 0.9411764705882353, 0.9568627450980393
+          ],
+          "alpha": 1,
+          "hex": "#FCF0F4"
+        }
       },
       "40": {
-        "$value": "#E1B402"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9372549019607843, 0.6313725490196078, 0.7411764705882353
+          ],
+          "alpha": 1,
+          "hex": "#EFA1BD"
+        }
       }
     },
     "primary": {
-      "$value": "{color.cyan.80}",
       "60": {
         "$value": "{color.cyan.60}"
       },
@@ -199,113 +497,108 @@
       },
       "90": {
         "$value": "{color.cyan.90}"
-      }
+      },
+      "$value": "{color.cyan.80}"
     },
     "secondary": {
-      "$value": "{color.orange.20}",
       "10": {
         "$value": "{color.orange.10}"
       },
       "30": {
         "$value": "{color.orange.30}"
-      }
+      },
+      "$value": "{color.orange.20}"
     },
     "utility": {
       "blue": {
         "$value": "{color.blue.40}",
-        "light": {
+        "accent": {
           "$value": "{color.blue.10}"
         }
       },
       "green": {
         "$value": "{color.green.40}",
-        "light": {
+        "accent": {
           "$value": "{color.green.10}"
         }
       },
       "grey": {
         "$value": "{color.grey.40}",
-        "light": {
+        "accent": {
           "$value": "{color.grey.10}"
         }
       },
       "indigo": {
         "$value": "{color.indigo.40}",
-        "light": {
+        "accent": {
           "$value": "{color.indigo.10}"
         }
       },
       "lime": {
         "$value": "{color.lime.40}",
-        "light": {
+        "accent": {
           "$value": "{color.lime.10}"
         }
       },
       "orange": {
         "$value": "{color.orange.40}",
-        "light": {
+        "accent": {
           "$value": "{color.orange.10}"
         }
       },
       "pink": {
         "$value": "{color.pink.40}",
-        "light": {
+        "accent": {
           "$value": "{color.pink.10}"
         }
       },
       "purple": {
         "$value": "{color.purple.40}",
-        "light": {
+        "accent": {
           "$value": "{color.purple.10}"
         }
       },
       "red": {
         "$value": "{color.red.40}",
-        "light": {
+        "accent": {
           "$value": "{color.red.10}"
         }
       },
       "rose": {
         "$value": "{color.rose.40}",
-        "light": {
+        "accent": {
           "$value": "{color.rose.10}"
         }
       },
       "teal": {
         "$value": "{color.teal.40}",
-        "light": {
+        "accent": {
           "$value": "{color.teal.10}"
         }
-      },
-      "yellow": {
-        "$value": "{color.yellow.40}",
-        "light": {
-          "$value": "{color.yellow.10}"
-        }
       }
     },
     "error": {
       "$value": "{color.red.60}",
-      "light": {
-        "$value": "{color.utility.red.light}"
+      "accent": {
+        "$value": "{color.utility.red.accent}"
       }
     },
     "success": {
       "$value": "{color.green.60}",
-      "light": {
-        "$value": "{color.utility.green.light}"
+      "accent": {
+        "$value": "{color.utility.green.accent}"
       }
     },
     "warning": {
       "$value": "{color.orange.60}",
-      "light": {
-        "$value": "{color.utility.orange.light}"
+      "accent": {
+        "$value": "{color.utility.orange.accent}"
       }
     },
     "information": {
       "$value": "{color.blue.60}",
-      "light": {
-        "$value": "{color.utility.blue.light}"
+      "accent": {
+        "$value": "{color.utility.blue.accent}"
       }
     },
     "text": {
@@ -366,16 +659,16 @@
         "$value": "{color.neutral.20}"
       },
       "information": {
-        "$value": "{color.information.light}"
+        "$value": "{color.information.accent}"
       },
       "success": {
-        "$value": "{color.success.light}"
+        "$value": "{color.success.accent}"
       },
       "warning": {
-        "$value": "{color.utility.orange.light}"
+        "$value": "{color.utility.orange.accent}"
       },
       "error": {
-        "$value": "{color.utility.red.light}"
+        "$value": "{color.utility.red.accent}"
       },
       "action": {
         "$value": "{color.primary}"
@@ -391,6 +684,18 @@
       },
       "selected": {
         "$value": "{color.green.10}"
+      },
+      "container": {
+        "$value": "{color.neutral.20}"
+      },
+      "progress": {
+        "$value": "{color.primary.70}"
+      },
+      "progress-2": {
+        "$value": "{color.primary.60}"
+      },
+      "highlight": {
+        "$value": "{color.secondary.30}"
       }
     },
     "border": {
@@ -467,54 +772,208 @@
       },
       "disabled": {
         "$value": "{color.neutral}"
-      },
-      "pictograms": {
-        "pictogram-fill": {
-          "$value": {
-            "colorSpace": "oklch",
-            "components": [0.7858, 0, 0],
-            "alpha": 0.08
-          }
-        },
-        "pictogram-emphasis": {
-          "$value": {
-            "colorSpace": "oklch",
-            "components": [0.5626, 0.088, 232.11],
-            "alpha": 0.24
-          }
-        }
       }
     },
     "sequential-graph": {
-      "100": {
-        "$value": "{color.teal.100}"
+      "10": {
+        "$value": "{color.teal.10}"
       },
-      "90": {
-        "$value": "{color.teal.90}"
+      "20": {
+        "$value": "{color.teal.20}"
+      },
+      "30": {
+        "$value": "{color.teal.30}"
+      },
+      "40": {
+        "$value": "{color.teal.40}"
+      },
+      "50": {
+        "$value": "{color.teal.50}"
+      },
+      "60": {
+        "$value": "{color.teal.60}"
+      },
+      "70": {
+        "$value": "{color.teal.70}"
       },
       "80": {
         "$value": "{color.teal.80}"
       },
-      "70": {
+      "90": {
+        "$value": "{color.teal.90}"
+      },
+      "100": {
+        "$value": "{color.teal.100}"
+      }
+    },
+    "categorical-graph": {
+      "01": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.403921568627451, 0.4117647058823529, 0.8470588235294118
+          ],
+          "alpha": 1,
+          "hex": "#6769D8"
+        }
+      },
+      "02": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.2784313725490196, 0.6235294117647059, 0.7764705882352941
+          ],
+          "alpha": 1,
+          "hex": "#479FC6"
+        }
+      },
+      "03": {
         "$value": "{color.teal.70}"
       },
-      "60": {
-        "$value": "{color.teal.60}"
+      "04": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.7529411764705882, 0.28627450980392155, 0.49019607843137253
+          ],
+          "alpha": 1,
+          "hex": "#C0497D"
+        }
       },
-      "50": {
-        "$value": "{color.teal.50}"
+      "05": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.01568627450980392, 0.07058823529411765, 0.3333333333333333
+          ],
+          "alpha": 1,
+          "hex": "#041255"
+        }
       },
-      "40": {
-        "$value": "{color.teal.40}"
+      "06": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.8627450980392157, 0.4588235294117647, 0.4196078431372549
+          ],
+          "alpha": 1,
+          "hex": "#DC756B"
+        }
       },
-      "30": {
-        "$value": "{color.teal.30}"
+      "07": {
+        "$value": "{color.rose.40}"
       },
-      "20": {
-        "$value": "{color.teal.20}"
+      "08": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.596078431372549, 0.2627450980392157, 0.09803921568627451
+          ],
+          "alpha": 1,
+          "hex": "#984319"
+        }
+      },
+      "09": {
+        "$value": "{color.indigo.40}"
       },
       "10": {
-        "$value": "{color.teal.10}"
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.3784313725490196, 0.058823529411764705, 0.03137254901960784
+          ],
+          "alpha": 1,
+          "hex": "#610F08"
+        }
+      }
+    },
+    "diverging-graph": {
+      "01": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.1568627450980392, 0.09803921568627451, 0.5254901960784314
+          ],
+          "alpha": 1,
+          "hex": "#281986"
+        }
+      },
+      "02": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.23921568627450981, 0.21568627450980393, 0.6392156862745098
+          ],
+          "alpha": 1,
+          "hex": "#3D37A3"
+        }
+      },
+      "03": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.3137254901960784, 0.30980392156862746, 0.7294117647058823
+          ],
+          "alpha": 1,
+          "hex": "#504FBA"
+        }
+      },
+      "04": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.403921568627451, 0.4117647058823529, 0.8470588235294118
+          ],
+          "alpha": 1,
+          "hex": "#6769D8"
+        }
+      },
+      "05": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.5176470588235295, 0.5372549019607843, 0.9607843137254902
+          ],
+          "alpha": 1,
+          "hex": "#8489F5"
+        }
+      },
+      "06": {
+        "$value": "{color.indigo.40}"
+      },
+      "07": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.7725490196078432, 0.796078431372549, 0.984313725490196
+          ],
+          "alpha": 1,
+          "hex": "#C5CBFB"
+        }
+      },
+      "08": {
+        "$value": "{color.indigo.10}"
+      },
+      "09": {
+        "$value": "{color.teal.30}"
+      },
+      "10": {
+        "$value": "{color.teal.40}"
+      },
+      "11": {
+        "$value": "{color.teal.50}"
+      },
+      "12": {
+        "$value": "{color.teal.60}"
+      },
+      "13": {
+        "$value": "{color.teal.70}"
+      },
+      "14": {
+        "$value": "{color.teal.80}"
+      },
+      "15": {
+        "$value": "{color.teal.90}"
       }
     },
     "miscellaneous": {
@@ -537,73 +996,352 @@
     "$type": "dimension",
     "border-width": {
       "none": {
-        "$value": "0px"
+        "$value": {
+          "value": 0,
+          "unit": "px"
+        }
       },
       "sm": {
-        "$value": "1px"
+        "$value": {
+          "value": 1,
+          "unit": "px"
+        }
       },
       "md": {
-        "$value": "2px"
+        "$value": {
+          "value": 2,
+          "unit": "px"
+        }
       },
       "lg": {
-        "$value": "4px"
+        "$value": {
+          "value": 4,
+          "unit": "px"
+        }
       }
     },
     "spacing": {
+      "10": {
+        "$value": {
+          "value": 4,
+          "unit": "rem"
+        }
+      },
+      "11": {
+        "$value": {
+          "value": 5,
+          "unit": "rem"
+        }
+      },
+      "12": {
+        "$value": {
+          "value": 6,
+          "unit": "rem"
+        }
+      },
+      "13": {
+        "$value": {
+          "value": 10,
+          "unit": "rem"
+        }
+      },
       "00": {
-        "$value": "0px"
+        "$value": {
+          "value": 0,
+          "unit": "px"
+        }
       },
       "01": {
-        "$value": "0.125rem"
+        "$value": {
+          "value": 0.125,
+          "unit": "rem"
+        }
       },
       "02": {
-        "$value": "0.25rem"
+        "$value": {
+          "value": 0.25,
+          "unit": "rem"
+        }
       },
       "03": {
-        "$value": "0.5rem"
+        "$value": {
+          "value": 0.5,
+          "unit": "rem"
+        }
       },
       "04": {
-        "$value": "0.75rem"
+        "$value": {
+          "value": 0.75,
+          "unit": "rem"
+        }
       },
       "05": {
-        "$value": "1rem"
+        "$value": {
+          "value": 1,
+          "unit": "rem"
+        }
       },
       "06": {
-        "$value": "1.5rem"
+        "$value": {
+          "value": 1.5,
+          "unit": "rem"
+        }
       },
       "07": {
-        "$value": "2rem"
+        "$value": {
+          "value": 2,
+          "unit": "rem"
+        }
       },
       "08": {
-        "$value": "2.5rem"
+        "$value": {
+          "value": 2.5,
+          "unit": "rem"
+        }
       },
       "09": {
-        "$value": "3rem"
-      },
-      "10": {
-        "$value": "4rem"
-      },
-      "11": {
-        "$value": "5rem"
-      },
-      "12": {
-        "$value": "6rem"
-      },
-      "13": {
-        "$value": "10rem"
+        "$value": {
+          "value": 3,
+          "unit": "rem"
+        }
+      }
+    },
+    "0": {
+      "$value": {
+        "value": 0,
+        "unit": "px"
+      }
+    },
+    "1": {
+      "$value": {
+        "value": 0.0625,
+        "unit": "rem"
+      }
+    },
+    "2": {
+      "$value": {
+        "value": 0.125,
+        "unit": "rem"
+      }
+    },
+    "4": {
+      "$value": {
+        "value": 0.25,
+        "unit": "rem"
+      }
+    },
+    "6": {
+      "$value": {
+        "value": 0.375,
+        "unit": "rem"
+      }
+    },
+    "8": {
+      "$value": {
+        "value": 0.5,
+        "unit": "rem"
+      }
+    },
+    "10": {
+      "$value": {
+        "value": 0.625,
+        "unit": "rem"
+      }
+    },
+    "11": {
+      "$value": {
+        "value": 0.6875,
+        "unit": "rem"
+      }
+    },
+    "12": {
+      "$value": {
+        "value": 0.75,
+        "unit": "rem"
+      }
+    },
+    "14": {
+      "$value": {
+        "value": 0.875,
+        "unit": "rem"
+      }
+    },
+    "16": {
+      "$value": {
+        "value": 1,
+        "unit": "rem"
+      }
+    },
+    "18": {
+      "$value": {
+        "value": 1.125,
+        "unit": "rem"
+      }
+    },
+    "20": {
+      "$value": {
+        "value": 1.25,
+        "unit": "rem"
+      }
+    },
+    "24": {
+      "$value": {
+        "value": 1.5,
+        "unit": "rem"
+      }
+    },
+    "28": {
+      "$value": {
+        "value": 1.75,
+        "unit": "rem"
+      }
+    },
+    "32": {
+      "$value": {
+        "value": 2,
+        "unit": "rem"
+      }
+    },
+    "36": {
+      "$value": {
+        "value": 2.25,
+        "unit": "rem"
+      }
+    },
+    "40": {
+      "$value": {
+        "value": 2.5,
+        "unit": "rem"
+      }
+    },
+    "44": {
+      "$value": {
+        "value": 2.75,
+        "unit": "rem"
+      }
+    },
+    "48": {
+      "$value": {
+        "value": 3,
+        "unit": "rem"
+      }
+    },
+    "56": {
+      "$value": {
+        "value": 3.5,
+        "unit": "rem"
+      }
+    },
+    "64": {
+      "$value": {
+        "value": 4,
+        "unit": "rem"
+      }
+    },
+    "80": {
+      "$value": {
+        "value": 5,
+        "unit": "rem"
+      }
+    },
+    "96": {
+      "$value": {
+        "value": 6,
+        "unit": "rem"
+      }
+    },
+    "112": {
+      "$value": {
+        "value": 7,
+        "unit": "rem"
+      }
+    },
+    "128": {
+      "$value": {
+        "value": 8,
+        "unit": "rem"
+      }
+    },
+    "144": {
+      "$value": {
+        "value": 9,
+        "unit": "rem"
+      }
+    },
+    "160": {
+      "$value": {
+        "value": 10,
+        "unit": "rem"
+      }
+    },
+    "192": {
+      "$value": {
+        "value": 12,
+        "unit": "rem"
+      }
+    },
+    "224": {
+      "$value": {
+        "value": 14,
+        "unit": "rem"
+      }
+    },
+    "256": {
+      "$value": {
+        "value": 16,
+        "unit": "rem"
+      }
+    },
+    "288": {
+      "$value": {
+        "value": 18,
+        "unit": "rem"
+      }
+    },
+    "320": {
+      "$value": {
+        "value": 20,
+        "unit": "rem"
+      }
+    },
+    "352": {
+      "$value": {
+        "value": 22,
+        "unit": "rem"
+      }
+    },
+    "384": {
+      "$value": {
+        "value": 24,
+        "unit": "rem"
+      }
+    },
+    "416": {
+      "$value": {
+        "value": 26,
+        "unit": "rem"
       }
     }
   },
   "radius": {
     "$type": "dimension",
-    "$value": "4px",
+    "$value": {
+      "value": 4,
+      "unit": "px"
+    },
     "round": {
       "$type": "dimension",
-      "$value": "999px"
+      "$value": {
+        "value": 999,
+        "unit": "px"
+      }
     },
     "sharp": {
       "$type": "dimension",
-      "$value": "0.02rem"
+      "$value": {
+        "value": 0.02,
+        "unit": "rem"
+      }
     }
   },
   "font": {
@@ -633,58 +1371,481 @@
     "$type": "typography",
     "xs": {
       "$value": {
-        "fontSize": "0.6875rem",
+        "fontSize": {
+          "value": 0.6875,
+          "unit": "rem"
+        },
         "fontStyle": "normal",
-        "tracking": "0.005rem",
-        "lineHeight": "1rem"
+        "lineHeight": {
+          "value": 1,
+          "unit": "rem"
+        },
+        "fontFamily": ["inherit"],
+        "fontWeight": 400,
+        "letterSpacing": {
+          "value": 0.005,
+          "unit": "rem"
+        }
       }
     },
     "sm": {
       "$value": {
-        "fontSize": "0.75rem",
+        "fontSize": {
+          "value": 0.75,
+          "unit": "rem"
+        },
         "fontStyle": "normal",
-        "tracking": 0,
-        "lineHeight": "1.25rem"
+        "lineHeight": {
+          "value": 1.25,
+          "unit": "rem"
+        },
+        "fontFamily": ["inherit"],
+        "fontWeight": 400,
+        "letterSpacing": {
+          "value": 0,
+          "unit": "rem"
+        }
       }
     },
     "md": {
       "$value": {
-        "fontSize": "0.875rem",
+        "fontSize": {
+          "value": 0.875,
+          "unit": "rem"
+        },
         "fontStyle": "normal",
-        "tracking": "-0.006rem",
-        "lineHeight": "1.25rem"
+        "lineHeight": {
+          "value": 1.25,
+          "unit": "rem"
+        },
+        "fontFamily": ["inherit"],
+        "fontWeight": 400,
+        "letterSpacing": {
+          "value": -0.006,
+          "unit": "rem"
+        }
       }
     },
     "lg": {
       "$value": {
-        "fontSize": "1rem",
+        "fontSize": {
+          "value": 1,
+          "unit": "rem"
+        },
         "fontStyle": "normal",
-        "tracking": "-0.011rem",
-        "lineHeight": "1.5rem"
+        "lineHeight": {
+          "value": 1.5,
+          "unit": "rem"
+        },
+        "fontFamily": ["inherit"],
+        "fontWeight": 400,
+        "letterSpacing": {
+          "value": -0.011,
+          "unit": "rem"
+        }
       }
     },
     "xl": {
       "$value": {
-        "fontSize": "1.25rem",
+        "fontSize": {
+          "value": 1.125,
+          "unit": "rem"
+        },
         "fontStyle": "normal",
-        "tracking": "-0.017rem",
-        "lineHeight": "2rem"
+        "lineHeight": {
+          "value": 1.5,
+          "unit": "rem"
+        },
+        "fontFamily": ["inherit"],
+        "fontWeight": 400,
+        "letterSpacing": {
+          "value": -0.017,
+          "unit": "rem"
+        }
       }
     },
     "2xl": {
       "$value": {
-        "fontSize": "1.5rem",
+        "fontSize": {
+          "value": 1.5,
+          "unit": "rem"
+        },
         "fontStyle": "normal",
-        "tracking": "-0.019rem",
-        "lineHeight": "2.25rem"
+        "lineHeight": {
+          "value": 2,
+          "unit": "rem"
+        },
+        "fontFamily": ["inherit"],
+        "fontWeight": 400,
+        "letterSpacing": {
+          "value": -0.019,
+          "unit": "rem"
+        }
       }
     },
     "3xl": {
       "$value": {
-        "fontSize": "2.25rem",
+        "fontSize": {
+          "value": 2,
+          "unit": "rem"
+        },
         "fontStyle": "normal",
-        "tracking": "-0.022rem",
-        "lineHeight": "3.5rem"
+        "lineHeight": {
+          "value": 2.5,
+          "unit": "rem"
+        },
+        "fontFamily": ["inherit"],
+        "fontWeight": 400,
+        "letterSpacing": {
+          "value": -0.022,
+          "unit": "rem"
+        }
+      }
+    }
+  },
+  "shadow": {
+    "$type": "shadow",
+    "north": {
+      "$value": [
+        {
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 4, "unit": "px" },
+          "blur": { "value": 8, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.1
+          }
+        },
+        {
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 15, "unit": "px" },
+          "blur": { "value": 15, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.09
+          }
+        },
+        {
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 34, "unit": "px" },
+          "blur": { "value": 21, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.05
+          }
+        },
+        {
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 61, "unit": "px" },
+          "blur": { "value": 24, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.01
+          }
+        },
+        {
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 95, "unit": "px" },
+          "blur": { "value": 27, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0
+          }
+        }
+      ]
+    },
+    "south": {
+      "$value": [
+        {
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": -1, "unit": "px" },
+          "blur": { "value": 1, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.08
+          }
+        },
+        {
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": -2, "unit": "px" },
+          "blur": { "value": 2, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.07
+          }
+        },
+        {
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": -6, "unit": "px" },
+          "blur": { "value": 3, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.04
+          }
+        },
+        {
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": -10, "unit": "px" },
+          "blur": { "value": 4, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.01
+          }
+        },
+        {
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": -15, "unit": "px" },
+          "blur": { "value": 4, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0
+          }
+        }
+      ]
+    },
+    "east": {
+      "$value": [
+        {
+          "offsetX": { "value": -2, "unit": "px" },
+          "offsetY": { "value": 0, "unit": "px" },
+          "blur": { "value": 5, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.1
+          }
+        },
+        {
+          "offsetX": { "value": -8, "unit": "px" },
+          "offsetY": { "value": 0, "unit": "px" },
+          "blur": { "value": 8, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.09
+          }
+        },
+        {
+          "offsetX": { "value": -19, "unit": "px" },
+          "offsetY": { "value": 0, "unit": "px" },
+          "blur": { "value": 11, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.05
+          }
+        },
+        {
+          "offsetX": { "value": -34, "unit": "px" },
+          "offsetY": { "value": 0, "unit": "px" },
+          "blur": { "value": 14, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.01
+          }
+        },
+        {
+          "offsetX": { "value": -53, "unit": "px" },
+          "offsetY": { "value": 0, "unit": "px" },
+          "blur": { "value": 15, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0
+          }
+        }
+      ]
+    },
+    "west": {
+      "$value": [
+        {
+          "offsetX": { "value": 1, "unit": "px" },
+          "offsetY": { "value": 0, "unit": "px" },
+          "blur": { "value": 3, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.1
+          }
+        },
+        {
+          "offsetX": { "value": 5, "unit": "px" },
+          "offsetY": { "value": 0, "unit": "px" },
+          "blur": { "value": 5, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.09
+          }
+        },
+        {
+          "offsetX": { "value": 12, "unit": "px" },
+          "offsetY": { "value": 0, "unit": "px" },
+          "blur": { "value": 7, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.05
+          }
+        },
+        {
+          "offsetX": { "value": 21, "unit": "px" },
+          "offsetY": { "value": 0, "unit": "px" },
+          "blur": { "value": 8, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0.01
+          }
+        },
+        {
+          "offsetX": { "value": 33, "unit": "px" },
+          "offsetY": { "value": 0, "unit": "px" },
+          "blur": { "value": 9, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.07450980392156863, 0.20392156862745098, 0.27058823529411763
+            ],
+            "alpha": 0
+          }
+        }
+      ]
+    }
+  },
+  "duration": {
+    "$type": "duration",
+    "0": { "$value": { "value": 0, "unit": "ms" } },
+    "instant": { "$value": { "value": 50, "unit": "ms" } },
+    "fast": { "$value": { "value": 100, "unit": "ms" } },
+    "moderate": { "$value": { "value": 150, "unit": "ms" } },
+    "slow": { "$value": { "value": 250, "unit": "ms" } },
+    "slower": { "$value": { "value": 400, "unit": "ms" } }
+  },
+  "easing": {
+    "$type": "cubicBezier",
+    "standard": { "$value": [0.2, 0, 0.38, 0.9] },
+    "entrance": { "$value": [0, 0, 0.38, 0.9] },
+    "exit": { "$value": [0.2, 0, 1, 0.9] }
+  },
+  "transition": {
+    "$type": "transition",
+    "hover": {
+      "$value": {
+        "duration": "{duration.instant}",
+        "delay": { "value": 0, "unit": "ms" },
+        "timingFunction": "{easing.standard}"
+      }
+    },
+    "state": {
+      "$value": {
+        "duration": "{duration.fast}",
+        "delay": { "value": 0, "unit": "ms" },
+        "timingFunction": "{easing.standard}"
+      }
+    },
+    "reveal": {
+      "$value": {
+        "duration": "{duration.moderate}",
+        "delay": { "value": 0, "unit": "ms" },
+        "timingFunction": "{easing.entrance}"
+      }
+    },
+    "dismiss": {
+      "$value": {
+        "duration": "{duration.moderate}",
+        "delay": { "value": 0, "unit": "ms" },
+        "timingFunction": "{easing.exit}"
+      }
+    },
+    "overlay-in": {
+      "$value": {
+        "duration": "{duration.slow}",
+        "delay": { "value": 0, "unit": "ms" },
+        "timingFunction": "{easing.entrance}"
+      }
+    },
+    "overlay-out": {
+      "$value": {
+        "duration": "{duration.slow}",
+        "delay": { "value": 0, "unit": "ms" },
+        "timingFunction": "{easing.exit}"
+      }
+    },
+    "backdrop": {
+      "$value": {
+        "duration": "{duration.slower}",
+        "delay": { "value": 0, "unit": "ms" },
+        "timingFunction": "{easing.standard}"
       }
     }
   }