@krudi/styles 0.1.0

package/src/styles/variables.css

@@ -0,0 +1,93 @@
+@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;
+    }
+}