@gitlab/duo-ui 0.1.0

package/src/tokens/contextual/badge.tokens.json

@@ -0,0 +1,879 @@
+{
+  "badge": {
+    "muted": {
+      "background": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.neutral.50}",
+              "dark": "{color.neutral.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a muted badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": "{badge.muted.background.color.default}",
+            "$type": "color",
+            "$description": "Used for the background of a muted badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.muted.background.color.hover}",
+            "$type": "color",
+            "$description": "Used for the background of a muted badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.neutral.100}",
+              "dark": "{color.neutral.300}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a muted badge in the active state."
+          }
+        }
+      },
+      "border": {
+        "color": {
+          "default": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a muted badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.neutral.200}",
+              "dark": "{color.neutral.300}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of a muted badge in the hover state."
+          },
+          "focus": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a muted badge in the focus state."
+          },
+          "active": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a muted badge in the active state."
+          }
+        }
+      },
+      "text": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.neutral.600}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a muted badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.neutral.700}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a muted badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.muted.text.color.hover}",
+            "$type": "color",
+            "$description": "Used for the text of a muted badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.neutral.800}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a muted badge in the active state."
+          }
+        }
+      },
+      "icon": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.neutral.500}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a muted badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.neutral.600}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a muted badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.muted.icon.color.hover}",
+            "$type": "color",
+            "$description": "Used for the icon of a muted badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.neutral.700}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a muted badge in the active state."
+          }
+        }
+      }
+    },
+    "neutral": {
+      "background": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.neutral.100}",
+              "dark": "{color.neutral.300}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a neutral badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": "{badge.neutral.background.color.default}",
+            "$type": "color",
+            "$description": "Used for the background of a neutral badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.neutral.background.color.hover}",
+            "$type": "color",
+            "$description": "Used for the background of a neutral badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.neutral.200}",
+              "dark": "{color.neutral.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a neutral badge in the active state."
+          }
+        }
+      },
+      "border": {
+        "color": {
+          "default": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a neutral badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.neutral.200}",
+              "dark": "{color.neutral.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of a neutral badge in the hover state."
+          },
+          "focus": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a neutral badge in the focus state."
+          },
+          "active": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a neutral badge in the active state."
+          }
+        }
+      },
+      "text": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.neutral.700}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a neutral badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.neutral.800}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a neutral badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.neutral.text.color.hover}",
+            "$type": "color",
+            "$description": "Used for the text of a neutral badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.neutral.900}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a neutral badge in the active state."
+          }
+        }
+      },
+      "icon": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.neutral.500}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a neutral badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.neutral.600}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a neutral badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.neutral.icon.color.hover}",
+            "$type": "color",
+            "$description": "Used for the icon of a neutral badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.neutral.700}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a neutral badge in the active state."
+          }
+        }
+      }
+    },
+    "info": {
+      "background": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.blue.100}",
+              "dark": "{color.blue.300}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of an informational badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": "{badge.info.background.color.default}",
+            "$type": "color",
+            "$description": "Used for the background of an informational badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.info.background.color.hover}",
+            "$type": "color",
+            "$description": "Used for the background of an informational badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.blue.200}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of an informational badge in the active state."
+          }
+        }
+      },
+      "border": {
+        "color": {
+          "default": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of an informational badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.blue.200}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of an informational badge in the hover state."
+          },
+          "focus": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of an informational badge in the focus state."
+          },
+          "active": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of an informational badge in the active state."
+          }
+        }
+      },
+      "text": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of an informational badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.blue.800}",
+              "dark": "{color.blue.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of an informational badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.info.text.color.hover}",
+            "$type": "color",
+            "$description": "Used for the text of an informational badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.blue.900}",
+              "dark": "{color.blue.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of an informational badge in the active state."
+          }
+        }
+      },
+      "icon": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.blue.500}",
+              "dark": "{color.blue.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of an informational badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.blue.600}",
+              "dark": "{color.blue.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of an informational badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.info.icon.color.hover}",
+            "$type": "color",
+            "$description": "Used for the icon of an informational badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of an informational badge in the active state."
+          }
+        }
+      }
+    },
+    "success": {
+      "background": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.green.100}",
+              "dark": "{color.green.300}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a success badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": "{badge.success.background.color.default}",
+            "$type": "color",
+            "$description": "Used for the background of a success badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.success.background.color.hover}",
+            "$type": "color",
+            "$description": "Used for the background of a success badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.green.200}",
+              "dark": "{color.green.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a success badge in the active state."
+          }
+        }
+      },
+      "border": {
+        "color": {
+          "default": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a success badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.green.200}",
+              "dark": "{color.green.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of a success badge in the hover state."
+          },
+          "focus": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a success badge in the focus state."
+          },
+          "active": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a success badge in the active state."
+          }
+        }
+      },
+      "text": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.green.700}",
+              "dark": "{color.green.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a success badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.green.800}",
+              "dark": "{color.green.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a success badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.success.text.color.hover}",
+            "$type": "color",
+            "$description": "Used for the text of a success badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.green.900}",
+              "dark": "{color.green.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a success badge in the active state."
+          }
+        }
+      },
+      "icon": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.green.500}",
+              "dark": "{color.green.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a success badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.green.600}",
+              "dark": "{color.green.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a success badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.success.icon.color.hover}",
+            "$type": "color",
+            "$description": "Used for the icon of a success badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.green.700}",
+              "dark": "{color.green.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a success badge in the active state."
+          }
+        }
+      }
+    },
+    "warning": {
+      "background": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.orange.100}",
+              "dark": "{color.orange.300}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a warning badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": "{badge.warning.background.color.default}",
+            "$type": "color",
+            "$description": "Used for the background of a warning badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.warning.background.color.hover}",
+            "$type": "color",
+            "$description": "Used for the background of a warning badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.orange.200}",
+              "dark": "{color.orange.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a warning badge in the active state."
+          }
+        }
+      },
+      "border": {
+        "color": {
+          "default": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a warning badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.orange.200}",
+              "dark": "{color.orange.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of a warning badge in the hover state."
+          },
+          "focus": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a warning badge in the focus state."
+          },
+          "active": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a warning badge in the active state."
+          }
+        }
+      },
+      "text": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.orange.700}",
+              "dark": "{color.orange.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a warning badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.orange.800}",
+              "dark": "{color.orange.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a warning badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.warning.text.color.hover}",
+            "$type": "color",
+            "$description": "Used for the text of a warning badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.orange.900}",
+              "dark": "{color.orange.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a warning badge in the active state."
+          }
+        }
+      },
+      "icon": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.orange.500}",
+              "dark": "{color.orange.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a warning badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.orange.600}",
+              "dark": "{color.orange.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a warning badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.warning.icon.color.hover}",
+            "$type": "color",
+            "$description": "Used for the icon of a warning badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.orange.700}",
+              "dark": "{color.orange.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a warning badge in the active state."
+          }
+        }
+      }
+    },
+    "danger": {
+      "background": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.red.100}",
+              "dark": "{color.red.300}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a danger badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": "{badge.danger.background.color.default}",
+            "$type": "color",
+            "$description": "Used for the background of a danger badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.danger.background.color.hover}",
+            "$type": "color",
+            "$description": "Used for the background of a danger badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.red.200}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a danger badge in the active state."
+          }
+        }
+      },
+      "border": {
+        "color": {
+          "default": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a danger badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.red.200}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of a danger badge in the hover state."
+          },
+          "focus": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a danger badge in the focus state."
+          },
+          "active": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a danger badge in the active state."
+          }
+        }
+      },
+      "text": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a danger badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.red.800}",
+              "dark": "{color.red.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a danger badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.danger.text.color.hover}",
+            "$type": "color",
+            "$description": "Used for the text of a danger badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.red.900}",
+              "dark": "{color.red.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a danger badge in the active state."
+          }
+        }
+      },
+      "icon": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a danger badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.red.800}",
+              "dark": "{color.red.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a danger badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.danger.icon.color.hover}",
+            "$type": "color",
+            "$description": "Used for the icon of a danger badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.red.900}",
+              "dark": "{color.red.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a danger badge in the active state."
+          }
+        }
+      }
+    },
+    "tier": {
+      "background": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.purple.100}",
+              "dark": "{color.purple.300}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a tier related badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": "{badge.tier.background.color.default}",
+            "$type": "color",
+            "$description": "Used for the background of a tier related badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.tier.background.color.hover}",
+            "$type": "color",
+            "$description": "Used for the background of a tier related badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.purple.200}",
+              "dark": "{color.purple.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a tier related badge in the active state."
+          }
+        }
+      },
+      "border": {
+        "color": {
+          "default": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a tier related badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.purple.200}",
+              "dark": "{color.purple.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of a tier related badge in the hover state."
+          },
+          "focus": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a tier related badge in the focus state."
+          },
+          "active": {
+            "$value": "{color.alpha.0}",
+            "$type": "color",
+            "$description": "Used for the border of a tier related badge in the active state."
+          }
+        }
+      },
+      "text": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.purple.700}",
+              "dark": "{color.purple.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a tier related badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.purple.800}",
+              "dark": "{color.purple.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a tier related badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.tier.text.color.hover}",
+            "$type": "color",
+            "$description": "Used for the text of a tier related badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.purple.900}",
+              "dark": "{color.purple.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a tier related badge in the active state."
+          }
+        }
+      },
+      "icon": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.purple.700}",
+              "dark": "{color.purple.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a tier related badge when static or the default state when linked."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.purple.800}",
+              "dark": "{color.purple.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a tier related badge in the hover state."
+          },
+          "focus": {
+            "$value": "{badge.tier.icon.color.hover}",
+            "$type": "color",
+            "$description": "Used for the icon of a tier related badge in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.purple.900}",
+              "dark": "{color.purple.950}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a tier related badge in the active state."
+          }
+        }
+      }
+    }
+  }
+}