@carbon/element-styles 0.2.0-rc.2

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

@@ -0,0 +1,143 @@
+/**
+ * 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 '../_input';
+
+@use '../../layout';
+@use '../../utilities/icons';
+
+$config: () !default;
+
+$-default-config: (
+  label: (
+    selector: 'label',
+    axis: 'block',
+  ),
+  input: (
+    selector: 'input',
+    emit-readonly: true,
+    emit-disabled: true,
+    emit-invalid: true,
+    emit-focus: true,
+  ),
+  fixed-input-leading-slots: 0,
+  fixed-input-trailing-slots: 0,
+  input-invalid-slot: false, // after | before
+);
+
+/// @group _labelled-input
+/// @param {Map} config [()]
+/// @param {Map} config.label [()]
+/// @param {Selector} config.label.selector [label]
+/// @param {'block' | 'inline'} config.label.axis ['block]
+/// @param {Map} config.input [()]
+/// @param {Selector} config.input.selector [input]
+/// @param {Bool} config.input.emit-readonly [true]
+/// @param {Bool} config.input.emit-disabled [true]
+/// @param {Bool} config.input.emit-invalid [true]
+/// @param {Bool} config.input.emit-focus [true]
+/// @param {0 | 1 | 2} config.fixed-input-leading-slots [0] - How many fixed leading slots should be reserved
+/// @param {0 | 1 | 2} config.fixed-input-trailing-slots [0] - How many fixed trailing slots should be reserved
+/// @param {false | 'before' | 'after'} config.input-invalid-slot [false] - Which pseudo element should render the dynamic invalid slot. `false` if it shouldn't be rendered at all.
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'label', 'selector')} {
+    @include label.styles((
+      selector: '&',
+      axis: map.get($props, 'label', 'axis'),
+    ));
+
+    position: relative;
+
+    #{map.get($props, 'input', 'selector')} {
+      @include input.styles((
+        selector: '&',
+        emit-readonly: map.get($props, 'input', 'emit-readonly'),
+        emit-disabled: map.get($props, 'input', 'emit-disabled'),
+        emit-invalid: map.get($props, 'input', 'emit-invalid'),
+        emit-focus: map.get($props, 'input', 'emit-focus'),
+      ));
+
+      padding-inline-start: -get-slot-space(map.get($props, 'fixed-input-leading-slots'));
+      padding-inline-end: -get-slot-space(map.get($props, 'fixed-input-trailing-slots'));
+    }
+
+    &::before,
+    &::after {
+      z-index: 9999;
+      position: absolute;
+      pointer-events: none;
+      inset-block-start: calc(layout.$size--padding-block-start - ((1rem - 1lh) * 0.5));
+
+      @if map.get($props, 'label', 'axis') == 'block' {
+        grid-row: 2;
+      } @else {
+        grid-column: 2;
+      }
+    }
+
+    @if map.get($props, 'input-invalid-slot') and map.get($props, 'input', 'emit-invalid') {
+      &:has(#{map.get($props, 'input', 'selector')}:invalid),
+      &:has(#{map.get($props, 'input', 'selector')}[aria-invalid="true"]) {
+        &::#{map.get($props, 'input-invalid-slot')} {
+          @include input-trailing-slot(map.get($props, 'fixed-input-trailing-slots') + 1) {
+            @include icons.warning--filled;
+            color: theme.$support-error;
+          }
+        }
+
+        #{map.get($props, 'input', 'selector')} {
+          padding-inline-end: -get-slot-space(map.get($props, 'fixed-input-trailing-slots') + 1);
+        }
+      }
+    }
+  }
+}
+
+@function -get-slot-offset($index: 1) {
+  @return calc((spacing.$spacing-03 + 1rem) * ($index - 1) + layout.$density--padding);
+}
+
+@function -get-slot-space($count: 0) {
+  $additional-inline-padding: 0rem;
+
+  @if $count > 0 {
+    $additional-inline-padding: layout.$density--padding;
+  }
+
+  /*
+      regular inline padding
+    + number of slots
+    + number of gaps between slots
+    + inline padding if has any slots
+  */
+  @return calc(
+      layout.$density--padding
+    + $count * 1rem
+    + max(($count - 1) * spacing.$spacing-03, 0rem)
+    + $additional-inline-padding
+  );
+}
+
+@mixin input-leading-slot($index: 1) {
+  content: '';
+  inset-inline-start: -get-slot-offset($index);
+  @content;
+}
+
+@mixin input-trailing-slot($index: 1) {
+  content: '';
+  inset-inline-end: -get-slot-offset($index);
+  @content;
+}

