Add tailwind css setup files and dependencies (#74)

* add tailwind css setup files and dependencies

* feat: tailwind theme configs and assets

* feat: station design system v1

* eslint cleanup

package.json

@@ -67,6 +67,7 @@
     "@typescript-eslint/parser": "^5.36.2",
     "@vitejs/plugin-react": "^2.1.0",
     "@vitest/ui": "^0.22.1",
+    "autoprefixer": "^10.4.8",
     "cross-env": "^7.0.3",
     "electron": "^20.1.3",
     "electron-builder": "^23.0.3",
@@ -86,7 +87,10 @@
     "jsdom": "^20.0.0",
     "npm-run-all": "^4.1.5",
     "playwright": "^1.25.2",
+    "postcss": "^8.4.16",
+    "postcss-loader": "^7.0.1",
     "shx": "^0.3.4",
+    "tailwindcss": "^3.1.8",
     "tmp": "^0.2.1",
     "typescript": "^4.8.3",
     "undici": "^5.8.0",

postcss.config.js

@@ -0,0 +1,8 @@
+'use strict'
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

renderer/src/App.css

@@ -1,43 +1,98 @@
-.App {
-  text-align: center;
-  color: white;
-  height: 100vm;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-.App header {
-  margin-top: 2em;
-  border-bottom: 1px dotted white;
-}
 
-.logo {
-  height: 35vmin;
-  font-size: 2em;
-  pointer-events: none;
+@layer base {
+  @font-face {
+    font-family: "SuisseIntl";
+    src: url('assets/fonts/SuisseIntl/SuisseIntl-Regular.ttf');
+  }
+  @font-face {
+    font-family: "SpaceGrotesk";
+    src: url('assets/fonts/SpaceGrotesk/SpaceGrotesk-Regular.ttf');
+  }
+  @font-face {
+    font-family: "SpaceMono";
+    src: url('assets/fonts/SpaceMono/SpaceMono-Regular.ttf');
+  }
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .logo {
-    animation: App-logo-spin infinite 10s linear;
+@layer base {
+  .title {
+    @apply text-header-xxl font-title text-primary;
+  }
+
+  .subtitle {
+    @apply text-header-xl font-title text-secondary;
   }
-}
 
-.App main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
+  body {
+    @apply font-body
+  }
+
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 rounded-full font-body text-body-m  text-white
+     bg-primary hover:bg-primary-hover visited:bg-primary-click
+     disabled:bg-grayscale-500 disabled:text-grayscale-700;
   }
-  to {
-    transform: rotate(360deg);
+
+  .btn-primary-small {
+    @apply py-2 px-4 rounded-full font-body text-body-xs text-white
+    bg-primary hover:bg-primary-hover visited:bg-primary-click
+    disabled:bg-grayscale-500 disabled:text-grayscale-700;
   }
-}
 
-a {
-  color: cyan;
-}
+  .btn-secondary {
+    @apply py-2 px-4 rounded-full font-body text-body-m bg-opacity-0 border border-solid 
+     border-primary border-opacity-25  text-primary
+     hover:border-primary-hover hover:border-opacity-25 hover:text-primary-hover
+     visited:border-primary-click visited:border-opacity-25 visited:text-primary-click 
+     disabled:border-grayscale-500 disabled:text-grayscale-700;
+  }
+
+  .btn-secondary-small {
+    @apply py-2 px-4 rounded-full font-body text-body-xs bg-opacity-0 border border-solid
+     border-primary border-opacity-25  text-primary
+     hover:border-primary-hover hover:border-opacity-25 hover:text-primary-hover
+     visited:border-primary-click visited:border-opacity-25 visited:text-primary-click 
+     disabled:border-grayscale-500 disabled:text-grayscale-700
+     ;
+
+  }
+
+  .link-primary {
+    @apply text-primary underline decoration-primary/70
+     hover:text-primary-hover hover:decoration-primary-hover/70
+     visited:text-primary-click visited:decoration-primary-click/70
+  }
+
+  .link-primary-dark {
+    @apply text-white underline decoration-white/70
+     hover:text-white hover:decoration-white/70
+     visited:text-white visited:decoration-white/70
+  }
+
+  .gradient-space-marine {
+    @apply bg-gradient-to-r from-tertiary-accent to-secondary
+  }
+
+  .gradient-deep-marine {
+    @apply bg-gradient-to-r from-primary to-secondary
+  }
+
+  .gradient-space-turqoise {
+    @apply bg-gradient-to-r from-tertiary-accent to-accent
+  }
+
+  .gradient-space-fire {
+    @apply bg-gradient-to-r from-tertiary-accent to-warning
+  }
+
+  .gradient-sun-fire {
+    @apply bg-gradient-to-r from-secondary-accent to-warning
+  }
+}

renderer/src/assets/fonts/SpaceGrotesk/AUTHORS.txt

@@ -0,0 +1,9 @@
+# This is the official list of project authors for copyright purposes.
+# This file is distinct from the CONTRIBUTORS.txt file.
+# See the latter for an explanation.
+# 
+# Names should be added to this file as:
+# Name or Organization <email address>
+
+Florian Karsten <[email protected]>
+Květoslav Bartoš <[email protected]>

renderer/src/assets/fonts/SpaceGrotesk/CONTRIBUTORS.txt

@@ -0,0 +1,15 @@
+# This is the list of people who have contributed to this project,
+# and includes those not listed in AUTHORS.txt because they are not
+# copyright authors. For example, company employees may be listed
+# here because their company holds the copyright and is listed there.
+#
+# When adding J Random Contributor's name to this file, either J's
+# name or J's organization's name should be added to AUTHORS.txt
+#
+# Names should be added to this file as:
+# Name <email address>
+
+Florian Karsten <[email protected]>
+Květoslav Bartoš <[email protected]>
+Viviana Monsalve <[email protected]>
+Colophon Foundry <[email protected]>

renderer/src/assets/fonts/SpaceGrotesk/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

renderer/src/assets/fonts/SpaceMono/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2016 Google Inc. All Rights Reserved.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.