先貼代碼凭迹，以后有時(shí)間再補(bǔ)文字

Color

/** Override color **/
@use '@carbon/colors'
with ( 
  $colors: (blue: (
    10: red,
    20: red,
    30: red,
    40: red,
    50: red,
    60: red,
    70: red,
    80: red,
    90: red,
    100: #001141,
)),
);

Theme

/** Change theme **/
@use '@carbon/react/scss/themes';
@use '@carbon/react/scss/theme' with ($theme: themes.$white,
);

/** Override white theme **/
@use '@carbon/react/scss/themes' with ($white: (background: red,
    primary: #393939,
    button-primary: #393939,
    button-primary-hover: #4c4c4c,
    button-primary-active: #f6f6f6,
    button-secondary: #bdbdbd,
    button-secondary-hover: #808080,
    button-secondary-active: #6d6d6d,
    button-tertiary: #bdbdbd,
    button-tertiary-hover: #808080,
    button-tertiary-active: #6d6d6d,
    button-danger: #9b3a3a,
    button-helper: #f0679e,
    button-helper-hover: #d64680,
    button-helper-active: #bb3e70,
    button-disabled: rgba(198, 198, 198, 0.25),

    // layer-01: red,
    // layer-active-01: red,
    border-inverse: RED,
    border-strong-01: red,
    border-strong-02: red,
    border-strong-03: red,
    border-subtle-01: red,
    border-subtle-02: red,
    border-subtle-03: red,
    border-subtle-selected-01: red,
    border-subtle-selected-02: red,
    border-subtle-selected-03: red,
    border-tile-02: red,
    border-tile-03: red,
    border-interactive: #4c4c4c,
    border-selected: #393939,
    border-subtle-00: #e0e0e0,
    border-error: #9B3A3A,
    border-tile-01: #c6c6c6,
    border-disabled: #c6c6c6,


    text-primary: #161616,
    text-secondary: #525252,
    text-placeholder: #a8a8a8,
    text-on-color: #ffffff,
    text-helper: #ffffff,
    text-error: #9B3A3A,
    text-warn: #Da1e28,
    text-disabled: rgba(22, 22, 22, 0.25),

    icon-primary: #161616,
    icon-secondary: #525252,
    icon-on-color: #ffffff,
    icon-helper: $PictavoPink,
    icon-disabled: rgba(22, 22, 22, 0.25),
    icon-on-color-disabled: red,
    icon-interactive: red,
    icon-inverse: red,

    active-danger: #750e13,
    active-light-ui: red,
    active-primary: red,
    active-secondary: red,
    active-tertiary: red,
    active-ui: red,
    danger-01: #da1e28,
    danger-02: #da1e28,
    decorative-01: red,
    disabled-01: red,
    disabled-02: red,
    disabled-03: red,
    hover-danger: #b81921,
    hover-field: red,
    hover-light-ui: red,
    hover-primary: red,
    hover-primary-text: red,
    hover-row: red,
    hover-secondary: #4c4c4c,
    hover-selected-ui: #cacaca,
    hover-tertiary: red,
    hover-ui: red,
    icon-01: RED,
    icon-02: RED,
    icon-03: red,
    interactive-01: red,
    interactive-02: RED,
    interactive-03: red,
    interactive-04: red,
    inverse-01: red,
    inverse-02: RED,
    inverse-focus-ui: red,
    inverse-hover-ui: #4c4c4c,
    inverse-link: red,
    inverse-support-01: #fa4d56,
    inverse-support-02: #42be65,
    inverse-support-03: #f1c21b,
    inverse-support-04: red,
    overlay-01: rgba(22, 22, 22, 0.5),
    selected-light-ui: red,
    selected-ui: red,
    skeleton-01: red,
    skeleton-02: red,
    support-01: #da1e28,
    support-02: #198038,
    support-03: #f1c21b,
    support-04: red,
    text-01: RED,
    text-02: RED,
    text-03: red,
    text-04: red,
    text-05: red,
    ui-01: red,
    ui-02: red,
    ui-03: red,
    ui-04: red,
    ui-05: RED,
    ui-background: red,
    visited-link: red,
    ai-aura-end: rgba(255, 255, 255, 0),
    ai-aura-hover-background: red,
    ai-aura-hover-end: rgba(255, 255, 255, 0),
    ai-aura-hover-start: rgba(69, 137, 255, 0.32),
    ai-aura-start: rgba(69, 137, 255, 0.1),
    ai-aura-start-sm: rgba(69, 137, 255, 0.16),
    ai-border-end: red,
    ai-border-start: rgba(166, 200, 255, 0.64),
    ai-border-strong: red,
    ai-drop-shadow: rgba(15, 98, 254, 0.1),
    ai-inner-shadow: rgba(69, 137, 255, 0.1),
    ai-overlay: rgba(0, 17, 65, 0.5),
    ai-popover-background: red,
    ai-popover-caret-bottom: red,
    ai-popover-caret-bottom-background: red,
    ai-popover-caret-bottom-background-actions: red,
    ai-popover-caret-center: red,
    ai-popover-shadow-outer-01: rgba(0, 67, 206, 0.06),
    ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.04),
    ai-skeleton-background: red,
    ai-skeleton-element-background: red,
    background-active: rgba(141, 141, 141, 0.5),
    background-brand: red,
    background-hover: rgba(141, 141, 141, 0.12),
    background-inverse: RED,
    background-inverse-hover: #474747,
    background-selected: rgba(141, 141, 141, 0.2),
    background-selected-hover: rgba(141, 141, 141, 0.32),
    chat-avatar-agent: RED,
    chat-avatar-bot: red,
    chat-avatar-user: red,
    chat-bubble-agent: red,
    chat-bubble-border: red,
    chat-bubble-user: red,
    chat-button: red,
    chat-button-active: rgba(141, 141, 141, 0.5),
    chat-button-hover: rgba(141, 141, 141, 0.12),
    chat-button-selected: rgba(141, 141, 141, 0.2),
    chat-button-text-hover: red,
    chat-button-text-selected: RED,
    chat-header-background: red,
    chat-prompt-background: red,
    chat-prompt-border-end: rgba(244, 244, 244, 0),
    chat-prompt-border-start: red,
    chat-shell-background: red,
    field-01: red,
    field-02: red,
    field-03: red,
    field-hover-01: #e8e8e8,
    field-hover-02: #e8e8e8,
    field-hover-03: #e8e8e8,
    focus: red,
    focus-inset: red,
    focus-inverse: red,
    highlight: red,
    interactive: red,
    layer-01: red,
    layer-02: red,
    layer-03: red,
    layer-accent-01: red,
    layer-accent-02: red,
    layer-accent-03: red,
    layer-accent-active-01: red,
    layer-accent-active-02: red,
    layer-accent-active-03: red,
    layer-accent-hover-01: #d1d1d1,
    layer-accent-hover-02: #d1d1d1,
    layer-accent-hover-03: #d1d1d1,
    layer-active-01: red,
    layer-active-02: red,
    layer-active-03: red,
    layer-hover-01: #e8e8e8,
    layer-hover-02: #e8e8e8,
    layer-hover-03: #e8e8e8,
    layer-selected-01: red,
    layer-selected-02: red,
    layer-selected-03: red,
    layer-selected-disabled: red,
    layer-selected-hover-01: #d1d1d1,
    layer-selected-hover-02: #d1d1d1,
    layer-selected-hover-03: #d1d1d1,
    layer-selected-inverse: RED,
    link-inverse: red,
    link-inverse-active: red,
    link-inverse-hover: #a6c8ff,
    link-inverse-visited: #be95ff,
    link-primary: red,
    link-primary-hover: red,
    link-secondary: red,
    link-visited: red,
    overlay: rgba(22, 22, 22, 0.5),
    shadow: rgba(0, 0, 0, 0.3),
    skeleton-background: #e8e8e8,
    skeleton-element: red,
    support-caution-major: #ff832b,
    support-caution-minor: #f1c21b,
    support-caution-undefined: red,
    support-error: #da1e28,
    support-error-inverse: #fa4d56,
    support-info: red,
    support-info-inverse: red,
    support-success: #24a148,
    support-success-inverse: #42be65,
    support-warning: #f1c21b,
    support-warning-inverse: #f1c21b,
    text-inverse: red,
    text-on-color-disabled: red,
    toggle-off: red,
  ),
);

