add sparx design system (#510)

update import formatting in preparation Reimplement processing revamp with design system skip checking node modules in ts more relevant fonts add page type to sidebar title fix endOfList text theming add navigation popout for new processing pages fix spacing in sidebar header
GamesDoneQuick · Apr 6, 2023 · f6b62e7 · f6b62e7
1 parent c988888
commit f6b62e7
Show file tree

Hide file tree

Showing 46 changed files with 1,244 additions and 449 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -4,17 +4,9 @@
     "commonjs": true,
     "es6": true
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended"],
   "parser": "@babel/eslint-parser",
-  "plugins": [
-    "react",
-    "react-hooks",
-    "simple-import-sort"
-  ],
+  "plugins": ["react", "react-hooks", "simple-import-sort"],
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module",
@@ -34,20 +26,14 @@
     "@typescript-eslint/explicit-function-return-type": 0,
     "@typescript-eslint/explicit-module-boundary-types": 0,
     "@typescript-eslint/no-empty-function": 0,
-    "eqeqeq": [
-      2,
-      "smart"
-    ],
+    "eqeqeq": [2, "smart"],
     "no-array-constructor": 2,
     "no-bitwise": 2,
     "no-cond-assign": 2,
     "no-console": [
       2,
       {
-        "allow": [
-          "warn",
-          "error"
-        ]
+        "allow": ["warn", "error"]
       }
     ],
     "no-constant-condition": 2,
@@ -84,9 +70,9 @@
       "error",
       {
         "groups": [
-          ["^react$", "^classnames$", "^[a-z]"],
+          ["^react$", "^classnames$", "^[a-z]", "^@(?!common|public|uikit|admin|tracker)"],
           ["^@(common|public|uikit)"],
-          ["^@"],
+          ["^@(admin|tracker)"],
           ["^\\.\\.(?!/?$)", "^\\.\\./?$", "^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
           ["^.+(\\.mod)?\\.css$"],
           ["^.+\\.(png|gif|jpe?g|webm|mov|svg)$"],
@@ -97,24 +83,12 @@
   },
   "overrides": [
     {
-      "files": [
-        "**/*.ts",
-        "**/*.tsx"
-      ],
+      "files": ["**/*.ts", "**/*.tsx"],
       "parser": "@typescript-eslint/parser",
-      "plugins": [
-        "@typescript-eslint"
-      ]
+      "plugins": ["@typescript-eslint"]
     },
     {
-      "files": [
-        "**/*Spec.ts",
-        "**/*Spec.tsx",
-        "**/*.spec.ts",
-        "**/*.spec.tsx",
-        "**/*Spec.js",
-        "spec/**"
-      ],
+      "files": ["**/*Spec.ts", "**/*Spec.tsx", "**/*.spec.ts", "**/*.spec.tsx", "**/*Spec.js", "spec/**"],
       "env": {
         "jasmine": true
       },
@@ -129,9 +103,7 @@
       }
     },
     {
-      "files": [
-        "babel.config.js"
-      ],
+      "files": ["babel.config.js"],
       "env": {
         "node": true
       }

diff --git a/.prettierignore b/.prettierignore
@@ -1,2 +1,5 @@
 node_modules/
 tracker/static/
+# Prettier doesn't understand Jinja templates, so formatting these
+# results in minification.
+tracker/templates/
diff --git a/bundles/.design_system/base_tokens.json b/bundles/.design_system/base_tokens.json
@@ -0,0 +1,138 @@
+{
+  "name": "GDQ Tracker Design System",
+  "description": "Design System definitions for the GDQ Tracker",
+  "scaleNames": ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  "colors": {
+    "grey": [
+      "#f6f8fa",
+      "#eaeef1",
+      "#d2d9de",
+      "#b3b9bd",
+      "#8f9294",
+      "#6b6d6f",
+      "#4d4e50",
+      "#333435",
+      "#232425",
+      "#171819"
+    ],
+    "blue": [
+      "#dff4fb",
+      "#bae3f6",
+      "#89ccf0",
+      "#61b0e8",
+      "#528fcf",
+      "#416fa8",
+      "#315584",
+      "#244168",
+      "#1e334f",
+      "#12243e"
+    ],
+    "green": [
+      "#e1f9e0",
+      "#b6edb3",
+      "#8ed986",
+      "#6ebe63",
+      "#57a047",
+      "#407c31",
+      "#306024",
+      "#214d17",
+      "#153c0e",
+      "#0a2c08"
+    ],
+    "yellow": [
+      "#fffc88",
+      "#f6e367",
+      "#e3c74f",
+      "#cea92c",
+      "#b98a00",
+      "#986912",
+      "#774f02",
+      "#603e01",
+      "#4a2e00",
+      "#392400"
+    ],
+    "orange": [
+      "#fff1e7",
+      "#ffd7bc",
+      "#ffb68a",
+      "#fb8e5d",
+      "#ed6524",
+      "#c83f00",
+      "#9f2d00",
+      "#7e2300",
+      "#621c00",
+      "#4c1100"
+    ],
+    "red": [
+      "#fdebea",
+      "#fbcfcd",
+      "#f9adac",
+      "#f88589",
+      "#f14f58",
+      "#c6313f",
+      "#9d1e31",
+      "#7d1426",
+      "#620a1e",
+      "#490518"
+    ],
+    "purple": [
+      "#feeefc",
+      "#f9d3fd",
+      "#efb0fc",
+      "#e388fb",
+      "#cd5ef3",
+      "#a343c6",
+      "#7b3996",
+      "#622a79",
+      "#4d1f60",
+      "#3b144b"
+    ],
+    "teal": [
+      "#c8fef5",
+      "#79f9e7",
+      "#47d4c4",
+      "#44b3a7",
+      "#44938b",
+      "#3e726d",
+      "#305853",
+      "#204440",
+      "#123430",
+      "#062723"
+    ]
+  },
+  "staticColors": {
+    "white": "#ffffff",
+    "black": "#1b1f24",
+    "twitch": "#9146FF"
+  },
+  "fontImport": "@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,600;1,400;1,600&family=Noto+Sans:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600;1,700;1,900&display=swap');",
+  "fonts": {
+    "normal": "\"Noto Sans\", -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+    "accent": "Barlow, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+    "monospace": "monospace, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif"
+  },
+  "fontWeights": {
+    "medium": 400,
+    "semibold": 600,
+    "bold": 700,
+    "black": 900
+  },
+  "spacings": {
+    "xxxs": 0.5,
+    "xxs": 1,
+    "xs": 2,
+    "sm": 4,
+    "md": 8,
+    "lg": 16,
+    "xl": 32,
+    "xxl": 48,
+    "xxxl": 64
+  },
+  "radii": {
+    "flat": "0px",
+    "minimal": "1px",
+    "normal": "4px",
+    "large": "16px",
+    "full": "100%"
+  }
+}
diff --git a/bundles/.design_system/generated/ColorTokens.css b/bundles/.design_system/generated/ColorTokens.css
@@ -0,0 +1,104 @@
+/** Generated Color Tokens. Do not edit manually **/
+
+:root {
+  /** grey **/
+  --grey-100: #eaeef1;
+  --grey-200: #d2d9de;
+  --grey-300: #b3b9bd;
+  --grey-400: #8f9294;
+  --grey-50: #f6f8fa;
+  --grey-500: #6b6d6f;
+  --grey-600: #4d4e50;
+  --grey-700: #333435;
+  --grey-800: #232425;
+  --grey-900: #171819;
+
+  /** blue **/
+  --blue-100: #bae3f6;
+  --blue-200: #89ccf0;
+  --blue-300: #61b0e8;
+  --blue-400: #528fcf;
+  --blue-50: #dff4fb;
+  --blue-500: #416fa8;
+  --blue-600: #315584;
+  --blue-700: #244168;
+  --blue-800: #1e334f;
+  --blue-900: #12243e;
+
+  /** green **/
+  --green-100: #b6edb3;
+  --green-200: #8ed986;
+  --green-300: #6ebe63;
+  --green-400: #57a047;
+  --green-50: #e1f9e0;
+  --green-500: #407c31;
+  --green-600: #306024;
+  --green-700: #214d17;
+  --green-800: #153c0e;
+  --green-900: #0a2c08;
+
+  /** yellow **/
+  --yellow-100: #f6e367;
+  --yellow-200: #e3c74f;
+  --yellow-300: #cea92c;
+  --yellow-400: #b98a00;
+  --yellow-50: #fffc88;
+  --yellow-500: #986912;
+  --yellow-600: #774f02;
+  --yellow-700: #603e01;
+  --yellow-800: #4a2e00;
+  --yellow-900: #392400;
+
+  /** orange **/
+  --orange-100: #ffd7bc;
+  --orange-200: #ffb68a;
+  --orange-300: #fb8e5d;
+  --orange-400: #ed6524;
+  --orange-50: #fff1e7;
+  --orange-500: #c83f00;
+  --orange-600: #9f2d00;
+  --orange-700: #7e2300;
+  --orange-800: #621c00;
+  --orange-900: #4c1100;
+
+  /** red **/
+  --red-100: #fbcfcd;
+  --red-200: #f9adac;
+  --red-300: #f88589;
+  --red-400: #f14f58;
+  --red-50: #fdebea;
+  --red-500: #c6313f;
+  --red-600: #9d1e31;
+  --red-700: #7d1426;
+  --red-800: #620a1e;
+  --red-900: #490518;
+
+  /** purple **/
+  --purple-100: #f9d3fd;
+  --purple-200: #efb0fc;
+  --purple-300: #e388fb;
+  --purple-400: #cd5ef3;
+  --purple-50: #feeefc;
+  --purple-500: #a343c6;
+  --purple-600: #7b3996;
+  --purple-700: #622a79;
+  --purple-800: #4d1f60;
+  --purple-900: #3b144b;
+
+  /** teal **/
+  --teal-100: #79f9e7;
+  --teal-200: #47d4c4;
+  --teal-300: #44b3a7;
+  --teal-400: #44938b;
+  --teal-50: #c8fef5;
+  --teal-500: #3e726d;
+  --teal-600: #305853;
+  --teal-700: #204440;
+  --teal-800: #123430;
+  --teal-900: #062723;
+
+  /** static **/
+  --black: #1b1f24;
+  --twitch: #9146ff;
+  --white: #ffffff;
+}
diff --git a/bundles/.design_system/generated/DesignSystem.css b/bundles/.design_system/generated/DesignSystem.css
@@ -0,0 +1,4 @@
+@import './ColorTokens.css';
+@import './FontTokens.css';
+@import './Spacing.css';
+@import './Themes.css';
diff --git a/bundles/.design_system/generated/FontTokens.css b/bundles/.design_system/generated/FontTokens.css
@@ -0,0 +1,16 @@
+/** Generated Font Tokens. Do not edit manually **/
+
+@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,600;1,400;1,600&family=Noto+Sans:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600;1,700;1,900&display=swap');
+
+:root {
+  --font-normal: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica,
+    Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
+  --font-accent: Barlow, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, Ubuntu,
+    roboto, noto, segoe ui, arial, sans-serif;
+  --font-monospace: monospace, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica,
+    Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
+  --font-weight-medium: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-black: 900;
+}
diff --git a/bundles/.design_system/generated/Spacing.css b/bundles/.design_system/generated/Spacing.css
@@ -0,0 +1,18 @@
+/** Generated Spacing Tokens. Do not edit manually **/
+
+:root {
+  --radius-flat: 0px;
+  --radius-minimal: 1px;
+  --radius-normal: 4px;
+  --radius-large: 16px;
+  --radius-full: 100%;
+  --space-xxxs: 0.5px;
+  --space-xxs: 1px;
+  --space-xs: 2px;
+  --space-sm: 4px;
+  --space-md: 8px;
+  --space-lg: 16px;
+  --space-xl: 32px;
+  --space-xxl: 48px;
+  --space-xxxl: 64px;
+}