@carbon/element-styles 0.2.0-rc.2

package/src/elements/range-input/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 '../label';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'label:has(input[type="range"])',
+  axis: 'block',
+);
+
+/// @group range-input
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(input[type="range"])']
+/// @param {'block' | 'axis'} config.axis ['block']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include label.styles((
+      selector: '&',
+      axis: map.get($props, 'axis'),
+    ));
+
+    & input[type="range"] {
+      display: block;
+      appearance: none;
+      background-color: transparent;
+      block-size: 1.25rem;
+    }
+
+    & input[type="range"]::-webkit-slider-thumb {
+      appearance: none;
+      block-size: 0.875rem;
+      inline-size: 0.875rem;
+      border-radius: 50%;
+      background-color: theme.$layer-selected-inverse;
+      translate: 0 calc(-50% + 0.125rem * 0.5);
+      cursor: pointer;
+    }
+
+    & input[type="range"]::-webkit-slider-runnable-track {
+      height: 0.125rem;
+      background-color: theme.$border-subtle;
+      cursor: pointer;
+    }
+
+    & input[type="range"]:focus {
+      outline: none;
+    }
+
+    & input[type="range"]:focus::-webkit-slider-thumb {
+      background-color: theme.$border-interactive;
+      outline: 0.125rem solid theme.$border-interactive;
+      outline-offset: calc(0.0625rem + 0.125rem);
+    }
+
+    & input[type="range"]:disabled::-webkit-slider-thumb,
+    & input[type="range"]::-webkit-slider-runnable-track {
+      background-color: theme.$border-disabled;
+      cursor: not-allowed;
+    }
+  }
+}

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

package/src/elements/select/index.scss

