From dbb699d57cc0bfa2c7c5f626e307b9a713a481de Mon Sep 17 00:00:00 2001 From: Simon Lecoq <22963968+lowlighter@users.noreply.github.com> Date: Sun, 2 Jun 2024 03:23:32 +0200 Subject: [PATCH] feat: add new utility classes --- styles/@utilities/classes.html | 173 +++++++++++++ styles/@utilities/colors.html | 69 +++++- styles/@utilities/flashes.html | 32 ++- styles/@utilities/mod.css | 431 +++++++++++++++++++++++++++++++-- styles/@utilities/mod.html | 13 +- 5 files changed, 675 insertions(+), 43 deletions(-) create mode 100644 styles/@utilities/classes.html diff --git a/styles/@utilities/classes.html b/styles/@utilities/classes.html new file mode 100644 index 0000000..542b8f1 --- /dev/null +++ b/styles/@utilities/classes.html @@ -0,0 +1,173 @@ +
+

+ Classes +

+

+ While matcha.css is mostly intended to be used along with semantic styling, it still provides a subset of utility classes for added convenience. +

+
+

+ matcha.css does not aim to become a fully-fledged CSS framework. +

+

+ Consider using (or switching to) a utility-first CSS framework if you find the provided utility classes lacking or too limited. +

+
+ +
diff --git a/styles/@utilities/colors.html b/styles/@utilities/colors.html index 22f8473..903cd8a 100644 --- a/styles/@utilities/colors.html +++ b/styles/@utilities/colors.html @@ -1,19 +1,66 @@

- Colors + Colors, border colors and backgrounds

- Use one of the following class to alter the element's color. + Use one of the following classes to alter the element's color, border-color and background-color.

\ No newline at end of file diff --git a/styles/@utilities/flashes.html b/styles/@utilities/flashes.html index 691bcb4..7716354 100644 --- a/styles/@utilities/flashes.html +++ b/styles/@utilities/flashes.html @@ -3,18 +3,44 @@

Flashs

- Use .flash class to style elements as a flash blocks. - It can be combined with any color class. + Flash blocks can be used to draw attention. + They can be combined with any color class.

