[Backport 1.x] [New Theme] Reset beta theme

src/theme_cascadia_dark.scss

@@ -20,7 +20,3 @@
 
 // Packages
 @import '../packages/index';
-
-// Component overrides
-// Comes after the component import and overrides via cascade
-@import 'themes/oui-cascadia/overrides/index';

src/theme_cascadia_light.scss

@@ -20,7 +20,3 @@
 
 // Packages
 @import '../packages/index';
-
-// Component overrides
-// Comes after the component import and overrides via cascade
-@import 'themes/oui-cascadia/overrides/index';

src/themes/oui-cascadia/global_styling/css_variables/_fonts.scss

@@ -0,0 +1,9 @@
+/*!
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+:root {
+  --oui-font-family: #{$ouiFontFamily};
+  --oui-code-font-family: #{$ouiCodeFontFamily};
+}

src/themes/oui-cascadia/global_styling/css_variables/_index.scss

@@ -0,0 +1,6 @@
+/*!
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@import 'fonts';

src/themes/oui-cascadia/global_styling/functions/_colors.scss

@@ -0,0 +1,156 @@
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+// Converting a normal hex color to RBG
+@function hexToRGB($color) {
+  @return 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29';
+}
+
+// Mixes a provided color with white.
+@function tint($color, $percent) {
+  @return mix($ouiColorGhost, $color, $percent);
+}
+
+// Mixes a provided color with black.
+@function shade($color, $percent) {
+  @return mix($ouiColorInk, $color, $percent);
+}
+
+// For theming. Checks the text color and tells us whether it's light or dark.
+// Based on that we either tint (add white) or shade (add black).
+@function tintOrShade($color, $tint, $shade) {
+  @if (lightness($ouiTextColor) > 50) {
+    @return shade($color, $shade);
+  } @else {
+    @return tint($color, $tint);
+  }
+}
+
+// The reverse of the above
+@function shadeOrTint($color, $shade, $tint) {
+  @if (lightness($ouiTextColor) < 50) {
+    @return shade($color, $shade);
+  } @else {
+    @return tint($color, $tint);
+  }
+}
+
+// Similar to above, but uses the light or dark color based
+// on whether it's the light or dark theme
+@function lightOrDarkTheme($lightColor, $darkColor) {
+  @if (lightness($ouiTextColor) < 50) {
+    @return $lightColor;
+  } @else {
+    @return $darkColor;
+  }
+}
+
+// Calculates luminance, which is better than brightness for checking colors
+// pow, nth functions come from the _math.scss functions
+@function luminance($color) {
+  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+  $rgba: red($color), green($color), blue($color);
+  $rgba2: ();
+
+  @for $i from 1 through 3 {
+    $rgb: nth($rgba, $i);
+    $rgb: $rgb / 255;
+
+    $rgb: if($rgb < .03928, $rgb / 12.92, pow(($rgb + .055) / 1.055, 2.4));
+
+    $rgba2: append($rgba2, $rgb);
+  }
+
+  @return .2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + .0722 * nth($rgba2, 3);
+}
+
+// Calculate contrast
+@function contrastRatio($background, $foreground) {
+  $backgroundLum: luminance($background) + .05;
+  $foregroundLum: luminance($foreground) + .05;
+
+  @return max($backgroundLum, $foregroundLum) / min($backgroundLum, $foregroundLum);
+}
+
+// Given $color, decide whether $lightText or $darkText should be used as the text color
+// ex: chooseLightOrDarkText(#EEE, #FFF, #000) would return #000 because it has
+//     a higher contrast than #FFF against a #EEE background.
+@function chooseLightOrDarkText($background, $lightText, $darkText) {
+  $lightContrast: contrastRatio($background, $lightText);
+  $darkContrast: contrastRatio($background, $darkText);
+
+  @if ($lightContrast > $darkContrast) {
+    @return $lightText;
+  } @else {
+    @return $darkText;
+  }
+}
+
+// Given a $foreground and a $background, make the $foreground AA accessibility by slightly
+// adjusting it till the contrast is high enough
+// By default it will compare against the page background color
+
+// ex: makeContrastColor($lightPink, #FFF) would continually shade the pink until
+//     it had higher than 4.5 contrast on a white background.
+$ouiContrastRatioText: 4.5;
+@function makeHighContrastColor($foreground, $background: $ouiPageBackgroundColor, $ratio: $ouiContrastRatioText) {
+  $contrast: contrastRatio($foreground, $background);
+
+  // Determine the lightness factor of the background color first to
+  // determine whether to shade or tint the foreground.
+  $brightness: lightness($background);
+
+  $highContrastTextColor: $foreground;
+
+  @while ($contrast < $ratio) {
+    @if ($brightness > 50) {
+      $highContrastTextColor: shade($highContrastTextColor, 5%);
+    } @else {
+      $highContrastTextColor: tint($highContrastTextColor, 5%);
+    }
+
+    $contrast: contrastRatio($highContrastTextColor, $background);
+
+    @if (lightness($highContrastTextColor) < 5) {
+      @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for light mode.';
+      @return $highContrastTextColor;
+    }
+
+    @if (lightness($highContrastTextColor) > 95) {
+      @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for dark mode.';
+      @return $highContrastTextColor;
+    }
+  }
+
+  @return $highContrastTextColor;
+}
+
+// Graphics such as stand alone icons and pieces of a graph only need a minimum ratio of 3:1 with its background.
+// Therefore, we can reuse the `makeHighContrastColor()` function but only attain a min contrast of 3.0.
+// It is still recommended to use `makeHighContrastColor()` to attain a 4.5:1 ratio if the graphic is small or thinly stroked.
+// https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Informational_Graphic_Contrast_(Minimum)
+$ouiContrastRatioGraphic: 3;
+@function makeGraphicContrastColor($color, $background: $ouiPageBackgroundColor) {
+  @return makeHighContrastColor($color, $background, $ouiContrastRatioGraphic);
+}
+
+// Disabled content only needs a contrast of at least 2 because there is no interaction available
+$ouiContrastRatioDisabled: 2;
+@function makeDisabledContrastColor($color, $background: $ouiPageBackgroundColor) {
+  @return makeHighContrastColor($color, $background, $ouiContrastRatioDisabled);
+}
+
+
+/* OUI -> EUI Aliases */
+$euiContrastRatioText: $ouiContrastRatioText;
+$euiContrastRatioGraphic: $ouiContrastRatioGraphic;
+$euiContrastRatioDisabled: $ouiContrastRatioDisabled;
+/* End of Aliases */

