From 14b19932d87f9373c3868a8355f64dcfd6aaac76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=98=98?= Date: Mon, 9 Oct 2023 11:33:26 +0800 Subject: [PATCH] =?UTF-8?q?:sparkles:=20css=E5=8F=98=E9=87=8F=20`--outline?= =?UTF-8?q?-color-focus`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/lib/components/button.styl | 2 +- src/lib/components/checkbox.styl | 2 +- src/lib/components/input.styl | 14 ++++++++------ src/lib/components/link.styl | 2 +- src/lib/components/menu.styl | 4 ++-- src/lib/components/switch.styl | 2 +- src/lib/primary.styl | 4 +++- src/lib/variable/input.styl | 27 --------------------------- src/pages/menu/form/index.mdx | 2 ++ 10 files changed, 20 insertions(+), 41 deletions(-) delete mode 100644 src/lib/variable/input.styl diff --git a/package.json b/package.json index 20dc11ae..a47db29a 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "description": "style lib", "author": "☘", "license": "MIT", - "version": "0.0.3", + "version": "0.0.4", "main": "./dist/index.css", "scripts": { "dev": "astro dev --host", diff --git a/src/lib/components/button.styl b/src/lib/components/button.styl index 4828e97e..372c86d2 100644 --- a/src/lib/components/button.styl +++ b/src/lib/components/button.styl @@ -42,7 +42,7 @@ button_background(init) color _rgb(var(--white)) button_background _rgb(var(--primary-5)) &:focus-visible - outline-color _rgb(var(--black)) + outline-color _rgb(var(--outline-color-focus)) &:not([disabled]):hover box-shadow var(--box-shadow-drop-bottom) &[disabled] diff --git a/src/lib/components/checkbox.styl b/src/lib/components/checkbox.styl index 15371d4b..5f36c045 100644 --- a/src/lib/components/checkbox.styl +++ b/src/lib/components/checkbox.styl @@ -23,7 +23,7 @@ align-items center cursor pointer ../:focus-visible+& - outline 2px solid _rgb(var(--black)) + outline 2px solid _rgb(var(--outline-color-focus)) border-radius var(--border-radius-sm) ../:disabled+& color _rgb(var(--gray-6)) diff --git a/src/lib/components/input.styl b/src/lib/components/input.styl index 1592ef64..3385747d 100644 --- a/src/lib/components/input.styl +++ b/src/lib/components/input.styl @@ -2,8 +2,11 @@ @import './../variable/functions.styl' input_stat() + --outline-color-focus var(--primary-6) + box-sizing border-box - border 1px solid transparent + border none + outline 2px solid transparent border-radius var(--border-radius-md) font-size var(--font-size-body) @@ -15,8 +18,7 @@ input_stat() &:hover box-shadow var(--box-shadow-drop-bottom) &:focus - border-color _rgb(var(--primary-5)) - outline none + outline-color _rgb(var(--outline-color-focus)) &:focus-visible box-shadow var(--box-shadow-drop-bottom) transition border-color .3s, box-shadow .3s @@ -97,7 +99,7 @@ input.{prefix}-input display inline-flex align-items center position relative - border 1px none _rgb(var(--gray-1)) + border 2px none _rgb(var(--gray-1)) border-radius var(--border-radius-md) background-color _rgb(var(--gray-1)) @@ -112,7 +114,7 @@ input.{prefix}-input background-color _rgb(var(--primary-6)) &[data-primary] - border 1px none _rgb(var(--primary-6)) + border-color _rgb(var(--primary-6)) color _rgb(var(--white)) &>* @@ -127,7 +129,7 @@ input.{prefix}-input border none background none &:focus-visible - outline-color _rgb(var(--black)) + outline-color _rgb(var(--outline-color-focus)) ~/[data-primary] ^[1..-1] color _rgb(var(--white)) &[disabled] diff --git a/src/lib/components/link.styl b/src/lib/components/link.styl index 72366cb6..46f4bc7e 100644 --- a/src/lib/components/link.styl +++ b/src/lib/components/link.styl @@ -17,5 +17,5 @@ cursor not-allowed // pointer-events none &:focus-visible - outline-color _rgb(var(--black)) + outline-color _rgb(var(--outline-color-focus)) border-radius var(--border-radius-sm) diff --git a/src/lib/components/menu.styl b/src/lib/components/menu.styl index 8d54c058..afbdd183 100644 --- a/src/lib/components/menu.styl +++ b/src/lib/components/menu.styl @@ -9,7 +9,6 @@ display flex flex-direction column gap 0.5em - overflow hidden ul& padding 0 @@ -70,6 +69,7 @@ cursor pointer text-decoration none color inherit + border-radius @border-radius // 这个是为了 `a:focus-visible` 能有圆角 ~/-item-link &:not(:has(*)) // 若该标签里面没有别的标签，即纯文本。这和 `:empty()` 不同 line-height var(--line-height-body) @@ -87,4 +87,4 @@ * 收起时 0高度 */ height 0 - + overflow hidden diff --git a/src/lib/components/switch.styl b/src/lib/components/switch.styl index d651ba0c..4a1fdd41 100644 --- a/src/lib/components/switch.styl +++ b/src/lib/components/switch.styl @@ -30,7 +30,7 @@ height var(--size-switch) width calc(var(--size-switch) * 2) ../:focus-visible+& - outline 2px solid _rgb(var(--black)) + outline 2px solid _rgb(var(--outline-color-focus)) border-radius calc((var(--size-switch) / 2)) background-color _rgb(var(--gray-4)) transition background-color 1s, box-shadow .5s diff --git a/src/lib/primary.styl b/src/lib/primary.styl index 93e90fd5..427e9927 100644 --- a/src/lib/primary.styl +++ b/src/lib/primary.styl @@ -14,4 +14,6 @@ color_alias_dict = { if k != 'primary' [data-primary={k}] for i in range(1 10) - {_get_var_by('primary', i)} var(_get_var_by(k, i)) \ No newline at end of file + {_get_var_by('primary', i)} var(_get_var_by(k, i)) + + --outline-color-focus var(--black) diff --git a/src/lib/variable/input.styl b/src/lib/variable/input.styl deleted file mode 100644 index 434e3b5f..00000000 --- a/src/lib/variable/input.styl +++ /dev/null @@ -1,27 +0,0 @@ -@import './functions.styl' - -input_stat() - box-sizing border-box - - background-color _rgb(var(--gray-1)) - &:hover - border-color _rgb(var(--primary-6)) - &:focus - border-color _rgb(var(--primary-6)) - outline none - box-shadow var(--box-shadow-drop-bottom) - &:focus-visible - outline-color _rgb(var(--black)) - transition box-shadow - - &[disabled] - cursor not-allowed - background-color _rgb(var(--gray-2)) - color _rgb(var(--gray-6)) - &:hover - border-color transparent - - &::-webkit-input-placeholder - color _rgb(var(--gray-5)) - font-size var(--font-size-body) - line-height var(--line-height-body) diff --git a/src/pages/menu/form/index.mdx b/src/pages/menu/form/index.mdx index 9c53f1a3..ca5a262f 100644 --- a/src/pages/menu/form/index.mdx +++ b/src/pages/menu/form/index.mdx @@ -28,4 +28,6 @@ export * from 'src/components/markdown/map.mdx'; - `textarea` 无法触发 - +使用css变量 `--outline-color-focus` 可以覆盖这个颜色。input和textarea即为主题色被覆盖为黑白了。 +