Skip to content

Commit ddd9920

Browse files
netchampfarisnetchampfaris
authored
Merge pull request #226 from frappe/semantic-colors
feat: figma to color palette generator script
2 parents 5941575 + 7ccaa57 commit ddd9920

21 files changed

+966
-81
lines changed

‎src/components/Avatar.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
/>
1313
<div
1414
v-else
15-
class="flex h-full w-full items-center justify-center bg-gray-100 uppercase text-gray-600"
15+
class="flex h-full w-full items-center justify-center bg-surface-gray-2 uppercase text-ink-gray-5"
1616
:class="[labelClasses, shapeClasses]"
1717
>
1818
<div :class="iconClasses" v-if="$slots.default">
@@ -25,7 +25,7 @@
2525
<div
2626
v-if="$slots.indicator"
2727
:class="[
28-
'absolute bottom-0 right-0 grid place-items-center rounded-full bg-white',
28+
'absolute bottom-0 right-0 grid place-items-center rounded-full bg-surface-white',
2929
indicatorContainerClasses,
3030
]"
3131
>

‎src/components/Breadcrumbs.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<Button variant="ghost">
66
<template #icon>
77
<svg
8-
class="w-4 text-gray-600"
8+
class="w-4 text-ink-gray-5"
99
xmlns="http://www.w3.org/2000/svg"
1010
width="24"
1111
height="24"
@@ -23,7 +23,7 @@
2323
</template>
2424
</Button>
2525
</Dropdown>
26-
<span class="ml-1 mr-0.5 text-base text-gray-500" aria-hidden="true">
26+
<span class="ml-1 mr-0.5 text-base text-ink-gray-4" aria-hidden="true">
2727
/
2828
</span>
2929
</template>
@@ -36,8 +36,8 @@
3636
class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400"
3737
:class="[
3838
i == crumbs.length - 1
39-
? 'text-gray-900'
40-
: 'text-gray-600 hover:text-gray-700',
39+
? 'text-ink-gray-9'
40+
: 'text-ink-gray-5 hover:text-ink-gray-7',
4141
]"
4242
v-bind="item.route ? { to: item.route } : { onClick: item.onClick }"
4343
>
@@ -49,7 +49,7 @@
4949
</component>
5050
<span
5151
v-if="i != crumbs.length - 1"
52-
class="mx-0.5 text-base text-gray-500"
52+
class="mx-0.5 text-base text-ink-gray-4"
5353
aria-hidden="true"
5454
>
5555
/

‎src/components/Button/Button.vue

