From b113dcd7c900360d4e9c9a7a3a864e17dbbe61cd Mon Sep 17 00:00:00 2001 From: Armaan Gupta Date: Thu, 6 Aug 2026 12:25:04 +0530 Subject: [PATCH 1/4] feat(table): add AEM Style System variant support theme for table component (striped rows) --- src/components/table/_table.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index ba2cfd0..c973e43 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -110,6 +110,11 @@ background-color: $very-light-gray; } +/* ===============Table Variants================== */ +.cmp-adaptiveform-table--striped .cmp-adaptiveform-table__body .cmp-adaptiveform-tablerow:nth-child(even) > .cmp-adaptiveform-tablecell { + background-color: $very-light-gray; +} + /* ===============Table Row Controls (repeatable)================== */ .cmp-adaptiveform-tablecell.cmp-adaptiveform-tablecell--with-row-controls { display: flex; From 6a383696615e134d74c4cf498ce75a9b640b7500 Mon Sep 17 00:00:00 2001 From: Armaan Gupta Date: Fri, 7 Aug 2026 10:31:44 +0530 Subject: [PATCH 2/4] feat(table): add AEM Style System variant support theme for table component (bordered cells) --- src/components/table/_table.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index c973e43..5276fd5 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -115,6 +115,15 @@ background-color: $very-light-gray; } +.cmp-adaptiveform-table--bordered .cmp-adaptiveform-table__widget { + border: 2px solid $dark-gray; +} + +.cmp-adaptiveform-table--bordered .cmp-adaptiveform-tablecell, +.cmp-adaptiveform-table--bordered .cmp-adaptiveform-tablehead { + border: 1px solid $dark-gray; +} + /* ===============Table Row Controls (repeatable)================== */ .cmp-adaptiveform-tablecell.cmp-adaptiveform-tablecell--with-row-controls { display: flex; From c4921b88170f264bb4c58e39609cf5cbfafac201 Mon Sep 17 00:00:00 2001 From: Armaan Gupta Date: Mon, 17 Aug 2026 22:27:27 +0530 Subject: [PATCH 3/4] update(style) : updated the style css according to designs given by XD --- src/components/table/_table.scss | 8 ++++++-- src/site/_variables.scss | 3 +++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 5276fd5..47efaaf 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -112,11 +112,15 @@ /* ===============Table Variants================== */ .cmp-adaptiveform-table--striped .cmp-adaptiveform-table__body .cmp-adaptiveform-tablerow:nth-child(even) > .cmp-adaptiveform-tablecell { - background-color: $very-light-gray; + background: $Palette-gray-100; +} + +.cmp-adaptiveform-table--striped .cmp-adaptiveform-tablehead{ + background-color: $medium-gray; } .cmp-adaptiveform-table--bordered .cmp-adaptiveform-table__widget { - border: 2px solid $dark-gray; + border: 2px solid $Palette-gray-600; } .cmp-adaptiveform-table--bordered .cmp-adaptiveform-tablecell, diff --git a/src/site/_variables.scss b/src/site/_variables.scss index bc84755..98432b9 100644 --- a/src/site/_variables.scss +++ b/src/site/_variables.scss @@ -19,6 +19,9 @@ $tnc-header-bg-color: #afb0b5; $dark-blue: #168be8; $vivid-blue: #147af3; $focus-ring-color: #275ec5; +$Palette-gray-100: #F8F8F8; +$Palette-gray-600: #6D6D6D; +$medium-gray: #aeaeae; // ====== font size====== $font-xlg: 1.5rem; From 4b059b3e22cf05cc21ac54f1a2cfb5d2cc713f83 Mon Sep 17 00:00:00 2001 From: Armaan Gupta Date: Tue, 18 Aug 2026 09:52:12 +0530 Subject: [PATCH 4/4] RTL compabibilty fix --- src/site/_variables.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/site/_variables.scss b/src/site/_variables.scss index 98432b9..9d798e3 100644 --- a/src/site/_variables.scss +++ b/src/site/_variables.scss @@ -19,9 +19,9 @@ $tnc-header-bg-color: #afb0b5; $dark-blue: #168be8; $vivid-blue: #147af3; $focus-ring-color: #275ec5; -$Palette-gray-100: #F8F8F8; -$Palette-gray-600: #6D6D6D; -$medium-gray: #aeaeae; +$Palette-gray-100: #f8f8f8; +$Palette-gray-600: #6d6d6d; +$medium-gray: #aeaeae; // ====== font size====== $font-xlg: 1.5rem;