@sanity-labs/ui-poc 0.0.1-alpha.0

package/src/css/utilities/tokenized/color.css

@@ -0,0 +1,223 @@
+/* black */
+.sui-black { color: var(--black); }
+.sui-bg-black { background-color: var(--black); }
+
+/* white */
+.sui-white { color: var(--white); }
+.sui-bg-white { background-color: var(--white); }
+
+/* blue */
+.sui-blue-50 { color: var(--blue-50); }
+.sui-blue-100 { color: var(--blue-100); }
+.sui-blue-200 { color: var(--blue-200); }
+.sui-blue-300 { color: var(--blue-300); }
+.sui-blue-400 { color: var(--blue-400); }
+.sui-blue-500 { color: var(--blue-500); }
+.sui-blue-600 { color: var(--blue-600); }
+.sui-blue-700 { color: var(--blue-700); }
+.sui-blue-800 { color: var(--blue-800); }
+.sui-blue-900 { color: var(--blue-900); }
+.sui-blue-950 { color: var(--blue-950); }
+.sui-bg-blue-50 { background-color: var(--blue-50); }
+.sui-bg-blue-100 { background-color: var(--blue-100); }
+.sui-bg-blue-200 { background-color: var(--blue-200); }
+.sui-bg-blue-300 { background-color: var(--blue-300); }
+.sui-bg-blue-400 { background-color: var(--blue-400); }
+.sui-bg-blue-500 { background-color: var(--blue-500); }
+.sui-bg-blue-600 { background-color: var(--blue-600); }
+.sui-bg-blue-700 { background-color: var(--blue-700); }
+.sui-bg-blue-800 { background-color: var(--blue-800); }
+.sui-bg-blue-900 { background-color: var(--blue-900); }
+.sui-bg-blue-950 { background-color: var(--blue-950); }
+
+/* cyan */
+.sui-cyan-50 { color: var(--cyan-50); }
+.sui-cyan-100 { color: var(--cyan-100); }
+.sui-cyan-200 { color: var(--cyan-200); }
+.sui-cyan-300 { color: var(--cyan-300); }
+.sui-cyan-400 { color: var(--cyan-400); }
+.sui-cyan-500 { color: var(--cyan-500); }
+.sui-cyan-600 { color: var(--cyan-600); }
+.sui-cyan-700 { color: var(--cyan-700); }
+.sui-cyan-800 { color: var(--cyan-800); }
+.sui-cyan-900 { color: var(--cyan-900); }
+.sui-cyan-950 { color: var(--cyan-950); }
+.sui-bg-cyan-50 { background-color: var(--cyan-50); }
+.sui-bg-cyan-100 { background-color: var(--cyan-100); }
+.sui-bg-cyan-200 { background-color: var(--cyan-200); }
+.sui-bg-cyan-300 { background-color: var(--cyan-300); }
+.sui-bg-cyan-400 { background-color: var(--cyan-400); }
+.sui-bg-cyan-500 { background-color: var(--cyan-500); }
+.sui-bg-cyan-600 { background-color: var(--cyan-600); }
+.sui-bg-cyan-700 { background-color: var(--cyan-700); }
+.sui-bg-cyan-800 { background-color: var(--cyan-800); }
+.sui-bg-cyan-900 { background-color: var(--cyan-900); }
+.sui-bg-cyan-950 { background-color: var(--cyan-950); }
+
+/* gray */
+.sui-gray-50 { color: var(--gray-50); }
+.sui-gray-100 { color: var(--gray-100); }
+.sui-gray-200 { color: var(--gray-200); }
+.sui-gray-300 { color: var(--gray-300); }
+.sui-gray-400 { color: var(--gray-400); }
+.sui-gray-500 { color: var(--gray-500); }
+.sui-gray-600 { color: var(--gray-600); }
+.sui-gray-700 { color: var(--gray-700); }
+.sui-gray-800 { color: var(--gray-800); }
+.sui-gray-900 { color: var(--gray-900); }
+.sui-gray-950 { color: var(--gray-950); }
+.sui-bg-gray-50 { background-color: var(--gray-50); }
+.sui-bg-gray-100 { background-color: var(--gray-100); }
+.sui-bg-gray-200 { background-color: var(--gray-200); }
+.sui-bg-gray-300 { background-color: var(--gray-300); }
+.sui-bg-gray-400 { background-color: var(--gray-400); }
+.sui-bg-gray-500 { background-color: var(--gray-500); }
+.sui-bg-gray-600 { background-color: var(--gray-600); }
+.sui-bg-gray-700 { background-color: var(--gray-700); }
+.sui-bg-gray-800 { background-color: var(--gray-800); }
+.sui-bg-gray-900 { background-color: var(--gray-900); }
+.sui-bg-gray-950 { background-color: var(--gray-950); }
+
+/* green */
+.sui-green-50 { color: var(--green-50); }
+.sui-green-100 { color: var(--green-100); }
+.sui-green-200 { color: var(--green-200); }
+.sui-green-300 { color: var(--green-300); }
+.sui-green-400 { color: var(--green-400); }
+.sui-green-500 { color: var(--green-500); }
+.sui-green-600 { color: var(--green-600); }
+.sui-green-700 { color: var(--green-700); }
+.sui-green-800 { color: var(--green-800); }
+.sui-green-900 { color: var(--green-900); }
+.sui-green-950 { color: var(--green-950); }
+.sui-bg-green-50 { background-color: var(--green-50); }
+.sui-bg-green-100 { background-color: var(--green-100); }
+.sui-bg-green-200 { background-color: var(--green-200); }
+.sui-bg-green-300 { background-color: var(--green-300); }
+.sui-bg-green-400 { background-color: var(--green-400); }
+.sui-bg-green-500 { background-color: var(--green-500); }
+.sui-bg-green-600 { background-color: var(--green-600); }
+.sui-bg-green-700 { background-color: var(--green-700); }
+.sui-bg-green-800 { background-color: var(--green-800); }
+.sui-bg-green-900 { background-color: var(--green-900); }
+.sui-bg-green-950 { background-color: var(--green-950); }
+
+/* magenta */
+.sui-magenta-50 { color: var(--magenta-50); }
+.sui-magenta-100 { color: var(--magenta-100); }
+.sui-magenta-200 { color: var(--magenta-200); }
+.sui-magenta-300 { color: var(--magenta-300); }
+.sui-magenta-400 { color: var(--magenta-400); }
+.sui-magenta-500 { color: var(--magenta-500); }
+.sui-magenta-600 { color: var(--magenta-600); }
+.sui-magenta-700 { color: var(--magenta-700); }
+.sui-magenta-800 { color: var(--magenta-800); }
+.sui-magenta-900 { color: var(--magenta-900); }
+.sui-magenta-950 { color: var(--magenta-950); }
+.sui-bg-magenta-50 { background-color: var(--magenta-50); }
+.sui-bg-magenta-100 { background-color: var(--magenta-100); }
+.sui-bg-magenta-200 { background-color: var(--magenta-200); }
+.sui-bg-magenta-300 { background-color: var(--magenta-300); }
+.sui-bg-magenta-400 { background-color: var(--magenta-400); }
+.sui-bg-magenta-500 { background-color: var(--magenta-500); }
+.sui-bg-magenta-600 { background-color: var(--magenta-600); }
+.sui-bg-magenta-700 { background-color: var(--magenta-700); }
+.sui-bg-magenta-800 { background-color: var(--magenta-800); }
+.sui-bg-magenta-900 { background-color: var(--magenta-900); }
+.sui-bg-magenta-950 { background-color: var(--magenta-950); }
+
+/* orange */
+.sui-orange-50 { color: var(--orange-50); }
+.sui-orange-100 { color: var(--orange-100); }
+.sui-orange-200 { color: var(--orange-200); }
+.sui-orange-300 { color: var(--orange-300); }
+.sui-orange-400 { color: var(--orange-400); }
+.sui-orange-500 { color: var(--orange-500); }
+.sui-orange-600 { color: var(--orange-600); }
+.sui-orange-700 { color: var(--orange-700); }
+.sui-orange-800 { color: var(--orange-800); }
+.sui-orange-900 { color: var(--orange-900); }
+.sui-orange-950 { color: var(--orange-950); }
+.sui-bg-orange-50 { background-color: var(--orange-50); }
+.sui-bg-orange-100 { background-color: var(--orange-100); }
+.sui-bg-orange-200 { background-color: var(--orange-200); }
+.sui-bg-orange-300 { background-color: var(--orange-300); }
+.sui-bg-orange-400 { background-color: var(--orange-400); }
+.sui-bg-orange-500 { background-color: var(--orange-500); }
+.sui-bg-orange-600 { background-color: var(--orange-600); }
+.sui-bg-orange-700 { background-color: var(--orange-700); }
+.sui-bg-orange-800 { background-color: var(--orange-800); }
+.sui-bg-orange-900 { background-color: var(--orange-900); }
+.sui-bg-orange-950 { background-color: var(--orange-950); }
+
+/* purple */
+.sui-purple-50 { color: var(--purple-50); }
+.sui-purple-100 { color: var(--purple-100); }
+.sui-purple-200 { color: var(--purple-200); }
+.sui-purple-300 { color: var(--purple-300); }
+.sui-purple-400 { color: var(--purple-400); }
+.sui-purple-500 { color: var(--purple-500); }
+.sui-purple-600 { color: var(--purple-600); }
+.sui-purple-700 { color: var(--purple-700); }
+.sui-purple-800 { color: var(--purple-800); }
+.sui-purple-900 { color: var(--purple-900); }
+.sui-purple-950 { color: var(--purple-950); }
+.sui-bg-purple-50 { background-color: var(--purple-50); }
+.sui-bg-purple-100 { background-color: var(--purple-100); }
+.sui-bg-purple-200 { background-color: var(--purple-200); }
+.sui-bg-purple-300 { background-color: var(--purple-300); }
+.sui-bg-purple-400 { background-color: var(--purple-400); }
+.sui-bg-purple-500 { background-color: var(--purple-500); }
+.sui-bg-purple-600 { background-color: var(--purple-600); }
+.sui-bg-purple-700 { background-color: var(--purple-700); }
+.sui-bg-purple-800 { background-color: var(--purple-800); }
+.sui-bg-purple-900 { background-color: var(--purple-900); }
+.sui-bg-purple-950 { background-color: var(--purple-950); }
+
+/* red */
+.sui-red-50 { color: var(--red-50); }
+.sui-red-100 { color: var(--red-100); }
+.sui-red-200 { color: var(--red-200); }
+.sui-red-300 { color: var(--red-300); }
+.sui-red-400 { color: var(--red-400); }
+.sui-red-500 { color: var(--red-500); }
+.sui-red-600 { color: var(--red-600); }
+.sui-red-700 { color: var(--red-700); }
+.sui-red-800 { color: var(--red-800); }
+.sui-red-900 { color: var(--red-900); }
+.sui-red-950 { color: var(--red-950); }
+.sui-bg-red-50 { background-color: var(--red-50); }
+.sui-bg-red-100 { background-color: var(--red-100); }
+.sui-bg-red-200 { background-color: var(--red-200); }
+.sui-bg-red-300 { background-color: var(--red-300); }
+.sui-bg-red-400 { background-color: var(--red-400); }
+.sui-bg-red-500 { background-color: var(--red-500); }
+.sui-bg-red-600 { background-color: var(--red-600); }
+.sui-bg-red-700 { background-color: var(--red-700); }
+.sui-bg-red-800 { background-color: var(--red-800); }
+.sui-bg-red-900 { background-color: var(--red-900); }
+.sui-bg-red-950 { background-color: var(--red-950); }
+
+/* yellow */
+.sui-yellow-50 { color: var(--yellow-50); }
+.sui-yellow-100 { color: var(--yellow-100); }
+.sui-yellow-200 { color: var(--yellow-200); }
+.sui-yellow-300 { color: var(--yellow-300); }
+.sui-yellow-400 { color: var(--yellow-400); }
+.sui-yellow-500 { color: var(--yellow-500); }
+.sui-yellow-600 { color: var(--yellow-600); }
+.sui-yellow-700 { color: var(--yellow-700); }
+.sui-yellow-800 { color: var(--yellow-800); }
+.sui-yellow-900 { color: var(--yellow-900); }
+.sui-yellow-950 { color: var(--yellow-950); }
+.sui-bg-yellow-50 { background-color: var(--yellow-50); }
+.sui-bg-yellow-100 { background-color: var(--yellow-100); }
+.sui-bg-yellow-200 { background-color: var(--yellow-200); }
+.sui-bg-yellow-300 { background-color: var(--yellow-300); }
+.sui-bg-yellow-400 { background-color: var(--yellow-400); }
+.sui-bg-yellow-500 { background-color: var(--yellow-500); }
+.sui-bg-yellow-600 { background-color: var(--yellow-600); }
+.sui-bg-yellow-700 { background-color: var(--yellow-700); }
+.sui-bg-yellow-800 { background-color: var(--yellow-800); }
+.sui-bg-yellow-900 { background-color: var(--yellow-900); }
+.sui-bg-yellow-950 { background-color: var(--yellow-950); }

