From 8e6a54610c616bab3e35d73e39ab2f7a758361e4 Mon Sep 17 00:00:00 2001 From: 5t3ph Date: Thu, 24 Oct 2024 13:10:06 -0500 Subject: [PATCH 1/2] feat(*): prototype for testing Adobe Clean VF --- .storybook/main.js | 5 + .storybook/preview-head.html | 4 +- .storybook/preview.js | 8 +- .storybook/testing/adobe-clean-vf.mdx | 54 +++++++ .../textfield/stories/textfield.stories.js | 1 + tokens/custom-spectrum/custom-vars.css | 138 ++++++++++++++++++ tokens/dist/css/spectrum/custom-vars.css | 122 ++++++++++++++++ tokens/dist/css/spectrum/global-vars.css | 127 ++++++++++++++++ tokens/dist/css/spectrum/index.css | 120 +++++++++++++++ tokens/dist/index.css | 118 +++++++++++++++ 10 files changed, 691 insertions(+), 6 deletions(-) create mode 100644 .storybook/testing/adobe-clean-vf.mdx 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..5e43fb34a73 --- /dev/null +++ b/.storybook/testing/adobe-clean-vf.mdx @@ -0,0 +1,54 @@ +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 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/textfield.stories.js b/components/textfield/stories/textfield.stories.js index ee9fd272134..df99df3307a 100644 --- a/components/textfield/stories/textfield.stories.js +++ b/components/textfield/stories/textfield.stories.js @@ -125,6 +125,7 @@ export default { export const Default = TextFieldGroup.bind({}); Default.args = { labelText: "Username", + value: "Single line text" }; // ********* DOCS ONLY ********* // diff --git a/tokens/custom-spectrum/custom-vars.css b/tokens/custom-spectrum/custom-vars.css index 4005fc7f4d4..c493dc497d7 100644 --- a/tokens/custom-spectrum/custom-vars.css +++ b/tokens/custom-spectrum/custom-vars.css @@ -55,4 +55,142 @@ /* static white / black background color for docs containers */ --spectrum-docs-static-white-background-color: rgb(15, 121, 125); --spectrum-docs-static-black-background-color: rgb(181, 209, 211); + + + /* For 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); + } + + /* Based on "medium" size - TBD from design */ + --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); + + /* Design provided line-height adjusted properties */ + --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 337ae682a63..dd0428d550f 100644 --- a/tokens/dist/css/spectrum/custom-vars.css +++ b/tokens/dist/css/spectrum/custom-vars.css @@ -54,4 +54,126 @@ --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); --spectrum-docs-static-black-background-color-rgb:181, 209, 211; --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); + --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 cd60867c85f..da8c30f7fe5 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; @@ -93,4 +97,127 @@ --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); --spectrum-docs-static-black-background-color-rgb:181, 209, 211; --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); + --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 74d24dc1337..3de5331d83c 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; @@ -221,6 +224,123 @@ --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); --spectrum-docs-static-black-background-color-rgb:181, 209, 211; --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); + --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 e954dd9e505..49979c45b37 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; @@ -3152,6 +3154,122 @@ --spectrum-docs-static-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb)); --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; --spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb)); + --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; From 9ed2e66712723d70b8245fe19ccd89e20ba69654 Mon Sep 17 00:00:00 2001 From: 5t3ph Date: Mon, 28 Oct 2024 14:39:06 -0500 Subject: [PATCH 2/2] feat(*): update comments, add heading lh --- tokens/custom-spectrum/custom-vars.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/tokens/custom-spectrum/custom-vars.css b/tokens/custom-spectrum/custom-vars.css index 7dd5fee9d0a..0c32ec7d4ce 100644 --- a/tokens/custom-spectrum/custom-vars.css +++ b/tokens/custom-spectrum/custom-vars.css @@ -76,12 +76,13 @@ --spectrum-line-height-200: round(150%, 1px); } - /* Based on "medium" size - TBD from design */ - --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-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);