@carbon/ai-chat-components 0.10.0 → 0.11.0

package/scss/_custom-properties.scss

@@ -0,0 +1,70 @@
+/* 
+ *  Copyright IBM Corp. 2025
+ *  
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+// CSS Custom Properties for AI Chat Components
+// This file exports all tokens as CSS custom properties that can be customized by consumers
+
+@use "./utilities" as utilities;
+@use "./tokens-layout" as layout;
+@use "./tokens-component" as component;
+
+// ============================================================================
+// CSS Custom Properties Export
+// ============================================================================
+// These are the public API for customizing AI Chat Components
+// All properties use the --cds-aichat-* prefix
+:root {
+  // Layout tokens
+  @include utilities.declaration(
+    "messages-max-width",
+    layout.$messages-max-width
+  );
+  @include utilities.declaration(
+    "messages-min-width",
+    layout.$messages-min-width
+  );
+  @include utilities.declaration(
+    "workspace-min-width",
+    layout.$workspace-min-width
+  );
+  @include utilities.declaration("history-width", layout.$history-width);
+  @include utilities.declaration("card-max-width", layout.$card-max-width);
+
+  // Component tokens
+  @include utilities.declaration("border-radius", component.$border-radius);
+  @include utilities.declaration(
+    "card-border-radius",
+    component.$card-border-radius
+  );
+  @include utilities.declaration("border-radius", component.$border-radius);
+  @include utilities.declaration(
+    "border-radius-start-start",
+    component.$border-radius-start-start
+  );
+  @include utilities.declaration(
+    "border-radius-start-end",
+    component.$border-radius-start-end
+  );
+  @include utilities.declaration(
+    "border-radius-end-start",
+    component.$border-radius-end-start
+  );
+  @include utilities.declaration(
+    "border-radius-end-end",
+    component.$border-radius-end-end
+  );
+}
+
+// ============================================================================
+// Internal/Computed Properties (Documentation Only)
+// ============================================================================
+// These properties are set at runtime by JavaScript and should not be defined here:
+// - --cds-aichat-header-height: Set dynamically by chat-shell component based on header size
+// - --cds-aichat-scrollbar-width: May be set dynamically based on browser scrollbar width
+// - --cds-aichat-homescreen-starter-index: Set per-element for staggered animations
+
+// Made with Bob

package/scss/_modifiers.scss

@@ -0,0 +1,231 @@
+/* 
+ *  Copyright IBM Corp. 2025
+ *  
+ *  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/layout";
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/utilities/convert" as *;
+@use "./vars" as *;
+
+// Note: This file is utilized at multiple places. please ensure changes here
+// are compatible across all usages. since these modifiers are built with DRY principles,
+// any changes here will affect all components that use these mixins.
+
+/* ----- HELPERS ----- */
+@mixin host-and-attr($selector) {
+  :host(#{$selector}),
+  #{$selector} {
+    @content;
+  }
+}
+
+@mixin radius($positions...) {
+  @each $pos in $positions {
+    border-#{$pos}-radius: calc(
+      var(
+          --#{$prefix}-border-radius-#{$pos},
+          var(--#{$prefix}-border-radius)
+        ) - rem(1px)
+    );
+  }
+}
+
+/* ----- SHARED CHILD + BUTTON ROUNDING ----- */
+@mixin round-child($selector, $positions...) {
+  > #{$selector} {
+    @include radius($positions...);
+
+    &::part(button) {
+      @include radius($positions...);
+    }
+  }
+}
+
+/* ----- ROUNDED MODIFIERS ----- */
+
+/* ----- BASE (HOST-LEVEL ROUNDING) ----- */
+@mixin rounded-base {
+  @include host-and-attr('[data-rounded=""]') {
+    @include rounded-self;
+
+    &::part(link),
+    &::part(button) {
+      @include rounded-self;
+
+      outline-offset: rem(-1px);
+    }
+
+    > :only-child {
+      @include rounded-self;
+    }
+  }
+}
+
+/* ----- HOST-ONLY POSITIONAL ROUNDING ----- */
+$rounded-host-map: (
+  top: (
+    start-start,
+    start-end,
+  ),
+  top-left: (
+    start-start,
+  ),
+  top-right: (
+    start-end,
+  ),
+  bottom: (
+    end-start,
+    end-end,
+  ),
+  bottom-left: (
+    end-start,
+  ),
+  bottom-right: (
+    end-end,
+  ),
+);
+
+@mixin rounded-host-positions {
+  @each $key, $positions in $rounded-host-map {
+    @include host-and-attr('[data-rounded="#{$key}"]') {
+      @include radius($positions...);
+    }
+  }
+}
+
+@mixin rounded-self {
+  @each $key, $positions in $rounded-host-map {
+    @include radius($positions...);
+  }
+}
+
+/* ----- NON-STACKED CHILDREN ROUNDING ----- */
+$non-stacked-map: (
+  top: (
+    first: (
+      start-start,
+    ),
+    last: (
+      start-end,
+    ),
+  ),
+  top-left: (
+    first: (
+      start-start,
+    ),
+  ),
+  top-right: (
+    last: (
+      start-end,
+    ),
+  ),
+  bottom: (
+    first: (
+      end-start,
+    ),
+    last: (
+      end-end,
+    ),
+  ),
+  bottom-left: (
+    first: (
+      end-start,
+    ),
+  ),
+  bottom-right: (
+    last: (
+      end-end,
+    ),
+  ),
+);
+
+@mixin rounded-non-stacked {
+  @each $key, $children in $non-stacked-map {
+    @include host-and-attr('[data-rounded="#{$key}"]:not([data-stacked])') {
+      @each $pos, $radius in $children {
+        @include round-child(":#{$pos}-child", $radius...);
+      }
+    }
+  }
+}
+
+/* ----- STACKED CHILDREN ROUNDING ----- */
+$stacked-map: (
+  top: (
+    first: (
+      start-start,
+      start-end,
+    ),
+  ),
+  top-right: (
+    first: (
+      start-end,
+    ),
+  ),
+  top-left: (
+    first: (
+      start-start,
+    ),
+  ),
+  bottom: (
+    last: (
+      end-start,
+      end-end,
+    ),
+  ),
+  bottom-right: (
+    last: (
+      end-end,
+    ),
+  ),
+  bottom-left: (
+    last: (
+      end-start,
+    ),
+  ),
+);
+
+@mixin rounded-stacked {
+  @each $key, $children in $stacked-map {
+    @include host-and-attr('[data-rounded="#{$key}"][data-stacked]') {
+      @each $pos, $radius in $children {
+        @include round-child(":#{$pos}-child", $radius...);
+      }
+    }
+  }
+}
+
+/* ----- PUBLIC ROUNDED MODIFIERS ENTRY POINT ----- */
+@mixin rounded-modifiers {
+  @include rounded-base;
+  @include rounded-host-positions;
+  @include rounded-non-stacked;
+  @include rounded-stacked;
+}
+
+/* ----- LAYOUT MODIFIERS ----- */
+@mixin stacked-modifiers {
+  @include host-and-attr("[data-stacked]") {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@mixin flush-modifiers {
+  @include host-and-attr('[data-flush=""]') {
+    margin: calc(-1 * layout.$spacing-05);
+  }
+
+  @include host-and-attr('[data-flush="top"]') {
+    margin-block-start: calc(-1 * layout.$spacing-05);
+    margin-inline: calc(-1 * layout.$spacing-05);
+  }
+
+  @include host-and-attr('[data-flush="bottom"]') {
+    margin-block-end: calc(-1 * layout.$spacing-05);
+    margin-inline: calc(-1 * layout.$spacing-05);
+  }
+}

package/scss/_tokens-component.scss

@@ -0,0 +1,30 @@
+/* 
+ *  Copyright IBM Corp. 2025
+ *  
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+// Component tokens for AI Chat Components
+// These control component-specific styling like borders, radii, and typography
+
+@use "@carbon/layout";
+
+// ============================================================================
+// Component Tokens - Public Configurable
+// ============================================================================
+// These tokens can be customized by developers to adjust component appearance
+
+// Border radius tokens
+$border-radius: 0 !default;
+$card-border-radius: layout.$spacing-03 !default;
+
+// Rounded modifier radius tokens
+// These are used by the data-rounded modifier system to apply contextual rounding
+$border-radius: layout.$spacing-03 !default;
+$border-radius-start-start: layout.$spacing-03 !default;
+$border-radius-start-end: layout.$spacing-03 !default;
+$border-radius-end-start: layout.$spacing-03 !default;
+$border-radius-end-end: layout.$spacing-03 !default;
+
+// Made with Bob

package/scss/_tokens-layout.scss

@@ -0,0 +1,29 @@
+/* 
+ *  Copyright IBM Corp. 2025
+ *  
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+// Layout tokens for AI Chat Components
+// These control structural layout, spacing, and sizing across components
+
+@use "@carbon/layout";
+
+// ============================================================================
+// Layout Tokens - Public Configurable
+// ============================================================================
+// These tokens can be customized by developers to adjust layout dimensions
+
+// Messages area width constraints
+$messages-max-width: 672px !default;
+$messages-min-width: 320px !default;
+
+// Workspace and history panel widths
+$workspace-min-width: 480px !default;
+$history-width: 320px !default;
+
+// Card sizing
+$card-max-width: 424px !default;
+
+// Made with Bob

package/scss/_utilities.scss

@@ -0,0 +1,32 @@
+/* 
+ *  Copyright IBM Corp. 2025
+ *  
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+// Configuration for AI Chat Components CSS custom properties and SASS variables
+// Following @carbon/styles patterns for consistent naming and structure
+
+@use "./vars" as *;
+
+// Feature flags for fallback behavior
+$use-fallback-value: true !default;
+
+// Utility functions following Carbon's custom property patterns
+@function get-name($name) {
+  @return --#{$prefix}-#{$name};
+}
+
+@function get-var($name, $fallback: false) {
+  @if $fallback {
+    @return var(--#{$prefix}-#{$name}, #{$fallback});
+  }
+  @return var(--#{$prefix}-#{$name});
+}
+
+@mixin declaration($name, $value) {
+  #{get-name($name)}: #{$value};
+}
+
+// Made with Bob

package/scss/common.scss

@@ -0,0 +1,150 @@
+/* 
+ *  Copyright IBM Corp. 2025
+ *  
+ *  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/layout";
+@use "@carbon/styles/scss/utilities/component-reset";
+
+:host {
+  @include layout.emit-layout-tokens;
+  @include component-reset.reset;
+}
+
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font: inherit;
+  font-size: 1em;
+  vertical-align: baseline;
+}
+
+// Chrome 62 fix
+button,
+select,
+input,
+textarea {
+  border-radius: 0;
+  font-family: inherit;
+}
+
+// HTML5 display-role reset for older browsers
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+// List reset
+ol,
+ul {
+  list-style: none;
+}
+
+// Blockquote reset
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: none;
+}
+
+// Table reset
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

package/scss/grid.scss

@@ -0,0 +1,11 @@
+/* 
+ *  Copyright IBM Corp. 2025
+ *  
+ *  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/grid";
+
+// Emit the css-grid styles
+@include grid.css-grid();

package/scss/themes.scss

@@ -0,0 +1,33 @@
+/* 
+ *  Copyright IBM Corp. 2025
+ *  
+ *  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" as *;
+@use "@carbon/themes/scss/themes";
+@use "@carbon/styles/scss/theme";
+
+@use "@carbon/styles/scss/components/button/tokens" as button-tokens;
+@use "@carbon/styles/scss/components/tag/tokens" as tag-tokens;
+@use "@carbon/styles/scss/components/notification/tokens" as notification-tokens;
+@include theme.add-component-tokens(button-tokens.$button-tokens);
+@include theme.add-component-tokens(tag-tokens.$tag-tokens);
+@include theme.add-component-tokens(notification-tokens.$notification-tokens);
+
+.#{$prefix}-theme-zone-white {
+  @include theme.theme(themes.$white);
+}
+
+.#{$prefix}-theme-zone-g10 {
+  @include theme.theme(themes.$g10);
+}
+
+.#{$prefix}-theme-zone-g90 {
+  @include theme.theme(themes.$g90);
+}
+
+.#{$prefix}-theme-zone-g100 {
+  @include theme.theme(themes.$g100);
+}

package/scss/vars.scss

@@ -0,0 +1,12 @@
+/* 
+ *  Copyright IBM Corp. 2025
+ *  
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+// prefix for Carbon Design System components
+$cds-prefix: "cds" !default;
+
+// Set this to a suitable prefix for your project to use in style files
+$prefix: "#{$cds-prefix}-aichat" !default;