sard 1.0.0-canary.0

package/dist/style/functions.scss

@@ -0,0 +1,54 @@
+@use 'sass:color';
+@use 'sass:math';
+@import './variables.scss';
+
+// scss原生并没有提供字符串的替换函数，需自己编写函数来实现这个功能
+@function str-replace($string, $search, $replace) {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
+  }
+
+  @return $string;
+}
+
+// 把svg字符串编码成符合浏览器css规则的字符串
+@function encode-svg($str) {
+  @return str-replace($str, '#', '%23');
+}
+
+// 把一个数四舍五入到指定位数小数
+@function tofixed($n, $digits: 0) {
+  @return math.div(round($n * math.pow(10, $digits)), math.pow(10, $digits));
+}
+
+// 从一个颜色提取出rgb组成一个字符串，通过赋值给一个css变量，
+// 以便将此变量和一个透明度组成一个rgba从而实现自定义一个颜色的透明度。
+@function extractRGB($color) {
+  @return '#{color.red($color)},#{color.green($color)},#{color.blue($color)}';
+}
+
+// BEM风格类名
+@function bem($block, $element: '', $modifier: '') {
+  $selector: '.' + $sar-namespace + $sar-block-separator + $block;
+
+  @if $element != '' {
+    $selector: $selector + $sar-element-separator + $element;
+  }
+
+  @if $modifier != '' {
+    $selector: $selector + $sar-modifier-separator + $modifier;
+  }
+
+  @return $selector;
+}
+
+@function bem-ns($str) {
+  @return $sar-namespace + '-' + $str;
+}

package/dist/style/index.d.ts

@@ -0,0 +1,2 @@
+export declare const Style: {};
+export default Style;

package/dist/style/index.js

@@ -0,0 +1,2 @@
+export const Style = {};
+export default Style;

package/dist/style/mixins/bem.scss

@@ -0,0 +1,63 @@
+@import '../variables.scss';
+
+@mixin bem($block) {
+  $selector: $sar-namespace + $sar-block-separator + $block;
+
+  .#{$selector} {
+    @content;
+  }
+}
+
+@mixin b() {
+  & {
+    @content;
+  }
+}
+
+@mixin e($elements...) {
+  $selector: ();
+
+  @each $outer in & {
+    @each $element in $elements {
+      $selector: join(
+        $selector,
+        $outer + $sar-element-separator + $element,
+        comma
+      );
+    }
+  }
+
+  @at-root {
+    #{$selector} {
+      @content;
+    }
+  }
+}
+
+@mixin m($modifiers...) {
+  $selector: ();
+
+  @each $outer in & {
+    @each $modifier in $modifiers {
+      $selector: join(
+        $selector,
+        $outer + $sar-modifier-separator + $modifier,
+        comma
+      );
+    }
+  }
+
+  @at-root {
+    #{$selector} {
+      @content;
+    }
+  }
+}
+
+@mixin em($elements, $modifiers...) {
+  @include e($elements) {
+    @include m($modifiers...) {
+      @content;
+    }
+  }
+}

package/dist/style/mixins/border.scss

@@ -0,0 +1,80 @@
+@import './universal.scss';
+
+@mixin border-base($color) {
+  @include universal;
+  position: absolute;
+  z-index: 5;
+  background-color: $color;
+  pointer-events: none;
+  opacity: 1;
+  @content;
+}
+
+@mixin border-vertical-base($color) {
+  @include border-base($color) {
+    left: 0;
+    right: 0;
+    height: 1px;
+    transform: scaleY(0.5);
+    @content;
+  }
+}
+
+@mixin border-horizontal-base($color) {
+  @include border-base($color) {
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    transform: scaleX(0.5);
+    @content;
+  }
+}
+
+@mixin border-top($color) {
+  @include border-vertical-base($color) {
+    top: 0;
+    transform-origin: top center;
+    @content;
+  }
+}
+
+@mixin border-bottom($color) {
+  @include border-vertical-base($color) {
+    bottom: 0;
+    transform-origin: bottom center;
+    @content;
+  }
+}
+
+@mixin border-left($color) {
+  @include border-horizontal-base($color) {
+    left: 0;
+    transform-origin: left center;
+    @content;
+  }
+}
+
+@mixin border-right($color) {
+  @include border-horizontal-base($color) {
+    right: 0;
+    transform-origin: right center;
+    @content;
+  }
+}
+
+@mixin border($color) {
+  @include universal;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 5;
+  width: 200%;
+  height: 200%;
+  border-width: 1px;
+  border-style: solid;
+  border-color: $color;
+  transform-origin: 0 0;
+  transform: scale(0.5);
+  pointer-events: none;
+  @content;
+}

package/dist/style/mixins/disabled.scss

@@ -0,0 +1,9 @@
+@import '../variables.scss';
+@import './env.scss';
+
+@mixin disabled {
+  opacity: $sar-disabled-opacity;
+  @include ifweb {
+    cursor: not-allowed;
+  }
+}

