@kushagradhawan/kookie-ui 0.1.0

package/src/styles/utilities/grid-area.css

@@ -0,0 +1,33 @@
+.rt-r-ga {
+  grid-area: var(--grid-area);
+}
+
+@media (--xs) {
+  .xs\:rt-r-ga {
+    grid-area: var(--grid-area-xs);
+  }
+}
+
+@media (--sm) {
+  .sm\:rt-r-ga {
+    grid-area: var(--grid-area-sm);
+  }
+}
+
+@media (--md) {
+  .md\:rt-r-ga {
+    grid-area: var(--grid-area-md);
+  }
+}
+
+@media (--lg) {
+  .lg\:rt-r-ga {
+    grid-area: var(--grid-area-lg);
+  }
+}
+
+@media (--xl) {
+  .xl\:rt-r-ga {
+    grid-area: var(--grid-area-xl);
+  }
+}

package/src/styles/utilities/grid-auto-flow.css

@@ -0,0 +1,21 @@
+@breakpoints {
+  .rt-r-gaf-row {
+    grid-auto-flow: row;
+  }
+
+  .rt-r-gaf-column {
+    grid-auto-flow: column;
+  }
+
+  .rt-r-gaf-dense {
+    grid-auto-flow: dense;
+  }
+
+  .rt-r-gaf-row-dense {
+    grid-auto-flow: row dense;
+  }
+
+  .rt-r-gaf-column-dense {
+    grid-auto-flow: column dense;
+  }
+}

package/src/styles/utilities/grid-column-end.css

