feat(code-snippet): add light styles for all variations and update st…

…orybook knobs (#4342) * fix(code-snippet): add light styles for all variations * docs(code-snippet): add light prop knob for single and multi-line * docs(code-snippet): fix typo in light prop description * docs(code-snippet): add msg & bg when light prop knob is used * docs(code-snippet): adjust template strings in story for prettier * docs(code-snippet): adjust light prop message styling * docs(code-snippet): update light prop usage message * fix(theme-tokens): add hover-ui-light theme token and function * fix(theme-tokens): use feature-flags-enabled in get-light-value function Co-Authored-By: Josh Black <josh@josh.black> * fix(theme-tokens): use custom-property-prefix in get-light-value function Co-Authored-By: Josh Black <josh@josh.black> * fix(code-snippet): flatten all light variation styles
carbon-design-system · Oct 25, 2019 · d6498e9 · d6498e9
1 parent 3835900
commit d6498e9
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 16 deletions.
diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -10,6 +10,7 @@
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
 @import '../../globals/scss/css--reset';
+@import '../../globals/scss/theme-tokens';
 @import 'mixins';
 
 /// Code snippet styles
@@ -59,14 +60,6 @@
     padding: 0 $spacing-xs;
   }
 
-  .#{$prefix}--snippet--inline.#{$prefix}--snippet--light {
-    background-color: $field-02;
-
-    &:hover {
-      background-color: rgba($interactive-02, 0.1);
-    }
-  }
-
   // Single Line Snippet
   .#{$prefix}--snippet--single {
     @include bx--snippet;
@@ -266,6 +259,29 @@
     transition: transform $transition--expansion;
   }
 
+  // Light version
+  .#{$prefix}--snippet.#{$prefix}--snippet--light,
+  .#{$prefix}--snippet.#{$prefix}--snippet--light .#{$prefix}--snippet-button,
+  .#{$prefix}--snippet.#{$prefix}--snippet--light
+    .#{$prefix}--snippet-btn--expand {
+    background-color: $ui-02;
+  }
+
+  .#{$prefix}--snippet.#{$prefix}--snippet--light.#{$prefix}--snippet--inline:hover,
+  .#{$prefix}--snippet.#{$prefix}--snippet--light
+    .#{$prefix}--snippet-button:hover,
+  .#{$prefix}--snippet.#{$prefix}--snippet--light
+    .#{$prefix}--snippet-btn--expand:hover {
+    background-color: $hover-ui-light;
+  }
+
+  .#{$prefix}--snippet.#{$prefix}--snippet--light.#{$prefix}--snippet--single::after,
+  .#{$prefix}--snippet.#{$prefix}--snippet--light.#{$prefix}--snippet--multi
+    .#{$prefix}--snippet-container
+    pre::after {
+    background-image: linear-gradient(to right, transparent, $ui-02);
+  }
+
   // Skeleton State
   .#{$prefix}--snippet--code.#{$prefix}--skeleton {
     height: rem(98px);

diff --git a/packages/components/src/globals/scss/_theme-tokens.scss b/packages/components/src/globals/scss/_theme-tokens.scss
@@ -7,6 +7,7 @@
 
 @import './vendor/@carbon/elements/scss/import-once/import-once';
 @import 'colors';
+@import 'feature-flags';
 @import 'spacing';
 @import './vendor/@carbon/elements/scss/themes/themes';
 
@@ -358,3 +359,41 @@ $tab-underline-disabled: 3px solid $disabled-01 !default;
 /// @access public
 /// @group skeleton
 $skeleton: $skeleton-01 !default; // TODO: Remove this in next major release
+
+// Light UI
+
+// Determine the "light" color for a given token.
+/// @param {String} $token The theme token.
+/// @return {String} The new color value as a hex code or a custom property.
+/// @access public
+/// @group light-ui
+@function get-light-value($token) {
+  $value: map-get($carbon--theme, $token);
+
+  @if $carbon--theme ==
+    $carbon--theme--white or
+    $carbon--theme ==
+    $carbon--theme--g10
+  {
+    $value: darken($value, 8%);
+  }
+
+  @if $carbon--theme ==
+    $carbon--theme--g90 or
+    $carbon--theme ==
+    $carbon--theme--g100
+  {
+    $value: lighten($value, 8%);
+  }
+
+  @if feature-flags-enabled('enable-css-custom-properties') {
+    @return var(--#{$custom-property-prefix}-#{$token}-light, $value);
+  }
+
+  @return $value;
+}
+
+/// @type Color
+/// @access public
+/// @group light-ui
+$hover-ui-light: get-light-value('ui-01');
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
@@ -23,6 +23,7 @@ const props = {
     ),
   }),
   single: () => ({
+    light: boolean('Light variant (light)', false),
     feedback: text('Feedback text (feedback)', 'Feedback Enabled 👍'),
     copyButtonDescription: text(
       'Copy icon description (copyButtonDescription)',
@@ -35,6 +36,7 @@ const props = {
     onClick: action('onClick'),
   }),
   multiline: () => ({
+    light: boolean('Light variant (light)', false),
     feedback: text('Feedback text (feedback)', 'Feedback Enabled 👍'),
     showMoreText: text(
       'Text for "show more" button (showMoreText)',
@@ -48,12 +50,33 @@ const props = {
   }),
 };
 
+const lightPropMessage = (
+  <small style={{ display: 'block', paddingBottom: '1rem' }}>
+    The snippet container should never be the same color as the page background.
+    <br />
+    {'Do not use the '}
+    <CodeSnippet type="inline" light>
+      light
+    </CodeSnippet>
+    {' variant on '}
+    <CodeSnippet type="inline" light>
+      $ui-background
+    </CodeSnippet>
+    {' or '}
+    <CodeSnippet type="inline" light>
+      $ui-02
+    </CodeSnippet>
+    .
+  </small>
+);
+
 storiesOf('CodeSnippet', module)
   .addDecorator(withKnobs)
   .add(
     'inline',
     () => (
-      <div>
+      <div className={props.inline().light ? 'bx--tile' : ''}>
+        {props.inline().light && lightPropMessage}
         <CodeSnippet type="inline" {...props.inline()}>
           {'node -v'}
         </CodeSnippet>
@@ -72,11 +95,14 @@ storiesOf('CodeSnippet', module)
   .add(
     'single line',
     () => (
-      <CodeSnippet type="single" {...props.single()}>
-        {
-          'node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!'
-        }
-      </CodeSnippet>
+      <div className={props.single().light ? 'bx--tile' : ''}>
+        {props.single().light && lightPropMessage}
+        <CodeSnippet type="single" {...props.single()}>
+          {
+            'node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!'
+          }
+        </CodeSnippet>
+      </div>
     ),
     {
       info: {
@@ -93,7 +119,10 @@ storiesOf('CodeSnippet', module)
     () => {
       const multilineProps = props.multiline();
       return (
-        <div style={{ width: '800px' }}>
+        <div
+          className={multilineProps.light ? 'bx--tile' : ''}
+          style={{ width: '800px' }}>
+          {multilineProps.light && lightPropMessage}
           <CodeSnippet type="multi" {...multilineProps}>
             {`@mixin grid-container {
   width: 100%;

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -75,7 +75,7 @@ export default class CodeSnippet extends Component {
 
     /**
      * Specify whether you are using the light variant of the Code Snippet,
-     * typically used for inline snippest to display an alternate color
+     * typically used for inline snippet to display an alternate color
      */
     light: PropTypes.bool,
   };