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

Finalize theme token updates #551

Merged
merged 11 commits into from
Mar 4, 2024
Merged

Finalize theme token updates #551

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
11 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
15d5175
Remove changelog update until after complete review
LianaHarris360 Feb 19, 2024
7d773a7
Remove testing change from buttons documentation page
LianaHarris360 Feb 19, 2024
9450389
Update colors doc page, add yellow and blue to color palette
LianaHarris360 Feb 21, 2024
f4f646d
Update textbox fill and label color
LianaHarris360 Feb 26, 2024
ad4984d
Add updates to changelog
LianaHarris360 Feb 26, 2024
7cc8a28
Modify UI input colors to align with theme updates
LianaHarris360 Feb 28, 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
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
94 changes: 45 additions & 49 deletions lib/styles/colorsDefault.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,66 @@
export const defaultTokenMapping = {
// Branded UI colors
primary: 'brand.primary.v_400',
primaryDark: 'brand.primary.v_700',
appBar: 'brand.primary.v_400',
appBarDark: 'brand.primary.v_700',
appBarFullscreen: 'palette.grey.v_900',
appBarFullscreenDark: 'black',
link: 'brand.primary.v_400',
linkDark: 'brand.primary.v_700',
loading: 'brand.secondary.v_200',
focusOutline: 'brand.secondary.v_200',
primary: 'brand.primary.v_1000',
primaryDark: 'brand.primary.v_1100',
secondary: 'brand.secondary.v_1000',
secondaryDark: 'brand.secondary.v_1100',
appBar: 'brand.secondary.v_800',
Copy link
Member

Choose a reason for hiding this comment

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

Could we please document all tokens on Colors page such as appBar and possibly others that are missing? I can't find it at https://deploy-preview-551--kolibri-design-system.netlify.app/colors/# It seems some of them were forgotten before, it'd be helpful to include them now as we're upgrading though.

appBarDark: 'palette.black',
link: 'brand.primary.v_1000',
loading: 'palette.grey.v_800',
focusOutline: 'palette.lightblue.v_800',

// Generic UI colors
text: 'palette.grey.v_900',
textDisabled: 'palette.grey.v_300',
annotation: 'palette.grey.v_700',
text: 'palette.black',
textDisabled: 'palette.grey.v_200',
annotation: 'palette.grey.v_600',
textInverted: 'palette.white',
surface: 'palette.white',
fineLine: '#dedede',
fineLine: 'palette.grey.v_100',

// general semantic colors
error: 'palette.red.v_800',
success: 'palette.green.v_700',
error: 'palette.red.v_1100',
incorrect: 'palette.red.v_1100',
success: 'palette.green.v_1100',
correct: 'palette.green.v_1100',

// Kolibri-specific semantic colors
progress: 'palette.lightblue.v_500',
mastered: 'palette.amber.v_500',
correct: 'palette.green.v_600',
incorrect: 'palette.red.v_800',
coachContent: 'palette.lightblue.v_800',
superAdmin: 'palette.amber.v_600',
progress: 'palette.lightblue.v_1000',
mastered: 'brand.secondary.v_1000',
warning: 'brand.secondary.v_1000',
incomplete: 'brand.secondary.v_1000',
coachContent: 'palette.lightblue.v_1100',
superAdmin: 'brand.secondary.v_1000',

// content colors
exercise: 'palette.cyan.v_600',
video: 'palette.indigo.v_700',
audio: 'palette.pink.v_400',
document: 'palette.deeporange.v_600',
html5: 'palette.yellow.v_800',
practice: 'brand.primary.v_800',
watch: 'palette.lightblue.v_800',
listen: 'palette.pink.v_1000',
read: 'palette.red.v_1000',
explore: 'palette.orange.v_1000',
create: 'palette.green.v_1000',
reflect: 'brand.secondary.v_1000',
topic: 'palette.grey.v_800',
slideshow: 'palette.green.v_400',
};

// set some arbitrary colors
// set core brand colors
export const defaultBrandColors = {
// blues
primary: {
v_50: '#f0e7ed',
v_100: '#dbc3d4',
v_200: '#c59db9',
v_300: '#ac799d',
v_400: '#996189',
v_500: '#874e77',
v_600: '#7c4870',
v_700: '#6e4167',
v_800: '#5f3b5c',
v_900: '#4b2e4d',
v_200: '#D9E1FD',
v_400: '#B4C3FB',
v_600: '#8EA4F9',
v_800: '#6986F7',
v_1000: '#4368F5',
v_1100: '#2547F3',
},
// yellows
secondary: {
v_50: '#e3f0ed',
v_100: '#badbd2',
v_200: '#8dc5b6',
v_300: '#62af9a',
v_400: '#479e86',
v_500: '#368d74',
v_600: '#328168',
v_700: '#2c715a',
v_800: '#26614d',
v_900: '#1b4634',
v_200: '#FFF5CC',
v_400: '#FFEA99',
v_600: '#FFE066',
v_800: '#FFD533',
v_1000: '#FFCB00',
v_1100: '#E5B700',
},
};
Loading
Loading