package/src/css/utilities/tokenized/container.css

@@ -0,0 +1,8 @@
+@breakpoints {
+  .sui-width0 { width: var(--container-0); }
+  .sui-width1 { width: var(--container-1); }
+  .sui-width2 { width: var(--container-2); }
+  .sui-width3 { width: var(--container-3); }
+  .sui-width4 { width: var(--container-4); }
+  .sui-width5 { width: var(--container-5); }
+}

package/src/css/utilities/tokenized/fontFamily.css

@@ -0,0 +1,2 @@
+.sui-font-sans { font-family: var(--sans); }
+.sui-font-mono { font-family: var(--mono); }

package/src/css/utilities/tokenized/fontWeight.css

@@ -0,0 +1,4 @@
+.sui-weight-bold { font-weight: var(--bold); }
+.sui-weight-medium { font-weight: var(--medium); }
+.sui-weight-regular { font-weight: var(--regular); }
+.sui-weight-semibold { font-weight: var(--semibold); }

package/src/css/utilities/tokenized/gap.css

@@ -0,0 +1,34 @@
+@breakpoints {
+  .sui-gap0 { gap: var(--space-0); }
+  .sui-gap1 { gap: var(--space-1); }
+  .sui-gap2 { gap: var(--space-2); }
+  .sui-gap3 { gap: var(--space-3); }
+  .sui-gap4 { gap: var(--space-4); }
+  .sui-gap5 { gap: var(--space-5); }
+  .sui-gap6 { gap: var(--space-6); }
+  .sui-gap7 { gap: var(--space-7); }
+  .sui-gap8 { gap: var(--space-8); }
+  .sui-gap9 { gap: var(--space-9); }
+
+  .sui-row-gap0 { row-gap: var(--space-0); }
+  .sui-row-gap1 { row-gap: var(--space-1); }
+  .sui-row-gap2 { row-gap: var(--space-2); }
+  .sui-row-gap3 { row-gap: var(--space-3); }
+  .sui-row-gap4 { row-gap: var(--space-4); }
+  .sui-row-gap5 { row-gap: var(--space-5); }
+  .sui-row-gap6 { row-gap: var(--space-6); }
+  .sui-row-gap7 { row-gap: var(--space-7); }
+  .sui-row-gap8 { row-gap: var(--space-8); }
+  .sui-row-gap9 { row-gap: var(--space-9); }
+
+  .sui-column-gap0 { column-gap: var(--space-0); }
+  .sui-column-gap1 { column-gap: var(--space-1); }
+  .sui-column-gap2 { column-gap: var(--space-2); }
+  .sui-column-gap3 { column-gap: var(--space-3); }
+  .sui-column-gap4 { column-gap: var(--space-4); }
+  .sui-column-gap5 { column-gap: var(--space-5); }
+  .sui-column-gap6 { column-gap: var(--space-6); }
+  .sui-column-gap7 { column-gap: var(--space-7); }
+  .sui-column-gap8 { column-gap: var(--space-8); }
+  .sui-column-gap9 { column-gap: var(--space-9); }
+}

