refactor(webapp): ds html (#9247)

cypress/support/step_definitions/UserProfile.SocialMedia/I_delete_the_social_media_link_{string}.js

@@ -7,6 +7,6 @@ defineStep('I delete the social media link {string}', (link) => {
     .should("be.visible")
   cy.get('[data-test="confirm-button"]')
     .click()
-  cy.get('.ds-list-item-content > a')
+  cy.get(`.ds-list-item a[href="${link}"]`)
     .should('not.exist')
 })

cypress/support/step_definitions/UserProfile.SocialMedia/I_have_added_the_social_media_link_{string}.js

@@ -8,6 +8,6 @@ defineStep('I have added the social media link {string}', (link) => {
     .type(link)
     .get('[data-test="add-save-button"]')
     .click()
-  cy.get('.ds-list-item-content > a')
+  cy.get('.ds-list-item a')
     .contains(link)
 })

packages/ui/KATALOG.md

@@ -9,46 +9,37 @@
 
 ### Übersicht
 ```
-Phase 0: Analyse    ██████████ 100% (8/8 Schritte)
-Phase 3: Migration  ██████████ 100% (132/132 Buttons) ✅
-───────────────────────────────────────────
-Phase 3 ABGESCHLOSSEN: M4a ✅, M4b ✅, M4c ✅ — 0 <base-button> verbleibend
+Phase 0: Analyse       ██████████ 100% (8/8 Schritte) ✅
+Phase 3: OsButton      ██████████ 100% (133/133 Buttons) ✅
+Phase 4: Tier 1        ██████████ 100% (OsButton, OsIcon, OsSpinner, OsCard) ✅
+Phase 4: Tier A → HTML ██████████ 100% (10 ds-* Wrapper → Plain HTML) ✅
+Phase 4: Tier B → HTML ░░░░░░░░░░   0% (ds-chip, ds-number, ds-grid, ds-radio)
+Phase 4: Tier 2-4      ░░░░░░░░░░   0% (OsModal, OsInput, OsMenu, OsSelect, OsTable)
 ```
 
 ### Statistiken
 | Metrik | Wert |
 |--------|------|
 | Webapp Komponenten | 139 |
-| Styleguide Komponenten | 38 |
+| Styleguide Komponenten | 38 (23 in Webapp genutzt) |
 | **Gesamt** | **177** |
-| Detailiert analysiert | 3 Familien (Button, Modal, Menu) |
-| Duplikate gefunden | 5 direkte + 3 Familien |
-| Zur Migration priorisiert | 15 Kern-Komponenten |
+| ✅ UI-Library | OsButton, OsIcon, OsSpinner, OsCard (4) |
+| ✅ → Plain HTML | Section, Placeholder, Tag, List, ListItem, Container, Heading, Text, Space, Flex, FlexItem (11) |
+| ⬜ → Plain HTML | Chip, Number, Grid, GridItem, Radio (5) — Tier B |
+| ⬜ → UI-Library | Modal, Input, Menu, MenuItem, Select, Table (6) — Tier 2-4 |
+| ⬜ Offen | Form (18 Dateien — HTML oder OsForm?) |
+| ⬜ Nicht in Webapp | Code, CopyField, FormItem, InputError, InputLabel, Page, PageTitle, Logo, Avatar, TableCol, TableHeadCol (11) |
 
 ### OsButton Migration (Phase 3) ✅
-| Status | Anzahl | Details |
-|--------|--------|---------|
-| ✅ Migriert | 132 | 78 Dateien, alle `<base-button>` ersetzt |
-| ⬜ Verbleibend | 0 | Nur BaseButton.vue Definition + Test/Snapshot-Dateien |
-| **Gesamt** | **132** | **100% erledigt** |
 
-**Alle 132 Buttons migriert in 78 Dateien ✅**
-
-Migration vollständig abgeschlossen. 0 `<base-button>` Tags verbleiben in Vue-Templates.
+**133 Buttons migriert in 79 Dateien ✅** — BaseButton.vue gelöscht, base-components.js Plugin entfernt.
 
 **Erkenntnisse aus der Migration:**
 - `type="submit"` muss explizit gesetzt werden (OsButton Default: `type="button"`)
 - DsForm `errors` ist ein Objekt → `!!errors` für Boolean-Cast bei `:disabled`
 - CSS `.base-button` Selektoren → `> button` oder `button`
-- Position/Dimensions brauchen `!important` für Tailwind-Override
 - Filter-Buttons nutzen `:appearance="condition ? 'filled' : 'outline'"` Pattern
-- Circle-Buttons mit Icon: `<template #icon><base-icon :name="..." /></template>`
-
-**Verbleibende Cleanup-Aufgaben:**
-- [ ] Snapshot-Dateien aktualisieren (enthalten noch `base-button` Referenzen)
-- [ ] Test-Dateien aktualisieren (Selektoren `.base-button` → `button` oder `os-button-stub`)
-- [ ] BaseButton.vue Komponente ggf. entfernen (wenn nicht mehr referenziert)
-- [ ] CSS-Selektor `.base-button` in ImageUploader.vue entfernen
+- Circle-Buttons mit Icon: `<template #icon><os-icon :icon="..." /></template>`
 
 ---
 
@@ -58,62 +49,62 @@ Migration vollständig abgeschlossen. 0 `<base-button>` Tags verbleiben in Vue-T
 > Live: http://styleguide.ocelot.social/
 
 ### Data Display
-| # | Komponente | Status | Webapp-Duplikat | Varianten | Priorität | Notizen |
-|---|------------|--------|-----------------|-----------|-----------|---------|
-| 1 | Avatar | ⬜ Ausstehend | | | | |
-| 2 | Card | ⬜ Ausstehend | BaseCard? | | | |
-| 3 | Chip | ⬜ Ausstehend | | | | |
-| 4 | Code | ⬜ Ausstehend | | | | |
-| 5 | Icon | ⬜ Ausstehend | BaseIcon? | | | |
-| 6 | Number | ⬜ Ausstehend | | | | |
-| 7 | Placeholder | ⬜ Ausstehend | | | | |
-| 8 | Spinner | ⬜ Ausstehend | LoadingSpinner? | | | |
-| 9 | Table | ⬜ Ausstehend | | | | |
-| 10 | TableCol | ⬜ Ausstehend | | | | |
-| 11 | TableHeadCol | ⬜ Ausstehend | | | | |
-| 12 | Tag | ⬜ Ausstehend | | | | |
+| # | Komponente | Status | Notizen |
+|---|------------|--------|---------|
+| 1 | Avatar | ⬜ Nicht genutzt | Webapp nutzt eigenes ProfileAvatar |
+| 2 | Card | ✅ UI-Library | → OsCard (BaseCard gelöscht) |
+| 3 | Chip | ⬜ Tier B | 5 Dateien → Plain HTML `<span class="ds-chip">` |
+| 4 | Code | ⬜ Nicht genutzt | Nicht in Webapp verwendet |
+| 5 | Icon | ✅ UI-Library | → OsIcon (BaseIcon gelöscht, 82 Ocelot-Icons) |
+| 6 | Number | ⬜ Tier B | 5 Dateien → Plain HTML `<div class="ds-number">` |
+| 7 | Placeholder | ✅ → HTML | Tier A: `<div class="ds-placeholder">` |
+| 8 | Spinner | ✅ UI-Library | → OsSpinner (LoadingSpinner gelöscht) |
+| 9 | Table | ⬜ Tier 4 | 7 Dateien → OsTable |
+| 10 | TableCol | ⬜ Tier 4 | Intern von Table genutzt |
+| 11 | TableHeadCol | ⬜ Tier 4 | Intern von Table genutzt |
+| 12 | Tag | ✅ → HTML | Tier A: `<span class="ds-tag">` |
 
 ### Data Input
-| # | Komponente | Status | Webapp-Duplikat | Varianten | Priorität | Notizen |
-|---|------------|--------|-----------------|-----------|-----------|---------|
-| 13 | Button | ⏳ Migration | BaseButton, CustomButton, ActionButton, ... | | | → OsButton (41/90 migriert) |
-| 14 | CopyField | ⬜ Ausstehend | | | | |
-| 15 | Form | ⬜ Ausstehend | | | | |
-| 16 | FormItem | ⬜ Ausstehend | | | | |
-| 17 | Input | ⬜ Ausstehend | SearchableInput, LinkInput | | | |
-| 18 | InputError | ⬜ Ausstehend | | | | |
-| 19 | InputLabel | ⬜ Ausstehend | | | | |
-| 20 | Radio | ⬜ Ausstehend | | | | |
-| 21 | Select | ⬜ Ausstehend | Dropdown, LocationSelect | | | |
+| # | Komponente | Status | Notizen |
+|---|------------|--------|---------|
+| 13 | Button | ✅ UI-Library | → OsButton (133 Buttons in 79 Dateien, BaseButton gelöscht) |
+| 14 | CopyField | ⬜ Nicht genutzt | Nicht in Webapp verwendet |
+| 15 | Form | ⬜ Offen | 18 Dateien — HTML `<form>` oder OsForm? |
+| 16 | FormItem | ⬜ Nicht genutzt | Nicht in Webapp verwendet |
+| 17 | Input | ⬜ Tier 2 | 23 Dateien → OsInput (gekoppelt mit Form) |
+| 18 | InputError | ⬜ Nicht genutzt | Intern von Input genutzt |
+| 19 | InputLabel | ⬜ Nicht genutzt | Intern von Input genutzt |
+| 20 | Radio | ⬜ Tier B | 1 Datei → native `<input type="radio">` |
+| 21 | Select | ⬜ Tier 4 | 3 Dateien → OsSelect |
 
 ### Layout
-| # | Komponente | Status | Webapp-Duplikat | Varianten | Priorität | Notizen |
-|---|------------|--------|-----------------|-----------|-----------|---------|
-| 22 | Container | ⬜ Ausstehend | | | | |
-| 23 | Flex | ⬜ Ausstehend | | | | |
-| 24 | FlexItem | ⬜ Ausstehend | | | | |
-| 25 | Grid | ⬜ Ausstehend | MasonryGrid? | | | |
-| 26 | GridItem | ⬜ Ausstehend | MasonryGridItem? | | | |
-| 27 | Modal | ⬜ Ausstehend | Modal, ConfirmModal, ... | | | |
-| 28 | Page | ⬜ Ausstehend | InternalPage? | | | |
-| 29 | PageTitle | ⬜ Ausstehend | | | | |
-| 30 | Section | ⬜ Ausstehend | | | | |
-| 31 | Space | ⬜ Ausstehend | | | | |
+| # | Komponente | Status | Notizen |
+|---|------------|--------|---------|
+| 22 | Container | ✅ → HTML | Tier A: `<div class="ds-container ds-container-{width}">` |
+| 23 | Flex | ✅ → HTML | Tier A: Plain HTML + CSS @media Queries |
+| 24 | FlexItem | ✅ → HTML | Tier A: Plain HTML + CSS @media Queries |
+| 25 | Grid | ⬜ Tier B | 2 Dateien → CSS Grid |
+| 26 | GridItem | ⬜ Tier B | 8 Dateien → CSS Grid |
+| 27 | Modal | ⬜ Tier 2 | 7 Dateien → OsModal |
+| 28 | Page | ⬜ Nicht genutzt | Nicht direkt in Webapp verwendet |
+| 29 | PageTitle | ⬜ Nicht genutzt | Nicht direkt in Webapp verwendet |
+| 30 | Section | ✅ → HTML | Tier A: `<section class="ds-section">` |
+| 31 | Space | ✅ → HTML | Tier A: `<div class="ds-mb-{size}">` / `<div class="ds-my-{size}">` |
 
 ### Navigation
-| # | Komponente | Status | Webapp-Duplikat | Varianten | Priorität | Notizen |
-|---|------------|--------|-----------------|-----------|-----------|---------|
-| 32 | List | ⬜ Ausstehend | | | | |
-| 33 | ListItem | ⬜ Ausstehend | | | | |
-| 34 | Logo | ⬜ Ausstehend | Logo | | | DUPLIKAT |
-| 35 | Menu | ⬜ Ausstehend | HeaderMenu, ContentMenu, ... | | | |
-| 36 | MenuItem | ⬜ Ausstehend | | | | |
+| # | Komponente | Status | Notizen |
+|---|------------|--------|---------|
+| 32 | List | ✅ → HTML | Tier A: `<ul class="ds-list">` |
+| 33 | ListItem | ✅ → HTML | Tier A: `<li class="ds-list-item">` |
+| 34 | Logo | ⬜ Nicht genutzt | Webapp nutzt eigenes Logo |
+| 35 | Menu | ⬜ Tier 3 | 11 Dateien → OsMenu |
+| 36 | MenuItem | ⬜ Tier 3 | 6 Dateien → OsMenuItem |
 
 ### Typography
-| # | Komponente | Status | Webapp-Duplikat | Varianten | Priorität | Notizen |
-|---|------------|--------|-----------------|-----------|-----------|---------|
-| 37 | Heading | ⬜ Ausstehend | SearchHeading? | | | |
-| 38 | Text | ⬜ Ausstehend | | | | |
+| # | Komponente | Status | Notizen |
+|---|------------|--------|---------|
+| 37 | Heading | ✅ → HTML | Tier A: `<h1-h4 class="ds-heading ds-heading-h{n}">` |
+| 38 | Text | ✅ → HTML | Tier A: `<p class="ds-text ds-text-{color}">` |
 
 ---
 
@@ -132,7 +123,7 @@ Migration vollständig abgeschlossen. 0 `<base-button>` Tags verbleiben in Vue-T
 ### A-B
 | # | Komponente | Status | Kategorie | Styleguide-Pendant | Notizen |
 |---|------------|--------|-----------|-------------------|---------|
-| 1 | ActionButton | ⬜ Ausstehend | Button | Button | 🔄 Button-Familie |
+| 1 | ActionButton | ✅ Migriert | Button | Button | 🔄 Button-Familie, nutzt OsButton |
 | 2 | ActionRadiusSelect | ⬜ Ausstehend | Input | | |
 | 3 | AddChatRoomByUserSearch | ⬜ Ausstehend | Feature | | Chat-spezifisch |
 | 4 | AddGroupMember | ⬜ Ausstehend | Feature | | Group-spezifisch |
@@ -141,21 +132,21 @@ Migration vollständig abgeschlossen. 0 `<base-button>` Tags verbleiben in Vue-T
 | 7 | BadgeSelection | ⬜ Ausstehend | Input | | |
 | 8 | Badges | ⬜ Ausstehend | Display | | |
 | 9 | BadgesSection | ⬜ Ausstehend | Display | | |
-| 10 | BaseButton | ⏳ Migration | Button | Button | 🔄 → OsButton (41/90 migriert) |
-| 11 | BaseCard | ⬜ Ausstehend | Layout | Card | 🔗 DUPLIKAT |
-| 12 | BaseIcon | ⬜ Ausstehend | Display | Icon | 🔗 DUPLIKAT |
+| 10 | ~~BaseButton~~ | ✅ Gelöscht | Button | Button | → OsButton (133 Buttons, Komponente gelöscht) |
+| 11 | ~~BaseCard~~ | ✅ Gelöscht | Layout | Card | → OsCard (~30 Dateien, Komponente gelöscht) |
+| 12 | ~~BaseIcon~~ | ✅ Gelöscht | Display | Icon | → OsIcon (131 Nutzungen, Komponente gelöscht) |
 
 ### C
 | # | Komponente | Status | Kategorie | Styleguide-Pendant | Notizen |
 |---|------------|--------|-----------|-------------------|---------|
 | 13 | CategoriesFilter | ⬜ Ausstehend | Filter | | |
 | 14 | CategoriesMenu | ⬜ Ausstehend | Navigation | Menu | |
-| 15 | CategoriesSelect | ⏳ Teilweise | Input | Select | Buttons → OsButton (icon) |
+| 15 | CategoriesSelect | ✅ Migriert | Input | Select | Buttons → OsButton (icon) |
 | 16 | ChangePassword | ⬜ Ausstehend | Feature | | Auth-spezifisch |
 | 17 | Change | ⬜ Ausstehend | Feature | | |
 | 18 | Chat | ⬜ Ausstehend | Feature | | Chat-spezifisch |
 | 19 | ChatNotificationMenu | ⬜ Ausstehend | Feature | | Chat-spezifisch |
-| 20 | CommentCard | ⏳ Teilweise | Display | Card | 1/2 Buttons → OsButton |
+| 20 | CommentCard | ✅ Migriert | Display | Card | Buttons → OsButton, BaseCard → OsCard |
 | 21 | CommentForm | ⬜ Ausstehend | Input | Form | |
 | 22 | CommentList | ⬜ Ausstehend | Display | List | |
 | 23 | ComponentSlider | ⬜ Ausstehend | Layout | | |
@@ -163,31 +154,31 @@ Migration vollständig abgeschlossen. 0 `<base-button>` Tags verbleiben in Vue-T
 | 25 | ContentMenu | ⬜ Ausstehend | Navigation | Menu | |
 | 26 | ContentViewer | ⬜ Ausstehend | Display | | |
 | 27 | ContextMenu | ⬜ Ausstehend | Navigation | Menu | |
-| 28 | ContributionForm | ⏳ Teilweise | Feature | Form | Cancel → OsButton |
+| 28 | ContributionForm | ✅ Migriert | Feature | Form | Buttons → OsButton, ds-* → HTML |
 | 29 | CounterIcon | ⬜ Ausstehend | Display | Icon | |
 | 30 | CountTo | ⬜ Ausstehend | Display | Number | Animation |
 | 31 | CreateInvitation | ⬜ Ausstehend | Feature | | |
-| 32 | CtaJoinLeaveGroup | ⬜ Ausstehend | Button | Button | 🔄 Button-Familie |
-| 33 | CtaUnblockAuthor | ✅ Migriert | Button | Button | Button → OsButton (icon) |
-| 34 | CustomButton | ⬜ Ausstehend | Button | Button | 🔄 Button-Familie |
+| 32 | CtaJoinLeaveGroup | ✅ Migriert | Button | Button | 🔄 Button-Familie, nutzt OsButton |
+| 33 | CtaUnblockAuthor | ✅ Migriert | Button | Button | Nutzt OsButton (icon, as="nuxt-link") |
+| 34 | CustomButton | ✅ Migriert | Button | Button | 🔄 Button-Familie, nutzt OsButton |
 
 ### D-E
 | # | Komponente | Status | Kategorie | Styleguide-Pendant | Notizen |
 |---|------------|--------|-----------|-------------------|---------|
 | 35 | DateTimeRange | ⬜ Ausstehend | Input | | |
 | 36 | DeleteData | ⬜ Ausstehend | Feature | | |
-| 37 | DeleteUserModal | ⏳ Teilweise | Feedback | Modal | 🔄 Modal-Familie, Buttons → OsButton |
-| 38 | DisableModal | ⏳ Teilweise | Feedback | Modal | 🔄 Modal-Familie, Buttons → OsButton |
+| 37 | DeleteUserModal | ✅ Migriert | Feedback | Modal | 🔄 Modal-Familie, Buttons → OsButton |
+| 38 | DisableModal | ✅ Migriert | Feedback | Modal | 🔄 Modal-Familie, Buttons → OsButton |
 | 39 | DonationInfo | ✅ Migriert | Display | | Button → OsButton |
 | 40 | Dropdown | ⬜ Ausstehend | Input | Select | |
 | 41 | DropdownFilter | ⬜ Ausstehend | Filter | Select | |
 | 42 | Editor | ⬜ Ausstehend | Input | | Rich-Text |
 | 43 | EmailDisplayAndVerify | ⬜ Ausstehend | Feature | | |
-| 44 | EmbedComponent | ⏳ Teilweise | Display | | 2/3 Buttons → OsButton |
-| 45 | EmotionButton | ⬜ Ausstehend | Button | Button | |
+| 44 | EmbedComponent | ✅ Migriert | Display | | Buttons → OsButton |
+| 45 | EmotionButton | ✅ Migriert | Button | Button | Nutzt OsButton intern |
 | 46 | Emotions | ⬜ Ausstehend | Feature | | |
 | 47 | Empty | ⬜ Ausstehend | Feedback | Placeholder | |
-| 48 | EnterNonce | ⏳ Teilweise | Feature | | Auth, Submit → OsButton |
+| 48 | EnterNonce | ✅ Migriert | Feature | | Auth, Submit → OsButton |
 
 ### F-G
 | # | Komponente | Status | Kategorie | Styleguide-Pendant | Notizen |
@@ -197,12 +188,12 @@ Migration vollständig abgeschlossen. 0 `<base-button>` Tags verbleiben in Vue-T
 | 51 | FilterMenu | ⬜ Ausstehend | Navigation | Menu | |
 | 52 | FilterMenuComponent | ⬜ Ausstehend | Navigation | Menu | |
 | 53 | FilterMenuSection | ⬜ Ausstehend | Navigation | Menu | |
-| 54 | FollowButton | ⬜ Ausstehend | Button | Button | |
+| 54 | FollowButton | ✅ Migriert | Button | Button | Nutzt OsButton intern |
 | 55 | FollowingFilter | ⬜ Ausstehend | Filter | | |
 | 56 | FollowList | ⬜ Ausstehend | Display | List | |
-| 57 | GroupButton | ⬜ Ausstehend | Button | Button | |
+| 57 | GroupButton | ✅ Migriert | Button | Button | Nutzt OsButton intern |
 | 58 | GroupContentMenu | ⬜ Ausstehend | Navigation | Menu | |
-| 59 | GroupForm | ⏳ Teilweise | Input | Form | 1/2 Buttons → OsButton |
+| 59 | GroupForm | ✅ Migriert | Input | Form | Buttons → OsButton |
 | 60 | GroupLink | ⬜ Ausstehend | Navigation | | |
 | 61 | GroupList | ⬜ Ausstehend | Display | List | |
 | 62 | GroupMember | ✅ Migriert | Display | | Button → OsButton |
@@ -213,41 +204,41 @@ Migration vollständig abgeschlossen. 0 `<base-button>` Tags verbleiben in Vue-T
 |---|------------|--------|-----------|-------------------|---------|
 | 64 | Hashtag | ⬜ Ausstehend | Display | Tag/Chip | |
 | 65 | HashtagsFilter | ⬜ Ausstehend | Filter | | |
-| 66 | HeaderButton | ⬜ Ausstehend | Button | Button | 🔄 Button-Familie |
+| 66 | HeaderButton | ✅ Migriert | Button | Button | 🔄 Button-Familie, nutzt OsButton |
 | 67 | HeaderMenu | ⬜ Ausstehend | Navigation | Menu | |
-| 68 | ImageUploader | ⏳ Teilweise | Input | | Crop-Buttons → OsButton |
+| 68 | ImageUploader | ✅ Migriert | Input | | Crop-Buttons → OsButton, Spinner → OsSpinner |
 | 69 | index | ⬜ Ausstehend | ? | | Prüfen |
 | 70 | InternalPage | ⬜ Ausstehend | Layout | Page | |
 | 71 | Invitation | ⬜ Ausstehend | Feature | | |
 | 72 | InvitationList | ⬜ Ausstehend | Display | List | |
-| 73 | InviteButton | ⬜ Ausstehend | Button | Button | |
-| 74 | JoinLeaveButton | ⬜ Ausstehend | Button | Button | |
-| 75 | LabeledButton | ⬜ Ausstehend | Button | Button | 🔄 Button-Familie |
+| 73 | InviteButton | ✅ Migriert | Button | Button | Nutzt OsButton intern |
+| 74 | JoinLeaveButton | ✅ Migriert | Button | Button | Nutzt OsButton intern |
+| 75 | LabeledButton | ✅ Migriert | Button | Button | 🔄 Button-Familie, nutzt OsButton |
 | 76 | LinkInput | ⬜ Ausstehend | Input | Input | |
-| 77 | LoadingSpinner | ⬜ Ausstehend | Feedback | Spinner | 🔗 DUPLIKAT |
+| 77 | ~~LoadingSpinner~~ | ✅ Gelöscht | Feedback | Spinner | → OsSpinner (Komponente gelöscht) |
 | 78 | LocaleSwitch | ⬜ Ausstehend | Navigation | | |
 | 79 | LocationInfo | ⬜ Ausstehend | Display | | |
-| 80 | LocationSelect | ⏳ Teilweise | Input | Select | Close-Button → OsButton (icon) |
+| 80 | LocationSelect | ✅ Migriert | Input | Select | Close-Button → OsButton (icon) |
 | 81 | LocationTeaser | ⬜ Ausstehend | Display | Card | |
-| 82 | LoginButton | ⬜ Ausstehend | Button | Button | |
+| 82 | LoginButton | ✅ Migriert | Button | Button | Nutzt OsButton intern |
 | 83 | LoginForm | ⬜ Ausstehend | Feature | Form | Auth |
-| 84 | Logo | ⬜ Ausstehend | Display | Logo | 🔗 DUPLIKAT |
+| 84 | Logo | ⬜ Ausstehend | Display | Logo | 🔗 DUPLIKAT (noch ungelöst) |
 
 ### M-O
 | # | Komponente | Status | Kategorie | Styleguide-Pendant | Notizen |
 |---|------------|--------|-----------|-------------------|---------|
-| 85 | MapButton | ⬜ Ausstehend | Button | Button | |
+| 85 | MapButton | ✅ Migriert | Button | Button | Nutzt OsButton intern |
 | 86 | MapStylesButtons | ✅ Migriert | Button | Button | Button → OsButton |
 | 87 | MasonryGrid | ⬜ Ausstehend | Layout | Grid | |
 | 88 | MasonryGridItem | ⬜ Ausstehend | Layout | GridItem | |
 | 89 | MenuBar | ⬜ Ausstehend | Navigation | Menu | |
-| 90 | MenuBarButton | ⬜ Ausstehend | Button | Button | 🔄 Button-Familie |
+| 90 | MenuBarButton | ✅ Migriert | Button | Button | 🔄 Button-Familie, nutzt OsButton |
 | 91 | MenuLegend | ⬜ Ausstehend | Navigation | | |
 | 92 | Modal | ⬜ Ausstehend | Feedback | Modal | 🔗 DUPLIKAT |
-| 93 | MySomethingList | ⏳ Teilweise | Display | List | Cancel → OsButton |
-| 94 | NotificationMenu | ⏳ Teilweise | Navigation | Menu | 2/3 Buttons → OsButton |
+| 93 | MySomethingList | ✅ Migriert | Display | List | Buttons → OsButton |
+| 94 | NotificationMenu | ✅ Migriert | Navigation | Menu | Buttons → OsButton |
 | 95 | NotificationsTable | ⬜ Ausstehend | Display | Table | |
-| 96 | ObserveButton | ⬜ Ausstehend | Button | Button | |
+| 96 | ObserveButton | ✅ Migriert | Button | Button | Nutzt OsButton intern |
 | 97 | OrderByFilter | ⬜ Ausstehend | Filter | | |
 
 ### P-R
@@ -267,10 +258,10 @@ Migration vollständig abgeschlossen. 0 `<base-button>` Tags verbleiben in Vue-T
 | 109 | RegistrationSlideNonce | ⬜ Ausstehend | Feature | | Auth |
 | 110 | RegistrationSlideNoPublic | ⬜ Ausstehend | Feature | | Auth |
 | 111 | RegistrationSlider | ⬜ Ausstehend | Feature | | Auth |
-| 112 | ReleaseModal | ⏳ Teilweise | Feedback | Modal | 🔄 Modal-Familie, Cancel → OsButton |
+| 112 | ReleaseModal | ✅ Migriert | Feedback | Modal | 🔄 Modal-Familie, Buttons → OsButton |
 | 113 | ReportList | ⬜ Ausstehend | Display | List | |
 | 114 | ReportModal | ⬜ Ausstehend | Feedback | Modal | 🔄 Modal-Familie |
-| 115 | ReportRow | ⏳ Teilweise | Display | | More Details → OsButton |
+| 115 | ReportRow | ✅ Migriert | Display | | More Details → OsButton |
 | 116 | ReportsTable | ⬜ Ausstehend | Display | Table | |
 | 117 | Request | ⬜ Ausstehend | Feature | | |
 | 118 | ResponsiveImage | ⬜ Ausstehend | Display | | |
@@ -285,7 +276,7 @@ Migration vollständig abgeschlossen. 0 `<base-button>` Tags verbleiben in Vue-T
 | 123 | SearchPost | ⬜ Ausstehend | Feature | | Search |
 | 124 | SearchResults | ⬜ Ausstehend | Feature | | Search |
 | 125 | SelectUserSearch | ⬜ Ausstehend | Input | Select | |
-| 126 | ShoutButton | ⬜ Ausstehend | Button | Button | |
+| 126 | ShoutButton | ✅ Migriert | Button | Button | Nutzt OsButton intern |
 | 127 | ShowPassword | ⬜ Ausstehend | Input | | |
 | 128 | Signup | ⬜ Ausstehend | Feature | | Auth |
 | 129 | SocialMedia | ⬜ Ausstehend | Display | | |
@@ -307,36 +298,35 @@ Migration vollständig abgeschlossen. 0 `<base-button>` Tags verbleiben in Vue-T
 ## Identifizierte Duplikate & Konsolidierung
 
 ### Direkte Duplikate (Webapp ↔ Styleguide)
-| Webapp | Styleguide | Aktion |
-|--------|------------|--------|
-| Logo | Logo | Konsolidieren zu OsLogo |
-| Modal | Modal | Konsolidieren zu OsModal |
-| BaseCard | Card | Konsolidieren zu OsCard |
-| BaseIcon | Icon | Konsolidieren zu OsIcon |
-| LoadingSpinner | Spinner | Konsolidieren zu OsSpinner |
+| Webapp | Styleguide | Aktion | Status |
+|--------|------------|--------|--------|
+| Logo | Logo | Konsolidieren zu OsLogo | ⬜ Ausstehend |
+| Modal | Modal | Konsolidieren zu OsModal | ⬜ Ausstehend |
+| ~~BaseCard~~ | Card | → OsCard | ✅ Erledigt (BaseCard gelöscht) |
+| ~~BaseIcon~~ | Icon | → OsIcon | ✅ Erledigt (BaseIcon gelöscht) |
+| ~~LoadingSpinner~~ | Spinner | → OsSpinner | ✅ Erledigt (LoadingSpinner gelöscht) |
 
-### Button-Familie (zur Konsolidierung)
-| Komponente | Beschreibung | Ziel |
-|------------|--------------|------|
-| Button (Styleguide) | Basis-Button | OsButton |
-| BaseButton | Basis-Button | → OsButton |
-| CustomButton | Angepasster Button | → OsButton variant |
-| ActionButton | Aktions-Button | → OsButton variant |
-| HeaderButton | Header-Button | → OsButton variant |
-| LabeledButton | Button mit Label | → OsButton + Label |
-| MenuBarButton | Menü-Button | → OsButton variant |
-| FollowButton | Follow-Aktion | Feature-spezifisch |
-| GroupButton | Gruppen-Aktion | Feature-spezifisch |
-| InviteButton | Einladen | Feature-spezifisch |
-| LoginButton | Login | Feature-spezifisch |
-| ShoutButton | Shout-Aktion | Feature-spezifisch |
-| ObserveButton | Beobachten | Feature-spezifisch |
-| EmotionButton | Emotion | Feature-spezifisch |
-| JoinLeaveButton | Beitreten/Verlassen | Feature-spezifisch |
-| MapButton | Karten-Button | Feature-spezifisch |
-| MapStylesButtons | Kartenstile | ✅ → OsButton |
-| CtaJoinLeaveGroup | CTA | Feature-spezifisch |
-| CtaUnblockAuthor | CTA | Feature-spezifisch |
+### Button-Familie ✅ (alle nutzen OsButton)
+| Komponente | Status | Notizen |
+|------------|--------|---------|
+| ~~Button (Styleguide)~~ | ✅ Ersetzt | → OsButton |
+| ~~BaseButton~~ | ✅ Gelöscht | → OsButton (133 Buttons) |
+| CustomButton | ✅ Nutzt OsButton | Feature-Wrapper |
+| ActionButton | ✅ Nutzt OsButton | Feature-Wrapper |
+| HeaderButton | ✅ Nutzt OsButton | Feature-Wrapper |
+| LabeledButton | ✅ Nutzt OsButton | Feature-Wrapper |
+| MenuBarButton | ✅ Nutzt OsButton | Feature-Wrapper |
+| FollowButton | ✅ Nutzt OsButton | Feature-spezifisch |
+| GroupButton | ✅ Nutzt OsButton | Feature-spezifisch |
+| InviteButton | ✅ Nutzt OsButton | Feature-spezifisch |
+| LoginButton | ✅ Nutzt OsButton | Feature-spezifisch |
+| EmotionButton | ✅ Nutzt OsButton | Feature-spezifisch |
+| JoinLeaveButton | ✅ Nutzt OsButton | Feature-spezifisch |
+| MapButton | ✅ Nutzt OsButton | Feature-spezifisch |
+| MapStylesButtons | ✅ Nutzt OsButton | Feature-spezifisch |
+| PaginationButtons | ✅ Nutzt OsButton | Feature-spezifisch |
+| CtaJoinLeaveGroup | ✅ Nutzt OsButton | Feature-spezifisch |
+| CtaUnblockAuthor | ✅ Nutzt OsButton | Feature-spezifisch |
 
 ### Modal-Familie (zur Konsolidierung)
 | Komponente | Beschreibung | Ziel |
@@ -366,24 +356,26 @@ Migration vollständig abgeschlossen. 0 `<base-button>` Tags verbleiben in Vue-T
 
 ## Kategorisierung
 
-### Basis-Komponenten (hohe Priorität)
-Diese sollten zuerst migriert werden:
-- Button → OsButton
-- Card → OsCard
-- Icon → OsIcon
+### Basis-Komponenten — UI-Library ✅
+- ~~Button → OsButton~~ ✅
+- ~~Card → OsCard~~ ✅
+- ~~Icon → OsIcon~~ ✅
+- ~~Spinner → OsSpinner~~ ✅
+
+### Basis-Komponenten — UI-Library (ausstehend)
 - Modal → OsModal
 - Input → OsInput
 - Select → OsSelect
-- Avatar → OsAvatar
-- Spinner → OsSpinner
+- Avatar → OsAvatar (falls benötigt)
 
-### Layout-Komponenten
-- Container, Flex, Grid, Page, Section, Space
+### Layout & Typography — → Plain HTML ✅ (Tier A)
+- ~~Container, Flex, FlexItem, Section, Space~~ ✅ → HTML + CSS
+- ~~Heading, Text, List, ListItem, Tag, Placeholder~~ ✅ → HTML + CSS
 
-### Typography
-- Heading, Text
+### Noch zu migrieren (Tier B → Plain HTML)
+- Chip, Number, Grid, GridItem, Radio
 
-### Feature-Komponenten (niedrigere Priorität)
+### Feature-Komponenten (bleiben in Webapp)
 - Chat, Group, Registration, Search, etc.
 
 ---
@@ -409,6 +401,9 @@ Diese sollten zuerst migriert werden:
 | 2026-02-09 | Claude | **Milestone 4a abgeschlossen** | 6 weitere: donations, profile (2x), badges, notifications/index, ReportRow |
 | 2026-02-11 | Claude | **M4b: icon + circle** | icon-Slot implementiert, circle-Prop mit CVA |
 | 2026-02-11 | Claude | **9 icon-Buttons migriert (M4c)** | DisableModal, DeleteUserModal, CtaUnblockAuthor, LocationSelect, CategoriesSelect, my-email-address, profile Chat, PaginationButtons (2x circle) |
+| 2026-02-11→18 | Claude | **Sessions 12-26** | OsButton M4c abgeschlossen, OsIcon, OsSpinner, OsCard implementiert + Webapp-Migration, BaseButton/BaseCard/BaseIcon/LoadingSpinner gelöscht |
+| 2026-02-19 | Claude | **Tier A Migration** | 10 ds-* Vue-Wrapper → Plain HTML + CSS, _ds-compat.scss, ~450 Nutzungen in ~90 Dateien |
+| 2026-02-19 | Claude | **Katalog konsolidiert** | Styleguide- und Webapp-Tabellen aktualisiert, veraltete Status korrigiert |
 
 ---
 
@@ -417,40 +412,40 @@ Diese sollten zuerst migriert werden:
 ### Phase 0: Analyse ✅
 1. [x] Webapp-Komponenten auflisten
 2. [x] Styleguide-Komponenten auflisten
-3. [x] Offensichtliche Duplikate identifizieren
-4. [x] Button-Familie im Detail analysieren
-5. [x] Modal-Familie im Detail analysieren
-6. [x] Menu-Familie im Detail analysieren
-7. [x] Priorisierung festlegen
-8. [x] Konsolidierungsplan finalisieren
+3. [x] Duplikate und Familien identifizieren
+4. [x] Button/Modal/Menu im Detail analysieren
+5. [x] Priorisierung und Konsolidierungsplan
 
-### Phase 3: OsButton Migration (in Arbeit)
-9. [x] OsButton entwickeln (CVA, vue-demi)
-10. [x] Webapp-Integration (Jest, Docker, CI)
-11. [x] 16 Buttons migrieren (validiert ✅)
+### Phase 3: OsButton Migration ✅
+6. [x] OsButton entwickeln (CVA, vue-demi)
+7. [x] 133 Buttons in 79 Dateien migriert
+8. [x] BaseButton.vue gelöscht, base-components.js Plugin entfernt
 
-**Milestone 4a: 14 Buttons ohne neue Props** ✅
-12. [x] Modal Cancel-Buttons (3)
-13. [x] Form Cancel/Submit-Buttons (3)
-14. [x] ImageUploader Crop-Buttons (2)
-15. [x] Page Buttons (6)
+### Phase 4: Tier 1 — UI-Library Kern ✅
+9. [x] OsIcon + 82 Ocelot-Icons, BaseIcon gelöscht
+10. [x] OsSpinner + Webapp-Migration, LoadingSpinner gelöscht
+11. [x] OsCard + Webapp-Migration, BaseCard gelöscht
 
-**Milestone 4b: Props für ~49 Buttons hinzufügen**
-16. [x] icon-Slot zu OsButton hinzufügen ✅
-17. [x] circle-Variant zu OsButton hinzufügen ✅
-18. [ ] loading-Prop zu OsButton hinzufügen
+### Phase 4: Tier A — ds-* → Plain HTML ✅
+12. [x] _ds-compat.scss Utility-Klassen
+13. [x] 10 ds-* Wrapper → HTML + CSS (~450 Nutzungen, ~90 Dateien)
 
-**Milestone 4c: ~49 Buttons mit neuen Props migrieren**
-19. [ ] Button-Komponenten (~15)
-20. [ ] Navigation (~8)
-21. [ ] Editor (~15)
-22. [ ] Filter/Chat (~10)
-23. [ ] Forms/Modals (~5)
-24. [ ] Features/Pages (~12)
+### Phase 4: Tier B — ds-* → Plain HTML (ausstehend)
+14. [ ] ds-chip (5 Dateien) → `<span class="ds-chip">`
+15. [ ] ds-number (5 Dateien) → `<div class="ds-number">`
+16. [ ] ds-grid / ds-grid-item (10 Dateien) → CSS Grid
+17. [ ] ds-radio (1 Datei) → native `<input type="radio">`
+
+### Phase 4: Tier 2-4 — UI-Library (ausstehend)
+18. [ ] OsModal (7 Dateien)
+19. [ ] OsInput (23 Dateien, gekoppelt mit ds-form)
+20. [ ] OsMenu / OsMenuItem (17 Dateien)
+21. [ ] OsSelect (3 Dateien), OsTable (7 Dateien)
+22. [ ] ds-form → HTML `<form>` oder OsForm (18 Dateien)
 
 ---
 
-**✅ Phase 0 abgeschlossen!** Phase 3 zu 27% erledigt (24/90 Buttons migriert). Milestone 4a: 8/14 Buttons.
+**✅ Phase 0-3 abgeschlossen. Phase 4: Tier 1 + Tier A ✅, Tier B + Tier 2-4 ausstehend.**
 
 ---
 
@@ -544,66 +539,47 @@ Diese sollten zuerst migriert werden:
 
 ---
 
-### Feature-Buttons (Business-Logik)
+### Feature-Buttons (Business-Logik) ✅
 
-Diese Buttons enthalten Business-Logik und sollten **nicht** in OsButton konsolidiert werden:
+Feature-Buttons behalten Business-Logik, nutzen aber intern alle OsButton:
 
-| Komponente | Beschreibung | Migration |
-|------------|--------------|-----------|
-| FollowButton | Folgen/Entfolgen Logik | Bleibt Feature-Komponente |
-| GroupButton | Gruppen-Aktionen | Bleibt Feature-Komponente |
-| InviteButton | Einladungs-Logik | Bleibt Feature-Komponente |
-| LoginButton | Auth-Logik | Bleibt Feature-Komponente |
-| ShoutButton | Shout-Logik | Bleibt Feature-Komponente |
-| ObserveButton | Beobachten-Logik | Bleibt Feature-Komponente |
-| EmotionButton | Reaktions-Logik | Bleibt Feature-Komponente |
-| JoinLeaveButton | Gruppen Beitreten/Verlassen | Bleibt Feature-Komponente |
-| MapButton | Karten-Toggle | Bleibt Feature-Komponente |
-| MapStylesButtons | Kartenstil-Auswahl | Bleibt Feature-Komponente |
-| PaginationButtons | Seitennavigation | Bleibt Feature-Komponente |
+| Komponente | Status |
+|------------|--------|
+| FollowButton | ✅ Nutzt OsButton |
+| GroupButton | ✅ Nutzt OsButton |
+| InviteButton | ✅ Nutzt OsButton |
+| LoginButton | ✅ Nutzt OsButton |
+| ShoutButton | ✅ Nutzt OsButton |
+| ObserveButton | ✅ Nutzt OsButton |
+| EmotionButton | ✅ Nutzt OsButton |
+| JoinLeaveButton | ✅ Nutzt OsButton |
+| MapButton | ✅ Nutzt OsButton |
+| MapStylesButtons | ✅ Nutzt OsButton |
+| PaginationButtons | ✅ Nutzt OsButton |
 
 ---
 
-### Konsolidierungsvorschlag: OsButton
+### Konsolidierungsvorschlag: OsButton ✅ IMPLEMENTIERT
 
+> **Hinweis:** Die tatsächliche API weicht vom ursprünglichen Vorschlag ab.
+> Siehe `packages/ui/src/components/OsButton/OsButton.vue` für die aktuelle Implementierung.
+
+**Implementierte API (CVA-basiert):**
 ```typescript
 interface OsButtonProps {
-  // Variante
-  variant?: 'default' | 'primary' | 'secondary' | 'danger'
-
-  // Stil
-  filled?: boolean      // Gefüllter Hintergrund (default: false = outline)
-  ghost?: boolean       // Komplett transparent
-
-  // Größe
-  size?: 'tiny' | 'small' | 'base' | 'large'
-
-  // Form
-  circle?: boolean      // Runder Button
-  fullWidth?: boolean   // Volle Breite
-
-  // Icon
-  icon?: string
-  iconPosition?: 'left' | 'right'
-
-  // Zustände
+  variant?: 'default' | 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info'
+  appearance?: 'filled' | 'outline' | 'ghost'  // statt separate booleans
+  size?: 'sm' | 'md' | 'lg' | 'xl'             // vereinfachte Größen
+  circle?: boolean
+  fullWidth?: boolean
   loading?: boolean
   disabled?: boolean
-
-  // Link-Support
-  to?: string | RouteLocationRaw  // Router-Link
-  href?: string                    // Externer Link
-
-  // Button-Typ
-  type?: 'button' | 'submit'
+  as?: 'button' | 'a' | 'nuxt-link' | 'router-link' | Component  // polymorphes Rendering
+  type?: 'button' | 'submit' | 'reset'
+  // Icon: slot-basiert (<template #icon>), nicht prop-basiert
 }
 ```
 
-**Nicht übernommen:**
-- `bullet` → zu spezifisch, kann mit `circle` + custom size erreicht werden
-- `hover` prop → unnötig, CSS :hover reicht
-- `padding` prop → sollte über size geregelt werden
-
 ---
 
 ### Verwendete Design-Tokens (tatsächlich genutzt)
@@ -636,11 +612,11 @@ interface OsButtonProps {
 
 ---
 
-### Offene Fragen
+### Offene Fragen ✅ (alle gelöst)
 
-1. **secondary Variante:** Styleguide hat `secondary` (blau), Webapp nicht. Wird es gebraucht?
-2. **x-large Size:** Styleguide hat `x-large` in CSS, aber nicht als Prop. Übernehmen?
-3. **bullet Form:** Webapp-spezifisch. Brauchen wir das in OsButton?
+1. ~~secondary Variante~~ → ✅ Ja, implementiert als `variant="secondary"`
+2. ~~x-large Size~~ → ✅ Implementiert als `size="xl"`
+3. ~~bullet Form~~ → ✅ Nicht übernommen, `circle` + custom CSS reicht
 
 ---
 
@@ -956,120 +932,120 @@ interface OsDropdownProps {
 
 ## Priorisierung der Komponenten
 
-### Tier 1: Kern-Komponenten (höchste Priorität)
+### Tier 1: Kern-Komponenten ✅
 
-Diese Komponenten sind die Basis für alle anderen und sollten zuerst migriert werden:
+| # | Komponente | Status |
+|---|------------|--------|
+| 1 | **OsButton** | ✅ 133 Buttons in 79 Dateien, BaseButton gelöscht |
+| 2 | **OsIcon** | ✅ 131 Nutzungen, 82 Ocelot-Icons, BaseIcon gelöscht |
+| 3 | **OsSpinner** | ✅ 4 Spinner migriert, LoadingSpinner gelöscht |
+| 4 | **OsCard** | ✅ ~30 Dateien, BaseCard gelöscht |
 
-| # | Komponente | Begründung | Abhängigkeiten |
-|---|------------|------------|----------------|
-| 1 | **OsButton** | Meistgenutzte Komponente, Basis für viele Features | OsIcon |
-| 2 | **OsIcon** | Wird von Button, Menu, etc. benötigt | - |
-| 3 | **OsSpinner** | Loading-States für Button, Modal, etc. | - |
-| 4 | **OsCard** | Layout-Basis für viele Komponenten | - |
+### Tier A: Triviale ds-* → Plain HTML ✅
 
-### Tier 2: Layout & Feedback (mittlere Priorität)
+| # | Komponente | Status |
+|---|------------|--------|
+| — | ds-section, ds-placeholder, ds-tag, ds-list, ds-list-item | ✅ → HTML-Elemente + CSS-Klassen |
+| — | ds-container, ds-heading, ds-text | ✅ → HTML-Elemente + CSS-Klassen |
+| — | ds-space | ✅ → div + Margin-Utility-Klassen |
+| — | ds-flex, ds-flex-item | ✅ → HTML + CSS @media Queries |
 
-| # | Komponente | Begründung | Abhängigkeiten |
-|---|------------|------------|----------------|
-| 5 | **OsModal** | Dialoge, Bestätigungen, Formulare | OsButton, OsCard |
-| 6 | **OsDropdown** | Dropdown-Menüs, Selects | OsButton |
-| 7 | **OsAvatar** | Benutzerprofile, Kommentare | - |
-| 8 | **OsInput** | Formulare | - |
+### Tier B: Einfache ds-* → Plain HTML (ausstehend)
 
-### Tier 3: Navigation & Typography (niedrigere Priorität)
+| # | Komponente | Dateien | Ziel |
+|---|------------|---------|------|
+| — | ds-chip | 5 | `<span class="ds-chip">` |
+| — | ds-number | 5 | `<div class="ds-number">` |
+| — | ds-grid / ds-grid-item | 10 | CSS Grid |
+| — | ds-radio | 1 | native `<input type="radio">` |
 
-| # | Komponente | Begründung | Abhängigkeiten |
-|---|------------|------------|----------------|
-| 9 | **OsMenu** | Navigation (weniger kritisch) | OsMenuItem |
-| 10 | **OsMenuItem** | Menu-Items | - |
-| 11 | **OsHeading** | Überschriften | - |
-| 12 | **OsText** | Text-Formatierung | - |
+### Tier 2: Layout & Feedback (ausstehend)
 
-### Tier 4: Spezial-Komponenten (später)
+| # | Komponente | Dateien | Abhängigkeiten |
+|---|------------|---------|----------------|
+| 5 | **OsModal** | 7 | OsButton, OsCard |
+| 6 | **OsDropdown** | — | OsButton |
+| 7 | **OsAvatar** | — | - |
+| 8 | **OsInput** | 23 | gekoppelt mit ds-form (18 Dateien) |
 
-| # | Komponente | Begründung |
-|---|------------|------------|
-| 13 | OsSelect | Komplexere Formular-Komponente |
-| 14 | OsTable | Datentabellen |
-| 15 | OsTag/OsChip | Tags und Badges |
+### Tier 3: Navigation (ausstehend)
+
+| # | Komponente | Dateien | Abhängigkeiten |
+|---|------------|---------|----------------|
+| 9 | **OsMenu** | 11 | OsMenuItem |
+| 10 | **OsMenuItem** | 6 | - |
+
+### Tier 4: Spezial-Komponenten (ausstehend)
+
+| # | Komponente | Dateien |
+|---|------------|---------|
+| 11 | OsSelect | 3 |
+| 12 | OsTable | 7 |
+| 13 | ds-form → HTML `<form>` oder OsForm | 18 |
+
+> **Hinweis:** OsHeading, OsText, OsTag sind nicht mehr geplant — wurden zu Plain HTML migriert (Tier A).
 
 ---
 
 ## Finaler Konsolidierungsplan
 
-> **Hinweis:** "Tier 1/2/3" bezeichnet die Migrations-Reihenfolge innerhalb von Phase 4 (Komponenten-Migration).
-> Dies ist unabhängig von den Haupt-Phasen 0-5 des Projekts.
+> **Hinweis:** "Tier 1/A/B/2/3/4" bezeichnet die Migrations-Reihenfolge innerhalb von Phase 4.
 
-### Tier 1: Kern-Komponenten
+### Tier 1: Kern-Komponenten ✅
 
 ```
-1. OsIcon
-   └── Vereint: DsIcon (Styleguide), BaseIcon (Webapp)
-   └── Token: Keine eigenen (nur Größen via Props)
-
-2. OsSpinner
-   └── Vereint: DsSpinner (Styleguide), LoadingSpinner (Webapp)
-   └── Token: Farben, Größen
-
-3. OsButton
-   └── Vereint: DsButton (Styleguide), BaseButton (Webapp)
-   └── NICHT übernommen: Feature-Buttons (FollowButton, etc.)
-   └── Token: Farben, Größen, Border-Radius, Spacing
-
-4. OsCard
-   └── Vereint: DsCard (Styleguide), BaseCard (Webapp)
-   └── Token: Shadows, Border-Radius, Spacing
+1. OsIcon    ✅ Vereint: DsIcon + BaseIcon → 82 Ocelot-Icons
+2. OsSpinner ✅ Vereint: DsSpinner + LoadingSpinner
+3. OsButton  ✅ Vereint: DsButton + BaseButton → 133 Buttons in 79 Dateien
+4. OsCard    ✅ Vereint: DsCard + BaseCard → ~30 Dateien
 ```
 
-### Tier 2: Layout & Feedback
+### Tier A: Triviale ds-* Wrapper → Plain HTML ✅
 
 ```
-5. OsModal
-   └── Basis: DsModal (Styleguide) - bereits gut!
-   └── Feature-Modals bleiben in Webapp, nutzen OsModal
-   └── Token: Z-Index, Shadows, Spacing
-
-6. OsDropdown (NEU!)
-   └── Basis: Dropdown (Webapp)
-   └── Erkenntnis: Wichtiger als gedacht!
-   └── Token: Spacing, Shadows
-
-7. OsAvatar
-   └── Vereint: DsAvatar (Styleguide), ProfileAvatar (Webapp)
-   └── Token: Größen, Border-Radius
-
-8. OsInput
-   └── Basis: DsInput (Styleguide), InputField Patterns (Webapp)
-   └── Token: Border, Farben, Spacing
+ds-section, ds-placeholder, ds-tag, ds-list, ds-list-item  ✅ → HTML + CSS-Klassen
+ds-container, ds-heading, ds-text                           ✅ → HTML + CSS-Klassen
+ds-space                                                     ✅ → div + Margin-Utilities
+ds-flex, ds-flex-item                                        ✅ → HTML + CSS @media Queries
 ```
 
-### Tier 3: Navigation
+### Tier B: Einfache ds-* → Plain HTML (ausstehend)
 
 ```
-9. OsMenu + OsMenuItem
-   └── Basis: DsMenu/DsMenuItem (Styleguide)
-   └── Feature-Menus bleiben in Webapp
-   └── Token: Spacing, Farben
+ds-chip, ds-number, ds-grid/ds-grid-item, ds-radio → Plain HTML + CSS
+```
+
+### Tier 2-4: UI-Library (ausstehend)
+
+```
+5. OsModal    → Basis: DsModal, Feature-Modals bleiben in Webapp
+6. OsDropdown → Basis: Dropdown (Webapp) — wichtiger als gedacht!
+7. OsAvatar   → Vereint: DsAvatar + ProfileAvatar
+8. OsInput    → Basis: DsInput, gekoppelt mit ds-form
+9. OsMenu     → Basis: DsMenu/DsMenuItem
+10. OsSelect  → Basis: DsSelect
+11. OsTable   → Basis: DsTable
 ```
 
 ---
 
 ## Erkenntnisse aus der Analyse
 
-### Was funktioniert gut (beibehalten):
-1. **DsModal als Basis** - Feature-Modals nutzen bereits DsModal
-2. **BaseButton als Standard** - Webapp hat konsolidiert auf BaseButton
-3. **Dropdown-Pattern** - Funktioniert gut mit v-popover
+### Was funktioniert gut:
+1. **DsModal als Basis** - Feature-Modals nutzen bereits DsModal → OsModal wird gleich funktionieren
+2. **Dropdown-Pattern** - Funktioniert gut mit v-popover
+3. **Tier A Migration** - 10 ds-* Wrapper durch HTML + CSS ersetzt, kein Funktionsverlust
 
-### Was problematisch ist (verbessern):
-1. **Button-Varianten** - Zu viele unterschiedliche Buttons
-2. **Inkonsistente Naming** - ds-* vs base-* vs kebab-case
-3. **Doppelte Komponenten** - Logo, Icon, Card existieren doppelt
+### Was gelöst wurde: ✅
+1. ~~Button-Varianten~~ → OsButton mit CVA-Varianten vereinheitlicht
+2. ~~Inkonsistente Naming~~ → os-* Prefix für Library, ds-* CSS-Klassen temporär beibehalten
+3. ~~Doppelte Komponenten~~ → BaseCard, BaseIcon, LoadingSpinner gelöscht (3/5 Duplikate aufgelöst)
+4. ~~Layout-Shift bei ds-flex~~ → CSS @media Queries statt JavaScript window.innerWidth
 
-### Was überflüssig ist (nicht migrieren):
-1. **bullet Button** - Zu spezifisch, kann mit circle erreicht werden
-2. **hover Prop** - CSS :hover reicht
-3. **Viele Feature-Buttons** - Behalten Business-Logik, nutzen OsButton
+### Noch offen:
+1. **Logo** - Existiert doppelt (Webapp + Styleguide)
+2. **Modal** - Existiert doppelt (Webapp Modal.vue ist Modal-Router, DsModal ist UI)
+3. **ds-form Kopplung** - ds-input und ds-form sind stark gekoppelt (Schema-Validation)
 
 ---
 
@@ -1138,7 +1114,7 @@ $box-shadow-small-inset: inset 0 0 0 1px rgba(0,0,0,.05)
 
 ## Phase 3: Webapp-Integration (Tracking)
 
-### OsButton Migration - Abgeschlossen (132/132) ✅
+### OsButton Migration - Abgeschlossen (133/133) ✅
 
 | # | Datei | Button | Status |
 |---|-------|--------|--------|
@@ -1181,15 +1157,9 @@ $box-shadow-small-inset: inset 0 0 0 1px rgba(0,0,0,.05)
 | `fullWidth` Prop | ✅ |
 | `type` Prop (button/submit/reset) | ✅ |
 
-### Nächste Schritte
+### Status
 
-1. Snapshot-Dateien aktualisieren
-2. Test-Selektoren anpassen
-3. BaseButton.vue ggf. entfernen
-4. Phase 4: Weitere Komponenten (OsIcon, OsCard, OsModal, ...)
-
-### Integrations-Protokoll
-
-| Datum | Aktion | Details |
-|-------|--------|---------|
-| 2026-02-08 | Analyse | 6 Einsatzstellen identifiziert, 2 minimal (nur variant) |
+**OsButton Migration: ✅ Vollständig abgeschlossen.**
+- BaseButton.vue gelöscht, base-components.js Plugin entfernt
+- Alle Tests, Snapshots, Cypress E2E-Selektoren aktualisiert
+- Nächster Schritt: Tier B (ds-chip, ds-number, ds-grid, ds-radio) oder Tier 2 (OsModal)

packages/ui/PROJEKT.md

@@ -81,10 +81,10 @@ Phase 0: ██████████ 100% (6/6 Aufgaben) ✅
 Phase 1: ██████████ 100% (6/6 Aufgaben) ✅
 Phase 2: ██████████ 100% (26/26 Aufgaben) ✅
 Phase 3: ██████████ 100% (24/24 Aufgaben) ✅ - Webapp-Integration komplett
-Phase 4: █████░░░░░  47% (8/17 Aufgaben) - OsButton ✅, OsIcon ✅, System-Icons ✅, BaseIcon→OsIcon Migration ✅, OsSpinner ✅, Spinner Webapp-Migration ✅, OsCard ✅, BaseCard→OsCard Migration ✅
+Phase 4: █████░░░░░  46% (12/26 Aufgaben) - Tier 1 ✅, Tier A ✅, Infra ✅ | Tier B, Tier 2-4 ausstehend
 Phase 5: ░░░░░░░░░░   0% (0/7 Aufgaben)
 ───────────────────────────────────────
-Gesamt:  ████████░░  81% (70/86 Aufgaben)
+Gesamt:  ████████░░  78% (74/95 Aufgaben)
 ```
 
 ### Katalogisierung (Details in KATALOG.md)
@@ -177,17 +177,54 @@ BaseIcon → OsIcon Webapp-Migration: ✅
 ├─ Jest Mocks: @ocelot-social/ui/ocelot für ocelotIcons in Tests
 ├─ Tests aktualisiert: 911/939 Tests bestanden (3 pre-existing failures)
 └─ 0 base-icon/BaseIcon Referenzen verbleibend
+
+Tier A ds-* → Plain HTML + CSS: ✅
+├─ 10 triviale Vue-Wrapper-Komponenten durch HTML-Elemente + CSS-Klassen ersetzt
+├─ ~450 Nutzungen in ~90 Dateien migriert
+├─ _ds-compat.scss: Utility-Klassen für Margins (.ds-mb-*, .ds-mt-*, .ds-my-*),
+│  Flex (.ds-flex, .ds-flex-item, .ds-flex-gap-*), Centered (.ds-space-centered)
+├─ ds-flex/ds-flex-item: JavaScript window.innerWidth → CSS @media Queries
+│  (kein Layout-Shift bei SSR, bessere Performance)
+├─ system.css bleibt geladen — bestehende CSS-Klassen funktionieren weiter
+├─ Verbleibend: 13 ds-* Komponenten (Tier B: 4 einfache, Tier C: 6 komplexe → UI-Library)
+└─ 0 Tier-A ds-* Komponenten-Tags verbleibend
 ```
 
 ---
 
 ## Aktueller Stand
 
-**Letzte Aktualisierung:** 2026-02-19 (Session 25)
+**Letzte Aktualisierung:** 2026-02-19 (Session 27)
 
-**Aktuelle Phase:** Phase 4 - OsIcon ✅, BaseIcon → OsIcon Migration ✅, OsSpinner ✅, Spinner Webapp-Migration ✅, OsCard ✅, BaseCard → OsCard Migration ✅
+**Aktuelle Phase:** Phase 4 - OsIcon ✅, BaseIcon → OsIcon Migration ✅, OsSpinner ✅, Spinner Webapp-Migration ✅, OsCard ✅, BaseCard → OsCard Migration ✅, Tier A ds-* → Plain HTML ✅
 
-**Zuletzt abgeschlossen (Session 25 - BaseCard → OsCard Webapp-Migration):**
+**Zuletzt abgeschlossen (Session 27 - Tier A: ds-* Komponenten → Plain HTML):**
+- [x] `_ds-compat.scss` erstellt (Utility-Klassen für Margins, Flex, Centered)
+- [x] `ds-section` → `<section class="ds-section">` (5 Dateien)
+- [x] `ds-placeholder` → `<div class="ds-placeholder">` (4 Dateien)
+- [x] `ds-tag` → `<span class="ds-tag">` (2 Dateien)
+- [x] `ds-list` → `<ul class="ds-list">` (4 Dateien)
+- [x] `ds-list-item` → `<li class="ds-list-item">` (8 Dateien)
+- [x] `ds-container` → `<div class="ds-container ds-container-{width}">` (14 Dateien, 12 Dateien)
+- [x] `ds-heading` → `<h1-h4 class="ds-heading ds-heading-h{n}">` (31 Nutzungen, 25 Dateien)
+- [x] `ds-text` → `<p/div class="ds-text ds-text-{color} ds-text-size-{size}">` (80 Nutzungen, 42 Dateien)
+- [x] `ds-space` → `<div class="ds-mb-{size}">` / `<div class="ds-my-{size}">` (139 Nutzungen, 55+ Dateien)
+- [x] `ds-flex` / `ds-flex-item` → Plain HTML + CSS Media Queries (103 Nutzungen, 29 Dateien)
+- [x] Responsive Layouts: JavaScript `window.innerWidth` → CSS `@media` Queries (kein Layout-Shift)
+- [x] Bugfix: `<p>` mit Block-Level-Kindern → `<div>` (DateTimeRange.vue, verify.vue)
+- [x] Test-Fix: Empty.spec.js `attributes().margin` → `classes().toContain('ds-my-xxx-small')`
+- [x] 0 Tier-A `ds-*` Komponenten-Tags verbleibend
+
+**Verbleibende ds-* Komponenten (13 Typen):**
+- Tier B (→ Plain HTML): ds-chip (5), ds-number (5), ds-grid/ds-grid-item (10), ds-radio (1)
+- Tier C (→ UI-Library): ds-input (23), ds-form (18), ds-modal (7), ds-menu/ds-menu-item (17), ds-table (7), ds-select (3)
+
+**Zuvor abgeschlossen (Session 26 - CodeRabbit Review Fixes):**
+- [x] Cypress: `.os-card .title` → `.os-card > .title` (Kind-Kombinator statt Nachfahren)
+- [x] OsCard.spec.ts: `compareDocumentPosition()` Bitmask-Assertion `!== 0` statt `.toBe(true)`
+- [x] Maintenance-App: `@ocelot-social/ui` Abhängigkeit + `./nuxt.config.js` Import als pre-existing (kein Scope) bewertet
+
+**Zuvor abgeschlossen (Session 25 - BaseCard → OsCard Webapp-Migration):**
 - [x] ~30 Webapp-Dateien: `<base-card>` → `<os-card>` mit lokalen Imports
 - [x] 3 Template-Dateien mit #imageColumn/#topMenu Slots → inline Layout (LoginForm, RegistrationSlider, password-reset)
 - [x] CSS: `.os-card.--columns` Layout in main.scss (flex, image-column, content-column, top-menu, responsive)
@@ -300,7 +337,12 @@ BaseIcon → OsIcon Webapp-Migration: ✅
 **Nächste Schritte:**
 - [x] OsSpinner Webapp-Migration (DsSpinner + LoadingSpinner → OsSpinner) ✅
 - [x] OsCard Komponente + BaseCard → OsCard Webapp-Migration ✅
+- [x] Tier A: 10 triviale ds-* Wrapper → Plain HTML + CSS ✅
+- [ ] Tier B: ds-chip, ds-number, ds-grid/ds-grid-item, ds-radio → Plain HTML
 - [ ] Weitere Tier 2 Komponenten (OsModal, OsDropdown, OsAvatar, OsInput)
+- [ ] ds-form + ds-input → OsForm + OsInput (stark gekoppelt, 18+23 Dateien)
+- [ ] ds-menu / ds-menu-item → OsMenu / OsMenuItem
+- [ ] ds-table → OsTable, ds-select → OsSelect
 - [ ] Browser-Fehler untersuchen: `TypeError: Cannot read properties of undefined (reading 'heartO')` (ocelotIcons undefined im Browser trotz korrekter Webpack-Aliase)
 
 **Manuelle Setup-Aufgaben (außerhalb Code):**
@@ -548,37 +590,51 @@ Jeder migrierte Button muss manuell geprüft werden: Normal, Hover, Focus, Activ
 - [ ] Alle Unit-Tests bestehen
 - [ ] Dokumentation aktualisieren
 
-### Phase 4: Komponenten-Migration (15 Komponenten + 2 Infrastruktur)
+### Phase 4: Komponenten-Migration
 
-**Tier 1: Kern-Komponenten**
+**Tier 1: Kern-Komponenten (UI-Library)** ✅
 - [x] OsIcon (vereint DsIcon + BaseIcon) ✅ System-Icons + vite-svg-icon Plugin
 - [x] OsSpinner (vereint DsSpinner + LoadingSpinner) ✅ OsButton nutzt OsSpinner als Komponente
-- [x] OsSpinner Webapp-Migration ✅ 4 Spinner migriert, LoadingSpinner gelöscht, Admin ApolloQuery→$apollo.loading
-- [x] OsButton (vereint DsButton + BaseButton) ✅ Entwickelt in Phase 2
-- [x] OsCard (vereint DsCard + BaseCard) ✅ Webapp-Migration abgeschlossen, BaseCard gelöscht
+- [x] OsSpinner Webapp-Migration ✅ 4 Spinner migriert, LoadingSpinner gelöscht
+- [x] OsButton (vereint DsButton + BaseButton) ✅ 133 Buttons in 79 Dateien
+- [x] OsCard (vereint DsCard + BaseCard) ✅ ~30 Dateien, BaseCard gelöscht
 
-**Tier 2: Layout & Feedback**
-- [ ] OsModal (Basis: DsModal)
+**Tier A: Triviale ds-* Wrapper → Plain HTML + CSS** ✅
+- [x] _ds-compat.scss Utility-Klassen (Margins, Flex, Centered)
+- [x] ds-section, ds-placeholder, ds-tag, ds-list, ds-list-item → HTML + CSS-Klassen
+- [x] ds-container, ds-heading, ds-text → HTML + CSS-Klassen
+- [x] ds-space → div + Margin-Utility-Klassen (139 Nutzungen)
+- [x] ds-flex / ds-flex-item → HTML + CSS @media Queries (103 Nutzungen)
+
+**Tier B: Einfache ds-* → Plain HTML (ausstehend)**
+- [ ] ds-chip (5 Dateien) → `<span class="ds-chip">`
+- [ ] ds-number (5 Dateien) → `<div class="ds-number">`
+- [ ] ds-grid / ds-grid-item (10 Dateien) → CSS Grid
+- [ ] ds-radio (1 Datei) → native `<input type="radio">`
+
+**Tier 2: Layout & Feedback (UI-Library)**
+- [ ] OsModal (Basis: DsModal, 7 Dateien)
 - [ ] OsDropdown (Basis: Webapp Dropdown)
 - [ ] OsAvatar (vereint DsAvatar + ProfileAvatar)
-- [ ] OsInput (Basis: DsInput)
+- [ ] OsInput (Basis: DsInput, 23 Dateien — gekoppelt mit ds-form)
 
-**Tier 3: Navigation & Typography**
-- [ ] OsMenu (Basis: DsMenu)
-- [ ] OsMenuItem (Basis: DsMenuItem)
-- [ ] OsHeading (Basis: DsHeading)
-- [ ] OsText (Basis: DsText)
+**Tier 3: Navigation (UI-Library)**
+- [ ] OsMenu (Basis: DsMenu, 11 Dateien)
+- [ ] OsMenuItem (Basis: DsMenuItem, 6 Dateien)
 
 **Tier 4: Spezial-Komponenten**
-- [ ] OsSelect
-- [ ] OsTable
-- [ ] OsTag
+- [ ] OsSelect (3 Dateien)
+- [ ] OsTable (7 Dateien)
+- [ ] ds-form → Plain HTML `<form>` oder OsForm (18 Dateien)
 
 **Infrastruktur**
 - [x] System-Icons einrichten ✅ vite-svg-icon Plugin, 3 System-Icons, Ocelot-Icons Entry-Point
 - [x] BaseIcon → OsIcon Webapp-Migration ✅ 131 Nutzungen, 82 Ocelot-Icons, 0 BaseIcon verbleibend
 - [ ] CI docs-check Workflow (JSDoc-Coverage, README-Aktualität)
 
+> **Hinweis:** ds-heading, ds-text, ds-tag wurden zu Plain HTML migriert (Tier A).
+> OsHeading/OsText/OsTag als UI-Library-Komponenten sind daher nicht mehr geplant.
+
 ### Phase 5: Finalisierung
 - [ ] Alle Komponenten migriert und getestet
 - [ ] Alte Komponenten aus Vue 2 Projekt entfernt
@@ -1671,6 +1727,16 @@ Bei der Migration werden:
 | 2026-02-19 | **BaseCard gelöscht** | BaseCard.vue Komponente + base-components.js Plugin entfernt; nuxt.config, maintenance config, testSetup bereinigt |
 | 2026-02-19 | **CSS-Fixes** | ContributionForm Media-Query Selektoren, ProfileList Spezifität, InternalPage $space-small, OsCard highlight outline-1 Tests |
 | 2026-02-19 | **Code-Quality** | SocialMedia Props typisiert, LoginForm querySelector, redundante client-only entfernt, NotificationsTable optional chaining, HashtagsFilter doppeltes Mounting |
+| 2026-02-19 | **Review Fixes (Session 26)** | Cypress Kind-Kombinator `.os-card > .title`, OsCard.spec.ts Bitmask-Assertion fix, Maintenance-App Abhängigkeiten als pre-existing bewertet |
+| 2026-02-19 | **Tier A Migration (Session 27)** | 10 triviale ds-* Vue-Wrapper → Plain HTML + CSS-Klassen; `_ds-compat.scss` Utility-Klassen; ~90 Dateien geändert |
+| 2026-02-19 | **ds-section/placeholder/tag/list** | 19 Nutzungen in 13 Dateien → HTML-Elemente mit bestehenden CSS-Klassen aus system.css |
+| 2026-02-19 | **ds-container** | 14 Nutzungen in 12 Dateien → `<div class="ds-container ds-container-{width}">` |
+| 2026-02-19 | **ds-heading** | 31 Nutzungen in 25 Dateien → `<h1-h4 class="ds-heading ds-heading-h{n}">` mit soft/no-margin/align |
+| 2026-02-19 | **ds-text** | 80 Nutzungen in 42 Dateien → `<p/div class="ds-text ds-text-{color} ds-text-size-{size}">` |
+| 2026-02-19 | **ds-space** | 139 Nutzungen in 55+ Dateien → `<div class="ds-mb-{size}">` / `<div class="ds-my-{size}">`; neue Utility-Klassen in _ds-compat.scss |
+| 2026-02-19 | **ds-flex/ds-flex-item** | 103 Nutzungen in 29 Dateien → Plain HTML + CSS `@media` Queries; JS window.innerWidth → CSS Media Queries; `gap` statt negative-margin/padding |
+| 2026-02-19 | **HTML-Validierung Bugfix** | `<p>` mit Block-Level-Kindern → `<div>` in DateTimeRange.vue und verify.vue |
+| 2026-02-19 | **Test-Fix** | Empty.spec.js: `attributes().margin` → `classes().toContain('ds-my-xxx-small')` |
 
 ---
 
@@ -1680,11 +1746,20 @@ Bei der Migration werden:
 
 ### Zusammenfassung (aus KATALOG.md)
 
-| Quelle | Gesamt | Analysiert | Duplikate | Zu migrieren |
-|--------|--------|------------|-----------|--------------|
-| Webapp | 139 | ✅ | 5 | Priorisiert |
-| Styleguide | 38 | ✅ | 5 | Priorisiert |
-| **Gesamt** | **177** | **✅** | **5 direkte + 3 Familien** | **15 Kern-Komponenten** |
+| Quelle | Gesamt | Status |
+|--------|--------|--------|
+| Webapp | 139 | ✅ Katalogisiert |
+| Styleguide | 38 | ✅ Katalogisiert — 23 in Webapp genutzt |
+
+**Styleguide-Migration:**
+| Status | Komponenten |
+|--------|------------|
+| ✅ UI-Library | OsButton, OsIcon, OsSpinner, OsCard (4) |
+| ✅ → Plain HTML | Section, Placeholder, Tag, List, ListItem, Container, Heading, Text, Space, Flex, FlexItem (11) — Tier A |
+| ⬜ → Plain HTML | Chip, Number, Grid, GridItem, Radio (5) — Tier B |
+| ⬜ → UI-Library | Modal, Input, Menu, MenuItem, Select, Table (6) — Tier 2-4 |
+| ⬜ Nicht genutzt | Code, CopyField, FormItem, InputError, InputLabel, Page, PageTitle, Logo, Avatar, TableCol, TableHeadCol (11) |
+| ⬜ Offen | Form (18 Dateien — HTML `<form>` oder OsForm?) |
 
 ---
 

webapp/assets/_new/styles/_ds-compat.scss

@@ -0,0 +1,67 @@
+// ==========================================================
+// DS-COMPAT: Temporäre Utility-Klassen für ds-* Migration
+// TODO(tailwind): Durch Tailwind-Utilities ersetzen
+// Grep: ds-mb-, ds-mt-, ds-my-, ds-space-centered, ds-flex
+// ==========================================================
+
+// ds-space Ersatz — Margin-Bottom
+.ds-mb-xxx-small { margin-bottom: $space-xxx-small; }
+.ds-mb-xx-small  { margin-bottom: $space-xx-small; }
+.ds-mb-x-small   { margin-bottom: $space-x-small; }
+.ds-mb-small     { margin-bottom: $space-small; }
+.ds-mb-base      { margin-bottom: $space-base; }
+.ds-mb-large     { margin-bottom: $space-large; }
+.ds-mb-x-large   { margin-bottom: $space-x-large; }
+.ds-mb-xx-large  { margin-bottom: $space-xx-large; }
+
+// ds-space Ersatz — Margin-Top
+.ds-mt-xxx-small { margin-top: $space-xxx-small; }
+.ds-mt-xx-small  { margin-top: $space-xx-small; }
+.ds-mt-x-small   { margin-top: $space-x-small; }
+.ds-mt-small     { margin-top: $space-small; }
+.ds-mt-base      { margin-top: $space-base; }
+.ds-mt-large     { margin-top: $space-large; }
+.ds-mt-x-large   { margin-top: $space-x-large; }
+.ds-mt-xx-large  { margin-top: $space-xx-large; }
+
+// ds-space Ersatz — Margin Y (top + bottom)
+.ds-my-xxx-small { margin-top: $space-xxx-small; margin-bottom: $space-xxx-small; }
+.ds-my-xx-small  { margin-top: $space-xx-small; margin-bottom: $space-xx-small; }
+.ds-my-x-small   { margin-top: $space-x-small; margin-bottom: $space-x-small; }
+.ds-my-small     { margin-top: $space-small; margin-bottom: $space-small; }
+.ds-my-base      { margin-top: $space-base; margin-bottom: $space-base; }
+.ds-my-large     { margin-top: $space-large; margin-bottom: $space-large; }
+.ds-my-x-large   { margin-top: $space-x-large; margin-bottom: $space-x-large; }
+.ds-my-xx-large  { margin-top: $space-xx-large; margin-bottom: $space-xx-large; }
+
+// ds-space centered
+.ds-space-centered {
+  display: flex;
+  flex: 1;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+// ds-list-item bullet icon (replaces DsListItem Vue component's angle-right prefix)
+.ds-list-item::before {
+  content: '';
+  flex: 0 0 1.5em;
+  height: 1.2em;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%2370677e'%3E%3Cpath d='M12.969 4.281l11 11 .688.719-.688.719-11 11-1.438-1.438L21.812 16 11.531 5.719z'/%3E%3C/svg%3E") no-repeat left center;
+  background-size: 0.6em;
+}
+
+// ds-flex Ersatz
+.ds-flex          { display: flex; flex-wrap: wrap; }
+.ds-flex-no-wrap  { flex-wrap: nowrap; }
+.ds-flex-centered { align-items: center; justify-content: center; }
+.ds-flex-item     { flex: 1 0 0; min-width: 0; }
+
+.ds-flex-gap-xxx-small { gap: $space-xxx-small; }
+.ds-flex-gap-xx-small  { gap: $space-xx-small; }
+.ds-flex-gap-x-small   { gap: $space-x-small; }
+.ds-flex-gap-small     { gap: $space-small; }
+.ds-flex-gap-base      { gap: $space-base; }
+.ds-flex-gap-large     { gap: $space-large; }

webapp/assets/styles/main.scss

@@ -151,13 +151,10 @@ body.dropdown-open {
   overflow: hidden;
 }
 
-.os-card > .ds-section {
-  padding: 0;
-  margin: -$space-base;
-
-  .ds-container {
+.os-card > .ds-section,
+.os-card > .os-card__content > .ds-section {
   padding: $space-base;
-  }
+  margin: -$space-base;
 }
 
 .os-card {

webapp/components/AvatarMenu/AvatarMenu.vue

@@ -28,9 +28,9 @@
         {{ $t('login.hello') }}
         <b>{{ userName }}</b>
         <template v-if="user.role !== 'user'">
-          <ds-text color="softer" size="small" style="margin-bottom: 0">
+          <p class="ds-text ds-text-softer ds-text-size-small" style="margin-bottom: 0">
             {{ user.role | camelCase }}
-          </ds-text>
+          </p>
         </template>
         <hr />
         <ds-menu :routes="routes" :matcher="matcher">

webapp/components/Category/index.vue

@@ -1,8 +1,11 @@
 <template>
-  <ds-tag class="category-tag" :class="filterActive ? 'filterActive' : ''">
+  <span
+    class="ds-tag ds-tag-size-base ds-tag-medium category-tag"
+    :class="filterActive ? 'filterActive' : ''"
+  >
     <os-icon :icon="resolvedIcon" />
     {{ name }}
-  </ds-tag>
+  </span>
 </template>
 
 <script>

webapp/components/Chat/AddChatRoomByUserSearch.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="add-chat-room-by-user-search">
-    <ds-flex class="headline">
+    <div class="ds-flex headline">
       <h2 class="title">{{ $t('chat.addRoomHeadline') }}</h2>
       <os-button
         class="close-button"
@@ -15,11 +15,11 @@
           <os-icon :icon="icons.close" />
         </template>
       </os-button>
-    </ds-flex>
-    <ds-space margin-bottom="small" />
-    <ds-space>
+    </div>
+    <div class="ds-mb-small"></div>
+    <div class="ds-mb-large">
       <select-user-search :id="id" ref="selectUserSearch" @select-user="selectUser" />
-    </ds-space>
+    </div>
   </div>
 </template>
 

webapp/components/Chat/Chat.vue

@@ -32,8 +32,8 @@
     @open-file="openFile($event.detail[0].file.file)"
   >
     <div v-if="selectedRoom && selectedRoom.roomId" slot="room-options" class="chat-room-options">
-      <ds-flex v-if="singleRoom">
-        <ds-flex-item centered class="single-chat-bubble">
+      <div v-if="singleRoom" class="ds-flex">
+        <div class="ds-flex-item single-chat-bubble" style="align-self: center">
           <os-button
             as="nuxt-link"
             :to="{ name: 'chat' }"
@@ -47,8 +47,8 @@
               <os-icon :icon="icons.expand" />
             </template>
           </os-button>
-        </ds-flex-item>
-        <ds-flex-item centered>
+        </div>
+        <div class="ds-flex-item" style="align-self: center">
           <div class="vac-svg-button vac-room-options">
             <slot name="menu-icon">
               <os-button
@@ -65,8 +65,8 @@
               </os-button>
             </slot>
           </div>
-        </ds-flex-item>
-      </ds-flex>
+        </div>
+      </div>
     </div>
 
     <div slot="room-header-avatar">

webapp/components/ComponentSlider/ComponentSlider.vue

@@ -2,7 +2,7 @@
   <div class="Sliders">
     <slot :name="'header'" />
 
-    <ds-heading
+    <h3
       v-if="
         sliderData.sliders[sliderIndex].titleIdent &&
         ((typeof sliderData.sliders[sliderIndex].titleIdent === 'string' &&
@@ -13,7 +13,7 @@
               sliderData.sliders[sliderIndex].titleIdent.data,
             ).length > 0))
       "
-      size="h3"
+      class="ds-heading ds-heading-h3"
     >
       {{
         (typeof sliderData.sliders[sliderIndex].titleIdent === 'string' &&
@@ -24,12 +24,12 @@
             sliderData.sliders[sliderIndex].titleIdent.data,
           ))
       }}
-    </ds-heading>
+    </h3>
 
     <slot :name="sliderData.sliders[sliderIndex].name" />
 
-    <ds-flex>
-      <ds-flex-item v-if="multipleSliders" :centered="true">
+    <div class="ds-flex">
+      <div v-if="multipleSliders" class="ds-flex-item" style="align-self: center">
         <div
           v-for="(slider, index) in sliderData.sliders"
           :key="slider.name"
@@ -49,8 +49,8 @@
             @click="sliderData.sliderSelectorCallback(index)"
           />
         </div>
-      </ds-flex-item>
-      <ds-flex-item>
+      </div>
+      <div class="ds-flex-item">
         <os-button
           :style="multipleSliders && 'float: right'"
           variant="primary"
@@ -69,8 +69,8 @@
           </template>
           {{ $t(sliderData.sliders[sliderIndex].button.titleIdent) }}
         </os-button>
-      </ds-flex-item>
-    </ds-flex>
+      </div>
+    </div>
 
     <slot :name="'footer'" />
   </div>

webapp/components/ContributionForm/ContributionForm.vue

@@ -31,7 +31,7 @@
               <os-icon :icon="icons.questionCircle" />
             </page-params-link>
           </div>
-          <ds-space margin-top="base" />
+          <div class="ds-mt-base ds-mb-large"></div>
           <ds-input
             model="title"
             :placeholder="$t('contribution.title')"
@@ -57,7 +57,7 @@
           <!-- Eventdata -->
           <div v-if="createEvent" class="eventDatas">
             <hr />
-            <ds-space margin-top="x-small" />
+            <div class="ds-mt-x-small ds-mb-large"></div>
             <ds-grid>
               <ds-grid-item class="event-grid-item">
                 <!-- <label>Beginn</label> -->
@@ -147,7 +147,7 @@
               {{ $t('post.viewEvent.eventIsOnline') }}
             </div>
           </div>
-          <ds-space margin-top="x-small" />
+          <div class="ds-mt-x-small ds-mb-large"></div>
           <categories-select
             v-if="categoriesActive"
             model="categoryIds"
@@ -161,18 +161,17 @@
             {{ formData.categoryIds.length }} / 3
             <os-icon v-if="errors && errors.categoryIds" :icon="icons.warning" />
           </ds-chip>
-          <ds-flex class="buttons-footer" gutter="xxx-small">
-            <ds-flex-item width="3.5" class="buttons-footer-helper">
-              <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+          <div class="ds-flex ds-flex-gap-xxx-small buttons-footer">
+            <div style="flex: 3.5 0 0" class="buttons-footer-helper">
               <!-- TODO => remove v-html! only text ! no html! security first! -->
-              <ds-text
+              <p
+                class="ds-text"
                 v-if="showGroupHint"
                 v-html="$t('contribution.visibleOnlyForMembersOfGroup', { name: groupName })"
               />
-              <!-- eslint-enable vue/no-v-text-v-html-on-component -->
-            </ds-flex-item>
-            <ds-flex-item width="0.15" />
-            <ds-flex-item class="action-buttons-group" width="2">
+            </div>
+            <div style="flex: 0.15 0 0"></div>
+            <div class="action-buttons-group" style="flex: 2 0 0">
               <os-button
                 data-test="cancel-button"
                 variant="primary"
@@ -194,8 +193,8 @@
                 </template>
                 {{ $t('actions.save') }}
               </os-button>
-            </ds-flex-item>
-          </ds-flex>
+            </div>
+          </div>
         </os-card>
       </template>
     </ds-form>

webapp/components/DateTimeRange/DateTimeRange.vue

@@ -1,5 +1,8 @@
 <template>
-  <ds-text class="date-time-range" align="left" color="soft" :size="size">
+  <div
+    class="ds-text ds-text-left ds-text-soft date-time-range"
+    :class="size && 'ds-text-size-' + size"
+  >
     <div class="date-time-row">
       <div>
         <os-icon :icon="icons.calendar" data-test="calendar" />
@@ -25,7 +28,7 @@
         </div>
       </div>
     </template>
-  </ds-text>
+  </div>
 </template>
 
 <script>

webapp/components/Embed/EmbedComponent.vue

@@ -2,7 +2,7 @@
   <a v-if="showLinkOnly" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank">
     {{ dataEmbedUrl }}
   </a>
-  <ds-container v-else width="small" class="embed-component">
+  <div v-else class="ds-container ds-container-small embed-component">
     <section class="content">
       <div v-if="showEmbed" v-html="embedHtml" class="html" />
       <template v-else>
@@ -22,7 +22,7 @@
     </section>
     <aside v-if="showOverlay" class="overlay">
       <h3>{{ $t('editor.embed.data_privacy_warning') }}</h3>
-      <ds-text>{{ $t('editor.embed.data_privacy_info') }} {{ embedPublisher }}</ds-text>
+      <p class="ds-text">{{ $t('editor.embed.data_privacy_info') }} {{ embedPublisher }}</p>
       <div class="buttons">
         <os-button
           @click="closeOverlay()"
@@ -60,7 +60,7 @@
         <os-icon :icon="icons.close" />
       </template>
     </os-button>
-  </ds-container>
+  </div>
 </template>
 
 <script>

webapp/components/Empty/CallToAction/CtaJoinLeaveGroup.vue

@@ -1,7 +1,7 @@
 <template>
-  <ds-space centered margin="xxx-small">
-    <ds-space margin-bottom="small" />
-    <ds-heading tag="h4">
+  <div class="ds-my-xxx-small ds-space-centered">
+    <div class="ds-mb-small"></div>
+    <h4 class="ds-heading ds-heading-h4">
       {{ $t('contribution.comment.commenting-disabled.no-group-member.reason') }}
       <nuxt-link
         :to="{
@@ -11,10 +11,10 @@
       >
         {{ group.name }}
       </nuxt-link>
-    </ds-heading>
-    <ds-text>
+    </h4>
+    <p class="ds-text">
       {{ $t('contribution.comment.commenting-disabled.no-group-member.call-to-action') }}
-    </ds-text>
+    </p>
     <join-leave-button
       :group="group"
       :userId="$store.getters['auth/user'].id"
@@ -23,7 +23,7 @@
       :filled="true"
       @update="updateJoinLeave"
     />
-  </ds-space>
+  </div>
 </template>
 
 <script>

webapp/components/Empty/CallToAction/CtaUnblockAuthor.vue

@@ -1,12 +1,12 @@
 <template>
-  <ds-space centered margin="xxx-small">
-    <ds-space margin-bottom="small" />
-    <ds-heading tag="h4">
+  <div class="ds-my-xxx-small ds-space-centered">
+    <div class="ds-mb-small"></div>
+    <h4 class="ds-heading ds-heading-h4">
       {{ $t('contribution.comment.commenting-disabled.blocked-author.reason') }}
-    </ds-heading>
-    <ds-text>
+    </h4>
+    <p class="ds-text">
       {{ $t('contribution.comment.commenting-disabled.blocked-author.call-to-action') }}
-    </ds-text>
+    </p>
     <os-button as="nuxt-link" :to="authorLink" variant="primary" appearance="filled">
       <template #icon><os-icon :icon="icons.arrowRight" /></template>
       {{
@@ -15,7 +15,7 @@
         })
       }}
     </os-button>
-  </ds-space>
+  </div>
 </template>
 
 <script>

webapp/components/Empty/CallToAction/__snapshots__/CtaJoinLeaveGroup.spec.js.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CtaJoinLeaveGroup.vue mount renders 1`] = `
-<div class="ds-space ds-space-centered" style="margin-top: 2px; margin-bottom: 2px;">
-  <div class="ds-space" style="margin-bottom: 16px;"></div>
+<div class="ds-my-xxx-small ds-space-centered">
+  <div class="ds-mb-small"></div>
   <h4 class="ds-heading ds-heading-h4">
     contribution.comment.commenting-disabled.no-group-member.reason
     <a>

webapp/components/Empty/CallToAction/__snapshots__/CtaUnblockAuthor.spec.js.snap

@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CtaUnblockAuthor.vue shallowMount renders 1`] = `
-<ds-space-stub marginbottom="large" margin="xxx-small" centered="true" tag="div">
-  <ds-space-stub marginbottom="small" tag="div"></ds-space-stub>
-  <ds-heading-stub tag="h4">
+<div class="ds-my-xxx-small ds-space-centered">
+  <div class="ds-mb-small"></div>
+  <h4 class="ds-heading ds-heading-h4">
     contribution.comment.commenting-disabled.blocked-author.reason
-  </ds-heading-stub>
-  <ds-text-stub tag="p">
+  </h4>
+  <p class="ds-text">
     contribution.comment.commenting-disabled.blocked-author.call-to-action
-  </ds-text-stub>
+  </p>
   <os-button-stub as="nuxt-link" variant="primary" appearance="filled" size="md" type="button" to="[object Object]">
     contribution.comment.commenting-disabled.blocked-author.button-label
   </os-button-stub>
-</ds-space-stub>
+</div>
 `;

webapp/components/Empty/Empty.spec.js

@@ -46,7 +46,7 @@ describe('Empty.vue', () => {
       it('sets margin to that margin', () => {
         propsData.margin = 'xxx-small'
         wrapper = Wrapper()
-        expect(wrapper.find('.hc-empty').attributes().margin).toEqual(propsData.margin)
+        expect(wrapper.find('.hc-empty').classes()).toContain('ds-my-xxx-small')
       })
     })
   })

webapp/components/Empty/Empty.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <ds-space class="hc-empty" centered :margin="margin">
-      <ds-text>
+    <div class="hc-empty ds-space-centered" :class="'ds-my-' + margin">
+      <p class="ds-text">
         <img
           :src="iconPath"
           width="80"
@@ -10,11 +10,11 @@
           alt="Empty"
         />
         <br />
-        <ds-text v-show="message" class="hc-empty-message" color="softer">
+        <span class="ds-text-softer hc-empty-message" v-show="message">
           {{ message }}
-        </ds-text>
-      </ds-text>
-    </ds-space>
+        </span>
+      </p>
+    </div>
     <slot />
   </div>
 </template>
@@ -45,7 +45,7 @@ export default {
      * Vertical spacing
      */
     margin: {
-      type: [String, Object],
+      type: String,
       default: 'x-large',
     },
   },

webapp/components/EnterNonce/EnterNonce.vue

@@ -14,12 +14,12 @@
       id="nonce"
       icon="question-circle"
     />
-    <ds-text>
+    <p class="ds-text">
       {{ $t('components.registration.email-nonce.form.description') }}
-    </ds-text>
-    <ds-text>
+    </p>
+    <p class="ds-text">
       {{ $t('components.registration.email-nonce.form.click-next') }}
-    </ds-text>
+    </p>
     <os-button
       variant="primary"
       appearance="filled"

webapp/components/Group/AddGroupMember.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="add-group-member">
     <h2 class="title">{{ $t('group.addUser') }}</h2>
-    <ds-space margin-bottom="small" />
-    <ds-space>
+    <div class="ds-mb-small"></div>
+    <div class="ds-mb-large">
       <select-user-search :id="id" ref="selectUserSearch" @select-user="selectUser" />
       <ds-modal
         v-if="isOpen"
@@ -16,11 +16,11 @@
         @confirm="confirmModal"
         @cancel="cancelModal"
       >
-        <ds-text size="large">
+        <p class="ds-text ds-text-size-large">
           {{ $t('group.modal.confirmAddGroupMemberText', { name: user.name }) }}
-        </ds-text>
+        </p>
       </ds-modal>
-    </ds-space>
+    </div>
   </div>
 </template>
 

webapp/components/Group/GroupForm.vue

@@ -31,12 +31,12 @@
           :placeholder="`${$t('group.labelSlug')} …`"
         ></ds-input>
 
-        <ds-space v-if="update" margin-top="small" />
+        <div v-if="update" class="ds-mt-small ds-mb-large"></div>
 
         <!-- groupType -->
-        <ds-text class="select-label">
+        <p class="ds-text select-label">
           {{ $t('group.type') }}
-        </ds-text>
+        </p>
         <select
           class="select ds-input appearance--auto"
           name="groupType"
@@ -69,12 +69,12 @@
           rows="3"
         />
 
-        <ds-space margin-top="small" />
+        <div class="ds-mt-small ds-mb-large"></div>
 
         <!-- description -->
-        <ds-text class="select-label">
+        <p class="ds-text select-label">
           {{ $t('group.description') }}
-        </ds-text>
+        </p>
         <editor
           name="description"
           model="description"
@@ -89,9 +89,9 @@
         </ds-chip>
 
         <!-- actionRadius -->
-        <ds-text class="select-label">
+        <p class="ds-text select-label">
           {{ $t('group.actionRadius') }}
-        </ds-text>
+        </p>
         <action-radius-select
           v-model="formData.actionRadius"
           @change.native="changeActionRadius($event)"
@@ -112,13 +112,13 @@
         <!-- location -->
         <location-select v-model="formData.locationName" />
 
-        <ds-space margin-top="small" />
+        <div class="ds-mt-small ds-mb-large"></div>
 
         <!-- category -->
         <div v-if="categoriesActive">
-          <ds-text class="select-label">
+          <p class="ds-text select-label">
             {{ $t('group.categoriesTitle') }}
-          </ds-text>
+          </p>
 
           <categories-select
             model="categoryIds"
@@ -131,7 +131,7 @@
           </ds-chip>
         </div>
         <!-- submit -->
-        <ds-space margin-top="large">
+        <div class="buttons ds-mt-large ds-mb-large">
           <os-button as="nuxt-link" to="/groups" variant="default" appearance="filled">
             {{ $t('actions.cancel') }}
           </os-button>
@@ -144,7 +144,7 @@
             <template #icon><os-icon :icon="icons.save" /></template>
             {{ update ? $t('group.update') : $t('group.save') }}
           </os-button>
-        </ds-space>
+        </div>
       </template>
     </ds-form>
   </div>

webapp/components/Group/GroupList.vue

@@ -1,14 +1,9 @@
 <template>
-  <ds-flex class="group-list">
-    <ds-flex-item
-      v-for="group in groups"
-      :key="group.id"
-      :width="{ base: '98%', sm: '98%', md: '48%' }"
-      class="group-item"
-    >
+  <div class="ds-flex group-list">
+    <div v-for="group in groups" :key="group.id" class="group-list__item group-item">
       <group-teaser :group="group" />
-    </ds-flex-item>
-  </ds-flex>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -25,6 +20,16 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.group-list__item {
+  flex: 0 0 98%;
+  width: 98%;
+}
+@media #{$media-query-medium} {
+  .group-list__item {
+    flex: 0 0 48%;
+    width: 48%;
+  }
+}
 .group-item {
   margin: 0 1% 2% 1%;
 }

webapp/components/Group/GroupMember.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="group-member">
     <h2 class="title">{{ $t('group.membersListTitle') }}</h2>
-    <ds-space margin-bottom="small" />
+    <div class="ds-mb-small"></div>
     <ds-table :fields="tableFields" :data="groupMembers" condensed>
       <template #avatar="scope">
         <nuxt-link
@@ -20,9 +20,9 @@
             params: { id: scope.row.user.id, slug: scope.row.user.slug },
           }"
         >
-          <ds-text>
+          <p class="ds-text">
             <b>{{ scope.row.user.name | truncate(20) }}</b>
-          </ds-text>
+          </p>
         </nuxt-link>
       </template>
       <template #slug="scope">
@@ -32,9 +32,9 @@
             params: { id: scope.row.user.id, slug: scope.row.user.slug },
           }"
         >
-          <ds-text>
+          <p class="ds-text">
             <b>{{ `@${scope.row.user.slug}` | truncate(20) }}</b>
-          </ds-text>
+          </p>
         </nuxt-link>
       </template>
       <template #roleInGroup="scope">

webapp/components/Group/GroupTeaser.vue

@@ -12,16 +12,16 @@
       <div class="slug-location">
         <!-- group slug -->
         <div>
-          <ds-text color="soft">
+          <p class="ds-text ds-text-soft">
             {{ `&${group.slug}` }}
-          </ds-text>
+          </p>
         </div>
         <!-- group location -->
         <div class="location-item">
-          <ds-text v-if="group && group.location" color="soft">
+          <p class="ds-text ds-text-soft" v-if="group && group.location">
             <os-icon :icon="icons.mapMarker" />
             {{ group && group.location ? group.location.name : '' }}
-          </ds-text>
+          </p>
         </div>
       </div>
       <!-- TODO: replace editor content with tiptap render view -->
@@ -66,9 +66,9 @@
       <footer class="footer">
         <!-- group goal -->
         <div class="labeled-chip">
-          <ds-text class="label-text hyphenate-text" color="soft" size="small">
+          <p class="ds-text ds-text-soft ds-text-size-small label-text hyphenate-text">
             {{ $t('group.goal') }}
-          </ds-text>
+          </p>
           <div class="chip">
             <ds-chip v-if="group && group.about">{{ group ? group.about : '' }}</ds-chip>
           </div>

webapp/components/Hashtag/Hashtag.vue

@@ -1,7 +1,7 @@
 <template>
-  <ds-tag class="hc-hashtag">
+  <span class="ds-tag ds-tag-size-base ds-tag-medium hc-hashtag">
     <nuxt-link :to="hashtagUrl">#{{ id }}</nuxt-link>
-  </ds-tag>
+  </span>
 </template>
 
 <script>

webapp/components/HeaderMenu/HeaderMenu.vue

@@ -1,14 +1,14 @@
 <template>
-  <ds-container
-    class="main-navigation-container"
+  <div
+    class="ds-container ds-container-x-large main-navigation-container"
     :class="{ 'hide-navbar': hideNavbar }"
     id="navbar"
   >
     <div>
       <!-- header menu -->
-      <ds-flex v-if="!showMobileMenu" class="main-navigation-flex">
+      <div v-if="!showMobileMenu" class="ds-flex main-navigation-flex">
         <!-- logo -->
-        <ds-flex-item class="logo-wrapper" :width="{ base: 'auto' }">
+        <div class="ds-flex-item logo-wrapper" style="flex: 0 0 auto">
           <a
             v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
             :href="LOGOS.LOGO_HEADER_CLICK.externalLink.url"
@@ -23,47 +23,47 @@
           >
             <logo logoType="header" />
           </nuxt-link>
-        </ds-flex-item>
+        </div>
         <!-- dynamic brand menus -->
-        <ds-flex-item
+        <div
           v-for="item in menu"
           :key="item.name"
-          class="branding-menu"
-          :width="{ base: 'auto' }"
-          style="margin-right: 20px"
+          class="ds-flex-item branding-menu"
+          style="flex: 0 0 auto; margin-right: 20px"
         >
           <a v-if="item.url" :href="item.url" :target="item.target">
-            <ds-text size="large" bold>
+            <p class="ds-text ds-text-size-large ds-text-bold">
               {{ $t(item.nameIdent) }}
-            </ds-text>
+            </p>
           </a>
           <nuxt-link v-else :to="item.path">
-            <ds-text size="large" bold>
+            <p class="ds-text ds-text-size-large ds-text-bold">
               {{ $t(item.nameIdent) }}
-            </ds-text>
+            </p>
           </nuxt-link>
-        </ds-flex-item>
+        </div>
         <!-- search field -->
-        <ds-flex-item
+        <div
           v-if="isLoggedIn"
           id="nav-search-box"
-          class="header-search"
-          :width="{ base: 'auto' }"
+          class="ds-flex-item header-search"
+          style="flex: 0 0 auto"
         >
           <search-field />
-        </ds-flex-item>
+        </div>
         <!-- filter menu -->
         <!-- TODO: Filter is only visible on index -->
-        <ds-flex-item
+        <div
           v-if="isLoggedIn && SHOW_CONTENT_FILTER_HEADER_MENU"
+          class="ds-flex-item"
           style="flex-grow: 0; flex-basis: auto"
         >
           <client-only>
             <filter-menu v-show="showFilterMenuDropdown" />
           </client-only>
-        </ds-flex-item>
+        </div>
         <!-- right symbols -->
-        <ds-flex-item style="flex: none">
+        <div class="ds-flex-item" style="flex: none">
           <div class="main-navigation-right" style="flex-basis: auto">
             <!-- locale switch -->
             <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
@@ -131,14 +131,17 @@
               </client-only>
             </template>
           </div>
-        </ds-flex-item>
-      </ds-flex>
+        </div>
+      </div>
 
       <!-- mobile header menu -->
       <div v-else class="mobil-header-box">
         <!-- logo, hamburger-->
-        <ds-flex style="align-items: center">
-          <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" class="logo-container">
+        <div class="ds-flex" style="align-items: center">
+          <div
+            class="ds-flex-item logo-container"
+            :style="{ flex: '0 0 ' + LOGOS.LOGO_HEADER_WIDTH, width: LOGOS.LOGO_HEADER_WIDTH }"
+          >
             <div @click="toggleMobileMenu ? toggleMobileMenuView() : ''">
               <a
                 v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
@@ -155,10 +158,10 @@
                 <logo logoType="header" />
               </nuxt-link>
             </div>
-          </ds-flex-item>
+          </div>
 
           <!-- mobile hamburger menu -->
-          <ds-flex-item class="mobile-hamburger-menu">
+          <div class="ds-flex-item mobile-hamburger-menu">
             <client-only>
               <!-- chat menu -->
               <div>
@@ -182,52 +185,56 @@
                 <os-icon :icon="icons.bars" />
               </template>
             </os-button>
-          </ds-flex-item>
-        </ds-flex>
+          </div>
+        </div>
         <!-- search, filter -->
-        <ds-flex class="mobile-menu">
+        <div class="ds-flex mobile-menu">
           <!-- search field mobile -->
-          <ds-flex-item
+          <div
             v-if="isLoggedIn"
+            class="ds-flex-item"
             :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             style="padding: 20px"
           >
             <search-field />
-          </ds-flex-item>
+          </div>
           <!-- filter menu mobile -->
-          <ds-flex-item
+          <div
             v-if="isLoggedIn"
+            class="ds-flex-item"
             :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             style="flex-grow: 0; flex-basis: auto; padding: 20px 0"
           >
             <client-only>
               <filter-menu v-if="showFilterMenuDropdown && SHOW_CONTENT_FILTER_HEADER_MENU" />
             </client-only>
-          </ds-flex-item>
-        </ds-flex>
+          </div>
+        </div>
         <!-- right symbols -->
-        <ds-flex style="margin: 0 20px">
+        <div class="ds-flex" style="margin: 0 20px">
           <!-- locale switch mobile -->
-          <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
+          <div class="ds-flex-item" :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
             <locale-switch
               class="topbar-locale-switch topbar-locale-switch-mobile"
               placement="top"
               offset="8"
             />
-          </ds-flex-item>
+          </div>
           <!-- invite button mobile -->
-          <ds-flex-item
+          <div
             v-if="inviteRegistration"
+            class="ds-flex-item"
             :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             style="text-align: center"
           >
             <client-only>
               <invite-button placement="top" />
             </client-only>
-          </ds-flex-item>
+          </div>
           <!-- group button -->
-          <ds-flex-item
+          <div
             v-if="SHOW_GROUP_BUTTON_IN_HEADER"
+            class="ds-flex-item"
             :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             style="text-align: center"
           >
@@ -251,10 +258,11 @@
                 </os-button>
               </div>
             </client-only>
-          </ds-flex-item>
+          </div>
           <!-- map button -->
-          <ds-flex-item
+          <div
             v-if="!isEmpty(this.$env.MAPBOX_TOKEN)"
+            class="ds-flex-item"
             :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             style="text-align: center"
           >
@@ -279,10 +287,11 @@
                 </os-button>
               </div>
             </client-only>
-          </ds-flex-item>
+          </div>
           <!-- custom button -->
-          <ds-flex-item
+          <div
             v-if="!isEmpty(customButton)"
+            class="ds-flex-item"
             :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             style="text-align: center"
           >
@@ -291,14 +300,18 @@
                 <custom-button :settings="customButton" />
               </div>
             </client-only>
-          </ds-flex-item>
+          </div>
           <!-- avatar menu mobile -->
-          <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }" style="text-align: end">
+          <div
+            class="ds-flex-item"
+            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+            style="text-align: end"
+          >
             <client-only>
               <avatar-menu placement="top" @toggle-Mobile-Menu-view="toggleMobileMenuView" />
             </client-only>
-          </ds-flex-item>
-        </ds-flex>
+          </div>
+        </div>
         <div :class="{ 'hide-mobile-menu': !toggleMobileMenu }" class="mobile-menu footer-mobile">
           <!-- dynamic branding menus -->
           <ul v-if="isHeaderMenu" class="dynamic-branding-mobil">
@@ -309,15 +322,15 @@
                 :target="item.target"
                 @click="toggleMobileMenuView"
               >
-                <ds-text size="large" bold>
+                <p class="ds-text ds-text-size-large ds-text-bold">
                   {{ $t(item.nameIdent) }}
-                </ds-text>
+                </p>
               </a>
               <nuxt-link v-else :to="item.path">
                 <div @click="toggleMobileMenuView">
-                  <ds-text size="large" bold>
+                  <p class="ds-text ds-text-size-large ds-text-bold">
                     {{ $t(item.nameIdent) }}
-                  </ds-text>
+                  </p>
                 </div>
               </nuxt-link>
             </li>
@@ -338,7 +351,7 @@
         </div>
       </div>
     </div>
-  </ds-container>
+  </div>
 </template>
 
 <script>

webapp/components/LocationTeaser/LocationTeaser.vue

@@ -1,5 +1,8 @@
 <template>
-  <ds-text class="location-teaser" align="left" color="soft" :size="size">
+  <p
+    class="ds-text ds-text-left ds-text-soft location-teaser"
+    :class="size && 'ds-text-size-' + size"
+  >
     <os-icon :icon="icons.mapMarker" data-test="map-marker" />
     <span v-if="venue">{{ venue }}</span>
     <span v-if="venue">&nbsp;&mdash;&nbsp;</span>
@@ -9,7 +12,7 @@
     <span v-else>
       {{ $t('post.viewEvent.eventIsOnline') }}
     </span>
-  </ds-text>
+  </p>
 </template>
 
 <script>

webapp/components/Modal/ConfirmModal.vue

@@ -1,9 +1,9 @@
 <template>
   <ds-modal :title="title" :is-open="isOpen" @cancel="cancel" data-test="confirm-modal">
     <transition name="ds-transition-fade">
-      <ds-flex v-if="success" class="hc-modal-success" centered>
+      <div v-if="success" class="ds-flex ds-flex-centered hc-modal-success">
         <sweetalert-icon icon="success" />
-      </ds-flex>
+      </div>
     </transition>
 
     <!-- eslint-disable-next-line vue/no-v-html -->

webapp/components/Modal/DeleteUserModal.vue

@@ -1,39 +1,39 @@
 <template>
   <ds-modal class="delete-user-modal" :title="title" :is-open="isOpen" @cancel="cancel">
     <transition name="ds-transition-fade">
-      <ds-flex v-if="success" class="hc-modal-success" centered>
+      <div v-if="success" class="ds-flex ds-flex-centered hc-modal-success">
         <sweetalert-icon icon="success" />
-      </ds-flex>
+      </div>
     </transition>
     <div>
-      <ds-section>
-        <ds-flex>
-          <ds-flex-item width="50%">
+      <section class="ds-section">
+        <div class="ds-flex">
+          <div style="flex: 0 0 50%; width: 50%">
             <user-teaser :user="userdata" />
-          </ds-flex-item>
-          <ds-flex-item width="20%">
-            <ds-text size="small">
+          </div>
+          <div style="flex: 0 0 20%; width: 20%">
+            <p class="ds-text ds-text-size-small">
               <span class="bold">{{ $t('modals.deleteUser.created') }}</span>
               <br />
               <date-time :date-time="userdata.createdAt" />
-            </ds-text>
-          </ds-flex-item>
-          <ds-flex-item width="15%">
-            <ds-text size="small">
+            </p>
+          </div>
+          <div style="flex: 0 0 15%; width: 15%">
+            <p class="ds-text ds-text-size-small">
               <span class="bold">{{ $t('common.post', null, userdata.contributionsCount) }}</span>
               <br />
               {{ userdata.contributionsCount }}
-            </ds-text>
-          </ds-flex-item>
-          <ds-flex-item width="15%">
-            <ds-text size="small">
+            </p>
+          </div>
+          <div style="flex: 0 0 15%; width: 15%">
+            <p class="ds-text ds-text-size-small">
               <span class="bold">{{ $t('common.comment', null, userdata.commentedCount) }}</span>
               <br />
               {{ userdata.commentedCount }}
-            </ds-text>
-          </ds-flex-item>
-        </ds-flex>
-      </ds-section>
+            </p>
+          </div>
+        </div>
+      </section>
     </div>
 
     <template #footer>

webapp/components/Modal/ReportModal.vue

@@ -1,9 +1,9 @@
 <template>
   <ds-modal class="report-modal" :title="title" :is-open="isOpen" @cancel="cancel">
     <transition name="ds-transition-fade">
-      <ds-flex v-if="success" class="hc-modal-success" centered>
+      <div v-if="success" class="ds-flex ds-flex-centered hc-modal-success">
         <sweetalert-icon icon="success" />
-      </ds-flex>
+      </div>
     </transition>
 
     <!-- eslint-disable-next-line vue/no-v-html -->
@@ -27,7 +27,7 @@
     <small class="smallTag">
       {{ form.reasonDescription.length }}/{{ formSchema.reasonDescription.max }}
     </small>
-    <ds-space />
+    <div class="ds-mb-large"></div>
     <template #footer>
       <os-button class="cancel" variant="primary" appearance="outline" @click="cancel">
         <template #icon>

webapp/components/NotificationMenu/NotificationMenu.vue

@@ -43,8 +43,8 @@
       </os-button>
     </template>
     <template #popover="{ closeMenu }">
-      <ds-flex class="notifications-link-container">
-        <ds-flex-item>
+      <div class="ds-flex notifications-link-container">
+        <div class="ds-flex-item">
           <os-button
             as="nuxt-link"
             :to="{ name: 'notifications' }"
@@ -67,8 +67,8 @@
             </template>
             {{ $t('notifications.markAllAsRead') }}
           </os-button>
-        </ds-flex-item>
-      </ds-flex>
+        </div>
+      </div>
       <div class="notifications-menu-popover">
         <notifications-table
           @markNotificationAsRead="markAsReadAndCloseMenu($event, closeMenu)"

webapp/components/NotificationsTable/NotificationsTable.vue

@@ -16,8 +16,8 @@
       >
         <ds-grid>
           <ds-grid-item>
-            <ds-flex class="user-section">
-              <ds-flex-item>
+            <div class="ds-flex user-section">
+              <div class="ds-flex-item">
                 <user-teaser
                   :user="
                     isGroup(notification.from) ? notification.relatedUser : notification.from.author
@@ -28,8 +28,8 @@
                   :injected-date="true"
                   :show-popover="showPopover"
                 />
-              </ds-flex-item>
-            </ds-flex>
+              </div>
+            </div>
           </ds-grid-item>
           <ds-grid-item>
             <div class="notification-container">

webapp/components/Password/Change.vue

@@ -23,7 +23,7 @@
         :label="$t('settings.security.change-password.label-new-password-confirm')"
       />
       <password-strength :password="formData.password" />
-      <ds-space margin-top="base">
+      <div class="ds-mt-base ds-mb-large">
         <os-button
           variant="primary"
           appearance="filled"
@@ -36,7 +36,7 @@
           </template>
           {{ $t('settings.security.change-password.button') }}
         </os-button>
-      </ds-space>
+      </div>
     </template>
   </ds-form>
 </template>

webapp/components/PasswordReset/ChangePassword.vue

@@ -1,5 +1,5 @@
 <template>
-  <ds-space margin-top="base" margin-bottom="xxx-small">
+  <div class="ds-mt-base ds-mb-xxx-small">
     <ds-form
       v-if="!changePasswordResult"
       v-model="formData"
@@ -23,7 +23,7 @@
           :label="$t('settings.security.change-password.label-new-password-confirm')"
         />
         <password-strength :password="formData.password" />
-        <ds-space margin-top="base" margin-bottom="xxx-small">
+        <div class="ds-mt-base ds-mb-xxx-small">
           <os-button
             variant="primary"
             appearance="filled"
@@ -36,37 +36,35 @@
             </template>
             {{ $t('settings.security.change-password.button') }}
           </os-button>
-        </ds-space>
+        </div>
       </template>
     </ds-form>
-    <ds-space v-else>
+    <div v-else class="ds-mb-large">
       <template v-if="changePasswordResult === 'success'">
         <transition name="ds-transition-fade">
           <sweetalert-icon icon="success" />
         </transition>
-        <ds-text>
+        <p class="ds-text">
           {{ $t('components.password-reset.change-password.success') }}
-        </ds-text>
+        </p>
       </template>
       <template v-else>
         <transition name="ds-transition-fade">
           <sweetalert-icon icon="error" />
         </transition>
-        <ds-text>
-          <p>
+        <p class="ds-text">
           {{ $t(`components.password-reset.change-password.error`) }}
         </p>
-          <p>
+        <p class="ds-text">
           {{ $t('components.password-reset.change-password.help') }}
         </p>
-          <p>
+        <p class="ds-text">
           <a :href="'mailto:' + supportEmail">{{ supportEmail }}</a>
         </p>
-        </ds-text>
       </template>
       <slot></slot>
-    </ds-space>
-  </ds-space>
+    </div>
+  </div>
 </template>
 
 <script>

webapp/components/PasswordReset/Request.vue

@@ -7,7 +7,7 @@
     :schema="formSchema"
     @submit="handleSubmit"
   >
-    <ds-space margin="small">
+    <div class="ds-my-small">
       <ds-input
         :placeholder="$t('login.email')"
         type="email"
@@ -16,10 +16,12 @@
         name="email"
         icon="envelope"
       />
-    </ds-space>
-    <ds-space margin-botton="large">
-      <ds-text align="left">{{ $t('components.password-reset.request.form.description') }}</ds-text>
-    </ds-space>
+    </div>
+    <div class="ds-mb-large">
+      <p class="ds-text ds-text-left">
+        {{ $t('components.password-reset.request.form.description') }}
+      </p>
+    </div>
     <os-button
       variant="primary"
       appearance="filled"
@@ -33,11 +35,11 @@
   </ds-form>
   <div v-else>
     <transition name="ds-transition-fade">
-      <ds-flex centered>
+      <div class="ds-flex ds-flex-centered">
         <sweetalert-icon icon="info" />
-      </ds-flex>
+      </div>
     </transition>
-    <ds-text v-html="submitMessage" align="left" />
+    <p class="ds-text ds-text-left" v-html="submitMessage" />
   </div>
 </template>
 

webapp/components/PostTeaser/PostTeaser.vue

@@ -26,11 +26,7 @@
       </client-only>
       <h2 class="title hyphenate-text">{{ post.title }}</h2>
       <client-only>
-        <ds-space
-          v-if="post && post.postType[0] === 'Event'"
-          margin-bottom="small"
-          style="padding: 5px"
-        >
+        <div v-if="post && post.postType[0] === 'Event'" class="ds-mb-small" style="padding: 5px">
           <location-teaser
             class="event-info"
             size="base"
@@ -44,7 +40,7 @@
             :startDate="post.eventStart"
             :endDate="post.eventEnd"
           />
-        </ds-space>
+        </div>
       </client-only>
       <!-- TODO: replace editor content with tiptap render view -->
       <!-- eslint-disable-next-line vue/no-v-html -->

webapp/components/Registration/EmailDisplayAndVerify.vue

@@ -1,5 +1,5 @@
 <template>
-  <ds-text>
+  <p class="ds-text">
     <b v-if="emailAsString.length > 0">
       {{ emailAsString }}
       <b v-if="!isEmailFormat" class="email-warning">
@@ -9,7 +9,7 @@
     <b v-else class="email-warning">
       {{ $t('components.registration.email-display.warningUndef') }}
     </b>
-  </ds-text>
+  </p>
 </template>
 
 <script>

webapp/components/Registration/RegistrationSlideCreate.vue

@@ -3,26 +3,26 @@
     <transition name="ds-transition-fade">
       <sweetalert-icon icon="success" />
     </transition>
-    <ds-text align="center" bold color="success">
+    <p class="ds-text ds-text-center ds-text-bold ds-text-success">
       {{ $t('components.registration.create-user-account.success') }}
-    </ds-text>
-    <ds-space margin="xxx-small" />
+    </p>
+    <div class="ds-my-xxx-small"></div>
   </div>
   <div v-else-if="response === 'error'">
     <transition name="ds-transition-fade">
       <sweetalert-icon icon="error" />
     </transition>
-    <ds-text align="center" bold color="danger">
+    <p class="ds-text ds-text-center ds-text-bold ds-text-danger">
       {{ $t('components.registration.create-user-account.error') }}
-    </ds-text>
-    <ds-text align="center">
+    </p>
+    <p class="ds-text ds-text-center">
       {{ $t('components.registration.create-user-account.help') }}
       <a :href="'mailto:' + supportEmail">{{ supportEmail }}</a>
-    </ds-text>
-    <ds-space centered>
+    </p>
+    <div class="ds-mb-large ds-space-centered">
       <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
-    </ds-space>
-    <ds-space margin="xxx-small" />
+    </div>
+    <div class="ds-my-xxx-small"></div>
   </div>
   <div v-else class="create-account-card">
     <ds-form
@@ -150,7 +150,7 @@
           </div>
         </div>
       </template>
-      <ds-space margin="xxx-small" />
+      <div class="ds-my-xxx-small"></div>
     </ds-form>
   </div>
 </template>

webapp/components/Registration/RegistrationSlideEmail.vue

@@ -6,18 +6,23 @@
     @input="handleInput"
     @input-valid="handleInputValid"
   >
-    <ds-text>
+    <p class="ds-text">
       {{ $t('components.registration.signup.form.description') }}
-    </ds-text>
+    </p>
     <ds-input :placeholder="$t('login.email')" type="email" id="email" model="email" name="email" />
     <slot></slot>
-    <ds-text v-if="sliderData.collectedInputData.emailSend">
-      <input id="checkbox" type="checkbox" v-model="sendEmailAgain" :checked="sendEmailAgain" />
-      <label for="checkbox0">
+    <p class="ds-text" v-if="sliderData.collectedInputData.emailSend">
+      <input
+        id="sendEmailAgain"
+        type="checkbox"
+        v-model="sendEmailAgain"
+        :checked="sendEmailAgain"
+      />
+      <label for="sendEmailAgain">
         {{ $t('components.registration.email.form.sendEmailAgain') }}
       </label>
-    </ds-text>
-    <ds-space margin="xxx-small" />
+    </p>
+    <div class="ds-my-xxx-small"></div>
   </ds-form>
 </template>
 

webapp/components/Registration/RegistrationSlideInvite.vue

@@ -14,9 +14,9 @@
       name="inviteCode"
       id="inviteCode"
     />
-    <ds-text v-if="!validInput">
+    <p class="ds-text" v-if="!validInput">
       {{ $t('components.registration.invite-code.form.description') }}
-    </ds-text>
+    </p>
     <div class="invitation-info" v-if="invitedBy">
       <profile-avatar :profile="invitedBy" size="small" />
       <span v-if="invitedTo && invitedTo.groupType === 'hidden'">
@@ -39,7 +39,7 @@
       </span>
     </div>
     <slot></slot>
-    <ds-space margin="xxx-small" />
+    <div class="ds-my-xxx-small"></div>
   </ds-form>
 </template>
 

webapp/components/Registration/RegistrationSlideNoPublic.vue

@@ -1,9 +1,9 @@
 <template>
-  <ds-space centered>
+  <div class="ds-mb-large ds-space-centered">
     <hc-empty icon="events" :message="$t('components.registration.signup.unavailable')" />
     <slot></slot>
-    <ds-space margin="xxx-small" />
-  </ds-space>
+    <div class="ds-my-xxx-small"></div>
+  </div>
 </template>
 
 <script>

webapp/components/Registration/RegistrationSlideNonce.vue

@@ -14,11 +14,11 @@
       name="nonce"
       id="nonce"
     />
-    <ds-text>
+    <p class="ds-text">
       {{ $t('components.registration.email-nonce.form.description') }}
-    </ds-text>
+    </p>
     <slot></slot>
-    <ds-space margin="xxx-small" />
+    <div class="ds-my-xxx-small"></div>
   </ds-form>
 </template>
 

webapp/components/Registration/Signup.vue

@@ -1,5 +1,5 @@
 <template>
-  <ds-space v-if="!data && !error" margin="large">
+  <div v-if="!data && !error" class="ds-my-large">
     <ds-form
       @input="handleInput"
       @input-valid="handleInputValid"
@@ -14,15 +14,15 @@
             : $t('components.registration.signup.title', metadata)
         }}
       </h1>
-      <ds-space margin-botton="large">
-        <ds-text>
+      <div class="ds-mb-large">
+        <p class="ds-text">
           {{
             invitation
               ? $t('profile.invites.description')
               : $t('components.registration.signup.form.description')
           }}
-        </ds-text>
-      </ds-space>
+        </p>
+      </div>
       <ds-input
         :placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
         type="email"
@@ -41,22 +41,22 @@
       </os-button>
       <slot></slot>
     </ds-form>
-  </ds-space>
-  <div v-else margin="large">
+  </div>
+  <div v-else class="ds-my-large">
     <template v-if="!error">
       <transition name="ds-transition-fade">
         <sweetalert-icon icon="info" />
       </transition>
-      <ds-text align="center" v-html="submitMessage" />
+      <p class="ds-text ds-text-center" v-html="submitMessage" />
     </template>
     <template v-else>
       <transition name="ds-transition-fade">
         <sweetalert-icon icon="error" />
       </transition>
-      <ds-text align="center">{{ error.message }}</ds-text>
-      <ds-space centered class="space-top">
+      <p class="ds-text ds-text-center">{{ error.message }}</p>
+      <div class="ds-mb-large ds-space-centered space-top">
         <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
-      </ds-space>
+      </div>
     </template>
   </div>
 </template>
@@ -143,7 +143,7 @@ export default {
   },
 }
 </script>
-<style>
+<style scoped>
 .space-top {
   margin-top: 6ex;
 }

webapp/components/SocialMedia/SocialMedia.spec.js

@@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils'
 import SocialMedia from './SocialMedia.vue'
 
 const stubs = {
-  'ds-space': true,
   'ds-text': true,
 }
 

webapp/components/SocialMedia/SocialMedia.vue

@@ -1,21 +1,21 @@
 <template>
-  <ds-space v-if="user.socialMedia && user.socialMedia.length" margin="large">
+  <div v-if="user.socialMedia && user.socialMedia.length" class="ds-my-large">
     <os-card class="social-media-bc">
-      <ds-space margin="x-small">
-        <ds-text tag="h5" color="soft" data-test="social-media-list-headline">
+      <div class="ds-my-x-small">
+        <h5 class="ds-text ds-text-soft" data-test="social-media-list-headline">
           {{ $t('profile.socialMedia') }} {{ userName | truncate(15) }}?
-        </ds-text>
+        </h5>
         <template>
-          <ds-space v-for="link in socialMediaLinks()" :key="link.id" margin="x-small">
+          <div v-for="link in socialMediaLinks()" :key="link.url" class="ds-my-x-small">
             <a :href="link.url" target="_blank">
               <img :src="link.favicon" alt="Link:" height="22" width="22" />
               {{ link.username }}
             </a>
-          </ds-space>
+          </div>
         </template>
-      </ds-space>
+      </div>
     </os-card>
-  </ds-space>
+  </div>
 </template>
 
 <script>

webapp/components/_new/features/InternalPage/InternalPage.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <ds-space margin="small">
-      <ds-heading v-if="pageParams.internalPage.headlineIdent !== null" tag="h2">
+    <div class="ds-my-small">
+      <h2 v-if="pageParams.internalPage.headlineIdent !== null" class="ds-heading ds-heading-h2">
         {{ $t(pageParams.internalPage.headlineIdent) }}
-      </ds-heading>
-    </ds-space>
-    <ds-container v-if="pageParams.internalPage.hasContainer">
+      </h2>
+    </div>
+    <div class="ds-container ds-container-x-large" v-if="pageParams.internalPage.hasContainer">
       <div v-if="!pageParams.internalPage.hasBaseCard">
         <br />
         <div v-html="$t(pageParams.internalPage.htmlIdent)" />
@@ -13,7 +13,7 @@
       <os-card v-else>
         <div v-html="$t(pageParams.internalPage.htmlIdent)" />
       </os-card>
-    </ds-container>
+    </div>
     <div v-else-if="!pageParams.internalPage.hasBaseCard">
       <br />
       <div v-html="$t(pageParams.internalPage.htmlIdent)" />

webapp/components/_new/features/MySomethingList/MySomethingList.vue

@@ -7,19 +7,19 @@
     @submit="handleSubmitItem"
   >
     <div v-if="isEditing">
-      <ds-space margin="base">
-        <ds-heading tag="h5">
+      <div class="ds-my-base">
+        <h5 class="ds-heading ds-heading-h5">
           {{ isCreation ? texts.addNew : texts.edit + ' — ' + editingItem[namePropertyKey] }}
-        </ds-heading>
-      </ds-space>
-      <ds-space v-if="items" margin-top="base">
+        </h5>
+      </div>
+      <div v-if="items" class="ds-mt-base ds-mb-large">
         <slot name="edit-item" />
-      </ds-space>
+      </div>
     </div>
     <div v-else>
-      <ds-space v-if="items" margin-top="base">
-        <ds-list>
-          <ds-list-item v-for="item in items" :key="item.id" class="list-item--high">
+      <div v-if="items" class="ds-mt-base ds-mb-large">
+        <ul class="ds-list">
+          <li v-for="item in items" :key="item.id" class="ds-list-item list-item--high">
             <template>
               <slot name="list-item" :item="item" />
               <span class="divider">|</span>
@@ -50,13 +50,12 @@
                 </template>
               </os-button>
             </template>
-          </ds-list-item>
-        </ds-list>
-      </ds-space>
+          </li>
+        </ul>
+      </div>
     </div>
 
-    <ds-space margin-top="base">
-      <ds-space margin-top="base">
+    <div class="ds-mt-base ds-mb-large">
       <os-button
         variant="primary"
         appearance="filled"
@@ -76,8 +75,7 @@
       >
         {{ $t('actions.cancel') }}
       </os-button>
-      </ds-space>
-    </ds-space>
+    </div>
   </ds-form>
 </template>
 
@@ -216,13 +214,7 @@ export default {
 }
 
 .list-item--high {
-  .ds-list-item-prefix {
-    align-self: center;
-  }
-
-  .ds-list-item-content {
   display: flex;
   align-items: center;
-  }
 }
 </style>

webapp/components/_new/features/SearchResults/SearchResults.vue

@@ -1,15 +1,15 @@
 <template>
   <div id="search-results" class="search-results">
-    <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
+    <div class="search-results__content">
       <masonry-grid>
         <!-- search text -->
         <ds-grid-item class="grid-total-search-results" :row-span="1" column-span="fullWidth">
-          <ds-space margin-bottom="xxx-small" margin-top="xxx-small" centered>
-            <ds-text class="total-search-results">
+          <div class="ds-mb-xxx-small ds-mt-xxx-small ds-space-centered">
+            <p class="ds-text total-search-results">
               {{ $t('search.for') }}
               <strong>{{ '"' + (search || '') + '"' }}</strong>
-            </ds-text>
-          </ds-space>
+            </p>
+          </div>
         </ds-grid-item>
 
         <!-- tabs -->
@@ -20,7 +20,7 @@
         <template v-if="!(!activeResourceCount || searchCount === 0)">
           <!-- pagination buttons -->
           <ds-grid-item v-if="activeResourceCount > pageSize" :row-span="2" column-span="fullWidth">
-            <ds-space centered>
+            <div class="ds-mb-large ds-space-centered">
               <pagination-buttons
                 :hasNext="hasNext"
                 :showPageCounter="true"
@@ -32,7 +32,7 @@
                 @back="previousResults"
                 @next="nextResults"
               />
-            </ds-space>
+            </div>
           </ds-grid-item>
 
           <!-- posts -->
@@ -86,7 +86,7 @@
 
           <!-- pagination buttons -->
           <ds-grid-item v-if="activeResourceCount > pageSize" :row-span="2" column-span="fullWidth">
-            <ds-space centered>
+            <div class="ds-mb-large ds-space-centered">
               <pagination-buttons
                 :hasNext="hasNext"
                 :hasPrevious="hasPrevious"
@@ -99,18 +99,18 @@
                 @back="previousResults"
                 @next="nextResults"
               />
-            </ds-space>
+            </div>
           </ds-grid-item>
         </template>
 
         <!-- no results -->
         <ds-grid-item v-else :row-span="7" column-span="fullWidth">
-          <ds-space centered>
+          <div class="ds-mb-large ds-space-centered">
             <hc-empty icon="tasks" :message="$t('search.no-results', { search })" />
-          </ds-space>
+          </div>
         </ds-grid-item>
       </masonry-grid>
-    </ds-flex-item>
+    </div>
   </div>
 </template>
 
@@ -409,6 +409,25 @@ export default {
 </script>
 
 <style lang="scss">
+.search-results__content {
+  flex: 0 0 100%;
+  width: 100%;
+}
+@media #{$media-query-small} {
+  .search-results__content {
+    flex: 3 0 0;
+  }
+}
+@media #{$media-query-medium} {
+  .search-results__content {
+    flex: 5 0 0;
+  }
+}
+@media #{$media-query-large} {
+  .search-results__content {
+    flex: 3 0 0;
+  }
+}
 .search-results {
   > .results {
     padding: $space-small;

webapp/components/_new/generic/TabNavigation/TabNavigation.vue

@@ -14,13 +14,13 @@
           :data-test="tab.type + '-tab'"
         >
           <a :data-test="tab.type + '-tab-click'" @click="switchTab(tab)">
-            <ds-space margin="small">
+            <div class="ds-my-small">
               <client-only :placeholder="$t('client-only.loading')">
                 <ds-number :label="tab.title">
                   <hc-count-to slot="count" :end-val="tab.count" />
                 </ds-number>
               </client-only>
-            </ds-space>
+            </div>
           </a>
         </li>
       </ul>

webapp/components/_new/generic/TabNavigation/TabNavigator.story.js

@@ -179,9 +179,9 @@ storiesOf('TabNavigator', module)
 
             <!-- no results -->
             <ds-grid-item v-else :row-span="7" column-span="fullWidth">
-              <ds-space centered>
+              <div class="ds-mb-large ds-space-centered">
                 <hc-empty icon="tasks" :message="$t('search.no-results', { search })" />
-              </ds-space>
+              </div>
             </ds-grid-item>
           </masonry-grid>
         </ds-flex-item>

webapp/components/features/FiledReportsTable/FiledReportsTable.vue

@@ -15,9 +15,9 @@
       />
     </template>
     <template #reportedOn="scope">
-      <ds-text size="small">
+      <p class="ds-text ds-text-size-small">
         <date-time :date-time="scope.row.createdAt" data-test="filed-date" />
-      </ds-text>
+      </p>
     </template>
     <template #reasonCategory="scope">
       {{ $t('report.reason.category.options.' + scope.row.reasonCategory) }}

webapp/components/features/ProfileList/FollowList.spec.js

@@ -8,7 +8,6 @@ const localVue = global.localVue
 
 const stubs = {
   'client-only': true,
-  'ds-space': true,
   'nuxt-link': true,
 }
 

webapp/components/generic/SearchHeading/SearchHeading.vue

@@ -1,7 +1,7 @@
 <template>
-  <ds-heading soft size="h5" class="search-heading">
+  <h5 class="ds-heading ds-heading-h5 ds-heading-soft search-heading">
     {{ $t(`search.heading.${resourceType}`, {}, 2) }}
-  </ds-heading>
+  </h5>
 </template>
 <script>
 export default {

webapp/layouts/basic.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="layout-blank">
     <div class="main-navigation">
-      <ds-container width="x-large" class="main-navigation-container" style="padding: 10px 10px">
-        <ds-flex class="main-navigation-flex" centered>
-          <ds-flex-item width="5.5%" />
-          <ds-flex-item style="flex-grow: 1" width="20%">
+      <div
+        class="ds-container ds-container-x-large main-navigation-container"
+        style="padding: 10px 10px"
+      >
+        <div class="ds-flex ds-flex-centered main-navigation-flex">
+          <div style="flex: 0 0 5.5%; width: 5.5%"></div>
+          <div style="flex: 0 0 20%; width: 20%; flex-grow: 1">
             <a @click="redirectToRoot">
               <logo logoType="header" />
             </a>
-          </ds-flex-item>
-          <ds-flex-item width="20%" style="flex-grow: 0">
+          </div>
+          <div style="flex: 0 0 20%; width: 20%; flex-grow: 0">
             <div class="main-navigation-right" style="flex-basis: auto">
               <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
               <template v-if="!isLoggedIn">
@@ -18,15 +21,15 @@
                 </client-only>
               </template>
             </div>
-          </ds-flex-item>
-        </ds-flex>
-      </ds-container>
           </div>
-    <ds-container>
+        </div>
+      </div>
+    </div>
+    <div class="ds-container ds-container-x-large">
       <div class="content">
         <nuxt />
       </div>
-    </ds-container>
+    </div>
     <page-footer></page-footer>
     <div id="overlay" />
   </div>

webapp/layouts/blank.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="layout-blank">
-    <ds-container>
+    <div class="ds-container ds-container-x-large">
       <div>
         <nuxt />
       </div>
-    </ds-container>
+    </div>
     <div id="overlay" />
   </div>
 </template>

webapp/layouts/default.vue

@@ -3,11 +3,11 @@
     <div class="main-navigation">
       <header-menu :showMobileMenu="isMobile" />
     </div>
-    <ds-container>
+    <div class="ds-container ds-container-x-large">
       <div class="main-container">
         <nuxt />
       </div>
-    </ds-container>
+    </div>
     <page-footer v-if="!isMobile" />
     <div id="overlay" />
     <client-only>
@@ -63,7 +63,7 @@ export default {
 }
 .main-container {
   padding-top: 6rem;
-  padding-bottom: 5rem;
+  padding-bottom: 8rem;
 }
 
 .chat-modul {

webapp/layouts/no-header.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="layout-blank">
     <div class="layout-content">
-      <ds-container>
+      <div class="ds-container ds-container-x-large">
         <div>
           <nuxt />
         </div>
-      </ds-container>
+      </div>
     </div>
     <page-footer :is-sticky="false" />
     <div id="overlay" />

webapp/locales/de.json

@@ -704,6 +704,7 @@
     "failure": "Fehlerhafte E-Mail-Adresse oder Passwort.",
     "forgotPassword": "Passwort vergessen?",
     "hello": "Hallo",
+    "loggingOut": "Abmeldung läuft …",
     "login": "Anmelden",
     "logout": "Abmelden",
     "moreInfo": "Was ist {APPLICATION_NAME}?",

webapp/locales/en.json

@@ -704,6 +704,7 @@
     "failure": "Incorrect email address or password.",
     "forgotPassword": "Forgot Password?",
     "hello": "Hello",
+    "loggingOut": "Logging out…",
     "login": "Login",
     "logout": "Logout",
     "moreInfo": "What is {APPLICATION_NAME}?",

webapp/locales/es.json

@@ -704,6 +704,7 @@
     "failure": "Dirección de correo electrónico o contraseña incorrecta.",
     "forgotPassword": "¿Olvidó su contraseña?",
     "hello": "Hola",
+    "loggingOut": "Cerrando sesión …",
     "login": "Iniciar sesión",
     "logout": "Cierre de sesión",
     "moreInfo": "¿Qué es {APPLICATION_NAME}?",

webapp/locales/fr.json

@@ -704,6 +704,7 @@
     "failure": "Adresse mail ou mot de passe incorrect.",
     "forgotPassword": "Mot de passe oublié?",
     "hello": "Bonjour",
+    "loggingOut": "Déconnexion en cours …",
     "login": "Connexion",
     "logout": "Déconnexion",
     "moreInfo": "Qu'est-ce que {APPLICATION_NAME}?",

webapp/locales/it.json

@@ -704,6 +704,7 @@
     "failure": null,
     "forgotPassword": null,
     "hello": "Ciao",
+    "loggingOut": "Disconnessione in corso …",
     "login": "Accesso",
     "logout": "Logout",
     "moreInfo": "Che cosa è {APPLICATION_NAME}?",

webapp/locales/nl.json

@@ -704,6 +704,7 @@
     "failure": null,
     "forgotPassword": null,
     "hello": "Hallo",
+    "loggingOut": "Uitloggen …",
     "login": "Inloggen",
     "logout": "Uitloggen",
     "moreInfo": "Wat is {APPLICATION_NAME}?",

webapp/locales/pl.json

@@ -704,6 +704,7 @@
     "failure": null,
     "forgotPassword": "Zapomniałeś hasła?",
     "hello": "Cześć",
+    "loggingOut": "Wylogowywanie …",
     "login": "Logowanie",
     "logout": "Wyloguj się",
     "moreInfo": "Co to jest {APPLICATION_NAME}?",

webapp/locales/pt.json

@@ -704,6 +704,7 @@
     "failure": "Endereço de e-mail ou senha incorretos.",
     "forgotPassword": "Esqueceu a sua senha?",
     "hello": "Olá",
+    "loggingOut": "A terminar sessão …",
     "login": "Entrar",
     "logout": "Sair",
     "moreInfo": "O que é a {APPLICATION_NAME}?",

webapp/locales/ru.json

@@ -704,6 +704,7 @@
     "failure": "Неверный адрес электронной почты или пароль.",
     "forgotPassword": "Забыли пароль?",
     "hello": "Здравствуйте",
+    "loggingOut": "Выход из системы …",
     "login": "Вход",
     "logout": "Выйти",
     "moreInfo": "Что такое {APPLICATION_NAME}?",

webapp/maintenance/source/pages/index.vue

@@ -1,13 +1,13 @@
 <template>
   <transition name="fade" appear>
-    <ds-container width="medium">
+    <div class="ds-container ds-container-medium">
       <os-card>
-        <ds-space>
+        <div class="ds-mb-large">
           <locale-switch class="login-locale-switch" offset="5" />
-        </ds-space>
-        <ds-flex>
-          <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
-            <ds-space>
+        </div>
+        <div class="ds-flex maintenance-layout">
+          <div class="maintenance-layout__image">
+            <div class="ds-mb-large">
               <!-- QUESTION: could we have internal page or even all internal pages here as well with PageParamsLink by having the footer underneath? -->
               <!--   I tried this out, but only could get the nginx page displayed. I guees the there were nuxt errors, because the nuxt config file 'webapp/maintenance/source/nuxt.config.maintenance.js' would have to be refactored for that as well and may be the missing folder `components/_new/generic/` plays a role, see https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4619 -->
               <!-- <page-params-link :pageParams="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)">
@@ -19,27 +19,31 @@
                 :title="$t('login.moreInfo', metadata)"
                 target="_blank"
               > -->
-              <img class="image" alt="Under maintenance" src="/img/custom/logo-squared.svg" />
+              <img
+                class="image"
+                :alt="$t('maintenance.title', metadata)"
+                src="/img/custom/logo-squared.svg"
+              />
               <!-- </a> -->
-            </ds-space>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
-            <ds-flex-item>
-              <ds-heading tag="h3">{{ $t('maintenance.title', metadata) }}</ds-heading>
-            </ds-flex-item>
-            <ds-flex-item>
-              <ds-space margin="small">
-                <ds-text>{{ $t('maintenance.explanation') }}</ds-text>
-                <ds-text>
+            </div>
+          </div>
+          <div class="maintenance-layout__content">
+            <div>
+              <h3 class="ds-heading ds-heading-h3">{{ $t('maintenance.title', metadata) }}</h3>
+            </div>
+            <div>
+              <div class="ds-my-small">
+                <p class="ds-text">{{ $t('maintenance.explanation') }}</p>
+                <p class="ds-text">
                   {{ $t('maintenance.questions') }}
                   <a :href="'mailto:' + supportEmail">{{ supportEmail }}</a>
-                </ds-text>
-              </ds-space>
-            </ds-flex-item>
-          </ds-flex-item>
-        </ds-flex>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
       </os-card>
-    </ds-container>
+    </div>
   </transition>
 </template>
 
@@ -65,9 +69,22 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .image {
   width: 75%;
   height: auto;
 }
+.maintenance-layout__image,
+.maintenance-layout__content {
+  flex: 0 0 100%;
+  width: 100%;
+}
+@media #{$media-query-small} {
+  .maintenance-layout__image {
+    flex: 1 0 0;
+  }
+  .maintenance-layout__content {
+    flex: 1 0 0;
+  }
+}
 </style>

webapp/nuxt.config.js

@@ -88,6 +88,8 @@ export default {
     '~assets/styles/imports/_branding.scss',
     // @ocelot-social/ui CSS variables (loaded before styleguide)
     '~assets/_new/styles/ocelot-ui-variables.scss',
+    // Utility classes replacing ds-* Vue components
+    '~assets/_new/styles/_ds-compat.scss',
     // Note: @ocelot-social/ui/style.css is loaded via plugin after styleguide
   ],
 

webapp/pages/__snapshots__/_static.spec.js.snap

@@ -4,8 +4,7 @@ exports[`_static mount renders 1`] = `
 <div>
   <div>
     <div
-      class="ds-space"
-      style="margin-top: 16px; margin-bottom: 16px;"
+      class="ds-my-small"
     >
       <h2
         class="ds-heading ds-heading-h2"

webapp/pages/__snapshots__/settings.spec.js.snap

@@ -4,8 +4,7 @@ exports[`settings.vue given badges are disabled renders 1`] = `
 <div>
   <div>
     <div
-      class="ds-space"
-      style="margin-top: 16px; margin-bottom: 16px;"
+      class="ds-my-small"
     >
       <h1
         class="ds-heading ds-heading-h1"
@@ -15,13 +14,11 @@ exports[`settings.vue given badges are disabled renders 1`] = `
     </div>
      
     <div
-      class="ds-space"
-      style="margin-top: 32px; margin-bottom: 32px;"
+      class="ds-my-large"
     />
      
     <div
-      class="ds-flex"
-      style="margin-left: -8px; margin-right: -8px;"
+      class="ds-flex ds-flex-gap-small"
     >
       <div
         class="menu-container"
@@ -210,8 +207,7 @@ exports[`settings.vue given badges are enabled renders 1`] = `
 <div>
   <div>
     <div
-      class="ds-space"
-      style="margin-top: 16px; margin-bottom: 16px;"
+      class="ds-my-small"
     >
       <h1
         class="ds-heading ds-heading-h1"
@@ -221,13 +217,11 @@ exports[`settings.vue given badges are enabled renders 1`] = `
     </div>
      
     <div
-      class="ds-space"
-      style="margin-top: 32px; margin-bottom: 32px;"
+      class="ds-my-large"
     />
      
     <div
-      class="ds-flex"
-      style="margin-left: -8px; margin-right: -8px;"
+      class="ds-flex ds-flex-gap-small"
     >
       <div
         class="menu-container"

webapp/pages/admin.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
-    <ds-heading tag="h1">{{ $t('admin.name') }}</ds-heading>
-    <ds-flex gutter="small">
-      <ds-flex-item :width="{ base: '100%', md: '200px' }">
+    <h1 class="ds-heading ds-heading-h1">{{ $t('admin.name') }}</h1>
+    <div class="ds-flex ds-flex-gap-small admin-layout">
+      <div class="admin-layout__sidebar">
         <ds-menu :routes="routes" :is-exact="() => true" />
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '100%', md: 1 }">
+      </div>
+      <div class="admin-layout__main">
         <transition name="slide-up" appear>
           <nuxt-child />
         </transition>
-      </ds-flex-item>
-    </ds-flex>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -69,3 +69,20 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.admin-layout__sidebar,
+.admin-layout__main {
+  flex: 0 0 100%;
+  width: 100%;
+}
+@media #{$media-query-medium} {
+  .admin-layout__sidebar {
+    flex: 0 0 200px;
+    width: 200px;
+  }
+  .admin-layout__main {
+    flex: 1 0 0;
+  }
+}
+</style>

