@carbon/element-styles 0.2.0-rc.2

package/src/elements/label/index.scss

@@ -0,0 +1,52 @@
+/**
+ * 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: 'label',
+  axis: 'block',
+);
+
+/// @group label
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label']
+/// @param {'block' | 'axis'} config.axis ['block']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    display: grid;
+    gap: spacing.$spacing-03;
+    color: theme.$text-secondary;
+
+    &:has([disabled]) {
+      color: theme.$text-disabled;
+    }
+
+    @if map.get($props, 'axis') == 'block' {
+      @include layout.mode--label;
+      // flex-direction: column;
+      grid-auto-flow: row;
+    }
+
+    @if map.get($props, 'axis') == 'inline' {
+      @include layout.mode--body-compact;
+      // flex-direction: row;
+      grid-auto-flow: column;
+      align-items: center;
+      inline-size: fit-content;
+    }
+  }
+}

package/src/elements/main/index.scss

@@ -0,0 +1,32 @@
+/**
+ * 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: 'main',
+);
+
+/// @group main
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['main']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    padding-inline: spacing.$spacing-07;
+    padding-block-start: spacing.$spacing-07;
+    padding-block-end: spacing.$spacing-10;
+  }
+}

package/src/elements/marked-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/colors';
+@use '@carbon/styles/scss/theme';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'mark',
+);
+
+/// @group marked-text
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['mark']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    padding-inline: spacing.$spacing-01;
+    background-color: colors.$yellow-20;
+    color: colors.$black;
+  }
+}

package/src/elements/menu/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/box-shadow';
+@use '@carbon/styles/scss/utilities/focus-outline';
+
+@use '../../layout';
+@use '../../utilities/icons';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'ul[role="menu"]',
+);
+
+/// @group menu
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['ul[role="menu"]']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include box-shadow.box-shadow;
+    background-color: theme.$layer;
+    list-style: none;
+    margin: 0;
+    padding-inline: 0;
+    padding-block: spacing.$spacing-02;
+    inline-size: 14rem;
+
+    & li[role="menuitem"],
+    & li[role="menuitemcheckbox"],
+    & li[role="menuitemradio"] {
+      @include layout.mode--body-compact;
+      display: flex;
+      column-gap: spacing.$spacing-03;
+      color: theme.$text-secondary;
+      padding-inline: layout.$density--padding;
+      block-size: layout.$size--block-size;
+      padding-block-start: layout.$size--padding-block-start;
+      padding-block-end: layout.$size--padding-block-end;
+      box-sizing: border-box;
+      cursor: pointer;
+
+      &:hover {
+        background-color: theme.$layer-hover;
+        color: theme.$text-primary;
+      }
+
+      &:active {
+        background-color: theme.$layer-active;
+      }
+
+      &:focus {
+        @include focus-outline.focus-outline('outline');
+      }
+    }
+
+    &:has(li[aria-checked]) {
+      & li[role="menuitem"]::before,
+      & li[role="menuitemcheckbox"]::before,
+      & li[role="menuitemradio"]::before {
+        content: '';
+        display: block;
+        inline-size: 1rem;
+        translate: 0 0.0625rem;
+      }
+    }
+
+    & li[role="menuitemcheckbox"][aria-checked="true"]::before,
+    & li[role="menuitemradio"][aria-checked="true"]::before {
+      @include icons.checkmark;
+    }
+
+    & li > svg {
+      fill: currentColor;
+      block-size: 1rem;
+      inline-size: 1rem;
+      translate: 0 0.0625rem;
+    }
+
+    &:has(li > svg) li:not(:has(> svg)):is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) {
+      column-gap: calc(spacing.$spacing-03 + 1rem + spacing.$spacing-03);
+    }
+
+    & li[role="separator"] {
+      block-size: 0.0625rem;
+      background-color: theme.$border-subtle;
+      margin-block: spacing.$spacing-02;
+    }
+
+    & ul[role="group"] {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+  }
+}

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

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

package/src/elements/ordered-list/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/spacing';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'ol',
+);
+
+/// @group ordered-list
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['ol']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    list-style-type: decimal;
+    padding: 0;
+    margin-inline-start: layout.$density--padding;
+
+    & li {
+      @include layout.mode--body-compact;
+      max-inline-size: layout.$mode--max-inline-size;
+      margin-inline-start: spacing.$spacing-03;
+    }
+
+    & li p {
+      @include layout.mode--body-compact;
+      margin-block: 0;
+    }
+
+    & ol {
+      list-style-type: lower-alpha;
+    }
+
+    & ol ol {
+      list-style-type: lower-roman;
+    }
+  }
+}

package/src/elements/paragraph/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 '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'p',
+);
+
+/// @group paragraph
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['p']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include layout.mode--body;
+    max-inline-size: layout.$mode--max-inline-size;
+    margin-block: layout.$mode--margin-block;
+    text-wrap: pretty;
+  }
+}

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

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

package/src/elements/popover/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 '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/utilities/box-shadow';
+
+@use '../_layer';
+
+@use '../../layout';
+@use '../../utilities/tokens';
+
+$config: () !default;
+
+$-default-config: (
+  selector: '[popover]',
+  caret: true,
+);
+
+/// @group popover
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['[popover]']
+/// @param {Bool} config.caret [true]
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  $-caret-size: 0rem;
+  @if map.get($props, 'caret') {
+    $-caret-size: 0.75rem;
+  }
+
+  #{map.get($props, 'selector')} {
+    @include layer.styles;
+    @include box-shadow.box-shadow;
+    @include layout.mode--body;
+    position: absolute;
+    inset: unset;
+    margin: 0;
+    inset-block-start: calc(anchor(end) + spacing.$spacing-02 + ($-caret-size * 0.5));
+    inset-inline-start: calc(anchor(start) + spacing.$spacing-02);
+    border: none;
+    border-radius: 0.125rem;
+    padding: layout.$density--padding;
+    overflow: visible;
+
+    &::before {
+      @include box-shadow.box-shadow;
+      content: '';
+      position: absolute;
+      display: block;
+      block-size: $-caret-size;
+      inline-size: $-caret-size;
+      rotate: -45deg;
+      background-color: inherit;
+      inset-block-start: calc($-caret-size * -0.5);
+      inset-inline-start: layout.$density--padding;
+      clip-path: polygon(
+        0% 0%,
+        100% 0%,
+        100% 100%,
+        0% 0%,
+      );
+    }
+  }
+}

package/src/elements/preformatted/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 '@carbon/styles/scss/theme';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'pre',
+);
+
+/// @group preformatted
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['pre']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include layout.mode--code;
+    white-space: pre;
+    margin-block: layout.$mode--margin-block;
+    padding: layout.$density--padding;
+    background-color: theme.$layer;
+    inline-size: 100%;
+    overflow-x: auto;
+    box-sizing: border-box;
+
+    & code {
+      box-shadow: none;
+      border-radius: 0;
+      padding-inline: 0;
+      background-color: transparent;
+    }
+  }
+}

package/src/elements/progress-bar/index.scss

@@ -0,0 +1,86 @@
+/**
+ * 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/config' as carbon-config;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/motion';
+
+@use '../label';
+
+@use '../../config';
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'label:has(progress)',
+  axis: 'block',
+  thickness: 'thick',
+);
+
+$-indeterminate-ratio: 0.25;
+
+/// @group progress-bar
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['progress']
+/// @param {'block' | 'axis'} config.axis ['block']
+/// @param {'thick' | 'thin'} config.thickness ['thick']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include label.styles((
+      selector: '&',
+      axis: map.get($props, 'axis'),
+    ));
+
+    & progress {
+      appearance: none;
+
+      @if map.get($props, 'thickness') == 'thick' {
+        block-size: 0.5rem;
+      }
+
+      @if map.get($props, 'thickness') == 'thin' {
+        block-size: 0.25rem;
+      }
+    }
+
+    & progress::-webkit-progress-bar {
+      background-color: theme.$layer;
+      block-size: inherit;
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+      overflow: hidden;
+    }
+
+    & progress::-webkit-progress-value {
+      background-color: theme.$interactive;
+    }
+
+    & progress:not([value])::-webkit-progress-value {
+      inline-size: calc(100% * $-indeterminate-ratio);
+      animation-name: #{carbon-config.$prefix}--#{config.$prefix}--progress-bar--indeterminate;
+      animation-duration: calc(motion.$duration-slow-02 * 2);
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+    }
+
+    @keyframes #{carbon-config.$prefix}--#{config.$prefix}--progress-bar--indeterminate {
+      0% {
+        translate: -100% 0;
+      }
+
+      100% {
+        translate: calc(100% / $-indeterminate-ratio) 0;
+      }
+    }
+  }
+}

package/src/elements/radio-button/index.scss

@@ -0,0 +1,67 @@
+/**
+ * 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 '../label';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'label:has(input[type="radio"])',
+);
+
+/// @group radio-button
+/// @param {Map} config [()]
+/// @param {Selector} config.selector [''label:has(input[type="radio"])'']
+@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="radio"] {
+      grid-column: 1;
+      position: relative;
+      appearance: none;
+      border: none;
+      block-size: 1rem;
+      inline-size: 1rem;
+      border-radius: 50%;
+      color: theme.$icon-primary;
+      border: 0.0625rem solid currentColor;
+
+      &:focus {
+        @include focus-outline.focus-outline('outline');
+        outline-offset: 0.125rem;
+      }
+
+      &:disabled {
+        color: theme.$icon-disabled;
+      }
+
+      &:checked::before {
+        content: '';
+        position: absolute;
+        inset: 0.25rem;
+        border-radius: 50%;
+        background-color: currentColor;
+      }
+    }
+  }
+}