package/src/css/utilities/tokenized/index.css

@@ -0,0 +1,9 @@
+@import './color.css';
+@import './container.css';
+@import './inset.css';
+@import './margin.css';
+@import './padding.css';
+@import './radius.css';
+@import './shadow.css';
+@import './typography.css';
+@import './fontWeight.css';

package/src/css/utilities/tokenized/inset.css

@@ -0,0 +1,56 @@
+@breakpoints {
+  .sui-inset0 { inset: var(--space-0); }
+  .sui-inset1 { inset: var(--space-1); }
+  .sui-inset2 { inset: var(--space-2); }
+  .sui-inset3 { inset: var(--space-3); }
+  .sui-inset4 { inset: var(--space-4); }
+  .sui-inset5 { inset: var(--space-5); }
+  .sui-inset6 { inset: var(--space-6); }
+  .sui-inset7 { inset: var(--space-7); }
+  .sui-inset8 { inset: var(--space-8); }
+  .sui-inset9 { inset: var(--space-9); }
+
+  .sui-top0 { top: var(--space-0); }
+  .sui-top1 { top: var(--space-1); }
+  .sui-top2 { top: var(--space-2); }
+  .sui-top3 { top: var(--space-3); }
+  .sui-top4 { top: var(--space-4); }
+  .sui-top5 { top: var(--space-5); }
+  .sui-top6 { top: var(--space-6); }
+  .sui-top7 { top: var(--space-7); }
+  .sui-top8 { top: var(--space-8); }
+  .sui-top9 { top: var(--space-9); }
+
+  .sui-right0 { right: var(--space-0); }
+  .sui-right1 { right: var(--space-1); }
+  .sui-right2 { right: var(--space-2); }
+  .sui-right3 { right: var(--space-3); }
+  .sui-right4 { right: var(--space-4); }
+  .sui-right5 { right: var(--space-5); }
+  .sui-right6 { right: var(--space-6); }
+  .sui-right7 { right: var(--space-7); }
+  .sui-right8 { right: var(--space-8); }
+  .sui-right9 { right: var(--space-9); }
+
+  .sui-bottom0 { bottom: var(--space-0); }
+  .sui-bottom1 { bottom: var(--space-1); }
+  .sui-bottom2 { bottom: var(--space-2); }
+  .sui-bottom3 { bottom: var(--space-3); }
+  .sui-bottom4 { bottom: var(--space-4); }
+  .sui-bottom5 { bottom: var(--space-5); }
+  .sui-bottom6 { bottom: var(--space-6); }
+  .sui-bottom7 { bottom: var(--space-7); }
+  .sui-bottom8 { bottom: var(--space-8); }
+  .sui-bottom9 { bottom: var(--space-9); }
+
+  .sui-left0 { left: var(--space-0); }
+  .sui-left1 { left: var(--space-1); }
+  .sui-left2 { left: var(--space-2); }
+  .sui-left3 { left: var(--space-3); }
+  .sui-left4 { left: var(--space-4); }
+  .sui-left5 { left: var(--space-5); }
+  .sui-left6 { left: var(--space-6); }
+  .sui-left7 { left: var(--space-7); }
+  .sui-left8 { left: var(--space-8); }
+  .sui-left9 { left: var(--space-9); }
+}

