Skip to content

43452: Convivial v1.0 #221

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
convivial-bot wants to merge 11 commits into
base: 1.0.x
Choose a base branch
from
Open

43452: Convivial v1.0 #221

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1a84342
41128: Implement Theme UI features. (#707)
tanashin-kishimoto Sep 17, 2025
9db3c72
43516: Remove tiles component. (#715)
honzapara Sep 18, 2025
8890bec
43515: Remove hero-banner component. (#718)
honzapara Sep 20, 2025
83f021f
43513: Rename decision tree component to decision flow. (#716)
honzapara Sep 20, 2025
72a1869
43514: Implement iFrame component. (#717)
honzapara Sep 20, 2025
8db8f8c
43517: Remove the remains of the readspeaker component. (#714)
honzapara Sep 20, 2025
97014a1
43511: Setup CSS variables. (#720)
tanashin-kishimoto Sep 25, 2025
19be5b9
39326: Remove smooth-scroll library. (#721)
honzapara Sep 25, 2025
5826645
43622: Implement feedback form. (#722)
honzapara Sep 27, 2025
63770d2
43590: Implement logo block. (#723)
honzapara Sep 27, 2025
86c536c
Merge branch '1.0.x' of github.com:morpht/convivial_bootstrap into c-…
tanashin-kishimoto Oct 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion assets/images/anchor-inverse.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion assets/images/anchor.svg
View file
Open in desktop

This file was deleted.

Binary file removed assets/logo/bookshop-logo--inverse.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/logo/bookshop-logo--small-inverse.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/logo/bookshop-logo--small.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/logo/bookshop-logo.png
View file
Open in desktop
Binary file not shown.
4 changes: 2 additions & 2 deletions base/scss/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ svg {
}

*:focus {
outline: $outline-width $outline-style var(--standard-link-active);
outline: $outline-width $outline-style var(--link-active);
outline-offset: $outline-offset;
}

a {
&:focus {
outline: $link-outline-width $link-outline-style var(--standard-link-active);
outline: $link-outline-width $link-outline-style var(--link-active);
outline-offset: $link-outline-offset;
}
}
Expand Down
360 changes: 27 additions & 333 deletions base/scss/_color-palettes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,347 +1,41 @@
// Define color palettes CSS variables
:root {
--standard-light: #FFFFFF;
--standard-dark: #000000;
--alt-text: rgba(0, 0, 0, 0.6);

--standard-foreground: var(--standard-dark);
--standard-background: #FCFCFC;
--standard-link: #066DAC;
--standard-link-hover: #044E7B;
--standard-link-active: #088CDD;
--standard-accent: #064771;
--standard-accent-hover: #032941;
--standard-accent-active: #0965A1;

--alt-background: #ebebeb;
--alt-foreground: #000000;

--light-foreground: var(--standard-dark);
--light-background: #F0F0F0;
--light-link: #066DAC;
--light-link-hover: #044E7B;
--light-link-active: #088CDD;
--light-accent: #064771;
--light-accent-hover: #032941;
--light-accent-active: #0965A1;
/*! @convivial_bootstrap/color-palettes */

--dark-foreground: var(--standard-light);
--dark-background: #064771;
--dark-link: #68BEF8;
--dark-link-hover: #99D3FA;
--dark-link-active: #37A9F6;
--dark-accent: #9FD5F9;
--dark-accent-hover: #CFEAFC;
--dark-accent-active: #6FC0F6;

--primary-foreground: var(--standard-dark);
--primary-background: #FFDBFF;
--primary-link: #A00AA0;
--primary-link-hover: #700770;
--primary-link-active: #D00DD0;
--primary-accent: #700770;
--primary-accent-hover: #400440;
--primary-accent-active: #A00AA0;

--primary-dark-foreground: var(--standard-light);
--primary-dark-background: #700770;
--primary-dark-link: #FF8EFF;
--primary-dark-link-hover: #FFC1FF;
--primary-dark-link-active: #FF5BFF;
--primary-dark-accent: #FFDBFF;
--primary-dark-accent-hover: #FFFFFF;
--primary-dark-accent-active: #FFA8FF;
// Define CSS variables
:root {
--alt-text: var(--foreground-weak);
--border-color: var(--background-weaker);
}

// Default color palettes
.cp {
padding: calc($grid-gutter-width * 2) calc($grid-gutter-width / 2);
--alt-text: var(--foreground-weak);
--border-color: var(--background-weaker);

padding: $section-spacing;
border-radius: var(--radius-box);

@include media-breakpoint-up(md) {
padding-left: $grid-gutter-width;
padding-right: $grid-gutter-width;
padding-top: $section-spacing-md;
padding-bottom: $section-spacing-md;
}
}

.cp--standard {
background-color: var(--standard-background);
&.modifiers-has-background {
overflow: hidden;
}
}

$palettes: (
standard: (
is_dark: false,
foreground: var(--standard-foreground),
background: var(--standard-background),
link: var(--standard-link),
link_active: var(--standard-link-active),
link_hover: var(--standard-link-hover),
accent: var(--standard-accent),
accent_active: var(--standard-accent),
accent_hover: var(--standard-accent-hover),
),
light: (
is_dark: false,
foreground: var(--light-foreground),
background: var(--light-background),
link: var(--light-link),
link_active: var(--light-link-active),
link_hover: var(--light-link-hover),
accent: var(--light-accent),
accent_active: var(--light-accent),
accent_hover: var(--light-accent-hover),
),
dark: (
is_dark: true,
foreground: var(--dark-foreground),
background: var(--dark-background),
link: var(--dark-link),
link_active: var(--dark-link-active),
link_hover: var(--dark-link-hover),
accent: var(--dark-accent),
accent_active: var(--dark-accent),
accent_hover: var(--dark-accent-hover),
),
primary: (
is_dark: false,
foreground: var(--primary-foreground),
background: var(--primary-background),
link: var(--primary-link),
link_active: var(--primary-link-active),
link_hover: var(--primary-link-hover),
accent: var(--primary-accent),
accent_active: var(--primary-accent),
accent_hover: var(--primary-accent-hover),
),
primary-dark: (
is_dark: true,
foreground: var(--primary-dark-foreground),
background: var(--primary-dark-background),
link: var(--primary-dark-link),
link_active: var(--primary-dark-link-active),
link_hover: var(--primary-dark-link-hover),
accent: var(--primary-dark-accent),
accent_active: var(--primary-dark-accent),
accent_hover: var(--primary-dark-accent-hover),
),
);

// Set each color palettes
@each $name, $palette in $palettes {
$is_dark: map-get($palette, is_dark);

.cp--#{$name} {

// Foreground
color: map-get($palette, foreground);

@if $is_dark == true {
--alt-text: var(--standard-light);
}

// Background
background-color: map-get($palette, background);

*:focus {
outline-color: map-get($palette, link_active);
}

// Links
a {
color: map-get($palette, link);

&:hover {
color: map-get($palette, link_hover);
}

&:focus {
outline-color: map-get($palette, link_active);
}
}

// Card
.card.card--clickable {
&:focus-within {
outline-color: map-get($palette, link_active);
}
}

// Buttons
.btn.btn-link {
color: map-get($palette, link);

&:hover {
color: map-get($palette, link_hover);
}

&:focus,
&:active,
.active {
outline-color: map-get($palette, link_active);
}
}

@if $is_dark == true {
.btn.btn-primary {
@include convivial-button-variant(
$background: map-get($palette, accent),
$color: $darken-90,
$hover: map-get($palette, accent_hover),
$focus: map-get($palette, accent_active),
);
}
.btn.btn-secondary {
@include convivial-button-variant(
$background: map-get($palette, link),
$color: $darken-90,
$hover: map-get($palette, link_hover),
$focus: map-get($palette, link_active),
);
}
.btn.btn-light {
@include convivial-button-variant(
$background: $lighten-90,
$color: $darken-90,
$hover: $lighten-80,
$focus: $lighten-95,
);
}
.btn.btn-dark {
@include convivial-button-variant(
$background: $darken-90,
$color: $lighten-90,
$hover: $darken-80,
$focus: $darken-95,
);
}
.btn.btn-outline-primary {
@include convivial-outline-button-variant(
$color: map-get($palette, accent),
$color-hover: $darken-90,
$focus: map-get($palette, accent_active),
);
}
.btn.btn-outline-secondary {
@include convivial-outline-button-variant(
$color: map-get($palette, link),
$color-hover: $darken-90,
$focus: map-get($palette, link_active),
);
}
.btn.btn-outline-light {
@include convivial-outline-button-variant(
$color: $lighten-90,
$color-hover: $darken-90,
$focus: $lighten-95,
);
}
// On dark backgrounds, the dark button looks same as the light button
.btn.btn-outline-dark {
@include convivial-outline-button-variant(
$color: $lighten-90,
$color-hover: $darken-90,
$focus: $lighten-95,
);
}
} @else {
.btn.btn-primary {
@include convivial-button-variant(
$background: map-get($palette, accent),
$color: $lighten-90,
$hover: map-get($palette, accent_hover),
$focus: map-get($palette, accent_active),
);
}
.btn.btn-secondary {
@include convivial-button-variant(
$background: map-get($palette, link),
$color: $lighten-90,
$hover: map-get($palette, link_hover),
$focus: map-get($palette, link_active),
);
}
.btn.btn-light {
@include convivial-button-variant(
$background: $darken-10,
$color: $darken-90,
$hover: $darken-20,
$focus: $darken-25,
);
}
.btn.btn-dark {
@include convivial-button-variant(
$background: $darken-90,
$color: $lighten-90,
$hover: $darken-95,
$focus: $darken-80,
);
}
.btn.btn-outline-primary {
@include convivial-outline-button-variant(
$color: map-get($palette, accent),
$color-hover: $lighten-90,
$focus: map-get($palette, accent_active),
);
}
.btn.btn-outline-secondary {
@include convivial-outline-button-variant(
$color: map-get($palette, link),
$color-hover: $lighten-90,
$focus: map-get($palette, link_active),
);
}
// On light backgrounds, the light button looks same as the dark button
.btn.btn-outline-light {
@include convivial-outline-button-variant(
$color: $darken-90,
$color-hover: $lighten-90,
$focus: $darken-80,
);
}
.btn.btn-outline-dark {
@include convivial-outline-button-variant(
$color: $darken-90,
$color-hover: $lighten-90,
$focus: $darken-80,
);
}
}

// Blockquote
blockquote {
border-color: map-get($palette, accent);
}

// Figure
@if $is_dark == true {
figure figcaption {
background: rgba(255, 255, 255, 0.05);
}
}

// Slider
.slick-slider {
.slick-prev,
.slick-next {
background-color: map-get($palette, link);

&:hover,
&:focus {
background-color: map-get($palette, link_hover);
}
}
}

@if $is_dark == true {
.slick-slider {
.slick-prev:before {
background-image: escape-svg(#{$slider-previous-icon-black});
}
[class*="cp--"] {
color: var(--foreground);
background-color: var(--background);
}

.slick-next:before {
background-image: escape-svg(#{$slider-next-icon-black});
}
}
}
[class*="cp cp--"] {
background: linear-gradient(45deg, var(--background), var(--background-strong));
}

// Edgy layout
.layout--content-edgy,
.layout.edgy {
.cp {
border-radius: 0;
}
}
Loading