From 7710966b9afdf0c5cd0445b0874e2ca5de947fb8 Mon Sep 17 00:00:00 2001 From: Igor Fedoronchuk Date: Thu, 8 Oct 2026 10:31:14 +0200 Subject: [PATCH 1/3] docs: add inline color swatches to README variable tables Add a 16x16 solid-color swatch image (via singlecolorimage.com) next to every literal hex default in the SCSS variable reference tables, so readers see each variable's actual color inline. Change is additive only: swatches are added beside existing hex text; non-hex defaults (SCSS functions, var() references, variable aliases, null/none, sizes) are left unchanged. --- README.md | 68 +++++++++++++++++++++++++++---------------------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index d10f912..9b99339 100644 --- a/README.md +++ b/README.md @@ -211,38 +211,38 @@ Three things changed shape and are worth knowing if you already set variables: | Variable | Default (light / dark) | | |---|---|---| -| `$skinMainFirstColor` | `#23282f` | | -| `$skinMainSecondColor` | `#5ea3d3` | | +| `$skinMainFirstColor` | ![#23282f](https://singlecolorimage.com/get/23282f/16x16) `#23282f` | | +| `$skinMainSecondColor` | ![#5ea3d3](https://singlecolorimage.com/get/5ea3d3/16x16) `#5ea3d3` | | | `$skinBorderRadius` | `4px` | | -| `$skinBorderWindowColor` | `#e6e9ee` | | +| `$skinBorderWindowColor` | ![#e6e9ee](https://singlecolorimage.com/get/e6e9ee/16x16) `#e6e9ee` | | | `$skinTablePadding` | `10px` | | #### Surfaces, text and borders | Variable | Default (light / dark) | | |---|---|---| -| `$skinPageBgColor` / `$skinPageBgColorDark` | `#f7f9fb` / `#161a1e` | page background | -| `$skinSurfaceColor` / `$skinSurfaceColorDark` | `#ffffff` / `#25292f` | panels / cards / content | -| `$skinSurface2Color` / `$skinSurface2ColorDark` | `#f0f2f5` / `#2c3137` | table headers / striping / subtle fills | -| `$skinSurfaceHoverColor` / `$skinSurfaceHoverColorDark` | `#f5f7fa` / `#3f454d` | row / item hover | -| `$skinSelectedRowColor` / `$skinSelectedRowColorDark` | `#d9e4ec` / `#304457` | checked table row | -| `$skinElevatedColor` / `$skinElevatedColorDark` | `$skinSurfaceColor` / `#363c43` | tool buttons and dropdown panels floating above the page | -| `$skinTextColor` / `$skinTextColorDark` | `#323537` / `#dde2e8` | body text | -| `$skinTextMutedColor` / `$skinTextMutedColorDark` | `#6b7177` / `#b0b8c2` | secondary text / axis labels | -| `$skinBorderColor` / `$skinBorderColorDark` | `#e0e4e9` / `#404750` | borders / grid lines | -| `$skinInputBgColor` / `$skinInputBgColorDark` | `#ffffff` / `#1e2227` | form control background | -| `$skinInputBorderColor` / `$skinInputBorderColorDark` | `#c9ced4` / `#4d555f` | form control border | +| `$skinPageBgColor` / `$skinPageBgColorDark` | ![#f7f9fb](https://singlecolorimage.com/get/f7f9fb/16x16) `#f7f9fb` / ![#161a1e](https://singlecolorimage.com/get/161a1e/16x16) `#161a1e` | page background | +| `$skinSurfaceColor` / `$skinSurfaceColorDark` | ![#ffffff](https://singlecolorimage.com/get/ffffff/16x16) `#ffffff` / ![#25292f](https://singlecolorimage.com/get/25292f/16x16) `#25292f` | panels / cards / content | +| `$skinSurface2Color` / `$skinSurface2ColorDark` | ![#f0f2f5](https://singlecolorimage.com/get/f0f2f5/16x16) `#f0f2f5` / ![#2c3137](https://singlecolorimage.com/get/2c3137/16x16) `#2c3137` | table headers / striping / subtle fills | +| `$skinSurfaceHoverColor` / `$skinSurfaceHoverColorDark` | ![#f5f7fa](https://singlecolorimage.com/get/f5f7fa/16x16) `#f5f7fa` / ![#3f454d](https://singlecolorimage.com/get/3f454d/16x16) `#3f454d` | row / item hover | +| `$skinSelectedRowColor` / `$skinSelectedRowColorDark` | ![#d9e4ec](https://singlecolorimage.com/get/d9e4ec/16x16) `#d9e4ec` / ![#304457](https://singlecolorimage.com/get/304457/16x16) `#304457` | checked table row | +| `$skinElevatedColor` / `$skinElevatedColorDark` | `$skinSurfaceColor` / ![#363c43](https://singlecolorimage.com/get/363c43/16x16) `#363c43` | tool buttons and dropdown panels floating above the page | +| `$skinTextColor` / `$skinTextColorDark` | ![#323537](https://singlecolorimage.com/get/323537/16x16) `#323537` / ![#dde2e8](https://singlecolorimage.com/get/dde2e8/16x16) `#dde2e8` | body text | +| `$skinTextMutedColor` / `$skinTextMutedColorDark` | ![#6b7177](https://singlecolorimage.com/get/6b7177/16x16) `#6b7177` / ![#b0b8c2](https://singlecolorimage.com/get/b0b8c2/16x16) `#b0b8c2` | secondary text / axis labels | +| `$skinBorderColor` / `$skinBorderColorDark` | ![#e0e4e9](https://singlecolorimage.com/get/e0e4e9/16x16) `#e0e4e9` / ![#404750](https://singlecolorimage.com/get/404750/16x16) `#404750` | borders / grid lines | +| `$skinInputBgColor` / `$skinInputBgColorDark` | ![#ffffff](https://singlecolorimage.com/get/ffffff/16x16) `#ffffff` / ![#1e2227](https://singlecolorimage.com/get/1e2227/16x16) `#1e2227` | form control background | +| `$skinInputBorderColor` / `$skinInputBorderColorDark` | ![#c9ced4](https://singlecolorimage.com/get/c9ced4/16x16) `#c9ced4` / ![#4d555f](https://singlecolorimage.com/get/4d555f/16x16) `#4d555f` | form control border | #### Header menu | Variable | Default (light / dark) | | |---|---|---| -| `$skinMenuPillColor` | `#2e3236` | top-level current/hover pill | -| `$skinMenuPillTextColor` | `#6cb0de` | text on that pill; follows the dropdown text so a | -| `$skinMenuPanelColor` | `#2e3236` | dropdown panel bg + hover "bridge" border | -| `$skinMenuTextColor` | `#dfe2e6` | dropdown item text (was: inherited #fff) | -| `$skinMenuItemHoverColor` | `#3f454c` | dropdown item hover/current bg (was: none) | -| `$skinMenuItemHoverTextColor` | `#6cb0de` | hover/current dropdown item text, same reason | +| `$skinMenuPillColor` | ![#2e3236](https://singlecolorimage.com/get/2e3236/16x16) `#2e3236` | top-level current/hover pill | +| `$skinMenuPillTextColor` | ![#6cb0de](https://singlecolorimage.com/get/6cb0de/16x16) `#6cb0de` | text on that pill; follows the dropdown text so a | +| `$skinMenuPanelColor` | ![#2e3236](https://singlecolorimage.com/get/2e3236/16x16) `#2e3236` | dropdown panel bg + hover "bridge" border | +| `$skinMenuTextColor` | ![#dfe2e6](https://singlecolorimage.com/get/dfe2e6/16x16) `#dfe2e6` | dropdown item text (was: inherited #fff) | +| `$skinMenuItemHoverColor` | ![#3f454c](https://singlecolorimage.com/get/3f454c/16x16) `#3f454c` | dropdown item hover/current bg (was: none) | +| `$skinMenuItemHoverTextColor` | ![#6cb0de](https://singlecolorimage.com/get/6cb0de/16x16) `#6cb0de` | hover/current dropdown item text, same reason | | `$skinMenuFontSize` | `13px` | header menu text size | | `$skinMenuItemPaddingY` | `5px` | dropdown item top/bottom padding (was 6px/4px + a 7px border) | | `$skinMenuItemLineHeight` | `1.35` | dropdown item line-height | @@ -256,7 +256,7 @@ Three things changed shape and are worth knowing if you already set variables: | Variable | Default (light / dark) | | |---|---|---| -| `$skinTitleBarColor` | `#343c46` | | +| `$skinTitleBarColor` | ![#343c46](https://singlecolorimage.com/get/343c46/16x16) `#343c46` | | | `$skinTitleBarBorderColor` | `$skinMainSecondColor` | | | `$skinTitleBarBorderWidth` | `0` | | | `$skinTitleBarButtonPaddingY` | `6px` | action button vertical padding | @@ -269,17 +269,17 @@ Three things changed shape and are worth knowing if you already set variables: | `$skinPanelHeaderColor` / `$skinPanelHeaderColorDark` | `var(--aa-page-bg)` / `var(--aa-page-bg)` | | | `$skinPanelHeaderTextColor` / `$skinPanelHeaderTextColorDark` | `var(--aa-inactive-tab-text)` / `var(--aa-inactive-tab-text)` | | | `$skinPanelHeaderPaddingY` | `5px` | panel + sidebar header height | -| `$skinLabelColor` / `$skinLabelColorDark` | `#8494a8` / `$skinTextColorDark` | | -| `$skinTabInactiveColor` / `$skinTabInactiveColorDark` | `#f7f9fb` / `#161a1e` | inactive tab fill | -| `$skinActiveTabTextColor` / `$skinActiveTabTextColorDark` | `$skinMainSecondColor` / `#7cc0ec` | selected tab label | -| `$skinInactiveTabTextColor` / `$skinInactiveTabTextColorDark` | `#5e6469` / `#b0b8c2` | inactive tab label | +| `$skinLabelColor` / `$skinLabelColorDark` | ![#8494a8](https://singlecolorimage.com/get/8494a8/16x16) `#8494a8` / `$skinTextColorDark` | | +| `$skinTabInactiveColor` / `$skinTabInactiveColorDark` | ![#f7f9fb](https://singlecolorimage.com/get/f7f9fb/16x16) `#f7f9fb` / ![#161a1e](https://singlecolorimage.com/get/161a1e/16x16) `#161a1e` | inactive tab fill | +| `$skinActiveTabTextColor` / `$skinActiveTabTextColorDark` | `$skinMainSecondColor` / ![#7cc0ec](https://singlecolorimage.com/get/7cc0ec/16x16) `#7cc0ec` | selected tab label | +| `$skinInactiveTabTextColor` / `$skinInactiveTabTextColorDark` | ![#5e6469](https://singlecolorimage.com/get/5e6469/16x16) `#5e6469` / ![#b0b8c2](https://singlecolorimage.com/get/b0b8c2/16x16) `#b0b8c2` | inactive tab label | | `$skinTableHeaderTextColor` / `$skinTableHeaderTextColorDark` | `$skinTextColor` / `$skinTextColorDark` | index-table column header text; the body text colour, so headings read as strongly as the rows | -| `$skinStatusTagTextColor` | `#ffffff` | label inside a filled status tag; `empty` / `unknown` / `none` have no fill and keep `$skinTextMutedColor` | -| `$skinStatusTagNeutralColor` | `#707681` | unclassified tags: `No`, protocol tags | -| `$skinStatusTagOkColor` | `#5e7e63` | `ok` `published` `complete` `completed` `green` `yes` | -| `$skinStatusTagNoticeColor` | `#3874d2` | `notice` `blue` | -| `$skinStatusTagWarnColor` | `#9e6c15` | `warn` `warning` `orange` | -| `$skinStatusTagErrorColor` | `#ce483b` | `error` `errored` `red` | +| `$skinStatusTagTextColor` | ![#ffffff](https://singlecolorimage.com/get/ffffff/16x16) `#ffffff` | label inside a filled status tag; `empty` / `unknown` / `none` have no fill and keep `$skinTextMutedColor` | +| `$skinStatusTagNeutralColor` | ![#707681](https://singlecolorimage.com/get/707681/16x16) `#707681` | unclassified tags: `No`, protocol tags | +| `$skinStatusTagOkColor` | ![#5e7e63](https://singlecolorimage.com/get/5e7e63/16x16) `#5e7e63` | `ok` `published` `complete` `completed` `green` `yes` | +| `$skinStatusTagNoticeColor` | ![#3874d2](https://singlecolorimage.com/get/3874d2/16x16) `#3874d2` | `notice` `blue` | +| `$skinStatusTagWarnColor` | ![#9e6c15](https://singlecolorimage.com/get/9e6c15/16x16) `#9e6c15` | `warn` `warning` `orange` | +| `$skinStatusTagErrorColor` | ![#ce483b](https://singlecolorimage.com/get/ce483b/16x16) `#ce483b` | `error` `errored` `red` | | `$skinTabPaddingY` | `8px` | tab height | | `$skinTabPaddingX` | `15px` | tab label horizontal padding (text → border) | @@ -288,7 +288,7 @@ Three things changed shape and are worth knowing if you already set variables: | Variable | Default (light / dark) | | |---|---|---| | `$skinButtonColor` / `$skinButtonColorDark` | `darken($skinMainSecondColor, 20%)` / `$skinButtonColor` | one tone in both modes; white on it is 5.35:1 | -| `$skinButtonTextColor` / `$skinButtonTextColorDark` | `#ffffff` / `$skinButtonTextColor` | label on those buttons | +| `$skinButtonTextColor` / `$skinButtonTextColorDark` | ![#ffffff](https://singlecolorimage.com/get/ffffff/16x16) `#ffffff` / `$skinButtonTextColor` | label on those buttons | | `$skinTableToolsHeight` | `30px` | | | `$skinTableToolsPaddingX` | `$skinTableToolsHeight * 0.4` | 12px at 30px | @@ -297,8 +297,8 @@ Three things changed shape and are worth knowing if you already set variables: | Variable | Default (light / dark) | | |---|---|---| | `$skinAccentColor` / `$skinAccentColorDark` | `$skinMainSecondColor` / `$skinAccentColor` | focus ring / accent outline | -| `$skinLinkColor` / `$skinLinkColorDark` | `#38678b` / `#7cc0ec` | | -| `$skinDeleteLinkColor` / `$skinDeleteLinkColorDark` | `$skinLinkColor` / `#f49b9b` | | +| `$skinLinkColor` / `$skinLinkColorDark` | ![#38678b](https://singlecolorimage.com/get/38678b/16x16) `#38678b` / ![#7cc0ec](https://singlecolorimage.com/get/7cc0ec/16x16) `#7cc0ec` | | +| `$skinDeleteLinkColor` / `$skinDeleteLinkColorDark` | `$skinLinkColor` / ![#f49b9b](https://singlecolorimage.com/get/f49b9b/16x16) `#f49b9b` | | ## Screen From 18d193534df78407a24a18da860aa3c0aaa35886 Mon Sep 17 00:00:00 2001 From: Igor Fedoronchuk Date: Thu, 8 Oct 2026 11:05:49 +0200 Subject: [PATCH 2/3] fix(css_check): ignore README swatch images when parsing variable cells The inline swatch image markdown added next to each hex value contains slashes in its URL, which broke the light/dark `split("/")` in the README-vs-stylesheet checker. Strip the `![alt](url)` images before splitting so the backticked hex values are read correctly. --- test/css_check.rb | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/test/css_check.rb b/test/css_check.rb index b5406f0..4afdbac 100644 --- a/test/css_check.rb +++ b/test/css_check.rb @@ -86,7 +86,11 @@ def self.readme_table_matches_declarations listed_twice = [] blank = [] rows.each do |light, dark, values| - parts = values.split("/").map { |part| part.strip.delete("`") } + # Drop any inline swatch images (`![#hex](…/get/hex/16x16)`) the README + # adds next to each value, then read the backticked hex(es). Without this + # the image URL's slashes break the light/dark split below. + cleaned = values.gsub(/!\[[^\]]*\]\([^)]*\)/, "") + parts = cleaned.split("/").map { |part| part.strip.delete("`") }.reject(&:empty?) [[light, parts[0]], [dark, parts[1]]].each do |name, value| next if name.nil? # Every row counts towards duplicate detection, blank or not. Skipping From 76cbae100afe4f20e83156ff7cfbd449b4ef5715 Mon Sep 17 00:00:00 2001 From: Igor Fedoronchuk Date: Thu, 8 Oct 2026 11:40:36 +0200 Subject: [PATCH 3/3] docs: self-host README color swatches as repo-local SVGs Replace the external singlecolorimage.com swatch images with small committed SVG files referenced by relative path, so the README renders its color swatches natively on GitHub with no dependency on a third-party CDN. One 16x16 solid-fill SVG per distinct hex lives under docs/swatches/. --- README.md | 68 ++++++++++++++++++++-------------------- docs/swatches/161a1e.svg | 1 + docs/swatches/1e2227.svg | 1 + docs/swatches/23282f.svg | 1 + docs/swatches/25292f.svg | 1 + docs/swatches/2c3137.svg | 1 + docs/swatches/2e3236.svg | 1 + docs/swatches/304457.svg | 1 + docs/swatches/323537.svg | 1 + docs/swatches/343c46.svg | 1 + docs/swatches/363c43.svg | 1 + docs/swatches/38678b.svg | 1 + docs/swatches/3874d2.svg | 1 + docs/swatches/3f454c.svg | 1 + docs/swatches/3f454d.svg | 1 + docs/swatches/404750.svg | 1 + docs/swatches/4d555f.svg | 1 + docs/swatches/5e6469.svg | 1 + docs/swatches/5e7e63.svg | 1 + docs/swatches/5ea3d3.svg | 1 + docs/swatches/6b7177.svg | 1 + docs/swatches/6cb0de.svg | 1 + docs/swatches/707681.svg | 1 + docs/swatches/7cc0ec.svg | 1 + docs/swatches/8494a8.svg | 1 + docs/swatches/9e6c15.svg | 1 + docs/swatches/b0b8c2.svg | 1 + docs/swatches/c9ced4.svg | 1 + docs/swatches/ce483b.svg | 1 + docs/swatches/d9e4ec.svg | 1 + docs/swatches/dde2e8.svg | 1 + docs/swatches/dfe2e6.svg | 1 + docs/swatches/e0e4e9.svg | 1 + docs/swatches/e6e9ee.svg | 1 + docs/swatches/f0f2f5.svg | 1 + docs/swatches/f49b9b.svg | 1 + docs/swatches/f5f7fa.svg | 1 + docs/swatches/f7f9fb.svg | 1 + docs/swatches/ffffff.svg | 1 + 39 files changed, 72 insertions(+), 34 deletions(-) create mode 100644 docs/swatches/161a1e.svg create mode 100644 docs/swatches/1e2227.svg create mode 100644 docs/swatches/23282f.svg create mode 100644 docs/swatches/25292f.svg create mode 100644 docs/swatches/2c3137.svg create mode 100644 docs/swatches/2e3236.svg create mode 100644 docs/swatches/304457.svg create mode 100644 docs/swatches/323537.svg create mode 100644 docs/swatches/343c46.svg create mode 100644 docs/swatches/363c43.svg create mode 100644 docs/swatches/38678b.svg create mode 100644 docs/swatches/3874d2.svg create mode 100644 docs/swatches/3f454c.svg create mode 100644 docs/swatches/3f454d.svg create mode 100644 docs/swatches/404750.svg create mode 100644 docs/swatches/4d555f.svg create mode 100644 docs/swatches/5e6469.svg create mode 100644 docs/swatches/5e7e63.svg create mode 100644 docs/swatches/5ea3d3.svg create mode 100644 docs/swatches/6b7177.svg create mode 100644 docs/swatches/6cb0de.svg create mode 100644 docs/swatches/707681.svg create mode 100644 docs/swatches/7cc0ec.svg create mode 100644 docs/swatches/8494a8.svg create mode 100644 docs/swatches/9e6c15.svg create mode 100644 docs/swatches/b0b8c2.svg create mode 100644 docs/swatches/c9ced4.svg create mode 100644 docs/swatches/ce483b.svg create mode 100644 docs/swatches/d9e4ec.svg create mode 100644 docs/swatches/dde2e8.svg create mode 100644 docs/swatches/dfe2e6.svg create mode 100644 docs/swatches/e0e4e9.svg create mode 100644 docs/swatches/e6e9ee.svg create mode 100644 docs/swatches/f0f2f5.svg create mode 100644 docs/swatches/f49b9b.svg create mode 100644 docs/swatches/f5f7fa.svg create mode 100644 docs/swatches/f7f9fb.svg create mode 100644 docs/swatches/ffffff.svg diff --git a/README.md b/README.md index 9b99339..00f5399 100644 --- a/README.md +++ b/README.md @@ -211,38 +211,38 @@ Three things changed shape and are worth knowing if you already set variables: | Variable | Default (light / dark) | | |---|---|---| -| `$skinMainFirstColor` | ![#23282f](https://singlecolorimage.com/get/23282f/16x16) `#23282f` | | -| `$skinMainSecondColor` | ![#5ea3d3](https://singlecolorimage.com/get/5ea3d3/16x16) `#5ea3d3` | | +| `$skinMainFirstColor` | ![#23282f](docs/swatches/23282f.svg) `#23282f` | | +| `$skinMainSecondColor` | ![#5ea3d3](docs/swatches/5ea3d3.svg) `#5ea3d3` | | | `$skinBorderRadius` | `4px` | | -| `$skinBorderWindowColor` | ![#e6e9ee](https://singlecolorimage.com/get/e6e9ee/16x16) `#e6e9ee` | | +| `$skinBorderWindowColor` | ![#e6e9ee](docs/swatches/e6e9ee.svg) `#e6e9ee` | | | `$skinTablePadding` | `10px` | | #### Surfaces, text and borders | Variable | Default (light / dark) | | |---|---|---| -| `$skinPageBgColor` / `$skinPageBgColorDark` | ![#f7f9fb](https://singlecolorimage.com/get/f7f9fb/16x16) `#f7f9fb` / ![#161a1e](https://singlecolorimage.com/get/161a1e/16x16) `#161a1e` | page background | -| `$skinSurfaceColor` / `$skinSurfaceColorDark` | ![#ffffff](https://singlecolorimage.com/get/ffffff/16x16) `#ffffff` / ![#25292f](https://singlecolorimage.com/get/25292f/16x16) `#25292f` | panels / cards / content | -| `$skinSurface2Color` / `$skinSurface2ColorDark` | ![#f0f2f5](https://singlecolorimage.com/get/f0f2f5/16x16) `#f0f2f5` / ![#2c3137](https://singlecolorimage.com/get/2c3137/16x16) `#2c3137` | table headers / striping / subtle fills | -| `$skinSurfaceHoverColor` / `$skinSurfaceHoverColorDark` | ![#f5f7fa](https://singlecolorimage.com/get/f5f7fa/16x16) `#f5f7fa` / ![#3f454d](https://singlecolorimage.com/get/3f454d/16x16) `#3f454d` | row / item hover | -| `$skinSelectedRowColor` / `$skinSelectedRowColorDark` | ![#d9e4ec](https://singlecolorimage.com/get/d9e4ec/16x16) `#d9e4ec` / ![#304457](https://singlecolorimage.com/get/304457/16x16) `#304457` | checked table row | -| `$skinElevatedColor` / `$skinElevatedColorDark` | `$skinSurfaceColor` / ![#363c43](https://singlecolorimage.com/get/363c43/16x16) `#363c43` | tool buttons and dropdown panels floating above the page | -| `$skinTextColor` / `$skinTextColorDark` | ![#323537](https://singlecolorimage.com/get/323537/16x16) `#323537` / ![#dde2e8](https://singlecolorimage.com/get/dde2e8/16x16) `#dde2e8` | body text | -| `$skinTextMutedColor` / `$skinTextMutedColorDark` | ![#6b7177](https://singlecolorimage.com/get/6b7177/16x16) `#6b7177` / ![#b0b8c2](https://singlecolorimage.com/get/b0b8c2/16x16) `#b0b8c2` | secondary text / axis labels | -| `$skinBorderColor` / `$skinBorderColorDark` | ![#e0e4e9](https://singlecolorimage.com/get/e0e4e9/16x16) `#e0e4e9` / ![#404750](https://singlecolorimage.com/get/404750/16x16) `#404750` | borders / grid lines | -| `$skinInputBgColor` / `$skinInputBgColorDark` | ![#ffffff](https://singlecolorimage.com/get/ffffff/16x16) `#ffffff` / ![#1e2227](https://singlecolorimage.com/get/1e2227/16x16) `#1e2227` | form control background | -| `$skinInputBorderColor` / `$skinInputBorderColorDark` | ![#c9ced4](https://singlecolorimage.com/get/c9ced4/16x16) `#c9ced4` / ![#4d555f](https://singlecolorimage.com/get/4d555f/16x16) `#4d555f` | form control border | +| `$skinPageBgColor` / `$skinPageBgColorDark` | ![#f7f9fb](docs/swatches/f7f9fb.svg) `#f7f9fb` / ![#161a1e](docs/swatches/161a1e.svg) `#161a1e` | page background | +| `$skinSurfaceColor` / `$skinSurfaceColorDark` | ![#ffffff](docs/swatches/ffffff.svg) `#ffffff` / ![#25292f](docs/swatches/25292f.svg) `#25292f` | panels / cards / content | +| `$skinSurface2Color` / `$skinSurface2ColorDark` | ![#f0f2f5](docs/swatches/f0f2f5.svg) `#f0f2f5` / ![#2c3137](docs/swatches/2c3137.svg) `#2c3137` | table headers / striping / subtle fills | +| `$skinSurfaceHoverColor` / `$skinSurfaceHoverColorDark` | ![#f5f7fa](docs/swatches/f5f7fa.svg) `#f5f7fa` / ![#3f454d](docs/swatches/3f454d.svg) `#3f454d` | row / item hover | +| `$skinSelectedRowColor` / `$skinSelectedRowColorDark` | ![#d9e4ec](docs/swatches/d9e4ec.svg) `#d9e4ec` / ![#304457](docs/swatches/304457.svg) `#304457` | checked table row | +| `$skinElevatedColor` / `$skinElevatedColorDark` | `$skinSurfaceColor` / ![#363c43](docs/swatches/363c43.svg) `#363c43` | tool buttons and dropdown panels floating above the page | +| `$skinTextColor` / `$skinTextColorDark` | ![#323537](docs/swatches/323537.svg) `#323537` / ![#dde2e8](docs/swatches/dde2e8.svg) `#dde2e8` | body text | +| `$skinTextMutedColor` / `$skinTextMutedColorDark` | ![#6b7177](docs/swatches/6b7177.svg) `#6b7177` / ![#b0b8c2](docs/swatches/b0b8c2.svg) `#b0b8c2` | secondary text / axis labels | +| `$skinBorderColor` / `$skinBorderColorDark` | ![#e0e4e9](docs/swatches/e0e4e9.svg) `#e0e4e9` / ![#404750](docs/swatches/404750.svg) `#404750` | borders / grid lines | +| `$skinInputBgColor` / `$skinInputBgColorDark` | ![#ffffff](docs/swatches/ffffff.svg) `#ffffff` / ![#1e2227](docs/swatches/1e2227.svg) `#1e2227` | form control background | +| `$skinInputBorderColor` / `$skinInputBorderColorDark` | ![#c9ced4](docs/swatches/c9ced4.svg) `#c9ced4` / ![#4d555f](docs/swatches/4d555f.svg) `#4d555f` | form control border | #### Header menu | Variable | Default (light / dark) | | |---|---|---| -| `$skinMenuPillColor` | ![#2e3236](https://singlecolorimage.com/get/2e3236/16x16) `#2e3236` | top-level current/hover pill | -| `$skinMenuPillTextColor` | ![#6cb0de](https://singlecolorimage.com/get/6cb0de/16x16) `#6cb0de` | text on that pill; follows the dropdown text so a | -| `$skinMenuPanelColor` | ![#2e3236](https://singlecolorimage.com/get/2e3236/16x16) `#2e3236` | dropdown panel bg + hover "bridge" border | -| `$skinMenuTextColor` | ![#dfe2e6](https://singlecolorimage.com/get/dfe2e6/16x16) `#dfe2e6` | dropdown item text (was: inherited #fff) | -| `$skinMenuItemHoverColor` | ![#3f454c](https://singlecolorimage.com/get/3f454c/16x16) `#3f454c` | dropdown item hover/current bg (was: none) | -| `$skinMenuItemHoverTextColor` | ![#6cb0de](https://singlecolorimage.com/get/6cb0de/16x16) `#6cb0de` | hover/current dropdown item text, same reason | +| `$skinMenuPillColor` | ![#2e3236](docs/swatches/2e3236.svg) `#2e3236` | top-level current/hover pill | +| `$skinMenuPillTextColor` | ![#6cb0de](docs/swatches/6cb0de.svg) `#6cb0de` | text on that pill; follows the dropdown text so a | +| `$skinMenuPanelColor` | ![#2e3236](docs/swatches/2e3236.svg) `#2e3236` | dropdown panel bg + hover "bridge" border | +| `$skinMenuTextColor` | ![#dfe2e6](docs/swatches/dfe2e6.svg) `#dfe2e6` | dropdown item text (was: inherited #fff) | +| `$skinMenuItemHoverColor` | ![#3f454c](docs/swatches/3f454c.svg) `#3f454c` | dropdown item hover/current bg (was: none) | +| `$skinMenuItemHoverTextColor` | ![#6cb0de](docs/swatches/6cb0de.svg) `#6cb0de` | hover/current dropdown item text, same reason | | `$skinMenuFontSize` | `13px` | header menu text size | | `$skinMenuItemPaddingY` | `5px` | dropdown item top/bottom padding (was 6px/4px + a 7px border) | | `$skinMenuItemLineHeight` | `1.35` | dropdown item line-height | @@ -256,7 +256,7 @@ Three things changed shape and are worth knowing if you already set variables: | Variable | Default (light / dark) | | |---|---|---| -| `$skinTitleBarColor` | ![#343c46](https://singlecolorimage.com/get/343c46/16x16) `#343c46` | | +| `$skinTitleBarColor` | ![#343c46](docs/swatches/343c46.svg) `#343c46` | | | `$skinTitleBarBorderColor` | `$skinMainSecondColor` | | | `$skinTitleBarBorderWidth` | `0` | | | `$skinTitleBarButtonPaddingY` | `6px` | action button vertical padding | @@ -269,17 +269,17 @@ Three things changed shape and are worth knowing if you already set variables: | `$skinPanelHeaderColor` / `$skinPanelHeaderColorDark` | `var(--aa-page-bg)` / `var(--aa-page-bg)` | | | `$skinPanelHeaderTextColor` / `$skinPanelHeaderTextColorDark` | `var(--aa-inactive-tab-text)` / `var(--aa-inactive-tab-text)` | | | `$skinPanelHeaderPaddingY` | `5px` | panel + sidebar header height | -| `$skinLabelColor` / `$skinLabelColorDark` | ![#8494a8](https://singlecolorimage.com/get/8494a8/16x16) `#8494a8` / `$skinTextColorDark` | | -| `$skinTabInactiveColor` / `$skinTabInactiveColorDark` | ![#f7f9fb](https://singlecolorimage.com/get/f7f9fb/16x16) `#f7f9fb` / ![#161a1e](https://singlecolorimage.com/get/161a1e/16x16) `#161a1e` | inactive tab fill | -| `$skinActiveTabTextColor` / `$skinActiveTabTextColorDark` | `$skinMainSecondColor` / ![#7cc0ec](https://singlecolorimage.com/get/7cc0ec/16x16) `#7cc0ec` | selected tab label | -| `$skinInactiveTabTextColor` / `$skinInactiveTabTextColorDark` | ![#5e6469](https://singlecolorimage.com/get/5e6469/16x16) `#5e6469` / ![#b0b8c2](https://singlecolorimage.com/get/b0b8c2/16x16) `#b0b8c2` | inactive tab label | +| `$skinLabelColor` / `$skinLabelColorDark` | ![#8494a8](docs/swatches/8494a8.svg) `#8494a8` / `$skinTextColorDark` | | +| `$skinTabInactiveColor` / `$skinTabInactiveColorDark` | ![#f7f9fb](docs/swatches/f7f9fb.svg) `#f7f9fb` / ![#161a1e](docs/swatches/161a1e.svg) `#161a1e` | inactive tab fill | +| `$skinActiveTabTextColor` / `$skinActiveTabTextColorDark` | `$skinMainSecondColor` / ![#7cc0ec](docs/swatches/7cc0ec.svg) `#7cc0ec` | selected tab label | +| `$skinInactiveTabTextColor` / `$skinInactiveTabTextColorDark` | ![#5e6469](docs/swatches/5e6469.svg) `#5e6469` / ![#b0b8c2](docs/swatches/b0b8c2.svg) `#b0b8c2` | inactive tab label | | `$skinTableHeaderTextColor` / `$skinTableHeaderTextColorDark` | `$skinTextColor` / `$skinTextColorDark` | index-table column header text; the body text colour, so headings read as strongly as the rows | -| `$skinStatusTagTextColor` | ![#ffffff](https://singlecolorimage.com/get/ffffff/16x16) `#ffffff` | label inside a filled status tag; `empty` / `unknown` / `none` have no fill and keep `$skinTextMutedColor` | -| `$skinStatusTagNeutralColor` | ![#707681](https://singlecolorimage.com/get/707681/16x16) `#707681` | unclassified tags: `No`, protocol tags | -| `$skinStatusTagOkColor` | ![#5e7e63](https://singlecolorimage.com/get/5e7e63/16x16) `#5e7e63` | `ok` `published` `complete` `completed` `green` `yes` | -| `$skinStatusTagNoticeColor` | ![#3874d2](https://singlecolorimage.com/get/3874d2/16x16) `#3874d2` | `notice` `blue` | -| `$skinStatusTagWarnColor` | ![#9e6c15](https://singlecolorimage.com/get/9e6c15/16x16) `#9e6c15` | `warn` `warning` `orange` | -| `$skinStatusTagErrorColor` | ![#ce483b](https://singlecolorimage.com/get/ce483b/16x16) `#ce483b` | `error` `errored` `red` | +| `$skinStatusTagTextColor` | ![#ffffff](docs/swatches/ffffff.svg) `#ffffff` | label inside a filled status tag; `empty` / `unknown` / `none` have no fill and keep `$skinTextMutedColor` | +| `$skinStatusTagNeutralColor` | ![#707681](docs/swatches/707681.svg) `#707681` | unclassified tags: `No`, protocol tags | +| `$skinStatusTagOkColor` | ![#5e7e63](docs/swatches/5e7e63.svg) `#5e7e63` | `ok` `published` `complete` `completed` `green` `yes` | +| `$skinStatusTagNoticeColor` | ![#3874d2](docs/swatches/3874d2.svg) `#3874d2` | `notice` `blue` | +| `$skinStatusTagWarnColor` | ![#9e6c15](docs/swatches/9e6c15.svg) `#9e6c15` | `warn` `warning` `orange` | +| `$skinStatusTagErrorColor` | ![#ce483b](docs/swatches/ce483b.svg) `#ce483b` | `error` `errored` `red` | | `$skinTabPaddingY` | `8px` | tab height | | `$skinTabPaddingX` | `15px` | tab label horizontal padding (text → border) | @@ -288,7 +288,7 @@ Three things changed shape and are worth knowing if you already set variables: | Variable | Default (light / dark) | | |---|---|---| | `$skinButtonColor` / `$skinButtonColorDark` | `darken($skinMainSecondColor, 20%)` / `$skinButtonColor` | one tone in both modes; white on it is 5.35:1 | -| `$skinButtonTextColor` / `$skinButtonTextColorDark` | ![#ffffff](https://singlecolorimage.com/get/ffffff/16x16) `#ffffff` / `$skinButtonTextColor` | label on those buttons | +| `$skinButtonTextColor` / `$skinButtonTextColorDark` | ![#ffffff](docs/swatches/ffffff.svg) `#ffffff` / `$skinButtonTextColor` | label on those buttons | | `$skinTableToolsHeight` | `30px` | | | `$skinTableToolsPaddingX` | `$skinTableToolsHeight * 0.4` | 12px at 30px | @@ -297,8 +297,8 @@ Three things changed shape and are worth knowing if you already set variables: | Variable | Default (light / dark) | | |---|---|---| | `$skinAccentColor` / `$skinAccentColorDark` | `$skinMainSecondColor` / `$skinAccentColor` | focus ring / accent outline | -| `$skinLinkColor` / `$skinLinkColorDark` | ![#38678b](https://singlecolorimage.com/get/38678b/16x16) `#38678b` / ![#7cc0ec](https://singlecolorimage.com/get/7cc0ec/16x16) `#7cc0ec` | | -| `$skinDeleteLinkColor` / `$skinDeleteLinkColorDark` | `$skinLinkColor` / ![#f49b9b](https://singlecolorimage.com/get/f49b9b/16x16) `#f49b9b` | | +| `$skinLinkColor` / `$skinLinkColorDark` | ![#38678b](docs/swatches/38678b.svg) `#38678b` / ![#7cc0ec](docs/swatches/7cc0ec.svg) `#7cc0ec` | | +| `$skinDeleteLinkColor` / `$skinDeleteLinkColorDark` | `$skinLinkColor` / ![#f49b9b](docs/swatches/f49b9b.svg) `#f49b9b` | | ## Screen diff --git a/docs/swatches/161a1e.svg b/docs/swatches/161a1e.svg new file mode 100644 index 0000000..e62500f --- /dev/null +++ b/docs/swatches/161a1e.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/1e2227.svg b/docs/swatches/1e2227.svg new file mode 100644 index 0000000..3a7ea3f --- /dev/null +++ b/docs/swatches/1e2227.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/23282f.svg b/docs/swatches/23282f.svg new file mode 100644 index 0000000..c78e439 --- /dev/null +++ b/docs/swatches/23282f.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/25292f.svg b/docs/swatches/25292f.svg new file mode 100644 index 0000000..f486957 --- /dev/null +++ b/docs/swatches/25292f.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/2c3137.svg b/docs/swatches/2c3137.svg new file mode 100644 index 0000000..c75c002 --- /dev/null +++ b/docs/swatches/2c3137.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/2e3236.svg b/docs/swatches/2e3236.svg new file mode 100644 index 0000000..dfe97a8 --- /dev/null +++ b/docs/swatches/2e3236.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/304457.svg b/docs/swatches/304457.svg new file mode 100644 index 0000000..a664cb0 --- /dev/null +++ b/docs/swatches/304457.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/323537.svg b/docs/swatches/323537.svg new file mode 100644 index 0000000..e60b955 --- /dev/null +++ b/docs/swatches/323537.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/343c46.svg b/docs/swatches/343c46.svg new file mode 100644 index 0000000..bec61d9 --- /dev/null +++ b/docs/swatches/343c46.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/363c43.svg b/docs/swatches/363c43.svg new file mode 100644 index 0000000..8f40008 --- /dev/null +++ b/docs/swatches/363c43.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/38678b.svg b/docs/swatches/38678b.svg new file mode 100644 index 0000000..4ce5e96 --- /dev/null +++ b/docs/swatches/38678b.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/3874d2.svg b/docs/swatches/3874d2.svg new file mode 100644 index 0000000..ac2c9e8 --- /dev/null +++ b/docs/swatches/3874d2.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/3f454c.svg b/docs/swatches/3f454c.svg new file mode 100644 index 0000000..42af0f7 --- /dev/null +++ b/docs/swatches/3f454c.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/3f454d.svg b/docs/swatches/3f454d.svg new file mode 100644 index 0000000..1cee829 --- /dev/null +++ b/docs/swatches/3f454d.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/404750.svg b/docs/swatches/404750.svg new file mode 100644 index 0000000..d78c43d --- /dev/null +++ b/docs/swatches/404750.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/4d555f.svg b/docs/swatches/4d555f.svg new file mode 100644 index 0000000..d176c9b --- /dev/null +++ b/docs/swatches/4d555f.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/5e6469.svg b/docs/swatches/5e6469.svg new file mode 100644 index 0000000..07f06db --- /dev/null +++ b/docs/swatches/5e6469.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/5e7e63.svg b/docs/swatches/5e7e63.svg new file mode 100644 index 0000000..2773685 --- /dev/null +++ b/docs/swatches/5e7e63.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/5ea3d3.svg b/docs/swatches/5ea3d3.svg new file mode 100644 index 0000000..ed96940 --- /dev/null +++ b/docs/swatches/5ea3d3.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/6b7177.svg b/docs/swatches/6b7177.svg new file mode 100644 index 0000000..4cdb271 --- /dev/null +++ b/docs/swatches/6b7177.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/6cb0de.svg b/docs/swatches/6cb0de.svg new file mode 100644 index 0000000..ade7b54 --- /dev/null +++ b/docs/swatches/6cb0de.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/707681.svg b/docs/swatches/707681.svg new file mode 100644 index 0000000..04a2407 --- /dev/null +++ b/docs/swatches/707681.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/7cc0ec.svg b/docs/swatches/7cc0ec.svg new file mode 100644 index 0000000..cde65f3 --- /dev/null +++ b/docs/swatches/7cc0ec.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/8494a8.svg b/docs/swatches/8494a8.svg new file mode 100644 index 0000000..4a241a1 --- /dev/null +++ b/docs/swatches/8494a8.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/9e6c15.svg b/docs/swatches/9e6c15.svg new file mode 100644 index 0000000..afa667f --- /dev/null +++ b/docs/swatches/9e6c15.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/b0b8c2.svg b/docs/swatches/b0b8c2.svg new file mode 100644 index 0000000..1e162a0 --- /dev/null +++ b/docs/swatches/b0b8c2.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/c9ced4.svg b/docs/swatches/c9ced4.svg new file mode 100644 index 0000000..08e745c --- /dev/null +++ b/docs/swatches/c9ced4.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/ce483b.svg b/docs/swatches/ce483b.svg new file mode 100644 index 0000000..228b857 --- /dev/null +++ b/docs/swatches/ce483b.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/d9e4ec.svg b/docs/swatches/d9e4ec.svg new file mode 100644 index 0000000..0a76887 --- /dev/null +++ b/docs/swatches/d9e4ec.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/dde2e8.svg b/docs/swatches/dde2e8.svg new file mode 100644 index 0000000..b98d0b4 --- /dev/null +++ b/docs/swatches/dde2e8.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/dfe2e6.svg b/docs/swatches/dfe2e6.svg new file mode 100644 index 0000000..6bbd924 --- /dev/null +++ b/docs/swatches/dfe2e6.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/e0e4e9.svg b/docs/swatches/e0e4e9.svg new file mode 100644 index 0000000..fb587a1 --- /dev/null +++ b/docs/swatches/e0e4e9.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/e6e9ee.svg b/docs/swatches/e6e9ee.svg new file mode 100644 index 0000000..e3a0c43 --- /dev/null +++ b/docs/swatches/e6e9ee.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/f0f2f5.svg b/docs/swatches/f0f2f5.svg new file mode 100644 index 0000000..a2555da --- /dev/null +++ b/docs/swatches/f0f2f5.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/f49b9b.svg b/docs/swatches/f49b9b.svg new file mode 100644 index 0000000..73768ea --- /dev/null +++ b/docs/swatches/f49b9b.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/f5f7fa.svg b/docs/swatches/f5f7fa.svg new file mode 100644 index 0000000..1866308 --- /dev/null +++ b/docs/swatches/f5f7fa.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/f7f9fb.svg b/docs/swatches/f7f9fb.svg new file mode 100644 index 0000000..161a0c8 --- /dev/null +++ b/docs/swatches/f7f9fb.svg @@ -0,0 +1 @@ + diff --git a/docs/swatches/ffffff.svg b/docs/swatches/ffffff.svg new file mode 100644 index 0000000..d1d17d7 --- /dev/null +++ b/docs/swatches/ffffff.svg @@ -0,0 +1 @@ +