From 64a42749d2d8275f5fc9002820a15f3ce45f7ed2 Mon Sep 17 00:00:00 2001 From: Taylor Vann Date: Mon, 9 Feb 2026 15:55:23 -0800 Subject: [PATCH 1/2] initial stylesheets --- package.json | 4 + stylesheets/button.css | 38 ++++++++ stylesheets/checkbox.css | 45 +++++++++ stylesheets/drafts/baseboard.css | 63 +++++++++++++ stylesheets/drafts/debug.css | 8 ++ stylesheets/drafts/input_colors.css | 16 ++++ stylesheets/drafts/input_numbers.css | 41 ++++++++ stylesheets/drafts/input_text.css | 38 ++++++++ stylesheets/drafts/mozilla.css | 13 +++ stylesheets/drafts/outline.css | 53 +++++++++++ stylesheets/drafts/textarea.css | 54 +++++++++++ stylesheets/drafts/webkit.css | 28 ++++++ stylesheets/mod.css | 4 + stylesheets/properties.css | 134 +++++++++++++++++++++++++++ stylesheets/radio.css | 51 ++++++++++ stylesheets/switch.css | 61 ++++++++++++ tsconfig.json | 0 17 files changed, 651 insertions(+) create mode 100644 package.json create mode 100644 stylesheets/button.css create mode 100644 stylesheets/checkbox.css create mode 100644 stylesheets/drafts/baseboard.css create mode 100644 stylesheets/drafts/debug.css create mode 100644 stylesheets/drafts/input_colors.css create mode 100644 stylesheets/drafts/input_numbers.css create mode 100644 stylesheets/drafts/input_text.css create mode 100644 stylesheets/drafts/mozilla.css create mode 100644 stylesheets/drafts/outline.css create mode 100644 stylesheets/drafts/textarea.css create mode 100644 stylesheets/drafts/webkit.css create mode 100644 stylesheets/mod.css create mode 100644 stylesheets/properties.css create mode 100644 stylesheets/radio.css create mode 100644 stylesheets/switch.css create mode 100644 tsconfig.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..2c03c69 --- /dev/null +++ b/package.json @@ -0,0 +1,4 @@ +{ + "name": "@herebythere/wireframe", + "type": "module" +} \ No newline at end of file diff --git a/stylesheets/button.css b/stylesheets/button.css new file mode 100644 index 0000000..c602ad9 --- /dev/null +++ b/stylesheets/button.css @@ -0,0 +1,38 @@ +:is(button, input[type=button]) { + appearance: none; + cursor: pointer; + display: inline-flex; + position: relative; + + background: var(--press_background); + border-radius: var(--press_border-radius); + border: var(--press_border); + color: var(--button_color); + font: var(--button_font); + padding-block: var(--button_padding-block); + padding-inline: var(--button_padding-inline); + transition: var(--press_transition-time); + + @media (hover: hover) { + &:hover { + background: var(--press_background_hover); + border: var(--press_border_hover); + color: var(--press_color_hover); + } + } + + &:active { + background: var(--press_background_active); + border: var(--press_border_active); + color: var(--press_color_active); + } + + &:disabled { + cursor: not-allowed; + + background: var(--press_background_disabled); + border: var(--press_border_disabled); + color: var(--press_color_disabled); + opacity: var(--press_opacity_disabled); + } +} diff --git a/stylesheets/checkbox.css b/stylesheets/checkbox.css new file mode 100644 index 0000000..07da63f --- /dev/null +++ b/stylesheets/checkbox.css @@ -0,0 +1,45 @@ +:is(input[type=checkbox]) { + appearance: none; + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + + block-size: var(--checkbox_block-size); + inline-size: var(--checkbox_block-size); + font: var(--press_font); + background: var(--press_background); + color: var(--press_color); + border: var(--press_border); + border-radius: calc(0.5 * var(--press_border-radius)); + transition: all var(--transition-time); + + &::before { + content: var(--press_content_checked); + } + + &:indeterminate::before { + content: var(--press_content_indeterminate); + } + + &:checked { + color: var(--press_color_checked); + + &:hover { + color: var(--press_color_hover); + } + + &:disabled { + color: var(--press_color_disabled); + } + } + + &:disabled { + cursor: not-allowed; + + background: var(--press_background_disabled); + border: var(--press_border_disabled); + opacity: var(--press_opacity_disabled); + } +} \ No newline at end of file diff --git a/stylesheets/drafts/baseboard.css b/stylesheets/drafts/baseboard.css new file mode 100644 index 0000000..41457c3 --- /dev/null +++ b/stylesheets/drafts/baseboard.css @@ -0,0 +1,63 @@ +blockquote, +button, +dialog, +fieldset, +input, +menu, +ol, +ul { + margin: 0; + padding: 0; +} + +body, +dd, +dl, +figure, +h1, +h1, +h2, +h3, +h4, +h5, +h6, +p, +pre { + margin: 0; +} + +legend, +td, +textarea, +th, +select, +option { + padding: 0; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +iframe, +fieldset { + border: none; +} + +th, +caption { + text-align: start; +} + +ol, +ul, +menu, +dir, +summary { + list-style-type: none; +} + +body { + min-block-size: 100dvh; +} diff --git a/stylesheets/drafts/debug.css b/stylesheets/drafts/debug.css new file mode 100644 index 0000000..4d4205e --- /dev/null +++ b/stylesheets/drafts/debug.css @@ -0,0 +1,8 @@ +body { + /* background: repeating-linear-gradient( + transparent, + transparent calc(var(--line-height) - 1px), + var(--baseline-grid-color) calc(var(--line-height) - 1px), + var(--baseline-grid-color) var(--line-height) + ); */ +} diff --git a/stylesheets/drafts/input_colors.css b/stylesheets/drafts/input_colors.css new file mode 100644 index 0000000..8173178 --- /dev/null +++ b/stylesheets/drafts/input_colors.css @@ -0,0 +1,16 @@ +/* places for fonts and line heights */ +input[type=color] { + appearance: none; + border: var(--press_border); + border-radius: var(--press_border-radius); + padding: none; + + cursor: pointer; + + &:hover {} + &:focus {} + &:active {} + &:disabled { + cursor: not-allowed; + } +} diff --git a/stylesheets/drafts/input_numbers.css b/stylesheets/drafts/input_numbers.css new file mode 100644 index 0000000..5d09067 --- /dev/null +++ b/stylesheets/drafts/input_numbers.css @@ -0,0 +1,41 @@ +:is(input[type=time], input[type=date], input[type=datetime-local], input[type=number], input[type=phone]) { + appearance: none; + position: relative; + display:inline-flex; + cursor: initial; + + font: var(--number-input_font); + background: var(--number-input_background); + border: var(--number-input_border); + border-radius: var(--number-input_border-radius); + border-end-start-radius: var(--number-input_border-radius-bottom); + border-end-end-radius: var(--number-input_border-radius-bottom); + border-inline-start: var(--number-input_border); + border-block-end: var(--number-input_border); + padding-inline: var(--number-input_padding-inline); + padding-block: var(--number-input_padding-block); + color: var(--color); + transition: all var(--transition-time); + + &:hover { + border: var(--number-input_border_hover, var(--number-input_border)); + border-block-end: var(--number-input_border_hover, var(--number-input_border)); + box-shadow: var(--number-input_box-shadow_hover, var(--number-input_box-shadow)); + } + + &:focus {} + + &:active { + border: var(--number-input_border_active, var(--number-input_border)); + box-shadow: var(--number-input_box-shadow_active, var(--number-input_box-shadow)); + } + + &:disabled { + cursor: not-allowed; + + background: var(--number-input_background_disabled, var(--number-input_background)); + border: var(--number-input_border_disabled, var(--number-input_border)); + box-shadow: var(--number-input_box-shadow_disabled, var(--number-input_box-shadow)); + opacity: var(--number-input_opacity_disabled, var(--number-input_opacity)); + } +} \ No newline at end of file diff --git a/stylesheets/drafts/input_text.css b/stylesheets/drafts/input_text.css new file mode 100644 index 0000000..5789f62 --- /dev/null +++ b/stylesheets/drafts/input_text.css @@ -0,0 +1,38 @@ +/* places for fonts and line heights */ +:is(input[type=text], input[type=password], input[type=email], input[type=url]) { + appearance: none; + position: relative; + display:inline-flex; + cursor: initial; + + transition: all var(--transition-time); + + font: var(--text-input_font); + color: var(--color); + background: var(--text-input_background); + border: var(--text-input_border); + border-radius: var(--text-input_border-radius); + border-end-start-radius: var(--text-input_border-radius-bottom); + border-end-end-radius: var(--text-input_border-radius-bottom); + border-inline-start: var(--text-input_border); + border-block-end: var(--text-input_border); + padding-inline: var(--text-input_padding-inline); + padding-block: var(--text-input_padding-block); + + &:hover { + /* border: var(--text-input_border_hover); */ + /* border-block-end: var(--text-input_border_hover); */ + } + + &:active { + /* border: var(--text-input_border_active); */ + } + + &:disabled { + cursor: not-allowed; + + background: var(--text-input_background_disabled); + border: var(--text-input_border_disabled); + opacity: var(--text-input_opacity_disabled); + } +} \ No newline at end of file diff --git a/stylesheets/drafts/mozilla.css b/stylesheets/drafts/mozilla.css new file mode 100644 index 0000000..969cb91 --- /dev/null +++ b/stylesheets/drafts/mozilla.css @@ -0,0 +1,13 @@ +/* color */ +::-moz-color-swatch { + border: none; +} + + +/* meter */ +::-moz-meter-bar {} + +/* range */ +::-moz-range-progress {} +::-moz-range-thumb {} +::-moz-range-track {} diff --git a/stylesheets/drafts/outline.css b/stylesheets/drafts/outline.css new file mode 100644 index 0000000..835770b --- /dev/null +++ b/stylesheets/drafts/outline.css @@ -0,0 +1,53 @@ +.outline { + outline: var(--outline); + outline-offset: var(--outline-offset); + + @media (hover: hover) { + &:hover { + outline: var(--outline_hover); + outline-offset: var(--outline-offset_hover); + } + + &:active { + outline: var(--outline_active); + outline-offset: var(--outline-offset_active); + } + } + + &:focus { + outline: var(--outline_focus); + outline-offset: var(--outline-offset_focus); + } + + &:disabled { + outline: var(--outline); + outline-offset: var(--outline-offset); + } +} + +.text-outline { + outline: var(--outline); + outline-offset: var(--outline-offset); + + @media (hover: hover) { + &:hover { + outline: var(--outline_hover); + outline-offset: var(--outline-offset_hover); + } + } + + &:focus { + outline: var(--outline_focus); + outline-offset: var(--outline-offset_focus); + } + + /* &:active { + outline: var(--outline_active, var(--outline_focus)); + outline-offset: var(--outline-offset_active, var(--outline-offset_focus)); + } */ + + &:disabled { + outline: var(--outline); + outline-offset: var(--outline-offset); + } +} diff --git a/stylesheets/drafts/textarea.css b/stylesheets/drafts/textarea.css new file mode 100644 index 0000000..bd86b10 --- /dev/null +++ b/stylesheets/drafts/textarea.css @@ -0,0 +1,54 @@ +/* places for fonts and line heights */ +textarea { + appearance: none; + background: var(--text-input_background); + font: var(--text-input_font); + cursor: initial; + min-inline-size: 225px; + min-block-size: calc(var(--line-height) * 2); + + border: var(--text-input_border); + border-inline-start: var(--text-input_border-bottom, var(--text-input_border)); + border-block-end: var(--text-input_border-bottom, var(--text-input_border)); + + field-sizing: content; + + transition: all var(--transition-time); + + &:hover { + border: var(--text-input_border_hover, var(--text-input_border)); + + border-block-end: var(--text-input_border-bottom, var(--text-input_border)); + border-inline-start: var(--text-input_border-bottom, var(--text-input_border)); + + box-shadow: var(--text-input_box-shadow_hover, var(--text-input_box-shadow)); + + outline: var(--outline_hover, var(--outline)); + outline-offset: var(--outline-offset_hover, var(--outline-offset)); + } + + &:focus { + outline: var(--outline_focus); + outline-offset: var(--outline-offset_focus); + } + + &:active { + border: var(--text-input_border_active, var(--text-input_border)); + box-shadow: var(--text-input_box-shadow_active, var(--text-input_box-shadow)); + + outline: var(--outline_active, var(--outline_focus)); + outline-offset: var(--outline-offset_active, var(--outline-offset_focus)); + } + + &:disabled { + cursor: not-allowed; + + background: var(--text-input_background_disabled, var(--text-input_background)); + border: var(--text-input_border_disabled, var(--text-input_border)); + box-shadow: var(--text-input_box-shadow_disabled, var(--text-input_box-shadow)); + opacity: var(--text-input_opacity_disabled, var(--text-input_opacity)); + + outline: var(--outline); + outline-offset: var(--outline-offset); + } +} diff --git a/stylesheets/drafts/webkit.css b/stylesheets/drafts/webkit.css new file mode 100644 index 0000000..103c62d --- /dev/null +++ b/stylesheets/drafts/webkit.css @@ -0,0 +1,28 @@ +::-webkit-calendar-picker-indicator { + /* background-color: white; */ + border-radius: 4px; +} + +/* slider */ +::-webkit-slider-thumb {} +::-webkit-slider-runnable-track {} + +/* progress bar */ +::-webkit-progress-bar {} +::-webkit-progress-inner-element {} +::-webkit-progress-value {} + +/* meter */ +::-webkit-meter-bar {} +::-webkit-meter-inner-element{} + +::-webkit-color-swatch-wrapper{ + padding: 0; +} + +::-webkit-color-swatch { + border-radius: var(--press_border-radius); +} +::-webkit-datetime-edit { + color: var(--color); +} diff --git a/stylesheets/mod.css b/stylesheets/mod.css new file mode 100644 index 0000000..3b82326 --- /dev/null +++ b/stylesheets/mod.css @@ -0,0 +1,4 @@ +@import "./button.css"; +@import "./checkbox.css"; +@import "./radio.css"; +@import "./switch.css"; diff --git a/stylesheets/properties.css b/stylesheets/properties.css new file mode 100644 index 0000000..ca940a0 --- /dev/null +++ b/stylesheets/properties.css @@ -0,0 +1,134 @@ +:root { + color-scheme: light dark; + + /* debug */ + --baseline-grid-color: light-dark(#cfcfcf, #787878); + + /* Root */ + --background: light-dark(#f9f9f9, #17181A); + --background_inverted: light-dark(#17181A, #efefef); + + /* animation tempo */ + --transition-time: 250ms; + + /* Typography */ + --line-height: 2rem; + --font-family: "SF Pro", "San Francisco", "Roboto Flex", "Segoe UI Variable", Helvetica, sans-serif; + --color: light-dark(#3e3e3e, #f9f9f9); + --color_inverted: light-dark(#f9f9f9, #3e3e3e); + --font: 400 1rem/var(--line-height) var(--font-family); + --h1_font: 700 8rem/8rem var(--font-family); + --h1_color: var(--color); + --h2_font: 700 6rem/6rem var(--font-family); + --h2_color: var(--color); + --h3_font: 700 4rem/4rem var(--font-family); + --h3_color: var(--color); + --h4_font: 700 3rem/3rem var(--font-family); + --h4_color: var(--color); + --h5_font: 700 2rem/2rem var(--font-family); + --h5_color: var(--color); + --h6_font: 700 1.5rem/2rem var(--font-family); + --h6_color: var(--color); + + /* Focus & Selection */ + --selection_background-color: light-dark(cornflowerblue, cornflowerblue); + --selection_color: light-dark(white, black); + + --outline: 4px solid transparent; + --outline-offset: 8px; + --outline_hover: 4px solid hsl(205, 79%, 66%); + --outline-offset_hover: 8px; + --outline_focus: 4px solid var(--selection_background-color); + --outline-offset_focus: 8px; + --outline_active: 4px solid var(--selection_background-color); + --outline-offset_active: 0px; + + /* Press actions */ + --press_background: var(--background); + --press_color: transparent; + --press_border-width: 2px; + --press_border: var(--press_border-width) solid light-dark(black, white); + --press_border-radius: 0.5lh; + + --press_font: 400 0.9rem/1rem var(--font-family); + --press_box-shadow: none; + + --press_content_checked: '\2714'; + --press_content_indeterminate: '\2014'; + + + --press_background_hover: var(--background); + --press_color_hover: var(--color); + --press_border_hover: var(--press_border); + --press_box-shadow_hover: none; + + --press_background_active: var(--background); + --press_color_active: var(--color); + --press_border_active: var(--press_border-width) solid light-dark(black, white); + --press_box-shadow_active: none; + + --press_background_checked: light-dark(black, white); + --press_color_checked: var(--color); + --press_border_checked: var(--press_border-width) solid light-dark(black, white); + --press_box-shadow_checked: none; + + --press_background_diabled: light-dark(black, white); + --press_color_disabled: var(--color); + --press_border_disabled: var(--press_border-width) solid light-dark(black, white); + --press_box-shadow_disabled: none; + + /* submit button */ + + /* Checkbox */ + --checkbox_block-size: 1.25rem; + --checkbox_color: transparent; + + /* Radio */ + --radio-island_block-size: 1rem; + --radio-island_background: black; + --radio-island_color: white; + --radio-island_content: ''; + --radio-island_border: var(--press_border); + --radio-island_box-shadow: var(var(--press_box-shadow)); + + /* -webkit-text-stroke */ + /* text-shadow */ + + + /* Buttons */ + --button_font: 700 0.9rem/0.9rem var(--font-family); + --button_color: var(--color); + --button_background: transparent; + --button_padding-block: 0.75rem; + + --button_bg_checked: light-dark(black, white); + --button_color_checked: light-dark(white, black); + /* --button_border-radius: calc(var(--button_padding-block) * 2 + var(--line-height)); */ + + --button_padding-inline: 1rem; + + /* Text inputs */ + --text-input_font: 400 1rem/var(--line-height) var(--font-family) + --text-input_background: light-dark(white, black); + --text-input_border: 2px solid light-dark(black, white); + + --text-input_border-bottom: 2px solid light-dark(black, white); + --text-input_padding-inline: 0.5rem; + --text-input_padding-block: 0.25rem; + --text-input_border-radius: 1px; + --text-input_border-radius-bottom: 1px; + + + /* Number inputs */ + --number-input_font: 400 1rem/var(--line-height) var(--font-family) + --number-input_background: light-dark(white, black); + --number-input_border: 2px solid light-dark(black, white); + --number-input_border-bottom: 2px solid light-dark(black, white); + --number-input_padding-inline: 0.5rem; + --number-input_padding-block: 0.25rem; + --number-input_border-radius: 1px; + --number-input_border-radius-bottom: 1px; + + /* Select */ + +} \ No newline at end of file diff --git a/stylesheets/radio.css b/stylesheets/radio.css new file mode 100644 index 0000000..da80793 --- /dev/null +++ b/stylesheets/radio.css @@ -0,0 +1,51 @@ +:is(input[type=radio]) { + appearance: none; + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; + border-radius: 50%; + box-sizing: content-box; + cursor: pointer; + + transition: all var(--transition-time); + + color: var(--press_color); + border: var(--press_border); + opacity: var(--press_opacity); + + block-size: var(--checkbox_block-size); + inline-size: var(--checkbox_block-size); + + /* radio island */ + &::before { + content: ''; + /* --radio-island-size */ + display: block; + inline-size: 0.6rem; + block-size: 0.6rem; + border-radius: 0.3rem; + /* radio island background */ + background: none; + + transition: all var(--transition-time); + } + + &:checked { + &::before { + background: var(--press_color_checked); + } + + &:disabled::before { + background: var(--press_color_disabled); + } + } + + &:disabled { + cursor: not-allowed; + + background: var(--press_background_disabled); + border: var(--press_border_disabled); + opacity: var(--press_opacity_disabled); + } +} \ No newline at end of file diff --git a/stylesheets/switch.css b/stylesheets/switch.css new file mode 100644 index 0000000..53bd69f --- /dev/null +++ b/stylesheets/switch.css @@ -0,0 +1,61 @@ +input[type=checkbox][role=switch] { + appearance: none; + position: relative; + display: inline-flex; + justify-content: start; + inline-size: 3rem; + block-size: 1.75rem; + font-size: 0.5em; + cursor: pointer; + border-radius: 1.75rem; + + border: var(--press_border); + transition: all var(--transition-time); + + &::before { + position: relative; + content: ''; + transition: all var(--transition-time); + } + + /* switch island */ + &::after { + position: relative; + content: ''; + display: flex; + justify-content: center; + align-items: center; + inline-size: 0.5rem; + block-size: 0.5rem; + border-radius: 0.5rem; + margin-inline: calc((1.5rem - 0.5rem) * 0.5 - 2px); + border: var(--press_border); + transition: all var(--transition-time); + } + + &:checked { + background: var(--background); + + &::before { + flex-grow: 1; + } + + &::after { + content: '\002714'; + inline-size: 0.95rem; + block-size: 0.95rem; + border-radius: 0.95rem; + margin-inline: calc((1.5rem - 0.95rem) * 0.5 - 2px); + background: var(--background_inverted); + color: var(--press_background); + } + } + + &:disabled { + cursor: not-allowed; + + background: var(--press_background_disabled); + border: var(--press_border_disabled); + opacity: var(--press_opacity_disabled); + } +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..e69de29 From 818ec6b83841183e65f0c0d59d408e3ce1615027 Mon Sep 17 00:00:00 2001 From: Taylor Vann Date: Mon, 9 Feb 2026 16:04:17 -0800 Subject: [PATCH 2/2] stylesheets --- README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..8625503 --- /dev/null +++ b/README.md @@ -0,0 +1,12 @@ +# Wireframe + +A UI component set for the web + +## CSS only components + +The following components are included in a single css file: +- button +- checkbox +- radio +- switch +