@carbon/styles 0.7.0 → 0.9.0

package/scss/components/radio-button/_radio-button.scss

@@ -9,7 +9,7 @@
 // Radio
 //-----------------------------
 
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../type';
 @use '../form';
 @use '../../utilities/focus-outline' as *;
@@ -20,6 +20,8 @@
 @use '../../config' as *;
 @use '../../spacing' as *;
 
+@use '../button/tokens' as *;
+
 /// @type Number
 /// @access public
 /// @group radio-button
@@ -119,21 +121,21 @@ $radio-border-width: 1px !default;
     }
   }
 
-  .#{$prefix}--radio-button:disabled-01 + .#{$prefix}--radio-button__label {
-    color: $disabled-01;
+  .#{$prefix}--radio-button:button-disabled + .#{$prefix}--radio-button__label {
+    color: $button-disabled;
     cursor: not-allowed;
   }
 
-  .#{$prefix}--radio-button:disabled-01
+  .#{$prefix}--radio-button:button-disabled
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance,
-  .#{$prefix}--radio-button:disabled-01:checked
+  .#{$prefix}--radio-button:button-disabled:checked
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance {
-    border-color: $disabled-01;
+    border-color: $border-disabled;
 
     &::before {
-      background-color: $disabled-01;
+      background-color: $button-disabled;
     }
   }
 
@@ -142,8 +144,8 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button:focus
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance {
-    box-shadow: 0 0 0 2px $focus;
-    outline: 1px solid transparent;
+    outline: 2px solid $focus;
+    outline-offset: 1.5px;
   }
 
   // Skeleton State

package/scss/components/search/_search.scss

@@ -9,7 +9,7 @@
 // Search
 //-----------------------------
 
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../config' as *;
 @use '../../type';
 @use '../../motion' as *;
@@ -70,12 +70,12 @@
 
   .#{$prefix}--search-input[disabled] {
     border-bottom: 1px solid transparent;
-    background-color: $field-disabled;
-    color: $disabled-01;
+    background-color: $field;
+    color: $text-disabled;
     cursor: not-allowed;
 
     &::placeholder {
-      color: $disabled-01;
+      color: $field;
     }
   }
   .#{$prefix}--search--light .#{$prefix}--search-input {
@@ -160,7 +160,7 @@
       border-bottom: 1px solid $border-strong;
 
       &::before {
-        background-color: $hover-field;
+        background-color: $field-hover;
       }
     }
   }
@@ -200,7 +200,7 @@
     visibility: inherit;
 
     &:hover {
-      background-color: $hover-field;
+      background-color: $field-hover;
     }
 
     &:focus {
@@ -231,7 +231,7 @@
   }
 
   .#{$prefix}--search--disabled svg {
-    fill: $disabled-01;
+    fill: $icon-on-color-disabled;
   }
 
   .#{$prefix}--search-close:focus,

package/scss/components/stack/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'stack';
+@use 'stack';
+
+@include stack.stack;

package/scss/components/stack/_stack.scss

@@ -0,0 +1,34 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../../config' as *;
+@use '../../spacing';
+@use '../../utilities/custom-property';
+
+@mixin stack() {
+  .#{$prefix}--stack-horizontal {
+    display: inline-grid;
+    column-gap: custom-property.get-var('stack-gap', 0);
+    grid-auto-flow: column;
+  }
+
+  .#{$prefix}--stack-vertical {
+    display: grid;
+    grid-auto-flow: row;
+    row-gap: custom-property.get-var('stack-gap', 0);
+  }
+
+  $index: 1;
+
+  @each $step, $value in spacing.$spacing {
+    .#{$prefix}--stack-scale-#{$index} {
+      @include custom-property.declaration('stack-gap', $value);
+    }
+
+    $index: $index + 1;
+  }
+}

package/scss/components/structured-list/_structured-list.scss

@@ -9,7 +9,7 @@
 @use '../../feature-flags' as *;
 @use "../../type" as *;
 @use '../../motion';
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use "../../utilities/focus-outline" as *;
 @use "../../utilities/skeleton" as *;
 @use "../../utilities/high-contrast-mode" as *;
@@ -36,7 +36,10 @@
 
     display: table;
     width: 100%;
-    margin-bottom: 5rem;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: 5rem;
+    }
+
     background-color: transparent;
     border-collapse: collapse;
     border-spacing: 0;
