gradio

1
<script>
2
	// @ts-nocheck
3
	import { Meta, Story } from "@storybook/addon-svelte-csf";
4
	import RadiusRow from "../helpers/RadiusRow.svelte";
5

6
	const radiiTokens = [
7
		{ tokenName: "--radius-xxs", value: "1px" },
8
		{ tokenName: "--radius-xs", value: "2px" },
9
		{ tokenName: "--radius-sm", value: "4px" },
10
		{ tokenName: "--radius-md", value: "6px" },
11
		{ tokenName: "--radius-lg", value: "8px" },
12
		{ tokenName: "--radius-xl", value: "12px" },
13
		{ tokenName: "--radius-xxl", value: "22px" }
14
	];
15
</script>
16

17
<Meta title="Design System/Radius" />
18

19
<Story name="Radius">
20
	<div class="wrapper">
21
		<section>
22
			<h1>Radii</h1>
23
		</section>
24
		<div class="container">
25
			<table>
26
				<thead>
27
					<tr>
28
						<th>Token Name</th>
29
						<th>Value</th>
30
						<th>Example</th>
31
					</tr>
32
				</thead>
33

34
				{#each radiiTokens as radius}
35
					<RadiusRow {radius} />
36
				{/each}
37
			</table>
38
		</div>
39
	</div>
40
</Story>
41

42
<style>
43
	.wrapper {
44
		display: flex;
45
		flex-direction: column;
46
		align-items: center;
47
		font-family: var(--font);
48
	}
49

50
	section {
51
		background: #fb923c;
52
		height: 50px;
53
		width: 90%;
54
		display: flex;
55
		align-items: center;
56
		border-radius: 15px;
57
		padding: 50px;
58
		margin: 20px;
59
	}
60

61
	section h1 {
62
		color: white;
63
		font-weight: 700;
64
		font-size: 3em;
65
	}
66
	.container {
67
		width: 90%;
68
		display: flex;
69
		justify-content: center;
70
		align-items: center;
71
	}
72

73
	table {
74
		border-collapse: separate;
75
		width: 100%;
76
		border-spacing: 2em;
77
	}
78

79
	tr {
80
		margin: 10px;
81
		font: var(--font-sans);
82
		color: var(--block-title-text-color);
83
		font-weight: var(--block-title-text-weight);
84
		font-size: var(--block-title-text-size);
85
	}
86
</style>
87