@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

package/src/css/classes/dynamic/readme.md

@@ -0,0 +1,3 @@
+# Dynamic classes
+
+Dynamic classes apply a custom property that is defined at runtime via a component's `style` attribute.

package/src/css/classes/dynamic/width.css

@@ -0,0 +1,7 @@
+@breakpoints {
+  .sui-width { width: var(--width); }
+  .sui-min-width { min-width: var(--min-width); }
+  .sui-max-width { max-width: var(--max-width); }
+  .sui-width-full { width: 100%; }
+  .sui-width-auto { width: auto; }
+}

package/src/css/classes/dynamic/z-index.css

@@ -0,0 +1,3 @@
+@breakpoints {
+  .sui-z-index { z-index: var(--z-index); }
+}

package/src/css/classes/generic/display.css

@@ -0,0 +1,10 @@
+@breakpoints {
+  .sui-display-block { display: block; }
+  .sui-display-inline-block { display: inline-block; }
+  .sui-display-inline { display: inline; }
+  .sui-display-flex { display: flex; }
+  .sui-display-inline-flex { display: inline-flex; }
+  .sui-display-grid { display: grid; }
+  .sui-display-inline-grid { display: inline-grid; }
+  .sui-display-none { display: none; }
+}

package/src/css/classes/generic/flex.css

@@ -0,0 +1,24 @@
+@breakpoints {
+  .sui-align-items-flex-start { align-items: flex-start; }
+  .sui-align-items-center { align-items: center; }
+  .sui-align-items-flex-end { align-items: flex-end; }
+  .sui-align-items-baseline { align-items: baseline; }
+  .sui-align-items-stretch { align-items: stretch; }
+
+  .sui-justify-content-flex-start { justify-content: flex-start; }
+  .sui-justify-content-center { justify-content: center; }
+  .sui-justify-content-flex-end { justify-content: flex-end; }
+  .sui-justify-content-space-between { justify-content: space-between; }
+  .sui-justify-content-space-around { justify-content: space-around; }
+  .sui-justify-content-space-evenly { justify-content: space-evenly; }
+  .sui-justify-content-stretch { justify-content: stretch; }
+
+  .sui-flex-direction-row { flex-direction: row; }
+  .sui-flex-direction-row-reverse { flex-direction: row-reverse; }
+  .sui-flex-direction-column { flex-direction: column; }
+  .sui-flex-direction-column-reverse { flex-direction: column-reverse; }
+
+  .sui-flex-wrap { flex-wrap: wrap; }
+  .sui-flex-nowrap { flex-wrap: nowrap; }
+  .sui-flex-wrap-reverse { flex-wrap: wrap-reverse; }
+}

package/src/css/classes/generic/grid.css

@@ -0,0 +1,7 @@
+@breakpoints {
+  .sui-grid-auto-flow-row { grid-auto-flow: row; }
+  .sui-grid-auto-flow-row-dense { grid-auto-flow: row dense; }
+  .sui-grid-auto-flow-column { grid-auto-flow: column; }
+  .sui-grid-auto-flow-column-dense { grid-auto-flow: column dense; }
+  .sui-grid-auto-flow-dense { grid-auto-flow: dense; }
+}

package/src/css/classes/generic/index.css

@@ -0,0 +1,7 @@
+@import './display.css';
+@import './flex.css';
+@import './grid.css';
+@import './overflow.css';
+@import './placement.css';
+@import './position.css';
+@import './text-align.css';

package/src/css/classes/generic/overflow.css

@@ -0,0 +1,19 @@
+@breakpoints {
+  .sui-overflow-visible { overflow: visible; }
+  .sui-overflow-scroll { overflow: scroll; }
+  .sui-overflow-clip { overflow: clip; }
+  .sui-overflow-hidden { overflow: hidden; }
+  .sui-overflow-auto { overflow: auto; }
+
+  .sui-overflow-x-visible { overflow-x: visible; }
+  .sui-overflow-x-scroll { overflow-x: scroll; }
+  .sui-overflow-x-clip { overflow-x: clip; }
+  .sui-overflow-x-hidden { overflow-x: hidden; }
+  .sui-overflow-x-auto { overflow-x: auto; }
+
+  .sui-overflow-y-visible { overflow-y: visible; }
+  .sui-overflow-y-scroll { overflow-y: scroll; }
+  .sui-overflow-y-clip { overflow-y: clip; }
+  .sui-overflow-y-hidden { overflow-y: hidden; }
+  .sui-overflow-y-auto { overflow-y: auto; }
+}

