@carbon/element-styles 0.2.0-rc.2

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

@@ -0,0 +1,84 @@
+/**
+ * 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 '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'label:has(input[type="file"])',
+);
+
+/// @group file-input
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(input[type="file"])']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include layout.mode--heading-compact;
+    display: flex;
+    flex-direction: column;
+    row-gap: spacing.$spacing-03;
+
+    & input[type="file"]:focus {
+      outline: none;
+      box-shadow: none;
+    }
+
+    & input[type="file"]:focus::file-selector-button {
+      outline: 0.125rem solid theme.$focus;
+      outline-offset: -0.125rem;
+      box-shadow: inset 0 0 0 0.1875rem theme.$layer-background;
+    }
+
+    & input[type="file"]::file-selector-button {
+      @include layout.mode--body-compact;
+      appearance: none;
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+      text-align: start;
+      background-color: carbon-button.$button-primary;
+      color: theme.$text-on-color;
+      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: background-color layout.$mode--transition-duration layout.$mode--transition-timing-function;
+
+      &:hover {
+        background-color: carbon-button.$button-primary-hover;
+      }
+
+      &:active {
+        background-color: carbon-button.$button-primary-active;
+      }
+    }
+
+    &:has([disabled]) {
+      color: theme.$text-disabled;
+    }
+
+    & input[type="file"]:disabled::file-selector-button,
+    & input[type="file"]:disabled::file-selector-button:hover,
+    & input[type="file"]:disabled::file-selector-button:active {
+      cursor: not-allowed;
+      background-color: carbon-button.$button-disabled;
+      color: theme.$text-on-color-disabled;
+    }
+  }
+}

package/src/elements/footer/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/theme';
+@use '@carbon/styles/scss/spacing';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'main + footer',
+);
+
+/// @group footer
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['main + footer']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include layout.mode--body-compact;
+    color: theme.$text-secondary;
+    border-block-start: 0.0625rem solid theme.$border-subtle;
+    padding-inline: spacing.$spacing-07;
+    padding-block: layout.$density--padding;
+  }
+}

package/src/elements/header-navigation/index.scss

@@ -0,0 +1,125 @@
+/**
+ * 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';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'body > header:first-child',
+);
+
+/// @group header-navigation
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['body > header:first-child']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 9999;
+    inline-size: 100%;
+    block-size: layout.$size--block-size;
+    background-color: theme.$layer-background;
+    border-block-end: 0.0625rem solid theme.$border-subtle;
+    align-items: center;
+    display: flex;
+
+    & > nav {
+      flex-shrink: 0;
+      display: flex;
+      block-size: 100%;
+    }
+
+    & > nav ul {
+      position: relative;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      block-size: 100%;
+      display: flex;
+    }
+
+    & > nav ul li {
+      @include layout.mode--body-compact;
+      padding: 0;
+      margin: 0;
+      block-size: 100%;
+    }
+
+    & > nav ul li a {
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      color: theme.$text-secondary;
+      block-size: 100%;
+      padding-inline: layout.$density--padding;
+      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-hover;
+      }
+
+      &:focus {
+        @include focus-outline.focus-outline('outline');
+      }
+    }
+
+    & > nav ul li a[aria-current="page"] {
+      color: theme.$text-primary;
+      box-shadow: inset 0 -0.25rem 0 0 theme.$border-interactive;
+    }
+
+    & > nav a:first-child {
+      @include layout.mode--body-compact;
+      color: theme.$text-primary;
+      text-decoration: none;
+      padding-inline: layout.$density--padding;
+      block-size: 100%;
+      display: inline-flex;
+      align-items: center;
+      column-gap: spacing.$spacing-02;
+
+      &:focus {
+        @include focus-outline.focus-outline('outline');
+      }
+    }
+
+    & > nav a:first-child + ul {
+      margin-inline-start: layout.$density--padding;
+      padding-inline-start: layout.$density--padding;
+    }
+
+    & > nav a:first-child + ul::before {
+      content: '';
+      display: block;
+      inline-size: 0.0625rem;
+      inset-inline-start: -0.0625rem;
+      position: absolute;
+      inset-block: spacing.$spacing-04;
+      background-color: theme.$border-subtle;
+    }
+
+    & + nav {
+      inset-block-start: layout.$size--block-size;
+    }
+  }
+}

package/src/elements/heading-level-1/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 '../_heading';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'h1',
+);
+
+/// @group heading-level-1
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['h1']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include heading.styles;
+    @include layout.mode--heading-level-1;
+  }
+}

package/src/elements/heading-level-2/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 '../_heading';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'h2',
+);
+
+/// @group heading-level-2
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['h2']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include heading.styles;
+    @include layout.mode--heading-level-2;
+  }
+}

package/src/elements/heading-level-3/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 '../_heading';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'h3',
+);
+
+/// @group heading-level-3
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['h3']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include heading.styles;
+    @include layout.mode--heading-level-3;
+  }
+}

package/src/elements/heading-level-4/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 '../_heading';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'h4',
+);
+
+/// @group heading-level-4
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['h4']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include heading.styles;
+    @include layout.mode--heading-level-4;
+  }
+}

package/src/elements/heading-level-5/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 '../_heading';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'h5',
+);
+
+/// @group heading-level-5
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['h5']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include heading.styles;
+    @include layout.mode--heading-level-5;
+  }
+}

package/src/elements/heading-level-6/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 '../_heading';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'h6',
+);
+
+/// @group heading-level-6
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['h6']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include heading.styles;
+    @include layout.mode--heading-level-6;
+  }
+}

package/src/elements/horizontal-rule/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/theme';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'hr',
+  kind: 'subtle',
+);
+
+/// @group horizontal-rule
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['hr']
+/// @param {'subtle' | 'strong'} config.kind ['subtle']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    border: none;
+    block-size: 0.0625rem;
+    margin-block: layout.$mode--margin-block;
+
+    @if map.get($props, 'kind') == 'subtle' {
+      background-color: theme.$border-subtle;
+    }
+
+    @if map.get($props, 'kind') == 'strong' {
+      background-color: theme.$border-strong;
+    }
+  }
+}

package/src/elements/inline-loading/index.scss

@@ -0,0 +1,70 @@
+/**
+ * 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/spacing';
+@use '@carbon/styles/scss/motion';
+
+@use '../../config';
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: '[aria-live="polite"][aria-busy="true"]:empty',
+);
+
+$-size: 1rem;
+$-stroke-width: 0.125rem;
+
+/// @group inline-loading
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['[aria-live="polite"][aria-busy="true"]:empty']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+
+    display: flex;
+    align-items: center;
+    column-gap: spacing.$spacing-03;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      block-size: calc($-size - $-stroke-width * 2);
+      inline-size: calc($-size - $-stroke-width * 2);
+      border-radius: 50%;
+      border: $-stroke-width solid theme.$layer-accent;
+      border-block-end-color: theme.$border-interactive;
+      border-inline-end-color: theme.$border-interactive;
+      animation-name: #{carbon-config.$prefix}--#{config.$prefix}--inline-loading--spinner;
+      animation-duration: motion.$duration-slow-02;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+    }
+
+    &::after {
+      @include layout.mode--body-compact;
+      content: 'Loading';
+      color: theme.$text-secondary;
+    }
+
+    @keyframes #{carbon-config.$prefix}--#{config.$prefix}--inline-loading--spinner {
+      0% {
+        rotate: 0;
+      }
+
+      100% {
+        rotate: 360deg;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+/**
+ * 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: 'q',
+);
+
+/// @group inline-quotation
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['q']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    quotes: auto;
+    font-style: italic;
+  }
+}

package/src/elements/inserted-text/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/components/tag/tokens' as tag-tokens;
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'ins',
+);
+
+/// @group inserted-text
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['ins']
+@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-green;
+    color: tag-tokens.$tag-color-green;
+    text-decoration: underline;
+    text-decoration-style: dashed;
+  }
+}

package/src/elements/italic-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: 'i, em',
+);
+
+/// @group italic-text
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['i, em']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    font-style: italic;
+  }
+}

package/src/elements/keyboard-input/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/theme';
+@use '@carbon/styles/scss/spacing';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'kbd',
+);
+
+/// @group keyboard-input
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['kbd']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include layout.mode--code;
+    background-color: transparent;
+    outline: 0.0625rem solid theme.$border-subtle;
+    border-radius: 0.125rem;
+    padding-inline: spacing.$spacing-02;
+  }
+}