package/src/css/utilities/tokenized/margin.css

@@ -0,0 +1,92 @@
+@breakpoints {
+  /* margin */
+  .sui-m0 { margin: var(--space-0); }
+  .sui-m1 { margin: var(--space-1); }
+  .sui-m2 { margin: var(--space-2); }
+  .sui-m3 { margin: var(--space-3); }
+  .sui-m4 { margin: var(--space-4); }
+  .sui-m5 { margin: var(--space-5); }
+  .sui-m6 { margin: var(--space-6); }
+  .sui-m7 { margin: var(--space-7); }
+  .sui-m8 { margin: var(--space-8); }
+  .sui-m9 { margin: var(--space-9); }
+  .sui-m-auto { margin: auto; }
+
+  /* margin-x */
+  .sui-mx0 { margin-left: var(--space-0); margin-right: var(--space-0); }
+  .sui-mx1 { margin-left: var(--space-1); margin-right: var(--space-1); }
+  .sui-mx2 { margin-left: var(--space-2); margin-right: var(--space-2); }
+  .sui-mx3 { margin-left: var(--space-3); margin-right: var(--space-3); }
+  .sui-mx4 { margin-left: var(--space-4); margin-right: var(--space-4); }
+  .sui-mx5 { margin-left: var(--space-5); margin-right: var(--space-5); }
+  .sui-mx6 { margin-left: var(--space-6); margin-right: var(--space-6); }
+  .sui-mx7 { margin-left: var(--space-7); margin-right: var(--space-7); }
+  .sui-mx8 { margin-left: var(--space-8); margin-right: var(--space-8); }
+  .sui-mx9 { margin-left: var(--space-9); margin-right: var(--space-9); }
+  .sui-mx-auto { margin-left: auto; margin-right: auto; }
+
+  /* margin-y */
+  .sui-my0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
+  .sui-my1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
+  .sui-my2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
+  .sui-my3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
+  .sui-my4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
+  .sui-my5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
+  .sui-my6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
+  .sui-my7 { margin-top: var(--space-7); margin-bottom: var(--space-7); }
+  .sui-my8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
+  .sui-my9 { margin-top: var(--space-9); margin-bottom: var(--space-9); }
+  .sui-my-auto { margin-top: auto; margin-bottom: auto; }
+
+  /* margin-top */
+  .sui-mt0 { margin-top: var(--space-0); }
+  .sui-mt1 { margin-top: var(--space-1); }
+  .sui-mt2 { margin-top: var(--space-2); }
+  .sui-mt3 { margin-top: var(--space-3); }
+  .sui-mt4 { margin-top: var(--space-4); }
+  .sui-mt5 { margin-top: var(--space-5); }
+  .sui-mt6 { margin-top: var(--space-6); }
+  .sui-mt7 { margin-top: var(--space-7); }
+  .sui-mt8 { margin-top: var(--space-8); }
+  .sui-mt9 { margin-top: var(--space-9); }
+  .sui-mt-auto { margin-top: auto; }
+
+  /* margin-right */
+  .sui-mr0 { margin-right: var(--space-0); }
+  .sui-mr1 { margin-right: var(--space-1); }
+  .sui-mr2 { margin-right: var(--space-2); }
+  .sui-mr3 { margin-right: var(--space-3); }
+  .sui-mr4 { margin-right: var(--space-4); }
+  .sui-mr5 { margin-right: var(--space-5); }
+  .sui-mr6 { margin-right: var(--space-6); }
+  .sui-mr7 { margin-right: var(--space-7); }
+  .sui-mr8 { margin-right: var(--space-8); }
+  .sui-mr9 { margin-right: var(--space-9); }
+  .sui-mr-auto { margin-right: auto; }
+
+  /* margin-bottom */
+  .sui-mb0 { margin-bottom: var(--space-0); }
+  .sui-mb1 { margin-bottom: var(--space-1); }
+  .sui-mb2 { margin-bottom: var(--space-2); }
+  .sui-mb3 { margin-bottom: var(--space-3); }
+  .sui-mb4 { margin-bottom: var(--space-4); }
+  .sui-mb5 { margin-bottom: var(--space-5); }
+  .sui-mb6 { margin-bottom: var(--space-6); }
+  .sui-mb7 { margin-bottom: var(--space-7); }
+  .sui-mb8 { margin-bottom: var(--space-8); }
+  .sui-mb9 { margin-bottom: var(--space-9); }
+  .sui-mb-auto { margin-bottom: auto; }
+
+  /* margin-left */
+  .sui-ml0 { margin-left: var(--space-0); }
+  .sui-ml1 { margin-left: var(--space-1); }
+  .sui-ml2 { margin-left: var(--space-2); }
+  .sui-ml3 { margin-left: var(--space-3); }
+  .sui-ml4 { margin-left: var(--space-4); }
+  .sui-ml5 { margin-left: var(--space-5); }
+  .sui-ml6 { margin-left: var(--space-6); }
+  .sui-ml7 { margin-left: var(--space-7); }
+  .sui-ml8 { margin-left: var(--space-8); }
+  .sui-ml9 { margin-left: var(--space-9); }
+  .sui-ml-auto { margin-left: auto; }
+}

