feat: add eui-theme-rainbow and eui-theme-barcelona for theme tes…

…ting

packages/eui-theme-barcelona/.gitignore

@@ -0,0 +1,8 @@
+# Dependencies
+/node_modules
+
+# Production
+/lib
+
+yarn-debug.log*
+yarn-error.log*

packages/eui-theme-barcelona/README.md

@@ -0,0 +1 @@
+# `@elastic/eui-theme-barcelona`

packages/eui-theme-barcelona/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@elastic/eui-theme-barcelona",
+  "version": "0.0.1",
+  "description": "",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/elastic/eui.git",
+    "directory": "packages/eui-theme-rainbow"
+  },
+  "private": true,
+  "devDependencies": {
+    "typescript": "^5.6.2"
+  },
+  "peerDependencies": {
+    "@elastic/eui": "^95.10.1"
+  },
+  "main": "lib/index.js",
+  "exports": {
+    "./lib/*": "./lib/*",
+    ".": {
+      "default": "./lib/index.js"
+    }
+  },
+  "files": [
+    "lib/",
+    "README.md"
+  ]
+}

packages/eui-theme-barcelona/src/index.ts

@@ -0,0 +1,28 @@
+import { buildTheme, EuiThemeShape } from '@elastic/eui';
+import { colors } from './variables/_colors';
+import { animation } from './variables/_animation';
+import { breakpoint } from './variables/_breakpoint';
+import { base, size } from './variables/_size';
+import { border } from './variables/_borders';
+import { levels } from './variables/_levels';
+import { font } from './variables/_typography';
+import { focus } from './variables/_states';
+
+export const EUI_THEME_BARCELONA_KEY = 'EUI_THEME_BARCELONA';
+
+export const euiThemeBarcelona: EuiThemeShape = {
+  colors,
+  base,
+  size,
+  border,
+  font,
+  animation,
+  breakpoint,
+  levels,
+  focus,
+};
+
+export const EuiThemeBarcelona = buildTheme(
+  euiThemeBarcelona,
+  EUI_THEME_BARCELONA_KEY,
+);

packages/eui-theme-barcelona/src/variables/_animation.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type {
+  _EuiThemeAnimationSpeeds,
+  _EuiThemeAnimationEasings,
+  _EuiThemeAnimation,
+} from '@elastic/eui';
+
+export const animation_speed: _EuiThemeAnimationSpeeds = {
+  extraFast: '90ms',
+  fast: '150ms',
+  normal: '250ms',
+  slow: '350ms',
+  extraSlow: '500ms',
+};
+
+export const animation_ease: _EuiThemeAnimationEasings = {
+  bounce: 'cubic-bezier(.34, 1.61, .7, 1)',
+  resistance: 'cubic-bezier(.694, .0482, .335, 1)',
+};
+
+export const animation: _EuiThemeAnimation = {
+  ...animation_speed,
+  ...animation_ease,
+};

packages/eui-theme-barcelona/src/variables/_borders.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { computed, sizeToPixel, type _EuiThemeBorder } from '@elastic/eui';
+
+export const border: _EuiThemeBorder = {
+  color: computed(([lightShade]) => lightShade, ['colors.lightShade']),
+  width: {
+    thin: '1px',
+    thick: '2px',
+  },
+  radius: {
+    medium: computed(sizeToPixel(0.375)),
+    small: computed(sizeToPixel(0.25)),
+  },
+  thin: computed(
+    ([width, color]) => `${width.thin} solid ${color}`,
+    ['border.width', 'border.color']
+  ),
+  thick: computed(
+    ([width, color]) => `${width.thick} solid ${color}`,
+    ['border.width', 'border.color']
+  ),
+  editable: computed(
+    ([width, color]) => `${width.thick} dotted ${color}`,
+    ['border.width', 'border.color']
+  ),
+};

packages/eui-theme-barcelona/src/variables/_breakpoint.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { _EuiThemeBreakpoints } from '@elastic/eui';
+
+export const breakpoint: _EuiThemeBreakpoints = {
+  xl: 1200,
+  l: 992,
+  m: 768,
+  s: 575,
+  xs: 0,
+};

packages/eui-theme-barcelona/src/variables/_colors.ts

