feat(colors): add colors from elements

carbon-design-system · Feb 13, 2019 · 598291e · 598291e
1 parent 48d64c0
commit 598291e
Show file tree

Hide file tree

Showing 15 changed files with 365 additions and 80 deletions.
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -202,12 +202,12 @@
 
   .#{$prefix}--btn--secondary {
     @include button-theme--x(
-      $ibm-colors__gray-80,
-      $ibm-colors__gray-80,
+      $ibm-color__gray-80,
+      $ibm-color__gray-80,
       $inverse-01,
-      $ibm-colors__gray-70,
+      $ibm-color__gray-70,
       $inverse-01,
-      $ibm-colors__gray-60
+      $ibm-color__gray-60
     );
 
     &:hover,
@@ -245,17 +245,17 @@
       transparent,
       transparent,
       $interactive-03,
-      $ibm-colors__gray-10,
+      $ibm-color__gray-10,
       $interactive-03,
-      $ibm-colors__blue-70
+      $ibm-color__blue-70
     );
 
     &:hover,
     &:active {
-      color: $ibm-colors__blue-70;
+      color: $ibm-color__blue-70;
 
       .#{$prefix}--btn__icon {
-        fill: $ibm-colors__blue-70;
+        fill: $ibm-color__blue-70;
       }
     }
 
@@ -281,7 +281,7 @@
   }
 
   .#{$prefix}--btn--danger {
-    @include button-theme--x(transparent, $support-01, $support-01, $support-01, $support-01, $ibm-colors__red-80);
+    @include button-theme--x(transparent, $support-01, $support-01, $support-01, $support-01, $ibm-color__red-80);
 
     &:hover {
       color: $inverse-01;
@@ -294,7 +294,7 @@
   }
 
   .#{$prefix}--btn--danger--primary {
-    @include button-theme--x($support-01, transparent, $inverse-01, #ba1b23, $ui-01, $ibm-colors__red-80);
+    @include button-theme--x($support-01, transparent, $inverse-01, #ba1b23, $ui-01, $ibm-color__red-80);
 
     &:hover:disabled,
     &:focus:disabled {

diff --git a/src/components/button/_mixins.scss b/src/components/button/_mixins.scss
@@ -97,8 +97,8 @@
   &:disabled {
     cursor: not-allowed;
     color: $ui-04;
-    background: $ibm-colors__gray-30;
-    border-color: $ibm-colors__gray-30;
+    background: $ibm-color__gray-30;
+    border-color: $ibm-color__gray-30;
   }
 
   .#{$prefix}--btn__icon {
@@ -160,8 +160,8 @@
   &:disabled:hover,
   &:disabled:focus {
     color: $ui-04;
-    background: $ibm-colors__gray-30;
-    border-color: $ibm-colors__gray-30;
+    background: $ibm-color__gray-30;
+    border-color: $ibm-color__gray-30;
     text-decoration: none;
   }
 

diff --git a/src/components/content-switcher/_content-switcher.scss b/src/components/content-switcher/_content-switcher.scss
@@ -202,7 +202,7 @@
 
     // TODO: replace with new disabled color token when finalized
     &:disabled {
-      background-color: $ibm-colors__gray-30;
+      background-color: $ibm-color__gray-30;
     }
   }
 

diff --git a/src/components/structured-list/_structured-list.scss b/src/components/structured-list/_structured-list.scss
@@ -295,7 +295,7 @@
   }
 
   .#{$prefix}--structured-list-row:hover .#{$prefix}--structured-list-svg {
-    fill: $ibm-colors__gray-40;
+    fill: $ibm-color__gray-40;
   }
 
   .#{$prefix}--structured-list-input:checked + .#{$prefix}--structured-list-row .#{$prefix}--structured-list-svg,

diff --git a/src/components/tag/_tag.scss b/src/components/tag/_tag.scss
@@ -89,47 +89,47 @@
   }
 
   .#{$prefix}--tag--basic {
