@knapsack/sandbox-tokens 4.53.1--canary.3986.c6043f8.0

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

@@ -0,0 +1,679 @@
+{
+  "$extensions": {
+    "cloud.knapsack": {
+      "global": {
+        "collectionsParentKey": "collections"
+      }
+    }
+  },
+  "border": {
+    "1": {
+      "$value": {
+        "color": "red",
+        "style": "dotted",
+        "width": "2px"
+      },
+      "$type": "border",
+      "$description": "border"
+    }
+  },
+  "breakpoint": {
+    "small": {
+      "$value": "330px",
+      "$type": "dimension"
+    },
+    "medium": {
+      "$value": "480px",
+      "$type": "dimension"
+    },
+    "large": {
+      "$value": "{radius.large}",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "xlarge": {
+      "$value": "992px",
+      "$type": "dimension"
+    },
+    "xxlarge": {
+      "$value": "1240px",
+      "$type": "dimension"
+    },
+    "xxxlarge": {
+      "$value": "1440px",
+      "$type": "dimension"
+    }
+  },
+  "media": {
+    "query": {
+      "small": {
+        "$value": "screen and (min-width: {breakpoint.small})"
+      },
+      "medium": {
+        "$value": "screen and (min-width: {breakpoint.medium})"
+      },
+      "large": {
+        "$value": "screen and (min-width: {breakpoint.large})"
+      }
+    }
+  },
+  "misc": {
+    "isAwesome": {
+      "$value": true,
+      "$type": "boolean",
+      "$description": ""
+    },
+    "magic number": {
+      "$value": 42,
+      "$type": "number"
+    },
+    "some text": {
+      "$value": "Hello world",
+      "$type": "string"
+    },
+    "isAwesome2": {
+      "$value": "{misc.isAwesome}"
+    },
+    "boolean": {
+      "$type": "boolean",
+      "$value": true,
+      "$description": ""
+    },
+    "duration": {
+      "$type": "duration",
+      "$value": "100ms",
+      "$description": ""
+    },
+    "shadow": {
+      "$type": "shadow",
+      "$description": "",
+      "$value": {
+        "color": "#000000",
+        "blur": "1px",
+        "offsetX": "1px",
+        "offsetY": "1px",
+        "spread": "1px"
+      }
+    }
+  },
+  "color": {
+    "black": {
+      "$value": "{color.neutral.800}",
+      "$description": "",
+      "$type": "color"
+    },
+    "white": {
+      "$value": "#ffffff",
+      "$type": "color",
+      "$description": ""
+    },
+    "neutral": {
+      "100": {
+        "$value": "#FAFAFB",
+        "$type": "color"
+      },
+      "200": {
+        "$value": "#F6F6F7",
+        "$type": "color"
+      },
+      "300": {
+        "$value": "#EDECEF",
+        "$type": "color"
+      },
+      "400": {
+        "$value": "#dedce2",
+        "$type": "color",
+        "$description": ""
+      },
+      "500": {
+        "$value": "#BFBDC6",
+        "$type": "color"
+      },
+      "600": {
+        "$value": "#ACAAB6",
+        "$type": "color"
+      },
+      "700": {
+        "$value": "#878496",
+        "$type": "color"
+      },
+      "800": {
+        "$value": "#191335",
+        "$type": "color"
+      },
+      "$description": "Neutral colors are used for backgrounds, borders, and text."
+    },
+    "pink": {
+      "100": {
+        "$value": "#FFDDDB",
+        "$type": "color"
+      },
+      "200": {
+        "$value": "#FCB6B8",
+        "$type": "color"
+      },
+      "300": {
+        "$value": "#FA919F",
+        "$type": "color"
+      },
+      "400": {
+        "$value": "#F37491",
+        "$type": "color"
+      },
+      "500": {
+        "$value": "#EC487D",
+        "$type": "color"
+      },
+      "600": {
+        "$value": "#CA3473",
+        "$type": "color"
+      },
+      "700": {
+        "$value": "#AA2469",
+        "$type": "color"
+      },
+      "800": {
+        "$value": "#710D55",
+        "$type": "color"
+      }
+    },
+    "purple": {
+      "100": {
+        "$value": "#E5DBFE",
+        "$type": "color"
+      },
+      "200": {
+        "$value": "#C9B8FE",
+        "$type": "color"
+      },
+      "300": {
+        "$value": "#AA94F9",
+        "$type": "color"
+      },
+      "400": {
+        "$value": "#9076F3",
+        "$type": "color"
+      },
+      "500": {
+        "$value": "#6A4CEC",
+        "$type": "color"
+      },
+      "600": {
+        "$value": "#5036CB",
+        "$type": "color"
+      },
+      "700": {
+        "$value": "#3925AA",
+        "$type": "color"
+      },
+      "800": {
+        "$value": "#190F72",
+        "$type": "color"
+      }
+    },
+    "text": {
+      "default": {
+        "$value": "{color.neutral.800}"
+      },
+      "disabled": {
+        "$value": "{color.neutral.400}"
+      },
+      "muted": {
+        "$value": "{color.neutral.600}"
+      },
+      "white": {
+        "$value": "{color.white}"
+      }
+    }
+  },
+  "cypress": {
+    "large": {
+      "$value": "1.5rem",
+      "$type": "dimension"
+    },
+    "medium": {
+      "$value": "1rem",
+      "$type": "dimension"
+    },
+    "small": {
+      "$value": "0.5rem",
+      "$type": "dimension"
+    }
+  },
+  "emptyGroup": {},
+  "radius": {
+    "small": {
+      "$value": "4px",
+      "$type": "dimension"
+    },
+    "medium": {
+      "$value": "8px",
+      "$type": "dimension"
+    },
+    "large": {
+      "$value": "{cypress.large}",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "round": {
+      "$value": "160px",
+      "$type": "dimension"
+    }
+  },
+  "shadow": {
+    "1": {
+      "$description": "Cards",
+      "$value": {
+        "color": "#000000",
+        "blur": "10px",
+        "spread": "0px",
+        "offsetX": "0px",
+        "offsetY": "5px"
+      },
+      "$type": "shadow"
+    },
+    "2": {
+      "$description": "floating action",
+      "$value": {
+        "color": "#000000",
+        "blur": "20px",
+        "spread": "0px",
+        "offsetX": "0px",
+        "offsetY": "10px"
+      }
+    },
+    "3": {
+      "$description": "Popovers, dropdowns, etc",
+      "$value": {
+        "color": "#000000",
+        "blur": "25px",
+        "spread": "0px",
+        "offsetX": "0px",
+        "offsetY": "15px"
+      },
+      "$type": "shadow"
+    },
+    "4": {
+      "$value": {
+        "color": "#000000",
+        "blur": "40px",
+        "spread": "0px",
+        "offsetX": "0px",
+        "offsetY": "20px"
+      }
+    },
+    "color": {
+      "$value": "#000000",
+      "$type": "color"
+    },
+    "$type": "shadow"
+  },
+  "spacing scale": {
+    "1": {
+      "$value": "2px"
+    },
+    "2": {
+      "$value": "4px"
+    },
+    "3": {
+      "$value": "8px"
+    },
+    "4": {
+      "$value": "12px"
+    },
+    "5": {
+      "$value": "16px"
+    },
+    "6": {
+      "$value": "24px"
+    },
+    "7": {
+      "$value": "32px"
+    },
+    "8": {
+      "$value": "40px"
+    },
+    "9": {
+      "$value": "48px"
+    },
+    "10": {
+      "$value": "64px"
+    },
+    "11": {
+      "$value": "80px"
+    },
+    "12": {
+      "$value": "96px"
+    },
+    "13": {
+      "$value": "160px"
+    },
+    "$type": "dimension"
+  },
+  "ungrouped-token": {
+    "$value": "Im Not Part of Any Group",
+    "$type": "string"
+  },
+  "transition": {
+    "a": {
+      "$type": "transition",
+      "$description": "",
+      "$value": {
+        "delay": "100ms",
+        "duration": "250ms",
+        "timingFunction": [0, 0, 1, 1]
+      }
+    },
+    "b": {
+      "$type": "transition",
+      "$description": "",
+      "$value": {
+        "delay": "10ms",
+        "duration": "500ms",
+        "timingFunction": [0.1, 1, 0.3, 1]
+      }
+    }
+  },
+  "collections": {
+    "brands": {
+      "$extensions": {
+        "cloud.knapsack": {
+          "group": {
+            "collectionInfo": {
+              "type": "collection",
+              "modes": [
+                {
+                  "id": "brandALight"
+                },
+                {
+                  "id": "brandADark"
+                },
+                {
+                  "id": "brandBLight"
+                },
+                {
+                  "id": "brandBDark"
+                }
+              ]
+            }
+          }
+        }
+      },
+      "foo": {
+        "bar": {
+          "$type": "dimension",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          },
+          "brandALight": {
+            "$value": "1px"
+          },
+          "brandADark": {
+            "$value": "1px"
+          },
+          "brandBLight": {
+            "$value": "1px"
+          },
+          "brandBDark": {
+            "$value": "1px"
+          }
+        }
+      },
+      "color": {
+        "$type": "color",
+        "primary": {
+          "$description": "The main, consistent color used in all graphics, publications, signage, etc. ",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          },
+          "brandALight": {
+            "$value": "#3ed93f"
+          },
+          "brandADark": {
+            "$value": "#0a13f7"
+          },
+          "brandBLight": {
+            "$value": "{color.pink.400}"
+          },
+          "brandBDark": {
+            "$value": "{color.pink.800}"
+          }
+        },
+        "secondary": {
+          "$type": "color",
+          "$description": "Complimentary color to the primary brand color",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          },
+          "brandALight": {
+            "$value": "{color.pink.500}"
+          },
+          "brandBLight": {
+            "$value": "{color.purple.500}"
+          },
+          "brandADark": {
+            "$value": "{color.pink.500}"
+          },
+          "brandBDark": {
+            "$value": "{color.purple.500}"
+          }
+        },
+        "color": {
+          "$type": "color",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          },
+          "brandALight": {
+            "$value": "#000000"
+          },
+          "brandADark": {
+            "$value": "#000000"
+          },
+          "brandBLight": {
+            "$value": "#000000"
+          },
+          "brandBDark": {
+            "$value": "#000000"
+          }
+        },
+        "color 1": {
+          "$type": "color",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          },
+          "brandALight": {
+            "$value": "#000000"
+          },
+          "brandADark": {
+            "$value": "#000000"
+          },
+          "brandBLight": {
+            "$value": "#000000"
+          },
+          "brandBDark": {
+            "$value": "#000000"
+          }
+        },
+        "fontWeight": {
+          "$type": "fontWeight",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          }
+        }
+      },
+      "test": {
+        "$type": "dimension",
+        "primary": {
+          "$description": "The main, consistent color used in all graphics, publications, signage, etc. ",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          },
+          "brandALight": {
+            "$value": "{spacing scale.8}"
+          },
+          "brandADark": {
+            "$value": "{collections.density.spacing.small.compact}"
+          }
+        },
+        "secondary": {
+          "$type": "color",
+          "$description": "Complimentary color to the primary brand color",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          },
+          "brandALight": {
+            "$value": "#cc2020"
+          },
+          "brandBLight": {
+            "$value": "{color.neutral.300}"
+          },
+          "brandBDark": {
+            "$value": "{color.neutral.600}"
+          },
+          "brandADark": {
+            "$value": "#cc2020"
+          }
+        },
+        "dimension": {
+          "$type": "dimension",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          },
+          "brandALight": {
+            "$value": "2px",
+            "$type": "dimension"
+          }
+        }
+      }
+    },
+    "density": {
+      "$extensions": {
+        "cloud.knapsack": {
+          "group": {
+            "collectionInfo": {
+              "type": "collection",
+              "modes": [
+                {
+                  "id": "comfortable"
+                },
+                {
+                  "id": "compact"
+                }
+              ]
+            }
+          }
+        }
+      },
+      "spacing": {
+        "large": {
+          "$type": "dimension",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          },
+          "comfortable": {
+            "$value": "{spacing scale.8}"
+          },
+          "compact": {
+            "$value": "{spacing scale.5}"
+          }
+        },
+        "medium": {
+          "$type": "dimension",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          },
+          "comfortable": {
+            "$value": "{spacing scale.6}"
+          },
+          "compact": {
+            "$value": "{spacing scale.5}"
+          }
+        },
+        "small": {
+          "$type": "dimension",
+          "$extensions": {
+            "cloud.knapsack": {
+              "group": {
+                "collectionInfo": {
+                  "type": "var"
+                }
+              }
+            }
+          },
+          "comfortable": {
+            "$value": "{spacing scale.3}"
+          },
+          "compact": {
+            "$value": "{spacing scale.2}"
+          }
+        }
+      }
+    }
+  }
+}

package/knapsack.config.cjs

@@ -0,0 +1,30 @@
+const { configureKnapsack } = require('@knapsack/app');
+const { join } = require('node:path');
+const { version } = require('./package.json');
+
+const tempDir = join(__dirname, './.temp');
+
+module.exports = configureKnapsack({
+  // these are required for knapsack to work, but we don't need them, so we just set it to the temp directory with is gitignored
+  data: tempDir,
+  public: tempDir,
+  version,
+  dist: join(__dirname, './dist'),
+  templateRenderers: [],
+  designTokens: {
+    distDir: join(__dirname, './dist'),
+    srcFilePath: join(__dirname, './src/knapsack.design-tokens.json'),
+    targets: {
+      android: {
+        enabled: true,
+        filterTokens: (token) => {
+          // just an example of how to filter tokens
+          return token.id.startsWith('breakpoint');
+        },
+      },
+      ios: { enabled: false },
+      css: { enabled: true },
+      js: { enabled: true },
+    },
+  },
+});