@carbon/element-styles 0.2.0-rc.2

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

@@ -0,0 +1,43 @@
+/**
+ * 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 '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'label:has(textarea)',
+);
+
+/// @group text-area
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(textarea)']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include labelled-input.styles((
+      label: (
+        selector: '&',
+        axis: 'block',
+      ),
+      input: (
+        selector: 'textarea',
+      ),
+      input-invalid-slot: 'after',
+    ));
+
+    & textarea {
+      min-block-size: calc(layout.$size--padding-block-start + 2lh + layout.$size--padding-block-end);
+      resize: vertical;
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+/**
+ * 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 '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'label:has(input[type="text"])',
+  axis: 'block',
+);
+
+/// @group text-input
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(input[type="text"])']
+/// @param {'block' | 'axis'} 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"]',
+      ),
+      input-invalid-slot: 'after',
+    ));
+  }
+}

package/src/elements/tile/index.scss

@@ -0,0 +1,72 @@
+/**
+ * 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 '../_layer';
+
+@use '../../layout';
+@use '../../utilities/icons';
+
+$config: () !default;
+
+$-default-config: (
+  selector: '[data-tile]',
+);
+
+/// @group tile
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['[data-tile]']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include layer.styles;
+    padding: layout.$density--padding;
+    box-sizing: border-box;
+
+    &:is(a) {
+      position: relative;
+      display: block;
+      color: theme.$text-primary;
+      text-decoration: none;
+      padding-inline-end: spacing.$spacing-09;
+      border: 0.0625rem solid theme.$border-tile;
+      transition: background-color layout.$mode--transition-duration layout.$mode--transition-timing-function;
+
+      &:hover {
+        @include layer.layer-background-hover;
+      }
+
+      &:active {
+        @include layer.layer-background-active;
+      }
+
+      &:focus {
+        @include focus-outline.focus-outline('outline');
+      }
+
+      &::after {
+        @include icons.arrow--right;
+        content: '';
+        position: absolute;
+        color: theme.$link-primary;
+        inset-block-end: layout.$density--padding;
+        inset-inline-end: layout.$density--padding;
+        transition: color layout.$mode--transition-duration layout.$mode--transition-timing-function;
+      }
+
+      &:hover::after {
+        color: theme.$icon-primary;
+      }
+    }
+  }
+}

package/src/elements/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="time"])',
+  axis: 'block',
+);
+
+/// @group time-input
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(input[type="time"])']
+/// @param {'block' | 'axis'} 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="time"]',
+      ),
+      fixed-input-trailing-slots: 1,
+      input-invalid-slot: 'after',
+    ));
+
+    &::before {
+      @include labelled-input.input-trailing-slot {
+        @include icons.time;
+      }
+    }
+  }
+}

package/src/elements/toggle/index.scss

@@ -0,0 +1,106 @@
+/**
+ * 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 '@carbon/styles/scss/components/button/tokens' as carbon-button;
+
+@use '../label';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'label:has(button[role="switch"])',
+);
+
+$-block-size: 1.5rem;
+$-inline-size: 3rem;
+$-knob-spacing: 0.1875rem;
+$-knob-size: calc($-block-size - $-knob-spacing * 2);
+
+/// @group toggle
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(button[role="switch"])']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include label.styles((
+      selector: '&',
+    ));
+
+    inline-size: max-content;
+
+    & button[role="switch"] {
+      position: relative;
+      appearance: none;
+      border: none;
+      box-shadow: none;
+      padding: 0;
+      margin: 0;
+      block-size: $-block-size;
+      inline-size: $-inline-size;
+      border-radius: calc($-block-size * 0.5);
+      background-color: theme.$toggle-off;
+      transition: background-color layout.$mode--transition-duration layout.$mode--transition-timing-function;
+      cursor: pointer;
+
+      &:disabled,
+      &[aria-checked="true"]:disabled {
+        background-color: carbon-button.$button-disabled;
+        cursor: not-allowed;
+
+        &::before {
+          background-color: theme.$icon-on-color-disabled;
+        }
+      }
+
+      &:focus {
+        @include focus-outline.focus-outline('outline');
+        outline-offset: spacing.$spacing-01;
+      }
+    }
+
+    & button[role="switch"] > span {
+      @include layout.mode--body-compact;
+      position: absolute;
+      inset-inline-end: calc(spacing.$spacing-03 * -1);
+      inset-block-start: calc(($-block-size - 1lh) * 0.5);
+      translate: 100% 0;
+    }
+
+    & button[role="switch"] > span[aria-hidden="true"] {
+      display: none;
+    }
+
+    & button[role="switch"][aria-checked="true"] {
+      background-color: theme.$support-success;
+    }
+
+    & button[role="switch"]::before {
+      content: '';
+      display: block;
+      position: absolute;
+      block-size: $-knob-size;
+      inline-size: $-knob-size;
+      border-radius: 50%;
+      background-color: theme.$icon-on-color;
+      inset-inline-start: $-knob-spacing;
+      inset-block-start: $-knob-spacing;
+      transition: translate layout.$mode--transition-duration layout.$mode--transition-timing-function;
+    }
+
+    & button[role="switch"][aria-checked="true"]::before {
+      translate: calc($-inline-size - $-knob-size - $-knob-spacing * 2) 0;
+    }
+  }
+}

package/src/elements/tooltip/index.scss

@@ -0,0 +1,44 @@
+/**
+ * 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 '../popover';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: '[popover="hint"]',
+);
+
+/// @group tooltip
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['[popover="hint"]']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include popover.styles((
+      selector: '&',
+      caret: true,
+    ));
+
+    background-color: theme.$background-inverse;
+    color: theme.$text-inverse;
+    justify-self: anchor-center;
+    inset-inline: unset;
+
+    &::before {
+      inset-inline-start: 50%;
+      translate: -50% 0;
+    }
+  }
+}

package/src/elements/tree-view/index.scss

@@ -0,0 +1,127 @@
+/**
+ * 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 'sass:string';
+
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/utilities/focus-outline';
+
+@use '../../layout';
+@use '../../utilities/icons';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'ul[role="tree"]',
+);
+
+/// @group tree-view
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['ul[role="tree"]']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    background-color: theme.$layer;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    & li[role="treeitem"] > :is(span, a) {
+      @include layout.mode--body-compact;
+      color: theme.$text-secondary;
+      display: flex;
+      flex-direction: row;
+      column-gap: spacing.$spacing-03;
+      block-size: layout.$size--block-size;
+      padding-block-start: layout.$size--padding-block-start;
+      padding-block-end: layout.$size--padding-block-end;
+      padding-inline-end: layout.$density--padding;
+      box-sizing: border-box;
+      cursor: pointer;
+      transition-property: color, background-color;
+      transition-duration: layout.$mode--transition-duration;
+      transition-timing-function: layout.$mode--transition-timing-function;
+
+      &:hover {
+        background-color: theme.$layer-hover;
+        color: theme.$text-primary;
+      }
+
+      &:active {
+        background-color: theme.$layer-active;
+      }
+
+      & > svg {
+        fill: currentColor;
+        block-size: 1rem;
+        inline-size: 1rem;
+        translate: 0 0.0625rem;
+      }
+    }
+
+    & li[role="treeitem"]:focus {
+      outline: none;
+
+      & > :is(span, a) {
+        @include focus-outline.focus-outline('outline');
+      }
+    }
+
+    & li[role="treeitem"][aria-selected="true"] > :is(span, a) {
+      color: theme.$text-primary;
+      background-color: theme.$layer-selected;
+    }
+
+    & li[role="treeitem"][aria-current] > :is(span, a) {
+      box-shadow: inset 0.25rem 0 0 0 theme.$border-interactive;
+    }
+
+    & li[role="treeitem"][aria-disabled="true"] > :is(span, a) {
+      color: theme.$text-disabled;
+      cursor: not-allowed;
+
+      &:hover, &:active {
+        background-color: transparent;
+      }
+    }
+
+    & li[role="treeitem"] > ul[role="group"] {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    & li[role="treeitem"][aria-expanded="false"] > ul[role="group"] {
+      display: none;
+    }
+
+    & li[role="treeitem"][aria-expanded="false"] > :is(span, a)::before {
+      rotate: -90deg;
+    }
+
+    &:has([aria-expanded]) li[role="treeitem"] > :is(span, a)::before {
+      content: '';
+      display: block;
+      inline-size: 1rem;
+      translate: 0 0.0625rem;
+      transition: rotate layout.$mode--transition-duration layout.$mode--transition-timing-function;
+    }
+
+    & li[role="treeitem"][aria-expanded] > :is(span, a)::before {
+      @include icons.caret--down;
+    }
+
+    @for $i from 1 through 16 {
+      & li[role="treeitem"][aria-level="#{$i}"] > :is(span, a) {
+        padding-inline-start: calc(layout.$density--padding * $i);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+/**
+ * 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: 'ul',
+);
+
+/// @group unordered-list
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['ul']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    list-style-type: '–';
+    padding: 0;
+
+    & li {
+      @include layout.mode--body-compact;
+      max-inline-size: layout.$mode--max-inline-size;
+      margin-inline-start: layout.$density--padding;
+      padding-inline-start: spacing.$spacing-03;
+    }
+
+    & li li {
+      list-style-type: '▪';
+    }
+
+    & li p {
+      @include layout.mode--body-compact;
+      margin-block: 0;
+    }
+  }
+}

package/src/index.scss

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+@forward './utilities/carbon';
+
+@forward './layout';

package/src/layout/_density.scss

@@ -0,0 +1,27 @@
+/**
+ * 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 '../utilities/tokens';
+
+$-densities: (
+  condensed: spacing.$spacing-03,
+  normal: spacing.$spacing-05,
+);
+
+$-default-density: 'normal';
+
+/// @group layout--density
+/// @param {'condensed' | 'normal'} density ['normal']
+@mixin density($density: $-default-density) {
+  @include tokens.set('density--padding', map.get($-densities, $density));
+}
+
+$density--padding: tokens.get('density--padding', map.get($-densities, $-default-density));