Prototype for testing Adobe Clean VF

.storybook/main.js

@@ -15,6 +15,11 @@ export default {
 			files: "**/*.@(stories.js|mdx)",
 			titlePrefix: "Deprecated",
 		},
+		{
+			directory: "./testing",
+			files: "**/*.@(stories.js|mdx)",
+			titlePrefix: "Testing",
+		},
 	],
 	rootDir: "../",
 	staticDirs: ["../assets", "./assets/images"],

.storybook/preview-head.html

@@ -2,7 +2,7 @@
 <link rel="preconnect" href="https://use.typekit.net" crossorigin />
 
 <!-- This is the script that attempts to pre-load the typekit fonts -->
-<script src="https://use.typekit.net/rok6rmo.js" id="typekit" type="text/javascript" async></script>
+<!-- <script src="https://use.typekit.net/rok6rmo.js" id="typekit" type="text/javascript" async></script>
  <script>
     try {
         window.Typekit = Typekit.load({
@@ -25,4 +25,4 @@
             },
         });
     } catch (e) {}
-</script>
+</script> -->

.storybook/preview.js

@@ -4,13 +4,13 @@ import {
 	withArgEvents,
 	withContextWrapper,
 	withIconSpriteSheet,
-	withLanguageWrapper,
+	// withLanguageWrapper,
 	withReducedMotionWrapper,
 	withTestingPreviewWrapper,
 	withTextDirectionWrapper
 } from "./decorators";
 import {
-	FontLoader,
+	// FontLoader,
 	IconLoader,
 } from "./loaders";
 import modes from "./modes";
