@use 'sass:color';

@import '../../../../../ng-aquila/src/shared-styles/theming/themes/aquila';

$nx-theme-documentation: (
  documentation-expert-container-background: #1c7997,
  documentation-markdown-code-background-color: color.adjust(#0f2a3d, $lightness: -20%, $space: hsl),
  documentation-header-background: ui-02,
  documentation-welcome-questions-background: ui-02,
  documentation-welcome-set-up-background: ui-02,
  documentation-welcome-lifecycle-background: ui-02,
  documentation-welcome-grey-row-background-color: ui-02,
  documentation-deprecated-color: #34311e,
  documentation-svg-filter: none,
  documentation-message-warning-background-color: message-warning-background-color,
  documentation-codeblock-background-color: ui-02,
  // Tokens for examples
  documentation-avatar-color-1: #87d68d,
  documentation-avatar-color-2: #27abd6,
  documentation-avatar-color-3: #fac748,
  documentation-avatar-color-4: #e18335,
  documentation-avatar-color-5: #dbd3d8,
  documentation-avatar-color-6: #969696,
  documentation-avatar-text-color: text-02,
  documentation-comparison-table-example-background-color: ui-01,
  documentation-fullscreen-background-01: ui-01,
  documentation-fullscreen-background-02: ui-02,
  documentation-inverse-container-background: negative-background,
  documentation-margin-example-background-color: #1c7997,
  // Tokens for api and code
  documentation-api-codebox-border-color: #969696,
  documentation-api-methodbox-border-color: #969696,
  documentation-api-methodbox-header-background-color: rgba(0, 0, 0, 0.03),
  documentation-api-code-import-text-color: #faa1ff,
  documentation-api-code-path-text-color: #7dff90,
  documentation-api-code-keywords-text-color: #7dff90,
  documentation-api-code-alias-text-color: #fafc7c,
  documentation-api-code-types-text-color: #faa1ff,
  // Tokens for grid examples
  documentation-grid-text-color: #000000,
  documentation-grid-tiny-color: #dbd3d8,
  documentation-grid-small-color: #fac748,
  documentation-grid-medium-color: #87d68d,
  documentation-grid-large-color: #27abd6,
  documentation-grid-xlarge-color: #e18335,
  documentation-grid-2xlarge-color: #db4c40,
  documentation-grid-3xlarge-color: #8d6a9f,
  documentation-grid-examples-dotted-border-color: #e5e7e6,
  documentation-grid-tiny-color-01: color.adjust(#dbd3d8, $lightness: -20%, $space: hsl),
  documentation-grid-small-color-01: color.adjust(#fac748, $lightness: -20%, $space: hsl),
  documentation-grid-medium-color-01: color.adjust(#87d68d, $lightness: -20%, $space: hsl),
  documentation-grid-large-color-01: color.adjust(#27abd6, $lightness: -20%, $space: hsl),
  documentation-grid-xlarge-color-01: color.adjust(#e18335, $lightness: -20%, $space: hsl),
  documentation-grid-2xlarge-color-01: color.adjust(#db4c40, $lightness: -20%, $space: hsl),
  documentation-grid-3xlarge-color-01: color.adjust(#8d6a9f, $lightness: -20%, $space: hsl),
  documentation-grid-tiny-color-02: color.adjust(#dbd3d8, $lightness: -40%, $space: hsl),
  documentation-grid-small-color-02: color.adjust(#fac748, $lightness: -40%, $space: hsl),
  documentation-grid-medium-color-02: color.adjust(#87d68d, $lightness: -40%, $space: hsl),
  documentation-grid-large-color-02: color.adjust(#27abd6, $lightness: -30%, $space: hsl),
  documentation-grid-xlarge-color-02: color.adjust(#e18335, $lightness: -30%, $space: hsl),
  documentation-grid-2xlarge-color-02: color.adjust(#db4c40, $lightness: -40%, $space: hsl),
  documentation-grid-3xlarge-color-02: color.adjust(#8d6a9f, $lightness: -40%, $space: hsl),
);

$nx-themes: nx-register-theme($nx-theme-documentation, docs-theme, aquila);
