@gitlab/duo-ui 0.1.0

package/src/tokens/deprecated.color.transparency.tokens.json

@@ -0,0 +1,110 @@
+{
+  "t-gray-a": {
+    "02": {
+      "$value": "rgba(05, 05, 06, 0.02)",
+      "$type": "color",
+      "$description": "Use color.alpha.dark.2 instead.",
+      "themeable": true,
+      "prefix": false,
+      "deprecated": true
+    },
+    "04": {
+      "$value": "rgba(05, 05, 06, 0.04)",
+      "$type": "color",
+      "$description": "Use color.alpha.dark.4 instead.",
+      "themeable": true,
+      "prefix": false,
+      "deprecated": true
+    },
+    "06": {
+      "$value": "rgba(05, 05, 06, 0.06)",
+      "$type": "color",
+      "$description": "Use color.alpha.dark.6 instead.",
+      "themeable": true,
+      "prefix": false,
+      "deprecated": true
+    },
+    "08": {
+      "$value": "rgba(05, 05, 06, 0.08)",
+      "$type": "color",
+      "$description": "Use color.alpha.dark.8 instead.",
+      "themeable": true,
+      "prefix": false,
+      "deprecated": true
+    },
+    "16": {
+      "$value": "rgba(05, 05, 06, 0.16)",
+      "$type": "color",
+      "$description": "Use color.alpha.dark.16 instead.",
+      "themeable": true,
+      "prefix": false,
+      "deprecated": true
+    },
+    "24": {
+      "$value": "rgba(05, 05, 06, 0.24)",
+      "$type": "color",
+      "$description": "Use color.alpha.dark.24 instead.",
+      "themeable": true,
+      "prefix": false,
+      "deprecated": true
+    }
+  },
+  "t-white-a": {
+    "02": {
+      "$value": "rgba(255, 255, 255, 0.02)",
+      "$type": "color",
+      "$description": "Use color.alpha.light.2 instead.",
+      "themeable": true,
+      "prefix": false,
+      "deprecated": true
+    },
+    "04": {
+      "$value": "rgba(255, 255, 255, 0.04)",
+      "$type": "color",
+      "$description": "Use color.alpha.light.4 instead.",
+      "themeable": true,
+      "prefix": false,
+      "deprecated": true
+    },
+    "06": {
+      "$value": "rgba(255, 255, 255, 0.06)",
+      "$type": "color",
+      "$description": "Use color.alpha.light.6 instead.",
+      "themeable": true,
+      "prefix": false,
+      "deprecated": true
+    },
+    "08": {
+      "$value": "rgba(255, 255, 255, 0.08)",
+      "$type": "color",
+      "$description": "Use color.alpha.light.8 instead.",
+      "themeable": true,
+      "prefix": false,
+      "deprecated": true
+    },
+    "16": {
+      "$value": "rgba(255, 255, 255, 0.16)",
+      "$type": "color",
+      "$description": "Use color.alpha.light.16 instead.",
+      "themeable": true,
+      "prefix": false,
+      "deprecated": true
+    },
+    "24": {
+      "$value": "rgba(255, 255, 255, 0.24)",
+      "$type": "color",
+      "$description": "Use color.alpha.light.24 instead.",
+      "themeable": true,
+      "prefix": false,
+      "deprecated": true
+    },
+    "36": {
+      "$value": "rgba(255, 255, 255, 0.36)",
+      "$type": "color",
+      "$description": "Use color.alpha.light.36 instead.",
+      "themeable": true,
+      "prefix": false,
+      "deprecated": true
+    }
+  }
+}

package/src/tokens/feedback.tokens.json

