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

Update KDS Theme Tokens #782

Merged
merged 2 commits into from
Oct 1, 2024
Merged

Update KDS Theme Tokens #782

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4ff7c60
Update theme tokens
AlexVelezLl Sep 17, 2024
e88cbd0
Address comments
AlexVelezLl Sep 26, 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
2 changes: 1 addition & 1 deletion docs/common/DocsShow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
return {
display: this.block ? 'block' : 'inline-block',
padding: this.padding ? '8px 24px' : null,
backgroundColor: this.dark ? this.$themePalette.grey.v_500 : undefined,
backgroundColor: this.dark ? this.$themePalette.grey.v_700 : undefined,
};
},
},
Expand Down
14 changes: 6 additions & 8 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_1100" />
<DocsColorBlock name="brand.secondary.v_800" />
<DocsColorBlock name="brand.primary.v_600" />
<DocsColorBlock name="brand.secondary.v_400" />
<DocsColorBlock name="palette.grey.v_400" />

<p>
Expand Down Expand Up @@ -203,16 +203,14 @@

<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 brightness levels, named <code>v_200</code>, <code>v_400</code>, <code>v_600</code>, … <code>v_1000</code>, <code>v_1100</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_100</code>, <code>v_200</code>, <code>v_300</code>, <code>v_400</code>, <code>v_500</code>, <code>v_600</code>:
</p>
<DocsColorBlock name="palette.green.v_100" />
<DocsColorBlock name="palette.green.v_200" />
<DocsColorBlock name="palette.green.v_300" />
<DocsColorBlock name="palette.green.v_400" />
<DocsColorBlock name="palette.green.v_500" />
Copy link
Member

Choose a reason for hiding this comment

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

let's replace the

<p style="margin-left: 60px">
    …
</p>

with
<DocsColorBlock name="palette.green.v_400" />

