fix: move maps back into core

boltdesignsystem · Jun 12, 2020 · 885b3f4 · 885b3f4
1 parent a727fe0
commit 885b3f4
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 123 deletions.
diff --git a/packages/core-v3.x/styles/01-settings/settings-font-family/_settings-font-family.scss b/packages/core-v3.x/styles/01-settings/settings-font-family/_settings-font-family.scss
@@ -80,3 +80,64 @@ $bolt-font-families: (
   'typography/font-families.bolt.#{$bolt-lang}.json',
   $bolt-font-families
 );
+
+/* ------------------------------------ *\
+   New Maps for CSS vars
+\* ------------------------------------ */
+
+/**
+ * Typography token maps
+ */
+$bolt-type-font-size-system: (
+  'xxxlarge': 2.35rem,
+  'xxlarge': 1.75rem,
+  'xlarge': 1.4rem,
+  'large': 1.15rem,
+  'medium': 1rem,
+  'small': 0.9rem,
+  'xsmall': 0.8rem,
+  'xxsmall': 0.7rem,
+) !default;
+
+$bolt-type-line-height-system: (
+  'xxxlarge': 1.25,
+  'xxlarge': 1.35,
+  'xlarge': 1.4,
+  'large': 1.5,
+  'medium': 1.55,
+  'small': 1.45,
+  'xsmall': 1.4,
+  'xxsmall': 1.4,
+) !default;
+
+$bolt-type-letter-spacing-system: (
+  'narrow': -0.025rem,
+  'regular': 0,
+  'wide': 0.05rem,
+) !default;
+
+$bolt-type-font-weight-system: (
+  'light': 300,
+  'regular': 400,
+  'semibold': 600,
+  'bold': 800,
+) !default;
+
+$bolt-type-font-family-system: (
+  'body':
+    "'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans','Helvetica Neue', sans-serif",
+  'headline':
+    "'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans','Helvetica Neue', sans-serif",
+  'code': 'monospace, monospace',
+) !default;
+
+/**
+ * Line height multiplier
+ *
+ * This are used for mathematically increasing or decreasing line-height for every single font-size.
+ */
+$bolt-type-line-height-multiplier-system: (
+  'tight': 0.77,
+  'regular': 1,
+  'loose': 1.2,
+) !default;
diff --git a/packages/core-v3.x/styles/01-settings/settings-spacing/_settings-spacing.scss b/packages/core-v3.x/styles/01-settings/settings-spacing/_settings-spacing.scss
@@ -44,3 +44,72 @@ $bolt-spacing-directions: ('', 'top', 'right', 'bottom', 'left') !default;
 /// Bolt's definition of spacing types.
 /// @type Map
 $bolt-spacing-types: ('', 'squished', 'stretched') !default;
+
+/* ------------------------------------ *\
+   New Maps for CSS vars
+\* ------------------------------------ */
+
+/**
+ * Base value map
+ * x: horizontal
+ * y: vertical
+ *
+ * Base values are kept unitless to allow pure math in edge cases. For example, using `em` instead of `rem`:
+ * calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-medium) * 1em)
+ */
+$bolt-spacing-system: (
+  'x': 1.55,
+  'y': 1.35
+) !default;
+
+/**
+ * Base multiplier map
+ */
+$bolt-spacing-multiplier-system: (
+  'xxlarge': 8,
+  'xlarge': 4,
+  'large': 2,
+  'medium': 1,
+  'small': 0.5,
+  'xsmall': 0.25,
+  'xxsmall': 0.125
+) !default;
+
+/**
+ * Spacing token maps
+ *
+ * Token values are kept as formulas so they can be updated by changing base values and multipliers alone.
+ */
+$bolt-spacing-x-system: (
+  'xxlarge':
+    calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-xxlarge) * 1rem),
+  'xlarge':
+    calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-xlarge) * 1rem),
+  'large':
+    calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-large) * 1rem),
+  'medium':
+    calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-medium) * 1rem),
+  'small':
+    calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-small) * 1rem),
+  'xsmall':
+    calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-xsmall) * 1rem),
+  'xxsmall':
+    calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-xxsmall) * 1rem)
+) !default;
+
+$bolt-spacing-y-system: (
+  'xxlarge':
+    calc(var(--bolt-spacing-y) * var(--bolt-spacing-multiplier-xxlarge) * 1rem),
+  'xlarge':
+    calc(var(--bolt-spacing-y) * var(--bolt-spacing-multiplier-xlarge) * 1rem),
+  'large':
+    calc(var(--bolt-spacing-y) * var(--bolt-spacing-multiplier-large) * 1rem),
+  'medium':
+    calc(var(--bolt-spacing-y) * var(--bolt-spacing-multiplier-medium) * 1rem),
+  'small':
+    calc(var(--bolt-spacing-y) * var(--bolt-spacing-multiplier-small) * 1rem),
+  'xsmall':
+    calc(var(--bolt-spacing-y) * var(--bolt-spacing-multiplier-xsmall) * 1rem),
+  'xxsmall':
+    calc(var(--bolt-spacing-y) * var(--bolt-spacing-multiplier-xxsmall) * 1rem)
+) !default;
diff --git a/packages/global/styles/03-generic/_generic-vars-spacing.scss b/packages/global/styles/03-generic/_generic-vars-spacing.scss
@@ -2,73 +2,10 @@
    Spacing System (CSS Custom Props)
 \* ------------------------------------ */
 