webapp/pages/admin/donations.vue

@@ -2,12 +2,12 @@
   <os-card>
     <h2 class="title">{{ $t('admin.donations.name') }}</h2>
     <ds-form v-model="formData" @submit="submit">
-      <ds-text class="show-donations-checkbox">
+      <p class="ds-text show-donations-checkbox">
         <input id="showDonations" type="checkbox" v-model="showDonations" />
         <label for="showDonations">
           {{ $t('admin.donations.showDonationsCheckboxLabel') }}
         </label>
-      </ds-text>
+      </p>
       <ds-input
         id="donations-goal"
         class="donations-data"

webapp/pages/admin/index.vue

@@ -6,33 +6,33 @@
       </div>
     </template>
     <template v-else-if="statistics">
-      <ds-space margin="large">
-        <ds-flex>
-          <ds-flex-item
+      <div class="ds-my-large">
+        <div class="ds-flex">
+          <div
             v-for="(value, name) in filterStatistics(statistics)"
             :key="name"
-            :width="{ base: '100%', sm: '50%', md: '33%' }"
+            class="admin-stats__item"
           >
-            <ds-space margin="small">
+            <div class="ds-my-small">
               <ds-number :count="0" :label="$t('admin.dashboard.' + name)" size="x-large" uppercase>
                 <client-only slot="count">
                   <hc-count-to :end-val="value" />
                 </client-only>
               </ds-number>