Lines changed: 40 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -89,33 +89,35 @@ const router = useRouter()
8989
9090
const buttonClasses = computed(() => {
9191
let solidClasses = {
92-
gray: 'text-white bg-gray-900 hover:bg-gray-800 active:bg-gray-700',
93-
blue: 'text-white bg-blue-500 hover:bg-blue-600 active:bg-blue-700',
94-
green: 'text-white bg-green-600 hover:bg-green-700 active:bg-green-800',
95-
red: 'text-white bg-red-600 hover:bg-red-700 active:bg-red-800',
92+
gray: 'text-ink-white bg-surface-gray-7 hover:bg-surface-gray-6 active:bg-surface-gray-5',
93+
blue: 'text-ink-white bg-blue-500 hover:bg-surface-blue-3 active:bg-blue-700',
94+
green:
95+
'text-ink-white bg-surface-green-3 hover:bg-green-700 active:bg-green-800',
96+
red: 'text-ink-white bg-surface-red-5 hover:bg-surface-red-6 active:bg-surface-red-7',
9697
}[props.theme]
9798
9899
let subtleClasses = {
99-
gray: 'text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300',
100-
blue: 'text-blue-600 bg-blue-100 hover:bg-blue-200 active:bg-blue-300',
101-
green: 'text-green-800 bg-green-100 hover:bg-green-200 active:bg-green-300',
102-
red: 'text-red-700 bg-red-100 hover:bg-red-200 active:bg-red-300',
100+
gray: 'text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4',
101+
blue: 'text-ink-blue-3 bg-surface-blue-2 hover:bg-blue-200 active:bg-blue-300',
102+
green:
103+
'text-green-800 bg-surface-green-2 hover:bg-green-200 active:bg-green-300',
104+
red: 'text-red-700 bg-surface-red-2 hover:bg-surface-red-3 active:bg-surface-red-4',
103105
}[props.theme]
104106
105107
let outlineClasses = {
106-
gray: 'text-gray-800 bg-white border border-gray-300 hover:border-gray-400 active:border-gray-400 active:bg-gray-300',
107-
blue: 'text-blue-600 bg-white border border-blue-300 hover:border-blue-400 active:border-blue-400 active:bg-blue-300',
108+
gray: 'text-ink-gray-8 bg-surface-white bg-surface-white border border-outline-gray-2 hover:border-outline-gray-3 active:border-outline-gray-3 active:bg-surface-gray-4',
109+
blue: 'text-ink-blue-3 bg-surface-white border border-outline-blue-1 hover:border-blue-400 active:border-blue-400 active:bg-blue-300',
108110
green:
109-
'text-green-800 bg-white border border-green-400 hover:border-green-500 active:border-green-500 active:bg-green-300',
110-
red: 'text-red-700 bg-white border border-red-300 hover:border-red-400 active:border-red-400 active:bg-red-200',
111+
'text-green-800 bg-surface-white border border-outline-green-2 hover:border-green-500 active:border-green-500 active:bg-green-300',
112+
red: 'text-red-700 bg-surface-white border border-outline-red-1 hover:border-outline-red-2 active:border-outline-red-2 active:bg-surface-red-3',
111113
}[props.theme]
112114
113115
let ghostClasses = {
114-
gray: 'text-gray-800 bg-transparent hover:bg-gray-200 active:bg-gray-300',
115-
blue: 'text-blue-600 bg-transparent hover:bg-blue-200 active:bg-blue-300',
116+
gray: 'text-ink-gray-8 bg-transparent hover:bg-surface-gray-3 active:bg-surface-gray-4',
117+
blue: 'text-ink-blue-3 bg-transparent hover:bg-blue-200 active:bg-blue-300',
116118
green:
117119
'text-green-800 bg-transparent hover:bg-green-200 active:bg-green-300',
118-
red: 'text-red-700 bg-transparent hover:bg-red-200 active:bg-red-300',
120+
red: 'text-red-700 bg-transparent hover:bg-surface-red-3 active:bg-surface-red-4',
119121
}[props.theme]
120122
121123
let focusClasses = {
@@ -136,25 +138,29 @@ const buttonClasses = computed(() => {
136138
let themeVariant: ThemeVariant = `${props.theme}-${props.variant}`
137139
138140
let disabledClassesMap: Record<ThemeVariant, string> = {
139-
'gray-solid': 'bg-gray-100 text-gray-500',
140-
'gray-subtle': 'bg-gray-100 text-gray-500',
141-
'gray-outline': 'bg-gray-100 text-gray-500 border border-gray-300',
142-
'gray-ghost': 'text-gray-500',
143-
144-
'blue-solid': 'bg-blue-300 text-white',
145-
'blue-subtle': 'bg-blue-100 text-blue-400',
146-
'blue-outline': 'bg-blue-100 text-blue-400 border border-blue-300',
147-
'blue-ghost': 'text-blue-400',
148-
149-
'green-solid': 'bg-green-100 text-green-500',
150-
'green-subtle': 'bg-green-100 text-green-500',
151-
'green-outline': 'bg-green-100 text-green-500 border border-green-400',
152-
'green-ghost': 'text-green-500',
153-
154-
'red-solid': 'bg-red-100 text-red-400',
155-
'red-subtle': 'bg-red-100 text-red-400',
156-
'red-outline': 'bg-red-100 text-red-400 border border-red-300',
157-
'red-ghost': 'text-red-400',
141+
'gray-solid': 'bg-surface-gray-2 text-ink-gray-4',
142+
'gray-subtle': 'bg-surface-gray-2 text-ink-gray-4',
143+
'gray-outline':
144+
'bg-surface-gray-2 text-ink-gray-4 border border-outline-gray-2',
145+
'gray-ghost': 'text-ink-gray-4',
146+
147+
'blue-solid': 'bg-blue-300 text-ink-white',
148+
'blue-subtle': 'bg-surface-blue-2 text-ink-blue-link',
149+
'blue-outline':
150+
'bg-surface-blue-2 text-ink-blue-link border border-outline-blue-1',
151+
'blue-ghost': 'text-ink-blue-link',
152+
153+
'green-solid': 'bg-surface-green-2 text-ink-green-2',
154+
'green-subtle': 'bg-surface-green-2 text-ink-green-2',
155+
'green-outline':
156+
'bg-surface-green-2 text-ink-green-2 border border-outline-green-2',
157+
'green-ghost': 'text-ink-green-2',
158+
159+
'red-solid': 'bg-surface-red-2 text-ink-red-2',
160+
'red-subtle': 'bg-surface-red-2 text-ink-red-2',
161+
'red-outline':
162+
'bg-surface-red-2 text-ink-red-2 border border-outline-red-1',
163+
'red-ghost': 'text-ink-red-2',
158164
}
159165
let disabledClasses = disabledClassesMap[themeVariant]
160166

‎src/components/Dropdown.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
<template #body>
1818
<MenuItems
19-
class="mt-2 min-w-40 divide-y divide-gray-100 rounded-lg bg-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
19+
class="mt-2 min-w-40 divide-y divide-outline-gray-1 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
2020
:class="{
2121
'left-0 origin-top-left': placement == 'left',
2222
'right-0 origin-top-right': placement == 'right',
@@ -43,7 +43,7 @@
4343
<button
4444
v-else
4545
:class="[
46-
active ? 'bg-gray-100' : 'text-ink-gray-6',
46+
active ? 'bg-surface-gray-2' : 'text-ink-gray-6',
4747
'group flex h-7 w-full items-center rounded px-2 text-base',
4848
]"
4949
@click="item.onClick"
@@ -59,7 +59,7 @@
5959
v-else-if="item.icon"
6060
:is="item.icon"
6161
/>
62-
<span class="whitespace-nowrap">
62+
<span class="whitespace-nowrap text-ink-gray-7">
6363
{{ item.label }}
6464
</span>
6565
</button>

‎src/components/ErrorMessage.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div
33
v-if="message"
4-
class="whitespace-pre-line text-sm text-red-600"
4+
class="whitespace-pre-line text-sm text-ink-red-4"
55
role="alert"
66
v-html="errorMessage"
77
></div>

‎src/components/ListView/ListEmptyState.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
>
55
<slot>
66
<div class="text-xl font-medium">{{ list.options.emptyState.title }}</div>
7-
<div class="mt-1 text-base text-gray-600">
7+
<div class="mt-1 text-base text-ink-gray-5">
88
{{ list.options.emptyState.description }}
99
</div>
1010
<Button

‎src/components/ListView/ListFooter.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
@click="emit('loadMore')"
1616
/>
1717
<div v-if="showLoadMore" class="mx-3 h-[80%] border-l" />
18-
<div class="flex items-center gap-1 text-base text-gray-600">
18+
<div class="flex items-center gap-1 text-base text-ink-gray-5">
1919
<div>{{ options.rowCount || '0' }}</div>
2020
<div>of</div>
2121
<div>{{ options.totalCount || '0' }}</div>

‎src/components/ListView/ListGroupHeader.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<div class="flex items-center">
33
<button
44
@click="toggleGroup"
5-
class="ml-[3px] mr-[11px] rounded p-1 hover:bg-gray-100"
5+
class="ml-[3px] mr-[11px] rounded p-1 hover:bg-surface-gray-2"
66
>
77
<DownSolid
8-
class="h-4 w-4 text-gray-900 transition-transform duration-200"
8+
class="h-4 w-4 text-ink-gray-9 transition-transform duration-200"
99
:class="[group.collapsed ? '-rotate-90' : '']"
1010
/>
1111
</button>
@@ -22,7 +22,7 @@
2222
</div>
2323
</slot>
2424
</div>
25-
<div class="mx-2 h-px border-t border-gray-200"></div>
25+
<div class="mx-2 h-px border-t border-outline-gray-modals"></div>
2626
</template>
2727
<script setup>
2828
import { inject } from 'vue'

‎src/components/ListView/ListHeader.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div
3-
class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
3+
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
44
:style="{
55
gridTemplateColumns: getGridTemplateColumns(
66
list.columns,

‎src/components/ListView/ListHeaderItem.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
:class="item.align ? alignmentMap[item.align] : 'justify-between'"
66
>
77
<div
8-
class="flex items-center space-x-2 truncate text-sm text-gray-600"
8+
class="flex items-center space-x-2 truncate text-sm text-ink-gray-5"
99
:class="$attrs.class"
1010
>
1111
<slot name="prefix" v-bind="{ item }" />

‎src/components/ListView/ListRow.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@
1717
<div
1818
class="grid items-center space-x-4 rounded px-2"
1919
:class="[
20-
isSelected ? 'bg-gray-100' : '',
20+
isSelected ? 'bg-surface-gray-2' : '',
2121
isHoverable
2222
? isSelected
23-
? 'hover:bg-gray-200'
24-
: 'hover:bg-gray-50'
23+
? 'hover:bg-surface-gray-3'
24+
: 'hover:bg-surface-menu-bar'
2525
: '',
2626
]"
2727
:style="{
@@ -43,7 +43,7 @@
4343
:key="column.key"
4444
:class="[
4545
alignmentMap[column.align],
46-
i == 0 ? 'text-gray-900' : 'text-gray-700',
46+
i == 0 ? 'text-ink-gray-9' : 'text-ink-gray-7',
4747
]"
4848
>
4949
<slot v-bind="{ idx: i, column, item: row[column.key] }">
@@ -67,7 +67,7 @@
6767
</slot>
6868
</div>
6969
</div>
70-
<div v-if="!isLastRow" class="mx-2 h-px border-t border-gray-200" />
70+
<div v-if="!isLastRow" class="mx-2 h-px border-t border-outline-gray-modals" />
7171
</component>
7272
</component>
7373
</template>

‎src/components/ListView/ListSelectBanner.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
class="absolute inset-x-0 bottom-6 mx-auto w-max text-base"
1313
>
1414
<div
15-
class="flex min-w-[596px] items-center space-x-3 rounded-lg bg-white px-4 py-2 shadow-2xl"
15+
class="flex min-w-[596px] items-center space-x-3 rounded-lg bg-surface-white px-4 py-2 shadow-2xl"
1616
:class="$attrs.class"
1717
>
1818
<slot
@@ -24,13 +24,13 @@
2424
}"
2525
>
2626
<div
27-
class="flex flex-1 justify-between border-r border-gray-300 text-gray-900"
27+
class="flex flex-1 justify-between border-r border-outline-gray-2 text-ink-gray-9"
2828
>
2929
<div class="flex items-center space-x-3">
3030
<Checkbox
3131
:modelValue="true"
3232
:disabled="true"
33-
class="text-gray-900"
33+
class="text-ink-gray-9"
3434
/>
3535
<div>{{ selectedText }}</div>
3636
</div>
@@ -48,7 +48,7 @@
4848
</div>
4949
<div class="flex items-center space-x-1">
5050
<Button
51-
class="w- text-gray-700"
51+
class="w- text-ink-gray-7"
5252
:disabled="list.allRowsSelected"
5353
:class="list.allRowsSelected ? 'cursor-not-allowed' : ''"
5454
variant="ghost"

‎src/components/Progress.vue

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
v-if="props.label || props.hint"
55
class="flex items-baseline justify-between"
66
>
7-
<span v-if="props.label" class="text-base font-medium text-gray-800">{{
8-
props.label
9-
}}</span>
7+
<span v-if="props.label" class="text-base font-medium text-ink-gray-8">
8+
{{ props.label }}
9+
</span>
1010
<!-- Empty for alignment -->
1111
<span v-else></span>
1212

1313
<span class="self-end" v-if="props.hint || $slots.hint">
1414
<slot name="hint">
15-
<span class="text-base font-medium text-gray-500">
15+
<span class="text-base font-medium text-ink-gray-4">
1616
{{ props.value }}%
1717
</span>
1818
</slot>
@@ -30,7 +30,7 @@
3030
<!-- Continuous Progress Bar -->
3131
<div
3232
v-if="!props.intervals"
33-
class="h-full bg-gray-900"
33+
class="h-full bg-surface-gray-7"
3434
:style="`width: ${props.value}%`"
3535
></div>
3636

@@ -39,7 +39,11 @@
3939
v-else
4040
v-for="index in intervalCount"
4141
class="h-full w-full"
42-
:class="index <= filledIntervalCount ? 'bg-gray-900' : 'bg-gray-100'"
42+
:class="
43+
index <= filledIntervalCount
44+
? 'bg-surface-gray-7'
45+
: 'bg-surface-gray-2'
46+
"
4347
></div>
4448
</div>
4549
</div>
@@ -78,7 +82,7 @@ const indicatorContainerClasses = computed(() => {
7882
7983
const layoutClasses = props.intervals
8084
? 'flex space-x-1'
81-
: 'relative bg-gray-100'
85+
: 'relative bg-surface-gray-2'
8286
8387
return [heightClass, layoutClasses]
8488
})

0 commit comments

Comments
 (0)