-    @include tag-theme--x($ibm-colors__gray-20, $ibm-colors__gray-100);
+    @include tag-theme--x($ibm-color__gray-20, $ibm-color__gray-100);
   }
 
   .#{$prefix}--tag--red {
-    @include tag-theme--x($ibm-colors__red-20, $ibm-colors__red-70);
+    @include tag-theme--x($ibm-color__red-20, $ibm-color__red-70);
   }
 
   .#{$prefix}--tag--magenta {
-    @include tag-theme--x($ibm-colors__magenta-20, $ibm-colors__magenta-70);
+    @include tag-theme--x($ibm-color__magenta-20, $ibm-color__magenta-70);
   }
 
   .#{$prefix}--tag--purple {
-    @include tag-theme--x($ibm-colors__purple-20, $ibm-colors__purple-70);
+    @include tag-theme--x($ibm-color__purple-20, $ibm-color__purple-70);
   }
 
   .#{$prefix}--tag--blue {
-    @include tag-theme--x($ibm-colors__blue-20, $ibm-colors__blue-70);
+    @include tag-theme--x($ibm-color__blue-20, $ibm-color__blue-70);
   }
 
   .#{$prefix}--tag--cyan {
-    @include tag-theme--x($ibm-colors__cyan-20, $ibm-colors__cyan-70);
+    @include tag-theme--x($ibm-color__cyan-20, $ibm-color__cyan-70);
   }
 
   .#{$prefix}--tag--teal {
-    @include tag-theme--x($ibm-colors__teal-20, $ibm-colors__teal-70);
+    @include tag-theme--x($ibm-color__teal-20, $ibm-color__teal-70);
   }
 
   .#{$prefix}--tag--green {
-    @include tag-theme--x($ibm-colors__green-20, $ibm-colors__green-70);
+    @include tag-theme--x($ibm-color__green-20, $ibm-color__green-70);
   }
 
   .#{$prefix}--tag--cool-gray {
-    @include tag-theme--x($ibm-colors__cool-gray-20, $ibm-colors__cool-gray-100);
+    @include tag-theme--x($ibm-color__cool-gray-20, $ibm-color__cool-gray-100);
   }
 
   .#{$prefix}--tag--warm-gray {
-    @include tag-theme--x($ibm-colors__warm-gray-20, $ibm-colors__warm-gray-100);
+    @include tag-theme--x($ibm-color__warm-gray-20, $ibm-color__warm-gray-100);
   }
 
   .#{$prefix}--tag--disabled {
-    @include tag-theme--x($ibm-colors__gray-20, $ibm-colors__gray-30);
+    @include tag-theme--x($ibm-color__gray-20, $ibm-color__gray-30);
 
     &:hover {
       cursor: not-allowed;
@@ -140,7 +140,7 @@
   .#{$prefix}--tag.#{$prefix}--skeleton {
     // TODO: replace hexcode with gray 10 hover hover token
     // from @carbon/elements
-    @include tag-theme--x(#e5e5e5, $ibm-colors__gray-30);
+    @include tag-theme--x(#e5e5e5, $ibm-color__gray-30);
     width: rem(60px);
 
     &:after {

diff --git a/src/components/toggle/_toggle.scss b/src/components/toggle/_toggle.scss
@@ -369,8 +369,8 @@
 
   .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
     &:before {
-      background-color: $ibm-colors__gray-20; // TODO: Replace with role or add new color variable
-      border-color: $ibm-colors__gray-20; // TODO: Replace with role or add new color variable
+      background-color: $ibm-color__gray-20; // TODO: Replace with role or add new color variable
+      border-color: $ibm-color__gray-20; // TODO: Replace with role or add new color variable
     }
 
     &:after {

diff --git a/src/components/ui-shell/_header.scss b/src/components/ui-shell/_header.scss
@@ -131,11 +131,11 @@
 
   .#{$prefix}--header__action:active,
   a.#{$prefix}--header__menu-item[role='menuitem']:active {
-    background-color: $ibm-colors__gray-80;
+    background-color: $carbon--gray-80;
   }
 
   a.#{$prefix}--header__menu-item[role='menuitem']:focus {
-    border-color: $ibm-colors__blue-60;
+    border-color: $carbon--blue-60;
     outline: none;
   }
 
@@ -148,7 +148,7 @@
   }
 
   .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true'] {
-    background-color: $ibm-colors__gray-80;
+    background-color: $carbon--gray-80;
     // Note: needs to be higher than menu. Adding 1 here instead of moving to
     // the next level.
     z-index: #{z('header') + 1};
@@ -170,7 +170,7 @@
     width: mini-units(25);
     flex-direction: column;
     transform: translateY(100%);
-    background-color: $ibm-colors__gray-80;
+    background-color: $carbon--gray-80;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
     z-index: z('header');
   }
@@ -185,7 +185,7 @@
   }
 
   .#{$prefix}--header__menu-arrow {