@@ -0,0 +1,200 @@
+{
+  "feedback": {
+    "strong": {
+      "background": {
+        "color": {
+          "$value": "{color.neutral.800}",
+          "$type": "color",
+          "$description": "Used for a background associated with strong feedback like a tooltip or toast message."
+        }
+      },
+      "text": {
+        "color": {
+          "$value": "{color.neutral.0}",
+          "$type": "color",
+          "$description": "Used for text on a strong feedback background."
+        }
+      },
+      "icon": {
+        "color": {
+          "$value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "$description": "Used for an icon on a strong feedback background."
+        }
+      },
+      "link": {
+        "color": {
+          "$value": {
+            "default": "{color.blue.300}",
+            "dark": "{color.blue.700}"
+          },
+          "$type": "color",
+          "$description": "Used for a link on a strong feedback background."
+        }
+      }
+    },
+    "neutral": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.neutral.50}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "$description": "Used for the background of a neutral feedback item when there isn't a specific meaning or urgency."
+        }
+      },
+      "text": {
+        "color": {
+          "$value": {
+            "default": "{color.neutral.700}",
+            "dark": "{color.neutral.200}"
+          },
+          "$type": "color",
+          "$description": "Used for the text of a neutral feedback item when there isn't a specific meaning or urgency."
+        }
+      },
+      "icon": {
+        "color": {
+          "$value": {
+            "default": "{color.neutral.600}",
+            "dark": "{color.neutral.300}"
+          },
+          "$type": "color",
+          "$description": "Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency."
+        }
+      }
+    },
+    "info": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.blue.50}",
+            "dark": "{color.blue.950}"
+          },
+          "$type": "color",
+          "$description": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action."
+        }
+      },
+      "text": {
+        "color": {
+          "$value": {
+            "default": "{color.blue.700}",
+            "dark": "{color.blue.200}"
+          },
+          "$type": "color",
+          "$description": "Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action."
+        }
+      },
+      "icon": {
+        "color": {
+          "$value": {
+            "default": "{color.blue.600}",
+            "dark": "{color.blue.300}"
+          },
+          "$type": "color",
+          "$description": "Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action."
+        }
+      }
+    },
+    "success": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.green.50}",
+            "dark": "{color.green.900}"
+          },
+          "$type": "color",
+          "$description": "Used for the background of a success feedback item when confirming the successful completion of a user-initiated action."
+        }
+      },
+      "text": {
+        "color": {
+          "$value": {
+            "default": "{color.green.700}",
+            "dark": "{color.green.200}"
+          },
+          "$type": "color",
+          "$description": "Used for the text of a success feedback item when confirming the successful completion of a user-initiated action."
+        }
+      },
+      "icon": {
+        "color": {
+          "$value": {
+            "default": "{color.green.600}",
+            "dark": "{color.green.300}"
+          },
+          "$type": "color",
+          "$description": "Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action."
+        }
+      }
+    },
+    "warning": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.orange.50}",
+            "dark": "{color.orange.900}"
+          },
+          "$type": "color",
+          "$description": "Used for the background of a warning feedback item when notifying about a potential issue or sensitive information."
+        }
+      },
+      "text": {
+        "color": {
+          "$value": {
+            "default": "{color.orange.700}",
+            "dark": "{color.orange.200}"
+          },
+          "$type": "color",
+          "$description": "Used for the text of a warning feedback item when notifying about a potential issue or sensitive information."
+        }
+      },
+      "icon": {
+        "color": {
+          "$value": {
+            "default": "{color.orange.600}",
+            "dark": "{color.orange.300}"
+          },
+          "$type": "color",
+          "$description": "Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information."
+        }
+      }
+    },
+    "danger": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.red.50}",
+            "dark": "{color.red.900}"
+          },
+          "$type": "color",
+          "$description": "Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention."
+        }
+      },
+      "text": {
+        "color": {
+          "$value": {
+            "default": "{color.red.700}",
+            "dark": "{color.red.200}"
+          },
+          "$type": "color",
+          "$description": "Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention."
+        }
+      },
+      "icon": {
+        "color": {
+          "$value": {
+            "default": "{color.red.600}",
+            "dark": "{color.red.300}"
+          },
+          "$type": "color",
+          "$description": "Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention."
+        }
+      }
+    }
+  }
+}

package/src/tokens/focus-ring.tokens.json

@@ -0,0 +1,21 @@
+{
+  "focus-ring": {
+    "outer": {
+      "color": {
+        "$value": {
+          "default": "{color.blue.500}",
+          "dark": "{color.blue.400}"
+        },
+        "$type": "color",
+        "$description": "Used for the outer color portion of the focus ring."
+      }
+    },
+    "inner": {
+      "color": {
+        "$value": "{background.color.default}",
+        "$type": "color",
+        "$description": "Used for the inner neutral portion of the focus ring."
+      }
+    }
+  }
+}

