release: version 2025.1.4

.github/workflows/release.yml

@@ -1,13 +1,13 @@
 name: Release
 
 on:
-  push:
-    tags:
-      - 'v*.*.*'
+  pull_request:
+    types: [closed]
+    branches:
+      - main
 
 permissions:
   contents: write
-  pull-requests: write
 
 jobs:
   release:
@@ -23,60 +23,27 @@ jobs:
           node-version: 20
           cache: yarn
 
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
       - name: Configure Git
         run: |
-          git config --global user.name 'github-actions'
-          git config --global user.email 'github-actions@github.com'
-
-      - name: Fetch all tags
-        run: git fetch --tags
+          git config user.name "github-actions"
+          git config user.email "github-actions@github.com"
 
-      - name: Extract version and previous tag
-        id: extract_info
+      - name: Extract version from package.json
+        id: extract_version
         run: |
-          VERSION=${GITHUB_REF#refs/tags/v}
-          PREVIOUS_TAG=$(git describe --tags $(git rev-list --tags --skip=1 --max-count=1))
+          VERSION=$(jq -r '.version' package.json)
           echo "VERSION=$VERSION" >> $GITHUB_ENV
-          echo "PREVIOUS_TAG=$PREVIOUS_TAG" >> $GITHUB_ENV
+          echo "Extracted version: $VERSION"
 
-      - name: Determine update type
-        id: determine_update_type
+      - name: Create Git tag
         run: |
-          IFS='.' read -r -a NEW_VERSION_PARTS <<< "${VERSION}"
-          IFS='.' read -r -a OLD_VERSION_PARTS <<< "${PREVIOUS_TAG#v}"
+          git tag -a "${{ env.VERSION }}" -m "Release ${{ env.VERSION }}"
+          git push origin "${{ env.VERSION }}"
 
-          if [ "${NEW_VERSION_PARTS[0]}" != "${OLD_VERSION_PARTS[0]}" ]; then
-            UPDATE_TYPE=major
-          elif [ "${NEW_VERSION_PARTS[1]}" != "${OLD_VERSION_PARTS[1]}" ]; then
-            UPDATE_TYPE=minor
-          else
-            UPDATE_TYPE=patch
-          fi
-          echo "UPDATE_TYPE=$UPDATE_TYPE" >> $GITHUB_ENV
-
-      - name: Create and push new branch
-        run: |
-          NEW_BRANCH=release-v${VERSION}
-          git checkout -b ${NEW_BRANCH}
-          git push origin ${NEW_BRANCH}
-          echo "NEW_BRANCH=$NEW_BRANCH" >> $GITHUB_ENV
+      - name: Set up NPM auth
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
 
-      - name: Update version in package.json
-        run: jq --arg new_version "$VERSION" '.version = $new_version' package.json > temp.json && mv temp.json package.json
-
-      - name: Build the package
-        run: yarn build
-
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v6
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          commit-message: "Update version to ${{ env.VERSION }} [${{ env.UPDATE_TYPE }}] and upgrade dependencies"
-          branch: ${{ env.NEW_BRANCH }}
-          base: main
-          title: "Release ${{ env.VERSION }}"
-          body: "This PR updates the version to ${{ env.VERSION }} and upgrades dependencies."
-          labels: release
+      - name: Publish to npm
+        run: yarn publish --non-interactive
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -4,8 +4,7 @@
 ![npm](https://img.shields.io/npm/v/style-forge.themes)
 ![license](https://img.shields.io/npm/l/style-forge.themes)
 ![npm](https://img.shields.io/npm/dm/style-forge.themes)
-[![Codacy Badge](https://app.codacy.com/project/badge/Grade/1d2b8e1397f34fccb75e7dbd4ca34c29)](https://app.codacy.com/gh/Style-Forge/themes/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
-![build](https://github.com/Sarmaged/style-forge.themes/actions/workflows/publish.yml/badge.svg)
+![build](https://github.com/Sarmaged/style-forge.themes/actions/workflows/release.yml/badge.svg)
 
 `Style-Forge.Themes` package is a powerful and flexible tool designed for managing and applying themes to your web applications. It provides a streamlined way to handle theme customization, allowing developers to create, switch, and maintain multiple themes effortlessly.
 

builder.js

@@ -8,7 +8,7 @@ const [from, to] = ['src/all.css', 'themes.css']
 const css = fs.readFileSync(from, 'utf8')
 
 const packageFile = JSON.parse(fs.readFileSync('package.json', 'utf8'))
-const title = packageFile.name + ' v' + packageFile.version
+const title = packageFile.name + ' ' + packageFile.version
 const license = packageFile.license + ' License'
 const link = packageFile.repository.url.replace('git+', '').replace('.git', '')
 const header = '/*! ' + [title, license, link].join(' | ') + ' */'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "style-forge.themes",
-  "version": "1.1.5",
+  "version": "2025.1.4",
   "description": "Style-Forge.Themes: powerful tool for managing and applying customizable themes in web applications.",
   "type": "module",
   "main": "themes.css",

src/all.css

@@ -1 +1,2 @@
 @import 'var.css';
+@import 'compatibility.css';

src/compatibility.css

@@ -0,0 +1,22 @@
+html.var {
+  color: hsl(0, 0%, 10%);
+  background: hsl(0, 0%, 100%);
+}
+html.var a { color: hsl(225, 73%, 57%) }
+html.var pre { background: hsl(0, 0%, 90%) }
+
+html.var[data-theme='dark'], html.var.dark {
+  color: hsl(0, 0%, 90%);
+  background: hsl(0, 0%, 10%);
+}
+html.var[data-theme='dark'] pre, html.var.dark pre { background: hsl(0, 0%, 20%) }
+html.var[data-theme='dark'] ::backdrop, html.var.dark ::backdrop { --sf-c-backdrop: hsla(0, 0%, 100%, 0.2) }
+
+@media (prefers-color-scheme: dark) {
+  html.var[data-theme='auto'], html.var.auto {
+    color: hsl(0, 0%, 90%);
+    background: hsl(0, 0%, 10%);
+  }
+  html.var[data-theme='auto'] pre, html.var.auto pre { background: hsl(0, 0%, 20%) }
+  html.var[data-theme='auto'] ::backdrop, html.var.auto ::backdrop { --sf-c-backdrop: hsla(0, 0%, 100%, 0.2) }
+}

src/var.css

@@ -1,21 +1,12 @@
 :root {
   --sf-c-link: 225 73% 57%;
-  --sf-c-link-active: 288 59% 58%;
-
-  --sf-c-mark-bg: 60 100% 50%;
-  --sf-c-mark-txt: 0 0% 10%;
-
   --sf-c-txt: 0 0% 10%;
   --sf-c-bg: 0 0% 100%;
   --sf-c-bd: 0 0% 75%;
   --sf-c-shape-bg: 0 0% 90%;
 
   /* colors for dark theme */
   --sf-dark-c-link: 225 73% 57%;
-
-  --sf-dark-c-mark-bg: 60 100% 50%;
-  --sf-dark-c-mark-txt: 0 0% 10%;
-
   --sf-dark-c-txt: 0 0% 90%;
   --sf-dark-c-bg: 0 0% 10%;
   --sf-dark-c-bd: 0 0% 50%;
@@ -27,43 +18,37 @@
   --sf-dark-c-backdrop: 0 0% 100%;
 }
 
-[data-theme] {
+html {
   color-scheme: light;
   transition: background-color 0.2s ease-out;
 }
 
-:root:where([data-theme='auto'], .auto) {
+html[data-theme='auto'], html.auto {
   color-scheme: light dark;
 }
 
-:root:where([data-theme='dark'], .dark) {
+html[data-theme='dark'], html.dark {
   color-scheme: dark;
 
   --sf-c-link: var(--sf-dark-c-link);
-  --sf-c-mark-bg: var(--sf-dark-c-mark-bg);
-  --sf-c-mark-txt: var(--sf-dark-c-mark-txt);
-
   --sf-c-bd: var(--sf-dark-c-bd);
   --sf-c-bg: var(--sf-dark-c-bg);
   --sf-c-shape-bg: var(--sf-dark-c-shape-bg);
   --sf-c-txt: var(--sf-dark-c-txt);
 }
 
-:root:where([data-theme='dark'], .dark) ::backdrop { --sf-c-backdrop: var(--sf-dark-c-backdrop) }
+html[data-theme='dark'] ::backdrop, html.dark ::backdrop { --sf-c-backdrop: var(--sf-dark-c-backdrop) }
 
 @media (prefers-color-scheme: dark) {
-  :root:where([data-theme='auto'], .auto) {
+  html[data-theme='auto'], html.auto {
     color-scheme: dark;
 
     --sf-c-link: var(--sf-dark-c-link);
-    --sf-c-mark-bg: var(--sf-dark-c-mark-bg);
-    --sf-c-mark-txt: var(--sf-dark-c-mark-txt);
-
     --sf-c-bd: var(--sf-dark-c-bd);
     --sf-c-bg: var(--sf-dark-c-bg);
     --sf-c-shape-bg: var(--sf-dark-c-shape-bg);
     --sf-c-txt: var(--sf-dark-c-txt);
   }
 
-  :root:where([data-theme='auto'], .auto) ::backdrop { --sf-c-backdrop: var(--sf-dark-c-backdrop) }
+  html[data-theme='auto'] ::backdrop, html.auto ::backdrop { --sf-c-backdrop: var(--sf-dark-c-backdrop) }
 }