@sats-group/ui-lib 88.3.2 → 89.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/react/checkbox/checkbox.d.ts +2 -3
- package/react/checkbox/checkbox.js +1 -1
- package/react/checkbox/checkbox.js.map +3 -3
- package/react/checkbox/checkbox.types.d.ts +7 -2
- package/react/checkbox/checkbox.types.js +1 -1
- package/react/checkbox/checkbox.types.js.map +3 -3
- package/react/form-content/checkbox-category.js +1 -1
- package/react/form-content/checkbox-category.js.map +3 -3
- package/react/tag/tag.d.ts +2 -1
- package/react/tag/tag.js +1 -1
- package/react/tag/tag.js.map +3 -3
- package/react/tag/tag.scss +105 -9
- package/react/tag/tag.types.d.ts +5 -0
- package/react/tag/tag.types.js +1 -1
- package/react/tag/tag.types.js.map +3 -3
- package/tokens/dark.scss +9 -0
- package/tokens/darkmode.css +9 -0
- package/tokens/default-colours.css +9 -0
- package/tokens/light.scss +9 -0
- package/tokens/lightmode.css +9 -0
package/package.json
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { themes } from './checkbox.types';
|
|
2
|
+
import { labelVariants, themes } from './checkbox.types';
|
|
3
3
|
declare const RefCheckbox: React.ForwardRefExoticComponent<Omit<import("../types").InputHtmlProps, "value"> & {
|
|
4
4
|
intermediate?: boolean;
|
|
5
5
|
description?: string;
|
|
6
6
|
extra?: React.ReactNode;
|
|
7
|
-
|
|
8
|
-
isLabelVisible?: boolean;
|
|
7
|
+
labelVariant?: import("../types").ObjectValues<typeof labelVariants>;
|
|
9
8
|
label?: string;
|
|
10
9
|
name: string;
|
|
11
10
|
value: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";var M=Object.defineProperty;var
|
|
1
|
+
"use client";var M=Object.defineProperty;var x=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;var p=(c,o,i)=>o in c?M(c,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):c[o]=i,g=(c,o)=>{for(var i in o||(o={}))f.call(o,i)&&p(c,i,o[i]);if(x)for(var i of x(o))u.call(o,i)&&p(c,i,o[i]);return c};var N=(c,o)=>{var i={};for(var n in c)f.call(c,n)&&o.indexOf(n)<0&&(i[n]=c[n]);if(c!=null&&x)for(var n of x(c))o.indexOf(n)<0&&u.call(c,n)&&(i[n]=c[n]);return i};import l from"classnames";import*as e from"react";import W from"../use-input-validation";import a from"../text";import{labelVariants as h,themes as j}from"./checkbox.types";const w=e.forwardRef((H,z)=>{var t=H,{children:c,disabled:o,description:i,extra:n,intermediate:m,labelVariant:_=h.default,label:r,name:C,showCustomError:L=!0,theme:s,value:$="",required:v,hasHover:y=!1,isWide:I=!0}=t,b=N(t,["children","disabled","description","extra","intermediate","labelVariant","label","name","showCustomError","theme","value","required","hasHover","isWide"]);const[T,B,k]=W();return e.createElement("div",{className:l("checkbox",{"checkbox--error":k,"checkbox--intermediate":m,"checkbox--wide":I,[`checkbox--${s}`]:s})},e.createElement("label",{className:l("checkbox__content",{"checkbox__content--hover":y,[`checkbox__content--${s}`]:s})},e.createElement("div",{className:"checkbox__main"},e.createElement("div",{className:"checkbox__main-top"},e.createElement("div",null,e.createElement("input",g({"aria-label":_===h.hidden?r:void 0,className:"checkbox__input",type:"checkbox",name:C,onChange:d=>{b.onChange&&b.onChange(d),T(d)},onInvalid:d=>{b.onInvalid&&b.onInvalid(d),B(d)},ref:z,value:$,disabled:o,required:v},b)),e.createElement("div",{className:l("checkbox__icon",{"checkbox__icon--intermediate":m,[`checkbox__icon--${s}`]:s})},e.createElement("svg",{className:"checkbox__intermediate",width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("line",{x1:"0",y1:"5",x2:"10",y2:"5",stroke:"currentColor",strokeWidth:"2"})),e.createElement("svg",{className:"checkbox__check",width:"12",height:"10",viewBox:"0 0 12 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z",fill:"currentColor"})))),_!==h.hidden?e.createElement(e.Fragment,null,r?e.createElement(a,{className:l("checkbox__label",{[`checkbox__label--${s}`]:s,"checkbox__label--disabled":o}),size:a.sizes.basic,italic:_===h.headline,theme:_===h.bold?a.themes.emphasis:_===h.headline?a.themes.headline:a.themes.normal},r):e.createElement("div",{className:l("checkbox__label",{[`checkbox__label--${s}`]:s,"checkbox__label--disabled":o})},c)):null,v?e.createElement("span",{className:"checkbox__asterisk"},"*"):null),i&&e.createElement(a,{className:l("checkbox__description",{[`checkbox__label--${s}`]:s,"checkbox__label--disabled":o}),size:a.sizes.small},i))),k&&L&&e.createElement("div",{"aria-hidden":"true",className:l("checkbox__error",{[`checkbox__error--${s}`]:s})},k),n&&e.createElement("span",{className:"checkbox__extra"},n))});w.displayName="Checkbox";const E=Object.assign(w,{themes:j});var G=E;export{G as default};
|
|
2
2
|
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../react/checkbox/checkbox.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\nimport Text from '../text';\n\nimport { Checkbox as Props, themes } from './checkbox.types';\n\nconst RefCheckbox = React.forwardRef<\n HTMLInputElement,\n React.PropsWithChildren<Props>\n>(\n (\n {\n children,\n disabled,\n description,\n extra,\n intermediate,\n
|
|
5
|
-
"mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAC/B,OAAOC,MAAU,UAEjB,OAA4B,UAAAC,MAAc,
|
|
6
|
-
"names": ["cn", "React", "useInputValidation", "Text", "themes", "RefCheckbox", "_a", "ref", "_b", "children", "disabled", "description", "extra", "intermediate", "
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\nimport Text from '../text';\n\nimport { Checkbox as Props, labelVariants, themes } from './checkbox.types';\n\nconst RefCheckbox = React.forwardRef<\n HTMLInputElement,\n React.PropsWithChildren<Props>\n>(\n (\n {\n children,\n disabled,\n description,\n extra,\n intermediate,\n labelVariant = labelVariants.default,\n label,\n name,\n showCustomError = true,\n theme,\n value = '',\n required,\n hasHover = false,\n isWide = true,\n ...restProps\n },\n ref,\n ) => {\n const [onChange, onInvalid, error] = useInputValidation();\n\n return (\n <div\n className={cn('checkbox', {\n 'checkbox--error': error,\n 'checkbox--intermediate': intermediate,\n 'checkbox--wide': isWide,\n [`checkbox--${theme}`]: theme,\n })}\n >\n <label\n className={cn('checkbox__content', {\n 'checkbox__content--hover': hasHover,\n [`checkbox__content--${theme}`]: theme,\n })}\n >\n <div className=\"checkbox__main\">\n <div className=\"checkbox__main-top\">\n <div>\n <input\n aria-label={\n labelVariant === labelVariants.hidden ? label : undefined\n }\n className=\"checkbox__input\"\n type=\"checkbox\"\n name={name}\n onChange={e => {\n // NOTE: If props specify an `onChange`, we need to call that too\n if (restProps.onChange) restProps.onChange(e);\n onChange(e);\n }}\n onInvalid={e => {\n // NOTE: If props specify an `onInvalid`, we need to call that too\n if (restProps.onInvalid) restProps.onInvalid(e);\n onInvalid(e);\n }}\n ref={ref}\n value={value}\n disabled={disabled}\n required={required}\n {...restProps}\n />\n\n <div\n className={cn('checkbox__icon', {\n 'checkbox__icon--intermediate': intermediate,\n [`checkbox__icon--${theme}`]: theme,\n })}\n >\n <svg\n className=\"checkbox__intermediate\"\n width=\"10\"\n height=\"10\"\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n x1=\"0\"\n y1=\"5\"\n x2=\"10\"\n y2=\"5\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n </svg>\n <svg\n className=\"checkbox__check\"\n width=\"12\"\n height=\"10\"\n viewBox=\"0 0 12 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n </div>\n {labelVariant !== labelVariants.hidden ? (\n <>\n {label ? (\n <Text\n className={cn('checkbox__label', {\n [`checkbox__label--${theme}`]: theme,\n 'checkbox__label--disabled': disabled,\n })}\n size={Text.sizes.basic}\n italic={labelVariant === labelVariants.headline}\n theme={\n labelVariant === labelVariants.bold\n ? Text.themes.emphasis\n : labelVariant === labelVariants.headline\n ? Text.themes.headline\n : Text.themes.normal\n }\n >\n {label}\n </Text>\n ) : (\n <div\n className={cn('checkbox__label', {\n [`checkbox__label--${theme}`]: theme,\n 'checkbox__label--disabled': disabled,\n })}\n >\n {children}\n </div>\n )}\n </>\n ) : null}\n {required ? <span className=\"checkbox__asterisk\">*</span> : null}\n </div>\n {description && (\n <Text\n className={cn('checkbox__description', {\n [`checkbox__label--${theme}`]: theme,\n 'checkbox__label--disabled': disabled,\n })}\n size={Text.sizes.small}\n >\n {description}\n </Text>\n )}\n </div>\n </label>\n\n {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n {error && showCustomError && (\n <div\n aria-hidden=\"true\"\n className={cn('checkbox__error', {\n [`checkbox__error--${theme}`]: theme,\n })}\n >\n {error}\n </div>\n )}\n\n {extra && <span className=\"checkbox__extra\">{extra}</span>}\n </div>\n );\n },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Checkbox\"\nRefCheckbox.displayName = 'Checkbox';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Checkbox: typeof RefCheckbox & {\n themes: typeof themes;\n} = Object.assign(RefCheckbox, { themes });\n\nexport default Checkbox;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["cn", "React", "useInputValidation", "Text", "labelVariants", "themes", "RefCheckbox", "_a", "ref", "_b", "children", "disabled", "description", "extra", "intermediate", "labelVariant", "label", "name", "showCustomError", "theme", "value", "required", "hasHover", "isWide", "restProps", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "Checkbox", "checkbox_default"]
|
|
7
7
|
}
|
|
@@ -3,12 +3,17 @@ export declare const themes: {
|
|
|
3
3
|
readonly light: "light";
|
|
4
4
|
readonly blue: "blue";
|
|
5
5
|
};
|
|
6
|
+
export declare const labelVariants: {
|
|
7
|
+
readonly default: "default";
|
|
8
|
+
readonly headline: "headline";
|
|
9
|
+
readonly bold: "bold";
|
|
10
|
+
readonly hidden: "hidden";
|
|
11
|
+
};
|
|
6
12
|
export type Checkbox = Omit<InputHtmlProps, 'value'> & {
|
|
7
13
|
intermediate?: boolean;
|
|
8
14
|
description?: string;
|
|
9
15
|
extra?: React.ReactNode;
|
|
10
|
-
|
|
11
|
-
isLabelVisible?: boolean;
|
|
16
|
+
labelVariant?: ObjectValues<typeof labelVariants>;
|
|
12
17
|
label?: string;
|
|
13
18
|
name: string;
|
|
14
19
|
value: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const
|
|
1
|
+
const o={light:"light",blue:"blue"},l={default:"default",headline:"headline",bold:"bold",hidden:"hidden"};export{l as labelVariants,o as themes};
|
|
2
2
|
//# sourceMappingURL=checkbox.types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../react/checkbox/checkbox.types.ts"],
|
|
4
|
-
"sourcesContent": ["import { ObjectValues, InputHtmlProps } from '../types';\n\nexport const themes = {\n light: 'light',\n blue: 'blue',\n} as const;\n\nexport type Checkbox = Omit<InputHtmlProps, 'value'> & {\n intermediate?: boolean;\n description?: string;\n extra?: React.ReactNode;\n
|
|
5
|
-
"mappings": "AAEO,MAAMA,EAAS,CACpB,MAAO,QACP,KAAM,MACR",
|
|
6
|
-
"names": ["themes"]
|
|
4
|
+
"sourcesContent": ["import { ObjectValues, InputHtmlProps } from '../types';\n\nexport const themes = {\n light: 'light',\n blue: 'blue',\n} as const;\n\nexport const labelVariants = {\n default: 'default',\n headline: 'headline',\n bold: 'bold',\n hidden: 'hidden',\n} as const;\n\nexport type Checkbox = Omit<InputHtmlProps, 'value'> & {\n intermediate?: boolean;\n description?: string;\n extra?: React.ReactNode;\n labelVariant?: ObjectValues<typeof labelVariants>;\n label?: string;\n name: string;\n value: string;\n showCustomError?: boolean;\n theme?: ObjectValues<typeof themes>;\n hasHover?: boolean;\n isWide?: boolean;\n};\n"],
|
|
5
|
+
"mappings": "AAEO,MAAMA,EAAS,CACpB,MAAO,QACP,KAAM,MACR,EAEaC,EAAgB,CAC3B,QAAS,UACT,SAAU,WACV,KAAM,OACN,OAAQ,QACV",
|
|
6
|
+
"names": ["themes", "labelVariants"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";var
|
|
1
|
+
"use client";var I=Object.defineProperty,L=Object.defineProperties;var F=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var N=(n,o,t)=>o in n?I(n,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[o]=t,p=(n,o)=>{for(var t in o||(o={}))M.call(o,t)&&N(n,t,o[t]);if(g)for(var t of g(o))U.call(o,t)&&N(n,t,o[t]);return n},k=(n,o)=>L(n,F(o));import*as e from"react";import m from"../text";import y from"../checkbox";import V from"../icons/24/arrow-right";import W from"../icons/24/arrow-up";import j from"../visually-hidden";import{mod as v}from"../add-bem-modifiers";import q from"../collapse";import{labelVariants as B}from"../checkbox/checkbox.types";const D=({currentlySelectedValues:n=[],id:o,isSearching:t,options:f,searchResults:h=[],selectAll:r,selectAllLabel:x,setMultipleSelectedValues:w=()=>{},setSelectedValue:z=()=>{},shouldShowItems:O=!0,removeAllValues:P=()=>{}})=>{const a=e.useMemo(()=>!!r,[r]),[l]=e.useState(f.filter(s=>!s.disabled)),[b,i]=e.useState(!!a),T=s=>{z(o,s)},E=()=>{n.length!==l.length?w(o,l.map(s=>s.value)):P(o)};e.useEffect(()=>i(t?!0:!a),[a,t,h]);const _=f.every(s=>s.disabled),H=n.length>0;return e.createElement("fieldset",{className:"form-content__fieldset"},a&&e.createElement("div",{className:v("form-content__chevron-button-wrapper",{hidden:t})},r?e.createElement("div",{className:"form-content__select-all"},e.createElement(y,k(p({},r),{labelVariant:B.hidden,checked:l.length>0&&n.length===l.length,onChange:E,"data-test-select-all":!0,disabled:_}))):null,e.createElement("button",{className:"form-content__chevron-button",onClick:()=>i(s=>!s),type:"button"},e.createElement(m,{elementName:"span",className:v("form-content__select-all-label",{disabled:_}),size:m.sizes.basic},x),e.createElement("div",{className:"form-content__checkbox-category-info-wrapper"},H?e.createElement(m,{className:"form-content__checkbox-category-number",size:m.sizes.interface},n.length):void 0,b?e.createElement("div",{className:"form-content__checkbox-category-icon"},e.createElement(W,null)):e.createElement("div",{className:"form-content__checkbox-category-icon"},e.createElement(V,null))))),e.createElement(q,{duration:300,animateChildren:!!a,isOpen:b},e.createElement("fieldset",{className:"form-content__fieldset"},f.map(s=>{const c=t?h.find(u=>u.key.toLowerCase()===s.value.toLowerCase()):void 0,d=n.includes(s.value),C=e.createElement("div",{key:s.value,className:v("form-content__checkbox-button",{nested:!t&&a})},e.createElement(y,p({onChange:u=>T(u.target.value),checked:d},s)));if(!(!d&&!c&&!O)){if(d&&t&&!c)return e.createElement(j,{key:s.value},C);if(!(!d&&t&&!c))return C}}))))};var ee=D;export{ee as default};
|
|
2
2
|
//# sourceMappingURL=checkbox-category.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../react/form-content/checkbox-category.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport Text from '../text';\nimport Checkbox from '../checkbox';\n\nimport ChevronRight from '../icons/24/arrow-right';\nimport ChevronUp from '../icons/24/arrow-up';\n\nimport { CheckboxCategory as Props } from './form-content.checkbox-list.types';\nimport VisuallyHidden from '../visually-hidden';\nimport { mod } from '../add-bem-modifiers';\nimport Collapse from '../collapse';\n\nconst CheckboxCategory: React.FC<React.PropsWithChildren<Props>> = ({\n currentlySelectedValues = [],\n id,\n isSearching,\n options,\n searchResults = [],\n selectAll,\n selectAllLabel,\n setMultipleSelectedValues = () => {},\n setSelectedValue = () => {},\n shouldShowItems = true,\n removeAllValues = () => {},\n}) => {\n const isExpandable = React.useMemo(\n () => (selectAll ? true : false),\n [selectAll],\n );\n const [availableOptions] = React.useState(\n options.filter(button => !button.disabled),\n );\n\n const [isOpen, setIsOpen] = React.useState(isExpandable ? true : false);\n\n const handleChange = (value: string) => {\n setSelectedValue(id, value);\n };\n\n const handleSelectAll = () => {\n if (currentlySelectedValues.length !== availableOptions.length) {\n setMultipleSelectedValues(\n id,\n availableOptions.map(button => button.value),\n );\n } else {\n removeAllValues(id);\n }\n };\n\n React.useEffect(\n () =>\n isSearching\n ? setIsOpen(true)\n : isExpandable\n ? setIsOpen(false)\n : setIsOpen(true),\n [isExpandable, isSearching, searchResults],\n );\n\n const disableCategory = options.every(checkbox => checkbox.disabled);\n\n const hasSelectedValues = currentlySelectedValues.length > 0;\n\n return (\n <fieldset className=\"form-content__fieldset\">\n {isExpandable && (\n <div\n className={mod('form-content__chevron-button-wrapper', {\n hidden: isSearching,\n })}\n >\n {selectAll ? (\n <div className=\"form-content__select-all\">\n <Checkbox\n {...selectAll}\n
|
|
5
|
-
"mappings": "0bAEA,UAAYA,MAAW,QACvB,OAAOC,MAAU,UACjB,OAAOC,MAAc,cAErB,OAAOC,MAAkB,0BACzB,OAAOC,MAAe,uBAGtB,OAAOC,MAAoB,qBAC3B,OAAS,OAAAC,MAAW,uBACpB,OAAOC,MAAc,
|
|
6
|
-
"names": ["React", "Text", "Checkbox", "ChevronRight", "ChevronUp", "VisuallyHidden", "mod", "Collapse", "CheckboxCategory", "currentlySelectedValues", "id", "isSearching", "options", "searchResults", "selectAll", "selectAllLabel", "setMultipleSelectedValues", "setSelectedValue", "shouldShowItems", "removeAllValues", "isExpandable", "availableOptions", "button", "isOpen", "setIsOpen", "handleChange", "value", "handleSelectAll", "disableCategory", "checkbox", "hasSelectedValues", "__spreadProps", "__spreadValues", "currentState", "isInSearchResults", "item", "isSelected", "node", "e", "checkbox_category_default"]
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport Text from '../text';\nimport Checkbox from '../checkbox';\n\nimport ChevronRight from '../icons/24/arrow-right';\nimport ChevronUp from '../icons/24/arrow-up';\n\nimport { CheckboxCategory as Props } from './form-content.checkbox-list.types';\nimport VisuallyHidden from '../visually-hidden';\nimport { mod } from '../add-bem-modifiers';\nimport Collapse from '../collapse';\nimport { labelVariants } from '../checkbox/checkbox.types';\n\nconst CheckboxCategory: React.FC<React.PropsWithChildren<Props>> = ({\n currentlySelectedValues = [],\n id,\n isSearching,\n options,\n searchResults = [],\n selectAll,\n selectAllLabel,\n setMultipleSelectedValues = () => {},\n setSelectedValue = () => {},\n shouldShowItems = true,\n removeAllValues = () => {},\n}) => {\n const isExpandable = React.useMemo(\n () => (selectAll ? true : false),\n [selectAll],\n );\n const [availableOptions] = React.useState(\n options.filter(button => !button.disabled),\n );\n\n const [isOpen, setIsOpen] = React.useState(isExpandable ? true : false);\n\n const handleChange = (value: string) => {\n setSelectedValue(id, value);\n };\n\n const handleSelectAll = () => {\n if (currentlySelectedValues.length !== availableOptions.length) {\n setMultipleSelectedValues(\n id,\n availableOptions.map(button => button.value),\n );\n } else {\n removeAllValues(id);\n }\n };\n\n React.useEffect(\n () =>\n isSearching\n ? setIsOpen(true)\n : isExpandable\n ? setIsOpen(false)\n : setIsOpen(true),\n [isExpandable, isSearching, searchResults],\n );\n\n const disableCategory = options.every(checkbox => checkbox.disabled);\n\n const hasSelectedValues = currentlySelectedValues.length > 0;\n\n return (\n <fieldset className=\"form-content__fieldset\">\n {isExpandable && (\n <div\n className={mod('form-content__chevron-button-wrapper', {\n hidden: isSearching,\n })}\n >\n {selectAll ? (\n <div className=\"form-content__select-all\">\n <Checkbox\n {...selectAll}\n labelVariant={labelVariants.hidden}\n checked={\n availableOptions.length > 0 &&\n currentlySelectedValues.length === availableOptions.length\n }\n onChange={handleSelectAll}\n data-test-select-all\n disabled={disableCategory}\n />\n </div>\n ) : null}\n <button\n className=\"form-content__chevron-button\"\n onClick={() => setIsOpen(currentState => !currentState)}\n type=\"button\"\n >\n <Text\n elementName=\"span\"\n className={mod('form-content__select-all-label', {\n disabled: disableCategory,\n })}\n size={Text.sizes.basic}\n >\n {selectAllLabel}\n </Text>\n <div className=\"form-content__checkbox-category-info-wrapper\">\n {hasSelectedValues ? (\n <Text\n className=\"form-content__checkbox-category-number\"\n size={Text.sizes.interface}\n >\n {currentlySelectedValues.length}\n </Text>\n ) : undefined}\n {isOpen ? (\n <div className=\"form-content__checkbox-category-icon\">\n <ChevronUp />\n </div>\n ) : (\n <div className=\"form-content__checkbox-category-icon\">\n <ChevronRight />\n </div>\n )}\n </div>\n </button>\n </div>\n )}\n\n <Collapse\n duration={300}\n animateChildren={isExpandable ? true : false}\n isOpen={isOpen}\n >\n {\n <fieldset className=\"form-content__fieldset\">\n {options.map(checkbox => {\n const isInSearchResults = isSearching\n ? searchResults.find(\n item =>\n item.key.toLowerCase() === checkbox.value.toLowerCase(),\n )\n : undefined;\n\n const isSelected = currentlySelectedValues.includes(\n checkbox.value,\n );\n\n const node = (\n <div\n key={checkbox.value}\n className={mod('form-content__checkbox-button', {\n nested: !isSearching && isExpandable,\n })}\n >\n <Checkbox\n onChange={e => handleChange(e.target.value)}\n checked={isSelected}\n {...checkbox}\n />\n </div>\n );\n\n if (!isSelected && !isInSearchResults && !shouldShowItems) {\n return;\n }\n\n if (isSelected && isSearching && !isInSearchResults) {\n return (\n <VisuallyHidden key={checkbox.value}>{node}</VisuallyHidden>\n );\n }\n\n if (!isSelected && isSearching && !isInSearchResults) {\n return;\n }\n\n return node;\n })}\n </fieldset>\n }\n </Collapse>\n </fieldset>\n );\n};\n\nexport default CheckboxCategory;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "Text", "Checkbox", "ChevronRight", "ChevronUp", "VisuallyHidden", "mod", "Collapse", "labelVariants", "CheckboxCategory", "currentlySelectedValues", "id", "isSearching", "options", "searchResults", "selectAll", "selectAllLabel", "setMultipleSelectedValues", "setSelectedValue", "shouldShowItems", "removeAllValues", "isExpandable", "availableOptions", "button", "isOpen", "setIsOpen", "handleChange", "value", "handleSelectAll", "disableCategory", "checkbox", "hasSelectedValues", "__spreadProps", "__spreadValues", "currentState", "isInSearchResults", "item", "isSelected", "node", "e", "checkbox_category_default"]
|
|
7
7
|
}
|
package/react/tag/tag.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Tag as Props, variants, sizes } from './tag.types';
|
|
2
|
+
import { Tag as Props, variants, sizes, themes } from './tag.types';
|
|
3
3
|
declare const Tag: React.FunctionComponent<Props> & {
|
|
4
4
|
sizes: typeof sizes;
|
|
5
|
+
themes: typeof themes;
|
|
5
6
|
variants: typeof variants;
|
|
6
7
|
};
|
|
7
8
|
export default Tag;
|
package/react/tag/tag.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import f from"react";import g from"../text";import{variants as r,sizes as o,themes as m}from"./tag.types";import h from"classnames";const t=({text:i,icon:s,border:p,size:n=o.m,theme:e=m.light,variant:a=r.primary})=>f.createElement(g,{size:n,tight:!0,className:h("tag",{[`tag--variant-${a}`]:a,[`tag--theme-${e}`]:e,"tag--border":p})},s||null,i);t.sizes=o,t.themes=m,t.variants=r;var T=t;export{T as default};
|
|
2
2
|
//# sourceMappingURL=tag.js.map
|
package/react/tag/tag.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../react/tag/tag.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\n\nimport Text from '../text';\n\nimport { Tag as Props, variants, sizes } from './tag.types';\nimport classNames from 'classnames';\n\nconst Tag: React.FunctionComponent<Props> & {\n sizes: typeof sizes;\n variants: typeof variants;\n} = ({
|
|
5
|
-
"mappings": "AAAA,OAAOA,MAAW,QAElB,OAAOC,MAAU,UAEjB,OAAuB,YAAAC,EAAU,SAAAC,
|
|
6
|
-
"names": ["React", "Text", "variants", "sizes", "classNames", "Tag", "text", "icon", "border", "size", "variant", "tag_default"]
|
|
4
|
+
"sourcesContent": ["import React from 'react';\n\nimport Text from '../text';\n\nimport { Tag as Props, variants, sizes, themes } from './tag.types';\nimport classNames from 'classnames';\n\nconst Tag: React.FunctionComponent<Props> & {\n sizes: typeof sizes;\n themes: typeof themes;\n variants: typeof variants;\n} = ({\n text,\n icon,\n border,\n size = sizes.m,\n theme = themes.light,\n variant = variants.primary,\n}) => (\n <Text\n size={size}\n tight\n className={classNames('tag', {\n [`tag--variant-${variant}`]: variant,\n [`tag--theme-${theme}`]: theme,\n 'tag--border': border,\n })}\n >\n {icon ? icon : null}\n {text}\n </Text>\n);\n\nTag.sizes = sizes;\nTag.themes = themes;\nTag.variants = variants;\nexport default Tag;\n"],
|
|
5
|
+
"mappings": "AAAA,OAAOA,MAAW,QAElB,OAAOC,MAAU,UAEjB,OAAuB,YAAAC,EAAU,SAAAC,EAAO,UAAAC,MAAc,cACtD,OAAOC,MAAgB,aAEvB,MAAMC,EAIF,CAAC,CACH,KAAAC,EACA,KAAAC,EACA,OAAAC,EACA,KAAAC,EAAOP,EAAM,EACb,MAAAQ,EAAQP,EAAO,MACf,QAAAQ,EAAUV,EAAS,OACrB,IACEF,EAAA,cAACC,EAAA,CACC,KAAMS,EACN,MAAK,GACL,UAAWL,EAAW,MAAO,CAC3B,CAAC,gBAAgBO,CAAO,EAAE,EAAGA,EAC7B,CAAC,cAAcD,CAAK,EAAE,EAAGA,EACzB,cAAeF,CACjB,CAAC,GAEAD,GAAc,KACdD,CACH,EAGFD,EAAI,MAAQH,EACZG,EAAI,OAASF,EACbE,EAAI,SAAWJ,EACf,IAAOW,EAAQP",
|
|
6
|
+
"names": ["React", "Text", "variants", "sizes", "themes", "classNames", "Tag", "text", "icon", "border", "size", "theme", "variant", "tag_default"]
|
|
7
7
|
}
|
package/react/tag/tag.scss
CHANGED
|
@@ -15,10 +15,22 @@
|
|
|
15
15
|
border-color: var(--ge-tags-primary);
|
|
16
16
|
color: var(--on-ge-on-tags-primary-default);
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
&.tag--border {
|
|
19
19
|
background: transparent;
|
|
20
20
|
color: var(--ge-tags-primary);
|
|
21
21
|
}
|
|
22
|
+
|
|
23
|
+
&.tag--theme-fixed {
|
|
24
|
+
background: var(--ge-fixed-tags-primary);
|
|
25
|
+
border-color: var(--ge-fixed-tags-primary);
|
|
26
|
+
color: var(--on-ge-on-fixed-tags-primary-default);
|
|
27
|
+
|
|
28
|
+
&.tag--border {
|
|
29
|
+
background: transparent;
|
|
30
|
+
border-color: var(--ge-fixed-tags-primary);
|
|
31
|
+
color: var(--on-ge-on-fixed-tags-primary-alternate);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
22
34
|
}
|
|
23
35
|
|
|
24
36
|
&--variant-secondary {
|
|
@@ -26,11 +38,23 @@
|
|
|
26
38
|
border-color: var(--ge-tags-secondary);
|
|
27
39
|
color: var(--on-ge-on-tags-secondary-default);
|
|
28
40
|
|
|
29
|
-
|
|
41
|
+
&.tag--border {
|
|
30
42
|
background: transparent;
|
|
31
43
|
border-color: var(--ge-tags-secondary);
|
|
32
44
|
color: var(--on-ge-on-tags-secondary-default);
|
|
33
45
|
}
|
|
46
|
+
|
|
47
|
+
&.tag--theme-fixed {
|
|
48
|
+
background: var(--ge-fixed-tags-secondary);
|
|
49
|
+
border-color: var(--ge-fixed-tags-secondary);
|
|
50
|
+
color: var(--on-ge-on-fixed-tags-secondary-default);
|
|
51
|
+
|
|
52
|
+
&.tag--border {
|
|
53
|
+
background: transparent;
|
|
54
|
+
border-color: var(--ge-fixed-tags-secondary);
|
|
55
|
+
color: var(--on-ge-on-fixed-tags-secondary-alternate);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
34
58
|
}
|
|
35
59
|
|
|
36
60
|
&--variant-tertiary {
|
|
@@ -38,11 +62,23 @@
|
|
|
38
62
|
border-color: var(--ge-tags-featured);
|
|
39
63
|
color: var(--on-ge-on-tags-featured-default);
|
|
40
64
|
|
|
41
|
-
|
|
65
|
+
&.tag--border {
|
|
42
66
|
background: transparent;
|
|
43
67
|
border-color: var(--ge-tags-featured);
|
|
44
68
|
color: var(--ge-tags-featured);
|
|
45
69
|
}
|
|
70
|
+
|
|
71
|
+
&.tag--theme-fixed {
|
|
72
|
+
background: var(--ge-fixed-tags-featured);
|
|
73
|
+
border-color: var(--ge-fixed-tags-featured);
|
|
74
|
+
color: var(--on-ge-on-fixed-tags-featured-default);
|
|
75
|
+
|
|
76
|
+
&.tag--border {
|
|
77
|
+
background: transparent;
|
|
78
|
+
border-color: var(--ge-fixed-tags-featured);
|
|
79
|
+
color: var(--on-ge-on-fixed-tags-featured-alternate);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
46
82
|
}
|
|
47
83
|
|
|
48
84
|
&--variant-positive {
|
|
@@ -50,9 +86,19 @@
|
|
|
50
86
|
border-color: var(--ge-indicator-tags-positive-alternate);
|
|
51
87
|
color: var(--on-ge-on-indicator-tags-positive-alternate);
|
|
52
88
|
|
|
53
|
-
|
|
89
|
+
&.tag--border {
|
|
54
90
|
border-color: var(--on-ge-on-indicator-tags-positive-alternate);
|
|
55
91
|
}
|
|
92
|
+
|
|
93
|
+
&.tag--theme-fixed {
|
|
94
|
+
background: var(--ge-fixed-indicator-tags-positive);
|
|
95
|
+
border-color: var(--ge-fixed-indicator-tags-positive);
|
|
96
|
+
color: var(--on-ge-on-fixed-indicator-tags-positive);
|
|
97
|
+
|
|
98
|
+
&.tag--border {
|
|
99
|
+
border-color: var(--on-ge-on-fixed-indicator-tags-positive);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
56
102
|
}
|
|
57
103
|
|
|
58
104
|
&--variant-attention {
|
|
@@ -60,9 +106,19 @@
|
|
|
60
106
|
border-color: var(--ge-indicator-tags-attention-alternate);
|
|
61
107
|
color: var(--on-ge-on-indicator-tags-attention-alternate);
|
|
62
108
|
|
|
63
|
-
|
|
109
|
+
&.tag--border {
|
|
64
110
|
border-color: var(--on-ge-on-indicator-tags-attention-alternate);
|
|
65
111
|
}
|
|
112
|
+
|
|
113
|
+
&.tag--theme-fixed {
|
|
114
|
+
background: var(--ge-fixed-indicator-tags-attention);
|
|
115
|
+
border-color: var(--ge-fixed-indicator-tags-attention);
|
|
116
|
+
color: var(--on-ge-on-fixed-indicator-tags-attention);
|
|
117
|
+
|
|
118
|
+
&.tag--border {
|
|
119
|
+
border-color: var(--on-ge-on-fixed-indicator-tags-attention);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
66
122
|
}
|
|
67
123
|
|
|
68
124
|
&--variant-negative {
|
|
@@ -70,9 +126,19 @@
|
|
|
70
126
|
border-color: var(--ge-indicator-tags-negative-alternate);
|
|
71
127
|
color: var(--on-ge-on-indicator-tags-negative-alternate);
|
|
72
128
|
|
|
73
|
-
|
|
129
|
+
&.tag--border {
|
|
74
130
|
border-color: var(--on-ge-on-indicator-tags-negative-alternate);
|
|
75
131
|
}
|
|
132
|
+
|
|
133
|
+
&.tag--theme-fixed {
|
|
134
|
+
background: var(--ge-fixed-indicator-tags-negative);
|
|
135
|
+
border-color: var(--ge-fixed-indicator-tags-negative);
|
|
136
|
+
color: var(--on-ge-on-fixed-indicator-tags-negative);
|
|
137
|
+
|
|
138
|
+
&.tag--border {
|
|
139
|
+
border-color: var(--on-ge-on-fixed-indicator-tags-negative);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
76
142
|
}
|
|
77
143
|
|
|
78
144
|
&--variant-neutral {
|
|
@@ -80,9 +146,19 @@
|
|
|
80
146
|
border-color: var(--ge-indicator-tags-neutral-alternate);
|
|
81
147
|
color: var(--on-ge-on-indicator-tags-neutral-alternate);
|
|
82
148
|
|
|
83
|
-
|
|
149
|
+
&.tag--border {
|
|
84
150
|
border-color: var(--on-ge-on-indicator-tags-neutral-alternate);
|
|
85
151
|
}
|
|
152
|
+
|
|
153
|
+
&.tag--theme-fixed {
|
|
154
|
+
background: var(--ge-fixed-indicator-tags-neutral);
|
|
155
|
+
border-color: var(--ge-fixed-indicator-tags-neutral);
|
|
156
|
+
color: var(--on-ge-on-fixed-indicator-tags-neutral);
|
|
157
|
+
|
|
158
|
+
&.tag--border {
|
|
159
|
+
border-color: var(--on-ge-on-fixed-indicator-tags-neutral);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
86
162
|
}
|
|
87
163
|
|
|
88
164
|
&--variant-information {
|
|
@@ -90,9 +166,19 @@
|
|
|
90
166
|
border-color: var(--ge-indicator-tags-information-alternate);
|
|
91
167
|
color: var(--on-ge-on-indicator-tags-information-alternate);
|
|
92
168
|
|
|
93
|
-
|
|
169
|
+
&.tag--border {
|
|
94
170
|
border-color: var(--on-ge-on-indicator-tags-information-alternate);
|
|
95
171
|
}
|
|
172
|
+
|
|
173
|
+
&.tag--theme-fixed {
|
|
174
|
+
background: var(--ge-fixed-indicator-tags-information);
|
|
175
|
+
border-color: var(--ge-fixed-indicator-tags-information);
|
|
176
|
+
color: var(--on-ge-on-fixed-indicator-tags-information);
|
|
177
|
+
|
|
178
|
+
&.tag--border {
|
|
179
|
+
border-color: var(--on-ge-on-fixed-indicator-tags-information);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
96
182
|
}
|
|
97
183
|
|
|
98
184
|
&--variant-featured {
|
|
@@ -100,8 +186,18 @@
|
|
|
100
186
|
border-color: var(--ge-indicator-tags-featured-alternate);
|
|
101
187
|
color: var(--on-ge-on-indicator-tags-featured-alternate);
|
|
102
188
|
|
|
103
|
-
|
|
189
|
+
&.tag--border {
|
|
104
190
|
border-color: var(--on-ge-on-indicator-tags-featured-alternate);
|
|
105
191
|
}
|
|
192
|
+
|
|
193
|
+
&.tag--theme-fixed {
|
|
194
|
+
background: var(--ge-fixed-indicator-tags-featured);
|
|
195
|
+
border-color: var(--ge-fixed-indicator-tags-featured);
|
|
196
|
+
color: var(--on-ge-on-fixed-indicator-tags-featured);
|
|
197
|
+
|
|
198
|
+
&.tag--border {
|
|
199
|
+
border-color: var(--on-ge-on-fixed-indicator-tags-featured);
|
|
200
|
+
}
|
|
201
|
+
}
|
|
106
202
|
}
|
|
107
203
|
}
|
package/react/tag/tag.types.d.ts
CHANGED
|
@@ -6,6 +6,10 @@ export declare const sizes: {
|
|
|
6
6
|
readonly m: "basic";
|
|
7
7
|
readonly l: "large";
|
|
8
8
|
};
|
|
9
|
+
export declare const themes: {
|
|
10
|
+
readonly fixed: "fixed";
|
|
11
|
+
readonly light: "light";
|
|
12
|
+
};
|
|
9
13
|
export declare const variants: {
|
|
10
14
|
readonly primary: "primary";
|
|
11
15
|
readonly secondary: "secondary";
|
|
@@ -21,6 +25,7 @@ export type Tag = {
|
|
|
21
25
|
text: string;
|
|
22
26
|
border?: boolean;
|
|
23
27
|
size?: ObjectValues<typeof sizes>;
|
|
28
|
+
theme?: ObjectValues<typeof themes>;
|
|
24
29
|
variant?: ObjectValues<typeof variants>;
|
|
25
30
|
icon?: ReactElement;
|
|
26
31
|
};
|
package/react/tag/tag.types.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{sizes as e}from"../text/text.types";const
|
|
1
|
+
import{sizes as e}from"../text/text.types";const o={xs:e.interface,s:e.small,m:e.basic,l:e.large},n={fixed:"fixed",light:"light"},c={primary:"primary",secondary:"secondary",tertiary:"tertiary",positive:"positive",attention:"attention",negative:"negative",neutral:"neutral",information:"information",featured:"featured"};export{o as sizes,n as themes,c as variants};
|
|
2
2
|
//# sourceMappingURL=tag.types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../react/tag/tag.types.ts"],
|
|
4
|
-
"sourcesContent": ["import { ObjectValues } from '../types';\nimport { sizes as TextSizes } from '../text/text.types';\nimport { ReactElement } from 'react';\n\nexport const sizes = {\n xs: TextSizes.interface,\n s: TextSizes.small,\n m: TextSizes.basic,\n l: TextSizes.large,\n} as const;\n\nexport const variants = {\n primary: 'primary',\n secondary: 'secondary',\n tertiary: 'tertiary',\n positive: 'positive',\n attention: 'attention',\n negative: 'negative',\n neutral: 'neutral',\n information: 'information',\n featured: 'featured',\n} as const;\n\nexport type Tag = {\n text: string;\n border?: boolean;\n size?: ObjectValues<typeof sizes>;\n variant?: ObjectValues<typeof variants>;\n icon?: ReactElement;\n};\n"],
|
|
5
|
-
"mappings": "AACA,OAAS,SAASA,MAAiB,qBAG5B,MAAMC,EAAQ,CACnB,GAAID,EAAU,UACd,EAAGA,EAAU,MACb,EAAGA,EAAU,MACb,EAAGA,EAAU,KACf,EAEaE,EAAW,CACtB,QAAS,UACT,UAAW,YACX,SAAU,WACV,SAAU,WACV,UAAW,YACX,SAAU,WACV,QAAS,UACT,YAAa,cACb,SAAU,UACZ",
|
|
6
|
-
"names": ["TextSizes", "sizes", "variants"]
|
|
4
|
+
"sourcesContent": ["import { ObjectValues } from '../types';\nimport { sizes as TextSizes } from '../text/text.types';\nimport { ReactElement } from 'react';\n\nexport const sizes = {\n xs: TextSizes.interface,\n s: TextSizes.small,\n m: TextSizes.basic,\n l: TextSizes.large,\n} as const;\n\nexport const themes = {\n fixed: 'fixed',\n light: 'light',\n} as const;\n\nexport const variants = {\n primary: 'primary',\n secondary: 'secondary',\n tertiary: 'tertiary',\n positive: 'positive',\n attention: 'attention',\n negative: 'negative',\n neutral: 'neutral',\n information: 'information',\n featured: 'featured',\n} as const;\n\nexport type Tag = {\n text: string;\n border?: boolean;\n size?: ObjectValues<typeof sizes>;\n theme?: ObjectValues<typeof themes>;\n variant?: ObjectValues<typeof variants>;\n icon?: ReactElement;\n};\n"],
|
|
5
|
+
"mappings": "AACA,OAAS,SAASA,MAAiB,qBAG5B,MAAMC,EAAQ,CACnB,GAAID,EAAU,UACd,EAAGA,EAAU,MACb,EAAGA,EAAU,MACb,EAAGA,EAAU,KACf,EAEaE,EAAS,CACpB,MAAO,QACP,MAAO,OACT,EAEaC,EAAW,CACtB,QAAS,UACT,UAAW,YACX,SAAU,WACV,SAAU,WACV,UAAW,YACX,SAAU,WACV,QAAS,UACT,YAAa,cACb,SAAU,UACZ",
|
|
6
|
+
"names": ["TextSizes", "sizes", "themes", "variants"]
|
|
7
7
|
}
|
package/tokens/dark.scss
CHANGED
|
@@ -121,6 +121,9 @@ $ge-fixed-tabs-selected-hover: primitives.$coral-120;
|
|
|
121
121
|
$ge-fixed-tabs-unselected-default: primitives.$white-20;
|
|
122
122
|
$ge-fixed-tabs-unselected-disabled: primitives.$white-10;
|
|
123
123
|
$ge-fixed-tabs-unselected-hover: primitives.$white-40;
|
|
124
|
+
$ge-fixed-tags-featured: primitives.$coral-120;
|
|
125
|
+
$ge-fixed-tags-primary: primitives.$blue-5;
|
|
126
|
+
$ge-fixed-tags-secondary: primitives.$white-60;
|
|
124
127
|
$ge-graphs-bar-primary: primitives.$coral-90;
|
|
125
128
|
$ge-graphs-bar-secondary: primitives.$blue-40;
|
|
126
129
|
$ge-graphs-bar-background-primary: primitives.$black-80;
|
|
@@ -291,6 +294,12 @@ $on-ge-on-fixed-selector-unselected-default: primitives.$white-100;
|
|
|
291
294
|
$on-ge-on-fixed-selector-unselected-disabled: primitives.$white-50;
|
|
292
295
|
$on-ge-on-fixed-tabs-default: primitives.$white-100;
|
|
293
296
|
$on-ge-on-fixed-tabs-disabled: primitives.$white-50;
|
|
297
|
+
$on-ge-on-fixed-tags-featured-alternate: primitives.$coral-120;
|
|
298
|
+
$on-ge-on-fixed-tags-featured-default: primitives.$white-100;
|
|
299
|
+
$on-ge-on-fixed-tags-primary-alternate: primitives.$blue-5;
|
|
300
|
+
$on-ge-on-fixed-tags-primary-default: primitives.$blue-100;
|
|
301
|
+
$on-ge-on-fixed-tags-secondary-alternate: primitives.$white-60;
|
|
302
|
+
$on-ge-on-fixed-tags-secondary-default: primitives.$blue-5;
|
|
294
303
|
$on-ge-on-indicator-tags-attention-alternate: primitives.$gold-30;
|
|
295
304
|
$on-ge-on-indicator-tags-attention-default: primitives.$gold-170;
|
|
296
305
|
$on-ge-on-indicator-tags-featured-alternate: primitives.$coral-40;
|
package/tokens/darkmode.css
CHANGED
|
@@ -120,6 +120,9 @@
|
|
|
120
120
|
--ge-fixed-tabs-unselected-default: #ffffff33;
|
|
121
121
|
--ge-fixed-tabs-unselected-disabled: #ffffff1a;
|
|
122
122
|
--ge-fixed-tabs-unselected-hover: #ffffff66;
|
|
123
|
+
--ge-fixed-tags-featured: #c84229;
|
|
124
|
+
--ge-fixed-tags-primary: #f3f4f5;
|
|
125
|
+
--ge-fixed-tags-secondary: #ffffff99;
|
|
123
126
|
--ge-graphs-bar-primary: #fb6447;
|
|
124
127
|
--ge-graphs-bar-secondary: #9ea6ae;
|
|
125
128
|
--ge-graphs-bar-background-primary: #333333;
|
|
@@ -290,6 +293,12 @@
|
|
|
290
293
|
--on-ge-on-fixed-selector-unselected-disabled: #ffffff80;
|
|
291
294
|
--on-ge-on-fixed-tabs-default: #ffffff;
|
|
292
295
|
--on-ge-on-fixed-tabs-disabled: #ffffff80;
|
|
296
|
+
--on-ge-on-fixed-tags-featured-alternate: #c84229;
|
|
297
|
+
--on-ge-on-fixed-tags-featured-default: #ffffff;
|
|
298
|
+
--on-ge-on-fixed-tags-primary-alternate: #f3f4f5;
|
|
299
|
+
--on-ge-on-fixed-tags-primary-default: #0d2134;
|
|
300
|
+
--on-ge-on-fixed-tags-secondary-alternate: #ffffff99;
|
|
301
|
+
--on-ge-on-fixed-tags-secondary-default: #f3f4f5;
|
|
293
302
|
--on-ge-on-indicator-tags-attention-alternate: #f3e6c5;
|
|
294
303
|
--on-ge-on-indicator-tags-attention-default: #443716;
|
|
295
304
|
--on-ge-on-indicator-tags-featured-alternate: #fdbaad;
|
|
@@ -120,6 +120,9 @@ html:not([data-theme]) {
|
|
|
120
120
|
--ge-fixed-tabs-unselected-default: #ffffff33;
|
|
121
121
|
--ge-fixed-tabs-unselected-disabled: #ffffff1a;
|
|
122
122
|
--ge-fixed-tabs-unselected-hover: #ffffff66;
|
|
123
|
+
--ge-fixed-tags-featured: #c84229;
|
|
124
|
+
--ge-fixed-tags-primary: #f3f4f5;
|
|
125
|
+
--ge-fixed-tags-secondary: #ffffff99;
|
|
123
126
|
--ge-graphs-bar-primary: #fa5333;
|
|
124
127
|
--ge-graphs-bar-secondary: #9ea6ae;
|
|
125
128
|
--ge-graphs-bar-background-primary: #dcdee0;
|
|
@@ -290,6 +293,12 @@ html:not([data-theme]) {
|
|
|
290
293
|
--on-ge-on-fixed-selector-unselected-disabled: #ffffff80;
|
|
291
294
|
--on-ge-on-fixed-tabs-default: #ffffff;
|
|
292
295
|
--on-ge-on-fixed-tabs-disabled: #ffffff80;
|
|
296
|
+
--on-ge-on-fixed-tags-featured-alternate: #c84229;
|
|
297
|
+
--on-ge-on-fixed-tags-featured-default: #ffffff;
|
|
298
|
+
--on-ge-on-fixed-tags-primary-alternate: #f3f4f5;
|
|
299
|
+
--on-ge-on-fixed-tags-primary-default: #0d2134;
|
|
300
|
+
--on-ge-on-fixed-tags-secondary-alternate: #ffffff99;
|
|
301
|
+
--on-ge-on-fixed-tags-secondary-default: #f3f4f5;
|
|
293
302
|
--on-ge-on-indicator-tags-attention-alternate: #866c2a;
|
|
294
303
|
--on-ge-on-indicator-tags-attention-default: #443716;
|
|
295
304
|
--on-ge-on-indicator-tags-featured-alternate: #c84229;
|
package/tokens/light.scss
CHANGED
|
@@ -121,6 +121,9 @@ $ge-fixed-tabs-selected-hover: primitives.$coral-120;
|
|
|
121
121
|
$ge-fixed-tabs-unselected-default: primitives.$white-20;
|
|
122
122
|
$ge-fixed-tabs-unselected-disabled: primitives.$white-10;
|
|
123
123
|
$ge-fixed-tabs-unselected-hover: primitives.$white-40;
|
|
124
|
+
$ge-fixed-tags-featured: primitives.$coral-120;
|
|
125
|
+
$ge-fixed-tags-primary: primitives.$blue-5;
|
|
126
|
+
$ge-fixed-tags-secondary: primitives.$white-60;
|
|
124
127
|
$ge-graphs-bar-primary: primitives.$coral-100;
|
|
125
128
|
$ge-graphs-bar-secondary: primitives.$blue-40;
|
|
126
129
|
$ge-graphs-bar-background-primary: primitives.$light-grey-15;
|
|
@@ -291,6 +294,12 @@ $on-ge-on-fixed-selector-unselected-default: primitives.$white-100;
|
|
|
291
294
|
$on-ge-on-fixed-selector-unselected-disabled: primitives.$white-50;
|
|
292
295
|
$on-ge-on-fixed-tabs-default: primitives.$white-100;
|
|
293
296
|
$on-ge-on-fixed-tabs-disabled: primitives.$white-50;
|
|
297
|
+
$on-ge-on-fixed-tags-featured-alternate: primitives.$coral-120;
|
|
298
|
+
$on-ge-on-fixed-tags-featured-default: primitives.$white-100;
|
|
299
|
+
$on-ge-on-fixed-tags-primary-alternate: primitives.$blue-5;
|
|
300
|
+
$on-ge-on-fixed-tags-primary-default: primitives.$blue-100;
|
|
301
|
+
$on-ge-on-fixed-tags-secondary-alternate: primitives.$white-60;
|
|
302
|
+
$on-ge-on-fixed-tags-secondary-default: primitives.$blue-5;
|
|
294
303
|
$on-ge-on-indicator-tags-attention-alternate: primitives.$gold-140;
|
|
295
304
|
$on-ge-on-indicator-tags-attention-default: primitives.$gold-170;
|
|
296
305
|
$on-ge-on-indicator-tags-featured-alternate: primitives.$coral-120;
|
package/tokens/lightmode.css
CHANGED
|
@@ -120,6 +120,9 @@
|
|
|
120
120
|
--ge-fixed-tabs-unselected-default: #ffffff33;
|
|
121
121
|
--ge-fixed-tabs-unselected-disabled: #ffffff1a;
|
|
122
122
|
--ge-fixed-tabs-unselected-hover: #ffffff66;
|
|
123
|
+
--ge-fixed-tags-featured: #c84229;
|
|
124
|
+
--ge-fixed-tags-primary: #f3f4f5;
|
|
125
|
+
--ge-fixed-tags-secondary: #ffffff99;
|
|
123
126
|
--ge-graphs-bar-primary: #fa5333;
|
|
124
127
|
--ge-graphs-bar-secondary: #9ea6ae;
|
|
125
128
|
--ge-graphs-bar-background-primary: #dcdee0;
|
|
@@ -290,6 +293,12 @@
|
|
|
290
293
|
--on-ge-on-fixed-selector-unselected-disabled: #ffffff80;
|
|
291
294
|
--on-ge-on-fixed-tabs-default: #ffffff;
|
|
292
295
|
--on-ge-on-fixed-tabs-disabled: #ffffff80;
|
|
296
|
+
--on-ge-on-fixed-tags-featured-alternate: #c84229;
|
|
297
|
+
--on-ge-on-fixed-tags-featured-default: #ffffff;
|
|
298
|
+
--on-ge-on-fixed-tags-primary-alternate: #f3f4f5;
|
|
299
|
+
--on-ge-on-fixed-tags-primary-default: #0d2134;
|
|
300
|
+
--on-ge-on-fixed-tags-secondary-alternate: #ffffff99;
|
|
301
|
+
--on-ge-on-fixed-tags-secondary-default: #f3f4f5;
|
|
293
302
|
--on-ge-on-indicator-tags-attention-alternate: #866c2a;
|
|
294
303
|
--on-ge-on-indicator-tags-attention-default: #443716;
|
|
295
304
|
--on-ge-on-indicator-tags-featured-alternate: #c84229;
|