@dropins/mcp 0.1.0

package/dist/registry/design-tokens.json

@@ -0,0 +1,577 @@
+{
+  "version": "1.0.0",
+  "cssScope": ".dropin-design",
+  "overrideExample": ".dropin-design {\n  --color-brand-500: #0066cc;\n  --color-brand-600: #0052a3;\n  --type-base-font-family: 'My Brand Font', sans-serif;\n}",
+  "categories": {
+    "colors": {
+      "description": "Brand, neutral, semantic, and interactive color tokens",
+      "tokens": [
+        {
+          "cssVariable": "--color-brand-500",
+          "defaultValue": "#454545",
+          "description": "Brand buttons default - AAA"
+        },
+        {
+          "cssVariable": "--color-brand-600",
+          "defaultValue": "#383838",
+          "description": "Brand buttons on hover - AAA"
+        },
+        {
+          "cssVariable": "--color-brand-700",
+          "defaultValue": "#2B2B2B",
+          "description": "Brand buttons selected"
+        },
+        {
+          "cssVariable": "--color-neutral-50",
+          "defaultValue": "#FFFFFF",
+          "description": "Lightest surface / Text & components On Dark surface - AAA"
+        },
+        {
+          "cssVariable": "--color-neutral-100",
+          "defaultValue": "#FAFAFA",
+          "description": "Light surface - AAA"
+        },
+        {
+          "cssVariable": "--color-neutral-200",
+          "defaultValue": "#F5F5F5",
+          "description": "Light surface - AAA"
+        },
+        {
+          "cssVariable": "--color-neutral-300",
+          "defaultValue": "#E8E8E8",
+          "description": "Disabled surfaces - AAA"
+        },
+        {
+          "cssVariable": "--color-neutral-400",
+          "defaultValue": "#D6D6D6",
+          "description": "Ornamental elements (ie. Divider)"
+        },
+        {
+          "cssVariable": "--color-neutral-500",
+          "defaultValue": "#B8B8B8",
+          "description": "Disabled text"
+        },
+        {
+          "cssVariable": "--color-neutral-600",
+          "defaultValue": "#8F8F8F",
+          "description": "Component borders (ie. Text field border) - AA Large text"
+        },
+        {
+          "cssVariable": "--color-neutral-700",
+          "defaultValue": "#666666",
+          "description": "Secondary text - AAA"
+        },
+        {
+          "cssVariable": "--color-neutral-800",
+          "defaultValue": "#3D3D3D",
+          "description": "Default text - AAA"
+        },
+        {
+          "cssVariable": "--color-neutral-900",
+          "defaultValue": "#292929",
+          "description": "Default text on hover - AAA"
+        },
+        {
+          "cssVariable": "--color-positive-200",
+          "defaultValue": "#EFF5EF",
+          "description": "Semantic positive surface - AA Large text"
+        },
+        {
+          "cssVariable": "--color-positive-500",
+          "defaultValue": "#7FB078",
+          "description": "Semantic positive surface"
+        },
+        {
+          "cssVariable": "--color-positive-800",
+          "defaultValue": "#53824C",
+          "description": "Semantic Positive text - On Light AA"
+        },
+        {
+          "cssVariable": "--color-informational-200",
+          "defaultValue": "#EEEFFB",
+          "description": "Semantic informational surface - AA Large text"
+        },
+        {
+          "cssVariable": "--color-informational-500",
+          "defaultValue": "#6978D9",
+          "description": "Semantic informational surface"
+        },
+        {
+          "cssVariable": "--color-informational-800",
+          "defaultValue": "#5D6DD6",
+          "description": "Semantic informational text, Highlights - On Light AA"
+        },
+        {
+          "cssVariable": "--color-warning-200",
+          "defaultValue": "#FDF3E9",
+          "description": "Semantic warning surface - AA Large text"
+        },
+        {
+          "cssVariable": "--color-warning-500",
+          "defaultValue": "#E79F5C",
+          "description": "Semantic warning surface"
+        },
+        {
+          "cssVariable": "--color-warning-800",
+          "defaultValue": "#AD5C00",
+          "description": "Semantic warning text - On Light AA"
+        },
+        {
+          "cssVariable": "--color-alert-200",
+          "defaultValue": "#FFEBEB",
+          "description": "Semantic alert surface - AA Large text"
+        },
+        {
+          "cssVariable": "--color-alert-500",
+          "defaultValue": "#DB7070",
+          "description": "Semantic alert surface"
+        },
+        {
+          "cssVariable": "--color-alert-800",
+          "defaultValue": "#BF4545",
+          "description": "Semantic alert text - On light AA"
+        },
+        {
+          "cssVariable": "--color-opacity-16",
+          "defaultValue": "rgba(255,255,255,0.16)",
+          "description": ""
+        },
+        {
+          "cssVariable": "--color-opacity-24",
+          "defaultValue": "rgba(255,255,255,0.24)",
+          "description": ""
+        },
+        {
+          "cssVariable": "--color-action-button-active",
+          "defaultValue": "#ffffff",
+          "description": "Defaults to var(--color-neutral-50)"
+        },
+        {
+          "cssVariable": "--color-action-button-hover",
+          "defaultValue": "#e8e8e8",
+          "description": "Defaults to var(--color-neutral-300)"
+        },
+        {
+          "cssVariable": "--color-button-active",
+          "defaultValue": "#2b2b2b",
+          "description": "Defaults to var(--color-brand-700)"
+        },
+        {
+          "cssVariable": "--color-button-focus",
+          "defaultValue": "#d6d6d6",
+          "description": "Defaults to var(--color-neutral-400)"
+        },
+        {
+          "cssVariable": "--color-button-hover",
+          "defaultValue": "#383838",
+          "description": "Defaults to var(--color-brand-600)"
+        }
+      ]
+    },
+    "typography": {
+      "description": "Font family, display, heading, body, and detail type scales",
+      "tokens": [
+        {
+          "cssVariable": "--type-base-font-family",
+          "defaultValue": "system-ui, sans-serif",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-display-1-font",
+          "defaultValue": "normal normal 300 60px/72px var(--type-base-font-family)",
+          "description": "Hero title"
+        },
+        {
+          "cssVariable": "--type-display-1-letter-spacing",
+          "defaultValue": "0.04em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-display-2-font",
+          "defaultValue": "normal normal 300 48px/56px var(--type-base-font-family)",
+          "description": "Banner title"
+        },
+        {
+          "cssVariable": "--type-display-2-letter-spacing",
+          "defaultValue": "0.04em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-display-3-font",
+          "defaultValue": "normal normal 300 34px/40px var(--type-base-font-family)",
+          "description": "Desktop & tablet section title"
+        },
+        {
+          "cssVariable": "--type-display-3-letter-spacing",
+          "defaultValue": "0.04em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-headline-1-font",
+          "defaultValue": "normal normal 400 24px/32px var(--type-base-font-family)",
+          "description": "Desktop & tablet page title"
+        },
+        {
+          "cssVariable": "--type-headline-1-letter-spacing",
+          "defaultValue": "0.04em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-headline-2-default-font",
+          "defaultValue": "normal normal 300 20px/24px var(--type-base-font-family)",
+          "description": "Rail title"
+        },
+        {
+          "cssVariable": "--type-headline-2-default-letter-spacing",
+          "defaultValue": "0.04em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-headline-2-strong-font",
+          "defaultValue": "normal normal 400 20px/24px var(--type-base-font-family)",
+          "description": "Mobile page and section title"
+        },
+        {
+          "cssVariable": "--type-headline-2-strong-letter-spacing",
+          "defaultValue": "0.04em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-body-1-default-font",
+          "defaultValue": "normal normal 300 16px/24px var(--type-base-font-family)",
+          "description": "Normal text paragraph"
+        },
+        {
+          "cssVariable": "--type-body-1-default-letter-spacing",
+          "defaultValue": "0.04em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-body-1-strong-font",
+          "defaultValue": "normal normal 400 16px/24px var(--type-base-font-family)",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-body-1-strong-letter-spacing",
+          "defaultValue": "0.04em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-body-1-emphasized-font",
+          "defaultValue": "normal normal 700 16px/24px var(--type-base-font-family)",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-body-1-emphasized-letter-spacing",
+          "defaultValue": "0.04em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-body-2-default-font",
+          "defaultValue": "normal normal 300 14px/20px var(--type-base-font-family)",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-body-2-default-letter-spacing",
+          "defaultValue": "0.04em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-body-2-strong-font",
+          "defaultValue": "normal normal 400 14px/20px var(--type-base-font-family)",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-body-2-strong-letter-spacing",
+          "defaultValue": "0.04em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-body-2-emphasized-font",
+          "defaultValue": "normal normal 700 14px/20px var(--type-base-font-family)",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-body-2-emphasized-letter-spacing",
+          "defaultValue": "0.04em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-button-1-font",
+          "defaultValue": "normal normal 400 20px/26px var(--type-base-font-family)",
+          "description": "Primary button text"
+        },
+        {
+          "cssVariable": "--type-button-1-letter-spacing",
+          "defaultValue": "0.08em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-button-2-font",
+          "defaultValue": "normal normal 400 16px/24px var(--type-base-font-family)",
+          "description": "Small buttons"
+        },
+        {
+          "cssVariable": "--type-button-2-letter-spacing",
+          "defaultValue": "0.08em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-details-caption-1-font",
+          "defaultValue": "normal normal 400 12px/16px var(--type-base-font-family)",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-details-caption-1-letter-spacing",
+          "defaultValue": "0.08em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-details-caption-2-font",
+          "defaultValue": "normal normal 300 12px/16px var(--type-base-font-family)",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-details-caption-2-letter-spacing",
+          "defaultValue": "0.08em",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-details-overline-font",
+          "defaultValue": "normal normal 700 12px/20px var(--type-base-font-family)",
+          "description": ""
+        },
+        {
+          "cssVariable": "--type-details-overline-letter-spacing",
+          "defaultValue": "0.16em",
+          "description": ""
+        }
+      ]
+    },
+    "spacing": {
+      "description": "Consistent spacing scale from xxsmall (4px) to xxhuge (192px)",
+      "tokens": [
+        {
+          "cssVariable": "--spacing-xxsmall",
+          "defaultValue": "4px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--spacing-xsmall",
+          "defaultValue": "8px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--spacing-small",
+          "defaultValue": "16px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--spacing-medium",
+          "defaultValue": "24px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--spacing-big",
+          "defaultValue": "32px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--spacing-xbig",
+          "defaultValue": "40px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--spacing-xxbig",
+          "defaultValue": "48px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--spacing-large",
+          "defaultValue": "64px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--spacing-xlarge",
+          "defaultValue": "72px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--spacing-xxlarge",
+          "defaultValue": "96px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--spacing-huge",
+          "defaultValue": "120px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--spacing-xhuge",
+          "defaultValue": "144px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--spacing-xxhuge",
+          "defaultValue": "192px",
+          "description": ""
+        }
+      ]
+    },
+    "shapes": {
+      "description": "Border radii, border widths, shadows, and icon stroke widths",
+      "tokens": [
+        {
+          "cssVariable": "--shape-border-radius-1",
+          "defaultValue": "3px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--shape-border-radius-2",
+          "defaultValue": "8px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--shape-border-radius-3",
+          "defaultValue": "24px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--shape-border-width-1",
+          "defaultValue": "1px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--shape-border-width-2",
+          "defaultValue": "1.5px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--shape-border-width-3",
+          "defaultValue": "2px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--shape-border-width-4",
+          "defaultValue": "4px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--shape-shadow-1",
+          "defaultValue": "0 0 16px 0 rgba(0,0,0,0.16)",
+          "description": "Elevated panels (ie. Page side panel, Mobile bottom bar)"
+        },
+        {
+          "cssVariable": "--shape-shadow-2",
+          "defaultValue": "0 2px 16px 0 rgba(0,0,0,0.16)",
+          "description": "Elevated dialogs (ie. Modal)"
+        },
+        {
+          "cssVariable": "--shape-shadow-3",
+          "defaultValue": "0 2px 3px 0 rgba(0,0,0,0.16)",
+          "description": "Elevated container (ie. Card)"
+        },
+        {
+          "cssVariable": "--shape-icon-stroke-1",
+          "defaultValue": "1px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--shape-icon-stroke-2",
+          "defaultValue": "1.5px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--shape-icon-stroke-3",
+          "defaultValue": "2px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--shape-icon-stroke-4",
+          "defaultValue": "4px",
+          "description": ""
+        }
+      ]
+    },
+    "grid": {
+      "description": "Responsive grid columns, margins, and gutters",
+      "tokens": [
+        {
+          "cssVariable": "--grid-1-columns",
+          "defaultValue": "4",
+          "description": ""
+        },
+        {
+          "cssVariable": "--grid-1-margins",
+          "defaultValue": "0",
+          "description": ""
+        },
+        {
+          "cssVariable": "--grid-1-gutters",
+          "defaultValue": "16px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--grid-2-columns",
+          "defaultValue": "12",
+          "description": ""
+        },
+        {
+          "cssVariable": "--grid-2-margins",
+          "defaultValue": "0",
+          "description": ""
+        },
+        {
+          "cssVariable": "--grid-2-gutters",
+          "defaultValue": "16px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--grid-3-columns",
+          "defaultValue": "12",
+          "description": ""
+        },
+        {
+          "cssVariable": "--grid-3-margins",
+          "defaultValue": "0",
+          "description": ""
+        },
+        {
+          "cssVariable": "--grid-3-gutters",
+          "defaultValue": "24px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--grid-4-columns",
+          "defaultValue": "12",
+          "description": ""
+        },
+        {
+          "cssVariable": "--grid-4-margins",
+          "defaultValue": "0",
+          "description": ""
+        },
+        {
+          "cssVariable": "--grid-4-gutters",
+          "defaultValue": "24px",
+          "description": ""
+        },
+        {
+          "cssVariable": "--grid-5-columns",
+          "defaultValue": "12",
+          "description": ""
+        },
+        {
+          "cssVariable": "--grid-5-margins",
+          "defaultValue": "0",
+          "description": ""
+        },
+        {
+          "cssVariable": "--grid-5-gutters",
+          "defaultValue": "24px",
+          "description": ""
+        }
+      ]
+    }
+  }
+}