@react-types/shared 3.0.0-nightly.1839 → 3.0.0-nightly.1847

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-types/shared",
-  "version": "3.0.0-nightly.1839+86367a392",
+  "version": "3.0.0-nightly.1847+3f7bb5095",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "types": "src/index.d.ts",
@@ -14,5 +14,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "86367a392284544e160eb489cd9019eac73a6738"
+  "gitHead": "3f7bb509509cf7236633731202ccde8906b560ac"
 }

package/src/dna.d.ts

@@ -32,7 +32,9 @@ export type DimensionValue =
   | 'size-200'
   | 'size-225'
   | 'size-250'
+  | 'size-275'
   | 'size-300'
+  | 'size-325'
   | 'size-350'
   | 'size-400'
   | 'size-450'
@@ -235,13 +237,211 @@ export type ColorValue =
   | 'static-seafoam-500'
   | 'static-seafoam-600'
   | 'static-seafoam-700'
+  | SemanticColorValue;
+
+export type ColorValueV6 =
+  | 'gray-50'
+  | 'gray-75'
+  | 'gray-100'
+  | 'gray-200'
+  | 'gray-300'
+  | 'gray-400'
+  | 'gray-500'
+  | 'gray-600'
+  | 'gray-700'
+  | 'gray-800'
+  | 'gray-900'
+  | 'red-100'
+  | 'red-200'
+  | 'red-300'
+  | 'red-400'
+  | 'red-500'
+  | 'red-600'
+  | 'red-700'
+  | 'red-800'
+  | 'red-900'
+  | 'red-1000'
+  | 'red-1100'
+  | 'red-1200'
+  | 'red-1300'
+  | 'red-1400'
+  | 'orange-100'
+  | 'orange-200'
+  | 'orange-300'
+  | 'orange-400'
+  | 'orange-500'
+  | 'orange-600'
+  | 'orange-700'
+  | 'orange-800'
+  | 'orange-900'
+  | 'orange-1000'
+  | 'orange-1100'
+  | 'orange-1200'
+  | 'orange-1300'
+  | 'orange-1400'
+  | 'yellow-100'
+  | 'yellow-200'
+  | 'yellow-300'
+  | 'yellow-400'
+  | 'yellow-500'
+  | 'yellow-600'
+  | 'yellow-700'
+  | 'yellow-800'
+  | 'yellow-900'
+  | 'yellow-1000'
+  | 'yellow-1100'
+  | 'yellow-1200'
+  | 'yellow-1300'
+  | 'yellow-1400'
+  | 'chartreuse-100'
+  | 'chartreuse-200'
+  | 'chartreuse-300'
+  | 'chartreuse-400'
+  | 'chartreuse-500'
+  | 'chartreuse-600'
+  | 'chartreuse-700'
+  | 'chartreuse-800'
+  | 'chartreuse-900'
+  | 'chartreuse-1000'
+  | 'chartreuse-1100'
+  | 'chartreuse-1200'
+  | 'chartreuse-1300'
+  | 'chartreuse-1400'
+  | 'celery-100'
+  | 'celery-200'
+  | 'celery-300'
+  | 'celery-400'
+  | 'celery-500'
+  | 'celery-600'
+  | 'celery-700'
+  | 'celery-800'
+  | 'celery-900'
+  | 'celery-1000'
+  | 'celery-1100'
+  | 'celery-1200'
+  | 'celery-1300'
+  | 'celery-1400'
+  | 'green-100'
+  | 'green-200'
+  | 'green-300'
+  | 'green-400'
+  | 'green-500'
+  | 'green-600'
+  | 'green-700'
+  | 'green-800'
+  | 'green-900'
+  | 'green-1000'
+  | 'green-1100'
+  | 'green-1200'
+  | 'green-1300'
+  | 'green-1400'
+  | 'seafoam-100'
+  | 'seafoam-200'
+  | 'seafoam-300'
+  | 'seafoam-400'
+  | 'seafoam-500'
+  | 'seafoam-600'
+  | 'seafoam-700'
+  | 'seafoam-800'
+  | 'seafoam-900'
+  | 'seafoam-1000'
+  | 'seafoam-1100'
+  | 'seafoam-1200'
+  | 'seafoam-1300'
+  | 'seafoam-1400'
+  | 'cyan-100'
+  | 'cyan-200'
+  | 'cyan-300'
+  | 'cyan-400'
+  | 'cyan-500'
+  | 'cyan-600'
+  | 'cyan-700'
+  | 'cyan-800'
+  | 'cyan-900'
+  | 'cyan-1000'
+  | 'cyan-1100'
+  | 'cyan-1200'
+  | 'cyan-1300'
+  | 'cyan-1400'
+  | 'blue-100'
+  | 'blue-200'
+  | 'blue-300'
+  | 'blue-400'
+  | 'blue-500'
+  | 'blue-600'
+  | 'blue-700'
+  | 'blue-800'
+  | 'blue-900'
+  | 'blue-1000'
+  | 'blue-1100'
+  | 'blue-1200'
+  | 'blue-1300'
+  | 'blue-1400'
+  | 'indigo-100'
+  | 'indigo-200'
+  | 'indigo-300'
+  | 'indigo-400'
+  | 'indigo-500'
+  | 'indigo-600'
+  | 'indigo-700'
+  | 'indigo-800'
+  | 'indigo-900'
+  | 'indigo-1000'
+  | 'indigo-1100'
+  | 'indigo-1200'
+  | 'indigo-1300'
+  | 'indigo-1400'
+  | 'purple-100'
+  | 'purple-200'
+  | 'purple-300'
+  | 'purple-400'
+  | 'purple-500'
+  | 'purple-600'
+  | 'purple-700'
+  | 'purple-800'
+  | 'purple-900'
+  | 'purple-1000'
+  | 'purple-1100'
+  | 'purple-1200'
+  | 'purple-1300'
+  | 'purple-1400'
+  | 'fuchsia-100'
+  | 'fuchsia-200'
+  | 'fuchsia-300'
+  | 'fuchsia-400'
+  | 'fuchsia-500'
+  | 'fuchsia-600'
+  | 'fuchsia-700'
+  | 'fuchsia-800'
+  | 'fuchsia-900'
+  | 'fuchsia-1000'
+  | 'fuchsia-1100'
+  | 'fuchsia-1200'
+  | 'fuchsia-1300'
+  | 'fuchsia-1400'
+  | 'magenta-100'
+  | 'magenta-200'
+  | 'magenta-300'
+  | 'magenta-400'
+  | 'magenta-500'
+  | 'magenta-600'
+  | 'magenta-700'
+  | 'magenta-800'
+  | 'magenta-900'
+  | 'magenta-1000'
+  | 'magenta-1100'
+  | 'magenta-1200'
+  | 'magenta-1300'
+  | 'magenta-1400'
+  | SemanticColorValue;
+
+type SemanticColorValue =
   | 'negative'
   | 'notice'
   | 'positive'
   | 'informative';
 
