✨ css变量 --outline-color-focus

nanarino · Oct 9, 2023 · 14b1993 · 14b1993
1 parent 756d76a
commit 14b1993
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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))
+                    {_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
diff --git 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` 无法触发
     - <T tag="textarea" class="☘-textarea ☘-font-mono" title="textarea" placeholder='请输入' style="vertical-align: middle" />
 
+使用css变量 `--outline-color-focus` 可以覆盖这个颜色。input和textarea即为主题色被覆盖为黑白了。
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -28,4 +28,6 @@ export * from 'src/components/markdown/map.mdx';
		- `textarea` 无法触发
		- <T tag="textarea" class="☘-textarea ☘-font-mono" title="textarea" placeholder='请输入' style="vertical-align: middle" />

		使用css变量 `--outline-color-focus` 可以覆盖这个颜色。input和textarea即为主题色被覆盖为黑白了。