@carbon/styles 1.18.0 → 1.19.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,13 +32,13 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.9.0",
-    "@carbon/feature-flags": "^0.10.0",
-    "@carbon/grid": "^11.8.0",
-    "@carbon/layout": "^11.8.0",
-    "@carbon/motion": "^11.6.0",
-    "@carbon/themes": "^11.13.0",
-    "@carbon/type": "^11.12.0",
+    "@carbon/colors": "^11.10.0",
+    "@carbon/feature-flags": "^0.11.0",
+    "@carbon/grid": "^11.9.0",
+    "@carbon/layout": "^11.9.0",
+    "@carbon/motion": "^11.7.0",
+    "@carbon/themes": "^11.14.0",
+    "@carbon/type": "^11.13.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "00fdab625998b2ae048814059ae8447435d6c7cd"
+  "gitHead": "8206000d08eba6a443d7846b692a3543a47a6e66"
 }

package/scss/__tests__/theme-test.js

@@ -87,6 +87,9 @@ describe('@carbon/styles/scss/theme', () => {
         "border-strong-01",
         "border-strong-02",
         "border-strong-03",
+        "border-tile-01",
+        "border-tile-02",
+        "border-tile-03",
         "border-inverse",
         "border-interactive",
         "border-disabled",
@@ -145,6 +148,7 @@ describe('@carbon/styles/scss/theme', () => {
         "border-subtle",
         "border-subtle-selected",
         "border-strong",
+        "border-tile",
       ]
     `);
   });

package/scss/_feature-flags.scss

@@ -11,6 +11,7 @@
     'enable-use-controlled-state-with-value': true,
     'enable-css-grid': true,
     'enable-v11-release': true,
+    'enable-experimental-tile-contrast': false,
   )
   !default
 );

package/scss/components/combo-box/_combo-box.scss

@@ -42,4 +42,20 @@
     .#{$prefix}--list-box__field {
     padding: 0;
   }
+
+  // readonly
+  .#{$prefix}--combo-box--readonly,
+  .#{$prefix}--combo-box--readonly:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__menu-icon,
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__selection {
+    cursor: default;
+  }
+
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__menu-icon svg,
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__selection svg {
+    fill: $icon-disabled;
+  }
 }

package/scss/components/dropdown/_dropdown.scss

@@ -473,4 +473,19 @@
   .#{$prefix}--list-box__menu-item__selected-icon {
     @include high-contrast-mode('icon-fill');
   }
+
+  // readonly
+  .#{$prefix}--dropdown--readonly,
+  .#{$prefix}--dropdown--readonly:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--dropdown--readonly .#{$prefix}--list-box__field,
+  .#{$prefix}--dropdown--readonly .#{$prefix}--list-box__menu-icon {
+    cursor: default;
+  }
+
+  .#{$prefix}--dropdown--readonly .#{$prefix}--list-box__menu-icon svg {
+    fill: $icon-disabled;
+  }
 }

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

@@ -98,6 +98,13 @@
     color: $text-disabled;
   }
 
+  //-----------------------------
+  // Readonly
+  //-----------------------------
+  .#{$prefix}--text-area__wrapper--readonly .#{$prefix}--text-area {
+    background: transparent;
+  }
+
   // V11: Possibly deprecate
   .#{$prefix}--text-area.#{$prefix}--text-area--light:disabled {
     background-color: $field-02;

package/scss/components/tile/_tile.scss

@@ -6,6 +6,7 @@
 //
 
 @use '../../config' as *;
+@use '../../feature-flags' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
@@ -19,7 +20,7 @@
 /// Tile styles
 /// @access public
 /// @group tile
-@mixin tile {
+@mixin tile($local-enable-experimental-tile-contrast: false) {
   .#{$prefix}--tile-group {
     @include reset;
   }
@@ -62,6 +63,13 @@
     color: $text-primary;
     text-decoration: none;
 
+    @if (
+      enabled('enable-experimental-tile-contrast') or
+        $local-enable-experimental-tile-contrast
+    ) {
+      border: 1px solid $border-tile;
+    }
+
     &:focus {
       @include focus-outline('outline');
     }
@@ -99,6 +107,13 @@
   .#{$prefix}--tile--selectable {
     padding-right: $spacing-09;
     border: 1px solid transparent;
+
+    @if (
+      enabled('enable-experimental-tile-contrast') or
+        $local-enable-experimental-tile-contrast
+    ) {
+      border: 1px solid $border-tile;
+    }
   }
 
   .#{$prefix}--tile__checkmark {
@@ -190,6 +205,13 @@
 
     @include type-style('body-compact-01');
 
+    @if (
+      enabled('enable-experimental-tile-contrast') or
+        $local-enable-experimental-tile-contrast
+    ) {
+      border: 1px solid $border-tile;
+    }
+
     &:hover {
       background: $layer-hover;
     }

package/scss/layer/_layer-sets.scss

@@ -74,6 +74,11 @@ $-default-layer-sets: (
     theme.$border-strong-02,
     theme.$border-strong-03,
   ),
+  border-tile: (
+    theme.$border-tile-01,
+    theme.$border-tile-02,
+    theme.$border-tile-03,
+  ),
 );
 
 /// Define a map of layer sets, each set should have values for each layer in

package/scss/theme/_theme.scss

@@ -38,3 +38,4 @@ $field-hover: custom-property.get-var('field-hover');
 $border-subtle: custom-property.get-var('border-subtle');
 $border-subtle-selected: custom-property.get-var('border-subtle-selected');
 $border-strong: custom-property.get-var('border-strong');
+$border-tile: custom-property.get-var('border-tile');