add changeset

playgrounds/demo/demo.css

@@ -1,246 +1,3 @@
-body {
+h1 {
-	--bg-1: hsl(0, 0%, 100%);
+	font-family: 'Cairo';
-	--bg-2: hsl(206, 20%, 90%);
+}
-	--bg-3: hsl(206, 20%, 80%);
-	--fg-1: hsl(0, 0%, 13%);
-	--fg-2: hsl(0, 0%, 20%);
-	--fg-2: hsl(0, 0%, 30%);
-	--link: hsl(208, 77%, 47%);
-	--link-hover: hsl(208, 77%, 55%);
-	--link-active: hsl(208, 77%, 40%);
-	--border-radius: 4px;
-	--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-		'Open Sans', 'Helvetica Neue', sans-serif;
-	--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
-		monospace;
-	background: var(--bg-1);
-	color: var(--fg-1);
-	font-family: var(--font);
-	line-height: 1.5;
-	margin: 1rem;
-	height: calc(100vh - 2rem);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	font-weight: normal;
-	font-variant-numeric: tabular-nums;
-	line-height: 1.1;
-}
-
-:is(h1, h2, h3, h4, h5, h6, p) {
-	margin: 1rem 0.1rem;
-}
-
-label {
-	margin: 0.5rem 0.1rem;
-}
-
-:is(h1, h2, h3, h4, h5, h6, p, label):first-child {
-	margin-top: 0;
-}
-
-:is(h1, h2, h3, h4, h5, h6, p, label):last-child {
-	margin-bottom: 0;
-}
-
-a {
-	color: var(--link);
-}
-
-a:hover {
-	color: var(--link-hover);
-}
-
-a:active {
-	color: var(--link-active);
-}
-
-label {
-	display: flex;
-	gap: 0.5rem;
-	align-items: center;
-}
-
-label input {
-	margin: 0;
-}
-
-button,
-input,
-select {
-	font-family: inherit;
-	font-size: inherit;
-}
-
-button {
-	background: var(--link);
-	color: var(--bg-1);
-	padding: 0.5rem 1rem;
-	border: none;
-	border-radius: var(--border-radius);
-}
-
-button:hover {
-	background: var(--link-hover);
-}
-
-button:active {
-	background: var(--link-active);
-}
-
-:is(button, button:hover, button:active):disabled {
-	background: var(--link);
-	filter: grayscale(1);
-	opacity: 0.4;
-}
-
-input,
-textarea,
-select {
-	padding: 0.5rem;
-	border: 1px solid var(--bg-2);
-	border-radius: var(--border-radius);
-	box-sizing: border-box;
-}
-
-input,
-textarea {
-	background: var(--bg-1);
-}
-
-select:not([multiple]) {
-	background: var(--bg-2);
-}
-
-textarea {
-	font-family: var(--font-mono);
-	font-size: 0.9rem;
-}
-
-form {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	align-items: baseline;
-}
-
-ul:has(li):has(form) {
-	list-style: none;
-	padding: 0;
-}
-
-li form {
-	flex-direction: row;
-	gap: 0.5rem;
-	margin: 0.5rem 0;
-}
-
-nav {
-	position: relative;
-	display: flex;
-	gap: 1em;
-	padding: 1em;
-	background: var(--bg-2);
-	z-index: 2;
-	margin: 0 0 1em 0;
-	border-radius: var(--border-radius);
-}
-
-nav a {
-	text-decoration: none;
-}
-
-nav a[aria-current='true'] {
-	border-bottom: 2px solid;
-}
-
-ul:has(form) {
-	list-style: none;
-	padding: 0;
-}
-
-progress {
-	margin: 0.5rem 0;
-}
-
-progress:first-child {
-	margin-top: 0;
-}
-
-progress:lsat-child {
-	margin-bottom: 0;
-}
-
-.error {
-	color: red;
-}
-
-code {
-	background: var(--bg-2);
-	font-family: var(--font-mono);
-	font-size: 0.9em;
-	padding: 0.15rem 0.3rem;
-	border-radius: var(--border-radius);
-}
-
-ul.todos {
-	padding: 0;
-}
-
-ul.todos li:not(:has(> form)),
-ul.todos li form {
-	position: relative;
-	display: flex;
-	align-items: center;
-	padding: 0.5em 0.5em 0.5em 1em;
-	margin: 0 0 0.5em 0;
-	gap: 0.5em;
-	border-radius: 5px;
-	user-select: none;
-	background: var(--bg-1);
-	filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.1));
-	transition:
-		filter 0.2s,
-		opacity 0.2s;
-}
-
-ul.todos .done {
-	filter: none;
-	opacity: 0.4;
-}
-
-ul.todos button {
-	border: none;
-	background-color: transparent;
-	background-repeat: no-repeat;
-	background-position: 50% 50%;
-	background-size: 1rem 1rem;
-	cursor: pointer;
-	width: 3em;
-	height: 3em;
-	margin: -0.5em -0.5em -0.5em 0;
-	aspect-ratio: 1;
-	opacity: 0.5;
-	transition: opacity 0.2s;
-}
-
-ul.todos button:hover {
-	opacity: 1;
-}
-
-body.dark {
-	--bg-1: hsl(0, 0%, 18%);
-	--bg-2: hsl(0, 0%, 30%);
-	--bg-3: hsl(0, 0%, 40%);
-	--fg-1: hsl(0, 0%, 90%);
-	--fg-2: hsl(0, 0%, 70%);
-	--fg-3: hsl(0, 0%, 60%);
-	--link: hsl(206, 96%, 72%);
-	--link-hover: hsl(206, 96%, 78%);
-	--link-active: hsl(206, 96%, 64%);
-}