@nanarino/stylus 1.0.0

package/lib/components/checkbox.styl

@@ -0,0 +1,114 @@
+.{prefix}-checkbox
+
+    // --indent-checkbox 1.4em
+    // --color-checkbox var(--primary-6)
+    // --color-checkbox:disabled var(--primary-3)
+
+    min-height var(--line-height-body)
+    position relative
+    /** 設置行高后會未對齊 */ 
+    // line-height var(--line-height-body)
+    // font-size var(--font-size-body)
+    display inline-flex
+    // text-indent 1.4em // IOS中不支持 遂改用label的padding-left
+    // vertical-align middle
+    .{prefix}-input:where(input[type=checkbox])
+        border 0
+        width 16px
+        height 16px
+        top 0
+        bottom 0
+        margin auto 0
+        position absolute
+        z-index 1
+        opacity 0
+        cursor pointer
+        &:disabled
+            cursor not-allowed
+        /.{prefix}-input-wrapper
+            &:has(^[0..1])
+                gap 8px
+        ~/-label
+            padding-left var(--indent-checkbox, 1.4em)
+            min-width 2px
+            min-height 1em
+            position relative
+            display inline-flex
+            align-items center
+            &[for]
+                cursor pointer
+            /**
+             * 使用 `^[1..1]` 代替 `../` 减少编译后体积以及选择器冗余
+             */
+            ^[1..1]:focus-visible+&
+                outline 2px solid rgb(var(_get_var_by("color-input\*", wrapper), var(_get_var_by("outline-color-\*\:focus"))))
+                border-radius var(--border-radius-sm)
+            ^[1..1]:disabled+&
+                color rgb(var(--gray-6))
+                &[for]
+                    cursor not-allowed
+        /**
+         * 外框
+         */
+        ~/-label::before
+            content ''
+            width 16px
+            height 16px
+            box-sizing border-box
+            border 2px solid rgb(var(--gray-4))
+            position absolute
+            left 0
+            background-color rgb(var(--white))
+            border-radius var(--border-radius-sm)
+            transition border-color .3s
+            ^[1..1]:not(:disabled):hover+&
+                border-color rgb(var(--color-checkbox, var(--primary-6)))
+            ^[1..1]:checked+&
+                border-color rgb(var(--color-checkbox, var(--primary-6)))
+                background-color @border-color
+            ^[1..1]:checked:disabled+&
+                border-color rgb(var(_get_var_by("color-checkbox\:disabled"), var(--primary-3)))
+                background-color @border-color
+            ^[1..1]:disabled+&
+                background-color rgb(var(--gray-1))
+            ^[1..1]:disabled:not(:checked)+&
+                background-color rgb(var(--gray-2))
+            ~/[data-indeterminate] &
+                padding 2px
+                background-color rgb(var(--color-checkbox, var(--primary-6)))
+                background-clip content-box
+            ~/[data-indeterminate] ^[-2..-2]:disabled+&
+                background-color rgb(var(_get_var_by("color-checkbox\:disabled"), var(--primary-3)))
+        /**
+         * 内框
+         */
+        ~/-label::after
+            content ''
+            text-align center
+            line-height 16px
+            box-sizing border-box
+            position absolute
+            left 3px
+            width 10px
+            height 10px
+
+            ^[1..1]:checked+&
+
+                ~/:where(:not([data-marker])) &
+                    height 6px
+                    margin-top -1px
+                    transform rotate(-45deg)
+                    clip-path path("M 0 1.5 \\
+                        A 1.5 1.5 0 1 1 3 1 \\
+                        L 3 3 \\
+                        L 9 3 \\
+                        A 1.5 1.5 0 1 1 8.5 6 \\
+                        L 1.5 6 \\
+                        A 1.5 1.5 0 0 1 0 4.5 \\
+                        Z")
+                    background-color rgb(var(--white))
+                    
+                ~/:where([data-marker="-"]) &
+                    background rgb(var(--white))
+                    height 2px
+                    border-radius 2px

package/lib/components/dialog.styl

@@ -0,0 +1,65 @@
+dropdown()
+    display grid
+    gap var(--gap-dialog-form, 8px)
+
+
+dialog()
+    z-index 100
+    border 0
+    box-shadow var(--box-shadow-drop-bottom)
+    --box-shadow-color var(--gray-6)
+    background-color rgb(var(--background-color-dialog, var(--white)))
+
+    form[method=dialog]
+        dropdown()
+
+
+.{prefix}-popover-wrapper
+.{prefix}-dropdown-wrapper
+    width fit-content
+    position relative
+.{prefix}-dropdown-wrapper
+    dialog:not(.{prefix}-dropdown)
+        visibility hidden
+    dialog:not(:popover-open)+.{prefix}-dropdown
+            display none
+    .{prefix}-dropdown
+        position absolute
+        left 50%
+        transform translateX(-50%)
+        top calc(100% + var(--gap-dialog-form, 8px))
+        padding var(--gap-dialog-form, 8px)
+        width max-content
+        margin auto
+        &:not(dialog)
+            dropdown()
+
+
+
+.{prefix}-dropdown
+.{prefix}-popover
+    dialog()
+    border-radius var(--border-radius-md)
+    inset unset
+    // 用户代理
+    //     position fixed
+    &.sm
+        --gap-dialog-form 4px
+.{prefix}-popover
+    padding var(--padding-dialog, var(--gap-dialog-form, 8px))
+
+
+.{prefix}-dialog
+    dialog()
+    border-radius var(--border-radius-lg)
+    padding var(--padding-dialog, 16px 24px)
+    // 用户代理
+    //     .show() -> position absolute
+    //     .showModal() -> position fixed
+    
+    &[open]::backdrop
+        // cursor not-allowed
+        pointer-events none
+        backdrop-filter brightness(.8) blur(1px)
+        /:root[data-theme=dark] &
+            backdrop-filter brightness(1.25) blur(1px)

package/lib/components/form.styl

@@ -0,0 +1,26 @@
+.{prefix}-form-item
+    display flex
+    gap 8px
+    margin-bottom 16px
+    align-items center
+    &:where(label)
+        width fit-content
+    &:where([data-inline])
+        display inline-flex
+
+.{prefix}-form-item-message
+    // visibility hidden
+    color rgb(var(--primary-6))
+    position absolute
+    left 0
+    bottom -1.5em
+    font-size var(--font-size-base)
+    line-height var(--line-height-base)
+
+.{prefix}-input-wrapper:where([data-validate])
+    &:where(:has(:focus:invalid))
+        for i in range(1 10)
+            {_get_var_by('primary', i)} var(_get_var_by('danger', i))
+    &:where(:not(:has(:focus:invalid)))
+        .{prefix}-form-item-message
+            visibility hidden

package/lib/components/input.styl

@@ -0,0 +1,183 @@
+input_stat(tag)
+
+    box-sizing border-box
+    border none
+    outline 2px solid transparent
+    border-radius var(--border-radius-md)
+
+    font-size var(--font-size-body)
+    line-height var(--line-height-body)
+
+    caret-color rgb(var(_get_var_by(color, tag)))
+
+    background-color rgb(var(--gray-2))
+    &:hover
+    &:focus-visible
+        box-shadow var(--box-shadow-drop-bottom)
+    &:focus-visible
+        outline-color rgb(var(_get_var_by(color, tag)))
+    transition outline-color .3s, box-shadow .3s
+
+    &[disabled]
+        cursor not-allowed
+        background-color rgb(var(--gray-1))
+        color rgb(var(--gray-6))
+        &:hover
+            box-shadow none
+    
+    &::-webkit-input-placeholder
+        color rgb(var(--gray-5))
+        font-size var(--font-size-body)
+        line-height var(--line-height-body)
+
+
+.{prefix}-textarea:where(textarea)
+
+    // --padding-textarea 5px 12px
+    
+    --color-textarea var(_get_var_by("color-input\*", wrapper), var(_get_var_by("outline-color-\*\:focus")))
+
+    display inline-flex
+    flex-direction column
+    padding var(--padding-textarea, 5px 12px)
+
+    &.sm
+        --padding-textarea 1px 12px
+    &.lg
+        --padding-textarea 8px 12px
+        --font-size-body var(--font-size-h5)
+        --line-height-body var(--line-height-h5)
+    
+    input_stat(textarea)
+
+    &:where([data-primary])
+        --color-textarea var(--primary-6)
+
+
+.{prefix}-input
+
+    // --padding-vertical-input 4px
+    // --padding-horizontal-input 12px
+    
+    --color-input var(_get_var_by("color-input\*", wrapper), var(_get_var_by("outline-color-\*\:focus")))
+
+    &:where(input:not([type]))
+    &:where(input[type=text])
+    &:where(input[type=search])
+    &:where(input[type=number])
+    &:where(input[type=password])
+    &:where(input[type=email])
+    &:where(input[type=tel])
+    &:where(input[type=url])
+    &:where(input[type=date])
+    &:where(input[type=time])
+    &:where(input[type=month])
+    &:where(input[type=week])
+    &:where(input[type=datetime-local])
+    &:where(input[type=datetime])
+        flex 1
+        padding var(--padding-vertical-input, 4px) var(--padding-horizontal-input, 12px)
+
+        &.sm
+            --padding-vertical-input 0
+
+        &.lg
+            --padding-vertical-input 7px
+            --font-size-body var(--font-size-h5)
+            --line-height-body var(--line-height-h5)
+
+        input_stat(input)
+
+        &:where([data-primary])
+            --color-input var(--primary-6)
+
+        /.{prefix}-input-wrapper
+            &:has(^[0..1])
+                background-color rgb(var(--gray-2))
+            &:has(.{prefix}-input-prefix)
+                & ^[0..1]
+                    padding-left calc(var(--padding-horizontal-input, 12px) + var(--font-size-body))
+            &:has(.{prefix}-input-suffix)
+                & ^[0..1]
+                    padding-right calc(var(--padding-horizontal-input, 12px) + var(--font-size-body))
+
+
+.{prefix}-input-wrapper
+
+    display inline-flex
+    min-height var(--line-height-body)
+    align-items center
+    position relative
+    border 2px none rgb(var(_get_var_by("color-input\*", wrapper), var(--gray-2)))
+    border-radius var(--border-radius-md)
+
+    /**
+     * 输入框前缀后缀的按钮
+     */
+    buttons = button,
+        '[type=button]',
+        '[type=reset]',
+        '[type=submit]'
+
+    &:where([data-primary])
+    &:where([data-validate])
+
+        {_get_var_by("color-input\*", wrapper)} var(--primary-6)
+        
+        for tag in buttons
+            &:has({tag}:not(.{prefix}-input-prefix):not(.{prefix}-input-suffix))
+                background-color rgb(var(_get_var_by("color-input\*", wrapper)))
+    
+    // 校驗后樣式由用戶自訂是:invalid或響應式框架控制更靈活
+    // &:has(:invalid)
+    //    {_get_var_by("color-input\*", wrapper)} var(--danger-6)
+        
+    &>*
+        display inline-flex
+        align-items center
+    
+    for tag in buttons
+        {tag}
+            cursor pointer
+            border-radius calc(var(--border-radius-md) - 2px)
+            outline 2px solid transparent
+            &:focus-visible
+                outline-color rgb(var(_get_var_by("color-input\*", wrapper), var(--black)))
+            ~/:where([data-primary]) ^[-1..-1]
+                color rgb(var(--white))
+            
+            /**
+             * 这是祛除button的代理样式
+             */
+            padding 6px
+            border none
+            background none
+            &[disabled]
+                cursor not-allowed
+
+    .{prefix}-input-prefix
+    .{prefix}-input-suffix
+        // cursor pointer
+        position absolute
+        top 0
+        bottom 0
+        margin auto 0
+        z-index 1
+        color rgb(var(_get_var_by("color-input\*", wrapper), var(--black)))
+
+        // ~/[data-primary] ^[-1..-1]
+        //     color rgb(var(_get_var_by("color-input\*", wrapper)))
+        
+        /**
+         * 这是祛除button的代理样式 前面已经处理 除了padding不同
+         */
+        padding 0
+        // border none
+        // background none
+        // &[disabled]
+        //     cursor not-allowed
+
+    .{prefix}-input-prefix
+        left calc(var(--padding-horizontal-input, 12px) / 2)
+    .{prefix}-input-suffix
+        right calc(var(--padding-horizontal-input, 12px) / 2)

package/lib/components/menu.styl

@@ -0,0 +1,121 @@
+.{prefix}-menu
+    // --color-menu var(--primary-6)
+    // --color-menu-item var(--black)
+    // --color-menu-item:hover var(--color-menu, var(--primary-6))
+    // --color-menu-item:active var(--white)
+    // --background-color-menu-item "from transparent r g b / alpha"
+    // --background-color-menu-item:hover "from transparent r g b / alpha"
+    // --background-color-menu-item:active var(--color-menu, var(--primary-6))
+    // --padding-vertical-menu-item 0.5em
+    // --padding-horizontal-menu-item 1em
+
+    margin 0 1em
+    padding 0
+    display flex
+    flex-direction column
+    gap 0.5em
+
+    &:where(ul)
+    &:where(menu)
+        list-style none
+    &:where(details)
+        margin 0
+        &:not([open])
+            gap 0
+        &>summary
+            &::-webkit-details-marker
+                display none
+            &::-moz-list-bullet
+                display none
+            &::marker
+                display none
+    // 在Safari中使用 `::before` 的元素不支持 `text-indent`
+    // 请使用 `&::after`
+    summary
+    &-submenu
+        display flex
+        flex-direction column
+        gap @gap
+    &-submenu
+        &:where([data-folded])
+            /**
+              * 收起时 无间距
+              */
+            gap 0
+        &-title
+            display flex
+            justify-content space-between
+            align-items center
+            cursor alias
+            line-height var(--line-height-body)
+            padding \
+                var(--padding-vertical-menu-item, .5em) \
+                var(--padding-horizontal-menu-item, 1em)
+            &-arrow
+                position relative
+                display inline-block
+                width 10px
+                transform translateY(-50%)
+                transition margin-top .3s
+                &:before
+                &:after
+                    position absolute
+                    width 6px
+                    height 1.5px
+                    background-color currentColor
+                    border-radius 2px
+                    transition transform .3s
+                    content ""
+
+                ~/:where(details)[open] &
+                &
+                    &:before
+                        transform rotate(-45deg) translate(2.5px)
+                    &:after
+                        transform rotate(45deg) translate(-2.5px)
+
+                ~/:where(details):not([open]) &
+                ^[1][data-folded] &
+                    margin-top -5px
+                    &:before
+                        transform rotate(45deg) translate(2.5px)
+                    &:after 
+                        transform rotate(-45deg) translate(-2.5px)
+
+    &-item
+        position relative
+        height calc(var(--line-height-body) + 2 * var(--padding-vertical-menu-item, .5em))
+        line-height var(--line-height-body)
+        text-indent var(--padding-horizontal-menu-item, 1em)
+        display flex
+        align-items center
+        background-color rgb(var(--background-color-menu-item, from transparent r g b \/ alpha))
+        color rgb(var(--color-menu-item, var(--black)))
+        border-radius var(--border-radius-md)
+
+        ~/-item-link
+            position absolute
+            inset 0
+            display flex
+            align-items center
+            cursor pointer
+            text-decoration none
+            color currentColor
+            border-radius @border-radius // 这个是为了 `a:focus-visible` 能有圆角
+
+        &:where([data-active])
+        &:where([data-selected])
+            cursor auto
+            background-color rgb(var(_get_var_by("background-color-menu-item\:active"), var(--color-menu, var(--primary-6))))
+            color  rgb(var(_get_var_by("color-menu-item\:active"), var(--white)))
+        
+        &:not(^[0]-item[data-active]):not(^[0]-item[data-selected]):hover
+            background-color rgb(var(_get_var_by("background-color-menu-item\:hover"), from transparent r g b \/ alpha))
+            color rgb(var(_get_var_by("color-menu-item\:hover"), var(--color-menu, var(--primary-6))))
+        
+        ~/-submenu:where([data-folded]) ^[0]
+            /**
+             * 收起时 0高度
+             */
+            flex-basis 0
+            overflow hidden

package/lib/components/message.styl

@@ -0,0 +1,51 @@
+.{prefix}-message-queue
+    top 16px
+    left 0
+    right 0
+
+    z-index 10000
+    position fixed
+    height 0
+    overflow visible
+    display flex
+    flex-direction column
+    align-items center
+
+    color rgb(var(--gray-10))
+
+
+.{prefix}-message
+
+    --background-color-message var(--white)
+    --color-message var(--black)
+
+    border-radius var(--border-radius-md)
+    padding 8px
+    color rgb(var(--color-message))
+    background-color rgb(var(--background-color-message))
+    box-shadow var(--box-shadow-drop-bottom)
+    margin 4px
+
+
+    .{prefix}-paragraph
+        max-width 60vw
+        margin 0
+        
+        ^[1..1]>^[0]-prefix
+            /**
+             * <svg> 在 <use> 的情况下需要给定宽和高
+             * 只给其中一个 另一个会复制本体的 而不是等比例缩放
+             */
+            width 16px
+            height 16px
+            vertical-align middle
+            &:where([data-primary])
+                color rgb(var(--primary-6))
+            &+*
+                vertical-align middle
+
+    
+    &:where([data-primary])
+        --color-message var(--white)
+        --background-color-message var(--primary-5)
+        --box-shadow-color  var(--primary-4)

package/lib/components/panel.styl

@@ -0,0 +1,71 @@
+// details.{prefix}-panel
+.{prefix}-panel
+    // --color-panel var(--primary-1)
+
+    font-size var(--font-size-body)
+    line-height var(--line-height-body)
+    /**
+     * 不使用主题
+     */
+    &:where(:not([data-primary]))
+        --color-panel var(--white)
+
+    &>summary
+        display flex
+        justify-content space-between
+        align-items center
+        background rgb(var(--color-panel, var(--primary-1)))
+        padding 8px
+        padding-left 18px
+        border-left 8px solid rgb(var(--color-panel, var(--primary-1)))
+        position relative
+        color inherit
+        list-style none
+        &::-webkit-details-marker
+            display none
+        &::-moz-list-bullet
+            display none
+        &::marker
+            display none
+        &::before
+            // content url("/docs/icons/direction/outline/caret-right.svg")
+            content ''
+            position absolute
+            width 18px
+            height 18px
+            top 0
+            bottom 0
+            left 0
+            margin auto 0
+
+            /**
+             * https://stackoverflow.com/questions/34859160/coloring-svg-content-url-with-css
+             */
+            ~/:where(:not([data-marker])) ^[1..-1]
+                mask var(--mask-panel-marker, url("data:image/svg+xml;utf8,<svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='currentColor' stroke-width='4'><path d='M34.8287 23.0629C35.4292 23.5433 35.4292 24.4566 34.8287 24.937L17.9496 38.4402C17.1639 39.0688 16 38.5094 16 37.5032L16 10.4967C16 9.49048 17.1639 8.93107 17.9496 9.55964L34.8287 23.0629Z' fill='currentColor'/></svg>")) \
+                    no-repeat \
+                    center center \
+                    \/ \
+                    12px 12px
+
+            ~/:where([data-marker='>']) ^[1..-1]
+                mask url("data:image/svg+xml;utf8,<svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='currentColor' stroke-width='4'><path d='M16 39.5127L31.5563 23.9563C31.5563 23.9563 20.6944 13.0944 16 8.4'/></svg>") \
+                    no-repeat \
+                    center center \
+                    \/ \
+                    12px 12px
+
+            background-color currentColor
+            transition transform .3s
+            
+        ~/[open] ^[-1..-1]
+            margin-bottom 4px
+            &::before
+                transform rotate(90deg)
+
+    summary+*
+        display grid
+        background rgb(var(--color-panel, var(--primary-1)))
+        padding 8px 12px
+        color inherit
+

package/lib/components/pre&code.styl

@@ -0,0 +1,30 @@
+.{prefix}-pre
+    /**
+     * 行内的code样式 另见 ./tag&kbd.styl
+     */
+    overflow-x auto
+
+    // --background-color-pre var(--gray-1)
+    // --background-color-pre-dark var(--gray-1)
+    background-color rgb(var(--background-color-pre, var(--gray-1)) \/ .8)
+    /:root[data-theme=dark] &
+        background-color rgb(var(--background-color-pre-dark, var(--gray-1)) \/ .8)
+    
+    padding calc(var(--font-offset-parent) + .5em) 1em
+    margin 1rem 0
+    border-radius var(--border-radius-md)
+    
+    &>.{prefix}-code
+        white-space inherit
+        font-size var(--font-size-1)
+        line-height var(--font-size-3)
+        background-color unset
+        padding unset
+        border unset
+        color unset
+        *
+            // --color-code var(--gray-8)
+            // --color-code-dark var(--gray-8)
+            color rgb(var(--color-code, var(--gray-8)))
+            /:root[data-theme=dark] &
+                color rgb(var(--color-code-dark, var(--gray-8)))