@sproutsocial/racine 9.1.0-token-beta.0 → 9.1.1-theme-extension.0

package/__flow__/themes/_themes.scss

@@ -1,138 +0,0 @@
-// Inspired by https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
-// This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
-
-// SET-UP
-// These files are auto-generated based on JS theme files, ensuring our SCSS theme variables stay in sync.
-@import "../../dist/themes/default.scss";
-@import "../../dist/themes/dark.scss";
-
-// In the JS theme files, the theme object is exported as "default" (i.e., using "export default"),
-// so we need to map-get "default" to access it.
-$themes: (
-   light: map-get($default, "default"),
-   dark: map-get($dark, "default")
-);
-
-// MIXIN
-// CSS properties that are theme-dependent must be wrapped in this mixin
-@mixin themed() {
-  @each $theme, $map in $themes {
-    .theme--#{$theme} & {
-      $theme-map: () !global;
-      @each $key, $submap in $map {
-        $value: map-get(map-get($themes, $theme), "#{$key}");
-        $theme-map: map-merge($theme-map, ($key: $value)) !global;
-      }
-      @content;
-      $theme-map: null !global;
-    }
-  }
-}
-
-// FUNCTIONS
-// This function will allow you to get any value from the theme.
-// @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
-@function t($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, $keys);
-}
-
-// The rest of the functions are convenience methods to get theme values for subsets of the theme.
-// @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
-@function colors($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("colors", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
-@function typography($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("typography", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
-@function fontWeights($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("fontWeights", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
-@function space($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("space", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
-@function radii($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("radii", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
-@function borders($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borders", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
-@function borderWidths($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borderWidths", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
-@function shadows($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("shadows", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
-@function easing($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("easing", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
-@function duration($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("duration", $keys));
-}
-
-// UTILITIES
-// Helper functions that power the functions above. Not relevant to the theme.
-// If you import this file with @use, these functions will be excluded because they are private.
-
-// Via https://stackoverflow.com/a/42295154
-// Used to split period-separated object keys, e.g. "colors.text.body" => ["colors", "text", "body"]
-// Only works with a single-character separator.
-@function _str-split($string, $separator) {
-  // empty array/list
-  $split-arr: ();
-  // first index of separator in string
-  $index : str-index($string, $separator);
-  // loop through string
-  @while $index != null {
-    // get the substring from the first character to the separator
-    $item: str-slice($string, 1, $index - 1);
-    // push item to array
-    $split-arr: append($split-arr, $item);
-    // remove item and separator from string
-    $string: str-slice($string, $index + 1);
-    // find new index of separator
-    $index : str-index($string, $separator);
-  }
-  // add the remaining string to list (the last item)
-  $split-arr: append($split-arr, $string);
-
-  @return $split-arr;
-}
-
-// Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
-// Iterates over a list of keys to read multi-level maps.
-// e.g., _map-deep-get((colors: (text: (body: "#364141"))), ["colors", "text", "body"]) => "#364141"
-@function _map-deep-get($map, $keys) {
-  @each $key in $keys {
-    $map: map-get($map, $key);
-  }
-  @return $map;
-}

package/__flow__/themes/utils/interact.js

@@ -1,12 +0,0 @@
-//@flow strict-local
-import { darken, lighten } from "polished";
-
-const interact = (mode: string) => (themeValue: string) => {
-  if (mode === "default-dark") {
-    return lighten(0.2, themeValue);
-  } else {
-    return darken(0.2, themeValue);
-  }
-};
-
-export default interact;

package/commonjs/themes/utils/interact.js

@@ -1,19 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _polished = require("polished");
-
-var interact = function interact(mode) {
-  return function (themeValue) {
-    if (mode === "default-dark") {
-      return (0, _polished.lighten)(0.2, themeValue);
-    } else {
-      return (0, _polished.darken)(0.2, themeValue);
-    }
-  };
-};
-
-var _default = interact;
-exports.default = _default;

package/dist/themes/_themes.scss

@@ -1,138 +0,0 @@
-// Inspired by https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
-// This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
-
-// SET-UP
-// These files are auto-generated based on JS theme files, ensuring our SCSS theme variables stay in sync.
-@import "../../dist/themes/default.scss";
-@import "../../dist/themes/dark.scss";
-
-// In the JS theme files, the theme object is exported as "default" (i.e., using "export default"),
-// so we need to map-get "default" to access it.
-$themes: (
-   light: map-get($default, "default"),
-   dark: map-get($dark, "default")
-);
-
-// MIXIN
-// CSS properties that are theme-dependent must be wrapped in this mixin
-@mixin themed() {
-  @each $theme, $map in $themes {
-    .theme--#{$theme} & {
-      $theme-map: () !global;
-      @each $key, $submap in $map {
-        $value: map-get(map-get($themes, $theme), "#{$key}");
-        $theme-map: map-merge($theme-map, ($key: $value)) !global;
-      }
-      @content;
-      $theme-map: null !global;
-    }
-  }
-}
-
-// FUNCTIONS
-// This function will allow you to get any value from the theme.
-// @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
-@function t($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, $keys);
-}
-
-// The rest of the functions are convenience methods to get theme values for subsets of the theme.
-// @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
-@function colors($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("colors", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
-@function typography($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("typography", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
-@function fontWeights($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("fontWeights", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
-@function space($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("space", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
-@function radii($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("radii", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
-@function borders($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borders", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
-@function borderWidths($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borderWidths", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
-@function shadows($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("shadows", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
-@function easing($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("easing", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
-@function duration($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("duration", $keys));
-}
-
-// UTILITIES
-// Helper functions that power the functions above. Not relevant to the theme.
-// If you import this file with @use, these functions will be excluded because they are private.
-
-// Via https://stackoverflow.com/a/42295154
-// Used to split period-separated object keys, e.g. "colors.text.body" => ["colors", "text", "body"]
-// Only works with a single-character separator.
-@function _str-split($string, $separator) {
-  // empty array/list
-  $split-arr: ();
-  // first index of separator in string
-  $index : str-index($string, $separator);
-  // loop through string
-  @while $index != null {
-    // get the substring from the first character to the separator
-    $item: str-slice($string, 1, $index - 1);
-    // push item to array
-    $split-arr: append($split-arr, $item);
-    // remove item and separator from string
-    $string: str-slice($string, $index + 1);
-    // find new index of separator
-    $index : str-index($string, $separator);
-  }
-  // add the remaining string to list (the last item)
-  $split-arr: append($split-arr, $string);
-
-  @return $split-arr;
-}
-
-// Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
-// Iterates over a list of keys to read multi-level maps.
-// e.g., _map-deep-get((colors: (text: (body: "#364141"))), ["colors", "text", "body"]) => "#364141"
-@function _map-deep-get($map, $keys) {
-  @each $key in $keys {
-    $map: map-get($map, $key);
-  }
-  @return $map;
-}