-            </ds-space>
-          </ds-flex-item>
-        </ds-flex>
-      </ds-space>
+            </div>
+          </div>
+        </div>
+      </div>
     </template>
     <template v-else>
-      <ds-space centered>
-        <ds-space>
+      <div class="ds-mb-large ds-space-centered">
+        <div class="ds-mb-large">
           <img :src="errorIconPath" width="40" />
-        </ds-space>
-        <ds-text>
+        </div>
+        <p class="ds-text">
           {{ $t('site.error-occurred') }}
-        </ds-text>
-      </ds-space>
+        </p>
+      </div>
     </template>
   </os-card>
 </template>
@@ -70,3 +70,22 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.admin-stats__item {
+  flex: 0 0 100%;
+  width: 100%;
+}
+@media #{$media-query-small} {
+  .admin-stats__item {
+    flex: 0 0 50%;
+    width: 50%;
+  }
+}
+@media #{$media-query-medium} {
+  .admin-stats__item {
+    flex: 0 0 33.333%;
+    width: 33.333%;
+  }
+}
+</style>

webapp/pages/admin/invite.vue

@@ -1,13 +1,13 @@
 <template>
-  <ds-section>
-    <ds-space>
-      <ds-heading size="h3">{{ $t('admin.invites.title') }}</ds-heading>
-      <ds-text>{{ $t('admin.invites.description') }}</ds-text>
-    </ds-space>
+  <section class="ds-section">
+    <div class="ds-mb-large">
+      <h1 class="ds-heading ds-heading-h3">{{ $t('admin.invites.title') }}</h1>
+      <p class="ds-text">{{ $t('admin.invites.description') }}</p>
+    </div>
     <os-card>
       <signup :invitation="true" />
     </os-card>
