Build the token modules

RocketChat · Dec 30, 2020 · a42ea1e · a42ea1e
1 parent 3aa2ad9
commit a42ea1e
Show file tree

Hide file tree

Showing 15 changed files with 522 additions and 159 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -26,5 +26,7 @@
   },
   "eslint.options": {
     "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx"]
-  }
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
diff --git a/packages/fuselage-tokens/.prettierrc b/packages/fuselage-tokens/.prettierrc
@@ -4,4 +4,4 @@
   "quoteProps": "consistent",
   "jsxSingleQuote": true,
   "printWidth": 80
-} 
+}
diff --git a/packages/fuselage-tokens/breakpoints.js b/packages/fuselage-tokens/breakpoints.js
@@ -1,27 +1,10 @@
-export default {
-  xs: {
-    minViewportWidth: null,
-    columns: 4,
-    gutterWidth: 16,
-  },
-  sm: {
-    minViewportWidth: 600,
-    columns: 8,
-    gutterWidth: 16,
-  },
-  md: {
-    minViewportWidth: 768,
-    columns: 8,
-    gutterWidth: 24,
-  },
-  lg: {
-    minViewportWidth: 1024,
-    columns: 12,
-    gutterWidth: 24,
-  },
-  xl: {
-    minViewportWidth: 1440,
-    columns: 12,
-    gutterWidth: 24,
-  },
+'use strict';
+module.exports = {
+  xs: { name: 'xs', minViewportWidth: null, columns: 4, gutterWidth: 16 },
+  sm: { name: 'sm', minViewportWidth: 600, columns: 8, gutterWidth: 16 },
+  md: { name: 'md', minViewportWidth: 768, columns: 8, gutterWidth: 24 },
+  lg: { name: 'lg', minViewportWidth: 1024, columns: 12, gutterWidth: 24 },
+  xl: { name: 'xl', minViewportWidth: 1280, columns: 12, gutterWidth: 24 },
+  xxl: { name: 'xxl', minViewportWidth: 1600, columns: 12, gutterWidth: 24 },
+  xxxl: { name: 'xxxl', minViewportWidth: 1920, columns: 12, gutterWidth: 24 },
 };
diff --git a/packages/fuselage-tokens/breakpoints.mjs b/packages/fuselage-tokens/breakpoints.mjs
@@ -0,0 +1,9 @@
+export default {
+  xs: { name: 'xs', minViewportWidth: null, columns: 4, gutterWidth: 16 },
+  sm: { name: 'sm', minViewportWidth: 600, columns: 8, gutterWidth: 16 },
+  md: { name: 'md', minViewportWidth: 768, columns: 8, gutterWidth: 24 },
+  lg: { name: 'lg', minViewportWidth: 1024, columns: 12, gutterWidth: 24 },
+  xl: { name: 'xl', minViewportWidth: 1280, columns: 12, gutterWidth: 24 },
+  xxl: { name: 'xxl', minViewportWidth: 1600, columns: 12, gutterWidth: 24 },
+  xxxl: { name: 'xxxl', minViewportWidth: 1920, columns: 12, gutterWidth: 24 },
+};
diff --git a/packages/fuselage-tokens/breakpoints.scss b/packages/fuselage-tokens/breakpoints.scss
@@ -1,26 +1,43 @@
 $breakpoints: (
   xs: (
+    name: xs,
     min-viewport-width: null,
     columns: 4,
     gutter-width: 16,
   ),
   sm: (
+    name: sm,
     min-viewport-width: 600,
     columns: 8,
     gutter-width: 16,
   ),
   md: (
+    name: md,
     min-viewport-width: 768,
     columns: 8,
     gutter-width: 24,
   ),
   lg: (
+    name: lg,
     min-viewport-width: 1024,
     columns: 12,
     gutter-width: 24,
   ),
   xl: (
-    min-viewport-width: 1440,
+    name: xl,
+    min-viewport-width: 1280,
+    columns: 12,
+    gutter-width: 24,
+  ),
+  xxl: (
+    name: xxl,
+    min-viewport-width: 1600,
+    columns: 12,
+    gutter-width: 24,
+  ),
+  xxxl: (
+    name: xxxl,
+    min-viewport-width: 1920,
     columns: 12,
     gutter-width: 24,
   ),

diff --git a/packages/fuselage-tokens/colors.js b/packages/fuselage-tokens/colors.js
@@ -1,5 +1,5 @@
-export default {
-  // Neutral
+'use strict';
+module.exports = {
   n100: '#f7f8fa',
   n200: '#f2f3f5',
   n300: '#eeeff1',
@@ -9,8 +9,6 @@ export default {
   n700: '#6c727a',
   n800: '#2f343d',
   n900: '#1f2329',
-
-  // Blues
   b100: '#e8f2ff',
   b200: '#d1ebfe',
   b300: '#76b7fc',
@@ -20,8 +18,6 @@ export default {
   b700: '#10529e',
   b800: '#01336b',
   b900: '#012247',
-
-  // Greens
   g100: '#e5fbf4',
   g200: '#c0f6e4',
   g300: '#96f0d2',
@@ -31,8 +27,6 @@ export default {
   g700: '#19ac7c',
   g800: '#158d65',
   g900: '#106d4f',
-
-  // Reds
   r100: '#fddade',
   r200: '#fbb5be',
   r300: '#f98f9d',
@@ -42,8 +36,6 @@ export default {
   r700: '#b30a20',
   r800: '#8b0719',
   r900: '#630512',
-
-  // Yellows
   y100: '#fff6d6',
   y200: '#ffecad',
   y300: '#ffe383',
@@ -53,8 +45,6 @@ export default {
   y700: '#dfac00',
   y800: '#b68d00',
   y900: '#8e6d00',
-
-  // Purples
   p100: '#f9effc',
   p200: '#edd0f7',
   p300: '#dca0ef',
@@ -64,8 +54,6 @@ export default {
   p700: '#5f1477',
   p800: '#4a105d',
   p900: '#350b42',
-
-  // Oranges
   o100: '#fde8d7',
   o200: '#fad1b0',
   o300: '#f7b27b',
@@ -75,6 +63,5 @@ export default {
   o700: '#bd5a0b',
   o800: '#974809',
   o900: '#713607',
-
   white: '#ffffff',
 };
diff --git a/packages/fuselage-tokens/colors.json b/packages/fuselage-tokens/colors.json
@@ -0,0 +1,66 @@
+{
+  "n100": "#f7f8fa",
+  "n200": "#f2f3f5",
+  "n300": "#eeeff1",
+  "n400": "#e4e7ea",
+  "n500": "#cbced1",
+  "n600": "#9ea2a8",
+  "n700": "#6c727a",
+  "n800": "#2f343d",
+  "n900": "#1f2329",
+  "b100": "#e8f2ff",
+  "b200": "#d1ebfe",
+  "b300": "#76b7fc",
+  "b400": "#549df9",
+  "b500": "#1d74f5",
+  "b600": "#095ad2",
+  "b700": "#10529e",
+  "b800": "#01336b",
+  "b900": "#012247",
+  "g100": "#e5fbf4",
+  "g200": "#c0f6e4",
+  "g300": "#96f0d2",
+  "g400": "#6ce9c0",
+  "g500": "#2de0a5",
+  "g600": "#1ecb92",
+  "g700": "#19ac7c",
+  "g800": "#158d65",
+  "g900": "#106d4f",
+  "r100": "#fddade",
+  "r200": "#fbb5be",
+  "r300": "#f98f9d",
+  "r400": "#f76a7d",
+  "r500": "#f5455c",
+  "r600": "#db0c27",
+  "r700": "#b30a20",
+  "r800": "#8b0719",
+  "r900": "#630512",
+  "y100": "#fff6d6",
+  "y200": "#ffecad",
+  "y300": "#ffe383",
+  "y400": "#ffd95a",
+  "y500": "#ffd031",
+  "y600": "#f3be08",
+  "y700": "#dfac00",
+  "y800": "#b68d00",
+  "y900": "#8e6d00",
+  "p100": "#f9effc",
+  "p200": "#edd0f7",
+  "p300": "#dca0ef",
+  "p400": "#ca71e7",
+  "p500": "#9f22c7",
+  "p600": "#7f1b9f",
+  "p700": "#5f1477",
+  "p800": "#4a105d",
+  "p900": "#350b42",
+  "o100": "#fde8d7",
+  "o200": "#fad1b0",
+  "o300": "#f7b27b",
+  "o400": "#f59b53",
+  "o500": "#f38c39",
+  "o600": "#e26d0e",
+  "o700": "#bd5a0b",
+  "o800": "#974809",
+  "o900": "#713607",
+  "white": "#ffffff"
+}
diff --git a/packages/fuselage-tokens/colors.mjs b/packages/fuselage-tokens/colors.mjs
@@ -0,0 +1,66 @@
+export default {
+  n100: '#f7f8fa',
+  n200: '#f2f3f5',
+  n300: '#eeeff1',
+  n400: '#e4e7ea',
+  n500: '#cbced1',
+  n600: '#9ea2a8',
+  n700: '#6c727a',
+  n800: '#2f343d',
+  n900: '#1f2329',
+  b100: '#e8f2ff',
+  b200: '#d1ebfe',
+  b300: '#76b7fc',
+  b400: '#549df9',
+  b500: '#1d74f5',
+  b600: '#095ad2',
+  b700: '#10529e',
+  b800: '#01336b',
+  b900: '#012247',
+  g100: '#e5fbf4',
+  g200: '#c0f6e4',
+  g300: '#96f0d2',
+  g400: '#6ce9c0',
+  g500: '#2de0a5',
+  g600: '#1ecb92',
+  g700: '#19ac7c',
+  g800: '#158d65',
+  g900: '#106d4f',
+  r100: '#fddade',
+  r200: '#fbb5be',
+  r300: '#f98f9d',
+  r400: '#f76a7d',
+  r500: '#f5455c',
+  r600: '#db0c27',
+  r700: '#b30a20',
+  r800: '#8b0719',
+  r900: '#630512',
+  y100: '#fff6d6',
+  y200: '#ffecad',
+  y300: '#ffe383',
+  y400: '#ffd95a',
+  y500: '#ffd031',
+  y600: '#f3be08',
+  y700: '#dfac00',
+  y800: '#b68d00',
+  y900: '#8e6d00',
+  p100: '#f9effc',
+  p200: '#edd0f7',
+  p300: '#dca0ef',
+  p400: '#ca71e7',
+  p500: '#9f22c7',
+  p600: '#7f1b9f',
+  p700: '#5f1477',
+  p800: '#4a105d',
+  p900: '#350b42',
+  o100: '#fde8d7',
+  o200: '#fad1b0',
+  o300: '#f7b27b',
+  o400: '#f59b53',
+  o500: '#f38c39',
+  o600: '#e26d0e',
+  o700: '#bd5a0b',
+  o800: '#974809',
+  o900: '#713607',
+  white: '#ffffff',
+};
diff --git a/packages/fuselage-tokens/colors.scss b/packages/fuselage-tokens/colors.scss
@@ -1,5 +1,4 @@
 $colors: (
-  // Neutral
   n100: #f7f8fa,
   n200: #f2f3f5,
   n300: #eeeff1,
@@ -9,8 +8,6 @@ $colors: (
   n700: #6c727a,
   n800: #2f343d,
   n900: #1f2329,
-
-  // Blues
   b100: #e8f2ff,
   b200: #d1ebfe,
   b300: #76b7fc,
@@ -20,8 +17,6 @@ $colors: (
   b700: #10529e,
   b800: #01336b,
   b900: #012247,
-
-  // Greens
   g100: #e5fbf4,
   g200: #c0f6e4,
   g300: #96f0d2,
@@ -31,8 +26,6 @@ $colors: (
   g700: #19ac7c,
   g800: #158d65,
   g900: #106d4f,
-
-  // Reds
   r100: #fddade,
   r200: #fbb5be,
   r300: #f98f9d,
@@ -42,8 +35,6 @@ $colors: (
   r700: #b30a20,
   r800: #8b0719,
   r900: #630512,
-
-  // Yellows
   y100: #fff6d6,
   y200: #ffecad,
   y300: #ffe383,
@@ -53,8 +44,6 @@ $colors: (
   y700: #dfac00,
   y800: #b68d00,
   y900: #8e6d00,
-
-  // Purples
   p100: #f9effc,
   p200: #edd0f7,
   p300: #dca0ef,
@@ -64,8 +53,6 @@ $colors: (
   p700: #5f1477,
   p800: #4a105d,
   p900: #350b42,
-
-  // Oranges
   o100: #fde8d7,
   o200: #fad1b0,
   o300: #f7b27b,
@@ -75,6 +62,5 @@ $colors: (
   o700: #bd5a0b,
   o800: #974809,
   o900: #713607,
-
-  'white': #ffffff,
+  white: #ffffff,
 );
diff --git a/packages/fuselage-tokens/package.json b/packages/fuselage-tokens/package.json
@@ -7,7 +7,9 @@
     "name": "Rocket.Chat",
     "url": "https://rocket.chat/"
   },
+  "type": "module",
   "scripts": {
+    "build": "node scripts/build.mjs",
     "prettier-format": "prettier --config .prettierrc '**/*.js' --write"
   },
   "license": "MIT",