package/src/elements/_layer/index.scss

@@ -0,0 +1,78 @@
+/**
+ * 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/layer/layer-tokens';
+@use '@carbon/styles/scss/utilities/custom-property';
+
+@use '../../layout';
+@use '../../utilities/tokens';
+
+$config: () !default;
+
+$-default-config: ();
+
+/// @group _layer
+/// @param {'01' | '02' | '03'} n - The layer level
+/// @param {Bool} is-initial [false] - If this level should be treated as the intial, meaning it'll be used as a fallback if no matching css custom property is found
+@mixin -on-layer($n, $is-initial: false) {
+  @container style(#{tokens.get-name('layer-level')}: #{$n}) {
+    @content;
+  }
+
+  @if $is-initial {
+    // if custom property doesn't exist
+    @container style(#{tokens.get-name('layer-level')}: unset) {
+      @content;
+    }
+  }
+}
+
+/// @group _layer
+/// @param {Map} config [()]
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  // fallback for browers without container style query support
+  background-color: theme.$layer;
+
+  @include -on-layer('01', true) {
+    background-color: theme.$layer-background;
+    @include tokens.set('layer-level', '02');
+    @include layer-tokens.emit-layer-tokens(2);
+  }
+
+  @include -on-layer('02') {
+    background-color: theme.$layer-background;
+    @include tokens.set('layer-level', '03');
+    @include layer-tokens.emit-layer-tokens(3);
+  }
+
+  @include -on-layer('03') {
+    background-color: theme.$layer;
+  }
+}
+
+@mixin layer-background-hover {
+  // fallback for browers without container style query support
+  background-color: theme.$layer-hover;
+
+  @include -on-layer('01') { background-color: theme.$layer-hover-01; }
+  @include -on-layer('02') { background-color: theme.$layer-hover-02; }
+  @include -on-layer('03') { background-color: theme.$layer-hover-03; }
+}
+
+@mixin layer-background-active {
+  // fallback for browers without container style query support
+  background-color: theme.$layer-active;
+
+  @include -on-layer('01') { background-color: theme.$layer-active-01; }
+  @include -on-layer('02') { background-color: theme.$layer-active-02; }
+  @include -on-layer('03') { background-color: theme.$layer-active-03; }
+}

package/src/elements/abbreviation/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: 'abbr[title]',
+);
+
+/// @group abbreviation
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['abbr[title]']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    text-decoration: none;
+    cursor: help;
+    border-block-end: 0.0625rem dotted theme.$border-strong;
+  }
+}

package/src/elements/address/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: 'address',
+);
+
+/// @group address
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['address']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include layout.mode--helper-text;
+    color: theme.$text-secondary;
+    font-style: normal;
+  }
+}

package/src/elements/anchor/index.scss

@@ -0,0 +1,50 @@
+/**
+ * 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 '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'a',
+);
+
+/// @group anchor
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['a']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    display: inline-flex;
+    align-items: center;
+    column-gap: spacing.$spacing-03;
+    color: theme.$link-primary;
+    text-decoration: underline;
+    transition: color layout.$mode--transition-duration layout.$mode--transition-timing-function;
+
+    &:hover {
+      color: theme.$link-primary-hover;
+    }
+
+    &:focus {
+      @include focus-outline.focus-outline('outline');
+    }
+
+    & svg {
+      fill: currentColor;
+      block-size: 1rem;
+      inline-size: 1rem;
+    }
+  }
+}

package/src/elements/block-quotation/index.scss

@@ -0,0 +1,63 @@
+/**
+ * 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 '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'blockquote',
+);
+
+/// @group block-quotation
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['blockquote']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    margin-block: layout.$mode--margin-block;
+    margin-inline: spacing.$spacing-08;
+    max-inline-size: 50ch;
+
+    @include layout.mode--quotation;
+
+    & p {
+      @include layout.mode--quotation;
+      quotes: auto;
+    }
+
+    & p::before {
+      content: open-quote;
+      margin-inline-start: -1.1ch;
+    }
+
+    & p::after {
+      content: close-quote;
+    }
+
+    & p {
+      margin-block: 0;
+    }
+
+    & + cite {
+      @include layout.mode--body-compact;
+      margin-inline-start: spacing.$spacing-08;
+      font-style: italic;
+    }
+
+    & + cite::before {
+      content: '—';
+      margin-inline-end: spacing.$spacing-02;
+    }
+  }
+}

package/src/elements/body/index.scss

@@ -0,0 +1,30 @@
+/**
+ * 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 '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'body',
+);
+
+/// @group body
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['body']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    margin: 0;
+  }
+}

package/src/elements/bold-text/index.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 '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'b, strong',
+);
+
+/// @group bold-text
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['b, strong']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    font-weight: 600;
+  }
+}

package/src/elements/button/index.scss

@@ -0,0 +1,235 @@
+/**
+ * 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/spacing';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/components/button/tokens' as carbon-button;
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'button',
+  kind: 'secondary',
+);
+
+/// @group button
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['button']
+/// @param {'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger--primary' | 'danger--tertiary' | 'danger--ghost'} config.kind ['secondary']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include layout.mode--body-compact;
+    appearance: none;
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+    text-align: start;
+    block-size: layout.$size--block-size;
+    padding-block-start: layout.$size--padding-block-start;
+    padding-block-end: layout.$size--padding-block-end;
+    padding-inline-start: layout.$density--padding;
+    padding-inline-end: calc(layout.$density--padding + 1rem + layout.$density--padding);
+    cursor: pointer;
+    transition-property: color, background-color;
+    transition-duration: layout.$mode--transition-duration;
+    transition-timing-function: layout.$mode--transition-timing-function;
+
+    &:focus {
+      outline: 0.125rem solid theme.$focus;
+      outline-offset: -0.125rem;
+      box-shadow: inset 0 0 0 0.1875rem theme.$layer-background;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    & > svg {
+      fill: currentColor;
+      block-size: 1rem;
+      inline-size: 1rem;
+      translate: 0 0.125rem;
+    }
+
+    &:has(> svg:not(:only-child)) {
+      padding-inline-end: layout.$density--padding;
+
+      & > svg {
+        margin-inline-start: layout.$density--padding;
+      }
+    }
+
+    &:has(> svg:only-child) {
+      padding-inline: unset;
+      aspect-ratio: 1;
+      text-align: center;
+    }
+
+    @if map.get($props, 'kind') == 'primary' {
+      background-color: carbon-button.$button-primary;
+      color: theme.$text-on-color;
+
+      &:hover {
+        background-color: carbon-button.$button-primary-hover;
+      }
+
+      &:active {
+        background-color: carbon-button.$button-primary-active;
+      }
+
+      &:disabled {
+        background-color: carbon-button.$button-disabled;
+        color: theme.$text-on-color-disabled;
+      }
+    }
+
+    @if map.get($props, 'kind') == 'secondary' {
+      background-color: carbon-button.$button-secondary;
+      color: theme.$text-on-color;
+
+      &:enabled:hover {
+        background-color: carbon-button.$button-secondary-hover;
+      }
+
+      &:enabled:active {
+        background-color: carbon-button.$button-secondary-active;
+      }
+
+      &:disabled {
+        background-color: carbon-button.$button-disabled;
+        color: theme.$text-on-color-disabled;
+      }
+    }
+
+    @if map.get($props, 'kind') == 'tertiary' {
+      background-color: transparent;
+      color: carbon-button.$button-tertiary;
+      outline: 0.0625rem solid carbon-button.$button-tertiary;
+      outline-offset: -0.0625rem;
+
+      &:focus {
+        color: theme.$text-inverse;
+        background-color: carbon-button.$button-tertiary;
+      }
+
+      &:enabled:hover {
+        color: theme.$text-inverse;
+        background-color: carbon-button.$button-tertiary-hover;
+      }
+
+      &:enabled:active {
+        background-color: carbon-button.$button-tertiary-active;
+      }
+
+      &:disabled {
+        outline-color: carbon-button.$button-disabled;
+        color: theme.$text-disabled;
+      }
+    }
+
+    @if map.get($props, 'kind') == 'ghost' {
+      background-color: transparent;
+      color: theme.$link-primary;
+      padding-inline-end: layout.$density--padding;
+
+      &:enabled:hover {
+        color: theme.$link-primary-hover;
+        background-color: theme.$layer-hover;
+      }
+
+      &:enabled:active {
+        background-color: theme.$layer-active;
+      }
+
+      &:disabled {
+        color: theme.$text-disabled;
+      }
+
+      &:has(> svg:not(:only-child)) > svg {
+        margin-inline-start: spacing.$spacing-03;
+      }
+    }
+
+    @if map.get($props, 'kind') == 'danger--primary' {
+      background-color: carbon-button.$button-danger-primary;
+      color: theme.$text-on-color;
+
+      &:enabled:hover {
+        background-color: carbon-button.$button-danger-hover;
+      }
+
+      &:enabled:active {
+        background-color: carbon-button.$button-danger-active;
+      }
+
+      &:disabled {
+        background-color: carbon-button.$button-disabled;
+        color: theme.$text-on-color-disabled;
+      }
+    }
+
+    @if map.get($props, 'kind') == 'danger--tertiary' {
+      background-color: transparent;
+      color: carbon-button.$button-danger-secondary;
+      outline: 0.0625rem solid carbon-button.$button-danger-secondary;
+      outline-offset: -0.0625rem;
+
+      &:focus {
+        color: theme.$text-on-color;
+        background-color: carbon-button.$button-danger-primary;
+      }
+
+      &:enabled:hover {
+        color: theme.$text-on-color;
+        background-color: carbon-button.$button-danger-hover;
+        outline-color: carbon-button.$button-danger-hover;
+      }
+
+      &:enabled:active {
+        background-color: carbon-button.$button-danger-active;
+        outline-color: carbon-button.$button-danger-active;
+      }
+
+      &:disabled {
+        outline-color: carbon-button.$button-disabled;
+        color: theme.$text-disabled;
+      }
+    }
+
+    @if map.get($props, 'kind') == 'danger--ghost' {
+      background-color: transparent;
+      color: carbon-button.$button-danger-secondary;
+      padding-inline-end: layout.$density--padding;
+
+      &:enabled:hover {
+        color: theme.$text-on-color;
+        background-color: carbon-button.$button-danger-hover;
+        outline-color: carbon-button.$button-danger-hover;
+      }
+
+      &:enabled:active {
+        background-color: carbon-button.$button-danger-active;
+        outline-color: carbon-button.$button-danger-active;
+      }
+
+      &:disabled {
+        color: theme.$text-disabled;
+      }
+
+      &:has(> svg:not(:only-child)) > svg {
+        margin-inline-start: spacing.$spacing-03;
+      }
+    }
+  }
+}