package/src/css/classes/generic/placement.css

@@ -0,0 +1,171 @@
+@position-try --top-center {
+  top: auto;
+  right: auto;
+  bottom: anchor(top);
+  left: anchor(center);
+  translate: -50% 0;
+}
+
+@position-try --top-start {
+  top: auto;
+  right: auto;
+  bottom: anchor(top);
+  left: anchor(left);
+  translate: none;
+}
+
+@position-try --top-end {
+  top: auto;
+  left: auto;
+  bottom: anchor(top);
+  right: anchor(right);
+  translate: none;
+}
+
+@position-try --bottom-center {
+  bottom: auto;
+  right: auto;
+  top: anchor(bottom);
+  left: anchor(center);
+  translate: -50% 0;
+}
+
+@position-try --bottom-start {
+  bottom: auto;
+  right: auto;
+  top: anchor(bottom);
+  left: anchor(left);
+  translate: none;
+}
+
+@position-try --bottom-end {
+  bottom: auto;
+  left: auto;
+  top: anchor(bottom);
+  right: anchor(right);
+  translate: none;
+}
+
+@position-try --right-center {
+  right: auto;
+  bottom: auto;
+  left: anchor(right);
+  top: anchor(center);
+  translate: 0 -50%;
+}
+
+@position-try --right-start {
+  right: auto;
+  bottom: auto;
+  left: anchor(right);
+  top: anchor(top);
+  translate: none;
+}
+
+@position-try --right-end {
+  right: auto;
+  top: auto;
+  left: anchor(right);
+  bottom: anchor(bottom);
+  translate: none;
+}
+
+@position-try --left-center {
+  left: auto;
+  bottom: auto;
+  right: anchor(left);
+  top: anchor(center);
+  translate: 0 -50%;
+}
+
+@position-try --left-start {
+  left: auto;
+  bottom: auto;
+  right: anchor(left);
+  top: anchor(top);
+  translate: none;
+}
+
+@position-try --left-end {
+  left: auto;
+  top: auto;
+  right: anchor(left);
+  bottom: anchor(bottom);
+  translate: none;
+}
+
+.sui-placement-bottom {
+  top: anchor(bottom);
+  left: anchor(center);
+  translate: -50% 0;
+  position-try-fallbacks: --top-center;
+}
+
+.sui-placement-bottom-start {
+  top: anchor(bottom);
+  left: anchor(left);
+  position-try-fallbacks: --top-start;
+}
+
+.sui-placement-bottom-end {
+  top: anchor(bottom);
+  right: anchor(right);
+  position-try-fallbacks: --top-end;
+}
+
+.sui-placement-top {
+  bottom: anchor(top);
+  left: anchor(center);
+  translate: -50% 0;
+  position-try-fallbacks: --bottom-center;
+}
+
+.sui-placement-top-start {
+  bottom: anchor(top);
+  left: anchor(left);
+  position-try-fallbacks: --bottom-start;
+}
+
+.sui-placement-top-end {
+  bottom: anchor(top);
+  right: anchor(right);
+  position-try-fallbacks: --bottom-end;
+}
+
+.sui-placement-left {
+  right: anchor(left);
+  top: anchor(center);
+  translate: 0 -50%;
+  position-try-fallbacks: --right-center;
+}
+
+.sui-placement-left-start {
+  right: anchor(left);
+  top: anchor(top);
+  position-try-fallbacks: --right-start;
+}
+
+.sui-placement-left-end {
+  right: anchor(left);
+  bottom: anchor(bottom);
+  position-try-fallbacks: --right-end;
+}
+
+.sui-placement-right {
+  left: anchor(right);
+  top: anchor(center);
+  translate: 0 -50%;
+  position-try-fallbacks: --left-center;
+}
+
+.sui-placement-right-start {
+  left: anchor(right);
+  top: anchor(top);
+  position-try-fallbacks: --left-start;
+}
+
+.sui-placement-right-end {
+  left: anchor(right);
+  bottom: anchor(bottom);
+  position-try-fallbacks: --left-end;
+}

package/src/css/classes/generic/position.css

@@ -0,0 +1,7 @@
+@breakpoints {
+  .sui-position-static { position: static; }
+  .sui-position-relative { position: relative; }
+  .sui-position-absolute { position: absolute; }
+  .sui-position-fixed { position: fixed; }
+  .sui-position-sticky { position: sticky; }
+}

