diff --git a/dist/winter.css b/dist/winter.css index b6fc8d9..4b6eebd 100644 --- a/dist/winter.css +++ b/dist/winter.css @@ -417,27 +417,27 @@ h6 { --winter-button-danger-disabled-bg: var(--color-red-500); --winter-input-fg: var(--winter-not-quite-black); --winter-input-bg: var(--color-purple-50); - --winter-input-border: 2px solid var(--winter-purple-3); + --winter-input-accent: var(--winter-purple-3); --winter-input-border-radius: var(--winter-border-radius-s); - --winter-input-block-spacing: var(--winter-spacing-xs); + --winter-input-block-spacing: var(--winter-spacing-s); --winter-input-font-weight: var(--winter-font-weight-m); --winter-input-font-size: var(--winter-font-size-m); --winter-input-padding: 0.12em 0.5em; --winter-input-disabled-fg: var(--color-gray-600); --winter-input-disabled-bg: var(--color-gray-50); - --winter-input-disabled-border: 2px solid var(--color-gray-200); + --winter-input-disabled-accent: var(--color-gray-200); --winter-input-readonly-fg: var(--color-gray-800); --winter-input-readonly-bg: var(--color-gray-50); - --winter-input-readonly-border: 2px solid var(--color-gray-500); + --winter-input-readonly-accent: var(--color-gray-500); --winter-input-active-fg: var(--color-blue-800); --winter-input-active-bg: var(--color-blue-50); - --winter-input-active-border: 2px solid var(--color-blue-500); + --winter-input-active-accent: var(--color-blue-500); --winter-input-valid-fg: var(--color-green-800); --winter-input-valid-bg: var(--color-green-50); - --winter-input-valid-border: 2px solid var(--color-green-500); + --winter-input-valid-accent: var(--color-green-500); --winter-input-invalid-fg: var(--color-red-800); --winter-input-invalid-bg: var(--color-red-50); - --winter-input-invalid-border: 2px solid var(--color-red-500); + --winter-input-invalid-accent: var(--color-red-500); --winter-checkbox-size: 1.75rem; --winter-checkbox-fg: var(--winter-purple-2); --winter-checkbox-active-fg: var(--color-blue-500); @@ -1221,7 +1221,10 @@ select, textarea { appearance: none; } -label:has(+ input) { +main form { + margin-block: var(--winter-block-spacing); +} +label:has(+ input, + select, + textarea) { display: block; } input:not([type=checkbox], [type=radio]), @@ -1236,47 +1239,51 @@ label:has(input) { input:not([type=range], [type=checkbox], [type=radio], [type=range], [type=submit], [type=button]), select, textarea { + --fg: var(--winter-input-fg); + --bg: var(--winter-input-bg); + --accent: var(--winter-input-accent); + --border: 1px solid var(--accent); outline: none; - border: var(--winter-input-border); + border: var(--border); border-radius: var(--winter-input-border-radius); - color: var(--winter-input-fg); - background: var(--winter-input-bg); + color: var(--fg); + background: var(--bg); font-size: var(--winter-input-font-size); font-weight: var(--winter-input-font-weight); box-shadow: var(--winter-input-shadow); padding: var(--winter-input-padding); } :is(input:not([type=range], [type=checkbox], [type=radio], [type=range], [type=submit], [type=button]), select, textarea):is(:active, :hover, :focus) { - color: var(--winter-input-active-fg); - background: var(--winter-input-active-bg); - border: var(--winter-input-active-border); + --fg: var(--winter-input-active-fg); + --bg: var(--winter-input-active-bg); + --accent: var(--winter-input-active-accent); } :is(input:not([type=range], [type=checkbox], [type=radio], [type=range], [type=submit], [type=button]), select, textarea):focus { outline: var(--winter-focus-outline); outline-offset: var(--winter-focus-outline-offset); } :is(input:not([type=range], [type=checkbox], [type=radio], [type=range], [type=submit], [type=button]), select, textarea):disabled { - color: var(--winter-input-disabled-fg); - background: var(--winter-input-disabled-bg); - border: var(--winter-input-disabled-border); + --fg: var(--winter-input-disabled-fg); + --bg: var(--winter-input-disabled-bg); + --accent: var(--winter-input-disabled-accent); } :is(input:not([type=range], [type=checkbox], [type=radio], [type=range], [type=submit], [type=button]), select, textarea):disabled:hover { cursor: not-allowed; } :is(input:not([type=range], [type=checkbox], [type=radio], [type=range], [type=submit], [type=button]), select, textarea)[readonly] { - color: var(--winter-input-readonly-fg); - background: var(--winter-input-readonly-bg); - border: var(--winter-input-readonly-border); + --fg: var(--winter-input-readonly-fg); + --bg: var(--winter-input-readonly-bg); + --accent: var(--winter-input-readonly-accent); } :is(input:not([type=range], [type=checkbox], [type=radio], [type=range], [type=submit], [type=button]), select, textarea):is(:user-invalid, [aria-invalid=true]) { - color: var(--winter-input-invalid-fg); - background: var(--winter-input-invalid-bg); - border: var(--winter-input-invalid-border); + --fg: var(--winter-input-invalid-fg); + --bg: var(--winter-input-invalid-bg); + --accent: var(--winter-input-invalid-accent); } :is(input:not([type=range], [type=checkbox], [type=radio], [type=range], [type=submit], [type=button]), select, textarea):is(:user-valid, [aria-invalid=false]) { - color: var(--winter-input-valid-fg); - background: var(--winter-input-valid-bg); - border: var(--winter-input-valid-border); + --fg: var(--winter-input-valid-fg); + --bg: var(--winter-input-valid-bg); + --accent: var(--winter-input-valid-accent); } label:has([type=checkbox], [type=radio]) { cursor: pointer; @@ -1333,6 +1340,12 @@ input[type=radio] { --checked-char: "\e837"; --unchecked-char: "\e836"; } +label:has(input[type=checkbox]):has(+ label > input[type=checkbox]) { + margin-block-end: 0; +} +label:has(input[type=radio]):has(+ label > input[type=radio]) { + margin-block-end: 0; +} input[type=range] { -webkit-appearance: none; -moz-appearance: none; @@ -1400,6 +1413,21 @@ input[type=range]:is(:hover, :active, :focus) { --fg: var(--winter-range-active-fg); --bg: var(--winter-range-active-bg); } +:is(input:not([type=checkbox], [type=radio]), select, textarea):has(+ small) { + margin-block-end: 0; +} +:is(input:not([type=checkbox], [type=radio]), select, textarea) + small { + display: block; + width: 100%; + margin-block-end: var(--winter-input-block-spacing); + color: var(--winter-input-accent); +} +:is(input:not([type=checkbox], [type=radio]), select, textarea):is(:user-invalid, [aria-invalid=true]) + small { + color: var(--winter-input-invalid-accent); +} +:is(input:not([type=checkbox], [type=radio]), select, textarea):is(:user-valid, [aria-invalid=false]) + small { + color: var(--winter-input-valid-accent); +} form [role=group] { display: flex; width: 100%; diff --git a/dist/winter.css.map b/dist/winter.css.map index 9640901..708eb0a 100644 --- a/dist/winter.css.map +++ b/dist/winter.css.map @@ -1,7 +1,7 @@ { "version": 3, "sources": ["../src/styles/reset.css", "../src/styles/colors.css", "../src/styles/tokens.css", "../src/styles/globals.css", "../src/styles/layout.css", "../src/styles/nav.css", "../src/styles/footer.css", "../src/styles/content.css", "../src/styles/buttons.css", "../src/styles/forms.css", "../src/styles/group.css", "../src/styles/admonitions.css", "../src/styles/footnotes.css", "../src/styles/keys.css", "../src/styles/components.css", "../src/styles/responsive.css"], - "sourcesContent": ["/*\n Copyright (c) 2024 Winterbloom LLC, Alethea Katherine Flowers\n Published under the standard MIT License.\n Full text available at: https://opensource.org/licenses/MIT\n*/\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n* {\n margin: 0;\n}\n\nbody {\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: 100%;\n -moz-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n text-size-adjust: 100%;\n}\n\nimg,\npicture,\nvideo,\ncanvas,\nsvg {\n display: block;\n max-width: 100%;\n}\n\ninput,\nbutton,\ntextarea,\nselect {\n font: inherit;\n}\n\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n overflow-wrap: break-word;\n}\n\n#root,\n#__next {\n isolation: isolate;\n}\n", "/*\n Copyright (c) 2024 Winterbloom LLC, Alethea Katherine Flowers\n Published under the standard MIT License.\n Full text available at: https://opensource.org/licenses/MIT\n*/\n\n:root {\n --winter-white: #fff;\n --winter-black: #000;\n --winter-not-quite-black: #333;\n --winter-yellow-1: rgb(184, 125, 33);\n --winter-yellow-2: rgb(219, 161, 64);\n --winter-yellow-3: rgb(250, 194, 105);\n --winter-yellow-4: rgb(255, 214, 143);\n --winter-yellow-5: rgb(255, 229, 186);\n --winter-red-1: rgb(191, 36, 54);\n --winter-red-2: rgb(217, 74, 92);\n --winter-red-3: rgb(245, 115, 128);\n --winter-red-4: rgb(250, 153, 163);\n --winter-red-5: rgb(252, 194, 201);\n --winter-teal-1: rgb(38, 120, 128);\n --winter-teal-2: rgb(64, 140, 148);\n --winter-teal-3: rgb(102, 173, 181);\n --winter-teal-4: rgb(153, 209, 214);\n --winter-teal-5: rgb(204, 237, 240);\n --winter-purple-1: rgb(94, 64, 158);\n --winter-purple-2: rgb(125, 97, 186);\n --winter-purple-3: rgb(163, 138, 214);\n --winter-purple-4: rgb(199, 184, 237);\n --winter-purple-5: rgb(235, 227, 250);\n}\n\n/*\nhttps://accessiblepalette.com/?lightness=98.2,93.95,85.1,76.5,67.65,57.8,47.6,40.4,32.4,23.55&gb(245,%20115,%20128)=1,0&f76707=0,12&f1d152=0,7&78ec90=0,0&gb(129,%20255,%20190)=0,5&gb(129,%20238,%20255)=0,0&97d2ff=0,0&ae82ff=0,0&9939b3=1,0&gb(254,%20129,%20173)=0,0&292537=0,0\n\nlet colors = [\"red\", \"orange\", \"yellow\", \"green\", \"mint\", \"cyan\", \"blue\", \"purple\", \"violet\", \"pink\", \"gray\"];\nlet shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];\nlet out = \"\";\n\ndocument.querySelectorAll(\".palette_colors\").forEach((column, n) => {\n column.querySelectorAll(\".hex\").forEach((row, i) => {\n out += `--color-${colors[n]}-${shades[i]}: ${row.innerText};\\n`;\n });\n});\n\nconsole.log(out);\n*/\n\n:root {\n --color-red-50: #fff8f8;\n --color-red-100: #ffe9e9;\n --color-red-200: #ffc7c9;\n --color-red-300: #fea5a9;\n --color-red-400: #f8818b;\n --color-red-500: #d96772;\n --color-red-600: #b0555d;\n --color-red-700: #93494f;\n --color-red-800: #753b40;\n --color-red-900: #542d2f;\n --color-orange-50: #fff9f5;\n --color-orange-100: #fdeadd;\n --color-orange-200: #facca8;\n --color-orange-300: #f6ad72;\n --color-orange-400: #f18c30;\n --color-orange-500: #de6a00;\n --color-orange-600: #b35800;\n --color-orange-700: #964b00;\n --color-orange-800: #773d00;\n --color-orange-900: #582d00;\n --color-yellow-50: #fdfaec;\n --color-yellow-100: #f9eebf;\n --color-yellow-200: #eed45a;\n --color-yellow-300: #d3bd4a;\n --color-yellow-400: #b7a540;\n --color-yellow-500: #9a8c36;\n --color-yellow-600: #7c722c;\n --color-yellow-700: #686025;\n --color-yellow-800: #534d1e;\n --color-yellow-900: #3d3916;\n --color-green-50: #f1fdf3;\n --color-green-100: #cef8d6;\n --color-green-200: #79ec91;\n --color-green-300: #6bd280;\n --color-green-400: #5db770;\n --color-green-500: #4f9b5e;\n --color-green-600: #407e4d;\n --color-green-700: #366a41;\n --color-green-800: #2b5534;\n --color-green-900: #203f26;\n --color-mint-50: #e9fff4;\n --color-mint-100: #abffd6;\n --color-mint-200: #73ebb1;\n --color-mint-300: #65d19e;\n --color-mint-400: #58b68b;\n --color-mint-500: #499a75;\n --color-mint-600: #3b7d60;\n --color-mint-700: #316a51;\n --color-mint-800: #275541;\n --color-mint-900: #1d3e30;\n --color-cyan-50: #eefdff;\n --color-cyan-100: #c2f7ff;\n --color-cyan-200: #7ce4f4;\n --color-cyan-300: #6ecad9;\n --color-cyan-400: #60b1bd;\n --color-cyan-500: #5195a0;\n --color-cyan-600: #427982;\n --color-cyan-700: #37666e;\n --color-cyan-800: #2c5258;\n --color-cyan-900: #213c41;\n --color-blue-50: #f5fbff;\n --color-blue-100: #ddf0ff;\n --color-blue-200: #abdaff;\n --color-blue-300: #8cc3ed;\n --color-blue-400: #7aaacf;\n --color-blue-500: #678fae;\n --color-blue-600: #54758e;\n --color-blue-700: #476278;\n --color-blue-800: #394f60;\n --color-blue-900: #2a3a46;\n --color-purple-50: #fbf9ff;\n --color-purple-100: #f2eaff;\n --color-purple-200: #deccff;\n --color-purple-300: #cbafff;\n --color-purple-400: #b791ff;\n --color-purple-500: #9d75e6;\n --color-purple-600: #8060bc;\n --color-purple-700: #6c519e;\n --color-purple-800: #56417f;\n --color-purple-900: #40305d;\n --color-violet-50: #fcf9fd;\n --color-violet-100: #f5eaf7;\n --color-violet-200: #e7ccec;\n --color-violet-300: #d8afe0;\n --color-violet-400: #c991d5;\n --color-violet-500: #b770c7;\n --color-violet-600: #a34cba;\n --color-violet-700: #9037a8;\n --color-violet-800: #722e85;\n --color-violet-900: #53255f;\n --color-pink-50: #fff8fb;\n --color-pink-100: #ffe8f0;\n --color-pink-200: #ffc5d9;\n --color-pink-300: #fea2c2;\n --color-pink-400: #f77ea8;\n --color-pink-500: #d16a8e;\n --color-pink-600: #aa5674;\n --color-pink-700: #8f4962;\n --color-pink-800: #733a4e;\n --color-pink-900: #552b3a;\n --color-gray-50: #fafafa;\n --color-gray-100: #eeedef;\n --color-gray-200: #d5d4d8;\n --color-gray-300: #bdbcc2;\n --color-gray-400: #a5a4ab;\n --color-gray-500: #8c8a93;\n --color-gray-600: #726f7b;\n --color-gray-700: #615e6b;\n --color-gray-800: #4e4a59;\n --color-gray-900: #3a3647;\n}\n", ":root {\n /* Border radius */\n --winter-border-radius-s: 0.1875rem;\n --winter-border-radius-m: 0.25rem;\n --winter-border-radius-l: 0.5rem;\n --winter-border-radius-xl: 1rem;\n --winter-border-radius-circle: 50%;\n --winter-border-radius-pill: 9999px;\n\n /* Elevation */\n --winter-shadow-color-hsl: 261, 32%, 28%;\n --winter-shadow-alpha-xs: 0.2;\n --winter-shadow-blur-alpha-xs: 0.05;\n --winter-shadow-alpha-s: 0.2;\n --winter-shadow-blur-alpha-s: 0.1;\n --winter-shadow-alpha-m: 0.3;\n --winter-shadow-blur-alpha-m: 0.15;\n --winter-shadow-alpha-l: 0.3;\n --winter-shadow-blur-alpha-l: 0.15;\n\n --winter-shadow-color-xs: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-alpha-xs)\n );\n --winter-shadow-blur-color-xs: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-blur-alpha-xs)\n );\n --winter-shadow-color-s: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-alpha-s)\n );\n --winter-shadow-blur-color-s: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-blur-alpha-s)\n );\n --winter-shadow-color-m: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-alpha-m)\n );\n --winter-shadow-blur-color-m: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-blur-alpha-m)\n );\n --winter-shadow-color-l: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-alpha-l)\n );\n --winter-shadow-blur-color-l: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-blur-alpha-l)\n );\n\n --winter-shadow-xs: 1px 1px 1px 0 var(--winter-shadow-color-xs),\n 0 0 10px 0 var(--winter-shadow-blur-color-xs);\n --winter-shadow-s: 3px 3px 1px 0 var(--winter-shadow-color-s),\n 0 0 10px 0 var(--winter-shadow-blur-color-s);\n --winter-shadow-m: 6px 6px 3px 0 var(--winter-shadow-color-m),\n 0 0 10px 0 var(--winter-shadow-blur-color-m);\n --winter-shadow-l: 10px 10px 3px 0 var(--winter-shadow-color-l),\n 0 0 10px 0 var(--winter-shadow-blur-color-l);\n\n /* Generic spacing */\n --winter-spacing-xxxs: 0.125rem;\n --winter-spacing-xxs: 0.25rem;\n --winter-spacing-xs: 0.5rem;\n --winter-spacing-s: 0.75rem;\n --winter-spacing-m: 1rem;\n --winter-spacing-l: 1.25rem;\n --winter-spacing-xl: 1.75rem;\n --winter-spacing-xxl: 2.25rem;\n --winter-spacing-xxxl: 3rem;\n --winter-spacing-xxxxl: 4.5rem;\n\n /* Transitons/duration */\n --winter-duration-xs: 50ms;\n --winter-duration-s: 150ms;\n --winter-duration-m: 250ms;\n --winter-duration-l: 500ms;\n --winter-duration-xl: 1000ms;\n\n /* Typography */\n --winter-font-serif: \"Nunito\", Georgia, \"Times New Roman\", serif;\n --winter-font-sans: \"Nunito Sans\", system-ui, -apple-system,\n BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell,\n \"Open Sans\", \"Helvetica Neue\", sans-serif;\n --winter-font-mono: \"IBM Plex Mono\", ui-monospace, SFMono-Regular, SF Mono,\n Menlo, Consolas, Liberation Mono, monospace;\n --winter-font-decorative: \"Space Grotesk\", system-ui;\n\n --winter-font-size-base: 20px;\n --winter-font-size-xxs: 0.625rem;\n --winter-font-size-xs: 0.75rem;\n --winter-font-size-s: 0.875rem;\n --winter-font-size-m: 1rem;\n --winter-font-size-l: 1.25rem;\n --winter-font-size-xl: 1.5rem;\n --winter-font-size-xxl: 1.75rem;\n --winter-font-size-xxxl: 2rem;\n --winter-font-size-xxxxl: 2.25rem;\n\n --winter-font-weight-light: 300;\n --winter-font-weight-normal: 400;\n --winter-font-weight-semibold: 500;\n --winter-font-weight-bold: 700;\n\n --winter-letter-spacing-xs: -0.03em;\n --winter-letter-spacing-s: -0.015em;\n --winter-letter-spacing-m: normal;\n --winter-letter-spacing-l: 0.075em;\n --winter-letter-spacing-xl: 0.15em;\n\n --winter-line-height-xs: 1;\n --winter-line-height-s: 1.25;\n --winter-line-height-m: 1.6;\n --winter-line-height-l: 1.8;\n --winter-line-height-xl: 2.2;\n\n /* Focus */\n --winter-focus-outline-color: var(--color-gray-800);\n --winter-focus-outline: 1px solid var(--winter-focus-outline-color);\n --winter-focus-outline-offset: 0px;\n\n /* Page colors */\n --winter-bg: var(--winter-white);\n --winter-fg: var(--winter-not-quite-black);\n\n /*
and