Merge pull request #82 from React/css-refactor

Remove dependencies on coralui-core and spectrum-abstract-stylus

packages/react-spectrum/.npmrc

@@ -1,8 +1,5 @@
-@coralui:registry=https://artifactory.corp.adobe.com:443/artifactory/api/npm/npm-coralui-release/
-//artifactory.corp.adobe.com:443/artifactory/api/npm/npm-coralui-release/:always-auth=false
-
-@spectrum:registry=https://artifactory.corp.adobe.com:443/artifactory/api/npm/npm-spectrum-snapshot/
-//artifactory.corp.adobe.com:443/artifactory/api/npm/npm-spectrum-snapshot/:always-auth=false
+@spectrum:registry=https://artifactory.corp.adobe.com:443/artifactory/api/npm/npm-spectrum-release/
+//artifactory.corp.adobe.com:443/artifactory/api/npm/npm-spectrum-release/:always-auth=false
 
 @react:registry=https://artifactory.corp.adobe.com:443/artifactory/api/npm/npm-react-release/
 //artifactory.corp.adobe.com:443/artifactory/api/npm/npm-react-release/:always-auth=false

packages/react-spectrum/README.md

@@ -7,7 +7,7 @@
 react-spectrum is a fork of the [react-coral](http://git.corp.adobe.com/React/react-coral) project, updated for
 the new [Spectrum](http://spectrum.corp.adobe.com) design language. The styles were originally from
 [coralui-theme-spectrum](http://git.corp.adobe.com/Coral/coralui-theme-spectrum), however most of the underlying styles
-now live in [spectrum-abstract-stylus](http://git.corp.adobe.com/Spectrum/spectrum-abstract-stylus).
+now live in [spectrum-css](http://git.corp.adobe.com/Spectrum/spectrum-css).
 
 Since react-spectrum has a different DOM structure in some cases from CoralUI, it made sense to bring in the styles so we
 can adjust the selectors as necessary. We also wanted to take advantage of some modern JavaScript tooling

packages/react-spectrum/package.json

@@ -26,13 +26,12 @@
     "stringify": "^5.1.0"
   },
   "devDependencies": {
-    "@coralui/coralui-core": "^4.4.0",
     "@kadira/react-storybook-addon-info": "^3.2.4",
     "@kadira/storybook": "^2.24.1",
     "@kadira/storybook-addon-knobs": "^1.3.3",
-    "@spectrum/spectrum-abstract-stylus": "0.2.8",
     "@spectrum/spectrum-css": "2.0.0-beta.48",
-    "@spectrum/spectrum-flexbox-grid": "1.0.2",
+    "@spectrum/spectrum-flexbox-grid": "1.1.1",
+    "@spectrum/spectrum-variables": "1.0.1",
     "babel": "^6.5.2",
     "babel-cli": "^6.16.0",
     "babel-core": "^6.17.0",
@@ -65,6 +64,7 @@
     "mocha": "^3.1.2",
     "mocha-junit-reporter": "^1.14.0",
     "nib": "^1.1.2",
+    "normalize.css": "^7.0.0",
     "nyc": "^10.2.0",
     "react": "^15.3.2",
     "react-addons-test-utils": "^15.3.2",

packages/react-spectrum/src/Clock/style/index.styl

@@ -15,15 +15,15 @@
  * from Adobe Systems Incorporated.
  */
 
- @require '../../commons';
+@import '@spectrum/spectrum-variables/stylus/spectrum-dark.styl'
 
-$clock-period-width = 100*$px;
-$clock-gap-width = 16*$px;
+$clock-period-width = 100px;
+$clock-gap-width = 16px;
 
 .react-spectrum-Clock {
   display: inline-table;
   vertical-align: top;
-  width: $spectrum-component-single-line-width;
+  width: $spectrum-alias-single-line-width;
 }
 
 .react-spectrum-Clock-minute,
@@ -35,7 +35,7 @@ $clock-gap-width = 16*$px;
 
 .react-spectrum-Clock-divider {
   display: table-cell;
-  line-height: $spectrum-component-single-line-height;
+  line-height: $spectrum-alias-single-line-height;
   font-size: $clock-gap-width;
   vertical-align: middle;
   text-align: center;

packages/react-spectrum/src/Datepicker/style/index.styl

@@ -15,12 +15,10 @@
  * from Adobe Systems Incorporated.
  */
 
-@require '../../commons'
-
 .react-spectrum-Datepicker-clockContainer {
   box-sizing: border-box;
 
-  padding: 10*$px;
+  padding: 10px;
 }
 
 .react-spectrum-Datepicker-clockContainer > .react-spectrum-Clock {

packages/react-spectrum/src/Icon/style/index.styl

@@ -16,16 +16,16 @@
  */
 /*! icon.styl */
 
-@require '../../commons'
+@import '@spectrum/spectrum-variables/stylus/spectrum-light.styl';
 
 // Icons size
-$icon-xxsmall-size = 9*$px;
-$icon-xsmall-size = 12*$px;
-$icon-small-size = 18*$px;
-$icon-medium-size = 24*$px;
-$icon-large-size = 36*$px;
-$icon-xlarge-size = 48*$px;
-$icon-xxlarge-size = 72*$px;
+$icon-xxsmall-size = 9px;
+$icon-xsmall-size = 12px;
+$icon-small-size = 18px;
+$icon-medium-size = 24px;
+$icon-large-size = 36px;
+$icon-xlarge-size = 48px;
+$icon-xxlarge-size = 72px;
 
 .coral-Icon {
   display: inline-block;
@@ -38,7 +38,7 @@ $icon-xxlarge-size = 72*$px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  transition: color $spectrum-transition-time ease-in-out, opacity $spectrum-transition-time ease-in-out;
+  transition: color $spectrum-global-animation-transition-time ease-in-out, opacity $spectrum-global-animation-transition-time ease-in-out;
 
   opacity: 0.80;
 

packages/react-spectrum/src/InlineEditor/style/index.styl

@@ -1,14 +1,14 @@
-@import '../../commons'
+@import '@spectrum/spectrum-variables/stylus/spectrum-light.styl';
 
 .react-spectrum-InlineEditor {
   width: 100%;
-  height: $spectrum-component-single-line-height;
+  height: $spectrum-alias-single-line-height;
 
   &.react-spectrum-InlineEditor-label {
     display: inline-block;
-    line-height: $spectrum-component-single-line-height;
-    text-indent: $spectrum-padding;
-    padding-left: 1*$px;
+    line-height: $spectrum-alias-single-line-height;
+    text-indent: $spectrum-global-layout-size-150;
+    padding-left: 1px;
     vertical-align: middle;
   }
 }

packages/react-spectrum/src/List/style/index.styl

@@ -4,11 +4,9 @@
 @import '@spectrum/spectrum-css/dist/components/list/multiStops/dark.css';
 @import '@spectrum/spectrum-css/dist/components/list/multiStops/darkest.css';
 
-@require '../../commons'
-
 .react-spectrum-List-option-icon {
-  width: 18*$px;
-  margin-right: 7*$px;
+  width: 18px;
+  margin-right: 7px;
   text-align: center;
 }
 

packages/react-spectrum/src/Shell/js/ShellHelp.js

@@ -89,8 +89,8 @@ export default class ShellHelp extends Component {
           : <div className="coral3-Shell-help-resultMessage">
             <div className="coral3-Shell-help-resultMessage-container">
               <div className="coral-Heading--1 coral3-Shell-help-resultMessage-heading">
-                  No results found
-                </div>
+                No results found
+              </div>
             </div>
           </div>
         }
@@ -161,8 +161,8 @@ export default class ShellHelp extends Component {
             ? <div className="coral3-Shell-help-loading">
               <Wait className="coral3-Shell-help-loading-wait" />
               <span className="coral-Heading--2 coral3-Shell-help-loading-info">
-                  Searching Help...
-                </span>
+                Searching Help...
+              </span>
             </div>
             : this.renderResults()
           }

packages/react-spectrum/src/Shell/style/Shell.styl

@@ -1,6 +1,4 @@
-@require '../../commons'
-
-$coral-shell-header-height = 52*$px;
+$coral-shell-header-height = 52px;
 
 .coral3-Shell {
   position: absolute;

packages/react-spectrum/src/Shell/style/ShellHeader.styl

@@ -1,25 +1,24 @@
-@import '@spectrum/spectrum-abstract-stylus/dist/spectrum-origins/spectrum-dark.styl'
-@require '../../commons'
+@import '@spectrum/spectrum-variables/stylus/spectrum-dark.styl'
 @require './Shell'
 
 /* Note: $coral-shell-header-height is defined in styles/coralui-component-shell */
 
-$coral-shell-header-padding-leftright = 8*$px;
-$coral-shell-header-padding-topbottom = ($coral-shell-header-height - $spectrum-component-single-line-height) * 0.5;
+$coral-shell-header-padding-leftright = 8px;
+$coral-shell-header-padding-topbottom = ($coral-shell-header-height - $spectrum-alias-single-line-height) * 0.5;
 $coral-shell-header-area = $coral-shell-header-height - $coral-shell-header-padding-topbottom;
 
-$coral-shell-header-background-color = $spectrum-global-color-grey1;
-$coral-shell-header-background-disabled-color = $spectrum-global-color-grey5;
+$coral-shell-header-background-color = $spectrum-global-color-grey50;
+$coral-shell-header-background-disabled-color = $spectrum-global-color-grey300;
 
-$coral-shell-header-action-text-size = 12*$px;
+$coral-shell-header-action-text-size = 12px;
 
-$coral-shell-homeanchor-margin-right = 52*$px;
-$coral-shell-homeanchor-icon-margin = 10*$px;
+$coral-shell-homeanchor-margin-right = 52px;
+$coral-shell-homeanchor-icon-margin = 10px;
 
-$coral-shell-homeanchor-text-size = 14*$px;
-$coral-shell-homeanchor-color = $spectrum-global-color-grey8;
-$coral-shell-homeanchor-hover-color = $spectrum-global-color-grey10;
-$coral-shell-homeanchor-focus-color = $spectrum-global-color-grey10;
+$coral-shell-homeanchor-text-size = 14px;
+$coral-shell-homeanchor-color = $spectrum-global-color-grey700;
+$coral-shell-homeanchor-hover-color = $spectrum-global-color-grey500;
+$coral-shell-homeanchor-focus-color = $spectrum-global-color-grey500;
 
 .coral3-Shell-header {
   z-index: 10020;
@@ -74,7 +73,7 @@ $coral-shell-homeanchor-focus-color = $spectrum-global-color-grey10;
 
 .coral3-Shell-header-actions {
   float: right;
-  margin-left: 15*$px;
+  margin-left: 15px;
 
   .coral3-Shell-menu-button {
     font-size: $coral-shell-header-action-text-size;
@@ -100,13 +99,13 @@ $coral-shell-homeanchor-focus-color = $spectrum-global-color-grey10;
   transition: color .15s ease-out;
 
   margin: 0;
-  padding: 0 8*$px;
+  padding: 0 8px;
 
   text-decoration: none;
   text-align: center;
 
   font-size: $coral-shell-homeanchor-text-size;
-  line-height: $spectrum-component-single-line-height;
+  line-height: $spectrum-alias-single-line-height;
 
   color: $coral-shell-homeanchor-color;
 

packages/react-spectrum/src/Shell/style/ShellHelp.styl

@@ -1,12 +1,11 @@
-@import '@spectrum/spectrum-abstract-stylus/dist/spectrum-origins/spectrum-dark.styl'
-@require '../../commons'
+@import '@spectrum/spectrum-variables/stylus/spectrum-dark.styl'
 
-$coral-shell-help-width = 325*$px;
-$coral-shell-help-loading-height = 300*$px
-$coral-shell-help-background = $spectrum-global-color-grey1;
+$coral-shell-help-width = 325px;
+$coral-shell-help-loading-height = 300px
+$coral-shell-help-background = $spectrum-global-color-grey50;
 
 $coral-shell-loading-middle = 48%; // Better visual centering
-$coral-shell-loading-spacing = 16*$px;
+$coral-shell-loading-spacing = 16px;
 
 .coral3-Shell-help {
   display: block;
@@ -18,7 +17,7 @@ $coral-shell-loading-spacing = 16*$px;
 
   .spectrum-Search-input {
     width: 100%;
-    border-width: 0 0 $px 0;
+    border-width: 0 0 1px 0;
 
     &:focus {
       box-shadow: none;
@@ -27,7 +26,7 @@ $coral-shell-loading-spacing = 16*$px;
 }
 
 .coral3-Shell-help-result-description {
-  color: $spectrum-body-secondary-text-color-default;
+  color: $spectrum-global-color-grey700;
   font-weight: 300;
   letter-spacing: 0.125px; // Tweak: Letters were too close
 
@@ -47,7 +46,7 @@ $coral-shell-loading-spacing = 16*$px;
 .coral3-Shell-help-allResults {
   &, .coral3-Shell-help-result-content {
     // Just look like a link
-    color: $spectrum-link-text-color-default;
+    color: $spectrum-global-color-blue600;
   }
 }
 
@@ -57,14 +56,14 @@ $coral-shell-loading-spacing = 16*$px;
 }
 
 .coral3-Shell-help-resultMessage-heading {
-  margin-bottom: 12*$px;
-  margin-top: -8*$px;
+  margin-bottom: 12px;
+  margin-top: -8px;
 }
 
 .coral3-Shell-help-resultMessage-container {
   display: table-cell;
 
-  padding: 0 20*$px;
+  padding: 0 20px;
 
   vertical-align: middle;
 
@@ -76,7 +75,7 @@ $coral-shell-loading-spacing = 16*$px;
   bottom: (100% - $coral-shell-loading-middle);
   left: 50%;
 
-  margin-left: -8*$px; // Center
+  margin-left: -8px; // Center
   margin-bottom: ($coral-shell-loading-spacing / 2);
 }
 
@@ -86,7 +85,7 @@ $coral-shell-loading-spacing = 16*$px;
   left: 0;
   right: 0;
 
-  padding-left: 5*$px; // Tweak: Make it look nicer with the ellipsis
+  padding-left: 5px; // Tweak: Make it look nicer with the ellipsis
 
   display: block;
   padding-top: ($coral-shell-loading-spacing / 2);