From 9950af5785a07d726e489306329963c1caacfc90 Mon Sep 17 00:00:00 2001 From: josue2591 Date: Wed, 10 Apr 2024 21:24:52 +0200 Subject: [PATCH 1/7] feat(EMULSIF-84): cards styles updated with tokens usage --- src/components/card/_card.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index b1a6390..b75b2b7 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -13,8 +13,9 @@ .card__heading { @include heading-large($font-size: var(--font-size-h3)); + color: var(--color-text-heading); margin: 0; - line-height: var(--line-heights-tight); + line-height: var(--line-height-tight); &-link { @include link; @@ -26,12 +27,16 @@ .card__subheading { @include heading-medium($font-size: var(--font-size-small)); - color: var(--colors-grays-500); + color: var(--color-grays-500); margin: 0 0 var(--spacing-md); - line-height: var(--line-heights-tight); + line-height: var(--line-height-tight); text-transform: uppercase; } +.card__body { + color: var(--color-text-body); +} + .card__link { @include link; } From f000f3aa1e1e3e0702eb9236ba2cf65b965e7196 Mon Sep 17 00:00:00 2001 From: josue2591 Date: Wed, 10 Apr 2024 21:25:48 +0200 Subject: [PATCH 2/7] feat(EMULSIF-76): links styles updated with tokens usage --- src/stylesheets/mixins.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/stylesheets/mixins.scss b/src/stylesheets/mixins.scss index 3e7fdec..2eb78f6 100644 --- a/src/stylesheets/mixins.scss +++ b/src/stylesheets/mixins.scss @@ -186,10 +186,10 @@ $outer-container-break: var(--breakpoint-sm); } @mixin link { - color: var(--link-default); + color: var(--link-color-default); transition: all .15s; &:hover { - color: var(--link-hover); + color: var(--link-color-hover); } -} \ No newline at end of file +} From e3e87b4702cdb972002258176046269f42d3b07b Mon Sep 17 00:00:00 2001 From: josue2591 Date: Wed, 10 Apr 2024 21:26:17 +0200 Subject: [PATCH 3/7] feat(EMULSIF-82): sr-only mixin created --- src/stylesheets/mixins.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/stylesheets/mixins.scss b/src/stylesheets/mixins.scss index 2eb78f6..cbba67c 100644 --- a/src/stylesheets/mixins.scss +++ b/src/stylesheets/mixins.scss @@ -193,3 +193,15 @@ $outer-container-break: var(--breakpoint-sm); color: var(--link-color-hover); } } + +@mixin sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} From 5ec24ffbbe876a68690d1c02f94e32ff3ce17212 Mon Sep 17 00:00:00 2001 From: josue2591 Date: Wed, 10 Apr 2024 21:28:19 +0200 Subject: [PATCH 4/7] feat(EMULSIF-85): checkboxes styles updated with tokens usage --- .../forms/checkbox/_checkbox-item.twig | 2 +- src/components/forms/checkbox/_checkbox.scss | 54 +++++++++++++++++-- 2 files changed, 52 insertions(+), 4 deletions(-) diff --git a/src/components/forms/checkbox/_checkbox-item.twig b/src/components/forms/checkbox/_checkbox-item.twig index f0ef4c3..ad9e475 100644 --- a/src/components/forms/checkbox/_checkbox-item.twig +++ b/src/components/forms/checkbox/_checkbox-item.twig @@ -1,8 +1,8 @@ {% set labelClasses = checkbox_item_disabled ? 'form-item--checkbox__item--label__disabled' : '' %}
  • +
    • diff --git a/src/components/forms/checkbox/_checkbox.scss b/src/components/forms/checkbox/_checkbox.scss index 4141753..4ebf888 100644 --- a/src/components/forms/checkbox/_checkbox.scss +++ b/src/components/forms/checkbox/_checkbox.scss @@ -6,13 +6,61 @@ .form-item--checkboxes { display: flex; flex-flow: column nowrap; - gap: var(--checkbox-gap); + gap: var(--checkbox-spacing-gap); } .form-item--checkbox__item--label { - color: var(--checkbox-label); + display: inline-block; + position: relative; + cursor: pointer; + padding-left: calc(var(--spacing-lg) + var(--spacing-sm)); + color: var(--checkbox-color-label); + font-size: var(--font-size-caption); + + &::before { + content: ''; + position: absolute; + left: 0; + top: 5px; + width: 16px; + height: 16px; + border: 1px solid var(--checkbox-button-stroke); + background-color: transparent; + } + + &::after { + content: ''; + position: absolute; + left: 6px; + top: 7px; + width: 5px; + height: 9px; + border: solid white; + border-width: 0 1px 1px 0; + transform: rotate(45deg); + display: none; + } } .form-item--checkbox__item--label__disabled { - color: var(--checkbox-label-disabled); + color: var(--checkbox-color-label-disabled); + + &::before { + border-color: var(--checkbox-button-stroke-disabled); + } +} + +.form-item--checkbox__item { + input[type='checkbox'] { + @include sr-only; + } + + input[type='checkbox']:checked + .form-item--checkbox__item--label::before { + background-color: var(--checkbox-button-fill); + } + + input[type='checkbox']:checked + .form-item--checkbox__item--label::after { + display: block; + border-color: white; + } } From 0f21fcb55ed1382a35bc1bc971e8fce489b58f33 Mon Sep 17 00:00:00 2001 From: josue2591 Date: Wed, 10 Apr 2024 21:28:47 +0200 Subject: [PATCH 5/7] feat(EMULSIF-86): radio buttons styles updated with tokens usage --- src/components/forms/radio/_radio-item.twig | 6 +-- src/components/forms/radio/_radio.scss | 47 ++++++++++++++++++++- 2 files changed, 48 insertions(+), 5 deletions(-) diff --git a/src/components/forms/radio/_radio-item.twig b/src/components/forms/radio/_radio-item.twig index aa68fd6..83bc174 100644 --- a/src/components/forms/radio/_radio-item.twig +++ b/src/components/forms/radio/_radio-item.twig @@ -1,8 +1,8 @@ {% set labelClasses = radio_item_disabled ? 'form-item--radio__item--label__disabled' : '' %} -
  • -
  • + +
    • diff --git a/src/components/forms/radio/_radio.scss b/src/components/forms/radio/_radio.scss index 6e9784b..54c7bdf 100644 --- a/src/components/forms/radio/_radio.scss +++ b/src/components/forms/radio/_radio.scss @@ -10,9 +10,52 @@ } .form-item--radio__item--label { - color: var(--radio-label); + display: inline-block; + position: relative; + cursor: pointer; + padding-left: calc(var(--spacing-lg) + var(--spacing-sm)); + color: var(--radio-color-label); + font-size: var(--font-size-caption); + + &::before { + content: ''; + position: absolute; + left: 0; + top: 5px; + width: 16px; + height: 16px; + border: 1px solid var(--checkbox-button-stroke); + background-color: transparent; + border-radius: 50%; + } + + &::after { + content: ''; + position: absolute; + left: 4px; + top: 9px; + width: 8px; + height: 8px; + display: none; + background-color: var(--radio-color-button-fill); + border-radius: 50%; + } } .form-item--radio__item--label__disabled { - color: var(--radio-label-disabled); + color: var(--radio-color-button-fill-disabled); + + &::before { + border-color: var(--radio-button-stroke-disabled); + } +} + +.form-item--radio__item { + input[type='radio'] { + @include sr-only; + } + + input[type='radio']:checked + .form-item--radio__item--label::after { + display: block; + } } From 73db4b1b850a05dfb31fc1e862e196337f548943 Mon Sep 17 00:00:00 2001 From: josue2591 Date: Wed, 10 Apr 2024 19:38:49 +0000 Subject: [PATCH 6/7] feat: create tokens --- src/components/tokens/_tokens.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index 6e11f81..91c55c1 100644 --- a/src/components/tokens/_tokens.scss +++ b/src/components/tokens/_tokens.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 10 Apr 2024 16:14:10 GMT + * Generated on Wed, 10 Apr 2024 19:38:48 GMT */ :root { From 7ad218ca974ca851fe4e38d1b9a238be95dcbdfc Mon Sep 17 00:00:00 2001 From: mariannuar Date: Fri, 10 May 2024 20:46:36 +0000 Subject: [PATCH 7/7] feat: create tokens --- src/components/tokens/_tokens.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index f96d575..4b4f205 100644 --- a/src/components/tokens/_tokens.scss +++ b/src/components/tokens/_tokens.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Fri, 10 May 2024 20:34:40 GMT + * Generated on Fri, 10 May 2024 20:46:35 GMT */ :root {