Extract color palettes to scheme stylesheets.

smnscp · May 13, 2023 · a94eba4 · a94eba4
1 parent 3221fa9
commit a94eba4
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 7 deletions.
diff --git a/css/axioms/config/specific/color/brand.scss b/css/axioms/config/specific/color/brand.scss
@@ -4,31 +4,45 @@
 
 $prim: 215deg;
 $dist: 140deg;
-$sl-curve: .1 .9 .8 .9 .8 .1 .1 .1;
+$sl-curve: 0.1 0.9 0.8 0.9 0.8 0.1 0.1 0.1;
+$prefix: "color" !default;
+$suffix: (
+  factor: 1000,
+  inverse: false,
+) !default;
+@debug $suffix;
 
 /// Brand colors.
 /// Kept separate from the default configuration to make it optional to import.
 /// @name palettes@brand
 $palettes: (
   "grey": (
     hue: $prim,
-    sl-curve: .1 .9 .2 .9 .2 .1 .1 .1,
+    sl-curve: 0.1 0.9 0.2 0.9 0.2 0.1 0.1 0.1,
     range: (
       step: 0.1,
       start: 0,
       end: 1,
     ),
+    prefix: $prefix,
+    suffix: $suffix,
   ),
   "primary": (
     hue: $prim,
     sl-curve: $sl-curve,
+    prefix: $prefix,
+    suffix: $suffix,
   ),
   "secondary": (
     hue: $prim + $dist,
     sl-curve: $sl-curve,
+    prefix: $prefix,
+    suffix: $suffix,
   ),
   "tertiary": (
     hue: $prim - $dist,
     sl-curve: $sl-curve,
+    prefix: $prefix,
+    suffix: $suffix,
   ),
 );
diff --git a/css/dark-scheme.scss b/css/dark-scheme.scss
@@ -0,0 +1,14 @@
+@use "axioms/config/specific/color/brand" with (
+  $suffix: (
+    factor: 1000,
+    inverse: true,
+  )
+);
+@use "axioms/config" with (
+  $custom: (
+    color: (
+      palettes: brand.$palettes,
+    ),
+  )
+);
+@use "axioms/properties/color";
diff --git a/css/index.scss b/css/index.scss
@@ -1,5 +1,4 @@
 @use "sass:math";
-@use "axioms/config/specific/color/brand";
 @use "axioms/config/specific/color/logical";
 @use "axioms" with (
   $config-custom: (
@@ -24,7 +23,6 @@
       ),
     ),
     color: (
-      palettes: brand.$palettes,
       logical: logical.$mapping,
     ),
   )

diff --git a/css/light-scheme.scss b/css/light-scheme.scss
@@ -0,0 +1,9 @@
+@use "axioms/config/specific/color/brand";
+@use "axioms/config" with (
+  $custom: (
+    color: (
+      palettes: brand.$palettes,
+    ),
+  )
+);
+@use "axioms/properties/color";
diff --git a/example/body-copy.html b/example/body-copy.html
@@ -7,6 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="/img/logo.svg" rel="shortcut icon">
   <link rel="stylesheet" href="/css/index.scss">
+  <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
+  <link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
   <style>
     body {
       display: grid;

diff --git a/example/color.html b/example/color.html
@@ -7,6 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="/img/logo.svg" rel="shortcut icon">
   <link rel="stylesheet" href="/css/index.scss">
+  <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
+  <link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
 </head>
 
 <body class="lay-page-center">

diff --git a/example/elements-showcase.html b/example/elements-showcase.html
@@ -7,6 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="/img/logo.svg" rel="shortcut icon">
   <link rel="stylesheet" href="/css/index.scss">
+  <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
+  <link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
   <style>
     body {
       display: flex;

diff --git a/example/layout.html b/example/layout.html
@@ -7,12 +7,25 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="/img/logo.svg" rel="shortcut icon">
   <link rel="stylesheet" href="/css/index.scss">
+  <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
+  <link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
 </head>
 
 <body class="scp-homepage lay-page-center">
   <header class="clr-alternate +alt">
     <hgroup>
-      <p><img src="/img/logo.svg" alt="logo"></p>
+      <p>
+        <svg width="128" height="128" version="1.1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+          <path d="m64 24-40 12.5 40 6.5 40-6.5z" style="fill: var(--color-primary-500); fill-opacity: .3;" />
+          <path d="m64 0v24l40 12.5v-16.5z" style="fill: var(--color-primary-500);" />
+          <path d="m64 0-40 20v16.5l40-12.5z" style="fill: var(--color-primary-700);" />
+          <path d="m24 91.5 40 12.5 40-12.5-40-6.5z" style="fill: var(--color-secondary-500); fill-opacity: .3;" />
+          <path d="m64 104v24l40-20v-16.5z" style="fill: var(--color-secondary-500);" />
+          <path d="m24 91.5 40 12.5v24l-40-20z" style="fill: var(--color-secondary-700);" />
+          <path d="m67.712 52.567-7.127 22.953 39.631 8.336 4.879-15.713z" style="fill: var(--color-tertiary-500);" />
+          <path d="m27.801 44.16 39.911 8.4063-7.1272 22.953-37.653-15.678z" style="fill: var(--color-tertiary-700);" />
+        </svg>
+      </p>
       <h1>Sample Layout</h1>
       <p>Centered page. With cover, menu, feature, and several sections in columns.</p>
     </hgroup>
@@ -65,7 +78,7 @@ <h2 class="lay-wrap-reset">Section Five</h2>
           <h3>Subsection</h3>
           <ul>
             <li>Listitem ipsum dolor</li>
-            <li>Listitem cumque  perferendis</li>
+            <li>Listitem cumque perferendis</li>
             <li>Listitem sed,</li>
             <li>Listitem sequi sunt</li>
             <li>Listitem cum animi</li>

diff --git a/example/shadow.html b/example/shadow.html
@@ -7,6 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="/img/logo.svg" rel="shortcut icon">
   <link rel="stylesheet" href="/css/index.scss">
+  <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
+  <link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
 </head>
 
 <body class="lay-page-center">

diff --git a/index.html b/index.html
@@ -7,6 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="/img/logo.svg" rel="shortcut icon">
   <link rel="stylesheet" href="/css/index.scss">
+  <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/css/dark-scheme.scss">
+  <link rel="stylesheet" media="not (prefers-color-scheme: dark)" href="/css/light-scheme.scss">
 </head>
 
 <body class="scp-homepage lay-page-center">

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "stylament",
   "title": "Stylament",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "A fundament for your document styling.",
   "keywords": [
     "document structure",