@react-spectrum/s2 0.9.2 → 0.10.0

package/style/dist/spectrum-theme.mjs

@@ -2243,11 +2243,20 @@ const $27684d56c53d4b5c$var$timingFunction = {
 };
 let $27684d56c53d4b5c$var$durationValue = (value)=>typeof value === 'number' ? value + 'ms' : value;
 const $27684d56c53d4b5c$var$fontWeightBase = {
-    light: '300',
     normal: '400',
-    medium: '500',
-    bold: '700',
-    'extra-bold': '800',
+    medium: {
+        default: '500',
+        ':lang(ar, he)': '600' // Myriad does not have a 500 weight
+    },
+    bold: {
+        default: '700',
+        ':lang(ja, ko, zh)': '500' // Adobe Clean Han uses 500 as the bold weight
+    },
+    'extra-bold': {
+        default: '800',
+        ':lang(ja, ko, zh)': '700',
+        ':lang(ar, he)': '700' // Myriad does not have a 800 weight
+    },
     black: '900'
 };
 const $27684d56c53d4b5c$var$fontWeight = {
@@ -2273,168 +2282,60 @@ const $27684d56c53d4b5c$var$i18nFonts = {
     ':lang(zh)': "adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light', sans-serif",
     // TODO: are these fallbacks supposed to be different than above?
     ':lang(zh-hant)': "adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', sans-serif",
+    ':lang(zh-HK)': "adobe-clean-han-hong-kong, source-han-hong-kong, 'MingLiu', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', sans-serif",
     ':lang(zh-Hans, zh-CN, zh-SG)': "adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', sans-serif"
 };
 const $27684d56c53d4b5c$var$fontSize = {
     // The default font size scale is for use within UI components.
-    'ui-xs': {
-        "default": "0.6875rem",
-        touch: "0.8125rem"
-    },
-    'ui-sm': {
-        "default": "0.75rem",
-        touch: "0.9375rem"
-    },
-    ui: {
-        "default": "0.875rem",
-        touch: "1.0625rem"
-    },
-    'ui-lg': {
-        "default": "1rem",
-        touch: "1.1875rem"
-    },
-    'ui-xl': {
-        "default": "1.125rem",
-        touch: "1.375rem"
-    },
-    'ui-2xl': {
-        "default": "1.25rem",
-        touch: "1.5rem"
-    },
-    'ui-3xl': {
-        "default": "1.375rem",
-        touch: "1.6875rem"
-    },
-    'heading-2xs': {
-        "default": "0.875rem",
-        touch: "1.0625rem"
-    },
-    'heading-xs': {
-        "default": "1.125rem",
-        touch: "1.375rem"
-    },
-    'heading-sm': {
-        "default": "1.25rem",
-        touch: "1.5rem"
-    },
-    heading: {
-        "default": "1.375rem",
-        touch: "1.6875rem"
-    },
-    'heading-lg': {
-        "default": "1.75rem",
-        touch: "2.125rem"
-    },
-    'heading-xl': {
-        "default": "2.25rem",
-        touch: "2.75rem"
-    },
-    'heading-2xl': {
-        "default": "2.8125rem",
-        touch: "3.4375rem"
-    },
-    'heading-3xl': {
-        "default": "3.625rem",
-        touch: "4.375rem"
-    },
-    'title-xs': {
-        "default": "0.75rem",
-        touch: "0.9375rem"
-    },
-    'title-sm': {
-        "default": "0.875rem",
-        touch: "1.0625rem"
-    },
-    title: {
-        "default": "1rem",
-        touch: "1.1875rem"
-    },
-    'title-lg': {
-        "default": "1.125rem",
-        touch: "1.375rem"
-    },
-    'title-xl': {
-        "default": "1.25rem",
-        touch: "1.5rem"
-    },
-    'title-2xl': {
-        "default": "1.375rem",
-        touch: "1.6875rem"
-    },
-    'title-3xl': {
-        "default": "1.5625rem",
-        touch: "1.9375rem"
-    },
+    'ui-xs': -2,
+    'ui-sm': -1,
+    ui: 0,
+    'ui-lg': 1,
+    'ui-xl': 2,
+    'ui-2xl': 3,
+    'ui-3xl': 4,
+    'heading-2xs': 0,
+    'heading-xs': 2,
+    'heading-sm': 3,
+    heading: 4,
+    'heading-lg': 6,
+    'heading-xl': 8,
+    'heading-2xl': 10,
+    'heading-3xl': 12,
+    'title-xs': -1,
+    'title-sm': 0,
+    title: 1,
+    'title-lg': 2,
+    'title-xl': 3,
+    'title-2xl': 4,
+    'title-3xl': 5,
     // Body is for large blocks of text, e.g. paragraphs, not in UI components.
-    'body-2xs': {
-        "default": "0.6875rem",
-        touch: "0.8125rem"
-    },
-    'body-xs': {
-        "default": "0.75rem",
-        touch: "0.9375rem"
-    },
-    'body-sm': {
-        "default": "0.875rem",
-        touch: "1.0625rem"
-    },
-    body: {
-        "default": "1rem",
-        touch: "1.1875rem"
-    },
-    'body-lg': {
-        "default": "1.125rem",
-        touch: "1.375rem"
-    },
-    'body-xl': {
-        "default": "1.25rem",
-        touch: "1.5rem"
-    },
-    'body-2xl': {
-        "default": "1.375rem",
-        touch: "1.6875rem"
-    },
-    'body-3xl': {
-        "default": "1.5625rem",
-        touch: "1.9375rem"
-    },
-    'detail-sm': {
-        "default": "0.75rem",
-        touch: "0.9375rem"
-    },
-    detail: {
-        "default": "0.875rem",
-        touch: "1.0625rem"
-    },
-    'detail-lg': {
-        "default": "1rem",
-        touch: "1.1875rem"
-    },
-    'detail-xl': {
-        "default": "1.125rem",
-        touch: "1.375rem"
-    },
-    'code-xs': {
-        "default": "0.75rem",
-        touch: "0.9375rem"
-    },
-    'code-sm': {
-        "default": "0.875rem",
-        touch: "1.0625rem"
-    },
-    code: {
-        "default": "1rem",
-        touch: "1.1875rem"
-    },
-    'code-lg': {
-        "default": "1.125rem",
-        touch: "1.375rem"
-    },
-    'code-xl': {
-        "default": "1.25rem",
-        touch: "1.5rem"
-    }
+    'body-2xs': -2,
+    'body-xs': -1,
+    'body-sm': 0,
+    body: 1,
+    'body-lg': 2,
+    'body-xl': 3,
+    'body-2xl': 4,
+    'body-3xl': 5,
+    'detail-sm': -1,
+    detail: 0,
+    'detail-lg': 1,
+    'detail-xl': 2,
+    'code-xs': -1,
+    'code-sm': 0,
+    code: 1,
+    'code-lg': 2,
+    'code-xl': 3
 };
+// Line heights linearly interpolate between 1.3 and 1.15 for font sizes between 10 and 32, rounded to the nearest 2px.
+// Text above 32px always has a line height of 1.15.
+const $27684d56c53d4b5c$var$fontSizeCalc = 'var(--s2-font-size-base, 14) * var(--fs)';
+const $27684d56c53d4b5c$var$minFontScale = 1.15;
+const $27684d56c53d4b5c$var$maxFontScale = 1.3;
+const $27684d56c53d4b5c$var$minFontSize = 10;
+const $27684d56c53d4b5c$var$maxFontSize = 32;
+const $27684d56c53d4b5c$var$lineHeightCalc = `round(1em * (${$27684d56c53d4b5c$var$minFontScale} + (1 - ((min(${$27684d56c53d4b5c$var$maxFontSize}, ${$27684d56c53d4b5c$var$fontSizeCalc}) - ${$27684d56c53d4b5c$var$minFontSize})) / ${$27684d56c53d4b5c$var$maxFontSize - $27684d56c53d4b5c$var$minFontSize}) * ${($27684d56c53d4b5c$var$maxFontScale - $27684d56c53d4b5c$var$minFontScale).toFixed(2)}), 2px)`;
 const $27684d56c53d4b5c$export$1d567c320f4763bc = (0, $1619a4f0ddc7ccfb$export$25d302a5b900a763)({
     properties: {
         // colors
@@ -3045,16 +2946,24 @@ const $27684d56c53d4b5c$export$1d567c320f4763bc = (0, $1619a4f0ddc7ccfb$export$2
         // text
         fontFamily: {
             sans: {
-                default: 'adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif',
+                default: 'var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif',
                 ...$27684d56c53d4b5c$var$i18nFonts
             },
             serif: {
-                default: 'adobe-clean-serif, "Source Serif", Georgia, serif',
+                default: 'var(--s2-font-family-serif, adobe-clean-spectrum-srf-vf), adobe-clean-serif, "Source Serif", Georgia, serif',
                 ...$27684d56c53d4b5c$var$i18nFonts
             },
             code: 'source-code-pro, "Source Code Pro", Monaco, monospace'
         },
-        fontSize: $27684d56c53d4b5c$var$fontSize,
+        fontSize: new (0, $1619a4f0ddc7ccfb$export$1b6028cfca42adca)([
+            'fontSize',
+            'lineHeight'
+        ], (value)=>{
+            return {
+                '--fs': `pow(1.125, ${value})`,
+                fontSize: `round(${$27684d56c53d4b5c$var$fontSizeCalc} / 16 * 1rem, 1px)`
+            };
+        }, $27684d56c53d4b5c$var$fontSize),
         fontWeight: new (0, $1619a4f0ddc7ccfb$export$1b6028cfca42adca)([
             'fontWeight',
             'fontVariationSettings',
@@ -3062,6 +2971,7 @@ const $27684d56c53d4b5c$export$1d567c320f4763bc = (0, $1619a4f0ddc7ccfb$export$2
         ], (value)=>{
             return {
                 // Set font-variation-settings in addition to font-weight to work around typekit issue.
+                // (This was fixed, but leaving for backward compatibility for now.)
                 fontVariationSettings: value === 'inherit' ? 'inherit' : `"wght" ${value}`,
                 fontWeight: value,
                 fontSynthesisWeight: 'none'
@@ -3070,28 +2980,36 @@ const $27684d56c53d4b5c$export$1d567c320f4763bc = (0, $1619a4f0ddc7ccfb$export$2
         lineHeight: {
             // See https://spectrum.corp.adobe.com/page/typography/#Line-height
             ui: {
-                default: 1.3,
-                ':lang(ja, ko, zh, zh-Hant, zh-Hans)': 1.5
+                // Calculate line-height based on font size.
+                default: $27684d56c53d4b5c$var$lineHeightCalc,
+                // Arabic and hebrew use the old line-height for now since they are on Myriad instead of Adobe Clean.
+                ':lang(ar, he)': 1.3,
+                // CJK fonts use a larger line-height.
+                ':lang(ja, ko, zh, zh-Hant, zh-Hans, zh-CN, zh-SG)': 1.5
             },
             heading: {
-                default: 1.3,
-                ':lang(ja, ko, zh, zh-Hant, zh-Hans)': 1.5
+                default: $27684d56c53d4b5c$var$lineHeightCalc,
+                ':lang(ar, he)': 1.3,
+                ':lang(ja, ko, zh, zh-Hant, zh-Hans, zh-CN, zh-SG)': 1.5
             },
             title: {
-                default: 1.3,
-                ':lang(ja, ko, zh, zh-Hant, zh-Hans)': 1.5
+                default: $27684d56c53d4b5c$var$lineHeightCalc,
+                ':lang(ar, he)': 1.3,
+                ':lang(ja, ko, zh, zh-Hant, zh-Hans, zh-CN, zh-SG)': 1.5
             },
             body: {
+                // Body text uses spacious line height, 1.5 for all font sizes.
                 default: 1.5,
-                ':lang(ja, ko, zh, zh-Hant, zh-Hans)': 1.7
+                ':lang(ja, ko, zh, zh-Hant, zh-Hans, zh-CN, zh-SG)': 1.7
             },
             detail: {
-                default: 1.3,
-                ':lang(ja, ko, zh, zh-Hant, zh-Hans)': 1.5
+                default: $27684d56c53d4b5c$var$lineHeightCalc,
+                ':lang(ar, he)': 1.3,
+                ':lang(ja, ko, zh, zh-Hant, zh-Hans, zh-CN, zh-SG)': 1.5
             },
             code: {
                 default: 1.5,
-                ':lang(ja, ko, zh, zh-Hant, zh-Hans)': 1.7
+                ':lang(ja, ko, zh, zh-Hant, zh-Hans, zh-CN, zh-SG)': 1.7
             }
         },
         listStyleType: [
@@ -3338,6 +3256,10 @@ const $27684d56c53d4b5c$export$1d567c320f4763bc = (0, $1619a4f0ddc7ccfb$export$2
         ],
         animationIterationCount: new (0, $1619a4f0ddc7ccfb$export$d03475ad9df06cd2)('animationIterationCount'),
         animationTimingFunction: $27684d56c53d4b5c$var$timingFunction,
+        animationPlayState: [
+            'paused',
+            'running'
+        ],
         // layout
         display: [
             'block',
@@ -3662,6 +3584,10 @@ const $27684d56c53d4b5c$export$1d567c320f4763bc = (0, $1619a4f0ddc7ccfb$export$2
             'isolate',
             'isolate-override',
             'plaintext'
+        ],
+        caretColor: [
+            'auto',
+            'transparent'
         ]
     },
     shorthands: {