@carbon/element-styles 0.2.0-rc.2

package/src/prebuilt/productive.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';
+@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('g10');
+  color-scheme: light;
+
+  @media (prefers-color-scheme: dark) {
+    @include carbon.emit-carbon-tokens('g100');
+    color-scheme: dark;
+  }
+
+  @include layout.density('normal');
+  @include layout.mode('productive');
+  @include layout.size('md');
+
+  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;

package/src/utilities/_carbon.scss

@@ -0,0 +1,96 @@
+/**
+ * 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:meta';
+@use 'sass:map';
+
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes' as carbon-themes;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/grid';
+@use '@carbon/styles/scss/breakpoint';
+@use '@carbon/styles/scss/components/button/tokens' as carbon-button;
+@use '@carbon/styles/scss/components/tag/tokens' as carbon-tag;
+@use '@carbon/styles/scss/components/content-switcher/tokens' as carbon-content-switcher;
+@use '@carbon/styles/scss/utilities/custom-property';
+@use '@carbon/styles/scss/layer/layer-tokens';
+
+$-themes: (
+  'white': carbon-themes.$white,
+  'g10': carbon-themes.$g10,
+  'g90': carbon-themes.$g90,
+  'g100': carbon-themes.$g100,
+);
+
+$-component-token-groups: (
+  carbon-button.$button-tokens,
+  carbon-tag.$tag-tokens,
+  carbon-content-switcher.$content-switcher-tokens,
+);
+
+/// Emits all style and necessary component tokens for a given Carbon theme as css custom properties
+/// @group layout--mode
+/// @param {'white' | 'g10' | 'g90' | 'g100'} theme-name ['white']
+@mixin emit-carbon-tokens($theme-name: 'white') {
+  $theme: map.get($-themes, $theme-name);
+
+  @if $theme {
+    $tokens: $theme;
+
+    // derived from https://github.com/carbon-design-system/carbon/blob/a60a4d3071663b240c3122d8bc2c3558c788346f/packages/styles/scss/_zone.scss#L79-L99
+    @each $group in $-component-token-groups {
+      @each $key, $value in $group {
+        @if meta.type-of($value) == map {
+          $theme-values: map.get($value, values);
+
+          @each $theme-value in $theme-values {
+            $value: map.get($theme-value, value);
+
+            @if theme.matches(map.get($theme-value, theme), $theme) and meta.type-of($value) == color {
+              $tokens: map.set($tokens, $key, $value);
+            }
+          }
+        } @else if meta.type-of($value) == color {
+          $tokens: map.set($tokens, $key, $value);
+        }
+      }
+    }
+
+    @include theme.theme($tokens);
+  } @else {
+    @error '#{$theme-name} not found';
+  }
+
+  @include layer-tokens.emit-layer-tokens(1);
+
+  @each $breakpoint in map.keys(grid.$grid-breakpoints) {
+    @include breakpoint.breakpoint-up($breakpoint) {
+      @each $type-name, $type-styles in type.$tokens {
+        @if map.has-key($type-styles, 'breakpoints') {
+          $type-properties: map.get($type-styles, 'breakpoints', $breakpoint);
+
+          @if $type-properties != null {
+            @each $property, $value in $type-properties {
+              @include custom-property.declaration('#{$type-name}-#{$property}', $value);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/// Emits all colors in the IDL color palette as css custom properties
+/// @group layout--mode
+@mixin emit-carbon-colors() {
+  @each $palette, $values in colors.$colors {
+    @each $shade, $value in $values {
+      @include custom-property.declaration('#{$palette}-#{$shade}', $value);
+    }
+  }
+}

package/src/utilities/_icons.scss

@@ -0,0 +1,111 @@
+/**
+ * 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.
+ */
+
+// This file is generated by running "npm run build:icons".
+// Do not manually edit this file as changes will be lost.
+
+/// @group icons
+/// @param {Length} size [1rem]
+@mixin -icon($size: 1rem) {
+  @if ($size != null) {
+    block-size: $size;
+    inline-size: $size;
+  }
+
+  background-color: currentColor;
+}
+
+/// @group icons
+/// @param {Length} size [1rem]
+@mixin arrow--right($args...) {
+  @include -icon($args...);
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M18 6 16.57 7.393 24.15 15 4 15 4 17 24.15 17 16.57 24.573 18 26 28 16 18 6z'/></svg>");
+}
+
+/// @group icons
+/// @param {Length} size [1rem]
+@mixin calendar($args...) {
+  @include -icon($args...);
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20	V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z'/></svg>");
+}
+
+/// @group icons
+/// @param {Length} size [1rem]
+@mixin caret--down($args...) {
+  @include -icon($args...);
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M24 12 16 22 8 12z'/></svg>");
+}
+
+/// @group icons
+/// @param {Length} size [1rem]
+@mixin checkbox--checked--filled($args...) {
+  @include -icon($args...);
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM14,21.5,9,16.5427,10.5908,15,14,18.3456,21.4087,11l1.5918,1.5772Z'/><path fill='none' d='M14,21.5,9,16.5427,10.5908,15,14,18.3456,21.4087,11l1.5918,1.5772Z' data-icon-path='inner-path'/></svg>");
+}
+
+/// @group icons
+/// @param {Length} size [1rem]
+@mixin checkbox--indeterminate--filled($args...) {
+  @include -icon($args...);
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM22,18H10V14H22Z'/><path fill='none' d='M22,18H10V14H22Z' data-icon-path='inner-path'/></svg>");
+}
+
+/// @group icons
+/// @param {Length} size [1rem]
+@mixin checkbox($args...) {
+  @include -icon($args...);
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z'/></svg>");
+}
+
+/// @group icons
+/// @param {Length} size [1rem]
+@mixin checkmark($args...) {
+  @include -icon($args...);
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M13 24 4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z'/></svg>");
+}
+
+/// @group icons
+/// @param {Length} size [1rem]
+@mixin chevron--down($args...) {
+  @include -icon($args...);
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 22 6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z'/></svg>");
+}
+
+/// @group icons
+/// @param {Length} size [1rem]
+@mixin close($args...) {
+  @include -icon($args...);
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M17.4141 16 24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z'/></svg>");
+}
+
+/// @group icons
+/// @param {Length} size [1rem]
+@mixin event--schedule($args...) {
+  @include -icon($args...);
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M21,30a8,8,0,1,1,8-8A8,8,0,0,1,21,30Zm0-14a6,6,0,1,0,6,6A6,6,0,0,0,21,16Z'/><path d='M22.59 25 20 22.41 20 18 22 18 22 21.59 24 23.59 22.59 25z'/><path d='M28,6a2,2,0,0,0-2-2H22V2H20V4H12V2H10V4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2h4V26H6V6h4V8h2V6h8V8h2V6h4v6h2Z'/></svg>");
+}
+
+/// @group icons
+/// @param {Length} size [1rem]
+@mixin search($args...) {
+  @include -icon($args...);
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z'/></svg>");
+}
+
+/// @group icons
+/// @param {Length} size [1rem]
+@mixin time($args...) {
+  @include -icon($args...);
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z'/><path d='M20.59 22 15 16.41 15 7 17 7 17 15.58 22 20.59 20.59 22z'/></svg>");
+}
+
+/// @group icons
+/// @param {Length} size [1rem]
+@mixin warning--filled($args...) {
+  @include -icon($args...);
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14C30,8.3,23.7,2,16,2z M14.9,8h2.2v11h-2.2V8z M16,25	c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22c0.8,0,1.5,0.7,1.5,1.5S16.8,25,16,25z'/><path fill='none' d='M17.5,23.5c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22	C16.8,22,17.5,22.7,17.5,23.5z M17.1,8h-2.2v11h2.2V8z' data-icon-path='inner-path' opacity='0'/></svg>");
+}

package/src/utilities/_tokens.scss

@@ -0,0 +1,35 @@
+/**
+ * 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/utilities/custom-property';
+
+@use '../config';
+
+/// Sets a css custom property
+/// @group tokens
+/// @param {String} name
+/// @param {String} value
+@mixin set($name, $value) {
+  @include custom-property.declaration('#{config.$prefix}--#{$name}', $value);
+}
+
+/// Gets a css custom property value
+/// @group tokens
+/// @param {String} name
+/// @param {Bool} fallback [false] - Optionally provide a fallback value if the css custom property isn't set.
+/// @return {String} - The css custom property accessor (`var(--…)`)
+@function get($name, $fallback: false) {
+  @return custom-property.get-var('#{config.$prefix}--#{$name}', $fallback);
+}
+
+/// Gets a css custom property name
+/// @group tokens
+/// @param {String} name
+/// @return {String} - The css custom property name (`--…`)
+@function get-name($name) {
+  @return custom-property.get-name('#{config.$prefix}--#{$name}');
+}