From 91667175efaca3a51c6cdc0eaf229028d11ccd86 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 18 Aug 2026 20:47:59 +0200 Subject: [PATCH 1/3] [accordion] update styles Co-authored-by: Cursor --- .../accordion/src/style/accordion.shadow.css | 72 +++++++++++++++++-- 1 file changed, 67 insertions(+), 5 deletions(-) diff --git a/semcore/accordion/src/style/accordion.shadow.css b/semcore/accordion/src/style/accordion.shadow.css index 15576cca46..7c52d655e8 100644 --- a/semcore/accordion/src/style/accordion.shadow.css +++ b/semcore/accordion/src/style/accordion.shadow.css @@ -1,3 +1,7 @@ +SItemToggle[use][use='primary']:not(:first-child) { + margin-top: var(--intergalactic-spacing-content-gap-xsmall, 2px); +} + SItemToggle { display: flex; align-items: center; @@ -9,25 +13,79 @@ SItemToggle[use][use] { color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); font-weight: var(--intergalactic-regular, 400); } + SItemToggle[use][use='primary'] { + box-sizing: border-box; + overflow: clip; background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180)); - padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px); - margin-bottom: var(--intergalactic-spacing-05x, 2px); + border-radius: var(--intergalactic-surface-rounded, 8px); + padding: var(--intergalactic-spacing-content-padding-small, 8px) + var(--intergalactic-spacing-content-padding-large, 16px) + var(--intergalactic-spacing-content-padding-small, 8px) + var(--intergalactic-spacing-content-padding-xlarge, 20px); +} +SItemToggle[use][use='primary']:has(SItemChevron[selected]) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } SItemToggle[use][use='primary']:hover { background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.97 0.001 180)); } +SItemToggle[use][use='primary']::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 2px; + z-index: 1; + background-color: var(--intergalactic-border-accent, oklch(0.23 0.01 140)); + opacity: 0; + transition: opacity calc(var(--intergalactic-duration-accordion, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)); +} +SItemToggle[use][use='primary']:has(SItemChevron[selected])::before { + opacity: 1; +} +SItemToggle[use][use='primary']:has(SItemChevron[selected]) + * { + position: relative; + overflow: clip; + background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180)); + border-bottom-left-radius: var(--intergalactic-surface-rounded, 8px); + border-bottom-right-radius: var(--intergalactic-surface-rounded, 8px); +} +SItemToggle[use][use='primary']:has(SItemChevron[selected]) + *::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 2px; + z-index: 1; + background-color: var(--intergalactic-border-accent, oklch(0.23 0.01 140)); +} +SItemToggle[use][use='secondary'] { + padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xxsmall, 2px); +} +SItemToggle[use][use='secondary']:has(SItemChevron[selected]) + * { + border-left: 2px solid var(--intergalactic-brand-secondary, oklch(0.22 0.01 140)); +} SItemToggle[disabled] { opacity: var(--intergalactic-disabled-opacity, 0.4); cursor: default; } +SItemToggle[use][use='primary'] SItemChevron { + order: 1; + margin-left: auto; + margin-right: 0; +} + SItemChevron { - margin-right: var(--intergalactic-spacing-2x, 8px); + margin-right: var(--intergalactic-spacing-content-gap-small, 4px); transform: rotate(0deg); - transition: transform calc(var(--intergalactic-duration-accordion, 200) * 1ms) ease-out; - fill: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526)); + transition: calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)); + fill: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); &[selected] { transform: rotate(90deg); @@ -38,4 +96,8 @@ SItemChevron { SItemChevron { transition: none; } + + SItemToggle[use][use='primary']::before { + transition: none; + } } From cc0866c1a2726e598c0bf400531d373f43454f90 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 18 Aug 2026 21:26:30 +0200 Subject: [PATCH 2/3] [accordion] update styles and component --- playground/components/ControlPanel.tsx | 2 +- .../accordion/src/style/accordion.shadow.css | 16 +++-- .../accordion/docs/Accordion.stories.tsx | 12 ++-- .../accordion/docs/examples/basic_usage.tsx | 4 +- .../accordion/docs/examples/custom_styles.tsx | 61 ------------------- .../accordion/docs/examples/heading_tag.tsx | 4 +- .../docs/examples/one_section_opening.tsx | 4 +- ...{non_compact.tsx => primary_accordion.tsx} | 4 +- .../accordion/docs/examples/seo.tsx | 4 +- .../examples/accordion-collapse-duration.tsx | 8 +-- .../tests/examples/default-values.tsx | 8 +-- .../accordion/tests/examples/values.tsx | 8 +-- .../advanced/components/Components/index.tsx | 4 +- .../components/Form/FormCards.tsx | 4 +- .../components/accordion/accordion-code.md | 18 +----- .../style/design-tokens/design-tokens.json | 19 ++++-- 16 files changed, 60 insertions(+), 120 deletions(-) delete mode 100644 stories/components/accordion/docs/examples/custom_styles.tsx rename stories/components/accordion/docs/examples/{non_compact.tsx => primary_accordion.tsx} (86%) diff --git a/playground/components/ControlPanel.tsx b/playground/components/ControlPanel.tsx index 054f9ef0bc..3f0bbb282b 100644 --- a/playground/components/ControlPanel.tsx +++ b/playground/components/ControlPanel.tsx @@ -44,7 +44,7 @@ function GroupControl({ groupName, controls, groupPropName, onControlChange, isO - + {groupName} diff --git a/semcore/accordion/src/style/accordion.shadow.css b/semcore/accordion/src/style/accordion.shadow.css index 7c52d655e8..a4644c506f 100644 --- a/semcore/accordion/src/style/accordion.shadow.css +++ b/semcore/accordion/src/style/accordion.shadow.css @@ -76,13 +76,21 @@ SItemToggle[disabled] { } SItemToggle[use][use='primary'] SItemChevron { - order: 1; - margin-left: auto; - margin-right: 0; + position: absolute; + top: 50%; + right: var(--intergalactic-spacing-content-padding-large, 16px); + flex-shrink: 0; + transform: translateY(-50%) rotate(0deg); +} +SItemToggle[use][use='primary'] SItemChevron[selected] { + transform: translateY(-50%) rotate(90deg); } -SItemChevron { +SItemToggle[use][use='secondary'] SItemChevron { margin-right: var(--intergalactic-spacing-content-gap-small, 4px); +} + +SItemChevron { transform: rotate(0deg); transition: calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)); fill: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); diff --git a/stories/components/accordion/docs/Accordion.stories.tsx b/stories/components/accordion/docs/Accordion.stories.tsx index 6066e692ca..472ee37df3 100644 --- a/stories/components/accordion/docs/Accordion.stories.tsx +++ b/stories/components/accordion/docs/Accordion.stories.tsx @@ -3,10 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import { BasicUsageTest } from './__tests__/basic-usage.test'; import BasicExample, { defaultProps as BasicExampleProps } from './examples/basic_usage'; -import CustomStylesExample from './examples/custom_styles'; import HeadingTagExample from './examples/heading_tag'; -import NonCompactExample from './examples/non_compact'; import OneSectionOpeningExample from './examples/one_section_opening'; +import PrimaryAccordionExample from './examples/primary_accordion'; import SeoExample from './examples/seo'; import { playWrapper } from '../../../utils/playWrapper'; @@ -46,16 +45,13 @@ export const Basic: StoryObj = { play: playWrapper(BasicUsageTest), }; -export const CustomStyles: Story = { - render: CustomStylesExample, -}; - export const HeadingTag: Story = { render: HeadingTagExample, }; -export const NonCompact: Story = { - render: NonCompactExample, +export const PrimaryAccordion: Story = { + name: 'Primary accordion', + render: PrimaryAccordionExample, }; export const OneSectionOpening: Story = { diff --git a/stories/components/accordion/docs/examples/basic_usage.tsx b/stories/components/accordion/docs/examples/basic_usage.tsx index 04f7356cab..dd4b5de9ac 100644 --- a/stories/components/accordion/docs/examples/basic_usage.tsx +++ b/stories/components/accordion/docs/examples/basic_usage.tsx @@ -15,14 +15,14 @@ const Demo = (props: ExampleAccordionProps) => { - + Section {' '} {index + 1} - {`This is section ${index + 1}`} + {`This is section ${index + 1}`} ))} diff --git a/stories/components/accordion/docs/examples/custom_styles.tsx b/stories/components/accordion/docs/examples/custom_styles.tsx deleted file mode 100644 index 0c7b3211cc..0000000000 --- a/stories/components/accordion/docs/examples/custom_styles.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import Accordion from '@semcore/ui/accordion'; -import { Box } from '@semcore/ui/base-components'; -import React from 'react'; - -const cn = (...classes: any[]) => classes.filter(Boolean).join(' '); - -const Demo = () => { - return ( - <> - - - {[...new Array(3)].map((_, index) => ( - - {({ selected }) => ( - <> - - - - Section - {' '} - {index + 1} - - - - {`This is section ${index + 1}`} - - - )} - - ))} - - - ); -}; - -export default Demo; diff --git a/stories/components/accordion/docs/examples/heading_tag.tsx b/stories/components/accordion/docs/examples/heading_tag.tsx index cb09114e45..59d96c2406 100644 --- a/stories/components/accordion/docs/examples/heading_tag.tsx +++ b/stories/components/accordion/docs/examples/heading_tag.tsx @@ -10,14 +10,14 @@ const Demo = () => { - + Section {' '} {index + 1} - {`This is section ${index + 1}`} + {`This is section ${index + 1}`} ))} diff --git a/stories/components/accordion/docs/examples/one_section_opening.tsx b/stories/components/accordion/docs/examples/one_section_opening.tsx index 0c53f42415..00824538b0 100644 --- a/stories/components/accordion/docs/examples/one_section_opening.tsx +++ b/stories/components/accordion/docs/examples/one_section_opening.tsx @@ -10,14 +10,14 @@ const Demo = () => { - + Section {' '} {index + 1} - {`This is section ${index + 1}`} + {`This is section ${index + 1}`} ))} diff --git a/stories/components/accordion/docs/examples/non_compact.tsx b/stories/components/accordion/docs/examples/primary_accordion.tsx similarity index 86% rename from stories/components/accordion/docs/examples/non_compact.tsx rename to stories/components/accordion/docs/examples/primary_accordion.tsx index f747171690..8305aa2c3c 100644 --- a/stories/components/accordion/docs/examples/non_compact.tsx +++ b/stories/components/accordion/docs/examples/primary_accordion.tsx @@ -9,14 +9,14 @@ const Demo = () => { - + Section {' '} {index + 1} - {`This is section ${index + 1}`} + {`This is section ${index + 1}`} ))} diff --git a/stories/components/accordion/docs/examples/seo.tsx b/stories/components/accordion/docs/examples/seo.tsx index 3fb1a3930e..d5798e8ffc 100644 --- a/stories/components/accordion/docs/examples/seo.tsx +++ b/stories/components/accordion/docs/examples/seo.tsx @@ -11,14 +11,14 @@ const Demo = () => { - + Section {' '} {index + 1} - + {`This is section ${index + 1}`} , {' '} diff --git a/stories/components/accordion/tests/examples/accordion-collapse-duration.tsx b/stories/components/accordion/tests/examples/accordion-collapse-duration.tsx index fea2861dd1..7e7e80c001 100644 --- a/stories/components/accordion/tests/examples/accordion-collapse-duration.tsx +++ b/stories/components/accordion/tests/examples/accordion-collapse-duration.tsx @@ -11,7 +11,7 @@ const Demo = () => { - + Duration 500 @@ -37,7 +37,7 @@ const Demo = () => { }} > - + Duration 500 Delay 500 @@ -50,7 +50,7 @@ const Demo = () => { - + Duration 0 @@ -63,7 +63,7 @@ const Demo = () => { - + Default diff --git a/stories/components/accordion/tests/examples/default-values.tsx b/stories/components/accordion/tests/examples/default-values.tsx index 6c303cc390..ac34cff684 100644 --- a/stories/components/accordion/tests/examples/default-values.tsx +++ b/stories/components/accordion/tests/examples/default-values.tsx @@ -8,24 +8,24 @@ const Demo = () => { - + Section 1 - Hello Section 1 + Hello Section 1 - + Section "two" - Hello Section "two" + Hello Section "two" diff --git a/stories/components/accordion/tests/examples/values.tsx b/stories/components/accordion/tests/examples/values.tsx index 4d5cf937c3..6afa4b0b58 100644 --- a/stories/components/accordion/tests/examples/values.tsx +++ b/stories/components/accordion/tests/examples/values.tsx @@ -15,24 +15,24 @@ const Demo = () => { - + Number: 0 - Section with value = 0 (number) + Section with value = 0 (number) - + String: "one" - Section with value = "one" (string) + Section with value = "one" (string) diff --git a/stories/patterns/core/advanced/components/Components/index.tsx b/stories/patterns/core/advanced/components/Components/index.tsx index ad2bba833e..d82528b7a6 100644 --- a/stories/patterns/core/advanced/components/Components/index.tsx +++ b/stories/patterns/core/advanced/components/Components/index.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { PaywallMessage } from './PaywallMessage'; import HeadingTagAccordion from '../../../../../components/accordion/docs/examples/heading_tag'; -import NonCompactAccordion from '../../../../../components/accordion/docs/examples/non_compact'; +import PrimaryAccordion from '../../../../../components/accordion/docs/examples/primary_accordion'; import BadgeMainTypesExample from '../../../../../components/badge/docs/examples/badge_main_types'; import BreadcrumbsUsageExample from '../../../../../components/breadcrumbs/docs/examples/usage_example'; import ButtonAllButtons from '../../../../../components/button/advanced/examples/all-buttons'; @@ -115,7 +115,7 @@ export function Components() { FAQ - + Accordion with heading tag diff --git a/stories/patterns/core/tests/all-components/components/Form/FormCards.tsx b/stories/patterns/core/tests/all-components/components/Form/FormCards.tsx index 32417473f9..6d7b62a8a4 100644 --- a/stories/patterns/core/tests/all-components/components/Form/FormCards.tsx +++ b/stories/patterns/core/tests/all-components/components/Form/FormCards.tsx @@ -8,7 +8,7 @@ import { CardBodySkeleton } from './CardBodySkeleton'; import type { FormTabColumnStyle } from './form-utils'; import { RequestForm } from './RequestForm'; import HeadingTagAccordion from '../../../../../../components/accordion/docs/examples/heading_tag'; -import NonCompactAccordion from '../../../../../../components/accordion/docs/examples/non_compact'; +import PrimaryAccordion from '../../../../../../components/accordion/docs/examples/primary_accordion'; import BulkTextareaBasicExample from '../../../../../../components/bulk-textarea/docs/examples/basic-usage'; import CarouselStory from '../../../../../../components/carousel/docs/examples/carousel_with_default_indicators'; import { PaywallMessage } from '../../../../advanced/components/Components/PaywallMessage'; @@ -44,7 +44,7 @@ export function FormCards({ columnStyle, contentReady }: FormCardsProps) { - + Accordion with heading tag diff --git a/website/docs/components/accordion/accordion-code.md b/website/docs/components/accordion/accordion-code.md index bf9c67cb70..0ff525a78e 100644 --- a/website/docs/components/accordion/accordion-code.md +++ b/website/docs/components/accordion/accordion-code.md @@ -43,28 +43,14 @@ By default, `Accordion.Item.Toggle` is set to an `h3` heading level, but you can ::: -## Primary theme +## Primary accordion Pass `use='primary'` to enable the primary theme for the accordion. ::: sandbox - -::: - -## Custom styles for selected toggle - -You can customize accordion styles if needed. - -For example, to find out whether an element is selected and to highlight it, pass the function into the body of the element. - -::: sandbox - - ::: diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 466b219300..0f74257dab 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -505,7 +505,9 @@ "name": "--intergalactic-border-accent", "value": "oklch(0.23 0.01 140)", "description": "Accent border for the active and selected states..", - "components": [] + "components": [ + "accordion" + ] }, { "name": "--intergalactic-border-primary-invert", @@ -630,7 +632,9 @@ "name": "--intergalactic-brand-secondary", "value": "oklch(0.22 0.01 140)", "description": "Secondary brand accent for paired brand treatments (secondary marks, duo-tone lockups).", - "components": [] + "components": [ + "accordion" + ] }, { "name": "--intergalactic-brand-twitter", @@ -1730,7 +1734,6 @@ "value": "oklch(0.092 0.024 152.2 / 0.526)", "description": "Default icon weight on normal backgrounds—stronger emphasis than secondary icons.", "components": [ - "accordion", "carousel", "drag-and-drop", "feature-highlight", @@ -3299,6 +3302,7 @@ "value": "2px", "description": "Tiny padding for content inside controls and surfaces.", "components": [ + "accordion", "counter", "input-tags", "notice-bubble", @@ -3333,6 +3337,7 @@ "value": "8px", "description": "Small padding for content inside controls and surfaces.", "components": [ + "accordion", "base-components", "bulk-textarea", "dropdown", @@ -3365,6 +3370,7 @@ "value": "16px", "description": "Large padding for content inside controls and surfaces.", "components": [ + "accordion", "bulk-textarea", "feature-popover", "notice-bubble" @@ -3375,6 +3381,7 @@ "value": "20px", "description": "Extra large padding for content inside controls and surfaces.", "components": [ + "accordion", "bulk-textarea", "card" ] @@ -3399,13 +3406,16 @@ "name": "--intergalactic-spacing-content-gap-xsmall", "value": "2px", "description": "Extra small gap between content elements inside controls, rows, or columns.", - "components": [] + "components": [ + "accordion" + ] }, { "name": "--intergalactic-spacing-content-gap-small", "value": "4px", "description": "Small gap between content elements inside controls, rows, or columns.", "components": [ + "accordion", "base-trigger", "bulk-textarea", "date-picker", @@ -3601,6 +3611,7 @@ "value": "8px", "description": "Use for rounding surfaces like Card, blocks, widgets, Notice, etc.", "components": [ + "accordion", "card", "carousel", "d3-chart", From 1118b60158f9bf3b0cae80084c05b83d135b961e Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 18 Aug 2026 21:41:05 +0200 Subject: [PATCH 3/3] [accordion] update border variable --- semcore/accordion/src/style/accordion.shadow.css | 4 ++-- website/docs/style/design-tokens/design-tokens.json | 4 +--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/semcore/accordion/src/style/accordion.shadow.css b/semcore/accordion/src/style/accordion.shadow.css index a4644c506f..7307f8c15e 100644 --- a/semcore/accordion/src/style/accordion.shadow.css +++ b/semcore/accordion/src/style/accordion.shadow.css @@ -67,7 +67,7 @@ SItemToggle[use][use='secondary'] { padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xxsmall, 2px); } SItemToggle[use][use='secondary']:has(SItemChevron[selected]) + * { - border-left: 2px solid var(--intergalactic-brand-secondary, oklch(0.22 0.01 140)); + border-left: 2px solid var(--intergalactic-border-accent, oklch(0.23 0.01 140)); } SItemToggle[disabled] { @@ -92,7 +92,7 @@ SItemToggle[use][use='secondary'] SItemChevron { SItemChevron { transform: rotate(0deg); - transition: calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)); + transition: transform calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)); fill: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); &[selected] { diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 0f74257dab..62e880e5e2 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -632,9 +632,7 @@ "name": "--intergalactic-brand-secondary", "value": "oklch(0.22 0.01 140)", "description": "Secondary brand accent for paired brand treatments (secondary marks, duo-tone lockups).", - "components": [ - "accordion" - ] + "components": [] }, { "name": "--intergalactic-brand-twitter",