-  </ds-section>
+  </section>
 </template>
 
 <script>

webapp/pages/admin/users/__snapshots__/_id.spec.js.snap

@@ -7,14 +7,7 @@ exports[`.vue renders 1`] = `
       class="ds-section"
     >
       <div
-        class="ds-section-content"
-      >
-        <div
-          class="ds-container ds-container-x-large"
-        >
-          <div
-            class="ds-space"
-            style="margin-bottom: 32px;"
+        class="ds-mb-large"
       >
         <h1
           class="ds-heading ds-heading-h3"
@@ -94,8 +87,6 @@ exports[`.vue renders 1`] = `
           </div>
         </div>
       </div>
-        </div>
-      </div>
     </section>
   </div>
 </body>

webapp/pages/admin/users/__snapshots__/index.spec.js.snap

@@ -19,12 +19,10 @@ exports[`Users given badges are disabled renders 1`] = `
       novalidate="novalidate"
     >
       <div
-        class="ds-flex"
-        style="margin-left: -8px; margin-right: -8px;"
+        class="ds-flex ds-flex-gap-small"
       >
         <div
-          class="ds-flex-item"
-          style="flex-basis: 90%; width: 90%; padding-left: 8px; padding-right: 8px; margin-bottom: 16px;"
+          style="flex: 0 0 90%; width: 90%;"
         >
           <div
             class="ds-form-item ds-input-size-base"
@@ -83,8 +81,7 @@ exports[`Users given badges are disabled renders 1`] = `
         </div>
          
         <div