package/dist/style/mixins/env.rn.scss

@@ -0,0 +1,11 @@
+@mixin ifweb {
+  @if false {
+    @content;
+  }
+}
+
+@mixin ifrn {
+  @if true {
+    @content;
+  }
+}

package/dist/style/mixins/env.scss

@@ -0,0 +1,11 @@
+@mixin ifweb {
+  @if true {
+    @content;
+  }
+}
+
+@mixin ifrn {
+  @if false {
+    @content;
+  }
+}

package/dist/style/mixins/fixed.rn.scss

@@ -0,0 +1,3 @@
+@mixin fixed {
+  position: absolute;
+}

package/dist/style/mixins/fixed.scss

@@ -0,0 +1,3 @@
+@mixin fixed {
+  position: fixed;
+}

package/dist/style/mixins/sticky.rn.scss

@@ -0,0 +1,3 @@
+@mixin sticky {
+  position: relative;
+}

package/dist/style/mixins/sticky.scss

@@ -0,0 +1,3 @@
+@mixin sticky {
+  position: sticky;
+}

package/dist/style/mixins/theme.scss

@@ -0,0 +1,11 @@
+@import './env.scss';
+
+@mixin theme($mode: light) {
+  @if $sar-darkmode {
+    @include ifweb {
+      @media (prefers-color-scheme: #{$mode}) {
+        @content;
+      }
+    }
+  }
+}

package/dist/style/mixins/universal.rn.scss

@@ -0,0 +1,2 @@
+@mixin universal {
+}

package/dist/style/mixins/universal.scss

@@ -0,0 +1,6 @@
+@mixin universal {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}

package/dist/style/mixins.scss

@@ -0,0 +1,8 @@
+@import './mixins/bem.scss';
+@import './mixins/border.scss';
+@import './mixins/disabled.scss';
+@import './mixins/env.scss';
+@import './mixins/fixed.scss';
+@import './mixins/sticky.scss';
+@import './mixins/theme.scss';
+@import './mixins/universal.scss';

package/dist/style/utils.scss

@@ -0,0 +1,130 @@
+@import './variables.scss';
+
+// 颜色
+@each $colors
+  in (
+    $sar-grays,
+    $sar-blues,
+    $sar-indigos,
+    $sar-purples,
+    $sar-pinks,
+    $sar-reds,
+    $sar-oranges,
+    $sar-yellows,
+    $sar-greens,
+    $sar-teals,
+    $sar-cyans
+  )
+{
+  @each $name, $color in $colors {
+    // 文字颜色
+    .sar-#{$name} {
+      color: $color;
+    }
+
+    // 背景色
+    .sar-#{$name}-bg {
+      background-color: $color;
+    }
+  }
+}
+
+// 主题色
+@each $name, $colors in $sar-theme-colors {
+  $color: nth($colors, 1);
+
+  // 文字颜色
+  .sar-#{$name} {
+    color: $color;
+  }
+
+  // 背景色
+  .sar-#{$name}-bg {
+    background-color: $color;
+  }
+}
+
+// 圆角
+.sar-rounded-xs {
+  border-radius: $sar-rounded-xs;
+}
+
+.sar-rounded-sm {
+  border-radius: $sar-rounded-sm;
+}
+
+.sar-rounded {
+  border-radius: $sar-rounded;
+}
+
+.sar-rounded-lg {
+  border-radius: $sar-rounded-lg;
+}
+
+.sar-rounded-xl {
+  border-radius: $sar-rounded-xl;
+}
+
+.sar-rounded-full {
+  border-radius: $sar-rounded-full;
+}
+
+// 字号
+.sar-text-xs {
+  font-size: $sar-text-xs;
+}
+
+.sar-text-sm {
+  font-size: $sar-text-sm;
+}
+
+.sar-text-base {
+  font-size: $sar-text-base;
+}
+
+.sar-text-lg {
+  font-size: $sar-text-lg;
+}
+
+.sar-text-xl {
+  font-size: $sar-text-xl;
+}
+
+.sar-text-2xl {
+  font-size: $sar-text-2xl;
+}
+
+// 字重
+.sar-font-bold {
+  font-weight: $sar-font-bold;
+}
+
+.sar-font-normal {
+  font-weight: $sar-font-normal;
+}
+
+// 阴影
+.sar-shadow-sm {
+  box-shadow: $sar-shadow-sm;
+}
+
+.sar-shadow {
+  box-shadow: $sar-shadow;
+}
+
+.sar-shadow-lg {
+  box-shadow: $sar-shadow-lg;
+}
+
+// 黑色遮罩
+.sar-mask-legible {
+  background-color: $sar-mask-legible;
+}
+
+.sar-mask-default {
+  background-color: $sar-mask;
+}
+
+.sar-mask-illegible {
+  background-color: $sar-mask-illegible;
+}