feat: 重构前端架构并添加主题支持
删除旧的示例代码和资源文件 添加新的主题样式和全局CSS配置 更新Tauri窗口配置和权限 引入SolidJS路由并优化入口文件
This commit is contained in:
Vixalie
116
src/App.css
116
src/App.css
@@ -1,116 +0,0 @@
|
||||
.logo.vite:hover {
|
||||
filter: drop-shadow(0 0 2em #747bff);
|
||||
}
|
||||
|
||||
.logo.solid:hover {
|
||||
filter: drop-shadow(0 0 2em #2f5d90);
|
||||
}
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color: #0f0f0f;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0;
|
||||
padding-top: 10vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: 0.75s;
|
||||
}
|
||||
|
||||
.logo.tauri:hover {
|
||||
filter: drop-shadow(0 0 2em #24c8db);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: #0f0f0f;
|
||||
background-color: #ffffff;
|
||||
transition: border-color 0.25s;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #396cd8;
|
||||
}
|
||||
button:active {
|
||||
border-color: #396cd8;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#greet-input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color: #f6f6f6;
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #24c8db;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
color: #ffffff;
|
||||
background-color: #0f0f0f98;
|
||||
}
|
||||
button:active {
|
||||
background-color: #0f0f0f69;
|
||||
}
|
||||
}
|
||||
51
src/App.tsx
51
src/App.tsx
@@ -1,51 +0,0 @@
|
||||
import { createSignal } from "solid-js";
|
||||
import logo from "./assets/logo.svg";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
const [greetMsg, setGreetMsg] = createSignal("");
|
||||
const [name, setName] = createSignal("");
|
||||
|
||||
async function greet() {
|
||||
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
|
||||
setGreetMsg(await invoke("greet", { name: name() }));
|
||||
}
|
||||
|
||||
return (
|
||||
<main class="container">
|
||||
<h1>Welcome to Tauri + Solid</h1>
|
||||
|
||||
<div class="row">
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo vite" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://tauri.app" target="_blank">
|
||||
<img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
|
||||
</a>
|
||||
<a href="https://solidjs.com" target="_blank">
|
||||
<img src={logo} class="logo solid" alt="Solid logo" />
|
||||
</a>
|
||||
</div>
|
||||
<p>Click on the Tauri, Vite, and Solid logos to learn more.</p>
|
||||
|
||||
<form
|
||||
class="row"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
greet();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="greet-input"
|
||||
onChange={(e) => setName(e.currentTarget.value)}
|
||||
placeholder="Enter a name..."
|
||||
/>
|
||||
<button type="submit">Greet</button>
|
||||
</form>
|
||||
<p>{greetMsg()}</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
0
src/assets/.gitkeep
Normal file
0
src/assets/.gitkeep
Normal file
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
16
src/index.css
Normal file
16
src/index.css
Normal file
@@ -0,0 +1,16 @@
|
||||
@import 'tailwindcss';
|
||||
@import './theme.css';
|
||||
|
||||
@layer base {
|
||||
html,
|
||||
body {
|
||||
@apply scheme-dark size-full bg-surface text-on-surface select-none overflow-hidden;
|
||||
&[data-scheme='dark'] {
|
||||
@apply scheme-dark;
|
||||
}
|
||||
}
|
||||
|
||||
#root {
|
||||
@apply size-full overflow-hidden;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,9 @@
|
||||
/* @refresh reload */
|
||||
import { render } from "solid-js/web";
|
||||
import App from "./App";
|
||||
// Load global styles first.
|
||||
import './index.css';
|
||||
|
||||
render(() => <App />, document.getElementById("root") as HTMLElement);
|
||||
// Load components.
|
||||
import { Router } from '@solidjs/router';
|
||||
import { render } from 'solid-js/web';
|
||||
|
||||
render(() => <Router />, document.getElementById('root') as HTMLElement);
|
||||
|
||||
277
src/theme.css
Normal file
277
src/theme.css
Normal file
@@ -0,0 +1,277 @@
|
||||
@theme inline {
|
||||
--color-primary: light-dark(#9d0035, #9d0035);
|
||||
--color-primary-hover: light-dark(#dd1b65, #dd1b65);
|
||||
--color-primary-active: light-dark(#7f0020, #7f0020);
|
||||
--color-primary-focus: light-dark(#ff5088, #ff5088);
|
||||
--color-primary-disabled: light-dark(#766568, #766568);
|
||||
--color-on-primary: light-dark(#ffffff, #ffffff);
|
||||
--color-on-primary-disabled: light-dark(#ffffff, #ffffff);
|
||||
--color-swatch-primary-10: light-dark(#2f0000, #2f0000);
|
||||
--color-swatch-primary-15: light-dark(#410000, #410000);
|
||||
--color-swatch-primary-20: light-dark(#530005, #530005);
|
||||
--color-swatch-primary-25: light-dark(#65000f, #65000f);
|
||||
--color-swatch-primary-30: light-dark(#76001a, #76001a);
|
||||
--color-swatch-primary-35: light-dark(#880026, #880026);
|
||||
--color-swatch-primary-40: light-dark(#9a0033, #9a0033);
|
||||
--color-swatch-primary-50: light-dark(#be004d, #be004d);
|
||||
--color-swatch-primary-60: light-dark(#e32469, #e32469);
|
||||
--color-swatch-primary-70: light-dark(#ff4f87, #ff4f87);
|
||||
--color-swatch-primary-75: light-dark(#ff6196, #ff6196);
|
||||
--color-swatch-primary-80: light-dark(#ff72a5, #ff72a5);
|
||||
--color-swatch-primary-85: light-dark(#ff83b5, #ff83b5);
|
||||
--color-swatch-primary-90: light-dark(#ff95c5, #ff95c5);
|
||||
--color-swatch-primary-95: light-dark(#ffa6d5, #ffa6d5);
|
||||
--color-swatch-primary-98: light-dark(#ffb0df, #ffb0df);
|
||||
--color-secondary: light-dark(#890073, #890073);
|
||||
--color-secondary-hover: light-dark(#c630aa, #c630aa);
|
||||
--color-secondary-active: light-dark(#6e005b, #6e005b);
|
||||
--color-secondary-focus: light-dark(#f05bd1, #f05bd1);
|
||||
--color-secondary-disabled: light-dark(#73666f, #73666f);
|
||||
--color-on-secondary: light-dark(#fffffe, #fffffe);
|
||||
--color-on-secondary-disabled: light-dark(#ffffff, #ffffff);
|
||||
--color-swatch-secondary-10: light-dark(#23001d, #23001d);
|
||||
--color-swatch-secondary-15: light-dark(#34002a, #34002a);
|
||||
--color-swatch-secondary-20: light-dark(#450038, #450038);
|
||||
--color-swatch-secondary-25: light-dark(#550046, #550046);
|
||||
--color-swatch-secondary-30: light-dark(#660054, #660054);
|
||||
--color-swatch-secondary-35: light-dark(#760063, #760063);
|
||||
--color-swatch-secondary-40: light-dark(#870071, #870071);
|
||||
--color-swatch-secondary-50: light-dark(#a90090, #a90090);
|
||||
--color-swatch-secondary-60: light-dark(#cc36af, #cc36af);
|
||||
--color-swatch-secondary-70: light-dark(#ef5ad0, #ef5ad0);
|
||||
--color-swatch-secondary-75: light-dark(#ff6be0, #ff6be0);
|
||||
--color-swatch-secondary-80: light-dark(#ff7cf1, #ff7cf1);
|
||||
--color-swatch-secondary-85: light-dark(#ff8cff, #ff8cff);
|
||||
--color-swatch-secondary-90: light-dark(#ff9dff, #ff9dff);
|
||||
--color-swatch-secondary-95: light-dark(#ffaeff, #ffaeff);
|
||||
--color-swatch-secondary-98: light-dark(#ffb8ff, #ffb8ff);
|
||||
--color-tertiary: light-dark(#a00000, #a00000);
|
||||
--color-tertiary-hover: light-dark(#e02b00, #e02b00);
|
||||
--color-tertiary-active: light-dark(#820000, #820000);
|
||||
--color-tertiary-focus: light-dark(#ff5b1f, #ff5b1f);
|
||||
--color-tertiary-disabled: light-dark(#776661, #776661);
|
||||
--color-on-tertiary: light-dark(#ffffff, #ffffff);
|
||||
--color-on-tertiary-disabled: light-dark(#ffffff, #ffffff);
|
||||
--color-swatch-tertiary-10: light-dark(#310000, #310000);
|
||||
--color-swatch-tertiary-15: light-dark(#440000, #440000);
|
||||
--color-swatch-tertiary-20: light-dark(#560000, #560000);
|
||||
--color-swatch-tertiary-25: light-dark(#680000, #680000);
|
||||
--color-swatch-tertiary-30: light-dark(#790000, #790000);
|
||||
--color-swatch-tertiary-35: light-dark(#8b0000, #8b0000);
|
||||
--color-swatch-tertiary-40: light-dark(#9d0000, #9d0000);
|
||||
--color-swatch-tertiary-50: light-dark(#c10000, #c10000);
|
||||
--color-swatch-tertiary-60: light-dark(#e63300, #e63300);
|
||||
--color-swatch-tertiary-70: light-dark(#ff591d, #ff591d);
|
||||
--color-swatch-tertiary-75: light-dark(#ff6b34, #ff6b34);
|
||||
--color-swatch-tertiary-80: light-dark(#ff7c47, #ff7c47);
|
||||
--color-swatch-tertiary-85: light-dark(#ff8e59, #ff8e59);
|
||||
--color-swatch-tertiary-90: light-dark(#ff9f6a, #ff9f6a);
|
||||
--color-swatch-tertiary-95: light-dark(#ffb07b, #ffb07b);
|
||||
--color-swatch-tertiary-98: light-dark(#ffba85, #ffba85);
|
||||
--color-accent: light-dark(#00685d, #00685d);
|
||||
--color-accent-hover: light-dark(#00a091, #00a091);
|
||||
--color-accent-active: light-dark(#004f47, #004f47);
|
||||
--color-accent-focus: light-dark(#00c7b6, #00c7b6);
|
||||
--color-accent-disabled: light-dark(#5c6f6c, #5c6f6c);
|
||||
--color-on-accent: light-dark(#ffffff, #ffffff);
|
||||
--color-on-accent-disabled: light-dark(#ffffff, #ffffff);
|
||||
--color-swatch-accent-10: light-dark(#000c0f, #000c0f);
|
||||
--color-swatch-accent-15: light-dark(#001b1b, #001b1b);
|
||||
--color-swatch-accent-20: light-dark(#002927, #002927);
|
||||
--color-swatch-accent-25: light-dark(#003833, #003833);
|
||||
--color-swatch-accent-30: light-dark(#004740, #004740);
|
||||
--color-swatch-accent-35: light-dark(#00564e, #00564e);
|
||||
--color-swatch-accent-40: light-dark(#00665c, #00665c);
|
||||
--color-swatch-accent-50: light-dark(#008578, #008578);
|
||||
--color-swatch-accent-60: light-dark(#00a596, #00a596);
|
||||
--color-swatch-accent-70: light-dark(#00c6b5, #00c6b5);
|
||||
--color-swatch-accent-75: light-dark(#00d7c5, #00d7c5);
|
||||
--color-swatch-accent-80: light-dark(#00e8d5, #00e8d5);
|
||||
--color-swatch-accent-85: light-dark(#00f9e6, #00f9e6);
|
||||
--color-swatch-accent-90: light-dark(#00fff6, #00fff6);
|
||||
--color-swatch-accent-95: light-dark(#00ffff, #00ffff);
|
||||
--color-swatch-accent-98: light-dark(#00ffff, #00ffff);
|
||||
--color-neutral: light-dark(#908f8e, #3c3a3a);
|
||||
--color-neutral-hover: light-dark(#b0afae, #71706f);
|
||||
--color-neutral-active: light-dark(#696968, #2a2828);
|
||||
--color-neutral-focus: light-dark(#c6c5c4, #989696);
|
||||
--color-neutral-disabled: light-dark(#a4a4a4, #5e5d5d);
|
||||
--color-on-neutral: light-dark(#000000, #ebebea);
|
||||
--color-on-neutral-disabled: light-dark(#000000, #ffffff);
|
||||
--color-neutral-variant: light-dark(#727170, #565554);
|
||||
--color-neutral-variant-hover: light-dark(#9b9999, #868484);
|
||||
--color-neutral-variant-active: light-dark(#535251, #3e3d3c);
|
||||
--color-neutral-variant-focus: light-dark(#b7b5b4, #a7a6a5);
|
||||
--color-neutral-variant-disabled: light-dark(#8c8c8c, #747474);
|
||||
--color-on-neutral-variant: light-dark(#ffffff, #ffffff);
|
||||
--color-on-neutral-variant-disabled: light-dark(#ffffff, #ffffff);
|
||||
--color-surface: light-dark(#f8f9f8, #040303);
|
||||
--color-surface-hover: light-dark(#fafbfa, #413f40);
|
||||
--color-surface-active: light-dark(#b8b9b8, #020202);
|
||||
--color-surface-focus: light-dark(#fbfcfb, #737172);
|
||||
--color-surface-disabled: light-dark(#fafafa, #292929);
|
||||
--color-on-surface: light-dark(#000000, #b7b7b6);
|
||||
--color-on-surface-disabled: light-dark(#000000, #b4b4b3);
|
||||
--color-surface-variant: light-dark(#cececd, #171616);
|
||||
--color-surface-variant-hover: light-dark(#dcdcdb, #545252);
|
||||
--color-surface-variant-active: light-dark(#989897, #0e0d0d);
|
||||
--color-surface-variant-focus: light-dark(#e6e6e5, #818080);
|
||||
--color-surface-variant-disabled: light-dark(#d7d7d7, #3d3d3d);
|
||||
--color-on-surface-variant: light-dark(#000000, #c4c4c3);
|
||||
--color-on-surface-variant-disabled: light-dark(#000000, #d1d1d0);
|
||||
--color-shadow: light-dark(#040303, #040303);
|
||||
--color-overlay: light-dark(#040304, #020202);
|
||||
--color-outline: light-dark(#0b090a, #040304);
|
||||
--color-outline-variant: light-dark(#0f0e0e, #010101);
|
||||
--color-progressive: light-dark(#9c0000, #9c0000);
|
||||
--color-progressive-hover: light-dark(#dc3021, #dc3021);
|
||||
--color-progressive-active: light-dark(#7f0000, #7f0000);
|
||||
--color-progressive-focus: light-dark(#ff5d49, #ff5d49);
|
||||
--color-progressive-disabled: light-dark(#766663, #766663);
|
||||
--color-on-progressive: light-dark(#ffffff, #ffffff);
|
||||
--color-on-progressive-disabled: light-dark(#ffffff, #ffffff);
|
||||
--color-swatch-progressive-10: light-dark(#2f0000, #2f0000);
|
||||
--color-swatch-progressive-15: light-dark(#410000, #410000);
|
||||
--color-swatch-progressive-20: light-dark(#530000, #530000);
|
||||
--color-swatch-progressive-25: light-dark(#650000, #650000);
|
||||
--color-swatch-progressive-30: light-dark(#770000, #770000);
|
||||
--color-swatch-progressive-35: light-dark(#880000, #880000);
|
||||
--color-swatch-progressive-40: light-dark(#9a0000, #9a0000);
|
||||
--color-swatch-progressive-50: light-dark(#be0000, #be0000);
|
||||
--color-swatch-progressive-60: light-dark(#e23627, #e23627);
|
||||
--color-swatch-progressive-70: light-dark(#ff5c48, #ff5c48);
|
||||
--color-swatch-progressive-75: light-dark(#ff6d58, #ff6d58);
|
||||
--color-swatch-progressive-80: light-dark(#ff7e68, #ff7e68);
|
||||
--color-swatch-progressive-85: light-dark(#ff8f77, #ff8f77);
|
||||
--color-swatch-progressive-90: light-dark(#ffa087, #ffa087);
|
||||
--color-swatch-progressive-95: light-dark(#ffb197, #ffb197);
|
||||
--color-swatch-progressive-98: light-dark(#ffbba1, #ffbba1);
|
||||
--color-defensive: light-dark(#004c89, #004c89);
|
||||
--color-defensive-hover: light-dark(#2d81c2, #2d81c2);
|
||||
--color-defensive-active: light-dark(#003470, #003470);
|
||||
--color-defensive-focus: light-dark(#55a6ea, #55a6ea);
|
||||
--color-defensive-disabled: light-dark(#646b71, #646b71);
|
||||
--color-on-defensive: light-dark(#ffffff, #ffffff);
|
||||
--color-on-defensive-disabled: light-dark(#ffffff, #ffffff);
|
||||
--color-swatch-defensive-10: light-dark(#00002e, #00002e);
|
||||
--color-swatch-defensive-15: light-dark(#00003d, #00003d);
|
||||
--color-swatch-defensive-20: light-dark(#00104b, #00104b);
|
||||
--color-swatch-defensive-25: light-dark(#001f5a, #001f5a);
|
||||
--color-swatch-defensive-30: light-dark(#002d69, #002d69);
|
||||
--color-swatch-defensive-35: light-dark(#003c78, #003c78);
|
||||
--color-swatch-defensive-40: light-dark(#004a87, #004a87);
|
||||
--color-swatch-defensive-50: light-dark(#0567a7, #0567a7);
|
||||
--color-swatch-defensive-60: light-dark(#3386c8, #3386c8);
|
||||
--color-swatch-defensive-70: light-dark(#54a5e9, #54a5e9);
|
||||
--color-swatch-defensive-75: light-dark(#64b5fa, #64b5fa);
|
||||
--color-swatch-defensive-80: light-dark(#74c5ff, #74c5ff);
|
||||
--color-swatch-defensive-85: light-dark(#84d5ff, #84d5ff);
|
||||
--color-swatch-defensive-90: light-dark(#95e6ff, #95e6ff);
|
||||
--color-swatch-defensive-95: light-dark(#a5f7ff, #a5f7ff);
|
||||
--color-swatch-defensive-98: light-dark(#afffff, #afffff);
|
||||
|
||||
--breakpoint-*: initial;
|
||||
--breakpoint-md: 600px;
|
||||
--breakpoint-exp: 840px;
|
||||
--breakpoint-lg: 1200px;
|
||||
--breakpoint-xl: 1600px;
|
||||
|
||||
--font-sans: 'Noto Sans CJK', 'Roboto', 'Inter', Avenir, Helvetica, Arial, ui-sans-serif,
|
||||
system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
--font-serif: 'Noto Serif CJK', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--base-font-size: 16px;
|
||||
|
||||
--text-*: initial;
|
||||
--text-display-lg: 3.5625rem;
|
||||
--text-display-lg--line-height: 4rem;
|
||||
--text-display-lg--font-weight: 400;
|
||||
|
||||
--text-display-md: 2.8125rem;
|
||||
--text-display-md--line-height: 3.25rem;
|
||||
--text-display-md--font-weight: 400;
|
||||
|
||||
--text-display-sm: 2.25rem;
|
||||
--text-display-sm--line-height: 2.75rem;
|
||||
--text-display-sm--font-weight: 400;
|
||||
|
||||
--text-headline-lg: 2rem;
|
||||
--text-headline-lg--line-height: 2.5rem;
|
||||
--text-headline-lg--font-weight: 400;
|
||||
|
||||
--text-headline-md: 1.75rem;
|
||||
--text-headline-md--line-height: 2.25rem;
|
||||
--text-headline-md--font-weight: 400;
|
||||
|
||||
--text-headline-sm: 1.5rem;
|
||||
--text-headline-sm--line-height: 2rem;
|
||||
--text-headline-sm--font-weight: 400;
|
||||
|
||||
--text-title-lg: 1.375rem;
|
||||
--text-title-lg--line-height: 1.75rem;
|
||||
--text-title-lg--font-weight: 400;
|
||||
|
||||
--text-title-md: 1rem;
|
||||
--text-title-md--line-height: 1.5rem;
|
||||
--text-title-md--font-weight: 400;
|
||||
|
||||
--text-title-sm: 0.875rem;
|
||||
--text-title-sm--line-height: 1.25rem;
|
||||
--text-title-sm--font-weight: 500;
|
||||
|
||||
--text-body-lg: 1rem;
|
||||
--text-body-lg--line-height: 1.5rem;
|
||||
--text-body-lg--font-weight: 400;
|
||||
|
||||
--text-body-md: 0.875rem;
|
||||
--text-body-md--line-height: 1.25rem;
|
||||
--text-body-md--font-weight: 400;
|
||||
|
||||
--text-body-sm: 0.75rem;
|
||||
--text-body-sm--line-height: 1rem;
|
||||
--text-body-sm--font-weight: 400;
|
||||
|
||||
--text-body-xs: 0.625rem;
|
||||
--text-body-xs--line-height: 0.75rem;
|
||||
--text-body-xs--font-weight: 400;
|
||||
|
||||
--text-label-lg: 0.875rem;
|
||||
--text-label-lg--line-height: 1.25rem;
|
||||
--text-label-lg--font-weight: 500;
|
||||
|
||||
--text-label-md: 0.75rem;
|
||||
--text-label-md--line-height: 1rem;
|
||||
--text-label-md--font-weight: 500;
|
||||
--text-label-md--text-transform: none;
|
||||
|
||||
--text-label-sm: 0.6875rem;
|
||||
--text-label-sm--line-height: 1rem;
|
||||
--text-label-sm--font-weight: 500;
|
||||
|
||||
--elevation-0: none;
|
||||
--elevation-1: 0 1px 3px 1px --alpha(var(--color-shadow) / 15%),
|
||||
0 1px 2px 0 --alpha(var(--color-shadow) / 30%);
|
||||
--elevation-2: 0 2px 6px 2px --alpha(var(--color-shadow) / 15%),
|
||||
0 1px 2px 0 --alpha(var(--color-shadow) / 30%);
|
||||
--elevation-3: 0 4px 8px 3px --alpha(var(--color-shadow) / 15%),
|
||||
0 1px 3px 0 --alpha(var(--color-shadow) / 30%);
|
||||
--elevation-4: 0 6px 10px 4px --alpha(var(--color-shadow) / 15%),
|
||||
0 2px 3px 0 --alpha(var(--color-shadow) / 30%);
|
||||
--elevation-5: 0 8px 12px 6px --alpha(var(--color-shadow) / 15%),
|
||||
0 4px 4px 0 --alpha(var(--color-shadow) / 30%);
|
||||
|
||||
--radius-*: initial;
|
||||
--basis-radius: 0.5;
|
||||
--radius-none: 0;
|
||||
--radius-xs: calc(0.25rem * var(--basis-radius));
|
||||
--radius-sm: calc(0.5rem * var(--basis-radius));
|
||||
--radius-md: calc(0.75rem * var(--basis-radius));
|
||||
--radius-lg: calc(1rem * var(--basis-radius));
|
||||
--radius-xl: calc(1.75rem * var(--basis-radius));
|
||||
--radius-full: calc(infinity * 1px);
|
||||
}
|
||||
|
||||
/* prettier-ignore */
|
||||
@utility elevation-* {
|
||||
box-shadow: --value(--elevation-*);
|
||||
}
|
||||
Reference in New Issue
Block a user