@carbon/styles 1.0.2 → 1.2.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.0.2",
+  "version": "1.2.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -27,17 +27,17 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.0.0",
+    "@carbon/colors": "^11.1.0",
     "@carbon/feature-flags": "^0.7.0",
-    "@carbon/grid": "^11.0.0",
-    "@carbon/layout": "^11.0.0",
+    "@carbon/grid": "^11.1.0",
+    "@carbon/layout": "^11.1.0",
     "@carbon/motion": "^11.0.0",
-    "@carbon/themes": "^11.0.1",
-    "@carbon/type": "^11.0.0",
+    "@carbon/themes": "^11.2.0-rc.0",
+    "@carbon/type": "^11.2.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.22.0",
+    "@carbon/test-utils": "^10.23.0",
     "css": "^3.0.0",
     "sass": "^1.45.0"
   },
@@ -46,5 +46,5 @@
     "scss/**/*.scss",
     "scss/**/*.css"
   ],
-  "gitHead": "42d17eec46503003defc2a4227ac0c20750713fe"
+  "gitHead": "b429fb727138d42e93696ff4f8ab70d174dd7ac8"
 }

package/scss/__tests__/type-test.js

@@ -10,6 +10,7 @@
 'use strict';
 
 const { SassRenderer } = require('@carbon/test-utils/scss');
+const css = require('css');
 
 const { render } = SassRenderer.create(__dirname);
 
@@ -74,4 +75,24 @@ describe('@carbon/styles/scss/type', () => {
       ]
     `);
   });
+
+  test('prefix', async () => {
+    const { result } = await render(`
+      @use '../config' with (
+        $prefix: 'custom',
+      );
+      @use '../type';
+
+      .my-selector {
+        @include type.type-style('label-01');
+      }
+    `);
+    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-')
+      );
+    }
+  });
 });

package/scss/_zone.scss

@@ -12,7 +12,11 @@
 @use './theme';
 // Inline themes depend on layer styles to property reset the layer level
 @use './layer';
+@use './utilities/component-tokens';
 @use './utilities/custom-property';
+@use './components/button/tokens' as button;
+@use './components/notification/tokens' as notification;
+@use './components/tag/tokens' as tag;
 
 /// Specify a Map of zones where the key will be used as part of the selector
 /// and the value will be a map used to emit CSS Custom Properties for all color
@@ -24,6 +28,12 @@ $zones: (
   g100: themes.$g100,
 ) !default;
 
+$-components: (
+  button.$button-tokens,
+  notification.$notification-tokens,
+  tag.$tag-tokens
+);
+
 @each $name, $theme in $zones {
   .#{config.$prefix}--#{'' + $name} {
     @each $key, $value in $theme {
@@ -31,5 +41,27 @@ $zones: (
         @include custom-property.declaration($key, $value);
       }
     }
+
+    @each $group in $-components {
+      @each $key, $value in $group {
+        @if meta.type-of($value) == map {
+          $fallback: map.get($value, fallback);
+          $theme-values: map.get($value, values);
+
+          @each $theme-value in $theme-values {
+            $theme: map.get($theme-value, theme);
+            $value: map.get($theme-value, value);
+            @if theme.matches($theme, theme.$theme) and
+              meta.type-of($value) ==
+              color
+            {
+              @include custom-property.declaration($key, $value);
+            }
+          }
+        } @else if meta.type-of($value) == color {
+          @include custom-property.declaration($key, $value);
+        }
+      }
+    }
   }
 }

package/scss/components/search/_search.scss

@@ -112,11 +112,6 @@
     left: rem(12px);
   }
 
-  .#{$prefix}--search--md:not(.#{$prefix}--toolbar-search-container-active)
-    .#{$prefix}--search-magnifier-icon {
-    left: 0;
-  }
-
   // Large styles
   .#{$prefix}--search--lg .#{$prefix}--search-input,
   .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded

package/scss/components/slider/_slider.scss

@@ -154,7 +154,7 @@
   }
 
   .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
-    background-color: $border-subtle;
+    background-color: $border-disabled;
 
     &:hover {
       cursor: not-allowed;
@@ -162,14 +162,14 @@
     }
 
     &:focus {
-      background-color: $border-subtle;
+      background-color: $border-disabled;
       box-shadow: none;
       outline: none;
       transform: translate(-50%, -50%);
     }
 
     &:active {
-      background: $border-subtle;
+      background: $border-disabled;
       transform: translate(-50%, -50%);
     }
   }
@@ -179,7 +179,7 @@
   .#{$prefix}--slider--disabled
     .#{$prefix}--slider__thumb:focus
     ~ .#{$prefix}--slider__filled-track {
-    background-color: $border-subtle;
+    background-color: $border-disabled;
   }
 
   .#{$prefix}--slider--disabled

package/scss/components/tile/_tile.scss

@@ -34,6 +34,8 @@
     outline: 2px solid transparent;
     outline-offset: -2px;
 
+    @include type-style('body-compact-01');
+
     &:focus {
       @include focus-outline('outline');
     }
@@ -56,7 +58,6 @@
 
   .#{$prefix}--tile--clickable {
     @include reset;
-    @include type-style('body-compact-01');
 
     color: $text-primary;
     text-decoration: none;
@@ -186,6 +187,8 @@
     text-align: left;
     transition: max-height $duration-moderate-01 motion(standard, productive);
 
+    @include type-style('body-compact-01');
+
     &:hover {
       background: $layer-hover;
     }

package/scss/type/_index.scss

@@ -47,3 +47,12 @@
   $display-03,
   $display-04,
   $tokens;
+
+@use '@carbon/type';
+
+@include type.configure(
+  (
+    prefix: config.$prefix,
+    custom-property-prefix: config.$prefix,
+  )
+);