-export type BorderColorValue =
-  | 'default'
+type BorderColorAlias =
   | 'negative'
   | 'notice'
   | 'positive'
@@ -257,14 +457,13 @@ export type BorderColorValue =
   | 'dark'
   | 'transparent'
   | 'translucent-dark'
-  | 'translucent-darker'
-  | ColorValue;
+  | 'translucent-darker';
 
-export type BackgroundColorValue =
+type BackgroundColorAlias =
   | 'default'
+  | 'disabled'
   | 'transparent'
-  | 'label-gray'
-  | ColorValue;
+  | 'label-gray';
 
 export type IconColorValue =
   | 'negative'
@@ -284,3 +483,20 @@ export type BorderRadiusValue =
   | 'regular'
   | 'medium'
   | 'large';
+
+export type BorderColorValue =
+  | 'default'
+  | BorderColorAlias
+  | ColorValue;
+
+export type BorderColorValueV6 =
+  | BorderColorAlias
+  | ColorValueV6;
+
+export type BackgroundColorValue =
+  | BackgroundColorAlias
+  | ColorValue;
+
+export type BackgroundColorValueV6 =
+  | BackgroundColorAlias
+  | ColorValueV6;

package/src/style.d.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderSizeValue, DimensionValue} from './dna';
+import {BackgroundColorValue, BackgroundColorValueV6, BorderColorValue, BorderColorValueV6, BorderRadiusValue, BorderSizeValue, DimensionValue} from './dna';
 import {CSSProperties} from 'react';
 
 type ResponsiveProp<T> = {
@@ -112,11 +112,28 @@ export interface StyleProps {
   isHidden?: Responsive<boolean>
 }
 
+export type ColorVersion = 5 | 6;
+type BackgroundColor = {
+  5: BackgroundColorValue,
+  6: BackgroundColorValueV6
+};
+
+type BorderColor = {
+  5: BorderColorValue,
+  6: BorderColorValueV6
+}
+
 // These support more properties than specific Spectrum components
 // but still based on spectrum global/alias variables.
-export interface ViewStyleProps extends StyleProps {
+export interface ViewStyleProps<C extends ColorVersion> extends StyleProps {
+  /**
+   * The Spectrum color token version number.
+   * @default 5
+   */
+  colorVersion?: C,
+
   /** The background color for the element. */
-  backgroundColor?: Responsive<BackgroundColorValue>,
+  backgroundColor?: Responsive<BackgroundColor[C]>,
 
   /** The width of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
   borderWidth?: Responsive<BorderSizeValue>,
@@ -136,21 +153,21 @@ export interface ViewStyleProps extends StyleProps {
   borderYWidth?: Responsive<BorderSizeValue>,
 
   /** The color of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
-  borderColor?: Responsive<BorderColorValue>,
+  borderColor?: Responsive<BorderColor[C]>,
   /** The color of the border on the logical start side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color). */
-  borderStartColor?: Responsive<BorderColorValue>,
+  borderStartColor?: Responsive<BorderColor[C]>,
   /** The color of the border on the logical end side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color). */
-  borderEndColor?: Responsive<BorderColorValue>,
+  borderEndColor?: Responsive<BorderColor[C]>,
   // borderLeftColor?: BorderColorValue,
   // borderRightColor?: BorderColorValue,
   /** The color of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color). */
-  borderTopColor?: Responsive<BorderColorValue>,
+  borderTopColor?: Responsive<BorderColor[C]>,
   /** The color of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color). */
-  borderBottomColor?: Responsive<BorderColorValue>,
+  borderBottomColor?: Responsive<BorderColor[C]>,
   /** The color of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
-  borderXColor?: Responsive<BorderColorValue>,
+  borderXColor?: Responsive<BorderColor[C]>,
   /** The color of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
-  borderYColor?: Responsive<BorderColorValue>,
+  borderYColor?: Responsive<BorderColor[C]>,
 
   /** The border radius on all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius). */
   borderRadius?: Responsive<BorderRadiusValue>,