@elastic/eui-theme-common 0.0.1

package/src/global_styling/react_date_picker/_index.scss

@@ -0,0 +1,2 @@
+@import 'variables';
+@import 'date_picker';

package/src/global_styling/react_date_picker/_variables.scss

@@ -0,0 +1 @@
+$euiDatePickerCalendarWidth: 284px;

package/src/global_styling/utility/_animations.scss

@@ -0,0 +1,55 @@
+// Animations as utility so they don't get duplicated in compiled CSS
+
+@keyframes euiAnimFadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes euiGrow {
+  0% {
+    opacity: 0;
+  }
+
+  1% {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes focusRingAnimate {
+  0% {
+    box-shadow: 0 0 0 $euiFocusRingAnimStartSize $euiFocusRingAnimStartColor;
+  }
+
+  100% {
+    box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
+  }
+}
+
+@keyframes focusRingAnimateLarge {
+  0% {
+    box-shadow: 0 0 0 $euiFocusRingAnimStartSizeLarge $euiFocusRingAnimStartColor;
+  }
+
+  100% {
+    box-shadow: 0 0 0 $euiFocusRingSizeLarge $euiFocusRingColor;
+  }
+}
+
+// Component specific
+
+@keyframes euiButtonActive {
+  50% {
+    transform: translateY(1px);
+  }
+}

package/src/global_styling/utility/_index.scss

@@ -0,0 +1 @@
+@import 'animations';

package/src/global_styling/variables/_animations.scss

@@ -0,0 +1,13 @@
+// Animations
+
+$euiAnimSlightBounce: cubic-bezier(.34, 1.61, .7, 1) !default;
+$euiAnimSlightResistance: cubic-bezier(.694, .0482, .335, 1) !default;
+
+$euiAnimSpeedExtraFast: 90ms !default;
+$euiAnimSpeedFast: 150ms !default;
+$euiAnimSpeedNormal: 250ms !default;
+$euiAnimSpeedSlow: 350ms !default;
+$euiAnimSpeedExtraSlow: 500ms !default;
+
+// Keyframe animation declarations can be found in
+// eui/utility/animations.scss

package/src/global_styling/variables/_borders.scss

@@ -0,0 +1,11 @@
+// Borders
+
+$euiBorderWidthThin: 1px !default;
+$euiBorderWidthThick: 2px !default;
+
+$euiBorderColor: $euiColorLightShade !default;
+$euiBorderRadius: $euiSizeS * .75 !default;
+$euiBorderRadiusSmall: $euiSizeS * .5 !default;
+$euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default;
+$euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default;
+$euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default;

package/src/global_styling/variables/_buttons.scss

@@ -0,0 +1,18 @@
+$euiButtonHeight: $euiSizeXXL !default;
+$euiButtonHeightSmall: $euiSizeXL !default;
+$euiButtonHeightXSmall: $euiSizeL !default;
+
+// Modifier naming and colors.
+$euiButtonTypes: (
+  primary: $euiColorPrimary,
+  accent: $euiColorAccent,
+  success: $euiColorSuccess,
+  warning: $euiColorWarning,
+  danger: $euiColorDanger,
+  ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
+  text: $euiColorDarkShade, // Reserved for special use cases
+) !default;
+
+// TODO: Remove this once elastic-charts no longer uses this variable
+// @see https://github.com/elastic/elastic-charts/pull/2528
+$euiButtonColorDisabledText: $euiColorTextDisabled !default;

package/src/global_styling/variables/_colors_vis.scss

@@ -0,0 +1,72 @@
+// Visualization colors
+// stylelint-disable color-no-hex
+
+// Maps allow for easier JSON usage
+// Use map_merge($euiColorVisColors, $yourMap) to change individual colors after importing ths file
+// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function
+$euiPaletteColorBlind: (
+  euiColorVis0: (
+    graphic: #54B399,
+    behindText: #6DCCB1,
+  ),
+  euiColorVis1: (
+    graphic: #6092C0,
+    behindText: #79AAD9,
+  ),
+  euiColorVis2: (
+    graphic: #D36086,
+    behindText: #EE789D,
+  ),
+  euiColorVis3: (
+    graphic: #9170B8,
+    behindText: #A987D1,
+  ),
+  euiColorVis4: (
+    graphic: #CA8EAE,
+    behindText: #E4A6C7,
+  ),
+  euiColorVis5: (
+    graphic: #D6BF57,
+    behindText: #F1D86F,
+  ),
+  euiColorVis6: (
+    graphic: #B9A888,
+    behindText: #D2C0A0,
+  ),
+  euiColorVis7: (
+    graphic: #DA8B45,
+    behindText: #F5A35C,
+  ),
+  euiColorVis8: (
+    graphic: #AA6556,
+    behindText: #C47C6C,
+  ),
+  euiColorVis9: (
+    graphic: #E7664C,
+    behindText: #FF7E62,
+  )
+) !default;
+
+$euiPaletteColorBlindKeys: map-keys($euiPaletteColorBlind);
+
+$euiColorVis0: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'graphic') !default;
+$euiColorVis1: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'graphic') !default;
+$euiColorVis2: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'graphic') !default;
+$euiColorVis3: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'graphic') !default;
+$euiColorVis4: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'graphic') !default;
+$euiColorVis5: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'graphic') !default;
+$euiColorVis6: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'graphic') !default;
+$euiColorVis7: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'graphic') !default;
+$euiColorVis8: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'graphic') !default;
+$euiColorVis9: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'graphic') !default;
+
+$euiColorVis0_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'behindText') !default;
+$euiColorVis1_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'behindText') !default;
+$euiColorVis2_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'behindText') !default;
+$euiColorVis3_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'behindText') !default;
+$euiColorVis4_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'behindText') !default;
+$euiColorVis5_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'behindText') !default;
+$euiColorVis6_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'behindText') !default;
+$euiColorVis7_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'behindText') !default;
+$euiColorVis8_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'behindText') !default;
+$euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'behindText') !default;

