@carbon/themes
Version:
Themes for applying color in the Carbon Design System
547 lines (521 loc) • 10.6 kB
JavaScript
/**
* 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.
*/
import { TokenGroup } from './TokenGroup';
export const background = TokenGroup.create({
name: 'Background',
properties: ['background'],
tokens: [
'background',
{
name: 'background-active',
state: 'active',
},
{
name: 'background-selected',
state: 'selected',
},
{
name: 'background-selected-hover',
state: 'hover',
},
{
name: 'background-hover',
state: 'hover',
},
'background-brand',
'background-inverse',
{
state: 'hover',
name: 'background-inverse-hover',
},
],
});
export const layer = TokenGroup.create({
name: 'Layer',
properties: ['background'],
tokens: [
{
name: 'layer-01',
},
{
state: 'active',
name: 'layer-active-01',
},
{
name: 'layer-background-01',
},
{
state: 'hover',
name: 'layer-hover-01',
},
{
state: 'selected',
name: 'layer-selected-01',
},
{
state: 'hover',
name: 'layer-selected-hover-01',
},
{
name: 'layer-02',
},
{
state: 'active',
name: 'layer-active-02',
},
{
name: 'layer-background-02',
},
{
state: 'hover',
name: 'layer-hover-02',
},
{
state: 'selected',
name: 'layer-selected-02',
},
{
state: 'hover',
name: 'layer-selected-hover-02',
},
{
name: 'layer-03',
},
{
state: 'active',
name: 'layer-active-03',
},
{
name: 'layer-background-03',
},
{
state: 'hover',
name: 'layer-hover-03',
},
{
state: 'selected',
name: 'layer-selected-03',
},
{
state: 'hover',
name: 'layer-selected-hover-03',
},
{
name: 'layer-selected-inverse',
},
{
state: 'disabled',
name: 'layer-selected-disabled',
},
{
name: 'layer-accent-01',
},
{
state: 'active',
name: 'layer-accent-active-01',
},
{
state: 'hover',
name: 'layer-accent-hover-01',
},
{
name: 'layer-accent-02',
},
{
state: 'active',
name: 'layer-accent-active-02',
},
{
state: 'hover',
name: 'layer-accent-hover-02',
},
{
name: 'layer-accent-03',
},
{
state: 'active',
name: 'layer-accent-active-03',
},
{
state: 'hover',
name: 'layer-accent-hover-03',
},
],
});
export const field = TokenGroup.create({
name: 'Field',
properties: ['background'],
tokens: [
{
name: 'field-01',
},
{
state: 'hover',
name: 'field-hover-01',
},
{
name: 'field-02',
},
{
state: 'hover',
name: 'field-hover-02',
},
{
name: 'field-03',
},
{
state: 'hover',
name: 'field-hover-03',
},
],
});
export const border = TokenGroup.create({
name: 'Borders',
properties: ['border'],
tokens: [
{
name: 'border-subtle-00',
},
{
name: 'border-subtle-01',
},
{
state: 'selected',
name: 'border-subtle-selected-01',
},
{
name: 'border-subtle-02',
},
{
state: 'selected',
name: 'border-subtle-selected-02',
},
{
name: 'border-subtle-03',
},
{
state: 'selected',
name: 'border-subtle-selected-03',
},
// Border strong
'border-strong-01',
'border-strong-02',
'border-strong-03',
// Border tile
'border-tile-01',
'border-tile-02',
'border-tile-03',
// Border inverse
'border-inverse',
// Border interactive
'border-interactive',
{
state: 'disabled',
name: 'border-disabled',
},
],
});
export const text = TokenGroup.create({
name: 'Text',
properties: ['text'],
tokens: [
'text-primary',
'text-secondary',
'text-placeholder',
'text-helper',
'text-error',
'text-inverse',
{
name: 'text-on-color',
},
{
state: 'disabled',
name: 'text-on-color-disabled',
},
{
state: 'disabled',
name: 'text-disabled',
},
],
});
export const link = TokenGroup.create({
name: 'Link',
properties: ['text'],
tokens: [
{
name: 'link-primary',
},
{
state: 'hover',
name: 'link-primary-hover',
},
'link-secondary',
{
state: 'visited',
name: 'link-inverse-visited',
},
'link-visited',
'link-inverse',
'link-inverse-active',
'link-inverse-hover',
],
});
export const icon = TokenGroup.create({
name: 'Icons',
properties: ['background', 'fill', 'stroke'],
tokens: [
'icon-primary',
'icon-secondary',
'icon-inverse',
{
name: 'icon-on-color',
},
{
state: 'disabled',
name: 'icon-on-color-disabled',
},
{
state: 'disabled',
name: 'icon-disabled',
},
'icon-interactive',
],
});
export const support = TokenGroup.create({
name: 'Support',
properties: ['background', 'fill', 'stroke'],
tokens: [
'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',
],
});
export const focus = TokenGroup.create({
name: 'Focus',
properties: ['border'],
tokens: ['focus', 'focus-inset', 'focus-inverse'],
});
export const skeleton = TokenGroup.create({
name: 'Skeleton',
properties: ['background'],
tokens: ['skeleton-background', 'skeleton-element'],
});
export const contextual = TokenGroup.create({
name: 'Contextual',
properties: [],
tokens: [
'layer',
'layer-active',
'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',
],
});
export const syntaxHighlight = TokenGroup.create({
name: 'Syntax Highlighting',
properties: ['text'],
tokens: [
'syntax-comment',
'syntax-line-comment',
'syntax-block-comment',
'syntax-doc-comment',
'syntax-doc-string',
'syntax-keyword',
'syntax-operator-keyword',
'syntax-control-keyword',
'syntax-definition-keyword',
'syntax-module-keyword',
'syntax-variable',
'syntax-name',
'syntax-variable-name',
'syntax-label-name',
'syntax-attribute',
'syntax-attribute-name',
'syntax-property-name',
'syntax-tag',
'syntax-tag-name',
'syntax-type',
'syntax-type-name',
'syntax-class-name',
'syntax-namespace',
'syntax-macro-name',
'syntax-atom',
'syntax-literal',
'syntax-bool',
'syntax-null',
'syntax-self',
'syntax-number',
'syntax-integer',
'syntax-float',
'syntax-unit',
'syntax-string',
'syntax-character',
'syntax-attribute-value',
'syntax-special-string',
'syntax-regexp',
'syntax-escape',
'syntax-url',
'syntax-color',
'syntax-operator',
'syntax-deref-operator',
'syntax-arithmetic-operator',
'syntax-logic-operator',
'syntax-bitwise-operator',
'syntax-compare-operator',
'syntax-update-operator',
'syntax-definition-operator',
'syntax-type-operator',
'syntax-control-operator',
'syntax-modifier',
'syntax-punctuation',
'syntax-separator',
'syntax-bracket',
'syntax-angle-bracket',
'syntax-square-bracket',
'syntax-paren',
'syntax-brace',
'syntax-content',
'syntax-heading',
'syntax-heading-1',
'syntax-heading-2',
'syntax-heading-3',
'syntax-heading-4',
'syntax-heading-5',
'syntax-heading-6',
'syntax-content-separator',
'syntax-list',
'syntax-quote',
'syntax-emphasis',
'syntax-strong',
'syntax-monospace',
'syntax-link',
'syntax-strikethrough',
'syntax-invalid',
'syntax-meta',
'syntax-document-meta',
'syntax-annotation',
'syntax-processing-instruction',
'syntax-definition',
'syntax-constant',
'syntax-function',
'syntax-standard',
'syntax-local',
'syntax-special',
'syntax-inserted',
'syntax-deleted',
],
});
export const ai = TokenGroup.create({
name: 'AI',
properties: ['background'],
tokens: [
// Phase 2
'ai-popover-background',
'ai-popover-shadow-outer-01',
'ai-popover-shadow-outer-02',
// Linear gradient refactor
'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',
// Caret tokens
'ai-popover-caret-center',
'ai-popover-caret-bottom',
'ai-popover-caret-bottom-background',
'ai-popover-caret-bottom-background-actions',
// Chat tokens
'chat-prompt-background',
'chat-prompt-border-start',
'chat-prompt-border-end',
'chat-prompt-text',
'chat-bubble-user',
'chat-bubble-user-text',
'chat-bubble-agent',
'chat-bubble-agent-text',
'chat-bubble-border',
'chat-avatar-bot',
'chat-avatar-agent',
'chat-avatar-user',
'chat-shell-background',
'chat-header-background',
'chat-header-text',
// Chat button tokens
'chat-button',
'chat-button-hover',
'chat-button-text-hover',
'chat-button-active',
'chat-button-selected',
'chat-button-text-selected',
],
});
export const group = TokenGroup.create({
name: 'All',
tokens: [
background,
layer,
field,
// Interactive
{
name: 'interactive',
properties: ['background', 'text'],
},
border,
text,
link,
icon,
support,
syntaxHighlight,
ai,
// Misc
{
name: 'highlight',
},
{
name: 'overlay',
properties: ['background'],
},
{
name: 'color-scheme',
properties: ['color-scheme'],
},
{
name: 'toggle-off',
},
{
name: 'shadow',
},
focus,
skeleton,
],
});