Merge pull request #80 from joshdales/use-deno

.github/workflows/build.yml

@@ -9,26 +9,25 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-        with:
-          ref: main
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
+      - name: Install Deno
+        uses: denoland/setup-deno@v2
         with:
-          version: 9
-          run_install: false
+          deno-version: v2.x
 
-      - name: Install Node.js
-        uses: actions/setup-node@v4
+      - name: Cache dependencies
+        uses: actions/cache@v4
         with:
-          node-version: '20.x'
-          cache: pnpm
+          path: |
+            ~/.deno
+            ~/.cache/deno
+          key: ${{ hashFiles('deno.lock') }}
 
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+      - name: Install Deps
+        run: deno install
 
       - name: Build CSS
-        run: pnpm build
+        run: deno task build
 
       - name: Check if CSS is up to date
         run: |

.github/workflows/publish.yml

@@ -14,23 +14,13 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 9
-          run_install: false
-
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: '20.x'
-          cache: pnpm
           registry-url: 'https://registry.npmjs.org'
 
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
       - name: Publish
-        run: pnpm publish --provenance --access public
+        run: npm publish --provenance --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.npmignore

@@ -1,2 +1,4 @@
 .github
 website
+deno.json
+deno.loeck

README.md

@@ -79,7 +79,7 @@ There are a series of classes for text, along with others elements like buttons,
 
 ### Customisation
 The the element classes this is managed with colour classes: `.red`, `.orange`, `.yellow`, `.green`, `.cyan`, `.blue`, `.purple`, and `.pink`.
-Each has numbered `accent` properties and sets the `accent-color` property as well, so you can apply a colour class to parent component or directly on an element to give it that accent, or make your own you just need to add `accent-1` - `accent-8` to a class:
+Each has numbered `accent` properties and sets the `accent-color` property as well, so you can apply a colour class to parent component or directly on an element to give it that accent, or make your own you just need to add `accent-1` - `accent-9` to a class:
 ```css
 .colour {
 	--accent-1: var(--colour-1);
@@ -97,7 +97,7 @@ The accent variables are often used in the following way on interactive elements
 1. `accent-4` The standard accent colour for the element.
 2. `accent-3` The accent used when elements are being viewed (either by focus or hover).
 3. `accent-2` The element is being activated or interactive with.
-4. `accent-8` Contrast colour with the main accent, usually text or background.
+4. `accent-9` Contrast colour with the main accent, usually text or background.
 
 If you have a button or input and there is no accent class currently set on the element or a common ancestor then they will fallback to using the neutral colours as their accent.
 
@@ -129,4 +129,17 @@ This has been built with newer devices and CSS rules in mind - a lot of the colo
 Though if you bowser doesn't support custom properties or the `@supports` rule I guess that you are out of luck 😢. Should be good as long as your browser has been updated since 2016.
 
 ## SCSS
-There are SCSS variables and mixins provided which you can use if you want to override or change things up. They are there if you want them, the variables are names the same as the custom properties.
+There are SCSS variables and mixins provided which you can use if you want to override or change things up. They can be imported from the `/styles` directory, the variables are names the same as the custom properties. However I've not documented any of it yet.
+
+## Development
+This project uses Deno for local development.
+```bash
+# Install dependencies
+deno install
+
+# Build the main css file
+deno build
+
+# Pass the watch flag to update on any style updates
+deno build --watch
+```

deno.json

@@ -0,0 +1,13 @@
+{
+	"imports": {
+		"sass": "npm:sass@^1.77.5"
+	},
+	"tasks": {
+		"build": "sass --no-source-map ./index.scss ./index.css"
+	},
+	"fmt": {
+		"useTabs": true,
+		"semiColons": false,
+		"exclude": ["index.css"]
+	}
+}