clan-ui: remove intermediate app directory
This commit is contained in:
Jörg Thalheim
297
pkgs/clan-app/ui/tailwind/core-plugin.ts
Normal file
297
pkgs/clan-app/ui/tailwind/core-plugin.ts
Normal file
@@ -0,0 +1,297 @@
|
||||
import plugin from "tailwindcss/plugin";
|
||||
import { typography } from "./typography";
|
||||
// @ts-expect-error: lib of tailwind has no types
|
||||
import { parseColor } from "tailwindcss/lib/util/color";
|
||||
|
||||
/* Converts HEX color to RGB */
|
||||
const toRGB = (value: string) =>
|
||||
"rgb(" + parseColor(value).color.join(" ") + ")";
|
||||
|
||||
const mkBorderUtils = (
|
||||
theme: (n: string) => unknown,
|
||||
prefix: string,
|
||||
cssProperty: string,
|
||||
) => ({
|
||||
// - def colors
|
||||
[`.${prefix}-def-1`]: {
|
||||
[cssProperty]: theme("colors.secondary.50"),
|
||||
},
|
||||
[`.${prefix}-def-2`]: {
|
||||
[cssProperty]: theme("colors.secondary.100"),
|
||||
},
|
||||
[`.${prefix}-def-3`]: {
|
||||
[cssProperty]: theme("colors.secondary.200"),
|
||||
},
|
||||
[`.${prefix}-def-4`]: {
|
||||
[cssProperty]: theme("colors.secondary.300"),
|
||||
},
|
||||
[`.${prefix}-def-5`]: {
|
||||
[cssProperty]: theme("colors.secondary.400"),
|
||||
},
|
||||
// - inverse colors
|
||||
[`.${prefix}-inv-1`]: {
|
||||
[cssProperty]: theme("colors.secondary.800"),
|
||||
},
|
||||
[`.${prefix}-inv-2`]: {
|
||||
[cssProperty]: theme("colors.secondary.900"),
|
||||
},
|
||||
[`.${prefix}-inv-3`]: {
|
||||
[cssProperty]: theme("colors.secondary.900"),
|
||||
},
|
||||
[`.${prefix}-inv-4`]: {
|
||||
[cssProperty]: theme("colors.secondary.950"),
|
||||
},
|
||||
[`.${prefix}-inv-5`]: {
|
||||
[cssProperty]: theme("colors.black"),
|
||||
},
|
||||
|
||||
[`.${prefix}-int-1`]: {
|
||||
[cssProperty]: theme("colors.info.500"),
|
||||
},
|
||||
[`.${prefix}-int-2`]: {
|
||||
[cssProperty]: theme("colors.info.600"),
|
||||
},
|
||||
[`.${prefix}-int-3`]: {
|
||||
[cssProperty]: theme("colors.info.700"),
|
||||
},
|
||||
[`.${prefix}-int-4`]: {
|
||||
[cssProperty]: theme("colors.info.800"),
|
||||
},
|
||||
|
||||
[`.${prefix}-semantic-1`]: {
|
||||
[cssProperty]: theme("colors.error.500"),
|
||||
},
|
||||
[`.${prefix}-semantic-2`]: {
|
||||
[cssProperty]: theme("colors.error.600"),
|
||||
},
|
||||
[`.${prefix}-semantic-3`]: {
|
||||
[cssProperty]: theme("colors.error.700"),
|
||||
},
|
||||
[`.${prefix}-semantic-4`]: {
|
||||
[cssProperty]: theme("colors.error.800"),
|
||||
},
|
||||
});
|
||||
|
||||
export default plugin.withOptions(
|
||||
(_options = {}) =>
|
||||
({ addUtilities, theme, addVariant, e }) => {
|
||||
// @ts-expect-error: lib of tailwind has no types
|
||||
addVariant("popover-open", ({ modifySelectors, separator }) => {
|
||||
// @ts-expect-error: lib of tailwind has no types
|
||||
modifySelectors(({ className }) => {
|
||||
return `.${e(`popover-open${separator}${className}`)}:popover-open`;
|
||||
});
|
||||
});
|
||||
addUtilities({
|
||||
// Background colors
|
||||
".bg-def-1": {
|
||||
backgroundColor: theme("colors.white"),
|
||||
},
|
||||
".bg-def-2": {
|
||||
backgroundColor: theme("colors.secondary.50"),
|
||||
},
|
||||
".bg-def-3": {
|
||||
backgroundColor: theme("colors.secondary.100"),
|
||||
},
|
||||
".bg-def-4": {
|
||||
backgroundColor: theme("colors.secondary.200"),
|
||||
},
|
||||
".bg-def-5": {
|
||||
backgroundColor: theme("colors.secondary.300"),
|
||||
},
|
||||
// bg inverse
|
||||
".bg-inv-1": {
|
||||
backgroundColor: theme("colors.primary.600"),
|
||||
},
|
||||
".bg-inv-2": {
|
||||
backgroundColor: theme("colors.primary.700"),
|
||||
},
|
||||
".bg-inv-3": {
|
||||
backgroundColor: theme("colors.primary.800"),
|
||||
},
|
||||
".bg-inv-4": {
|
||||
backgroundColor: theme("colors.primary.900"),
|
||||
},
|
||||
".bg-inv-5": {
|
||||
backgroundColor: theme("colors.primary.950"),
|
||||
},
|
||||
// bg inverse accent
|
||||
".bg-acc-1": {
|
||||
backgroundColor: theme("colors.primary.50"),
|
||||
},
|
||||
".bg-acc-2": {
|
||||
backgroundColor: theme("colors.secondary.100"),
|
||||
},
|
||||
".bg-acc-3": {
|
||||
backgroundColor: theme("colors.secondary.200"),
|
||||
},
|
||||
".bg-acc-4": {
|
||||
backgroundColor: theme("colors.secondary.300"),
|
||||
},
|
||||
|
||||
// bg inverse accent
|
||||
".bg-semantic-1": {
|
||||
backgroundColor: theme("colors.error.50"),
|
||||
},
|
||||
".bg-semantic-2": {
|
||||
backgroundColor: theme("colors.error.100"),
|
||||
},
|
||||
".bg-semantic-3": {
|
||||
backgroundColor: theme("colors.error.200"),
|
||||
},
|
||||
".bg-semantic-4": {
|
||||
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"),
|
||||
},
|
||||
".fg-def-2": {
|
||||
color: theme("colors.secondary.900"),
|
||||
},
|
||||
".fg-def-3": {
|
||||
color: theme("colors.secondary.700"),
|
||||
},
|
||||
".fg-def-4": {
|
||||
color: theme("colors.secondary.500"),
|
||||
},
|
||||
// fg inverse
|
||||
".fg-inv-1": {
|
||||
color: theme("colors.white"),
|
||||
},
|
||||
".fg-inv-2": {
|
||||
color: theme("colors.secondary.100"),
|
||||
},
|
||||
".fg-inv-3": {
|
||||
color: theme("colors.secondary.300"),
|
||||
},
|
||||
".fg-inv-4": {
|
||||
color: theme("colors.secondary.400"),
|
||||
},
|
||||
|
||||
".fg-semantic-1": {
|
||||
color: theme("colors.error.500"),
|
||||
},
|
||||
".fg-semantic-2": {
|
||||
color: theme("colors.error.600"),
|
||||
},
|
||||
".fg-semantic-3": {
|
||||
color: theme("colors.error.700"),
|
||||
},
|
||||
".fg-semantic-4": {
|
||||
color: theme("colors.error.800"),
|
||||
},
|
||||
|
||||
...mkBorderUtils(theme, "border", "borderColor"),
|
||||
...mkBorderUtils(theme, "outline", "outlineColor"),
|
||||
|
||||
// Example: dark mode utilities (all elements within <html class="dark"> )
|
||||
// ".dark .bg-def-1": {
|
||||
// backgroundColor: theme("colors.black"),
|
||||
// },
|
||||
// ".dark .bg-def-2": {
|
||||
// backgroundColor: theme("colors.primary.900"),
|
||||
// },
|
||||
// ".dark .bg-def-3": {
|
||||
// backgroundColor: theme("colors.primary.800"),
|
||||
// },
|
||||
// ".dark .bg-def-4": {
|
||||
// backgroundColor: theme("colors.primary.700"),
|
||||
// },
|
||||
// ".dark .bg-def-5": {
|
||||
// backgroundColor: theme("colors.primary.600"),
|
||||
// },
|
||||
});
|
||||
// add more base styles
|
||||
},
|
||||
// add configuration which is merged with the final config
|
||||
() => ({
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
white: toRGB("#ffffff"),
|
||||
black: toRGB("#000000"),
|
||||
primary: {
|
||||
50: toRGB("#f4f9f9"),
|
||||
100: toRGB("#dbeceb"),
|
||||
200: toRGB("#b6d9d6"),
|
||||
300: toRGB("#8abebc"),
|
||||
400: toRGB("#478585"),
|
||||
500: toRGB("#526f6f"),
|
||||
600: toRGB("#4b6667"),
|
||||
700: toRGB("#345253"),
|
||||
800: toRGB("#2a4647"),
|
||||
900: toRGB("#1f3536"),
|
||||
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"),
|
||||
800: toRGB("#446065"),
|
||||
900: toRGB("#2C4347"),
|
||||
950: toRGB("#0D1416"),
|
||||
},
|
||||
info: {
|
||||
50: toRGB("#eff9ff"),
|
||||
100: toRGB("#dff2ff"),
|
||||
200: toRGB("#b8e8ff"),
|
||||
300: toRGB("#78d6ff"),
|
||||
400: toRGB("#2cc0ff"),
|
||||
500: toRGB("#06aaf1"),
|
||||
600: toRGB("#006ca7"),
|
||||
700: toRGB("#006ca7"),
|
||||
800: toRGB("#025b8a"),
|
||||
900: toRGB("#084c72"),
|
||||
950: toRGB("#06304b"),
|
||||
},
|
||||
error: {
|
||||
50: toRGB("#fcf3f8"),
|
||||
100: toRGB("#f9eaf4"),
|
||||
200: toRGB("#f5d5e9"),
|
||||
300: toRGB("#ea9ecb"),
|
||||
400: toRGB("#e383ba"),
|
||||
500: toRGB("#d75d9f"),
|
||||
600: toRGB("#c43e81"),
|
||||
700: toRGB("#a82e67"),
|
||||
800: toRGB("#8c2855"),
|
||||
900: toRGB("#75264a"),
|
||||
950: toRGB("#461129"),
|
||||
},
|
||||
},
|
||||
boxShadow: {
|
||||
"input-active": "0px 0px 0px 1px #FFF, 0px 0px 0px 2px #203637",
|
||||
"inner-primary":
|
||||
"2px 2px 0px 0px var(--clr-bg-inv-acc-3, #415E63) inset",
|
||||
"inner-primary-active":
|
||||
"0px 0px 0px 1px #FFF, 0px 0px 0px 2px var(--clr-bg-inv-acc-4, #203637)",
|
||||
"inner-secondary":
|
||||
"-2px -2px 0px 0px #CEDFE2 inset, 2px 2px 0px 0px white inset",
|
||||
"inner-secondary-active":
|
||||
"0px 0px 0px 1px white, 0px 0px 0px 2px var(--clr-bg-inv-acc-4, #203637), 2px 2px 0px 0px var(--clr-bg-inv-acc-2, #4F747A) inset",
|
||||
},
|
||||
},
|
||||
...typography,
|
||||
},
|
||||
}),
|
||||
);
|
||||
22
pkgs/clan-app/ui/tailwind/typography.ts
Normal file
22
pkgs/clan-app/ui/tailwind/typography.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import defaultTheme from "tailwindcss/defaultTheme";
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
export const typography: Partial<Config["theme"]> = {
|
||||
fontFamily: {
|
||||
sans: ["Archivo", ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
fontSize: {
|
||||
...defaultTheme.fontSize,
|
||||
title: ["1.125rem", { lineHeight: "124%" }],
|
||||
"title-m": ["1.25rem", { lineHeight: "124%" }],
|
||||
"title-l": ["1.375rem", { lineHeight: "124%" }],
|
||||
label: ["0.8125rem", { lineHeight: "100%" }],
|
||||
"label-s": ["0.75rem", { lineHeight: "100%" }],
|
||||
"label-xs": ["0.6875rem", { lineHeight: "124%" }],
|
||||
},
|
||||
// textColor: {
|
||||
// ...defaultTheme.textColor,
|
||||
// primary: "#0D1416",
|
||||
// secondary: "#2C4347",
|
||||
// },
|
||||
} as const;
|
||||
Reference in New Issue
Block a user