package/src/css/utilities/tokenized/padding.css

@@ -0,0 +1,85 @@
+@breakpoints {
+  /* padding */
+  .sui-p0 { padding: var(--space-0); }
+  .sui-p1 { padding: var(--space-1); }
+  .sui-p2 { padding: var(--space-2); }
+  .sui-p3 { padding: var(--space-3); }
+  .sui-p4 { padding: var(--space-4); }
+  .sui-p5 { padding: var(--space-5); }
+  .sui-p6 { padding: var(--space-6); }
+  .sui-p7 { padding: var(--space-7); }
+  .sui-p8 { padding: var(--space-8); }
+  .sui-p9 { padding: var(--space-9); }
+
+  /* padding-x */
+  .sui-px0 { padding-left: var(--space-0); padding-right: var(--space-0); }
+  .sui-px1 { padding-left: var(--space-1); padding-right: var(--space-1); }
+  .sui-px2 { padding-left: var(--space-2); padding-right: var(--space-2); }
+  .sui-px3 { padding-left: var(--space-3); padding-right: var(--space-3); }
+  .sui-px4 { padding-left: var(--space-4); padding-right: var(--space-4); }
+  .sui-px5 { padding-left: var(--space-5); padding-right: var(--space-5); }
+  .sui-px6 { padding-left: var(--space-6); padding-right: var(--space-6); }
+  .sui-px7 { padding-left: var(--space-7); padding-right: var(--space-7); }
+  .sui-px8 { padding-left: var(--space-8); padding-right: var(--space-8); }
+  .sui-px9 { padding-left: var(--space-9); padding-right: var(--space-9); }
+
+  /* padding-y */
+  .sui-py0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
+  .sui-py1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
+  .sui-py2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
+  .sui-py3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
+  .sui-py4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
+  .sui-py5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
+  .sui-py6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
+  .sui-py7 { padding-top: var(--space-7); padding-bottom: var(--space-7); }
+  .sui-py8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
+  .sui-py9 { padding-top: var(--space-9); padding-bottom: var(--space-9); }
+
+  /* padding-top */
+  .sui-pt0 { padding-top: var(--space-0); }
+  .sui-pt1 { padding-top: var(--space-1); }
+  .sui-pt2 { padding-top: var(--space-2); }
+  .sui-pt3 { padding-top: var(--space-3); }
+  .sui-pt4 { padding-top: var(--space-4); }
+  .sui-pt5 { padding-top: var(--space-5); }
+  .sui-pt6 { padding-top: var(--space-6); }
+  .sui-pt7 { padding-top: var(--space-7); }
+  .sui-pt8 { padding-top: var(--space-8); }
+  .sui-pt9 { padding-top: var(--space-9); }
+
+  /* padding-right */
+  .sui-pr0 { padding-right: var(--space-0); }
+  .sui-pr1 { padding-right: var(--space-1); }
+  .sui-pr2 { padding-right: var(--space-2); }
+  .sui-pr3 { padding-right: var(--space-3); }
+  .sui-pr4 { padding-right: var(--space-4); }
+  .sui-pr5 { padding-right: var(--space-5); }
+  .sui-pr6 { padding-right: var(--space-6); }
+  .sui-pr7 { padding-right: var(--space-7); }
+  .sui-pr8 { padding-right: var(--space-8); }
+  .sui-pr9 { padding-right: var(--space-9); }
+
+  /* padding-bottom */
+  .sui-pb0 { padding-bottom: var(--space-0); }
+  .sui-pb1 { padding-bottom: var(--space-1); }
+  .sui-pb2 { padding-bottom: var(--space-2); }
+  .sui-pb3 { padding-bottom: var(--space-3); }
+  .sui-pb4 { padding-bottom: var(--space-4); }
+  .sui-pb5 { padding-bottom: var(--space-5); }
+  .sui-pb6 { padding-bottom: var(--space-6); }
+  .sui-pb7 { padding-bottom: var(--space-7); }
+  .sui-pb8 { padding-bottom: var(--space-8); }
+  .sui-pb9 { padding-bottom: var(--space-9); }
+
+  /* padding-left */
+  .sui-pl0 { padding-left: var(--space-0); }
+  .sui-pl1 { padding-left: var(--space-1); }
+  .sui-pl2 { padding-left: var(--space-2); }
+  .sui-pl3 { padding-left: var(--space-3); }
+  .sui-pl4 { padding-left: var(--space-4); }
+  .sui-pl5 { padding-left: var(--space-5); }
+  .sui-pl6 { padding-left: var(--space-6); }
+  .sui-pl7 { padding-left: var(--space-7); }
+  .sui-pl8 { padding-left: var(--space-8); }
+  .sui-pl9 { padding-left: var(--space-9); }
+}

