@knapsack/sandbox-tokens 4.54.6--canary.4077.4d2b71a.0 → 4.54.6--canary.4093.b8af7d7.0

package/dist/design-tokens.w3c-spec.json

@@ -375,7 +375,7 @@
     }
   },
   "collections": {
-    "brands": {
+    "density": {
       "$extensions": {
         "cloud.knapsack": {
           "group": {
@@ -383,24 +383,18 @@
               "type": "collection",
               "modes": [
                 {
-                  "id": "brandALight"
-                },
-                {
-                  "id": "brandADark"
-                },
-                {
-                  "id": "brandBLight"
+                  "id": "cozy"
                 },
                 {
-                  "id": "brandBDark"
+                  "id": "compact"
                 }
               ]
             }
           }
         }
       },
-      "foo": {
-        "bar": {
+      "spacing": {
+        "large": {
           "$type": "dimension",
           "$extensions": {
             "cloud.knapsack": {
@@ -411,24 +405,33 @@
               }
             }
           },
-          "brandALight": {
-            "$value": "1px"
+          "compact": {
+            "$value": "{spacing scale.4}"
           },
-          "brandADark": {
-            "$value": "1px"
+          "cozy": {
+            "$value": "{spacing scale.5}"
+          }
+        },
+        "medium": {
+          "$type": "dimension",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
           },
-          "brandBLight": {
-            "$value": "1px"
+          "compact": {
+            "$value": "{spacing scale.3}"
           },
-          "brandBDark": {
-            "$value": "1px"
+          "cozy": {
+            "$value": "{spacing scale.4}"
           }
-        }
-      },
-      "color": {
-        "$type": "color",
-        "primary": {
-          "$description": "The main, consistent color used in all graphics, publications, signage, etc. ",
+        },
+        "small": {
+          "$type": "dimension",
           "$extensions": {
             "cloud.knapsack": {
               "group": {
@@ -438,22 +441,114 @@
               }
             }
           },
-          "brandALight": {
-            "$value": "#3ed93f"
+          "compact": {
+            "$value": "{spacing scale.2}"
           },
-          "brandADark": {
-            "$value": "#0a13f7"
+          "cozy": {
+            "$value": "{spacing scale.3}"
+          }
+        },
+        "xsmall": {
+          "compact": {
+            "$value": "{spacing scale.1}"
           },
-          "brandBLight": {
-            "$value": "{color.pink.400}"
+          "$type": "dimension",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
           },
-          "brandBDark": {
-            "$value": "{color.pink.800}"
+          "cozy": {
+            "$value": "{spacing scale.2}"
           }
         },
-        "secondary": {
+        "xlarge": {
+          "compact": {
+            "$value": "{spacing scale.5}"
+          },
+          "$type": "dimension",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          },
+          "cozy": {
+            "$value": "{spacing scale.6}"
+          }
+        },
+        "xxlarge": {
+          "compact": {
+            "$value": "{spacing scale.7}"
+          },
+          "$type": "dimension",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          },
+          "cozy": {
+            "$value": "{spacing scale.8}"
+          }
+        },
+        "xxxlarge": {
+          "compact": {
+            "$value": "{spacing scale.8}"
+          },
+          "$type": "dimension",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          },
+          "cozy": {
+            "$value": "{spacing scale.10}"
+          }
+        }
+      }
+    },
+    "theme": {
+      "$extensions": {
+        "cloud.knapsack": {
+          "group": {
+            "collectionInfo": {
+              "type": "collection",
+              "modes": [
+                {
+                  "id": "light"
+                },
+                {
+                  "id": "dark"
+                }
+              ]
+            }
+          }
+        }
+      },
+      "action": {
+        "base": {
+          "dark": {
+            "$value": "{sandbox.color.brand}"
+          },
+          "light": {
+            "$value": "{sandbox.color.brand}"
+          },
           "$type": "color",
-          "$description": "Complimentary color to the primary brand color",
           "$extensions": {
             "cloud.knapsack": {
               "group": {
@@ -462,21 +557,53 @@
                 }
               }
             }
+          }
+        },
+        "text": {
+          "dark": {
+            "$value": "{sandbox.color.white}"
           },
-          "brandALight": {
-            "$value": "{color.pink.500}"
+          "light": {
+            "$value": "{sandbox.color.white}"
           },
-          "brandBLight": {
-            "$value": "{color.purple.500}"
+          "$type": "color",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          }
+        }
+      },
+      "background": {
+        "content": {
+          "dark": {
+            "$value": "#3B3644"
           },
-          "brandADark": {
-            "$value": "{color.pink.500}"
+          "light": {
+            "$value": "#FFFFFF"
           },
-          "brandBDark": {
-            "$value": "{color.purple.500}"
+          "$type": "color",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
           }
         },
-        "color": {
+        "page": {
+          "dark": {
+            "$value": "#1F1C25"
+          },
+          "light": {
+            "$value": "#FDFCFE"
+          },
           "$type": "color",
           "$extensions": {
             "cloud.knapsack": {
@@ -486,21 +613,63 @@
                 }
               }
             }
+          }
+        }
+      },
+      "text": {
+        "base": {
+          "dark": {
+            "$value": "#F6F8FF"
           },
-          "brandALight": {
-            "$value": "#000000"
+          "light": {
+            "$value": "#191F2C"
           },
+          "$type": "color",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          }
+        },
+        "subtle": {
+          "dark": {
+            "$value": "#BEC3D3"
+          },
+          "light": {
+            "$value": "#6E7A82"
+          },
+          "$type": "color",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "testing": {
+      "color": {
+        "color": {
           "brandADark": {
             "$value": "#000000"
           },
-          "brandBLight": {
+          "brandALight": {
             "$value": "#000000"
           },
           "brandBDark": {
             "$value": "#000000"
-          }
-        },
-        "color 1": {
+          },
+          "brandBLight": {
+            "$value": "#000000"
+          },
           "$type": "color",
           "$extensions": {
             "cloud.knapsack": {
@@ -510,22 +679,22 @@
                 }
               }
             }
+          }
+        },
+        "color 1": {
+          "brandADark": {
+            "$value": "#000000"
           },
           "brandALight": {
             "$value": "#000000"
           },
-          "brandADark": {
+          "brandBDark": {
             "$value": "#000000"
           },
           "brandBLight": {
             "$value": "#000000"
           },
-          "brandBDark": {
-            "$value": "#000000"
-          }
-        },
-        "fontWeight": {
-          "$type": "fontWeight",
+          "$type": "color",
           "$extensions": {
             "cloud.knapsack": {
               "group": {
@@ -534,25 +703,22 @@
                 }
               }
             }
+          }
+        },
+        "fontWeight": {
+          "brandADark": {
+            "$value": 400
           },
           "brandALight": {
             "$value": 400
           },
-          "brandADark": {
+          "brandBDark": {
             "$value": 400
           },
           "brandBLight": {
             "$value": 400
           },
-          "brandBDark": {
-            "$value": 400
-          }
-        }
-      },
-      "test": {
-        "$type": "dimension",
-        "primary": {
-          "$description": "The main, consistent color used in all graphics, publications, signage, etc. ",
+          "$type": "fontWeight",
           "$extensions": {
             "cloud.knapsack": {
               "group": {
@@ -561,23 +727,47 @@
                 }
               }
             }
+          }
+        },
+        "primary": {
+          "brandADark": {
+            "$value": "#0a13f7"
           },
           "brandALight": {
-            "$value": "{spacing scale.8}"
+            "$value": "#3ed93f"
           },
-          "brandADark": {
-            "$value": "{collections.density.spacing.small.compact}"
+          "brandBDark": {
+            "$value": "{color.pink.800}"
           },
           "brandBLight": {
-            "$value": "{collections.density.spacing.small.compact}"
+            "$value": "{color.pink.400}"
           },
-          "brandBDark": {
-            "$value": "{collections.density.spacing.small.compact}"
+          "$description": "The main, consistent color used in all graphics, publications, signage, etc. ",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
           }
         },
         "secondary": {
-          "$type": "color",
+          "brandADark": {
+            "$value": "{color.pink.500}"
+          },
+          "brandALight": {
+            "$value": "{color.pink.500}"
+          },
+          "brandBDark": {
+            "$value": "{color.purple.500}"
+          },
+          "brandBLight": {
+            "$value": "{color.purple.500}"
+          },
           "$description": "Complimentary color to the primary brand color",
+          "$type": "color",
           "$extensions": {
             "cloud.knapsack": {
               "group": {
@@ -586,21 +776,24 @@
                 }
               }
             }
+          }
+        },
+        "$type": "color"
+      },
+      "foo": {
+        "bar": {
+          "brandADark": {
+            "$value": "1px"
           },
           "brandALight": {
-            "$value": "#cc2020"
-          },
-          "brandBLight": {
-            "$value": "{color.neutral.300}"
+            "$value": "1px"
           },
           "brandBDark": {
-            "$value": "{color.neutral.600}"
+            "$value": "1px"
+          },
+          "brandBLight": {
+            "$value": "1px"
           },
-          "brandADark": {
-            "$value": "#cc2020"
-          }
-        },
-        "dimension": {
           "$type": "dimension",
           "$extensions": {
             "cloud.knapsack": {
@@ -610,42 +803,23 @@
                 }
               }
             }
+          }
+        }
+      },
+      "test": {
+        "dimension": {
+          "brandADark": {
+            "$value": "2px"
           },
           "brandALight": {
             "$value": "2px"
           },
-          "brandADark": {
+          "brandBDark": {
             "$value": "2px"
           },
           "brandBLight": {
             "$value": "2px"
           },
-          "brandBDark": {
-            "$value": "2px"
-          }
-        }
-      }
-    },
-    "density": {
-      "$extensions": {
-        "cloud.knapsack": {
-          "group": {
-            "collectionInfo": {
-              "type": "collection",
-              "modes": [
-                {
-                  "id": "comfortable"
-                },
-                {
-                  "id": "compact"
-                }
-              ]
-            }
-          }
-        }
-      },
-      "spacing": {
-        "large": {
           "$type": "dimension",
           "$extensions": {
             "cloud.knapsack": {
@@ -655,16 +829,22 @@
                 }
               }
             }
+          }
+        },
+        "primary": {
+          "brandADark": {
+            "$value": "{collections.density.spacing.small.compact}"
           },
-          "comfortable": {
+          "brandALight": {
             "$value": "{spacing scale.8}"
           },
-          "compact": {
-            "$value": "{spacing scale.5}"
-          }
-        },
-        "medium": {
-          "$type": "dimension",
+          "brandBDark": {
+            "$value": "{collections.density.spacing.small.compact}"
+          },
+          "brandBLight": {
+            "$value": "{collections.density.spacing.small.compact}"
+          },
+          "$description": "The main, consistent color used in all graphics, publications, signage, etc. ",
           "$extensions": {
             "cloud.knapsack": {
               "group": {
@@ -673,16 +853,23 @@
                 }
               }
             }
-          },
-          "comfortable": {
-            "$value": "{spacing scale.6}"
-          },
-          "compact": {
-            "$value": "{spacing scale.5}"
           }
         },
-        "small": {
-          "$type": "dimension",
+        "secondary": {
+          "brandADark": {
+            "$value": "#cc2020"
+          },
+          "brandALight": {
+            "$value": "#cc2020"
+          },
+          "brandBDark": {
+            "$value": "{color.neutral.600}"
+          },
+          "brandBLight": {
+            "$value": "{color.neutral.300}"
+          },
+          "$description": "Complimentary color to the primary brand color",
+          "$type": "color",
           "$extensions": {
             "cloud.knapsack": {
               "group": {
@@ -691,15 +878,91 @@
                 }
               }
             }
-          },
-          "comfortable": {
-            "$value": "{spacing scale.3}"
-          },
-          "compact": {
-            "$value": "{spacing scale.2}"
+          }
+        },
+        "$type": "dimension"
+      },
+      "$extensions": {
+        "cloud.knapsack": {
+          "group": {
+            "collectionInfo": {
+              "type": "collection",
+              "modes": [
+                {
+                  "id": "brandALight"
+                },
+                {
+                  "id": "brandADark"
+                },
+                {
+                  "id": "brandBLight"
+                },
+                {
+                  "id": "brandBDark"
+                }
+              ]
+            }
           }
         }
       }
     }
+  },
+  "sandbox": {
+    "color": {
+      "brand": {
+        "$value": "#7A34ED",
+        "$type": "color"
+      },
+      "success": {
+        "$value": "#6BC313",
+        "$type": "color"
+      },
+      "warning": {
+        "$value": "#FAB120",
+        "$type": "color"
+      },
+      "error": {
+        "$value": "#FF5C46",
+        "$type": "color"
+      },
+      "white": {
+        "$value": "#ffffff",
+        "$type": "color"
+      }
+    },
+    "radius": {
+      "xsmall": {
+        "$value": "2px",
+        "$type": "dimension"
+      },
+      "$type": "dimension",
+      "small": {
+        "$value": "4px",
+        "$type": "dimension"
+      },
+      "medium": {
+        "$value": "8px",
+        "$type": "dimension"
+      },
+      "large": {
+        "$value": "16px",
+        "$type": "dimension"
+      },
+      "xlarge": {
+        "$value": "32px",
+        "$type": "dimension"
+      }
+    },
+    "width": {
+      "$type": "dimension",
+      "wide": {
+        "$value": "1080px",
+        "$type": "dimension"
+      },
+      "narrow": {
+        "$value": "640px",
+        "$type": "dimension"
+      }
+    }
   }
 }