-          class="ds-flex-item"
-          style="flex-basis: 30px; width: 30px; padding-left: 8px; padding-right: 8px; margin-bottom: 16px;"
+          style="flex: 0 0 30px; width: 30px;"
         >
           <button
             aria-label="actions.search"
@@ -473,12 +470,10 @@ exports[`Users given badges are enabled renders 1`] = `
       novalidate="novalidate"
     >
       <div
-        class="ds-flex"
-        style="margin-left: -8px; margin-right: -8px;"
+        class="ds-flex ds-flex-gap-small"
       >
         <div
-          class="ds-flex-item"
-          style="flex-basis: 90%; width: 90%; padding-left: 8px; padding-right: 8px; margin-bottom: 16px;"
+          style="flex: 0 0 90%; width: 90%;"
         >
           <div
             class="ds-form-item ds-input-size-base"
@@ -537,8 +532,7 @@ exports[`Users given badges are enabled renders 1`] = `
         </div>
          
         <div
-          class="ds-flex-item"
-          style="flex-basis: 30px; width: 30px; padding-left: 8px; padding-right: 8px; margin-bottom: 16px;"
+          style="flex: 0 0 30px; width: 30px;"
         >
           <button
             aria-label="actions.search"

webapp/pages/admin/users/_id.vue

