@kushagradhawan/kookie-ui 0.1.0

package/src/styles/utilities/inset.css

@@ -0,0 +1,354 @@
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                Inset                */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-inset {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-inset-0 {
+    inset: 0;
+  }
+  .rt-r-inset-1 {
+    inset: var(--space-1);
+  }
+  .rt-r-inset-2 {
+    inset: var(--space-2);
+  }
+  .rt-r-inset-3 {
+    inset: var(--space-3);
+  }
+  .rt-r-inset-4 {
+    inset: var(--space-4);
+  }
+  .rt-r-inset-5 {
+    inset: var(--space-5);
+  }
+  .rt-r-inset-6 {
+    inset: var(--space-6);
+  }
+  .rt-r-inset-7 {
+    inset: var(--space-7);
+  }
+  .rt-r-inset-8 {
+    inset: var(--space-8);
+  }
+  .rt-r-inset-9 {
+    inset: var(--space-9);
+  }
+}
+
+.rt-r-inset {
+  inset: var(--inset);
+}
+@media (--xs) {
+  .xs\:rt-r-inset {
+    inset: var(--inset-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-inset {
+    inset: var(--inset-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-inset {
+    inset: var(--inset-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-inset {
+    inset: var(--inset-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-inset {
+    inset: var(--inset-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                 Top                 */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-top {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-top-0 {
+    top: 0;
+  }
+  .rt-r-top-1 {
+    top: var(--space-1);
+  }
+  .rt-r-top-2 {
+    top: var(--space-2);
+  }
+  .rt-r-top-3 {
+    top: var(--space-3);
+  }
+  .rt-r-top-4 {
+    top: var(--space-4);
+  }
+  .rt-r-top-5 {
+    top: var(--space-5);
+  }
+  .rt-r-top-6 {
+    top: var(--space-6);
+  }
+  .rt-r-top-7 {
+    top: var(--space-7);
+  }
+  .rt-r-top-8 {
+    top: var(--space-8);
+  }
+  .rt-r-top-9 {
+    top: var(--space-9);
+  }
+}
+
+.rt-r-top {
+  top: var(--top);
+}
+@media (--xs) {
+  .xs\:rt-r-top {
+    top: var(--top-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-top {
+    top: var(--top-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-top {
+    top: var(--top-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-top {
+    top: var(--top-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-top {
+    top: var(--top-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                Right                */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-right {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-right-0 {
+    right: 0;
+  }
+  .rt-r-right-1 {
+    right: var(--space-1);
+  }
+  .rt-r-right-2 {
+    right: var(--space-2);
+  }
+  .rt-r-right-3 {
+    right: var(--space-3);
+  }
+  .rt-r-right-4 {
+    right: var(--space-4);
+  }
+  .rt-r-right-5 {
+    right: var(--space-5);
+  }
+  .rt-r-right-6 {
+    right: var(--space-6);
+  }
+  .rt-r-right-7 {
+    right: var(--space-7);
+  }
+  .rt-r-right-8 {
+    right: var(--space-8);
+  }
+  .rt-r-right-9 {
+    right: var(--space-9);
+  }
+}
+
+.rt-r-right {
+  right: var(--right);
+}
+@media (--xs) {
+  .xs\:rt-r-right {
+    right: var(--right-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-right {
+    right: var(--right-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-right {
+    right: var(--right-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-right {
+    right: var(--right-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-right {
+    right: var(--right-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*               Bottom                */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-bottom {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-bottom-0 {
+    bottom: 0;
+  }
+  .rt-r-bottom-1 {
+    bottom: var(--space-1);
+  }
+  .rt-r-bottom-2 {
+    bottom: var(--space-2);
+  }
+  .rt-r-bottom-3 {
+    bottom: var(--space-3);
+  }
+  .rt-r-bottom-4 {
+    bottom: var(--space-4);
+  }
+  .rt-r-bottom-5 {
+    bottom: var(--space-5);
+  }
+  .rt-r-bottom-6 {
+    bottom: var(--space-6);
+  }
+  .rt-r-bottom-7 {
+    bottom: var(--space-7);
+  }
+  .rt-r-bottom-8 {
+    bottom: var(--space-8);
+  }
+  .rt-r-bottom-9 {
+    bottom: var(--space-9);
+  }
+}
+
+.rt-r-bottom {
+  bottom: var(--bottom);
+}
+@media (--xs) {
+  .xs\:rt-r-bottom {
+    bottom: var(--bottom-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-bottom {
+    bottom: var(--bottom-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-bottom {
+    bottom: var(--bottom-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-bottom {
+    bottom: var(--bottom-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-bottom {
+    bottom: var(--bottom-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                Left                 */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-left {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-left-0 {
+    left: 0;
+  }
+  .rt-r-left-1 {
+    left: var(--space-1);
+  }
+  .rt-r-left-2 {
+    left: var(--space-2);
+  }
+  .rt-r-left-3 {
+    left: var(--space-3);
+  }
+  .rt-r-left-4 {
+    left: var(--space-4);
+  }
+  .rt-r-left-5 {
+    left: var(--space-5);
+  }
+  .rt-r-left-6 {
+    left: var(--space-6);
+  }
+  .rt-r-left-7 {
+    left: var(--space-7);
+  }
+  .rt-r-left-8 {
+    left: var(--space-8);
+  }
+  .rt-r-left-9 {
+    left: var(--space-9);
+  }
+}
+
+.rt-r-left {
+  left: var(--left);
+}
+@media (--xs) {
+  .xs\:rt-r-left {
+    left: var(--left-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-left {
+    left: var(--left-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-left {
+    left: var(--left-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-left {
+    left: var(--left-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-left {
+    left: var(--left-xl);
+  }
+}

package/src/styles/utilities/justify-content.css

@@ -0,0 +1,17 @@
+@breakpoints {
+  .rt-r-jc-start {
+    justify-content: flex-start;
+  }
+
+  .rt-r-jc-center {
+    justify-content: center;
+  }
+
+  .rt-r-jc-end {
+    justify-content: flex-end;
+  }
+
+  .rt-r-jc-space-between {
+    justify-content: space-between;
+  }
+}

package/src/styles/utilities/layout.css

@@ -0,0 +1,34 @@
+@import '../breakpoints.css';
+
+@import './align-items.css';
+@import './align-self.css';
+@import './display.css';
+@import './flex-basis.css';
+@import './flex-direction.css';
+@import './flex-grow.css';
+@import './flex-shrink.css';
+@import './flex-wrap.css';
+@import './gap.css';
+@import './grid-area.css';
+@import './grid-auto-flow.css';
+@import './grid-column.css';
+@import './grid-column-start.css';
+@import './grid-column-end.css';
+@import './grid-row.css';
+@import './grid-row-start.css';
+@import './grid-row-end.css';
+@import './grid-template-areas.css';
+@import './grid-template-columns.css';
+@import './grid-template-rows.css';
+@import './height.css';
+@import './min-height.css';
+@import './max-height.css';
+@import './inset.css';
+@import './justify-content.css';
+@import './margin.css';
+@import './overflow.css';
+@import './padding.css';
+@import './position.css';
+@import './width.css';
+@import './min-width.css';
+@import './max-width.css';

package/src/styles/utilities/leading-trim.css

@@ -0,0 +1,32 @@
+@breakpoints {
+  .rt-r-lt-normal::before,
+  .rt-r-lt-end::before,
+  .rt-r-lt-normal::after,
+  .rt-r-lt-start::after {
+    content: none;
+  }
+
+  .rt-r-lt-start::before,
+  .rt-r-lt-both::before,
+  .rt-r-lt-end::after,
+  .rt-r-lt-both::after {
+    content: '';
+    display: table;
+  }
+
+  .rt-r-lt-start::before,
+  .rt-r-lt-both::before {
+    margin-bottom: calc(
+      var(--leading-trim-start, var(--default-leading-trim-start)) -
+        var(--line-height, calc(1em * var(--default-line-height))) / 2
+    );
+  }
+
+  .rt-r-lt-end::after,
+  .rt-r-lt-both::after {
+    margin-top: calc(
+      var(--leading-trim-end, var(--default-leading-trim-end)) -
+        var(--line-height, calc(1em * var(--default-line-height))) / 2
+    );
+  }
+}