clan-app: Symlink more stuff from ui to ui-2d
This commit is contained in:
Qubasa
1
pkgs/clan-app/ui-2d/.storybook
Symbolic link
1
pkgs/clan-app/ui-2d/.storybook
Symbolic link
@@ -0,0 +1 @@
|
||||
../ui/.storybook
|
||||
@@ -1,34 +0,0 @@
|
||||
import { createRequire } from "module";
|
||||
import { dirname, join } from "path";
|
||||
import { mergeConfig } from "vite";
|
||||
import type { StorybookConfig } from "@kachurun/storybook-solid-vite";
|
||||
|
||||
const require = createRequire(import.meta.url);
|
||||
const getAbsolutePath = (pkg: string) =>
|
||||
dirname(require.resolve(join(pkg, "package.json")));
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ["../src/components/**/*.mdx", "../src/components/**/*.stories.tsx"],
|
||||
addons: [
|
||||
getAbsolutePath("@storybook/addon-links"),
|
||||
getAbsolutePath("@storybook/addon-essentials"),
|
||||
getAbsolutePath("@storybook/addon-interactions"),
|
||||
],
|
||||
framework: {
|
||||
name: "@kachurun/storybook-solid-vite",
|
||||
options: {},
|
||||
},
|
||||
async viteFinal(config) {
|
||||
return mergeConfig(config, {
|
||||
define: { "process.env": {} },
|
||||
});
|
||||
},
|
||||
docs: {
|
||||
autodocs: "tag",
|
||||
},
|
||||
core: {
|
||||
disableTelemetry: true,
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -1,5 +0,0 @@
|
||||
html {
|
||||
/* revert this which only makes sense when rendering inside the clan app webview */
|
||||
overflow-x: revert;
|
||||
overflow-y: revert;
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import type { Preview } from "@kachurun/storybook-solid";
|
||||
|
||||
import "@/src/components/v2/index.css";
|
||||
import "../src/index.css";
|
||||
import "./preview.css";
|
||||
|
||||
export const preview: Preview = {
|
||||
tags: ["autodocs"],
|
||||
parameters: {
|
||||
docs: { toc: true },
|
||||
backgrounds: {
|
||||
values: [
|
||||
{ name: "Dark", value: "#333" },
|
||||
{ name: "Light", value: "#ffffff" },
|
||||
],
|
||||
default: "Light",
|
||||
},
|
||||
// automatically create action args for all props that start with "on"
|
||||
actions: { argTypesRegex: "^on.*" },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default preview;
|
||||
@@ -1,12 +0,0 @@
|
||||
import type { TestRunnerConfig } from "@storybook/test-runner";
|
||||
|
||||
const config: TestRunnerConfig = {
|
||||
async postVisit(page, context) {
|
||||
// the #storybook-root element wraps the story. In Storybook 6.x, the selector is #root
|
||||
const elementHandler = await page.$("#storybook-root");
|
||||
const innerHTML = await elementHandler.innerHTML();
|
||||
expect(innerHTML).toMatchSnapshot();
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
14253
pkgs/clan-app/ui-2d/package-lock.json
generated
14253
pkgs/clan-app/ui-2d/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,78 +0,0 @@
|
||||
{
|
||||
"name": "@clan/ui",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"dev": "vite",
|
||||
"build": "npm run check && npm run test && vite build && npm run convert-html",
|
||||
"convert-html": "node gtk.webview.js",
|
||||
"serve": "vite preview",
|
||||
"check": "tsc --noEmit --skipLibCheck && eslint ./src",
|
||||
"test": "vitest run --typecheck",
|
||||
"storybook": "storybook",
|
||||
"storybook-build": "storybook build",
|
||||
"storybook-dev": "storybook dev -p 6006",
|
||||
"test-storybook": "test-storybook --browsers chromium --ci",
|
||||
"test-storybook-update-snapshots": "npm run test-storybook -- --updateSnapshot",
|
||||
"test-storybook-static": "npm run storybook-build && concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'http-server storybook-static --port 6006 --silent' 'wait-on tcp:127.0.0.1:6006 && npm run test-storybook'"
|
||||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@babel/plugin-syntax-import-attributes": "^7.27.1",
|
||||
"@eslint/js": "^9.3.0",
|
||||
"@kachurun/storybook-solid": "^8.6.7",
|
||||
"@kachurun/storybook-solid-vite": "^8.6.7",
|
||||
"@storybook/addon-essentials": "^8.6.14",
|
||||
"@storybook/addon-interactions": "^8.6.14",
|
||||
"@storybook/addon-links": "^8.6.14",
|
||||
"@storybook/addon-viewport": "^8.6.14",
|
||||
"@storybook/builder-vite": "^8.6.14",
|
||||
"@storybook/test-runner": "^0.22.0",
|
||||
"@tailwindcss/typography": "^0.5.13",
|
||||
"@types/json-schema": "^7.0.15",
|
||||
"@types/node": "^22.15.19",
|
||||
"@types/three": "^0.176.0",
|
||||
"@typescript-eslint/parser": "^8.32.1",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"classnames": "^2.5.1",
|
||||
"concurrently": "^9.1.2",
|
||||
"eslint": "^9.27.0",
|
||||
"eslint-plugin-tailwindcss": "^3.17.0",
|
||||
"http-server": "^14.1.1",
|
||||
"jsdom": "^26.1.0",
|
||||
"postcss": "^8.4.38",
|
||||
"postcss-url": "^10.1.3",
|
||||
"prettier": "^3.2.5",
|
||||
"solid-devtools": "^0.34.0",
|
||||
"storybook": "^8.6.14",
|
||||
"storybook-addon-pseudo-states": "^4.0.3",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"typescript": "^5.4.5",
|
||||
"typescript-eslint": "^8.32.1",
|
||||
"vite": "^6.3.5",
|
||||
"vite-plugin-solid": "^2.8.2",
|
||||
"vite-plugin-solid-svg": "^0.8.1",
|
||||
"vitest": "^3.1.4",
|
||||
"wait-on": "^8.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.6.8",
|
||||
"@kobalte/core": "^0.13.10",
|
||||
"@kobalte/tailwindcss": "^0.9.0",
|
||||
"@modular-forms/solid": "^0.25.1",
|
||||
"@solid-primitives/storage": "^4.3.2",
|
||||
"@solidjs/router": "^0.15.3",
|
||||
"@storybook/test": "^8.6.14",
|
||||
"@tanstack/eslint-plugin-query": "^5.51.12",
|
||||
"@tanstack/solid-query": "^5.76.0",
|
||||
"corvu": "^0.7.1",
|
||||
"material-icons": "^1.13.12",
|
||||
"nanoid": "^5.0.7",
|
||||
"solid-js": "^1.9.7",
|
||||
"solid-markdown": "^2.0.13",
|
||||
"solid-toast": "^0.5.0",
|
||||
"three": "^0.176.0"
|
||||
}
|
||||
}
|
||||
@@ -1,970 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Components/RemoteForm Disabled smoke-test 1`] = `
|
||||
<div class="max-w-2xl p-6">
|
||||
<h2 class="mb-6 text-2xl font-bold">
|
||||
Remote Configuration
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-10 items-center">
|
||||
<div class="col-span-5 flex items-center">
|
||||
<label class="flex items-center gap-1 col-span-2"
|
||||
error="false"
|
||||
help="Username to connect as on the remote server"
|
||||
>
|
||||
<span class="flex flex-col justify-center">
|
||||
<span>
|
||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
||||
User
|
||||
</span>
|
||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
||||
*
|
||||
</span>
|
||||
<span class=" inline px-2"
|
||||
data-tip="Username to connect as on the remote server"
|
||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="0.8125rem"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
class="inline fg-def-3"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-span-5">
|
||||
<div tabindex="0"
|
||||
role="textbox"
|
||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
||||
aria-invalid="false"
|
||||
aria-disabled="true"
|
||||
>
|
||||
<input tabindex="-1"
|
||||
class="w-full bg-transparent outline-none"
|
||||
type="text"
|
||||
placeholder="username"
|
||||
required
|
||||
disabled
|
||||
aria-invalid="false"
|
||||
aria-disabled="true"
|
||||
error="false"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-10 items-center">
|
||||
<div class="col-span-5 flex items-center">
|
||||
<label class="flex items-center gap-1 col-span-2"
|
||||
error="false"
|
||||
help="The hostname or IP address of the remote server"
|
||||
>
|
||||
<span class="flex flex-col justify-center">
|
||||
<span>
|
||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
||||
Address
|
||||
</span>
|
||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
||||
*
|
||||
</span>
|
||||
<span class=" inline px-2"
|
||||
data-tip="The hostname or IP address of the remote server"
|
||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="0.8125rem"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
class="inline fg-def-3"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-span-5">
|
||||
<div tabindex="0"
|
||||
role="textbox"
|
||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
||||
aria-invalid="false"
|
||||
aria-disabled="true"
|
||||
>
|
||||
<input tabindex="-1"
|
||||
class="w-full bg-transparent outline-none"
|
||||
type="text"
|
||||
placeholder="hostname or IP address"
|
||||
required
|
||||
disabled
|
||||
aria-invalid="false"
|
||||
aria-disabled="true"
|
||||
error="false"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="0"
|
||||
class="accordion mt-6"
|
||||
>
|
||||
<div class="accordion__title">
|
||||
<button class="button button--ghost-hover button--ghost-focus button--ghost-active button button--small">
|
||||
<span class="text-inherit fnt-label-s fnt-weight-medium button__label">
|
||||
Advanced Options
|
||||
</span>
|
||||
<span class="button__icon--end">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="12"
|
||||
height="12"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
size="12"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M40.25 15H7v4.75h4.75v4.75h4.75v4.75h4.75V34H26v-4.75h4.75V24.5h4.75v-4.75h4.75z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end pt-4">
|
||||
<button type="button"
|
||||
disabled
|
||||
data-disabled
|
||||
class="min-w-24 button default primary"
|
||||
>
|
||||
<div class="loader primary">
|
||||
<div class="wrapper">
|
||||
<div class="parent">
|
||||
</div>
|
||||
</div>
|
||||
<div class="child">
|
||||
</div>
|
||||
</div>
|
||||
<span class="typography text-inherit font-family-mono font-weight-bold font-size-default label font-label">
|
||||
Save
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<details class="mt-8">
|
||||
<summary class="cursor-pointer font-semibold">
|
||||
Current Form Data (Debug)
|
||||
</summary>
|
||||
<pre class="mt-2 overflow-auto rounded bg-gray-100 p-4 text-sm">
|
||||
{
|
||||
"address": "example.com",
|
||||
"user": "admin",
|
||||
"command_prefix": "sudo",
|
||||
"port": 22,
|
||||
"password": "",
|
||||
"forward_agent": true,
|
||||
"host_key_check": 1,
|
||||
"verbose_ssh": false,
|
||||
"ssh_options": {
|
||||
"StrictHostKeyChecking": "no",
|
||||
"UserKnownHostsFile": "/dev/null"
|
||||
},
|
||||
"tor_socks": false
|
||||
}
|
||||
</pre>
|
||||
</details>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Components/RemoteForm Empty smoke-test 1`] = `
|
||||
<div class="max-w-2xl p-6">
|
||||
<h2 class="mb-6 text-2xl font-bold">
|
||||
Remote Configuration
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-10 items-center">
|
||||
<div class="col-span-5 flex items-center">
|
||||
<label class="flex items-center gap-1 col-span-2"
|
||||
error="false"
|
||||
help="Username to connect as on the remote server"
|
||||
>
|
||||
<span class="flex flex-col justify-center">
|
||||
<span>
|
||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
||||
User
|
||||
</span>
|
||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
||||
*
|
||||
</span>
|
||||
<span class=" inline px-2"
|
||||
data-tip="Username to connect as on the remote server"
|
||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="0.8125rem"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
class="inline fg-def-3"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-span-5">
|
||||
<div tabindex="0"
|
||||
role="textbox"
|
||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
>
|
||||
<input tabindex="-1"
|
||||
class="w-full bg-transparent outline-none"
|
||||
type="text"
|
||||
placeholder="username"
|
||||
required
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
error="false"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-10 items-center">
|
||||
<div class="col-span-5 flex items-center">
|
||||
<label class="flex items-center gap-1 col-span-2"
|
||||
error="false"
|
||||
help="The hostname or IP address of the remote server"
|
||||
>
|
||||
<span class="flex flex-col justify-center">
|
||||
<span>
|
||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
||||
Address
|
||||
</span>
|
||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
||||
*
|
||||
</span>
|
||||
<span class=" inline px-2"
|
||||
data-tip="The hostname or IP address of the remote server"
|
||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="0.8125rem"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
class="inline fg-def-3"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-span-5">
|
||||
<div tabindex="0"
|
||||
role="textbox"
|
||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
>
|
||||
<input tabindex="-1"
|
||||
class="w-full bg-transparent outline-none"
|
||||
type="text"
|
||||
placeholder="hostname or IP address"
|
||||
required
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
error="false"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="0"
|
||||
class="accordion mt-6"
|
||||
>
|
||||
<div class="accordion__title">
|
||||
<button class="button button--ghost-hover button--ghost-focus button--ghost-active button button--small">
|
||||
<span class="text-inherit fnt-label-s fnt-weight-medium button__label">
|
||||
Advanced Options
|
||||
</span>
|
||||
<span class="button__icon--end">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="12"
|
||||
height="12"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
size="12"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M40.25 15H7v4.75h4.75v4.75h4.75v4.75h4.75V34H26v-4.75h4.75V24.5h4.75v-4.75h4.75z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end pt-4">
|
||||
<button type="button"
|
||||
class="min-w-24 button default primary"
|
||||
>
|
||||
<div class="loader primary">
|
||||
<div class="wrapper">
|
||||
<div class="parent">
|
||||
</div>
|
||||
</div>
|
||||
<div class="child">
|
||||
</div>
|
||||
</div>
|
||||
<span class="typography text-inherit font-family-mono font-weight-bold font-size-default label font-label">
|
||||
Save
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<details class="mt-8">
|
||||
<summary class="cursor-pointer font-semibold">
|
||||
Current Form Data (Debug)
|
||||
</summary>
|
||||
<pre class="mt-2 overflow-auto rounded bg-gray-100 p-4 text-sm">
|
||||
{
|
||||
"address": "",
|
||||
"user": "",
|
||||
"command_prefix": "",
|
||||
"password": "",
|
||||
"forward_agent": false,
|
||||
"host_key_check": 0,
|
||||
"verbose_ssh": false,
|
||||
"ssh_options": {},
|
||||
"tor_socks": false
|
||||
}
|
||||
</pre>
|
||||
</details>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Components/RemoteForm HiddenSaveButton smoke-test 1`] = `
|
||||
<div class="max-w-2xl p-6">
|
||||
<h2 class="mb-6 text-2xl font-bold">
|
||||
Remote Configuration
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-10 items-center">
|
||||
<div class="col-span-5 flex items-center">
|
||||
<label class="flex items-center gap-1 col-span-2"
|
||||
error="false"
|
||||
help="Username to connect as on the remote server"
|
||||
>
|
||||
<span class="flex flex-col justify-center">
|
||||
<span>
|
||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
||||
User
|
||||
</span>
|
||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
||||
*
|
||||
</span>
|
||||
<span class=" inline px-2"
|
||||
data-tip="Username to connect as on the remote server"
|
||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="0.8125rem"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
class="inline fg-def-3"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-span-5">
|
||||
<div tabindex="0"
|
||||
role="textbox"
|
||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
>
|
||||
<input tabindex="-1"
|
||||
class="w-full bg-transparent outline-none"
|
||||
type="text"
|
||||
placeholder="username"
|
||||
required
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
error="false"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-10 items-center">
|
||||
<div class="col-span-5 flex items-center">
|
||||
<label class="flex items-center gap-1 col-span-2"
|
||||
error="false"
|
||||
help="The hostname or IP address of the remote server"
|
||||
>
|
||||
<span class="flex flex-col justify-center">
|
||||
<span>
|
||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
||||
Address
|
||||
</span>
|
||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
||||
*
|
||||
</span>
|
||||
<span class=" inline px-2"
|
||||
data-tip="The hostname or IP address of the remote server"
|
||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="0.8125rem"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
class="inline fg-def-3"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-span-5">
|
||||
<div tabindex="0"
|
||||
role="textbox"
|
||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
>
|
||||
<input tabindex="-1"
|
||||
class="w-full bg-transparent outline-none"
|
||||
type="text"
|
||||
placeholder="hostname or IP address"
|
||||
required
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
error="false"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="0"
|
||||
class="accordion mt-6"
|
||||
>
|
||||
<div class="accordion__title">
|
||||
<button class="button button--ghost-hover button--ghost-focus button--ghost-active button button--small">
|
||||
<span class="text-inherit fnt-label-s fnt-weight-medium button__label">
|
||||
Advanced Options
|
||||
</span>
|
||||
<span class="button__icon--end">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="12"
|
||||
height="12"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
size="12"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M40.25 15H7v4.75h4.75v4.75h4.75v4.75h4.75V34H26v-4.75h4.75V24.5h4.75v-4.75h4.75z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<details class="mt-8">
|
||||
<summary class="cursor-pointer font-semibold">
|
||||
Current Form Data (Debug)
|
||||
</summary>
|
||||
<pre class="mt-2 overflow-auto rounded bg-gray-100 p-4 text-sm">
|
||||
{
|
||||
"address": "example.com",
|
||||
"user": "admin",
|
||||
"command_prefix": "sudo",
|
||||
"port": 22,
|
||||
"password": "",
|
||||
"forward_agent": true,
|
||||
"host_key_check": 1,
|
||||
"verbose_ssh": false,
|
||||
"ssh_options": {
|
||||
"StrictHostKeyChecking": "no",
|
||||
"UserKnownHostsFile": "/dev/null"
|
||||
},
|
||||
"tor_socks": false
|
||||
}
|
||||
</pre>
|
||||
</details>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Components/RemoteForm NixManaged smoke-test 1`] = `
|
||||
<div class="max-w-2xl p-6">
|
||||
<h2 class="mb-6 text-2xl font-bold">
|
||||
Remote Configuration
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between rounded-md border border-amber-200 bg-amber-50 p-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
class="size-5 text-amber-600"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M42 6H5v37h37zm-20.555 8.222h4.111v12.334h-4.111zm0 16.445h4.111v4.11h-4.111z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
<span class="text-sm font-medium text-amber-800">
|
||||
Configuration managed by Nix
|
||||
</span>
|
||||
</div>
|
||||
<button type="button"
|
||||
class="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium text-amber-700 hover:bg-amber-100"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
class="size-3"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M9.714 9.714h8.572V6.857h2.857V4h5.714v2.857h2.857v2.857h8.572v8.572h2.857v2.857H44v5.714h-2.857v2.857h-2.857v8.572h-8.572v2.857h-2.857V44h-5.714v-2.857h-2.857v-2.857H9.714v-8.572H6.857v-2.857H4v-5.714h2.857v-2.857h2.857zm8.572 5.715v2.857h-2.857v11.428h2.857v2.857h11.428v-2.857h2.857V18.286h-2.857v-2.857z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
Unlock to edit
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-10 items-center">
|
||||
<div class="col-span-5 flex items-center">
|
||||
<label class="flex items-center gap-1 col-span-2"
|
||||
error="false"
|
||||
help="Username to connect as on the remote server"
|
||||
>
|
||||
<span class="flex flex-col justify-center">
|
||||
<span>
|
||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
||||
User
|
||||
</span>
|
||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
||||
*
|
||||
</span>
|
||||
<span class=" inline px-2"
|
||||
data-tip="Username to connect as on the remote server"
|
||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="0.8125rem"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
class="inline fg-def-3"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-span-5">
|
||||
<div tabindex="0"
|
||||
role="textbox"
|
||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
>
|
||||
<input tabindex="-1"
|
||||
class="w-full bg-transparent outline-none"
|
||||
type="text"
|
||||
placeholder="username"
|
||||
required
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
error="false"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-10 items-center">
|
||||
<div class="col-span-5 flex items-center">
|
||||
<label class="flex items-center gap-1 col-span-2"
|
||||
error="false"
|
||||
help="The hostname or IP address of the remote server"
|
||||
>
|
||||
<span class="flex flex-col justify-center">
|
||||
<span>
|
||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
||||
Address
|
||||
</span>
|
||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
||||
*
|
||||
</span>
|
||||
<span class=" inline px-2"
|
||||
data-tip="The hostname or IP address of the remote server"
|
||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="0.8125rem"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
class="inline fg-def-3"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-span-5">
|
||||
<div tabindex="0"
|
||||
role="textbox"
|
||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
>
|
||||
<input tabindex="-1"
|
||||
class="w-full bg-transparent outline-none"
|
||||
type="text"
|
||||
placeholder="hostname or IP address"
|
||||
required
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
error="false"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="0"
|
||||
class="accordion mt-6"
|
||||
>
|
||||
<div class="accordion__title">
|
||||
<button class="button button--ghost-hover button--ghost-focus button--ghost-active button button--small">
|
||||
<span class="text-inherit fnt-label-s fnt-weight-medium button__label">
|
||||
Advanced Options
|
||||
</span>
|
||||
<span class="button__icon--end">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="12"
|
||||
height="12"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
size="12"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M40.25 15H7v4.75h4.75v4.75h4.75v4.75h4.75V34H26v-4.75h4.75V24.5h4.75v-4.75h4.75z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end pt-4">
|
||||
<button type="button"
|
||||
class="min-w-24 button default primary"
|
||||
>
|
||||
<div class="loader primary">
|
||||
<div class="wrapper">
|
||||
<div class="parent">
|
||||
</div>
|
||||
</div>
|
||||
<div class="child">
|
||||
</div>
|
||||
</div>
|
||||
<span class="typography text-inherit font-family-mono font-weight-bold font-size-default label font-label">
|
||||
Save
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<details class="mt-8">
|
||||
<summary class="cursor-pointer font-semibold">
|
||||
Current Form Data (Debug)
|
||||
</summary>
|
||||
<pre class="mt-2 overflow-auto rounded bg-gray-100 p-4 text-sm">
|
||||
{
|
||||
"address": "192.168.1.100",
|
||||
"user": "deploy",
|
||||
"command_prefix": "doas",
|
||||
"port": 2222,
|
||||
"password": "",
|
||||
"forward_agent": false,
|
||||
"host_key_check": 2,
|
||||
"verbose_ssh": true,
|
||||
"ssh_options": {
|
||||
"ConnectTimeout": "10",
|
||||
"ServerAliveInterval": "60",
|
||||
"ServerAliveCountMax": "3",
|
||||
"Compression": "yes",
|
||||
"TCPKeepAlive": "yes"
|
||||
},
|
||||
"tor_socks": true
|
||||
}
|
||||
</pre>
|
||||
</details>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Components/RemoteForm Populated smoke-test 1`] = `
|
||||
<div class="max-w-2xl p-6">
|
||||
<h2 class="mb-6 text-2xl font-bold">
|
||||
Remote Configuration
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-10 items-center">
|
||||
<div class="col-span-5 flex items-center">
|
||||
<label class="flex items-center gap-1 col-span-2"
|
||||
error="false"
|
||||
help="Username to connect as on the remote server"
|
||||
>
|
||||
<span class="flex flex-col justify-center">
|
||||
<span>
|
||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
||||
User
|
||||
</span>
|
||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
||||
*
|
||||
</span>
|
||||
<span class=" inline px-2"
|
||||
data-tip="Username to connect as on the remote server"
|
||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="0.8125rem"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
class="inline fg-def-3"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-span-5">
|
||||
<div tabindex="0"
|
||||
role="textbox"
|
||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
>
|
||||
<input tabindex="-1"
|
||||
class="w-full bg-transparent outline-none"
|
||||
type="text"
|
||||
placeholder="username"
|
||||
required
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
error="false"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-10 items-center">
|
||||
<div class="col-span-5 flex items-center">
|
||||
<label class="flex items-center gap-1 col-span-2"
|
||||
error="false"
|
||||
help="The hostname or IP address of the remote server"
|
||||
>
|
||||
<span class="flex flex-col justify-center">
|
||||
<span>
|
||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
||||
Address
|
||||
</span>
|
||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
||||
*
|
||||
</span>
|
||||
<span class=" inline px-2"
|
||||
data-tip="The hostname or IP address of the remote server"
|
||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="0.8125rem"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
class="inline fg-def-3"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-span-5">
|
||||
<div tabindex="0"
|
||||
role="textbox"
|
||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
>
|
||||
<input tabindex="-1"
|
||||
class="w-full bg-transparent outline-none"
|
||||
type="text"
|
||||
placeholder="hostname or IP address"
|
||||
required
|
||||
aria-invalid="false"
|
||||
aria-disabled="false"
|
||||
error="false"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="0"
|
||||
class="accordion mt-6"
|
||||
>
|
||||
<div class="accordion__title">
|
||||
<button class="button button--ghost-hover button--ghost-focus button--ghost-active button button--small">
|
||||
<span class="text-inherit fnt-label-s fnt-weight-medium button__label">
|
||||
Advanced Options
|
||||
</span>
|
||||
<span class="button__icon--end">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="12"
|
||||
height="12"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
size="12"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M40.25 15H7v4.75h4.75v4.75h4.75v4.75h4.75V34H26v-4.75h4.75V24.5h4.75v-4.75h4.75z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end pt-4">
|
||||
<button type="button"
|
||||
class="min-w-24 button default primary"
|
||||
>
|
||||
<div class="loader primary">
|
||||
<div class="wrapper">
|
||||
<div class="parent">
|
||||
</div>
|
||||
</div>
|
||||
<div class="child">
|
||||
</div>
|
||||
</div>
|
||||
<span class="typography text-inherit font-family-mono font-weight-bold font-size-default label font-label">
|
||||
Save
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<details class="mt-8">
|
||||
<summary class="cursor-pointer font-semibold">
|
||||
Current Form Data (Debug)
|
||||
</summary>
|
||||
<pre class="mt-2 overflow-auto rounded bg-gray-100 p-4 text-sm">
|
||||
{
|
||||
"address": "example.com",
|
||||
"user": "admin",
|
||||
"command_prefix": "sudo",
|
||||
"port": 22,
|
||||
"password": "",
|
||||
"forward_agent": true,
|
||||
"host_key_check": 1,
|
||||
"verbose_ssh": false,
|
||||
"ssh_options": {
|
||||
"StrictHostKeyChecking": "no",
|
||||
"UserKnownHostsFile": "/dev/null"
|
||||
},
|
||||
"tor_socks": false
|
||||
}
|
||||
</pre>
|
||||
</details>
|
||||
</div>
|
||||
`;
|
||||
1
pkgs/clan-app/ui-2d/src/components/v2
Symbolic link
1
pkgs/clan-app/ui-2d/src/components/v2
Symbolic link
@@ -0,0 +1 @@
|
||||
../../../ui/src/components/v2
|
||||
@@ -1,134 +0,0 @@
|
||||
.button {
|
||||
@apply flex gap-2 shrink-0 items-center justify-center;
|
||||
@apply px-4 py-2;
|
||||
|
||||
height: theme(height.9);
|
||||
border-radius: 3px;
|
||||
|
||||
/* Add transition for smooth width animation */
|
||||
transition: width 0.5s ease 0.1s;
|
||||
|
||||
&.s {
|
||||
@apply px-3 py-1.5;
|
||||
height: theme(height.7);
|
||||
border-radius: 2px;
|
||||
|
||||
&:has(> .icon-start):has(> .label) {
|
||||
@apply pl-2;
|
||||
}
|
||||
|
||||
&:has(> .icon-end):has(> .label) {
|
||||
@apply pr-2;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
@apply bg-inv-acc-4 fg-inv-1;
|
||||
@apply border border-solid border-inv-4;
|
||||
@apply shadow-button-primary;
|
||||
|
||||
&.ghost {
|
||||
@apply bg-transparent border-none shadow-none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply bg-inv-acc-3 border-solid shadow-button-primary-hover;
|
||||
border-color: theme(backgroundColor.secondary.700);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@apply bg-inv-acc-4 border-solid border-inv-3 shadow-button-primary-active;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@apply bg-inv-acc-4 border-solid border-inv-3 shadow-button-primary-focus;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@apply bg-def-acc-3 border-solid border-def-3 fg-def-3 shadow-none;
|
||||
}
|
||||
|
||||
& > .icon {
|
||||
@apply fg-inv-1;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
@apply bg-def-acc-2 fg-def-1;
|
||||
@apply border border-solid border-inv-2;
|
||||
@apply shadow-button-secondary;
|
||||
|
||||
&.ghost {
|
||||
@apply bg-transparent border-none shadow-none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply bg-def-acc-3 border-solid shadow-button-secondary-hover;
|
||||
border-color: theme(backgroundColor.secondary.700);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@apply bg-def-acc-3 border-solid border-inv-3 shadow-button-secondary-focus;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@apply bg-def-acc-3 border-solid border-inv-4 shadow-button-secondary-active;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@apply bg-def-2 border-solid border-def-2 fg-def-3 shadow-none;
|
||||
}
|
||||
|
||||
& > .icon {
|
||||
@apply fg-def-1;
|
||||
|
||||
&.icon-loading {
|
||||
color: #0051ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.icon {
|
||||
@apply p-2;
|
||||
}
|
||||
|
||||
&:has(> .icon-start):has(> .label) {
|
||||
@apply pl-3.5;
|
||||
}
|
||||
|
||||
&:has(> .icon-end):has(> .label) {
|
||||
@apply pr-3.5;
|
||||
}
|
||||
|
||||
& > div.loader {
|
||||
@apply w-0 opacity-0;
|
||||
@apply top-0 left-0 -mr-2;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
@apply cursor-wait;
|
||||
|
||||
& > div.loader {
|
||||
@apply w-4 opacity-100;
|
||||
margin-right: revert;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* button group */
|
||||
.button-group .button:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.button-group .button:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.button-group .button:last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
import { DocsStory, Meta, Canvas } from "@storybook/blocks";
|
||||
|
||||
import * as ButtonStories from "./Button.stories";
|
||||
|
||||
<Meta of={ButtonStories} />
|
||||
|
||||
# Button
|
||||
|
||||
Buttons have a simple hierarchy, `primary` or `secondary`, and two sizes, `default` and `s`.
|
||||
|
||||
A `Button` can also have a label with a `startIcon`, an `endIcon` or both:
|
||||
|
||||
```tsx
|
||||
<Button hierarchy="primary">Label</>
|
||||
<Button hierarchy="secondary" size="s">Label</>
|
||||
<Button hierarchy="primary" startIcon="Flash">Label</>
|
||||
<Button hierarchy="primary" size="s" endIcon="Flash">Label</>
|
||||
<Button hierarchy="primary" startIcon="Flash" endIcon="Flash">Label</>
|
||||
```
|
||||
|
||||
To create a `Button` which is just an icon:
|
||||
|
||||
```tsx
|
||||
<Button icon="Flash"/>
|
||||
<Button icon="User" size="s"/>
|
||||
```
|
||||
|
||||
<DocsStory of={ButtonStories.Primary} />
|
||||
|
||||
<DocsStory of={ButtonStories.Secondary} />
|
||||
|
||||
## Ghost Mode
|
||||
|
||||
Buttons in ghost mode have all the same states as normal buttons, except for their initial state has no background,
|
||||
outline or box shadow.
|
||||
|
||||
```tsx
|
||||
<Button hierarchy="primary" ghost={true}>Label</>
|
||||
```
|
||||
|
||||
<DocsStory of={ButtonStories.GhostPrimary} />
|
||||
|
||||
<DocsStory of={ButtonStories.GhostSecondary} />
|
||||
@@ -1,251 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
|
||||
import { Button, ButtonProps } from "./Button";
|
||||
import { Component } from "solid-js";
|
||||
import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
|
||||
|
||||
const getCursorStyle = (el: Element) => window.getComputedStyle(el).cursor;
|
||||
|
||||
const ButtonExamples: Component<ButtonProps> = (props) => (
|
||||
<>
|
||||
<div class="grid w-fit grid-cols-4 gap-8">
|
||||
<div>
|
||||
<Button data-testid="default" {...props}>
|
||||
Label
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button data-testid="small" size="s" {...props}>
|
||||
Label
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button data-testid="default-disabled" {...props} disabled={true}>
|
||||
Disabled
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
data-testid="small-disabled"
|
||||
{...props}
|
||||
disabled={true}
|
||||
size="s"
|
||||
>
|
||||
Disabled
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button data-testid="default-start-icon" {...props} startIcon="Flash">
|
||||
Label
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
data-testid="small-start-icon"
|
||||
{...props}
|
||||
startIcon="Flash"
|
||||
size="s"
|
||||
>
|
||||
Label
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
data-testid="default-disabled-start-icon"
|
||||
{...props}
|
||||
startIcon="Flash"
|
||||
disabled={true}
|
||||
>
|
||||
Disabled
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
data-testid="small-disabled-start-icon"
|
||||
{...props}
|
||||
startIcon="Flash"
|
||||
size="s"
|
||||
disabled={true}
|
||||
>
|
||||
Disabled
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button data-testid="default-end-icon" {...props} endIcon="Flash">
|
||||
Label
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
data-testid="small-end-icon"
|
||||
{...props}
|
||||
endIcon="Flash"
|
||||
size="s"
|
||||
>
|
||||
Label
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
data-testid="default-disabled-end-icon"
|
||||
{...props}
|
||||
endIcon="Flash"
|
||||
disabled={true}
|
||||
>
|
||||
Disabled
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
data-testid="small-disabled-end-icon"
|
||||
{...props}
|
||||
endIcon="Flash"
|
||||
size="s"
|
||||
disabled={true}
|
||||
>
|
||||
Disabled
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button data-testid="default-icon" {...props} icon="Flash" />
|
||||
</div>
|
||||
<div>
|
||||
<Button data-testid="small-icon" {...props} icon="Flash" size="s" />
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
data-testid="default-disabled-icon"
|
||||
{...props}
|
||||
icon="Flash"
|
||||
disabled={true}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
data-testid="small-disabled-icon"
|
||||
{...props}
|
||||
icon="Flash"
|
||||
disabled={true}
|
||||
size="s"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const meta: Meta<ButtonProps> = {
|
||||
title: "Components/Button",
|
||||
component: ButtonExamples,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<ButtonProps>;
|
||||
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
hierarchy: "primary",
|
||||
onAction: fn(async () => {
|
||||
// wait 500 ms to simulate an action
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
// randomly fail to check that the loading state still returns to normal
|
||||
if (Math.random() > 0.5) {
|
||||
throw new Error("Action failure");
|
||||
}
|
||||
}),
|
||||
},
|
||||
parameters: {
|
||||
test: {
|
||||
mockTimers: true,
|
||||
},
|
||||
},
|
||||
play: async ({ args, canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const buttons = await canvas.findAllByRole("button");
|
||||
|
||||
for (const button of buttons) {
|
||||
const testID = button.getAttribute("data-testid");
|
||||
|
||||
// skip disabled buttons
|
||||
if (button.hasAttribute("disabled")) {
|
||||
continue;
|
||||
}
|
||||
|
||||
await step(`Click on ${testID}`, async () => {
|
||||
// check for the loader
|
||||
const loaders = button.getElementsByClassName("loader");
|
||||
await expect(loaders.length).toEqual(1);
|
||||
|
||||
// assert its width is 0 before we click
|
||||
const [loader] = loaders;
|
||||
await expect(loader.clientWidth).toEqual(0);
|
||||
|
||||
// move the mouse over the button
|
||||
await userEvent.hover(button);
|
||||
|
||||
// the pointer should be normal
|
||||
await expect(getCursorStyle(button)).toEqual("pointer");
|
||||
|
||||
// click the button
|
||||
await userEvent.click(button);
|
||||
|
||||
// check the button has changed
|
||||
await waitFor(async () => {
|
||||
// the action handler should have been called
|
||||
await expect(args.onAction).toHaveBeenCalled();
|
||||
// the button should have a loading class
|
||||
await expect(button).toHaveClass("loading");
|
||||
// the loader should be visible
|
||||
await expect(loader.clientWidth).toBeGreaterThan(0);
|
||||
// the pointer should have changed to wait
|
||||
await expect(getCursorStyle(button)).toEqual("wait");
|
||||
});
|
||||
|
||||
// wait for the action handler to finish
|
||||
await waitFor(async () => {
|
||||
// the loading class should be removed
|
||||
await expect(button).not.toHaveClass("loading");
|
||||
// the loader should be hidden
|
||||
await expect(loader.clientWidth).toEqual(0);
|
||||
// the pointer should be normal
|
||||
await expect(getCursorStyle(button)).toEqual("pointer");
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: {
|
||||
...Primary.args,
|
||||
hierarchy: "secondary",
|
||||
},
|
||||
play: Primary.play,
|
||||
};
|
||||
|
||||
export const GhostPrimary: Story = {
|
||||
args: {
|
||||
...Primary.args,
|
||||
hierarchy: "primary",
|
||||
ghost: true,
|
||||
},
|
||||
play: Primary.play,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div class="p-10 bg-def-3">
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
export const GhostSecondary: Story = {
|
||||
args: {
|
||||
...Primary.args,
|
||||
hierarchy: "secondary",
|
||||
ghost: true,
|
||||
},
|
||||
play: Primary.play,
|
||||
};
|
||||
@@ -1,116 +0,0 @@
|
||||
import { splitProps, type JSX, createSignal, Show } from "solid-js";
|
||||
import cx from "classnames";
|
||||
import { Typography } from "../Typography/Typography";
|
||||
import { Button as KobalteButton } from "@kobalte/core/button";
|
||||
|
||||
import "./Button.css";
|
||||
import Icon, { IconVariant } from "@/src/components/v2/Icon/Icon";
|
||||
import { Loader } from "@/src/components/v2/Loader/Loader";
|
||||
|
||||
export type Size = "default" | "s";
|
||||
export type Hierarchy = "primary" | "secondary";
|
||||
|
||||
export type Action = () => Promise<void>;
|
||||
|
||||
export interface ButtonProps
|
||||
extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
hierarchy?: Hierarchy;
|
||||
size?: Size;
|
||||
ghost?: boolean;
|
||||
children?: JSX.Element;
|
||||
icon?: IconVariant;
|
||||
startIcon?: IconVariant;
|
||||
endIcon?: IconVariant;
|
||||
class?: string;
|
||||
onAction?: Action;
|
||||
}
|
||||
|
||||
const iconSizes: Record<Size, string> = {
|
||||
default: "1rem",
|
||||
s: "0.8125rem",
|
||||
};
|
||||
|
||||
export const Button = (props: ButtonProps) => {
|
||||
const [local, other] = splitProps(props, [
|
||||
"children",
|
||||
"hierarchy",
|
||||
"size",
|
||||
"ghost",
|
||||
"icon",
|
||||
"startIcon",
|
||||
"endIcon",
|
||||
"class",
|
||||
"onAction",
|
||||
]);
|
||||
|
||||
const size = local.size || "default";
|
||||
const hierarchy = local.hierarchy || "primary";
|
||||
|
||||
const [loading, setLoading] = createSignal(false);
|
||||
|
||||
const onClick = async () => {
|
||||
if (!local.onAction) {
|
||||
console.error("this should not be possible");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
await local.onAction();
|
||||
} catch (error) {
|
||||
console.error("Error while executing action", error);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const iconSize = iconSizes[local.size || "default"];
|
||||
|
||||
return (
|
||||
<KobalteButton
|
||||
class={cx(
|
||||
local.class,
|
||||
"button", // default button class
|
||||
size,
|
||||
hierarchy,
|
||||
{
|
||||
icon: local.icon,
|
||||
loading: loading(),
|
||||
ghost: local.ghost,
|
||||
},
|
||||
)}
|
||||
onClick={local.onAction ? onClick : undefined}
|
||||
{...other}
|
||||
>
|
||||
<Loader hierarchy={hierarchy} />
|
||||
|
||||
{local.startIcon && (
|
||||
<Icon icon={local.startIcon} class="icon-start" size={iconSize} />
|
||||
)}
|
||||
|
||||
{local.icon && !local.children && (
|
||||
<Icon icon={local.icon} class="icon" size={iconSize} />
|
||||
)}
|
||||
|
||||
{local.children && !local.icon && (
|
||||
<Typography
|
||||
class="label"
|
||||
hierarchy="label"
|
||||
family="mono"
|
||||
size={local.size || "default"}
|
||||
color="inherit"
|
||||
inverted={local.hierarchy === "secondary"}
|
||||
weight="bold"
|
||||
tag="span"
|
||||
>
|
||||
{local.children}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{local.endIcon && (
|
||||
<Icon icon={local.endIcon} class="icon-end" size={iconSize} />
|
||||
)}
|
||||
</KobalteButton>
|
||||
);
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,75 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
|
||||
import { Component, For } from "solid-js";
|
||||
import Icon, { IconProps, IconVariant } from "./Icon";
|
||||
|
||||
const iconVariants: IconVariant[] = [
|
||||
"ClanIcon",
|
||||
"Checkmark",
|
||||
"Paperclip",
|
||||
"Expand",
|
||||
"Plus",
|
||||
"Trash",
|
||||
"Folder",
|
||||
"CaretRight",
|
||||
"CaretLeft",
|
||||
"CaretUp",
|
||||
"CaretDown",
|
||||
"Close",
|
||||
"Flash",
|
||||
"EyeClose",
|
||||
"EyeOpen",
|
||||
"Settings",
|
||||
"Grid",
|
||||
"List",
|
||||
"Edit",
|
||||
"Load",
|
||||
"ArrowRight",
|
||||
"ArrowLeft",
|
||||
"ArrowTop",
|
||||
"ArrowBottom",
|
||||
"Info",
|
||||
"Update",
|
||||
"Reload",
|
||||
"Search",
|
||||
"Report",
|
||||
"Cursor",
|
||||
"More",
|
||||
"Filter",
|
||||
"Download",
|
||||
"Attention",
|
||||
"User",
|
||||
"WarningFilled",
|
||||
"Modules",
|
||||
"NewMachine",
|
||||
"AI",
|
||||
"Heart",
|
||||
"SearchFilled",
|
||||
"Offline",
|
||||
"Switch",
|
||||
"Tag",
|
||||
"Machine",
|
||||
];
|
||||
|
||||
const IconExamples: Component<IconProps> = (props) => (
|
||||
<div class="inline-flex flex-wrap gap-2">
|
||||
<For each={iconVariants}>{(item) => <Icon {...props} icon={item} />}</For>
|
||||
</div>
|
||||
);
|
||||
|
||||
const meta: Meta<IconProps> = {
|
||||
title: "Components/Icon",
|
||||
component: IconExamples,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<IconProps>;
|
||||
|
||||
export const Default: Story = {};
|
||||
|
||||
export const Large: Story = {
|
||||
args: {
|
||||
width: "2rem",
|
||||
height: "2rem",
|
||||
},
|
||||
};
|
||||
@@ -1,126 +0,0 @@
|
||||
import cx from "classnames";
|
||||
import { Component, JSX, Show, splitProps } from "solid-js";
|
||||
import ArrowBottom from "@/icons/arrow-bottom.svg";
|
||||
import ArrowLeft from "@/icons/arrow-left.svg";
|
||||
import ArrowRight from "@/icons/arrow-right.svg";
|
||||
import ArrowTop from "@/icons/arrow-top.svg";
|
||||
import Attention from "@/icons/attention.svg";
|
||||
import CaretDown from "@/icons/caret-down.svg";
|
||||
import CaretLeft from "@/icons/caret-left.svg";
|
||||
import CaretRight from "@/icons/caret-right.svg";
|
||||
import CaretUp from "@/icons/caret-up.svg";
|
||||
import Checkmark from "@/icons/checkmark.svg";
|
||||
import ClanIcon from "@/icons/clan-icon.svg";
|
||||
import Cursor from "@/icons/cursor.svg";
|
||||
import Close from "@/icons/close.svg";
|
||||
import Download from "@/icons/download.svg";
|
||||
import Edit from "@/icons/edit.svg";
|
||||
import Expand from "@/icons/expand.svg";
|
||||
import EyeClose from "@/icons/eye-close.svg";
|
||||
import EyeOpen from "@/icons/eye-open.svg";
|
||||
import Filter from "@/icons/filter.svg";
|
||||
import Flash from "@/icons/flash.svg";
|
||||
import Folder from "@/icons/folder.svg";
|
||||
import Grid from "@/icons/grid.svg";
|
||||
import Info from "@/icons/info.svg";
|
||||
import List from "@/icons/list.svg";
|
||||
import Load from "@/icons/load.svg";
|
||||
import More from "@/icons/more.svg";
|
||||
import Paperclip from "@/icons/paperclip.svg";
|
||||
import Plus from "@/icons/plus.svg";
|
||||
import Reload from "@/icons/reload.svg";
|
||||
import Report from "@/icons/report.svg";
|
||||
import Search from "@/icons/search.svg";
|
||||
import Settings from "@/icons/settings.svg";
|
||||
import Trash from "@/icons/trash.svg";
|
||||
import Update from "@/icons/update.svg";
|
||||
import WarningFilled from "@/icons/warning-filled.svg";
|
||||
import Modules from "@/icons/modules.svg";
|
||||
import NewMachine from "@/icons/new-machine.svg";
|
||||
import AI from "@/icons/ai.svg";
|
||||
import User from "@/icons/user.svg";
|
||||
import Heart from "@/icons/heart.svg";
|
||||
import SearchFilled from "@/icons/search-filled.svg";
|
||||
import Offline from "@/icons/offline.svg";
|
||||
import Switch from "@/icons/switch.svg";
|
||||
import Tag from "@/icons/tag.svg";
|
||||
import Machine from "@/icons/machine.svg";
|
||||
import Loader from "@/icons/loader.svg";
|
||||
import { Dynamic } from "solid-js/web";
|
||||
|
||||
const icons = {
|
||||
AI,
|
||||
ArrowBottom,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
ArrowTop,
|
||||
Attention,
|
||||
CaretDown,
|
||||
CaretLeft,
|
||||
CaretRight,
|
||||
CaretUp,
|
||||
Checkmark,
|
||||
ClanIcon,
|
||||
Close,
|
||||
Cursor,
|
||||
Download,
|
||||
Edit,
|
||||
Expand,
|
||||
EyeClose,
|
||||
EyeOpen,
|
||||
Filter,
|
||||
Flash,
|
||||
Folder,
|
||||
Grid,
|
||||
Heart,
|
||||
Info,
|
||||
List,
|
||||
Load,
|
||||
Machine,
|
||||
Modules,
|
||||
More,
|
||||
NewMachine,
|
||||
Offline,
|
||||
Paperclip,
|
||||
Plus,
|
||||
Reload,
|
||||
Report,
|
||||
Search,
|
||||
SearchFilled,
|
||||
Settings,
|
||||
Switch,
|
||||
Tag,
|
||||
Trash,
|
||||
Update,
|
||||
User,
|
||||
WarningFilled,
|
||||
};
|
||||
|
||||
export type IconVariant = keyof typeof icons;
|
||||
|
||||
export interface IconProps extends JSX.SvgSVGAttributes<SVGElement> {
|
||||
icon: IconVariant;
|
||||
class?: string;
|
||||
size?: number | string;
|
||||
}
|
||||
|
||||
const Icon: Component<IconProps> = (props) => {
|
||||
const [local, iconProps] = splitProps(props, ["icon", "class"]);
|
||||
|
||||
const IconComponent = () => icons[local.icon];
|
||||
|
||||
return IconComponent() ? (
|
||||
<Dynamic
|
||||
component={IconComponent()}
|
||||
class={cx("icon", local.class)}
|
||||
width={iconProps.size || "1em"}
|
||||
height={iconProps.size || "1em"}
|
||||
viewBox="0 0 48 48"
|
||||
// @ts-expect-error: dont know, fix this type nit later
|
||||
ref={iconProps.ref}
|
||||
{...iconProps}
|
||||
/>
|
||||
) : undefined;
|
||||
};
|
||||
|
||||
export default Icon;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,104 +0,0 @@
|
||||
.loader {
|
||||
@apply relative;
|
||||
@apply w-4 h-4;
|
||||
|
||||
&.primary {
|
||||
& > div.wrapper > div.parent,
|
||||
& > div.child {
|
||||
background: #00ff57;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
& > div.wrapper > div.parent,
|
||||
& > div.child {
|
||||
background: #0051ff;
|
||||
}
|
||||
}
|
||||
|
||||
& > div.wrapper {
|
||||
@apply absolute top-0 left-0 w-full h-full;
|
||||
|
||||
transform: translate(0%, 0%) rotate(-45deg);
|
||||
animation: moveLoaderWrapper 1.8s ease-in-out infinite;
|
||||
|
||||
& > div.parent {
|
||||
@apply absolute top-1/2 left-1/2;
|
||||
@apply w-2/3 h-2/3;
|
||||
|
||||
border-radius: 50%;
|
||||
animation: moveLoaderParent 1.8s ease-in-out infinite;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
& > .child {
|
||||
@apply absolute z-10 top-1/2 left-1/2 w-1/2 h-1/2;
|
||||
border-radius: 50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
animation: moveLoaderChild 1.8s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveLoaderWrapper {
|
||||
0% {
|
||||
transform: translate(0%, 0%) rotate(-45deg);
|
||||
}
|
||||
|
||||
35% {
|
||||
transform: translate(-25%, 0%) rotate(-45deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(0%, 0%) rotate(-45deg);
|
||||
}
|
||||
|
||||
85% {
|
||||
transform: translate(25%, 0%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveLoaderParent {
|
||||
0% {
|
||||
animation-timing-function: ease-in-out;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
35% {
|
||||
animation-timing-function: cubic-bezier(0.7, -0.9, 0.3, 3.2);
|
||||
transform: translateX(-50%) translateY(-50%) skew(20deg, 20deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
animation-timing-function: ease-in-out;
|
||||
transform: translateX(-50%) translateY(-50%) skew(0deg, 0deg);
|
||||
}
|
||||
|
||||
85% {
|
||||
animation-timing-function: cubic-bezier(0.7, -0.9, 0.3, 3.2);
|
||||
transform: translateX(-50%) translateY(-50%) skew(20deg, 20deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveLoaderChild {
|
||||
0% {
|
||||
animation-timing-function: ease-in-out;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
35% {
|
||||
animation-timing-function: cubic-bezier(0.7, -0.9, 0.3, 3.2);
|
||||
transform: translateX(50%) translateY(-50%) scale(0.56);
|
||||
}
|
||||
|
||||
50% {
|
||||
animation-timing-function: ease-in-out;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
85% {
|
||||
animation-timing-function: cubic-bezier(0.7, -0.9, 0.3, 3.2);
|
||||
transform: translateX(-150%) translateY(-50%) scale(0.56);
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
|
||||
import { Loader, LoaderProps } from "@/src/components/v2/Loader/Loader";
|
||||
|
||||
const meta: Meta<LoaderProps> = {
|
||||
title: "Components/Loader",
|
||||
component: Loader,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<LoaderProps>;
|
||||
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
hierarchy: "primary",
|
||||
},
|
||||
};
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: {
|
||||
hierarchy: "secondary",
|
||||
},
|
||||
};
|
||||
@@ -1,19 +0,0 @@
|
||||
import "./Loader.css";
|
||||
import cx from "classnames";
|
||||
|
||||
export type Hierarchy = "primary" | "secondary";
|
||||
|
||||
export interface LoaderProps {
|
||||
hierarchy?: Hierarchy;
|
||||
}
|
||||
|
||||
export const Loader = (props: LoaderProps) => {
|
||||
return (
|
||||
<div class={cx("loader", props.hierarchy || "primary")}>
|
||||
<div class="wrapper">
|
||||
<div class="parent"></div>
|
||||
</div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,23 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Components/Loader Primary smoke-test 1`] = `
|
||||
<div class="loader primary">
|
||||
<div class="wrapper">
|
||||
<div class="parent">
|
||||
</div>
|
||||
</div>
|
||||
<div class="child">
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Components/Loader Secondary smoke-test 1`] = `
|
||||
<div class="loader secondary">
|
||||
<div class="wrapper">
|
||||
<div class="parent">
|
||||
</div>
|
||||
</div>
|
||||
<div class="child">
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,7 +0,0 @@
|
||||
## Overview
|
||||
|
||||
We will be updating existing components and developing new components in line with the latest designs inside this
|
||||
folder. As they become ready, they can be copied into the root `components` folder, replacing any existing components as
|
||||
necessary.
|
||||
|
||||
This is to avoid merge hell and allow us to rapidly match the latest designs without the burden of integration.
|
||||
@@ -1,154 +0,0 @@
|
||||
/* Body */
|
||||
.typography {
|
||||
&.font-weight-normal {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.font-weight-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.font-weight-bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.font-body {
|
||||
&.font-family-regular {
|
||||
font-family: "Archivo", sans-serif;
|
||||
}
|
||||
|
||||
&.font-family-condensed {
|
||||
font-family: "Archivo SemiCondensed", sans-serif;
|
||||
}
|
||||
|
||||
&.font-size-default {
|
||||
font-size: 1rem;
|
||||
line-height: 1.32;
|
||||
letter-spacing: 0.02rem;
|
||||
}
|
||||
|
||||
&.font-size-s {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.32;
|
||||
letter-spacing: 0.0175rem;
|
||||
}
|
||||
|
||||
&.font-size-xs {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.32;
|
||||
letter-spacing: 0.0225rem;
|
||||
}
|
||||
|
||||
&.font-size-xxs {
|
||||
font-size: 0.6875rem;
|
||||
line-height: 1.32;
|
||||
letter-spacing: 0.00688rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.font-label {
|
||||
&.font-family-condensed {
|
||||
font-family: "Archivo SemiCondensed", sans-serif;
|
||||
|
||||
&.font-size-default {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.32;
|
||||
letter-spacing: 0.0175rem;
|
||||
}
|
||||
|
||||
&.font-size-s {
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.32;
|
||||
letter-spacing: 0.0175rem;
|
||||
}
|
||||
|
||||
&.font-size-xs {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.32;
|
||||
letter-spacing: 0.0075rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.font-family-mono {
|
||||
font-family: "Commit Mono", monospace;
|
||||
|
||||
&.font-size-default {
|
||||
font-size: 0.8125rem;
|
||||
line-height: 0;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
&.font-size-s {
|
||||
font-size: 0.75rem;
|
||||
line-height: 0;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
&.font-size-xs {
|
||||
font-size: 0.6875rem;
|
||||
line-height: 0;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.font-title {
|
||||
&.font-family-regular {
|
||||
font-family: "Archivo", sans-serif;
|
||||
}
|
||||
|
||||
&.font-size-default {
|
||||
font-size: 1.125rem;
|
||||
line-height: 124%;
|
||||
letter-spacing: 0.03375rem;
|
||||
}
|
||||
|
||||
&.font-size-m {
|
||||
font-size: 1.25rem;
|
||||
line-height: 124%;
|
||||
letter-spacing: 0.0375rem;
|
||||
}
|
||||
|
||||
&.font-size-l {
|
||||
font-size: 1.375rem;
|
||||
line-height: 124%;
|
||||
letter-spacing: 0.04125rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.font-headline {
|
||||
&.font-family-regular {
|
||||
font-family: "Archivo", sans-serif;
|
||||
}
|
||||
|
||||
&.font-size-default {
|
||||
font-size: 1.5rem;
|
||||
line-height: 116%;
|
||||
letter-spacing: 0.015rem;
|
||||
}
|
||||
|
||||
&.font-size-m {
|
||||
font-size: 1.75rem;
|
||||
line-height: 116%;
|
||||
letter-spacing: 0.0175rem;
|
||||
}
|
||||
|
||||
&.font-size-l {
|
||||
font-size: 2rem;
|
||||
line-height: 116%;
|
||||
letter-spacing: 0.06rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.font-teaser {
|
||||
&.font-family-regular {
|
||||
font-family: "Archivo", sans-serif;
|
||||
}
|
||||
|
||||
&.font-size-default {
|
||||
font-size: 3rem;
|
||||
line-height: normal;
|
||||
letter-spacing: -0.06rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import { DocsStory, Meta, Canvas } from "@storybook/blocks";
|
||||
|
||||
import * as TypographyStories from "./Typography.stories";
|
||||
|
||||
<Meta of={TypographyStories} />
|
||||
|
||||
# Typography
|
||||
|
||||
There are two fonts being used within our typography system:
|
||||
|
||||
- [Archivo] in its _Standard_ and _Semi Condensed_ forms
|
||||
- [Fira Code] for mono-spaced content
|
||||
|
||||
## UI Components
|
||||
|
||||
When creating UI components that a user will interact with,
|
||||
you must use the condensed form of `Body`, `Label` and `Label Mono`.
|
||||
|
||||
<DocsStory of={TypographyStories.BodyCondensed} />
|
||||
|
||||
<DocsStory of={TypographyStories.LabelCondensed} />
|
||||
|
||||
<DocsStory of={TypographyStories.LabelMono} />
|
||||
|
||||
## Layout & Prose
|
||||
|
||||
For layout components and general prose, you must use the non-condensed forms of `Body`, `Title`, `Headline` and
|
||||
`Teaser`.
|
||||
|
||||
<DocsStory of={TypographyStories.Body} />
|
||||
<DocsStory of={TypographyStories.Title} />
|
||||
<DocsStory of={TypographyStories.Headline} />
|
||||
<DocsStory of={TypographyStories.Teaser} />
|
||||
|
||||
## Colors
|
||||
|
||||
Text colors come in one of five varieties:
|
||||
|
||||
- `inherit` (which will inherit the text color from the parent)
|
||||
- `primary`
|
||||
- `secondary`
|
||||
- `tertiary`
|
||||
- `quaternary`
|
||||
|
||||
<DocsStory of={TypographyStories.Colors} />
|
||||
|
||||
Each color also has an inverted counterpart.
|
||||
|
||||
<DocsStory of={TypographyStories.ColorsInverted} />
|
||||
|
||||
[Archivo]: https://github.com/Omnibus-Type/Archivo
|
||||
[Fira Code]: https://github.com/tonsky/FiraCode
|
||||
@@ -1,166 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
|
||||
|
||||
import {
|
||||
AllowedSizes,
|
||||
Color,
|
||||
Family,
|
||||
Hierarchy,
|
||||
Typography,
|
||||
Weight,
|
||||
} from "./Typography";
|
||||
import { Component, For, Show } from "solid-js";
|
||||
|
||||
interface TypographyExamplesProps {
|
||||
weights: Weight[];
|
||||
sizes: ("default" | "s" | "xs" | "xxs" | "m" | "l")[];
|
||||
hierarchy: Hierarchy;
|
||||
colors?: boolean;
|
||||
family?: Family;
|
||||
inverted?: boolean;
|
||||
}
|
||||
|
||||
const colors: (Color | "inherit")[] = [
|
||||
"inherit",
|
||||
"primary",
|
||||
"secondary",
|
||||
"tertiary",
|
||||
"quaternary",
|
||||
];
|
||||
|
||||
const TypographyExamples: Component<TypographyExamplesProps> = (props) => (
|
||||
<table
|
||||
class="w-full min-w-max table-auto text-left"
|
||||
classList={{
|
||||
"text-white bg-inv-1": props.inverted,
|
||||
}}
|
||||
>
|
||||
<tbody>
|
||||
<For each={props.sizes}>
|
||||
{(size) => (
|
||||
<tr
|
||||
class="border-b border-def-3 even:bg-def-2"
|
||||
classList={{
|
||||
"border-inv-3 even:bg-inv-2": props.inverted,
|
||||
"border-def-3 even:bg-def-2": !props.inverted,
|
||||
}}
|
||||
>
|
||||
<For each={props.weights}>
|
||||
{(weight) => (
|
||||
<td class="px-6 py-2 ">
|
||||
<Show when={!props.colors}>
|
||||
<Typography
|
||||
hierarchy={props.hierarchy}
|
||||
//@ts-expect-error: difficult to generify for the story
|
||||
size={size}
|
||||
weight={weight}
|
||||
family={props.family}
|
||||
>
|
||||
{props.hierarchy} / {size} / {weight}
|
||||
</Typography>
|
||||
</Show>
|
||||
<Show when={props.colors}>
|
||||
<For each={colors}>
|
||||
{(color) => (
|
||||
<>
|
||||
<Typography
|
||||
hierarchy={props.hierarchy}
|
||||
//@ts-expect-error: difficult to generify for the story
|
||||
size={size}
|
||||
weight={weight}
|
||||
color={color}
|
||||
family={props.family}
|
||||
inverted={props.inverted}
|
||||
>
|
||||
{props.hierarchy} / {size} / {weight} / {color}
|
||||
</Typography>
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</td>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
|
||||
const meta: Meta<TypographyExamplesProps> = {
|
||||
title: "Components/Typography",
|
||||
component: TypographyExamples,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<TypographyExamplesProps>;
|
||||
|
||||
export const BodyCondensed: Story = {
|
||||
args: {
|
||||
hierarchy: "body",
|
||||
sizes: ["default", "s", "xs", "xxs"],
|
||||
weights: ["normal", "medium", "bold"],
|
||||
},
|
||||
};
|
||||
|
||||
export const Body: Story = {
|
||||
args: {
|
||||
...BodyCondensed.args,
|
||||
family: "regular",
|
||||
},
|
||||
};
|
||||
|
||||
export const LabelCondensed: Story = {
|
||||
args: {
|
||||
hierarchy: "label",
|
||||
sizes: ["default", "s", "xs"],
|
||||
weights: ["normal", "medium", "bold"],
|
||||
},
|
||||
};
|
||||
|
||||
export const LabelMono: Story = {
|
||||
args: {
|
||||
...LabelCondensed.args,
|
||||
family: "mono",
|
||||
},
|
||||
};
|
||||
|
||||
export const Title: Story = {
|
||||
args: {
|
||||
hierarchy: "title",
|
||||
sizes: ["default", "m", "l"],
|
||||
weights: ["normal", "medium", "bold"],
|
||||
},
|
||||
};
|
||||
|
||||
export const Headline: Story = {
|
||||
args: {
|
||||
hierarchy: "headline",
|
||||
sizes: ["default", "m", "l"],
|
||||
weights: ["normal", "medium", "bold"],
|
||||
},
|
||||
};
|
||||
|
||||
export const Teaser: Story = {
|
||||
args: {
|
||||
hierarchy: "teaser",
|
||||
sizes: ["default"],
|
||||
weights: ["bold"],
|
||||
},
|
||||
};
|
||||
|
||||
export const Colors: Story = {
|
||||
args: {
|
||||
...BodyCondensed.args,
|
||||
colors: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const ColorsInverted: Story = {
|
||||
args: {
|
||||
...Colors.args,
|
||||
inverted: true,
|
||||
},
|
||||
};
|
||||
@@ -1,152 +0,0 @@
|
||||
import { type JSX, mergeProps } from "solid-js";
|
||||
import { Dynamic } from "solid-js/web";
|
||||
import cx from "classnames";
|
||||
import "./Typography.css";
|
||||
|
||||
export type Tag = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "div";
|
||||
export type Color = "primary" | "secondary" | "tertiary" | "quaternary";
|
||||
export type Hierarchy = "body" | "title" | "headline" | "label" | "teaser";
|
||||
export type Weight = "normal" | "medium" | "bold";
|
||||
export type Family = "regular" | "condensed" | "mono";
|
||||
|
||||
const colorMap: Record<Color, string> = {
|
||||
primary: cx("fg-def-1"),
|
||||
secondary: cx("fg-def-2"),
|
||||
tertiary: cx("fg-def-3"),
|
||||
quaternary: cx("fg-def-4"),
|
||||
};
|
||||
|
||||
const invertedColorMap: Record<Color, string> = {
|
||||
primary: cx("fg-inv-1"),
|
||||
secondary: cx("fg-inv-2"),
|
||||
tertiary: cx("fg-inv-3"),
|
||||
quaternary: cx("fg-inv-4"),
|
||||
};
|
||||
|
||||
const colorFor = (color: Color | "inherit" = "primary", inverted = false) => {
|
||||
if (color === "inherit") {
|
||||
return "text-inherit";
|
||||
}
|
||||
|
||||
return inverted ? invertedColorMap[color] : colorMap[color];
|
||||
};
|
||||
|
||||
// type Size = "default" | "xs" | "s" | "m" | "l";
|
||||
interface SizeForHierarchy {
|
||||
body: {
|
||||
default: string;
|
||||
s: string;
|
||||
xs: string;
|
||||
xxs: string;
|
||||
};
|
||||
label: {
|
||||
default: string;
|
||||
s: string;
|
||||
xs: string;
|
||||
};
|
||||
headline: {
|
||||
default: string;
|
||||
m: string;
|
||||
l: string;
|
||||
};
|
||||
title: {
|
||||
default: string;
|
||||
m: string;
|
||||
l: string;
|
||||
};
|
||||
teaser: {
|
||||
default: string;
|
||||
};
|
||||
}
|
||||
|
||||
export type AllowedSizes<H extends Hierarchy> = keyof SizeForHierarchy[H];
|
||||
|
||||
const sizeHierarchyMap: SizeForHierarchy = {
|
||||
body: {
|
||||
default: cx("font-size-default"),
|
||||
s: cx("font-size-s"),
|
||||
xs: cx("font-size-xs"),
|
||||
xxs: cx("font-size-xxs"),
|
||||
},
|
||||
headline: {
|
||||
default: cx("font-size-default"),
|
||||
m: cx("font-size-m"),
|
||||
l: cx("font-size-l"),
|
||||
},
|
||||
title: {
|
||||
default: cx("font-size-default"),
|
||||
// xs: cx("font-size-xs"),
|
||||
// s: cx("font-size-s"),
|
||||
m: cx("font-size-m"),
|
||||
l: cx("font-size-l"),
|
||||
},
|
||||
label: {
|
||||
default: cx("font-size-default"),
|
||||
s: cx("font-size-s"),
|
||||
xs: cx("font-size-xs"),
|
||||
},
|
||||
teaser: {
|
||||
default: cx("font-size-default"),
|
||||
},
|
||||
};
|
||||
|
||||
const defaultFamilyMap: Record<Hierarchy, Family> = {
|
||||
body: "condensed",
|
||||
label: "condensed",
|
||||
title: "regular",
|
||||
headline: "regular",
|
||||
teaser: "regular",
|
||||
};
|
||||
|
||||
const weightMap: Record<Weight, string> = {
|
||||
normal: cx("font-weight-normal"),
|
||||
medium: cx("font-weight-medium"),
|
||||
bold: cx("font-weight-bold"),
|
||||
};
|
||||
|
||||
interface _TypographyProps<H extends Hierarchy> {
|
||||
hierarchy: H;
|
||||
size: AllowedSizes<H>;
|
||||
color?: Color | "inherit";
|
||||
children: JSX.Element;
|
||||
weight?: Weight;
|
||||
family?: Family;
|
||||
inverted?: boolean;
|
||||
tag?: Tag;
|
||||
class?: string;
|
||||
classList?: Record<string, boolean>;
|
||||
}
|
||||
|
||||
export const Typography = <H extends Hierarchy>(props: _TypographyProps<H>) => {
|
||||
const family = () =>
|
||||
`font-family-${props.family || defaultFamilyMap[props.hierarchy]}`;
|
||||
|
||||
const color = () => colorFor(props.color, props.inverted);
|
||||
|
||||
const classList = mergeProps(props.classList, {
|
||||
"font-body": props.hierarchy === "body" || !props.hierarchy,
|
||||
"font-label": props.hierarchy === "label",
|
||||
"font-title": props.hierarchy === "title",
|
||||
"font-headline": props.hierarchy === "headline",
|
||||
"font-teaser": props.hierarchy === "teaser",
|
||||
});
|
||||
|
||||
return (
|
||||
<Dynamic
|
||||
class={cx(
|
||||
"typography",
|
||||
color(),
|
||||
family(),
|
||||
weightMap[props.weight || "normal"],
|
||||
sizeHierarchyMap[props.hierarchy][props.size] as string,
|
||||
props.class,
|
||||
)}
|
||||
component={props.tag || "span"}
|
||||
classList={classList}
|
||||
>
|
||||
{props.children}
|
||||
</Dynamic>
|
||||
);
|
||||
};
|
||||
|
||||
export type TypographyProps = _TypographyProps<Hierarchy>;
|
||||
@@ -1,955 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Components/Typography Body smoke-test 1`] = `
|
||||
<table class="w-full min-w-max table-auto text-left">
|
||||
<tbody>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-default font-body">
|
||||
body / default / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-default font-body">
|
||||
body / default / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-body">
|
||||
body / default / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-s font-body">
|
||||
body / s / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-s font-body">
|
||||
body / s / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-s font-body">
|
||||
body / s / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-xs font-body">
|
||||
body / xs / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-xs font-body">
|
||||
body / xs / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-xs font-body">
|
||||
body / xs / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-xxs font-body">
|
||||
body / xxs / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-xxs font-body">
|
||||
body / xxs / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-xxs font-body">
|
||||
body / xxs / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
exports[`Components/Typography BodyCondensed smoke-test 1`] = `
|
||||
<table class="w-full min-w-max table-auto text-left">
|
||||
<tbody>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-default font-body">
|
||||
body / default / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-default font-body">
|
||||
body / default / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-default font-body">
|
||||
body / default / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-s font-body">
|
||||
body / s / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-s font-body">
|
||||
body / s / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-s font-body">
|
||||
body / s / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xs font-body">
|
||||
body / xs / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xs font-body">
|
||||
body / xs / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xs font-body">
|
||||
body / xs / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xxs font-body">
|
||||
body / xxs / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xxs font-body">
|
||||
body / xxs / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xxs font-body">
|
||||
body / xxs / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
exports[`Components/Typography Colors smoke-test 1`] = `
|
||||
<table class="w-full min-w-max table-auto text-left">
|
||||
<tbody>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-default font-body">
|
||||
body / default / normal / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-default font-body">
|
||||
body / default / normal / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-default font-body">
|
||||
body / default / normal / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-default font-body">
|
||||
body / default / normal / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-default font-body">
|
||||
body / default / normal / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-default font-body">
|
||||
body / default / medium / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-default font-body">
|
||||
body / default / medium / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-default font-body">
|
||||
body / default / medium / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-default font-body">
|
||||
body / default / medium / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-default font-body">
|
||||
body / default / medium / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-default font-body">
|
||||
body / default / bold / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-default font-body">
|
||||
body / default / bold / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-default font-body">
|
||||
body / default / bold / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-default font-body">
|
||||
body / default / bold / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-default font-body">
|
||||
body / default / bold / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-s font-body">
|
||||
body / s / normal / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-s font-body">
|
||||
body / s / normal / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-s font-body">
|
||||
body / s / normal / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-s font-body">
|
||||
body / s / normal / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-s font-body">
|
||||
body / s / normal / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-s font-body">
|
||||
body / s / medium / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-s font-body">
|
||||
body / s / medium / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-s font-body">
|
||||
body / s / medium / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-s font-body">
|
||||
body / s / medium / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-s font-body">
|
||||
body / s / medium / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-s font-body">
|
||||
body / s / bold / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-s font-body">
|
||||
body / s / bold / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-s font-body">
|
||||
body / s / bold / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-s font-body">
|
||||
body / s / bold / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-s font-body">
|
||||
body / s / bold / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-xs font-body">
|
||||
body / xs / normal / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xs font-body">
|
||||
body / xs / normal / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-xs font-body">
|
||||
body / xs / normal / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-xs font-body">
|
||||
body / xs / normal / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-xs font-body">
|
||||
body / xs / normal / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-xs font-body">
|
||||
body / xs / medium / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xs font-body">
|
||||
body / xs / medium / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-xs font-body">
|
||||
body / xs / medium / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-xs font-body">
|
||||
body / xs / medium / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-xs font-body">
|
||||
body / xs / medium / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-xs font-body">
|
||||
body / xs / bold / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xs font-body">
|
||||
body / xs / bold / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-xs font-body">
|
||||
body / xs / bold / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-xs font-body">
|
||||
body / xs / bold / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-xs font-body">
|
||||
body / xs / bold / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-xxs font-body">
|
||||
body / xxs / normal / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xxs font-body">
|
||||
body / xxs / normal / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-xxs font-body">
|
||||
body / xxs / normal / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-xxs font-body">
|
||||
body / xxs / normal / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-xxs font-body">
|
||||
body / xxs / normal / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-xxs font-body">
|
||||
body / xxs / medium / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xxs font-body">
|
||||
body / xxs / medium / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-xxs font-body">
|
||||
body / xxs / medium / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-xxs font-body">
|
||||
body / xxs / medium / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-xxs font-body">
|
||||
body / xxs / medium / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-xxs font-body">
|
||||
body / xxs / bold / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xxs font-body">
|
||||
body / xxs / bold / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-xxs font-body">
|
||||
body / xxs / bold / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-xxs font-body">
|
||||
body / xxs / bold / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-xxs font-body">
|
||||
body / xxs / bold / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
exports[`Components/Typography ColorsInverted smoke-test 1`] = `
|
||||
<table class="w-full min-w-max table-auto text-left text-white bg-inv-1">
|
||||
<tbody>
|
||||
<tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-default font-body">
|
||||
body / default / normal / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-default font-body">
|
||||
body / default / normal / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-default font-body">
|
||||
body / default / normal / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-default font-body">
|
||||
body / default / normal / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-default font-body">
|
||||
body / default / normal / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-default font-body">
|
||||
body / default / medium / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-default font-body">
|
||||
body / default / medium / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-default font-body">
|
||||
body / default / medium / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-default font-body">
|
||||
body / default / medium / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-default font-body">
|
||||
body / default / medium / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-default font-body">
|
||||
body / default / bold / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-default font-body">
|
||||
body / default / bold / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-default font-body">
|
||||
body / default / bold / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-default font-body">
|
||||
body / default / bold / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-default font-body">
|
||||
body / default / bold / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-s font-body">
|
||||
body / s / normal / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-s font-body">
|
||||
body / s / normal / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-s font-body">
|
||||
body / s / normal / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-s font-body">
|
||||
body / s / normal / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-s font-body">
|
||||
body / s / normal / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-s font-body">
|
||||
body / s / medium / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-s font-body">
|
||||
body / s / medium / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-s font-body">
|
||||
body / s / medium / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-s font-body">
|
||||
body / s / medium / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-s font-body">
|
||||
body / s / medium / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-s font-body">
|
||||
body / s / bold / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-s font-body">
|
||||
body / s / bold / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-s font-body">
|
||||
body / s / bold / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-s font-body">
|
||||
body / s / bold / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-s font-body">
|
||||
body / s / bold / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-xs font-body">
|
||||
body / xs / normal / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-xs font-body">
|
||||
body / xs / normal / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-xs font-body">
|
||||
body / xs / normal / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-xs font-body">
|
||||
body / xs / normal / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-xs font-body">
|
||||
body / xs / normal / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-xs font-body">
|
||||
body / xs / medium / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-xs font-body">
|
||||
body / xs / medium / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-xs font-body">
|
||||
body / xs / medium / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-xs font-body">
|
||||
body / xs / medium / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-xs font-body">
|
||||
body / xs / medium / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-xs font-body">
|
||||
body / xs / bold / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-xs font-body">
|
||||
body / xs / bold / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-xs font-body">
|
||||
body / xs / bold / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-xs font-body">
|
||||
body / xs / bold / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-xs font-body">
|
||||
body / xs / bold / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-xxs font-body">
|
||||
body / xxs / normal / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-xxs font-body">
|
||||
body / xxs / normal / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-xxs font-body">
|
||||
body / xxs / normal / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-xxs font-body">
|
||||
body / xxs / normal / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-xxs font-body">
|
||||
body / xxs / normal / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-xxs font-body">
|
||||
body / xxs / medium / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-xxs font-body">
|
||||
body / xxs / medium / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-xxs font-body">
|
||||
body / xxs / medium / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-xxs font-body">
|
||||
body / xxs / medium / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-xxs font-body">
|
||||
body / xxs / medium / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-xxs font-body">
|
||||
body / xxs / bold / inherit
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-xxs font-body">
|
||||
body / xxs / bold / primary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-xxs font-body">
|
||||
body / xxs / bold / secondary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-xxs font-body">
|
||||
body / xxs / bold / tertiary
|
||||
</span>
|
||||
<br>
|
||||
<span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-xxs font-body">
|
||||
body / xxs / bold / quaternary
|
||||
</span>
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
exports[`Components/Typography Headline smoke-test 1`] = `
|
||||
<table class="w-full min-w-max table-auto text-left">
|
||||
<tbody>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-default font-headline">
|
||||
headline / default / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-default font-headline">
|
||||
headline / default / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-headline">
|
||||
headline / default / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-m font-headline">
|
||||
headline / m / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-m font-headline">
|
||||
headline / m / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-m font-headline">
|
||||
headline / m / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-l font-headline">
|
||||
headline / l / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-l font-headline">
|
||||
headline / l / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-l font-headline">
|
||||
headline / l / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
exports[`Components/Typography LabelCondensed smoke-test 1`] = `
|
||||
<table class="w-full min-w-max table-auto text-left">
|
||||
<tbody>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-default font-label">
|
||||
label / default / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-default font-label">
|
||||
label / default / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-default font-label">
|
||||
label / default / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-s font-label">
|
||||
label / s / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-s font-label">
|
||||
label / s / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-s font-label">
|
||||
label / s / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xs font-label">
|
||||
label / xs / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xs font-label">
|
||||
label / xs / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xs font-label">
|
||||
label / xs / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
exports[`Components/Typography LabelMono smoke-test 1`] = `
|
||||
<table class="w-full min-w-max table-auto text-left">
|
||||
<tbody>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-mono font-weight-normal font-size-default font-label">
|
||||
label / default / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-mono font-weight-medium font-size-default font-label">
|
||||
label / default / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-mono font-weight-bold font-size-default font-label">
|
||||
label / default / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-mono font-weight-normal font-size-s font-label">
|
||||
label / s / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-mono font-weight-medium font-size-s font-label">
|
||||
label / s / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-mono font-weight-bold font-size-s font-label">
|
||||
label / s / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-mono font-weight-normal font-size-xs font-label">
|
||||
label / xs / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-mono font-weight-medium font-size-xs font-label">
|
||||
label / xs / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-mono font-weight-bold font-size-xs font-label">
|
||||
label / xs / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
exports[`Components/Typography Teaser smoke-test 1`] = `
|
||||
<table class="w-full min-w-max table-auto text-left">
|
||||
<tbody>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-teaser">
|
||||
teaser / default / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
exports[`Components/Typography Title smoke-test 1`] = `
|
||||
<table class="w-full min-w-max table-auto text-left">
|
||||
<tbody>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-default font-title">
|
||||
title / default / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-default font-title">
|
||||
title / default / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-title">
|
||||
title / default / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-m font-title">
|
||||
title / m / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-m font-title">
|
||||
title / m / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-m font-title">
|
||||
title / m / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-def-3 even:bg-def-2">
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-l font-title">
|
||||
title / l / normal
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-l font-title">
|
||||
title / l / medium
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-2 ">
|
||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-l font-title">
|
||||
title / l / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
@@ -1,105 +0,0 @@
|
||||
@import "material-icons/iconfont/filled.css";
|
||||
/* List of icons: https://marella.me/material-icons/demo/ */
|
||||
/* @import url(./components/Typography/css/typography.css); */
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@font-face {
|
||||
font-family: "Archivo";
|
||||
font-weight: 400;
|
||||
src: url(../../../.fonts/Archivo-Regular.woff2) format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Archivo";
|
||||
font-weight: 500;
|
||||
src: url(../../../.fonts/Archivo-Medium.woff2) format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Archivo";
|
||||
font-weight: 600;
|
||||
src: url(../../../.fonts/Archivo-SemiBold.woff2) format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Archivo SemiCondensed";
|
||||
font-weight: 400;
|
||||
src: url(../../../.fonts/ArchivoSemiCondensed-Regular.woff2) format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Archivo SemiCondensed";
|
||||
font-weight: 500;
|
||||
src: url(../../../.fonts/ArchivoSemiCondensed-Medium.woff2) format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Archivo SemiCondensed";
|
||||
font-weight: 600;
|
||||
src: url(../../../.fonts/ArchivoSemiCondensed-SemiBold.woff2) format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Commit Mono";
|
||||
font-weight: 400;
|
||||
src: url(../../../.fonts/CommitMono-400-Regular.otf) format("otf");
|
||||
}
|
||||
|
||||
:root {
|
||||
--clr-bg-def-1: theme(colors.white);
|
||||
--clr-bg-def-2: theme(colors.primary.50);
|
||||
--clr-bg-def-3: theme(colors.secondary.100);
|
||||
--clr-bg-def-4: theme(colors.secondary.200);
|
||||
|
||||
--clr-border-def-1: theme(colors.secondary.50);
|
||||
--clr-border-def-2: theme(colors.secondary.100);
|
||||
--clr-border-def-3: theme(colors.secondary.200);
|
||||
--clr-border-def-4: theme(colors.secondary.300);
|
||||
|
||||
--clr-border-def-sem-inf-1: theme(colors.info.500);
|
||||
--clr-border-def-sem-inf-2: theme(colors.info.600);
|
||||
--clr-border-def-sem-inf-3: theme(colors.info.700);
|
||||
--clr-border-def-sem-inf-4: theme(colors.info.800);
|
||||
|
||||
--clr-bg-inv-1: theme(colors.primary.600);
|
||||
--clr-bg-inv-2: theme(colors.primary.700);
|
||||
--clr-bg-inv-3: theme(colors.primary.800);
|
||||
--clr-bg-inv-4: theme(colors.primary.900);
|
||||
|
||||
--clr-border-inv-1: theme(colors.secondary.700);
|
||||
--clr-border-inv-2: theme(colors.secondary.800);
|
||||
--clr-border-inv-3: theme(colors.secondary.900);
|
||||
--clr-border-inv-4: theme(colors.secondary.950);
|
||||
|
||||
--clr-bg-inv-acc-1: theme(colors.secondary.500);
|
||||
--clr-bg-inv-acc-2: theme(colors.secondary.600);
|
||||
--clr-bg-inv-acc-3: theme(colors.secondary.700);
|
||||
|
||||
--clr-fg-def-1: theme(colors.secondary.950);
|
||||
--clr-fg-def-2: theme(colors.secondary.900);
|
||||
--clr-fg-def-3: theme(colors.secondary.700);
|
||||
--clr-fg-def-4: theme(colors.secondary.400);
|
||||
|
||||
--clr-fg-inv-1: theme(colors.white);
|
||||
--clr-fg-inv-2: theme(colors.secondary.100);
|
||||
--clr-fg-inv-3: theme(colors.secondary.300);
|
||||
--clr-fg-inv-4: theme(colors.secondary.400);
|
||||
}
|
||||
|
||||
html {
|
||||
@apply font-sans;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
|
||||
-webkit-user-select: none;
|
||||
/* Safari */
|
||||
-moz-user-select: none;
|
||||
/* Firefox */
|
||||
-ms-user-select: none;
|
||||
/* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
/* Standard */
|
||||
}
|
||||
Reference in New Issue
Block a user