@@ -1,13 +1,13 @@
 <template>
-  <ds-section>
-    <ds-space>
-      <ds-heading size="h3">
+  <section class="ds-section">
+    <div class="ds-mb-large">
+      <h1 class="ds-heading ds-heading-h3">
         {{ user && user.name }}
         -
         {{ $t('admin.badges.title') }}
-      </ds-heading>
-      <ds-text>{{ $t('admin.badges.description') }}</ds-text>
-    </ds-space>
+      </h1>
+      <p class="ds-text">{{ $t('admin.badges.description') }}</p>
+    </div>
     <os-card v-if="!isLoadingBadges">
       <badges-section
         :title="$t('admin.badges.verificationBadges')"
@@ -20,7 +20,7 @@
         @toggleBadge="toggleBadge"
       />
     </os-card>
-  </ds-section>
+  </section>
 </template>
 
 <script>

webapp/pages/admin/users/index.vue

@@ -3,15 +3,15 @@
     <os-card>
       <h2 class="title">{{ $t('admin.users.name') }}</h2>
       <ds-form v-model="form" @submit="submit">
-        <ds-flex gutter="small">
-          <ds-flex-item width="90%">
+        <div class="ds-flex ds-flex-gap-small">
+          <div style="flex: 0 0 90%; width: 90%">
             <ds-input
               model="query"
               :placeholder="$t('admin.users.form.placeholder')"
               icon="search"
             />
