data-color

() => {
   return (
     <DialogRoot size="md" data-color="critical">
        <DialogTrigger asChild data-color="critical">
          <Button size="md">
            Open (medium size)
          </Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle 
              flexDirection="row" 
              display="flex" 
              alignItems="center" 
              gap="1"> 
            <FavouriteFill30Icon />
              Dialog Title
            </DialogTitle>
          </DialogHeader>
          <DialogBody>
            <Stack gap="2">
            <Badge 
              width="fit-content"   
              icon={StarsOutline18Icon}> 
                Badge 
              </Badge>
            <Text> 
              Hei på dere, Designere!
            </Text>
            <Textarea 
              label="Dette er et eksempel på en mellomlang venstrestilt." 
              placeholder="Skriv inn tekst her."/>
              <Flex gap={2} flexWrap="wrap">
                <PressableCard 
                  variant="floating" 
                  onClick={() => console.log} 
                  padding={4}>
                    Pressable card floating
                </PressableCard>
                <PressableCard 
                  variant="core" 
                  onClick={() => console.log} 
                  padding={4}>
                    Pressable card core
                </PressableCard>
                <PressableCard 
                  variant="accent" 
                  onClick={() => console.log} 
                  padding={4}>
                    Pressable card accent
                </PressableCard>
              </Flex>
              <Accordion width="100%" collapsible>
                <ExpandableItem 
                  value="a" 
                  title="When to use accordion?">
                    Contennt
                </ExpandableItem>
                <ExpandableItem 
                  value="b" 
                  title="When to use expandable?">
                    Content
                </ExpandableItem>
              </Accordion>
              <Alert closable> Dette er en alert! </Alert>
            </Stack>
          </DialogBody>
          <DialogFooter>
            <DialogActionTrigger asChild>
              <Button variant="tertiary">Lukk</Button>
            </DialogActionTrigger>
            <DialogActionTrigger asChild>
              <Button variant="primary">Ok</Button>
            </DialogActionTrigger>
          </DialogFooter>
        </DialogContent>
      </DialogRoot>
   )
}