-
+ +
+
Default
+
Default foreground
Muted
+
Muted foreground
Accent
+
Accent foreground
Active
+
Active foreground
Variant
+
Variant foreground
Success
+
Success foreground
Attention
+
Attention foreground
Severe
+
Severe foreground
Danger
+
Danger foreground
+
+ diff --git a/styles/@utilities/mod.css b/styles/@utilities/mod.css index bb43430..a8631ea 100644 --- a/styles/@utilities/mod.css +++ b/styles/@utilities/mod.css @@ -1,5 +1,12 @@ +/* Flash */ +.flash { + padding: 1rem; + border: 1px solid transparent; + margin: 1rem 0; +} + /* Colors */ -.default { +.default, .flash { color: var(--default); } @@ -35,56 +42,428 @@ color: var(--danger); } -/* Utilities */ -.hidden { - display: none; +/* Backgrounds */ +.bg-default, .flash.default { + background-color: var(--bg-default); } -/* Flash */ -.flash { - padding: 1rem; - border: 1px solid var(--default); +.bg-muted, .flash.muted { + background-color: var(--bg-muted); +} + +.bg-accent, .flash.accent { + background-color: var(--bg-accent); +} + +.bg-active, .flash.active { + background-color: var(--bg-active); +} + +.bg-variant, .flash.variant { + background-color: var(--bg-variant); +} + +.bg-success, .flash.success { + background-color: var(--bg-success); +} + +.bg-attention, .flash.attention { + background-color: var(--bg-attention); +} + +.bg-severe, .flash.severe { + background-color: var(--bg-severe); +} + +.bg-danger, .flash.danger { + background-color: var(--bg-danger); +} + +/* Foregrounds */ +.fg-muted, .fg-accent, .fg-active, .fg-variant, .fg-success, .fg-attention, .fg-severe, .fg-danger { + color: var(--light); +} + +.fg-default { + background-color: var(--default); + color: var(--contrast); +} + +.fg-muted { + background-color: var(--muted); +} + +.fg-accent { + background-color: var(--accent); +} + +.fg-active { + background-color: var(--active); +} + +.fg-variant { + background-color: var(--variant); +} + +.fg-success { + background-color: var(--success); +} + +.fg-attention { + background-color: var(--attention); +} + +.fg-severe { + background-color: var(--severe); +} + +.fg-danger { + background-color: var(--danger); +} + +/* Borders */ +.rounded, .flash { border-radius: var(--bd-radius); - margin: 1rem 0; - color: var(--default); } -.flash.muted { +.bd-default, .bd-muted, .bd-accent, .bd-active, .bd-variant, .bd-success, .bd-attention, .bd-severe, .bd-danger { + border: 1px solid var(--default); +} + +.bd-default, .flash.default { + border-color: var(--default); +} + +.bd-muted, .flash.muted { border-color: var(--muted); - background-color: var(--bg-muted); } -.flash.accent { +.bd-accent, .flash.accent { border-color: var(--accent); - background-color: var(--bg-accent); } -.flash.active { +.bd-active, .flash.active { border-color: var(--active); - background-color: var(--bg-active); } -.flash.variant { +.bd-variant, .flash.variant { border-color: var(--variant); - background-color: var(--bg-variant); } -.flash.success { +.bd-success, .flash.success { border-color: var(--success); - background-color: var(--bg-success); } -.flash.attention { +.bd-attention, .flash.attention { border-color: var(--attention); - background-color: var(--bg-attention); } -.flash.severe { +.bd-severe, .flash.severe { border-color: var(--severe); - background-color: var(--bg-severe); } -.flash.danger { +.bd-danger, .flash.danger { border-color: var(--danger); - background-color: var(--bg-danger); +} + +/* Text style */ +.bold { + font-weight: bold; +} + +.semibold { + font-weight: 600; +} + +.italic { + font-style: italic; +} + +.underline { + text-decoration: underline; +} + +.strikethrough { + text-decoration: line-through; +} + +.uppercase { + text-transform: uppercase; +} + +.lowercase { + text-transform: lowercase; +} + +.capitalize { + text-transform: capitalize; +} + +.centered { + text-align: center; +} + +.justified { + text-align: justify; +} + +.monospace { + font-family: var(--mono); +} + +/* Font size */ +.smaller { + font-size: .85rem +} + +.small { + font-size: .875rem; +} + +.normal { + font-size: 1rem; +} + +.large { + font-size: 1.25rem; +} + +.larger { + font-size: 1.5rem; +} + +/* Position */ +.relative { + position: relative; +} + +.fixed { + position: fixed; +} + +.absolute { + position: absolute; +} + +.sticky { + position: sticky; +} + +/* Display */ +.hidden { + display: none; +} + +.inline { + display: inline; +} + +.block { + display: block; +} + +.block.inline { + display: inline-block +} + +.flex { + display: flex; +} + +.flex.inline { + display: inline-flex; +} + +.contents { + display: contents; +} + +/* Flex */ +.flex.row { + flex-direction: row; +} + +.flex.column { + flex-direction: column; +} + +.flex.row.reverse { + flex-direction: row-reverse; +} + +.flex.column.reverse { + flex-direction: column-reverse; +} + +.flex.wrap { + flex-wrap: wrap; +} + +.flex.wrap.reverse { + flex-wrap: wrap-reverse; +} + +.flex.no-wrap { + flex-wrap: nowrap; +} + + +.flex.start { + justify-content: flex-start; +} + +.flex.end { + justify-content: flex-end; +} + +.flex.center { + justify-content: center; +} + +.flex.space-between { + justify-content: space-between; +} + +.flex.space-around { + justify-content: space-around; +} + +.flex.space-evenly { + justify-content: space-evenly; +} + +.flex.stretch { + justify-content: stretch; +} + +.flex.align-start { + align-items: flex-start; +} + +.flex.align-end { + align-items: flex-end; +} + +.flex.align-center { + align-items: center; +} + +.flex.align-stretch { + align-items: stretch; +} + +.grow { + flex-grow: 1; +} + +.shrink { + flex-shrink: 1; +} + +/* Overflow */ +.overflow { + overflow: auto; +} + +.overflow-x { + overflow-x: auto; +} + +.overflow-y { + overflow-y: auto; +} + +.no-overflow { + overflow: hidden; +} + +/* Cursors */ +.pointer { + cursor: pointer; +} + +.wait { + cursor: wait; +} + +.not-allowed { + cursor: not-allowed; +} + +/* User selection */ +.no-select { + user-select: none; +} + +.select-all { + user-select: all; +} + +/* Events */ +.events { + pointer-events: auto; +} + +.no-events { + pointer-events: none; +} + +/* Sizing */ +.width { + width: 100%; +} + +.height { + height: 100%; +} + +.border-box { + box-sizing: border-box; +} + +.content-box { + box-sizing: content-box; +} + +/* Resizing */ +.resize { + resize: both; +} + +.resize-x { + resize: horizontal; +} + +.resize-y { + resize: vertical; +} + +.no-resize { + resize: none; +} + +/* SVG fill and stroke */ +svg.fill-current { + fill: currentColor; +} + +svg.no-fill { + fill: none; +} + +svg.stroke-current { + stroke: currentColor; +} + +svg.no-stroke { + stroke: none; +} + +/* Effects */ +.shadow { + box-shadow: var(--shadow); +} + +.no-shadow { + box-shadow: none; } diff --git a/styles/@utilities/mod.html b/styles/@utilities/mod.html index 2b9960f..361547f 100644 --- a/styles/@utilities/mod.html +++ b/styles/@utilities/mod.html @@ -1,9 +1,16 @@

matcha.css provides utility classes for added convenience.

-

- Utilizing utility classes entails patching your document to add classes to your elements. -

+
+

+ Utility classes requires that you patch your document to add classes which make it harder to eventually opt-out of matcha.css in the future. +

+

+ While not neccessarily a bad thing per se, it does diverge from the original intent of matcha.css which aims to be semantic-based. + Use these only if you plan to stay with matcha.css for the long run. +

+
+ \ No newline at end of file