@carbon/element-styles 0.2.0-rc.2

package/src/elements/checkbox/index.scss

@@ -0,0 +1,76 @@
+/**
+ * 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 '@carbon/styles/scss/utilities/focus-outline';
+
+@use '../label';
+
+@use '../../layout';
+@use '../../utilities/icons';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'label:has(input[type="checkbox"])',
+);
+
+/// @group checkbox
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(input[type="checkbox"])']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include label.styles((
+      selector: '&',
+      axis: 'inline',
+    ));
+
+    justify-content: start;
+    cursor: pointer;
+
+    & input[type="checkbox"] {
+      grid-column: 1;
+      position: relative;
+      appearance: none;
+      border: none;
+      block-size: 1rem;
+      inline-size: 1rem;
+      color: theme.$icon-primary;
+      border-radius: 0.125rem;
+
+      &:focus {
+        @include focus-outline.focus-outline('outline');
+        outline-offset: 0.125rem;
+      }
+
+      &:disabled {
+        color: theme.$icon-disabled;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        @include icons.checkbox;
+        scale: 1.25;
+      }
+
+      &:checked::before {
+        @include icons.checkbox--checked--filled;
+      }
+
+      &:indeterminate::before {
+        @include icons.checkbox--indeterminate--filled;
+      }
+    }
+  }
+}

package/src/elements/code/index.scss

@@ -0,0 +1,34 @@
+/**
+ * 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/spacing';
+@use '@carbon/styles/scss/theme';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'code',
+);
+
+/// @group code
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['code']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include layout.mode--code;
+    background-color: theme.$layer;
+    padding-inline: spacing.$spacing-01;
+    border-radius: 0.0625rem;
+    box-shadow: 0 0 0 0.125rem theme.$layer;
+  }
+}

package/src/elements/combo-box/index.scss

@@ -0,0 +1,68 @@
+/**
+ * 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 '../_labelled-input';
+
+@use '../../utilities/icons';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'label:has(input[type="text"][list])',
+  axis: 'block',
+);
+
+/// @group combo-box
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(input[type="text"][list])']
+/// @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="text"][list]',
+        emit-readonly: false,
+      ),
+      fixed-input-trailing-slots: 1,
+      input-invalid-slot: 'after',
+    ));
+
+    &::before {
+      @include labelled-input.input-trailing-slot {
+        @include icons.chevron--down;
+      }
+    }
+
+    & input[type="text"][list] {
+      &:enabled:hover {
+        background-color: theme.$field-hover;
+      }
+
+      &:enabled:active {
+        background-color: theme.$layer-active;
+      }
+
+      @if map.get($props, 'axis') == 'inline' {
+        &:enabled,
+        &:disabled {
+          background-color: transparent;
+          border-block-end: none;
+        }
+      }
+    }
+  }
+}

package/src/elements/date-input/index.scss

@@ -0,0 +1,47 @@
+/**
+ * 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 '../_labelled-input';
+
+@use '../../utilities/icons';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'label:has(input[type="date"])',
+  axis: 'block',
+);
+
+/// @group date-input
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(input[type="date"])']
+/// @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="date"]',
+      ),
+      fixed-input-trailing-slots: 1,
+      input-invalid-slot: 'after',
+    ));
+
+    &::before {
+      @include labelled-input.input-trailing-slot {
+        @include icons.calendar;
+      }
+    }
+  }
+}

package/src/elements/date-time-input/index.scss

@@ -0,0 +1,47 @@
+/**
+ * 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 '../_labelled-input';
+
+@use '../../utilities/icons';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'label:has(input[type="datetime-local"])',
+  axis: 'block',
+);
+
+/// @group date-time-input
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(input[type="datetime-local"])']
+/// @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="datetime-local"]',
+      ),
+      fixed-input-trailing-slots: 1,
+      input-invalid-slot: 'after',
+    ));
+
+    &::before {
+      @include labelled-input.input-trailing-slot {
+        @include icons.event--schedule;
+      }
+    }
+  }
+}

package/src/elements/deleted-text/index.scss

@@ -0,0 +1,33 @@
+/**
+ * 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/spacing';
+@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'del',
+);
+
+/// @group deleted-text
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['del']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    padding-inline: spacing.$spacing-01;
+    background-color: tag-tokens.$tag-background-red;
+    color: tag-tokens.$tag-color-red;
+    text-decoration: line-through;
+  }
+}

package/src/elements/description-list/index.scss

@@ -0,0 +1,42 @@
+/**
+ * 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/spacing';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'dl',
+);
+
+/// @group description-list
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['dl']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    column-gap: spacing.$spacing-04;
+    row-gap: layout.$density--padding;
+
+    & dt {
+      @include layout.mode--heading;
+    }
+
+    & dd {
+      @include layout.mode--body;
+      max-inline-size: layout.$mode--max-inline-size;
+      margin-inline-start: 0;
+    }
+  }
+}

package/src/elements/details/index.scss

@@ -0,0 +1,85 @@
+/**
+ * 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/utilities/focus-outline';
+
+@use '../../layout';
+@use '../../utilities/icons';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'details',
+);
+
+/// @group details
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['details']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    border-block-start: 0.0625rem solid theme.$border-subtle;
+    box-sizing: border-box;
+    padding-inline-start: calc(layout.$density--padding + 1rem + layout.$density--padding);
+    padding-inline-end: layout.$density--padding;
+
+    &:last-of-type {
+      border-block-end: 0.0625rem solid theme.$border-subtle;
+    }
+
+    & summary {
+      @include layout.mode--body-compact;
+      block-size: layout.$size--block-size;
+      box-sizing: border-box;
+      cursor: pointer;
+      display: flex;
+      padding-block-start: layout.$size--padding-block-start;
+      padding-block-end: layout.$size--padding-block-end;
+      margin-inline-start: calc((layout.$density--padding + 1rem + layout.$density--padding) * -1);
+      padding-inline-start: layout.$density--padding;
+      margin-inline-end: calc(layout.$density--padding * -1);
+      padding-inline-end: layout.$density--padding;
+
+      &:hover {
+        background-color: theme.$layer-hover;
+      }
+
+      &:active {
+        background-color: theme.$layer-active;
+      }
+
+      &:focus {
+        @include focus-outline.focus-outline('outline');
+      }
+    }
+
+    & summary::before {
+      content: '';
+      @include icons.chevron--down;
+      translate: 0 calc((1lh - 1rem) * 0.5);
+      display: inline-block;
+      margin-inline-end: layout.$density--padding;
+      transition: rotate layout.$mode--transition-duration layout.$mode--transition-timing-function;
+    }
+
+    &[open] {
+      padding-block-end: layout.$density--padding;
+    }
+
+    &[open] summary {
+      margin-block-end: layout.$density--padding;
+    }
+
+    &[open] summary::before {
+      rotate: 180deg;
+    }
+  }
+}

package/src/elements/dialog/index.scss

@@ -0,0 +1,211 @@
+/**
+ * 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/spacing';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/breakpoint';
+@use '@carbon/styles/scss/motion';
+@use '@carbon/styles/scss/utilities/focus-outline';
+@use '@carbon/styles/scss/layer/layer-tokens';
+
+@use '../button';
+
+@use '../../layout';
+@use '../../utilities/icons';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'dialog',
+);
+
+/// @group dialog
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['dialog']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    position: relative;
+    padding: 0;
+
+    &:modal {
+      @include layout.size('md');
+      @include layout.density('normal');
+
+      background-color: theme.$layer;
+      color: theme.$text-primary;
+      border: none;
+      padding-inline: layout.$density--padding;
+      box-shadow: none;
+      margin: auto;
+      box-sizing: border-box;
+
+      &:focus {
+        @include focus-outline.focus-outline('outline');
+      }
+
+      @include breakpoint.breakpoint('xlg') {
+        inline-size: 48%;
+      }
+
+      @include breakpoint.breakpoint-down('xlg') {
+        inline-size: 60%;
+        max-block-size: 84%;
+      }
+
+      @include breakpoint.breakpoint-down('lg') {
+        inline-size: 84%;
+        max-block-size: 90%;
+      }
+
+      @include breakpoint.breakpoint-down('md') {
+        inline-size: 100%;
+        block-size: 100%;
+        max-inline-size: 100dvi;
+        max-block-size: 100dvb;
+      }
+    }
+
+    &:modal::backdrop {
+      background-color: theme.$overlay;
+    }
+
+    &:modal header {
+      @include layout.mode--heading-level-5;
+      margin-block: layout.$density--padding;
+    }
+
+    &:modal footer {
+      @include layout.size('xl');
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      margin-inline: calc(layout.$density--padding * -1);
+      margin-block-start: spacing.$spacing-09;
+    }
+
+    &:modal:not(:has(footer)) {
+      padding-block-end: spacing.$spacing-09;
+    }
+
+    // single button
+    &:modal footer > button:only-child {
+      grid-column: 3 / span 2;
+      @include button.styles((
+        selector: '&',
+        kind: 'primary',
+      ));
+    }
+
+    // two buttons
+    &:modal footer > button:first-child:has(+ button:last-child) {
+      grid-column: 1 / span 2;
+      @include button.styles((
+        selector: '&',
+        kind: 'secondary',
+      ));
+    }
+
+    &:modal footer > button:first-child + button:last-child {
+      grid-column: 3 / span 2;
+      @include button.styles((
+        selector: '&',
+        kind: 'primary',
+      ));
+    }
+
+    // three buttons
+    &:modal footer > button:first-child:not(:has(+ button:last-child), :last-child) {
+      grid-column: 1;
+      @include button.styles((
+        selector: '&',
+        kind: 'ghost',
+      ));
+    }
+
+    &:modal footer > button:not(:first-child):has(+ button:last-child) {
+      grid-column: 3;
+      @include button.styles((
+        selector: '&',
+        kind: 'secondary',
+      ));
+    }
+
+    &:modal footer > button:not(:first-child) + button:last-child {
+      grid-column: 4;
+      @include button.styles((
+        selector: '&',
+        kind: 'primary',
+      ));
+    }
+
+    // header close button
+    &:modal header > button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      appearance: none;
+      box-shadow: none;
+      border: none;
+      border-radius: 0;
+      padding: 0;
+      background-color: transparent;
+      color: theme.$icon-primary;
+      block-size: layout.$size--block-size;
+      inline-size: layout.$size--block-size;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: background-color layout.$mode--transition-duration layout.$mode--transition-timing-function;
+
+      &:hover {
+        background-color: theme.$layer-hover;
+      }
+
+      &:active {
+        background-color: theme.$layer-active;
+      }
+
+      &:focus {
+        @include focus-outline.focus-outline('outline');
+      }
+    }
+
+    &:modal header > button::after {
+      @include icons.close($size: 1.25rem);
+      display: block;
+      inset: 0;
+      content: '';
+    }
+
+    // entry animation
+    &[open]:modal {
+      translate: 0 0;
+      opacity: 1;
+      transition-property: opacity, translate;
+      transition-duration: motion.$duration-moderate-02;
+      transition-timing-function: layout.$mode--transition-timing-function;
+
+      @starting-style {
+        opacity: 0;
+        translate: 0 -1.5rem;
+      }
+    }
+
+    &[open]:modal::backdrop {
+      opacity: 1;
+      transition: inherit;
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+  }
+}

package/src/elements/fieldset/index.scss

@@ -0,0 +1,41 @@
+/**
+ * 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/spacing';
+
+@use '../label';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'fieldset',
+);
+
+/// @group fieldset
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['fieldset']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    border: none;
+    padding: 0;
+    margin-block: layout.$mode--margin-block;
+
+    & legend {
+      @include label.styles((
+        selector: '&',
+      ));
+      padding: 0;
+      margin-block-end: spacing.$spacing-03;
+    }
+  }
+}