-/**
- * Base value map
- * x: horizontal
- * y: vertical
- *
- * Base values are kept unitless to allow pure math in edge cases. For example, using `em` instead of `rem`:
- * calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-medium) * 1em)
- */
-$bolt-spacing-system: (
-  'x': 1.55,
-  'y': 1.35,
-) !default;
-
-/**
- * Base multiplier map
- */
-$bolt-spacing-multiplier-system: (
-  'xxlarge': 8,
-  'xlarge': 4,
-  'large': 2,
-  'medium': 1,
-  'small': 0.5,
-  'xsmall': 0.25,
-  'xxsmall': 0.125,
-) !default;
-
-/**
- * Spacing token maps
- *
- * Token values are kept as formulas so they can be updated by changing base values and multipliers alone.
- */
-$bolt-spacing-x-system: (
-  'xxlarge':
-    calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-xxlarge) * 1rem),
-  'xlarge':
-    calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-xlarge) * 1rem),
-  'large':
-    calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-large) * 1rem),
-  'medium':
-    calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-medium) * 1rem),
-  'small':
-    calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-small) * 1rem),
-  'xsmall':
-    calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-xsmall) * 1rem),
-  'xxsmall':
-    calc(var(--bolt-spacing-x) * var(--bolt-spacing-multiplier-xxsmall) * 1rem),
-) !default;
-
-$bolt-spacing-y-system: (
-  'xxlarge':
-    calc(var(--bolt-spacing-y) * var(--bolt-spacing-multiplier-xxlarge) * 1rem),
-  'xlarge':
-    calc(var(--bolt-spacing-y) * var(--bolt-spacing-multiplier-xlarge) * 1rem),
-  'large':
-    calc(var(--bolt-spacing-y) * var(--bolt-spacing-multiplier-large) * 1rem),
-  'medium':
-    calc(var(--bolt-spacing-y) * var(--bolt-spacing-multiplier-medium) * 1rem),
-  'small':
-    calc(var(--bolt-spacing-y) * var(--bolt-spacing-multiplier-small) * 1rem),
-  'xsmall':
-    calc(var(--bolt-spacing-y) * var(--bolt-spacing-multiplier-xsmall) * 1rem),
-  'xxsmall':
-    calc(var(--bolt-spacing-y) * var(--bolt-spacing-multiplier-xxsmall) * 1rem),
-) !default;
-
 /**
  * Generate global spacing variables
+ *
+ * 1. Maps are kept in core/settings.
  */
 :root {
   // Base tokens are for public use and user overrides

diff --git a/packages/global/styles/03-generic/_generic-vars-typography.scss b/packages/global/styles/03-generic/_generic-vars-typography.scss
@@ -2,67 +2,11 @@
    Font-size System (CSS Custom Props)
 \* ------------------------------------ */
 
-/**
- * Typography token maps
- */
-$bolt-type-font-size-system: (
-  'xxxlarge': 2.35rem,
-  'xxlarge': 1.75rem,
-  'xlarge': 1.4rem,
-  'large': 1.15rem,
-  'medium': 1rem,
-  'small': 0.9rem,
-  'xsmall': 0.8rem,
-  'xxsmall': 0.7rem,
-) !default;
-
-$bolt-type-line-height-system: (
-  'xxxlarge': 1.25,
-  'xxlarge': 1.35,
-  'xlarge': 1.4,
-  'large': 1.5,
-  'medium': 1.55,
-  'small': 1.45,
-  'xsmall': 1.4,
-  'xxsmall': 1.4,
-) !default;
-
-$bolt-type-letter-spacing-system: (
-  'narrow': -0.025rem,
-  'regular': 0,
-  'wide': 0.05rem,
-) !default;
-
-$bolt-type-font-weight-system: (
-  'light': 300,
-  'regular': 400,
-  'semibold': 600,
-  'bold': 800,
-) !default;
-
-$bolt-type-font-family-system: (
-  'body':
-    "'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans','Helvetica Neue', sans-serif",
-  'headline':
-    "'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans','Helvetica Neue', sans-serif",
-  'code': 'monospace, monospace',
-) !default;
-
-/**
- * Line height multiplier
- *
- * This are used for mathematically increasing or decreasing line-height for every single font-size.
- */
-$bolt-type-line-height-multiplier-system: (
-  'tight': 0.77,
-  'regular': 1,
-  'loose': 1.2,
-) !default;
-
 /**
  * Generate global typography variables
  *
- * In order for the following to work, font-size must be defined in the <html>:
+ * 1. Maps are kept in core/settings.
+ * 2. In order for the following to work, font-size must be defined in the <html>:
  * html { font-size: var(--bolt-font-size); }
  */
 :root {