@sproutsocial/seeds-react-theme 1.0.0

package/dist/themes/types/_themed.scss

@@ -0,0 +1,119 @@
+// 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
+// theme.scss is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
+// _themed.scss will be copied to each theme folder in /dist, where the theme.scss file for that theme will be.
+@import "./theme.scss";
+
+// In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
+// so we need to map-get "default" to access it.
+$theme: map-get($theme, "default");
+
+// 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, $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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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/dist/types/dark/dataviz-palette.d.ts

@@ -0,0 +1,26 @@
+export declare const datavizPalette: {
+    DATAVIZ_COLORS_LIST: string[];
+    DATAVIZ_COLORS_MAP: {
+        "1": string;
+        "2": string;
+        "3": string;
+        "4": string;
+        "5": string;
+        "6": string;
+        "7": string;
+        "8": string;
+        "9": string;
+        "10": string;
+        "11": string;
+        "12": string;
+        "13": string;
+        "14": string;
+        "15": string;
+        "16": string;
+        "17": string;
+        "18": string;
+        "19": string;
+        "20": string;
+    };
+};
+//# sourceMappingURL=dataviz-palette.d.ts.map

package/dist/types/dark/dataviz-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataviz-palette.d.ts","sourceRoot":"","sources":["../../../src/dark/dataviz-palette.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;CA6C1B,CAAC"}

package/dist/types/dark/decorative-palettes.d.ts

@@ -0,0 +1,56 @@
+export declare const green: {
+    background: string;
+    highlight: string;
+    foreground: string;
+};
+export declare const blue: {
+    background: string;
+    highlight: string;
+    foreground: string;
+};
+export declare const purple: {
+    background: string;
+    highlight: string;
+    foreground: string;
+};
+export declare const yellow: {
+    background: string;
+    highlight: string;
+    foreground: string;
+};
+export declare const orange: {
+    background: string;
+    highlight: string;
+    foreground: string;
+};
+export declare const red: {
+    background: string;
+    highlight: string;
+    foreground: string;
+};
+export declare const neutral: {
+    background: string;
+    highlight: string;
+    foreground: string;
+};
+export declare const magenta: {
+    background: string;
+    highlight: string;
+    foreground: string;
+};
+export declare const pink: {
+    background: string;
+    highlight: string;
+    foreground: string;
+};
+export declare const aqua: {
+    background: string;
+    highlight: string;
+    foreground: string;
+};
+export declare const teal: {
+    background: string;
+    highlight: string;
+    foreground: string;
+};
+//# sourceMappingURL=decorative-palettes.d.ts.map

package/dist/types/dark/decorative-palettes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorative-palettes.d.ts","sourceRoot":"","sources":["../../../src/dark/decorative-palettes.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;CAIjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAIlB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAIlB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAIlB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;CAIf,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;CAIhB,CAAC"}