@@ -122,7 +122,7 @@ export default {
 		customStyles: {},
 	},
 	decorators: [
-		withLanguageWrapper,
+		// withLanguageWrapper,
 		withReducedMotionWrapper,
 		withTextDirectionWrapper,
 		withContextWrapper,
@@ -132,7 +132,7 @@ export default {
 		withIconSpriteSheet,
 	],
 	loaders: [
-		FontLoader,
+		// FontLoader,
 		IconLoader,
 	],
 	tags: ["autodocs", "dev"],

.storybook/testing/adobe-clean-vf.mdx

@@ -0,0 +1,55 @@
+import { Meta, Canvas } from "@storybook/blocks";
+
+import * as ActionButtonStories from "../../components/actionbutton/stories/actionbutton.stories.js";
+import * as ButtonStories from "../../components/button/stories/button.stories.js";
+import * as TextFieldStories from "../../components/textfield/stories/textfield.stories.js";
+import * as TextAreaStories from "../../components/textfield/stories/textarea.stories.js";
+import * as ToastStories from "../../components/toast/stories/toast.stories.js";
+import * as TagStories from "../../components/tag/stories/tag.stories.js";
+import * as CheckboxStories from "../../components/checkbox/stories/checkbox.stories.js";
+import * as BadgeStories from "../../components/badge/stories/badge.stories.js";
+import * as RadioStories from "../../components/radio/stories/radio.stories.js";
+
+<Meta title="Testing Adobe Clean VF" />
+
+# Testing Adobe Clean VF
+
+## Button
+
+<Canvas of={ButtonStories.Sizing} />
+
+<Canvas of={ButtonStories.WithWrapping} />
+
+<Canvas of={ButtonStories.DisableWrapping} />
+
+## ActionButton
+
+<Canvas of={ActionButtonStories.Sizing} />
+
+## Tag
+
+<Canvas of={TagStories.Sizing} />
+
+## Badge
+
+<Canvas of={BadgeStories.Default} />
+
+## Text field
+
+<Canvas of={TextFieldStories.Default} />
+
+## Text area
+
+<Canvas of={TextAreaStories.Default} />
+
+## Toast
+
+<Canvas of={ToastStories.Default} />
+
+## Checkbox
+
+<Canvas of={CheckboxStories.Sizing} />
+
+## Radio
+
+<Canvas of={RadioStories.Sizing} />

components/textfield/stories/textarea.stories.js

@@ -27,7 +27,9 @@ export default {
 };
 
 export const Default = TextAreaGroup.bind({});
-Default.args = {};
+Default.args = {
+	value: "Duis mollit ut laboris est labore sunt ipsum. Proident nostrud in ea reprehenderit proident nostrud. Anim ut est anim ex amet."
+};
 Default.tags = ["!autodocs"];
 
 // ********* DOCS ONLY ********* //

components/textfield/stories/textfield.stories.js

@@ -147,7 +147,9 @@ export default {
 
 export const Default = TextFieldGroup.bind({});
 Default.tags = ["!autodocs"];
-Default.args = {};
+Default.args = {
+	value: "Single line textfield"
+};
 
 // ********* DOCS ONLY ********* //
 

tokens/custom-spectrum/custom-vars.css

@@ -57,4 +57,144 @@
   --spectrum-docs-static-black-background-color: rgb(181, 209, 211);
 
   --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
+
+  /*
+    Adobe Clean VF font testing
+  */
+  --spectrum-sans-serif-font-family: "Adobe Clean VF";
+
+  --spectrum-line-height-75: 125%;
+  --spectrum-line-height-100: 130%;
+  --spectrum-line-height-150: 133%;
+  --spectrum-line-height-200: 150%;
+
+  /* Prevent sub-pixel values affecting component height */
+  @supports (line-height: round(1%, 1px)) {
+    --spectrum-line-height-75: round(125%, 1px);
+    --spectrum-line-height-100: round(130%, 1px);
+    --spectrum-line-height-150: round(133%, 1px);
+    --spectrum-line-height-200: round(150%, 1px);
+  }
+
+  --spectrum-heading-line-height: var(--spectrum-line-height-100);
+  --spectrum-body-line-height: var(--spectrum-line-height-200);
+  --spectrum-detail-line-height: var(--spectrum-line-height-100);
+  --spectrum-code-line-height: var(--spectrum-line-height-200);
+
+  /* Design provided line-height adjusted properties */
+  /* Likely drop "desktop" and output into medium/large accordingly */
+  --spectrum-line-height-component-desktop-extra-small: var(--spectrum-line-height-100);
+  --spectrum-line-height-component-desktop-small: var(--spectrum-line-height-150);
+  --spectrum-line-height-component-desktop-medium: var(--spectrum-line-height-100);
+  --spectrum-line-height-component-desktop-large: var(--spectrum-line-height-75);
+  --spectrum-line-height-component-desktop-extra-large: var(--spectrum-line-height-150);
+
+  [class*="sizeXS"] {
+    --mod-button-line-height: var(--spectrum-line-height-component-desktop-extra-small);
+    --mod-tag-label-line-height: var(--spectrum-line-height-component-desktop-extra-small);
+    --mod-badge-label-line-height: var(--spectrum-line-height-component-desktop-extra-small);
+    --mod-checkbox-line-height: var(--spectrum-line-height-component-desktop-extra-small);
+    --mod-radio-line-height: var(--spectrum-line-height-component-desktop-extra-small);
+    --spectrum-textfield-input-line-height: var(--spectrum-line-height-component-desktop-extra-small);
+  }
+
+  [class*="sizeS"] {
+    --mod-button-line-height: var(--spectrum-line-height-component-desktop-small);
+    --mod-tag-label-line-height: var(--spectrum-line-height-component-desktop-small);
+    --mod-badge-label-line-height: var(--spectrum-line-height-component-desktop-small);
+    --mod-checkbox-line-height: var(--spectrum-line-height-component-desktop-small);
+    --mod-radio-line-height: var(--spectrum-line-height-component-desktop-small);
+    --spectrum-textfield-input-line-height: var(--spectrum-line-height-component-desktop-small);
+  }
+
+  [class*="sizeM"] {
+    --mod-button-line-height: var(--spectrum-line-height-component-desktop-medium);
+    --mod-tag-label-line-height: var(--spectrum-line-height-component-desktop-medium);
+    --mod-badge-label-line-height: var(--spectrum-line-height-component-desktop-medium);
+    --mod-checkbox-line-height: var(--spectrum-line-height-component-desktop-medium);
+    --mod-radio-line-height: var(--spectrum-line-height-component-desktop-medium);
+    --spectrum-textfield-input-line-height: var(--spectrum-line-height-component-desktop-medium);
+  }
+
+  [class*="sizeL"] {
+    --mod-button-line-height: var(--spectrum-line-height-component-desktop-large);
+    --mod-tag-label-line-height: var(--spectrum-line-height-component-desktop-large);
+    --mod-badge-label-line-height: var(--spectrum-line-height-component-desktop-large);
+    --mod-checkbox-line-height: var(--spectrum-line-height-component-desktop-large);
+    --mod-radio-line-height: var(--spectrum-line-height-component-desktop-large);
+    --spectrum-textfield-input-line-height: var(--spectrum-line-height-component-desktop-large);
+  }
+
+  [class*="sizeXL"] {
+    --mod-button-line-height: var(--spectrum-line-height-component-desktop-extra-large);
+    --mod-tag-label-line-height: var(--spectrum-line-height-component-desktop-extra-large);
+    --mod-badge-label-line-height: var(--spectrum-line-height-component-desktop-extra-large);
+    --mod-checkbox-line-height: var(--spectrum-line-height-component-desktop-extra-large);
+    --mod-radio-line-height: var(--spectrum-line-height-component-desktop-extra-large);
+    --spectrum-textfield-input-line-height: var(--spectrum-line-height-component-desktop-extra-large);
+  }
+}
+
+/* Bumping specificity for simplified testing */
+:is(#test, .spectrum--medium) {
+  /* Simplified, adjusted `-to-text` properties */
+  /* Eventually these can be tied to sizes and all the component-specific values removed */
+  --spectrum-component-to-text-50: 3px;
+  --spectrum-component-to-text-75: 4px;
+  --spectrum-component-to-text-100: 7px;
+  --spectrum-component-to-text-200: 10px;
+  --spectrum-component-to-text-300: 12px;
+
+  --spectrum-component-top-to-text-50: var(--spectrum-component-to-text-50);
+	--spectrum-component-bottom-to-text-50: var(--spectrum-component-to-text-50);
+  --spectrum-component-top-to-text-75: var(--spectrum-component-to-text-75);
+	--spectrum-component-bottom-to-text-75: var(--spectrum-component-to-text-75);
+	--spectrum-component-top-to-text-100: var(--spectrum-component-to-text-100);
+	--spectrum-component-bottom-to-text-100: var(--spectrum-component-to-text-100);
+	--spectrum-component-top-to-text-200: var(--spectrum-component-to-text-200);
+	--spectrum-component-bottom-to-text-200: var(--spectrum-component-to-text-200);
+	--spectrum-component-top-to-text-300: var(--spectrum-component-to-text-300);
+	--spectrum-component-bottom-to-text-300: var(--spectrum-component-to-text-300);
+
+
+  --spectrum-button-top-to-text-small: var(--spectrum-component-to-text-75);
+	--spectrum-button-bottom-to-text-small: var(--spectrum-component-to-text-75);
+	--spectrum-button-top-to-text-medium: var(--spectrum-component-to-text-100);
+	--spectrum-button-bottom-to-text-medium: var(--spectrum-component-to-text-100);
+	--spectrum-button-top-to-text-large: var(--spectrum-component-to-text-200);
+	--spectrum-button-bottom-to-text-large: var(--spectrum-component-to-text-200);
+	--spectrum-button-top-to-text-extra-large: var(--spectrum-component-to-text-300);
+	--spectrum-button-bottom-to-text-extra-large: var(--spectrum-component-to-text-300);
+
+  --spectrum-toast-top-to-text: var(--spectrum-component-to-text-100);
+	--spectrum-toast-bottom-to-text: var(--spectrum-component-to-text-100);
+
+  /* TO DISCUSS: Checkbox/radio needs to have adjusted "margin-top" values throughout the sizes */
+  /* Current styles are already picking up the adjusted properties above for the _label_,
+    following style rules modify it for the _control_ */
+
+    /* Controls are smaller than the line-height, so still need their own adjustments presently */
+  --spectrum-radio-button-top-to-control-small: 5px;
+  --spectrum-radio-button-top-to-control-medium: 8px;
+  --spectrum-radio-button-top-to-control-large: 11px;
+  --spectrum-radio-button-top-to-control-extra-large: 14px;
+
+  /* Checkbox previously used a calculation based on checkbox height, now updating to match label distance
+    (slight cheat for now to re-use the updated radio values) */
+  .spectrum-Checkbox-box {
+    margin-block: var(--spectrum-checkbox-to-control);
+  }
+
+  .spectrum-Checkbox--sizeS {
+    --spectrum-checkbox-to-control: var(--spectrum-radio-button-top-to-control-small);
+  }
+  .spectrum-Checkbox--sizeM {
+    --spectrum-checkbox-to-control: var(--spectrum-radio-button-top-to-control-medium);
+  }
+  .spectrum-Checkbox--sizeL {
+    --spectrum-checkbox-to-control: var(--spectrum-radio-button-top-to-control-large);
+  }
+  .spectrum-Checkbox--sizeXL {
+    --spectrum-checkbox-to-control: var(--spectrum-radio-button-top-to-control-extra-large);
+  }
 }