@carbon/styles/scss/__tests__/theme-test.js

Styles for the Carbon Design System

/**
 * Copyright IBM Corp. 2018, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @jest-environment node
 */

'use strict';

const { SassRenderer } = require('@carbon/test-utils/scss');

const { render } = SassRenderer.create(__dirname);

describe('@carbon/styles/scss/theme', () => {
  test('Public API', async () => {
    const { get } = await render(`
      @use 'sass:map';
      @use 'sass:meta';
      @use '../theme';

      $_: get('api', (
        variables: map.keys(meta.module-variables('theme')),
        mixins: (
          theme: meta.mixin-exists('theme', 'theme'),
        ),
      ));
    `);

    const { value: api } = get('api');
    expect(api.mixins).toEqual({
      theme: true,
    });
    expect(api.variables).toMatchInlineSnapshot(`
      Array [
        "fallback",
        "theme",
        "background",
        "background-active",
        "background-selected",
        "background-selected-hover",
        "background-hover",
        "background-brand",
        "background-inverse",
        "background-inverse-hover",
        "layer-01",
        "layer-active-01",
        "layer-background-01",
        "layer-hover-01",
        "layer-selected-01",
        "layer-selected-hover-01",
        "layer-02",
        "layer-active-02",
        "layer-background-02",
        "layer-hover-02",
        "layer-selected-02",
        "layer-selected-hover-02",
        "layer-03",
        "layer-active-03",
        "layer-background-03",
        "layer-hover-03",
        "layer-selected-03",
        "layer-selected-hover-03",
        "layer-selected-inverse",
        "layer-selected-disabled",
        "layer-accent-01",
        "layer-accent-active-01",
        "layer-accent-hover-01",
        "layer-accent-02",
        "layer-accent-active-02",
        "layer-accent-hover-02",
        "layer-accent-03",
        "layer-accent-active-03",
        "layer-accent-hover-03",
        "field-01",
        "field-hover-01",
        "field-02",
        "field-hover-02",
        "field-03",
        "field-hover-03",
        "interactive",
        "border-subtle-00",
        "border-subtle-01",
        "border-subtle-selected-01",
        "border-subtle-02",
        "border-subtle-selected-02",
        "border-subtle-03",
        "border-subtle-selected-03",
        "border-strong-01",
        "border-strong-02",
        "border-strong-03",
        "border-tile-01",
        "border-tile-02",
        "border-tile-03",
        "border-inverse",
        "border-interactive",
        "border-disabled",
        "text-primary",
        "text-secondary",
        "text-placeholder",
        "text-helper",
        "text-error",
        "text-inverse",
        "text-on-color",
        "text-on-color-disabled",
        "text-disabled",
        "link-primary",
        "link-primary-hover",
        "link-secondary",
        "link-inverse-visited",
        "link-visited",
        "link-inverse",
        "link-inverse-active",
        "link-inverse-hover",
        "icon-primary",
        "icon-secondary",
        "icon-inverse",
        "icon-on-color",
        "icon-on-color-disabled",
        "icon-disabled",
        "icon-interactive",
        "support-error",
        "support-success",
        "support-warning",
        "support-info",
        "support-error-inverse",
        "support-success-inverse",
        "support-warning-inverse",
        "support-info-inverse",
        "support-caution-major",
        "support-caution-minor",
        "support-caution-undefined",
        "ai-popover-background",
        "ai-popover-shadow-outer-01",
        "ai-popover-shadow-outer-02",
        "ai-inner-shadow",
        "ai-aura-start-sm",
        "ai-aura-start",
        "ai-aura-end",
        "ai-aura-hover-background",
        "ai-aura-hover-start",
        "ai-aura-hover-end",
        "ai-border-strong",
        "ai-border-start",
        "ai-border-end",
        "ai-drop-shadow",
        "ai-skeleton-background",
        "ai-skeleton-element-background",
        "ai-overlay",
        "ai-popover-caret-center",
        "ai-popover-caret-bottom",
        "ai-popover-caret-bottom-background",
        "ai-popover-caret-bottom-background-actions",
        "chat-prompt-background",
        "chat-prompt-border-start",
        "chat-prompt-border-end",
        "chat-bubble-user",
        "chat-bubble-agent",
        "chat-bubble-border",
        "chat-avatar-bot",
        "chat-avatar-agent",
        "chat-avatar-user",
        "chat-shell-background",
        "chat-header-background",
        "chat-button",
        "chat-button-hover",
        "chat-button-text-hover",
        "chat-button-active",
        "chat-button-selected",
        "chat-button-text-selected",
        "highlight",
        "overlay",
        "toggle-off",
        "shadow",
        "focus",
        "focus-inset",
        "focus-inverse",
        "skeleton-background",
        "skeleton-element",
        "layer",
        "layer-active",
        "layer-background",
        "layer-hover",
        "layer-selected",
        "layer-selected-hover",
        "layer-accent",
        "layer-accent-hover",
        "layer-accent-active",
        "field",
        "field-hover",
        "border-subtle",
        "border-subtle-selected",
        "border-strong",
        "border-tile",
      ]
    `);
  });
});