init: 初始化模板项目

This commit is contained in:
2025-08-25 11:57:14 +08:00
commit aaa949bd7d
90 changed files with 20722 additions and 0 deletions

25
.codesandbox/tasks.json Normal file
View File

@@ -0,0 +1,25 @@
{
// These tasks will run in order when initializing your CodeSandbox project.
"setupTasks": [
{
"name": "Install Dependencies",
"command": "yarn install"
}
],
// These tasks can be run from CodeSandbox. Running one will open a log in the app.
"tasks": {
"install": {
"name": "install dependencies",
"command": "yarn install"
},
"Development": {
"name": "Development",
"command": "yarn web",
"runAtStart": true,
"preview": {
"port": 3000
}
}
}
}

View File

@@ -0,0 +1,4 @@
{
"name": "Devcontainer",
"image": "ghcr.io/codesandbox/devcontainers/typescript-node:latest"
}

27
.github/workflows/test.yml vendored Normal file
View File

@@ -0,0 +1,27 @@
name: Run Tests
on:
push:
branches:
- '*'
pull_request:
branches:
- '*'
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Use Node.js
uses: actions/setup-node@v4
with:
node-version: '22'
- name: Install dependencies
run: yarn install
- name: Run tests
run: yarn test

48
.gitignore vendored Normal file
View File

@@ -0,0 +1,48 @@
dist
**/node_modules
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
# expo
**/.expo/*
# next.js
**/.next/*
/out/
# tamagui
**/.tamagui/*
# production
/build
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
# typescript
*.tsbuildinfo
# os
.DS_Store
THUMBS_DB
thumbs.db
# turbo build log
**/.turbo/*

0
.husky/pre-commit Normal file
View File

1
.husky/pre-push Normal file
View File

@@ -0,0 +1 @@
yarn test

7
.prettierrc Normal file
View File

@@ -0,0 +1,7 @@
{
"trailingComma": "es5",
"semi": false,
"singleQuote": true,
"arrowParens": "always",
"printWidth": 100
}

40
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,40 @@
{
"explorer.fileNesting.enabled": true,
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true,
"editor.insertSpaces": true,
"editor.tabSize": 2,
"editor.formatOnSave": true,
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.workingDirectories": [
{
"mode": "auto"
}
],
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "always"
},
"cSpell.words": [
"Tamagui"
],
}

1
.watchmanconfig Normal file
View File

@@ -0,0 +1 @@
{}

925
.yarn/releases/yarn-4.5.0.cjs vendored Executable file

File diff suppressed because one or more lines are too long

21
.yarnrc.yml Normal file
View File

@@ -0,0 +1,21 @@
compressionLevel: mixed
enableGlobalCache: false
enableTelemetry: false
logFilters:
- code: YN0002
level: discard
- code: YN0060
level: discard
- code: YN0006
level: discard
- code: YN0076
level: discard
- code: YN0013
level: discard
nodeLinker: node-modules
yarnPath: .yarn/releases/yarn-4.5.0.cjs

104
README.md Normal file
View File

@@ -0,0 +1,104 @@
# Tamagui + Solito + Next + Expo Monorepo
```sh
npm create tamagui
```
## 🔦 About
This monorepo is a starter for an Expo + Next.js + Tamagui + Solito app.
Many thanks to [@FernandoTheRojo](https://twitter.com/fernandotherojo) for the Solito starter monorepo which this was forked from. Check out his [talk about using expo + next together at Next.js Conf 2021](https://www.youtube.com/watch?v=0lnbdRweJtA).
## 📦 Included packages
- [Tamagui](https://tamagui.dev) 🪄
- [solito](https://solito.dev) for cross-platform navigation
- Expo SDK
- Next.js
- Expo Router
## 🗂 Folder layout
The main apps are:
- `expo` (native)
- `next` (web)
- `packages` shared packages across apps
- `ui` includes your custom UI kit that will be optimized by Tamagui
- `app` you'll be importing most files from `app/`
- `features` (don't use a `screens` folder. organize by feature.)
- `provider` (all the providers that wrap the app, and some no-ops for Web.)
You can add other folders inside of `packages/` if you know what you're doing and have a good reason to.
> [!TIP]
> Switching from `app` to `pages` router:
>
> - remove `app` folder from `apps/next`
> - move `index.tsx` from `pages-example` to `pages` folder
> - rename `pages-example-user` to `user` and be sure to update `linkTarget` in `screen.tsx` to `user` as well
> - delete `SwitchRouterButton.tsx` component and remove it from `screen.tsx` and `packages/ui/src/index.tsx`
> - search for `pagesMode` keyword and remove it
## 🏁 Start the app
- Install dependencies: `yarn`
- Next.js local dev: `yarn web`
To run with optimizer on in dev mode (just for testing, it's faster to leave it off): `yarn web:extract`. To build for production `yarn web:prod`.
To see debug output to verify the compiler, add `// debug` as a comment to the top of any file.
- Expo local dev: `yarn native`
## UI Kit
Note we're following the [design systems guide](https://tamagui.dev/docs/guides/design-systems) and creating our own package for components.
See `packages/ui` named `@my/ui` for how this works.
## 🆕 Add new dependencies
### Pure JS dependencies
If you're installing a JavaScript-only dependency that will be used across platforms, install it in `packages/app`:
```sh
cd packages/app
yarn add date-fns
cd ../..
yarn
```
### Native dependencies
If you're installing a library with any native code, you must install it in `expo`:
```sh
cd apps/expo
yarn add react-native-reanimated
cd ..
yarn
```
## Update new dependencies
### Pure JS dependencies
```sh
yarn upgrade-interactive
```
You can also install the native library inside of `packages/app` if you want to get autoimport for that package inside of the `app` folder. However, you need to be careful and install the _exact_ same version in both packages. If the versions mismatch at all, you'll potentially get terrible bugs. This is a classic monorepo issue. I use `lerna-update-wizard` to help with this (you don't need to use Lerna to use that lib).
You may potentially want to have the native module transpiled for the next app. If you get error messages with `Cannot use import statement outside a module`, you may need to use `transpilePackages` in your `next.config.js` and add the module to the array there.
### Deploying to Vercel
- Root: `apps/next`
- Install command to be `yarn set version stable && yarn install`
- Build command: leave default setting
- Output dir: leave default setting

15
app.json Normal file
View File

@@ -0,0 +1,15 @@
{
"expo": {
"extra": {
"eas": {
"projectId": "8078f986-6a8d-43ef-b773-7f4396e4cbc5"
}
},
"android": {
"package": "com.eeymoo.apptemplate"
},
"plugins": [
"expo-sqlite"
]
}
}

131
apps/expo/.gitignore vendored Normal file
View File

@@ -0,0 +1,131 @@
.expo
ios
android
# OSX
#
.DS_Store
# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace
# Android/IntelliJ
#
build/
.idea
.gradle
local.properties
*.iml
*.hprof
# node.js
#
node_modules/
npm-debug.log
yarn-error.log
# BUCK
buck-out/
\.buckd/
*.keystore
# fastlane
#
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
# screenshots whenever they are needed.
# For more information about the recommended setup visit:
# https://docs.fastlane.tools/best-practices/source-control/
*/fastlane/report.xml
*/fastlane/Preview.html
*/fastlane/screenshots
# Bundle artifacts
*.jsbundle
# CocoaPods
/ios/Pods/
# Expo
.expo/*
web-build/
# @generated expo-cli sync-ee1e620bf946655de5f4a4ea0da0b18cabc4cf78
# The following patterns were generated by expo-cli
# OSX
#
.DS_Store
# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace
# Android/IntelliJ
#
build/
.idea
.gradle
local.properties
*.iml
*.hprof
# node.js
#
node_modules/
npm-debug.log
yarn-error.log
# BUCK
buck-out/
\.buckd/
*.keystore
!debug.keystore
# Bundle artifacts
*.jsbundle
# CocoaPods
/ios/Pods/
# Expo
.expo/
web-build/
dist/
expo-env.d.ts
# @end expo-cli

38
apps/expo/app.json Normal file
View File

@@ -0,0 +1,38 @@
{
"expo": {
"name": "yourprojectsname",
"slug": "yourprojectsname",
"scheme": "yourprojectsname",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "automatic",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.yourprojectsname.app"
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"package": "com.yourprojectsname.app"
},
"web": {
"favicon": "./assets/favicon.png"
},
"plugins": ["expo-router", "expo-font"],
"experiments": {
"typedRoutes": true
}
}
}

48
apps/expo/app/_layout.tsx Normal file
View File

@@ -0,0 +1,48 @@
import { useEffect } from 'react'
import { useColorScheme } from 'react-native'
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
import { useFonts } from 'expo-font'
import { SplashScreen, Stack } from 'expo-router'
import { Provider } from 'app/provider'
import { NativeToast } from '@my/ui/src/NativeToast'
export const unstable_settings = {
// Ensure that reloading on `/user` keeps a back button present.
initialRouteName: 'Home',
}
// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync()
export default function App() {
const [interLoaded, interError] = useFonts({
Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
})
useEffect(() => {
if (interLoaded || interError) {
// Hide the splash screen after the fonts have loaded (or an error was returned) and the UI is ready.
SplashScreen.hideAsync()
}
}, [interLoaded, interError])
if (!interLoaded && !interError) {
return null
}
return <RootLayoutNav />
}
function RootLayoutNav() {
const colorScheme = useColorScheme()
return (
<Provider>
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<Stack />
<NativeToast />
</ThemeProvider>
</Provider>
)
}

15
apps/expo/app/index.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { HomeScreen } from 'app/features/home/screen'
import { Stack } from 'expo-router'
export default function Screen() {
return (
<>
<Stack.Screen
options={{
title: 'Home',
}}
/>
<HomeScreen />
</>
)
}

7
apps/expo/app/types.d.ts vendored Normal file
View File

@@ -0,0 +1,7 @@
import { config } from '@my/config'
export type Conf = typeof config
declare module '@my/ui' {
interface TamaguiCustomConfig extends Conf {}
}

View File

@@ -0,0 +1,21 @@
import { UserDetailScreen } from 'app/features/user/detail-screen'
import { Stack } from 'expo-router'
import { useParams } from 'solito/navigation'
export default function Screen() {
const { id } = useParams()
return (
<>
<Stack.Screen
options={{
title: 'User',
presentation: 'modal',
animation: 'slide_from_right',
gestureEnabled: true,
gestureDirection: 'horizontal',
}}
/>
<UserDetailScreen id={id as string} />
</>
)
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
apps/expo/assets/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
apps/expo/assets/splash.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

35
apps/expo/babel.config.js Normal file
View File

@@ -0,0 +1,35 @@
module.exports = (api) => {
api.cache(true)
return {
presets: [['babel-preset-expo', { jsxRuntime: 'automatic' }]],
plugins: [
[
require.resolve('babel-plugin-module-resolver'),
{
root: ['../..'],
alias: {
// define aliases to shorten the import paths
app: '../../packages/app',
'@my/ui': '../../packages/ui',
},
extensions: ['.js', '.jsx', '.tsx', '.ios.js', '.android.js'],
},
],
// if you want reanimated support
// 'react-native-reanimated/plugin',
...(process.env.EAS_BUILD_PLATFORM === 'android'
? []
: [
[
'@tamagui/babel-plugin',
{
components: ['@my/ui', 'tamagui'],
config: '../../packages/config/src/tamagui.config.ts',
logTimings: true,
disableExtraction: process.env.NODE_ENV === 'development',
},
],
]),
],
}
}

20
apps/expo/eas.json Normal file
View File

@@ -0,0 +1,20 @@
{
"build": {
"development": {
"distribution": "internal",
"android": {
"buildType": "apk"
},
"ios": {
"simulator": true,
"image": "latest"
}
},
"production": {
"distribution": "store",
"android": {
"buildType": "app-bundle"
}
}
}
}

7
apps/expo/index.js Normal file
View File

@@ -0,0 +1,7 @@
import 'setimmediate'
if (!global?.setImmediate) {
global.setImmediate = setTimeout
}
import 'expo-router/entry'

27
apps/expo/metro.config.js Normal file
View File

@@ -0,0 +1,27 @@
// Learn more https://docs.expo.dev/guides/monorepos
// Learn more https://docs.expo.io/guides/customizing-metro
/**
* @type {import('expo/metro-config')}
*/
const { getDefaultConfig } = require('@expo/metro-config')
const path = require('node:path')
const projectRoot = __dirname
const workspaceRoot = path.resolve(projectRoot, '../..')
const config = getDefaultConfig(projectRoot)
// 1. Watch all files within the monorepo
config.watchFolders = [workspaceRoot]
// 2. Let Metro know where to resolve packages and in what order
config.resolver.nodeModulesPaths = [
path.resolve(projectRoot, 'node_modules'),
path.resolve(workspaceRoot, 'node_modules'),
]
// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
config.resolver.disableHierarchicalLookup = true
config.transformer = { ...config.transformer, unstable_allowRequireContext: true }
config.transformer.minifierPath = require.resolve('metro-minify-terser')
module.exports = config

57
apps/expo/package.json Normal file
View File

@@ -0,0 +1,57 @@
{
"name": "expo-app",
"version": "1.0.0",
"main": "index.js",
"private": true,
"scripts": {
"start": "npx expo start -c",
"android": "npx expo run:android",
"ios": "yarn fix-xcode-env && npx expo run:ios",
"eject": "npx expo eject",
"fix-xcode-env": "node scripts/fix-xcode-env.mjs",
"prebuild": "yarn expo prebuild"
},
"dependencies": {
"@babel/runtime": "^7.26.0",
"@expo/config-plugins": "~10.0.0",
"@my/ui": "0.0.1",
"@react-navigation/bottom-tabs": "^7.3.12",
"@react-navigation/native": "^7.1.8",
"app": "0.0.0",
"babel-plugin-module-resolver": "^5.0.2",
"burnt": "^0.12.2",
"expo": "~53.0.8",
"expo-constants": "~17.1.6",
"expo-dev-client": "~5.1.8",
"expo-font": "~13.3.1",
"expo-linear-gradient": "~14.1.4",
"expo-linking": "~7.1.4",
"expo-router": "~5.0.6",
"expo-splash-screen": "~0.30.8",
"expo-status-bar": "~2.2.3",
"expo-updates": "~0.28.12",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-native": "0.79.2",
"react-native-gesture-handler": "~2.24.0",
"react-native-safe-area-context": "5.4.0",
"react-native-screens": "~4.10.0",
"react-native-svg": "15.8.0",
"react-native-web": "^0.20.0"
},
"devDependencies": {
"@babel/core": "^7.24.6",
"@expo/metro-config": "~0.20.0",
"@tamagui/babel-plugin": "^1.132.18",
"metro-minify-terser": "^0.81.0",
"typescript": "~5.8.3"
},
"resolutions": {
"metro": "0.81.0",
"metro-resolver": "0.81.0"
},
"overrides": {
"metro": "0.81.0",
"metro-resolver": "0.81.0"
}
}

View File

@@ -0,0 +1,29 @@
import fs from 'node:fs/promises'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { execSync } from 'node:child_process'
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const iosDir = path.join(__dirname, '..', 'ios')
const xcodePath = path.join(iosDir, '.xcode.env.local')
async function main() {
try {
// Create ios directory if it doesn't exist
await fs.mkdir(iosDir, { recursive: true })
// Get the path to the Node binary
const nodePath = process.execPath
// Create or update the .xcode.env.local file
const content = `export NODE_BINARY=${nodePath}\n`
await fs.writeFile(xcodePath, content)
} catch (error) {
console.error('Error:', error.message)
process.exit(1)
}
}
main()

14
apps/expo/tsconfig.json Normal file
View File

@@ -0,0 +1,14 @@
{
"extends": "../../tsconfig.base",
"include": [
"app/**/*.ts",
"app/**/*.tsx",
".expo/types/**/*.ts",
"expo-env.d.ts"
],
"compilerOptions": {
"composite": true,
"jsx": "react-jsx"
},
"references": []
}

3
apps/next/.env Normal file
View File

@@ -0,0 +1,3 @@
IGNORE_TS_CONFIG_PATHS=true
TAMAGUI_TARGET=web
TAMAGUI_DISABLE_WARN_DYNAMIC_LOAD=1

4
apps/next/.eslintrc.js Normal file
View File

@@ -0,0 +1,4 @@
module.exports = {
extends: 'next',
root: true,
}

1
apps/next/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.vercel

View File

@@ -0,0 +1,76 @@
import { exec, type ChildProcess } from 'node:child_process'
import { expect, test, afterAll } from 'vitest'
import path from 'node:path'
let buildProcess: ChildProcess | null = null
afterAll(() => {
if (buildProcess?.pid) {
try {
process.kill(buildProcess.pid, 0) // Check if process exists
process.kill(buildProcess.pid) // Kill the process if it exists
} catch (error) {
// Process doesn't exist or we don't have permission to kill it
console.info('Process already terminated or cannot be killed.')
}
}
})
test('Next.js build completes', async () => {
try {
buildProcess = exec('yarn build', {
cwd: path.resolve(__dirname, '..'),
})
const buildOutput = new Promise<string>((resolve, reject) => {
let output = ''
buildProcess?.stdout?.on('data', (data) => {
output += data.toString()
})
buildProcess?.stderr?.on('data', (data) => {
output += data.toString()
})
buildProcess?.on('close', (code) => {
if (code === 0) {
resolve(output)
} else {
reject(new Error(`Build process exited with code ${code}`))
}
})
})
const result = await buildOutput
// Check for yarn build output
expect(result).toContain('built @my/config')
expect(result).toContain('built @my/ui')
// Check for Next.js version and build process
expect(result).toContain('Next.js 14')
expect(result).toContain('Creating an optimized production build')
// Check for route information
expect(result).toContain('Route (app)')
expect(result).toContain('Route (pages)')
expect(result).toContain('First Load JS shared by all')
// Check for specific route patterns
expect(result).toContain('○ /')
expect(result).toContain('○ /_not-found')
expect(result).toContain('ƒ /user/[id]')
expect(result).toContain('/_app')
expect(result).toContain('/pages-example')
expect(result).toContain('/pages-example-user/[id]')
// Check for chunk information
expect(result).toContain('chunks/framework-')
expect(result).toContain('chunks/main-')
expect(result).toContain('chunks/pages/_app-')
// Check for static and dynamic route indicators
expect(result).toContain('○ (Static) prerendered as static content')
expect(result).toContain('ƒ (Dynamic) server-rendered on demand')
} finally {
// The process kill check has been moved to the afterAll block
}
}, 60_000)

View File

@@ -0,0 +1,54 @@
import { spawn, type ChildProcess } from 'node:child_process'
import { expect, test } from 'vitest'
import path from 'node:path'
import treeKill from 'tree-kill'
import { promisify } from 'node:util'
const treeKillAsync = promisify(treeKill)
test('Next.js dev server starts', async () => {
let devProcess: ChildProcess | null = null
try {
devProcess = spawn('yarn', ['dev'], {
cwd: path.resolve(__dirname, '..'),
stdio: 'pipe',
shell: true,
})
let output = ''
devProcess.stdout?.on('data', (data) => {
output += data.toString()
})
// Wait for the server to start (adjust timeout as needed)
await new Promise<void>((resolve, reject) => {
const timeout = setTimeout(() => {
reject(new Error('Timeout waiting for dev server to start'))
}, 30000)
devProcess?.stdout?.on('data', (data) => {
if (data.toString().includes('Ready in')) {
clearTimeout(timeout)
resolve()
}
})
})
// Check for expected output
expect(output).toContain('Next.js 14')
expect(output).toContain('Local:')
expect(output).toContain('Ready in')
// Additional checks can be added here
} finally {
// Ensure the dev server is killed and wait for it to fully terminate
if (devProcess?.pid) {
try {
await treeKillAsync(devProcess.pid)
} catch (error) {
console.error('Failed to kill process:', error)
}
}
}
}, 60000) // Increased timeout to account for both startup and shutdown

19
apps/next/app/layout.tsx Normal file
View File

@@ -0,0 +1,19 @@
import type { Metadata } from 'next'
import { NextTamaguiProvider } from 'app/provider/NextTamaguiProvider'
export const metadata: Metadata = {
title: 'Tamagui • App Router',
description: 'Tamagui, Solito, Expo & Next.js',
icons: '/favicon.ico',
}
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
// You can use `suppressHydrationWarning` to avoid the warning about mismatched content during hydration in dev mode
<html lang="en" suppressHydrationWarning>
<body>
<NextTamaguiProvider>{children}</NextTamaguiProvider>
</body>
</html>
)
}

5
apps/next/app/page.tsx Normal file
View File

@@ -0,0 +1,5 @@
'use client'
import { HomeScreen } from 'app/features/home/screen'
export default HomeScreen

View File

@@ -0,0 +1,9 @@
'use client'
import { UserDetailScreen } from 'app/features/user/detail-screen'
import { useParams } from 'solito/navigation'
export default function Page() {
const { id } = useParams()
return <UserDetailScreen id={id as string} />
}

6
apps/next/next-env.d.ts vendored Normal file
View File

@@ -0,0 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference types="next/navigation-types/compat/navigation" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

58
apps/next/next.config.js Normal file
View File

@@ -0,0 +1,58 @@
/** @type {import('next').NextConfig} */
const { withTamagui } = require('@tamagui/next-plugin')
const { join } = require('node:path')
const boolVals = {
true: true,
false: false,
}
const disableExtraction =
boolVals[process.env.DISABLE_EXTRACTION] ?? process.env.NODE_ENV === 'development'
const plugins = [
withTamagui({
config: '../../packages/config/src/tamagui.config.ts',
components: ['tamagui', '@my/ui'],
appDir: true,
importsWhitelist: ['constants.js', 'colors.js'],
outputCSS: process.env.NODE_ENV === 'production' ? './public/tamagui.css' : null,
logTimings: true,
disableExtraction,
shouldExtract: (path) => {
if (path.includes(join('packages', 'app'))) {
return true
}
},
disableThemesBundleOptimize: true,
excludeReactNativeWebExports: ['Switch', 'ProgressBar', 'Picker', 'CheckBox', 'Touchable'],
}),
]
module.exports = () => {
/** @type {import('next').NextConfig} */
let config = {
typescript: {
ignoreBuildErrors: true,
},
transpilePackages: [
'solito',
'react-native-web',
'expo-linking',
'expo-constants',
'expo-modules-core',
],
experimental: {
scrollRestoration: true,
},
}
for (const plugin of plugins) {
config = {
...config,
...plugin(config),
}
}
return config
}

35
apps/next/package.json Normal file
View File

@@ -0,0 +1,35 @@
{
"name": "next-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "cd ../.. && yarn build && cd apps/next && next build",
"start": "next start",
"serve": "NODE_ENV=production next start --port 8151",
"lint": "next lint",
"test": "vitest"
},
"dependencies": {
"@tamagui/config": "^1.132.18",
"@tamagui/next-theme": "^1.132.18",
"app": "0.0.0",
"next": "14.2.14",
"raf": "^3.4.1",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-native": "0.79.2",
"react-native-web": "^0.20.0",
"tamagui": "^1.132.18",
"vercel": "latest"
},
"devDependencies": {
"@tamagui/next-plugin": "^1.132.18",
"@types/node": "^20.14.1",
"eslint-config-next": "^14.2.3",
"next-compose-plugins": "^2.2.1",
"next-transpile-modules": "^10.0.1",
"tree-kill": "^1.2.2",
"vitest": "^2.1.1"
}
}

55
apps/next/pages/_app.tsx Normal file
View File

@@ -0,0 +1,55 @@
import '@tamagui/core/reset.css'
import '@tamagui/font-inter/css/400.css'
import '@tamagui/font-inter/css/700.css'
import 'raf/polyfill'
import type React from 'react'
import Head from 'next/head'
import type { SolitoAppProps } from 'solito'
import { NextTamaguiProvider } from 'app/provider/NextTamaguiProvider'
import { config } from '@my/ui'
if (process.env.NODE_ENV === 'production') {
require('../public/tamagui.css')
}
function MyApp({ Component, pageProps }: SolitoAppProps) {
return (
<>
<Head>
<title>Tamagui Pages Router</title>
<meta name="description" content="Tamagui, Solito, Expo & Next.js" />
<link rel="icon" href="/favicon.ico" />
<style
dangerouslySetInnerHTML={{
// the first time this runs you'll get the full CSS including all themes
// after that, it will only return CSS generated since the last call
__html: config.getNewCSS(),
}}
/>
<style
dangerouslySetInnerHTML={{
__html: config.getCSS({
// if you are using "outputCSS" option, you should use this "exclude"
// if not, then you can leave the option out
exclude: process.env.NODE_ENV === 'production' ? 'design-system' : null,
}),
}}
/>
<script
dangerouslySetInnerHTML={{
// avoid flash of animated things on enter:
__html: `document.documentElement.classList.add('t_unmounted')`,
}}
/>
</Head>
<NextTamaguiProvider>
<Component {...pageProps} />
</NextTamaguiProvider>
</>
)
}
export default MyApp

View File