package/src/css/utilities/tokenized/radius.css

@@ -0,0 +1,8 @@
+.sui-radius0 { border-radius: var(--radius-0); }
+.sui-radius1 { border-radius: var(--radius-1); }
+.sui-radius2 { border-radius: var(--radius-2); }
+.sui-radius3 { border-radius: var(--radius-3); }
+.sui-radius4 { border-radius: var(--radius-4); }
+.sui-radius5 { border-radius: var(--radius-5); }
+.sui-radius6 { border-radius: var(--radius-6); }
+.sui-radius-round { border-radius: var(--radius-round); }

package/src/css/utilities/tokenized/shadow.css

@@ -0,0 +1,6 @@
+.sui-shadow0 { box-shadow: var(--shadow0); }
+.sui-shadow1 { box-shadow: var(--shadow1); }
+.sui-shadow2 { box-shadow: var(--shadow2); }
+.sui-shadow3 { box-shadow: var(--shadow3); }
+.sui-shadow4 { box-shadow: var(--shadow4); }
+.sui-shadow5 { box-shadow: var(--shadow5); }

package/src/css/utilities/tokenized/typography.css

@@ -0,0 +1,31 @@
+@breakpoints {
+  .sui-text-body0 { font: var(--body-0); }
+  .sui-text-body1 { font: var(--body-1); }
+  .sui-text-body2 { font: var(--body-2); }
+  .sui-text-body3 { font: var(--body-3); }
+  .sui-text-body4 { font: var(--body-4); }
+
+  .sui-text-code0 { font: var(--code-0); }
+  .sui-text-code1 { font: var(--code-1); }
+  .sui-text-code2 { font: var(--code-2); }
+  .sui-text-code3 { font: var(--code-3); }
+  .sui-text-code4 { font: var(--code-4); }
+
+  .sui-text-heading0 { font: var(--heading-0); }
+  .sui-text-heading1 { font: var(--heading-1); }
+  .sui-text-heading2 { font: var(--heading-2); }
+  .sui-text-heading3 { font: var(--heading-3); }
+  .sui-text-heading4 { font: var(--heading-4); }
+  .sui-text-heading5 { font: var(--heading-5); }
+  .sui-text-heading6 { font: var(--heading-6); }
+  .sui-text-heading7 { font: var(--heading-7); }
+  .sui-text-heading8 { font: var(--heading-8); }
+  .sui-text-heading9 { font: var(--heading-9); }
+
+  .sui-text-label0 { font: var(--label-0); }
+  .sui-text-label1 { font: var(--label-1); }
+  .sui-text-label2 { font: var(--label-2); }
+  .sui-text-label3 { font: var(--label-3); }
+  .sui-text-label4 { font: var(--label-4); }
+  .sui-text-label5 { font: var(--label-5); }
+}