-          </ds-flex-item>
-          <ds-flex-item width="30px">
+          </div>
+          <div style="flex: 0 0 30px; width: 30px">
             <os-button
               variant="primary"
               appearance="filled"
@@ -22,8 +22,8 @@
             >
               <template #icon><os-icon :icon="icons.search" /></template>
             </os-button>
-          </ds-flex-item>
-        </ds-flex>
+          </div>
+        </div>
       </ds-form>
     </os-card>
     <os-card v-if="User && User.length">
@@ -69,7 +69,7 @@
                 {{ value }}
               </option>
             </select>
-            <ds-text v-else>{{ scope.row.role }}</ds-text>
+            <p class="ds-text" v-else>{{ scope.row.role }}</p>
           </template>
         </template>
         <template #badges="scope">
@@ -91,7 +91,7 @@
       <pagination-buttons :hasNext="hasNext" :hasPrevious="hasPrevious" @next="next" @back="back" />
     </os-card>
     <os-card v-else>
-      <ds-placeholder>{{ $t('admin.users.empty') }}</ds-placeholder>
+      <div class="ds-placeholder">{{ $t('admin.users.empty') }}</div>
     </os-card>
   </div>
 </template>

webapp/pages/groups/_id/_slug.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="group-profile" v-if="isGroupVisible">
-    <ds-space />
-    <ds-flex v-if="group" :width="{ base: '100%' }" gutter="base">
-      <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
+    <div class="ds-mb-large"></div>
+    <div v-if="group" class="ds-flex ds-flex-gap-base group-layout">
+      <div class="group-layout__sidebar">
         <os-card
           :class="{ 'disabled-content': group.disabled }"
           style="position: relative; height: auto; overflow: visible"
@@ -27,15 +27,15 @@
               @unmute="unmuteGroup"
             />
           </client-only>
-          <ds-space margin="small">
+          <div class="ds-my-small">
             <!-- group name -->
-            <ds-heading tag="h3" align="center" no-margin>
+            <h3 class="ds-heading ds-heading-h3 ds-heading-align-center ds-heading-no-margin">
               {{ groupName }}
-            </ds-heading>
+            </h3>
             <!-- group slug -->
-            <ds-text align="center" color="soft">
+            <p class="ds-text ds-text-center ds-text-soft">
               {{ `&${groupSlug}` }}
-            </ds-text>
+            </p>
             <!-- group location -->
             <location-info
               v-if="group.location"
@@ -44,13 +44,13 @@
               size="small"
             />
             <!-- group created at -->
-            <ds-text align="center" color="soft" size="small">
+            <p class="ds-text ds-text-center ds-text-soft ds-text-size-small">
               {{ $t('group.foundation') }} {{ group.createdAt | date('MMMM yyyy') }}
-            </ds-text>
-          </ds-space>
-          <ds-flex v-if="isAllowedSeeingGroupMembers">
+            </p>
+          </div>
+          <div class="ds-flex" v-if="isAllowedSeeingGroupMembers">
             <!-- group members count -->
-            <ds-flex-item v-if="isAllowedSeeingGroupMembers">
+            <div class="ds-flex-item" v-if="isAllowedSeeingGroupMembers">
               <client-only>
                 <ds-number :label="$t('group.membersCount', {}, groupMembers.length)">
                   <count-to
@@ -60,8 +60,8 @@
                   />
                 </ds-number>
               </client-only>
-            </ds-flex-item>
-          </ds-flex>
+            </div>
+          </div>
           <div class="action-buttons">
             <os-button
               variant="danger"
@@ -85,12 +85,12 @@
             />
           </div>
           <hr />
-          <ds-space margin-top="small" margin-bottom="small">
+          <div class="ds-mt-small ds-mb-small">
             <!-- group my role in group -->
             <template v-if="isGroupMember">
-              <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+              <p class="ds-text ds-text-soft ds-text-size-small centered-text hyphenate-text">
                 {{ $t('group.role') }}
-              </ds-text>
+              </p>
               <div class="chip" align="center">
                 <ds-chip color="primary">
                   {{ group && group.myRole ? $t('group.roles.' + group.myRole) : '' }}
@@ -98,18 +98,18 @@
               </div>
             </template>
             <!-- group type -->
-            <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+            <p class="ds-text ds-text-soft ds-text-size-small centered-text hyphenate-text">
               {{ $t('group.type') }}
-            </ds-text>
+            </p>
             <div class="chip" align="center">
               <ds-chip color="primary">
                 {{ group && group.groupType ? $t('group.types.' + group.groupType) : '' }}
               </ds-chip>
             </div>
             <!-- group action radius -->
-            <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+            <p class="ds-text ds-text-soft ds-text-size-small centered-text hyphenate-text">
               {{ $t('group.actionRadius') }}
-            </ds-text>
+            </p>
             <div class="chip" align="center">
               <ds-chip color="primary">
                 {{
@@ -117,15 +117,15 @@
                 }}
               </ds-chip>
             </div>
-            <ds-space margin="x-small" />
-          </ds-space>
+            <div class="ds-my-x-small"></div>
+          </div>
           <!-- group categories -->
           <template
             v-if="categoriesActive && group && group.categories && group.categories.length > 0"
           >
             <hr />
-            <ds-space margin-top="small" margin-bottom="small">
-              <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+            <div class="ds-mt-small ds-mb-small">
+              <p class="ds-text ds-text-soft ds-text-size-small centered-text hyphenate-text">
                 {{
                   $t(
                     'group.categories',
@@ -133,8 +133,8 @@
                     group && group.categories ? group.categories.length : 0,
                   )
                 }}
-              </ds-text>
-              <ds-space margin="xx-small" />
+              </p>
+              <div class="ds-my-xx-small"></div>
               <div class="categories">
                 <div
                   v-for="(category, index) in sortCategories(
@@ -151,29 +151,32 @@
                       placement: 'bottom-start',
                     }"
                   />
-                  <ds-space v-if="index < group.categories.length - 1" margin="xxx-small" />
+                  <div v-if="index < group.categories.length - 1" class="ds-my-xxx-small"></div>
+                </div>
               </div>
             </div>
-            </ds-space>
           </template>
           <!-- group goal -->
           <template v-if="group && group.about">
             <hr />
-            <ds-space margin-top="small" margin-bottom="small">
-              <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+            <div class="ds-mt-small ds-mb-small">
+              <p class="ds-text ds-text-soft ds-text-size-small centered-text hyphenate-text">
                 {{ $t('group.goal') }}
-              </ds-text>
-              <ds-space margin="xx-small" />
+              </p>
+              <div class="ds-my-xx-small"></div>
               <div class="chip" align="center">
                 <ds-chip>{{ group ? group.about : '' }}</ds-chip>
               </div>
-            </ds-space>
+            </div>
           </template>
         </os-card>
-        <ds-space />
-        <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px">
+        <div class="ds-mb-large"></div>
+        <h3
+          class="ds-heading ds-heading-h3 ds-heading-soft"
+          style="text-align: center; margin-bottom: 10px"
+        >
           {{ $t('profile.network.title') }}
-        </ds-heading>
+        </h3>
         <!-- Group members list -->
         <profile-list
           :uniqueName="'groupMembersFilter'"
@@ -191,11 +194,11 @@
           @fetchAllProfiles="fetchAllMembers"
         />
         <!-- <social-media :user-name="groupName" :user="user" /> -->
-      </ds-flex-item>
+      </div>
 
-      <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
+      <div class="group-layout__main">
         <!-- Group description -->
-        <ds-space>
+        <div class="ds-mb-large">
           <os-card class="group-description">
             <!-- TODO: replace editor content with tiptap render view -->
             <!-- eslint-disable-next-line vue/no-v-html -->
@@ -215,8 +218,8 @@
               {{ isDescriptionCollapsed ? $t('comment.show.more') : $t('comment.show.less') }}
             </os-button>
           </os-card>
-        </ds-space>
-        <ds-space v-if="isGroupMemberNonePending" centered>
+        </div>
+        <div v-if="isGroupMemberNonePending" class="ds-mb-large ds-space-centered">
           <os-button
             as="nuxt-link"
             :to="{
@@ -237,7 +240,7 @@
               <os-icon :icon="icons.plus" />
             </template>
           </os-button>
-        </ds-space>
+        </div>
         <masonry-grid>
           <!-- TapNavigation -->
           <!-- <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" /> -->
@@ -284,8 +287,8 @@
             <os-spinner slot="spinner" size="lg" />
           </infinite-loading>
         </client-only>
-      </ds-flex-item>
-    </ds-flex>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -652,12 +655,41 @@ export default {
   margin-top: -60px;
 }
 .group-profile {
-  .ds-flex-item:first-child .group-profile-content-menu {
+  .group-layout__sidebar .group-profile-content-menu {
     position: absolute;
     top: $space-x-small;
     right: $space-x-small;
   }
 }
+.group-layout__sidebar,
+.group-layout__main {
+  flex: 0 0 100%;
+  width: 100%;
+}
+@media #{$media-query-small} {
+  .group-layout__sidebar {
+    flex: 2 0 0;
+  }
+  .group-layout__main {
+    flex: 3 0 0;
+  }
+}
+@media #{$media-query-medium} {
+  .group-layout__sidebar {
+    flex: 2 0 0;
+  }
+  .group-layout__main {
+    flex: 5 0 0;
+  }
+}
+@media #{$media-query-large} {
+  .group-layout__sidebar {
+    flex: 1 0 0;
+  }
+  .group-layout__main {
+    flex: 3 0 0;
+  }
+}
 .profile-post-add-button {
   box-shadow: $box-shadow-x-large;
 }