@@ -86,8 +89,8 @@
 
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row):not(.#{$prefix}--structured-list-row--selected) {
-    border-bottom: 1px solid $hover-row;
-    background-color: $hover-row;
+    border-bottom: 1px solid $background-hover;
+    background-color: $background-hover;
     cursor: pointer;
   }
 

package/scss/components/tabs/_tabs.scss

@@ -733,8 +733,11 @@
       @include focus-outline('reset');
       @include type-style('body-short-01');
 
+      @if not feature-flag-enabled('enable-v11-release') {
+        width: rem(160px);
+      }
+
       overflow: hidden;
-      width: rem(160px);
       padding: $spacing-04 $spacing-05 $spacing-03;
       border-bottom: $tab-underline-color;
       color: $text-secondary;

package/scss/components/tile/_tile.scss

@@ -8,7 +8,7 @@
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../type' as *;
 @use '../button/tokens' as button;
 @use '../../utilities/focus-outline' as *;
@@ -40,7 +40,7 @@
 
   // V11: Possibly deprecate
   .#{$prefix}--tile--light {
-    background-color: $ui-02;
+    background-color: $layer-02;
   }
 
   .#{$prefix}--tile--clickable,
@@ -162,6 +162,7 @@
   }
 
   .#{$prefix}--tile--expandable {
+    position: relative;
     overflow: hidden;
     width: 100%;
     border: 0;
@@ -249,7 +250,7 @@
 
   // V11: Possibly deprecate
   .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable.#{$prefix}--tile--light {
-    background-color: $ui-02;
+    background-color: $layer-02;
   }
 
   .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected {

package/scss/components/toggle/_toggle.scss

@@ -6,7 +6,7 @@
 //3
 
 @use '../../config' as *;
-@use '../../feature-flags' as *;
+@use '../../feature-flags';
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
@@ -15,12 +15,13 @@
 @use '../../utilities/convert' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/visually-hidden' as *;
+@use '../../utilities/skeleton' as *;
 
 /// Toggle styles
 /// @access public
 /// @group toggle
 @mixin toggle {
-  @if enabled('enable-v11-release') {
+  @if feature-flags.enabled('enable-v11-release') {
     .#{$prefix}--toggle__label-text {
       @include type-style('label-01');
 
@@ -586,30 +587,91 @@
     //----------------------------------------------
     // Skeleton
     // ---------------------------------------------
+    //md toggle input
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch {
+      @include skeleton;
 
-    .#{$prefix}--toggle__label.#{$prefix}--skeleton {
-      flex-direction: column;
-      align-items: flex-start;
+      width: 3rem;
+      margin-top: 0.5rem;
+    }
 
-      .#{$prefix}--toggle__label-text {
-        margin-bottom: $spacing-03;
-      }
+    //md skeleton label text
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      > div {
+      overflow: hidden;
+      width: 1.5rem;
+      height: 0.5rem;
+      //hides text
+      font-size: 0%;
+      line-height: 0;
+
+      @include skeleton;
     }
 
-    // Windows HCM fix
-    .#{$prefix}--toggle__switch::after,
-    .#{$prefix}--toggle__switch::before {
-      @include high-contrast-mode('outline');
+    //small toggle input
+    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch {
+      @include skeleton;
+
+      width: 2rem;
+      margin-top: 0.5rem;
     }
 
-    // stylelint-disable-next-line no-duplicate-selectors
-    .#{$prefix}--toggle-input:focus
+    //sm skeleton label text
+    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
       + .#{$prefix}--toggle-input__label
-      > .#{$prefix}--toggle__switch::before,
-    .#{$prefix}--toggle-input:active
+      > div {
+      overflow: hidden;
+      width: 1rem;
+      height: 0.5rem;
+      //hides text
+      font-size: 0%;
+      line-height: 0;
+
+      @include skeleton;
+    }
+
+    // on/off text skeleton
+    .#{$prefix}--toggle.#{$prefix}--skeleton
       + .#{$prefix}--toggle-input__label
-      > .#{$prefix}--toggle__switch::before {
-      @include high-contrast-mode('focus');
+      .#{$prefix}--toggle__switch
+      .#{$prefix}--toggle__text--left {
+      @include skeleton;
+
+      position: absolute;
+      width: 1rem;
+      height: 0.5rem;
+    }
+
+    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch
+      .#{$prefix}--toggle__text--left {
+      left: 2rem;
+    }
+
+    //pseudo "toggle" button
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch::after,
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__appearance::after,
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__appearance::before {
+      display: none;
+    }
+
+    //make it square
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch::before {
+      border-radius: 0;
     }
   }
 }