package/src/css/classes/generic/readme.md

@@ -0,0 +1,3 @@
+# Generic classes
+
+Generic classes apply a ‘generic’ CSS style — that is, a property with a CSS keyword value. They do not use custom properties.

package/src/css/classes/generic/text-align.css

@@ -0,0 +1,5 @@
+@breakpoints {
+  .sui-text-left { text-align: left; }
+  .sui-text-center { text-align: center; }
+  .sui-text-right { text-align: right; }
+}

package/src/css/classes/index.css

@@ -0,0 +1,4 @@
+@import './dynamic/index.css';
+@import './generic/index.css';
+@import './local/index.css';
+@import './system/index.css';

package/src/css/classes/local/border.css

@@ -0,0 +1,20 @@
+[class*='sui-border'] {
+  border-color: var(--separator-low, light-dark(var(--gray-200), var(--gray-800)));
+}
+
+@breakpoints {
+  .sui-border { border-width: 1px; border-style: solid; }
+  .sui-border-none { border-style: none; }
+
+  .sui-border-top { border-top-width: 1px; border-top-style: solid; }
+  .sui-border-top-none { border-top-style: none; }
+
+  .sui-border-right { border-right-width: 1px; border-right-style: solid; }
+  .sui-border-right-none { border-right-style: none; }
+
+  .sui-border-bottom { border-bottom-width: 1px; border-bottom-style: solid; }
+  .sui-border-bottom-none { border-bottom-style: none; }
+
+  .sui-border-left { border-left-width: 1px; border-left-style: solid; }
+  .sui-border-left-none { border-left-style: none; }
+}

package/src/css/classes/local/index.css

@@ -0,0 +1,4 @@
+@import './border.css';
+@import './text-overflow.css';
+@import './text-trim.css';
+@import './tone.css';

package/src/css/classes/local/readme.md

@@ -0,0 +1,3 @@
+# Local classes
+
+Local classes apply custom properties defined locally to the component library. They do not apply custom properties defined at the design system level (those that are imported from our design tokens library). They may additionally apply CSS keyword values or other values, but the emphasis is the application of locally defined tokens.

package/src/css/classes/local/text-overflow.css

@@ -0,0 +1,5 @@
+.sui-text-overflow {
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/css/classes/local/text-trim.css

@@ -0,0 +1,45 @@
+.sui-text-trim:before,
+.sui-text-trim:after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+}
+
+.sui-text-trim:before {
+  margin-bottom: var(--trim);
+}
+
+.sui-text-trim:after {
+  margin-top: var(--trim);
+}
+
+.sui-text-trim-none:before,
+.sui-text-trim-none:after {
+  content: none;
+}
+
+@breakpoints {
+  .sui-text-body0 { --trim: -4px; }
+  .sui-text-body1 { --trim: -5px; }
+  .sui-text-body2 { --trim: -6px; }
+  .sui-text-body3 { --trim: -7px; }
+  .sui-text-body4 { --trim: -8px; }
+
+  .sui-text-heading0 { --trim: -4px; }
+  .sui-text-heading1 { --trim: -5px; }
+  .sui-text-heading2 { --trim: -6px; }
+  .sui-text-heading3 { --trim: -7px; }
+  .sui-text-heading4 { --trim: -8px; }
+  .sui-text-heading5 { --trim: -10px; }
+  .sui-text-heading6 { --trim: -13px; }
+  .sui-text-heading7 { --trim: -16px; }
+  .sui-text-heading8 { --trim: -22px; }
+  .sui-text-heading9 { --trim: -30px; }
+
+  .sui-text-code0 { --trim: -4px; }
+  .sui-text-code1 { --trim: -5px; }
+  .sui-text-code2 { --trim: -6px; }
+  .sui-text-code3 { --trim: -7px; }
+  .sui-text-code4 { --trim: -8px; }
+}

package/src/css/classes/local/tone.css

