@carbon/styles 1.75.0-rc.0 → 1.76.0-rc.0

package/scss/__tests__/config-test.js

@@ -33,12 +33,14 @@ describe('@carbon/styles/scss/config', () => {
         $css--font-face: false,
         $css--reset: false,
         $css--default-type: false,
+        $css--emit-type-custom-props: false
       );
 
       $_: get('config', (
         css--default-type: config.$css--default-type,
         css--font-face: config.$css--font-face,
         css--reset: config.$css--reset,
+        css--emit-type-custom-props: config.$css--emit-type-custom-props,
         prefix: config.$prefix,
       ));
     `);
@@ -47,6 +49,7 @@ describe('@carbon/styles/scss/config', () => {
       'css--default-type': false,
       'css--font-face': false,
       'css--reset': false,
+      'css--emit-type-custom-props': false,
       prefix: 'test',
     });
   });

package/scss/__tests__/type-test.js

@@ -130,8 +130,8 @@ describe('@carbon/styles/scss/type', () => {
     const { stylesheet } = css.parse(result.css.toString());
     const [rule] = stylesheet.rules;
     for (const declaration of rule.declarations) {
-      expect(declaration.value).toEqual(
-        expect.stringContaining('var(--custom-')
+      expect(declaration.property).toEqual(
+        expect.stringContaining('--custom-')
       );
     }
   });
@@ -150,3 +150,22 @@ describe('@carbon/styles/scss/type', () => {
     expect(stylesheet).toMatchSnapshot();
   });
 });
+
+describe('type custom properties', () => {
+  it('should emit the css Custom properties for non-fluid typography', async () => {
+    const { result } = await render(`
+        @use '../scss/type' as *;
+
+        .selector {
+          @include emit-type-custom-properties()
+        }
+      `);
+    const { stylesheet } = css.parse(result.css.toString());
+    const rules = stylesheet.rules.filter(
+      (rule) => rule.selectors[0] === '.selector'
+    );
+    const declarations = rules[0].declarations;
+
+    expect(declarations.length).toBe(191);
+  });
+});

package/scss/_config.scss

@@ -18,6 +18,12 @@ $css--body: true !default;
 /// @group config
 $css--font-face: true !default;
 
+/// If true, emit the custom type properties in in :root
+/// @access public
+/// @type Bool
+/// @group config
+$css--emit-type-custom-props: true !default;
+
 /// If true, include reset CSS
 /// @access public
 /// @type Bool

package/scss/components/fluid-text-area/_fluid-text-area.scss

@@ -42,9 +42,21 @@
     align-items: center;
     margin: 0;
     block-size: convert.to-rem(16px);
-    inline-size: auto;
     inset-block-start: convert.to-rem(13px);
-    inset-inline-start: $spacing-05;
+
+    // For the main label
+    &:not(.#{$prefix}--text-area__label-counter) {
+      inline-size: auto;
+      inset-inline-end: auto;
+      inset-inline-start: $spacing-05;
+    }
+
+    // For the counter
+    &.#{$prefix}--text-area__label-counter {
+      inline-size: auto;
+      inset-inline-end: $spacing-05;
+      inset-inline-start: auto;
+    }
   }
 
   .#{$prefix}--text-area--fluid .#{$prefix}--label::-webkit-scrollbar,

package/scss/components/fluid-text-input/_fluid-text-input.scss

@@ -33,9 +33,21 @@
     align-items: center;
     margin: 0;
     block-size: convert.to-rem(16px);
-    inline-size: calc(100% - 2rem);
     inset-block-start: convert.to-rem(13px);
-    inset-inline-start: $spacing-05;
+
+    // For the main label
+    &:not(.#{$prefix}--text-input__label-counter) {
+      inline-size: auto;
+      inset-inline-end: auto;
+      inset-inline-start: $spacing-05;
+    }
+
+    // For the counter
+    &.#{$prefix}--text-input__label-counter {
+      inline-size: auto;
+      inset-inline-end: $spacing-05;
+      inset-inline-start: auto;
+    }
   }
 
   .#{$prefix}--text-input--fluid .#{$prefix}--label::-webkit-scrollbar,

package/scss/components/tabs/_tabs.scss

@@ -522,6 +522,8 @@
     //-----------------------------
     // Icon Item
     //-----------------------------
+    &.#{$prefix}--tabs__icon--default,
+    &.#{$prefix}--tabs__icon--lg,
     &.#{$prefix}--tabs__icon--default .#{$prefix}--tab--list,
     &.#{$prefix}--tabs__icon--lg .#{$prefix}--tab--list {
       overflow-x: visible;

package/scss/components/text-area/_text-area.scss

@@ -235,6 +235,7 @@
   }
 
   .#{$prefix}--text-area__label-wrapper {
+    position: relative;
     display: flex;
     justify-content: space-between;
     inline-size: 100%;

package/scss/components/text-input/_text-input.scss

@@ -534,9 +534,5 @@
     display: flex;
     justify-content: space-between;
     inline-size: 100%;
-
-    .#{$prefix}--text-input__label-counter {
-      align-self: end;
-    }
   }
 }

package/scss/components/treeview/_treeview.scss

@@ -88,6 +88,25 @@
     cursor: not-allowed;
   }
 
+  // Overrides link styling
+  li a.#{$prefix}--tree-node {
+    text-decoration: none;
+
+    &:not(.cds--tree-node--disabled) {
+      color: $text-secondary;
+    }
+  }
+
+  li.#{$prefix}--tree-node-link-parent {
+    display: flex;
+    flex-direction: column;
+    background-color: $layer-01;
+
+    > .#{$prefix}--tree-node__children {
+      padding-inline-start: $spacing-05;
+    }
+  }
+
   .#{$prefix}--tree-node__label {
     @include type-style('body-compact-01');
 

package/scss/type/_index.scss

@@ -5,7 +5,10 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../feature-flags' as *;
 @use '../config';
+@use 'sass:string';
+@use 'sass:map';
 
 // prettier-ignore
 @forward '@carbon/type' show
@@ -90,3 +93,24 @@
     custom-property-prefix: config.$prefix,
   )
 );
+
+// output type custom properties used by non-fluid type-style below
+/// @access public
+/// @group @carbon/type
+@mixin emit-type-custom-properties() {
+  @each $name, $token in type.$tokens {
+    @if string.slice($name, 1, 5) != 'fluid' {
+      @each $property, $value in $token {
+        @if $property != 'breakpoints' {
+          --#{config.$prefix}-#{$name}-#{$property}: #{$value};
+        }
+      }
+    }
+  }
+}
+
+@if config.$css--emit-type-custom-props == true {
+  :root {
+    @include emit-type-custom-properties();
+  }
+}