diff --git a/.changeset/silent-badgers-provide.md b/.changeset/silent-badgers-provide.md new file mode 100644 index 0000000..7ffe81e --- /dev/null +++ b/.changeset/silent-badgers-provide.md @@ -0,0 +1,5 @@ +--- +'@igloo-ui/tokens': minor +--- + +Adding a focus token diff --git a/docs/base10/tokens.json b/docs/base10/tokens.json index 28460aa..7c88785 100644 --- a/docs/base10/tokens.json +++ b/docs/base10/tokens.json @@ -340,6 +340,13 @@ } ] }, + { + "focus": [ + { + "focus": "0 0 0 2px #ffffff, 0 0 0 3.5px #0C46D0" + } + ] + }, { "spacing": [ { diff --git a/docs/base10/tokens.scss b/docs/base10/tokens.scss index 4559e77..6d228a7 100644 --- a/docs/base10/tokens.scss +++ b/docs/base10/tokens.scss @@ -140,6 +140,12 @@ $shadow-6: 0 0.1rem 0.6rem 0 rgba(35, 48, 67, 0.1); $shadow-12: 0 0.4rem 1rem 0.4rem rgba(35, 48, 67, 0.1); $shadow-24: 0 1rem 1.8rem 0.8rem rgba(35, 48, 67, 0.1); +/** + * @tokens Focus + * @presenter Focus + */ +$focus: 0 0 0 2px #ffffff, 0 0 0 3.5px #0C46D0; + /** * @tokens Spacing * @presenter Spacing diff --git a/docs/tokens.json b/docs/tokens.json index c71af52..fea6d5e 100644 --- a/docs/tokens.json +++ b/docs/tokens.json @@ -340,6 +340,13 @@ } ] }, + { + "focus": [ + { + "focus": "0 0 0 2px #ffffff, 0 0 0 3.5px #0C46D0" + } + ] + }, { "spacing": [ { diff --git a/docs/tokens.scss b/docs/tokens.scss index 2373f5d..2edcb33 100644 --- a/docs/tokens.scss +++ b/docs/tokens.scss @@ -140,6 +140,12 @@ $shadow-6: 0 0.1rem 0.6rem 0 rgba(35, 48, 67, 0.1); $shadow-12: 0 0.4rem 1rem 0.4rem rgba(35, 48, 67, 0.1); $shadow-24: 0 1rem 1.8rem 0.8rem rgba(35, 48, 67, 0.1); +/** + * @tokens Focus + * @presenter Focus + */ +$focus: 0 0 0 2px #ffffff, 0 0 0 3.5px #0C46D0; + /** * @tokens Spacing * @presenter Spacing diff --git a/tokens/shadow.json b/tokens/shadow.json index ab41f02..3ace0eb 100644 --- a/tokens/shadow.json +++ b/tokens/shadow.json @@ -12,5 +12,9 @@ "value": "0 1rem 1.8rem 0.8rem rgba(35, 48, 67, 0.1)", "group": "shadow" } + }, + "focus": { + "value": "0 0 0 2px {samoyed.value}, 0 0 0 3.5px {electric-blue.600.value}", + "group": "focus" } }