diff --git a/package-lock.json b/package-lock.json index 12d7a44..33ecb76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10556,7 +10556,6 @@ }, "packages/fds-theme": { "version": "1.0.0", - "license": "MIT", "dependencies": { "autoprefixer": "^10.4.12", "postcss": "^8.4.21", diff --git a/packages/@fds-design/button/Button.stories.tsx b/packages/@fds-design/button/Button.stories.tsx index 034de8d..add6ccb 100644 --- a/packages/@fds-design/button/Button.stories.tsx +++ b/packages/@fds-design/button/Button.stories.tsx @@ -22,18 +22,20 @@ export default { onFocus: action('focus'), onBlur: action('blur'), onKeyUp: action('keyup'), - children: 'Click Me', + children: 'Click Me', + variant: 'accent', + style: 'fill' }, argTypes: { children: { - control: 'text', // Allows editing children via a text input in Storybook + control: 'text', description: 'Content inside the button, can be text or React elements.', table: { type: { summary: 'ReactNode' }, defaultValue: { summary: 'Click Me' } - } + }, }, onPress: { table: { @@ -61,11 +63,22 @@ export default { variant: { control: 'select', options: ['accent', 'primary', 'secondary', 'negative', 'cta', 'overBackground'], - defaultValue: 'accent' + table: { + type: { + summary: 'string' + }, + defaultValue: { summary: 'accent' } + } }, style: { control: 'select', - options: [undefined, 'fill', 'outline'] + options: [undefined, 'fill', 'outline'], + table: { + type: { + summary: 'string' + }, + defaultValue: { summary: 'fill' } + } }, staticColor: { control: 'select', @@ -78,10 +91,82 @@ export default { } } as Meta>; -// Example Story +// Default Primary export const Default: StoryObj = { args: { children: 'Click Me', onPress: () => {alert("I'm an FDS button.")} } }; + +// Accent +export const Accent = { + render: () => ( +
+ {/* Accent */} + + + {/* Accent Tertiary */} + + + {/* Accent Disabled */} + +
+ ) +}; + +export const Secondary = { + render: () => ( +
+ {/* Secondary */} + + + {/* Secondary Tertiary */} + + + +
+ ) +} + +export const Negative = { + render: () => ( +
+ {/* Negative */} + + + {/* Secondary Tertiary */} + + + +
+ ), +}; diff --git a/packages/@fds-design/button/index.tsx b/packages/@fds-design/button/index.tsx index 6ee33a6..e5b0c2a 100644 --- a/packages/@fds-design/button/index.tsx +++ b/packages/@fds-design/button/index.tsx @@ -1,8 +1,12 @@ import React from 'react'; - import { Button as SpectrumButton, SpectrumButtonProps } from '@react-spectrum/button'; +import './styles.scss'; -export const Button: React.FC = (props) => { - - return ; +export const Button: React.FC = (props: SpectrumButtonProps) => { + const defaultProps = { + ...props, + variant: props.variant ?? 'accent', + style: props.style ?? 'fill' + } + return ; }; diff --git a/packages/@fds-design/button/styles.scss b/packages/@fds-design/button/styles.scss new file mode 100644 index 0000000..364993d --- /dev/null +++ b/packages/@fds-design/button/styles.scss @@ -0,0 +1,4 @@ +.fds-button{ + --spectrum-button-border-radius: 4px; + height: 48px; +} diff --git a/packages/fds-theme/components/commons/focus-ring.css b/packages/@fds-design/commons/focus-ring.css similarity index 100% rename from packages/fds-theme/components/commons/focus-ring.css rename to packages/@fds-design/commons/focus-ring.css diff --git a/packages/fds-theme/components/commons/fonts.css b/packages/@fds-design/commons/fonts.css similarity index 100% rename from packages/fds-theme/components/commons/fonts.css rename to packages/@fds-design/commons/fonts.css diff --git a/packages/fds-theme/components/commons/index.css b/packages/@fds-design/commons/index.css similarity index 100% rename from packages/fds-theme/components/commons/index.css rename to packages/@fds-design/commons/index.css diff --git a/packages/fds-theme/components/commons/layout.css b/packages/@fds-design/commons/layout.css similarity index 100% rename from packages/fds-theme/components/commons/layout.css rename to packages/@fds-design/commons/layout.css diff --git a/packages/fds-theme/components/accordion/index.css b/packages/fds-theme/components/accordion/index.css deleted file mode 100644 index ff7f7d1..0000000 --- a/packages/fds-theme/components/accordion/index.css +++ /dev/null @@ -1,151 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -:root { - --spectrum-accordion-icon-width: 6px; - --spectrum-accordion-icon-height: 10px; - - /* Subtract the size of the border since it's on the item itself */ - --spectrum-accordion-item-height-actual: calc(var(--spectrum-accordion-item-height) - var(--spectrum-accordion-item-border-size)); - --spectrum-accordion-item-title-tracking-actual: calc(var(--spectrum-accordion-item-title-tracking) / 100); - - --spectrum-accordion-item-title-padding-y: var(--spectrum-global-dimension-size-150); - --spectrum-accordion-item-line-height: 1.3; - - --spectrum-accordion-item-focus-ring-color: var(--spectrum-alias-focus-color); -} - -.spectrum-Accordion { - display: block; - list-style: none; - padding: 0; - margin: 0; -} - -.spectrum-Accordion-itemIndicator { - display: block; - - padding-inline-start: var(--spectrum-accordion-icon-gap); - padding-inline-end: var(--spectrum-accordion-icon-gap); - - transition: transform ease var(--spectrum-global-animation-duration-100); - box-sizing: content-box; -} - -.spectrum-Accordion-item { - z-index: inherit; - position: relative; - - display: list-item; - list-style: none; - margin: 0; - - border-bottom: var(--spectrum-accordion-item-border-size) solid var(--spectrum-accordion-border-color); - border-top: var(--spectrum-accordion-item-border-size) solid var(--spectrum-accordion-border-color); - - &.in-accordion:not(:first-of-type) { - border-top-width: 0; - } - - &.spectrum-Accordion-item--quiet { - border-bottom-width: 0; - border-top-width: 0; - - &:first-of-type { - border-top-width: 0; - } - } -} - -.spectrum-Accordion-itemHeading { - margin: 0; -} - -.spectrum-Accordion-itemHeader { - outline: none; - position: relative; - - display: flex; - align-items: center; - justify-content: flex-start; - - box-sizing: border-box; - /* left padding takes into account the icon's size as well as the focus state's left border */ - padding-block: var(--spectrum-accordion-item-title-padding-y); - padding-inline-start: var(--spectrum-accordion-icon-gap); - padding-inline-end: var(--spectrum-accordion-item-padding); - margin: 0; - - min-height: var(--spectrum-accordion-item-height-actual); - - font-size: var(--spectrum-global-dimension-font-size-300); - line-height: var(--spectrum-accordion-item-line-height); - - text-overflow: ellipsis; - cursor: default; - font-weight: var(--spectrum-global-font-weight-bold); - - /* reset styling if button element is used */ - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: inherit; - font-family: inherit; - text-align: start; - width: 100%; - border-style: solid; - border-color: transparent; - - &.focus-ring { - border-radius: var(--spectrum-global-dimension-static-size-100); - outline: solid 2px var(--spectrum-accordion-item-focus-ring-color); - outline-offset: -2px; - } -} - -.spectrum-Accordion-item.is-expanded { - .spectrum-Accordion-itemContent { - padding: 8px 9px 16px 9px; - } -} - -.spectrum-Accordion-item { - &.is-expanded { - > .spectrum-Accordion-itemHeading { - > .spectrum-Accordion-itemHeader { - > .spectrum-Accordion-itemIndicator { - [dir='ltr'] & { - transform: rotate(90deg); - } - [dir='rtl'] & { - transform: rotate(-90deg); - } - } - } - } - - > .spectrum-Accordion-itemHeader::after { - /* No bottom border when expanded, so be less tall */ - height: var(--spectrum-accordion-item-height-actual); - } - - > .spectrum-Accordion-itemContent { - display: block; - } - } - - &.is-disabled { - .spectrum-Accordion-itemHeader { - cursor: default; - } - } -} diff --git a/packages/fds-theme/components/accordion/skin.css b/packages/fds-theme/components/accordion/skin.css deleted file mode 100644 index 39cf0ff..0000000 --- a/packages/fds-theme/components/accordion/skin.css +++ /dev/null @@ -1,53 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -:root { - --spectrum-accordion-text-color-disabled: var(--spectrum-alias-text-color-disabled); - --spectrum-accordion-background-color-down: var(--spectrum-global-color-gray-300); -} - -.spectrum-Accordion-itemHeader { - color: var(--spectrum-alias-text-color); - - &:hover, &:focus-visible { - color: var(--spectrum-alias-text-color-hover); - background-color: var(--spectrum-accordion-background-color-hover); - } - - &.is-pressed { - color: var(--spectrum-accordion-text-color-down); - background-color: var(--spectrum-accordion-background-color-down); - } -} - -.spectrum-Accordion-item.is-disabled { - .spectrum-Accordion-itemHeader { - &, - &:hover, - &:focus-visible { - color: var(--spectrum-accordion-text-color-disabled); - background-color: transparent; - } - } -} -@media (forced-colors: active) { - .spectrum-Accordion-itemHeader { - border: none; - &:focus-visible { - outline: 2px solid CanvasText; - } - } - - .spectrum-Accordion-item.spectrum-Accordion-item--quiet { - border: none - } -} diff --git a/packages/fds-theme/components/accordion/vars.css b/packages/fds-theme/components/accordion/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/accordion/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/actiongroup/index.css b/packages/fds-theme/components/actiongroup/index.css deleted file mode 100644 index 77bb67e..0000000 --- a/packages/fds-theme/components/actiongroup/index.css +++ /dev/null @@ -1,206 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -:root { - --spectrum-actiongroup-button-gap-reset: 0px; - --spectrum-actiongroup-quiet-compact-button-gap: var(--spectrum-global-dimension-size-25); -} - -/* This is copied from our Flex component for now. */ -.flex-container { - /* this is necessary so that the inner margins don't affect anything outside */ - display: flex; -} - -.flex-gap { - /* apply a negative margin to counteract the margin on each item at the edges */ - margin: calc(var(--row-gap) / -2) calc(var(--column-gap) / -2); - - /* increase the width and height to account for this margin */ - /* Add 1px to fix rounding error in Safari (╯°□°)╯︵ ┻━┻ */ - width: calc(100% + calc(var(--column-gap) + 1px)); - height: calc(100% + var(--row-gap)); -} - -/* If the selector was .flex-gap > *, it wouldn't override when components have a margin 0 specified by a single - * class selector, specificity is equal. Both are one class. Neither > nor * contribute to specificity. - * We need to make it more specific, so we raise it by 1 class. - */ -.flex-container .flex-gap > * { - /* apply half of the gap to each side of every item */ - margin: calc(var(--row-gap) / 2) calc(var(--column-gap) / 2); -} - - -.spectrum-ActionGroup { - display: flex; - flex-wrap: wrap; - --column-gap: var(--spectrum-actionbuttongroup-text-button-gap-x); - --row-gap: var(--spectrum-actionbuttongroup-text-button-gap-y); - - .spectrum-ActionGroup-item { - flex-shrink: 0; - - &.spectrum-ActionGroup-item--iconOnly { - padding-inline-end: var(--spectrum-actionbutton-icon-padding-x); - } - } - - &:focus { - outline: none; - } -} - -.spectrum-ActionGroup--vertical { - display: flex; - flex-direction: column; - align-items: flex-start; - --column-gap: var(--spectrum-actiongroup-button-gap-reset); - --row-gap: var(--spectrum-actionbuttongroup-text-button-gap-y); - - .spectrum-ActionGroup-item { - > :not(svg) { - inline-size: auto; - } - } - - &.spectrum-ActionGroup--quiet { - .spectrum-ActionGroup-item { - justify-content: flex-start; - } - } - - &.spectrum-ActionGroup--justified, - &.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) { - align-items: stretch; - } -} - -.spectrum-ActionGroup--compact { - --column-gap: var(--spectrum-actiongroup-compact-button-gap); - --row-gap: var(--spectrum-actiongroup-button-gap-reset); - - &.spectrum-ActionGroup--quiet { - --column-gap: var(--spectrum-actiongroup-quiet-compact-button-gap); - - &.spectrum-ActionGroup--vertical { - --column-gap: var(--spectrum-actiongroup-button-gap-reset); - --row-gap: var(--spectrum-actiongroup-quiet-compact-button-gap); - } - } - - &:not(.spectrum-ActionGroup--quiet) { - flex-wrap: nowrap; - - .spectrum-ActionGroup-item { - position: relative; - --spectrum-button-border-radius: 0px; - z-index: 1; - - &:first-child { - border-start-start-radius: var(--spectrum-actionbutton-border-radius); - border-end-start-radius: var(--spectrum-actionbutton-border-radius); - - /* focus ring */ - &:after { - border-start-start-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-alias-focus-ring-gap)); - border-end-start-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-alias-focus-ring-gap)); - } - } - - &:last-child { - border-start-end-radius: var(--spectrum-actionbutton-border-radius); - border-end-end-radius: var(--spectrum-actionbutton-border-radius); - - /* focus ring */ - &:after { - border-start-end-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-alias-focus-ring-gap)); - border-end-end-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-alias-focus-ring-gap)); - } - } - - &.spectrum-ActionGroup-item--isDisabled { - z-index: 0; - } - - &.is-selected { - z-index: 2; - } - - &:hover { - z-index: 3; - } - - &:focus { - z-index: 4; - } - } - - &.spectrum-ActionGroup--vertical { - --column-gap: var(--spectrum-actiongroup-button-gap-reset); - --row-gap: var(--spectrum-actiongroup-compact-button-gap); - - .spectrum-ActionGroup-item { - border-radius: 0; - - &:first-child { - border-radius: 0; - border-start-start-radius: var(--spectrum-actionbutton-border-radius); - border-start-end-radius: var(--spectrum-actionbutton-border-radius); - } - - &:last-child { - border-radius: 0; - border-end-start-radius: var(--spectrum-actionbutton-border-radius); - border-end-end-radius: var(--spectrum-actionbutton-border-radius); - } - } - } - } -} - -.spectrum-ActionGroup--justified { - .spectrum-ActionGroup-item { - flex: 1; - - > :not(svg) { - inline-size: auto; - } - } - - &.spectrum-ActionGroup--vertical { - .spectrum-ActionGroup-item { - flex: 1 0 auto; - } - } -} - -.spectrum-ActionGroup--overflowCollapse { - flex-wrap: nowrap; -} - -.spectrum-ActionGroup-menu { - /* specificity must be higher than `.spectrum-ActionButton .spectrum-Icon` */ - svg.spectrum-ActionGroup-menu-chevron { - order: 2; - padding-inline-start: 0; - padding-inline-end: var(--spectrum-actionbutton-icon-padding-x); - } - - .spectrum-ActionGroup-menu-contents { - /* This wrapper is needed to keep the :only-child/sibling selectors - * in button CSS working with the additional chevron element. */ - display: inline-flex; - align-items: center; - justify-content: center; - } -} diff --git a/packages/fds-theme/components/actiongroup/vars.css b/packages/fds-theme/components/actiongroup/vars.css deleted file mode 100644 index 3df0b02..0000000 --- a/packages/fds-theme/components/actiongroup/vars.css +++ /dev/null @@ -1,13 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; diff --git a/packages/fds-theme/components/actionmenu/index.css b/packages/fds-theme/components/actionmenu/index.css deleted file mode 100644 index 55fa2f5..0000000 --- a/packages/fds-theme/components/actionmenu/index.css +++ /dev/null @@ -1,11 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ diff --git a/packages/fds-theme/components/actionmenu/vars.css b/packages/fds-theme/components/actionmenu/vars.css deleted file mode 100644 index 3df0b02..0000000 --- a/packages/fds-theme/components/actionmenu/vars.css +++ /dev/null @@ -1,13 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; diff --git a/packages/fds-theme/components/alert/index.css b/packages/fds-theme/components/alert/index.css deleted file mode 100644 index 108ffeb..0000000 --- a/packages/fds-theme/components/alert/index.css +++ /dev/null @@ -1,88 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -:root { - --spectrum-alert-header-height: 38px; - --spectrum-alert-corner-radius: 4px; - - /* DNA */ - --spectrum-alert-border-width: 2px; -} - -.spectrum-Alert { - position: relative; - - display: inline-block; - box-sizing: border-box; - min-width: var(--spectrum-alert-min-width); - min-height: var(--spectrum-alert-header-height); - margin: 8px 0; - padding: var(--spectrum-alert-padding-y) var(--spectrum-alert-padding-x); - - border-width: var(--spectrum-alert-border-width); - border-style: solid; - border-radius: var(--spectrum-alert-corner-radius); -} - -.spectrum-Alert-icon { - position: absolute; - display: block; - top: 20px; - right: 20px; -} - -.spectrum-Alert-header { - display: inline-block; - height: auto; - min-height: 0; - margin: 0; - padding: 0; - - /* Leave room for the icon */ - padding-right: 30px; - - font-size: 14px; - font-weight: 700; - font-style: normal; - line-height: 14px; - text-transform: none; -} - -.spectrum-Alert-content { - display: block; - margin: var(--spectrum-alert-content-margin-top) 0 0 0; - padding: 0; - - font-size: 14px; - word-wrap: break-word; -} - -.spectrum-Alert-footer { - display: block; - - text-align: right; - - padding-top: 0.5rem; - - &:empty { - display: none; - } - - .spectrum-Button { - margin-right: 0; - - /* Spacing between buttons */ - margin-left: 0.75rem; - } -} diff --git a/packages/fds-theme/components/alert/skin.css b/packages/fds-theme/components/alert/skin.css deleted file mode 100644 index 1126d1e..0000000 --- a/packages/fds-theme/components/alert/skin.css +++ /dev/null @@ -1,65 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Alert { - background-color: var(--spectrum-alert-background-color); - /* default color set to body color, header element overwrites this */ - color: var(--spectrum-alert-text-color); -} - -.spectrum-Alert-header { - color: var(--spectrum-alert-title-text-color); -} - -.spectrum-Alert-content { - color: var(--spectrum-alert-text-color); -} - -.spectrum-Alert--info { - border-color: var(--spectrum-alert-info-border-color); - - .spectrum-Alert-icon { - color: var(--spectrum-alert-info-icon-color); - } -} - -.spectrum-Alert--help { - border-color: var(--spectrum-alert-info-border-color); - - .spectrum-Alert-icon { - color: var(--spectrum-alert-info-icon-color); - } -} - -.spectrum-Alert--error { - border-color: var(--spectrum-alert-error-border-color); - - .spectrum-Alert-icon { - color: var(--spectrum-alert-error-icon-color); - } -} - -.spectrum-Alert--success { - border-color: var(--spectrum-alert-success-border-color); - - .spectrum-Alert-icon { - color: var(--spectrum-alert-success-icon-color); - } -} - -.spectrum-Alert--warning { - border-color: var(--spectrum-alert-warning-border-color); - - .spectrum-Alert-icon { - color: var(--spectrum-alert-warning-icon-color); - } -} diff --git a/packages/fds-theme/components/alert/vars.css b/packages/fds-theme/components/alert/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/alert/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/asset/index.css b/packages/fds-theme/components/asset/index.css deleted file mode 100644 index 06562de..0000000 --- a/packages/fds-theme/components/asset/index.css +++ /dev/null @@ -1,32 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -.spectrum-Asset { - display: flex; - align-items: center; - justify-content: center; -} - -.spectrum-Asset-image { - max-width: 100%; - max-height: 100%; - object-fit: contain; - transition: opacity var(--spectrum-global-animation-duration-100); -} - -.spectrum-Asset-folder, -.spectrum-Asset-file { - min-width: var(--spectrum-asset-icon-min-width); - max-width: var(--spectrum-asset-icon-max-width); -} diff --git a/packages/fds-theme/components/asset/skin.css b/packages/fds-theme/components/asset/skin.css deleted file mode 100644 index 9be92d0..0000000 --- a/packages/fds-theme/components/asset/skin.css +++ /dev/null @@ -1,24 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Asset-folderBackground { - fill: var(--spectrum-asset-folder-background-color); -} - -.spectrum-Asset-fileBackground { - fill: var(--spectrum-asset-file-background-color); -} - -.spectrum-Asset-folderOutline, -.spectrum-Asset-fileOutline { - fill: var(--spectrum-asset-icon-outline-color); -} diff --git a/packages/fds-theme/components/asset/vars.css b/packages/fds-theme/components/asset/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/asset/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/assetlist/index.css b/packages/fds-theme/components/assetlist/index.css deleted file mode 100644 index 08561d1..0000000 --- a/packages/fds-theme/components/assetlist/index.css +++ /dev/null @@ -1,111 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -:root { - --spectrum-miller-column-chevron-height: 10px; - --spectrum-miller-column-chevron-width: 6px; - --spectrum-miller-column-checkbox-margin: 0; -} - -.spectrum-AssetList { - margin-top: 0; - margin-bottom: 0; - padding: 0; -} - -.spectrum-AssetList-item { - position: relative; - - display: flex; - box-sizing: border-box; - align-items: center; - - width: var(--spectrum-miller-column-width); - height: var(--spectrum-miller-column-item-height); - - padding: 0 var(--spectrum-miller-column-item-padding-right) 0 var(--spectrum-miller-column-item-padding-left); - margin: 0 0 var(--spectrum-miller-column-item-margin-bottom) 0; - - border-radius: var(--spectrum-miller-column-item-border-radius); - - transition: background-color var(--spectrum-global-animation-duration-100) ease-in-out; - - font-size: var(--spectrum-selectlist-option-text-size); - font-weight: var(--spectrum-selectlist-option-text-font-weight); - font-style: normal; - - cursor: default; - - outline: none; - - &::before { - content: ''; - - position: absolute; - left: 0; - right: 0; - - height: var(--spectrum-miller-column-item-height); - - background-color: transparent; - - border-radius: var(--spectrum-miller-column-item-border-radius); - } - - &.is-selectable, - &.is-selected, - &:hover, - &:focus { - /* checkbox on the left, shows up always */ - .spectrum-Checkbox { - display: inline-flex; - } - } - - &.is-branch { - /* show chevron */ - .spectrum-AssetList-itemChildIndicator { - display: block; - } - } - - .spectrum-AssetList-itemThumbnail { - /* Remove the border on images inside links in IE 10-. */ - border-style: none; - - width: var(--spectrum-miller-column-thumbnail-width); - height: var(--spectrum-miller-column-thumbnail-height); - margin-left: var(--spectrum-miller-column-thumbnail-margin-left); - vertical-align: middle; - } -} - -.spectrum-AssetList-itemSelector { - display: none; - margin: var(--spectrum-miller-column-checkbox-margin); -} - -.spectrum-AssetList-itemChildIndicator { - display: none; - transition: transform ease var(--spectrum-global-animation-duration-100); -} - -.spectrum-AssetList-itemLabel { - flex: 1; - padding-left: var(--spectrum-miller-column-item-label-padding-left); - - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} diff --git a/packages/fds-theme/components/assetlist/skin.css b/packages/fds-theme/components/assetlist/skin.css deleted file mode 100644 index c44a30e..0000000 --- a/packages/fds-theme/components/assetlist/skin.css +++ /dev/null @@ -1,45 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-AssetList-item { - &:hover { - background-color: var(--spectrum-miller-column-item-background-color-hover); - } - - &:focus { - &:focus-visible, - &.is-focused { - background-color: var(--spectrum-miller-column-item-background-color-hover); - &::before { - /* we cannot achieve rounded corners with outline so we use box-shadow instead */ - box-shadow: 0px 0px 0px 2px var(--spectrum-alias-border-color-focus) inset; - } - } - } - - &.is-navigated { - /* gray background */ - background-color: var(--spectrum-miller-column-item-background-color-down); - &:hover, - &:focus { - background-color: var(--spectrum-miller-column-item-background-color-down); - } - } - - &.is-selected { - background-color: var(--spectrum-miller-column-item-background-color-selected); - &:hover, - &:focus { - background-color: var(--spectrum-miller-column-item-background-color-selected-hover); - } - } -} diff --git a/packages/fds-theme/components/assetlist/vars.css b/packages/fds-theme/components/assetlist/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/assetlist/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/avatar/index.css b/packages/fds-theme/components/avatar/index.css deleted file mode 100644 index e800e3a..0000000 --- a/packages/fds-theme/components/avatar/index.css +++ /dev/null @@ -1,22 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Avatar { - width: var(--spectrum-avatar-small-width); - height: var(--spectrum-avatar-small-height); - - border-radius: var(--spectrum-avatar-small-border-radius); - border-style: none; - - -webkit-user-drag: none; - user-select: none; -} diff --git a/packages/fds-theme/components/avatar/skin.css b/packages/fds-theme/components/avatar/skin.css deleted file mode 100644 index ffb69b9..0000000 --- a/packages/fds-theme/components/avatar/skin.css +++ /dev/null @@ -1,29 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Avatar { - opacity: var(--spectrum-avatar-small-opacity); - outline: none; - transition: box-shadow var(--spectrum-global-animation-duration-100) ease-out; - - &.is-disabled { - opacity: var(--spectrum-avatar-small-opacity-disabled); - } -} -@media (forced-colors: active) { - .spectrum-Avatar { - &.is-disabled { - opacity: 1; - border: 2px solid GrayText; - } - } -} \ No newline at end of file diff --git a/packages/fds-theme/components/avatar/vars.css b/packages/fds-theme/components/avatar/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/avatar/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/badge/index.css b/packages/fds-theme/components/badge/index.css deleted file mode 100644 index 118851e..0000000 --- a/packages/fds-theme/components/badge/index.css +++ /dev/null @@ -1,74 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -.spectrum-Badge { - display: inline-flex; - position: relative; - - width: fit-content; - - padding: var(--spectrum-global-dimension-size-50) 0; - - border-radius: var(--spectrum-border-radius); - - font-size: var(--spectrum-global-dimension-size-150); - line-height: var(--spectrum-global-font-line-height-medium); - - cursor: default; - - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; - font-smoothing: subpixel-antialiased; - - /* label should always have padding at the end */ - .spectrum-Badge-label { - order: 1; /* always be after the icon, regardless of DOM order */ - padding-inline-end: var(--spectrum-global-dimension-size-115); - } - - .spectrum-Badge-icon { - flex-shrink: 0; - order: 0; /* always be before the label, regardless of DOM order */ - padding-inline-start: var(--spectrum-global-dimension-size-115); - } - /* icon + text buttons should have padding between the text and icon no matter the order */ - .spectrum-Badge-icon + .spectrum-Badge-label { - padding-inline-start: var(--spectrum-global-dimension-size-100); - } - - .spectrum-Badge-label:not([hidden]) + .spectrum-Badge-icon { - padding-inline-end: var(--spectrum-global-dimension-size-100); - } - - /* text only buttons should have padding at the start */ - .spectrum-Badge-label:only-child { - padding-inline-start: var(--spectrum-global-dimension-size-115); - } - - /* icon only buttons should have padding at the end */ - .spectrum-Badge-icon:only-child { - padding-inline-start: var(--spectrum-global-dimension-size-50); - padding-inline-end: var(--spectrum-global-dimension-size-50); - } -} - -.spectrum-Badge--large { - font-size: var(--spectrum-global-dimension-size-175); - padding: var(--spectrum-global-dimension-size-100) var(--spectrum-global-dimension-size-150); -} - -.spectrum-Badge--small { - font-size: var(--spectrum-global-dimension-font-size-50); - padding: var(--spectrum-global-dimension-size-40) var(--spectrum-global-dimension-size-85); -} diff --git a/packages/fds-theme/components/badge/skin.css b/packages/fds-theme/components/badge/skin.css deleted file mode 100644 index 5b02a57..0000000 --- a/packages/fds-theme/components/badge/skin.css +++ /dev/null @@ -1,61 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Badge { - color: var(--spectrum-label-colored-text-color); -} - -.spectrum-Badge--neutral { - background-color: var(--spectrum-semantic-neutral-color-background); -} - -.spectrum-Badge--negative { - background-color: var(--spectrum-semantic-negative-color-background); -} - -.spectrum-Badge--yellow { - color: var(--spectrum-global-color-static-black); - background-color: var(--spectrum-yellow-background-color-default); -} - -.spectrum-Badge--seafoam { - color: var(--spectrum-gray-50); - background-color: var(--spectrum-seafoam-background-color-default); -} - -.spectrum-Badge--positive { - background-color: var(--spectrum-semantic-positive-color-background); -} - -.spectrum-Badge--info { - background-color: var(--spectrum-semantic-informative-color-background); -} - -.spectrum-Badge--fuchsia { - color: var(--spectrum-gray-50); - background-color: var(--spectrum-fuchsia-background-color-default); -} - -.spectrum-Badge--indigo { - color: var(--spectrum-gray-50); - background-color: var(--spectrum-indigo-background-color-default); -} - -.spectrum-Badge--magenta { - color: var(--spectrum-gray-50); - background-color: var(--spectrum-magenta-background-color-default); -} - -.spectrum-Badge--purple { - color: var(--spectrum-gray-50); - background-color: var(--spectrum-purple-background-color-default); -} diff --git a/packages/fds-theme/components/badge/vars.css b/packages/fds-theme/components/badge/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/badge/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/banner/index.css b/packages/fds-theme/components/banner/index.css deleted file mode 100644 index 6791815..0000000 --- a/packages/fds-theme/components/banner/index.css +++ /dev/null @@ -1,31 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -.spectrum-Banner { - display: inline-block; - border-radius: var(--spectrum-banner-border-radius); - padding: var(--spectrum-banner-padding-y) var(--spectrum-banner-padding-x); - font-size: var(--spectrum-banner-text-size); - line-height: var(--spectrum-banner-text-line-height); -} - -.spectrum-Banner-header { - font-weight: bold; -} - -.spectrum-Banner--corner { - position: absolute; - top: -10px; - right: -10px; -} diff --git a/packages/fds-theme/components/banner/skin.css b/packages/fds-theme/components/banner/skin.css deleted file mode 100644 index 588e688..0000000 --- a/packages/fds-theme/components/banner/skin.css +++ /dev/null @@ -1,27 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Banner { - color: var(--spectrum-banner-text-color); -} - -.spectrum-Banner--info { - background-color: var(--spectrum-banner-info-background-color); -} - -.spectrum-Banner--warning { - background-color: var(--spectrum-banner-warning-background-color); -} - -.spectrum-Banner--error { - background-color: var(--spectrum-banner-error-background-color); -} diff --git a/packages/fds-theme/components/banner/vars.css b/packages/fds-theme/components/banner/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/banner/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/barloader/index.css b/packages/fds-theme/components/barloader/index.css deleted file mode 100644 index 54eb875..0000000 --- a/packages/fds-theme/components/barloader/index.css +++ /dev/null @@ -1,139 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -.spectrum-BarLoader { - position: relative; - display: inline-flex; - flex-flow: row wrap; - justify-content: space-between; - align-items: center; - min-inline-size: var(--spectrum-global-dimension-static-size-600); - inline-size: var(--spectrum-barloader-large-width); - vertical-align: top; - isolation: isolate; - - &.spectrum-BarLoader--indeterminate { - max-inline-size: var(--spectrum-barloader-large-width); - } - - &.spectrum-BarLoader--indeterminate.spectrum-BarLoader--sideLabel { - .spectrum-BarLoader-track { - max-inline-size: var(--spectrum-barloader-large-width); - inline-size: 100%; - } - } -} - -.spectrum-BarLoader-track { - /* Visually apply border radius to child elements */ - overflow: hidden; - min-inline-size: var(--spectrum-global-dimension-static-size-600); - inline-size: 100%; - height: var(--spectrum-barloader-large-height); - border-radius: var(--spectrum-barloader-large-border-radius); - z-index: 1; /* to fix a weird webkit bug with rounded corners and masking */ -} - -.spectrum-BarLoader-fill { - border: none; - height: var(--spectrum-barloader-large-height); - - transition: width 1s; -} - -.spectrum-BarLoader-label, -.spectrum-BarLoader-percentage { - font-size: var(--spectrum-fieldlabel-text-size); - font-weight: var(--spectrum-fieldlabel-text-font-weight); - line-height: var(--spectrum-fieldlabel-text-line-height); - text-align: start; - margin-bottom: var(--spectrum-barloader-large-label-gap-y); -} - -.spectrum-BarLoader-label { - flex: 1 1 0%; -} - -.spectrum-BarLoader-percentage { - align-self: flex-start; - margin-inline-start: var(--spectrum-barloader-small-label-gap-x); -} - -.spectrum-BarLoader--sideLabel { - display: inline-flex; - flex-flow: row; - justify-content: space-between; - min-inline-size: fit-content; - - .spectrum-BarLoader-track { - inline-size: inherit; - } - - .spectrum-BarLoader-label { - margin-inline-end: var(--spectrum-barloader-large-label-gap-x); - margin-bottom: 0; - } - .spectrum-BarLoader-percentage { - order: 3; - text-align: end; - margin-inline-start: var(--spectrum-barloader-large-label-gap-x); - margin-bottom: 0; - } -} - -.spectrum-BarLoader--small { - min-inline-size: var(--spectrum-global-dimension-static-size-600); - - .spectrum-BarLoader-fill { - height: var(--spectrum-barloader-small-height); - } - - .spectrum-BarLoader-track { - height: var(--spectrum-barloader-small-height); - border-radius: var(--spectrum-barloader-small-border-radius); - } -} -.spectrum-BarLoader--indeterminate .spectrum-BarLoader-fill { - inline-size: var(--spectrum-barloader-large-indeterminate-fill-width); - position: relative; - animation-duration: var(--spectrum-barloader-large-indeterminate-duration); - animation-iteration-count: infinite; - animation-timing-function: var(--spectrum-barloader-large-indeterminate-animation-ease); - will-change: transform; - - [dir='ltr'] & { - animation-name: indeterminate-loop-ltr; - } - [dir='rtl'] & { - animation-name: indeterminate-loop-rtl; - } -} - -@keyframes indeterminate-loop-ltr { - from { - transform: translate(calc(var(--spectrum-barloader-large-indeterminate-fill-width) * -1)); - } - to { - transform: translate(var(--spectrum-barloader-large-width)); - } -} - -@keyframes indeterminate-loop-rtl { - from { - transform: translate(var(--spectrum-barloader-large-width)); - } - to { - transform: translate(calc(var(--spectrum-barloader-large-width) * -1)); - } -} diff --git a/packages/fds-theme/components/barloader/skin.css b/packages/fds-theme/components/barloader/skin.css deleted file mode 100644 index 3954872..0000000 --- a/packages/fds-theme/components/barloader/skin.css +++ /dev/null @@ -1,98 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-BarLoader { - --spectrum-barloader-large-track-fill-color: var(--spectrum-accent-color-900); - --spectrum-barloader-static-black-track-color: rgba(0, 0, 0, 0.25); - --spectrum-barloader-static-black-fill-color: var(--spectrum-global-color-static-black); - - .spectrum-BarLoader-fill { - background: var(--spectrum-barloader-large-track-fill-color); - } - - .spectrum-BarLoader-track { - background-color: var(--spectrum-barloader-large-track-color); - } - - &.spectrum-BarLoader--overBackground, - &.spectrum-BarLoader--staticWhite { - .spectrum-BarLoader-fill { - background: var(--spectrum-barloader-large-over-background-track-fill-color); - } - - .spectrum-BarLoader-label, - .spectrum-BarLoader-percentage { - color: var(--spectrum-barloader-large-over-background-track-fill-color); - } - - .spectrum-BarLoader-track { - background-color: var(--spectrum-barloader-large-over-background-track-color); - } - } - /* TODO: use semantic tokens or spectrum variables when available */ - &.spectrum-BarLoader--staticBlack { - .spectrum-BarLoader-track { - background-color: var(--spectrum-barloader-static-black-track-color); - } - - .spectrum-BarLoader-label, - .spectrum-BarLoader-percentage { - color: var(--spectrum-barloader-static-black-fill-color); - } - - .spectrum-BarLoader-fill { - background: var(--spectrum-barloader-static-black-fill-color); - } - } - &.is-positive { - .spectrum-BarLoader-fill { - background: var(--spectrum-meter-large-track-color-positive); - } - } - &.is-warning { - .spectrum-BarLoader-fill { - background: var(--spectrum-meter-large-track-color-warning); - } - } - &.is-critical { - .spectrum-BarLoader-fill { - background: var(--spectrum-meter-large-track-color-critical); - } - } -} -.spectrum-BarLoader-label, -.spectrum-BarLoader-percentage { - color: var(--spectrum-fieldlabel-text-color); -} -.spectrum-BarLoader-label, -.spectrum-BarLoader-percentage { - color: var(--spectrum-fieldlabel-text-color); -} -.spectrum-BarLoader-label, -.spectrum-BarLoader-percentage { - color: var(--spectrum-fieldlabel-text-color); -} -@media (forced-colors: active) { - .spectrum-BarLoader-track { - forced-color-adjust: none; - --spectrum-barloader-large-track-fill-color: ButtonText; - --spectrum-barloader-large-over-background-track-fill-color: ButtonText; - --spectrum-barloader-large-over-background-track-color: ButtonFace; - --spectrum-barloader-static-black-track-color: ButtonFace; - --spectrum-barloader-static-black-fill-color: ButtonText; - --spectrum-meter-large-track-color-positive: ButtonText; - --spectrum-meter-large-track-color-warning: ButtonText; - --spectrum-meter-large-track-color-critical: ButtonText; - --spectrum-barloader-large-track-color: ButtonFace; - border: 1px solid ButtonText; - } -} diff --git a/packages/fds-theme/components/barloader/vars.css b/packages/fds-theme/components/barloader/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/barloader/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/breadcrumb/index.css b/packages/fds-theme/components/breadcrumb/index.css deleted file mode 100644 index c0869f7..0000000 --- a/packages/fds-theme/components/breadcrumb/index.css +++ /dev/null @@ -1,184 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -:root { - --spectrum-breadcrumb-separator-icon-position-adjustment: var(--spectrum-global-dimension-size-10); -} - -.spectrum-Breadcrumbs { - display: flex; - justify-content: flex-start; - list-style-type: none; - flex-wrap: nowrap; - flex-grow: 1; - flex-shrink: 0; - flex-basis: 0%; - - margin: 0; - padding: 0; -} - -.spectrum-Breadcrumbs-itemSeparator { - position: relative; - - /* Fix alignment, it's not quite centered */ - top: xvar(--spectrum-breadcrumb-separator-icon-position-adjustment); - - width: var(--spectrum-breadcrumb-ui-icon-width); - height: var(--spectrum-breadcrumb-ui-icon-height); - - transform: scale(1); - - opacity: 1; - - &.is-reversed { - transform: scale(-1); - } -} - -.spectrum-Breadcrumbs-item { - display: inline-flex; - align-items: center; - justify-content: flex-start; - - box-sizing: border-box; - height: var(--spectrum-breadcrumb-list-height); - - position: relative; - - white-space: nowrap; - font-size: var(--spectrum-breadcrumb-item-text-size); - font-weight: var(--spectrum-breadcrumb-item-text-font-weight); - line-height: var(--spectrum-breadcrumb-item-text-line-height); - - &:last-of-type { - font-weight: var(--spectrum-breadcrumb-title-text-font-weight); - - .spectrum-Breadcrumbs-itemSeparator { - display: none; - } - } - - &:not(:first-child) { - > .spectrum-Breadcrumbs-actionButton { - margin-inline-start: var(--spectrum-breadcrumb-button-gap); - } - } - > .spectrum-Breadcrumbs-actionButton { - margin-inline-end: var(--spectrum-breadcrumb-button-gap); - } - - /* last breadcrumb should truncate with an ellipsis */ - &:last-child { - overflow: hidden; - .spectrum-Breadcrumbs-itemLink { - overflow: hidden; - text-overflow: ellipsis; - } - } -} - -.spectrum-Breadcrumbs-itemLink { - cursor: default; - position: relative; - - line-height: var(--spectrum-breadcrumb-list-height); - vertical-align: middle; - - padding: 0 var(--spectrum-breadcrumb-item-padding-x); - height: var(--spectrum-breadcrumb-list-height); - - margin-inline-end: var(--spectrum-breadcrumb-item-margin-right); - - border-radius: var(--spectrum-breadcrumb-item-border-radius); - - outline: none; - - text-decoration: none; - /* override webkit and user agent h1 */ - margin-block-start: 0; - margin-block-end: 0; - font-size: inherit; - - &:not([aria-disabled]) { - cursor: pointer; - - &:hover, - &:focus-visible { - text-decoration: underline; - } - } -} - - -.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, -.spectrum-Breadcrumbs-itemLink:focus-visible:before { - position: absolute; - top: 0; - inset-inline-start: 0; - - box-sizing: border-box; - display: block; - width: 100%; - height: 100%; - - border-width: var(--spectrum-breadcrumb-item-border-size-key-focus); - border-style: solid; - border-radius: var(--spectrum-breadcrumb-item-border-radius); - - content: ''; - pointer-events: none; -} - -.spectrum-Breadcrumbs--small { - .spectrum-Breadcrumbs-item { - font-size: var(--spectrum-breadcrumb-multiline-item-text-size); - } -} - -.spectrum-Breadcrumbs--medium { - .spectrum-Breadcrumbs-item { - font-size: var(--spectrum-breadcrumb-compact-item-text-size); - } -} - -.spectrum-Breadcrumbs--multiline { - flex-wrap: wrap; - - .spectrum-Breadcrumbs-item { - &:last-of-type { - height: auto; - - flex: 0 1 100%; - - margin-top: var(--spectrum-breadcrumb-multiline-title-margin-top); - - font-size: var(--spectrum-breadcrumb-multiline-title-text-size); - font-weight: var(--spectrum-breadcrumb-multiline-title-text-font-weight); - line-height: var(--spectrum-breadcrumb-multiline-title-text-line-height); - - .spectrum-Breadcrumbs-itemLink { - height: auto; - text-decoration: none; - } - } - - .spectrum-Heading--pageTitle { - margin: 0; - - font-size: inherit; - font-weight: inherit; - } - } -} diff --git a/packages/fds-theme/components/breadcrumb/skin.css b/packages/fds-theme/components/breadcrumb/skin.css deleted file mode 100644 index e37172c..0000000 --- a/packages/fds-theme/components/breadcrumb/skin.css +++ /dev/null @@ -1,108 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Breadcrumbs-item { - color: var(--spectrum-breadcrumb-text-color); - - &.is-dragged { - .spectrum-Breadcrumbs-itemLink { - color: var(--spectrum-breadcrumb-item-text-color-drop); - background-color: var(--spectrum-breadcrumb-item-background-color-drop); - - &:before { - border-color: var(--spectrum-breadcrumb-item-border-color-drop); - } - } - } - - .spectrum-Breadcrumbs-itemSeparator { - color: var(--spectrum-breadcrumb-ui-icon-color); - } - - .spectrum-Breadcrumbs-itemLink { - color: inherit; - - &:hover { - color: var(--spectrum-breadcrumb-text-color-hover); - } - - &:focus-visible { - color: var(--spectrum-breadcrumb-text-color-key-focus); - - &:before { - border-color: var(--spectrum-breadcrumb-item-border-color-key-focus); - } - } - - &:active { - color: var(--spectrum-breadcrumb-text-color-down); - border-bottom: 0; - } - - &.is-disabled { - color: var(--spectrum-label-text-color-disabled); - } - } - - &.is-selected, - &:last-of-type { - color: var(--spectrum-breadcrumb-text-color-down); - } - - &.is-selected { - ~ .spectrum-Breadcrumb { - &:last-of-type { - color: var(--spectrum-breadcrumb-text-color); - } - } - .spectrum-Breadcrumbs-itemLink { - &:focus-visible { - color: var(--spectrum-breadcrumb-text-color-down); - border-bottom: 0; - } - } - } -} -@media (forced-colors: active) { - .spectrum-Breadcrumbs-item { - --spectrum-breadcrumb-item-border-color-drop: LinkText; - --spectrum-breadcrumb-item-border-color-key-focus: CanvasText; - --spectrum-breadcrumb-item-text-color-drop: LinkText; - --spectrum-breadcrumb-text-color: LinkText; - --spectrum-breadcrumb-text-color-down: CanvasText; - --spectrum-breadcrumb-text-color-hover: LinkText; - --spectrum-breadcrumb-text-color-key-focus: LinkText; - --spectrum-breadcrumb-ui-icon-color: CanvasText; - --spectrum-label-text-color-disabled: GrayText; - /* Override the selected to be the Standard Text color */ - &.is-selected, - &:last-of-type { - color: var(--spectrum-breadcrumb-text-color-down); - .spectrum-Breadcrumbs-itemLink { - &:hover { - color: var(--spectrum-breadcrumb-text-color-down); - } - } - } - /* Make links stay link color when clicked and disabled links remain disabled color */ - .spectrum-Breadcrumbs-itemLink { - &:active { - color: var(--spectrum-breadcrumb-text-color); - } - &.is-disabled { - &:active { - color: var(--spectrum-label-text-color-disabled); - } - } - } - } -} diff --git a/packages/fds-theme/components/breadcrumb/vars.css b/packages/fds-theme/components/breadcrumb/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/breadcrumb/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/button/index.css b/packages/fds-theme/components/button/index.css deleted file mode 100644 index 806ead8..0000000 --- a/packages/fds-theme/components/button/index.css +++ /dev/null @@ -1,389 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -:root { - /* Todo: fix in DNA, should have been zero */ - --spectrum-fieldbutton-quiet-border-size: 0; - --spectrum-fieldbutton-disabled-border-size: 0; - --spectrum-fieldbutton-quiet-margin: 0; - --spectrum-fieldbutton-quiet-padding: 0; - - /* Hardcoded for wrapping study, needs to be in DNA */ - --spectrum-button-padding-y: var(--spectrum-global-dimension-size-50); - --spectrum-button-line-height: 1.3; -} - -.spectrum-BaseButton { - /* Contain halo */ - position: relative; - - display: inline-flex; - box-sizing: border-box; - - align-items: center; - justify-content: center; - - /* Show the button overflow in Edge. */ - overflow: visible; - - /* Remove button the margin in Firefox and Safari. */ - margin: 0; - - border-style: solid; - border-radius: var(--spectrum-button-border-radius); - border-width: var(--spectrum-button-border-width); - --spectrum-focus-ring-border-radius: var(--spectrum-button-border-radius); - --spectrum-focus-ring-border-size: var(--spectrum-button-border-width); - --spectrum-focus-ring-gap: var(--spectrum-alias-focus-ring-gap); - --spectrum-focus-ring-size: var(--spectrum-button-primary-focus-ring-size-key-focus); - - /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */ - text-transform: none; - -webkit-font-smoothing: antialiased; - /* Font smoothing for Firefox */ - -moz-osx-font-smoothing: grayscale; - - &button { - /* Correct the inability to style clickable types in iOS and Safari. */ - -webkit-appearance: button; - } - - /* Adjacent buttons should be aligned correctly */ - vertical-align: top; - - transition: background var(--spectrum-global-animation-duration-100) ease-out, - border-color var(--spectrum-global-animation-duration-100) ease-out, - color var(--spectrum-global-animation-duration-100) ease-out, - box-shadow var(--spectrum-global-animation-duration-100) ease-out; - - text-decoration: none; - - composes: i18nFontFamily; - - line-height: var(--spectrum-button-line-height); - - user-select: none; - -webkit-user-select: none; - touch-action: none; /* prevent touch scrolling on buttons */ - - cursor: default; - - isolation: isolate; - - &:focus { - outline: none; - } - &:focus-visible { - z-index: 3; - } - - /* Fix Firefox */ - &::-moz-focus-inner { - border: 0; - - /* Remove the inner border and padding for button in Firefox. */ - border-style: none; - padding: 0; - - /* Use uppercase PX so values don't get converted to rem */ - margin-block-start: -2PX; - margin-block-end: -2PX; - } - - &:disabled, - &.is-disabled { - cursor: default; - } - - .spectrum-Icon { - max-block-size: 100%; - flex-shrink: 0; - order: 0; /* always be before the label, regardless of DOM order */ - - transition: background var(--spectrum-global-animation-duration-100) ease-out, - fill var(--spectrum-global-animation-duration-100) ease-out; - box-sizing: initial; - } -} - -.spectrum-Button { - composes: spectrum-BaseButton spectrum-FocusRing; - - border-style: solid; - --spectrum-button-border-radius: var(--spectrum-button-primary-border-radius); - --spectrum-button-border-width: var(--spectrum-button-primary-border-size); - - min-block-size: var(--spectrum-button-primary-height); - block-size: 0%; - min-inline-size: var(--spectrum-button-primary-min-width); - - padding: var(--spectrum-button-padding-y) calc(var(--spectrum-button-primary-padding-x) - var(--spectrum-button-primary-border-size)); - - /* @hack: fix button text vertical alignment at 14px */ - padding-block-end: calc(var(--spectrum-button-padding-y) + 1px); - padding-block-start: calc(var(--spectrum-button-padding-y) - 1px); - - font-size: var(--spectrum-button-primary-text-size); - font-weight: var(--spectrum-button-primary-text-font-weight); - - &:hover, - &:active { - box-shadow: none; - } - - /* there should be space between the icon and text no matter the DOM order */ - .spectrum-Icon + .spectrum-Button-label { - margin-inline-start: var(--spectrum-button-primary-text-gap); - } - - .spectrum-Button-label + .spectrum-Icon { - margin-inline-end: var(--spectrum-button-primary-text-gap); - } - - &.spectrum-Button--iconOnly { - min-inline-size: unset; - padding: var(--spectrum-global-dimension-size-65); - } - - .spectrum-Button-circleLoader { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - display: flex; - align-items: center; - } - - &.spectrum-Button--pending { - - .spectrum-Button-label, - .spectrum-Icon { - opacity: 0; - } - } -} - -a.spectrum-Button, -a.spectrum-ActionButton { - /* Remove appearance for clickable types in iOS and Safari. */ - -webkit-appearance: none; - /* Make link text not selectable */ - user-select: none; - cursor: pointer; -} - -.spectrum-ActionButton { - composes: spectrum-BaseButton spectrum-FocusRing; - position: relative; - - block-size: var(--spectrum-actionbutton-height); - min-inline-size: var(--spectrum-actionbutton-min-width); - - /* Use icon padding by default as it's smaller */ - padding: 0; - - --spectrum-button-border-radius: var(--spectrum-actionbutton-border-radius); - --spectrum-button-border-width: var(--spectrum-actionbutton-border-size); - - font-size: var(--spectrum-actionbutton-text-size); - font-weight: var(--spectrum-actionbutton-text-font-weight); - - /* icon should always have padding at the start */ - .spectrum-Icon { - padding-inline-start: var(--spectrum-actionbutton-icon-padding-x); - } - - /* label should always have padding at the end */ - .spectrum-ActionButton-label { - padding-inline-end: var(--spectrum-actionbutton-text-padding-x); - } - - /* icon + text buttons should have padding between the text and icon no matter the order */ - .spectrum-Icon + .spectrum-ActionButton-label { - padding-inline-start: var(--spectrum-actionbutton-icon-padding-x); - } - - .spectrum-ActionButton-label:not([hidden]) + .spectrum-Icon { - padding-inline-end: var(--spectrum-actionbutton-icon-padding-x); - } - - /* text only buttons should have padding at the start */ - .spectrum-ActionButton-label:only-child, - .spectrum-ActionButton-hold + .spectrum-ActionButton-label:last-child { - padding-inline-start: var(--spectrum-actionbutton-text-padding-x); - } - - /* icon only buttons should have padding at the end */ - .spectrum-Icon:only-child, - .spectrum-ActionButton-hold + .spectrum-Icon:last-child { - padding-inline-end: var(--spectrum-actionbutton-icon-padding-x); - } - - .spectrum-ActionGroup-itemIcon.spectrum-ActionGroup-itemIcon { - padding-inline-end: 0; - } -} - -.spectrum-ActionButton-hold { - position: absolute; - inset-inline-end: var(--spectrum-actionbutton-hold-icon-padding-right); - inset-block-end: var(--spectrum-actionbutton-hold-icon-padding-bottom); -} - -[dir='rtl'] .spectrum-ActionButton-hold { - transform: rotate(90deg); -} - -.spectrum-ActionButton-label, -.spectrum-Button-label { - align-self: center; - justify-self: center; - order: 1; /* always be after the icon, regardless of DOM order */ - - /* Fixes horizontal alignment of text in anchor buttons */ - text-align: center; - - /* @safari10 Workaround for https://bugs.webkit.org/show_bug.cgi?id=169700 */ - inline-size: 100%; - - &:empty { - display: none; - } -} - - -.spectrum-ActionButton-label { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.spectrum-ActionButton--quiet { - border-width: var(--spectrum-actionbutton-quiet-border-size); - border-radius: var(--spectrum-actionbutton-quiet-border-radius); - - font-size: var(--spectrum-actionbutton-quiet-text-size); - font-weight: var(--spectrum-actionbutton-quiet-text-font-weight); -} - -.spectrum-LogicButton { - composes: spectrum-BaseButton spectrum-FocusRing; - - block-size: var(--spectrum-logicbutton-and-height); - padding: var(--spectrum-logicbutton-and-padding-x); - - --spectrum-button-border-width: var(--spectrum-logicbutton-and-border-size); - --spectrum-button-border-radius: var(--spectrum-logicbutton-and-border-radius); - - font-size: var(--spectrum-logicbutton-and-text-size); - font-weight: var(--spectrum-logicbutton-and-text-font-weight); - line-height: 0; -} - -.spectrum-FieldButton { - composes: spectrum-BaseButton spectrum-FocusRing; - - position: relative; - block-size: var(--spectrum-dropdown-height); - - padding: 0 var(--spectrum-dropdown-padding-x); - - font-family: inherit; - font-weight: normal; - font-size: var(--spectrum-dropdown-text-size); - line-height: normal; - -webkit-font-smoothing: initial; - - cursor: default; - outline: none; - - --spectrum-focus-ring-gap: var(--spectrum-alias-input-focusring-gap); - --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size); -} - -.spectrum-FieldButton { - margin: 0; - padding-block: 0; - padding-inline: var(--spectrum-dropdown-padding-x); - - --spectrum-button-border-width: var(--spectrum-dropdown-border-size); - --spectrum-button-border-radius: var(--spectrum-border-radius); - border-style: solid; - - transition: background-color var(--spectrum-global-animation-duration-100), - box-shadow var(--spectrum-global-animation-duration-100), - border-color var(--spectrum-global-animation-duration-100); - - &:disabled, - &.is-disabled { - border-width: var(--spectrum-fieldbutton-disabled-border-size); - cursor: default; - } - - &.is-open { - border-width: var(--spectrum-dropdown-border-size); - } -} - -.spectrum-FieldButton--quiet { - composes: spectrum-FocusRing--quiet; - - margin: var(--spectrum-fieldbutton-quiet-margin); - padding: var(--spectrum-fieldbutton-quiet-padding); - - --spectrum-button-border-width: var(--spectrum-fieldbutton-quiet-border-size); - --spectrum-button-border-radius: var(--spectrum-fieldbutton-quiet-border-radius); - --spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size); - &:disabled, - &.is-disabled { - &:focus-visible { - box-shadow: none; - } - } -} - -.spectrum-ClearButton { - composes: spectrum-BaseButton spectrum-FocusRing; - - inline-size: var(--spectrum-clearbutton-medium-width); - block-size: var(--spectrum-clearbutton-medium-height); - - --spectrum-button-border-radius: 100%; - --spectrum-button-border-width: 0px; - - padding: 0; - margin: 0; - - border: none; - - > .spectrum-Icon { - /* @safari10 Workaround for https://bugs.webkit.org/show_bug.cgi?id=169700 */ - margin-block: 0; - margin-inline: auto; - } -} - -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .spectrum-ClearButton { - > .spectrum-Icon { - /* @ie11 Workaround for regression caused by fix for https://bugs.webkit.org/show_bug.cgi?id=169700 */ - margin: 0; - } - } -} - -.spectrum-ClearButton--small { - inline-size: var(--spectrum-clearbutton-small-width); - block-size: var(--spectrum-clearbutton-small-height); -} diff --git a/packages/fds-theme/components/button/skin.css b/packages/fds-theme/components/button/skin.css deleted file mode 100644 index f98423a..0000000 --- a/packages/fds-theme/components/button/skin.css +++ /dev/null @@ -1,1067 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -:root { - /* Overridden because of the way we draw focus rings */ - --spectrum-actionbutton-quiet-border-size-key-focus: 1px; - /* Interactions with overbackground button should match background. Not a DNA token, overridden in WHCM. */ - --spectrum-button-over-background-color: inherit; - - --spectrum-actionbutton-background-color-selected: var(--spectrum-alias-toggle-color-selected); - --spectrum-actionbutton-background-color-selected-hover: var(--spectrum-alias-toggle-color-selected-hover); - --spectrum-actionbutton-background-color-selected-key-focus: var(--spectrum-alias-toggle-color-selected-key-focus); - --spectrum-actionbutton-background-color-selected-down: var(--spectrum-alias-toggle-color-selected-down); - --spectrum-actionbutton-border-color-selected: var(--spectrum-alias-toggle-color-selected); - --spectrum-actionbutton-border-color-selected-hover: var(--spectrum-alias-toggle-color-selected-hover); - --spectrum-actionbutton-border-color-selected-key-focus: var(--spectrum-alias-toggle-color-selected-key-focus); - --spectrum-actionbutton-border-color-selected-down: var(--spectrum-alias-toggle-color-selected-down); - --spectrum-actionbutton-text-color-selected: var(--spectrum-gray-50); - --spectrum-actionbutton-text-color-selected-hover: var(--spectrum-gray-50); - --spectrum-actionbutton-text-color-selected-key-focus: var(--spectrum-gray-50); - --spectrum-actionbutton-text-color-selected-down: var(--spectrum-gray-50); - --spectrum-actionbutton-icon-color-selected: var(--spectrum-gray-50); - --spectrum-actionbutton-icon-color-selected-hover: var(--spectrum-gray-50); - --spectrum-actionbutton-icon-color-selected-key-focus: var(--spectrum-gray-50); - --spectrum-actionbutton-icon-color-selected-down: var(--spectrum-gray-50); - - --spectrum-actionbutton-emphasized-background-color-selected: var(--spectrum-accent-background-color-default); - --spectrum-actionbutton-emphasized-background-color-selected-hover: var(--spectrum-accent-background-color-hover); - --spectrum-actionbutton-emphasized-background-color-selected-key-focus: var(--spectrum-accent-background-color-key-focus); - --spectrum-actionbutton-emphasized-background-color-selected-down: var(--spectrum-accent-background-color-down); - --spectrum-actionbutton-emphasized-border-color-selected: var(--spectrum-accent-background-color-default); - --spectrum-actionbutton-emphasized-border-color-selected-hover: var(--spectrum-accent-background-color-hover); - --spectrum-actionbutton-emphasized-border-color-selected-key-focus: var(--spectrum-accent-background-color-key-focus); - --spectrum-actionbutton-emphasized-border-color-selected-down: var(--spectrum-accent-background-color-down); - - /* TBD on new tokens. This passes contrast for now. */ - --spectrum-logicbutton-and-background-color: var(--spectrum-global-color-static-blue-600); - --spectrum-logicbutton-and-background-color-hover: var(--spectrum-global-color-static-blue-700); - --spectrum-logicbutton-and-border-color: var(--spectrum-logicbutton-and-background-color); - --spectrum-logicbutton-and-border-color-hover: var(--spectrum-logicbutton-and-background-color-hover); - --spectrum-logicbutton-or-background-color: var(--spectrum-global-color-static-magenta-500); - --spectrum-logicbutton-or-background-color-hover: var(--spectrum-global-color-static-magenta-600); - --spectrum-logicbutton-or-border-color: var(--spectrum-logicbutton-or-background-color); - --spectrum-logicbutton-or-border-color-hover: var(--spectrum-logicbutton-or-background-color-hover); -} - -.spectrum-ClearButton { - background-color: var(--spectrum-clearbutton-medium-background-color); - color: var(--spectrum-clearbutton-medium-icon-color); - - .spectrum-Icon { - fill: var(--spectrum-clearbutton-medium-icon-color); - } - - &:hover { - background-color: var(--spectrum-clearbutton-medium-background-color-hover); - color: var(--spectrum-clearbutton-medium-icon-color-hover); - - .spectrum-Icon { - fill: var(--spectrum-clearbutton-medium-icon-color-hover); - } - } - - &.is-active { - background-color: var(--spectrum-clearbutton-medium-background-color-down); - color: var(--spectrum-clearbutton-medium-icon-color-down); - - .spectrum-Icon { - fill: var(--spectrum-clearbutton-medium-icon-color-down); - } - } - - &:focus-visible { - background-color: var(--spectrum-clearbutton-medium-background-color-key-focus); - color: var(--spectrum-clearbutton-medium-icon-color-key-focus); - - .spectrum-Icon { - fill: var(--spectrum-clearbutton-medium-icon-color-key-focus); - } - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-clearbutton-medium-background-color-disabled); - color: var(--spectrum-clearbutton-medium-icon-color-disabled); - - .spectrum-Icon { - fill: var(--spectrum-clearbutton-medium-icon-color-disabled); - } - } -} - -.spectrum-ClearButton--overBackground { - --spectrum-clearbutton-medium-background-color: transparent; - --spectrum-clearbutton-medium-background-color-hover: rgba(255, 255, 255, 0.1); - --spectrum-clearbutton-medium-background-color-key-focus: rgba(255, 255, 255, 0.1); - --spectrum-clearbutton-medium-background-color-down: rgba(255, 255, 255, 0.15); - --spectrum-clearbutton-medium-background-color-disabled: transparent; - --spectrum-clearbutton-medium-icon-color: white; - --spectrum-clearbutton-medium-icon-color-hover: white; - --spectrum-clearbutton-medium-icon-color-down: white; - --spectrum-clearbutton-medium-icon-color-key-focus: white; - --spectrum-clearbutton-medium-icon-color-disabled: rgba(255, 255, 255, 0.55); - --spectrum-focus-ring-color: white; -} - -.spectrum-Button { - &[data-style=fill] { - --spectrum-button-text-color: white; - --spectrum-button-text-color-hover: var(--spectrum-button-text-color); - --spectrum-button-text-color-down: var(--spectrum-button-text-color); - --spectrum-button-text-color-key-focus: var(--spectrum-button-text-color); - --spectrum-button-text-color-disabled: var(--spectrum-alias-text-color-disabled); - --spectrum-button-color-disabled: var(--spectrum-alias-background-color-disabled); - - /* high contrast overrides all colors */ - /* xvar is passed through. without it, some postcss plugin breaks variable fallback... */ - background-color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-button-color)); - border-color: transparent; - color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color)); - - &:hover { - background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-hover)); - color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color-hover)); - } - - &:focus-visible { - background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-key-focus)); - color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color-key-focus)); - } - - &.is-active { - background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-down)); - color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color-down)); - } - - &:disabled, - &.is-disabled { - background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-color-disabled)); - color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-button-text-color-disabled)); - } - } - - &[data-style=outline] { - --spectrum-button-text-color: var(--spectrum-button-color); - --spectrum-button-text-color-hover: var(--spectrum-button-color-hover); - --spectrum-button-text-color-down: var(--spectrum-button-color-down); - --spectrum-button-text-color-key-focus: var(--spectrum-button-color-key-focus); - --spectrum-button-text-color-disabled: var(--spectrum-alias-text-color-disabled); - --spectrum-button-color-disabled: var(--spectrum-alias-background-color-disabled); - - background-color: transparent; - border-color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-button-color)); - color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-button-text-color)); - - &:hover { - background-color: xvar(--spectrum-high-contrast-transparent, var(--spectrum-button-background-color-hover)); - border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-hover)); - color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-button-text-color-hover)); - } - - &:focus-visible { - background-color: xvar(--spectrum-high-contrast-transparent, var(--spectrum-button-background-color-key-focus)); - border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-key-focus)); - color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-button-text-color-key-focus)); - } - - &.is-active { - background-color: xvar(--spectrum-high-contrast-transparent, var(--spectrum-button-background-color-down)); - border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-down)); - color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-button-text-color-down)); - } - - &:disabled, - &.is-disabled { - background-color: transparent; - border-color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-button-color-disabled)); - color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-button-text-color-disabled)); - } - } - - &[data-static-color=white] { - --spectrum-focus-ring-color: white; - - &[data-variant=accent], - &[data-variant=negative], - &[data-variant=primary] { - &[data-style=fill] { - --spectrum-button-color: rgba(255, 255, 255, 0.9); - --spectrum-button-color-hover: white; - --spectrum-button-color-down: white; - --spectrum-button-color-key-focus: white; - --spectrum-button-color-disabled: rgba(255, 255, 255, 0.1); - --spectrum-button-text-color: black; - --spectrum-button-text-color-disabled: rgba(255, 255, 255, 0.55); - } - - &[data-style=outline] { - --spectrum-button-color: rgba(255, 255, 255, 0.9); - --spectrum-button-color-hover: white; - --spectrum-button-color-down: white; - --spectrum-button-color-key-focus: white; - --spectrum-button-color-disabled: rgba(255, 255, 255, 0.25); - --spectrum-button-text-color: white; - --spectrum-button-text-color-hover: white; - --spectrum-button-text-color-down: white; - --spectrum-button-text-color-key-focus: white; - --spectrum-button-text-color-disabled: rgba(255, 255, 255, 0.55); - --spectrum-button-background-color-hover: rgba(255, 255, 255, 0.1); - --spectrum-button-background-color-down: rgba(255, 255, 255, 0.15); - --spectrum-button-background-color-key-focus: rgba(255, 255, 255, 0.1); - } - } - - &[data-variant=secondary] { - &[data-style=fill] { - --spectrum-button-color: rgba(255, 255, 255, 0.07); - --spectrum-button-color-hover: rgba(255, 255, 255, 0.1); - --spectrum-button-color-down: rgba(255, 255, 255, 0.15); - --spectrum-button-color-key-focus: rgba(255, 255, 255, 0.1); - --spectrum-button-color-disabled: rgba(255, 255, 255, 0.1); - --spectrum-button-text-color: white; - --spectrum-button-text-color-disabled: rgba(255, 255, 255, 0.55); - } - - &[data-style=outline] { - --spectrum-button-color: rgba(255, 255, 255, 0.25); - --spectrum-button-color-hover: rgba(255, 255, 255, 0.4); - --spectrum-button-color-down: rgba(255, 255, 255, 0.55); - --spectrum-button-color-key-focus: rgba(255, 255, 255, 0.4); - --spectrum-button-color-disabled: rgba(255, 255, 255, 0.25); - --spectrum-button-text-color: white; - --spectrum-button-text-color-hover: white; - --spectrum-button-text-color-down: white; - --spectrum-button-text-color-key-focus: white; - --spectrum-button-text-color-disabled: rgba(255, 255, 255, 0.55); - --spectrum-button-background-color-hover: rgba(255, 255, 255, 0.1); - --spectrum-button-background-color-down: rgba(255, 255, 255, 0.15); - --spectrum-button-background-color-key-focus: rgba(255, 255, 255, 0.1); - } - } - } - - &[data-static-color=black] { - --spectrum-focus-ring-color: black; - - &[data-variant=accent], - &[data-variant=negative], - &[data-variant=primary] { - &[data-style=fill] { - --spectrum-button-color: rgba(0, 0, 0, 0.9); - --spectrum-button-color-hover: black; - --spectrum-button-color-down: black; - --spectrum-button-color-key-focus: black; - --spectrum-button-color-disabled: rgba(0, 0, 0, 0.1); - --spectrum-button-text-color: white; - --spectrum-button-text-color-disabled: rgba(0, 0, 0, 0.55); - } - - &[data-style=outline] { - --spectrum-button-color: rgba(0, 0, 0, 0.9); - --spectrum-button-color-hover: black; - --spectrum-button-color-down: black; - --spectrum-button-color-key-focus: black; - --spectrum-button-color-disabled: rgba(0, 0, 0, 0.25); - --spectrum-button-text-color: black; - --spectrum-button-text-color-hover: black; - --spectrum-button-text-color-down: black; - --spectrum-button-text-color-key-focus: black; - --spectrum-button-text-color-disabled: rgba(0, 0, 0, 0.55); - --spectrum-button-background-color-hover: rgba(0, 0, 0, 0.1); - --spectrum-button-background-color-down: rgba(0, 0, 0, 0.15); - --spectrum-button-background-color-key-focus: rgba(0, 0, 0, 0.1); - } - } - - &[data-variant=secondary] { - &[data-style=fill] { - --spectrum-button-color: rgba(0, 0, 0, 0.07); - --spectrum-button-color-hover: rgba(0, 0, 0, 0.1); - --spectrum-button-color-down: rgba(0, 0, 0, 0.15); - --spectrum-button-color-key-focus: rgba(0, 0, 0, 0.1); - --spectrum-button-color-disabled: rgba(0, 0, 0, 0.1); - --spectrum-button-text-color: black; - --spectrum-button-text-color-disabled: rgba(0, 0, 0, 0.55); - } - - &[data-style=outline] { - --spectrum-button-color: rgba(0, 0, 0, 0.25); - --spectrum-button-color-hover: rgba(0, 0, 0, 0.4); - --spectrum-button-color-down: rgba(0, 0, 0, 0.55); - --spectrum-button-color-key-focus: rgba(0, 0, 0, 0.4); - --spectrum-button-color-disabled: rgba(0, 0, 0, 0.25); - --spectrum-button-text-color: black; - --spectrum-button-text-color-hover: black; - --spectrum-button-text-color-down: black; - --spectrum-button-text-color-key-focus: black; - --spectrum-button-text-color-disabled: rgba(0, 0, 0, 0.55); - --spectrum-button-background-color-hover: rgba(0, 0, 0, 0.1); - --spectrum-button-background-color-down: rgba(0, 0, 0, 0.15); - --spectrum-button-background-color-key-focus: rgba(0, 0, 0, 0.1); - } - } - } - - &:not([data-static-color]) { - &[data-variant=accent] { - &[data-style=fill] { - --spectrum-button-color: var(--spectrum-accent-background-color-default); - --spectrum-button-color-hover: var(--spectrum-accent-background-color-hover); - --spectrum-button-color-down: var(--spectrum-accent-background-color-down); - --spectrum-button-color-key-focus: var(--spectrum-accent-background-color-key-focus); - } - - &[data-style=outline] { - --spectrum-button-color: var(--spectrum-accent-color-900); - --spectrum-button-color-hover: var(--spectrum-accent-color-1000); - --spectrum-button-color-down: var(--spectrum-accent-color-1100); - --spectrum-button-color-key-focus: var(--spectrum-accent-color-1000); - --spectrum-button-background-color-hover: var(--spectrum-accent-color-200); - --spectrum-button-background-color-down: var(--spectrum-accent-color-300); - --spectrum-button-background-color-key-focus: var(--spectrum-accent-color-200); - } - } - - &[data-variant=negative] { - &[data-style=fill] { - --spectrum-button-color: var(--spectrum-negative-background-color-default); - --spectrum-button-color-hover: var(--spectrum-negative-background-color-hover); - --spectrum-button-color-down: var(--spectrum-negative-background-color-down); - --spectrum-button-color-key-focus: var(--spectrum-negative-background-color-key-focus); - } - - &[data-style=outline] { - --spectrum-button-color: var(--spectrum-red-900); - --spectrum-button-color-hover: var(--spectrum-red-1000); - --spectrum-button-color-down: var(--spectrum-red-1100); - --spectrum-button-color-key-focus: var(--spectrum-red-1000); - --spectrum-button-background-color-hover: var(--spectrum-red-200); - --spectrum-button-background-color-down: var(--spectrum-red-300); - --spectrum-button-background-color-key-focus: var(--spectrum-red-200); - } - } - - &[data-variant=primary] { - &[data-style=fill] { - --spectrum-button-color: var(--spectrum-neutral-background-color-default); - --spectrum-button-color-hover: var(--spectrum-neutral-background-color-hover); - --spectrum-button-color-down: var(--spectrum-neutral-background-color-down); - --spectrum-button-color-key-focus: var(--spectrum-neutral-background-color-key-focus); - } - - &[data-style=outline] { - --spectrum-button-color: var(--spectrum-gray-800); - --spectrum-button-color-hover: var(--spectrum-gray-900); - --spectrum-button-color-down: var(--spectrum-gray-900); - --spectrum-button-color-key-focus: var(--spectrum-gray-900); - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-key-focus: var(--spectrum-gray-300); - } - } - - &[data-variant=secondary] { - --spectrum-button-text-color: var(--spectrum-gray-800); - --spectrum-button-text-color-hover: var(--spectrum-gray-900); - --spectrum-button-text-color-down: var(--spectrum-gray-900); - --spectrum-button-text-color-key-focus: var(--spectrum-gray-900); - - &[data-style=fill] { - --spectrum-button-color: var(--spectrum-gray-200); - --spectrum-button-color-hover: var(--spectrum-gray-300); - --spectrum-button-color-down: var(--spectrum-gray-400); - --spectrum-button-color-key-focus: var(--spectrum-gray-300); - } - - &[data-style=outline] { - --spectrum-button-color: var(--spectrum-gray-300); - --spectrum-button-color-hover: var(--spectrum-gray-400); - --spectrum-button-color-down: var(--spectrum-gray-500); - --spectrum-button-color-key-focus: var(--spectrum-gray-400); - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-key-focus: var(--spectrum-gray-300); - } - } - } -} - -@media (forced-colors: active) { - .spectrum-Button, - .spectrum-ActionButton, - .spectrum-FieldButton { - forced-color-adjust: none; - - --spectrum-high-contrast-transparent: transparent; - --spectrum-high-contrast-button-face: ButtonFace; - --spectrum-high-contrast-button-text: ButtonText; - --spectrum-high-contrast-highlight: Highlight; - --spectrum-high-contrast-highlight-text: HighlightText; - --spectrum-high-contrast-gray-text: GrayText; - } - - .spectrum-Button, - .spectrum-ActionButton { - --spectrum-high-contrast-focus-ring-color: ButtonText; - } - - .spectrum-FieldButton { - --spectrum-high-contrast-focus-ring-color: Highlight; - } -} - -@media (forced-colors: active) { - .spectrum-Button--pending.is-disabled { - /* Force the border for WHCM */ - border-color: var(--spectrum-high-contrast-gray-text); - } -} - -.spectrum-ActionButton { - background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-background-color)); - border-color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-border-color)); - color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-text-color)); - - .spectrum-Icon { - fill: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-icon-color)); - } - - .spectrum-ActionButton-hold { - fill: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-hold-icon-color)); - } - - &:hover { - background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-background-color-hover)); - border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-border-color-hover)); - color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-text-color-hover)); - - .spectrum-Icon { - fill: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-icon-color-hover)); - } - - .spectrum-ActionButton-hold { - fill: var(--spectrum-actionbutton-hold-icon-color-hover); - } - } - - &:focus-visible { - background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-background-color-key-focus)); - border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-border-color-hover)); - color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-text-color-key-focus)); - - .spectrum-Icon { - fill: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-icon-color-key-focus)); - } - - .spectrum-ActionButton-hold { - fill: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-hold-icon-color-key-focus)); - } - } - - &.is-active { - background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-background-color-down)); - border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-border-color-down)); - color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-text-color-down)); - - .spectrum-ActionButton-hold { - fill: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-hold-icon-color-down)); - } - } - - &:disabled, - &.is-disabled { - background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-background-color-disabled)); - border-color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-actionbutton-border-color-disabled)); - color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-actionbutton-text-color-disabled)); - - .spectrum-Icon { - fill: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-actionbutton-icon-color-disabled)); - } - - .spectrum-ActionButton-hold { - fill: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-actionbutton-hold-icon-color-disabled)); - } - } - - &.is-selected { - background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-background-color-selected)); - border-color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-border-color-selected)); - color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-text-color-selected)); - - .spectrum-Icon { - fill: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-icon-color-selected)); - } - - &:hover { - background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-background-color-selected-hover)); - border-color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-border-color-selected-hover)); - color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-text-color-selected-hover)); - - .spectrum-Icon { - fill: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-icon-color-selected-hover)); - } - } - - &:focus-visible { - background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-background-color-selected-key-focus)); - border-color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-border-color-selected-key-focus)); - color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-text-color-selected-key-focus)); - - .spectrum-Icon { - fill: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-icon-color-selected-key-focus)); - } - } - - &.is-active { - background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-background-color-selected-down)); - border-color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-border-color-selected-down)); - color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-text-color-selected-down)); - - .spectrum-Icon { - fill: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-icon-color-selected-down)); - } - } - - &:disabled, - &.is-disabled { - background-color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-actionbutton-background-color-selected-disabled)); - border-color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-actionbutton-border-color-selected-disabled)); - color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-text-color-selected-disabled)); - - .spectrum-Icon { - fill: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-icon-color-selected-disabled)); - } - } - } -} - -.spectrum-ActionButton--emphasized { - &.spectrum-ActionButton--quiet.is-selected, - &.is-selected { - background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-emphasized-background-color-selected)); - border-color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-border-color-selected)); - color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-text-color-selected)); - - .spectrum-Icon { - fill: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-icon-color-selected)); - } - - &:focus-visible { - background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-emphasized-background-color-selected-key-focus)); - border-color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-border-color-selected-hover)); - color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-text-color-selected-key-focus)); - - .spectrum-Icon { - fill: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-icon-color-selected-key-focus)); - } - } - - &:hover { - background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-emphasized-background-color-selected-hover)); - border-color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-border-color-selected-hover)); - color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-text-color-selected-hover)); - - .spectrum-Icon { - fill: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-icon-color-selected-hover)); - } - } - - &.is-active { - background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-emphasized-background-color-selected-down)); - border-color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-border-color-selected-down)); - color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-text-color-selected-down)); - - .spectrum-Icon { - fill: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-icon-color-selected-down)); - } - } - - &:disabled, - &.is-disabled { - background-color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-actionbutton-emphasized-background-color-selected-disabled)); - border-color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-actionbutton-emphasized-border-color-selected-disabled)); - color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-emphasized-text-color-selected-disabled)); - - .spectrum-Icon { - fill: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-emphasized-icon-color-selected-disabled)); - } - } - } -} - -.spectrum-ActionButton--quiet { - background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-quiet-background-color)); - border-color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-quiet-border-color)); - color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-quiet-text-color)); - - &:hover { - background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-quiet-background-color-hover)); - border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-quiet-border-color-hover)); - color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-quiet-text-color-hover)); - } - - &:focus-visible { - background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-quiet-background-color-key-focus)); - border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-quiet-border-color-hover)); - color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-quiet-text-color-key-focus)); - } - - &.is-active { - background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-quiet-background-color-down)); - border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-quiet-border-color-down)); - color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-quiet-text-color-down)); - } - - &:disabled, - &.is-disabled { - background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-quiet-background-color-disabled)); - border-color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-actionbutton-quiet-border-color-disabled)); - color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-actionbutton-quiet-text-color-disabled)); - } -} - -.spectrum-ActionButton--staticWhite { - mix-blend-mode: screen; - --spectrum-actionbutton-static-background-color: var(--spectrum-actionbutton-static-white-background-color); - --spectrum-actionbutton-static-background-color-hover: rgba(255, 255, 255, 0.1); - --spectrum-actionbutton-static-background-color-focus: rgba(255, 255, 255, 0.1); - --spectrum-actionbutton-static-background-color-active: rgba(255, 255, 255, 0.15); - --spectrum-actionbutton-static-background-color-disabled: var(--spectrum-actionbutton-static-white-background-color-disabled); - --spectrum-actionbutton-static-background-color-selected: rgba(255, 255, 255, 0.9); - --spectrum-actionbutton-static-background-color-selected-hover: white; - --spectrum-actionbutton-static-background-color-selected-focus: white; - --spectrum-actionbutton-static-background-color-selected-active: white; - --spectrum-actionbutton-static-background-color-selected-disabled: rgba(255, 255, 255, 0.1); - --spectrum-actionbutton-static-border-color: var(--spectrum-actionbutton-static-white-border-color); - --spectrum-actionbutton-static-border-color-hover: var(--spectrum-actionbutton-static-white-border-color-hover); - --spectrum-actionbutton-static-border-color-active: var(--spectrum-actionbutton-static-white-border-color-down); - --spectrum-actionbutton-static-border-color-selected: var(--spectrum-actionbutton-static-background-color-selected); - --spectrum-actionbutton-static-border-color-focus: var(--spectrum-actionbutton-static-white-border-color-key-focus); - --spectrum-actionbutton-static-border-color-disabled: var(--spectrum-actionbutton-static-white-border-color-disabled); - --spectrum-actionbutton-static-border-color-selected-disabled: var(--spectrum-actionbutton-static-white-border-color-selected-disabled); - --spectrum-actionbutton-static-color: white; - --spectrum-actionbutton-static-color-selected: black; /* becomes the background of the parent element due to mix-blend-mode */ - --spectrum-actionbutton-static-color-disabled: rgba(255, 255, 255, 0.55); - --spectrum-actionbutton-static-color-selected-disabled: var(--spectrum-actionbutton-static-color-disabled); -} - -.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet { - --spectrum-actionbutton-static-border-color: transparent; - --spectrum-actionbutton-static-border-color-hover: transparent; - --spectrum-actionbutton-static-border-color-active: transparent; - --spectrum-actionbutton-static-border-color-selected: transparent; -} - -.spectrum-ActionButton--staticBlack { - mix-blend-mode: multiply; - --spectrum-actionbutton-static-background-color: var(--spectrum-actionbutton-static-black-background-color); - --spectrum-actionbutton-static-background-color-hover: rgba(0, 0, 0, 0.1); - --spectrum-actionbutton-static-background-color-focus: rgba(0, 0, 0, 0.1); - --spectrum-actionbutton-static-background-color-active: rgba(0, 0, 0, 0.15); - --spectrum-actionbutton-static-background-color-selected: rgba(0, 0, 0, 0.9); - --spectrum-actionbutton-static-background-color-disabled: var(--spectrum-actionbutton-static-black-background-color-disabled); - --spectrum-actionbutton-static-background-color-selected-hover: black; - --spectrum-actionbutton-static-background-color-selected-focus: black; - --spectrum-actionbutton-static-background-color-selected-active: black; - --spectrum-actionbutton-static-background-color-selected-disabled: rgba(0, 0, 0, 0.1); - --spectrum-actionbutton-static-border-color: var(--spectrum-actionbutton-static-black-border-color); - --spectrum-actionbutton-static-border-color-hover: var(--spectrum-actionbutton-static-black-border-color-hover); - --spectrum-actionbutton-static-border-color-active: var(--spectrum-actionbutton-static-black-border-color-down); - --spectrum-actionbutton-static-border-color-selected: var(--spectrum-actionbutton-static-background-color-selected); - --spectrum-actionbutton-static-border-color-focus: var(--spectrum-actionbutton-static-black-border-color-key-focus); - --spectrum-actionbutton-static-border-color-disabled: var(--spectrum-actionbutton-static-black-border-color-disabled); - --spectrum-actionbutton-static-border-color-selected-disabled: var(--spectrum-actionbutton-static-black-border-color-selected-disabled); - --spectrum-actionbutton-static-color: black; - --spectrum-actionbutton-static-color-selected: white; /* becomes the background of the parent element due to mix-blend-mode */ - --spectrum-actionbutton-static-color-disabled: rgba(0, 0, 0, 0.55); - --spectrum-actionbutton-static-color-selected-disabled: var(--spectrum-actionbutton-static-color-disabled); -} - -.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet { - --spectrum-actionbutton-static-border-color: transparent; - --spectrum-actionbutton-static-border-color-hover: transparent; - --spectrum-actionbutton-static-border-color-active: transparent; - --spectrum-actionbutton-static-border-color-selected: transparent; -} - -.spectrum-ActionButton--staticColor { - background-color: var(--spectrum-actionbutton-static-background-color); - border-color: var(--spectrum-actionbutton-static-border-color); - color: var(--spectrum-actionbutton-static-color); - --spectrum-focus-ring-color: var(--spectrum-actionbutton-static-color); - - .spectrum-Icon { - fill: var(--spectrum-actionbutton-static-color); - } - - &:hover { - background-color: var(--spectrum-actionbutton-static-background-color-hover); - border-color: var(--spectrum-actionbutton-static-border-color-hover); - color: var(--spectrum-actionbutton-static-color); - - .spectrum-Icon { - fill: var(--spectrum-actionbutton-static-color); - } - - .spectrum-ActionButton-hold { - fill: var(--spectrum-actionbutton-static-color); - } - } - - &:focus-visible { - background-color: var(--spectrum-actionbutton-static-background-color-focus); - border-color: var(--spectrum-actionbutton-static-border-color-focus); - box-shadow: none; - color: var(--spectrum-actionbutton-static-color); - - &:hover { - border-color: var(--spectrum-actionbutton-static-border-color-focus); - } - - &.is-active { - border-color: var(--spectrum-actionbutton-static-border-color-focus); - } - - .spectrum-Icon { - fill: var(--spectrum-actionbutton-static-color); - } - - .spectrum-ActionButton-hold { - fill: var(--spectrum-actionbutton-static-color); - } - } - - &.is-active { - background-color: var(--spectrum-actionbutton-static-background-color-active); - border-color: var(--spectrum-actionbutton-static-border-color-active); - color: var(--spectrum-actionbutton-static-color); - - .spectrum-ActionButton-hold { - fill: var(--spectrum-actionbutton-static-color); - } - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-actionbutton-static-background-color-disabled); - border-color: var(--spectrum-actionbutton-static-border-color-disabled); - color: var(--spectrum-actionbutton-static-color-disabled); - - .spectrum-Icon { - fill: var(--spectrum-actionbutton-static-color-disabled); - } - - .spectrum-ActionButton-hold { - fill: var(--spectrum-actionbutton-static-color-disabled); - } - } - - &.spectrum-ActionButton--quiet.is-selected, - &.is-selected { - background-color: var(--spectrum-actionbutton-static-background-color-selected); - border-color: var(--spectrum-actionbutton-static-border-color-selected); - color: var(--spectrum-actionbutton-static-color-selected); - - .spectrum-Icon { - fill: var(--spectrum-actionbutton-static-color-selected); - } - - &:focus-visible { - background-color: var(--spectrum-actionbutton-static-background-color-selected-focus); - border-color: var(--spectrum-actionbutton-static-background-color-selected-focus); - color: var(--spectrum-actionbutton-static-color-selected); - box-shadow: none; - - .spectrum-Icon { - fill: var(--spectrum-actionbutton-static-color-selected); - } - } - - &:hover, - &.is-active { - background-color: var(--spectrum-actionbutton-static-background-color-selected-hover); - border-color: var(--spectrum-actionbutton-static-background-color-selected-hover); - color: var(--spectrum-actionbutton-static-color-selected); - - .spectrum-Icon { - fill: var(--spectrum-actionbutton-static-color-selected); - } - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-actionbutton-static-background-color-selected-disabled); - border-color: var(--spectrum-actionbutton-static-border-color-selected-disabled); - color: var(--spectrum-actionbutton-static-color-selected-disabled); - - .spectrum-Icon { - fill: var(--spectrum-actionbutton-static-color-selected-disabled); - } - - .spectrum-ActionButton-hold { - fill: var(--spectrum-actionbutton-static-color-disabled); - } - } - } - - &.spectrum-ActionButton--quiet { - /* Quiet action buttons always have transparent backgrounds, in both Spectrum and Express */ - --spectrum-actionbutton-static-background-color: transparent; - --spectrum-actionbutton-static-background-color-disabled: transparent; - --spectrum-actionbutton-static-border-color: transparent; - --spectrum-actionbutton-static-border-color-disabled: transparent; - --spectrum-actionbutton-static-border-color-selected-hover: transparent; - --spectrum-actionbutton-static-border-color-focus: transparent; - --spectrum-actionbutton-static-border-color-active: transparent; - --spectrum-actionbutton-static-border-color-selected-disabled: transparent; - } -} - -.spectrum-LogicButton--and { - background-color: var(--spectrum-logicbutton-and-background-color); - border-color: var(--spectrum-logicbutton-and-border-color); - color: var(--spectrum-logicbutton-and-text-color); - - &:hover { - background-color: var(--spectrum-logicbutton-and-background-color-hover); - border-color: var(--spectrum-logicbutton-and-border-color-hover); - color: var(--spectrum-logicbutton-and-text-color); - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-logicbutton-and-background-color-disabled); - border-color: var(--spectrum-logicbutton-and-border-color-disabled); - color: var(--spectrum-logicbutton-and-text-color-disabled); - } -} - -.spectrum-LogicButton--or { - background-color: var(--spectrum-logicbutton-or-background-color); - border-color: var(--spectrum-logicbutton-or-border-color); - color: var(--spectrum-logicbutton-or-text-color); - - &:hover { - background-color: var(--spectrum-logicbutton-or-background-color-hover); - border-color: var(--spectrum-logicbutton-or-border-color-hover); - color: var(--spectrum-logicbutton-or-text-color); - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-logicbutton-and-background-color-disabled); - border-color: var(--spectrum-logicbutton-and-border-color-disabled); - color: var(--spectrum-logicbutton-and-text-color-disabled); - } -} - -.spectrum-FieldButton { - color: var(--spectrum-fieldbutton-text-color); - background-color: var(--spectrum-fieldbutton-background-color); - border-color: var(--spectrum-fieldbutton-border-color); - - .spectrum-Icon { - fill: var(--spectrum-fieldbutton-icon-color); - } - - &:hover { - color: var(--spectrum-fieldbutton-text-color-hover); - background-color: var(--spectrum-fieldbutton-background-color-hover); - border-color: var(--spectrum-fieldbutton-border-color-hover); - - .spectrum-Icon { - fill: var(--spectrum-fieldbutton-icon-color-hover); - } - } - - &.is-active, - &.is-selected { - background-color: var(--spectrum-fieldbutton-background-color-down); - border-color: var(--spectrum-fieldbutton-border-color-down); - - .spectrum-Icon { - fill: var(--spectrum-fieldbutton-icon-color-down); - } - } - - &:focus-visible, - &.is-focused { - background-color: var(--spectrum-fieldbutton-background-color-key-focus); - border-color: var(--spectrum-fieldbutton-border-color-key-focus); - color: var(--spectrum-fieldbutton-text-color-key-focus); - - .spectrum-Icon { - fill: var(--spectrum-fieldbutton-icon-color-key-focus); - } - - &.is-placeholder { - fill: var(--spectrum-fieldbutton-placeholder-text-color-key-focus); - } - } - - &.spectrum-FieldButton--invalid { - border-color: var(--spectrum-fieldbutton-border-color-error); - - &:hover { - border-color: var(--spectrum-fieldbutton-border-color-error-hover); - } - - &.is-active, - &.is-selected { - border-color: var(--spectrum-fieldbutton-border-color-error-down); - } - - &:focus-visible, - &.is-focused { - border-color: var(--spectrum-fieldbutton-border-color-error-key-focus); - } - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-fieldbutton-background-color-disabled); - color: var(--spectrum-fieldbutton-text-color-disabled); - - & .spectrum-Icon { - fill: var(--spectrum-fieldbutton-icon-color-disabled); - } - } -} - -.spectrum-FieldButton--quiet { - color: var(--spectrum-fieldbutton-text-color); - border-color: var(--spectrum-fieldbutton-quiet-border-color); - background-color: var(--spectrum-fieldbutton-quiet-background-color); - - &:hover { - background-color: var(--spectrum-fieldbutton-quiet-background-color-hover); - color: var(--spectrum-fieldbutton-text-color-hover); - } - - &:focus-visible, - &.is-focused { - background-color: var(--spectrum-fieldbutton-quiet-background-color-key-focus); - - &.is-placeholder { - color: var(--spectrum-fieldbutton-quiet-placeholder-text-color-key-focus); - } - } - - &.is-active, - &.is-selected { - background-color: var(--spectrum-fieldbutton-quiet-background-color-down); - border-color: var(--spectrum-fieldbutton-quiet-border-color-down); - - &:focus-visible, - &.is-focused { - background-color: var(--spectrum-fieldbutton-quiet-background-color-key-focus); - } - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-fieldbutton-quiet-background-color-disabled); - color: var(--spectrum-fieldbutton-text-color-disabled); - } -} - -@media (forced-colors: active) { - .spectrum-ActionButton, - .spectrum-ClearButton, - .spectrum-LogicButton, - .spectrum-FieldButton { - forced-color-adjust: none; - --spectrum-clearbutton-medium-icon-color: ButtonText; - --spectrum-clearbutton-medium-icon-color-disabled: GrayText; - --spectrum-clearbutton-medium-icon-color-down: Highlight; - --spectrum-clearbutton-medium-icon-color-hover: Highlight; - --spectrum-clearbutton-medium-icon-color-key-focus: Highlight; - --spectrum-fieldbutton-background-color: ButtonFace; - --spectrum-fieldbutton-background-color-disabled: ButtonFace; - --spectrum-fieldbutton-background-color-down: ButtonFace; - --spectrum-fieldbutton-background-color-hover: ButtonFace; - --spectrum-fieldbutton-background-color-key-focus: ButtonFace; - --spectrum-fieldbutton-border-color: ButtonText; - --spectrum-fieldbutton-border-color-down: Highlight; - --spectrum-fieldbutton-border-color-error: ButtonText; - --spectrum-fieldbutton-border-color-error-down: Highlight; - --spectrum-fieldbutton-border-color-error-hover: Highlight; - --spectrum-fieldbutton-border-color-error-key-focus: Highlight; - --spectrum-fieldbutton-border-color-hover: Highlight; - --spectrum-fieldbutton-border-color-key-focus: Highlight; - --spectrum-fieldbutton-icon-color-disabled: GrayText; - --spectrum-fieldbutton-placeholder-text-color-key-focus: ButtonText; - --spectrum-fieldbutton-quiet-background-color: ButtonFace; - --spectrum-fieldbutton-quiet-background-color-disabled: ButtonFace; - --spectrum-fieldbutton-quiet-background-color-down: ButtonFace; - --spectrum-fieldbutton-quiet-background-color-hover: ButtonFace; - --spectrum-fieldbutton-quiet-background-color-key-focus: ButtonFace; - --spectrum-fieldbutton-quiet-border-color: ButtonFace; - --spectrum-fieldbutton-quiet-border-color-down: Highlight; - --spectrum-fieldbutton-quiet-placeholder-text-color-key-focus: ButtonText; - --spectrum-fieldbutton-text-color: ButtonText; - --spectrum-fieldbutton-text-color-disabled: GrayText; - --spectrum-fieldbutton-text-color-hover: ButtonText; - --spectrum-fieldbutton-text-color-key-focus: ButtonText; - --spectrum-logicbutton-and-background-color: ButtonFace; - --spectrum-logicbutton-and-background-color-disabled: ButtonFace; - --spectrum-logicbutton-and-background-color-hover: ButtonFace; - --spectrum-logicbutton-and-border-color: ButtonText; - --spectrum-logicbutton-and-border-color-disabled: GrayText; - --spectrum-logicbutton-and-border-color-hover: Highlight; - --spectrum-logicbutton-and-text-color: ButtonText; - --spectrum-logicbutton-and-text-color-disabled: GrayText; - --spectrum-logicbutton-or-background-color: ButtonFace; - --spectrum-logicbutton-or-background-color-hover: ButtonFace; - --spectrum-logicbutton-or-border-color: ButtonText; - --spectrum-logicbutton-or-border-color-hover: Highlight; - --spectrum-logicbutton-or-text-color: ButtonText; - --spectrum-button-primary-focus-ring-color-key-focus: CanvasText; - --spectrum-button-primary-focus-ring-size-key-focus: 3px; - --spectrum-dropdown-border-color-key-focus: Highlight; - } - - .spectrum-Button--overBackground { - --spectrum-button-over-background-color: ButtonText; - } - - .spectrum-ActionButton--staticColor, - .spectrum-ActionButton--staticWhite, - .spectrum-ActionButton--staticBlack, - .spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet, - .spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet { - /* For some reason, making this a var doesn't work, the value is inlined in the css */ - mix-blend-mode: normal; - --spectrum-actionbutton-static-background-color: ButtonFace; - --spectrum-actionbutton-static-background-color-disabled: var(--spectrum-high-contrast-transparent); - --spectrum-actionbutton-static-background-color-selected-disabled: GrayText; - --spectrum-actionbutton-static-background-color-hover: ButtonFace; - --spectrum-actionbutton-static-background-color-focus: ButtonFace; - --spectrum-actionbutton-static-background-color-active: ButtonFace; - --spectrum-actionbutton-static-background-color-selected: Highlight; - --spectrum-actionbutton-static-background-color-selected-hover: Highlight; - --spectrum-actionbutton-static-background-color-selected-focus: Highlight; - --spectrum-actionbutton-static-background-color-selected-active: Highlight; - --spectrum-actionbutton-static-background-color-selected-disabled: GrayText; - --spectrum-actionbutton-static-border-color: ButtonText; - --spectrum-actionbutton-static-border-color-hover: Highlight; - --spectrum-actionbutton-static-border-color-active: ButtonText; - --spectrum-actionbutton-static-border-color-focus: CanvasText; - --spectrum-actionbutton-static-border-color-disabled: GrayText; - --spectrum-actionbutton-static-border-color-selected-disabled: GrayText; - --spectrum-actionbutton-static-color: ButtonText; - --spectrum-actionbutton-static-color-selected: HighlightText; /* becomes the background of the parent element due to mix-blend-mode */ - --spectrum-actionbutton-static-color-disabled: GrayText; - --spectrum-actionbutton-static-color-selected-disabled: ButtonFace; - } -} diff --git a/packages/fds-theme/components/button/vars.css b/packages/fds-theme/components/button/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/button/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/buttongroup/index.css b/packages/fds-theme/components/buttongroup/index.css deleted file mode 100644 index 29ddd01..0000000 --- a/packages/fds-theme/components/buttongroup/index.css +++ /dev/null @@ -1,56 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -:root { - --spectrum-buttongroup-button-gap-reset: 0; -} - -.spectrum-ButtonGroup { - display: inline-flex; - align-items: flex-start; - /* necessary so that offsetLeft on button children is correct */ - position: relative; - - .spectrum-ButtonGroup-Button { - flex-shrink: 0; - } - - .spectrum-ButtonGroup-Button + .spectrum-ButtonGroup-Button { - margin-inline-start: var(--spectrum-buttongroup-button-gap-x); - } - - &.spectrum-ButtonGroup--alignEnd { - justify-content: flex-end; - } - - &.spectrum-ButtonGroup--alignCenter { - justify-content: center; - } -} - -.spectrum-ButtonGroup--vertical { - display: inline-flex; - flex-direction: column; - - .spectrum-ButtonGroup-Button + .spectrum-ButtonGroup-Button { - margin-block-start: var(--spectrum-buttongroup-button-gap-y); - margin-inline-start: var(--spectrum-buttongroup-button-gap-reset); - } - - &.spectrum-ButtonGroup--alignEnd { - align-items: flex-end; - } - - &.spectrum-ButtonGroup--alignCenter { - align-items: center; - } -} diff --git a/packages/fds-theme/components/buttongroup/vars.css b/packages/fds-theme/components/buttongroup/vars.css deleted file mode 100644 index 3df0b02..0000000 --- a/packages/fds-theme/components/buttongroup/vars.css +++ /dev/null @@ -1,13 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; diff --git a/packages/fds-theme/components/calendar/index.css b/packages/fds-theme/components/calendar/index.css deleted file mode 100644 index d904da5..0000000 --- a/packages/fds-theme/components/calendar/index.css +++ /dev/null @@ -1,324 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -:root { - --spectrum-calendar-border-radius-reset: 0; - --spectrum-calendar-border-width-reset: 0; - --spectrum-calendar-margin-y: 24px; - --spectrum-calendar-margin-x: 32px; - --spectrum-calendar-max-width: calc((var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12)); - --spectrum-calendar-min-width: calc(var(--spectrum-calendar-day-width) * 7); - --spectrum-calendar-button-gap: var(--spectrum-global-dimension-size-40); - --spectrum-calendar-title-margin-x: var(--spectrum-global-dimension-size-75); -} - -.spectrum-Calendar { - display: block; - isolation: isolate; -} - -.spectrum-Calendar--padded { - margin: var(--spectrum-calendar-margin-x) var(--spectrum-calendar-margin-y); -} - -.spectrum-Calendar-header { - display: grid; - grid-auto-flow: column; - grid-auto-columns: 1fr; - width: 100%; - gap: var(--spectrum-global-dimension-size-300); -} - -.spectrum-Calendar-monthHeader { - display: grid; - grid-template-areas: 'prev title next'; - grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr); - align-content: start; - width: 100%; - min-width: var(--spectrum-calendar-min-width); - max-width: var(--spectrum-calendar-max-width); - padding: 0 var(--spectrum-calendar-button-gap); - box-sizing: border-box; -} - -.spectrum-Calendar-title { - font-size: var(--spectrum-calendar-title-text-size); - font-weight: bold; - - line-height: var(--spectrum-calendar-title-height); - margin: 0 var(--spectrum-calendar-title-margin-x); - grid-area: title; - - text-align: center; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.spectrum-Calendar-prevMonth { - grid-area: prev; - justify-self: start; -} - -.spectrum-Calendar-nextMonth { - grid-area: next; - justify-self: end; -} - -.spectrum-Calendar-months { - display: grid; - grid-auto-flow: column; - grid-auto-columns: 1fr; - gap: var(--spectrum-global-dimension-size-300); - align-items: start; -} - -.spectrum-Calendar-dayOfWeek { - display: flex; - flex-direction: column; - justify-content: flex-end; - height: 100%; - - width: 100%; - - border-bottom: none !important; /* override abbr styling from normalize.css */ - - font-size: var(--spectrum-calendar-day-title-text-size); - font-weight: var(--spectrum-calendar-day-title-text-font-weight); - text-transform: uppercase; - text-decoration: none !important; /* override abbr styling from normalize.css */ - - cursor: default; - - &[title] { - /* Normalize abbr[title] */ - /* Remove the bottom border in Chrome 57- and Firefox 39-. */ - border-bottom: none; - - /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ - text-decoration: underline; - text-decoration: underline dotted; - } -} - -.spectrum-Calendar-body { - outline: none; -} - -.spectrum-Calendar-table { - table-layout: fixed; - width: 100%; - min-width: var(--spectrum-calendar-min-width); - max-width: var(--spectrum-calendar-max-width); - - border-collapse: collapse; - border-spacing: 0; - - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.spectrum-Calendar-tableCell { - text-align: center; - padding: 0; - position: relative; - box-sizing: content-box; - height: var(--spectrum-calendar-day-height); - width: var(--spectrum-calendar-day-width); - padding: var(--spectrum-calendar-day-padding) 0; - - &:focus { - outline: 0; - } -} - -.spectrum-Calendar-date { - /* This is fun, but we need to trick the table so it doesn't size itself in a weird way */ - position: absolute; - display: block; - top: 0; - left: 0; - - box-sizing: border-box; - - height: var(--spectrum-calendar-day-height); - width: 100%; - margin: var(--spectrum-calendar-day-padding) 0; - - border-radius: var(--spectrum-calendar-day-width); - - font-size: var(--spectrum-calendar-day-text-size); - line-height: var(--spectrum-calendar-day-height); - white-space: nowrap; - - cursor: default; - - /* compute the "auto" margin to center the date text manually rather than using the keyword to ensure consistent rounding. */ - --margin: calc((100% - var(--spectrum-calendar-day-width)) / 2); - - .spectrum-Calendar-dateText { - display: block; - width: var(--spectrum-calendar-day-width); - margin: 0 auto; - margin-inline-start: auto; - margin-inline-end: var(--margin); - } - - &:focus { - outline: 0; - } - - &:lang(ja), &:lang(zh), &:lang(ko) { - font-size: var(--spectrum-calendar-day-text-size-han); - } - - &.is-disabled { - cursor: default; - pointer-events: none; - } - - &.is-unavailable { - .spectrum-Calendar-dateText span { - position: relative; - - &:after { - content: ''; - position: absolute; - top: 50%; - left: -4px; - right: -4px; - height: 2px; - transform: rotate(-16deg); - border-radius: 1px; - background: currentColor; - } - } - } - - &.is-outsideMonth { - visibility: hidden; - } - - /* focus ring */ - &:before { - border-radius: calc(var(--spectrum-calendar-day-width) + var(--spectrum-alias-focus-ring-gap)); - content: ''; - display: block; - position: absolute; - top: calc(50% - calc(var(--spectrum-calendar-day-width) / 2)); - left: calc(50% - calc(var(--spectrum-calendar-day-width) / 2)); - width: calc(var(--spectrum-calendar-day-width) + var(--spectrum-alias-focus-ring-gap) * 2); - height: calc(var(--spectrum-calendar-day-height) + var(--spectrum-alias-focus-ring-gap) * 2); - margin: 0; - transform: translateX(0); /* Forces FF to render on the pixel grid */ - - transition: box-shadow var(--spectrum-global-animation-duration-100) ease-out, - margin var(--spectrum-global-animation-duration-100) ease-out; - } - - &.is-focused { - &:before { - margin: calc(var(--spectrum-alias-focus-ring-gap) * -1); - } - } - - /* hover and selected states */ - &:after { - position: absolute; - top: calc(50% - calc(var(--spectrum-calendar-day-width) / 2)); - left: calc(50% - calc(var(--spectrum-calendar-day-width) / 2)); - - display: block; - - height: var(--spectrum-calendar-day-height); - width: var(--spectrum-calendar-day-width); - - border-radius: var(--spectrum-calendar-day-width); - - content: ''; - z-index: -1; - } - - &.is-range-selection { - /* overrides to make the cells appear connected */ - margin: var(--spectrum-calendar-day-padding) 0; - border-width: var(--spectrum-calendar-border-width-reset); - line-height: var(--spectrum-calendar-day-height); - border-radius: var(--spectrum-calendar-border-radius-reset); - - &.is-range-start, - &.is-selection-start { - border-start-start-radius: var(--spectrum-calendar-day-width); - border-end-start-radius: var(--spectrum-calendar-day-width); - /* reduce the width by the "auto" margin and end align so the background doesn't extend to the left */ - inset-inline-start: auto; - inset-inline-end: 0; - width: calc(100% - var(--margin)); - - &:before, - &:after, - .spectrum-Calendar-dateText { - inset-inline-start: 0; - } - - &:after, - .spectrum-Calendar-dateText { - margin-inline-start: 0; - } - } - - &.is-range-end, - &.is-selection-end { - border-start-end-radius: var(--spectrum-calendar-day-width); - border-end-end-radius: var(--spectrum-calendar-day-width); - /* reduce the width by the "auto" margin and start align so the background doesn't extend to the right */ - /* this must be measured from the right rather than using width to avoid rounding errors in Safari */ - width: auto; - inset-inline-start: 0; - inset-inline-end: var(--margin); - - &:before, - &:after, - .spectrum-Calendar-dateText { - inset-inline-start: auto; - inset-inline-end: 0; - } - - &:after, - .spectrum-Calendar-dateText { - margin-inline-end: 0; - } - } - - &.is-selection-start.is-selection-end, - &.is-selection-start.is-range-end, - &.is-selection-end.is-range-start, - &.is-range-start.is-range-end { - width: var(--spectrum-calendar-day-width); - inset-inline-start: 0; - inset-inline-end: 0; - margin-inline-start: auto; - margin-inline-end: var(--margin); - border-radius: var(--spectrum-calendar-day-width); - - &:after, - .spectrum-Calendar-dateText { - margin-inline-start: auto; - margin-inline-end: var(--margin); - } - } - } -} diff --git a/packages/fds-theme/components/calendar/skin.css b/packages/fds-theme/components/calendar/skin.css deleted file mode 100644 index f161c53..0000000 --- a/packages/fds-theme/components/calendar/skin.css +++ /dev/null @@ -1,209 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Calendar-prevMonth { - color: var(--spectrum-calendar-button-icon-color); -} - -.spectrum-Calendar-nextMonth { - color: var(--spectrum-calendar-button-icon-color); -} - -.spectrum-Calendar-dayOfWeek { - color: var(--spectrum-calendar-day-title-text-color); -} - -.spectrum-Calendar-date { - --spectrum-calendar-day-background-color-cap-selected: var(--spectrum-accent-background-color-default); - --spectrum-calendar-day-background-color-cap-selected-hover: var(--spectrum-accent-background-color-hover); - --spectrum-calendar-day-background-color-cap-selected-down: var(--spectrum-accent-background-color-down); - --spectrum-calendar-day-background-color-cap-invalid-selected: var(--spectrum-negative-background-color-default); - --spectrum-calendar-day-background-color-cap-invalid-selected-hover: var(--spectrum-negative-background-color-hover); - --spectrum-calendar-day-background-color-cap-invalid-selected-down: var(--spectrum-negative-background-color-down); - --spectrum-calendar-day-background-color-selected-hover: var(--spectrum-alias-highlight-selected); - --spectrum-calendar-day-background-color-invalid-selected: var(--spectrum-alias-highlight-invalid); - --spectrum-calendar-day-text-color-disabled: var(--spectrum-alias-text-color-disabled); - --spectrum-calendar-day-text-color-cap-selected: white; - --spectrum-calendar-day-text-color-cap-selected-hover: white; - --spectrum-calendar-day-today-background-color: var(--spectrum-global-color-gray-300); - --spectrum-calendar-day-today-background-color-hover: var(--spectrum-global-color-gray-400); - --spectrum-calendar-day-today-background-color-down: var(--spectrum-global-color-gray-500); - - --background: transparent; - &:after { - background: var(--background); - } - - &.is-range-selection { - background: var(--spectrum-calendar-day-background-color-selected); - - &.is-invalid { - background: var(--spectrum-calendar-day-background-color-invalid-selected); - } - } - - &.is-today { - color: var(--spectrum-calendar-day-today-text-color); - border-color: var(--spectrum-calendar-day-today-background-color); - --background: var(--spectrum-calendar-day-today-background-color); - } - - &.is-selected:not(.is-range-selection), - &.is-selection-start, - &.is-selection-end { - color: var(--spectrum-calendar-day-text-color-cap-selected); - --background: var(--spectrum-calendar-day-background-color-cap-selected); - - &.is-invalid { - --background: var(--spectrum-calendar-day-background-color-cap-invalid-selected); - } - } - - &:hover { - color: var(--spectrum-calendar-day-text-color-hover); - --background: var(--spectrum-calendar-day-background-color-hover); - - &.is-range-selection { - color: var(--spectrum-calendar-day-text-color-selected-hover); - --background: var(--spectrum-calendar-day-background-color-selected-hover); - - &.is-invalid { - --background: var(--spectrum-calendar-day-background-color-invalid-selected); - } - } - - &.is-today { - --background: var(--spectrum-calendar-day-today-background-color-hover); - } - - &.is-selected:not(.is-range-selection), - &.is-selection-start, - &.is-selection-end { - color: var(--spectrum-calendar-day-text-color-cap-selected-hover); - --background: var(--spectrum-calendar-day-background-color-cap-selected-hover); - - &.is-invalid { - --background: var(--spectrum-calendar-day-background-color-cap-invalid-selected-hover); - } - } - } - - &.is-pressed { - color: var(--spectrum-calendar-day-text-color-hover); - --background: var(--spectrum-calendar-day-background-color-down); - - &.is-range-selection { - color: var(--spectrum-calendar-day-text-color-selected-hover); - --background: var(--spectrum-calendar-day-background-color-selected-hover); - - &.is-invalid { - --background: var(--spectrum-calendar-day-background-color-invalid-selected); - } - } - - &.is-today { - --background: var(--spectrum-calendar-day-today-background-color-down); - } - - &.is-selected:not(.is-range-selection), - &.is-selection-start, - &.is-selection-end { - color: var(--spectrum-calendar-day-text-color-cap-selected-hover); - --background: var(--spectrum-calendar-day-background-color-cap-selected-down); - - &.is-invalid { - --background: var(--spectrum-calendar-day-background-color-cap-invalid-selected-down); - } - } - } - - &.is-focused { - &:before { - box-shadow: 0 0 0 var(--spectrum-calendar-day-border-size-key-focus) var(--spectrum-calendar-day-border-color-key-focus); - } - } - - &.is-disabled { - &, - &.is-today { - --background: var(--spectrum-calendar-day-background-color-disabled); - } - - &, - &.is-today, - &.is-selected { - color: var(--spectrum-calendar-day-text-color-disabled); - } - } - - &.is-unavailable:not(.is-selected) { - &, - &.is-today { - --background: transparent; - } - } -} - -@media (forced-colors: active) { - .spectrum-Calendar-date { - color: CanvasText; - forced-color-adjust: none; - --spectrum-calendar-button-icon-color: ButtonText; - --spectrum-calendar-day-background-color-cap-selected: Highlight; - --spectrum-calendar-day-background-color-cap-invalid-selected: Highlight; - --spectrum-calendar-day-background-color-cap-invalid-selected-down: Highlight; - --spectrum-calendar-day-background-color-cap-invalid-selected-hover: Highlight; - --spectrum-calendar-day-background-color-cap-selected-down: Highlight; - --spectrum-calendar-day-background-color-cap-selected-hover: Highlight; - --spectrum-calendar-day-background-color-disabled: ButtonFace; - --spectrum-calendar-day-background-color-down: ButtonFace; - --spectrum-calendar-day-background-color-hover: ButtonFace; - --spectrum-calendar-day-background-color-invalid-selected: Highlight; - --spectrum-calendar-day-background-color-selected-hover: Highlight; - --spectrum-calendar-day-background-color-selected: Highlight; - --spectrum-calendar-day-border-color-key-focus: ButtonText; - --spectrum-calendar-day-text-color-cap-selected: HighlightText; - --spectrum-calendar-day-text-color-cap-selected-hover: HighlightText; - --spectrum-calendar-day-text-color-disabled: GrayText; - --spectrum-calendar-day-text-color-hover: ButtonText; - --spectrum-calendar-day-text-color-selected-hover: HighlightText; - --spectrum-calendar-day-title-text-color: CanvasText; - --spectrum-calendar-day-today-background-color: ButtonText; - --spectrum-calendar-day-today-background-color-down: ButtonText; - --spectrum-calendar-day-today-background-color-hover: ButtonText; - --spectrum-calendar-day-today-text-color: ButtonFace; - &.is-range-selection { - color: HighlightText; - } - &.is-disabled { - &.is-range-selection { - background: Highlight; - color: HighlightText; - } - - &.is-selected { - background: Highlight; - color: HighlightText; - } - } - &.is-unavailable { - &.is-today { - color: var(--spectrum-calendar-day-text-color-hover); - } - } - &:hover { - &.is-today { - color: var(--spectrum-calendar-day-today-text-color); - } - } - } -} diff --git a/packages/fds-theme/components/calendar/vars.css b/packages/fds-theme/components/calendar/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/calendar/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/card/index.css b/packages/fds-theme/components/card/index.css deleted file mode 100644 index c5023d7..0000000 --- a/packages/fds-theme/components/card/index.css +++ /dev/null @@ -1,1139 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -/** -LAYERS: There are 5 layers to quiet cards -layer -1: - card back color, seen mostly in quiet cards in a grid - -layer default: - all content provided by the user - -layer 1: - avatar - -layer 2: - color covering - -layer 3: - checkbox -*/ -/** -LAYERS: There are 4 layers to standard/horizontal cards -no -1 layer because standard cards have a background already -layer default: - all content provided by the user - -layer 1: - avatar - -layer 2: - color covering - -layer 3: - checkbox -*/ - -/** -LAYOUTS - standard-vertical standard-horizontal quiet-vertical -vertical-masonry x no x -horizontal-masonry no no x -tiles x x x -standalone x x x - -Standard Vertical -.spectrum-Card--waterfall -.spectrum-Card--tile -.spectrum-Card--noLayout - -Standard Horizontal -.spectrum-Card--tile -.spectrum-Card--noLayout - -Quiet Vertical -.spectrum-Card--waterfall -.spectrum-Card--gallery -.spectrum-Card--tile -.spectrum-Card--noLayout -*/ - -/** -ELEMENTS -.spectrum-Card -.spectrum-Card:before element in standard cards for border/focus -.spectrum-Card:after element in standard cards for selection overlay -.spectrum-Card-grid element defining the css grid that everything is laid out on -.spectrum-Card-grid:before element in the grid used to enforce aspect ratio in quiet cards -.spectrum-Card-grid:after element in the grid used to decorate with focus ring (required on just the image part in quiet cards) -.spectrum-Card-grid .spectrum-Card-decoration extra element in the grid used to decorative features like the blue overlay just over the image in quiet cards -.spectrum-Card-grid .spectrum-Card-sizeHelper extra element in the grid used to enforce aspect ratio in horizontal cards (can't use the before for this, see FF) -.spectrum-Card-checkboxWrapper -.spectrum-Card-checkbox - -user-provided -.spectrum-Card-image -.spectrum-Card-illustration -.spectrum-Card-avatar -.spectrum-Card-heading -.spectrum-Card-detail -.spectrum-Card-content - */ - - -/** Shared **/ -.spectrum-Card { - box-sizing: border-box; - min-inline-size: var(--spectrum-card-body-header-height);; - block-size: 100%; - border-radius: var(--spectrum-card-border-radius); - - user-select: none; - text-decoration: none; - - &:focus { - outline: none; - } - - .spectrum-Card-heading { - margin: 0; - } - .spectrum-Card-checkboxWrapper { - position: absolute; - inset-inline-start: var(--spectrum-card-checkbox-margin); - inset-block-start: var(--spectrum-card-checkbox-margin); - display: grid; - inline-size: var(--spectrum-quickactions-height); - block-size: var(--spectrum-quickactions-height); - border-radius: var(--spectrum-card-quiet-border-radius); - visibility: hidden; - } - .spectrum-Card-checkbox { - /* make hitbox of checkbox same as the floating background it sits on, top and bottom are computing 0 right now though - using calc(50% - var(--spectrum-checkbox-height) - calc(var(--spectrum-checkbox-box-size) / 2)) - */ - padding: 4px - calc(50% - calc(var(--spectrum-checkbox-box-size) / 2)) - 4px - calc(50% - calc(var(--spectrum-checkbox-box-size) / 2)); - } - - &.is-selected, - &.focus-ring, /* only for visible focus */ - &.is-hovered { - .spectrum-Card-checkboxWrapper { - /* Ideally, this would simply apply is-open to the QuickActions component */ - visibility: visible; - opacity: 1; - pointer-events: all; - } - } -} - -.spectrum-Card-grid { - position: relative; - &:before { - - } - &:after, - .spectrum-Card-decoration{ - pointer-events: none; - } -} - -.spectrum-Card-image { - grid-area: preview; - img { - -webkit-user-drag: none; - user-drag: none; - } -} -.spectrum-Card-illustration { - grid-area: preview; - svg { - -webkit-user-drag: none; - user-drag: none; - } -} -.spectrum-Card-avatar { - grid-area: avatar; - z-index: 1; -} -.spectrum-Card-heading { - grid-area: title; - word-break: break-word; -} -.spectrum-Card-detail { - grid-area: detail; - word-break: break-word; -} -.spectrum-Card-content { - grid-area: content; - word-break: break-word; - overflow: hidden; -} -.spectrum-Card-decoration { - display: none; -} - -/** Standard Vertical **/ -/** Waterfall **/ -.spectrum-Card--waterfall.spectrum-Card--default { - .spectrum-Card-checkboxWrapper { - z-index: 3; - } - &:after { - z-index: 2; - pointer-events: none; - } - position: relative; - border-width: var(--spectrum-card-border-size); - border-style: solid; - border-radius: var(--spectrum-card-border-radius); - - &:before { - content: ' '; - inline-size: 100%; - block-size: 100%; - position: absolute; - inset-inline-start: 0; - inset-block-start: 0; - border-radius: var(--spectrum-card-border-radius); - } - - &:after { - content: ' '; - inline-size: 100%; - block-size: 100%; - position: absolute; - inset-inline-start: 0; - inset-block-start: 0; - border-radius: var(--spectrum-card-border-radius); - } - - .spectrum-Card-grid { - block-size: 100%; - display: grid; - grid-template-columns: var(--spectrum-card-body-padding-left) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr) minmax(0, auto) var(--spectrum-card-body-padding-right); - grid-template-rows: minmax(var(--spectrum-card-coverphoto-height), 1fr) var(--spectrum-global-dimension-size-300) minmax(var(--spectrum-actionbutton-height), auto) auto var(--spectrum-card-body-padding-bottom); - /* absolutely position avatar relative to the preview */ - grid-template-areas: - "preview preview preview preview preview" - ". . . . ." - ". title detail . ." - ". content content content ." - ". . . . ."; - - &:before { - content: ' '; - grid-area: preview; - inline-size: 100%; - block-size: 100%; - border-start-start-radius: var(--spectrum-card-border-radius); - border-start-end-radius: var(--spectrum-card-border-radius); - } - } - - &.spectrum-Card--noPreview .spectrum-Card-grid { - display: grid; - grid-template-columns: var(--spectrum-card-body-padding-left) minmax(0, auto) 1fr minmax(0, auto) var(--spectrum-card-body-padding-right); - grid-template-rows: var(--spectrum-global-dimension-size-300) auto 1fr var(--spectrum-card-body-padding-bottom); - /* absolutely position avatar relative to the preview */ - grid-template-areas: - ". . . . ." - ". title detail . ." - ". content content content ." - ". . . . ."; - - .spectrum-Card-avatar { - display: none; - } - } - - .spectrum-Card-image, - .spectrum-Card-illustration { - inline-size: 100%; - block-size: 100%; - - align-self: center; - justify-self: center; - - border-block-end-width: var(--spectrum-card-border-size); - border-block-end-style: solid; - border-start-start-radius: var(--spectrum-card-border-radius); - border-start-end-radius: var(--spectrum-card-border-radius); - } - .spectrum-Card-image { - } - .spectrum-Card-illustration { - display: grid; /* not sure why flex doesn't work here */ - align-items: center; - justify-items: center; - } - .spectrum-Card-avatar { - grid-area: preview; - position: absolute; - inset-block-end: -10px; - inset-inline-start: var(--spectrum-card-body-padding-left); - } - .spectrum-Card-heading { - align-self: baseline; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-inline-end: var(--spectrum-card-title-padding-right); - } - .spectrum-Card-detail { - align-self: baseline; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .spectrum-Card-content { - margin-block-end: 5px; - } -} - -/** Tile **/ -.spectrum-Card--grid.spectrum-Card--default { - .spectrum-Card-checkboxWrapper { - z-index: 3; - } - &:after { - z-index: 2; - pointer-events: none; - } - position: relative; - border-width: var(--spectrum-card-border-size); - border-style: solid; - border-radius: var(--spectrum-card-border-radius); - - &:before { - content: ' '; - inline-size: 100%; - block-size: 100%; - position: absolute; - inset-inline-start: 0; - inset-block-start: 0; - border-radius: var(--spectrum-card-border-radius); - } - - &:after { - content: ' '; - inline-size: 100%; - block-size: 100%; - position: absolute; - inset-inline-start: 0; - inset-block-start: 0; - border-radius: var(--spectrum-card-border-radius); - } - - &:not(.spectrum-Card--noPreview) .spectrum-Card-grid { - display: grid; - block-size: 100%; - grid-template-columns: var(--spectrum-card-body-padding-left) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr) minmax(0, auto) var(--spectrum-card-body-padding-right); - grid-template-rows: minmax(var(--spectrum-card-coverphoto-height), 1fr) var(--spectrum-global-dimension-size-200) minmax(var(--spectrum-actionbutton-height), auto) auto var(--spectrum-card-body-padding-bottom); - /* absolutely position avatar relative to the preview */ - grid-template-areas: - "preview preview preview preview preview" - ". . . . ." - ". title detail . ." - ". content content content ." - ". . . . ."; - - &:before { - content: ' '; - grid-area: preview; - inline-size: 100%; - block-size: 100%; - border-start-start-radius: var(--spectrum-card-border-radius); - border-start-end-radius: var(--spectrum-card-border-radius); - } - } - - &.spectrum-Card--noPreview .spectrum-Card-grid { - display: grid; - block-size: 100%; - grid-template-columns: var(--spectrum-card-body-padding-left) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr) minmax(0, auto) var(--spectrum-card-body-padding-right); - grid-template-rows: var(--spectrum-global-dimension-size-300) auto 1fr var(--spectrum-card-body-padding-bottom); - /* absolutely position avatar relative to the preview */ - grid-template-areas: - ". . . . ." - ". title detail . ." - ". content content content ." - ". . . . ."; - - .spectrum-Card-avatar { - display: none; - } - } - .spectrum-Card-image, - .spectrum-Card-illustration { - inline-size: 100%; - block-size: 100%; - /*min-inline-size: var(--spectrum-card-min-width); causes to obscure border */ - - align-self: center; - justify-self: center; - - border-block-end-width: var(--spectrum-card-border-size); - border-block-end-style: solid; - border-start-start-radius: var(--spectrum-card-border-radius); - border-start-end-radius: var(--spectrum-card-border-radius); - } - .spectrum-Card-image { - } - .spectrum-Card-illustration { - display: grid; /* not sure why flex doesn't work here */ - align-items: center; - justify-items: center; - } - .spectrum-Card-avatar { - grid-area: preview; - position: absolute; - inset-block-end: -10px; - inset-inline-start: var(--spectrum-card-body-padding-left); - } - .spectrum-Card-heading { - align-self: baseline; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-inline-end: var(--spectrum-card-title-padding-right); - } - .spectrum-Card-detail { - align-self: baseline; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .spectrum-Card-content { - margin-block-end: 5px; - white-space: nowrap; - text-overflow: ellipsis; - } -} - -/** Standalone **/ -.spectrum-Card--noLayout.spectrum-Card--default { - .spectrum-Card-checkboxWrapper { - z-index: 3; - } - &:after { - z-index: 2; - pointer-events: none; - } - position: relative; - border-width: var(--spectrum-card-border-size); - border-style: solid; - border-radius: var(--spectrum-card-border-radius); - - &:before { - content: ' '; - inline-size: 100%; - block-size: 100%; - position: absolute; - inset-inline-start: 0; - inset-block-start: 0; - border-radius: var(--spectrum-card-border-radius); - } - - &:after { - content: ' '; - inline-size: 100%; - block-size: 100%; - position: absolute; - inset-inline-start: 0; - inset-block-start: 0; - border-radius: var(--spectrum-card-border-radius); - } - - &:not(.spectrum-Card--noPreview) .spectrum-Card-grid { - display: grid; - grid-template-columns: var(--spectrum-card-body-padding-left) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr) minmax(0, auto) var(--spectrum-card-body-padding-right); - grid-template-rows: minmax(var(--spectrum-card-coverphoto-height), auto) var(--spectrum-global-dimension-size-300) minmax(var(--spectrum-actionbutton-height), auto) 1fr var(--spectrum-card-body-padding-bottom); - /* absolutely position avatar relative to the preview */ - grid-template-areas: - "preview preview preview preview preview" - ". . . . ." - ". title detail . ." - ". content content content ." - ". . . . ."; - - &:before { - content: ' '; - grid-area: preview; - inline-size: 100%; - block-size: 100%; - border-start-start-radius: var(--spectrum-card-border-radius); - border-start-end-radius: var(--spectrum-card-border-radius); - } - } - - &.spectrum-Card--noPreview .spectrum-Card-grid { - display: grid; - grid-template-columns: var(--spectrum-card-body-padding-left) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr) minmax(0, auto) var(--spectrum-card-body-padding-right); - grid-template-rows: var(--spectrum-global-dimension-size-300) auto 1fr var(--spectrum-card-body-padding-bottom); - /* absolutely position avatar relative to the preview */ - grid-template-areas: - ". . . . ." - ". title detail . ." - ". content content content ." - ". . . . ."; - - /* TODO: is this accurate? if we don't want to enforce it, then we can - give min-height to spectrum-Card-image/illustration - and it would no longer be a card state, we could simplify */ - .spectrum-Card-avatar { - display: none; - } - } - .spectrum-Card-image, - .spectrum-Card-illustration { - inline-size: 100%; - block-size: 100%; - /*min-inline-size: var(--spectrum-card-min-width); causes to obscure border */ - - align-self: center; - justify-self: center; - - border-block-end-width: var(--spectrum-card-border-size); - border-block-end-style: solid; - border-start-start-radius: var(--spectrum-card-border-radius); - border-start-end-radius: var(--spectrum-card-border-radius); - } - .spectrum-Card-image { - } - .spectrum-Card-illustration { - display: grid; /* not sure why flex doesn't work here */ - align-items: center; - justify-items: center; - inline-size: 100%; - block-size: var(--spectrum-card-coverphoto-height); /* this may be an incorrect assumption */ - } - .spectrum-Card-avatar { - grid-area: preview; - position: absolute; - inset-block-end: -10px; - inset-inline-start: var(--spectrum-card-body-padding-left); - } - .spectrum-Card-heading { - align-self: baseline; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-inline-end: var(--spectrum-card-title-padding-right); - } - .spectrum-Card-detail { - align-self: baseline; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .spectrum-Card-content { - margin-block-end: 5px; - } -} -/** END Standard Vertical **/ - - -/** Quiet Vertical **/ -/** Waterfall **/ -.spectrum-Card--waterfall.spectrum-Card--isQuiet { - .spectrum-Card-checkboxWrapper { - z-index: 3; - } - .spectrum-Card-grid:before { - z-index: -1; - } - .spectrum-Card-grid:after { - z-index: 2; - } - min-inline-size: var(--spectrum-card-quiet-min-size); - - .spectrum-Card-grid { - block-size: 100%; - display: grid; - grid-template-columns: minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr) minmax(0, auto); - grid-template-rows: minmax(var(--spectrum-card-coverphoto-height), 1fr) var(--spectrum-card-quiet-body-header-margin-top) minmax(var(--spectrum-actionbutton-height), auto) auto; - grid-template-areas: - "preview preview preview" - ". . . " - "title detail . " - "content content content"; - - &:before { - content: ' '; - grid-area: preview; - - border-radius: var(--spectrum-card-quiet-border-radius); - } - - &:after { - content: ' '; - grid-area: preview; - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - inset-block-start: 0; - inset-block-end: 0; - margin: calc(var(--spectrum-alias-focus-ring-gap) * -2); - - border-radius: calc(var(--spectrum-card-quiet-border-radius) + var(--spectrum-alias-focus-ring-gap)); - } - .spectrum-Card-decoration { - display: block; - grid-area: preview; - inline-size: 100%; - block-size: 100%; - - border-radius: var(--spectrum-card-quiet-border-radius); - } - } - .spectrum-Card-image, - .spectrum-Card-illustration { - block-size: 100%; - inline-size: 100%; - min-inline-size: 100%; /* I do not know why setting a min-width causes the image to shrink */ - - align-self: center; - justify-self: center; - border-radius: var(--spectrum-card-quiet-border-radius); - } - .spectrum-Card-illustration { - display: grid; /* not sure why flex doesn't work here */ - align-items: center; - justify-items: center; - } - .spectrum-Card-avatar { - display: none; - } - .spectrum-Card-heading { - align-self: baseline; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-inline-end: var(--spectrum-card-title-padding-right); - } - .spectrum-Card-detail { - align-self: baseline; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-inline-end: var(--spectrum-card-title-padding-right); - } - .spectrum-Card-content { - margin-block-end: 5px; - } -} - -/** Gallery **/ -/** Non-collection version doesn't work in FF, but should work in a collection which determines the size **/ -.spectrum-Card--gallery.spectrum-Card--isQuiet { - .spectrum-Card-checkboxWrapper { - z-index: 3; - } - .spectrum-Card-grid:before { - z-index: -1; - } - .spectrum-Card-grid:after { - z-index: 2; - } - min-inline-size: 0; - - .spectrum-Card-grid { - block-size: 100%; - display: grid; - grid-template-columns: minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr) minmax(0, auto); - grid-template-rows: 1fr var(--spectrum-card-quiet-body-header-margin-top) var(--spectrum-actionbutton-height) var(--spectrum-alias-single-line-height); - grid-template-areas: - "preview preview preview" - ". . . " - "title detail . " - "content content content"; - - &:before { - content: ' '; - grid-area: preview; - - border-radius: var(--spectrum-card-quiet-border-radius); - } - - &:after { - content: ' '; - grid-area: preview; - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - inset-block-start: 0; - inset-block-end: 0; - margin: calc(var(--spectrum-alias-focus-ring-gap) * -2); - - border-radius: calc(var(--spectrum-card-quiet-border-radius) + var(--spectrum-alias-focus-ring-gap)); - } - .spectrum-Card-decoration { - display: block; - grid-area: preview; - inline-size: 100%; - block-size: 100%; - - border-radius: var(--spectrum-card-quiet-border-radius); - } - } - .spectrum-Card-image, - .spectrum-Card-illustration { - block-size: 100%; - inline-size: 100%; - min-inline-size: 100%; /* I do not know why setting a min-width causes the image to shrink */ - - align-self: center; - justify-self: center; - border-radius: var(--spectrum-card-quiet-border-radius); - > img { - width: unset; - margin: auto; - } - } - - .spectrum-Card-illustration { - display: grid; /* not sure why flex doesn't work here */ - align-items: center; - justify-items: center; - } - .spectrum-Card-avatar { - display: none; - } - .spectrum-Card-heading { - align-self: baseline; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-inline-end: var(--spectrum-card-title-padding-right); - } - .spectrum-Card-detail { - align-self: baseline; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-inline-end: var(--spectrum-card-title-padding-right); - } - .spectrum-Card-content { - margin-block-end: 5px; - white-space: nowrap; - text-overflow: ellipsis; - } -} - -/** Tile **/ -.spectrum-Card--grid.spectrum-Card--isQuiet { - .spectrum-Card-checkboxWrapper { - z-index: 3; - } - .spectrum-Card-grid:before { - z-index: -1; - } - .spectrum-Card-grid:after { - z-index: 2; - } - min-inline-size: var(--spectrum-card-quiet-min-size); - - .spectrum-Card-grid { - block-size: 100%; - display: grid; - grid-template-columns: minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr) minmax(0, auto); - grid-template-rows: auto var(--spectrum-card-quiet-body-header-margin-top) minmax(var(--spectrum-actionbutton-height), auto) var(--spectrum-alias-single-line-height) 1fr; - grid-template-areas: - "preview preview preview" - ". . . " - "title detail . " - "content content content" - ". . . "; - - &:before { - content: ' '; - grid-area: preview; - - /* aspect ratio 1:1 because padding-top is calculated from width */ - inline-size: 0; - block-size: 0; - padding-top: 100%; - padding-left: 100%; - - border-radius: var(--spectrum-card-quiet-border-radius); - } - - &:after { - content: ' '; - grid-area: preview; - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - inset-block-start: 0; - inset-block-end: 0; - margin: calc(var(--spectrum-alias-focus-ring-gap) * -2); - - border-radius: calc(var(--spectrum-card-quiet-border-radius) + var(--spectrum-alias-focus-ring-gap)); - } - .spectrum-Card-decoration { - display: block; - grid-area: preview; - inline-size: 100%; - block-size: 100%; - - border-radius: var(--spectrum-card-quiet-border-radius); - } - } - .spectrum-Card-image, - .spectrum-Card-illustration { - box-sizing: border-box; /* so that 100% counts padding as well */ - block-size: 100%; - inline-size: 100%; - min-inline-size: 100%; /* I do not know why setting a min-width causes the image to shrink */ - - align-self: center; - justify-self: center; - } - .spectrum-Card-image { - clip-path: inset(0% 0% 0% 0% round var(--spectrum-card-quiet-border-radius)); - /* remove from flow so it doesn't affect grid area size, this way the aspect ratio is maintained - todo: figure out why or how it's already in the correct centered spot */ - position: absolute; - } - .spectrum-Card-illustration { - display: grid; /* not sure why flex doesn't work here */ - align-items: center; - justify-items: center; - } - .spectrum-Card-avatar { - display: none; - } - .spectrum-Card-heading { - align-self: baseline; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-inline-end: var(--spectrum-card-title-padding-right); - } - .spectrum-Card-detail { - align-self: baseline; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-inline-end: var(--spectrum-card-title-padding-right); - } - .spectrum-Card-content { - margin-block-end: 5px; - white-space: nowrap; - text-overflow: ellipsis; - } -} - -/** Standalone **/ -.spectrum-Card--noLayout.spectrum-Card--isQuiet { - .spectrum-Card-checkboxWrapper { - z-index: 3; - } - .spectrum-Card-grid:before { - z-index: -1; - } - .spectrum-Card-grid:after { - z-index: 2; - } - min-inline-size: var(--spectrum-card-quiet-min-size); - - .spectrum-Card-grid { - block-size: 100%; - display: grid; - grid-template-columns: minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr) minmax(0, auto); - grid-template-rows: auto var(--spectrum-card-quiet-body-header-margin-top) minmax(var(--spectrum-actionbutton-height), auto) auto var(--spectrum-card-body-padding-bottom); - grid-template-areas: - "preview preview preview" - ". . . " - "title detail . " - "content content content" - ". . . "; - - &:before { - content: ' '; - grid-area: preview; - - border-radius: var(--spectrum-card-quiet-border-radius); - } - - &:after { - content: ' '; - grid-area: preview; - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - inset-block-start: 0; - inset-block-end: 0; - margin: calc(var(--spectrum-alias-focus-ring-gap) * -2); - padding: calc(var(--spectrum-alias-focus-ring-gap) * 2); - background-clip: content-box; - - border-radius: calc(var(--spectrum-card-quiet-border-radius) + var(--spectrum-alias-focus-ring-gap)); - } - .spectrum-Card-decoration { - display: block; - grid-area: preview; - inline-size: 100%; - block-size: 100%; - - border-radius: var(--spectrum-card-quiet-border-radius); - } - } - .spectrum-Card-image, - .spectrum-Card-illustration { - display: flex; - - align-self: center; - justify-self: center; - - border-radius: var(--spectrum-card-quiet-border-radius); - } - .spectrum-Card-image { - } - .spectrum-Card-illustration { - display: grid; /* not sure why flex doesn't work here */ - align-items: center; - justify-items: center; - inline-size: 100%; - block-size: var(--spectrum-card-coverphoto-height); - } - .spectrum-Card-avatar { - display: none; - } - .spectrum-Card-heading { - align-self: baseline; - margin-inline-end: var(--spectrum-card-title-padding-right); - } - .spectrum-Card-detail { - align-self: baseline; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-inline-end: var(--spectrum-card-title-padding-right); - } - .spectrum-Card-content { - margin-block-end: 5px; - } -} -/** END Quiet Vertical **/ - -/** Standard Horizontal **/ -/** -Broken as a CSS only solution in Safari until aspect-ratio is supported https://caniuse.com/?search=aspect-ratio -For now working around it with a useLayoutEffect in CardBase. -**/ -/** Tile **/ -.spectrum-Card--grid.spectrum-Card--horizontal { - .spectrum-Card-grid:after { - z-index: 2; - } - border-width: var(--spectrum-card-border-size); - border-style: solid; - border-radius: var(--spectrum-card-border-radius); - .spectrum-Card-checkboxWrapper { - display: none; - } - &.is-focused, - &.is-selected, - &.is-hovered { - .spectrum-Card-checkboxWrapper { - display: none; - } - } - - .spectrum-Card-grid { - display: grid; - block-size: 100%; - grid-template-columns: auto var(--spectrum-global-dimension-size-200) 1fr auto var(--spectrum-global-dimension-size-200); - grid-template-rows: var(--spectrum-global-dimension-size-400) 1fr var(--spectrum-global-dimension-size-200); - grid-template-areas: - "preview . title . ." - "preview . content content ." - "preview . . . ."; - - &:before { - content: ' '; - position: absolute; - - inline-size: 100%; - block-size: 100%; - border-radius: var(--spectrum-card-border-radius); - } - } - .spectrum-Card-image, - .spectrum-Card-illustration { - grid-area: preview; - block-size: 100%; - /*aspect-ratio: 1/1;*/ /* can't use in safari or FF :( */ - - align-self: center; - justify-self: center; - - border-start-start-radius: var(--spectrum-card-border-radius); - border-end-start-radius: var(--spectrum-card-border-radius); - border-inline-end-width: var(--spectrum-card-border-size); - border-inline-end-style: solid; - } - - .spectrum-Card-image { - } - - .spectrum-Card-illustration { - display: grid; - align-items: center; - justify-items: center; - } - - .spectrum-Card-avatar { - display: none; - } - .spectrum-Card-heading { - align-self: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-inline-end: var(--spectrum-card-title-padding-right); - } - .spectrum-Card-detail { - display: none; - } - /* how to handle long description?? */ - .spectrum-Card-content { - width: 100%; - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 2; - /* not working because this line is removed in css preprocessing */ - -webkit-box-orient: vertical; - visibility: visible; - } -} - -/** Standalone **/ -.spectrum-Card--noLayout.spectrum-Card--horizontal { - .spectrum-Card-grid:after { - z-index: 2; - } - border-width: var(--spectrum-card-border-size); - border-style: solid; - border-radius: var(--spectrum-card-border-radius); - .spectrum-Card-checkboxWrapper { - display: none; - } - &.is-focused, - &.is-selected, - &.is-hovered { - .spectrum-Card-checkboxWrapper { - display: none; - } - } - - .spectrum-Card-grid { - position: relative; - display: grid; - block-size: 100%; - max-block-size: 100%; - grid-template-columns: auto var(--spectrum-global-dimension-size-200) 1fr auto var(--spectrum-global-dimension-size-200); - grid-template-rows: var(--spectrum-global-dimension-size-400) 1fr var(--spectrum-global-dimension-size-200); - grid-template-areas: - "preview . title . ." - "preview . content content ." - "preview . . . ."; - - &:before { - content: ' '; - inline-size: 100%; - block-size: 100%; - position: absolute; - border-radius: var(--spectrum-card-border-radius); - } - - &:after { - content: ' '; - inline-size: 100%; - block-size: 100%; - position: absolute; - border-radius: var(--spectrum-card-border-radius); - } - } - .spectrum-Card-image, - .spectrum-Card-illustration { - grid-area: preview; - block-size: 100%; - /*aspect-ratio: 1/1;*/ /* can't use in safari or FF :( */ - - align-self: center; - justify-self: center; - - border-start-start-radius: var(--spectrum-card-border-radius); - border-end-start-radius: var(--spectrum-card-border-radius); - border-inline-end-width: var(--spectrum-card-border-size); - border-inline-end-style: solid; - } - - .spectrum-Card-image { - } - - .spectrum-Card-illustration { - display: grid; - align-items: center; - justify-items: center; - } - - .spectrum-Card-avatar { - display: none; - } - .spectrum-Card-heading { - align-self: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-inline-end: var(--spectrum-card-title-padding-right); - } - .spectrum-Card-detail { - display: none; - } - /* how to handle long description?? */ - .spectrum-Card-content { - width: 100%; - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 2; - /* not working because this line is removed in css preprocessing */ - -webkit-box-orient: vertical; - visibility: visible; - } -} -/** END Standard Horizontal **/ - -/* CardView styles */ -.spectrum-CardView { - outline: none; - - .spectrum-CardView-centeredWrapper { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - } - .spectrum-CardView-row { - outline: none; - height: 100% - } -} diff --git a/packages/fds-theme/components/card/skin.css b/packages/fds-theme/components/card/skin.css deleted file mode 100644 index 509b432..0000000 --- a/packages/fds-theme/components/card/skin.css +++ /dev/null @@ -1,350 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Card { - - &.is-drop-target { - border-color: var(--spectrum-card-border-color-key-focus); - box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus); - background-color: var(--spectrum-alias-highlight-selected); - } - - .spectrum-Card-checkboxWrapper { - background-color: var(--spectrum-quickactions-background-color); - } - - .spectrum-Card-detail { - color: var(--spectrum-card-description-text-color); - } -} - -.spectrum-Card-illustration { -} -.spectrum-Card-image { -} -.spectrum-Card-avatar { -} -.spectrum-Card-heading { - color: var(--spectrum-global-color-gray-900); -} -.spectrum-Card-detail { - color: var(--spectrum-global-color-gray-700); -} -.spectrum-Card-actions { -} -.spectrum-Card-content { - color: var(--spectrum-global-color-gray-700); -} -.spectrum-Card-divider { -} -.spectrum-Card-footer { -} - -.spectrum-Card--default { - border-color: var(--spectrum-card-border-color); - background-color: var(--spectrum-card-background-color); - - &:hover { - border-color: var(--spectrum-card-border-color-hover); - &:before { - box-shadow: 0 0 0 1px var(--spectrum-card-border-color-hover); - } - } - - &.is-selected { - border-color: var(--spectrum-card-border-color-key-focus); - &:before { - /* Image needs to go right to the edge, so no border. Adding border on focus causes - * a jump in the text and image. So focus ring is only box-shadow - */ - box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus); - } - } - - &:hover.is-selected { - border-color: var(--spectrum-card-border-color-key-focus); - &:before { - /* Image needs to go right to the edge, so no border. Adding border on focus causes - * a jump in the text and image. So focus ring is only box-shadow - */ - box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus); - } - } - - &:focus-visible { - border-color: var(--spectrum-card-border-color-key-focus); - &:before { - box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus); - } - } - - &:focus-visible:hover.is-selected { - border-color: var(--spectrum-card-border-color-key-focus); - &:before { - box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus); - } - } - - &.is-selected { - border-color: var(--spectrum-card-border-color-key-focus); - &:after { - background-color: var(--spectrum-global-color-blue-400); - opacity: 0.15; - } - &:hover { - border-color: var(--spectrum-card-border-color-key-focus); - &:after { - background-color: var(--spectrum-global-color-blue-400); - opacity: 0.25; - } - } - } - &:before { - transition: background-color var(--spectrum-global-animation-duration-100); - } - &:after { - transition: background-color var(--spectrum-global-animation-duration-100), - opacity var(--spectrum-global-animation-duration-100); - opacity: 0; - } - .spectrum-Card-grid { - &:before { - transition: background-color var(--spectrum-global-animation-duration-100); - background-color: var(--spectrum-card-quiet-preview-background-color); - } - } - - .spectrum-Card-image, - .spectrum-Card-illustration { - border-block-end-color: var(--spectrum-card-coverphoto-border-color); - } - .spectrum-Card-image { - } - .spectrum-Card-avatar { - } - .spectrum-Card-heading { - } - .spectrum-Card-detail { - } - .spectrum-Card-actions { - } - .spectrum-Card-content { - color: var(--spectrum-card-description-text-color); - } - .spectrum-Card-divider { - } - .spectrum-Card-footer { - } -} - -.spectrum-Card--isQuiet { - border-color: transparent; - background-color: transparent; - &:hover { - .spectrum-Card-grid { - &:before { - background-color: var(--spectrum-card-quiet-preview-background-color-hover); - /* TODO do we still want this border on the image itself? */ - box-shadow: 0 0 0 1px var(--spectrum-card-border-color-hover); - } - } - } - - &.is-selected { - .spectrum-Card-grid { - &:after { - /* Image needs to go right to the edge, so no border. Adding border on focus causes - * a jump in the text and image. So focus ring is only box-shadow - */ - box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus); - } - } - } - - &:hover.is-selected { - .spectrum-Card-grid { - &:after { - /* Image needs to go right to the edge, so no border. Adding border on focus causes - * a jump in the text and image. So focus ring is only box-shadow - */ - box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus); - } - } - } - - &:focus-visible { - .spectrum-Card-grid { - &:after { - box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus); - } - } - } - - &:focus-visible:hover.is-selected { - .spectrum-Card-grid { - &:after { - box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus); - } - } - } - - &.is-selected { - .spectrum-Card-grid { - .spectrum-Card-decoration { - opacity: 0.15; - } - } - &:hover { - .spectrum-Card-grid { - .spectrum-Card-decoration { - opacity: 0.25; - } - } - } - } - - .spectrum-Card-grid { - &:before { - transition: background-color var(--spectrum-global-animation-duration-100); - background-color: var(--spectrum-card-quiet-preview-background-color); - } - } - .spectrum-Card-image, - .spectrum-Card-illustration { - } - .spectrum-Card-image { - } - .spectrum-Card-avatar { - } - .spectrum-Card-heading { - } - .spectrum-Card-detail { - } - .spectrum-Card-actions { - } - .spectrum-Card-content { - } - .spectrum-Card-divider { - } - .spectrum-Card-footer { - } - .spectrum-Card-decoration { - transition: background-color var(--spectrum-global-animation-duration-100), - opacity var(--spectrum-global-animation-duration-100); - background-color: var(--spectrum-global-color-blue-400); - opacity: 0; - } -} - -.spectrum-Card--horizontal { - border-color: var(--spectrum-card-border-color); - background-color: var(--spectrum-card-background-color); - &:hover { - border-color: var(--spectrum-card-border-color-hover); - .spectrum-Card-grid { - &:before { - box-shadow: 0 0 0 1px var(--spectrum-card-border-color-hover); - } - } - } - - &.is-selected { - border-color: var(--spectrum-card-border-color-key-focus); - .spectrum-Card-grid { - &:before { - /* Image needs to go right to the edge, so no border. Adding border on focus causes - * a jump in the text and image. So focus ring is only box-shadow - */ - box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus); - } - } - } - - &:hover.is-selected { - border-color: var(--spectrum-card-border-color-key-focus); - .spectrum-Card-grid { - &:before { - /* Image needs to go right to the edge, so no border. Adding border on focus causes - * a jump in the text and image. So focus ring is only box-shadow - */ - box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus); - } - } - } - - &:focus-visible { - border-color: var(--spectrum-card-border-color-key-focus); - .spectrum-Card-grid { - &:before { - box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus); - } - } - } - - &:focus-visible:hover.is-selected { - border-color: var(--spectrum-card-border-color-key-focus); - .spectrum-Card-grid { - &:before { - box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus); - } - } - } - - &.is-selected { - border-color: var(--spectrum-card-border-color-key-focus); - .spectrum-Card-grid { - &:after { - background-color: var(--spectrum-global-color-blue-400); - opacity: 0.15; - } - } - &:hover { - border-color: var(--spectrum-card-border-color-key-focus); - .spectrum-Card-grid { - &:after { - background-color: var(--spectrum-global-color-blue-400); - opacity: 0.25; - } - } - } - } - - .spectrum-Card-grid { - &:after { - transition: background-color var(--spectrum-global-animation-duration-100), - opacity var(--spectrum-global-animation-duration-100); - opacity: 0; - } - } - .spectrum-Card-image, - .spectrum-Card-illustration { - border-inline-end-color: var(--spectrum-card-coverphoto-border-color); - } - .spectrum-Card-image { - } - .spectrum-Card-illustration { - } - .spectrum-Card-avatar { - } - .spectrum-Card-heading { - } - .spectrum-Card-detail { - } - .spectrum-Card-actions { - } - .spectrum-Card-content { - } - .spectrum-Card-divider { - } - .spectrum-Card-footer { - } -} diff --git a/packages/fds-theme/components/card/vars.css b/packages/fds-theme/components/card/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/card/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/checkbox/index.css b/packages/fds-theme/components/checkbox/index.css deleted file mode 100644 index 02c42cf..0000000 --- a/packages/fds-theme/components/checkbox/index.css +++ /dev/null @@ -1,191 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -:root { - /* Hardcoded for wrapping study. - Will be a DNA token in https://jira.corp.adobe.com/browse/SDS-4466 */ - --spectrum-checkbox-label-margin-top: var(--spectrum-global-dimension-size-65); - - /* Fix for inconsistent line-height between browsers that would push the label 1px below the intended baseline */ - /* more info: https://stackoverflow.com/questions/47700568/css-fonts-render-differently-in-firefox-and-chrome */ - --spectrum-checkbox-label-line-height: 1.49; -} - -.spectrum-Checkbox { - display: inline-flex; - box-sizing: border-box; - align-items: flex-start; - - position: relative; - - min-block-size: var(--spectrum-checkbox-height); - max-inline-size: 100%; - - padding-inline-end: calc(var(--spectrum-checkbox-cursor-hit-x) * 2); - - vertical-align: top; - - isolation: isolate; -} - -.spectrum-Checkbox-input { - /* Change the font styles in all browsers for input. */ - font-family: inherit; - font-size: 100%; - line-height: 1.15; - - /* Remove the margin for input in Firefox and Safari. */ - margin: 0; - - /* Show the overflow for input in Edge. */ - overflow: visible; - - /* Add the correct box sizing for [type="checkbox"] in IE 10-. */ - box-sizing: border-box; - - /* Remove the padding for [type="checkbox"] in IE 10-. */ - padding: 0; - - /* Hit area */ - position: absolute; - inset-block-start: 0; - inset-inline-start: calc(var(--spectrum-checkbox-cursor-hit-x) * -1); - inline-size: calc(100% + var(--spectrum-checkbox-cursor-hit-x)); - block-size: 100%; - - opacity: .0001; - z-index: 1; - - cursor: default; - - &:disabled { - cursor: default; - } - - &:focus-visible { - + .spectrum-Checkbox-box { - &:after { - margin: calc(var(--spectrum-alias-focus-ring-gap) * -1); - } - } - } -} - -.spectrum-Checkbox.is-indeterminate { - .spectrum-Checkbox-box { - &:before { - border-width: calc(var(--spectrum-checkbox-box-size) / 2); - } - - .spectrum-Checkbox-checkmark { - display: none; - } - - .spectrum-Checkbox-partialCheckmark { - display: block; - - transform: scale(1); - opacity: 1; - } - } -} - -.spectrum-Checkbox.is-checked { - .spectrum-Checkbox-box { - &:before { - border-width: calc(var(--spectrum-checkbox-box-size) / 2); - } - - - .spectrum-Checkbox-checkmark { - transform: scale(1); - opacity: 1; - } - } -} - -.spectrum-Checkbox-label { - text-align: start; - margin-inline-start: var(--spectrum-checkbox-text-gap); - margin-block-start: var(--spectrum-checkbox-label-margin-top); - font-size: var(--spectrum-checkbox-text-size); - font-weight: var(--spectrum-checkbox-text-font-weight); - line-height: var(--spectrum-checkbox-label-line-height); -} - -.spectrum-Checkbox-box { - position: relative; - box-sizing: border-box; - inline-size: var(--spectrum-checkbox-box-size); - block-size: var(--spectrum-checkbox-box-size); - - /* Fix vertical alignment when not wrapping since we're flex-start */ - margin: calc((var(--spectrum-checkbox-height) - var(--spectrum-checkbox-box-size)) / 2) 0; - - flex-grow: 0; - flex-shrink: 0; - - /* :before is used to draw the box fill */ - &:before { - display: block; - z-index: 0; - content: ''; - box-sizing: border-box; - position: absolute; - - width: var(--spectrum-checkbox-box-size); - height: var(--spectrum-checkbox-box-size); - - border-radius: var(--spectrum-checkbox-box-border-radius); - border-width: var(--spectrum-checkbox-box-border-size); - border-style: solid; - - transition: border var(--spectrum-global-animation-duration-100) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100) ease-in-out; - } - - &:after { - border-radius: calc(var(--spectrum-checkbox-box-border-radius) + var(--spectrum-alias-focus-ring-gap)); - content: ''; - display: block; - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - margin: var(--spectrum-alias-focus-ring-gap); - transform: translateX(0); /* Forces FF to render on the pixel grid */ - - transition: opacity var(--spectrum-global-animation-duration-100) ease-out, - margin var(--spectrum-global-animation-duration-100) ease-out; - } -} - -.spectrum-Checkbox-checkmark, -.spectrum-Checkbox-partialCheckmark { - position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - - margin-block-start: calc(var(--spectrum-icon-checkmark-small-height) / -2); - margin-inline-start: calc(var(--spectrum-icon-checkmark-small-width) / -2); - - opacity: 0; - transform: scale(0); - - transition: opacity var(--spectrum-global-animation-duration-100) ease-in-out, transform var(--spectrum-global-animation-duration-100) ease-in-out; -} - -.spectrum-Checkbox-partialCheckmark { - display: none; -} diff --git a/packages/fds-theme/components/checkbox/skin.css b/packages/fds-theme/components/checkbox/skin.css deleted file mode 100644 index cba0440..0000000 --- a/packages/fds-theme/components/checkbox/skin.css +++ /dev/null @@ -1,321 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Checkbox { - /* todo: fix in DNA */ - --spectrum-checkbox-emphasized-text-color-key-focus: var(--spectrum-checkbox-emphasized-text-color-hover); - - --spectrum-checkbox-box-border-color: var(--spectrum-alias-toggle-color-default); - --spectrum-checkbox-box-border-color-hover: var(--spectrum-alias-toggle-color-hover); - --spectrum-checkbox-box-border-color-key-focus: var(--spectrum-alias-toggle-color-key-focus); - --spectrum-checkbox-quiet-box-border-color-selected: var(--spectrum-alias-toggle-color-selected); - --spectrum-checkbox-quiet-box-border-color-selected-hover: var(--spectrum-alias-toggle-color-selected-hover); - --spectrum-checkbox-quiet-box-border-color-selected-key-focus: var(--spectrum-alias-toggle-color-selected-key-focus); - - --spectrum-checkbox-emphasized-box-background-color-selected: var(--spectrum-accent-color-900); - --spectrum-checkbox-emphasized-box-background-color-selected-hover: var(--spectrum-accent-color-1000); - --spectrum-checkbox-emphasized-box-background-color-selected-key-focus: var(--spectrum-accent-color-1000); - --spectrum-checkbox-emphasized-box-background-color-selected-down: var(--spectrum-accent-color-1100); - --spectrum-checkbox-emphasized-box-border-color-selected: var(--spectrum-accent-color-900); - --spectrum-checkbox-emphasized-box-border-color-selected-hover: var(--spectrum-accent-color-1000); - --spectrum-checkbox-emphasized-box-border-color-selected-key-focus: var(--spectrum-accent-color-1000); - --spectrum-checkbox-emphasized-box-border-color-selected-down: var(--spectrum-accent-color-1100); -} - -.spectrum-Checkbox { - color: var(--spectrum-checkbox-text-color); - border-color: var(--spectrum-checkbox-emphasized-box-border-color); - - .spectrum-Checkbox-checkmark, - .spectrum-Checkbox-partialCheckmark { - color: var(--spectrum-checkbox-checkmark-color); - } - - .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color); - background-color: var(--spectrum-checkbox-emphasized-box-background-color); - } - } - - .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-emphasized-text-color); - } - - /* Indeterminate is basically a checked state, so handle colors for checked state here */ - &.is-indeterminate, - &.is-checked { - .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color-selected); - } - } - } - - &:hover { - .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color-hover); - } - } - .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-emphasized-text-color-hover); - } - &.is-indeterminate .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color-selected-hover); - } - } - } - - &:active { - .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color-down); - } - } - .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-emphasized-text-color-down); - } - &.is-indeterminate .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color-selected-down); - } - } - } - - .spectrum-Checkbox-input, - .spectrum-Checkbox-input:checked { - &:disabled + .spectrum-Checkbox-box, - &:disabled:active + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color-disabled); - background-color: var(--spectrum-checkbox-emphasized-box-background-color-disabled); - } - } - - &:disabled ~ .spectrum-Checkbox-label, - &:disabled:active ~ .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-text-color-disabled); - } - } - - &.is-disabled { - .spectrum-Checkbox-input, - .spectrum-Checkbox-input:checked { - &:disabled + .spectrum-Checkbox-box, - &:disabled:active + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color-disabled); - background-color: var(--spectrum-checkbox-emphasized-box-background-color-disabled); - } - } - - &:disabled ~ .spectrum-Checkbox-label, - &:disabled:active ~ .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-text-color-disabled); - } - } - - &:hover, - &:active { - .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color-disabled); - background-color: var(--spectrum-checkbox-emphasized-box-background-color-disabled); - } - } - .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-text-color-disabled); - } - } - } - - - - /* Focus */ - .spectrum-Checkbox-input { - & + .spectrum-Checkbox-box { - &:after { - box-shadow: 0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus) var(--spectrum-checkbox-focus-ring-color-key-focus); - opacity: 0; - } - } - &:focus-visible + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-box-border-color-key-focus); - } - &:after { - opacity: 1; - } - } - &:checked { - &:focus-visible + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color-selected-key-focus); - } - } - } - &:focus-visible ~ .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-emphasized-text-color-key-focus); - } - } - - &.is-indeterminate { - .spectrum-Checkbox-input { - &:focus-visible + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color-selected-key-focus); - } - } - } - } - - &.spectrum-Checkbox--quiet { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-quiet-box-border-color-selected); - } - } - - &:hover { - &.is-indeterminate .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-quiet-box-border-color-selected-hover); - } - } - } - - &:active { - &.is-indeterminate .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-quiet-box-border-color-selected-down); - } - } - } - } - - &.is-invalid { - /* Extra-specific selectors added here to handle checked state */ - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-box-border-color-error); - } - } - - .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-text-color-error); - } - - &.is-indeterminate .spectrum-Checkbox-input:focus-visible, - .spectrum-Checkbox-input:focus-visible { - & + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-box-border-color-error-hover); - } - } - - & ~ .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-text-color-error-hover); - } - } - - &:hover { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-box-border-color-error-hover); - } - } - - .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-text-color-error-hover); - } - } - - &:active { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-box-border-color-error-down); - } - } - - .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-text-color-error-down); - } - } - } -} - -@media (forced-colors: active) { - .spectrum-Checkbox { - forced-color-adjust: none; - --spectrum-alias-toggle-color-default: ButtonText; - --spectrum-alias-toggle-color-hover: Highlight; - --spectrum-alias-toggle-color-key-focus: Highlight; - --spectrum-alias-toggle-color-selected: Highlight; - --spectrum-alias-toggle-color-selected-hover: Highlight; - --spectrum-alias-toggle-color-selected-key-focus: Highlight; - --spectrum-alias-toggle-color-selected-down: Highlight; - - --spectrum-checkbox-box-border-color-error: Highlight; - --spectrum-checkbox-box-border-color-error-down: Highlight; - --spectrum-checkbox-box-border-color-error-hover: Highlight; - --spectrum-checkbox-checkmark-color: HighlightText; - --spectrum-checkbox-emphasized-box-background-color: ButtonFace; - --spectrum-checkbox-emphasized-box-background-color-disabled: ButtonFace; - --spectrum-checkbox-emphasized-box-border-color: ButtonText; - --spectrum-checkbox-emphasized-box-border-color-disabled: GrayText; - --spectrum-checkbox-emphasized-box-border-color-down: Highlight; - --spectrum-checkbox-emphasized-box-border-color-hover: Highlight; - --spectrum-checkbox-emphasized-text-color: FieldText; - --spectrum-checkbox-emphasized-text-color-down: FieldText; - --spectrum-checkbox-emphasized-text-color-hover: FieldText; - --spectrum-checkbox-emphasized-text-color-key-focus: FieldText; - --spectrum-checkbox-focus-ring-color-key-focus: ButtonText; - --spectrum-checkbox-quiet-box-border-color-selected: Highlight; - --spectrum-checkbox-quiet-box-border-color-selected-down: Highlight; - --spectrum-checkbox-quiet-box-border-color-selected-hover: Highlight; - --spectrum-checkbox-text-color: FieldText; - --spectrum-checkbox-text-color-disabled: GrayText; - --spectrum-checkbox-text-color-error: FieldText; - --spectrum-checkbox-text-color-error-down: FieldText; - --spectrum-checkbox-text-color-error-hover: FieldText; - - --spectrum-checkbox-emphasized-box-background-color-selected: Highlight; - --spectrum-checkbox-emphasized-box-background-color-selected-hover: Highlight; - --spectrum-checkbox-emphasized-box-background-color-selected-key-focus: Highlight; - --spectrum-checkbox-emphasized-box-background-color-selected-down: Highlight; - --spectrum-checkbox-emphasized-box-border-color-selected: Highlight; - --spectrum-checkbox-emphasized-box-border-color-selected-hover: Highlight; - --spectrum-checkbox-emphasized-box-border-color-selected-key-focus: Highlight; - --spectrum-checkbox-emphasized-box-border-color-selected-down: Highlight; - - &.spectrum-Checkbox--quiet, - &.is-indeterminate { - --spectrum-alias-toggle-color-default: ButtonText; - --spectrum-alias-toggle-color-selected: ButtonText; - } - } -} diff --git a/packages/fds-theme/components/checkbox/vars.css b/packages/fds-theme/components/checkbox/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/checkbox/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/circleloader/animation.css b/packages/fds-theme/components/circleloader/animation.css deleted file mode 100644 index 8dd301e..0000000 --- a/packages/fds-theme/components/circleloader/animation.css +++ /dev/null @@ -1,501 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-CircleLoader--indeterminate-fill-submask-2 { - animation: spectrum-fill-mask-2 1s infinite linear; -} -@keyframes spectrum-fill-mask-1 { - 0% { - transform: rotate(90deg); - } - - 1.69% { - transform: rotate(72.3deg); - } - - 3.39% { - transform: rotate(55.5deg); - } - - 5.08% { - transform: rotate(40.3deg); - } - - 6.78% { - transform: rotate(25deg); - } - - 8.47% { - transform: rotate(10.6deg); - } - - 10.17% { - transform: rotate(0deg); - } - - 11.86% { - transform: rotate(0deg); - } - - 13.56% { - transform: rotate(0deg); - } - - 15.25% { - transform: rotate(0deg); - } - - 16.95% { - transform: rotate(0deg); - } - - 18.64% { - transform: rotate(0deg); - } - - 20.34% { - transform: rotate(0deg); - } - - 22.03% { - transform: rotate(0deg); - } - - 23.73% { - transform: rotate(0deg); - } - - 25.42% { - transform: rotate(0deg); - } - - 27.12% { - transform: rotate(0deg); - } - - 28.81% { - transform: rotate(0deg); - } - - 30.51% { - transform: rotate(0deg); - } - - 32.2% { - transform: rotate(0deg); - } - - 33.9% { - transform: rotate(0deg); - } - - 35.59% { - transform: rotate(0deg); - } - - 37.29% { - transform: rotate(0deg); - } - - 38.98% { - transform: rotate(0deg); - } - - 40.68% { - transform: rotate(0deg); - } - - 42.37% { - transform: rotate(5.3deg); - } - - 44.07% { - transform: rotate(13.4deg); - } - - 45.76% { - transform: rotate(20.6deg); - } - - 47.46% { - transform: rotate(29deg); - } - - 49.15% { - transform: rotate(36.5deg); - } - - 50.85% { - transform: rotate(42.6deg); - } - - 52.54% { - transform: rotate(48.8deg); - } - - 54.24% { - transform: rotate(54.2deg); - } - - 55.93% { - transform: rotate(59.4deg); - } - - 57.63% { - transform: rotate(63.2deg); - } - - 59.32% { - transform: rotate(67.2deg); - } - - 61.02% { - transform: rotate(70.8deg); - } - - 62.71% { - transform: rotate(73.8deg); - } - - 64.41% { - transform: rotate(76.2deg); - } - - 66.1% { - transform: rotate(78.7deg); - } - - 67.8% { - transform: rotate(80.6deg); - } - - 69.49% { - transform: rotate(82.6deg); - } - - 71.19% { - transform: rotate(83.7deg); - } - - 72.88% { - transform: rotate(85deg); - } - - 74.58% { - transform: rotate(86.3deg); - } - - 76.27% { - transform: rotate(87deg); - } - - 77.97% { - transform: rotate(87.7deg); - } - - 79.66% { - transform: rotate(88.3deg); - } - - 81.36% { - transform: rotate(88.6deg); - } - - 83.05% { - transform: rotate(89.2deg); - } - - 84.75% { - transform: rotate(89.2deg); - } - - 86.44% { - transform: rotate(89.5deg); - } - - 88.14% { - transform: rotate(89.9deg); - } - - 89.83% { - transform: rotate(89.7deg); - } - - 91.53% { - transform: rotate(90.1deg); - } - - 93.22% { - transform: rotate(90.2deg); - } - - 94.92% { - transform: rotate(90.1deg); - } - - 96.61% { - transform: rotate(90deg); - } - - 98.31% { - transform: rotate(89.8deg); - } - - 100% { - transform: rotate(90deg); - } -} -@keyframes spectrum-fill-mask-2 { - 0% { - transform: rotate(180deg); - } - - 1.69% { - transform: rotate(180deg); - } - - 3.39% { - transform: rotate(180deg); - } - - 5.08% { - transform: rotate(180deg); - } - - 6.78% { - transform: rotate(180deg); - } - - 8.47% { - transform: rotate(180deg); - } - - 10.17% { - transform: rotate(179.2deg); - } - - 11.86% { - transform: rotate(164deg); - } - - 13.56% { - transform: rotate(151.8deg); - } - - 15.25% { - transform: rotate(140.8deg); - } - - 16.95% { - transform: rotate(130.3deg); - } - - 18.64% { - transform: rotate(120.4deg); - } - - 20.34% { - transform: rotate(110.8deg); - } - - 22.03% { - transform: rotate(101.6deg); - } - - 23.73% { - transform: rotate(93.5deg); - } - - 25.42% { - transform: rotate(85.4deg); - } - - 27.12% { - transform: rotate(78.1deg); - } - - 28.81% { - transform: rotate(71.2deg); - } - - 30.51% { - transform: rotate(89.1deg); - } - - 32.2% { - transform: rotate(105.5deg); - } - - 33.9% { - transform: rotate(121.3deg); - } - - 35.59% { - transform: rotate(135.5deg); - } - - 37.29% { - transform: rotate(148.4deg); - } - - 38.98% { - transform: rotate(161deg); - } - - 40.68% { - transform: rotate(173.5deg); - } - - 42.37% { - transform: rotate(180deg); - } - - 44.07% { - transform: rotate(180deg); - } - - 45.76% { - transform: rotate(180deg); - } - - 47.46% { - transform: rotate(180deg); - } - - 49.15% { - transform: rotate(180deg); - } - - 50.85% { - transform: rotate(180deg); - } - - 52.54% { - transform: rotate(180deg); - } - - 54.24% { - transform: rotate(180deg); - } - - 55.93% { - transform: rotate(180deg); - } - - 57.63% { - transform: rotate(180deg); - } - - 59.32% { - transform: rotate(180deg); - } - - 61.02% { - transform: rotate(180deg); - } - - 62.71% { - transform: rotate(180deg); - } - - 64.41% { - transform: rotate(180deg); - } - - 66.1% { - transform: rotate(180deg); - } - - 67.8% { - transform: rotate(180deg); - } - - 69.49% { - transform: rotate(180deg); - } - - 71.19% { - transform: rotate(180deg); - } - - 72.88% { - transform: rotate(180deg); - } - - 74.58% { - transform: rotate(180deg); - } - - 76.27% { - transform: rotate(180deg); - } - - 77.97% { - transform: rotate(180deg); - } - - 79.66% { - transform: rotate(180deg); - } - - 81.36% { - transform: rotate(180deg); - } - - 83.05% { - transform: rotate(180deg); - } - - 84.75% { - transform: rotate(180deg); - } - - 86.44% { - transform: rotate(180deg); - } - - 88.14% { - transform: rotate(180deg); - } - - 89.83% { - transform: rotate(180deg); - } - - 91.53% { - transform: rotate(180deg); - } - - 93.22% { - transform: rotate(180deg); - } - - 94.92% { - transform: rotate(180deg); - } - - 96.61% { - transform: rotate(180deg); - } - - 98.31% { - transform: rotate(180deg); - } - - 100% { - transform: rotate(180deg); - } -} -@keyframes spectrum-fills-rotate { - 0% {transform: rotate(-90deg)} - 100% {transform: rotate(270deg)} -} diff --git a/packages/fds-theme/components/circleloader/index.css b/packages/fds-theme/components/circleloader/index.css deleted file mode 100644 index 5b5e03e..0000000 --- a/packages/fds-theme/components/circleloader/index.css +++ /dev/null @@ -1,126 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; -@import 'animation.css'; - -.spectrum-CircleLoader { - display: inline-block; - width: var(--spectrum-loader-circle-medium-width); - height: var(--spectrum-loader-circle-medium-height); - position: relative; - direction: ltr; -} -.spectrum-CircleLoader-track { - box-sizing: border-box; - width: calc(var(--spectrum-loader-circle-medium-width)); - height: calc(var(--spectrum-loader-circle-medium-height)); - border-style: solid; - border-width: var(--spectrum-loader-circle-medium-border-size); - border-radius: var(--spectrum-loader-circle-medium-width); -} -.spectrum-CircleLoader-fills { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} -.spectrum-CircleLoader-fill { - box-sizing: border-box; - width: calc(var(--spectrum-loader-circle-medium-width)); - height: calc(var(--spectrum-loader-circle-medium-height)); - border-style: solid; - border-width: var(--spectrum-loader-circle-medium-border-size); - border-radius: var(--spectrum-loader-circle-medium-width); -} -.spectrum-CircleLoader-fillMask1, -.spectrum-CircleLoader-fillMask2 { - width: 50%; - height: 100%; - transform-origin: 100% center; - transform: rotate(180deg); - overflow: hidden; - position: absolute; -} -.spectrum-CircleLoader-fillSubMask1, -.spectrum-CircleLoader-fillSubMask2 { - width: 100%; - height: 100%; - transform-origin: 100% center; - overflow: hidden; - transform: rotate(-180deg); -} -.spectrum-CircleLoader-fillMask2 { - transform: rotate(0deg); -} - -.spectrum-CircleLoader--small { - width: var(--spectrum-loader-circle-small-width); - height: var(--spectrum-loader-circle-small-height); - - .spectrum-CircleLoader-track { - width: calc(var(--spectrum-loader-circle-small-width)); - height: calc(var(--spectrum-loader-circle-small-height)); - border-style: solid; - border-width: var(--spectrum-loader-circle-small-border-size); - border-radius: var(--spectrum-loader-circle-small-width); - } - .spectrum-CircleLoader-fill { - width: calc(var(--spectrum-loader-circle-small-width)); - height: calc(var(--spectrum-loader-circle-small-height)); - border-style: solid; - border-width: var(--spectrum-loader-circle-small-border-size); - border-radius: var(--spectrum-loader-circle-small-width); - } -} - -.spectrum-CircleLoader--large { - width: var(--spectrum-loader-circle-large-width); - height: var(--spectrum-loader-circle-large-height); - - .spectrum-CircleLoader-track { - width: calc(var(--spectrum-loader-circle-large-width)); - height: calc(var(--spectrum-loader-circle-large-height)); - border-style: solid; - border-width: var(--spectrum-loader-circle-large-border-size); - border-radius: var(--spectrum-loader-circle-large-width); - } - - .spectrum-CircleLoader-fill { - width: calc(var(--spectrum-loader-circle-large-width)); - height: calc(var(--spectrum-loader-circle-large-height)); - border-style: solid; - border-width: var(--spectrum-loader-circle-large-border-size); - border-radius: var(--spectrum-loader-circle-large-width); - } -} - -.spectrum-CircleLoader--indeterminate { - .spectrum-CircleLoader-fills { - will-change: transform; - transform: translateZ(0); - animation: spectrum-fills-rotate 1s infinite cubic-bezier(.25,.78,.48,.89); - transform-origin: center; - } - .spectrum-CircleLoader-fillSubMask1 { - will-change: transform; - transform: translateZ(0); - animation: spectrum-fill-mask-1 1s infinite linear; - } - - .spectrum-CircleLoader-fillSubMask2 { - will-change: transform; - transform: translateZ(0); - animation: spectrum-fill-mask-2 1s infinite linear; - } -} diff --git a/packages/fds-theme/components/circleloader/skin.css b/packages/fds-theme/components/circleloader/skin.css deleted file mode 100644 index 8d031dc..0000000 --- a/packages/fds-theme/components/circleloader/skin.css +++ /dev/null @@ -1,56 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-CircleLoader { - /* TODO: Update to use semantic tokens when available */ - --spectrum-loader-circle-medium-track-fill-color: var(--spectrum-accent-color-900); - --spectrum-loader-circle-static-black-track-color: rgba(0, 0, 0, 0.25); - --spectrum-loader-circle-static-black-fill-color: var(--spectrum-global-color-static-black); -} - -.spectrum-CircleLoader-track { - border-color: var(--spectrum-loader-circle-medium-track-color); -} - -.spectrum-CircleLoader-fill { - border-color: var(--spectrum-loader-circle-medium-track-fill-color); -} - -.spectrum-CircleLoader--overBackground, -.spectrum-CircleLoader--staticWhite { - .spectrum-CircleLoader-track { - border-color: var(--spectrum-loader-circle-medium-over-background-track-color); - } - .spectrum-CircleLoader-fill { - border-color: var(--spectrum-loader-circle-medium-over-background-track-fill-color); - } -} - -.spectrum-CircleLoader--staticBlack { - .spectrum-CircleLoader-track { - border-color: var(--spectrum-loader-circle-static-black-track-color); - } - .spectrum-CircleLoader-fill { - border-color: var(--spectrum-loader-circle-static-black-fill-color); - } -} - -@media (forced-colors: active) { - .spectrum-CircleLoader { - --spectrum-loader-circle-medium-track-fill-color: Highlight; - --spectrum-loader-circle-medium-over-background-track-fill-color: Highlight; - --spectrum-loader-circle-static-black-fill-color: Highlight; - --spectrum-loader-circle-medium-track-color: Background; - --spectrum-loader-circle-medium-over-background-track-color: Background; - --spectrum-loader-circle-static-black-track-color: Background; - } -} diff --git a/packages/fds-theme/components/circleloader/vars.css b/packages/fds-theme/components/circleloader/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/circleloader/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/coachmark/animation.css b/packages/fds-theme/components/coachmark/animation.css deleted file mode 100644 index 0291f18..0000000 --- a/packages/fds-theme/components/coachmark/animation.css +++ /dev/null @@ -1,41 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@keyframes pulse { - 0% { - -webkit-transform: scale(var(--spectrum-coachmark-animation-indicator-keyframe-0-scale)); - opacity: var(--spectrum-coachmark-animation-indicator-keyframe-0-opacity); - } - 50% { - -webkit-transform: scale(var(--spectrum-coachmark-animation-indicator-keyframe-50-scale)); - opacity: var(--spectrum-coachmark-animation-indicator-keyframe-50-opacity); - } - 100% { - -webkit-transform: scale(var(--spectrum-coachmark-animation-indicator-keyframe-100-scale)); - opacity: var(--spectrum-coachmark-animation-indicator-keyframe-100-opacity); - } -} - -@keyframes pulse--quiet { - 0% { - -webkit-transform: scale(var(--spectrum-coachmark-quiet-animation-indicator-keyframe-0-scale)); - opacity: var(--spectrum-coachmark-animation-indicator-keyframe-0-opacity); - } - 50% { - -webkit-transform: scale(var(--spectrum-coachmark-animation-indicator-keyframe-50-scale)); - opacity: var(--spectrum-coachmark-animation-indicator-keyframe-50-opacity); - } - 100% { - -webkit-transform: scale(var(--spectrum-coachmark-animation-indicator-keyframe-100-scale)); - opacity: var(--spectrum-coachmark-animation-indicator-keyframe-100-opacity); - } -} diff --git a/packages/fds-theme/components/coachmark/index.css b/packages/fds-theme/components/coachmark/index.css deleted file mode 100644 index a229286..0000000 --- a/packages/fds-theme/components/coachmark/index.css +++ /dev/null @@ -1,136 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; -@import 'animation.css'; - -.spectrum-CoachMarkPopover { - position: relative; - - min-width: var(--spectrum-coachmark-min-width); - max-width: var(--spectrum-coachmark-max-width); - - border-radius: var(--spectrum-coachmark-border-radius); - border-width: var(--spectrum-coachmark-border-size); - border-style: solid; - -} -.spectrum-CoachMarkPopover-image { - border-radius: var(--spectrum-coachmark-border-radius) var(--spectrum-coachmark-border-radius) 0 0; - - width: 100%; -} - -.spectrum-CoachMarkPopover-header, -.spectrum-CoachMarkPopover-content, -.spectrum-CoachMarkPopover-footer { - padding: 0 var(--spectrum-coachmark-padding-x); -} - -.spectrum-CoachMarkPopover-header { - padding-top: var(--spectrum-coachmark-padding-y); -} - -.spectrum-CoachMarkPopover-footer { - padding-bottom: var(--spectrum-coachmark-padding-y); -} - -.spectrum-CoachMarkPopover-header { - display: flex; - justify-content: space-between; - align-items: flex-end; - margin-bottom: var(--spectrum-coachmark-title-margin-bottom); -} - -.spectrum-CoachMarkPopover-title { - font-size: var(--spectrum-coachmark-title-text-size); - font-weight: var(--spectrum-coachmark-title-text-font-weight); - line-height: var(--spectrum-coachmark-title-text-line-height); - margin-bottom: 0; -} - -.spectrum-CoachMarkPopover-step { - align-self: flex-start; - - font-size: var(--spectrum-coachmark-step-text-size); - font-weight: var(--spectrum-coachmark-step-text-font-weight); - line-height: var(--spectrum-coachmark-step-text-line-height); - white-space: nowrap; -} - -.spectrum-CoachMarkPopover-content { - margin-bottom: var(--spectrum-coachmark-content-margin-bottom); -} - -.spectrum-CoachMarkPopover-footer { - margin-top: 0; - text-align: right; -} - -.spectrum-CoachMarkIndicator { - position: relative; - - margin: var(--spectrum-coachmark-indicator-gap); -} - -.spectrum-CoachMarkIndicator-ring { - display: block; - position: absolute; - - border-style: solid; - border-width: var(--spectrum-coachmark-indicator-ring-border-size); - border-radius: 50%; - - &:nth-child(2) { - animation-delay: calc(var(--spectrum-coachmark-animation-indicator-ring-duration) * var(--spectrum-coachmark-animation-inticator-ring-center-delay-multiple)); - } - - &:nth-child(3) { - animation-delay: calc(var(--spectrum-coachmark-animation-indicator-ring-duration) * var(--spectrum-coachmark-animation-inticator-ring-outer-delay-multiple)) - } -} - -.spectrum-CoachMarkIndicator { - min-width: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 3); - min-height: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 3); -} - -.spectrum-CoachMarkIndicator-ring { - top: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 0.75); - left: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 0.75); - - width: var(--spectrum-coachmark-indicator-ring-diameter); - height: var(--spectrum-coachmark-indicator-ring-diameter); - animation: pulse var(--spectrum-coachmark-animation-indicator-ring-duration) linear infinite; - - &:nth-child(1) { - animation-delay: calc(var(--spectrum-coachmark-animation-indicator-ring-duration) * var(--spectrum-coachmark-animation-inticator-ring-inner-delay-multiple)); - } -} - -.spectrum-CoachMarkIndicator--quiet { - min-width: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 2.75); - min-height: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 2.75); - - .spectrum-CoachMarkIndicator-ring { - top: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 0.75); - left: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 0.75); - - width: var(--spectrum-coachmark-quiet-indicator-ring-diameter); - height: var(--spectrum-coachmark-quiet-indicator-ring-diameter); - animation: pulse--quiet var(--spectrum-coachmark-animation-indicator-ring-duration) linear infinite; - - &:nth-child(1) { - animation-delay: calc(var(--spectrum-coachmark-animation-indicator-ring-duration) * var(--spectrum-coachmark-quiet-animation-inticator-ring-inner-delay-multiple)); - } - } -} diff --git a/packages/fds-theme/components/coachmark/skin.css b/packages/fds-theme/components/coachmark/skin.css deleted file mode 100644 index 4c8275d..0000000 --- a/packages/fds-theme/components/coachmark/skin.css +++ /dev/null @@ -1,41 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-CoachMarkPopover { - background-color: var(--spectrum-coachmark-background-color); - border-color: var(--spectrum-coachmark-border-color); - box-shadow: 0 1px 4px var(--spectrum-coachmark-shadow-color); -} - -.spectrum-CoachMarkPopover-title { - color: var(--spectrum-coachmark-title-text-color); -} - -.spectrum-CoachMarkPopover-step { - color: var(--spectrum-coachmark-step-text-color); -} - -.spectrum-CoachMarkPopover-content { - color: var(--spectrum-coachmark-content-text-color); -} - -.spectrum-CoachMarkIndicator-ring { - border-color: var(--spectrum-coachmark-indicator-ring-default-color); -} - -.spectrum-CoachMarkIndicator--light .spectrum-CoachMarkIndicator-ring { - border-color: var(--spectrum-coachmark-indicator-ring-low-contrast-color); -} - -.spectrum-CoachMarkIndicator--dark .spectrum-CoachMarkIndicator-ring { - border-color: var(--spectrum-coachmark-indicator-ring-high-contrast-color); -} diff --git a/packages/fds-theme/components/coachmark/vars.css b/packages/fds-theme/components/coachmark/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/coachmark/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/colorarea/index.css b/packages/fds-theme/components/colorarea/index.css deleted file mode 100644 index d74f816..0000000 --- a/packages/fds-theme/components/colorarea/index.css +++ /dev/null @@ -1,63 +0,0 @@ -.spectrum-ColorArea { - position: relative; - display: inline-block; - inline-size: var(--spectrum-colorarea-default-width); - block-size: var(--spectrum-colorarea-default-height); - min-inline-size: var(--spectrum-colorarea-min-width); - min-block-size: var(--spectrum-colorarea-min-height); - - border-radius: var(--spectrum-colorarea-border-radius); - - cursor: default; - - user-select: none; - - &.is-focused, - &.focus-ring { - z-index: 2; - - .spectrum-ColorArea-handle { - /* Bigger handle when focused */ - width: calc(var(--spectrum-colorhandle-size) * 2); - height: calc(var(--spectrum-colorhandle-size) * 2); - } - } - - &.is-disabled { - pointer-events: none; - } - - /* the floating inset box shadow must be a separate element since won't take it */ - &:before { - content: ''; - z-index: 1; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - border-radius: var(--spectrum-colorarea-border-radius); - } -} - -.spectrum-ColorArea-handle.spectrum-ColorArea-handle { - left: 0; - top: 0; - margin: 0; - - &:focus-within { - z-index: 2; - } -} - -.spectrum-ColorArea-slider { - opacity: 0.0001; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 0; - margin: 0; - pointer-events: none; -} diff --git a/packages/fds-theme/components/colorarea/skin.css b/packages/fds-theme/components/colorarea/skin.css deleted file mode 100644 index b8ea987..0000000 --- a/packages/fds-theme/components/colorarea/skin.css +++ /dev/null @@ -1,31 +0,0 @@ -.spectrum-ColorArea { - &:before { - box-shadow: inset 0 0 0 var(--spectrum-colorarea-border-size) var(--spectrum-colorarea-border-color); - } - } - .spectrum-ColorHandle-color { - forced-color-adjust: none; - } - - .spectrum-ColorArea { - &.is-disabled { - background: var(--spectrum-colorarea-fill-color-disabled); - - &:before { - box-shadow: inset 0 0 0 var(--spectrum-colorarea-border-size) var(--spectrum-colorarea-border-color-disabled); - } - } - } - - @media (forced-colors: active) { - .spectrum-ColorArea { - --spectrum-colorarea-fill-color-disabled: GrayText; - --spectrum-colorarea-border-color: ButtonBorder; - } - .spectrum-ColorArea { - forced-color-adjust: none; - &.is-disabled { - forced-color-adjust: none; - } - } - } diff --git a/packages/fds-theme/components/colorarea/vars.css b/packages/fds-theme/components/colorarea/vars.css deleted file mode 100644 index f0681ac..0000000 --- a/packages/fds-theme/components/colorarea/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2021 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/colorhandle/index.css b/packages/fds-theme/components/colorhandle/index.css deleted file mode 100644 index 0840a01..0000000 --- a/packages/fds-theme/components/colorhandle/index.css +++ /dev/null @@ -1,81 +0,0 @@ -:root { - /* redefine this var so it can be used in skin.css */ - --spectrum-colorhandle-background-offset: calc(-1 * var(--spectrum-global-dimension-static-size-25)); - --spectrum-colorhandle-checkerboard-size: var(--spectrum-global-dimension-static-size-100); - - --spectrum-colorhandle-animation-duration: var(--spectrum-global-animation-duration-100); - --spectrum-colorhandle-animation-easing: ease-in-out; - - --spectrum-colorhandle-hitarea-size: var(--spectrum-global-dimension-size-300); - --spectrum-colorhandle-hitarea-radius: 100%; -} - -.spectrum-ColorHandle { - display: block; - position: absolute; - z-index: 1; /* Be above */ - box-sizing: border-box; - width: var(--spectrum-colorhandle-size); - height: var(--spectrum-colorhandle-size); - - margin-left: calc(-1 * calc(var(--spectrum-colorhandle-size) / 2)); - margin-top: calc(-1 * calc(var(--spectrum-colorhandle-size) / 2)); - - border-width: var(--spectrum-colorhandle-inner-border-size); - border-style: solid; - - background-size: - var(--spectrum-global-dimension-static-size-200) - var(--spectrum-global-dimension-static-size-200); - background-position: - var(--spectrum-colorhandle-background-offset) var(--spectrum-colorhandle-background-offset), - var(--spectrum-colorhandle-background-offset) calc(var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)), - calc(var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)) calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)), - calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)) var(--spectrum-colorhandle-background-offset); - - transition: - width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing), - height var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing), - border-width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing), - margin-left var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing), - margin-top var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing); - - &, - &:after { - border-radius: 100%; - } - - &:after { - content: ''; - left: calc(50% - calc(var(--spectrum-colorhandle-hitarea-size) / 2)); - top: calc(50% - calc(var(--spectrum-colorhandle-hitarea-size) / 2)); - position: absolute; - display: block; - width: var(--spectrum-colorhandle-hitarea-size); - height: var(--spectrum-colorhandle-hitarea-size); - } - - &.is-disabled { - pointer-events: none; - } -} - -.spectrum-ColorControl-handle--focused { - /* Bigger handle when focused */ - width: calc(var(--spectrum-colorhandle-size) * 2); - height: calc(var(--spectrum-colorhandle-size) * 2); - - margin-left: calc(-1 * var(--spectrum-colorhandle-size)); - margin-top: calc(-1 * var(--spectrum-colorhandle-size)); -} - -.is-focused, -.focus-ring { - composes: spectrum-ColorControl-handle--focused; -} - -.spectrum-ColorHandle-color { - border-radius: 100%; - width: 100%; - height: 100%; -} diff --git a/packages/fds-theme/components/colorhandle/skin.css b/packages/fds-theme/components/colorhandle/skin.css deleted file mode 100644 index 87441fa..0000000 --- a/packages/fds-theme/components/colorhandle/skin.css +++ /dev/null @@ -1,38 +0,0 @@ -:root { - /* redefine this var so it can be used in skin.css */ - --spectrum-colorhandle-background-offset: calc(-1 * var(--spectrum-global-dimension-static-size-25)); - --spectrum-colorhandle-checkerboard-size: var(--spectrum-global-dimension-static-size-100); - - /* todo: update DNA so this is no longer required */ - --spectrum-colorhandle-outer-border-color: rgba(0, 0, 0, 0.42); -} - -.spectrum-ColorHandle { - border-color: var(--spectrum-colorhandle-inner-border-color); - box-shadow: 0 0 0 var(--spectrum-colorhandle-outer-border-size) var(--spectrum-colorhandle-outer-border-color); - background: repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 50% 50% / 16px 16px; - - &.is-disabled { - border-color: var(--spectrum-colorhandle-inner-border-color-disabled); - background: var(--spectrum-colorhandle-fill-color-disabled); - box-shadow: none; - - .spectrum-ColorHandle-color { - display: none; - } - } -} - -.spectrum-ColorHandle-color { - box-shadow: inset 0 0 0 var(--spectrum-colorhandle-outer-border-size) var(--spectrum-colorhandle-outer-border-color); -} - -@media (forced-colors: active) { - .spectrum-ColorHandle { - forced-color-adjust: none; - --spectrum-colorhandle-inner-border-color-disabled: GrayText; - --spectrum-colorhandle-fill-color-disabled: GrayText; - --spectrum-colorhandle-inner-border-color: ButtonText; - --spectrum-colorhandle-outer-border-color: ButtonFace; - } -} \ No newline at end of file diff --git a/packages/fds-theme/components/colorhandle/vars.css b/packages/fds-theme/components/colorhandle/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/colorhandle/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/colorloupe/index.css b/packages/fds-theme/components/colorloupe/index.css deleted file mode 100644 index 6b261ed..0000000 --- a/packages/fds-theme/components/colorloupe/index.css +++ /dev/null @@ -1,46 +0,0 @@ -:root { - /* size is the same on desktop and mobile */ - --spectrum-colorloupe-width-adjusted: calc( - var(--spectrum-colorloupe-width) + - var(--spectrum-colorhandle-inner-border-size) * 2 - ); - --spectrum-colorloupe-height-adjusted: calc( - var(--spectrum-colorloupe-height) + - var(--spectrum-colorhandle-inner-border-size) * 2 - ); - - /* Distance between the loupe and the handle */ - --spectrum-colorloupe-offset: var( - --spectrum-global-dimension-static-size-200 - ); - - /* How much to animate up to the offset distance */ - --spectrum-colorloupe-animation-distance: var( - --spectrum-global-dimension-static-size-100 - ); -} - -.spectrum-ColorLoupe { - width: var(--spectrum-colorloupe-width-adjusted); - height: var(--spectrum-colorloupe-height-adjusted); - - position: absolute; - transform: translate(0, var(--spectrum-colorloupe-animation-distance)); - opacity: 0; - transform-origin: bottom center; - margin-top: calc(var(--spectrum-colorloupe-height-adjusted) * -1 - var(--spectrum-colorloupe-offset)); - margin-left: calc(calc(var(--spectrum-colorloupe-width-adjusted) / -2)); - transition: transform 100ms ease-in-out, opacity 125ms ease-in-out; - - pointer-events: none; - - &.is-open { - transform: translate(0, 0); - opacity: 1; - z-index: 2; - } -} - -.spectrum-ColorLoupe-outer { - stroke-width: var(--spectrum-colorloupe-outer-border-size); -} diff --git a/packages/fds-theme/components/colorloupe/skin.css b/packages/fds-theme/components/colorloupe/skin.css deleted file mode 100644 index c982ab9..0000000 --- a/packages/fds-theme/components/colorloupe/skin.css +++ /dev/null @@ -1,19 +0,0 @@ -.spectrum-ColorLoupe-outer { - fill: var(--spectrum-colorloupe-inner-border-color); - stroke: var(--spectrum-colorloupe-outer-border-color); -} - -.spectrum-ColorLoupe-inner-background { - fill: var(--spectrum-global-color-static-white); -} -.spectrum-ColorLoupe-inner-checker { - fill: #e6e6e6; -} - -@media (forced-colors: active) { - .spectrum-ColorLoupe { - forced-color-adjust: none; - --spectrum-colorloupe-inner-border-color: ButtonText; - --spectrum-colorloupe-outer-border-color: ButtonFace; - } -} \ No newline at end of file diff --git a/packages/fds-theme/components/colorloupe/vars.css b/packages/fds-theme/components/colorloupe/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/colorloupe/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/colorslider/index.css b/packages/fds-theme/components/colorslider/index.css deleted file mode 100644 index 3850a6b..0000000 --- a/packages/fds-theme/components/colorslider/index.css +++ /dev/null @@ -1,120 +0,0 @@ -:root { - --spectrum-colorslider-handle-hitarea-border-radius: 0%; - --spectrum-colorslider-handle-hitarea-width: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-colorslider-handle-hitarea-height: var( - --spectrum-global-dimension-size-300 - ); -} - -.spectrum-ColorControl-hiddenField { - opacity: 0.0001; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 0; - margin: 0; - pointer-events: none; -} - -.spectrum-ColorSlider-container--horizontal { - width: var(--spectrum-colorslider-default-length); -} - -.spectrum-ColorSlider-container--vertical { - display: flex; - flex-direction: column; - height: var(--spectrum-colorslider-default-length); -} - -.spectrum-ColorSlider { - position: relative; - display: block; - width: 100%; - height: var(--spectrum-colorslider-height); - border-radius: var(--spectrum-colorslider-border-radius); - - /* Otherwise we randomly drag a file icon */ - user-select: none; - touch-action: none; - - cursor: default; - - .spectrum-ColorSlider-handle.spectrum-ColorSlider-handle { - margin: 0; - } - - /* The checkerboard is a separate element so that the gradient is overlaid on top. */ - &:before { - content: ""; - z-index: -1; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - border-radius: var(--spectrum-colorslider-border-radius); - background-size: var(--spectrum-global-dimension-static-size-200) - var(--spectrum-global-dimension-static-size-200); - background-position: 0 0, 0 var(--spectrum-global-dimension-static-size-100), - var(--spectrum-global-dimension-static-size-100) - calc(-1 * var(--spectrum-global-dimension-static-size-100)), - calc(-1 * var(--spectrum-global-dimension-static-size-100)) 0; - } - - &.is-focused { - z-index: 2; - } - - &.is-disabled { - pointer-events: none; - } -} - -.spectrum-ColorSlider--vertical { - display: inline-block; - - width: var(--spectrum-colorslider-vertical-width); - flex: 1; - - .spectrum-ColorSlider-handle { - left: 50%; - top: 0; - } -} - -.spectrum-ColorSlider-handle { - left: 0; - top: 50%; - - &:after { - border-radius: var(--spectrum-colorslider-handle-hitarea-border-radius); - width: var(--spectrum-colorslider-handle-hitarea-width); - height: var(--spectrum-colorslider-handle-hitarea-height); - } -} - -.spectrum-ColorSlider-slider { - composes: spectrum-ColorControl-hiddenField; -} - -.spectrum-ColorSlider-labelContainer { - display: grid; - grid-template-areas: "label contextualHelp value"; - grid-template-columns: auto 1fr auto; - justify-items: start; -} - -.spectrum-ColorSlider-contextualHelp.spectrum-ColorSlider-contextualHelp { - grid-area: contextualHelp; - margin-inline-start: var(--spectrum-global-dimension-size-50); - margin-top: var(--spectrum-global-dimension-size-25); -} - -.spectrum-ColorSlider-valueLabel { - grid-area: value; - margin-inline-start: var(--spectrum-global-dimension-size-50); -} diff --git a/packages/fds-theme/components/colorslider/skin.css b/packages/fds-theme/components/colorslider/skin.css deleted file mode 100644 index 3848261..0000000 --- a/packages/fds-theme/components/colorslider/skin.css +++ /dev/null @@ -1,28 +0,0 @@ -:root { - /* todo: fix this in DNA */ - --spectrum-colorslider-border-color: var(--spectrum-colorarea-border-color); -} - -.spectrum-ColorSlider { - background-color: var(--spectrum-global-color-static-white); - box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size) var(--spectrum-colorslider-border-color); - - &:before { - background: repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px; - } - - &.is-disabled { - background: var(--spectrum-colorslider-fill-color-disabled) !important; - box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size) var(--spectrum-colorslider-border-color-disabled); - } -} - -@media (forced-colors: active) { - .spectrum-ColorSlider { - forced-color-adjust: none; - --spectrum-colorslider-fill-color-disabled: GrayText; - --spectrum-colorslider-border-color-disabled: GrayText; - --spectrum-colorslider-border-color: ButtonText; - --spectrum-colorarea-border-color: ButtonText; - } -} diff --git a/packages/fds-theme/components/colorslider/vars.css b/packages/fds-theme/components/colorslider/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/colorslider/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/colorwheel/index.css b/packages/fds-theme/components/colorwheel/index.css deleted file mode 100644 index 741d5c6..0000000 --- a/packages/fds-theme/components/colorwheel/index.css +++ /dev/null @@ -1,86 +0,0 @@ -:root { - /* todo: fix this in DNA */ - --spectrum-colorwheel-focus-ring-size: var(--spectrum-global-dimension-static-size-25); - --spectrum-colorwheel-border-radius: 100%; - --spectrum-colorwheel-width: calc(var(--spectrum-global-dimension-size-125) * 16); - --spectrum-colorwheel-height: var(--spectrum-colorwheel-width); -} - -/** index.css (scale dependent) */ - -.spectrum-ColorControl-hiddenField { - opacity: 0.0001; - position: absolute; - top: 0; left: 0; - width: 100%; height: 100%; - z-index: 0; - margin: 0; - pointer-events: none; -} - -/* Use two class selectors as a workaround for the issue: https://github.com/adobe/react-spectrum/issues/1605 */ -.spectrum-ColorWheel.spectrum-ColorWheel { - position: relative; - display: block; - width: var(--spectrum-colorwheel-width); - height: var(--spectrum-colorwheel-height); - /* expose to JS */ - --spectrum-colorwheel-track-thickness: var(--spectrum-colorwheel-track-width); - - border-radius: var(--spectrum-colorwheel-border-radius); - - user-select: none; - touch-action: none; - cursor: default; - - .spectrum-ColorWheel-handle { - margin: 0; - } - - &.is-focused { - z-index: 2; - } - - &.is-disabled { - pointer-events: none; - } - - &.is-dragged { - /* Be on top when dragging so loupe can overlap */ - z-index: 2; - } -} - -.spectrum-ColorWheel-gradient { - position: relative; - z-index: 0; - width: var(--spectrum-colorwheel-width); - height: var(--spectrum-colorwheel-height); - - &:before, - &:after { - content: ""; - position: absolute; - border-radius: 100%; - border-width: var(--spectrum-colorwheel-border-size); - border-style: solid; - } - - &:before { - top: 0; - left: 0; - bottom: 0; - right: 0; - } - - &:after { - top: calc(var(--spectrum-colorwheel-track-width) - var(--spectrum-colorwheel-border-size)); - left: calc(var(--spectrum-colorwheel-track-width) - var(--spectrum-colorwheel-border-size)); - bottom: calc(var(--spectrum-colorwheel-track-width) - var(--spectrum-colorwheel-border-size)); - right: calc(var(--spectrum-colorwheel-track-width) - var(--spectrum-colorwheel-border-size)); - } -} - -.spectrum-ColorWheel-slider { - composes: spectrum-ColorControl-hiddenField; -} diff --git a/packages/fds-theme/components/colorwheel/skin.css b/packages/fds-theme/components/colorwheel/skin.css deleted file mode 100644 index 317f672..0000000 --- a/packages/fds-theme/components/colorwheel/skin.css +++ /dev/null @@ -1,39 +0,0 @@ -:root { - /* todo: fix this in DNA */ - --spectrum-colorwheel-border-color: var(--spectrum-colorarea-border-color); -} - -.spectrum-ColorWheel { - &.is-disabled { - .spectrum-ColorWheel-gradient { - background: var(--spectrum-colorwheel-fill-color-disabled) !important; - - &:before, - &:after { - border-color: var(--spectrum-colorwheel-border-color-disabled); - } - } - - /* hide all the little colored bits */ - .spectrum-ColorWheel-segment { - display: none; - } - } -} - -.spectrum-ColorWheel-gradient { - &:before, - &:after { - border-color: var(--spectrum-colorwheel-border-color); - } -} - -@media (forced-colors: active) { - .spectrum-ColorWheel { - forced-color-adjust: none; - --spectrum-colorwheel-fill-color-disabled: GrayText; - --spectrum-colorwheel-border-color-disabled: GrayText; - --spectrum-colorwheel-border-color: ButtonText; - --spectrum-colorarea-border-color: ButtonText; - } -} \ No newline at end of file diff --git a/packages/fds-theme/components/colorwheel/vars.css b/packages/fds-theme/components/colorwheel/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/colorwheel/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/contextualhelp/index.css b/packages/fds-theme/components/contextualhelp/index.css deleted file mode 100644 index f2fea95..0000000 --- a/packages/fds-theme/components/contextualhelp/index.css +++ /dev/null @@ -1,47 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -:root { - --spectrum-contextualhelp-button-size: var(--spectrum-global-dimension-size-250); - --spectrum-contextualhelp-icon-size: var(--spectrum-global-dimension-size-175); - --spectrum-contexualhelp-dialog-width: 250px; - --spectrum-contextualhelp-dialog-padding: var(--spectrum-global-dimension-static-size-300); -} - -.react-spectrum-ContextualHelp-button { - --spectrum-button-primary-height: var(--spectrum-contextualhelp-button-size); - --spectrum-actionbutton-height: var(--spectrum-contextualhelp-button-size); - --spectrum-actionbutton-min-width: var(--spectrum-contextualhelp-button-size); - --spectrum-actionbutton-icon-padding-x: var(--spectrum-global-dimension-size-40); - - svg { - block-size: var(--spectrum-contextualhelp-icon-size); - inline-size: var(--spectrum-contextualhelp-icon-size); - } -} - -.react-spectrum-ContextualHelp-dialog.react-spectrum-ContextualHelp-dialog { - width: var(--spectrum-contexualhelp-dialog-width); - --spectrum-dialog-padding-x: var(--spectrum-contextualhelp-dialog-padding); - --spectrum-dialog-padding-y: var(--spectrum-contextualhelp-dialog-padding); - - &.react-spectrum-ContextualHelp-dialog--isMobile { - width: 100%; - } - .react-spectrum-ContextualHelp-content { - margin-top: var(--spectrum-global-dimension-static-size-100); - } - - .react-spectrum-ContextualHelp-footer { - padding-top: var(--spectrum-global-dimension-static-size-100); - } -} diff --git a/packages/fds-theme/components/contextualhelp/skin.css b/packages/fds-theme/components/contextualhelp/skin.css deleted file mode 100644 index ff0df4a..0000000 --- a/packages/fds-theme/components/contextualhelp/skin.css +++ /dev/null @@ -1,11 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ diff --git a/packages/fds-theme/components/contextualhelp/vars.css b/packages/fds-theme/components/contextualhelp/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/contextualhelp/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/cyclebutton/index.css b/packages/fds-theme/components/cyclebutton/index.css deleted file mode 100644 index ea7d146..0000000 --- a/packages/fds-theme/components/cyclebutton/index.css +++ /dev/null @@ -1,22 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -.spectrum-CycleButton { - /* Be square */ - padding: 0 var(--spectrum-actionbutton-icon-padding-x); - - .spectrum-CycleButton-item:not(.is-selected) { - display: none - } -} diff --git a/packages/fds-theme/components/cyclebutton/skin.css b/packages/fds-theme/components/cyclebutton/skin.css deleted file mode 100644 index 55fa2f5..0000000 --- a/packages/fds-theme/components/cyclebutton/skin.css +++ /dev/null @@ -1,11 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ diff --git a/packages/fds-theme/components/cyclebutton/vars.css b/packages/fds-theme/components/cyclebutton/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/cyclebutton/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/dialog/index.css b/packages/fds-theme/components/dialog/index.css deleted file mode 100644 index ab1695c..0000000 --- a/packages/fds-theme/components/dialog/index.css +++ /dev/null @@ -1,534 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; -@import '../overlay/index.css'; - -:root { - /* Distance between the edge of the fullscreen dialog and header */ - --spectrum-dialog-fullscreen-padding-top: calc(var(--spectrum-dialog-padding) - 10px); - - /* The font-size of the fullscreen dialog header */ - --spectrum-dialog-fullscreen-header-text-size: 28px; - - /* The font-weight of the fullscreen dialog header */ - --spectrum-dialog-fullscreen-header-text-font-weight: 100; - - /* Distance between top and bottom of dialog and edge of window for fullscreen dialog */ - --spectrum-dialog-fullscreen-margin: 40px; - - --spectrum-dialog-small-width: 400px; - --spectrum-dialog-medium-width: 480px; - --spectrum-dialog-large-width: 640px; - --spectrum-dialog-max-width: 90vw; - --spectrum-dialog-max-height: 90%; - --spectrum-dialog-hero-height: var(--spectrum-global-dimension-size-1600); - --spectrum-dialog-alert-width: var(--spectrum-dialog-medium-width); - - --spectrum-dialog-button-margin: var(--spectrum-global-dimension-size-200); - --spectrum-dialog-content-margin-bottom: var(--spectrum-global-dimension-size-450); - --spectrum-dialog-content-min-height: var(--spectrum-component-single-line-height); - - /* 12px desktop (medium scale) and 8px mobile (large scale) */ - --spectrum-dialog-close-button-padding: calc(26px - var(--spectrum-global-dimension-size-175)); - --spectrum-dialog-close-button-size: var(--spectrum-global-dimension-size-400); - - --spectrum-dialog-gap-size: var(--spectrum-global-dimension-size-200); -} - - -.spectrum-Dialog { - /* Be a flexbox to allow a full sized content area that scrolls */ - display: flex; - - /* Allow 100% width, taking into account padding */ - box-sizing: border-box; - - /* Be no bigger than max-width, but also be 90% if the viewport is smaller than max-width */ - width: fit-content; - min-width: var(--spectrum-dialog-min-width); - max-width: 100%; - - max-height: inherit; - overflow: hidden; - outline: none; - - --spectrum-dialog-padding-x: var(--spectrum-dialog-padding); - --spectrum-dialog-padding-y: var(--spectrum-dialog-padding); - --spectrum-dialog-border-radius: var(--spectrum-border-radius); - - border-radius: var(--spectrum-dialog-border-radius); -} - -.spectrum-Dialog--small { - width: var(--spectrum-dialog-small-width); -} - -.spectrum-Dialog--medium { - width: var(--spectrum-dialog-medium-width); -} - -.spectrum-Dialog--large { - width: var(--spectrum-dialog-large-width); -} - -.spectrum-Dialog-hero { - grid-area: hero; - height: var(--spectrum-dialog-hero-height); - - border-top-left-radius: var(--spectrum-dialog-border-radius); - border-top-right-radius: var(--spectrum-dialog-border-radius); - - background-size: cover; - background-position: center center; - overflow: hidden; -} - -.spectrum-Dialog .spectrum-Dialog-grid { - display: grid; - grid-template-columns: var(--spectrum-dialog-padding-x) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-padding-x); - grid-template-rows: auto var(--spectrum-dialog-padding-y) auto auto 1fr auto var(--spectrum-dialog-padding-y); - grid-template-areas: - "hero hero hero hero hero hero" - ". . . . . ." - ". heading header header typeIcon ." - ". divider divider divider divider ." - ". content content content content ." - ". footer footer buttonGroup buttonGroup ." - ". . . . . ."; - width: 100%; -} - -.spectrum-Dialog-heading { - grid-area: heading; - - margin: 0; - - font-size: var(--spectrum-dialog-title-text-size); - font-weight: var(--spectrum-dialog-title-text-font-weight); - line-height: var(--spectrum-dialog-title-text-line-height); - - outline: none; /* Hide focus outline */ - - padding-inline-end: var(--spectrum-dialog-gap-size); - - &.spectrum-Dialog-heading--noHeader { - grid-area: heading-start / heading-start / header-end / header-end; - padding-inline-end: 0; - } - - &.spectrum-Dialog-heading--noHeader.spectrum-Dialog-heading--noTypeIcon { - grid-area: heading-start / heading-start / typeIcon-end / typeIcon-end; - padding-inline-end: 0; - } -} - -.spectrum-Dialog-header { - grid-area: header; - display: flex; - /* Without this, buttons will be stretched */ - align-items: center; - justify-content: flex-end; - - box-sizing: border-box; - - outline: none; /* Hide focus outline around header */ - min-width: fit-content; /* prevents header with width 0px */ - - &.spectrum-Dialog-header--noTypeIcon { - grid-area: header-start / header-start / typeIcon-end / typeIcon-end; - padding-inline-end: 0; - } -} - -.spectrum-Dialog-typeIcon { - grid-area: typeIcon; -} - -.spectrum-Dialog .spectrum-Dialog-divider { - grid-area: divider; - width: 100%; - margin-top: var(--spectrum-dialog-rule-margin-top); - margin-bottom: var(--spectrum-dialog-rule-margin-bottom); -} - -.spectrum-Dialog--noDivider { - .spectrum-Dialog-divider { - display: none; - } -} - -.spectrum-Dialog-content { - grid-area: content; - box-sizing: border-box; - - /* - v2 is currently worse, inputs that get focus rings get a slight clipping unless overflow: visible replaces this line - we should think of a better way to handle this, see padding/margin below for fix - */ - overflow-y: auto; - -webkit-overflow-scrolling: touch; - - outline: none; /* Hide focus outline */ - - font-size: var(--spectrum-dialog-content-text-size); - font-weight: var(--spectrum-dialog-content-text-font-weight); - line-height: var(--spectrum-dialog-content-text-line-height); - - /* - this is kinda dumb, but needed for the keyboard focus rings so they don't get clipped. - is there a better way to treat this - it's needed in every instance of overflow being set to anything other than visible - */ - padding: calc(var(--spectrum-global-dimension-size-25) * 2); - margin: calc(var(--spectrum-global-dimension-size-25) * -2); - - /* for zoom (a11y) and short windows */ - min-height: var(--spectrum-dialog-content-min-height); -} - - -.spectrum-Dialog-footer { - grid-area: footer; - /* this padding isn't built into the grid because it disappears with this footer */ - padding-block-start: var(--spectrum-global-dimension-static-size-500); - - display: flex; - flex-wrap: wrap; - - outline: none; /* Hide focus outline */ - - /* Both selectors are required to override the button + button rule */ - > *, - > .spectrum-Button + .spectrum-Button { - margin-bottom: 0; - } -} - -.spectrum-Dialog-buttonGroup { - grid-area: buttonGroup; - /* this padding isn't built into the grid because it disappears with this buttonGroup */ - padding-block-start: var(--spectrum-global-dimension-static-size-500); - display: flex; - justify-content: flex-end; - /* this padding should be safe as button group is always end aligned */ - padding-inline-start: var(--spectrum-dialog-gap-size); - /* Fixes Firefox buttongroup overflow (switch from horizontal buttongroup to vertical buttongroup) */ - max-width: 100%; - - &.spectrum-Dialog-buttonGroup--noFooter { - grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end; - } -} - -.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid { - grid-template-columns: var(--spectrum-dialog-padding-x) auto 1fr auto minmax(0, auto) minmax(0, var(--spectrum-dialog-close-button-size)) var(--spectrum-dialog-padding-x); - grid-template-rows: auto var(--spectrum-dialog-padding-y) auto auto 1fr auto var(--spectrum-dialog-padding-y); - grid-template-areas: - "hero hero hero hero hero hero hero" - ". . . . . closeButton closeButton" - ". heading header header typeIcon closeButton closeButton" - ". divider divider divider divider divider ." - ". content content content content content ." - ". footer footer buttonGroup buttonGroup buttonGroup ." - ". . . . . . ."; - - .spectrum-Dialog-buttonGroup { - display: none; - } - .spectrum-Dialog-footer { - grid-area: footer / footer/ buttonGroup / buttonGroup; - } -} - -.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-closeButton { - grid-area: closeButton; - /* align and justify so it doesn't do the default 'stretch' and end up with forced height/width */ - align-self: flex-start; - justify-self: end; - - margin-inline-end: var(--spectrum-dialog-close-button-padding); - margin-block-start: var(--spectrum-dialog-close-button-padding); -} - -/* Alert Dialog is a specific type of Dialog */ -.spectrum-Dialog--error { - width: var(--spectrum-dialog-alert-width); -} - -.spectrum-Dialog--fullscreen { - width: 100%; - height: 100%; -} -.spectrum-Dialog--fullscreenTakeover { - width: 100%; - height: 100%; - - border-style: none; - border-radius: 0; -} -/** @unofficial */ -.spectrum-Dialog--fullscreen, -.spectrum-Dialog--fullscreenTakeover { - max-height: none; - max-width: none; - - &.spectrum-Dialog .spectrum-Dialog-grid { - display: grid; - grid-template-columns: var(--spectrum-dialog-padding-x) 1fr auto auto var(--spectrum-dialog-padding-x); - grid-template-rows: var(--spectrum-dialog-padding-y) auto auto 1fr var(--spectrum-dialog-padding-y); - grid-template-areas: - ". . . . ." - ". heading header buttonGroup ." - ". divider divider divider ." - ". content content content ." - ". . . . ."; - } - - .spectrum-Dialog-heading { - font-size: var(--spectrum-dialog-fullscreen-header-text-size); - - &.spectrum-Dialog-heading--noHeader { - grid-area: heading-start / heading-start / header-end / header-end; - padding-inline-end: 0; - } - - /* there will never be a typeIcon here */ - &.spectrum-Dialog-heading--noHeader.spectrum-Dialog-heading--noTypeIcon { - grid-area: heading-start / heading-start / header-end / header-end; - padding-inline-end: 0; - } - } - .spectrum-Dialog-header { - &.spectrum-Dialog-header--noTypeIcon { - grid-area: header; - padding-inline-end: 0; - } - } - - .spectrum-Dialog-content { - max-height: none; - } - - .spectrum-Dialog-footer, - .spectrum-Dialog-buttonGroup { - padding-block-start: 0px; - } - - .spectrum-Dialog-footer, .spectrum-Dialog-typeIcon, .spectrum-Dialog-closeButton { - display: none; - } - - .spectrum-Dialog-buttonGroup { - grid-area: buttonGroup; - } -} - -@media screen and (max-width: 700px) { - /* for zoom (a11y) */ - .spectrum-Dialog { - --spectrum-dialog-padding: var(--spectrum-global-dimension-static-size-300); - } - - .spectrum-Dialog .spectrum-Dialog-grid { - grid-template-columns: var(--spectrum-dialog-padding-x) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-padding-x); - grid-template-rows: auto var(--spectrum-dialog-padding-y) auto auto auto 1fr auto var(--spectrum-dialog-padding-y); - grid-template-areas: - "hero hero hero hero hero hero" - ". . . . . ." - ". heading heading heading typeIcon ." - ". header header header header ." - ". divider divider divider divider ." - ". content content content content ." - ". footer footer buttonGroup buttonGroup ." - ". . . . . ."; - } - .spectrum-Dialog-heading { - &.spectrum-Dialog-heading--noHeader { - grid-area: heading; - } - - /* match specificity from above where it had noHeader, but here header won't prevent heading from expanding */ - &.spectrum-Dialog-heading--noTypeIcon.spectrum-Dialog-heading--noTypeIcon { - grid-area: heading-start / heading-start / typeIcon-end / typeIcon-end; - } - } - .spectrum-Dialog-header { - &.spectrum-Dialog-header--noTypeIcon { - grid-area: header; - } - } - - .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid { - grid-template-columns: var(--spectrum-dialog-padding-x) auto 1fr auto minmax(0, auto) minmax(0, var(--spectrum-dialog-close-button-size)) var(--spectrum-dialog-padding-x); - grid-template-rows: auto var(--spectrum-dialog-padding-y) auto auto auto 1fr auto var(--spectrum-dialog-padding-y); - grid-template-areas: - "hero hero hero hero hero hero hero" - ". . . . . closeButton closeButton" - ". heading heading heading typeIcon closeButton closeButton" - ". header header header header header ." - ". divider divider divider divider divider ." - ". content content content content content ." - ". footer footer buttonGroup buttonGroup buttonGroup ." - ". . . . . . ."; - } - - .spectrum-Dialog .spectrum-Dialog-header { - justify-content: flex-start; - } - - .spectrum-Dialog-footer { - min-width: fit-content; - } - - .spectrum-Dialog-buttonGroup { - min-width: 0; - } - - .spectrum-Dialog--fullscreen, - .spectrum-Dialog--fullscreenTakeover { - - &.spectrum-Dialog .spectrum-Dialog-grid { - display: grid; - grid-template-columns: var(--spectrum-dialog-padding-x) 1fr var(--spectrum-dialog-padding-x); - grid-template-rows: var(--spectrum-dialog-padding-y) auto auto auto 1fr auto var(--spectrum-dialog-padding-y); - grid-template-areas: - ". . ." - ". heading ." - ". header ." - ". divider ." - ". content ." - ". buttonGroup ." - ". . ."; - } - .spectrum-Dialog-heading { - &.spectrum-Dialog-heading--noHeader, - &.spectrum-Dialog-heading--noTypeIcon { - grid-area: heading; - } - - /* there will never be a typeIcon here */ - &.spectrum-Dialog-heading--noHeader.spectrum-Dialog-heading--noTypeIcon { - grid-area: heading; - } - } - .spectrum-Dialog-header { - &.spectrum-Dialog-header--noTypeIcon { - grid-area: header; - } - } - - .spectrum-Dialog-buttonGroup { - padding-block-start: var(--spectrum-global-dimension-static-size-500); - } - - .spectrum-Dialog-heading { - font-size: var(--spectrum-dialog-title-text-size); - } - } -} - -/* additional a11y support by moving scrolling from content to dialog */ -@media screen and (max-height: 400px) { - .spectrum-Dialog .spectrum-Dialog-grid { - border-top-left-radius: var(--spectrum-dialog-border-radius); - border-top-right-radius: var(--spectrum-dialog-border-radius); - overflow-y: auto; - - grid-template-columns: var(--spectrum-dialog-padding-x) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-padding-x); - grid-template-rows: auto var(--spectrum-dialog-padding-y) auto auto auto 1fr auto auto var(--spectrum-dialog-padding-y); - grid-template-areas: - "hero hero hero hero hero hero" - ". . . . . ." - ". heading heading heading typeIcon ." - ". header header header header ." - ". divider divider divider divider ." - ". content content content content ." - ". footer footer footer footer ." - ". buttonGroup buttonGroup buttonGroup buttonGroup ." - ". . . . . ."; - } - - .spectrum-Dialog-heading { - &.spectrum-Dialog-heading--noHeader { - grid-area: heading; - padding-inline-end: 0; - } - - /* match specificity from above where it had noHeader, but here header won't prevent heading from expanding */ - - &.spectrum-Dialog-heading--noTypeIcon.spectrum-Dialog-heading--noTypeIcon { - grid-area: heading-start / heading-start / typeIcon-end / typeIcon-end; - padding-inline-end: 0; - } - } - - .spectrum-Dialog-header { - &.spectrum-Dialog-header--noTypeIcon { - grid-area: header; - padding-inline-end: 0; - } - } - - .spectrum-Dialog-content { - overflow-y: visible; - height: min-content; - display: inline-table; - } - - .spectrum-Dialog-footer + .spectrum-Dialog-buttonGroup { - padding-block-start: calc(var(--spectrum-global-dimension-size-25) * 2); - } -} -@media screen and (max-height: 400px) and (max-width: 700px) { - .spectrum-Dialog--fullscreen, - .spectrum-Dialog--fullscreenTakeover { - - &.spectrum-Dialog .spectrum-Dialog-grid { - display: grid; - grid-template-columns: var(--spectrum-dialog-padding-x) 1fr var(--spectrum-dialog-padding-x); - grid-template-rows: var(--spectrum-dialog-padding-y) auto auto auto 1fr auto var(--spectrum-dialog-padding-y); - grid-template-areas: - ". . ." - ". heading ." - ". header ." - ". divider ." - ". content ." - ". buttonGroup ." - ". . ."; - } - .spectrum-Dialog-heading { - &.spectrum-Dialog-heading--noHeader, - &.spectrum-Dialog-heading--noTypeIcon { - grid-area: heading; - } - - /* there will never be a typeIcon here */ - &.spectrum-Dialog-heading--noHeader.spectrum-Dialog-heading--noTypeIcon { - grid-area: heading; - } - } - .spectrum-Dialog-header { - &.spectrum-Dialog-header--noTypeIcon { - grid-area: header; - } - } - - .spectrum-Dialog-buttonGroup { - padding-block-start: var(--spectrum-global-dimension-static-size-500); - } - - .spectrum-Dialog-heading { - font-size: var(--spectrum-dialog-title-text-size); - } - } -} diff --git a/packages/fds-theme/components/dialog/skin.css b/packages/fds-theme/components/dialog/skin.css deleted file mode 100644 index f38f3b8..0000000 --- a/packages/fds-theme/components/dialog/skin.css +++ /dev/null @@ -1,38 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -:root { - --spectrum-dialog-warning-icon-color: var(--spectrum-semantic-notice-color-icon); -} - -.spectrum-Dialog-heading { - color: var(--spectrum-dialog-title-text-color); -} - -.spectrum-Dialog-content { - color: var(--spectrum-dialog-content-text-color); -} - -.spectrum-Dialog-typeIcon { - color: var(--spectrum-dialog-icon-color); -} - -.spectrum-Dialog--error { - .spectrum-Dialog-typeIcon { - color: var(--spectrum-dialog-error-icon-color); - } -} - -.spectrum-Dialog--warning { - .spectrum-Dialog-typeIcon { - color: var(--spectrum-dialog-warning-icon-color); - } -} diff --git a/packages/fds-theme/components/dialog/vars.css b/packages/fds-theme/components/dialog/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/dialog/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/dnd/index.css b/packages/fds-theme/components/dnd/index.css deleted file mode 100644 index 3557a22..0000000 --- a/packages/fds-theme/components/dnd/index.css +++ /dev/null @@ -1,33 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -.spectrum-Dropzone { - text-align: center; - border-width: var(--spectrum-dropzone-border-width); - border-radius: var(--spectrum-dropzone-border-radius); - padding: var(--spectrum-dropzone-padding); - border-style: dashed; - - &:focus { - outline: 0; - border-style: dashed; - &.focus-ring { - border-style: solid; - } - } - - &.is-dragged { - border-style: solid; - } -} diff --git a/packages/fds-theme/components/dnd/skin.css b/packages/fds-theme/components/dnd/skin.css deleted file mode 100644 index 9711e38..0000000 --- a/packages/fds-theme/components/dnd/skin.css +++ /dev/null @@ -1,58 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Dropzone { - --spectrum-dropzone-illustratedmessage-illustration-color-selected: var(--spectrum-global-color-blue-400); - --spectrum-dropzone-illustratedmessage-illustration-color-key-focus: var(--spectrum-global-color-blue-500); -} - -.spectrum-Dropzone { - border-color: var(--spectrum-dropzone-border-color); - - &.is-dragged { - border-color: var(--spectrum-dropzone-border-color-selected-hover); - background-color: var(--spectrum-dropzone-background-color-selected-hover); - - .spectrum-IllustratedMessage-illustration { - color: var(--spectrum-dropzone-illustratedmessage-illustration-color-selected); - } - } - - &:focus:not(.is-dragged) { - border-color: var(--spectrum-dropzone-border-color); - .spectrum-IllustratedMessage-illustration { - color: var(--spectrum-dropzone-illustratedmessage-illustration-color-key-focus); - } - &.focus-ring { - border-color: var(--spectrum-dropzone-border-color-selected-hover); - } - &.is-dragged.focus-ring { - .spectrum-IllustratedMessage-illustration { - color: var(--spectrum-dropzone-illustratedmessage-illustration-color-selected); - } - } - } -} - -@media (forced-colors: active) { - .spectrum-Dropzone { - --spectrum-dropzone-border-color: CanvasText; - --spectrum-dropzone-illustratedmessage-illustration-color-selected: Highlight; - --spectrum-dropzone-border-color-selected-hover: Highlight; - --spectrum-dropzone-background-color-selected-hover: Canvas; - - &.is-dragged { - forced-color-adjust: none; - } - } -} - \ No newline at end of file diff --git a/packages/fds-theme/components/dnd/vars.css b/packages/fds-theme/components/dnd/vars.css deleted file mode 100644 index 0f7b30b..0000000 --- a/packages/fds-theme/components/dnd/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2023 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/dropdown/index.css b/packages/fds-theme/components/dropdown/index.css deleted file mode 100644 index 2aa859d..0000000 --- a/packages/fds-theme/components/dropdown/index.css +++ /dev/null @@ -1,178 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -:root { - --spectrum-dropdown-popover-max-width: var(--spectrum-global-dimension-size-3000); - --spectrum-dropdown-width: var(--spectrum-global-dimension-size-2400); -} - -.spectrum-Dropdown { - position: relative; - display: inline-block; - user-select: none; - - /* Truncate if menu options make us too wide */ - max-inline-size: 100%; - inline-size: var(--spectrum-dropdown-width); - min-inline-size: var(--spectrum-dropdown-min-width); - - /* Hack to enable select-powered Dropdowns */ - select { - appearance: none; - -ms-appearance: none; /* Edge */ - - &::-ms-expand { - display: none; - } - - &::-ms-value { - background-color: transparent; - } - - & + .spectrum-Dropdown-chevron { - position: absolute; - inset-inline-end: var(--spectrum-dropdown-padding-x); - inset-block-start: 50%; - margin-block-start: calc(var(--spectrum-icon-chevron-down-medium-height) / -2); - } - } -} - -.spectrum-Dropdown-trigger { - position: relative; - inline-size: 100%; - display: flex; - justify-content: space-between; - align-items: center; - - /* Ensure that changing the selected item doesn't affect the size of the dropdown and its parents */ - contain: size; -} - -.spectrum-Dropdown-label { - /* Be the biggest, but also shrink! */ - flex: 1 1 auto; - - white-space: nowrap; - overflow: hidden; - - block-size: calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2)); - line-height: calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2)); - - font-size: var(--spectrum-dropdown-text-size); - - text-overflow: ellipsis; - text-align: start; - - &.is-placeholder { - font-weight: var(--spectrum-dropdown-placeholder-text-font-weight); - font-style: var(--spectrum-dropdown-placeholder-text-font-style); - transition: color var(--spectrum-global-animation-duration-100) ease-in-out; - } -} - -/* Only apply margin to the icon if there's a label */ -.spectrum-Dropdown-label + .spectrum-Dropdown-chevron { - margin-inline-start: var(--spectrum-dropdown-icon-margin-left); -} - -.spectrum-Icon + .spectrum-Dropdown-label { - margin-inline-start: var(--spectrum-selectlist-thumbnail-image-padding-x); -} - -.spectrum-Dropdown-avatar + .spectrum-Dropdown-label { - margin-inline-start: var(--spectrum-selectlist-thumbnail-image-padding-x); -} - -/* Only apply margin if there's a label */ -.spectrum-Dropdown-label ~ .spectrum-Dropdown-chevron { - margin-inline-start: var(--spectrum-dropdown-icon-margin-left); -} - -.spectrum-Dropdown-chevron { - display: inline-block; - position: relative; - vertical-align: top; - transition: color var(--spectrum-global-animation-duration-100) ease-out; - flex-shrink: 0; - - /* Fix Safari 10 bug where align-items is ignored inside of buttons */ - margin-top: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-icon-chevron-down-medium-height)) / 2); - margin-bottom: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-icon-chevron-down-medium-height)) / 2); - - opacity: 1; -} - -/* Error icons */ -.spectrum-Dropdown-trigger { - .spectrum-Dropdown-invalidIcon { - /* Fix Safari 10 bug where align-items is ignored inside of buttons */ - margin-block-start: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-dropdown-icon-size)) / 2); - margin-block-end: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-dropdown-icon-size)) / 2); - } - - .spectrum-Dropdown-label + .spectrum-Dropdown-invalidIcon { - margin-inline-start: var(--spectrum-dropdown-icon-margin-left); - } -} - -.spectrum-Dropdown-trigger { - .spectrum-Dropdown-progressCircle { - margin-inline-start: var(--spectrum-dropdown-icon-margin-left); - } -} - -.spectrum-Icon + .spectrum-Dropdown-chevron { - margin-inline-start: var(--spectrum-dropdown-icon-gap); -} - -.spectrum-Dropdown--quiet { - inline-size: auto; - min-inline-size: var(--spectrum-dropdown-quiet-min-width); - - .spectrum-Dropdown-trigger { - contain: none; - } -} - -.spectrum-Dropdown-popover--quiet { - inline-size: var(--spectrum-dropdown-width); - - /* Define this var so it can be read from JS */ - --spectrum-dropdown-quiet-offset: calc(var(--spectrum-dropdown-quiet-popover-offset-x) + var(--spectrum-popover-border-size)); - margin-inline-start: calc(var(--spectrum-dropdown-quiet-offset) * -1); -} - -/* When used with a label or inside a Form, we need to override some things from .spectrum-Field - * so quiet dropdowns still collapse properly. */ -.spectrum-Field.spectrum-Dropdown-fieldWrapper--quiet { - display: inline-flex; - flex-direction: column; - inline-size: max-content; - max-width: 100%; - - .spectrum-Dropdown--quiet { - inline-size: auto; - min-inline-size: var(--spectrum-dropdown-quiet-min-width); - - .spectrum-Dropdown-trigger { - inline-size: max-content; - max-width: 100%; - } - } - - &.spectrum-Dropdown-fieldWrapper--positionSide { - flex-direction: row; - } -} diff --git a/packages/fds-theme/components/dropdown/skin.css b/packages/fds-theme/components/dropdown/skin.css deleted file mode 100644 index b8946bc..0000000 --- a/packages/fds-theme/components/dropdown/skin.css +++ /dev/null @@ -1,98 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Dropdown { - /* Override to gray-800 to meet WCAG */ - --spectrum-dropdown-placeholder-text-color: var(--spectrum-global-color-gray-800); - - - .spectrum-Dropdown-trigger { - &.is-selected { - .is-placeholder { - color: var(--spectrum-dropdown-placeholder-text-color-down); - } - } - } - - &.is-invalid { - /* override all states (e.g. active) */ - .spectrum-Dropdown-invalidIcon.spectrum-Dropdown-invalidIcon { - fill: var(--spectrum-dropdown-validation-icon-color-error); - } - - &.is-disabled { - .spectrum-Icon, - .spectrum-Dropdown-invalidIcon { - fill: var(--spectrum-dropdown-icon-color-disabled); - } - } - } - - &.is-disabled { - &:active .spectrum-Dropdown-label { - color: var(--spectrum-dropdown-text-color-disabled); - } - .spectrum-Dropdown-label { - &.is-placeholder { - color: var(--spectrum-dropdown-placeholder-text-color-disabled); - } - } - } -} - -.spectrum-Dropdown-label { - &.is-placeholder { - color: var(--spectrum-dropdown-placeholder-text-color); - } -} - -.spectrum-Dropdown-trigger { - &:hover .spectrum-Dropdown-label { - color: var(--spectrum-dropdown-placeholder-text-color-hover); - } - - &:active .spectrum-Dropdown-label { - color: var(--spectrum-dropdown-placeholder-text-color-mouse-focus); - } -} - -.spectrum-Dropdown-trigger.focus-ring { - .spectrum-Dropdown-label.is-placeholder { - color: var(--spectrum-dropdown-placeholder-text-color-key-focus); - } -} - -@media (forced-colors: active) { - .spectrum-Dropdown { - --spectrum-dropdown-icon-color: ButtonText; - --spectrum-dropdown-icon-color-disabled: GrayText; - --spectrum-dropdown-icon-color-hover: ButtonText; - --spectrum-dropdown-icon-color-key-focus: ButtonText; - --spectrum-dropdown-placeholder-text-color: GrayText; - --spectrum-dropdown-placeholder-text-color-disabled: GrayText; - --spectrum-dropdown-placeholder-text-color-down: GrayText; - --spectrum-dropdown-placeholder-text-color-hover: GrayText; - --spectrum-dropdown-placeholder-text-color-key-focus: GrayText; - --spectrum-dropdown-placeholder-text-color-mouse-focus: GrayText; - --spectrum-dropdown-text-color-disabled: GrayText; - --spectrum-dropdown-validation-icon-color-error: ButtonText; - } - /*Override the label behaviour when NOT a placeholder*/ - .spectrum-Dropdown-trigger { - &:hover .spectrum-Dropdown-label { - color: ButtonText; - &.is-placeholder { - color: GrayText; - } - } - } -} diff --git a/packages/fds-theme/components/dropdown/vars.css b/packages/fds-theme/components/dropdown/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/dropdown/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/dropindicator/index.css b/packages/fds-theme/components/dropindicator/index.css deleted file mode 100644 index a109f0a..0000000 --- a/packages/fds-theme/components/dropindicator/index.css +++ /dev/null @@ -1,62 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-DropIndicator { - position: relative; - - &:before, - &:after { - content: ''; - position: absolute; - width: var(--spectrum-dropindicator-circle-size); - height: var(--spectrum-dropindicator-circle-size); - border-radius: 50%; - border: var(--spectrum-dropindicator-border-size) solid; - box-sizing: border-box; - } -} - -.spectrum-DropIndicator--horizontal { - height: var(--spectrum-dropindicator-border-size); - margin: 0 var(--spectrum-dropindicator-circle-size); - - &:before, - &:after { - top: calc(var(--spectrum-dropindicator-circle-size) * -1 / 2 + var(--spectrum-dropindicator-border-size) / 2); - } - - &:before { - left: calc(var(--spectrum-dropindicator-circle-size) * -1); - } - - &:after { - right: calc(var(--spectrum-dropindicator-circle-size) * -1); - } -} - -.spectrum-DropIndicator--vertical { - width: var(--spectrum-dropindicator-border-size); - margin: var(--spectrum-dropindicator-circle-size) 0; - - &:before, - &:after { - left: calc(var(--spectrum-dropindicator-circle-size) * -1 / 2 + var(--spectrum-dropindicator-border-size) / 2); - } - - &:before { - top: calc(var(--spectrum-dropindicator-circle-size) * -1); - } - - &:after { - bottom: calc(var(--spectrum-dropindicator-circle-size) * -1); - } -} diff --git a/packages/fds-theme/components/dropindicator/skin.css b/packages/fds-theme/components/dropindicator/skin.css deleted file mode 100644 index 870008e..0000000 --- a/packages/fds-theme/components/dropindicator/skin.css +++ /dev/null @@ -1,28 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-DropIndicator { - background: var(--spectrum-dropindicator-border-color); - - &:before, - &:after { - border-color: var(--spectrum-dropindicator-circle-border-color); - } -} - -@media (forced-colors: active) { - .spectrum-DropIndicator { - --spectrum-dropindicator-border-color: Highlight; - --spectrum-dropindicator-circle-border-color: Highlight; - forced-color-adjust: none; - } -} diff --git a/packages/fds-theme/components/dropindicator/vars.css b/packages/fds-theme/components/dropindicator/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/dropindicator/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/dropzone/index.css b/packages/fds-theme/components/dropzone/index.css deleted file mode 100644 index 8f820e2..0000000 --- a/packages/fds-theme/components/dropzone/index.css +++ /dev/null @@ -1,88 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -:root { - --spectrum-dropzone-padding-x: var(--spectrum-global-dimension-size-150); - --spectrum-dropzone-padding-y: var(--spectrum-global-dimension-size-115); - --spectrum-dropzone-banner-text-color: var(--spectrum-gray-50); - --spectrum-dropzone-banner-background-color: var(--spectrum-global-color-blue-500); - --spectrum-dropzone-banner-border-color: var(--spectrum-dropzone-banner-background-color); -} - -.spectrum-Dropzone { - position: relative; - text-align: center; - border-width: var(--spectrum-dropzone-border-width); - border-radius: var(--spectrum-dropzone-border-radius); - padding: var(--spectrum-dropzone-padding); - border-style: dashed; - - .spectrum-Dropzone-backdrop { - display: none; - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - } - - &:focus { - outline: 0; - border-style: dashed; - &.focus-ring { - border-style: solid; - } - } - - &[data-drop-target].spectrum-Dropzone--filled { - .spectrum-Dropzone-banner { - display: block; - } - } - - &[data-drop-target] { - .spectrum-Dropzone-backdrop { - display: block; - } - } -} - -.spectrum-Dropzone-banner { - display: none; - position: absolute; - color: var(--spectrum-dropzone-banner-text-color); - background-color: var(--spectrum-dropzone-banner-background-color); - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - padding: var(--spectrum-dropzone-padding-y) var(--spectrum-dropzone-padding-x); - border-radius: var(--spectrum-dropzone-border-radius); - border: 1px solid var(--spectrum-dropzone-banner-border-color); -} - -@media (forced-colors: active) { - .spectrum-Dropzone { - &[data-drop-target] { - .spectrum-Dropzone-backdrop { - display: none; - } - } - &[data-drop-target].spectrum-Dropzone--filled { - .spectrum-Dropzone-backdrop { - display: block; - } - } - } -} diff --git a/packages/fds-theme/components/dropzone/skin.css b/packages/fds-theme/components/dropzone/skin.css deleted file mode 100644 index 85a840e..0000000 --- a/packages/fds-theme/components/dropzone/skin.css +++ /dev/null @@ -1,55 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Dropzone { - --spectrum-dropzone-illustratedmessage-illustration-color-key-focus: var(--spectrum-global-color-blue-500); -} - -.spectrum-Dropzone { - border-color: var(--spectrum-dropzone-border-color); - - &[data-focus-visible]{ - border-color: var(--spectrum-dropzone-border-color-selected-hover); - } - - &[data-drop-target] { - border-style: solid; - border-color: var(--spectrum-dropzone-border-color-selected-hover); - background-color: var(--spectrum-dropzone-background-color-selected-hover); - - .spectrum-Dropzone-illustratedMessage { - svg { - color: var(--spectrum-dropzone-illustratedmessage-illustration-color-key-focus); - } - } - - &.focus-ring { - border-color: var(--spectrum-dropzone-border-color-selected-hover); - } - } - - &[data-drop-target] { - .spectrum-Dropzone-backdrop { - background-color: var(--spectrum-dropzone-background-color-selected-hover); - } - } -} - -@media (forced-colors: active) { - .spectrum-Dropzone { - --spectrum-dropzone-border-color: CanvasText; - --spectrum-dropzone-border-color-selected-hover: Highlight; - --spectrum-dropzone-background-color-selected-hover: Canvas; - --spectrum-dropzone-banner-border-color: CanvasText; - --spectrum-dropzone-illustratedmessage-illustration-color-key-focus: Highlight; - } -} diff --git a/packages/fds-theme/components/dropzone/vars.css b/packages/fds-theme/components/dropzone/vars.css deleted file mode 100644 index ca1e085..0000000 --- a/packages/fds-theme/components/dropzone/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; -@import './skin.css'; diff --git a/packages/fds-theme/components/fieldgroup/index.css b/packages/fds-theme/components/fieldgroup/index.css deleted file mode 100644 index 297eff8..0000000 --- a/packages/fds-theme/components/fieldgroup/index.css +++ /dev/null @@ -1,30 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -/* override .spectrum-Field */ -.spectrum-FieldGroup.spectrum-FieldGroup { - width: auto; - --spectrum-field-default-width: auto; -} - -.spectrum-FieldGroup-group { - display: flex; - flex-direction: column; -} - -.spectrum-FieldGroup-group--horizontal { - /* horizontal radio groups should wrap if there isn't enough space */ - flex-direction: row; - flex-wrap: wrap; -} diff --git a/packages/fds-theme/components/fieldgroup/vars.css b/packages/fds-theme/components/fieldgroup/vars.css deleted file mode 100644 index 3df0b02..0000000 --- a/packages/fds-theme/components/fieldgroup/vars.css +++ /dev/null @@ -1,13 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@import './index.css'; diff --git a/packages/fds-theme/components/fieldlabel/index.css b/packages/fds-theme/components/fieldlabel/index.css deleted file mode 100644 index b22da0c..0000000 --- a/packages/fds-theme/components/fieldlabel/index.css +++ /dev/null @@ -1,248 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import '../commons/index.css'; - -:root { - --spectrum-tableform-border-spacing: 0 var(--spectrum-global-dimension-size-300); - --spectrum-tableform-margin: calc(var(--spectrum-global-dimension-size-250) * -1) 0; - --spectrum-fieldlabel-margin: var(--spectrum-global-dimension-size-100); -} - -.spectrum-FieldLabel { - display: flex; - flex: 0 0 auto; - - box-sizing: border-box; - - padding: var(--spectrum-fieldlabel-padding-top) 0 var(--spectrum-fieldlabel-padding-bottom); - - font-size: var(--spectrum-fieldlabel-text-size); - font-weight: var(--spectrum-fieldlabel-text-font-weight); - line-height: var(--spectrum-fieldlabel-text-line-height); - - vertical-align: top; - - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; - font-smoothing: subpixel-antialiased; - text-align: start; - - cursor: default; /* match native labels even if not using a