@@ -0,0 +1,65 @@
import { Children } from 'react'
import { AppRegistry } from 'react-native'
import NextDocument, {
type DocumentContext,
type DocumentInitialProps,
Head,
Html,
Main,
NextScript,
} from 'next/document'
import { config } from '@my/ui'
export default class Document extends NextDocument {
static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
AppRegistry.registerComponent('Main', () => Main)
const page = await ctx.renderPage()
// @ts-ignore
const { getStyleElement } = AppRegistry.getApplication('Main')
/**
* Note: be sure to keep tamagui styles after react-native-web styles like it is here!
* So Tamagui styles can override the react-native-web styles.
*/
const styles = [
getStyleElement(),
<style
key="tamagui-css"
dangerouslySetInnerHTML={{
__html: config.getCSS({
exclude: process.env.NODE_ENV === 'development' ? null : 'design-system',
}),
}}
/>,
<style
jsx
global
key="tamagui-css"
>{`
html {
font-family: 'Inter';
}
`}</style>,
]
return { ...page, styles: Children.toArray(styles) }
}
render() {
return (
<Html>
<Head>
<meta
httpEquiv="X-UA-Compatible"
content="IE=edge"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}

View File

@@ -0,0 +1,17 @@
import { UserDetailScreen } from 'app/features/user/detail-screen'
import Head from 'next/head'
import { createParam } from 'solito'
const { useParam } = createParam<{ id: string }>()
export default function Page() {
const [id] = useParam('id') as unknown as string
return (
<>
<Head>
<title>User</title>
</Head>
<UserDetailScreen id={id} />
</>
)
}

View File

@@ -0,0 +1,5 @@
import { HomeScreen } from 'app/features/home/screen'
export default function Page() {
return <HomeScreen pagesMode={true} />
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

View File

@@ -0,0 +1,367 @@
._ovs-contain {overscroll-behavior:contain;}
.is_Text .is_Text {display:inline-flex;}
._dsp_contents {display:contents;}
:root {--c-radius-0:0px;--c-radius-1:3px;--c-radius-2:5px;--c-radius-3:7px;--c-radius-4:9px;--c-radius-5:10px;--c-radius-6:16px;--c-radius-7:19px;--c-radius-8:22px;--c-radius-9:26px;--c-radius-10:34px;--c-radius-11:42px;--c-radius-12:50px;--c-radius-true:9px;--c-zIndex-0:0;--c-zIndex-1:100;--c-zIndex-2:200;--c-zIndex-3:300;--c-zIndex-4:400;--c-zIndex-5:500;--c-space-0:0px;--c-space-1:2px;--c-space-2:7px;--c-space-3:13px;--c-space-4:18px;--c-space-5:24px;--c-space-6:32px;--c-space-7:39px;--c-space-8:46px;--c-space-9:53px;--c-space-10:60px;--c-space-11:74px;--c-space-12:88px;--c-space-13:102px;--c-space-14:116px;--c-space-15:130px;--c-space-16:144px;--c-space-17:144px;--c-space-18:158px;--c-space-19:172px;--c-space-20:186px;--c-space-0--25:0.5px;--c-space-0--5:1px;--c-space-0--75:1.5px;--c-space-1--5:4px;--c-space-2--5:10px;--c-space-3--5:16px;--c-space-true:18px;--c-space-4--5:21px;--c-space--0--25:-0.5px;--c-space--0--5:-1px;--c-space--0--75:-1.5px;--c-space--1:-2px;--c-space--1--5:-4px;--c-space--2:-7px;--c-space--2--5:-10px;--c-space--3:-13px;--c-space--3--5:-16px;--c-space--4:-18px;--c-space--true:-18px;--c-space--4--5:-21px;--c-space--5:-24px;--c-space--6:-32px;--c-space--7:-39px;--c-space--8:-46px;--c-space--9:-53px;--c-space--10:-60px;--c-space--11:-74px;--c-space--12:-88px;--c-space--13:-102px;--c-space--14:-116px;--c-space--15:-130px;--c-space--16:-144px;--c-space--17:-144px;--c-space--18:-158px;--c-space--19:-172px;--c-space--20:-186px;--c-size-0:0px;--c-size-1:20px;--c-size-2:28px;--c-size-3:36px;--c-size-4:44px;--c-size-5:52px;--c-size-6:64px;--c-size-7:74px;--c-size-8:84px;--c-size-9:94px;--c-size-10:104px;--c-size-11:124px;--c-size-12:144px;--c-size-13:164px;--c-size-14:184px;--c-size-15:204px;--c-size-16:224px;--c-size-17:224px;--c-size-18:244px;--c-size-19:264px;--c-size-20:284px;--c-size-0--25:2px;--c-size-0--5:4px;--c-size-0--75:8px;--c-size-1--5:24px;--c-size-2--5:32px;--c-size-3--5:40px;--c-size-true:44px;--c-size-4--5:48px}
:root .font_body, :root .t_lang-body-default .font_body {--f-family:Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--f-lineHeight-1:23px;--f-lineHeight-2:24px;--f-lineHeight-3:25px;--f-lineHeight-4:27px;--f-lineHeight-5:30px;--f-lineHeight-6:32px;--f-lineHeight-7:34px;--f-lineHeight-8:38px;--f-lineHeight-9:46px;--f-lineHeight-10:66px;--f-lineHeight-11:77px;--f-lineHeight-12:85px;--f-lineHeight-13:97px;--f-lineHeight-14:121px;--f-lineHeight-15:148px;--f-lineHeight-16:172px;--f-lineHeight-true:27px;--f-weight-1:300;--f-weight-2:300;--f-weight-3:300;--f-weight-4:300;--f-weight-5:300;--f-weight-6:300;--f-weight-7:300;--f-weight-8:300;--f-weight-9:300;--f-weight-10:300;--f-weight-11:300;--f-weight-12:300;--f-weight-13:300;--f-weight-14:300;--f-weight-15:300;--f-weight-16:300;--f-weight-true:300;--f-letterSpacing-1:0px;--f-letterSpacing-2:0px;--f-letterSpacing-3:0px;--f-letterSpacing-4:0px;--f-letterSpacing-5:0px;--f-letterSpacing-6:0px;--f-letterSpacing-7:0px;--f-letterSpacing-8:0px;--f-letterSpacing-9:0px;--f-letterSpacing-10:0px;--f-letterSpacing-11:0px;--f-letterSpacing-12:0px;--f-letterSpacing-13:0px;--f-letterSpacing-14:0px;--f-letterSpacing-15:0px;--f-letterSpacing-16:0px;--f-letterSpacing-true:0px;--f-size-1:12px;--f-size-2:13px;--f-size-3:14px;--f-size-4:15px;--f-size-5:18px;--f-size-6:20px;--f-size-7:22px;--f-size-8:25px;--f-size-9:33px;--f-size-10:51px;--f-size-11:61px;--f-size-12:68px;--f-size-13:79px;--f-size-14:101px;--f-size-15:125px;--f-size-16:147px;--f-size-true:15px}
:root .font_heading, :root .t_lang-heading-default .font_heading {--f-family:Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--f-lineHeight-1:21px;--f-lineHeight-2:22px;--f-lineHeight-3:23px;--f-lineHeight-4:24px;--f-lineHeight-5:26px;--f-lineHeight-6:25px;--f-lineHeight-7:30px;--f-lineHeight-8:33px;--f-lineHeight-9:40px;--f-lineHeight-10:56px;--f-lineHeight-11:65px;--f-lineHeight-12:72px;--f-lineHeight-13:82px;--f-lineHeight-14:102px;--f-lineHeight-15:124px;--f-lineHeight-16:144px;--f-lineHeight-true:24px;--f-weight-1:400;--f-weight-2:400;--f-weight-3:400;--f-weight-4:400;--f-weight-5:400;--f-weight-6:400;--f-weight-7:700;--f-weight-8:700;--f-weight-9:700;--f-weight-10:700;--f-weight-11:700;--f-weight-12:700;--f-weight-13:700;--f-weight-14:700;--f-weight-15:700;--f-weight-16:700;--f-weight-true:700;--f-letterSpacing-1:2px;--f-letterSpacing-2:2px;--f-letterSpacing-3:2px;--f-letterSpacing-4:2px;--f-letterSpacing-5:2px;--f-letterSpacing-6:1px;--f-letterSpacing-7:0px;--f-letterSpacing-8:-1px;--f-letterSpacing-9:-2px;--f-letterSpacing-10:-3px;--f-letterSpacing-11:-3px;--f-letterSpacing-12:-4px;--f-letterSpacing-13:-4px;--f-letterSpacing-14:-5px;--f-letterSpacing-15:-6px;--f-letterSpacing-16:-6px;--f-letterSpacing-true:-6px;--f-size-1:11px;--f-size-2:12px;--f-size-3:13px;--f-size-4:14px;--f-size-5:16px;--f-size-6:15px;--f-size-7:20px;--f-size-8:23px;--f-size-9:30px;--f-size-10:46px;--f-size-11:55px;--f-size-12:62px;--f-size-13:72px;--f-size-14:92px;--f-size-15:114px;--f-size-16:134px;--f-size-true:14px;--f-transform-1:uppercase;--f-transform-2:uppercase;--f-transform-3:uppercase;--f-transform-4:uppercase;--f-transform-5:uppercase;--f-transform-6:uppercase;--f-transform-7:none;--f-transform-8:none;--f-transform-9:none;--f-transform-10:none;--f-transform-11:none;--f-transform-12:none;--f-transform-13:none;--f-transform-14:none;--f-transform-15:none;--f-transform-16:none;--f-transform-true:none}
:root.t_dark .t_light , :root.t_light, :root.t_light , .tm_xxt {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(0, 0%, 100%, 0);--background02:hsla(0, 0%, 100%, 0.2);--background04:hsla(0, 0%, 100%, 0.4);--background06:hsla(0, 0%, 100%, 0.6);--background08:hsla(0, 0%, 100%, 0.8);--color1:hsla(0, 0%, 100%, 1);--color2:hsla(0, 0%, 95%, 1);--color3:hsla(0, 0%, 93%, 1);--color4:hsla(0, 0%, 91%, 1);--color5:hsla(0, 0%, 88%, 1);--color6:hsla(0, 0%, 85%, 1);--color7:hsla(0, 0%, 82%, 1);--color8:hsla(0, 0%, 76%, 1);--color9:hsla(0, 0%, 56%, 1);--color10:hsla(0, 0%, 50%, 1);--color11:hsla(0, 0%, 42%, 1);--color12:hsla(0, 0%, 9%, 1);--color0:hsla(0, 0%, 9%, 0);--color02:hsla(0, 0%, 9%, 0.2);--color04:hsla(0, 0%, 9%, 0.4);--color06:hsla(0, 0%, 9%, 0.6);--color08:hsla(0, 0%, 9%, 0.8);--background:hsla(0, 0%, 100%, 1);--backgroundHover:hsla(0, 0%, 100%, 0.8);--backgroundPress:hsla(0, 0%, 95%, 1);--backgroundFocus:hsla(0, 0%, 95%, 1);--borderColor:hsla(0, 0%, 91%, 1);--borderColorHover:hsla(0, 0%, 93%, 1);--borderColorPress:hsla(0, 0%, 88%, 1);--borderColorFocus:hsla(0, 0%, 91%, 1);--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--colorTransparent:hsla(0, 0%, 9%, 0);--blue1:hsl(206, 100%, 99.2%);--blue2:hsl(210, 100%, 98.0%);--blue3:hsl(209, 100%, 96.5%);--blue4:hsl(210, 98.8%, 94.0%);--blue5:hsl(209, 95.0%, 90.1%);--blue6:hsl(209, 81.2%, 84.5%);--blue7:hsl(208, 77.5%, 76.9%);--blue8:hsl(206, 81.9%, 65.3%);--blue9:hsl(206, 100%, 50.0%);--blue10:hsl(208, 100%, 47.3%);--blue11:hsl(211, 100%, 43.2%);--blue12:hsl(211, 100%, 15.0%);--green1:hsl(136, 50.0%, 98.9%);--green2:hsl(138, 62.5%, 96.9%);--green3:hsl(139, 55.2%, 94.5%);--green4:hsl(140, 48.7%, 91.0%);--green5:hsl(141, 43.7%, 86.0%);--green6:hsl(143, 40.3%, 79.0%);--green7:hsl(146, 38.5%, 69.0%);--green8:hsl(151, 40.2%, 54.1%);--green9:hsl(151, 55.0%, 41.5%);--green10:hsl(152, 57.5%, 37.6%);--green11:hsl(153, 67.0%, 28.5%);--green12:hsl(155, 40.0%, 14.0%);--red1:hsl(359, 100%, 99.4%);--red2:hsl(359, 100%, 98.6%);--red3:hsl(360, 100%, 96.8%);--red4:hsl(360, 97.9%, 94.8%);--red5:hsl(360, 90.2%, 91.9%);--red6:hsl(360, 81.7%, 87.8%);--red7:hsl(359, 74.2%, 81.7%);--red8:hsl(359, 69.5%, 74.3%);--red9:hsl(358, 75.0%, 59.0%);--red10:hsl(358, 69.4%, 55.2%);--red11:hsl(358, 65.0%, 48.7%);--red12:hsl(354, 50.0%, 14.6%);--yellow1:hsl(60, 54.0%, 98.5%);--yellow2:hsl(52, 100%, 95.5%);--yellow3:hsl(55, 100%, 90.9%);--yellow4:hsl(54, 100%, 86.6%);--yellow5:hsl(52, 97.9%, 82.0%);--yellow6:hsl(50, 89.4%, 76.1%);--yellow7:hsl(47, 80.4%, 68.0%);--yellow8:hsl(48, 100%, 46.1%);--yellow9:hsl(53, 92.0%, 50.0%);--yellow10:hsl(50, 100%, 48.5%);--yellow11:hsl(42, 100%, 29.0%);--yellow12:hsl(40, 55.0%, 13.5%);--shadow1:rgba(0,0,0,0.04);--shadow2:rgba(0,0,0,0.08);--shadow3:rgba(0,0,0,0.16);--shadow4:rgba(0,0,0,0.24);--shadow5:rgba(0,0,0,0.32);--shadow6:rgba(0,0,0,0.4);--black1:#050505;--black2:#151515;--black3:#191919;--black4:#232323;--black5:#282828;--black6:#323232;--black7:#424242;--black8:#494949;--black9:#545454;--black10:#626262;--black11:#a5a5a5;--black12:#fff;--white1:#fff;--white2:#f2f2f2;--white3:hsl(0, 0%, 93%);--white4:hsl(0, 0%, 91%);--white5:hsl(0, 0%, 88%);--white6:hsl(0, 0%, 85%);--white7:hsl(0, 0%, 82%);--white8:hsl(0, 0%, 76%);--white9:hsl(0, 0%, 56%);--white10:hsl(0, 0%, 50%);--white11:hsl(0, 0%, 42%);--white12:hsl(0, 0%, 9%);--shadowColor:rgba(0,0,0,0.04);--accent1:hsla(0, 0%, 2%, 1);--accent2:hsla(0, 0%, 8%, 1);--accent3:hsla(0, 0%, 10%, 1);--accent4:hsla(0, 0%, 14%, 1);--accent5:hsla(0, 0%, 16%, 1);--accent6:hsla(0, 0%, 20%, 1);--accent7:hsla(0, 0%, 26%, 1);--accent8:hsla(0, 0%, 29%, 1);--accent9:hsla(0, 0%, 33%, 1);--accent10:hsla(0, 0%, 38%, 1);--accent11:hsla(0, 0%, 65%, 1);--accent12:hsla(0, 0%, 100%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
:root {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(0, 0%, 100%, 0);--background02:hsla(0, 0%, 100%, 0.2);--background04:hsla(0, 0%, 100%, 0.4);--background06:hsla(0, 0%, 100%, 0.6);--background08:hsla(0, 0%, 100%, 0.8);--color1:hsla(0, 0%, 100%, 1);--color2:hsla(0, 0%, 95%, 1);--color3:hsla(0, 0%, 93%, 1);--color4:hsla(0, 0%, 91%, 1);--color5:hsla(0, 0%, 88%, 1);--color6:hsla(0, 0%, 85%, 1);--color7:hsla(0, 0%, 82%, 1);--color8:hsla(0, 0%, 76%, 1);--color9:hsla(0, 0%, 56%, 1);--color10:hsla(0, 0%, 50%, 1);--color11:hsla(0, 0%, 42%, 1);--color12:hsla(0, 0%, 9%, 1);--color0:hsla(0, 0%, 9%, 0);--color02:hsla(0, 0%, 9%, 0.2);--color04:hsla(0, 0%, 9%, 0.4);--color06:hsla(0, 0%, 9%, 0.6);--color08:hsla(0, 0%, 9%, 0.8);--background:hsla(0, 0%, 100%, 1);--backgroundHover:hsla(0, 0%, 100%, 0.8);--backgroundPress:hsla(0, 0%, 95%, 1);--backgroundFocus:hsla(0, 0%, 95%, 1);--borderColor:hsla(0, 0%, 91%, 1);--borderColorHover:hsla(0, 0%, 93%, 1);--borderColorPress:hsla(0, 0%, 88%, 1);--borderColorFocus:hsla(0, 0%, 91%, 1);--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--colorTransparent:hsla(0, 0%, 9%, 0);--blue1:hsl(206, 100%, 99.2%);--blue2:hsl(210, 100%, 98.0%);--blue3:hsl(209, 100%, 96.5%);--blue4:hsl(210, 98.8%, 94.0%);--blue5:hsl(209, 95.0%, 90.1%);--blue6:hsl(209, 81.2%, 84.5%);--blue7:hsl(208, 77.5%, 76.9%);--blue8:hsl(206, 81.9%, 65.3%);--blue9:hsl(206, 100%, 50.0%);--blue10:hsl(208, 100%, 47.3%);--blue11:hsl(211, 100%, 43.2%);--blue12:hsl(211, 100%, 15.0%);--green1:hsl(136, 50.0%, 98.9%);--green2:hsl(138, 62.5%, 96.9%);--green3:hsl(139, 55.2%, 94.5%);--green4:hsl(140, 48.7%, 91.0%);--green5:hsl(141, 43.7%, 86.0%);--green6:hsl(143, 40.3%, 79.0%);--green7:hsl(146, 38.5%, 69.0%);--green8:hsl(151, 40.2%, 54.1%);--green9:hsl(151, 55.0%, 41.5%);--green10:hsl(152, 57.5%, 37.6%);--green11:hsl(153, 67.0%, 28.5%);--green12:hsl(155, 40.0%, 14.0%);--red1:hsl(359, 100%, 99.4%);--red2:hsl(359, 100%, 98.6%);--red3:hsl(360, 100%, 96.8%);--red4:hsl(360, 97.9%, 94.8%);--red5:hsl(360, 90.2%, 91.9%);--red6:hsl(360, 81.7%, 87.8%);--red7:hsl(359, 74.2%, 81.7%);--red8:hsl(359, 69.5%, 74.3%);--red9:hsl(358, 75.0%, 59.0%);--red10:hsl(358, 69.4%, 55.2%);--red11:hsl(358, 65.0%, 48.7%);--red12:hsl(354, 50.0%, 14.6%);--yellow1:hsl(60, 54.0%, 98.5%);--yellow2:hsl(52, 100%, 95.5%);--yellow3:hsl(55, 100%, 90.9%);--yellow4:hsl(54, 100%, 86.6%);--yellow5:hsl(52, 97.9%, 82.0%);--yellow6:hsl(50, 89.4%, 76.1%);--yellow7:hsl(47, 80.4%, 68.0%);--yellow8:hsl(48, 100%, 46.1%);--yellow9:hsl(53, 92.0%, 50.0%);--yellow10:hsl(50, 100%, 48.5%);--yellow11:hsl(42, 100%, 29.0%);--yellow12:hsl(40, 55.0%, 13.5%);--shadow1:rgba(0,0,0,0.04);--shadow2:rgba(0,0,0,0.08);--shadow3:rgba(0,0,0,0.16);--shadow4:rgba(0,0,0,0.24);--shadow5:rgba(0,0,0,0.32);--shadow6:rgba(0,0,0,0.4);--black1:#050505;--black2:#151515;--black3:#191919;--black4:#232323;--black5:#282828;--black6:#323232;--black7:#424242;--black8:#494949;--black9:#545454;--black10:#626262;--black11:#a5a5a5;--black12:#fff;--white1:#fff;--white2:#f2f2f2;--white3:hsl(0, 0%, 93%);--white4:hsl(0, 0%, 91%);--white5:hsl(0, 0%, 88%);--white6:hsl(0, 0%, 85%);--white7:hsl(0, 0%, 82%);--white8:hsl(0, 0%, 76%);--white9:hsl(0, 0%, 56%);--white10:hsl(0, 0%, 50%);--white11:hsl(0, 0%, 42%);--white12:hsl(0, 0%, 9%);--shadowColor:rgba(0,0,0,0.04);--accent1:hsla(0, 0%, 2%, 1);--accent2:hsla(0, 0%, 8%, 1);--accent3:hsla(0, 0%, 10%, 1);--accent4:hsla(0, 0%, 14%, 1);--accent5:hsla(0, 0%, 16%, 1);--accent6:hsla(0, 0%, 20%, 1);--accent7:hsla(0, 0%, 26%, 1);--accent8:hsla(0, 0%, 29%, 1);--accent9:hsla(0, 0%, 33%, 1);--accent10:hsla(0, 0%, 38%, 1);--accent11:hsla(0, 0%, 65%, 1);--accent12:hsla(0, 0%, 100%, 1);}
}
.t_light ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark, :root.t_dark , :root.t_light .t_dark , .tm_xxt {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(0, 0%, 2%, 0);--background02:hsla(0, 0%, 2%, 0.2);--background04:hsla(0, 0%, 2%, 0.4);--background06:hsla(0, 0%, 2%, 0.6);--background08:hsla(0, 0%, 2%, 0.8);--color1:hsla(0, 0%, 2%, 1);--color2:hsla(0, 0%, 8%, 1);--color3:hsla(0, 0%, 10%, 1);--color4:hsla(0, 0%, 14%, 1);--color5:hsla(0, 0%, 16%, 1);--color6:hsla(0, 0%, 20%, 1);--color7:hsla(0, 0%, 26%, 1);--color8:hsla(0, 0%, 29%, 1);--color9:hsla(0, 0%, 33%, 1);--color10:hsla(0, 0%, 38%, 1);--color11:hsla(0, 0%, 65%, 1);--color12:hsla(0, 0%, 100%, 1);--color0:hsla(0, 0%, 100%, 0);--color02:hsla(0, 0%, 100%, 0.2);--color04:hsla(0, 0%, 100%, 0.4);--color06:hsla(0, 0%, 100%, 0.6);--color08:hsla(0, 0%, 100%, 0.8);--background:hsla(0, 0%, 2%, 1);--backgroundHover:hsla(0, 0%, 8%, 1);--backgroundPress:hsla(0, 0%, 2%, 0.8);--backgroundFocus:hsla(0, 0%, 2%, 0.8);--borderColor:hsla(0, 0%, 14%, 1);--borderColorHover:hsla(0, 0%, 16%, 1);--borderColorPress:hsla(0, 0%, 10%, 1);--borderColorFocus:hsla(0, 0%, 14%, 1);--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--colorTransparent:hsla(0, 0%, 100%, 0);--blue1:hsl(212, 35.0%, 9.2%);--blue2:hsl(216, 50.0%, 11.8%);--blue3:hsl(214, 59.4%, 15.3%);--blue4:hsl(214, 65.8%, 17.9%);--blue5:hsl(213, 71.2%, 20.2%);--blue6:hsl(212, 77.4%, 23.1%);--blue7:hsl(211, 85.1%, 27.4%);--blue8:hsl(211, 89.7%, 34.1%);--blue9:hsl(206, 100%, 50.0%);--blue10:hsl(209, 100%, 60.6%);--blue11:hsl(210, 100%, 66.1%);--blue12:hsl(206, 98.0%, 95.8%);--green1:hsl(146, 30.0%, 7.4%);--green2:hsl(155, 44.2%, 8.4%);--green3:hsl(155, 46.7%, 10.9%);--green4:hsl(154, 48.4%, 12.9%);--green5:hsl(154, 49.7%, 14.9%);--green6:hsl(154, 50.9%, 17.6%);--green7:hsl(153, 51.8%, 21.8%);--green8:hsl(151, 51.7%, 28.4%);--green9:hsl(151, 55.0%, 41.5%);--green10:hsl(151, 49.3%, 46.5%);--green11:hsl(151, 50.0%, 53.2%);--green12:hsl(137, 72.0%, 94.0%);--red1:hsl(353, 23.0%, 9.8%);--red2:hsl(357, 34.4%, 12.0%);--red3:hsl(356, 43.4%, 16.4%);--red4:hsl(356, 47.6%, 19.2%);--red5:hsl(356, 51.1%, 21.9%);--red6:hsl(356, 55.2%, 25.9%);--red7:hsl(357, 60.2%, 31.8%);--red8:hsl(358, 65.0%, 40.4%);--red9:hsl(358, 75.0%, 59.0%);--red10:hsl(358, 85.3%, 64.0%);--red11:hsl(358, 100%, 69.5%);--red12:hsl(351, 89.0%, 96.0%);--yellow1:hsl(45, 100%, 5.5%);--yellow2:hsl(46, 100%, 6.7%);--yellow3:hsl(45, 100%, 8.7%);--yellow4:hsl(45, 100%, 10.4%);--yellow5:hsl(47, 100%, 12.1%);--yellow6:hsl(49, 100%, 14.3%);--yellow7:hsl(49, 90.3%, 18.4%);--yellow8:hsl(50, 100%, 22.0%);--yellow9:hsl(53, 92.0%, 50.0%);--yellow10:hsl(54, 100%, 68.0%);--yellow11:hsl(48, 100%, 47.0%);--yellow12:hsl(53, 100%, 91.0%);--shadow1:rgba(0,0,0,0.2);--shadow2:rgba(0,0,0,0.3);--shadow3:rgba(0,0,0,0.4);--shadow4:rgba(0,0,0,0.5);--shadow5:rgba(0,0,0,0.6);--shadow6:rgba(0,0,0,0.7);--black1:#050505;--black2:#151515;--black3:#191919;--black4:#232323;--black5:#282828;--black6:#323232;--black7:#424242;--black8:#494949;--black9:#545454;--black10:#626262;--black11:#a5a5a5;--black12:#fff;--white1:#fff;--white2:#f2f2f2;--white3:hsl(0, 0%, 93%);--white4:hsl(0, 0%, 91%);--white5:hsl(0, 0%, 88%);--white6:hsl(0, 0%, 85%);--white7:hsl(0, 0%, 82%);--white8:hsl(0, 0%, 76%);--white9:hsl(0, 0%, 56%);--white10:hsl(0, 0%, 50%);--white11:hsl(0, 0%, 42%);--white12:hsl(0, 0%, 9%);--shadowColor:rgba(0,0,0,0.2);--accent1:hsla(0, 0%, 100%, 1);--accent2:hsla(0, 0%, 95%, 1);--accent3:hsla(0, 0%, 93%, 1);--accent4:hsla(0, 0%, 91%, 1);--accent5:hsla(0, 0%, 88%, 1);--accent6:hsla(0, 0%, 85%, 1);--accent7:hsla(0, 0%, 82%, 1);--accent8:hsla(0, 0%, 76%, 1);--accent9:hsla(0, 0%, 56%, 1);--accent10:hsla(0, 0%, 50%, 1);--accent11:hsla(0, 0%, 42%, 1);--accent12:hsla(0, 0%, 9%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
:root {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(0, 0%, 2%, 0);--background02:hsla(0, 0%, 2%, 0.2);--background04:hsla(0, 0%, 2%, 0.4);--background06:hsla(0, 0%, 2%, 0.6);--background08:hsla(0, 0%, 2%, 0.8);--color1:hsla(0, 0%, 2%, 1);--color2:hsla(0, 0%, 8%, 1);--color3:hsla(0, 0%, 10%, 1);--color4:hsla(0, 0%, 14%, 1);--color5:hsla(0, 0%, 16%, 1);--color6:hsla(0, 0%, 20%, 1);--color7:hsla(0, 0%, 26%, 1);--color8:hsla(0, 0%, 29%, 1);--color9:hsla(0, 0%, 33%, 1);--color10:hsla(0, 0%, 38%, 1);--color11:hsla(0, 0%, 65%, 1);--color12:hsla(0, 0%, 100%, 1);--color0:hsla(0, 0%, 100%, 0);--color02:hsla(0, 0%, 100%, 0.2);--color04:hsla(0, 0%, 100%, 0.4);--color06:hsla(0, 0%, 100%, 0.6);--color08:hsla(0, 0%, 100%, 0.8);--background:hsla(0, 0%, 2%, 1);--backgroundHover:hsla(0, 0%, 8%, 1);--backgroundPress:hsla(0, 0%, 2%, 0.8);--backgroundFocus:hsla(0, 0%, 2%, 0.8);--borderColor:hsla(0, 0%, 14%, 1);--borderColorHover:hsla(0, 0%, 16%, 1);--borderColorPress:hsla(0, 0%, 10%, 1);--borderColorFocus:hsla(0, 0%, 14%, 1);--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--colorTransparent:hsla(0, 0%, 100%, 0);--blue1:hsl(212, 35.0%, 9.2%);--blue2:hsl(216, 50.0%, 11.8%);--blue3:hsl(214, 59.4%, 15.3%);--blue4:hsl(214, 65.8%, 17.9%);--blue5:hsl(213, 71.2%, 20.2%);--blue6:hsl(212, 77.4%, 23.1%);--blue7:hsl(211, 85.1%, 27.4%);--blue8:hsl(211, 89.7%, 34.1%);--blue9:hsl(206, 100%, 50.0%);--blue10:hsl(209, 100%, 60.6%);--blue11:hsl(210, 100%, 66.1%);--blue12:hsl(206, 98.0%, 95.8%);--green1:hsl(146, 30.0%, 7.4%);--green2:hsl(155, 44.2%, 8.4%);--green3:hsl(155, 46.7%, 10.9%);--green4:hsl(154, 48.4%, 12.9%);--green5:hsl(154, 49.7%, 14.9%);--green6:hsl(154, 50.9%, 17.6%);--green7:hsl(153, 51.8%, 21.8%);--green8:hsl(151, 51.7%, 28.4%);--green9:hsl(151, 55.0%, 41.5%);--green10:hsl(151, 49.3%, 46.5%);--green11:hsl(151, 50.0%, 53.2%);--green12:hsl(137, 72.0%, 94.0%);--red1:hsl(353, 23.0%, 9.8%);--red2:hsl(357, 34.4%, 12.0%);--red3:hsl(356, 43.4%, 16.4%);--red4:hsl(356, 47.6%, 19.2%);--red5:hsl(356, 51.1%, 21.9%);--red6:hsl(356, 55.2%, 25.9%);--red7:hsl(357, 60.2%, 31.8%);--red8:hsl(358, 65.0%, 40.4%);--red9:hsl(358, 75.0%, 59.0%);--red10:hsl(358, 85.3%, 64.0%);--red11:hsl(358, 100%, 69.5%);--red12:hsl(351, 89.0%, 96.0%);--yellow1:hsl(45, 100%, 5.5%);--yellow2:hsl(46, 100%, 6.7%);--yellow3:hsl(45, 100%, 8.7%);--yellow4:hsl(45, 100%, 10.4%);--yellow5:hsl(47, 100%, 12.1%);--yellow6:hsl(49, 100%, 14.3%);--yellow7:hsl(49, 90.3%, 18.4%);--yellow8:hsl(50, 100%, 22.0%);--yellow9:hsl(53, 92.0%, 50.0%);--yellow10:hsl(54, 100%, 68.0%);--yellow11:hsl(48, 100%, 47.0%);--yellow12:hsl(53, 100%, 91.0%);--shadow1:rgba(0,0,0,0.2);--shadow2:rgba(0,0,0,0.3);--shadow3:rgba(0,0,0,0.4);--shadow4:rgba(0,0,0,0.5);--shadow5:rgba(0,0,0,0.6);--shadow6:rgba(0,0,0,0.7);--black1:#050505;--black2:#151515;--black3:#191919;--black4:#232323;--black5:#282828;--black6:#323232;--black7:#424242;--black8:#494949;--black9:#545454;--black10:#626262;--black11:#a5a5a5;--black12:#fff;--white1:#fff;--white2:#f2f2f2;--white3:hsl(0, 0%, 93%);--white4:hsl(0, 0%, 91%);--white5:hsl(0, 0%, 88%);--white6:hsl(0, 0%, 85%);--white7:hsl(0, 0%, 82%);--white8:hsl(0, 0%, 76%);--white9:hsl(0, 0%, 56%);--white10:hsl(0, 0%, 50%);--white11:hsl(0, 0%, 42%);--white12:hsl(0, 0%, 9%);--shadowColor:rgba(0,0,0,0.2);--accent1:hsla(0, 0%, 100%, 1);--accent2:hsla(0, 0%, 95%, 1);--accent3:hsla(0, 0%, 93%, 1);--accent4:hsla(0, 0%, 91%, 1);--accent5:hsla(0, 0%, 88%, 1);--accent6:hsla(0, 0%, 85%, 1);--accent7:hsla(0, 0%, 82%, 1);--accent8:hsla(0, 0%, 76%, 1);--accent9:hsla(0, 0%, 56%, 1);--accent10:hsla(0, 0%, 50%, 1);--accent11:hsla(0, 0%, 42%, 1);--accent12:hsla(0, 0%, 9%, 1);}
}
.t_dark ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_light .t_accent, :root.t_light .t_accent, .tm_xxt {--accentBackground:hsla(0, 0%, 93%, 1);--accentColor:hsla(0, 0%, 50%, 1);--background0:hsla(0, 0%, 2%, 0);--background02:hsla(0, 0%, 2%, 0.2);--background04:hsla(0, 0%, 2%, 0.4);--background06:hsla(0, 0%, 2%, 0.6);--background08:hsla(0, 0%, 2%, 0.8);--color1:hsla(0, 0%, 2%, 1);--color2:hsla(0, 0%, 8%, 1);--color3:hsla(0, 0%, 10%, 1);--color4:hsla(0, 0%, 14%, 1);--color5:hsla(0, 0%, 16%, 1);--color6:hsla(0, 0%, 20%, 1);--color7:hsla(0, 0%, 26%, 1);--color8:hsla(0, 0%, 29%, 1);--color9:hsla(0, 0%, 33%, 1);--color10:hsla(0, 0%, 38%, 1);--color11:hsla(0, 0%, 65%, 1);--color12:hsla(0, 0%, 100%, 1);--color0:hsla(0, 0%, 100%, 0);--color02:hsla(0, 0%, 100%, 0.2);--color04:hsla(0, 0%, 100%, 0.4);--color06:hsla(0, 0%, 100%, 0.6);--color08:hsla(0, 0%, 100%, 0.8);--background:hsla(0, 0%, 2%, 1);--backgroundHover:hsla(0, 0%, 2%, 0.8);--backgroundPress:hsla(0, 0%, 8%, 1);--backgroundFocus:hsla(0, 0%, 8%, 1);--borderColor:hsla(0, 0%, 14%, 1);--borderColorHover:hsla(0, 0%, 10%, 1);--borderColorPress:hsla(0, 0%, 16%, 1);--borderColorFocus:hsla(0, 0%, 14%, 1);--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--colorTransparent:hsla(0, 0%, 100%, 0);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_accent {--accentBackground:hsla(0, 0%, 93%, 1);--accentColor:hsla(0, 0%, 50%, 1);--background0:hsla(0, 0%, 2%, 0);--background02:hsla(0, 0%, 2%, 0.2);--background04:hsla(0, 0%, 2%, 0.4);--background06:hsla(0, 0%, 2%, 0.6);--background08:hsla(0, 0%, 2%, 0.8);--color1:hsla(0, 0%, 2%, 1);--color2:hsla(0, 0%, 8%, 1);--color3:hsla(0, 0%, 10%, 1);--color4:hsla(0, 0%, 14%, 1);--color5:hsla(0, 0%, 16%, 1);--color6:hsla(0, 0%, 20%, 1);--color7:hsla(0, 0%, 26%, 1);--color8:hsla(0, 0%, 29%, 1);--color9:hsla(0, 0%, 33%, 1);--color10:hsla(0, 0%, 38%, 1);--color11:hsla(0, 0%, 65%, 1);--color12:hsla(0, 0%, 100%, 1);--color0:hsla(0, 0%, 100%, 0);--color02:hsla(0, 0%, 100%, 0.2);--color04:hsla(0, 0%, 100%, 0.4);--color06:hsla(0, 0%, 100%, 0.6);--color08:hsla(0, 0%, 100%, 0.8);--background:hsla(0, 0%, 2%, 1);--backgroundHover:hsla(0, 0%, 2%, 0.8);--backgroundPress:hsla(0, 0%, 8%, 1);--backgroundFocus:hsla(0, 0%, 8%, 1);--borderColor:hsla(0, 0%, 14%, 1);--borderColorHover:hsla(0, 0%, 10%, 1);--borderColorPress:hsla(0, 0%, 16%, 1);--borderColorFocus:hsla(0, 0%, 14%, 1);--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--colorTransparent:hsla(0, 0%, 100%, 0);}
}
.t_light_accent ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_accent, :root.t_light .t_dark .t_accent, .tm_xxt {--accentBackground:hsla(0, 0%, 38%, 1);--accentColor:hsla(0, 0%, 10%, 1);--background0:hsla(0, 0%, 100%, 0);--background02:hsla(0, 0%, 100%, 0.2);--background04:hsla(0, 0%, 100%, 0.4);--background06:hsla(0, 0%, 100%, 0.6);--background08:hsla(0, 0%, 100%, 0.8);--color1:hsla(0, 0%, 100%, 1);--color2:hsla(0, 0%, 95%, 1);--color3:hsla(0, 0%, 93%, 1);--color4:hsla(0, 0%, 91%, 1);--color5:hsla(0, 0%, 88%, 1);--color6:hsla(0, 0%, 85%, 1);--color7:hsla(0, 0%, 82%, 1);--color8:hsla(0, 0%, 76%, 1);--color9:hsla(0, 0%, 56%, 1);--color10:hsla(0, 0%, 50%, 1);--color11:hsla(0, 0%, 42%, 1);--color12:hsla(0, 0%, 9%, 1);--color0:hsla(0, 0%, 9%, 0);--color02:hsla(0, 0%, 9%, 0.2);--color04:hsla(0, 0%, 9%, 0.4);--color06:hsla(0, 0%, 9%, 0.6);--color08:hsla(0, 0%, 9%, 0.8);--background:hsla(0, 0%, 100%, 1);--backgroundHover:hsla(0, 0%, 95%, 1);--backgroundPress:hsla(0, 0%, 100%, 0.8);--backgroundFocus:hsla(0, 0%, 100%, 0.8);--borderColor:hsla(0, 0%, 91%, 1);--borderColorHover:hsla(0, 0%, 88%, 1);--borderColorPress:hsla(0, 0%, 93%, 1);--borderColorFocus:hsla(0, 0%, 91%, 1);--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--colorTransparent:hsla(0, 0%, 9%, 0);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_accent {--accentBackground:hsla(0, 0%, 38%, 1);--accentColor:hsla(0, 0%, 10%, 1);--background0:hsla(0, 0%, 100%, 0);--background02:hsla(0, 0%, 100%, 0.2);--background04:hsla(0, 0%, 100%, 0.4);--background06:hsla(0, 0%, 100%, 0.6);--background08:hsla(0, 0%, 100%, 0.8);--color1:hsla(0, 0%, 100%, 1);--color2:hsla(0, 0%, 95%, 1);--color3:hsla(0, 0%, 93%, 1);--color4:hsla(0, 0%, 91%, 1);--color5:hsla(0, 0%, 88%, 1);--color6:hsla(0, 0%, 85%, 1);--color7:hsla(0, 0%, 82%, 1);--color8:hsla(0, 0%, 76%, 1);--color9:hsla(0, 0%, 56%, 1);--color10:hsla(0, 0%, 50%, 1);--color11:hsla(0, 0%, 42%, 1);--color12:hsla(0, 0%, 9%, 1);--color0:hsla(0, 0%, 9%, 0);--color02:hsla(0, 0%, 9%, 0.2);--color04:hsla(0, 0%, 9%, 0.4);--color06:hsla(0, 0%, 9%, 0.6);--color08:hsla(0, 0%, 9%, 0.8);--background:hsla(0, 0%, 100%, 1);--backgroundHover:hsla(0, 0%, 95%, 1);--backgroundPress:hsla(0, 0%, 100%, 0.8);--backgroundFocus:hsla(0, 0%, 100%, 0.8);--borderColor:hsla(0, 0%, 91%, 1);--borderColorHover:hsla(0, 0%, 88%, 1);--borderColorPress:hsla(0, 0%, 93%, 1);--borderColorFocus:hsla(0, 0%, 91%, 1);--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--colorTransparent:hsla(0, 0%, 9%, 0);}
}
.t_dark_accent ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_light .t_black, :root.t_light .t_black, .tm_xxt {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(0, 0%, 2%, 0);--background02:hsla(0, 0%, 2%, 0.2);--background04:hsla(0, 0%, 2%, 0.4);--background06:hsla(0, 0%, 2%, 0.6);--background08:hsla(0, 0%, 2%, 0.8);--color1:hsla(0, 0%, 2%, 1);--color2:hsla(0, 0%, 8%, 1);--color3:hsla(0, 0%, 10%, 1);--color4:hsla(0, 0%, 14%, 1);--color5:hsla(0, 0%, 16%, 1);--color6:hsla(0, 0%, 20%, 1);--color7:hsla(0, 0%, 26%, 1);--color8:hsla(0, 0%, 29%, 1);--color9:hsla(0, 0%, 33%, 1);--color10:hsla(0, 0%, 38%, 1);--color11:hsla(0, 0%, 65%, 1);--color12:hsla(0, 0%, 100%, 1);--color0:hsla(0, 0%, 100%, 0);--color02:hsla(0, 0%, 100%, 0.2);--color04:hsla(0, 0%, 100%, 0.4);--color06:hsla(0, 0%, 100%, 0.6);--color08:hsla(0, 0%, 100%, 0.8);--background:hsla(0, 0%, 2%, 1);--backgroundHover:hsla(0, 0%, 2%, 0.8);--backgroundPress:hsla(0, 0%, 8%, 1);--backgroundFocus:hsla(0, 0%, 8%, 1);--borderColor:hsla(0, 0%, 14%, 1);--borderColorHover:hsla(0, 0%, 10%, 1);--borderColorPress:hsla(0, 0%, 16%, 1);--borderColorFocus:hsla(0, 0%, 14%, 1);--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--colorTransparent:hsla(0, 0%, 100%, 0);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_black {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(0, 0%, 2%, 0);--background02:hsla(0, 0%, 2%, 0.2);--background04:hsla(0, 0%, 2%, 0.4);--background06:hsla(0, 0%, 2%, 0.6);--background08:hsla(0, 0%, 2%, 0.8);--color1:hsla(0, 0%, 2%, 1);--color2:hsla(0, 0%, 8%, 1);--color3:hsla(0, 0%, 10%, 1);--color4:hsla(0, 0%, 14%, 1);--color5:hsla(0, 0%, 16%, 1);--color6:hsla(0, 0%, 20%, 1);--color7:hsla(0, 0%, 26%, 1);--color8:hsla(0, 0%, 29%, 1);--color9:hsla(0, 0%, 33%, 1);--color10:hsla(0, 0%, 38%, 1);--color11:hsla(0, 0%, 65%, 1);--color12:hsla(0, 0%, 100%, 1);--color0:hsla(0, 0%, 100%, 0);--color02:hsla(0, 0%, 100%, 0.2);--color04:hsla(0, 0%, 100%, 0.4);--color06:hsla(0, 0%, 100%, 0.6);--color08:hsla(0, 0%, 100%, 0.8);--background:hsla(0, 0%, 2%, 1);--backgroundHover:hsla(0, 0%, 2%, 0.8);--backgroundPress:hsla(0, 0%, 8%, 1);--backgroundFocus:hsla(0, 0%, 8%, 1);--borderColor:hsla(0, 0%, 14%, 1);--borderColorHover:hsla(0, 0%, 10%, 1);--borderColorPress:hsla(0, 0%, 16%, 1);--borderColorFocus:hsla(0, 0%, 14%, 1);--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--colorTransparent:hsla(0, 0%, 100%, 0);}
}
.t_light_black ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_light .t_white, :root.t_light .t_white, .tm_xxt {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(0, 0%, 100%, 0);--background02:hsla(0, 0%, 100%, 0.2);--background04:hsla(0, 0%, 100%, 0.4);--background06:hsla(0, 0%, 100%, 0.6);--background08:hsla(0, 0%, 100%, 0.8);--color1:hsla(0, 0%, 100%, 1);--color2:hsla(0, 0%, 95%, 1);--color3:hsla(0, 0%, 93%, 1);--color4:hsla(0, 0%, 91%, 1);--color5:hsla(0, 0%, 88%, 1);--color6:hsla(0, 0%, 85%, 1);--color7:hsla(0, 0%, 82%, 1);--color8:hsla(0, 0%, 76%, 1);--color9:hsla(0, 0%, 56%, 1);--color10:hsla(0, 0%, 50%, 1);--color11:hsla(0, 0%, 42%, 1);--color12:hsla(0, 0%, 9%, 1);--color0:hsla(0, 0%, 9%, 0);--color02:hsla(0, 0%, 9%, 0.2);--color04:hsla(0, 0%, 9%, 0.4);--color06:hsla(0, 0%, 9%, 0.6);--color08:hsla(0, 0%, 9%, 0.8);--background:hsla(0, 0%, 100%, 1);--backgroundHover:hsla(0, 0%, 100%, 0.8);--backgroundPress:hsla(0, 0%, 95%, 1);--backgroundFocus:hsla(0, 0%, 95%, 1);--borderColor:hsla(0, 0%, 91%, 1);--borderColorHover:hsla(0, 0%, 93%, 1);--borderColorPress:hsla(0, 0%, 88%, 1);--borderColorFocus:hsla(0, 0%, 91%, 1);--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--colorTransparent:hsla(0, 0%, 9%, 0);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_white {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(0, 0%, 100%, 0);--background02:hsla(0, 0%, 100%, 0.2);--background04:hsla(0, 0%, 100%, 0.4);--background06:hsla(0, 0%, 100%, 0.6);--background08:hsla(0, 0%, 100%, 0.8);--color1:hsla(0, 0%, 100%, 1);--color2:hsla(0, 0%, 95%, 1);--color3:hsla(0, 0%, 93%, 1);--color4:hsla(0, 0%, 91%, 1);--color5:hsla(0, 0%, 88%, 1);--color6:hsla(0, 0%, 85%, 1);--color7:hsla(0, 0%, 82%, 1);--color8:hsla(0, 0%, 76%, 1);--color9:hsla(0, 0%, 56%, 1);--color10:hsla(0, 0%, 50%, 1);--color11:hsla(0, 0%, 42%, 1);--color12:hsla(0, 0%, 9%, 1);--color0:hsla(0, 0%, 9%, 0);--color02:hsla(0, 0%, 9%, 0.2);--color04:hsla(0, 0%, 9%, 0.4);--color06:hsla(0, 0%, 9%, 0.6);--color08:hsla(0, 0%, 9%, 0.8);--background:hsla(0, 0%, 100%, 1);--backgroundHover:hsla(0, 0%, 100%, 0.8);--backgroundPress:hsla(0, 0%, 95%, 1);--backgroundFocus:hsla(0, 0%, 95%, 1);--borderColor:hsla(0, 0%, 91%, 1);--borderColorHover:hsla(0, 0%, 93%, 1);--borderColorPress:hsla(0, 0%, 88%, 1);--borderColorFocus:hsla(0, 0%, 91%, 1);--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--colorTransparent:hsla(0, 0%, 9%, 0);}
}
.t_light_white ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_light .t_blue, :root.t_light .t_blue, .tm_xxt {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(216, 100%, 99%, 0);--background02:hsla(216, 100%, 99%, 0.2);--background04:hsla(216, 100%, 99%, 0.4);--background06:hsla(216, 100%, 99%, 0.6);--background08:hsla(216, 100%, 99%, 0.8);--color1:hsla(210, 100%, 99%, 1);--color2:hsla(210, 100%, 98%, 1);--color3:hsla(210, 100%, 96%, 1);--color4:hsla(210, 100%, 94%, 1);--color5:hsla(209, 96%, 90%, 1);--color6:hsla(209, 82%, 85%, 1);--color7:hsla(208, 78%, 77%, 1);--color8:hsla(206, 82%, 65%, 1);--color9:hsla(206, 100%, 50%, 1);--color10:hsla(208, 100%, 47%, 1);--color11:hsla(211, 100%, 43%, 1);--color12:hsla(211, 100%, 15%, 1);--color0:hsla(211, 100%, 15%, 0);--color02:hsla(211, 100%, 15%, 0.2);--color04:hsla(211, 100%, 15%, 0.4);--color06:hsla(211, 100%, 15%, 0.6);--color08:hsla(211, 100%, 15%, 0.8);--background:hsla(210, 100%, 99%, 1);--backgroundHover:hsla(216, 100%, 99%, 0.8);--backgroundPress:hsla(210, 100%, 98%, 1);--backgroundFocus:hsla(210, 100%, 98%, 1);--borderColor:hsla(210, 100%, 94%, 1);--borderColorHover:hsla(210, 100%, 96%, 1);--borderColorPress:hsla(209, 96%, 90%, 1);--borderColorFocus:hsla(210, 100%, 94%, 1);--color:hsla(211, 100%, 15%, 1);--colorHover:hsla(211, 100%, 43%, 1);--colorPress:hsla(211, 100%, 15%, 1);--colorFocus:hsla(211, 100%, 43%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(211, 100%, 15%, 0.2);--colorTransparent:hsla(211, 100%, 15%, 0);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_blue {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(216, 100%, 99%, 0);--background02:hsla(216, 100%, 99%, 0.2);--background04:hsla(216, 100%, 99%, 0.4);--background06:hsla(216, 100%, 99%, 0.6);--background08:hsla(216, 100%, 99%, 0.8);--color1:hsla(210, 100%, 99%, 1);--color2:hsla(210, 100%, 98%, 1);--color3:hsla(210, 100%, 96%, 1);--color4:hsla(210, 100%, 94%, 1);--color5:hsla(209, 96%, 90%, 1);--color6:hsla(209, 82%, 85%, 1);--color7:hsla(208, 78%, 77%, 1);--color8:hsla(206, 82%, 65%, 1);--color9:hsla(206, 100%, 50%, 1);--color10:hsla(208, 100%, 47%, 1);--color11:hsla(211, 100%, 43%, 1);--color12:hsla(211, 100%, 15%, 1);--color0:hsla(211, 100%, 15%, 0);--color02:hsla(211, 100%, 15%, 0.2);--color04:hsla(211, 100%, 15%, 0.4);--color06:hsla(211, 100%, 15%, 0.6);--color08:hsla(211, 100%, 15%, 0.8);--background:hsla(210, 100%, 99%, 1);--backgroundHover:hsla(216, 100%, 99%, 0.8);--backgroundPress:hsla(210, 100%, 98%, 1);--backgroundFocus:hsla(210, 100%, 98%, 1);--borderColor:hsla(210, 100%, 94%, 1);--borderColorHover:hsla(210, 100%, 96%, 1);--borderColorPress:hsla(209, 96%, 90%, 1);--borderColorFocus:hsla(210, 100%, 94%, 1);--color:hsla(211, 100%, 15%, 1);--colorHover:hsla(211, 100%, 43%, 1);--colorPress:hsla(211, 100%, 15%, 1);--colorFocus:hsla(211, 100%, 43%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(211, 100%, 15%, 0.2);--colorTransparent:hsla(211, 100%, 15%, 0);}
}
.t_light_blue ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_light .t_red, :root.t_light .t_red, .tm_xxt {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(0, 100%, 99%, 0);--background02:hsla(0, 100%, 99%, 0.2);--background04:hsla(0, 100%, 99%, 0.4);--background06:hsla(0, 100%, 99%, 0.6);--background08:hsla(0, 100%, 99%, 0.8);--color1:hsla(0, 100%, 99%, 1);--color2:hsla(0, 100%, 99%, 1);--color3:hsla(0, 100%, 97%, 1);--color4:hsla(0, 100%, 95%, 1);--color5:hsla(0, 90%, 92%, 1);--color6:hsla(0, 81%, 88%, 1);--color7:hsla(359, 74%, 82%, 1);--color8:hsla(359, 69%, 74%, 1);--color9:hsla(358, 75%, 59%, 1);--color10:hsla(358, 69%, 55%, 1);--color11:hsla(358, 65%, 49%, 1);--color12:hsla(355, 49%, 15%, 1);--color0:hsla(355, 48%, 15%, 0);--color02:hsla(355, 48%, 15%, 0.2);--color04:hsla(355, 48%, 15%, 0.4);--color06:hsla(355, 48%, 15%, 0.6);--color08:hsla(355, 48%, 15%, 0.8);--background:hsla(0, 100%, 99%, 1);--backgroundHover:hsla(0, 100%, 99%, 0.8);--backgroundPress:hsla(0, 100%, 99%, 1);--backgroundFocus:hsla(0, 100%, 99%, 1);--borderColor:hsla(0, 100%, 95%, 1);--borderColorHover:hsla(0, 100%, 97%, 1);--borderColorPress:hsla(0, 90%, 92%, 1);--borderColorFocus:hsla(0, 100%, 95%, 1);--color:hsla(355, 49%, 15%, 1);--colorHover:hsla(358, 65%, 49%, 1);--colorPress:hsla(355, 49%, 15%, 1);--colorFocus:hsla(358, 65%, 49%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(355, 48%, 15%, 0.2);--colorTransparent:hsla(355, 48%, 15%, 0);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_red {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(0, 100%, 99%, 0);--background02:hsla(0, 100%, 99%, 0.2);--background04:hsla(0, 100%, 99%, 0.4);--background06:hsla(0, 100%, 99%, 0.6);--background08:hsla(0, 100%, 99%, 0.8);--color1:hsla(0, 100%, 99%, 1);--color2:hsla(0, 100%, 99%, 1);--color3:hsla(0, 100%, 97%, 1);--color4:hsla(0, 100%, 95%, 1);--color5:hsla(0, 90%, 92%, 1);--color6:hsla(0, 81%, 88%, 1);--color7:hsla(359, 74%, 82%, 1);--color8:hsla(359, 69%, 74%, 1);--color9:hsla(358, 75%, 59%, 1);--color10:hsla(358, 69%, 55%, 1);--color11:hsla(358, 65%, 49%, 1);--color12:hsla(355, 49%, 15%, 1);--color0:hsla(355, 48%, 15%, 0);--color02:hsla(355, 48%, 15%, 0.2);--color04:hsla(355, 48%, 15%, 0.4);--color06:hsla(355, 48%, 15%, 0.6);--color08:hsla(355, 48%, 15%, 0.8);--background:hsla(0, 100%, 99%, 1);--backgroundHover:hsla(0, 100%, 99%, 0.8);--backgroundPress:hsla(0, 100%, 99%, 1);--backgroundFocus:hsla(0, 100%, 99%, 1);--borderColor:hsla(0, 100%, 95%, 1);--borderColorHover:hsla(0, 100%, 97%, 1);--borderColorPress:hsla(0, 90%, 92%, 1);--borderColorFocus:hsla(0, 100%, 95%, 1);--color:hsla(355, 49%, 15%, 1);--colorHover:hsla(358, 65%, 49%, 1);--colorPress:hsla(355, 49%, 15%, 1);--colorFocus:hsla(358, 65%, 49%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(355, 48%, 15%, 0.2);--colorTransparent:hsla(355, 48%, 15%, 0);}
}
.t_light_red ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_light .t_yellow, :root.t_light .t_yellow, .tm_xxt {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(60, 45%, 98%, 0);--background02:hsla(60, 45%, 98%, 0.2);--background04:hsla(60, 45%, 98%, 0.4);--background06:hsla(60, 45%, 98%, 0.6);--background08:hsla(60, 45%, 98%, 0.8);--color1:hsla(60, 50%, 98%, 1);--color2:hsla(52, 100%, 95%, 1);--color3:hsla(55, 100%, 91%, 1);--color4:hsla(54, 100%, 87%, 1);--color5:hsla(52, 98%, 82%, 1);--color6:hsla(50, 90%, 76%, 1);--color7:hsla(47, 80%, 68%, 1);--color8:hsla(48, 100%, 46%, 1);--color9:hsla(53, 92%, 50%, 1);--color10:hsla(50, 100%, 48%, 1);--color11:hsla(42, 100%, 29%, 1);--color12:hsla(41, 56%, 13%, 1);--color0:hsla(41, 55%, 13%, 0);--color02:hsla(41, 55%, 13%, 0.2);--color04:hsla(41, 55%, 13%, 0.4);--color06:hsla(41, 55%, 13%, 0.6);--color08:hsla(41, 55%, 13%, 0.8);--background:hsla(60, 50%, 98%, 1);--backgroundHover:hsla(60, 45%, 98%, 0.8);--backgroundPress:hsla(52, 100%, 95%, 1);--backgroundFocus:hsla(52, 100%, 95%, 1);--borderColor:hsla(54, 100%, 87%, 1);--borderColorHover:hsla(55, 100%, 91%, 1);--borderColorPress:hsla(52, 98%, 82%, 1);--borderColorFocus:hsla(54, 100%, 87%, 1);--color:hsla(41, 56%, 13%, 1);--colorHover:hsla(42, 100%, 29%, 1);--colorPress:hsla(41, 56%, 13%, 1);--colorFocus:hsla(42, 100%, 29%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(41, 55%, 13%, 0.2);--colorTransparent:hsla(41, 55%, 13%, 0);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_yellow {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(60, 45%, 98%, 0);--background02:hsla(60, 45%, 98%, 0.2);--background04:hsla(60, 45%, 98%, 0.4);--background06:hsla(60, 45%, 98%, 0.6);--background08:hsla(60, 45%, 98%, 0.8);--color1:hsla(60, 50%, 98%, 1);--color2:hsla(52, 100%, 95%, 1);--color3:hsla(55, 100%, 91%, 1);--color4:hsla(54, 100%, 87%, 1);--color5:hsla(52, 98%, 82%, 1);--color6:hsla(50, 90%, 76%, 1);--color7:hsla(47, 80%, 68%, 1);--color8:hsla(48, 100%, 46%, 1);--color9:hsla(53, 92%, 50%, 1);--color10:hsla(50, 100%, 48%, 1);--color11:hsla(42, 100%, 29%, 1);--color12:hsla(41, 56%, 13%, 1);--color0:hsla(41, 55%, 13%, 0);--color02:hsla(41, 55%, 13%, 0.2);--color04:hsla(41, 55%, 13%, 0.4);--color06:hsla(41, 55%, 13%, 0.6);--color08:hsla(41, 55%, 13%, 0.8);--background:hsla(60, 50%, 98%, 1);--backgroundHover:hsla(60, 45%, 98%, 0.8);--backgroundPress:hsla(52, 100%, 95%, 1);--backgroundFocus:hsla(52, 100%, 95%, 1);--borderColor:hsla(54, 100%, 87%, 1);--borderColorHover:hsla(55, 100%, 91%, 1);--borderColorPress:hsla(52, 98%, 82%, 1);--borderColorFocus:hsla(54, 100%, 87%, 1);--color:hsla(41, 56%, 13%, 1);--colorHover:hsla(42, 100%, 29%, 1);--colorPress:hsla(41, 56%, 13%, 1);--colorFocus:hsla(42, 100%, 29%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(41, 55%, 13%, 0.2);--colorTransparent:hsla(41, 55%, 13%, 0);}
}
.t_light_yellow ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_light .t_green, :root.t_light .t_green, .tm_xxt {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(140, 60%, 99%, 0);--background02:hsla(140, 60%, 99%, 0.2);--background04:hsla(140, 60%, 99%, 0.4);--background06:hsla(140, 60%, 99%, 0.6);--background08:hsla(140, 60%, 99%, 0.8);--color1:hsla(140, 60%, 99%, 1);--color2:hsla(138, 63%, 97%, 1);--color3:hsla(139, 57%, 95%, 1);--color4:hsla(139, 48%, 91%, 1);--color5:hsla(141, 44%, 86%, 1);--color6:hsla(142, 40%, 79%, 1);--color7:hsla(146, 38%, 69%, 1);--color8:hsla(151, 40%, 54%, 1);--color9:hsla(151, 55%, 42%, 1);--color10:hsla(152, 57%, 38%, 1);--color11:hsla(153, 67%, 28%, 1);--color12:hsla(155, 41%, 14%, 1);--color0:hsla(155, 41%, 14%, 0);--color02:hsla(155, 41%, 14%, 0.2);--color04:hsla(155, 41%, 14%, 0.4);--color06:hsla(155, 41%, 14%, 0.6);--color08:hsla(155, 41%, 14%, 0.8);--background:hsla(140, 60%, 99%, 1);--backgroundHover:hsla(140, 60%, 99%, 0.8);--backgroundPress:hsla(138, 63%, 97%, 1);--backgroundFocus:hsla(138, 63%, 97%, 1);--borderColor:hsla(139, 48%, 91%, 1);--borderColorHover:hsla(139, 57%, 95%, 1);--borderColorPress:hsla(141, 44%, 86%, 1);--borderColorFocus:hsla(139, 48%, 91%, 1);--color:hsla(155, 41%, 14%, 1);--colorHover:hsla(153, 67%, 28%, 1);--colorPress:hsla(155, 41%, 14%, 1);--colorFocus:hsla(153, 67%, 28%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(155, 41%, 14%, 0.2);--colorTransparent:hsla(155, 41%, 14%, 0);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_green {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(140, 60%, 99%, 0);--background02:hsla(140, 60%, 99%, 0.2);--background04:hsla(140, 60%, 99%, 0.4);--background06:hsla(140, 60%, 99%, 0.6);--background08:hsla(140, 60%, 99%, 0.8);--color1:hsla(140, 60%, 99%, 1);--color2:hsla(138, 63%, 97%, 1);--color3:hsla(139, 57%, 95%, 1);--color4:hsla(139, 48%, 91%, 1);--color5:hsla(141, 44%, 86%, 1);--color6:hsla(142, 40%, 79%, 1);--color7:hsla(146, 38%, 69%, 1);--color8:hsla(151, 40%, 54%, 1);--color9:hsla(151, 55%, 42%, 1);--color10:hsla(152, 57%, 38%, 1);--color11:hsla(153, 67%, 28%, 1);--color12:hsla(155, 41%, 14%, 1);--color0:hsla(155, 41%, 14%, 0);--color02:hsla(155, 41%, 14%, 0.2);--color04:hsla(155, 41%, 14%, 0.4);--color06:hsla(155, 41%, 14%, 0.6);--color08:hsla(155, 41%, 14%, 0.8);--background:hsla(140, 60%, 99%, 1);--backgroundHover:hsla(140, 60%, 99%, 0.8);--backgroundPress:hsla(138, 63%, 97%, 1);--backgroundFocus:hsla(138, 63%, 97%, 1);--borderColor:hsla(139, 48%, 91%, 1);--borderColorHover:hsla(139, 57%, 95%, 1);--borderColorPress:hsla(141, 44%, 86%, 1);--borderColorFocus:hsla(139, 48%, 91%, 1);--color:hsla(155, 41%, 14%, 1);--colorHover:hsla(153, 67%, 28%, 1);--colorPress:hsla(155, 41%, 14%, 1);--colorFocus:hsla(153, 67%, 28%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(155, 41%, 14%, 0.2);--colorTransparent:hsla(155, 41%, 14%, 0);}
}
.t_light_green ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_black, :root.t_light .t_dark .t_black, .tm_xxt {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(0, 0%, 2%, 0);--background02:hsla(0, 0%, 2%, 0.2);--background04:hsla(0, 0%, 2%, 0.4);--background06:hsla(0, 0%, 2%, 0.6);--background08:hsla(0, 0%, 2%, 0.8);--color1:hsla(0, 0%, 2%, 1);--color2:hsla(0, 0%, 8%, 1);--color3:hsla(0, 0%, 10%, 1);--color4:hsla(0, 0%, 14%, 1);--color5:hsla(0, 0%, 16%, 1);--color6:hsla(0, 0%, 20%, 1);--color7:hsla(0, 0%, 26%, 1);--color8:hsla(0, 0%, 29%, 1);--color9:hsla(0, 0%, 33%, 1);--color10:hsla(0, 0%, 38%, 1);--color11:hsla(0, 0%, 65%, 1);--color12:hsla(0, 0%, 100%, 1);--color0:hsla(0, 0%, 100%, 0);--color02:hsla(0, 0%, 100%, 0.2);--color04:hsla(0, 0%, 100%, 0.4);--color06:hsla(0, 0%, 100%, 0.6);--color08:hsla(0, 0%, 100%, 0.8);--background:hsla(0, 0%, 2%, 1);--backgroundHover:hsla(0, 0%, 8%, 1);--backgroundPress:hsla(0, 0%, 2%, 0.8);--backgroundFocus:hsla(0, 0%, 2%, 0.8);--borderColor:hsla(0, 0%, 14%, 1);--borderColorHover:hsla(0, 0%, 16%, 1);--borderColorPress:hsla(0, 0%, 10%, 1);--borderColorFocus:hsla(0, 0%, 14%, 1);--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--colorTransparent:hsla(0, 0%, 100%, 0);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_black {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(0, 0%, 2%, 0);--background02:hsla(0, 0%, 2%, 0.2);--background04:hsla(0, 0%, 2%, 0.4);--background06:hsla(0, 0%, 2%, 0.6);--background08:hsla(0, 0%, 2%, 0.8);--color1:hsla(0, 0%, 2%, 1);--color2:hsla(0, 0%, 8%, 1);--color3:hsla(0, 0%, 10%, 1);--color4:hsla(0, 0%, 14%, 1);--color5:hsla(0, 0%, 16%, 1);--color6:hsla(0, 0%, 20%, 1);--color7:hsla(0, 0%, 26%, 1);--color8:hsla(0, 0%, 29%, 1);--color9:hsla(0, 0%, 33%, 1);--color10:hsla(0, 0%, 38%, 1);--color11:hsla(0, 0%, 65%, 1);--color12:hsla(0, 0%, 100%, 1);--color0:hsla(0, 0%, 100%, 0);--color02:hsla(0, 0%, 100%, 0.2);--color04:hsla(0, 0%, 100%, 0.4);--color06:hsla(0, 0%, 100%, 0.6);--color08:hsla(0, 0%, 100%, 0.8);--background:hsla(0, 0%, 2%, 1);--backgroundHover:hsla(0, 0%, 8%, 1);--backgroundPress:hsla(0, 0%, 2%, 0.8);--backgroundFocus:hsla(0, 0%, 2%, 0.8);--borderColor:hsla(0, 0%, 14%, 1);--borderColorHover:hsla(0, 0%, 16%, 1);--borderColorPress:hsla(0, 0%, 10%, 1);--borderColorFocus:hsla(0, 0%, 14%, 1);--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--colorTransparent:hsla(0, 0%, 100%, 0);}
}
.t_dark_black ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_white, :root.t_light .t_dark .t_white, .tm_xxt {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(0, 0%, 100%, 0);--background02:hsla(0, 0%, 100%, 0.2);--background04:hsla(0, 0%, 100%, 0.4);--background06:hsla(0, 0%, 100%, 0.6);--background08:hsla(0, 0%, 100%, 0.8);--color1:hsla(0, 0%, 100%, 1);--color2:hsla(0, 0%, 95%, 1);--color3:hsla(0, 0%, 93%, 1);--color4:hsla(0, 0%, 91%, 1);--color5:hsla(0, 0%, 88%, 1);--color6:hsla(0, 0%, 85%, 1);--color7:hsla(0, 0%, 82%, 1);--color8:hsla(0, 0%, 76%, 1);--color9:hsla(0, 0%, 56%, 1);--color10:hsla(0, 0%, 50%, 1);--color11:hsla(0, 0%, 42%, 1);--color12:hsla(0, 0%, 9%, 1);--color0:hsla(0, 0%, 9%, 0);--color02:hsla(0, 0%, 9%, 0.2);--color04:hsla(0, 0%, 9%, 0.4);--color06:hsla(0, 0%, 9%, 0.6);--color08:hsla(0, 0%, 9%, 0.8);--background:hsla(0, 0%, 100%, 1);--backgroundHover:hsla(0, 0%, 95%, 1);--backgroundPress:hsla(0, 0%, 100%, 0.8);--backgroundFocus:hsla(0, 0%, 100%, 0.8);--borderColor:hsla(0, 0%, 91%, 1);--borderColorHover:hsla(0, 0%, 88%, 1);--borderColorPress:hsla(0, 0%, 93%, 1);--borderColorFocus:hsla(0, 0%, 91%, 1);--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--colorTransparent:hsla(0, 0%, 9%, 0);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_white {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(0, 0%, 100%, 0);--background02:hsla(0, 0%, 100%, 0.2);--background04:hsla(0, 0%, 100%, 0.4);--background06:hsla(0, 0%, 100%, 0.6);--background08:hsla(0, 0%, 100%, 0.8);--color1:hsla(0, 0%, 100%, 1);--color2:hsla(0, 0%, 95%, 1);--color3:hsla(0, 0%, 93%, 1);--color4:hsla(0, 0%, 91%, 1);--color5:hsla(0, 0%, 88%, 1);--color6:hsla(0, 0%, 85%, 1);--color7:hsla(0, 0%, 82%, 1);--color8:hsla(0, 0%, 76%, 1);--color9:hsla(0, 0%, 56%, 1);--color10:hsla(0, 0%, 50%, 1);--color11:hsla(0, 0%, 42%, 1);--color12:hsla(0, 0%, 9%, 1);--color0:hsla(0, 0%, 9%, 0);--color02:hsla(0, 0%, 9%, 0.2);--color04:hsla(0, 0%, 9%, 0.4);--color06:hsla(0, 0%, 9%, 0.6);--color08:hsla(0, 0%, 9%, 0.8);--background:hsla(0, 0%, 100%, 1);--backgroundHover:hsla(0, 0%, 95%, 1);--backgroundPress:hsla(0, 0%, 100%, 0.8);--backgroundFocus:hsla(0, 0%, 100%, 0.8);--borderColor:hsla(0, 0%, 91%, 1);--borderColorHover:hsla(0, 0%, 88%, 1);--borderColorPress:hsla(0, 0%, 93%, 1);--borderColorFocus:hsla(0, 0%, 91%, 1);--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--colorTransparent:hsla(0, 0%, 9%, 0);}
}
.t_dark_white ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_blue, :root.t_light .t_dark .t_blue, .tm_xxt {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(214, 35%, 9%, 0);--background02:hsla(214, 35%, 9%, 0.2);--background04:hsla(214, 35%, 9%, 0.4);--background06:hsla(214, 35%, 9%, 0.6);--background08:hsla(214, 35%, 9%, 0.8);--color1:hsla(212, 36%, 9%, 1);--color2:hsla(216, 50%, 12%, 1);--color3:hsla(214, 59%, 15%, 1);--color4:hsla(214, 65%, 18%, 1);--color5:hsla(213, 71%, 20%, 1);--color6:hsla(212, 78%, 23%, 1);--color7:hsla(211, 86%, 27%, 1);--color8:hsla(211, 90%, 34%, 1);--color9:hsla(206, 100%, 50%, 1);--color10:hsla(209, 100%, 61%, 1);--color11:hsla(210, 100%, 66%, 1);--color12:hsla(206, 100%, 96%, 1);--color0:hsla(207, 100%, 96%, 0);--color02:hsla(207, 100%, 96%, 0.2);--color04:hsla(207, 100%, 96%, 0.4);--color06:hsla(207, 100%, 96%, 0.6);--color08:hsla(207, 100%, 96%, 0.8);--background:hsla(212, 36%, 9%, 1);--backgroundHover:hsla(216, 50%, 12%, 1);--backgroundPress:hsla(214, 35%, 9%, 0.8);--backgroundFocus:hsla(214, 35%, 9%, 0.8);--borderColor:hsla(214, 65%, 18%, 1);--borderColorHover:hsla(213, 71%, 20%, 1);--borderColorPress:hsla(214, 59%, 15%, 1);--borderColorFocus:hsla(214, 65%, 18%, 1);--color:hsla(206, 100%, 96%, 1);--colorHover:hsla(210, 100%, 66%, 1);--colorPress:hsla(206, 100%, 96%, 1);--colorFocus:hsla(210, 100%, 66%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(207, 100%, 96%, 0.2);--colorTransparent:hsla(207, 100%, 96%, 0);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_blue {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(214, 35%, 9%, 0);--background02:hsla(214, 35%, 9%, 0.2);--background04:hsla(214, 35%, 9%, 0.4);--background06:hsla(214, 35%, 9%, 0.6);--background08:hsla(214, 35%, 9%, 0.8);--color1:hsla(212, 36%, 9%, 1);--color2:hsla(216, 50%, 12%, 1);--color3:hsla(214, 59%, 15%, 1);--color4:hsla(214, 65%, 18%, 1);--color5:hsla(213, 71%, 20%, 1);--color6:hsla(212, 78%, 23%, 1);--color7:hsla(211, 86%, 27%, 1);--color8:hsla(211, 90%, 34%, 1);--color9:hsla(206, 100%, 50%, 1);--color10:hsla(209, 100%, 61%, 1);--color11:hsla(210, 100%, 66%, 1);--color12:hsla(206, 100%, 96%, 1);--color0:hsla(207, 100%, 96%, 0);--color02:hsla(207, 100%, 96%, 0.2);--color04:hsla(207, 100%, 96%, 0.4);--color06:hsla(207, 100%, 96%, 0.6);--color08:hsla(207, 100%, 96%, 0.8);--background:hsla(212, 36%, 9%, 1);--backgroundHover:hsla(216, 50%, 12%, 1);--backgroundPress:hsla(214, 35%, 9%, 0.8);--backgroundFocus:hsla(214, 35%, 9%, 0.8);--borderColor:hsla(214, 65%, 18%, 1);--borderColorHover:hsla(213, 71%, 20%, 1);--borderColorPress:hsla(214, 59%, 15%, 1);--borderColorFocus:hsla(214, 65%, 18%, 1);--color:hsla(206, 100%, 96%, 1);--colorHover:hsla(210, 100%, 66%, 1);--colorPress:hsla(206, 100%, 96%, 1);--colorFocus:hsla(210, 100%, 66%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(207, 100%, 96%, 0.2);--colorTransparent:hsla(207, 100%, 96%, 0);}
}
.t_dark_blue ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_red, :root.t_light .t_dark .t_red, .tm_xxt {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(351, 25%, 10%, 0);--background02:hsla(351, 25%, 10%, 0.2);--background04:hsla(351, 25%, 10%, 0.4);--background06:hsla(351, 25%, 10%, 0.6);--background08:hsla(351, 25%, 10%, 0.8);--color1:hsla(350, 24%, 10%, 1);--color2:hsla(357, 34%, 12%, 1);--color3:hsla(357, 43%, 16%, 1);--color4:hsla(356, 47%, 19%, 1);--color5:hsla(356, 51%, 22%, 1);--color6:hsla(357, 55%, 26%, 1);--color7:hsla(357, 60%, 32%, 1);--color8:hsla(358, 65%, 40%, 1);--color9:hsla(358, 75%, 59%, 1);--color10:hsla(358, 86%, 64%, 1);--color11:hsla(358, 100%, 69%, 1);--color12:hsla(353, 90%, 96%, 1);--color0:hsla(353, 90%, 96%, 0);--color02:hsla(353, 90%, 96%, 0.2);--color04:hsla(353, 90%, 96%, 0.4);--color06:hsla(353, 90%, 96%, 0.6);--color08:hsla(353, 90%, 96%, 0.8);--background:hsla(350, 24%, 10%, 1);--backgroundHover:hsla(357, 34%, 12%, 1);--backgroundPress:hsla(351, 25%, 10%, 0.8);--backgroundFocus:hsla(351, 25%, 10%, 0.8);--borderColor:hsla(356, 47%, 19%, 1);--borderColorHover:hsla(356, 51%, 22%, 1);--borderColorPress:hsla(357, 43%, 16%, 1);--borderColorFocus:hsla(356, 47%, 19%, 1);--color:hsla(353, 90%, 96%, 1);--colorHover:hsla(358, 100%, 69%, 1);--colorPress:hsla(353, 90%, 96%, 1);--colorFocus:hsla(358, 100%, 69%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(353, 90%, 96%, 0.2);--colorTransparent:hsla(353, 90%, 96%, 0);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_red {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(351, 25%, 10%, 0);--background02:hsla(351, 25%, 10%, 0.2);--background04:hsla(351, 25%, 10%, 0.4);--background06:hsla(351, 25%, 10%, 0.6);--background08:hsla(351, 25%, 10%, 0.8);--color1:hsla(350, 24%, 10%, 1);--color2:hsla(357, 34%, 12%, 1);--color3:hsla(357, 43%, 16%, 1);--color4:hsla(356, 47%, 19%, 1);--color5:hsla(356, 51%, 22%, 1);--color6:hsla(357, 55%, 26%, 1);--color7:hsla(357, 60%, 32%, 1);--color8:hsla(358, 65%, 40%, 1);--color9:hsla(358, 75%, 59%, 1);--color10:hsla(358, 86%, 64%, 1);--color11:hsla(358, 100%, 69%, 1);--color12:hsla(353, 90%, 96%, 1);--color0:hsla(353, 90%, 96%, 0);--color02:hsla(353, 90%, 96%, 0.2);--color04:hsla(353, 90%, 96%, 0.4);--color06:hsla(353, 90%, 96%, 0.6);--color08:hsla(353, 90%, 96%, 0.8);--background:hsla(350, 24%, 10%, 1);--backgroundHover:hsla(357, 34%, 12%, 1);--backgroundPress:hsla(351, 25%, 10%, 0.8);--backgroundFocus:hsla(351, 25%, 10%, 0.8);--borderColor:hsla(356, 47%, 19%, 1);--borderColorHover:hsla(356, 51%, 22%, 1);--borderColorPress:hsla(357, 43%, 16%, 1);--borderColorFocus:hsla(356, 47%, 19%, 1);--color:hsla(353, 90%, 96%, 1);--colorHover:hsla(358, 100%, 69%, 1);--colorPress:hsla(353, 90%, 96%, 1);--colorFocus:hsla(358, 100%, 69%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(353, 90%, 96%, 0.2);--colorTransparent:hsla(353, 90%, 96%, 0);}
}
.t_dark_red ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_yellow, :root.t_light .t_dark .t_yellow, .tm_xxt {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(46, 100%, 5%, 0);--background02:hsla(46, 100%, 5%, 0.2);--background04:hsla(46, 100%, 5%, 0.4);--background06:hsla(46, 100%, 5%, 0.6);--background08:hsla(46, 100%, 5%, 0.8);--color1:hsla(45, 100%, 5%, 1);--color2:hsla(46, 100%, 7%, 1);--color3:hsla(45, 100%, 9%, 1);--color4:hsla(45, 100%, 10%, 1);--color5:hsla(46, 100%, 12%, 1);--color6:hsla(49, 100%, 14%, 1);--color7:hsla(49, 89%, 18%, 1);--color8:hsla(50, 100%, 22%, 1);--color9:hsla(53, 92%, 50%, 1);--color10:hsla(54, 100%, 68%, 1);--color11:hsla(48, 100%, 47%, 1);--color12:hsla(53, 100%, 91%, 1);--color0:hsla(53, 100%, 91%, 0);--color02:hsla(53, 100%, 91%, 0.2);--color04:hsla(53, 100%, 91%, 0.4);--color06:hsla(53, 100%, 91%, 0.6);--color08:hsla(53, 100%, 91%, 0.8);--background:hsla(45, 100%, 5%, 1);--backgroundHover:hsla(46, 100%, 7%, 1);--backgroundPress:hsla(46, 100%, 5%, 0.8);--backgroundFocus:hsla(46, 100%, 5%, 0.8);--borderColor:hsla(45, 100%, 10%, 1);--borderColorHover:hsla(46, 100%, 12%, 1);--borderColorPress:hsla(45, 100%, 9%, 1);--borderColorFocus:hsla(45, 100%, 10%, 1);--color:hsla(53, 100%, 91%, 1);--colorHover:hsla(48, 100%, 47%, 1);--colorPress:hsla(53, 100%, 91%, 1);--colorFocus:hsla(48, 100%, 47%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(53, 100%, 91%, 0.2);--colorTransparent:hsla(53, 100%, 91%, 0);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_yellow {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(46, 100%, 5%, 0);--background02:hsla(46, 100%, 5%, 0.2);--background04:hsla(46, 100%, 5%, 0.4);--background06:hsla(46, 100%, 5%, 0.6);--background08:hsla(46, 100%, 5%, 0.8);--color1:hsla(45, 100%, 5%, 1);--color2:hsla(46, 100%, 7%, 1);--color3:hsla(45, 100%, 9%, 1);--color4:hsla(45, 100%, 10%, 1);--color5:hsla(46, 100%, 12%, 1);--color6:hsla(49, 100%, 14%, 1);--color7:hsla(49, 89%, 18%, 1);--color8:hsla(50, 100%, 22%, 1);--color9:hsla(53, 92%, 50%, 1);--color10:hsla(54, 100%, 68%, 1);--color11:hsla(48, 100%, 47%, 1);--color12:hsla(53, 100%, 91%, 1);--color0:hsla(53, 100%, 91%, 0);--color02:hsla(53, 100%, 91%, 0.2);--color04:hsla(53, 100%, 91%, 0.4);--color06:hsla(53, 100%, 91%, 0.6);--color08:hsla(53, 100%, 91%, 0.8);--background:hsla(45, 100%, 5%, 1);--backgroundHover:hsla(46, 100%, 7%, 1);--backgroundPress:hsla(46, 100%, 5%, 0.8);--backgroundFocus:hsla(46, 100%, 5%, 0.8);--borderColor:hsla(45, 100%, 10%, 1);--borderColorHover:hsla(46, 100%, 12%, 1);--borderColorPress:hsla(45, 100%, 9%, 1);--borderColorFocus:hsla(45, 100%, 10%, 1);--color:hsla(53, 100%, 91%, 1);--colorHover:hsla(48, 100%, 47%, 1);--colorPress:hsla(53, 100%, 91%, 1);--colorFocus:hsla(48, 100%, 47%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(53, 100%, 91%, 0.2);--colorTransparent:hsla(53, 100%, 91%, 0);}
}
.t_dark_yellow ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_green, :root.t_light .t_dark .t_green, .tm_xxt {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(145, 33%, 7%, 0);--background02:hsla(145, 33%, 7%, 0.2);--background04:hsla(145, 33%, 7%, 0.4);--background06:hsla(145, 33%, 7%, 0.6);--background08:hsla(145, 33%, 7%, 0.8);--color1:hsla(145, 32%, 7%, 1);--color2:hsla(155, 44%, 8%, 1);--color3:hsla(155, 46%, 11%, 1);--color4:hsla(154, 48%, 13%, 1);--color5:hsla(155, 50%, 15%, 1);--color6:hsla(154, 51%, 18%, 1);--color7:hsla(153, 51%, 22%, 1);--color8:hsla(151, 52%, 28%, 1);--color9:hsla(151, 55%, 42%, 1);--color10:hsla(151, 49%, 46%, 1);--color11:hsla(151, 50%, 53%, 1);--color12:hsla(136, 73%, 94%, 1);--color0:hsla(134, 73%, 94%, 0);--color02:hsla(134, 73%, 94%, 0.2);--color04:hsla(134, 73%, 94%, 0.4);--color06:hsla(134, 73%, 94%, 0.6);--color08:hsla(134, 73%, 94%, 0.8);--background:hsla(145, 32%, 7%, 1);--backgroundHover:hsla(155, 44%, 8%, 1);--backgroundPress:hsla(145, 33%, 7%, 0.8);--backgroundFocus:hsla(145, 33%, 7%, 0.8);--borderColor:hsla(154, 48%, 13%, 1);--borderColorHover:hsla(155, 50%, 15%, 1);--borderColorPress:hsla(155, 46%, 11%, 1);--borderColorFocus:hsla(154, 48%, 13%, 1);--color:hsla(136, 73%, 94%, 1);--colorHover:hsla(151, 50%, 53%, 1);--colorPress:hsla(136, 73%, 94%, 1);--colorFocus:hsla(151, 50%, 53%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(134, 73%, 94%, 0.2);--colorTransparent:hsla(134, 73%, 94%, 0);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_green {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(145, 33%, 7%, 0);--background02:hsla(145, 33%, 7%, 0.2);--background04:hsla(145, 33%, 7%, 0.4);--background06:hsla(145, 33%, 7%, 0.6);--background08:hsla(145, 33%, 7%, 0.8);--color1:hsla(145, 32%, 7%, 1);--color2:hsla(155, 44%, 8%, 1);--color3:hsla(155, 46%, 11%, 1);--color4:hsla(154, 48%, 13%, 1);--color5:hsla(155, 50%, 15%, 1);--color6:hsla(154, 51%, 18%, 1);--color7:hsla(153, 51%, 22%, 1);--color8:hsla(151, 52%, 28%, 1);--color9:hsla(151, 55%, 42%, 1);--color10:hsla(151, 49%, 46%, 1);--color11:hsla(151, 50%, 53%, 1);--color12:hsla(136, 73%, 94%, 1);--color0:hsla(134, 73%, 94%, 0);--color02:hsla(134, 73%, 94%, 0.2);--color04:hsla(134, 73%, 94%, 0.4);--color06:hsla(134, 73%, 94%, 0.6);--color08:hsla(134, 73%, 94%, 0.8);--background:hsla(145, 32%, 7%, 1);--backgroundHover:hsla(155, 44%, 8%, 1);--backgroundPress:hsla(145, 33%, 7%, 0.8);--backgroundFocus:hsla(145, 33%, 7%, 0.8);--borderColor:hsla(154, 48%, 13%, 1);--borderColorHover:hsla(155, 50%, 15%, 1);--borderColorPress:hsla(155, 46%, 11%, 1);--borderColorFocus:hsla(154, 48%, 13%, 1);--color:hsla(136, 73%, 94%, 1);--colorHover:hsla(151, 50%, 53%, 1);--colorPress:hsla(136, 73%, 94%, 1);--colorFocus:hsla(151, 50%, 53%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(134, 73%, 94%, 0.2);--colorTransparent:hsla(134, 73%, 94%, 0);}
}
.t_dark_green ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_light .t_Card, :root.t_dark .t_light .t_Input, :root.t_dark .t_light .t_ListItem, :root.t_dark .t_light .t_Progress, :root.t_dark .t_light .t_SelectTrigger, :root.t_dark .t_light .t_SliderTrack, :root.t_dark .t_light .t_TextArea, :root.t_dark .t_light .t_TooltipArrow, :root.t_dark .t_light .t_white_Card, :root.t_dark .t_light .t_white_Input, :root.t_dark .t_light .t_white_ListItem, :root.t_dark .t_light .t_white_Progress, :root.t_dark .t_light .t_white_SelectTrigger, :root.t_dark .t_light .t_white_SliderTrack, :root.t_dark .t_light .t_white_TextArea, :root.t_dark .t_light .t_white_TooltipArrow, :root.t_light .t_Card, :root.t_light .t_Input, :root.t_light .t_ListItem, :root.t_light .t_Progress, :root.t_light .t_SelectTrigger, :root.t_light .t_SliderTrack, :root.t_light .t_TextArea, :root.t_light .t_TooltipArrow, :root.t_light .t_white_Card, :root.t_light .t_white_Input, :root.t_light .t_white_ListItem, :root.t_light .t_white_Progress, :root.t_light .t_white_SelectTrigger, :root.t_light .t_white_SliderTrack, :root.t_light .t_white_TextArea, :root.t_light .t_white_TooltipArrow, .tm_xxt {--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--background:hsla(0, 0%, 95%, 1);--backgroundHover:hsla(0, 0%, 100%, 1);--backgroundPress:hsla(0, 0%, 93%, 1);--backgroundFocus:hsla(0, 0%, 93%, 1);--borderColor:hsla(0, 0%, 88%, 1);--borderColorHover:hsla(0, 0%, 91%, 1);--borderColorFocus:hsla(0, 0%, 88%, 1);--borderColorPress:hsla(0, 0%, 85%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_Card, .t_Input, .t_ListItem, .t_Progress, .t_SelectTrigger, .t_SliderTrack, .t_TextArea, .t_TooltipArrow, .t_white_Card, .t_white_Input, .t_white_ListItem, .t_white_Progress, .t_white_SelectTrigger, .t_white_SliderTrack, .t_white_TextArea, .t_white_TooltipArrow {--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--background:hsla(0, 0%, 95%, 1);--backgroundHover:hsla(0, 0%, 100%, 1);--backgroundPress:hsla(0, 0%, 93%, 1);--backgroundFocus:hsla(0, 0%, 93%, 1);--borderColor:hsla(0, 0%, 88%, 1);--borderColorHover:hsla(0, 0%, 91%, 1);--borderColorFocus:hsla(0, 0%, 88%, 1);--borderColorPress:hsla(0, 0%, 85%, 1);}
}
:root.t_dark .t_light .t_Button, :root.t_dark .t_light .t_SliderTrackActive, :root.t_dark .t_light .t_white_Button, :root.t_dark .t_light .t_white_SliderTrackActive, :root.t_light .t_Button, :root.t_light .t_SliderTrackActive, :root.t_light .t_white_Button, :root.t_light .t_white_SliderTrackActive, .tm_xxt {--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--background:hsla(0, 0%, 91%, 1);--backgroundHover:hsla(0, 0%, 93%, 1);--backgroundPress:hsla(0, 0%, 88%, 1);--backgroundFocus:hsla(0, 0%, 88%, 1);--borderColor:hsla(0, 0%, 82%, 1);--borderColorHover:hsla(0, 0%, 85%, 1);--borderColorFocus:hsla(0, 0%, 82%, 1);--borderColorPress:hsla(0, 0%, 76%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_Button, .t_SliderTrackActive, .t_white_Button, .t_white_SliderTrackActive {--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--background:hsla(0, 0%, 91%, 1);--backgroundHover:hsla(0, 0%, 93%, 1);--backgroundPress:hsla(0, 0%, 88%, 1);--backgroundFocus:hsla(0, 0%, 88%, 1);--borderColor:hsla(0, 0%, 82%, 1);--borderColorHover:hsla(0, 0%, 85%, 1);--borderColorFocus:hsla(0, 0%, 82%, 1);--borderColorPress:hsla(0, 0%, 76%, 1);}
}
:root.t_dark .t_light .t_Checkbox, :root.t_dark .t_light .t_RadioGroupItem, :root.t_dark .t_light .t_Switch, :root.t_dark .t_light .t_TooltipContent, :root.t_dark .t_light .t_white_Checkbox, :root.t_dark .t_light .t_white_RadioGroupItem, :root.t_dark .t_light .t_white_Switch, :root.t_dark .t_light .t_white_TooltipContent, :root.t_light .t_Checkbox, :root.t_light .t_RadioGroupItem, :root.t_light .t_Switch, :root.t_light .t_TooltipContent, :root.t_light .t_white_Checkbox, :root.t_light .t_white_RadioGroupItem, :root.t_light .t_white_Switch, :root.t_light .t_white_TooltipContent, .tm_xxt {--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--background:hsla(0, 0%, 93%, 1);--backgroundHover:hsla(0, 0%, 95%, 1);--backgroundPress:hsla(0, 0%, 91%, 1);--backgroundFocus:hsla(0, 0%, 91%, 1);--borderColor:hsla(0, 0%, 85%, 1);--borderColorHover:hsla(0, 0%, 88%, 1);--borderColorFocus:hsla(0, 0%, 85%, 1);--borderColorPress:hsla(0, 0%, 82%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_Checkbox, .t_RadioGroupItem, .t_Switch, .t_TooltipContent, .t_white_Checkbox, .t_white_RadioGroupItem, .t_white_Switch, .t_white_TooltipContent {--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--background:hsla(0, 0%, 93%, 1);--backgroundHover:hsla(0, 0%, 95%, 1);--backgroundPress:hsla(0, 0%, 91%, 1);--backgroundFocus:hsla(0, 0%, 91%, 1);--borderColor:hsla(0, 0%, 85%, 1);--borderColorHover:hsla(0, 0%, 88%, 1);--borderColorFocus:hsla(0, 0%, 85%, 1);--borderColorPress:hsla(0, 0%, 82%, 1);}
}
:root.t_dark .t_light .t_ProgressIndicator, :root.t_dark .t_light .t_SliderThumb, :root.t_dark .t_light .t_SwitchThumb, :root.t_dark .t_light .t_Tooltip, :root.t_dark .t_light .t_white_ProgressIndicator, :root.t_dark .t_light .t_white_SliderThumb, :root.t_dark .t_light .t_white_SwitchThumb, :root.t_dark .t_light .t_white_Tooltip, :root.t_light .t_ProgressIndicator, :root.t_light .t_SliderThumb, :root.t_light .t_SwitchThumb, :root.t_light .t_Tooltip, :root.t_light .t_white_ProgressIndicator, :root.t_light .t_white_SliderThumb, :root.t_light .t_white_SwitchThumb, :root.t_light .t_white_Tooltip, .tm_xxt {--accentBackground:hsla(0, 0%, 38%, 1);--accentColor:hsla(0, 0%, 10%, 1);--background0:hsla(0, 0%, 9%, 0);--background02:hsla(0, 0%, 9%, 0.2);--background04:hsla(0, 0%, 9%, 0.4);--background06:hsla(0, 0%, 9%, 0.6);--background08:hsla(0, 0%, 9%, 0.8);--color1:hsla(0, 0%, 9%, 1);--color2:hsla(0, 0%, 42%, 1);--color3:hsla(0, 0%, 50%, 1);--color4:hsla(0, 0%, 56%, 1);--color5:hsla(0, 0%, 76%, 1);--color6:hsla(0, 0%, 82%, 1);--color7:hsla(0, 0%, 85%, 1);--color8:hsla(0, 0%, 88%, 1);--color9:hsla(0, 0%, 91%, 1);--color10:hsla(0, 0%, 93%, 1);--color11:hsla(0, 0%, 95%, 1);--color12:hsla(0, 0%, 100%, 1);--color0:hsla(0, 0%, 100%, 0);--color02:hsla(0, 0%, 100%, 0.2);--color04:hsla(0, 0%, 100%, 0.4);--color06:hsla(0, 0%, 100%, 0.6);--color08:hsla(0, 0%, 100%, 0.8);--background:hsla(0, 0%, 9%, 1);--backgroundHover:hsla(0, 0%, 9%, 0.8);--backgroundPress:hsla(0, 0%, 42%, 1);--backgroundFocus:hsla(0, 0%, 42%, 1);--borderColor:hsla(0, 0%, 56%, 1);--borderColorHover:hsla(0, 0%, 50%, 1);--borderColorPress:hsla(0, 0%, 76%, 1);--borderColorFocus:hsla(0, 0%, 56%, 1);--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 95%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 95%, 1);--placeholderColor:hsla(0, 0%, 91%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--colorTransparent:hsla(0, 0%, 100%, 0);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_ProgressIndicator, .t_SliderThumb, .t_SwitchThumb, .t_Tooltip, .t_white_ProgressIndicator, .t_white_SliderThumb, .t_white_SwitchThumb, .t_white_Tooltip {--accentBackground:hsla(0, 0%, 38%, 1);--accentColor:hsla(0, 0%, 10%, 1);--background0:hsla(0, 0%, 9%, 0);--background02:hsla(0, 0%, 9%, 0.2);--background04:hsla(0, 0%, 9%, 0.4);--background06:hsla(0, 0%, 9%, 0.6);--background08:hsla(0, 0%, 9%, 0.8);--color1:hsla(0, 0%, 9%, 1);--color2:hsla(0, 0%, 42%, 1);--color3:hsla(0, 0%, 50%, 1);--color4:hsla(0, 0%, 56%, 1);--color5:hsla(0, 0%, 76%, 1);--color6:hsla(0, 0%, 82%, 1);--color7:hsla(0, 0%, 85%, 1);--color8:hsla(0, 0%, 88%, 1);--color9:hsla(0, 0%, 91%, 1);--color10:hsla(0, 0%, 93%, 1);--color11:hsla(0, 0%, 95%, 1);--color12:hsla(0, 0%, 100%, 1);--color0:hsla(0, 0%, 100%, 0);--color02:hsla(0, 0%, 100%, 0.2);--color04:hsla(0, 0%, 100%, 0.4);--color06:hsla(0, 0%, 100%, 0.6);--color08:hsla(0, 0%, 100%, 0.8);--background:hsla(0, 0%, 9%, 1);--backgroundHover:hsla(0, 0%, 9%, 0.8);--backgroundPress:hsla(0, 0%, 42%, 1);--backgroundFocus:hsla(0, 0%, 42%, 1);--borderColor:hsla(0, 0%, 56%, 1);--borderColorHover:hsla(0, 0%, 50%, 1);--borderColorPress:hsla(0, 0%, 76%, 1);--borderColorFocus:hsla(0, 0%, 56%, 1);--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 95%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 95%, 1);--placeholderColor:hsla(0, 0%, 91%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--colorTransparent:hsla(0, 0%, 100%, 0);}
}
.t_light_SwitchThumb ::selection, .t_light_SliderThumb ::selection, .t_light_Tooltip ::selection, .t_light_ProgressIndicator ::selection, .t_light_white_SwitchThumb ::selection, .t_light_white_SliderThumb ::selection, .t_light_white_Tooltip ::selection, .t_light_white_ProgressIndicator ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_Card, :root.t_dark .t_Input, :root.t_dark .t_ListItem, :root.t_dark .t_Progress, :root.t_dark .t_SelectTrigger, :root.t_dark .t_SliderTrack, :root.t_dark .t_TextArea, :root.t_dark .t_TooltipArrow, :root.t_dark .t_black_Card, :root.t_dark .t_black_Input, :root.t_dark .t_black_ListItem, :root.t_dark .t_black_Progress, :root.t_dark .t_black_SelectTrigger, :root.t_dark .t_black_SliderTrack, :root.t_dark .t_black_TextArea, :root.t_dark .t_black_TooltipArrow, :root.t_light .t_dark .t_Card, :root.t_light .t_dark .t_Input, :root.t_light .t_dark .t_ListItem, :root.t_light .t_dark .t_Progress, :root.t_light .t_dark .t_SelectTrigger, :root.t_light .t_dark .t_SliderTrack, :root.t_light .t_dark .t_TextArea, :root.t_light .t_dark .t_TooltipArrow, :root.t_light .t_dark .t_black_Card, :root.t_light .t_dark .t_black_Input, :root.t_light .t_dark .t_black_ListItem, :root.t_light .t_dark .t_black_Progress, :root.t_light .t_dark .t_black_SelectTrigger, :root.t_light .t_dark .t_black_SliderTrack, :root.t_light .t_dark .t_black_TextArea, :root.t_light .t_dark .t_black_TooltipArrow, .tm_xxt {--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--background:hsla(0, 0%, 8%, 1);--backgroundHover:hsla(0, 0%, 10%, 1);--backgroundPress:hsla(0, 0%, 2%, 1);--backgroundFocus:hsla(0, 0%, 2%, 1);--borderColor:hsla(0, 0%, 16%, 1);--borderColorHover:hsla(0, 0%, 20%, 1);--borderColorFocus:hsla(0, 0%, 16%, 1);--borderColorPress:hsla(0, 0%, 14%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_Card, .t_Input, .t_ListItem, .t_Progress, .t_SelectTrigger, .t_SliderTrack, .t_TextArea, .t_TooltipArrow, .t_black_Card, .t_black_Input, .t_black_ListItem, .t_black_Progress, .t_black_SelectTrigger, .t_black_SliderTrack, .t_black_TextArea, .t_black_TooltipArrow {--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--background:hsla(0, 0%, 8%, 1);--backgroundHover:hsla(0, 0%, 10%, 1);--backgroundPress:hsla(0, 0%, 2%, 1);--backgroundFocus:hsla(0, 0%, 2%, 1);--borderColor:hsla(0, 0%, 16%, 1);--borderColorHover:hsla(0, 0%, 20%, 1);--borderColorFocus:hsla(0, 0%, 16%, 1);--borderColorPress:hsla(0, 0%, 14%, 1);}
}
:root.t_dark .t_Button, :root.t_dark .t_SliderTrackActive, :root.t_dark .t_black_Button, :root.t_dark .t_black_SliderTrackActive, :root.t_light .t_dark .t_Button, :root.t_light .t_dark .t_SliderTrackActive, :root.t_light .t_dark .t_black_Button, :root.t_light .t_dark .t_black_SliderTrackActive, .tm_xxt {--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--background:hsla(0, 0%, 14%, 1);--backgroundHover:hsla(0, 0%, 16%, 1);--backgroundPress:hsla(0, 0%, 10%, 1);--backgroundFocus:hsla(0, 0%, 10%, 1);--borderColor:hsla(0, 0%, 26%, 1);--borderColorHover:hsla(0, 0%, 29%, 1);--borderColorFocus:hsla(0, 0%, 26%, 1);--borderColorPress:hsla(0, 0%, 20%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_Button, .t_SliderTrackActive, .t_black_Button, .t_black_SliderTrackActive {--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--background:hsla(0, 0%, 14%, 1);--backgroundHover:hsla(0, 0%, 16%, 1);--backgroundPress:hsla(0, 0%, 10%, 1);--backgroundFocus:hsla(0, 0%, 10%, 1);--borderColor:hsla(0, 0%, 26%, 1);--borderColorHover:hsla(0, 0%, 29%, 1);--borderColorFocus:hsla(0, 0%, 26%, 1);--borderColorPress:hsla(0, 0%, 20%, 1);}
}
:root.t_dark .t_Checkbox, :root.t_dark .t_RadioGroupItem, :root.t_dark .t_Switch, :root.t_dark .t_TooltipContent, :root.t_dark .t_black_Checkbox, :root.t_dark .t_black_RadioGroupItem, :root.t_dark .t_black_Switch, :root.t_dark .t_black_TooltipContent, :root.t_light .t_dark .t_Checkbox, :root.t_light .t_dark .t_RadioGroupItem, :root.t_light .t_dark .t_Switch, :root.t_light .t_dark .t_TooltipContent, :root.t_light .t_dark .t_black_Checkbox, :root.t_light .t_dark .t_black_RadioGroupItem, :root.t_light .t_dark .t_black_Switch, :root.t_light .t_dark .t_black_TooltipContent, .tm_xxt {--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--background:hsla(0, 0%, 10%, 1);--backgroundHover:hsla(0, 0%, 14%, 1);--backgroundPress:hsla(0, 0%, 8%, 1);--backgroundFocus:hsla(0, 0%, 8%, 1);--borderColor:hsla(0, 0%, 20%, 1);--borderColorHover:hsla(0, 0%, 26%, 1);--borderColorFocus:hsla(0, 0%, 20%, 1);--borderColorPress:hsla(0, 0%, 16%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_Checkbox, .t_RadioGroupItem, .t_Switch, .t_TooltipContent, .t_black_Checkbox, .t_black_RadioGroupItem, .t_black_Switch, .t_black_TooltipContent {--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--background:hsla(0, 0%, 10%, 1);--backgroundHover:hsla(0, 0%, 14%, 1);--backgroundPress:hsla(0, 0%, 8%, 1);--backgroundFocus:hsla(0, 0%, 8%, 1);--borderColor:hsla(0, 0%, 20%, 1);--borderColorHover:hsla(0, 0%, 26%, 1);--borderColorFocus:hsla(0, 0%, 20%, 1);--borderColorPress:hsla(0, 0%, 16%, 1);}
}
:root.t_dark .t_ProgressIndicator, :root.t_dark .t_SliderThumb, :root.t_dark .t_SwitchThumb, :root.t_dark .t_Tooltip, :root.t_dark .t_black_ProgressIndicator, :root.t_dark .t_black_SliderThumb, :root.t_dark .t_black_SwitchThumb, :root.t_dark .t_black_Tooltip, :root.t_light .t_dark .t_ProgressIndicator, :root.t_light .t_dark .t_SliderThumb, :root.t_light .t_dark .t_SwitchThumb, :root.t_light .t_dark .t_Tooltip, :root.t_light .t_dark .t_black_ProgressIndicator, :root.t_light .t_dark .t_black_SliderThumb, :root.t_light .t_dark .t_black_SwitchThumb, :root.t_light .t_dark .t_black_Tooltip, .tm_xxt {--accentBackground:hsla(0, 0%, 93%, 1);--accentColor:hsla(0, 0%, 50%, 1);--background0:hsla(0, 0%, 100%, 0);--background02:hsla(0, 0%, 100%, 0.2);--background04:hsla(0, 0%, 100%, 0.4);--background06:hsla(0, 0%, 100%, 0.6);--background08:hsla(0, 0%, 100%, 0.8);--color1:hsla(0, 0%, 100%, 1);--color2:hsla(0, 0%, 65%, 1);--color3:hsla(0, 0%, 38%, 1);--color4:hsla(0, 0%, 33%, 1);--color5:hsla(0, 0%, 29%, 1);--color6:hsla(0, 0%, 26%, 1);--color7:hsla(0, 0%, 20%, 1);--color8:hsla(0, 0%, 16%, 1);--color9:hsla(0, 0%, 14%, 1);--color10:hsla(0, 0%, 10%, 1);--color11:hsla(0, 0%, 8%, 1);--color12:hsla(0, 0%, 2%, 1);--color0:hsla(0, 0%, 2%, 0);--color02:hsla(0, 0%, 2%, 0.2);--color04:hsla(0, 0%, 2%, 0.4);--color06:hsla(0, 0%, 2%, 0.6);--color08:hsla(0, 0%, 2%, 0.8);--background:hsla(0, 0%, 100%, 1);--backgroundHover:hsla(0, 0%, 65%, 1);--backgroundPress:hsla(0, 0%, 100%, 0.8);--backgroundFocus:hsla(0, 0%, 100%, 0.8);--borderColor:hsla(0, 0%, 33%, 1);--borderColorHover:hsla(0, 0%, 29%, 1);--borderColorPress:hsla(0, 0%, 38%, 1);--borderColorFocus:hsla(0, 0%, 33%, 1);--color:hsla(0, 0%, 2%, 1);--colorHover:hsla(0, 0%, 8%, 1);--colorPress:hsla(0, 0%, 2%, 1);--colorFocus:hsla(0, 0%, 8%, 1);--placeholderColor:hsla(0, 0%, 14%, 1);--outlineColor:hsla(0, 0%, 2%, 0.2);--colorTransparent:hsla(0, 0%, 2%, 0);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_ProgressIndicator, .t_SliderThumb, .t_SwitchThumb, .t_Tooltip, .t_black_ProgressIndicator, .t_black_SliderThumb, .t_black_SwitchThumb, .t_black_Tooltip {--accentBackground:hsla(0, 0%, 93%, 1);--accentColor:hsla(0, 0%, 50%, 1);--background0:hsla(0, 0%, 100%, 0);--background02:hsla(0, 0%, 100%, 0.2);--background04:hsla(0, 0%, 100%, 0.4);--background06:hsla(0, 0%, 100%, 0.6);--background08:hsla(0, 0%, 100%, 0.8);--color1:hsla(0, 0%, 100%, 1);--color2:hsla(0, 0%, 65%, 1);--color3:hsla(0, 0%, 38%, 1);--color4:hsla(0, 0%, 33%, 1);--color5:hsla(0, 0%, 29%, 1);--color6:hsla(0, 0%, 26%, 1);--color7:hsla(0, 0%, 20%, 1);--color8:hsla(0, 0%, 16%, 1);--color9:hsla(0, 0%, 14%, 1);--color10:hsla(0, 0%, 10%, 1);--color11:hsla(0, 0%, 8%, 1);--color12:hsla(0, 0%, 2%, 1);--color0:hsla(0, 0%, 2%, 0);--color02:hsla(0, 0%, 2%, 0.2);--color04:hsla(0, 0%, 2%, 0.4);--color06:hsla(0, 0%, 2%, 0.6);--color08:hsla(0, 0%, 2%, 0.8);--background:hsla(0, 0%, 100%, 1);--backgroundHover:hsla(0, 0%, 65%, 1);--backgroundPress:hsla(0, 0%, 100%, 0.8);--backgroundFocus:hsla(0, 0%, 100%, 0.8);--borderColor:hsla(0, 0%, 33%, 1);--borderColorHover:hsla(0, 0%, 29%, 1);--borderColorPress:hsla(0, 0%, 38%, 1);--borderColorFocus:hsla(0, 0%, 33%, 1);--color:hsla(0, 0%, 2%, 1);--colorHover:hsla(0, 0%, 8%, 1);--colorPress:hsla(0, 0%, 2%, 1);--colorFocus:hsla(0, 0%, 8%, 1);--placeholderColor:hsla(0, 0%, 14%, 1);--outlineColor:hsla(0, 0%, 2%, 0.2);--colorTransparent:hsla(0, 0%, 2%, 0);}
}
.t_dark_SwitchThumb ::selection, .t_dark_SliderThumb ::selection, .t_dark_Tooltip ::selection, .t_dark_ProgressIndicator ::selection, .t_dark_black_SwitchThumb ::selection, .t_dark_black_SliderThumb ::selection, .t_dark_black_Tooltip ::selection, .t_dark_black_ProgressIndicator ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_light .t_accent_Card, :root.t_dark .t_light .t_accent_Input, :root.t_dark .t_light .t_accent_ListItem, :root.t_dark .t_light .t_accent_Progress, :root.t_dark .t_light .t_accent_SelectTrigger, :root.t_dark .t_light .t_accent_SliderTrack, :root.t_dark .t_light .t_accent_TextArea, :root.t_dark .t_light .t_accent_TooltipArrow, :root.t_dark .t_light .t_black_Card, :root.t_dark .t_light .t_black_Input, :root.t_dark .t_light .t_black_ListItem, :root.t_dark .t_light .t_black_Progress, :root.t_dark .t_light .t_black_SelectTrigger, :root.t_dark .t_light .t_black_SliderTrack, :root.t_dark .t_light .t_black_TextArea, :root.t_dark .t_light .t_black_TooltipArrow, :root.t_light .t_accent_Card, :root.t_light .t_accent_Input, :root.t_light .t_accent_ListItem, :root.t_light .t_accent_Progress, :root.t_light .t_accent_SelectTrigger, :root.t_light .t_accent_SliderTrack, :root.t_light .t_accent_TextArea, :root.t_light .t_accent_TooltipArrow, :root.t_light .t_black_Card, :root.t_light .t_black_Input, :root.t_light .t_black_ListItem, :root.t_light .t_black_Progress, :root.t_light .t_black_SelectTrigger, :root.t_light .t_black_SliderTrack, :root.t_light .t_black_TextArea, :root.t_light .t_black_TooltipArrow, .tm_xxt {--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--background:hsla(0, 0%, 8%, 1);--backgroundHover:hsla(0, 0%, 2%, 1);--backgroundPress:hsla(0, 0%, 10%, 1);--backgroundFocus:hsla(0, 0%, 10%, 1);--borderColor:hsla(0, 0%, 16%, 1);--borderColorHover:hsla(0, 0%, 14%, 1);--borderColorFocus:hsla(0, 0%, 16%, 1);--borderColorPress:hsla(0, 0%, 20%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_accent_Card, .t_accent_Input, .t_accent_ListItem, .t_accent_Progress, .t_accent_SelectTrigger, .t_accent_SliderTrack, .t_accent_TextArea, .t_accent_TooltipArrow, .t_black_Card, .t_black_Input, .t_black_ListItem, .t_black_Progress, .t_black_SelectTrigger, .t_black_SliderTrack, .t_black_TextArea, .t_black_TooltipArrow {--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--background:hsla(0, 0%, 8%, 1);--backgroundHover:hsla(0, 0%, 2%, 1);--backgroundPress:hsla(0, 0%, 10%, 1);--backgroundFocus:hsla(0, 0%, 10%, 1);--borderColor:hsla(0, 0%, 16%, 1);--borderColorHover:hsla(0, 0%, 14%, 1);--borderColorFocus:hsla(0, 0%, 16%, 1);--borderColorPress:hsla(0, 0%, 20%, 1);}
}
:root.t_dark .t_light .t_accent_Button, :root.t_dark .t_light .t_accent_SliderTrackActive, :root.t_dark .t_light .t_black_Button, :root.t_dark .t_light .t_black_SliderTrackActive, :root.t_light .t_accent_Button, :root.t_light .t_accent_SliderTrackActive, :root.t_light .t_black_Button, :root.t_light .t_black_SliderTrackActive, .tm_xxt {--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--background:hsla(0, 0%, 14%, 1);--backgroundHover:hsla(0, 0%, 10%, 1);--backgroundPress:hsla(0, 0%, 16%, 1);--backgroundFocus:hsla(0, 0%, 16%, 1);--borderColor:hsla(0, 0%, 26%, 1);--borderColorHover:hsla(0, 0%, 20%, 1);--borderColorFocus:hsla(0, 0%, 26%, 1);--borderColorPress:hsla(0, 0%, 29%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_accent_Button, .t_accent_SliderTrackActive, .t_black_Button, .t_black_SliderTrackActive {--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--background:hsla(0, 0%, 14%, 1);--backgroundHover:hsla(0, 0%, 10%, 1);--backgroundPress:hsla(0, 0%, 16%, 1);--backgroundFocus:hsla(0, 0%, 16%, 1);--borderColor:hsla(0, 0%, 26%, 1);--borderColorHover:hsla(0, 0%, 20%, 1);--borderColorFocus:hsla(0, 0%, 26%, 1);--borderColorPress:hsla(0, 0%, 29%, 1);}
}
:root.t_dark .t_light .t_accent_Checkbox, :root.t_dark .t_light .t_accent_RadioGroupItem, :root.t_dark .t_light .t_accent_Switch, :root.t_dark .t_light .t_accent_TooltipContent, :root.t_dark .t_light .t_black_Checkbox, :root.t_dark .t_light .t_black_RadioGroupItem, :root.t_dark .t_light .t_black_Switch, :root.t_dark .t_light .t_black_TooltipContent, :root.t_light .t_accent_Checkbox, :root.t_light .t_accent_RadioGroupItem, :root.t_light .t_accent_Switch, :root.t_light .t_accent_TooltipContent, :root.t_light .t_black_Checkbox, :root.t_light .t_black_RadioGroupItem, :root.t_light .t_black_Switch, :root.t_light .t_black_TooltipContent, .tm_xxt {--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--background:hsla(0, 0%, 10%, 1);--backgroundHover:hsla(0, 0%, 8%, 1);--backgroundPress:hsla(0, 0%, 14%, 1);--backgroundFocus:hsla(0, 0%, 14%, 1);--borderColor:hsla(0, 0%, 20%, 1);--borderColorHover:hsla(0, 0%, 16%, 1);--borderColorFocus:hsla(0, 0%, 20%, 1);--borderColorPress:hsla(0, 0%, 26%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_accent_Checkbox, .t_accent_RadioGroupItem, .t_accent_Switch, .t_accent_TooltipContent, .t_black_Checkbox, .t_black_RadioGroupItem, .t_black_Switch, .t_black_TooltipContent {--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 65%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 65%, 1);--placeholderColor:hsla(0, 0%, 33%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--background:hsla(0, 0%, 10%, 1);--backgroundHover:hsla(0, 0%, 8%, 1);--backgroundPress:hsla(0, 0%, 14%, 1);--backgroundFocus:hsla(0, 0%, 14%, 1);--borderColor:hsla(0, 0%, 20%, 1);--borderColorHover:hsla(0, 0%, 16%, 1);--borderColorFocus:hsla(0, 0%, 20%, 1);--borderColorPress:hsla(0, 0%, 26%, 1);}
}
:root.t_dark .t_light .t_accent_ProgressIndicator, :root.t_dark .t_light .t_accent_SliderThumb, :root.t_dark .t_light .t_accent_SwitchThumb, :root.t_dark .t_light .t_accent_Tooltip, :root.t_light .t_accent_ProgressIndicator, :root.t_light .t_accent_SliderThumb, :root.t_light .t_accent_SwitchThumb, :root.t_light .t_accent_Tooltip, .tm_xxt {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(0, 0%, 100%, 0);--background02:hsla(0, 0%, 100%, 0.2);--background04:hsla(0, 0%, 100%, 0.4);--background06:hsla(0, 0%, 100%, 0.6);--background08:hsla(0, 0%, 100%, 0.8);--color1:hsla(0, 0%, 100%, 1);--color2:hsla(0, 0%, 65%, 1);--color3:hsla(0, 0%, 38%, 1);--color4:hsla(0, 0%, 33%, 1);--color5:hsla(0, 0%, 29%, 1);--color6:hsla(0, 0%, 26%, 1);--color7:hsla(0, 0%, 20%, 1);--color8:hsla(0, 0%, 16%, 1);--color9:hsla(0, 0%, 14%, 1);--color10:hsla(0, 0%, 10%, 1);--color11:hsla(0, 0%, 8%, 1);--color12:hsla(0, 0%, 2%, 1);--color0:hsla(0, 0%, 2%, 0);--color02:hsla(0, 0%, 2%, 0.2);--color04:hsla(0, 0%, 2%, 0.4);--color06:hsla(0, 0%, 2%, 0.6);--color08:hsla(0, 0%, 2%, 0.8);--background:hsla(0, 0%, 100%, 1);--backgroundHover:hsla(0, 0%, 100%, 0.8);--backgroundPress:hsla(0, 0%, 65%, 1);--backgroundFocus:hsla(0, 0%, 65%, 1);--borderColor:hsla(0, 0%, 33%, 1);--borderColorHover:hsla(0, 0%, 38%, 1);--borderColorPress:hsla(0, 0%, 29%, 1);--borderColorFocus:hsla(0, 0%, 33%, 1);--color:hsla(0, 0%, 2%, 1);--colorHover:hsla(0, 0%, 8%, 1);--colorPress:hsla(0, 0%, 2%, 1);--colorFocus:hsla(0, 0%, 8%, 1);--placeholderColor:hsla(0, 0%, 14%, 1);--outlineColor:hsla(0, 0%, 2%, 0.2);--colorTransparent:hsla(0, 0%, 2%, 0);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_accent_ProgressIndicator, .t_accent_SliderThumb, .t_accent_SwitchThumb, .t_accent_Tooltip {--accentBackground:hsla(0, 0%, 50%, 1);--accentColor:hsla(0, 0%, 93%, 1);--background0:hsla(0, 0%, 100%, 0);--background02:hsla(0, 0%, 100%, 0.2);--background04:hsla(0, 0%, 100%, 0.4);--background06:hsla(0, 0%, 100%, 0.6);--background08:hsla(0, 0%, 100%, 0.8);--color1:hsla(0, 0%, 100%, 1);--color2:hsla(0, 0%, 65%, 1);--color3:hsla(0, 0%, 38%, 1);--color4:hsla(0, 0%, 33%, 1);--color5:hsla(0, 0%, 29%, 1);--color6:hsla(0, 0%, 26%, 1);--color7:hsla(0, 0%, 20%, 1);--color8:hsla(0, 0%, 16%, 1);--color9:hsla(0, 0%, 14%, 1);--color10:hsla(0, 0%, 10%, 1);--color11:hsla(0, 0%, 8%, 1);--color12:hsla(0, 0%, 2%, 1);--color0:hsla(0, 0%, 2%, 0);--color02:hsla(0, 0%, 2%, 0.2);--color04:hsla(0, 0%, 2%, 0.4);--color06:hsla(0, 0%, 2%, 0.6);--color08:hsla(0, 0%, 2%, 0.8);--background:hsla(0, 0%, 100%, 1);--backgroundHover:hsla(0, 0%, 100%, 0.8);--backgroundPress:hsla(0, 0%, 65%, 1);--backgroundFocus:hsla(0, 0%, 65%, 1);--borderColor:hsla(0, 0%, 33%, 1);--borderColorHover:hsla(0, 0%, 38%, 1);--borderColorPress:hsla(0, 0%, 29%, 1);--borderColorFocus:hsla(0, 0%, 33%, 1);--color:hsla(0, 0%, 2%, 1);--colorHover:hsla(0, 0%, 8%, 1);--colorPress:hsla(0, 0%, 2%, 1);--colorFocus:hsla(0, 0%, 8%, 1);--placeholderColor:hsla(0, 0%, 14%, 1);--outlineColor:hsla(0, 0%, 2%, 0.2);--colorTransparent:hsla(0, 0%, 2%, 0);}
}
.t_light_accent_SwitchThumb ::selection, .t_light_accent_SliderThumb ::selection, .t_light_accent_Tooltip ::selection, .t_light_accent_ProgressIndicator ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_accent_Card, :root.t_dark .t_accent_Input, :root.t_dark .t_accent_ListItem, :root.t_dark .t_accent_Progress, :root.t_dark .t_accent_SelectTrigger, :root.t_dark .t_accent_SliderTrack, :root.t_dark .t_accent_TextArea, :root.t_dark .t_accent_TooltipArrow, :root.t_dark .t_white_Card, :root.t_dark .t_white_Input, :root.t_dark .t_white_ListItem, :root.t_dark .t_white_Progress, :root.t_dark .t_white_SelectTrigger, :root.t_dark .t_white_SliderTrack, :root.t_dark .t_white_TextArea, :root.t_dark .t_white_TooltipArrow, :root.t_light .t_dark .t_accent_Card, :root.t_light .t_dark .t_accent_Input, :root.t_light .t_dark .t_accent_ListItem, :root.t_light .t_dark .t_accent_Progress, :root.t_light .t_dark .t_accent_SelectTrigger, :root.t_light .t_dark .t_accent_SliderTrack, :root.t_light .t_dark .t_accent_TextArea, :root.t_light .t_dark .t_accent_TooltipArrow, :root.t_light .t_dark .t_white_Card, :root.t_light .t_dark .t_white_Input, :root.t_light .t_dark .t_white_ListItem, :root.t_light .t_dark .t_white_Progress, :root.t_light .t_dark .t_white_SelectTrigger, :root.t_light .t_dark .t_white_SliderTrack, :root.t_light .t_dark .t_white_TextArea, :root.t_light .t_dark .t_white_TooltipArrow, .tm_xxt {--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--background:hsla(0, 0%, 95%, 1);--backgroundHover:hsla(0, 0%, 93%, 1);--backgroundPress:hsla(0, 0%, 100%, 1);--backgroundFocus:hsla(0, 0%, 100%, 1);--borderColor:hsla(0, 0%, 88%, 1);--borderColorHover:hsla(0, 0%, 85%, 1);--borderColorFocus:hsla(0, 0%, 88%, 1);--borderColorPress:hsla(0, 0%, 91%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_accent_Card, .t_accent_Input, .t_accent_ListItem, .t_accent_Progress, .t_accent_SelectTrigger, .t_accent_SliderTrack, .t_accent_TextArea, .t_accent_TooltipArrow, .t_white_Card, .t_white_Input, .t_white_ListItem, .t_white_Progress, .t_white_SelectTrigger, .t_white_SliderTrack, .t_white_TextArea, .t_white_TooltipArrow {--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--background:hsla(0, 0%, 95%, 1);--backgroundHover:hsla(0, 0%, 93%, 1);--backgroundPress:hsla(0, 0%, 100%, 1);--backgroundFocus:hsla(0, 0%, 100%, 1);--borderColor:hsla(0, 0%, 88%, 1);--borderColorHover:hsla(0, 0%, 85%, 1);--borderColorFocus:hsla(0, 0%, 88%, 1);--borderColorPress:hsla(0, 0%, 91%, 1);}
}
:root.t_dark .t_accent_Button, :root.t_dark .t_accent_SliderTrackActive, :root.t_dark .t_white_Button, :root.t_dark .t_white_SliderTrackActive, :root.t_light .t_dark .t_accent_Button, :root.t_light .t_dark .t_accent_SliderTrackActive, :root.t_light .t_dark .t_white_Button, :root.t_light .t_dark .t_white_SliderTrackActive, .tm_xxt {--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--background:hsla(0, 0%, 91%, 1);--backgroundHover:hsla(0, 0%, 88%, 1);--backgroundPress:hsla(0, 0%, 93%, 1);--backgroundFocus:hsla(0, 0%, 93%, 1);--borderColor:hsla(0, 0%, 82%, 1);--borderColorHover:hsla(0, 0%, 76%, 1);--borderColorFocus:hsla(0, 0%, 82%, 1);--borderColorPress:hsla(0, 0%, 85%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_accent_Button, .t_accent_SliderTrackActive, .t_white_Button, .t_white_SliderTrackActive {--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--background:hsla(0, 0%, 91%, 1);--backgroundHover:hsla(0, 0%, 88%, 1);--backgroundPress:hsla(0, 0%, 93%, 1);--backgroundFocus:hsla(0, 0%, 93%, 1);--borderColor:hsla(0, 0%, 82%, 1);--borderColorHover:hsla(0, 0%, 76%, 1);--borderColorFocus:hsla(0, 0%, 82%, 1);--borderColorPress:hsla(0, 0%, 85%, 1);}
}
:root.t_dark .t_accent_Checkbox, :root.t_dark .t_accent_RadioGroupItem, :root.t_dark .t_accent_Switch, :root.t_dark .t_accent_TooltipContent, :root.t_dark .t_white_Checkbox, :root.t_dark .t_white_RadioGroupItem, :root.t_dark .t_white_Switch, :root.t_dark .t_white_TooltipContent, :root.t_light .t_dark .t_accent_Checkbox, :root.t_light .t_dark .t_accent_RadioGroupItem, :root.t_light .t_dark .t_accent_Switch, :root.t_light .t_dark .t_accent_TooltipContent, :root.t_light .t_dark .t_white_Checkbox, :root.t_light .t_dark .t_white_RadioGroupItem, :root.t_light .t_dark .t_white_Switch, :root.t_light .t_dark .t_white_TooltipContent, .tm_xxt {--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--background:hsla(0, 0%, 93%, 1);--backgroundHover:hsla(0, 0%, 91%, 1);--backgroundPress:hsla(0, 0%, 95%, 1);--backgroundFocus:hsla(0, 0%, 95%, 1);--borderColor:hsla(0, 0%, 85%, 1);--borderColorHover:hsla(0, 0%, 82%, 1);--borderColorFocus:hsla(0, 0%, 85%, 1);--borderColorPress:hsla(0, 0%, 88%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_accent_Checkbox, .t_accent_RadioGroupItem, .t_accent_Switch, .t_accent_TooltipContent, .t_white_Checkbox, .t_white_RadioGroupItem, .t_white_Switch, .t_white_TooltipContent {--color:hsla(0, 0%, 9%, 1);--colorHover:hsla(0, 0%, 42%, 1);--colorPress:hsla(0, 0%, 9%, 1);--colorFocus:hsla(0, 0%, 42%, 1);--placeholderColor:hsla(0, 0%, 56%, 1);--outlineColor:hsla(0, 0%, 9%, 0.2);--background:hsla(0, 0%, 93%, 1);--backgroundHover:hsla(0, 0%, 91%, 1);--backgroundPress:hsla(0, 0%, 95%, 1);--backgroundFocus:hsla(0, 0%, 95%, 1);--borderColor:hsla(0, 0%, 85%, 1);--borderColorHover:hsla(0, 0%, 82%, 1);--borderColorFocus:hsla(0, 0%, 85%, 1);--borderColorPress:hsla(0, 0%, 88%, 1);}
}
:root.t_dark .t_accent_ProgressIndicator, :root.t_dark .t_accent_SliderThumb, :root.t_dark .t_accent_SwitchThumb, :root.t_dark .t_accent_Tooltip, :root.t_light .t_dark .t_accent_ProgressIndicator, :root.t_light .t_dark .t_accent_SliderThumb, :root.t_light .t_dark .t_accent_SwitchThumb, :root.t_light .t_dark .t_accent_Tooltip, .tm_xxt {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(0, 0%, 9%, 0);--background02:hsla(0, 0%, 9%, 0.2);--background04:hsla(0, 0%, 9%, 0.4);--background06:hsla(0, 0%, 9%, 0.6);--background08:hsla(0, 0%, 9%, 0.8);--color1:hsla(0, 0%, 9%, 1);--color2:hsla(0, 0%, 42%, 1);--color3:hsla(0, 0%, 50%, 1);--color4:hsla(0, 0%, 56%, 1);--color5:hsla(0, 0%, 76%, 1);--color6:hsla(0, 0%, 82%, 1);--color7:hsla(0, 0%, 85%, 1);--color8:hsla(0, 0%, 88%, 1);--color9:hsla(0, 0%, 91%, 1);--color10:hsla(0, 0%, 93%, 1);--color11:hsla(0, 0%, 95%, 1);--color12:hsla(0, 0%, 100%, 1);--color0:hsla(0, 0%, 100%, 0);--color02:hsla(0, 0%, 100%, 0.2);--color04:hsla(0, 0%, 100%, 0.4);--color06:hsla(0, 0%, 100%, 0.6);--color08:hsla(0, 0%, 100%, 0.8);--background:hsla(0, 0%, 9%, 1);--backgroundHover:hsla(0, 0%, 42%, 1);--backgroundPress:hsla(0, 0%, 9%, 0.8);--backgroundFocus:hsla(0, 0%, 9%, 0.8);--borderColor:hsla(0, 0%, 56%, 1);--borderColorHover:hsla(0, 0%, 76%, 1);--borderColorPress:hsla(0, 0%, 50%, 1);--borderColorFocus:hsla(0, 0%, 56%, 1);--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 95%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 95%, 1);--placeholderColor:hsla(0, 0%, 91%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--colorTransparent:hsla(0, 0%, 100%, 0);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_accent_ProgressIndicator, .t_accent_SliderThumb, .t_accent_SwitchThumb, .t_accent_Tooltip {--accentBackground:hsla(0, 0%, 10%, 1);--accentColor:hsla(0, 0%, 38%, 1);--background0:hsla(0, 0%, 9%, 0);--background02:hsla(0, 0%, 9%, 0.2);--background04:hsla(0, 0%, 9%, 0.4);--background06:hsla(0, 0%, 9%, 0.6);--background08:hsla(0, 0%, 9%, 0.8);--color1:hsla(0, 0%, 9%, 1);--color2:hsla(0, 0%, 42%, 1);--color3:hsla(0, 0%, 50%, 1);--color4:hsla(0, 0%, 56%, 1);--color5:hsla(0, 0%, 76%, 1);--color6:hsla(0, 0%, 82%, 1);--color7:hsla(0, 0%, 85%, 1);--color8:hsla(0, 0%, 88%, 1);--color9:hsla(0, 0%, 91%, 1);--color10:hsla(0, 0%, 93%, 1);--color11:hsla(0, 0%, 95%, 1);--color12:hsla(0, 0%, 100%, 1);--color0:hsla(0, 0%, 100%, 0);--color02:hsla(0, 0%, 100%, 0.2);--color04:hsla(0, 0%, 100%, 0.4);--color06:hsla(0, 0%, 100%, 0.6);--color08:hsla(0, 0%, 100%, 0.8);--background:hsla(0, 0%, 9%, 1);--backgroundHover:hsla(0, 0%, 42%, 1);--backgroundPress:hsla(0, 0%, 9%, 0.8);--backgroundFocus:hsla(0, 0%, 9%, 0.8);--borderColor:hsla(0, 0%, 56%, 1);--borderColorHover:hsla(0, 0%, 76%, 1);--borderColorPress:hsla(0, 0%, 50%, 1);--borderColorFocus:hsla(0, 0%, 56%, 1);--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 95%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 95%, 1);--placeholderColor:hsla(0, 0%, 91%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--colorTransparent:hsla(0, 0%, 100%, 0);}
}
.t_dark_accent_SwitchThumb ::selection, .t_dark_accent_SliderThumb ::selection, .t_dark_accent_Tooltip ::selection, .t_dark_accent_ProgressIndicator ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_light .t_black_ProgressIndicator, :root.t_dark .t_light .t_black_SliderThumb, :root.t_dark .t_light .t_black_SwitchThumb, :root.t_dark .t_light .t_black_Tooltip, :root.t_light .t_black_ProgressIndicator, :root.t_light .t_black_SliderThumb, :root.t_light .t_black_SwitchThumb, :root.t_light .t_black_Tooltip, .tm_xxt {--accentBackground:hsla(0, 0%, 38%, 1);--accentColor:hsla(0, 0%, 10%, 1);--background0:hsla(0, 0%, 100%, 0);--background02:hsla(0, 0%, 100%, 0.2);--background04:hsla(0, 0%, 100%, 0.4);--background06:hsla(0, 0%, 100%, 0.6);--background08:hsla(0, 0%, 100%, 0.8);--color1:hsla(0, 0%, 100%, 1);--color2:hsla(0, 0%, 65%, 1);--color3:hsla(0, 0%, 38%, 1);--color4:hsla(0, 0%, 33%, 1);--color5:hsla(0, 0%, 29%, 1);--color6:hsla(0, 0%, 26%, 1);--color7:hsla(0, 0%, 20%, 1);--color8:hsla(0, 0%, 16%, 1);--color9:hsla(0, 0%, 14%, 1);--color10:hsla(0, 0%, 10%, 1);--color11:hsla(0, 0%, 8%, 1);--color12:hsla(0, 0%, 2%, 1);--color0:hsla(0, 0%, 2%, 0);--color02:hsla(0, 0%, 2%, 0.2);--color04:hsla(0, 0%, 2%, 0.4);--color06:hsla(0, 0%, 2%, 0.6);--color08:hsla(0, 0%, 2%, 0.8);--background:hsla(0, 0%, 100%, 1);--backgroundHover:hsla(0, 0%, 100%, 0.8);--backgroundPress:hsla(0, 0%, 65%, 1);--backgroundFocus:hsla(0, 0%, 65%, 1);--borderColor:hsla(0, 0%, 33%, 1);--borderColorHover:hsla(0, 0%, 38%, 1);--borderColorPress:hsla(0, 0%, 29%, 1);--borderColorFocus:hsla(0, 0%, 33%, 1);--color:hsla(0, 0%, 2%, 1);--colorHover:hsla(0, 0%, 8%, 1);--colorPress:hsla(0, 0%, 2%, 1);--colorFocus:hsla(0, 0%, 8%, 1);--placeholderColor:hsla(0, 0%, 14%, 1);--outlineColor:hsla(0, 0%, 2%, 0.2);--colorTransparent:hsla(0, 0%, 2%, 0);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_black_ProgressIndicator, .t_black_SliderThumb, .t_black_SwitchThumb, .t_black_Tooltip {--accentBackground:hsla(0, 0%, 38%, 1);--accentColor:hsla(0, 0%, 10%, 1);--background0:hsla(0, 0%, 100%, 0);--background02:hsla(0, 0%, 100%, 0.2);--background04:hsla(0, 0%, 100%, 0.4);--background06:hsla(0, 0%, 100%, 0.6);--background08:hsla(0, 0%, 100%, 0.8);--color1:hsla(0, 0%, 100%, 1);--color2:hsla(0, 0%, 65%, 1);--color3:hsla(0, 0%, 38%, 1);--color4:hsla(0, 0%, 33%, 1);--color5:hsla(0, 0%, 29%, 1);--color6:hsla(0, 0%, 26%, 1);--color7:hsla(0, 0%, 20%, 1);--color8:hsla(0, 0%, 16%, 1);--color9:hsla(0, 0%, 14%, 1);--color10:hsla(0, 0%, 10%, 1);--color11:hsla(0, 0%, 8%, 1);--color12:hsla(0, 0%, 2%, 1);--color0:hsla(0, 0%, 2%, 0);--color02:hsla(0, 0%, 2%, 0.2);--color04:hsla(0, 0%, 2%, 0.4);--color06:hsla(0, 0%, 2%, 0.6);--color08:hsla(0, 0%, 2%, 0.8);--background:hsla(0, 0%, 100%, 1);--backgroundHover:hsla(0, 0%, 100%, 0.8);--backgroundPress:hsla(0, 0%, 65%, 1);--backgroundFocus:hsla(0, 0%, 65%, 1);--borderColor:hsla(0, 0%, 33%, 1);--borderColorHover:hsla(0, 0%, 38%, 1);--borderColorPress:hsla(0, 0%, 29%, 1);--borderColorFocus:hsla(0, 0%, 33%, 1);--color:hsla(0, 0%, 2%, 1);--colorHover:hsla(0, 0%, 8%, 1);--colorPress:hsla(0, 0%, 2%, 1);--colorFocus:hsla(0, 0%, 8%, 1);--placeholderColor:hsla(0, 0%, 14%, 1);--outlineColor:hsla(0, 0%, 2%, 0.2);--colorTransparent:hsla(0, 0%, 2%, 0);}
}
.t_light_black_SwitchThumb ::selection, .t_light_black_SliderThumb ::selection, .t_light_black_Tooltip ::selection, .t_light_black_ProgressIndicator ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_light .t_blue_Card, :root.t_dark .t_light .t_blue_Input, :root.t_dark .t_light .t_blue_ListItem, :root.t_dark .t_light .t_blue_Progress, :root.t_dark .t_light .t_blue_SelectTrigger, :root.t_dark .t_light .t_blue_SliderTrack, :root.t_dark .t_light .t_blue_TextArea, :root.t_dark .t_light .t_blue_TooltipArrow, :root.t_light .t_blue_Card, :root.t_light .t_blue_Input, :root.t_light .t_blue_ListItem, :root.t_light .t_blue_Progress, :root.t_light .t_blue_SelectTrigger, :root.t_light .t_blue_SliderTrack, :root.t_light .t_blue_TextArea, :root.t_light .t_blue_TooltipArrow, .tm_xxt {--color:hsla(211, 100%, 15%, 1);--colorHover:hsla(211, 100%, 43%, 1);--colorPress:hsla(211, 100%, 15%, 1);--colorFocus:hsla(211, 100%, 43%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(211, 100%, 15%, 0.2);--background:hsla(210, 100%, 98%, 1);--backgroundHover:hsla(210, 100%, 99%, 1);--backgroundPress:hsla(210, 100%, 96%, 1);--backgroundFocus:hsla(210, 100%, 96%, 1);--borderColor:hsla(209, 96%, 90%, 1);--borderColorHover:hsla(210, 100%, 94%, 1);--borderColorFocus:hsla(209, 96%, 90%, 1);--borderColorPress:hsla(209, 82%, 85%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_blue_Card, .t_blue_Input, .t_blue_ListItem, .t_blue_Progress, .t_blue_SelectTrigger, .t_blue_SliderTrack, .t_blue_TextArea, .t_blue_TooltipArrow {--color:hsla(211, 100%, 15%, 1);--colorHover:hsla(211, 100%, 43%, 1);--colorPress:hsla(211, 100%, 15%, 1);--colorFocus:hsla(211, 100%, 43%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(211, 100%, 15%, 0.2);--background:hsla(210, 100%, 98%, 1);--backgroundHover:hsla(210, 100%, 99%, 1);--backgroundPress:hsla(210, 100%, 96%, 1);--backgroundFocus:hsla(210, 100%, 96%, 1);--borderColor:hsla(209, 96%, 90%, 1);--borderColorHover:hsla(210, 100%, 94%, 1);--borderColorFocus:hsla(209, 96%, 90%, 1);--borderColorPress:hsla(209, 82%, 85%, 1);}
}
:root.t_dark .t_light .t_blue_Button, :root.t_dark .t_light .t_blue_SliderTrackActive, :root.t_light .t_blue_Button, :root.t_light .t_blue_SliderTrackActive, .tm_xxt {--color:hsla(211, 100%, 15%, 1);--colorHover:hsla(211, 100%, 43%, 1);--colorPress:hsla(211, 100%, 15%, 1);--colorFocus:hsla(211, 100%, 43%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(211, 100%, 15%, 0.2);--background:hsla(210, 100%, 94%, 1);--backgroundHover:hsla(210, 100%, 96%, 1);--backgroundPress:hsla(209, 96%, 90%, 1);--backgroundFocus:hsla(209, 96%, 90%, 1);--borderColor:hsla(208, 78%, 77%, 1);--borderColorHover:hsla(209, 82%, 85%, 1);--borderColorFocus:hsla(208, 78%, 77%, 1);--borderColorPress:hsla(206, 82%, 65%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_blue_Button, .t_blue_SliderTrackActive {--color:hsla(211, 100%, 15%, 1);--colorHover:hsla(211, 100%, 43%, 1);--colorPress:hsla(211, 100%, 15%, 1);--colorFocus:hsla(211, 100%, 43%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(211, 100%, 15%, 0.2);--background:hsla(210, 100%, 94%, 1);--backgroundHover:hsla(210, 100%, 96%, 1);--backgroundPress:hsla(209, 96%, 90%, 1);--backgroundFocus:hsla(209, 96%, 90%, 1);--borderColor:hsla(208, 78%, 77%, 1);--borderColorHover:hsla(209, 82%, 85%, 1);--borderColorFocus:hsla(208, 78%, 77%, 1);--borderColorPress:hsla(206, 82%, 65%, 1);}
}
:root.t_dark .t_light .t_blue_Checkbox, :root.t_dark .t_light .t_blue_RadioGroupItem, :root.t_dark .t_light .t_blue_Switch, :root.t_dark .t_light .t_blue_TooltipContent, :root.t_light .t_blue_Checkbox, :root.t_light .t_blue_RadioGroupItem, :root.t_light .t_blue_Switch, :root.t_light .t_blue_TooltipContent, .tm_xxt {--color:hsla(211, 100%, 15%, 1);--colorHover:hsla(211, 100%, 43%, 1);--colorPress:hsla(211, 100%, 15%, 1);--colorFocus:hsla(211, 100%, 43%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(211, 100%, 15%, 0.2);--background:hsla(210, 100%, 96%, 1);--backgroundHover:hsla(210, 100%, 98%, 1);--backgroundPress:hsla(210, 100%, 94%, 1);--backgroundFocus:hsla(210, 100%, 94%, 1);--borderColor:hsla(209, 82%, 85%, 1);--borderColorHover:hsla(209, 96%, 90%, 1);--borderColorFocus:hsla(209, 82%, 85%, 1);--borderColorPress:hsla(208, 78%, 77%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_blue_Checkbox, .t_blue_RadioGroupItem, .t_blue_Switch, .t_blue_TooltipContent {--color:hsla(211, 100%, 15%, 1);--colorHover:hsla(211, 100%, 43%, 1);--colorPress:hsla(211, 100%, 15%, 1);--colorFocus:hsla(211, 100%, 43%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(211, 100%, 15%, 0.2);--background:hsla(210, 100%, 96%, 1);--backgroundHover:hsla(210, 100%, 98%, 1);--backgroundPress:hsla(210, 100%, 94%, 1);--backgroundFocus:hsla(210, 100%, 94%, 1);--borderColor:hsla(209, 82%, 85%, 1);--borderColorHover:hsla(209, 96%, 90%, 1);--borderColorFocus:hsla(209, 82%, 85%, 1);--borderColorPress:hsla(208, 78%, 77%, 1);}
}
:root.t_dark .t_light .t_blue_ProgressIndicator, :root.t_dark .t_light .t_blue_SliderThumb, :root.t_dark .t_light .t_blue_SwitchThumb, :root.t_dark .t_light .t_blue_Tooltip, :root.t_light .t_blue_ProgressIndicator, :root.t_light .t_blue_SliderThumb, :root.t_light .t_blue_SwitchThumb, :root.t_light .t_blue_Tooltip, .tm_xxt {--accentBackground:hsla(0, 0%, 38%, 1);--accentColor:hsla(0, 0%, 10%, 1);--background0:hsla(211, 100%, 15%, 0);--background02:hsla(211, 100%, 15%, 0.2);--background04:hsla(211, 100%, 15%, 0.4);--background06:hsla(211, 100%, 15%, 0.6);--background08:hsla(211, 100%, 15%, 0.8);--color1:hsla(211, 100%, 15%, 1);--color2:hsla(211, 100%, 43%, 1);--color3:hsla(208, 100%, 47%, 1);--color4:hsla(206, 100%, 50%, 1);--color5:hsla(206, 82%, 65%, 1);--color6:hsla(208, 78%, 77%, 1);--color7:hsla(209, 82%, 85%, 1);--color8:hsla(209, 96%, 90%, 1);--color9:hsla(210, 100%, 94%, 1);--color10:hsla(210, 100%, 96%, 1);--color11:hsla(210, 100%, 98%, 1);--color12:hsla(210, 100%, 99%, 1);--color0:hsla(216, 100%, 99%, 0);--color02:hsla(216, 100%, 99%, 0.2);--color04:hsla(216, 100%, 99%, 0.4);--color06:hsla(216, 100%, 99%, 0.6);--color08:hsla(216, 100%, 99%, 0.8);--background:hsla(211, 100%, 15%, 1);--backgroundHover:hsla(211, 100%, 15%, 0.8);--backgroundPress:hsla(211, 100%, 43%, 1);--backgroundFocus:hsla(211, 100%, 43%, 1);--borderColor:hsla(206, 100%, 50%, 1);--borderColorHover:hsla(208, 100%, 47%, 1);--borderColorPress:hsla(206, 82%, 65%, 1);--borderColorFocus:hsla(206, 100%, 50%, 1);--color:hsla(210, 100%, 99%, 1);--colorHover:hsla(210, 100%, 98%, 1);--colorPress:hsla(210, 100%, 99%, 1);--colorFocus:hsla(210, 100%, 98%, 1);--placeholderColor:hsla(210, 100%, 94%, 1);--outlineColor:hsla(216, 100%, 99%, 0.2);--colorTransparent:hsla(216, 100%, 99%, 0);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_blue_ProgressIndicator, .t_blue_SliderThumb, .t_blue_SwitchThumb, .t_blue_Tooltip {--accentBackground:hsla(0, 0%, 38%, 1);--accentColor:hsla(0, 0%, 10%, 1);--background0:hsla(211, 100%, 15%, 0);--background02:hsla(211, 100%, 15%, 0.2);--background04:hsla(211, 100%, 15%, 0.4);--background06:hsla(211, 100%, 15%, 0.6);--background08:hsla(211, 100%, 15%, 0.8);--color1:hsla(211, 100%, 15%, 1);--color2:hsla(211, 100%, 43%, 1);--color3:hsla(208, 100%, 47%, 1);--color4:hsla(206, 100%, 50%, 1);--color5:hsla(206, 82%, 65%, 1);--color6:hsla(208, 78%, 77%, 1);--color7:hsla(209, 82%, 85%, 1);--color8:hsla(209, 96%, 90%, 1);--color9:hsla(210, 100%, 94%, 1);--color10:hsla(210, 100%, 96%, 1);--color11:hsla(210, 100%, 98%, 1);--color12:hsla(210, 100%, 99%, 1);--color0:hsla(216, 100%, 99%, 0);--color02:hsla(216, 100%, 99%, 0.2);--color04:hsla(216, 100%, 99%, 0.4);--color06:hsla(216, 100%, 99%, 0.6);--color08:hsla(216, 100%, 99%, 0.8);--background:hsla(211, 100%, 15%, 1);--backgroundHover:hsla(211, 100%, 15%, 0.8);--backgroundPress:hsla(211, 100%, 43%, 1);--backgroundFocus:hsla(211, 100%, 43%, 1);--borderColor:hsla(206, 100%, 50%, 1);--borderColorHover:hsla(208, 100%, 47%, 1);--borderColorPress:hsla(206, 82%, 65%, 1);--borderColorFocus:hsla(206, 100%, 50%, 1);--color:hsla(210, 100%, 99%, 1);--colorHover:hsla(210, 100%, 98%, 1);--colorPress:hsla(210, 100%, 99%, 1);--colorFocus:hsla(210, 100%, 98%, 1);--placeholderColor:hsla(210, 100%, 94%, 1);--outlineColor:hsla(216, 100%, 99%, 0.2);--colorTransparent:hsla(216, 100%, 99%, 0);}
}
.t_light_blue_SwitchThumb ::selection, .t_light_blue_SliderThumb ::selection, .t_light_blue_Tooltip ::selection, .t_light_blue_ProgressIndicator ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_light .t_red_Card, :root.t_dark .t_light .t_red_Input, :root.t_dark .t_light .t_red_ListItem, :root.t_dark .t_light .t_red_Progress, :root.t_dark .t_light .t_red_SelectTrigger, :root.t_dark .t_light .t_red_SliderTrack, :root.t_dark .t_light .t_red_TextArea, :root.t_dark .t_light .t_red_TooltipArrow, :root.t_light .t_red_Card, :root.t_light .t_red_Input, :root.t_light .t_red_ListItem, :root.t_light .t_red_Progress, :root.t_light .t_red_SelectTrigger, :root.t_light .t_red_SliderTrack, :root.t_light .t_red_TextArea, :root.t_light .t_red_TooltipArrow, .tm_xxt {--color:hsla(355, 49%, 15%, 1);--colorHover:hsla(358, 65%, 49%, 1);--colorPress:hsla(355, 49%, 15%, 1);--colorFocus:hsla(358, 65%, 49%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(355, 48%, 15%, 0.2);--background:hsla(0, 100%, 99%, 1);--backgroundHover:hsla(0, 100%, 99%, 1);--backgroundPress:hsla(0, 100%, 97%, 1);--backgroundFocus:hsla(0, 100%, 97%, 1);--borderColor:hsla(0, 90%, 92%, 1);--borderColorHover:hsla(0, 100%, 95%, 1);--borderColorFocus:hsla(0, 90%, 92%, 1);--borderColorPress:hsla(0, 81%, 88%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_red_Card, .t_red_Input, .t_red_ListItem, .t_red_Progress, .t_red_SelectTrigger, .t_red_SliderTrack, .t_red_TextArea, .t_red_TooltipArrow {--color:hsla(355, 49%, 15%, 1);--colorHover:hsla(358, 65%, 49%, 1);--colorPress:hsla(355, 49%, 15%, 1);--colorFocus:hsla(358, 65%, 49%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(355, 48%, 15%, 0.2);--background:hsla(0, 100%, 99%, 1);--backgroundHover:hsla(0, 100%, 99%, 1);--backgroundPress:hsla(0, 100%, 97%, 1);--backgroundFocus:hsla(0, 100%, 97%, 1);--borderColor:hsla(0, 90%, 92%, 1);--borderColorHover:hsla(0, 100%, 95%, 1);--borderColorFocus:hsla(0, 90%, 92%, 1);--borderColorPress:hsla(0, 81%, 88%, 1);}
}
:root.t_dark .t_light .t_red_Button, :root.t_dark .t_light .t_red_SliderTrackActive, :root.t_light .t_red_Button, :root.t_light .t_red_SliderTrackActive, .tm_xxt {--color:hsla(355, 49%, 15%, 1);--colorHover:hsla(358, 65%, 49%, 1);--colorPress:hsla(355, 49%, 15%, 1);--colorFocus:hsla(358, 65%, 49%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(355, 48%, 15%, 0.2);--background:hsla(0, 100%, 95%, 1);--backgroundHover:hsla(0, 100%, 97%, 1);--backgroundPress:hsla(0, 90%, 92%, 1);--backgroundFocus:hsla(0, 90%, 92%, 1);--borderColor:hsla(359, 74%, 82%, 1);--borderColorHover:hsla(0, 81%, 88%, 1);--borderColorFocus:hsla(359, 74%, 82%, 1);--borderColorPress:hsla(359, 69%, 74%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_red_Button, .t_red_SliderTrackActive {--color:hsla(355, 49%, 15%, 1);--colorHover:hsla(358, 65%, 49%, 1);--colorPress:hsla(355, 49%, 15%, 1);--colorFocus:hsla(358, 65%, 49%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(355, 48%, 15%, 0.2);--background:hsla(0, 100%, 95%, 1);--backgroundHover:hsla(0, 100%, 97%, 1);--backgroundPress:hsla(0, 90%, 92%, 1);--backgroundFocus:hsla(0, 90%, 92%, 1);--borderColor:hsla(359, 74%, 82%, 1);--borderColorHover:hsla(0, 81%, 88%, 1);--borderColorFocus:hsla(359, 74%, 82%, 1);--borderColorPress:hsla(359, 69%, 74%, 1);}
}
:root.t_dark .t_light .t_red_Checkbox, :root.t_dark .t_light .t_red_RadioGroupItem, :root.t_dark .t_light .t_red_Switch, :root.t_dark .t_light .t_red_TooltipContent, :root.t_light .t_red_Checkbox, :root.t_light .t_red_RadioGroupItem, :root.t_light .t_red_Switch, :root.t_light .t_red_TooltipContent, .tm_xxt {--color:hsla(355, 49%, 15%, 1);--colorHover:hsla(358, 65%, 49%, 1);--colorPress:hsla(355, 49%, 15%, 1);--colorFocus:hsla(358, 65%, 49%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(355, 48%, 15%, 0.2);--background:hsla(0, 100%, 97%, 1);--backgroundHover:hsla(0, 100%, 99%, 1);--backgroundPress:hsla(0, 100%, 95%, 1);--backgroundFocus:hsla(0, 100%, 95%, 1);--borderColor:hsla(0, 81%, 88%, 1);--borderColorHover:hsla(0, 90%, 92%, 1);--borderColorFocus:hsla(0, 81%, 88%, 1);--borderColorPress:hsla(359, 74%, 82%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_red_Checkbox, .t_red_RadioGroupItem, .t_red_Switch, .t_red_TooltipContent {--color:hsla(355, 49%, 15%, 1);--colorHover:hsla(358, 65%, 49%, 1);--colorPress:hsla(355, 49%, 15%, 1);--colorFocus:hsla(358, 65%, 49%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(355, 48%, 15%, 0.2);--background:hsla(0, 100%, 97%, 1);--backgroundHover:hsla(0, 100%, 99%, 1);--backgroundPress:hsla(0, 100%, 95%, 1);--backgroundFocus:hsla(0, 100%, 95%, 1);--borderColor:hsla(0, 81%, 88%, 1);--borderColorHover:hsla(0, 90%, 92%, 1);--borderColorFocus:hsla(0, 81%, 88%, 1);--borderColorPress:hsla(359, 74%, 82%, 1);}
}
:root.t_dark .t_light .t_red_ProgressIndicator, :root.t_dark .t_light .t_red_SliderThumb, :root.t_dark .t_light .t_red_SwitchThumb, :root.t_dark .t_light .t_red_Tooltip, :root.t_light .t_red_ProgressIndicator, :root.t_light .t_red_SliderThumb, :root.t_light .t_red_SwitchThumb, :root.t_light .t_red_Tooltip, .tm_xxt {--accentBackground:hsla(0, 0%, 38%, 1);--accentColor:hsla(0, 0%, 10%, 1);--background0:hsla(355, 48%, 15%, 0);--background02:hsla(355, 48%, 15%, 0.2);--background04:hsla(355, 48%, 15%, 0.4);--background06:hsla(355, 48%, 15%, 0.6);--background08:hsla(355, 48%, 15%, 0.8);--color1:hsla(355, 49%, 15%, 1);--color2:hsla(358, 65%, 49%, 1);--color3:hsla(358, 69%, 55%, 1);--color4:hsla(358, 75%, 59%, 1);--color5:hsla(359, 69%, 74%, 1);--color6:hsla(359, 74%, 82%, 1);--color7:hsla(0, 81%, 88%, 1);--color8:hsla(0, 90%, 92%, 1);--color9:hsla(0, 100%, 95%, 1);--color10:hsla(0, 100%, 97%, 1);--color11:hsla(0, 100%, 99%, 1);--color12:hsla(0, 100%, 99%, 1);--color0:hsla(0, 100%, 99%, 0);--color02:hsla(0, 100%, 99%, 0.2);--color04:hsla(0, 100%, 99%, 0.4);--color06:hsla(0, 100%, 99%, 0.6);--color08:hsla(0, 100%, 99%, 0.8);--background:hsla(355, 49%, 15%, 1);--backgroundHover:hsla(355, 48%, 15%, 0.8);--backgroundPress:hsla(358, 65%, 49%, 1);--backgroundFocus:hsla(358, 65%, 49%, 1);--borderColor:hsla(358, 75%, 59%, 1);--borderColorHover:hsla(358, 69%, 55%, 1);--borderColorPress:hsla(359, 69%, 74%, 1);--borderColorFocus:hsla(358, 75%, 59%, 1);--color:hsla(0, 100%, 99%, 1);--colorHover:hsla(0, 100%, 99%, 1);--colorPress:hsla(0, 100%, 99%, 1);--colorFocus:hsla(0, 100%, 99%, 1);--placeholderColor:hsla(0, 100%, 95%, 1);--outlineColor:hsla(0, 100%, 99%, 0.2);--colorTransparent:hsla(0, 100%, 99%, 0);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_red_ProgressIndicator, .t_red_SliderThumb, .t_red_SwitchThumb, .t_red_Tooltip {--accentBackground:hsla(0, 0%, 38%, 1);--accentColor:hsla(0, 0%, 10%, 1);--background0:hsla(355, 48%, 15%, 0);--background02:hsla(355, 48%, 15%, 0.2);--background04:hsla(355, 48%, 15%, 0.4);--background06:hsla(355, 48%, 15%, 0.6);--background08:hsla(355, 48%, 15%, 0.8);--color1:hsla(355, 49%, 15%, 1);--color2:hsla(358, 65%, 49%, 1);--color3:hsla(358, 69%, 55%, 1);--color4:hsla(358, 75%, 59%, 1);--color5:hsla(359, 69%, 74%, 1);--color6:hsla(359, 74%, 82%, 1);--color7:hsla(0, 81%, 88%, 1);--color8:hsla(0, 90%, 92%, 1);--color9:hsla(0, 100%, 95%, 1);--color10:hsla(0, 100%, 97%, 1);--color11:hsla(0, 100%, 99%, 1);--color12:hsla(0, 100%, 99%, 1);--color0:hsla(0, 100%, 99%, 0);--color02:hsla(0, 100%, 99%, 0.2);--color04:hsla(0, 100%, 99%, 0.4);--color06:hsla(0, 100%, 99%, 0.6);--color08:hsla(0, 100%, 99%, 0.8);--background:hsla(355, 49%, 15%, 1);--backgroundHover:hsla(355, 48%, 15%, 0.8);--backgroundPress:hsla(358, 65%, 49%, 1);--backgroundFocus:hsla(358, 65%, 49%, 1);--borderColor:hsla(358, 75%, 59%, 1);--borderColorHover:hsla(358, 69%, 55%, 1);--borderColorPress:hsla(359, 69%, 74%, 1);--borderColorFocus:hsla(358, 75%, 59%, 1);--color:hsla(0, 100%, 99%, 1);--colorHover:hsla(0, 100%, 99%, 1);--colorPress:hsla(0, 100%, 99%, 1);--colorFocus:hsla(0, 100%, 99%, 1);--placeholderColor:hsla(0, 100%, 95%, 1);--outlineColor:hsla(0, 100%, 99%, 0.2);--colorTransparent:hsla(0, 100%, 99%, 0);}
}
.t_light_red_SwitchThumb ::selection, .t_light_red_SliderThumb ::selection, .t_light_red_Tooltip ::selection, .t_light_red_ProgressIndicator ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_light .t_yellow_Card, :root.t_dark .t_light .t_yellow_Input, :root.t_dark .t_light .t_yellow_ListItem, :root.t_dark .t_light .t_yellow_Progress, :root.t_dark .t_light .t_yellow_SelectTrigger, :root.t_dark .t_light .t_yellow_SliderTrack, :root.t_dark .t_light .t_yellow_TextArea, :root.t_dark .t_light .t_yellow_TooltipArrow, :root.t_light .t_yellow_Card, :root.t_light .t_yellow_Input, :root.t_light .t_yellow_ListItem, :root.t_light .t_yellow_Progress, :root.t_light .t_yellow_SelectTrigger, :root.t_light .t_yellow_SliderTrack, :root.t_light .t_yellow_TextArea, :root.t_light .t_yellow_TooltipArrow, .tm_xxt {--color:hsla(41, 56%, 13%, 1);--colorHover:hsla(42, 100%, 29%, 1);--colorPress:hsla(41, 56%, 13%, 1);--colorFocus:hsla(42, 100%, 29%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(41, 55%, 13%, 0.2);--background:hsla(52, 100%, 95%, 1);--backgroundHover:hsla(60, 50%, 98%, 1);--backgroundPress:hsla(55, 100%, 91%, 1);--backgroundFocus:hsla(55, 100%, 91%, 1);--borderColor:hsla(52, 98%, 82%, 1);--borderColorHover:hsla(54, 100%, 87%, 1);--borderColorFocus:hsla(52, 98%, 82%, 1);--borderColorPress:hsla(50, 90%, 76%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_yellow_Card, .t_yellow_Input, .t_yellow_ListItem, .t_yellow_Progress, .t_yellow_SelectTrigger, .t_yellow_SliderTrack, .t_yellow_TextArea, .t_yellow_TooltipArrow {--color:hsla(41, 56%, 13%, 1);--colorHover:hsla(42, 100%, 29%, 1);--colorPress:hsla(41, 56%, 13%, 1);--colorFocus:hsla(42, 100%, 29%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(41, 55%, 13%, 0.2);--background:hsla(52, 100%, 95%, 1);--backgroundHover:hsla(60, 50%, 98%, 1);--backgroundPress:hsla(55, 100%, 91%, 1);--backgroundFocus:hsla(55, 100%, 91%, 1);--borderColor:hsla(52, 98%, 82%, 1);--borderColorHover:hsla(54, 100%, 87%, 1);--borderColorFocus:hsla(52, 98%, 82%, 1);--borderColorPress:hsla(50, 90%, 76%, 1);}
}
:root.t_dark .t_light .t_yellow_Button, :root.t_dark .t_light .t_yellow_SliderTrackActive, :root.t_light .t_yellow_Button, :root.t_light .t_yellow_SliderTrackActive, .tm_xxt {--color:hsla(41, 56%, 13%, 1);--colorHover:hsla(42, 100%, 29%, 1);--colorPress:hsla(41, 56%, 13%, 1);--colorFocus:hsla(42, 100%, 29%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(41, 55%, 13%, 0.2);--background:hsla(54, 100%, 87%, 1);--backgroundHover:hsla(55, 100%, 91%, 1);--backgroundPress:hsla(52, 98%, 82%, 1);--backgroundFocus:hsla(52, 98%, 82%, 1);--borderColor:hsla(47, 80%, 68%, 1);--borderColorHover:hsla(50, 90%, 76%, 1);--borderColorFocus:hsla(47, 80%, 68%, 1);--borderColorPress:hsla(48, 100%, 46%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_yellow_Button, .t_yellow_SliderTrackActive {--color:hsla(41, 56%, 13%, 1);--colorHover:hsla(42, 100%, 29%, 1);--colorPress:hsla(41, 56%, 13%, 1);--colorFocus:hsla(42, 100%, 29%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(41, 55%, 13%, 0.2);--background:hsla(54, 100%, 87%, 1);--backgroundHover:hsla(55, 100%, 91%, 1);--backgroundPress:hsla(52, 98%, 82%, 1);--backgroundFocus:hsla(52, 98%, 82%, 1);--borderColor:hsla(47, 80%, 68%, 1);--borderColorHover:hsla(50, 90%, 76%, 1);--borderColorFocus:hsla(47, 80%, 68%, 1);--borderColorPress:hsla(48, 100%, 46%, 1);}
}
:root.t_dark .t_light .t_yellow_Checkbox, :root.t_dark .t_light .t_yellow_RadioGroupItem, :root.t_dark .t_light .t_yellow_Switch, :root.t_dark .t_light .t_yellow_TooltipContent, :root.t_light .t_yellow_Checkbox, :root.t_light .t_yellow_RadioGroupItem, :root.t_light .t_yellow_Switch, :root.t_light .t_yellow_TooltipContent, .tm_xxt {--color:hsla(41, 56%, 13%, 1);--colorHover:hsla(42, 100%, 29%, 1);--colorPress:hsla(41, 56%, 13%, 1);--colorFocus:hsla(42, 100%, 29%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(41, 55%, 13%, 0.2);--background:hsla(55, 100%, 91%, 1);--backgroundHover:hsla(52, 100%, 95%, 1);--backgroundPress:hsla(54, 100%, 87%, 1);--backgroundFocus:hsla(54, 100%, 87%, 1);--borderColor:hsla(50, 90%, 76%, 1);--borderColorHover:hsla(52, 98%, 82%, 1);--borderColorFocus:hsla(50, 90%, 76%, 1);--borderColorPress:hsla(47, 80%, 68%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_yellow_Checkbox, .t_yellow_RadioGroupItem, .t_yellow_Switch, .t_yellow_TooltipContent {--color:hsla(41, 56%, 13%, 1);--colorHover:hsla(42, 100%, 29%, 1);--colorPress:hsla(41, 56%, 13%, 1);--colorFocus:hsla(42, 100%, 29%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(41, 55%, 13%, 0.2);--background:hsla(55, 100%, 91%, 1);--backgroundHover:hsla(52, 100%, 95%, 1);--backgroundPress:hsla(54, 100%, 87%, 1);--backgroundFocus:hsla(54, 100%, 87%, 1);--borderColor:hsla(50, 90%, 76%, 1);--borderColorHover:hsla(52, 98%, 82%, 1);--borderColorFocus:hsla(50, 90%, 76%, 1);--borderColorPress:hsla(47, 80%, 68%, 1);}
}
:root.t_dark .t_light .t_yellow_ProgressIndicator, :root.t_dark .t_light .t_yellow_SliderThumb, :root.t_dark .t_light .t_yellow_SwitchThumb, :root.t_dark .t_light .t_yellow_Tooltip, :root.t_light .t_yellow_ProgressIndicator, :root.t_light .t_yellow_SliderThumb, :root.t_light .t_yellow_SwitchThumb, :root.t_light .t_yellow_Tooltip, .tm_xxt {--accentBackground:hsla(0, 0%, 38%, 1);--accentColor:hsla(0, 0%, 10%, 1);--background0:hsla(41, 55%, 13%, 0);--background02:hsla(41, 55%, 13%, 0.2);--background04:hsla(41, 55%, 13%, 0.4);--background06:hsla(41, 55%, 13%, 0.6);--background08:hsla(41, 55%, 13%, 0.8);--color1:hsla(41, 56%, 13%, 1);--color2:hsla(42, 100%, 29%, 1);--color3:hsla(50, 100%, 48%, 1);--color4:hsla(53, 92%, 50%, 1);--color5:hsla(48, 100%, 46%, 1);--color6:hsla(47, 80%, 68%, 1);--color7:hsla(50, 90%, 76%, 1);--color8:hsla(52, 98%, 82%, 1);--color9:hsla(54, 100%, 87%, 1);--color10:hsla(55, 100%, 91%, 1);--color11:hsla(52, 100%, 95%, 1);--color12:hsla(60, 50%, 98%, 1);--color0:hsla(60, 45%, 98%, 0);--color02:hsla(60, 45%, 98%, 0.2);--color04:hsla(60, 45%, 98%, 0.4);--color06:hsla(60, 45%, 98%, 0.6);--color08:hsla(60, 45%, 98%, 0.8);--background:hsla(41, 56%, 13%, 1);--backgroundHover:hsla(41, 55%, 13%, 0.8);--backgroundPress:hsla(42, 100%, 29%, 1);--backgroundFocus:hsla(42, 100%, 29%, 1);--borderColor:hsla(53, 92%, 50%, 1);--borderColorHover:hsla(50, 100%, 48%, 1);--borderColorPress:hsla(48, 100%, 46%, 1);--borderColorFocus:hsla(53, 92%, 50%, 1);--color:hsla(60, 50%, 98%, 1);--colorHover:hsla(52, 100%, 95%, 1);--colorPress:hsla(60, 50%, 98%, 1);--colorFocus:hsla(52, 100%, 95%, 1);--placeholderColor:hsla(54, 100%, 87%, 1);--outlineColor:hsla(60, 45%, 98%, 0.2);--colorTransparent:hsla(60, 45%, 98%, 0);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_yellow_ProgressIndicator, .t_yellow_SliderThumb, .t_yellow_SwitchThumb, .t_yellow_Tooltip {--accentBackground:hsla(0, 0%, 38%, 1);--accentColor:hsla(0, 0%, 10%, 1);--background0:hsla(41, 55%, 13%, 0);--background02:hsla(41, 55%, 13%, 0.2);--background04:hsla(41, 55%, 13%, 0.4);--background06:hsla(41, 55%, 13%, 0.6);--background08:hsla(41, 55%, 13%, 0.8);--color1:hsla(41, 56%, 13%, 1);--color2:hsla(42, 100%, 29%, 1);--color3:hsla(50, 100%, 48%, 1);--color4:hsla(53, 92%, 50%, 1);--color5:hsla(48, 100%, 46%, 1);--color6:hsla(47, 80%, 68%, 1);--color7:hsla(50, 90%, 76%, 1);--color8:hsla(52, 98%, 82%, 1);--color9:hsla(54, 100%, 87%, 1);--color10:hsla(55, 100%, 91%, 1);--color11:hsla(52, 100%, 95%, 1);--color12:hsla(60, 50%, 98%, 1);--color0:hsla(60, 45%, 98%, 0);--color02:hsla(60, 45%, 98%, 0.2);--color04:hsla(60, 45%, 98%, 0.4);--color06:hsla(60, 45%, 98%, 0.6);--color08:hsla(60, 45%, 98%, 0.8);--background:hsla(41, 56%, 13%, 1);--backgroundHover:hsla(41, 55%, 13%, 0.8);--backgroundPress:hsla(42, 100%, 29%, 1);--backgroundFocus:hsla(42, 100%, 29%, 1);--borderColor:hsla(53, 92%, 50%, 1);--borderColorHover:hsla(50, 100%, 48%, 1);--borderColorPress:hsla(48, 100%, 46%, 1);--borderColorFocus:hsla(53, 92%, 50%, 1);--color:hsla(60, 50%, 98%, 1);--colorHover:hsla(52, 100%, 95%, 1);--colorPress:hsla(60, 50%, 98%, 1);--colorFocus:hsla(52, 100%, 95%, 1);--placeholderColor:hsla(54, 100%, 87%, 1);--outlineColor:hsla(60, 45%, 98%, 0.2);--colorTransparent:hsla(60, 45%, 98%, 0);}
}
.t_light_yellow_SwitchThumb ::selection, .t_light_yellow_SliderThumb ::selection, .t_light_yellow_Tooltip ::selection, .t_light_yellow_ProgressIndicator ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_light .t_green_Card, :root.t_dark .t_light .t_green_Input, :root.t_dark .t_light .t_green_ListItem, :root.t_dark .t_light .t_green_Progress, :root.t_dark .t_light .t_green_SelectTrigger, :root.t_dark .t_light .t_green_SliderTrack, :root.t_dark .t_light .t_green_TextArea, :root.t_dark .t_light .t_green_TooltipArrow, :root.t_light .t_green_Card, :root.t_light .t_green_Input, :root.t_light .t_green_ListItem, :root.t_light .t_green_Progress, :root.t_light .t_green_SelectTrigger, :root.t_light .t_green_SliderTrack, :root.t_light .t_green_TextArea, :root.t_light .t_green_TooltipArrow, .tm_xxt {--color:hsla(155, 41%, 14%, 1);--colorHover:hsla(153, 67%, 28%, 1);--colorPress:hsla(155, 41%, 14%, 1);--colorFocus:hsla(153, 67%, 28%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(155, 41%, 14%, 0.2);--background:hsla(138, 63%, 97%, 1);--backgroundHover:hsla(140, 60%, 99%, 1);--backgroundPress:hsla(139, 57%, 95%, 1);--backgroundFocus:hsla(139, 57%, 95%, 1);--borderColor:hsla(141, 44%, 86%, 1);--borderColorHover:hsla(139, 48%, 91%, 1);--borderColorFocus:hsla(141, 44%, 86%, 1);--borderColorPress:hsla(142, 40%, 79%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_green_Card, .t_green_Input, .t_green_ListItem, .t_green_Progress, .t_green_SelectTrigger, .t_green_SliderTrack, .t_green_TextArea, .t_green_TooltipArrow {--color:hsla(155, 41%, 14%, 1);--colorHover:hsla(153, 67%, 28%, 1);--colorPress:hsla(155, 41%, 14%, 1);--colorFocus:hsla(153, 67%, 28%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(155, 41%, 14%, 0.2);--background:hsla(138, 63%, 97%, 1);--backgroundHover:hsla(140, 60%, 99%, 1);--backgroundPress:hsla(139, 57%, 95%, 1);--backgroundFocus:hsla(139, 57%, 95%, 1);--borderColor:hsla(141, 44%, 86%, 1);--borderColorHover:hsla(139, 48%, 91%, 1);--borderColorFocus:hsla(141, 44%, 86%, 1);--borderColorPress:hsla(142, 40%, 79%, 1);}
}
:root.t_dark .t_light .t_green_Button, :root.t_dark .t_light .t_green_SliderTrackActive, :root.t_light .t_green_Button, :root.t_light .t_green_SliderTrackActive, .tm_xxt {--color:hsla(155, 41%, 14%, 1);--colorHover:hsla(153, 67%, 28%, 1);--colorPress:hsla(155, 41%, 14%, 1);--colorFocus:hsla(153, 67%, 28%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(155, 41%, 14%, 0.2);--background:hsla(139, 48%, 91%, 1);--backgroundHover:hsla(139, 57%, 95%, 1);--backgroundPress:hsla(141, 44%, 86%, 1);--backgroundFocus:hsla(141, 44%, 86%, 1);--borderColor:hsla(146, 38%, 69%, 1);--borderColorHover:hsla(142, 40%, 79%, 1);--borderColorFocus:hsla(146, 38%, 69%, 1);--borderColorPress:hsla(151, 40%, 54%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_green_Button, .t_green_SliderTrackActive {--color:hsla(155, 41%, 14%, 1);--colorHover:hsla(153, 67%, 28%, 1);--colorPress:hsla(155, 41%, 14%, 1);--colorFocus:hsla(153, 67%, 28%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(155, 41%, 14%, 0.2);--background:hsla(139, 48%, 91%, 1);--backgroundHover:hsla(139, 57%, 95%, 1);--backgroundPress:hsla(141, 44%, 86%, 1);--backgroundFocus:hsla(141, 44%, 86%, 1);--borderColor:hsla(146, 38%, 69%, 1);--borderColorHover:hsla(142, 40%, 79%, 1);--borderColorFocus:hsla(146, 38%, 69%, 1);--borderColorPress:hsla(151, 40%, 54%, 1);}
}
:root.t_dark .t_light .t_green_Checkbox, :root.t_dark .t_light .t_green_RadioGroupItem, :root.t_dark .t_light .t_green_Switch, :root.t_dark .t_light .t_green_TooltipContent, :root.t_light .t_green_Checkbox, :root.t_light .t_green_RadioGroupItem, :root.t_light .t_green_Switch, :root.t_light .t_green_TooltipContent, .tm_xxt {--color:hsla(155, 41%, 14%, 1);--colorHover:hsla(153, 67%, 28%, 1);--colorPress:hsla(155, 41%, 14%, 1);--colorFocus:hsla(153, 67%, 28%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(155, 41%, 14%, 0.2);--background:hsla(139, 57%, 95%, 1);--backgroundHover:hsla(138, 63%, 97%, 1);--backgroundPress:hsla(139, 48%, 91%, 1);--backgroundFocus:hsla(139, 48%, 91%, 1);--borderColor:hsla(142, 40%, 79%, 1);--borderColorHover:hsla(141, 44%, 86%, 1);--borderColorFocus:hsla(142, 40%, 79%, 1);--borderColorPress:hsla(146, 38%, 69%, 1);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_green_Checkbox, .t_green_RadioGroupItem, .t_green_Switch, .t_green_TooltipContent {--color:hsla(155, 41%, 14%, 1);--colorHover:hsla(153, 67%, 28%, 1);--colorPress:hsla(155, 41%, 14%, 1);--colorFocus:hsla(153, 67%, 28%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(155, 41%, 14%, 0.2);--background:hsla(139, 57%, 95%, 1);--backgroundHover:hsla(138, 63%, 97%, 1);--backgroundPress:hsla(139, 48%, 91%, 1);--backgroundFocus:hsla(139, 48%, 91%, 1);--borderColor:hsla(142, 40%, 79%, 1);--borderColorHover:hsla(141, 44%, 86%, 1);--borderColorFocus:hsla(142, 40%, 79%, 1);--borderColorPress:hsla(146, 38%, 69%, 1);}
}
:root.t_dark .t_light .t_green_ProgressIndicator, :root.t_dark .t_light .t_green_SliderThumb, :root.t_dark .t_light .t_green_SwitchThumb, :root.t_dark .t_light .t_green_Tooltip, :root.t_light .t_green_ProgressIndicator, :root.t_light .t_green_SliderThumb, :root.t_light .t_green_SwitchThumb, :root.t_light .t_green_Tooltip, .tm_xxt {--accentBackground:hsla(0, 0%, 38%, 1);--accentColor:hsla(0, 0%, 10%, 1);--background0:hsla(155, 41%, 14%, 0);--background02:hsla(155, 41%, 14%, 0.2);--background04:hsla(155, 41%, 14%, 0.4);--background06:hsla(155, 41%, 14%, 0.6);--background08:hsla(155, 41%, 14%, 0.8);--color1:hsla(155, 41%, 14%, 1);--color2:hsla(153, 67%, 28%, 1);--color3:hsla(152, 57%, 38%, 1);--color4:hsla(151, 55%, 42%, 1);--color5:hsla(151, 40%, 54%, 1);--color6:hsla(146, 38%, 69%, 1);--color7:hsla(142, 40%, 79%, 1);--color8:hsla(141, 44%, 86%, 1);--color9:hsla(139, 48%, 91%, 1);--color10:hsla(139, 57%, 95%, 1);--color11:hsla(138, 63%, 97%, 1);--color12:hsla(140, 60%, 99%, 1);--color0:hsla(140, 60%, 99%, 0);--color02:hsla(140, 60%, 99%, 0.2);--color04:hsla(140, 60%, 99%, 0.4);--color06:hsla(140, 60%, 99%, 0.6);--color08:hsla(140, 60%, 99%, 0.8);--background:hsla(155, 41%, 14%, 1);--backgroundHover:hsla(155, 41%, 14%, 0.8);--backgroundPress:hsla(153, 67%, 28%, 1);--backgroundFocus:hsla(153, 67%, 28%, 1);--borderColor:hsla(151, 55%, 42%, 1);--borderColorHover:hsla(152, 57%, 38%, 1);--borderColorPress:hsla(151, 40%, 54%, 1);--borderColorFocus:hsla(151, 55%, 42%, 1);--color:hsla(140, 60%, 99%, 1);--colorHover:hsla(138, 63%, 97%, 1);--colorPress:hsla(140, 60%, 99%, 1);--colorFocus:hsla(138, 63%, 97%, 1);--placeholderColor:hsla(139, 48%, 91%, 1);--outlineColor:hsla(140, 60%, 99%, 0.2);--colorTransparent:hsla(140, 60%, 99%, 0);}
@media(prefers-color-scheme:light){
body{background:var(--background);color:var(--color)}
.t_green_ProgressIndicator, .t_green_SliderThumb, .t_green_SwitchThumb, .t_green_Tooltip {--accentBackground:hsla(0, 0%, 38%, 1);--accentColor:hsla(0, 0%, 10%, 1);--background0:hsla(155, 41%, 14%, 0);--background02:hsla(155, 41%, 14%, 0.2);--background04:hsla(155, 41%, 14%, 0.4);--background06:hsla(155, 41%, 14%, 0.6);--background08:hsla(155, 41%, 14%, 0.8);--color1:hsla(155, 41%, 14%, 1);--color2:hsla(153, 67%, 28%, 1);--color3:hsla(152, 57%, 38%, 1);--color4:hsla(151, 55%, 42%, 1);--color5:hsla(151, 40%, 54%, 1);--color6:hsla(146, 38%, 69%, 1);--color7:hsla(142, 40%, 79%, 1);--color8:hsla(141, 44%, 86%, 1);--color9:hsla(139, 48%, 91%, 1);--color10:hsla(139, 57%, 95%, 1);--color11:hsla(138, 63%, 97%, 1);--color12:hsla(140, 60%, 99%, 1);--color0:hsla(140, 60%, 99%, 0);--color02:hsla(140, 60%, 99%, 0.2);--color04:hsla(140, 60%, 99%, 0.4);--color06:hsla(140, 60%, 99%, 0.6);--color08:hsla(140, 60%, 99%, 0.8);--background:hsla(155, 41%, 14%, 1);--backgroundHover:hsla(155, 41%, 14%, 0.8);--backgroundPress:hsla(153, 67%, 28%, 1);--backgroundFocus:hsla(153, 67%, 28%, 1);--borderColor:hsla(151, 55%, 42%, 1);--borderColorHover:hsla(152, 57%, 38%, 1);--borderColorPress:hsla(151, 40%, 54%, 1);--borderColorFocus:hsla(151, 55%, 42%, 1);--color:hsla(140, 60%, 99%, 1);--colorHover:hsla(138, 63%, 97%, 1);--colorPress:hsla(140, 60%, 99%, 1);--colorFocus:hsla(138, 63%, 97%, 1);--placeholderColor:hsla(139, 48%, 91%, 1);--outlineColor:hsla(140, 60%, 99%, 0.2);--colorTransparent:hsla(140, 60%, 99%, 0);}
}
.t_light_green_SwitchThumb ::selection, .t_light_green_SliderThumb ::selection, .t_light_green_Tooltip ::selection, .t_light_green_ProgressIndicator ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_white_ProgressIndicator, :root.t_dark .t_white_SliderThumb, :root.t_dark .t_white_SwitchThumb, :root.t_dark .t_white_Tooltip, :root.t_light .t_dark .t_white_ProgressIndicator, :root.t_light .t_dark .t_white_SliderThumb, :root.t_light .t_dark .t_white_SwitchThumb, :root.t_light .t_dark .t_white_Tooltip, .tm_xxt {--accentBackground:hsla(0, 0%, 93%, 1);--accentColor:hsla(0, 0%, 50%, 1);--background0:hsla(0, 0%, 9%, 0);--background02:hsla(0, 0%, 9%, 0.2);--background04:hsla(0, 0%, 9%, 0.4);--background06:hsla(0, 0%, 9%, 0.6);--background08:hsla(0, 0%, 9%, 0.8);--color1:hsla(0, 0%, 9%, 1);--color2:hsla(0, 0%, 42%, 1);--color3:hsla(0, 0%, 50%, 1);--color4:hsla(0, 0%, 56%, 1);--color5:hsla(0, 0%, 76%, 1);--color6:hsla(0, 0%, 82%, 1);--color7:hsla(0, 0%, 85%, 1);--color8:hsla(0, 0%, 88%, 1);--color9:hsla(0, 0%, 91%, 1);--color10:hsla(0, 0%, 93%, 1);--color11:hsla(0, 0%, 95%, 1);--color12:hsla(0, 0%, 100%, 1);--color0:hsla(0, 0%, 100%, 0);--color02:hsla(0, 0%, 100%, 0.2);--color04:hsla(0, 0%, 100%, 0.4);--color06:hsla(0, 0%, 100%, 0.6);--color08:hsla(0, 0%, 100%, 0.8);--background:hsla(0, 0%, 9%, 1);--backgroundHover:hsla(0, 0%, 42%, 1);--backgroundPress:hsla(0, 0%, 9%, 0.8);--backgroundFocus:hsla(0, 0%, 9%, 0.8);--borderColor:hsla(0, 0%, 56%, 1);--borderColorHover:hsla(0, 0%, 76%, 1);--borderColorPress:hsla(0, 0%, 50%, 1);--borderColorFocus:hsla(0, 0%, 56%, 1);--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 95%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 95%, 1);--placeholderColor:hsla(0, 0%, 91%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--colorTransparent:hsla(0, 0%, 100%, 0);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_white_ProgressIndicator, .t_white_SliderThumb, .t_white_SwitchThumb, .t_white_Tooltip {--accentBackground:hsla(0, 0%, 93%, 1);--accentColor:hsla(0, 0%, 50%, 1);--background0:hsla(0, 0%, 9%, 0);--background02:hsla(0, 0%, 9%, 0.2);--background04:hsla(0, 0%, 9%, 0.4);--background06:hsla(0, 0%, 9%, 0.6);--background08:hsla(0, 0%, 9%, 0.8);--color1:hsla(0, 0%, 9%, 1);--color2:hsla(0, 0%, 42%, 1);--color3:hsla(0, 0%, 50%, 1);--color4:hsla(0, 0%, 56%, 1);--color5:hsla(0, 0%, 76%, 1);--color6:hsla(0, 0%, 82%, 1);--color7:hsla(0, 0%, 85%, 1);--color8:hsla(0, 0%, 88%, 1);--color9:hsla(0, 0%, 91%, 1);--color10:hsla(0, 0%, 93%, 1);--color11:hsla(0, 0%, 95%, 1);--color12:hsla(0, 0%, 100%, 1);--color0:hsla(0, 0%, 100%, 0);--color02:hsla(0, 0%, 100%, 0.2);--color04:hsla(0, 0%, 100%, 0.4);--color06:hsla(0, 0%, 100%, 0.6);--color08:hsla(0, 0%, 100%, 0.8);--background:hsla(0, 0%, 9%, 1);--backgroundHover:hsla(0, 0%, 42%, 1);--backgroundPress:hsla(0, 0%, 9%, 0.8);--backgroundFocus:hsla(0, 0%, 9%, 0.8);--borderColor:hsla(0, 0%, 56%, 1);--borderColorHover:hsla(0, 0%, 76%, 1);--borderColorPress:hsla(0, 0%, 50%, 1);--borderColorFocus:hsla(0, 0%, 56%, 1);--color:hsla(0, 0%, 100%, 1);--colorHover:hsla(0, 0%, 95%, 1);--colorPress:hsla(0, 0%, 100%, 1);--colorFocus:hsla(0, 0%, 95%, 1);--placeholderColor:hsla(0, 0%, 91%, 1);--outlineColor:hsla(0, 0%, 100%, 0.2);--colorTransparent:hsla(0, 0%, 100%, 0);}
}
.t_dark_white_SwitchThumb ::selection, .t_dark_white_SliderThumb ::selection, .t_dark_white_Tooltip ::selection, .t_dark_white_ProgressIndicator ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_blue_Card, :root.t_dark .t_blue_Input, :root.t_dark .t_blue_ListItem, :root.t_dark .t_blue_Progress, :root.t_dark .t_blue_SelectTrigger, :root.t_dark .t_blue_SliderTrack, :root.t_dark .t_blue_TextArea, :root.t_dark .t_blue_TooltipArrow, :root.t_light .t_dark .t_blue_Card, :root.t_light .t_dark .t_blue_Input, :root.t_light .t_dark .t_blue_ListItem, :root.t_light .t_dark .t_blue_Progress, :root.t_light .t_dark .t_blue_SelectTrigger, :root.t_light .t_dark .t_blue_SliderTrack, :root.t_light .t_dark .t_blue_TextArea, :root.t_light .t_dark .t_blue_TooltipArrow, .tm_xxt {--color:hsla(206, 100%, 96%, 1);--colorHover:hsla(210, 100%, 66%, 1);--colorPress:hsla(206, 100%, 96%, 1);--colorFocus:hsla(210, 100%, 66%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(207, 100%, 96%, 0.2);--background:hsla(216, 50%, 12%, 1);--backgroundHover:hsla(214, 59%, 15%, 1);--backgroundPress:hsla(212, 36%, 9%, 1);--backgroundFocus:hsla(212, 36%, 9%, 1);--borderColor:hsla(213, 71%, 20%, 1);--borderColorHover:hsla(212, 78%, 23%, 1);--borderColorFocus:hsla(213, 71%, 20%, 1);--borderColorPress:hsla(214, 65%, 18%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_blue_Card, .t_blue_Input, .t_blue_ListItem, .t_blue_Progress, .t_blue_SelectTrigger, .t_blue_SliderTrack, .t_blue_TextArea, .t_blue_TooltipArrow {--color:hsla(206, 100%, 96%, 1);--colorHover:hsla(210, 100%, 66%, 1);--colorPress:hsla(206, 100%, 96%, 1);--colorFocus:hsla(210, 100%, 66%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(207, 100%, 96%, 0.2);--background:hsla(216, 50%, 12%, 1);--backgroundHover:hsla(214, 59%, 15%, 1);--backgroundPress:hsla(212, 36%, 9%, 1);--backgroundFocus:hsla(212, 36%, 9%, 1);--borderColor:hsla(213, 71%, 20%, 1);--borderColorHover:hsla(212, 78%, 23%, 1);--borderColorFocus:hsla(213, 71%, 20%, 1);--borderColorPress:hsla(214, 65%, 18%, 1);}
}
:root.t_dark .t_blue_Button, :root.t_dark .t_blue_SliderTrackActive, :root.t_light .t_dark .t_blue_Button, :root.t_light .t_dark .t_blue_SliderTrackActive, .tm_xxt {--color:hsla(206, 100%, 96%, 1);--colorHover:hsla(210, 100%, 66%, 1);--colorPress:hsla(206, 100%, 96%, 1);--colorFocus:hsla(210, 100%, 66%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(207, 100%, 96%, 0.2);--background:hsla(214, 65%, 18%, 1);--backgroundHover:hsla(213, 71%, 20%, 1);--backgroundPress:hsla(214, 59%, 15%, 1);--backgroundFocus:hsla(214, 59%, 15%, 1);--borderColor:hsla(211, 86%, 27%, 1);--borderColorHover:hsla(211, 90%, 34%, 1);--borderColorFocus:hsla(211, 86%, 27%, 1);--borderColorPress:hsla(212, 78%, 23%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_blue_Button, .t_blue_SliderTrackActive {--color:hsla(206, 100%, 96%, 1);--colorHover:hsla(210, 100%, 66%, 1);--colorPress:hsla(206, 100%, 96%, 1);--colorFocus:hsla(210, 100%, 66%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(207, 100%, 96%, 0.2);--background:hsla(214, 65%, 18%, 1);--backgroundHover:hsla(213, 71%, 20%, 1);--backgroundPress:hsla(214, 59%, 15%, 1);--backgroundFocus:hsla(214, 59%, 15%, 1);--borderColor:hsla(211, 86%, 27%, 1);--borderColorHover:hsla(211, 90%, 34%, 1);--borderColorFocus:hsla(211, 86%, 27%, 1);--borderColorPress:hsla(212, 78%, 23%, 1);}
}
:root.t_dark .t_blue_Checkbox, :root.t_dark .t_blue_RadioGroupItem, :root.t_dark .t_blue_Switch, :root.t_dark .t_blue_TooltipContent, :root.t_light .t_dark .t_blue_Checkbox, :root.t_light .t_dark .t_blue_RadioGroupItem, :root.t_light .t_dark .t_blue_Switch, :root.t_light .t_dark .t_blue_TooltipContent, .tm_xxt {--color:hsla(206, 100%, 96%, 1);--colorHover:hsla(210, 100%, 66%, 1);--colorPress:hsla(206, 100%, 96%, 1);--colorFocus:hsla(210, 100%, 66%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(207, 100%, 96%, 0.2);--background:hsla(214, 59%, 15%, 1);--backgroundHover:hsla(214, 65%, 18%, 1);--backgroundPress:hsla(216, 50%, 12%, 1);--backgroundFocus:hsla(216, 50%, 12%, 1);--borderColor:hsla(212, 78%, 23%, 1);--borderColorHover:hsla(211, 86%, 27%, 1);--borderColorFocus:hsla(212, 78%, 23%, 1);--borderColorPress:hsla(213, 71%, 20%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_blue_Checkbox, .t_blue_RadioGroupItem, .t_blue_Switch, .t_blue_TooltipContent {--color:hsla(206, 100%, 96%, 1);--colorHover:hsla(210, 100%, 66%, 1);--colorPress:hsla(206, 100%, 96%, 1);--colorFocus:hsla(210, 100%, 66%, 1);--placeholderColor:hsla(206, 100%, 50%, 1);--outlineColor:hsla(207, 100%, 96%, 0.2);--background:hsla(214, 59%, 15%, 1);--backgroundHover:hsla(214, 65%, 18%, 1);--backgroundPress:hsla(216, 50%, 12%, 1);--backgroundFocus:hsla(216, 50%, 12%, 1);--borderColor:hsla(212, 78%, 23%, 1);--borderColorHover:hsla(211, 86%, 27%, 1);--borderColorFocus:hsla(212, 78%, 23%, 1);--borderColorPress:hsla(213, 71%, 20%, 1);}
}
:root.t_dark .t_blue_ProgressIndicator, :root.t_dark .t_blue_SliderThumb, :root.t_dark .t_blue_SwitchThumb, :root.t_dark .t_blue_Tooltip, :root.t_light .t_dark .t_blue_ProgressIndicator, :root.t_light .t_dark .t_blue_SliderThumb, :root.t_light .t_dark .t_blue_SwitchThumb, :root.t_light .t_dark .t_blue_Tooltip, .tm_xxt {--accentBackground:hsla(0, 0%, 93%, 1);--accentColor:hsla(0, 0%, 50%, 1);--background0:hsla(207, 100%, 96%, 0);--background02:hsla(207, 100%, 96%, 0.2);--background04:hsla(207, 100%, 96%, 0.4);--background06:hsla(207, 100%, 96%, 0.6);--background08:hsla(207, 100%, 96%, 0.8);--color1:hsla(206, 100%, 96%, 1);--color2:hsla(210, 100%, 66%, 1);--color3:hsla(209, 100%, 61%, 1);--color4:hsla(206, 100%, 50%, 1);--color5:hsla(211, 90%, 34%, 1);--color6:hsla(211, 86%, 27%, 1);--color7:hsla(212, 78%, 23%, 1);--color8:hsla(213, 71%, 20%, 1);--color9:hsla(214, 65%, 18%, 1);--color10:hsla(214, 59%, 15%, 1);--color11:hsla(216, 50%, 12%, 1);--color12:hsla(212, 36%, 9%, 1);--color0:hsla(214, 35%, 9%, 0);--color02:hsla(214, 35%, 9%, 0.2);--color04:hsla(214, 35%, 9%, 0.4);--color06:hsla(214, 35%, 9%, 0.6);--color08:hsla(214, 35%, 9%, 0.8);--background:hsla(206, 100%, 96%, 1);--backgroundHover:hsla(210, 100%, 66%, 1);--backgroundPress:hsla(207, 100%, 96%, 0.8);--backgroundFocus:hsla(207, 100%, 96%, 0.8);--borderColor:hsla(206, 100%, 50%, 1);--borderColorHover:hsla(211, 90%, 34%, 1);--borderColorPress:hsla(209, 100%, 61%, 1);--borderColorFocus:hsla(206, 100%, 50%, 1);--color:hsla(212, 36%, 9%, 1);--colorHover:hsla(216, 50%, 12%, 1);--colorPress:hsla(212, 36%, 9%, 1);--colorFocus:hsla(216, 50%, 12%, 1);--placeholderColor:hsla(214, 65%, 18%, 1);--outlineColor:hsla(214, 35%, 9%, 0.2);--colorTransparent:hsla(214, 35%, 9%, 0);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_blue_ProgressIndicator, .t_blue_SliderThumb, .t_blue_SwitchThumb, .t_blue_Tooltip {--accentBackground:hsla(0, 0%, 93%, 1);--accentColor:hsla(0, 0%, 50%, 1);--background0:hsla(207, 100%, 96%, 0);--background02:hsla(207, 100%, 96%, 0.2);--background04:hsla(207, 100%, 96%, 0.4);--background06:hsla(207, 100%, 96%, 0.6);--background08:hsla(207, 100%, 96%, 0.8);--color1:hsla(206, 100%, 96%, 1);--color2:hsla(210, 100%, 66%, 1);--color3:hsla(209, 100%, 61%, 1);--color4:hsla(206, 100%, 50%, 1);--color5:hsla(211, 90%, 34%, 1);--color6:hsla(211, 86%, 27%, 1);--color7:hsla(212, 78%, 23%, 1);--color8:hsla(213, 71%, 20%, 1);--color9:hsla(214, 65%, 18%, 1);--color10:hsla(214, 59%, 15%, 1);--color11:hsla(216, 50%, 12%, 1);--color12:hsla(212, 36%, 9%, 1);--color0:hsla(214, 35%, 9%, 0);--color02:hsla(214, 35%, 9%, 0.2);--color04:hsla(214, 35%, 9%, 0.4);--color06:hsla(214, 35%, 9%, 0.6);--color08:hsla(214, 35%, 9%, 0.8);--background:hsla(206, 100%, 96%, 1);--backgroundHover:hsla(210, 100%, 66%, 1);--backgroundPress:hsla(207, 100%, 96%, 0.8);--backgroundFocus:hsla(207, 100%, 96%, 0.8);--borderColor:hsla(206, 100%, 50%, 1);--borderColorHover:hsla(211, 90%, 34%, 1);--borderColorPress:hsla(209, 100%, 61%, 1);--borderColorFocus:hsla(206, 100%, 50%, 1);--color:hsla(212, 36%, 9%, 1);--colorHover:hsla(216, 50%, 12%, 1);--colorPress:hsla(212, 36%, 9%, 1);--colorFocus:hsla(216, 50%, 12%, 1);--placeholderColor:hsla(214, 65%, 18%, 1);--outlineColor:hsla(214, 35%, 9%, 0.2);--colorTransparent:hsla(214, 35%, 9%, 0);}
}
.t_dark_blue_SwitchThumb ::selection, .t_dark_blue_SliderThumb ::selection, .t_dark_blue_Tooltip ::selection, .t_dark_blue_ProgressIndicator ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_red_Card, :root.t_dark .t_red_Input, :root.t_dark .t_red_ListItem, :root.t_dark .t_red_Progress, :root.t_dark .t_red_SelectTrigger, :root.t_dark .t_red_SliderTrack, :root.t_dark .t_red_TextArea, :root.t_dark .t_red_TooltipArrow, :root.t_light .t_dark .t_red_Card, :root.t_light .t_dark .t_red_Input, :root.t_light .t_dark .t_red_ListItem, :root.t_light .t_dark .t_red_Progress, :root.t_light .t_dark .t_red_SelectTrigger, :root.t_light .t_dark .t_red_SliderTrack, :root.t_light .t_dark .t_red_TextArea, :root.t_light .t_dark .t_red_TooltipArrow, .tm_xxt {--color:hsla(353, 90%, 96%, 1);--colorHover:hsla(358, 100%, 69%, 1);--colorPress:hsla(353, 90%, 96%, 1);--colorFocus:hsla(358, 100%, 69%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(353, 90%, 96%, 0.2);--background:hsla(357, 34%, 12%, 1);--backgroundHover:hsla(357, 43%, 16%, 1);--backgroundPress:hsla(350, 24%, 10%, 1);--backgroundFocus:hsla(350, 24%, 10%, 1);--borderColor:hsla(356, 51%, 22%, 1);--borderColorHover:hsla(357, 55%, 26%, 1);--borderColorFocus:hsla(356, 51%, 22%, 1);--borderColorPress:hsla(356, 47%, 19%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_red_Card, .t_red_Input, .t_red_ListItem, .t_red_Progress, .t_red_SelectTrigger, .t_red_SliderTrack, .t_red_TextArea, .t_red_TooltipArrow {--color:hsla(353, 90%, 96%, 1);--colorHover:hsla(358, 100%, 69%, 1);--colorPress:hsla(353, 90%, 96%, 1);--colorFocus:hsla(358, 100%, 69%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(353, 90%, 96%, 0.2);--background:hsla(357, 34%, 12%, 1);--backgroundHover:hsla(357, 43%, 16%, 1);--backgroundPress:hsla(350, 24%, 10%, 1);--backgroundFocus:hsla(350, 24%, 10%, 1);--borderColor:hsla(356, 51%, 22%, 1);--borderColorHover:hsla(357, 55%, 26%, 1);--borderColorFocus:hsla(356, 51%, 22%, 1);--borderColorPress:hsla(356, 47%, 19%, 1);}
}
:root.t_dark .t_red_Button, :root.t_dark .t_red_SliderTrackActive, :root.t_light .t_dark .t_red_Button, :root.t_light .t_dark .t_red_SliderTrackActive, .tm_xxt {--color:hsla(353, 90%, 96%, 1);--colorHover:hsla(358, 100%, 69%, 1);--colorPress:hsla(353, 90%, 96%, 1);--colorFocus:hsla(358, 100%, 69%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(353, 90%, 96%, 0.2);--background:hsla(356, 47%, 19%, 1);--backgroundHover:hsla(356, 51%, 22%, 1);--backgroundPress:hsla(357, 43%, 16%, 1);--backgroundFocus:hsla(357, 43%, 16%, 1);--borderColor:hsla(357, 60%, 32%, 1);--borderColorHover:hsla(358, 65%, 40%, 1);--borderColorFocus:hsla(357, 60%, 32%, 1);--borderColorPress:hsla(357, 55%, 26%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_red_Button, .t_red_SliderTrackActive {--color:hsla(353, 90%, 96%, 1);--colorHover:hsla(358, 100%, 69%, 1);--colorPress:hsla(353, 90%, 96%, 1);--colorFocus:hsla(358, 100%, 69%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(353, 90%, 96%, 0.2);--background:hsla(356, 47%, 19%, 1);--backgroundHover:hsla(356, 51%, 22%, 1);--backgroundPress:hsla(357, 43%, 16%, 1);--backgroundFocus:hsla(357, 43%, 16%, 1);--borderColor:hsla(357, 60%, 32%, 1);--borderColorHover:hsla(358, 65%, 40%, 1);--borderColorFocus:hsla(357, 60%, 32%, 1);--borderColorPress:hsla(357, 55%, 26%, 1);}
}
:root.t_dark .t_red_Checkbox, :root.t_dark .t_red_RadioGroupItem, :root.t_dark .t_red_Switch, :root.t_dark .t_red_TooltipContent, :root.t_light .t_dark .t_red_Checkbox, :root.t_light .t_dark .t_red_RadioGroupItem, :root.t_light .t_dark .t_red_Switch, :root.t_light .t_dark .t_red_TooltipContent, .tm_xxt {--color:hsla(353, 90%, 96%, 1);--colorHover:hsla(358, 100%, 69%, 1);--colorPress:hsla(353, 90%, 96%, 1);--colorFocus:hsla(358, 100%, 69%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(353, 90%, 96%, 0.2);--background:hsla(357, 43%, 16%, 1);--backgroundHover:hsla(356, 47%, 19%, 1);--backgroundPress:hsla(357, 34%, 12%, 1);--backgroundFocus:hsla(357, 34%, 12%, 1);--borderColor:hsla(357, 55%, 26%, 1);--borderColorHover:hsla(357, 60%, 32%, 1);--borderColorFocus:hsla(357, 55%, 26%, 1);--borderColorPress:hsla(356, 51%, 22%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_red_Checkbox, .t_red_RadioGroupItem, .t_red_Switch, .t_red_TooltipContent {--color:hsla(353, 90%, 96%, 1);--colorHover:hsla(358, 100%, 69%, 1);--colorPress:hsla(353, 90%, 96%, 1);--colorFocus:hsla(358, 100%, 69%, 1);--placeholderColor:hsla(358, 75%, 59%, 1);--outlineColor:hsla(353, 90%, 96%, 0.2);--background:hsla(357, 43%, 16%, 1);--backgroundHover:hsla(356, 47%, 19%, 1);--backgroundPress:hsla(357, 34%, 12%, 1);--backgroundFocus:hsla(357, 34%, 12%, 1);--borderColor:hsla(357, 55%, 26%, 1);--borderColorHover:hsla(357, 60%, 32%, 1);--borderColorFocus:hsla(357, 55%, 26%, 1);--borderColorPress:hsla(356, 51%, 22%, 1);}
}
:root.t_dark .t_red_ProgressIndicator, :root.t_dark .t_red_SliderThumb, :root.t_dark .t_red_SwitchThumb, :root.t_dark .t_red_Tooltip, :root.t_light .t_dark .t_red_ProgressIndicator, :root.t_light .t_dark .t_red_SliderThumb, :root.t_light .t_dark .t_red_SwitchThumb, :root.t_light .t_dark .t_red_Tooltip, .tm_xxt {--accentBackground:hsla(0, 0%, 93%, 1);--accentColor:hsla(0, 0%, 50%, 1);--background0:hsla(353, 90%, 96%, 0);--background02:hsla(353, 90%, 96%, 0.2);--background04:hsla(353, 90%, 96%, 0.4);--background06:hsla(353, 90%, 96%, 0.6);--background08:hsla(353, 90%, 96%, 0.8);--color1:hsla(353, 90%, 96%, 1);--color2:hsla(358, 100%, 69%, 1);--color3:hsla(358, 86%, 64%, 1);--color4:hsla(358, 75%, 59%, 1);--color5:hsla(358, 65%, 40%, 1);--color6:hsla(357, 60%, 32%, 1);--color7:hsla(357, 55%, 26%, 1);--color8:hsla(356, 51%, 22%, 1);--color9:hsla(356, 47%, 19%, 1);--color10:hsla(357, 43%, 16%, 1);--color11:hsla(357, 34%, 12%, 1);--color12:hsla(350, 24%, 10%, 1);--color0:hsla(351, 25%, 10%, 0);--color02:hsla(351, 25%, 10%, 0.2);--color04:hsla(351, 25%, 10%, 0.4);--color06:hsla(351, 25%, 10%, 0.6);--color08:hsla(351, 25%, 10%, 0.8);--background:hsla(353, 90%, 96%, 1);--backgroundHover:hsla(358, 100%, 69%, 1);--backgroundPress:hsla(353, 90%, 96%, 0.8);--backgroundFocus:hsla(353, 90%, 96%, 0.8);--borderColor:hsla(358, 75%, 59%, 1);--borderColorHover:hsla(358, 65%, 40%, 1);--borderColorPress:hsla(358, 86%, 64%, 1);--borderColorFocus:hsla(358, 75%, 59%, 1);--color:hsla(350, 24%, 10%, 1);--colorHover:hsla(357, 34%, 12%, 1);--colorPress:hsla(350, 24%, 10%, 1);--colorFocus:hsla(357, 34%, 12%, 1);--placeholderColor:hsla(356, 47%, 19%, 1);--outlineColor:hsla(351, 25%, 10%, 0.2);--colorTransparent:hsla(351, 25%, 10%, 0);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_red_ProgressIndicator, .t_red_SliderThumb, .t_red_SwitchThumb, .t_red_Tooltip {--accentBackground:hsla(0, 0%, 93%, 1);--accentColor:hsla(0, 0%, 50%, 1);--background0:hsla(353, 90%, 96%, 0);--background02:hsla(353, 90%, 96%, 0.2);--background04:hsla(353, 90%, 96%, 0.4);--background06:hsla(353, 90%, 96%, 0.6);--background08:hsla(353, 90%, 96%, 0.8);--color1:hsla(353, 90%, 96%, 1);--color2:hsla(358, 100%, 69%, 1);--color3:hsla(358, 86%, 64%, 1);--color4:hsla(358, 75%, 59%, 1);--color5:hsla(358, 65%, 40%, 1);--color6:hsla(357, 60%, 32%, 1);--color7:hsla(357, 55%, 26%, 1);--color8:hsla(356, 51%, 22%, 1);--color9:hsla(356, 47%, 19%, 1);--color10:hsla(357, 43%, 16%, 1);--color11:hsla(357, 34%, 12%, 1);--color12:hsla(350, 24%, 10%, 1);--color0:hsla(351, 25%, 10%, 0);--color02:hsla(351, 25%, 10%, 0.2);--color04:hsla(351, 25%, 10%, 0.4);--color06:hsla(351, 25%, 10%, 0.6);--color08:hsla(351, 25%, 10%, 0.8);--background:hsla(353, 90%, 96%, 1);--backgroundHover:hsla(358, 100%, 69%, 1);--backgroundPress:hsla(353, 90%, 96%, 0.8);--backgroundFocus:hsla(353, 90%, 96%, 0.8);--borderColor:hsla(358, 75%, 59%, 1);--borderColorHover:hsla(358, 65%, 40%, 1);--borderColorPress:hsla(358, 86%, 64%, 1);--borderColorFocus:hsla(358, 75%, 59%, 1);--color:hsla(350, 24%, 10%, 1);--colorHover:hsla(357, 34%, 12%, 1);--colorPress:hsla(350, 24%, 10%, 1);--colorFocus:hsla(357, 34%, 12%, 1);--placeholderColor:hsla(356, 47%, 19%, 1);--outlineColor:hsla(351, 25%, 10%, 0.2);--colorTransparent:hsla(351, 25%, 10%, 0);}
}
.t_dark_red_SwitchThumb ::selection, .t_dark_red_SliderThumb ::selection, .t_dark_red_Tooltip ::selection, .t_dark_red_ProgressIndicator ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_yellow_Card, :root.t_dark .t_yellow_Input, :root.t_dark .t_yellow_ListItem, :root.t_dark .t_yellow_Progress, :root.t_dark .t_yellow_SelectTrigger, :root.t_dark .t_yellow_SliderTrack, :root.t_dark .t_yellow_TextArea, :root.t_dark .t_yellow_TooltipArrow, :root.t_light .t_dark .t_yellow_Card, :root.t_light .t_dark .t_yellow_Input, :root.t_light .t_dark .t_yellow_ListItem, :root.t_light .t_dark .t_yellow_Progress, :root.t_light .t_dark .t_yellow_SelectTrigger, :root.t_light .t_dark .t_yellow_SliderTrack, :root.t_light .t_dark .t_yellow_TextArea, :root.t_light .t_dark .t_yellow_TooltipArrow, .tm_xxt {--color:hsla(53, 100%, 91%, 1);--colorHover:hsla(48, 100%, 47%, 1);--colorPress:hsla(53, 100%, 91%, 1);--colorFocus:hsla(48, 100%, 47%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(53, 100%, 91%, 0.2);--background:hsla(46, 100%, 7%, 1);--backgroundHover:hsla(45, 100%, 9%, 1);--backgroundPress:hsla(45, 100%, 5%, 1);--backgroundFocus:hsla(45, 100%, 5%, 1);--borderColor:hsla(46, 100%, 12%, 1);--borderColorHover:hsla(49, 100%, 14%, 1);--borderColorFocus:hsla(46, 100%, 12%, 1);--borderColorPress:hsla(45, 100%, 10%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_yellow_Card, .t_yellow_Input, .t_yellow_ListItem, .t_yellow_Progress, .t_yellow_SelectTrigger, .t_yellow_SliderTrack, .t_yellow_TextArea, .t_yellow_TooltipArrow {--color:hsla(53, 100%, 91%, 1);--colorHover:hsla(48, 100%, 47%, 1);--colorPress:hsla(53, 100%, 91%, 1);--colorFocus:hsla(48, 100%, 47%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(53, 100%, 91%, 0.2);--background:hsla(46, 100%, 7%, 1);--backgroundHover:hsla(45, 100%, 9%, 1);--backgroundPress:hsla(45, 100%, 5%, 1);--backgroundFocus:hsla(45, 100%, 5%, 1);--borderColor:hsla(46, 100%, 12%, 1);--borderColorHover:hsla(49, 100%, 14%, 1);--borderColorFocus:hsla(46, 100%, 12%, 1);--borderColorPress:hsla(45, 100%, 10%, 1);}
}
:root.t_dark .t_yellow_Button, :root.t_dark .t_yellow_SliderTrackActive, :root.t_light .t_dark .t_yellow_Button, :root.t_light .t_dark .t_yellow_SliderTrackActive, .tm_xxt {--color:hsla(53, 100%, 91%, 1);--colorHover:hsla(48, 100%, 47%, 1);--colorPress:hsla(53, 100%, 91%, 1);--colorFocus:hsla(48, 100%, 47%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(53, 100%, 91%, 0.2);--background:hsla(45, 100%, 10%, 1);--backgroundHover:hsla(46, 100%, 12%, 1);--backgroundPress:hsla(45, 100%, 9%, 1);--backgroundFocus:hsla(45, 100%, 9%, 1);--borderColor:hsla(49, 89%, 18%, 1);--borderColorHover:hsla(50, 100%, 22%, 1);--borderColorFocus:hsla(49, 89%, 18%, 1);--borderColorPress:hsla(49, 100%, 14%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_yellow_Button, .t_yellow_SliderTrackActive {--color:hsla(53, 100%, 91%, 1);--colorHover:hsla(48, 100%, 47%, 1);--colorPress:hsla(53, 100%, 91%, 1);--colorFocus:hsla(48, 100%, 47%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(53, 100%, 91%, 0.2);--background:hsla(45, 100%, 10%, 1);--backgroundHover:hsla(46, 100%, 12%, 1);--backgroundPress:hsla(45, 100%, 9%, 1);--backgroundFocus:hsla(45, 100%, 9%, 1);--borderColor:hsla(49, 89%, 18%, 1);--borderColorHover:hsla(50, 100%, 22%, 1);--borderColorFocus:hsla(49, 89%, 18%, 1);--borderColorPress:hsla(49, 100%, 14%, 1);}
}
:root.t_dark .t_yellow_Checkbox, :root.t_dark .t_yellow_RadioGroupItem, :root.t_dark .t_yellow_Switch, :root.t_dark .t_yellow_TooltipContent, :root.t_light .t_dark .t_yellow_Checkbox, :root.t_light .t_dark .t_yellow_RadioGroupItem, :root.t_light .t_dark .t_yellow_Switch, :root.t_light .t_dark .t_yellow_TooltipContent, .tm_xxt {--color:hsla(53, 100%, 91%, 1);--colorHover:hsla(48, 100%, 47%, 1);--colorPress:hsla(53, 100%, 91%, 1);--colorFocus:hsla(48, 100%, 47%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(53, 100%, 91%, 0.2);--background:hsla(45, 100%, 9%, 1);--backgroundHover:hsla(45, 100%, 10%, 1);--backgroundPress:hsla(46, 100%, 7%, 1);--backgroundFocus:hsla(46, 100%, 7%, 1);--borderColor:hsla(49, 100%, 14%, 1);--borderColorHover:hsla(49, 89%, 18%, 1);--borderColorFocus:hsla(49, 100%, 14%, 1);--borderColorPress:hsla(46, 100%, 12%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_yellow_Checkbox, .t_yellow_RadioGroupItem, .t_yellow_Switch, .t_yellow_TooltipContent {--color:hsla(53, 100%, 91%, 1);--colorHover:hsla(48, 100%, 47%, 1);--colorPress:hsla(53, 100%, 91%, 1);--colorFocus:hsla(48, 100%, 47%, 1);--placeholderColor:hsla(53, 92%, 50%, 1);--outlineColor:hsla(53, 100%, 91%, 0.2);--background:hsla(45, 100%, 9%, 1);--backgroundHover:hsla(45, 100%, 10%, 1);--backgroundPress:hsla(46, 100%, 7%, 1);--backgroundFocus:hsla(46, 100%, 7%, 1);--borderColor:hsla(49, 100%, 14%, 1);--borderColorHover:hsla(49, 89%, 18%, 1);--borderColorFocus:hsla(49, 100%, 14%, 1);--borderColorPress:hsla(46, 100%, 12%, 1);}
}
:root.t_dark .t_yellow_ProgressIndicator, :root.t_dark .t_yellow_SliderThumb, :root.t_dark .t_yellow_SwitchThumb, :root.t_dark .t_yellow_Tooltip, :root.t_light .t_dark .t_yellow_ProgressIndicator, :root.t_light .t_dark .t_yellow_SliderThumb, :root.t_light .t_dark .t_yellow_SwitchThumb, :root.t_light .t_dark .t_yellow_Tooltip, .tm_xxt {--accentBackground:hsla(0, 0%, 93%, 1);--accentColor:hsla(0, 0%, 50%, 1);--background0:hsla(53, 100%, 91%, 0);--background02:hsla(53, 100%, 91%, 0.2);--background04:hsla(53, 100%, 91%, 0.4);--background06:hsla(53, 100%, 91%, 0.6);--background08:hsla(53, 100%, 91%, 0.8);--color1:hsla(53, 100%, 91%, 1);--color2:hsla(48, 100%, 47%, 1);--color3:hsla(54, 100%, 68%, 1);--color4:hsla(53, 92%, 50%, 1);--color5:hsla(50, 100%, 22%, 1);--color6:hsla(49, 89%, 18%, 1);--color7:hsla(49, 100%, 14%, 1);--color8:hsla(46, 100%, 12%, 1);--color9:hsla(45, 100%, 10%, 1);--color10:hsla(45, 100%, 9%, 1);--color11:hsla(46, 100%, 7%, 1);--color12:hsla(45, 100%, 5%, 1);--color0:hsla(46, 100%, 5%, 0);--color02:hsla(46, 100%, 5%, 0.2);--color04:hsla(46, 100%, 5%, 0.4);--color06:hsla(46, 100%, 5%, 0.6);--color08:hsla(46, 100%, 5%, 0.8);--background:hsla(53, 100%, 91%, 1);--backgroundHover:hsla(48, 100%, 47%, 1);--backgroundPress:hsla(53, 100%, 91%, 0.8);--backgroundFocus:hsla(53, 100%, 91%, 0.8);--borderColor:hsla(53, 92%, 50%, 1);--borderColorHover:hsla(50, 100%, 22%, 1);--borderColorPress:hsla(54, 100%, 68%, 1);--borderColorFocus:hsla(53, 92%, 50%, 1);--color:hsla(45, 100%, 5%, 1);--colorHover:hsla(46, 100%, 7%, 1);--colorPress:hsla(45, 100%, 5%, 1);--colorFocus:hsla(46, 100%, 7%, 1);--placeholderColor:hsla(45, 100%, 10%, 1);--outlineColor:hsla(46, 100%, 5%, 0.2);--colorTransparent:hsla(46, 100%, 5%, 0);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_yellow_ProgressIndicator, .t_yellow_SliderThumb, .t_yellow_SwitchThumb, .t_yellow_Tooltip {--accentBackground:hsla(0, 0%, 93%, 1);--accentColor:hsla(0, 0%, 50%, 1);--background0:hsla(53, 100%, 91%, 0);--background02:hsla(53, 100%, 91%, 0.2);--background04:hsla(53, 100%, 91%, 0.4);--background06:hsla(53, 100%, 91%, 0.6);--background08:hsla(53, 100%, 91%, 0.8);--color1:hsla(53, 100%, 91%, 1);--color2:hsla(48, 100%, 47%, 1);--color3:hsla(54, 100%, 68%, 1);--color4:hsla(53, 92%, 50%, 1);--color5:hsla(50, 100%, 22%, 1);--color6:hsla(49, 89%, 18%, 1);--color7:hsla(49, 100%, 14%, 1);--color8:hsla(46, 100%, 12%, 1);--color9:hsla(45, 100%, 10%, 1);--color10:hsla(45, 100%, 9%, 1);--color11:hsla(46, 100%, 7%, 1);--color12:hsla(45, 100%, 5%, 1);--color0:hsla(46, 100%, 5%, 0);--color02:hsla(46, 100%, 5%, 0.2);--color04:hsla(46, 100%, 5%, 0.4);--color06:hsla(46, 100%, 5%, 0.6);--color08:hsla(46, 100%, 5%, 0.8);--background:hsla(53, 100%, 91%, 1);--backgroundHover:hsla(48, 100%, 47%, 1);--backgroundPress:hsla(53, 100%, 91%, 0.8);--backgroundFocus:hsla(53, 100%, 91%, 0.8);--borderColor:hsla(53, 92%, 50%, 1);--borderColorHover:hsla(50, 100%, 22%, 1);--borderColorPress:hsla(54, 100%, 68%, 1);--borderColorFocus:hsla(53, 92%, 50%, 1);--color:hsla(45, 100%, 5%, 1);--colorHover:hsla(46, 100%, 7%, 1);--colorPress:hsla(45, 100%, 5%, 1);--colorFocus:hsla(46, 100%, 7%, 1);--placeholderColor:hsla(45, 100%, 10%, 1);--outlineColor:hsla(46, 100%, 5%, 0.2);--colorTransparent:hsla(46, 100%, 5%, 0);}
}
.t_dark_yellow_SwitchThumb ::selection, .t_dark_yellow_SliderThumb ::selection, .t_dark_yellow_Tooltip ::selection, .t_dark_yellow_ProgressIndicator ::selection{background:var(--color5);color:var(--color11)}
:root.t_dark .t_green_Card, :root.t_dark .t_green_Input, :root.t_dark .t_green_ListItem, :root.t_dark .t_green_Progress, :root.t_dark .t_green_SelectTrigger, :root.t_dark .t_green_SliderTrack, :root.t_dark .t_green_TextArea, :root.t_dark .t_green_TooltipArrow, :root.t_light .t_dark .t_green_Card, :root.t_light .t_dark .t_green_Input, :root.t_light .t_dark .t_green_ListItem, :root.t_light .t_dark .t_green_Progress, :root.t_light .t_dark .t_green_SelectTrigger, :root.t_light .t_dark .t_green_SliderTrack, :root.t_light .t_dark .t_green_TextArea, :root.t_light .t_dark .t_green_TooltipArrow, .tm_xxt {--color:hsla(136, 73%, 94%, 1);--colorHover:hsla(151, 50%, 53%, 1);--colorPress:hsla(136, 73%, 94%, 1);--colorFocus:hsla(151, 50%, 53%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(134, 73%, 94%, 0.2);--background:hsla(155, 44%, 8%, 1);--backgroundHover:hsla(155, 46%, 11%, 1);--backgroundPress:hsla(145, 32%, 7%, 1);--backgroundFocus:hsla(145, 32%, 7%, 1);--borderColor:hsla(155, 50%, 15%, 1);--borderColorHover:hsla(154, 51%, 18%, 1);--borderColorFocus:hsla(155, 50%, 15%, 1);--borderColorPress:hsla(154, 48%, 13%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_green_Card, .t_green_Input, .t_green_ListItem, .t_green_Progress, .t_green_SelectTrigger, .t_green_SliderTrack, .t_green_TextArea, .t_green_TooltipArrow {--color:hsla(136, 73%, 94%, 1);--colorHover:hsla(151, 50%, 53%, 1);--colorPress:hsla(136, 73%, 94%, 1);--colorFocus:hsla(151, 50%, 53%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(134, 73%, 94%, 0.2);--background:hsla(155, 44%, 8%, 1);--backgroundHover:hsla(155, 46%, 11%, 1);--backgroundPress:hsla(145, 32%, 7%, 1);--backgroundFocus:hsla(145, 32%, 7%, 1);--borderColor:hsla(155, 50%, 15%, 1);--borderColorHover:hsla(154, 51%, 18%, 1);--borderColorFocus:hsla(155, 50%, 15%, 1);--borderColorPress:hsla(154, 48%, 13%, 1);}
}
:root.t_dark .t_green_Button, :root.t_dark .t_green_SliderTrackActive, :root.t_light .t_dark .t_green_Button, :root.t_light .t_dark .t_green_SliderTrackActive, .tm_xxt {--color:hsla(136, 73%, 94%, 1);--colorHover:hsla(151, 50%, 53%, 1);--colorPress:hsla(136, 73%, 94%, 1);--colorFocus:hsla(151, 50%, 53%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(134, 73%, 94%, 0.2);--background:hsla(154, 48%, 13%, 1);--backgroundHover:hsla(155, 50%, 15%, 1);--backgroundPress:hsla(155, 46%, 11%, 1);--backgroundFocus:hsla(155, 46%, 11%, 1);--borderColor:hsla(153, 51%, 22%, 1);--borderColorHover:hsla(151, 52%, 28%, 1);--borderColorFocus:hsla(153, 51%, 22%, 1);--borderColorPress:hsla(154, 51%, 18%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_green_Button, .t_green_SliderTrackActive {--color:hsla(136, 73%, 94%, 1);--colorHover:hsla(151, 50%, 53%, 1);--colorPress:hsla(136, 73%, 94%, 1);--colorFocus:hsla(151, 50%, 53%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(134, 73%, 94%, 0.2);--background:hsla(154, 48%, 13%, 1);--backgroundHover:hsla(155, 50%, 15%, 1);--backgroundPress:hsla(155, 46%, 11%, 1);--backgroundFocus:hsla(155, 46%, 11%, 1);--borderColor:hsla(153, 51%, 22%, 1);--borderColorHover:hsla(151, 52%, 28%, 1);--borderColorFocus:hsla(153, 51%, 22%, 1);--borderColorPress:hsla(154, 51%, 18%, 1);}
}
:root.t_dark .t_green_Checkbox, :root.t_dark .t_green_RadioGroupItem, :root.t_dark .t_green_Switch, :root.t_dark .t_green_TooltipContent, :root.t_light .t_dark .t_green_Checkbox, :root.t_light .t_dark .t_green_RadioGroupItem, :root.t_light .t_dark .t_green_Switch, :root.t_light .t_dark .t_green_TooltipContent, .tm_xxt {--color:hsla(136, 73%, 94%, 1);--colorHover:hsla(151, 50%, 53%, 1);--colorPress:hsla(136, 73%, 94%, 1);--colorFocus:hsla(151, 50%, 53%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(134, 73%, 94%, 0.2);--background:hsla(155, 46%, 11%, 1);--backgroundHover:hsla(154, 48%, 13%, 1);--backgroundPress:hsla(155, 44%, 8%, 1);--backgroundFocus:hsla(155, 44%, 8%, 1);--borderColor:hsla(154, 51%, 18%, 1);--borderColorHover:hsla(153, 51%, 22%, 1);--borderColorFocus:hsla(154, 51%, 18%, 1);--borderColorPress:hsla(155, 50%, 15%, 1);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_green_Checkbox, .t_green_RadioGroupItem, .t_green_Switch, .t_green_TooltipContent {--color:hsla(136, 73%, 94%, 1);--colorHover:hsla(151, 50%, 53%, 1);--colorPress:hsla(136, 73%, 94%, 1);--colorFocus:hsla(151, 50%, 53%, 1);--placeholderColor:hsla(151, 55%, 42%, 1);--outlineColor:hsla(134, 73%, 94%, 0.2);--background:hsla(155, 46%, 11%, 1);--backgroundHover:hsla(154, 48%, 13%, 1);--backgroundPress:hsla(155, 44%, 8%, 1);--backgroundFocus:hsla(155, 44%, 8%, 1);--borderColor:hsla(154, 51%, 18%, 1);--borderColorHover:hsla(153, 51%, 22%, 1);--borderColorFocus:hsla(154, 51%, 18%, 1);--borderColorPress:hsla(155, 50%, 15%, 1);}
}
:root.t_dark .t_green_ProgressIndicator, :root.t_dark .t_green_SliderThumb, :root.t_dark .t_green_SwitchThumb, :root.t_dark .t_green_Tooltip, :root.t_light .t_dark .t_green_ProgressIndicator, :root.t_light .t_dark .t_green_SliderThumb, :root.t_light .t_dark .t_green_SwitchThumb, :root.t_light .t_dark .t_green_Tooltip, .tm_xxt {--accentBackground:hsla(0, 0%, 93%, 1);--accentColor:hsla(0, 0%, 50%, 1);--background0:hsla(134, 73%, 94%, 0);--background02:hsla(134, 73%, 94%, 0.2);--background04:hsla(134, 73%, 94%, 0.4);--background06:hsla(134, 73%, 94%, 0.6);--background08:hsla(134, 73%, 94%, 0.8);--color1:hsla(136, 73%, 94%, 1);--color2:hsla(151, 50%, 53%, 1);--color3:hsla(151, 49%, 46%, 1);--color4:hsla(151, 55%, 42%, 1);--color5:hsla(151, 52%, 28%, 1);--color6:hsla(153, 51%, 22%, 1);--color7:hsla(154, 51%, 18%, 1);--color8:hsla(155, 50%, 15%, 1);--color9:hsla(154, 48%, 13%, 1);--color10:hsla(155, 46%, 11%, 1);--color11:hsla(155, 44%, 8%, 1);--color12:hsla(145, 32%, 7%, 1);--color0:hsla(145, 33%, 7%, 0);--color02:hsla(145, 33%, 7%, 0.2);--color04:hsla(145, 33%, 7%, 0.4);--color06:hsla(145, 33%, 7%, 0.6);--color08:hsla(145, 33%, 7%, 0.8);--background:hsla(136, 73%, 94%, 1);--backgroundHover:hsla(151, 50%, 53%, 1);--backgroundPress:hsla(134, 73%, 94%, 0.8);--backgroundFocus:hsla(134, 73%, 94%, 0.8);--borderColor:hsla(151, 55%, 42%, 1);--borderColorHover:hsla(151, 52%, 28%, 1);--borderColorPress:hsla(151, 49%, 46%, 1);--borderColorFocus:hsla(151, 55%, 42%, 1);--color:hsla(145, 32%, 7%, 1);--colorHover:hsla(155, 44%, 8%, 1);--colorPress:hsla(145, 32%, 7%, 1);--colorFocus:hsla(155, 44%, 8%, 1);--placeholderColor:hsla(154, 48%, 13%, 1);--outlineColor:hsla(145, 33%, 7%, 0.2);--colorTransparent:hsla(145, 33%, 7%, 0);}
@media(prefers-color-scheme:dark){
body{background:var(--background);color:var(--color)}
.t_green_ProgressIndicator, .t_green_SliderThumb, .t_green_SwitchThumb, .t_green_Tooltip {--accentBackground:hsla(0, 0%, 93%, 1);--accentColor:hsla(0, 0%, 50%, 1);--background0:hsla(134, 73%, 94%, 0);--background02:hsla(134, 73%, 94%, 0.2);--background04:hsla(134, 73%, 94%, 0.4);--background06:hsla(134, 73%, 94%, 0.6);--background08:hsla(134, 73%, 94%, 0.8);--color1:hsla(136, 73%, 94%, 1);--color2:hsla(151, 50%, 53%, 1);--color3:hsla(151, 49%, 46%, 1);--color4:hsla(151, 55%, 42%, 1);--color5:hsla(151, 52%, 28%, 1);--color6:hsla(153, 51%, 22%, 1);--color7:hsla(154, 51%, 18%, 1);--color8:hsla(155, 50%, 15%, 1);--color9:hsla(154, 48%, 13%, 1);--color10:hsla(155, 46%, 11%, 1);--color11:hsla(155, 44%, 8%, 1);--color12:hsla(145, 32%, 7%, 1);--color0:hsla(145, 33%, 7%, 0);--color02:hsla(145, 33%, 7%, 0.2);--color04:hsla(145, 33%, 7%, 0.4);--color06:hsla(145, 33%, 7%, 0.6);--color08:hsla(145, 33%, 7%, 0.8);--background:hsla(136, 73%, 94%, 1);--backgroundHover:hsla(151, 50%, 53%, 1);--backgroundPress:hsla(134, 73%, 94%, 0.8);--backgroundFocus:hsla(134, 73%, 94%, 0.8);--borderColor:hsla(151, 55%, 42%, 1);--borderColorHover:hsla(151, 52%, 28%, 1);--borderColorPress:hsla(151, 49%, 46%, 1);--borderColorFocus:hsla(151, 55%, 42%, 1);--color:hsla(145, 32%, 7%, 1);--colorHover:hsla(155, 44%, 8%, 1);--colorPress:hsla(145, 32%, 7%, 1);--colorFocus:hsla(155, 44%, 8%, 1);--placeholderColor:hsla(154, 48%, 13%, 1);--outlineColor:hsla(145, 33%, 7%, 0.2);--colorTransparent:hsla(145, 33%, 7%, 0);}
}
.t_dark_green_SwitchThumb ::selection, .t_dark_green_SliderThumb ::selection, .t_dark_green_Tooltip ::selection, .t_dark_green_ProgressIndicator ::selection{background:var(--color5);color:var(--color11)}

View File

@@ -0,0 +1,4 @@
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

29
apps/next/tsconfig.json Normal file
View File

@@ -0,0 +1,29 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"baseUrl": ".",
"paths": {
"react-native": ["react-native-web"]
},
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
]
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}

7
apps/next/types.d.ts vendored Normal file
View File

@@ -0,0 +1,7 @@
import { config } from '@my/config'
export type Conf = typeof config
declare module '@my/ui' {
interface TamaguiCustomConfig extends Conf {}
}

3
apps/next/vercel.json Normal file
View File

@@ -0,0 +1,3 @@
{
"installCommand": "yarn set version 4 && yarn install"
}

View File

@@ -0,0 +1,11 @@
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
poolOptions: {
threads: {
singleThread: true,
},
},
},
})

113
biome.json Normal file
View File

@@ -0,0 +1,113 @@
{
"$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
"organizeImports": {
"enabled": false
},
"linter": {
"enabled": true,
"ignore": [
".tamagui",
"*/ios/**",
".vscode",
"**/tamagui.css",
"**/*.d.ts",
"packages/vendor/**",
"packages/**/vendor/**",
"**/tsconfig.json",
"**/dist/**",
"**/package.json",
".codesandbox",
"tsconfig.base.json"
],
"rules": {
"correctness": {
"useExhaustiveDependencies": "off",
"noInnerDeclarations": "off",
"noUnnecessaryContinue": "off",
"noConstructorReturn": "off"
},
"suspicious": {
"noImplicitAnyLet": "off",
"noConfusingVoidType": "off",
"noEmptyInterface": "off",
"noExplicitAny": "off",
"noArrayIndexKey": "off",
"noDoubleEquals": "off",
"noConsoleLog": "error",
"noAssignInExpressions": "off",
"noRedeclare": "off"
},
"style": {
"noParameterAssign": "off",
"noNonNullAssertion": "off",
"noArguments": "off",
"noUnusedTemplateLiteral": "off",
"useDefaultParameterLast": "off",
"useConst": "off",
"useEnumInitializers": "off",
"useTemplate": "off",
"useSelfClosingElements": "off",
"useImportType": "error"
},
"security": {
"noDangerouslySetInnerHtml": "off",
"noDangerouslySetInnerHtmlWithChildren": "off"
},
"performance": {
"noDelete": "off",
"noAccumulatingSpread": "off"
},
"complexity": {
"noForEach": "off",
"noBannedTypes": "off",
"noUselessFragments": "off",
"useLiteralKeys": "off",
"useSimplifiedLogicExpression": "off",
"useOptionalChain": "off"
},
"a11y": {
"noSvgWithoutTitle": "off",
"useMediaCaption": "off",
"noHeaderScope": "off",
"useAltText": "off",
"useButtonType": "off"
}
}
},
"formatter": {
"enabled": true,
"formatWithErrors": false,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 100,
"attributePosition": "multiline",
"ignore": [
".tamagui",
"**/ios/**",
".vscode",
"**/tamagui.css",
"**/*.d.ts",
"packages/vendor/**",
"packages/**/vendor/**",
"**/tsconfig.json",
"**/dist/**",
"**/package.json",
".codesandbox",
"tsconfig.base.json"
]
},
"javascript": {
"formatter": {
"trailingCommas": "es5",
"jsxQuoteStyle": "double",
"semicolons": "asNeeded",
"quoteStyle": "single"
}
},
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
}
}

21
eas.json Normal file
View File

@@ -0,0 +1,21 @@
{
"cli": {
"version": ">= 16.17.4",
"appVersionSource": "remote"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"distribution": "internal"
},
"production": {
"autoIncrement": true
}
},
"submit": {
"production": {}
}
}

56
package.json Normal file
View File

@@ -0,0 +1,56 @@
{
"name": "app-template",
"private": true,
"workspaces": [
"./apps/*",
"./packages/*"
],
"scripts": {
"native": "cd apps/expo && yarn start",
"native:prebuild": "cd apps/expo && yarn prebuild",
"ios": "cd apps/expo && yarn ios",
"android": "cd apps/expo && yarn android",
"watch": "ultra -r --no-pretty --concurrency 400 watch",
"vercel:install": "yarn set version 3.5 && yarn install",
"web": "yarn build && cd apps/next && yarn next",
"web:extract": "DISABLE_EXTRACTION=false yarn workspace next-app dev",
"web:prod": "yarn workspace next-app build",
"web:prod:serve": "yarn workspace next-app serve",
"postinstall": "yarn check-tamagui && yarn build",
"build": "yarn workspaces foreach --all --exclude next-app run build",
"upgrade:tamagui": "yarn up '*tamagui*'@latest '@tamagui/*'@latest",
"upgrade:tamagui:canary": "yarn up '*tamagui*'@canary '@tamagui/*'@canary",
"check-tamagui": "tamagui check",
"test": "vitest run",
"test:watch": "vitest",
"prepare": "husky"
},
"resolutions": {
"react": "19.0.0",
"react-dom": "19.0.0",
"react-refresh": "^0.14.0",
"react-native-svg": "15.11.2",
"react-native-web": "~0.19.12"
},
"dependencies": {
"@babel/runtime": "^7.24.6",
"@tamagui/cli": "^1.132.18",
"check-dependency-version-consistency": "^4.1.0",
"eslint": "^9.3.0",
"expo-sqlite": "~15.2.14",
"husky": "^9.1.6",
"prettier": "^3.3.3",
"turbo": "^1.13.4",
"typescript": "~5.8.3",
"ultra-runner": "^3.10.5",
"vitest": "^2.1.1"
},
"packageManager": "yarn@4.5.0",
"engines": {
"node": "22",
"npm": "10.8"
},
"devDependencies": {
"@biomejs/biome": "^1.9.3"
}
}

3
packages/app/.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
node_modules/
.DS_Store
THUMBS_DB

View File

@@ -0,0 +1,127 @@
import {
Anchor,
Button,
H1,
Paragraph,
Separator,
Sheet,
SwitchRouterButton,
SwitchThemeButton,
useToastController,
XStack,
YStack
} from '@my/ui'
import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'
import { useState } from 'react'
import { Platform } from 'react-native'
import { useLink } from 'solito/navigation'
export function HomeScreen({ pagesMode = false }: { pagesMode?: boolean }) {
const linkTarget = pagesMode ? '/pages-example-user' : '/user'
const linkProps = useLink({
href: `${linkTarget}/nate`,
})
return (
<YStack flex={1} justify="center" items="center" gap="$8" p="$4" bg="$background">
<XStack
position="absolute"
width="100%"
t="$6"
gap="$6"
justify="center"
flexWrap="wrap"
$sm={{ position: 'relative', t: 0 }}
>
{Platform.OS === 'web' && (
<>
<SwitchRouterButton pagesMode={pagesMode} />
<SwitchThemeButton />
</>
)}
</XStack>
<YStack gap="$4">
<H1 text="center" color="$color12">
Welcome to Tamagui.
</H1>
<Paragraph color="$color10" text="center">
Here's a basic starter to show navigating from one screen to another.
</Paragraph>
<Separator />
<Paragraph text="center">
This screen uses the same code on Next.js and React Native.
</Paragraph>
<Separator />
</YStack>
<Button {...linkProps}>Link to user</Button>
<SheetDemo />
</YStack>
)
}
function SheetDemo() {
const toast = useToastController()
const [open, setOpen] = useState(false)
const [position, setPosition] = useState(0)
return (
<>
<Button
size="$6"
icon={open ? ChevronDown : ChevronUp}
circular
onPress={() => setOpen((x) => !x)}
/>
<Sheet
modal
animation="medium"
open={open}
onOpenChange={setOpen}
snapPoints={[80]}
position={position}
onPositionChange={setPosition}
dismissOnSnapToBottom
>
<Sheet.Overlay
bg="$shadow4"
animation="lazy"
enterStyle={{ opacity: 0 }}
exitStyle={{ opacity: 0 }}
/>
<Sheet.Handle bg="$color8" />
<Sheet.Frame items="center" justify="center" gap="$10" bg="$color2">
<XStack gap="$2">
<Paragraph text="center">Made by</Paragraph>
<Anchor color="$blue10" href="https://twitter.com/natebirdman" target="_blank">
@natebirdman,
</Anchor>
<Anchor
color="$blue10"
href="https://github.com/tamagui/tamagui"
target="_blank"
rel="noreferrer"
>
give it a ⭐️
</Anchor>
</XStack>
<Button
size="$6"
circular
icon={ChevronDown}
onPress={() => {
setOpen(false)
toast.show('Sheet closed!', {
message: 'Just showing how toast works...',
})
}}
/>
</Sheet.Frame>
</Sheet>
</>
)
}

View File

@@ -0,0 +1,18 @@
import { Button, Paragraph, YStack } from '@my/ui'
import { ChevronLeft } from '@tamagui/lucide-icons'
import { useRouter } from 'solito/navigation'
export function UserDetailScreen({ id }: { id: string }) {
const router = useRouter()
if (!id) {
return null
}
return (
<YStack flex={1} justify="center" items="center" gap="$4" bg="$background">
<Paragraph text="center" fontWeight="700" color="$blue10">{`User ID: ${id}`}</Paragraph>
<Button icon={ChevronLeft} onPress={() => router.back()}>
Go Home
</Button>
</YStack>
)
}

4
packages/app/index.ts Normal file
View File

@@ -0,0 +1,4 @@
// leave this blank
// don't re-export files from this workspace. it'll break next.js tree shaking
// https://github.com/vercel/next.js/issues/12557
export {}

28
packages/app/package.json Normal file
View File

@@ -0,0 +1,28 @@
{
"version": "0.0.0",
"name": "app",
"main": "index.ts",
"private": true,
"sideEffects": [
"*.css"
],
"dependencies": {
"@my/ui": "0.0.1",
"@react-navigation/native": "^6.1.17",
"@tamagui/animations-react-native": "^1.132.18",
"@tamagui/colors": "^1.132.18",
"@tamagui/font-inter": "^1.132.18",
"@tamagui/lucide-icons": "^1.132.18",
"@tamagui/shorthands": "^1.132.18",
"@tamagui/themes": "^1.132.18",
"burnt": "^0.12.2",
"expo-constants": "~17.1.6",
"expo-linking": "~7.1.4",
"react-native-safe-area-context": "5.4.0",
"solito": "^4.2.2"
},
"devDependencies": {
"@types/react": "~19.0.10",
"@types/react-native": "^0.73.0"
}
}

View File

@@ -0,0 +1,64 @@
'use client'
import '@tamagui/core/reset.css'
import '@tamagui/font-inter/css/400.css'
import '@tamagui/font-inter/css/700.css'
import '@tamagui/polyfill-dev'
import type { ReactNode } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { NextThemeProvider, useRootTheme } from '@tamagui/next-theme'
import { config } from '@my/ui'
import { Provider } from 'app/provider'
import { StyleSheet } from 'react-native'
export const NextTamaguiProvider = ({ children }: { children: ReactNode }) => {
const [theme, setTheme] = useRootTheme()
useServerInsertedHTML(() => {
// @ts-ignore
const rnwStyle = StyleSheet.getSheet()
return (
<>
<link rel="stylesheet" href="/tamagui.css" />
<style dangerouslySetInnerHTML={{ __html: rnwStyle.textContent }} id={rnwStyle.id} />
<style
dangerouslySetInnerHTML={{
// the first time this runs you'll get the full CSS including all themes
// after that, it will only return CSS generated since the last call
__html: config.getNewCSS(),
}}
/>
<style
dangerouslySetInnerHTML={{
__html: config.getCSS({
exclude: process.env.NODE_ENV === 'production' ? 'design-system' : null,
}),
}}
/>
<script
dangerouslySetInnerHTML={{
// avoid flash of animated things on enter:
__html: `document.documentElement.classList.add('t_unmounted')`,
}}
/>
</>
)
})
return (
<NextThemeProvider
skipNextHead
defaultTheme="light"
onChangeTheme={(next) => {
setTheme(next as any)
}}
>
<Provider disableRootThemeClass defaultTheme={theme || 'light'}>
{children}
</Provider>
</NextThemeProvider>
)
}

View File

@@ -0,0 +1,11 @@
import { ToastViewport as ToastViewportOg } from '@my/ui'
export const ToastViewport = () => {
return (
<ToastViewportOg
top="$8"
left={0}
right={0}
/>
)
}

View File

@@ -0,0 +1,11 @@
import { ToastViewport as ToastViewportOg } from '@my/ui'
export const ToastViewport = () => {
return (
<ToastViewportOg
left={0}
right={0}
top={10}
/>
)
}

View File

@@ -0,0 +1,29 @@
import { useColorScheme } from 'react-native'
import {
CustomToast,
TamaguiProvider,
type TamaguiProviderProps,
ToastProvider,
config,
isWeb,
} from '@my/ui'
import { ToastViewport } from './ToastViewport'
export function Provider({
children,
defaultTheme = 'light',
...rest
}: Omit<TamaguiProviderProps, 'config'> & { defaultTheme?: string }) {
const colorScheme = useColorScheme()
const theme = defaultTheme || (colorScheme === 'dark' ? 'dark' : 'light')
return (
<TamaguiProvider config={config} defaultTheme={theme} {...rest}>
<ToastProvider swipeDirection="horizontal" duration={6000} native={isWeb ? [] : ['mobile']}>
{children}
<CustomToast />
<ToastViewport />
</ToastProvider>
</TamaguiProvider>
)
}

View File

@@ -0,0 +1 @@
export { SafeAreaProvider as SafeArea } from 'react-native-safe-area-context'

View File

@@ -0,0 +1,10 @@
// on Web, we don't use React Navigation, so we are going to avoid the safe area provider
// instead, we just have a no-op here
// for more, see: https://solito.dev/recipes/tree-shaking
// if you need safe area hooks yourself, you can implement this yourself
// however, you may be better off using the CSS selector for env(safe-area-inset-top) on Web
// for more, see the `./use-safe-area.web.ts` file
export const SafeArea = ({ children }: { children: React.ReactElement }) => <>{children}</>

View File

@@ -0,0 +1,6 @@
import { useSafeAreaInsets } from 'react-native-safe-area-context'
const useSafeArea = useSafeAreaInsets
// `export { useSafeAreaInsets as useSafeArea }` breaks autoimport, so do this instead
export { useSafeArea }

View File

@@ -0,0 +1,31 @@
// I don't use the real useSafeAreaInsets() hook, since
// 1) the SafeAreaProvider forces you to render null on Web until it measures
// 2) you might not need to support it, unless you're doing landscape stuff
// 3) react-native-safe-area-context has a massive import on Web
// see: https://github.com/th3rdwave/react-native-safe-area-context/pull/189#issuecomment-815274313
// 4) most importantly, I think you can just use the env(safe-area-inset-bottom) CSS variable instead
// after all, safe area code is few-and-far-between, so if you have to write some platform-speciifc code for it,
// that is probably better than a massive bundle size for little benefit
import type { useSafeArea as nativeHook } from './use-safe-area'
const area = {
bottom: 0,
left: 0,
right: 0,
top: 0,
// you could also use CSS env variables like below:
// but you'll have to be sure to override the types for `useSafeArea`
// and make sure to never add numbers and strings when you consue useSafeArea
// just keep in mind that the env() doesn't work on older browsers I think
// top: `env(safe-area-inset-top)`,
// right: `env(safe-area-inset-right)`,
// bottom: `env(safe-area-inset-bottom)`,
// left: `env(safe-area-inset-left)`,
}
export function useSafeArea(): ReturnType<typeof nativeHook> {
return area
}

View File

@@ -0,0 +1,13 @@
{
"extends": "../../tsconfig.base",
"include": ["**/*.ts", "**/*.tsx"],
"compilerOptions": {
"composite": true,
"jsx": "react-jsx",
"paths": {
"app/*": ["./packages/app/*"],
"@my/ui/*": ["./packages/ui/*"]
}
},
"references": []
}

7
packages/app/types.d.ts vendored Normal file
View File

@@ -0,0 +1,7 @@
import { config } from '@my/config'
export type Conf = typeof config
declare module '@my/ui' {
interface TamaguiCustomConfig extends Conf {}
}

View File

@@ -0,0 +1,28 @@
{
"name": "@my/config",
"version": "0.0.1",
"sideEffects": [
"*.css"
],
"private": true,
"types": "./src",
"main": "src/index.ts",
"files": [
"types",
"dist"
],
"scripts": {
"build": "tamagui-build --skip-types",
"watch": "tamagui-build --skip-types --watch"
},
"dependencies": {
"@tamagui/animations-react-native": "^1.132.18",
"@tamagui/font-inter": "^1.132.18",
"@tamagui/shorthands": "^1.132.18",
"@tamagui/themes": "^1.132.18",
"tamagui": "^1.132.18"
},
"devDependencies": {
"@tamagui/build": "^1.132.18"
}
}

View File

@@ -0,0 +1,36 @@
import { createAnimations } from '@tamagui/animations-react-native'
export const animations = createAnimations({
'100ms': {
type: 'timing',
duration: 100,
},
bouncy: {
damping: 9,
mass: 0.9,
stiffness: 150,
},
lazy: {
damping: 18,
stiffness: 50,
},
medium: {
damping: 15,
stiffness: 120,
mass: 1,
},
slow: {
damping: 15,
stiffness: 40,
},
quick: {
damping: 20,
mass: 1.2,
stiffness: 250,
},
tooltip: {
damping: 10,
mass: 0.9,
stiffness: 100,
},
})

View File

@@ -0,0 +1,45 @@
import { createInterFont } from '@tamagui/font-inter'
export const headingFont = createInterFont({
size: {
6: 15,
},
transform: {
6: 'uppercase',
7: 'none',
},
weight: {
6: '400',
7: '700',
},
color: {
6: '$colorFocus',
7: '$color',
},
letterSpacing: {
5: 2,
6: 1,
7: 0,
8: -1,
9: -2,
10: -3,
12: -4,
14: -5,
15: -6,
},
face: {
700: { normal: 'InterBold' },
},
})
export const bodyFont = createInterFont(
{
face: {
700: { normal: 'InterBold' },
},
},
{
sizeSize: (size) => Math.round(size * 1.1),
sizeLineHeight: (size) => Math.round(size * 1.1 + (size > 20 ? 10 : 10)),
}
)

View File

@@ -0,0 +1 @@
export * from './tamagui.config'

View File

@@ -0,0 +1,17 @@
import { defaultConfig } from '@tamagui/config/v4'
import { createTamagui } from 'tamagui'
import { bodyFont, headingFont } from './fonts'
import { animations } from './animations'
export const config = createTamagui({
...defaultConfig,
animations,
fonts: {
body: bodyFont,
heading: headingFont,
},
settings:{
...defaultConfig.settings,
onlyAllowShorthands: false
}
})

5
packages/ui/.gitignore vendored Normal file
View File

@@ -0,0 +1,5 @@
dist/
.DS_Store
THUMBS_DB
node_modules/
types/

27
packages/ui/package.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "@my/ui",
"version": "0.0.1",
"sideEffects": [
"*.css"
],
"private": true,
"types": "./src",
"main": "src/index.tsx",
"module:jsx": "src",
"files": [
"types",
"dist"
],
"scripts": {
"build": "tamagui-build --skip-types",
"watch": "tamagui-build --skip-types --watch"
},
"dependencies": {
"@my/config": "0.0.1",
"@tamagui/toast": "^1.132.18",
"tamagui": "^1.132.18"
},
"devDependencies": {
"@tamagui/build": "^1.132.18"
}
}

View File

@@ -0,0 +1,11 @@
import Constants, { ExecutionEnvironment } from 'expo-constants'
import { NativeToast as Toast } from './NativeToast'
const isExpo = Constants.executionEnvironment === ExecutionEnvironment.StoreClient
export const CustomToast = () => {
if (isExpo) {
return null
}
return <Toast />
}

View File

@@ -0,0 +1,14 @@
import { YStack, styled } from 'tamagui'
export const MyComponent = styled(YStack, {
name: 'MyComponent',
bg: 'red',
variants: {
blue: {
true: {
bg: 'blue',
},
},
} as const,
})

View File

@@ -0,0 +1,29 @@
import { Toast, useToastState } from '@tamagui/toast'
import { YStack } from 'tamagui'
export const NativeToast = () => {
const currentToast = useToastState()
if (!currentToast || currentToast.isHandledNatively) {
return null
}
return (
<Toast
key={currentToast.id}
duration={currentToast.duration}
viewportName={currentToast.viewportName}
enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
exitStyle={{ opacity: 0, scale: 1, y: -20 }}
y={0}
opacity={1}
scale={1}
animation="quick"
>
<YStack py="$1.5" px="$2">
<Toast.Title lineHeight="$1">{currentToast.title}</Toast.Title>
{!!currentToast.message && <Toast.Description>{currentToast.message}</Toast.Description>}
</YStack>
</Toast>
)
}

View File

@@ -0,0 +1,9 @@
import { Anchor, Button } from 'tamagui'
export const SwitchRouterButton = ({ pagesMode = false }: { pagesMode?: boolean }) => {
return (
<Anchor text="center" color="$color12" href={pagesMode ? '/' : '/pages-example'}>
<Button>Change router: {pagesMode ? 'pages' : 'app'}</Button>
</Anchor>
)
}

View File

@@ -0,0 +1,16 @@
import { useState } from 'react'
import { Button, useIsomorphicLayoutEffect } from 'tamagui'
import { useThemeSetting, useRootTheme } from '@tamagui/next-theme'
export const SwitchThemeButton = () => {
const themeSetting = useThemeSetting()
const [theme] = useRootTheme()
const [clientTheme, setClientTheme] = useState<string | undefined>('light')
useIsomorphicLayoutEffect(() => {
setClientTheme(themeSetting.forcedTheme || themeSetting.current || theme)
}, [themeSetting.current, themeSetting.resolvedTheme])
return <Button onPress={themeSetting.toggle}>Change theme: {clientTheme}</Button>
}

View File

@@ -0,0 +1,7 @@
export * from 'tamagui'
export * from '@tamagui/toast'
export * from './MyComponent'
export { config } from '@my/config'
export * from './CustomToast'
export * from './SwitchThemeButton'
export * from './SwitchRouterButton'

7
packages/ui/src/types.d.ts vendored Normal file
View File

@@ -0,0 +1,7 @@
import { config } from '@my/config'
export type Conf = typeof config
declare module 'tamagui' {
interface TamaguiCustomConfig extends Conf {}
}

View File

@@ -0,0 +1,9 @@
{
"extends": "../../tsconfig.base",
"include": ["**/*.ts", "**/*.tsx", "../config/src/tamagui.config.ts"],
"compilerOptions": {
"composite": true,
"jsx": "react-jsx"
},
"references": []
}

35
tsconfig.base.json Normal file
View File

@@ -0,0 +1,35 @@
{
"compilerOptions": {
"baseUrl": ".",
"rootDir": ".",
"importHelpers": true,
"allowJs": false,
"allowSyntheticDefaultImports": true,
"downlevelIteration": true,
"esModuleInterop": true,
"preserveSymlinks": true,
"incremental": true,
"jsx": "react-jsx",
"module": "system",
"moduleResolution": "node",
"noEmitOnError": false,
"noImplicitAny": false,
"noImplicitReturns": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"useUnknownInCatchVariables": false,
"preserveConstEnums": true,
// DONT DO THIS so jsdoc will remain
"removeComments": false,
"skipLibCheck": true,
"sourceMap": false,
"strictNullChecks": true,
"target": "es2020",
"types": ["node"],
"lib": ["dom", "esnext"]
},
"exclude": ["_"],
"typeAcquisition": {
"enable": true
}
}

20
tsconfig.json Normal file
View File

@@ -0,0 +1,20 @@
{
"compilerOptions": {
"esModuleInterop": true,
"strictNullChecks": true,
"noUncheckedIndexedAccess": true,
"paths": {
"app/*": ["./packages/app/*"],
"@my/ui/*": ["./packages/ui/*"]
}
},
"extends": "./tsconfig.base",
"exclude": [
"**/node_modules",
"**/dist",
"**/types",
"apps/next/out",
"apps/next/.next",
"apps/next/.tamagui"
]
}

15
turbo.json Normal file
View File

@@ -0,0 +1,15 @@
{
"$schema": "https://turborepo.org/schema.json",
"globalEnv": ["DISABLE_EXTRACTION", "NODE_ENV", "EAS_BUILD_PLATFORM"],
"pipeline": {
"build": {
"env": ["DISABLE_EXTRACTION", "NODE_ENV", "EAS_BUILD_PLATFORM"],
"dependsOn": ["^build"],
"outputs": [".next/**", "!.next/cache/**", "build/**", "node_modules/.cache/metro/**"]
},
"dev": {
"cache": false,
"persistent": true
}
}
}

11
vitest.config.mts Normal file
View File

@@ -0,0 +1,11 @@
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
poolOptions: {
threads: {
singleThread: true,
},
},
},
})

17327
yarn.lock Normal file

File diff suppressed because it is too large Load Diff