@carbon/element-styles 0.2.0-rc.2

package/src/layout/_mode.scss

@@ -0,0 +1,349 @@
+/**
+ * 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/type';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/motion';
+@use '@carbon/styles/scss/breakpoint';
+@use '@carbon/styles/scss/utilities/custom-property';
+
+@use '../utilities/tokens';
+
+$-modes: (
+  'productive': (
+    constants: (
+      max-inline-size: 75ch,
+      margin-block: spacing.$spacing-05,
+      transition-duration: motion.$duration-fast-02,
+      transition-timing-function: motion.motion('standard', 'productive'),
+    ),
+    type-styles: (
+      body: (
+        name: 'body-01',
+        style: map.merge(type.$body-01, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      body-compact: (
+        name: 'body-compact-01',
+        style: map.merge(type.$body-01, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      heading: (
+        name: 'heading-01',
+        style: map.merge(type.$heading-01, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      heading-compact: (
+        name: 'heading-compact-01',
+        style: map.merge(type.$heading-01, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      label: (
+        name: 'label-01',
+        style: map.merge(type.$body-01, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      helper-text: (
+        name: 'helper-text-01',
+        style: map.merge(type.$body-01, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      code: (
+        name: 'code-01',
+        style: map.merge(type.$code-01, (
+          font-family: type.font-family('mono'),
+        )),
+      ),
+      quotation: (
+        name: 'quotation',
+        style: map.merge(type.$body-02, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      heading-level-1: (
+        name: 'heading-07',
+        style: map.merge(type.$heading-07, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      heading-level-2: (
+        name: 'heading-06',
+        style: map.merge(type.$heading-06, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      heading-level-3: (
+        name: 'heading-05',
+        style: map.merge(type.$heading-05, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      heading-level-4: (
+        name: 'heading-04',
+        style: map.merge(type.$heading-04, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      heading-level-5: (
+        name: 'heading-03',
+        style: map.merge(type.$heading-03, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      heading-level-6: (
+        name: 'heading-02',
+        style: map.merge(type.$heading-02, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+    ),
+  ),
+  'expressive': (
+    constants: (
+      max-inline-size: 60ch,
+      margin-block: spacing.$spacing-07,
+      transition-duration: motion.$duration-moderate-01,
+      transition-timing-function: motion.motion('standard', 'expressive'),
+    ),
+    type-styles: (
+      body: (
+        name: 'body-02',
+        style: map.merge(type.$body-01, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      body-compact: (
+        name: 'body-compact-02',
+        style: map.merge(type.$body-01, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      heading: (
+        name: 'heading-02',
+        style: map.merge(type.$heading-01, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      heading-compact: (
+        name: 'heading-compact-02',
+        style: map.merge(type.$heading-01, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      label: (
+        name: 'label-02',
+        style: map.merge(type.$body-01, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      helper-text: (
+        name: 'helper-text-02',
+        style: map.merge(type.$body-01, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      code: (
+        name: 'code-02',
+        style: map.merge(type.$code-02, (
+          font-family: type.font-family('mono'),
+        )),
+      ),
+      quotation: (
+        name: 'quotation',
+        style: type.$quotation-01,
+      ),
+      heading-level-1: (
+        name: 'fluid-display-02',
+        style: map.merge(type.$fluid-display-02, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      heading-level-2: (
+        name: 'fluid-display-01',
+        style: map.merge(type.$fluid-display-01, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      heading-level-3: (
+        name: 'fluid-heading-05',
+        style: map.merge(type.$fluid-heading-04, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      heading-level-4: (
+        name: 'fluid-heading-04',
+        style: map.merge(type.$fluid-heading-03, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      heading-level-5: (
+        name: 'heading-03',
+        style: map.merge(type.$heading-03, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+      heading-level-6: (
+        name: 'heading-02',
+        style: map.merge(type.$heading-02, (
+          font-family: type.font-family('sans'),
+        )),
+      ),
+    ),
+  ),
+);
+
+$-default-mode: 'productive';
+
+$-type-properties: (
+  'font-family',
+  'font-size',
+  'font-weight',
+  'line-height',
+  'letter-spacing',
+);
+
+/// Emits every property of a type style definition as css custom properties
+/// @group layout--mode
+/// @param {String} type-style - The type style name that the css custom properties should use (e.g. 'body-compact')
+/// @param {String} name - The Carbon type style name that should be used to generate fallbacks (e.g. 'body-compact-01')
+/// @param {Map} style - All type properties to emit. Must include all of: ('font-family', 'font-size', 'font-weight', 'line-height', 'letter-spacing')
+@mixin -emit-type-properties($type-style, $name, $style) {
+  @each $property in $-type-properties {
+    $fallback-value: map.get($style, $property);
+
+    @if $fallback-value {
+      @include tokens.set(
+        'mode--#{$type-style}-#{$property}',
+        custom-property.get-var(
+          '#{$name}-#{$property}',
+          $fallback-value,
+        ),
+      );
+    }
+  }
+}
+
+/// @group layout--mode
+/// @param {'productive' | 'expressive'} mode ['productive']
+@mixin mode($mode: $-default-mode) {
+  @each $constant, $value in map.get($-modes, $mode, 'constants') {
+    @include tokens.set('mode--#{$constant}', $value);
+  }
+
+  @each $type-style, $mapped-type-style in map.get($-modes, $mode, 'type-styles') {
+    $name: map.get($mapped-type-style, 'name');
+    $style: map.get($mapped-type-style, 'style');
+
+    @include -emit-type-properties($type-style, $name, $style);
+
+    @if map.has-key($style, 'breakpoints') {
+      @each $breakpoint, $overrides in map.get($style, 'breakpoints') {
+        @include breakpoint.breakpoint-up($breakpoint) {
+          @include -emit-type-properties($type-style, $name, $overrides);
+        }
+      }
+    }
+  }
+}
+
+$-default-constants: map.get($-modes, $-default-mode, 'constants');
+
+$mode--max-inline-size: tokens.get('mode--max-inline-size', map.get($-default-constants, 'max-inline-size'));
+$mode--margin-block: tokens.get('mode--margin-block', map.get($-default-constants, 'margin-block'));
+$mode--transition-duration: tokens.get('mode--transition-duration', map.get($-default-constants, 'transition-duration'));
+$mode--transition-timing-function: tokens.get('mode--transition-timing-function', map.get($-default-constants, 'transition-timing-function'));
+
+/// Defines all type properties for a given type style
+/// @group layout--mode
+/// @param {String} name
+@mixin -type-style($name) {
+  $type-style: map.get($-modes, $-default-mode, 'type-styles', $name, 'style');
+
+  @each $property in $-type-properties {
+    $fallback-value: map.get($type-style, $property);
+
+    #{$property}: tokens.get('mode--#{$name}-#{$property}', $fallback-value);
+  }
+}
+
+/// @group layout--mode
+@mixin mode--body {
+  @include -type-style('body');
+}
+
+/// @group layout--mode
+@mixin mode--body-compact {
+  @include -type-style('body-compact');
+}
+
+/// @group layout--mode
+@mixin mode--heading {
+  @include -type-style('heading');
+}
+
+/// @group layout--mode
+@mixin mode--heading-compact {
+  @include -type-style('heading-compact');
+}
+
+/// @group layout--mode
+@mixin mode--label {
+  @include -type-style('label');
+}
+
+/// @group layout--mode
+@mixin mode--helper-text {
+  @include -type-style('helper-text');
+}
+
+/// @group layout--mode
+@mixin mode--code {
+  @include -type-style('code');
+}
+
+/// @group layout--mode
+@mixin mode--quotation {
+  @include -type-style('quotation');
+}
+
+/// @group layout--mode
+@mixin mode--heading-level-1 {
+  @include -type-style('heading-level-1');
+}
+
+/// @group layout--mode
+@mixin mode--heading-level-2 {
+  @include -type-style('heading-level-2');
+}
+
+/// @group layout--mode
+@mixin mode--heading-level-3 {
+  @include -type-style('heading-level-3');
+}
+
+/// @group layout--mode
+@mixin mode--heading-level-4 {
+  @include -type-style('heading-level-4');
+}
+
+/// @group layout--mode
+@mixin mode--heading-level-5 {
+  @include -type-style('heading-level-5');
+}
+
+/// @group layout--mode
+@mixin mode--heading-level-6 {
+  @include -type-style('heading-level-6');
+}

package/src/layout/_size.scss

@@ -0,0 +1,54 @@
+/**
+ * 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 '../utilities/tokens';
+
+$-sizes: (
+  xs: 1.5rem,
+  sm: 2rem,
+  md: 2.5rem,
+  lg: 3rem,
+  xl: 4rem,
+);
+
+$-default-size: 'md';
+
+/// @group layout--size
+/// @param {Length} block-size
+/// @return {Length} The appropriate padding-block-start for an element with the given block-size
+@function -get-padding-block-start($block-size) {
+  $centering-threshold: map.get($-sizes, 'lg');
+
+  @return calc((min($block-size, $centering-threshold) - 1lh) * 0.5);
+}
+
+/// @group layout--size
+/// @param {Length} block-size
+/// @return {Length} The appropriate padding-block-end for an element with the given block-size
+@function -get-padding-block-end($block-size) {
+  $padding-block-start: -get-padding-block-start($block-size);
+
+  @return calc($block-size - 1lh - $padding-block-start);
+}
+
+/// @group layout--size
+/// @param {'xs' | 'sm' | 'md' | 'lg' | 'xl'} size ['md']
+@mixin size($size: $-default-size) {
+  $block-size: map.get($-sizes, $size);
+
+  @include tokens.set('size--block-size', $block-size);
+  @include tokens.set('size--padding-block-start', -get-padding-block-start($block-size));
+  @include tokens.set('size--padding-block-end', -get-padding-block-end($block-size));
+}
+
+$-default-block-size: map.get($-sizes, $-default-size);
+
+$size--block-size: tokens.get('size--block-size', $-default-block-size);
+$size--padding-block-start: tokens.get('size--padding-block-start', -get-padding-block-start($-default-block-size));
+$size--padding-block-end: tokens.get('size--padding-block-end', -get-padding-block-end($-default-block-size));

package/src/layout/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 './density';
+@forward './mode';
+@forward './size';

package/src/prebuilt/editorial.scss

@@ -0,0 +1,94 @@
+/**
+ * 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 '@carbon/styles/scss/config' with (
+  $use-akamai-cdn: true,
+);
+@use '@carbon/styles/scss/fonts';
+
+@use '@carbon/styles/scss/theme';
+
+@use '../utilities/carbon';
+@use '../layout';
+
+@use '../elements/abbreviation';
+@use '../elements/anchor';
+@use '../elements/block-quotation';
+@use '../elements/body';
+@use '../elements/bold-text';
+@use '../elements/code';
+@use '../elements/deleted-text';
+@use '../elements/description-list';
+@use '../elements/details';
+@use '../elements/heading-level-1';
+@use '../elements/heading-level-2';
+@use '../elements/heading-level-3';
+@use '../elements/heading-level-4';
+@use '../elements/heading-level-5';
+@use '../elements/heading-level-6';
+@use '../elements/horizontal-rule';
+@use '../elements/inline-quotation';
+@use '../elements/inserted-text';
+@use '../elements/italic-text';
+@use '../elements/keyboard-input';
+@use '../elements/main';
+@use '../elements/marked-text';
+@use '../elements/ordered-list';
+@use '../elements/paragraph';
+@use '../elements/preformatted';
+@use '../elements/small-text';
+@use '../elements/table' with ($config: (
+  kind: 'structured-list',
+));
+@use '../elements/unordered-list';
+
+:root {
+  @include carbon.emit-carbon-colors;
+
+  @include carbon.emit-carbon-tokens('white');
+  color-scheme: light;
+
+  @media (prefers-color-scheme: dark) {
+    @include carbon.emit-carbon-tokens('g100');
+    color-scheme: dark;
+  }
+
+  @include layout.density('normal');
+  @include layout.mode('expressive');
+  @include layout.size('lg');
+
+  background-color: theme.$background;
+}
+
+@include abbreviation.styles;
+@include anchor.styles;
+@include block-quotation.styles;
+@include body.styles;
+@include bold-text.styles;
+@include code.styles;
+@include deleted-text.styles;
+@include description-list.styles;
+@include details.styles;
+@include heading-level-1.styles;
+@include heading-level-2.styles;
+@include heading-level-3.styles;
+@include heading-level-4.styles;
+@include heading-level-5.styles;
+@include heading-level-6.styles;
+@include horizontal-rule.styles;
+@include inline-quotation.styles;
+@include inserted-text.styles;
+@include italic-text.styles;
+@include keyboard-input.styles;
+@include main.styles;
+@include marked-text.styles;
+@include ordered-list.styles;
+@include paragraph.styles;
+@include preformatted.styles;
+@include small-text.styles;
+@include table.styles;
+@include unordered-list.styles;

package/src/prebuilt/expressive.scss

@@ -0,0 +1,153 @@
+/**
+ * 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 '@carbon/styles/scss/config' with (
+  $use-akamai-cdn: true,
+);
+@use '@carbon/styles/scss/fonts';
+
+@use '@carbon/styles/scss/theme';
+
+@use '../utilities/carbon';
+@use '../layout';
+
+@use '../elements/abbreviation';
+@use '../elements/address';
+@use '../elements/anchor';
+@use '../elements/block-quotation';
+@use '../elements/body';
+@use '../elements/bold-text';
+@use '../elements/button';
+@use '../elements/checkbox';
+@use '../elements/code';
+@use '../elements/combo-box';
+@use '../elements/date-input';
+@use '../elements/date-time-input';
+@use '../elements/deleted-text';
+@use '../elements/description-list';
+@use '../elements/details';
+@use '../elements/dialog';
+@use '../elements/fieldset';
+@use '../elements/file-input';
+@use '../elements/footer';
+@use '../elements/header-navigation';
+@use '../elements/heading-level-1';
+@use '../elements/heading-level-2';
+@use '../elements/heading-level-3';
+@use '../elements/heading-level-4';
+@use '../elements/heading-level-5';
+@use '../elements/heading-level-6';
+@use '../elements/horizontal-rule';
+@use '../elements/inline-loading';
+@use '../elements/inline-quotation';
+@use '../elements/inserted-text';
+@use '../elements/italic-text';
+@use '../elements/keyboard-input';
+@use '../elements/label';
+@use '../elements/main';
+@use '../elements/marked-text';
+@use '../elements/menu';
+@use '../elements/number-input';
+@use '../elements/ordered-list';
+@use '../elements/paragraph';
+@use '../elements/password-input';
+@use '../elements/popover';
+@use '../elements/preformatted';
+@use '../elements/progress-bar';
+@use '../elements/radio-button';
+@use '../elements/range-input';
+@use '../elements/search-input';
+@use '../elements/select';
+@use '../elements/side-navigation';
+@use '../elements/small-text';
+@use '../elements/table' with ($config: (kind: 'structured-list' ));
+@use '../elements/text-area';
+@use '../elements/text-input';
+@use '../elements/tile';
+@use '../elements/time-input';
+@use '../elements/toggle';
+@use '../elements/tooltip';
+@use '../elements/tree-view';
+@use '../elements/unordered-list';
+
+:root {
+  @include carbon.emit-carbon-colors;
+
+  @include carbon.emit-carbon-tokens('white');
+  color-scheme: light;
+
+  @media (prefers-color-scheme: dark) {
+    @include carbon.emit-carbon-tokens('g100');
+    color-scheme: dark;
+  }
+
+  @include layout.density('normal');
+  @include layout.mode('expressive');
+  @include layout.size('lg');
+
+  background-color: theme.$background;
+}
+
+@include abbreviation.styles;
+@include address.styles;
+@include anchor.styles;
+@include block-quotation.styles;
+@include body.styles;
+@include bold-text.styles;
+@include button.styles;
+@include button.styles((
+  selector: 'button[type="submit"]',
+  kind: 'primary',
+));
+@include checkbox.styles;
+@include code.styles;
+@include combo-box.styles;
+@include date-input.styles;
+@include date-time-input.styles;
+@include deleted-text.styles;
+@include description-list.styles;
+@include details.styles;
+@include dialog.styles;
+@include fieldset.styles;
+@include file-input.styles;
+@include footer.styles;
+@include header-navigation.styles;
+@include heading-level-1.styles;
+@include heading-level-2.styles;
+@include heading-level-3.styles;
+@include heading-level-4.styles;
+@include heading-level-5.styles;
+@include heading-level-6.styles;
+@include horizontal-rule.styles;
+@include inline-loading.styles;
+@include inline-quotation.styles;
+@include inserted-text.styles;
+@include italic-text.styles;
+@include keyboard-input.styles;
+@include label.styles;
+@include main.styles;
+@include marked-text.styles;
+@include number-input.styles;
+@include ordered-list.styles;
+@include paragraph.styles;
+@include password-input.styles;
+@include popover.styles;
+@include preformatted.styles;
+@include radio-button.styles;
+@include range-input.styles;
+@include search-input.styles;
+@include select.styles;
+@include side-navigation.styles;
+@include small-text.styles;
+@include table.styles;
+@include text-area.styles;
+@include text-input.styles;
+@include tile.styles;
+@include time-input.styles;
+@include toggle.styles;
+@include tooltip.styles;
+@include unordered-list.styles;