@krudi/styles 0.1.1 → 0.1.3

package/src/styles/utilities/_margin.css

@@ -1,235 +0,0 @@
-/* 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

@@ -1,230 +0,0 @@
-/* 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

@@ -1,35 +0,0 @@
-.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

@@ -1,55 +0,0 @@
-.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

@@ -1,9 +0,0 @@
-/* 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);

package/src/styles/variables.css

@@ -1,93 +0,0 @@
-@layer variables {
-    :root {
-        /* Spacings */
-        --spacer-n3: 0.5rem;
-        --spacer-n2: 0.5rem;
-        --spacer-n1: 0.875rem;
-        --spacer: 1rem;
-        --spacer-1: calc(var(--spacer) * 1.25);
-        --spacer-2: calc(var(--spacer) * 1.5);
-        --spacer-3: calc(var(--spacer) * 2);
-        --spacer-4: calc(var(--spacer) * 6);
-
-        /* Grid spacings */
-        --grid-spacing: var(--spacer-4);
-
-        /* Container spacings */
-        --container-spacer: var(--spacer);
-
-        /* Heading font size */
-        --heading-1: clamp(1.75rem, 2.8vw, 2rem);
-        --heading-2: clamp(1.5rem, 2.6vw, 1.75rem);
-        --heading-3: clamp(1.375rem, 2.4vw, 1.625rem);
-        --heading-4: clamp(1.25rem, 2.2vw, 1.5rem);
-        --heading-5: clamp(1.125rem, 2vw, 1.375rem);
-        --heading-6: var(--fs-md);
-        --heading-font-family:
-            'Lora', system-ui, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif, 'Apple Color Emoji',
-            'Segoe UI Emoji';
-
-        /* Font size */
-        --fs-xs: 0.875rem;
-        --fs-sm: 1rem;
-        --fs-md: 1.375rem;
-        --fs-lg: clamp(1.125rem, 2.2vw, 1.5rem);
-        --fs-xl: clamp(1.25rem, 2.2vw, 1765rem);
-
-        /* Link */
-        --a-color: var(--c-black);
-        --a-color-hover: var(--c-black);
-        --a-text-decoration-style: dashed;
-        --a-text-decoration-style-hover: solid;
-        --a-text-decoration-thickness: 0.125rem;
-        --a-text-underline-offset: 0.5rem;
-        --a-font-size: var(--fs-md);
-
-        /* Paraphraph */
-        --p-margin-block-start: var(--spacer-n2);
-        --p-line-height: var(--large-line-height);
-        --p-font-size: var(--fs-md);
-        --p-color: var(--c-gray);
-
-        /* Svg */
-        --svg-width: 1em;
-        --svg-height: 1em;
-
-        /* Utilities */
-        --base-line-height: 1.5;
-        --large-line-height: 1.8125;
-        --transition-duration: 0.3s;
-        --transition-decorative-duration: 0.1s;
-        --focus-default: 0 0 0 0.125em var(--c-white), 0 0 0 0.25em var(--c-primary);
-
-        /* Border Radius */
-        --border-radius-sm: 0.5rem;
-        --border-radius-md: 1rem;
-        --border-radius-lg: 1.5rem;
-        --border-radius-xl: 2rem;
-        --border-radius-full: 50%;
-
-        /* Box-shadow */
-        --box-shadow-default: 0 0.375rem 1rem -0.5rem rgb(0 0 0 / 10%);
-
-        /* Body */
-        --body-background-color: var(--c-white);
-        --body-line-height: var(--base-line-height);
-        --body-color: var(--c-black);
-        --body-font-size: var(--fs-md);
-        --body-font-family:
-            system-ui, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif, 'Apple Color Emoji',
-            'Segoe UI Emoji';
-
-        /*
-            Elements
-        */
-
-        /* Badge */
-        --badge-padding-block: 0.5rem;
-        --badge-padding-inline: 1rem;
-        --badge-border-radius: var(--border-radius-sm);
-        --badge-font-size: var(--fs-xs);
-        --badge-font-weight: 600;
-    }
-}