opensourcemirror
/
daisyui
mirror of https://github.com/saadeghi/daisyui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: support OKLCH colors on Safari iOS 15 

feat: use OKLCH percentage parameter instead of number parameter for lightness value which is not supported in iOS 15
closes #2703
This commit is contained in:
Pouya Saadeghi 2024-03-25 15:18:48 +03:00
parent 7d37076d92
commit 56175e0b4b
9 changed files with 40 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/base/colors.css
View File

@ -4,7 +4,7 @@
color: theme(colors.base-content);
}
@supports not (color: oklch(0 0 0)) {
@supports not (color: oklch(0% 0 0)) {
:root {
color-scheme: light;
--fallback-p: #491eff;

38
src/components/styled/button.css
View File

@ -16,7 +16,7 @@
--tw-bg-opacity: 1;
border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
--tw-border-opacity: 1;
@supports not (color: oklch(0 0 0)) {
@supports not (color: oklch(0% 0 0)) {
background-color: var(--btn-color, var(--fallback-b2));
border-color: var(--btn-color, var(--fallback-b2));
}
@ -35,7 +35,7 @@
black
);
}
@supports not (color: oklch(0 0 0)) {
@supports not (color: oklch(0% 0 0)) {
background-color: var(--btn-color, var(--fallback-b2));
border-color: var(--btn-color, var(--fallback-b2));
}
@ -62,37 +62,37 @@
/* brand colors */
&-primary {
@apply text-primary-content outline-primary;
@supports (color: oklch(0 0 0)) {
@supports (color: oklch(0% 0 0)) {
--btn-color: var(--p);
}
@supports not (color: oklch(0 0 0)) {
@supports not (color: oklch(0% 0 0)) {
--btn-color: var(--fallback-p);
}
}
&-secondary {
@apply text-secondary-content outline-secondary;
@supports (color: oklch(0 0 0)) {
@supports (color: oklch(0% 0 0)) {
--btn-color: var(--s);
}
@supports not (color: oklch(0 0 0)) {
@supports not (color: oklch(0% 0 0)) {
--btn-color: var(--fallback-s);
}
}
&-accent {
@apply text-accent-content outline-accent;
@supports (color: oklch(0 0 0)) {
@supports (color: oklch(0% 0 0)) {
--btn-color: var(--a);
}
@supports not (color: oklch(0 0 0)) {
@supports not (color: oklch(0% 0 0)) {
--btn-color: var(--fallback-a);
}
}
&-neutral {
@apply text-neutral-content outline-neutral;
@supports (color: oklch(0 0 0)) {
@supports (color: oklch(0% 0 0)) {
--btn-color: var(--n);
}
@supports not (color: oklch(0 0 0)) {
@supports not (color: oklch(0% 0 0)) {
--btn-color: var(--fallback-n);
}
}
@ -100,37 +100,37 @@
/* btn with state colors */
&-info {
@apply text-info-content outline-info;
@supports (color: oklch(0 0 0)) {
@supports (color: oklch(0% 0 0)) {
--btn-color: var(--in);
}
@supports not (color: oklch(0 0 0)) {
@supports not (color: oklch(0% 0 0)) {
--btn-color: var(--fallback-in);
}
}
&-success {
@apply text-success-content outline-success;
@supports (color: oklch(0 0 0)) {
@supports (color: oklch(0% 0 0)) {
--btn-color: var(--su);
}
@supports not (color: oklch(0 0 0)) {
@supports not (color: oklch(0% 0 0)) {
--btn-color: var(--fallback-su);
}
}
&-warning {
@apply text-warning-content outline-warning;
@supports (color: oklch(0 0 0)) {
@supports (color: oklch(0% 0 0)) {
--btn-color: var(--wa);
}
@supports not (color: oklch(0 0 0)) {
@supports not (color: oklch(0% 0 0)) {
--btn-color: var(--fallback-wa);
}
}
&-error {
@apply text-error-content outline-error;
@supports (color: oklch(0 0 0)) {
@supports (color: oklch(0% 0 0)) {
--btn-color: var(--er);
}
@supports not (color: oklch(0 0 0)) {
@supports not (color: oklch(0% 0 0)) {
--btn-color: var(--fallback-er);
}
}
@ -156,7 +156,7 @@
@media (hover: hover) {
&:hover {
@apply border-transparent;
@supports (color: oklch(0 0 0)) {
@supports (color: oklch(0% 0 0)) {
@apply bg-base-content/20;
}
}

2
src/components/styled/menu.css
View File

@ -29,7 +29,7 @@
@media (hover: hover) {
&:not(.active, .btn):hover {
@apply cursor-pointer outline-none;
@supports (color: oklch(0 0 0)) {
@supports (color: oklch(0% 0 0)) {
@apply bg-base-content/10;
}
}

2
src/components/styled/typography.css
View File

@ -22,7 +22,7 @@
border-radius: var(--rounded-badge);
font-weight: initial;
background-color: theme(colors.base-content/0.1);
@supports not (color: oklch(0 0 0)) {
@supports not (color: oklch(0% 0 0)) {
background-color: theme(colors.base-300);
}
}

2
src/docs/src/components/ThemeChange.svelte
View File

@ -13,7 +13,7 @@
<div
title="Change Theme"
class={`dropdown dropdown-end hidden [@supports(color:oklch(0_0_0))]:block ${dropdownClasses}`}>
class={`dropdown dropdown-end hidden [@supports(color:oklch(0%_0_0))]:block ${dropdownClasses}`}>
<div tabindex="0" role="button" class={`btn ${btnClasses}`}>
<svg
width="20"

12
src/docs/src/routes/(docs)/+page.svelte
View File

@ -157,12 +157,12 @@
<br />
<span class="inline-grid">
<span
class="pointer-events-none col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text blur-xl [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] before:content-[attr(data-text)] [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
class="pointer-events-none col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text blur-xl [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] before:content-[attr(data-text)] [@supports(color:oklch(0%_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
aria-hidden="true"
data-text={$t("component library")}>
</span>
<span
class="[&::selection]:text-base-content relative col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [&::selection]:bg-blue-700/20 [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]">
class="[&::selection]:text-base-content relative col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [&::selection]:bg-blue-700/20 [@supports(color:oklch(0%_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]">
{@html $t("component library")}
</span>
</span>
@ -769,7 +769,7 @@
{$t("Take Tailwind CSS")}
<br />
<span
class="bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text will-change-auto [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] motion-reduce:!tracking-normal max-[1279px]:!tracking-normal [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
class="bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text will-change-auto [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] motion-reduce:!tracking-normal max-[1279px]:!tracking-normal [@supports(color:oklch(0%_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
style={`letter-spacing:${animateValue(section["nextlevel"], [-100, 20], [0, 1])}rem`}>
{$t("to the next level")}
</span>
@ -1562,7 +1562,7 @@
<span class="inline-grid">
{#if section["possibilities"] && ((scrollY - section["possibilities"].offsetTop) / section["possibilities"].clientHeight) * 100 > -100 && ((scrollY - section["possibilities"].offsetTop) / section["possibilities"].clientHeight) * 100 < -20}{:else}
<span
class="pointer-events-none col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text opacity-70 blur-3xl [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] [:root[dir=rtl]_&]:leading-[1.35] [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
class="pointer-events-none col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text opacity-70 blur-3xl [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] [:root[dir=rtl]_&]:leading-[1.35] [@supports(color:oklch(0%_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
aria-hidden="true">
{$t("endless possibilities")}
</span>
@ -1591,8 +1591,8 @@
section["possibilities"].clientHeight) *
100 <
-20
? "motion-reduce:!bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] motion-reduce:!bg-clip-text motion-reduce:![-webkit-text-fill-color:transparent] [@supports(color:oklch(0_0_0))]:motion-reduce:!bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
: "bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
? "motion-reduce:!bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] motion-reduce:!bg-clip-text motion-reduce:![-webkit-text-fill-color:transparent] [@supports(color:oklch(0%_0_0))]:motion-reduce:!bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
: "bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [@supports(color:oklch(0%_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
}`}>
{$t("endless possibilities")}
</span>

2
src/docs/src/routes/(docs)/theme-generator/+page.svelte
View File

@ -28,7 +28,7 @@
return +number.toFixed(4)
}
const { l, c, h } = input
return `${cut(l)} ${cut(c)} ${cut(h)}`
return `${cut(l) * 100}% ${cut(c)} ${cut(h)}`
}
const generateForegroundColorFrom = function (input, percentage = 0.8) {

2
src/docs/src/routes/+layout.svelte
View File

@ -128,7 +128,7 @@
}`}>
<slot />
</div>
<div class="toast toast-center z-10 [@supports(color:oklch(0_0_0))]:hidden">
<div class="toast toast-center z-10 [@supports(color:oklch(0%_0_0))]:hidden">
<div class="alert alert-warning grid-cols-[auto] py-2 text-xs">
<span>
<a

18
src/theming/functions.js
View File

@ -38,7 +38,7 @@ module.exports = {
colorObjToString: function (input) {
const { l, c, h } = input
return `${cutNumber(l)} ${cutNumber(c)} ${cutNumber(h)}`
return `${parseFloat((cutNumber(l) * 100).toFixed(6))}% ${cutNumber(c)} ${cutNumber(h)}`
},
generateForegroundColorFrom: function (input, percentage = 0.8) {
@ -86,7 +86,7 @@ module.exports = {
// auto generate base colors
if (!Object.hasOwn(input, "base-100")) {
resultObj["--b1"] = "100 0 0"
resultObj["--b1"] = "100% 0 0"
}
if (!Object.hasOwn(input, "base-200")) {
resultObj["--b2"] = this.generateDarkenColorFrom(input["base-100"], 0.07)
@ -102,16 +102,16 @@ module.exports = {
// auto generate state colors
if (!Object.hasOwn(input, "info")) {
resultObj["--in"] = "0.7206 0.191 231.6"
resultObj["--in"] = "72.06% 0.191 231.6"
}
if (!Object.hasOwn(input, "success")) {
resultObj["--su"] = "64.8% 0.150 160"
}
if (!Object.hasOwn(input, "warning")) {
resultObj["--wa"] = "0.8471 0.199 83.87"
resultObj["--wa"] = "84.71% 0.199 83.87"
}
if (!Object.hasOwn(input, "error")) {
resultObj["--er"] = "0.7176 0.221 22.18"
resultObj["--er"] = "71.76% 0.221 22.18"
}
// auto generate content colors
@ -134,28 +134,28 @@ module.exports = {
if (Object.hasOwn(input, "info")) {
resultObj["--inc"] = this.generateForegroundColorFrom(input["info"], 0.8)
} else {
resultObj["--inc"] = "0 0 0"
resultObj["--inc"] = "0% 0 0"
}
}
if (!Object.hasOwn(input, "success-content")) {
if (Object.hasOwn(input, "success")) {
resultObj["--suc"] = this.generateForegroundColorFrom(input["success"], 0.8)
} else {
resultObj["--suc"] = "0 0 0"
resultObj["--suc"] = "0% 0 0"
}
}
if (!Object.hasOwn(input, "warning-content")) {
if (Object.hasOwn(input, "warning")) {
resultObj["--wac"] = this.generateForegroundColorFrom(input["warning"], 0.8)
} else {
resultObj["--wac"] = "0 0 0"
resultObj["--wac"] = "0% 0 0"
}
}
if (!Object.hasOwn(input, "error-content")) {
if (Object.hasOwn(input, "error")) {
resultObj["--erc"] = this.generateForegroundColorFrom(input["error"], 0.8)
} else {
resultObj["--erc"] = "0 0 0"
resultObj["--erc"] = "0% 0 0"
}
}