-    fill: $ibm-colors__gray-10;
+    fill: $carbon--gray-10;
     margin-left: mini-units(1);
   }
 
@@ -223,7 +223,7 @@
     width: auto;
     height: 3rem;
     clip: auto;
-    border: 4px solid $ibm-colors__blue-60;
+    border: 4px solid $carbon--blue-60;
     z-index: 9999;
     background-color: $shell-header-bg-01;
     color: $shell-header-text-01;

diff --git a/src/components/ui-shell/_navigation-menu.scss b/src/components/ui-shell/_navigation-menu.scss
@@ -19,11 +19,11 @@
     top: mini-units(6);
     bottom: 0;
     left: 0;
-    background-color: $ibm-colors__gray-90;
+    background-color: $carbon--gray-90;
     width: mini-units(32);
     z-index: z('dropdown');
     box-shadow: 0 mini-units(1) mini-units(2) 0 rgba(0, 0, 0, 0.25);
-    color: $ibm-colors__gray-10;
+    color: $carbon--gray-10;
   }
 
   .#{$prefix}--navigation--right {
@@ -32,7 +32,7 @@
   }
 
   .#{$prefix}--navigation svg {
-    fill: $ibm-colors__gray-10;
+    fill: $carbon--gray-10;
   }
 
   //----------------------------------------------------------------------------
@@ -42,7 +42,7 @@
     display: block;
     content: '';
     height: 1px;
-    background-color: $ibm-colors__gray-80;
+    background-color: $carbon--gray-80;
     margin: 0 mini-units(2);
   }
 
@@ -56,7 +56,7 @@
   }
 
   .#{$prefix}--navigation-item--active > a.#{$prefix}--navigation-link {
-    color: $ibm-colors__white;
+    color: $ibm-color__white-0;
     font-weight: 600;
   }
 
@@ -68,7 +68,7 @@
     bottom: 0;
     left: 0;
     width: 4px;
-    background-color: $ibm-colors__blue-60;
+    background-color: $carbon--blue-60;
   }
 
   //----------------------------------------------------------------------------
@@ -77,7 +77,7 @@
   a.#{$prefix}--navigation-link {
     display: flex;
     align-items: center;
-    color: $ibm-colors__gray-10;
+    color: $carbon--gray-10;
     text-decoration: none;
     font-size: rem(14px);
     font-weight: 400;
@@ -88,11 +88,11 @@
 
   a.#{$prefix}--navigation-link:hover {
     background-color: #333333;
-    color: $ibm-colors__white;
+    color: $ibm-color__white-0;
   }
 
   a.#{$prefix}--navigation-link:focus {
-    outline: rem(3px) solid $ibm-colors__blue-60;
+    outline: rem(3px) solid $carbon--blue-60;
     outline-offset: rem(-3px);
   }
 
