@carbon/element-styles 0.3.5 → 0.3.6-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/element-styles",
   "description": "An experimental styling system for native HTML elements, relying on semantic, attribute-focused selectors instead of class names.",
-  "version": "0.3.5",
+  "version": "0.3.6-rc.0",
   "license": "Apache-2.0",
   "type": "module",
   "sass": "index.scss",

package/scss/elements/color-input/index.scss

@@ -0,0 +1,122 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * 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 'sass:map';
+
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/spacing';
+
+@use '../_labelled-input';
+
+@use '../../layout';
+@use '../../utilities/icons';
+@use '../../utilities/guards';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'label:has(input[type="color"])',
+  axis: 'block',
+);
+
+/// @group color-input
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(input[type="color"])']
+/// @param {'block' | 'inline'} config.axis ['block']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include labelled-input.styles((
+      label: (
+        selector: '&',
+        axis: map.get($props, 'axis'),
+      ),
+      input: (
+        selector: 'input[type="color"]',
+        emit-readonly: false,
+      ),
+      fixed-input-trailing-slots: 1,
+      input-invalid-slot: 'after',
+    ));
+
+    /*
+        inline padding
+      + color swatch
+      + spacing-05
+      + invalid icon space
+      + spacing-03
+      + trailing icon space
+      + inline padding
+    */
+    $-min-inline-size: calc(
+        layout.$density--padding
+      + 1rem
+      + spacing.$spacing-05
+      + 1rem
+      + spacing.$spacing-03
+      + 1rem
+      + layout.$density--padding
+    );
+
+    & input[type="color"] {
+      min-inline-size: $-min-inline-size;
+      inline-size: 100%;
+      cursor: pointer;
+
+      @include guards.hover {
+        &:enabled:hover {
+          background-color: theme.$field-hover;
+        }
+      }
+
+      &:enabled:active {
+        background-color: theme.$layer-active;
+      }
+    }
+
+    & input[type="color"]::-webkit-color-swatch-wrapper {
+      padding: 0;
+      inline-size: 1rem;
+      block-size: 1rem;
+    }
+
+    & input[type="color"]::-webkit-color-swatch {
+      position: relative;
+      inset-block-start: 0.0625rem;
+      padding: 0;
+      margin: 0;
+      border-radius: 0;
+      inline-size: 1rem;
+      block-size: 1rem;
+      border: none;
+      box-shadow: inset 0 0 0 0.0625rem rgb(from theme.$border-inverse r g b / 0.15);
+    }
+
+    & input[type="color"]::-moz-color-swatch {
+      position: relative;
+      inset-block-start: 0.0625rem;
+      padding: 0;
+      margin: 0;
+      border-radius: 0;
+      inline-size: 1rem;
+      block-size: 1rem;
+      border: none;
+      box-shadow: inset 0 0 0 0.0625rem rgb(from theme.$border-inverse r g b / 0.15);
+    }
+
+    & input[type="color"]:disabled::-webkit-color-swatch-wrapper {
+      opacity: 0.5;
+    }
+
+    &::before {
+      @include labelled-input.input-trailing-slot {
+        @include icons.color-palette;
+      }
+    }
+  }
+}

package/scss/prebuilt/expressive/_elements.scss

@@ -14,6 +14,7 @@
 @use '../../elements/button';
 @use '../../elements/checkbox';
 @use '../../elements/code';
+@use '../../elements/color-input';
 @use '../../elements/combo-box';
 @use '../../elements/date-input';
 @use '../../elements/date-time-input';
@@ -82,6 +83,7 @@
   ));
   @include checkbox.styles;
   @include code.styles;
+  @include color-input.styles;
   @include combo-box.styles;
   @include date-input.styles;
   @include date-time-input.styles;

package/scss/prebuilt/productive/_elements.scss

@@ -14,6 +14,7 @@
 @use '../../elements/button';
 @use '../../elements/checkbox';
 @use '../../elements/code';
+@use '../../elements/color-input';
 @use '../../elements/combo-box';
 @use '../../elements/date-input';
 @use '../../elements/date-time-input';
@@ -82,6 +83,7 @@
   ));
   @include checkbox.styles;
   @include code.styles;
+  @include color-input.styles;
   @include combo-box.styles;
   @include date-input.styles;
   @include date-time-input.styles;

package/scss/utilities/_icons.scss

@@ -82,6 +82,13 @@
   mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M17.4141 16 24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z'/></svg>");
 }
 
+/// @group icons
+/// @param {Length} size [1rem]
+@mixin color-palette($args...) {
+  @include -icon($args...);
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='10' cy='12' r='2'/><circle cx='16' cy='9' r='2'/><circle cx='22' cy='12' r='2'/><circle cx='23' cy='18' r='2'/><circle cx='19' cy='23' r='2'/><path d='M16.54,2A14,14,0,0,0,2,16a4.82,4.82,0,0,0,6.09,4.65l1.12-.31A3,3,0,0,1,13,23.24V27a3,3,0,0,0,3,3A14,14,0,0,0,30,15.46,14.05,14.05,0,0,0,16.54,2Zm8.11,22.31A11.93,11.93,0,0,1,16,28a1,1,0,0,1-1-1V23.24a5,5,0,0,0-5-5,5.07,5.07,0,0,0-1.33.18l-1.12.31A2.82,2.82,0,0,1,4,16,12,12,0,0,1,16.47,4,12.18,12.18,0,0,1,28,15.53,11.89,11.89,0,0,1,24.65,24.32Z'/></svg>");
+}
+
 /// @group icons
 /// @param {Length} size [1rem]
 @mixin event--schedule($args...) {