const array1 = ["This", "is", "an", "array"];
const object = {
"editor.tokenColorCustomizations": { | |
"[Atom One Dark]": { | |
"textMateRules": [ | |
{ | |
"name": "Variable Parameter", | |
"scope": [ | |
"variable.parameter" | |
], | |
"settings": { | |
"foreground": "#D0A4DB" |
import chroma from 'chroma-js'; | |
import { Theme, StyleConfig } from '../../services/propagate/create_style'; | |
const $euiCallOutTypes = { | |
primary: 'euiColorPrimary', | |
success: 'euiColorSuccess', | |
warning: 'euiColorWarning', | |
danger: 'euiColorDanger', | |
}; |
import React from 'react'; | |
import { ExclusiveUnion } from '../common'; | |
/** | |
* 1. Use the EUI provided ExclusiveUnion to separate unique props. | |
*/ | |
type _RestrictedProps = ExclusiveUnion< | |
{ | |
/** | |
* 2. At least one of the unique props must be required, usually the one containing more options |
Logical CSS properties enable UI's to support directional writing-modes. These utilities provide a few helpers to convert certain directional properties to logical properties.
Returns a style object of the logical CSS property version for the given property: value
pair. Most useful for places like React style
properties that require the camelCase
version of property keys.
This gist creates a universal function that allows focus outlines to match the currently focused element and displays the outline only when the user is navigating via keyboard.
Tabbing between the two examples show the first with a simple text-color outline, the second with a wider blue outline. Clicking the buttons with a mouse shows no outline.EUI uses Emotion
when writing CSS-in-JS styles.
A general knowledge of writing CSS is enough in most cases, but there are some JavaScript-related differences that can result in unintended output. Similarly, there are feaures that don't exist in CSS of which we like to take advantage.
/* {component name}.styles.ts */
import { css } from '@emotion/react';