@gitlab/duo-ui 0.1.0 → 0.3.0

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

@@ -1,879 +0,0 @@
-{
-  "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."
-          }
-        }
-      }
-    }
-  }
-}