diff --git a/README.md b/README.md
index dcc22a1..9b06ec1 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,12 @@ Import via NPM:
npm i @dutchcelt/system.css
```
+If you wish to use the layout and form validations you will need to switch the 'system enhancement' on:
+
+```
+
+```
+
### Style API
System.css has a number of custom properties for you to use.
diff --git a/example.html b/example.html
index 02ee9ac..b82395a 100644
--- a/example.html
+++ b/example.html
@@ -1,5 +1,5 @@
-
+
system.css
diff --git a/forms.html b/forms.html
index 0f648d4..4d095dd 100644
--- a/forms.html
+++ b/forms.html
@@ -1,5 +1,5 @@
-
+
system.css
diff --git a/src/system-forms.css b/src/system-forms.css
index 57a9b0f..09b582a 100644
--- a/src/system-forms.css
+++ b/src/system-forms.css
@@ -1,89 +1,91 @@
@layer --system {
- fieldset {
- display: flex;
- flex-direction: column;
- position: relative;
- border: 0;
- padding: 0;
- margin: 0;
+ @container --system (width > 1rem) {
+ form fieldset {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ border: 0;
+ padding: 0;
+ margin: 0;
- &:has(legend) {
- margin-block-start: calc(1ex - 0.5lh);
- margin-block-end: 1ex;
- padding-block-start: 0.5lh;
+ &:has(legend) {
+ margin-block-start: calc(1ex - 0.5lh);
+ margin-block-end: 1ex;
+ padding-block-start: 0.5lh;
+ }
}
- }
- form > div:has(button) {
- margin-block-start: var(--system-spacing-main);
- }
-
- legend {
- position: relative;
- inset: 0.5lh 0;
- }
-
- fieldset:has(:user-invalid),
- form:has(:user-invalid),
- form :user-invalid:not(:focus-visible) {
- position: relative;
- outline: var(--system-stroke-thin) solid var(--system-invalid-color);
- &::before {
- position: absolute;
- margin-inline-start: max(
- calc(var(--system-spacing-page-inline) * -1),
- calc(var(--system-spacing-double) * -1)
- );
- content: '';
- width: 0px;
- height: 100%;
- display: block;
- border-inline-end-width: 0;
- border-inline-end-style: solid;
- border-inline-end-color: var(--system-invalid-color);
+ form > div:has(button) {
+ margin-block-start: var(--system-spacing-main);
}
- &:is(input) {
- border-color: var(--system-invalid-color);
+
+ form legend {
+ position: relative;
+ inset: 0.5lh 0;
}
- &:is(fieldset) {
- outline: 0;
+
+ form fieldset:has(:user-invalid),
+ form:has(:user-invalid),
+ form :user-invalid:not(:focus-visible) {
+ position: relative;
+ outline: var(--system-stroke-thin) solid var(--system-invalid-color);
&::before {
- border-inline-end-width: var(--system-stroke-thick);
+ position: absolute;
+ margin-inline-start: max(
+ calc(var(--system-spacing-page-inline) * -1),
+ calc(var(--system-spacing-double) * -1)
+ );
+ content: '';
+ width: 0px;
+ height: 100%;
+ display: block;
+ border-inline-end-width: 0;
+ border-inline-end-style: solid;
+ border-inline-end-color: var(--system-invalid-color);
}
- }
- &:is(form) {
- outline: 0;
- &::before {
- border-inline-end-width: var(--system-stroke-thin);
+ &:is(input) {
+ border-color: var(--system-invalid-color);
+ }
+ &:is(fieldset) {
+ outline: 0;
+ &::before {
+ border-inline-end-width: var(--system-stroke-thick);
+ }
+ }
+ &:is(form) {
+ outline: 0;
+ &::before {
+ border-inline-end-width: var(--system-stroke-thin);
+ }
}
}
- }
- fieldset > :is(p, div, fieldset) {
- display: flex;
- flex-direction: column;
- align-items: start;
- justify-items: start;
- margin-block: calc((1lh - 1em) / 2);
- gap: calc((1lh - 1em) / 2);
- border: 0;
- padding: 0;
+ form fieldset > :is(p, div, fieldset) {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ justify-items: start;
+ margin-block: calc((1lh - 1em) / 2);
+ gap: calc((1lh - 1em) / 2);
+ border: 0;
+ padding: 0;
- &:has([type='checkbox'], [type='radio']) {
- display: grid;
- grid-template-columns: min-content 1fr;
- row-gap: calc(1em - 1ex);
- column-gap: 1ch;
- padding-block: calc(1em - 1ex);
- font-family: var(--system-font-family-data);
- font-size: var(--system-font-size-m);
- line-height: var(--system-line-height-compact);
- }
+ &:has([type='checkbox'], [type='radio']) {
+ display: grid;
+ grid-template-columns: min-content 1fr;
+ row-gap: calc(1em - 1ex);
+ column-gap: 1ch;
+ padding-block: calc(1em - 1ex);
+ font-family: var(--system-font-family-data);
+ font-size: var(--system-font-size-m);
+ line-height: var(--system-line-height-compact);
+ }
- &:is(fieldset):has(:user-valid) {
- & input {
- accent-color: initial;
- outline: 0;
+ &:is(fieldset):has(:user-valid) {
+ & input {
+ accent-color: initial;
+ outline: 0;
+ }
}
}
}
diff --git a/src/system-layout.css b/src/system-layout.css
index c9f6970..86389d5 100644
--- a/src/system-layout.css
+++ b/src/system-layout.css
@@ -1,58 +1,89 @@
@layer --system {
- body {
- --viewport-padding: minmax(var(--system-spacing-page-inline), 1fr);
- --content-width: minmax(
- calc(var(--system-dimension-min-width) - (var(--system-spacing-page-inline) * 2)),
- var(--system-dimension-content-width)
- );
-
- display: grid;
- grid-template-columns:
- [--viewport-start] var(--viewport-padding) [--content-start] var(--content-width) [--content-end] var(
- --viewport-padding
- )
- [--viewport-end];
- }
- body > :is(header, footer) {
- display: grid;
- grid-template-columns: subgrid;
- grid-column: --viewport-start / --viewport-end;
- padding-block: var(--system-spacing-main);
+ @container --system (width > 1rem) {
+ body {
+ --viewport-padding: minmax(var(--system-spacing-page-inline), 1fr);
+ --content-width: minmax(
+ calc(var(--system-dimension-min-width) - (var(--system-spacing-page-inline) * 2)),
+ var(--system-dimension-content-width)
+ );
- & > * {
- grid-column: --content-start / --content-end;
- margin: 0;
- padding: 0;
+ display: grid;
+ grid-template-columns:
+ [--viewport-start] var(--viewport-padding) [--content-start] var(--content-width) [--content-end] var(
+ --viewport-padding
+ )
+ [--viewport-end];
+ margin: unset;
}
- }
- main {
- /* Center main in page */
- grid-column: --content-start / --content-end;
- container: --content / inline-size;
- padding-block: clamp(
- var(--system-spacing-main) * 2,
- var(--system-spacing-page-inline),
- var(--system-spacing-main) * 4
- );
- /* Waiting on margin-trim */
-
- & > *:first-child {
- margin-block-start: unset;
+ body > :is(header, footer) {
+ display: grid;
+ grid-template-columns: subgrid;
+ grid-column: --viewport-start / --viewport-end;
+ padding-block: var(--system-spacing-main);
+
+ & > * {
+ grid-column: --content-start / --content-end;
+ margin: 0;
+ padding: 0;
+ }
}
- & > *:last-child {
- margin-block-end: unset;
+ body > header {
+ background: var(--system-surface-color);
+
+ & > :is(h1, h2, h3),
+ & > p:only-child {
+ font-weight: var(--system-font-weight-extralight);
+ font-family: var(--system-font-family-display);
+ font-size: var(--system-font-size-xxl);
+ color: var(--system-gray-text);
+ }
+ & > nav {
+ font-family: var(--system-font-family-interactive);
+ & [href] {
+ color: var(--system-link-text);
+ }
+ & [aria-current='page'] {
+ pointer-events: none;
+ text-decoration: none;
+ color: currentcolor;
+ }
+ }
}
- }
- body > header > nav {
- display: flex;
- column-gap: var(--system-spacing-column-gap);
- margin-block-start: var(--system-spacing-single);
- }
+ body > :is(header, main, footer):not(:has(*)) {
+ display: none;
+ }
- body > :is(header, main, footer):not(:has(*)) {
- display: none;
+ body > main {
+ /* Center main in page */
+ grid-column: --content-start / --content-end;
+ container: --content / inline-size;
+ padding-block: clamp(
+ var(--system-spacing-main) * 2,
+ var(--system-spacing-page-inline),
+ var(--system-spacing-main) * 4
+ );
+ /* Waiting on margin-trim */
+
+ & > *:first-child {
+ margin-block-start: unset;
+ }
+
+ & > *:last-child {
+ margin-block-end: unset;
+ }
+ }
+
+ body > header > nav {
+ display: flex;
+ column-gap: var(--system-spacing-column-gap);
+ margin-block-start: var(--system-spacing-single);
+ }
+
+ body > :is(header, main, footer):not(:has(*)) {
+ display: none;
+ }
}
}
diff --git a/src/system-properties.css b/src/system-properties.css
index 96ede1a..5e6337f 100644
--- a/src/system-properties.css
+++ b/src/system-properties.css
@@ -111,3 +111,11 @@
inherits: true;
initial-value: VisitedText;
}
+
+@layer --system {
+ :root {
+ --OFF: ;
+ --ON: initial;
+ --system-enhanced: var(--OFF);
+ }
+}
diff --git a/src/system-selectors.css b/src/system-selectors.css
index 73b058e..8f26bad 100644
--- a/src/system-selectors.css
+++ b/src/system-selectors.css
@@ -5,13 +5,14 @@
box-sizing: border-box;
}
html {
+ container-name: var(--system-enhanced, --system);
+ container-type: var(--system-enhanced, inline-size);
font-family: var(--system-font-family-body);
line-height: var(--system-line-height);
color-scheme: light dark;
}
body {
- margin: unset;
color: var(--system-canvas-text);
background-color: var(--system-canvas);
}
@@ -20,33 +21,6 @@
font-size: var(--system-font-size);
}
- body > header {
- background: var(--system-surface-color);
-
- & > :is(h1, h2, h3),
- & > p:only-child {
- font-weight: var(--system-font-weight-extralight);
- font-family: var(--system-font-family-display);
- font-size: var(--system-font-size-xxl);
- color: var(--system-gray-text);
- }
- & > nav {
- font-family: var(--system-font-family-interactive);
- & [href] {
- color: var(--system-link-text);
- }
- & [aria-current='page'] {
- pointer-events: none;
- text-decoration: none;
- color: currentcolor;
- }
- }
- }
-
- body > :is(header, main, footer):not(:has(*)) {
- display: none;
- }
-
::selection {
background: var(--system-highlight);
color: var(--system-highlight-text);
diff --git a/style-api.html b/style-api.html
index 36eabba..fa59263 100644
--- a/style-api.html
+++ b/style-api.html
@@ -1,5 +1,5 @@
-
+