Merge pull request 'Typography component V2' (#3797) from ui/typography into main
Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/3797
This commit is contained in:
hsjobeki
@@ -1,24 +1,67 @@
|
||||
{ fetchurl, runCommand }:
|
||||
{
|
||||
fetchurl,
|
||||
fetchzip,
|
||||
runCommand,
|
||||
}:
|
||||
let
|
||||
# 400 -> Regular
|
||||
archivoRegular = fetchurl {
|
||||
url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/ArchivoSemiCondensed-Regular.woff2";
|
||||
hash = "sha256-3PeB6tMpbYxR9JFyQ+yjpM7bAvZIjcJ4eBiHr9iV5p4=";
|
||||
|
||||
archivo = {
|
||||
# 400 -> Regular
|
||||
regular = fetchurl {
|
||||
url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/Archivo-Regular.woff2";
|
||||
hash = "sha256-sxWvVJvHnZgKvgvKCmSOz6AQa+G/IFv57YCeY4HyTQo=";
|
||||
};
|
||||
|
||||
# 500 -> Medium
|
||||
medium = fetchurl {
|
||||
url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/Archivo-Medium.woff2";
|
||||
hash = "sha256-FalQLFry4jdHwuMr1zmxyG7UuI1rn1pd2cV8tmJetRs=";
|
||||
};
|
||||
|
||||
# 600 -> SemiBold
|
||||
semiBold = fetchurl {
|
||||
url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/Archivo-SemiBold.woff2";
|
||||
hash = "sha256-XrTdFFUNLIdxwgqJB/sX8Om89XqgF/vCz1cYl7I6QTU=";
|
||||
};
|
||||
};
|
||||
# 500 -> Medium
|
||||
archivoMedium = fetchurl {
|
||||
url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/ArchivoSemiCondensed-Medium.woff2";
|
||||
hash = "sha256-IKaY3YhpmjMaIVUpwKRLd6eFiIihBoAP99I/pwmyll8=";
|
||||
|
||||
archivoSemi = {
|
||||
# 400 -> Regular
|
||||
regular = fetchurl {
|
||||
url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/ArchivoSemiCondensed-Regular.woff2";
|
||||
hash = "sha256-3PeB6tMpbYxR9JFyQ+yjpM7bAvZIjcJ4eBiHr9iV5p4=";
|
||||
};
|
||||
|
||||
# 500 -> Medium
|
||||
medium = fetchurl {
|
||||
url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/ArchivoSemiCondensed-Medium.woff2";
|
||||
hash = "sha256-IKaY3YhpmjMaIVUpwKRLd6eFiIihBoAP99I/pwmyll8=";
|
||||
};
|
||||
|
||||
# 600 -> SemiBold
|
||||
semiBold = fetchurl {
|
||||
url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/ArchivoSemiCondensed-SemiBold.woff2";
|
||||
hash = "sha256-fOE+b+UeTRoj+sDdUWR1pPCZVn0ABy6FEDDmXrOA4LY=";
|
||||
};
|
||||
};
|
||||
# 600 -> SemiBold
|
||||
archivoSemiBold = fetchurl {
|
||||
url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/ArchivoSemiCondensed-SemiBold.woff2";
|
||||
hash = "sha256-fOE+b+UeTRoj+sDdUWR1pPCZVn0ABy6FEDDmXrOA4LY=";
|
||||
|
||||
firaCode = fetchzip {
|
||||
url = "https://github.com/tonsky/FiraCode/releases/download/6.2/Fira_Code_v6.2.zip";
|
||||
stripRoot = false;
|
||||
hash = "sha256-UHOwZL9WpCHk6vZaqI/XfkZogKgycs5lWg1p0XdQt0A=";
|
||||
};
|
||||
|
||||
in
|
||||
runCommand "" { } ''
|
||||
mkdir -p $out
|
||||
cp ${archivoRegular} $out/ArchivoSemiCondensed-Regular.woff2
|
||||
cp ${archivoMedium} $out/ArchivoSemiCondensed-Medium.woff2
|
||||
cp ${archivoSemiBold} $out/ArchivoSemiCondensed-SemiBold.woff2
|
||||
|
||||
cp ${archivo.regular} $out/Archivo-Regular.woff2
|
||||
cp ${archivo.medium} $out/Archivo-Medium.woff2
|
||||
cp ${archivo.semiBold} $out/Archivo-SemiBold.woff2
|
||||
|
||||
cp ${archivoSemi.regular} $out/ArchivoSemiCondensed-Regular.woff2
|
||||
cp ${archivoSemi.medium} $out/ArchivoSemiCondensed-Medium.woff2
|
||||
cp ${archivoSemi.semiBold} $out/ArchivoSemiCondensed-SemiBold.woff2
|
||||
|
||||
cp ${firaCode}/woff2/FiraCode-Regular.woff2 $out/FiraCode-Regular.woff2
|
||||
''
|
||||
|
||||
5
pkgs/clan-app/ui/.storybook/preview.css
Normal file
5
pkgs/clan-app/ui/.storybook/preview.css
Normal file
@@ -0,0 +1,5 @@
|
||||
html {
|
||||
/* revert this which only makes sense when rendering inside the clan app webview */
|
||||
overflow-x: revert;
|
||||
overflow-y: revert;
|
||||
}
|
||||
@@ -1,5 +1,8 @@
|
||||
import type { Preview } from "@kachurun/storybook-solid";
|
||||
|
||||
import "@/src/components/v2/index.css";
|
||||
import "./preview.css";
|
||||
|
||||
export const preview: Preview = {
|
||||
tags: ["autodocs"],
|
||||
parameters: {
|
||||
@@ -7,7 +10,7 @@ export const preview: Preview = {
|
||||
backgrounds: {
|
||||
values: [
|
||||
{ name: "Dark", value: "#333" },
|
||||
{ name: "Light", value: "#F7F9F2" },
|
||||
{ name: "Light", value: "#ffffff" },
|
||||
],
|
||||
default: "Light",
|
||||
},
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
|
||||
import { Button, ButtonProps } from "./Button";
|
||||
import FlashIcon from "@/icons/flash.svg";
|
||||
|
||||
const meta: Meta<ButtonProps> = {
|
||||
title: "Components/Button",
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<ButtonProps>;
|
||||
|
||||
const children = "click me";
|
||||
const startIcon = <FlashIcon width={16} height={16} viewBox="0 0 48 48" />;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children,
|
||||
startIcon,
|
||||
},
|
||||
};
|
||||
|
||||
export const Small: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
size: "s",
|
||||
},
|
||||
};
|
||||
|
||||
export const Light: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
variant: "light",
|
||||
},
|
||||
};
|
||||
|
||||
export const Ghost: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
variant: "ghost",
|
||||
},
|
||||
};
|
||||
@@ -1,89 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Components/Button Default smoke-test 1`] = `
|
||||
<button class="button button--dark button--dark-hover button--dark-focus button--dark-active disabled:bg-secondary-200 disabled:text-secondary-700 disabled:border-secondary-300 button--default">
|
||||
<span class="button__icon--start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M24 6.4h3.2v12.8H40v6.4h-3.2v3.2h-3.2V32h-3.2v3.2h-3.2v3.2H24v3.2h-3.2V28.8H8v-6.4h3.2v-3.2h3.2V16h3.2v-3.2h3.2V9.6H24z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-inherit fnt-clr--inverted fnt-label-default fnt-weight-medium button__label">
|
||||
click me
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Components/Button Ghost smoke-test 1`] = `
|
||||
<button class="button button--ghost-hover button--ghost-focus button--ghost-active button--default">
|
||||
<span class="button__icon--start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M24 6.4h3.2v12.8H40v6.4h-3.2v3.2h-3.2V32h-3.2v3.2h-3.2v3.2H24v3.2h-3.2V28.8H8v-6.4h3.2v-3.2h3.2V16h3.2v-3.2h3.2V9.6H24z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-inherit fnt-label-default fnt-weight-medium button__label">
|
||||
click me
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Components/Button Light smoke-test 1`] = `
|
||||
<button class="button button--light button--light-hover button--light-focus button--light-active button--default">
|
||||
<span class="button__icon--start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M24 6.4h3.2v12.8H40v6.4h-3.2v3.2h-3.2V32h-3.2v3.2h-3.2v3.2H24v3.2h-3.2V28.8H8v-6.4h3.2v-3.2h3.2V16h3.2v-3.2h3.2V9.6H24z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-inherit fnt-label-default fnt-weight-medium button__label">
|
||||
click me
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Components/Button Small smoke-test 1`] = `
|
||||
<button class="button button--dark button--dark-hover button--dark-focus button--dark-active disabled:bg-secondary-200 disabled:text-secondary-700 disabled:border-secondary-300 button button--small">
|
||||
<span class="button__icon--start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 48 48"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M24 6.4h3.2v12.8H40v6.4h-3.2v3.2h-3.2V32h-3.2v3.2h-3.2v3.2H24v3.2h-3.2V28.8H8v-6.4h3.2v-3.2h3.2V16h3.2v-3.2h3.2V9.6H24z"
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-inherit fnt-clr--inverted fnt-label-s fnt-weight-medium button__label">
|
||||
click me
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
@@ -38,7 +38,7 @@ export const InputBase = (props: InputBaseProps) => {
|
||||
"flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6",
|
||||
|
||||
// Background
|
||||
"bg-def-1 hover:bg-acc-1",
|
||||
"bg-def-1 hover:bg-def-acc-1",
|
||||
|
||||
// Text
|
||||
"fg-def-1",
|
||||
|
||||
@@ -76,7 +76,7 @@ export const Modal = (props: ModalProps) => {
|
||||
>
|
||||
<Dialog.Label
|
||||
as="div"
|
||||
class="flex w-full justify-center border-b-2 px-4 py-2 align-middle bg-def-3 border-def-5"
|
||||
class="flex w-full justify-center border-b-2 px-4 py-2 align-middle bg-def-3 border-def-4"
|
||||
onMouseDown={handleMouseDown}
|
||||
>
|
||||
<div
|
||||
|
||||
7
pkgs/clan-app/ui/src/components/v2/README.md
Normal file
7
pkgs/clan-app/ui/src/components/v2/README.md
Normal file
@@ -0,0 +1,7 @@
|
||||
## 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.
|
||||
151
pkgs/clan-app/ui/src/components/v2/Typography/Typography.css
Normal file
151
pkgs/clan-app/ui/src/components/v2/Typography/Typography.css
Normal file
@@ -0,0 +1,151 @@
|
||||
/* 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: 132%;
|
||||
letter-spacing: 0.02rem;
|
||||
}
|
||||
|
||||
&.font-size-s {
|
||||
font-size: 0.875rem;
|
||||
line-height: 132%;
|
||||
letter-spacing: 0.0175rem;
|
||||
}
|
||||
|
||||
&.font-size-xs {
|
||||
font-size: 0.75rem;
|
||||
line-height: 132%;
|
||||
letter-spacing: 0.0225rem;
|
||||
}
|
||||
|
||||
&.font-size-xxs {
|
||||
font-size: 0.6875rem;
|
||||
line-height: 132%;
|
||||
letter-spacing: 0.00688rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.font-label {
|
||||
&.font-family-condensed {
|
||||
font-family: "Archivo SemiCondensed", sans-serif;
|
||||
|
||||
&.font-size-default {
|
||||
font-size: 0.875rem;
|
||||
line-height: 132%;
|
||||
letter-spacing: 0.0175rem;
|
||||
}
|
||||
|
||||
&.font-size-s {
|
||||
font-size: 0.8125rem;
|
||||
line-height: 132%;
|
||||
letter-spacing: 0.0175rem;
|
||||
}
|
||||
|
||||
&.font-size-xs {
|
||||
font-size: 0.75rem;
|
||||
line-height: 132%;
|
||||
letter-spacing: 0.0075rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.font-family-mono {
|
||||
font-family: "Fira Code", monospace;
|
||||
|
||||
&.font-size-default {
|
||||
font-size: 0.8125rem;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
&.font-size-s {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
&.font-size-xs {
|
||||
font-size: 0.6875rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
52
pkgs/clan-app/ui/src/components/v2/Typography/Typography.mdx
Normal file
52
pkgs/clan-app/ui/src/components/v2/Typography/Typography.mdx
Normal file
@@ -0,0 +1,52 @@
|
||||
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
|
||||
@@ -0,0 +1,166 @@
|
||||
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,
|
||||
},
|
||||
};
|
||||
172
pkgs/clan-app/ui/src/components/v2/Typography/Typography.tsx
Normal file
172
pkgs/clan-app/ui/src/components/v2/Typography/Typography.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
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"),
|
||||
},
|
||||
};
|
||||
|
||||
interface FamilyForHierarchy {
|
||||
body: {
|
||||
regular: string;
|
||||
condensed: string;
|
||||
};
|
||||
label: {
|
||||
condensed: string;
|
||||
mono: string;
|
||||
};
|
||||
title: {
|
||||
condensed: string;
|
||||
};
|
||||
headline: {
|
||||
regular: string;
|
||||
};
|
||||
teaser: {
|
||||
regular: string;
|
||||
};
|
||||
}
|
||||
|
||||
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>;
|
||||
@@ -0,0 +1,955 @@
|
||||
// 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body 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-body font-title">
|
||||
title / l / bold
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
64
pkgs/clan-app/ui/src/components/v2/index.css
Normal file
64
pkgs/clan-app/ui/src/components/v2/index.css
Normal file
@@ -0,0 +1,64 @@
|
||||
@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: "Fira Code";
|
||||
font-weight: 400;
|
||||
src: url(../../../.fonts/FiraCode-Regular.woff2) format("woff2");
|
||||
}
|
||||
|
||||
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 */
|
||||
}
|
||||
@@ -30,46 +30,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
: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-bg-def-5: theme(colors.secondary.300);
|
||||
|
||||
--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-5: theme(colors.secondary.400);
|
||||
|
||||
--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-bg-inv-5: theme(colors.primary.950);
|
||||
|
||||
--clr-border-inv-1: theme(colors.secondary.800);
|
||||
--clr-border-inv-2: theme(colors.secondary.900);
|
||||
--clr-border-inv-3: theme(colors.secondary.900);
|
||||
--clr-border-inv-4: theme(colors.secondary.950);
|
||||
--clr-border-inv-5: theme(colors.black);
|
||||
|
||||
--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.500);
|
||||
|
||||
--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;
|
||||
|
||||
@@ -192,6 +192,5 @@ render(
|
||||
</QueryClientProvider>
|
||||
</>
|
||||
),
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
root!,
|
||||
);
|
||||
|
||||
@@ -341,7 +341,7 @@ const InstallMachine = (props: InstallMachineProps) => {
|
||||
>
|
||||
<Match when={isInstalling()}>
|
||||
<div class="flex h-96 w-[40rem] flex-col fg-inv-1">
|
||||
<div class="flex w-full gap-1 p-4 bg-inv-5">
|
||||
<div class="flex w-full gap-1 p-4 bg-inv-4">
|
||||
<Typography
|
||||
color="inherit"
|
||||
hierarchy="label"
|
||||
|
||||
@@ -66,7 +66,7 @@ export const SummaryStep = (props: StepProps<AllStepsValues>) => {
|
||||
</Typography>
|
||||
}
|
||||
></FieldLayout>
|
||||
<hr class="h-px w-full border-none bg-acc-3"></hr>
|
||||
<hr class="h-px w-full border-none bg-def-acc-3"></hr>
|
||||
<FieldLayout
|
||||
label={<InputLabel>Main Disk</InputLabel>}
|
||||
field={
|
||||
|
||||
@@ -116,7 +116,7 @@ export const VarsForm = (props: VarsFormProps) => {
|
||||
>
|
||||
<textarea
|
||||
{...props}
|
||||
class="w-full h-32 border border-gray-300 rounded-md p-2"
|
||||
class="h-32 w-full rounded-md border border-gray-300 p-2"
|
||||
placeholder={prompt.description}
|
||||
value={prompt.previous_value ?? ""}
|
||||
name={prompt.description}
|
||||
|
||||
@@ -14,26 +14,23 @@ const mkBorderUtils = (
|
||||
) => ({
|
||||
// - def colors
|
||||
[`.${prefix}-def-1`]: {
|
||||
[cssProperty]: theme("colors.secondary.50"),
|
||||
},
|
||||
[`.${prefix}-def-2`]: {
|
||||
[cssProperty]: theme("colors.secondary.100"),
|
||||
},
|
||||
[`.${prefix}-def-3`]: {
|
||||
[`.${prefix}-def-2`]: {
|
||||
[cssProperty]: theme("colors.secondary.200"),
|
||||
},
|
||||
[`.${prefix}-def-4`]: {
|
||||
[`.${prefix}-def-3`]: {
|
||||
[cssProperty]: theme("colors.secondary.300"),
|
||||
},
|
||||
[`.${prefix}-def-5`]: {
|
||||
[`.${prefix}-def-4`]: {
|
||||
[cssProperty]: theme("colors.secondary.400"),
|
||||
},
|
||||
// - inverse colors
|
||||
[`.${prefix}-inv-1`]: {
|
||||
[cssProperty]: theme("colors.secondary.800"),
|
||||
[cssProperty]: theme("colors.secondary.700"),
|
||||
},
|
||||
[`.${prefix}-inv-2`]: {
|
||||
[cssProperty]: theme("colors.secondary.900"),
|
||||
[cssProperty]: theme("colors.secondary.800"),
|
||||
},
|
||||
[`.${prefix}-inv-3`]: {
|
||||
[cssProperty]: theme("colors.secondary.900"),
|
||||
@@ -41,9 +38,6 @@ const mkBorderUtils = (
|
||||
[`.${prefix}-inv-4`]: {
|
||||
[cssProperty]: theme("colors.secondary.950"),
|
||||
},
|
||||
[`.${prefix}-inv-5`]: {
|
||||
[cssProperty]: theme("colors.black"),
|
||||
},
|
||||
|
||||
[`.${prefix}-int-1`]: {
|
||||
[cssProperty]: theme("colors.info.500"),
|
||||
@@ -84,6 +78,8 @@ export default plugin.withOptions(
|
||||
});
|
||||
addUtilities({
|
||||
// Background colors
|
||||
|
||||
// default
|
||||
".bg-def-1": {
|
||||
backgroundColor: theme("colors.white"),
|
||||
},
|
||||
@@ -96,7 +92,17 @@ export default plugin.withOptions(
|
||||
".bg-def-4": {
|
||||
backgroundColor: theme("colors.secondary.200"),
|
||||
},
|
||||
".bg-def-5": {
|
||||
// default accessible
|
||||
".bg-def-acc-1": {
|
||||
backgroundColor: theme("colors.primary.50"),
|
||||
},
|
||||
".bg-def-acc-2": {
|
||||
backgroundColor: theme("colors.secondary.100"),
|
||||
},
|
||||
".bg-def-acc-3": {
|
||||
backgroundColor: theme("colors.secondary.200"),
|
||||
},
|
||||
".bg-def-acc-4": {
|
||||
backgroundColor: theme("colors.secondary.300"),
|
||||
},
|
||||
// bg inverse
|
||||
@@ -112,21 +118,18 @@ export default plugin.withOptions(
|
||||
".bg-inv-4": {
|
||||
backgroundColor: theme("colors.primary.900"),
|
||||
},
|
||||
".bg-inv-5": {
|
||||
backgroundColor: theme("colors.primary.950"),
|
||||
// bg inverse accessible
|
||||
".bg-inv-acc-1": {
|
||||
backgroundColor: theme("colors.secondary.500"),
|
||||
},
|
||||
// bg inverse accent
|
||||
".bg-acc-1": {
|
||||
backgroundColor: theme("colors.primary.50"),
|
||||
".bg-inv-acc-2": {
|
||||
backgroundColor: theme("colors.secondary.600"),
|
||||
},
|
||||
".bg-acc-2": {
|
||||
backgroundColor: theme("colors.secondary.100"),
|
||||
".bg-inv-acc-3": {
|
||||
backgroundColor: theme("colors.secondary.700"),
|
||||
},
|
||||
".bg-acc-3": {
|
||||
backgroundColor: theme("colors.secondary.200"),
|
||||
},
|
||||
".bg-acc-4": {
|
||||
backgroundColor: theme("colors.secondary.300"),
|
||||
".bg-inv-acc-4": {
|
||||
backgroundColor: theme("colors.secondary.900"),
|
||||
},
|
||||
|
||||
// bg inverse accent
|
||||
@@ -143,20 +146,6 @@ export default plugin.withOptions(
|
||||
backgroundColor: theme("colors.error.300"),
|
||||
},
|
||||
|
||||
// bg inverse accent
|
||||
".bg-inv-acc-1": {
|
||||
backgroundColor: theme("colors.secondary.500"),
|
||||
},
|
||||
".bg-inv-acc-2": {
|
||||
backgroundColor: theme("colors.secondary.600"),
|
||||
},
|
||||
".bg-inv-acc-3": {
|
||||
backgroundColor: theme("colors.secondary.700"),
|
||||
},
|
||||
".bg-inv-acc-4": {
|
||||
backgroundColor: theme("colors.primary.900"),
|
||||
},
|
||||
|
||||
// Text colors
|
||||
".fg-def-1": {
|
||||
color: theme("colors.secondary.950"),
|
||||
@@ -168,7 +157,7 @@ export default plugin.withOptions(
|
||||
color: theme("colors.secondary.700"),
|
||||
},
|
||||
".fg-def-4": {
|
||||
color: theme("colors.secondary.500"),
|
||||
color: theme("colors.secondary.400"),
|
||||
},
|
||||
// fg inverse
|
||||
".fg-inv-1": {
|
||||
@@ -198,6 +187,10 @@ export default plugin.withOptions(
|
||||
},
|
||||
|
||||
...mkBorderUtils(theme, "border", "borderColor"),
|
||||
...mkBorderUtils(theme, "border-b", "borderBottom"),
|
||||
...mkBorderUtils(theme, "border-t", "borderTop"),
|
||||
...mkBorderUtils(theme, "border-l", "borderLeft"),
|
||||
...mkBorderUtils(theme, "border-r", "borderRight"),
|
||||
...mkBorderUtils(theme, "outline", "outlineColor"),
|
||||
|
||||
// Example: dark mode utilities (all elements within <html class="dark"> )
|
||||
@@ -233,24 +226,24 @@ export default plugin.withOptions(
|
||||
300: toRGB("#8abebc"),
|
||||
400: toRGB("#478585"),
|
||||
500: toRGB("#526f6f"),
|
||||
600: toRGB("#4b6667"),
|
||||
600: toRGB("#4b6767"),
|
||||
700: toRGB("#345253"),
|
||||
800: toRGB("#2a4647"),
|
||||
900: toRGB("#1f3536"),
|
||||
800: toRGB("#2b4647"),
|
||||
900: toRGB("#203637"),
|
||||
950: toRGB("#162324"),
|
||||
},
|
||||
secondary: {
|
||||
50: toRGB("#F7F9FA"),
|
||||
100: toRGB("#E7F2F4"),
|
||||
200: toRGB("#D8E8EB"),
|
||||
300: toRGB("#AFC6CA"),
|
||||
400: toRGB("#90B2B7"),
|
||||
500: toRGB("#7B9B9F"),
|
||||
600: toRGB("#4F747A"),
|
||||
700: toRGB("#415E63"),
|
||||
50: toRGB("#f7f9fA"),
|
||||
100: toRGB("#e7f2f4"),
|
||||
200: toRGB("#d8e8eb"),
|
||||
300: toRGB("#afc6ca"),
|
||||
400: toRGB("#90b2b7"),
|
||||
500: toRGB("#7b9b9f"),
|
||||
600: toRGB("#4f747A"),
|
||||
700: toRGB("#415e63"),
|
||||
800: toRGB("#446065"),
|
||||
900: toRGB("#2C4347"),
|
||||
950: toRGB("#0D1416"),
|
||||
900: toRGB("#2c4347"),
|
||||
950: toRGB("#0d1416"),
|
||||
},
|
||||
info: {
|
||||
50: toRGB("#eff9ff"),
|
||||
|
||||
@@ -3,7 +3,7 @@ import type { Config } from "tailwindcss";
|
||||
|
||||
export const typography: Partial<Config["theme"]> = {
|
||||
fontFamily: {
|
||||
sans: ["Archivo", ...defaultTheme.fontFamily.sans],
|
||||
sans: ["Archivo SemiCondensed", ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
fontSize: {
|
||||
...defaultTheme.fontSize,
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
{
|
||||
"exclude": [
|
||||
// ignore storybook stories
|
||||
"**/*.stories.tsx"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"target": "ESNext",
|
||||
|
||||
Reference in New Issue
Block a user