diff --git a/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx b/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx index cf600fb0c7e..63be10fd354 100644 --- a/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx @@ -17,7 +17,7 @@ import type {Meta} from '@storybook/react'; import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg'; import {shortName} from './utils'; import {StaticColorProvider} from '../stories/utils'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: ActionButton, diff --git a/packages/@react-spectrum/s2/chromatic/Avatar.stories.tsx b/packages/@react-spectrum/s2/chromatic/Avatar.stories.tsx index 96a3d5dc263..d16b1c316b5 100644 --- a/packages/@react-spectrum/s2/chromatic/Avatar.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/Avatar.stories.tsx @@ -12,7 +12,7 @@ import {Avatar} from '../src'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: Avatar, diff --git a/packages/@react-spectrum/s2/chromatic/Badge.stories.tsx b/packages/@react-spectrum/s2/chromatic/Badge.stories.tsx index 06d9b0b2d39..4709b4105f5 100644 --- a/packages/@react-spectrum/s2/chromatic/Badge.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/Badge.stories.tsx @@ -15,7 +15,7 @@ import {Example} from '../stories/Badge.stories'; import {generatePowerset} from '@react-spectrum/story-utils'; import type {Meta} from '@storybook/react'; import {shortName} from './utils'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: Badge, diff --git a/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx b/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx index adef57a8476..85e3807b6cf 100644 --- a/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx @@ -15,7 +15,7 @@ import {generatePowerset} from '@react-spectrum/story-utils'; import {Many} from '../stories/Breadcrumbs.stories'; import type {Meta, StoryObj} from '@storybook/react'; import {shortName} from './utils'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; import {userEvent, within} from '@storybook/testing-library'; const meta: Meta = { diff --git a/packages/@react-spectrum/s2/chromatic/Button.stories.tsx b/packages/@react-spectrum/s2/chromatic/Button.stories.tsx index ea095cb497f..ae610256545 100644 --- a/packages/@react-spectrum/s2/chromatic/Button.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/Button.stories.tsx @@ -16,7 +16,7 @@ import type {Meta} from '@storybook/react'; import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg'; import {shortName} from './utils'; import {StaticColorProvider} from '../stories/utils'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; import {Example as WithWrapping} from '../stories/Button.stories'; const meta: Meta = { diff --git a/packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx index 8c37d1d8f69..94b33724833 100644 --- a/packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx @@ -15,7 +15,7 @@ import {generatePowerset} from '@react-spectrum/story-utils'; import type {Meta} from '@storybook/react'; import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg'; import {shortName} from './utils'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: ButtonGroup, diff --git a/packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx b/packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx index 7c6c8697971..01438e954fc 100644 --- a/packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx @@ -14,7 +14,7 @@ import {Checkbox} from '../src'; import {generateComboChunks, shortName} from './utils'; import {LongLabel} from '../stories/Checkbox.stories'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: Checkbox, diff --git a/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx index 0948d4590a0..5bd900e1753 100644 --- a/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx @@ -13,7 +13,7 @@ import {Checkbox, CheckboxGroup, Content, ContextualHelp, Heading} from '../src'; import {generateComboChunks, shortName} from './utils'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: CheckboxGroup, diff --git a/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx b/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx index 0484bf2e048..9be6faf50de 100644 --- a/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx @@ -13,7 +13,7 @@ import {ColorField} from '../src'; import {generateComboChunks, shortName} from './utils'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: ColorField, diff --git a/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx b/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx index ab3b5484301..373634aab3c 100644 --- a/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx @@ -14,7 +14,7 @@ import {ColorSlider, Content, ContextualHelp, Heading} from '../src'; import {generatePowerset} from '@react-spectrum/story-utils'; import type {Meta} from '@storybook/react'; import {shortName} from './utils'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: ColorSlider, diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index 9f3c841721e..a6bf1901912 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -52,19 +52,19 @@ "isLibrary": true }, "style-module": { - "source": "style/spectrum-theme.ts", + "source": "style/index.ts", "isLibrary": true, "outputFormat": "esmodule", "context": "node" }, "style-main": { - "source": "style/spectrum-theme.ts", + "source": "style/index.ts", "isLibrary": true, "outputFormat": "commonjs", "context": "node" }, "style-types": { - "source": "style/spectrum-theme.ts" + "source": "style/index.ts" }, "icons-module": { "source": "s2wf-icons/*.svg", diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx index d561dca468f..ffb3678b01b 100644 --- a/packages/@react-spectrum/s2/src/ActionButton.tsx +++ b/packages/@react-spectrum/s2/src/ActionButton.tsx @@ -10,12 +10,12 @@ * governing permissions and limitations under the License. */ -import {baseColor, fontRelative, style} from '../style/spectrum-theme' with { type: 'macro' }; +import {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' }; import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, Text} from 'react-aria-components'; import {centerBaseline} from './CenterBaseline'; import {createContext, forwardRef, ReactNode, useContext} from 'react'; import {FocusableRef, FocusableRefValue} from '@react-types/shared'; -import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with { type: 'macro' }; +import {getAllowedOverrides, StyleProps} from './style-utils' with { type: 'macro' }; import {IconContext} from './Icon'; import {pressScale} from './pressScale'; import {SkeletonContext} from './Skeleton'; diff --git a/packages/@react-spectrum/s2/src/AlertDialog.tsx b/packages/@react-spectrum/s2/src/AlertDialog.tsx index a9f261e3d4e..3fb9d100c2d 100644 --- a/packages/@react-spectrum/s2/src/AlertDialog.tsx +++ b/packages/@react-spectrum/s2/src/AlertDialog.tsx @@ -24,7 +24,7 @@ import {IconContext} from './Icon'; import intlMessages from '../intl/*.json'; import NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg'; import {Provider} from 'react-aria-components'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {UnsafeStyles} from './style-utils' with {type: 'macro'}; import {useLocalizedStringFormatter} from '@react-aria/i18n'; diff --git a/packages/@react-spectrum/s2/src/Avatar.tsx b/packages/@react-spectrum/s2/src/Avatar.tsx index 7b8790ef928..40ff0f236c9 100644 --- a/packages/@react-spectrum/s2/src/Avatar.tsx +++ b/packages/@react-spectrum/s2/src/Avatar.tsx @@ -16,7 +16,7 @@ import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {Image} from './Image'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/AvatarGroup.tsx b/packages/@react-spectrum/s2/src/AvatarGroup.tsx index f2e9d37d5aa..1a7a83d70b9 100644 --- a/packages/@react-spectrum/s2/src/AvatarGroup.tsx +++ b/packages/@react-spectrum/s2/src/AvatarGroup.tsx @@ -16,7 +16,7 @@ import {ContextValue, SlotProps} from 'react-aria-components'; import {createContext, CSSProperties, forwardRef, ReactNode} from 'react'; import {filterDOMProps} from '@react-aria/utils'; import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'}; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useLabel} from 'react-aria'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Badge.tsx b/packages/@react-spectrum/s2/src/Badge.tsx index 6ba6216dcf0..2a8bd226415 100644 --- a/packages/@react-spectrum/s2/src/Badge.tsx +++ b/packages/@react-spectrum/s2/src/Badge.tsx @@ -15,7 +15,7 @@ import {centerBaseline} from './CenterBaseline'; import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {ContextValue, Provider, SlotProps} from 'react-aria-components'; import {filterDOMProps} from '@react-aria/utils'; -import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {fontRelative, style} from '../style' with {type: 'macro'}; import {IconContext} from './Icon'; import React, {createContext, forwardRef, ReactNode} from 'react'; import {SkeletonWrapper} from './Skeleton'; diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx index 21b41a3ac6b..47612a3527c 100644 --- a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx +++ b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx @@ -27,13 +27,13 @@ import {AriaBreadcrumbItemProps, useLocale} from 'react-aria'; import ChevronIcon from '../ui-icons/Chevron'; import {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared'; import {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; -import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; +import {focusRing, size, style} from '../style' with { type: 'macro' }; import FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg'; import {forwardRefType} from './types'; +import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; // @ts-ignore import intlMessages from '../intl/*.json'; import {Menu, MenuItem, MenuTrigger} from './Menu'; -import {size, style} from '../style/spectrum-theme' with { type: 'macro' }; import {Text} from './Content'; import {useDOMRef, useResizeObserver} from '@react-spectrum/utils'; import {useLayoutEffect} from '@react-aria/utils'; diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx index 3787e73bbc9..ade2e8ac5d4 100644 --- a/packages/@react-spectrum/s2/src/Button.tsx +++ b/packages/@react-spectrum/s2/src/Button.tsx @@ -10,10 +10,10 @@ * governing permissions and limitations under the License. */ -import {baseColor, fontRelative, size as sizeValue, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {baseColor, focusRing, fontRelative, size as sizeValue, style} from '../style' with {type: 'macro'}; import {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components'; import {centerBaseline} from './CenterBaseline'; -import {centerPadding, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; +import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react'; import {FocusableRef, FocusableRefValue} from '@react-types/shared'; import {IconContext} from './Icon'; diff --git a/packages/@react-spectrum/s2/src/ButtonGroup.tsx b/packages/@react-spectrum/s2/src/ButtonGroup.tsx index e30416a27fe..d8873c2733d 100644 --- a/packages/@react-spectrum/s2/src/ButtonGroup.tsx +++ b/packages/@react-spectrum/s2/src/ButtonGroup.tsx @@ -15,7 +15,7 @@ import {ContextValue, Provider, SlotProps} from 'react-aria-components'; import {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react'; import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared'; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import { useDOMRef, useResizeObserver diff --git a/packages/@react-spectrum/s2/src/Card.tsx b/packages/@react-spectrum/s2/src/Card.tsx index a898a2e6298..151555f8079 100644 --- a/packages/@react-spectrum/s2/src/Card.tsx +++ b/packages/@react-spectrum/s2/src/Card.tsx @@ -21,11 +21,11 @@ import {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'r import {DividerContext} from './Divider'; import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import {focusRing, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'}; +import {focusRing, lightDark, size, style} from '../style' with {type: 'macro'}; +import {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {IllustrationContext} from './Icon'; import {ImageContext} from './Image'; import {ImageCoordinator} from './ImageCoordinator'; -import {lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'}; import {mergeStyles} from '../style/runtime'; import {pressScale} from './pressScale'; import {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton'; diff --git a/packages/@react-spectrum/s2/src/CardView.tsx b/packages/@react-spectrum/s2/src/CardView.tsx index 41f35ad237e..a93e62ef2d7 100644 --- a/packages/@react-spectrum/s2/src/CardView.tsx +++ b/packages/@react-spectrum/s2/src/CardView.tsx @@ -19,11 +19,11 @@ import { } from 'react-aria-components'; import {CardContext, CardViewContext} from './Card'; import {DOMRef, forwardRefType, Key, LayoutDelegate, LoadingState, Node} from '@react-types/shared'; -import {focusRing, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; +import {focusRing, style} from '../style' with {type: 'macro'}; import {forwardRef, useMemo, useState} from 'react'; +import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {ImageCoordinator} from './ImageCoordinator'; import {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils'; diff --git a/packages/@react-spectrum/s2/src/CenterBaseline.tsx b/packages/@react-spectrum/s2/src/CenterBaseline.tsx index 7a5e78e1a8a..9c7504605ca 100644 --- a/packages/@react-spectrum/s2/src/CenterBaseline.tsx +++ b/packages/@react-spectrum/s2/src/CenterBaseline.tsx @@ -13,7 +13,7 @@ import {CSSProperties, ReactNode} from 'react'; import {mergeStyles} from '../style/runtime'; import {raw} from '../style/style-macro' with {type: 'macro'}; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {StyleString} from '../style/types'; interface CenterBaselineProps { diff --git a/packages/@react-spectrum/s2/src/Checkbox.tsx b/packages/@react-spectrum/s2/src/Checkbox.tsx index 20e24ca6446..ef7de02c7dd 100644 --- a/packages/@react-spectrum/s2/src/Checkbox.tsx +++ b/packages/@react-spectrum/s2/src/Checkbox.tsx @@ -11,14 +11,14 @@ */ import {Checkbox as AriaCheckbox, CheckboxProps as AriaCheckboxProps, CheckboxGroupStateContext, CheckboxRenderProps, ContextValue, useSlottedContext} from 'react-aria-components'; -import {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {baseColor, focusRing, style} from '../style' with {type: 'macro'}; import {CenterBaseline} from './CenterBaseline'; import CheckmarkIcon from '../ui-icons/Checkmark'; import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react'; import DashIcon from '../ui-icons/Dash'; import {FocusableRef, FocusableRefValue} from '@react-types/shared'; -import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {FormContext, useFormProps} from './Form'; +import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {pressScale} from './pressScale'; import {useFocusableRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx index 982d320ddfe..03a1b887dde 100644 --- a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx +++ b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx @@ -21,7 +21,7 @@ import {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {FieldLabel, HelpText} from './Field'; import {FormContext, useFormProps} from './Form'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ClearButton.tsx b/packages/@react-spectrum/s2/src/ClearButton.tsx index cbde28f0cc5..d2f6ed5bf23 100644 --- a/packages/@react-spectrum/s2/src/ClearButton.tsx +++ b/packages/@react-spectrum/s2/src/ClearButton.tsx @@ -18,7 +18,7 @@ import { import CrossIcon from '../ui-icons/Cross'; import {FocusableRef} from '@react-types/shared'; import {forwardRef} from 'react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useFocusableRef} from '@react-spectrum/utils'; interface ClearButtonStyleProps { diff --git a/packages/@react-spectrum/s2/src/CloseButton.tsx b/packages/@react-spectrum/s2/src/CloseButton.tsx index 12bd5aec70e..22031663fb7 100644 --- a/packages/@react-spectrum/s2/src/CloseButton.tsx +++ b/packages/@react-spectrum/s2/src/CloseButton.tsx @@ -10,12 +10,12 @@ * governing permissions and limitations under the License. */ -import {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {baseColor, focusRing, style} from '../style' with {type: 'macro'}; import {Button, ButtonProps} from 'react-aria-components'; import CrossIcon from '../ui-icons/Cross'; import {FocusableRef} from '@react-types/shared'; -import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {forwardRef} from 'react'; +import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {pressScale} from './pressScale'; import {useFocusableRef} from '@react-spectrum/utils'; diff --git a/packages/@react-spectrum/s2/src/ColorArea.tsx b/packages/@react-spectrum/s2/src/ColorArea.tsx index ee61a5b87ee..0939b3813f5 100644 --- a/packages/@react-spectrum/s2/src/ColorArea.tsx +++ b/packages/@react-spectrum/s2/src/ColorArea.tsx @@ -19,7 +19,7 @@ import {ColorHandle} from './ColorHandle'; import {createContext, forwardRef} from 'react'; import {DOMRef, DOMRefValue} from '@react-types/shared'; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx index 9c636799690..b93af3390cc 100644 --- a/packages/@react-spectrum/s2/src/ColorField.tsx +++ b/packages/@react-spectrum/s2/src/ColorField.tsx @@ -21,7 +21,7 @@ import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field'; import {FormContext, useFormProps} from './Form'; import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {TextFieldRef} from '@react-types/textfield'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ColorHandle.tsx b/packages/@react-spectrum/s2/src/ColorHandle.tsx index 51daf55dce5..bf33f51fb54 100644 --- a/packages/@react-spectrum/s2/src/ColorHandle.tsx +++ b/packages/@react-spectrum/s2/src/ColorHandle.tsx @@ -14,7 +14,7 @@ import {cloneElement, JSX, RefObject, useState} from 'react'; import {ColorThumb} from 'react-aria-components'; import {createPortal} from 'react-dom'; import {keyframes} from '../style/style-macro' with {type: 'macro'}; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useId, useLayoutEffect} from '@react-aria/utils'; const HANDLE_SIZE = 16; diff --git a/packages/@react-spectrum/s2/src/ColorSlider.tsx b/packages/@react-spectrum/s2/src/ColorSlider.tsx index 8003a189088..88a57393fac 100644 --- a/packages/@react-spectrum/s2/src/ColorSlider.tsx +++ b/packages/@react-spectrum/s2/src/ColorSlider.tsx @@ -23,7 +23,7 @@ import {createContext, forwardRef, useRef} from 'react'; import {DOMRef, DOMRefValue, SpectrumLabelableProps} from '@react-types/shared'; import {FieldLabel} from './Field'; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ColorSwatch.tsx b/packages/@react-spectrum/s2/src/ColorSwatch.tsx index 09283f77057..54fe5c5ca12 100644 --- a/packages/@react-spectrum/s2/src/ColorSwatch.tsx +++ b/packages/@react-spectrum/s2/src/ColorSwatch.tsx @@ -20,7 +20,7 @@ import {Color} from '@react-types/color'; import {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react'; import {DOMRef, DOMRefValue} from '@react-types/shared'; import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx index 2af49b7a4e0..5d2fe73ede8 100644 --- a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx +++ b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx @@ -15,8 +15,8 @@ import {Color} from '@react-types/color'; import {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch'; import {createContext, forwardRef, ReactElement, ReactNode} from 'react'; import {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared'; -import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; -import {size as sizeValue, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {focusRing, size as sizeValue, style} from '../style' with {type: 'macro'}; +import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ColorWheel.tsx b/packages/@react-spectrum/s2/src/ColorWheel.tsx index 6a4c5c0bd66..80a3a2a8907 100644 --- a/packages/@react-spectrum/s2/src/ColorWheel.tsx +++ b/packages/@react-spectrum/s2/src/ColorWheel.tsx @@ -19,7 +19,7 @@ import { import {ColorHandle} from './ColorHandle'; import {createContext, forwardRef} from 'react'; import {DOMRef, DOMRefValue} from '@react-types/shared'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {StyleProps} from './style-utils'; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx index e9682716bbf..dd924102e66 100644 --- a/packages/@react-spectrum/s2/src/ComboBox.tsx +++ b/packages/@react-spectrum/s2/src/ComboBox.tsx @@ -25,7 +25,7 @@ import { Provider, SectionProps } from 'react-aria-components'; -import {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {baseColor, style} from '../style' with {type: 'macro'}; import {centerBaseline} from './CenterBaseline'; import { checkmark, diff --git a/packages/@react-spectrum/s2/src/ContextualHelp.tsx b/packages/@react-spectrum/s2/src/ContextualHelp.tsx index e16eac5927e..7a36a4a6cad 100644 --- a/packages/@react-spectrum/s2/src/ContextualHelp.tsx +++ b/packages/@react-spectrum/s2/src/ContextualHelp.tsx @@ -12,7 +12,7 @@ import InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg'; import intlMessages from '../intl/*.json'; import {mergeStyles} from '../style/runtime'; import {Popover, PopoverProps} from './Popover'; -import {style, size as styleSize} from '../style/spectrum-theme' with {type: 'macro'}; +import {style, size as styleSize} from '../style' with {type: 'macro'}; import {StyleProps} from './style-utils' with { type: 'macro' }; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Dialog.tsx b/packages/@react-spectrum/s2/src/Dialog.tsx index a047ae4c84a..223b03bdb20 100644 --- a/packages/@react-spectrum/s2/src/Dialog.tsx +++ b/packages/@react-spectrum/s2/src/Dialog.tsx @@ -21,7 +21,7 @@ import {ImageContext} from './Image'; import intlMessages from '../intl/*.json'; import {Modal} from './Modal'; import {Popover} from './Popover'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {StyleProps} from './style-utils'; import {useDOMRef, useMediaQuery} from '@react-spectrum/utils'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx index a52fe5941f3..a03eade0cf2 100644 --- a/packages/@react-spectrum/s2/src/Disclosure.tsx +++ b/packages/@react-spectrum/s2/src/Disclosure.tsx @@ -13,10 +13,10 @@ import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared'; import {Button, ContextValue, DisclosureStateContext, Heading, Provider, UNSTABLE_Disclosure as RACDisclosure, UNSTABLE_DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components'; import {CenterBaseline} from './CenterBaseline'; -import {centerPadding, focusRing, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' }; +import {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' }; import Chevron from '../ui-icons/Chevron'; import {filterDOMProps} from '@react-aria/utils'; -import {lightDark, size as sizeValue, style} from '../style/spectrum-theme' with { type: 'macro' }; +import {focusRing, lightDark, size as sizeValue, style} from '../style' with { type: 'macro' }; import React, {createContext, forwardRef, ReactNode, useContext} from 'react'; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Divider.tsx b/packages/@react-spectrum/s2/src/Divider.tsx index 678a5eeb1fa..9cd07ce6040 100644 --- a/packages/@react-spectrum/s2/src/Divider.tsx +++ b/packages/@react-spectrum/s2/src/Divider.tsx @@ -14,7 +14,7 @@ import {ContextValue, Separator as RACSeparator, SeparatorProps as RACSeparatorP import {createContext, forwardRef} from 'react'; import {DOMRef, DOMRefValue} from '@react-types/shared'; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/DropZone.tsx b/packages/@react-spectrum/s2/src/DropZone.tsx index 72a97fe60a3..e3e41e20994 100644 --- a/packages/@react-spectrum/s2/src/DropZone.tsx +++ b/packages/@react-spectrum/s2/src/DropZone.tsx @@ -17,7 +17,7 @@ import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-u import {IllustratedMessageContext} from './IllustratedMessage'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx index be323881133..c220d08f196 100644 --- a/packages/@react-spectrum/s2/src/Field.tsx +++ b/packages/@react-spectrum/s2/src/Field.tsx @@ -13,11 +13,11 @@ import AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg'; import {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared'; import AsteriskIcon from '../ui-icons/Asterisk'; -import {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'}; import {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline'; import {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components'; import {ContextualHelpContext} from './ContextualHelp'; -import {fieldInput, fieldLabel, focusRing, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'}; +import {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {ForwardedRef, forwardRef, ReactNode} from 'react'; import {IconContext} from './Icon'; // @ts-ignore diff --git a/packages/@react-spectrum/s2/src/Form.tsx b/packages/@react-spectrum/s2/src/Form.tsx index 1732520f5c1..27072d39150 100644 --- a/packages/@react-spectrum/s2/src/Form.tsx +++ b/packages/@react-spectrum/s2/src/Form.tsx @@ -14,7 +14,7 @@ import {createContext, forwardRef, ReactNode, useContext, useMemo} from 'react'; import {DOMRef, SpectrumLabelableProps} from '@react-types/shared'; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {Form as RACForm, FormProps as RACFormProps} from 'react-aria-components'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useIsSkeleton} from './Skeleton'; diff --git a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx index aade15126f3..eeafbd923f4 100644 --- a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx +++ b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx @@ -18,7 +18,7 @@ import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {IllustrationContext} from './Icon'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Image.tsx b/packages/@react-spectrum/s2/src/Image.tsx index 339fb4c6066..d8307f8e2b9 100644 --- a/packages/@react-spectrum/s2/src/Image.tsx +++ b/packages/@react-spectrum/s2/src/Image.tsx @@ -3,7 +3,7 @@ import {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, Re import {DefaultImageGroup, ImageGroup} from './ImageCoordinator'; import {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton'; import {mergeStyles} from '../style/runtime'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {StyleString} from '../style/types'; import {UnsafeStyles} from './style-utils'; import {useLayoutEffect} from '@react-aria/utils'; diff --git a/packages/@react-spectrum/s2/src/InlineAlert.tsx b/packages/@react-spectrum/s2/src/InlineAlert.tsx index 5d45bbdf76a..1a7a180a610 100644 --- a/packages/@react-spectrum/s2/src/InlineAlert.tsx +++ b/packages/@react-spectrum/s2/src/InlineAlert.tsx @@ -17,13 +17,13 @@ import {ContentContext, HeadingContext} from './Content'; import {ContextValue, Provider, SlotProps} from 'react-aria-components'; import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; +import {focusRing, style} from '../style' with {type: 'macro'}; +import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {IconContext} from './Icon'; import InfoCircle from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg'; // @ts-ignore import intlMessages from '../intl/*.json'; import NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useFocusRing} from 'react-aria'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; diff --git a/packages/@react-spectrum/s2/src/Link.tsx b/packages/@react-spectrum/s2/src/Link.tsx index 88855cab268..9fdf4a20728 100644 --- a/packages/@react-spectrum/s2/src/Link.tsx +++ b/packages/@react-spectrum/s2/src/Link.tsx @@ -13,9 +13,9 @@ import {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components'; import {createContext, forwardRef, ReactNode, useContext} from 'react'; import {FocusableRef, FocusableRefValue} from '@react-types/shared'; -import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; +import {focusRing, style} from '../style' with {type: 'macro'}; +import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {SkeletonContext, useSkeletonText} from './Skeleton'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; import {useFocusableRef} from '@react-spectrum/utils'; import {useLayoutEffect} from '@react-aria/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx index bafa0263622..86afe23e374 100644 --- a/packages/@react-spectrum/s2/src/Menu.tsx +++ b/packages/@react-spectrum/s2/src/Menu.tsx @@ -26,10 +26,10 @@ import { Separator, SeparatorProps } from 'react-aria-components'; -import {baseColor, edgeToText, fontRelative, size, space, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'}; import {box, iconStyles} from './Checkbox'; import {centerBaseline} from './CenterBaseline'; -import {centerPadding, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; +import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import CheckmarkIcon from '../ui-icons/Checkmark'; import ChevronRightIcon from '../ui-icons/Chevron'; import {createContext, forwardRef, JSX, ReactNode, useContext, useRef} from 'react'; diff --git a/packages/@react-spectrum/s2/src/Meter.tsx b/packages/@react-spectrum/s2/src/Meter.tsx index 9bf6ef24dd6..a7a1e911924 100644 --- a/packages/@react-spectrum/s2/src/Meter.tsx +++ b/packages/@react-spectrum/s2/src/Meter.tsx @@ -20,7 +20,7 @@ import {createContext, forwardRef, ReactNode} from 'react'; import {DOMRef, DOMRefValue} from '@react-types/shared'; import {FieldLabel} from './Field'; import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; -import {size, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {size, style} from '../style' with {type: 'macro'}; import {SkeletonWrapper} from './Skeleton'; import {Text} from './Content'; import {useDOMRef} from '@react-spectrum/utils'; diff --git a/packages/@react-spectrum/s2/src/Modal.tsx b/packages/@react-spectrum/s2/src/Modal.tsx index e041568ca82..c3cd40aae16 100644 --- a/packages/@react-spectrum/s2/src/Modal.tsx +++ b/packages/@react-spectrum/s2/src/Modal.tsx @@ -16,7 +16,7 @@ import {DOMRef} from '@react-types/shared'; import {forwardRef, MutableRefObject, useCallback, useContext} from 'react'; import {keyframes} from '../style/style-macro' with {type: 'macro'}; import {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; interface ModalProps extends ModalOverlayProps { diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx index cecb56bf00e..c6f4edf2eef 100644 --- a/packages/@react-spectrum/s2/src/NumberField.tsx +++ b/packages/@react-spectrum/s2/src/NumberField.tsx @@ -21,7 +21,7 @@ import { Text, useContextProps } from 'react-aria-components'; -import {baseColor, size, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {baseColor, size, style} from '../style' with {type: 'macro'}; import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react'; import {createFocusableRef} from '@react-spectrum/utils'; import Dash from '../ui-icons/Dash'; diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx index 10945309e8b..3840a5b9375 100644 --- a/packages/@react-spectrum/s2/src/Picker.tsx +++ b/packages/@react-spectrum/s2/src/Picker.tsx @@ -27,7 +27,7 @@ import { SectionProps, SelectValue } from 'react-aria-components'; -import {baseColor, edgeToText, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'}; import {centerBaseline} from './CenterBaseline'; import { checkmark, @@ -43,7 +43,7 @@ import { } from './Menu'; import CheckmarkIcon from '../ui-icons/Checkmark'; import ChevronIcon from '../ui-icons/Chevron'; -import {field, fieldInput, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; +import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import { FieldErrorIcon, FieldLabel, diff --git a/packages/@react-spectrum/s2/src/Popover.tsx b/packages/@react-spectrum/s2/src/Popover.tsx index ca5ab358e2d..6ea1b283316 100644 --- a/packages/@react-spectrum/s2/src/Popover.tsx +++ b/packages/@react-spectrum/s2/src/Popover.tsx @@ -23,7 +23,7 @@ import {DOMRef} from '@react-types/shared'; import {forwardRef, MutableRefObject, useCallback, useContext} from 'react'; import {keyframes} from '../style/style-macro' with {type: 'macro'}; import {mergeStyles} from '../style/runtime'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {StyleString} from '../style/types' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; diff --git a/packages/@react-spectrum/s2/src/ProgressBar.tsx b/packages/@react-spectrum/s2/src/ProgressBar.tsx index 12b965b97f1..efde95252da 100644 --- a/packages/@react-spectrum/s2/src/ProgressBar.tsx +++ b/packages/@react-spectrum/s2/src/ProgressBar.tsx @@ -22,7 +22,7 @@ import {FieldLabel} from './Field'; import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {keyframes} from '../style/style-macro' with {type: 'macro'}; import {mergeStyles} from '../style/runtime'; -import {size, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {size, style} from '../style' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ProgressCircle.tsx b/packages/@react-spectrum/s2/src/ProgressCircle.tsx index 8a66c20e787..bd5b5b1d235 100644 --- a/packages/@react-spectrum/s2/src/ProgressCircle.tsx +++ b/packages/@react-spectrum/s2/src/ProgressCircle.tsx @@ -15,7 +15,7 @@ import {createContext, forwardRef} from 'react'; import {DOMRef, DOMRefValue} from '@react-types/shared'; import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {keyframes} from '../style/style-macro' with {type: 'macro'}; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Provider.tsx b/packages/@react-spectrum/s2/src/Provider.tsx index 971a42007a8..f06394afdca 100644 --- a/packages/@react-spectrum/s2/src/Provider.tsx +++ b/packages/@react-spectrum/s2/src/Provider.tsx @@ -16,7 +16,7 @@ import {createContext, JSX, ReactNode, useContext} from 'react'; import {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'}; import {I18nProvider, RouterProvider, useLocale} from 'react-aria-components'; import {mergeStyles} from '../style/runtime'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {StyleString} from '../style/types'; export interface ProviderProps extends UnsafeStyles { diff --git a/packages/@react-spectrum/s2/src/Radio.tsx b/packages/@react-spectrum/s2/src/Radio.tsx index f14f9b57204..6367ca91871 100644 --- a/packages/@react-spectrum/s2/src/Radio.tsx +++ b/packages/@react-spectrum/s2/src/Radio.tsx @@ -15,12 +15,12 @@ import { RadioProps as AriaRadioProps, RadioRenderProps } from 'react-aria-components'; -import {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {baseColor, focusRing, style} from '../style' with {type: 'macro'}; import {CenterBaseline} from './CenterBaseline'; import {FocusableRef} from '@react-types/shared'; -import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {FormContext, useFormProps} from './Form'; import {forwardRef, ReactNode, useContext, useRef} from 'react'; +import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {pressScale} from './pressScale'; import {useFocusableRef} from '@react-spectrum/utils'; diff --git a/packages/@react-spectrum/s2/src/RadioGroup.tsx b/packages/@react-spectrum/s2/src/RadioGroup.tsx index cf8cf22c15f..87b020623d0 100644 --- a/packages/@react-spectrum/s2/src/RadioGroup.tsx +++ b/packages/@react-spectrum/s2/src/RadioGroup.tsx @@ -20,7 +20,7 @@ import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: import {FieldLabel, HelpText} from './Field'; import {FormContext, useFormProps} from './Form'; import React, {createContext, forwardRef, ReactNode, useContext} from 'react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/SearchField.tsx b/packages/@react-spectrum/s2/src/SearchField.tsx index 05adc13b6fe..2dbac736e7b 100644 --- a/packages/@react-spectrum/s2/src/SearchField.tsx +++ b/packages/@react-spectrum/s2/src/SearchField.tsx @@ -22,7 +22,7 @@ import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} import {createFocusableRef} from '@react-spectrum/utils'; import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {FieldGroup, FieldLabel, HelpText, Input} from './Field'; -import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {fontRelative, style} from '../style' with {type: 'macro'}; import {FormContext, useFormProps} from './Form'; import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared'; import {IconContext} from './Icon'; diff --git a/packages/@react-spectrum/s2/src/SegmentedControl.tsx b/packages/@react-spectrum/s2/src/SegmentedControl.tsx index 6a6027eeb2f..a74f6beb7f2 100644 --- a/packages/@react-spectrum/s2/src/SegmentedControl.tsx +++ b/packages/@react-spectrum/s2/src/SegmentedControl.tsx @@ -14,10 +14,10 @@ import {centerBaseline} from './CenterBaseline'; import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupProps, RadioGroupStateContext, RadioProps} from 'react-aria-components'; import {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react'; import {DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared'; -import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; +import {focusRing, size, style} from '../style' with {type: 'macro'}; +import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {IconContext} from './Icon'; import {pressScale} from './pressScale'; -import {size, style} from '../style/spectrum-theme' with {type: 'macro'}; import {Text, TextContext} from './Content'; import {useDOMRef, useFocusableRef} from '@react-spectrum/utils'; import {useLayoutEffect} from '@react-aria/utils'; diff --git a/packages/@react-spectrum/s2/src/Skeleton.tsx b/packages/@react-spectrum/s2/src/Skeleton.tsx index d37703b2dd6..3b70e100912 100644 --- a/packages/@react-spectrum/s2/src/Skeleton.tsx +++ b/packages/@react-spectrum/s2/src/Skeleton.tsx @@ -15,7 +15,7 @@ import {colorToken} from '../style/tokens' with {type: 'macro'}; import {mergeRefs} from '@react-aria/utils'; import {mergeStyles} from '../style/runtime'; import {raw} from '../style/style-macro' with {type: 'macro'}; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {StyleString} from '../style/types'; let reduceMotion = typeof window?.matchMedia === 'function' diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx index 34eceef9723..27fa83b2ebb 100644 --- a/packages/@react-spectrum/s2/src/Slider.tsx +++ b/packages/@react-spectrum/s2/src/Slider.tsx @@ -20,13 +20,13 @@ import { } from 'react-aria-components'; import {clamp} from '@react-aria/utils'; import {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react'; -import {field, fieldInput, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; +import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {FieldLabel} from './Field'; import {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared'; +import {focusRing, size, style} from '../style' with {type: 'macro'}; import {FormContext, useFormProps} from './Form'; import {mergeStyles} from '../style/runtime'; import {pressScale} from './pressScale'; -import {size, style} from '../style/spectrum-theme' with {type: 'macro'}; import {useFocusableRef} from '@react-spectrum/utils'; import {useLocale, useNumberFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/StatusLight.tsx b/packages/@react-spectrum/s2/src/StatusLight.tsx index 662c23fdf39..f239cf2198b 100644 --- a/packages/@react-spectrum/s2/src/StatusLight.tsx +++ b/packages/@react-spectrum/s2/src/StatusLight.tsx @@ -16,7 +16,7 @@ import {ContextValue, SlotProps} from 'react-aria-components'; import {createContext, forwardRef, ReactNode} from 'react'; import {filterDOMProps} from '@react-aria/utils'; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; -import {size, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {size, style} from '../style' with {type: 'macro'}; import {Text} from './Content'; import {useDOMRef} from '@react-spectrum/utils'; import {useIsSkeleton} from './Skeleton'; diff --git a/packages/@react-spectrum/s2/src/Switch.tsx b/packages/@react-spectrum/s2/src/Switch.tsx index e133d482b96..b5cfa0f987e 100644 --- a/packages/@react-spectrum/s2/src/Switch.tsx +++ b/packages/@react-spectrum/s2/src/Switch.tsx @@ -16,12 +16,12 @@ import { ContextValue, SwitchRenderProps } from 'react-aria-components'; -import {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'}; import {CenterBaseline} from './CenterBaseline'; import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react'; import {FocusableRef, FocusableRefValue} from '@react-types/shared'; -import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {FormContext, useFormProps} from './Form'; +import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {pressScale} from './pressScale'; import {useFocusableRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx index bb065c6c755..446b9f1c999 100644 --- a/packages/@react-spectrum/s2/src/Tabs.tsx +++ b/packages/@react-spectrum/s2/src/Tabs.tsx @@ -27,9 +27,9 @@ import { import {centerBaseline} from './CenterBaseline'; import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation} from '@react-types/shared'; import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react'; -import {focusRing, getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; +import {focusRing, style} from '../style' with {type: 'macro'}; +import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {IconContext} from './Icon'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; import {Text, TextContext} from './Content'; import {useDOMRef} from '@react-spectrum/utils'; import {useLayoutEffect} from '@react-aria/utils'; diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx index 87429c800c1..87824188e02 100644 --- a/packages/@react-spectrum/s2/src/TagGroup.tsx +++ b/packages/@react-spectrum/s2/src/TagGroup.tsx @@ -32,10 +32,10 @@ import {ClearButton} from './ClearButton'; import {Collection, CollectionBuilder} from '@react-aria/collections'; import {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react'; import {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared'; -import {field, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; +import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {FieldLabel} from './Field'; import {flushSync} from 'react-dom'; -import {fontRelative, style} from '../style/spectrum-theme' with { type: 'macro' }; +import {focusRing, fontRelative, style} from '../style' with { type: 'macro' }; import {FormContext, useFormProps} from './Form'; import {forwardRefType} from './types'; import {IconContext} from './Icon'; diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx index cd74e3c2386..3fb670afc5b 100644 --- a/packages/@react-spectrum/s2/src/TextField.tsx +++ b/packages/@react-spectrum/s2/src/TextField.tsx @@ -27,7 +27,7 @@ import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field'; import {FormContext, useFormProps} from './Form'; import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared'; import {mergeRefs} from '@react-aria/utils'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {StyleString} from '../style/types'; import {TextFieldRef} from '@react-types/textfield'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ToggleButton.tsx b/packages/@react-spectrum/s2/src/ToggleButton.tsx index 668db013738..143c67ef96b 100644 --- a/packages/@react-spectrum/s2/src/ToggleButton.tsx +++ b/packages/@react-spectrum/s2/src/ToggleButton.tsx @@ -15,7 +15,7 @@ import {centerBaseline} from './CenterBaseline'; import {ContextValue, Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps} from 'react-aria-components'; import {createContext, forwardRef, ReactNode} from 'react'; import {FocusableRef, FocusableRefValue} from '@react-types/shared'; -import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {fontRelative, style} from '../style' with {type: 'macro'}; import {IconContext} from './Icon'; import {pressScale} from './pressScale'; import {SkeletonContext} from './Skeleton'; diff --git a/packages/@react-spectrum/s2/src/Tooltip.tsx b/packages/@react-spectrum/s2/src/Tooltip.tsx index de01359933c..4e20e3a61b8 100644 --- a/packages/@react-spectrum/s2/src/Tooltip.tsx +++ b/packages/@react-spectrum/s2/src/Tooltip.tsx @@ -25,7 +25,7 @@ import {ColorSchemeContext} from './Provider'; import {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react'; import {DOMRef} from '@react-types/shared'; import {keyframes} from '../style/style-macro' with {type: 'macro'}; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; export interface TooltipTriggerProps extends Omit, Pick { diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts index 3541241cce7..a3ce3b154ac 100644 --- a/packages/@react-spectrum/s2/src/index.ts +++ b/packages/@react-spectrum/s2/src/index.ts @@ -70,6 +70,8 @@ export {TextArea, TextField, TextAreaContext, TextFieldContext} from './TextFiel export {ToggleButton, ToggleButtonContext} from './ToggleButton'; export {Tooltip, TooltipTrigger} from './Tooltip'; +export {pressScale} from './pressScale'; + export {Collection} from 'react-aria-components'; export {FileTrigger} from 'react-aria-components'; diff --git a/packages/@react-spectrum/s2/src/style-utils.ts b/packages/@react-spectrum/s2/src/style-utils.ts index f6b4c0e4d23..4b282d7c04d 100644 --- a/packages/@react-spectrum/s2/src/style-utils.ts +++ b/packages/@react-spectrum/s2/src/style-utils.ts @@ -13,16 +13,6 @@ import {CSSProperties} from 'react'; import {StyleString} from '../style/types'; -export const focusRing = () => ({ - outlineStyle: { - default: 'none', - isFocusVisible: 'solid' - }, - outlineColor: 'focus-ring', - outlineWidth: 2, - outlineOffset: 2 -} as const); - export function centerPadding(minHeight: string = 'self(minHeight)'): `[${string}]` { return `[calc((${minHeight} - self(borderTopWidth, 0px) - self(borderBottomWidth, 0px) - 1lh) / 2)]`; } diff --git a/packages/@react-spectrum/s2/stories/Accordion.stories.tsx b/packages/@react-spectrum/s2/stories/Accordion.stories.tsx index 04a04865a8d..12a744a30da 100644 --- a/packages/@react-spectrum/s2/stories/Accordion.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Accordion.stories.tsx @@ -13,7 +13,7 @@ import {Accordion, Disclosure, DisclosureHeader, DisclosurePanel, TextField} from '../src'; import type {Meta, StoryObj} from '@storybook/react'; import React from 'react'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: Accordion, diff --git a/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx b/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx index ab9e421334c..8b920e3795c 100644 --- a/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx +++ b/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx @@ -14,7 +14,7 @@ import {ActionButton, Text} from '../src'; import {categorizeArgTypes, StaticColorDecorator} from './utils'; import type {Meta, StoryObj} from '@storybook/react'; import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; import './unsafe.css'; const meta: Meta = { diff --git a/packages/@react-spectrum/s2/stories/Avatar.stories.tsx b/packages/@react-spectrum/s2/stories/Avatar.stories.tsx index ded8293d4ac..a0fffa12d1f 100644 --- a/packages/@react-spectrum/s2/stories/Avatar.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Avatar.stories.tsx @@ -12,7 +12,7 @@ import {Avatar} from '../src'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: Avatar, diff --git a/packages/@react-spectrum/s2/stories/AvatarGroup.stories.tsx b/packages/@react-spectrum/s2/stories/AvatarGroup.stories.tsx index 795de923f03..29a4dc6b650 100644 --- a/packages/@react-spectrum/s2/stories/AvatarGroup.stories.tsx +++ b/packages/@react-spectrum/s2/stories/AvatarGroup.stories.tsx @@ -12,7 +12,7 @@ import {Avatar, AvatarGroup, Provider} from '../src'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta = { component: AvatarGroup, diff --git a/packages/@react-spectrum/s2/stories/Badge.stories.tsx b/packages/@react-spectrum/s2/stories/Badge.stories.tsx index 46e5b924aff..48bef87d069 100644 --- a/packages/@react-spectrum/s2/stories/Badge.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Badge.stories.tsx @@ -13,7 +13,7 @@ import {Badge, Text} from '../src'; import CheckmarkCircle from '../s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: Badge, diff --git a/packages/@react-spectrum/s2/stories/ButtonGroup.stories.tsx b/packages/@react-spectrum/s2/stories/ButtonGroup.stories.tsx index bc934a46e9d..ff970164187 100644 --- a/packages/@react-spectrum/s2/stories/ButtonGroup.stories.tsx +++ b/packages/@react-spectrum/s2/stories/ButtonGroup.stories.tsx @@ -13,7 +13,7 @@ import {Button, ButtonGroup, Text} from '../src'; import type {Meta, StoryObj} from '@storybook/react'; import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: ButtonGroup, diff --git a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx index 7f4cef1019e..b9d9927b76b 100644 --- a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx @@ -12,7 +12,7 @@ import {Checkbox} from '../src'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta = { component: Checkbox, diff --git a/packages/@react-spectrum/s2/stories/ColorSwatch.stories.tsx b/packages/@react-spectrum/s2/stories/ColorSwatch.stories.tsx index 8a71a2d438d..8828d2f2453 100644 --- a/packages/@react-spectrum/s2/stories/ColorSwatch.stories.tsx +++ b/packages/@react-spectrum/s2/stories/ColorSwatch.stories.tsx @@ -12,7 +12,7 @@ import {ColorSwatch} from '../src/ColorSwatch'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta = { component: ColorSwatch, diff --git a/packages/@react-spectrum/s2/stories/ColorSwatchPicker.stories.tsx b/packages/@react-spectrum/s2/stories/ColorSwatchPicker.stories.tsx index 356bec332fc..d28f0846534 100644 --- a/packages/@react-spectrum/s2/stories/ColorSwatchPicker.stories.tsx +++ b/packages/@react-spectrum/s2/stories/ColorSwatchPicker.stories.tsx @@ -13,7 +13,7 @@ import {ColorSwatch} from '../src/ColorSwatch'; import {ColorSwatchPicker} from '../src/ColorSwatchPicker'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta = { component: ColorSwatchPicker, diff --git a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx index d82b7e860c4..3bf5edbd83d 100644 --- a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx +++ b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx @@ -16,7 +16,7 @@ import {ComboBoxProps} from 'react-aria-components'; import DeviceDesktopIcon from '../s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg'; import DeviceTabletIcon from '../s2wf-icons/S2_Icon_DeviceTablet_20_N.svg'; import type {Meta, StoryObj} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta> = { component: ComboBox, diff --git a/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx b/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx index 9ec0c5b24c3..073901615a4 100644 --- a/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx @@ -13,7 +13,7 @@ import {Disclosure, DisclosureHeader, DisclosurePanel} from '../src'; import type {Meta, StoryObj} from '@storybook/react'; import React from 'react'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: Disclosure, diff --git a/packages/@react-spectrum/s2/stories/Divider.stories.tsx b/packages/@react-spectrum/s2/stories/Divider.stories.tsx index adca8117a3f..fadd81523d7 100644 --- a/packages/@react-spectrum/s2/stories/Divider.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Divider.stories.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {baseColor, style} from '../style' with {type: 'macro'}; import {Divider} from '../src'; import type {Meta} from '@storybook/react'; diff --git a/packages/@react-spectrum/s2/stories/DropZone.stories.tsx b/packages/@react-spectrum/s2/stories/DropZone.stories.tsx index fd8ce987e70..06b73ee6296 100644 --- a/packages/@react-spectrum/s2/stories/DropZone.stories.tsx +++ b/packages/@react-spectrum/s2/stories/DropZone.stories.tsx @@ -18,7 +18,7 @@ import DropToUpload from '../spectrum-illustrations/linear/DropToUpload'; import {FocusRing, mergeProps, useButton, useClipboard, useDrag} from 'react-aria'; import type {Meta} from '@storybook/react'; import React, {useState} from 'react'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: DropZone, diff --git a/packages/@react-spectrum/s2/stories/Form.stories.tsx b/packages/@react-spectrum/s2/stories/Form.stories.tsx index 5928a5f9669..4d2e53e7a4a 100644 --- a/packages/@react-spectrum/s2/stories/Form.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Form.stories.tsx @@ -45,7 +45,7 @@ import {categorizeArgTypes} from './utils'; import type {Meta} from '@storybook/react'; import SortDown from '../s2wf-icons/S2_Icon_SortDown_20_N.svg'; import SortUp from '../s2wf-icons/S2_Icon_SortUp_20_N.svg'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {useState} from 'react'; const meta: Meta = { diff --git a/packages/@react-spectrum/s2/stories/Link.stories.tsx b/packages/@react-spectrum/s2/stories/Link.stories.tsx index 980edd02adf..9b6f3036b13 100644 --- a/packages/@react-spectrum/s2/stories/Link.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Link.stories.tsx @@ -13,7 +13,7 @@ import {categorizeArgTypes, StaticColorDecorator} from './utils'; import {Link} from '../src'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta = { component: Link, diff --git a/packages/@react-spectrum/s2/stories/LinkButton.stories.tsx b/packages/@react-spectrum/s2/stories/LinkButton.stories.tsx index fdb6f67f0e9..6a59681274d 100644 --- a/packages/@react-spectrum/s2/stories/LinkButton.stories.tsx +++ b/packages/@react-spectrum/s2/stories/LinkButton.stories.tsx @@ -14,7 +14,7 @@ import {categorizeArgTypes, StaticColorDecorator} from './utils'; import {LinkButton, Text} from '../src'; import type {Meta, StoryObj} from '@storybook/react'; import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: LinkButton, diff --git a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx index f44f2cc214b..84cd18a239d 100644 --- a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx +++ b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx @@ -22,7 +22,7 @@ import { Text } from '../src'; import type {Meta, StoryObj} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta = { component: NumberField, diff --git a/packages/@react-spectrum/s2/stories/Picker.stories.tsx b/packages/@react-spectrum/s2/stories/Picker.stories.tsx index f8b31a2343c..0375dfac171 100644 --- a/packages/@react-spectrum/s2/stories/Picker.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Picker.stories.tsx @@ -28,7 +28,7 @@ import {categorizeArgTypes, StaticColorDecorator} from './utils'; import DeviceDesktopIcon from '../s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg'; import DeviceTabletIcon from '../s2wf-icons/S2_Icon_DeviceTablet_20_N.svg'; import type {Meta, StoryObj} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta> = { component: Picker, diff --git a/packages/@react-spectrum/s2/stories/ProgressBar.stories.tsx b/packages/@react-spectrum/s2/stories/ProgressBar.stories.tsx index 25182e9df6e..da7b83d2991 100644 --- a/packages/@react-spectrum/s2/stories/ProgressBar.stories.tsx +++ b/packages/@react-spectrum/s2/stories/ProgressBar.stories.tsx @@ -13,7 +13,7 @@ import type {Meta} from '@storybook/react'; import {ProgressBar} from '../src'; import {StaticColorDecorator} from './utils'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta = { component: ProgressBar, diff --git a/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx b/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx index e98101a36d8..28de86080bd 100644 --- a/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx +++ b/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx @@ -21,7 +21,7 @@ import { Text } from '../src'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta = { component: RadioGroup, diff --git a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx index f4104d3e29a..c72f4377e9a 100644 --- a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx +++ b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx @@ -21,7 +21,7 @@ import { Text } from '../src'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta = { component: SearchField, diff --git a/packages/@react-spectrum/s2/stories/SegmentedControl.stories.tsx b/packages/@react-spectrum/s2/stories/SegmentedControl.stories.tsx index 5545467ece8..1ff38c1f3fe 100644 --- a/packages/@react-spectrum/s2/stories/SegmentedControl.stories.tsx +++ b/packages/@react-spectrum/s2/stories/SegmentedControl.stories.tsx @@ -18,7 +18,7 @@ import ListMultiSelect from '../s2wf-icons/S2_Icon_ListMultiSelect_20_N.svg'; import ListNumbered from '../s2wf-icons/S2_Icon_ListNumbered_20_N.svg'; import type {Meta} from '@storybook/react'; import {SegmentedControl, SegmentedControlItem, Text} from '../src'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta = { diff --git a/packages/@react-spectrum/s2/stories/Slider.stories.tsx b/packages/@react-spectrum/s2/stories/Slider.stories.tsx index c006ece6784..a448705fad3 100644 --- a/packages/@react-spectrum/s2/stories/Slider.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Slider.stories.tsx @@ -15,7 +15,7 @@ import {ContextualHelp} from '../src/ContextualHelp'; import {Link} from '../src/Link'; import type {Meta} from '@storybook/react'; import {Slider} from '../src/Slider'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; const meta: Meta = { component: Slider, diff --git a/packages/@react-spectrum/s2/stories/StatusLight.stories.tsx b/packages/@react-spectrum/s2/stories/StatusLight.stories.tsx index baaac16f28a..9e20c0e0086 100644 --- a/packages/@react-spectrum/s2/stories/StatusLight.stories.tsx +++ b/packages/@react-spectrum/s2/stories/StatusLight.stories.tsx @@ -12,7 +12,7 @@ import type {Meta} from '@storybook/react'; import {StatusLight} from '../src'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta = { component: StatusLight, diff --git a/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx b/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx index f8345d4b644..02cd128121e 100644 --- a/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx +++ b/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx @@ -12,7 +12,7 @@ import {Link} from '../src'; import React from 'react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; export default { title: 'Style Macro', diff --git a/packages/@react-spectrum/s2/stories/Switch.stories.tsx b/packages/@react-spectrum/s2/stories/Switch.stories.tsx index 733730c5083..e73cb4adec0 100644 --- a/packages/@react-spectrum/s2/stories/Switch.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Switch.stories.tsx @@ -11,7 +11,7 @@ */ import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; import {Switch} from '../src'; const meta: Meta = { diff --git a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx index 7d36e0357db..a5e94f340d5 100644 --- a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx @@ -14,7 +14,7 @@ import Bell from '../s2wf-icons/S2_Icon_Bell_20_N.svg'; import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg'; import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; import {Tab, TabList, TabPanel, Tabs} from '../src/Tabs'; const meta: Meta = { diff --git a/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx b/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx index 6f07cd1cef5..1e41a0b66ed 100644 --- a/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx +++ b/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx @@ -25,7 +25,7 @@ import { } from '../src'; import type {Meta} from '@storybook/react'; import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta> = { component: TagGroup, diff --git a/packages/@react-spectrum/s2/stories/TextField.stories.tsx b/packages/@react-spectrum/s2/stories/TextField.stories.tsx index 62cfddd58dc..d3265147c4f 100644 --- a/packages/@react-spectrum/s2/stories/TextField.stories.tsx +++ b/packages/@react-spectrum/s2/stories/TextField.stories.tsx @@ -15,7 +15,7 @@ import {Content, Footer, Heading, Text} from '../src/Content'; import {ContextualHelp} from '../src/ContextualHelp'; import {Link} from '../src/Link'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta = { component: TextField, diff --git a/packages/@react-spectrum/s2/stories/Tooltip.stories.tsx b/packages/@react-spectrum/s2/stories/Tooltip.stories.tsx index ef710a10cab..671920fe9f2 100644 --- a/packages/@react-spectrum/s2/stories/Tooltip.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Tooltip.stories.tsx @@ -15,7 +15,7 @@ import {CombinedTooltip} from '../src/Tooltip'; import Crop from '../s2wf-icons/S2_Icon_Crop_20_N.svg'; import LassoSelect from '../s2wf-icons/S2_Icon_LassoSelect_20_N.svg'; import type {Meta} from '@storybook/react'; -import {style} from '../style/spectrum-theme' with {type: 'macro'}; +import {style} from '../style' with {type: 'macro'}; const meta: Meta = { component: CombinedTooltip, diff --git a/packages/@react-spectrum/s2/style/index.ts b/packages/@react-spectrum/s2/style/index.ts new file mode 100644 index 00000000000..ddaf1e5de36 --- /dev/null +++ b/packages/@react-spectrum/s2/style/index.ts @@ -0,0 +1,24 @@ +/* + * Copyright 2024 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. + */ + +export {baseColor, edgeToText, fontRelative, lightDark, size, space, style} from './spectrum-theme'; +export type {StyleString} from './types'; + +export const focusRing = () => ({ + outlineStyle: { + default: 'none', + isFocusVisible: 'solid' + }, + outlineColor: 'focus-ring', + outlineWidth: 2, + outlineOffset: 2 +} as const);