(not strictly in scope of the palette changes, but I think there isn't really a need to skip the 400 value. I think the "break" was more about the larger gap in between)

Copy link
Member Author

Choose a reason for hiding this comment

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

Done! I also updated the paragraph above "and segment colors into brightness levels, named <code>v_100</code>, <code>v_200</code>, <code>v_300</code>, <code>v_400</code>, <code>v_500</code>, <code>v_600</code>:"

<DocsColorBlock name="palette.green.v_600" />
<p style="margin-left: 60px">
…
</p>
<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 Down
2 changes: 1 addition & 1 deletion docs/pages/errors/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@
For operations that imply risky permanent data loss, use modals for the user to confirm they really intend to remove that data. Be sure to clearly explain the consequences.
</p>
<p>
For conditions which partially block or interrupt the user experience, use a warning icon with <code>palette.orange.v_400</code> and informative language of the consequences under the current condition.
For conditions which partially block or interrupt the user experience, use a warning icon with <code>palette.orange.v_200</code> and informative language of the consequences under the current condition.
</p>
<img src="./warning.png">
<h3>
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/klinearloader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
<DocsPageSection title="Specifications" anchor="#specifications">

<ul>
<li>Progress track uses palette.grey.v_100</li>
<li>Progress track uses palette.grey.v_200</li>
<li>Progress indicator uses palette.grey.v_800</li>
<li>Progress track height is 4px</li>
<li>Include a 2px corner radius</li>
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="brand.primary.v_1000" href="/colors#brand-primary-v_1000" />
<DocsInternalLink code text="brand.primary.v_500" href="/colors#brand-primary-v_500" />
</li>
<li>
Track ON color:
<DocsInternalLink code text="brand.primary.v_400" href="/colors#brand-primary-v_400" />
<DocsInternalLink code text="brand.primary.v_200" href="/colors#brand-primary-v_200" />
</li>
<li>
Thumb OFF color:
<DocsInternalLink code text="palette.grey.v_50" href="/colors#palette-grey-v_50" />
<DocsInternalLink code text="palette.grey.v_100" href="/colors#palette-grey-v_100" />
</li>
<li>
Track OFF color:
<DocsInternalLink code text="palette.grey.v_200" href="/colors#palette-grey-v_200" />
<DocsInternalLink code text="palette.grey.v_300" href="/colors#palette-grey-v_300" />
</li>
</ul>
</DocsPageSection>
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/menus/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,11 +91,11 @@
</li>
<li>
Option text color:
<DocsInternalLink code text="tokens.text" href="/colors#palette-grey-v_100" />
<DocsInternalLink code text="tokens.text" href="/colors#palette-grey-v_200" />
</li>
<li>
Option text hover color:
<DocsInternalLink code text="palette.grey.v_100" href="/colors#palette-grey-v_100" />
<DocsInternalLink code text="palette.grey.v_200" href="/colors#palette-grey-v_200" />
</li>
<li>
Iconography color:
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/textfields/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,19 +184,19 @@
<li>Corner radius: 2px</li>
<li>
Fill color:
<DocsInternalLink code text="palette.grey.v_50" href="/colors#palette-grey-v_50" />
<DocsInternalLink code text="palette.grey.v_100" href="/colors#palette-grey-v_100" />
</li>
<li>
Bottom stroke color:
<DocsInternalLink code text="palette.grey.v_600" href="/colors#palette-grey-v_600" />
<DocsInternalLink code text="palette.grey.v_700" href="/colors#palette-grey-v_700" />
</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_600" href="/colors#palette-grey-v_600" />
<DocsInternalLink code text="palette.grey.v_700" href="/colors#palette-grey-v_700" />
</li>
<li>
Focused text color:
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.primary.v_200 } : {}
{ backgroundColor: $themeBrand.primary.v_100 } : {}
]"
: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.primary.v_200 } : {}
{ backgroundColor: $themeBrand.primary.v_100 } : {}
]"
:class="[{
'calendar-days--disabled': isDateDisabled(weekIndex, dayInWeekIndex, nextActiveMonthDay, nextActiveMonthDate) || isDateDisabledRight(weekIndex, dayInWeekIndex, nextActiveMonthDay),
Expand Down
6 changes: 3 additions & 3 deletions lib/KDateRange/KDateDay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,17 +69,17 @@
inRangeStyle() {
return this.isInRange
? {
backgroundColor: this.$themeBrand.primary.v_200,
backgroundColor: this.$themeBrand.primary.v_100,
':hover': {
backgroundColor: this.$themePalette.grey.v_200,
backgroundColor: this.$themePalette.grey.v_300,
},
}
: {};
},
selectedStyle() {
return this.isSelected
? {
backgroundColor: this.$themeBrand.primary.v_1000,
backgroundColor: this.$themeBrand.primary.v_500,
color: this.$themePalette.white + '!important',
}
: {};
Expand Down
4 changes: 2 additions & 2 deletions lib/KImg/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@
* (3) a progressive loading experience as the colored background
* is displayed while an image is loading.
*
* Its default value is `$themePalette.grey.v_200`.
* Its default value is `$themePalette.grey.v_100`.
*/
backgroundColor: {
type: String,
Expand Down Expand Up @@ -218,7 +218,7 @@
baseStyles() {
const backgroundColor = this.backgroundColor
? this.backgroundColor
: this.$themePalette.grey.v_200;
: this.$themePalette.grey.v_100;
const borderRadius = this.borderRadius ? this.borderRadius : 0;

return {
Expand Down
12 changes: 6 additions & 6 deletions lib/KLogo/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,8 +136,8 @@

const colorScheme = {
default: {
blobColor: defaultBrandColors.secondary.v_1000,
strokeColor: defaultBrandColors.primary.v_1000,
blobColor: defaultBrandColors.secondary.v_500,
strokeColor: defaultBrandColors.primary.v_500,
},
monoBlack: {
blobColor: materialColors.black,
Expand All @@ -146,17 +146,17 @@
blobColor: materialColors.white,
},
monoPrimary: {
blobColor: defaultBrandColors.primary.v_1000,
blobColor: defaultBrandColors.primary.v_500,
},
monoSecondary: {
blobColor: defaultBrandColors.secondary.v_1000,
blobColor: defaultBrandColors.secondary.v_500,
},
whiteGrey: {
blobColor: materialColors.grey.v_200,
blobColor: materialColors.grey.v_300,
strokeColor: materialColors.white,
},
blackGrey: {
blobColor: materialColors.grey.v_200,
blobColor: materialColors.grey.v_300,
strokeColor: materialColors.black,
},
};
Expand Down
8 changes: 4 additions & 4 deletions lib/buttons-and-links/buttonMixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export default {
return {
color: this.$themeTokens.primary,
':hover': {
backgroundColor: this.$themePalette.grey.v_100,
backgroundColor: this.$themePalette.grey.v_200,
},
':focus': { ...this.$coreOutline, outlineOffset: 0 },
':disabled': disabledStyle,
Expand All @@ -104,9 +104,9 @@ export default {
secondaryRaisedStyle() {
return {
color: this.$themeTokens.text,
backgroundColor: this.$themePalette.grey.v_50,
backgroundColor: this.$themePalette.grey.v_100,
':hover': {
backgroundColor: this.$themePalette.grey.v_100,
backgroundColor: this.$themePalette.grey.v_200,
},
':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_200,
backgroundColor: this.$themePalette.grey.v_300,
},
':focus': { ...this.$coreOutline, outlineOffset: 0 },
':disabled': disabledStyle,
Expand Down
2 changes: 1 addition & 1 deletion lib/loaders/KLinearLoader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div
class="ui-progress-linear"
:class="classes"
:style="{ backgroundColor: $themePalette.grey.v_100 }"
:style="{ backgroundColor: $themePalette.grey.v_200 }"
>
<div
v-if="type === 'determinate'"
Expand Down
78 changes: 39 additions & 39 deletions lib/styles/colorsDefault.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,66 @@
export const defaultTokenMapping = {
// Branded UI colors
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',
primary: 'brand.primary.v_500',
primaryDark: 'brand.primary.v_600',
secondary: 'brand.secondary.v_500',
secondaryDark: 'brand.secondary.v_600',
appBar: 'brand.secondary.v_400',
appBarDark: 'palette.black',
link: 'brand.primary.v_1000',
link: 'brand.primary.v_500',
loading: 'palette.grey.v_800',
focusOutline: 'palette.lightblue.v_800',
focusOutline: 'palette.lightblue.v_400',

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

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

// Kolibri-specific semantic colors
progress: 'palette.lightblue.v_1000',
mastered: 'palette.yellow.v_1000',
warning: 'palette.yellow.v_1000',
incomplete: 'palette.yellow.v_1000',
coachContent: 'palette.lightblue.v_1100',
superAdmin: 'palette.yellow.v_1000',
progress: 'palette.lightblue.v_500',
mastered: 'palette.yellow.v_500',
warning: 'palette.yellow.v_500',
incomplete: 'palette.yellow.v_500',
coachContent: 'palette.lightblue.v_600',
superAdmin: 'palette.yellow.v_500',

// content colors
practice: 'palette.blue.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: 'palette.yellow.v_1000',
practice: 'palette.blue.v_400',
watch: 'palette.lightblue.v_400',
listen: 'palette.pink.v_500',
read: 'palette.red.v_500',
explore: 'palette.orange.v_500',
create: 'palette.green.v_500',
reflect: 'palette.yellow.v_500',
topic: 'palette.grey.v_800',
};

// set core brand colors
export const defaultBrandColors = {
// blues
primary: {
v_200: '#D9E1FD',
v_400: '#B4C3FB',
v_600: '#8EA4F9',
v_800: '#6986F7',
v_1000: '#4368F5',
v_1100: '#2547F3',
v_100: '#D9E1FD',
v_200: '#B4C3FB',
v_300: '#8EA4F9',
v_400: '#6986F7',
v_500: '#4368F5',
v_600: '#2547F3',
},
// yellows
secondary: {
v_200: '#FFF5CC',
v_400: '#FFEA99',
v_600: '#FFE066',
v_800: '#FFD533',
v_1000: '#FFCB00',
v_1100: '#E5B700',
v_100: '#FFF5CC',
v_200: '#FFEA99',
v_300: '#FFE066',
v_400: '#FFD533',
v_500: '#FFCB00',
v_600: '#E5B700',
},
};
Loading