From 94c27a4aa14dabf2b618b257bb6d1899e5e85327 Mon Sep 17 00:00:00 2001 From: Robby Ingebretsen Date: Thu, 22 Feb 2024 14:22:44 -0800 Subject: [PATCH 01/37] Use periods instead of colons for flat-map, rename color function clr --- README.md | 19 +- docs-src/data/docs.js | 468 +++++++++++--------- docs-src/src/styles.scss | 16 +- docs/docs.js | 468 +++++++++++--------- docs/styles.css | 122 +++--- index.scss | 2 +- src/controls/_index.scss | 5 + src/controls/button.scss | 201 +++++++++ src/controls/controls.scss | 241 +++++++++++ src/controls/dropdown.scss | 67 +++ src/controls/helpers.scss | 201 +++++++++ src/controls/textbox.scss | 58 +++ src/controls/toggle.scss | 0 src/init.scss | 73 ++-- src/modules/_index.scss | 1 - src/modules/boilerplate.scss | 30 +- src/modules/controls.scss | 746 -------------------------------- src/modules/reading.scss | 10 +- src/site/color.scss | 27 +- src/site/mediaquery.scss | 2 +- src/site/misc.scss | 18 +- src/site/rems.scss | 2 +- src/site/shadows.scss | 8 +- src/site/theme.scss | 4 +- src/site/transitions.scss | 12 +- src/site/typography.scss | 6 +- src/utils/bem.scss | 56 ++- src/utils/config.scss | 16 +- src/utils/flatmap.scss | 23 +- src/utils/math.scss | 1 - src/utils/misc.scss | 23 +- test/scss.spec.js | 10 +- test/site.color.spec.scss | 10 +- test/site.transitions.spec.scss | 4 +- test/utils.bem.spec.scss | 34 +- test/utils.flatmap.spec.scss | 24 +- test/utils.misc.spec.scss | 4 +- 37 files changed, 1587 insertions(+), 1425 deletions(-) create mode 100644 src/controls/_index.scss create mode 100644 src/controls/button.scss create mode 100644 src/controls/controls.scss create mode 100644 src/controls/dropdown.scss create mode 100644 src/controls/helpers.scss create mode 100644 src/controls/textbox.scss create mode 100644 src/controls/toggle.scss delete mode 100644 src/modules/controls.scss diff --git a/README.md b/README.md index 5d10d2a..265428d 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,12 @@ # px-styles +## BREAKING CHANGES + +- `clr` has been renamed `color` +- css maps now use periods as a separator instead of colons (so `button.background` instead of `button:backround`) +- Any settings related to controls are now just the name of the component (e.g. `controls:button:background` is now just `button:background`) +- + This is a simple SCSS framework that provides basic site setup and some common functionality for web projects. The goal is to create a simple to understand boilerplate coupled with a consistent approach to styling that encourages reuse and best practices while maintaing flexibility. ## Useful Links @@ -40,9 +47,9 @@ Configuring px-styles consists of setting any desired configuration using the `c @use '@thinkpixellab-public/px-styles' as *; // site config -@include config('colors:accent', #00dc82); -@include config('colors:page-bg', #011e26); -@include config('colors:page-fg', white); +@include config('colors.accent', #00dc82); +@include config('colors.page-bg', #011e26); +@include config('colors.page-fg', white); // initialize and load defaults (required) @include init(); @@ -156,7 +163,7 @@ Domain specific functions include: - `fs($name)` - gets a font-size from the type ramp - `sp($n)` - gets a spacing value derived from the common spacer value - `rems($px)` - convert px value to rems based on the sites base font-size -- `clr($name, $shade, $alpha)` - retrieves a common named color and optionally produce a shade of +- `color($name, $shade, $alpha)` - retrieves a common named color and optionally produce a shade of that color - `gray($scaler)` // gets a derived a gray value - `shadow($level)` // creates a box shadow @@ -171,7 +178,7 @@ Sample code that retrieves a bunch of common values: font-size: fs(md); // get the color called accent: - color: clr(accent); + color: color(accent); // get the variable for the headings font-family font-family: get(heading-font-family); @@ -181,7 +188,7 @@ Sample code that retrieves a bunch of common values: &:hover { // set the color called accent but one level darker - color: clr(accent, -1); + color: color(accent, -1); } } ``` diff --git a/docs-src/data/docs.js b/docs-src/data/docs.js index 264fa3d..f2b9723 100644 --- a/docs-src/data/docs.js +++ b/docs-src/data/docs.js @@ -42,54 +42,59 @@ window.pxstyles = { "description": "The default range for color shading\n" }, { - "name": "'colors:accent'", - "value": "#0099fd", + "name": "'colors.accent'", + "value": "#018ee6", "description": "Global default primary color. Optionally include a list of three values to override shading.\n" }, { - "name": "'colors:gray'", + "name": "'colors.gray'", "value": "(mix(#a0a0a0, accent(), 95%), accent(-9), white)", "description": "Default base gray color. Optionally include a list of three values to override shading.\n" }, { - "name": "'colors:select'", + "name": "'colors.select'", "value": "accent(-4)", "description": "Default text selection color\n" }, { - "name": "'colors:page-bg'", + "name": "'colors.disabled'", + "value": "gray(2)", + "description": "Default text selection color\n" + }, + { + "name": "'colors.page-bg'", "value": "white", "description": "Default page background color\n" }, { - "name": "'colors:page-fg'", + "name": "'colors.page-fg'", "value": "gray(-7)", "description": "Default page foreground\n" }, { - "name": "'colors:contrast-light'", - "value": "clr(page-bg)", + "name": "'colors.contrast-light'", + "value": "color(page-bg)", "description": "Default light color used when computing contrast colors\n" }, { - "name": "'colors:contrast-dark'", - "value": "clr(page-fg)", + "name": "'colors.contrast-dark'", + "value": "color(page-fg)", "description": "Default light color used when computing contrast colors\n" }, { - "name": "'colors:selection-bg'", - "value": "clr(select)", + "name": "'colors.selection-bg'", + "value": "color(select)", "description": "Default background color for selected text\n" }, { - "name": "'colors:selection-fg'", - "value": "contrast-color(clr(select))", + "name": "'colors.selection-fg'", + "value": "contrast-color(color(select))", "description": "Default foreground color for selected text\n" }, { "name": "'fonts'", "value": "()", - "description": "_boilerplate_ A list of font faces that should be loaded by the `basics` mixin. Example of the\nsyntax for this map:\n```\n@include config('fonts', (\n\n // google font\n Inter: (googleFont: true, weight: 500, style: normal),\n\n // local font\n circular:\n (\n (src: '../assets/fonts/circular', weight: 500, style: normal),\n (src: '../assets/fonts/circular', weight: 500, style: normal)\n )\n));\n```\n" + "description": "_boilerplate_ A list of font faces that should be loaded by the `basics` mixin. Example of the\nsyntax for this map:\n```\n@include config('fonts', (\n\n // google font\n Inter: (googleFont: true, weight: 500, style: normal),\n\n // local font\n circular:\n (\n (src: '../assets/fonts/circular', weight: 400, style: normal, exts: woff2 woff ttf),\n (src: '../assets/fonts/circular-bold', weight: 700, style: normal, exts: woff2 woff ttf)\n )\n));\n```\n" }, { "name": "'font-family'", @@ -162,22 +167,22 @@ window.pxstyles = { "description": "Collection of named transitions. The keys in this map can be used as the second argument in\nthe `transition` mixin to help create consistent css transitions. Note: individual settings\ncan be configured using flat map syntax.\n" }, { - "name": "'shadows:levels'", + "name": "'shadows.levels'", "value": "20", "description": "_shadows_ Number of distinct levels for depth shadows.\n" }, { - "name": "'shadows:color'", + "name": "'shadows.color'", "value": "black", "description": "_shadows_ Color or range used for default shadows.\n" }, { - "name": "'shadows:ratio'", + "name": "'shadows.ratio'", "value": "0.4", "description": "_shadows_ A ratio between the blur and y offset for a default shadow (e.g. y: 2px / blur: 5px = 0.4)\n" }, { - "name": "'shadows:growth'", + "name": "'shadows.growth'", "value": "1.25", "description": "_shadows_ A growth factor applied to the blur of shadows as they get larger (offset to grow faster than blur so things appear to be further off the page)\n" }, @@ -193,7 +198,7 @@ window.pxstyles = { }, { "name": "'links'", - "value": "(\n color: adjust-color(accent(), $saturation: 40%),\n text-decoration: none,\n text-decoration-color: null,\n hover: (\n color: null,\n background-color: rgba(accent(), 0.1),\n text-decoration: underline,\n text-decoration-color: null,\n ),\n -selector: '.link',\n)", + "value": "(\n color: adjust-color(accent(), $saturation: 40%),\n text-decoration: none,\n text-decoration-color: null,\n hover: (\n color: null,\n text-decoration: underline,\n text-decoration-color: null,\n ),\n -selector: '.link',\n)", "description": "_boilerplate_ Setings related to the default rendering of hyperlinks.\n" } ] @@ -300,122 +305,15 @@ window.pxstyles = { { "namespace": "modules", "group": "modules.controls", - "name": "control-focus-style", - "docName": "control-focus-style()", + "name": "button", + "docName": "button()", "type": "function", - "description": "Generates one of a number of \"canned\" / common focus styles as a css map (which can be combined\nwith the css-map function to generate the correct focus visual css)\n\n\n", + "description": "Generates a button style based on the site's button settings. The default button is pretty\nopinionated. All sizing is in ems (so setting the font size will scale the button). See the\nsource for more details.\n\nDefaults can be configured with the key 'controls.button'.\n\n", "example": [ { "type": "scss", - "code": "control-focus-style('outline', red) // => (outline-offset: 0px, outline: 1px dashed red)" - } - ], - "parameter": [ - { - "type": "shadow | outline", - "name": "style", - "description": "A named style." - }, - { - "type": "color", - "name": "color", - "default": "null" - } - ], - "access": "public", - "path": "modules/controls.scss" - }, - { - "namespace": "modules", - "group": "modules.controls", - "name": "get-control-accent", - "docName": "get-control-accent()", - "type": "function", - "description": "Extract an accent color from any of the properties in $accent-props, with a fallback value of\n'controls:accent' (note: last property in list wins)\n", - "example": [ - { - "type": "get", - "code": "", - "description": "control-accent()" - } - ], - "parameter": [ - { - "type": "*", - "name": "overrides" - }, - { - "type": "*", - "name": "accent-props..." + "code": "$button: button((background-color: green))" }, - { - "type": "*", - "name": "{$accent", - "default": "get('controls:accent'" - } - ], - "access": "public", - "path": "modules/controls.scss" - }, - { - "namespace": "modules", - "group": "modules.controls", - "name": "toggle-helper", - "docName": "toggle-helper()", - "type": "mixin", - "description": "Mixin to help create toggle components (checkbox, radiobutton, toggle, togglebutton, etc.) using\nthe common input+label structure. The basic idea behind this pattern is to use an and a\n