From 861dc1b515e6dd9ff835b841cdba50388ffa746c Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 7 Aug 2025 14:35:07 +0200 Subject: [PATCH 1/2] New CSS module: easing functions (#40645) * New module: easing functions * New module: easing functions * links to new page * Update index.md * Fix links * Apply suggestions from code review Co-authored-by: Chris Mills * Update files/en-us/web/css/css_easing_functions/index.md * Update files/en-us/web/css/css_easing_functions/index.md * Update files/en-us/web/css/css_easing_functions/index.md * Update files/en-us/web/css/css_easing_functions/index.md Co-authored-by: Chris Mills --------- Co-authored-by: Joshua Chen Co-authored-by: Chris Mills --- .../css/animation-timing-function/index.md | 1 + .../web/css/css_easing_functions/index.md | 57 +++++++++++++++++++ .../css/easing-function/cubic-bezier/index.md | 3 +- files/en-us/web/css/easing-function/index.md | 7 ++- .../web/css/easing-function/linear/index.md | 1 + .../web/css/easing-function/steps/index.md | 1 + .../css/transition-timing-function/index.md | 1 + 7 files changed, 67 insertions(+), 4 deletions(-) create mode 100644 files/en-us/web/css/css_easing_functions/index.md diff --git a/files/en-us/web/css/animation-timing-function/index.md b/files/en-us/web/css/animation-timing-function/index.md index 6adb7c35af74905..2258b5f36417221 100644 --- a/files/en-us/web/css/animation-timing-function/index.md +++ b/files/en-us/web/css/animation-timing-function/index.md @@ -578,6 +578,7 @@ The following image shows graphs of all the `step()` function values used in thi - [Using CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) - {{cssxref('easing-function')}} +- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module - JavaScript {{domxref("AnimationEvent")}} API - [Cubic bézier generation tool](https://cubic-bezier.com/) - Other related animation properties: {{cssxref("animation")}}, {{cssxref("animation-composition")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timeline")}} diff --git a/files/en-us/web/css/css_easing_functions/index.md b/files/en-us/web/css/css_easing_functions/index.md new file mode 100644 index 000000000000000..e3275444334547e --- /dev/null +++ b/files/en-us/web/css/css_easing_functions/index.md @@ -0,0 +1,57 @@ +--- +title: CSS easing functions +slug: Web/CSS/CSS_easing_functions +page-type: css-module +spec-urls: https://drafts.csswg.org/css-easing-2 +sidebar: cssref +--- + +The **CSS easing functions** module defines easing functions, which provide a means to control the transformation of values. The functions defined include linear, cubic bezier, and step easing functions. These easing functions can be applied to animations and transitions. + +Gradually increasing the speed at which an element moves can give the element a sense of weight as it appears to gather momentum. Easing functions enable you to control the rate of change. Cubic bezier easing functions can be used to produce intuitive user interface elements or convincing cartoon props that behave like their physical counterparts. + +Alternatively, you may want an animation to move forward in distinct steps, to create robot-like movement, or the effect of a segmented wheel that rotates such that the segments always appear in the same position. For this, step easing functions can be used. + +## Reference + +### Functions + +- {{cssxref("easing-function/cubic-bezier", "cubic-bezier()")}} +- {{cssxref("easing-function/linear", "linear()")}} +- {{cssxref("easing-function/steps", "steps()")}} + +### data types + +- {{cssxref("easing-function")}} +- [``](/en-US/docs/Web/CSS/easing-function#linear-easing-function) +- [``](/en-US/docs/Web/CSS/easing-function#cubic-bezier-easing-function) +- [``](/en-US/docs/Web/CSS/easing-function#step-easing-function) + +### Terms and glossary definitions + +- {{glossary("Bézier curve")}} +- {{glossary("Interpolation")}} + +## Guides + +- [CSS value functions: easing functions](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions#easing_functions) + - : The CSS statements that invoke special data processing or calculations to return a CSS value for a CSS property. + +## Related concepts + +- [CSS animations](/en-US/docs/Web/CSS/CSS_animations) module + - {{cssxref("animation-timing-function")}} + - {{cssxref("animation")}} shorthand + +- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions) module + - {{cssxref("transition-timing-function")}} + - {{cssxref("transition")}} shorthand + +## Specifications + +{{Specifications}} + +## See also + +- [CSS value functions](/en-US/docs/Web/CSS/CSS_values_and_units/CSS_value_functions) +- {{cssxref("will-change")}} CSS property diff --git a/files/en-us/web/css/easing-function/cubic-bezier/index.md b/files/en-us/web/css/easing-function/cubic-bezier/index.md index c1530da90524b18..583b20aff88835c 100644 --- a/files/en-us/web/css/easing-function/cubic-bezier/index.md +++ b/files/en-us/web/css/easing-function/cubic-bezier/index.md @@ -141,4 +141,5 @@ cubic-bezier(-1.9, 0.3, -0.2, 2.1) ## See also - Other easing functions: {{cssxref("easing-function/linear", "linear()")}} and {{cssxref("easing-function/steps", "steps()")}} -- [cubic-bezier.com](https://cubic-bezier.com/) by Lea Verou (2011) +- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module +- [cubic-bezier.com](https://cubic-bezier.com/) by Lea Verou diff --git a/files/en-us/web/css/easing-function/index.md b/files/en-us/web/css/easing-function/index.md index b35126ed20cd98e..78694aa097b689b 100644 --- a/files/en-us/web/css/easing-function/index.md +++ b/files/en-us/web/css/easing-function/index.md @@ -216,7 +216,8 @@ selectElem.addEventListener("change", () => { ## See also -- [CSS animations](/en-US/docs/Web/CSS/CSS_animations) -- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions) -- [cubic-bezier.com](https://cubic-bezier.com/) by Lea Verou (2011) +- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module +- [CSS animations](/en-US/docs/Web/CSS/CSS_animations) module +- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions) module - [`linear()` easing generator](https://linear-easing-generator.netlify.app/) by Jake Archibald +- [cubic-bezier.com](https://cubic-bezier.com/) by Lea Verou diff --git a/files/en-us/web/css/easing-function/linear/index.md b/files/en-us/web/css/easing-function/linear/index.md index 1c97ded77be70b0..83eb01003bb5b54 100644 --- a/files/en-us/web/css/easing-function/linear/index.md +++ b/files/en-us/web/css/easing-function/linear/index.md @@ -93,4 +93,5 @@ linear(start, middle, end) ## See also - Other easing functions: {{cssxref("easing-function/cubic-bezier", "cubic-bezier()")}} and {{cssxref("easing-function/steps", "steps()")}} +- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module - [`linear()` easing generator](https://linear-easing-generator.netlify.app/) by Jake Archibald diff --git a/files/en-us/web/css/easing-function/steps/index.md b/files/en-us/web/css/easing-function/steps/index.md index 9109129a02a0561..e173d012e509352 100644 --- a/files/en-us/web/css/easing-function/steps/index.md +++ b/files/en-us/web/css/easing-function/steps/index.md @@ -107,4 +107,5 @@ steps(0, jump-none) ## See also - Other easing functions: {{cssxref("easing-function/cubic-bezier", "cubic-bezier()")}} and {{cssxref("easing-function/linear", "linear()")}} +- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module - [Step function](https://en.wikipedia.org/wiki/Step_function) on Wikipedia diff --git a/files/en-us/web/css/transition-timing-function/index.md b/files/en-us/web/css/transition-timing-function/index.md index 93f9ddc64b94551..40f871a3d15d823 100644 --- a/files/en-us/web/css/transition-timing-function/index.md +++ b/files/en-us/web/css/transition-timing-function/index.md @@ -299,6 +299,7 @@ const intervalID = setInterval(updateTransition, 10000); - [Using CSS transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) - [``](/en-US/docs/Web/CSS/easing-function) +- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module - {{cssxref('transition')}} - {{cssxref('transition-property')}} - {{cssxref('transition-duration')}} From 451c6b58988664128473a881871707c5ec9737f2 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Thu, 7 Aug 2025 22:52:05 +0800 Subject: [PATCH 2/2] Lint: use named color if possible (1) (#40622) * Lint: use named color if possible (1) * Fix one --- .../index.md | 8 +- .../create_the_canvas_and_draw_on_it/index.md | 4 +- .../accessibility/css_and_javascript/index.md | 4 +- .../css_and_javascript/index.md | 4 +- .../test_your_skills/html/index.md | 2 +- .../test_your_skills/wai-aria/index.md | 2 +- .../accessibility/wai-aria_basics/index.md | 6 +- .../css_layout/responsive_design/index.md | 8 +- .../test_your_skills/flexbox/index.md | 6 +- .../test_your_skills/floats/index.md | 8 +- .../css_layout/test_your_skills/grid/index.md | 8 +- .../angular_item_component/index.md | 16 +-- .../angular_styling/index.md | 14 +-- .../react_todo_list_beginning/index.md | 14 +-- .../svelte_stores/index.md | 4 +- .../svelte_todo_list_beginning/index.md | 14 +-- .../frameworks_libraries/vue_styling/index.md | 10 +- .../advanced_html_text/index.md | 2 +- .../test_your_skills/audio_and_video/index.md | 2 +- .../forms_and_buttons/index.md | 2 +- .../html_text_basics/index.md | 2 +- .../test_your_skills/images/index.md | 2 +- .../test_your_skills/links/index.md | 6 +- .../advanced_styling_effects/index.md | 27 ++-- .../backgrounds_and_borders/index.md | 2 +- .../core/styling_basics/box_model/index.md | 6 +- .../styling_basics/cascade_layers/index.md | 2 +- .../core/styling_basics/combinators/index.md | 4 +- .../handling_conflicts/index.md | 2 +- .../images_media_forms/index.md | 4 +- .../core/styling_basics/organizing/index.md | 2 +- .../backgrounds_and_borders/index.md | 4 +- .../test_your_skills/images/index.md | 8 +- .../test_your_skills/selectors/index.md | 2 +- .../test_your_skills/sizing/index.md | 6 +- .../test_your_skills/values/index.md | 2 +- .../drawing_graphics/index.md | 8 +- .../forms/advanced_form_styling/index.md | 4 +- .../forms/customizable_select/index.md | 2 +- .../example_1/index.md | 42 +++---- .../example_2/index.md | 14 +-- .../example_3/index.md | 14 +-- .../example_4/index.md | 14 +-- .../example_5/index.md | 14 +-- .../index.md | 118 +++++++++--------- .../how_to_structure_a_web_form/index.md | 2 +- .../forms/styling_web_forms/index.md | 6 +- .../extensions/forms/your_first_form/index.md | 4 +- .../extensions/testing/html_and_css/index.md | 4 +- .../solve_css_problems/add_a_shadow/index.md | 2 +- .../center_an_item/index.md | 2 +- .../create_fancy_boxes/index.md | 27 ++-- .../fill_a_box_with_an_image/index.md | 2 +- .../make_box_transparent/index.md | 8 +- .../transition_button/index.md | 2 +- files/en-us/mdn/kitchensink/index.md | 2 +- .../code_style_guide/index.md | 33 ----- .../css_function_page_template/index.md | 2 +- .../manifest.json/theme/index.md | 8 +- .../user_interface/browser_styles/index.md | 6 +- files/en-us/related/imsc/basics/index.md | 12 +- .../reference/elements/input/color/index.md | 2 +- 62 files changed, 267 insertions(+), 306 deletions(-) diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md index dd905545927ca65..a3c03f6ddc3ce15 100644 --- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md @@ -135,9 +135,9 @@ We've also defined a cursor for the given camera, using the `cursor-*` attribute The basic light types in A-Frame are directional and ambient. The first type is a directional light placed somewhere on the scene while the second one reflects the light from the first type, so it looks more natural; this can be set globally. Add the new code below your previous additions — this uses the standard `` element: ```html - + - + ``` The directional light has a white color, its intensity is set to `0.5`, and it is placed at position `-1 1 2`. The ambient light only needs a color, which is also white. @@ -261,10 +261,10 @@ Everything is rendered properly and animating — congratulations on building yo - + diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md index 3929bf3deac691e..45a2d0b2cb779ce 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md @@ -61,7 +61,7 @@ Let's see an example piece of code that prints a red square on the canvas. Add t ```js ctx.beginPath(); ctx.rect(20, 40, 50, 50); -ctx.fillStyle = "#FF0000"; +ctx.fillStyle = "red"; ctx.fill(); ctx.closePath(); ``` @@ -119,7 +119,7 @@ const ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.rect(20, 40, 50, 50); -ctx.fillStyle = "#FF0000"; +ctx.fillStyle = "red"; ctx.fill(); ctx.closePath(); diff --git a/files/en-us/learn_web_development/core/accessibility/css_and_javascript/index.md b/files/en-us/learn_web_development/core/accessibility/css_and_javascript/index.md index 232935423026225..a650d66dd395a59 100644 --- a/files/en-us/learn_web_development/core/accessibility/css_and_javascript/index.md +++ b/files/en-us/learn_web_development/core/accessibility/css_and_javascript/index.md @@ -142,7 +142,7 @@ Some very simple link styling is shown below: ```css a { - color: #ff0000; + color: red; } a:hover, @@ -153,7 +153,7 @@ a:focus { } a:active { - color: #000000; + color: black; background-color: #a60000; } ``` diff --git a/files/en-us/learn_web_development/core/accessibility/test_your_skills/css_and_javascript/index.md b/files/en-us/learn_web_development/core/accessibility/test_your_skills/css_and_javascript/index.md index a84e351fc5a0fdd..e78be2753551be0 100644 --- a/files/en-us/learn_web_development/core/accessibility/test_your_skills/css_and_javascript/index.md +++ b/files/en-us/learn_web_development/core/accessibility/test_your_skills/css_and_javascript/index.md @@ -21,7 +21,7 @@ To complete the task, create new rules to make the links look and behave like li ```css hidden live-sample___css-js-ally-1 live-sample___css-js-ally-2 live-sample___css-js-ally-3 body { - background-color: #fff; + background-color: white; color: #333; font: 1em / 1.4 Helvetica Neue, @@ -81,7 +81,7 @@ li a { li a:hover, li a:focus { text-decoration: none; - color: rgb(255 0 0); + color: red; } ``` diff --git a/files/en-us/learn_web_development/core/accessibility/test_your_skills/html/index.md b/files/en-us/learn_web_development/core/accessibility/test_your_skills/html/index.md index 56636bfbcbf8856..2f40ee4c702573c 100644 --- a/files/en-us/learn_web_development/core/accessibility/test_your_skills/html/index.md +++ b/files/en-us/learn_web_development/core/accessibility/test_your_skills/html/index.md @@ -21,7 +21,7 @@ To complete the task, update the markup to use appropriate semantic HTML. You do ```css hidden live-sample___html-ally-1 live-sample___html-ally-2 live-sample___html-ally-3 live-sample___html-ally-4 body { - background-color: #fff; + background-color: white; color: #333; font: 1em / 1.4 Helvetica Neue, diff --git a/files/en-us/learn_web_development/core/accessibility/test_your_skills/wai-aria/index.md b/files/en-us/learn_web_development/core/accessibility/test_your_skills/wai-aria/index.md index 2e73c0f52ae5021..988fc931bff4895 100644 --- a/files/en-us/learn_web_development/core/accessibility/test_your_skills/wai-aria/index.md +++ b/files/en-us/learn_web_development/core/accessibility/test_your_skills/wai-aria/index.md @@ -21,7 +21,7 @@ To complete the task, add some WAI-ARIA semantics to make screen readers recogni ```css hidden live-sample___aria-1 live-sample___aria-2 live-sample___aria-3 body { - background-color: #fff; + background-color: white; color: #333; font: 1em / 1.4 Helvetica Neue, diff --git a/files/en-us/learn_web_development/core/accessibility/wai-aria_basics/index.md b/files/en-us/learn_web_development/core/accessibility/wai-aria_basics/index.md index 72fb504f2f52b5f..84b19545cf84910 100644 --- a/files/en-us/learn_web_development/core/accessibility/wai-aria_basics/index.md +++ b/files/en-us/learn_web_development/core/accessibility/wai-aria_basics/index.md @@ -203,7 +203,7 @@ body { html { font-size: 10px; - background-color: #a9a9a9; + background-color: darkgrey; } body { @@ -456,7 +456,7 @@ body { html { font-size: 10px; - background-color: #a9a9a9; + background-color: darkgrey; } body { @@ -855,7 +855,7 @@ function toggleMusician(bool) { const instrument = formItems[formItems.length - 1]; if (bool) { instrument.input.disabled = false; - instrument.label.style.color = "#000"; + instrument.label.style.color = "black"; instrument.input.setAttribute("aria-disabled", "false"); hiddenAlert.textContent = "Instruments played field now enabled; use it to tell us what you play."; diff --git a/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md b/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md index cdd9dbad0663d0a..29dbfa3ba6d8ce7 100644 --- a/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md +++ b/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md @@ -163,7 +163,7 @@ body { .col1, .col2 { - background-color: #fff; + background-color: white; } ``` @@ -241,7 +241,7 @@ body { .col1, .col2 { - background-color: #fff; + background-color: white; } ``` @@ -361,7 +361,7 @@ h1 { .col1, .col2 { - background-color: #fff; + background-color: white; } @media screen and (width >= 600px) { @@ -447,7 +447,7 @@ h1 { .col1, .col2 { - background-color: #fff; + background-color: white; } @media screen and (width >= 600px) { diff --git a/files/en-us/learn_web_development/core/css_layout/test_your_skills/flexbox/index.md b/files/en-us/learn_web_development/core/css_layout/test_your_skills/flexbox/index.md index 8f3e86c5695cbd6..acf5e7f4a839168 100644 --- a/files/en-us/learn_web_development/core/css_layout/test_your_skills/flexbox/index.md +++ b/files/en-us/learn_web_development/core/css_layout/test_your_skills/flexbox/index.md @@ -53,7 +53,7 @@ nav a:visited { background-color: #4d7298; border: 2px solid #77a6b6; border-radius: 0.5em; - color: #fff; + color: white; padding: 0.5em; display: inline-block; text-decoration: none; @@ -117,7 +117,7 @@ li { background-color: #4d7298; border: 2px solid #77a6b6; border-radius: 0.5em; - color: #fff; + color: white; padding: 0.5em; } @@ -193,7 +193,7 @@ li { background-color: #4d7298; border: 2px solid #77a6b6; border-radius: 0.5em; - color: #fff; + color: white; padding: 0.5em; margin: 0.5em; } diff --git a/files/en-us/learn_web_development/core/css_layout/test_your_skills/floats/index.md b/files/en-us/learn_web_development/core/css_layout/test_your_skills/floats/index.md index b25e6f4e9305224..f32a58e37fbde24 100644 --- a/files/en-us/learn_web_development/core/css_layout/test_your_skills/floats/index.md +++ b/files/en-us/learn_web_development/core/css_layout/test_your_skills/floats/index.md @@ -44,7 +44,7 @@ body { height: 150px; border-radius: 5px; background-color: rebeccapurple; - color: #fff; + color: white; padding: 1em; } @@ -114,7 +114,7 @@ body { height: 150px; border-radius: 5px; background-color: rebeccapurple; - color: #fff; + color: white; padding: 1em; } @@ -181,13 +181,13 @@ body { border-radius: 5px; background-color: rgb(207 232 220); padding: 1em; - color: #fff; + color: white; } .box { background-color: rebeccapurple; padding: 10px; - color: #fff; + color: white; } .float { diff --git a/files/en-us/learn_web_development/core/css_layout/test_your_skills/grid/index.md b/files/en-us/learn_web_development/core/css_layout/test_your_skills/grid/index.md index cdb7de6641d8fe9..0a42a0c8e52ef6a 100644 --- a/files/en-us/learn_web_development/core/css_layout/test_your_skills/grid/index.md +++ b/files/en-us/learn_web_development/core/css_layout/test_your_skills/grid/index.md @@ -37,7 +37,7 @@ body { background-color: #4d7298; border: 2px solid #77a6b6; border-radius: 0.5em; - color: #fff; + color: white; padding: 0.5em; } @@ -84,7 +84,7 @@ body { } .grid > * { border-radius: 0.5em; - color: #fff; + color: white; padding: 0.5em; } @@ -177,7 +177,7 @@ body { background-color: #4d7298; border: 2px solid #77a6b6; border-radius: 0.5em; - color: #fff; + color: white; padding: 0.5em; } @@ -306,7 +306,7 @@ body { .tags > * { background-color: #999; - color: #fff; + color: white; padding: 0.2em 0.8em; border-radius: 0.2em; font-size: 80%; diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md index 583e09aef94e908..56b93c81c415edf 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md @@ -374,9 +374,9 @@ Paste the following styles into `item.component.css`. } .btn-save { - background-color: #000; - color: #fff; - border-color: #000; + background-color: black; + color: white; + border-color: black; } .btn-save:hover { @@ -384,8 +384,8 @@ Paste the following styles into `item.component.css`. } .btn-save:focus { - background-color: #fff; - color: #000; + background-color: white; + color: black; } .checkbox-wrapper { @@ -394,7 +394,7 @@ Paste the following styles into `item.component.css`. .btn-warn { background-color: #b90000; - color: #fff; + color: white; border-color: #9a0000; } @@ -404,7 +404,7 @@ Paste the following styles into `item.component.css`. .btn-warn:active { background-color: #e30000; - border-color: #000; + border-color: black; } .sm-text-input { @@ -443,7 +443,7 @@ Adapted from https://css-tricks.com/the-checkbox-hack/#custom-designed-radio-but width: 1.25em; height: 1.25em; border: 2px solid #ccc; - background: #fff; + background: white; } /* checked mark aspect */ diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md index 5657158d14550a8..653cf1378d9e164 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md @@ -57,8 +57,8 @@ body { } .btn { - color: #000; - background-color: #fff; + color: black; + background-color: white; border: 2px solid #cecece; padding: 0.35rem 1rem 0.25rem 1rem; font-size: 1rem; @@ -78,8 +78,8 @@ body { } .btn-primary { - color: #fff; - background-color: #000; + color: white; + background-color: black; width: 100%; padding: 0.75rem; font-size: 1.3rem; @@ -92,9 +92,9 @@ body { } .btn-primary:focus { - color: #000; + color: black; outline: none; - border: #000 solid 2px; + border: black solid 2px; background-color: #d7ecff; } @@ -136,7 +136,7 @@ label { .lg-text-input { width: 100%; padding: 1rem; - border: 2px solid #000; + border: 2px solid black; display: block; box-sizing: border-box; font-size: 1rem; diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md index c2de90f2dae8369..2a4cc0de95b58ca 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md @@ -311,7 +311,7 @@ input[type="text"] { border-radius: 0; } body { - background-color: #f5f5f5; + background-color: whitesmoke; color: #4d4d4d; font: 1.6rem/1.25 Arial, @@ -339,7 +339,7 @@ body { text-transform: capitalize; } .btn.toggle-btn { - border-color: #d3d3d3; + border-color: lightgray; border-width: 1px; } .btn.toggle-btn[aria-pressed="true"] { @@ -349,14 +349,14 @@ body { .btn__danger { background-color: #ca3c3c; border-color: #bd2130; - color: #fff; + color: white; } .btn__filter { border-color: lightgrey; } .btn__primary { - background-color: #000; - color: #fff; + background-color: black; + color: white; } .btn-group { display: flex; @@ -405,7 +405,7 @@ body { /* End global styles */ /* General app styles */ .todoapp { - background: #fff; + background: white; box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%), 0 2.5rem 5rem 0 rgb(0 0 0 / 10%); @@ -441,7 +441,7 @@ body { text-align: center; } .input__lg { - border: 2px solid #000; + border: 2px solid black; padding: 2rem; } .input__lg:focus-visible { diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_stores/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_stores/index.md index e1f7227111e1a97..49738964f4a2506 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_stores/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_stores/index.md @@ -149,7 +149,7 @@ Let's now create our `Alert` component and see how we can read values from the s align-items: center; border-radius: 0.2rem; background-color: #565656; - color: #fff; + color: white; font-weight: 700; padding: 0.5rem 1.4rem; font-size: 1.5rem; @@ -157,7 +157,7 @@ Let's now create our `Alert` component and see how we can read values from the s opacity: 95%; } div p { - color: #fff; + color: white; } div svg { height: 1.6rem; diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md index e2b18f039ec43f7..1c512ffba2ffb4d 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md @@ -456,7 +456,7 @@ body { font: 1.6rem/1.25 Arial, sans-serif; - background-color: #f5f5f5; + background-color: whitesmoke; color: #4d4d4d; } @media screen and (width >= 620px) { @@ -480,14 +480,14 @@ body { } .btn.toggle-btn { border-width: 1px; - border-color: #d3d3d3; + border-color: lightgray; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: #4d4d4d; } .btn__danger { - color: #fff; + color: white; background-color: #ca3c3c; border-color: #bd2130; } @@ -495,8 +495,8 @@ body { border-color: lightgrey; } .btn__primary { - color: #fff; - background-color: #000; + color: white; + background-color: black; } .btn__primary:disabled { color: darkgrey; @@ -549,7 +549,7 @@ body { /* END GLOBAL STYLES */ .todoapp { - background: #fff; + background: white; margin: 2rem 0 4rem 0; padding: 1rem; position: relative; @@ -586,7 +586,7 @@ body { } .input__lg { padding: 2rem; - border: 2px solid #000; + border: 2px solid black; } .input__lg:focus { border-color: #4d4d4d; diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md index df511de3d7c73de..9b7851d897695d3 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md @@ -126,7 +126,7 @@ body { Helvetica, Arial, sans-serif; - background-color: #f5f5f5; + background-color: whitesmoke; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -178,7 +178,7 @@ Update your `App.vue` file's `