@nopon-web/styles 0.0.51 → 0.2.0

package/theme.scss

@@ -1,157 +1,17 @@
-@use "sass:map";
-@use "./_variables" as var;
-
-// -----------------------------
-// 🎨 颜色设计变量命名规范
-// -----------------------------
-// 设计参考: https://tailwindcss.com/docs/colors
-// 采用设计系统分级（Design Token）风格，使用结构化命名，方便主题维护与自动生成 CSS 变量。
-// 命名格式: $<color-name>-<scale>
-//
-// - color-name: 颜色语义标识或色调（如 primary、success、gray）
-// - scale: 数值越小表示颜色越浅（如 50 接近白色，900 接近黑色）
-//
-// 🌟 建议使用分级: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
-// - 500 为主色基准值（推荐 UI 主色）
-// - 其他等级用于 hover、disabled、背景、边框等场景
-//
-// 🔄 可统一生成 CSS Variables，用于 :root 或主题切换
-// e.g. $primary-500 → --primary-500
-
-// 主题色
-$theme-color-50: #ede6ff;
-$theme-color-500: #6e64c8;
-
-// 基础色(背景/字体)
-$color-base-50: #fff;
-$color-base-250: #f5f6f7;
-$color-base-500: #eee;
-$color-base-inverse-50: #777777;
-$color-base-inverse-250: #333333;
-$color-base-inverse-500: #000000;
-
-// 警告色
-$color-danger-500: #ff7b7b;
-
-// -----------------------------
-// 🔤 字体设计变量命名规范
-// -----------------------------
-// 设计参考: https://tailwindcss.com/docs/font-size
-// 参考标准: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#values
-// xx-small、x-small、small、medium、large、x-large、xx-large、xxx-large(基于用户默认字体大小（medium）的绝对大小关键字)
-
-$text-small-map: (
-	// 14px
-	0: 0.875,
-	// 12px
-	1: 0.75,
-	// 10px
-	2: 0.625,
-	// 8px
-	3: 0.5,
-	// 6px
-	4: 0.375,
-	// 4px
-	5: 0.25,
-	// 2px
-	6: 0.125
-);
-
-$text-large-map: (
-	// 18px
-	0: 1.125,
-	// 20px
-	1: 1.25,
-	// 24px
-	2: 1.5,
-	// 30px
-	3: 1.875,
-	4: 2.25,
-	5: 3,
-	6: 3.75,
-	7: 4.5,
-	8: 6,
-	9: 8
-);
-
-// 获取字体大小比例
-@function text-get-ratio($scale, $step) {
-	$ratio: 1; // 默认值
-
-	@if $scale == small and map.has-key($text-small-map, $step) {
-		$ratio: map.get($text-small-map, $step);
-	} @else if $scale == large and map.has-key($text-large-map, $step) {
-		$ratio: map.get($text-large-map, $step);
-	} @else {
-		@warn "text-get-ratio(): 无效的 scale 或 step，返回基础值";
-	}
-
-	@return $ratio;
-}
-
-// 主题变量
-@mixin vars {
-	// 🌈 主题色
-	--theme-color-50: #{$theme-color-50};
-	--theme-color-500: #{$theme-color-500};
-
-	// 🎨 基础颜色
-	--color-base-50: #{$color-base-50};
-	--color-base-250: #{$color-base-250};
-	--color-base-500: #{$color-base-500};
-	--color-base-inverse-50: #{$color-base-inverse-50};
-	--color-base-inverse-250: #{$color-base-inverse-250};
-	--color-base-inverse-500: #{$color-base-inverse-500};
-	--color-danger-500: #{$color-danger-500};
-
-	// 🔤 尺寸基准值，控制设计稿与真实页面的缩放比例
-	--size-root: #{var.$size-root};
-
-	// 🔤 最小单位：等效于 1px：
-	// - 当使用 rem 方案：1px = calc(1 / var(--size-root) * 1rem)
-	// - 当使用 vw 方案：1px = calc(1 / var(--size-root) * 100vw)
-	--size-unit: calc(1 / var(--size-root) * 1rem);
-
-	// 🔠 字体尺寸（根据 --size-root 等比缩放）
-	--text-6xs: calc(var(--text-base) * #{text-get-ratio(small, 6)});
-	--text-5xs: calc(var(--text-base) * #{text-get-ratio(small, 5)});
-	--text-4xs: calc(var(--text-base) * #{text-get-ratio(small, 4)});
-	--text-3xs: calc(var(--text-base) * #{text-get-ratio(small, 3)});
-	--text-2xs: calc(var(--text-base) * #{text-get-ratio(small, 2)});
-	--text-xs: calc(var(--text-base) * #{text-get-ratio(small, 1)});
-	--text-sm: calc(var(--text-base) * #{text-get-ratio(small, 0)});
-	--text-base: calc(16 * var(--size-unit));
-	--text-lg: calc(var(--text-base) * #{text-get-ratio(large, 0)});
-	--text-xl: calc(var(--text-base) * #{text-get-ratio(large, 1)});
-	--text-2xl: calc(var(--text-base) * #{text-get-ratio(large, 2)});
-	--text-3xl: calc(var(--text-base) * #{text-get-ratio(large, 3)});
-	--text-4xl: calc(var(--text-base) * #{text-get-ratio(large, 4)});
-	--text-5xl: calc(var(--text-base) * #{text-get-ratio(large, 5)});
-	--text-6xl: calc(var(--text-base) * #{text-get-ratio(large, 6)});
-	--text-7xl: calc(var(--text-base) * #{text-get-ratio(large, 7)});
-	--text-8xl: calc(var(--text-base) * #{text-get-ratio(large, 8)});
-	--text-9xl: calc(var(--text-base) * #{text-get-ratio(large, 9)});
-
-	// 🧱 层级控制
-	--z-index-base: #{var.$z-index-base};
-
-	// 🎯 语义色扩展（从基础色继承）
-	--color-text-500: var(--color-base-inverse-500);
-	--color-text-inverse-500: var(--color-base-50);
-	--color-icon-500: var(--color-base-inverse-500);
-	--color-border-500: var(--color-base-500);
-	--color-bg-500: var(--color-base-250);
-
-	// 🌙 暗色模式变量切换（通过类名控制）
-	&.dark {
-		--color-base-inverse-50: #{$color-base-50};
-		--color-base-inverse-250: #{$color-base-250};
-		--color-base-inverse-500: #{$color-base-500};
-
-		--color-base-50: #{$color-base-inverse-500};
-		--color-base-250: #{$color-base-inverse-250};
-		--color-base-500: #{$color-base-inverse-50};
-	}
-
-	font-size: calc(var(--size-root) * 1px);
+@use "./function/index" as fn;
+@use "./mixin/index" as mx;
+
+@mixin vars() {
+  font-size: calc(#{fn.var-get(size, root)} * 1px);
+  @include mx.var-register();
+
+  &.dark {
+    --color-base-50: #{fn.var-get-value(color, base, inverse, 500)};
+    --color-base-250: #{fn.var-get-value(color, base, inverse, 250)};
+    --color-base-500: #{fn.var-get-value(color, base, inverse, 50)};
+
+    --color-base-inverse-50: #{fn.var-get-value(color, base, 50)};
+    --color-base-inverse-250: #{fn.var-get-value(color, base, 250)};
+    --color-base-inverse-500: #{fn.var-get-value(color, base, 500)};
+  }
 }

package/_function.scss

@@ -1,64 +0,0 @@
-@use "sass:string";
-@use "./_variables" as var;
-@use "_config" as config;
-
-// bem("block", "element", "modifier") => "s_block__element--modifier"
-@function bem($block, $element: "", $modifier: "") {
-	$name: config.$namespace + config.$common-separator + $block;
-
-	@if $element != "" {
-		$name: $name + config.$element-separator + $element;
-	}
-
-	@if $modifier != "" {
-		$name: $name + config.$modifier-separator + $modifier;
-	}
-
-	@return $name;
-}
-
-@function when($state) {
-	$state-selector: config.$state-prefix + config.$common-separator + $state;
-
-	@return ".#{$state-selector}";
-}
-
-@function join-class($parts...) {
-	$result: "";
-
-	@each $part in $parts {
-		@if $part != null and $part != "" {
-			@if $result == "" {
-				$result: $part;
-			} @else {
-				$result: $result + config.$common-separator + $part;
-			}
-		}
-	}
-
-	@return $result;
-}
-
-// 最小尺寸单位转换
-@function u($value) {
-  @return calc(#{$value} * var(--size-unit));
-}
-
-@function get-image($image) {
-	// 已经是合法CSS值的情况
-	@if string.index($image, "url(") or
-		string.index($image, "gradient(") or
-		string.index($image, "var(") or
-		string.index($image, "data:")
-	{
-		@return $image;
-	}
-
-	// 空值或none
-	@if $image ==none or $image ==null {
-		@return none;
-	}
-
-	// 默认处理为路径
-	@return url($image);
-}

package/_mixin.scss

@@ -1,193 +0,0 @@
-@use "sass:map";
-
-@use "_config" as *;
-@use "_variables" as var;
-@use "_function" as func;
-
-@forward "_config";
-@forward "_variables";
-@forward "_function";
-
-// BEM
-$B: null;
-$__bem-context: null;
-
-@mixin b($block) {
-	$B: $namespace + $common-separator + $block !global;
-
-	.#{$B} {
-		$__bem-context: "block" !global;
-		@content;
-		$__bem-context: null !global;
-	}
-}
-
-@mixin e($element) {
-	@if $__bem-context != "block" {
-		@error "e() can only be used inside b()";
-	}
-
-	@each $E in $element {
-		.#{$B + $element-separator + $E} {
-			$__bem-context: "element" !global;
-			@content;
-			$__bem-context: "block" !global;
-		}
-	}
-}
-
-@mixin m($modifier) {
-	@if $__bem-context != "block" and $__bem-context != "element" {
-		@error "m() can only be used inside b() or e()";
-	}
-
-	@each $M in $modifier {
-		&#{$modifier-separator + $M} {
-			@content;
-		}
-	}
-}
-
-@mixin t($names: null) {
-	@if $__bem-context != "block" {
-		@error "t() can only be used inside b()";
-	}
-
-	// 解析 themes 列表
-	$themes: ();
-	@if $names == null {
-		@if $theme-name == null or $theme-name == "" {
-			@error "$theme-name must be set globally or passed to @include t().";
-		}
-		$themes: ($theme-name);
-	} @else {
-		$themes: $names;
-	}
-
-	// 逐个生成 theme 选择器
-	@each $theme in $themes {
-		@if $theme == null or $theme == "" {
-			@error "Invalid theme name in @include t().";
-		}
-
-		$T: $theme-prefix + $common-separator + $theme;
-
-		&.#{$B + $modifier-separator + $T} {
-			@content;
-		}
-	}
-}
-
-@mixin when($state) {
-	$state-selector: $state-prefix + $common-separator + $state;
-
-	@at-root {
-		@if & {
-			&.#{$state-selector} {
-				@content;
-			}
-		} @else {
-			.#{$state-selector} {
-				@content;
-			}
-		}
-	}
-}
-
-@mixin absolute-center($x: true, $y: true) {
-	$x-value: 0;
-	$y-value: 0;
-
-	position: absolute;
-
-	@if $x {
-		left: 50%;
-		$x-value: -50%;
-	}
-
-	@if $y {
-		top: 50%;
-		$y-value: -50%;
-	}
-
-	transform: translate(#{$x-value}, #{$y-value});
-}
-
-@mixin set-z-index($number) {
-	z-index: calc(var(--z-index-base, var.$z-index-base) + $number);
-}
-
-// 背景
-@mixin bg($w, $h, $image) {
-	width: $w;
-	height: $h;
-	background-size: 100% 100%;
-	background-repeat: no-repeat;
-	background-position: center;
-	background-image: func.get-image($image);
-}
-
-@mixin bg-text($image) {
-	background-clip: text;
-	-webkit-background-clip: text;
-	color: transparent;
-	-webkit-text-fill-color: transparent;
-	background-image: func.get-image($image);
-}
-
-@mixin frame-border($frame) {
-	$image: map.get($frame, image);
-	$inset: map.get($frame, inset);
-	$slice: map.get($frame, slice);
-	$fill: map.get($frame, fill);
-	$repeat: map.get($frame, repeat, stretch);
-
-	@if not $image or not $inset or not $slice {
-		@error "frame-border: image / inset / slice are required";
-	}
-
-	@if $fill {
-		border-image-slice: #{$slice} fill;
-	} @else {
-		border-image-slice: #{$slice};
-	}
-
-	box-sizing: border-box;
-	border-style: solid;
-	border-width: $inset;
-	border-image-source: func.get-image($image);
-	border-image-repeat: $repeat;
-}
-
-@mixin text-stroke($size, $color: #000, $blur: 0) {
-	text-shadow:
-		#{$size} #{$size} #{$blur} #{$color},
-		-#{$size} #{$size} #{$blur} #{$color},
-		#{$size} -#{$size} #{$blur} #{$color},
-		-#{$size} -#{$size} #{$blur} #{$color};
-}
-
-@mixin text-shadow($size, $color: #000, $offset-x: func.u(2), $offset-y: #{u(2)}) {
-	position: relative;
-	z-index: 0;
-	font-size: 0;
-	line-height: 1;
-	font-size: #{func.u(10)};
-
-	> * {
-		font-size: $size;
-	}
-
-	&::before {
-		content: attr(data-text);
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		z-index: -1;
-		color: $color;
-		font-size: $size;
-		white-space: nowrap;
-		// 偏移量
-		transform: translate(calc(-50% + #{$offset-x}), calc(-50% + #{$offset-y}));
-	}
-}

package/atomic.scss

@@ -1,60 +0,0 @@
-// flex
-.flex {
-	display: flex;
-}
-.flex-1 {
-	flex: 1 1 0%;
-}
-.flex-auto {
-	flex: 1 1 auto;
-}
-.flex-initial {
-	flex: 0 1 auto;
-}
-.flex-none {
-	flex: none;
-}
-.justify-normal {
-	justify-content: normal;
-}
-.justify-start {
-	justify-content: flex-start;
-}
-.justify-end {
-	justify-content: flex-end;
-}
-.justify-center {
-	justify-content: center;
-}
-.justify-between {
-	justify-content: space-between;
-}
-.justify-around {
-	justify-content: space-around;
-}
-.justify-evenly {
-	justify-content: space-evenly;
-}
-.justify-stretch {
-	justify-content: stretch;
-}
-.items-start {
-	align-items: flex-start;
-}
-.items-end {
-	align-items: flex-end;
-}
-.items-center {
-	align-items: center;
-}
-.items-baseline {
-	align-items: baseline;
-}
-.items-stretch {
-	align-items: stretch;
-}
-.text-overflow {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}