@@ -0,0 +1,136 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  computed,
+  makeHighContrastColor,
+  makeDisabledContrastColor,
+  shade,
+  tint,
+  type _EuiThemeColors,
+  type _EuiThemeBrandColors,
+  type _EuiThemeBrandTextColors,
+  type _EuiThemeShadeColors,
+  type _EuiThemeSpecialColors,
+  type _EuiThemeTextColors,
+  type _EuiThemeColorsMode,
+} from '@elastic/eui';
+
+/*
+ * LIGHT THEME
+ * Only split up in the light theme to access the keys by section in the docs
+ */
+
+export const brand_colors: _EuiThemeBrandColors = {
+  primary: '#07C',
+  accent: '#F04E98',
+  success: '#00BFB3',
+  warning: '#FEC514',
+  danger: '#BD271E',
+};
+
+export const brand_text_colors: _EuiThemeBrandTextColors = {
+  primaryText: computed(makeHighContrastColor('colors.primary')),
+  accentText: computed(makeHighContrastColor('colors.accent')),
+  successText: computed(makeHighContrastColor('colors.success')),
+  warningText: computed(makeHighContrastColor('colors.warning')),
+  dangerText: computed(makeHighContrastColor('colors.danger')),
+};
+
+export const shade_colors: _EuiThemeShadeColors = {
+  emptyShade: '#FFF',
+  lightestShade: '#F1F4FA',
+  lightShade: '#D3DAE6',
+  mediumShade: '#98A2B3',
+  darkShade: '#69707D',
+  darkestShade: '#343741',
+  fullShade: '#000',
+};
+
+export const special_colors: _EuiThemeSpecialColors = {
+  body: computed(
+    ([lightestShade]) => tint(lightestShade, 0.4),
+    ['colors.lightestShade']
+  ),
+  highlight: computed(([warning]) => tint(warning, 0.9), ['colors.warning']),
+  disabled: '#ABB4C4',
+  disabledText: computed(makeDisabledContrastColor('colors.disabled')),
+  shadow: computed(({ colors }) => colors.ink),
+};
+
+export const text_colors: _EuiThemeTextColors = {
+  text: computed(([darkestShade]) => darkestShade, ['colors.darkestShade']),
+  title: computed(([text]) => shade(text, 0.5), ['colors.text']),
+  subduedText: computed(makeHighContrastColor('colors.darkShade')),
+  link: computed(([primaryText]) => primaryText, ['colors.primaryText']),
+};
+
+export const light_colors: _EuiThemeColorsMode = {
+  ...brand_colors,
+  ...shade_colors,
+  ...special_colors,
+  // Need to come after special colors so they can react to `body`
+  ...brand_text_colors,
+  ...text_colors,
+};
+
+/*
+ * DARK THEME
+ */
+
+export const dark_shades: _EuiThemeShadeColors = {
+  emptyShade: '#1D1E24',
+  lightestShade: '#25262E',
+  lightShade: '#343741',
+  mediumShade: '#535966',
+  darkShade: '#98A2B3',
+  darkestShade: '#D4DAE5',
+  fullShade: '#FFF',
+};
+
+export const dark_colors_ams: _EuiThemeColorsMode = {
+  // Brand
+  primary: '#36A2EF',
+  accent: '#F68FBE',
+  success: '#7DDED8',
+  warning: '#F3D371',
+  danger: '#F86B63',
+
+  // Shades
+  ...dark_shades,
+
+  // Special
+  body: computed(
+    ([lightestShade]) => shade(lightestShade, 0.45),
+    ['colors.lightestShade']
+  ),
+  highlight: '#2E2D25',
+  disabled: '#515761',
+  disabledText: computed(makeDisabledContrastColor('colors.disabled')),
+  shadow: computed(({ colors }) => colors.ink),
+
+  // Need to come after special colors so they can react to `body`
+  ...brand_text_colors,
+
+  // Text
+  text: '#DFE5EF',
+  title: computed(([text]) => text, ['colors.text']),
+  subduedText: computed(makeHighContrastColor('colors.mediumShade')),
+  link: computed(([primaryText]) => primaryText, ['colors.primaryText']),
+};
+
+/*
+ * FULL
+ */
+
+export const colors: _EuiThemeColors = {
+  ghost: '#FFF',
+  ink: '#000',
+  LIGHT: light_colors,
+  DARK: dark_colors_ams,
+};

packages/eui-theme-barcelona/src/variables/_levels.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { _EuiThemeLevels } from '@elastic/eui';
+
+export const levels: _EuiThemeLevels = {
+  toast: 9000,
+  modal: 8000,
+  mask: 6000,
+  navigation: 6000,
+  menu: 2000,
+  header: 1000,
+  flyout: 1000,
+  maskBelowHeader: 1000,
+  content: 0,
+};

packages/eui-theme-barcelona/src/variables/_size.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  computed,
+  sizeToPixel,
+  type _EuiThemeBase,
+  type _EuiThemeSizes,
+} from '@elastic/eui';
+
+export const base: _EuiThemeBase = 16;
+
+export const size: _EuiThemeSizes = {
+  xxs: computed(sizeToPixel(0.125)),
+  xs: computed(sizeToPixel(0.25)),
+  s: computed(sizeToPixel(0.5)),
+  m: computed(sizeToPixel(0.75)),
+  base: computed(sizeToPixel()),
+  l: computed(sizeToPixel(1.5)),
+  xl: computed(sizeToPixel(2)),
+  xxl: computed(sizeToPixel(2.5)),
+  xxxl: computed(sizeToPixel(3)),
+  xxxxl: computed(sizeToPixel(4)),
+};

packages/eui-theme-barcelona/src/variables/_states.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  computed,
+  transparentize,
+  sizeToPixel,
+  type _EuiThemeFocus,
+} from '@elastic/eui';
+
+export const focus: _EuiThemeFocus = {
+  // Focus ring
+  color: 'currentColor',
+  width: computed(sizeToPixel(0.125)),
+  // Focus background
+  transparency: { LIGHT: 0.1, DARK: 0.2 },
+  backgroundColor: computed(({ colors, focus }) =>
+    transparentize(colors.primary, focus.transparency)
+  ),
+};