src/themes/oui-cascadia/global_styling/functions/_index.scss

@@ -9,7 +9,8 @@
  * GitHub history for details.
  */
 
-// Import base theme first, then override
-@import '../../../../global_styling/functions/index';
+// Math needs to be first in the load order
+@import 'math';
 
-@import './shadows';
+// Using math, we have functions to manipulate contrast / luminosity for accessibility
+@import 'colors';

src/themes/oui-cascadia/global_styling/functions/_math.scss

@@ -0,0 +1,74 @@
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
+@function pow($number, $power) {
+  @if ($power != $power or ($power != 0 and $power == $power / 2)) {
+    @return $power;
+  }
+  @if ($power == 1) {
+    @return $number;
+  }
+  @if ($power == 0) {
+    @return 1;
+  }
+  @if ($power < 0) {
+    @return 1 / pow($number, -$power);
+  }
+  @if (0 < $power and $power < 2) {
+    $hasLeadingOne: false;
+    @if (floor($power) == 1) {
+      $power: $power - 1;
+      $hasLeadingOne: true;
+    } @else {
+      $hasLeadingOne: false;
+    }
+    $doublePower: pow($number, $power * 2);
+    $fullPower: nthRoot($doublePower, 2);
+    @if ($hasLeadingOne) {
+      $fullPower: $fullPower * $number;
+    }
+    @return $fullPower;
+  } @else if (getDecimal($power) != 0) {
+    $wholePower: floor($power);
+    $decimalPower: getDecimal($power);
+    @return pow($number, $wholePower) * pow($number, $decimalPower);
+  } @else {
+    $hasTrailingOne: $power % 2 == 1;
+    @if ($hasTrailingOne) {
+      $power: $power - 1;
+    }
+    $halfPower: pow($number, floor($power / 2));
+    $fullPower: $halfPower * $halfPower;
+    @if ($hasTrailingOne) {
+      $fullPower: $fullPower * $number;
+    }
+    @return $fullPower;
+  }
+}
+
+@function getDecimal($number) {
+  @if ($number < 0) {
+    $number: -$number;
+  }
+  @return $number % 1;
+}
+
+// From: http://rosettacode.org/wiki/Nth_root#JavaScript
+@function nthRoot($num, $n: 2, $prec: 12) {
+  $x: 1;
+
+  @for $i from 0 through $prec {
+    $x: 1 / $n * (($n - 1) * $x + ($num / pow($x, $n - 1)));
+  }
+
+  @return $x;
+}

src/themes/oui-cascadia/global_styling/index.scss

@@ -21,7 +21,10 @@
 @import 'mixins/index';
 
 // Utility classes provide one-off selectors for common css problems
-@import '../../../global_styling/utility/index';
+@import 'utility/index';
+
+// CSS variables of SCSS variables
+@import 'css_variables/index';
 
 // The reset file makes use of variables and mixins
 @import 'reset/index';

src/themes/oui-cascadia/global_styling/mixins/_beta_badge.scss

@@ -0,0 +1,71 @@
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+
+// 1. Extend beta badges to at least 30% of the container's width
+// 2. Fix for IE to ensure badges are visible outside of a <button> tag
+
+@mixin ouiHasBetaBadge($selector, $spacing: $ouiSize) {
+  #{$selector}--hasBetaBadge {
+    position: relative;
+    overflow: visible; // 2
+
+    #{$selector}__betaBadgeWrapper {
+      position: absolute;
+      top: ($ouiSizeL / -2);
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 3; // get above abs positioned image
+      min-width: 30%; // 1
+      max-width: calc(100% - #{($spacing * 2)});
+
+      .ouiToolTipAnchor,
+      #{$selector}__betaBadge {
+        width: 100%; // 1
+      }
+
+      #{$selector}__betaBadge {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+
+/* OUI -> EUI Aliases */
+@mixin euiHasBetaBadge($selector, $spacing: $ouiSize) {
+  #{$selector}--hasBetaBadge {
+    position: relative;
+    overflow: visible; // 2
+
+    #{$selector}__betaBadgeWrapper {
+      position: absolute;
+      top: ($ouiSizeL / -2);
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 3; // get above abs positioned image
+      min-width: 30%; // 1
+      max-width: calc(100% - #{($spacing * 2)});
+
+      .euiToolTipAnchor,
+      #{$selector}__betaBadge {
+        width: 100%; // 1
+      }
+
+      #{$selector}__betaBadge {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+/* End of Aliases */