/** Override default theme **/
@use '@carbon/colors';
@use '@carbon/react/scss/themes';
@use '@carbon/react/scss/theme' with ($fallback: themes.$white,
  $theme: (background: #fff,

    focus: #4C4C4C,
    focus-inset: #ffffff,

    background-hover: rgba(141, 141, 141, 0.12),
    background-active: rgba(141, 141, 141, 0.5),
    background-selected: rgba(141, 141, 141, 0.2),
    background-selected-hover: rgba(141, 141, 141, 0.32),
    background-inverse: #393939,
    background-inverse-hover: #4c4c4c,

    border-interactive: #4c4c4c,
    border-selected: #393939,
    border-subtle-00: #e0e0e0,
    border-error: #9B3A3A,
    border-tile-01: #c6c6c6,
    border-disabled: #c6c6c6,

    text-primary: #161616,
    text-secondary: #525252,
    text-placeholder: #a8a8a8,
    text-on-color: #ffffff,
    text-helper: #ffffff,
    text-error: #9B3A3A,
    text-disabled: rgba(22, 22, 22, 0.25),

    link-primary: #393939,
    link-primary-hover: #4c4c4c,
    link-primary--active: #6f6f6f,
    link-primary-disabled: rgba(22, 22, 22, 0.25),

    icon-primary: #161616,
    icon-secondary: #525252,
    icon-on-color: #ffffff,
    icon-helper: $PictavoPink,
    icon-disabled: rgba(22, 22, 22, 0.25),

    layer-01: #f4f4f4,
    layer-hover-01: #e8e8e8,
    layer-active-01: #c6c6c6,
    layer-selected-01: #e0e0e0,
    layer-selected-hover-01: #cacaca,
    layer-selected-inverse: #161616,
    layer-selected-disabled: #8d8d8d,

    support-error: #9B3A3A,
    support-warning: #dcb276,
    support-success: #90C667,
    support-info: #0073FC,

    button-helper: #f0679e,
    button-helper-hover: #d64680,
    button-helper-active: #bb3e70,

    /** Pictavo Community Theme Token **/
    Pictavo-Pink: #F0679E,
    Pictavo-color___0: #fff,
    Pictavo-color___1: #E0E0E0,
    Pictavo-color___2: #525252,
    Pictavo-color___4: #161616,
    Pictavo-color___3: rgba(22, 22, 22, 0.25),
    Pictavo-color___5: rgba(141, 141, 141, 0.2),
    Pictavo-menu-modal: rgba(0, 0, 0, 0.4),
    Pictavo-screen-md-min: 672px,
    Pictavo-screen-lg-min: 1056px,
    Pictavo-screen-xlg-min: 1312px,
  ));

