refactored structure and renamed custom colors

dutchcelt · Jan 6, 2024 · 7b11e54 · 7b11e54
1 parent 7723dbb
commit 7b11e54
Show file tree

Hide file tree

Showing 9 changed files with 387 additions and 181 deletions.
diff --git a/index.css b/index.css
@@ -0,0 +1,8 @@
+@import url('src/system-properties.css');
+@import url('src/system-colors.css');
+@import url('src/system-typography.css');
+@import url('src/system-stroke.css');
+@import url('src/system-spacing.css');
+@import url('src/system-custom-colors.css');
+
+@import url("src/system-selectors.css");
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
 		<title>system.css</title>
 		<meta name="description" content="A classless CSS base stylesheet to write modern websites using only HTML." />
 		<meta name="keywords" content="system, css, framework,classless css" />
-		<link rel="stylesheet" href="system.css" />
+		<link rel="stylesheet" href="index.css" />
 	</head>
 	<body>
 		<header>

diff --git a/src/system-colors.css b/src/system-colors.css
@@ -0,0 +1,96 @@
+@property --system-cs-is-light {
+	syntax: '<integer>';
+	inherits: true;
+	initial-value: 1; /* ON */
+}
+
+@layer --system {
+
+	:root {
+		/**
+		 * color-scheme state
+		 *
+		 * Example:
+		 * color-mix(): Light mode is the first color value and dark mode the second.
+		 * color: color-mix(in oklab, black var(--system-cs-state), white);
+		 */
+		--system-cs-state: calc(var(--system-cs-is-light, 1/* fallback to light mode */) * 100%);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:root {
+			--system-cs-is-light: 0; /* OFF */
+		}
+	}
+
+	:root {
+
+		/* AccentColor doesn't work in chrome */
+		--system-accent-color: color-mix(in oklab, dodgerblue 90%, black);
+
+		/*--system-accent-color-text: AccentColorText;*/
+		/*--system-active-text: ActiveText;*/
+		/* ButtonBorder is broken in Safari */
+
+		--system-button-border: color-mix(
+				in oklab,
+				var(--system-stroke-color) var(--system-cs-state),
+				ButtonBorder
+		);
+
+		/* ButtonFace is broken in Safari */
+		--system-button-face: transparent;
+
+		/* ButtonText is broken in Safari */
+		--system-button-text: color-mix(
+				in oklab,
+				ButtonText var(--system-cs-state),
+				CanvasText
+		);
+
+		/*--system-canvas: Canvas;*/
+		/*--system-canvas-text: CanvasText;*/
+
+		/* Field is broken in iOS */
+		--system-field: color-mix(
+				in oklab,
+				Field var(--system-cs-state),
+				Canvas
+		);
+		/* FieldText is broken in iOS */
+		--system-field-text: color-mix(
+				in oklab,
+				FieldText var(--system-cs-state),
+				CanvasText
+		);
+
+		/*--system-gray-text: GrayText;*/
+
+		--system-highlight: color-mix(
+				in oklab,
+				Highlight var(--system-cs-state),
+				color-mix(in oklab, steelblue 80%, CanvasText)
+		);
+		--system-highlight-text: HighlightText;
+
+		/* LinkText is too dark in darkmode */
+		--system-link-text: color-mix(
+				in oklab,
+				LinkText var(--system-cs-state),
+				color-mix(in oklab, LinkText 60%, CanvasText)
+		);
+
+		/*--system-mark: Mark;*/
+		/*--system-mark-text: MarkText;*/
+		/*--system-selected-item: SelectedItem;*/
+		/*--system-selected-item-text: SelectedItemText;*/
+
+		/* VisitedText is too dark in darkmode */
+		--system-visited-text: color-mix(
+				in oklab,
+				VisitedText var(--system-cs-state),
+				color-mix(in oklab, VisitedText 60%, CanvasText)
+		);
+	}
+
+}
diff --git a/src/system-custom-colors.css b/src/system-custom-colors.css
@@ -0,0 +1,20 @@
+@layer --system {
+	/* PROPS ############################################################################## */
+	:root{
+
+		/* These are only mixed with system colors */
+		--system-surface-color: color-mix(in oklab, Canvas 95%, CanvasText);
+		--system-stroke-color: color-mix(in oklab, Canvas 55%, CanvasText);
+		--system-invalid-color: color-mix(in oklab, var(--system-active-text) 90%, CanvasText);
+		--system-content-color-light: color-mix(
+				in oklab,
+				Canvas var(--system-cs-state),
+				CanvasText
+		);
+		--system-content-color-dark: color-mix(
+				in oklab,
+				CanvasText var(--system-cs-state),
+				Canvas
+		);
+	}
+}
diff --git a/src/system-properties.css b/src/system-properties.css
@@ -0,0 +1,116 @@
+@property --system-accent-color {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: AccentColor;
+}
+
+@property --system-accent-color-text {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: AccentColorText;
+}
+
+@property --system-active-text {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: ActiveText;
+}
+
+@property --system-button-border {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: ButtonBorder;
+}
+
+@property --system-button-face {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: ButtonFace;
+}
+
+@property --system-button-text {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: ButtonText;
+}
+
+@property --system-canvas {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: Canvas;
+}
+
+@property --system-canvas-text {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: CanvasText;
+}
+
+@property --system-field {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: Field;
+}
+
+@property --system-field-text {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: FieldText;
+}
+
+@property --system-gray-text {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: GrayText;
+}
+
+@property --system-highlight {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: Highlight;
+}
+
+@property --system-highlight-text {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: HighlightText;
+}
+
+@property --system-link-text {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: LinkText;
+}
+
+@property --system-mark {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: Mark;
+}
+
+@property --system-mark-text {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: MarkText;
+}
+
+@property --system-selected-item {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: SelectedItem;
+}
+
+@property --system-selected-item-text {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: SelectedItemText;
+}
+
+@property --system-visited-text {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: VisitedText;
+}
+
+
+