create-application-template 1.2.4 → 1.3.1

package/README.md

@@ -72,7 +72,7 @@ if you proceed with styled-components:
   - that's it!
 
 if you prefer CSS: 
-  - alter `.stylintrc.js` and `.husky/pre-commint` per the files' notes
+  - alter `.stylintrc.js` and `.husky/pre-commit` per the files' notes
   - remove `.ts` files from `/src/styles/` or "recreate" them in `.css`
 
 ## environmental settings

package/ccrate/src/styles/theme.ts

@@ -1,3 +1,5 @@
+import { transparentize } from 'polished'
+
 const theme = {
   font: 'exo2',
   colors: {
@@ -5,7 +7,14 @@ const theme = {
       background: '#182f37',
       primary: '#e2b432',
     },
-    get link() { return this.palette.primary },
+    get link() {
+      const link = this.palette.primary
+
+      return {
+        regular: transparentize(0.4, link),
+        hover: transparentize(0.6, link),
+      }
+    },
   },
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-application-template",
-  "version": "1.2.4",
+  "version": "1.3.1",
   "description": "provides a configured application template for you to build upon",
   "main": "index.js",
   "bin": {
@@ -48,6 +48,7 @@
     "concurrently": "8.2.2",
     "dotenv-flow": "4.1.0",
     "husky": "9.0.11",
+    "polished": "4.3.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "styled-components": "6.1.12",

package/src/styles/App.styled.ts

@@ -22,6 +22,10 @@ export const StyledSection = styled.section`
 `
 
 export const StyledLink = styled.a(({ theme }) => `
-  color: ${theme.colors.palette.primary};
-  opacity: 0.6;
+  color: ${theme.colors.link.regular};
+  transition: 0.3s;
+
+  &:hover {
+    color: ${theme.colors.link.hover};
+  }
 `)

package/src/styles/theme.ts

@@ -1,3 +1,5 @@
+import { transparentize } from 'polished'
+
 const theme = {
   font: 'exo2',
   colors: {
@@ -5,7 +7,14 @@ const theme = {
       background: '#454145',
       primary: '#cec2eb',
     },
-    get link() { return this.palette.primary },
+    get link() {
+      const link = this.palette.primary
+
+      return {
+        regular: transparentize(0.4, link),
+        hover: transparentize(0.6, link),
+      }
+    },
   },
 }