@@ -0,0 +1,75 @@
+[class*='sui-tone'] {
+  /* All .sui-tone classes use white and black for tone-0/-1000 */
+  --tone-0: light-dark(var(--white), var(--black));
+  --tone-1000: light-dark(var(--black), var(--white));
+}
+
+.sui-tone-neutral {
+  --tone-50: light-dark(var(--gray-50), var(--gray-950));
+  --tone-100: light-dark(var(--gray-100), var(--gray-900));
+  --tone-200: light-dark(var(--gray-200), var(--gray-800));
+  --tone-300: light-dark(var(--gray-300), var(--gray-700));
+  --tone-400: light-dark(var(--gray-400), var(--gray-600));
+  --tone-500: light-dark(var(--gray-500), var(--gray-500));
+  --tone-600: light-dark(var(--gray-600), var(--gray-400));
+  --tone-700: light-dark(var(--gray-700), var(--gray-300));
+  --tone-800: light-dark(var(--gray-800), var(--gray-200));
+  --tone-900: light-dark(var(--gray-900), var(--gray-100));
+  --tone-950: light-dark(var(--gray-950), var(--gray-50));
+}
+
+.sui-tone-suggest {
+  --tone-50: light-dark(var(--purple-50), var(--purple-950));
+  --tone-100: light-dark(var(--purple-100), var(--purple-900));
+  --tone-200: light-dark(var(--purple-200), var(--purple-800));
+  --tone-300: light-dark(var(--purple-300), var(--purple-700));
+  --tone-400: light-dark(var(--purple-400), var(--purple-600));
+  --tone-500: light-dark(var(--purple-500), var(--purple-500));
+  --tone-600: light-dark(var(--purple-600), var(--purple-400));
+  --tone-700: light-dark(var(--purple-700), var(--purple-300));
+  --tone-800: light-dark(var(--purple-800), var(--purple-200));
+  --tone-900: light-dark(var(--purple-900), var(--purple-100));
+  --tone-950: light-dark(var(--purple-950), var(--purple-50));
+}
+
+.sui-tone-positive {
+  --tone-50: light-dark(var(--green-50), var(--green-950));
+  --tone-100: light-dark(var(--green-100), var(--green-900));
+  --tone-200: light-dark(var(--green-200), var(--green-800));
+  --tone-300: light-dark(var(--green-300), var(--green-700));
+  --tone-400: light-dark(var(--green-400), var(--green-600));
+  --tone-500: light-dark(var(--green-500), var(--green-500));
+  --tone-600: light-dark(var(--green-600), var(--green-400));
+  --tone-700: light-dark(var(--green-700), var(--green-300));
+  --tone-800: light-dark(var(--green-800), var(--green-200));
+  --tone-900: light-dark(var(--green-900), var(--green-100));
+  --tone-950: light-dark(var(--green-950), var(--green-50));
+}
+
+.sui-tone-caution {
+  --tone-50: light-dark(var(--yellow-50), var(--yellow-950));
+  --tone-100: light-dark(var(--yellow-100), var(--yellow-900));
+  --tone-200: light-dark(var(--yellow-200), var(--yellow-800));
+  --tone-300: light-dark(var(--yellow-300), var(--yellow-700));
+  --tone-400: light-dark(var(--yellow-400), var(--yellow-600));
+  --tone-500: light-dark(var(--yellow-500), var(--yellow-500));
+  --tone-600: light-dark(var(--yellow-600), var(--yellow-400));
+  --tone-700: light-dark(var(--yellow-700), var(--yellow-300));
+  --tone-800: light-dark(var(--yellow-800), var(--yellow-200));
+  --tone-900: light-dark(var(--yellow-900), var(--yellow-100));
+  --tone-950: light-dark(var(--yellow-950), var(--yellow-50));
+}
+
+.sui-tone-critical {
+  --tone-50: light-dark(var(--red-50), var(--red-950));
+  --tone-100: light-dark(var(--red-100), var(--red-900));
+  --tone-200: light-dark(var(--red-200), var(--red-800));
+  --tone-300: light-dark(var(--red-300), var(--red-700));
+  --tone-400: light-dark(var(--red-400), var(--red-600));
+  --tone-500: light-dark(var(--red-500), var(--red-500));
+  --tone-600: light-dark(var(--red-600), var(--red-400));
+  --tone-700: light-dark(var(--red-700), var(--red-300));
+  --tone-800: light-dark(var(--red-800), var(--red-200));
+  --tone-900: light-dark(var(--red-900), var(--red-100));
+  --tone-950: light-dark(var(--red-950), var(--red-50));
+}

package/src/css/classes/system/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/classes/system/container.css

@@ -0,0 +1,8 @@
+@breakpoints {
+  .sui-container0 { max-width: var(--container-0); }
+  .sui-container1 { max-width: var(--container-1); }
+  .sui-container2 { max-width: var(--container-2); }
+  .sui-container3 { max-width: var(--container-3); }
+  .sui-container4 { max-width: var(--container-4); }
+  .sui-container5 { max-width: var(--container-5); }
+}