@seed-design/css 2.6.2 → 2.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/all.css +63 -61
- package/all.layered.css +63 -61
- package/all.layered.min.css +1 -1
- package/all.min.css +1 -1
- package/base.css +60 -56
- package/base.layered.css +60 -56
- package/base.layered.min.css +1 -1
- package/base.min.css +1 -1
- package/package.json +1 -1
- package/recipes/scroll-fog.css +2 -4
- package/recipes/scroll-fog.layered.css +3 -5
- package/theming/index.cjs +41 -5
- package/theming/index.mjs +41 -5
- package/vars/component/callout.d.ts +6 -2
- package/vars/component/callout.mjs +6 -2
- package/vars/component/image-frame-reaction-button.d.ts +26 -2
- package/vars/component/image-frame-reaction-button.mjs +26 -2
- package/vars/component/page-banner.d.ts +6 -2
- package/vars/component/page-banner.mjs +6 -2
- package/vars/component/scroll-fog.d.ts +69 -2
- package/vars/component/scroll-fog.mjs +69 -2
- package/vars/component/skeleton.d.ts +6 -2
- package/vars/component/skeleton.mjs +6 -2
- package/vars/component/top-navigation-icon-button.d.ts +10 -1
- package/vars/component/top-navigation-icon-button.mjs +10 -1
- package/vars/component/top-navigation-text-button.d.ts +10 -1
- package/vars/component/top-navigation-text-button.mjs +10 -1
- package/vars/component/top-navigation.d.ts +24 -5
- package/vars/component/top-navigation.mjs +23 -5
- package/vars/gradient.d.ts +2 -0
- package/vars/gradient.mjs +1 -0
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
@layer seed-components {
|
|
2
2
|
.seed-scroll-fog {
|
|
3
|
-
--scroll-fog-from-color: #0000;
|
|
4
|
-
--scroll-fog-to-color: #000;
|
|
5
3
|
width: 100%;
|
|
6
4
|
height: 100%;
|
|
7
|
-
-webkit-mask-image: linear-gradient(to bottom, var(--scroll-fog-
|
|
8
|
-
mask-image: linear-gradient(to bottom, var(--scroll-fog-
|
|
9
|
-
-webkit-mask-image: linear-gradient(to bottom, var(--scroll-fog-
|
|
5
|
+
-webkit-mask-image: linear-gradient(to bottom, #0000 0, #00000003 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .08), #00000005 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .16), #0000000d calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .22), #00000014 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .29), #00000021 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .35), #0000002e calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .41), #00000040 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .47), #00000052 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .53), #0006 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .59), #0000007a calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .65), #00000094 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .71), #000000ab calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .78), #000000c7 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .84), #000000e3 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .92), #000 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 1)), linear-gradient(to top, #0000 0, #00000003 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .08), #00000005 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .16), #0000000d calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .22), #00000014 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .29), #00000021 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .35), #0000002e calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .41), #00000040 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .47), #00000052 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .53), #0006 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .59), #0000007a calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .65), #00000094 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .71), #000000ab calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .78), #000000c7 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .84), #000000e3 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .92), #000 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 1)), linear-gradient(to right, #0000 0, #00000003 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .08), #00000005 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .16), #0000000d calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .22), #00000014 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .29), #00000021 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .35), #0000002e calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .41), #00000040 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .47), #00000052 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .53), #0006 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .59), #0000007a calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .65), #00000094 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .71), #000000ab calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .78), #000000c7 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .84), #000000e3 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .92), #000 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 1)), linear-gradient(to left, #0000 0, #00000003 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .08), #00000005 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .16), #0000000d calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .22), #00000014 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .29), #00000021 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .35), #0000002e calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .41), #00000040 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .47), #00000052 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .53), #0006 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .59), #0000007a calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .65), #00000094 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .71), #000000ab calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .78), #000000c7 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .84), #000000e3 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .92), #000 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 1));
|
|
6
|
+
mask-image: linear-gradient(to bottom, #0000 0, #00000003 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .08), #00000005 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .16), #0000000d calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .22), #00000014 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .29), #00000021 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .35), #0000002e calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .41), #00000040 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .47), #00000052 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .53), #0006 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .59), #0000007a calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .65), #00000094 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .71), #000000ab calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .78), #000000c7 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .84), #000000e3 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .92), #000 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 1)), linear-gradient(to top, #0000 0, #00000003 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .08), #00000005 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .16), #0000000d calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .22), #00000014 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .29), #00000021 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .35), #0000002e calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .41), #00000040 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .47), #00000052 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .53), #0006 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .59), #0000007a calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .65), #00000094 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .71), #000000ab calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .78), #000000c7 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .84), #000000e3 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .92), #000 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 1)), linear-gradient(to right, #0000 0, #00000003 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .08), #00000005 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .16), #0000000d calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .22), #00000014 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .29), #00000021 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .35), #0000002e calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .41), #00000040 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .47), #00000052 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .53), #0006 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .59), #0000007a calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .65), #00000094 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .71), #000000ab calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .78), #000000c7 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .84), #000000e3 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .92), #000 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 1)), linear-gradient(to left, #0000 0, #00000003 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .08), #00000005 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .16), #0000000d calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .22), #00000014 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .29), #00000021 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .35), #0000002e calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .41), #00000040 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .47), #00000052 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .53), #0006 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .59), #0000007a calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .65), #00000094 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .71), #000000ab calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .78), #000000c7 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .84), #000000e3 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .92), #000 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 1));
|
|
7
|
+
-webkit-mask-image: linear-gradient(to bottom, #0000 0, #00000003 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .08), #00000005 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .16), #0000000d calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .22), #00000014 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .29), #00000021 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .35), #0000002e calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .41), #00000040 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .47), #00000052 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .53), #0006 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .59), #0000007a calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .65), #00000094 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .71), #000000ab calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .78), #000000c7 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .84), #000000e3 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * .92), #000 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 1)), linear-gradient(to top, #0000 0, #00000003 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .08), #00000005 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .16), #0000000d calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .22), #00000014 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .29), #00000021 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .35), #0000002e calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .41), #00000040 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .47), #00000052 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .53), #0006 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .59), #0000007a calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .65), #00000094 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .71), #000000ab calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .78), #000000c7 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .84), #000000e3 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * .92), #000 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 1)), linear-gradient(to right, #0000 0, #00000003 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .08), #00000005 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .16), #0000000d calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .22), #00000014 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .29), #00000021 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .35), #0000002e calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .41), #00000040 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .47), #00000052 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .53), #0006 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .59), #0000007a calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .65), #00000094 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .71), #000000ab calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .78), #000000c7 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .84), #000000e3 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * .92), #000 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 1)), linear-gradient(to left, #0000 0, #00000003 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .08), #00000005 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .16), #0000000d calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .22), #00000014 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .29), #00000021 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .35), #0000002e calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .41), #00000040 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .47), #00000052 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .53), #0006 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .59), #0000007a calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .65), #00000094 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .71), #000000ab calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .78), #000000c7 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .84), #000000e3 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * .92), #000 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 1));
|
|
10
8
|
-webkit-mask-composite: source-in;
|
|
11
9
|
position: relative;
|
|
12
10
|
overflow: auto;
|
package/theming/index.cjs
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
const { DefaultColorModeValue, isValidColorMode } = require("./mode.cjs");
|
|
2
2
|
|
|
3
|
+
// Never write a comment inside the template literal below. It is emitted
|
|
4
|
+
// verbatim into an inline <script>, so a comment there is string content rather
|
|
5
|
+
// than source: the bundler minifying this module cannot reach it, and whether
|
|
6
|
+
// the host's HTML pipeline minifies an injected inline script is out of this
|
|
7
|
+
// package's hands. Every such comment ships on every page load. The rationale
|
|
8
|
+
// for what the snippet does lives here instead.
|
|
9
|
+
//
|
|
10
|
+
// `--seed-static-font-scale`, written outside the `fontScaling` gate: Android
|
|
11
|
+
// WebView multiplies every computed font-size and line-height by
|
|
12
|
+
// Configuration.fontScale whether or not the app opted in, so the `*-static`
|
|
13
|
+
// tokens have to divide it back out either way. The option picks whether SEED
|
|
14
|
+
// *follows* the user's scale, not whether the WebView applies one. iOS needs
|
|
15
|
+
// nothing here, because its scaling arrives through `-apple-system-body`
|
|
16
|
+
// inheritance, which the gate does control, and a literal px is never inflated.
|
|
17
|
+
// The measured scale stays uncapped because it is a divisor: the tokens cancel
|
|
18
|
+
// textZoom only by dividing by exactly what the WebView multiplied back in,
|
|
19
|
+
// whatever cap the native app chose.
|
|
20
|
+
//
|
|
21
|
+
// `data-seed-font-multiplier`, written on both platforms inside the gate: it
|
|
22
|
+
// reports how much SEED grew the text, not how large a step the user picked.
|
|
23
|
+
// On iOS the measurement is normalized to the web 16px baseline and then
|
|
24
|
+
// clamped to the cap iOS actually applies, the 1.35 that globalCss sets as
|
|
25
|
+
// `--seed-font-size-limit-max`; the Dynamic Type accessibility steps reach 3.1
|
|
26
|
+
// and would otherwise overstate it. On Android the token clamp bounds the same
|
|
27
|
+
// value to [`--seed-font-size-limit-min`, `--seed-font-size-limit-max`], so
|
|
28
|
+
// past the cap it stays deliberately below the raw scale measured above.
|
|
29
|
+
|
|
3
30
|
function generateThemingScript({ mode = DefaultColorModeValue, fontScaling = false }) {
|
|
4
31
|
if (!isValidColorMode(mode)) {
|
|
5
32
|
throw new Error(`Invalid color mode: ${mode}`);
|
|
@@ -42,6 +69,15 @@ function generateThemingScript({ mode = DefaultColorModeValue, fontScaling = fal
|
|
|
42
69
|
}
|
|
43
70
|
} catch (e) {}
|
|
44
71
|
|
|
72
|
+
var seedAndroidFontScale = 1;
|
|
73
|
+
try {
|
|
74
|
+
if (document.documentElement.dataset.seedPlatform === 'android') {
|
|
75
|
+
var rootSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
|
|
76
|
+
seedAndroidFontScale = rootSize > 0 ? rootSize / 16 : 1;
|
|
77
|
+
document.documentElement.style.setProperty('--seed-static-font-scale', seedAndroidFontScale.toString());
|
|
78
|
+
}
|
|
79
|
+
} catch (e) {}
|
|
80
|
+
|
|
45
81
|
try {
|
|
46
82
|
if (${fontScaling}) {
|
|
47
83
|
var platform = document.documentElement.dataset.seedPlatform;
|
|
@@ -56,8 +92,9 @@ function generateThemingScript({ mode = DefaultColorModeValue, fontScaling = fal
|
|
|
56
92
|
document.body.appendChild(tempEl);
|
|
57
93
|
var size = parseFloat(window.getComputedStyle(tempEl).fontSize);
|
|
58
94
|
document.body.removeChild(tempEl);
|
|
59
|
-
var
|
|
60
|
-
|
|
95
|
+
var raw = size > 0 ? (size / 16) * 0.9412 : 1;
|
|
96
|
+
var scale = Math.max(0.8, Math.min(1.35, raw));
|
|
97
|
+
document.documentElement.dataset.seedFontMultiplier = parseFloat(scale.toFixed(2)).toString();
|
|
61
98
|
} catch (e) {}
|
|
62
99
|
}
|
|
63
100
|
|
|
@@ -67,9 +104,8 @@ function generateThemingScript({ mode = DefaultColorModeValue, fontScaling = fal
|
|
|
67
104
|
applyIOSFontScaling();
|
|
68
105
|
}
|
|
69
106
|
} else if (platform === 'android') {
|
|
70
|
-
var
|
|
71
|
-
|
|
72
|
-
document.documentElement.dataset.seedFontMultiplier = parseFloat(scale.toFixed(2)).toString();
|
|
107
|
+
var applied = Math.max(0.8, Math.min(1.5, seedAndroidFontScale));
|
|
108
|
+
document.documentElement.dataset.seedFontMultiplier = parseFloat(applied.toFixed(2)).toString();
|
|
73
109
|
document.documentElement.dataset.seedFontScaling = 'enabled';
|
|
74
110
|
}
|
|
75
111
|
}
|
package/theming/index.mjs
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
import { DefaultColorModeValue, isValidColorMode } from "./mode.mjs";
|
|
2
2
|
|
|
3
|
+
// Never write a comment inside the template literal below. It is emitted
|
|
4
|
+
// verbatim into an inline <script>, so a comment there is string content rather
|
|
5
|
+
// than source: the bundler minifying this module cannot reach it, and whether
|
|
6
|
+
// the host's HTML pipeline minifies an injected inline script is out of this
|
|
7
|
+
// package's hands. Every such comment ships on every page load. The rationale
|
|
8
|
+
// for what the snippet does lives here instead.
|
|
9
|
+
//
|
|
10
|
+
// `--seed-static-font-scale`, written outside the `fontScaling` gate: Android
|
|
11
|
+
// WebView multiplies every computed font-size and line-height by
|
|
12
|
+
// Configuration.fontScale whether or not the app opted in, so the `*-static`
|
|
13
|
+
// tokens have to divide it back out either way. The option picks whether SEED
|
|
14
|
+
// *follows* the user's scale, not whether the WebView applies one. iOS needs
|
|
15
|
+
// nothing here, because its scaling arrives through `-apple-system-body`
|
|
16
|
+
// inheritance, which the gate does control, and a literal px is never inflated.
|
|
17
|
+
// The measured scale stays uncapped because it is a divisor: the tokens cancel
|
|
18
|
+
// textZoom only by dividing by exactly what the WebView multiplied back in,
|
|
19
|
+
// whatever cap the native app chose.
|
|
20
|
+
//
|
|
21
|
+
// `data-seed-font-multiplier`, written on both platforms inside the gate: it
|
|
22
|
+
// reports how much SEED grew the text, not how large a step the user picked.
|
|
23
|
+
// On iOS the measurement is normalized to the web 16px baseline and then
|
|
24
|
+
// clamped to the cap iOS actually applies, the 1.35 that globalCss sets as
|
|
25
|
+
// `--seed-font-size-limit-max`; the Dynamic Type accessibility steps reach 3.1
|
|
26
|
+
// and would otherwise overstate it. On Android the token clamp bounds the same
|
|
27
|
+
// value to [`--seed-font-size-limit-min`, `--seed-font-size-limit-max`], so
|
|
28
|
+
// past the cap it stays deliberately below the raw scale measured above.
|
|
29
|
+
|
|
3
30
|
export const generateThemingScript = ({ mode = DefaultColorModeValue, fontScaling = false }) => {
|
|
4
31
|
if (!isValidColorMode(mode)) {
|
|
5
32
|
throw new Error(`Invalid color mode: ${mode}`);
|
|
@@ -42,6 +69,15 @@ export const generateThemingScript = ({ mode = DefaultColorModeValue, fontScalin
|
|
|
42
69
|
}
|
|
43
70
|
} catch (e) {}
|
|
44
71
|
|
|
72
|
+
var seedAndroidFontScale = 1;
|
|
73
|
+
try {
|
|
74
|
+
if (document.documentElement.dataset.seedPlatform === 'android') {
|
|
75
|
+
var rootSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
|
|
76
|
+
seedAndroidFontScale = rootSize > 0 ? rootSize / 16 : 1;
|
|
77
|
+
document.documentElement.style.setProperty('--seed-static-font-scale', seedAndroidFontScale.toString());
|
|
78
|
+
}
|
|
79
|
+
} catch (e) {}
|
|
80
|
+
|
|
45
81
|
try {
|
|
46
82
|
if (${fontScaling}) {
|
|
47
83
|
var platform = document.documentElement.dataset.seedPlatform;
|
|
@@ -56,8 +92,9 @@ export const generateThemingScript = ({ mode = DefaultColorModeValue, fontScalin
|
|
|
56
92
|
document.body.appendChild(tempEl);
|
|
57
93
|
var size = parseFloat(window.getComputedStyle(tempEl).fontSize);
|
|
58
94
|
document.body.removeChild(tempEl);
|
|
59
|
-
var
|
|
60
|
-
|
|
95
|
+
var raw = size > 0 ? (size / 16) * 0.9412 : 1;
|
|
96
|
+
var scale = Math.max(0.8, Math.min(1.35, raw));
|
|
97
|
+
document.documentElement.dataset.seedFontMultiplier = parseFloat(scale.toFixed(2)).toString();
|
|
61
98
|
} catch (e) {}
|
|
62
99
|
}
|
|
63
100
|
|
|
@@ -67,9 +104,8 @@ export const generateThemingScript = ({ mode = DefaultColorModeValue, fontScalin
|
|
|
67
104
|
applyIOSFontScaling();
|
|
68
105
|
}
|
|
69
106
|
} else if (platform === 'android') {
|
|
70
|
-
var
|
|
71
|
-
|
|
72
|
-
document.documentElement.dataset.seedFontMultiplier = parseFloat(scale.toFixed(2)).toString();
|
|
107
|
+
var applied = Math.max(0.8, Math.min(1.5, seedAndroidFontScale));
|
|
108
|
+
document.documentElement.dataset.seedFontMultiplier = parseFloat(applied.toFixed(2)).toString();
|
|
73
109
|
document.documentElement.dataset.seedFontScaling = 'enabled';
|
|
74
110
|
}
|
|
75
111
|
}
|
|
@@ -199,7 +199,9 @@ export declare const vars: {
|
|
|
199
199
|
"toneMagic": {
|
|
200
200
|
"enabled": {
|
|
201
201
|
"root": {
|
|
202
|
-
"gradient":
|
|
202
|
+
"gradient": {
|
|
203
|
+
"serialized": "var(--seed-gradient-glow-magic)"
|
|
204
|
+
}
|
|
203
205
|
},
|
|
204
206
|
/** 아이콘은 Fill 타입 사용을 권장합니다. */
|
|
205
207
|
"prefixIcon": {
|
|
@@ -221,7 +223,9 @@ export declare const vars: {
|
|
|
221
223
|
},
|
|
222
224
|
"pressed": {
|
|
223
225
|
"root": {
|
|
224
|
-
"gradient":
|
|
226
|
+
"gradient": {
|
|
227
|
+
"serialized": "var(--seed-gradient-glow-magic-pressed)"
|
|
228
|
+
}
|
|
225
229
|
}
|
|
226
230
|
}
|
|
227
231
|
}
|
|
@@ -169,7 +169,9 @@ export const vars = {
|
|
|
169
169
|
"toneMagic": {
|
|
170
170
|
"enabled": {
|
|
171
171
|
"root": {
|
|
172
|
-
"gradient":
|
|
172
|
+
"gradient": {
|
|
173
|
+
"serialized": "var(--seed-gradient-glow-magic)"
|
|
174
|
+
}
|
|
173
175
|
},
|
|
174
176
|
"prefixIcon": {
|
|
175
177
|
"color": "var(--seed-color-fg-neutral)"
|
|
@@ -189,7 +191,9 @@ export const vars = {
|
|
|
189
191
|
},
|
|
190
192
|
"pressed": {
|
|
191
193
|
"root": {
|
|
192
|
-
"gradient":
|
|
194
|
+
"gradient": {
|
|
195
|
+
"serialized": "var(--seed-gradient-glow-magic-pressed)"
|
|
196
|
+
}
|
|
193
197
|
}
|
|
194
198
|
}
|
|
195
199
|
}
|
|
@@ -10,7 +10,19 @@ export declare const vars: {
|
|
|
10
10
|
},
|
|
11
11
|
/** lineIcon 아래에 내려가는 하트 아이콘입니다. */
|
|
12
12
|
"fillIcon": {
|
|
13
|
-
"gradient":
|
|
13
|
+
"gradient": {
|
|
14
|
+
"serialized": "var(--seed-color-palette-static-black-alpha-600) 0%, var(--seed-color-palette-static-black-alpha-600) 100%",
|
|
15
|
+
"stops": [
|
|
16
|
+
{
|
|
17
|
+
"color": "var(--seed-color-palette-static-black-alpha-600)",
|
|
18
|
+
"position": 0
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"color": "var(--seed-color-palette-static-black-alpha-600)",
|
|
22
|
+
"position": 1
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
},
|
|
14
26
|
/** 보이는 버튼 크기입니다. */
|
|
15
27
|
"size": "var(--seed-dimension-x6)",
|
|
16
28
|
"shadow": "0px 2px 4px 0px #00000026"
|
|
@@ -25,7 +37,19 @@ export declare const vars: {
|
|
|
25
37
|
"selected": {
|
|
26
38
|
/** lineIcon 아래에 내려가는 하트 아이콘입니다. */
|
|
27
39
|
"fillIcon": {
|
|
28
|
-
"gradient":
|
|
40
|
+
"gradient": {
|
|
41
|
+
"serialized": "#FF9A56 0%, #FF6600 100%",
|
|
42
|
+
"stops": [
|
|
43
|
+
{
|
|
44
|
+
"color": "#FF9A56",
|
|
45
|
+
"position": 0
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"color": "#FF6600",
|
|
49
|
+
"position": 1
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
}
|
|
29
53
|
},
|
|
30
54
|
/** fillIcon 위로 올라가는 하트 아이콘입니다. */
|
|
31
55
|
"lineIcon": {
|
|
@@ -6,7 +6,19 @@ export const vars = {
|
|
|
6
6
|
"targetSize": "var(--seed-dimension-x10)"
|
|
7
7
|
},
|
|
8
8
|
"fillIcon": {
|
|
9
|
-
"gradient":
|
|
9
|
+
"gradient": {
|
|
10
|
+
"serialized": "var(--seed-color-palette-static-black-alpha-600) 0%, var(--seed-color-palette-static-black-alpha-600) 100%",
|
|
11
|
+
"stops": [
|
|
12
|
+
{
|
|
13
|
+
"color": "var(--seed-color-palette-static-black-alpha-600)",
|
|
14
|
+
"position": 0
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"color": "var(--seed-color-palette-static-black-alpha-600)",
|
|
18
|
+
"position": 1
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
},
|
|
10
22
|
"size": "var(--seed-dimension-x6)",
|
|
11
23
|
"shadow": "0px 2px 4px 0px #00000026"
|
|
12
24
|
},
|
|
@@ -17,7 +29,19 @@ export const vars = {
|
|
|
17
29
|
},
|
|
18
30
|
"selected": {
|
|
19
31
|
"fillIcon": {
|
|
20
|
-
"gradient":
|
|
32
|
+
"gradient": {
|
|
33
|
+
"serialized": "#FF9A56 0%, #FF6600 100%",
|
|
34
|
+
"stops": [
|
|
35
|
+
{
|
|
36
|
+
"color": "#FF9A56",
|
|
37
|
+
"position": 0
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"color": "#FF6600",
|
|
41
|
+
"position": 1
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
}
|
|
21
45
|
},
|
|
22
46
|
"lineIcon": {
|
|
23
47
|
"color": "var(--seed-color-bg-transparent)"
|
|
@@ -353,7 +353,9 @@ export declare const vars: {
|
|
|
353
353
|
"toneMagicVariantWeak": {
|
|
354
354
|
"enabled": {
|
|
355
355
|
"root": {
|
|
356
|
-
"gradient":
|
|
356
|
+
"gradient": {
|
|
357
|
+
"serialized": "var(--seed-gradient-glow-magic)"
|
|
358
|
+
}
|
|
357
359
|
},
|
|
358
360
|
/** 아이콘은 Fill 타입 사용을 권장합니다. */
|
|
359
361
|
"prefixIcon": {
|
|
@@ -374,7 +376,9 @@ export declare const vars: {
|
|
|
374
376
|
},
|
|
375
377
|
"pressed": {
|
|
376
378
|
"root": {
|
|
377
|
-
"gradient":
|
|
379
|
+
"gradient": {
|
|
380
|
+
"serialized": "var(--seed-gradient-glow-magic-pressed)"
|
|
381
|
+
}
|
|
378
382
|
}
|
|
379
383
|
}
|
|
380
384
|
}
|
|
@@ -308,7 +308,9 @@ export const vars = {
|
|
|
308
308
|
"toneMagicVariantWeak": {
|
|
309
309
|
"enabled": {
|
|
310
310
|
"root": {
|
|
311
|
-
"gradient":
|
|
311
|
+
"gradient": {
|
|
312
|
+
"serialized": "var(--seed-gradient-glow-magic)"
|
|
313
|
+
}
|
|
312
314
|
},
|
|
313
315
|
"prefixIcon": {
|
|
314
316
|
"color": "var(--seed-color-fg-neutral)"
|
|
@@ -328,7 +330,9 @@ export const vars = {
|
|
|
328
330
|
},
|
|
329
331
|
"pressed": {
|
|
330
332
|
"root": {
|
|
331
|
-
"gradient":
|
|
333
|
+
"gradient": {
|
|
334
|
+
"serialized": "var(--seed-gradient-glow-magic-pressed)"
|
|
335
|
+
}
|
|
332
336
|
}
|
|
333
337
|
}
|
|
334
338
|
}
|
|
@@ -2,8 +2,75 @@ export declare const vars: {
|
|
|
2
2
|
"base": {
|
|
3
3
|
"enabled": {
|
|
4
4
|
"root": {
|
|
5
|
-
"
|
|
6
|
-
|
|
5
|
+
"gradient": {
|
|
6
|
+
"serialized": "var(--seed-gradient-fade-mask)",
|
|
7
|
+
"stops": [
|
|
8
|
+
{
|
|
9
|
+
"color": "#00000000",
|
|
10
|
+
"position": 0
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"color": "#00000003",
|
|
14
|
+
"position": 0.08
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"color": "#00000005",
|
|
18
|
+
"position": 0.16
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"color": "#0000000d",
|
|
22
|
+
"position": 0.22
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"color": "#00000014",
|
|
26
|
+
"position": 0.29
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"color": "#00000021",
|
|
30
|
+
"position": 0.35
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"color": "#0000002e",
|
|
34
|
+
"position": 0.41
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"color": "#00000040",
|
|
38
|
+
"position": 0.47
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"color": "#00000052",
|
|
42
|
+
"position": 0.53
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"color": "#00000066",
|
|
46
|
+
"position": 0.59
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"color": "#0000007a",
|
|
50
|
+
"position": 0.65
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"color": "#00000094",
|
|
54
|
+
"position": 0.71
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"color": "#000000ab",
|
|
58
|
+
"position": 0.78
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"color": "#000000c7",
|
|
62
|
+
"position": 0.84
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"color": "#000000e3",
|
|
66
|
+
"position": 0.92
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"color": "#000000ff",
|
|
70
|
+
"position": 1
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
},
|
|
7
74
|
"size": "20px"
|
|
8
75
|
}
|
|
9
76
|
}
|
|
@@ -2,8 +2,75 @@ export const vars = {
|
|
|
2
2
|
"base": {
|
|
3
3
|
"enabled": {
|
|
4
4
|
"root": {
|
|
5
|
-
"
|
|
6
|
-
|
|
5
|
+
"gradient": {
|
|
6
|
+
"serialized": "var(--seed-gradient-fade-mask)",
|
|
7
|
+
"stops": [
|
|
8
|
+
{
|
|
9
|
+
"color": "#00000000",
|
|
10
|
+
"position": 0
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"color": "#00000003",
|
|
14
|
+
"position": 0.08
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"color": "#00000005",
|
|
18
|
+
"position": 0.16
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"color": "#0000000d",
|
|
22
|
+
"position": 0.22
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"color": "#00000014",
|
|
26
|
+
"position": 0.29
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"color": "#00000021",
|
|
30
|
+
"position": 0.35
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"color": "#0000002e",
|
|
34
|
+
"position": 0.41
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"color": "#00000040",
|
|
38
|
+
"position": 0.47
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"color": "#00000052",
|
|
42
|
+
"position": 0.53
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"color": "#00000066",
|
|
46
|
+
"position": 0.59
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"color": "#0000007a",
|
|
50
|
+
"position": 0.65
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"color": "#00000094",
|
|
54
|
+
"position": 0.71
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"color": "#000000ab",
|
|
58
|
+
"position": 0.78
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"color": "#000000c7",
|
|
62
|
+
"position": 0.84
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"color": "#000000e3",
|
|
66
|
+
"position": 0.92
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"color": "#000000ff",
|
|
70
|
+
"position": 1
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
},
|
|
7
74
|
"size": "20px"
|
|
8
75
|
}
|
|
9
76
|
}
|
|
@@ -56,7 +56,9 @@ export declare const vars: {
|
|
|
56
56
|
"color": "var(--seed-color-palette-gray-200)"
|
|
57
57
|
},
|
|
58
58
|
"shimmer": {
|
|
59
|
-
"gradient":
|
|
59
|
+
"gradient": {
|
|
60
|
+
"serialized": "var(--seed-gradient-shimmer-neutral)"
|
|
61
|
+
}
|
|
60
62
|
}
|
|
61
63
|
}
|
|
62
64
|
},
|
|
@@ -69,7 +71,9 @@ export declare const vars: {
|
|
|
69
71
|
"color": "var(--seed-color-bg-magic-weak)"
|
|
70
72
|
},
|
|
71
73
|
"shimmer": {
|
|
72
|
-
"gradient":
|
|
74
|
+
"gradient": {
|
|
75
|
+
"serialized": "var(--seed-gradient-shimmer-magic)"
|
|
76
|
+
}
|
|
73
77
|
}
|
|
74
78
|
}
|
|
75
79
|
}
|
|
@@ -41,7 +41,9 @@ export const vars = {
|
|
|
41
41
|
"color": "var(--seed-color-palette-gray-200)"
|
|
42
42
|
},
|
|
43
43
|
"shimmer": {
|
|
44
|
-
"gradient":
|
|
44
|
+
"gradient": {
|
|
45
|
+
"serialized": "var(--seed-gradient-shimmer-neutral)"
|
|
46
|
+
}
|
|
45
47
|
}
|
|
46
48
|
}
|
|
47
49
|
},
|
|
@@ -51,7 +53,9 @@ export const vars = {
|
|
|
51
53
|
"color": "var(--seed-color-bg-magic-weak)"
|
|
52
54
|
},
|
|
53
55
|
"shimmer": {
|
|
54
|
-
"gradient":
|
|
56
|
+
"gradient": {
|
|
57
|
+
"serialized": "var(--seed-gradient-shimmer-magic)"
|
|
58
|
+
}
|
|
55
59
|
}
|
|
56
60
|
}
|
|
57
61
|
}
|
|
@@ -2,11 +2,20 @@ export declare const vars: {
|
|
|
2
2
|
"base": {
|
|
3
3
|
"enabled": {
|
|
4
4
|
"root": {
|
|
5
|
-
"size": "44px"
|
|
5
|
+
"size": "44px",
|
|
6
|
+
"cornerRadius": "var(--seed-radius-r2)",
|
|
7
|
+
"color": "var(--seed-color-bg-transparent)",
|
|
8
|
+
"colorDuration": "var(--seed-duration-color-transition)",
|
|
9
|
+
"colorTimingFunction": "var(--seed-timing-function-easing)"
|
|
6
10
|
},
|
|
7
11
|
"icon": {
|
|
8
12
|
"size": "24px"
|
|
9
13
|
}
|
|
14
|
+
},
|
|
15
|
+
"pressed": {
|
|
16
|
+
"root": {
|
|
17
|
+
"color": "var(--seed-color-bg-transparent-pressed)"
|
|
18
|
+
}
|
|
10
19
|
}
|
|
11
20
|
},
|
|
12
21
|
"toneLayer": {
|
|
@@ -2,11 +2,20 @@ export const vars = {
|
|
|
2
2
|
"base": {
|
|
3
3
|
"enabled": {
|
|
4
4
|
"root": {
|
|
5
|
-
"size": "44px"
|
|
5
|
+
"size": "44px",
|
|
6
|
+
"cornerRadius": "var(--seed-radius-r2)",
|
|
7
|
+
"color": "var(--seed-color-bg-transparent)",
|
|
8
|
+
"colorDuration": "var(--seed-duration-color-transition)",
|
|
9
|
+
"colorTimingFunction": "var(--seed-timing-function-easing)"
|
|
6
10
|
},
|
|
7
11
|
"icon": {
|
|
8
12
|
"size": "24px"
|
|
9
13
|
}
|
|
14
|
+
},
|
|
15
|
+
"pressed": {
|
|
16
|
+
"root": {
|
|
17
|
+
"color": "var(--seed-color-bg-transparent-pressed)"
|
|
18
|
+
}
|
|
10
19
|
}
|
|
11
20
|
},
|
|
12
21
|
"toneLayer": {
|
|
@@ -3,7 +3,11 @@ export declare const vars: {
|
|
|
3
3
|
"enabled": {
|
|
4
4
|
"root": {
|
|
5
5
|
"height": "44px",
|
|
6
|
-
"paddingX": "var(--seed-dimension-x2_5)"
|
|
6
|
+
"paddingX": "var(--seed-dimension-x2_5)",
|
|
7
|
+
"cornerRadius": "var(--seed-radius-r2)",
|
|
8
|
+
"color": "var(--seed-color-bg-transparent)",
|
|
9
|
+
"colorDuration": "var(--seed-duration-color-transition)",
|
|
10
|
+
"colorTimingFunction": "var(--seed-timing-function-easing)"
|
|
7
11
|
},
|
|
8
12
|
"label": {
|
|
9
13
|
"fontSize": "var(--seed-font-size-t5)",
|
|
@@ -14,6 +18,11 @@ export declare const vars: {
|
|
|
14
18
|
"maxLineHeightScale": "1.2",
|
|
15
19
|
"minLineHeightScale": "1"
|
|
16
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"pressed": {
|
|
23
|
+
"root": {
|
|
24
|
+
"color": "var(--seed-color-bg-transparent-pressed)"
|
|
25
|
+
}
|
|
17
26
|
}
|
|
18
27
|
},
|
|
19
28
|
"toneLayer": {
|