sass的部分用法

/** 使用 Theme 的Token **/
.carbon-theme-sample {
  background-color: theme.$background;
}

/** 導(dǎo)出 theme的變量 theme.scss **/
$theme: theme.$theme;

/** 使用 theme的變量 page.scss **/
@use 'sass:map';

$theme: () !default;
...
    background-color: map.get($theme, "border-subtle-00");
...

/** 使用 theme  app.scss **/
@use './theme';
@use './page.scss' with ($theme: theme.$theme);

theme 的Token用法

@forward "@carbon/themes/scss/tokens";
.carbon-theme-sample {
  color: $border-subtle-00;
}

type 的Token用法，有一些和theme無(wú)關(guān)的token的定義放在 type中

// 在 colors 之后，其他之前
@use "@carbon/styles/scss/config";
@forward "@carbon/type" with (
 $heading-compact-01: (
  font-size:.875rem,
  line-height: 1.125rem,
  font-weight: 600,
  letter-spacing: 0.16px,
 )
);


// 使用
.sample {
    @include type-style('heading-compact-01')
}

component 的Token用法

/** Override component token **
@use '@carbon/themes/scss/generated/button-tokens' with ($button-primary: (white-theme: #393939, ),
  $button-primary-hover: (white-theme:#4c4c4c, ),
  $button-primary-active: (white-theme:#f6f6f6, ),
  $button-secondary: (white-theme: #bdbdbd),
  $button-secondary-hover: (white-theme:#808080, ),
  $button-secondary-active: (white-theme:#6d6d6d, ),
  $button-tertiary: (white-theme: #bdbdbd),
  $button-tertiary-hover: (white-theme:#808080, ),
  $button-tertiary-active: (white-theme:#6d6d6d, ),
  $button-disabled: (white-theme:rgba(198, 198, 198, 0.25), ),
  $button-danger-primary: (white-theme: #9b3a3a),
);

@use '@carbon/react/scss/components/button';

.carbon-theme-sample {
  color: button.$button-primary-hover; // value will be: color: var(--cds-button-primary-hover, #808080);
}

更新

24-07-26 更新了component的Token用法
24-07-27 更新了theme 的Token用法
24-08-1 更新了type的Token用法