@@ -119,7 +119,7 @@
   }
 
   .#{$prefix}--navigation__category-toggle:focus {
-    outline: rem(3px) solid $ibm-colors__blue-60;
+    outline: rem(3px) solid $carbon--blue-60;
     outline-offset: rem(-3px);
   }
 
@@ -129,7 +129,7 @@
     justify-content: space-between;
     padding-right: mini-units(2);
     width: 100%;
-    color: $ibm-colors__gray-10;
+    color: $carbon--gray-10;
     font-size: rem(14px);
     font-weight: 400;
     min-height: mini-units(5);
@@ -168,12 +168,12 @@
     bottom: 0;
     left: 0;
     width: 4px;
-    background-color: $ibm-colors__blue-60;
+    background-color: $carbon--blue-60;
   }
 
   .#{$prefix}--navigation__category-item--active > a.#{$prefix}--navigation-link {
     font-weight: 600;
-    color: $ibm-colors__white;
+    color: $ibm-color__white-0;
   }
 
   .#{$prefix}--navigation__category--expanded .#{$prefix}--navigation__category-title {

diff --git a/src/components/ui-shell/_side-nav.scss b/src/components/ui-shell/_side-nav.scss
@@ -90,7 +90,7 @@
     // Useful to toggle this property to see what's going on when not expanded
     overflow: hidden;
     // Separates out the panel from the header of the same color
-    border-top: 1px solid $ibm-colors__gray-80;
+    border-top: 1px solid $carbon--gray-80;
     z-index: z('header');
   }
 
@@ -123,7 +123,7 @@
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav__header {
     display: flex;
-    border-bottom: 1px solid $ibm-colors__gray-80;
+    border-bottom: 1px solid $carbon--gray-80;
     width: 100%;
     height: mini-units(6);
     max-width: 100%;
@@ -328,7 +328,7 @@
 
   .#{$prefix}--side-nav__menu[role='menu'] a.#{$prefix}--side-nav__link--current,
   .#{$prefix}--side-nav__menu[role='menu'] a.#{$prefix}--side-nav__link[aria-current='page'] {
-    background-color: $ibm-colors__gray-70;
+    background-color: $carbon--gray-70;
   }
 
   //----------------------------------------------------------------------------

diff --git a/src/components/ui-shell/_theme.scss b/src/components/ui-shell/_theme.scss
@@ -47,32 +47,32 @@ $shell-header-link: #0062ff;
 $shell-header-icon-selected: #0062ff;
 
 // Side-nav panel background
-$shell-side-nav-bg-01: $ibm-colors__gray-90;
+$shell-side-nav-bg-01: $carbon--gray-90;
 
 // Selected category background
 // Select L2 flatted item background
 // Item hover background
 // Footer-bar background
-$shell-side-nav-bg-02: $ibm-colors__gray-80;
+$shell-side-nav-bg-02: $carbon--gray-80;
 
 // Selected L2 nested item
-$shell-side-nav-bg-03: $ibm-colors__gray-70;
+$shell-side-nav-bg-03: $carbon--gray-70;
 
 // Primary text in side-nav
 // L2 Flatten item text
 // L2 Nested item text
 // L1 title text
-$shell-side-nav-text-01: $ibm-colors__gray-10;
+$shell-side-nav-text-01: $carbon--gray-10;
 
 // Secondary text in side nav
 // L2 Category label
-$shell-side-nav-text-02: $ibm-colors__gray-30;
+$shell-side-nav-text-02: $carbon--gray-30;
 
 // side-nav icon color
-$shell-side-nav-icon-01: $ibm-colors__gray-10;
+$shell-side-nav-icon-01: $carbon--gray-10;
 
 // item highlight bar
-$shell-side-nav-accent-01: $ibm-colors__blue-60;
+$shell-side-nav-accent-01: $carbon--blue-60;
 
 // Temporary token
 $shell-brand-01: #0062ff;