From cbd313fa70db20322325fc71c275a2451ca6cf02 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Fri, 27 Sep 2024 11:34:20 -0600 Subject: [PATCH] fix(feat-stories-cleanup): in accordion and blockquote --- src/components/accordion/accordion.scss | 42 ++++++++++++++++---- src/components/blockquote/blockquote.scss | 8 ++-- src/components/text/text/text.scss | 2 +- src/tokens/tokens.scss | 2 - tokens/undefined/border-radius-tokens.twig | 16 ++++++++ tokens/undefined/borders.twig | 16 ++++++++ tokens/undefined/breakpoints.twig | 16 ++++++++ tokens/undefined/color.twig | 45 ++++++++++++++++++++++ tokens/undefined/line-height.twig | 18 +++++++++ tokens/undefined/motion.twig | 11 ++++++ tokens/undefined/opacity.twig | 16 ++++++++ tokens/undefined/sizes.twig | 16 ++++++++ tokens/undefined/spacing.twig | 21 ++++++++++ tokens/undefined/type-faces.twig | 15 ++++++++ tokens/undefined/type-scale.twig | 18 +++++++++ util/undefined/controlData.yml | 5 +++ 16 files changed, 253 insertions(+), 14 deletions(-) create mode 100644 tokens/undefined/border-radius-tokens.twig create mode 100644 tokens/undefined/borders.twig create mode 100644 tokens/undefined/breakpoints.twig create mode 100644 tokens/undefined/color.twig create mode 100644 tokens/undefined/line-height.twig create mode 100644 tokens/undefined/motion.twig create mode 100644 tokens/undefined/opacity.twig create mode 100644 tokens/undefined/sizes.twig create mode 100644 tokens/undefined/spacing.twig create mode 100644 tokens/undefined/type-faces.twig create mode 100644 tokens/undefined/type-scale.twig create mode 100644 util/undefined/controlData.yml diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss index 3ddb0fb0..fadda506 100644 --- a/src/components/accordion/accordion.scss +++ b/src/components/accordion/accordion.scss @@ -13,7 +13,7 @@ content: ''; display: block; position: absolute; - background: var(--tabs-color-text-default); + background: var(--accordion-color-header); border-radius: var(--spacing-md); inset: 0 0 0 auto; margin: auto; @@ -35,7 +35,7 @@ &:hover { &::before, &::after { - background-color: var(--color-primary-default); + background-color: var(--accordion-color-header-hover); } } @@ -84,10 +84,16 @@ padding: 0 var(--spacing-xl) 0 0; position: relative; cursor: pointer; + text-transform: none; } &:hover { - color: var(--color-primary-default); + color: var(--accordion-color-header-hover); + + &::before, + &::after { + background: var(--accordion-color-header-hover); + } } } @@ -101,11 +107,13 @@ cursor: pointer; padding: 0 var(--spacing-xl) 0 0; line-height: var(--line-height-tight); + font-weight: var(--font-weight-primary-regular); + text-transform: none; } - &:hover, - &:focus { - color: var(--color-primary-default); + &::before, + &::after { + background: var(--accordion-color-header-hover); } &::before { @@ -121,6 +129,16 @@ right: var(--spacing-sm); } + &:hover, + &:focus { + text-decoration: none; + + &::before, + &::after { + background: var(--accordion-color-header); + } + } + &--collapse { &::before { display: none; @@ -128,6 +146,15 @@ } } +.button[data-button-style='clean'].accordion__toggle-all { + color: var(--accordion-color-header-hover); + + &:hover, + &:focus { + color: var(--accordion-color-header); + } +} + .accordion__icon { height: var(--spacing-lg); width: var(--spacing-lg); @@ -150,9 +177,10 @@ display: flex; margin: 0; + font-weight: var(--font-weight-primary-regular); &:hover { - color: clr(primary); + color: var(--accordion-color-header-hover); } } diff --git a/src/components/blockquote/blockquote.scss b/src/components/blockquote/blockquote.scss index 68f1cc84..9aaffe6f 100644 --- a/src/components/blockquote/blockquote.scss +++ b/src/components/blockquote/blockquote.scss @@ -1,6 +1,6 @@ .blockquote { width: 573px; - padding: var(--blockquote-padding-x) 0; + padding: var(--block-quote-padding-x) 0; } .blockquote__quote { @@ -20,12 +20,12 @@ .blockquote__blockquote { [data-blockquote-style='bar-left'] & { - padding-left: var(--blockquote-padding-x); + padding-left: var(--block-quote-padding-x); border-left: var(--size-md) solid var(--color-text-body); } [data-blockquote-style='bar-right'] & { - padding-right: var(--blockquote-padding-x); + padding-right: var(--block-quote-padding-x); border-right: var(--size-md) solid var(--color-text-body); text-align: right; } @@ -42,7 +42,7 @@ } .blockquote__quote p { - margin: var(--blockquote-padding-y) var(--paragraph-spacing-0); + margin: var(--block-quote-padding-y) var(--paragraph-spacing-0); } } } diff --git a/src/components/text/text/text.scss b/src/components/text/text/text.scss index be16c9d6..903961f9 100644 --- a/src/components/text/text/text.scss +++ b/src/components/text/text/text.scss @@ -16,7 +16,7 @@ %blockquote, .blockquote { border-left: 4px solid var(--colors-text-body); - font-family: var(--font-families-secondary); + font-family: var(--font-family-secondary); font-size: var(--font-size-h5); padding: var(--spacing-lg) var(--spacing-xl); } diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss index 58e256a6..af6ed352 100644 --- a/src/tokens/tokens.scss +++ b/src/tokens/tokens.scss @@ -78,9 +78,7 @@ --main-menu-color-dropdown-label: #0080b7; --main-menu-color-dropdown-label-hover: #006089; --link-color-default: #005f89; - --link-color-inverse: #fff; --link-color-hover: #00202e; - --link-color-inverse-hover: #9ce1ff; --link-body: [object Object]; --input-gap: 0.5rem; --input-padding-x: 1rem; diff --git a/tokens/undefined/border-radius-tokens.twig b/tokens/undefined/border-radius-tokens.twig new file mode 100644 index 00000000..04e4697a --- /dev/null +++ b/tokens/undefined/border-radius-tokens.twig @@ -0,0 +1,16 @@ +
+

