diff --git a/contents/_includes/patterns/chip.njk b/contents/_includes/patterns/chip.njk new file mode 100644 index 0000000..e84bbab --- /dev/null +++ b/contents/_includes/patterns/chip.njk @@ -0,0 +1,7 @@ +
+
CSS
+ +
\ No newline at end of file diff --git a/contents/accordion.md b/contents/accordion.md index 9f17577..d95f61b 100644 --- a/contents/accordion.md +++ b/contents/accordion.md @@ -44,13 +44,13 @@ keywords: css accordion, css flexbox ```css .accordion { /* Border */ - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid #d1d5db; border-bottom-color: transparent; border-radius: 4px; } .accordion__item { - border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid #d1d5db; } .accordion__header { @@ -72,7 +72,7 @@ keywords: css accordion, css flexbox } .accordion__content { - border-top: 1px solid rgba(0, 0, 0, 0.3); + border-top: 1px solid #d1d5db; padding: 16px; } diff --git a/contents/arrow-buttons.md b/contents/arrow-buttons.md index 3eba7f4..ec8f844 100644 --- a/contents/arrow-buttons.md +++ b/contents/arrow-buttons.md @@ -59,29 +59,29 @@ keywords: css arrow buttons .arrow-button--t { /* Edges */ - border-left: 1px solid rgba(0, 0, 0, 0.3); - border-top: 1px solid rgba(0, 0, 0, 0.3); + border-left: 1px solid #d1d5db; + border-top: 1px solid #d1d5db; transform: translateY(25%) rotate(45deg); } .arrow-button--r { /* Edges */ - border-right: 1px solid rgba(0, 0, 0, 0.3); - border-top: 1px solid rgba(0, 0, 0, 0.3); + border-right: 1px solid #d1d5db; + border-top: 1px solid #d1d5db; transform: translateX(-25%) rotate(45deg); } .arrow-button--b { /* Edges */ - border-bottom: 1px solid rgba(0, 0, 0, 0.3); - border-right: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid #d1d5db; + border-right: 1px solid #d1d5db; transform: translateY(-25%) rotate(45deg); } .arrow-button--l { /* Edges */ - border-bottom: 1px solid rgba(0, 0, 0, 0.3); - border-left: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid #d1d5db; + border-left: 1px solid #d1d5db; transform: translateX(25%) rotate(45deg); } ``` diff --git a/contents/badge.md b/contents/badge.md index bb92173..beba435 100644 --- a/contents/badge.md +++ b/contents/badge.md @@ -23,7 +23,7 @@ keywords: css badge, css flexbox justify-content: center; /* Colors */ - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; color: #fff; /* Rounded border */ diff --git a/contents/chip.md b/contents/chip.md new file mode 100644 index 0000000..d349afe --- /dev/null +++ b/contents/chip.md @@ -0,0 +1,105 @@ +--- +layout: layouts/post.njk +title: Chip +description: Create a chip component with CSS flexbox +keywords: css chip, css flexbox, css tag +--- + +## HTML + +```html +
+ +
+ ... +
+ + + +
+``` + +## CSS + +```css +.chip { + /* Center the content */ + align-items: center; + display: inline-flex; + justify-content: center; + + /* Background color */ + background-color: #d1d5db; + + /* Rounded border */ + border-radius: 9999px; + + /* Spacing */ + padding: 0.25rem 0.5rem; +} + +.chip__content { + margin-right: 0.25rem; +} +``` + +The [close button](/close-button/) is used to create a button for removing the chip: + +```css +.chip__button { + /* Reset */ + background-color: transparent; + border-color: transparent; + + /* Cursor */ + cursor: pointer; + + /* Size */ + height: 1rem; + width: 1rem; + + /* Used to position the inner */ + position: relative; +} + +.chip__button-line { + /* Background color */ + background-color: #9ca3af; + + /* Position */ + position: absolute; + + /* Size */ + height: 1px; + width: 100%; +} + +.chip__button-line--first { + /* Position */ + left: 0px; + top: 50%; + transform: translate(0%, -50%) rotate(45deg); + + /* Size */ + height: 1px; + width: 100%; +} + +.chip__button-line--second { + /* Position */ + left: 50%; + top: 0px; + transform: translate(-50%, 0%) rotate(45deg); + + /* Size */ + height: 100%; + width: 1px; +} +``` + +{% demo %} +{% include "patterns/chip.njk" %} +{% enddemo %} diff --git a/contents/close-button.md b/contents/close-button.md index ff93cd1..feb8b1b 100644 --- a/contents/close-button.md +++ b/contents/close-button.md @@ -35,7 +35,7 @@ keywords: css close button, css flexbox .close-button__line { /* Background color */ - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; /* Position */ position: absolute; diff --git a/contents/concave-corners.md b/contents/concave-corners.md index 1816e03..2b3632c 100644 --- a/contents/concave-corners.md +++ b/contents/concave-corners.md @@ -30,7 +30,7 @@ keywords: css border radius, css concave border radius, css concave corners ```css .concave-corners { - background-color: rgba(0, 0, 0, .3); + background-color: #d1d5db; /* Used to position the corners */ position: relative; diff --git a/contents/corner-ribbon.md b/contents/corner-ribbon.md index 7038d37..3547e3b 100644 --- a/contents/corner-ribbon.md +++ b/contents/corner-ribbon.md @@ -53,7 +53,7 @@ keywords: css flexbox, css ribbon transform: translate(-38px, -8px) rotate(-45deg); /* Background color */ - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; /* Centerize the text content */ text-align: center; diff --git a/contents/curved-background.md b/contents/curved-background.md index cf1e7b3..71ee6d1 100644 --- a/contents/curved-background.md +++ b/contents/curved-background.md @@ -18,7 +18,7 @@ keywords: css border radius, css curved background ```css .curved-background__curved { /* Background color */ - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; /* You can use gradient background color such as */ /* background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%); */ diff --git a/contents/diagonal-section.md b/contents/diagonal-section.md index cc26384..8981e4f 100644 --- a/contents/diagonal-section.md +++ b/contents/diagonal-section.md @@ -39,7 +39,7 @@ keywords: css diagonal section, css transform skew transform: skewY(-5deg); /* Background color */ - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; /* Displayed under the main content */ z-index: -1; diff --git a/contents/dot-leader.md b/contents/dot-leader.md index d50fd0f..39083a5 100644 --- a/contents/dot-leader.md +++ b/contents/dot-leader.md @@ -32,7 +32,7 @@ keywords: css dot leader, css flexbox .dot-leader__dots { /* Bottom border */ - border-bottom: 1px dotted rgba(0, 0, 0, 0.3); + border-bottom: 1px dotted #d1d5db; /* Take remaining width */ flex: 1; diff --git a/contents/drop-area.md b/contents/drop-area.md index c74673c..64f6521 100644 --- a/contents/drop-area.md +++ b/contents/drop-area.md @@ -23,7 +23,7 @@ keywords: css dropping area, css flexbox justify-content: center; /* Border */ - border: 0.25rem dashed rgba(0, 0, 0, 0.3); + border: 0.25rem dashed #d1d5db; border-radius: 0.25rem; } ``` diff --git a/contents/drop-cap.md b/contents/drop-cap.md index ed9bbeb..d6d799a 100644 --- a/contents/drop-cap.md +++ b/contents/drop-cap.md @@ -26,7 +26,7 @@ keywords: css drop cap, css :first-letter padding: 0 0.5rem; /* Optional */ - border: 2px solid rgba(0, 0, 0, .3); + border: 2px solid #d1d5db; font-size: 2rem; font-weight: 700; } diff --git a/contents/feature-comparison.md b/contents/feature-comparison.md index fc50183..95e13dd 100644 --- a/contents/feature-comparison.md +++ b/contents/feature-comparison.md @@ -39,7 +39,7 @@ keywords: css feature comparison, css flexbox display: flex; /* Bottom border */ - border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid #d1d5db; /* Spacing */ padding: 0.25rem 0; diff --git a/contents/index.njk b/contents/index.njk index 1585fd2..a1ad7db 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -88,6 +88,7 @@ eleventyExcludeFromCollections: true

Input

{% pattern "Button with icon" %}{% include "patterns/button-with-icon.njk" %}{% endpattern %} + {% pattern "Chip" %}{% include "patterns/chip.njk" %}{% endpattern %}
diff --git a/contents/initial-avatar.md b/contents/initial-avatar.md index 325e3bb..a053302 100644 --- a/contents/initial-avatar.md +++ b/contents/initial-avatar.md @@ -23,7 +23,7 @@ keywords: css avatar justify-content: center; /* Colors */ - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; color: #fff; /* Rounded border */ diff --git a/contents/keyboard-shortcut.md b/contents/keyboard-shortcut.md index 37a9d07..990a86f 100644 --- a/contents/keyboard-shortcut.md +++ b/contents/keyboard-shortcut.md @@ -23,7 +23,7 @@ We use the native `kbd` tag to display the keyboard shortcut. color: rgba(0, 0, 0, 0.7); /* Bottom shadow */ - box-shadow: rgba(0, 0, 0, 0.3) 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px; + box-shadow: #d1d5db 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px; /* Spacing */ padding: 0.25rem 0.5rem; diff --git a/contents/layered-card.md b/contents/layered-card.md index 85ae99f..3cc116f 100644 --- a/contents/layered-card.md +++ b/contents/layered-card.md @@ -25,7 +25,7 @@ keywords: css layered card } .layered-card::before { - background: rgba(0, 0, 0, 0.3); + background: #d1d5db; content: ''; /* Position */ diff --git a/contents/lined-paper.md b/contents/lined-paper.md index f882ebb..3284332 100644 --- a/contents/lined-paper.md +++ b/contents/lined-paper.md @@ -18,7 +18,7 @@ keywords: css linear gradient, css lined paper, css multiple horizontal lines ```css .lined-paper { /* Lined background */ - background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px); + background-image: linear-gradient(#d1d5db 1px, transparent 0px); background-size: 100% 2em; /* diff --git a/contents/notification.md b/contents/notification.md index 0c03995..ee6e40d 100644 --- a/contents/notification.md +++ b/contents/notification.md @@ -55,7 +55,7 @@ The [close button](/close-button/) represents the button for closing the notific .notification__close-line { /* Background color */ - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; /* Position */ position: absolute; diff --git a/contents/price-tag.md b/contents/price-tag.md index 2882ea9..5775835 100644 --- a/contents/price-tag.md +++ b/contents/price-tag.md @@ -17,7 +17,7 @@ keywords: css price tag ```css :root { - --price-tag-background: rgba(0, 0, 0, 0.3); + --price-tag-background: #d1d5db; --price-tag-height: 2rem; } diff --git a/contents/pricing-table.md b/contents/pricing-table.md index 9f43fcf..e241f9b 100644 --- a/contents/pricing-table.md +++ b/contents/pricing-table.md @@ -53,7 +53,7 @@ keywords: css flexbox, css pricing table margin: 0 0.5rem; /* OPTIONAL: Border */ - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid #d1d5db; border-radius: 0.25rem; } ``` diff --git a/contents/property-list.md b/contents/property-list.md index 7f50ac9..020fa50 100644 --- a/contents/property-list.md +++ b/contents/property-list.md @@ -29,7 +29,7 @@ keywords: css flexbox, property list align-items: center; display: flex; - border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid #d1d5db; /* Spacing */ margin: 0; diff --git a/contents/questions-and-answers.md b/contents/questions-and-answers.md index e6ab310..6c84486 100644 --- a/contents/questions-and-answers.md +++ b/contents/questions-and-answers.md @@ -38,7 +38,7 @@ keywords: css accordion, css faq, css flexbox ```css .questions-and-answers__item:not(:last-child) { - border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid #d1d5db; } .questions-and-answers__header { align-items: center; diff --git a/contents/ribbon.md b/contents/ribbon.md index e8cd247..f877623 100644 --- a/contents/ribbon.md +++ b/contents/ribbon.md @@ -64,13 +64,13 @@ keywords: css ribbon .ribbon__side--l { /* Position */ left: -1.5rem; - border-color: rgba(0, 0, 0, .3) rgba(0, 0, 0, .3) rgba(0, 0, 0, .3) transparent; + border-color: #d1d5db #d1d5db #d1d5db transparent; } .ribbon__side--r { /* Position */ right: -1.5rem; - border-color: rgba(0, 0, 0, .3) transparent rgba(0, 0, 0, .3) rgba(0, 0, 0, .3); + border-color: #d1d5db transparent #d1d5db #d1d5db; } .ribbon__triangle { diff --git a/contents/separator.md b/contents/separator.md index 299f199..8bb0db8 100644 --- a/contents/separator.md +++ b/contents/separator.md @@ -49,7 +49,7 @@ keywords: css divider, css flexbox, css separator } .separator__separator { - border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid #d1d5db; height: 1px; width: 100%; } diff --git a/contents/teardrop.md b/contents/teardrop.md index 6dff5c6..1423025 100644 --- a/contents/teardrop.md +++ b/contents/teardrop.md @@ -26,7 +26,7 @@ keywords: css border radius, css teardrop, css water drop shape, css water dropl justify-content: center; /* Border */ - border: 2px solid rgba(0, 0, 0, 0.3); + border: 2px solid #d1d5db; border-radius: 0px 50% 50% 50%; /* Angle at the top */ diff --git a/contents/triangle-buttons.md b/contents/triangle-buttons.md index b0add09..832df70 100644 --- a/contents/triangle-buttons.md +++ b/contents/triangle-buttons.md @@ -67,22 +67,22 @@ keywords: css triangle buttons } .triangle-buttons__triangle--t { - border-color: transparent transparent rgba(0, 0, 0, 0.3); + border-color: transparent transparent #d1d5db; border-width: 0 0.5rem 0.5rem; } .triangle-buttons__triangle--r { - border-color: transparent transparent transparent rgba(0, 0, 0, 0.3); + border-color: transparent transparent transparent #d1d5db; border-width: 0.5rem 0 0.5rem 0.5rem; } .triangle-buttons__triangle--b { - border-color: rgba(0, 0, 0, 0.3) transparent transparent; + border-color: #d1d5db transparent transparent; border-width: 0.5rem 0.5rem 0; } .triangle-buttons__triangle--l { - border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent; + border-color: transparent #d1d5db transparent transparent; border-width: 0.5rem 0.5rem 0.5rem 0; } ``` diff --git a/contents/voting.md b/contents/voting.md index aa2ee65..037fbce 100644 --- a/contents/voting.md +++ b/contents/voting.md @@ -28,7 +28,7 @@ keywords: css flexbox, css triangle buttons, css voting control ```css .voting { - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid #d1d5db; border-radius: 0.25rem; display: flex; flex-direction: column; @@ -62,12 +62,12 @@ keywords: css flexbox, css triangle buttons, css voting control } .voting__triangle--up { - border-color: transparent transparent rgba(0, 0, 0, 0.3); + border-color: transparent transparent #d1d5db; border-width: 0 0.5rem 0.5rem; } .voting__triangle--down { - border-color: rgba(0, 0, 0, 0.3) transparent transparent; + border-color: #d1d5db transparent transparent; border-width: 0.5rem 0.5rem 0px; } diff --git a/pages/breadcrumb/index.tsx b/pages/breadcrumb/index.tsx index 3a775db..e0b0d7a 100644 --- a/pages/breadcrumb/index.tsx +++ b/pages/breadcrumb/index.tsx @@ -54,15 +54,15 @@ const Details: React.FC<{}> = () => {
-
/
+
/
-
/
+
/
-
/
+
/
diff --git a/pages/chip/index.tsx b/pages/chip/index.tsx deleted file mode 100644 index e264bab..0000000 --- a/pages/chip/index.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; -import { Spacer } from '@1milligram/design'; - -import { RelatedPatterns } from '../../components/RelatedPatterns'; -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; - -const InputChip: React.FC<{}> = ({ children }) => { - return ( -
-
{children}
- -
- ); -}; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - -
- You can use a{' '} - - close button - {' '} - to remove a chip. -
- - -
- ... -
- - - - ... - -`} - css={` - .chip { - /* Center the content */ - align-items: center; - display: inline-flex; - justify-content: center; - - /* Background color */ - background-color: rgba(0, 0, 0, 0.1); - - /* Rounded border */ - border-radius: 9999px; - - /* Spacing */ - padding: 4px 8px; - } - - .chip__content { - margin-right: 4px; - } - `} - > -
- CSS -
- - - - - - ); -}; - -export default Details; diff --git a/pages/custom-checkbox-button/index.tsx b/pages/custom-checkbox-button/index.tsx index 1f5fb96..85e8a83 100644 --- a/pages/custom-checkbox-button/index.tsx +++ b/pages/custom-checkbox-button/index.tsx @@ -38,7 +38,7 @@ const Details: React.FC<{}> = () => { />
= () => { } .label__square { - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid #d1d5db; border-radius: 4px; /* Spacing */ diff --git a/pages/custom-radio-button/index.tsx b/pages/custom-radio-button/index.tsx index a07bc52..3749130 100644 --- a/pages/custom-radio-button/index.tsx +++ b/pages/custom-radio-button/index.tsx @@ -37,7 +37,7 @@ const Details: React.FC<{}> = () => { />
= () => { .label__circle { /* Rounded border */ - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid #d1d5db; border-radius: 9999px; /* Spacing */ diff --git a/pages/dot-navigation/index.tsx b/pages/dot-navigation/index.tsx index cec851e..40cecf1 100644 --- a/pages/dot-navigation/index.tsx +++ b/pages/dot-navigation/index.tsx @@ -18,8 +18,8 @@ const Details: React.FC<{}> = () => { return (
  • = () => { width: 12px; /* Active dot */ - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; /* Inactive dot */ background-color: transparent; - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid #d1d5db; /* OPTIONAL: Spacing between dots */ margin: 0 4px; diff --git a/pages/drawer/index.tsx b/pages/drawer/index.tsx index f2e67a2..711267f 100644 --- a/pages/drawer/index.tsx +++ b/pages/drawer/index.tsx @@ -76,7 +76,7 @@ const Details: React.FC<{}> = () => { >
    = () => {
    = () => { >
    = () => {
    = () => {
    = () => { />
    = () => { /* OFF status */ background-color: rgba(0, 0, 0, 0.1); - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid #d1d5db; /* ON status */ background-color: #357edd; @@ -69,7 +69,7 @@ const Details: React.FC<{}> = () => { background-color: #fff; /* OFF status */ - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid #d1d5db; } `} > @@ -87,7 +87,7 @@ const Details: React.FC<{}> = () => { htmlFor="checkbox-switch" style={{ backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)', - border: `1px solid ${checked ? '#357EDD' : 'rgba(0, 0, 0, 0.3)'}`, + border: `1px solid ${checked ? '#357EDD' : '#d1d5db'}`, borderRadius: '9999px', display: 'flex', height: '32px', @@ -105,7 +105,7 @@ const Details: React.FC<{}> = () => {
    = () => { return (
    = () => { .tabs__tab--active { /* Border */ - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid #d1d5db; /* Hide the bottom border */ border-bottom-color: transparent; @@ -76,7 +76,7 @@ const Details: React.FC<{}> = () => { .tabs__tab--inactive { /* Has only the bottom border */ - border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid #d1d5db; } `} > diff --git a/pages/toggle-password-visibility/index.tsx b/pages/toggle-password-visibility/index.tsx index e9c4d0b..22caeea 100644 --- a/pages/toggle-password-visibility/index.tsx +++ b/pages/toggle-password-visibility/index.tsx @@ -34,7 +34,7 @@ const Details: React.FC<{}> = () => { display: flex; /* Border */ - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid #d1d5db; } .container__input { @@ -57,7 +57,7 @@ const Details: React.FC<{}> = () => {
    = () => { display: flex; /* Border */ - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid #d1d5db; } .container__input { @@ -73,7 +73,7 @@ const Details: React.FC<{}> = () => {
    = () => { .wizard__connector { flex: 1; height: 1px; - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; } .wizard__step:first-child .wizard__connector, @@ -78,7 +78,7 @@ const Details: React.FC<{}> = () => { justify-content: center; /* Rounded border */ - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; border-radius: 9999px; height: 32px; width: 32px; diff --git a/patterns/chip/Cover.tsx b/patterns/chip/Cover.tsx deleted file mode 100644 index b76a35e..0000000 --- a/patterns/chip/Cover.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Cover: React.FC<{}> = () => { - return ( - -
    -
    -
    - -
    - -
    -
    - - ); -}; - -export default Cover; diff --git a/patterns/circular-navigation/Cover.tsx b/patterns/circular-navigation/Cover.tsx index abba688..6a7e7dd 100644 --- a/patterns/circular-navigation/Cover.tsx +++ b/patterns/circular-navigation/Cover.tsx @@ -18,7 +18,7 @@ const Cover: React.FC<{}> = () => {
    = () => {
    = () => {
    = () => {
    = () => {
    = () => {
    = () => { />
    = () => { />
    = () => { />
    = () => {
    = () => {
    = () => {
    = () => {
    = () => {
    = () => { >
    = () => { >
    @@ -41,7 +41,7 @@ const Cover: React.FC<{}> = () => {
    = () => {
    = () => {
    diff --git a/patterns/input-addon/Cover.tsx b/patterns/input-addon/Cover.tsx index b5c87a9..d8caa9c 100644 --- a/patterns/input-addon/Cover.tsx +++ b/patterns/input-addon/Cover.tsx @@ -17,7 +17,7 @@ const Cover: React.FC<{}> = () => { >
    = () => {
    = () => {
    = () => { >
    = () => {
    = () => {
    = () => {
    = () => {
    = () => { >
    = () => {
    = () => {
    = () => { >
    = () => {
    = () => { >
    = () => {
    diff --git a/patterns/radio-switch/Cover.tsx b/patterns/radio-switch/Cover.tsx index 3b71288..f683265 100644 --- a/patterns/radio-switch/Cover.tsx +++ b/patterns/radio-switch/Cover.tsx @@ -19,7 +19,7 @@ const Cover: React.FC<{}> = () => {
    = () => { justifyContent: 'center', }} > -
    ★
    -
    ★
    -
    ★
    -
    ☆
    -
    ☆
    +
    ★
    +
    ★
    +
    ★
    +
    ☆
    +
    ☆
    diff --git a/patterns/search-box/Cover.tsx b/patterns/search-box/Cover.tsx index 237f412..815a1ba 100644 --- a/patterns/search-box/Cover.tsx +++ b/patterns/search-box/Cover.tsx @@ -19,7 +19,7 @@ const Cover: React.FC<{}> = () => {
    = () => {
    = () => {
    = () => { >
    = () => {
    = () => {
    = () => { >
    = () => {
    = () => {
    = () => { >
    @@ -41,7 +41,7 @@ const Cover: React.FC<{}> = () => {
    diff --git a/patterns/sticky-header/Cover.tsx b/patterns/sticky-header/Cover.tsx index 8da811a..1a93731 100644 --- a/patterns/sticky-header/Cover.tsx +++ b/patterns/sticky-header/Cover.tsx @@ -36,7 +36,7 @@ const Cover: React.FC<{}> = () => {
    = () => { />
    = () => { >
    = () => { >
    = () => { >
    -
    +
    -
    +
    diff --git a/patterns/toggle-password-visibility/Cover.tsx b/patterns/toggle-password-visibility/Cover.tsx index d10385f..c9c0473 100644 --- a/patterns/toggle-password-visibility/Cover.tsx +++ b/patterns/toggle-password-visibility/Cover.tsx @@ -19,7 +19,7 @@ const Cover: React.FC<{}> = () => {
    = () => {
    = () => {
    = () => {
    = () => {
    = ({ - backgroundColor = 'rgba(0, 0, 0, 0.3)', + backgroundColor = '#d1d5db', blockHeight = 4, justify = 'start', numberOfBlocks = 1, diff --git a/placeholders/Frame.tsx b/placeholders/Frame.tsx index 6868118..ccc9274 100644 --- a/placeholders/Frame.tsx +++ b/placeholders/Frame.tsx @@ -4,7 +4,7 @@ const Frame: React.FC<{}> = ({ children }) => { return (
    ol li::before { - background-color: #e5e7eb; + background-color: #d1d5db; border-radius: 50%; content: counter(ol-step-counter); align-items: center; diff --git a/styles/index.scss b/styles/index.scss index 4225762..61d331f 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -19,6 +19,7 @@ @import './patterns/button-with-icon'; @import './patterns/card'; @import './patterns/centering'; +@import './patterns/chip'; @import './patterns/close-button'; @import './patterns/color-swatch'; @import './patterns/concave-corners'; diff --git a/styles/patterns/_accordion.scss b/styles/patterns/_accordion.scss index ab999e2..eb25ff4 100644 --- a/styles/patterns/_accordion.scss +++ b/styles/patterns/_accordion.scss @@ -1,11 +1,11 @@ .accordion { - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid #d1d5db; border-radius: 4px; height: 100%; width: 100%; } .accordion__item:not(:last-child) { - border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid #d1d5db; } .accordion__header { align-items: center; diff --git a/styles/patterns/_arrow-buttons.scss b/styles/patterns/_arrow-buttons.scss index 34e0f57..136c1e2 100644 --- a/styles/patterns/_arrow-buttons.scss +++ b/styles/patterns/_arrow-buttons.scss @@ -14,29 +14,29 @@ .arrow-button--t { /* Edges */ - border-left: 1px solid rgba(0, 0, 0, 0.3); - border-top: 1px solid rgba(0, 0, 0, 0.3); + border-left: 1px solid #d1d5db; + border-top: 1px solid #d1d5db; transform: translateY(25%) rotate(45deg); } .arrow-button--r { /* Edges */ - border-right: 1px solid rgba(0, 0, 0, 0.3); - border-top: 1px solid rgba(0, 0, 0, 0.3); + border-right: 1px solid #d1d5db; + border-top: 1px solid #d1d5db; transform: translateX(-25%) rotate(45deg); } .arrow-button--b { /* Edges */ - border-bottom: 1px solid rgba(0, 0, 0, 0.3); - border-right: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid #d1d5db; + border-right: 1px solid #d1d5db; transform: translateY(-25%) rotate(45deg); } .arrow-button--l { /* Edges */ - border-bottom: 1px solid rgba(0, 0, 0, 0.3); - border-left: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid #d1d5db; + border-left: 1px solid #d1d5db; transform: translateX(25%) rotate(45deg); } diff --git a/styles/patterns/_avatar.scss b/styles/patterns/_avatar.scss index 3c0f3e9..a4e347c 100644 --- a/styles/patterns/_avatar.scss +++ b/styles/patterns/_avatar.scss @@ -2,7 +2,7 @@ height: 8rem; width: 8rem; - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; /* Rounded border */ border-radius: 50%; diff --git a/styles/patterns/_badge.scss b/styles/patterns/_badge.scss index 2205e70..9a19a0f 100644 --- a/styles/patterns/_badge.scss +++ b/styles/patterns/_badge.scss @@ -5,7 +5,7 @@ justify-content: center; /* Colors */ - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; color: #fff; /* Rounded border */ diff --git a/styles/patterns/_card.scss b/styles/patterns/_card.scss index 61cc62d..273b565 100644 --- a/styles/patterns/_card.scss +++ b/styles/patterns/_card.scss @@ -3,11 +3,11 @@ flex-direction: column; width: 100%; height: 100%; - border: 1px solid rgba(0, 0, 0, .3); + border: 1px solid #d1d5db; border-radius: 0.25rem; } .card__cover { - background: rgba(0, 0, 0, .3); + background: #d1d5db; border-radius: 0.25rem; height: 40%; width: 100%; diff --git a/styles/patterns/_chip.scss b/styles/patterns/_chip.scss new file mode 100644 index 0000000..bfb310c --- /dev/null +++ b/styles/patterns/_chip.scss @@ -0,0 +1,69 @@ +.chip { + /* Center the content */ + align-items: center; + display: inline-flex; + justify-content: center; + + /* Background color */ + background-color: #d1d5db; + + /* Rounded border */ + border-radius: 9999px; + + /* Spacing */ + padding: 0.25rem 0.5rem; +} + +.chip__content { + margin-right: 0.25rem; +} + +.chip__button { + /* Reset */ + background-color: transparent; + border-color: transparent; + + /* Cursor */ + cursor: pointer; + + /* Size */ + height: 1rem; + width: 1rem; + + /* Used to position the inner */ + position: relative; +} + +.chip__button-line { + /* Background color */ + background-color: #9ca3af; + + /* Position */ + position: absolute; + + /* Size */ + height: 1px; + width: 100%; +} + +.chip__button-line--first { + /* Position */ + left: 0px; + top: 50%; + transform: translate(0%, -50%) rotate(45deg); + + /* Size */ + height: 1px; + width: 100%; +} + +.chip__button-line--second { + /* Position */ + left: 50%; + top: 0px; + transform: translate(-50%, 0%) rotate(45deg); + + /* Size */ + height: 100%; + width: 1px; +} diff --git a/styles/patterns/_close-button.scss b/styles/patterns/_close-button.scss index 2b5f19a..8b8cda6 100644 --- a/styles/patterns/_close-button.scss +++ b/styles/patterns/_close-button.scss @@ -16,7 +16,7 @@ .close-button__line { /* Background color */ - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; /* Position */ position: absolute; diff --git a/styles/patterns/_color-swatch.scss b/styles/patterns/_color-swatch.scss index 203cecf..1c18b38 100644 --- a/styles/patterns/_color-swatch.scss +++ b/styles/patterns/_color-swatch.scss @@ -19,7 +19,7 @@ background-color: rgba(0, 0, 0, .2); } .swatch__item--3rd { - background-color: rgba(0, 0, 0, .3); + background-color: #d1d5db; } .swatch__item--4th { background-color: rgba(0, 0, 0, .4); diff --git a/styles/patterns/_concave-corners.scss b/styles/patterns/_concave-corners.scss index d289d7d..2160819 100644 --- a/styles/patterns/_concave-corners.scss +++ b/styles/patterns/_concave-corners.scss @@ -1,5 +1,5 @@ .concave-corners { - background-color: rgba(0, 0, 0, .3); + background-color: #d1d5db; /* Used to position the corners */ position: relative; diff --git a/styles/patterns/_cookie-banner.scss b/styles/patterns/_cookie-banner.scss index f7bbea7..b694eb5 100644 --- a/styles/patterns/_cookie-banner.scss +++ b/styles/patterns/_cookie-banner.scss @@ -1,5 +1,5 @@ .cookie-banner { - border: 1px solid rgba(0,0,0,.3); + border: 1px solid #d1d5db; border-radius: 0.25rem; height: 100%; @@ -10,7 +10,7 @@ } .cookie-banner__content { - border-top: 1px solid rgba(0,0,0,.3); + border-top: 1px solid #d1d5db; /* Take available width */ flex: 1; padding: 0 0.5rem; diff --git a/styles/patterns/_corner-ribbon.scss b/styles/patterns/_corner-ribbon.scss index 2c971c0..8414fce 100644 --- a/styles/patterns/_corner-ribbon.scss +++ b/styles/patterns/_corner-ribbon.scss @@ -1,6 +1,6 @@ .corner-ribbon { position: relative; - border: 1px solid rgba(0,0,0,.3); + border: 1px solid #d1d5db; border-radius: 0.25rem; height: 100%; width: 100%; @@ -34,7 +34,7 @@ transform: translate(-38px, -8px) rotate(-45deg); /* Background color */ - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; /* Centerize the text content */ text-align: center; diff --git a/styles/patterns/_curved-background.scss b/styles/patterns/_curved-background.scss index f2e12fc..4f7b6c5 100644 --- a/styles/patterns/_curved-background.scss +++ b/styles/patterns/_curved-background.scss @@ -1,11 +1,11 @@ .curved-background { - border: 1px solid rgba(0,0,0,.3); + border: 1px solid #d1d5db; border-radius: 0.25rem; height: 100%; width: 100%; } .curved-background__curved { - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; border-bottom-left-radius: 50% 40%; border-bottom-right-radius: 50% 40%; diff --git a/styles/patterns/_diagonal-section.scss b/styles/patterns/_diagonal-section.scss index a96b60d..67df6b1 100644 --- a/styles/patterns/_diagonal-section.scss +++ b/styles/patterns/_diagonal-section.scss @@ -20,5 +20,5 @@ transform: translate(0, -50%) skewY(-15deg); /* Background color */ - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; } \ No newline at end of file diff --git a/styles/patterns/_docked-at-corner.scss b/styles/patterns/_docked-at-corner.scss index 233bbea..88f9a97 100644 --- a/styles/patterns/_docked-at-corner.scss +++ b/styles/patterns/_docked-at-corner.scss @@ -2,7 +2,7 @@ position: relative; height: 4rem; width: 80%; - border: 1px solid rgba(0, 0, 0, .3); + border: 1px solid #d1d5db; border-radius: 0.25rem; } .docked-at-corner__docker { diff --git a/styles/patterns/_dot-leader.scss b/styles/patterns/_dot-leader.scss index 937c506..9cd57e0 100644 --- a/styles/patterns/_dot-leader.scss +++ b/styles/patterns/_dot-leader.scss @@ -9,7 +9,7 @@ .dot-leader__dots { /* Bottom border */ - border-bottom: 1px dotted rgba(0, 0, 0, 0.3); + border-bottom: 1px dotted #d1d5db; /* Take remaining width */ flex: 1; diff --git a/styles/patterns/_drop-area.scss b/styles/patterns/_drop-area.scss index 469aa3e..ea81c86 100644 --- a/styles/patterns/_drop-area.scss +++ b/styles/patterns/_drop-area.scss @@ -9,6 +9,6 @@ justify-content: center; /* Border */ - border: 0.25rem dashed rgba(0, 0, 0, 0.3); + border: 0.25rem dashed #d1d5db; border-radius: 0.25rem; } \ No newline at end of file diff --git a/styles/patterns/_drop-cap.scss b/styles/patterns/_drop-cap.scss index 2800378..1185366 100644 --- a/styles/patterns/_drop-cap.scss +++ b/styles/patterns/_drop-cap.scss @@ -2,7 +2,7 @@ overflow: hidden; } .drop-cap:first-letter { - border: 2px solid rgba(0, 0, 0, .3); + border: 2px solid #d1d5db; /* Display at the left */ float: left; diff --git a/styles/patterns/_feature-comparison.scss b/styles/patterns/_feature-comparison.scss index 7e75009..ac1e503 100644 --- a/styles/patterns/_feature-comparison.scss +++ b/styles/patterns/_feature-comparison.scss @@ -3,7 +3,7 @@ display: flex; /* Bottom border */ - border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid #d1d5db; /* Spacing */ padding: 0.25rem 0; diff --git a/styles/patterns/_fixed-at-corner.scss b/styles/patterns/_fixed-at-corner.scss index 2e18fd3..667b4b0 100644 --- a/styles/patterns/_fixed-at-corner.scss +++ b/styles/patterns/_fixed-at-corner.scss @@ -1,7 +1,7 @@ .fixed-at-corner { width: 100%; height: 100%; - border: 1px solid rgba(0, 0, 0, .3); + border: 1px solid #d1d5db; border-radius: 0.25rem; position: relative; diff --git a/styles/patterns/_fixed-at-side.scss b/styles/patterns/_fixed-at-side.scss index df96171..cdc8710 100644 --- a/styles/patterns/_fixed-at-side.scss +++ b/styles/patterns/_fixed-at-side.scss @@ -1,7 +1,7 @@ .fixed-at-side { width: 100%; height: 100%; - border: 1px solid rgba(0, 0, 0, .3); + border: 1px solid #d1d5db; border-radius: 0.25rem; position: relative; diff --git a/styles/patterns/_initial-avatar.scss b/styles/patterns/_initial-avatar.scss index c234f53..075e68f 100644 --- a/styles/patterns/_initial-avatar.scss +++ b/styles/patterns/_initial-avatar.scss @@ -5,7 +5,7 @@ justify-content: center; /* Colors */ - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; color: #fff; /* Rounded border */ diff --git a/styles/patterns/_keyboard-shortcut.scss b/styles/patterns/_keyboard-shortcut.scss index 534cdc9..feed3de 100644 --- a/styles/patterns/_keyboard-shortcut.scss +++ b/styles/patterns/_keyboard-shortcut.scss @@ -5,7 +5,7 @@ color: rgba(0, 0, 0, 0.7); /* Bottom shadow */ - box-shadow: rgba(0, 0, 0, 0.3) 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px; + box-shadow: #d1d5db 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px; /* Spacing */ padding: 0.25rem 0.5rem; diff --git a/styles/patterns/_layered-card.scss b/styles/patterns/_layered-card.scss index 281c848..7dfcf6a 100644 --- a/styles/patterns/_layered-card.scss +++ b/styles/patterns/_layered-card.scss @@ -7,7 +7,7 @@ } .layered-card::before { - background: rgba(0, 0, 0, 0.3); + background: #d1d5db; content: ''; /* Position */ @@ -34,6 +34,6 @@ width: 100%; z-index: 1; - border: 1px solid rgba(0, 0, 0, .3); + border: 1px solid #d1d5db; background: #FFF; } \ No newline at end of file diff --git a/styles/patterns/_lined-paper.scss b/styles/patterns/_lined-paper.scss index 8eaffc4..1d6e20a 100644 --- a/styles/patterns/_lined-paper.scss +++ b/styles/patterns/_lined-paper.scss @@ -1,6 +1,6 @@ .lined-paper { /* Lined background */ - background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px); + background-image: linear-gradient(#d1d5db 1px, transparent 0px); background-size: 100% 2em; /* diff --git a/styles/patterns/_notification.scss b/styles/patterns/_notification.scss index 08acbe4..0331615 100644 --- a/styles/patterns/_notification.scss +++ b/styles/patterns/_notification.scss @@ -30,7 +30,7 @@ .notification__close-line { /* Background color */ - background-color: rgba(0, 0, 0, 0.3); + background-color: #d1d5db; /* Position */ position: absolute; diff --git a/styles/patterns/_price-tag.scss b/styles/patterns/_price-tag.scss index 16b1873..dee3ce6 100644 --- a/styles/patterns/_price-tag.scss +++ b/styles/patterns/_price-tag.scss @@ -1,5 +1,5 @@ :root { - --price-tag-background: rgba(0, 0, 0, 0.3); + --price-tag-background: #d1d5db; --price-tag-height: 2rem; } diff --git a/styles/patterns/_pricing-table.scss b/styles/patterns/_pricing-table.scss index b51b7ea..40d3c3e 100644 --- a/styles/patterns/_pricing-table.scss +++ b/styles/patterns/_pricing-table.scss @@ -4,7 +4,7 @@ justify-content: center; } .pricing-table__column { - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid #d1d5db; border-radius: 0.25rem; margin: 0 0.25rem; padding: 0.25rem; diff --git a/styles/patterns/_property-list.scss b/styles/patterns/_property-list.scss index 32d55d9..4391a42 100644 --- a/styles/patterns/_property-list.scss +++ b/styles/patterns/_property-list.scss @@ -3,7 +3,7 @@ align-items: center; display: flex; - border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid #d1d5db; /* Spacing */ margin: 0; diff --git a/styles/patterns/_questions-and-answers.scss b/styles/patterns/_questions-and-answers.scss index 5fd49f2..a4de586 100644 --- a/styles/patterns/_questions-and-answers.scss +++ b/styles/patterns/_questions-and-answers.scss @@ -2,7 +2,7 @@ width: 100%; } .questions-and-answers__item:not(:last-child) { - border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid #d1d5db; } .questions-and-answers__header { align-items: center; diff --git a/styles/patterns/_ribbon.scss b/styles/patterns/_ribbon.scss index 5174b77..1aeb216 100644 --- a/styles/patterns/_ribbon.scss +++ b/styles/patterns/_ribbon.scss @@ -34,13 +34,13 @@ .ribbon__side--l { /* Position */ left: -1.5rem; - border-color: rgba(0, 0, 0, .3) rgba(0, 0, 0, .3) rgba(0, 0, 0, .3) transparent; + border-color: #d1d5db #d1d5db #d1d5db transparent; } .ribbon__side--r { /* Position */ right: -1.5rem; - border-color: rgba(0, 0, 0, .3) transparent rgba(0, 0, 0, .3) rgba(0, 0, 0, .3); + border-color: #d1d5db transparent #d1d5db #d1d5db; } .ribbon__triangle { diff --git a/styles/patterns/_separator.scss b/styles/patterns/_separator.scss index 9780abf..b0d634a 100644 --- a/styles/patterns/_separator.scss +++ b/styles/patterns/_separator.scss @@ -28,7 +28,7 @@ } .separator__separator { - border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid #d1d5db; height: 1px; width: 100%; } \ No newline at end of file diff --git a/styles/patterns/_teardrop.scss b/styles/patterns/_teardrop.scss index 418acfd..a747254 100644 --- a/styles/patterns/_teardrop.scss +++ b/styles/patterns/_teardrop.scss @@ -5,7 +5,7 @@ justify-content: center; /* Border */ - border: 2px solid rgba(0, 0, 0, 0.3); + border: 2px solid #d1d5db; border-radius: 0px 50% 50% 50%; /* Angle at the top */ diff --git a/styles/patterns/_triangle-buttons.scss b/styles/patterns/_triangle-buttons.scss index c4437e4..a082671 100644 --- a/styles/patterns/_triangle-buttons.scss +++ b/styles/patterns/_triangle-buttons.scss @@ -7,22 +7,22 @@ } .triangle-buttons__triangle--t { - border-color: transparent transparent rgba(0, 0, 0, 0.3); + border-color: transparent transparent #d1d5db; border-width: 0 0.5rem 0.5rem; } .triangle-buttons__triangle--r { - border-color: transparent transparent transparent rgba(0, 0, 0, 0.3); + border-color: transparent transparent transparent #d1d5db; border-width: 0.5rem 0 0.5rem 0.5rem; } .triangle-buttons__triangle--b { - border-color: rgba(0, 0, 0, 0.3) transparent transparent; + border-color: #d1d5db transparent transparent; border-width: 0.5rem 0.5rem 0; } .triangle-buttons__triangle--l { - border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent; + border-color: transparent #d1d5db transparent transparent; border-width: 0.5rem 0.5rem 0.5rem 0; } diff --git a/styles/patterns/_voting.scss b/styles/patterns/_voting.scss index 9bc3598..4c2738e 100644 --- a/styles/patterns/_voting.scss +++ b/styles/patterns/_voting.scss @@ -1,5 +1,5 @@ .voting { - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid #d1d5db; border-radius: 0.25rem; display: flex; flex-direction: column; @@ -33,12 +33,12 @@ } .voting__triangle--up { - border-color: transparent transparent rgba(0, 0, 0, 0.3); + border-color: transparent transparent #d1d5db; border-width: 0 0.5rem 0.5rem; } .voting__triangle--down { - border-color: rgba(0, 0, 0, 0.3) transparent transparent; + border-color: #d1d5db transparent transparent; border-width: 0.5rem 0.5rem 0px; }