From 91667175efaca3a51c6cdc0eaf229028d11ccd86 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 18 Aug 2026 20:47:59 +0200 Subject: [PATCH 1/4] [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/4] [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/4] [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", From 73a307faba65ee8fb04aff7acdb6b4bffead1cb1 Mon Sep 17 00:00:00 2001 From: Slizhevsky Vladislav Date: Mon, 31 Aug 2026 16:13:41 +0200 Subject: [PATCH 4/4] [UIK-5669][accordion] accordion rebranding/styles refactoring/stories update --- semcore/accordion/src/Accordion.tsx | 28 ++- .../accordion/src/style/accordion.shadow.css | 167 ++++++++++-------- .../accordion/docs/examples/basic_usage.tsx | 5 +- .../accordion/docs/examples/heading_tag.tsx | 5 +- .../docs/examples/one_section_opening.tsx | 5 +- .../docs/examples/primary_accordion.tsx | 5 +- .../accordion/docs/examples/seo.tsx | 4 +- .../examples/accordion-collapse-duration.tsx | 23 ++- .../tests/examples/button-on-toggle.tsx | 6 +- .../tests/examples/default-values.tsx | 9 +- .../accordion/tests/examples/values.tsx | 9 +- 11 files changed, 140 insertions(+), 126 deletions(-) diff --git a/semcore/accordion/src/Accordion.tsx b/semcore/accordion/src/Accordion.tsx index 8171fcb517..738168b940 100644 --- a/semcore/accordion/src/Accordion.tsx +++ b/semcore/accordion/src/Accordion.tsx @@ -1,4 +1,4 @@ -import { Collapse as CollapseAnimate, Flex } from '@semcore/base-components'; +import { Collapse as CollapseAnimate, Flex, Box } from '@semcore/base-components'; import type { Intergalactic } from '@semcore/core'; import { createComponent, Component, sstyled, Root } from '@semcore/core'; import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID'; @@ -70,8 +70,10 @@ class RootAccordion extends Component< } render() { - const { Children } = this.asProps; - return ; + const SAccordion = Root; + const { styles } = this.asProps; + + return sstyled(styles)(); } } export class RootItem extends Component< @@ -131,8 +133,10 @@ export class RootItem extends Component< } render() { - const { Children } = this.asProps; - return ; + const SAccordionItem = Root; + const { styles } = this.asProps; + + return sstyled(styles)(); } } @@ -198,17 +202,23 @@ function Collapse( 'Collapse' >, ) { - const { selected } = props; + const SItemCollapse = Root; + const SItemCollapseContainer = Box; + const { selected, styles, Children } = props; const visible = selected; - return ( - + > + + + + , ); } diff --git a/semcore/accordion/src/style/accordion.shadow.css b/semcore/accordion/src/style/accordion.shadow.css index 7307f8c15e..ced891a2f1 100644 --- a/semcore/accordion/src/style/accordion.shadow.css +++ b/semcore/accordion/src/style/accordion.shadow.css @@ -1,5 +1,6 @@ -SItemToggle[use][use='primary']:not(:first-child) { - margin-top: var(--intergalactic-spacing-content-gap-xsmall, 2px); +SAccordion { + flex-direction: column; + gap: var(--intergalactic-spacing-content-gap-xsmall); } SItemToggle { @@ -7,87 +8,51 @@ SItemToggle { align-items: center; position: relative; cursor: pointer; -} - -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)); - 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-border-accent, oklch(0.23 0.01 140)); -} + &[use='primary'] { + background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180)); + 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[disabled] { - opacity: var(--intergalactic-disabled-opacity, 0.4); - cursor: default; -} + &:has(SItemChevron[selected]) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } -SItemToggle[use][use='primary'] SItemChevron { - 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); -} + &:hover { + background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.97 0.001 180)); + } -SItemToggle[use][use='secondary'] SItemChevron { - margin-right: var(--intergalactic-spacing-content-gap-small, 4px); + SItemChevron { + position: absolute; + top: 50%; + right: var(--intergalactic-spacing-content-padding-large, 16px); + flex-shrink: 0; + transform: translateY(-50%) rotate(0deg); + + &[selected] { + transform: translateY(-50%) rotate(90deg); + } + } + } + + &[use='secondary'] { + padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xxsmall, 2px); + + SItemChevron { + margin-right: var(--intergalactic-spacing-content-gap-small, 4px); + } + } + + &[disabled] { + opacity: var(--intergalactic-disabled-opacity, 0.4); + cursor: default; + } } SItemChevron { @@ -100,12 +65,58 @@ SItemChevron { } } +SAccordionItem { + &[use='primary'] { + position: relative; + overflow: clip; + border-radius: var(--intergalactic-surface-rounded, 8px); + background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180)); + + &::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 2px; + z-index: 1; + opacity: 0; + background-color: var(--intergalactic-border-accent, oklch(0.23 0.01 140)); + transition-property: opacity; + transition-timing-function: var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)); + } + + &[selected] { + &::before { + opacity: 1; + } + } + + &[duration] { + &::before { + transition-duration: calc(var(--duration) * 1ms); + } + } + } +} + + +SItemCollapse { + &[visible] { + border-left: 2px solid var(--intergalactic-border-accent, oklch(0.23 0.01 140)); + } +} + +SItemCollapseContainer { + padding: var(--intergalactic-spacing-content-padding-medium) var(--intergalactic-spacing-content-padding-xlarge); +} + @media (prefers-reduced-motion) { SItemChevron { transition: none; } - SItemToggle[use][use='primary']::before { + SItemToggle[use='primary']::before { transition: none; } } diff --git a/stories/components/accordion/docs/examples/basic_usage.tsx b/stories/components/accordion/docs/examples/basic_usage.tsx index dd4b5de9ac..6d835f1e4f 100644 --- a/stories/components/accordion/docs/examples/basic_usage.tsx +++ b/stories/components/accordion/docs/examples/basic_usage.tsx @@ -1,6 +1,5 @@ import Accordion from '@semcore/ui/accordion'; import type { NSAccordion } from '@semcore/ui/accordion'; -import { Box } from '@semcore/ui/base-components'; import type { NSBox } from '@semcore/ui/base-components'; import React from 'react'; @@ -13,7 +12,7 @@ const Demo = (props: ExampleAccordionProps) => { onChange(value)} duration={props.duration} use={props.use}> {[...new Array(3)].map((_, index) => ( - + Section @@ -22,7 +21,7 @@ const Demo = (props: ExampleAccordionProps) => { - {`This is section ${index + 1}`} + This is section {index + 1} ))} diff --git a/stories/components/accordion/docs/examples/heading_tag.tsx b/stories/components/accordion/docs/examples/heading_tag.tsx index 59d96c2406..5a394131bc 100644 --- a/stories/components/accordion/docs/examples/heading_tag.tsx +++ b/stories/components/accordion/docs/examples/heading_tag.tsx @@ -1,5 +1,4 @@ import Accordion from '@semcore/ui/accordion'; -import { Box } from '@semcore/ui/base-components'; import React from 'react'; const Demo = () => { @@ -8,7 +7,7 @@ const Demo = () => { {[...new Array(3)].map((_, index) => ( - + Section @@ -17,7 +16,7 @@ const Demo = () => { - {`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 00824538b0..23b887de21 100644 --- a/stories/components/accordion/docs/examples/one_section_opening.tsx +++ b/stories/components/accordion/docs/examples/one_section_opening.tsx @@ -1,5 +1,4 @@ import Accordion from '@semcore/ui/accordion'; -import { Box } from '@semcore/ui/base-components'; import React from 'react'; const Demo = () => { @@ -8,7 +7,7 @@ const Demo = () => { {[...new Array(3)].map((_, index) => ( - + Section @@ -17,7 +16,7 @@ const Demo = () => { - {`This is section ${index + 1}`} + This is section {index + 1} ))} diff --git a/stories/components/accordion/docs/examples/primary_accordion.tsx b/stories/components/accordion/docs/examples/primary_accordion.tsx index 8305aa2c3c..25ece19ef5 100644 --- a/stories/components/accordion/docs/examples/primary_accordion.tsx +++ b/stories/components/accordion/docs/examples/primary_accordion.tsx @@ -1,5 +1,4 @@ import Accordion from '@semcore/ui/accordion'; -import { Box } from '@semcore/ui/base-components'; import React from 'react'; const Demo = () => { @@ -7,7 +6,7 @@ const Demo = () => { {[...new Array(3)].map((_, index) => ( - + Section @@ -16,7 +15,7 @@ const Demo = () => { - {`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 d5798e8ffc..6031e8c71a 100644 --- a/stories/components/accordion/docs/examples/seo.tsx +++ b/stories/components/accordion/docs/examples/seo.tsx @@ -9,7 +9,7 @@ const Demo = () => { onChange(value)}> {[...new Array(3)].map((_, index) => ( - + Section @@ -18,7 +18,7 @@ const Demo = () => { - + {`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 7e7e80c001..dc9eedfa32 100644 --- a/stories/components/accordion/tests/examples/accordion-collapse-duration.tsx +++ b/stories/components/accordion/tests/examples/accordion-collapse-duration.tsx @@ -9,21 +9,20 @@ const Demo = () => { <> - + Duration 500 - Hello Section - Hello Section + Hello Section + Hello Section { setTimeout(() => { if (value === 1) { @@ -42,34 +41,34 @@ const Demo = () => { - Hello Section - Hello Section + Hello Section + Hello Section - + Duration 0 - Hello Section - Hello Section + Hello Section + Hello Section - + Default - Hello Section - Hello Section + Hello Section + Hello Section diff --git a/stories/components/accordion/tests/examples/button-on-toggle.tsx b/stories/components/accordion/tests/examples/button-on-toggle.tsx index b9898e7d6e..32ee06bab0 100644 --- a/stories/components/accordion/tests/examples/button-on-toggle.tsx +++ b/stories/components/accordion/tests/examples/button-on-toggle.tsx @@ -3,8 +3,6 @@ import Button from '@semcore/ui/button'; import React from 'react'; const Demo = () => { - const [value, onChange] = React.useState([0]); - return ( {[...new Array(2)].map((_, index) => { @@ -12,7 +10,9 @@ const Demo = () => { -
{`Toggle ${index + 1}`}
+ Toggle + {' '} + {index + 1}