package/src/global_styling/variables/_font_weight.scss

@@ -0,0 +1,10 @@
+// Separated out to its own file for easy import into docs
+
+// Font weights
+$euiFontWeightLight:        300 !default;
+$euiFontWeightRegular:      400 !default;
+$euiFontWeightMedium:       500 !default;
+$euiFontWeightSemiBold:     600 !default;
+$euiFontWeightBold:         700 !default;
+$euiCodeFontWeightRegular:  400 !default;
+$euiCodeFontWeightBold:     700 !default;

package/src/global_styling/variables/_form.scss

@@ -0,0 +1,8 @@
+// Sizing
+$euiFormMaxWidth: $euiSizeXXL * 10 !default;
+$euiFormControlHeight: $euiSizeXXL !default;
+$euiFormControlCompressedHeight: $euiSizeXL !default;
+$euiFormControlPadding: $euiSizeM !default;
+$euiFormControlCompressedPadding: $euiSizeS !default;
+$euiFormControlBorderRadius: $euiBorderRadius !default;
+$euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall !default;

package/src/global_styling/variables/_index.scss

@@ -0,0 +1,23 @@
+// --------------------------------------------------------------------------------------
+// EUI global variables
+// --------------------------------------------------------------------------------------
+// This module contains all global variables available within EUI. Every variable in this
+// document should be prefixed with $eui. This lets us know where the variable is
+// coming from when looking inside the individual component files. Any component local
+// variables should be declared at the top of those documents prefixed with $componentName.
+
+// Global colors are established and importer per theme, before this manifest
+// Import order is important. Size, vis colors, ...etc are used in other variables.
+@import 'size';
+@import 'colors_vis';
+@import 'animations';
+@import 'font_weight';
+@import 'typography';
+@import 'borders';
+@import 'responsive';
+@import 'shadows';
+@import 'states';
+@import 'z_index';
+
+@import 'buttons';
+@import 'form';

package/src/global_styling/variables/_responsive.scss

@@ -0,0 +1,9 @@
+$euiBreakpoints: (
+  'xs': 0,
+  's':  575px,
+  'm':  768px,
+  'l':  992px,
+  'xl': 1200px
+) !default;
+
+$euiBreakpointKeys: map-keys($euiBreakpoints);

package/src/global_styling/variables/_shadows.scss

@@ -0,0 +1,2 @@
+// Shadows
+$euiShadowColor: $euiColorInk !default;

package/src/global_styling/variables/_size.scss

@@ -0,0 +1,15 @@
+$euiSize:     16px !default;
+
+$euiSizeXS:   $euiSize * .25 !default;
+$euiSizeS:    $euiSize * .5 !default;
+$euiSizeM:    $euiSize * .75 !default;
+$euiSizeL:    $euiSize * 1.5 !default;
+$euiSizeXL:   $euiSize * 2 !default;
+$euiSizeXXL:  $euiSize * 2.5 !default;
+
+$euiButtonMinWidth: $euiSize * 7 !default;
+
+$euiScrollBar: $euiSize !default;
+// Corner sizes are used as an inset border and therefore a smaller corner size means a larger thumb
+$euiScrollBarCorner: $euiSizeXS !default;
+$euiScrollBarCornerThin: $euiSizeS * .75 !default;

package/src/global_styling/variables/_states.scss

@@ -0,0 +1,14 @@
+// Colors
+$euiFocusRingColor: rgba($euiColorPrimary, .3) !default;
+$euiFocusRingAnimStartColor: rgba($euiColorPrimary, 0) !default;
+$euiFocusRingAnimStartSize: 6px !default;
+$euiFocusRingAnimStartSizeLarge: 10px !default;
+
+// Sizing
+$euiFocusRingSizeLarge: $euiSizeXS !default;
+$euiFocusRingSize: $euiFocusRingSizeLarge * .75 !default;
+
+// Transparency
+$euiFocusTransparency: lightOrDarkTheme(.1, .2) !default;
+$euiFocusTransparencyPercent: lightOrDarkTheme(90%, 80%) !default;
+$euiFocusBackgroundColor: tintOrShade($euiColorPrimary, $euiFocusTransparencyPercent, $euiFocusTransparencyPercent) !default;

