ustatic-css 0.0.1-b.2

package/src/css/tokens/base/color/base.yaml

@@ -0,0 +1,492 @@
+base:
+  color:
+    transparent:
+      value: "transparent"
+    transparent-hex:
+      value: "transparent"
+    transparent-rgb:
+      value: "transparent"
+    white:
+      value: "#ffffff"
+    white-hex:
+      value: "#ffffff"
+    white-rgb:
+      value: "255, 255, 255"
+    black:
+      value: "#000000"
+    black-hex:
+      value: "#000000"
+    black-rgb:
+      value: "0, 0, 0"
+    background:
+      value: "transparent"
+# -----------------------------------
+    gray:
+      "50":
+        value: &gray_50 "#f9fafb"
+      "50-hex":
+        value: *gray_50
+      "50-rgb":
+        value: &gray_50_rgb "249, 250, 251"
+      "100":
+        value: &gray_100 "#f3f4f6"
+      "100-hex":
+        value: *gray_100
+      "100-rgb":
+        value: &gray_100_rgb "243, 244, 246"
+      "200":
+        value: &gray_200 "#e5e7eb"
+      "200-hex":
+        value: *gray_200
+      "200-rgb":
+        value: &gray_200_rgb "229, 231, 235"
+      "300":
+        value: &gray_300 "#d1d5db"
+      "300-hex":
+        value: *gray_300
+      "300-rgb":
+        value: &gray_300_rgb "209, 213, 219"
+      "400":
+        value: &gray_400 "#9ca3af"
+      "400-hex":
+        value: *gray_400
+      "400-rgb":
+        value: &gray_400_rgb "156, 163, 175"
+      "500":
+        value: &gray_500 "#6b7280"
+      "500-hex":
+        value: *gray_500
+      "500-rgb":
+        value: &gray_500_rgb "107, 114, 128"
+      "600":
+        value: &gray_600 "#4b5563"
+      "600-hex":
+        value: *gray_600
+      "600-rgb":
+        value: &gray_600_rgb "75, 85, 99"
+      "700":
+        value: &gray_700 "#374151"
+      "700-hex":
+        value: *gray_700
+      "700-rgb":
+        value: &gray_700_rgb "55, 65, 81"
+      "800":
+        value: &gray_800 "#1f2937"
+      "800-hex":
+        value: *gray_800
+      "800-rgb":
+        value: &gray_800_rgb "31, 41, 55"
+      "900":
+        value: &gray_900 "#111827"
+      "900-hex":
+        value: *gray_900
+      "900-rgb":
+        value: &gray_900_rgb "17, 24, 39"
+      def:
+        value: *gray_500
+      def-hex:
+        value: *gray_500
+      def-rgb:
+        value: *gray_500_rgb
+    red:
+      "50":
+        value: &red_50 "#fef2f2"
+      "50-hex":
+        value: *red_50
+      "50-rgb":
+        value: &red_50_rgb "254, 242, 242"
+      "100":
+        value: &red_100 "#fee2e2"
+      "100-hex":
+        value: *red_100
+      "100-rgb":
+        value: &red_100_rgb "254, 226, 226"
+      "200":
+        value: &red_200 "#fecaca"
+      "200-hex":
+        value: *red_200
+      "200-rgb":
+        value: &red_200_rgb "254, 202, 202"
+      "300":
+        value: &red_300 "#fca5a5"
+      "300-hex":
+        value: *red_300
+      "300-rgb":
+        value: &red_300_rgb "252, 165, 165"
+      "400":
+        value: &red_400 "#f87171"
+      "400-hex":
+        value: *red_400
+      "400-rgb":
+        value: &red_400_rgb "248, 113, 113"
+      "500":
+        value: &red_500 "#ef4444"
+      "500-hex":
+        value: *red_500
+      "500-rgb":
+        value: &red_500_rgb "239, 68, 68"
+      "600":
+        value: &red_600 "#dc2626"
+      "600-hex":
+        value: *red_600
+      "600-rgb":
+        value: &red_600_rgb "220, 38, 38"
+      "700":
+        value: &red_700 "#b91c1c"
+      "700-hex":
+        value: *red_700
+      "700-rgb":
+        value: &red_700_rgb "185, 28, 28"
+      "800":
+        value: &red_800 "#991b1b"
+      "800-hex":
+        value: *red_800
+      "800-rgb":
+        value: &red_800_rgb "153, 27, 27"
+      "900":
+        value: &red_900 "#7f1d1d"
+      "900-hex":
+        value: *red_900
+      "900-rgb":
+        value: &red_900_rgb "127, 29, 29"
+      def:
+        value: *red_500
+      def-hex:
+        value: *red_500
+      def-rgb:
+        value: *red_500_rgb
+    orange:
+      "50":
+        value: &orange_50 "#fff7ed"
+      "50-hex":
+        value: *orange_50
+      "50-rgb":
+        value: &orange_50_rgb "255, 247, 237"
+      "100":
+        value: &orange_100 "#ffedd5"
+      "100-hex":
+        value: *orange_100
+      "100-rgb":
+        value: &orange_100_rgb "255, 237, 213"
+      "200":
+        value: &orange_200 "#fed7aa"
+      "200-hex":
+        value: *orange_200
+      "200-rgb":
+        value: &orange_200_rgb "254, 215, 170"
+      "300":
+        value: &orange_300 "#fdba74"
+      "300-hex":
+        value: *orange_300
+      "300-rgb":
+        value: &orange_300_rgb "253, 186, 116"
+      "400":
+        value: &orange_400 "#fb923c"
+      "400-hex":
+        value: *orange_400
+      "400-rgb":
+        value: &orange_400_rgb "251, 146, 60"
+      "500":
+        value: &orange_500 "#f97316"
+      "500-hex":
+        value: *orange_500
+      "500-rgb":
+        value: &orange_500_rgb "249, 115, 22"
+      "600":
+        value: &orange_600 "#ea580c"
+      "600-hex":
+        value: *orange_600
+      "600-rgb":
+        value: &orange_600_rgb "234, 88, 12"
+      "700":
+        value: &orange_700 "#c2410c"
+      "700-hex":
+        value: *orange_700
+      "700-rgb":
+        value: &orange_700_rgb "194, 65, 12"
+      "800":
+        value: &orange_800 "#9a3412"
+      "800-hex":
+        value: *orange_800
+      "800-rgb":
+        value: &orange_800_rgb "154, 52, 18"
+      "900":
+        value: &orange_900 "#7c2d12"
+      "900-hex":
+        value: *orange_900
+      "900-rgb":
+        value: &orange_900_rgb "124, 45, 18"
+      def:
+        value: *orange_500
+      def-hex:
+        value: *orange_500
+      def-rgb:
+        value: *orange_500_rgb
+    yellow:
+      "50":
+        value: &yellow_50 "#fefce8"
+      "50-hex":
+        value: *yellow_50
+      "50-rgb":
+        value: &yellow_50_rgb "254, 252, 232"
+      "100":
+        value: &yellow_100 "#fef9c3"
+      "100-hex":
+        value: *yellow_100
+      "100-rgb":
+        value: &yellow_100_rgb "254, 249, 195"
+      "200":
+        value: &yellow_200 "#fef08a"
+      "200-hex":
+        value: *yellow_200
+      "200-rgb":
+        value: &yellow_200_rgb "254, 240, 138"
+      "300":
+        value: &yellow_300 "#fde047"
+      "300-hex":
+        value: *yellow_300
+      "300-rgb":
+        value: &yellow_300_rgb "253, 224, 71"
+      "400":
+        value: &yellow_400 "#facc15"
+      "400-hex":
+        value: *yellow_400
+      "400-rgb":
+        value: &yellow_400_rgb "250, 204, 21"
+      "500":
+        value: &yellow_500 "#eab308"
+      "500-hex":
+        value: *yellow_500
+      "500-rgb":
+        value: &yellow_500_rgb "234, 179, 8"
+      "600":
+        value: &yellow_600 "#ca8a04"
+      "600-hex":
+        value: *yellow_600
+      "600-rgb":
+        value: &yellow_600_rgb "202, 138, 4"
+      "700":
+        value: &yellow_700 "#a16207"
+      "700-hex":
+        value: *yellow_700
+      "700-rgb":
+        value: &yellow_700_rgb "161, 98, 7"
+      "800":
+        value: &yellow_800 "#854d0e"
+      "800-hex":
+        value: *yellow_800
+      "800-rgb":
+        value: &yellow_800_rgb "133, 77, 14"
+      "900":
+        value: &yellow_900 "#713f12"
+      "900-hex":
+        value: *yellow_900
+      "900-rgb":
+        value: &yellow_900_rgb "113, 63, 18"
+      def:
+        value: *yellow_500
+      def-hex:
+        value: *yellow_500
+      def-rgb:
+        value: *yellow_500_rgb
+    green:
+      "50":
+        value: &green_50 "#f0fdf4"
+      "50-hex":
+        value: *green_50
+      "50-rgb":
+        value: &green_50_rgb "240, 253, 244"
+      "100":
+        value: &green_100 "#dcfce7"
+      "100-hex":
+        value: *green_100
+      "100-rgb":
+        value: &green_100_rgb "220, 252, 231"
+      "200":
+        value: &green_200 "#bbf7d0"
+      "200-hex":
+        value: *green_200
+      "200-rgb":
+        value: &green_200_rgb "187, 247, 208"
+      "300":
+        value: &green_300 "#86efac"
+      "300-hex":
+        value: *green_300
+      "300-rgb":
+        value: &green_300_rgb "134, 239, 172"
+      "400":
+        value: &green_400 "#4ade80"
+      "400-hex":
+        value: *green_400
+      "400-rgb":
+        value: &green_400_rgb "74, 222, 128"
+      "500":
+        value: &green_500 "#22c55e"
+      "500-hex":
+        value: *green_500
+      "500-rgb":
+        value: &green_500_rgb "34, 197, 94"
+      "600":
+        value: &green_600 "#16a34a"
+      "600-hex":
+        value: *green_600
+      "600-rgb":
+        value: &green_600_rgb "22, 163, 74"
+      "700":
+        value: &green_700 "#15803d"
+      "700-hex":
+        value: *green_700
+      "700-rgb":
+        value: &green_700_rgb "21, 128, 61"
+      "800":
+        value: &green_800 "#166534"
+      "800-hex":
+        value: *green_800
+      "800-rgb":
+        value: &green_800_rgb "22, 101, 52"
+      "900":
+        value: &green_900 "#14532d"
+      "900-hex":
+        value: *green_900
+      "900-rgb":
+        value: &green_900_rgb "20, 83, 45"
+      def:
+        value: *green_500
+      def-hex:
+        value: *green_500
+      def-rgb:
+        value: *green_500_rgb
+    sky:
+      "50":
+        value: &sky_50 "#f0f9ff"
+      "50-hex":
+        value: *sky_50
+      "50-rgb":
+        value: &sky_50_rgb "240, 249, 255"
+      "100":
+        value: &sky_100 "#e0f2fe"
+      "100-hex":
+        value: *sky_100
+      "100-rgb":
+        value: &sky_100_rgb "224, 242, 254"
+      "200":
+        value: &sky_200 "#bae6fd"
+      "200-hex":
+        value: *sky_200
+      "200-rgb":
+        value: &sky_200_rgb "186, 230, 253"
+      "300":
+        value: &sky_300 "#7dd3fc"
+      "300-hex":
+        value: *sky_300
+      "300-rgb":
+        value: &sky_300_rgb "125, 211, 252"
+      "400":
+        value: &sky_400 "#38bdf8"
+      "400-hex":
+        value: *sky_400
+      "400-rgb":
+        value: &sky_400_rgb "56, 189, 248"
+      "500":
+        value: &sky_500 "#0ea5e9"
+      "500-hex":
+        value: *sky_500
+      "500-rgb":
+        value: &sky_500_rgb "14, 165, 233"
+      "600":
+        value: &sky_600 "#0284c7"
+      "600-hex":
+        value: *sky_600
+      "600-rgb":
+        value: &sky_600_rgb "2, 132, 199"
+      "700":
+        value: &sky_700 "#0369a1"
+      "700-hex":
+        value: *sky_700
+      "700-rgb":
+        value: &sky_700_rgb "3, 105, 161"
+      "800":
+        value: &sky_800 "#075985"
+      "800-hex":
+        value: *sky_800
+      "800-rgb":
+        value: &sky_800_rgb "7, 89, 133"
+      "900":
+        value: &sky_900 "#0c4a6e"
+      "900-hex":
+        value: *sky_900
+      "900-rgb":
+        value: &sky_900_rgb "12, 74, 110"
+      def:
+        value: *sky_500
+      def-hex:
+        value: *sky_500
+      def-rgb:
+        value: *sky_500_rgb
+    blue:
+      "50":
+        value: &blue_50 "#eff6ff"
+      "50-hex":
+        value: *blue_50
+      "50-rgb":
+        value: &blue_50_rgb "239, 246, 255"
+      "100":
+        value: &blue_100 "#dbeafe"
+      "100-hex":
+        value: *blue_100
+      "100-rgb":
+        value: &blue_100_rgb "219, 234, 254"
+      "200":
+        value: &blue_200 "#bfdbfe"
+      "200-hex":
+        value: *blue_200
+      "200-rgb":
+        value: &blue_200_rgb "191, 219, 254"
+      "300":
+        value: &blue_300 "#93c5fd"
+      "300-hex":
+        value: *blue_300
+      "300-rgb":
+        value: &blue_300_rgb "147, 197, 253"
+      "400":
+        value: &blue_400 "#60a5fa"
+      "400-hex":
+        value: *blue_400
+      "400-rgb":
+        value: &blue_400_rgb "96, 165, 250"
+      "500":
+        value: &blue_500 "#3b82f6"
+      "500-hex":
+        value: *blue_500
+      "500-rgb":
+        value: &blue_500_rgb "59, 130, 246"
+      "600":
+        value: &blue_600 "#2563eb"
+      "600-hex":
+        value: *blue_600
+      "600-rgb":
+        value: &blue_600_rgb "37, 99, 235"
+      "700":
+        value: &blue_700 "#1d4ed8"
+      "700-hex":
+        value: *blue_700
+      "700-rgb":
+        value: &blue_700_rgb "29, 78, 216"
+      "800":
+        value: &blue_800 "#1e40af"
+      "800-hex":
+        value: *blue_800
+      "800-rgb":
+        value: &blue_800_rgb "30, 64, 175"
+      "900":
+        value: &blue_900 "#1e3a8a"
+      "900-hex":
+        value: *blue_900
+      "900-rgb":
+        value: &blue_900_rgb "30, 58, 138"
+      def:
+        value: *blue_500
+      def-hex:
+        value: *blue_500
+      def-rgb:
+        value: *blue_500_rgb

