diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk index 22a7d7f..cf7ca99 100644 --- a/docs/_includes/default.njk +++ b/docs/_includes/default.njk @@ -65,7 +65,7 @@ diff --git a/docs/assets/scripts/docs.js b/docs/assets/scripts/docs.js index 43b3c81..9fb2cc3 100644 --- a/docs/assets/scripts/docs.js +++ b/docs/assets/scripts/docs.js @@ -3,11 +3,11 @@ const toast = document.querySelector('#toast'); const toggleToast = () => toast.classList.toggle('active'); const toastPositions = ['br', 'tr', 'tl', 'bl']; const positionToast = (pos) => { - toastPositions.filter(p => p !== pos).forEach(p => toast.classList.remove(p)); + toastPositions.forEach(p => toast.classList.remove(p)); toast.classList.add(pos); } const toastColors = ['neutral', 'accent', 'positive', 'negative']; const colorToast = (col) => { - toastColors.filter(c => c !== col).forEach(c => toast.classList.remove(c)); + toastColors.forEach(c => toast.classList.remove(c)); toast.classList.add(col); } diff --git a/docs/pages/components/badge.md b/docs/pages/components/badge.md index 50ba54e..4880484 100644 --- a/docs/pages/components/badge.md +++ b/docs/pages/components/badge.md @@ -9,32 +9,38 @@ Badges indicate the status of an element, the appearance of an event or counts o ### Basic text badges -Use the `.badge` class to add a small bubble indicator at the top right corner of the enclosed element. Use the `data-badge` attribute to add content to that bubble. If you want to draw even more attention to the badge, you can use the `.pulse` class in addition. +Use the `badge` class to add a small bubble indicator at the top right corner of the enclosed element. Use the `data-badge` attribute to add content to that bubble. If you want to draw even more attention to the badge, you can use the `pulse` class in addition. -
+
Inbox Inbox Inbox + CSS4 now available!
```html Inbox Inbox Inbox +CSS4 now available! ``` +> Note that the badge element itself is by design not part of the text flow to keep spacing between elements consistent. Therefore long badge contents should be avoided or only used where appropriate. + ### Button badges -This also works for button elements. +The `badge` class also works on button elements. -
+
+
```html + ``` diff --git a/docs/pages/components/breadcrumb.md b/docs/pages/components/breadcrumb.md index 2122899..d9e3aa5 100644 --- a/docs/pages/components/breadcrumb.md +++ b/docs/pages/components/breadcrumb.md @@ -11,7 +11,7 @@ a horizontal scrollbar appears. ### Basic breadcrumb path -Use the `.breadcrumb` class on an ordered list to format the contained elements. +Use the `breadcrumb` class on an ordered list to format the contained elements.
    @@ -43,7 +43,7 @@ Use the `.breadcrumb` class on an ordered list to format the contained elements. ### Change the separator symbol -Per default, breadcrumbs are separated with a `/`. +Per default, breadcrumbs are separated with a `/` Use the `--breadcrumb-symbol` custom property to change the symbol.
    diff --git a/docs/pages/components/callout.md b/docs/pages/components/callout.md index 1fe83f7..d44df83 100644 --- a/docs/pages/components/callout.md +++ b/docs/pages/components/callout.md @@ -9,7 +9,7 @@ A callout is a static message component, that is embedded and always visible wit ### Basic callout -Use the `.callout` class to create a box that emphasizes its content. +Use the `callout` class to create a box that emphasizes its content.
    @@ -28,7 +28,7 @@ Use the `.callout` class to create a box that emphasizes its content. ### Colored callout -Use the `.accent`, `.positive` or `.negative` classes to give the callout more meaning. +Use the `accent`, `positive` or `negative` classes to give the callout more meaning.
    diff --git a/docs/pages/components/separator.md b/docs/pages/components/separator.md index e10201d..3fe8dfb 100644 --- a/docs/pages/components/separator.md +++ b/docs/pages/components/separator.md @@ -9,7 +9,7 @@ Separators divide content into different parts providing visual breaks for the u ### Horizontal separators -Use the `.separator` class to add a horizontal line. Every content added to that element appears as its label, even single spaces. No content will result in a single horizontal line. +Use the `separator` class to add a horizontal line. Every content added to that element appears as its label, even single spaces. No content will result in a single horizontal line.
    @@ -31,9 +31,9 @@ Use the `.separator` class to add a horizontal line. Every content added to that ### Vertical separators -Use the `.separator` and the `.vertical` class to add a vertical line. Every content added to that element appears as its label. No content will result in a single vertical line. +Use the `separator` and the `vertical` class to add a vertical line. Every content added to that element appears as its label. No content will result in a single vertical line. -> Note that vertical separators only work in a flex container with flex direction row. If you're using utility classes, you can just give it the `.flex` class or set `display: flex;` on it. +> Note that vertical separators only work in a flex container with flex direction row. If you're using utility classes, you can just give it the `flex` class or set `display: flex;` on it.
    diff --git a/docs/pages/components/state.md b/docs/pages/components/state.md index e9bd35f..d790ca5 100644 --- a/docs/pages/components/state.md +++ b/docs/pages/components/state.md @@ -10,7 +10,7 @@ that something is missing or needs to be done first to achieve a goal. ### Empty state -Use the `.state.empty` classes for a placeholder section which awaits user input to show a result. +Use the `state empty` classes for a placeholder section which awaits user input to show a result.
    @@ -32,7 +32,7 @@ Use the `.state.empty` classes for a placeholder section which awaits user input ### Highlighted state -Use the `.state.highlighted` classes for an accentuated section e.g. which awaits a user action like a drag and drop target area. +Use the `state highlighted` classes for an accentuated section e.g. which awaits a user action like a drag and drop target area.
    diff --git a/docs/pages/components/toast.md b/docs/pages/components/toast.md index d640777..66e5558 100644 --- a/docs/pages/components/toast.md +++ b/docs/pages/components/toast.md @@ -11,7 +11,7 @@ A toast notificataion is a dynamic message component, that is only visible after ### Basic toast -Use the `.toast.callout` selector to create a toast notification. The toast element is hidden by default, use the `.active` class to show it. +Use the `toast callout` classes to create a toast notification. The toast element is hidden by default, use the `active` class to show it.

    The demo can be seen directly on this page in the bottom right corner.

    @@ -33,27 +33,27 @@ Use the `br`, `tr`, `tl` and `bl` classes to position the toast notification on

    The demo can be seen directly on this page. Use the following controls to change it's position.

    -
    - - - +
    ```html -
    ...
    +
    ...
    ...
    ...
    -
    ...
    +
    ...
    ``` ### Colored toasts diff --git a/docs/pages/utilities/border.md b/docs/pages/utilities/border.md index ce9ffc0..1c35d1b 100644 --- a/docs/pages/utilities/border.md +++ b/docs/pages/utilities/border.md @@ -9,6 +9,8 @@ Utility classes for controlling the border of elements. ### Rounded border +Use the `rounded` and `rounded-full` classes to control the border radius. +
    diff --git a/docs/pages/utilities/colors.md b/docs/pages/utilities/color.md similarity index 93% rename from docs/pages/utilities/colors.md rename to docs/pages/utilities/color.md index abb6c36..b10a620 100644 --- a/docs/pages/utilities/colors.md +++ b/docs/pages/utilities/color.md @@ -1,5 +1,5 @@ --- -title: 'Utilities: Colors - Sloth.css' +title: 'Utilities: Color - Sloth.css' description: Utility classes of Sloth.css for color related styles. --- @@ -13,23 +13,23 @@ Text is colored according to the color scheme per default. Use the `text-inverte

    Default text

    -

    Inverted color .text-accent

    Accent color .text-accent

    Muted text .text-muted

    Positive message .text-positive

    Negative message .text-negative

    +

    Inverted color .text-accent

    ```html

    Default text

    -

    Inverted color

    Accent color

    Muted text

    Positive message

    Negative message

    +

    Inverted color

    ``` -> Note that you can use `.text-light` and `.text-dark` to keep the text color despite the color scheme. But please only use this with sufficient contrast to the background. +> Note that you can use `text-light` and `text-dark` to keep the text color despite the color scheme. But please only use this with sufficient contrast to the background. Colors can be overwritten by the corresponding custom property: diff --git a/docs/pages/utilities/cursors.md b/docs/pages/utilities/cursor.md similarity index 84% rename from docs/pages/utilities/cursors.md rename to docs/pages/utilities/cursor.md index 73f9925..33a44c9 100644 --- a/docs/pages/utilities/cursors.md +++ b/docs/pages/utilities/cursor.md @@ -1,13 +1,13 @@ --- -title: 'Utilities: Cursors - Sloth.css' +title: 'Utilities: Cursor - Sloth.css' description: Utility classes of Sloth.css for cursors. --- -## Cursors +## Cursor Utility classes for controlling cursor types. -The following 4 types of cursors are supported. Hover over the colored fields on a device that supports cursors to see them in action. +Use the `cursor-*` classes to control the mouse cursor appearance. Hover over the colored fields on a device that supports cursors to see them in action.
    diff --git a/docs/pages/utilities/dimensions.md b/docs/pages/utilities/dimension.md similarity index 93% rename from docs/pages/utilities/dimensions.md rename to docs/pages/utilities/dimension.md index 10a0f62..d5237fb 100644 --- a/docs/pages/utilities/dimensions.md +++ b/docs/pages/utilities/dimension.md @@ -1,15 +1,15 @@ --- -title: 'Utilities: Dimensions - Sloth.css' +title: 'Utilities: Dimension - Sloth.css' description: Utility classes of Sloth.css for size related styles. --- -## Color +## Dimension Utility classes for controlling the size of elements. ### Width -Fixed or relative widths can be set for an element with the following classes. +Fixed or relative widths can be set for an element with the `w-*` classes.
    @@ -64,7 +64,7 @@ Fixed or relative widths can be set for an element with the following classes. .w-full { width: 100%; } ``` -Maximum widths can be set depending on screen breaking points. +Maximum widths can be set depending on screen breaking points using the `max-w-screen-*` classes.
    @@ -111,7 +111,7 @@ Those can be overwritten by the corresponding custom property: ### Height -Fixed or relative heights can be set for an element with the following classes. +Fixed or relative heights can be set for an element with the `h-*` classes.
    diff --git a/docs/pages/utilities/display.md b/docs/pages/utilities/display.md index 7d0fc2d..2eb2cd1 100644 --- a/docs/pages/utilities/display.md +++ b/docs/pages/utilities/display.md @@ -56,7 +56,7 @@ Elements can also be position underneath each other (column direction) instead o } ``` -> Note that `.flex-col` is a display utility and already includes the `display: flex;` rule. So there's no need to use two classes like in Tailwind `flex flex-column`. Just use `flex-col`. +> Note that `flex-col` is a display utility and already includes the `display: flex;` rule. So there's no need to use two classes like in Tailwind `flex flex-column`. Just use `flex-col`. User the `flex-wrap` class, if you want your flex items to break onto a new line when the container limit is reached. diff --git a/docs/pages/utilities/effects.md b/docs/pages/utilities/effects.md index 51675ff..a8fdfe3 100644 --- a/docs/pages/utilities/effects.md +++ b/docs/pages/utilities/effects.md @@ -9,7 +9,7 @@ Utility classes for controlling elevation and transformation of elements. ### Elevation -To make an element appear over or inside a surface, the `.shadow-*` classes can be used. +To make an element appear over or inside a surface, the `shadow-*` classes can be used.
    @@ -38,7 +38,7 @@ To make an element appear over or inside a surface, the `.shadow-*` classes can ### Transformation -To rotate an element, the `.rotate-*` classes can be used. +To rotate an element, the `rotate-*` classes can be used.
    diff --git a/docs/pages/utilities/positioning.md b/docs/pages/utilities/positioning.md index 8678aa6..0525818 100644 --- a/docs/pages/utilities/positioning.md +++ b/docs/pages/utilities/positioning.md @@ -58,7 +58,7 @@ The following 4 values of positions are supported. .sticky { position: sticky; } ``` -> Note that `.sticky` always needs a value for the [top property](https://developer.mozilla.org/en-US/docs/Web/CSS/top), hence `top-0` or `top-4` need to be set too. +> Note that `sticky` always needs a value for the [top property](https://developer.mozilla.org/en-US/docs/Web/CSS/top), hence `top-0` or `top-4` need to be set too. ### Alignment @@ -153,7 +153,7 @@ For centering content horizontally and vertically, the special utility class `fl
    -
    +
    .flex-center
    @@ -174,7 +174,7 @@ For centering content horizontally and vertically, the special utility class `fl } ``` -> Note that `.flex-center` is a display utility and already includes the `display: flex;` rule. So there's no need to use three classes like in Tailwind `flex justify-center items-center`. Just use `flex-center`. +> Note that `flex-center` is a display utility and already includes the `display: flex;` rule. So there's no need to use three classes like in Tailwind `flex justify-center items-center`. Just use `flex-center`. ### Overflow diff --git a/docs/pages/utilities/spacing.md b/docs/pages/utilities/spacing.md index e7bc7ea..7561691 100644 --- a/docs/pages/utilities/spacing.md +++ b/docs/pages/utilities/spacing.md @@ -9,7 +9,7 @@ Utility classes for controlling margins, paddings and the space in between eleme ### Gap -The space between flex or grid items can be set with the `.gap-*` classes. +The space between flex or grid items can be set with the `gap-*` classes.
    @@ -54,7 +54,7 @@ The space between flex or grid items can be set with the `.gap-*` classes. ### Margin -The outer spacing (margin) for elements can be set with the `.m-*` classes. +The outer spacing (margin) for elements can be set with the `m-*` classes.
    @@ -115,7 +115,7 @@ The outer spacing (margin) for elements can be set with the `.m-*` classes. ### Padding -The inner spacing (padding) for elements can be set with the `.p-*` classes. +The inner spacing (padding) for elements can be set with the `p-*` classes.
    diff --git a/docs/pages/utilities/text.md b/docs/pages/utilities/text.md index c1484a9..2fcf288 100644 --- a/docs/pages/utilities/text.md +++ b/docs/pages/utilities/text.md @@ -115,7 +115,7 @@ The basic font size that defines all `rem` based properties (which are almost al ### Text wrapping and flow -Text can be truncated with an ellipsis using the `.truncate` class, if the containing element has a defined width. +Text can be truncated with an ellipsis using the `truncate` class, if the containing element has a defined width.
    The Sloth is a lazy mammal.
    diff --git a/eleventy.config.js b/eleventy.config.js index 4ade339..15bf9fc 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -17,12 +17,12 @@ module.exports = function(eleventyConfig) { description: 'A drop-in utility component CSS library for lazy mammals.', utilitySections: [ 'border', - 'colors', - 'dimensions', + 'color', + 'dimension', 'display', 'positioning', 'spacing', - 'cursors', + 'cursor', 'text', 'effects', ], diff --git a/src/_config.css b/src/_config.css index c4f865c..5225a68 100644 --- a/src/_config.css +++ b/src/_config.css @@ -2,27 +2,29 @@ /* Enable color schemes */ color-scheme: light dark; - /* Colors */ - --color-accent: #e5aa70; + /* Color definitions */ + --color-accent: #e5aa70; --color-background-base: light-dark(#f4f4f4, #202631); --color-background-page: light-dark(#ffffff, #161a22); - --color-border: light-dark(#d5d5d5, #252b36); - --color-selection: #9e9e9e; - --color-text-light: #464646; - --color-text-dark: #e8e8ec; - --color-text-base: light-dark(var(--color-text-light), var(--color-text-dark)); - --color-text-inverted: light-dark(var(--color-text-dark), var(--color-text-light)); + --color-border: light-dark(#d5d5d5, #252b36); + --color-selection: #9e9e9e; + --color-text-light: #464646; + --color-text-dark: #e8e8ec; --color-text-emphasized: light-dark(#151515, #ffffff); - --color-text-muted: light-dark(#70777f, #90979f); - --color-text-positive: #238636; - --color-text-negative: #da3633; - --color-shadow: light-dark(#d5d5d5ee, #00000088); + --color-text-emverted: light-dark(#ffffff, #151515); + --color-text-muted: light-dark(#70777f, #90979f); + --color-text-positive: #238636; + --color-text-negative: #da3633; + --color-shadow: light-dark(#00000033, #00000088); - --color-text-link: light-dark(color-mix(in hsl, var(--color-accent) 70%, black), var(--color-accent)); - --color-text-link-hover: light-dark(color-mix(in hsl, var(--color-accent) 90%, black), color-mix(in hsl, var(--color-accent) 70%, white)); - --color-outline: color-mix(in srgb, var(--color-accent) 35%, transparent); - --color-background-accent: color-mix(in hsl, var(--color-accent) 80%, black); - --color-background-muted: color-mix(in srgb, var(--color-background-base) 90%, black); + /* Color derivations */ + --color-text-base: light-dark(var(--color-text-light), var(--color-text-dark)); + --color-text-inverted: light-dark(var(--color-text-dark), var(--color-text-light)); + --color-text-link: light-dark(color-mix(in hsl, var(--color-accent) 70%, black), var(--color-accent)); + --color-text-link-hover: light-dark(color-mix(in hsl, var(--color-accent) 90%, black), color-mix(in hsl, var(--color-accent) 70%, white)); + --color-outline: color-mix(in srgb, var(--color-accent) 35%, transparent); + --color-background-accent: color-mix(in hsl, var(--color-accent) 80%, black); + --color-background-muted: color-mix(in srgb, var(--color-background-base) 90%, black); --color-background-positive: color-mix(in srgb, var(--color-text-positive) 15%, transparent); --color-background-negative: color-mix(in srgb, var(--color-text-negative) 15%, transparent); @@ -35,23 +37,23 @@ --screen-2xl: 96rem; /* 1536px */ /* Transitions */ - --transition-color: color .1s ease, border-color .1s ease, outline-color .1s ease, background-color .1s ease; - --transition-outline: outline-width .1s ease; + --transition-color: color .1s ease, border-color .1s ease, outline-color .1s ease, background-color .1s ease; + --transition-outline: outline-width .1s ease; --transition-underline: text-underline-offset .1s ease; --transition-transform: transform .15s ease; - --transition-opacity: opacity .15s ease; - --transition-spacing: padding .15s ease, margin .15s ease; + --transition-opacity: opacity .15s ease; + --transition-spacing: padding .15s ease, margin .15s ease; /* Fonts & text */ - --font-size: 16px; /* defines 1rem */ - --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; - --font-mono: "SF Mono", "Segoe UI Mono", "Fira Code", "Fira Mono", "Roboto Mono", Menlo, Courier, monospace; + --font-size: 16px; /* defines 1rem */ + --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; + --font-mono: "SF Mono", "Segoe UI Mono", "Fira Code", "Fira Mono", "Roboto Mono", Menlo, Courier, monospace; --line-height: 1.4rem; /* Shadows */ --shadow-border: 0 0 0 1px; - --shadow-inset: 0 2px .25rem 0 inset; - --shadow-float: 0 .25rem .75rem -.4rem; + --shadow-inset: 0 2px .25rem 0 inset; + --shadow-float: 0 .25rem .75rem -.4rem; } diff --git a/src/components/_badge.css b/src/components/_badge.css index 2ee7e18..c05a4da 100644 --- a/src/components/_badge.css +++ b/src/components/_badge.css @@ -6,7 +6,7 @@ background: var(--color-accent); border-radius: 9999rem; content: attr(data-badge); - color: var(--color-text-inverted); + color: var(--color-text-emverted); position: absolute; top: 0; right: 0; @@ -17,6 +17,7 @@ font-size: .625rem; font-weight: 700; box-shadow: color-mix(in srgb, var(--color-background-page) 50%, transparent) var(--shadow-border); + text-transform: uppercase; } &:is(span)::after { diff --git a/src/components/_toast.css b/src/components/_toast.css index ad16f7e..4cd9287 100644 --- a/src/components/_toast.css +++ b/src/components/_toast.css @@ -2,7 +2,6 @@ display: block; opacity: 0; position: fixed; - z-index: -99; right: 1rem; bottom: 1rem; transition: var(--transition-transform), var(--transition-opacity); @@ -33,4 +32,13 @@ left: 1rem; top: 1rem; } + &.callout.accent { + background-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-background-page)); + } + &.callout.positive { + background-color: color-mix(in srgb, var(--color-text-positive) 15%, var(--color-background-page)); + } + &.callout.negative { + background-color: color-mix(in srgb, var(--color-text-negative) 15%, var(--color-background-page)); + } } diff --git a/src/core/_text.css b/src/core/_text.css index f7a5f32..1c5737b 100644 --- a/src/core/_text.css +++ b/src/core/_text.css @@ -145,6 +145,7 @@ var { /* */ code { background: color-mix(in srgb, var(--color-border) 60%, transparent); + color: var(--color-text-emphasized); border-radius: .25rem; font-family: var(--font-mono); font-weight: 400; @@ -154,6 +155,10 @@ code { pre > & { padding: 0; } + del > &, ins > & { + padding: 0 .25em; + color: inherit; + } } /* */