translation(jp): merge contrast color calculation (#3278)

* docs(angular): fix indentation in 5-adding-mobile.md (#2855)

* docs: fix indentation in 5-adding-mobile.md

* Also change in v7 docs

---------

Co-authored-by: Shawn Taylor <[email protected]>

* docs(input): add label slot and no visible label demos (#2997)

* docs(select): add playgrounds for toggle icon customization (#2996)

* add playgrounds

* lint

* Update static/usage/v7/select/customization/custom-toggle-icons/index.md

Co-authored-by: Liam DeBeasi <[email protected]>

* Update static/usage/v7/select/customization/icon-flip-behavior/index.md

Co-authored-by: Liam DeBeasi <[email protected]>

* fix icon usage for React and Vue

* rename toggleIconWhenOpen to expandedIcon

---------

Co-authored-by: Liam DeBeasi <[email protected]>

* docs(input): input masking examples (#2993)

* docs(textarea): add label slot examples (#3001)

* chore: add playgrounds for JP docs (#3004)

* chore: upgrade maskito dependencies to v1 (#3005)

* fix(playground-tabs): show arrows on long list (#3009)

* docs(native): improve grammar

fixed wording mistakes

* docs(your-first-app): switch to Date.now() (#2915)

Co-authored-by: Maria Hutt <[email protected]>

* docs(list): use dark mode aware color (#3015)

Co-authored-by: reslear <[email protected]>

* docs(maskito): update credit card mask format (#3007)

* chore(ci): check for diff after running prettier (#2981)

* chore: lint content (#3020)

* docs(animation): add playground for override example (#3018)

Co-authored-by: dillionmegida <[email protected]>

* docs(button): include accessibility section with best practices for text wrapping (#3008)

* docs(vue): Improve documentation for removing Typescript steps in v7 (#3002)

* feat(playground): add support for generating a new playground (#2994)

* Add prompts and generate vue file

* Generate other files

* Use variables in headers

* Add readme

* Add prompt with option to generate css files

* Add version to prompt and modify files accordingly

* Update readme

* Address PR review

* Add hint for component name casing

* Add Angular TS option

* Reformat to use advanced prompting

* Refactor where markdown output comes from

* Remove default value for path; add validation

* Add validation for component name

---------

Co-authored-by: Amanda Johnston <[email protected]>

* chore: enable renovate for component playground deps (#3016)

* Configure Renovate (#3017)

* Add renovate.json

* chore: remove invalid setting

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Sean Perkins <[email protected]>

* docs(modal): clarify swipe to close section (#3021)

* docs(react): clarify IonTabs behavior with IonPage (#3012)

* chore(renovate): remove extending docs config (#3027)

* docs(animation): add playground for group example (#3025)

* docs(animations): add playground for chained animations (#3026)

Co-authored-by: dillionmegida <[email protected]>

* chore(deps): update dependency vite to v2.9.16 [security] (#3028)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs(animation): add playground for basic animations (#3031)

Co-authored-by: dillionmegida <[email protected]>

* fix(deps): update dependency @types/node to v16.18.38 (#3033)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(generation): correct angular imports (#3034)

* Refactor: Improve readability

* Combine index files and fix bug with angular ts generation

* docs(animations): buttons in StackBlitz demos do not need id (#3037)

* chore(renovate): limit include paths (#3030)

* chore(renovate): limit include paths

* fix: use matchPackagePatterns

* docs(animations): add playground for before and after hooks (#3035)

Co-authored-by: dillionmegida <[email protected]>

* docs(animations): add playground for preference based (#3036)

Co-authored-by: dillionmegida <[email protected]>

* docs(angular): add type assertion for your first app code snippet (#2910)

Was getting an error: "Type 'string | undefined' is not assignable to type 'string'." Adding an exclamation point at the end of line 111 solves it.

* docs(animation): add playground example for double-click gesture  (#3042)

Co-authored-by: dillionmegida < [email protected]>

Co-authored-by: Maria Hutt <[email protected]>

* docs(animation): add gesture animation playground (#3043)

Co-authored-by: dillionmegida <[email protected]>

* docs(gesture): add playground example for basic usage (#3038)

Co-authored-by: dillionmegida <[email protected]>

* docs(animation): add playground example for keyframes (#3039)

Co-authored-by: dillionmegida < [email protected]>

* docs(item-sliding): clarify expandable behavior (#3044)

* docs(menu): add playgrounds for menu sides and multiple menus (#3049)

* fix(): fix conflict package.json

* chore(): fixed lint

* fix(ci): fix lint and diff

* chore: lint

* fix(script): follow new docs script

* translate

* chore

* chore(): fix confrect

* fmt

* fix(): remove i18n folder from git

* chore: JP docs point to v7 (#3056)

* chore: use correct name for JP docs (#3057)

* docs(android,iOS): link to capacitor getting started guide (#3055)

* docs(theming): add section about safe area padding (#3065)

* docs(quickstart): change wording for installing CLI (#3040)

Co-authored-by: Maria Hutt <[email protected]>

* docs(previewing): adding instruction about "ionic serve --external"  (#3045)

Co-authored-by: Maria Hutt <[email protected]>

* docs(theming): migrate Dark Mode Codepens to playground examples (#3067)

Resolves #2998

Co-authored-by: Colum Ferry <[email protected]>

* docs(api): add accessibility section for new htmlAttributes property (#3064)

* docs(vue): streamline usage examples with script setup syntax (#2956)

* chore(docs): streamline demo using script setup syntax

Simplifies usage demo using Vue’s script setup syntax.

---------

Co-authored-by: Shawn Taylor <[email protected]>

* docs(input): update `Maskito` documentation link (#3072)

* docs(react): document lifecycle hook dependencies arg (#3078)

resolves #1949

* docs(input): update `Maskito` repository link (#3074)

* feat(playground): add prop to display console messages from demo (#3060)

* fix(): consolidate docusaurus tab groupids (#3079)

* fix(vue): fix bug with key type

* fix(): alphabetize sidebar (#3081)

* Revert "fix(): alphabetize sidebar (#3081)" (#3087)

This reverts commit 760204f.

* docs(picker): describe how to set the initial value of a picker column (#3091)

* chore: standardize title tag format (#3092)

* docs(datetime): add best practices for setting value async (#3053)

* fix(docs): fix merge mistake

* translate(core): create translate file

* fmt

* translate(docs): translated

* fmt

* chore(CODEOWNERS): create codeowners file and add me

* feat(generation): generate playgrounds for guides (#3098)

* Conditional prompting

* Improve console.log copy

* Adjust templates for guide playground generation

* Add validation

---------

Co-authored-by: Brandy Carney <[email protected]>

* chore: format generated property types (#3080)

* docs(content): add playground for safe area usage (#3102)

* docs(fab): add playground for safe area workaround (#3105)

* docs(fab): add playground for safe area workaround

* Add safe area sizes for stackblitzes

* Use both component & global css files; use both scoped and global style tags

* feat(checkbox, radio, toggle, range): stacked labels for form controls (#3097)

Co-authored-by: Brandy Carney <[email protected]>

* docs(datetime): adds playground for styling calendar days using shadow parts (#3101)

* chore(angular, html, react, vue): revert package versions on stackblitz (#3106)

* feat(many): update playgrounds to use showConsole prop instead of showing data within demo (#3107)

* docs(input): notes about appropriate uses of counter (#3109)

* docs(input): note deprecated properties

---------

Co-authored-by: Brandy Carney <[email protected]>

* fix(nav-link): opt-out of vue reactivity for component binding (#3113)

Co-authored-by: David Kagiri <[email protected]>

* chore(react): update react router links (#3099)

* Fix doc links

* Fix GH link

* Fix typo

* docs(modal): modifying dismiss behavior in child components (#3117)

* chore: update v7 playground dependencies for React and Vue (#3122)

* update react package.json

* update vue package.json

* chore(ci): renovate configurations for stackblitz templates (#3124)

* fix(deps): update ionic to v6.7.5 (#3125)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency typescript to v4.9.5 (#3126)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update react monorepo (#3131)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(playground): better handle multiple files for Javascript (#3119)

* fix(playground): better handle multiple files for Javascript

* fix(playground): react stackbiltz template files (#3134)

* fix(deps): update dependency vue to v3.3.4 (#3129)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency vue-router to v4.2.4 (#3130)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency clsx to v2 (#3138)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency vue-tsc to v1 (#3136)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency vite to v4 (#3135)

* chore(deps): update dependency vite to v4

* chore(deps): update dependency @vitejs/plugin-vue to v4

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Shawn Taylor <[email protected]>

* chore(): update node to v19 (#3139)

* chore(): update node to v19

* chore(): rename status check

* chore: trigger rebuild

---------

Co-authored-by: Sean Perkins <[email protected]>

* fix(deps): update dependency @types/node to v18 (#3137)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs(item): add best practices and usage guides (#3123)

* chore: rename dont props to doNot (#3144)

* chore: rename dont files to do-not (#3145)

* fix(deps): update ionic to v7.4.1 (#3146)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(): add cspell and fix spelling errors in docs (#3069)

* docs(select): reorder examples, add alert playground (#3153)

* fix(deps): update dependency @types/node to v18.17.19 (#3154)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update ionic to v7.4.2 (#3161)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @types/node to v18.18.0 (#3160)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(support): update support table (#3164)

* chore(support): update support table

* update versioned support tables

* fix(deps): update dependency @types/node to v18.18.1 (#3163)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs: add docs for dynamic font scaling (#3111)

* docs(angular): add standalone documentation (#3115)

* docs(dynamic-font): fix font family name (#3149)

* docs: add modules architecture usage (#3151)

* docs(angular): add angular standalone syntax to non-playground examples (#3116)

* fix(angular): standalone guide formatting (#3152)

* docs(angular): include add diff sign (#3157)

* docs(toast): add playground for positionAnchor (#3158)

* chore: resolve cspell errors (#3165)

* chore: resolve cspell errors

* chore: ignore all node_modules folders

* chore: adjust sorting

* docs(select): keyboard navigation (#3156)

* chore(deps): update dependency vue-tsc to v1.8.14 (#3159)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency web-vitals to v3 (#3142)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore: team is requested for review for renovatebot prs (#3168)

* fix typo

* chore

* chore

* fix(deps): update dependency vue-router to v4.2.5 (#3147)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @types/react to v18.2.22 (#3141)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency vue-tsc to v1.8.15 (#3170)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @types/node to v18.18.3 (#3171)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @vitejs/plugin-vue to v4.4.0 (#3172)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update ionic to v7.4.3 (#3178)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update react monorepo (#3179)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency web-vitals to v3.5.0 (#3173)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore: team is requested for review for renovatebot lockfile prs (#3180)

* chore(deps): update dependency vite to v4.4.11 (#3177)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* feat(playground): persist framework and mode selection (#3169)

* fix(deps): update dependency @types/node to v18.18.4 (#3182)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency vue-tsc to v1.8.16 (#3181)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(playground): wait until playground is in view before loading stored framework/mode (#3185)

* docs(menu): clarify multiple side menu behavior (#3186)

* docs(angular): document standalone routing usage (#3167)

* docs(many): remove legacy form control syntax from v7 playgrounds (#3140)

* docs(angular): add a section to standalone migration for migrating components (#3176)

* chore(deps): update dependency vue-tsc to v1.8.18 (#3188)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(jp): re-add files for removed playgrounds (#3189)

* chore: remove unused file

* fix(): fix cspell check

* translate

* chore

* chore: run lint

* feat(keyboard): replace Codepens with playgrounds using modern syntax (#3192)

* fix(deps): update dependency @types/react-dom to v18.2.11 (#3183)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore: update codeowners (#3187)

* fix(deps): update ionic to v7.5.0 (#3197)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update react monorepo (#3196)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @types/node to v18.18.5 (#3195)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency vue-tsc to v1.8.19 (#3194)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs: clarify IonicSafeString usage (#3198)

I've seen some confusion in threads such as ionic-team/ionic-framework#28365 as to when to use IonicSafeString, so I wanted to clarify this on the docs.

* docs(input, textarea): fix specificity issues with theming playgrounds (#3199)

* fix(backdrop): make backdrop visible in basic playground (#3200)

Co-authored-by: Brandy Carney <[email protected]>

* chore(deps): update dependency vite to v4.5.0 (#3206)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs(react): writing tests with testing-library (#2861)

* fix(deps): update dependency vue to v3.3.5 (#3204)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @types/node to v18.18.6 (#3202)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update react monorepo (#3205)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update ionic to v7.5.1 (#3203)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(fab): remove unused component from playground (#3207)

* fix(deps): update dependency @types/react to v18.2.31 (#3209)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @types/node to v20 (#3211)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency vue-tsc to v1.8.20 (#3212)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* feat(api): get current readme

* translate

* fix(lint): ignore src/translate

* chore(deps): update ionic to v7.5.2 (#3216)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @types/node to v20.8.9 (#3214)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency vue-tsc to v1.8.22 (#3213)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore: add framework team as code owners (#3218)

* fix(textarea): autogrow playground can scroll to the top of contents (#3219)

* docs: change comments for pwa-elements defineCustomElements (#3191)

* chore(docusaurus): update to latest (#3014)

* fix(deps): update dependency vue to v3.3.6 (#3210)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @types/react to v18.2.33 (#3215)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency vue to v3.3.7 (#3221)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs(angular): clarify addIcons usage (#3222)

* docs(angular): add note on migration utility (#3223)

* docs(react): link to vitest docs (#3225)

* docs(react): link to vitest docs

* docs: add vitest to introduction section

* chore: regenerate cli.json (#3193)

* chore(deps): update dependency @types/node to v20.8.10 (#3228)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update ionic to v7.5.3 (#3230)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(renovate): use chore subject line for prs (#3234)

* chore(renovate): update config to ignore typescript updates in react v6 (#3231)

* docs(toggle): increase height of the label placement demo (#3238)

* docs(react): v7 playgrounds use vite (#3236)

* docs(reorder): assign stable identity to loop items (#3239)

* docs(angular): vscode settings for standalone usages (#3233)

* fix(deps): update dependency @types/react to v18.2.34 (#3229)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs(alert): update content in playground examples (#3235)

* fix(playground): support angular 17 template (#3242)

* chore(deps): update dependency vue to v3.3.8 (#3240)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs(react): v6 playgrounds use vite (#3246)

* chore(deps): update dependency @types/node to v20.9.0 (#3245)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update ionic to v7.5.4 (#3244)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @vitejs/plugin-vue to v4.4.1 (#3243)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(renovate): revert typescript ignore rule (#3248)

This reverts commit 94aba0a.

* chore(deps): update react monorepo (#3241)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs(support): note angular 17 support (#3249)

* chore(renovate): match explicitly the react-router and react-router-dom (#3257)

* chore(ci): run workflow against node v20 (#3259)

* chore(deps): update ionic to v7.5.5 (#3253)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @types/node to v20.9.1 (#3252)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @vitejs/plugin-react to v4.2.0 (#3254)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @vitejs/plugin-vue to v4.5.0 (#3255)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency typescript to v5.3.2 (#3261)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update react monorepo (#3262)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs(react): update live reload to fix order (#3265)

Set return order of usePhotoGallery the same as expected in Tab2

* chore(deps): update dependency @types/react-dom to v18.2.17 (#3267)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency vue to v3.3.9 (#3270)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs(autofocus): playground examples for setFocus (#3258)


---------

Co-authored-by: Shawn Taylor <[email protected]>
Co-authored-by: Liam DeBeasi <[email protected]>

* chore(deps): update dependency @types/node to v20.10.0 (#3269)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore

* translate

* chore

* chore: update renovate to update react (#3273)

* fix(): copy package.json from repository

* fix(color-generator): contrast color calculation (#3274)

* fix(color-generator): contrast color calculation

* refactor: apply types and code style

* chore(deps): update ionic to v7.5.6 (#3268)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

---------

Co-authored-by: Bobby Galli <[email protected]>
Co-authored-by: Shawn Taylor <[email protected]>
Co-authored-by: Liam DeBeasi <[email protected]>
Co-authored-by: Sean Perkins <[email protected]>
Co-authored-by: Amanda Johnston <[email protected]>
Co-authored-by: Maria Hutt <[email protected]>
Co-authored-by: Stefan Kempinger <[email protected]>
Co-authored-by: Biskweet <[email protected]>
Co-authored-by: Maria Hutt <[email protected]>
Co-authored-by: reslear <[email protected]>
Co-authored-by: dillionmegida <[email protected]>
Co-authored-by: Brandy Carney <[email protected]>
Co-authored-by: Simo Mafuxwana <[email protected]>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: dillionmegida <[email protected]>
Co-authored-by: Joshua Albrechtsen <[email protected]>
Co-authored-by: Faizanahmed Saiyed <[email protected]>
Co-authored-by: Mohammed Ashfaq <[email protected]>
Co-authored-by: Colum Ferry <[email protected]>
Co-authored-by: Treigh Mawaka <[email protected]>
Co-authored-by: Nikita Barsukov <[email protected]>
Co-authored-by: fc92 <[email protected]>
Co-authored-by: Damian Tarnawsky <[email protected]>
Co-authored-by: Sean Perkins <[email protected]>
Co-authored-by: David Kagiri <[email protected]>
Co-authored-by: Conor <[email protected]>
Co-authored-by: jcesarmobile <[email protected]>
Co-authored-by: sylvainvdm <[email protected]>

src/components/page/theming/_utils/color.ts

@@ -133,6 +133,28 @@ const rgbToYIQ = ({ r, g, b }: RGB): number => {
   return (r * 299 + g * 587 + b * 114) / 1000;
 };
 
+const RED = 0.2126;
+const GREEN = 0.7152;
+const BLUE = 0.0722;
+const GAMMA = 2.4;
+
+const luminance = ({ r, g, b }: RGB) => {
+  const a = [r, g, b].map((v) => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, GAMMA);
+  });
+  return a[0] * RED + a[1] * GREEN + a[2] * BLUE;
+};
+
+// Original source: https://stackoverflow.com/a/9733420
+const contrast = (rgb1: RGB, rgb2: RGB) => {
+  const lum1 = luminance(rgb1);
+  const lum2 = luminance(rgb2);
+  const brightest = Math.max(lum1, lum2);
+  const darkest = Math.min(lum1, lum2);
+  return (brightest + 0.05) / (darkest + 0.05);
+};
+
 export class Color {
   readonly hex: string;
   readonly hsl: HSL;
@@ -176,8 +198,11 @@ export class Color {
     return /(^#[0-9a-fA-F]+)/.test(value.trim());
   }
 
-  contrast(threshold = 128): Color {
-    return new Color(this.yiq >= threshold ? '#000' : '#fff');
+  contrast(): Color {
+    const blackContrastRatio = contrast(this.rgb, { r: 0, g: 0, b: 0 });
+    const whiteContrastRatio = contrast(this.rgb, { r: 255, g: 255, b: 255 });
+
+    return new Color(blackContrastRatio >= whiteContrastRatio ? '#000' : '#fff');
   }
 
   mix(from: string | RGB | HSL | Color, amount = 0.5): Color {