webapp/pages/groups/create.vue

@@ -1,23 +1,23 @@
 <template>
   <div>
-    <ds-space margin="small">
-      <ds-heading tag="h1">{{ $t('group.createNewGroup.title') }}</ds-heading>
-    </ds-space>
-    <ds-space margin="large" />
-    <ds-container>
+    <div class="ds-my-small">
+      <h1 class="ds-heading ds-heading-h1">{{ $t('group.createNewGroup.title') }}</h1>
+    </div>
+    <div class="ds-my-large"></div>
+    <div class="ds-container ds-container-x-large">
       <os-card>
-        <ds-space margin="large">
-          <ds-flex :width="{ base: '100%' }" gutter="base">
-            <ds-flex-item :width="{ base: '100%', md: 5 }">
-              <ds-container>
+        <div class="ds-my-large">
+          <div class="ds-flex ds-flex-gap-base group-create-layout">
+            <div class="group-create-layout__main">
+              <div class="ds-container ds-container-x-large">
                 <group-form @createGroup="createGroup" />
-              </ds-container>
-            </ds-flex-item>
-            <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
-          </ds-flex>
-        </ds-space>
+              </div>
+            </div>
+            <div class="group-create-layout__aside">&nbsp;</div>
+          </div>
+        </div>
       </os-card>
-    </ds-container>
+    </div>
   </div>
 </template>
 
@@ -71,3 +71,19 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.group-create-layout__main,
+.group-create-layout__aside {
+  flex: 0 0 100%;
+  width: 100%;
+}
+@media #{$media-query-medium} {
+  .group-create-layout__main {
+    flex: 5 0 0;
+  }
+  .group-create-layout__aside {
+    flex: 1 0 0;
+  }
+}
+</style>

webapp/pages/groups/edit/_id.vue

@@ -1,25 +1,25 @@
 <template>
   <div>
-    <ds-space margin="small">
-      <ds-heading tag="h1">{{ $t('group.editGroupSettings.title') }}</ds-heading>
-      <ds-heading tag="h2">
+    <div class="ds-my-small">
+      <h1 class="ds-heading ds-heading-h1">{{ $t('group.editGroupSettings.title') }}</h1>
+      <h2 class="ds-heading ds-heading-h2">
         {{ $t('group.editGroupSettings.groupTitle') }}
         <nuxt-link :to="{ name: 'groups-id-slug', params: { slug: group.slug, id: group.id } }">
           {{ group.name }}
         </nuxt-link>
-      </ds-heading>
-    </ds-space>
-    <ds-space margin="large" />
-    <ds-flex gutter="small">
-      <ds-flex-item :width="{ base: '100%', md: '200px' }">
+      </h2>
+    </div>
+    <div class="ds-my-large"></div>
+    <div class="ds-flex ds-flex-gap-small group-edit-layout">
+      <div class="group-edit-layout__sidebar">
         <ds-menu :routes="routes" :is-exact="() => true" />
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '100%', md: 1 }">
+      </div>
+      <div class="group-edit-layout__main">
         <transition name="slide-up" appear>
           <nuxt-child :group="group" @update-invite-codes="updateInviteCodes" />
         </transition>
-      </ds-flex-item>
-    </ds-flex>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -87,3 +87,20 @@ export default {
   margin-top: 0;
 }
 </style>
+
+<style lang="scss">
+.group-edit-layout__sidebar,
+.group-edit-layout__main {
+  flex: 0 0 100%;
+  width: 100%;
+}
+@media #{$media-query-medium} {
+  .group-edit-layout__sidebar {
+    flex: 0 0 200px;
+    width: 200px;
+  }
+  .group-edit-layout__main {
+    flex: 1 0 0;
+  }
+}
+</style>

webapp/pages/groups/edit/_id/__snapshots__/invites.spec.js.snap

@@ -13,8 +13,7 @@ exports[`invites.vue renders 1`] = `
       </h3>
        
       <div
-        class="ds-space"
-        style="margin-top: 32px; margin-bottom: 32px;"
+        class="ds-my-large"
       />
        
       <div

webapp/pages/groups/edit/_id/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <os-card>
-      <ds-heading tag="h3">{{ $t('group.general') }}</ds-heading>
-      <ds-space margin="large" />
+      <h3 class="ds-heading ds-heading-h3">{{ $t('group.general') }}</h3>
+      <div class="ds-my-large"></div>
       <group-form :group="group" :update="true" @updateGroup="updateGroup" />
     </os-card>
   </div>

webapp/pages/groups/edit/_id/invites.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <os-card>
-      <ds-heading tag="h3">{{ $t('invite-codes.group-invite-links') }}</ds-heading>
-      <ds-space margin="large" />
+      <h3 class="ds-heading ds-heading-h3">{{ $t('invite-codes.group-invite-links') }}</h3>
+      <div class="ds-my-large"></div>
       <invitation-list
         @generate-invite-code="generateGroupInviteCode"
         @invalidate-invite-code="invalidateInviteCode"

webapp/pages/groups/edit/_id/members.vue

@@ -5,7 +5,7 @@
       :groupMembers="groupMembers"
       @loadGroupMembers="loadGroupMembers"
     />
-    <ds-space margin-bottom="small" />
+    <div class="ds-mb-small"></div>
     <os-card>
       <group-member
         :groupId="group.id"

webapp/pages/groups/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <ds-space margin="small">
+    <div class="ds-my-small">
       <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" />
-    </ds-space>
-    <ds-space margin="large" />
-    <ds-space>
+    </div>
+    <div class="ds-my-large"></div>
+    <div class="ds-mb-large">
       <!-- create group -->
-      <ds-space centered>
+      <div class="ds-mb-large ds-space-centered">
         <os-button
           as="nuxt-link"
           :to="{ name: 'groups-create' }"
@@ -25,9 +25,9 @@
             <os-icon :icon="icons.plus" />
           </template>
         </os-button>
-      </ds-space>
+      </div>
       <!-- group list -->
-      <ds-space centered v-if="showPagination">
+      <div class="ds-mb-large ds-space-centered" v-if="showPagination">
         <pagination-buttons
           :hasNext="hasNext"
           :showPageCounter="true"
@@ -39,9 +39,9 @@
           @back="previousResults"
           @next="nextResults"
         />
-      </ds-space>
+      </div>
       <group-list :groups="myGroups" />
-      <ds-space centered v-if="showPagination">
+      <div class="ds-mb-large ds-space-centered" v-if="showPagination">
         <pagination-buttons
           :hasNext="hasNext"
           :showPageCounter="true"
@@ -53,8 +53,8 @@
           @back="previousResults"
           @next="nextResults"
         />
-      </ds-space>
-    </ds-space>
+      </div>
+    </div>
   </div>
 </template>
 

webapp/pages/index.vue

@@ -138,8 +138,8 @@
       <template v-else>
         <ds-grid-item :row-span="2" column-span="fullWidth">
           <hc-empty icon="docs" />
-          <ds-text align="center">{{ $t('index.no-results') }}</ds-text>
-          <ds-text align="center">{{ $t('index.change-filter-settings') }}</ds-text>
+          <p class="ds-text ds-text-center">{{ $t('index.no-results') }}</p>
+          <p class="ds-text ds-text-center">{{ $t('index.change-filter-settings') }}</p>
         </ds-grid-item>
       </template>
     </masonry-grid>

webapp/pages/logout.vue

@@ -1,16 +1,16 @@
 <template>
-  <ds-container width="small">
-    <ds-flex>
-      <ds-flex-item :width="{ base: '100%' }" centered>
-        <ds-space style="text-align: center" margin-top="large" margin-bottom="xxx-small" centered>
+  <div class="ds-container ds-container-small">
+    <div class="ds-flex">
+      <div style="flex: 0 0 100%; width: 100%; align-self: center">
+        <div style="text-align: center" class="ds-mt-large ds-mb-xxx-small ds-space-centered">
           <logo logoType="logout" />
-        </ds-space>
-        <ds-space style="text-align: center" margin-top="small" margin-bottom="xxx-small" centered>
-          <ds-heading tag="h3" soft>Logging out...</ds-heading>
-        </ds-space>
-      </ds-flex-item>
-    </ds-flex>
-  </ds-container>
+        </div>
+        <div style="text-align: center" class="ds-mt-small ds-mb-xxx-small ds-space-centered">
+          <h3 class="ds-heading ds-heading-h3 ds-heading-soft">{{ $t('login.loggingOut') }}</h3>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>

webapp/pages/map.vue

@@ -1,8 +1,8 @@
 <!-- Example Reference: https://codesandbox.io/s/v-mapbox-with-nuxt-lbrt6?file=/pages/index.vue -->
 <template>
   <div>
-    <ds-space margin="small">
-      <ds-heading tag="h1">{{ $t('map.pageTitle') }}</ds-heading>
+    <div class="ds-my-small">
+      <h1 class="ds-heading ds-heading-h1">{{ $t('map.pageTitle') }}</h1>
       <small>
         <div>
           <span v-for="type in markers.types" :key="type.id">
@@ -16,9 +16,9 @@
           </span>
         </div>
       </small>
-    </ds-space>
+    </div>
 
-    <ds-space margin="small" />
+    <div class="ds-my-small"></div>
     <client-only v-if="!isEmpty($env.MAPBOX_TOKEN)">
       <map-styles-buttons
         v-if="isMobile"

webapp/pages/moderation.vue

@@ -1,18 +1,18 @@
 <template>
   <div>
-    <ds-heading tag="h1">
+    <h1 class="ds-heading ds-heading-h1">
       {{ $t('moderation.name') }}
-    </ds-heading>
-    <ds-flex gutter="small">
-      <ds-flex-item :width="{ base: '100%', md: '200px' }">
+    </h1>
+    <div class="ds-flex ds-flex-gap-small moderation-layout">
+      <div class="moderation-layout__sidebar">
         <ds-menu :routes="routes" />
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '100%', md: 1 }">
+      </div>
+      <div class="moderation-layout__main">
         <transition name="slide-up" appear>
           <nuxt-child />
         </transition>
-      </ds-flex-item>
-    </ds-flex>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -31,3 +31,20 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.moderation-layout__sidebar,
+.moderation-layout__main {
+  flex: 0 0 100%;
+  width: 100%;
+}
+@media #{$media-query-medium} {
+  .moderation-layout__sidebar {
+    flex: 0 0 200px;
+    width: 200px;
+  }
+  .moderation-layout__main {
+    flex: 1 0 0;
+  }
+}
+</style>

webapp/pages/notifications/index.vue

@@ -1,17 +1,17 @@
 <template>
   <os-card>
-    <ds-flex class="notifications-page-flex">
-      <ds-flex-item :width="{ lg: '85%' }">
-        <ds-heading tag="h3">{{ $t('notifications.title') }}</ds-heading>
-      </ds-flex-item>
-      <ds-flex-item width="110px">
+    <div class="ds-flex notifications-page-flex">
+      <div class="notifications-layout__title">
+        <h3 class="ds-heading ds-heading-h3">{{ $t('notifications.title') }}</h3>
+      </div>
+      <div style="flex: 0 0 110px; width: 110px">
         <client-only>
           <dropdown-filter @filter="filter" :filterOptions="filterOptions" :selected="selected" />
         </client-only>
-      </ds-flex-item>
-    </ds-flex>
-    <ds-space />
-    <ds-flex-item class="notifications-header-button" :width="{ base: 'auto' }" centered>
+      </div>
+    </div>
+    <div class="ds-mb-large"></div>
+    <div class="notifications-header-button" style="flex: 0 0 auto; align-self: center">
       <os-button
         variant="primary"
         appearance="outline"
@@ -21,23 +21,23 @@
       >
         {{ $t('notifications.markAllAsRead') }}
       </os-button>
-    </ds-flex-item>
-    <ds-space />
+    </div>
+    <div class="ds-mb-large"></div>
     <notifications-table
       @markNotificationAsRead="markNotificationAsRead"
       :notifications="notifications"
     />
 
-    <ds-flex class="notifications-footer">
-      <ds-flex-item :width="{ base: 'auto' }" centered>
+    <div class="ds-flex notifications-footer">
+      <div style="flex: 0 0 auto; align-self: center">
         <pagination-buttons
           :hasNext="hasNext"
           :hasPrevious="hasPrevious"
           @back="back"
           @next="next"
         />
-      </ds-flex-item>
-    </ds-flex>
+      </div>
+    </div>
   </os-card>
 </template>
 
@@ -157,6 +157,12 @@ export default {
 }
 </script>
 <style lang="scss">
+@media #{$media-query-large} {
+  .notifications-layout__title {
+    flex: 0 0 85%;
+    width: 85%;
+  }
+}
 .notifications-page-flex {
   padding: 8px;
   justify-content: space-between;

webapp/pages/password-reset.vue

@@ -1,5 +1,5 @@
 <template>
-  <ds-container width="small" class="password-reset">
+  <div class="ds-container ds-container-small password-reset">
     <div class="back-link">
       <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
     </div>
@@ -17,7 +17,7 @@
         <locale-switch offset="5" />
       </aside>
     </os-card>
-  </ds-container>
+  </div>
 </template>
 
 <script>

webapp/pages/password-reset/change-password.vue

@@ -4,9 +4,9 @@
     :nonce="nonce"
     @passwordResetResponse="handlePasswordResetResponse"
   >
-    <ds-space centered>
+    <div class="ds-mb-large ds-space-centered">
       <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
-    </ds-space>
+    </div>
   </change-password>
 </template>
 

webapp/pages/password-reset/enter-nonce.vue

@@ -1,8 +1,8 @@
 <template>
   <enter-nonce :email="email" @nonceEntered="nonceEntered">
-    <ds-space margin-bottom="xxx-small" margin-top="large" centered>
+    <div class="ds-mb-xxx-small ds-mt-large ds-space-centered">
       <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
-    </ds-space>
+    </div>
   </enter-nonce>
 </template>
 

webapp/pages/post/_id/_slug/index.vue

@@ -1,20 +1,23 @@
 <template>
   <transition name="fade" appear>
     <div>
-      <ds-space margin="small">
-        <ds-heading tag="h1">{{ heading }}</ds-heading>
-        <ds-heading v-if="post && post.group && post.group.id && post.group.slug" tag="h2">
+      <div class="ds-my-small">
+        <h1 class="ds-heading ds-heading-h1">{{ heading }}</h1>
+        <h2
+          v-if="post && post.group && post.group.id && post.group.slug"
+          class="ds-heading ds-heading-h2"
+        >
           {{ $t('post.viewPost.forGroup.title') }}
           <nuxt-link
             :to="{ name: 'groups-id-slug', params: { slug: post.group.slug, id: post.group.id } }"
           >
             {{ post.group.name }}
           </nuxt-link>
-        </ds-heading>
-      </ds-space>
-      <ds-space margin="large" />
-      <ds-flex gutter="small">
-        <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
+        </h2>
+      </div>
+      <div class="ds-my-large"></div>
+      <div class="ds-flex ds-flex-gap-small post-detail-layout">
+        <div class="post-detail-layout__main">
           <os-card
             v-if="post && ready"
             :lang="post.language"
@@ -51,9 +54,9 @@
             <section class="menu">
               <user-teaser :user="post.author" :group="post.group" wide :date-time="post.createdAt">
                 <template #dateTime>
-                  <ds-text v-if="post.createdAt !== post.updatedAt">
+                  <p class="ds-text" v-if="post.createdAt !== post.updatedAt">
                     ({{ $t('post.edited') }})
-                  </ds-text>
+                  </p>
                 </template>
               </user-teaser>
               <client-only>
@@ -73,12 +76,12 @@
                 />
               </client-only>
             </section>
-            <ds-space margin-bottom="small" />
+            <div class="ds-mb-small"></div>
             <h2 class="title hyphenate-text">{{ post.title }}</h2>
             <!-- event data -->
-            <ds-space
+            <div
               v-if="post && post.postType[0] === 'Event'"
-              margin-bottom="small"
+              class="ds-mb-small"
               style="padding: 10px"
             >
               <location-teaser
@@ -92,14 +95,14 @@
                 :startDate="post.eventStart"
                 :endDate="post.eventEnd"
               />
-            </ds-space>
-            <ds-space margin-bottom="small" />
+            </div>
+            <div class="ds-mb-small"></div>
             <!-- content -->
             <content-viewer class="content hyphenate-text" :content="post.content" />
             <!-- categories -->
             <div v-if="categoriesActive && post.categories.length > 0" class="categories">
-              <ds-space margin="xx-large" />
-              <ds-space margin="xx-small" />
+              <div class="ds-my-xx-large"></div>
+              <div class="ds-my-xx-small"></div>
               <hc-category
                 v-for="category in sortCategories(post.categories)"
                 :key="category.id"
@@ -111,10 +114,10 @@
                 }"
               />
             </div>
-            <ds-space margin-bottom="small" />
+            <div class="ds-mb-small"></div>
             <!-- Tags -->
             <div v-if="post.tags && post.tags.length" class="tags">
-              <ds-space margin="xx-small" />
+              <div class="ds-my-xx-small"></div>
               <hc-hashtag v-for="tag in sortedTags" :key="tag.id" :id="tag.id" />
             </div>
             <div class="actions">
@@ -135,14 +138,14 @@
               />
             </div>
             <!-- comments -->
-            <ds-section>
+            <section class="ds-section">
               <!-- comment list -->
               <comment-list
                 :post="post"
                 @toggleNewCommentForm="toggleNewCommentForm"
                 @reply="reply"
               />
-              <ds-space margin-bottom="large" />
+              <div class="ds-mb-large"></div>
               <!-- commenting form -->
               <comment-form
                 v-if="
@@ -155,7 +158,7 @@
                 @createComment="createComment"
               />
               <!-- commenting disabled -->
-              <ds-placeholder v-else>
+              <div class="ds-placeholder" v-else>
                 <hc-empty
                   margin="xxx-small"
                   icon="messages"
@@ -168,14 +171,14 @@
                     @update="updateJoinLeave"
                   />
                 </hc-empty>
-              </ds-placeholder>
-            </ds-section>
+              </div>
+            </section>
           </os-card>
-        </ds-flex-item>
-        <ds-flex-item :width="{ base: '200px' }">
+        </div>
+        <div class="post-detail-layout__sidebar" style="flex: 0 0 200px; width: 200px">
           <ds-menu :routes="routes" class="post-side-navigation" />
-        </ds-flex-item>
-      </ds-flex>
+        </div>
+      </div>
     </div>
   </transition>
 </template>
@@ -421,6 +424,25 @@ export default {
 </script>
 
 <style lang="scss">
+.post-detail-layout__main {
+  flex: 0 0 100%;
+  width: 100%;
+}
+@media #{$media-query-small} {
+  .post-detail-layout__main {
+    flex: 2 0 0;
+  }
+}
+@media #{$media-query-medium} {
+  .post-detail-layout__main {
+    flex: 2 0 0;
+  }
+}
+@media #{$media-query-large} {
+  .post-detail-layout__main {
+    flex: 1 0 0;
+  }
+}
 .post-side-navigation {
   position: sticky;
   top: 65px;

webapp/pages/post/create/_type.vue

@@ -1,19 +1,19 @@
 <template>
   <div>
-    <ds-space margin="small">
-      <ds-heading tag="h1">
+    <div class="ds-my-small">
+      <h1 class="ds-heading ds-heading-h1">
         {{ heading }}
-      </ds-heading>
-      <ds-heading v-if="group && group.id && group.slug" tag="h2">
+      </h1>
+      <h2 v-if="group && group.id && group.slug" class="ds-heading ds-heading-h2">
         {{ $t('post.viewPost.forGroup.title') }}
         <nuxt-link :to="{ name: 'groups-id-slug', params: { slug: group.slug, id: group.id } }">
           {{ group.name }}
         </nuxt-link>
-      </ds-heading>
-    </ds-space>
-    <ds-space margin="large" />
-    <ds-flex gutter="small">
-      <ds-flex-item :width="{ base: '100%', md: '200px' }">
+      </h2>
+    </div>
+    <div class="ds-my-large"></div>
+    <div class="ds-flex ds-flex-gap-small post-create-layout">
+      <div class="post-create-layout__sidebar">
         <ds-menu :routes="routes">
           <ds-menu-item
             @click.prevent="switchPostType($event, item)"
@@ -24,13 +24,13 @@
             {{ item.route.name }}
           </ds-menu-item>
         </ds-menu>
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '100%', md: 1 }">
+      </div>
+      <div class="post-create-layout__main">
         <transition name="slide-up" appear>
           <contribution-form :group="group" :createEvent="createEvent" />
         </transition>
-      </ds-flex-item>
-    </ds-flex>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -132,4 +132,19 @@ export default {
 .ds-heading {
   margin-top: 0;
 }
+
+.post-create-layout__sidebar,
+.post-create-layout__main {
+  flex: 0 0 100%;
+  width: 100%;
+}
+@media #{$media-query-medium} {
+  .post-create-layout__sidebar {
+    flex: 0 0 200px;
+    width: 200px;
+  }
+  .post-create-layout__main {
+    flex: 1 0 0;
+  }
+}
 </style>

webapp/pages/post/edit/_id.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <ds-space margin="small">
-      <ds-heading tag="h1">
+    <div class="ds-my-small">
+      <h1 class="ds-heading ds-heading-h1">
         {{ heading }}
-      </ds-heading>
-      <ds-heading
+      </h1>
+      <h2
         v-if="
           contribution && contribution.group && contribution.group.id && contribution.group.slug
         "
-        tag="h2"
+        class="ds-heading ds-heading-h2"
       >
         {{ $t('post.editPost.forGroup.title') }}
         <nuxt-link
@@ -19,19 +19,19 @@
         >
           {{ contribution.group.name }}
         </nuxt-link>
-      </ds-heading>
-    </ds-space>
-    <ds-space margin="large" />
-    <ds-flex :width="{ base: '100%' }" gutter="base">
-      <ds-flex-item :width="{ base: '100%', md: 3 }">
+      </h2>
+    </div>
+    <div class="ds-my-large"></div>
+    <div class="ds-flex ds-flex-gap-base post-edit-layout">
+      <div class="post-edit-layout__main">
         <contribution-form
           :contribution="contribution"
           :group="contribution && contribution.group ? contribution.group : null"
           :createEvent="contribution && contribution.postType[0] === 'Event'"
         />
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
-    </ds-flex>
+      </div>
+      <div class="post-edit-layout__aside"></div>
+    </div>
   </div>
 </template>
 
@@ -89,4 +89,18 @@ export default {
 .ds-heading {
   margin-top: 0;
 }
+
+.post-edit-layout__main,
+.post-edit-layout__aside {
+  flex: 0 0 100%;
+  width: 100%;
+}
+@media #{$media-query-medium} {
+  .post-edit-layout__main {
+    flex: 3 0 0;
+  }
+  .post-edit-layout__aside {
+    flex: 1 0 0;
+  }
+}
 </style>