package/src/global_styling/variables/_typography.scss

@@ -0,0 +1,75 @@
+// Families
+$euiFontFamily: 'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif !default;
+$euiCodeFontFamily: 'Roboto Mono', Menlo, Courier, monospace !default;
+
+// Careful using ligatures. Code editors like ACE will often error because of width calculations
+$euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;
+
+// Font sizes -- scale is loosely based on Major Third (1.250)
+$euiTextScale:      2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default;
+
+$euiFontSize:       $euiSize !default; // 5th position in scale
+$euiFontSizeXS:     $euiFontSize * nth($euiTextScale, 7) !default; // 12px
+$euiFontSizeS:      $euiFontSize * nth($euiTextScale, 6) !default; // 14px
+$euiFontSizeM:      $euiFontSize * nth($euiTextScale, 4) !default; // 18px
+$euiFontSizeL:      $euiFontSize * nth($euiTextScale, 3) !default; // 20px
+$euiFontSizeXL:     $euiFontSize * nth($euiTextScale, 2) !default; // 28px
+$euiFontSizeXXL:    $euiFontSize * nth($euiTextScale, 1) !default; // 36px
+
+// Line height
+$euiLineHeight:     1.5 !default;
+$euiBodyLineHeight: 1 !default;
+
+// Normally functions are imported before variables in `_index.scss` files
+// But because they need to consume some typography variables they need to live here
+@function convertToRem($size) {
+  @return #{$size / $euiFontSize}rem;
+}
+
+// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline.
+// EX: A proper line-height for text is 1.5 times the font-size.
+//     If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
+//     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
+@function lineHeightFromBaseline($multiplier: 3) {
+  @return convertToRem(($euiFontSize / 2) * $multiplier);
+}
+
+// Titles map
+// Lists all the properties per EuiTitle size that then gets looped through to create the selectors.
+// The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves
+$euiTitles: (
+  'xxxs': (
+    'font-size': $euiFontSizeXS,
+    'line-height': lineHeightFromBaseline(3),
+    'font-weight': $euiFontWeightBold,
+  ),
+  'xxs': (
+    'font-size': $euiFontSizeS,
+    'line-height': lineHeightFromBaseline(3),
+    'font-weight': $euiFontWeightBold,
+  ),
+  'xs': (
+    'font-size': $euiFontSize,
+    'line-height': lineHeightFromBaseline(3),
+    'font-weight': $euiFontWeightSemiBold,
+    'letter-spacing': -.02em,
+  ),
+  's': (
+    'font-size': $euiFontSizeL,
+    'line-height': lineHeightFromBaseline(4),
+    'font-weight': $euiFontWeightMedium,
+    'letter-spacing': -.025em,
+  ),
+  'm': (
+    'font-size': $euiFontSizeXL,
+    'line-height': lineHeightFromBaseline(5),
+    'font-weight': $euiFontWeightLight,
+    'letter-spacing': -.04em,
+  ),
+  'l': (
+    'font-size': $euiFontSizeXXL,
+    'line-height': lineHeightFromBaseline(6),
+    'font-weight': $euiFontWeightLight,
+    'letter-spacing': -.03em,
+  ),
+) !default;

package/src/global_styling/variables/_z_index.scss

@@ -0,0 +1,34 @@
+// Z-Index
+
+// Remember that z-index is relative to parent and based on the stacking context.
+// z-indexes only compete against other z-indexes when they exist as children of
+// that shared parent.
+
+// That means a popover with a settings of 2, will still show above a modal
+// with a setting of 100, if it is within that modal and not besides it.
+
+// Generally that means it's a good idea to consider things added to this file
+// as competitive only as siblings.
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+
+$euiZLevel0: 0;
+$euiZLevel1: 1000;
+$euiZLevel2: 2000;
+$euiZLevel3: 3000;
+$euiZLevel4: 4000;
+$euiZLevel5: 5000;
+$euiZLevel6: 6000;
+$euiZLevel7: 7000;
+$euiZLevel8: 8000;
+$euiZLevel9: 9000;
+
+$euiZToastList: $euiZLevel9;
+$euiZModal: $euiZLevel8;
+$euiZMask: $euiZLevel6;
+$euiZNavigation: $euiZLevel6;
+$euiZContentMenu: $euiZLevel2;
+$euiZHeader: $euiZLevel1;
+$euiZFlyout: $euiZHeader;
+$euiZMaskBelowHeader: $euiZHeader;
+$euiZContent: $euiZLevel0;