diff --git a/.storybook/main.js b/.storybook/main.js index ef9c992da41..f1254ca2bea 100644 --- a/.storybook/main.js +++ b/.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"], diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 73194fd52ed..e06ff4fc4ff 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -2,7 +2,7 @@ - + diff --git a/.storybook/preview.js b/.storybook/preview.js index 3c92dcfe186..2fbd2156c79 100644 --- a/.storybook/preview.js +++ b/.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"], diff --git a/.storybook/testing/adobe-clean-vf.mdx b/.storybook/testing/adobe-clean-vf.mdx new file mode 100644 index 00000000000..90cde3a93fb --- /dev/null +++ b/.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"; + + + +# Testing Adobe Clean VF + +## Button + + + + + + + +## ActionButton + + + +## Tag + + + +## Badge + + + +## Text field + + + +## Text area + + + +## Toast + + + +## Checkbox + + + +## Radio + + diff --git a/components/textfield/stories/textarea.stories.js b/components/textfield/stories/textarea.stories.js index f91dc576eec..877a167ee3a 100644 --- a/components/textfield/stories/textarea.stories.js +++ b/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 ********* // diff --git a/components/textfield/stories/textfield.stories.js b/components/textfield/stories/textfield.stories.js index 90aa6f69a6e..0c8653c277a 100644 --- a/components/textfield/stories/textfield.stories.js +++ b/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 ********* // diff --git a/tokens/custom-spectrum/custom-vars.css b/tokens/custom-spectrum/custom-vars.css index aaeb075aeef..0c32ec7d4ce 100644 --- a/tokens/custom-spectrum/custom-vars.css +++ b/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); + } } diff --git a/tokens/dist/css/spectrum/custom-vars.css b/tokens/dist/css/spectrum/custom-vars.css index 0f8211e08fa..e88d4981f46 100644 --- a/tokens/dist/css/spectrum/custom-vars.css +++ b/tokens/dist/css/spectrum/custom-vars.css @@ -56,4 +56,121 @@ --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); --spectrum-coach-indicator-ring-static-white-color:var(--spectrum-white); + --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%; + --spectrum-body-line-height:var(--spectrum-line-height-75); + --spectrum-detail-line-height:var(--spectrum-line-height-150); + --spectrum-code-line-height:var(--spectrum-line-height-75); + --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); + @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); + } + + [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); + } +} + +:is(#test,.spectrum--medium){ + --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); + --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; + .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); + } } diff --git a/tokens/dist/css/spectrum/global-vars.css b/tokens/dist/css/spectrum/global-vars.css index 9e105dacd2f..aff9dd5e557 100644 --- a/tokens/dist/css/spectrum/global-vars.css +++ b/tokens/dist/css/spectrum/global-vars.css @@ -51,6 +51,10 @@ --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight); --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); +} + + +.spectrum{ --system:spectrum; --spectrum-animation-linear:cubic-bezier(0, 0, 1, 1); --spectrum-animation-duration-0:0ms; @@ -95,4 +99,122 @@ --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); --spectrum-coach-indicator-ring-static-white-color:var(--spectrum-white); + --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%; + --spectrum-body-line-height:var(--spectrum-line-height-75); + --spectrum-detail-line-height:var(--spectrum-line-height-150); + --spectrum-code-line-height:var(--spectrum-line-height-75); + --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); + @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); + } + + [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); + } +} + + +:is(#test,.spectrum--medium){ + --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); + --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; + .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); + } } diff --git a/tokens/dist/css/spectrum/index.css b/tokens/dist/css/spectrum/index.css index 491fd946d45..c87861ef999 100644 --- a/tokens/dist/css/spectrum/index.css +++ b/tokens/dist/css/spectrum/index.css @@ -179,6 +179,9 @@ --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight); --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); +} + +.spectrum{ --system:spectrum; --spectrum-animation-linear:cubic-bezier(0, 0, 1, 1); --spectrum-animation-duration-0:0ms; @@ -223,6 +226,122 @@ --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); --spectrum-coach-indicator-ring-static-white-color:var(--spectrum-white); + --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%; + --spectrum-body-line-height:var(--spectrum-line-height-75); + --spectrum-detail-line-height:var(--spectrum-line-height-150); + --spectrum-code-line-height:var(--spectrum-line-height-75); + --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); + @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); + } + + [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); + } +} + +:is(#test,.spectrum--medium){ + --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); + --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; + .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); + } } .spectrum--large{ diff --git a/tokens/dist/index.css b/tokens/dist/index.css index cb07bad1335..7e5a8bfb0ae 100644 --- a/tokens/dist/index.css +++ b/tokens/dist/index.css @@ -3110,6 +3110,8 @@ --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); --spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight); --spectrum-heading-serif-emphasized-font-weight: var(--spectrum-bold-font-weight); +} +.spectrum { --system: spectrum; --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); --spectrum-animation-duration-0: 0ms; @@ -3154,6 +3156,121 @@ --spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb)); --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); + --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%; + --spectrum-body-line-height: var(--spectrum-line-height-75); + --spectrum-detail-line-height: var(--spectrum-line-height-150); + --spectrum-code-line-height: var(--spectrum-line-height-75); + --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); + @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); + } + + [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); + } +} +:is(#test, .spectrum--medium) { + --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); + --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; + .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); + } } .spectrum--large { --spectrum-checkbox-control-size-small: 16px;