Skip to content

Instantly share code, notes, and snippets.

View cchaos's full-sized avatar
Gone incognito

Caroline Horn cchaos

Gone incognito
View GitHub Profile

Writing styles with Emotion

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.

File patterns

/* {component name}.styles.ts */
import { css } from '@emotion/react';
cchaos / Consistent focus
Last active May 2, 2022 21:52
Matching focus outlines to element and only on :focus-visible (React and Emotion for example only)

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.

Gif example

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.
cchaos / Logical CSS
Last active May 4, 2023 19:09
Convert standard CSS properties into logical properties (Typescript & React for example only)

Logical properties

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.

logicalStyle(property, value)

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.

Example usage of style={logicalStyle('padding-left', '160px')}

cchaos / eui_component.tsx
Last active March 24, 2021 16:24
EUI: Restricted props with Typescript
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
cchaos / callout_style.tsx
Last active July 30, 2020 18:23
Emotion in EUI - Concept A
import chroma from 'chroma-js';
import { Theme, StyleConfig } from '../../services/propagate/create_style';
const $euiCallOutTypes = {
primary: 'euiColorPrimary',
success: 'euiColorSuccess',
warning: 'euiColorWarning',
danger: 'euiColorDanger',
cchaos /
Last active February 27, 2020 20:57
Button & Link best practices pulled from

Images/Icons inside buttons

   <svg aria-hidden="true" focusable="false">
     <path d="..." />
   <span class="callout">Big</span>
cchaos / settings.json
Last active June 29, 2018 20:41
VS Code Atom One Dark Theme Overrides - Replaces most gray rules (mainly for JS/TS and CSS/SCSS)
"editor.tokenColorCustomizations": {
"[Atom One Dark]": {
"textMateRules": [
"name": "Variable Parameter",
"scope": [
"settings": {
"foreground": "#D0A4DB"

Examples of Arrays and Objects


const array1 = ["This", "is", "an", "array"];


const object = {