@krudi/styles 0.1.0

package/src/styles/utilities/_color.css

@@ -0,0 +1,47 @@
+.text-white {
+    color: var(--c-white);
+}
+
+.text-white-100 {
+    color: var(--c-white-100);
+}
+
+.text-white-200 {
+    color: var(--c-white-200);
+}
+
+.text-black {
+    color: var(--c-black);
+}
+
+.text-gray {
+    color: var(--c-gray);
+}
+
+.text-beige {
+    color: var(--c-beige);
+}
+
+.text-primary {
+    color: var(--c-primary);
+}
+
+.text-secondary {
+    color: var(--c-secondary);
+}
+
+.text-success {
+    color: var(--c-success);
+}
+
+.text-info {
+    color: var(--c-info);
+}
+
+.text-warning {
+    color: var(--c-warning);
+}
+
+.text-danger {
+    color: var(--c-danger);
+}

package/src/styles/utilities/_font-size.css

@@ -0,0 +1,19 @@
+.text-xs {
+    font-size: var(--fs-xs);
+}
+
+.text-sm {
+    font-size: var(--fs-sm);
+}
+
+.text-md {
+    font-size: var(--fs-md);
+}
+
+.text-lg {
+    font-size: var(--fs-lg);
+}
+
+.text-xl {
+    font-size: var(--fs-xl);
+}

package/src/styles/utilities/_font-weight.css

@@ -0,0 +1,35 @@
+.fw-100 {
+    font-weight: 100;
+}
+
+.fw-200 {
+    font-weight: 200;
+}
+
+.fw-300 {
+    font-weight: 300;
+}
+
+.fw-400 {
+    font-weight: 400;
+}
+
+.fw-500 {
+    font-weight: 500;
+}
+
+.fw-600 {
+    font-weight: 600;
+}
+
+.fw-700 {
+    font-weight: 700;
+}
+
+.fw-800 {
+    font-weight: 800;
+}
+
+.fw-900 {
+    font-weight: 900;
+}

package/src/styles/utilities/_margin.css

@@ -0,0 +1,235 @@
+/* Margin Positions */
+.mx-auto {
+    margin: 0 auto;
+}
+
+/* Margin */
+.m-0 {
+    margin: 0;
+}
+
+.m-n1 {
+    margin: var(--spacer-n1);
+}
+
+.m-n2 {
+    margin: var(--spacer-n2);
+}
+
+.m-1 {
+    margin: var(--spacer-1);
+}
+
+.m-2 {
+    margin: var(--spacer-2);
+}
+
+.m-3 {
+    margin: var(--spacer-3);
+}
+
+.m-4 {
+    margin: var(--spacer-4);
+}
+
+.m-default {
+    margin: var(--spacer);
+}
+
+/* Margin Top */
+.mt-0 {
+    margin-block-start: 0;
+}
+
+.mt-n1 {
+    margin-block-start: var(--spacer-n1);
+}
+
+.mt-n2 {
+    margin-block-start: var(--spacer-n2);
+}
+
+.mt-1 {
+    margin-block-start: var(--spacer-1);
+}
+
+.mt-2 {
+    margin-block-start: var(--spacer-2);
+}
+
+.mt-3 {
+    margin-block-start: var(--spacer-3);
+}
+
+.mt-4 {
+    margin-block-start: var(--spacer-4);
+}
+
+.mt-default {
+    margin-block-start: var(--spacer);
+}
+
+/* Margin Bottom */
+.mb-0 {
+    margin-block-end: 0;
+}
+
+.mb-n1 {
+    margin-block-end: var(--spacer-n1);
+}
+
+.mb-n2 {
+    margin-block-end: var(--spacer-n2);
+}
+
+.mb-1 {
+    margin-block-end: var(--spacer-1);
+}
+
+.mb-2 {
+    margin-block-end: var(--spacer-2);
+}
+
+.mb-3 {
+    margin-block-end: var(--spacer-3);
+}
+
+.mb-4 {
+    margin-block-end: var(--spacer-4);
+}
+
+.mb-default {
+    margin-block-end: var(--spacer);
+}
+
+/* Margin Left */
+.ml-0 {
+    margin-inline-start: 0;
+}
+
+.ml-n1 {
+    margin-inline-start: var(--spacer-n1);
+}
+
+.ml-n2 {
+    margin-inline-start: var(--spacer-n2);
+}
+
+.ml-1 {
+    margin-inline-start: var(--spacer-1);
+}
+
+.ml-2 {
+    margin-inline-start: var(--spacer-2);
+}
+
+.ml-3 {
+    margin-inline-start: var(--spacer-3);
+}
+
+.ml-4 {
+    margin-inline-start: var(--spacer-4);
+}
+
+.ml-default {
+    margin-inline-start: var(--spacer);
+}
+
+/* Margin Right */
+.mr-0 {
+    margin-inline-end: 0;
+}
+
+.mr-n1 {
+    margin-inline-end: var(--spacer-n1);
+}
+
+.mr-n2 {
+    margin-inline-end: var(--spacer-n2);
+}
+
+.mr-1 {
+    margin-inline-end: var(--spacer-1);
+}
+
+.mr-2 {
+    margin-inline-end: var(--spacer-2);
+}
+
+.mr-3 {
+    margin-inline-end: var(--spacer-3);
+}
+
+.mr-4 {
+    margin-inline-end: var(--spacer-4);
+}
+
+.mr-default {
+    margin-inline-end: var(--spacer);
+}
+
+/* Margin Inline (Horizontal) */
+.mx-0 {
+    margin-inline: 0;
+}
+
+.mx-n1 {
+    margin-inline: var(--spacer-n1);
+}
+
+.mx-n2 {
+    margin-inline: var(--spacer-n2);
+}
+
+.mx-1 {
+    margin-inline: var(--spacer-1);
+}
+
+.mx-2 {
+    margin-inline: var(--spacer-2);
+}
+
+.mx-3 {
+    margin-inline: var(--spacer-3);
+}
+
+.mx-4 {
+    margin-inline: var(--spacer-4);
+}
+
+.mx-default {
+    margin-inline: var(--spacer);
+}
+
+/* Margin Block (Vertical) */
+.my-0 {
+    margin-block: 0;
+}
+
+.my-n1 {
+    margin-block: var(--spacer-n1);
+}
+
+.my-n2 {
+    margin-block: var(--spacer-n2);
+}
+
+.my-1 {
+    margin-block: var(--spacer-1);
+}
+
+.my-2 {
+    margin-block: var(--spacer-2);
+}
+
+.my-3 {
+    margin-block: var(--spacer-3);
+}
+
+.my-4 {
+    margin-block: var(--spacer-4);
+}
+
+.my-default {
+    margin-block: var(--spacer);
+}

