From 5c1d29f53a26330c7cb1229edfa33ecfaf26cc08 Mon Sep 17 00:00:00 2001 From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com> Date: Wed, 19 Mar 2025 13:26:53 +0000 Subject: [PATCH] Add purple color variant to chip component --- base-styles.css | 184 ++++++---------------------------------- website/examples/all.md | 3 + 2 files changed, 27 insertions(+), 160 deletions(-) diff --git a/base-styles.css b/base-styles.css index e10a455..8aea25c 100644 --- a/base-styles.css +++ b/base-styles.css @@ -1,6 +1,4 @@ :root { - - /* Shared Core */ --ui-shared-font-family: "Plus Jakarta Sans"; --ui-shared-font-family-headings: "Plus Jakarta Sans"; --ui-shared-color-alpha: #0090ff; @@ -10,7 +8,6 @@ --ui-input-border-width: 2px; --ui-shared-element-border-radius: 7px; - /* Shared */ --ui-shared-element-height: 40px; --ui-shared-element-height-sm: 32px; --ui-shared-element-height-xs: 24px; @@ -35,7 +32,6 @@ --ui-shared-page-bg-color: #f8f8f8; --ui-shared-text-color-primary: var(--ui-color-gray-600); - /* Colors */ --ui-color-gray-50: #f9fafb; --ui-color-gray-100: #f3f4f6; --ui-color-gray-200: #e5e7eb; @@ -60,8 +56,10 @@ --ui-color-blue-50: #eff6ff; --ui-color-blue-700: #1c4ed8; --ui-color-blue-700-10: #1c4ed81a; + --ui-color-purple-50: #f5f3ff; + --ui-color-purple-700: #6d28d9; + --ui-color-purple-600-10: #7c3aed1a; - /* Buttons */ --ui-button-color-bg: transparent; --ui-button-color-solid-bg: var(--ui-shared-color-alpha); --ui-button-color-minimal-bg: var(--ui-color-gray-100); @@ -83,7 +81,6 @@ --ui-button-padding-xs: var(--ui-shared-element-padding-xs); --ui-button-border-radius: var(--ui-shared-element-border-radius); - /* Inputs */ --ui-input-placeholder-color: var(--ui-color-gray-400); --ui-input-padding: 0 10px; --ui-input-padding-small-screens: 0 8px; @@ -99,7 +96,6 @@ --ui-input-border-color: var(--ui-color-gray-200); --ui-input-border-color-focus: var(--ui-shared-color-alpha); - /* Modals */ --ui-modal-overlay-color: rgba(0, 0, 0, 0.5); --ui-modal-overlay-opacity: 0.8; --ui-modal-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); @@ -113,7 +109,6 @@ --ui-modal-max-width-xl: 800px; --ui-modal-max-width-2xl: 1000px; - /* Title Pair */ --ui-title-pair-color-title: var(--ui-color-gray-900); --ui-title-pair-color-description: var(--ui-color-gray-500); --ui-title-pair-title-font-size: 14px; @@ -129,7 +124,6 @@ --ui-title-pair-description-font-size-xl: 14px; --ui-title-pair-description-line-height-xl: 20px; - /* Table */ --ui-table-line-height: 45px; --ui-table-thead-background: none; @@ -140,7 +134,6 @@ --ui-table-cell-border-bottom: 1px solid var(--ui-color-grey-300); --ui-table-striped-row-even-background-color: var(--ui-color-gray-100); - /* Box */ --ui-box-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); --ui-box-border: none; --ui-box-border-radius: 10px; @@ -148,13 +141,11 @@ --ui-box-background: #fff; --ui-box-separator-border: 2px solid var(--ui-color-gray-100); - /* Eyebrow */ --ui-eyebrow-font-size: 10px; --ui-eyebrow-font-family: var(--ui-font-family-headings); --ui-eyebrow-letter-spacing: 0.5px; --ui-eyebrow-text-color: var(--ui-title-pair-color-description); - /* Switch */ --ui-switch-border-radius: var(--ui-border-radius-rounded); --ui-switch-bg-color: var(--ui-color-gray-200); --ui-switch-bg-color-hover: var(--ui-color-gray-300); @@ -168,7 +159,6 @@ --ui-switch-height-lg: 32px; --ui-switch-button-dimension-lg: 24px; - /* Checkbox */ --ui-checkbox-dimension: 20px; --ui-checkbox-border-width: var(--ui-input-border-width); --ui-checkbox-border-radius: var(--ui-border-radius); @@ -176,7 +166,6 @@ --ui-checkbox-border-color: var(--ui-input-border-color); --ui-checkbox-text-color-checked: var(--ui-shared-color-alpha-foreground); - /* Chip */ --ui-chip-bg-color: transparent; --ui-chip-text-color: var(--ui-text-color-primary); --ui-chip-border-color: var(--ui-input-border-color); @@ -192,16 +181,13 @@ --ui-chip-icon-dimension-sm: 14px; --ui-chip-icon-dimension-lg: 18px; - /* Sidebar */ --ui-sidebar-border-width: 1px; --ui-sidebar-border-color: var(--ui-color-gray-200); --ui-sidebar-active-item-bg-color: var(--ui-shared-color-alpha); - /* Tab Navigation */ --ui-tabnav-border-width: 2px; --ui-tabnav-border-color-active: var(--ui-color-gray-800); - /* Toasts */ --ui-toasts-position-top: 20px; --ui-toasts-position-right: 20px; --ui-toasts-max-width: 300px; @@ -212,11 +198,9 @@ --ui-toasts-toast-color-title: var(--ui-title-pair-color-title); --ui-toasts-toast-color-description: var(--ui-title-pair-color-description); - /* Search Input */ --ui-search-input-border-width: var(--ui-input-border-width); --ui-search-input-border-radius: 40px; - /* Floating Labels */ --ui-floating-label-color: var(--ui-color-gray-900); --ui-floating-label-color-placeholder: var(--ui-color-gray-400); --ui-floating-label-padding-left: 0.8rem; @@ -224,7 +208,6 @@ --ui-floating-label-collapsed-padding: 2px 4px; --ui-floating-label-bg-color: #fff; - /* Styled Text */ --ui-styled-text-code-background-inline: #efefef; --ui-styled-text-code-color-inline: var(--ui-shared-text-color-primary); --ui-styled-text-code-background: #191919; @@ -238,7 +221,6 @@ --ui-styled-text-blockquote-background: var(--ui-color-gray-100); --ui-styled-text-blockquote-border-radius: var(--ui-shared-element-border-radius); - /* Tooltips */ --ui-tooltip-background-color: var(--ui-color-gray-900); --ui-tooltip-text-color: #fff; --ui-tooltip-font-size: 0.85rem; @@ -247,7 +229,6 @@ --ui-tooltip-padding: 8px; --ui-tooltip-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); - /* Container */ --ui-container-max-width: 1024px; --ui-container-max-width-xs: 480px; --ui-container-max-width-sm: 640px; @@ -264,17 +245,6 @@ body { font-size: 15px; } -/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */ - -/* -Document -======== -*/ - -/** -Use a better box model (opinionated). -*/ - *, ::before, ::after { @@ -282,7 +252,6 @@ Use a better box model (opinionated). } html { - /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */ font-family: system-ui, 'Segoe UI', @@ -292,39 +261,20 @@ html { sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; - line-height: 1.15; /* 1. Correct the line height in all browsers. */ - -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */ - tab-size: 4; /* 3. Use a more readable tab size (opinionated). */ + line-height: 1.15; + -webkit-text-size-adjust: 100%; + tab-size: 4; } -/* -Sections -======== -*/ - body { - margin: 0; /* Remove the margin in all browsers. */ + margin: 0; } -/* -Text-level semantics -==================== -*/ - -/** -Add the correct font weight in Chrome and Safari. -*/ - b, strong { font-weight: bolder; } -/** -1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -2. Correct the odd 'em' font sizing in all browsers. -*/ - code, kbd, samp, @@ -335,22 +285,14 @@ pre { Consolas, 'Liberation Mono', Menlo, - monospace; /* 1 */ - font-size: 1em; /* 2 */ + monospace; + font-size: 1em; } -/** -Add the correct font size in all browsers. -*/ - small { font-size: 80%; } -/** -Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. -*/ - sub, sup { font-size: 75%; @@ -367,44 +309,21 @@ sup { top: -0.5em; } -/* -Tabular data -============ -*/ - -/** -Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016) -*/ - table { border-color: currentcolor; } -/* -Forms -===== -*/ - -/** -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -*/ - button, input, optgroup, select, textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0; } -/** -Correct the inability to style clickable types in iOS and Safari. -*/ - button, [type='button'], [type='reset'], @@ -416,68 +335,33 @@ button, input, select, textarea { border-style: solid; } -/** -Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. -*/ - legend { padding: 0; } -/** -Add the correct vertical alignment in Chrome and Firefox. -*/ - progress { vertical-align: baseline; } -/** -Correct the cursor style of increment and decrement buttons in Safari. -*/ - ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } -/** -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - [type='search'] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ + -webkit-appearance: textfield; + outline-offset: -2px; } -/** -Remove the inner padding in Chrome and Safari on macOS. -*/ - ::-webkit-search-decoration { -webkit-appearance: none; } -/** -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to 'inherit' in Safari. -*/ - ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ + -webkit-appearance: button; + font: inherit; } -/* -Interactive -=========== -*/ - -/* -Add the correct display in Chrome and Safari. -*/ - summary { display: list-item; } @@ -521,7 +405,6 @@ h6 { line-height: var(--ui-input-line-height); } -/* Forms */ .ui-form label:not(.no-style) { line-height: 2.5rem; font-weight: var(--ui-font-weight-bold); @@ -1044,7 +927,7 @@ form.htmx-request [type="submit"] .shown-while-loading { button, a { display: flex; - justify-items: center; /* For Icon Alignment */ + justify-items: center; transition-property: background-color; transition-duration: 300ms; gap: 4px; @@ -1071,7 +954,7 @@ form.htmx-request [type="submit"] .shown-while-loading { button, a { cursor: pointer; - justify-items: center; /* For Icon Alignment */ + justify-items: center; transition-property: background-color; transition-duration: 300ms; gap: 4px; @@ -1309,8 +1192,6 @@ form.htmx-request [type="submit"] .shown-while-loading { margin: 20px 0; } -/* Tooltips powered by https://kushagra.dev/lab/tooltip/ */ - [class*=tooltip--] { position: relative; } @@ -1388,9 +1269,6 @@ form.htmx-request [type="submit"] .shown-while-loading { transform: translateX(-50%) translateY(-8px); } -/** - * bottom tooltip - */ .ui-tooltip--bottom { --rotation: -45deg; } @@ -1415,9 +1293,6 @@ form.htmx-request [type="submit"] .shown-while-loading { transform: translateX(-50%) translateY(8px); } -/** - * right tooltip - */ .ui-tooltip--right { --rotation: -135deg; } @@ -1440,9 +1315,6 @@ form.htmx-request [type="submit"] .shown-while-loading { transform: translateX(8px); } -/** - * left tooltip - */ .ui-tooltip--left { --rotation: 45deg; } @@ -1465,9 +1337,6 @@ form.htmx-request [type="submit"] .shown-while-loading { transform: translateX(-8px); } -/** - * top-left tooltip - */ .ui-tooltip--top-left { --rotation: 135deg; } @@ -1495,9 +1364,6 @@ form.htmx-request [type="submit"] .shown-while-loading { transform: translateX(-100%) translateY(-8px); } -/** - * top-right tooltip - */ .ui-tooltip--top-right { --rotation: 135deg; } @@ -1525,9 +1391,6 @@ form.htmx-request [type="submit"] .shown-while-loading { transform: translateY(-8px); } -/** - * bottom-left tooltip - */ .ui-tooltip--bottom-left { --rotation: -45deg; } @@ -1555,9 +1418,6 @@ form.htmx-request [type="submit"] .shown-while-loading { transform: translateX(-100%) translateY(8px); } -/** - * bottom-right tooltip - */ .ui-tooltip--bottom-right { --rotation: -45deg; } @@ -2062,6 +1922,11 @@ form.htmx-request [type="submit"] .shown-while-loading { border-color: var(--ui-color-blue-600-10); color: var(--ui-color-blue-700); } + &.--purple { + background-color: var(--ui-color-purple-50); + border-color: var(--ui-color-purple-600-10); + color: var(--ui-color-purple-700); + } } .ui-table { @@ -2093,7 +1958,6 @@ form.htmx-request [type="submit"] .shown-while-loading { &.--bravo { --ui-table-cell-border: 1px solid var(--ui-color-gray-300); } - } .ui-expander { diff --git a/website/examples/all.md b/website/examples/all.md index 1d696bd..d9d2dfa 100644 --- a/website/examples/all.md +++ b/website/examples/all.md @@ -430,6 +430,7 @@ Eyebrows are capitalised section headings.
Yellow
Red
Blue
+
Purple
@@ -438,6 +439,7 @@ Eyebrows are capitalised section headings.
Yellow
Red
Blue
+
Purple
@@ -446,6 +448,7 @@ Eyebrows are capitalised section headings.
Yellow
Red
Blue
+
Purple