@gitlab/duo-ui 0.1.0 → 0.3.0

package/src/tokens/action.tokens.json

@@ -1,566 +0,0 @@
-{
-  "action": {
-    "disabled": {
-      "foreground": {
-        "color": {
-          "$value": {
-            "default": "{color.neutral.400}",
-            "dark": "{color.neutral.500}"
-          },
-          "$type": "color",
-          "$description": "Used for the foreground of a disabled action."
-        }
-      },
-      "background": {
-        "color": {
-          "$value": {
-            "default": "{color.neutral.50}",
-            "dark": "{color.neutral.900}"
-          },
-          "$type": "color",
-          "$description": "Used for the background of a disabled action."
-        }
-      },
-      "border": {
-        "color": {
-          "$value": {
-            "default": "{color.neutral.100}",
-            "dark": "{color.neutral.800}"
-          },
-          "$type": "color",
-          "$description": "Used for the border of a disabled action."
-        }
-      }
-    },
-    "selected": {
-      "foreground": {
-        "color": {
-          "default": {
-            "$value": {
-              "default": "{color.neutral.0}",
-              "dark": "{color.neutral.950}"
-            },
-            "$type": "color",
-            "$description": "Used for the foreground of a selected action in the default state."
-          },
-          "hover": {
-            "$value": "{action.selected.foreground.color.default}",
-            "$type": "color",
-            "$description": "Used for the foreground of a selected action in the hover state."
-          },
-          "focus": {
-            "$value": "{action.selected.foreground.color.hover}",
-            "$type": "color",
-            "$description": "Used for the foreground of a selected action in the focus state."
-          },
-          "active": {
-            "$value": "{action.selected.foreground.color.focus}",
-            "$type": "color",
-            "$description": "Used for the foreground of a selected action in the active state."
-          }
-        }
-      },
-      "background": {
-        "color": {
-          "default": {
-            "$value": {
-              "default": "{color.blue.500}",
-              "dark": "{color.blue.300}"
-            },
-            "$type": "color",
-            "$description": "Used for the background of a selected action in the default state."
-          },
-          "hover": {
-            "$value": {
-              "default": "{color.blue.700}",
-              "dark": "{color.blue.200}"
-            },
-            "$type": "color",
-            "$description": "Used for the background of a selected action in the hover state."
-          },
-          "focus": {
-            "$value": "{action.selected.background.color.hover}",
-            "$type": "color",
-            "$description": "Used for the background of a selected action in the focus state."
-          },
-          "active": {
-            "$value": {
-              "default": "{color.blue.800}",
-              "dark": "{color.blue.100}"
-            },
-            "$type": "color",
-            "$description": "Used for the background of a selected action in the active state."
-          }
-        }
-      },
-      "border": {
-        "color": {
-          "default": {
-            "$value": "{action.selected.background.color.default}",
-            "$type": "color",
-            "$description": "Used for the border of a selected action in the default state."
-          },
-          "hover": {
-            "$value": "{action.selected.background.color.hover}",
-            "$type": "color",
-            "$description": "Used for the border of a selected action in the hover state."
-          },
-          "focus": {
-            "$value": "{action.selected.background.color.focus}",
-            "$type": "color",
-            "$description": "Used for the border of a selected action in the focus state."
-          },
-          "active": {
-            "$value": "{action.selected.background.color.active}",
-            "$type": "color",
-            "$description": "Used for the border of a selected action in the active state."
-          }
-        }
-      }
-    },
-    "neutral": {
-      "foreground": {
-        "color": {
-          "default": {
-            "$value": {
-              "default": "{color.neutral.900}",
-              "dark": "{color.neutral.50}"
-            },
-            "$type": "color",
-            "$description": "Used for the foreground of a neutral action in the default state."
-          },
-          "hover": {
-            "$value": "{action.neutral.foreground.color.default}",
-            "$type": "color",
-            "$description": "Used for the foreground of a neutral action in the hover state."
-          },
-          "focus": {
-            "$value": "{action.neutral.foreground.color.default}",
-            "$type": "color",
-            "$description": "Used for the foreground of a neutral action in the focus state."
-          },
-          "active": {
-            "$value": "{action.neutral.foreground.color.default}",
-            "$type": "color",
-            "$description": "Used for the foreground of a neutral action in the active state."
-          }
-        }
-      },
-      "background": {
-        "color": {
-          "default": {
-            "$value": {
-              "default": "rgba(164, 163, 168, 0.0)",
-              "dark": "rgba(137, 136, 141, 0.0)"
-            },
-            "$type": "color",
-            "$description": "Used for the background of a neutral action in the default state."
-          },
-          "hover": {
-            "$value": {
-              "default": "rgba(164, 163, 168, 0.16)",
-              "dark": "rgba(137, 136, 141, 0.4)"
-            },
-            "$type": "color",
-            "$description": "Used for the background of a neutral action in the hover state."
-          },
-          "focus": {
-            "$value": "{action.neutral.background.color.hover}",
-            "$type": "color",
-            "$description": "Used for the background of a neutral action in the focus state."
-          },
-          "active": {
-            "$value": {
-              "default": "rgba(83, 81, 88, 0.24)",
-              "dark": "rgba(137, 136, 141, 0.16)"
-            },
-            "$type": "color",
-            "$description": "Used for the background of a neutral action in the active state."
-          }
-        }
-      },
-      "border": {
-        "color": {
-          "default": {
-            "$value": "{color.alpha.0}",
-            "$type": "color",
-            "$description": "Used for the border of a neutral action in the default state."
-          },
-          "hover": {
-            "$value": "{action.neutral.border.color.default}",
-            "$type": "color",
-            "$description": "Used for the border of a neutral action in the hover state."
-          },
-          "focus": {
-            "$value": "{action.neutral.border.color.default}",
-            "$type": "color",
-            "$description": "Used for the border of a neutral action in the focus state."
-          },
-          "active": {
-            "$value": "{action.neutral.border.color.default}",
-            "$type": "color",
-            "$description": "Used for the border of a neutral action in the active state."
-          }
-        }
-      }
-    },
-    "confirm": {
-      "foreground": {
-        "color": {
-          "default": {
-            "$value": {
-              "default": "{color.blue.500}",
-              "dark": "{color.blue.400}"
-            },
-            "$type": "color",
-            "$description": "Used for the foreground of a confirm (positive) action in the default state."
-          },
-          "hover": {
-            "$value": {
-              "default": "{color.blue.700}",
-              "dark": "{color.blue.200}"
-            },
-            "$type": "color",
-            "$description": "Used for the foreground of a confirm (positive) action in the hover state."
-          },
-          "focus": {
-            "$value": "{action.confirm.foreground.color.hover}",
-            "$type": "color",
-            "$description": "Used for the foreground of a confirm (positive) action in the focus state."
-          },
-          "active": {
-            "$value": {
-              "default": "{color.blue.900}",
-              "dark": "{color.blue.50}"
-            },
-            "$type": "color",
-            "$description": "Used for the foreground of a confirm (positive) action in the active state."
-          }
-        }
-      },
-      "background": {
-        "color": {
-          "default": {
-            "$value": {
-              "default": "rgba(99, 166, 233, 0.0)",
-              "dark": "rgba(66, 143, 220, 0.0)"
-            },
-            "$type": "color",
-            "$description": "Used for the background of a confirm (positive) action in the default state."
-          },
-          "hover": {
-            "$value": {
-              "default": "rgba(99, 166, 233, 0.16)",
-              "dark": "rgba(66, 143, 220, 0.4)"
-            },
-            "$type": "color",
-            "$description": "Used for the background of a confirm (positive) action in the hover state."
-          },
-          "focus": {
-            "$value": "{action.confirm.background.color.hover}",
-            "$type": "color",
-            "$description": "Used for the background of a confirm (positive) action in the focus state."
-          },
-          "active": {
-            "$value": {
-              "default": "rgba(11, 92, 173, 0.24)",
-              "dark": "rgba(66, 143, 220, 0.16)"
-            },
-            "$type": "color",
-            "$description": "Used for the background of a confirm (positive) action in the active state."
-          }
-        }
-      },
-      "border": {
-        "color": {
-          "default": {
-            "$value": "{color.alpha.0}",
-            "$type": "color",
-            "$description": "Used for the border of a confirm action in the default state."
-          },
-          "hover": {
-            "$value": "{action.confirm.border.color.default}",
-            "$type": "color",
-            "$description": "Used for the border of a confirm action in the hover state."
-          },
-          "focus": {
-            "$value": "{action.confirm.border.color.default}",
-            "$type": "color",
-            "$description": "Used for the border of a confirm action in the focus state."
-          },
-          "active": {
-            "$value": "{action.confirm.border.color.default}",
-            "$type": "color",
-            "$description": "Used for the border of a confirm action in the active state."
-          }
-        }
-      }
-    },
-    "danger": {
-      "foreground": {
-        "color": {
-          "default": {
-            "$value": {
-              "default": "{color.red.500}",
-              "dark": "{color.red.400}"
-            },
-            "$type": "color",
-            "$description": "Used for the foreground of a danger (destructive) action in the default state."
-          },
-          "hover": {
-            "$value": {
-              "default": "{color.red.700}",
-              "dark": "{color.red.200}"
-            },
-            "$type": "color",
-            "$description": "Used for the foreground of a danger (destructive) action in the hover state."
-          },
-          "focus": {
-            "$value": "{action.danger.foreground.color.hover}",
-            "$type": "color",
-            "$description": "Used for the foreground of a danger (destructive) action in the focus state."
-          },
-          "active": {
-            "$value": {
-              "default": "{color.red.900}",
-              "dark": "{color.red.50}"
-            },
-            "$type": "color",
-            "$description": "Used for the foreground of a danger (destructive) action in the active state."
-          }
-        }
-      },
-      "background": {
-        "color": {
-          "default": {
-            "$value": {
-              "default": "rgba(245, 127, 108, 0.0)",
-              "dark": "rgba(236, 89, 65, 0.0)"
-            },
-            "$type": "color",
-            "$description": "Used for the background of a danger (destructive) action in the default state."
-          },
-          "hover": {
-            "$value": {
-              "default": "rgba(245, 127, 108, 0.16)",
-              "dark": "rgba(236, 89, 65, 0.4)"
-            },
-            "$type": "color",
-            "$description": "Used for the background of a danger (destructive) action in the hover state."
-          },
-          "focus": {
-            "$value": "{action.danger.background.color.hover}",
-            "$type": "color",
-            "$description": "Used for the background of a danger (destructive) action in the focus state."
-          },
-          "active": {
-            "$value": {
-              "default": "rgba(174, 24, 0, 0.24)",
-              "dark": "rgba(236, 89, 65, 0.16)"
-            },
-            "$type": "color",
-            "$description": "Used for the background of a danger (destructive) action in the active state."
-          }
-        }
-      },
-      "border": {
-        "color": {
-          "default": {
-            "$value": "{color.alpha.0}",
-            "$type": "color",
-            "$description": "Used for the border of a danger action in the default state."
-          },
-          "hover": {
-            "$value": "{action.danger.border.color.default}",
-            "$type": "color",
-            "$description": "Used for the border of a danger action in the hover state."
-          },
-          "focus": {
-            "$value": "{action.danger.border.color.default}",
-            "$type": "color",
-            "$description": "Used for the border of a danger action in the focus state."
-          },
-          "active": {
-            "$value": "{action.danger.border.color.default}",
-            "$type": "color",
-            "$description": "Used for the border of a danger action in the active state."
-          }
-        }
-      }
-    },
-    "strong": {
-      "confirm": {
-        "background": {
-          "color": {
-            "default": {
-              "$value": {
-                "default": "{color.blue.500}",
-                "dark": "{color.blue.400}"
-              },
-              "$type": "color",
-              "$description": "Used for the background of a strong confirm action in the default state."
-            },
-            "hover": {
-              "$value": {
-                "default": "{color.blue.600}",
-                "dark": "{color.blue.300}"
-              },
-              "$type": "color",
-              "$description": "Used for the background of a strong confirm action in the hover state."
-            },
-            "focus": {
-              "$value": "{action.strong.confirm.background.color.hover}",
-              "$type": "color",
-              "$description": "Used for the background of a strong confirm action in the focus state."
-            },
-            "active": {
-              "$value": {
-                "default": "{color.blue.700}",
-                "dark": "{color.blue.200}"
-              },
-              "$type": "color",
-              "$description": "Used for the background of a strong confirm action in the active state."
-            }
-          }
-        },
-        "foreground": {
-          "color": {
-            "default": {
-              "$value": {
-                "default": "{color.neutral.0}",
-                "dark": "{color.neutral.950}"
-              },
-              "$type": "color",
-              "$description": "Used for the foreground of a strong confirm action in the default state."
-            },
-            "hover": {
-              "$value": "{action.strong.confirm.foreground.color.default}",
-              "$type": "color",
-              "$description": "Used for the foreground of a strong confirm action in the hover state."
-            },
-            "focus": {
-              "$value": "{action.strong.confirm.foreground.color.hover}",
-              "$type": "color",
-              "$description": "Used for the foreground of a strong confirm action in the focus state."
-            },
-            "active": {
-              "$value": "{action.strong.confirm.foreground.color.focus}",
-              "$type": "color",
-              "$description": "Used for the foreground of a strong confirm action in the active state."
-            }
-          }
-        },
-        "border": {
-          "color": {
-            "default": {
-              "$value": "{color.alpha.0}",
-              "$type": "color",
-              "$description": "Used for the border of a strong confirm action in the default state."
-            },
-            "hover": {
-              "$value": "{action.strong.confirm.border.color.default}",
-              "$type": "color",
-              "$description": "Used for the border of a strong confirm action in the hover state."
-            },
-            "focus": {
-              "$value": "{action.strong.confirm.border.color.hover}",
-              "$type": "color",
-              "$description": "Used for the border of a strong confirm action in the focus state."
-            },
-            "active": {
-              "$value": "{action.strong.confirm.border.color.focus}",
-              "$type": "color",
-              "$description": "Used for the border of a strong confirm action in the active state."
-            }
-          }
-        }
-      },
-      "neutral": {
-        "background": {
-          "color": {
-            "default": {
-              "$value": {
-                "default": "{color.neutral.600}",
-                "dark": "{color.neutral.700}"
-              },
-              "$type": "color",
-              "$description": "Used for the background of a strong neutral action in the default state."
-            },
-            "hover": {
-              "$value": {
-                "default": "{color.neutral.700}",
-                "dark": "{color.neutral.600}"
-              },
-              "$type": "color",
-              "$description": "Used for the background of a strong neutral action in the hover state."
-            },
-            "focus": {
-              "$value": "{action.strong.neutral.background.color.hover}",
-              "$type": "color",
-              "$description": "Used for the background of a strong neutral action in the focus state."
-            },
-            "active": {
-              "$value": {
-                "default": "{color.neutral.800}",
-                "dark": "{color.neutral.500}"
-              },
-              "$type": "color",
-              "$description": "Used for the background of a strong neutral action in the active state."
-            }
-          }
-        },
-        "foreground": {
-          "color": {
-            "default": {
-              "$value": {
-                "default": "{color.neutral.0}",
-                "dark": "{color.neutral.50}"
-              },
-              "$type": "color",
-              "$description": "Used for the foreground of a strong neutral action in the default state."
-            },
-            "hover": {
-              "$value": "{action.strong.neutral.foreground.color.default}",
-              "$type": "color",
-              "$description": "Used for the foreground of a strong neutral action in the hover state."
-            },
-            "focus": {
-              "$value": "{action.strong.neutral.foreground.color.hover}",
-              "$type": "color",
-              "$description": "Used for the foreground of a strong neutral action in the focus state."
-            },
-            "active": {
-              "$value": "{action.strong.neutral.foreground.color.focus}",
-              "$type": "color",
-              "$description": "Used for the foreground of a strong neutral action in the active state."
-            }
-          }
-        },
-        "border": {
-          "color": {
-            "default": {
-              "$value": "{color.alpha.0}",
-              "$type": "color",
-              "$description": "Used for the border of a strong neutral action in the default state."
-            },
-            "hover": {
-              "$value": "{action.strong.neutral.border.color.default}",
-              "$type": "color",
-              "$description": "Used for the border of a strong neutral action in the hover state."
-            },
-            "focus": {
-              "$value": "{action.strong.neutral.border.color.hover}",
-              "$type": "color",
-              "$description": "Used for the border of a strong neutral action in the focus state."
-            },
-            "active": {
-              "$value": "{action.strong.neutral.border.color.focus}",
-              "$type": "color",
-              "$description": "Used for the border of a strong neutral action in the active state."
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/src/tokens/background.tokens.json

@@ -1,62 +0,0 @@
-{
-  "background": {
-    "color": {
-      "default": {
-        "$value": {
-          "default": "{color.neutral.0}",
-          "dark": "{color.neutral.950}"
-        },
-        "$type": "color",
-        "$description": "Used for the default background color."
-      },
-      "subtle": {
-        "$value": {
-          "default": "{color.neutral.10}",
-          "dark": "{color.neutral.900}"
-        },
-        "$type": "color",
-        "$description": "Used to slightly differentiate the background from the default."
-      },
-      "strong": {
-        "$value": {
-          "default": "{color.neutral.50}",
-          "dark": "{color.neutral.800}"
-        },
-        "$type": "color",
-        "$description": "Used to make the background easily stand out from the default."
-      },
-      "disabled": {
-        "$value": {
-          "default": "{color.neutral.10}",
-          "dark": "{color.neutral.900}"
-        },
-        "$type": "color",
-        "$description": "Used to identify a disabled section."
-      },
-      "overlap": {
-        "$value": {
-          "default": "{color.neutral.0}",
-          "dark": "{color.neutral.900}"
-        },
-        "$type": "color",
-        "$description": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content."
-      },
-      "section": {
-        "$value": {
-          "default": "{color.neutral.0}",
-          "dark": "{color.neutral.800}"
-        },
-        "$type": "color",
-        "$description": "Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes."
-      },
-      "overlay": {
-        "$value": {
-          "default": "{color.alpha.dark.24}",
-          "dark": "rgba(0,0,0,0.64)"
-        },
-        "$type": "color",
-        "$description": "Used for an overlay that covers other content."
-      }
-    }
-  }
-}

package/src/tokens/border.tokens.json

@@ -1,43 +0,0 @@
-{
-  "border": {
-    "color": {
-      "default": {
-        "$value": {
-          "default": "{color.neutral.100}",
-          "dark": "{color.neutral.800}"
-        },
-        "$type": "color",
-        "$description": "Used for the default border color."
-      },
-      "subtle": {
-        "$value": {
-          "default": "{color.neutral.50}",
-          "dark": "{color.neutral.900}"
-        },
-        "$type": "color",
-        "$description": "Used for a subtle border in combination with the default background."
-      },
-      "strong": {
-        "$value": {
-          "default": "{color.neutral.400}",
-          "dark": "{color.neutral.400}"
-        },
-        "$type": "color",
-        "$description": "Used for a distinct border that emphasizes an edge or boundaries."
-      },
-      "section": {
-        "$value": {
-          "default": "{border.color.default}",
-          "dark": "{background.color.default}"
-        },
-        "$type": "color",
-        "$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page."
-      },
-      "transparent": {
-        "$value": "{color.alpha.0}",
-        "$type": "color",
-        "$description": "Used when a border needs to be present, but not visibly perceived."
-      }
-    }
-  }
-}