package/src/index.css

@@ -0,0 +1,2 @@
+@import 'components/index.css';
+@import 'css/index.css';

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components/Box'

package/src/props/border.ts

@@ -0,0 +1,51 @@
+import {type PropDef} from '../types/PropDef'
+import {RADIUS, type Radius} from '../types/Radius'
+import {type Responsive} from '../types/Responsive'
+
+export type BorderProps = {
+  /** CSS **border** property */
+  border?: Responsive<boolean>
+  /** CSS **border-top** property */
+  borderTop?: Responsive<boolean>
+  /** CSS **border-right** property */
+  borderRight?: Responsive<boolean>
+  /** CSS **border-bottom** property */
+  borderBottom?: Responsive<boolean>
+  /** CSS **border-left** property */
+  borderLeft?: Responsive<boolean>
+  /** CSS **border-radius** property */
+  radius?: Responsive<Radius>
+}
+
+export const borderProps: Record<string, PropDef> = {
+  border: {
+    type: 'boolean',
+    className: 'border',
+    inverse: 'border-none',
+  },
+  borderTop: {
+    type: 'boolean',
+    className: 'border-top',
+    inverse: 'border-top-none',
+  },
+  borderRight: {
+    type: 'boolean',
+    className: 'border-right',
+    inverse: 'border-right-none',
+  },
+  borderBottom: {
+    type: 'boolean',
+    className: 'border-bottom',
+    inverse: 'border-bottom-none',
+  },
+  borderLeft: {
+    type: 'boolean',
+    className: 'border-left',
+    inverse: 'border-left-none',
+  },
+  radius: {
+    type: 'union',
+    className: 'radius',
+    values: RADIUS,
+  },
+}

package/src/props/flexChild.ts

@@ -0,0 +1,29 @@
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+
+export type FlexChildProps = {
+  /** CSS **flex-basis** property */
+  flexBasis?: Responsive<string>
+  /** CSS **flex-grow** property */
+  flexGrow?: Responsive<number>
+  /** CSS **flex-shrink** property */
+  flexShrink?: Responsive<number>
+}
+
+export const flexChildProps: Record<string, PropDef> = {
+  flexBasis: {
+    type: 'string',
+    className: 'flex-basis',
+    variable: '--flex-basis',
+  },
+  flexGrow: {
+    type: 'number',
+    className: 'flex-grow',
+    variable: '--flex-grow',
+  },
+  flexShrink: {
+    type: 'number',
+    className: 'flex-shrink',
+    variable: '--flex-shrink',
+  },
+}