package/src/tokens/icon.tokens.json

@@ -0,0 +1,78 @@
+{
+  "icon": {
+    "color": {
+      "default": {
+        "$value": {
+          "default": "{color.neutral.700}",
+          "dark": "{color.neutral.100}"
+        },
+        "$type": "color",
+        "$description": "Used for the default icon color. Can be paired with default text."
+      },
+      "subtle": {
+        "$value": {
+          "default": "{color.neutral.500}",
+          "dark": "{color.neutral.300}"
+        },
+        "$type": "color",
+        "$description": "Used for a static or decorational icon. Can be paired with subtle text."
+      },
+      "strong": {
+        "$value": {
+          "default": "{color.neutral.900}",
+          "dark": "{color.neutral.10}"
+        },
+        "$type": "color",
+        "$description": "Used for an icon with the highest contrast."
+      },
+      "disabled": {
+        "$value": {
+          "default": "{color.neutral.300}",
+          "dark": "{color.neutral.500}"
+        },
+        "$type": "color",
+        "$description": "Used for an icon within a disabled section."
+      },
+      "link": {
+        "$value": {
+          "default": "{color.blue.600}",
+          "dark": "{color.blue.300}"
+        },
+        "$type": "color",
+        "$description": "Used for an icon within a link."
+      },
+      "info": {
+        "$value": {
+          "default": "{color.blue.600}",
+          "dark": "{color.blue.300}"
+        },
+        "$type": "color",
+        "$description": "Used for an icon associated with information or help."
+      },
+      "warning": {
+        "$value": {
+          "default": "{color.orange.600}",
+          "dark": "{color.orange.300}"
+        },
+        "$type": "color",
+        "$description": "Used for an icon associated with a warning."
+      },
+      "danger": {
+        "$value": {
+          "default": "{color.red.600}",
+          "dark": "{color.red.300}"
+        },
+        "$type": "color",
+        "$description": "Used for an icon associated with an error or danger."
+      },
+      "success": {
+        "$value": {
+          "default": "{color.green.600}",
+          "dark": "{color.green.300}"
+        },
+        "$type": "color",
+        "$description": "Used for an icon associated with success or validity."
+      }
+    }
+  }
+}

package/src/tokens/line_height.tokens.json

@@ -0,0 +1,74 @@
+{
+  "line-height": {
+    "12": {
+      "$value": "12px",
+      "$type": "dimension",
+      "attributes": {
+        "category": "size"
+      }
+    },
+    "16": {
+      "$value": "16px",
+      "$type": "dimension",
+      "attributes": {
+        "category": "size"
+      }
+    },
+    "20": {
+      "$value": "20px",
+      "$type": "dimension",
+      "attributes": {
+        "category": "size"
+      }
+    },
+    "24": {
+      "$value": "24px",
+      "$type": "dimension",
+      "attributes": {
+        "category": "size"
+      }
+    },
+    "28": {
+      "$value": "28px",
+      "$type": "dimension",
+      "attributes": {
+        "category": "size"
+      }
+    },
+    "32": {
+      "$value": "32px",
+      "$type": "dimension",
+      "attributes": {
+        "category": "size"
+      }
+    },
+    "36": {
+      "$value": "36px",
+      "$type": "dimension",
+      "attributes": {
+        "category": "size"
+      }
+    },
+    "42": {
+      "$value": "42px",
+      "$type": "dimension",
+      "attributes": {
+        "category": "size"
+      }
+    },
+    "44": {
+      "$value": "44px",
+      "$type": "dimension",
+      "attributes": {
+        "category": "size"
+      }
+    },
+    "52": {
+      "$value": "52px",
+      "$type": "dimension",
+      "attributes": {
+        "category": "size"
+      }
+    }
+  }
+}

package/src/tokens/shadow.tokens.json

@@ -0,0 +1,14 @@
+{
+  "shadow": {
+    "color": {
+      "default": {
+        "$value": {
+          "default": "{color.alpha.dark.16}",
+          "dark": "{color.alpha.dark.24}"
+        },
+        "$type": "color",
+        "$description": "Used for the default shadow color."
+      }
+    }
+  }
+}