@rolemodel/optics 2.6.0 → 2.6.1

package/CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 
 This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.6.1] - 2026-10-21
+
+### Theme Token Changes
+
+- Add a `--mode` option to the contrast checker by @Jeremy-Walton in https://github.com/RoleModel/optics/pull/371
+  - `optics-check-contrast` takes `--mode=light` or `--mode=dark` to check only one color mode. Use it if your app forces one mode, such as with `data-theme-mode="light"`. Both modes are still checked by default. See [Contrast Checker](https://docs.optics.rolemodel.design/?path=/docs/tools-contrast-checker--docs)
+
+### Dependencies
+
+- Add a `--mode` option to the contrast checker by @Jeremy-Walton in https://github.com/RoleModel/optics/pull/371
+  - Includes the vite bump from 8.1.4 to 8.1.6 from https://github.com/RoleModel/optics/pull/369. Development dependencies were updated in the lockfile. It does not affect the shipped CSS.
+
+### Documentation Changes
+
+- Add a `--mode` option to the contrast checker by @Jeremy-Walton in https://github.com/RoleModel/optics/pull/371
+  - The [Contrast Checker](https://docs.optics.rolemodel.design/?path=/docs/tools-contrast-checker--docs) page lists the `--mode` option and the default for each option.
+
 ## [2.6.0] - 2026-10-21
 
 ### Theme Token Changes

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolemodel/optics",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "packageManager": "yarn@4.8.1",
   "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.",
   "main": "dist/css/optics.css",

package/dist/tools/check-contrast.cjs

@@ -1,18 +1,19 @@
 #!/usr/bin/env node
 /**
  * Checks WCAG 2.1 contrast between every Optics scale step and its `on` text
- * colors, in light and dark mode, for your theme:
+ * colors, in light and dark mode (or just one, with --mode), for your theme:
  *
  *   --op-color-primary-plus-five  vs  --op-color-primary-on-plus-five      (needs --min)
  *   --op-color-primary-plus-five  vs  --op-color-primary-on-plus-five-alt  (needs --alt-min)
  *
  * Usage:
- *   optics-check-contrast [files...] [--hsl | --oklch] [--min=4.5] [--alt-min=4.5] [--report]
+ *   optics-check-contrast [files...] [--hsl | --oklch] [--mode=light | --mode=dark] [--min=4.5] [--alt-min=4.5] [--report]
  *
  *   files      CSS with your --op-* overrides: theme files, or your compiled CSS bundle.
  *              They are applied on top of the Optics tokens, the last value of each token wins.
  *   --hsl      Check against the HSL tokens (optics.css). Detected from -s / hsl() in your files.
  *   --oklch    Check against the OKLCH tokens (optics-oklch.css). Detected from -c / oklch().
+ *   --mode     Check only light or dark mode. Both are checked by default.
  *   --report   List every pair, and don't fail.
  *
  * Tokens are read without their selectors, so overrides scoped to a class or

package/dist/tools/contrast/contrast-check.cjs

@@ -3,7 +3,7 @@ const ColorPair = require('./color-pair.cjs')
 const ContrastResult = require('./contrast-result.cjs')
 const ThemedColor = require('./colors/themed-color.cjs')
 
-// Measures every scale step against its `on` and `on-alt` text colors, in light and dark mode.
+// Measures every scale step against its `on` and `on-alt` text colors, in light and dark mode, or just --mode.
 class ContrastCheck {
   #theme
   #options
@@ -15,10 +15,11 @@ class ContrastCheck {
 
   // Yields one result per pair and mode, so a report can print each one as it is measured.
   *results() {
+    const modes = this.#options.mode ? [this.#options.mode] : ThemedColor.MODES
     for (const pair of ColorPair.findAll(this.#theme)) {
       const background = this.#colorOf(pair.background)
       const text = this.#colorOf(pair.text)
-      for (const mode of ThemedColor.MODES) {
+      for (const mode of modes) {
         const ratio = background.in(mode).contrastWith(text.in(mode))
         // NaN < min is false, so an unmeasurable pair would otherwise pass.
         if (!Number.isFinite(ratio))

package/dist/tools/contrast/contrast-reporter.cjs

@@ -19,10 +19,11 @@ class ContrastReporter {
   }
 
   finish() {
-    const { min, altMin, report } = this.#options
+    const { mode, min, altMin, report } = this.#options
     const passed = this.#count - this.#failures.length
+    const checked = mode ? ` (${mode})` : ''
     this.#print(
-      `Optics ${this.#build.name} contrast: ${passed}/${this.#count} pairs pass (on >= ${min}, on-alt >= ${altMin})`
+      `Optics ${this.#build.name} contrast${checked}: ${passed}/${this.#count} pairs pass (on >= ${min}, on-alt >= ${altMin})`
     )
     if (report || !this.#failures.length) return 0
 

package/dist/tools/contrast/tool-options.cjs

@@ -1,9 +1,10 @@
 const CheckError = require('./check-error.cjs')
+const ThemedColor = require('./colors/themed-color.cjs')
 
 const DEFAULT_MIN = 4.5
 const FLAG = /^--([a-z-]+)(?:=(.*))?$/
 
-// The command-line arguments: optics-check-contrast [files...] [--hsl | --oklch] [--min=4.5] [--alt-min=4.5] [--report]
+// The command-line arguments: optics-check-contrast [files...] [--hsl | --oklch] [--mode=light | --mode=dark] [--min=4.5] [--alt-min=4.5] [--report]
 class ToolOptions {
   static parse(args) {
     const flags = {}
@@ -19,6 +20,7 @@ class ToolOptions {
   constructor(files, flags) {
     this.files = files
     this.buildName = forcedBuildName(flags)
+    this.mode = mode(flags.mode)
     this.min = threshold(flags.min)
     this.altMin = threshold(flags['alt-min'])
     this.report = Boolean(flags.report)
@@ -31,6 +33,11 @@ function forcedBuildName(flags) {
   return undefined
 }
 
+function mode(value) {
+  if (value === undefined || ThemedColor.MODES.includes(value)) return value
+  throw new CheckError('--mode must be light or dark')
+}
+
 function threshold(value) {
   if (value === undefined) return DEFAULT_MIN
   // A bare --min (true) or empty --min= ('') would become 1 or 0 with Number(), so require a numeric string.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolemodel/optics",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "packageManager": "yarn@4.8.1",
   "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.",
   "main": "dist/css/optics.css",