Skip to content

Commit

Permalink
chore: add jsdoc to tasks/css-tools.js
Browse files Browse the repository at this point in the history 
Co-authored-by: Rúben Carvalho <[email protected]>
  • Loading branch information
@castastrophe @rubencarvalho
castastrophe and rubencarvalho committed Jan 15, 2025
1 parent c71d544 commit 8d516db
Show file tree
Hide file tree
Showing 8 changed files with 159 additions and 333 deletions.
2 changes: 1 addition & 1 deletion packages/thumbnail/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
"@spectrum-web-components/opacity-checkerboard": "^1.0.1"
},
"devDependencies": {
"@spectrum-css/thumbnail": "7.0.0-s2-foundations.17"
"@spectrum-css/thumbnail": "7.0.0-s2-foundations.18"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
Expand Down
275 changes: 145 additions & 130 deletions packages/thumbnail/src/spectrum-thumbnail.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,125 @@ governing permissions and limitations under the License.
*/

/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host,
:host([size='500']) {
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500);
}

:host([size='50']) {
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-50);
}

:host([size='75']) {
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-75);
}

:host([size='100']) {
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-100);
}

:host([size='200']) {
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-200);
}

:host([size='300']) {
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-300);
}

:host([size='400']) {
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-400);
}

:host([size='600']) {
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-600);
}

:host([size='700']) {
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-700);
}

:host([size='800']) {
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-800);
}

:host([size='900']) {
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-900);
}

:host([size='1000']) {
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-1000);
}

:host {
inline-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size));
block-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size));
--spectrum-thumbnail-size: var(
--mod-thumbnail-size,
var(--spectrum-thumbnail-sized-size)
);
--spectrum-thumbnail-border-color: var(
--highcontrast-thumbnail-border-color,
var(
--mod-thumbnail-border-color,
rgba(
var(--spectrum-gray-800-rgb),
var(--spectrum-thumbnail-border-opacity)
)
)
);
--spectrum-thumbnail-border-color-selected: var(
--highcontrast-thumbnail-border-color-selected,
var(
--mod-thumbnail-border-color-selected,
var(--spectrum-accent-color-800)
)
);
--spectrum-thumbnail-border-width: var(
--mod-thumbnail-border-width,
var(--spectrum-border-width-100)
);
--spectrum-thumbnail-border-width-selected: var(
--mod-thumbnail-border-width-selected,
var(--spectrum-border-width-200)
);
--spectrum-thumbnail-border-radius-default: var(
--mod-thumbnail-border-radius,
var(--spectrum-thumbnail-border-radius)
);
--spectrum-thumbnail-layer-border-color-inner: var(
--highcontrast-thumbnail-layer-border-color-inner,
var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-white))
);
--spectrum-thumbnail-layer-border-color-outer: var(
--highcontrast-thumbnail-layer-border-color-outer,
var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-gray-500))
);
--spectrum-thumbnail-layer-border-width-inner: var(
--mod-thumbnail-layer-border-width-inner,
var(--spectrum-border-width-400)
);
--spectrum-thumbnail-layer-border-width-outer: var(
--mod-thumbnail-layer-border-width-outer,
var(--spectrum-border-width-100)
);
--spectrum-thumbnail-focus-indicator-thickness: var(
--mod-thumbnail-focus-indicator-thickness,
var(--spectrum-focus-indicator-thickness)
);
--spectrum-thumbnail-focus-indicator-gap: var(
--mod-thumbnail-focus-indicator-gap,
var(--spectrum-focus-indicator-gap)
);
--spectrum-thumbnail-focus-indicator-color: var(
--highcontrast-thumbnail-focus-indicator-color,
var(
--mod-thumbnail-focus-indicator-color,
var(--spectrum-focus-indicator-color)
)
);
--spectrum-thumbnail-color-opacity-disabled: var(
--spectrum-thumbnail-opacity-disabled
);
inline-size: var(--spectrum-thumbnail-size);
block-size: var(--spectrum-thumbnail-size);
z-index: 0;
margin: 0;
padding: 0;
Expand All @@ -24,29 +140,16 @@ governing permissions and limitations under the License.

:host,
:host:before {
border-radius: var(
--mod-thumbnail-border-radius,
var(--spectrum-thumbnail-border-radius)
);
border-radius: var(--spectrum-thumbnail-border-radius-default);
}

:host:before {
content: '';
z-index: 2;
inline-size: 100%;
block-size: 100%;
box-shadow: inset 0 0 0
var(
--mod-thumbnail-border-width,
var(--spectrum-thumbnail-border-width)
)
var(
--highcontrast-thumbnail-border-color,
var(
--mod-thumbnail-border-color,
var(--spectrum-thumbnail-border-color-rgba)
)
);
box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-width)
var(--spectrum-thumbnail-border-color);
position: absolute;
}

