Component css packages

.eslintignore

@@ -1,4 +1,5 @@
 packages/@spectrum-icons/color/**
 packages/@spectrum-icons/ui/**
 packages/@spectrum-icons/workflow/**
+packages/@adobe/spectrum-css/**
 node_modules

.eslintrc.js

@@ -246,7 +246,7 @@ module.exports = {
       ERROR,
       {
         ignore: [
-          '@adobe/spectrum-css-temp',
+          '@adobe/spectrum-css',
           '@react/react-spectrum',
           '@spectrum-icons/ui',
           '@spectrum-icons/workflow'

.gitignore

@@ -17,3 +17,4 @@ storybook-static
 
 #allow
 !.storybook-v3/lib
+!packages/**/dist

.storybook-v3/constants.js

@@ -1,9 +1,15 @@
-import themeLight from '@adobe/spectrum-css-temp/vars/spectrum-light-unique.css';
-import themeLightest from '@adobe/spectrum-css-temp/vars/spectrum-lightest-unique.css';
-import themeDark from '@adobe/spectrum-css-temp/vars/spectrum-dark-unique.css';
-import themeDarkest from '@adobe/spectrum-css-temp/vars/spectrum-darkest-unique.css';
-import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium-unique.css';
-import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large-unique.css';
+// eslint-disable-next-line monorepo/no-internal-import
+import themeLight from '@adobe/spectrum-css/dist/vars/spectrum-light-unique.css';
+// eslint-disable-next-line monorepo/no-internal-import
+import themeLightest from '@adobe/spectrum-css/dist/vars/spectrum-lightest-unique.css';
+// eslint-disable-next-line monorepo/no-internal-import
+import themeDark from '@adobe/spectrum-css/dist/vars/spectrum-dark-unique.css';
+// eslint-disable-next-line monorepo/no-internal-import
+import themeDarkest from '@adobe/spectrum-css/dist/vars/spectrum-darkest-unique.css';
+// eslint-disable-next-line monorepo/no-internal-import
+import scaleMedium from '@adobe/spectrum-css/dist/vars/spectrum-medium-unique.css';
+// eslint-disable-next-line monorepo/no-internal-import
+import scaleLarge from '@adobe/spectrum-css/dist/vars/spectrum-large-unique.css';
 
 const THEME = {
   light: themeLight,

.storybook-v3/custom-addons/chromatic/index.js

@@ -1,9 +1,9 @@
-import React, {useEffect, useState} from 'react';
-import addons, { makeDecorator } from '@storybook/addons';
-import {getQueryParams} from '@storybook/client-api';
+import React from 'react';
+import { makeDecorator } from '@storybook/addons';
 import {Provider} from '@react-spectrum/provider';
 import Heading from '@react/react-spectrum/Heading';
 import {themes, scales, locales} from '../../constants';
+import './styles.css';
 
 export const withChromaticProvider = makeDecorator({
   name: 'withChromaticProvider',
@@ -16,8 +16,8 @@ export const withChromaticProvider = makeDecorator({
     return (
       <div style={{height}}>
         {(options.colorSchemes || Object.keys(themes)).map(colorScheme =>
-          (options.scales || Object.keys(scales)).map(scale => 
-            (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale => 
+          (options.scales || Object.keys(scales)).map(scale =>
+            (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
               <Provider key={`${colorScheme}_${scale}_${locale}`} theme={themes[colorScheme]} colorScheme={colorScheme.replace(/est$/, '')} scale={scale} locale={locale} typekitId="pbi5ojv">
                 <Heading variant="subtitle3" style={{margin: 0, padding: '10px'}}>{`${colorScheme}, ${scale}, ${locale}`}</Heading>
                 {getStory(context)}

.storybook-v3/custom-addons/chromatic/styles.css

@@ -0,0 +1,3 @@
+* {
+  transition-property: none !important;
+}

.storybook-v3/lib/vars.js

@@ -56,7 +56,7 @@ function getUniqueVars(vars) {
 function getVariableMappings(themes) {
   let themeVars = {};
   for (let theme of themes) {
-    let values = getVars(`packages/@adobe/spectrum-css-temp/vars/spectrum-${theme}.css`);
+    let values = getVars(require.resolve(`@adobe/spectrum-css/dist/vars/spectrum-${theme}-unique.css`));
     let mappings = getUniqueVars(values);
     themeVars[theme] = {values, mappings};
   }
@@ -110,9 +110,9 @@ function getVariableMappings(themes) {
   return {mapping, vars, static};
 }
 
-let themes = getVariableMappings(['dark', 'darkest', 'light', 'lightest', 'middark', 'midlight']);
+let themes = getVariableMappings(['dark', 'darkest', 'light', 'lightest']);
 let scales = getVariableMappings(['large', 'medium']);
-let globals = getVars('packages/@adobe/spectrum-css-temp/vars/spectrum-global.css');
+let globals = getVars(require.resolve('@adobe/spectrum-css/dist/vars/spectrum-global-unique.css'));
 
 exports.themes = themes.vars;
 exports.scales = scales.vars;

.storybook-v3/webpack.config.js

@@ -68,7 +68,7 @@ module.exports = ({config}, env) => {
           include: path.resolve(__dirname, '../')
         },
         {
-          test: /packages\/.*\.css$/,
+          test: [/packages\/.*\.css$/, /@spectrum-css\/.*\.css$/, /@adobe\/spectrum-css\/.*\.css$/],
           use: [
             'style-loader',
             {
@@ -95,7 +95,7 @@ module.exports = ({config}, env) => {
           test: /\.css$/,
           loaders: ['style-loader', 'css-loader'],
           include: path.resolve(__dirname, '../'),
-          exclude: /packages\/.*\.css$/
+          exclude: [/packages\/.*\.css$/, /@spectrum-css\/.*\.css$/, /@adobe\/spectrum-css\/.*\.css$/]
         },
         {
           test: /\.(ttf|woff|woff2|svg|gif|cur|eot|png|jpg)(\?[a-f0-9]{32})?$/,

package.json

@@ -21,11 +21,13 @@
     "chromatic": "CHROMATIC_APP_CODE=k5oflhpwx98 chromatic test --build-script-name build-storybook"
   },
   "workspaces": [
-    "packages/*/*"
+    "packages/*/*",
+    "packages/*/*/*"
   ],
   "devDependencies": {
     "@actions/core": "^1.1.0",
     "@actions/github": "^1.1.0",
+    "@adobe/spectrum-css": "^2.14.0",
     "@babel/cli": "^7.0.0",
     "@babel/core": "^7.0.0",
     "@babel/node": "^7.4.5",