@openkfw/design-tokens 1.0.2 → 1.0.4

package/tokens/tokens.json

@@ -1,506 +0,0 @@
-{
-  "base": {
-    "color": {
-      "$type": "color",
-      "blue": {
-        "100": { "$value": { "colorSpace": "srgb", "components": [0.9137, 0.9608, 0.9843], "hex": "#e9f5fb" } },
-        "400": { "$value": { "colorSpace": "srgb", "components": [0.3294, 0.7039, 0.8863], "hex": "#54b3e2" } },
-        "500": { "$value": { "colorSpace": "srgb", "components": [0, 0.4784, 0.7373], "hex": "#007abc" } },
-        "600": { "$value": { "colorSpace": "srgb", "components": [0, 0.3529, 0.549], "hex": "#005a8c" } },
-        "700": { "$value": { "colorSpace": "srgb", "components": [0, 0.2667, 0.4314], "hex": "#00446e" } },
-        "800": { "$value": { "colorSpace": "srgb", "components": [0, 0.2157, 0.3588], "hex": "#00375b" } }
-      },
-      "green": {
-        "100": { "$value": { "colorSpace": "srgb", "components": [0.9255, 0.9922, 0.9294], "hex": "#ecfded" } },
-        "300": { "$value": { "colorSpace": "srgb", "components": [0.7176, 0.9765, 0.6667], "hex": "#b7f9aa" } },
-        "400": { "$value": { "colorSpace": "srgb", "components": [0.5804, 0.9216, 0.5647], "hex": "#94eb90" } },
-        "700": { "$value": { "colorSpace": "srgb", "components": [0.2235, 0.5137, 0.3412], "hex": "#398357" } }
-      },
-      "white": {
-        "default": { "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "hex": "#ffffff" } },
-        "90": { "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "hex": "#ffffff", "alpha": 0.9 } },
-        "95": { "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "hex": "#ffffff", "alpha": 0.95 } }
-      },
-      "gray": {
-        "50": { "$value": { "colorSpace": "srgb", "components": [0.9647, 0.9686, 0.9725], "hex": "#f6f7f8" } },
-        "100": { "$value": { "colorSpace": "srgb", "components": [0.9333, 0.9412, 0.949], "hex": "#eef0f2" } },
-        "200": { "$value": { "colorSpace": "srgb", "components": [0.8471, 0.8755, 0.8902], "hex": "#d8dfe3" } },
-        "300": { "$value": { "colorSpace": "srgb", "components": [0.6314, 0.6784, 0.7098], "hex": "#a1adb5" } },
-        "400": { "$value": { "colorSpace": "srgb", "components": [0.4275, 0.4627, 0.4902], "hex": "#6d767d" } },
-        "500": {
-          "default": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2824, 0.298], "hex": "#41484c" } },
-          "10": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2824, 0.298], "hex": "#41484c", "alpha": 0.1 } },
-          "30": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2824, 0.298], "hex": "#41484c", "alpha": 0.3 } },
-          "90": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2824, 0.298], "hex": "#41484c", "alpha": 0.9 } }
-        },
-        "600": { "$value": { "colorSpace": "srgb", "components": [0.1765, 0.1922, 0.2039], "hex": "#2d3134" } }
-      },
-      "violet": {
-        "400": { "$value": { "colorSpace": "srgb", "components": [0.6431, 0.3333, 0.7725], "hex": "#a455c5" } },
-        "500": { "$value": { "colorSpace": "srgb", "components": [0.3921, 0.1921, 0.4745], "hex": "#643179" } }
-      },
-      "red": {
-        "400": { "$value": { "colorSpace": "srgb", "components": [0.7843, 0.0196, 0.2196], "hex": "#c80538" } }
-      },
-      "yellow": {
-        "500": { "$value": { "colorSpace": "srgb", "components": [0.9176, 0.7843, 0.0431], "hex": "#eac80b" } }
-      }
-    },
-    "fontfamily": {
-      "$type": "fontFamily",
-      "sans": {
-        "$value": "\"KfW Centro Sans\", Arial, \"Helvetica Neue\", Helvetica, sans-serif"
-      },
-      "mono": {
-        "$value": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
-      }
-    },
-    "space": {
-      "$type": "dimension",
-      "static": {
-        "5": { "$value": { "unit": "px", "value": 5 } },
-        "10": { "$value": { "unit": "px", "value": 10 } },
-        "15": { "$value": { "unit": "px", "value": 15 } },
-        "20": { "$value": { "unit": "px", "value": 20 } },
-        "25": { "$value": { "unit": "px", "value": 25 } },
-        "30": { "$value": { "unit": "px", "value": 30 } },
-        "35": { "$value": { "unit": "px", "value": 35 } },
-        "40": { "$value": { "unit": "px", "value": 40 } },
-        "48": { "$value": { "unit": "px", "value": 48 } },
-        "50": { "$value": { "unit": "px", "value": 50 } },
-        "60": { "$value": { "unit": "px", "value": 60 } }
-      },
-      "fluid": {
-        "5": {
-          "min": { "$value": "{base.space.static.5}" },
-          "max": { "$value": "{base.space.static.10}" },
-          "val": { "$value": { "value": 0.588, "unit": "px" }, "$fluid": { "unit": "vi", "value": 0.735 } }
-        },
-        "10": {
-          "min": { "$value": "{base.space.static.10}" },
-          "max": { "$value": "{base.space.static.15}" },
-          "val": { "$value": { "value": 5.588, "unit": "px" }, "$fluid": { "unit": "vi", "value": 0.735 } }
-        },
-        "15": {
-          "min": { "$value": "{base.space.static.15}" },
-          "max": { "$value": "{base.space.static.20}" },
-          "val": { "$value": { "value": 10.588, "unit": "px" }, "$fluid": { "unit": "vi", "value": 0.735 } }
-        },
-        "20": {
-          "min": { "$value": "{base.space.static.20}" },
-          "max": { "$value": "{base.space.static.25}" },
-          "val": { "$value": { "value": 15.588, "unit": "px" }, "$fluid": { "unit": "vi", "value": 0.735 } }
-        },
-        "25": {
-          "min": { "$value": "{base.space.static.25}" },
-          "max": { "$value": "{base.space.static.30}" },
-          "val": { "$value": { "value": 20.588, "unit": "px" }, "$fluid": { "unit": "vi", "value": 0.735 } }
-        },
-        "30": {
-          "min": { "$value": "{base.space.static.30}" },
-          "max": { "$value": "{base.space.static.35}" },
-          "val": { "$value": { "value": 25.588, "unit": "px" }, "$fluid": { "unit": "vi", "value": 0.735 } }
-        },
-        "35": {
-          "min": { "$value": "{base.space.static.35}" },
-          "max": { "$value": "{base.space.static.40}" },
-          "val": { "$value": { "value": 30.588, "unit": "px" }, "$fluid": { "unit": "vi", "value": 0.735 } }
-        },
-        "40": {
-          "min": { "$value": "{base.space.static.40}" },
-          "max": { "$value": "{base.space.static.50}" },
-          "val": { "$value": { "value": 31.176, "unit": "px" }, "$fluid": { "unit": "vi", "value": 1.471 } }
-        },
-        "40-48": {
-          "min": { "$value": "{base.space.static.40}" },
-          "max": { "$value": "{base.space.static.48}" },
-          "val": { "$value": { "value": 32.941, "unit": "px" }, "$fluid": { "unit": "vi", "value": 1.471 } }
-        },
-        "50": {
-          "min": { "$value": "{base.space.static.50}" },
-          "max": { "$value": "{base.space.static.60}" },
-          "val": { "$value": { "value": 41.176, "unit": "px" }, "$fluid": { "unit": "vi", "value": 1.471 } }
-        }
-      }
-    },
-    "fontsize": {
-      "$type": "dimension",
-      "static": {
-        "sm": { "$value": { "unit": "px", "value": 14 } },
-        "md": { "$value": { "unit": "px", "value": 16 } },
-        "lg": { "$value": { "unit": "px", "value": 18 } },
-        "xl": { "$value": { "unit": "px", "value": 20 } },
-        "2xl": { "$value": { "unit": "px", "value": 22 } },
-        "3xl": { "$value": { "unit": "px", "value": 24 } },
-        "4xl": { "$value": { "unit": "px", "value": 25 } },
-        "5xl": { "$value": { "unit": "px", "value": 26 } },
-        "6xl": { "$value": { "unit": "px", "value": 28 } },
-        "7xl": { "$value": { "unit": "px", "value": 30 } },
-        "8xl": { "$value": { "unit": "px", "value": 32 } },
-        "9xl": { "$value": { "unit": "px", "value": 36 } }
-      },
-      "fluid": {
-        "sm": {
-          "min": { "$value": "{base.fontsize.static.sm}" },
-          "max": { "$value": "{base.fontsize.static.md}" },
-          "val": { "$value": { "unit": "px", "value": 12.235 }, "$fluid": { "unit": "vi", "value": 0.294 } }
-        },
-        "md": {
-          "min": { "$value": "{base.fontsize.static.md}" },
-          "max": { "$value": "{base.fontsize.static.lg}" },
-          "val": { "$value": { "unit": "px", "value": 14.235 }, "$fluid": { "unit": "vi", "value": 0.294 } }
-        },
-        "lg": {
-          "min": { "$value": "{base.fontsize.static.lg}" },
-          "max": { "$value": "{base.fontsize.static.xl}" },
-          "val": { "$value": { "unit": "px", "value": 16.235 }, "$fluid": { "unit": "vi", "value": 0.294 } }
-        },
-        "xl": {
-          "min": { "$value": "{base.fontsize.static.xl}" },
-          "max": { "$value": "{base.fontsize.static.2xl}" },
-          "val": { "$value": { "unit": "px", "value": 18.235 }, "$fluid": { "unit": "vi", "value": 0.294 } }
-        },
-        "xl-3xl": {
-          "min": { "$value": "{base.fontsize.static.xl}" },
-          "max": { "$value": "{base.fontsize.static.3xl}" },
-          "val": { "$value": { "unit": "px", "value": 16.471 }, "$fluid": { "unit": "vi", "value": 0.588 } }
-        },
-        "2xl": {
-          "min": { "$value": "{base.fontsize.static.2xl}" },
-          "max": { "$value": "{base.fontsize.static.3xl}" },
-          "val": { "$value": { "unit": "px", "value": 20.235 }, "$fluid": { "unit": "vi", "value": 0.294 } }
-        },
-        "3xl": {
-          "min": { "$value": "{base.fontsize.static.3xl}" },
-          "max": { "$value": "{base.fontsize.static.5xl}" },
-          "val": { "$value": { "unit": "px", "value": 22.235 }, "$fluid": { "unit": "vi", "value": 0.294 } }
-        },
-        "4xl": {
-          "min": { "$value": "{base.fontsize.static.4xl}" },
-          "max": { "$value": "{base.fontsize.static.7xl}" },
-          "val": { "$value": { "unit": "px", "value": 20.588 }, "$fluid": { "unit": "vi", "value": 0.735 } }
-        },
-        "5xl": {
-          "min": { "$value": "{base.fontsize.static.5xl}" },
-          "max": { "$value": "{base.fontsize.static.7xl}" },
-          "val": { "$value": { "unit": "px", "value": 22.471 }, "$fluid": { "unit": "vi", "value": 0.588 } }
-        },
-        "6xl": {
-          "min": { "$value": "{base.fontsize.static.6xl}" },
-          "max": { "$value": "{base.fontsize.static.8xl}" },
-          "val": { "$value": { "unit": "px", "value": 24.471 }, "$fluid": { "unit": "vi", "value": 0.588 } }
-        },
-        "7xl": {
-          "min": { "$value": "{base.fontsize.static.7xl}" },
-          "max": { "$value": "{base.fontsize.static.9xl}" },
-          "val": { "$value": { "unit": "px", "value": 24.706 }, "$fluid": { "unit": "vi", "value": 0.882 } }
-        }
-      }
-    },
-    "lineheight": {
-      "2xs": { "$value": 1.2, "$type": "number" },
-      "xs": { "$value": 1.3, "$type": "number" },
-      "sm": { "$value": 1.333, "$type": "number" },
-      "md": { "$value": 1.4, "$type": "number" },
-      "lg": { "$value": 1.45, "$type": "number" },
-      "xl": { "$value": 1.5, "$type": "number" }
-    },
-    "borderradius": {
-      "$type": "dimension",
-      "sm": { "$value": { "unit": "px", "value": 2 } },
-      "md": { "$value": { "unit": "px", "value": 4 } },
-      "lg": { "$value": { "unit": "px", "value": 20 } },
-      "circle": { "$value": { "unit": "px", "value": 9999 } }
-    },
-    "borderwidth": {
-      "$type": "dimension",
-      "md": { "$value": { "unit": "px", "value": 1 } },
-      "lg": { "$value": { "unit": "px", "value": 2 } }
-    },
-    "fontweight": {
-      "$type": "fontWeight",
-      "regular": { "$value": 400 },
-      "medium": { "$value": 500 }
-    },
-    "wordspacing": {
-      "$type": "dimension",
-      "normal": { "$value": { "unit": "px", "value": 0 } },
-      "wide": { "$value": { "unit": "px", "value": 1.6 } }
-    },
-    "letterspacing": {
-      "$type": "dimension",
-      "tight": { "$value": { "unit": "px", "value": -0.5 } },
-      "normal": { "$value": { "unit": "px", "value": 0 } },
-      "wide": { "$value": { "unit": "px", "value": 0.5 } },
-      "wider": { "$value": { "unit": "px", "value": 1 } }
-    },
-    "offset": {
-      "$type": "dimension",
-      "$value": { "unit": "px", "value": 2 }
-    },
-    "layout": {
-      "breakpoint": {
-        "$type": "dimension",
-        "xs": { "$value": { "unit": "px", "value": 320 } },
-        "sm": { "$value": { "unit": "px", "value": 600 } },
-        "md": { "$value": { "unit": "px", "value": 840 } },
-        "lg": { "$value": { "unit": "px", "value": 960 } },
-        "xl": { "$value": { "unit": "px", "value": 1280 } }
-      },
-      "container": {
-        "$type": "dimension",
-        "sm": { "$value": { "unit": "px", "value": 896 } },
-        "md": { "$value": { "unit": "px", "value": 1080 } },
-        "lg": { "$value": { "unit": "px", "value": 1280 } }
-      },
-      "safezone": {
-        "$type": "number",
-        "sm": { "$value": 5.625, "$fluid": { "unit": "vi" } },
-        "md": { "$value": 6.667, "$fluid": { "unit": "vi" } },
-        "lg": { "$value": 7.5, "$fluid": { "unit": "vi" } },
-        "xl": { "$value": 0 }
-      },
-      "gridgap": {
-        "$type": "dimension",
-        "static": {
-          "xs": { "$value": { "unit": "px", "value": 12 } },
-          "sm": { "$value": { "unit": "px", "value": 18 } },
-          "md": { "$value": { "unit": "px", "value": 20 } },
-          "lg": { "$value": { "unit": "px", "value": 22 } },
-          "xl": { "$value": { "unit": "px", "value": 26 } },
-          "2xl": { "$value": { "unit": "px", "value": 36 } },
-          "3xl": { "$value": { "unit": "px", "value": 40 } }
-        },
-        "fluid": {
-          "basic": {
-            "min": { "$value": "{base.layout.gridgap.static.xs}" },
-            "max": { "$value": "{base.layout.gridgap.static.2xl}" },
-            "val": { "$value": { "unit": "px", "value": -9.176 }, "$fluid": { "unit": "vi", "value": 3.529 } }
-          },
-          "large": {
-            "min": { "$value": "{base.layout.gridgap.static.md}" },
-            "max": { "$value": "{base.layout.gridgap.static.3xl}" },
-            "val": { "$value": { "unit": "px", "value": 2.353 }, "$fluid": { "unit": "vi", "value": 2.941 } }
-          }
-        }
-      },
-      "gridcolumn": {
-        "$type": "number",
-        "1": { "$value": 1 },
-        "2": { "$value": 2 },
-        "3": { "$value": 3 },
-        "4": { "$value": 4 },
-        "6": { "$value": 6 },
-        "8": { "$value": 8 },
-        "10": { "$value": 10 },
-        "12": { "$value": 12 }
-      }
-    }
-  },
-  "semantic": {
-    "color": {
-      "$type": "color",
-      "fn": {
-        "default": { "$value": "{base.color.blue.600}", "$description": "Main interaction color for buttons and links (Blue 600)" },
-        "active": { "$value": "{base.color.blue.700}", "$description": "Main interaction color when active (e.g., hover, Blue 700)" },
-        "inactive": { "$value": "{base.color.gray.300}", "$description": "Interaction color when inactive (Gray 300)" },
-        "border": { "$value": "{base.color.gray.600}", "$description": "Interaction border color (Gray 600)" },
-        "label": { "$value": "{base.color.gray.600}", "$description": "Interaction label color (Gray 600)" }
-      },
-      "text": {
-        "default": { "$value": "{base.color.gray.600}", "$description": "Main text color for body (Gray 600)" },
-        "on-dark-bg": { "$value": "{base.color.white.default}", "$description": "Main text color on dark background (White)" },
-        "headline-on-dark-bg": { "$value": "{base.color.green.300}", "$description": "Headline text color on dark background (Green 300)" },
-        "on-disabled": { "$value": "{base.color.white.default}", "$description": "Text color on disabled (White)" }
-      },
-      "background": {
-        "default": { "$value": "{base.color.white.default}", "$description": "Main background color for body (White)" },
-        "subtle": { "$value": "{base.color.gray.50}", "$description": "Neutral (Gray 50)" },
-        "disabled": { "$value": "{base.color.gray.300}", "$description": "Disabled (Gray 300)" },
-        "light-blue": { "$value": "{base.color.blue.100}", "$description": "Light blue (Blue 100)" },
-        "light-green": { "$value": "{base.color.green.100}", "$description": "Light green (Green 100)" },
-        "medium-green": { "$value": "{base.color.green.300}", "$description": "Green Medium (Green 300)" },
-        "dark-blue": { "$value": "{base.color.blue.800}", "$description": "Dark blue (Blue 800)" },
-        "dark-green": { "$value": "{base.color.green.700}", "$description": "Dark green (Green 700)" }
-      },
-      "opaque": {
-        "white-90": { "$value": "{base.color.white.90}", "$description": "White 90%" },
-        "white-95": { "$value": "{base.color.white.95}", "$description": "White 95%" },
-        "gray-500-10": { "$value": "{base.color.gray.500.10}", "$description": "Gray 500 10%" },
-        "gray-500-30": { "$value": "{base.color.gray.500.30}", "$description": "Gray 500 30%" },
-        "gray-500-90": { "$value": "{base.color.gray.500.90}", "$description": "Gray 500 90%" }
-      },
-      "state": {
-        "danger": { "$value": "{base.color.red.400}" },
-        "success": { "$value": "{base.color.green.700}" },
-        "warning": { "$value": "{base.color.violet.400}" }
-      },
-      "status": {
-        "red": { "$value": "{base.color.red.400}" },
-        "yellow": { "$value": "{base.color.yellow.500}" },
-        "green": { "$value": "{base.color.green.700}" }
-      },
-      "line": {
-        "6": { "$value": "{base.color.blue.700}" },
-        "7": { "$value": "{base.color.gray.600}" },
-        "8": { "$value": "{base.color.gray.300}" },
-        "9": { "$value": "{base.color.blue.600}" },
-        "10": { "$value": "{base.color.gray.600}" },
-        "11": { "$value": "{base.color.green.300}" },
-        "12": { "$value": "{base.color.gray.300}" }
-      },
-      "product": {
-        "container": { "$value": "{base.color.gray.50}" },
-        "benefit": { "$value": "{base.color.blue.500}" },
-        "credit": { "$value": "{base.color.green.700}" },
-        "cooperation": { "$value": "{base.color.violet.500}" },
-        "credit-benefit": { "$value": "{base.color.gray.500.default}" }
-      },
-      "icon": {
-        "default": { "$value": "{base.color.blue.600}" },
-        "secondary": { "$value": "{base.color.blue.400}" },
-        "disabled": { "$value": "{base.color.green.700}" },
-        "disabled-secondary": { "$value": "{base.color.green.400}" }
-      }
-    },
-    "fontfamily": {
-      "$type": "fontFamily",
-      "default": {
-        "$value": "{base.fontfamily.sans}"
-      },
-      "code": {
-        "$type": "fontFamily",
-        "$value": "{base.fontfamily.mono}"
-      }
-    },
-    "space": {
-      "$type": "dimension",
-      "tiny": { "$value": "{base.space.static.5}" },
-      "xsmall": { "$value": "{base.space.static.10}" },
-      "midSmall": { "$value": "{base.space.static.15}" },
-      "small": { "$value": "{base.space.static.20}" },
-      "medium": { "$value": "{base.space.static.30}" },
-      "large": {
-        "min": { "$value": "{base.space.fluid.35.min}" },
-        "max": { "$value": "{base.space.fluid.35.max}" },
-        "val": { "$value": "{base.space.fluid.35.val}" }
-      },
-      "xlarge": {
-        "min": { "$value": "{base.space.fluid.40-48.min}" },
-        "max": { "$value": "{base.space.fluid.40-48.max}" },
-        "val": { "$value": "{base.space.fluid.40-48.val}" }
-      },
-      "big": {
-        "min": { "$value": "{base.space.fluid.50.min}" },
-        "max": { "$value": "{base.space.fluid.50.max}" },
-        "val": { "$value": "{base.space.fluid.50.val}" }
-      }
-    },
-    "fontsize": {
-      "$type": "dimension",
-      "default": { "$value": "{base.fontsize.static.md}" },
-      "introduction": { "$value": "{base.fontsize.static.xl}" },
-      "large": { "$value": "{base.fontsize.static.lg}" },
-      "small": { "$value": "{base.fontsize.static.sm}" },
-      "heading-1": {
-        "min": { "$value": "{base.fontsize.fluid.7xl.min}" },
-        "max": { "$value": "{base.fontsize.fluid.7xl.max}" },
-        "val": { "$value": "{base.fontsize.fluid.7xl.val}" }
-      },
-      "heading-2": {
-        "min": { "$value": "{base.fontsize.fluid.6xl.min}" },
-        "max": { "$value": "{base.fontsize.fluid.6xl.max}" },
-        "val": { "$value": "{base.fontsize.fluid.6xl.val}" }
-      },
-      "heading-3": {
-        "min": { "$value": "{base.fontsize.fluid.3xl.min}" },
-        "max": { "$value": "{base.fontsize.fluid.3xl.max}" },
-        "val": { "$value": "{base.fontsize.fluid.3xl.val}" }
-      },
-      "heading-4": {
-        "min": { "$value": "{base.fontsize.fluid.xl.min}" },
-        "max": { "$value": "{base.fontsize.fluid.xl.max}" },
-        "val": { "$value": "{base.fontsize.fluid.xl.val}" }
-      },
-      "heading-5": { "$value": "{base.fontsize.static.lg}" },
-      "heading-6": { "$value": "{base.fontsize.static.md}" }
-    },
-    "lineheight": {
-      "$type": "number",
-      "default": { "$value": "{base.lineheight.md}" },
-      "large": { "$value": "{base.lineheight.lg}" },
-      "lightspeech": { "$value": "{base.lineheight.xl}" },
-      "heading": { "$value": "{base.lineheight.xs}" },
-      "heading-5": { "$value": "{base.lineheight.sm}" },
-      "small": { "$value": "{base.lineheight.2xs}" }
-    },
-    "borderradius": {
-      "$type": "dimension",
-      "default": { "$value": "{base.borderradius.md}" },
-      "small": { "$value": "{base.borderradius.sm}" },
-      "large": { "$value": "{base.borderradius.lg}" },
-      "circle": { "$value": "{base.borderradius.circle}" }
-    },
-    "borderwidth": {
-      "$type": "dimension",
-      "default": { "$value": "{base.borderwidth.md}" },
-      "large": { "$value": "{base.borderwidth.lg}" }
-    },
-    "borderstyle": { "$type": "strokeStyle", "$value": "solid" },
-    "focusring": {
-      "outline-width": { "$type": "dimension", "$value": "{base.borderwidth.lg}" },
-      "outline-offset": { "$type": "dimension", "$value": "{base.offset}" },
-      "outline-style": { "$type": "strokeStyle", "$value": "dashed" },
-      "outline-color": { "$type": "color", "$value": "{base.color.blue.700}" },
-      "outline-radius": { "$type": "dimension", "$value": "{base.borderradius.md}" }
-    },
-    "fontweight": {
-      "$type": "fontWeight",
-      "default": {
-        "$value": "{base.fontweight.regular}"
-      },
-      "bold": {
-        "$value": "{base.fontweight.medium}"
-      }
-    },
-    "wordspacing": {
-      "$type": "dimension",
-      "lightspeech": {
-        "$value": "{base.wordspacing.wide}"
-      }
-    },
-    "breakpoint": {
-      "$type": "dimension",
-      "mobile": { "$value": "{base.layout.breakpoint.sm}" },
-      "tablet": { "$value": "{base.layout.breakpoint.md}" },
-      "desktop": { "$value": "{base.layout.breakpoint.lg}" },
-      "desktop-large": { "$value": "{base.layout.breakpoint.xl}" }
-    },
-    "contentwrapper": {
-      "$type": "dimension",
-      "narrow": { "$value": "{base.layout.container.sm}" },
-      "basic": { "$value": "{base.layout.container.md}" },
-      "extended": { "$value": "{base.layout.container.lg}" }
-    },
-    "safezone": {
-      "$type": "number",
-      "mobile": { "$value": "{base.layout.safezone.sm}" },
-      "tablet": { "$value": "{base.layout.safezone.md}" },
-      "desktop": { "$value": "{base.layout.safezone.lg}" },
-      "desktop-large": { "$value": "{base.layout.safezone.xl}" }
-    },
-    "gridgap": {
-      "$type": "dimension",
-      "basic": {
-        "min": { "$value": "{base.layout.gridgap.fluid.basic.min}" },
-        "max": { "$value": "{base.layout.gridgap.fluid.basic.max}" },
-        "val": { "$value": "{base.layout.gridgap.fluid.basic.val}" }
-      },
-      "large": {
-        "min": { "$value": "{base.layout.gridgap.fluid.large.min}" },
-        "max": { "$value": "{base.layout.gridgap.fluid.large.max}" },
-        "val": { "$value": "{base.layout.gridgap.fluid.large.val}" }
-      }
-    }
-  }
-}