@nanarino/stylus 1.0.0

package/lib/typography/tag&kbd.styl

@@ -0,0 +1,32 @@
+tag()
+    white-space nowrap
+    box-sizing border-box
+    padding var(--font-offset-parent)
+    border-radius var(--border-radius-md)
+    // vertical-align middle
+
+.{prefix}-code:where(code)
+
+    // --color-code var(--primary-9)
+    // --background-color-code var(--primary-1)
+
+    color rgb(var(--color-code, var(--primary-9)))
+    background-color rgb(var(--background-color-code, var(--primary-1)))
+    tag()
+
+
+.{prefix}-tag
+.{prefix}-kbd:where(kbd)
+
+    // --color-tag var(--primary-6)
+    // --background-color-tag var(--primary-1)
+    
+    display inline-block
+    border 1px none rgb(var(--color-tag, var(--primary-6)))
+    color rgb(var(--color-tag, var(--primary-6)))
+    background-color rgb(var(--background-color-tag, var(--primary-1)))
+    tag()
+
+    /.{prefix}-kbd:where(kbd)
+        border-bottom-style solid
+        padding var(--font-offset-parent) calc(var(--font-offset-parent) * 2)

package/lib/typography/title.styl

@@ -0,0 +1,73 @@
+set_title_styl(size=6)
+    line-height var(_get_var_by(
+        line-height,
+        'h%s' % size
+    ))
+    // line-height @height
+    font-size var(_get_var_by(
+        font-size,
+        'h%s' % size
+    ))
+    
+    & ^[0]-subtitle
+        line-height var(_get_var_by(
+            line-height,
+            7 - size
+        ))
+        font-size var(_get_var_by(
+            font-size,
+            7 - size
+        ))
+
+
+.{prefix}-title
+    // &>*
+    //     display inline-flex
+    //     vertical-align middle
+    //     align-items center
+
+    padding 0
+    // mixin_line_clamp(1)
+    font-weight normal
+    margin 1em 0
+    set_title_styl()
+    &-subtitle
+        margin-left var(--font-offset-parent)
+        vertical-align bottom
+        color rgb(var(_get_var_by('gray', 6)))
+        
+
+    for i in range(1 6)
+        /h{i}&
+            set_title_styl(i)
+            set_has_prefix()
+        &:where([data-size=\"{i}\"])
+            set_title_styl(i)
+
+
+set_prefix()
+    // --color-title-prefix var(--gray-3)
+
+    position relative
+    padding-left calc(var(--font-offset-parent) * 3)
+
+    &::before
+        position absolute
+        content ""
+        width 4px
+        border-radius 2px
+        left 0
+        top var(--font-offset-parent)
+        bottom var(--font-offset-parent)
+        background-color rgb(var(--color-title-prefix, var(--color-blockquote-prefix, var(--gray-3))))
+        ^[-1]:where([data-primary])
+            --color-title-prefix var(--primary-5)
+
+
+.{prefix}-blockquote
+    margin 0
+    color rgb(var(--color-blockquote, var(--gray-7)))
+
+.{prefix}-blockquote
+.{prefix}-title:where([data-has-prefix])
+    set_prefix()

package/lib/variables/color.styl

@@ -0,0 +1,259 @@
+:root
+    background rgb(var(--white))
+    color rgb(var(--black))
+:root, :root[data-theme=light]
+    --white 255 255 255
+    --black 0 0 0
+    color-scheme light
+:root[data-theme=dark]
+    --white 0 0 0
+    --black 255 255 255
+    color-scheme dark
+/**
+ * @desc 配色，完全使用arco.design的默认配色
+ *
+ * @copy https://arco.design/palette/list
+ *
+ */
+:root, :root[data-theme=light]
+    --red-1 255 236 232
+    --red-2 253 205 197
+    --red-3 251 172 163
+    --red-4 249 137 129
+    --red-5 247 101 96
+    --red-6 245 63 63
+    --red-7 203 39 45
+    --red-8 161 21 30
+    --red-9 119 8 19
+    --red-10 77 0 10
+    --orange-1 255 247 232
+    --orange-2 255 228 186
+    --orange-3 255 207 139
+    --orange-4 255 182 93
+    --orange-5 255 154 46
+    --orange-6 255 125 0
+    --orange-7 210 95 0
+    --orange-8 166 69 0
+    --orange-9 121 46 0
+    --orange-10 77 27 0
+    --gold-1 255 252 232
+    --gold-2 253 244 191
+    --gold-3 252 233 150
+    --gold-4 250 220 109
+    --gold-5 249 204 69
+    --gold-6 247 186 30
+    --gold-7 204 146 19
+    --gold-8 162 109 10
+    --gold-9 119 75 4
+    --gold-10 77 45 0
+    --yellow-1 254 255 232
+    --yellow-2 254 254 190
+    --yellow-3 253 250 148
+    --yellow-4 252 242 107
+    --yellow-5 251 232 66
+    --yellow-6 250 220 25
+    --yellow-7 207 175 15
+    --yellow-8 163 132 8
+    --yellow-9 120 93 3
+    --yellow-10 77 56 0
+    --lime-1 252 255 232
+    --lime-2 237 248 187
+    --lime-3 220 241 144
+    --lime-4 201 233 104
+    --lime-5 181 226 65
+    --lime-6 159 219 29
+    --lime-7 126 183 18
+    --lime-8 95 148 10
+    --lime-9 67 112 4
+    --lime-10 42 77 0
+    --green-1 232 255 234
+    --green-2 175 240 181
+    --green-3 123 225 136
+    --green-4 76 210 99
+    --green-5 35 195 67
+    --green-6 0 180 42
+    --green-7 0 154 41
+    --green-8 0 128 38
+    --green-9 0 102 34
+    --green-10 0 77 28
+    --cyan-1 232 255 251
+    --cyan-2 183 244 236
+    --cyan-3 137 233 224
+    --cyan-4 94 223 214
+    --cyan-5 55 212 207
+    --cyan-6 20 201 201
+    --cyan-7 13 165 170
+    --cyan-8 7 130 139
+    --cyan-9 3 97 108
+    --cyan-10 0 66 77
+    --blue-1 232 247 255
+    --blue-2 195 231 254
+    --blue-3 159 212 253
+    --blue-4 123 192 252
+    --blue-5 87 169 251
+    --blue-6 52 145 250
+    --blue-7 32 108 207
+    --blue-8 17 75 163
+    --blue-9 6 48 120
+    --blue-10 0 26 77
+    --purple-1 245 232 255
+    --purple-2 221 190 246
+    --purple-3 195 150 237
+    --purple-4 168 113 227
+    --purple-5 141 78 218
+    --purple-6 114 46 209
+    --purple-7 85 29 176
+    --purple-8 60 16 143
+    --purple-9 39 6 110
+    --purple-10 22 0 77
+    --pinkpurple-1 255 232 251
+    --pinkpurple-2 247 186 239
+    --pinkpurple-3 240 142 230
+    --pinkpurple-4 232 101 223
+    --pinkpurple-5 225 62 219
+    --pinkpurple-6 217 26 217
+    --pinkpurple-7 176 16 182
+    --pinkpurple-8 138 9 147
+    --pinkpurple-9 101 3 112
+    --pinkpurple-10 66 0 77
+    --magenta-1 255 232 241
+    --magenta-2 253 194 219
+    --magenta-3 251 157 199
+    --magenta-4 249 121 183
+    --magenta-5 247 84 168
+    --magenta-6 245 49 157
+    --magenta-7 203 30 131
+    --magenta-8 161 16 105
+    --magenta-9 119 6 79
+    --magenta-10 77 0 52
+    --gray-1 248 248 248
+    --gray-2 240 240 240
+    --gray-3 224 224 224
+    --gray-4 196 196 196
+    --gray-5 169 169 169
+    --gray-6 134 134 134
+    --gray-7 107 107 107
+    --gray-8 78 78 78
+    --gray-9 39 39 39
+    --gray-10 29 29 29
+:root[data-theme=dark]
+    --red-1 77 0 10
+    --red-2 119 6 17
+    --red-3 161 22 31
+    --red-4 203 46 52
+    --red-5 245 78 78
+    --red-6 247 105 101
+    --red-7 249 141 134
+    --red-8 251 176 167
+    --red-9 253 209 202
+    --red-10 255 240 236
+    --orange-1 77 27 0
+    --orange-2 121 48 4
+    --orange-3 166 75 10
+    --orange-4 210 105 19
+    --orange-5 255 141 31
+    --orange-6 255 150 38
+    --orange-7 255 179 87
+    --orange-8 255 205 135
+    --orange-9 255 227 184
+    --orange-10 255 247 232
+    --gold-1 77 45 0
+    --gold-2 119 75 4
+    --gold-3 162 111 15
+    --gold-4 204 150 31
+    --gold-5 247 192 52
+    --gold-6 249 204 68
+    --gold-7 250 220 108
+    --gold-8 252 233 149
+    --gold-9 253 244 190
+    --gold-10 255 252 232
+    --yellow-1 77 56 0
+    --yellow-2 120 94 7
+    --yellow-3 163 134 20
+    --yellow-4 207 179 37
+    --yellow-5 250 225 60
+    --yellow-6 251 233 75
+    --yellow-7 252 243 116
+    --yellow-8 253 250 157
+    --yellow-9 254 254 198
+    --yellow-10 254 255 240
+    --lime-1 42 77 0
+    --lime-2 68 112 6
+    --lime-3 98 148 18
+    --lime-4 132 183 35
+    --lime-5 168 219 57
+    --lime-6 184 226 75
+    --lime-7 203 233 112
+    --lime-8 222 241 152
+    --lime-9 238 248 194
+    --lime-10 253 255 238
+    --green-1 0 77 28
+    --green-2 4 102 37
+    --green-3 10 128 45
+    --green-4 18 154 55
+    --green-5 29 180 64
+    --green-6 39 195 70
+    --green-7 80 210 102
+    --green-8 126 225 139
+    --green-9 178 240 183
+    --green-10 235 255 236
+    --cyan-1 0 66 77
+    --cyan-2 6 97 108
+    --cyan-3 17 131 139
+    --cyan-4 31 166 170
+    --cyan-5 48 201 201
+    --cyan-6 63 212 207
+    --cyan-7 102 223 215
+    --cyan-8 144 233 225
+    --cyan-9 190 244 237
+    --cyan-10 240 255 252
+    --blue-1 0 26 77
+    --blue-2 5 47 120
+    --blue-3 19 76 163
+    --blue-4 41 113 207
+    --blue-5 70 154 250
+    --blue-6 90 170 251
+    --blue-7 125 193 252
+    --blue-8 161 213 253
+    --blue-9 198 232 254
+    --blue-10 234 248 255
+    --purple-1 22 0 77
+    --purple-2 39 6 110
+    --purple-3 62 19 143
+    --purple-4 90 37 176
+    --purple-5 123 61 209
+    --purple-6 142 81 218
+    --purple-7 169 116 227
+    --purple-8 197 154 237
+    --purple-9 223 194 246
+    --purple-10 247 237 255
+    --pinkpurple-1 66 0 77
+    --pinkpurple-2 101 3 112
+    --pinkpurple-3 138 13 147
+    --pinkpurple-4 176 27 182
+    --pinkpurple-5 217 46 217
+    --pinkpurple-6 225 61 219
+    --pinkpurple-7 232 102 223
+    --pinkpurple-8 240 146 230
+    --pinkpurple-9 247 193 240
+    --pinkpurple-10 255 242 253
+    --magenta-1 77 0 52
+    --magenta-2 119 8 80
+    --magenta-3 161 23 108
+    --magenta-4 203 43 136
+    --magenta-5 245 69 166
+    --magenta-6 247 86 169
+    --magenta-7 249 122 184
+    --magenta-8 251 158 200
+    --magenta-9 253 195 219
+    --magenta-10 255 232 241
+    --gray-1 23 23 23
+    --gray-2 46 46 46
+    --gray-3 72 72 72
+    --gray-4 95 95 95
+    --gray-5 120 120 120
+    --gray-6 146 146 146
+    --gray-7 171 171 171
+    --gray-8 197 197 197
+    --gray-9 223 223 223
+    --gray-10 246 246 246

package/lib/variables/shadow.styl

@@ -0,0 +1,21 @@
+/**
+ * 希望不被继承 所以用通配符
+ */
+*
+    --box-shadow-color var(--gray-4)
+    
+    /**
+     * 边框
+     */
+    --box-shadow-divider-left inset 1px 0 0 0 rgb(var(--box-shadow-color) \/ .25)
+    --box-shadow-divider-top inset 0 1px 0 0 rgb(var(--box-shadow-color) \/ .25)
+    --box-shadow-divider-right inset -1px 0 0 0 rgb(var(--box-shadow-color) \/ .25)
+    --box-shadow-divider-bottom inset 0 -1px 0 0 rgb(var(--box-shadow-color) \/ .25)
+
+    /**
+     * 外阴影
+     */
+    --box-shadow-drop-top 0 -6px 12px 4px rgb(var(--box-shadow-color) \/ .25), 0 -3px 28px 0 rgb(var(--box-shadow-color) \/ .4), 0 -1px 2px -1px rgb(var(--box-shadow-color) \/ .56)
+    --box-shadow-drop-left -6px 0 12px 4px rgb(var(--box-shadow-color) \/ .25), -3px 0 6px 0 rgb(var(--box-shadow-color) \/ .4), -1px 0 2px -1px rgb(var(--box-shadow-color) \/ .56)
+    --box-shadow-drop-right 6px 0 12px 4px rgb(var(--box-shadow-color) \/ .25), 3px 0 6px 0 rgb(var(--box-shadow-color) \/ .4), 1px 0 2px -1px rgb(var(--box-shadow-color) \/ .56)
+    --box-shadow-drop-bottom 0 6px 12px 4px rgb(var(--box-shadow-color) \/ .25), 0 3px 6px 0 rgb(var(--box-shadow-color) \/ .4), 0 1px 2px -1px rgb(var(--box-shadow-color) \/ .56)

package/lib/variables/size.styl

@@ -0,0 +1,52 @@
+:root
+    /**
+     * 圆角
+     */
+    --border-radius-sm 4px
+    --border-radius-md 8px
+    --border-radius-lg 16px
+    
+    /**
+     * 字号
+     */
+    --font-size-1 12px                   // 12
+    --font-size-2 @--font-size-1 + 2px   // 14
+    --font-size-3 @--font-size-2 + 2px   // 16
+    --font-size-4 @--font-size-3 + 4px   // 20
+    --font-size-5 @--font-size-4 + 4px   // 24
+    --font-size-6 @--font-size-5 + 6px   // 30
+    --font-size-7 @--font-size-6 + 8px   // 38
+    --font-size-8 @--font-size-7 + 8px   // 46
+    --font-size-9 @--font-size-8 + 10px  // 56
+    --font-size-10 @--font-size-9 + 12px // 68
+    --font-size-base @--font-size-1
+    --font-size-body @--font-size-2
+    --font-size-h6 @--font-size-2
+    --font-size-h5 @--font-size-3
+    --font-size-h4 @--font-size-4
+    --font-size-h3 @--font-size-5
+    --font-size-h2 @--font-size-6
+    --font-size-h1 @--font-size-7
+
+    /**
+     * 行高
+     */
+    --font-offset-parent 4px
+    --line-height-1 @--font-size-1 + @--font-offset-parent * 2   // 20
+    --line-height-2 @--font-size-2 + @--font-offset-parent * 2   // 22
+    --line-height-3 @--font-size-3 + @--font-offset-parent * 2   // 24
+    --line-height-4 @--font-size-4 + @--font-offset-parent * 2   // 28
+    --line-height-5 @--font-size-5 + @--font-offset-parent * 2   // 32
+    --line-height-6 @--font-size-6 + @--font-offset-parent * 2   // 38
+    --line-height-7 @--font-size-7 + @--font-offset-parent * 2   // 46
+    --line-height-8 @--font-size-8 + @--font-offset-parent * 2   // 54
+    --line-height-9 @--font-size-9 + @--font-offset-parent * 2   // 64
+    --line-height-10 @--font-size-10 + @--font-offset-parent * 2 // 76
+    --line-height-base @--line-height-1
+    --line-height-body @--line-height-2
+    --line-height-h6 @--line-height-2
+    --line-height-h5 @--line-height-3
+    --line-height-h4 @--line-height-4
+    --line-height-h3 @--line-height-5
+    --line-height-h2 @--line-height-6
+    --line-height-h1 @--line-height-7

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@nanarino/stylus",
+  "description": "style lib",
+  "version": "1.0.0",
+  "main": "./dist/style.min.css",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nanarino/stylus.git"
+  },
+  "homepage": "https://nanarino.github.io/stylus/",
+  "keywords": [
+    "ui",
+    "stylus"
+  ],
+  "author": "kogawananari",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/nanarino/stylus/issues"
+  },
+  "peerDependencies": {
+    "stylus": "^0.64.0"
+  },
+  "devDependencies": {
+    "@astrojs/mdx": "^4.3.6",
+    "@fontsource/jetbrains-mono": "^5.2.8",
+    "@holy-two/data-theme": "^0.0.7",
+    "@types/node": "^22.18.6",
+    "astro": "^5.13.10",
+    "astro-icon": "^1.1.5",
+    "copy-to-clipboard": "^3.3.3",
+    "css-doodle": "^0.43.1",
+    "csso-cli": "^4.0.2",
+    "dedent": "^1.7.0",
+    "rm-all": "^1.1.1",
+    "smooth-corners": "^1.1.0",
+    "style-to-object": "^1.0.9",
+    "stylus": "^0.64.0"
+  },
+  "files": [
+    "dist",
+    "lib"
+  ],
+  "scripts": {
+    "dev": "astro dev --host",
+    "start": "astro dev",
+    "build:docs": "astro build",
+    "build:demo": "rma ./dist && mkdir dist && stylus ./demo/index.styl -o ./dist/demo.css",
+    "build:styl": "rma ./dist && mkdir dist && stylus ./lib/index.styl -p | csso -o ./dist/style.min.css",
+    "build:gh-pages": "astro build --base /stylus/",
+    "preview": "astro preview"
+  }
+}