diff --git a/examples/s2-parcel-example/src/Lazy.js b/examples/s2-parcel-example/src/Lazy.js index dc2f0e3aef6..1004a7eaa0a 100644 --- a/examples/s2-parcel-example/src/Lazy.js +++ b/examples/s2-parcel-example/src/Lazy.js @@ -165,7 +165,7 @@ export default function Lazy() { The missing link. Foo - + Day Week Month diff --git a/examples/s2-webpack-5-example/src/Lazy.js b/examples/s2-webpack-5-example/src/Lazy.js index dc2f0e3aef6..1004a7eaa0a 100644 --- a/examples/s2-webpack-5-example/src/Lazy.js +++ b/examples/s2-webpack-5-example/src/Lazy.js @@ -165,7 +165,7 @@ export default function Lazy() { The missing link. Foo - + Day Week Month diff --git a/packages/@react-aria/datepicker/docs/useDatePicker.mdx b/packages/@react-aria/datepicker/docs/useDatePicker.mdx index 723557bf57b..044e94dbb0f 100644 --- a/packages/@react-aria/datepicker/docs/useDatePicker.mdx +++ b/packages/@react-aria/datepicker/docs/useDatePicker.mdx @@ -461,13 +461,13 @@ function CalendarCell({state, date}) { ## Styled examples diff --git a/packages/@react-aria/datepicker/docs/useDateRangePicker.mdx b/packages/@react-aria/datepicker/docs/useDateRangePicker.mdx index 31114e9d17b..bf38182eeb7 100644 --- a/packages/@react-aria/datepicker/docs/useDateRangePicker.mdx +++ b/packages/@react-aria/datepicker/docs/useDateRangePicker.mdx @@ -474,13 +474,13 @@ function CalendarCell({state, date}) { ## Styled examples diff --git a/packages/@react-aria/progress/docs/useProgressBar.mdx b/packages/@react-aria/progress/docs/useProgressBar.mdx index 19c79f2a28e..e102b867c42 100644 --- a/packages/@react-aria/progress/docs/useProgressBar.mdx +++ b/packages/@react-aria/progress/docs/useProgressBar.mdx @@ -212,7 +212,7 @@ The `valueLabel` prop allows the formatted value to be replaced with a custom st ### Indeterminate -The `isIndeterminate` prop can be used to represent an interdeterminate operation. The `ProgressCircle` component created [above](#circular-example) +The `isIndeterminate` prop can be used to represent an indeterminate operation. The `ProgressCircle` component created [above](#circular-example) implements an animation to indicate this visually. ```tsx example diff --git a/packages/@react-spectrum/s2/intl/ar-AE.json b/packages/@react-spectrum/s2/intl/ar-AE.json index 627187f7fd6..b1d5bf19161 100644 --- a/packages/@react-spectrum/s2/intl/ar-AE.json +++ b/packages/@react-spectrum/s2/intl/ar-AE.json @@ -1,5 +1,5 @@ { - "breadcrumbs.more": "More items", + "breadcrumbs.more": "المزيد من العناصر", "button.pending": "قيد الانتظار", "contextualhelp.help": "مساعدة", "contextualhelp.info": "معلومات", diff --git a/packages/@react-spectrum/s2/intl/bg-BG.json b/packages/@react-spectrum/s2/intl/bg-BG.json index 4a24fb1d752..9b28835573c 100644 --- a/packages/@react-spectrum/s2/intl/bg-BG.json +++ b/packages/@react-spectrum/s2/intl/bg-BG.json @@ -1,5 +1,5 @@ { - "breadcrumbs.more": "More items", + "breadcrumbs.more": "Още елементи", "button.pending": "недовършено", "contextualhelp.help": "Помощ", "contextualhelp.info": "Информация", diff --git a/packages/@react-spectrum/s2/intl/el-GR.json b/packages/@react-spectrum/s2/intl/el-GR.json index 13060bdbd9a..ed51277c8a4 100644 --- a/packages/@react-spectrum/s2/intl/el-GR.json +++ b/packages/@react-spectrum/s2/intl/el-GR.json @@ -1,5 +1,5 @@ { - "breadcrumbs.more": "More items", + "breadcrumbs.more": "Περισσότερα στοιχεία", "button.pending": "σε εκκρεμότητα", "contextualhelp.help": "Βοήθεια", "contextualhelp.info": "Πληροφορίες", diff --git a/packages/@react-spectrum/s2/intl/et-EE.json b/packages/@react-spectrum/s2/intl/et-EE.json index af9c7f443c9..e118ba52eba 100644 --- a/packages/@react-spectrum/s2/intl/et-EE.json +++ b/packages/@react-spectrum/s2/intl/et-EE.json @@ -1,5 +1,5 @@ { - "breadcrumbs.more": "More items", + "breadcrumbs.more": "Veel üksusi", "button.pending": "ootel", "contextualhelp.help": "Spikker", "contextualhelp.info": "Teave", diff --git a/packages/@react-spectrum/s2/intl/he-IL.json b/packages/@react-spectrum/s2/intl/he-IL.json index 7b984856fa1..6dfe5f423db 100644 --- a/packages/@react-spectrum/s2/intl/he-IL.json +++ b/packages/@react-spectrum/s2/intl/he-IL.json @@ -1,5 +1,5 @@ { - "breadcrumbs.more": "More items", + "breadcrumbs.more": "פריטים נוספים", "button.pending": "ממתין ל", "contextualhelp.help": "עזרה", "contextualhelp.info": "מידע", diff --git a/packages/@react-spectrum/s2/intl/hr-HR.json b/packages/@react-spectrum/s2/intl/hr-HR.json index e2a121290d5..4ed5f9537f4 100644 --- a/packages/@react-spectrum/s2/intl/hr-HR.json +++ b/packages/@react-spectrum/s2/intl/hr-HR.json @@ -1,5 +1,5 @@ { - "breadcrumbs.more": "More items", + "breadcrumbs.more": "Više stavki", "button.pending": "u tijeku", "contextualhelp.help": "Pomoć", "contextualhelp.info": "Informacije", diff --git a/packages/@react-spectrum/s2/intl/hu-HU.json b/packages/@react-spectrum/s2/intl/hu-HU.json index 5dac0ede744..37f4cca59a8 100644 --- a/packages/@react-spectrum/s2/intl/hu-HU.json +++ b/packages/@react-spectrum/s2/intl/hu-HU.json @@ -1,5 +1,5 @@ { - "breadcrumbs.more": "More items", + "breadcrumbs.more": "További elemek", "button.pending": "függőben levő", "contextualhelp.help": "Súgó", "contextualhelp.info": "Információ", diff --git a/packages/@react-spectrum/s2/intl/lt-LT.json b/packages/@react-spectrum/s2/intl/lt-LT.json index da0d2173cd2..ef493bcd8fb 100644 --- a/packages/@react-spectrum/s2/intl/lt-LT.json +++ b/packages/@react-spectrum/s2/intl/lt-LT.json @@ -1,5 +1,5 @@ { - "breadcrumbs.more": "More items", + "breadcrumbs.more": "Daugiau elementų", "button.pending": "laukiama", "contextualhelp.help": "Žinynas", "contextualhelp.info": "Informacija", diff --git a/packages/@react-spectrum/s2/intl/lv-LV.json b/packages/@react-spectrum/s2/intl/lv-LV.json index 107fafa932a..081c6ff2435 100644 --- a/packages/@react-spectrum/s2/intl/lv-LV.json +++ b/packages/@react-spectrum/s2/intl/lv-LV.json @@ -1,5 +1,5 @@ { - "breadcrumbs.more": "More items", + "breadcrumbs.more": "Vairāk vienumu", "button.pending": "gaida", "contextualhelp.help": "Palīdzība", "contextualhelp.info": "Informācija", diff --git a/packages/@react-spectrum/s2/intl/pt-PT.json b/packages/@react-spectrum/s2/intl/pt-PT.json index d1ad72c9972..8dbe195743e 100644 --- a/packages/@react-spectrum/s2/intl/pt-PT.json +++ b/packages/@react-spectrum/s2/intl/pt-PT.json @@ -1,5 +1,5 @@ { - "breadcrumbs.more": "More items", + "breadcrumbs.more": "Mais artigos", "button.pending": "pendente", "contextualhelp.help": "Ajuda", "contextualhelp.info": "Informação", diff --git a/packages/@react-spectrum/s2/intl/ro-RO.json b/packages/@react-spectrum/s2/intl/ro-RO.json index d85e34f3ac1..7302c652d5f 100644 --- a/packages/@react-spectrum/s2/intl/ro-RO.json +++ b/packages/@react-spectrum/s2/intl/ro-RO.json @@ -1,5 +1,5 @@ { - "breadcrumbs.more": "More items", + "breadcrumbs.more": "Mai multe articole", "button.pending": "în așteptare", "contextualhelp.help": "Ajutor", "contextualhelp.info": "Informații", diff --git a/packages/@react-spectrum/s2/intl/sk-SK.json b/packages/@react-spectrum/s2/intl/sk-SK.json index 7a0432c6c33..0e1de631de1 100644 --- a/packages/@react-spectrum/s2/intl/sk-SK.json +++ b/packages/@react-spectrum/s2/intl/sk-SK.json @@ -1,5 +1,5 @@ { - "breadcrumbs.more": "More items", + "breadcrumbs.more": "Ďalšie položky", "button.pending": "čakajúce", "contextualhelp.help": "Pomoc", "contextualhelp.info": "Informácie", diff --git a/packages/@react-spectrum/s2/intl/sl-SI.json b/packages/@react-spectrum/s2/intl/sl-SI.json index e9a0b0d2fc4..948de071157 100644 --- a/packages/@react-spectrum/s2/intl/sl-SI.json +++ b/packages/@react-spectrum/s2/intl/sl-SI.json @@ -1,5 +1,5 @@ { - "breadcrumbs.more": "More items", + "breadcrumbs.more": "Več elementov", "button.pending": "v teku", "contextualhelp.help": "Pomoč", "contextualhelp.info": "Informacije", diff --git a/packages/@react-spectrum/s2/intl/sr-SP.json b/packages/@react-spectrum/s2/intl/sr-SP.json index 606aeaf766b..b93b0e5385e 100644 --- a/packages/@react-spectrum/s2/intl/sr-SP.json +++ b/packages/@react-spectrum/s2/intl/sr-SP.json @@ -1,5 +1,5 @@ { - "breadcrumbs.more": "More items", + "breadcrumbs.more": "Više stavki", "button.pending": "nerešeno", "contextualhelp.help": "Pomoć", "contextualhelp.info": "Informacije", diff --git a/packages/@react-spectrum/s2/intl/uk-UA.json b/packages/@react-spectrum/s2/intl/uk-UA.json index ae1b3f71d8c..6f3e3ecaae5 100644 --- a/packages/@react-spectrum/s2/intl/uk-UA.json +++ b/packages/@react-spectrum/s2/intl/uk-UA.json @@ -1,5 +1,5 @@ { - "breadcrumbs.more": "More items", + "breadcrumbs.more": "Більше елементів", "button.pending": "в очікуванні", "contextualhelp.help": "Довідка", "contextualhelp.info": "Інформація", diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index cbceb43c460..9f0ec5c7c78 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -120,7 +120,7 @@ "postpack": "git checkout -- package.json" }, "devDependencies": { - "@adobe/spectrum-tokens": "^13.0.0-beta.48", + "@adobe/spectrum-tokens": "^13.0.0-beta.53", "@parcel/macros": "2.12.1-canary.3165", "@react-aria/test-utils": "1.0.0-alpha.1" }, diff --git a/packages/@react-spectrum/s2/src/Meter.tsx b/packages/@react-spectrum/s2/src/Meter.tsx index 93ecee6bda3..30aa1e2ad9a 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, LabelPosition} from '@react-types/shared'; import {FieldLabel} from './Field'; import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; -import {size, style} from '../style' with {type: 'macro'}; +import {lightDark, size, style} from '../style' with {type: 'macro'}; import {SkeletonWrapper} from './Skeleton'; import {Text} from './Content'; import {useDOMRef} from '@react-spectrum/utils'; @@ -37,8 +37,8 @@ interface MeterStyleProps { * @default 'M' */ size?: 'S' | 'M' | 'L' | 'XL', - /** - * The static color style to apply. Useful when the button appears over a color background. + /** + * The static color style to apply. Useful when the button appears over a color background. */ staticColor?: 'white' | 'black', /** @@ -82,11 +82,11 @@ const fillStyles = style({ borderStyle: 'none', borderRadius: 'full', backgroundColor: { - default: 'informative-visual', + default: lightDark('informative-800', 'informative-900'), // 'informative-visual', variant: { - positive: 'positive-visual', - notice: 'notice-visual', - negative: 'negative-visual' + positive: lightDark('positive-800', 'positive-900'), // 'positive-visual', + notice: lightDark('notice-800', 'notice-900'), // 'notice-visual', + negative: lightDark('negative-800', 'negative-900') // 'negative-visual' }, staticColor: { white: { diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts index 7ce4da05ae7..9a18396baba 100644 --- a/packages/@react-spectrum/s2/style/spectrum-theme.ts +++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts @@ -451,7 +451,6 @@ export const style = createTheme({ isPressed: colorToken('neutral-subdued-content-color-down') // isSelected: colorToken('neutral-subdued-content-color-selected'), }, - 'neutral-visual': weirdColorToken('neutral-visual-color'), negative: { default: colorToken('negative-content-color-default'), isHovered: colorToken('negative-content-color-hover'), @@ -496,7 +495,6 @@ export const style = createTheme({ isFocusVisible: weirdColorToken('negative-background-color-key-focus'), isPressed: weirdColorToken('negative-background-color-down') }, - 'negative-visual': weirdColorToken('negative-visual-color'), 'negative-subtle': weirdColorToken('negative-subtle-background-color-default'), informative: { default: weirdColorToken('informative-background-color-default'), @@ -504,7 +502,6 @@ export const style = createTheme({ isFocusVisible: weirdColorToken('informative-background-color-key-focus'), isPressed: weirdColorToken('informative-background-color-down') }, - 'informative-visual': weirdColorToken('informative-visual-color'), 'informative-subtle': weirdColorToken('informative-subtle-background-color-default'), positive: { default: weirdColorToken('positive-background-color-default'), @@ -512,10 +509,8 @@ export const style = createTheme({ isFocusVisible: weirdColorToken('positive-background-color-key-focus'), isPressed: weirdColorToken('positive-background-color-down') }, - 'positive-visual': weirdColorToken('positive-visual-color'), 'positive-subtle': weirdColorToken('positive-subtle-background-color-default'), notice: weirdColorToken('notice-background-color-default'), - 'notice-visual': weirdColorToken('notice-visual-color'), 'notice-subtle': weirdColorToken('notice-subtle-background-color-default'), gray: weirdColorToken('gray-background-color-default'), 'gray-subtle': weirdColorToken('gray-subtle-background-color-default'), diff --git a/packages/@react-spectrum/style-macro-s1/src/style-macro.ts b/packages/@react-spectrum/style-macro-s1/src/style-macro.ts index a1b884e5e3e..d72252cf335 100644 --- a/packages/@react-spectrum/style-macro-s1/src/style-macro.ts +++ b/packages/@react-spectrum/style-macro-s1/src/style-macro.ts @@ -11,6 +11,9 @@ */ import type {Condition, CSSProperties, CSSValue, CustomValue, PropertyFunction, PropertyValueDefinition, PropertyValueMap, StyleFunction, StyleValue, Theme, ThemeProperties, Value} from './types'; +// Prefix Spectrum 1 style macro classes to avoid name collisions with S2 style macro. +const PREFIX = 's1-'; + export function createArbitraryProperty(fn: (value: T, property: string) => CSSProperties): PropertyFunction { return (value, property) => { let selector = Array.isArray(value) ? value.map(v => generateArbitraryValueSelector(String(v))).join('') : generateArbitraryValueSelector(String(value)); @@ -67,11 +70,11 @@ function mapConditionalValue(value: PropertyValueDefinition, fn: (value } } -function createValueLookup(values: Array, atStart = false) { +function createValueLookup(values: Array) { let map = new Map(); for (let value of values) { if (!map.has(value)) { - map.set(value, generateName(map.size, atStart)); + map.set(value, `${PREFIX}${generateName(map.size)}`); } } return map; @@ -91,8 +94,8 @@ interface MacroContext { } export function createTheme(theme: T): StyleFunction, 'default' | Extract> { - let themePropertyMap = createValueLookup(Object.keys(theme.properties), true); - let themeConditionMap = createValueLookup(Object.keys(theme.conditions), true); + let themePropertyMap = createValueLookup(Object.keys(theme.properties)); + let themeConditionMap = createValueLookup(Object.keys(theme.conditions)); let propertyFunctions = new Map(Object.entries(theme.properties).map(([k, v]) => { if (typeof v === 'function') { return [k, v]; @@ -159,7 +162,7 @@ export function createTheme(theme: T): StyleFunction(theme: T): StyleFunction ({prelude: rule.prelude, body: [{...rule, prelude: '&' + prelude}], condition: ''})), condition: '' }]; @@ -277,7 +280,7 @@ export function createTheme(theme: T): StyleFunction