package/src/css/tokens/base/color/opacity.yaml

@@ -0,0 +1,4 @@
+base:
+  color:
+    opacity:
+      value: '{base.opacity.100}'

package/src/css/tokens/base/color/variant.yaml

@@ -0,0 +1,18 @@
+base:
+  color:
+    variant: &variants
+      primary:
+        value: '{base.color.primary.def}'
+      secondary:
+        value: '{base.color.secondary.def}'
+      success:
+        value: '{base.color.success.def}'
+      info:
+        value: '{base.color.info.def}'
+      warning:
+        value: '{base.color.warning.def}'
+      danger:
+        value: '{base.color.danger.def}'
+
+    # border: *variants
+    # bg: *variants

package/src/css/tokens/base/cursor/base.yaml

@@ -0,0 +1,18 @@
+base:
+  cursor:
+    pointer:
+      value: 'pointer'
+    move:
+      value: 'move'
+    default:
+      value: 'auto'
+    disabled:
+      value: 'not-allowed'
+    resize-ew:
+      value: 'ew-resize'    
+    resize-ns:
+      value: 'ns-resize'
+    wait:
+      value: 'wait'
+    help:
+      value: 'help'

package/src/css/tokens/base/font/weight.yaml

@@ -0,0 +1,23 @@
+base:
+  font:
+    weight:
+      def:
+        value: '{base.font.weight.regular}'
+      thin:
+        value: '100'
+      extralight:
+        value: '200'
+      light:
+        value: '300'
+      regular:
+        value: '400'
+      medium:
+        value: '500'
+      semibold:
+        value: '600'
+      bold:
+        value: '700'
+      extrabold:
+        value: '800'
+      black:
+        value: '900'

package/src/css/tokens/base/grid/base.yaml

@@ -0,0 +1,9 @@
+base:
+  grid:
+    template:
+      columns:
+        value: '1fr'
+      rows:
+        value: '1fr'
+      colspan:
+        value: '1'