Border Radius Tokens

+ + +
diff --git a/tokens/undefined/borders.twig b/tokens/undefined/borders.twig new file mode 100644 index 00000000..c13bbdda --- /dev/null +++ b/tokens/undefined/borders.twig @@ -0,0 +1,16 @@ +
+

Border Tokens

+ + +
diff --git a/tokens/undefined/breakpoints.twig b/tokens/undefined/breakpoints.twig new file mode 100644 index 00000000..69b1cfed --- /dev/null +++ b/tokens/undefined/breakpoints.twig @@ -0,0 +1,16 @@ +
+

Breakpoint Tokens

+ +
diff --git a/tokens/undefined/color.twig b/tokens/undefined/color.twig new file mode 100644 index 00000000..59bd4ebf --- /dev/null +++ b/tokens/undefined/color.twig @@ -0,0 +1,45 @@ +
+

Colors

+ + {% for color, value in _context.colors %} +

{{ color }}

+ {% if value.value is defined %} + + {% else %} + + {% endif %} + {% endfor %} +
diff --git a/tokens/undefined/line-height.twig b/tokens/undefined/line-height.twig new file mode 100644 index 00000000..cdd81615 --- /dev/null +++ b/tokens/undefined/line-height.twig @@ -0,0 +1,18 @@ +{% set text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." %} + +
+

Line Heights

+ + +
diff --git a/tokens/undefined/motion.twig b/tokens/undefined/motion.twig new file mode 100644 index 00000000..594c491b --- /dev/null +++ b/tokens/undefined/motion.twig @@ -0,0 +1,11 @@ +
+

Motion

+
+ {% for motion in motions %} +
+

{{ motion.name }}

+
+
+ {% endfor %} +
+
diff --git a/tokens/undefined/opacity.twig b/tokens/undefined/opacity.twig new file mode 100644 index 00000000..6c135b7d --- /dev/null +++ b/tokens/undefined/opacity.twig @@ -0,0 +1,16 @@ +
+

Opacity Tokens

+ + +
diff --git a/tokens/undefined/sizes.twig b/tokens/undefined/sizes.twig new file mode 100644 index 00000000..a727eee2 --- /dev/null +++ b/tokens/undefined/sizes.twig @@ -0,0 +1,16 @@ +
+

Size Tokens

+ + +
diff --git a/tokens/undefined/spacing.twig b/tokens/undefined/spacing.twig new file mode 100644 index 00000000..1f84cb12 --- /dev/null +++ b/tokens/undefined/spacing.twig @@ -0,0 +1,21 @@ +
+

Spacing Tokens

+ + +
diff --git a/tokens/undefined/type-faces.twig b/tokens/undefined/type-faces.twig new file mode 100644 index 00000000..5208c4f5 --- /dev/null +++ b/tokens/undefined/type-faces.twig @@ -0,0 +1,15 @@ +
+

Type Faces

+ + +
diff --git a/tokens/undefined/type-scale.twig b/tokens/undefined/type-scale.twig new file mode 100644 index 00000000..4174fdcd --- /dev/null +++ b/tokens/undefined/type-scale.twig @@ -0,0 +1,18 @@ +
+

Type Scale

+ + +
diff --git a/util/undefined/controlData.yml b/util/undefined/controlData.yml new file mode 100644 index 00000000..3d7e17cc --- /dev/null +++ b/util/undefined/controlData.yml @@ -0,0 +1,5 @@ +color_variant: + - 'base' + - 'dark' + - 'light' + - 'bright'