improving locale font-family using postCSS silent placeholders (#2057)

* improving locale font-family using postCSS silent placeholders for extend

* making the placeholder only font-family

* using the correct hebrew font from spectrum-dna

* small fix for vertical buttongroup story due to smaller font size

Co-authored-by: Daniel Lu <[email protected]>

Author: ktabors

packages/@adobe/spectrum-css-temp/components/button/index.css

@@ -62,7 +62,8 @@ governing permissions and limitations under the License.
               box-shadow var(--spectrum-global-animation-duration-100) ease-out;
 
   text-decoration: none;
-  font-family: var(--spectrum-font-family-base);
+
+  @extend %i18nFontFamily;
 
   line-height: var(--spectrum-button-line-height);
 

packages/@adobe/spectrum-css-temp/components/commons/fonts.css

@@ -41,3 +41,31 @@ governing permissions and limitations under the License.
   --spectrum-text-size-text-label: var(--spectrum-label-text-size);
   --spectrum-line-height-text-label: var(--spectrum-label-text-line-height);
 }
+
+%i18nFontFamily {
+  font-family: var(--spectrum-font-family-base);
+
+  &:lang(ar) {
+    font-family: var(--spectrum-font-family-ar);
+  }
+
+  &:lang(he) {
+    font-family: var(--spectrum-font-family-he);
+  }
+
+  &:lang(zh-Hans) {
+    font-family: var(--spectrum-font-family-zhhans);
+  }
+
+  &:lang(zh) {
+    font-family: var(--spectrum-font-family-zh);
+  }
+
+  &:lang(ko) {
+    font-family: var(--spectrum-font-family-ko);
+  }
+
+  &:lang(ja) {
+    font-family: var(--spectrum-font-family-ja);
+  }
+}

packages/@adobe/spectrum-css-temp/components/textfield/index.css

@@ -27,9 +27,6 @@ governing permissions and limitations under the License.
   --spectrum-textfield-multiline-padding-x: var(--spectrum-textfield-padding-x);
   --spectrum-textfield-multiline-padding-top: var(--spectrum-textfield-padding-top);
   --spectrum-textfield-multiline-padding-bottom: var(--spectrum-textfield-padding-bottom);
-
-  /* Todo: DNA uses incorrect font family "Adobe Clean" */;
-  --spectrum-textfield-text-font-family-fixed: var(--spectrum-font-family-base);
 }
 
 .spectrum-Textfield {
@@ -72,7 +69,7 @@ governing permissions and limitations under the License.
   overflow: visible;
 
   /* Change the input font styles in all browsers */
-  font-family: var(--spectrum-textfield-text-font-family-fixed);
+  @extend %i18nFontFamily;
   font-size: var(--spectrum-textfield-text-size);
   line-height: var(--spectrum-textfield-text-line-height);
   text-overflow: ellipsis;

packages/@adobe/spectrum-css-temp/components/typography/font.css

@@ -12,31 +12,7 @@ governing permissions and limitations under the License.
 @import '../commons/index.css';
 
 .spectrum {
-  font-family: var(--spectrum-font-family-base);
+  @extends %i18nFontFamily;
   font-size: var(--spectrum-text-size);
   color: var(--spectrum-body-text-color, var(--spectrum-global-color-gray-800));
-
-  &:lang(ar) {
-    font-family: var(--spectrum-font-family-ar);
-  }
-
-  &:lang(he) {
-    font-family: var(--spectrum-font-family-he);
-  }
-
-  &:lang(zh-Hans) {
-    font-family: var(--spectrum-font-family-zhhans);
-  }
-
-  &:lang(zh) {
-    font-family: var(--spectrum-font-family-zh);
-  }
-
-  &:lang(ko) {
-    font-family: var(--spectrum-font-family-ko);
-  }
-
-  &:lang(ja) {
-    font-family: var(--spectrum-font-family-ja);
-  }
 }

packages/@adobe/spectrum-css-temp/components/typography/vars.css

@@ -18,7 +18,7 @@
     font-family: myriad-arabic, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   }
 .spectrum:lang(he) {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-family: myraid-hebrew, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   }
 .spectrum:lang(zh-Hans) {
     font-family: adobe-clean-han-japanese, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

packages/@react-spectrum/buttongroup/chromatic/ButtonGroup.chromatic.tsx

@@ -52,7 +52,7 @@ function render(props) {
         </ButtonGroup>
       </View>
       <View borderColor="static-blue-400" borderWidth="thin">
-        <ButtonGroup width="size-2000" {...props}>
+        <ButtonGroup width="size-1700" {...props}>
           <Button variant="primary">Button 1</Button>
           <Button variant="primary">Button 2</Button>
         </ButtonGroup>