@@ -0,0 +1,71 @@
+/**
+ * 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 '../../layout';
+@use '../../utilities/icons';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'label:has(select)',
+  axis: 'block',
+);
+
+/// @group select
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(select)']
+/// @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: 'select',
+        emit-readonly: false,
+      ),
+      fixed-input-trailing-slots: 1,
+      input-invalid-slot: 'after',
+    ));
+
+    &::before {
+      @include labelled-input.input-trailing-slot {
+        @include icons.chevron--down;
+      }
+    }
+
+    & select {
+      cursor: pointer;
+
+      &: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/side-navigation/index.scss

@@ -0,0 +1,141 @@
+/**
+ * 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/utilities/focus-outline';
+
+@use '../../layout';
+@use '../../utilities/icons';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'nav:has(+ main)',
+);
+
+/// @group side-navigation
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['nav:has(+ main)']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    padding-block: layout.$density--padding;
+    inline-size: 16rem;
+    background-color: theme.$layer-background;
+    border-inline-end: 0.0625rem solid theme.$border-subtle;
+    position: fixed;
+    inset-inline-start: 0;
+    inset-block: 0;
+    overflow-y: auto;
+    box-sizing: border-box;
+
+    & ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    & li {
+      margin: 0;
+      padding: 0;
+    }
+
+    & li > button[aria-expanded],
+    & li > a {
+      @include layout.mode--heading-compact;
+      position: relative;
+      appearance: none;
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+      inline-size: 100%;
+      text-align: start;
+      display: block;
+      box-sizing: border-box;
+      color: theme.$text-secondary;
+      background-color: transparent;
+      text-decoration: none;
+      block-size: layout.$size--block-size;
+      padding-block-start: layout.$size--padding-block-start;
+      padding-block-end: layout.$size--padding-block-end;
+      padding-inline: layout.$density--padding;
+      cursor: pointer;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      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;
+      }
+
+      &:focus {
+        @include focus-outline.focus-outline('outline');
+      }
+    }
+
+    & li > button[aria-expanded] {
+      padding-inline-end: calc(layout.$density--padding + 1rem + layout.$density--padding);
+    }
+
+    & li > button[aria-expanded]::after {
+      content: '';
+      @include icons.chevron--down;
+      display: block;
+      position: absolute;
+      inset-inline-end: layout.$density--padding;
+      inset-block-start: layout.$size--padding-block-start;
+      transition: rotate layout.$mode--transition-duration layout.$mode--transition-timing-function;
+    }
+
+    & li > button[aria-expanded="true"]::after {
+      rotate: 180deg;
+    }
+
+    & li > button[aria-expanded] + ul a {
+      @include layout.mode--body-compact;
+      padding-inline-start: calc(layout.$density--padding * 2);
+    }
+
+    & li > button[aria-expanded]:has(+ ul a[aria-current="page"]) {
+      color: theme.$text-primary;
+    }
+
+    & li > button[aria-expanded="false"]:has(+ ul a[aria-current="page"]),
+    & li > button[aria-expanded] + ul a[aria-current="page"],
+    & li > a[aria-current="page"] {
+      @include layout.mode--heading-compact;
+      background-color: theme.$layer-selected;
+      box-shadow: inset 0.25rem 0 0 0 theme.$border-interactive;
+      color: theme.$text-primary;
+
+      &:hover {
+        background-color: theme.$layer-selected-hover;
+      }
+    }
+
+    & li > button[aria-expanded="false"] + ul {
+      display: none;
+    }
+
+    & + main,
+    & + main + footer {
+      margin-inline-start: 16rem;
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+/**
+ * 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 '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'small',
+);
+
+/// @group small-text
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['small']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include layout.mode--helper-text;
+    display: inline-block;
+    color: theme.$text-helper;
+  }
+}

package/src/elements/table/index.scss

@@ -0,0 +1,131 @@
+/**
+ * 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 '../_layer';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'table',
+  kind: 'data-table',
+);
+
+/// @group table
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['table']
+/// @param {'data-table' | 'structured-list' | 'structured-list--flush'} config.kind ['data-table']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    border-spacing: 0;
+    inline-size: 100%;
+    margin-block: layout.$mode--margin-block;
+
+    & th {
+      @include layout.mode--heading-compact;
+      text-align: start;
+      color: theme.$text-primary;
+    }
+
+    & td {
+      @include layout.mode--body-compact;
+      color: theme.$text-secondary;
+      vertical-align: top;
+    }
+
+    & th,
+    & td {
+      block-size: layout.$size--block-size;
+      box-sizing: border-box;
+      border-block-end: 0.0625rem solid theme.$border-subtle;
+      padding-block-start: layout.$size--padding-block-start;
+      padding-block-end: layout.$size--padding-block-end;
+      padding-inline: layout.$density--padding;
+    }
+
+    & tbody:has(+ tfoot) tr:last-child th,
+    & tbody:has(+ tfoot) tr:last-child td,
+    & tfoot th,
+    & tfoot td {
+      border-block-end: 0;
+    }
+
+    & tfoot td {
+      color: theme.$text-primary;
+    }
+
+    & caption {
+      text-align: start;
+      @include layout.mode--helper-text;
+      padding: layout.$density--padding;
+    }
+
+    @if map.get($props, 'kind') == 'data-table' {
+      background-color: theme.$layer;
+
+      & tbody tr,
+      & tfoot tr {
+        @include layer.styles;
+      }
+
+      & th {
+        background-color: theme.$layer-accent;
+      }
+
+      & tr:hover {
+        @include layer.layer-background-hover;
+      }
+
+      & tfoot th,
+      & tfoot td {
+        border-block-start: 0.0625rem solid theme.$border-strong;
+      }
+
+      & caption {
+        background-color: theme.$layer;
+        color: theme.$text-secondary;
+      }
+    }
+
+    @if map.get($props, 'kind') == 'structured-list' or map.get($props, 'kind') == 'structured-list--flush' {
+      & tfoot th,
+      & tfoot td {
+        border-block-start: 0.0625rem solid theme.$border-subtle;
+      }
+
+      & caption {
+        caption-side: bottom;
+        color: theme.$text-helper;
+        max-inline-size: layout.$mode--max-inline-size;
+      }
+    }
+
+    @if map.get($props, 'kind') == 'structured-list--flush' {
+      & th:first-child,
+      & td:first-child {
+        padding-inline-start: 0;
+      }
+
+      & th:last-child,
+      & td:last-child {
+        padding-inline-end: 0;
+      }
+
+      & caption {
+        padding-inline: 0;
+      }
+    }
+  }
+}

package/src/elements/tabs/index.scss

@@ -0,0 +1,214 @@
+/**
+ * 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 '@carbon/styles/scss/components/content-switcher/tokens' as carbon-content-switcher;
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: '[role="tablist"]',
+  kind: 'line',
+);
+
+/// @group tabs
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['[role="tablist"]']
+/// @param {'line' | 'contained' | 'content-swither | 'content-switcher--low-contrast'} config.kind ['line']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    display: flex;
+    flex-direction: row;
+
+    & button[role="tab"] {
+      @include layout.mode--body-compact;
+      position: relative;
+      appearance: none;
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+      background: none;
+      color: theme.$text-secondary;
+      block-size: layout.$size--block-size;
+      padding-inline: layout.$density--padding;
+      cursor: pointer;
+      transition-property: color, background-color, border-color;
+      transition-duration: layout.$mode--transition-duration;
+      transition-timing-function: layout.$mode--transition-timing-function;
+
+      &:enabled:hover:not([aria-selected="true"]) {
+        color: theme.$text-primary;
+      }
+
+      &:focus {
+        @include focus-outline.focus-outline('outline');
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
+
+    & ~ [role="tabpanel"] {
+      @include layout.mode--body;
+      padding: layout.$density--padding;
+    }
+
+    @if map.get($props, 'kind') == 'line' {
+      & button[role="tab"] {
+        border-block-end: 0.125rem solid theme.$border-subtle;
+        margin-inline-end: 0.0625rem;
+
+        &:enabled:hover:not([aria-selected="true"]) {
+          border-block-end-color: theme.$border-strong;
+        }
+
+        &[aria-selected="true"] {
+          @include layout.mode--heading-compact;
+          color: theme.$text-primary;
+          border-block-end-color: theme.$border-interactive;
+        }
+
+        &:disabled {
+          color: theme.$text-disabled;
+        }
+      }
+    }
+
+    @if map.get($props, 'kind') == 'contained' {
+      & button[role="tab"] {
+        background-color: theme.$layer-accent;
+        border-block-start: 0.125rem solid transparent;
+
+        &:not(:last-of-type, [aria-selected="true"], :has(+ [aria-selected="true"])) {
+          border-inline-end: 0.0625rem solid theme.$border-strong;
+        }
+
+        &:enabled:hover:not([aria-selected="true"]) {
+          background-color: theme.$layer-accent-hover;
+        }
+
+        &[aria-selected="true"] {
+          @include layout.mode--heading-compact;
+          color: theme.$text-primary;
+          border-block-start: 0.125rem solid theme.$border-interactive;
+          background-color: theme.$layer;
+        }
+
+        &:disabled {
+          background-color: carbon-button.$button-disabled;
+          color: theme.$text-on-color-disabled;
+        }
+      }
+
+      & ~ [role="tabpanel"] {
+        background-color: theme.$layer;
+      }
+    }
+
+    @if map.get($props, 'kind') == 'content-switcher' or map.get($props, 'kind') == 'content-switcher--low-contrast' {
+      & {
+        box-shadow: 0 0 0 0.0625rem theme.$border-inverse;
+        border-radius: 0.25rem;
+        display: inline-grid;
+        grid-auto-flow: column;
+        grid-auto-columns: 1fr;
+      }
+
+      & button[role="tab"] {
+        text-align: start;
+
+        &:first-child {
+          border-start-start-radius: inherit;
+          border-end-start-radius: inherit;
+        }
+
+        &:last-child {
+          border-start-end-radius: inherit;
+          border-end-end-radius: inherit;
+        }
+
+        &:enabled:hover:not([aria-selected="true"]) {
+          background-color: theme.$layer-hover;
+        }
+
+        &:enabled:active:not([aria-selected="true"]) {
+          background-color: theme.$layer-active;
+        }
+
+        &[aria-selected="true"] {
+          z-index: 1;
+          border-radius: inherit;
+          color: theme.$text-inverse;
+          background-color: theme.$border-inverse;
+        }
+
+        &:focus {
+          box-shadow: inset 0 0 0 0.1875rem theme.$background;
+        }
+
+        &:disabled {
+          color: theme.$text-disabled;
+        }
+
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          inset-inline-end: 0;
+          block-size: 1lh;
+          inset-block: calc(50% - 0.5lh);
+          inline-size: 0.0625rem;
+          background-color: theme.$border-subtle;
+        }
+
+        &[aria-selected="true"]::after,
+        &:last-child::after,
+        &:has(+ [aria-selected="true"])::after,
+        &:hover::after,
+        &:has(+ :hover)::after,
+        &:focus::after {
+          visibility: hidden;
+        }
+      }
+    }
+
+    @if map.get($props, 'kind') == 'content-switcher--low-contrast' {
+      & {
+        background-color: carbon-content-switcher.$content-switcher-background;
+        box-shadow: 0 0 0 0.0625rem theme.$border-strong;
+      }
+
+      & button[role="tab"] {
+        &:enabled:hover:not([aria-selected="true"]),
+        &:enabled:active:not([aria-selected="true"]) {
+          background-color: carbon-content-switcher.$content-switcher-background-hover;
+        }
+
+        &[aria-selected="true"] {
+          @include layout.mode--heading-compact;
+          background-color: carbon-content-switcher.$content-switcher-selected;
+          color: theme.$text-primary;
+          box-shadow: 0 0 0 0.0625rem theme.$border-inverse;
+        }
+
+        &::after {
+          background-color: theme.$border-strong;
+        }
+      }
+    }
+  }
+}