diff --git a/index.css b/index.css index ea3b36d..8edb0ed 100644 --- a/index.css +++ b/index.css @@ -3,6 +3,8 @@ @import url('src/system-typography.css'); @import url('src/system-stroke.css'); @import url('src/system-spacing.css'); +@import url('src/system-dimensions.css'); +@import url('src/system-radi.css'); @import url('src/system-custom-colors.css'); @import url("src/system-selectors.css"); \ No newline at end of file diff --git a/src/system-dimensions.css b/src/system-dimensions.css new file mode 100644 index 0000000..4b85b93 --- /dev/null +++ b/src/system-dimensions.css @@ -0,0 +1,6 @@ +@layer --system { + :root{ + --system-dimension-min-width: 320px; /* 320px: 16px => 5vw/cqw */ + --system-dimension-content-width: 85ch; /* Approx. 756px: 16px => 2.12cqw */ + } +} diff --git a/src/system-radi.css b/src/system-radi.css new file mode 100644 index 0000000..19a6da9 --- /dev/null +++ b/src/system-radi.css @@ -0,0 +1,5 @@ +@layer --system { + :root{ + --system-radius: clamp(3px, 0.6666ex, var(--system-spacing-single)); + } +} diff --git a/src/system-spacing.css b/src/system-spacing.css index 764f2df..670a688 100644 --- a/src/system-spacing.css +++ b/src/system-spacing.css @@ -1,32 +1,33 @@ @layer --system { :root{ /* UNITS */ - --system-spacing-single: clamp(8px, 1rem, 16px); - --system-spacing-double: clamp(16px, 2rem, 32px); + --system-spacing-single: clamp(8px, 1rem, 24px); + --system-spacing-double: clamp(16px, 2rem, 48px); /* PAGE */ - --system-spacing-layout: max(var(--system-spacing-single), 5vw); + --system-spacing-page-block: 0; + --system-spacing-page-inline: max(var(--system-spacing-single), 5vw); + + /* HEADING */ + --system-spacing-heading-block-start: max(var(--system-spacing-double), 2.5ex); + --system-spacing-heading-block-end: var(--system-spacing-main); /* MAIN */ - --system-spacing-content: clamp(var(--system-spacing-single), 1ex, var(--system-spacing-double)); + --system-spacing-main: clamp(var(--system-spacing-single), 1ex, var(--system-spacing-double)); + --system-spacing-main-block: clamp(var(--system-spacing-single), 1ex, var(--system-spacing-double)); + --system-spacing-main-inline: clamp(var(--system-spacing-single), 1ex, var(--system-spacing-double)); /* SECTION */ --system-spacing-section-block: max(var(--system-spacing-double), 2.5ex); - - /* HEADING */ - --system-spacing-heading-block-start: max(var(--system-spacing-double), 2.5ex); + --system-spacing-section-inline: 0; /* GAP */ - --system-spacing-column-gap: clamp(var(--system-spacing-single), 5cqw, var(--system-spacing-double)); - --system-spacing-row-gap: clamp(var(--system-spacing-single), 5cqw, var(--system-spacing-double)); + --system-spacing-column-gap: clamp(var(--system-spacing-single), 3cqw, var(--system-spacing-double)); + --system-spacing-row-gap: clamp(var(--system-spacing-single), 3cqw, var(--system-spacing-double)); /* ELEMENTS */ --system-spacing-element: 0.5ex 0.5ch; --system-spacing-button: 0.8ex 1.5ch; - --system-dimension-min-width: 320px; - --system-dimension-content-width: 85ch; - - --system-radius: clamp(3px, 0.6666ex, var(--system-spacing-single)); } }