@nanarino/stylus 1.0.0

package/lib/components/radio.styl

@@ -0,0 +1,79 @@
+/**
+ * 和checkbox的样式太相似
+ * 直接复制过来改了几个词就能用
+ * 暂时不考虑编译后体积
+ */
+.{prefix}-radio
+
+    // --indent-radio 1.4em
+    // --color-radio var(--primary-6)
+    // --color-radio: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=radio])
+        margin 0
+        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-radio, 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))
+            border-radius 8px
+            position absolute
+            left 0
+            background-color rgb(var(--white))
+            transition border-color .3s, border-width .1s
+            ^[1..1]:not(:disabled):hover+&
+                border-color rgb(var(--color-radio, var(--primary-6)))
+            ^[1..1]:checked+&
+                border-width 5px 
+                border-color rgb(var(--color-radio, var(--primary-6)))
+                // background-color @border-color
+            ^[1..1]:checked:disabled+&
+                border-color rgb(var(_get_var_by("color-radio\: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))

package/lib/components/select.styl

@@ -0,0 +1,93 @@
+// select.{prefix}-select
+.{prefix}-select
+    // --padding-vertical-select 4px
+    // --padding-horizontal-select 12px
+    --color-select var(_get_var_by("color-input\*", wrapper), var(_get_var_by("outline-color-\*\:focus")))
+    
+    flex 1
+    // 默认的
+    // display inline-flex
+    align-items center
+    padding var(--padding-vertical-select, 4px) var(--padding-horizontal-select, 12px)
+    &.sm
+        --padding-vertical-select 0
+
+    &.lg
+        --padding-vertical-select 7px
+        --font-size-body var(--font-size-h5)
+        --line-height-body var(--line-height-h5)
+    &:where([data-primary])
+        --color-select var(--primary-6)
+
+    // 以下来自 ./input.styl def input_stat():
+
+    appearance base-select
+    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)
+    background-color rgb(var(--gray-2))
+    &:hover
+        box-shadow var(--box-shadow-drop-bottom)
+    &:open
+    &:focus-visible
+        outline-color rgb(var(_get_var_by(color, select)))
+        box-shadow var(--box-shadow-drop-bottom)
+    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
+    
+    optgroup
+        display grid
+        gap 2px
+        line-height calc(var(--line-height-body) + 8px)
+    option
+        padding @padding
+        line-height @line-height
+        border-radius @border-radius
+        outline @outline
+        &:hover
+        &:focus-visible
+            color rgb(var(--primary-6))
+            background-color rgb(var(--primary-1))
+        &:focus-visible
+            outline-color rgb(var(_get_var_by(color, select)))
+            &[data-primary]
+                outline-color rgb(var(--primary-6))
+        &:checked
+            color rgb(var(--white))
+            background-color rgb(var(--primary-5))
+            &:focus-visible
+                outline-color rgb(var(_get_var_by("outline-color-\*\:focus")))
+    
+    // 彈出層
+    &::picker(select)
+        border none
+        margin 8px 0
+        border-radius @border-radius
+        box-shadow var(--box-shadow-drop-bottom)
+        appearance base-select
+        background rgb(var(--white))
+        padding 4px
+        gap 4px
+        ^[0]:open^[-1..-1]
+            display grid
+    
+    &:where(:has(selectedcontent))::picker-icon
+        display none
+    
+    // 要先引入 input 再引入 select
+    // 纔能保證未被 `.☘-input-wrapper:where([data-primary]) button` 覆蓋 
+    button
+        color rgb(var(--black))
+
+    selectedcontent
+        flex 1
+    

package/lib/components/switch.styl

@@ -0,0 +1,144 @@
+.{prefix}-switch
+    
+    // --size-switch 22px
+    // --padding-switch 2px
+    
+    --size-switch-mover calc(var(--size-switch, 22px) - 2 * var(--padding-switch, 2px))
+
+    // --box-shadow-width-switch var(--padding-switch)
+    box-shadow-width-switch = var(--box-shadow-width-switch, var(--padding-switch, 2px))
+    // --color-switch var(--gray-4)
+    // --color-switch:checked var(--primary-6)
+    // --color-switch:disabled var(--gray-1)
+    // --color-switch:checked:disabled var(--primary-3)
+    // --color-switch-mover var(--gray-2)
+    // --box-shadow-color-switch var(--color-switch:checked)
+    // --box-shadow-color-switch:checked var(--color-switch)
+    box-shadow-color-switch = var(
+        --box-shadow-color-switch, var(
+            _get_var_by("color-switch\:checked"), var(
+                --primary-6
+            )
+        )
+    )
+    box-shadow-color-switch-checked = var(
+        _get_var_by("box-shadow-color-switch\:checked"), var(
+            --color-switch, var(
+                --gray-4
+            )
+        )
+    )
+
+    display inline-flex
+    position relative
+    font-size calc(var(--size-switch-mover) - var(--font-offset-parent))
+
+    height var(--size-switch, 22px)
+    width calc(var(--size-switch, 22px) * 2)
+    border-radius calc((var(--size-switch, 22px) / 2))
+    // overflow hidden
+
+    &.sm
+        --size-switch 16px
+        
+    &-mover
+        z-index 1
+        overflow hidden
+        border-radius 50%
+        background-color rgb(var(--color-switch-mover, var(--gray-2)))
+        outline 2px solid transparent
+        will-change filter
+    &-slot
+        position absolute
+        z-index 0
+        font-size 0
+        background-color rgb(var(--color-switch, var(--gray-4)))
+        transition background-color 1s, box-shadow .5s
+        inset 0
+        border-radius @border-radius
+    &-mover
+    .{prefix}-input:where(input[type=checkbox])
+        cursor pointer
+        position absolute
+        display flex
+        align-items center
+        justify-content center
+        margin 0
+        left var(--padding-switch, 2px)
+        top var(--padding-switch, 2px)
+        bottom var(--padding-switch, 2px)
+        width var(--size-switch-mover)
+        height @width
+        transition all .5s
+    .{prefix}-input:where(input[type=checkbox])
+        opacity 0
+        z-index 2
+        ~/[data-wider-trigger] ^[-1..-1]
+            inset 0 !important
+            width @width
+            height @height
+
+        ^[-1..-1]:focus-visible~^[0]-mover
+            outline 2px solid rgb(var(_get_var_by("color-input\*", wrapper), var(_get_var_by("outline-color-\*\:focus"))))
+        
+        &:disabled
+        ^[-1..-1]:disabled~^[0]-mover
+            cursor not-allowed
+        ^[-1..-1]:disabled~^[0]-slot
+            background-color rgb(var(_get_var_by("color-switch\:disabled"), var(--gray-1)))
+        ^[-1..-1]:checked:disabled~^[0]-slot
+            background-color rgb(var(_get_var_by("color-switch\:checked\:disabled"), var(--primary-3)))
+        
+        &:checked
+        ^[-1..-1]:checked~^[0]-mover
+            left calc(var(--size-switch, 22px) + var(--padding-switch, 2px))
+        ^[-1..-1]:checked~^[0]-slot
+            background-color rgb(var(_get_var_by("color-switch\:checked"), var(--primary-6)))
+
+        &:not(:disabled):hover~^[0]-mover
+        ^[-1..-1]:not(:disabled)~^[0]-mover:hover
+            filter drop-shadow(
+                0 \
+                0 \
+                var(--padding-switch, 2px) \
+                    rgb(box-shadow-color-switch) \
+            )
+            box-shadow \
+                0 \
+                0 \
+                box-shadow-width-switch \
+                box-shadow-width-switch \
+                    rgb(box-shadow-color-switch \/ 25%)
+        &:not(:disabled):hover~^[0]-slot
+        ^[-1..-1]:not(:disabled)~^[0]-slot:hover
+            box-shadow \
+                inset \
+                0 \
+                0 \
+                var(--padding-switch, 2px) \
+                var(--padding-switch, 2px) \
+                rgb(box-shadow-color-switch \/ 25%)
+        
+        &:not(:disabled):checked:hover~^[0]-mover
+        ^[-1..-1]:not(:disabled):checked~^[0]-mover:hover
+            filter drop-shadow(
+                0 \
+                0 \
+                var(--padding-switch, 2px) \
+                rgb(box-shadow-color-switch-checked) \
+            )
+            box-shadow \
+                0 \
+                0 \
+                box-shadow-width-switch \
+                box-shadow-width-switch \
+                rgb(box-shadow-color-switch-checked \/ 25%)
+        &:not(:disabled):checked:hover~^[0]-slot
+        ^[-1..-1]:not(:disabled):checked~^[0]-slot:hover
+            box-shadow \
+                inset \
+                0 \
+                0 \
+                var(--padding-switch, 2px) \
+                var(--padding-switch, 2px) \
+                rgb(box-shadow-color-switch-checked \/ 25%)

package/lib/index.styl

@@ -0,0 +1,13 @@
+@require './mixins/*'
+// base
+@require './variables/*'
+@require './primary'
+
+/**
+ * 使通配符引入时要确保引入的优先级 譬如：含有的 `&>*` 选择器被 `&` 覆盖
+ */
+@require './common/*'
+// typography / markdown
+@require './typography/*'
+// components
+@require './components/*'

package/lib/mixins/compatible.styl

@@ -0,0 +1,6 @@
+user-select(value)
+    -webkit-user-select value
+    user-select value
+user-drag(value)
+    -webkit-user-drag value
+    // user-drag value

package/lib/mixins/functions.styl

@@ -0,0 +1,51 @@
+/**
+ * 转为 css native rgb
+ * 覆盖 stylus 的 rgb
+ * 
+ * @override rgb(0 0 0 \/ .5) => `rgb(0 0 0/0.5)`
+ */
+rgb(color)
+    s('rgb(%s)', color)
+
+/**
+ * 覆盖 stylus 的 selector
+ * @override selector(':is()') => `selector(:is())`
+ *
+ * 不要省略not的括号 css支持 但是stylus不支持
+ * 如 css`@supports not selector(:is(a, b))` 
+ * 要写成 styl`@supports not (selector(:is(a, b))`
+ * 
+ */
+selector(query_str)
+    s('selector(%s)', unquote(query_str))
+
+/**
+ * 定義 path 函式
+ * 
+ * 刪除冗餘的縮進 需要用 '\\' 來換行
+ * 事實上 即使沒有這個函式 也需要用 '\\' 來換行
+ */
+path(path_str)
+    s('path(%s)', replace("\\\s+", "", path_str))
+
+/**
+ * 获取拼接的css变量
+ *
+ * name: str | var
+ * level: int | var
+ * return: str
+ */
+_get_var_by(property, level = none)
+    if  level == none
+        '--%s'%(unquote(property))
+    else
+        '--%s-%s'%(unquote(property) level)
+
+/**
+ * 多行省略混入
+ */
+mixin_line_clamp(number)
+    display -webkit-box
+    -webkit-box-orient vertical
+    -webkit-line-clamp number
+    overflow hidden

package/lib/mixins/prefix.styl

@@ -0,0 +1 @@
+prefix = "na"

package/lib/primary.styl

@@ -0,0 +1,17 @@
+color_alias_dict = {
+    primary: 'pinkpurple',
+    success: 'green',
+    danger: 'red',
+    warning: 'orange'
+}
+:root
+    for k, v in color_alias_dict
+        for i in range(1 10)
+            {_get_var_by(k, i)} var(_get_var_by(v, i))
+
+        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("outline-color-\*\:focus")} var(--black)

package/lib/typography/divider.styl

@@ -0,0 +1,17 @@
+.{prefix}-divider
+    &:where(hr)
+        border-color rgb(var(--gray-2) \/ 0.4)
+    &:where(div)
+        padding-top 2em
+        margin-bottom 2em
+        overflow hidden
+        --box-shadow-color var(--gray-6)
+        box-shadow var(--box-shadow-divider-bottom)
+    &:where(span)
+        display inline-block
+        vertical-align middle
+        height 1em
+        padding-left 1em
+        margin-right 1em
+        --box-shadow-color var(--black)
+        box-shadow var(--box-shadow-divider-right)

package/lib/typography/image.styl

@@ -0,0 +1,120 @@
+.{prefix}-image
+
+    // --color-image var(--white)
+    // --color-image-mask var(--black)
+    --color-link var(--color-image, var(--white))
+    {_get_var_by("color-link\:hover")} var(--gray-2)
+    {_get_var_by("color-link\:disabled")} var(--gray-4)
+
+
+    display inline-flex
+    flex-direction column
+    gap 16px
+    align-items center
+    justify-content center 
+
+    position relative
+    box-sizing border-box
+    background-repeat no-repeat
+    background-size cover
+    background-position center center
+    overflow hidden
+    &>img
+        // -webkit-user-drag none
+        width 100%
+        height 100%
+        object-fit @background-size
+        object-position @background-position
+    &-mask
+        opacity 0
+        transition opacity .5s
+        position absolute
+        z-index 2
+        inset 0
+        color rgb(var(--color-image, var(--white)))
+        background-color rgb(var(--black) \/ 0.5)
+        display flex
+        align-items center
+        justify-content center
+        &:hover
+            opacity 1
+    &-footer
+        height 64px
+        padding 9px 16px
+        box-sizing border-box
+        position absolute
+        z-index 2
+        bottom 0
+        left 0
+        right 0
+        color rgb(var(--color-image, var(--white)))
+        background-image linear-gradient(
+            180deg,
+            transparent 0%,
+            transparent 0%,
+            rgb(var(--color-image-mask, var(--black))) 100%,
+            rgb(var(--color-image-mask, var(--black))) 100%
+        )
+        display flex
+        align-items center
+        gap 16px
+
+        &-content
+            height 100%
+            display flex
+            flex-direction column
+            justify-content space-around
+            flex 1
+            word-break break-all
+            .{prefix}-title
+            .{prefix}-paragraph
+                /**
+                 * 不设置高度的时候 由内容撑开在多行时
+                 * 受justify-content影响 可以居中
+                 */
+                height unset
+                margin 0
+        
+        &-action
+            display flex
+            align-items center
+            gap 16px
+    
+    // 图片上传
+    &.{prefix}-input-wrapper
+
+        color rgb(var(_get_var_by("color-input\*", wrapper), var(--gray-6)))
+
+        input[type=file].{prefix}-input
+
+            --color-input var(--gray-6)
+            {_get_var_by("outline-color-\*\:focus")} var(_get_var_by("color-input\*", wrapper), var(--color-input))
+
+            &:where([data-primary])
+                --color-input var(--primary-6)
+                
+            position absolute
+            inset 0px
+            border-radius var(--border-radius-md)
+            border 2px dashed rgb(var(_get_var_by("outline-color-\*\:focus")))
+            // opacity 0
+            cursor pointer
+            color transparent
+            outline 2px solid transparent
+            &::-ms-browse
+                display none
+            &::-webkit-file-upload-button
+                display none
+            &::file-selector-button
+                display none
+            &[disabled]
+                cursor not-allowed
+                opacity .3
+            &:focus-visible
+                outline-color rgb(var(_get_var_by("outline-color-\*\:focus")))
+
+            transition box-shadow .3s, opacity .3s
+            
+        
+        &:has(input[type=file].{prefix}-input:not([disabled])):hover
+            box-shadow var(--box-shadow-drop-bottom)

package/lib/typography/link.styl

@@ -0,0 +1,32 @@
+.{prefix}-link
+
+    // --color-link var(--primary-6)
+    // --color-link:hover var(--primary-5)
+    // --color-link:focus var(--primary-7)
+    // --color-link:disabled var(--primary-2)
+    
+    display inline-flex
+    // vertical-align baseline
+    font-size inherit
+    border none
+    background none
+    padding unset
+    cursor pointer
+    outline 2px solid transparent
+    // text-decoration none
+    color rgb(var(--color-link, var(--primary-6)))
+    &:hover
+        color rgb(var(_get_var_by("color-link\:hover"), var(--primary-5)))
+    &:focus
+        color rgb(var(_get_var_by("color-link\:focus"), var(--primary-7)))
+    &[disabled]
+    &[aria-disabled]
+        color rgb(var(_get_var_by("color-link\:disabled"), var(--primary-2)))
+        cursor not-allowed
+        // pointer-events none
+    &:focus-visible
+        outline-color rgb(var(_get_var_by("outline-color-\*\:focus")))
+        border-radius var(--border-radius-sm)
+    
+    //.{prefix}-code
+

package/lib/typography/list.styl

@@ -0,0 +1,10 @@
+// ul.{prefix}-list
+// li.{prefix}-list
+.{prefix}-list
+    line-height 2
+    &>*
+    &>li>*
+        vertical-align middle
+    &::marker
+    &>li::marker
+        color rgb(var(--primary-5))

package/lib/typography/paragraph.styl

@@ -0,0 +1,27 @@
+.{prefix}-paragraph
+    margin 1em 0
+    padding 0
+    font-size var(--font-size-body)
+    line-height var(--line-height-body)
+    // &>*
+    //     vertical-align middle
+    &:has(.{prefix}-code)
+        line-height calc(var(--line-height-body) + var(--font-offset-parent))
+    
+    for i in range(1 6)
+        &:where([data-size=\"{i}\"])
+            --line-height-body var(_get_var_by(
+                line-height,
+                'h%s' % i
+            ))
+            --font-size-body var(_get_var_by(
+                font-size,
+                'h%s' % i
+            ))
+        &:where([data-ellipsis=\"{i}\"])
+            mixin_line_clamp(i)
+            height 'calc(%s * %s)' % (var(--line-height-body) i)
+    &:where([data-has-indent])
+        text-indent 2em
+
+// blockquote 見 title.styl

package/lib/typography/table.styl

@@ -0,0 +1,74 @@
+gray-cell()
+    color rgb(var(--gray-9))
+    background-color rgb(var(--gray-1))
+row-hover-cell()
+    color rgb(var(_get_var_by("color-cell-row\:hover"), var(--gray-9)))
+    background-color rgb(var(_get_var_by("background-color-cell-row\:hover"), var(--gray-1)))
+
+
+.{prefix}-table-wrapper
+    display grid
+    overflow auto
+    position relative
+
+    thead, .{prefix}-table-header-group
+        top 0
+        z-index 10
+        position sticky
+    tfoot, .{prefix}-table-footer-group
+        bottom 0
+        z-index 10
+        position sticky
+
+    .{prefix}-table
+        height fit-content
+    /.{prefix}-table
+        // --min-width-cell unset
+        // --padding-cell 9px 12px
+        // --border-cell none
+        // --text-align-cell left
+
+        font-size var(--font-size-body)
+        line-height var(--line-height-body)
+        &.lg
+            --padding-cell 13px 16px
+            --font-size-body var(--font-size-3)
+            --line-height-body var(--line-height-3)
+        &.sm
+            --padding-cell 5px 8px
+            --font-size-body var(--font-size-1)
+            --line-height-body var(--line-height-1)
+
+        display table
+        max-width 100%
+        border-collapse collapse
+
+        tr, &-row
+            display table-row
+            box-sizing border-box
+            &:hover>*
+                row-hover-cell()
+        td, th, &-cell
+            display table-cell
+            box-sizing border-box
+            // white-space nowrap
+            white-space var(--white-space-cell, normal)
+            min-width var(--min-width-cell, unset)
+            padding var(--padding-cell, 9px 12px)
+            text-align var(--text-align-cell, left)
+            border var(--border-cell, none)
+            box-shadow var(--box-shadow-divider-bottom)
+        
+        &-header-group
+            display table-header-group
+            .{prefix}-table-cell
+                gray-cell()
+        &-footer-group
+            display table-footer-group
+            .{prefix}-table-cell
+                gray-cell()
+        th
+            gray-cell()
+        
+        colgroup>col
+            border 1px none rgb(var(--box-shadow-color) \/ .3)