Expand All @@ -64,93 +167,45 @@ governing permissions and limitations under the License.
:host([focused]):after {
content: '';
border-style: solid;
border-width: var(
--mod-thumbnail-focus-indicator-thickness,
var(--spectrum-thumbnail-focus-indicator-thickness)
);
border-color: var(
--highcontrast-thumbnail-focus-indicator-color,
var(
--mod-thumbnail-focus-indicator-color,
var(--spectrum-thumbnail-focus-indicator-color)
)
);
border-radius: var(
--mod-thumbnail-border-radius,
var(--spectrum-thumbnail-border-radius)
);
border-width: var(--spectrum-thumbnail-focus-indicator-thickness);
border-color: var(--spectrum-thumbnail-focus-indicator-color);
border-radius: var(--spectrum-thumbnail-border-radius-default);
position: absolute;
inset-block-start: calc(
(
var(
--mod-thumbnail-focus-indicator-gap,
var(--spectrum-thumbnail-focus-indicator-gap)
) +
var(
--mod-thumbnail-focus-indicator-thickness,
var(--spectrum-thumbnail-focus-indicator-thickness)
)
var(--spectrum-thumbnail-focus-indicator-gap) +
var(--spectrum-thumbnail-focus-indicator-thickness)
) * -1
);
inset-block-end: calc(
(
var(
--mod-thumbnail-focus-indicator-gap,
var(--spectrum-thumbnail-focus-indicator-gap)
) +
var(
--mod-thumbnail-focus-indicator-thickness,
var(--spectrum-thumbnail-focus-indicator-thickness)
)
var(--spectrum-thumbnail-focus-indicator-gap) +
var(--spectrum-thumbnail-focus-indicator-thickness)
) * -1
);
inset-inline-start: calc(
(
var(
--mod-thumbnail-focus-indicator-gap,
var(--spectrum-thumbnail-focus-indicator-gap)
) +
var(
--mod-thumbnail-focus-indicator-thickness,
var(--spectrum-thumbnail-focus-indicator-thickness)
)
var(--spectrum-thumbnail-focus-indicator-gap) +
var(--spectrum-thumbnail-focus-indicator-thickness)
) * -1
);
inset-inline-end: calc(
(
var(
--mod-thumbnail-focus-indicator-gap,
var(--spectrum-thumbnail-focus-indicator-gap)
) +
var(
--mod-thumbnail-focus-indicator-thickness,
var(--spectrum-thumbnail-focus-indicator-thickness)
)
var(--spectrum-thumbnail-focus-indicator-gap) +
var(--spectrum-thumbnail-focus-indicator-thickness)
) * -1
);
}

:host([focused]) .image-wrapper {
border-radius: var(
--mod-thumbnail-border-radius,
var(--spectrum-thumbnail-border-radius)
);
border-radius: var(--spectrum-thumbnail-border-radius-default);
overflow: hidden;
}

:host([layer]) {
border-style: solid;
border-width: var(
--mod-thumbnail-layer-border-width-outer,
var(--spectrum-thumbnail-layer-border-width-outer)
);
border-color: var(
--highcontrast-thumbnail-layer-border-color-outer,
var(
--mod-thumbnail-layer-border-color-outer,
var(--spectrum-thumbnail-layer-border-color-outer)
)
);
border-width: var(--spectrum-thumbnail-layer-border-width-outer);
border-color: var(--spectrum-thumbnail-layer-border-color-outer);
box-sizing: border-box;
justify-content: center;
align-items: center;
Expand All @@ -163,65 +218,28 @@ governing permissions and limitations under the License.

:host([layer][selected]) {
outline-style: solid;
outline-color: var(
--highcontrast-thumbnail-border-color-selected,
var(
--mod-thumbnail-border-color-selected,
var(--spectrum-thumbnail-border-color-selected)
)
);
outline-width: var(
--mod-thumbnail-border-width-selected,
var(--spectrum-thumbnail-border-width-selected)
);
outline-color: var(--spectrum-thumbnail-border-color-selected);
outline-width: var(--spectrum-thumbnail-border-width-selected);
outline-offset: calc(
var(
--mod-thumbnail-border-width-selected,
var(--spectrum-thumbnail-border-width-selected)
) -
var(
--mod-thumbnail-layer-border-width-inner,
var(--spectrum-thumbnail-layer-border-width-inner)
)
var(--spectrum-thumbnail-border-width-selected) -
var(--spectrum-thumbnail-layer-border-width-inner)
);
}

.layer-inner {
inline-size: calc(
var(--spectrum-thumbnail-size) -
(
var(
--mod-thumbnail-layer-border-width-inner,
var(--spectrum-thumbnail-layer-border-width-inner)
)
) * 2
var(--spectrum-thumbnail-layer-border-width-inner) * 2
);
block-size: calc(
var(--spectrum-thumbnail-size) -
(
var(
--mod-thumbnail-layer-border-width-inner,
var(--spectrum-thumbnail-layer-border-width-inner)
)
) * 2
var(--spectrum-thumbnail-layer-border-width-inner) * 2
);
outline-style: solid;
outline-color: var(
--highcontrast-thumbnail-layer-border-color-inner,
var(
--mod-thumbnail-layer-border-color-inner,
var(--spectrum-thumbnail-layer-border-color-inner)
)
);
outline-color: var(--spectrum-thumbnail-layer-border-color-inner);
outline-width: calc(
var(
--mod-thumbnail-layer-border-width-inner,
var(--spectrum-thumbnail-layer-border-width-inner)
) -
var(
--mod-thumbnail-layer-border-width-outer,
var(--spectrum-thumbnail-layer-border-width-outer)
)
var(--spectrum-thumbnail-layer-border-width-inner) -
var(--spectrum-thumbnail-layer-border-width-outer)
);
justify-content: center;
align-items: center;
Expand Down Expand Up @@ -254,10 +272,7 @@ governing permissions and limitations under the License.
z-index: 0;
block-size: 100%;
inline-size: 100%;
border-radius: var(
--mod-thumbnail-border-radius,
var(--spectrum-thumbnail-border-radius)
);
border-radius: var(--spectrum-thumbnail-border-radius-default);
background-position: 50%;
background-size: cover;
position: absolute;
Expand Down
Loading

0 comments on commit 8d516db

Please sign in to comment.