diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..9c3c08a5 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,6 @@ +[*.{js,jsx,ts,tsx,vue}] +indent_style = space +indent_size = 2 +trim_trailing_whitespace = true +insert_final_newline = true +end_of_line = lf diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index ab339d86..00000000 --- a/.eslintrc.js +++ /dev/null @@ -1,12 +0,0 @@ -module.exports = { - "env": { - "browser": true, - "es2021": true, - "node": true - }, - "extends": "eslint:recommended", - "parserOptions": { - "ecmaVersion": 12 - }, - "rules": {} -}; \ No newline at end of file diff --git a/.gitattributes b/.gitattributes index fac5bfc8..883d2834 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,6 +1,206 @@ -* text=auto -*.txt text -*.vcproj text eol=crlf -*.sh text eol=lf -*.jpg -text -*.py eol=lf \ No newline at end of file +## GITATTRIBUTES FOR WEB PROJECTS +# +# These settings are for any web project. +# +# Details per file setting: +# text These files should be normalized (i.e. convert CRLF to LF). +# binary These files are binary and should be left untouched. +# +# Note that binary is a macro for -text -diff. +###################################################################### + +# Auto detect +## Handle line endings automatically for files detected as +## text and leave all files detected as binary untouched. +## This will handle all files NOT defined below. +* text=auto + +# Source code +*.bash text eol=lf +*.bat text eol=crlf +*.cmd text eol=crlf +*.coffee text +*.css text diff=css +*.htm text diff=html +*.html text diff=html +*.inc text +*.ini text +*.js text +*.json text +*.jsx text +*.less text +*.ls text +*.map text -diff +*.od text +*.onlydata text +*.php text diff=php +*.pl text +*.ps1 text eol=crlf +*.py text diff=python +*.rb text diff=ruby +*.sass text +*.scm text +*.scss text diff=css +*.sh text eol=lf +*.sql text +*.styl text +*.tag text +*.ts text +*.tsx text +*.xml text +*.xhtml text diff=html + +# Docker +Dockerfile text + +# Documentation +*.ipynb text +*.markdown text diff=markdown +*.md text diff=markdown +*.mdwn text diff=markdown +*.mdown text diff=markdown +*.mkd text diff=markdown +*.mkdn text diff=markdown +*.mdtxt text +*.mdtext text +*.txt text +AUTHORS text +CHANGELOG text +CHANGES text +CONTRIBUTING text +COPYING text +copyright text +*COPYRIGHT* text +INSTALL text +license text +LICENSE text +NEWS text +readme text +*README* text +TODO text + +# Templates +*.dot text +*.ejs text +*.erb text +*.haml text +*.handlebars text +*.hbs text +*.hbt text +*.jade text +*.latte text +*.mustache text +*.njk text +*.phtml text +*.svelte text +*.tmpl text +*.tpl text +*.twig text +*.vue text + +# Configs +*.cnf text +*.conf text +*.config text +.editorconfig text +.env text +.gitattributes text +.gitconfig text +.htaccess text +*.lock text -diff +package.json text eol=lf +package-lock.json text -diff +pnpm-lock.yaml text eol=lf -diff +.prettierrc text +yarn.lock text -diff +*.toml text +*.yaml text +*.yml text +browserslist text +Makefile text +makefile text + +# Heroku +Procfile text + +# Graphics +*.ai binary +*.bmp binary +*.eps binary +*.gif binary +*.gifv binary +*.ico binary +*.jng binary +*.jp2 binary +*.jpg binary +*.jpeg binary +*.jpx binary +*.jxr binary +*.pdf binary +*.png binary +*.psb binary +*.psd binary +# SVG treated as an asset (binary) by default. +*.svg text +# If you want to treat it as binary, +# use the following line instead. +# *.svg binary +*.svgz binary +*.tif binary +*.tiff binary +*.wbmp binary +*.webp binary + +# Audio +*.kar binary +*.m4a binary +*.mid binary +*.midi binary +*.mp3 binary +*.ogg binary +*.ra binary + +# Video +*.3gpp binary +*.3gp binary +*.as binary +*.asf binary +*.asx binary +*.avi binary +*.fla binary +*.flv binary +*.m4v binary +*.mng binary +*.mov binary +*.mp4 binary +*.mpeg binary +*.mpg binary +*.ogv binary +*.swc binary +*.swf binary +*.webm binary + +# Archives +*.7z binary +*.gz binary +*.jar binary +*.rar binary +*.tar binary +*.zip binary + +# Fonts +*.ttf binary +*.eot binary +*.otf binary +*.woff binary +*.woff2 binary + +# Executables +*.exe binary +*.pyc binary + +# RC files (like .babelrc or .eslintrc) +*.*rc text + +# Ignore files (like .npmignore or .gitignore) +*.*ignore text \ No newline at end of file diff --git a/.github/workflows/blog-deployer.yml b/.github/workflows/blog-deployer.yml index 8c3ebf2e..ba9894e7 100644 --- a/.github/workflows/blog-deployer.yml +++ b/.github/workflows/blog-deployer.yml @@ -11,11 +11,10 @@ jobs: build: runs-on: ubuntu-latest steps: - - - name: Set Beijing Timezone - uses: szenius/set-timezone@v1.0 - with: - timezoneLinux: Asia/Shanghai + # - name: Set Beijing Timezone + # uses: szenius/set-timezone@v1.0 + # with: + # timezoneLinux: Asia/Shanghai # - name: Get submoudle private repo # uses: actions/checkout@v2 # with: @@ -24,28 +23,33 @@ jobs: # token: ${{ secrets.PERSONAL_TOKEN }} # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - name: Checkout Self Repo # with cd command - uses: actions/checkout@v2 + uses: actions/checkout@v3 with: submodules: 'true' token: ${{ secrets.PERSONAL_TOKEN }} - name: Setup Node.js environment - uses: actions/setup-node@v2 + uses: actions/setup-node@v3 with: - node-version: 14.x - cache: yarn - cache-dependency-path: packages/@som/blog/yarn.lock + node-version: '16.x' + cache: 'yarn' + cache-dependency-path: 'packages/@som/blog/yarn.lock' + # registry-url: 'https://registry.npmjs.org' - - name: Install Dependencies - run: yarn install:blog + - name: Install Dependencies + working-directory: packages/@som/blog + run: yarn - name: Sync Articles - run: yarn sync:article + working-directory: packages/@som/blog + run: yarn sync - name: Deploy Blog Site shell: bash + working-directory: packages/@som/blog env: TENCENT_SECRET_ID: ${{ secrets.TENCENT_SECRET_ID }} TENCENT_SECRET_KEY: ${{ secrets.TENCENT_SECRET_KEY }} - TENCENT_CLOUDBASE_ENVID: ${{ secrets.TENCENT_CLOUDBASE_ENVID }} - BASE_URL: ${{ secrets.BASE_URL }} - SERVERLESS_PLATFORM_VENDOR: tencent - run: yarn deploy:blog - + TENCENT_COS_REGION: ${{ secrets.TENCENT_COS_REGION }} + TENCENT_COS_BUCKET: ${{ secrets.TENCENT_COS_BUCKET }} + # TENCENT_CLOUDBASE_ENVID: ${{ secrets.TENCENT_CLOUDBASE_ENVID }} + # BASE_URL: ${{ secrets.BASE_URL }} + # SERVERLESS_PLATFORM_VENDOR: tencent + run: yarn deploy:cos diff --git a/.gitignore b/.gitignore index ada67eff..10759508 100644 --- a/.gitignore +++ b/.gitignore @@ -104,7 +104,7 @@ dist # TernJS port file .tern-port - +.turbo serverless.yml @@ -120,4 +120,4 @@ wwwHandler node_modules.zip -.DS_Store \ No newline at end of file +.DS_Store diff --git a/packages/@som/blog/client/api/common.js b/.npmrc similarity index 100% rename from packages/@som/blog/client/api/common.js rename to .npmrc diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index d82cf941..00000000 --- a/.prettierrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "semi": false, - "singleQuote": true, - "endOfLine": "lf", - "tabWidth": 2, - "jsxBracketSameLine": true -} diff --git a/README.md b/README.md index f57bcda2..87bd4a59 100644 --- a/README.md +++ b/README.md @@ -1,102 +1,10 @@ -# sonofmagic.github.io - +# icebreaker.top > icebreaker 的 Serverless Blog 搭建过程 ## 简介 本栈用 nuxt + serverless 和配套的服务 ，低成本的搭建一套包含seo，page cache，markdown自动生成功能，同时也会写一些搭建心得，主要包含vue,nuxt,nodejs,小程序相关的一些心得和体会 -## 项目目录 - -现在采用lerna分包的机制，先本地包，然后私有包，接着npm - -**packages**里面是所有的包 - -- `packages/@som` : 项目 - - `blog` : website `icebreaker.top` source code - - `.env` : 运行时环境变量,内容可参考同目录下 `.env.example` - - `scripts` : 包含部署serverless和cdn等脚本 - - `scripts/customDomains.js` : api网关解析的自定义域名 `customDomains.example.js` - - `client` : nuxt 项目源码 - - `server` : esm sls require entry - - `dist` : `server` rollup 打包后的 cjs包,用于 sls.js require 和 debug - - `content`: 用于显示的文章, 建议放入Github私有仓库，建立软连接运行，小心爬虫，隔墙有耳！ - -## 怎么跑 - -```sh - -npm i -# or -yarn -# then -lerna bootstrap -# then -lerna run dev -# or -cd packages/@som/blog && yarn dev - -``` - -部署要先global安装serverless - -```sh - -npm i -g serverless -# or -yarn global add serverless - -``` - -## Serverless Framework - -用的是腾讯云的哟 -文档最新最详细的都在 - - - -部署注册个腾讯云账号，加加配置进来当环境变量就行 - -整套站一个月成本很低 - -**Cloudbase** 免费额度 - -- 云储存 5G -- 云数据库 2G -- 云函数 4万GBs -- 静态网站托管 1G | cdn 5G/一个月 - -**Serverless** 免费额度 - -- 资源使用量 40万GBs -- 调用次数 100万次 - -**内容分发网络cdn** 免费额度 - -- 10G/一个月 - -**对象存储COS** - -- 我的免费额度过期了，每个月要从这里面扣几分钱 - -**文件存储CFS** - -CFS我理解成一块随时挂载的硬盘 - -在Serverless场景下，由于无状态，写内存没啥用， - -`/tmp` 文件夹下的临时文件也不确定 - -需要 `redis` 这种来保持状态 - -买 `redis` 太贵，自己有云服务器，可以去 `docker hub` 上拉 `redis` 镜像部署 - -本人直接云函数挂载 CFS ,实现一套文件缓存 - -## 关于作者 - -某二线城市，忙忙碌碌无为的创业青年 - ### 欢迎各方的技术人一同交流 - Email: 1324318532@qq.com diff --git a/article b/article index 3fd16dde..1788880e 160000 --- a/article +++ b/article @@ -1 +1 @@ -Subproject commit 3fd16ddee0ab18489474201953e73c6f36015192 +Subproject commit 1788880e147134f31ac47039ce5a25aa408da5e3 diff --git a/lerna.json b/lerna.json deleted file mode 100644 index e4d73576..00000000 --- a/lerna.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "packages": [ - "packages/*", - "packages/@nuxtjs/*", - "packages/@som/*" - ], - "useWorkspaces": false, - "version": "independent", - "npmClient": "yarn", - "command": {}, - "changelog": { - "labels": { - "feat": ":rocket: New Feature", - "fix": ":bug: Bug Fix" - }, - "cacheDir": ".changelog" - } -} \ No newline at end of file diff --git a/package.json b/package.json index 49e3e91b..c9fbd661 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,14 @@ "description": "a serverless nuxt website", "author": "icebreaker99 ", "homepage": "http://www.icebreaker.top/", + "_workspaces": { + "nohoist": [], + "packages": [ + "packages/*", + "apps/*", + "!**/@som/**" + ] + }, "directories": { "packages": "packages" }, @@ -20,22 +28,14 @@ "url": "https://github.com/sonofmagic/sonofmagic.github.io/issues" }, "scripts": { - "dev": "lerna run dev --scope @som/blog", - "gen": "lerna run gen", - "deploy": "lerna run deploy", + "dev": "turbo run dev", "install:blog": "cd packages/@som/blog && yarn", - "deploy:blog":"cd packages/@som/blog && npm run deploy", - "sync:article":"cd packages/@som/blog && npm run sync", - "genChangelog": "node scripts/genChangelog.js" + "deploy:blog": "cd packages/@som/blog && npm run deploy:cos", + "sync:article": "cd packages/@som/blog && npm run sync" }, "devDependencies": { "cross-env": "^7.0.3", - "dotenv": "^8.2.0", - "execa": "^5.0.0", - "lerna": "^3.22.1", - "lerna-changelog": "^1.0.1", - "prettier": "^2.2.1", - "simple-git": "^2.31.0", - "yargs": "^16.2.0" + "dotenv": "^16.0.1", + "execa": "^5.0.0" } -} +} \ No newline at end of file diff --git a/packages/@som/blog/.eslintrc.js b/packages/@som/blog/.eslintrc.js index 3b0c6af0..f9affdd3 100644 --- a/packages/@som/blog/.eslintrc.js +++ b/packages/@som/blog/.eslintrc.js @@ -5,7 +5,8 @@ module.exports = { node: true, }, parserOptions: { - parser: 'babel-eslint', + parser: '@babel/eslint-parser', + requireConfigFile: false, }, extends: [ '@nuxtjs', diff --git a/packages/@som/blog/.gitignore b/packages/@som/blog/.gitignore index f8a453a7..b3932093 100644 --- a/packages/@som/blog/.gitignore +++ b/packages/@som/blog/.gitignore @@ -8,3 +8,4 @@ content publicPath.js docs sw.* +node_modules diff --git a/packages/@som/blog/.npmrc b/packages/@som/blog/.npmrc index 8c22c6c7..3ac86683 100644 --- a/packages/@som/blog/.npmrc +++ b/packages/@som/blog/.npmrc @@ -1,3 +1,3 @@ -registry=http://registry.npm.taobao.org/ +registry=https://registry.npmmirror.com/ msvs_version=2019 python=python3.10 diff --git a/packages/@som/blog/.tw-patch/tw-class-list.json b/packages/@som/blog/.tw-patch/tw-class-list.json new file mode 100644 index 00000000..55cc6202 --- /dev/null +++ b/packages/@som/blog/.tw-patch/tw-class-list.json @@ -0,0 +1,129 @@ +[ + "-inline", + "-m-[20px]", + "-mt-2", + "-space-x-reverse", + "-space-y-reverse", + "2xl:text-base", + "[mask-type:luminance]", + "absolute", + "aspect-[4/3]", + "before:content-['我爱中国\\_icebreaker']", + "bg-[#098765]", + "bg-[#123456]", + "bg-[#4268EA]", + "bg-[#654321]", + "bg-[#fafa00]", + "bg-[url('/img/hero-pattern.svg')]", + "bg-canvas-default-transparent/70", + "bg-opacity-[0.54]", + "block", + "border", + "border-[#098765]", + "border-[10px]", + "border-opacity-[0.44]", + "border-solid", + "border-white", + "bottom-4", + "box-border", + "box-content", + "container", + "contents", + "dark:prose-invert", + "dark:text-gray-200", + "dark:text-gray-600", + "dark:text-white", + "disabled:opacity-50", + "divide-[#010101]", + "divide-solid", + "divide-x-[10px]", + "filter", + "fixed", + "flex", + "font-bold", + "font-mono", + "grayscale", + "grid", + "grid-cols-3", + "h-1", + "h-1.5", + "h-10", + "h-4", + "h-[100px]", + "h-full", + "hidden", + "hover:[mask-type:alpha]", + "hover:text-xs", + "inline", + "items-center", + "items-start", + "justify-between", + "justify-center", + "leading-[0.9]", + "left-4", + "lg:[&:nth-child(3)]:hover:underline", + "lg:flex", + "m-2", + "m-4", + "max-h-[100px]", + "max-w-5xl", + "max-w-[300rpx]", + "mb-[-20px]", + "md:text-[20px]", + "min-h-[100px]", + "min-w-[300rpx]", + "mx-auto", + "p-4", + "p-[20px]", + "pointer-events-none", + "print:block", + "print:hidden", + "prose", + "prose-invert", + "px-4", + "relative", + "right-4", + "ring", + "rounded", + "rounded-[40px]", + "shadow", + "sm:flex", + "sm:hover:active:disabled:opacity-75", + "sm:top-[50px]", + "space-y-[1.6rem]", + "static", + "table", + "text-3xl", + "text-[#123]", + "text-[#654321]", + "text-[#dddddd]", + "text-[#ff00ff]", + "text-[#ffffff]", + "text-[20px]", + "text-[50px]", + "text-[blue]", + "text-[color:var(--my-var)]", + "text-[green]", + "text-base", + "text-black", + "text-gray-200", + "text-gray-800", + "text-opacity-[0.19]", + "text-sm", + "text-white", + "text-xs", + "top-4", + "transform", + "underline", + "visible", + "w-1", + "w-1.5", + "w-1/4", + "w-10", + "w-[100px]", + "w-[300rpx]", + "w-[996rpx]", + "w-full", + "z-10", + "z-50" +] \ No newline at end of file diff --git a/packages/@som/blog/client/api/article.js b/packages/@som/blog/client/api/article.js index 55cb401b..1c53a564 100644 --- a/packages/@som/blog/client/api/article.js +++ b/packages/@som/blog/client/api/article.js @@ -7,7 +7,16 @@ export async function contentSearch(content, query) { .skip((query.page - 1) * query.perPage) .limit(query.perPage) .sortBy('date', 'desc') - .only(['path', 'title', 'description', 'date']) + .only([ + 'path', + 'title', + 'description', + 'date', + 'tags', + 'readingMinutes', + 'readingWords', + 'id', + ]) .fetch() } @@ -33,15 +42,11 @@ export async function getPageList(content, query) { * @param {String} id */ export function incReadCountById(id) { - return request.get('/api/v1/article/readcount/inc', { - params: { - id, - }, - }) + return request.post('/blog/article/readcount/date-id-inc/' + id) } -export function getBlogLoginQrcode(scene = '') { - return request.post('/api/v1/qrcode/blog-mp', { - scene, - }) -} +// export function getBlogLoginQrcode(scene = '') { +// return request.post('/api/v1/qrcode/blog-mp', { +// scene, +// }) +// } diff --git a/packages/@som/blog/client/api/test.js b/packages/@som/blog/client/api/test.js deleted file mode 100644 index 7d793ce1..00000000 --- a/packages/@som/blog/client/api/test.js +++ /dev/null @@ -1,9 +0,0 @@ -import request from './utils/request.js' -export function authTest() { - return request.get('/', { - params: { - a: 1, - b: '123', - }, - }) -} diff --git a/packages/@som/blog/client/api/utils/request.js b/packages/@som/blog/client/api/utils/request.js index d22af525..c66cfc6e 100644 --- a/packages/@som/blog/client/api/utils/request.js +++ b/packages/@som/blog/client/api/utils/request.js @@ -49,5 +49,6 @@ export function createAxiosInstance(baseURL) { return request } -const url = isProd ? process.env.BASE_URL : 'http://127.0.0.1:9000' +const url = isProd ? 'https://api.icebreaker.top/' : process.env.BASE_URL // 'http://127.0.0.1:9000' + export default createAxiosInstance(url) diff --git a/packages/@som/blog/client/assets/css/tailwind.scss b/packages/@som/blog/client/assets/css/tailwind.scss deleted file mode 100644 index da6f0b17..00000000 --- a/packages/@som/blog/client/assets/css/tailwind.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import 'tailwindcss/base'; -@import 'tailwindcss/components'; -@import 'tailwindcss/utilities'; - -button:focus { - outline: none; -} - diff --git a/packages/@som/blog/client/assets/font/index.scss b/packages/@som/blog/client/assets/font/index.scss new file mode 100644 index 00000000..a689612b --- /dev/null +++ b/packages/@som/blog/client/assets/font/index.scss @@ -0,0 +1 @@ +// @import './segoeuisb/segoeuisb.scss'; diff --git a/packages/@som/blog/client/assets/icon/lib/fas.js b/packages/@som/blog/client/assets/icon/lib/fas.js index 52d7a6db..d033d8c1 100644 --- a/packages/@som/blog/client/assets/icon/lib/fas.js +++ b/packages/@som/blog/client/assets/icon/lib/fas.js @@ -21,6 +21,9 @@ import { faMapMarkerAlt, faTimesCircle, faChevronRight, + faSun, + faMoon, + faRssSquare, } from '@fortawesome/free-solid-svg-icons' library.add( @@ -43,6 +46,9 @@ library.add( faEnvelope, faMapMarkerAlt, faTimesCircle, - faChevronRight + faChevronRight, + faSun, + faMoon, + faRssSquare ) export default true diff --git a/packages/@som/blog/client/assets/img/beian.png b/packages/@som/blog/client/assets/img/beian.png new file mode 100644 index 00000000..2a13ba2f Binary files /dev/null and b/packages/@som/blog/client/assets/img/beian.png differ diff --git a/packages/@som/blog/client/assets/img/mini/b0.jpg b/packages/@som/blog/client/assets/img/mini/b0.jpg new file mode 100644 index 00000000..ca16cc69 Binary files /dev/null and b/packages/@som/blog/client/assets/img/mini/b0.jpg differ diff --git a/packages/@som/blog/client/assets/img/mini/b1.jpg b/packages/@som/blog/client/assets/img/mini/b1.jpg new file mode 100644 index 00000000..e4d6c16e Binary files /dev/null and b/packages/@som/blog/client/assets/img/mini/b1.jpg differ diff --git a/packages/@som/blog/client/assets/img/mini/b2.jpg b/packages/@som/blog/client/assets/img/mini/b2.jpg new file mode 100644 index 00000000..c6dd691e Binary files /dev/null and b/packages/@som/blog/client/assets/img/mini/b2.jpg differ diff --git a/packages/@som/blog/client/assets/img/mini/b3.jpg b/packages/@som/blog/client/assets/img/mini/b3.jpg new file mode 100644 index 00000000..17393c09 Binary files /dev/null and b/packages/@som/blog/client/assets/img/mini/b3.jpg differ diff --git a/packages/@som/blog/client/assets/img/mini/b4.jpg b/packages/@som/blog/client/assets/img/mini/b4.jpg new file mode 100644 index 00000000..990323c9 Binary files /dev/null and b/packages/@som/blog/client/assets/img/mini/b4.jpg differ diff --git a/packages/@som/blog/client/assets/img/mini/icestack.jpg b/packages/@som/blog/client/assets/img/mini/icestack.jpg new file mode 100644 index 00000000..b3874ca9 Binary files /dev/null and b/packages/@som/blog/client/assets/img/mini/icestack.jpg differ diff --git a/packages/@som/blog/client/assets/img/mini/tailwindcss.jpg b/packages/@som/blog/client/assets/img/mini/tailwindcss.jpg new file mode 100644 index 00000000..90e87a60 Binary files /dev/null and b/packages/@som/blog/client/assets/img/mini/tailwindcss.jpg differ diff --git a/packages/@som/blog/client/assets/img/wechat.jpg b/packages/@som/blog/client/assets/img/wechat.jpg new file mode 100644 index 00000000..03eaaf09 Binary files /dev/null and b/packages/@som/blog/client/assets/img/wechat.jpg differ diff --git a/packages/@som/blog/client/assets/scss/constants.scss b/packages/@som/blog/client/assets/scss/constants.scss new file mode 100644 index 00000000..18972da8 --- /dev/null +++ b/packages/@som/blog/client/assets/scss/constants.scss @@ -0,0 +1,432 @@ +$root-vars: ( + --color-canvas-default-transparent: rgba(34, 39, 46, 0), + --color-marketing-icon-primary: #6cb6ff, + --color-marketing-icon-secondary: #316dca, + --color-diff-blob-addition-num-text: #adbac7, + --color-diff-blob-addition-fg: #adbac7, + --color-diff-blob-addition-num-bg: rgba(87, 171, 90, 0.3), + --color-diff-blob-addition-line-bg: rgba(70, 149, 74, 0.15), + --color-diff-blob-addition-word-bg: rgba(70, 149, 74, 0.4), + --color-diff-blob-deletion-num-text: #adbac7, + --color-diff-blob-deletion-fg: #adbac7, + --color-diff-blob-deletion-num-bg: rgba(229, 83, 75, 0.3), + --color-diff-blob-deletion-line-bg: rgba(229, 83, 75, 0.15), + --color-diff-blob-deletion-word-bg: rgba(229, 83, 75, 0.4), + --color-diff-blob-hunk-num-bg: rgba(65, 132, 228, 0.4), + --color-diff-blob-expander-icon: #768390, + --color-diff-blob-selected-line-highlight-mix-blend-mode: screen, + --color-diffstat-deletion-border: rgba(205, 217, 229, 0.1), + --color-diffstat-addition-border: rgba(205, 217, 229, 0.1), + --color-diffstat-addition-bg: #57ab5a, + --color-search-keyword-hl: rgba(198, 144, 38, 0.4), + --color-prettylights-syntax-comment: #768390, + --color-prettylights-syntax-constant: #6cb6ff, + --color-prettylights-syntax-entity: #dcbdfb, + --color-prettylights-syntax-storage-modifier-import: #adbac7, + --color-prettylights-syntax-entity-tag: #8ddb8c, + --color-prettylights-syntax-keyword: #f47067, + --color-prettylights-syntax-string: #96d0ff, + --color-prettylights-syntax-variable: #f69d50, + --color-prettylights-syntax-brackethighlighter-unmatched: #e5534b, + --color-prettylights-syntax-invalid-illegal-text: #cdd9e5, + --color-prettylights-syntax-invalid-illegal-bg: #922323, + --color-prettylights-syntax-carriage-return-text: #cdd9e5, + --color-prettylights-syntax-carriage-return-bg: #ad2e2c, + --color-prettylights-syntax-string-regexp: #8ddb8c, + --color-prettylights-syntax-markup-list: #eac55f, + --color-prettylights-syntax-markup-heading: #316dca, + --color-prettylights-syntax-markup-italic: #adbac7, + --color-prettylights-syntax-markup-bold: #adbac7, + --color-prettylights-syntax-markup-deleted-text: #ffd8d3, + --color-prettylights-syntax-markup-deleted-bg: #78191b, + --color-prettylights-syntax-markup-inserted-text: #b4f1b4, + --color-prettylights-syntax-markup-inserted-bg: #1b4721, + --color-prettylights-syntax-markup-changed-text: #ffddb0, + --color-prettylights-syntax-markup-changed-bg: #682d0f, + --color-prettylights-syntax-markup-ignored-text: #adbac7, + --color-prettylights-syntax-markup-ignored-bg: #255ab2, + --color-prettylights-syntax-meta-diff-range: #dcbdfb, + --color-prettylights-syntax-brackethighlighter-angle: #768390, + --color-prettylights-syntax-sublimelinter-gutter-mark: #545d68, + --color-prettylights-syntax-constant-other-reference-link: #96d0ff, + --color-codemirror-text: #adbac7, + --color-codemirror-bg: #22272e, + --color-codemirror-gutters-bg: #22272e, + --color-codemirror-guttermarker-text: #22272e, + --color-codemirror-guttermarker-subtle-text: #545d68, + --color-codemirror-linenumber-text: #768390, + --color-codemirror-cursor: #adbac7, + --color-codemirror-selection-bg: rgba(65, 132, 228, 0.4), + --color-codemirror-activeline-bg: rgba(99, 110, 123, 0.1), + --color-codemirror-matchingbracket-text: #adbac7, + --color-codemirror-lines-bg: #22272e, + --color-codemirror-syntax-comment: #768390, + --color-codemirror-syntax-constant: #6cb6ff, + --color-codemirror-syntax-entity: #dcbdfb, + --color-codemirror-syntax-keyword: #f47067, + --color-codemirror-syntax-storage: #f47067, + --color-codemirror-syntax-string: #96d0ff, + --color-codemirror-syntax-support: #6cb6ff, + --color-codemirror-syntax-variable: #f69d50, + --color-checks-bg: #1c2128, + --color-checks-run-border-width: 1px, + --color-checks-container-border-width: 1px, + --color-checks-text-primary: #adbac7, + --color-checks-text-secondary: #768390, + --color-checks-text-link: #539bf5, + --color-checks-btn-icon: #768390, + --color-checks-btn-hover-icon: #adbac7, + --color-checks-btn-hover-bg: rgba(99, 110, 123, 0.1), + --color-checks-input-text: #768390, + --color-checks-input-placeholder-text: #545d68, + --color-checks-input-focus-text: #adbac7, + --color-checks-input-bg: #2d333b, + // --color-checks-input-shadow: 0 0 0 1px + // ( + // obj, + // ) + // => get_1.default(obj, path), + --color-checks-donut-error: #e5534b, + --color-checks-donut-pending: #c69026, + --color-checks-donut-success: #46954a, + --color-checks-donut-neutral: #768390, + --color-checks-dropdown-text: #adbac7, + --color-checks-dropdown-bg: #2d333b, + --color-checks-dropdown-border: #444c56, + --color-checks-dropdown-shadow: rgba(28, 33, 40, 0.3), + --color-checks-dropdown-hover-text: #adbac7, + --color-checks-dropdown-hover-bg: rgba(99, 110, 123, 0.1), + --color-checks-dropdown-btn-hover-text: #adbac7, + --color-checks-dropdown-btn-hover-bg: rgba(99, 110, 123, 0.1), + --color-checks-scrollbar-thumb-bg: rgba(99, 110, 123, 0.4), + --color-checks-header-label-text: #768390, + --color-checks-header-label-open-text: #adbac7, + --color-checks-header-border: #373e47, + --color-checks-header-icon: #768390, + --color-checks-line-text: #768390, + --color-checks-line-num-text: #545d68, + --color-checks-line-timestamp-text: #545d68, + --color-checks-line-hover-bg: rgba(99, 110, 123, 0.1), + --color-checks-line-selected-bg: rgba(65, 132, 228, 0.15), + --color-checks-line-selected-num-text: #539bf5, + --color-checks-line-dt-fm-text: #cdd9e5, + --color-checks-line-dt-fm-bg: #966600, + --color-checks-gate-bg: rgba(174, 124, 20, 0.15), + --color-checks-gate-text: #768390, + --color-checks-gate-waiting-text: #c69026, + --color-checks-step-header-open-bg: #2d333b, + --color-checks-step-error-text: #e5534b, + --color-checks-step-warning-text: #c69026, + --color-checks-logline-text: #768390, + --color-checks-logline-num-text: #545d68, + --color-checks-logline-debug-text: #986ee2, + --color-checks-logline-error-text: #768390, + --color-checks-logline-error-num-text: #545d68, + --color-checks-logline-error-bg: rgba(229, 83, 75, 0.15), + --color-checks-logline-warning-text: #768390, + --color-checks-logline-warning-num-text: #c69026, + --color-checks-logline-warning-bg: rgba(174, 124, 20, 0.15), + --color-checks-logline-command-text: #539bf5, + --color-checks-logline-section-text: #57ab5a, + --color-checks-ansi-black: #22272e, + --color-checks-ansi-black-bright: #2d333b, + --color-checks-ansi-white: #909dab, + --color-checks-ansi-white-bright: #909dab, + --color-checks-ansi-gray: #636e7b, + --color-checks-ansi-red: #f47067, + --color-checks-ansi-red-bright: #ff938a, + --color-checks-ansi-green: #57ab5a, + --color-checks-ansi-green-bright: #6bc46d, + --color-checks-ansi-yellow: #c69026, + --color-checks-ansi-yellow-bright: #daaa3f, + --color-checks-ansi-blue: #539bf5, + --color-checks-ansi-blue-bright: #6cb6ff, + --color-checks-ansi-magenta: #b083f0, + --color-checks-ansi-magenta-bright: #dcbdfb, + --color-checks-ansi-cyan: #76e3ea, + --color-checks-ansi-cyan-bright: #b3f0ff, + --color-project-header-bg: #22272e, + --color-project-sidebar-bg: #2d333b, + --color-project-gradient-in: #2d333b, + --color-project-gradient-out: rgba(45, 51, 59, 0), + --color-mktg-btn-bg: #f6f8fa, + --color-mktg-btn-shadow-outline: rgb(255 255 255 / 25%) 0 0 0 1px inset, + --color-mktg-btn-shadow-focus: rgb(255 255 255 / 25%) 0 0 0 4px, + --color-mktg-btn-shadow-hover: ( + 0 4px 7px rgba(0, 0, 0, 0.15), + 0 100px 80px rgba(255, 255, 255, 0.02), + 0 42px 33px rgba(255, 255, 255, 0.024), + 0 22px 18px rgba(255, 255, 255, 0.028), + 0 12px 10px rgba(255, 255, 255, 0.034), + 0 7px 5px rgba(255, 255, 255, 0.04), + 0 3px 2px rgba(255, 255, 255, 0.07), + ), + --color-mktg-btn-shadow-hover-muted: rgb(255 255 255) 0 0 0 2px inset, + --color-avatar-bg: rgba(205, 217, 229, 0.1), + --color-avatar-border: rgba(205, 217, 229, 0.1), + --color-avatar-stack-fade: #444c56, + --color-avatar-stack-fade-more: #373e47, + --color-avatar-child-shadow: -2px -2px 0 #22272e, + --color-topic-tag-border: rgba(0, 0, 0, 0), + --color-counter-border: rgba(0, 0, 0, 0), + --color-select-menu-backdrop-border: #545d68, + --color-select-menu-tap-highlight: rgba(68, 76, 86, 0.5), + --color-select-menu-tap-focus-bg: #143d79, + --color-overlay-shadow: ( + 0 0 0 1px #444c56, + 0 16px 32px rgba(28, 33, 40, 0.85), + ), + --color-header-text: rgba(205, 217, 229, 0.7), + --color-header-bg: #2d333b, + --color-header-divider: #768390, + --color-header-logo: #cdd9e5, + --color-header-search-bg: #22272e, + --color-header-search-border: #444c56, + --color-sidenav-selected-bg: #373e47, + --color-menu-bg-active: #2d333b, + --color-input-disabled-bg: rgba(99, 110, 123, 0), + --color-timeline-badge-bg: #373e47, + --color-ansi-black: #545d68, + --color-ansi-black-bright: #636e7b, + --color-ansi-white: #909dab, + --color-ansi-white-bright: #cdd9e5, + --color-ansi-gray: #636e7b, + --color-ansi-red: #f47067, + --color-ansi-red-bright: #ff938a, + --color-ansi-green: #57ab5a, + --color-ansi-green-bright: #6bc46d, + --color-ansi-yellow: #c69026, + --color-ansi-yellow-bright: #daaa3f, + --color-ansi-blue: #539bf5, + --color-ansi-blue-bright: #6cb6ff, + --color-ansi-magenta: #b083f0, + --color-ansi-magenta-bright: #dcbdfb, + --color-ansi-cyan: #39c5cf, + --color-ansi-cyan-bright: #56d4dd, + --color-btn-text: #adbac7, + --color-btn-bg: #373e47, + --color-btn-border: rgba(205, 217, 229, 0.1), + --color-btn-shadow: 0 0 transparent, + --color-btn-inset-shadow: 0 0 transparent, + --color-btn-hover-bg: #444c56, + --color-btn-hover-border: #768390, + --color-btn-active-bg: hsla(213, 12%, 27%, 1), + --color-btn-active-border: #636e7b, + --color-btn-selected-bg: #2d333b, + --color-btn-focus-bg: #373e47, + --color-btn-focus-border: #768390, + --color-btn-focus-shadow: 0 0 0 3px rgba(118, 131, 144, 0.3), + --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(28, 33, 40, 0.15), + --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(49, 109, 202, 0.3), + --color-btn-counter-bg: #444c56, + --color-btn-primary-text: #ffffff, + --color-btn-primary-bg: #347d39, + --color-btn-primary-border: rgba(205, 217, 229, 0.1), + --color-btn-primary-shadow: 0 0 transparent, + --color-btn-primary-inset-shadow: 0 0 transparent, + --color-btn-primary-hover-bg: #46954a, + --color-btn-primary-hover-border: rgba(205, 217, 229, 0.1), + --color-btn-primary-selected-bg: #347d39, + --color-btn-primary-selected-shadow: 0 0 transparent, + --color-btn-primary-disabled-text: rgba(205, 217, 229, 0.5), + --color-btn-primary-disabled-bg: rgba(52, 125, 57, 0.6), + --color-btn-primary-disabled-border: rgba(205, 217, 229, 0.1), + --color-btn-primary-focus-bg: #347d39, + --color-btn-primary-focus-border: rgba(205, 217, 229, 0.1), + --color-btn-primary-focus-shadow: 0 0 0 3px rgba(46, 164, 79, 0.4), + --color-btn-primary-icon: #cdd9e5, + --color-btn-primary-counter-bg: rgba(205, 217, 229, 0.2), + --color-btn-outline-text: #539bf5, + --color-btn-outline-hover-text: #539bf5, + --color-btn-outline-hover-bg: #444c56, + --color-btn-outline-hover-border: rgba(205, 217, 229, 0.1), + --color-btn-outline-hover-shadow: 0 1px 0 rgba(28, 33, 40, 0.1), + --color-btn-outline-hover-inset-shadow: inset 0 1px 0 + rgba(205, 217, 229, 0.03), + --color-btn-outline-hover-counter-bg: rgba(205, 217, 229, 0.2), + --color-btn-outline-selected-text: #cdd9e5, + --color-btn-outline-selected-bg: #1b4b91, + --color-btn-outline-selected-border: rgba(205, 217, 229, 0.1), + --color-btn-outline-selected-shadow: 0 0 transparent, + --color-btn-outline-disabled-text: rgba(83, 155, 245, 0.5), + --color-btn-outline-disabled-bg: #22272e, + --color-btn-outline-disabled-counter-bg: rgba(49, 109, 202, 0.05), + --color-btn-outline-focus-border: rgba(205, 217, 229, 0.1), + --color-btn-outline-focus-shadow: 0 0 0 3px rgba(37, 90, 178, 0.4), + --color-btn-outline-counter-bg: rgba(49, 109, 202, 0.1), + --color-btn-danger-text: #e5534b, + --color-btn-danger-hover-text: #cdd9e5, + --color-btn-danger-hover-bg: #c93c37, + --color-btn-danger-hover-border: #e5534b, + --color-btn-danger-hover-shadow: 0 0 transparent, + --color-btn-danger-hover-inset-shadow: 0 0 transparent, + --color-btn-danger-hover-icon: #cdd9e5, + --color-btn-danger-hover-counter-bg: rgba(255, 255, 255, 0.2), + --color-btn-danger-selected-text: #ffffff, + --color-btn-danger-selected-bg: #ad2e2c, + --color-btn-danger-selected-border: #f47067, + --color-btn-danger-selected-shadow: 0 0 transparent, + --color-btn-danger-disabled-text: rgba(229, 83, 75, 0.5), + --color-btn-danger-disabled-bg: #22272e, + --color-btn-danger-disabled-counter-bg: rgba(201, 60, 55, 0.05), + --color-btn-danger-focus-border: #e5534b, + --color-btn-danger-focus-shadow: 0 0 0 3px rgba(229, 83, 75, 0.4), + --color-btn-danger-counter-bg: rgba(201, 60, 55, 0.1), + --color-btn-danger-icon: #e5534b, + --color-underlinenav-icon: #545d68, + --color-underlinenav-border-hover: rgba(99, 110, 123, 0.4), + --color-action-list-item-inline-divider: rgba(68, 76, 86, 0.48), + --color-action-list-item-default-hover-bg: rgba(144, 157, 171, 0.12), + --color-action-list-item-default-active-bg: rgba(144, 157, 171, 0.2), + --color-action-list-item-default-selected-bg: rgba(144, 157, 171, 0.08), + --color-action-list-item-danger-hover-bg: rgba(229, 83, 75, 0.16), + --color-action-list-item-danger-active-bg: rgba(229, 83, 75, 0.24), + --color-action-list-item-danger-hover-text: #f47067, + --color-fg-default: #adbac7, + --color-fg-muted: #768390, + --color-fg-subtle: #545d68, + --color-fg-on-emphasis: #cdd9e5, + --color-canvas-default: #22272e, + --color-canvas-overlay: #2d333b, + --color-canvas-inset: #1c2128, + --color-canvas-subtle: #2d333b, + --color-border-default: #444c56, + --color-border-muted: #373e47, + --color-border-subtle: rgba(205, 217, 229, 0.1), + --color-shadow-small: 0 0 transparent, + --color-shadow-medium: 0 3px 6px #1c2128, + --color-shadow-large: 0 8px 24px #1c2128, + --color-shadow-extra-large: 0 12px 48px #1c2128, + --color-neutral-emphasis-plus: #636e7b, + --color-neutral-emphasis: #636e7b, + --color-neutral-muted: rgba(99, 110, 123, 0.4), + --color-neutral-subtle: rgba(99, 110, 123, 0.1), + --color-accent-fg: #539bf5, + --color-accent-emphasis: #316dca, + --color-accent-muted: rgba(65, 132, 228, 0.4), + --color-accent-subtle: rgba(65, 132, 228, 0.15), + --color-success-fg: #57ab5a, + --color-success-emphasis: #347d39, + --color-success-muted: rgba(70, 149, 74, 0.4), + --color-success-subtle: rgba(70, 149, 74, 0.15), + --color-attention-fg: #c69026, + --color-attention-emphasis: #966600, + --color-attention-muted: rgba(174, 124, 20, 0.4), + --color-attention-subtle: rgba(174, 124, 20, 0.15), + --color-severe-fg: #cc6b2c, + --color-severe-emphasis: #ae5622, + --color-severe-muted: rgba(204, 107, 44, 0.4), + --color-severe-subtle: rgba(204, 107, 44, 0.15), + --color-danger-fg: #e5534b, + --color-danger-emphasis: #c93c37, + --color-danger-muted: rgba(229, 83, 75, 0.4), + --color-danger-subtle: rgba(229, 83, 75, 0.15), + --color-done-fg: #986ee2, + --color-done-emphasis: #8256d0, + --color-done-muted: rgba(152, 110, 226, 0.4), + --color-done-subtle: rgba(152, 110, 226, 0.15), + --color-sponsors-fg: #c96198, + --color-sponsors-emphasis: #ae4c82, + --color-sponsors-muted: rgba(201, 97, 152, 0.4), + --color-sponsors-subtle: rgba(201, 97, 152, 0.15), + --color-primer-fg-disabled: #545d68, + --color-primer-canvas-backdrop: rgba(28, 33, 40, 0.8), + --color-primer-canvas-sticky: rgba(34, 39, 46, 0.95), + --color-primer-border-active: #ec775c, + --color-primer-border-contrast: rgba(205, 217, 229, 0.2), + --color-primer-shadow-highlight: 0 0 transparent, + --color-primer-shadow-inset: 0 0 transparent, + --color-primer-shadow-focus: 0 0 0 3px #143d79, + --color-scale-black: #1c2128, + --color-scale-white: #cdd9e5, + --color-scale-gray-0: #cdd9e5, + --color-scale-gray-1: #adbac7, + --color-scale-gray-2: #909dab, + --color-scale-gray-3: #768390, + --color-scale-gray-4: #636e7b, + --color-scale-gray-5: #545d68, + --color-scale-gray-6: #444c56, + --color-scale-gray-7: #373e47, + --color-scale-gray-8: #2d333b, + --color-scale-gray-9: #22272e, + --color-scale-blue-0: #c6e6ff, + --color-scale-blue-1: #96d0ff, + --color-scale-blue-2: #6cb6ff, + --color-scale-blue-3: #539bf5, + --color-scale-blue-4: #4184e4, + --color-scale-blue-5: #316dca, + --color-scale-blue-6: #255ab2, + --color-scale-blue-7: #1b4b91, + --color-scale-blue-8: #143d79, + --color-scale-blue-9: #0f2d5c, + --color-scale-green-0: #b4f1b4, + --color-scale-green-1: #8ddb8c, + --color-scale-green-2: #6bc46d, + --color-scale-green-3: #57ab5a, + --color-scale-green-4: #46954a, + --color-scale-green-5: #347d39, + --color-scale-green-6: #2b6a30, + --color-scale-green-7: #245829, + --color-scale-green-8: #1b4721, + --color-scale-green-9: #113417, + --color-scale-yellow-0: #fbe090, + --color-scale-yellow-1: #eac55f, + --color-scale-yellow-2: #daaa3f, + --color-scale-yellow-3: #c69026, + --color-scale-yellow-4: #ae7c14, + --color-scale-yellow-5: #966600, + --color-scale-yellow-6: #805400, + --color-scale-yellow-7: #6c4400, + --color-scale-yellow-8: #593600, + --color-scale-yellow-9: #452700, + --color-scale-orange-0: #ffddb0, + --color-scale-orange-1: #ffbc6f, + --color-scale-orange-2: #f69d50, + --color-scale-orange-3: #e0823d, + --color-scale-orange-4: #cc6b2c, + --color-scale-orange-5: #ae5622, + --color-scale-orange-6: #94471b, + --color-scale-orange-7: #7f3913, + --color-scale-orange-8: #682d0f, + --color-scale-orange-9: #4d210c, + --color-scale-red-0: #ffd8d3, + --color-scale-red-1: #ffb8b0, + --color-scale-red-2: #ff938a, + --color-scale-red-3: #f47067, + --color-scale-red-4: #e5534b, + --color-scale-red-5: #c93c37, + --color-scale-red-6: #ad2e2c, + --color-scale-red-7: #922323, + --color-scale-red-8: #78191b, + --color-scale-red-9: #5d0f12, + --color-scale-purple-0: #eedcff, + --color-scale-purple-1: #dcbdfb, + --color-scale-purple-2: #dcbdfb, + --color-scale-purple-3: #b083f0, + --color-scale-purple-4: #986ee2, + --color-scale-purple-5: #8256d0, + --color-scale-purple-6: #6b44bc, + --color-scale-purple-7: #5936a2, + --color-scale-purple-8: #472c82, + --color-scale-purple-9: #352160, + --color-scale-pink-0: #ffd7eb, + --color-scale-pink-1: #ffb3d8, + --color-scale-pink-2: #fc8dc7, + --color-scale-pink-3: #e275ad, + --color-scale-pink-4: #c96198, + --color-scale-pink-5: #ae4c82, + --color-scale-pink-6: #983b6e, + --color-scale-pink-7: #7e325a, + --color-scale-pink-8: #69264a, + --color-scale-pink-9: #551639, + --color-scale-coral-0: #ffdacf, + --color-scale-coral-1: #ffb9a5, + --color-scale-coral-2: #f79981, + --color-scale-coral-3: #ec775c, + --color-scale-coral-4: #de5b41, + --color-scale-coral-5: #c2442d, + --color-scale-coral-6: #a93524, + --color-scale-coral-7: #8d291b, + --color-scale-coral-8: #771d13, + --color-scale-coral-9: #5d1008, +); diff --git a/packages/@som/blog/client/assets/scss/custom/base-styles.scss b/packages/@som/blog/client/assets/scss/custom/base-styles.scss new file mode 100644 index 00000000..73d76bed --- /dev/null +++ b/packages/@som/blog/client/assets/scss/custom/base-styles.scss @@ -0,0 +1,33 @@ +@layer base { + button:focus { + outline: none; + } + button[disabled='disabled']:hover { + @apply cursor-not-allowed; + } + + html { + // cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABFklEQVRYR9WXURLDIAhE6/0PbSdOtUpcd1Gnpv1KGpTHBpCE1/cXq+vrMph7dGvXZTtpfW10DCA5jrH1H0Jhs5E0hnZdCR+vb5S8Nn8mQCeS9BdSalYJqMBjAGzq59xAESN7VFVUgV8AZB/dZBR7QTFDCqGquvUBVVoEtgIwpQRzmANSFHgWQKExHdIrPeuMvQNDarXe6nC/AutgV3JW+6bgqQLeV8FekRtgV+ToDKEKnACYKsfZjjkam7a0ZpYTytwmgainpC3HvwBocgKOxqRjehoR9DFKNFYtOwCGYCszobeCbl26N6yyQ6g8X/Wex/rBPsNEV6qAMaJPMynIHQCoSqS9JSMmwef51LflTgCRszU7DvAGiV6mHWfsaVUAAAAASUVORK5CYII=), + // auto; + // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, + // sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + } + // a, + // button { + // // cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) + // // 14 0, + // pointer; + // } + + body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, + sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !important; + font-size: 14px; + line-height: 1.5; + color: rgb(var(--color-fg-default)); + background-color: rgb(var(--color-canvas-default)); + } +} diff --git a/packages/@som/blog/client/assets/scss/custom/components.scss b/packages/@som/blog/client/assets/scss/custom/components.scss new file mode 100644 index 00000000..4a38b34b --- /dev/null +++ b/packages/@som/blog/client/assets/scss/custom/components.scss @@ -0,0 +1,2 @@ +@layer components { +} diff --git a/packages/@som/blog/client/assets/scss/custom/utilities.scss b/packages/@som/blog/client/assets/scss/custom/utilities.scss new file mode 100644 index 00000000..9f3acae2 --- /dev/null +++ b/packages/@som/blog/client/assets/scss/custom/utilities.scss @@ -0,0 +1,26 @@ +@layer utilities { + .link { + @apply hover:text-accent-fg hover:underline; + } + + .btn { + @apply border-btn-border bg-btn-bg text-btn-text; + box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow); + transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1); + transition-property: color, background-color, border-color; + + &:hover { + @apply border-btn-hover-border bg-btn-hover-bg; + transition-duration: 0.1s; + } + + &.btn-primary { + @apply border-btn-primary-border bg-btn-primary-bg text-btn-primary-text; + box-shadow: var(--color-btn-primary-shadow), + var(--color-btn-primary-inset-shadow); + &:hover { + @apply border-btn-primary-hover-border bg-btn-primary-hover-bg; + } + } + } +} diff --git a/packages/@som/blog/client/assets/scss/element-variables.scss b/packages/@som/blog/client/assets/scss/element-variables.scss index 1ab3105e..695f6401 100644 --- a/packages/@som/blog/client/assets/scss/element-variables.scss +++ b/packages/@som/blog/client/assets/scss/element-variables.scss @@ -1,5 +1,5 @@ -$--color-primary:#28a745; +$--color-primary: rgb(52, 125, 57); /* 改变 icon 字体路径变量，必需 */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; -@import "~element-ui/packages/theme-chalk/src/index"; +@import '~element-ui/packages/theme-chalk/src/index'; diff --git a/packages/@som/blog/client/assets/scss/export.scss b/packages/@som/blog/client/assets/scss/export.scss new file mode 100644 index 00000000..a4ad7e44 --- /dev/null +++ b/packages/@som/blog/client/assets/scss/export.scss @@ -0,0 +1,10 @@ +@use './constants.scss' as C; +@use './util.scss' as Util; + +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass +// 使用 -- 前缀的命名是无法转义的 +:export { + @each $var, $color in C.$root-vars { + #{$var}: Util.getRgbaString($color); + } +} diff --git a/packages/@som/blog/client/assets/scss/expose.scss b/packages/@som/blog/client/assets/scss/expose.scss new file mode 100644 index 00000000..458007a5 --- /dev/null +++ b/packages/@som/blog/client/assets/scss/expose.scss @@ -0,0 +1,3 @@ +@use './constants.scss' as C; + +$expose: expose(C.$root-vars); diff --git a/packages/@som/blog/client/assets/scss/expose/export.scss b/packages/@som/blog/client/assets/scss/expose/export.scss new file mode 100644 index 00000000..eeada755 --- /dev/null +++ b/packages/@som/blog/client/assets/scss/expose/export.scss @@ -0,0 +1,8 @@ +@use '../constants.scss' as C; +@use './util.scss' as Util; + +:export { + @each $var, $color in C.$root-vars { + #{$var}: Util.getRgbString($color); + } +} diff --git a/packages/@som/blog/client/assets/scss/expose/extendColors.js b/packages/@som/blog/client/assets/scss/expose/extendColors.js new file mode 100644 index 00000000..77796a74 --- /dev/null +++ b/packages/@som/blog/client/assets/scss/expose/extendColors.js @@ -0,0 +1,702 @@ +function withOpacityValue(variable) { + return ({ opacityValue }) => { + if (opacityValue === undefined) { + return `rgb(var(${variable}))` + } + return `rgb(var(${variable}) / ${opacityValue})` + } +} + +module.exports = { + colors: { + 'canvas-default-transparent': withOpacityValue( + '--color-canvas-default-transparent' + ), + 'marketing-icon-primary': withOpacityValue( + '--color-marketing-icon-primary' + ), + 'marketing-icon-secondary': withOpacityValue( + '--color-marketing-icon-secondary' + ), + 'diff-blob-addition-num-text': withOpacityValue( + '--color-diff-blob-addition-num-text' + ), + 'diff-blob-addition-fg': withOpacityValue('--color-diff-blob-addition-fg'), + 'diff-blob-addition-num-bg': withOpacityValue( + '--color-diff-blob-addition-num-bg' + ), + 'diff-blob-addition-line-bg': withOpacityValue( + '--color-diff-blob-addition-line-bg' + ), + 'diff-blob-addition-word-bg': withOpacityValue( + '--color-diff-blob-addition-word-bg' + ), + 'diff-blob-deletion-num-text': withOpacityValue( + '--color-diff-blob-deletion-num-text' + ), + 'diff-blob-deletion-fg': withOpacityValue('--color-diff-blob-deletion-fg'), + 'diff-blob-deletion-num-bg': withOpacityValue( + '--color-diff-blob-deletion-num-bg' + ), + 'diff-blob-deletion-line-bg': withOpacityValue( + '--color-diff-blob-deletion-line-bg' + ), + 'diff-blob-deletion-word-bg': withOpacityValue( + '--color-diff-blob-deletion-word-bg' + ), + 'diff-blob-hunk-num-bg': withOpacityValue('--color-diff-blob-hunk-num-bg'), + 'diff-blob-expander-icon': withOpacityValue( + '--color-diff-blob-expander-icon' + ), + 'diff-blob-selected-line-highlight-mix-blend-mode': withOpacityValue( + '--color-diff-blob-selected-line-highlight-mix-blend-mode' + ), + 'diffstat-deletion-border': withOpacityValue( + '--color-diffstat-deletion-border' + ), + 'diffstat-addition-border': withOpacityValue( + '--color-diffstat-addition-border' + ), + 'diffstat-addition-bg': withOpacityValue('--color-diffstat-addition-bg'), + 'search-keyword-hl': withOpacityValue('--color-search-keyword-hl'), + 'prettylights-syntax-comment': withOpacityValue( + '--color-prettylights-syntax-comment' + ), + 'prettylights-syntax-constant': withOpacityValue( + '--color-prettylights-syntax-constant' + ), + 'prettylights-syntax-entity': withOpacityValue( + '--color-prettylights-syntax-entity' + ), + 'prettylights-syntax-storage-modifier-import': withOpacityValue( + '--color-prettylights-syntax-storage-modifier-import' + ), + 'prettylights-syntax-entity-tag': withOpacityValue( + '--color-prettylights-syntax-entity-tag' + ), + 'prettylights-syntax-keyword': withOpacityValue( + '--color-prettylights-syntax-keyword' + ), + 'prettylights-syntax-string': withOpacityValue( + '--color-prettylights-syntax-string' + ), + 'prettylights-syntax-variable': withOpacityValue( + '--color-prettylights-syntax-variable' + ), + 'prettylights-syntax-brackethighlighter-unmatched': withOpacityValue( + '--color-prettylights-syntax-brackethighlighter-unmatched' + ), + 'prettylights-syntax-invalid-illegal-text': withOpacityValue( + '--color-prettylights-syntax-invalid-illegal-text' + ), + 'prettylights-syntax-invalid-illegal-bg': withOpacityValue( + '--color-prettylights-syntax-invalid-illegal-bg' + ), + 'prettylights-syntax-carriage-return-text': withOpacityValue( + '--color-prettylights-syntax-carriage-return-text' + ), + 'prettylights-syntax-carriage-return-bg': withOpacityValue( + '--color-prettylights-syntax-carriage-return-bg' + ), + 'prettylights-syntax-string-regexp': withOpacityValue( + '--color-prettylights-syntax-string-regexp' + ), + 'prettylights-syntax-markup-list': withOpacityValue( + '--color-prettylights-syntax-markup-list' + ), + 'prettylights-syntax-markup-heading': withOpacityValue( + '--color-prettylights-syntax-markup-heading' + ), + 'prettylights-syntax-markup-italic': withOpacityValue( + '--color-prettylights-syntax-markup-italic' + ), + 'prettylights-syntax-markup-bold': withOpacityValue( + '--color-prettylights-syntax-markup-bold' + ), + 'prettylights-syntax-markup-deleted-text': withOpacityValue( + '--color-prettylights-syntax-markup-deleted-text' + ), + 'prettylights-syntax-markup-deleted-bg': withOpacityValue( + '--color-prettylights-syntax-markup-deleted-bg' + ), + 'prettylights-syntax-markup-inserted-text': withOpacityValue( + '--color-prettylights-syntax-markup-inserted-text' + ), + 'prettylights-syntax-markup-inserted-bg': withOpacityValue( + '--color-prettylights-syntax-markup-inserted-bg' + ), + 'prettylights-syntax-markup-changed-text': withOpacityValue( + '--color-prettylights-syntax-markup-changed-text' + ), + 'prettylights-syntax-markup-changed-bg': withOpacityValue( + '--color-prettylights-syntax-markup-changed-bg' + ), + 'prettylights-syntax-markup-ignored-text': withOpacityValue( + '--color-prettylights-syntax-markup-ignored-text' + ), + 'prettylights-syntax-markup-ignored-bg': withOpacityValue( + '--color-prettylights-syntax-markup-ignored-bg' + ), + 'prettylights-syntax-meta-diff-range': withOpacityValue( + '--color-prettylights-syntax-meta-diff-range' + ), + 'prettylights-syntax-brackethighlighter-angle': withOpacityValue( + '--color-prettylights-syntax-brackethighlighter-angle' + ), + 'prettylights-syntax-sublimelinter-gutter-mark': withOpacityValue( + '--color-prettylights-syntax-sublimelinter-gutter-mark' + ), + 'prettylights-syntax-constant-other-reference-link': withOpacityValue( + '--color-prettylights-syntax-constant-other-reference-link' + ), + 'codemirror-text': withOpacityValue('--color-codemirror-text'), + 'codemirror-bg': withOpacityValue('--color-codemirror-bg'), + 'codemirror-gutters-bg': withOpacityValue('--color-codemirror-gutters-bg'), + 'codemirror-guttermarker-text': withOpacityValue( + '--color-codemirror-guttermarker-text' + ), + 'codemirror-guttermarker-subtle-text': withOpacityValue( + '--color-codemirror-guttermarker-subtle-text' + ), + 'codemirror-linenumber-text': withOpacityValue( + '--color-codemirror-linenumber-text' + ), + 'codemirror-cursor': withOpacityValue('--color-codemirror-cursor'), + 'codemirror-selection-bg': withOpacityValue( + '--color-codemirror-selection-bg' + ), + 'codemirror-activeline-bg': withOpacityValue( + '--color-codemirror-activeline-bg' + ), + 'codemirror-matchingbracket-text': withOpacityValue( + '--color-codemirror-matchingbracket-text' + ), + 'codemirror-lines-bg': withOpacityValue('--color-codemirror-lines-bg'), + 'codemirror-syntax-comment': withOpacityValue( + '--color-codemirror-syntax-comment' + ), + 'codemirror-syntax-constant': withOpacityValue( + '--color-codemirror-syntax-constant' + ), + 'codemirror-syntax-entity': withOpacityValue( + '--color-codemirror-syntax-entity' + ), + 'codemirror-syntax-keyword': withOpacityValue( + '--color-codemirror-syntax-keyword' + ), + 'codemirror-syntax-storage': withOpacityValue( + '--color-codemirror-syntax-storage' + ), + 'codemirror-syntax-string': withOpacityValue( + '--color-codemirror-syntax-string' + ), + 'codemirror-syntax-support': withOpacityValue( + '--color-codemirror-syntax-support' + ), + 'codemirror-syntax-variable': withOpacityValue( + '--color-codemirror-syntax-variable' + ), + 'checks-bg': withOpacityValue('--color-checks-bg'), + 'checks-run-border-width': withOpacityValue( + '--color-checks-run-border-width' + ), + 'checks-container-border-width': withOpacityValue( + '--color-checks-container-border-width' + ), + 'checks-text-primary': withOpacityValue('--color-checks-text-primary'), + 'checks-text-secondary': withOpacityValue('--color-checks-text-secondary'), + 'checks-text-link': withOpacityValue('--color-checks-text-link'), + 'checks-btn-icon': withOpacityValue('--color-checks-btn-icon'), + 'checks-btn-hover-icon': withOpacityValue('--color-checks-btn-hover-icon'), + 'checks-btn-hover-bg': withOpacityValue('--color-checks-btn-hover-bg'), + 'checks-input-text': withOpacityValue('--color-checks-input-text'), + 'checks-input-placeholder-text': withOpacityValue( + '--color-checks-input-placeholder-text' + ), + 'checks-input-focus-text': withOpacityValue( + '--color-checks-input-focus-text' + ), + 'checks-input-bg': withOpacityValue('--color-checks-input-bg'), + 'checks-donut-error': withOpacityValue('--color-checks-donut-error'), + 'checks-donut-pending': withOpacityValue('--color-checks-donut-pending'), + 'checks-donut-success': withOpacityValue('--color-checks-donut-success'), + 'checks-donut-neutral': withOpacityValue('--color-checks-donut-neutral'), + 'checks-dropdown-text': withOpacityValue('--color-checks-dropdown-text'), + 'checks-dropdown-bg': withOpacityValue('--color-checks-dropdown-bg'), + 'checks-dropdown-border': withOpacityValue( + '--color-checks-dropdown-border' + ), + 'checks-dropdown-shadow': '--color-checks-dropdown-shadow', + 'checks-dropdown-hover-text': withOpacityValue( + '--color-checks-dropdown-hover-text' + ), + 'checks-dropdown-hover-bg': withOpacityValue( + '--color-checks-dropdown-hover-bg' + ), + 'checks-dropdown-btn-hover-text': withOpacityValue( + '--color-checks-dropdown-btn-hover-text' + ), + 'checks-dropdown-btn-hover-bg': withOpacityValue( + '--color-checks-dropdown-btn-hover-bg' + ), + 'checks-scrollbar-thumb-bg': withOpacityValue( + '--color-checks-scrollbar-thumb-bg' + ), + 'checks-header-label-text': withOpacityValue( + '--color-checks-header-label-text' + ), + 'checks-header-label-open-text': withOpacityValue( + '--color-checks-header-label-open-text' + ), + 'checks-header-border': withOpacityValue('--color-checks-header-border'), + 'checks-header-icon': withOpacityValue('--color-checks-header-icon'), + 'checks-line-text': withOpacityValue('--color-checks-line-text'), + 'checks-line-num-text': withOpacityValue('--color-checks-line-num-text'), + 'checks-line-timestamp-text': withOpacityValue( + '--color-checks-line-timestamp-text' + ), + 'checks-line-hover-bg': withOpacityValue('--color-checks-line-hover-bg'), + 'checks-line-selected-bg': withOpacityValue( + '--color-checks-line-selected-bg' + ), + 'checks-line-selected-num-text': withOpacityValue( + '--color-checks-line-selected-num-text' + ), + 'checks-line-dt-fm-text': withOpacityValue( + '--color-checks-line-dt-fm-text' + ), + 'checks-line-dt-fm-bg': withOpacityValue('--color-checks-line-dt-fm-bg'), + 'checks-gate-bg': withOpacityValue('--color-checks-gate-bg'), + 'checks-gate-text': withOpacityValue('--color-checks-gate-text'), + 'checks-gate-waiting-text': withOpacityValue( + '--color-checks-gate-waiting-text' + ), + 'checks-step-header-open-bg': withOpacityValue( + '--color-checks-step-header-open-bg' + ), + 'checks-step-error-text': withOpacityValue( + '--color-checks-step-error-text' + ), + 'checks-step-warning-text': withOpacityValue( + '--color-checks-step-warning-text' + ), + 'checks-logline-text': withOpacityValue('--color-checks-logline-text'), + 'checks-logline-num-text': withOpacityValue( + '--color-checks-logline-num-text' + ), + 'checks-logline-debug-text': withOpacityValue( + '--color-checks-logline-debug-text' + ), + 'checks-logline-error-text': withOpacityValue( + '--color-checks-logline-error-text' + ), + 'checks-logline-error-num-text': withOpacityValue( + '--color-checks-logline-error-num-text' + ), + 'checks-logline-error-bg': withOpacityValue( + '--color-checks-logline-error-bg' + ), + 'checks-logline-warning-text': withOpacityValue( + '--color-checks-logline-warning-text' + ), + 'checks-logline-warning-num-text': withOpacityValue( + '--color-checks-logline-warning-num-text' + ), + 'checks-logline-warning-bg': withOpacityValue( + '--color-checks-logline-warning-bg' + ), + 'checks-logline-command-text': withOpacityValue( + '--color-checks-logline-command-text' + ), + 'checks-logline-section-text': withOpacityValue( + '--color-checks-logline-section-text' + ), + 'checks-ansi-black': withOpacityValue('--color-checks-ansi-black'), + 'checks-ansi-black-bright': withOpacityValue( + '--color-checks-ansi-black-bright' + ), + 'checks-ansi-white': withOpacityValue('--color-checks-ansi-white'), + 'checks-ansi-white-bright': withOpacityValue( + '--color-checks-ansi-white-bright' + ), + 'checks-ansi-gray': withOpacityValue('--color-checks-ansi-gray'), + 'checks-ansi-red': withOpacityValue('--color-checks-ansi-red'), + 'checks-ansi-red-bright': withOpacityValue( + '--color-checks-ansi-red-bright' + ), + 'checks-ansi-green': withOpacityValue('--color-checks-ansi-green'), + 'checks-ansi-green-bright': withOpacityValue( + '--color-checks-ansi-green-bright' + ), + 'checks-ansi-yellow': withOpacityValue('--color-checks-ansi-yellow'), + 'checks-ansi-yellow-bright': withOpacityValue( + '--color-checks-ansi-yellow-bright' + ), + 'checks-ansi-blue': withOpacityValue('--color-checks-ansi-blue'), + 'checks-ansi-blue-bright': withOpacityValue( + '--color-checks-ansi-blue-bright' + ), + 'checks-ansi-magenta': withOpacityValue('--color-checks-ansi-magenta'), + 'checks-ansi-magenta-bright': withOpacityValue( + '--color-checks-ansi-magenta-bright' + ), + 'checks-ansi-cyan': withOpacityValue('--color-checks-ansi-cyan'), + 'checks-ansi-cyan-bright': withOpacityValue( + '--color-checks-ansi-cyan-bright' + ), + 'project-header-bg': withOpacityValue('--color-project-header-bg'), + 'project-sidebar-bg': withOpacityValue('--color-project-sidebar-bg'), + 'project-gradient-in': withOpacityValue('--color-project-gradient-in'), + 'project-gradient-out': withOpacityValue('--color-project-gradient-out'), + 'mktg-btn-bg': withOpacityValue('--color-mktg-btn-bg'), + 'mktg-btn-shadow-outline': '--color-mktg-btn-shadow-outline', + 'mktg-btn-shadow-focus': '--color-mktg-btn-shadow-focus', + 'mktg-btn-shadow-hover': '--color-mktg-btn-shadow-hover', + 'mktg-btn-shadow-hover-muted': '--color-mktg-btn-shadow-hover-muted', + 'avatar-bg': withOpacityValue('--color-avatar-bg'), + 'avatar-border': withOpacityValue('--color-avatar-border'), + 'avatar-stack-fade': withOpacityValue('--color-avatar-stack-fade'), + 'avatar-stack-fade-more': withOpacityValue( + '--color-avatar-stack-fade-more' + ), + 'avatar-child-shadow': '--color-avatar-child-shadow', + 'topic-tag-border': withOpacityValue('--color-topic-tag-border'), + 'counter-border': withOpacityValue('--color-counter-border'), + 'select-menu-backdrop-border': withOpacityValue( + '--color-select-menu-backdrop-border' + ), + 'select-menu-tap-highlight': withOpacityValue( + '--color-select-menu-tap-highlight' + ), + 'select-menu-tap-focus-bg': withOpacityValue( + '--color-select-menu-tap-focus-bg' + ), + 'overlay-shadow': '--color-overlay-shadow', + 'header-text': withOpacityValue('--color-header-text'), + 'header-bg': withOpacityValue('--color-header-bg'), + 'header-divider': withOpacityValue('--color-header-divider'), + 'header-logo': withOpacityValue('--color-header-logo'), + 'header-search-bg': withOpacityValue('--color-header-search-bg'), + 'header-search-border': withOpacityValue('--color-header-search-border'), + 'sidenav-selected-bg': withOpacityValue('--color-sidenav-selected-bg'), + 'menu-bg-active': withOpacityValue('--color-menu-bg-active'), + 'input-disabled-bg': withOpacityValue('--color-input-disabled-bg'), + 'timeline-badge-bg': withOpacityValue('--color-timeline-badge-bg'), + 'ansi-black': withOpacityValue('--color-ansi-black'), + 'ansi-black-bright': withOpacityValue('--color-ansi-black-bright'), + 'ansi-white': withOpacityValue('--color-ansi-white'), + 'ansi-white-bright': withOpacityValue('--color-ansi-white-bright'), + 'ansi-gray': withOpacityValue('--color-ansi-gray'), + 'ansi-red': withOpacityValue('--color-ansi-red'), + 'ansi-red-bright': withOpacityValue('--color-ansi-red-bright'), + 'ansi-green': withOpacityValue('--color-ansi-green'), + 'ansi-green-bright': withOpacityValue('--color-ansi-green-bright'), + 'ansi-yellow': withOpacityValue('--color-ansi-yellow'), + 'ansi-yellow-bright': withOpacityValue('--color-ansi-yellow-bright'), + 'ansi-blue': withOpacityValue('--color-ansi-blue'), + 'ansi-blue-bright': withOpacityValue('--color-ansi-blue-bright'), + 'ansi-magenta': withOpacityValue('--color-ansi-magenta'), + 'ansi-magenta-bright': withOpacityValue('--color-ansi-magenta-bright'), + 'ansi-cyan': withOpacityValue('--color-ansi-cyan'), + 'ansi-cyan-bright': withOpacityValue('--color-ansi-cyan-bright'), + 'btn-text': withOpacityValue('--color-btn-text'), + 'btn-bg': withOpacityValue('--color-btn-bg'), + 'btn-border': withOpacityValue('--color-btn-border'), + 'btn-shadow': '--color-btn-shadow', + 'btn-inset-shadow': '--color-btn-inset-shadow', + 'btn-hover-bg': withOpacityValue('--color-btn-hover-bg'), + 'btn-hover-border': withOpacityValue('--color-btn-hover-border'), + 'btn-active-bg': withOpacityValue('--color-btn-active-bg'), + 'btn-active-border': withOpacityValue('--color-btn-active-border'), + 'btn-selected-bg': withOpacityValue('--color-btn-selected-bg'), + 'btn-focus-bg': withOpacityValue('--color-btn-focus-bg'), + 'btn-focus-border': withOpacityValue('--color-btn-focus-border'), + 'btn-focus-shadow': '--color-btn-focus-shadow', + 'btn-shadow-active': '--color-btn-shadow-active', + 'btn-shadow-input-focus': '--color-btn-shadow-input-focus', + 'btn-counter-bg': withOpacityValue('--color-btn-counter-bg'), + 'btn-primary-text': withOpacityValue('--color-btn-primary-text'), + 'btn-primary-bg': withOpacityValue('--color-btn-primary-bg'), + 'btn-primary-border': withOpacityValue('--color-btn-primary-border'), + 'btn-primary-shadow': '--color-btn-primary-shadow', + 'btn-primary-inset-shadow': '--color-btn-primary-inset-shadow', + 'btn-primary-hover-bg': withOpacityValue('--color-btn-primary-hover-bg'), + 'btn-primary-hover-border': withOpacityValue( + '--color-btn-primary-hover-border' + ), + 'btn-primary-selected-bg': withOpacityValue( + '--color-btn-primary-selected-bg' + ), + 'btn-primary-selected-shadow': '--color-btn-primary-selected-shadow', + 'btn-primary-disabled-text': withOpacityValue( + '--color-btn-primary-disabled-text' + ), + 'btn-primary-disabled-bg': withOpacityValue( + '--color-btn-primary-disabled-bg' + ), + 'btn-primary-disabled-border': withOpacityValue( + '--color-btn-primary-disabled-border' + ), + 'btn-primary-focus-bg': withOpacityValue('--color-btn-primary-focus-bg'), + 'btn-primary-focus-border': withOpacityValue( + '--color-btn-primary-focus-border' + ), + 'btn-primary-focus-shadow': '--color-btn-primary-focus-shadow', + 'btn-primary-icon': withOpacityValue('--color-btn-primary-icon'), + 'btn-primary-counter-bg': withOpacityValue( + '--color-btn-primary-counter-bg' + ), + 'btn-outline-text': withOpacityValue('--color-btn-outline-text'), + 'btn-outline-hover-text': withOpacityValue( + '--color-btn-outline-hover-text' + ), + 'btn-outline-hover-bg': withOpacityValue('--color-btn-outline-hover-bg'), + 'btn-outline-hover-border': withOpacityValue( + '--color-btn-outline-hover-border' + ), + 'btn-outline-hover-shadow': '--color-btn-outline-hover-shadow', + 'btn-outline-hover-inset-shadow': '--color-btn-outline-hover-inset-shadow', + 'btn-outline-hover-counter-bg': withOpacityValue( + '--color-btn-outline-hover-counter-bg' + ), + 'btn-outline-selected-text': withOpacityValue( + '--color-btn-outline-selected-text' + ), + 'btn-outline-selected-bg': withOpacityValue( + '--color-btn-outline-selected-bg' + ), + 'btn-outline-selected-border': withOpacityValue( + '--color-btn-outline-selected-border' + ), + 'btn-outline-selected-shadow': '--color-btn-outline-selected-shadow', + 'btn-outline-disabled-text': withOpacityValue( + '--color-btn-outline-disabled-text' + ), + 'btn-outline-disabled-bg': withOpacityValue( + '--color-btn-outline-disabled-bg' + ), + 'btn-outline-disabled-counter-bg': withOpacityValue( + '--color-btn-outline-disabled-counter-bg' + ), + 'btn-outline-focus-border': withOpacityValue( + '--color-btn-outline-focus-border' + ), + 'btn-outline-focus-shadow': '--color-btn-outline-focus-shadow', + 'btn-outline-counter-bg': withOpacityValue( + '--color-btn-outline-counter-bg' + ), + 'btn-danger-text': withOpacityValue('--color-btn-danger-text'), + 'btn-danger-hover-text': withOpacityValue('--color-btn-danger-hover-text'), + 'btn-danger-hover-bg': withOpacityValue('--color-btn-danger-hover-bg'), + 'btn-danger-hover-border': withOpacityValue( + '--color-btn-danger-hover-border' + ), + 'btn-danger-hover-shadow': '--color-btn-danger-hover-shadow', + 'btn-danger-hover-inset-shadow': '--color-btn-danger-hover-inset-shadow', + 'btn-danger-hover-icon': withOpacityValue('--color-btn-danger-hover-icon'), + 'btn-danger-hover-counter-bg': withOpacityValue( + '--color-btn-danger-hover-counter-bg' + ), + 'btn-danger-selected-text': withOpacityValue( + '--color-btn-danger-selected-text' + ), + 'btn-danger-selected-bg': withOpacityValue( + '--color-btn-danger-selected-bg' + ), + 'btn-danger-selected-border': withOpacityValue( + '--color-btn-danger-selected-border' + ), + 'btn-danger-selected-shadow': '--color-btn-danger-selected-shadow', + 'btn-danger-disabled-text': withOpacityValue( + '--color-btn-danger-disabled-text' + ), + 'btn-danger-disabled-bg': withOpacityValue( + '--color-btn-danger-disabled-bg' + ), + 'btn-danger-disabled-counter-bg': withOpacityValue( + '--color-btn-danger-disabled-counter-bg' + ), + 'btn-danger-focus-border': withOpacityValue( + '--color-btn-danger-focus-border' + ), + 'btn-danger-focus-shadow': '--color-btn-danger-focus-shadow', + 'btn-danger-counter-bg': withOpacityValue('--color-btn-danger-counter-bg'), + 'btn-danger-icon': withOpacityValue('--color-btn-danger-icon'), + 'underlinenav-icon': withOpacityValue('--color-underlinenav-icon'), + 'underlinenav-border-hover': withOpacityValue( + '--color-underlinenav-border-hover' + ), + 'action-list-item-inline-divider': withOpacityValue( + '--color-action-list-item-inline-divider' + ), + 'action-list-item-default-hover-bg': withOpacityValue( + '--color-action-list-item-default-hover-bg' + ), + 'action-list-item-default-active-bg': withOpacityValue( + '--color-action-list-item-default-active-bg' + ), + 'action-list-item-default-selected-bg': withOpacityValue( + '--color-action-list-item-default-selected-bg' + ), + 'action-list-item-danger-hover-bg': withOpacityValue( + '--color-action-list-item-danger-hover-bg' + ), + 'action-list-item-danger-active-bg': withOpacityValue( + '--color-action-list-item-danger-active-bg' + ), + 'action-list-item-danger-hover-text': withOpacityValue( + '--color-action-list-item-danger-hover-text' + ), + 'fg-default': withOpacityValue('--color-fg-default'), + 'fg-muted': withOpacityValue('--color-fg-muted'), + 'fg-subtle': withOpacityValue('--color-fg-subtle'), + 'fg-on-emphasis': withOpacityValue('--color-fg-on-emphasis'), + 'canvas-default': withOpacityValue('--color-canvas-default'), + 'canvas-overlay': withOpacityValue('--color-canvas-overlay'), + 'canvas-inset': withOpacityValue('--color-canvas-inset'), + 'canvas-subtle': withOpacityValue('--color-canvas-subtle'), + 'border-default': withOpacityValue('--color-border-default'), + 'border-muted': withOpacityValue('--color-border-muted'), + 'border-subtle': withOpacityValue('--color-border-subtle'), + 'shadow-small': '--color-shadow-small', + 'shadow-medium': '--color-shadow-medium', + 'shadow-large': '--color-shadow-large', + 'shadow-extra-large': '--color-shadow-extra-large', + 'neutral-emphasis-plus': withOpacityValue('--color-neutral-emphasis-plus'), + 'neutral-emphasis': withOpacityValue('--color-neutral-emphasis'), + 'neutral-muted': withOpacityValue('--color-neutral-muted'), + 'neutral-subtle': withOpacityValue('--color-neutral-subtle'), + 'accent-fg': withOpacityValue('--color-accent-fg'), + 'accent-emphasis': withOpacityValue('--color-accent-emphasis'), + 'accent-muted': withOpacityValue('--color-accent-muted'), + 'accent-subtle': withOpacityValue('--color-accent-subtle'), + 'success-fg': withOpacityValue('--color-success-fg'), + 'success-emphasis': withOpacityValue('--color-success-emphasis'), + 'success-muted': withOpacityValue('--color-success-muted'), + 'success-subtle': withOpacityValue('--color-success-subtle'), + 'attention-fg': withOpacityValue('--color-attention-fg'), + 'attention-emphasis': withOpacityValue('--color-attention-emphasis'), + 'attention-muted': withOpacityValue('--color-attention-muted'), + 'attention-subtle': withOpacityValue('--color-attention-subtle'), + 'severe-fg': withOpacityValue('--color-severe-fg'), + 'severe-emphasis': withOpacityValue('--color-severe-emphasis'), + 'severe-muted': withOpacityValue('--color-severe-muted'), + 'severe-subtle': withOpacityValue('--color-severe-subtle'), + 'danger-fg': withOpacityValue('--color-danger-fg'), + 'danger-emphasis': withOpacityValue('--color-danger-emphasis'), + 'danger-muted': withOpacityValue('--color-danger-muted'), + 'danger-subtle': withOpacityValue('--color-danger-subtle'), + 'done-fg': withOpacityValue('--color-done-fg'), + 'done-emphasis': withOpacityValue('--color-done-emphasis'), + 'done-muted': withOpacityValue('--color-done-muted'), + 'done-subtle': withOpacityValue('--color-done-subtle'), + 'sponsors-fg': withOpacityValue('--color-sponsors-fg'), + 'sponsors-emphasis': withOpacityValue('--color-sponsors-emphasis'), + 'sponsors-muted': withOpacityValue('--color-sponsors-muted'), + 'sponsors-subtle': withOpacityValue('--color-sponsors-subtle'), + 'primer-fg-disabled': withOpacityValue('--color-primer-fg-disabled'), + 'primer-canvas-backdrop': withOpacityValue( + '--color-primer-canvas-backdrop' + ), + 'primer-canvas-sticky': withOpacityValue('--color-primer-canvas-sticky'), + 'primer-border-active': withOpacityValue('--color-primer-border-active'), + 'primer-border-contrast': withOpacityValue( + '--color-primer-border-contrast' + ), + 'primer-shadow-highlight': '--color-primer-shadow-highlight', + 'primer-shadow-inset': '--color-primer-shadow-inset', + 'primer-shadow-focus': '--color-primer-shadow-focus', + 'scale-black': withOpacityValue('--color-scale-black'), + 'scale-white': withOpacityValue('--color-scale-white'), + 'scale-gray-0': withOpacityValue('--color-scale-gray-0'), + 'scale-gray-1': withOpacityValue('--color-scale-gray-1'), + 'scale-gray-2': withOpacityValue('--color-scale-gray-2'), + 'scale-gray-3': withOpacityValue('--color-scale-gray-3'), + 'scale-gray-4': withOpacityValue('--color-scale-gray-4'), + 'scale-gray-5': withOpacityValue('--color-scale-gray-5'), + 'scale-gray-6': withOpacityValue('--color-scale-gray-6'), + 'scale-gray-7': withOpacityValue('--color-scale-gray-7'), + 'scale-gray-8': withOpacityValue('--color-scale-gray-8'), + 'scale-gray-9': withOpacityValue('--color-scale-gray-9'), + 'scale-blue-0': withOpacityValue('--color-scale-blue-0'), + 'scale-blue-1': withOpacityValue('--color-scale-blue-1'), + 'scale-blue-2': withOpacityValue('--color-scale-blue-2'), + 'scale-blue-3': withOpacityValue('--color-scale-blue-3'), + 'scale-blue-4': withOpacityValue('--color-scale-blue-4'), + 'scale-blue-5': withOpacityValue('--color-scale-blue-5'), + 'scale-blue-6': withOpacityValue('--color-scale-blue-6'), + 'scale-blue-7': withOpacityValue('--color-scale-blue-7'), + 'scale-blue-8': withOpacityValue('--color-scale-blue-8'), + 'scale-blue-9': withOpacityValue('--color-scale-blue-9'), + 'scale-green-0': withOpacityValue('--color-scale-green-0'), + 'scale-green-1': withOpacityValue('--color-scale-green-1'), + 'scale-green-2': withOpacityValue('--color-scale-green-2'), + 'scale-green-3': withOpacityValue('--color-scale-green-3'), + 'scale-green-4': withOpacityValue('--color-scale-green-4'), + 'scale-green-5': withOpacityValue('--color-scale-green-5'), + 'scale-green-6': withOpacityValue('--color-scale-green-6'), + 'scale-green-7': withOpacityValue('--color-scale-green-7'), + 'scale-green-8': withOpacityValue('--color-scale-green-8'), + 'scale-green-9': withOpacityValue('--color-scale-green-9'), + 'scale-yellow-0': withOpacityValue('--color-scale-yellow-0'), + 'scale-yellow-1': withOpacityValue('--color-scale-yellow-1'), + 'scale-yellow-2': withOpacityValue('--color-scale-yellow-2'), + 'scale-yellow-3': withOpacityValue('--color-scale-yellow-3'), + 'scale-yellow-4': withOpacityValue('--color-scale-yellow-4'), + 'scale-yellow-5': withOpacityValue('--color-scale-yellow-5'), + 'scale-yellow-6': withOpacityValue('--color-scale-yellow-6'), + 'scale-yellow-7': withOpacityValue('--color-scale-yellow-7'), + 'scale-yellow-8': withOpacityValue('--color-scale-yellow-8'), + 'scale-yellow-9': withOpacityValue('--color-scale-yellow-9'), + 'scale-orange-0': withOpacityValue('--color-scale-orange-0'), + 'scale-orange-1': withOpacityValue('--color-scale-orange-1'), + 'scale-orange-2': withOpacityValue('--color-scale-orange-2'), + 'scale-orange-3': withOpacityValue('--color-scale-orange-3'), + 'scale-orange-4': withOpacityValue('--color-scale-orange-4'), + 'scale-orange-5': withOpacityValue('--color-scale-orange-5'), + 'scale-orange-6': withOpacityValue('--color-scale-orange-6'), + 'scale-orange-7': withOpacityValue('--color-scale-orange-7'), + 'scale-orange-8': withOpacityValue('--color-scale-orange-8'), + 'scale-orange-9': withOpacityValue('--color-scale-orange-9'), + 'scale-red-0': withOpacityValue('--color-scale-red-0'), + 'scale-red-1': withOpacityValue('--color-scale-red-1'), + 'scale-red-2': withOpacityValue('--color-scale-red-2'), + 'scale-red-3': withOpacityValue('--color-scale-red-3'), + 'scale-red-4': withOpacityValue('--color-scale-red-4'), + 'scale-red-5': withOpacityValue('--color-scale-red-5'), + 'scale-red-6': withOpacityValue('--color-scale-red-6'), + 'scale-red-7': withOpacityValue('--color-scale-red-7'), + 'scale-red-8': withOpacityValue('--color-scale-red-8'), + 'scale-red-9': withOpacityValue('--color-scale-red-9'), + 'scale-purple-0': withOpacityValue('--color-scale-purple-0'), + 'scale-purple-1': withOpacityValue('--color-scale-purple-1'), + 'scale-purple-2': withOpacityValue('--color-scale-purple-2'), + 'scale-purple-3': withOpacityValue('--color-scale-purple-3'), + 'scale-purple-4': withOpacityValue('--color-scale-purple-4'), + 'scale-purple-5': withOpacityValue('--color-scale-purple-5'), + 'scale-purple-6': withOpacityValue('--color-scale-purple-6'), + 'scale-purple-7': withOpacityValue('--color-scale-purple-7'), + 'scale-purple-8': withOpacityValue('--color-scale-purple-8'), + 'scale-purple-9': withOpacityValue('--color-scale-purple-9'), + 'scale-pink-0': withOpacityValue('--color-scale-pink-0'), + 'scale-pink-1': withOpacityValue('--color-scale-pink-1'), + 'scale-pink-2': withOpacityValue('--color-scale-pink-2'), + 'scale-pink-3': withOpacityValue('--color-scale-pink-3'), + 'scale-pink-4': withOpacityValue('--color-scale-pink-4'), + 'scale-pink-5': withOpacityValue('--color-scale-pink-5'), + 'scale-pink-6': withOpacityValue('--color-scale-pink-6'), + 'scale-pink-7': withOpacityValue('--color-scale-pink-7'), + 'scale-pink-8': withOpacityValue('--color-scale-pink-8'), + 'scale-pink-9': withOpacityValue('--color-scale-pink-9'), + 'scale-coral-0': withOpacityValue('--color-scale-coral-0'), + 'scale-coral-1': withOpacityValue('--color-scale-coral-1'), + 'scale-coral-2': withOpacityValue('--color-scale-coral-2'), + 'scale-coral-3': withOpacityValue('--color-scale-coral-3'), + 'scale-coral-4': withOpacityValue('--color-scale-coral-4'), + 'scale-coral-5': withOpacityValue('--color-scale-coral-5'), + 'scale-coral-6': withOpacityValue('--color-scale-coral-6'), + 'scale-coral-7': withOpacityValue('--color-scale-coral-7'), + 'scale-coral-8': withOpacityValue('--color-scale-coral-8'), + 'scale-coral-9': withOpacityValue('--color-scale-coral-9'), + }, +} diff --git a/packages/@som/blog/client/assets/scss/expose/root.scss b/packages/@som/blog/client/assets/scss/expose/root.scss new file mode 100644 index 00000000..1953dfa6 --- /dev/null +++ b/packages/@som/blog/client/assets/scss/expose/root.scss @@ -0,0 +1,8 @@ +@use '../constants.scss' as C; +@use './util.scss' as Util; + +:root { + @each $var, $color in C.$root-vars { + #{$var}: Util.getRgbString($color); + } +} \ No newline at end of file diff --git a/packages/@som/blog/client/assets/scss/expose/util.scss b/packages/@som/blog/client/assets/scss/expose/util.scss new file mode 100644 index 00000000..116a9ca7 --- /dev/null +++ b/packages/@som/blog/client/assets/scss/expose/util.scss @@ -0,0 +1,20 @@ +@use 'sass:color'; +@use 'sass:meta'; + +// https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb() +@function getRgbaString($color) { + @if (meta.type-of($color) == color) { + @return #{color.red($color) color.green($color) color.blue($color) / + color.alpha($color)}; + } @else { + @return $color; + } +} + +@function getRgbString($color) { + @if (meta.type-of($color) == color) { + @return #{color.red($color) color.green($color) color.blue($color)}; + } @else { + @return $color; + } +} diff --git a/packages/@som/blog/client/assets/scss/expose/variables.scss b/packages/@som/blog/client/assets/scss/expose/variables.scss new file mode 100644 index 00000000..2972dbaf --- /dev/null +++ b/packages/@som/blog/client/assets/scss/expose/variables.scss @@ -0,0 +1,491 @@ +$canvas-default-transparent: rgb(var(--color-canvas-default-transparent)); +$marketing-icon-primary: rgb(var(--color-marketing-icon-primary)); +$marketing-icon-secondary: rgb(var(--color-marketing-icon-secondary)); +$diff-blob-addition-num-text: rgb(var(--color-diff-blob-addition-num-text)); +$diff-blob-addition-fg: rgb(var(--color-diff-blob-addition-fg)); +$diff-blob-addition-num-bg: rgb(var(--color-diff-blob-addition-num-bg)); +$diff-blob-addition-line-bg: rgb(var(--color-diff-blob-addition-line-bg)); +$diff-blob-addition-word-bg: rgb(var(--color-diff-blob-addition-word-bg)); +$diff-blob-deletion-num-text: rgb(var(--color-diff-blob-deletion-num-text)); +$diff-blob-deletion-fg: rgb(var(--color-diff-blob-deletion-fg)); +$diff-blob-deletion-num-bg: rgb(var(--color-diff-blob-deletion-num-bg)); +$diff-blob-deletion-line-bg: rgb(var(--color-diff-blob-deletion-line-bg)); +$diff-blob-deletion-word-bg: rgb(var(--color-diff-blob-deletion-word-bg)); +$diff-blob-hunk-num-bg: rgb(var(--color-diff-blob-hunk-num-bg)); +$diff-blob-expander-icon: rgb(var(--color-diff-blob-expander-icon)); +$diff-blob-selected-line-highlight-mix-blend-mode: rgb( + var(--color-diff-blob-selected-line-highlight-mix-blend-mode) +); +$diffstat-deletion-border: rgb(var(--color-diffstat-deletion-border)); +$diffstat-addition-border: rgb(var(--color-diffstat-addition-border)); +$diffstat-addition-bg: rgb(var(--color-diffstat-addition-bg)); +$search-keyword-hl: rgb(var(--color-search-keyword-hl)); +$prettylights-syntax-comment: rgb(var(--color-prettylights-syntax-comment)); +$prettylights-syntax-constant: rgb(var(--color-prettylights-syntax-constant)); +$prettylights-syntax-entity: rgb(var(--color-prettylights-syntax-entity)); +$prettylights-syntax-storage-modifier-import: rgb( + var(--color-prettylights-syntax-storage-modifier-import) +); +$prettylights-syntax-entity-tag: rgb( + var(--color-prettylights-syntax-entity-tag) +); +$prettylights-syntax-keyword: rgb(var(--color-prettylights-syntax-keyword)); +$prettylights-syntax-string: rgb(var(--color-prettylights-syntax-string)); +$prettylights-syntax-variable: rgb(var(--color-prettylights-syntax-variable)); +$prettylights-syntax-brackethighlighter-unmatched: rgb( + var(--color-prettylights-syntax-brackethighlighter-unmatched) +); +$prettylights-syntax-invalid-illegal-text: rgb( + var(--color-prettylights-syntax-invalid-illegal-text) +); +$prettylights-syntax-invalid-illegal-bg: rgb( + var(--color-prettylights-syntax-invalid-illegal-bg) +); +$prettylights-syntax-carriage-return-text: rgb( + var(--color-prettylights-syntax-carriage-return-text) +); +$prettylights-syntax-carriage-return-bg: rgb( + var(--color-prettylights-syntax-carriage-return-bg) +); +$prettylights-syntax-string-regexp: rgb( + var(--color-prettylights-syntax-string-regexp) +); +$prettylights-syntax-markup-list: rgb( + var(--color-prettylights-syntax-markup-list) +); +$prettylights-syntax-markup-heading: rgb( + var(--color-prettylights-syntax-markup-heading) +); +$prettylights-syntax-markup-italic: rgb( + var(--color-prettylights-syntax-markup-italic) +); +$prettylights-syntax-markup-bold: rgb( + var(--color-prettylights-syntax-markup-bold) +); +$prettylights-syntax-markup-deleted-text: rgb( + var(--color-prettylights-syntax-markup-deleted-text) +); +$prettylights-syntax-markup-deleted-bg: rgb( + var(--color-prettylights-syntax-markup-deleted-bg) +); +$prettylights-syntax-markup-inserted-text: rgb( + var(--color-prettylights-syntax-markup-inserted-text) +); +$prettylights-syntax-markup-inserted-bg: rgb( + var(--color-prettylights-syntax-markup-inserted-bg) +); +$prettylights-syntax-markup-changed-text: rgb( + var(--color-prettylights-syntax-markup-changed-text) +); +$prettylights-syntax-markup-changed-bg: rgb( + var(--color-prettylights-syntax-markup-changed-bg) +); +$prettylights-syntax-markup-ignored-text: rgb( + var(--color-prettylights-syntax-markup-ignored-text) +); +$prettylights-syntax-markup-ignored-bg: rgb( + var(--color-prettylights-syntax-markup-ignored-bg) +); +$prettylights-syntax-meta-diff-range: rgb( + var(--color-prettylights-syntax-meta-diff-range) +); +$prettylights-syntax-brackethighlighter-angle: rgb( + var(--color-prettylights-syntax-brackethighlighter-angle) +); +$prettylights-syntax-sublimelinter-gutter-mark: rgb( + var(--color-prettylights-syntax-sublimelinter-gutter-mark) +); +$prettylights-syntax-constant-other-reference-link: rgb( + var(--color-prettylights-syntax-constant-other-reference-link) +); +$codemirror-text: rgb(var(--color-codemirror-text)); +$codemirror-bg: rgb(var(--color-codemirror-bg)); +$codemirror-gutters-bg: rgb(var(--color-codemirror-gutters-bg)); +$codemirror-guttermarker-text: rgb(var(--color-codemirror-guttermarker-text)); +$codemirror-guttermarker-subtle-text: rgb( + var(--color-codemirror-guttermarker-subtle-text) +); +$codemirror-linenumber-text: rgb(var(--color-codemirror-linenumber-text)); +$codemirror-cursor: rgb(var(--color-codemirror-cursor)); +$codemirror-selection-bg: rgb(var(--color-codemirror-selection-bg)); +$codemirror-activeline-bg: rgb(var(--color-codemirror-activeline-bg)); +$codemirror-matchingbracket-text: rgb( + var(--color-codemirror-matchingbracket-text) +); +$codemirror-lines-bg: rgb(var(--color-codemirror-lines-bg)); +$codemirror-syntax-comment: rgb(var(--color-codemirror-syntax-comment)); +$codemirror-syntax-constant: rgb(var(--color-codemirror-syntax-constant)); +$codemirror-syntax-entity: rgb(var(--color-codemirror-syntax-entity)); +$codemirror-syntax-keyword: rgb(var(--color-codemirror-syntax-keyword)); +$codemirror-syntax-storage: rgb(var(--color-codemirror-syntax-storage)); +$codemirror-syntax-string: rgb(var(--color-codemirror-syntax-string)); +$codemirror-syntax-support: rgb(var(--color-codemirror-syntax-support)); +$codemirror-syntax-variable: rgb(var(--color-codemirror-syntax-variable)); +$checks-bg: rgb(var(--color-checks-bg)); +$checks-run-border-width: rgb(var(--color-checks-run-border-width)); +$checks-container-border-width: rgb(var(--color-checks-container-border-width)); +$checks-text-primary: rgb(var(--color-checks-text-primary)); +$checks-text-secondary: rgb(var(--color-checks-text-secondary)); +$checks-text-link: rgb(var(--color-checks-text-link)); +$checks-btn-icon: rgb(var(--color-checks-btn-icon)); +$checks-btn-hover-icon: rgb(var(--color-checks-btn-hover-icon)); +$checks-btn-hover-bg: rgb(var(--color-checks-btn-hover-bg)); +$checks-input-text: rgb(var(--color-checks-input-text)); +$checks-input-placeholder-text: rgb(var(--color-checks-input-placeholder-text)); +$checks-input-focus-text: rgb(var(--color-checks-input-focus-text)); +$checks-input-bg: rgb(var(--color-checks-input-bg)); +$checks-donut-error: rgb(var(--color-checks-donut-error)); +$checks-donut-pending: rgb(var(--color-checks-donut-pending)); +$checks-donut-success: rgb(var(--color-checks-donut-success)); +$checks-donut-neutral: rgb(var(--color-checks-donut-neutral)); +$checks-dropdown-text: rgb(var(--color-checks-dropdown-text)); +$checks-dropdown-bg: rgb(var(--color-checks-dropdown-bg)); +$checks-dropdown-border: rgb(var(--color-checks-dropdown-border)); +$checks-dropdown-shadow: rgb(var(--color-checks-dropdown-shadow)); +$checks-dropdown-hover-text: rgb(var(--color-checks-dropdown-hover-text)); +$checks-dropdown-hover-bg: rgb(var(--color-checks-dropdown-hover-bg)); +$checks-dropdown-btn-hover-text: rgb( + var(--color-checks-dropdown-btn-hover-text) +); +$checks-dropdown-btn-hover-bg: rgb(var(--color-checks-dropdown-btn-hover-bg)); +$checks-scrollbar-thumb-bg: rgb(var(--color-checks-scrollbar-thumb-bg)); +$checks-header-label-text: rgb(var(--color-checks-header-label-text)); +$checks-header-label-open-text: rgb(var(--color-checks-header-label-open-text)); +$checks-header-border: rgb(var(--color-checks-header-border)); +$checks-header-icon: rgb(var(--color-checks-header-icon)); +$checks-line-text: rgb(var(--color-checks-line-text)); +$checks-line-num-text: rgb(var(--color-checks-line-num-text)); +$checks-line-timestamp-text: rgb(var(--color-checks-line-timestamp-text)); +$checks-line-hover-bg: rgb(var(--color-checks-line-hover-bg)); +$checks-line-selected-bg: rgb(var(--color-checks-line-selected-bg)); +$checks-line-selected-num-text: rgb(var(--color-checks-line-selected-num-text)); +$checks-line-dt-fm-text: rgb(var(--color-checks-line-dt-fm-text)); +$checks-line-dt-fm-bg: rgb(var(--color-checks-line-dt-fm-bg)); +$checks-gate-bg: rgb(var(--color-checks-gate-bg)); +$checks-gate-text: rgb(var(--color-checks-gate-text)); +$checks-gate-waiting-text: rgb(var(--color-checks-gate-waiting-text)); +$checks-step-header-open-bg: rgb(var(--color-checks-step-header-open-bg)); +$checks-step-error-text: rgb(var(--color-checks-step-error-text)); +$checks-step-warning-text: rgb(var(--color-checks-step-warning-text)); +$checks-logline-text: rgb(var(--color-checks-logline-text)); +$checks-logline-num-text: rgb(var(--color-checks-logline-num-text)); +$checks-logline-debug-text: rgb(var(--color-checks-logline-debug-text)); +$checks-logline-error-text: rgb(var(--color-checks-logline-error-text)); +$checks-logline-error-num-text: rgb(var(--color-checks-logline-error-num-text)); +$checks-logline-error-bg: rgb(var(--color-checks-logline-error-bg)); +$checks-logline-warning-text: rgb(var(--color-checks-logline-warning-text)); +$checks-logline-warning-num-text: rgb( + var(--color-checks-logline-warning-num-text) +); +$checks-logline-warning-bg: rgb(var(--color-checks-logline-warning-bg)); +$checks-logline-command-text: rgb(var(--color-checks-logline-command-text)); +$checks-logline-section-text: rgb(var(--color-checks-logline-section-text)); +$checks-ansi-black: rgb(var(--color-checks-ansi-black)); +$checks-ansi-black-bright: rgb(var(--color-checks-ansi-black-bright)); +$checks-ansi-white: rgb(var(--color-checks-ansi-white)); +$checks-ansi-white-bright: rgb(var(--color-checks-ansi-white-bright)); +$checks-ansi-gray: rgb(var(--color-checks-ansi-gray)); +$checks-ansi-red: rgb(var(--color-checks-ansi-red)); +$checks-ansi-red-bright: rgb(var(--color-checks-ansi-red-bright)); +$checks-ansi-green: rgb(var(--color-checks-ansi-green)); +$checks-ansi-green-bright: rgb(var(--color-checks-ansi-green-bright)); +$checks-ansi-yellow: rgb(var(--color-checks-ansi-yellow)); +$checks-ansi-yellow-bright: rgb(var(--color-checks-ansi-yellow-bright)); +$checks-ansi-blue: rgb(var(--color-checks-ansi-blue)); +$checks-ansi-blue-bright: rgb(var(--color-checks-ansi-blue-bright)); +$checks-ansi-magenta: rgb(var(--color-checks-ansi-magenta)); +$checks-ansi-magenta-bright: rgb(var(--color-checks-ansi-magenta-bright)); +$checks-ansi-cyan: rgb(var(--color-checks-ansi-cyan)); +$checks-ansi-cyan-bright: rgb(var(--color-checks-ansi-cyan-bright)); +$project-header-bg: rgb(var(--color-project-header-bg)); +$project-sidebar-bg: rgb(var(--color-project-sidebar-bg)); +$project-gradient-in: rgb(var(--color-project-gradient-in)); +$project-gradient-out: rgb(var(--color-project-gradient-out)); +$mktg-btn-bg: rgb(var(--color-mktg-btn-bg)); +$mktg-btn-shadow-outline: rgb(var(--color-mktg-btn-shadow-outline)); +$mktg-btn-shadow-focus: rgb(var(--color-mktg-btn-shadow-focus)); +$mktg-btn-shadow-hover: rgb(var(--color-mktg-btn-shadow-hover)); +$mktg-btn-shadow-hover-muted: rgb(var(--color-mktg-btn-shadow-hover-muted)); +$avatar-bg: rgb(var(--color-avatar-bg)); +$avatar-border: rgb(var(--color-avatar-border)); +$avatar-stack-fade: rgb(var(--color-avatar-stack-fade)); +$avatar-stack-fade-more: rgb(var(--color-avatar-stack-fade-more)); +$avatar-child-shadow: rgb(var(--color-avatar-child-shadow)); +$topic-tag-border: rgb(var(--color-topic-tag-border)); +$counter-border: rgb(var(--color-counter-border)); +$select-menu-backdrop-border: rgb(var(--color-select-menu-backdrop-border)); +$select-menu-tap-highlight: rgb(var(--color-select-menu-tap-highlight)); +$select-menu-tap-focus-bg: rgb(var(--color-select-menu-tap-focus-bg)); +$overlay-shadow: rgb(var(--color-overlay-shadow)); +$header-text: rgb(var(--color-header-text)); +$header-bg: rgb(var(--color-header-bg)); +$header-divider: rgb(var(--color-header-divider)); +$header-logo: rgb(var(--color-header-logo)); +$header-search-bg: rgb(var(--color-header-search-bg)); +$header-search-border: rgb(var(--color-header-search-border)); +$sidenav-selected-bg: rgb(var(--color-sidenav-selected-bg)); +$menu-bg-active: rgb(var(--color-menu-bg-active)); +$input-disabled-bg: rgb(var(--color-input-disabled-bg)); +$timeline-badge-bg: rgb(var(--color-timeline-badge-bg)); +$ansi-black: rgb(var(--color-ansi-black)); +$ansi-black-bright: rgb(var(--color-ansi-black-bright)); +$ansi-white: rgb(var(--color-ansi-white)); +$ansi-white-bright: rgb(var(--color-ansi-white-bright)); +$ansi-gray: rgb(var(--color-ansi-gray)); +$ansi-red: rgb(var(--color-ansi-red)); +$ansi-red-bright: rgb(var(--color-ansi-red-bright)); +$ansi-green: rgb(var(--color-ansi-green)); +$ansi-green-bright: rgb(var(--color-ansi-green-bright)); +$ansi-yellow: rgb(var(--color-ansi-yellow)); +$ansi-yellow-bright: rgb(var(--color-ansi-yellow-bright)); +$ansi-blue: rgb(var(--color-ansi-blue)); +$ansi-blue-bright: rgb(var(--color-ansi-blue-bright)); +$ansi-magenta: rgb(var(--color-ansi-magenta)); +$ansi-magenta-bright: rgb(var(--color-ansi-magenta-bright)); +$ansi-cyan: rgb(var(--color-ansi-cyan)); +$ansi-cyan-bright: rgb(var(--color-ansi-cyan-bright)); +$btn-text: rgb(var(--color-btn-text)); +$btn-bg: rgb(var(--color-btn-bg)); +$btn-border: rgb(var(--color-btn-border)); +$btn-shadow: rgb(var(--color-btn-shadow)); +$btn-inset-shadow: rgb(var(--color-btn-inset-shadow)); +$btn-hover-bg: rgb(var(--color-btn-hover-bg)); +$btn-hover-border: rgb(var(--color-btn-hover-border)); +$btn-active-bg: rgb(var(--color-btn-active-bg)); +$btn-active-border: rgb(var(--color-btn-active-border)); +$btn-selected-bg: rgb(var(--color-btn-selected-bg)); +$btn-focus-bg: rgb(var(--color-btn-focus-bg)); +$btn-focus-border: rgb(var(--color-btn-focus-border)); +$btn-focus-shadow: rgb(var(--color-btn-focus-shadow)); +$btn-shadow-active: rgb(var(--color-btn-shadow-active)); +$btn-shadow-input-focus: rgb(var(--color-btn-shadow-input-focus)); +$btn-counter-bg: rgb(var(--color-btn-counter-bg)); +$btn-primary-text: rgb(var(--color-btn-primary-text)); +$btn-primary-bg: rgb(var(--color-btn-primary-bg)); +$btn-primary-border: rgb(var(--color-btn-primary-border)); +$btn-primary-shadow: rgb(var(--color-btn-primary-shadow)); +$btn-primary-inset-shadow: rgb(var(--color-btn-primary-inset-shadow)); +$btn-primary-hover-bg: rgb(var(--color-btn-primary-hover-bg)); +$btn-primary-hover-border: rgb(var(--color-btn-primary-hover-border)); +$btn-primary-selected-bg: rgb(var(--color-btn-primary-selected-bg)); +$btn-primary-selected-shadow: rgb(var(--color-btn-primary-selected-shadow)); +$btn-primary-disabled-text: rgb(var(--color-btn-primary-disabled-text)); +$btn-primary-disabled-bg: rgb(var(--color-btn-primary-disabled-bg)); +$btn-primary-disabled-border: rgb(var(--color-btn-primary-disabled-border)); +$btn-primary-focus-bg: rgb(var(--color-btn-primary-focus-bg)); +$btn-primary-focus-border: rgb(var(--color-btn-primary-focus-border)); +$btn-primary-focus-shadow: rgb(var(--color-btn-primary-focus-shadow)); +$btn-primary-icon: rgb(var(--color-btn-primary-icon)); +$btn-primary-counter-bg: rgb(var(--color-btn-primary-counter-bg)); +$btn-outline-text: rgb(var(--color-btn-outline-text)); +$btn-outline-hover-text: rgb(var(--color-btn-outline-hover-text)); +$btn-outline-hover-bg: rgb(var(--color-btn-outline-hover-bg)); +$btn-outline-hover-border: rgb(var(--color-btn-outline-hover-border)); +$btn-outline-hover-shadow: rgb(var(--color-btn-outline-hover-shadow)); +$btn-outline-hover-inset-shadow: rgb( + var(--color-btn-outline-hover-inset-shadow) +); +$btn-outline-hover-counter-bg: rgb(var(--color-btn-outline-hover-counter-bg)); +$btn-outline-selected-text: rgb(var(--color-btn-outline-selected-text)); +$btn-outline-selected-bg: rgb(var(--color-btn-outline-selected-bg)); +$btn-outline-selected-border: rgb(var(--color-btn-outline-selected-border)); +$btn-outline-selected-shadow: rgb(var(--color-btn-outline-selected-shadow)); +$btn-outline-disabled-text: rgb(var(--color-btn-outline-disabled-text)); +$btn-outline-disabled-bg: rgb(var(--color-btn-outline-disabled-bg)); +$btn-outline-disabled-counter-bg: rgb( + var(--color-btn-outline-disabled-counter-bg) +); +$btn-outline-focus-border: rgb(var(--color-btn-outline-focus-border)); +$btn-outline-focus-shadow: rgb(var(--color-btn-outline-focus-shadow)); +$btn-outline-counter-bg: rgb(var(--color-btn-outline-counter-bg)); +$btn-danger-text: rgb(var(--color-btn-danger-text)); +$btn-danger-hover-text: rgb(var(--color-btn-danger-hover-text)); +$btn-danger-hover-bg: rgb(var(--color-btn-danger-hover-bg)); +$btn-danger-hover-border: rgb(var(--color-btn-danger-hover-border)); +$btn-danger-hover-shadow: rgb(var(--color-btn-danger-hover-shadow)); +$btn-danger-hover-inset-shadow: rgb(var(--color-btn-danger-hover-inset-shadow)); +$btn-danger-hover-icon: rgb(var(--color-btn-danger-hover-icon)); +$btn-danger-hover-counter-bg: rgb(var(--color-btn-danger-hover-counter-bg)); +$btn-danger-selected-text: rgb(var(--color-btn-danger-selected-text)); +$btn-danger-selected-bg: rgb(var(--color-btn-danger-selected-bg)); +$btn-danger-selected-border: rgb(var(--color-btn-danger-selected-border)); +$btn-danger-selected-shadow: rgb(var(--color-btn-danger-selected-shadow)); +$btn-danger-disabled-text: rgb(var(--color-btn-danger-disabled-text)); +$btn-danger-disabled-bg: rgb(var(--color-btn-danger-disabled-bg)); +$btn-danger-disabled-counter-bg: rgb( + var(--color-btn-danger-disabled-counter-bg) +); +$btn-danger-focus-border: rgb(var(--color-btn-danger-focus-border)); +$btn-danger-focus-shadow: rgb(var(--color-btn-danger-focus-shadow)); +$btn-danger-counter-bg: rgb(var(--color-btn-danger-counter-bg)); +$btn-danger-icon: rgb(var(--color-btn-danger-icon)); +$underlinenav-icon: rgb(var(--color-underlinenav-icon)); +$underlinenav-border-hover: rgb(var(--color-underlinenav-border-hover)); +$action-list-item-inline-divider: rgb( + var(--color-action-list-item-inline-divider) +); +$action-list-item-default-hover-bg: rgb( + var(--color-action-list-item-default-hover-bg) +); +$action-list-item-default-active-bg: rgb( + var(--color-action-list-item-default-active-bg) +); +$action-list-item-default-selected-bg: rgb( + var(--color-action-list-item-default-selected-bg) +); +$action-list-item-danger-hover-bg: rgb( + var(--color-action-list-item-danger-hover-bg) +); +$action-list-item-danger-active-bg: rgb( + var(--color-action-list-item-danger-active-bg) +); +$action-list-item-danger-hover-text: rgb( + var(--color-action-list-item-danger-hover-text) +); +$fg-default: rgb(var(--color-fg-default)); +$fg-muted: rgb(var(--color-fg-muted)); +$fg-subtle: rgb(var(--color-fg-subtle)); +$fg-on-emphasis: rgb(var(--color-fg-on-emphasis)); +$canvas-default: rgb(var(--color-canvas-default)); +$canvas-overlay: rgb(var(--color-canvas-overlay)); +$canvas-inset: rgb(var(--color-canvas-inset)); +$canvas-subtle: rgb(var(--color-canvas-subtle)); +$border-default: rgb(var(--color-border-default)); +$border-muted: rgb(var(--color-border-muted)); +$border-subtle: rgb(var(--color-border-subtle)); +$shadow-small: rgb(var(--color-shadow-small)); +$shadow-medium: rgb(var(--color-shadow-medium)); +$shadow-large: rgb(var(--color-shadow-large)); +$shadow-extra-large: rgb(var(--color-shadow-extra-large)); +$neutral-emphasis-plus: rgb(var(--color-neutral-emphasis-plus)); +$neutral-emphasis: rgb(var(--color-neutral-emphasis)); +$neutral-muted: rgb(var(--color-neutral-muted)); +$neutral-subtle: rgb(var(--color-neutral-subtle)); +$accent-fg: rgb(var(--color-accent-fg)); +$accent-emphasis: rgb(var(--color-accent-emphasis)); +$accent-muted: rgb(var(--color-accent-muted)); +$accent-subtle: rgb(var(--color-accent-subtle)); +$success-fg: rgb(var(--color-success-fg)); +$success-emphasis: rgb(var(--color-success-emphasis)); +$success-muted: rgb(var(--color-success-muted)); +$success-subtle: rgb(var(--color-success-subtle)); +$attention-fg: rgb(var(--color-attention-fg)); +$attention-emphasis: rgb(var(--color-attention-emphasis)); +$attention-muted: rgb(var(--color-attention-muted)); +$attention-subtle: rgb(var(--color-attention-subtle)); +$severe-fg: rgb(var(--color-severe-fg)); +$severe-emphasis: rgb(var(--color-severe-emphasis)); +$severe-muted: rgb(var(--color-severe-muted)); +$severe-subtle: rgb(var(--color-severe-subtle)); +$danger-fg: rgb(var(--color-danger-fg)); +$danger-emphasis: rgb(var(--color-danger-emphasis)); +$danger-muted: rgb(var(--color-danger-muted)); +$danger-subtle: rgb(var(--color-danger-subtle)); +$done-fg: rgb(var(--color-done-fg)); +$done-emphasis: rgb(var(--color-done-emphasis)); +$done-muted: rgb(var(--color-done-muted)); +$done-subtle: rgb(var(--color-done-subtle)); +$sponsors-fg: rgb(var(--color-sponsors-fg)); +$sponsors-emphasis: rgb(var(--color-sponsors-emphasis)); +$sponsors-muted: rgb(var(--color-sponsors-muted)); +$sponsors-subtle: rgb(var(--color-sponsors-subtle)); +$primer-fg-disabled: rgb(var(--color-primer-fg-disabled)); +$primer-canvas-backdrop: rgb(var(--color-primer-canvas-backdrop)); +$primer-canvas-sticky: rgb(var(--color-primer-canvas-sticky)); +$primer-border-active: rgb(var(--color-primer-border-active)); +$primer-border-contrast: rgb(var(--color-primer-border-contrast)); +$primer-shadow-highlight: rgb(var(--color-primer-shadow-highlight)); +$primer-shadow-inset: rgb(var(--color-primer-shadow-inset)); +$primer-shadow-focus: rgb(var(--color-primer-shadow-focus)); +$scale-black: rgb(var(--color-scale-black)); +$scale-white: rgb(var(--color-scale-white)); +$scale-gray-0: rgb(var(--color-scale-gray-0)); +$scale-gray-1: rgb(var(--color-scale-gray-1)); +$scale-gray-2: rgb(var(--color-scale-gray-2)); +$scale-gray-3: rgb(var(--color-scale-gray-3)); +$scale-gray-4: rgb(var(--color-scale-gray-4)); +$scale-gray-5: rgb(var(--color-scale-gray-5)); +$scale-gray-6: rgb(var(--color-scale-gray-6)); +$scale-gray-7: rgb(var(--color-scale-gray-7)); +$scale-gray-8: rgb(var(--color-scale-gray-8)); +$scale-gray-9: rgb(var(--color-scale-gray-9)); +$scale-blue-0: rgb(var(--color-scale-blue-0)); +$scale-blue-1: rgb(var(--color-scale-blue-1)); +$scale-blue-2: rgb(var(--color-scale-blue-2)); +$scale-blue-3: rgb(var(--color-scale-blue-3)); +$scale-blue-4: rgb(var(--color-scale-blue-4)); +$scale-blue-5: rgb(var(--color-scale-blue-5)); +$scale-blue-6: rgb(var(--color-scale-blue-6)); +$scale-blue-7: rgb(var(--color-scale-blue-7)); +$scale-blue-8: rgb(var(--color-scale-blue-8)); +$scale-blue-9: rgb(var(--color-scale-blue-9)); +$scale-green-0: rgb(var(--color-scale-green-0)); +$scale-green-1: rgb(var(--color-scale-green-1)); +$scale-green-2: rgb(var(--color-scale-green-2)); +$scale-green-3: rgb(var(--color-scale-green-3)); +$scale-green-4: rgb(var(--color-scale-green-4)); +$scale-green-5: rgb(var(--color-scale-green-5)); +$scale-green-6: rgb(var(--color-scale-green-6)); +$scale-green-7: rgb(var(--color-scale-green-7)); +$scale-green-8: rgb(var(--color-scale-green-8)); +$scale-green-9: rgb(var(--color-scale-green-9)); +$scale-yellow-0: rgb(var(--color-scale-yellow-0)); +$scale-yellow-1: rgb(var(--color-scale-yellow-1)); +$scale-yellow-2: rgb(var(--color-scale-yellow-2)); +$scale-yellow-3: rgb(var(--color-scale-yellow-3)); +$scale-yellow-4: rgb(var(--color-scale-yellow-4)); +$scale-yellow-5: rgb(var(--color-scale-yellow-5)); +$scale-yellow-6: rgb(var(--color-scale-yellow-6)); +$scale-yellow-7: rgb(var(--color-scale-yellow-7)); +$scale-yellow-8: rgb(var(--color-scale-yellow-8)); +$scale-yellow-9: rgb(var(--color-scale-yellow-9)); +$scale-orange-0: rgb(var(--color-scale-orange-0)); +$scale-orange-1: rgb(var(--color-scale-orange-1)); +$scale-orange-2: rgb(var(--color-scale-orange-2)); +$scale-orange-3: rgb(var(--color-scale-orange-3)); +$scale-orange-4: rgb(var(--color-scale-orange-4)); +$scale-orange-5: rgb(var(--color-scale-orange-5)); +$scale-orange-6: rgb(var(--color-scale-orange-6)); +$scale-orange-7: rgb(var(--color-scale-orange-7)); +$scale-orange-8: rgb(var(--color-scale-orange-8)); +$scale-orange-9: rgb(var(--color-scale-orange-9)); +$scale-red-0: rgb(var(--color-scale-red-0)); +$scale-red-1: rgb(var(--color-scale-red-1)); +$scale-red-2: rgb(var(--color-scale-red-2)); +$scale-red-3: rgb(var(--color-scale-red-3)); +$scale-red-4: rgb(var(--color-scale-red-4)); +$scale-red-5: rgb(var(--color-scale-red-5)); +$scale-red-6: rgb(var(--color-scale-red-6)); +$scale-red-7: rgb(var(--color-scale-red-7)); +$scale-red-8: rgb(var(--color-scale-red-8)); +$scale-red-9: rgb(var(--color-scale-red-9)); +$scale-purple-0: rgb(var(--color-scale-purple-0)); +$scale-purple-1: rgb(var(--color-scale-purple-1)); +$scale-purple-2: rgb(var(--color-scale-purple-2)); +$scale-purple-3: rgb(var(--color-scale-purple-3)); +$scale-purple-4: rgb(var(--color-scale-purple-4)); +$scale-purple-5: rgb(var(--color-scale-purple-5)); +$scale-purple-6: rgb(var(--color-scale-purple-6)); +$scale-purple-7: rgb(var(--color-scale-purple-7)); +$scale-purple-8: rgb(var(--color-scale-purple-8)); +$scale-purple-9: rgb(var(--color-scale-purple-9)); +$scale-pink-0: rgb(var(--color-scale-pink-0)); +$scale-pink-1: rgb(var(--color-scale-pink-1)); +$scale-pink-2: rgb(var(--color-scale-pink-2)); +$scale-pink-3: rgb(var(--color-scale-pink-3)); +$scale-pink-4: rgb(var(--color-scale-pink-4)); +$scale-pink-5: rgb(var(--color-scale-pink-5)); +$scale-pink-6: rgb(var(--color-scale-pink-6)); +$scale-pink-7: rgb(var(--color-scale-pink-7)); +$scale-pink-8: rgb(var(--color-scale-pink-8)); +$scale-pink-9: rgb(var(--color-scale-pink-9)); +$scale-coral-0: rgb(var(--color-scale-coral-0)); +$scale-coral-1: rgb(var(--color-scale-coral-1)); +$scale-coral-2: rgb(var(--color-scale-coral-2)); +$scale-coral-3: rgb(var(--color-scale-coral-3)); +$scale-coral-4: rgb(var(--color-scale-coral-4)); +$scale-coral-5: rgb(var(--color-scale-coral-5)); +$scale-coral-6: rgb(var(--color-scale-coral-6)); +$scale-coral-7: rgb(var(--color-scale-coral-7)); +$scale-coral-8: rgb(var(--color-scale-coral-8)); +$scale-coral-9: rgb(var(--color-scale-coral-9)); diff --git a/packages/@som/blog/client/assets/scss/global.scss b/packages/@som/blog/client/assets/scss/global.scss index 56f59009..1d0655c5 100644 --- a/packages/@som/blog/client/assets/scss/global.scss +++ b/packages/@som/blog/client/assets/scss/global.scss @@ -1,14 +1,72 @@ +@use './constants.scss' as C; +@use './util.scss' as Util; +@use './theme/light.scss' as Light; +// @use '../font/index.scss' as *; +@import '../font/index.scss'; +// @import './theme.scss'; +@import './prose.scss'; + + +:root { + @each $var, $color in C.$root-vars { + #{$var}: Util.getRgbaString($color); + } +} + +[data-color-mode='light'] { + @each $var, $color in Light.$light-vars { + #{$var}: Util.getRgbaString($color); + } +} +body, html { - cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABFklEQVRYR9WXURLDIAhE6/0PbSdOtUpcd1Gnpv1KGpTHBpCE1/cXq+vrMph7dGvXZTtpfW10DCA5jrH1H0Jhs5E0hnZdCR+vb5S8Nn8mQCeS9BdSalYJqMBjAGzq59xAESN7VFVUgV8AZB/dZBR7QTFDCqGquvUBVVoEtgIwpQRzmANSFHgWQKExHdIrPeuMvQNDarXe6nC/AutgV3JW+6bgqQLeV8FekRtgV+ToDKEKnACYKsfZjjkam7a0ZpYTytwmgainpC3HvwBocgKOxqRjehoR9DFKNFYtOwCGYCszobeCbl26N6yyQ6g8X/Wex/rBPsNEV6qAMaJPMynIHQCoSqS9JSMmwef51LflTgCRszU7DvAGiV6mHWfsaVUAAAAASUVORK5CYII=), - auto; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, - sans-serif, Apple Color Emoji, Segoe UI Emoji; + transition: background-color 0.3s ease; } -a, -button { - cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) - 14 0, - pointer; +@mixin better-scrollbar { + // 滚动条高宽及背景 + &::-webkit-scrollbar { + width: 12px; + } + // 滚动条上的滚动滑块 + &::-webkit-scrollbar-thumb { + @apply bg-header-bg; + } + + // 滚动条轨道 + // &::-webkit-scrollbar-track { + // // background: linear-gradient(90deg, #434343, #434343 1 px, #111 0, #111); + // } } -@import './prose.scss'; +.better-scroll-bar { + @include better-scrollbar; +} + +.hover-scroll-bar { + &::-webkit-scrollbar { + width: 12px; + } + &::-webkit-scrollbar-thumb { + @apply transition-colors; + } + &:hover { + &::-webkit-scrollbar-thumb { + @apply bg-header-bg; + } + } + // 滚动条上的滚动滑块 +} + +[data-color-mode='light'] { + .hover-scroll-bar { + &:hover { + &::-webkit-scrollbar-thumb { + @apply bg-border-muted; + } + } + // 滚动条上的滚动滑块 + } +} +html { + @include better-scrollbar; +} diff --git a/packages/@som/blog/client/api/index.js b/packages/@som/blog/client/assets/scss/index.scss similarity index 100% rename from packages/@som/blog/client/api/index.js rename to packages/@som/blog/client/assets/scss/index.scss diff --git a/packages/@som/blog/client/assets/scss/tailwind.scss b/packages/@som/blog/client/assets/scss/tailwind.scss new file mode 100644 index 00000000..4a7d7d42 --- /dev/null +++ b/packages/@som/blog/client/assets/scss/tailwind.scss @@ -0,0 +1,6 @@ +@import 'tailwindcss/base'; +@import './custom/base-styles.scss'; +@import 'tailwindcss/components'; +@import './custom/components.scss'; +@import 'tailwindcss/utilities'; +@import './custom/utilities.scss'; diff --git a/packages/@som/blog/client/assets/scss/theme.scss b/packages/@som/blog/client/assets/scss/theme.scss new file mode 100644 index 00000000..b7652b6b --- /dev/null +++ b/packages/@som/blog/client/assets/scss/theme.scss @@ -0,0 +1,47 @@ +[data-color-mode='light'][data-light-theme*='dark'], +[data-color-mode='dark'][data-dark-theme*='dark'] { + --color-workflow-card-connector: var(--color-scale-gray-5); + --color-workflow-card-connector-bg: var(--color-scale-gray-5); + --color-workflow-card-connector-inactive: var(--color-border-default); + --color-workflow-card-connector-inactive-bg: var(--color-border-default); + --color-workflow-card-connector-highlight: var(--color-scale-blue-5); + --color-workflow-card-connector-highlight-bg: var(--color-scale-blue-5); + --color-workflow-card-bg: var(--color-scale-gray-7); + --color-workflow-card-inactive-bg: var(--color-canvas-inset); + --color-workflow-card-header-shadow: rgba(27, 31, 35, 0.04); + --color-workflow-card-progress-complete-bg: var(--color-scale-blue-5); + --color-workflow-card-progress-incomplete-bg: var(--color-scale-gray-6); + --color-discussions-state-answered-icon: var(--color-scale-green-3); + --color-bg-discussions-row-emoji-box: var(--color-scale-gray-6); + --color-notifications-button-text: var(--color-scale-white); + --color-notifications-button-hover-text: var(--color-scale-white); + --color-notifications-button-hover-bg: var(--color-scale-blue-4); + --color-notifications-row-read-bg: var(--color-canvas-default); + --color-notifications-row-bg: var(--color-canvas-subtle); + --color-icon-directory: var(--color-fg-muted); + --color-checks-step-error-icon: var(--color-scale-red-4); + --color-calendar-halloween-graph-day-L1-bg: #631c03; + --color-calendar-halloween-graph-day-L2-bg: #bd561d; + --color-calendar-halloween-graph-day-L3-bg: #fa7a18; + --color-calendar-halloween-graph-day-L4-bg: #fddf68; + --color-calendar-graph-day-bg: var(--color-scale-gray-8); + --color-calendar-graph-day-border: rgba(27, 31, 35, 0.06); + --color-calendar-graph-day-L1-bg: #0e4429; + --color-calendar-graph-day-L2-bg: #006d32; + --color-calendar-graph-day-L3-bg: #26a641; + --color-calendar-graph-day-L4-bg: #39d353; + --color-calendar-graph-day-L1-border: rgba(255, 255, 255, 0.05); + --color-calendar-graph-day-L2-border: rgba(255, 255, 255, 0.05); + --color-calendar-graph-day-L3-border: rgba(255, 255, 255, 0.05); + --color-calendar-graph-day-L4-border: rgba(255, 255, 255, 0.05); + --color-user-mention-fg: var(--color-scale-yellow-0); + --color-user-mention-bg: var(--color-scale-yellow-8); + --color-text-white: var(--color-scale-white); +} + +[data-color-mode='light'][data-light-theme*='dark'], +[data-color-mode='dark'][data-dark-theme*='dark'] { + --color-social-reaction-bg-hover: var(--color-scale-gray-7); + --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8); +} + diff --git a/packages/@som/blog/client/assets/scss/theme/light.scss b/packages/@som/blog/client/assets/scss/theme/light.scss new file mode 100644 index 00000000..2bd193b8 --- /dev/null +++ b/packages/@som/blog/client/assets/scss/theme/light.scss @@ -0,0 +1,424 @@ +$light-vars: ( + --color-canvas-default-transparent: rgba(255, 255, 255, 0), + --color-page-header-bg: #f6f8fa, + --color-marketing-icon-primary: #218bff, + --color-marketing-icon-secondary: #54aeff, + --color-diff-blob-addition-num-text: #24292f, + --color-diff-blob-addition-fg: #24292f, + --color-diff-blob-addition-num-bg: #ccffd8, + --color-diff-blob-addition-line-bg: #e6ffec, + --color-diff-blob-addition-word-bg: #abf2bc, + --color-diff-blob-deletion-num-text: #24292f, + --color-diff-blob-deletion-fg: #24292f, + --color-diff-blob-deletion-num-bg: #ffd7d5, + --color-diff-blob-deletion-line-bg: #ffebe9, + --color-diff-blob-deletion-word-bg: rgba(255, 129, 130, 0.4), + --color-diff-blob-hunk-num-bg: rgba(84, 174, 255, 0.4), + --color-diff-blob-expander-icon: #57606a, + --color-diff-blob-selected-line-highlight-mix-blend-mode: multiply, + --color-diffstat-deletion-border: rgba(27, 31, 36, 0.15), + --color-diffstat-addition-border: rgba(27, 31, 36, 0.15), + --color-diffstat-addition-bg: #2da44e, + --color-search-keyword-hl: #fff8c5, + --color-prettylights-syntax-comment: #6e7781, + --color-prettylights-syntax-constant: #0550ae, + --color-prettylights-syntax-entity: #8250df, + --color-prettylights-syntax-storage-modifier-import: #24292f, + --color-prettylights-syntax-entity-tag: #116329, + --color-prettylights-syntax-keyword: #cf222e, + --color-prettylights-syntax-string: #0a3069, + --color-prettylights-syntax-variable: #953800, + --color-prettylights-syntax-brackethighlighter-unmatched: #82071e, + --color-prettylights-syntax-invalid-illegal-text: #f6f8fa, + --color-prettylights-syntax-invalid-illegal-bg: #82071e, + --color-prettylights-syntax-carriage-return-text: #f6f8fa, + --color-prettylights-syntax-carriage-return-bg: #cf222e, + --color-prettylights-syntax-string-regexp: #116329, + --color-prettylights-syntax-markup-list: #3b2300, + --color-prettylights-syntax-markup-heading: #0550ae, + --color-prettylights-syntax-markup-italic: #24292f, + --color-prettylights-syntax-markup-bold: #24292f, + --color-prettylights-syntax-markup-deleted-text: #82071e, + --color-prettylights-syntax-markup-deleted-bg: #ffebe9, + --color-prettylights-syntax-markup-inserted-text: #116329, + --color-prettylights-syntax-markup-inserted-bg: #dafbe1, + --color-prettylights-syntax-markup-changed-text: #953800, + --color-prettylights-syntax-markup-changed-bg: #ffd8b5, + --color-prettylights-syntax-markup-ignored-text: #eaeef2, + --color-prettylights-syntax-markup-ignored-bg: #0550ae, + --color-prettylights-syntax-meta-diff-range: #8250df, + --color-prettylights-syntax-brackethighlighter-angle: #57606a, + --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f, + --color-prettylights-syntax-constant-other-reference-link: #0a3069, + --color-codemirror-text: #24292f, + --color-codemirror-bg: #ffffff, + --color-codemirror-gutters-bg: #ffffff, + --color-codemirror-guttermarker-text: #ffffff, + --color-codemirror-guttermarker-subtle-text: #6e7781, + --color-codemirror-linenumber-text: #57606a, + --color-codemirror-cursor: #24292f, + --color-codemirror-selection-bg: rgba(84, 174, 255, 0.4), + --color-codemirror-activeline-bg: rgba(234, 238, 242, 0.5), + --color-codemirror-matchingbracket-text: #24292f, + --color-codemirror-lines-bg: #ffffff, + --color-codemirror-syntax-comment: #24292f, + --color-codemirror-syntax-constant: #0550ae, + --color-codemirror-syntax-entity: #8250df, + --color-codemirror-syntax-keyword: #cf222e, + --color-codemirror-syntax-storage: #cf222e, + --color-codemirror-syntax-string: #0a3069, + --color-codemirror-syntax-support: #0550ae, + --color-codemirror-syntax-variable: #953800, + --color-checks-bg: #24292f, + --color-checks-run-border-width: 0px, + --color-checks-container-border-width: 0px, + --color-checks-text-primary: #f6f8fa, + --color-checks-text-secondary: #8c959f, + --color-checks-text-link: #54aeff, + --color-checks-btn-icon: #afb8c1, + --color-checks-btn-hover-icon: #f6f8fa, + --color-checks-btn-hover-bg: rgba(255, 255, 255, 0.125), + --color-checks-input-text: #eaeef2, + --color-checks-input-placeholder-text: #8c959f, + --color-checks-input-focus-text: #8c959f, + --color-checks-input-bg: #32383f, + --color-checks-input-shadow: none, + --color-checks-donut-error: #fa4549, + --color-checks-donut-pending: #bf8700, + --color-checks-donut-success: #2da44e, + --color-checks-donut-neutral: #afb8c1, + --color-checks-dropdown-text: #afb8c1, + --color-checks-dropdown-bg: #32383f, + --color-checks-dropdown-border: #424a53, + --color-checks-dropdown-shadow: rgba(27, 31, 36, 0.3), + --color-checks-dropdown-hover-text: #f6f8fa, + --color-checks-dropdown-hover-bg: #424a53, + --color-checks-dropdown-btn-hover-text: #f6f8fa, + --color-checks-dropdown-btn-hover-bg: #32383f, + --color-checks-scrollbar-thumb-bg: #57606a, + --color-checks-header-label-text: #d0d7de, + --color-checks-header-label-open-text: #f6f8fa, + --color-checks-header-border: #32383f, + --color-checks-header-icon: #8c959f, + --color-checks-line-text: #d0d7de, + --color-checks-line-num-text: rgba(140, 149, 159, 0.75), + --color-checks-line-timestamp-text: #8c959f, + --color-checks-line-hover-bg: #32383f, + --color-checks-line-selected-bg: rgba(33, 139, 255, 0.15), + --color-checks-line-selected-num-text: #54aeff, + --color-checks-line-dt-fm-text: #24292f, + --color-checks-line-dt-fm-bg: #9a6700, + --color-checks-gate-bg: rgba(125, 78, 0, 0.15), + --color-checks-gate-text: #d0d7de, + --color-checks-gate-waiting-text: #afb8c1, + --color-checks-step-header-open-bg: #32383f, + --color-checks-step-error-text: #ff8182, + --color-checks-step-warning-text: #d4a72c, + --color-checks-logline-text: #8c959f, + --color-checks-logline-num-text: rgba(140, 149, 159, 0.75), + --color-checks-logline-debug-text: #c297ff, + --color-checks-logline-error-text: #d0d7de, + --color-checks-logline-error-num-text: #ff8182, + --color-checks-logline-error-bg: rgba(164, 14, 38, 0.15), + --color-checks-logline-warning-text: #d0d7de, + --color-checks-logline-warning-num-text: #d4a72c, + --color-checks-logline-warning-bg: rgba(125, 78, 0, 0.15), + --color-checks-logline-command-text: #54aeff, + --color-checks-logline-section-text: #4ac26b, + --color-checks-ansi-black: #24292f, + --color-checks-ansi-black-bright: #32383f, + --color-checks-ansi-white: #d0d7de, + --color-checks-ansi-white-bright: #d0d7de, + --color-checks-ansi-gray: #8c959f, + --color-checks-ansi-red: #ff8182, + --color-checks-ansi-red-bright: #ffaba8, + --color-checks-ansi-green: #4ac26b, + --color-checks-ansi-green-bright: #6fdd8b, + --color-checks-ansi-yellow: #d4a72c, + --color-checks-ansi-yellow-bright: #eac54f, + --color-checks-ansi-blue: #54aeff, + --color-checks-ansi-blue-bright: #80ccff, + --color-checks-ansi-magenta: #c297ff, + --color-checks-ansi-magenta-bright: #d8b9ff, + --color-checks-ansi-cyan: #76e3ea, + --color-checks-ansi-cyan-bright: #b3f0ff, + --color-project-header-bg: #24292f, + --color-project-sidebar-bg: #ffffff, + --color-project-gradient-in: #ffffff, + --color-project-gradient-out: rgba(255, 255, 255, 0), + --color-mktg-btn-bg: #1b1f23, + --color-mktg-btn-shadow-outline: rgb(0 0 0 / 15%) 0 0 0 1px inset, + --color-mktg-btn-shadow-focus: rgb(0 0 0 / 15%) 0 0 0 4px, + // --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), + // 0 7px 5px rgba(0, 0, 0, 0.04), + // 0 12px 10px rgba(0, 0, 0, 0.03), + // 0 22px 18px rgba(0, 0, 0, 0.03), + // 0 42px 33px rgba(0, 0, 0, 0.02), + // 0 100px 80px rgba(0, 0, 0, 0.02), + --color-mktg-btn-shadow-hover-muted: rgb(0 0 0 / 70%) 0 0 0 2px inset, + --color-avatar-bg: #ffffff, + --color-avatar-border: rgba(27, 31, 36, 0.15), + --color-avatar-stack-fade: #afb8c1, + --color-avatar-stack-fade-more: #d0d7de, + --color-avatar-child-shadow: -2px -2px 0 rgba(255, 255, 255, 0.8), + --color-topic-tag-border: rgba(0, 0, 0, 0), + --color-counter-border: rgba(0, 0, 0, 0), + --color-select-menu-backdrop-border: rgba(0, 0, 0, 0), + --color-select-menu-tap-highlight: rgba(175, 184, 193, 0.5), + --color-select-menu-tap-focus-bg: #b6e3ff, + // --color-overlay-shadow: 0 1px 3px rgba(27, 31, 36, 0.12), + // 0 8px 24px rgba(66, 74, 83, 0.12), + --color-header-text: rgba(255, 255, 255, 0.7), + --color-header-bg: #24292f, + --color-header-divider: #57606a, + --color-header-logo: #ffffff, + --color-header-search-bg: #24292f, + --color-header-search-border: #57606a, + --color-sidenav-selected-bg: #ffffff, + --color-menu-bg-active: rgba(0, 0, 0, 0), + --color-input-disabled-bg: rgba(175, 184, 193, 0.2), + --color-timeline-badge-bg: #eaeef2, + --color-ansi-black: #24292f, + --color-ansi-black-bright: #57606a, + --color-ansi-white: #6e7781, + --color-ansi-white-bright: #8c959f, + --color-ansi-gray: #6e7781, + --color-ansi-red: #cf222e, + --color-ansi-red-bright: #a40e26, + --color-ansi-green: #116329, + --color-ansi-green-bright: #1a7f37, + --color-ansi-yellow: #4d2d00, + --color-ansi-yellow-bright: #633c01, + --color-ansi-blue: #0969da, + --color-ansi-blue-bright: #218bff, + --color-ansi-magenta: #8250df, + --color-ansi-magenta-bright: #a475f9, + --color-ansi-cyan: #1b7c83, + --color-ansi-cyan-bright: #3192aa, + --color-btn-text: #24292f, + --color-btn-bg: #f6f8fa, + --color-btn-border: rgba(27, 31, 36, 0.15), + --color-btn-shadow: 0 1px 0 rgba(27, 31, 36, 0.04), + --color-btn-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), + --color-btn-hover-bg: #f3f4f6, + --color-btn-hover-border: rgba(27, 31, 36, 0.15), + --color-btn-active-bg: hsla(220, 14%, 93%, 1), + --color-btn-active-border: rgba(27, 31, 36, 0.15), + --color-btn-selected-bg: hsla(220, 14%, 94%, 1), + --color-btn-focus-bg: #f6f8fa, + --color-btn-focus-border: rgba(27, 31, 36, 0.15), + --color-btn-focus-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3), + --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(27, 31, 36, 0.15), + --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(9, 105, 218, 0.3), + --color-btn-counter-bg: rgba(27, 31, 36, 0.08), + --color-btn-primary-text: #ffffff, + --color-btn-primary-bg: #2da44e, + --color-btn-primary-border: rgba(27, 31, 36, 0.15), + --color-btn-primary-shadow: 0 1px 0 rgba(27, 31, 36, 0.1), + --color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), + --color-btn-primary-hover-bg: #2c974b, + --color-btn-primary-hover-border: rgba(27, 31, 36, 0.15), + --color-btn-primary-selected-bg: hsla(137, 55%, 36%, 1), + --color-btn-primary-selected-shadow: inset 0 1px 0 rgba(0, 45, 17, 0.2), + --color-btn-primary-disabled-text: rgba(255, 255, 255, 0.8), + --color-btn-primary-disabled-bg: #94d3a2, + --color-btn-primary-disabled-border: rgba(27, 31, 36, 0.15), + --color-btn-primary-focus-bg: #2da44e, + --color-btn-primary-focus-border: rgba(27, 31, 36, 0.15), + --color-btn-primary-focus-shadow: 0 0 0 3px rgba(45, 164, 78, 0.4), + --color-btn-primary-icon: rgba(255, 255, 255, 0.8), + --color-btn-primary-counter-bg: rgba(255, 255, 255, 0.2), + --color-btn-outline-text: #0969da, + --color-btn-outline-hover-text: #ffffff, + --color-btn-outline-hover-bg: #0969da, + --color-btn-outline-hover-border: rgba(27, 31, 36, 0.15), + --color-btn-outline-hover-shadow: 0 1px 0 rgba(27, 31, 36, 0.1), + --color-btn-outline-hover-inset-shadow: inset 0 1px 0 + rgba(255, 255, 255, 0.03), + --color-btn-outline-hover-counter-bg: rgba(255, 255, 255, 0.2), + --color-btn-outline-selected-text: #ffffff, + --color-btn-outline-selected-bg: hsla(212, 92%, 42%, 1), + --color-btn-outline-selected-border: rgba(27, 31, 36, 0.15), + --color-btn-outline-selected-shadow: inset 0 1px 0 rgba(0, 33, 85, 0.2), + --color-btn-outline-disabled-text: rgba(9, 105, 218, 0.5), + --color-btn-outline-disabled-bg: #f6f8fa, + --color-btn-outline-disabled-counter-bg: rgba(9, 105, 218, 0.05), + --color-btn-outline-focus-border: rgba(27, 31, 36, 0.15), + --color-btn-outline-focus-shadow: 0 0 0 3px rgba(5, 80, 174, 0.4), + --color-btn-outline-counter-bg: rgba(9, 105, 218, 0.1), + --color-btn-danger-text: #cf222e, + --color-btn-danger-hover-text: #ffffff, + --color-btn-danger-hover-bg: #a40e26, + --color-btn-danger-hover-border: rgba(27, 31, 36, 0.15), + --color-btn-danger-hover-shadow: 0 1px 0 rgba(27, 31, 36, 0.1), + --color-btn-danger-hover-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), + --color-btn-danger-hover-counter-bg: rgba(255, 255, 255, 0.2), + --color-btn-danger-selected-text: #ffffff, + --color-btn-danger-selected-bg: hsla(356, 72%, 44%, 1), + --color-btn-danger-selected-border: rgba(27, 31, 36, 0.15), + --color-btn-danger-selected-shadow: inset 0 1px 0 rgba(76, 0, 20, 0.2), + --color-btn-danger-disabled-text: rgba(207, 34, 46, 0.5), + --color-btn-danger-disabled-bg: #f6f8fa, + --color-btn-danger-disabled-counter-bg: rgba(207, 34, 46, 0.05), + --color-btn-danger-focus-border: rgba(27, 31, 36, 0.15), + --color-btn-danger-focus-shadow: 0 0 0 3px rgba(164, 14, 38, 0.4), + --color-btn-danger-counter-bg: rgba(207, 34, 46, 0.1), + --color-btn-danger-icon: #cf222e, + --color-btn-danger-hover-icon: #ffffff, + --color-underlinenav-icon: #6e7781, + --color-underlinenav-border-hover: rgba(175, 184, 193, 0.2), + --color-action-list-item-inline-divider: rgba(208, 215, 222, 0.48), + --color-action-list-item-default-hover-bg: rgba(208, 215, 222, 0.32), + --color-action-list-item-default-active-bg: rgba(208, 215, 222, 0.48), + --color-action-list-item-default-selected-bg: rgba(208, 215, 222, 0.24), + --color-action-list-item-danger-hover-bg: rgba(255, 235, 233, 0.64), + --color-action-list-item-danger-active-bg: #ffebe9, + --color-action-list-item-danger-hover-text: #cf222e, + --color-fg-default: #24292f, + --color-fg-muted: #57606a, + --color-fg-subtle: #6e7781, + --color-fg-on-emphasis: #ffffff, + --color-canvas-default: #ffffff, + --color-canvas-overlay: #ffffff, + --color-canvas-inset: #f6f8fa, + --color-canvas-subtle: #f6f8fa, + --color-border-default: #d0d7de, + --color-border-muted: hsla(210, 18%, 87%, 1), + --color-border-subtle: rgba(27, 31, 36, 0.15), + --color-shadow-small: 0 1px 0 rgba(27, 31, 36, 0.04), + --color-shadow-medium: 0 3px 6px rgba(140, 149, 159, 0.15), + --color-shadow-large: 0 8px 24px rgba(140, 149, 159, 0.2), + --color-shadow-extra-large: 0 12px 28px rgba(140, 149, 159, 0.3), + --color-neutral-emphasis-plus: #24292f, + --color-neutral-emphasis: #6e7781, + --color-neutral-muted: rgba(175, 184, 193, 0.2), + --color-neutral-subtle: rgba(234, 238, 242, 0.5), + --color-accent-fg: #0969da, + --color-accent-emphasis: #0969da, + --color-accent-muted: rgba(84, 174, 255, 0.4), + --color-accent-subtle: #ddf4ff, + --color-success-fg: #1a7f37, + --color-success-emphasis: #2da44e, + --color-success-muted: rgba(74, 194, 107, 0.4), + --color-success-subtle: #dafbe1, + --color-attention-fg: #9a6700, + --color-attention-emphasis: #bf8700, + --color-attention-muted: rgba(212, 167, 44, 0.4), + --color-attention-subtle: #fff8c5, + --color-severe-fg: #bc4c00, + --color-severe-emphasis: #bc4c00, + --color-severe-muted: rgba(251, 143, 68, 0.4), + --color-severe-subtle: #fff1e5, + --color-danger-fg: #cf222e, + --color-danger-emphasis: #cf222e, + --color-danger-muted: rgba(255, 129, 130, 0.4), + --color-danger-subtle: #ffebe9, + --color-done-fg: #8250df, + --color-done-emphasis: #8250df, + --color-done-muted: rgba(194, 151, 255, 0.4), + --color-done-subtle: #fbefff, + --color-sponsors-fg: #bf3989, + --color-sponsors-emphasis: #bf3989, + --color-sponsors-muted: rgba(255, 128, 200, 0.4), + --color-sponsors-subtle: #ffeff7, + --color-primer-fg-disabled: #8c959f, + --color-primer-canvas-backdrop: rgba(27, 31, 36, 0.5), + --color-primer-canvas-sticky: rgba(255, 255, 255, 0.95), + --color-primer-border-active: #fd8c73, + --color-primer-border-contrast: rgba(27, 31, 36, 0.1), + --color-primer-shadow-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.25), + --color-primer-shadow-inset: inset 0 1px 0 rgba(208, 215, 222, 0.2), + --color-primer-shadow-focus: 0 0 0 3px rgba(9, 105, 218, 0.3), + --color-scale-black: #1b1f24, + --color-scale-white: #ffffff, + --color-scale-gray-0: #f6f8fa, + --color-scale-gray-1: #eaeef2, + --color-scale-gray-2: #d0d7de, + --color-scale-gray-3: #afb8c1, + --color-scale-gray-4: #8c959f, + --color-scale-gray-5: #6e7781, + --color-scale-gray-6: #57606a, + --color-scale-gray-7: #424a53, + --color-scale-gray-8: #32383f, + --color-scale-gray-9: #24292f, + --color-scale-blue-0: #ddf4ff, + --color-scale-blue-1: #b6e3ff, + --color-scale-blue-2: #80ccff, + --color-scale-blue-3: #54aeff, + --color-scale-blue-4: #218bff, + --color-scale-blue-5: #0969da, + --color-scale-blue-6: #0550ae, + --color-scale-blue-7: #033d8b, + --color-scale-blue-8: #0a3069, + --color-scale-blue-9: #002155, + --color-scale-green-0: #dafbe1, + --color-scale-green-1: #aceebb, + --color-scale-green-2: #6fdd8b, + --color-scale-green-3: #4ac26b, + --color-scale-green-4: #2da44e, + --color-scale-green-5: #1a7f37, + --color-scale-green-6: #116329, + --color-scale-green-7: #044f1e, + --color-scale-green-8: #003d16, + --color-scale-green-9: #002d11, + --color-scale-yellow-0: #fff8c5, + --color-scale-yellow-1: #fae17d, + --color-scale-yellow-2: #eac54f, + --color-scale-yellow-3: #d4a72c, + --color-scale-yellow-4: #bf8700, + --color-scale-yellow-5: #9a6700, + --color-scale-yellow-6: #7d4e00, + --color-scale-yellow-7: #633c01, + --color-scale-yellow-8: #4d2d00, + --color-scale-yellow-9: #3b2300, + --color-scale-orange-0: #fff1e5, + --color-scale-orange-1: #ffd8b5, + --color-scale-orange-2: #ffb77c, + --color-scale-orange-3: #fb8f44, + --color-scale-orange-4: #e16f24, + --color-scale-orange-5: #bc4c00, + --color-scale-orange-6: #953800, + --color-scale-orange-7: #762c00, + --color-scale-orange-8: #5c2200, + --color-scale-orange-9: #471700, + --color-scale-red-0: #ffebe9, + --color-scale-red-1: #ffcecb, + --color-scale-red-2: #ffaba8, + --color-scale-red-3: #ff8182, + --color-scale-red-4: #fa4549, + --color-scale-red-5: #cf222e, + --color-scale-red-6: #a40e26, + --color-scale-red-7: #82071e, + --color-scale-red-8: #660018, + --color-scale-red-9: #4c0014, + --color-scale-purple-0: #fbefff, + --color-scale-purple-1: #ecd8ff, + --color-scale-purple-2: #d8b9ff, + --color-scale-purple-3: #c297ff, + --color-scale-purple-4: #a475f9, + --color-scale-purple-5: #8250df, + --color-scale-purple-6: #6639ba, + --color-scale-purple-7: #512a97, + --color-scale-purple-8: #3e1f79, + --color-scale-purple-9: #2e1461, + --color-scale-pink-0: #ffeff7, + --color-scale-pink-1: #ffd3eb, + --color-scale-pink-2: #ffadda, + --color-scale-pink-3: #ff80c8, + --color-scale-pink-4: #e85aad, + --color-scale-pink-5: #bf3989, + --color-scale-pink-6: #99286e, + --color-scale-pink-7: #772057, + --color-scale-pink-8: #611347, + --color-scale-pink-9: #4d0336, + --color-scale-coral-0: #fff0eb, + --color-scale-coral-1: #ffd6cc, + --color-scale-coral-2: #ffb4a1, + --color-scale-coral-3: #fd8c73, + --color-scale-coral-4: #ec6547, + --color-scale-coral-5: #c4432b, + --color-scale-coral-6: #9e2f1c, + --color-scale-coral-7: #801f0f, + --color-scale-coral-8: #691105, + --color-scale-coral-9: #510901, +); diff --git a/packages/@som/blog/client/assets/scss/util.scss b/packages/@som/blog/client/assets/scss/util.scss new file mode 100644 index 00000000..cd4f0313 --- /dev/null +++ b/packages/@som/blog/client/assets/scss/util.scss @@ -0,0 +1,12 @@ +@use 'sass:color'; +@use 'sass:meta'; + +@function getRgbaString($color) { + @if (meta.type-of($color) == color) { + @return color.red($color) color.green($color) color.blue($color); + } @else { + @return $color; + } + + // , color.alpha($color); +} diff --git a/packages/@som/blog/client/assets/scss/variables.scss b/packages/@som/blog/client/assets/scss/variables.scss new file mode 100644 index 00000000..4211076e --- /dev/null +++ b/packages/@som/blog/client/assets/scss/variables.scss @@ -0,0 +1,489 @@ +$canvas-default-transparent: rgb(var(--color-canvas-default-transparent)); +$marketing-icon-primary: rgb(var(--color-marketing-icon-primary)); +$marketing-icon-secondary: rgb(var(--color-marketing-icon-secondary)); +$diff-blob-addition-num-text: rgb(var(--color-diff-blob-addition-num-text)); +$diff-blob-addition-fg: rgb(var(--color-diff-blob-addition-fg)); +$diff-blob-addition-num-bg: rgb(var(--color-diff-blob-addition-num-bg)); +$diff-blob-addition-line-bg: rgb(var(--color-diff-blob-addition-line-bg)); +$diff-blob-addition-word-bg: rgb(var(--color-diff-blob-addition-word-bg)); +$diff-blob-deletion-num-text: rgb(var(--color-diff-blob-deletion-num-text)); +$diff-blob-deletion-fg: rgb(var(--color-diff-blob-deletion-fg)); +$diff-blob-deletion-num-bg: rgb(var(--color-diff-blob-deletion-num-bg)); +$diff-blob-deletion-line-bg: rgb(var(--color-diff-blob-deletion-line-bg)); +$diff-blob-deletion-word-bg: rgb(var(--color-diff-blob-deletion-word-bg)); +$diff-blob-hunk-num-bg: rgb(var(--color-diff-blob-hunk-num-bg)); +$diff-blob-expander-icon: rgb(var(--color-diff-blob-expander-icon)); +$diff-blob-selected-line-highlight-mix-blend-mode: rgb( + var(--color-diff-blob-selected-line-highlight-mix-blend-mode) +); +$diffstat-deletion-border: rgb(var(--color-diffstat-deletion-border)); +$diffstat-addition-border: rgb(var(--color-diffstat-addition-border)); +$diffstat-addition-bg: rgb(var(--color-diffstat-addition-bg)); +$search-keyword-hl: rgb(var(--color-search-keyword-hl)); +$prettylights-syntax-comment: rgb(var(--color-prettylights-syntax-comment)); +$prettylights-syntax-constant: rgb(var(--color-prettylights-syntax-constant)); +$prettylights-syntax-entity: rgb(var(--color-prettylights-syntax-entity)); +$prettylights-syntax-storage-modifier-import: rgb( + var(--color-prettylights-syntax-storage-modifier-import) +); +$prettylights-syntax-entity-tag: rgb( + var(--color-prettylights-syntax-entity-tag) +); +$prettylights-syntax-keyword: rgb(var(--color-prettylights-syntax-keyword)); +$prettylights-syntax-string: rgb(var(--color-prettylights-syntax-string)); +$prettylights-syntax-variable: rgb(var(--color-prettylights-syntax-variable)); +$prettylights-syntax-brackethighlighter-unmatched: rgb( + var(--color-prettylights-syntax-brackethighlighter-unmatched) +); +$prettylights-syntax-invalid-illegal-text: rgb( + var(--color-prettylights-syntax-invalid-illegal-text) +); +$prettylights-syntax-invalid-illegal-bg: rgb( + var(--color-prettylights-syntax-invalid-illegal-bg) +); +$prettylights-syntax-carriage-return-text: rgb( + var(--color-prettylights-syntax-carriage-return-text) +); +$prettylights-syntax-carriage-return-bg: rgb( + var(--color-prettylights-syntax-carriage-return-bg) +); +$prettylights-syntax-string-regexp: rgb( + var(--color-prettylights-syntax-string-regexp) +); +$prettylights-syntax-markup-list: rgb( + var(--color-prettylights-syntax-markup-list) +); +$prettylights-syntax-markup-heading: rgb( + var(--color-prettylights-syntax-markup-heading) +); +$prettylights-syntax-markup-italic: rgb( + var(--color-prettylights-syntax-markup-italic) +); +$prettylights-syntax-markup-bold: rgb( + var(--color-prettylights-syntax-markup-bold) +); +$prettylights-syntax-markup-deleted-text: rgb( + var(--color-prettylights-syntax-markup-deleted-text) +); +$prettylights-syntax-markup-deleted-bg: rgb( + var(--color-prettylights-syntax-markup-deleted-bg) +); +$prettylights-syntax-markup-inserted-text: rgb( + var(--color-prettylights-syntax-markup-inserted-text) +); +$prettylights-syntax-markup-inserted-bg: rgb( + var(--color-prettylights-syntax-markup-inserted-bg) +); +$prettylights-syntax-markup-changed-text: rgb( + var(--color-prettylights-syntax-markup-changed-text) +); +$prettylights-syntax-markup-changed-bg: rgb( + var(--color-prettylights-syntax-markup-changed-bg) +); +$prettylights-syntax-markup-ignored-text: rgb( + var(--color-prettylights-syntax-markup-ignored-text) +); +$prettylights-syntax-markup-ignored-bg: rgb( + var(--color-prettylights-syntax-markup-ignored-bg) +); +$prettylights-syntax-meta-diff-range: rgb( + var(--color-prettylights-syntax-meta-diff-range) +); +$prettylights-syntax-brackethighlighter-angle: rgb( + var(--color-prettylights-syntax-brackethighlighter-angle) +); +$prettylights-syntax-sublimelinter-gutter-mark: rgb( + var(--color-prettylights-syntax-sublimelinter-gutter-mark) +); +$prettylights-syntax-constant-other-reference-link: rgb( + var(--color-prettylights-syntax-constant-other-reference-link) +); +$codemirror-text: rgb(var(--color-codemirror-text)); +$codemirror-bg: rgb(var(--color-codemirror-bg)); +$codemirror-gutters-bg: rgb(var(--color-codemirror-gutters-bg)); +$codemirror-guttermarker-text: rgb(var(--color-codemirror-guttermarker-text)); +$codemirror-guttermarker-subtle-text: rgb( + var(--color-codemirror-guttermarker-subtle-text) +); +$codemirror-linenumber-text: rgb(var(--color-codemirror-linenumber-text)); +$codemirror-cursor: rgb(var(--color-codemirror-cursor)); +$codemirror-selection-bg: rgb(var(--color-codemirror-selection-bg)); +$codemirror-activeline-bg: rgb(var(--color-codemirror-activeline-bg)); +$codemirror-matchingbracket-text: rgb( + var(--color-codemirror-matchingbracket-text) +); +$codemirror-lines-bg: rgb(var(--color-codemirror-lines-bg)); +$codemirror-syntax-comment: rgb(var(--color-codemirror-syntax-comment)); +$codemirror-syntax-constant: rgb(var(--color-codemirror-syntax-constant)); +$codemirror-syntax-entity: rgb(var(--color-codemirror-syntax-entity)); +$codemirror-syntax-keyword: rgb(var(--color-codemirror-syntax-keyword)); +$codemirror-syntax-storage: rgb(var(--color-codemirror-syntax-storage)); +$codemirror-syntax-string: rgb(var(--color-codemirror-syntax-string)); +$codemirror-syntax-support: rgb(var(--color-codemirror-syntax-support)); +$codemirror-syntax-variable: rgb(var(--color-codemirror-syntax-variable)); +$checks-bg: rgb(var(--color-checks-bg)); +$checks-run-border-width: rgb(var(--color-checks-run-border-width)); +$checks-container-border-width: rgb(var(--color-checks-container-border-width)); +$checks-text-primary: rgb(var(--color-checks-text-primary)); +$checks-text-secondary: rgb(var(--color-checks-text-secondary)); +$checks-text-link: rgb(var(--color-checks-text-link)); +$checks-btn-icon: rgb(var(--color-checks-btn-icon)); +$checks-btn-hover-icon: rgb(var(--color-checks-btn-hover-icon)); +$checks-btn-hover-bg: rgb(var(--color-checks-btn-hover-bg)); +$checks-input-text: rgb(var(--color-checks-input-text)); +$checks-input-placeholder-text: rgb(var(--color-checks-input-placeholder-text)); +$checks-input-focus-text: rgb(var(--color-checks-input-focus-text)); +$checks-input-bg: rgb(var(--color-checks-input-bg)); +$checks-donut-error: rgb(var(--color-checks-donut-error)); +$checks-donut-pending: rgb(var(--color-checks-donut-pending)); +$checks-donut-success: rgb(var(--color-checks-donut-success)); +$checks-donut-neutral: rgb(var(--color-checks-donut-neutral)); +$checks-dropdown-text: rgb(var(--color-checks-dropdown-text)); +$checks-dropdown-bg: rgb(var(--color-checks-dropdown-bg)); +$checks-dropdown-border: rgb(var(--color-checks-dropdown-border)); +$checks-dropdown-shadow: var(--color-checks-dropdown-shadow); +$checks-dropdown-hover-text: rgb(var(--color-checks-dropdown-hover-text)); +$checks-dropdown-hover-bg: rgb(var(--color-checks-dropdown-hover-bg)); +$checks-dropdown-btn-hover-text: rgb( + var(--color-checks-dropdown-btn-hover-text) +); +$checks-dropdown-btn-hover-bg: rgb(var(--color-checks-dropdown-btn-hover-bg)); +$checks-scrollbar-thumb-bg: rgb(var(--color-checks-scrollbar-thumb-bg)); +$checks-header-label-text: rgb(var(--color-checks-header-label-text)); +$checks-header-label-open-text: rgb(var(--color-checks-header-label-open-text)); +$checks-header-border: rgb(var(--color-checks-header-border)); +$checks-header-icon: rgb(var(--color-checks-header-icon)); +$checks-line-text: rgb(var(--color-checks-line-text)); +$checks-line-num-text: rgb(var(--color-checks-line-num-text)); +$checks-line-timestamp-text: rgb(var(--color-checks-line-timestamp-text)); +$checks-line-hover-bg: rgb(var(--color-checks-line-hover-bg)); +$checks-line-selected-bg: rgb(var(--color-checks-line-selected-bg)); +$checks-line-selected-num-text: rgb(var(--color-checks-line-selected-num-text)); +$checks-line-dt-fm-text: rgb(var(--color-checks-line-dt-fm-text)); +$checks-line-dt-fm-bg: rgb(var(--color-checks-line-dt-fm-bg)); +$checks-gate-bg: rgb(var(--color-checks-gate-bg)); +$checks-gate-text: rgb(var(--color-checks-gate-text)); +$checks-gate-waiting-text: rgb(var(--color-checks-gate-waiting-text)); +$checks-step-header-open-bg: rgb(var(--color-checks-step-header-open-bg)); +$checks-step-error-text: rgb(var(--color-checks-step-error-text)); +$checks-step-warning-text: rgb(var(--color-checks-step-warning-text)); +$checks-logline-text: rgb(var(--color-checks-logline-text)); +$checks-logline-num-text: rgb(var(--color-checks-logline-num-text)); +$checks-logline-debug-text: rgb(var(--color-checks-logline-debug-text)); +$checks-logline-error-text: rgb(var(--color-checks-logline-error-text)); +$checks-logline-error-num-text: rgb(var(--color-checks-logline-error-num-text)); +$checks-logline-error-bg: rgb(var(--color-checks-logline-error-bg)); +$checks-logline-warning-text: rgb(var(--color-checks-logline-warning-text)); +$checks-logline-warning-num-text: rgb( + var(--color-checks-logline-warning-num-text) +); +$checks-logline-warning-bg: rgb(var(--color-checks-logline-warning-bg)); +$checks-logline-command-text: rgb(var(--color-checks-logline-command-text)); +$checks-logline-section-text: rgb(var(--color-checks-logline-section-text)); +$checks-ansi-black: rgb(var(--color-checks-ansi-black)); +$checks-ansi-black-bright: rgb(var(--color-checks-ansi-black-bright)); +$checks-ansi-white: rgb(var(--color-checks-ansi-white)); +$checks-ansi-white-bright: rgb(var(--color-checks-ansi-white-bright)); +$checks-ansi-gray: rgb(var(--color-checks-ansi-gray)); +$checks-ansi-red: rgb(var(--color-checks-ansi-red)); +$checks-ansi-red-bright: rgb(var(--color-checks-ansi-red-bright)); +$checks-ansi-green: rgb(var(--color-checks-ansi-green)); +$checks-ansi-green-bright: rgb(var(--color-checks-ansi-green-bright)); +$checks-ansi-yellow: rgb(var(--color-checks-ansi-yellow)); +$checks-ansi-yellow-bright: rgb(var(--color-checks-ansi-yellow-bright)); +$checks-ansi-blue: rgb(var(--color-checks-ansi-blue)); +$checks-ansi-blue-bright: rgb(var(--color-checks-ansi-blue-bright)); +$checks-ansi-magenta: rgb(var(--color-checks-ansi-magenta)); +$checks-ansi-magenta-bright: rgb(var(--color-checks-ansi-magenta-bright)); +$checks-ansi-cyan: rgb(var(--color-checks-ansi-cyan)); +$checks-ansi-cyan-bright: rgb(var(--color-checks-ansi-cyan-bright)); +$project-header-bg: rgb(var(--color-project-header-bg)); +$project-sidebar-bg: rgb(var(--color-project-sidebar-bg)); +$project-gradient-in: rgb(var(--color-project-gradient-in)); +$project-gradient-out: rgb(var(--color-project-gradient-out)); +$mktg-btn-bg: rgb(var(--color-mktg-btn-bg)); +$mktg-btn-shadow-outline: var(--color-mktg-btn-shadow-outline); +$mktg-btn-shadow-focus: var(--color-mktg-btn-shadow-focus); +$mktg-btn-shadow-hover: var(--color-mktg-btn-shadow-hover); +$mktg-btn-shadow-hover-muted: var(--color-mktg-btn-shadow-hover-muted); +$avatar-bg: rgb(var(--color-avatar-bg)); +$avatar-border: rgb(var(--color-avatar-border)); +$avatar-stack-fade: rgb(var(--color-avatar-stack-fade)); +$avatar-stack-fade-more: rgb(var(--color-avatar-stack-fade-more)); +$avatar-child-shadow: var(--color-avatar-child-shadow); +$topic-tag-border: rgb(var(--color-topic-tag-border)); +$counter-border: rgb(var(--color-counter-border)); +$select-menu-backdrop-border: rgb(var(--color-select-menu-backdrop-border)); +$select-menu-tap-highlight: rgb(var(--color-select-menu-tap-highlight)); +$select-menu-tap-focus-bg: rgb(var(--color-select-menu-tap-focus-bg)); +$overlay-shadow: var(--color-overlay-shadow); +$header-text: rgb(var(--color-header-text)); +$header-bg: rgb(var(--color-header-bg)); +$header-divider: rgb(var(--color-header-divider)); +$header-logo: rgb(var(--color-header-logo)); +$header-search-bg: rgb(var(--color-header-search-bg)); +$header-search-border: rgb(var(--color-header-search-border)); +$sidenav-selected-bg: rgb(var(--color-sidenav-selected-bg)); +$menu-bg-active: rgb(var(--color-menu-bg-active)); +$input-disabled-bg: rgb(var(--color-input-disabled-bg)); +$timeline-badge-bg: rgb(var(--color-timeline-badge-bg)); +$ansi-black: rgb(var(--color-ansi-black)); +$ansi-black-bright: rgb(var(--color-ansi-black-bright)); +$ansi-white: rgb(var(--color-ansi-white)); +$ansi-white-bright: rgb(var(--color-ansi-white-bright)); +$ansi-gray: rgb(var(--color-ansi-gray)); +$ansi-red: rgb(var(--color-ansi-red)); +$ansi-red-bright: rgb(var(--color-ansi-red-bright)); +$ansi-green: rgb(var(--color-ansi-green)); +$ansi-green-bright: rgb(var(--color-ansi-green-bright)); +$ansi-yellow: rgb(var(--color-ansi-yellow)); +$ansi-yellow-bright: rgb(var(--color-ansi-yellow-bright)); +$ansi-blue: rgb(var(--color-ansi-blue)); +$ansi-blue-bright: rgb(var(--color-ansi-blue-bright)); +$ansi-magenta: rgb(var(--color-ansi-magenta)); +$ansi-magenta-bright: rgb(var(--color-ansi-magenta-bright)); +$ansi-cyan: rgb(var(--color-ansi-cyan)); +$ansi-cyan-bright: rgb(var(--color-ansi-cyan-bright)); +$btn-text: rgb(var(--color-btn-text)); +$btn-bg: rgb(var(--color-btn-bg)); +$btn-border: rgb(var(--color-btn-border)); +$btn-shadow: var(--color-btn-shadow); +$btn-inset-shadow: var(--color-btn-inset-shadow); +$btn-hover-bg: rgb(var(--color-btn-hover-bg)); +$btn-hover-border: rgb(var(--color-btn-hover-border)); +$btn-active-bg: rgb(var(--color-btn-active-bg)); +$btn-active-border: rgb(var(--color-btn-active-border)); +$btn-selected-bg: rgb(var(--color-btn-selected-bg)); +$btn-focus-bg: rgb(var(--color-btn-focus-bg)); +$btn-focus-border: rgb(var(--color-btn-focus-border)); +$btn-focus-shadow: var(--color-btn-focus-shadow); +$btn-shadow-active: var(--color-btn-shadow-active); +$btn-shadow-input-focus: var(--color-btn-shadow-input-focus); +$btn-counter-bg: rgb(var(--color-btn-counter-bg)); +$btn-primary-text: rgb(var(--color-btn-primary-text)); +$btn-primary-bg: rgb(var(--color-btn-primary-bg)); +$btn-primary-border: rgb(var(--color-btn-primary-border)); +$btn-primary-shadow: var(--color-btn-primary-shadow); +$btn-primary-inset-shadow: var(--color-btn-primary-inset-shadow); +$btn-primary-hover-bg: rgb(var(--color-btn-primary-hover-bg)); +$btn-primary-hover-border: rgb(var(--color-btn-primary-hover-border)); +$btn-primary-selected-bg: rgb(var(--color-btn-primary-selected-bg)); +$btn-primary-selected-shadow: var(--color-btn-primary-selected-shadow); +$btn-primary-disabled-text: rgb(var(--color-btn-primary-disabled-text)); +$btn-primary-disabled-bg: rgb(var(--color-btn-primary-disabled-bg)); +$btn-primary-disabled-border: rgb(var(--color-btn-primary-disabled-border)); +$btn-primary-focus-bg: rgb(var(--color-btn-primary-focus-bg)); +$btn-primary-focus-border: rgb(var(--color-btn-primary-focus-border)); +$btn-primary-focus-shadow: var(--color-btn-primary-focus-shadow); +$btn-primary-icon: rgb(var(--color-btn-primary-icon)); +$btn-primary-counter-bg: rgb(var(--color-btn-primary-counter-bg)); +$btn-outline-text: rgb(var(--color-btn-outline-text)); +$btn-outline-hover-text: rgb(var(--color-btn-outline-hover-text)); +$btn-outline-hover-bg: rgb(var(--color-btn-outline-hover-bg)); +$btn-outline-hover-border: rgb(var(--color-btn-outline-hover-border)); +$btn-outline-hover-shadow: var(--color-btn-outline-hover-shadow); +$btn-outline-hover-inset-shadow: var(--color-btn-outline-hover-inset-shadow); +$btn-outline-hover-counter-bg: rgb(var(--color-btn-outline-hover-counter-bg)); +$btn-outline-selected-text: rgb(var(--color-btn-outline-selected-text)); +$btn-outline-selected-bg: rgb(var(--color-btn-outline-selected-bg)); +$btn-outline-selected-border: rgb(var(--color-btn-outline-selected-border)); +$btn-outline-selected-shadow: var(--color-btn-outline-selected-shadow); +$btn-outline-disabled-text: rgb(var(--color-btn-outline-disabled-text)); +$btn-outline-disabled-bg: rgb(var(--color-btn-outline-disabled-bg)); +$btn-outline-disabled-counter-bg: rgb( + var(--color-btn-outline-disabled-counter-bg) +); +$btn-outline-focus-border: rgb(var(--color-btn-outline-focus-border)); +$btn-outline-focus-shadow: var(--color-btn-outline-focus-shadow); +$btn-outline-counter-bg: rgb(var(--color-btn-outline-counter-bg)); +$btn-danger-text: rgb(var(--color-btn-danger-text)); +$btn-danger-hover-text: rgb(var(--color-btn-danger-hover-text)); +$btn-danger-hover-bg: rgb(var(--color-btn-danger-hover-bg)); +$btn-danger-hover-border: rgb(var(--color-btn-danger-hover-border)); +$btn-danger-hover-shadow: var(--color-btn-danger-hover-shadow); +$btn-danger-hover-inset-shadow: var(--color-btn-danger-hover-inset-shadow); +$btn-danger-hover-icon: rgb(var(--color-btn-danger-hover-icon)); +$btn-danger-hover-counter-bg: rgb(var(--color-btn-danger-hover-counter-bg)); +$btn-danger-selected-text: rgb(var(--color-btn-danger-selected-text)); +$btn-danger-selected-bg: rgb(var(--color-btn-danger-selected-bg)); +$btn-danger-selected-border: rgb(var(--color-btn-danger-selected-border)); +$btn-danger-selected-shadow: var(--color-btn-danger-selected-shadow); +$btn-danger-disabled-text: rgb(var(--color-btn-danger-disabled-text)); +$btn-danger-disabled-bg: rgb(var(--color-btn-danger-disabled-bg)); +$btn-danger-disabled-counter-bg: rgb( + var(--color-btn-danger-disabled-counter-bg) +); +$btn-danger-focus-border: rgb(var(--color-btn-danger-focus-border)); +$btn-danger-focus-shadow: var(--color-btn-danger-focus-shadow); +$btn-danger-counter-bg: rgb(var(--color-btn-danger-counter-bg)); +$btn-danger-icon: rgb(var(--color-btn-danger-icon)); +$underlinenav-icon: rgb(var(--color-underlinenav-icon)); +$underlinenav-border-hover: rgb(var(--color-underlinenav-border-hover)); +$action-list-item-inline-divider: rgb( + var(--color-action-list-item-inline-divider) +); +$action-list-item-default-hover-bg: rgb( + var(--color-action-list-item-default-hover-bg) +); +$action-list-item-default-active-bg: rgb( + var(--color-action-list-item-default-active-bg) +); +$action-list-item-default-selected-bg: rgb( + var(--color-action-list-item-default-selected-bg) +); +$action-list-item-danger-hover-bg: rgb( + var(--color-action-list-item-danger-hover-bg) +); +$action-list-item-danger-active-bg: rgb( + var(--color-action-list-item-danger-active-bg) +); +$action-list-item-danger-hover-text: rgb( + var(--color-action-list-item-danger-hover-text) +); +$fg-default: rgb(var(--color-fg-default)); +$fg-muted: rgb(var(--color-fg-muted)); +$fg-subtle: rgb(var(--color-fg-subtle)); +$fg-on-emphasis: rgb(var(--color-fg-on-emphasis)); +$canvas-default: rgb(var(--color-canvas-default)); +$canvas-overlay: rgb(var(--color-canvas-overlay)); +$canvas-inset: rgb(var(--color-canvas-inset)); +$canvas-subtle: rgb(var(--color-canvas-subtle)); +$border-default: rgb(var(--color-border-default)); +$border-muted: rgb(var(--color-border-muted)); +$border-subtle: rgb(var(--color-border-subtle)); +$shadow-small: var(--color-shadow-small); +$shadow-medium: var(--color-shadow-medium); +$shadow-large: var(--color-shadow-large); +$shadow-extra-large: var(--color-shadow-extra-large); +$neutral-emphasis-plus: rgb(var(--color-neutral-emphasis-plus)); +$neutral-emphasis: rgb(var(--color-neutral-emphasis)); +$neutral-muted: rgb(var(--color-neutral-muted)); +$neutral-subtle: rgb(var(--color-neutral-subtle)); +$accent-fg: rgb(var(--color-accent-fg)); +$accent-emphasis: rgb(var(--color-accent-emphasis)); +$accent-muted: rgb(var(--color-accent-muted)); +$accent-subtle: rgb(var(--color-accent-subtle)); +$success-fg: rgb(var(--color-success-fg)); +$success-emphasis: rgb(var(--color-success-emphasis)); +$success-muted: rgb(var(--color-success-muted)); +$success-subtle: rgb(var(--color-success-subtle)); +$attention-fg: rgb(var(--color-attention-fg)); +$attention-emphasis: rgb(var(--color-attention-emphasis)); +$attention-muted: rgb(var(--color-attention-muted)); +$attention-subtle: rgb(var(--color-attention-subtle)); +$severe-fg: rgb(var(--color-severe-fg)); +$severe-emphasis: rgb(var(--color-severe-emphasis)); +$severe-muted: rgb(var(--color-severe-muted)); +$severe-subtle: rgb(var(--color-severe-subtle)); +$danger-fg: rgb(var(--color-danger-fg)); +$danger-emphasis: rgb(var(--color-danger-emphasis)); +$danger-muted: rgb(var(--color-danger-muted)); +$danger-subtle: rgb(var(--color-danger-subtle)); +$done-fg: rgb(var(--color-done-fg)); +$done-emphasis: rgb(var(--color-done-emphasis)); +$done-muted: rgb(var(--color-done-muted)); +$done-subtle: rgb(var(--color-done-subtle)); +$sponsors-fg: rgb(var(--color-sponsors-fg)); +$sponsors-emphasis: rgb(var(--color-sponsors-emphasis)); +$sponsors-muted: rgb(var(--color-sponsors-muted)); +$sponsors-subtle: rgb(var(--color-sponsors-subtle)); +$primer-fg-disabled: rgb(var(--color-primer-fg-disabled)); +$primer-canvas-backdrop: rgb(var(--color-primer-canvas-backdrop)); +$primer-canvas-sticky: rgb(var(--color-primer-canvas-sticky)); +$primer-border-active: rgb(var(--color-primer-border-active)); +$primer-border-contrast: rgb(var(--color-primer-border-contrast)); +$primer-shadow-highlight: var(--color-primer-shadow-highlight); +$primer-shadow-inset: var(--color-primer-shadow-inset); +$primer-shadow-focus: var(--color-primer-shadow-focus); +$scale-black: rgb(var(--color-scale-black)); +$scale-white: rgb(var(--color-scale-white)); +$scale-gray-0: rgb(var(--color-scale-gray-0)); +$scale-gray-1: rgb(var(--color-scale-gray-1)); +$scale-gray-2: rgb(var(--color-scale-gray-2)); +$scale-gray-3: rgb(var(--color-scale-gray-3)); +$scale-gray-4: rgb(var(--color-scale-gray-4)); +$scale-gray-5: rgb(var(--color-scale-gray-5)); +$scale-gray-6: rgb(var(--color-scale-gray-6)); +$scale-gray-7: rgb(var(--color-scale-gray-7)); +$scale-gray-8: rgb(var(--color-scale-gray-8)); +$scale-gray-9: rgb(var(--color-scale-gray-9)); +$scale-blue-0: rgb(var(--color-scale-blue-0)); +$scale-blue-1: rgb(var(--color-scale-blue-1)); +$scale-blue-2: rgb(var(--color-scale-blue-2)); +$scale-blue-3: rgb(var(--color-scale-blue-3)); +$scale-blue-4: rgb(var(--color-scale-blue-4)); +$scale-blue-5: rgb(var(--color-scale-blue-5)); +$scale-blue-6: rgb(var(--color-scale-blue-6)); +$scale-blue-7: rgb(var(--color-scale-blue-7)); +$scale-blue-8: rgb(var(--color-scale-blue-8)); +$scale-blue-9: rgb(var(--color-scale-blue-9)); +$scale-green-0: rgb(var(--color-scale-green-0)); +$scale-green-1: rgb(var(--color-scale-green-1)); +$scale-green-2: rgb(var(--color-scale-green-2)); +$scale-green-3: rgb(var(--color-scale-green-3)); +$scale-green-4: rgb(var(--color-scale-green-4)); +$scale-green-5: rgb(var(--color-scale-green-5)); +$scale-green-6: rgb(var(--color-scale-green-6)); +$scale-green-7: rgb(var(--color-scale-green-7)); +$scale-green-8: rgb(var(--color-scale-green-8)); +$scale-green-9: rgb(var(--color-scale-green-9)); +$scale-yellow-0: rgb(var(--color-scale-yellow-0)); +$scale-yellow-1: rgb(var(--color-scale-yellow-1)); +$scale-yellow-2: rgb(var(--color-scale-yellow-2)); +$scale-yellow-3: rgb(var(--color-scale-yellow-3)); +$scale-yellow-4: rgb(var(--color-scale-yellow-4)); +$scale-yellow-5: rgb(var(--color-scale-yellow-5)); +$scale-yellow-6: rgb(var(--color-scale-yellow-6)); +$scale-yellow-7: rgb(var(--color-scale-yellow-7)); +$scale-yellow-8: rgb(var(--color-scale-yellow-8)); +$scale-yellow-9: rgb(var(--color-scale-yellow-9)); +$scale-orange-0: rgb(var(--color-scale-orange-0)); +$scale-orange-1: rgb(var(--color-scale-orange-1)); +$scale-orange-2: rgb(var(--color-scale-orange-2)); +$scale-orange-3: rgb(var(--color-scale-orange-3)); +$scale-orange-4: rgb(var(--color-scale-orange-4)); +$scale-orange-5: rgb(var(--color-scale-orange-5)); +$scale-orange-6: rgb(var(--color-scale-orange-6)); +$scale-orange-7: rgb(var(--color-scale-orange-7)); +$scale-orange-8: rgb(var(--color-scale-orange-8)); +$scale-orange-9: rgb(var(--color-scale-orange-9)); +$scale-red-0: rgb(var(--color-scale-red-0)); +$scale-red-1: rgb(var(--color-scale-red-1)); +$scale-red-2: rgb(var(--color-scale-red-2)); +$scale-red-3: rgb(var(--color-scale-red-3)); +$scale-red-4: rgb(var(--color-scale-red-4)); +$scale-red-5: rgb(var(--color-scale-red-5)); +$scale-red-6: rgb(var(--color-scale-red-6)); +$scale-red-7: rgb(var(--color-scale-red-7)); +$scale-red-8: rgb(var(--color-scale-red-8)); +$scale-red-9: rgb(var(--color-scale-red-9)); +$scale-purple-0: rgb(var(--color-scale-purple-0)); +$scale-purple-1: rgb(var(--color-scale-purple-1)); +$scale-purple-2: rgb(var(--color-scale-purple-2)); +$scale-purple-3: rgb(var(--color-scale-purple-3)); +$scale-purple-4: rgb(var(--color-scale-purple-4)); +$scale-purple-5: rgb(var(--color-scale-purple-5)); +$scale-purple-6: rgb(var(--color-scale-purple-6)); +$scale-purple-7: rgb(var(--color-scale-purple-7)); +$scale-purple-8: rgb(var(--color-scale-purple-8)); +$scale-purple-9: rgb(var(--color-scale-purple-9)); +$scale-pink-0: rgb(var(--color-scale-pink-0)); +$scale-pink-1: rgb(var(--color-scale-pink-1)); +$scale-pink-2: rgb(var(--color-scale-pink-2)); +$scale-pink-3: rgb(var(--color-scale-pink-3)); +$scale-pink-4: rgb(var(--color-scale-pink-4)); +$scale-pink-5: rgb(var(--color-scale-pink-5)); +$scale-pink-6: rgb(var(--color-scale-pink-6)); +$scale-pink-7: rgb(var(--color-scale-pink-7)); +$scale-pink-8: rgb(var(--color-scale-pink-8)); +$scale-pink-9: rgb(var(--color-scale-pink-9)); +$scale-coral-0: rgb(var(--color-scale-coral-0)); +$scale-coral-1: rgb(var(--color-scale-coral-1)); +$scale-coral-2: rgb(var(--color-scale-coral-2)); +$scale-coral-3: rgb(var(--color-scale-coral-3)); +$scale-coral-4: rgb(var(--color-scale-coral-4)); +$scale-coral-5: rgb(var(--color-scale-coral-5)); +$scale-coral-6: rgb(var(--color-scale-coral-6)); +$scale-coral-7: rgb(var(--color-scale-coral-7)); +$scale-coral-8: rgb(var(--color-scale-coral-8)); +$scale-coral-9: rgb(var(--color-scale-coral-9)); diff --git a/packages/@som/blog/client/cloudbase/db/enum/index.js b/packages/@som/blog/client/cloudbase/db/enum/index.js deleted file mode 100644 index d396ae32..00000000 --- a/packages/@som/blog/client/cloudbase/db/enum/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export const dbCollectionName = { - comment: 'comment', - article: 'article', -} diff --git a/packages/@som/blog/client/cloudbase/db/index.js b/packages/@som/blog/client/cloudbase/db/index.js deleted file mode 100644 index 8a1474f0..00000000 --- a/packages/@som/blog/client/cloudbase/db/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import { db } from '..' -import { dbCollectionName } from './enum/index.js' - -export const article = db.collection(dbCollectionName.article) - -export const comment = db.collection(dbCollectionName.comment) - -export const command = db.command - -export const RegExp = db.RegExp - -export const Geo = db.Geo diff --git a/packages/@som/blog/client/cloudbase/db/mutation/article/index.js b/packages/@som/blog/client/cloudbase/db/mutation/article/index.js deleted file mode 100644 index 2e0fb1d4..00000000 --- a/packages/@som/blog/client/cloudbase/db/mutation/article/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import { incReadCountById } from '@/api/article' -// import { article, comment, command as _ } from '../..' -export async function incReadCount(id) { - return await incReadCountById(id) - // article.where({ id: _.eq(id) }).update({ - // readCount: _.inc(1), - // }) -} diff --git a/packages/@som/blog/client/cloudbase/db/mutation/comment/index.js b/packages/@som/blog/client/cloudbase/db/mutation/comment/index.js deleted file mode 100644 index 35da96b5..00000000 --- a/packages/@som/blog/client/cloudbase/db/mutation/comment/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import { article, comment } from '../..' - -// id 文章或者页面的 id,path等等 -export async function commitComment(id, content, user) { - // const user = mapGetters('user', ['user']) - const type = 'text' - return await comment.add({ - uid: user.uid, // user.uid, - nickName: user.nickName, - id, - content, - type, - ts: Date.now(), - }) -} diff --git a/packages/@som/blog/client/cloudbase/db/mutation/index.js b/packages/@som/blog/client/cloudbase/db/mutation/index.js deleted file mode 100644 index f2e7b1e3..00000000 --- a/packages/@som/blog/client/cloudbase/db/mutation/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export * from './comment' -export * from './article' diff --git a/packages/@som/blog/client/cloudbase/db/query/article/index.js b/packages/@som/blog/client/cloudbase/db/query/article/index.js deleted file mode 100644 index 3194b7d1..00000000 --- a/packages/@som/blog/client/cloudbase/db/query/article/index.js +++ /dev/null @@ -1,25 +0,0 @@ -import { article, comment, command as _ } from '../..' -import { incReadCount } from '../../mutation/article' -export async function getArticleReadCount(id) { - const { data } = await incReadCount(id) - - return data.readcount - // const { data } = await article - // .where({ id: _.eq(id) }) - // .limit(1) - // .field({ - // id: true, - // readCount: true, - // }) - // .get() - // const list = data - // if (Array.isArray(list) && list.length) { - // return list[0].readCount - // } else { - // await article.add({ - // id, - // readCount: 1, - // }) - // return 1 - // } -} diff --git a/packages/@som/blog/client/cloudbase/db/query/comment/index.js b/packages/@som/blog/client/cloudbase/db/query/comment/index.js deleted file mode 100644 index e7944f86..00000000 --- a/packages/@som/blog/client/cloudbase/db/query/comment/index.js +++ /dev/null @@ -1,56 +0,0 @@ -import { article, comment, command as _ } from '../..' - -export async function getCommentByArticleId( - id, - opt = { - limit: 10, - skip: 0, - // field, - } -) { - return await comment - .where({ - id, - }) - .limit(opt.limit) - .skip(opt.skip) - .field({ - _id: false, - _openid: false, - }) - .orderBy('ts', 'desc') - .get() -} - -export async function getCommentCountByArticleId( - id, - opt = { - limit: 10, - skip: 0, - // field, - } -) { - return await comment - .where({ - id, - }) - .count() -} - -export async function getCommentPagedListByArticleId( - id, - opt = { - page: 1, - perPage: 10, - } -) { - const { page, perPage } = opt - const option = { - skip: Math.max(page - 1, 0) * perPage, - limit: perPage, - } - return await Promise.all([ - getCommentByArticleId(id, option), - getCommentCountByArticleId(id), - ]) -} diff --git a/packages/@som/blog/client/cloudbase/db/query/index.js b/packages/@som/blog/client/cloudbase/db/query/index.js deleted file mode 100644 index f2e7b1e3..00000000 --- a/packages/@som/blog/client/cloudbase/db/query/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export * from './comment' -export * from './article' diff --git a/packages/@som/blog/client/cloudbase/errorHandler.js b/packages/@som/blog/client/cloudbase/errorHandler.js deleted file mode 100644 index 6abb9f30..00000000 --- a/packages/@som/blog/client/cloudbase/errorHandler.js +++ /dev/null @@ -1,21 +0,0 @@ -const errorMapper = { - AUTH_INVALID_CUSTOM_LOGIN_TICKET: '自定义登录凭证非法', - AUTH_WX_OAUTH_FAILED: '微信 OAuth 失败', - AUTH_CUSTOM_USER_ID_HAS_BEEN_BOUND: 'CustomUserId 已关联帐户', - AUTH_OPEN_ID_HAS_BEEN_BOUND: 'openId 已关联帐户', - AUTH_UNION_ID_HAS_BEEN_BOUND: 'unionId 已关联帐户', - AUTH_EMAIL_HAS_BEEN_BOUND: '该邮箱已注册,请更换邮箱', - INVALID_EMAIL_TOKEN: '邮箱激活 token 过期或者不存在', - AUTH_LOGIN_FAILED: '登录失败,邮箱/用户名或者密码不正确', - INVALID_PARAM: '用户名/邮箱或密码错误', -} - -export default function handler(error) { - const { msg } = JSON.parse(error.message) - // eslint-disable-next-line no-unused-expressions - // eslint-disable-next-line no-useless-escape - const internalCode = /\[([^\[\]]+)\]/.exec(msg)[1] - error.code = internalCode - error.msg = errorMapper[internalCode] || '系统错误' - throw error -} diff --git a/packages/@som/blog/client/cloudbase/index.js b/packages/@som/blog/client/cloudbase/index.js deleted file mode 100644 index 6478cb08..00000000 --- a/packages/@som/blog/client/cloudbase/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import Cloudbase from '@cloudbase/js-sdk' - -const cloudbase = Cloudbase.init({ - env: process.env.TENCENT_CLOUDBASE_ENVID, -}) - -export const auth = cloudbase.auth({ - persistence: 'local', -}) -export const db = cloudbase.database() - -export default cloudbase diff --git a/packages/@som/blog/client/components/article/DarkArticleCard.vue b/packages/@som/blog/client/components/article/DarkArticleCard.vue new file mode 100644 index 00000000..6e415061 --- /dev/null +++ b/packages/@som/blog/client/components/article/DarkArticleCard.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/packages/@som/blog/client/components/article/HeaderSearchBar.vue b/packages/@som/blog/client/components/article/HeaderSearchBar.vue index c15c9f03..74cda1fc 100644 --- a/packages/@som/blog/client/components/article/HeaderSearchBar.vue +++ b/packages/@som/blog/client/components/article/HeaderSearchBar.vue @@ -12,7 +12,7 @@ @select="handleSelect" > + + diff --git a/packages/@som/blog/client/components/common/Comments/dark/CommentsList.vue b/packages/@som/blog/client/components/common/Comments/dark/CommentsList.vue new file mode 100644 index 00000000..a37fcbbd --- /dev/null +++ b/packages/@som/blog/client/components/common/Comments/dark/CommentsList.vue @@ -0,0 +1,166 @@ + + + + diff --git a/packages/@som/blog/client/components/common/Comments/dark/DarkParadise.vue b/packages/@som/blog/client/components/common/Comments/dark/DarkParadise.vue new file mode 100644 index 00000000..5b5120c5 --- /dev/null +++ b/packages/@som/blog/client/components/common/Comments/dark/DarkParadise.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/@som/blog/client/components/common/Comments/dark/PostComment.vue b/packages/@som/blog/client/components/common/Comments/dark/PostComment.vue new file mode 100644 index 00000000..2416352d --- /dev/null +++ b/packages/@som/blog/client/components/common/Comments/dark/PostComment.vue @@ -0,0 +1,151 @@ + + + + diff --git a/packages/@som/blog/client/components/common/Comments/dark/UserPopover.vue b/packages/@som/blog/client/components/common/Comments/dark/UserPopover.vue new file mode 100644 index 00000000..e0749bc3 --- /dev/null +++ b/packages/@som/blog/client/components/common/Comments/dark/UserPopover.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/packages/@som/blog/client/components/global/ReadCount.vue b/packages/@som/blog/client/components/common/ReadCount.vue similarity index 59% rename from packages/@som/blog/client/components/global/ReadCount.vue rename to packages/@som/blog/client/components/common/ReadCount.vue index 8ad706eb..a3c360e9 100644 --- a/packages/@som/blog/client/components/global/ReadCount.vue +++ b/packages/@som/blog/client/components/common/ReadCount.vue @@ -1,10 +1,11 @@ - diff --git a/packages/@som/blog/client/components/home/DarkSouls.vue b/packages/@som/blog/client/components/home/DarkSouls.vue new file mode 100644 index 00000000..19b5cfa2 --- /dev/null +++ b/packages/@som/blog/client/components/home/DarkSouls.vue @@ -0,0 +1,203 @@ + + + + + diff --git a/packages/@som/blog/client/components/global/MiniPrograms.vue b/packages/@som/blog/client/components/home/MiniPrograms.vue similarity index 70% rename from packages/@som/blog/client/components/global/MiniPrograms.vue rename to packages/@som/blog/client/components/home/MiniPrograms.vue index 4a5940ec..ff9ab418 100644 --- a/packages/@som/blog/client/components/global/MiniPrograms.vue +++ b/packages/@som/blog/client/components/home/MiniPrograms.vue @@ -5,9 +5,9 @@
- +
{{ item.alt }}
{{ item.desc }}
@@ -36,6 +36,7 @@ // import 股加融资计算器 from '@/assets/img/mini/股加融资计算器.jpg' import ProgramerCard from '@/assets/img/mini/programer-card.jpg' import Icebreaker from '@/assets/img/mini/icebreaker.jpg' +import Tailwindcss from '@/assets/img/mini/tailwindcss.jpg' export default { name: 'MiniProgramsBar', data() { @@ -63,18 +64,60 @@ export default { // }, // ], selfQrcode: [ + { + desc: '本博客站的小程序版本', + alt: '破冰客', + src: Icebreaker, + }, { desc: '一个用于程序员自我展示和相互交流的小程序', alt: '程序员名片', src: ProgramerCard, }, { - desc: '本博客站的小程序版本', - alt: '破冰客', - src: Icebreaker, + desc: 'tailwindcss参考小程序', + alt: 'tailwind', + src: Tailwindcss, }, ], } }, } + diff --git a/packages/@som/blog/client/components/home/MySelf.vue b/packages/@som/blog/client/components/home/MySelf.vue index 7e88b8a6..d1b26ead 100644 --- a/packages/@som/blog/client/components/home/MySelf.vue +++ b/packages/@som/blog/client/components/home/MySelf.vue @@ -1,5 +1,5 @@ diff --git a/packages/@som/blog/client/layouts/noWrapper.vue b/packages/@som/blog/client/layouts/noWrapper.vue index 468cb708..58b96f1c 100644 --- a/packages/@som/blog/client/layouts/noWrapper.vue +++ b/packages/@som/blog/client/layouts/noWrapper.vue @@ -1,17 +1,17 @@ diff --git a/packages/@som/blog/client/pages/articles/_year/_month/_slug.vue b/packages/@som/blog/client/pages/articles/_year/_month/_slug.vue index 0e83f116..803becda 100644 --- a/packages/@som/blog/client/pages/articles/_year/_month/_slug.vue +++ b/packages/@som/blog/client/pages/articles/_year/_month/_slug.vue @@ -1,35 +1,17 @@ diff --git a/packages/@som/blog/client/pages/batch/worker.vue b/packages/@som/blog/client/pages/batch/worker.vue new file mode 100644 index 00000000..a536019a --- /dev/null +++ b/packages/@som/blog/client/pages/batch/worker.vue @@ -0,0 +1,81 @@ + + + + + diff --git a/packages/@som/blog/client/pages/batch/zip.vue b/packages/@som/blog/client/pages/batch/zip.vue new file mode 100644 index 00000000..108f3e6c --- /dev/null +++ b/packages/@som/blog/client/pages/batch/zip.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/packages/@som/blog/client/pages/chart/scf-event-vs-web-vs-custom-image/index.vue b/packages/@som/blog/client/pages/chart/scf-event-vs-web-vs-custom-image/index.vue index 1ac27b20..edb7938a 100644 --- a/packages/@som/blog/client/pages/chart/scf-event-vs-web-vs-custom-image/index.vue +++ b/packages/@som/blog/client/pages/chart/scf-event-vs-web-vs-custom-image/index.vue @@ -36,10 +36,10 @@ + + diff --git a/packages/@som/blog/client/pages/demos/vue-frame-selection/index.vue b/packages/@som/blog/client/pages/demos/vue-frame-selection/index.vue new file mode 100644 index 00000000..daa6348d --- /dev/null +++ b/packages/@som/blog/client/pages/demos/vue-frame-selection/index.vue @@ -0,0 +1,317 @@ + + + + + diff --git a/packages/@som/blog/client/pages/friends.vue b/packages/@som/blog/client/pages/friends.vue new file mode 100644 index 00000000..31b36818 --- /dev/null +++ b/packages/@som/blog/client/pages/friends.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/@som/blog/client/pages/index.vue b/packages/@som/blog/client/pages/index.vue index c40b3306..ec559355 100644 --- a/packages/@som/blog/client/pages/index.vue +++ b/packages/@som/blog/client/pages/index.vue @@ -1,145 +1,81 @@ + + diff --git a/packages/@som/blog/client/pages/mp.vue b/packages/@som/blog/client/pages/mp.vue new file mode 100644 index 00000000..c58dca72 --- /dev/null +++ b/packages/@som/blog/client/pages/mp.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/packages/@som/blog/client/pages/packages/snow.vue b/packages/@som/blog/client/pages/packages/snow.vue index 355ed52e..295922b9 100644 --- a/packages/@som/blog/client/pages/packages/snow.vue +++ b/packages/@som/blog/client/pages/packages/snow.vue @@ -1,5 +1,5 @@ - - diff --git a/packages/@som/blog/client/pages/test/css-var.vue b/packages/@som/blog/client/pages/test/css-var.vue new file mode 100644 index 00000000..b10c89b1 --- /dev/null +++ b/packages/@som/blog/client/pages/test/css-var.vue @@ -0,0 +1,81 @@ + + + + + diff --git a/packages/@som/blog/client/pages/test/generator.vue b/packages/@som/blog/client/pages/test/generator.vue new file mode 100644 index 00000000..d4a772da --- /dev/null +++ b/packages/@som/blog/client/pages/test/generator.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/packages/@som/blog/client/pages/test/relation-graph.vue b/packages/@som/blog/client/pages/test/relation-graph.vue new file mode 100644 index 00000000..afffaf17 --- /dev/null +++ b/packages/@som/blog/client/pages/test/relation-graph.vue @@ -0,0 +1,70 @@ + + + diff --git a/packages/@som/blog/client/pages/utils/index.vue b/packages/@som/blog/client/pages/utils/index.vue index 29c137c6..b7c9b4a1 100644 --- a/packages/@som/blog/client/pages/utils/index.vue +++ b/packages/@som/blog/client/pages/utils/index.vue @@ -1,21 +1,23 @@