movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 15:23:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor to tamagui

Browse Source
This commit is contained in:
Jorrin
2024-03-18 22:02:54 +01:00
parent 069c8cbb89
commit 52978f6d68
75 changed files with 5537 additions and 2988 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
tooling/tailwind/package.json → tooling/colors/package.json
View File

@@ -1,11 +1,11 @@
{
"name": "@movie-web/tailwind-config",
"version": "0.1.0",
"name": "@movie-web/colors",
"private": true,
"version": "0.1.0",
"type": "module",
"main": "./src/index.ts",
"exports": {
"./native": "./native.ts",
"./themes": "./themes/index.ts"
".": "./src/index.ts"
},
"license": "MIT",
"scripts": {
@@ -14,13 +14,6 @@
"lint": "eslint .",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"autoprefixer": "^10.4.17",
"postcss": "^8.4.32",
"tailwindcss": "^3.4.0",
"tailwindcss-animate": "^1.0.7",
"tailwindcss-themer": "^4.0.0"
},
"devDependencies": {
"@movie-web/eslint-config": "workspace:^0.2.0",
"@movie-web/prettier-config": "workspace:^0.1.0",
@@ -30,7 +23,6 @@
"typescript": "^5.3.3"
},
"eslintConfig": {
"root": true,
"extends": [
"@movie-web/eslint-config/base"
]

93
tooling/colors/src/index.ts Normal file
View File

@@ -0,0 +1,93 @@
import { tokens as blueTokens } from "./list/blue";
import { tokens as grayTokens } from "./list/gray";
import { tokens as redTokens } from "./list/red";
import { tokens as tealTokens } from "./list/teal";
export { blueTokens, grayTokens, redTokens, tealTokens };
export const name = "colors";
export const mainTokens = {
black: "#000000",
white: "#FFFFFF",
semantic: {
red: {
c100: "#F46E6E",
c200: "#E44F4F",
c300: "#D74747",
c400: "#B43434",
},
green: {
c100: "#60D26A",
c200: "#40B44B",
c300: "#31A33C",
c400: "#237A2B",
},
silver: {
c100: "#DEDEDE",
c200: "#B6CAD7",
c300: "#8EA3B0",
c400: "#617A8A",
},
yellow: {
c100: "#FFF599",
c200: "#FCEC61",
c300: "#D8C947",
c400: "#AFA349",
},
rose: {
c100: "#DB3D61",
c200: "#8A293B",
c300: "#812435",
c400: "#701B2B",
},
},
blue: {
c50: "#ADADF5",
c100: "#7979CC",
c200: "#5D5DAE",
c300: "#3B3B8C",
c400: "#2A2A71",
c500: "#1F1F50",
c600: "#1B1B41",
c700: "#171736",
c800: "#101020",
c900: "#0B0B13",
},
purple: {
c50: "#D5AAFF",
c100: "#C082FF",
c200: "#A359EC",
c300: "#8D44D6",
c400: "#7831BF",
c500: "#572887",
c600: "#411F64",
c700: "#31184A",
c800: "#221134",
c900: "#160B22",
},
ash: {
c50: "#7F8D9B",
c100: "#5B6B7B",
c200: "#445464",
c300: "#2B3D4E",
c400: "#203242",
c500: "#1C2C3C",
c600: "#172532",
c700: "#131E29",
c800: "#101820",
c900: "#0C1216",
},
shade: {
c50: "#676790",
c100: "#52527A",
c200: "#3F3F60",
c300: "#32324F",
c400: "#272741",
c500: "#1E1E32",
c600: "#171728",
c700: "#131322",
c800: "#0F0F1B",
c900: "#0A0A12",
},
};

84
tooling/colors/src/list/blue.ts Normal file
View File

@@ -0,0 +1,84 @@
export const tokens = {
black: "#000000",
white: "#FFFFFF",
semantic: {
red: {
c100: "#F46E6E",
c200: "#E44F4F",
c300: "#D74747",
c400: "#B43434",
},
green: {
c100: "#60D26A",
c200: "#40B44B",
c300: "#31A33C",
c400: "#237A2B",
},
silver: {
c100: "#DEDEDE",
c200: "#B6CAD7",
c300: "#8EA3B0",
c400: "#617A8A",
},
yellow: {
c100: "#FFF599",
c200: "#FCEC61",
c300: "#D8C947",
c400: "#AFA349",
},
rose: {
c100: "#DB3D61",
c200: "#8A293B",
c300: "#812435",
c400: "#701B2B",
},
},
purple: {
c50: "#aac5ff",
c100: "#82a9ff",
c200: "#4681ff",
c300: "#1a63ff",
c400: "#054eec",
c500: "#083aa7",
c600: "#072c7c",
c700: "#06215d",
c800: "#041741",
c900: "#03102a",
},
shade: {
c50: "#756790",
c100: "#60527a",
c200: "#4a3f60",
c300: "#3c324f",
c400: "#302741",
c500: "#251e32",
c600: "#1d1728",
c700: "#181322",
c800: "#130f1b",
c900: "#0d0a12",
},
ash: {
c50: "#7f859b",
c100: "#5b627b",
c200: "#444b64",
c300: "#2b344e",
c400: "#202842",
c500: "#1c243c",
c600: "#171d32",
c700: "#131829",
c800: "#101420",
c900: "#0c0f16",
},
blue: {
c50: "#adb4f5",
c100: "#7981cc",
c200: "#5d65ae",
c300: "#3b438c",
c400: "#2a3171",
c500: "#1f2450",
c600: "#1b1f41",
c700: "#171b36",
c800: "#101120",
c900: "#0b0c13",
},
};

84
tooling/colors/src/list/gray.ts Normal file
View File

@@ -0,0 +1,84 @@
export const tokens = {
black: "#000000",
white: "#FFFFFF",
semantic: {
red: {
c100: "#F46E6E",
c200: "#E44F4F",
c300: "#D74747",
c400: "#B43434",
},
green: {
c100: "#60D26A",
c200: "#40B44B",
c300: "#31A33C",
c400: "#237A2B",
},
silver: {
c100: "#DEDEDE",
c200: "#B6CAD7",
c300: "#8EA3B0",
c400: "#617A8A",
},
yellow: {
c100: "#FFF599",
c200: "#FCEC61",
c300: "#D8C947",
c400: "#AFA349",
},
rose: {
c100: "#DB3D61",
c200: "#8A293B",
c300: "#812435",
c400: "#701B2B",
},
},
purple: {
c50: "#aaafff",
c100: "#8288fe",
c200: "#5a62eb",
c300: "#454cd4",
c400: "#333abe",
c500: "#292d86",
c600: "#1f2363",
c700: "#191b4a",
c800: "#111334",
c900: "#0b0d22",
},
shade: {
c50: "#7c7c7c",
c100: "#666666",
c200: "#4f4f4f",
c300: "#404040",
c400: "#343434",
c500: "#282828",
c600: "#202020",
c700: "#1a1a1a",
c800: "#151515",
c900: "#0e0e0e",
},
ash: {
c50: "#8d8d8d",
c100: "#6b6b6b",
c200: "#545454",
c300: "#3c3c3c",
c400: "#313131",
c500: "#2c2c2c",
c600: "#252525",
c700: "#1e1e1e",
c800: "#181818",
c900: "#111111",
},
blue: {
c50: "#ccccd6",
c100: "#a2a2a2",
c200: "#868686",
c300: "#646464",
c400: "#4e4e4e",
c500: "#383838",
c600: "#2e2e2e",
c700: "#272727",
c800: "#181818",
c900: "#0f0f0f",
},
};

84
tooling/colors/src/list/red.ts Normal file
View File

@@ -0,0 +1,84 @@
export const tokens = {
black: "#000000",
white: "#FFFFFF",
semantic: {
red: {
c100: "#F46E6E",
c200: "#E44F4F",
c300: "#D74747",
c400: "#B43434",
},
green: {
c100: "#60D26A",
c200: "#40B44B",
c300: "#31A33C",
c400: "#237A2B",
},
silver: {
c100: "#DEDEDE",
c200: "#B6CAD7",
c300: "#8EA3B0",
c400: "#617A8A",
},
yellow: {
c100: "#FFF599",
c200: "#FCEC61",
c300: "#D8C947",
c400: "#AFA349",
},
rose: {
c100: "#DB3D61",
c200: "#8A293B",
c300: "#812435",
c400: "#701B2B",
},
},
purple: {
c50: "#feabac",
c100: "#fe8385",
c200: "#ea5b5e",
c300: "#d34648",
c400: "#bd3436",
c500: "#852a2b",
c600: "#632021",
c700: "#49191a",
c800: "#331112",
c900: "#220c0c",
},
shade: {
c50: "#9c605c",
c100: "#834d49",
c200: "#673b38",
c300: "#542f2c",
c400: "#452422",
c500: "#361c1a",
c600: "#2b1614",
c700: "#241210",
c800: "#1c0e0d",
c900: "#130909",
},
ash: {
c50: "#ac6e6f",
c100: "#8b4b4c",
c200: "#703739",
c300: "#572225",
c400: "#49191a",
c500: "#421617",
c600: "#371212",
c700: "#2e0e0f",
c800: "#230c0d",
c900: "#19090b",
},
blue: {
c50: "#f5adb4",
c100: "#cc7981",
c200: "#ae5d65",
c300: "#8c3b43",
c400: "#712a31",
c500: "#501f24",
c600: "#411b1f",
c700: "#36171b",
c800: "#201011",
c900: "#130b0c",
},
};

84
tooling/colors/src/list/teal.ts Normal file
View File

@@ -0,0 +1,84 @@
export const tokens = {
black: "#000000",
white: "#FFFFFF",
semantic: {
red: {
c100: "#F46E6E",
c200: "#E44F4F",
c300: "#D74747",
c400: "#B43434",
},
green: {
c100: "#60D26A",
c200: "#40B44B",
c300: "#31A33C",
c400: "#237A2B",
},
silver: {
c100: "#DEDEDE",
c200: "#B6CAD7",
c300: "#8EA3B0",
c400: "#617A8A",
},
yellow: {
c100: "#FFF599",
c200: "#FCEC61",
c300: "#D8C947",
c400: "#AFA349",
},
rose: {
c100: "#DB3D61",
c200: "#8A293B",
c300: "#812435",
c400: "#701B2B",
},
},
purple: {
c50: "#aad7ff",
c100: "#82c4ff",
c200: "#59a8ec",
c300: "#4491d6",
c400: "#317dbf",
c500: "#285b87",
c600: "#1f4464",
c700: "#18334a",
c800: "#112434",
c900: "#0b1822",
},
shade: {
c50: "#677c90",
c100: "#52667a",
c200: "#3f4f60",
c300: "#32404f",
c400: "#273441",
c500: "#1e2832",
c600: "#172028",
c700: "#131a22",
c800: "#0f151b",
c900: "#0a0e12",
},
ash: {
c50: "#7f9b9b",
c100: "#5b7b7b",
c200: "#446463",
c300: "#2b4e4d",
c400: "#204241",
c500: "#1c3c3b",
c600: "#173232",
c700: "#132929",
c800: "#102020",
c900: "#0c1615",
},
blue: {
c50: "#adf5d6",
c100: "#79cca8",
c200: "#5dae8b",
c300: "#3b8c69",
c400: "#2a7152",
c500: "#1f503b",
c600: "#1b4130",
c700: "#173629",
c800: "#102019",
c900: "#0b1310",
},
};

8
tooling/colors/tsconfig.json Normal file
View File

@@ -0,0 +1,8 @@
{
"extends": "@movie-web/tsconfig/base.json",
"compilerOptions": {
"tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
},
"include": ["*.ts", "src"],
"exclude": ["node_modules"]
}

1
tooling/eslint/base.js
View File

@@ -30,6 +30,7 @@ const config = {
],
"import/consistent-type-specifier-style": ["error", "prefer-top-level"],
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-unsafe-argument": "off",
},
ignorePatterns: [
"**/*.config.js",

10
tooling/prettier/index.js
View File

@@ -1,19 +1,11 @@
import { fileURLToPath } from "url";
/** @typedef {import("prettier").Config} PrettierConfig */
/** @typedef {import("prettier-plugin-tailwindcss").PluginOptions} TailwindConfig */
/** @typedef {import("@ianvs/prettier-plugin-sort-imports").PluginConfig} SortImportsConfig */
/** @type { PrettierConfig | SortImportsConfig | TailwindConfig } */
/** @type { PrettierConfig | SortImportsConfig } */
const config = {
plugins: [
"@ianvs/prettier-plugin-sort-imports",
"prettier-plugin-tailwindcss",
],
tailwindConfig: fileURLToPath(
new URL("../../tooling/tailwind/native.ts", import.meta.url),
),
tailwindFunctions: ["cn", "cva"],
importOrder: [
"<TYPES>",
"^(react/(.*)$)|^(react$)|^(react-native(.*)$)",

22
tooling/tailwind/native.ts
View File

@@ -1,22 +0,0 @@
import type { Config } from "tailwindcss";
import themer from "tailwindcss-themer";
import { allThemes, defaultTheme, safeThemeList } from "./themes";
export default {
content: ["src/**/*.{ts,tsx}"],
safelist: safeThemeList,
plugins: [
themer({
defaultTheme,
themes: [
{
name: "default",
selectors: [".theme-default"],
...defaultTheme,
},
...allThemes,
],
}),
],
} satisfies Config;

6
tooling/tailwind/themes/all.ts
View File

@@ -1,6 +0,0 @@
import blue from "./list/blue";
import gray from "./list/gray";
import red from "./list/red";
import teal from "./list/teal";
export const allThemes = [teal, blue, gray, red];

352
tooling/tailwind/themes/default.ts
View File

@@ -1,352 +0,0 @@
const tokens = {
black: "#000000",
white: "#FFFFFF",
semantic: {
red: {
c100: "#F46E6E",
c200: "#E44F4F",
c300: "#D74747",
c400: "#B43434",
},
green: {
c100: "#60D26A",
c200: "#40B44B",
c300: "#31A33C",
c400: "#237A2B",
},
silver: {
c100: "#DEDEDE",
c200: "#B6CAD7",
c300: "#8EA3B0",
c400: "#617A8A",
},
yellow: {
c100: "#FFF599",
c200: "#FCEC61",
c300: "#D8C947",
c400: "#AFA349",
},
rose: {
c100: "#DB3D61",
c200: "#8A293B",
c300: "#812435",
c400: "#701B2B",
},
},
blue: {
c50: "#ADADF5",
c100: "#7979CC",
c200: "#5D5DAE",
c300: "#3B3B8C",
c400: "#2A2A71",
c500: "#1F1F50",
c600: "#1B1B41",
c700: "#171736",
c800: "#101020",
c900: "#0B0B13",
},
purple: {
c50: "#D5AAFF",
c100: "#C082FF",
c200: "#A359EC",
c300: "#8D44D6",
c400: "#7831BF",
c500: "#572887",
c600: "#411F64",
c700: "#31184A",
c800: "#221134",
c900: "#160B22",
},
ash: {
c50: "#7F8D9B",
c100: "#5B6B7B",
c200: "#445464",
c300: "#2B3D4E",
c400: "#203242",
c500: "#1C2C3C",
c600: "#172532",
c700: "#131E29",
c800: "#101820",
c900: "#0C1216",
},
shade: {
c50: "#676790",
c100: "#52527A",
c200: "#3F3F60",
c300: "#32324F",
c400: "#272741",
c500: "#1E1E32",
c600: "#171728",
c700: "#131322",
c800: "#0F0F1B",
c900: "#0A0A12",
},
};
export const defaultTheme = {
extend: {
colors: {
themePreview: {
primary: tokens.blue.c200,
secondary: tokens.shade.c50,
ghost: tokens.white,
},
// Branding
pill: {
background: tokens.shade.c300,
backgroundHover: tokens.shade.c200,
highlight: tokens.blue.c200,
activeBackground: tokens.shade.c300,
},
// meta data for the theme itself
global: {
accentA: tokens.blue.c200,
accentB: tokens.blue.c300,
},
// light bar
lightBar: {
light: tokens.blue.c400,
},
// Buttons
buttons: {
toggle: tokens.purple.c300,
toggleDisabled: tokens.ash.c500,
danger: tokens.semantic.rose.c300,
dangerHover: tokens.semantic.rose.c200,
secondary: tokens.ash.c700,
secondaryText: tokens.semantic.silver.c300,
secondaryHover: tokens.ash.c700,
primary: tokens.white,
primaryText: tokens.black,
primaryHover: tokens.semantic.silver.c100,
purple: tokens.purple.c500,
purpleHover: tokens.purple.c400,
cancel: tokens.ash.c500,
cancelHover: tokens.ash.c300,
},
// only used for body colors/textures
background: {
main: tokens.shade.c900,
secondary: tokens.shade.c600,
secondaryHover: tokens.shade.c400,
accentA: tokens.purple.c500,
accentB: tokens.blue.c500,
},
// Modals
modal: {
background: tokens.shade.c800,
},
// typography
type: {
logo: tokens.purple.c100,
emphasis: tokens.white,
text: tokens.shade.c50,
dimmed: tokens.shade.c50,
divider: tokens.ash.c500,
secondary: tokens.ash.c100,
danger: tokens.semantic.red.c100,
success: tokens.semantic.green.c100,
link: tokens.purple.c100,
linkHover: tokens.purple.c50,
},
// search bar
search: {
background: tokens.shade.c500,
hoverBackground: tokens.shade.c600,
focused: tokens.shade.c400,
placeholder: tokens.shade.c100,
icon: tokens.shade.c100,
text: tokens.white,
},
// media cards
mediaCard: {
hoverBackground: tokens.shade.c600,
hoverAccent: tokens.shade.c50,
hoverShadow: tokens.shade.c900,
shadow: tokens.shade.c700,
barColor: tokens.ash.c200,
barFillColor: tokens.purple.c100,
badge: tokens.shade.c700,
badgeText: tokens.ash.c100,
},
// Large card
largeCard: {
background: tokens.shade.c600,
icon: tokens.purple.c400,
},
// Dropdown
dropdown: {
background: tokens.shade.c600,
altBackground: tokens.shade.c700,
hoverBackground: tokens.shade.c500,
highlight: tokens.semantic.yellow.c400,
highlightHover: tokens.semantic.yellow.c200,
text: tokens.shade.c50,
secondary: tokens.shade.c100,
border: tokens.shade.c400,
contentBackground: tokens.shade.c500,
},
// Passphrase
authentication: {
border: tokens.shade.c300,
inputBg: tokens.shade.c600,
inputBgHover: tokens.shade.c500,
wordBackground: tokens.shade.c500,
copyText: tokens.shade.c100,
copyTextHover: tokens.ash.c50,
errorText: tokens.semantic.rose.c100,
},
// Settings page
settings: {
sidebar: {
activeLink: tokens.shade.c600,
badge: tokens.shade.c900,
type: {
secondary: tokens.shade.c200,
inactive: tokens.shade.c50,
icon: tokens.shade.c50,
iconActivated: tokens.purple.c200,
activated: tokens.purple.c50,
},
},
card: {
border: tokens.shade.c400,
background: tokens.shade.c400,
altBackground: tokens.shade.c400,
},
saveBar: {
background: tokens.shade.c800,
},
},
// Utilities
utils: {
divider: tokens.ash.c300,
},
// Onboarding
onboarding: {
bar: tokens.shade.c400,
barFilled: tokens.purple.c300,
divider: tokens.shade.c200,
card: tokens.shade.c800,
cardHover: tokens.shade.c700,
border: tokens.shade.c600,
good: tokens.purple.c100,
best: tokens.semantic.yellow.c100,
link: tokens.purple.c100,
},
// Error page
errors: {
card: tokens.shade.c800,
border: tokens.ash.c500,
type: {
secondary: tokens.ash.c100,
},
},
// About page
about: {
circle: tokens.ash.c500,
circleText: tokens.ash.c50,
},
// About page
editBadge: {
bg: tokens.ash.c500,
bgHover: tokens.ash.c400,
text: tokens.ash.c50,
},
progress: {
background: tokens.ash.c50,
preloaded: tokens.ash.c50,
filled: tokens.purple.c200,
},
// video player
video: {
buttonBackground: tokens.ash.c200,
autoPlay: {
background: tokens.ash.c700,
hover: tokens.ash.c500,
},
scraping: {
card: tokens.shade.c700,
error: tokens.semantic.red.c200,
success: tokens.semantic.green.c200,
loading: tokens.purple.c200,
noresult: tokens.ash.c100,
},
audio: {
set: tokens.purple.c200,
},
context: {
background: tokens.ash.c900,
light: tokens.shade.c50,
border: tokens.ash.c600,
hoverColor: tokens.ash.c600,
buttonFocus: tokens.ash.c500,
flagBg: tokens.ash.c500,
inputBg: tokens.ash.c600,
buttonOverInputHover: tokens.ash.c500,
inputPlaceholder: tokens.ash.c200,
cardBorder: tokens.ash.c700,
slider: tokens.ash.c50,
sliderFilled: tokens.purple.c200,
error: tokens.semantic.red.c200,
buttons: {
list: tokens.ash.c700,
active: tokens.ash.c900,
},
closeHover: tokens.ash.c800,
type: {
main: tokens.semantic.silver.c400,
secondary: tokens.ash.c200,
accent: tokens.purple.c200,
},
},
},
// tabBar
tabBar: {
background: tokens.shade.c700,
active: tokens.purple.c200,
inactive: tokens.shade.c300,
},
// download
download: {
progress: tokens.ash.c50,
progressFilled: tokens.purple.c200,
},
},
},
};

9
tooling/tailwind/themes/index.ts
View File

@@ -1,9 +0,0 @@
import { allThemes } from "./all";
export { defaultTheme } from "./default";
export { allThemes } from "./all";
export const safeThemeList = allThemes
.flatMap((v) => v.selectors)
.filter((v) => v.startsWith("."))
.map((v) => v.slice(1)); // remove dot from selector

259
tooling/tailwind/themes/list/blue.ts
View File

@@ -1,259 +0,0 @@
import { createTheme } from "../types";
const tokens = {
purple: {
c50: "#aac5ff",
c100: "#82a9ff",
c200: "#4681ff",
c300: "#1a63ff",
c400: "#054eec",
c500: "#083aa7",
c600: "#072c7c",
c700: "#06215d",
c800: "#041741",
c900: "#03102a",
},
shade: {
c50: "#756790",
c100: "#60527a",
c200: "#4a3f60",
c300: "#3c324f",
c400: "#302741",
c500: "#251e32",
c600: "#1d1728",
c700: "#181322",
c800: "#130f1b",
c900: "#0d0a12",
},
ash: {
c50: "#7f859b",
c100: "#5b627b",
c200: "#444b64",
c300: "#2b344e",
c400: "#202842",
c500: "#1c243c",
c600: "#171d32",
c700: "#131829",
c800: "#101420",
c900: "#0c0f16",
},
blue: {
c50: "#adb4f5",
c100: "#7981cc",
c200: "#5d65ae",
c300: "#3b438c",
c400: "#2a3171",
c500: "#1f2450",
c600: "#1b1f41",
c700: "#171b36",
c800: "#101120",
c900: "#0b0c13",
},
};
export default createTheme({
name: "blue",
extend: {
colors: {
themePreview: {
primary: tokens.blue.c200,
secondary: tokens.shade.c50,
},
pill: {
background: tokens.shade.c300,
backgroundHover: tokens.shade.c200,
highlight: tokens.blue.c200,
activeBackground: tokens.shade.c300,
},
global: {
accentA: tokens.blue.c200,
accentB: tokens.blue.c300,
},
lightBar: {
light: tokens.blue.c400,
},
buttons: {
toggle: tokens.purple.c300,
toggleDisabled: tokens.ash.c500,
secondary: tokens.ash.c700,
secondaryHover: tokens.ash.c700,
purple: tokens.purple.c500,
purpleHover: tokens.purple.c400,
cancel: tokens.ash.c500,
cancelHover: tokens.ash.c300,
},
background: {
main: tokens.shade.c900,
secondary: tokens.shade.c600,
secondaryHover: tokens.shade.c400,
accentA: tokens.purple.c500,
accentB: tokens.blue.c500,
},
modal: {
background: tokens.shade.c800,
},
type: {
logo: tokens.purple.c100,
text: tokens.shade.c50,
dimmed: tokens.shade.c50,
divider: tokens.ash.c500,
secondary: tokens.ash.c100,
link: tokens.purple.c100,
linkHover: tokens.purple.c50,
},
search: {
background: tokens.shade.c500,
hoverBackground: tokens.shade.c600,
focused: tokens.shade.c400,
placeholder: tokens.shade.c100,
icon: tokens.shade.c100,
},
mediaCard: {
hoverBackground: tokens.shade.c600,
hoverAccent: tokens.shade.c50,
hoverShadow: tokens.shade.c900,
shadow: tokens.shade.c700,
barColor: tokens.ash.c200,
barFillColor: tokens.purple.c100,
badge: tokens.shade.c700,
badgeText: tokens.ash.c100,
},
largeCard: {
background: tokens.shade.c600,
icon: tokens.purple.c400,
},
dropdown: {
background: tokens.shade.c600,
altBackground: tokens.shade.c700,
hoverBackground: tokens.shade.c500,
text: tokens.shade.c50,
secondary: tokens.shade.c100,
border: tokens.shade.c400,
contentBackground: tokens.shade.c500,
},
authentication: {
border: tokens.shade.c300,
inputBg: tokens.shade.c600,
inputBgHover: tokens.shade.c500,
wordBackground: tokens.shade.c500,
copyText: tokens.shade.c100,
copyTextHover: tokens.ash.c50,
},
settings: {
sidebar: {
activeLink: tokens.shade.c600,
badge: tokens.shade.c900,
type: {
secondary: tokens.shade.c200,
inactive: tokens.shade.c50,
icon: tokens.shade.c50,
iconActivated: tokens.purple.c200,
activated: tokens.purple.c50,
},
},
card: {
border: tokens.shade.c400,
background: tokens.shade.c400,
altBackground: tokens.shade.c400,
},
saveBar: {
background: tokens.shade.c800,
},
},
utils: {
divider: tokens.ash.c300,
},
errors: {
card: tokens.shade.c800,
border: tokens.ash.c500,
type: {
secondary: tokens.ash.c100,
},
},
about: {
circle: tokens.ash.c500,
circleText: tokens.ash.c50,
},
editBadge: {
bg: tokens.ash.c500,
bgHover: tokens.ash.c400,
text: tokens.ash.c50,
},
progress: {
background: tokens.ash.c50,
preloaded: tokens.ash.c50,
filled: tokens.purple.c200,
},
video: {
buttonBackground: tokens.ash.c200,
autoPlay: {
background: tokens.ash.c700,
hover: tokens.ash.c500,
},
scraping: {
card: tokens.shade.c700,
loading: tokens.purple.c200,
noresult: tokens.ash.c100,
},
audio: {
set: tokens.purple.c200,
},
context: {
background: tokens.ash.c900,
light: tokens.shade.c50,
border: tokens.ash.c600,
hoverColor: tokens.ash.c600,
buttonFocus: tokens.ash.c500,
flagBg: tokens.ash.c500,
inputBg: tokens.ash.c600,
buttonOverInputHover: tokens.ash.c500,
inputPlaceholder: tokens.ash.c200,
cardBorder: tokens.ash.c700,
slider: tokens.ash.c50,
sliderFilled: tokens.purple.c200,
buttons: {
list: tokens.ash.c700,
active: tokens.ash.c900,
},
closeHover: tokens.ash.c800,
type: {
secondary: tokens.ash.c200,
accent: tokens.purple.c200,
},
},
},
},
},
});

259
tooling/tailwind/themes/list/gray.ts
View File

@@ -1,259 +0,0 @@
import { createTheme } from "../types";
const tokens = {
purple: {
c50: "#aaafff",
c100: "#8288fe",
c200: "#5a62eb",
c300: "#454cd4",
c400: "#333abe",
c500: "#292d86",
c600: "#1f2363",
c700: "#191b4a",
c800: "#111334",
c900: "#0b0d22",
},
shade: {
c50: "#7c7c7c",
c100: "#666666",
c200: "#4f4f4f",
c300: "#404040",
c400: "#343434",
c500: "#282828",
c600: "#202020",
c700: "#1a1a1a",
c800: "#151515",
c900: "#0e0e0e",
},
ash: {
c50: "#8d8d8d",
c100: "#6b6b6b",
c200: "#545454",
c300: "#3c3c3c",
c400: "#313131",
c500: "#2c2c2c",
c600: "#252525",
c700: "#1e1e1e",
c800: "#181818",
c900: "#111111",
},
blue: {
c50: "#ccccd6",
c100: "#a2a2a2",
c200: "#868686",
c300: "#646464",
c400: "#4e4e4e",
c500: "#383838",
c600: "#2e2e2e",
c700: "#272727",
c800: "#181818",
c900: "#0f0f0f",
},
};
export default createTheme({
name: "gray",
extend: {
colors: {
themePreview: {
primary: tokens.blue.c200,
secondary: tokens.shade.c50,
},
pill: {
background: tokens.shade.c300,
backgroundHover: tokens.shade.c200,
highlight: tokens.blue.c200,
activeBackground: tokens.shade.c300,
},
global: {
accentA: tokens.blue.c200,
accentB: tokens.blue.c300,
},
lightBar: {
light: tokens.blue.c400,
},
buttons: {
toggle: tokens.purple.c300,
toggleDisabled: tokens.ash.c500,
secondary: tokens.ash.c700,
secondaryHover: tokens.ash.c700,
purple: tokens.purple.c500,
purpleHover: tokens.purple.c400,
cancel: tokens.ash.c500,
cancelHover: tokens.ash.c300,
},
background: {
main: tokens.shade.c900,
secondary: tokens.shade.c600,
secondaryHover: tokens.shade.c400,
accentA: tokens.purple.c500,
accentB: tokens.blue.c500,
},
modal: {
background: tokens.shade.c800,
},
type: {
logo: tokens.purple.c100,
text: tokens.shade.c50,
dimmed: tokens.shade.c50,
divider: tokens.ash.c500,
secondary: tokens.ash.c100,
link: tokens.purple.c100,
linkHover: tokens.purple.c50,
},
search: {
background: tokens.shade.c500,
hoverBackground: tokens.shade.c600,
focused: tokens.shade.c400,
placeholder: tokens.shade.c100,
icon: tokens.shade.c100,
},
mediaCard: {
hoverBackground: tokens.shade.c600,
hoverAccent: tokens.shade.c50,
hoverShadow: tokens.shade.c900,
shadow: tokens.shade.c700,
barColor: tokens.ash.c200,
barFillColor: tokens.purple.c100,
badge: tokens.shade.c700,
badgeText: tokens.ash.c100,
},
largeCard: {
background: tokens.shade.c600,
icon: tokens.purple.c400,
},
dropdown: {
background: tokens.shade.c600,
altBackground: tokens.shade.c700,
hoverBackground: tokens.shade.c500,
text: tokens.shade.c50,
secondary: tokens.shade.c100,
border: tokens.shade.c400,
contentBackground: tokens.shade.c500,
},
authentication: {
border: tokens.shade.c300,
inputBg: tokens.shade.c600,
inputBgHover: tokens.shade.c500,
wordBackground: tokens.shade.c500,
copyText: tokens.shade.c100,
copyTextHover: tokens.ash.c50,
},
settings: {
sidebar: {
activeLink: tokens.shade.c600,
badge: tokens.shade.c900,
type: {
secondary: tokens.shade.c200,
inactive: tokens.shade.c50,
icon: tokens.shade.c50,
iconActivated: tokens.purple.c200,
activated: tokens.purple.c50,
},
},
card: {
border: tokens.shade.c400,
background: tokens.shade.c400,
altBackground: tokens.shade.c400,
},
saveBar: {
background: tokens.shade.c800,
},
},
utils: {
divider: tokens.ash.c300,
},
errors: {
card: tokens.shade.c800,
border: tokens.ash.c500,
type: {
secondary: tokens.ash.c100,
},
},
about: {
circle: tokens.ash.c500,
circleText: tokens.ash.c50,
},
editBadge: {
bg: tokens.ash.c500,
bgHover: tokens.ash.c400,
text: tokens.ash.c50,
},
progress: {
background: tokens.ash.c50,
preloaded: tokens.ash.c50,
filled: tokens.purple.c200,
},
video: {
buttonBackground: tokens.ash.c200,
autoPlay: {
background: tokens.ash.c700,
hover: tokens.ash.c500,
},
scraping: {
card: tokens.shade.c700,
loading: tokens.purple.c200,
noresult: tokens.ash.c100,
},
audio: {
set: tokens.purple.c200,
},
context: {
background: tokens.ash.c900,
light: tokens.shade.c50,
border: tokens.ash.c600,
hoverColor: tokens.ash.c600,
buttonFocus: tokens.ash.c500,
flagBg: tokens.ash.c500,
inputBg: tokens.ash.c600,
buttonOverInputHover: tokens.ash.c500,
inputPlaceholder: tokens.ash.c200,
cardBorder: tokens.ash.c700,
slider: tokens.ash.c50,
sliderFilled: tokens.purple.c200,
buttons: {
list: tokens.ash.c700,
active: tokens.ash.c900,
},
closeHover: tokens.ash.c800,
type: {
secondary: tokens.ash.c200,
accent: tokens.purple.c200,
},
},
},
},
},
});

259
tooling/tailwind/themes/list/red.ts
View File

@@ -1,259 +0,0 @@
import { createTheme } from "../types";
const tokens = {
purple: {
c50: "#feabac",
c100: "#fe8385",
c200: "#ea5b5e",
c300: "#d34648",
c400: "#bd3436",
c500: "#852a2b",
c600: "#632021",
c700: "#49191a",
c800: "#331112",
c900: "#220c0c",
},
shade: {
c50: "#9c605c",
c100: "#834d49",
c200: "#673b38",
c300: "#542f2c",
c400: "#452422",
c500: "#361c1a",
c600: "#2b1614",
c700: "#241210",
c800: "#1c0e0d",
c900: "#130909",
},
ash: {
c50: "#ac6e6f",
c100: "#8b4b4c",
c200: "#703739",
c300: "#572225",
c400: "#49191a",
c500: "#421617",
c600: "#371212",
c700: "#2e0e0f",
c800: "#230c0d",
c900: "#19090b",
},
blue: {
c50: "#f5adb4",
c100: "#cc7981",
c200: "#ae5d65",
c300: "#8c3b43",
c400: "#712a31",
c500: "#501f24",
c600: "#411b1f",
c700: "#36171b",
c800: "#201011",
c900: "#130b0c",
},
};
export default createTheme({
name: "red",
extend: {
colors: {
themePreview: {
primary: tokens.blue.c200,
secondary: tokens.shade.c50,
},
pill: {
background: tokens.shade.c300,
backgroundHover: tokens.shade.c200,
highlight: tokens.blue.c200,
activeBackground: tokens.shade.c300,
},
global: {
accentA: tokens.blue.c200,
accentB: tokens.blue.c300,
},
lightBar: {
light: tokens.blue.c400,
},
buttons: {
toggle: tokens.purple.c300,
toggleDisabled: tokens.ash.c500,
secondary: tokens.ash.c700,
secondaryHover: tokens.ash.c700,
purple: tokens.purple.c500,
purpleHover: tokens.purple.c400,
cancel: tokens.ash.c500,
cancelHover: tokens.ash.c300,
},
background: {
main: tokens.shade.c900,
secondary: tokens.shade.c600,
secondaryHover: tokens.shade.c400,
accentA: tokens.purple.c500,
accentB: tokens.blue.c500,
},
modal: {
background: tokens.shade.c800,
},
type: {
logo: tokens.purple.c100,
text: tokens.shade.c50,
dimmed: tokens.shade.c50,
divider: tokens.ash.c500,
secondary: tokens.ash.c100,
link: tokens.purple.c100,
linkHover: tokens.purple.c50,
},
search: {
background: tokens.shade.c500,
hoverBackground: tokens.shade.c600,
focused: tokens.shade.c400,
placeholder: tokens.shade.c100,
icon: tokens.shade.c100,
},
mediaCard: {
hoverBackground: tokens.shade.c600,
hoverAccent: tokens.shade.c50,
hoverShadow: tokens.shade.c900,
shadow: tokens.shade.c700,
barColor: tokens.ash.c200,
barFillColor: tokens.purple.c100,
badge: tokens.shade.c700,
badgeText: tokens.ash.c100,
},
largeCard: {
background: tokens.shade.c600,
icon: tokens.purple.c400,
},
dropdown: {
background: tokens.shade.c600,
altBackground: tokens.shade.c700,
hoverBackground: tokens.shade.c500,
text: tokens.shade.c50,
secondary: tokens.shade.c100,
border: tokens.shade.c400,
contentBackground: tokens.shade.c500,
},
authentication: {
border: tokens.shade.c300,
inputBg: tokens.shade.c600,
inputBgHover: tokens.shade.c500,
wordBackground: tokens.shade.c500,
copyText: tokens.shade.c100,
copyTextHover: tokens.ash.c50,
},
settings: {
sidebar: {
activeLink: tokens.shade.c600,
badge: tokens.shade.c900,
type: {
secondary: tokens.shade.c200,
inactive: tokens.shade.c50,
icon: tokens.shade.c50,
iconActivated: tokens.purple.c200,
activated: tokens.purple.c50,
},
},
card: {
border: tokens.shade.c400,
background: tokens.shade.c400,
altBackground: tokens.shade.c400,
},
saveBar: {
background: tokens.shade.c800,
},
},
utils: {
divider: tokens.ash.c300,
},
errors: {
card: tokens.shade.c800,
border: tokens.ash.c500,
type: {
secondary: tokens.ash.c100,
},
},
about: {
circle: tokens.ash.c500,
circleText: tokens.ash.c50,
},
editBadge: {
bg: tokens.ash.c500,
bgHover: tokens.ash.c400,
text: tokens.ash.c50,
},
progress: {
background: tokens.ash.c50,
preloaded: tokens.ash.c50,
filled: tokens.purple.c200,
},
video: {
buttonBackground: tokens.ash.c200,
autoPlay: {
background: tokens.ash.c700,
hover: tokens.ash.c500,
},
scraping: {
card: tokens.shade.c700,
loading: tokens.purple.c200,
noresult: tokens.ash.c100,
},
audio: {
set: tokens.purple.c200,
},
context: {
background: tokens.ash.c900,
light: tokens.shade.c50,
border: tokens.ash.c600,
hoverColor: tokens.ash.c600,
buttonFocus: tokens.ash.c500,
flagBg: tokens.ash.c500,
inputBg: tokens.ash.c600,
buttonOverInputHover: tokens.ash.c500,
inputPlaceholder: tokens.ash.c200,
cardBorder: tokens.ash.c700,
slider: tokens.ash.c50,
sliderFilled: tokens.purple.c200,
buttons: {
list: tokens.ash.c700,
active: tokens.ash.c900,
},
closeHover: tokens.ash.c800,
type: {
secondary: tokens.ash.c200,
accent: tokens.purple.c200,
},
},
},
},
},
});

259
tooling/tailwind/themes/list/teal.ts
View File

@@ -1,259 +0,0 @@
import { createTheme } from "../types";
const tokens = {
purple: {
c50: "#aad7ff",
c100: "#82c4ff",
c200: "#59a8ec",
c300: "#4491d6",
c400: "#317dbf",
c500: "#285b87",
c600: "#1f4464",
c700: "#18334a",
c800: "#112434",
c900: "#0b1822",
},
shade: {
c50: "#677c90",
c100: "#52667a",
c200: "#3f4f60",
c300: "#32404f",
c400: "#273441",
c500: "#1e2832",
c600: "#172028",
c700: "#131a22",
c800: "#0f151b",
c900: "#0a0e12",
},
ash: {
c50: "#7f9b9b",
c100: "#5b7b7b",
c200: "#446463",
c300: "#2b4e4d",
c400: "#204241",
c500: "#1c3c3b",
c600: "#173232",
c700: "#132929",
c800: "#102020",
c900: "#0c1615",
},
blue: {
c50: "#adf5d6",
c100: "#79cca8",
c200: "#5dae8b",
c300: "#3b8c69",
c400: "#2a7152",
c500: "#1f503b",
c600: "#1b4130",
c700: "#173629",
c800: "#102019",
c900: "#0b1310",
},
};
export default createTheme({
name: "teal",
extend: {
colors: {
themePreview: {
primary: tokens.blue.c200,
secondary: tokens.shade.c50,
},
pill: {
background: tokens.shade.c300,
backgroundHover: tokens.shade.c200,
highlight: tokens.blue.c200,
activeBackground: tokens.shade.c300,
},
global: {
accentA: tokens.blue.c200,
accentB: tokens.blue.c300,
},
lightBar: {
light: tokens.blue.c400,
},
buttons: {
toggle: tokens.purple.c300,
toggleDisabled: tokens.ash.c500,
secondary: tokens.ash.c700,
secondaryHover: tokens.ash.c700,
purple: tokens.purple.c500,
purpleHover: tokens.purple.c400,
cancel: tokens.ash.c500,
cancelHover: tokens.ash.c300,
},
background: {
main: tokens.shade.c900,
secondary: tokens.shade.c600,
secondaryHover: tokens.shade.c400,
accentA: tokens.purple.c500,
accentB: tokens.blue.c500,
},
modal: {
background: tokens.shade.c800,
},
type: {
logo: tokens.purple.c100,
text: tokens.shade.c50,
dimmed: tokens.shade.c50,
divider: tokens.ash.c500,
secondary: tokens.ash.c100,
link: tokens.purple.c100,
linkHover: tokens.purple.c50,
},
search: {
background: tokens.shade.c500,
hoverBackground: tokens.shade.c600,
focused: tokens.shade.c400,
placeholder: tokens.shade.c100,
icon: tokens.shade.c100,
},
mediaCard: {
hoverBackground: tokens.shade.c600,
hoverAccent: tokens.shade.c50,
hoverShadow: tokens.shade.c900,
shadow: tokens.shade.c700,
barColor: tokens.ash.c200,
barFillColor: tokens.purple.c100,
badge: tokens.shade.c700,
badgeText: tokens.ash.c100,
},
largeCard: {
background: tokens.shade.c600,
icon: tokens.purple.c400,
},
dropdown: {
background: tokens.shade.c600,
altBackground: tokens.shade.c700,
hoverBackground: tokens.shade.c500,
text: tokens.shade.c50,
secondary: tokens.shade.c100,
border: tokens.shade.c400,
contentBackground: tokens.shade.c500,
},
authentication: {
border: tokens.shade.c300,
inputBg: tokens.shade.c600,
inputBgHover: tokens.shade.c500,
wordBackground: tokens.shade.c500,
copyText: tokens.shade.c100,
copyTextHover: tokens.ash.c50,
},
settings: {
sidebar: {
activeLink: tokens.shade.c600,
badge: tokens.shade.c900,
type: {
secondary: tokens.shade.c200,
inactive: tokens.shade.c50,
icon: tokens.shade.c50,
iconActivated: tokens.purple.c200,
activated: tokens.purple.c50,
},
},
card: {
border: tokens.shade.c400,
background: tokens.shade.c400,
altBackground: tokens.shade.c400,
},
saveBar: {
background: tokens.shade.c800,
},
},
utils: {
divider: tokens.ash.c300,
},
errors: {
card: tokens.shade.c800,
border: tokens.ash.c500,
type: {
secondary: tokens.ash.c100,
},
},
about: {
circle: tokens.ash.c500,
circleText: tokens.ash.c50,
},
editBadge: {
bg: tokens.ash.c500,
bgHover: tokens.ash.c400,
text: tokens.ash.c50,
},
progress: {
background: tokens.ash.c50,
preloaded: tokens.ash.c50,
filled: tokens.purple.c200,
},
video: {
buttonBackground: tokens.ash.c200,
autoPlay: {
background: tokens.ash.c700,
hover: tokens.ash.c500,
},
scraping: {
card: tokens.shade.c700,
loading: tokens.purple.c200,
noresult: tokens.ash.c100,
},
audio: {
set: tokens.purple.c200,
},
context: {
background: tokens.ash.c900,
light: tokens.shade.c50,
border: tokens.ash.c600,
hoverColor: tokens.ash.c600,
buttonFocus: tokens.ash.c500,
flagBg: tokens.ash.c500,
inputBg: tokens.ash.c600,
buttonOverInputHover: tokens.ash.c500,
inputPlaceholder: tokens.ash.c200,
cardBorder: tokens.ash.c700,
slider: tokens.ash.c50,
sliderFilled: tokens.purple.c200,
buttons: {
list: tokens.ash.c700,
active: tokens.ash.c900,
},
closeHover: tokens.ash.c800,
type: {
secondary: tokens.ash.c200,
accent: tokens.purple.c200,
},
},
},
},
},
});

18
tooling/tailwind/themes/types.ts
View File

@@ -1,18 +0,0 @@
import type { defaultTheme } from "./default";
type DeepPartial<T> = {
[P in keyof T]?: DeepPartial<T[P]>;
};
export interface Theme {
name: string;
extend: DeepPartial<(typeof defaultTheme)["extend"]>;
}
export function createTheme(theme: Theme) {
return {
name: theme.name,
selectors: [`.theme-${theme.name}`],
extend: theme.extend,
};
}

8
tooling/tailwind/tsconfig.json
View File

@@ -1,8 +0,0 @@
{
"extends": "@movie-web/tsconfig/base.json",
"compilerOptions": {
"tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json",
},
"include": ["."],
"exclude": ["node_modules"],
}