package/src/styles/utilities/_padding.css

@@ -0,0 +1,230 @@
+/* Padding */
+.p-0 {
+    padding: 0;
+}
+
+.p-n1 {
+    padding: var(--spacer-n1);
+}
+
+.p-n2 {
+    padding: var(--spacer-n2);
+}
+
+.p-1 {
+    padding: var(--spacer-1);
+}
+
+.p-2 {
+    padding: var(--spacer-2);
+}
+
+.p-3 {
+    padding: var(--spacer-3);
+}
+
+.p-4 {
+    padding: var(--spacer-4);
+}
+
+.p-default {
+    padding: var(--spacer);
+}
+
+/* Padding Top */
+.pt-0 {
+    padding-block-start: 0;
+}
+
+.pt-n1 {
+    padding-block-start: var(--spacer-n1);
+}
+
+.pt-n2 {
+    padding-block-start: var(--spacer-n2);
+}
+
+.pt-1 {
+    padding-block-start: var(--spacer-1);
+}
+
+.pt-2 {
+    padding-block-start: var(--spacer-2);
+}
+
+.pt-3 {
+    padding-block-start: var(--spacer-3);
+}
+
+.pt-4 {
+    padding-block-start: var(--spacer-4);
+}
+
+.pt-default {
+    padding-block-start: var(--spacer);
+}
+
+/* Padding Bottom */
+.pb-0 {
+    padding-block-end: 0;
+}
+
+.pb-n1 {
+    padding-block-end: var(--spacer-n1);
+}
+
+.pb-n2 {
+    padding-block-end: var(--spacer-n2);
+}
+
+.pb-1 {
+    padding-block-end: var(--spacer-1);
+}
+
+.pb-2 {
+    padding-block-end: var(--spacer-2);
+}
+
+.pb-3 {
+    padding-block-end: var(--spacer-3);
+}
+
+.pb-4 {
+    padding-block-end: var(--spacer-4);
+}
+
+.pb-default {
+    padding-block-end: var(--spacer);
+}
+
+/* Padding Left */
+.pl-0 {
+    padding-inline-start: 0;
+}
+
+.pl-n1 {
+    padding-inline-start: var(--spacer-n1);
+}
+
+.pl-n2 {
+    padding-inline-start: var(--spacer-n2);
+}
+
+.pl-1 {
+    padding-inline-start: var(--spacer-1);
+}
+
+.pl-2 {
+    padding-inline-start: var(--spacer-2);
+}
+
+.pl-3 {
+    padding-inline-start: var(--spacer-3);
+}
+
+.pl-4 {
+    padding-inline-start: var(--spacer-4);
+}
+
+.pl-default {
+    padding-inline-start: var(--spacer);
+}
+
+/* Padding Right */
+.pr-0 {
+    padding-inline-end: 0;
+}
+
+.pr-n1 {
+    padding-inline-end: var(--spacer-n1);
+}
+
+.pr-n2 {
+    padding-inline-end: var(--spacer-n2);
+}
+
+.pr-1 {
+    padding-inline-end: var(--spacer-1);
+}
+
+.pr-2 {
+    padding-inline-end: var(--spacer-2);
+}
+
+.pr-3 {
+    padding-inline-end: var(--spacer-3);
+}
+
+.pr-4 {
+    padding-inline-end: var(--spacer-4);
+}
+
+.pr-default {
+    padding-inline-end: var(--spacer);
+}
+
+/* Padding Inline (Horizontal) */
+.px-0 {
+    padding-inline: 0;
+}
+
+.px-n1 {
+    padding-inline: var(--spacer-n1);
+}
+
+.px-n2 {
+    padding-inline: var(--spacer-n2);
+}
+
+.px-1 {
+    padding-inline: var(--spacer-1);
+}
+
+.px-2 {
+    padding-inline: var(--spacer-2);
+}
+
+.px-3 {
+    padding-inline: var(--spacer-3);
+}
+
+.px-4 {
+    padding-inline: var(--spacer-4);
+}
+
+.px-default {
+    padding-inline: var(--spacer);
+}
+
+/* Padding Block (Vertical) */
+.py-0 {
+    padding-block: 0;
+}
+
+.py-n1 {
+    padding-block: var(--spacer-n1);
+}
+
+.py-n2 {
+    padding-block: var(--spacer-n2);
+}
+
+.py-1 {
+    padding-block: var(--spacer-1);
+}
+
+.py-2 {
+    padding-block: var(--spacer-2);
+}
+
+.py-3 {
+    padding-block: var(--spacer-3);
+}
+
+.py-4 {
+    padding-block: var(--spacer-4);
+}
+
+.py-default {
+    padding-block: var(--spacer);
+}

