From daa03abe6bcbccd69f7d42ffa9ca022c503bd8e5 Mon Sep 17 00:00:00 2001 From: Sarmaged <3858245+Sarmaged@users.noreply.github.com> Date: Fri, 3 Jan 2025 12:01:52 +0300 Subject: [PATCH] feat: full rewrite of the project - Refactor project structure and architecture - Update dependencies - Implement new features and improvements - Clean up legacy code and remove deprecated components --- .browserslistrc | 4 ++ .github/workflows/notify.yml | 25 ++----- .github/workflows/publish.yml | 6 +- .github/workflows/release.yml | 63 ++++-------------- builder.js | 2 +- package.json | 2 +- src/form.css | 121 ++++++++++++++++++++++------------ src/link.css | 5 ++ src/table.css | 34 +++++----- src/tag.css | 74 ++++++++++++++------- src/text.css | 76 ++++++++++++++------- src/var.css | 28 ++++---- yarn.lock | 6 +- 13 files changed, 250 insertions(+), 196 deletions(-) create mode 100644 .browserslistrc diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..51cabfd --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,4 @@ +> 0.1% +last 2 versions +not dead +IE > 5 diff --git a/.github/workflows/notify.yml b/.github/workflows/notify.yml index 19a0acb..8d9124c 100644 --- a/.github/workflows/notify.yml +++ b/.github/workflows/notify.yml @@ -1,34 +1,19 @@ name: Notify on: - pull_request: - types: [closed] + push: + branches: + - main jobs: notify: - if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'release') runs-on: ubuntu-latest steps: - - name: Checkout repository - uses: actions/checkout@v4 - - - name: Determine version update type - id: determine_version - run: | - COMMIT_MESSAGE=$(git log -1 --pretty=format:%B) - if [[ "$COMMIT_MESSAGE" == *"[major]"* ]]; then - echo "update_type=major" >> $GITHUB_ENV - elif [[ "$COMMIT_MESSAGE" == *"[minor]"* ]]; then - echo "update_type=minor" >> $GITHUB_ENV - else - echo "update_type=patch" >> $GITHUB_ENV - fi - - - name: Send notification to style-forge + - name: Send notification run: | curl -X POST \ -H "Accept: application/vnd.github.v3+json" \ -H "Authorization: token ${{ secrets.NOTIFY_GITHUB_TOKEN }}" \ https://api.github.com/repos/Style-Forge/hub/dispatches \ - -d '{"event_type":"update-style-forge", "client_payload": {"update_type": "${{ env.update_type }}", "package_name": "style-forge.base"}}' + -d '{"event_type":"update-style-forge", "client_payload": {"package_name": "style-forge.base"}}' diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 4a26148..abda8c1 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -1,12 +1,12 @@ name: Publish on: - pull_request: - types: [closed] + push: + tags: + - '*.*.*' jobs: publish: - if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'release') runs-on: ubuntu-latest steps: diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 12a5ad4..224c691 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,16 +1,17 @@ name: Release on: - push: - tags: - - 'v*.*.*' + pull_request: + types: [closed] + branches: + - main permissions: contents: write - pull-requests: write jobs: release: + if: github.event.pull_request.merged == true runs-on: ubuntu-latest steps: @@ -26,57 +27,19 @@ jobs: - name: Install dependencies run: yarn install --frozen-lockfile - - name: Configure Git + - name: Extract version from package.json + id: extract_version 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 - - - name: Extract version and previous tag - id: extract_info - 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 - - - name: Determine update type - id: determine_update_type - run: | - IFS='.' read -r -a NEW_VERSION_PARTS <<< "${VERSION}" - IFS='.' read -r -a OLD_VERSION_PARTS <<< "${PREVIOUS_TAG#v}" - - 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 + - name: Create Git tag run: | - NEW_BRANCH=release-v${VERSION} - git checkout -b ${NEW_BRANCH} - git push origin ${NEW_BRANCH} - echo "NEW_BRANCH=$NEW_BRANCH" >> $GITHUB_ENV - - - name: Update version in package.json - run: jq --arg new_version "$VERSION" '.version = $new_version' package.json > temp.json && mv temp.json package.json + git tag -a "$VERSION" -m "Release $VERSION" + git push origin "$VERSION" - 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: Notify release + run: echo "Release ${{ env.VERSION }} has been successfully created." diff --git a/builder.js b/builder.js index 8d40e15..189d43f 100644 --- a/builder.js +++ b/builder.js @@ -9,7 +9,7 @@ const [from, to] = ['src/all.css', 'base.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(' | ') + ' */' diff --git a/package.json b/package.json index 37e2a46..fa674c4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "style-forge.base", - "version": "5.3.6", + "version": "2025.01.03", "description": "Style-Forge.Base: foundational CSS variables, base styles, typography, colors, utilities for consistent design.", "type": "module", "main": "base.css", diff --git a/src/form.css b/src/form.css index 485d8d2..24b8358 100644 --- a/src/form.css +++ b/src/form.css @@ -1,4 +1,3 @@ -::file-selector-button, button, input, optgroup, @@ -12,57 +11,97 @@ textarea line-height: 1; text-transform: none; + vertical-align: top; } -button, -:where(input:not( - [type='checkbox'], - [type='color'], - [type='file'], - [type='hidden'], - [type='image'], - [type='radio'], - [type='range'] -)), -optgroup, -option, select, +button, +input, textarea -{ padding: 0.25em 0.5em } - -::file-selector-button, -:where(button, select), -:where(input):where( - [type='button'], - [type='checkbox'], - [type='color'], - [type='file'], - [type='image'], - [type='radio'], - [type='range'], - [type='reset'], - [type='submit'] -) -{ cursor: pointer } - -:disabled, -:disabled::file-selector-button { - cursor: not-allowed; - -webkit-tap-highlight-color: transparent; + padding: 0 0.75em; + min-height: 32px; } -fieldset { - padding: 1em; - border: 1px solid hsl(var(--sf-fieldset-c-bd)); +select[multiple] option, +select[multiple] optgroup +{ + margin: 0 -0.75em; + padding: 0.4em 0.75em; } +select[multiple] optgroup option { margin: 0 } -legend { - color: inherit; - padding: 0 0.5em; +input[type='checkbox'], +input[type='color'], +input[type='file'], +input[type='hidden'], +input[type='image'], +input[type='radio'], +input[type='range'] +{ + margin: 0; + padding: 0; + min-height: 32px; } -progress { vertical-align: baseline } +input[type='checkbox'], +input[type='radio'], +textarea +{ min-height: auto } + + +button, +select, +input[type='button'], +input[type='reset'], +input[type='submit'], +input[type='checkbox'], +input[type='color'], +input[type='file'], +input[type='image'], +input[type='radio'], +input[type='range'] +{ cursor: pointer } + +button, +input[type='button'], +input[type='reset'], +input[type='submit'], +input[type='checkbox'], +input[type='radio'] +{ vertical-align: baseline } + +input[type='checkbox'] { margin: 0 3px 0 0.5em } +input[type='radio'] { margin: 0 3px 0 0.5em } +fieldset { padding: 1em; border: 0 } +legend { color: inherit; padding: 0 0.5em } textarea { overflow: auto } +::file-selector-button { + cursor: pointer; + font-size: inherit; + font-family: inherit; + font-weight: 400; + line-height: 1; + + padding: 0 0.75em; + min-height: 32px; + + text-transform: none; + vertical-align: baseline; +} + +::file-selector-button:disabled { + cursor: not-allowed; + -webkit-tap-highlight-color: transparent; +} + +:disabled, +input:disabled, +button:disabled, +select:disabled +{ + cursor: not-allowed; + -webkit-tap-highlight-color: transparent; +} diff --git a/src/link.css b/src/link.css index fc0e74c..86d73b3 100644 --- a/src/link.css +++ b/src/link.css @@ -10,3 +10,8 @@ a:not([href]) { opacity: var(--sf-disabled); -webkit-tap-highlight-color: transparent; } + +/* /// */ + +html.var a { color: hsl(225, 73%, 57%) } +html.var a:not([href]) { opacity: 0.4 } diff --git a/src/table.css b/src/table.css index 126b6e1..f00220b 100644 --- a/src/table.css +++ b/src/table.css @@ -1,25 +1,27 @@ table { display: table; border-collapse: collapse; + + font-size: inherit; + line-height: var(--sf-lh-normal); + + border-width: 0 1px 1px 0; + border-spacing: 0; } -tbody, -tfoot, -thead -{ background: none } +table, td, th { border: 1px solid hsl(var(--sf-table-c-bd)) } +tbody, tfoot, thead { background: none } +td, th { padding: 0.5em 0.75em } -td, -th -{ - padding: 0.5em 0.75em; - border: 1px solid hsl(var(--sf-table-c-bd)); -} +td:not([align]), th:not([align]) { text-align: start } +td:not([valign]), th:not([valign]) { vertical-align: top } + +/* /// */ -td:not([align]), -th:not([align]) -{ text-align: start } +html.var table, +html.var td, +html.var th +{ border: 1px solid hsl(0, 0%, 75%) } -td:not([valign]), -th:not([valign]) -{ vertical-align: top } +html.var table { line-height: 1.1875 } diff --git a/src/tag.css b/src/tag.css index 6060e18..26def0c 100644 --- a/src/tag.css +++ b/src/tag.css @@ -1,13 +1,14 @@ *, *::before, *::after -{ box-sizing: inherit } +{ + z-index: 0; + box-sizing: inherit; +} ::backdrop { background: hsl(var(--sf-c-backdrop) / 20%) } html { - display: flex; - font-family: var(--sf-ff); font-size: var(--sf-fz); font-weight: var(--sf-fw); @@ -18,22 +19,20 @@ html { background: hsl(var(--sf-c-bg)); min-width: 320px; - min-height: 100%; + height: 100%; box-sizing: border-box; - font-synthesis: none; - text-size-adjust: none; + font-stretch: normal; + text-size-adjust: 100%; } -html > body { - display: flex; - flex: 1; +body { + min-height: 100%; + margin: 0 auto; } -body, -figure -{ margin: 0 } +figure { margin: 0 } hr { width: 100%; @@ -58,28 +57,57 @@ dd { margin-left: 2em } blockquote { margin: 0 2em } +details[open] > summary:first-of-type { + list-style-type: disclosure-open; +} summary { cursor: pointer; display: list-item; + counter-increment: list-item 0; + list-style: inside disclosure-closed; } -img, -video -{ - height: auto; +video { + width: 100%; + height: 100%; +} + +img { max-width: 100%; + max-height: 100%; + + text-anchor: middle; + object-fit: contain; + + image-rendering: -webkit-optimize-contrast; + image-rendering: crisp-edges; + + user-select: none; } iframe, img { border: 0 } -dialog[open] { z-index: 1000 } +/* /// */ + +html.var { + font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + font-size: 16px; + font-weight: 400; -main, -details -{ display: block } + line-height: 0.8; -template, -[hidden] -{ display: none } + color: hsl(0, 0%, 10%); + background: hsl(0, 0%, 100%); +} +html.var pre { background: hsl(0, 0%, 90%) } +html.var ::backdrop { background: hsla(0, 0%, 10%, 0.2) } + +/* HTML5 */ + +dialog[open] { z-index: 1000 } +article, aside, details, dialog[open], figure, footer, header, hgroup, main, nav, section { display: block } +meter, progress { display: inline-block } +audio, bdi, canvas, data, embed, mark, output, picture, svg, time, video, wbr { display: inline } +[hidden], datalist, dialog, source, template, track { display: none !important } diff --git a/src/text.css b/src/text.css index 72a4aa5..8506149 100644 --- a/src/text.css +++ b/src/text.css @@ -3,25 +3,20 @@ h2, h3, h4, h5, -h6 -{ line-height: normal } - -h1 { font-weight: var(--sf-fw-h1) } -h2 { font-weight: var(--sf-fw-h2) } -h3 { font-weight: var(--sf-fw-h3) } -h4 { font-weight: var(--sf-fw-h4) } -h5 { font-weight: var(--sf-fw-h5) } -h6 { font-weight: var(--sf-fw-h6) } - +h6, +pre, +ruby, address, blockquote, dd, dt, li, -p +p, +figure, +details { font-size: inherit; - line-height: var(--sf-lh-txt); + line-height: var(--sf-lh-normal); } small, @@ -33,27 +28,33 @@ sup } h1 { - font-size: var(--sf-h1); + font-size: var(--sf-fz-h1); + font-weight: var(--sf-fw-h1); margin: 0.8em 0 0.4em; } h2 { - font-size: var(--sf-h2); + font-size: var(--sf-fz-h2); + font-weight: var(--sf-fw-h2); margin: 0.9em 0 0.45em; } h3 { - font-size: var(--sf-h3); + font-size: var(--sf-fz-h3); + font-weight: var(--sf-fw-h3); margin: 1em 0 0.5em; } h4 { - font-size: var(--sf-h4); + font-size: var(--sf-fz-h4); + font-weight: var(--sf-fw-h4); margin: 1.1em 0 0.55em; } h5 { - font-size: var(--sf-h5); + font-size: var(--sf-fz-h5); + font-weight: var(--sf-fw-h5); margin: 1.2em 0 0.6em; } h6 { - font-size: var(--sf-h6); + font-size: var(--sf-fz-h6); + font-weight: var(--sf-fw-h6); margin: 1.3em 0 0.65em; } @@ -70,7 +71,38 @@ b, strong { font-weight: var(--sf-fw-bold) } -mark { - color: hsl(var(--sf-c-mark-txt)); - background: hsl(var(--sf-c-mark-bg)); -} +/* /// */ + +html.var h1, +html.var h2, +html.var h3, +html.var h4, +html.var h5, +html.var h6, +html.var pre, +html.var ruby, +html.var address, +html.var blockquote, +html.var dd, +html.var dt, +html.var li, +html.var p, +html.var figure, +html.var details +{ line-height: 1.1875 } + +html.var small, +html.var sub, +html.var sup +{ font-size: 12px; font-weight: 400 } + +html.var h1 { font-size: 48px; font-weight: 700 } +html.var h2 { font-size: 40px; font-weight: 700 } +html.var h3 { font-size: 32px; font-weight: 700 } +html.var h4 { font-size: 24px; font-weight: 600 } +html.var h5 { font-size: 20px; font-weight: 600 } +html.var h6 { font-size: 16px; font-weight: 600 } + +html.var b, +html.var strong +{ font-weight: 600 } diff --git a/src/var.css b/src/var.css index e95bbb8..87913de 100644 --- a/src/var.css +++ b/src/var.css @@ -2,41 +2,37 @@ --sf-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --sf-lh: 0.8; - --sf-lh-txt: 1.5; + --sf-lh-normal: 1.1875; - --sf-h1: 3rem; - --sf-h2: 2.5rem; - --sf-h3: 2rem; - --sf-h4: 1.5rem; - --sf-h5: 1.25rem; - --sf-h6: 1rem; + --sf-table-gap-x: 0.7em; + --sf-table-gap-y: 0.4em; + --sf-fw: 400; --sf-fw-h1: 700; --sf-fw-h2: 700; --sf-fw-h3: 700; --sf-fw-h4: 600; --sf-fw-h5: 600; --sf-fw-h6: 600; + --sf-fw-bold: 600; + --sf-fw-small: 300; --sf-fz: 1rem; + --sf-fz-h1: 3rem; + --sf-fz-h2: 2.5rem; + --sf-fz-h3: 2rem; + --sf-fz-h4: 1.5rem; + --sf-fz-h5: 1.25rem; + --sf-fz-h6: 1rem; --sf-fz-bold: 1rem; --sf-fz-small: 0.75rem; - --sf-fw: 400; - --sf-fw-bold: 600; - --sf-fw-small: 300; - --sf-disabled: 0.4; --sf-c-link: 225 73% 57%; - - --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-shape-bg: 0 0% 90%; --sf-c-backdrop: 0 0% 10%; --sf-table-c-bd: 0 0% 75%; - --sf-fieldset-c-bd: 0 0% 10%; } diff --git a/yarn.lock b/yarn.lock index 104b92f..b6e4ad5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -25,9 +25,9 @@ browserslist@^4.23.0: update-browserslist-db "^1.0.16" caniuse-lite@^1.0.30001599, caniuse-lite@^1.0.30001629: - version "1.0.30001639" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001639.tgz#972b3a6adeacdd8f46af5fc7f771e9639f6c1521" - integrity sha512-eFHflNTBIlFwP2AIKaYuBQN/apnUoKNhBdza8ZnW/h2di4LCZ4xFqYlxUxo+LQ76KFI1PGcC1QDxMbxTZpSCAg== + version "1.0.30001690" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz" + integrity sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w== cssesc@^3.0.0: version "3.0.0"