Skip to content
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

[WIP] init theming updates #440

Closed
wants to merge 5 commits into from
Closed

[WIP] init theming updates #440

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b0700e1
init theming updates
marcellamaki Jul 4, 2023
eb34119
Additional theme updates/fixes, and beginning of component color udpates
marcellamaki Feb 13, 2024
7066760
Update brand default colors and finalize token colors across KDS comp…
LianaHarris360 Feb 15, 2024
591308f
Theme fixes, component documentation and changelog updates
LianaHarris360 Feb 16, 2024
bb4e662
Update changelog file
LianaHarris360 Feb 19, 2024
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
11 changes: 11 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,17 @@ Changelog is rather internal in nature. See release notes for the public overvie

<!-- Put all new updates into this section, please -->

- [#440]
- **Description:** Updates brand theme color tokens and token mapping within components
- **Products impact:** Brand token updates
- **Addresses:** - https://github.com/learningequality/kolibri-design-system/issues/545
- **Components:** -
- **Breaking:** -
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will be a breaking update as it changes UI significantly

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd also appreciate if the changes could be listed here in a bit more detail, for example what categories of theming were affected. No need to explain which hex color changed into what, rather just to sum up the most important areas of impact.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for this, I was planning to update the changelog with more info but wasn't too sure about the level of detail to include.

- **Impacts a11y:** -
- **Guidance:** -

[#440]: https://github.com/learningequality/kolibri-design-system/pull/440

- [#531]
- **Description:** Remove unused `keen-ui` dependency
- **Products impact:** none
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/buttons.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,13 +144,13 @@
<KButtonGroup>
<KButton
text="Options"
:primary="true"
:primary="false"
iconAfter="chevronDown"
>
<KDropdownMenu
style="margin-right: 16px;"
text="Primary"
:primary="true"
:primary="false"
:options="['Option 1', 'Option 2']"
appearance="raised-button"
/>
Expand Down
31 changes: 15 additions & 16 deletions docs/pages/colors.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
<DocsColorBlock name="tokens.text" />
<DocsColorBlock name="tokens.error" />
<DocsColorBlock name="tokens.primary" />
<DocsColorBlock name="brand.primary.v_900" />
<DocsColorBlock name="brand.secondary.v_200" />
<DocsColorBlock name="brand.primary.v_1100" />
<DocsColorBlock name="brand.secondary.v_800" />
<DocsColorBlock name="palette.grey.v_400" />

<p>
Expand Down Expand Up @@ -173,27 +173,29 @@
</DocsColorBlock>

<h3>Content-related labels</h3>
<DocsColorBlock name="tokens.exercise" definition />
<DocsColorBlock name="tokens.video" definition />
<DocsColorBlock name="tokens.audio" definition />
<DocsColorBlock name="tokens.document" definition />
<DocsColorBlock name="tokens.html5" definition />
<DocsColorBlock name="tokens.practice" definition />
<DocsColorBlock name="tokens.watch" definition />
<DocsColorBlock name="tokens.listen" definition />
<DocsColorBlock name="tokens.read" definition />
<DocsColorBlock name="tokens.explore" definition />
<DocsColorBlock name="tokens.create" definition />
<DocsColorBlock name="tokens.reflect" definition />
<DocsColorBlock name="tokens.topic" definition />

</DocsPageSection>

<DocsPageSection title="Scales" anchor="#scales">
<p>
A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In the Kolibri Design System, we follow <DocsExternalLink text="Google's Material convention" href="https://material.io/archive/guidelines/style/color.html" /> and segment colors into ten brightness levels, named <code>v_50</code>, <code>v_100</code>, <code>v_20</code>, … <code>v_800</code>, <code>v_900</code>:
A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In the Kolibri Design System, we follow <DocsExternalLink text="Google's Material convention" href="https://material.io/archive/guidelines/style/color.html" /> and segment colors into brightness levels, named <code>v_200</code>, <code>v_400</code>, <code>v_600</code>, … <code>v_1000</code>, <code>v_1100</code>:
</p>
<DocsColorBlock name="palette.blue.v_50" />
<DocsColorBlock name="palette.blue.v_100" />
<DocsColorBlock name="palette.blue.v_200" />
<DocsColorBlock name="palette.green.v_200" />
<DocsColorBlock name="palette.green.v_400" />
<DocsColorBlock name="palette.green.v_600" />
<p style="margin-left: 60px">
…
</p>
<DocsColorBlock name="palette.blue.v_800" />
<DocsColorBlock name="palette.blue.v_900" />
<DocsColorBlock name="palette.green.v_1000" />
<DocsColorBlock name="palette.green.v_1100" />
<p>
Due to the inconsistent way that humans perceive color and light, computing these scales is <DocsExternalLink text="both art and science" href="https://uxplanet.org/designing-systematic-colors-b5d2605b15c" />. It should not be done by simply sliding a "brightness" setting. We used <DocsExternalLink text="materialpalettes.com" href="https://materialpalettes.com/" /> to generate the scales for our primary and secondary brand colors. The same should be done for new themes.
</p>
Expand All @@ -203,9 +205,6 @@
<p>
Brand colors are chosen to reflect the mood, identity, or trademark of an application or an organization. The design system defines primary (dominant) and secondary (accent) branded color hues.
</p>
<p>
The Kolibri Design System has what we call "Kolibri Purple" as its primary and "Kolibri Teal" as its secondary, available across the full brightness scale:
</p>

<div>
<div class="palette-block">
Expand Down
8 changes: 4 additions & 4 deletions docs/pages/kswitch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,19 @@
<ul>
<li>
Thumb ON color:
<DocsInternalLink code text="palette.green.v_500" href="/colors#palette-green-v_500" />
<DocsInternalLink code text="brand.primary.v_1000" href="/colors#brand-primary-v_1000" />
</li>
<li>
Track ON color:
<DocsInternalLink code text="palette.green.v_200" href="/colors#palette-green-v_200" />
<DocsInternalLink code text="brand.primary.v_400" href="/colors#brand-primary-v_400" />
</li>
<li>
Thumb OFF color:
<DocsInternalLink code text="palette.grey.v_400" href="/colors#palette-grey-v_400" />
<DocsInternalLink code text="palette.grey.v_50" href="/colors#palette-grey-v_50" />
</li>
<li>
Track OFF color:
<DocsInternalLink code text="palette.grey.v_50" href="/colors#palette-grey-v_50" />
<DocsInternalLink code text="palette.grey.v_200" href="/colors#palette-grey-v_200" />
</li>
</ul>
</DocsPageSection>
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/menus/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@
</li>
<li>
Iconography color:
<DocsInternalLink code text="palette.grey.v_900" href="/colors#palette-grey-v_900" />
<DocsInternalLink code text="palette.grey.v_800" href="/colors#palette-grey-v_800" />
</li>
</ul>
<h3>Dropdown menu</h3>
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/textfields/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,15 +188,15 @@
</li>
<li>
Bottom stroke color:
<DocsInternalLink code text="palette.grey.v_500" href="/colors#palette-grey-v_500" />
<DocsInternalLink code text="palette.grey.v_600" href="/colors#palette-grey-v_600" />
</li>
<li>
Bottom stroke focused color:
<DocsInternalLink code text="tokens.primary" href="/colors#tokens.primary" />
</li>
<li>
Label text color:
<DocsInternalLink code text="palette.grey.v_300" href="/colors#palette-grey-v_300" />
<DocsInternalLink code text="palette.grey.v_200" href="/colors#palette-grey-v_200" />
</li>
<li>
Focused text color:
Expand Down
5 changes: 0 additions & 5 deletions docs/tableOfContents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,11 +316,6 @@ export default [
isCode: true,
keywords: ['button'],
}),
new Page({
path: '/kcontentrenderer',
title: 'KContentRenderer',
isCode: true,
}),
new Page({
path: '/kgrid',
title: 'KGrid',
Expand Down
4 changes: 2 additions & 2 deletions lib/KDateRange/KDateCalendar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
:style="[
(selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'first') ||
(selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'second') ?
{ backgroundColor: $themeBrand.secondary.v_50 } : {}
{ backgroundColor: $themeBrand.primary.v_200 } : {}
]"
:class="[{
'calendar-days--disabled': isDateDisabled(weekIndex, dayInWeekIndex, activeMonthDay, activeMonthDate) || isDateDisabledLeft(weekIndex, dayInWeekIndex, activeMonthDay),
Expand Down Expand Up @@ -64,7 +64,7 @@
:style="[
(selectionOrder(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate) === 'first') ||
(selectionOrder(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate) === 'second') ?
{ backgroundColor: $themeBrand.secondary.v_50 } : {}
{ backgroundColor: $themeBrand.primary.v_200 } : {}
]"
:class="[{
'calendar-days--disabled': isDateDisabled(weekIndex, dayInWeekIndex, nextActiveMonthDay, nextActiveMonthDate) || isDateDisabledRight(weekIndex, dayInWeekIndex, nextActiveMonthDay),
Expand Down
4 changes: 2 additions & 2 deletions lib/KDateRange/KDateDay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
inRangeStyle() {
return this.isInRange
? {
backgroundColor: this.$themeBrand.secondary.v_50,
backgroundColor: this.$themeBrand.primary.v_200,
':hover': {
backgroundColor: this.$themePalette.grey.v_200,
},
Expand All @@ -79,7 +79,7 @@
selectedStyle() {
return this.isSelected
? {
backgroundColor: this.$themeBrand.secondary.v_600,
backgroundColor: this.$themeBrand.primary.v_1000,
color: this.$themePalette.white + '!important',
}
: {};
Expand Down
8 changes: 4 additions & 4 deletions lib/KSwitch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@

$k-switch-height: 32px !default;
$k-switch-thumb-size: 20px !default;
$k-switch-thumb-color: #fafafa !default;
$k-switch-thumb-color: #f5f5f5 !default;
$k-switch-track-width: 34px !default;
$k-switch-track-height: 14px !default;

Expand Down Expand Up @@ -248,7 +248,7 @@
top: (($k-switch-thumb-size - $k-switch-track-height) / 2);
width: $k-switch-track-width;
height: $k-switch-track-height;
background-color: rgba(0, 0, 0, 0.26);
background-color: #cccccc;
border-radius: 8px;
transition: background-color 0.1s linear;
}
Expand Down Expand Up @@ -288,10 +288,10 @@
.k-switch--color-primary {
&.is-checked:not(.is-disabled) {
.k-switch-track {
background-color: #a5d6a7;
background-color: #b4c3fb;
}
.k-switch-thumb {
background-color: #4caf50;
background-color: #4368f5;
}
}
}
Expand Down
12 changes: 6 additions & 6 deletions lib/buttons-and-links/KButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,12 +122,12 @@
return this.hovering ? this.$themeTokens.primaryDark : this.$themeTokens.primary;
}

if (this.primary) {
if (this.secondary) {
return this.appearance === 'raised-button'
? this.$themeTokens.textInverted
: this.$themeTokens.primary;
? this.$themeBrand.textInverted
: this.$themeBrand.secondary;
} else {
return this.$themeTokens.text;
return this.$themeBrand.text;
}
},
htmlTag() {
Expand All @@ -139,9 +139,9 @@
return 'button';
},
arrowStyles() {
if (this.primary) {
if (this.secondary) {
return {
fill: this.$themeTokens.textInverted,
fill: this.$themeBrand.textInverted,
};
}
return {};
Expand Down
2 changes: 1 addition & 1 deletion lib/buttons-and-links/KRouterLink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
v-if="iconAfter"
:icon="iconAfter"
style="top: 4px;"
:color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
:color="hovering ? $themeTokens.secondaryDark : $themeTokens.secondary"
data-test="icon-after"
/>
</slot>
Expand Down
12 changes: 6 additions & 6 deletions lib/buttons-and-links/buttonMixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export default {
linkStyle() {
return {
color: this.$themeTokens.link,
':hover': { color: this.$themeTokens.linkDark },
':hover': { color: this.$themeTokens.primaryDark },
':focus': this.$coreOutline,
...(this.disabled ? disabledStyle : {}),
};
Expand Down Expand Up @@ -92,21 +92,21 @@ export default {
return {
color: this.$themeTokens.primary,
':hover': {
backgroundColor: this.$themePalette.grey.v_300,
backgroundColor: this.$themePalette.grey.v_100,
},
':focus': { ...this.$coreOutline, outlineOffset: 0 },
':disabled': disabledStyle,
svg: {
fill: this.$themeTokens.primary,
fill: this.$themeTokens.secondary,
},
};
},
secondaryRaisedStyle() {
return {
color: this.$themeTokens.text,
backgroundColor: this.$themePalette.grey.v_200,
backgroundColor: this.$themePalette.grey.v_50,
':hover': {
backgroundColor: this.$themePalette.grey.v_300,
backgroundColor: this.$themePalette.grey.v_100,
},
':focus': { ...this.$coreOutline, outlineOffset: '6px' },
':disabled': disabledStyle,
Expand All @@ -119,7 +119,7 @@ export default {
return {
color: this.$themeTokens.text,
':hover': {
backgroundColor: this.$themePalette.grey.v_300,
backgroundColor: this.$themePalette.grey.v_200,
},
':focus': { ...this.$coreOutline, outlineOffset: 0 },
':disabled': disabledStyle,
Expand Down
Loading