package/src/styles/utilities/_text-decoration.css

@@ -0,0 +1,35 @@
+.text-decoration-none {
+    text-decoration: none;
+}
+
+.text-decoration-underline {
+    text-decoration-line: underline;
+}
+
+.text-decoration-overline {
+    text-decoration-line: overline;
+}
+
+.text-decoration-line-through {
+    text-decoration-line: line-through;
+}
+
+.text-decoration-solid {
+    text-decoration-style: solid;
+}
+
+.text-decoration-dashed {
+    text-decoration-style: dashed;
+}
+
+.text-decoration-dotted {
+    text-decoration-style: dotted;
+}
+
+.text-decoration-double {
+    text-decoration-style: double;
+}
+
+.text-decoration-wavy {
+    text-decoration-style: wavy;
+}

package/src/styles/utilities/_text.css

@@ -0,0 +1,55 @@
+.line-clamp-1 {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.line-clamp-4 {
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.line-clamp-5 {
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.line-clamp-6 {
+    display: -webkit-box;
+    -webkit-line-clamp: 6;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.line-clamp-7 {
+    display: -webkit-box;
+    -webkit-line-clamp: 7;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.line-clamp-8 {
+    display: -webkit-box;
+    -webkit-line-clamp: 8;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}

package/src/styles/utilities/index.css

@@ -0,0 +1,9 @@
+/* Utility bundle */
+@import './_text.css' layer(utilities);
+@import './_background-colors.css' layer(utilities);
+@import './_color.css' layer(utilities);
+@import './_margin.css' layer(utilities);
+@import './_padding.css' layer(utilities);
+@import './_font-weight.css' layer(utilities);
+@import './_font-size.css' layer(utilities);
+@import './_text-decoration.css' layer(utilities);