ossdecathlon

lthieb05

@vtmn/css-text-input

  "description": "Decathlon Design System - Vitamin specific CSS styles for text input component",

    "url": "https://github.com/Decathlon/vitamin-web/issues"

    "url": "git+https://github.com/Decathlon/vitamin-web.git"

      "url": "http://www.apache.org/licenses/LICENSE-2.0"

  "gitHead": "f977fa9252e3a376409a2505de8440bf5879e36c"

  "gitHead": "4d6a964d70f5e6b2ccaf341f9336fe5bb8dbce1f"

> Decathlon Design System - Vitamin specific CSS styles for text input component

After installing [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) or [yarn](https://yarnpkg.com/en/docs/install), you can install `@vtmn/css-text-input` with this command:

Or you can also install it with a CDN like `unpkg.com`:

[Roboto](https://fonts.google.com/specimen/Roboto) & [Roboto Condensed](https://fonts.google.com/specimen/Roboto+Condensed) fonts as described in [Typography](https://www.decathlon.design/726f8c765/v/0/p/860e14-typography) section will not be automatically loaded. Fortunately, there is a few easy ways to get started.

Shown below is a sample link markup used to load from a CDN:

You can install them with [FontSource](https://github.com/fontsource/fontsource):

npm i -S @fontsource/roboto @fontsource/roboto-condensed

yarn add @fontsource/roboto @fontsource/roboto-condensed

Then, within your app entry file or site component, import it in:

import '@fontsource/roboto'; // Defaults to weight 400

import '@fontsource/roboto/400.css'; // Specify weight

import '@fontsource/roboto/400-italic.css'; // Specify weight and style

In order to enhance performance of your app, please read about [font subsetting](https://web.dev/font-best-practices/#subset-fonts). [FontSource explains it here](https://fontsource.org/docs/getting-started/subsets).

Otherwise, you can also load them through CDN:

  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Condensed:ital,wght@0,400;0,700;1,700&display=swap"

Finally, you can also import them via CSS import:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Condensed:ital,wght@0,400;0,700;1,700&display=swap');

Otherwise, you can install them with `typeface`:

npm i -S typeface-roboto typeface-roboto-condensed

yarn add typeface-roboto typeface-roboto-condensed

Then, you can import them in your entry-point:

If you need to display icons, you will need to install `@vtmn/icons` package.

Then follow instructions in [README of @vtmn/icons](https://www.npmjs.com/package/@vtmn/icons) :

import '@vtmn/icons/dist/vitamix/font/vitamix.css';

Or you can also import it with a CDN like `unpkg.com` with [this file](https://unpkg.com/@vtmn/icons/dist/vitamix/font/vitamix.css).

Once you have installed this package, you just have to import CSS styles!

If you don't need different themes, you can choose the specific CSS package without CSS variables.

With a bundler that supports CSS imports in JS files:

import '@vtmn/css-text-input/dist/index.css';

  href="./node_modules/@vtmn/css-text-input/dist/index.css"

If you need different themes, you can choose the specific CSS package with CSS variables. For this, be sure to install & import `@vtmn/css-design-tokens` before:

import '@vtmn/css-design-tokens/dist/index.css';

import '@vtmn/css-text-input/dist/index-with-vars.css';

  href="./node_modules/@vtmn/css-design-tokens/dist/index.css"

  href="./node_modules/@vtmn/css-text-input/dist/index-with-vars.css"

To know all the use cases and their associated code, [check out the showcase here](https://decathlon.github.io/vitamin-web/@vtmn/showcase-css/index.html?path=/docs/components-text-input--overview).

For more information about how this component is designed and how to use it in your application, [check out the decathlon.design docs](https://www.decathlon.design/726f8c765/p/31121d-text-input)

If your project uses the mathematical trick of basing the value of `1rem` equals `10px`, there is also an `index-base10` output within the `dist` folder of this package.

If you want to know the different changes between versions of this package, [look at the changelog here](https://github.com/Decathlon/vitamin-web/blob/main/packages/sources/css/src/components/text-input/CHANGELOG.md).

Please file the issue [here](https://github.com/Decathlon/vitamin-web/issues/new).

		{
		"name": "@vtmn/css-text-input",
		"version": "1.1.1",
		"version": "1.1.2",
		"description": "Decathlon Design System - Vitamin specific CSS styles for text input component",
		@@ -29,3 +29,3 @@ "keywords": [
		"devDependencies": {
		"@vtmn/css-design-tokens": "^1.1.0",
		"@vtmn/css-design-tokens": "^1.1.1",
		"@vtmn/css-postcss-config": "*"
		@@ -43,3 +43,3 @@ },
		"svelte": "dist/index-with-vars.css",
		"gitHead": "f977fa9252e3a376409a2505de8440bf5879e36c"
		"gitHead": "4d6a964d70f5e6b2ccaf341f9336fe5bb8dbce1f"
		}

		@@ -32,4 +32,24 @@ # `@vtmn/css-text-input`

		Shown below is a sample link markup used to load from a CDN:
		You can install them with [FontSource](https://github.com/fontsource/fontsource):

		```sh
		# with npm
		npm i -S @fontsource/roboto @fontsource/roboto-condensed

		# with yarn
		yarn add @fontsource/roboto @fontsource/roboto-condensed
		```

		Then, within your app entry file or site component, import it in:

		```javascript
		import '@fontsource/roboto'; // Defaults to weight 400
		import '@fontsource/roboto/400.css'; // Specify weight
		import '@fontsource/roboto/400-italic.css'; // Specify weight and style
		```

		In order to enhance performance of your app, please read about [font subsetting](https://web.dev/font-best-practices/#subset-fonts). [FontSource explains it here](https://fontsource.org/docs/getting-started/subsets).

		Otherwise, you can also load them through CDN:

		```html
		@@ -42,3 +62,3 @@ <link

		You can also do it via CSS Import:
		Finally, you can also import them via CSS import:

		@@ -49,19 +69,2 @@ ```css

		Otherwise, you can install them with `typeface`:

		```sh
		# with npm
		npm i -S typeface-roboto typeface-roboto-condensed

		# with yarn
		yarn add typeface-roboto typeface-roboto-condensed
		```

		Then, you can import them in your entry-point:

		```javascript
		import 'typeface-roboto';
		import 'typeface-roboto-condensed';
		```

		## Install icons (optional)
		@@ -68,0 +71,0 @@

Improved metrics