@@ -0,0 +1,61 @@
+@breakpoints {
+  .rt-r-gce {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-gce-1 {
+    grid-column-end: 1;
+  }
+  .rt-r-gce-2 {
+    grid-column-end: 2;
+  }
+  .rt-r-gce-3 {
+    grid-column-end: 3;
+  }
+  .rt-r-gce-4 {
+    grid-column-end: 4;
+  }
+  .rt-r-gce-5 {
+    grid-column-end: 5;
+  }
+  .rt-r-gce-6 {
+    grid-column-end: 6;
+  }
+  .rt-r-gce-7 {
+    grid-column-end: 7;
+  }
+  .rt-r-gce-8 {
+    grid-column-end: 8;
+  }
+  .rt-r-gce-9 {
+    grid-column-end: 9;
+  }
+}
+
+.rt-r-gce {
+  grid-column-end: var(--grid-column-end);
+}
+@media (--xs) {
+  .xs\:rt-r-gce {
+    grid-column-end: var(--grid-column-end-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-gce {
+    grid-column-end: var(--grid-column-end-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-gce {
+    grid-column-end: var(--grid-column-end-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-gce {
+    grid-column-end: var(--grid-column-end-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-gce {
+    grid-column-end: var(--grid-column-end-xl);
+  }
+}

package/src/styles/utilities/grid-column-start.css

@@ -0,0 +1,61 @@
+@breakpoints {
+  .rt-r-gcs {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-gcs-1 {
+    grid-column-start: 1;
+  }
+  .rt-r-gcs-2 {
+    grid-column-start: 2;
+  }
+  .rt-r-gcs-3 {
+    grid-column-start: 3;
+  }
+  .rt-r-gcs-4 {
+    grid-column-start: 4;
+  }
+  .rt-r-gcs-5 {
+    grid-column-start: 5;
+  }
+  .rt-r-gcs-6 {
+    grid-column-start: 6;
+  }
+  .rt-r-gcs-7 {
+    grid-column-start: 7;
+  }
+  .rt-r-gcs-8 {
+    grid-column-start: 8;
+  }
+  .rt-r-gcs-9 {
+    grid-column-start: 9;
+  }
+}
+
+.rt-r-gcs {
+  grid-column-start: var(--grid-column-start);
+}
+@media (--xs) {
+  .xs\:rt-r-gcs {
+    grid-column-start: var(--grid-column-start-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-gcs {
+    grid-column-start: var(--grid-column-start-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-gcs {
+    grid-column-start: var(--grid-column-start-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-gcs {
+    grid-column-start: var(--grid-column-start-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-gcs {
+    grid-column-start: var(--grid-column-start-xl);
+  }
+}

package/src/styles/utilities/grid-column.css

@@ -0,0 +1,61 @@
+@breakpoints {
+  .rt-r-gc {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-gc-1 {
+    grid-column: 1;
+  }
+  .rt-r-gc-2 {
+    grid-column: 2;
+  }
+  .rt-r-gc-3 {
+    grid-column: 3;
+  }
+  .rt-r-gc-4 {
+    grid-column: 4;
+  }
+  .rt-r-gc-5 {
+    grid-column: 5;
+  }
+  .rt-r-gc-6 {
+    grid-column: 6;
+  }
+  .rt-r-gc-7 {
+    grid-column: 7;
+  }
+  .rt-r-gc-8 {
+    grid-column: 8;
+  }
+  .rt-r-gc-9 {
+    grid-column: 9;
+  }
+}
+
+.rt-r-gc {
+  grid-column: var(--grid-column);
+}
+@media (--xs) {
+  .xs\:rt-r-gc {
+    grid-column: var(--grid-column-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-gc {
+    grid-column: var(--grid-column-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-gc {
+    grid-column: var(--grid-column-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-gc {
+    grid-column: var(--grid-column-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-gc {
+    grid-column: var(--grid-column-xl);
+  }
+}

package/src/styles/utilities/grid-row-end.css

@@ -0,0 +1,61 @@
+@breakpoints {
+  .rt-r-gre {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-gre-1 {
+    grid-row-end: 1;
+  }
+  .rt-r-gre-2 {
+    grid-row-end: 2;
+  }
+  .rt-r-gre-3 {
+    grid-row-end: 3;
+  }
+  .rt-r-gre-4 {
+    grid-row-end: 4;
+  }
+  .rt-r-gre-5 {
+    grid-row-end: 5;
+  }
+  .rt-r-gre-6 {
+    grid-row-end: 6;
+  }
+  .rt-r-gre-7 {
+    grid-row-end: 7;
+  }
+  .rt-r-gre-8 {
+    grid-row-end: 8;
+  }
+  .rt-r-gre-9 {
+    grid-row-end: 9;
+  }
+}
+
+.rt-r-gre {
+  grid-row-end: var(--grid-row-end);
+}
+@media (--xs) {
+  .xs\:rt-r-gre {
+    grid-row-end: var(--grid-row-end-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-gre {
+    grid-row-end: var(--grid-row-end-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-gre {
+    grid-row-end: var(--grid-row-end-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-gre {
+    grid-row-end: var(--grid-row-end-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-gre {
+    grid-row-end: var(--grid-row-end-xl);
+  }
+}

package/src/styles/utilities/grid-row-start.css

@@ -0,0 +1,61 @@
+@breakpoints {
+  .rt-r-grs {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-grs-1 {
+    grid-row-start: 1;
+  }
+  .rt-r-grs-2 {
+    grid-row-start: 2;
+  }
+  .rt-r-grs-3 {
+    grid-row-start: 3;
+  }
+  .rt-r-grs-4 {
+    grid-row-start: 4;
+  }
+  .rt-r-grs-5 {
+    grid-row-start: 5;
+  }
+  .rt-r-grs-6 {
+    grid-row-start: 6;
+  }
+  .rt-r-grs-7 {
+    grid-row-start: 7;
+  }
+  .rt-r-grs-8 {
+    grid-row-start: 8;
+  }
+  .rt-r-grs-9 {
+    grid-row-start: 9;
+  }
+}
+
+.rt-r-grs {
+  grid-row-start: var(--grid-row-start);
+}
+@media (--xs) {
+  .xs\:rt-r-grs {
+    grid-row-start: var(--grid-row-start-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-grs {
+    grid-row-start: var(--grid-row-start-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-grs {
+    grid-row-start: var(--grid-row-start-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-grs {
+    grid-row-start: var(--grid-row-start-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-grs {
+    grid-row-start: var(--grid-row-start-xl);
+  }
+}

package/src/styles/utilities/grid-row.css

@@ -0,0 +1,61 @@
+@breakpoints {
+  .rt-r-gr {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-gr-1 {
+    grid-row: 1;
+  }
+  .rt-r-gr-2 {
+    grid-row: 2;
+  }
+  .rt-r-gr-3 {
+    grid-row: 3;
+  }
+  .rt-r-gr-4 {
+    grid-row: 4;
+  }
+  .rt-r-gr-5 {
+    grid-row: 5;
+  }
+  .rt-r-gr-6 {
+    grid-row: 6;
+  }
+  .rt-r-gr-7 {
+    grid-row: 7;
+  }
+  .rt-r-gr-8 {
+    grid-row: 8;
+  }
+  .rt-r-gr-9 {
+    grid-row: 9;
+  }
+}
+
+.rt-r-gr {
+  grid-row: var(--grid-row);
+}
+@media (--xs) {
+  .xs\:rt-r-gr {
+    grid-row: var(--grid-row-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-gr {
+    grid-row: var(--grid-row-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-gr {
+    grid-row: var(--grid-row-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-gr {
+    grid-row: var(--grid-row-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-gr {
+    grid-row: var(--grid-row-xl);
+  }
+}

package/src/styles/utilities/grid-template-areas.css

@@ -0,0 +1,28 @@
+.rt-r-gta {
+  grid-template-areas: var(--grid-template-areas);
+}
+@media (--xs) {
+  .xs\:rt-r-gta {
+    grid-template-areas: var(--grid-template-areas-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-gta {
+    grid-template-areas: var(--grid-template-areas-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-gta {
+    grid-template-areas: var(--grid-template-areas-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-gta {
+    grid-template-areas: var(--grid-template-areas-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-gta {
+    grid-template-areas: var(--grid-template-areas-xl);
+  }
+}

package/src/styles/utilities/grid-template-columns.css

@@ -0,0 +1,61 @@
+@breakpoints {
+  .rt-r-gtc {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-gtc-1 {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .rt-r-gtc-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .rt-r-gtc-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .rt-r-gtc-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .rt-r-gtc-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .rt-r-gtc-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .rt-r-gtc-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .rt-r-gtc-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .rt-r-gtc-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+}
+
+.rt-r-gtc {
+  grid-template-columns: var(--grid-template-columns);
+}
+@media (--xs) {
+  .xs\:rt-r-gtc {
+    grid-template-columns: var(--grid-template-columns-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-gtc {
+    grid-template-columns: var(--grid-template-columns-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-gtc {
+    grid-template-columns: var(--grid-template-columns-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-gtc {
+    grid-template-columns: var(--grid-template-columns-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-gtc {
+    grid-template-columns: var(--grid-template-columns-xl);
+  }
+}

package/src/styles/utilities/grid-template-rows.css

@@ -0,0 +1,61 @@
+@breakpoints {
+  .rt-r-gtr {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-gtr-1 {
+    grid-template-rows: minmax(0, 1fr);
+  }
+  .rt-r-gtr-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+  .rt-r-gtr-3 {
+    grid-template-rows: repeat(3, minmax(0, 1fr));
+  }
+  .rt-r-gtr-4 {
+    grid-template-rows: repeat(4, minmax(0, 1fr));
+  }
+  .rt-r-gtr-5 {
+    grid-template-rows: repeat(5, minmax(0, 1fr));
+  }
+  .rt-r-gtr-6 {
+    grid-template-rows: repeat(6, minmax(0, 1fr));
+  }
+  .rt-r-gtr-7 {
+    grid-template-rows: repeat(7, minmax(0, 1fr));
+  }
+  .rt-r-gtr-8 {
+    grid-template-rows: repeat(8, minmax(0, 1fr));
+  }
+  .rt-r-gtr-9 {
+    grid-template-rows: repeat(9, minmax(0, 1fr));
+  }
+}
+
+.rt-r-gtr {
+  grid-template-rows: var(--grid-template-rows);
+}
+@media (--xs) {
+  .xs\:rt-r-gtr {
+    grid-template-rows: var(--grid-template-rows-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-gtr {
+    grid-template-rows: var(--grid-template-rows-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-gtr {
+    grid-template-rows: var(--grid-template-rows-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-gtr {
+    grid-template-rows: var(--grid-template-rows-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-gtr {
+    grid-template-rows: var(--grid-template-rows-xl);
+  }
+}

package/src/styles/utilities/height.css

@@ -0,0 +1,28 @@
+.rt-r-h {
+  height: var(--height);
+}
+@media (--xs) {
+  .xs\:rt-r-h {
+    height: var(--height-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-h {
+    height: var(--height-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-h {
+    height: var(--height-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-h {
+    height: var(--height-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-h {
+    height: var(--height-xl);
+  }
+}

package/src/styles/utilities/index.css

@@ -0,0 +1,10 @@
+@import './layout.css';
+
+@import './font-weight.css';
+@import './leading-trim.css';
+@import './resize.css';
+@import './table-layout.css';
+@import './text-align.css';
+@import './text-wrap.css';
+@import './truncate.css';
+@import './vertical-align.css';